@charset "UTF-8";

/* バッジ「京都最大級／実物展示」用。既存の style.css は 400・500 のみ読み込みのため 700 を追加 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700&display=swap");

/* ==========================================================================
   custom.css
   カーテンミュゼLP 改修用の追加スタイル

   ※ style.css は Sass（scss）から自動生成されたファイルのため直接編集しない。
     追加・上書きするスタイルはすべてこのファイルに記述する。
     読み込み順は index.html にて style.css の直後。
   ========================================================================== */


/* FV改修（2026年）
   --------------------------------------------------------------------------
   ※ body に class="fv-renew" が付いたページにのみ適用される。
     本番 index.html に反映する際に body へクラスを付与すること。
     クラスを外せば即座に旧FVへ戻せる（ロールバック手段）。
   -------------------------------------------------------------------------- */

/* ---- 左下グラデーション（可読性確保） ---- */
body.fv-renew .fv::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 165% 64% at 34% 103%,
    rgba(47,53,76,.80) 0%, rgba(47,53,76,.62) 30%,
    rgba(47,53,76,.34) 54%, rgba(47,53,76,.10) 74%, rgba(47,53,76,0) 88%);
}
@media screen and (min-width:769px){
  body.fv-renew .fv::after{
    background:radial-gradient(ellipse 78% 82% at 6% 103%,
      rgba(47,53,76,.80) 0%, rgba(47,53,76,.6) 30%,
      rgba(47,53,76,.3) 54%, rgba(47,53,76,.08) 74%, rgba(47,53,76,0) 88%);
  }
}

/* ---- 既存FV要素の調整 ---- */
body.fv-renew .fv__cont{ gap:14px; }
body.fv-renew .fv__ttl{ width:46cqw; }
body.fv-renew .fv__sub{ font-size:clamp(.813rem,.25rem + 1.4vw,1.25rem); }
body.fv-renew .fv__ttl img{ filter:drop-shadow(0 2px 8px rgba(18,22,36,.5)); }
body.fv-renew .fv__sub{ text-shadow:0 1px 4px rgba(18,22,36,.7); }
@media screen and (min-width:769px){
  body.fv-renew .fv__cont{ gap:20px; }
  body.fv-renew .fv__ttl{ width:27cqw; }
}

/* ---- 強み訴求バッジ（円形・紋章型） ---- */
.fvx-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:140px; height:140px; border-radius:50%;
  font-family:"Zen Old Mincho",serif; line-height:1.2;
  text-align:center; box-sizing:border-box; align-self:flex-start;
  border:1px solid #9D8F58;
  background:rgba(255,255,255,.96); color:#2F354C;
  box-shadow:inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(157,143,88,.7), 0 4px 20px rgba(0,0,0,.25);
}
.fvx-badge__sm{ font-size:12px; font-weight:700; letter-spacing:.09em; text-indent:.09em; }
.fvx-badge__lg{
  font-size:36px; font-weight:500; color:#9D8F58; margin:3px 0; padding:3px 0; line-height:1;
  border-top:1px solid rgba(157,143,88,.45);
  border-bottom:1px solid rgba(157,143,88,.45);
}
.fvx-badge__unit{ font-size:17px; margin-left:1px; }
@media screen and (min-width:769px){
  .fvx-badge{ width:196px; height:196px; }
  .fvx-badge__sm{ font-size:17.5px; }
  .fvx-badge__lg{ font-size:52px; margin:6px 0; padding:5px 0; }
  .fvx-badge__unit{ font-size:24px; }
}

