/* 幅リセット */
.wrapper {
	display: block;
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}
/* コンテンツ幅に基本横幅5% */
.main__container {
	display: block;
	padding: 0 5%;
    box-sizing: border-box;
}


/* PC時のみ改行を有効化、スマホでは非表示 */
.only-pc {
  display: none;
}

@media (min-width: 768px) {
  .only-pc {
    display: inline;
  }
}

/* PC/SPで改行を出し分け */
.sp-only { display: none; }
.pc-only { display: inline; }

@media (max-width: 767px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

/* 全ページMV共通 */

/* MV 内 p を Serif に */
body .mv .mv__inner p {
  font-family: var(--wp--preset--font-family--noto-serif-jp);
}

/* スマホ時（〜699px）の下層MV比率を4:5に */
@media (max-width: 699px) {
  body:not(.home):not(.front-page) .mv {
    aspect-ratio: 4 / 5;
    justify-content: flex-start;  /* 横 → 左寄せ */
    align-items: flex-start;       /* 縦 → 上寄せ */
    text-align: left;
  }
}


.mv {
  position: relative;                  /* ★追加：アニメーション用 */
  display: flex;
  background: url("https://medicine.cosmos-ok.com/wp-content/uploads/2025/09/mv_top_sp.jpg")
              center center / cover no-repeat;
  aspect-ratio: 8 / 11;                /* スマホ比率 1200x1650 → 8:11 */
  justify-content: center;             /* スマホ → 横中央 */
  align-items: flex-end;               /* スマホ → 下寄せ */
  text-align: left;
   overflow: hidden;                    /* ★追加：アニメーションがはみ出さないように */
}


.mv__inner {
  position: relative;                  /* ★追加：テキストを前面に */
  z-index: 10;                         /* ★追加 */
  padding-bottom: 5vh;                 /* スマホ → 下余白を可変 */
}

/* MV内の文字スタイル（共通） */
.mv h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;                    /* 通常はやや太め */
}
.mv p {
  font-size: clamp(16px, 3vw, 20px);
  line-height: 1.6;
  font-weight: 400;                    /* 通常はノーマル */
}

/* ★幾何学的装飾エフェクト - ここから追加★ */
.mv-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 回転する六角形 */
.mv-hexagons {
  position: absolute;
  top: 0;
  left: 5%;
  width: 100%;
  height: 100%;
}

.hexagon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: transparent;
  border: 2px solid rgba(102, 204, 255, 0.3);
  transform: rotate(30deg);
  animation: hex-rotate 20s linear infinite;
}

.hexagon::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transform: rotate(60deg);
  animation: hex-counter-rotate 15s linear infinite reverse;
}

.hexagon:nth-child(1) {
  top: 15%;
  right: 20%;
  animation-delay: 0s;
}

.hexagon:nth-child(2) {
  bottom: 25%;
  left: 10%;
  animation-delay: -7s;
}

.hexagon:nth-child(3) {
  top: 60%;
  right: 10%;
  animation-delay: -14s;
  width: 40px;
  height: 40px;
}

.hexagon:nth-child(3)::before {
  width: 40px;
  height: 40px;
}

/* 流れる三角形 */
.mv-triangles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid rgba(102, 204, 255, 0.2);
  animation: triangle-flow 12s ease-in-out infinite;
}

.triangle:nth-child(1) {
  top: 20%;
  left: -30px;
  animation-delay: 0s;
}

.triangle:nth-child(2) {
  top: 50%;
  left: -30px;
  animation-delay: 4s;
  transform: rotate(180deg);
}

.triangle:nth-child(3) {
  top: 75%;
  left: -30px;
  animation-delay: 8s;
}

/* 波紋エフェクト */
.mv-ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ripple {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: ripple-expand 6s ease-out infinite;
}

.ripple:nth-child(1) {
  top: 30%;
  left: 20%;
  animation-delay: 0s;
}

.ripple:nth-child(2) {
  bottom: 40%;
  right: 25%;
  animation-delay: 2s;
}

