/*フォントサイズレスポンシブ指定*/
/*フォントサイズレスポンシブ指定*/
/*フォントサイズレスポンシブ指定*/


/*横幅320px未満の環境だと固定*/



header p {
    font-size: 3rem;
}

h1 {
    font-size: 2.5rem;
}

main {
    font-size: 1.5rem;
}

.SITE-MAP {
    font-size: 2rem;
}

.Foot-img p {
    font-size: 1.4rem;
}

.Foot-img a {
    font-size: 1.2rem;
}

.Top {
    font-size: 1.5rem;
}



/*横幅320~1024pxの環境でレスポンシブ
calc(最小値 + ((1vw - 3.2px※最小値を適用させる横幅1％分)*18.47※（（最大値を適用したい横幅の1% – 最小値を適用したい横幅の1%）× ◯ = 文字サイズの最大値と最小値の差));*/
@media (min-width: 320px) {


    header p {
        font-size: calc(3rem + ((1vw - 3.2px)*2.84));
    }

    h1 {
        font-size: calc(2.5rem + ((1vw - 3.2px)*0.7));
    }

    main {
        font-size: calc(1.5rem + ((1vw - 3.2px)*0.7));
    }

    .SITE-MAP {
        font-size: calc(1.5rem + ((1vw - 3.2px)*0.7));
    }

    .Foot-img p {
        font-size: calc(1.4rem + ((1vw - 3.2px)*0.4));
    }

    .Foot-img a {
        font-size: calc(1.2rem + ((1vw - 3.2px)*0.4));
    }

}

/*横幅1024px以上の環境だとフォントサイズ36pxで固定*/
@media (min-width: 1024px) {

    header p {
        font-size: 5rem;
    }

    h1 {
        font-size: 3rem;
    }

    main {
        font-size: 2rem;
    }

    .SITE-MAP {
        font-size: 2.5rem;
    }

    .Foot-img p {
        font-size: 1.7rem;
    }

    .Foot-img a {
        font-size: 1.5rem;
    }

    .Top {
        font-size: 2.5rem;
    }

}







/* iPhone用ここからスタート */
/*--------------------------------------------------------------------------------------------*/
@media screen and (max-width:766px) {
    @charset "UTF-8";

    html {

        /* ルートのフォントサイズを10pxに設定しておく */
        font-size: 62.5%;
    }


    /* トップページ */
    /*---------------------------------------ボディ----------------------------------------*/

    /* ボディ下地*/
    body {
        width: 100%;
        height: 100vh;
        font-size: 1em;
        font-family: sans-serif;
        background-color: white;
        color: black;
    }

    body ::-webkit-scrollbar {
        display: none;
    }


    #Grid-wrap {
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: "Header""Main""Section""Footer";
    }

    a {
        text-decoration: none;
        color: white;
    }

    /*---------------------------------------------------ヘッダー---------------------------------------------------------*/

    header {
        width: 100%;
        display: grid;
        grid-area: Header;
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(4, 1fr);
        background-image: url("../img/little_bush.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .logo {
        grid-column: 2/6;
        grid-row: 2/4;
        margin: auto;
    }

    header .logo .logo-img {
        width: 100%;
    }

    header p {
        grid-column: 1/-1;
        grid-row: 2/4;
        margin: auto;
        text-align: center;
        font-weight: normal;
        color: white;
    }


    /*---------------------------------------------------メイン---------------------------------------------------*/


    main {
        width: 80%;
        margin: 0 auto;
        padding: 5% 0;
        display: grid;
        grid-template-rows: repeat(7, auto);
        grid-template-columns: repeat(10, 1fr);
        grid-area: Main;
        text-align: left;
        background-image: url("../img/paper.jpeg");
        background-repeat: repeat-y;
    }

    h1 {
        text-align: center;
        line-height: 1;
        grid-column: 2/-2;
    }

    .edit-top {
        line-height: 1.5;
        text-align: left;
        margin: 10% auto;
        grid-column: 2/-2;
    }


    .img-top {
        text-align: center;
        width: 100%;
        grid-column: 2/-2;
        padding-bottom: 5%;
    }



    .section-img1 {
        width: 100%;
        display: block;
    }

    .Jump {
        grid-column: 4/8;
        text-align: center;
    }

    .top-button {
        display: block;
        background-color: black;
        border-radius: 5rem;
        text-align: center;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }


    .top-button:hover {
        background-color: lightgreen;
    }

    .Top {
        display: block;
        text-align: center;
        padding: 5%;
        font-size: 2rem;
        color: white;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;

    }

    .Top:hover {
        color: black;
    }


    /*---------------------------------------------------Section---------------------------------------------------*/



    .Foot-img {
        width: 100%;
        display: grid;
        grid-area: Section;
        text-align: center;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(8, 1fr);
        background-color: darkseagreen;
        background-size: cover;
        background-repeat: no-repeat;
        color: white;

    }

    .SITE-MAP {
        grid-column: 3/-3;
        grid-row: 2/3;
        font-size:2rem;
        text-align: center;
                margin:auto 0;
    }

    .Map1 {
        display: inline-block;
        grid-column: 2/-2;
        grid-row: 3/4;
        text-align: center;
        padding: 2% 0;
        margin:auto 0;
    }

    .Map2 {
        display: inline-block;
        grid-column: 2/-2;
        grid-row: 4/5;
        text-align: center;
        padding: 2% 0;
                margin:auto 0;
    }

    .Map4 {
        display: inline-block;
        grid-column: 2/-2;
        grid-row: 5/6;
        text-align: center;
        padding: 2% 0;
                margin:auto 0;
    }

    .Map5 {
        display: inline-block;
        grid-column: 2/-2;
        grid-row: 6/7;
        text-align: center;
        padding: 2% 0;
                margin:auto 0;
    }

    .Map7 {
        display: inline-block;
        grid-column: 2/-2;
        grid-row: 7/8;
        text-align: center;
        padding: 2% 0;
                margin:auto 0;
    }


    .Foot-img p {
        font-weight: bold;
        display: inline-block;
        text-align: center;
        padding: 2% 0;
    }

    .Foot-img a {
        font-weight: normal;
        display: inline-block;
        text-align: left;
        font-size: 1.5rem;
        padding: 2%;
    }


    .Foot-img a:hover {
        color: lightgreen;
    }








    /*---------------------------------------------------フッター ---------------------------------------------------*/


    footer {
        width: 100%;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        grid-area: Footer;
        grid-column: 1/-1;
        text-align: center;
        padding: 3.5% 0;
    }

    footer a {}

    footer a .Facebook-img {
        width: 10%;
        padding-bottom: 1%;
    }

    footer .copy-right {
        font-size: 1.5rem;
        grid-row: -2/-1;
        text-align: center;
        padding-top: 1%;
    }


    /*------------------------------------------------------------------------------------------------------*/
}








