@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*   ナビゲーションボタン　---------------------------------------*/
.nav-button {
 box-sizing: content-box;
 padding: 0;
 outline: none;
 border: none;
 background: none;
 width: 20px;
 height: 14px;
 cursor: pointer;
 color: #0F1625;
}
.nav-button::before, .nav-button::after {
 content: '';
 display: block;
 height: 2px;
 background-color: currentColor;
 transform: translateY(5px);
 transition: 0.3s ease-in-out;
}
.nav-button::before {
 transform: translateY(-5px);
 box-shadow: 0 6px currentColor;
}
/* ナビゲーションボタン（閉じるボタン） */
/*.open .nav-button {
 z-index: 1000;
 color: #ffffff;
}
.open .nav-button::before {
 transform: translateY(1px) rotate(45deg);
 box-shadow: none;
}
.open .nav-button::after {
 transform: translateY(-1px) rotate(-45deg);
}*/
/* ナビゲーションメニュー: モバイル */
/*@media screen and (max-width: 899px) {
 html.open, .open body {
  height: 100%;
  overflow: hidden;
 }
 .open .form {
  display: none;
 }
 .open nav {
  left: 0;
 }
 html, body {
  overflow-x: hidden;
 }
 #header {
  position: relative;
 }
 .nav {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 0.5s;
  z-index: 20;
 }
 .nav ul {
  list-style: none;
  font-weight: bold;
  text-align: center;
 }
 .nav li:not(:last-child) {
  margin-bottom: 40px;
  color: inherit;
 }
 .nav .btn {
  border: #F4900C solid 3px;
  border-radius: 50vh;
  padding: 5px 20px;
  color: #ffffff;
 }
}
.nav ul a {
 font-weight: bold;
}*/
/* ナビゲーションメニュー： PC */
@media screen and (min-width: 900px) {
 .nav-button {
  display: none;
 }
 .nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  color: #0F1625;
  font-weight: bold;
 }
 .nav li:not(:last-child) {
  margin-right: 18px;
 }
 .nav .btn {
  width: 148px;
  background-color: #F4900C;
  border-radius: 5px;
  padding: 5px 20px;
  color: #ffffff;
 }
}
/*  ナビ用　吹き出し　　-------------------------------------------------*/
.nav li:last-child {
 position: relative; /* 吹き出し用設定　--指定した分だけ相対的に移動 */
}
.nav li:last-child:hover .btn_baloon {
 display: inline; /* インライン要素として表示 */
}
.btn_baloon {
 display: none; /* 要素を非表示 */
 position: absolute; /* 親要素を基準 */
 padding: 2px; /* テキストの前後の余白 */
 /*left : 10%;   */ /* 表示位置 */
 top: 100%; /* 表示位置 */
 font-size: 80%; /* 文字サイズ */
 font-weight: bold;
 text-align: center;
}
/*  スマホ、タブレット　*/
@media screen and (max-width: 979px) {
 .btn_baloon {
  background-color: none; /* 背景色（透明度） */
  margin-top: 20px; /* 表示位置 */
  width: 200%;
  left: -50%; /* 表示位置 */
  font-size: 80%;
 }
}
/*  PC */
@media screen and (min-width: 980px) {
 .btn_baloon {
  background-color: rgba(255, 127, 127, 1); /* 背景色（透明度） */
  width: 200px; /* 吹き出し全体の幅 */
  margin-top: 12px; /* 表示位置 */
  right: 0%; /* 表示位置 */
  animation: btnAnime 1s linear;
 }
}
/*  btn_baloon のアニメ設定　*/
@keyframes btnAnime {
 100% {
  color: black;
  background: rgba(255, 127, 127, 1)
 }
 50% {
  color: black;
  background: rgba(255, 127, 127, 0.25)
 }
 0% {
  color: white;
  background: white
 }
}
/* スマホ用 -----------------------------------------------------------*/
@media screen and (min-width:979px) {
 .drawer {
  display: none;
 }
}
@media screen and (max-width:980px) {
 .nav {
  display: none;
 }
}
/* チェックボックスは非表示に */
.drawer-hidden {
 display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
 display: flex;
 height: 60px;
 width: 60px;
 justify-content: center;
 align-items: center;
 position: relative;
 z-index: 100; /* 重なり順を一番上に */
 cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer-open span, .drawer-open span:before, .drawer-open span:after {
 content: '';
 display: block;
 height: 3px;
 width: 25px;
 border-radius: 3px;
 background: #333;
 transition: 0.5s;
 position: absolute;
}
/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
 bottom: 8px;
}
/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
 top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
 background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
 bottom: 0;
 transform: rotate(45deg);
 background: #ffffff;
}
#drawer-check:checked ~ .drawer-open span::after {
 top: 0;
 transform: rotate(-45deg);
 background: #ffffff;
}
/* メニューのデザイン*/
.drawer-content {
 width: 100%;
 /* height: 100%;*/
 height: 100vh;
 position: fixed;
 top: 0;
 left: 100%; /* メニューを画面の外に飛ばす */
 z-index: 99;
 /*background: #fff;*/
 background: rgba(0, 0, 0, 0.9);
 /*transition: .5s;*/
 transition: left 0.5s;
 /* 追加　　*/
 display: flex;
 justify-content: center;
 align-items: center;
 color: #ffffff;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
 left: 0; /* メニューを画面に入れる */
}
.drawer-list ul {
 list-style: none;
 font-weight: bold;
 text-align: center;
}
.drawer-list li:not(:last-child) {
 margin-bottom: 40px;
 color: inherit;
}
.drawer-list ul a {
 font-weight: bold;
}
.drawer-item {
 text-align: center;
}
.drawer-list .btn {
 border: #F4900C solid 3px;
 border-radius: 50vh;
 padding: 5px 20px;
 color: #ffffff;
}