.ripple:nth-child(3) {
  top: 70%;
  left: 60%;
  animation-delay: 4s;
}

/* アニメーション定義 */
@keyframes hex-rotate {
  from { transform: rotate(30deg); }
  to { transform: rotate(390deg); }
}

@keyframes hex-counter-rotate {
  from { transform: rotate(60deg); }
  to { transform: rotate(-300deg); }
}

@keyframes triangle-flow {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateX(calc(100vw + 30px)) rotate(360deg);
    opacity: 0;
  }
}

@keyframes ripple-expand {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

/* 500–580px帯 → 余白増やす */
@media (min-width: 500px) and (max-width: 580px){
  .mv__inner {
    padding-bottom: 8vh;
  }
}

/* 581–699px帯 → さらに多め */
@media (min-width: 581px) and (max-width: 699px){
  .mv__inner {
    padding-bottom: 10vh;
  }
}

/* スマホ（〜699px）：h1 & p をBOLD + 余白調整 + アニメーション調整 */
@media (max-width: 699px) {
  .mv h1,
  .mv p {
    font-weight: 700;
  }
  .mv h1 {
    margin-bottom: 10px;
  }
  .mv p {
    margin-top: 0;
  }
  
  /* ★アニメーション要素のスマホ調整 */
  .hexagon {
    width: 40px;
    height: 40px;
  }
  
  .hexagon::before {
    width: 40px;
    height: 40px;
  }
  
  .hexagon:nth-child(2) {
    left: 5%;  /* スマホでは左側にも配置 */
  }
  
  .hexagon:nth-child(3) {
    width: 30px;
    height: 30px;
  }
  
  .hexagon:nth-child(3)::before {
    width: 30px;
    height: 30px;
  }
  
  .triangle {
    border-left-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 17px;
  }
  
  .ripple:nth-child(1) {
    left: 10%;
  }
  
  .ripple:nth-child(2) {
    right: 15%;
  }
}

/* PC */
@media (min-width: 700px) {
  .mv {
    aspect-ratio: 192 / 115;           /* PC比率 1920x1150 → 192:115 */
    justify-content: flex-start;       /* 左寄せ */
    align-items: center;               /* 縦中央 */
    text-align: left;
    background: url("https://medicine.cosmos-ok.com/wp-content/uploads/2025/09/mv_top_pc.jpg")
                center center / cover no-repeat;
  }
  .mv__inner {
    padding-left: 50px;
    padding-bottom: 0;                 /* PCでは下余白ゼロ */
  }
}

/* PC（1200px〜）：文字サイズアップ & 左余白追加 */
@media (min-width: 1200px) {
  .mv h1 {
    font-size: clamp(32px, 4vw, 44px); /* PCは少し大きめ */
  }
  .mv__inner {
    padding-left: 80px;                /* PC大画面では余白を広げる */
  }
	/* 下層ページMVは全て1920x1000比率に統一 */
body:not(.home):not(.front-page) .mv {
  aspect-ratio: 192 / 100;  /* 下層は全部この比率 */
  background-position: center center; /* 背景画像の位置も中央に */
}
}





/* ▼下層ページ専用：MVテキスト順序逆転（h1 → p を p → h1 に変更） */

body:not(.home):not(.front-page) .mv__inner h1 {
  color: var(--wp--preset--color--custom-h-1);
}

body:not(.home):not(.front-page) .mv__inner p {
  font-size: clamp(22px, 4vw, 32px); /* h1より少し小さめ */
  font-weight: 600;
  color: var(--wp--preset--color--custom-h-1); /* h1と統一 */
  line-height: 1.3;
  margin: 0 0 6px 0;
}

/* ▼スマホ時の下層MVテキスト位置調整 */
@media (max-width: 519px) {
  body:not(.home):not(.front-page) .mv__inner {
    padding-top: clamp(24px, 15vw, 64px);  /* 上の余白を大きめにして“下げる” */
    padding-left: clamp(12px, 15vw, 40px); /* 左に寄せる */
    padding-right: 0;                      /* 右余白はゼロ */
    padding-bottom: 0;                     /* 下余白は不要 */
  }

  body:not(.home):not(.front-page) .mv h1 {
    margin-bottom: 6px; /* h1とpの隙間調整 */
  }
}

/* ▼下層ページ専用：PCのMVテキスト位置調整（520px〜） */
@media (min-width: 520px) {
  body:not(.home):not(.front-page) .mv {
    align-items: flex-start; /* 上揃え */
  }
  body:not(.home):not(.front-page) .mv__inner {
    padding-top: 8vh;
    padding-left: 10vh;
  }
}

/* ▼下層ページ専用：PCのMVテキスト位置調整（700px〜） */
@media (min-width: 700px) {
  body:not(.home):not(.front-page) .mv {
    align-items: flex-start;
  }
  body:not(.home):not(.front-page) .mv__inner {
    padding-top: 9vh;
    padding-left: 10vh;
  }
	body:not(.home):not(.front-page) .mv h1 {
    margin-bottom: 3px;
  }
}

/* ▼下層ページ専用：PCのMVテキスト位置調整（1200px〜） */
@media (min-width: 1200px) {
  body:not(.home):not(.front-page) .mv {
    align-items: flex-start;
  }
  body:not(.home):not(.front-page) .mv__inner {
    padding-top: 10vh;
    padding-left: 14vh;
  }
	body:not(.home):not(.front-page) .mv h1 {
    margin-bottom: 3px;
  }
}








/* 複数ニュースカテゴリータグの区切り,非表示 */
.wp-block-post-terms__separator {
	display: none;
}

/* 共通ボタン動作 */
:where(.wp-block-button) .wp-block-button__link,
.wp-element-button {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ホバー中 */
:where(.wp-block-button) .wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 6px rgba(0,0,0,.2);
}

/* ヘッダーサブメニューのダミーリンク無効化 */
.wp-block-navigation .nolink > .wp-block-navigation-item__content{
  pointer-events: none; cursor: default;
}

/* ヘッダー固定 */
.site-header,
.spmenu-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--wp--preset--color--custom-bg, #fff);
}

