/* ========================================================= SENDAI SAMURAI EXPERIENCE — Wa-Modern Design System Palette: Ink Black / Armor Navy / Antique Gold / Washi Cream / Crest Crimson ========================================================= */ :root{ /* ---- Color tokens ---- */ --ink: #0a0e14; /* near-black, page background */ --navy: #0f1f38; /* deep lacquer navy, panels */ --navy-soft: #152a4a; /* lighter navy for cards */ --gold: #c9a227; /* antique gold leaf */ --gold-bright:#e3c158; /* hover / highlight gold */ --gold-dim: #8a701c; /* low-emphasis gold, borders */ --washi: #ece6d6; /* warm paper cream, primary text on dark */ --washi-dim: #b9b3a0; /* secondary text on dark */ --crimson: #7a1f2b; /* crest cording accent, used sparingly */ --crimson-dim:#4a1419; /* ---- Type ---- */ --font-display: 'Shippori Mincho', 'Noto Serif JP', serif; --font-en-display: 'Cormorant Garamond', serif; --font-body: 'Noto Sans JP', 'Helvetica Neue', sans-serif; /* ---- Layout ---- */ --max-w: 1180px; --header-h: 84px; --radius-sm: 2px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---- Reset ---- */ *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--ink); color: var(--washi); font-family: var(--font-body); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul,ol{ margin:0; padding:0; list-style:none; } h1,h2,h3,p{ margin:0; } button{ font-family: inherit; cursor:pointer; } :focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; } } /* ---- Language toggle behavior ---- */ /* Default: Japanese shown, English hidden. .lang-en on flips it. */ .en{ display:none; } body.lang-en .jp{ display:none; } body.lang-en .en{ display:initial; } body.lang-en .en-addr{ display:block; } .section-inner .en, .hero-content .en{ display:none; } body.lang-en .section-inner .en, body.lang-en .hero-content .en{ display:initial; } /* spans used as block-ish text need block restored */ .hero-line.en, p.en, .flow-desc.en, .flow-title.en, .plan-tagline.en, .booking-sub.en{ display:none; } body.lang-en .hero-line.en, body.lang-en p.en, body.lang-en .flow-desc.en, body.lang-en .flow-title.en, body.lang-en .plan-tagline.en, body.lang-en .booking-sub.en{ display:block; } /* ========================================================= Texture helpers — subtle washi/lacquer feel without images ========================================================= */ .texture-noise{ background-image: radial-gradient(circle at 20% 20%, rgba(201,162,39,.04), transparent 40%), radial-gradient(circle at 80% 60%, rgba(201,162,39,.03), transparent 45%); } .kintsugi-rule{ height:1px; background: linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold) 50%, var(--gold-dim) 80%, transparent); opacity:.6; } /* ========================================================= HEADER ========================================================= */ .site-header{ position: sticky; top:0; z-index: 100; height: var(--header-h); background: rgba(10,14,20,.86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,162,39,.22); } .header-inner{ max-width: var(--max-w); margin: 0 auto; height: 100%; padding: 0 28px; display:flex; align-items:center; justify-content: space-between; gap: 24px; } .brand{ display:flex; align-items:center; gap:14px; text-decoration: none; } /* ========================================================= ロゴマーク（ヘッダー・フッター共通） ───────────────────────────────────────────────────────── logo.jpg の兜マーク部分だけを object-fit: cover で切り抜きます。黒い丸枠・背景マスクは一切なし。 ★ 兜マークの位置がずれる場合の調整方法： styles.css の .brand-logo-img の object-position を変更例）"50% 18%" → 縦の数値を上げると下方向にずれます ========================================================= */ .brand-logo-img{ /* 表示サイズ：ヘッダー用 */ width: 48px; height: 48px; flex-shrink: 0; /* 兜マーク部分だけをトリミング表示 */ object-fit: cover; object-position: 50% 18%; /* ← 兜マークがずれる場合はこの数値を調整 */ /* 丸枠・黒背景マスクなし */ border-radius: 0; background: transparent; display: block; } /* フォールバック（logo.jpgがない時のSVG月紋） */ .brand-logo-fallback{ width: 32px; height: 20px; flex-shrink: 0; display: none; /* onerror で flex に切り替わる */ align-items: center; } .brand-logo-fallback .crest-svg{ width: 100%; height: 100%; fill: var(--gold); } /* ---- ヘッダーのブランドテキスト ---- */ .brand-text{ display: flex; flex-direction: column; line-height: 1.3; } .brand-jp{ font-family: var(--font-display); font-size: .92rem; font-weight: 700; color: #c5a059; letter-spacing: .04em; } .brand-en{ font-family: var(--font-en-display); font-size: .5rem; letter-spacing: .1em; color: #c5a059; text-transform: uppercase; } body.lang-en .brand-jp{ display:none; } body.lang-en .brand-en{ font-size: .6rem; letter-spacing: .06em; } /* 旧スタイル（後方互換） */ .brand-crest{ width:30px; height:18px; flex-shrink:0; } .crest-svg{ width:100%; height:100%; fill: var(--gold); } .main-nav ul{ display:flex; gap:22px; } .main-nav a{ position:relative; font-size:.78rem; letter-spacing:.04em; color: var(--washi-dim); transition: color .25s var(--ease); display:flex; flex-direction:column; align-items:center; gap:2px; } .main-nav a .en{ font-family: var(--font-en-display); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dim); } body.lang-en .main-nav a .en{ color: var(--gold); } .main-nav a:hover{ color: var(--washi); } .main-nav a::after{ content:""; position:absolute; bottom:-8px; left:50%; transform: translateX(-50%); width:0; height:1px; background: var(--gold); transition: width .3s var(--ease); } .main-nav a:hover::after{ width:100%; } .header-actions{ display:flex; align-items:center; gap:20px; } .lang-switch{ display:flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.08em; } .lang-btn{ background:none; border:none; color: var(--washi-dim); padding:4px 2px; } .lang-btn.is-active{ color: var(--gold); font-weight:600; } .lang-divider{ color: var(--washi-dim); opacity:.5; } .menu-toggle{ display:none; } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 13px 26px; font-size:.82rem; letter-spacing:.06em; border:1px solid transparent; border-radius: var(--radius-sm); transition: all .28s var(--ease); white-space:nowrap; } .btn .jp{ font-weight:600; } .btn .en{ font-family: var(--font-en-display); font-size:.86rem; text-transform:uppercase; letter-spacing:.1em; } .btn-gold{ background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #181206; box-shadow: 0 6px 18px rgba(201,162,39,.22); } .btn-gold:hover{ background: linear-gradient(180deg, #f0d479, var(--gold-bright)); box-shadow: 0 8px 22px rgba(201,162,39,.32); transform: translateY(-1px); } .btn-outline{ border-color: rgba(236,230,214,.4); color: var(--washi); } .btn-outline:hover{ border-color: var(--washi); background: rgba(236,230,214,.06); } .btn-outline-gold{ border-color: var(--gold-dim); color: var(--gold-bright); width:100%; } .btn-outline-gold:hover{ border-color: var(--gold); background: rgba(201,162,39,.08); } .btn-lg{ padding:16px 32px; font-size:.88rem; } .header-cta{ padding:11px 22px; } /* ---- Mobile nav ---- */ .mobile-nav{ display:none; position:absolute; top:100%; left:0; right:0; background: var(--ink); border-bottom:1px solid rgba(201,162,39,.22); padding: 8px 24px 24px; max-height: calc(100vh - var(--header-h)); overflow-y:auto; z-index: 99; } .mobile-nav ul{ display:flex; flex-direction:column; } .mobile-nav a{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 4px; border-bottom:1px solid rgba(236,230,214,.08); color: var(--washi); } .mobile-nav a .en{ font-family: var(--font-en-display); color: var(--gold-dim); font-size:.75rem; text-transform:uppercase; } .mobile-nav .mobile-cta{ color: var(--gold); border-bottom:none; } .mobile-lang{ justify-content:center; margin-top:18px; font-size:.8rem; } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; min-height: calc(100vh - var(--header-h)); display:flex; align-items:center; overflow:hidden; padding: 80px 28px 60px; } .hero-bg{ position:absolute; inset:0; z-index:0; background: linear-gradient(160deg, var(--ink) 0%, #0c1320 45%, var(--navy) 130%); } .hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center 30%; opacity: .85; } /* 画像が見つからない場合は非表示にし、下地のグラデーションのみ表示 */ .hero-bg.img-missing .hero-bg-img{ display:none; } .hero-gradient{ position:absolute; inset:0; background: radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,31,56,.55), transparent 60%), linear-gradient(160deg, rgba(10,14,20,.92) 0%, rgba(12,19,32,.75) 45%, rgba(15,31,56,.9) 130%); } .hero-bg.img-missing .hero-gradient{ background: radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,31,56,.9), transparent 60%), linear-gradient(160deg, var(--ink) 0%, #0c1320 45%, var(--navy) 130%); } .hero-texture{ position:absolute; inset:0; background-image: repeating-linear-gradient(115deg, rgba(236,230,214,.012) 0px, rgba(236,230,214,.012) 1px, transparent 1px, transparent 64px); } .hero-crest-mark{ position:absolute; top:8%; right:-8%; width: 62%; max-width:760px; fill: none; stroke: var(--gold); stroke-width:1.4; opacity:.16; } .hero-content{ position:relative; z-index:1; max-width: var(--max-w); margin: 0 auto; width:100%; } .hero-eyebrow{ font-size:.8rem; letter-spacing:.12em; color: var(--gold); margin-bottom: 28px; padding-left:2px; border-left: 2px solid var(--gold-dim); padding-left:12px; } .hero-eyebrow .en{ font-family: var(--font-en-display); font-style:italic; letter-spacing:.04em; font-size:.95rem; } .hero-title{ margin-bottom:28px; } .hero-title .jp{ display:block; font-family: var(--font-display); font-weight:700; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:1.25; color: var(--washi); } .hero-title .en{ font-family: var(--font-en-display); font-weight:500; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height:1.15; color: var(--washi); } .hero-line{ display:block; } .hero-line-accent{ color: var(--gold-bright); } .hero-sub{ max-width: 560px; font-size: 1rem; color: var(--washi-dim); margin-bottom: 40px; } .hero-sub.en{ font-size:1.05rem; font-family: var(--font-en-display); } .hero-actions{ display:flex; gap:18px; margin-bottom:56px; flex-wrap:wrap; } .hero-trust{ display:flex; gap:40px; flex-wrap:wrap; } .hero-trust li{ display:flex; flex-direction:column; } .trust-num{ font-family: var(--font-en-display); font-size:1.6rem; color: var(--gold); font-weight:600; } .trust-label{ font-size:.78rem; color: var(--washi-dim); } .trust-label.en{ display:none; font-family: var(--font-body); } body.lang-en .trust-label.en{ display:block; } body.lang-en .trust-label.jp{ display:none; } .scroll-cue{ position:absolute; bottom:28px; left:28px; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.66rem; letter-spacing:.2em; color: var(--washi-dim); } .scroll-line{ width:1px; height:40px; background: linear-gradient(180deg, var(--gold), transparent); animation: scrollPulse 2.2s ease-in-out infinite; } @keyframes scrollPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } } /* ========================================================= SECTION SHARED ========================================================= */ .section-inner{ max-width: var(--max-w); margin:0 auto; padding: 64px 28px; } .section-eyebrow{ font-size:.78rem; letter-spacing:.16em; color: var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:20px; } .section-eyebrow::before{ content:""; width:26px; height:1px; background: var(--gold); } .section-eyebrow .en{ font-family: var(--font-en-display); text-transform:uppercase; font-size:.86rem; } .section-eyebrow.light{ color: var(--gold-bright); } .section-title{ margin-bottom: 28px; max-width:780px; } .section-title .jp{ display:block; font-family: var(--font-display); font-weight:700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--washi); line-height:1.4; } .section-title .en{ font-family: var(--font-en-display); font-weight:500; font-size: clamp(1.8rem, 3.1vw, 2.5rem); color: var(--washi); } body.lang-en .section-title .en{ display:block; } .section-lead{ max-width:640px; color: var(--washi-dim); font-size:1.02rem; margin-top:-6px; margin-bottom:8px; } /* ========================================================= ABOUT ========================================================= */ .about{ background: var(--ink); position:relative; } .about-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 72px; align-items:start; margin-top: 48px; } .about-copy p{ color: var(--washi-dim); margin-bottom:20px; max-width: 56ch; } .about-copy p.jp{ font-size:1.02rem; } .about-copy p.en{ font-size:1.04rem; font-family: var(--font-en-display); } .about-points{ margin-top:32px; display:flex; flex-direction:column; gap:18px; } .about-points li{ display:grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 2px 14px; border-top: 1px solid rgba(236,230,214,.1); padding-top:16px; } .point-icon{ grid-row: 1 / 3; font-size:1.1rem; color: var(--gold); } .about-points .jp{ color: var(--washi); font-size:.96rem; } .about-points .en{ color: var(--washi-dim); font-size:.92rem; font-family: var(--font-en-display); } body.lang-en .about-points .en{ display:block; grid-column:2; } .about-visual{ display:flex; justify-content:center; } .about-frame{ position:relative; width:100%; max-width:320px; aspect-ratio: 3/4; border: 1px solid var(--gold-dim); padding:18px; background: linear-gradient(160deg, var(--navy-soft), var(--navy)); } .about-frame-inner{ position:relative; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(201,162,39,.3); } .about-frame-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* 画像が見つからない場合は三日月家紋のみを表示するフォールバック */ .about-frame-inner.img-missing .about-frame-img{ display:none; } .about-frame-inner:not(.img-missing) .about-mon{ display:none; } .about-mon{ width:62%; fill:none; stroke: var(--gold); stroke-width:2.2; } .about-mon circle{ stroke: var(--gold-dim); stroke-width:1; } .about-frame-caption{ position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); background: var(--ink); padding:0 14px; font-size:.74rem; letter-spacing:.08em; color: var(--gold); white-space:nowrap; display:flex; gap:8px; z-index:1; } .about-frame-caption .en{ color: var(--washi-dim); font-family: var(--font-en-display); } body.lang-en .about-frame-caption .en{ display:block; } /* ========================================================= PLANS — "armor plate" pricing cards ========================================================= */ .plans{ background: linear-gradient(180deg, var(--ink), #0c121e); position:relative; } .plan-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; align-items:stretch; /* 全カードを行の最大高さに揃える */ } .plan-grid-4{ grid-template-columns: repeat(4, 1fr); } /* ---- カード全体を flex 縦積みにしてプレートが行の高さいっぱいに伸びるようにする ---- */ .plan-card{ position:relative; display:flex; flex-direction:column; } .plan-plate{ background: linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 70%, #0d1932 100%); border: 1px solid rgba(201,162,39,.25); border-top: 3px solid var(--gold-dim); padding: 38px 30px 32px; flex: 1; /* カードいっぱいに高さを引き伸ばす */ display:flex; flex-direction:column; position:relative; transition: transform .3s var(--ease), border-color .3s var(--ease); } .plan-plate::before{ content:""; position:absolute; top:10px; left:0; right:0; height:1px; background: repeating-linear-gradient(90deg, rgba(201,162,39,.5) 0 6px, transparent 6px 12px); } .plan-card:hover .plan-plate{ transform: translateY(-6px); border-color: rgba(201,162,39,.55); } .plan-name{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; } .plan-name .jp{ font-family: var(--font-display); font-size:1.6rem; font-weight:700; color: var(--washi); } .plan-name .en{ font-family: var(--font-en-display); font-size:.9rem; letter-spacing:.14em; color: var(--gold); } body.lang-en .plan-name .en{ display:inline; font-size:1.5rem; letter-spacing:.06em; } .plan-tagline{ color: var(--washi-dim); font-size:.88rem; margin-bottom:22px; } .plan-tagline.en{ font-family: var(--font-en-display); font-size:.95rem; } .plan-price{ font-family: var(--font-en-display); font-size:2.4rem; color: var(--gold-bright); font-weight:600; margin-bottom: 26px; display:flex; align-items:baseline; gap:4px; } .price-currency{ font-size:1.2rem; } .price-unit{ font-family: var(--font-body); font-size:.78rem; color: var(--washi-dim); margin-left:6px; } .price-unit .jp{ display:inline; } .price-unit .en{ display:none; } body.lang-en .price-unit .en{ display:inline; } body.lang-en .price-unit .jp{ display:none; } .plan-content{ font-size:.9rem; color: var(--washi); font-weight:600; padding-bottom:14px; margin-bottom:18px; border-bottom: 1px solid rgba(236,230,214,.12); } .plan-content .en{ display:none; font-family: var(--font-en-display); font-weight:500; font-size:.94rem; } body.lang-en .plan-content .en{ display:block; } body.lang-en .plan-content .jp{ display:none; } .plan-highlight-label{ font-size:.72rem; letter-spacing:.1em; color: var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:8px; } .plan-highlight-label::before{ content:""; width:14px; height:1px; background: var(--gold-dim); } .plan-highlight-label .en{ display:none; font-family: var(--font-en-display); text-transform:uppercase; font-size:.74rem; } body.lang-en .plan-highlight-label .en{ display:inline; } body.lang-en .plan-highlight-label .jp{ display:none; } .plan-description{ font-size:.86rem; line-height:1.75; color: var(--washi-dim); margin-bottom:28px; flex-grow:1; /* 説明文がスペースを埋めてボタンを底揃えにする */ } .plan-description .en{ display:none; font-family: var(--font-en-display); font-size:.92rem; line-height:1.7; } body.lang-en .plan-description .en{ display:block; } body.lang-en .plan-description .jp{ display:none; } .plan-cta{ margin-top:auto; } /* ---- 兜（KABUTO）プラン：予約不要・当日受付の入門プラン ---- */ .plate-0{ background: linear-gradient(165deg, #1a2438 0%, #131d30 70%, #0d1626 100%); border-color: rgba(201,162,39,.18); } .plan-card-walkin .plan-plate::before{ background: repeating-linear-gradient(90deg, rgba(201,162,39,.3) 0 6px, transparent 6px 12px); } .status-badge{ margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding: 13px 20px; border: 1px dashed var(--gold-dim); background: rgba(201,162,39,.06); color: var(--gold-bright); } .status-badge.no-booking-needed .jp{ font-size:.84rem; font-weight:600; letter-spacing:.04em; } .status-badge.no-booking-needed .en{ display:none; font-family: var(--font-en-display); font-size:.82rem; letter-spacing:.02em; color: var(--washi-dim); } body.lang-en .status-badge.no-booking-needed .en{ display:block; } body.lang-en .status-badge.no-booking-needed .jp{ display:none; } .plan-note{ margin-top:40px; font-size:.84rem; color: var(--washi-dim); display:flex; flex-direction:column; gap:4px; } /* ---- 衆（グループ割引）の案内文：通常の注記より少し目立たせる ---- */ .group-discount-note{ padding: 16px 20px; border: 1px solid rgba(201,162,39,.3); background: rgba(201,162,39,.05); color: var(--washi); } .group-discount-note strong{ color: var(--gold-bright); font-weight:700; } .group-discount-note .en{ display:none; font-family: var(--font-en-display); font-size:.95rem; } body.lang-en .group-discount-note .en{ display:block; } body.lang-en .group-discount-note .jp{ display:none; } /* ========================================================= FLOW ========================================================= */ .flow{ background: var(--ink); } .flow-list{ margin-top:56px; display:flex; flex-direction:column; } .flow-step{ display:grid; grid-template-columns: 90px 1fr; gap:32px; padding: 36px 0; border-top:1px solid rgba(236,230,214,.1); align-items:start; } .flow-step:last-child{ border-bottom:1px solid rgba(236,230,214,.1); } .flow-mark{ font-family: var(--font-display); font-size:2.4rem; color: var(--gold-dim); line-height:1; } .flow-title{ font-family: var(--font-display); font-size:1.3rem; color: var(--washi); margin-bottom:8px; font-weight:600; } .flow-title.en{ font-family: var(--font-en-display); font-style:italic; color: var(--gold-bright); font-size:1.4rem; } body.lang-en .flow-title.en{ display:block; } .flow-desc{ color: var(--washi-dim); max-width:60ch; font-size:.94rem; } .flow-desc.en{ font-family: var(--font-en-display); font-size:1rem; } /* ========================================================= GALLERY ========================================================= */ .gallery{ background: linear-gradient(180deg, #0c121e, var(--ink)); } .gallery .section-inner{ padding-bottom: 48px; } .gallery-grid{ max-width: var(--max-w); margin: 0 auto 56px; padding: 0 28px; display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; } .gallery-item{ position:relative; margin:0; background: linear-gradient(155deg, var(--navy-soft), #0a1426); border:1px solid rgba(201,162,39,.18); display:flex; align-items:flex-end; overflow:hidden; } .gallery-item a{ position:absolute; inset:0; z-index:0; display:block; cursor:pointer; } .gallery-item a:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: -4px; z-index:2; } .gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); } .gallery-item:hover img{ transform: scale(1.05); } /* 画像が見つからない場合は鳥居マークのプレースホルダーを表示 */ .gallery-item.img-missing img{ display:none; } .gallery-item::before{ content:"⛩"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2rem; opacity:0; color: var(--gold); transition: opacity .2s; } .gallery-item.img-missing::before{ opacity:.12; } .gallery-item figcaption{ position:relative; z-index:1; width:100%; padding:16px; font-size:.78rem; letter-spacing:.04em; color: var(--washi-dim); pointer-events:none; } /* 写真がある場合は読みやすくするためキャプション下に暗いグラデーションを敷く */ .gallery-item:not(.img-missing) figcaption{ color: var(--washi); background: linear-gradient(0deg, rgba(8,10,14,.85), transparent); } .gallery-item .en{ display:none; font-family: var(--font-en-display); color: var(--gold-bright); font-size:.85rem; } body.lang-en .gallery-item .en{ display:block; } body.lang-en .gallery-item .jp{ display:none; } .gallery-tall{ grid-row: span 2; } .gallery-wide{ grid-column: span 2; } /* ========================================================= ACCESS ========================================================= */ .access{ background: var(--ink); } /* ---- 新レイアウト：左に基本情報、右にアクセスルート ---- */ .access-grid-new{ display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; margin-top: 48px; margin-bottom: 52px; } /* ---- 左カラム：基本情報 ---- */ .access-basics{ display:flex; flex-direction:column; gap:0; } .access-list{ margin: 0 0 32px; display:flex; flex-direction:column; gap:0; } .access-row{ display: grid; grid-template-columns: 110px 1fr; gap: 14px 18px; border-top: 1px solid rgba(236,230,214,.1); padding: 18px 0; } .access-row:last-child{ border-bottom: 1px solid rgba(236,230,214,.1); } .access-row dt{ color: var(--gold); font-size: .8rem; letter-spacing: .06em; padding-top: 2px; } .access-row dt .en{ display: none; font-family: var(--font-en-display); text-transform: uppercase; font-size: .76rem; } body.lang-en .access-row dt .en{ display: block; } body.lang-en .access-row dt .jp{ display: none; } .access-row dd{ margin: 0; color: var(--washi-dim); font-size: .9rem; line-height: 1.7; } .access-row dd .en{ display:none; font-family: var(--font-en-display); font-size:.92rem; } body.lang-en .access-row dd .en{ display:block; } body.lang-en .access-row dd .jp{ display:none; } .access-note{ font-size: .78rem; color: var(--washi-dim); opacity:.75; } /* ---- 右カラム：アクセスルート ---- */ .access-routes{ display: flex; flex-direction: column; gap: 28px; } .access-routes-heading{ font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--washi); letter-spacing: .06em; margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(201,162,39,.3); } .access-routes-heading .en{ font-family: var(--font-en-display); font-size:1.05rem; } body.lang-en .access-routes-heading .en{ display:block; } body.lang-en .access-routes-heading .jp{ display:none; } .access-route-block{ border-left: 2px solid var(--gold-dim); padding: 4px 0 4px 20px; } .route-title{ display: flex; align-items: baseline; gap: 10px; font-size: .88rem; font-weight: 700; color: var(--washi); margin: 0 0 10px; line-height: 1.5; } .route-title .en{ display:none; font-family: var(--font-en-display); font-size:.94rem; } body.lang-en .route-title .en{ display:inline; } body.lang-en .route-title .jp{ display:none; } .route-icon{ font-size: 1rem; flex-shrink:0; } .route-body{ font-size: .86rem; color: var(--washi-dim); line-height: 1.8; margin: 0; } .route-body .en{ display:none; font-family: var(--font-en-display); font-size:.9rem; } body.lang-en .route-body .en{ display:block; } body.lang-en .route-body .jp{ display:none; } .route-list{ display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; margin: 0; } .route-list li{ position: relative; padding-left: 16px; font-size: .86rem; color: var(--washi-dim); line-height: 1.8; } .route-list li::before{ content: "—"; position: absolute; left: 0; color: var(--gold-dim); } .route-list .en{ display:none; font-family: var(--font-en-display); font-size:.9rem; } body.lang-en .route-list .en{ display:block; } body.lang-en .route-list .jp{ display:none; } /* ---- 地図エリア（フルワイド） ---- */ .access-map{ aspect-ratio: 21/6; border: 1px solid rgba(201,162,39,.25); background: linear-gradient(160deg, var(--navy-soft), var(--navy)); margin-top: 8px; } .map-placeholder{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color: var(--washi-dim); } .map-pin{ font-size:1.8rem; margin-bottom:6px; filter: drop-shadow(0 0 8px rgba(201,162,39,.5)); } .map-placeholder p.jp{ font-size:.95rem; } .map-placeholder p.en{ display:none; font-family: var(--font-en-display); font-size:.95rem; } body.lang-en .map-placeholder p.en{ display:block; } body.lang-en .map-placeholder p.jp{ display:none; } .map-hint{ font-size: .72rem; color: var(--washi-dim); opacity:.5; margin-top: 4px; text-align:center; padding: 0 24px; } .map-hint.en{ display:none; font-family: var(--font-en-display); } body.lang-en .map-hint.en{ display:block; } body.lang-en .map-hint.jp{ display:none; } /* ---- レスポンシブ ---- */ @media (max-width: 980px){ .access-grid-new{ grid-template-columns: 1fr; gap: 40px; } .access-map{ aspect-ratio: 16/5; } } @media (max-width: 600px){ .access-map{ aspect-ratio: 4/2; } } /* ========================================================= BOOKING CTA BAND ========================================================= */ .booking{ position:relative; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201,162,39,.1), transparent 60%), linear-gradient(180deg, var(--navy) 0%, #0a1322 100%); border-top: 1px solid rgba(201,162,39,.3); text-align:center; } .booking-inner{ max-width:760px; margin:0 auto; padding:72px 28px; } .booking-title{ margin-bottom:22px; } .booking-title .jp{ display:block; font-family: var(--font-display); font-weight:700; font-size: clamp(2rem, 4vw, 3rem); color: var(--washi); } .booking-title .en{ font-family: var(--font-en-display); font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--washi); } body.lang-en .booking-title .en{ display:block; } .booking-sub{ color: var(--washi-dim); margin-bottom:44px; } .booking-sub.en{ font-family: var(--font-en-display); font-size:1.05rem; } .booking-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ background: var(--ink); border-top:1px solid rgba(201,162,39,.18); } .footer-inner{ max-width: var(--max-w); margin:0 auto; padding: 64px 28px 40px; display:grid; grid-template-columns: 1fr 2fr 1fr; gap:40px; } .footer-brand{ display: flex; align-items: center; gap: 14px; } /* フッターのロゴは少し大きめ */ .footer-logo-img{ width: 56px; height: 56px; } .footer-brand .brand-crest{ width:32px; height:20px; margin-bottom:0; } .footer-brand-text{ display: flex; flex-direction: column; gap: 3px; } .footer-brand-jp{ font-family: var(--font-display); font-size: 1.0rem; color: #c5a059; margin: 0; font-weight: 700; } .footer-brand-en{ font-family: var(--font-en-display); font-size: .58rem; letter-spacing: .1em; color: #c5a059; text-transform: uppercase; margin: 0; } .footer-nav{ display:flex; flex-wrap:wrap; gap:28px; align-content:flex-start; } .footer-nav a{ display:flex; flex-direction:column; gap:2px; font-size:.86rem; color: var(--washi-dim); } .footer-nav a:hover{ color: var(--gold); } .footer-nav a .en{ display:none; font-family: var(--font-en-display); font-size:.74rem; text-transform:uppercase; color: var(--gold-dim); } body.lang-en .footer-nav a .en{ display:block; } body.lang-en .footer-nav a .jp{ display:none; } .footer-meta{ font-size:.84rem; color: var(--washi-dim); display:flex; flex-direction:column; gap:8px; text-align:right; } .footer-bottom{ border-top:1px solid rgba(236,230,214,.08); padding: 20px 28px; text-align:center; font-size:.74rem; color: var(--washi-dim); letter-spacing:.04em; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px){ .plan-grid-4{ grid-template-columns: repeat(2, 1fr); max-width:680px; margin-inline:auto; } } @media (max-width: 980px){ .main-nav{ display:none; } .header-actions .lang-switch{ display:none; } .menu-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; padding:0; } .menu-toggle span{ width:100%; height:1px; background: var(--washi); transition: all .25s var(--ease); } .site-header.is-open .menu-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .site-header.is-open .menu-toggle span:nth-child(2){ opacity:0; } .site-header.is-open .menu-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } .mobile-nav{ display: block; } .site-header:not(.is-open) .mobile-nav{ display:none; } .about-grid{ grid-template-columns:1fr; } .about-visual{ order:-1; } .plan-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; } .gallery-grid{ grid-template-columns: repeat(2,1fr); } .gallery-tall{ grid-row:span 1; } .gallery-wide{ grid-column: span 2; } .footer-inner{ grid-template-columns:1fr; text-align:left; } .footer-meta{ text-align:left; } } @media (max-width: 600px){ .section-inner{ padding: 48px 22px; } .hero{ padding: 60px 22px 50px; } .hero-actions{ flex-direction:column; } .hero-actions .btn{ width:100%; } .hero-trust{ gap:24px; } .booking-actions{ flex-direction:column; } .booking-actions .btn{ width:100%; } .flow-step{ grid-template-columns: 50px 1fr; gap:18px; } .flow-mark{ font-size:1.8rem; } .header-inner{ padding: 0 16px; gap:10px; } .brand-logo-img{ width: 36px; height: 36px; } /* スマホではやや小さく */ .brand-jp{ font-size:.88rem; } .brand-en{ font-size:.5rem; } .header-cta{ padding:9px 14px; font-size:.72rem; } .header-cta .en{ font-size:.74rem; } .header-actions{ gap:10px; } .footer-logo-img{ width: 44px; height: 44px; } } /* ========================================================= BOOKING MODAL ========================================================= */ /* ---- Overlay ---- */ .modal-overlay{ position: fixed; inset: 0; z-index: 200; background: rgba(6, 9, 14, .82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: modalFadeIn .22s var(--ease); } .modal-overlay[hidden]{ display: none; } @keyframes modalFadeIn{ from{ opacity:0; } to { opacity:1; } } /* ---- Box ---- */ .modal-box{ position: relative; background: linear-gradient(160deg, #14213a 0%, #0d1626 100%); border: 1px solid rgba(201,162,39,.35); box-shadow: 0 32px 80px rgba(0,0,0,.6); width: 100%; max-width: 500px; padding: 48px 40px 40px; animation: modalSlideUp .28s var(--ease); } @keyframes modalSlideUp{ from{ transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } } /* ---- Close button ---- */ .modal-close{ position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--washi-dim); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 6px; transition: color .2s var(--ease); } .modal-close:hover{ color: var(--gold); } /* ---- Eyebrow + title ---- */ .modal-eyebrow{ font-size: .72rem; letter-spacing: .16em; color: var(--gold); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .modal-eyebrow::before{ content:""; width:20px; height:1px; background: var(--gold); } .modal-eyebrow .en{ font-family: var(--font-en-display); text-transform:uppercase; font-size:.8rem; } .modal-title{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--washi); margin: 0 0 28px; min-height: 1.5em; } .modal-title .en{ font-family: var(--font-en-display); font-size: 1.6rem; font-weight: 500; } body.lang-en .modal-title .en{ display:block; } body.lang-en .mpb-label .en{ display:inline; } body.lang-en .mpb-note .en{ display:inline; } body.lang-en .modal-eyebrow .en{ display:inline; } body.lang-en .modal-note .en{ display:inline; } /* ---- Platform buttons ---- */ .modal-platforms{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; } .modal-platform-btn{ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; padding: 16px 20px; border-radius: var(--radius-sm); text-decoration: none; transition: all .25s var(--ease); } /* Primary style（じゃらん / メイン） */ .modal-platform-btn--primary{ background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #181206; box-shadow: 0 6px 18px rgba(201,162,39,.22); } .modal-platform-btn--primary:hover{ background: linear-gradient(180deg, #f0d479, var(--gold-bright)); box-shadow: 0 8px 24px rgba(201,162,39,.32); transform: translateY(-2px); } /* Secondary style（Viator / サブ） */ .modal-platform-btn--secondary{ border: 1px solid rgba(201,162,39,.4); color: var(--washi); background: rgba(201,162,39,.04); } .modal-platform-btn--secondary:hover{ border-color: var(--gold); background: rgba(201,162,39,.1); transform: translateY(-2px); } /* ラベル・補足・矢印の配置 */ .mpb-label{ grid-column: 1; grid-row: 1; font-size: .92rem; font-weight: 700; letter-spacing: .03em; align-self: center; } .mpb-label .en{ font-family: var(--font-en-display); font-size: 1rem; } .mpb-note{ grid-column: 1; grid-row: 2; font-size: .74rem; opacity: .75; letter-spacing: .02em; } .mpb-note .en{ font-family: var(--font-en-display); font-size: .78rem; } .mpb-arrow{ grid-column: 2; grid-row: 1 / 3; font-size: 1rem; align-self: center; opacity: .6; } /* ---- Footer note ---- */ .modal-note{ font-size: .78rem; color: var(--washi-dim); text-align: center; margin: 0; } .modal-note .en{ font-family: var(--font-en-display); font-size: .82rem; } /* ---- Responsive ---- */ @media (max-width: 600px){ .modal-box{ padding: 40px 24px 32px; } .modal-title{ font-size: 1.3rem; } .modal-platform-btn{ padding: 14px 16px; } } /* ========================================================= メールリンク ========================================================= */ .email-link{ display: inline-block; color: var(--gold-bright); font-size: .9rem; letter-spacing: .03em; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,162,39,.4); transition: color .2s, text-decoration-color .2s; } .email-link:hover{ color: var(--gold); text-decoration-color: var(--gold); } /* 言語切替対応（.jp/.en は既存の汎用ルールで制御） */ /* ========================================================= Googleマップ埋め込みエリア ========================================================= */ .access-map-iframe{ margin-top: 8px; width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid rgba(201,162,39,.2); } .access-map-iframe iframe{ display: block; width: 100%; height: 450px; } @media (max-width: 600px){ .access-map-iframe iframe{ height: 280px; } } /* ---- Googleの口コミリンクボタン（ヒーロー内） ---- */ .trust-review-btn{ display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: 1px solid rgba(201,162,39,.5); color: var(--gold-bright); font-size: .82rem; letter-spacing: .04em; background: rgba(201,162,39,.07); transition: background .25s, border-color .25s; text-decoration: none; white-space: nowrap; } .trust-review-btn:hover{ background: rgba(201,162,39,.16); border-color: var(--gold); } .trust-review-icon{ font-size: .95rem; color: var(--gold); } .trust-review-btn .en{ font-family: var(--font-en-display); font-size:.88rem; } /* ---- アクセスルート内の外部リンク（るーぷる仙台など） ---- */ .route-external-link{ color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,162,39,.45); transition: color .2s, text-decoration-color .2s; } .route-external-link:hover{ color: var(--gold); text-decoration-color: var(--gold); } /* アクセスルート内の strong を金色に */ .route-body strong, .route-list strong{ color: var(--washi); font-weight: 700; } /* ========================================================= GROUP / CORPORATE SECTION ========================================================= */ .group-section{ background: linear-gradient(180deg, var(--ink), #0c121e); } .group-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; margin-bottom: 48px; } .group-card{ background: linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 100%); border: 1px solid rgba(201,162,39,.25); border-top: 3px solid var(--gold-dim); padding: 36px 30px; display: flex; flex-direction: column; gap: 16px; } .group-card-icon{ font-size: 1.8rem; margin: 0; line-height: 1; } .group-card-title{ font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--washi); margin: 0; } .group-card-title .en{ font-family: var(--font-en-display); font-size: 1.15rem; } .group-card-body{ font-size: .9rem; line-height: 1.8; color: var(--washi-dim); margin: 0; } .group-card-body .en{ font-family: var(--font-en-display); font-size: .94rem; } .group-card-list{ display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; margin: 0; border-top: 1px solid rgba(236,230,214,.1); padding-top: 16px; } .group-card-list li{ position: relative; padding-left: 18px; font-size: .84rem; color: var(--washi-dim); } .group-card-list li::before{ content: "—"; position: absolute; left: 0; color: var(--gold-dim); } .group-card-list .en{ display: none; font-family: var(--font-en-display); font-size: .86rem; } body.lang-en .group-card-list .en{ display: block; } body.lang-en .group-card-list .jp{ display: none; } /* CTAエリア */ .group-cta{ display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 0 8px; border-top: 1px solid rgba(201,162,39,.2); } .group-cta-note{ font-size: .92rem; color: var(--washi-dim); text-align: center; max-width: 560px; margin: 0; } .group-cta-note .en{ font-family: var(--font-en-display); font-size: .96rem; } .group-inquiry-btn{ min-width: 320px; justify-content: center; } /* レスポンシブ */ @media (max-width: 980px){ .group-grid{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .group-inquiry-btn{ min-width: unset; width: 100%; max-width: 480px; } }