/* iPhone用ここからスタート */
/*--------------------------------------------------------------------------------------------*/
@media screen and (min-width:767px) {
    @charset "UTF-8";

    html {
        /* ルートのフォントサイズを10pxに設定しておく */
        font-size: 62.5%;
    }


    /* トップページ */
    /*---------------------------------------ボディ----------------------------------------*/

    /* ボディ下地*/
    body {
        width: 100%;
        height: 100vh;
        font-size: 1em;
        font-family: sans-serif;
        background-color: white;
        color: black;
    }

    body ::-webkit-scrollbar {
        display: none;
    }


    #Grid-wrap {
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: "Header""Main""Section""Footer";
    }

    a {
        text-decoration: none;
        color: white;
    }

    /*---------------------------------------------------ヘッダー---------------------------------------------------------*/

    header {
        width: 100%;
        display: grid;
        grid-area: Header;
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(4, 1fr);
        background-image: url("../img/little_bush.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .logo {
        grid-column: 2/5;
        grid-row: 2/4;
        margin: auto;
    }

    header .logo .logo-img {
        width: 100%;
    }

    header p {
        grid-column: 1/-1;
        grid-row: 2/4;
        margin: auto;
        text-align: center;
        font-weight: normal;
        color: white;
    }


    /*---------------------------------------------------メイン---------------------------------------------------*/


    main {
        width: 80%;
        margin: 0 auto;
        padding: 5% 0;
        display: grid;
        grid-template-rows: repeat(7, auto);
        grid-template-columns: repeat(10, 1fr);
        grid-area: Main;
        text-align: left;
        background-image: url("../img/paper.jpeg");

        background-repeat: repeat-y;
    }

    h1 {
        text-align: center;
        line-height: 1;
        grid-column: 2/-2;
    }

    .edit-top {
        line-height: 2;
        text-align: left;
        margin: 5% 0;
        grid-column: 2/-2;
    }


    .img-top {
        text-align: left;
        width: 100%;
        grid-column: 2/-2;
        padding-bottom: 5%;
    }
    
    .img-bottom{
             text-align: center;
        width: 100%;
        grid-column: 2/-2;
        padding-bottom: 5%;   
    }



    .section-img1 {
        width: 100%;
        display: block;
    }

    .Jump {
        grid-column: 5/7;
        text-align: center;
    }

    .top-button {
        display: block;
        background-color: black;
        border-radius: 5rem;
        text-align: center;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }


    .top-button:hover {
        background-color: lightgreen;
    }

    .Top {
        display: block;
        text-align: center;
        padding: 5%;
        font-size: 2rem;
        color: white;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;

    }

    .Top:hover {
        color: black;
    }



    /*---------------------------------------------------Section---------------------------------------------------*/




    .Foot-img {
        width: 100%;
        padding:2% 0;
        display: grid;
        grid-area: Section;
        grid-template-columns: repeat(7, auto);
        grid-template-rows: auto;
        background-color: darkseagreen;
        background-size: cover;
        background-repeat: no-repeat;
        grid-column: 1/-1;
        color: white;

    }

    .SITE-MAP {
        margin: auto;


    }

    .Map1 .Map2 .Map4 .Map5 .Map7 {
        display: block;
        margin: auto;

    }

    .Foot-img p {

        font-weight: bold;
        margin: auto;
        display: block;
        text-align: left;
        padding: 4% 1%;

    }

    .Foot-img a {

        font-weight: normal;
        display: block;
        text-align: left;
        margin: 0 auto;
        padding: 4% 1%;

    }



    .Foot-img a:hover {
        color: lightgreen;
    }






    /*---------------------------------------------------フッター ---------------------------------------------------*/


    footer {
        width: 100%;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        grid-area: Footer;
        grid-column: 1/-1;
        text-align: center;
        padding: 3.5% 0;
    }

    footer a {}

    footer a .Facebook-img {
        width: 4%;
        padding-bottom: 1%;
    }

    footer .copy-right {
        font-size: 1.5rem;
        grid-row: -2/-1;
        text-align: center;
        padding-top: 1%;
    }


    /*------------------------------------------------------------------------------------------------------*/
}







