@charset "utf-8";
html { max-width: 1865px;
  font-size:min(2vw,38px);

    margin: 0px auto;
}
/*これを自動調整にして、以下をremで参照.
画面幅1865pxのときにlogo h1が1rem（=2vw=38px）でちょうどいいように設定
ちなみに10px以下にならないっぽい
ということは、
0.65rem=1.3vw→画面幅770pxでサチる

*/

body {
  font-family: 'Noto Sans JP', sans-serif;
  /* font-family: 'Heebo', sans-serif; */
  /* font-family: 'Abel', sans-serif; */
    margin: 0;
    letter-spacing: 0.07rem;
    /*emは親要素依存になるので、remで統一すると整理しやすいかも*/
}
main {
  margin-bottom: 1rem;/*必要そうだったので追加*/
}
.wrapper {
  z-index: -1;
    margin: 0px auto;
    background-color: #EDE40F;
}

/* ヘッダー */
#header {
    display: flex;
    justify-content: space-around;
   width: 95%;
    margin: 0px auto 0 auto;
    align-items: center;
    padding-top: 0.5rem;
}  
.wrapper::before {
  content: '';
  position: absolute;
  /* left:50%;
  top:0.3%; */
  /* transform: translate(-50%,-50%); */
  /* z-index: 3; */
 width:100%;
 max-width: 1865px;
  height:5.5rem;
  background: #39A1B5;
  transform: skewY(-2.3deg);
  margin: 0 auto;
  text-align: center;
  /* transform-origin: top right; */
} 
#header .logo{
  padding: 0.8rem 0;
  z-index: 3;
  width: 27%;
}


#header ul { 
    display: flex;
    z-index: 6;
    padding: 0.8rem 0;
    align-items: center;
}
#header ul li {
  margin-left: 1.3rem;
    list-style-type: none; 
}
#header ul li a {
  color: #ffffff;
  text-decoration: none;
}
#header ul li a:visited {
  /* color: #28282A; */
  text-decoration: none;
}
#header ul li a:hover {
  color: #EDE40F;
  text-decoration: none;
}
nav {
    display: flex;
}
#header ul li p{
  font-size: 0.45rem;
  text-indent: 0;
  font-family: 'Abel', sans-serif;
  font-weight: 100;
}
#header ul li p:nth-child(2) {
  /* font-family: 'Abel', sans-serif; */
  text-align: center;
  font-family: 'Heebo', sans-serif;
}

/* メインビジュアル */
.title{
  margin-top:4rem;
}
.title h3{
font-size: 1.2rem;
text-align: center;
color: #404E66;
/*margin-top:5px;不要？？*/
font-weight: 600;
}
.title h4{
  font-size: 0.65rem;
  text-align: center;
  /*margin-top: 5;不要??*/
  color: #404E66;
  /* font-family: 'Abel', sans-serif; */
  font-family: 'Heebo', sans-serif;
  line-height: 1.3rem;
  }
  
.setumei{
  width: 70%;
  margin: 2rem auto 0 auto;
}
.setumei p{
  font-size:0.7rem;
  color: #404E66;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.2rem;
  font-weight: 500;
  text-indent: 0.7rem;

 }
 .buttonpc{
  width: 70%;
  margin: 1rem auto 0 auto;
 }

.buttonpc ul{
  display: flex;
  text-align: center;
  justify-content: space-around;
align-items: center;
}
.buttonpc ul li{
 
  width: 33%;
}
.buttonpc ul li a{
  font-size: 0.72rem;
  text-decoration: none;
    background: #ffffff;
    border-radius: 2rem;
    text-align: center;
   border: #404E66 solid 1px;
   color:#000000 ;
   transition: all .5s;
   display: block;
padding: 0.5rem 0.3rem;
margin: 0 5px;
transform: translate3d(0,0,0);
}


.buttonpc ul li a:hover{
  background-color: #39A1B5;
  color: #ffffff;
 
}

.buttonphone{
  display: none;
}
.contents {
    width: 70%;
}

.contents{
  /* position: relative; */
  text-align: center;
  border-radius: 2rem;/*ボタンと揃えた*/
  margin: 3rem auto ;
  z-index: 0;
  padding: 1rem 0;
  
  background: rgba(255, 255, 255, 0.589);
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.25);
  /*影濃くした*/
  /* backdrop-filter: blur(25px); */
}
  .contents article {
  width:80%;
  margin: 0 auto;
  }
