/* --- テーマ設定（ソフト・エクリュ） --- */
:root {
--bg-color: #faf9f6; /* オフホワイト（生成り） */
--text-color: #443d35; /* 優しいモカブラウン */
--accent-color: #dcc8c0; /* くすみピンクベージュ */
--accent-dark: #a08878; /* 濃いめのベージュ */
--white: #ffffff;
--font-en: "Cormorant Garamond", serif;
--font-jp: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
--font-num: "Noto Serif JP", "Yu Mincho", "YuMincho", "Times New Roman", serif; /* 数字用 */
--font-sans: "Lato", sans-serif;
}
html { overflow-x: hidden; width: 100%; font-size: 19px; }
body {
margin: 0; padding: 0;
font-family: var(--font-jp);
color: var(--text-color);
background-color: var(--bg-color);
line-height: 2.2; /* 広めの行間でゆったりと */
letter-spacing: 0.08em;
width: 100%;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: 0.4s ease; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- 共通クラス --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 4vw; position: relative; }
.section { padding: 140px 0; }
/* 柔らかい見出し */
.section-title {
font-family: var(--font-en);
font-size: 3.5rem;
text-align: center;
margin-bottom: 60px;
font-weight: 400;
color: var(--text-color);
letter-spacing: 0.03em;
}
.jp-sub {
display: block; font-family: var(--font-jp); font-size: 1.15rem;
letter-spacing: 0.15em; color: #6b5a4c; margin-top: 0;
font-weight: 500;
}
/* 英文タイトルと日本語サブの間の横線 */
.jp-sub::before {
content: ''; display: block; width: 46px; height: 1px;
background: var(--accent-dark); margin: 18px auto 16px;
}
.section-title[style*="text-align:left"] .jp-sub::before { margin-left: 0; }
/* =====================================================
Glass Shader ボタン共通（switcher CSS ベース）
===================================================== */
/* btn-soft / btn-line 共通 glass shader */
:is(.btn-soft, .btn-line) {
display: inline-block;
border: none;
border-radius: 50px;
font-family: var(--font-sans);
text-align: center;
text-decoration: none;
cursor: pointer;
--bg-glass: #5a544b;
--bg-light: #ffffff;
--bg-dark: #3a342d;
--bg-rx-l: 1;
--bg-rx-d: 1;
--bg-sat: 160%;
background-color: color-mix(in srgb, var(--bg-glass) 22%, transparent);
backdrop-filter: blur(8px) saturate(var(--bg-sat));
-webkit-backdrop-filter: blur(8px) saturate(var(--bg-sat));
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
box-shadow:
inset 0 0 0 1px
color-mix(in srgb, var(--bg-light) calc(var(--bg-rx-l) * 10%), transparent),
inset 1.8px 3px 0px -2px
color-mix(in srgb, var(--bg-light) calc(var(--bg-rx-l) * 90%), transparent),
inset -2px -2px 0px -2px
color-mix(in srgb, var(--bg-light) calc(var(--bg-rx-l) * 80%), transparent),
inset -3px -8px 1px -6px
color-mix(in srgb, var(--bg-light) calc(var(--bg-rx-l) * 60%), transparent),
inset -0.3px -1px 4px 0px
color-mix(in srgb, var(--bg-dark) calc(var(--bg-rx-d) * 12%), transparent),
inset -1.5px 2.5px 0px -2px
color-mix(in srgb, var(--bg-dark) calc(var(--bg-rx-d) * 20%), transparent),
inset 0px 3px 4px -2px
color-mix(in srgb, var(--bg-dark) calc(var(--bg-rx-d) * 20%), transparent),
inset 2px -6.5px 1px -4px
color-mix(in srgb, var(--bg-dark) calc(var(--bg-rx-d) * 10%), transparent),
0px 1px 5px 0px
color-mix(in srgb, var(--bg-dark) calc(var(--bg-rx-d) * 10%), transparent),
0px 6px 16px 0px
color-mix(in srgb, var(--bg-dark) calc(var(--bg-rx-d) * 8%), transparent);
}
:is(.btn-soft, .btn-line):hover {
background-color: color-mix(in srgb, var(--bg-glass) 40%, transparent);
transform: translateY(-2px);
}
/* btn-solid: 完全独立 dark glass */
.btn-solid {
display: inline-block;
border: none;
border-radius: 50px;
font-family: var(--font-sans);
text-align: center;
text-decoration: none;
cursor: pointer;
color: #fff;
position: relative;
padding: 12px 24px;
font-size: 0.8rem; letter-spacing: 0.12em;
--gl-angle-1: -75deg;
background: linear-gradient(-75deg,
rgba(14,11,9,0.88), rgba(32,26,20,0.78), rgba(14,11,9,0.88));
backdrop-filter: blur(clamp(1px, 0.125em, 4px));
-webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
box-shadow:
inset 0 0.125em 0.125em rgba(255,255,255,0.08),
inset 0 -0.125em 0.125em rgba(0,0,0,0.35),
0 0.25em 0.125em -0.125em rgba(0,0,0,0.4),
0 0 0.1em 0.25em inset rgba(255,255,255,0.04);
transition: all 400ms cubic-bezier(0.25,1,0.5,1);
}
.btn-solid:hover {
transform: scale(0.975);
background: linear-gradient(-75deg,
rgba(14,11,9,0.96), rgba(32,26,20,0.90), rgba(14,11,9,0.96));
box-shadow:
inset 0 0.125em 0.125em rgba(255,255,255,0.08),
inset 0 -0.125em 0.125em rgba(0,0,0,0.35),
0 0.15em 0.05em -0.1em rgba(0,0,0,0.45),
0 0 0.05em 0.1em inset rgba(255,255,255,0.08);
}
.btn-solid::after {
content: ""; position: absolute; z-index: 1; inset: 0;
border-radius: 50px;
width: calc(100% + 1px); height: calc(100% + 1px);
top: -0.5px; left: -0.5px;
padding: 1px; box-sizing: border-box;
background:
conic-gradient(from var(--gl-angle-1) at 50% 50%,
rgba(255,255,255,0.6),
rgba(255,255,255,0) 5% 40%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 60% 95%,
rgba(255,255,255,0.6)),
linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
transition: --gl-angle-1 500ms ease;
pointer-events: none;
}
.btn-solid:hover::after { --gl-angle-1: -125deg; }
.btn-solid:active::after { --gl-angle-1: -75deg; }
/* btn-soft: アクセントベージュ (#dcc8c0) ・ピル形 */
.btn-soft {
padding: 15px 50px;
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--text-color);
--bg-glass: #dcc8c0;
--bg-dark: #5a544b;
--bg-rx-l: 1.2;
--bg-rx-d: 0.8;
}
/* --- 背景のあしらい（ふわっとした円） --- */
.bg-circle {
position: absolute; border-radius: 50%;
background: radial-gradient(circle, rgba(220,200,192,0.3) 0%, rgba(250,249,246,0) 70%);
z-index: -1; pointer-events: none;
}
/* === ロゴ：左上に独立固定 === */
.logo-wrap {
position: fixed; top: 18px; left: 30px;
z-index: 1000; display: block; line-height: 0;
}
.logo-wrap img {
height: 64px; width: auto; display: block;
filter: drop-shadow(0 2px 10px rgba(90,84,75,0.12));
}
.logo-primary { position: relative; }
.logo-secondary { position: absolute; top: 0; left: 0; opacity: 0; }
/* === ナビゲーション：右上に独立・カプセル型（glass shader） === */
.nav-bar {
position: fixed; top: 22px; right: 30px;
z-index: 1000;
display: flex; align-items: center; gap: 20px;
padding: 12px 30px;
border-radius: 50px;
border: none;
font-family: var(--font-sans); font-size: 0.75rem;
letter-spacing: 0.13em; color: var(--text-color);
transition: background-color 0.4s, box-shadow 0.4s;
/* --- glass shader variables (サイトカラーに合わせて調整) --- */
--nav-glass: #dcc8c0;
--nav-light: #ffffff;
--nav-dark: #5a544b;
--nav-rx-l: 1; /* reflex light */
--nav-rx-d: 1; /* reflex dark */
--nav-sat: 150%;
background-color: color-mix(in srgb, var(--nav-glass) 14%, transparent);
backdrop-filter: blur(8px) saturate(var(--nav-sat));
-webkit-backdrop-filter: blur(8px) saturate(var(--nav-sat));
box-shadow:
/* outer rim */
inset 0 0 0 1px
color-mix(in srgb, var(--nav-light) calc(var(--nav-rx-l) * 10%), transparent),
/* top-left highlight */
inset 1.8px 3px 0px -2px
color-mix(in srgb, var(--nav-light) calc(var(--nav-rx-l) * 90%), transparent),
/* right-bottom highlight */
inset -2px -2px 0px -2px
color-mix(in srgb, var(--nav-light) calc(var(--nav-rx-l) * 80%), transparent),
inset -3px -8px 1px -6px
color-mix(in srgb, var(--nav-light) calc(var(--nav-rx-l) * 60%), transparent),
/* inner shadow (dark) */
inset -0.3px -1px 4px 0px
color-mix(in srgb, var(--nav-dark) calc(var(--nav-rx-d) * 12%), transparent),
inset -1.5px 2.5px 0px -2px
color-mix(in srgb, var(--nav-dark) calc(var(--nav-rx-d) * 20%), transparent),
inset 0px 3px 4px -2px
color-mix(in srgb, var(--nav-dark) calc(var(--nav-rx-d) * 20%), transparent),
inset 2px -6.5px 1px -4px
color-mix(in srgb, var(--nav-dark) calc(var(--nav-rx-d) * 10%), transparent),
/* drop shadow */
0px 1px 5px 0px
color-mix(in srgb, var(--nav-dark) calc(var(--nav-rx-d) * 10%), transparent),
0px 6px 16px 0px
color-mix(in srgb, var(--nav-dark) calc(var(--nav-rx-d) * 8%), transparent);
}
.nav-bar a { position: relative; white-space: nowrap; transition: color 0.3s; }
.nav-bar a::after {
content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
width: 0; height: 1px; background: var(--accent-dark); transition: width 0.3s;
}
.nav-bar a:hover { color: var(--accent-dark); }
.nav-bar a:hover::after { width: 80%; }
.nav-contact-btn {
color: #fff !important;
padding: 7px 18px; border-radius: 30px;
font-size: 0.72rem; letter-spacing: 0.13em;
flex-shrink: 0; position: relative; z-index: 1;
--gl-angle-1: -75deg;
background: linear-gradient(-75deg,
rgba(14,11,9,0.88), rgba(32,26,20,0.78), rgba(14,11,9,0.88));
backdrop-filter: blur(clamp(1px, 0.125em, 4px));
-webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
box-shadow:
inset 0 0.125em 0.125em rgba(255,255,255,0.08),
inset 0 -0.125em 0.125em rgba(0,0,0,0.35),
0 0.25em 0.125em -0.125em rgba(0,0,0,0.4),
0 0 0.1em 0.25em inset rgba(255,255,255,0.04);
transition: all 400ms cubic-bezier(0.25,1,0.5,1);
}
.nav-contact-btn:hover {
color: #fff !important;
transform: scale(0.975);
background: linear-gradient(-75deg,
rgba(14,11,9,0.96), rgba(32,26,20,0.90), rgba(14,11,9,0.96));
}
.nav-contact-btn::after {
content: ""; position: absolute; z-index: 1; inset: 0;
border-radius: 30px;
width: calc(100% + 1px); height: calc(100% + 1px);
top: -0.5px; left: -0.5px;
padding: 1px; box-sizing: border-box;
background:
conic-gradient(from var(--gl-angle-1) at 50% 50%,
rgba(255,255,255,0.6),
rgba(255,255,255,0) 5% 40%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 60% 95%,
rgba(255,255,255,0.6)),
linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
transition: --gl-angle-1 500ms ease;
pointer-events: none;
}
.nav-contact-btn:hover::after { --gl-angle-1: -125deg; }
/* === ハンバーガー（モバイルのみ表示） === */
.hamburger {
display: none;
position: fixed; top: 18px; right: 24px;
z-index: 1002; cursor: pointer;
background: rgba(250,249,246,0.95); backdrop-filter: blur(10px);
border: 1px solid rgba(220,200,192,0.6);
box-shadow: 0 4px 14px rgba(90,84,75,0.18);
border-radius: 50%; padding: 15px;
flex-direction: column; gap: 5px; align-items: center;
transition: background 0.3s, box-shadow 0.3s;
}
.hamburger span {
display: block; width: 22px; height: 2px; border-radius: 2px;
background: var(--text-color);
transition: transform 0.35s ease, opacity 0.3s ease;
}
.hamburger.active { background: rgba(46,40,34,0.95); border-color: rgba(220,200,192,0.4); }
.hamburger.active span { background: #faf9f6; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- Hero --- */
.hero {
height: 90vh; position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.hero-img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: url('../img/hero-top.webp') no-repeat center/cover;
opacity: 0; animation: fadeZoom 3s ease forwards;
z-index: -2;
}
/* 画像の上に薄い白いヴェールをかける */
.hero::after { display: none; }
@keyframes fadeZoom {
0% { opacity: 0; transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
.hero-content {
text-align: center; position: relative; z-index: 1;
padding: 50px 60px;
border-radius: 16px;
max-width: 760px;
animation: slideUp 1.5s ease;
--hc-glass: #f5f0ec;
--hc-light: #ffffff;
--hc-dark: #5a544b;
--hc-rx-l: 1.2;
--hc-rx-d: 0.6;
background-color: color-mix(in srgb, var(--hc-glass) 38%, transparent);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
box-shadow:
inset 0 0 0 1px
color-mix(in srgb, var(--hc-light) calc(var(--hc-rx-l) * 10%), transparent),
inset 1.8px 3px 0px -2px
color-mix(in srgb, var(--hc-light) calc(var(--hc-rx-l) * 90%), transparent),
inset -2px -2px 0px -2px
color-mix(in srgb, var(--hc-light) calc(var(--hc-rx-l) * 80%), transparent),
inset -3px -8px 1px -6px
color-mix(in srgb, var(--hc-light) calc(var(--hc-rx-l) * 60%), transparent),
inset -0.3px -1px 4px 0px
color-mix(in srgb, var(--hc-dark) calc(var(--hc-rx-d) * 12%), transparent),
inset -1.5px 2.5px 0px -2px
color-mix(in srgb, var(--hc-dark) calc(var(--hc-rx-d) * 20%), transparent),
inset 0px 3px 4px -2px
color-mix(in srgb, var(--hc-dark) calc(var(--hc-rx-d) * 20%), transparent),
inset 2px -6.5px 1px -4px
color-mix(in srgb, var(--hc-dark) calc(var(--hc-rx-d) * 10%), transparent),
0px 1px 5px 0px
color-mix(in srgb, var(--hc-dark) calc(var(--hc-rx-d) * 10%), transparent),
0px 6px 16px 0px
color-mix(in srgb, var(--hc-dark) calc(var(--hc-rx-d) * 8%), transparent);
}
/* hero右下ブランディング */
.hero-brand {
position: absolute; bottom: -130px; right: 0px;
text-align: right; z-index: 2;
}
.hero-brand-main {
display: block;
/* ロゴ画像のサイズ（front-page.php のインライン style から移動。
インラインのままだとメディアクエリで上書きできないため） */
height: 420px; width: auto;
margin-left: auto; opacity: 0.8;
}
.hero-brand-sub {
display: block;
font-family: var(--font-sans);
font-size: 0.78rem; letter-spacing: 0.22em;
color: rgba(255,255,255,0.82);
margin-top: 10px; text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* hero下部タグライン（Numbersセクション直上） */
.hero-tagline {
text-align: center; padding: 70px 0 20px;
font-family: var(--font-jp); font-size: 1.9rem;
font-weight: 500; letter-spacing: 0.08em;
color: var(--text-color);
}
.hero-tagline em {
font-style: normal;
background: linear-gradient(transparent 60%, rgba(220,200,192,0.5) 60%);
}
/* ヒーロー直下のリード領域（旧: front-page.php のインライン style）。
メディアクエリで余白を調整できるようクラス化した。 */
.hero-lead {
display: flex; flex-direction: column; align-items: center;
padding: 60px 4vw 80px;
}
.hero-lead .hero-tagline { padding: 0; margin-bottom: 30px; }
.hero-sub {
font-size: 0.88rem; color: #222; line-height: 2.3;
max-width: 780px; margin: 0 auto;
}
/* --- Company (画像とテキストを柔らかく配置) --- */
.company-wrapper {
display: flex; align-items: center; gap: 60px;
}
.company-img {
flex: 1; height: 500px;
border-radius: 200px 200px 20px 20px; /* アーチ型に切り抜き */
overflow: hidden; box-shadow: 20px 20px 0px rgba(220, 200, 192, 0.3);
}
.company-text { flex: 1; }
.company-msg {
font-size: 1.8rem; margin-bottom: 30px; font-weight: 500;
}
/* --- Products (丸みのあるカード) --- */
.product-cards {
display: flex; gap: 24px; justify-content: center; flex-wrap: nowrap;
}
.product-item {
flex: 1; min-width: 0; background: #fff; border-radius: 20px;
overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: 0.4s; cursor: pointer;
}
.product-item:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }
.prod-img { height: 250px; }
.prod-img img { transition: 0.6s; }
.product-item:hover .prod-img img { transform: scale(1.1); }
.prod-info { padding: 24px; text-align: left; }
.prod-name { font-family: var(--font-en); font-size: 1.65rem; color: var(--text-color); margin-bottom: 10px; display:flex; align-items:baseline; gap:8px; }
.prod-num { font-family: var(--font-en); font-size: 0.95rem; color: var(--accent-dark); letter-spacing: 0.08em; }
.prod-desc { font-size: 0.82rem; color: #222; line-height: 1.9; margin-bottom: 0; }
.prod-link { font-size: 0.8rem; border-bottom: 1px solid var(--accent-color); padding-bottom: 2px; }
/* --- Training (波型背景) --- */
.training-section {
background: #fdfcfb; position: relative; padding-top: 100px;
}
/* 上部の波線 */
.wave-top {
position: absolute; top: -50px; left: 0; width: 100%; height: 100px;
background: url('data:image/svg+xml;utf8,');
background-size: cover; background-repeat: no-repeat;
}
.training-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.train-content h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--text-color); }
.train-content p { color: #222; margin-bottom: 30px; }
.train-img {
height: 400px; border-radius: 20px; overflow: hidden;
position: relative;
}
.train-img::before {
content:''; position: absolute; top:20px; left:-20px; width:100%; height:100%;
border: 1px solid var(--accent-color); border-radius: 20px; z-index: -1;
}
/* --- Franchise (パララックス風) --- */
.fc-section {
padding: 160px 0; text-align: center;
background: url('https://placehold.co/1920x800/dcc8c0/fff?text=Partnership') no-repeat center/cover;
background-attachment: fixed; position: relative;
}
.fc-section::before {
content:''; position: absolute; top:0; left:0; width:100%; height:100%;
background: rgba(255,255,255,0.7);
}
.fc-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.fc-title { font-family: var(--font-en); font-size: 3rem; margin-bottom: 30px; }
/* --- Footer --- */
footer {
background: #fdfcfb; padding: 100px 0 40px; text-align: center;
border-top: 1px solid #eee;
}
.footer-logo { width: 120px; margin: 0 auto 40px; opacity: 0.8; }
.footer-nav {
display: flex; justify-content: center; gap: 40px; margin-bottom: 40px;
font-family: var(--font-en); font-size: 0.9rem; color: #222;
}
.footer-nav a:hover { color: var(--accent-dark); }
.copyright { font-size: 0.75rem; color: #222; }
/* --- Company Table --- */
.company-table {
width: 100%; border-collapse: collapse; margin-top: 30px;
font-size: 0.88rem;
}
.company-table th, .company-table td {
padding: 12px 16px; border-bottom: 1px solid rgba(220,200,192,0.4);
text-align: left; vertical-align: top; line-height: 1.8;
}
.company-table th {
color: var(--accent-dark); font-family: var(--font-sans);
font-weight: 400; letter-spacing: 0.1em; white-space: nowrap;
width: 110px;
}
.company-table td { color: var(--text-color); }
/* --- Numbers Section --- */
.numbers-section {
background: linear-gradient(135deg, #fdfcfb 0%, #f5f1ee 100%);
position: relative; overflow: hidden;
}
.numbers-section::before {
content: ''; position: absolute; top: -200px; right: -200px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(220,200,192,0.2) 0%, transparent 70%);
}
.numbers-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
max-width: 960px; margin: 0 auto;
}
.number-item {
text-align: center; padding: 36px 20px 32px;
background: #fff; border-radius: 20px;
box-shadow: 0 8px 30px rgba(0,0,0,0.04);
position: relative; overflow: hidden;
}
.num-value {
display: flex; align-items: center; justify-content: center;
font-family: var(--font-num); font-size: 3rem;
font-weight: 400; color: var(--text-color); line-height: 1.1;
letter-spacing: 0.01em;
min-height: 68px;
border-bottom: 1px solid rgba(220,200,192,0.6);
padding-bottom: 14px; margin-bottom: 18px;
}
.num-value small { font-size: 1.1rem; font-weight: 400; align-self: flex-end; padding-bottom: 8px; }
/* アイコン＋ラベルの横並び行 */
.num-head {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-bottom: 10px;
}
/* 縦積み（アイコン中央・文字下） */
.num-head-stack { flex-direction: column; gap: 14px; }
.num-icon {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(220,200,192,0.3);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.num-icon svg {
width: 20px; height: 20px; display: block;
fill: none; stroke: var(--accent-dark);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* 「主要取引先」カード：数字ではなく見出し文字なので別指定。
.num-value より詳細度を高くして、ファイル後半の固定 54px に負けないようにする。 */
.number-item .num-value-text {
font-family: var(--font-jp); font-size: 26px; font-weight: 500;
}
.num-partners {
display: block; font-family: var(--font-jp); font-size: 0.9rem;
color: var(--text-color); line-height: 2.1;
}
.num-label {
display: block; font-family: var(--font-jp); font-size: 0.95rem;
font-weight: 500; letter-spacing: 0.08em; color: #6b5a4c;
}
.num-sub { display: block; font-size: 0.78rem; color: #666; line-height: 1.8; }
/* --- Strengths Section --- */
.strengths-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px;
}
.strength-item {
padding: 45px 35px; background: #fff; border-radius: 20px;
box-shadow: 0 8px 30px rgba(0,0,0,0.03);
transition: 0.4s; position: relative;
}
.strength-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0,0,0,0.07);
}
.strength-num {
font-family: var(--font-en); font-size: 4rem; font-weight: 300;
color: rgba(160,136,120,0.7); line-height: 1; margin-bottom: 20px;
letter-spacing: -0.02em;
}
.strength-item h3 {
font-size: 1.25rem; margin-bottom: 15px; color: var(--text-color);
font-weight: 500; line-height: 1.7;
}
.strength-item p {
font-size: 0.85rem; color: #222; line-height: 2.2;
}
/* --- Services Section --- */
.services-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
/* === Hero Glass Panel === */
@property --gl-hero-angle {
syntax: ""; inherits: false; initial-value: -75deg;
}
@keyframes gl-hero-rotate {
from { --gl-hero-angle: -75deg; }
to { --gl-hero-angle: 285deg; }
}
@keyframes gl-hero-fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.hero-glass-panel {
position: absolute; inset: 0;
z-index: 3;
pointer-events: none;
background: transparent;
animation: gl-hero-fade-in 3.5s ease forwards;
}
/* エッジのみ強めの屈折ブラー */
.hero-glass-panel::before {
content: ""; position: absolute; inset: 0;
--edge: 90px;
backdrop-filter: blur(12px) saturate(200%) brightness(1.06);
-webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.06);
/* 上下左右の端だけ表示、中央は透明 */
mask:
linear-gradient(to bottom, #000 var(--edge), transparent var(--edge)),
linear-gradient(to top, #000 var(--edge), transparent var(--edge)),
linear-gradient(to right, #000 var(--edge), transparent var(--edge)),
linear-gradient(to left, #000 var(--edge), transparent var(--edge));
mask-composite: add;
-webkit-mask-composite: source-over;
pointer-events: none;
}
/* 光の回転ボーダー */
.hero-glass-panel::after {
content: ""; position: absolute; inset: 0;
padding: 2px; box-sizing: border-box;
background:
conic-gradient(from var(--gl-hero-angle) at 50% 50%,
rgba(255,255,255,0.7),
rgba(255,255,255,0) 5% 42%,
rgba(255,255,255,0.7) 50%,
rgba(255,255,255,0) 58% 95%,
rgba(255,255,255,0.7)),
linear-gradient(180deg,
rgba(255,255,255,0.35),
rgba(255,255,255,0.12));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask-composite: destination-out;
animation: gl-hero-rotate 12s linear infinite;
pointer-events: none;
}
/* === GL Button（オーバーレイ移動ボタン） === */
@property --gl-angle-1 {
syntax: ""; inherits: false; initial-value: -75deg;
}
@property --gl-angle-2 {
syntax: ""; inherits: false; initial-value: -45deg;
}
.gl-wrap {
position: relative; display: block;
border-radius: 999vw; background: transparent;
pointer-events: none; font-size: 0.78rem;
transition: all 400ms cubic-bezier(0.25,1,0.5,1);
}
.gl-shadow {
--shadow-cuttoff-fix: 2em;
position: absolute;
width: calc(100% + var(--shadow-cuttoff-fix));
height: calc(100% + var(--shadow-cuttoff-fix));
top: calc(0% - var(--shadow-cuttoff-fix) / 2);
left: calc(0% - var(--shadow-cuttoff-fix) / 2);
filter: blur(clamp(2px, 0.125em, 12px));
overflow: visible; pointer-events: none;
}
.gl-shadow::after {
content: ""; position: absolute; z-index: 0; inset: 0;
border-radius: 999vw;
background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
top: calc(var(--shadow-cuttoff-fix) - 0.5em);
left: calc(var(--shadow-cuttoff-fix) - 0.875em);
padding: 0.125em; box-sizing: border-box;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
transition: all 400ms cubic-bezier(0.25,1,0.5,1);
overflow: visible; opacity: 1;
}
.gl-wrap button {
--border-width: clamp(1px, 0.0625em, 4px);
all: unset; cursor: pointer; position: relative;
display: block; width: 100%; box-sizing: border-box; text-align: center;
-webkit-tap-highlight-color: rgba(0,0,0,0);
pointer-events: auto; z-index: 3;
background: linear-gradient(-75deg,
rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
border-radius: 999vw;
box-shadow:
inset 0 0.125em 0.125em rgba(0,0,0,0.05),
inset 0 -0.125em 0.125em rgba(255,255,255,0.5),
0 0.25em 0.125em -0.125em rgba(0,0,0,0.2),
0 0 0.1em 0.25em inset rgba(255,255,255,0.2),
0 0 0 0 rgba(255,255,255,1);
backdrop-filter: blur(clamp(1px, 0.125em, 4px));
-webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
transition: all 400ms cubic-bezier(0.25,1,0.5,1);
}
.gl-wrap button:hover {
transform: scale(0.975);
backdrop-filter: blur(0.01em);
-webkit-backdrop-filter: blur(0.01em);
box-shadow:
inset 0 0.125em 0.125em rgba(0,0,0,0.05),
inset 0 -0.125em 0.125em rgba(255,255,255,0.5),
0 0.15em 0.05em -0.1em rgba(0,0,0,0.25),
0 0 0.05em 0.1em inset rgba(255,255,255,0.5),
0 0 0 0 rgba(255,255,255,1);
}
.gl-wrap button span {
position: relative; display: block; user-select: none;
font-family: var(--font-sans); letter-spacing: 0.1em;
font-weight: 400; font-size: 1em; color: var(--text-color);
text-shadow: 0em 0.25em 0.05em rgba(0,0,0,0.1);
transition: all 400ms cubic-bezier(0.25,1,0.5,1);
padding-inline: 1.5em; padding-block: 0.875em;
}
.gl-wrap button:hover span {
text-shadow: 0.025em 0.025em 0.025em rgba(0,0,0,0.12);
}
.gl-wrap button span::after {
content: ""; display: block; position: absolute;
width: calc(100% - var(--border-width));
height: calc(100% - var(--border-width));
top: calc(0% + var(--border-width) / 2);
left: calc(0% + var(--border-width) / 2);
box-sizing: border-box; border-radius: 999vw; overflow: clip;
background: linear-gradient(var(--gl-angle-2),
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.5) 40% 50%,
rgba(255,255,255,0) 55%);
z-index: 3; mix-blend-mode: screen; pointer-events: none;
background-size: 200% 200%; background-position: 0% 50%;
background-repeat: no-repeat;
transition:
background-position 500ms cubic-bezier(0.25,1,0.5,1),
--gl-angle-2 500ms cubic-bezier(0.25,1,0.5,1);
}
.gl-wrap button:hover span::after { background-position: 25% 50%; }
.gl-wrap button:active span::after { background-position: 50% 15%; --gl-angle-2: -15deg; }
.gl-wrap button::after {
content: ""; position: absolute; z-index: 1; inset: 0;
border-radius: 999vw;
width: calc(100% + var(--border-width));
height: calc(100% + var(--border-width));
top: calc(0% - var(--border-width) / 2);
left: calc(0% - var(--border-width) / 2);
padding: var(--border-width); box-sizing: border-box;
background:
conic-gradient(from var(--gl-angle-1) at 50% 50%,
rgba(0,0,0,0.5),
rgba(0,0,0,0) 5% 40%,
rgba(0,0,0,0.5) 50%,
rgba(0,0,0,0) 60% 95%,
rgba(0,0,0,0.5)),
linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
transition: all 400ms cubic-bezier(0.25,1,0.5,1), --gl-angle-1 500ms ease;
box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,0.5);
}
.gl-wrap button:hover::after { --gl-angle-1: -125deg; }
.gl-wrap button:active::after { --gl-angle-1: -75deg; }
.gl-wrap:has(button:hover) .gl-shadow {
filter: blur(clamp(2px, 0.0625em, 6px));
transition: filter 400ms cubic-bezier(0.25,1,0.5,1);
}
.gl-wrap:has(button:hover) .gl-shadow::after {
top: calc(var(--shadow-cuttoff-fix) - 0.875em); opacity: 1;
}
.gl-wrap:has(button:active) { transform: rotate3d(1,0,0,25deg); }
.gl-wrap:has(button:active) button {
box-shadow:
inset 0 0.125em 0.125em rgba(0,0,0,0.05),
inset 0 -0.125em 0.125em rgba(255,255,255,0.5),
0 0.125em 0.125em -0.125em rgba(0,0,0,0.2),
0 0 0.1em 0.25em inset rgba(255,255,255,0.2),
0 0.225em 0.05em 0 rgba(0,0,0,0.05),
0 0.25em 0 0 rgba(255,255,255,0.75),
inset 0 0.25em 0.05em 0 rgba(0,0,0,0.15);
}
.gl-wrap:has(button:active) .gl-shadow {
filter: blur(clamp(2px, 0.125em, 12px));
}
.gl-wrap:has(button:active) .gl-shadow::after {
top: calc(var(--shadow-cuttoff-fix) - 0.5em); opacity: 0.75;
}
.gl-wrap:has(button:active) span {
text-shadow: 0.025em 0.25em 0.05em rgba(0,0,0,0.12);
}
/* =====================================================
.gl-dark — dark glass modifier（白文字・ダークグラス）
===================================================== */
.gl-wrap.gl-dark button {
background: linear-gradient(-75deg,
rgba(14,11,9,0.88), rgba(32,26,20,0.78), rgba(14,11,9,0.88));
box-shadow:
inset 0 0.125em 0.125em rgba(255,255,255,0.08),
inset 0 -0.125em 0.125em rgba(0,0,0,0.35),
0 0.25em 0.125em -0.125em rgba(0,0,0,0.4),
0 0 0.1em 0.25em inset rgba(255,255,255,0.04),
0 0 0 0 rgba(255,255,255,1);
}
.gl-wrap.gl-dark button:hover {
background: linear-gradient(-75deg,
rgba(14,11,9,0.96), rgba(32,26,20,0.90), rgba(14,11,9,0.96));
box-shadow:
inset 0 0.125em 0.125em rgba(255,255,255,0.08),
inset 0 -0.125em 0.125em rgba(0,0,0,0.35),
0 0.15em 0.05em -0.1em rgba(0,0,0,0.45),
0 0 0.05em 0.1em inset rgba(255,255,255,0.08),
0 0 0 0 rgba(255,255,255,1);
}
.gl-wrap.gl-dark button span {
color: #fff;
text-shadow: 0em 0.25em 0.05em rgba(0,0,0,0.3);
}
.gl-wrap.gl-dark button::after {
background:
conic-gradient(from var(--gl-angle-1) at 50% 50%,
rgba(255,255,255,0.6),
rgba(255,255,255,0) 5% 40%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 60% 95%,
rgba(255,255,255,0.6)),
linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,0.5);
}
.gl-wrap.gl-dark:has(button:active) button {
box-shadow:
inset 0 0.125em 0.125em rgba(255,255,255,0.08),
inset 0 -0.125em 0.125em rgba(0,0,0,0.35),
0 0.125em 0.125em -0.125em rgba(0,0,0,0.4),
0 0 0.1em 0.25em inset rgba(255,255,255,0.04),
0 0.225em 0.05em 0 rgba(0,0,0,0.05),
0 0.25em 0 0 rgba(0,0,0,0.35),
inset 0 0.25em 0.05em 0 rgba(0,0,0,0.25);
}
/* === Service Card — アニメーションボーダー === */
@property --sc-angle {
syntax: "";
initial-value: 0turn;
inherits: false;
}
@keyframes sc-rotate {
to { --sc-angle: 1turn; }
}
.service-card {
border-radius: 20px;
padding: 45px 35px 35px; display: flex; flex-direction: column;
transition: transform 0.4s, box-shadow 0.4s;
/* アニメーション回転ボーダー */
animation: sc-rotate 6s linear infinite;
border: 2px solid transparent;
background-image:
linear-gradient(#fff, #fff),
conic-gradient(
from var(--sc-angle),
#e8d8d0 0%,
#dcc8c0 20%,
#f5ede9 30%,
#fff 35%,
#e0ccc5 40%,
#bfa69a 50%,
#dcc8c0 70%,
#f5ede9 78%,
#fff 82%,
#dcc8c0 87%,
#e8d8d0 100%
);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(191,166,154,0.18);
}
.service-card-num {
font-family: var(--font-en); font-size: 1.1rem; letter-spacing: 0.2em;
color: #8f7160; margin-bottom: 20px;
display: flex; align-items: center; gap: 12px;
}
.service-card-num::after {
content: ''; flex: 1; height: 1px; background: var(--accent-color);
}
.service-card h3 {
font-size: 1.3rem; font-weight: 500; margin-bottom: 18px;
color: var(--text-color); line-height: 1.7;
}
.service-card p {
font-size: 0.85rem; color: #222; line-height: 2.3; flex: 1;
margin-bottom: 30px;
}
.service-card-btns {
display: flex; flex-direction: column; gap: 10px;
}
/* btn-line: アクセントベージュ (#dcc8c0) */
.btn-line {
padding: 10px 24px;
font-size: 0.78rem; letter-spacing: 0.1em;
color: var(--text-color);
--bg-glass: #dcc8c0;
--bg-dark: #5a544b;
--bg-rx-l: 1.2;
--bg-rx-d: 0.8;
}
/* --- Process Section --- */
.process-section { background: linear-gradient(135deg, #fdfcfb 0%, #f5f1ee 100%); }
.process-steps {
display: flex; gap: 0; position: relative; max-width: 960px; margin: 0 auto;
align-items: flex-start;
}
.process-steps::before {
content: ''; position: absolute;
top: 28px; left: 10%; right: 10%; height: 1px;
background: linear-gradient(to right, var(--accent-color), var(--accent-dark), var(--accent-color));
z-index: 0;
}
.process-step {
flex: 1; text-align: center; padding: 0 10px; position: relative; z-index: 1;
}
.ps-num {
width: 56px; height: 56px; border-radius: 50%;
background: #fff; border: 2px solid var(--accent-color);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
font-family: var(--font-en); font-size: 1.1rem; color: var(--accent-dark);
box-shadow: 0 4px 15px rgba(220,200,192,0.3);
}
.ps-title {
font-size: 0.85rem; font-weight: 500; color: var(--text-color);
margin-bottom: 8px; line-height: 1.6;
}
.ps-desc { font-size: 0.78rem; color: #222; line-height: 1.9; }
/* --- CTA Section --- */
.cta-section {
padding: 120px 0; text-align: center;
background: url('../img/bg-contact.webp') no-repeat center/cover,
url('../img/bg-services.webp') no-repeat center/cover;
background-attachment: fixed, fixed; position: relative;
}
.cta-section::before {
content:''; position: absolute; top:0; left:0; width:100%; height:100%;
background: rgba(250,249,246,0.50);
}
.cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; padding: 0 4vw; }
.cta-btns {
display: flex; flex-direction: column; gap: 16px;
max-width: 420px; margin: 0 auto;
}
@media (max-width: 768px) {
.services-grid { grid-template-columns: 1fr; }
.process-steps { flex-direction: column; gap: 30px; align-items: center; }
.process-steps::before { display: none; }
.process-step { width: 100%; max-width: 300px; }
}
/* --- FAQ Section --- */
.faq-section { background: #faf9f6; }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid rgba(220,200,192,0.5);
}
.faq-item:first-child { border-top: 1px solid rgba(220,200,192,0.5); }
.faq-item summary {
padding: 22px 6px;
cursor: pointer;
list-style: none;
display: flex; align-items: flex-start; gap: 16px;
font-size: 0.9rem; font-weight: 500;
color: var(--text-color);
transition: color 0.3s;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--accent-dark); }
.faq-q-label {
font-family: var(--font-en); color: var(--accent-dark);
font-size: 1rem; flex-shrink: 0; line-height: 1.7; font-weight: 400;
}
.faq-item[open] .faq-q-label { color: var(--accent-dark); }
.faq-toggle {
margin-left: auto; width: 22px; height: 22px;
flex-shrink: 0; position: relative; margin-top: 2px;
}
.faq-toggle::before, .faq-toggle::after {
content: ''; position: absolute;
background: var(--accent-dark); border-radius: 1px; transition: 0.35s ease;
}
.faq-toggle::before { width: 1px; height: 14px; top: 4px; left: 10px; }
.faq-toggle::after { width: 14px; height: 1px; top: 10px; left: 4px; }
.faq-item[open] .faq-toggle::before { transform: rotate(90deg); opacity: 0; }
.faq-ans {
padding: 4px 6px 26px 42px;
font-size: 0.875rem; color: #222; line-height: 2.4;
}
.faq-ans ol {
margin: 10px 0 0; padding-left: 1.4em;
}
.faq-ans li { margin-bottom: 6px; }
.faq-ans ul { margin: 10px 0 0; padding-left: 1.2em; list-style: disc; }
.faq-note {
display: block; margin-top: 12px;
background: rgba(220,200,192,0.15);
border-left: 2px solid var(--accent-color);
padding: 10px 16px; font-size: 0.82rem; color: #222;
border-radius: 0 4px 4px 0;
}
/* --- History / Timeline --- */
.history-section {
background: #fdfcfb; position: relative;
}
.timeline {
max-width: 700px; margin: 0 auto;
position: relative; padding-left: 20px;
}
.timeline::before {
content: ''; position: absolute; left: 60px; top: 0; bottom: 0;
width: 1px; background: linear-gradient(to bottom, transparent, var(--accent-color) 10%, var(--accent-color) 90%, transparent);
}
.tl-item {
display: flex; align-items: flex-start; gap: 30px;
margin-bottom: 35px; position: relative;
}
.tl-year {
font-family: var(--font-en); font-size: 0.85rem; color: var(--accent-dark);
letter-spacing: 0.08em; min-width: 70px; padding-top: 3px;
text-align: right; flex-shrink: 0;
}
.tl-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--accent-color); border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--accent-color);
flex-shrink: 0; margin-top: 7px;
}
.tl-text {
font-size: 0.9rem; color: var(--text-color); line-height: 2; flex: 1;
}
@media (max-width: 768px) {
.numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.strengths-grid { grid-template-columns: 1fr; }
.timeline::before { left: 55px; }
}
@media (max-width: 480px) {
.numbers-grid { grid-template-columns: 1fr; }
.hero-title { font-size: 2.2rem; }
.section-title { font-size: 1.7rem; }
.company-table th { width: 84px; white-space: normal; }
}
/* --- Privacy Banner --- */
#privacy-banner {
position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999;
background: rgba(250, 249, 246, 0.97);
border-top: 1px solid rgba(220, 200, 192, 0.6);
backdrop-filter: blur(10px);
padding: 20px 40px;
display: flex; align-items: center; justify-content: space-between; gap: 30px;
box-shadow: 0 -8px 30px rgba(90,84,75,0.07);
transform: translateY(0); transition: transform 0.5s ease, opacity 0.5s ease;
box-sizing: border-box;
}
#privacy-banner.hidden {
transform: translateY(110%); opacity: 0; pointer-events: none;
}
.privacy-banner-text {
font-family: var(--font-sans); font-size: 0.82rem;
color: #222; line-height: 1.9; flex: 1;
}
.privacy-banner-text a {
color: var(--accent-dark); border-bottom: 1px solid var(--accent-color);
transition: 0.3s;
}
.privacy-banner-text a:hover { color: var(--text-color); }
/* プライバシーバナーの「プライバシーポリシー」は a タグだが
tob3.html の .btn-privacy-detail（ボタン）と同じ見た目にする。
ボタンの四辺 1px アウトライン（border-bottom 含む）を維持し、
通常リンクの下線（text-decoration / .privacy-banner-text a の border-bottom）のみ打ち消す。 */
.privacy-banner-text a.btn-privacy-detail {
color: var(--text-color); text-decoration: none;
border: 1px solid var(--accent-color);
display: inline-block; vertical-align: baseline;
}
.privacy-banner-text a.btn-privacy-detail:hover {
background: var(--accent-color); color: #fff;
}
.privacy-banner-btns {
display: flex; gap: 12px; flex-shrink: 0;
}
.btn-privacy-accept {
padding: 10px 28px;
background: var(--text-color); color: #fff;
border: none; border-radius: 30px;
font-family: var(--font-sans); font-size: 0.8rem;
letter-spacing: 0.1em; cursor: pointer; transition: 0.4s;
white-space: nowrap;
}
.btn-privacy-accept:hover { background: var(--accent-dark); }
.btn-privacy-detail {
padding: 10px 20px;
background: transparent; color: var(--text-color);
border: 1px solid var(--accent-color); border-radius: 30px;
font-family: var(--font-sans); font-size: 0.78rem;
letter-spacing: 0.08em; cursor: pointer; transition: 0.4s;
white-space: nowrap;
}
.btn-privacy-detail:hover { background: var(--accent-color); color: #fff; }
/* --- Privacy Policy Modal --- */
#privacy-modal {
display: none; position: fixed; inset: 0; z-index: 10000;
background: rgba(90,84,75,0.4); backdrop-filter: blur(4px);
align-items: center; justify-content: center; padding: 20px;
}
#privacy-modal.open { display: flex; }
.privacy-modal-box {
background: #faf9f6; border-radius: 16px;
max-width: 680px; width: 100%; max-height: 80vh;
overflow-y: auto; padding: 50px;
position: relative;
box-shadow: 0 30px 80px rgba(90,84,75,0.15);
}
.privacy-modal-box h2 {
font-family: var(--font-en); font-size: 2rem; font-weight: 400;
margin-bottom: 8px; color: var(--text-color);
}
.privacy-modal-box .pm-date {
font-size: 0.78rem; color: #222; font-family: var(--font-sans);
letter-spacing: 0.1em; margin-bottom: 36px; display: block;
}
.privacy-modal-box h3 {
font-size: 0.9rem; font-weight: 500; color: var(--text-color);
margin: 28px 0 10px; letter-spacing: 0.05em;
}
.privacy-modal-box p, .privacy-modal-box li {
font-size: 0.84rem; color: #222; line-height: 2.3;
}
.privacy-modal-box ul { padding-left: 1.4em; margin: 8px 0; }
.pm-close {
position: absolute; top: 20px; right: 24px;
background: none; border: none; cursor: pointer;
font-size: 1.5rem; color: #222; line-height: 1; transition: 0.3s;
}
.pm-close:hover { color: var(--text-color); }
@media (max-width: 768px) {
/* 同意バー：初回表示で画面の 4 割を占めていたため圧縮 */
#privacy-banner {
flex-direction: column; align-items: stretch;
padding: 14px 18px; gap: 10px;
}
.privacy-banner-text { font-size: 0.72rem; line-height: 1.75; }
.privacy-banner-text a.btn-privacy-detail {
padding: 3px 9px; font-size: 0.68rem; letter-spacing: 0.04em;
}
.privacy-banner-btns { width: 100%; }
.btn-privacy-accept { flex: 1; text-align: center; padding: 11px 20px; }
.privacy-modal-box { padding: 30px 24px; }
}
/* オーバーレイ表示中: 背景スクロール禁止のみ（pointer-eventsはオーバーレイ自体のz-indexで制御） */
/* Animation */
.fade-up { opacity: 0; transform: translateY(30px); transition: 1s ease; }
.fade-up.active { opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) {
.section-title { font-size: 2.5rem; }
.company-wrapper { flex-direction: column; }
.company-img { width: 100%; height: 350px; }
.training-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
.logo-wrap { top: 14px; left: 20px; }
.logo-wrap img { height: 44px; }
/* モバイルではカプセルナビを全画面オーバーレイに変換（濃モカ背景＋生成り文字） */
.nav-bar {
top: 0; right: 0; left: 0; bottom: 0;
width: 100%; height: 100vh; border-radius: 0;
/* content-box のままだと width/height に padding が加算され、
オーバーレイが 423×892px になってメニューが右 24px・下 40px にずれる */
box-sizing: border-box;
/* iOS Safari のアドレスバー分を除いた実高さ（非対応ブラウザは上の 100vh） */
height: 100dvh;
flex-direction: column; justify-content: center; align-items: center;
gap: 28px; font-size: 1rem; padding: 40px 24px;
border: none;
background: rgba(46,40,34,0.97);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: none;
opacity: 0; pointer-events: none;
transition: opacity 0.4s ease;
}
.nav-bar.active { opacity: 1; pointer-events: auto; }
.nav-bar a {
color: #faf9f6; font-size: 1.15rem; letter-spacing: 0.2em;
padding: 6px 0;
}
.nav-bar a:hover { color: #f5f0ec; }
.nav-bar a::after { background: #dcc8c0; }
.hamburger { display: flex; }
.hero-title { font-size: 3rem; }
/* セクション余白縮小 */
.section { padding: 70px 0; }
.section-title { font-size: 2rem; }
.fc-section { padding: 80px 0; }
/* hero-content モバイル最適化
（width:100% に padding が加算され左右 7px ずつはみ出すため border-box。
PC 側の見た目を変えないようモバイル指定内に限定する） */
.hero-content { padding: 28px 22px; box-sizing: border-box; }
.hero-sub { font-size: 0.82rem; max-width: 100%; }
/* モバイルのヒーロー構成：画像の上にロゴを重ねると色がかぶって読みにくいため、
画像は上部だけにし、ロゴはその下の生成り背景に置く。
そのため absolute レイアウトを解除して縦積みの通常フローに切り替える。
（overflow:hidden は基本定義のまま残す。通常フローの子は切られず、
画像のフェードズーム時のはみ出しだけを抑えてくれる） */
.hero {
height: auto;
display: block;
}
.hero-img {
position: relative; z-index: auto;
height: 58vh; height: 58dvh; /* dvh = アドレスバーを除いた実高さ */
}
/* ロゴ：画像の下、生成り背景の上に中央配置。
画像・ロゴ・サブタイトルが離れすぎていたので余白を詰める。 */
.hero-brand {
position: static;
text-align: center;
padding: 12px 16px 2px;
}
/* リード領域：ヒーローとの間隔を詰める */
.hero-lead { padding: 20px 4vw 48px; }
/* 「まつ毛専用サロンの…」は必ず 1 行に収める。
文字数が固定なので vw 指定で画面幅に追従させ、nowrap で折り返しを禁止。
（rem 固定だと狭い端末で必ずあふれる） */
.hero-lead .hero-tagline {
white-space: nowrap;
font-size: 3.7vw;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.hero-brand-main {
height: auto; width: 62vw; max-width: 260px;
margin: 0 auto; /* 基本定義の margin-left:auto（右寄せ）を打ち消す */
opacity: 1; /* 既定 0.8 では締まらない */
filter: none; /* 無地の上なので影は不要 */
}
.hero-brand-sub {
font-size: 0.62rem; letter-spacing: 0.12em; margin-top: 4px;
font-weight: 700;
text-shadow: none;
}
/* ヒーローのガラス演出はモバイルでは非表示にする。
・::before の四辺ぼかし（--edge:90px）は 390px 幅だと画面の約 46% を占め、
中央だけ鮮明な「枠」として見えてしまう
・::after の回転する光のボーダーも、狭い画面では縁の光として目立つ
PC では演出として機能するため、768px 以下に限定して切る。 */
.hero-glass-panel { display: none; }
/* Contact のリード文はテンプレート側のインライン style で
font-size が付いているため、!important でないと上書きできない */
.cta-inner > p[style] {
font-size: 0.8rem !important;
line-height: 2.1 !important;
}
/* 大きな数字（.strength-num / .recruit-charm-num / .num-value）の縮小は
ファイル末尾の固定値指定より後ろに置く必要があるため、
「大きな数字はベースフォントサイズ変更の影響を受けないよう固定」の
直後にまとめて記述している。ここに書いても後勝ちで打ち消される。 */
/* course-detail-label 幅調整 */
.course-detail-label { min-width: 54px; font-size: 0.65rem; padding: 8px 10px; }
.course-detail-val { font-size: 0.78rem; }
/* 講習カテゴリ見出し：1行の flex に バッジ＋タイトル＋説明文 を並べているため、
狭い画面では説明文が幅を占有してタイトルが 1 文字ずつ縦積みになる。
折り返しを許可し、説明文は次の行に全幅で落とす。 */
.course-category-header {
flex-wrap: wrap;
gap: 6px 12px;
align-items: center;
}
.course-cat-title {
flex: 1 1 auto;
min-width: 0; /* flex アイテムが内容幅以下に潰れるのを防ぐ */
font-size: 1rem;
line-height: 1.6;
}
.course-cat-desc {
flex: 1 0 100%; /* 次の行へ全幅で送る */
font-size: 0.78rem;
line-height: 1.7;
}
/* iOS Safari: background-attachment: fixed 無効化 */
#services, .cta-section, .fc-section {
background-attachment: scroll !important;
}
/* hero下コンテナ幅調整 */
.hero-content[style] { max-width: 100% !important; width: 100% !important; }
/* 横並びレイアウトの縦積み化 */
.product-cards { flex-direction: column; }
.notice-diploma-grid { grid-template-columns: 1fr; }
.footer-nav { flex-wrap: wrap; gap: 14px 22px; }
.company-img { height: 320px; }
}
/* Numbers：狭い画面でも 2 列を維持する。
ファイル前半（480px ブロック）で 1 列にしていたが、縦に伸びすぎるため取り消す。
上の 768px ブロックより後に置かないと打ち消せない（同一詳細度は後勝ち）。 */
@media (max-width: 480px) {
.numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.number-item { padding: 22px 10px 20px; }
.num-value { font-size: 30px; }
.num-value small { font-size: 0.8rem; }
.num-value::after { margin: 12px auto 12px; }
/* 2 列だと横幅が足りないのでアイコンはラベルの上に積む */
.num-head { flex-direction: column; gap: 6px; }
.num-icon { width: 34px; height: 34px; }
.num-icon svg { width: 17px; height: 17px; }
.num-label { font-size: 0.78rem; letter-spacing: 0.03em; line-height: 1.5; }
.num-sub { font-size: 0.66rem; line-height: 1.6; }
/* 「主要取引先」カード：社名が 2 行ずつ折り返して 1 枚だけ極端に高くなり、
最終行の高さが揃わなくなるため、1 行に収まるサイズまで縮める。 */
.number-item .num-value-text { font-size: 19px; }
/* 最長の「株式会社ビューティガレージ」(13文字) が 1 行に収まるよう
画面幅に追従させる（rem 固定だと 390px 以下で折り返す） */
.num-partners { font-size: min(0.62rem, 2.72vw); line-height: 2; letter-spacing: 0; }
}
/* --- 植物ラインアートデコレーション (スクロール連動) --- */
.deco-botanical {
position: fixed; top: 0; height: 100vh; width: 130px;
pointer-events: none; z-index: 3; overflow: visible;
}
.deco-left { left: 0; }
.deco-right { right: 0; }
.deco-botanical svg { width: 100%; height: 100%; overflow: visible; }
.b-stem { fill: none; stroke: var(--accent-color); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.b-branch { fill: none; stroke: var(--accent-dark); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.b-leaf-p { fill: none; stroke: rgba(191,166,154,0.7); stroke-width: 1.0; stroke-linecap: round; stroke-linejoin: round; }
.b-petal { fill: none; stroke: rgba(191,166,154,0.9); stroke-width: 1.0; stroke-linecap: round; }
.b-center { fill: var(--accent-dark); }
.b-dot { fill: rgba(191,166,154,0.8); }
.b-fade { opacity: 0; }
/* === Click Particles === */
.click-particle {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 99999;
transform: translate(-50%, -50%);
animation: cp-fly 0.65s ease-out forwards;
}
@keyframes cp-fly {
0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 0.9; }
100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@media (max-width: 1300px) { .deco-botanical { opacity: 0.5; } }
@media (max-width: 1000px) { .deco-botanical { opacity: 0.2; } }
@media (max-width: 768px) { .deco-botanical { display: none; } }
/* === Recruit / Company Overlay === */
/* z-index: 999 → ロゴ・ナビ(1000)の下に配置し、ナビで常に操作可能 */
#recruit-overlay,
#company-overlay,
#products-overlay,
#training-overlay,
#franchise-overlay {
position: fixed; inset: 0; z-index: 999;
background: var(--bg-color);
overflow-y: scroll; overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
opacity: 0; pointer-events: none;
transition: opacity 0.5s ease;
scroll-behavior: smooth;
}
#recruit-overlay.open,
#company-overlay.open,
#products-overlay.open,
#training-overlay.open,
#franchise-overlay.open { opacity: 1; pointer-events: auto; }
/* ナビ・ロゴ分の余白（sticky で追従） */
.recruit-sticky-header {
position: sticky; top: 0; z-index: 10;
height: 70px;
background: transparent;
pointer-events: none;
}
/* Recruit Hero */
.recruit-hero-section {
min-height: 65vh; display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #fdfcfb 0%, #f0ebe7 60%, #ede4df 100%);
text-align: center; padding: 90px 20px 80px;
}
#products-hero-section {
background: url('../img/hero-top.webp') no-repeat center / cover;
}
#recruit-hero-section {
background: url('../img/hero-recruit.webp') no-repeat center / cover;
}
#training-hero-section {
background: url('../img/hero-training.webp') no-repeat center / cover;
}
#products-hero-section,
#recruit-hero-section,
#training-hero-section { position: relative; }
/* 黒オーバーレイ（scrim） */
#products-hero-section::before,
#recruit-hero-section::before,
#training-hero-section::before {
content: ''; position: absolute; inset: 0;
background: rgba(0,0,0,0.42);
pointer-events: none;
transition: opacity 0.8s ease;
}
/* 採用・外部講習・商品は最初非表示 */
#recruit-hero-section::before,
#training-hero-section::before,
#products-hero-section::before { opacity: 0; }
#recruit-hero-section.hero-revealed::before,
#training-hero-section.hero-revealed::before,
#products-hero-section.hero-revealed::before { opacity: 1; }
#products-hero-section .recruit-hero-inner,
#recruit-hero-section .recruit-hero-inner,
#training-hero-section .recruit-hero-inner { position: relative; z-index: 1; }
/* 商品・採用・外部講習 文字色を白 */
#products-hero-section .recruit-eyecatch,
#products-hero-section .recruit-hero-title,
#products-hero-section .recruit-hero-sub,
#products-hero-section .recruit-hero-body,
#recruit-hero-section .recruit-eyecatch,
#recruit-hero-section .recruit-hero-title,
#recruit-hero-section .recruit-hero-sub,
#recruit-hero-section .recruit-hero-body,
#training-hero-section .recruit-eyecatch,
#training-hero-section .recruit-hero-title,
#training-hero-section .recruit-hero-sub,
#training-hero-section .recruit-hero-body { color: #fff; }
/* ガラスカード（採用・外部講習ヒーロー） */
.hero-glass-card {
backdrop-filter: blur(16px) saturate(160%) brightness(1.04);
-webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1.04);
background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
border: 1px solid rgba(255,255,255,0.28);
border-radius: 22px;
padding: 52px 64px;
max-width: 680px;
opacity: 0;
transform: translateY(36px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.hero-glass-card.hero-revealed {
opacity: 1;
transform: translateY(0);
}
.hero-glass-card .gl-wrap button,
.hero-glass-card .gl-wrap.gl-dark button { color: #fff; }
@media (max-width: 768px) {
.hero-glass-card { padding: 36px 28px; }
}
/* スクロールロック中 */
.overlay-scroll-locked { overflow: hidden !important; }
/* === Overlay Loader === */
#overlay-loader {
position: fixed; inset: 0; z-index: 1200;
background: var(--bg-color);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
#overlay-loader.active { opacity: 1; pointer-events: auto; }
#overlay-loader .loader-text {
font-family: var(--font-en);
font-size: 0.85rem;
letter-spacing: 0.25em;
color: var(--accent-dark);
animation: loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.products-glass-card {
position: relative;
padding: 52px 60px;
border-radius: 20px;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
background: linear-gradient(135deg,
rgba(255,255,255,0.22),
rgba(255,255,255,0.10));
box-shadow:
inset 0 1.5px 2px rgba(255,255,255,0.55),
inset 0 -1.5px 2px rgba(0,0,0,0.08),
0 8px 40px rgba(0,0,0,0.18),
0 1.5px 0 rgba(255,255,255,0.3);
border: 1px solid rgba(255,255,255,0.35);
color: #1a1a1a;
opacity: 0;
transform: translateY(36px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.products-glass-card.hero-revealed {
opacity: 1;
transform: translateY(0);
}
.products-glass-card .recruit-eyecatch,
.products-glass-card .recruit-hero-title,
.products-glass-card .recruit-hero-sub,
.products-glass-card .recruit-hero-body { color: #1a1a1a; }
.recruit-hero-inner { max-width: 760px; }
.recruit-eyecatch {
font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.35em;
color: var(--accent-dark); margin-bottom: 28px; display: block;
text-transform: uppercase;
}
.recruit-hero-title {
font-family: var(--font-jp); font-size: 2.2rem; font-weight: 500;
line-height: 1.6; color: var(--text-color); margin-bottom: 10px;
letter-spacing: 0.06em;
}
.recruit-hero-sub {
font-family: var(--font-jp); font-size: 1.1rem; font-weight: 400;
color: var(--accent-dark); margin-bottom: 40px;
letter-spacing: 0.08em;
}
.recruit-hero-body {
font-size: 0.9rem; color: #222; line-height: 2.7;
max-width: 580px; margin: 0 auto 50px;
}
/* Recruit Sections */
.recruit-section { padding: 100px 0; }
.recruit-section-alt { background: linear-gradient(135deg, #fdfcfb 0%, #f5f1ee 100%); }
.recruit-section-head { text-align: center; margin-bottom: 60px; }
.recruit-section-en {
font-family: var(--font-en); font-size: 3.4rem; font-weight: 400;
color: var(--text-color); letter-spacing: 0.03em; display: block; margin-bottom: 0;
}
.recruit-section-jp {
font-family: var(--font-jp); font-size: 1.1rem; letter-spacing: 0.15em;
color: #6b5a4c; display: block; font-weight: 500;
}
/* 英文タイトルと日本語サブの間の横線 */
.recruit-section-jp::before {
content: ''; display: block; width: 46px; height: 1px;
background: var(--accent-dark); margin: 16px auto 14px;
}
.recruit-section-tagline {
font-family: var(--font-jp); font-size: 1.05rem; color: var(--text-color);
margin-top: 14px; display: block;
}
/* Charm */
.recruit-charm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.recruit-charm-item {
background: #fff; border-radius: 20px; padding: 0 0 38px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.04); transition: 0.4s;
}
.recruit-charm-item:hover { transform: translateY(-6px); box-shadow: 0 16px 42px rgba(0,0,0,0.08); }
/* 番号バンド（カード上部のピンクグラデーション） */
.recruit-charm-head {
background: linear-gradient(120deg, rgba(220,200,192,0.55) 0%, rgba(245,237,233,0.35) 60%, rgba(250,249,246,0.15) 100%);
padding: 18px 28px 62px;
}
.recruit-charm-num {
font-family: var(--font-en); font-size: 4rem; font-weight: 300;
color: rgba(250,249,246,0.95); line-height: 1; margin-bottom: 0;
}
/* 写真（バンドに少し重ねる） */
.recruit-charm-img {
height: 200px; margin: -46px 24px 24px;
border-radius: 8px; overflow: hidden;
box-shadow: 0 6px 18px rgba(90,84,75,0.12);
}
.recruit-charm-img img { width: 100%; height: 100%; object-fit: cover; }
.recruit-charm-item h3 {
font-size: 1.05rem; font-weight: 500; line-height: 1.8;
color: var(--text-color); margin: 0 28px 14px;
}
.recruit-charm-item p { font-size: 0.84rem; color: #222; line-height: 2.4; margin: 0 28px; }
.recruit-charm-item p + p { margin-top: 12px; }
/* Schedule（1日の流れ: 左画像＋右タイムライン） */
.day-wrap {
display: flex; gap: 56px; align-items: stretch;
}
.day-img {
flex: 1; border-radius: 20px; overflow: hidden;
box-shadow: 0 12px 36px rgba(90,84,75,0.12);
min-height: 480px;
}
.day-img img {
width: 100%; height: 100%;
object-fit: cover; object-position: center; /* 画像の中央部分のみ表示 */
display: block;
}
.day-timeline {
flex: 1.15; background: #fff; border-radius: 20px;
padding: 44px 48px; box-shadow: 0 8px 30px rgba(0,0,0,0.04);
box-sizing: border-box;
}
.day-row {
display: flex; gap: 20px; position: relative; padding-bottom: 24px;
}
.day-row:last-of-type { padding-bottom: 0; }
.day-time {
font-family: var(--font-num); font-size: 1.05rem; font-weight: 500;
color: var(--text-color); min-width: 56px; flex-shrink: 0;
letter-spacing: 0.04em; padding-top: 1px;
}
.day-marker { width: 10px; flex-shrink: 0; position: relative; }
.day-marker::before {
content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 9px; height: 9px; border-radius: 50%; background: var(--accent-dark);
}
.day-marker::after {
content: ''; position: absolute; top: 22px; bottom: -2px; left: 50%;
transform: translateX(-50%); width: 1px; background: rgba(220,200,192,0.7);
}
.day-row:last-of-type .day-marker::after { display: none; }
.day-main { flex: 1; }
.day-task {
display: block; font-family: var(--font-jp); font-size: 0.95rem;
font-weight: 600; color: var(--text-color); margin-bottom: 4px;
letter-spacing: 0.06em;
}
.day-desc {
display: block; font-size: 0.8rem; color: #666; line-height: 1.9;
}
.day-note {
margin-top: 34px; padding: 22px 26px;
background: rgba(220,200,192,0.18); border-radius: 12px;
font-family: var(--font-jp); font-size: 0.88rem;
color: var(--text-color); line-height: 2.1; text-align: center;
}
@media (max-width: 900px) {
.day-wrap { flex-direction: column; gap: 32px; }
.day-img { min-height: 260px; max-height: 320px; }
.day-timeline { padding: 32px 26px; }
}
/* Voices */
.recruit-voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.recruit-voice-card {
background: #fff; border-radius: 20px;
overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.recruit-voice-photo-wrap {
padding: 32px 0 20px;
display: flex; justify-content: center;
background: rgba(220,200,192,0.06);
}
.recruit-voice-photo {
width: 180px; height: 180px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(220,200,192,0.5);
flex-shrink: 0;
}
.recruit-voice-photo img {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.recruit-voice-profile {
padding: 26px 30px 18px; border-bottom: 1px solid rgba(220,200,192,0.3);
}
.recruit-voice-name { font-size: 1.05rem; font-weight: 500; color: var(--text-color); margin-bottom: 4px; }
.recruit-voice-role {
font-family: var(--font-sans); font-size: 0.75rem; color: var(--accent-dark); letter-spacing: 0.1em;
}
.recruit-voice-career {
padding: 14px 30px; font-size: 0.78rem; color: #222;
font-family: var(--font-sans); letter-spacing: 0.05em;
border-bottom: 1px solid rgba(220,200,192,0.3);
line-height: 1.8;
}
.recruit-voice-qa { padding: 24px 30px 30px; }
.recruit-voice-qa-item { margin-bottom: 20px; }
.recruit-voice-qa-item:last-child { margin-bottom: 0; }
.recruit-voice-q {
font-size: 0.8rem; color: var(--accent-dark); font-weight: 500;
margin-bottom: 7px; line-height: 1.6;
}
.recruit-voice-a { font-size: 0.83rem; color: #222; line-height: 2.3; }
/* Requirements */
.recruit-requirements-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.recruit-requirements-table th, .recruit-requirements-table td {
padding: 16px 20px; border-bottom: 1px solid rgba(220,200,192,0.4);
text-align: left; vertical-align: top; line-height: 1.9;
}
.recruit-requirements-table th {
color: var(--accent-dark); font-family: var(--font-sans);
font-weight: 400; letter-spacing: 0.1em; white-space: nowrap;
width: 120px; padding-right: 30px;
}
.recruit-requirements-table td { color: var(--text-color); }
.salary-example {
margin-top: 12px; padding: 14px 18px;
background: rgba(220,200,192,0.12); border-radius: 8px;
font-size: 0.82rem; color: #222; line-height: 2;
}
/* Apply */
.recruit-apply-box { max-width: 700px; margin: 0 auto; text-align: center; }
.recruit-apply-intro {
font-size: 0.9rem; color: #222; line-height: 2.7; margin-bottom: 44px;
}
.recruit-apply-email {
display: inline-block; font-family: var(--font-en); font-size: 1.05rem;
color: var(--text-color); margin-bottom: 48px;
padding: 18px 36px; background: rgba(220,200,192,0.12);
border: 1px solid rgba(220,200,192,0.4); border-radius: 12px;
letter-spacing: 0.05em; transition: 0.3s;
}
.recruit-apply-email:hover { background: rgba(220,200,192,0.25); }
.recruit-apply-btns {
display: flex; flex-direction: column; gap: 14px; max-width: 360px; margin: 0 auto;
}
/* Recruit Responsive */
@media (max-width: 900px) {
.recruit-charm-grid { grid-template-columns: 1fr; gap: 20px; }
.recruit-voices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.recruit-schedule-wrap { padding: 30px 24px; }
.recruit-sticky-header { height: 60px; }
/* ── 下層ページ ヒーローの泣き別れ対策 ──────────────────────
文字が大きすぎて行末に「す。」「る、」だけが残る、
英文タイトルが 2 行に割れる、といった崩れが出ていたため、
モバイルでは文字を詰めてカードの左右余白も削り、行に収める。
text-wrap は対応ブラウザでさらに最適化される（非対応なら無視）。
※ これらの基本定義は本ブロックより前にあるため、
同一詳細度では後勝ち＝ここに置かないと効かない。 */
.recruit-eyecatch {
font-size: 0.68rem; letter-spacing: 0.24em; margin-bottom: 20px;
}
.recruit-hero-title {
font-size: 1.4rem; line-height: 1.7; text-wrap: balance;
}
.recruit-hero-sub {
font-size: 0.95rem; margin-bottom: 26px;
}
.recruit-hero-body {
font-size: 0.8rem; line-height: 2.2; margin-bottom: 32px;
text-wrap: pretty; /* 行末に 1 語だけ残すのを避ける */
}
/* ヒーローカードの左右余白を削って 1 行に使える幅を稼ぐ */
.hero-glass-card,
.products-glass-card { padding: 28px 18px; }
/* 英文セクション見出し（Why Choose Us / A Day in the Life など）。
nowrap で確実に 1 行にし、狭い端末ではサイズを落としてはみ出しを防ぐ。 */
.recruit-section-en { font-size: 2.3rem; white-space: nowrap; }
/* セクション周りの余白：PC 基準のままだと見出し前後が間延びする */
.recruit-section { padding: 56px 0; }
.recruit-section-head { margin-bottom: 30px; }
}
/* 最長の見出し「A Day in the Life」が収まらなくなる幅で段階的に縮小 */
@media (max-width: 400px) {
.recruit-section-en { font-size: 2.05rem; }
}
@media (max-width: 360px) {
.recruit-section-en { font-size: 1.85rem; }
}
/* =====================================================
Course Catalogue — コース詳細アコーディオン
===================================================== */
@property --course-angle {
syntax: ""; inherits: false; initial-value: 0turn;
}
@property --shimmer-pos {
syntax: ""; inherits: false; initial-value: -40%;
}
@keyframes course-border-rotate {
to { --course-angle: 1turn; }
}
@keyframes course-shimmer-sweep {
0% { --shimmer-pos: -40%; }
100% { --shimmer-pos: 140%; }
}
/* --- カテゴリヘッダー --- */
.course-category { margin-bottom: 52px; }
.course-category-header {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px; padding-bottom: 14px;
border-bottom: 1px solid rgba(220,200,192,0.4);
}
.course-cat-badge {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-en); font-size: 0.9rem; font-weight: 400;
color: #fff; flex-shrink: 0; letter-spacing: 0;
}
.cat-single { background: linear-gradient(135deg, #bfa69a, #dcc8c0); }
.cat-volume { background: linear-gradient(135deg, #9aafbf, #c0d4dc); }
.cat-lift { background: linear-gradient(135deg, #a9b9a5, #cad8c6); }
.course-cat-title {
font-family: var(--font-jp); font-size: 0.97rem;
font-weight: 500; color: var(--text-color); flex: 1; margin: 0;
}
.course-cat-desc {
font-family: var(--font-jp); font-size: 0.82rem;
color: var(--accent-dark); letter-spacing: 0.08em;
}
/* --- グリッド --- */
.course-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
align-items: start;
}
@media (max-width: 768px) { .course-grid { grid-template-columns: 1fr; } }
/* --- カード本体（conic回転ボーダー） --- */
.course-card {
border-radius: 16px; overflow: hidden;
background:
linear-gradient(#fff, #fff),
conic-gradient(from var(--course-angle),
rgba(220,200,192,0.25) 0%,
rgba(245,237,233,0.25) 25%,
rgba(255,255,255,0.1) 35%,
rgba(220,200,192,0.25) 55%,
rgba(255,255,255,0.08) 70%,
rgba(220,200,192,0.25) 100%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
border: 1.5px solid transparent;
box-shadow: 0 4px 18px rgba(0,0,0,0.04);
animation: course-border-rotate 9s linear infinite paused;
transition: box-shadow 0.4s ease, transform 0.35s ease;
}
.course-card[open] {
animation-play-state: running;
background:
linear-gradient(#fff, #fff),
conic-gradient(from var(--course-angle),
#dcc8c0 0%, #f0e4de 18%, #fff 28%,
#e0ccc5 44%, #bfa69a 58%, #f0e4de 76%,
#fff 84%, #dcc8c0 100%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
box-shadow: 0 8px 32px rgba(191,166,154,0.2);
}
.course-grid .course-card:nth-child(2) { transition-delay: 0.08s; }
.course-grid .course-card:nth-child(3) { transition-delay: 0.16s; }
.course-grid .course-card:nth-child(4) { transition-delay: 0.24s; }
.course-grid .course-card:nth-child(5) { transition-delay: 0.32s; }
/* --- サマリー（クリック部分） --- */
.course-card-summary {
list-style: none; display: flex; align-items: center; gap: 14px;
padding: 20px 22px; cursor: pointer; user-select: none;
position: relative; overflow: hidden;
transition: background 0.25s;
}
.course-card-summary::-webkit-details-marker { display: none; }
.course-card-summary:hover { background: rgba(220,200,192,0.07); }
.course-card[open] .course-card-summary { background: rgba(220,200,192,0.09); }
/* シマースイープ（開いた瞬間1回のみ） */
.course-card[open] .course-card-summary::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(
100deg,
transparent 25%,
rgba(255,255,255,0.6) var(--shimmer-pos),
transparent 75%);
animation: course-shimmer-sweep 0.6s ease forwards;
pointer-events: none;
}
.course-code {
font-family: var(--font-num); font-size: 1.55rem;
letter-spacing: 0.08em; font-weight: 500;
min-width: 58px; flex-shrink: 0;
}
.course-s { color: #5b82c8; }
.course-v { color: #d4883a; }
.course-f { color: #5faa78; }
.course-t { color: #c06070; }
.course-u { color: #8c6dc0; }
.course-l { color: #4aaeaa; }
.course-summary-main {
flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.course-title {
font-family: var(--font-jp); font-size: 1rem;
font-weight: 500; color: var(--text-color); line-height: 1.5;
}
.course-title-sub {
font-family: var(--font-jp); font-size: 0.82rem;
color: var(--accent-dark); letter-spacing: 0.08em; font-weight: 500;
}
.course-meta-row {
display: flex; align-items: center; gap: 10px; margin-top: 4px;
}
.course-level-badge {
font-family: var(--font-sans); font-size: 0.72rem;
letter-spacing: 0.08em; padding: 3px 12px; border-radius: 20px;
}
/* レベル別カラー統一: 初級系=青 / 中級系=緑 / 上級系=赤 / フォローアップ等=グレー */
.level-blue { background: rgba(91,130,200,0.12); color: #5b82c8; }
.level-green { background: rgba(78,150,104,0.12); color: #4e9668; }
.level-red { background: rgba(192,96,112,0.12); color: #c06070; }
.level-gray { background: rgba(120,115,108,0.1); color: #78736c; }
.course-time-chip {
font-family: var(--font-sans); font-size: 0.72rem;
color: #666; letter-spacing: 0.06em;
display: inline-flex; align-items: center; gap: 5px;
}
.course-time-chip:not(:empty)::before {
content: ""; width: 13px; height: 13px; flex-shrink: 0;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
/* ＋／－ トグルアイコン（丸囲み） */
.course-toggle-icon {
width: 34px; height: 34px; position: relative; flex-shrink: 0;
border: 1px solid rgba(160,136,120,0.45); border-radius: 50%;
box-sizing: border-box;
}
.course-toggle-icon::before,
.course-toggle-icon::after {
content: ""; position: absolute; background: var(--accent-dark);
border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease;
}
.course-toggle-icon::before { width: 1px; height: 13px; top: 9.5px; left: 15.5px; }
.course-toggle-icon::after { width: 13px; height: 1px; top: 15.5px; left: 9.5px; }
.course-card[open] .course-toggle-icon::before {
transform: rotate(90deg); opacity: 0;
}
/* --- 展開コンテンツ（JS で max-height 制御） --- */
.course-body {
max-height: 0; overflow: hidden; padding: 0 22px;
transition:
max-height 0.4s cubic-bezier(0.4,0,0.2,1),
padding 0.4s ease;
}
.course-detail-grid {
border: 1px solid rgba(220,200,192,0.35); border-radius: 10px;
overflow: hidden; margin-bottom: 16px;
}
.course-detail-row {
display: flex; font-size: 0.83rem; line-height: 1.8;
border-bottom: 1px solid rgba(220,200,192,0.25);
}
.course-detail-row:last-child { border-bottom: none; }
.course-detail-label {
min-width: 68px; padding: 10px 14px;
font-family: var(--font-sans); font-size: 0.7rem;
letter-spacing: 0.1em; color: var(--accent-dark);
background: rgba(220,200,192,0.1); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.course-detail-val {
padding: 10px 14px; color: var(--text-color); flex: 1;
}
/* --- お知らせ --- */
/* 旧 course-notices は非使用 */
.course-notices {
margin-top: 52px; padding-top: 40px;
border-top: 1px solid rgba(220,200,192,0.4);
display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 受講者特典バナー */
.notice-benefit-banner {
width: 100%; background: linear-gradient(135deg, rgba(220,200,192,0.25) 0%, rgba(201,181,172,0.15) 100%);
border: 1px solid rgba(220,200,192,0.5); border-radius: 14px;
padding: 22px 32px; display: flex; align-items: center; gap: 24px;
/* width:100% に padding+border が加算され、左右が 66px はみ出して
角丸と枠線が切れていたため border-box にする */
box-sizing: border-box;
}
.notice-benefit-label {
font-family: var(--font-jp); font-size: 0.82rem; letter-spacing: 0.18em;
color: var(--accent-dark); white-space: nowrap; font-weight: 400;
}
.notice-benefit-banner p {
font-size: 0.88rem; color: var(--text-color); line-height: 1.8; margin: 0;
}
.notice-benefit-banner strong { color: var(--accent-dark); font-weight: 600; font-size: 1rem; }
/* ディプロマ中央 */
.notice-diploma-center {
display: flex; flex-direction: column; align-items: center; gap: 20px;
width: 100%;
}
.notice-diploma-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%;
}
.notice-diploma-item {
border-radius: 8px; overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.notice-diploma-center .notice-diploma-img { width: 100%; margin-bottom: 0; }
.notice-diploma-center h4 {
font-family: var(--font-jp); font-size: 0.85rem; letter-spacing: 0.16em;
color: var(--accent-dark); font-weight: 400; margin: 0;
}
.notice-diploma-center p { font-size: 0.81rem; color: #222; line-height: 2; margin: 0; text-align: center; }
/* モデルの手配 注意書き */
.notice-model-note {
width: 100%; font-size: 0.78rem; color: #222; line-height: 2;
text-align: center;
}
@media (max-width: 600px) {
.notice-benefit-banner { flex-direction: column; gap: 10px; }
}
.course-notice-card {
background: rgba(220,200,192,0.08);
border: 1px solid rgba(220,200,192,0.3);
border-radius: 14px; padding: 24px 20px;
}
.notice-title {
font-family: var(--font-sans); font-size: 0.76rem;
letter-spacing: 0.14em; color: var(--accent-dark);
margin: 0 0 10px; font-weight: 400;
}
.course-notice-card p {
font-size: 0.81rem; color: #222; line-height: 2.1; margin: 0;
}
.notice-diploma-img {
width: 100%; border-radius: 8px; overflow: hidden;
border: 1px solid rgba(220,200,192,0.4); margin-bottom: 14px;
}
.notice-diploma-img img { width: 100%; height: auto; display: block; }
/* === Why Choose Us === */
.why-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.why-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.92rem; color: var(--text-color); line-height: 1.7;
}
.why-list li::before {
content: '—'; color: var(--accent-color); flex-shrink: 0; margin-top: 2px;
}
.why-detail-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .why-detail-grid { grid-template-columns: 1fr; } }
.why-detail-block {
background: rgba(220,200,192,0.08);
border: 1px solid rgba(220,200,192,0.3);
border-radius: 14px; padding: 28px 26px;
}
/* 番号＋アイコンの行 */
.why-detail-head {
display: flex; align-items: flex-start; justify-content: space-between;
margin-bottom: 16px;
}
.why-detail-num {
font-family: var(--font-num); font-size: 2.1rem; font-weight: 400;
color: rgba(160,136,120,0.75); line-height: 1;
}
.why-detail-icon {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(220,200,192,0.3);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.why-detail-icon svg {
width: 21px; height: 21px; display: block;
fill: none; stroke: var(--accent-dark);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.why-detail-title {
font-size: 1.2rem; font-family: var(--font-jp);
letter-spacing: 0.06em; color: var(--text-color);
margin: 0 0 16px; font-weight: 500; line-height: 1.7;
}
.why-detail-block p {
font-size: 0.84rem; color: #222; line-height: 1.9; margin: 0;
}
.why-sub-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.why-sub-list li {
font-size: 0.81rem; color: #222; line-height: 1.9;
padding-left: 12px;
}
.why-sub-list li strong { color: var(--text-color); font-weight: 500; }
/* === Contact Form === */
.contact-form { max-width: 640px; margin: 0 auto; text-align: left; }
.cf-row { margin-bottom: 22px; }
.cf-label {
display: block; font-family: var(--font-sans);
font-size: 0.76rem; letter-spacing: 0.12em;
color: var(--accent-dark); margin-bottom: 8px;
}
.cf-req { color: #c08080; margin-left: 4px; }
.cf-opt { color: #222; font-size: 0.7rem; margin-left: 6px; }
.cf-input, .cf-select, .cf-textarea {
width: 100%; box-sizing: border-box;
border: 1px solid rgba(220,200,192,0.6);
border-radius: 8px; padding: 12px 14px;
font-family: var(--font-jp); font-size: 0.88rem;
color: var(--text-color); background: #fff;
transition: border-color 0.25s, box-shadow 0.25s;
outline: none; -webkit-appearance: none; appearance: none;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
border-color: var(--accent-dark);
box-shadow: 0 0 0 3px rgba(191,166,154,0.15);
}
.cf-textarea { resize: vertical; min-height: 120px; line-height: 1.9; }
.cf-submit-row { display: flex; justify-content: center; margin-top: 36px; }
.cf-error { text-align: center; margin-top: 16px; font-size: 0.82rem; color: #c08080; }
.contact-thanks { text-align: center; padding: 60px 20px; }
.thanks-icon { font-size: 2.5rem; color: var(--accent-dark); margin-bottom: 16px; }
.thanks-title {
font-family: var(--font-jp); font-size: 1.2rem;
color: var(--text-color); margin-bottom: 12px;
}
.thanks-body { font-size: 0.88rem; color: #222; line-height: 2.2; }
/* === Tenpo Section === */
.tenpo-section { padding-top: 80px; padding-bottom: 80px; }
.tenpo-inner {
display: flex; gap: 60px; align-items: center;
}
.tenpo-img-wrap {
flex: 1; border-radius: 20px; overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.07);
}
.tenpo-img { width: 100%; height: 420px; object-fit: cover; display: block; }
.tenpo-content { flex: 1; padding-left: 8%; box-sizing: border-box; }
@media (max-width: 768px) {
.tenpo-inner { flex-direction: column; gap: 36px; }
.tenpo-img { height: 260px; }
.tenpo-content { padding-left: 0; }
}
/* === 会社概要ページ === */
/* ヒーロー（2カラム: 左テキスト＋右アーチ画像） */
.company-hero { text-align: left; }
.company-hero-inner {
display: flex; align-items: center; gap: 70px;
max-width: 1100px; margin: 0 auto; padding: 0 4vw; width: 100%;
box-sizing: border-box;
}
.company-hero-text { flex: 1; }
.company-eyebrow {
font-family: var(--font-en); font-size: 0.8rem; letter-spacing: 0.35em;
color: var(--accent-dark); text-transform: uppercase;
display: block; margin-bottom: 18px;
}
.company-hero-title {
font-family: var(--font-jp); font-size: 2.6rem; font-weight: 500;
color: var(--text-color); margin: 0 0 24px; letter-spacing: 0.08em;
line-height: 1.4;
}
.company-hero-line {
display: block; width: 46px; height: 1px;
background: var(--accent-dark); margin-bottom: 36px;
}
.company-hero-catch {
font-family: var(--font-jp); font-size: 1.55rem; font-weight: 500;
line-height: 1.9; color: var(--text-color); margin: 0 0 26px;
}
.company-hero-body {
font-size: 0.88rem; color: #444; line-height: 2.3; margin: 0;
}
.company-hero-img { flex: 1; }
.company-hero-img img {
width: 100%; height: 480px; object-fit: cover;
border-radius: 220px 220px 24px 24px;
box-shadow: 0 20px 50px rgba(90,84,75,0.14);
}
@media (max-width: 900px) {
.company-hero-inner { flex-direction: column-reverse; gap: 40px; }
.company-hero-img { width: 100%; }
.company-hero-img img { height: 300px; }
.company-hero-title { font-size: 2rem; }
}
/* 会社概要テーブル（センター配置） */
.company-table-center { max-width: 680px; margin: 0 auto; }
.company-table-center th { width: 140px; }
/* 沿革（左右交互タイムライン） */
.timeline-zig { position: relative; max-width: 880px; margin: 0 auto; }
.timeline-zig::before {
content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px;
width: 1px; transform: translateX(-50%);
background: linear-gradient(to bottom, transparent, var(--accent-color) 8%, var(--accent-color) 92%, transparent);
}
.tlz-item {
position: relative; width: 50%; box-sizing: border-box;
padding-right: 52px; margin-bottom: 46px; text-align: right;
}
.tlz-item:nth-child(even) {
margin-left: 50%; padding-right: 0; padding-left: 52px; text-align: left;
}
.tlz-item:last-child { margin-bottom: 0; }
.tlz-dot {
position: absolute; top: 12px; right: -6px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--accent-color); border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--accent-color);
}
.tlz-item:nth-child(even) .tlz-dot { right: auto; left: -8px; }
.tlz-year {
display: block; font-family: var(--font-num); font-size: 1.5rem;
font-weight: 500; color: var(--text-color); line-height: 1.3;
margin-bottom: 6px; letter-spacing: 0.04em;
}
.tlz-text { font-size: 0.88rem; color: #444; line-height: 2; }
@media (max-width: 768px) {
.timeline-zig::before { left: 5px; transform: none; }
.tlz-item, .tlz-item:nth-child(even) {
width: 100%; margin-left: 0; padding: 0 0 0 32px; text-align: left;
}
.tlz-dot, .tlz-item:nth-child(even) .tlz-dot { right: auto; left: 0; }
}
/* 事業内容カード */
.biz-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 768px) { .biz-grid { grid-template-columns: 1fr; } }
.biz-card {
background: #fff; border-radius: 18px; overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.05); text-align: center;
padding-bottom: 32px; cursor: pointer; display: block;
transition: transform 0.4s, box-shadow 0.4s;
}
.biz-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.09); }
.biz-card-img { height: 190px; overflow: hidden; margin-bottom: 26px; }
.biz-card-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.biz-card:hover .biz-card-img img { transform: scale(1.06); }
.biz-card-en {
font-family: var(--font-en); font-size: 1.2rem; letter-spacing: 0.2em;
color: var(--text-color); display: block; margin-bottom: 8px;
}
.biz-card-jp {
font-family: var(--font-jp); font-size: 0.88rem; color: #555;
display: block; margin-bottom: 20px;
}
.biz-card-arrow {
display: inline-block; font-family: var(--font-en); font-size: 1.1rem;
color: var(--accent-dark); transition: transform 0.3s;
}
.biz-card:hover .biz-card-arrow { transform: translateX(6px); }
/* 会社概要ヒーローアニメーション */
#company-overlay .recruit-hero-section {
position: relative; overflow: hidden;
}
#company-hero-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
/* overlay removed — dimming handled per-tile in canvas */
#company-overlay .recruit-hero-inner {
position: relative; z-index: 2;
}
/* 大きな数字はベースフォントサイズ変更の影響を受けないよう固定 */
.strength-num { font-size: 76px; }
.recruit-charm-num { font-size: 76px; }
.num-value { font-size: 54px; }
/* サイト内の数字表記はすべて明朝系数字フォントで統一 */
.strength-num, .recruit-charm-num, .service-card-num, .ps-num, .prod-num {
font-family: var(--font-num);
}
/* 大きな数字のモバイル縮小。
上の固定値（76px / 54px）はメディアクエリの外にあるため、
前方の @media で指定しても後勝ちで打ち消されてしまう。必ずここに置くこと。 */
@media (max-width: 768px) {
.strength-num { font-size: 48px; }
.recruit-charm-num { font-size: 48px; }
.num-value { font-size: 38px; }
}
@media (max-width: 480px) {
/* Numbers を 2 列にしているため、さらに小さく */
.num-value { font-size: 30px; }
}
/* SNSボタン */
.footer-sns {
display: flex; justify-content: center; gap: 14px; margin-bottom: 32px;
}
.footer-sns-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 28px; border-radius: 50px;
font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.1em;
text-decoration: none; color: #fff; transition: transform 0.3s, box-shadow 0.3s;
}
.footer-sns-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
color: #fff;
}
.sns-instagram {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.sns-line {
background: #06C755;
}
.footer-sns-btn svg { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }
/* === WordPress 移行追記：現在ページのナビハイライト === */
.nav-bar a.is-current { color: var(--accent-dark); }
.nav-bar a.is-current::after { width: 80%; }