@charset "utf-8";

/*スマホ版*/
@media(max-width:767px) {

    /* CSS Document */
    html {
        scroll-behavior: smooth;
        width: 100%;
    }

    body {
        font-size: 100%;
        line-height: 1.7em;
        color: #535252;
        margin: 0;
        padding: 0;
        font-family: sans-serif
    }

    .wrap {
        width: 100%;
    }

    .hm1 {
        width: 100%;
        height: 600px;
        background-image: url(../img/flower.jpg);
        background-repeat: no-repeat;
        background-color: #E5E3E4;
    }

    header {
        top: 0;
        width: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
    }

    .header .main__nav a {
        text-decoration: none;
        color: #000;
    }

    .header__logo img {
        width: 80px;
        height: 80px;
        margin: 10px 0 0 10px;

    }

    .header__logo img:hover {
        opacity: 0.5;
    }

    .header .main__nav {
        display: flex;
        list-style-type: none;
        gap: 30px;
        height: 50px;
        align-items: center;
        text-align: center;
        color: #000;
        font-size: 17px;
        padding: 10px 0 0 0;
        margin-right: 20px;
    }

    header .main__nav a:hover {
        color: #000;
        opacity: 0.5;
    }

    .header_menu_ul a {
        color: #000;
    }

    .header_menu_ul {
        display: flex;
        list-style-type: none;
        gap: 10px;
        padding: 100px 0 0 45px;
        font-family: Garamond;
        font-weight: bold;
        margin: 0;
        color: #000;
    }

    .top:hover {
        opacity: 0.5;
    }

    h1 {
        font-size: 50px;
        font-family: Garamond;
        margin: 0;
        padding-top: 50px;
        text-align: center;
        width: 100%;
    }

    h3 {
        padding: 20px 0 0 30px;
        text-align: center;
        font-family: 游明朝;
        font-size: 17px;
        margin: 0;
        width: 100%;
    }

    main .main {
        width: 100%;
    }

    .action {
        text-align: center;
    }

    .contact2 {
        width: 350px;
        height: 30px;
        border-radius: 10px;
        border-style: solid;
        border-color: #ACAAAF;
        font-size: 15px;
        padding: 13px 0 0 10px;
    }

    .contact3 {
        resize: vertical;
        width: 350px;
        height: 300px;
        border-radius: 10px;
        border-style: solid;
        border-color: #ACAAAF;
        font-size: 15px;
        padding: 13px 0 0 10px;
    }

    textarea:focus {
        outline: 2px gray solid;
    }

    .contactall {
        padding-top: 20px;
        border-radius: 3px;
    }

    .action {
        padding-bottom: 50px;
    }

    .submit {
        background-color: #535252;
        color: #fff;
        width: 450px;
        height: 40px;
        border-radius: 10px;
        border-style: solid;
        border-color: transparent;
        font-size: 17px;
    }

    .submit:hover {
        opacity: 0.5;
    }

    footer {
        height: 200px;
        background-color: #E5E3E4;
        background-image: url(../img/fflower.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .copyright {
        text-align: center;
        padding-top: 170px;
        margin: 0;
        font-size: 10px;
    }

}


/*768px~1500px*/
@media(min-width:767px) {

    /* CSS Document */
    html {
        scroll-behavior: smooth;
    }

    body {
        font-size: 100%;
        line-height: 1.7em;
        color: #535252;
        margin: 0;
        padding: 0;
        font-family: sans-serif
    }

    .wrap {
        width: 100%;
    }

    header {
        top: 0;
        width: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .main__nav a {
        text-decoration: none;
        color: #000;
    }

    .header__logo img {
        width: 80px;
        height: 80px;
        margin: 10px 0 0 30px;

    }

    .header__logo img:hover {
        opacity: 0.5;
    }

    .header .main__nav {
        display: flex;
        list-style-type: none;
        gap: 30px;
        height: 50px;
        align-items: center;
        text-align: center;
        color: #000;
        font-size: 17px;
        padding-top: 10px;
        margin-right: 30px;
    }

    header .main__nav a:hover {
        color: #000;
        opacity: 0.5;
    }


    .header_menu_ul {
        display: flex;
        list-style-type: none;
        gap: 20px;
        padding: 20px 0 0 100px;
        font-family: Garamond;
        font-weight: bold;
        margin: 0;
    }

    .header_menu a {
        text-decoration: none;
        color: #535252;
        border-bottom: 1px solid #535252;
    }

    .top:hover {
        opacity: 0.5;
    }

    h1 {
        font-size: 50px;
        font-family: Garamond;
        margin: 0;
        padding-top: 50px;
        text-align: center;
        width: 100%;
    }

    h3 {
        padding: 20px 0 0 30px;
        text-align: center;
        font-family: 游明朝;
        font-size: 17px;
        margin: 0;
        width: 100%;
    }

    main .main {
        width: 100%;
    }

    .action {
        text-align: center;
    }

    .contact2 {
        width: 500px;
        height: 30px;
        border-radius: 10px;
        border-style: solid;
        border-color: #ACAAAF;
        font-size: 15px;
        padding: 13px 0 0 10px;
    }

    .contact3 {
        resize: vertical;
        width: 500px;
        height: 300px;
        border-radius: 10px;
        border-style: solid;
        border-color: #ACAAAF;
        font-size: 15px;
        padding: 13px 0 0 10px;
    }

    textarea:focus {
        outline: 2px gray solid;
    }

    .contactall {
        padding-top: 20px;
        border-radius: 3px;
    }

    .action {
        padding-bottom: 50px;
    }

    .submit {
        background-color: #535252;
        color: #fff;
        width: 500px;
        height: 40px;
        border-radius: 10px;
        border-style: solid;
        border-color: transparent;
        font-size: 17px;
    }

    .submit:hover {
        opacity: 0.5;
    }

    footer {
        height: 238px;
        background-color: #E5E3E4;
        background-image: url(../img/fflower.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .copyright {
        text-align: center;
        padding-top: 210px;
        margin: 0;
        font-size: 10px;
    }

}



/*1400px~の見た目*/
@media(min-width:1500px) {

    /* CSS Document */
    html {
        scroll-behavior: smooth;
    }

    body {
        font-size: 100%;
        line-height: 1.7em;
        color: #535252;
        margin: 0;
        padding: 0;
        font-family: sans-serif
    }

    .wrap {
        width: 100%;
    }

    header {
        top: 0;
        width: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .main__nav a {
        text-decoration: none;
        color: #000;
    }

    .header__logo img {
        width: 80px;
        height: 80px;
        margin: 10px 0 0 30px;

    }

    .header__logo img:hover {
        opacity: 0.5;
    }

    .header .main__nav {
        display: flex;
        list-style-type: none;
        gap: 30px;
        height: 50px;
        align-items: center;
        text-align: center;
        color: #000;
        font-size: 17px;
        padding-top: 10px;
        margin-right: 30px;
    }

    header .main__nav a:hover {
        color: #000;
        opacity: 0.5;
    }


    .header_menu_ul {
        display: flex;
        list-style-type: none;
        gap: 20px;
        padding: 20px 0 0 400px;
        font-family: Garamond;
        font-weight: bold;
        margin: 0;
    }

    .header_menu a {
        text-decoration: none;
        color: #535252;
        border-bottom: 1px solid #535252;
    }

    .top:hover {
        opacity: 0.5;
    }

    h1 {
        font-size: 60px;
        font-family: Garamond;
        margin: 0;
        padding-top: 50px;
        text-align: center;
        width: 100%;
    }

    h3 {
        padding: 20px 0 0 30px;
        text-align: center;
        font-family: 游明朝;
        font-size: 17px;
        margin: 0;
        width: 100%;
    }

    main .main {
        width: 100%;
    }

    .action {
        text-align: center;
    }

    .contact2 {
        width: 700px;
        height: 30px;
        border-radius: 10px;
        border-style: solid;
        border-color: #ACAAAF;
        font-size: 15px;
        padding: 13px 0 0 10px;
    }

    .contact3 {
        resize: vertical;
        width: 700px;
        height: 300px;
        border-radius: 10px;
        border-style: solid;
        border-color: #ACAAAF;
        font-size: 15px;
        padding: 13px 0 0 10px;
    }

    textarea:focus {
        outline: 2px gray solid;
    }

    .contactall {
        padding-top: 20px;
        border-radius: 3px;
    }

    .action {
        padding-bottom: 50px;
    }

    .submit {
        background-color: #535252;
        color: #fff;
        width: 700px;
        height: 40px;
        border-radius: 10px;
        border-style: solid;
        border-color: transparent;
        font-size: 17px;
    }

    .submit:hover {
        opacity: 0.5;
    }

    footer {
        height: 238px;
        background-color: #E5E3E4;
        background-image: url(../img/fflower.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .copyright {
        text-align: center;
        padding-top: 210px;
        margin: 0;
        font-size: 10px;
    }

}