@charset "UTF-8";

/*main  #18aa55

sub #e8f8ee

sub2# #eff9f3

back #f4f4f4

accent #75cc99

*/

html{
  scroll-margin-top: 90px;
}

body{
        font-family: "Zen Maru Gothic", Meiryo, "Hiragino Kaku Gothic Pro", sans-serif;
        margin:0;
        color:#000;
        font-feature-settings: "palt";
        line-height: 1.8;

    }

.sankaku{
width: 50px;
height: 25px;
background-color: #75cc99;
clip-path: polygon(50% 25px, 0% 0%, 50px 0%);
    margin: 0 auto;
}

.pconly {
  display: block;
}

.sponly{
  display: none;
}


a,a:hover,a:visited{
    color: inherit;
}    

section div{
  margin:0 auto
}


p{

  text-align :center;
}

.ac{
  color: #18aa55;
  font-weight: bold;
}


/* ヘッダー */
    header {
      height: 90px;
      width: 100%;
text-align :center;
margin-top: 1.5em;

    }

  header img{
    max-width: 100%;
  }




    h1{
            color: #FFF;
            font-weight: bold;
      font-size: x-large;
      margin: 13px;
    }

    .menu {
      display: flex;
      gap: 30px;
    }

    .menu a {
      text-decoration: none;
      color: #FFF;
      font-size: 14px;
      padding:1em 0;
      margin-right:2em;
    }



    /* メインコンテンツ */

   section{

          margin-bottom: 2em;
          text-align: center;
          
    }
    


.mainimage img{

 margin: 0 auto;
 max-width: 100%;

    }

.ue {
    background:  linear-gradient(
    to top,
    #e8f8ee 0%,
    #e8f8ee 50%,
    #fff 50%
    );
    margin:0

}

.naka{
  background-color: #e8f8ee;
  margin:0
}

.naka img{
  margin-bottom: 1.5em;
}

.shita {
    background:  linear-gradient(
    to bottom,
    #e8f8ee 0%,
    #e8f8ee 50%,
    #fff 50%
    );
    margin:0

}


.yoyakubt{
   
    background:  linear-gradient(
    to bottom,
    rgba(244,244,244,0) 0%,
    rgba(244,244,244,0) 50%,
    #fff 50%
    );
    margin:0;
}

a.btlink {
  display: inline-block;
  text-align: center;
}

a.btlink img{
  text-align: center;
   border-radius: 20px;
 margin: 0 auto;
 display: block;
}

#sixth {
  margin-bottom: 0;
}

#forth .content,#sixth .content, #eighth .content{
    background-image: url(../image/back_mark.png);
    background-color:#f4f4f4;
    padding-top: 3em;
}

#eighth{
  margin-top: 3em;
  margin-bottom: 3em;
}


#secound .content {
    background-image: 
    url(../image/pc05_maru.png),
    url(../image/back_mark.png);
    background-color:#f4f4f4;
    padding-top: 3em;
    background-repeat: no-repeat,repeat;
    background-position: top center;


}

    .wrap{
        width:900px;
        margin: 0 auto;
    }

    .text p{
      text-align: center;
    }




    h2{
      color:#000;
        text-align: center;
        font-size: 40px;
        margin: 0.8em auto;
        border-top: solid 4px #18aa55;
        border-bottom: solid 4px #18aa55;
        text-shadow:  2px 1px 1px #f4f4f4;
        font-weight: bold;
     }



     #sixth h2{
        text-shadow:  3px 3px 2px #FFF;
     }
    
    h3{
  color: #000;
  font-weight: bold;
  padding:0 1em;
      text-align: center;
    font-size: 26pt;
    }




    h3 span.yline {
  background-image: url(../image/pc06_sen1.png);
  background-repeat: no-repeat;
  background-position: bottom;
      background-size: contain;

    }
    
 
h4{
  text-align: center;
  font-weight: bold;
  font-size: 26px;
  margin: 0.8em auto;
}

h4.font32{font-size: 32px;}

h4.font38{font-size: 38px;}