/* ---- オファー（40%OFF＋補足） ---- */
.fvx-offer{
  align-self:flex-start; box-sizing:border-box;
  background:rgba(47,53,76,.92); border-radius:4px;
  padding:10px 18px 11px; border-left:4px solid #9D8F58;
}
.fvx-offer__main{
  color:#fff; font-family:"Zen Old Mincho",serif; font-weight:500; line-height:1.15;
  font-size:clamp(1rem,.45rem + 2vw,1.375rem);
}
.fvx-offer__main em{ font-style:normal; color:#E3CE8F; font-size:1.6em; letter-spacing:.01em; }
.fvx-offer__main em span{ font-size:.68em; }
.fvx-offer__note{
  color:rgba(255,255,255,.88); font-family:"Zen Old Mincho",serif;
  margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.22);
  font-size:clamp(.75rem,.5rem + .7vw,.938rem);
}
@media screen and (min-width:769px){ .fvx-offer{ padding:14px 26px 15px; } }

/* ---- FV内CTAボタン ---- */
.fvx-cta{ display:flex; gap:8px; width:100%; }
.fvx-cta li{ flex:1 1 0; max-width:340px; list-style:none; }
.fvx-cta__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:6px; padding:9px 6px; color:#fff; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.22); height:100%; box-sizing:border-box;
}
.fvx-cta__btn .en{
  font-family:"Inter",sans-serif; letter-spacing:.05em; opacity:.85;
  font-size:clamp(.563rem,.188rem + 1vw,.938rem);
}
.fvx-cta__btn .ja{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-family:"Zen Old Mincho",serif; font-weight:500; line-height:1.3;
  font-size:clamp(.813rem,.35rem + 1.3vw,1.25rem);
}
.fvx-cta__btn .ja img{ max-width:14px; }
.fvx-cta__btn.is-visit{ background-color:#9D8F58; }
.fvx-cta__btn.is-tel{ background-color:#C6001A; }
@media screen and (min-width:769px){
  .fvx-cta{ gap:20px; }
  .fvx-cta__btn{ border-radius:10px; padding:14px 24px; }
  .fvx-cta__btn .ja img{ max-width:28px; }
}

/* ---- 1024px以下：FV表示中は右側の固定CTAを隠す ---- */
@media screen and (max-width:1024px){
  .fvnav-ready body.fv-renew .header__right{
    opacity:0; visibility:hidden; transform:translateX(16px); pointer-events:none;
    transition:opacity .45s ease, transform .45s ease, visibility .45s;
  }
  .fvnav-ready.is-past-fv body.fv-renew .header__right{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
  }
}

/* ---- introセクション：FV直下CTA削除にともなう調整 ----
   このセクションの背景写真は「セクション高さの50%」指定のため、
   CTAボタンを外すと写真の上端が本文に食い込む。SPのみ高さを固定値に変更する。 */
@media screen and (max-width:768px){
  body.fv-renew .intro{
    background-size:100% 170px;
    padding-bottom:180px;
  }
  body.fv-renew .intro__txt{ margin-bottom:0; }
}
@media screen and (min-width:769px){
  body.fv-renew .intro__txt{ margin-bottom:0; }
}

/* ---- 画面サイズへの追従（全幅共通） ----
   .fv は 100svh の高さで中身を下寄せするため、画面が低いと中身が上へあふれ、
   半透明（白70%）のヘッダーの下にバッジが潜り込んで白く霞んで見える。
   各要素のサイズを vh（画面高さ）に連動させ、常にヘッダーより下に収める。
   clamp / min の上限値は通常画面での値と同じため、余裕のある環境では見た目は変わらない。
   検証：幅320〜1920px × 高さ460〜1200px の150パターンで重なりが出ないことを確認済み。
   ここはSP側の上限値。PC側は後段のメディアクエリで引き上げる。 */
.fvx-badge{
  width:clamp(72px, 16.6vh, 140px); height:clamp(72px, 16.6vh, 140px);
  box-shadow:inset 0 0 0 clamp(3px,.6vh,5px) #fff,
             inset 0 0 0 clamp(4px,.72vh,6px) rgba(157,143,88,.7),
             0 4px 20px rgba(0,0,0,.25);
}
.fvx-badge__sm{ font-size:clamp(8.5px, 1.42vh, 12px); }
.fvx-badge__lg{
  font-size:clamp(21px, 4.27vh, 36px);
  margin:clamp(1px,.36vh,3px) 0; padding:clamp(1px,.36vh,3px) 0;
}
.fvx-badge__unit{ font-size:clamp(10px, 2.02vh, 17px); }

body.fv-renew .fv__cont{ gap:clamp(5px, 1.66vh, 14px); margin-bottom:clamp(8px, 2.4vh, 20px); }
body.fv-renew .fv__ttl{ width:min(46cqw, 21vh); }
body.fv-renew .fv__sub{ font-size:min(clamp(.813rem,.25rem + 1.4vw,1.25rem), 2.1vh); }

.fvx-offer{ padding:clamp(6px,1.2vh,10px) clamp(11px,2.1vh,18px) clamp(7px,1.3vh,11px); }
.fvx-offer__main{ font-size:min(clamp(1rem,.45rem + 2vw,1.375rem), 2.6vh); }
.fvx-offer__note{
  font-size:min(clamp(.75rem,.5rem + .7vw,.938rem), 1.8vh);
  margin-top:clamp(3px,.83vh,7px); padding-top:clamp(3px,.83vh,7px);
}
.fvx-cta__btn{ padding:clamp(6px,1.07vh,9px) clamp(5px,.71vh,6px); }
.fvx-cta__btn .ja{ font-size:min(clamp(.813rem,.35rem + 1.3vw,1.25rem), 2.2vh); }
.fvx-cta__btn .en{ font-size:min(clamp(.563rem,.188rem + 1vw,.938rem), 1.5vh); }

@media screen and (min-width:769px){
  .fvx-badge{ width:clamp(86px, 19.4vh, 196px); height:clamp(86px, 19.4vh, 196px); }
  .fvx-badge__sm{ font-size:clamp(10px, 1.78vh, 17.5px); }
  .fvx-badge__lg{ font-size:clamp(24px, 5.3vh, 52px); margin:clamp(2px,.6vh,6px) 0; padding:clamp(2px,.55vh,5px) 0; }
  .fvx-badge__unit{ font-size:clamp(11px, 2.45vh, 24px); }
  body.fv-renew .fv__cont{ gap:clamp(6px, 2.0vh, 20px); margin-bottom:clamp(12px, 4.2vh, 60px); }
  body.fv-renew .fv__ttl{ width:min(27cqw, 26vh); }
  body.fv-renew .fv__sub{ font-size:min(clamp(.813rem,.25rem + 1.4vw,1.25rem), 2.55vh); }
  .fvx-offer{ padding:clamp(7px,1.5vh,14px) clamp(13px,2.6vh,26px) clamp(8px,1.6vh,15px); }
  .fvx-offer__main{ font-size:min(clamp(1rem,.45rem + 2vw,1.375rem), 3.1vh); }
  .fvx-offer__note{ font-size:min(clamp(.75rem,.5rem + .7vw,.938rem), 2.1vh); margin-top:clamp(4px,.8vh,7px); padding-top:clamp(4px,.8vh,7px); }
  .fvx-cta__btn{ padding:clamp(8px,1.55vh,14px) clamp(14px,2.6vh,24px); }
  .fvx-cta__btn .ja{ font-size:min(clamp(.813rem,.35rem + 1.3vw,1.25rem), 2.6vh); }
  .fvx-cta__btn .en{ font-size:min(clamp(.563rem,.188rem + 1vw,.938rem), 1.9vh); }
}

/* ---- FV内CTA：電話ボタンのPC/SP出し分け ----
   既存仕様に合わせる。SPは tel: で発信、PCは電話番号セクションへスクロール。 */
.fvx-cta__btn.sp{ display:flex; }
.fvx-cta__btn.pc{ display:none; }
@media screen and (min-width:769px){
  .fvx-cta__btn.sp{ display:none; }
  .fvx-cta__btn.pc{ display:flex; }
}