@charset "UTF-8";

/* ==========================================================================
   Header Style
   ========================================================================== */
.site-header {
  position: absolute; /* 初期状態はMVの上に重ねる */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.4s ease, background-color 0.3s ease;
}

/* 上からスライドインするアニメーション */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.header-inner {
  position: relative; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(20 / 393 * 100vw) calc(20 / 393 * 100vw); /* スマホ基準の余白 */
  width: 100%;
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}

/* ロゴのサイズ調整 */
.header-logo {
  line-height: 1;
  width: calc(140 / 393 * 100vw);
  flex-shrink: 0; /* ロゴが潰れるのを防ぐ */
}
.header-logo img {
  width: 100%;
  display: block;
}

/* 右側メニューグループ */
.header-menu-group {
  display: flex;
  align-items: center;
  gap: calc(15 / 393 * 100vw);
  flex-shrink: 0;
}

/* --- マイページリンク --- */
.header-mypage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--clr-main); 
  text-decoration: none;
}

/* 人型アイコン */
.mypage-icon {
  position: relative;
  width: calc(20 / 393 * 100vw);
  height: calc(20 / 393 * 100vw);
  margin-bottom: calc(2 / 393 * 100vw);
}
.mypage-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(8 / 393 * 100vw);
  height: calc(8 / 393 * 100vw);
  background-color: var(--clr-main);
  border-radius: 50%;
}
.mypage-icon::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(16 / 393 * 100vw);
  height: calc(8 / 393 * 100vw);
  background-color: var(--clr-main);
  border-radius: calc(8 / 393 * 100vw) calc(8 / 393 * 100vw) 0 0;
}

.mypage-text {
  font-family: var(--font-note);
  font-size: calc(9 / 393 * 100vw);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

/* --- ハンバーガーメニュー --- */
.header-hamburger {
  position: relative;
  width: calc(44 / 393 * 100vw);
  height: calc(44 / 393 * 100vw);
  background-color: var(--clr-bg-main); 
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(4 / 393 * 100vw); 
  padding: 0;
}

.header-hamburger span {
  display: block;
  width: calc(18 / 393 * 100vw);
  height: 2px;
  background-color: var(--clr-main);
  border-radius: 1px;
  margin-right: auto;
  margin-left: auto;
  transition: all 0.3s ease;
}

/* --- MVを過ぎたら付与するクラス --- */
.site-header.is-sticky {
  position: fixed;            
  top: 0;
  left: 0;
  width: 100%;                
  background-color: var(--clr-bg-main); 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
  z-index: 10000;             
  animation: slideDown 0.4s ease forwards;
}

/* 追従時のインナー幅と余白を固定 */
.site-header.is-sticky .header-inner {
  width: 100%;
  padding: calc(10 / 393 * 100vw) calc(20 / 393 * 100vw); 
}

.site-header.is-sticky .header-logo {
  width: calc(130 / 393 * 100vw);
}

.site-header.is-sticky .header-hamburger {
  box-shadow: none;
  border: solid 1px var(--clr-main);
}

.site-header:not(.is-sticky) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================================================
   PCスタイル（768px以上）
   ========================================================================== */
@media screen and (min-width: 768px) {
  .header-inner {
    padding: min(calc(30 / 1000 * 100vw), 30px) min(calc(40 / 1000 * 100vw), 40px);
  }

  .header-logo {
    width: min(calc(240 / 1000 * 100vw), 240px);
  }

  .header-menu-group {
    margin-left: auto;
    padding-right: calc(min(calc(54 / 1000 * 100vw), 54px) + min(calc(24 / 1000 * 100vw), 24px));
  }

  /* マイページ PCサイズ */
  .mypage-icon {
    width: min(calc(24 / 1000 * 100vw), 24px);
    height: min(calc(24 / 1000 * 100vw), 24px);
    margin-bottom: min(calc(5 / 1000 * 100vw), 5px);
  }
  .mypage-icon::before {
    width: min(calc(10 / 1000 * 100vw), 10px);
    height: min(calc(10 / 1000 * 100vw), 10px);
    top: 0;
  }
  .mypage-icon::after {
    width: min(calc(18 / 1000 * 100vw), 18px);
    height: min(calc(8 / 1000 * 100vw), 8px);
    border-radius: 9px 9px 0 0;
    bottom: min(calc(3 / 1000 * 100vw), 3px);
  }
  .mypage-text {
    font-size: min(calc(12 / 1000 * 100vw), 12px);
  }

  /* 開くボタン（PC通常時位置） */
  .header-hamburger {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: min(calc(40 / 1000 * 100vw), 40px);
    width: min(calc(54 / 1000 * 100vw), 54px);
    height: min(calc(54 / 1000 * 100vw), 54px);
    gap: min(calc(5 / 1000 * 100vw), 5px);
  }
  .header-hamburger span {
    width: min(calc(22 / 1000 * 100vw), 22px);
  }

  .site-header.is-sticky .header-logo {
    width: min(calc(150 / 1000 * 100vw), 150px);
  }

  /* PC追従時のインナー余白 */
  .site-header.is-sticky .header-inner {
    padding: min(calc(10 / 1000 * 100vw), 10px) min(calc(40 / 1000 * 100vw), 40px);
  }

  .site-header.is-sticky .header-hamburger {
    top: 50%; 
    transform: translateY(-50%);
    bottom: auto;
  }

  .site-header.is-sticky .header-menu-group {
    padding-right: calc(min(calc(54 / 1000 * 100vw), 54px) + min(calc(24 / 1000 * 100vw), 24px));
  }
}

/* ==========================================================================
   Modal Navigation (全画面メニュー)
   ========================================================================== */
.modal-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--clr-bg-sec); /* ベージュの背景 */
  z-index: 10000; 
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  
  /* スクロールできるように設定 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.is-nav-open .modal-nav {
  opacity: 1;
  visibility: visible;
}

/* --- 閉じるボタン --- */
.modal-nav-close {
  position: fixed;
  background-color: var(--clr-bg-main); 
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001; 
  display: flex;
  justify-content: center;
  align-items: center;
  transition: top 0.4s ease, right 0.4s ease, width 0.4s ease, height 0.4s ease;
}