/* 本文が隠れないように、ヘッダー高さぶん余白を追加 */
:root{
  --header-h-pc: 80px;
  --header-h-sp: 80px;
}

/* ヘッダーの初期設定の余白を打ち消し */
:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}


body{ padding-top: var(--header-h-pc); }
@media (max-width: 767.98px){
  body{ padding-top: var(--header-h-sp); }
}

/* ログイン中の管理バー対策 */
.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  .admin-bar .site-header{ top: 46px; }
}

/* PC用とSP用の出し分け */
.pc__footer,
.header__pc { 
  display: block; 
}

.sp__footer,
.header__sp { 
  display: none; 
}

@media (max-width: 767.98px){
  .pc__footer,
  .header__pc { 
    display: none; 
  }
  
  .sp__footer,
  .header__sp { 
    display: block; 
  }
}

/* header（デモの参考値） */
.spmenu-header {
  background: #F3FAFF;
  height: 50px;
  padding: 1em;
}

/* ロゴ画像 */
.spmenu-logo {
  width: 180px;
  height: auto;
  display: block;
}

/* 全体調整CSS */
.spmenu-menubox { font-size: 16px; }
.spmenu-menubox li { font-size: 14px; }

/* hamburgerここから */
/* input非表示 */
.spmenu-input-hidden,
.spmenu-acc-toggle { 
  display: none; 
}

/* label */
.spmenu-switch {
  cursor: pointer;
  position: absolute;
  right: 10%;
  top: 0;
  z-index: 9999;
  width: 4em;
  height: 4em;
}

/* メニュー展開時にハンバーガーアイコンを固定 */

/* iOS風ハンバーガーアイコン */
.spmenu-switch-ios:before {
  content: "";
  position: absolute;
  width: 4em;
  height: 2em;
  background: #c0c0c0;
  border-radius: 3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
}