.contents article p{
  font-size:0.7rem;
  font-weight: 500;
  color: #404E66;
  margin: 0 auto 1rem auto;
  width:100%;
  line-height: 1.2rem;
text-indent: 0.7rem;
letter-spacing: 0.06rem;
}

.atitle{
  display: flex;
  justify-content: center;
  margin: 1rem auto;


}
.atitle h3{
  padding: 1rem;
  color: #404E66;
  font-weight: 600;
  font-size: 1.2rem;/* 上下ぞろえした方がいいかも*/
  /* margin-left: 1rem; */
  /* width: 80%; */
  align-self: center;
line-height: 1.5rem;
}

.atitle img{
 object-fit: contain;
 width: 2.5rem;
}
/*なぜatitlekだけ別枠なのか確認。一旦html,cssから消した*/

.stitle{
  text-align: center;
}
.stitle h3{
  padding: 1rem 0;
  color: #404E66;
 font-size: 1.2rem;
font-weight: 600;
 /* padding: 1.5vw 5vw; 
  margin: 2rem auto;不要？*/
  text-align: center;
}
.gyoumu{
  width: 85%;
  margin: 0 0 1rem 4rem ;
}

.gyoumu ul li{
  font-size: 0.7rem;
  list-style-type: none;
  color: #404E66;
  text-indent: -0.7rem;
  padding-left: 0.7rem;
  
}
.titleIphone{
  display: none;
}
/* oyakudatiはhtmlにない？確認。消した */

  /* 全体の体裁 */

  iframe{
    display: block;
    width: 15rem;
    height: 15rem;
    margin-left: 5rem;
  }
  .fmatome{/*クラスのfooterがあるのは混乱するかもしれない？*/
    width: 90%;/*ちょうどいいところに調整*/
    margin:0px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  .zyouhou{
    flex-basis: 40%;
    margin-top: 2rem;
   
  }
  .zyouhou h4{
    /* margin:1vw auto ;
    width: 80%; */
    margin-bottom: 1rem;
    font-size:1.2rem;
    color: #ffffff;
   
  }
  
  .zyouhou table{
  color: #ffffff;
  height: 5rem;
  }
  .zyouhou table tr td{
    font-size: 0.7rem;
    
    }
  .zyouhou table tr td:nth-child(2){
    padding-left: 0.6rem;
    }
  .otoiawase{
    margin-top: 1rem;
    text-align: center;
  }
  .otoiawase p{
  /* text-align: center; */
    font-size: 1.5rem;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
  color: #ffffff;
  text-align: center;
  text-indent: 0;
  }
  
  .otoiawase a{
    font-size: 0.72rem;
    text-decoration: none;
      background: #ffffff;
      border-radius: 1rem;
    
      text-align: center;
     border: #404E66 solid 1px;
     color:#000000 ;
     transition: all .5s;
     display: inline-block;
  padding: 0.5rem 2rem;
  margin: 0 auto;
  
  }
  .otoiawase a:hover{
      background-color: #EDE40F;
      color: #000000;
      transition: all .6s;
      border: #000000 solid 1px;
    
  
  } 
  footer{
    padding: 1.5rem;
    background-color: #39A1B5;
  }

@media screen and (max-width: 1200px) {
.buttonphone{
  display: block;
  width: 70%;
  margin: 1rem auto 0 auto;
}


.buttonphone ul{
  display: flex;
  text-align: center;
  justify-content: space-around;
align-items: center;
}
.buttonphone ul li{
 
  width: 33%;
}
.buttonphone ul li a{
  font-size: 0.72rem;
  text-decoration: none;
    background: #ffffff;
    border-radius: 2rem;
    text-align: center;
   border: #404E66 solid 1px;
   color:#000000 ;
   transition: all .5s;
   display: block;
padding: 0.5rem 0.3rem;
margin: 0 5px;
transform: translate3d(0,0,0);
}


.buttonphone ul li a:hover{
  background-color: #39A1B5;
  color: #ffffff;
 
}
.buttonpc{
  display: none;
}
}
@media screen and (min-width: 801px) {
  .openbtn1{
  display: none;
}
/* .buttonphone{
display: none;
} */
#g-nav{
  display: none;
}

}



@media screen and (max-width: 800px) {


  /*これを自動調整にして、以下をremで参照.
  画面幅280pxのときにsetumei=0.65remが10pxになるように設定
  
  
  */

  .pc{
    display: none;
  }

  /* .buttonpc{
    display: none;
  } */
/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
  top: 0;
  width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
  z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
   
    background: #EDE40F;


backdrop-filter: blur(5.3px);
-webkit-backdrop-filter: blur(5.3px);

    /*丸のスタート位置と形状*/
  transform: scale(0);/*scaleをはじめは0に*/
  right:-0.9rem;
    top:0.6rem;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
  transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
  
  list-style: none;
  margin: 1rem auto;
  
}