.font17 { font-size: 17px; }
.font19 { font-size: 19px; }
.font20 { font-size: 20px; }
.font21 { font-size: 21px; }
.font22 { font-size: 22px; }
.font23 { font-size: 23px; }
.font24 { font-size: 24px; }
.font25 { font-size: 25px; }
.font26 { font-size: 26px; }
.font27 { font-size: 27px; }
.font28 { font-size: 28px; }
.font29 { font-size: 29px; }
.font30 { font-size: 30px; }


#fifth h4 span{
  color: #18aa55;
   background: linear-gradient(transparent 60% ,#e8f8ee 10%);
   padding:0 0.2em;

}

.label1{
    background: #e8f8ee;
    padding: 0.1em 2em;
    border-radius: 20px;
    font-weight: bold;
    color:#18aa55;
    font-size: 22px;
    font-weight: bold;
  margin:1.5em auto;
  margin-bottom:0.5em;
  width:400px;
  text-align: center;
}
    


    .content img {
      max-width: 100%;
      border-radius: 15px;
      margin: 1em auto;

    }

    .c_double{
        display: flex;
            justify-content: center;
           align-items: center;
           gap: 10px;
           margin: 0 auto;
    }


.c_double.ex{
  width: 700px;
}


.c_double div{
        width: 50%;
        margin:5px;

 
    }


    .c_double div.imgbox{
  width: 45%;
}

.c_double div.textbox{
  text-align: left;
  font-size: 21px;
}


  
    .c_double p{
        text-align:justify;
        margin-right: 1em;
    }

.col{
  margin:0 auto;
}

    .col3{
      display:flex;
      align-items: center;
      justify-content: space-between;
      gap:20px

    }


    .col3.pconly{
      margin-bottom:1em;
    }

    .col3 div{
      margin-left: 0;
    }

    .col3 p{
      width:300px;
      text-align: left;

    }

    .col3 img{
      width:300px;
    }

    .narabe{
      display: flex;
      width:700px;
      max-width: 100%;
       gap: 1em;
       justify-content: center;
    }


    #forth .narabe{
      margin: 0 auto;
      justify-content: flex-start;
    align-items: flex-start;
    }

     #forth .narabe div{
      margin:0
     }


      #forth .sponly img{
        max-width:60%
      }

    .narabe h4{
      background: linear-gradient(transparent 60% ,white 10%);
      display: inline-block;
      padding-right:0.5em;

    }


      .narabe .textbox h4{
        margin-bottom:0;
        font-size:29px
      }

    .narabe .textbox{
      text-align: left;

    }

    .narabe div p{
      text-align: left;
            font-size: 20px;
 max-width:300px;
    }

     .narabe div h4{
      margin-top: 1em;
      text-align: left;
    }


    .narabe img{
      max-width:250px;
    }


    #sixth div {
    text-align: left;
}





    #sixth .narabe{
      width: 900px;
      background-color: #FFF;
      border-radius: 15px;
      border:solid 5px #e8f8ee;
      box-sizing: border-box;
      padding:3em 2em 1em 2em;
      gap:20px;

    }


    #sixth .narabe img{
      max-width:330px
    }

    #sixth .narabe h4{
      color:#18aa55;
      font-size: 30px;
      margin:0.5em 0
    }

        #sixth .narabe p{
     max-width:480px;
     text-align: justify;
    margin-top: 0;
    font-size: 19px;
    }


    #sixth .label2{
      margin-left: 0.5em;
      margin-bottom:0;
  width:135px;
  height:135px;
  margin-bottom:-70px;
}
    

    #seventh h2{
      margin-top:0
    }

    .voice{
      display: block;
      text-align: right;
    }

    .voice img{
      margin:0;
      border-radius: 0;
    }

/*予約フォーム*/

    .yoyakuform {
        max-width: 100%;
        margin: 0 auto;
        background: #e8f8ee;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
    }

.yoyakuform h2 {
    text-align: center;
    color: #27ae60;
    margin-bottom: 30px;
    border: none;
}


.yoyakuform .form-group {
    margin-bottom: 20px;
   display: flex;
}

.yoyakuform label {
    width: 20%;
    margin-bottom: 8px;
    color: #444;
    font-size: 15px;
}

