@charset "UTF-8";

body{
    font-family: 'Kiwi Maru', serif;
    background-color:#ffffee;
    color:#72543d;
}

/* ハンバーガーメニュー */
.gMenu {
  position: fixed;
  right: 0;
  top: 10px;
  width: 100%;
  z-index: 99;
}
/* メニューアイコンを画面右上に固定しています */
.gMenu .menu-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 12px;
  padding-top: 5px;
  height: 12px;
}
/* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
  background: rgb(0,112,192); /* 色は自由に変更可能です */
  display: block;
  height: 4px; /* 太さ */
  width: 31px; /* 長さ */
  position: relative;
  transition: background .4s ease-out; /* 形が変わる時のアニメーション */
}
/* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
  background: rgb(0,112,192); /* 色は自由に変更可能です */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .4s ease-out; /* 形が変わる時のアニメーション */
  width: 100%;
}
.gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
/* 表示されるメニューです */
.gMenu .menu {
  background-color:#ffffee ;
  overflow: hidden;
  max-height: 0; /* ★最初は高さを0にして非表示状態に */
  transition: max-height .6s; /* 表示されるときのアニメーション */
  text-align: center;
}
/* メニュー部分のデザインです */
.gMenu .menu li:first-of-type {
  padding-top: 5px;
}
.navicon-ruby{
  color:rgb(0,112,192) ;
  margin-top:5px;
  /*  border:1px solid; */
  position: relative; /* 今の位置を基準 */
  /* top: 40px; 上から15px */
  right: 6px; /* 右から8px */
}

.gMenu .menu li a {
  display: block;
  padding: 0px 0px;
  text-decoration: none;
  text-transform: uppercase;
}
.gMenu .menu li:hover {
  background-color: rgb(14,198,204);
}
/* チェックボックスは常に非表示です */
.gMenu .menu-btn {
  display: none;
}
/* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
  max-height: 360px; /* ★チェックボックスがオンの時高さを338pxにして表示させます */
  transition: max-height .6s;
}
/* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}

/* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}

.header-logo{
  padding:15px;
  /*text-align: center;*/
}
.nav-list {
  display: flex;
  justify-content:flex-end;
  margin: 5px;
}
.nav-list>li{
  margin: 5px;
}
.nav-list li{
  font-size: 1.4em;
  letter-spacing: 0.5em;
  padding: 5px 5px;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background-color: rgb(14,198,204);
  color: #ffffee;
  justify-content:center;
}
/* スマホのみ表示 */
@media screen and (min-width:768px) {
  .gMenu {
    display:none;
  }
}
@media screen and (max-width:768px) {
  .nav-list {
    display:none;
  }
}
/* pcサイドのメニュー */
.nav-list-pc{
  padding-top: 30px;
  margin-bottom: 50px;
}
.nav-list-pc li{
  padding:15px 0 ;
  letter-spacing: 0.2em;
  border-bottom:solid 1px #09c778;
  width:fit-content;
  margin:0 auto;
}
@media screen and (max-width:768px) {
  .nav-list-pc{
    display: none; }
  }
/* 削除20230227 aside{
  background-color: rgba(240, 247, 229, 0.819);
} */