@charset "utf-8";
/* CSS Document */
html {
  font-size: 62.5%; /*16px*62.5%=10px pxで指定するとサイズ変更が難しい。htmlで文字サイズの基準を決める。この設定にすると後から設定するのが簡単。*/
  width: 100%;/*画面100%*/
}
body {
  background-color: #f6f8f9;
  color: #333; /* RGB */
  font-family:  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;/*html要素で指定された文字サイズの何倍か。10pxの1.6倍だから、16px。*/
  line-height: 2.4rem;/*html要素で指定された文字サイズの何倍か。10pxの2.4倍だから、24px。*/
  text-align: center;
}
section h2 { /*section要素の中のh2*/
  font-size: 2.8rem;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  padding-bottom: 50px;
}
section h3 {
  font-size: 1.8rem;
  padding-bottom: 30px;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover { /* aはリンクタグ。hoverはマウスカーソルをのせた時*/
  opacity: 0.5;/*opacityは不透明度*/
}
*,*:before,*:after {/*全ての要素に対して*/
  box-sizing: border-box;/*borderまでで高さや幅を指定にします。最初に指定しておくとサイズが指定しやすくなる*/
}
.header {
  height: 45px;
  width: 100%;
}
.header-logo {
  padding-top: 10px;
}
/*.header-logo a {
  display: inline-block;/*inline-blockにしないと高さ指定できない！*/
  /*height: 27px;
}*/
.header-logo a img {
  height : 27px;
  object-fit: cover;
}
@media(min-width:960px) {
  body {
    font-size: 1.5rem;
  }
  section h2 {
    font-size: 4.0rem;
    font-weight: 500;
  }
  section h3 {
  font-size: 2.8rem;
  }
}
/*navigation*/
.btn-trigger,.close-button {
  display: none;
}
@media(max-width: 1160px) {
  .header section {
    z-index: 2000;
  }
  .btn-trigger {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2000;
  }
  .btn-trigger, .btn-trigger span, .btn-trigger span:after, .btn-trigger span:before {
    display: block;
    transition: all .5s;
  }
  .btn-trigger span, .btn-trigger span:before, .btn-trigger span:after {
    position: absolute;
    height: 1px;
    width: 30px;
    background-color: #333333;
    border-radius: 4px;
    content: "";
  }
  .btn-trigger span:before {
    bottom:-12px;
  }
  .btn-trigger span:after {
    bottom:-24px;
  }
  #btn02.active span {/*ハンバーガーボタンを押して、×にするための座標設定*/
    -webkit-transform: translateY(10px) rotate(45deg);
    transform: translateY(10px) rotate(45deg);
  }
  #btn02.active span:before {/*ハンバーガーボタンを押して、×にするための設定。真ん中の線だから消してる*/
    opacity: 0;
  }
  #btn02.active span:after {/*ハンバーガーボタンを押して、×にするための座標設定*/
    -webkit-transform: translateY(-24px) rotate(-90deg);
    transform: translateY(-24px) rotate(-90deg);
  }
  .close-button {
    display: block;
    position: absolute;/*親座標（header nav)に対しての位置*/
    right: 12px;
    top: 5px;
    content: "";
    color: #f6f8f9;/*closeボタンのdivタグの中身がないとcloseボタンが反応しないため、背景色と同色にして見えないようにしている*/
    font-size: 20px;
    padding: 20px;
    z-index: 10000;
  }
  .header-nav { 
    /*display: none; ハンバーガーボタンを押してメニューを表示させるときはdisplay:none;とdisplay:block;で切り替えさせればOK*/
    transform: none;
    z-index: 1000;/*重ね順*/ 
    position: fixed;/*windowに対しての位置*/
    top: 0; 
    right: -120%; /* 画面の右側に隠すためのコード */
    background-color: #f6f8f9;
    width: 100%; 
    height: 100vh;  
    padding-top: 67px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.4);/*メニューの影*/
    transition: all 0.6s;
    overflow: hidden; /* ← スクロールを防ぐ */
  } 
  html.fixed {
  overflow: hidden;/*ハンバーガーメニューが開いたとき、htmlがスクロールしてcloseボタンが下がってしまうので対策*/
  }
  body.fixed {
  overflow: hidden;
  position: fixed;
  width: 100%;
  }
  .snav {
  height: calc(100vh - 67px); /* ヘッダー分を引いた高さ */
  overflow-y: auto; /* ← メニュー項目だけスクロール可能に */
  -webkit-overflow-scrolling: touch;
  }
  .header-nav.active {
    /*display: block;*/
    opacity: 1;
    transform: translateY(0);
    /*overflow: auto;/*右からメニューが出てくるためのCSS*/
    /*-webkit-overflow-scrolling: touch;/*右からメニューが出てくるためのCSS*/
    right: 0;/*右からメニューが出てくる*/
    height: 100vh;/*100%だとHPの一番下まで下がってしまう*/
  }
  .header-nav ul li {
    border-bottom: solid 1px rgba(255,255,255,0.2);
  }
  .header-nav ul li:first-child {
    border-top: solid 1px rgba(255,255,255,0.2);
  }
  .header-nav ul li a {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 600;
    line-height: 70px;
    font-size: 1.8rem;
    vertical-align: middle;
    text-decoration: none;
    color: #333;
  }
}
@media(min-width: 1160px) {
  .header{
    height: 120px;
    width: 100%;
  }
  .header-content-wrapper {
    max-width: 1160px; 
    margin: 0 auto;
    position: relative;
  }
  .header-logo {
    position: absolute;
    left: 0;
    top: 20px;
  }
  .header-logo a {
    display: inline-block;
    height: 60px;
  }
  .header-logo a img {
    height: 60px;
  }
  .header nav {
    display: block;/*mobileで消してた要素を表示*/
    text-align: right;
  }
  .header nav ul {
    display: flex;/*横並び*/
    justify-content: flex-end;/*flexした時の並び替え。flex-endはendのところに対して要素を並べる（今回は右側）*/
    transform: none;
  }
  .header nav li a {
    display: block;/*inline要素になっているので、四角いエリアを作れるように変える*/
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 950;
    color: #333;
    padding: 65px 0px 0 30px ;
    text-decoration: none;
    font-size: 2rem;
    height: 83px;/*block要素の高さを指定*/
    font-weight: 500;
  }
}
.concept-more {
  padding-top: 30px;
}
.concept-more a {
  text-decoration: none;
  color: #333;
  border-bottom: solid 1px #333;
}
@media(min-width: 1160px) {
  .concept-more {
  font-size: 1.5rem;
}
}
.footer a img {
  display: block;
  width: 177px;
  margin: auto auto 40px auto;
  
}
.footer small {
  padding-bottom: 20px;
}