/* ============================================================ OMIEX 下層ページ共通スタイル (header / footer / drawer / base) 各詳細ページは common.css + 各ページ固有CSS を読み込む ============================================================ */ :root{ --navy:#1e3350; --navy-deep:#182a44; --navy-soft:#2b4560; --ink:#2b3648; --gray:#5b6675; --line:#d9dee5; --bg-soft:#eef1f5; --bg-soft2:#e7ebf0; --red:#d81f26; --accent:#3f6a94; --header-h:72px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif; color:var(--ink);line-height:1.9;background:#fff; -webkit-font-smoothing:antialiased;letter-spacing:.02em; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ol,ul{list-style:none} .container{max-width:1080px;margin:0 auto;padding:0 28px} /* 見出し(明朝・下線) */ .sec-title{ font-family:"Shippori Mincho",serif;font-weight:600; font-size:clamp(1.5rem,3.4vw,2.05rem);text-align:center;color:var(--navy); letter-spacing:.14em;margin-bottom:52px;position:relative; } .sec-title::after{content:"";display:block;width:34px;height:1px;background:var(--navy);margin:20px auto 0;opacity:.6} .sec-title.on-dark{color:#fff} .sec-title.on-dark::after{background:#fff} /* ============ Header ============ 原本準拠: 下層ページの初期ヘッダー背景は黒(#07050a)。スクロールで白へ切替(index.html と同じ遷移仕様)。写真に重ねる透過ヘッダーにしたいページは。 */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:#07050a;transition:background .3s,box-shadow .3s; } .site-header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 2px 14px rgba(0,0,0,.07)} body.hero-overlay .site-header:not(.scrolled){background:transparent} .header-inner{max-width:1360px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:32px} .logo{display:flex;align-items:center;gap:12px;color:#fff;transition:color .3s} .site-header.scrolled .logo{color:var(--navy)} .logo-text{font-weight:700;letter-spacing:.28em;font-size:1.15rem} .logo-mark{display:inline-flex} /* コーポレートロゴ(公式SVG omiex_logo_c.svg: マーク+OMIEX一体) 原本では暗い背景に白ロゴ。公式SVGはブルーグラデのため、暗いヘッダー/フッターでは白抜き(filter)、白ヘッダー(スクロール後)では元のブルーで表示。 */ .logo-img{height:30px;width:auto;display:block;filter:brightness(0) invert(1)} .site-header.scrolled .logo-img{filter:none} .fb-logo{height:26px;width:auto;display:block;filter:brightness(0) invert(1)} .gnav{margin-left:auto} .gnav ul{display:flex;gap:20px} .gnav a{font-size:.8rem;letter-spacing:.06em;color:#fff;position:relative;padding-bottom:4px;transition:color .3s} .site-header.scrolled .gnav a{color:var(--ink)} .gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .25s} .gnav a:hover::after,.gnav a.current::after{width:100%} .menu-btn{display:none;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:#fff} .site-header.scrolled .menu-btn{color:var(--navy)} .menu-label{font-size:.72rem;letter-spacing:.14em} .menu-bars{display:inline-flex;flex-direction:column;gap:4px;width:24px} .menu-bars i{height:2px;background:currentColor;transition:.3s} .menu-btn.open .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)} .menu-btn.open .menu-bars i:nth-child(2){opacity:0} .menu-btn.open .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ページ見出しヒーロー(下層共通) */ .page-hero{ position:relative;min-height:340px;display:flex;align-items:center;justify-content:center; color:#fff;text-align:center;background:var(--navy);overflow:hidden; } .page-hero .ph-bg{position:absolute;inset:0;background-size:cover;background-position:center} .page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,52,.5),rgba(20,32,52,.62))} .page-hero .ph-inner{position:relative;z-index:2;padding:120px 24px 60px} .page-hero h1{font-family:"Shippori Mincho",serif;font-weight:600;font-size:clamp(1.7rem,4.4vw,2.6rem);letter-spacing:.18em} .page-hero .en{font-family:"Cormorant Garamond","Times New Roman",serif;font-size:.9rem;letter-spacing:.34em;opacity:.85;margin-top:14px;text-transform:uppercase} /* ページヒーロー(原本準拠): 写真バナー → その下「黒→ブルーグレー→白」グラデにタイトル中央グラデ色は原本PNG実測 (#07050a → 28323f → 4f627d → 9ca7b6 → e9ecef → #fff) */ .banner-hero{position:relative;background:#07050a} /* 写真にはグラデーションを重ねない(写真は素のまま) */ .banner-hero .bh-photo{height:clamp(240px,42vw,470px);background-size:cover;background-position:center} .banner-hero .bh-title{ background:linear-gradient(180deg,#07050a 0%,#28323f 18%,#4f627d 40%,#9ca7b6 62%,#e9ecef 82%,#fff 100%); text-align:center;padding:96px 20px 150px; } .banner-hero .bh-title h1{font-family:"Shippori Mincho",serif;font-weight:600;color:#fff;font-size:clamp(1.6rem,3.6vw,2.2rem);letter-spacing:.16em} /* パンくず */ .breadcrumb{max-width:1360px;margin:0 auto;padding:18px 32px;font-size:.76rem;color:var(--gray)} .breadcrumb a:hover{color:var(--navy)} .breadcrumb span{opacity:.6;margin:0 6px} /* 汎用ボタン */ .btn{display:inline-flex;align-items:center;gap:14px;padding:16px 46px;border:1px solid var(--navy); background:var(--navy);color:#fff;font-size:.92rem;letter-spacing:.12em;transition:.3s;cursor:pointer} .btn:hover{background:#fff;color:var(--navy)} .btn.ghost{background:transparent;color:var(--navy)} .btn.ghost:hover{background:var(--navy);color:#fff} .btn .dots{display:inline-flex;gap:5px} .btn .dots i{width:5px;height:5px;border-radius:50%;background:currentColor} /* ============ Footer ============ */ .site-footer{background:linear-gradient(180deg,#557087 0%,#4f657e 50%,#485873 100%);color:rgba(255,255,255,.9);padding:0;margin-top:0} .fbread{max-width:1080px;margin:0 auto;padding:26px 28px 0;font-size:.78rem;color:#fff} .fbread a:hover{opacity:.7} .fbread span{margin:0 8px;opacity:.6} .footer-inner{max-width:1080px;margin:0 auto;padding:56px 28px 48px;display:flex;flex-wrap:wrap;gap:56px;justify-content:space-between;border-top:1px solid rgba(255,255,255,.35)} .fc-name{font-size:1.35rem;font-weight:600;letter-spacing:.05em;color:#fff} .fc-en{font-family:"Cormorant Garamond",serif;font-size:.95rem;opacity:.7;margin-bottom:24px} .fc-tel{margin-bottom:22px} .fc-tel div{display:flex;gap:16px;align-items:baseline;margin-bottom:4px} .fc-tel dt{width:34px;font-size:.78rem;opacity:.7;letter-spacing:.06em} .fc-tel dd{font-family:sans-serif;font-size:1.1rem;letter-spacing:.03em} .fc-tel dd small{font-size:.7rem;opacity:.7} .fc-addr div{display:flex;gap:16px;margin-bottom:16px} .fc-addr dt{flex:0 0 90px;font-size:.82rem;padding-top:2px;opacity:.85} .fc-addr dd{font-size:.85rem;line-height:1.7;border-left:1px solid rgba(255,255,255,.25);padding-left:16px;opacity:.8} .fc-license{margin-top:22px;font-size:.76rem;opacity:.6;line-height:1.9} .fc-privacy{margin-top:56px} .fc-privacy a{font-size:.85rem;opacity:.85} .fc-privacy a:hover{opacity:1} .footer-nav{min-width:260px} .fn-head{font-size:1.15rem;font-weight:600;color:#fff;margin-bottom:24px} .fn-head a{color:#fff;display:flex;align-items:center;gap:12px} .fn-head a:hover{opacity:.85} .fn-head .dots{display:inline-flex;gap:5px;margin-left:10px} .fn-head a .dots{margin-left:0} .fn-head .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block} .footer-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px} .footer-nav li a{font-size:.85rem;opacity:.85;position:relative;padding-left:18px;transition:opacity .2s} .footer-nav li a::before{content:"\25C9";position:absolute;left:0;color:var(--accent);font-size:.7rem} .footer-nav li a:hover{opacity:1} .footer-bottom{border-top:1px solid rgba(255,255,255,.35);padding:26px 28px;max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap} .fb-brand{display:flex;align-items:center;gap:14px;color:#fff} .fb-word{font-weight:700;letter-spacing:.28em} .fb-brand small{opacity:.5;font-size:.68rem;letter-spacing:.02em} /* ============ Page top / drawer ============ */ .pagetop{position:fixed;right:22px;bottom:22px;z-index:90;width:44px;height:44px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:3px;opacity:0;pointer-events:none;transition:.3s} .pagetop.show{opacity:1;pointer-events:auto} .pagetop:hover{background:var(--navy)} .drawer{position:fixed;inset:0;background:rgba(24,42,68,.98);z-index:95;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.35s} .drawer.open{opacity:1;pointer-events:auto} .drawer ul{text-align:center} .drawer li{margin:8px 0} .drawer a{color:#fff;font-size:1.1rem;letter-spacing:.12em;padding:8px 20px;display:inline-block} .drawer a:hover{opacity:.7} /* ============ Reveal ============ */ .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease} .js .reveal.in{opacity:1;transform:none} /* ============ Responsive (header/footer) ============ */ @media(max-width:960px){ .gnav{display:none} .menu-btn{display:flex;margin-left:auto} } @media(max-width:700px){ .page-hero{min-height:260px} .page-hero .ph-inner{padding:100px 20px 44px} .fbread{padding:22px 24px 0} .footer-inner{gap:34px;padding:44px 24px 40px} .footer-nav{min-width:0;width:100%} .breadcrumb{padding:14px 24px} } @media(prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} }