.yoyakuform input,
.yoyakuform select,
.yoyakuform textarea {
    width: 80%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
}

.yoyakuform textarea {
    height: 80px;
    resize: vertical;
}

.yoyakuform button {
    width: 200px;
    display: block;
    margin: 30px auto 0;
    padding: 12px;
    background: #27ae60;
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.yoyakuform button:hover {
        background: #1e964e;
    }



/* 申し込みボタン（追尾なし） */
    .btn{
    display: block;    
    background-color: #18aa55;
    text-align: center;
   width:400px;
    margin: 0 auto;
    padding:10px 10px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    }

a.btn{  color: #fff;}



.content .icon,.icon {
  width: 30px;
  vertical-align: middle; /* これで文字とアイコンを中央揃え */
  margin-right: 8px;
}


.narabe1{
  display: flex;
margin-bottom: 1em;
align-items: center;
}

.narabe1 p{
  text-align: justify;
  padding:1em;
  width:380px;
}


.table2{
  display: block;
  background: #fff;
  border-radius: 10px;
  box-shadow: 4px 4px 8px #797979;
  width: 480px;
  letter-spacing:0;
  overflow: hidden;
}


.table2 table{

     border-collapse: collapse;
      width: 100%;
}


.table2 td{

    padding: 1em;
    border-bottom: #ccc 2px solid;
}

.table2 td:nth-of-type(1){
      background: #e8f8ee;
    font-weight: bold;
    padding:1em 0.5em;
    width:4em;

}

.table2 td:nth-of-type(2){
  text-align: left;

}


.table2 tr:nth-of-type(5) td{
    border-bottom: none

}





.table-container {
  background: #fff;
  border-radius: 10px;
  box-shadow: 4px 4px 8px #797979;
  overflow: hidden;
  max-width: 850px;
}

.table-container table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;

}

.table-container th {
  background-color: #46b86b;
  color: #fff;
  padding: 1em 0.2em;
  border-right: 2px solid #ddd;
  font-weight: bold;
    font-size: 22px;
  text-align: center;
}

.table-container td {
  padding: 14px;
  border-right: 2px solid #ddd;
  text-align: center;
      font-size: 20px;
}


.table-container td span {
    background: #e8f8ee;
    padding: 0.5em 1em;
    border-radius: 20px;
    font-weight: bold;
    display: block;
}

.table-container th:nth-of-type(3){
border-right:none;

}


.table-container td:nth-of-type(3){
border-right:none;
text-align: left;
}





footer{
    background-color: #a44f74;
    color:#fff;
    padding:2em;
}

footer div{
  display: block;
  width: 500px;
  margin: 0 auto;
  text-align: center;
}


#thanks h3{
  font-size: 40pt;

}

#thanks a {
  font-size: 26pt;
  color: #18aa55;
  font-weight: bold;

}

/* スマホ表示（768px以下） */
@media (max-width: 768px) {

.content{
     font-size: 18px;
}


h4.font32 {
    font-size: 26px;
}


.font21 {
  font-size: 18px;
}

.font20 {
  font-size: 18px;
}

.font26 {
  font-size: 18px;
}

p{

  text-align :justify;
  font-size: 18px;
  letter-spacing: normal;
}

.wrap{
  max-width:90% ;
 margin:0 auto;
}

header{
  height:auto;
  max-width:100% ;
  margin-top: 1em;
}

.header_menu{
  padding:0;
}

header img{
  max-width:60%
}

h1{
  margin:5px;
  text-align: center;
  font-size:20px;

}


h2{
  margin-bottom:0;
  margin-top:0;
  font-size: 32px  !important;
  width: 100%;
  line-height: 1.5;

}

h3 {
  padding:0;
  line-height: 1;
}

h3 span.yline{
  background-image: url(../image/sp06_sen.png);
  padding:0;
        font-size: 24px;
        line-height: 1;
}

h4{
  font-size: 26px !important;
  line-height: 1.2;
}


#fifth h4 span{
  font-size: 26px;
}

#fifth p{
  margin-top: 0;
}

#fifth p,#eighth p{
  text-align: center;
}


#eighth .col3 p{
  text-align: left;
}