.spmenu-switch-ios:after {
  content: "";
  position: absolute;
  width: 2em;
  height: 2em;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -70%);
  transition: 0.5s;
}

.spmenu-switch2:before {
  content: "MENU";
  position: absolute;
  bottom: 0;
  font-size: 12px;
  left: 50%;
  transform: translate(-50%, 10%);
  font-weight: 600;
}

#spmenu-toggle:checked ~ .spmenu-switch2 .spmenu-switch-ios:before {
  background: #005CAA;
}

#spmenu-toggle:checked ~ .spmenu-switch2 .spmenu-switch-ios:after {
  transform: translate(0, -70%);
}

#spmenu-toggle:checked ~ .spmenu-switch2:before {
  content: "CLOSE";
}

/* メニューエリア */
.spmenu-menuwrap {
  position: fixed;
  height: 100%;
  background: #F3FAFF;
  padding: 5em 3% 2em;
  z-index: 9998;
  transition: 0.5s;
  overflow-y: scroll;
  top: 0;
  left: 100%;
  width: 100%;
}

/* メニューリスト */
.spmenu-menulist {
  width: 70%;
  margin-right: 3%;
  padding-left: 5% !important;
  list-style: none;
}

.spmenu-menulist li a {
  text-decoration: none;
  color: #3A302C;
  display: block;
  padding: .7em 0;
}

/* メニューリストの最後の項目はトピックス上線と重ならないように下線を消す */
.spmenu-sublist li:last-child {
  border-bottom: none;
}


/* スマホヘッダーメニュー文字を明朝に統一 */
.spmenu-menulist li a,
.spmenu-sublist li a,
.spmenu-acc-label {
  font-family: var(--wp--preset--font-family--noto-serif-jp, 'Noto Serif JP', serif);
	font-size: 16px;
	font-weight: 600; 
}

/* アコーディオン共通 */
.spmenu-sublist { 
  display: none; 
}

/* アコーディオン開閉（1階層目・2階層目共通） */
#spmenu-acc-products:checked ~ .spmenu-sublist,
#spmenu-acc-bracerevo:checked ~ .spmenu-sublist { 
  display: block;
  padding-left: 6%;
}

/* アコーディオンラベル（タップ領域＋基準化）※修正 */
.spmenu-acc-label { 
  display: block; 
  padding: .7em 2.2em .7em 0; /* 右アイコン分の余白を確保 */
  cursor: pointer; 
  position: relative;         /* ::after を右端に固定するため */
}

/* アコーディオンラベルにアイコン追加（右端固定）※修正 */
.spmenu-acc-label::after {
  content: '';
  position: absolute;
  right: .6em;                 /* 常に右端から一定距離 */
  top: 50%;
  width: 5px;
  height: 5px;
  border-bottom: 3px solid #005CAA;
  border-right: 3px solid #005CAA;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .3s;
}

/* 開いたときに回転（1階層目・2階層目共通） */
#spmenu-acc-products:checked + .spmenu-acc-label::after,
#spmenu-acc-bracerevo:checked + .spmenu-acc-label::after {
  transform: translateY(-50%) rotate(225deg);
}

/* iOS風ボーダーメニューリスト化 */
.spmenu-menulist-border li {
  border-bottom: 1px solid #ddd;
  position: relative;
}

/* スマホメニュー開閉時スクロール止める */
@media (max-width: 768px) {
  body.no-scroll {
    overflow: hidden;
    height: 100vh;
  }

  .spmenu-menuwrap {
    max-height: 100vh;    /* 画面の高さに収める */
    overflow-y: auto;     /* メニュー内だけスクロール可 */
    -webkit-overflow-scrolling: touch; /* iOSでスムーズに */
  }
}



/* メニューエリア･アニメーション：右から */
#spmenu-toggle:checked ~ .spmenu-menuwrap {
  left: 20%;
}

/* コンテンツカバー */
#spmenu-toggle:checked ~ .spmenu-cover {
  position: fixed;
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  z-index: 9997;
  background: rgba(3,3,3,.5);
  display: block;
}