.site-header.is-sticky + .modal-nav .modal-nav-close {
  box-shadow: none;
}

.modal-nav-close span {
  position: absolute;
  display: block;
  width: calc(18 / 393 * 100vw);
  height: 2px;
  background-color: var(--clr-main); 
  border-radius: 1px;
}
.modal-nav-close span:nth-child(1) { transform: rotate(45deg); }
.modal-nav-close span:nth-child(2) { transform: rotate(-45deg); }

/* モーダル内部レイアウト */
.modal-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* 縦幅の基準を画面いっぱいに設定 */
  height: auto;
  min-height: 100%; 
  padding-top: calc(10 / 393 * 100vw);   
  padding-bottom: calc(40 / 393 * 100vw); /* SNSの下の余白 */
  box-sizing: border-box;
}
/* モーダル内ロゴ */
.modal-nav-logo {
  position: relative;
  width: calc(120 / 393 * 100vw);
  margin-bottom: calc(20 / 393 * 100vw);
  padding-bottom: calc(20 / 393 * 100vw); /* ロゴと線の間の余白（スマホ基準） */
}
.modal-nav-logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* 画面の横幅いっぱいに広げる */
  height: 2px ;  /* 線の太さ */
  background-color: var(--clr-text-40); /* 線の青色 */
}


/* 目次リスト */
.modal-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 393 * 100vw);
  margin-bottom: calc(40 / 393 * 100vw); /* リストとSNSの間の余白 */
}

.modal-nav-list a {
  font-family: var(--font-title);
  font-size: calc(18 / 393 * 100vw);
  font-weight: 600;
  color: var(--clr-main); 
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}

.modal-nav-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(35 / 393 * 100vw);
  
  /* 画面内に収まる時は最下部に押し下げ、スクロール時は最後に回り込ませる魔法 */
  margin-top: auto; 
  width: 100%;
}
.modal-nav-sns .sns-link {
  display: block;
  width: calc(40 / 393 * 100vw);
  transition: opacity 0.3s ease;
}
.modal-nav-sns .sns-link:hover {
  opacity: 0.7;
}
.modal-nav-sns .sns-link img {
  width: 100%;
  display: block;
}

@media (hover: hover) {
  .modal-nav-list a:hover { opacity: 0.7; }
}

/* ==========================================================================
   PCスタイル（768px以上）
   ========================================================================== */
