@charset "utf-8";
/* ==========================================================================
   着物レンタル大全集（和凛スタッフの困りごと解決シリーズ）共通スタイル
   2026-09-03 作成

   ・すべて .wg 配下だけに効かせる。
     サイト共通の旧CSS（687KB）や商品カタログ（.item_box 等）には一切触れない。
   ・デザインは plan/mens_omeshi.html（正絹お召ページ）に準拠。
     明朝＋金の細線。緑帯・原色は使わない。
   ・シリーズは30〜50ページに増える想定のため、各ページに埋め込まず
     このファイルを共有する。1か所直せば全ページに反映される。
   ========================================================================== */

.wg{
  --wg-bg:#f3f2f2; --wg-bg2:#eae9e9; --wg-paper:#fbfaf9;
  --wg-text:#201f1d;
  --wg-accent:#b68235; --wg-accent-300:#facb8d; --wg-accent-700:#7d5411;
  --wg-n600:#7d7979; --wg-n800:#444141;
  --wg-div:rgba(32,31,29,.16);
  --wg-head:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --wg-body:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  --wg-wrap:1180px; --wg-pad:clamp(20px,5vw,64px);
  background:var(--wg-bg); color:var(--wg-text);
  font-family:var(--wg-body); font-size:16px; line-height:1.95;
  text-align:left;
}
.wg *,.wg *::before,.wg *::after{box-sizing:border-box}
.wg h1,.wg h2,.wg h3,.wg h4{
  font-family:var(--wg-head); font-weight:500; line-height:1.45;
  margin:0; padding:0; color:var(--wg-text);
  background:none; border:0; text-align:left;
}
.wg p{margin:0; padding:0; font-size:inherit; line-height:inherit; color:inherit}
.wg img{display:block; max-width:100%; height:auto; border:0}
.wg ul,.wg ol{margin:0; padding:0; list-style:none}
.wg li{margin:0; padding:0; background:none; list-style:none}
.wg a{color:var(--wg-accent-700); text-underline-offset:3px}
.wg a:hover{color:var(--wg-accent)}
.wg-wrap{max-width:var(--wg-wrap); margin:0 auto; padding:0 var(--wg-pad)}
.wg-hr{height:1px; border:0; margin:0; background:var(--wg-div)}
.wg-tnum{font-feature-settings:'tnum' 1}
/* 固定ヘッダー（PC83px／SP54px）にアンカー先が隠れないようにする */
.wg [id]{scroll-margin-top:95px}
@media (max-width:900px){.wg [id]{scroll-margin-top:66px}}