/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
  .spmenu-menubox { display: none; }
}

.wp-block-button__link,
.wp-block-button .wp-element-button {
  padding-top: 8px;
  padding-bottom: 8px;
}


/* ボタン中央揃え */
.wp-block-buttons {
  display: flex;
  justify-content: center; /* 中央配置 */

}

/* ボタン自体の最低幅＋パディング */
.wp-block-buttons .wp-block-button__link {
  min-width: 200px;      /* ボタンの最低幅 */
}

/* ボタン Blue Gradient 適用 */
:where(.wp-block-button) .wp-block-button__link,
.wp-element-button {
  background: var(--wp--preset--gradient--blue-gradient);

}

/* main が無いページは .main__container を対象にする版（どちらか片方でOK） */
body:not(.home):not(.front-page) :where(main, .main__container) > * + *{
  margin-block-start: 24px;
}




/* ===== お問い合わせフォーム全体（枠・角丸・薄影） ===== */
/* ===== CF7フォーム内の段落余白リセット ===== */
.cf7-cosmos p {
  margin: 10px 0 0 0;
}

.cf7-cosmos .cf7-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04) inset;
}

.cf7-cosmos .cf7-card__inner {
  padding: clamp(16px, 4vw, 28px);
}

/* ===== 行レイアウト（SP:1列 / PC:2列） ===== */
.cf7-cosmos .cf7-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0; /* ← 見出しと入力が離れすぎないようSPでは0 */
  margin-bottom: clamp(12px, 2.4vw, 16px);
}
.cf7-cosmos .cf7-row--full { grid-template-columns: 1fr; }

.cf7-cosmos .cf7-label {
  font-weight: 700;
  color: var(--wp--preset--color--custom-h-2, #092147);
  margin-bottom: 0; /* ← SPで余白を消す */
}

/* 入力要素 */
.cf7-cosmos .cf7-field input,
.cf7-cosmos .cf7-field textarea {
  width: 94%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 5px;
  padding: 8px;
  font-size: 16px;
  line-height: 1.6;
}
.cf7-cosmos .cf7-field textarea { min-height: 140px; resize: vertical; }

/* ===== 種別・商材のチェックボックスを統一 ===== */
.cf7-cosmos .cf7-choice-inline .wpcf7-list-item,
.cf7-cosmos .cf7-choice-vertical .wpcf7-list-item {
  margin: 0 14px 8px 0;
  display: inline-flex;
  align-items: center;
}
.cf7-cosmos .cf7-choice-vertical { display: block; }

/* ===== チェックボックスを“正方形”にする ===== */
.cf7-cosmos .cf7-check input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0,0,0,.45);
  background: #fff;
  display: inline-block;
  position: relative;
  transition: all .15s ease;
}
.cf7-cosmos .cf7-check input[type="checkbox"]:checked {
  border-color: #1e63c5;
  background: #1e63c5;
}
.cf7-cosmos .cf7-check label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
}

/* ===== 同意・送信ボタン・注釈 ===== */
.cf7-cosmos .cf7-consent {
  margin: 8px 0 10px;
  text-align: center;
  font-size: 14px;
}
.cf7-cosmos .cf7-consent input[type="checkbox"] { transform: translateY(1px); }