#g-nav li a{
  color: #535353;
  text-decoration: none;
  padding:0.3rem;
  display: block;
  letter-spacing: 0.1rem;
  font-weight: bold;
}
#g-nav li a:hover {
  color: #39A1B5;
  text-decoration: none;
}

#g-nav-list ul li p {
text-indent: 0;
  font-size: 1.3rem;
  text-align: center;
}

#g-nav-list ul li p:nth-child(2) {
  text-align: center;
  font-size: 1rem;
  text-indent: 0;
}


/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:absolute;
  top:1.3rem;
  right: 1.3rem;
  z-index: 9999;
  /*ボタンを最前面に*/
  cursor: pointer;
  height:2rem;
  /* background-color: blue; */
  width: 2rem;
  padding: 0;
}
  


/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left:20%;
    height: 0.15rem;
    border-radius: 2px;
  background-color: #ffffff;
    width: 70%;
  }

.openbtn1 span:nth-of-type(1) {
  top:0.5rem; 
}

.openbtn1 span:nth-of-type(2) {
  top:0.9rem;
}

.openbtn1 span:nth-of-type(3) {
  top:1.3rem;
}

.openbtn1.active span:nth-of-type(1) {
    top: 0.59rem;
    left: 0.3rem;
    transform: translateY(0.6rem) rotate(-45deg);
    width: 70%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top:1.79rem;
    left: 0.3rem;
    transform: translateY(-0.6rem) rotate(45deg);
    width: 70%;
}
/* **************ハンバーガーメニューここまで ***************/

/*remの設定によってフォントサイズの変更は不要となった?ただし10px以下にはならない

*/
#header{
  display: block;
  position: relative;
}
#header .logo{
  width: 30%;
 z-index: 3;
}
iframe{
  width: 40%;
  height : 13rem;
  margin-left: 0;
}

}
@media screen and (max-width: 600px) {

  html { font-size: 5.5vw; 
    }
    .openbtn1{
      top:1.3rem;
      right: 0.5rem;
    }
    #g-nav-list ul li p {
        font-size: 0.65rem;
      }
      #g-nav-list ul li p:nth-child(2) {
        font-size: 0.65rem;
      }
    #header .logo{
      width: 55%;
     z-index: 3;
    }
    #header{
      margin-bottom: 3.5rem;
    }
    .title{
      margin-top: 2.5rem;
    }
    .title h3{
      font-size: 0.9rem;
      
    }
    .setumei{
      width: 85%;
    }
    .setumei p{
      font-size: 0.65rem;
      line-height: 1.2rem;
      text-indent: 0.65rem;
    }
    .buttonphone{
      display: none;
    }
    .buttonpc{
      width: 70%;
      margin: 2rem auto;
      display: block;
     }
    
    .buttonpc ul{
      display: block;
    }
     .buttonpc ul li{
      text-align: center;
      width: 100%;
      margin: 1rem auto;
      text-align: center;
     }
     .buttonpc ul li a{
    
      padding:0.3rem;
     }
    
    .contents {
      width: 80%;
    padding: 1rem;
    }
    
    .contents article{
      width: 100%;
    
    }
    .contents article p{
      font-size: 0.7rem;
      line-height: 1.2rem;
      text-indent: 0.7rem;
    
    }
    .atitle{
      width: 100%;
    }
    .atitle h3{
      font-size: 0.95rem;
      line-height: 1.2rem;
      padding: 0.2rem;
      font-weight: 600;
      
    }
    .atitle img{
      width: 1.5rem;
     }
    .stitle h3{
     font-size: 0.8rem;
     
    }
    .titleIphone{
      display: block;
    }
    .titlePc{
      display: none;
    }
    .gyoumu{
      width: 100%;
      margin: 0 0 5% 0;
    }
    
    /*font-sizeが 0.62以上だと一文字下にいくところがでてしまう */
    .gyoumu ul li{
      font-size: 0.68rem;
      letter-spacing: 0rem;
      line-height: 1.2rem;
      margin-bottom: 0.3rem;
    }
    iframe{
      width: 13rem;
      height : 13rem;
      margin-left: 0;
    }

    .otoiawase a {
      font-size: 0.65rem;
    padding: 0.2rem 2rem;
    
    }
    .otoiawase p{
      font-size: 1.2rem;
    }
  }