@charset "UTF-8";
/* CSS Document */
/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.menu {
  background-color: #F4D9D6;
}
.btn {
  /* ボタンの配置位置  */
  position: fixed;
  top: 16px;
  right: 16px;
  /* ボタンの大きさ  */
  width: 58px;
  height: 48px;
  /*
  top: 1.111vw;
  right: 1.1805vw;
   ボタンの大きさ  
  width: 4.0277vw;
  height: 3.33vw;
*/
  /* バーガーの線をボタン範囲の中心に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 最前面に */
  z-index: 10;
}
/***** 真ん中のバーガー線 *****/
.btn-line {
  /* 線の長さと高さ */
  width: 100%;
  height: 0.277vw;
  /* バーガー線の色 */
  background-color: #FCFCFC;
  /* バーガー線の位置基準として設定 */
  position: relative;
  transition: .2s;
}
/***** 上下のバーガー線 *****/
.btn-line::before, .btn-line::after {
  /* 基準線と同じ大きさと色 */
  position: absolute;
  transition: .5s;
}
.btn-line::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #FCFCFC;
  /* 上の線の位置 */
  transform: translateY(-16px);
}
.btn-line::after {
  content: "menu";
  /* 下の線の位置 */
  display: block;
  width: 100%;
  text-align: center;
  transform: translateY(8px);
  color: #FCFCFC;
  font-family: 'Kaisei Decol';
  font-size: clamp(14px, 4vw, 16px);
}
/***** メニューオープン時 *****/
.btn-line.open {
  transition: .5s;
}
.btn-line.open::before {
  content: "";
  transform: translateY(0);
}
.btn-line.open::after {
  content: "close";
  color: #FCFCFC;
}
/* ここまでボタンアニメーション */
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/
/**************** 以下、メニューのスタイリング ****************/
.menu {
  position: fixed;
  /* メニューの位置マイナス指定で画面外に */
  transform: translateX(155%);
  width: 65%;
  height: 100vh;
  /* メニューを縦に */
  display: flex;
  color: #463132;
  background-color: rgba(244, 217, 214, 1.0);
  transition: transform .3s;
  align-items: center;
  flex-direction: column;
  background-image: url(../images/common/nav-frame.png);
  background-size: contain;
  background-size: 90%;
  background-position: top 2vw left 2.7vw;
  background-repeat: no-repeat;
}
#global-nav {
  text-align: center;
  padding-top: 10rem;
  font-family: kranky;
  font-weight: 400;
  color: #463132;
  font-size: clamp(28px, 2.777vw, 40px);  
}
#global-nav ul {
  list-style: none;
}
#global-nav ul li {}
.menu-top_logo {
  padding-bottom: 1rem;
  width: 10.41666vw;
}
.menu-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.menu-list:after {
  content: "";
  width: 13.58vw;
  height: 3.6410vw;
  background-image: url(../images/common/logo_flower-all.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: bottom;
  padding-bottom: 3rem;
}
.menu-list a {
  display: block;
  color: #463132;
  padding-top: 2rem;
}
.menu-list:last-of-type:after {
  content: none;
}
.menu-list:hover {
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
  transition: .3s;
  cursor: pointer;
}
/***** メニューオープン時位置0にして画面内に *****/
.menu.open {
  transform: translateX(55%);
}
@media screen and (max-width: 640px) {
  .menu-list a {
    padding-top: 0rem;
  }
  .menu-list:after {
    padding-bottom: 0rem;
    padding-top: 1rem;
  }
  #global-nav {
    padding-top: 3.8rem;
  }
  #global-nav ul {
    font-size: clamp(14px, 4.615vw, 18px);
  }
  .menu-top_logo {
    width: 15.38461vw;
    padding-bottom: 1rem;
  }
  .btn {
    top: 0px;
    right: 5px;
    width: 45px;
    height: 45px;
  }
  .btn-line {
    height: 2px;
  }
  .btn-line::before {
    transform: translateY(-6px);
  }
  .btn-line::after {
    transform: translateY(0px);
    font-size: clamp(11px, 1.0312vw, 12px);
  }
}
@media screen and (max-width: 420px) {
  .btn {
    top: -3px;
    right: 1px;
    width: 40px;
    height: 35px;
  }
  .btn-line {
    height: 2px;
  }
  .btn-line::before {
    transform: translateY(-6px);
  }
  .btn-line::after {
    transform: translateY(0px);
    font-size: clamp(11px, 1.0312vw, 12px);
  }
}
/**************** ここまで、メニューのスタイリング ****************/