.cf7-cosmos .cf7-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* ← ここを修正してCF7のsubmitをデフォルトボタンと同じにする */
.cf7-cosmos .cf7-actions .wp-element-button,
.wp-block-button__link,
.wp-block-buttons .wp-element-button {
  display: block;
  min-width: 200px;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 999px;
  border: none;
  background: var(--wp--preset--gradient--blue-gradient,
                   linear-gradient(135deg,#5bc0de 0%,#004aad 100%));
  color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cf7-cosmos .cf7-actions .wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,.12);
}

.cf7-cosmos .cf7-note {
  margin-top: -10px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* ===== PC（左ラベル/右入力 & 種別横並び維持） ===== */
@media (min-width: 768px) {
  .cf7-cosmos .cf7-row {
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 10px 24px;
  }
  .cf7-cosmos .cf7-row--full {
    grid-template-columns: 260px 1fr;
    align-items: flex-start;
  }
  .cf7-cosmos .cf7-choice-inline {
    display: flex; flex-wrap: wrap;
    column-gap: 14px; row-gap: 8px;
  }
  .cf7-cosmos .cf7-label { margin-bottom: 0; }
}

/* ===== CF7標準のエラー表示を少し整える ===== */
.wpcf7 form .wpcf7-response-output { border-radius: 8px; }
.wpcf7-not-valid-tip { font-size: 12px; color: #c62828; margin-top: 4px; }


/*「Simple Cloudflare Turnstile」を中央揃えにする*/
div.cf-turnstile {
    display: flex !important;
    justify-content: center !important;
}

/* 入力が必須のマークを赤くする */
.cf7-required {
  color: red;
  margin-left: 4px;
  font-size: 0.9em;
}

/* 同意ブロックを中央寄せ */
.cf7-privacy-box {
  text-align: center;
  margin: 0 5px 13px 0;
  font-size: 12px;
}

/* プライバシーポリシーリンクのデザイン */
.wpcf7-form .wpcf7-acceptance a {
  color: var(--wp--preset--color--custom-h-3, #005caa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ホバー時の軽いエフェクト */
.wpcf7-form .wpcf7-acceptance a:hover {
  opacity: 0.8;
}

/* チェックボックスの整列を微調整 */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 6px;
}






/* === Full-bleed background utility ===
   指定ブロックの「背景」だけを viewport 幅まで広げる。
   中身のレイアウト・余白は一切変更しない。 */
.wp-block-group.bg-bleed {
  position: relative;
  isolation: isolate; /* 背景用の::beforeを背面に安全に敷く */
}

.wp-block-group.bg-bleed::before {
  content: "";
  position: absolute;
  z-index: -1;           /* クリック妨害なし */
  inset-block: 0;        /* top:0; bottom:0 と同義 */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;          /* 画面幅ピッタリ。横スクロール防止にも強い */
  background: inherit;   /* ブロック設定の背景をそのまま引き継ぐ */
  pointer-events: none;
}

/* 初期値（JS未実行時は1vwのまま）。has-vwfixが付くまで既存CSSが優先される */
:root { --vw: 1vw; }

/* JSが動いたときだけ、擬似vwへ置き換え（既存svw/dvwより後に書く） */
.has-vwfix .wp-block-group.bg-bleed::before {
  width: calc(var(--vw) * 100);
}
.has-vwfix .wp-block-group.bg-bleed > .wp-block-group__inner-container::before {
  width: calc(var(--vw) * 100);
}




/* ================================
   ヘッダー ナビゲーション（HTML直書き版）
================================ */
header nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav ul li a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: #3a302c;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* 下線スライド（中央から左右に広がる） */
header nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: linear-gradient(135deg, #5bc0de 0%, #004aad 100%);
  transform: translateX(-50%);
  border-radius: 2px;
  transition: width 0.25s ease;
}

header nav ul li a:hover::after {
  width: 100%;
}

/* ──────────────────────
   お問い合わせボタン専用
────────────────────── */
header nav ul li.nav-contact a {
  background: linear-gradient(135deg, #5bc0de 0%, #004aad 100%);
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 3px 10px rgba(0, 74, 173, 0.15);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ボタンには下線出さない */
header nav ul li.nav-contact a::after {
  display: none;
}

/* ホバー時の軽い浮き上がり */
header nav ul li.nav-contact a:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* ================================
   製品一覧ドロップダウン：やわらかカード
   （Navigationブロック / 手書きHTML の両対応）
================================ */

/* コンテナ（非表示の初期） */
header .wp-block-navigation__submenu-container,
header nav .sub-menu {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  padding: 8px;
  min-width: 260px;
  box-shadow: 0 12px 34px rgba(16, 39, 78, .10);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .20s ease, transform .20s ease;
  backdrop-filter: none;
}

@supports (backdrop-filter: blur(6px)) {
  header .wp-block-navigation__submenu-container,
  header nav .sub-menu {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(160%) blur(6px);
  }
}

/* 表示トリガー */
header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
header .wp-block-navigation__submenu-container.is-menu-open,
header nav li:hover > .sub-menu {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* 各アイテム（やわらかチップ風） */
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
header nav .sub-menu a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 1px;
  border-radius: 10px;
  color: #2d3a4a;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* ホバー */
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header nav .sub-menu a:hover {
  background: #f5f9ff;
  color: #004aad;
  transform: translateY(-1px);
}

/* 小さなアクセントドット */
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before,
header nav .sub-menu a::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5bc0de, #004aad);
  opacity: .65;
}

/* サブメニュー列の余白 */
header .wp-block-navigation-item.has-child { position: relative; }
header .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container,
header nav li > .sub-menu {
  margin-top: -8px;
}




/* ================================
   フッターナビ：中央から広がる下線
================================ */

footer .wp-block-navigation__container a,
footer nav ul li a {
  position: relative;
  display: inline-block;
  color: #fff; /* ベースは白文字 */
  text-decoration: none;
  transition: color .3s ease;
}

/* ホバー時の文字色変化 */
footer .wp-block-navigation__container a:hover,
footer nav ul li a:hover {
  color: #d8f2ff; /* 淡い水色にトーンアップ */
}

/* 下線アニメーション本体 */
footer .wp-block-navigation__container a::after,
footer nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%; /* 中央起点 */
  bottom: -3px;
  width: 0; /* 初期は非表示 */
  height: 2px;
  background: linear-gradient(90deg, #ffffff, #b3e0ff);
  transform: translateX(-50%); /* 中央寄せ */
  border-radius: 2px;
  transition: width .25s ease;
}

/* ホバー時：中央から左右にスッと広がる */
footer .wp-block-navigation__container a:hover::after,
footer nav ul li a:hover::after {
  width: 100%;
}





/* =========================================================
   サンクスページ専用スタイル（/thanks/）
   ========================================================= */

.thanks {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 20px;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--wp--preset--color--custom-p);
  background: var(--wp--preset--color--custom-bg);
  line-height: 1.9;
}

/* --------------------------------
   見出し階層
-------------------------------- */
.thanks h1 {
  font-size: clamp(28px, 4vw, 32px);
  font-weight: 600;
  font-family: var(--wp--preset--font-family--noto-serif-jp);
  color: var(--wp--preset--color--custom-h-1);
  margin-bottom: 1.2em;
  text-align: center;
}

.thanks h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  font-family: var(--wp--preset--font-family--noto-serif-jp);
  color: var(--wp--preset--color--custom-h-2);
  margin-top: 2.4em;
  margin-bottom: 1em;
  border-left: 4px solid var(--wp--preset--color--custom-h-1);
  padding-left: 0.6em;
}

.thanks h3 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 600;
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  color: var(--wp--preset--color--custom-h-1);
  margin-top: 1.4em;
  margin-bottom: 0.6em;
}

/* --------------------------------
   本文構成
-------------------------------- */
.thanks .steps {
  margin: 0;
  padding: 0;
}

.thanks .step-item {
  margin-bottom: 2em;
}

.thanks .step-item:first-child p {
  margin-bottom: 1.1em;
}

.thanks a {
  color: var(--wp--preset--color--custom-h-1);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.thanks a:hover {
  opacity: 0.8;
}

/* --------------------------------
   トップへ戻るボタン
-------------------------------- */
.thanks .thanks-cta {
  text-align: center;
  margin-top: 40px;
}

.thanks .btn-gradient {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 9999px;
  background: var(--wp--preset--gradient--blue-gradient);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.thanks .btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.thanks .btn-gradient:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  opacity: 0.96;
}

/* --------------------------------
   レスポンシブ
-------------------------------- */
@media (min-width: 768px) {
  .thanks {
    padding: 100px 32px;
  }
}