/*
Theme Name: Beauty Salon Lily
Theme URI: https://test.lily-komaki.com
Author: Beauty Salon Lily
Author URI: https://lily-komaki.com
Description: Beauty Salon Lily のカスタムWordPressテーマ。エレガントなライトゴールドデザイン。
Version: 2.6.2
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Private
Text Domain: lily-theme
*/
/* ============================================================
セルフホストフォント: Cormorant Garamond / Shippori Mincho B1 / Noto Sans JP
全フォントをセルフホスト化済み。ファイルは /fonts/ ディレクトリに配置。
Google Fonts CDN は使用しない（パフォーマンス改善のため）
============================================================ */
/* Cormorant Garamond - Latin-ext */
/* Shippori Mincho B1 */
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-ext-normal-400.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-normal-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-ext-normal-500.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-normal-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-ext-normal-600.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-normal-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-ext-normal-700.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-normal-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-ext-normal-800.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Shippori Mincho B1';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/shippori-mincho-b1-latin-normal-800.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Sans JP */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/noto-sans-jp-latin-ext-normal-400.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/noto-sans-jp-latin-normal-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/noto-sans-jp-latin-ext-normal-700.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/noto-sans-jp-latin-normal-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext-normal-300.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext-normal-400.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext-normal-500.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext-italic-300.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext-italic-400.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext-italic-500.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond - Latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-normal-300.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-normal-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-normal-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-italic-300.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-italic-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-italic-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================
RESET + TOKENS
========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:root{
/* LIGHT palette — cream + warm beige + gold */
--bg:#fafaf7;
--bg-2:#f5f0e8;
--bg-3:#ede8dc;
--card:#ffffff;
--ink:#2c2c2c;
--ink-2:#5a5248;
--ink-3:#8a7f72;
--ink-mute:#b0a898;
--gold:#8B6F3F; /* コントラスト改善: #b8956a(2.59:1) → #8B6F3F(4.39:1) WCAG AA大文字OK */
--gold-2:#9a7a52;
--gold-glow:#8B6F3F; /* コントラスト改善: #d4aa7d(1.98:1) → #8B6F3F(4.39:1) */
/* Dark contrast section */
--dk-bg:#2c2824;
--dk-bg-2:#3a342e;
--dk-ink:#f0e8d8;
--dk-ink-2:#c8b89a;
--line:rgba(184,149,106,.2);
--line-2:rgba(184,149,106,.35);
--ease:cubic-bezier(.22,.7,.2,1);
--max:1320px;
/* Typography tokens (優先度2) */
--font-jp-serif:"Shippori Mincho B1","しっぽり明朝","Noto Serif JP",serif;
--font-en-italic:"Cormorant Garamond","Italiana",serif;
--font-en-label:"Cormorant Garamond",serif;
/* Color palette overrides (優先度3) */
--color-bg:#FAF6F1;
--color-bg-alt:#F2EBE0;
--color-text:#1F1B17;
--color-text-mute:#6B5F52;
--color-accent:#B89968;
--color-accent-deep:#8B6F3F;
--color-line:rgba(31,27,23,.12);
}
/* Skip-to-content: アクセシビリティ */
.skip-to-content{position:absolute;top:-40px;left:0;background:#1F1B17;color:#fff;padding:8px 16px;z-index:9999;text-decoration:none;font-size:.875rem;}
.skip-to-content:focus{top:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
background:var(--color-bg,var(--bg));color:var(--color-text,var(--ink));
font-family:var(--font-jp-serif);
font-weight:400;line-height:1.9;letter-spacing:.04em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* 日本語見出し (優先度2-3) */
h1,h2,h3,
.section-title,.service-title{
font-family:var(--font-jp-serif);
font-weight:500;
letter-spacing:.08em;
line-height:1.5;
}
/* 英字italicアクセント (優先度2-3) */
em,.accent-italic,h1 em,h2 em{
font-family:var(--font-en-italic);
font-style:italic;
font-weight:400;
letter-spacing:.02em;
}
/* セクションラベル (優先度2-3) */
.section-label,.eyebrow{
font-family:var(--font-en-label);
letter-spacing:.35em;
text-transform:uppercase;
font-size:.72rem;
font-weight:500;
color:var(--color-accent,var(--gold));
}
/* ==========================================================
HEADER
========================================================== */
.hdr{
position:fixed;top:0;left:0;right:0;z-index:50;
padding:0 40px;height:72px;
display:flex;align-items:center;justify-content:space-between;
background:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;
border-bottom:none;
transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease,box-shadow .3s ease;
transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr.scrolled{background:rgba(250,250,247,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(184,149,106,.2);box-shadow:0 4px 30px rgba(44,40,36,.08)}
/* hdr-inner: flex wrapper inside .hdr */
.hdr-inner{
display:flex;align-items:center;justify-content:space-between;
width:100%;height:100%;
}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo-name{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:1.9rem;letter-spacing:.08em;color:var(--ink);line-height:1;
}
.logo-sub{
font-family:"Cormorant Garamond",serif;font-weight:400;font-style:italic;
font-size:.62rem;letter-spacing:.38em;color:var(--gold);
text-transform:uppercase;display:block;margin-top:2px;
}
.nav,.hdr-nav{display:flex;align-items:center;gap:32px}
.nav a,.hdr-nav a{
font-family:"Noto Sans JP",sans-serif;font-weight:400;
font-size:.78rem;letter-spacing:.12em;color:var(--ink-2);
transition:color .3s var(--ease);position:relative;
}
.nav a::after,.hdr-nav a::after{
content:"";position:absolute;bottom:-4px;left:0;right:0;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:right;
transition:transform .4s var(--ease);
}
.nav a:hover,.hdr-nav a:hover{color:var(--gold)}
.nav a:hover::after,.hdr-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-tel{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1rem;letter-spacing:.08em;color:var(--ink-2);
text-decoration:none;
}
.hdr-line,.hdr-line-btn{
display:inline-flex;align-items:center;gap:8px;
padding:10px 22px;background:var(--gold);color:#fff;
font-size:.72rem;letter-spacing:.2em;font-weight:500;
transition:.3s var(--ease);text-decoration:none;
}
.hdr-line:hover,.hdr-line-btn:hover{background:var(--gold-2);transform:translateY(-2px)}
/* Burger */
.burger{
display:none;flex-direction:column;gap:5px;cursor:pointer;
width:30px;padding:4px 0;
}
.burger span{
display:block;height:1.5px;background:var(--ink);
transition:.4s var(--ease);position:relative;
}
@media(max-width:1100px){.nav,.hdr-nav{gap:20px}}
@media(max-width:960px){
.nav,.hdr-nav,.hdr-tel{display:none}
.burger{display:flex}
}
/* Mobile menu */
.mmenu,.hdr-mobile{
position:fixed;inset:0;z-index:49;
background:var(--bg);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;
opacity:0;pointer-events:none;transition:.5s var(--ease);
}
.mmenu.open,.hdr-mobile.open{opacity:1;pointer-events:all}
body.mopen .hdr-mobile{opacity:1;pointer-events:all}
.mmenu a,.hdr-mobile a{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.6rem;letter-spacing:.12em;color:var(--ink);
transition:color .3s;
}
.mmenu a:hover,.hdr-mobile a:hover{color:var(--gold)}
.mmenu .m-line,.hdr-mobile .ln{
display:inline-flex;align-items:center;gap:10px;
padding:14px 40px;background:var(--gold);color:#fff;
font-family:"Noto Sans JP",sans-serif;font-size:.82rem;letter-spacing:.2em;
margin-top:16px;
}
.mob-cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:16px}
.mob-cta a{font-size:1rem !important;letter-spacing:.1em !important}
body.mopen .burger span:nth-child(1){top:6.5px;transform:rotate(45deg)}
body.mopen .burger span:nth-child(2){opacity:0}
body.mopen .burger span:nth-child(3){top:-6.5px;transform:rotate(-45deg)}
.logo-name{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:1.9rem;letter-spacing:.08em;color:var(--ink);line-height:1;
}
.logo-sub{
font-family:"Cormorant Garamond",serif;font-weight:400;font-style:italic;
font-size:.62rem;letter-spacing:.38em;color:var(--gold);
text-transform:uppercase;display:block;margin-top:2px;
}
.nav,.hdr-nav{display:flex;align-items:center;gap:32px}
.nav a,.hdr-nav a{
font-family:"Noto Sans JP",sans-serif;font-weight:400;
font-size:.78rem;letter-spacing:.12em;color:var(--ink-2);
transition:color .3s var(--ease);position:relative;
}
.nav a::after,.hdr-nav a::after{
content:"";position:absolute;bottom:-4px;left:0;right:0;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:right;
transition:transform .4s var(--ease);
}
.nav a:hover,.hdr-nav a:hover{color:var(--gold)}
.nav a:hover::after,.hdr-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-tel{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1rem;letter-spacing:.08em;color:var(--ink-2);
text-decoration:none;
}
.hdr-line,.hdr-line-btn{
display:inline-flex;align-items:center;gap:8px;
padding:10px 22px;background:var(--gold);color:#fff;
font-size:.72rem;letter-spacing:.2em;font-weight:500;
transition:.3s var(--ease);text-decoration:none;
}
.hdr-line:hover,.hdr-line-btn:hover{background:var(--gold-2);transform:translateY(-2px)}
/* Burger */
.burger{
display:none;flex-direction:column;gap:5px;cursor:pointer;
width:30px;padding:4px 0;
}
.burger span{
display:block;height:1.5px;background:var(--ink);
transition:.4s var(--ease);position:relative;
}
@media(max-width:1100px){.nav,.hdr-nav{gap:20px}}
@media(max-width:960px){
.nav,.hdr-nav,.hdr-tel{display:none}
.burger{display:flex}
}
/* Mobile menu */
.mmenu,.hdr-mobile{
position:fixed;inset:0;z-index:49;
background:var(--bg);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;
opacity:0;pointer-events:none;transition:.5s var(--ease);
}
.mmenu.open,.hdr-mobile.open{opacity:1;pointer-events:all}
body.mopen .hdr-mobile{opacity:1;pointer-events:all}
.mmenu a,.hdr-mobile a{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.6rem;letter-spacing:.12em;color:var(--ink);
transition:color .3s;
}
.mmenu a:hover,.hdr-mobile a:hover{color:var(--gold)}
.mmenu .m-line,.hdr-mobile .ln{
display:inline-flex;align-items:center;gap:10px;
padding:14px 40px;background:var(--gold);color:#fff;
font-family:"Noto Sans JP",sans-serif;font-size:.82rem;letter-spacing:.2em;
margin-top:16px;
}
.mob-cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:16px}
.mob-cta a{font-size:1rem !important;letter-spacing:.1em !important}
body.mopen .burger span:nth-child(1){top:6.5px;transform:rotate(45deg)}
body.mopen .burger span:nth-child(2){opacity:0}
body.mopen .burger span:nth-child(3){top:-6.5px;transform:rotate(-45deg)}
/* ==========================================================
HERO - Light editorial scene
========================================================== */
.hero{
/* フォールバック */
height:100vh;
/* ★ JSが設定する動的ビューポート高さ（iPhone Chromeカクつき対応） */
height:calc(var(--vh, 1vh) * 100);
min-height:480px;
position:relative;overflow:hidden;
display:flex;align-items:flex-end;padding:120px 40px 90px;
background:var(--bg-2);
/* GPU合成レイヤー化：スクロール時のカクつき防止 */
transform:translateZ(0);
-webkit-transform:translateZ(0);
will-change:transform;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.hero-bg-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;
/* GPU合成レイヤー化 */
transform:translateZ(0);
-webkit-transform:translateZ(0);
will-change:transform;
}
.hero-bg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
animation:kb 22s var(--ease) infinite alternate;
/* GPU合成レイヤー化：Ken Burnsアニメーションをスムーズに */
transform:translateZ(0);
-webkit-transform:translateZ(0);
will-change:transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
image-rendering:-webkit-optimize-contrast;
image-rendering:auto;
}
@keyframes kb{0%{transform:scale(1)}100%{transform:scale(1.09) translate(-1%,1%)}}
.hero-veil{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(ellipse at 30% 70%, rgba(250,248,245,.25) 0%, transparent 55%),
linear-gradient(180deg,rgba(250,248,245,.55) 0%,rgba(250,248,245,.25) 30%,rgba(250,248,245,.2) 60%,rgba(250,248,245,.45) 100%);
}
.hero-content{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto}
/* Vertical Japanese accent, top-right */
.hero-vertical{
position:absolute;top:120px;right:50px;
writing-mode:vertical-rl;
font-family:"Shippori Mincho B1",serif;font-weight:300;
font-size:.78rem;letter-spacing:.5em;color:#2c2824;opacity:.6;
line-height:2.3;
}
.hero-vertical span{display:block}
.hero-vertical .gold{color:var(--gold-glow);margin-top:30px}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:16px;
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.82rem;letter-spacing:.35em;color:var(--gold);
text-transform:uppercase;margin-bottom:30px;
}
.hero-eyebrow::before{content:"";width:40px;height:1px;background:var(--gold-glow)}
.hero h1{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(2rem,6.5vw,5.5rem);line-height:1.1;letter-spacing:.01em;
margin-bottom:44px;color:#2c2824;
text-shadow:0 1px 8px rgba(250,248,245,.6);
}
.hero h1 .line{display:block;overflow:visible}
.hero h1 .line-2{padding-left:clamp(20px,6vw,130px)}
.hero h1 .line-3{padding-left:clamp(40px,11vw,230px)}
.hero h1 em{
font-style:italic;font-family:"Cormorant Garamond",serif;font-weight:400;
color:var(--gold-glow);font-size:1.05em;letter-spacing:.01em;
}
.hero-meta{
display:flex;align-items:flex-end;justify-content:space-between;gap:50px;flex-wrap:wrap;
margin-top:80px;padding-top:40px;border-top:1px solid rgba(44,40,36,.15);
}
.hero-lead{
max-width:30em;font-size:.96rem;color:#3a3530;line-height:2.05;
font-weight:300;letter-spacing:.05em;
}
.hero-stats{display:flex;gap:0;align-items:center}
.stat{
flex:1;text-align:center;padding:0 26px;position:relative;
min-width:120px;
}
.stat+.stat::before{
content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;
background:rgba(44,40,36,.15);
}
.stat .stat-src{
display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.68rem;letter-spacing:.3em;color:rgba(44,40,36,.55);
text-transform:uppercase;margin-bottom:12px;
}
.stat .num{
font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
font-size:2.6rem;color:var(--gold-glow);line-height:1;
}
.stat .num small{font-size:.45em;margin-left:2px}
.stat .stars{
color:var(--gold-glow);font-size:.7rem;letter-spacing:.22em;margin-top:8px;
}
@media(max-width:520px){
.hero-stats{flex-wrap:wrap;gap:24px 0}
.stat{flex-basis:33.33%;padding:0 10px}
.stat+.stat::before{display:none}
.stat .num{font-size:2rem}
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:14px;
padding:19px 40px;font-size:.78rem;letter-spacing:.25em;
font-family:"Noto Sans JP",sans-serif;font-weight:500;
transition:.4s var(--ease);min-width:240px;position:relative;overflow:hidden;
}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-3px);box-shadow:0 25px 50px -20px rgba(184,149,106,.4);letter-spacing:.3em}
.btn-line{border:1px solid rgba(44,40,36,.5);color:#2c2824;background:transparent}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-dark:hover{background:var(--ink);color:#fff}
.btn-ghost{border:1px solid var(--ink-2);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.scroll-mark{
position:absolute;right:50px;bottom:40px;z-index:3;
writing-mode:vertical-rl;
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.72rem;letter-spacing:.45em;color:rgba(255,255,255,.7);
text-transform:uppercase;display:flex;align-items:center;gap:14px;
}
.scroll-mark::after{
content:"";width:1px;height:48px;background:rgba(255,255,255,.5);
animation:scl 2.2s var(--ease) infinite;
}
@keyframes scl{
0%{transform:scaleY(0);transform-origin:top}
50%{transform:scaleY(1);transform-origin:top}
51%{transform-origin:bottom}
100%{transform:scaleY(0);transform-origin:bottom}
}
@media(max-width:900px){
.hero{padding:100px 24px 70px}
.hero-vertical{display:none}
.hero-meta{flex-direction:column;gap:32px;margin-top:50px}
.hero-stats{width:100%}
.hero-actions{flex-direction:column;gap:10px}
.btn{min-width:0;width:100%}
}
@media(max-width:520px){
.hero{padding:90px 20px 60px}
.hero h1{font-size:1.8rem}
}
/* ==========================================================
SECTION COMMON
========================================================== */
.section-top{
max-width:1400px;margin:0 auto;padding:0;
margin-bottom:clamp(60px,8vw,90px);
}
.section-label{
display:inline-flex;align-items:center;gap:16px;
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.72rem;letter-spacing:.42em;color:var(--gold);
text-transform:uppercase;margin-bottom:20px;
}
.section-label::before{
content:"";width:40px;height:1px;background:var(--gold);flex-shrink:0;
}
.section-top h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.25;letter-spacing:.06em;
color:var(--ink);margin-bottom:24px;
}
.section-top h2 em{
font-style:italic;font-family:"Cormorant Garamond",serif;
color:var(--gold);font-size:1.05em;
}
.section-top .sub{
max-width:36em;font-size:.92rem;color:var(--ink-2);line-height:2;
font-weight:300;letter-spacing:.06em;
}
@media(max-width:680px){
.section-top{padding:0 24px;margin-bottom:40px}
.section-top h2{font-size:1.8rem}
}
/* ==========================================================
MANIFESTO
========================================================== */
.manifesto{
padding:clamp(80px,10vw,140px) 0;
background:var(--bg);
border-bottom:1px solid var(--line);
}
.manifesto-inner{
max-width:860px;margin:0 auto;padding:0 40px;text-align:center;
}
.manifesto-label{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.72rem;letter-spacing:.42em;color:var(--gold);
text-transform:uppercase;margin-bottom:28px;
display:flex;align-items:center;justify-content:center;gap:16px;
}
.manifesto-label::before,.manifesto-label::after{
content:"";width:40px;height:1px;background:var(--gold);
}
.manifesto h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(1.8rem,4vw,3rem);line-height:1.4;letter-spacing:.06em;
color:var(--ink);margin-bottom:32px;
}
.manifesto h2 em{
font-style:italic;font-family:"Cormorant Garamond",serif;
color:var(--gold);
}
.manifesto p{
font-size:.95rem;color:var(--ink-2);line-height:2.1;
font-weight:300;letter-spacing:.06em;
}
@media(max-width:680px){.manifesto-inner{padding:0 24px}}
/* ==========================================================
TICKER / NEWS SCROLL
========================================================== */
.ticker-wrap{
background:var(--gold);
overflow:hidden;padding:14px 0;
position:relative;
}
.ticker-wrap::before,.ticker-wrap::after{
content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;
}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--gold),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(-90deg,var(--gold),transparent)}
.ticker{
display:flex;gap:0;white-space:nowrap;
animation:ticker 30s linear infinite;
}
.ticker:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{
display:inline-flex;align-items:center;gap:8px;
padding:0 32px;
font-size:.8rem;letter-spacing:.12em;color:#fff;font-weight:400;
}
.ticker-item::before{content:"◆";font-size:.5rem;color:rgba(255,255,255,.7)}
/* ==========================================================
SERVICES / MENU
========================================================== */
.services{
padding:clamp(100px,13vw,180px) 0;
background:var(--bg);
}
.services-grid{
max-width:var(--max);margin:0 auto;padding:0 24px;
display:flex;flex-direction:column;gap:clamp(80px,10vw,120px);
}
.svc{
display:grid;grid-template-columns:55% 45%;gap:0;
align-items:stretch;
}
/* svc-2/svc-4のPC左右はflex nth-child(even)で制御 */
.svc-media{
position:relative;overflow:hidden;
aspect-ratio:auto;
min-height:520px;
height:100%;
}
.svc-media img{
width:100%;height:100%;object-fit:cover;
transition:transform 1.4s var(--ease);
filter:brightness(.95) saturate(.95);
}
.svc-media:hover img{transform:scale(1.05)}
.svc-body{padding:clamp(40px,6vw,80px) clamp(30px,5vw,70px);display:flex;flex-direction:column;justify-content:center;}
.svc-idx{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.78rem;letter-spacing:.32em;color:var(--gold);
text-transform:uppercase;margin-bottom:18px;
display:flex;align-items:center;gap:14px;
}
.svc-idx::before{content:"";width:30px;height:1px;background:var(--gold)}
.svc h3{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.06em;
color:var(--ink);margin-bottom:10px;
}
.svc .sub{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:.88rem;letter-spacing:.2em;color:var(--gold-2);margin-bottom:22px;
}
.svc .price{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:1.5rem;color:var(--gold);margin-bottom:22px;letter-spacing:.04em;
}
.svc .desc{
font-size:.88rem;color:var(--ink-2);line-height:2;
font-weight:300;margin-bottom:22px;
}
.svc ul{
display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:28px;
}
.svc ul li{
font-size:.76rem;letter-spacing:.1em;color:var(--ink-3);
padding:6px 16px;border:1px solid var(--line-2);
}
.svc-more{
display:inline-flex;align-items:center;gap:10px;
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:1.2rem;letter-spacing:.2em;color:var(--gold);
border-bottom:1px solid var(--gold);padding-bottom:4px;
transition:.3s var(--ease);
}
.svc-more:hover{color:var(--gold-2);gap:16px}
@media(max-width:860px){
.svc,.svc.svc-2,.svc.svc-4{grid-template-columns:1fr;direction:ltr}
.svc-body{padding:0 24px}
.svc-media{aspect-ratio:4/3;min-height:auto;max-width:100%;overflow:hidden}
}
@media(max-width:680px){
.services-grid{padding:0 24px;gap:60px}
.svc.svc-2 .svc-media,.svc.svc-4 .svc-media{order:-1}
.svc.svc-2 .svc-body,.svc.svc-4 .svc-body{order:0}
}
/* ==========================================================
JOURNEY (Horizontal scroll)
========================================================== */
.journey{
padding:clamp(100px,13vw,180px) 0;
background:var(--bg-2);overflow:hidden;
}
.journey-head{
max-width:var(--max);margin:0 auto;
padding:0 40px clamp(60px,8vw,90px);
}
.journey-head .section-label{justify-content:center;margin-bottom:24px}
.journey-head .section-label::before{display:none}
.journey-head h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(2rem,4vw,3.2rem);line-height:1.3;letter-spacing:.06em;color:var(--ink);
text-align:center;
}
/* Journey Timeline (Phase 2-7) */
.journey-timeline{
position:relative;
max-width:1100px;
margin:0 auto;
padding:40px clamp(24px,5vw,60px);
}
.journey-timeline::before{
content:'';
position:absolute;
top:0;bottom:0;
left:50%;
width:1px;
background:linear-gradient(to bottom,transparent 0%,var(--gold) 10%,var(--gold) 90%,transparent 100%);
opacity:0.3;
}
.journey-step{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(30px,5vw,60px);
margin-bottom:clamp(48px,8vw,80px);
align-items:center;
}
.journey-step--right{
direction:rtl;
}
.journey-step--right>*{
direction:ltr;
}
.journey-number{
font-family:"Cormorant Garamond",serif;
font-style:italic;
font-size:2.2rem;
color:var(--gold-glow);
letter-spacing:.05em;
display:block;
margin-bottom:12px;
}
.journey-content h3{
font-family:"Shippori Mincho B1",serif;
font-weight:500;
font-size:clamp(1.3rem,2.5vw,1.8rem);
letter-spacing:.06em;
color:var(--ink);
margin-bottom:12px;
}
.journey-content p{
font-size:.9rem;
color:var(--ink-2);
line-height:1.9;
}
.journey-image img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
display:block;
}
/* Legacy horizontal journey styles hidden */
.journey-hint{display:none}
/* ==========================================================
STRENGTHS - Dark contrast section
========================================================== */
.strengths{
background:var(--dk-bg);color:var(--dk-ink);
padding:clamp(100px,13vw,180px) 0;position:relative;
}
.strengths .section-top h2{color:var(--dk-ink)}
.strengths .section-top .sub{color:var(--dk-ink-2)}
.strengths .section-label{color:var(--gold-glow)}
.strengths .section-label::before{background:var(--gold-glow)}
.strengths::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:1px;height:80px;
background:linear-gradient(180deg,var(--bg),var(--gold-glow) 50%,var(--dk-bg));
}
.str-grid{
max-width:var(--max);margin:0 auto;padding:0 40px;
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(60px,7vw,90px) clamp(40px,5vw,60px);
}
.str-card{position:relative}
.str-card .no{
font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
font-size:3.8rem;color:var(--gold-glow);line-height:1;
display:block;margin-bottom:26px;
}
.str-card h3{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.3rem;letter-spacing:.08em;color:var(--dk-ink);margin-bottom:20px;
padding-bottom:20px;border-bottom:1px solid rgba(240,232,216,.12);
}
.str-card p{color:var(--dk-ink-2);font-size:.88rem;line-height:2;font-weight:300}
@media(max-width:900px){.str-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.str-grid{grid-template-columns:1fr}}
/* ==========================================================
VOICE - Light testimonials
========================================================== */
.voice{
padding:clamp(100px,13vw,180px) 0;
background:var(--bg-2);
}
.voice-stats{
max-width:1000px;margin:0 auto clamp(60px,8vw,90px);padding:52px 40px;
border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
background:var(--dk-bg);
}
.vs-header{
display:flex;align-items:center;justify-content:center;gap:22px;
margin-bottom:42px;
}
.vs-header .line{width:70px;height:1px;background:var(--gold);opacity:.7}
.vs-header .lbl{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.82rem;letter-spacing:.42em;color:var(--gold);
text-transform:uppercase;
}
.vs-row{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.vs{text-align:center;padding:0 24px;position:relative}
.vs+.vs::before{
content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;
background:var(--line-2);
}
.vs-src{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.72rem;letter-spacing:.3em;color:var(--ink-3);
text-transform:uppercase;margin-bottom:18px;
}
.vs .num{
font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
font-size:3.4rem;color:var(--gold);line-height:1;margin-bottom:10px;
}
.vs .num small{
font-size:.34em;margin-left:4px;color:var(--ink-3);
letter-spacing:.04em;font-style:italic;font-weight:400;
}
.vs .stars{color:var(--gold);font-size:.82rem;letter-spacing:.22em;margin-bottom:12px}
.vs .desc{
font-size:.74rem;color:var(--ink-3);letter-spacing:.1em;
}
@media(max-width:680px){
.vs-row{grid-template-columns:1fr;gap:32px}
.vs+.vs::before{display:none}
.voice-stats{padding:36px 24px}
}
.voice-grid{
max-width:var(--max);margin:0 auto;padding:0 40px;
display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.voice-card{
padding:44px 36px 36px;background:var(--bg-2);
border:1px solid var(--line);
transition:.4s var(--ease);position:relative;
}
.voice-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 20px 40px rgba(44,40,36,.08)}
.voice-card::before{
content:"“";position:absolute;top:20px;left:28px;
font-family:"Cormorant Garamond",serif;font-size:5rem;
color:var(--gold);opacity:.2;line-height:1;
}
.voice-card p{color:var(--ink-2);font-size:.88rem;line-height:2;margin-bottom:24px;font-weight:300;position:relative;z-index:1}
.voice-card .who{font-family:"Shippori Mincho B1",serif;font-weight:500;font-size:1.02rem;letter-spacing:.1em;color:var(--ink)}
.voice-card .gender{
font-size:.72rem;letter-spacing:.15em;color:var(--ink-3);
margin-top:4px;margin-bottom:8px;
}
.voice-card .stars{color:var(--gold);letter-spacing:.18em;font-size:.82rem}
@media(max-width:900px){.voice-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.voice-grid{grid-template-columns:1fr;padding:0 24px}}
/* ==========================================================
OWNER MESSAGE
========================================================== */
.owner-split{
display:grid;grid-template-columns:1fr 1fr;
min-height:600px;
background:var(--bg);
}
.owner-left{
position:relative;overflow:hidden;
}
.owner-left img{
width:100%;height:100%;object-fit:cover;object-position:top center;
filter:brightness(.9) saturate(.95);
}
.owner-left::after{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,transparent 60%,rgba(250,250,247,.3) 100%);
}
.owner-right{
padding:clamp(60px,8vw,100px) clamp(40px,6vw,80px);
display:flex;flex-direction:column;justify-content:center;
background:var(--bg-2);
}
.owner-right::before{
content:"";display:block;width:40px;height:1px;
background:var(--gold);margin-bottom:24px;
}
.owner-right .section-label{margin-bottom:24px}
.owner-right h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.4;letter-spacing:.06em;
color:var(--ink);margin-bottom:28px;
}
.owner-right h2 em{
font-style:italic;font-family:"Cormorant Garamond",serif;color:var(--gold);
}
.owner-right p{
font-size:.9rem;color:var(--ink-2);line-height:2.1;
font-weight:300;margin-bottom:20px;
}
.owner-sig{
margin-top:36px;padding-top:28px;border-top:1px solid var(--line);
}
.owner-sig .role{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:.72rem;letter-spacing:.3em;color:var(--gold);
text-transform:uppercase;margin-bottom:8px;
}
.owner-sig .nm{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.3rem;letter-spacing:.12em;color:var(--ink);
display:block;margin-bottom:4px;
}
.owner-sig .ro{
display:block;
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:.8rem;letter-spacing:.25em;color:var(--gold);
text-transform:uppercase;margin-bottom:6px;
}
.owner-sig .ro-sub{
display:block;
font-size:.72rem;letter-spacing:.12em;color:var(--ink-3);
font-weight:300;line-height:1.8;
}
@media(max-width:860px){
.owner-split{grid-template-columns:1fr}
.owner-left{aspect-ratio:4/3;min-height:auto}
.owner-right{padding:50px 24px}
}
/* ==========================================================
STAFF
========================================================== */
.staff{
padding:clamp(100px,13vw,180px) 0;
background:var(--bg);
}
.staff-grid{
max-width:var(--max);margin:0 auto;padding:0 40px;
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.staff-card{
padding:44px 24px 36px;text-align:center;
background:var(--bg-2);border:1px solid var(--line);
transition:.4s var(--ease);
}
.staff-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 20px 40px rgba(44,40,36,.08)}
.staff-av{
width:80px;height:80px;border-radius:50%;
background:var(--gold);color:#fff;
display:flex;align-items:center;justify-content:center;
font-family:"Shippori Mincho B1",serif;font-size:1.8rem;
margin:0 auto 22px;overflow:hidden;
}
.staff-av img{width:100%;height:100%;object-fit:cover}
.staff-role{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:.7rem;letter-spacing:.3em;color:var(--gold);
text-transform:uppercase;margin-bottom:10px;
}
.staff-name{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.1rem;letter-spacing:.1em;color:var(--ink);
margin-bottom:16px;padding-bottom:16px;
border-bottom:1px solid var(--line);
}
.staff-msg{font-size:.8rem;color:var(--ink-2);line-height:1.95;font-weight:300}
@media(max-width:900px){.staff-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.staff-grid{grid-template-columns:1fr;padding:0 24px}}
/* ==========================================================
MONUMENT / RESERVATION CTA
========================================================== */
.monument{
padding:clamp(100px,13vw,180px) 0;
background:var(--dk-bg);
text-align:center;overflow:hidden;position:relative;
}
.monument-kanji{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-family:"Shippori Mincho B1",serif;font-weight:900;
font-size:clamp(12rem,40vw,18rem);line-height:1;
color:var(--dk-ink);opacity:.05;pointer-events:none;white-space:nowrap;
letter-spacing:-.05em;
}
.monument-label{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:.72rem;letter-spacing:.42em;color:var(--gold-glow);
text-transform:uppercase;margin-bottom:32px;
display:flex;align-items:center;justify-content:center;gap:16px;
}
.monument-label::before,.monument-label::after{
content:"";width:40px;height:1px;background:var(--gold-glow);
}
.monument h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(4rem,18vw,9rem);line-height:.9;
color:var(--dk-ink);letter-spacing:.04em;margin-bottom:40px;
}
.monument h2 em{
font-style:italic;font-family:"Cormorant Garamond",serif;
color:var(--gold-glow);
}
.monument p{
max-width:36em;margin:0 auto 50px;
font-size:.96rem;color:var(--dk-ink-2);line-height:2.1;
font-weight:300;letter-spacing:.1em;
}
.monument .hero-actions{justify-content:center}
/* ==========================================================
RESERVATION CTA
========================================================== */
.reservation{
background:var(--bg-2);
padding:clamp(100px,13vw,180px) 0;
text-align:center;overflow:hidden;position:relative;
}
.reservation::before{
content:"LILY";
position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
font-family:"Cormorant Garamond",serif;font-weight:900;font-style:italic;
font-size:clamp(6rem,24vw,12rem);color:var(--gold);opacity:.06;
letter-spacing:.1em;pointer-events:none;white-space:nowrap;line-height:1;
}
.reservation-inner{
max-width:700px;margin:0 auto;padding:0 40px;position:relative;z-index:1;
}
.reservation h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(2rem,5vw,3rem);line-height:1.4;letter-spacing:.06em;
color:var(--ink);margin-bottom:28px;
}
.reservation h2 em{
font-style:italic;font-family:"Cormorant Garamond",serif;
color:var(--gold-2);font-size:1.2em;letter-spacing:.01em;
}
.reservation p{color:var(--ink-2);font-size:1rem;margin-bottom:50px;line-height:2.1;font-weight:300}
.reservation .hero-actions{justify-content:center}
.reservation .btn-gold{background:var(--gold-2);color:#fff}
.reservation .btn-gold:hover{background:var(--ink);color:#fff}
.reservation-cta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:50px}
.reservation .section-label{font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;font-size:.78rem;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:14px}
.reservation .section-label::before,.reservation .section-label::after{content:"";width:30px;height:1px;background:var(--gold)}
/* ==========================================================
NEWS
========================================================== */
.news{
padding:clamp(100px,13vw,180px) 0;
background:var(--bg);
}
.news-list{
max-width:var(--max);margin:0 auto;padding:0 40px;
}
.news-item{
display:grid;grid-template-columns:auto auto 1fr auto;
align-items:center;gap:24px;
padding:28px 0;border-bottom:1px solid var(--line);
transition:.3s var(--ease);
}
.news-item:first-child{border-top:1px solid var(--line)}
.news-item:hover{padding-left:8px}
.news-date{display:none;
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:.92rem;letter-spacing:.1em;color:var(--ink-3);
white-space:nowrap;
}
.news-cat{
font-size:.68rem;letter-spacing:.2em;padding:4px 14px;
border:1px solid var(--gold);color:var(--gold);
white-space:nowrap;
}
.news-ti{
font-size:.92rem;color:var(--ink);line-height:1.7;
letter-spacing:.04em;
}
.news-arrow{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:1.1rem;color:var(--gold);
transition:transform .3s var(--ease);
}
.news-item:hover .news-arrow{transform:translateX(4px)}
@media(max-width:680px){
.news-list{padding:0 24px}
.news-item{grid-template-columns:1fr auto;gap:12px}
.news-date{display:none;grid-column:1;font-size:.82rem}
.news-cat{grid-column:2;grid-row:1}
.news-ti{grid-column:1/3;grid-row:2}
.news-arrow{grid-column:2;grid-row:2}
}
/* ==========================================================
FAQ
========================================================== */
.faq{
padding:clamp(100px,13vw,180px) 0;
background:var(--bg-2);
}
.faq-list{
max-width:860px;margin:0 auto;padding:0 40px;
}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{
width:100%;text-align:left;
padding:28px 48px 28px 40px;
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:.98rem;letter-spacing:.06em;color:var(--ink);
position:relative;cursor:pointer;
transition:color .3s var(--ease);
}
.faq-q::before{
content:"Q";position:absolute;left:10px;top:28px;
font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
font-size:1.1rem;color:var(--gold);
}
.faq-q .plus{
position:absolute;right:10px;top:50%;transform:translateY(-50%);
width:16px;height:16px;
}
.faq-q .plus::before,.faq-q .plus::after{
content:"";position:absolute;background:var(--gold);
transition:.4s var(--ease);
}
.faq-q .plus::before{width:100%;height:1.5px;top:7px;left:0}
.faq-q .plus::after{width:1.5px;height:100%;left:7px;top:0}
.faq-item.open .faq-q .plus::after{transform:rotate(90deg);opacity:0}
.faq-item.open .faq-q{color:var(--gold)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.faq-item.open .faq-a{max-height:400px}
.faq-a-in{
padding:0 40px 28px 40px;
font-size:.88rem;color:var(--ink-2);line-height:2;font-weight:300;
}
@media(max-width:680px){
.faq-list{padding:0 24px}
.faq-q{padding:22px 36px 22px 32px;font-size:.92rem}
.faq-q::before{left:2px;top:24px}
.faq-q .plus{right:2px}
.faq-a-in{padding:0 0 22px 32px;font-size:.85rem}
}
/* ==========================================================
ACCESS
========================================================== */
.access{
padding:clamp(100px,12vw,160px) 0;
background:var(--dk-bg);
}
.access-inner{
max-width:var(--max);margin:0 auto;padding:0 40px;
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
.access-map{overflow:hidden;}
.access-map iframe{display:block;width:100%;height:400px;border:0;filter:grayscale(30%) brightness(0.9);}
.access-info{display:flex;flex-direction:column;gap:32px;}
.acc-item{display:flex;align-items:flex-start;gap:16px;}
.acc-icon{flex-shrink:0;margin-top:2px;color:var(--gold);}
.acc-icon svg{display:block;}
.acc-label{
font-family:"Cormorant Garamond",serif;font-size:.75rem;
letter-spacing:.2em;color:var(--gold);margin-bottom:8px;
text-transform:uppercase;
}
.acc-text{font-size:.88rem;color:var(--dk-ink);line-height:2;letter-spacing:.03em;font-weight:300;}
.acc-text a{color:var(--gold);}
.acc-text a:hover{color:var(--gold-2);}
.acc-mute{color:var(--dk-ink-2);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.chips span{
font-size:.75rem;color:var(--dk-ink-2);
border:1px solid rgba(184,149,106,.3);
padding:3px 10px;border-radius:20px;
letter-spacing:.05em;
}
@media(max-width:900px){.access-inner{grid-template-columns:1fr;padding:0 24px;gap:32px;}}
@media(max-width:480px){
.access-inner{padding:0 20px;}
.access-map iframe{height:280px;}
}
/* ==========================================================
FOOTER
========================================================== */
footer{
background:var(--dk-bg);color:var(--dk-ink-2);
padding:90px 40px 36px;border-top:1px solid rgba(184,149,106,.2);
}
/* ==========================================================
FOOTER (新構造)
========================================================== */
.footer{background:#1a1a1a}
.foot-main{
max-width:var(--max);margin:0 auto;
padding:clamp(60px,8vw,80px) clamp(24px,5vw,48px);
display:grid;grid-template-columns:1.6fr 1fr;gap:60px;
}
/* 左カラム：ブランド */
.foot-logo-wrap a{display:flex;flex-direction:column;gap:4px}
.foot-logo-wrap .logo-name{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:2.5rem;letter-spacing:.2em;color:#f5edd6;
}
.foot-logo-wrap .logo-sub{
font-family:"Cormorant Garamond",serif;font-weight:300;
font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold-glow);
}
.foot-desc{
font-size:.82rem;color:#9b9085;line-height:2;font-weight:300;
margin-top:22px;margin-bottom:20px;
}
.foot-sns{display:flex;gap:16px;align-items:center}
.foot-sns a{color:#9b9085;transition:color .3s}
.foot-sns a:hover{color:var(--gold-glow)}
/* 中央カラム：ナビ */
.foot-col-label{
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.7rem;letter-spacing:.32em;color:var(--gold-glow);
margin-bottom:22px;text-transform:uppercase;
}
.foot-nav-grid{
display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;
list-style:none;padding:0;margin:12px 0 24px;
}
.foot-nav-grid a{
display:block;padding:4px 0;
font-size:.84rem;color:#9b9085;font-weight:300;
line-height:1.5;text-decoration:none;
transition:color .3s, padding-left .3s;
}
.foot-nav-grid a:hover{color:var(--gold-glow);padding-left:6px}
/* 右カラム：コンタクト */
.foot-ct-list{display:flex;flex-direction:column;gap:12px}
.foot-ct-block{display:flex;flex-direction:column;gap:3px}
.foot-ct-name{
font-size:.78rem;color:#9b9085;font-weight:300;
}
.foot-ct-tel{
display:flex;align-items:center;gap:6px;
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1.1rem;letter-spacing:.04em;color:#d4b896;
transition:color .3s;
}
.foot-ct-tel:hover{color:var(--gold-glow)}
.foot-ct-addr{
font-size:.78rem;color:#9b9085;line-height:1.7;font-weight:300;
margin-top:2px;
}
/* コピーライトバー */
.foot-copy-bar{border-top:1px solid rgba(184,149,106,.15)}
.foot-copy-inner{
max-width:var(--max);margin:0 auto;
padding:20px clamp(24px,5vw,48px);
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
}
.foot-copy,.foot-copy-loc{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:.7rem;letter-spacing:.22em;color:#5c5550;opacity:.8;
}
@media(max-width:800px){
.foot-main{grid-template-columns:1fr;gap:38px}
.foot-copy-inner{flex-direction:column;align-items:flex-start;gap:4px}
}
/* ==========================================================
FLOATING BUTTONS (right side)
========================================================== */
.floats{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:10px}
.fb{
width:54px;height:54px;display:flex;align-items:center;justify-content:center;
color:#fff;transition:.4s var(--ease);
box-shadow:0 8px 25px rgba(44,40,36,.2);border-radius:2px;
}
.fb svg{width:26px;height:26px;fill:currentColor}
.fb-ln{background:var(--gold)}
.fb-ln:hover{background:var(--gold-2);transform:translateY(-3px) scale(1.06)}
.fb-tl{background:var(--gold)}
.fb-tl:hover{background:var(--gold-2);transform:translateY(-3px) scale(1.06)}
/* ==========================================================
REVEALS
========================================================== */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}
.rv-line{overflow:hidden}
.rv-line .line{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.rv-line.on .line{transform:translateY(0)}
.rv-line.on .line-2{transition-delay:.1s}
.rv-line.on .line-3{transition-delay:.2s}
/* ==========================================================
HERO BADGES (hero section stats)
========================================================== */
.hero-badges{
display:flex;gap:0;align-items:center;margin-bottom:32px;
}
.badge{
flex:1;text-align:center;padding:0 20px;position:relative;min-width:100px;
}
.badge+.badge::before{
content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;
background:rgba(44,40,36,.2);
}
.badge-src{
display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.65rem;letter-spacing:.28em;color:rgba(44,40,36,.65);
text-transform:uppercase;margin-bottom:8px;
}
.badge-num{
font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
font-size:2.2rem;color:var(--gold-glow);line-height:1;display:block;
}
.badge-stars{
color:var(--gold-glow);font-size:.65rem;letter-spacing:.2em;margin-top:6px;display:block;
}
.hero-sub{
max-width:30em;font-size:.92rem;color:#3a3530;
line-height:2;font-weight:300;letter-spacing:.05em;margin-bottom:28px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-scroll{
position:absolute;right:50px;bottom:40px;z-index:3;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
writing-mode:vertical-rl;
font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
font-size:.72rem;letter-spacing:.45em;color:rgba(255,255,255,0.75);
text-transform:uppercase;
}
.hero-scroll__text {
writing-mode:vertical-rl;
letter-spacing:.45em;
}
.hero-scroll__line {
display:block;
width:1px;
height:60px;
background:linear-gradient(to bottom,rgba(255,255,255,0.7),transparent);
animation:scrollLine 2.4s ease-in-out infinite;
transform-origin:top;
}
@keyframes scrollLine {
0% { opacity:0; transform:scaleY(0); transform-origin:top; }
50% { opacity:1; transform:scaleY(1); transform-origin:top; }
100% { opacity:0; transform:scaleY(1); transform-origin:bottom; }
}
@media(max-width:900px){
.hero-badges{flex-wrap:wrap;gap:16px 0}
.badge{flex-basis:33.33%}
.hero-cta{flex-direction:column;gap:10px}
.hero-cta .btn{min-width:0;width:100%}
.hero-scroll{display:none}
}
/* ==========================================================
RESPONSIVE — Tablet (≤900px)
========================================================== */
@media(max-width:900px){
.section-top{padding:0 24px}
.str-grid{padding:0 24px}
.voice-grid{padding:0 24px}
.staff-grid{padding:0 24px}
.news-list{padding:0 24px}
.faq-list{padding:0 24px}
.access-grid{padding:0 24px}
.payment-row{padding:28px 24px}
.access-actions{padding:0 24px}
.journey-head{padding:0 24px clamp(40px,6vw,60px)}
.journey-timeline{padding:40px 20px;} .journey-content{padding:0 4px;} .journey-step{padding:0;}
.journey-step{grid-template-columns:1fr;}
.journey-step--right{direction:ltr;}
.journey-timeline::before{display:none;}
.journey-content h3{font-size:1.2rem;}
.journey-content p{font-size:.85rem;}
.reservation-inner{padding:0 24px}
.monument{padding:clamp(80px,10vw,120px) 24px}
}
/* ==========================================================
RESPONSIVE — Mobile (≤680px)
========================================================== */
@media(max-width:680px){
.hdr{padding:0 20px;height:64px}
.logo-name{font-size:1.6rem}
.section-top h2{font-size:1.8rem;line-height:1.35}
.manifesto h2{font-size:1.5rem;line-height:1.6}
.manifesto-inner{padding:0 24px}
.services-grid{padding:0 24px;gap:60px}
.svc h3{font-size:1.5rem}
.svc-body{padding:0 24px}
.str-grid{grid-template-columns:1fr}
.str-card .no{font-size:2.8rem}
.voice-grid{grid-template-columns:1fr}
.voice-card{padding:36px 24px 28px}
.staff-grid{grid-template-columns:1fr}
.foot{grid-template-columns:1fr;gap:32px}
footer{padding:60px 24px 28px}
.copy{margin-top:40px;font-size:.65rem}
.fb{width:48px;height:48px}
.fb svg{width:22px;height:22px}
.floats{right:14px;bottom:14px;gap:8px}
.access-grid{grid-template-columns:1fr}
.news-item{grid-template-columns:1fr auto;gap:10px}
}
/* ==========================================================
ARTICLE PAGE
========================================================== */
.article-hero{
min-height:38vh;background:var(--bg-2);
display:flex;align-items:flex-end;
padding:140px 40px 60px;position:relative;overflow:hidden;
}
.article-hero::before{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(184,149,106,.06) 0%,transparent 60%);
pointer-events:none;
}
.article-hero::after{
content:"";position:absolute;bottom:0;left:40px;right:40px;
height:1px;background:var(--line-2);
}
.article-hero-inner{max-width:860px;margin:0 auto;width:100%}
.article-breadcrumb{
display:flex;align-items:center;gap:10px;
font-size:.72rem;letter-spacing:.15em;color:var(--ink-3);
margin-bottom:20px;font-family:"Cormorant Garamond",serif;
}
.article-breadcrumb a{color:var(--gold);transition:color .3s}
.article-breadcrumb a:hover{color:var(--gold-2)}
.article-breadcrumb span{color:var(--ink-mute)}
.article-meta{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.article-date{
font-family:"Cormorant Garamond",serif;font-size:.82rem;
letter-spacing:.2em;color:var(--ink-3);
}
.article-cat{
font-size:.68rem;letter-spacing:.2em;padding:4px 14px;
border:1px solid var(--gold);color:var(--gold);
font-family:"Noto Sans JP",sans-serif;font-weight:300;
}
.article-title{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.06em;
color:var(--ink);line-height:1.4;
}
.article-main{
max-width:860px;margin:0 auto;
padding:80px 40px 120px;
}
.article-content{
font-size:.95rem;color:var(--ink);line-height:2.1;
font-weight:300;letter-spacing:.04em;
}
.article-content h2{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.5rem;letter-spacing:.06em;color:var(--ink);
margin:2.5em 0 1em;padding-bottom:12px;
border-bottom:1px solid var(--line);
}
.article-content h3{
font-family:"Shippori Mincho B1",serif;font-weight:500;
font-size:1.2rem;letter-spacing:.06em;color:var(--ink);
margin:2em 0 .8em;
}
.article-content p{margin-bottom:1.6em}
.article-content ul,.article-content ol{
margin:1.4em 0;padding-left:1.5em;
}
.article-content ul li{list-style:disc;margin-bottom:.6em;color:var(--ink-2)}
.article-content ol li{list-style:decimal;margin-bottom:.6em;color:var(--ink-2)}
.article-content a{color:var(--gold);border-bottom:1px solid var(--line-2);transition:.3s}
.article-content a:hover{color:var(--gold-2)}
.article-content img{margin:2em auto;border-radius:0}
.article-content .wp-block-quote{
margin:2em 0;padding:20px 28px;
border-left:3px solid var(--gold);background:var(--bg-2);
}
.article-content .wp-block-buttons{display:flex;gap:16px;flex-wrap:wrap;margin:2em 0}
.article-content .wp-block-button__link{
display:inline-block;padding:12px 28px;
background:var(--gold);color:#fff;
font-size:.82rem;letter-spacing:.15em;font-weight:500;
transition:all .3s;text-decoration:none;
}
.article-content .wp-block-button__link:hover{background:var(--gold-2);color:#fff}
.article-back{margin-top:70px;padding-top:50px;border-top:1px solid var(--line)}
.btn-back{
display:inline-flex;align-items:center;gap:10px;
font-family:"Cormorant Garamond",serif;font-size:.9rem;
letter-spacing:.18em;color:var(--gold);transition:all .3s;
}
.btn-back:hover{color:var(--gold-2);gap:14px}
.article-cta{
background:var(--bg-2);padding:90px 40px;
text-align:center;border-top:1px solid var(--line);
}
.article-cta-inner{max-width:600px;margin:0 auto}
.article-cta-sub{
font-family:"Cormorant Garamond",serif;font-size:.75rem;
letter-spacing:.4em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;
}
.article-cta-title{
font-family:"Shippori Mincho B1",serif;font-size:clamp(1.4rem,3vw,2rem);
font-weight:500;color:var(--ink);letter-spacing:.08em;margin-bottom:18px;
}
.article-cta-text{font-size:.85rem;color:var(--ink-2);margin-bottom:36px;letter-spacing:.06em}
.article-cta-btns{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
@media(max-width:768px){
.article-hero{padding:120px 24px 50px}
.article-main{padding:60px 24px 80px}
.article-title{font-size:1.4rem}
.article-cta{padding:70px 24px}
}
/* ==========================================================
NEWS ARCHIVE PAGE
========================================================== */
.news-archive-main{
max-width:var(--max);margin:0 auto;padding:60px 40px 120px;
}
.news-pagination{margin-top:60px;display:flex;justify-content:center;gap:10px}
.news-pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border:1px solid var(--line);
color:var(--ink-2);font-family:"Cormorant Garamond",serif;
font-size:1rem;transition:.3s var(--ease);
}
.news-pagination .page-numbers:hover,
.news-pagination .page-numbers.current{
background:var(--gold);border-color:var(--gold);color:#fff;
}
@media(max-width:680px){.news-archive-main{padding:40px 22px 80px}}
/* ==========================================================
WP FLOATING BUTTON / POPUP OVERRIDES
========================================================== */
/* WP Floating Button コンテナ */
#floating-buttons-container{
background-color:#1a1a1a !important;
border-top:1px solid var(--gold) !important;
}
#floating-buttons-container .floating-button{
background-color:var(--gold) !important;
color:#fff !important;
}
/* WP Popup — dark brown design */
.wpp-overlay{background:rgba(0,0,0,.7)!important}
.wpp-popup{
background-color:#2c2824!important;
color:#f0e8d8!important;
border:1px solid rgba(184,149,106,.4)!important;
border-radius:10px!important;
box-shadow:0 20px 60px rgba(0,0,0,.5)!important;
padding:0!important;
overflow:hidden!important;
}
.wpp-popup-content{
background-color:#2c2824!important;
color:#f0e8d8!important;
border:none!important;
padding:32px 28px!important;
}
.wpp-popup-content p{
color:#f0e8d8!important;
font-size:1rem!important;
line-height:1.75!important;
text-align:center!important;
margin-bottom:16px!important;
font-weight:300!important;
}
.wpp-popup-content img{
border-radius:8px!important;
display:block!important;
margin:0 auto 20px!important;
max-width:100%!important;
}
.wpp-cta-button{
background-color:#b8956a!important;
color:#fff!important;
border:none!important;
padding:14px 36px!important;
border-radius:4px!important;
font-size:.95rem!important;
letter-spacing:.1em!important;
cursor:pointer!important;
display:block!important;
width:100%!important;
margin:0 auto!important;
transition:background .3s!important;
}
.wpp-cta-button:hover{background-color:#9a7a52!important}
.wpp-close-icon{
color:#c8b89a!important;
font-size:1.4rem!important;
opacity:.8!important;
top:12px!important;
right:16px!important;
}
/* ターコイズ色の全般的なオーバーライド */
[style*="background-color: #0abab5"],
[style*="background-color:#0abab5"],
[style*="background-color: rgb(10, 186, 181)"]{
background-color:var(--gold)!important;
}
/* LINEフローティングボタン */
.fb-ln{background:var(--gold)!important;color:#fff!important}
.fb-ln:hover{background:var(--gold-2)!important;transform:translateY(-3px) scale(1.06)!important}
/* フッターバー */
.floating-button-container,#floating-buttons-container{
background-color:#2c2824!important;
border-top:2px solid var(--gold)!important;
}
.floating-button-tel,.floating-button-line,.floating-button a{
background-color:var(--gold)!important;color:#fff!important;
}
/* Hide WP Floating Button (replaced by sticky contact bar) */
.wpfb-button-wrap,.wpfb-wrap,[class*="wpfb"]{display:none!important}
/* ==========================================================
PLAN / PRICE TABLE SECTION
========================================================== */
/* スマホ：LINEフローティングボタンを非表示（スティッキーバーと重複するため） */
.floats { display: none !important; }
.plan {
background: var(--bg-2);
padding: 100px 0 120px;
}
.plan-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 24px;
}
.plan .section-top {
text-align: center;
margin-bottom: 64px;
}
.plan .section-top .section-label {
font-size: .75rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.plan .section-top h2 {
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 300;
letter-spacing: .08em;
color: var(--ink);
line-height: 1.3;
margin-bottom: 16px;
}
.plan .section-top h2 em {
font-style: normal;
color: var(--gold);
}
.plan .section-top .sub {
color: var(--ink-2);
font-size: .9rem;
}
.plan-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 32px;
}
.plan-card {
background: var(--card);
border: 1px solid var(--line-2);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.plan-card-head {
background: var(--dk-bg);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.plan-no {
font-size: .75rem;
letter-spacing: .2em;
color: var(--gold);
font-weight: 500;
min-width: 28px;
}
.plan-card-head h3 {
font-size: 1rem;
font-weight: 400;
letter-spacing: .06em;
color: var(--dk-ink);
}
.plan-table {
width: 100%;
border-collapse: collapse;
padding: 0 24px;
}
.plan-table th,
.plan-table td {
padding: 10px 16px;
font-size: .85rem;
border-bottom: 1px solid var(--line);
color: var(--ink);
text-align: left;
vertical-align: middle;
}
.plan-table th {
background: var(--bg-3);
font-weight: 500;
letter-spacing: .08em;
color: var(--ink-2);
font-size: .8rem;
text-align: center;
}
.plan-table td:first-child {
width: 55%;
}
.plan-table td.plan-note {
width: 15%;
font-size: .75rem;
color: var(--ink-3);
text-align: center;
}
.plan-table td.plan-price {
width: 30%;
text-align: right;
font-weight: 500;
color: var(--gold-2);
letter-spacing: .04em;
}
.plan-sub {
display: block;
font-size: .72rem;
color: var(--ink-3);
margin-top: 2px;
}
.plan-note-bottom {
text-align: center;
font-size: .8rem;
color: var(--ink-3);
margin-top: 48px;
padding: 16px;
border-top: 1px solid var(--line);
}
@media (max-width: 768px) {
.plan { padding: 72px 0 88px; }
.plan-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.plan-table th,
.plan-table td {
padding: 8px 12px;
font-size: .8rem;
}
}
/* =============================================
スマホヘッダー電話ボタン & モバイルメニュー閉じるボタン
============================================= */
/* スマホ用電話ボタン（ハンバーガーの左に表示） */
.hdr-tel-mob {
display: none !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--gold);
border: 1px solid var(--line-2);
border-radius: 50%;
transition: background .2s, color .2s;
}
.hdr-tel-mob:hover {
background: var(--gold);
color: #fff;
}
@media (max-width: 768px) {
.hdr-tel-mob { display: flex !important; }
}
/* モバイルメニュー閉じるボタン */
.mob-close {
display: block;
margin-left: auto;
margin-bottom: 1.5rem;
width: 40px;
height: 40px;
font-size: 1.5rem;
line-height: 1;
color: var(--gold);
border: 1px solid var(--line-2);
border-radius: 50%;
background: none;
cursor: pointer;
transition: background .2s, color .2s;
}
.mob-close:hover {
background: var(--gold);
color: #fff;
}
/* フッターのフローティングボタン非表示（念のため） */
.floats { display: none !important; }
/* ============================================
WPP Popup Fix: prevent blocking clicks when popup is hidden
============================================ */
#wpp-container {
pointer-events: none !important;
}
#wpp-container.active,
#wpp-container.show {
pointer-events: auto !important;
}
#wpp-container .wpp-overlay,
#wpp-container .wpp-popup {
pointer-events: auto !important;
}
/* =========================================================
HAMBURGER MENU FIX + JOURNEY SWIPE CURSOR
========================================================= */
/* Overlay behind mobile menu */
.mob-overlay{
display:none;
position:fixed;inset:0;
background:rgba(0,0,0,.45);
z-index:1099;
}
body.mopen .mob-overlay{display:block;}
/* Mobile menu panel */
#hdrMobile{
position:fixed;top:0;right:0;
width:min(320px,85vw);height:100dvh;
background:var(--bg);
z-index:1100;
overflow-y:auto;
transform:translateX(100%);
transition:transform .35s var(--ease);
padding:4rem 2rem 2rem;
}
body.mopen #hdrMobile{transform:translateX(0);}
/* Close button inside mobile menu */
.mob-close{
position:absolute;top:1rem;right:1rem;
width:2.5rem;height:2.5rem;
display:flex;align-items:center;justify-content:center;
font-size:1.5rem;
cursor:pointer;
color:var(--ink);
}
/* Prevent body scroll when menu open */
body.mopen{overflow:hidden;}
/* Journey track grab cursor */
/* journey-track drag styles removed (timeline layout) */
/* ==========================================================
FLOATING RESERVE BUTTONS
========================================================== */
.float-reserve-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
display: flex;
width: 100%;
box-shadow: 0 -2px 12px rgba(0,0,0,.15);
/* ★最重要: 初期状態は transform で画面外に配置（display:none不使用） */
transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
visibility: hidden;
pointer-events: none;
/* GPU合成レイヤー化 */
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* スムーズなスライドイン */
transition: transform 0.4s cubic-bezier(.2, .7, .2, 1), visibility 0.4s;
}
.float-reserve-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
font-size: .88rem;
font-weight: 700;
letter-spacing: .06em;
text-decoration: none;
transition: opacity .2s ease, filter .2s ease;
line-height: 1.3;
}
.float-reserve-btn:hover {
opacity: .88;
filter: brightness(1.08);
}
.float-reserve-lily {
background: #c9a96e;
color: #fff;
border-right: 1px solid rgba(255,255,255,.3);
}
.float-reserve-nail {
background: #2c2824;
color: #e8d5b0;
}
.float-reserve-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.float-reserve-text {
white-space: normal;
text-align: center;
line-height: 1.2;
}
@media (max-width: 480px) {
.float-reserve-btn {
font-size: .72rem;
padding: 12px 6px;
gap: 4px;
flex-direction: column;
}
.float-reserve-icon svg {
width: 14px;
height: 14px;
}
}
/* ==========================================================
INFO HERO
========================================================== */
.info-hero {
padding: 60px 24px 40px;
text-align: center;
}
.info-hero-inner {
max-width: var(--max);
margin: 0 auto;
text-align: center;
}
.info-hero-en {
font-family: var(--font-en);
font-size: 0.75rem;
letter-spacing: 0.2em;
color: var(--gold);
text-transform: uppercase;
margin: 0 0 8px;
}
.info-hero-ja {
font-family: var(--font-ja);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 400;
letter-spacing: 0.05em;
color: var(--text);
margin: 0;
}
/* ==========================================================
INFO LIST PAGE
========================================================== */
.info-list-section {
padding: 60px 24px 100px;
}
.info-list-inner {
max-width: var(--max);
margin: 0 auto;
}
/* グリッド */
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media(max-width:900px) {
.info-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media(max-width:560px) {
.info-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* カード */
.info-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.info-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.info-card-link {
display: flex;
flex-direction: column;
height: 100%;
color: var(--cream);
}
/* サムネイル */
.info-card-thumb {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--bg-3);
}
.info-card-img {
width: 100%;
height: 100%;
object-fit: contain;
background: #f5f0eb;
transition: transform .4s var(--ease);
}
.info-card:hover .info-card-img {
transform: scale(1.04);
}
.info-card-thumb--noimg {
display: flex;
align-items: center;
justify-content: center;
}
.info-card-noimg-label {
font-size: 1.4rem;
font-weight: 700;
color: var(--gold);
letter-spacing: .1em;
opacity: .5;
}
/* カード本文 */
.info-card-body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.info-card-cat {
display: inline-block;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
background: var(--gold);
color: var(--bg);
padding: 2px 10px;
border-radius: 20px;
font-weight: 700;
width: fit-content;
}
.info-card-date {
font-size: .75rem;
color: var(--cream-3);
margin-top: 2px;
}
.info-card-title {
font-size: 1rem;
font-weight: 700;
color: var(--cream);
line-height: 1.5;
margin-top: 4px;
}
.info-card-excerpt {
font-size: .82rem;
color: var(--cream-2);
line-height: 1.65;
margin-top: 6px;
flex: 1;
}
/* ページネーション */
.info-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 60px;
flex-wrap: wrap;
}
.info-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: .9rem;
color: var(--cream-2);
transition: .3s var(--ease);
}
.info-pagination .page-numbers:hover,
.info-pagination .page-numbers.current {
background: var(--gold);
border-color: var(--gold);
color: var(--bg);
}
.info-pagination .page-numbers.dots {
border: none;
background: none;
}
.info-pagination .page-numbers.next,
.info-pagination .page-numbers.prev {
width: auto;
padding: 0 14px;
white-space: nowrap;
}
/* 空メッセージ */
.info-empty {
text-align: center;
color: var(--cream-3);
padding: 60px 0;
font-size: 1rem;
}
/* ==========================================================
NEWS SLIDER (front-page)
========================================================== */
.news-slider-wrap {
overflow: visible;
position: relative;
padding: 20px 0 8px;
margin: 0 calc(-1 * 40px);
}
@media(max-width:960px){
.news-slider-wrap { margin: 0 calc(-1 * 24px); }
}
.news-slider {
display: flex;
gap: 20px;
padding: 8px 40px 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
user-select: none;
}
@media(max-width:960px){
.news-slider { padding: 8px 24px 16px; }
}
.news-slider::-webkit-scrollbar { display: none; }
.news-slider.is-dragging { cursor: grabbing; }
.ns-card {
flex: 0 0 280px;
scroll-snap-align: start;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
text-decoration: none;
color: var(--cream);
display: flex;
flex-direction: column;
}
.ns-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.ns-card-thumb {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--bg-3);
}
.ns-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.ns-card:hover .ns-card-thumb img {
transform: scale(1.05);
}
.ns-card-noimg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
color: var(--gold);
letter-spacing: .1em;
opacity: .6;
}
.ns-card-body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.ns-card-date {
font-size: .75rem;
color: var(--cream-3);
margin-top: 4px;
}
.ns-card-title {
font-size: .9rem;
font-weight: 500;
line-height: 1.55;
color: var(--cream);
margin-top: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-more-wrap {
text-align: center;
margin-top: 40px;
}
.news-more-btn {
display: inline-block;
padding: 18px 48px;
border: 1px solid var(--color-text, #1F1B17);
background: transparent;
color: var(--color-text, #1F1B17);
font-family: var(--font-en-label, 'Cormorant Garamond', serif);
letter-spacing: .3em;
font-size: .75rem;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
position: relative;
z-index: 1;
transition: all .4s cubic-bezier(.2,.7,.2,1);
border-radius: 0;
}
.news-more-btn::after {
content: '';
position: absolute;
bottom: -8px;
right: -8px;
width: 100%;
height: 100%;
border: 1px solid var(--color-accent, #B89968);
z-index: -1;
transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.news-more-btn:hover {
background: var(--color-text, #1F1B17);
color: var(--color-bg, #FAF6F1);
transform: translate(-2px,-2px);
}
.news-more-btn:hover::after {
bottom: -6px;
right: -6px;
}
@media (max-width: 768px) {
.ns-card { flex: 0 0 240px; }
}
/* Float reserve: 表示制御（GPU最適化版） */
/* is-visible クラスをJSで切替 */
.float-reserve-wrap.is-visible {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
visibility: visible;
pointer-events: auto;
}
/* ==========================================================
NEWS SLIDER SECTION
========================================================== */
.news-slider-section {
padding: 60px 0 40px;
background: var(--bg);
overflow: hidden;
}
.news-slider-section .section-top {
text-align: center;
padding: 0 20px 16px;
}
.news-slider-wrap {
position: relative;
overflow: visible;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.news-slider-wrap:active {
cursor: grabbing;
}
.news-slider {
display: flex;
gap: 20px;
padding: 0 40px 20px;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.news-slider::-webkit-scrollbar {
display: none;
}
.ns-card {
display: flex;
flex-direction: column;
flex: 0 0 210px;
min-width: 210px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
text-decoration: none;
color: var(--ink);
}
.ns-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.ns-card-img {
width: 100%;
height: 130px;
background-size: cover;
background-position: center;
background-color: var(--bg-3);
}
.ns-card-img--no-img {
background-image: none;
background-color: var(--bg-3);
}
.ns-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.ns-card-cat {
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
color: var(--gold);
display: none;
}
.ns-card-title {
font-size: .85rem;
line-height: 1.5;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ns-card-date {
font-size: .72rem;
color: var(--ink-3);
margin-top: auto;
}
.news-more-wrap {
text-align: center;
margin-top: 20px;
}
@media (max-width: 768px) {
.news-slider-section {
padding: 48px 0 40px !important;
}
.news-slider {
padding: 0 20px 16px;
gap: 14px;
}
.ns-card {
flex: 0 0 180px;
min-width: 180px;
}
.ns-card-img {
height: 110px;
}
}
/* ==========================================================
REFINE PATCH — 優先度4〜8
(lily-refine 2026-04)
========================================================== */
/* ---- 4-1. セクション間余白拡張 ---- */
.manifesto,
.services,
.plan,
.journey,
.strengths,
.reviews,
.staff-section,
.news-section,
.faq,
.access {
padding-top: 160px;
padding-bottom: 160px;
}
@media (max-width: 768px) {
.manifesto,
.services,
.plan,
.journey,
.strengths,
.reviews,
.staff-section,
.news-section,
.faq,
.access {
padding-top: 80px;
padding-bottom: 80px;
}
}
/* ---- 4-3. 数字ラベル装飾強化 ---- */
.svc-idx {
font-family: var(--font-en-italic);
font-size: clamp(64px, 10vw, 140px);
font-weight: 300;
color: var(--color-accent, var(--gold));
opacity: 0.12;
position: absolute;
top: -30px;
left: -10px;
z-index: 0;
pointer-events: none;
line-height: 1;
letter-spacing: -.02em;
}
.svc > * {
position: relative;
z-index: 1;
}
/* ---- 5-1. フェードイン（.fade-in クラス） ---- */
.fade-in {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(.2,.7,.2,1),
transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.fade-in.visible {
opacity: 1;
transform: none;
}
/* ---- 5-2. 画像ホバーズーム（スタッフ・カード） ---- */
.staff-card {
overflow: hidden;
}
.staff-card img {
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
display: block;
}
.staff-card:hover img {
transform: scale(1.04);
}
/* ---- 5-3. Ken Burns（hero-bg-wrap に移動済み） ---- */
/* hero-bg-wrap の animation は既存 style.css で定義済み */
/* ---- 6-1. Scroll Down 縦書き+ライン ---- */
/* hero-scroll は既存定義（1203行付近）を更新済み */
/* ---- 6-2. 評価バッジ 縦線区切り ---- */
.hero-badges {
display: flex;
gap: 0;
align-items: center;
}
.badge {
padding: 0 24px;
border-right: 1px solid rgba(255,255,255,0.25);
}
.badge:first-child {
padding-left: 0;
}
.badge:last-child {
border-right: none;
}
/* ---- 7-2. スタッフ写真 CSS統一 ---- */
.staff-card img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #EDE6DC;
filter: saturate(0.9);
transition: filter 0.6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.staff-card:hover img {
filter: saturate(1);
}
/* ---- 8-3. FAQ アコーディオン easing ---- */
.faq-a {
overflow: hidden;
max-height: 0;
transition: max-height 0.6s cubic-bezier(.2,.7,.2,1);
}
/* ---- 3-2. アクセント色の使い所 ---- */
.price .yen,
.price::first-letter {
color: var(--color-accent, var(--gold));
}
hr, .divider {
border-color: var(--color-line, rgba(184,149,106,.2));
}
.section-alt {
background: var(--color-bg-alt, var(--bg-2));
}
/* ---- 価格記号フォント修正 (Phase 1 fix) ---- */
.plan-table td.plan-price,
.svc .price,
.price-yen {
font-family: "Shippori Mincho B1", "Noto Serif JP", "Cormorant Garamond", serif;
font-feature-settings: "palt";
}
/* ==========================================================
FOOTER 3-COLUMN (Phase 2-10)
========================================================== */
.site-footer .footer-inner{
max-width:var(--max);margin:0 auto;
padding:clamp(60px,8vw,80px) clamp(24px,5vw,48px);
display:grid;
grid-template-columns:1.4fr 1fr 1fr;
gap:clamp(30px,5vw,60px);
}
.footer-col--brand .foot-sns.footer-social{
display:flex;gap:16px;align-items:center;margin-top:20px;
}
.footer-col--brand .foot-sns.footer-social a{
color:#9b9085;transition:color .3s;
}
.footer-col--brand .foot-sns.footer-social a:hover{
color:var(--gold-glow);
}
.footer-col--nav .foot-nav-grid{
display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px 24px !important;
}
.footer-col--info .foot-ct-list{
display:flex;flex-direction:column;gap:12px;
}
@media(max-width:800px){
.site-footer .footer-inner{
grid-template-columns:1fr;
gap:38px;
}
}
/* ==========================================================
PHASE 3 — SP OPTIMISATION
========================================================== */
/* 1. price-yen span */
.price-yen {
display: inline-block;
font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
font-feature-settings: "palt";
padding: 0;
width: auto;
}
/* 2. iOS Safari — tap highlight / 100dvh / input zoom */
* { -webkit-tap-highlight-color: transparent; }
.hero { height: 100vh; height: 100dvh; }
input, textarea, select { font-size: 16px; }
/* 3. SP tap targets (min 44px) */
@media (max-width: 768px) {
.site-header a,
.site-footer a,
.mobile-menu a,
.nav-list a,
.news-card,
.footer-cta-fixed a,
.booking-fixed a {
min-height: 44px;
display: flex;
align-items: center;
}
.hamburger { width: 44px; height: 44px; }
p a, .review-text a { min-height: auto; display: inline; }
.plan-table tr { min-height: 56px; }
}
/* 4. SP typography & section spacing */
@media (max-width: 600px) {
body, p {
font-size: 15px;
line-height: 1.85;
letter-spacing: 0.03em;
}
h1 { font-size: 1.7rem; line-height: 1.4; }
h2 { font-size: 1.4rem; line-height: 1.45; }
h3 { font-size: 1.15rem; line-height: 1.5; }
.section-label, .eyebrow { font-size: 0.65rem; letter-spacing: 0.3em; }
.section { padding-top: 64px; padding-bottom: 64px; }
.container, .section-inner { padding-left: 20px; padding-right: 20px; }
}
/* 5. SP FAQ accordion */
@media (max-width: 600px) {
.faq-item { border-bottom: 1px solid var(--color-line, var(--line)); }
.faq-q {
padding: 18px 40px 18px 16px;
font-size: 0.95rem;
line-height: 1.5;
min-height: 44px;
display: flex;
align-items: center;
}
.faq-q::before { left: 0; top: 50%; transform: translateY(-50%); }
.faq-a-in { padding: 0 16px 18px 16px; font-size: 0.85rem; line-height: 1.85; }
}
/* 6. iOS Safari smooth scroll */
.scrollable { -webkit-overflow-scrolling: touch; }
/* Journey SP padding fix */
@media(max-width:768px){
.journey-timeline{padding:40px 20px;}
.journey-step{padding:0 4px;}
.journey-content{padding:0 4px;}
.journey-content h3{padding-left:0;}
.journey-content p{padding-left:0;}
}
/* ============================================================
Phase 4 — Buttons / Shadows / Swipe Gallery
============================================================ */
/* Shadow Variables */
:root {
--shadow-soft:
0 1px 2px rgba(31,27,23,.04),
0 4px 12px rgba(31,27,23,.04),
0 16px 32px rgba(31,27,23,.04);
--shadow-medium:
0 1px 2px rgba(31,27,23,.05),
0 6px 16px rgba(31,27,23,.06),
0 24px 48px rgba(31,27,23,.06);
--shadow-deep:
0 1px 2px rgba(31,27,23,.06),
0 8px 24px rgba(31,27,23,.08),
0 32px 64px rgba(31,27,23,.08);
}
/* ==========================================================
背景色（page-loader 削除後の白フラッシュ防止）
========================================================== */
html,
body {
background-color: #FAF6F1;
}
.hero,
.front-hero,
.site-hero {
background-color: #FAF6F1;
}
/* Card Shadows */
.service-card,
.staff-card,
.review-card,
.news-card {
box-shadow: var(--shadow-soft);
transition: box-shadow .4s cubic-bezier(.2,.7,.2,1),
transform .4s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover,
.staff-card:hover,
.news-card:hover {
box-shadow: var(--shadow-medium);
transform: translateY(-4px);
}
.campaign-popup,
.wpp-container,
#wpp-container {
box-shadow: var(--shadow-deep);
}
@media (max-width: 600px) {
.service-card,
.staff-card,
.review-card,
.news-card {
box-shadow:
0 1px 2px rgba(31,27,23,.04),
0 4px 8px rgba(31,27,23,.04);
}
}
/* .btn-elegant */
.btn-elegant {
display: inline-block;
padding: 18px 48px;
border: 1px solid var(--color-text, #1F1B17);
background: transparent;
color: var(--color-text, #1F1B17);
font-family: var(--font-en-label, 'Cormorant Garamond', serif);
letter-spacing: .3em;
font-size: .75rem;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
position: relative;
z-index: 1;
transition: all .4s cubic-bezier(.2,.7,.2,1);
cursor: pointer;
}
.btn-elegant::after {
content: '';
position: absolute;
bottom: -8px;
right: -8px;
width: 100%;
height: 100%;
border: 1px solid var(--color-accent, #B89968);
z-index: -1;
transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.btn-elegant:hover {
background: var(--color-text, #1F1B17);
color: var(--color-bg, #FAF6F1);
transform: translate(-2px,-2px);
}
.btn-elegant:hover::after {
bottom: -6px;
right: -6px;
border-color: var(--color-accent-deep, #8B6F3F);
}
.btn-elegant--gold {
border-color: var(--color-accent, #B89968);
color: var(--color-accent, #B89968);
}
.btn-elegant--gold::after { border-color: var(--color-text, #1F1B17); }
.btn-elegant--gold:hover {
background: var(--color-accent, #B89968);
color: var(--color-bg, #FAF6F1);
}
.btn-elegant--large {
padding: 22px 64px;
font-size: .8rem;
letter-spacing: .35em;
}
.btn-elegant--large::after { bottom: -10px; right: -10px; }
.btn-elegant--arrow { padding-right: 56px; }
.btn-elegant--arrow::before {
content: '\2192';
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
transition: transform .4s ease;
font-size: 1rem;
}
.btn-elegant--arrow:hover::before {
transform: translateY(-50%) translateX(4px);
}
@media (max-width: 768px) {
.btn-elegant {
padding: 14px 32px;
font-size: .7rem;
letter-spacing: .25em;
}
.btn-elegant::after { bottom: -6px; right: -6px; }
.btn-elegant--large { padding: 16px 40px; }
.news-more-btn {
padding: 14px 32px;
font-size: .7rem;
letter-spacing: .25em;
}
.news-more-btn::after {
bottom: -6px;
right: -6px;
}
}
/* Swipe Gallery */
@media (max-width: 768px) {
.swipe-gallery {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding: 0 20px 20px;
margin: 0 -20px;
scrollbar-width: none;
}
.swipe-gallery::-webkit-scrollbar { display: none; }
.swipe-gallery > * {
flex: 0 0 85%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.swipe-gallery::after { content: ''; flex: 0 0 5%; }
.swipe-gallery--wide > * { flex: 0 0 92%; }
.swipe-gallery--compact > * { flex: 0 0 70%; }
}
@media (min-width: 769px) {
.swipe-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
overflow: visible;
}
.swipe-gallery > * { flex: none; }
}
@keyframes swipeHint {
0%,100% { opacity: .3; }
50% { opacity: .7; }
}
/* Swipe dots */
.swipe-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.swipe-dots__dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--color-text-mute, #6B5F52);
opacity: .3;
transition: all .3s ease;
cursor: pointer;
}
.swipe-dots__dot.is-active {
width: 24px;
opacity: 1;
background: var(--color-accent, #B89968);
}
@media (min-width: 769px) {
.swipe-dots { display: none; }
}
/* Section title alignment variants */
.section-voice .section-title-stack { text-align: left; }
.section-voice .section-title-bg { left: 0; transform: none; }
.section-access .section-title-stack { text-align: right; }
.section-access .section-title-bg { left: auto; right: 0; transform: none; }
/* ==========================================================
SP セクション間余白の重複解消
padding-top のみで制御し、padding-bottom は 0 に統一
========================================================== */
@media (max-width: 768px) {
/* 全セクション共通：上のみ余白を持つ */
section,
.section,
.section-news,
.section-service,
.section-services,
.section-voice,
.section-staff,
.section-faq,
.section-access,
.section-plan,
#news, #services, #voice, #staff, #faq, #access, #menu, #plan {
padding-top: 64px;
padding-bottom: 0;
}
/* ページ最後のセクションだけ下余白を持たせる */
section:last-of-type,
.section:last-of-type {
padding-bottom: 64px;
}
/* ヒーロー直後の最初のセクションは余白少なめ */
.hero + section,
.hero + .section {
padding-top: 48px;
}
/* News セクション内のボタン下余白も詰める */
#news .btn-elegant,
.section-news .btn-elegant,
.news-slider-section .news-more-btn {
margin-bottom: 0;
}
}
@media (max-width: 480px) {
section,
.section,
#news, #services, #voice, #staff, #faq, #access, #menu, #plan {
padding-top: 56px;
padding-bottom: 0;
}
section:last-of-type,
.section:last-of-type {
padding-bottom: 56px;
}
}
/* news-slider-section 直後の services セクション余白調整 */
@media (max-width: 768px) {
.news-slider-section + .services,
.news-slider-section + section.services {
padding-top: 48px;
}
}
/* ============================================
Before & After ページ専用スタイル
============================================ */
/* ============================================
Before & After ページ専用スタイル（v2）
============================================ */
.ba-page {
background: var(--color-bg);
color: var(--color-text);
padding-top: 100px;
overflow-x: hidden;
max-width: 100vw;
}
/* ===== ヒーローセクション ===== */
.ba-hero {
position: relative;
min-height: 60vh;
display: grid;
align-items: center;
background: var(--color-bg-alt);
overflow: hidden;
}
.ba-hero__inner {
max-width: 1120px;
margin: 0 auto;
padding: 80px 24px;
width: 100%;
}
.ba-hero__eyebrow {
display: inline-block;
font-family: var(--font-en-label);
font-size: 0.75rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 24px;
}
.ba-hero__title {
font-family: var(--font-jp-serif);
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
margin: 0 0 28px;
max-width: 720px;
}
.ba-hero__title em {
font-family: var(--font-en-italic);
font-style: italic;
font-weight: 400;
color: var(--color-accent);
}
.ba-hero__lead {
font-family: var(--font-jp-serif);
font-size: 0.95rem;
line-height: 2;
color: var(--color-text-mute);
letter-spacing: 0.05em;
max-width: 680px;
}
/* ===== 注意書きノート ===== */
.ba-note-section {
padding: 48px 0 0;
}
.ba-note-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
.ba-note {
background: #fff;
border: 1px solid var(--color-line);
padding: 32px 36px;
box-shadow:
0 1px 2px rgba(31, 27, 23, 0.04),
0 4px 12px rgba(31, 27, 23, 0.04),
0 16px 32px rgba(31, 27, 23, 0.04);
}
.ba-note strong {
display: block;
font-family: var(--font-jp-serif);
font-weight: 500;
font-size: 1rem;
color: var(--color-text);
margin-bottom: 12px;
letter-spacing: 0.05em;
}
.ba-note p {
font-family: var(--font-jp-serif);
font-size: 0.85rem;
line-height: 1.95;
color: var(--color-text-mute);
margin: 0;
letter-spacing: 0.04em;
}
/* ===== 施術例ギャラリー ===== */
.ba-gallery {
padding: 80px 0;
}
.ba-gallery__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
.ba-gallery__lead {
font-family: var(--font-jp-serif);
font-size: 0.95rem;
line-height: 1.95;
color: var(--color-text-mute);
margin: 0 0 40px;
text-align: center;
letter-spacing: 0.04em;
}
/* カテゴリフィルター */
.ba-filter {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 48px;
justify-content: center;
}
.ba-filter__btn {
background: transparent;
border: 1px solid var(--color-line);
padding: 12px 28px;
font-family: var(--font-jp-serif);
font-size: 0.85rem;
letter-spacing: 0.1em;
color: var(--color-text);
cursor: pointer;
transition: all 0.4s cubic-bezier(.2,.7,.2,1);
border-radius: 0;
}
.ba-filter__btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.ba-filter__btn.is-active {
background: var(--color-text);
color: var(--color-bg);
border-color: var(--color-text);
}
/* カードグリッド */
.ba-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.ba-card {
background: #fff;
overflow: hidden;
border: 1px solid var(--color-line);
box-shadow:
0 1px 2px rgba(31, 27, 23, 0.04),
0 4px 12px rgba(31, 27, 23, 0.04),
0 16px 32px rgba(31, 27, 23, 0.04);
transition: box-shadow 0.4s cubic-bezier(.2,.7,.2,1),
transform 0.4s cubic-bezier(.2,.7,.2,1),
opacity 0.4s ease;
}
.ba-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(31, 27, 23, 0.05),
0 6px 16px rgba(31, 27, 23, 0.06),
0 24px 48px rgba(31, 27, 23, 0.06);
}
.ba-card.is-hidden {
display: none;
}
.ba-card__photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--color-line);
}
.ba-card__photo {
margin: 0;
position: relative;
aspect-ratio: 1 / 1.18;
overflow: hidden;
background: var(--color-bg, #FAF6F1);
}
.ba-card__photo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.ba-card__photo-label {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
background: rgba(31, 27, 23, 0.85);
color: var(--color-bg);
padding: 5px 12px;
font-family: var(--font-en-label);
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
}
.ba-card__photo-label--after {
background: var(--color-accent);
}
.ba-card__body {
padding: 28px 26px 30px;
}
.ba-card__category {
font-family: var(--font-en-italic);
font-style: italic;
font-size: 0.85rem;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: 8px;
}
.ba-card__treatment {
font-family: var(--font-jp-serif);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--color-text);
margin: 0 0 12px;
line-height: 1.5;
}
.ba-card__meta {
font-family: var(--font-jp-serif);
font-size: 0.78rem;
color: var(--color-text-mute);
margin-bottom: 14px;
letter-spacing: 0.04em;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-line);
}
.ba-card__description {
font-family: var(--font-jp-serif);
font-size: 0.85rem;
line-height: 1.8;
color: var(--color-text);
margin: 0;
letter-spacing: 0.04em;
min-height: 3.6em; /* PC: 2行分の高さを確保してカード高さを揃える */
}
.ba-gallery__small {
margin-top: 40px;
font-family: var(--font-jp-serif);
font-size: 0.75rem;
color: var(--color-text-mute);
text-align: center;
letter-spacing: 0.04em;
}
/* ===== Treatment Journey ===== */
.ba-journey {
padding: 80px 0;
background: var(--color-bg-alt);
}
.ba-journey__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
.ba-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 48px;
}
.ba-step {
background: #fff;
padding: 32px 28px;
border: 1px solid var(--color-line);
position: relative;
transition: transform 0.4s ease;
}
.ba-step:hover {
transform: translateY(-4px);
}
.ba-step__num {
display: block;
font-size: 2.4rem;
margin-bottom: 16px;
font-family: var(--font-en-italic);
font-style: italic;
color: transparent;
-webkit-text-stroke: 1px var(--color-accent);
line-height: 1;
}
.ba-step__title {
font-family: var(--font-jp-serif);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.06em;
margin: 0 0 12px;
}
.ba-step__desc {
font-family: var(--font-jp-serif);
font-size: 0.85rem;
line-height: 1.85;
color: var(--color-text-mute);
margin: 0;
letter-spacing: 0.04em;
}
/* ===== 予約CTA ===== */
.ba-cta {
padding: 100px 24px;
background: var(--color-text);
color: var(--color-bg);
text-align: center;
overflow: hidden;
}
.ba-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.ba-cta__eyebrow {
display: inline-block;
font-family: var(--font-en-label);
font-size: 0.75rem;
letter-spacing: 0.4em;
color: var(--color-accent);
margin-bottom: 20px;
text-transform: uppercase;
}
.ba-cta__title {
font-family: var(--font-jp-serif);
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 500;
letter-spacing: 0.08em;
margin: 0 0 24px;
color: var(--color-bg);
line-height: 1.5;
}
.ba-cta__lead {
font-family: var(--font-jp-serif);
font-size: 0.95rem;
line-height: 2;
color: rgba(250, 246, 241, 0.85);
margin: 0 0 40px;
letter-spacing: 0.04em;
}
.ba-cta__buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.ba-cta .btn-elegant {
color: var(--color-bg);
border-color: var(--color-bg);
}
.ba-cta .btn-elegant::after {
border-color: var(--color-accent);
}
.ba-cta .btn-elegant:hover {
background: var(--color-bg);
color: var(--color-text);
}
/* ===== レスポンシブ：タブレット ===== */
@media (max-width: 900px) {
.ba-grid {
grid-template-columns: repeat(2, 1fr);
}
.ba-steps {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== レスポンシブ：SP ===== */
@media (max-width: 768px) {
.ba-page { padding-top: 80px; }
.ba-hero { min-height: auto; }
.ba-hero__inner { padding: 56px 20px 48px; text-align: center; }
.ba-hero__title { font-size: 1.5rem; letter-spacing: 0.04em; max-width: 100%; }
.ba-hero__lead { font-size: 0.85rem; max-width: 100%; }
.ba-note-section { padding: 32px 0 0; }
.ba-note-inner { padding: 0 16px; }
.ba-note { padding: 24px 20px; }
.ba-gallery { padding: 56px 0; overflow-x: hidden; }
.ba-gallery__inner { padding: 0 16px; }
.ba-gallery__lead { font-size: 0.85rem; margin-bottom: 28px; }
/* カテゴリフィルター：横スクロール対応 */
.ba-filter {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
justify-content: flex-start !important;
margin: 0 -16px 36px !important;
padding: 4px 16px 12px !important;
gap: 8px !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.ba-filter::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.ba-filter__btn {
padding: 10px 18px !important;
font-size: 0.78rem !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* カード：1列 */
.ba-grid { grid-template-columns: 1fr; gap: 20px; }
.ba-card__body { padding: 22px 20px 24px; }
.ba-card__treatment { font-size: 1.05rem; }
.ba-card__description { min-height: auto; } /* SP: 高さ固定を解除 */
.ba-card__photo-label {
font-size: 0.6rem;
padding: 4px 10px;
top: 10px;
left: 10px;
}
/* Journey：1列 */
.ba-journey { padding: 56px 0; }
.ba-journey__inner { padding: 0 16px; }
.ba-steps { grid-template-columns: 1fr; gap: 16px; }
.ba-step { padding: 24px 20px; }
/* CTA */
.ba-cta { padding: 64px 20px; }
.ba-cta__buttons {
flex-direction: column;
align-items: stretch;
}
.ba-cta__buttons .btn-elegant { width: 100%; }
}
/* ==========================================================
Section Title Stack（重なるテキスト装飾）基本定義
英字が日本語タイトルの背景に大きく薄く重なるデザイン
========================================================== */
.section-title-stack {
position: relative;
text-align: center;
margin-bottom: 60px;
padding-top: 40px;
overflow: hidden;
contain: paint;
}
.section-title-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en-italic);
font-style: italic;
font-size: clamp(80px, 14vw, 180px);
font-weight: 400;
color: var(--color-accent);
opacity: 0.08;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
pointer-events: none;
user-select: none;
z-index: 0;
max-width: 100%;
overflow: hidden;
}
.section-title-main {
position: relative;
z-index: 1;
font-family: var(--font-jp-serif);
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.15em;
margin: 0;
padding-top: 30px;
}
@media (max-width: 768px) {
.section-title-stack {
margin-bottom: 40px;
padding-top: 24px;
padding-left: 24px;
padding-right: 24px;
}
.section-title-bg {
font-size: clamp(60px, 18vw, 100px);
opacity: 0.1;
}
.section-title-main {
font-size: 1.4rem;
letter-spacing: 0.1em;
padding-top: 20px;
}
}
/* ---- SP: hero aspect-ratio方式（全機種対応）----
iPhone Chrome / iOS Safari アドレスバー変動に影響されないよう画面比率で指定 */
@media (max-width: 900px) {
.hero {
/* ★最重要: 横幅を画面いっぱいに広げる */
width: 100% !important;
max-width: 100vw !important;
/* 高さは aspect-ratio で決める */
height: auto !important;
aspect-ratio: 9 / 16 !important;
min-height: 600px !important;
max-height: 900px !important;
/* GPU合成レイヤー化は維持 */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
/* ヒーロー内の背景画像が横いっぱいになるように */
.hero-bg-wrap {
width: 100% !important;
height: 100% !important;
}
.hero-bg {
/* 横幅・高さを明示 */
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/* scaleを含めない（拡大状態を維持しない） */
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
/* アニメーション完全無効化 */
animation: none !important;
-webkit-animation: none !important;
transition: none !important;
will-change: auto;
}
}
/* ============================================
料金表ページ専用スタイル
============================================ */
.price-page {
background: var(--bg-2);
color: var(--ink);
padding-top: 100px;
}
/* ===== ページヒーロー ===== */
.price-hero {
position: relative;
min-height: 40vh;
display: grid;
align-items: center;
background: var(--bg-2);
overflow: hidden;
}
.price-hero__inner {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
width: 100%;
text-align: center;
}
.price-hero__eyebrow {
display: inline-block;
font-family: "Cormorant Garamond", serif;
font-size: 0.75rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.price-hero__title {
font-family: "Shippori Mincho B1", serif;
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
margin: 0 0 28px;
color: var(--ink);
}
.price-hero__title em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 400;
color: var(--gold);
margin: 0 8px;
}
.price-hero__lead {
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
line-height: 2;
color: var(--ink-2);
letter-spacing: 0.05em;
max-width: 600px;
margin: 0 auto;
}
/* ===== 注意書き ===== */
.price-note-section {
padding: 48px 0 0;
}
.price-note-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.price-note {
background: #fff;
border: 1px solid rgba(44,40,36,.12);
padding: 32px 36px;
box-shadow:
0 1px 2px rgba(31,27,23,.04),
0 4px 12px rgba(31,27,23,.04),
0 16px 32px rgba(31,27,23,.04);
}
.price-note strong {
display: block;
font-family: "Shippori Mincho B1", serif;
font-weight: 500;
font-size: 1rem;
color: var(--ink);
margin-bottom: 12px;
letter-spacing: 0.05em;
}
.price-note p {
font-family: "Shippori Mincho B1", serif;
font-size: 0.85rem;
line-height: 1.95;
color: var(--ink-2);
margin: 0;
letter-spacing: 0.04em;
}
.price-note a {
color: var(--gold);
text-decoration: underline;
}
/* ===== 料金表本体 ===== */
.price-list {
padding: 80px 0;
}
.price-list__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* カテゴリヘッダー（黒帯） */
.price-section-header {
background: var(--ink);
color: var(--bg-2);
padding: 18px 24px;
margin: 56px 0 24px;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
display: flex;
align-items: baseline;
gap: 20px;
}
.price-section-header:first-of-type {
margin-top: 0;
}
.price-section-header__number {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 2.4rem;
font-weight: 300;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
line-height: 1;
flex-shrink: 0;
min-width: 50px;
}
.price-section-header__title {
font-family: "Shippori Mincho B1", serif;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.08em;
margin: 0;
line-height: 1.4;
color: var(--bg-2);
}
/* メニューカードグリッド */
.menu-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.menu-card {
background: #fff;
border: 1px solid rgba(44,40,36,.12);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 10px;
transition: box-shadow 0.4s cubic-bezier(.2,.7,.2,1),
transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.menu-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(31,27,23,.05),
0 6px 16px rgba(31,27,23,.06),
0 24px 48px rgba(31,27,23,.06);
}
.menu-card__type {
font-family: "Shippori Mincho B1", serif;
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--gold);
font-weight: 500;
border-bottom: 1px solid rgba(44,40,36,.12);
padding-bottom: 8px;
}
.menu-card__name {
flex: 1;
font-family: "Shippori Mincho B1", serif;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--ink);
margin: 0;
}
.menu-card__price {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 1.4rem;
font-weight: 500;
color: var(--ink);
text-align: right;
margin: 0;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid rgba(44,40,36,.12);
}
.menu-subgroup {
grid-column: 1 / -1;
padding: 20px 0 4px;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-2);
border-bottom: 1px solid rgba(44,40,36,.08);
}
/* 価格の¥記号 */
.price-yen {
color: var(--gold);
font-weight: 400;
margin-right: 2px;
font-family: "Shippori Mincho B1", serif;
font-style: normal;
font-size: 1rem;
}
/* 補足 */
.price-list__small {
margin-top: 56px;
font-family: "Shippori Mincho B1", serif;
font-size: 0.85rem;
color: var(--ink-2);
text-align: center;
letter-spacing: 0.04em;
}
.price-list__small a {
color: var(--gold);
text-decoration: underline;
}
/* ===== 予約CTA ===== */
.price-cta {
padding: 100px 24px;
background: var(--ink);
color: var(--bg-2);
text-align: center;
}
.price-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.price-cta__eyebrow {
display: inline-block;
font-family: "Cormorant Garamond", serif;
font-size: 0.75rem;
letter-spacing: 0.4em;
color: var(--gold);
margin-bottom: 20px;
text-transform: uppercase;
}
.price-cta__title {
font-family: "Shippori Mincho B1", serif;
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 500;
letter-spacing: 0.08em;
margin: 0 0 40px;
color: var(--bg-2);
line-height: 1.5;
}
.price-cta__buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.price-cta .btn-elegant {
color: var(--bg-2);
border-color: var(--bg-2);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 40px;
font-size: 0.78rem;
letter-spacing: 0.25em;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
border: 1px solid;
background: transparent;
transition: .4s;
text-decoration: none;
min-width: 220px;
}
.price-cta .btn-elegant--gold {
background: var(--gold);
border-color: var(--gold);
color: #fff;
}
.price-cta .btn-elegant:hover {
background: var(--bg-2);
color: var(--ink);
}
.price-cta .btn-elegant--gold:hover {
background: var(--gold-2, #b8952a);
border-color: var(--gold-2, #b8952a);
color: #fff;
}
/* ===== レスポンシブ：タブレット ===== */
@media (max-width: 900px) {
.menu-cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== レスポンシブ：SP ===== */
@media (max-width: 768px) {
.price-page { padding-top: 80px; }
.price-hero { min-height: auto; }
.price-hero__inner { padding: 56px 20px 48px; }
.price-hero__title { font-size: 1.5rem; letter-spacing: 0.04em; }
.price-hero__lead { font-size: 0.85rem; }
.price-note-section { padding: 32px 0 0; }
.price-note-inner { padding: 0 16px; }
.price-note { padding: 24px 20px; }
.price-list { padding: 56px 0; }
.price-list__inner { padding: 0 16px; }
.price-section-header {
padding: 14px 16px;
gap: 12px;
margin: 40px 0 16px;
}
.price-section-header__number {
font-size: 1.8rem;
min-width: 36px;
}
.price-section-header__title {
font-size: 1rem;
letter-spacing: 0.05em;
}
.price-cta {
padding: 64px 20px;
}
.price-cta__buttons {
flex-direction: column;
align-items: stretch;
}
.price-cta__buttons .btn-elegant {
width: 100%;
min-width: 0;
}
}
@media (max-width: 480px) {
.menu-cards {
grid-column: 1fr;
}
}
/* ============================================
/eye/ ページ 料金表セクション
============================================ */
.eye-pricelist {
padding: 80px 0;
background: var(--bg-2);
}
.eye-pricelist__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.eye-pricelist__lead {
text-align: center;
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
line-height: 1.95;
color: var(--ink-2);
letter-spacing: 0.04em;
margin-bottom: 56px;
}
/* ===== カテゴリヘッダー（Pattern D：センタリング・装飾線） ===== */
.eye-section-header {
margin: 64px 0 32px;
text-align: center;
padding: 0;
}
.eye-section-header__number {
display: block;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 0.85rem;
letter-spacing: 0.4em;
color: var(--gold);
margin-bottom: 12px;
}
.eye-section-header__title {
display: inline-block;
position: relative;
font-family: "Shippori Mincho B1", serif;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.15em;
margin: 0;
padding: 0 56px;
line-height: 1.4;
color: var(--ink);
}
.eye-section-header__title::before,
.eye-section-header__title::after {
content: '';
position: absolute;
top: 50%;
width: 40px;
height: 1px;
background: var(--gold);
}
.eye-section-header__title::before {
right: 100%;
margin-right: -40px;
}
.eye-section-header__title::after {
left: 100%;
margin-left: -40px;
}
/* ===== 料金表本体 ===== */
.eye-table {
background: #fff;
border: 1px solid rgba(44, 40, 36, .12);
box-shadow:
0 1px 2px rgba(31, 27, 23, 0.04),
0 4px 12px rgba(31, 27, 23, 0.04),
0 16px 32px rgba(31, 27, 23, 0.04);
margin-bottom: 8px;
overflow: hidden;
}
/* テーブルヘッダー（Menu / 新規 / 通常） */
.eye-table__head {
display: grid;
grid-template-columns: 1fr 140px 140px;
gap: 20px;
padding: 16px 28px;
background: var(--bg-2);
border-bottom: 1px solid rgba(44, 40, 36, .12);
}
.eye-table__head-name {
font-family: "Noto Sans JP", sans-serif;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-2);
}
.eye-table__head-col {
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.15em;
text-align: center;
color: var(--ink);
}
/* テーブル行 */
.eye-table__row {
display: grid;
grid-template-columns: 1fr 140px 140px;
gap: 20px;
padding: 18px 28px;
border-bottom: 1px solid rgba(44, 40, 36, .08);
align-items: center;
transition: background 0.3s ease;
}
.eye-table__row:hover {
background: rgba(184, 153, 104, 0.04);
}
.eye-table__row:last-child {
border-bottom: none;
}
.eye-table__name {
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.5;
color: var(--ink);
}
.eye-table__name small {
display: block;
font-size: 0.78rem;
color: var(--ink-2);
font-weight: 400;
margin-top: 2px;
letter-spacing: 0.04em;
}
.eye-table__price {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 1.15rem;
font-weight: 500;
color: var(--ink);
text-align: center;
white-space: nowrap;
}
.eye-table__price--empty {
color: rgba(44, 40, 36, .2);
font-size: 1.4rem;
}
/* サブグループ見出し */
.eye-subgroup {
display: block;
padding: 20px 28px 8px;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
border-bottom: 1px solid rgba(44, 40, 36, .08);
background: rgba(184, 153, 104, 0.04);
}
/* 注釈 */
.eye-pricelist__note {
margin-top: 56px;
padding: 24px 28px;
background: #fff;
border-left: 2px solid var(--gold);
font-family: "Shippori Mincho B1", serif;
font-size: 0.78rem;
line-height: 1.95;
color: var(--ink-2);
letter-spacing: 0.04em;
}
.eye-pricelist__note a {
color: var(--gold);
text-decoration: underline;
}
/* ===== レスポンシブ：SP ===== */
@media (max-width: 768px) {
.eye-pricelist {
padding: 56px 0;
}
.eye-pricelist__inner {
padding: 0 16px;
}
.eye-pricelist__lead {
font-size: 0.85rem;
margin-bottom: 36px;
}
.eye-section-header {
margin: 48px 0 24px;
}
.eye-section-header__title {
font-size: 1.1rem;
padding: 0 36px;
letter-spacing: 0.1em;
}
.eye-section-header__title::before,
.eye-section-header__title::after {
width: 24px;
}
.eye-section-header__title::before {
margin-right: -24px;
}
.eye-section-header__title::after {
margin-left: -24px;
}
.eye-table__head {
grid-template-columns: 1fr 80px 80px;
gap: 12px;
padding: 12px 16px;
}
.eye-table__head-name {
display: none;
}
.eye-table__head-col {
font-size: 0.78rem;
letter-spacing: 0.1em;
}
.eye-table__row {
grid-template-columns: 1fr 80px 80px;
gap: 12px;
padding: 14px 16px;
}
.eye-table__name {
font-size: 0.85rem;
line-height: 1.5;
}
.eye-table__name small {
font-size: 0.7rem;
}
.eye-table__price {
font-size: 1rem;
}
.eye-subgroup {
padding: 16px 16px 6px;
font-size: 0.65rem;
letter-spacing: 0.2em;
}
.eye-pricelist__note {
margin-top: 40px;
padding: 20px;
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.eye-table__head {
grid-template-columns: 1fr 64px 64px;
gap: 8px;
}
.eye-table__row {
grid-template-columns: 1fr 64px 64px;
gap: 8px;
}
.eye-table__head-col {
font-size: 0.72rem;
}
.eye-table__price {
font-size: 0.9rem;
}
}
/* ============================================
料金表ページ専用スタイル（/price/）
============================================ */
.price-page {
background: var(--bg-2);
color: var(--ink);
padding-top: 100px;
}
/* ===== ページヒーロー ===== */
.price-hero {
position: relative;
min-height: 50vh;
display: grid;
align-items: center;
background: var(--bg-2);
overflow: hidden;
}
.price-hero__inner {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
width: 100%;
text-align: center;
}
.price-hero__eyebrow {
display: inline-block;
font-family: "Cormorant Garamond", serif;
font-size: 0.75rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.price-hero__title {
font-family: "Shippori Mincho B1", serif;
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
margin: 0 0 28px;
color: var(--ink);
}
.price-hero__title em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 400;
color: var(--gold);
margin: 0 8px;
}
.price-hero__lead {
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
line-height: 2;
color: var(--ink-2);
letter-spacing: 0.05em;
max-width: 600px;
margin: 0 auto;
}
/* ===== 注意書き ===== */
.price-note-section {
padding: 48px 0 0;
}
.price-note-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.price-note {
background: #fff;
border: 1px solid rgba(44, 40, 36, .12);
padding: 32px 36px;
box-shadow:
0 1px 2px rgba(31, 27, 23, 0.04),
0 4px 12px rgba(31, 27, 23, 0.04),
0 16px 32px rgba(31, 27, 23, 0.04);
}
.price-note strong {
display: block;
font-family: "Shippori Mincho B1", serif;
font-weight: 500;
font-size: 1rem;
color: var(--ink);
margin-bottom: 12px;
letter-spacing: 0.05em;
}
.price-note p {
font-family: "Shippori Mincho B1", serif;
font-size: 0.85rem;
line-height: 1.95;
color: var(--ink-2);
margin: 0;
letter-spacing: 0.04em;
}
.price-note a {
color: var(--gold);
text-decoration: underline;
}
/* ===== 料金表本体 ===== */
.price-list {
padding: 80px 0;
}
.price-list__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* カテゴリヘッダー（黒帯） */
.price-section-header {
background: var(--ink);
color: var(--bg-2);
padding: 18px 24px;
margin: 56px 0 24px;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
display: flex;
align-items: baseline;
gap: 20px;
}
.price-section-header:first-of-type {
margin-top: 0;
}
.price-section-header__number {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 2.4rem;
font-weight: 300;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
line-height: 1;
flex-shrink: 0;
min-width: 50px;
}
.price-section-header__title {
font-family: "Shippori Mincho B1", serif;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.08em;
margin: 0;
line-height: 1.4;
color: var(--bg-2);
}
/* メニューカードグリッド */
.menu-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.menu-card {
background: #fff;
border: 1px solid rgba(44, 40, 36, .12);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 10px;
transition: box-shadow 0.4s cubic-bezier(.2,.7,.2,1),
transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.menu-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(31, 27, 23, 0.05),
0 6px 16px rgba(31, 27, 23, 0.06),
0 24px 48px rgba(31, 27, 23, 0.06);
}
.menu-card__type {
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
letter-spacing: 0.15em;
color: var(--gold);
font-weight: 500;
border-bottom: 1px solid rgba(44, 40, 36, .12);
padding-bottom: 8px;
}
.menu-card__name {
flex: 1;
font-family: "Shippori Mincho B1", serif;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--ink);
margin: 0;
}
.menu-card__price {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 1.4rem;
font-weight: 500;
color: var(--gold);
text-align: right;
margin: 0;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid rgba(44, 40, 36, .12);
}
.menu-subgroup {
grid-column: 1 / -1;
padding: 20px 0 4px;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-2);
}
/* 価格の¥記号 */
.price-yen {
color: var(--gold);
font-weight: 400;
margin-right: 2px;
font-family: "Shippori Mincho B1", serif;
}
/* 補足 */
.price-list__small {
margin-top: 56px;
font-family: "Shippori Mincho B1", serif;
font-size: 0.85rem;
color: var(--ink-2);
text-align: center;
letter-spacing: 0.04em;
}
.price-list__small a {
color: var(--gold);
text-decoration: underline;
}
/* ===== 予約CTA ===== */
.price-cta {
padding: 100px 24px;
background: var(--ink);
color: var(--bg-2);
text-align: center;
}
.price-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.price-cta__eyebrow {
display: inline-block;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.75rem;
letter-spacing: 0.4em;
color: var(--gold);
margin-bottom: 20px;
text-transform: uppercase;
}
.price-cta__title {
font-family: "Shippori Mincho B1", serif;
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 500;
letter-spacing: 0.08em;
margin: 0 0 40px;
color: var(--bg-2);
line-height: 1.5;
}
.price-cta__buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.price-cta .btn-elegant {
color: var(--bg-2);
border-color: var(--bg-2);
}
.price-cta .btn-elegant::after {
border-color: var(--gold);
}
.price-cta .btn-elegant:hover {
background: var(--bg-2);
color: var(--ink);
}
/* ===== レスポンシブ：タブレット ===== */
@media (max-width: 900px) {
.menu-cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== レスポンシブ：SP ===== */
@media (max-width: 768px) {
.price-page { padding-top: 80px; }
.price-hero { min-height: auto; }
.price-hero__inner { padding: 56px 20px 48px; }
.price-hero__title { font-size: 1.5rem; letter-spacing: 0.04em; }
.price-hero__lead { font-size: 0.85rem; }
.price-note-section { padding: 32px 0 0; }
.price-note-inner { padding: 0 16px; }
.price-note { padding: 24px 20px; }
.price-list { padding: 56px 0; }
.price-list__inner { padding: 0 16px; }
.price-section-header {
padding: 14px 16px;
gap: 12px;
}
.price-section-header__number {
font-size: 1.8rem;
min-width: 36px;
}
.price-section-header__title {
font-size: 1rem;
letter-spacing: 0.05em;
}
.price-cta {
padding: 64px 20px;
}
.price-cta__buttons {
flex-direction: column;
align-items: stretch;
}
.price-cta__buttons .btn-elegant {
width: 100%;
}
}
@media (max-width: 480px) {
.menu-cards {
grid-template-columns: 1fr;
}
}
/* ============================================
ヘッダー SNSアイコン群（SP用）
============================================ */
.header-icons--sp {
display: none;
}
@media (max-width: 900px) {
.hdr-tel,
.hdr-line-btn {
display: none !important;
}
.header-icons--sp {
display: flex !important;
align-items: center;
gap: 8px;
margin-right: 8px;
}
.header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
text-decoration: none;
transition: opacity 0.3s ease, transform 0.2s ease;
}
.header-icon:active {
transform: scale(0.95);
}
.header-icon svg {
width: 18px;
height: 18px;
}
.header-icon--tel {
background: #8B6F3F !important;
color: #fff !important;
}
.header-icon--line {
background: #06C755 !important;
color: #fff !important;
}
.header-icon--ig {
background: linear-gradient(45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%) !important;
color: #fff !important;
}
}
@media (max-width: 375px) {
.header-icons--sp {
gap: 6px !important;
margin-right: 6px !important;
}
.header-icon {
width: 32px !important;
height: 32px !important;
}
.header-icon svg {
width: 16px !important;
height: 16px !important;
}
}
/* ============================================
フッター SNSアイコン群（ゴールド統一・ミニマル）
============================================ */
.footer-sns {
display: flex;
align-items: center;
gap: 14px;
margin: 24px 0;
flex-wrap: wrap;
}
.footer-sns__icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
text-decoration: none;
background: transparent !important;
border: 1.5px solid #B89968 !important;
color: #B89968 !important;
transition: all 0.4s cubic-bezier(.2, .7, .2, 1);
}
.footer-sns__icon:hover {
background: #B89968 !important;
color: #1F1B17 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(184, 153, 104, 0.25);
}
.footer-sns__icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: currentColor;
transition: all 0.4s cubic-bezier(.2, .7, .2, 1);
}
.footer-sns__icon--tel,
.footer-sns__icon--line,
.footer-sns__icon--ig {
background: transparent !important;
border: 1.5px solid #B89968 !important;
color: #B89968 !important;
}
.footer-sns__icon--tel:hover,
.footer-sns__icon--line:hover,
.footer-sns__icon--ig:hover {
background: #B89968 !important;
color: #1F1B17 !important;
}
@media (max-width: 768px) {
.footer-sns {
gap: 12px;
margin: 20px 0;
}
.footer-sns__icon {
width: 40px;
height: 40px;
}
.footer-sns__icon svg {
width: 18px;
height: 18px;
}
}
/* ============================================
ハンバーガーメニュー（SP）デザイン強化
============================================ */
/* 背景：クリーム色に上書き */
.hdr-mobile {
background: #FAF6F1 !important;
color: #1F1B17 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
overflow-y: auto !important;
padding: 0 !important;
gap: 0 !important;
}
/* 閉じるボタン：ゴールド枚 */
.mob-close {
position: absolute !important;
top: 20px !important;
right: 20px !important;
width: 40px !important;
height: 40px !important;
border: 1.5px solid #B89968 !important;
border-radius: 50% !important;
background: transparent !important;
color: #B89968 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.4s cubic-bezier(.2, .7, .2, 1) !important;
z-index: 10 !important;
font-size: 1rem !important;
padding: 0 !important;
}
.mob-close:hover,
.mob-close:active {
background: #B89968 !important;
color: #FAF6F1 !important;
}
/* ロゴ部分 */
.mob-logo {
text-align: center;
padding: 56px 24px 28px;
}
.mob-logo__main {
display: block;
font-family: 'Cormorant Garamond', 'Shippori Mincho B1', serif;
font-style: italic;
font-size: 2.4rem;
font-weight: 400;
color: #1F1B17;
letter-spacing: 0.02em;
line-height: 1.1;
}
.mob-logo__sub {
display: block;
font-family: 'Cormorant Garamond', sans-serif;
font-size: 0.68rem;
font-weight: 400;
color: #B89968;
letter-spacing: 0.3em;
margin-top: 6px;
text-transform: uppercase;
}
.mob-logo__divider {
display: block;
width: 60px;
height: 1px;
background: #B89968;
margin: 18px auto 0;
opacity: 0.5;
}
/* メニューリスト */
.mob-list {
list-style: none !important;
padding: 0 32px !important;
margin: 0 !important;
}
.mob-item {
border-bottom: 1px solid rgba(184, 153, 104, 0.18) !important;
padding: 0 !important;
list-style: none !important;
}
.mob-item:last-child {
border-bottom: none !important;
}
.mob-item a {
display: block !important;
padding: 16px 0 !important;
text-decoration: none !important;
color: #1F1B17 !important;
font-size: 1rem !important;
letter-spacing: normal !important;
transition: all 0.3s ease !important;
}
.mob-item a:hover,
.mob-item a:active {
padding-left: 8px !important;
color: #B89968 !important;
}
.mob-jp {
display: block;
font-family: 'Shippori Mincho B1', serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: inherit;
}
.mob-en {
display: block;
font-family: 'Cormorant Garamond', sans-serif;
font-style: italic;
font-size: 0.68rem;
color: #B89968;
letter-spacing: 0.08em;
margin-top: 3px;
opacity: 0.85;
}
/* 下部 SNSアイコン */
.mob-sns {
padding: 28px 32px 44px;
text-align: center;
}
.mob-sns__divider {
display: block;
width: 60px;
height: 1px;
background: #B89968;
opacity: 0.5;
margin: 0 auto 20px;
}
.mob-sns__icons {
display: flex;
justify-content: center;
gap: 14px;
}
.mob-sns__icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: transparent !important;
border: 1.5px solid #B89968 !important;
color: #B89968 !important;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(.2, .7, .2, 1) !important;
font-size: 1rem !important;
}
.mob-sns__icon:hover,
.mob-sns__icon:active {
background: #B89968 !important;
color: #FAF6F1 !important;
transform: translateY(-2px) !important;
}
.mob-sns__icon svg {
width: 20px !important;
height: 20px !important;
}
/* 画面が小さい端末対応 */
@media (max-height: 700px) {
.mob-logo {
padding: 48px 24px 20px;
}
.mob-item a {
padding: 12px 0 !important;
}
.mob-sns {
padding: 20px 32px 36px;
}
}
/* ============================================
ハンバーガーメニュー「>」問題修正
hdr-mobileが閉じている時はmob-closeも非表示
============================================ */
/* hdr-mobileのopacity:0時にmob-closeも完全に隠す */
.hdr-mobile:not(.open):not([aria-hidden="false"]) .mob-close {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* ============================================
/medicalcare/ ページ専用スタイル
============================================ */
.medical-page {
background: var(--color-bg, #FAF6F1);
color: var(--color-text, #1F1B17);
}
.medical-inner {
max-width: 860px;
margin: 0 auto;
padding: 80px 40px;
}
@media (max-width: 768px) {
.medical-inner {
padding: 56px 24px;
}
}
.medical-section-title {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
line-height: 1.5;
margin: 16px 0 40px;
color: var(--color-text, #1F1B17);
}
.medical-lead__text {
font-size: 1rem;
line-height: 1.9;
color: var(--color-text-mute, #6B5F52);
}
.medical-concerns .concerns-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 40px 0;
}
@media (max-width: 768px) {
.medical-concerns .concerns-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
.concern-card {
background: #FAF6F1;
border: 1px solid rgba(184, 153, 104, 0.2);
padding: 24px;
}
.concern-card h3 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.1rem;
color: var(--color-accent-deep, #8B6F3F);
margin: 0 0 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(184, 153, 104, 0.3);
}
.concern-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.concern-card li {
padding: 6px 0 6px 18px;
position: relative;
font-size: 0.95rem;
line-height: 1.7;
}
.concern-card li::before {
content: '\30FB';
position: absolute;
left: 0;
color: var(--color-accent, #B89968);
}
.points-list {
display: flex;
flex-direction: column;
gap: 32px;
margin: 40px 0;
}
.point-item {
display: flex;
gap: 24px;
padding: 24px;
background: #FAF6F1;
border-left: 3px solid var(--color-accent, #B89968);
}
.point-num {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 2rem;
color: var(--color-accent, #B89968);
line-height: 1;
flex-shrink: 0;
}
.point-body h3 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.15rem;
margin: 0 0 8px;
}
.point-body p {
margin: 0;
line-height: 1.8;
color: var(--color-text-mute, #6B5F52);
}
@media (max-width: 768px) {
.point-item {
flex-direction: column;
gap: 12px;
padding: 20px;
}
}
.treatment-category {
margin: 56px 0;
padding-bottom: 56px;
border-bottom: 1px solid rgba(184, 153, 104, 0.2);
}
.treatment-category:last-child {
border-bottom: none;
}
.category-label {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--color-accent, #B89968);
font-size: 0.85rem;
letter-spacing: 0.15em;
margin-bottom: 8px;
}
.treatment-category h3 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.4rem;
margin: 0 0 16px;
}
.treatment-category h4 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.05rem;
margin: 24px 0 12px;
color: var(--color-accent-deep, #8B6F3F);
}
.treatment-list {
list-style: none;
padding: 0;
margin: 16px 0;
}
.treatment-list li {
padding: 16px 20px;
background: #FAF6F1;
border-left: 2px solid var(--color-accent, #B89968);
margin-bottom: 12px;
line-height: 1.8;
}
.treatment-list strong {
color: var(--color-text, #1F1B17);
font-weight: 500;
}
.note-small {
font-size: 0.85rem;
color: var(--color-text-mute, #6B5F52);
margin-top: 16px;
line-height: 1.7;
}
.safety-points {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 40px 0;
}
@media (max-width: 768px) {
.safety-points {
grid-template-columns: 1fr;
}
}
.safety-item {
padding: 24px;
background: #FAF6F1;
}
.safety-item h3 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.05rem;
color: var(--color-accent-deep, #8B6F3F);
margin: 0 0 12px;
}
.safety-item p {
margin: 0;
font-size: 0.95rem;
line-height: 1.8;
color: var(--color-text-mute, #6B5F52);
}
.notice-block {
margin: 32px 0;
padding: 24px;
background: #FAF6F1;
border-left: 3px solid var(--color-accent, #B89968);
}
.notice-block.notice-warning {
border-left-color: #C97B5C;
background: #FBF3EE;
}
.notice-block h3 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.1rem;
margin: 0 0 12px;
color: var(--color-accent-deep, #8B6F3F);
}
.notice-block ul {
margin: 0;
padding-left: 20px;
line-height: 1.8;
}
.notice-block li {
margin-bottom: 8px;
font-size: 0.95rem;
color: var(--color-text-mute, #6B5F52);
}
.medical-faq .faq-list {
margin: 40px 0;
}
.medical-faq .faq-item {
border-bottom: 1px solid rgba(184, 153, 104, 0.25);
}
.medical-faq .faq-item:first-child {
border-top: 1px solid rgba(184, 153, 104, 0.25);
}
.medical-faq .faq-q {
cursor: pointer;
padding: 20px 32px 20px 0;
font-family: 'Shippori Mincho B1', serif;
font-size: 1rem;
line-height: 1.6;
list-style: none;
position: relative;
transition: color 0.3s;
display: block;
}
.medical-faq .faq-q::-webkit-details-marker {
display: none;
}
.medical-faq .faq-q::after {
content: '+';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--color-accent, #B89968);
font-size: 1.5rem;
transition: transform 0.3s;
}
.medical-faq .faq-item[open] .faq-q::after {
content: '-';
}
.medical-faq .faq-q:hover {
color: var(--color-accent-deep, #8B6F3F);
}
.medical-faq .faq-q__prefix {
color: var(--color-accent, #B89968);
margin-right: 8px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
}
.medical-faq .faq-a {
padding: 0 0 24px;
}
.medical-faq .faq-a-in {
padding: 0 0 0 24px;
line-height: 1.8;
color: var(--color-text-mute, #6B5F52);
}
@media (max-width: 768px) {
.medical-faq .faq-q {
padding: 18px 36px 18px 0;
font-size: 0.92rem;
}
}
.medical-cta {
text-align: center;
padding: 64px 24px;
background: #FAF6F1;
}
.medical-cta h2 {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(1.4rem, 3vw, 1.8rem);
margin-bottom: 16px;
line-height: 1.6;
}
.medical-cta p {
color: var(--color-text-mute, #6B5F52);
margin-bottom: 0;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
margin: 40px 0 24px;
flex-wrap: wrap;
}
.medical-cta .btn-primary,
.medical-cta .btn-secondary {
display: inline-block;
padding: 16px 40px;
text-decoration: none;
font-family: 'Shippori Mincho B1', serif;
font-size: 1rem;
transition: all 0.4s cubic-bezier(.2, .7, .2, 1);
letter-spacing: 0.05em;
}
.medical-cta .btn-primary {
background: #06C755;
color: #fff;
}
.medical-cta .btn-primary:hover {
background: #05a847;
}
.medical-cta .btn-secondary {
background: var(--color-text, #1F1B17);
color: #fff;
}
.medical-cta .btn-secondary:hover {
background: var(--color-accent-deep, #8B6F3F);
}
.hours-note {
font-size: 0.85rem;
color: var(--color-text-mute, #6B5F52);
margin: 16px 0 0;
}
.system-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 40px 0;
flex-wrap: wrap;
}
.flow-block {
text-align: center;
padding: 20px 24px;
background: #FAF6F1;
border: 1px solid rgba(184, 153, 104, 0.3);
flex: 1;
min-width: 160px;
}
.flow-block h3 {
font-family: 'Shippori Mincho B1', serif;
font-size: 1.05rem;
margin: 0 0 8px;
color: var(--color-accent-deep, #8B6F3F);
}
.flow-block p {
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
}
.flow-arrow {
color: var(--color-accent, #B89968);
font-size: 1.5rem;
flex-shrink: 0;
}
@media (max-width: 768px) {
.system-flow {
flex-direction: column;
align-items: stretch;
}
.flow-arrow {
text-align: center;
transform: rotate(90deg);
}
.flow-block {
min-width: 0;
}
}
.medical-page .page-hero {
padding: clamp(60px, 8vw, 100px) 40px clamp(40px, 5vw, 60px);
text-align: center;
background: var(--color-bg, #FAF6F1);
}
.medical-page .page-hero__title {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 600;
margin: 16px 0 0;
letter-spacing: 0.05em;
}
.medical-page .breadcrumb {
padding: 12px 40px;
background: var(--color-bg, #FAF6F1);
}
.medical-page .breadcrumb__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
font-size: 0.8rem;
color: var(--color-text-mute, #6B5F52);
}
.medical-page .breadcrumb__item + .breadcrumb__item::before {
content: '/';
margin-right: 8px;
}
.medical-page .breadcrumb__item a {
color: var(--color-accent-deep, #8B6F3F);
text-decoration: none;
}
@media (max-width: 768px) {
.medical-page .page-hero {
padding: 48px 24px 32px;
}
.medical-page .breadcrumb {
padding: 12px 24px;
}
}
/* ============================================================
* Medical Page v5 — 追加CSS
* 2026-04-29
* ============================================================ */
/* ---- 共通レイアウト ---- */
.mv5-inner {
max-width: 860px;
margin: 0 auto;
padding: 0 24px;
}
.mv5-section-title {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 700;
margin: 0 0 24px;
line-height: 1.4;
}
.mv5-note {
font-size: 0.78rem;
color: #888;
margin: 8px 0 0;
line-height: 1.6;
}
/* ---- Section 1: イントロ ---- */
.mv5-intro {
padding: 72px 0 56px;
background: #fff;
}
.mv5-intro__lead {
font-size: clamp(1rem, 2.2vw, 1.15rem);
line-height: 2;
color: #555;
margin: 0 0 28px;
}
.mv5-intro__text {
font-size: 1rem;
line-height: 1.9;
color: #333;
margin: 0 0 20px;
}
/* ---- Section 2: お悩み ---- */
.mv5-concerns {
padding: 72px 0;
background: #f9f7f5;
}
.mv5-concerns__lead {
font-size: 0.95rem;
line-height: 1.9;
color: #555;
margin: 0 0 40px;
}
.mv5-concerns-grid {
display: grid;
gap: 40px;
}
.mv5-concern-block {
background: #fff;
padding: 32px;
border-top: 3px solid #c8a96e;
}
.mv5-concern-cat {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 24px;
color: #333;
}
.mv5-concern-cat__en {
display: block;
font-size: 0.7rem;
letter-spacing: 0.12em;
color: #c8a96e;
text-transform: uppercase;
margin-bottom: 4px;
font-weight: 400;
}
.mv5-concern-sub {
margin: 0 0 24px;
}
.mv5-concern-sub:last-child {
margin-bottom: 0;
}
.mv5-concern-sub h4 {
font-size: 0.9rem;
font-weight: 700;
color: #555;
margin: 0 0 10px;
padding-left: 10px;
border-left: 2px solid #c8a96e;
}
.mv5-concern-sub ul {
list-style: none;
padding: 0;
margin: 0;
}
.mv5-concern-sub ul li {
font-size: 0.88rem;
color: #444;
padding: 4px 0 4px 16px;
position: relative;
line-height: 1.6;
}
.mv5-concern-sub ul li::before {
content: "・";
position: absolute;
left: 0;
color: #c8a96e;
}
.mv5-concerns__footer {
font-size: 0.95rem;
line-height: 1.9;
color: #555;
margin: 40px 0 0;
text-align: center;
}
/* ---- Section 3: 仕組み ---- */
.mv5-system {
padding: 72px 0;
background: #fff;
}
.mv5-system__text {
font-size: 1rem;
line-height: 1.9;
color: #333;
margin: 0 0 20px;
}
.mv5-system__note {
font-size: 0.85rem;
color: #666;
line-height: 1.8;
margin: 24px 0 0;
padding: 16px;
background: #f9f7f5;
border-left: 3px solid #c8a96e;
}
.mv5-flow-simple {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin: 32px 0;
}
.mv5-flow-step {
flex: 1;
min-width: 160px;
background: #f9f7f5;
padding: 20px 16px;
text-align: center;
border-top: 2px solid #c8a96e;
}
.mv5-flow-step__label {
font-size: 0.85rem;
font-weight: 700;
color: #333;
margin-bottom: 6px;
}
.mv5-flow-step__desc {
font-size: 0.78rem;
color: #666;
line-height: 1.5;
}
.mv5-flow-arrow {
font-size: 1.4rem;
color: #c8a96e;
flex-shrink: 0;
}
/* ---- Section 4: 選ばれる理由 ---- */
.mv5-reasons {
padding: 72px 0;
background: #f9f7f5;
}
.mv5-reasons-list {
display: grid;
gap: 32px;
}
.mv5-reason-item {
display: flex;
gap: 24px;
background: #fff;
padding: 28px;
}
.mv5-reason-num {
font-size: 2rem;
font-weight: 700;
color: #c8a96e;
line-height: 1;
flex-shrink: 0;
width: 48px;
}
.mv5-reason-body h3 {
font-size: 1rem;
font-weight: 700;
color: #333;
margin: 0 0 12px;
}
.mv5-reason-body p {
font-size: 0.92rem;
line-height: 1.9;
color: #444;
margin: 0;
}
/* ---- Section 5: 処方薬 ---- */
.mv5-treatments {
padding: 72px 0;
background: #fff;
}
.mv5-treatments__lead {
font-size: 1rem;
line-height: 1.9;
color: #333;
margin: 0 0 8px;
}
.mv5-treatment-cat {
margin: 56px 0 0;
padding-top: 40px;
border-top: 2px solid #e8e0d8;
}
.mv5-treatment-cat__header {
margin-bottom: 20px;
}
.mv5-treatment-cat__num {
display: block;
font-size: 0.7rem;
letter-spacing: 0.12em;
color: #c8a96e;
text-transform: uppercase;
margin-bottom: 6px;
}
.mv5-treatment-cat__header h3 {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin: 0;
}
.mv5-treatment-detail {
margin: 32px 0;
padding: 28px;
background: #f9f7f5;
}
.mv5-treatment-detail h4 {
font-size: 1.05rem;
font-weight: 700;
color: #333;
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid #e0d8d0;
}
.mv5-treatment-detail h5 {
font-size: 0.9rem;
font-weight: 700;
color: #555;
margin: 20px 0 12px;
}
.mv5-treatment-detail p {
font-size: 0.92rem;
line-height: 1.9;
color: #444;
margin: 0 0 12px;
}
/* DL スタイル */
.mv5-dl {
margin: 0;
padding: 0;
}
.mv5-dl dt {
font-size: 0.88rem;
font-weight: 700;
color: #333;
margin: 16px 0 4px;
padding-left: 10px;
border-left: 2px solid #c8a96e;
}
.mv5-dl dd {
font-size: 0.86rem;
color: #555;
line-height: 1.8;
margin: 0 0 0 12px;
padding-left: 10px;
}
/* Lilyのエステとの組み合わせ */
.mv5-lily-combo {
margin: 20px 0;
padding: 20px;
background: #fff;
border-left: 3px solid #c8a96e;
}
.mv5-lily-combo h5 {
font-size: 0.88rem;
font-weight: 700;
color: #c8a96e;
margin: 0 0 10px;
}
.mv5-lily-combo p {
font-size: 0.88rem;
line-height: 1.8;
color: #444;
margin: 0;
}
/* 読者Q&A */
.mv5-reader-qa {
margin: 16px 0;
padding: 16px;
background: #fff;
}
.mv5-reader-qa h5 {
font-size: 0.82rem;
font-weight: 700;
color: #888;
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mv5-reader-qa ul {
list-style: none;
padding: 0;
margin: 0;
}
.mv5-reader-qa ul li {
font-size: 0.84rem;
color: #555;
padding: 4px 0 4px 18px;
position: relative;
line-height: 1.6;
}
.mv5-reader-qa ul li::before {
content: "▶";
position: absolute;
left: 0;
font-size: 0.6rem;
color: #c8a96e;
top: 6px;
}
/* ---- Section 6: ご利用の流れ ---- */
.mv5-flow {
padding: 72px 0;
background: #f9f7f5;
}
.mv5-flow-steps {
display: grid;
gap: 0;
}
.mv5-flow-item {
display: flex;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid #e0d8d0;
}
.mv5-flow-item:last-child {
border-bottom: none;
}
.mv5-flow-item__num {
font-size: 0.75rem;
font-weight: 700;
color: #c8a96e;
letter-spacing: 0.08em;
flex-shrink: 0;
width: 64px;
padding-top: 4px;
}
.mv5-flow-item h3 {
font-size: 1rem;
font-weight: 700;
color: #333;
margin: 0 0 10px;
}
.mv5-flow-item p {
font-size: 0.92rem;
line-height: 1.9;
color: #444;
margin: 0;
}
/* ---- Section 7: 安全性 ---- */
.mv5-safety {
padding: 72px 0;
background: #fff;
}
.mv5-safety-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 32px;
}
.mv5-safety-item {
padding: 24px;
background: #f9f7f5;
border-top: 2px solid #c8a96e;
}
.mv5-safety-item h3 {
font-size: 0.92rem;
font-weight: 700;
color: #333;
margin: 0 0 10px;
}
.mv5-safety-item p {
font-size: 0.88rem;
line-height: 1.8;
color: #555;
margin: 0;
}
/* ---- Section 8: 注意事項 ---- */
.mv5-notices {
padding: 72px 0;
background: #f9f7f5;
}
.mv5-notice-block {
background: #fff;
padding: 28px;
margin: 0 0 24px;
}
.mv5-notice-block:last-child {
margin-bottom: 0;
}
.mv5-notice-block h3 {
font-size: 0.95rem;
font-weight: 700;
color: #333;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid #e8e0d8;
}
.mv5-notice-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.mv5-notice-block ul li {
font-size: 0.88rem;
color: #444;
padding: 5px 0 5px 16px;
position: relative;
line-height: 1.7;
}
.mv5-notice-block ul li::before {
content: "・";
position: absolute;
left: 0;
color: #c8a96e;
}
.mv5-notice-block p {
font-size: 0.88rem;
line-height: 1.8;
color: #444;
margin: 0;
}
.mv5-notice-block--warning {
border-left: 3px solid #c0392b;
}
.mv5-notice-block--warning h3 {
color: #c0392b;
}
/* ---- Section 9: FAQ ---- */
.mv5-faq {
padding: 72px 0;
background: #fff;
}
/* ---- Section 10: CTA ---- */
.mv5-cta {
padding: 72px 0;
background: #f9f7f5;
text-align: center;
}
.mv5-cta h2 {
font-size: clamp(1.3rem, 3vw, 1.8rem);
font-weight: 700;
color: #333;
margin: 0 0 20px;
}
.mv5-cta p {
font-size: 0.95rem;
line-height: 1.9;
color: #555;
margin: 0 0 16px;
}
.hours-note {
font-size: 0.8rem;
color: #888;
margin-top: 16px;
}
.btn-back {
display: inline-block;
font-size: 0.85rem;
color: #666;
text-decoration: none;
border-bottom: 1px solid #ccc;
padding-bottom: 2px;
transition: color 0.3s, border-color 0.3s;
}
.btn-back:hover {
color: #c8a96e;
border-color: #c8a96e;
}
/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
.mv5-inner {
padding: 0 16px;
}
.mv5-intro,
.mv5-concerns,
.mv5-system,
.mv5-reasons,
.mv5-treatments,
.mv5-flow,
.mv5-safety,
.mv5-notices,
.mv5-faq,
.mv5-cta {
padding: 48px 0;
}
.mv5-concern-block {
padding: 20px;
}
.mv5-reason-item {
flex-direction: column;
gap: 12px;
padding: 20px;
}
.mv5-reason-num {
font-size: 1.5rem;
width: auto;
}
.mv5-flow-simple {
flex-direction: column;
}
.mv5-flow-arrow {
transform: rotate(90deg);
}
.mv5-flow-step {
width: 100%;
}
.mv5-safety-grid {
grid-template-columns: 1fr;
}
.mv5-flow-item {
flex-direction: column;
gap: 8px;
}
.mv5-flow-item__num {
width: auto;
}
.mv5-treatment-detail {
padding: 20px;
}
}
/* ============================================================
ns-featured v2: ゴールド装飾フレーム + シャインアニメーション + NEWバッジ
============================================================ */
/* --- キーフレーム: 光が左から右へ流れる --- */
@keyframes ns-shine {
0% { left: -80%; }
60% { left: 130%; }
100% { left: 130%; }
}
/* --- キーフレーム: NEWバッジのふわっとパルス --- */
@keyframes ns-badge-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(180,140,50,0.4); }
50% { transform: scale(1.08); box-shadow: 0 4px 16px rgba(180,140,50,0.7); }
}
/* --- カード本体 --- */
.ns-card.ns-featured {
transform: scale(1.10);
transform-origin: center center;
position: relative;
z-index: 2;
border-radius: 12px;
/* ゴールドグロー二重ボーダー */
outline: 2px solid rgba(201,168,76,0.9);
outline-offset: 3px;
box-shadow:
0 0 0 1px rgba(232,201,122,0.5),
0 6px 24px rgba(180,140,50,0.30),
0 2px 8px rgba(0,0,0,0.12);
overflow: hidden;
}
/* --- シャイン（光が流れる擬似要素） --- */
.ns-card.ns-featured::after {
content: '';
position: absolute;
top: 0;
left: -80%;
width: 50%;
height: 100%;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255,255,220,0.55) 50%,
transparent 70%
);
transform: skewX(-15deg);
animation: ns-shine 3.2s ease-in-out infinite;
pointer-events: none;
z-index: 4;
}
/* --- NEWバッジ（大きめ・ゴールドグラデ） --- */
.ns-card.ns-featured::before {
content: '✦ NEW ✦';
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #b8860b, #e8c97a, #c9a84c);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
padding: 4px 16px;
border-radius: 20px;
white-space: nowrap;
animation: ns-badge-pulse 2s ease-in-out infinite;
z-index: 5;
text-shadow: 0 1px 2px rgba(100,60,0,0.4);
}
/* --- 画像エリアを少し高く --- */
.ns-card.ns-featured .ns-card-img {
height: 165px;
}
/* --- SP調整 --- */
@media (max-width: 768px) {
.ns-card.ns-featured {
transform: scale(1.07);
}
.ns-card.ns-featured .ns-card-img {
height: 145px;
}
.ns-card.ns-featured::before {
font-size: 10px;
padding: 3px 12px;
}
}
/* ============================================================
ns-featured fix2: NEWバッジをカード内部（画像上）に配置
overflow:hiddenを壊さないよう::beforeをposition:absoluteで内側に収める
============================================================ */
/* NEWバッジをカード上部内側に変更（はみ出しなし） */
.ns-card.ns-featured::before {
content: '✦ NEW ✦';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #b8860b, #e8c97a, #c9a84c);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
padding: 4px 16px;
border-radius: 20px;
white-space: nowrap;
animation: ns-badge-pulse 2s ease-in-out infinite;
z-index: 5;
text-shadow: 0 1px 2px rgba(100,60,0,0.4);
/* はみ出し防止: top:-13px → top:8px に変更 */
}
/* スライダーラッパーのpadding-topを少し追加（フレームが見えるよう） */
.news-slider {
padding-top: 12px !important;
}
/* ============================================================
ns-featured fix3: スライダーラッパーにpadding-topを追加
カードのscale(1.10)とNEWバッジが上部で切れないよう対処
overflow:hiddenはそのまま維持し、padding-topで余白確保
============================================================ */
.news-slider-wrap {
padding-top: 20px !important;
}
@media (max-width: 768px) {
.news-slider-wrap {
padding-top: 16px !important;
}
}
/* ============================================================
sister-store: (姉妹店) ラベル
============================================================ */
.sister-store {
display: inline-block;
font-size: 0.75em;
font-weight: 400;
color: #9b7e46;
letter-spacing: 0.05em;
margin-left: 0.4em;
vertical-align: middle;
position: relative;
top: -0.1em;
}
/* ===== medicalcare photo banner ===== */
.mv5-photo-banner {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.mv5-photo-banner__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.mv5-photo-banner__inner picture,
.mv5-photo-banner__inner img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* ==========================================
INFORMATION - TEL + HOURS 横並び2カラム
ADDRESS = 上段 / TEL + HOURS = 下段2列
========================================== */
/* TEL HOURS 横並び */
.info-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
margin-top: 20px !important;
}
/* 各ブロック（ADDRESS / TEL / HOURS）の下余白 */
.foot-ct-list .foot-ct-block {
margin: 0 0 20px 0 !important;
}
.foot-ct-list .foot-ct-block:last-child,
.info-row .foot-ct-block {
margin-bottom: 0 !important;
}
/* ラベル（ADDRESS/TEL/HOURS）の下余白 */
.foot-ct-list .foot-ct-block .foot-ct-name {
margin: 0 0 8px 0 !important;
}
/* 本文の余白・行間 */
.foot-ct-list .foot-ct-block .foot-ct-addr,
.foot-ct-list .foot-ct-block p {
margin: 0 !important;
line-height: 1.7 !important;
}
/* iPhone SE(360px) 対応 */
@media (max-width: 360px) {
.info-row {
gap: 16px !important;
}
.info-row .foot-ct-block p {
font-size: 0.9rem !important;
}
}
/* SP TEL/HOURS - HOURSが長い場合 */
@media (max-width: 400px) {
.info-row .foot-ct-block:last-child p {
font-size: 0.85rem !important;
}
}
/* ============================================================
オーナーセクション PC表示レイアウト 最終確定版
貼り付け先: /wp-content/themes/lily-theme/style.css の末尾
日付: 2026-04-30
このCSSは以下の HTML 構造に対する修正です:
既存CSS:
- .owner-split = CSS Grid (1fr 1fr)
- .owner-left = 画像コンテナ (overflow:hidden, object-fit:cover)
- .owner-right = メッセージ (flex column, justify-content:center)
- ブレークポイント: max-width: 860px = SP
修正内容:
1. PC表示時の画像幅を 35% に縮小(65/35 のグリッド比)
2. 画像はトリミングなしで縮小(object-fit: contain)
3. 画像とメッセージの上端を揃える(align-items: start)
4. メッセージの上下中央寄せを解除して上から始める
5. SP表示(860px以下)は触らない
============================================================ */
@media (min-width: 861px) {
/* ========================================
グリッド比率を 35% / 65% に変更 + 上端揃え
======================================== */
.owner-split {
grid-template-columns: 35fr 65fr !important;
align-items: start !important; /* 子要素を上端揃え */
min-height: 0 !important; /* 既存の min-height:600px を解除 */
}
/* ========================================
画像コンテナ: 上端揃え・はみ出し許可
======================================== */
.owner-left {
align-self: start !important;
overflow: visible !important; /* 既存の overflow:hidden を解除 */
min-height: 0 !important;
}
/* ========================================
画像本体: トリミングなし・最大高さ制限
======================================== */
.owner-left img {
width: 100% !important;
max-width: 100% !important;
height: auto !important; /* 既存の height:100% を解除 */
max-height: 750px !important; /* 高さ上限 */
object-fit: contain !important; /* 既存の object-fit:cover を解除(トリミング禁止) */
object-position: top center !important;
filter: brightness(0.9) saturate(0.95);
}
/* ========================================
画像コンテナの装飾(::after グラデ)を非表示
画像が contain で縮小されるため、グラデが画像とずれる
======================================== */
.owner-left::after {
display: none !important;
}
/* ========================================
メッセージコンテナ: 上端揃え + 上 padding 軽減
======================================== */
.owner-right {
justify-content: flex-start !important; /* 既存の justify-content:center を解除 */
align-self: start !important;
padding-top: clamp(40px, 5vw, 60px) !important; /* 既存の clamp(60px,8vw,100px) を軽減 */
}
}
/* ============================================================
SP表示(860px以下)は既存スタイルがそのまま適用される
何も追記しない
============================================================ */
/* ============================================================
オーナーセクション 微調整(追加)
貼り付け先: /wp-content/themes/lily-theme/style.css の末尾
日付: 2026-04-30 v2 追加修正
前回適用したCSS(35fr 65fr グリッド、align-items: start)で
レイアウトの基礎は整ったが、以下が残っている:
1. メッセージの上端が画像と揃わない
→ .owner-right の padding-top: clamp(60px,8vw,100px) が原因
2. メッセージの右に空白が残る
→ .owner-right の padding-right: clamp(40px,6vw,80px) が大きすぎ
3. 画像が contain で縮小されたことで .owner-left の背景が見える
→ 既存の background:var(--bg) → メッセージ側と同じ var(--bg-2) に統一
この CSS で残りの調整を完了させる。
============================================================ */
@media (min-width: 861px) {
/* ========================================
メッセージコンテナの padding を全方向再設定
上: 0 → 画像と上端を完全に揃える
右: 40px → 画面右まで広く使う
下: 40px → 余白を確保
左: 60px → 画像との適度な間隔
======================================== */
.owner-right {
padding: 0 40px 40px 60px !important;
}
/* セクションラベル直前の縦線(::before)の上余白をなくす */
.owner-right::before {
margin-top: 0 !important;
}
/* ========================================
画像コンテナの背景色を整える
画像が contain で縮小された場合に余白部分の背景が見えるため
メッセージ側と同じ色で違和感をなくす
======================================== */
.owner-left {
background: var(--bg-2) !important;
}
}
/* ============================================================
オーナーセクション 最終仕上げ
貼り付け先: /wp-content/themes/lily-theme/style.css の末尾
日付: 2026-04-30 v3 仕上げ
修正内容:
1. 画像下の余白対策: .owner-split 全体にクリーム背景を効かせる
→ 画像下の余白がメッセージ側と同じ色で繋がり、違和感が消える
2. Owner's Message の横線を両側に伸ばす
──── Owner's Message ────
→ 既存の左側の線 (::before) はそのまま、
右側に ::after で線を追加
→ さらに、画像とラベルの間にあった「独立した左寄せ縦線」は
(.owner-right::before) 不要なので非表示にする
============================================================ */
@media (min-width: 861px) {
/* ========================================
1. 画像下の余白対策
.owner-split 全体に統一背景色
======================================== */
.owner-split {
background: var(--bg-2) !important;
}
/* 画像コンテナの個別背景色は不要(親の色で十分) */
.owner-left {
background: transparent !important;
}
/* メッセージ側の個別背景色も親と統一 */
.owner-right {
background: transparent !important;
}
}
/* ============================================================
両 PC・SP 共通: Owner's Message の横線を両側に
============================================================ */
/* 既存の独立した縦線(画像とラベルの間)を非表示 */
.owner-right::before {
display: none !important;
}
/* セクションラベルを flex 化して両側に線を配置 */
.owner-right .section-label {
display: inline-flex !important;
align-items: center !important;
gap: 16px !important;
margin-bottom: 24px !important;
position: relative;
}
/* 既存の左側の線 (.section-label::before) はそのまま使われる */
/* width: 40px, height: 1px, background: var(--gold) */
/* 右側の線を追加 (::after) */
.owner-right .section-label::after {
content: "" !important;
display: inline-block !important;
width: 40px !important;
height: 1px !important;
background: var(--gold) !important;
flex-shrink: 0 !important;
}
/* ============================================================
/medicalcare/ Phase 1: カテゴリアイコン
貼り付け先: /wp-content/themes/lily-theme/style.css の末尾
日付: 2026-04-30 Phase1
対応カテゴリ:
1. お悩みカテゴリ(Skin / Hair / Other Concerns)
2. 処方薬カテゴリ(Skincare / Hair Care / Diet / Others)
デザイン原則:
- 線画SVG(細い1pxゴールド)
- 塗りなし(stroke のみ)
- var(--gold) = #B89968 を使用
- 角丸禁止・装飾禁止
============================================================ */
/* ========================================
お悩みカテゴリ見出し: アイコンを左に配置
======================================== */
.mv5-concern-cat {
display: flex;
align-items: center;
gap: 16px;
position: relative;
}
.mv5-concern-cat::before {
content: "";
display: inline-block;
width: 36px;
height: 36px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
}
/* Skin Concerns: 顔のシルエット+輪郭線 */
.mv5-concern-block:has(.mv5-concern-cat__en:contains("Skin")) .mv5-concern-cat::before,
.mv5-concern-block:nth-of-type(1) .mv5-concern-cat::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Hair Concerns: 髪の毛+毛根 */
.mv5-concern-block:nth-of-type(2) .mv5-concern-cat::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Other Concerns: 葉っぱ+雫(体質・自然) */
.mv5-concern-block:nth-of-type(3) .mv5-concern-cat::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* ========================================
処方薬カテゴリ見出し: ヘッダー左にアイコン
======================================== */
.mv5-treatment-cat__header {
display: flex !important;
align-items: center !important;
gap: 16px !important;
position: relative;
}
.mv5-treatment-cat__header::before {
content: "";
display: inline-block;
width: 32px;
height: 32px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 32px 32px;
}
/* 処方薬カテゴリ番号で分岐(01〜04) */
/* 01 Skincare: 雫+花びら */
.mv5-treatment-cat:nth-of-type(1) .mv5-treatment-cat__header::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* 02 Hair Care: 髪+毛根+くし */
.mv5-treatment-cat:nth-of-type(2) .mv5-treatment-cat__header::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* 03 Diet & Constitution: 葉っぱ+水玉(代謝・水分) */
.mv5-treatment-cat:nth-of-type(3) .mv5-treatment-cat__header::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* 04 Others: 月+星(その他・包括) */
.mv5-treatment-cat:nth-of-type(4) .mv5-treatment-cat__header::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* ========================================
SP対応 (860px以下): アイコンを少し小さく
======================================== */
@media (max-width: 860px) {
.mv5-concern-cat::before {
width: 28px;
height: 28px;
background-size: 28px 28px;
}
.mv5-treatment-cat__header::before {
width: 26px;
height: 26px;
background-size: 26px 26px;
}
.mv5-concern-cat,
.mv5-treatment-cat__header {
gap: 12px;
}
}
/* ========================================================================
[LILY-DATA] Phase 2: 医療提携ページ ご利用の流れ ビジュアル化
2026-04-30 追加
- PC(>860px): 横5カラム + 矢印で繋ぐ
- SP(<=860px): 縦タイムライン(左アイコン・右テキスト・縦線)
======================================================================== */
.mv5-flow .mv5-flow-lead {
text-align: center;
margin: 0 auto 48px;
max-width: 640px;
color: var(--ink-2);
line-height: 1.9;
}
.mv5-flow-steps {
position: relative;
}
.mv5-flow-item {
position: relative;
}
.mv5-flow-item__icon {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
color: var(--gold);
background: var(--bg);
flex-shrink: 0;
}
.mv5-flow-item__icon svg {
display: block;
}
.mv5-flow-item__num {
font-family: var(--font-en-italic);
color: var(--gold);
letter-spacing: 0.12em;
font-style: italic;
}
.mv5-flow-item h3 {
font-family: var(--font-jp-serif);
color: var(--ink);
font-weight: 500;
}
.mv5-flow-item p {
color: var(--ink-2);
line-height: 1.8;
margin: 0;
}
/* --- PC レイアウト (861px以上) --- */
@media (min-width: 861px) {
.mv5-flow-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
}
.mv5-flow-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 10px 20px;
}
/* 矢印(各itemの右側、最後以外) */
.mv5-flow-item:not(:last-child)::after {
content: '';
position: absolute;
top: 60px;
right: -18px;
width: 10px;
height: 10px;
border-top: 1.4px solid var(--gold);
border-right: 1.4px solid var(--gold);
transform: rotate(45deg);
z-index: 1;
}
.mv5-flow-item__icon {
width: 88px;
height: 88px;
margin-bottom: 18px;
position: relative;
z-index: 2;
}
.mv5-flow-item__icon svg {
width: 44px;
height: 44px;
}
.mv5-flow-item__num {
font-size: 1.05rem;
margin-bottom: 8px;
}
.mv5-flow-item h3 {
font-size: 1.02rem;
line-height: 1.55;
margin: 0 0 12px;
min-height: 3.2em;
}
.mv5-flow-item p {
font-size: 0.83rem;
text-align: left;
}
}
/* --- SP レイアウト (860px以下) タイムライン形式 --- */
@media (max-width: 860px) {
.mv5-flow-steps {
display: flex;
flex-direction: column;
gap: 0;
max-width: 560px;
margin: 0 auto;
}
.mv5-flow-item {
display: grid;
grid-template-columns: 64px 1fr;
column-gap: 18px;
align-items: start;
padding-bottom: 36px;
}
.mv5-flow-item:last-child {
padding-bottom: 0;
}
/* 縦の繋ぎ線(アイコンの中心から次のアイコンまで) */
.mv5-flow-item:not(:last-child)::before {
content: '';
position: absolute;
left: 31.5px;
top: 64px;
bottom: 0;
width: 1px;
background: var(--line-2);
z-index: 1;
}
.mv5-flow-item__icon {
width: 64px;
height: 64px;
grid-row: 1 / span 4;
position: relative;
z-index: 2;
align-self: start;
}
.mv5-flow-item__icon svg {
width: 32px;
height: 32px;
}
.mv5-flow-item__num {
font-size: 0.92rem;
margin: 6px 0 4px;
}
.mv5-flow-item h3 {
font-size: 1rem;
line-height: 1.55;
margin: 0 0 8px;
}
.mv5-flow-item p {
font-size: 0.86rem;
}
}
/* ========================================================================
[LILY-DATA] Phase 2 ここまで
======================================================================== */
/* ========================================================================
[LILY-DATA] Phase 3: 医療提携ページ アイコン追加
2026-04-30 追加
- A: 4つの理由 → 番号の上にアイコン
- B: 安全性 → 各カード上端にアイコン
======================================================================== */
/* --- A: 4つの理由 --- */
.mv5-reason-num {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
}
.mv5-reason-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
color: var(--gold);
background: var(--bg);
flex-shrink: 0;
}
.mv5-reason-icon svg {
width: 32px;
height: 32px;
display: block;
}
@media (max-width: 860px) {
.mv5-reason-icon {
width: 52px;
height: 52px;
}
.mv5-reason-icon svg {
width: 26px;
height: 26px;
}
.mv5-reason-num {
gap: 10px;
}
}
/* --- B: 安全性 --- */
.mv5-safety-item {
position: relative;
}
.mv5-safety-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
color: var(--gold);
background: var(--bg);
margin-bottom: 18px;
flex-shrink: 0;
}
.mv5-safety-icon svg {
width: 28px;
height: 28px;
display: block;
}
@media (max-width: 860px) {
.mv5-safety-icon {
width: 48px;
height: 48px;
margin-bottom: 14px;
}
.mv5-safety-icon svg {
width: 24px;
height: 24px;
}
}
/* ========================================================================
[LILY-DATA] Phase 3 ここまで
======================================================================== */
/* ========================================================================
[LILY-DATA] Nav wrap fix v16
2026-04-30 更新
- hdr-inner: flex(space-between) + column-gap でロゴ/nav/ctaを分離
- nav: flex:1 1 0 + min-width:0 + justify-content:center
- hdr-cta: flex-shrink:0 で幅固定
- white-space:nowrap で折り返し禁止
- PC表示のみ: メニュー間にゴールド仕切り線（::before 擬似要素）
- 段階的非表示（PC/min-width:961px のみ）:
1600px以下: サービスの強み(3番目) 非表示
1366px以下: お客様の声(4番目) も非表示
1100px以下: よくある質問(8番目) も非表示
1000px以下: 最新のお知らせ(9番目) も非表示
======================================================================== */
/* 常時: 折り返し禁止 */
.nav a,
.hdr-nav a {
white-space: nowrap;
}
.nav,
.hdr-nav {
flex-wrap: nowrap;
}
/* PC全幅（961px以上）: flex制御 + hdr-inner gap + 仕切り線 */
@media (min-width: 961px) {
.hdr-inner {
column-gap: 16px;
}
.nav,
.hdr-nav {
flex: 1 1 0;
min-width: 0;
justify-content: center;
gap: 0;
}
.hdr-cta {
flex-shrink: 0;
flex-grow: 0;
}
.hdr-tel {
white-space: nowrap;
}
/* 各リンクに左右パディング */
.nav a,
.hdr-nav a {
padding: 0 10px;
position: relative;
}
/* 2番目以降のリンクの左側にゴールド縦線 */
.nav a + a::before,
.hdr-nav a + a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 0.9em;
background-color: var(--gold, #8b6f3f);
opacity: 0.6;
}
}
/* 1600px以下: サービスの強み(3番目)を非表示 */
@media (min-width: 961px) and (max-width: 1600px) {
.hdr-nav a:nth-child(3) {
display: none;
}
.hdr-nav a:nth-child(4)::before {
display: none;
}
}
/* 1440px以下: padding縮小 */
@media (min-width: 961px) and (max-width: 1440px) {
.hdr-nav a {
padding: 0 5px;
}
}
/* 1366px以下: お客様の声(4番目)も非表示 */
@media (min-width: 961px) and (max-width: 1366px) {
.hdr-nav a:nth-child(4) {
display: none;
}
.hdr-nav a:nth-child(5)::before {
display: none;
}
}
/* 1280px以下: padding・hdr padding縮小 */
@media (min-width: 961px) and (max-width: 1280px) {
.hdr {
padding: 0 20px;
}
.hdr-inner {
column-gap: 12px;
}
.hdr-nav a {
padding: 0 5px;
}
.hdr-tel {
font-size: 0.82rem;
letter-spacing: 0.04em;
}
}
/* 1100px以下: よくある質問(8番目)も非表示 */
@media (min-width: 961px) and (max-width: 1100px) {
.hdr {
padding: 0 16px;
}
.hdr-inner {
column-gap: 8px;
}
.hdr-nav a {
padding: 0 5px;
font-size: 0.72rem;
letter-spacing: 0.05em;
}
.hdr-nav a:nth-child(8) {
display: none;
}
.hdr-nav a:nth-child(9)::before {
display: none;
}
}
/* 1000px以下: 最新のお知らせ(9番目)も非表示 */
@media (min-width: 961px) and (max-width: 1000px) {
.hdr {
padding: 0 14px;
}
.hdr-inner {
column-gap: 6px;
}
.hdr-nav a {
padding: 0 3px;
font-size: 0.70rem;
letter-spacing: 0.04em;
}
.hdr-nav a:nth-child(9) {
display: none;
}
.hdr-nav a:nth-child(10)::before {
display: none;
}
}
/* ========================================================================
[LILY-DATA] Nav wrap fix v16 ここまで
======================================================================== */
/* ========================================================================
[LILY-DATA] Phase 4-1: 比較表(一般的なオンライン診療との違い)
2026-04-30 追加
======================================================================== */
.mv5-comparison-lead {
text-align: center;
margin: 0 auto 48px;
max-width: 680px;
color: var(--ink-2);
line-height: 1.9;
}
.mv5-comparison-table {
max-width: 920px;
margin: 0 auto;
border: 1px solid var(--line-2);
background: var(--bg);
overflow: hidden;
}
.mv5-comparison-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1.3fr;
border-bottom: 1px solid var(--line);
}
.mv5-comparison-row:last-child {
border-bottom: none;
}
.mv5-comparison-cell {
padding: 20px 24px;
display: flex;
align-items: center;
font-size: 0.92rem;
line-height: 1.7;
color: var(--ink);
}
.mv5-comparison-cell--label {
font-family: var(--font-jp-serif);
font-weight: 500;
background: var(--bg-2);
border-right: 1px solid var(--line);
color: var(--ink);
}
.mv5-comparison-cell--other {
color: var(--ink-3);
border-right: 1px solid var(--line);
}
.mv5-comparison-cell--lily {
color: var(--ink);
font-weight: 500;
background: rgba(184, 149, 106, 0.06);
}
/* ヘッダー行 */
.mv5-comparison-row--header .mv5-comparison-cell {
font-family: var(--font-jp-serif);
padding: 24px 16px;
font-size: 1rem;
background: var(--bg-2);
border-bottom: 2px solid var(--gold);
text-align: center;
justify-content: center;
}
.mv5-comparison-row--header .mv5-comparison-cell--other {
color: var(--ink-2);
}
.mv5-comparison-row--header .mv5-comparison-cell--lily {
color: var(--gold);
font-weight: 600;
background: rgba(184, 149, 106, 0.1);
letter-spacing: 0.05em;
}
.mv5-comparison-row--header span {
display: block;
text-align: center;
line-height: 1.5;
}
.mv5-comparison-note {
margin: 24px auto 0;
text-align: center;
font-size: 0.78rem;
color: var(--ink-3);
max-width: 720px;
line-height: 1.7;
}
/* SP対応 (860px以下) */
@media (max-width: 860px) {
.mv5-comparison-table {
border: none;
background: transparent;
}
.mv5-comparison-row {
display: block;
border: 1px solid var(--line-2);
margin-bottom: 16px;
background: var(--bg);
}
.mv5-comparison-row:last-child {
margin-bottom: 0;
}
/* SPではヘッダー行は非表示 */
.mv5-comparison-row--header {
display: none;
}
.mv5-comparison-cell {
padding: 14px 18px;
border-right: none !important;
border-bottom: 1px solid var(--line);
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.mv5-comparison-cell:last-child {
border-bottom: none;
}
.mv5-comparison-cell--label {
background: var(--bg-2);
font-weight: 600;
font-size: 0.92rem;
color: var(--ink);
}
/* SPでは各セルに「他社」「Lily」のラベルを擬似要素で表示 */
.mv5-comparison-cell--other::before {
content: '一般的なオンライン診療';
display: block;
font-size: 0.7rem;
color: var(--ink-3);
letter-spacing: 0.08em;
margin-bottom: 4px;
font-family: var(--font-en-label);
}
.mv5-comparison-cell--lily {
background: rgba(184, 149, 106, 0.08);
}
.mv5-comparison-cell--lily::before {
content: 'Lilyの医療提携';
display: block;
font-size: 0.7rem;
color: var(--gold);
letter-spacing: 0.08em;
margin-bottom: 4px;
font-weight: 600;
}
}
/* ========================================================================
[LILY-DATA] Phase 4-1 ここまで
======================================================================== */
/* ========================================================================
[LILY-DATA] Phase 4-2: 安全性チェックリスト強化
2026-04-30 追加
======================================================================== */
.mv5-safety-checklist {
max-width: 880px;
margin: 64px auto 0;
padding: 40px 36px;
background: var(--bg);
border: 1px solid var(--line-2);
}
.mv5-safety-checklist__title {
font-family: var(--font-jp-serif);
font-size: 1.2rem;
color: var(--ink);
text-align: center;
margin: 0 0 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
font-weight: 500;
letter-spacing: 0.05em;
}
.mv5-safety-checklist__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 36px;
}
.mv5-safety-checklist__item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: start;
}
.mv5-safety-checklist__check {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gold);
color: var(--bg);
flex-shrink: 0;
}
.mv5-safety-checklist__check svg {
width: 18px;
height: 18px;
display: block;
}
.mv5-safety-checklist__content {
display: flex;
flex-direction: column;
gap: 4px;
}
.mv5-safety-checklist__label {
font-family: var(--font-jp-serif);
font-size: 0.98rem;
color: var(--ink);
font-weight: 500;
line-height: 1.5;
}
.mv5-safety-checklist__desc {
font-size: 0.82rem;
color: var(--ink-2);
line-height: 1.65;
}
.mv5-safety-checklist__bar {
display: block;
width: 100%;
height: 3px;
background: var(--line);
margin-top: 8px;
overflow: hidden;
}
.mv5-safety-checklist__bar-fill {
display: block;
width: 100%;
height: 100%;
background: var(--gold);
transform: scaleX(0);
transform-origin: left center;
animation: mv5-bar-fill 1.2s cubic-bezier(.22,.7,.2,1) forwards;
}
/* 各項目のアニメーション遅延(順次伸びる) */
.mv5-safety-checklist__item:nth-child(1) .mv5-safety-checklist__bar-fill { animation-delay: 0.0s; }
.mv5-safety-checklist__item:nth-child(2) .mv5-safety-checklist__bar-fill { animation-delay: 0.1s; }
.mv5-safety-checklist__item:nth-child(3) .mv5-safety-checklist__bar-fill { animation-delay: 0.2s; }
.mv5-safety-checklist__item:nth-child(4) .mv5-safety-checklist__bar-fill { animation-delay: 0.3s; }
.mv5-safety-checklist__item:nth-child(5) .mv5-safety-checklist__bar-fill { animation-delay: 0.4s; }
.mv5-safety-checklist__item:nth-child(6) .mv5-safety-checklist__bar-fill { animation-delay: 0.5s; }
@keyframes mv5-bar-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* SP対応 */
@media (max-width: 860px) {
.mv5-safety-checklist {
margin-top: 40px;
padding: 28px 20px;
}
.mv5-safety-checklist__title {
font-size: 1.05rem;
margin-bottom: 24px;
}
.mv5-safety-checklist__list {
grid-template-columns: 1fr;
gap: 22px;
}
.mv5-safety-checklist__item {
grid-template-columns: 28px 1fr;
gap: 12px;
}
.mv5-safety-checklist__check {
width: 28px;
height: 28px;
}
.mv5-safety-checklist__check svg {
width: 16px;
height: 16px;
}
.mv5-safety-checklist__label {
font-size: 0.92rem;
}
.mv5-safety-checklist__desc {
font-size: 0.78rem;
}
}
/* ========================================================================
[LILY-DATA] Phase 4-2 ここまで
======================================================================== */
/* ========================================================================
[LILY-DATA] Phase 4-3 v2: 統計セクション(棒グラフ+円グラフ+レーダー)
2026-04-30 追加
======================================================================== */
.mv5-stats-lead {
text-align: center;
margin: 0 auto 56px;
max-width: 720px;
color: var(--ink-2);
line-height: 1.9;
}
.mv5-stats-section {
max-width: 880px;
margin: 0 auto 80px;
text-align: center;
}
.mv5-stats-block__title {
font-family: var(--font-jp-serif);
font-size: 1.3rem;
color: var(--ink);
margin: 0 0 4px;
font-weight: 500;
letter-spacing: 0.04em;
}
.mv5-stats-block__sub {
font-family: var(--font-en-italic);
font-style: italic;
font-size: 0.95rem;
color: var(--gold);
letter-spacing: 0.12em;
margin: 0 0 36px;
}
.mv5-stats-block__note {
font-size: 0.75rem;
color: var(--ink-3);
margin: 18px 0 0;
line-height: 1.6;
}
/* --- 1. 横棒グラフ --- */
.mv5-stats-bars {
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.mv5-stats-bar {
margin-bottom: 28px;
}
.mv5-stats-bar:last-child {
margin-bottom: 0;
}
.mv5-stats-bar__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
gap: 16px;
}
.mv5-stats-bar__label {
font-family: var(--font-jp-serif);
color: var(--ink);
font-size: 0.95rem;
font-weight: 500;
}
.mv5-stats-bar__pct {
font-family: var(--font-en-italic);
font-style: italic;
color: var(--gold);
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.mv5-stats-bar__pct small {
font-size: 0.7em;
margin-left: 2px;
}
.mv5-stats-bar__track {
width: 100%;
height: 10px;
background: var(--bg-2);
overflow: hidden;
position: relative;
}
.mv5-stats-bar__fill {
display: block;
width: var(--bar-pct, 0);
height: 100%;
background: linear-gradient(90deg, var(--gold) 0%, #B89968 100%);
transform: scaleX(0);
transform-origin: left center;
animation: mv5-bar-grow 1.4s cubic-bezier(.22,.7,.2,1) forwards;
}
/* 順次伸びるアニメーション */
.mv5-stats-bar:nth-child(1) .mv5-stats-bar__fill { animation-delay: 0.1s; }
.mv5-stats-bar:nth-child(2) .mv5-stats-bar__fill { animation-delay: 0.3s; }
.mv5-stats-bar:nth-child(3) .mv5-stats-bar__fill { animation-delay: 0.5s; }
@keyframes mv5-bar-grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.mv5-stats-bars__source {
margin: 28px auto 0;
font-size: 0.72rem;
color: var(--ink-3);
line-height: 1.7;
text-align: left;
max-width: 720px;
}
/* --- 2. 円グラフ + レーダー --- */
.mv5-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
max-width: 980px;
margin: 0 auto;
align-items: start;
}
.mv5-stats-block {
text-align: center;
}
/* 円グラフ */
.mv5-stats-donut {
max-width: 280px;
margin: 0 auto 28px;
}
.mv5-stats-donut svg {
width: 100%;
height: auto;
display: block;
}
.mv5-stats-legend {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 340px;
text-align: left;
}
.mv5-stats-legend li {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 0;
font-size: 0.88rem;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
}
.mv5-stats-legend li:last-child {
border-bottom: none;
}
.mv5-stats-legend__dot {
width: 12px;
height: 12px;
display: block;
flex-shrink: 0;
}
.mv5-stats-legend__label {
font-family: var(--font-jp-serif);
color: var(--ink);
}
.mv5-stats-legend__pct {
font-family: var(--font-en-italic);
font-style: italic;
color: var(--gold);
font-size: 1rem;
font-weight: 500;
}
/* レーダー */
.mv5-stats-radar {
max-width: 320px;
margin: 0 auto 16px;
}
.mv5-stats-radar svg {
width: 100%;
height: auto;
display: block;
}
.mv5-stats-radar-legend {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 340px;
text-align: left;
}
.mv5-stats-radar-legend li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 0.88rem;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
}
.mv5-stats-radar-legend li:last-child {
border-bottom: none;
}
.mv5-stats-radar-legend li > span:first-child {
font-family: var(--font-jp-serif);
color: var(--ink);
}
.mv5-stats-rating {
color: var(--gold);
letter-spacing: 0.18em;
font-size: 0.88rem;
}
/* SP対応 */
@media (max-width: 860px) {
.mv5-stats-lead {
margin-bottom: 40px;
}
.mv5-stats-section {
margin-bottom: 56px;
}
.mv5-stats-block__title {
font-size: 1.15rem;
}
.mv5-stats-block__sub {
margin-bottom: 28px;
}
/* 棒グラフ SP */
.mv5-stats-bar__head {
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 8px;
}
.mv5-stats-bar__label {
font-size: 0.88rem;
}
.mv5-stats-bar__pct {
font-size: 1.4rem;
}
.mv5-stats-bar__track {
height: 8px;
}
.mv5-stats-bars__source {
font-size: 0.68rem;
margin-top: 20px;
}
/* 円グラフ・レーダー SP */
.mv5-stats-grid {
grid-template-columns: 1fr;
gap: 56px;
}
.mv5-stats-donut {
max-width: 240px;
}
.mv5-stats-radar {
max-width: 280px;
}
.mv5-stats-legend,
.mv5-stats-radar-legend {
max-width: 320px;
}
}
/* ========================================================================
[LILY-DATA] Phase 4-3 v2 ここまで
======================================================================== */