/* ============================================================ WORDS — 共通CSS カラーミー「CSSを編集する」に貼り付けてください ============================================================ */ :root { /* 白ベースの明るい配色（清潔感重視） */ --paper: #ffffff; --cream: #f7f5ef; --cream2: #f3f0e8; --beige: #efeadd; --beige-d: #e8e1d0; --ink: #26231e; --muted: #7a7368; --gold: #cf9c3a; --gold-d: #bd8c2f; --dark: #1b1916; --line: #e5e0d3; --serif: 'Cormorant Garamond', serif; --jp: 'Noto Sans JP', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--jp); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.7; overflow-x: clip; /* 横はみ出しによる横スクロール防止 */ } html { overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ブラウザ既定の青いホバー/訪問色を無効化 */ a:hover, a:visited { color: inherit; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; } .serif { font-family: var(--serif); } /* ---------- HEADER ---------- */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0); transition: background .35s ease, box-shadow .35s ease; padding: 18px 0; } /* スクロール後は黒の半透明バー（文字は常に白） */ header.solid { background: rgba(27,25,22,.92); box-shadow: 0 1px 0 rgba(0,0,0,.15); } /* どの状態でもヘッダーの文字・ロゴ・アイコンは白で固定 */ header .logo, header nav.menu a, header .icons, header .burger, header.solid .logo, header.solid nav.menu a, header.solid .icons, header.solid .burger { color: #fff; } /* ただしカテゴリードロップダウンの中は白いカードなので常に黒文字 */ header .nav-drop .drop a, header.solid .nav-drop .drop a { color: var(--ink); } /* ---------- システムページの固定ヘッダー対策 ---------- 特定商取引・プライバシー等は直下の .container が本文。固定ヘッダー（約76px）に本文が潜らないよう上余白を確保する。トップページは .container を使わないので影響なし。 */ body > .container { padding-top: 118px; } @media (max-width: 768px) { body > .container { padding-top: 92px; } } .nav { display: flex; align-items: center; justify-content: space-between; } .logo { font-family: var(--serif); line-height: 1; color: #fff; } .logo .lg { font-size: 26px; font-weight: 600; letter-spacing: .28em; } .logo .sm { font-size: 8.5px; letter-spacing: .42em; font-family: var(--jp); font-weight: 500; margin-top: 5px; padding-left: .2em; } nav.menu { display: flex; flex-wrap: nowrap; gap: 20px; align-items: center; } nav.menu a { position: relative; padding-bottom: 4px; white-space: nowrap; font-family: var(--jp); font-size: 13px; letter-spacing: .06em; font-weight: 500; color: #fff; opacity: .92; } /* ホバーで下線がすっと伸びる */ nav.menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .35s cubic-bezier(.22,.61,.36,1); } nav.menu a:hover::after { transform: scaleX(1); transform-origin: left center; } .icons { display: flex; align-items: center; gap: 22px; color: #fff; } /* ---------- CATEGORYドロップダウン（フッターと同じカテゴリー一覧） ---------- */ .nav-drop { position: relative; } .nav-drop .drop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; min-width: 250px; padding: 10px 0; border-radius: 8px; box-shadow: 0 14px 36px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 60; } .nav-drop::after { /* ホバーが途切れない橋渡し */ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } .nav-drop:hover .drop, .nav-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-drop .drop a { display: block; padding: 10px 20px; font-family: var(--jp); font-size: 12.5px; letter-spacing: .04em; color: var(--ink); opacity: 1; white-space: nowrap; transition: background .2s; } .nav-drop .drop a:hover { background: var(--cream); } .nav-drop .drop a::after { content: none; } .icons svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; cursor: pointer; } /* ---------- 検索ポップアップ ---------- */ .search-wrap { position: relative; display: flex; } .ic-btn { background: none; border: none; padding: 0; color: inherit; cursor: pointer; display: flex; } .search-pop { position: fixed; top: 78px; left: 50%; width: min(520px, calc(100vw - 32px)); display: flex; gap: 8px; align-items: center; background: #fff; padding: 12px; border-radius: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; z-index: 60; } .search-pop.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .search-pop input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 11px 13px; font-family: var(--jp); font-size: 13px; color: var(--ink); } .search-pop input[type="text"]:focus { outline: none; border-color: var(--gold); } .search-pop button[type="submit"] { background: var(--gold); color: #fff; border: none; border-radius: 4px; font-family: var(--jp); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; padding: 10px 16px; cursor: pointer; transition: background .2s; } .search-pop button[type="submit"]:hover { background: var(--gold-d); } .cart { display: flex; align-items: center; gap: 6px; font-size: 13px; font-family: var(--serif); } /* ---------- 翻訳ボタン（多言語ドロップダウン） ---------- */ .lang-drop { position: relative; display: flex; } .lang-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.5); border-radius: 50px; padding: 5px 9px 5px 11px; background: transparent; color: inherit; cursor: pointer; line-height: 1; transition: border-color .25s, color .25s, background .25s; } .lang-btn .ic-globe { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; } .lang-btn .lab { font-family: var(--serif); font-size: 12px; letter-spacing: .14em; font-weight: 600; } .lang-btn .ic-caret { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform .25s; } .lang-drop:hover .ic-caret { transform: rotate(180deg); } .lang-btn:hover, .lang-drop:hover .lang-btn { border-color: var(--gold); color: var(--gold); background: rgba(207,156,58,.14); } /* 言語メニュー（右寄せ・コンパクト） */ .lang-drop .drop.lang-menu { left: auto; right: 0; transform: translateX(0) translateY(8px); min-width: 168px; } .lang-drop:hover .drop.lang-menu, .lang-drop:focus-within .drop.lang-menu { transform: translateX(0) translateY(0); } .lang-menu a { display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-family: var(--jp); font-size: 13px; color: var(--ink); white-space: nowrap; } .lang-menu a:hover { background: var(--cream); color: var(--gold-d); } /* モバイルメニュー内の言語切替（タップで開閉するプルダウン） */ .mn-lang-wrap { padding: 16px 0; border-bottom: 1px solid var(--line); } .mn-lang-ttl { display: flex; align-items: center; gap: 9px; width: 100%; font-family: var(--jp); font-size: 16px; font-weight: 500; letter-spacing: .08em; color: var(--ink); background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; } .mn-lang-ttl .ic-globe { width: 20px; height: 20px; stroke: var(--gold-d); fill: none; stroke-width: 1.5; flex: none; } .mn-lang-ttl > span { flex: 1; } .mn-lang-caret { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.8; transition: transform .25s; flex: none; } .mn-lang-ttl.open .mn-lang-caret { transform: rotate(180deg); } .mn-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease; } .mn-lang-grid.open { max-height: 360px; opacity: 1; margin-top: 14px; } .mn-lang { font-family: var(--jp); font-size: 14px; font-weight: 500; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 11px 12px; cursor: pointer; transition: border-color .2s, color .2s; text-align: center; } .mn-lang:hover { border-color: var(--gold); color: var(--gold-d); } .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .burger span { width: 24px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .25s; } /* メニュー展開中はバーガーが黒い×に変わる（これが唯一の閉じるボタン） */ .burger.is-open { color: var(--ink); } .burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } /* ---------- MOBILE NAV ---------- */ .mob-nav { display: none; position: fixed; inset: 0; z-index: 48; background: #fff; padding: 90px 32px 40px; overflow-y: auto; flex-direction: column; } .mob-nav.open { display: flex; } .mob-nav a { font-family: var(--jp); font-size: 16px; font-weight: 500; letter-spacing: .08em; color: var(--ink); padding: 16px 0; border-bottom: 1px solid var(--line); transition: opacity .2s; } .mob-nav a:hover { opacity: .55; } /* モバイルメニュー内の検索 */ .mn-search { display: flex; gap: 8px; margin-bottom: 18px; } .mn-search input[type="text"] { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; font-family: var(--jp); font-size: 14px; color: var(--ink); } .mn-search input[type="text"]:focus { outline: none; border-color: var(--gold); } .mn-search button { width: 46px; border: none; border-radius: 4px; background: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; } .mn-search button svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.6; } /* モバイル：CATEGORYタップでカテゴリー一覧を開閉 */ .mob-nav .mn-cat { position: relative; } .mob-nav .mn-cat::after { content: "＋"; position: absolute; right: 4px; font-size: 18px; color: var(--muted); font-family: var(--jp); } .mob-nav .mn-cat.open::after { content: "－"; } .mn-sub { display: none; background: #fbfaf6; border-bottom: 1px solid var(--line); } .mn-sub.open { display: block; } .mn-sub a { display: block; font-family: var(--jp); font-size: 13.5px; font-weight: 400; letter-spacing: .04em; padding: 12px 0 12px 20px; color: var(--muted); border-bottom: 1px solid #efece3; } .mn-sub a:last-child { border-bottom: none; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--serif); white-space: nowrap; font-size: 16px; letter-spacing: .14em; font-weight: 600; padding: 15px 34px; cursor: pointer; border: none; transition: .25s; } .btn-gold { background: var(--gold); color: #fff; } .btn-gold:hover { background: var(--gold-d); } /* 白枠の透明ボタン（黒つぶれしない） */ .btn-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.85); font-family: var(--jp); font-size: 14px; font-weight: 500; letter-spacing: .1em; transition: background .25s, color .25s; } .btn-dark:hover { background: #fff; color: var(--ink); } /* ---------- SECTION SHELL ---------- */ section.block { padding: 84px 0; scroll-margin-top: 80px; } .bg-cream { background: var(--cream); } .grid { display: grid; grid-template-columns: 248px 1fr; gap: 40px; align-items: start; } /* ★重要：これがないとカルーセルの中身の幅でページ全体が横に伸びてレイアウトが崩れます */ .grid > * { min-width: 0; } .sidehead { align-self: start; z-index: 2; } .sidehead .num { position: relative; display: inline-block; font-family: var(--serif); font-size: 62px; font-weight: 500; line-height: .9; color: var(--ink); transition: transform .6s cubic-bezier(.22,.61,.36,1); } /* 表示中のセクション番号に金色の下線が伸びる */ .sidehead .num::after { content: ""; position: absolute; left: 3px; bottom: -12px; height: 3px; width: 0; background: var(--gold); transition: width .7s cubic-bezier(.22,.61,.36,1); } /* 上下どちらのスクロールでも、見ているセクションの番号だけ下線が伸び縮みする */ .sidehead.active .num::after { width: 48px; } .sidehead.active .num { transform: translateY(-2px); } .sidehead .ttl { font-family: var(--serif); font-size: 24px; letter-spacing: .14em; font-weight: 600; margin-top: 14px; } .sidehead .desc { color: var(--muted); font-size: 13.5px; font-weight: 300; line-height: 2; margin-top: 22px; } .more { display: inline-flex; align-items: center; gap: 34px; font-size: 13px; letter-spacing: .12em; color: var(--ink); margin-top: 26px; font-weight: 400; border-bottom: 1px solid transparent; transition: .25s; } .more .ar { flex: 0 0 auto; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .more:hover { opacity: .7; } .more:hover .ar { transform: translateX(6px); } /* ---------- CAROUSEL ---------- */ .caro { position: relative; min-width: 0; } .caro-track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; cursor: grab; } .caro-track::-webkit-scrollbar { display: none; } /* マウスでも掴んでドラッグスクロールできる（タッチはネイティブのスワイプ） */ .caro-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; } .caro-track img { -webkit-user-drag: none; } /* 矢印は写真に被らないよう、カルーセル右下（ドットの並び）に配置 */ .caro-next, .caro-prev { position: absolute; bottom: -8px; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(60,50,30,.14); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: .2s; } .caro-next { right: 0; } .caro-prev { right: 48px; left: auto; } .caro-next:hover, .caro-prev:hover { background: var(--cream2); } .caro-next svg, .caro-prev svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 1.6; } /* ---------- WAVE DIVIDER ---------- */ .wv { line-height: 0; position: relative; z-index: 3; margin: -24px 0; height: 52px; pointer-events: none; background: var(--wtop); } /* 波はスクロールに合わせて横にゆらぐ（JSがtransformだけを動かすので軽量） */ .wv { overflow: hidden; } /* 揺れた波が横にはみ出して右に余白ができるのを防ぐ */ .wv svg { display: block; width: 114%; margin-left: -7%; height: 100%; will-change: transform; } .wv path { fill: var(--wbot); } /* ---------- SCROLL REVEAL ---------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); } .reveal.in { opacity: 1; transform: none; } /* 見出しテキストが上からふわっと落ちてくる（スクロールで表示されたとき） ※html.wds-anim＋:not(.in)の構造なので、JSが無い環境では普通に表示されます */ .sidehead .ttl, .sidehead .desc, .sidehead .xl-catch, .sidehead .more, .sidehead .shop-info { transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); } html.wds-anim .sidehead:not(.in) .ttl, html.wds-anim .sidehead:not(.in) .desc, html.wds-anim .sidehead:not(.in) .xl-catch, html.wds-anim .sidehead:not(.in) .more, html.wds-anim .sidehead:not(.in) .shop-info { opacity: 0; transform: translateY(-16px); } .sidehead.in .ttl { transition-delay: .1s; } .sidehead.in .xl-catch { transition-delay: .18s; } .sidehead.in .desc { transition-delay: .24s; } .sidehead.in .shop-info { transition-delay: .24s; } .sidehead.in .more { transition-delay: .36s; } /* カルーセル内カードの時間差入場・透明にするのは「JSが動いていて（html.wds-anim）かつまだ表示前（:not(.go)）」のときだけ。・.goが付いた瞬間にこのルールが外れて、自動的に表示状態へ戻る（優先度の競合が起きない構造） */ .caro-track > *, .rank-row > .rcard { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } html.wds-anim .caro-track:not(.go) > *, html.wds-anim .rank-row:not(.go) > .rcard { opacity: 0; transform: translateY(26px); } .caro-track.go > *:nth-child(1), .rank-row.go > *:nth-child(1) { transition-delay: .04s; } .caro-track.go > *:nth-child(2), .rank-row.go > *:nth-child(2) { transition-delay: .13s; } .caro-track.go > *:nth-child(3), .rank-row.go > *:nth-child(3) { transition-delay: .22s; } .caro-track.go > *:nth-child(4) { transition-delay: .31s; } .caro-track.go > *:nth-child(5) { transition-delay: .4s; } .caro-track.go > *:nth-child(6) { transition-delay: .49s; } .caro-track.go > *:nth-child(n+7) { transition-delay: .56s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html.wds-anim .caro-track:not(.go) > *, html.wds-anim .rank-row:not(.go) > .rcard { opacity: 1; transform: none; transition: none; } html.wds-anim .sidehead:not(.in) .ttl, html.wds-anim .sidehead:not(.in) .desc, html.wds-anim .sidehead:not(.in) .xl-catch, html.wds-anim .sidehead:not(.in) .more, html.wds-anim .sidehead:not(.in) .shop-info { opacity: 1; transform: none; transition: none; } } /* ---------- FOOTER ---------- */ footer { background: var(--cream); padding: 70px 0 28px; } .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; } .foot-brand .logo2 { font-family: var(--serif); } .foot-brand .logo2 .lg { font-size: 24px; font-weight: 600; letter-spacing: .28em; } .foot-brand .logo2 .sm { font-size: 8px; letter-spacing: .4em; font-family: var(--jp); font-weight: 500; margin-top: 4px; } .foot-brand p { color: var(--muted); font-size: 12px; font-weight: 300; line-height: 2; margin-top: 22px; max-width: 230px; } .fcol h4 { font-family: var(--serif); font-size: 14px; letter-spacing: .16em; font-weight: 600; margin-bottom: 18px; } .fcol a { display: block; color: var(--muted); font-size: 12.5px; font-weight: 300; margin-bottom: 11px; transition: color .25s, transform .25s; } .fcol a:hover { color: var(--ink); transform: translateX(4px); } .follow .sns { display: flex; gap: 14px; margin-top: 4px; } .follow .sns a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s, transform .25s; } .follow .sns a:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-3px); } .follow .sns svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.4; transition: stroke .25s; } .follow .sns a:hover svg { stroke: #fff; } /* ---------- 25周年バッジ（画面右下に固定） ---------- */ .badge-25th { position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 76px; height: 76px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(160,120,40,.35); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .25s; } .badge-25th:hover { transform: translateY(-4px) scale(1.06); background: var(--gold-d); color: #fff; } .badge-25th .y { font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: .04em; } .badge-25th .t { font-size: 9.5px; font-weight: 500; margin-top: 4px; letter-spacing: .08em; } @media (max-width: 640px) { .badge-25th { width: 62px; height: 62px; right: 14px; bottom: 14px; } .badge-25th .y { font-size: 17px; } .badge-25th .t { font-size: 8.5px; } } .foot-bot { margin-top: 54px; text-align: center; color: var(--muted); font-family: var(--serif); font-size: 12px; letter-spacing: .1em; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 980px) { nav.menu, .icons .ic-search, .icons .ic-user, .icons .lang-btn { display: none; } .burger { display: flex; color: #fff; } .grid { grid-template-columns: 1fr; gap: 24px; } .foot-top { grid-template-columns: 1fr 1fr; gap: 36px 20px; } .wrap { padding: 0 20px; } } @media (max-width: 640px) { .foot-top { grid-template-columns: 1fr; } /* フッターをタップ開閉式（アコーディオン）に */ .fcol h4 { position: relative; cursor: pointer; margin-bottom: 0; padding: 14px 0; border-bottom: 1px solid var(--line); } .fcol h4::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--muted); transition: transform .25s; } .fcol.open h4::after { content: "－"; } .fcol a { display: none; } .fcol.open a { display: block; } .fcol.open h4 + a, .fcol.open a { margin-top: 0; padding: 9px 0; } .fcol.open h4 { margin-bottom: 10px; } /* プルダウン内のリンクを濃く・大きくして読みやすく（雰囲気はそのまま） */ .fcol a { color: #3f382f; font-size: 15px; font-weight: 400; } .fcol h4 { font-size: 15px; color: var(--ink); } /* SNSアイコンは常時表示 */ .follow .sns { display: flex !important; margin-top: 14px; } .follow .sns a { display: flex !important; } .follow h4[data-static] { cursor: default; border-bottom: none; } .follow h4[data-static]::after { content: ""; } } /* ============================================================ WORDS 似合う帽子診断 — CSS 貼り付け先：common.css の末尾 ============================================================ */ .hq-badge{ position:fixed; left:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:9px; background:#26231e; color:#fff; border:none; border-radius:50px; padding:11px 20px 11px 14px; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.22); font-family:'Noto Sans JP',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.04em; line-height:1.3; transition:transform .2s, background .25s; } .hq-badge:hover{ background:#bd8c2f; transform:translateY(-2px); } .hq-badge svg{ width:22px; height:22px; stroke:#cf9c3a; fill:none; stroke-width:1.6; flex:none; } .hq-badge:hover svg{ stroke:#fff; } @media (max-width:600px){ .hq-badge{ left:14px; bottom:14px; padding:14px 20px 14px 16px; font-size:14px; gap:9px; box-shadow:0 10px 26px rgba(0,0,0,.28); } .hq-badge svg{ width:26px; height:26px; } } body.hq-navopen .hq-badge{ display:none; } .hq-overlay{ position:fixed; inset:0; z-index:9999; display:none; align-items:flex-start; justify-content:center; background:rgba(30,27,22,.55); padding:24px 14px; overflow-y:auto; -webkit-overflow-scrolling:touch; } .hq-overlay.open{ display:flex; } .hq-modal{ position:relative; width:100%; max-width:880px; margin:0 auto; background:#fbf9f4; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.3); } .hq-close{ position:absolute; top:10px; right:10px; z-index:5; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid #e7e1d4; cursor:pointer; font-size:22px; line-height:1; color:#2b2620; transition:background .2s; } .hq-close:hover{ background:#fff; } body.hq-lock{ overflow:hidden; } /* ===== WORDS 帽子タイプ診断専用スタイル（.wht 配下にスコープ） ===== */ .wht{ --wq-ink:#2b2620; --wq-sub:#7a7368; --wq-gold:#bd8c2f; --wq-line:#e7e1d4; --wq-cream:#f6f2ea; --wq-card:#fff; --wq-bg:#fbf9f4; max-width:840px; margin:0 auto; padding:8px 14px 40px; color:var(--wq-ink); font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased; } .wht *{box-sizing:border-box;} .wht img{display:block; max-width:100%;} .wht button{font-family:inherit; cursor:pointer;} /* 進捗バー */ .wht-prog{height:5px; background:var(--wq-line); border-radius:99px; overflow:hidden; margin:6px 0 22px;} .wht-prog__bar{height:100%; width:0; background:var(--wq-gold); border-radius:99px; transition:width .4s ease;} .wht-step{font-size:11px; letter-spacing:.1em; color:var(--wq-sub); text-align:center; margin-bottom:10px;} /* カード（各画面） */ .wht-card{background:var(--wq-card); border:1px solid var(--wq-line); border-radius:14px; padding:30px 22px; box-shadow:0 8px 30px rgba(90,70,40,.06);} /* スタート画面 */ .wht-start{text-align:center; padding:40px 22px;} .wht-start__en{font-size:12px; letter-spacing:.28em; color:var(--wq-gold);} .wht-start__ttl{font-size:24px; font-weight:700; letter-spacing:.06em; margin:10px 0 0; line-height:1.5;} .wht-start__lead{font-size:14px; color:#5c554b; margin:16px auto 0; max-width:480px;} /* 質問 */ .wht-q{font-size:18px; font-weight:700; letter-spacing:.02em; text-align:center; margin:0 0 20px; line-height:1.6;} .wht-opts{display:grid; grid-template-columns:1fr; gap:11px;} .wht-opt{ width:100%; text-align:left; background:#fff; border:1px solid var(--wq-line); border-radius:11px; padding:15px 17px; font-size:15px; color:var(--wq-ink); transition:border-color .2s, background .2s, transform .15s; } .wht-opt:hover{border-color:var(--wq-gold); background:var(--wq-cream);} .wht-opt:active{transform:scale(.99);} /* ボタン */ .wht-btn{ display:inline-block; background:var(--wq-gold); color:#fff; border:1px solid var(--wq-gold); border-radius:99px; padding:14px 40px; font-size:15px; font-weight:700; letter-spacing:.06em; text-decoration:none; transition:opacity .2s; text-align:center; } .wht-btn:hover{opacity:.88;} .wht-btn--block{display:block; width:100%;} .wht-btn--sub{background:#fff; color:var(--wq-ink); border:1px solid var(--wq-line);} .wht-btn--sm{padding:10px 22px; font-size:13px;} .wht-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px;} /* 戻る */ .wht-back{background:none; border:none; color:var(--wq-sub); font-size:13px; padding:6px 4px; margin-bottom:6px;} .wht-back:hover{color:var(--wq-gold);} /* 結果 */ .wht-result__en{font-size:12px; letter-spacing:.26em; color:var(--wq-gold); text-align:center;} .wht-result__name{font-size:22px; font-weight:700; text-align:center; margin:8px 0 4px; line-height:1.5;} .wht-result__cat{font-size:13px; color:var(--wq-sub); text-align:center; margin-bottom:18px;} .wht-result__desc{font-size:14px; color:#4f483f; background:var(--wq-cream); border-radius:11px; padding:16px 18px; margin:0 0 14px;} .wht-result__reason{font-size:13.5px; color:#5c554b; margin:0 0 20px;} .wht-result__reason b{color:var(--wq-gold);} /* 関連タイプ */ .wht-related{margin:0 0 24px;} .wht-related__ttl{font-size:12px; letter-spacing:.1em; color:var(--wq-sub); margin-bottom:8px;} .wht-chips{display:flex; gap:8px; flex-wrap:wrap;} .wht-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--wq-line); border-radius:99px; padding:7px 15px; font-size:13px; color:var(--wq-ink); text-decoration:none; background:#fff;} .wht-chip:hover{border-color:var(--wq-gold); color:var(--wq-gold);} /* 商品カード */ .wht-sec-ttl{font-size:14px; font-weight:700; letter-spacing:.04em; margin:24px 0 12px; padding-left:12px; position:relative;} .wht-sec-ttl::before{content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:3px; background:var(--wq-gold); border-radius:2px;} .wht-products{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;} .wht-pcard{background:#fff; border:1px solid var(--wq-line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s;} .wht-pcard:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(90,70,40,.12);} .wht-pcard__img{aspect-ratio:1/1; background:#f4f0e7; overflow:hidden;} .wht-pcard__img img{width:100%; height:100%; object-fit:cover;} .wht-pcard__body{padding:12px 13px 14px; display:flex; flex-direction:column; flex:1;} .wht-pcard__name{font-size:13.5px; font-weight:600; line-height:1.5; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .wht-pcard__desc{font-size:11.5px; color:var(--wq-sub); line-height:1.6; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .wht-pcard__price{font-size:14px; font-weight:700; margin:auto 0 10px;} .wht-pcard__btn{display:block; text-align:center; background:var(--wq-cream); color:var(--wq-ink); border:1px solid var(--wq-line); border-radius:8px; padding:9px; font-size:12.5px; font-weight:600; text-decoration:none; transition:background .2s;} .wht-pcard__btn:hover{background:var(--wq-gold); color:#fff; border-color:var(--wq-gold);} /* 店頭試着の導線（クリックでホームページへ） */ .wht-note{display:block; margin-top:26px; padding:16px 18px; background:var(--wq-cream); border-radius:11px; font-size:13px; color:#5c554b; text-align:center; text-decoration:none; transition:background .2s;} .wht-note:hover{background:#efe6d5;} .wht-note b{color:var(--wq-ink);} .wht-note-link{display:inline-block; margin-top:8px; color:var(--wq-gold); font-weight:700;} /* 読み込み中・関連タイプブロック */ .wht-loading,.wht-empty{grid-column:1/-1; text-align:center; color:var(--wq-sub); font-size:12px; padding:18px 0;} .wht-relblock{margin:0 0 22px;} .wht-relhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; flex-wrap:wrap;} .wht-relname{font-size:14px; font-weight:700; letter-spacing:.02em;} /* レスポンシブ：PCは商品3〜4列、選択肢は2列 */ @media (min-width:560px){ .wht-opts{grid-template-columns:1fr 1fr;} .wht-products{grid-template-columns:repeat(3,1fr);} .wht-card{padding:36px 34px;} .wht-start__ttl{font-size:28px;} } @media (min-width:820px){ .wht-products{grid-template-columns:repeat(4,1fr);} }