@charset "utf-8";
body{
    background-color: #FFF1DC;
    font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #614124;
}

.logo{
    background-color: #ffffff;
}
.logo img{
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

h1,h2{
    font-family: 'Kosugi Maru', sans-serif;
}
h1{
    padding-left: 20px;
    padding-top: 20px;
    font-size: 20px;
    font-weight: 800;
    color: #ffff;
    background-color: #3A98B9;
  
}
h2{
    font-size: 16px;
    border: 1px solid #3A98B9;
    border-radius: 10px;
    background: #3A98B9;
    padding: 3px 0;
    color: #fff;
    margin-top: 70px;
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
    width: 130px;
    text-align: center;
}

.mv{
    background-color: #FFF1DC;
}
.mv img{
    max-width: 100%;
}

.mv p{
    width: 100vw;
    font-size: 13px;
    background-color:#3A98B9 ;
    padding: 5px 20px 20px 20px;
    color: #ffffff;
}

.announce a{
    display: block;
}
.announce ul{
    width: 260px;
    margin: 0 auto;
}
.announce li{
    border-bottom: 1px dotted #3A98B9;
}

table{
    font-size: 14px;
    text-align: center;
    border: solid 2px #3A98B9;
    margin: 0 auto;
}

th{
    padding: 5px 8px;
    background-color:#3A98B9;
    color: #ffffff;
}
td{
    padding: 5px 8px;
    background-color:#fff ;
    border-top: dashed 2px ;
    border-color: #3A98B9;
    color: #614124;
}
.hours p{
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 60px;
    font-size: 12px;
}

.feature{
    background-color: #E8D5C4;
}
.feature img{
    width: 100vw;
    background-color: #FFF1DC;
}
.feature .syohouketsuke{
    display: block;
    width: 100vw;
    text-align: center;
    background-color: #E8D5C4;
    padding: 20px 20vw 20px 20vw;
}

.feature .tokucho{
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 16px;
    border: 1px solid #3A98B9;
    border-radius: 10px;
    background: #3A98B9;
    padding: 3px 0;
    color: #fff;
    margin: 10px auto 20px auto;
    width: 180px;
    text-align: center;

}
.feature .slide img{
    width: 70vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.feature .slide p{
    width: 65vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 70px;
    display: block;
    text-align: center;
    font-size: 13px;
}

.slick-next,.slick-prev {
    z-index: 1;
}

.slick-prev {
    left: 20px;
    top: 100px;
}

.slick-next {
    right: 20px;
    top: 100px;
}
.slick-dots {
    bottom: 40px;
}

.introspection .intro{
    width: 100vw;
    padding: 0px 20px;
}
.introspection p img{
    margin-top: 20px;
    width: 100%;
    padding-left:20px;
    padding-right: 20px;
}

.introspection .more{
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff8cd;
    width: 180px;
    text-align: center;
    border-radius: 5px;
    padding-top: 6px ;
    padding-bottom: 6px;
    box-shadow: 2px 2px 2px 2px #dddddd;
}
.introspection .more:hover {
    color:#2c2c2c;/*マウスオーバーの時の文字の色*/
    background-color:#ffed99;/*マウスオーバーの時の背景色*/
}
.introspection .more a{
    display: block;/*クリック可能範囲をボタン全体に広げる*/
}

.element {
    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
  }
  /* フェードイン時に入るクラス */
.is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }


.payment,
.receive{
    background-color: #E8D5C4;
}
.payment{
    padding-top: 10px;
}

.payment .intro{
    width: 100vw;
    padding: 0px 20px;
}

.payment img{
    margin-top: 20px;
    width: 100%;
    padding-left:20px;
    padding-right: 20px;
    margin-bottom: 40px;
}

.receive h2{
    margin-top: 0px;
}
.receive .intro{
    width: 100vw;
    padding: 0px 20px;
}

.receive img{
    margin-top: 20px;
    width: 100%;
    padding-left:20px;
    padding-right: 20px;
}

.beginners .comment{
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.beginners .layout1,
.beginners .layout2,
.beginners .layout3,
.beginners .layout4{
    display: flex;
    justify-content: center;
}
.beginners img{
    width: 60px;
    margin-right: 10px;
}
.beginners .layout1 div,
.beginners .layout2 div,
.beginners .layout3 div,
.beginners .layout4 div{
    font-size: 13px;
    width: 240px;
}
.beginners p{
    margin-bottom: 20px;
}
h3{
    font-weight: bold;
}
.access p{
    max-width: 300px;
    margin-left: 20px;
}
.access iframe{
    width: 100%;
    height: 300px;
    margin-bottom: 8px;
    padding: 0 20px;
}
footer {
    background-color: #00BDF2;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    width: 100vw;
    margin-top: 40px;
    padding: 15px 0;
}
footer img{
    height: 50px;
    padding-right: 20px;
}
footer{
    display: flex;
    justify-content: center;
}


/*スマホの時は上部グローバルメニューは表示しない*/
@media screen and (max-width:770px){
    .navi-top{display:none;}
}


/*PC*/
@media screen and (min-width:770px){
    
    /*==============================================
    　global navigation bar (top)
    ================================================*/
    ul.navi-top, ul.navi-top a {
        color:white;/*文字の色*/
        background-color: #FFF1DC;/*メニューバーの背景色*/}

    ul.navi-top a:hover {
        color:white;/*マウスオーバーの時の文字の色*/
        background-color:#fff9f0;/*マウスオーバーの時の背景色*/}

    ul.navi-top {
    position:fixed;
    left:0;
    top:0;
    width: 100%;
    text-align:center;
    z-index:200;}/*重なり順*/

    /*1階層目*/
    ul.navi-top li {
    width: 14vh;/*１階層目の幅*/
    display: inline-block;
    list-style-type: none;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    ul.navi-top a {
    line-height: 45px;/*メニューバーの高さ*/
    text-align: center;/*文字位置中央寄せ*/
    padding-left: 0.3vw;
    border-left: 1px dotted #00BDF2;
    text-decoration: none;
    font-weight: nomarl;
    display: block;}

    ul.navi-top img {
        width: 6vw;
    }

    body{
        font-size: 17px;
    }
    h1{ 
        padding-top: 18vh;
        padding-bottom: 18vh;
        padding-left: 8vw;
        font-size: 32px;
        display: block;
        width: 100vw;
        position: relative;
        top: -350px;
    }
    h2{
        font-size: 26px;
        padding: 7px 0;
        margin-top: 110px;
        margin-bottom: 40px;
        margin-left: 18vw;
        width: 240px;
    }
    .mv{
        margin-bottom: -32vh;
    }

    .mv img{
        width: 60vw;
        margin-left: 30vw;
        position: relative;
        top: 70px;
        z-index: 100;
    
    }

    .mv p{
        display: block;
        width: 100vw;
        position: relative;
        top: -200px;
        font-size: 18px;
        text-align: center;
        padding: 30px 30px;
        background-color: #FFF1DC;
        color: #614124;
    }
    .announce a{
        display: block;
        font-size: 18px;
    }
    .announce ul{
        width: 350px;
        width: 0 auto;
    
    }

    .announce li{
        border-bottom: 1px dotted #3A98B9;
        width: 30vw;
    }

    table{
        font-size: 18px;
        border: solid 2px #00BDF2;
        margin: 0 auto;

    }
    th{
        padding: 7px 14px;
    }
    td{
        padding: 7px 14px;
        border-top: dashed 2px #00bef2b6;
    }
    .hours p{
        width: 100vw;
        padding-left: 32vw;
        padding-right: 10px;
        margin-top: 10px;
        margin-bottom: 90px;
        font-size: 16px;
    }
    .feature img{
        width: 100vw;
        background-color: #FFF1DC;
    }
    .feature .syohouketsuke{
        display: block;
        width: 100vw;
        text-align: center;
        background-color: #E8D5C4;
        padding: 35px 20vw 35px 20vw;
        font-size: 18px;
    }
    .feature .tokucho{
        font-family: 'Kosugi Maru', sans-serif;
        font-size: 26px;
        border: 1px solid #3A98B9;
        border-radius: 10px;
        background: #3A98B9;
        padding: 7px 0;
        color: #fff;
        margin: 40px auto;
        width: 360px;
        text-align: center;
        margin-left: 18vw;
  
    }
    .feature .slide img{
        width: 45vw;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .feature .slide p{
        width: 65vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 45px;
        margin-bottom: 70px;
        display: block;
        text-align: center;
        font-size: 18px;
    }
    .slick-next,.slick-prev {
        z-index: 1;
    }
    
    .slick-prev {
        left: 22vw;
        top: 17vw;
    }
    
    .slick-next {
        right: 22vw;
        top: 17vw;
    }
    .slick-dots {
        bottom: 140px;
    }

    .introspection .intro{
        width: 80vw;
        padding-left: 25vw; 
        font-size: 18px;
    }

    .introspection p img{
        padding-left: 0;
        padding-right: 0;
        margin-top: 20px;
        margin-left: 27.5vw; 
        width: 45vw;
    }


    .introspection .more{
        margin-top: 35px;
        margin-left: auto;
        margin-right: auto;
        width: 230px;
        border-radius: 6px;
        padding-top: 10px ;
        padding-bottom: 10px;
        margin-bottom: 60px;
    }
    .payment .intro{
        width: 80vw;
        padding-left: 25vw;
        font-size: 18px;
    }
    
    .payment img{
        margin-top: 20px;
        width: 45vw;
        padding-left:0px;
        padding-right: 0px;
        margin-left: 27.5vw;
        margin-bottom: 40px;
    }
    
    .receive .intro{
        width: 80vw;
        padding-left: 25vw;
        font-size: 18px;
    }
    
    .receive img{
        margin-top: 20px;
        width: 45vw;
        padding-left:0px;
        padding-right: 0px;
        margin-left: 27.5vw;
        margin-bottom: 40px;
    }

    .beginners .comment{
        width: 300px;
        margin-left: 25vw;
        margin-bottom: 30px;
        font-size: 18px;
    }
    .beginners .layout1,
    .beginners .layout2,
    .beginners .layout3,
    .beginners .layout4{
        display: flex;
        justify-content: flex-start;
        margin-left: 25vw;
    }
    .beginners img{
        width: 100px;
        margin-right: 20px;
    }
    .beginners .layout1 div,
    .beginners .layout2 div,
    .beginners .layout3 div,
    .beginners .layout4 div{
        font-size: 17px;
        width: 40vw;
        padding-top: 10px;
    }
    .beginners p{
        margin-bottom: 30px;
    }
    .access p{
        display: block;
        max-width: 80vw;
        margin-left:20vw;
    }
    .access iframe{
        width: 65vw;
        height: 400px;
        margin-bottom: 16px;
        margin-left: 17.5vw;
    }

    footer {
        background-color: #00BDF2;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        width: 100vw;
        margin-top: 40px;
        padding: 15px 0;
    }
    footer img{
        height: 70px;
        padding-right: 20px;
    }
    footer{
        display: flex;
        justify-content: center;
    }



}


/*PC*/
@media(min-width: 770px){

        /*上部メニュー固定の時の内部リンクのズレ解消*/
        @-webkit-keyframes modify{
            0% { padding-top: 100px; margin-top: -100px; }
            100% { padding-top: 0; margin-top: 0; }
        }
        @keyframes  modify{
            0% { padding-top: 100px; margin-top: -100px; }
            100% { padding-top: 0; margin-top: 0; }
        }
        :target {
            -webkit-animation: modify 0.1s;
            animation: modify 0.1s;}
        /*終わり*/ 
}

 /*サブページSP*/
 .subpage h1{
     background-color: #00bef234;
     margin: auto;
     width: 100%;
     padding-top: 12px;
     padding-bottom: 12px;
 }
 .subpage h2{
     font-size: 18px;
     margin: auto;
     margin-top: 40px;
     margin-bottom: 20px;
 } 
 .subpage .lead{
     text-align: center;
     margin-bottom: 20px;
     font-size: 14px;
     letter-spacing: .05em;
     line-height: 2;
     padding: 0 20px;
 }
 .subpage h3{
     font-size: 20px;
     font-weight: 600;
     text-align: center;
     margin-bottom: 25px;
     margin-top: 65px;
     background: linear-gradient(#fff 45%,#bdf1ff 0%);
     width: 200px;
     margin-right: auto;
     margin-left: auto;
     display: block;
 }
.subpage main{
    padding: 0 20px;
}
.subpage .gallery img{
    width: 90vw;
    margin-top: 15px;
}
.subpage main .back{
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background-color: #fff8cd;
    width: 130px;
    text-align: center;
    border-radius: 5px;
    padding-top: 6px ;
    padding-bottom: 6px;
    box-shadow: 2px 2px 2px 2px #dddddd;    
}
.subpage main .back:hover {
    color:#2c2c2c;/*マウスオーバーの時の文字の色*/
    background-color:#ffed99;/*マウスオーバーの時の背景色*/
}
.subpage main .back a{
    display: block;/*クリック可能範囲をボタン全体に広げる*/
}
/*ここから営業カレンダーページ*/
.subpage .eigyo h2{
 width: 160px;
}

.subpage .calendar iframe{
    width: 80vw;
    margin: 0 auto;
}
.subpage .calendar{
    width: 80vw;
    margin: 0 auto;
}



/*サブページPC*/
@media screen and (min-width:770px){
    .subpage h1{
        background-color: #00bef234;
        margin: auto;
        width: 100%;
        padding-top: 57px;
        padding-bottom: 12px;
    }
    .subpage h2{
        font-size: 26px;
        padding: 7px 0;
        margin: auto;
        margin-top: 110px;
        margin-bottom: 40px;
        width: 240px;
    } 
    .subpage .lead{
        text-align: center;
        margin-bottom: 60px;
        font-size: 17px;
        letter-spacing: .05em;
        line-height: 2;
        padding: 0 20px;
    }
    .subpage h3{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 25px;
        margin-top: 65px;
        background: linear-gradient(#fff 45%, #00bef234 0%);
        width: 200px;
        margin-right: auto;
        margin-left: auto;
    }
   .subpage main{
       padding: 0 20px;
   }
   .subpage .gallery img{
       width: 32vw;
       height: auto;
       margin-top: 30px;
       margin-left: 2.5vw;
       margin-right: 2.5vw;
   }

    .subpage main .back{
       margin-top: 50px;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 20px;
       background-color: #fff8cd;
       width: 130px;
       text-align: center;
       border-radius: 5px;
       padding-top: 6px ;
       padding-bottom: 6px;
       box-shadow: 2px 2px 2px 2px #dddddd;  
   }


   .subpage .gallery{
       width: 80vw;
       margin-left: auto;
       margin-right: auto;
       display: grid;
       grid-template-rows: 9.2vw 31vw 8vw 9.2vw 31vw 8vw 31vw 8vw 9.2vw 31vw 8vw 9.2vw 31vw 8vw ;
       grid-template-columns: 50% 50%;
   }
   .subpage .h3-1{
       grid-row: 1/2;
       grid-column: 1/3;
   }
   .subpage .photo1{
       grid-row: 2/3;
       grid-column: 1/2;
   }
   .subpage .text1{
       grid-row: 3/4;
       grid-column: 1/2;
   }
    .subpage .photo2{
    grid-row: 2/3;
    grid-column: 2/3;
   }
    .subpage .text2{
    grid-row: 3/4;
    grid-column: 2/3;
   }
   
   .subpage .h3-2{
    grid-row: 4/5;
    grid-column: 1/3;
   }
    .subpage .photo3{
    grid-row: 5/6;
    grid-column: 1/2;
   }
    .subpage .text3{
    grid-row: 6/7;
    grid-column: 1/2;
   }
   .subpage .photo4{
    grid-row: 5/6;
    grid-column: 2/3;
   }
    .subpage .text4{
    grid-row: 6/7;
    grid-column: 2/3;
   }
   .subpage .photo5{
    grid-row: 7/8;
    grid-column: 1/2;
   }
    .subpage .text5{
    grid-row: 8/9;
    grid-column: 1/2;
   }
   
   .subpage .h3-3{
    grid-row: 9/10;
    grid-column: 1/3;
   }

   .subpage .photo6{
    grid-row: 10/11;
    grid-column: 1/2;
   }
    .subpage .text6{
    grid-row: 11/12;
    grid-column: 1/2;
   }
   .subpage .photo7{
    grid-row: 10/11;
    grid-column: 2/3;
   }
    .subpage .text7{
    grid-row: 11/12;
    grid-column: 2/3;
   }

   .subpage .h3-4{
    grid-row: 12/13;
    grid-column: 1/3;
   }
   .subpage .photo8{
    grid-row: 13/14;
    grid-column: 1/2;
   }
    .subpage .text8{
    grid-row: 14/15;
    grid-column: 1/2;
   }
   .subpage .photo9{
    grid-row: 13/14;
    grid-column: 2/3;
   }
    .subpage .text9{
    grid-row: 14/15;
    grid-column: 2/3;
   }

   .subpage .text1,
   .subpage .text2,
   .subpage .text3,
   .subpage .text4,
   .subpage .text5,
   .subpage .text6,
   .subpage .text7,
   .subpage .text8,
   .subpage .text9{
       padding-left: 3vw;
       width: 36vw;
   }
   /*ここから営業カレンダーページ*/
   .subpage .eigyo h2{
    width: 250px;
   }
   .subpage .calendar iframe{
    width: 700px;
    margin: 0 auto;
    }
    .subpage .calendar{
        width: 700px;
        margin: 0 auto;
        }
}

/*サブページPCのみ改行*/
@media screen and (max-width: 770px) {
    .subpage .pc { display:none; }
}