#secound .content {
    background-image: url(../image/sp05_maru.png),url(../image/sp_back_mark.png);
    background-repeat: no-repeat;
    background-position: top center;
        padding: 1em 0;

}

#secound .content img{
  margin: 0;
}



.mainimage img {
  
    border-radius: 0;
}

.naka img{
  margin-bottom: 0.5em;
}

.mainimage img.sponly{
  max-width: 90%;
  padding-bottom: 0.5em;
}


.c_double{
  display: block;
 max-width:100%;
}

.c_double div,.c_double div.imgbox,.c_double div.textbox{
    width:100%;
    margin:0;
}

.c_double div.textbox{
   text-align: justify;
   font-size: 18px;
}

.c_double div.imgbox{
   max-width: 80%;
   margin:0.5em auto;
}


.c_double p {
    width: 90%;
    margin: 1em auto;
}


 .c_double.ex{
  display: flex;
  max-width: 100%;
 }

 .c_double.ex img{

  border-radius: 5px;
  margin:0;
  max-width:100%
 }



 a.btlink img{
  max-width: 85%;
 }

.pconly {
  display: none;

}

.sponly{
  display: block;
}


.label1{
  width: 100%;
  box-sizing: border-box;
}



  .logo{
    width:100%;
    text-align: center;
  }

#spnavi {
        position: static;
        width: 100%;
        /*
        transform: translateX(100vw);
        transition: all 0.3s linear;
        */
        display: none;

    }

  #spnavi.show{
    display: block;
    /*
    transform: translateX(0);
    */
  } 


  button.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 30px;
}
  
  #spnavi .menu {
    width: 50%;
    flex-direction: column;
    background: #a44f74da;
    padding: 10px;
    height: 100vh;
    position: fixed;
     right: 0;
     z-index: 200;
  }

  #spnavi .menu-toggle {
    display: block;
    width:20px;
  }


  .mainimage img{

          width:100%; 
    }

   .mainimage{
    padding:0;
   }

.content img{
  max-width: 90%;
  margin:0.5em auto;
}



.table-container td{
  padding:5px;
  font-size: 14px;
  line-height: 1.6;
}

.table-container th{
font-size: 18px;
}




.table-container td span{
  padding:0.3em 0.5em;
  font-size: 14px;
}

.table-container td:nth-of-type(1){
  width:80px;
}
.table-container td:nth-of-type(2){
  width:55px;
}

.table-container th:nth-of-type(2){
  padding:0
}


.table2 {
  width: 100%;
}

.table2 table{

}

.table2 td{
  padding:0.8em;
}


.narabe div p{

   font-size: 18px;

    }


.narabe1{
  display: block;
   width: 100%;

}

.narabe1 p{
  width: 100%;
     box-sizing:border-box;
}


#forth .narabe{
  gap:0;
}


#forth p.spfont{
font-size: 16px;

}

#forth .narabe h4{
  margin-top:0;
  font-size:24px !important
}

#forth .narabe .textbox{
  padding-top: 1.5em;
}


#fifth .narabe1 *{
  text-align: justify;
}

#sixth .narabe {
  display: block;
  width: 100%;
  padding:2em 1em 1em 1em;
}

#sixth .narabe img{
      max-width:100%
    }


#sixth .label2{
  width:110px;
  height:110px;
  margin-bottom:-70px;
}

.voice{
  width:70px;
  margin-right: 0;
}

.topbtn{
  background-color: #a44f74;
  padding: 1em 0 2em 0;
}

#topicon{
  background-color: #FFF;
  color:#113366;
  padding: 10px;
}

.btn{
  max-width: 90%;
}

.btn .icon{
  width:20px;
}


footer div{
  max-width: 100%;
}

#yoyaku{
  background: #e8f8ee;
}

.yoyakuform{
  padding: 1em;
  border-radius: 0;
}

.yoyakuform .form-group {
flex-direction: column;
}

.yoyakuform label{
  width:100%;
  text-align: left;
}

.yoyakuform input, .yoyakuform select, .yoyakuform textarea {
  width: 100%;
}


#thanks h3{
  font-size: 38pt;

}

#thanks a {
  font-size: 23pt;
}


}