/* --- ボタン（お召ページと共通） --- */
.wg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  text-decoration:none; font-family:var(--wg-head); font-weight:500;
  font-size:14px; line-height:1.2; color:var(--wg-text);
  background:transparent; border:1px solid var(--wg-div);
  padding:11px 20px; border-radius:4px; min-height:44px;
}
.wg-btn--primary{color:var(--wg-accent); border-color:var(--wg-accent)}
.wg-btn--primary:hover{background:rgba(182,130,53,.12); color:var(--wg-accent)}
.wg-btn--line{color:#fff; background:#06c755; border-color:#06c755}
.wg-btn--line:hover{color:#fff; background:#05b34c}

/* ==========================================================================
   ファーストビュー：写真は帯で見せ、見出しは写真の下に置く
   ・困りごと解決ページなので「質問」と「結論」を主役にする。
   ・写真の上に文字を重ねないので、明るい写真でも暗い写真でも成立する。
     シリーズを30〜50ページに増やしても、写真選びで詰まらない。
   ========================================================================== */
.wg-hero{background:var(--wg-bg)}
.wg-hero__band{width:100%; aspect-ratio:1650/450; max-height:340px; overflow:hidden; background:#1c1a18}
.wg-hero__band img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.wg-hero__inner{padding:clamp(30px,4vw,54px) 0 clamp(26px,3.2vw,38px)}
.wg-hero__rule{
  display:block; width:38px; height:1px; border:0; margin:0 0 18px;
  background:var(--wg-accent);
}
.wg-hero__kicker{
  display:block; font-size:13px; letter-spacing:.18em; color:var(--wg-accent-700);
}
.wg-hero h1{
  font-weight:400; font-size:clamp(27px,4vw,46px); line-height:1.4; letter-spacing:.02em;
  margin:14px 0 0;
}
.wg-hero__sub{
  display:block; font-size:.46em; letter-spacing:.08em; margin-top:14px; color:var(--wg-n800);
}
.wg-hero__lead{
  max-width:36em; margin:clamp(22px,2.8vw,30px) 0 0;
  font-size:15.5px; color:var(--wg-n800);
}

/* --- パンくず --- */
.wg-pankuzu{padding:0 0 4px; font-size:12.5px; color:var(--wg-n600); border-top:1px solid var(--wg-div); padding-top:16px}
.wg-pankuzu a{color:var(--wg-n600); text-decoration:none}
.wg-pankuzu a:hover{color:var(--wg-accent-700); text-decoration:underline}
.wg-pankuzu span{margin:0 .5em; color:var(--wg-div)}

/* --- セクション --- */
.wg-sec{padding:clamp(40px,5.5vw,72px) 0}
.wg-sec--tight{padding:clamp(40px,5.5vw,72px) 0 clamp(18px,2.6vw,30px)}
.wg-eyebrow{
  display:block; font-size:13px; letter-spacing:.2em;
  color:var(--wg-accent-700); font-family:var(--wg-body);
}
.wg-h2{font-size:clamp(24px,3vw,36px); line-height:1.46; font-weight:400; margin-top:16px}
.wg-h2--sm{font-size:clamp(22px,2.6vw,31px); line-height:1.5}
.wg-h3{font-size:clamp(18px,2vw,22px); line-height:1.55}
.wg-lead{max-width:38em; margin:18px 0 0}
.wg-sec p+p{margin-top:1em}
.wg-note{margin-top:14px; font-size:13.5px; color:var(--wg-n600); line-height:1.85}

/* ==========================================================================
   結論ブロック：ページ冒頭で即答する
   AIやAI検索に引用されるのは冒頭の要約なので、最初に答えを置く。
   ========================================================================== */
.wg-answer{
  background:var(--wg-paper); border:1px solid var(--wg-div);
  border-top:2px solid var(--wg-accent);
  padding:clamp(24px,3.2vw,40px);
  margin-top:clamp(24px,3vw,34px);
}
.wg-answer__label{
  display:block; font-family:var(--wg-head); font-size:13px;
  letter-spacing:.2em; color:var(--wg-accent-700);
}
.wg-answer__text{
  margin-top:14px; font-family:var(--wg-head);
  font-size:clamp(17px,1.9vw,21px); line-height:1.75;
}
.wg-answer__text strong{font-weight:500; color:var(--wg-accent-700)}
.wg-answer__note{margin-top:16px; font-size:14.5px; color:var(--wg-n800)}

/* --- 「よく誤解されていること」ブロック --------------------------------
   一般論と、和凛の実際の考え方が食い違う点をはっきり示すための枠。
   結論ブロック（wg-answer）とは区別がつくよう、地色を変えて左に金の線を入れる。
   ---------------------------------------------------------------------- */
.wg-caution{
  background:var(--wg-bg2); border-left:2px solid var(--wg-accent);
  padding:clamp(22px,3vw,34px) clamp(20px,2.8vw,34px);
  margin-top:clamp(20px,2.6vw,28px);
}
.wg-caution__label{
  display:block; font-family:var(--wg-head); font-size:13px;
  letter-spacing:.18em; color:var(--wg-accent-700);
}
.wg-caution p{margin-top:1em; font-size:15.5px}
.wg-caution__do{
  margin-top:1.3em; padding-top:1.1em;
  border-top:1px solid var(--wg-div); color:var(--wg-n800);
}

/* 表のセル内の但し書き */
.wg-cell-note{display:inline-block; margin-top:6px; font-size:13.5px; color:var(--wg-n600); line-height:1.75}

/* --- 立場別の表 --- */
.wg-tablewrap{overflow-x:auto; margin-top:clamp(22px,3vw,32px)}
.wg-table{
  width:100%; min-width:560px; border-collapse:collapse;
  background:var(--wg-paper); font-size:15px;
}
.wg-table th,.wg-table td{
  border:1px solid var(--wg-div); padding:14px 16px;
  text-align:left; vertical-align:top; line-height:1.8;
}
.wg-table thead th{
  font-family:var(--wg-head); font-weight:500; font-size:14.5px;
  letter-spacing:.04em; background:var(--wg-bg2); white-space:nowrap;
}
.wg-table tbody th{
  font-family:var(--wg-head); font-weight:500; white-space:nowrap;
  background:rgba(182,130,53,.06);
}
.wg-table .wg-pick{color:var(--wg-accent-700); font-family:var(--wg-head)}

/* --- 実際にいただいたご質問（引用） --- */
.wg-quote{
  margin-top:clamp(22px,3vw,32px); padding:0 0 0 clamp(18px,2.4vw,28px);
  border-left:2px solid var(--wg-accent);
}
.wg-quote p{font-size:16.5px; line-height:1.95}
.wg-quote p+p{margin-top:.9em}
.wg-quote footer{
  margin-top:14px; font-size:13px; color:var(--wg-n600); font-style:normal;
}

/* ==========================================================================
   3問でたどる：クリックすると答えが開き、該当プランへ進む
   details/summary で組むのでJavaScriptなしで動き、
   閉じている中身もHTMLとして存在するため検索エンジンにも読まれる。
   ========================================================================== */
.wg-flow{margin-top:clamp(24px,3vw,36px); display:grid; gap:14px}
.wg-flow details{
  background:var(--wg-paper); border:1px solid var(--wg-div); border-radius:4px;
}
.wg-flow summary{
  font-family:var(--wg-head); font-size:clamp(16px,1.8vw,19px); line-height:1.6;
  cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:14px;
  padding:18px clamp(18px,2.2vw,26px);
}
.wg-flow summary::-webkit-details-marker{display:none}
.wg-flow summary::after{content:"＋"; margin-left:auto; color:var(--wg-accent-700)}
.wg-flow details[open] summary{border-bottom:1px solid var(--wg-div)}
.wg-flow details[open] summary::after{content:"−"}
.wg-flow__q{
  flex:0 0 auto; font-size:13px; letter-spacing:.14em;
  color:var(--wg-accent-700); padding-top:.35em;
}
.wg-flow__body{padding:18px clamp(18px,2.2vw,26px) clamp(20px,2.4vw,26px)}
.wg-flow__body p{font-size:15.5px}
.wg-flow__body p+p{margin-top:.9em}
.wg-flow__answer{
  font-family:var(--wg-head); font-size:17px; line-height:1.7;
  color:var(--wg-accent-700);
}
.wg-flow__btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* --- 和凛での実例（写真＋品番） --- */
.wg-cases{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px); margin-top:clamp(24px,3vw,36px);
}
/* 2枚ずつ対で見せるとき（着流し／袴の比較など）。1行が必ず1組になる */
.wg-cases--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.wg-cases--pair{grid-template-columns:1fr}}
/* 一覧カード：横長の写真を使うとき（大全集トップなど） */
.wg-cases--wide .wg-case img{aspect-ratio:16/9}
.wg-cases--wide .wg-case__name{font-size:clamp(18px,2vw,21px); line-height:1.5}
.wg-cases--wide .wg-case__desc{font-size:15px}
.wg-case{background:var(--wg-paper); border:1px solid var(--wg-div)}
.wg-case img{width:100%; aspect-ratio:6/7; object-fit:cover}
.wg-case__body{padding:16px clamp(14px,1.6vw,20px) 20px}
.wg-case__no{
  display:block; font-family:var(--wg-head); font-size:13px;
  letter-spacing:.12em; color:var(--wg-accent-700);
}
.wg-case__name{font-size:17px; line-height:1.55; margin-top:8px}
.wg-case__desc{margin-top:10px; font-size:14.5px; color:var(--wg-n800); line-height:1.85}
.wg-case__link{margin-top:12px; font-size:14px}

/* --- FAQ --- */
.wg-faq{max-width:52em; border-top:1px solid var(--wg-div); margin-top:clamp(22px,3vw,32px)}
.wg-faq details{border-bottom:1px solid var(--wg-div); padding:18px 0}
.wg-faq summary{
  font-family:var(--wg-head); font-size:17px; line-height:1.6;
  cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:12px;
}
.wg-faq summary::-webkit-details-marker{display:none}
.wg-faq summary::after{content:"＋"; margin-left:auto; color:var(--wg-accent-700)}
.wg-faq details[open] summary::after{content:"−"}
.wg-faq details p{margin:12px 0 0; font-size:15px; color:var(--wg-n800)}
.wg-faq details p+p{margin-top:.8em}

/* --- 次に読む（シリーズ内の回遊） --- */
.wg-next{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; margin-top:clamp(22px,3vw,32px);
}
.wg-next a{
  display:block; background:var(--wg-paper); border:1px solid var(--wg-div);
  padding:20px clamp(16px,2vw,22px); text-decoration:none; color:var(--wg-text);
  border-radius:4px;
}
.wg-next a:hover{border-color:var(--wg-accent); color:var(--wg-text)}
.wg-next__cat{
  display:block; font-size:12.5px; letter-spacing:.14em; color:var(--wg-accent-700);
}
.wg-next__ttl{
  display:block; font-family:var(--wg-head); font-size:16.5px; line-height:1.6;
  margin-top:10px;
}

/* --- 締めのCTA --- */
.wg-cta{background:var(--wg-bg2); padding:clamp(40px,5.5vw,72px) 0}
.wg-cta__lead{max-width:38em; margin:18px 0 0}
.wg-cta__btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.wg-cta__note{margin:14px 0 0; font-size:13px; color:var(--wg-n600)}

/* --- 監修・更新日（一次情報であることを示す） --- */
.wg-byline{
  margin-top:clamp(28px,3.6vw,44px); padding-top:18px;
  border-top:1px solid var(--wg-div);
  font-size:13.5px; color:var(--wg-n600); line-height:1.85;
}

/* --- タブレット・スマホ --- */
@media (max-width:900px){
  .wg-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wg-next{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wg{font-size:15.5px; line-height:1.9}
  .wg-hero__band{aspect-ratio:16/9; max-height:220px}
  .wg-hero h1{font-size:24px; line-height:1.5}
  .wg-hero__sub{font-size:14.5px; letter-spacing:.05em; margin-top:11px}
  .wg-hero__lead{font-size:14.5px; line-height:1.85}
  .wg-answer__text{font-size:17px}
  .wg-cases{grid-template-columns:1fr; gap:16px}
  .wg-case img{aspect-ratio:4/3}
  .wg-cta{padding-bottom:calc(clamp(40px,5.5vw,72px) + 60px)}
}