/* iPhone用ここからスタート */
/*--------------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) {
    @charset "UTF-8";

    html {
        /* ルートのフォントサイズを10pxに設定しておく */
        font-size: 62.5%;
    }


    /* トップページ */
    /*---------------------------------------ボディ----------------------------------------*/

    /* ボディ下地*/
    body {
        width: 100%;
        height: 100vh;
        font-size: 1em;
        font-family: sans-serif;
        background-color: white;
        color: black;
    }

    body ::-webkit-scrollbar {
        display: none;
    }


    #Grid-wrap {
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: "Header""Main""Section""Footer";
    }

    a {
        text-decoration: none;
        color: white;
    }

    /*---------------------------------------------------ヘッダー---------------------------------------------------------*/

    header {
        width: 100%;
        display: grid;
        grid-area: Header;
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(4, 1fr);
        background-image: url("../img/little_bush.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .logo {
        grid-column: 2/4;
        grid-row: 2/4;
        margin: auto;
    }

    header .logo .logo-img {
        width: 100%;
    }

    header p {
        grid-column: 1/-1;
        grid-row: 2/4;
        margin: auto;
        text-align: center;
        font-weight: normal;
        color: white;
    }


    /*---------------------------------------------------メイン---------------------------------------------------*/


    main {
        width: 80%;
        margin: 0 auto;
        padding: 5% 0;
        display: grid;
        grid-template-rows: repeat(7, auto);
        grid-template-columns: repeat(10, 1fr);
        grid-area: Main;
        text-align: left;
        background-image: url("../img/paper.jpeg");

        background-repeat: repeat-y;
    }

    h1 {
        text-align: center;
        line-height: 1;
        grid-column: 2/-2;
    }

    .edit-top {
        line-height: 2;
        text-align: left;
        margin: 5% 0;
        grid-column: 2/-2;
    }


    .img-top {
        text-align: left;
        width: 100%;
        grid-column: 2/-2;
        padding-bottom: 5%;
    }
    
    .img-bottom{
             text-align: center;
        width: 100%;
        grid-column: 2/-2;
        padding-bottom: 5%;   
    }



    .section-img1 {
        width: 100%;
        display: block;
    }

    .Jump {
        grid-column: 5/7;
        text-align: center;
    }

    .top-button {
        display: block;
        background-color: black;
        border-radius: 5rem;
        text-align: center;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }


    .top-button:hover {
        background-color: lightgreen;
    }

    .Top {
        display: block;
        text-align: center;
        padding: 5%;
        font-size: 2rem;
        color: white;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;

    }

    .Top:hover {
        color: black;
    }



    /*---------------------------------------------------Section---------------------------------------------------*/




    .Foot-img {
        width: 100%;
        padding:2% 0;
        display: grid;
        grid-area: Section;
        grid-template-columns: repeat(7, auto);
        grid-template-rows: auto;
        background-color: darkseagreen;
        background-size: cover;
        background-repeat: no-repeat;
        grid-column: 1/-1;
        color: white;

    }

    .SITE-MAP {
        margin: auto;


    }

    .Map1 .Map2 .Map4 .Map5 .Map7 {
        display: block;
        margin: auto;

    }

    .Foot-img p {

        font-weight: bold;
        margin: auto;
        display: block;
        text-align: left;
        padding: 4% 1%;

    }

    .Foot-img a {

        font-weight: normal;
        display: block;
        text-align: left;
        margin: 0 auto;
        padding: 4% 1%;

    }



    .Foot-img a:hover {
        color: lightgreen;
    }






    /*---------------------------------------------------フッター ---------------------------------------------------*/


    footer {
        width: 100%;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        grid-area: Footer;
        grid-column: 1/-1;
        text-align: center;
        padding: 3.5% 0;
    }

    footer a {}

    footer a .Facebook-img {
        width: 4%;
        padding-bottom: 1%;
    }

    footer .copy-right {
        font-size: 1.5rem;
        grid-row: -2/-1;
        text-align: center;
        padding-top: 1%;
    }


    /*------------------------------------------------------------------------------------------------------*/
}