@media screen and (min-width: 768px) {
  .modal-nav-inner {
    position: relative;          
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    min-height: 100%;
    padding-top: min(calc(30 / 1000 * 100vw), 30px);
    padding-bottom: min(calc(60 / 1000 * 100vw), 60px);
  }
  
  .site-header.is-sticky + .modal-nav .modal-nav-close {
    border: none !important;
    box-shadow: none !important;
  }

  .modal-nav-close span {
    width: min(calc(22 / 1000 * 100vw), 22px);
  }
  
  .modal-nav-logo {
    width: min(calc(180 / 1000 * 100vw), 180px);
    margin-bottom: min(calc(40 / 1000 * 100vw), 40px);
    padding-bottom: min(calc(40 / 1000 * 100vw), 30px);
  }
  .modal-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 均等に2分割 */
    column-gap: min(calc(60 / 1000 * 100vw), 60px); /* 左右の列の間の余白 */
    row-gap: min(calc(24 / 1000 * 100vw), 24px);    /* 上下の行の間の余白 */
    width: 100%;
    max-width: 600px; /* メニュー全体の最大幅（好みに応じて調整してください） */
    margin-right: auto;
    margin-left: auto;
    margin-bottom: min(calc(60 / 1000 * 100vw), 60px);
  }
  .modal-nav-list li {
    text-align: center;
  }
  .modal-nav-list a {
    font-size: min(calc(20 / 1000 * 100vw), 20px);
  }
  .modal-nav-sns {
    gap: min(calc(40 / 1000 * 100vw), 40px);
  }
  .modal-nav-sns .sns-link {
    width: min(calc(46 / 1000 * 100vw), 46px);
  }
}

.site-header.is-sticky.is-hidden-at-footer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important; 
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease !important;
}

/* スムーススクロールと背面スクロール防止 */
html {
  scroll-behavior: smooth;
}
body.is-nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Logo Text Component (ヘッダー・メニュー用のロゴ上テキスト)
   ========================================================================== */
.c-logo-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
}

.c-logo-text {
  display: block;
  width: 100%;
  text-align: justify;
  text-align-last: center; 
  font-family: var(--font-title);
  color: var(--clr-main);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3em;
  
  /* スマホ基準のサイズとロゴとの隙間 */
  font-size: calc(10 / 393 * 100vw);
  margin-bottom: calc(4 / 393 * 100vw);
}

/* PCスタイル（768px以上） */
@media screen and (min-width: 768px) {
  .c-logo-text {
    font-size: min(calc(12 / 1000 * 100vw), 12px);
    margin-bottom: min(calc(10 / 1000 * 100vw), 10px);
  }
}

/* ==========================================================================
   Hamburger Menu MyPage Button Component (追加)
   ========================================================================== */
/* ラッパー（センター寄せ） */
.modal-nav-action {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: calc(40 / 393 * 100vw); /* SNSとの間の余白 */
}

/* ボタン本体（スマホ基準：横幅80%） */
.btn-modal-mypage {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 600;
  background-color: var(--clr-main); /* メインのブルー */
  color: var(--clr-bg-main); /* 白文字 */
  width: 80%;
  height: calc(50 / 393 * 100vw);
  border-radius: calc(25 / 393 * 100vw);
  font-size: calc(18 / 393 * 100vw);
  letter-spacing: 0.1em;
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  border: 1px solid var(--clr-main);
  box-sizing: border-box;
}

/* 右側のマイページアイコン（スマホ基準） */
.btn-modal-mypage-icon {
  position: absolute;
  right: calc(20 / 393 * 100vw);
  top: 50%;
  transform: translateY(-50%);
  width: calc(18 / 393 * 100vw);
  height: calc(18 / 393 * 100vw);
  background-color: var(--clr-bg-main); /* アイコンの色（デフォルト白） */
  
  /* ヘッダーにある人型アイコンの形状をインラインSVGマスクでスマートに再現 */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4'/><path d='M12 14c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4'/><path d='M12 14c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.3s ease;
}

/* ホバー演出（プランボタン等に合わせた白背景への反転） */
@media (hover: hover) {
  .btn-modal-mypage:hover {
    background-color: var(--clr-bg-main);
    color: var(--clr-main);
    opacity: 1; /* reset.cssの0.7を上書きしてクリアに見せる */
  }
  .btn-modal-mypage:hover .btn-modal-mypage-icon {
    background-color: var(--clr-main); /* アイコンの色をブルーに反転 */
  }
}

/* PCスタイル（768px以上：横幅500pxストップの可変制御） */
@media screen and (min-width: 768px) {
  .modal-nav-action {
    margin-bottom: min(calc(40 / 1000 * 100vw), 40px);
  }

  .btn-modal-mypage {
    width: min(calc(500 / 1000 * 100vw), 500px); /* 最大500pxに制限 */
    height: min(calc(60 / 1000 * 100vw), 60px);
    border-radius: min(calc(30 / 1000 * 100vw), 30px);
    font-size: min(calc(20 / 1000 * 100vw), 20px);
  }

  .btn-modal-mypage-icon {
    right: min(calc(24 / 1000 * 100vw), 24px);
    width: min(calc(22 / 1000 * 100vw), 22px);
    height: min(calc(22 / 1000 * 100vw), 22px);
  }
}