@charset 'utf-8';
 html {
scroll-behavior: smooth;
overflow-x: hidden;
scroll-padding-top: 100px;
} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td {
margin : 0;
padding : 0;
scroll-padding-top: 80px;
position: relative;
}
button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
} img {
width: 100%;
height: auto;
vertical-align: baseline;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: #3a3125;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.mt100 {
margin-top: 100px;
}   :root {
--coral:     #d97757;
--coral-lt:  #e8956e;
--coral-dk:  #e39271;
--cream:     #FDF8F3;
--warm-white:#FFFCFA;
--sand:      #F0E8DC;
--stone:     #C8B8A4;
--charcoal:  #2C2420;
--brown-mid: #6B4F3A;
--text-base: #3D3330;
--text-muted:#5a453a;
--accent-teal:#5AACB0;
--radius-sm: 8px;
--radius-md: 20px;
--radius-lg: 40px;
--radius-pill:100px;
--shadow-soft: 0 8px 40px rgba(44,36,32,.08);
--shadow-card: 0 4px 24px rgba(44,36,32,.10);
--shadow-hover:0 16px 60px rgba(44,36,32,.16);
--font-serif: 'Noto Serif JP', serif;
--font-sans:  'Noto Sans JP', sans-serif;
--font-latin: 'Cormorant Garamond', serif;
--section-gap: 120px;
}   .pc_only { display: flex !important; }
.sp_only { display: none !important; }
@media (max-width: 900px) {
.pc_only { display: none !important; }
.sp_only { display: flex !important; }
}   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
background-color: var(--warm-white);
color: var(--text-base);
line-height: 1.8;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }   .section-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 40px;
}
.section-label .jp {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 600;
color: var(--charcoal);
letter-spacing: .06em;
}
.section-label .en {
font-family: var(--font-latin);
font-size: 13px;
letter-spacing: .22em;
color: var(--coral);
text-transform: uppercase;
}
.section-label .rule {
width: 48px;
height: 2px;
background: linear-gradient(90deg, var(--coral), transparent);
margin-top: 4px;
}   .guide-bar {
background: var(--charcoal);
color: #fff;
text-align: center;
padding: 14px 20px;
font-size: 12px;
letter-spacing: .15em;
font-family: var(--font-latin);
}
.guide-bar span { color: var(--coral-lt); margin: 0 8px; }   .hero {
position: relative;
height: 100vh;
min-height: 640px;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
} .hero__photo {
position: relative;
overflow: hidden;
} .hero__photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
} .hero__photo-img--1 {
animation: heroFade 19.5s ease-in-out infinite 0s;
}
.hero__photo-img--2 {
animation: heroFade 19.5s ease-in-out infinite 6.5s;
}
.hero__photo-img--3 {
animation: heroFade 19.5s ease-in-out infinite 13s;
}
@keyframes heroFade {
0%   { opacity: 0; transform: scale(1.06); }
7%   { opacity: 1; transform: scale(1.06); }
33%  { opacity: 1; transform: scale(1.00); }
40%  { opacity: 0; transform: scale(1.00); }
100% { opacity: 0; transform: scale(1.00); }
} .hero__photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 60%, var(--warm-white));
z-index: 1;
} .hero__photo-clip {
position: absolute;
top: 0; right: -1px; bottom: 0;
width: 80px;
background: var(--warm-white);
clip-path: ellipse(80px 55% at right center);
z-index: 2;
} .hero__text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 64px 60px 40px;
position: relative;
z-index: 2;
}
.hero__eyebrow {
font-family: var(--font-latin);
font-size: 11px;
letter-spacing: .28em;
color: var(--coral);
text-transform: uppercase;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.hero__eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--coral);
}
.hero__heading {
font-family: var(--font-serif);
font-size: clamp(47px, 4vw, 72px);
font-weight: 300;
line-height: 1.25;
color: var(--charcoal);
letter-spacing: .04em;
margin-bottom: 28px;
}
.hero__heading strong {
font-weight: 700;
color: var(--coral);
display: block;
}
.hero__badge {
display: flex;
align-items: center;
gap: 10px;
border-radius: 8px;
padding: 14px 0;
margin-bottom: 40px;
}
.hero__badge-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--coral);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.hero__badge-text {
font-size: 14px;
font-weight: 700;
color: var(--brown-mid);
letter-spacing: 0.06em;
line-height: 1.5;
}
.hero__badge-sub {
font-size: 12px;
color: var(--brown-mid);
letter-spacing: 0.04em;
} .hero__tagline {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 24px;
line-height: 2;
}
.hero__cta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.btn-primary {
width: 200px;
background: var(--coral);
color: #fff;
padding: 16px 36px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
transition: background .25s, transform .2s, box-shadow .25s;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 24px rgba(217,119,87,.35);
justify-content: center;
}
@media (hover: hover) {
.btn-primary:hover {
background: var(--coral-dk);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(217,119,87,.45);
}
}
.btn-primary-w {
background: var(--coral);
color: #fff;
padding: 16px 36px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
transition: background .25s, transform .2s, box-shadow .25s;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 24px rgba(217,119,87,.35);
justify-content: center;
}
@media (hover: hover) {
.btn-primary-w:hover {
background: var(--coral-dk);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(217,119,87,.45);
}
}
.btn-outline {
width: 200px;
border: 1.5px solid var(--stone);
color: var(--brown-mid);
padding: 15px 32px;
border-radius: var(--radius-pill);
font-size: 14px;
letter-spacing: .08em;
transition: border-color .25s, color .25s, background .25s;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
}
@media (hover: hover) {
.btn-outline:hover {
border-color: var(--coral);
color: var(--coral);
background: rgba(217,119,87,.06);
}
}
.btn-outline-w {
border: 1.5px solid var(--stone);
color: var(--brown-mid);
padding: 15px 32px;
border-radius: var(--radius-pill);
font-size: 14px;
letter-spacing: .08em;
transition: border-color .25s, color .25s, background .25s;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
}
@media (hover: hover) {
.btn-outline-w:hover {
border-color: var(--coral);
color: var(--coral);
background: rgba(217,119,87,.06);
}
} .hero::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
border: 1px solid rgba(217,119,87,.12);
right: -100px; bottom: -120px;
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
width: 450px;
height: 450px;
border-radius: 50%;
border: 1px solid rgba(217, 119, 87, .08);
right: -10px;
bottom: -50px;
pointer-events: none;
}   .intro-wrapper {
width: 100%;
background: rgba(217, 119, 87, .055);
}
.intro {
padding: var(--section-gap) clamp(28px, 6vw, 64px);
max-width: 1130px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
position: relative;
}
.intro::after {
content: '';
position: absolute;
left: 50%;
top: 10%;
height: 80%;
width: 1px;
background: linear-gradient(
to bottom,
transparent,
rgba(44,36,24,0.12) 20%,
rgba(44,36,24,0.12) 80%,
transparent
);
transform: translateX(-50%);
pointer-events: none;
} .intro__msg {
font-family: var(--font-serif);
font-size: clamp(38px, 4vw, 52px);
font-weight: 300;
line-height: 1.65;
color: var(--charcoal);
letter-spacing: .06em;
padding-right: clamp(32px, 5vw, 64px);
position: relative;
} .intro__msg::before {
content: 'Voice from the Field';
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--coral);
margin-bottom: 20px;
opacity: 0.85;
}
.intro__msg em {
font-style: normal;
color: var(--coral);
font-weight: 500;
display: block;
} .intro__body {
padding-left: clamp(32px, 5vw, 64px);
display: flex;
flex-direction: column;
gap: 28px;
}
.intro__body p {
font-family: var(--font-serif);
font-size: clamp(15px, 1.4vw, 15px);
font-weight: 500;
color: var(--text-muted);
line-height: 2.2;
} .intro__points {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 4px;
}
.intro__point {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: 13px;
color: #4A3A2A;
letter-spacing: 0.03em;
}
.intro__point-num {
font-family: 'Cormorant Garamond', serif;
font-size: 13px;
color: var(--coral);
font-weight: 300;
letter-spacing: 0.08em;
flex-shrink: 0;
opacity: 0.8;
}
@media (max-width: 640px) {
.intro {
grid-template-columns: 1fr;
gap: 0;
} .intro::after {
left: 0;
top: auto;
bottom: calc(50% - 1px); width: 100%;
height: 1px;
transform: none;
background: linear-gradient(
to right,
transparent,
rgba(44,36,24,0.12) 15%,
rgba(44,36,24,0.12) 85%,
transparent
);
}
.intro__msg {
padding-right: 0;
padding-bottom: clamp(36px, 8vw, 52px);
}
.intro__body {
padding-left: 0;
padding-top: clamp(36px, 8vw, 52px);
}
}   .voices {
background: var(--cream);
padding: 50px 40px 120px;
}
.voices-inner { max-width: 1100px; margin: 0 auto; }
.voices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.voice-card {
max-width: 348px;
margin: 0 auto;
background: #fff;
border-radius: var(--radius-md);
padding: 40px 32px;
position: relative;
box-shadow: var(--shadow-card);
transition: transform .3s, box-shadow .3s;
}
@media (hover: hover) {
.voice-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
}
.voice-card__quote {
font-family: var(--font-latin);
font-size: 72px;
line-height: .8;
color: var(--coral);
opacity: .18;
position: absolute;
top: 20px; 
right: 20px;
}
.voice-card__avatar {
width: 150px;
height: 150px;
margin: 0 auto 25px;
object-fit: cover;
border: 3px solid var(--sand);
border-radius: 100vh;
}
.voice-card h3 {
font-size: 17px;
font-weight: 600;
margin-bottom: 5px;
color: var(--charcoal);
line-height: 1.5;
}
.voice-card p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.9;
}
.voice-card__tag {
display: inline-block;
margin-top: 18px;
font-size: 11px;
letter-spacing: .12em;
color: var(--coral);
border: 1px solid rgba(217,119,87,.3);
padding: 4px 12px;
border-radius: var(--radius-pill);
} .voice-section--staff-photo {
display: flex;
justify-content: center;
}
.voice-staff-photo {
margin: 0;
text-align: center;
}
.voice-staff-photo img {
width: 100%;
max-width: 720px;
border-radius: 8px;
display: block;
margin: 0 auto;
}
.voice-staff-photo__caption {
margin-top: 8px;
font-size: 11px;
color: var(--text-muted);
text-align: right;
}   .solve {
padding: var(--section-gap) 40px;
max-width: 1100px;
margin: 0 auto;
}
.solve__headline {
font-family: var(--font-serif);
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 600;
text-align: center;
margin-bottom: 20px;
line-height: 1.6;
color: var(--charcoal);
}
.solve__headline em { color: var(--coral); font-style: normal; }
.solve__sub { text-align: center; color: var(--text-muted); font-size: 15px; margin-bottom: 64px; line-height: 1.9; } .solve-flow {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 32px;
align-items: center;
margin-bottom: 64px;
}
.solve-flow__problems {
display: flex;
flex-direction: column;
gap: 16px;
}
.problem-chip {
background: #fff;
border: 1.5px solid var(--sand);
border-radius: var(--radius-md);
padding: 18px 24px;
font-size: 14px;
color: var(--text-base);
display: flex;
align-items: center;
gap: 12px;
box-shadow: var(--shadow-soft);
}
.problem-chip::before {
content: '！';
background: var(--sand);
color: var(--coral);
width: 28px; height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 13px;
flex-shrink: 0;
}
.solve-flow__solutions {
display: flex;
flex-direction: column;
gap: 16px;
}
.solution-chip {
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-lt) 100%);
border-radius: var(--radius-md);
padding: 18px 24px;
font-size: 14px;
color: #fff;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 4px 20px rgba(217,119,87,.25);
}
.solution-chip::before {
content: '✓';
background: rgba(255,255,255,.25);
width: 28px; height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 13px;
flex-shrink: 0;
}
.solve-arrow{
display:flex;
flex-direction:column;
align-items:center;gap:8px;
}
.solve-arrow__icon{
width:48px;height:48px;
border-radius:50%;
background:#e48e69;
color:#fff;
display:grid;
place-items:center;
font-size:18px;
box-shadow:var(--sh-glow);
animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{box-shadow:0 0 0 0 rgba(217,119,87,.45)}
50%{box-shadow:0 0 0 12px rgba(217,119,87,0)}
}
.solve-arrow__label{
font-family:var(--font-latin);
font-size:10px;letter-spacing:.2em;
color:var(--text-muted);text-transform:uppercase;
}   .product {
background: var(--charcoal);
padding: var(--section-gap) 40px;
position: relative;
overflow: hidden;
}
.product::before {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(217,119,87,.12) 0%, transparent 70%);
top: -200px; right: -100px;
}
.product-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative; z-index: 1;
}
.product__text .section-label .jp,
.product__text .section-label .en { color: #fff; }
.product__text .section-label .jp { color: var(--cream); }
.product__text .section-label .en { color: var(--coral-lt); }
.product__text .section-label .rule { background: linear-gradient(90deg, var(--coral-lt), transparent); }
.product__subtitle {
font-family: var(--font-serif);
font-size: clamp(27px, 3vw, 36px);
color: #fff;
font-weight: 500;
margin-bottom: 28px;
line-height: 1.5;
}
.product__subtitle strong { color: var(--coral-lt); font-weight: 700; }
.product__body {
font-size: 14px;
font-weight: 400;
color: rgba(255,255,255,.65);
line-height: 2;
margin-bottom: 40px;
}
.product__links { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-ghost {
width: 200px;
border: 1px solid rgba(255,255,255,.25);
color: rgba(255,255,255,.85);
padding: 16px 28px;
border-radius: var(--radius-pill);
font-size: 13px;
letter-spacing: .08em;
transition: border-color .25s, color .25s, background .25s;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
}
@media (hover: hover) {
.btn-ghost:hover {
border-color: var(--coral-lt);
color: var(--coral-lt);
background: rgba(217,119,87,.08);
}
}
.btn-ghost-w {
border: 1px solid rgba(255,255,255,.25);
color: rgba(255,255,255,.85);
padding: 13px 28px;
border-radius: var(--radius-pill);
font-size: 13px;
letter-spacing: .08em;
transition: border-color .25s, color .25s, background .25s;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
}
@media (hover: hover) {
.btn-ghost-w:hover {
border-color: var(--coral-lt);
color: var(--coral-lt);
background: rgba(217,119,87,.08);
}
}
@media (max-width: 600px) {
.btn-ghost {
width: 100%;
justify-content: center;
}
.btn-ghost-w {
width: 100%;
justify-content: center;
}
}
.product__image-wrap {
position: relative;
}
.product__image-bg {
position: absolute;
inset: -20px;
background: radial-gradient(circle at 60% 50%, rgba(217,119,87,.15) 0%, transparent 70%);
border-radius: var(--radius-lg);
}
.product__image {
border-radius: var(--radius-lg);
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
position: relative; z-index: 1;
box-shadow: 0 24px 80px rgba(0,0,0,.4);
} .product__image-placeholder {
border-radius: var(--radius-lg);
width: 100%;
aspect-ratio: 4/3;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.3);
font-size: 14px;
letter-spacing: .1em;
font-family: var(--font-latin);
position: relative; z-index: 1;
max-width: 510px;
margin: 0 auto;
} .features {
padding: var(--section-gap) 40px;
background: var(--warm-white);
}
.features-inner {
max-width: 1200px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
} .feature-card {
background: #fff;
border: 1px solid var(--sand);
border-radius: 16px;
overflow: hidden;
position: relative;
transition: box-shadow .28s, transform .28s;
}
@media (hover: hover) {
.feature-card:hover {
box-shadow: 0 12px 48px rgba(44,36,32,.12);
transform: translateY(-4px);
}
} .feature-card__img-wrap {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.feature-card__img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) {
.feature-card:hover .feature-card__img-wrap img {
transform: scale(1.05);
}
} .feature-card__badge {
position: absolute; top: 14px; left: 14px;
background: rgba(253,248,243,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 4px 12px;
border-radius: var(--radius-pill);
font-family: var(--font-latin);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--coral);
} .feature-card__body {
padding: 24px 28px 28px;
position: relative;
}
.feature-card__num-deco {
position: absolute; right: 20px; bottom: 12px;
font-family: var(--font-latin); font-size: 80px; font-weight: 300;
color: rgb(255 198 170 / 20%); line-height: 1;
pointer-events: none; letter-spacing: -.04em;
}
.feature-card__body h3 {
font-family: var(--font-serif);
font-size: 20px; font-weight: 600;
color: var(--coral);
letter-spacing: .06em;
margin-bottom: 10px;
}
.feature-card__body p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 2;
position: relative; z-index: 1;
} @media (max-width: 600px) {
.features {
padding: 72px 24px;
}
.features-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.feature-card__img-wrap { height: 180px; }
}   .process {
background: var(--cream);
padding: 120px 40px 40px;
position: relative;
overflow: hidden;
}
.process::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 420px; height: 420px;
border-radius: 50%;
border: 1px solid rgba(217,119,87,.18);
pointer-events: none;
}
.process::after {
content: '';
position: absolute;
bottom: -100px; left: -100px;
width: 360px; height: 360px;
border-radius: 50%;
border: 1px solid rgba(200,184,164,.25);
pointer-events: none;
}
.process-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.process-steps {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.process-steps::before {
content: '';
position: absolute;
left: 30px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--coral), var(--sand));
}
.process-step {
display: flex;
gap: 15px;
align-items: flex-start;
padding: 0 0 48px 0;
position: relative;
}
.process-step__num {
width: 60px; height: 60px;
border-radius: 50%;
background: var(--coral); color: #fff;
font-family: var(--font-latin); font-size: 20px;
display: grid; place-items: center;
flex-shrink: 0;
position: relative; z-index: 1;
box-shadow: 0 4px 20px rgba(217,119,87,.35);
}
.process-step__content {
background: #fff;
border-radius: var(--radius-md);
padding: 28px 32px;
flex: 1;
box-shadow: var(--shadow-soft);
margin-top: 8px;
}
.process-step__content h3 {
font-family: var(--font-serif);
font-size: 18px; color: var(--charcoal);
margin-bottom: 10px;
}
.process-step__content p {
font-size: 13.5px; color: var(--text-muted); line-height: 1.9;
}
.process-step__time {
display: inline-block;
background: var(--sand); color: var(--coral);
font-size: 12px; font-family: var(--font-latin);
letter-spacing: .12em;
padding: 4px 14px; border-radius: var(--radius-pill);
margin-bottom: 10px;
}
.process-step__img {
width: 270px; flex-shrink: 0;
border-radius: var(--radius-md);
overflow: hidden;
margin-top: 8px;
box-shadow: var(--shadow-soft);
}
.process-step__img img {
width: 100%; height: 180px;
object-fit: cover; display: block;
}
@media (max-width: 640px) {
.process-step { flex-wrap: wrap; }
.process-step__img {
width: calc(100% - 75px); }
.process-step__img img { height: 200px; }
}   .subsidy {
padding: var(--section-gap) 40px;
max-width: 1100px;
margin: 0 auto;
}
.subsidy-card {
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-lt) 50%, #e8956e 100%);
border-radius: var(--radius-lg);
padding: 64px 72px;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
position: relative;
overflow: hidden;
}
.subsidy-card h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 3vw, 36px);
color: #fff;
font-weight: 600;
margin-bottom: 16px;
line-height: 1.5;
}
.subsidy-card p {
font-size: 15px;
color: rgba(255,255,255,.85);
line-height: 1.9;
}
.subsidy-card .btn-white {
background: #fff;
color: var(--coral);
padding: 16px 36px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 600;
letter-spacing: .06em;
white-space: nowrap;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
display: inline-block;
position: relative; z-index: 1;
}
@media (hover: hover) {
.subsidy-card .btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
}   .concerns {
background: var(--warm-white);
padding: var(--section-gap) 40px;
}
.concerns-inner { 
max-width: 1100px; 
margin: 0 auto; 
}
.concerns-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0 auto 35px;
}
.concern-card {
border: 1.5px solid var(--sand);
border-radius: var(--radius-md);
padding: 36px 28px;
transition: border-color .3s, box-shadow .3s;
cursor: default;
max-width: 324px;
margin: 0 auto;
}
@media (hover: hover) {
.concern-card:hover {
border-color: var(--coral);
box-shadow: 0 8px 32px rgba(217,119,87,.12);
}
}
.concern-card__icon {
font-size: 36px;
margin-bottom: 20px;
display: block;
}
.concern-card h3 {
font-family: var(--font-serif);
text-align: center;
font-size: 20px;
margin-bottom: 8px;
color: var(--charcoal);
line-height: 1.5;
}
.concern-card h3 span { color: var(--coral); }
.concern-card p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.9;
}   .exhibition {
background: var(--cream);
padding: var(--section-gap) 40px;
}
.exhibition-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 340px 1fr;
gap: 80px;
align-items: start;
}  .exh-flag {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.exh-flag__dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.exh-flag__text {
font-size: 13px; font-weight: 700;
letter-spacing: .1em;
}
.exh-flag__line {
display: block;
width: 100px; height: 1px;
opacity: .5;
} .exh-flag--upcoming .exh-flag__dot {
background: var(--coral);
box-shadow: 0 0 0 4px rgba(217,119,87,.18), 0 0 12px rgba(217,119,87,.35);
animation: exhPulse 2s ease-in-out infinite;
}
.exh-flag--upcoming .exh-flag__text { color: var(--coral); }
.exh-flag--upcoming .exh-flag__line {
background: linear-gradient(90deg, var(--coral) 0%, transparent 100%);
}
@keyframes exhPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(217,119,87,.18), 0 0 10px rgba(217,119,87,.3); }
50%       { box-shadow: 0 0 0 7px rgba(217,119,87,.08), 0 0 18px rgba(217,119,87,.45); }
} .exh-flag--past .exh-flag__dot { background: var(--stone); }
.exh-flag--past .exh-flag__text { color: var(--stone); }
.exh-flag--past .exh-flag__line {
background: linear-gradient(90deg, var(--stone) 0%, transparent 100%);
} .exh-sep {
display: flex; align-items: center; gap: 16px;
margin: 48px 0 32px;
color: var(--stone);
font-family: var(--font-latin);
font-size: 12px; letter-spacing: .25em;
}
.exh-sep::before, .exh-sep::after {
content: ''; flex: 1; height: 1px;
background: var(--stone); opacity: .35;
} .exh-accordion {
border: 1px solid var(--sand);
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
}
.exh-accordion__header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px;
cursor: pointer; transition: background .2s;
user-select: none;
}
.exh-accordion__left {
display: flex; align-items: baseline; gap: 6px;
}
.exh-accordion__num {
font-family: var(--font-latin);
font-size: 32px; font-weight: 300;
color: var(--coral); line-height: 1; letter-spacing: -.02em;
}
.exh-accordion__ja { font-size: 13px; color: var(--text-muted); }
.exh-accordion__count {
font-size: 11px; color: var(--stone);
margin-left: 8px; letter-spacing: .05em;
}
.exh-accordion__arrow {
font-size: 11px; color: var(--stone);
transition: transform .3s ease;
}
.exh-accordion.is-open .exh-accordion__arrow {
transform: rotate(180deg);
}
.exh-accordion__body {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease; }
.exh-accordion.is-open .exh-accordion__body {
max-height: 9999px;
}
.exh-accordion__inner {
padding: 20px 24px 28px;
} .exh-accordion .exh-card { opacity: .75; }
.exh-accordion .exh-card:hover { opacity: 1; } @media (max-width: 640px) {
.exh-accordion__header { padding: 14px 16px; }
.exh-accordion__num { font-size: 24px; }
.exh-accordion__inner { padding: 16px 16px 20px; }
} .exhibition__intro .en {
font-family: var(--font-latin);
font-size: 12px;
letter-spacing: .22em;
color: var(--coral);
text-transform: uppercase;
display: block;
margin-bottom: 24px;
}
.exhibition__intro h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 600;
color: var(--charcoal);
margin-bottom: 16px;
line-height: 1.5;
}
.exhibition__intro p {
font-size: 14px;
color: var(--text-muted);
line-height: 2;
margin-bottom: 32px;
} .region-list {
display: flex;
flex-direction: column;
gap: 8px;
} .region-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: var(--white);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background .2s;
user-select: none;
border: none;
width: 100%;
text-align: left;
border-bottom: 1px solid var(--sand);
}
@media (hover: hover) {
.region-header:hover { background: var(--sand); }
}
.region-header.open {
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background: var(--charcoal);
}
.region-header.open .region-name  { color: #fff; }
.region-header.open .region-count { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.region-header.open .region-arrow { color: #fff; transform: rotate(180deg); }
.region-name {
font-size: 14px;
font-weight: 700;
color: var(--charcoal);
}
.region-meta {
display: flex;
align-items: center;
gap: 10px;
}
.region-count {
font-size: 11px;
background: var(--sand);
color: var(--coral);
padding: 3px 10px;
border-radius: 20px;
font-weight: 600;
}
.region-arrow {
font-size: 10px;
color: var(--text-muted);
transition: transform .25s ease;
display: inline-block;
} .region-items {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .3s ease;
background: #fffdfb;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
overflow: hidden;
}
.region-items.open {
grid-template-rows: 1fr;
}
.region-items-inner {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1px;
} .region-item {
background: #fffdfb;
padding: 16px 20px;
display: grid;
grid-template-columns: 55px 1fr;
gap: 10px;
align-items: start;
transition: background .2s;
}
.region-item:last-child {
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
@media (hover: hover) {
.region-item:hover { background: #f9f1e5; }
}
.region-item .pref {
font-size: 11px;
font-weight: 700;
color: var(--coral);
letter-spacing: .06em;
padding-top: 10px;
}
.region-item .detail { display: flex; flex-direction: column; gap: 4px; }
.region-item .name a {
color: var(--text-base);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
border-bottom: 1px solid transparent;
transition: border-color .2s, color .2s;
}
@media (hover: hover) {
.region-item .name a:hover {
color: var(--coral);
border-bottom-color: var(--coral-light);
}
}
.region-item .addr {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
}
.region-item .tel a {
font-size: 13px;
color: #94847d;
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
}
@media (hover: hover) {
.region-item .tel a:hover { color: var(--coral); }
}
.region-item .tel a::before {
content: '\f095';
font-size: 11px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
flex-shrink: 0;
background-size: 8px;
background-repeat: no-repeat;
background-position: center;
} @media (max-width: 860px) {
.exhibition { padding: 60px 20px; }
.exhibition-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.exhibition__intro { text-align: center; }
}   @media (max-width: 1100px) {
.nav-links li a { padding: 8px 10px; font-size: 11.5px; }
.contact-btn { padding: 9px 16px; font-size: 12px; }
.logo { font-size: 12px; }
}
@media (max-width: 900px) { .header { display: none !important; }
.sp-menu { display: flex !important; }
body { padding-top: 75px; } .hero {
grid-template-columns: 1fr;
height: auto;
min-height: auto;
margin-top: 60px;
}
.hero__photo {
height: 55vw;
min-height: 260px;
}
.hero__photo::after { background: linear-gradient(to bottom, transparent 60%, var(--warm-white)); }
.hero__photo-clip { display: none; }
.hero__text {
padding: 40px 24px 48px;
text-align: center;
align-items: center;
}
.hero__eyebrow { justify-content: center; }
.hero__cta { justify-content: center; } .voices { padding: 20px 24px 74px; }
.voices-grid { grid-template-columns: 1fr; } .solve { padding-inline: 24px; }
.solve-flow {
grid-template-columns: 1fr;
gap: 20px;
}
.solve-arrow__icon {
transform: rotate(90deg);
} .product { padding: 72px 24px; }
.product-inner { grid-template-columns: 1fr; gap: 40px; } .process { padding: 72px 24px; } .subsidy { padding: 72px 24px; }
.subsidy-card {
grid-template-columns: 1fr;
padding: 40px 32px;
gap: 28px;
border-radius: var(--radius-md);
} .concerns { padding: 72px 24px; }
.concerns-grid { grid-template-columns: 1fr; } .exhibition { padding: 72px 24px; }
.exhibition-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
.hero__heading { 
font-size: clamp(35px, 8vw, 48px); 
}
.feature-card { 
flex-direction: column; 
}
.feature-card__img-wrap { 
width: 100%; 
height: auto; 
}
.feature-card__num { 
writing-mode: horizontal-tb; 
min-width: auto; 
padding: 10px 20px; 
}
.feature-card h3 {
text-align: center;
}
.subsidy-card .btn-white { 
width: 100%; 
text-align: center; 
}
.process-step__num {
width: 40px;
height: 40px;
font-size: 16px;
}
.process-steps::before {
left: 20px;
}
.process-step {
gap: 10px;
}
.hero__cta { 
flex-direction: column; 
width: 100%; 
}
.hero__cta a { 
justify-content: center; 
}
.btn-primary, .btn-outline { 
width: 100%; 
justify-content: center; 
}
}   @keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to   { opacity: 1; transform: translateY(0); }
}
.anim { opacity: 0; animation: fadeInUp .7s ease forwards; }
.anim-d1 { animation-delay: .1s; }
.anim-d2 { animation-delay: .25s; }
.anim-d3 { animation-delay: .4s; }
.anim-d4 { animation-delay: .55s; }   .wave-divider {
line-height: 0;
overflow: hidden;
}
.wave-divider svg { display: block; width: 100%; }   .design-notes {
background: var(--charcoal);
color: rgba(255,255,255,.7);
padding: 80px 40px;
}
.design-notes-inner { max-width: 900px; margin: 0 auto; }
.design-notes h2 {
font-family: var(--font-latin);
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--coral-lt);
margin-bottom: 48px;
display: flex;
align-items: center;
gap: 16px;
}
.design-notes h2::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.notes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.note-item h3 {
font-family: var(--font-serif);
font-size: 15px;
color: #fff;
margin-bottom: 10px;
}
.note-item p {
font-size: 12.5px;
line-height: 1.9;
color: rgba(255,255,255,.5);
}
.swatch-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.swatch {
width: 32px; height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
color: rgba(255,255,255,.7);
font-family: var(--font-latin);
letter-spacing: .05em;
text-align: center;
line-height: 1.2;
} .divider {
text-align: center;
padding: 40px 20px;
color: #b5998a;
font-size: 12px;
letter-spacing: 0.2em;
display: flex;
align-items: center;
gap: 16px;
max-width: 500px;
margin: 0 auto;
}
.divider::before, .divider::after {
content: '';
flex: 1;
height: 1px;
background: #ddd0c8;
}   .bottom-section {
padding-block: 0;
}
.bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
} .contact-box {
background: var(--charcoal);
padding: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 96px);
position: relative;
overflow: hidden;
}
.contact-box::before {
content: '';
position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(217,119,87,.22) 0%, transparent 65%);
bottom: -120px; right: -80px;
pointer-events: none;
}
.contact-box::after {
content: 'CONTACT';
position: absolute;
font-family: var(--font-latin);
font-size: clamp(48px, 5vw, 80px); font-weight: 300;
color: rgba(255,255,255,.04);
bottom: 16px; left: 24px;
pointer-events: none; user-select: none;
letter-spacing: .12em;
}
.contact-box .sec-label {
align-items: flex-start; text-align: left; margin-bottom: 20px;
}
.contact-box .en {
font-family: var(--font-latin);
font-size: 12px;
letter-spacing: .22em;
color: var(--coral);
text-transform: uppercase;
display: block;
margin-bottom: 24px;
}
.contact-box h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 600;
color: #fff;
margin-bottom: 16px;
line-height: 1.5;
}
.contact-box p {
font-size: 14px; color: rgba(255,255,255,.6);
line-height: 2; margin-bottom: 36px;
position: relative; z-index: 1;
} .news-box {
background: var(--cream);
padding: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 96px);
}
.news-box h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 600;
color: var(--charcoal);
margin-bottom: 16px;
line-height: 1.5;
}
.news-box .en {
font-family: var(--font-latin);
font-size: 12px;
letter-spacing: .22em;
color: var(--coral);
text-transform: uppercase;
display: block;
margin-bottom: 24px;
}
.news-item {
border-bottom: 1px solid var(--sand);
padding: 15px 0;
display: flex; gap: 12px; align-items: baseline;
font-size: 14px;
transition: padding-left .2s;
}
.news-item:last-child { border-bottom: none; }
.news-date {
color: var(--text-muted);
font-family: var(--font-latin); font-size: 11.5px; letter-spacing: .08em;
white-space: nowrap; flex-shrink: 0;
}
.news-cate {
font-size: 10px;
background: var(--orange-pale);
color: var(--coral);
padding: 2px 10px; border-radius: var(--r-pill);
white-space: nowrap; flex-shrink: 0;
border: 1px solid rgba(217,119,87,.2);
width: 80px;
text-align: center;
}
.news-title {
color: var(--text);
flex: 1; overflow: hidden; text-overflow: ellipsis;
}
@media (hover: hover) {
.news-item:hover .news-title { color: var(--coral); }
} @media (max-width: 1220px) {
.bottom-grid { grid-template-columns: 1fr; }
.news-item a {
flex-wrap: wrap;
}
.news-title {
flex-basis: 100%; white-space: normal; margin-top: 6px; }
}
@media (max-width: 600px) {
.news-item { flex-wrap: wrap; }
.news-title { white-space: normal; }
} .page-hero {
position: relative;
margin-top: var(--nav-h);
background: var(--warm-white);
padding: clamp(72px,11vw,130px) clamp(24px,5vw,80px) clamp(56px,8vw,80px);
overflow: hidden;
border-bottom: 1px solid rgba(200,180,160,.14);
} .page-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(217,119,87,.055) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
} .page-hero::after {
content: '';
position: absolute;
width: 500px; height: 500px; border-radius: 50%;
border: 1px solid rgba(217,119,87,.1);
right: -160px; top: -160px;
pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 1140px; margin-inline: auto; }
.page-hero__eyebrow {
font-family: var(--font-serif);
font-size: 11px;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--coral);
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.page-hero__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--coral); }
.page-hero__title {
font-family: var(--font-serif);
font-size: clamp(40px, 7vw, 76px);
font-weight: 200; line-height: 1.2;
color: var(--charcoal); letter-spacing: .04em; margin-bottom: 16px;
}
.page-hero__sub { font-size: 14px; color: var(--text-muted); letter-spacing: .08em; } .page-hero__deco {
position: absolute;
font-family: var(--font-serif);
font-size: clamp(120px,20vw,240px); font-weight: 300; font-style: italic;
color: rgba(217,119,87,.055);
right: clamp(20px,5vw,80px); bottom: -24px;
line-height: 1; pointer-events: none; user-select: none; z-index: 0;
}
.breadcrumb a { color: var(--coral); transition: opacity .2s; }
@media (hover: hover) {
.breadcrumb a:hover { opacity: .75; }
}
.breadcrumb__sep { color: var(--stone); } .sec-label {
display: flex; flex-direction: column; align-items: center;
gap: 8px; margin-bottom: clamp(40px,6vw,64px); text-align: center;
}
.sec-label__en {
font-family: var(--font-serif); font-size: 11px; letter-spacing: .3em;
text-transform: uppercase; color: var(--coral);
}
.sec-label__ja {
font-family: var(--font-serif);
font-size: clamp(24px,3.5vw,40px); font-weight: 300;
color: var(--charcoal); letter-spacing: .06em; line-height: 1.4;
}
.sec-label__rule {
width: 40px; height: 2px;
background: linear-gradient(90deg, var(--coral), transparent);
}
.sec-label--light .sec-label__ja { color: var(--cream); }
.sec-label--light .sec-label__en { color: var(--orange-lt); }
.sec-label--light .sec-label__rule { background: linear-gradient(90deg, var(--orange-lt), transparent); } .sec-label {
display: flex; flex-direction: column; align-items: center;
gap: 8px; margin-bottom: clamp(36px,5vw,60px); text-align: center;
}
.sec-label__en {
font-family: var(--font-latin); font-size: 11px;
letter-spacing: .3em; text-transform: uppercase; color: var(--coral);
}
.sec-label__rule {
width: 40px; height: 2px;
background: linear-gradient(90deg, var(--coral), transparent);
margin-top: 2px;
}
.sec-label--light .sec-label__en { color: var(--coral-lt); }
.sec-label--light .sec-label__rule { background: linear-gradient(90deg, var(--coral-lt), transparent); } .pb-section { padding-block: clamp(64px,10vw,var(--section-gap)); }
.pb-section--cream { background: var(--cream); }
.pb-section--dark {
background: var(--charcoal); position: relative; overflow: hidden;
}
.pb-section--dark::before {
content: ''; position: absolute;
width: 600px; height: 600px; border-radius: 50%;
background: radial-gradient(circle, rgba(217,119,87,.13) 0%, transparent 65%);
top: -200px; right: -120px; pointer-events: none;
}
.pb-section--dark::after {
content: ''; position: absolute;
width: 360px; height: 360px; border-radius: 50%;
background: radial-gradient(circle, rgba(217,119,87,.07) 0%, transparent 65%);
bottom: -100px; left: -80px; pointer-events: none;
}
.pb-inner {
max-width: 1140px; margin-inline: auto;
padding-inline: clamp(15px,3vw,60px);
position: relative; z-index: 1;
} .page-hero {
position: relative;
margin-top: var(--nav-h);
background: var(--warm-white);
padding: clamp(64px,11vw,130px) clamp(24px,5vw,80px) clamp(60px,8vw,80px);
overflow: hidden;
border-bottom: 1px solid rgba(200,184,164,.15);
}
.page-hero::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(217,119,87,.055) 1px, transparent 1px);
background-size: 28px 28px; pointer-events: none;
}
.page-hero::after {
content: ''; position: absolute;
width: 480px; height: 480px; border-radius: 50%;
border: 1px solid rgba(217,119,87,.1);
right: -150px; top: -150px; pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; }
.page-hero__eyebrow {
font-family: var(--font-latin); font-size: 11px;
letter-spacing: .32em; text-transform: uppercase; color: var(--coral);
display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.page-hero__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--coral); }
.page-hero__title {
font-family: var(--font-serif);
font-size: clamp(40px,7vw,72px);
font-weight: 400; line-height: 1.2;
color: var(--charcoal); letter-spacing: .04em; margin-bottom: 25px;
}
.page-hero__sub { font-size: 14px; color: var(--text-muted); letter-spacing: .08em; }
.page-hero__deco {
position: absolute;
font-family: var(--font-latin);
font-size: clamp(100px,18vw,220px); font-weight: 300; font-style: italic;
color: rgba(217,119,87,.055);
right: clamp(20px,5vw,80px); bottom: -20px;
line-height: 1; pointer-events: none; user-select: none; z-index: 0;
}
.breadcrumb {
position: absolute; bottom: 22px;
left: clamp(24px,5vw,80px);
font-size: 11.5px; letter-spacing: .08em; color: var(--text-muted);
display: flex; align-items: center; gap: 8px;
}
.breadcrumb a { color: var(--coral); transition: opacity .2s; }
@media (hover: hover) {
.breadcrumb a:hover { opacity: .7; }
}
.breadcrumb__sep { color: var(--stone); } .spec-wrap {
display: grid;
grid-template-columns: 400px 1fr;
gap: clamp(32px,5vw,72px);
align-items: start;
}
.spec-image { position: relative; }
.spec-image img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
}
.spec-badge {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: var(--coral); color: #fff;
font-size: 11.5px; letter-spacing: .07em; white-space: nowrap;
padding: 10px 22px; border-radius: var(--radius-pill);
box-shadow: 0 4px 20px rgba(217,119,87,.42);
display: flex; align-items: center; gap: 8px;
}
.spec-badge::before { content: '✦'; font-size: 9px; }
.spec-table-wrap { padding-top: 4px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-table th,
.spec-table td {
padding: 15px 18px;
border-bottom: 1px solid var(--sand);
text-align: left; line-height: 1.7; vertical-align: top;
}
.spec-table th {
width: 130px; font-weight: 600;
color: var(--brown-mid); font-size: 12.5px;
letter-spacing: .05em; white-space: nowrap;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }
.spec-table tbody tr { transition: background .2s; }
.spec-table tbody tr:hover td,
@media (hover: hover) {
.spec-table tbody tr:hover th { background: var(--coral-pale); }
}
.price {
font-family: var(--font-latin); font-size: 30px; font-weight: 500;
color: var(--coral); line-height: 1;
}
.price small { font-size: 14px; font-family: var(--font-sans); margin-left: 2px; }
.spec-dl { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } .movie-wrap { margin-bottom: clamp(40px,6vw,64px); }
.movie-frame {
position: relative; width: 100%; padding-top: 56.25%;
border-radius: var(--radius-md); overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.movie-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.movie-placeholder {
position: absolute; inset: 0;
background: linear-gradient(145deg, #2e2420, #1e1a17);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 16px;
}
.play-btn {
width: 72px; height: 72px; border-radius: 50%;
background: var(--coral); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 22px;
box-shadow: 0 0 0 12px rgba(217,119,87,.2); transition: transform .25s;
}
@media (hover: hover) {
.play-btn:hover { transform: scale(1.1); }
}
.movie-placeholder p { color: rgba(255,255,255,.4); font-size: 13px; letter-spacing: .1em; }
.how-steps {
display: grid; grid-template-columns: repeat(3,1fr);
gap: 16px; position: relative; z-index: 1;
}
.how-step {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--radius-md); padding: 28px 24px;
backdrop-filter: blur(8px);
transition: background .3s, border-color .3s, transform .3s;
}
@media (hover: hover) {
.how-step:hover {
background: rgba(255,255,255,.1);
border-color: rgba(217,119,87,.4);
transform: translateY(-4px);
}
}
.how-step__num {
font-family: var(--font-latin); font-size: 36px; font-weight: 300;
color: var(--coral-lt); line-height: 1; margin-bottom: 14px;
}
.how-step h3 {
font-family: var(--font-serif); font-size: 17px;
color: #fff; margin-bottom: 8px;
}
.how-step p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.9; }
.how-step__time {
display: inline-block; margin-top: 14px;
font-family: var(--font-latin); font-size: 11px; letter-spacing: .14em;
color: var(--coral-lt);
border: 1px solid rgba(217,119,87,.3);
padding: 3px 12px; border-radius: var(--radius-pill);
} .feat-block { margin-bottom: 12px; }
.feat-block__header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.feat-block__num {
font-family: var(--font-latin);
font-size: clamp(52px,8vw,88px); font-weight: 300; font-style: italic;
color: var(--coral); opacity: .2;
line-height: 1; flex-shrink: 0; user-select: none;
}
.feat-block__title {
font-family: var(--font-serif);
font-size: clamp(20px,3vw,28px); font-weight: 600; color: var(--charcoal);
}
.feat-block__body {
font-size: 14.5px; color: var(--text-muted);
line-height: 2.1; margin-bottom: 28px; max-width: 100%;
}
.feat-icons { 
display: flex; 
flex-wrap: wrap; 
gap: 16px; 
justify-content: center;
}
.feat-icons li {
background: #fff;
border: 1.5px solid var(--sand);
border-radius: var(--radius-md);
padding: 60px 18px; width: 280px; text-align: center;
transition: border-color .3s, box-shadow .3s, transform .3s;
position: relative; overflow: hidden;
}
.feat-icons li::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--coral), var(--coral-lt));
transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
@media (hover: hover) {
.feat-icons li:hover::before { transform: scaleX(1); }
}
@media (hover: hover) {
.feat-icons li:hover {
border-color: rgba(217,119,87,.28);
box-shadow: var(--shadow-card);
transform: translateY(-5px);
}
}
.feat-icon__img {
width: 110px; height: 110px; border-radius: 50%;
background: var(--coral-pale);
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
}
.feat-icon__img img { width: 100%; height: 100%; object-fit: contain; }
.feat-icons li p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
.feat-divider {
height: 1px;
background: linear-gradient(90deg, var(--coral) 0%, var(--sand) 60%, transparent 100%);
margin-block: clamp(40px,5vw,64px); opacity: .6;
} .pb-cta {
background: linear-gradient(125deg, var(--coral) 0%, var(--coral-lt) 55%, #eba882 100%);
padding: clamp(64px,9vw,100px) clamp(24px,5vw,60px);
text-align: center; position: relative; overflow: hidden;
}
.pb-cta::before {
content: 'CONTACT';
position: absolute;
font-family: var(--font-latin);
font-size: clamp(60px,12vw,160px); font-weight: 300;
color: rgba(255,255,255,.07);
top: 50%; left: 50%; transform: translate(-50%,-50%);
white-space: nowrap; pointer-events: none; letter-spacing: .12em;
}
.pb-cta::after {
content: ''; position: absolute;
top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 4s 1s ease-in-out infinite;
}
@keyframes shimmer { to { left: 140%; } }
.pb-cta__inner { position: relative; z-index: 1; max-width: 680px; margin-inline: auto; }
.pb-cta h2 {
font-family: var(--font-serif);
font-size: clamp(22px,3.5vw,38px); font-weight: 600;
color: #fff; margin-bottom: 25px; line-height: 1.7;
}
.pb-cta p {
font-size: 14.5px; color: rgba(255,255,255,.85);
line-height: 1.95; margin-bottom: 36px;
}
.pb-cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .footer {
background: var(--charcoal);
padding: 72px clamp(24px,6vw,100px) 0;
position: relative;
overflow: hidden;
} .footer::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(217,119,87,.06) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
} .footer::after {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
border: 1px solid rgba(217,119,87,.08);
left: 50%; top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
} .footer__inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,.08);
} .footer__tagline {
font-family: var(--font-latin);
font-size: 11px; letter-spacing: .28em;
text-transform: uppercase; color: var(--coral);
margin-bottom: 14px;
display: flex; align-items: center; gap: 10px;
}
.footer__tagline::before {
content: ''; width: 24px; height: 1px; background: var(--coral);
}
.footer__name {
font-family: var(--font-serif);
font-size: 31px; font-weight: 400;
color: #fff; letter-spacing: .08em;
margin-bottom: 20px; line-height: 1.4;
}
.footer__name em { color: var(--coral); font-style: normal; }
.footer__desc {
font-size: 14px; color: rgba(255,255,255,.4);
line-height: 2; letter-spacing: .06em;
} .footer__nav-title {
font-family: var(--font-latin);
font-size: 13px; letter-spacing: .24em;
text-transform: uppercase; color: var(--coral);
margin-bottom: 20px;
}
.footer__nav-list {
list-style: none;
display: flex; flex-direction: column; gap: 12px;
}
.footer__nav-list a {
font-size: 14.5px; color: rgba(255,255,255,.5);
letter-spacing: .06em;
transition: color .2s;
display: flex; align-items: center; gap: 8px;
}
.footer__nav-list a::before {
content: '→'; font-size: 10px;
color: var(--coral); opacity: .6;
}
@media (hover: hover) {
.footer__nav-list a:hover { color: #fff; }
} .footer__contact-title {
font-family: var(--font-latin);
font-size: 13px; letter-spacing: .24em;
text-transform: uppercase; color: var(--coral);
margin-bottom: 20px;
}
.footer__company {
font-size: 14px; color: rgba(255,255,255,.4);
line-height: 2.2; margin-bottom: 20px;
}
.footer__company a {
color: rgba(255,255,255,.6);
border-bottom: 1px solid rgba(255,255,255,.15);
padding-bottom: 1px;
} .footer__bottom {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 0;
position: relative; z-index: 1;
}
.footer__copy {
font-size: 11px; color: rgba(255,255,255,.25); letter-spacing: .06em;
}
.footer__badge {
font-family: var(--font-latin);
font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.2);
} .pagetop-center {
display: flex;
justify-content: center;
padding: 33px 0 20px;
background: var(--charcoal);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.pagetop-center a {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,.4);
text-decoration: none;
transition: color .25s;
}
.pagetop-center a .arrow {
font-size: 18px;
line-height: 1;
transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.pagetop-center a .label {
font-family: var(--font-latin);
font-size: 10px; letter-spacing: .28em;
text-transform: uppercase;
}
@media (hover: hover) {
.pagetop-center a:hover { color: var(--coral); }
}
@media (hover: hover) {
.pagetop-center a:hover .arrow { transform: translateY(-5px); }
} @media (max-width: 860px) {
.footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
.footer__inner { grid-template-columns: 1fr; gap: 36px; }
.footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
.footer__badge { display: none; }
} .reveal {
opacity: 0; transform: translateY(36px);
transition: opacity .75s cubic-bezier(.16,1,.3,1),
transform .75s cubic-bezier(.16,1,.3,1);
}
.from-left  { transform: translateX(-48px); }
.from-right { transform: translateX( 48px); }
.reveal.visible { opacity: 1 !important; transform: translate(0,0) !important; }
.d1 { transition-delay: .10s; }
.d2 { transition-delay: .22s; }
.d3 { transition-delay: .34s; }
.d4 { transition-delay: .46s; }
.hero-anim {
opacity: 0; transform: translateY(20px);
animation: heroFadeUp .85s cubic-bezier(.16,1,.3,1) forwards;
}
.ha1 { animation-delay: .15s; }
.ha2 { animation-delay: .32s; }
.ha3 { animation-delay: .50s; }
.ha4 { animation-delay: .68s; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } @media (max-width: 960px) {
body { padding-top: var(--sp-nav-h); } .header   { display: none; }
.sp-header { display: flex; }
.sp-drawer { display: block; } .page-hero { margin-top: 0; padding: clamp(100px,8vw,72px) clamp(20px,5vw,40px) 56px; }
.page-hero__deco { font-size: clamp(80px,18vw,130px); right: 16px; }
.breadcrumb { bottom: 16px; left: clamp(20px,5vw,40px); } .spec-wrap { grid-template-columns: 1fr; gap: 40px; }
.spec-image img { 
width: 70%;
height: auto;
margin: 0 auto;
} .how-steps { grid-template-columns: 1fr; gap: 14px; } .feat-icons li { width: calc(50% - 8px); }
} @media (max-width: 600px) { .page-hero__title { font-size: clamp(32px,8vw,48px); }
.page-hero__deco  { display: none; } .spec-table th { width: 90px; font-size: 13px; padding: 12px 10px; }
.spec-table td { padding: 12px 10px; font-size: 14px; }
.spec-badge { font-size: 10.5px; padding: 8px 14px; white-space: nowrap; } .spec-dl { flex-direction: column; align-items: center;}
.spec-dl .btn { width: 100%; justify-content: center; } .feat-icons li { width: 100%; }
.feat-icons { gap: 12px; } .pb-cta__btns { flex-direction: column; align-items: center; }
.pb-cta__btns .btn { width: 100%; justify-content: center; max-width: 340px; }
}
.yt-modal {
max-width: 960px;
margin: 50px auto 20px;
}
.yt-modal__open {
position: relative;
display: block;
width: 100%;
max-width: 960px;
aspect-ratio: 16 / 9;
border: 0;
padding: 0;
background: #000;
overflow: hidden;
border-radius: 12px;
cursor: pointer;
}
.yt-modal__open img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.yt-dialog[hidden] { display: none; }
.yt-dialog {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
}
.yt-dialog__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
}
.yt-dialog__panel {
position: relative;
width: min(1200px, calc(100% - 32px));
aspect-ratio: 16 / 9;
margin: 0;
background: #000;
border-radius: 12px;
overflow: hidden;
}
.yt-dialog__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 24px;
line-height: 40px;
cursor: pointer;
}
.yt-dialog__player {
position: absolute;
inset: 0;
}
.yt-dialog__player iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
} body.is-modal-open {
overflow: hidden;
touch-action: none;
} .page-btn {
display: inline-flex; align-items: center; gap: 8px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 13.5px; font-weight: 600; letter-spacing: .08em;
transition: all .25s ease; cursor: pointer; white-space: nowrap;
width: 220px;
justify-content: center;
}
.btn-fill {
background: var(--coral); color: #fff !important;
padding: 14px 32px;
box-shadow: var(--shadow-glow);
}
@media (hover: hover) {
.btn-fill:hover { background: var(--coral-dk); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(217,119,87,.42); }
}
@media (hover: hover) {
.btn-fill:hover .arr { transform: translateX(5px); }
}
.btn-line {
border: 1.5px solid var(--stone); color: var(--brown-mid) !important;
padding: 13px 28px;
}
@media (hover: hover) {
.btn-line:hover { border-color: var(--coral); color: var(--coral) !important; background: var(--coral-pale); }
}
.btn-ghost-w {
border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.88) !important;
padding: 13px 28px;
}
@media (hover: hover) {
.btn-ghost-w:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0, 0, 0, .2); }
}
.btn-white {
background: #fff; color: var(--coral) !important;
padding: 14px 32px; font-weight: 600;
box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
@media (hover: hover) {
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,.2); }
}
.arr { display: inline-block; transition: transform .22s; }
@media (max-width: 600px) {
}  .htf-phase {
margin-bottom: 0;
}
.htf-phase--second {
margin-top: 40px;
} .htf-phase__label {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.htf-phase__bar {
width: 3px;
height: 22px;
background: var(--coral);
border-radius: 2px;
flex-shrink: 0;
}
.htf-phase__en {
font-family: var(--font-latin);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--coral);
text-transform: uppercase;
display: block;
line-height: 1.3;
}
.htf-phase__ja {
font-size: 15px;
font-weight: 700;
color: var(--charcoal);
letter-spacing: 0.05em;
display: block;
} .htf-flow {
display: flex;
flex-direction: column;
} .htf-step {
display: flex;
}
.htf-step__left {
display: flex;
flex-direction: column;
align-items: center;
width: 52px;
flex-shrink: 0;
}
.htf-step__num {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--coral);
color: #fff;
font-family: var(--font-latin);
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.htf-step__line {
width: 1px;
flex: 1;
min-height: 20px;
background: var(--stone);
opacity: 0.45;
margin: 4px 0;
}
.htf-step:last-child .htf-step__line {
display: none;
}
.htf-step__body {
flex: 1;
padding: 0 0 24px 20px;
} .htf-card {
background: var(--warm-white);
border-radius: var(--radius-sm);
padding: 18px 20px;
border: 1px solid rgba(200, 184, 164, 0.45);
}
.htf-card__title {
font-size: 16px;
font-weight: 700;
color: var(--charcoal);
letter-spacing: 0.04em;
margin-bottom: 7px;
}
.htf-card__desc {
font-size: 14px;
color: var(--text-base);
line-height: 1.85;
} .htf-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.htf-tag {
background: var(--sand);
border-radius: 4px;
padding: 3px 10px;
font-size: 11.5px;
color: var(--brown-mid);
font-weight: 500;
letter-spacing: 0.02em;
}
.htf-tag--accent {
background: rgba(217, 119, 87, 0.1);
color: var(--coral);
border: 1px solid rgba(217, 119, 87, 0.25);
} .htf-note {
margin-top: 10px;
border-radius: 5px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.75;
}
.htf-note--caution {
background: rgba(217, 119, 87, 0.08);
color: var(--brown-mid);
}
.htf-note--good {
background: rgba(200, 184, 164, 0.2);
color: var(--text-muted);
} .htf-functions {
margin-top: 52px;
padding-top: 44px; }
.htf-functions__head {
margin-bottom: 24px;
}
.htf-functions__en {
font-family: var(--font-latin);
font-size: 13px;
letter-spacing: 0.2em;
color: var(--coral);
display: block;
margin-bottom: 5px;
text-transform: uppercase;
}
.htf-functions__ja {
font-size: 18px;
font-weight: 700;
color: var(--charcoal);
letter-spacing: 0.05em;
display: block;
}
.htf-func-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.htf-func-card {
background: var(--warm-white);
border: 1px solid rgba(200, 184, 164, 0.45);
border-radius: var(--radius-sm);
padding: 18px 20px;
}
.htf-func-card__en {
font-family: var(--font-latin);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--coral);
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
.htf-func-card h3 {
font-size: 15.5px;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 8px;
letter-spacing: 0.03em;
}
.htf-func-card p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.8;
} @media (max-width: 600px) {
.htf-func-grid {
grid-template-columns: 1fr;
}
.htf-step__left {
width: 40px;
}
.htf-step__num {
width: 34px;
height: 34px;
font-size: 12px;
}
.htf-step__body {
padding-left: 14px;
}
}  .voice-intro {
display: flex; align-items: center; gap: 48px;
background: var(--cream);
border-radius: var(--radius-md);
padding: 40px 48px;
margin-bottom: clamp(48px,7vw,80px);
border: 1px solid rgba(200,184,164,.25);
}
.voice-intro__num {
text-align: center; flex-shrink: 0;
}
.voice-intro__num .count {
font-family: var(--font-latin);
font-size: 80px; font-weight: 300; line-height: 1;
color: var(--coral); display: block;
}
.voice-intro__num .label {
font-size: 11px; letter-spacing: .2em;
color: var(--text-muted); display: block;
margin-top: 4px;
}
.voice-intro__divider {
width: 1px; height: 80px;
background: linear-gradient(to bottom, transparent, var(--stone), transparent);
flex-shrink: 0;
}
.voice-intro__text p {
font-size: 15px; line-height: 2.1;
color: var(--text-muted);
}
.voice-intro__text strong { color: var(--text-base); } .voice-tabs {
margin-bottom: 48px;
}
.voice-tabs__list {
display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
margin-bottom: 0;
}
.voice-tabs__btn {
appearance: none; border: none; cursor: pointer;
font-family: var(--font-sans);
font-size: 13px; font-weight: 500; letter-spacing: .06em;
padding: 12px 24px;
border-radius: var(--radius-pill);
background: var(--sand);
color: var(--text-muted);
border: 1.5px solid transparent;
transition: all .25s ease;
white-space: nowrap;
display: flex; align-items: center; gap: 8px;
margin-bottom: 1px;
}
@media (hover: hover) {
.voice-tabs__btn:hover {
border-color: var(--coral);
color: var(--coral);
background: var(--coral-pale);
}
}
.voice-tabs__btn.active {
background: var(--coral);
color: #fff;
border-color: var(--coral);
box-shadow: 0 3px 3px rgba(217,119,87,.35);
}
.voice-tabs__btn .tab-num {
font-family: var(--font-latin);
font-size: 10px; letter-spacing: .1em;
opacity: .7;
}
.voice-tabs__btn.active .tab-num { opacity: .85; }
.voice-tabs__rule {
height: 1px;
background: linear-gradient(90deg, var(--coral) 0%, var(--sand) 50%, transparent 100%);
margin-top: 24px;
opacity: .5;
} .voice-panels { position: relative; }
.voice-panel { display: none; }
.voice-panel.active { display: block; } .voice-article {
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid rgba(200,184,164,.15);
text-align: justify;
}
.voice-article__head {
background: linear-gradient(125deg, var(--charcoal) 0%, #3d3330 100%);
padding: 36px 48px;
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
}
.voice-article__head::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(217,119,87,.08) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.voice-article__head::after {
content: '';
position: absolute;
width: 360px; height: 360px; border-radius: 50%;
background: radial-gradient(circle, rgba(217,119,87,.18) 0%, transparent 65%);
right: -80px; top: -160px; pointer-events: none;
}
.voice-article__facility { position: relative; z-index: 1; }
.voice-article__facility-en {
font-family: var(--font-latin);
font-size: 11px; letter-spacing: .28em;
color: var(--coral-lt); text-transform: uppercase;
display: block; margin-bottom: 10px;
}
.voice-article__facility-name {
font-family: var(--font-serif);
font-size: clamp(22px,3vw,34px); font-weight: 300;
color: #fff; letter-spacing: .06em; line-height: 1.3;
display: block;
}
.voice-article__facility-type {
font-size: 12px; color: rgba(255,255,255,.5);
letter-spacing: .1em; display: block; margin-top: 8px;
}
.voice-article__location {
position: relative; z-index: 1;
text-align: right; flex-shrink: 0;
}
.voice-article__location-label {
font-family: var(--font-latin);
font-size: 10px; letter-spacing: .2em;
color: rgba(255,255,255,.35); display: block; margin-bottom: 4px;
text-transform: uppercase;
}
.voice-article__location-text {
font-size: 13px; color: rgba(255,255,255,.65);
letter-spacing: .06em; display: block;
}
.voice-article__catch {
border-left: 3px solid var(--coral);
margin: 48px 48px 0;
padding: 20px 28px;
background: var(--coral-pale);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.voice-article__catch p {
font-family: var(--font-serif);
font-size: clamp(18px,2vw,22px); font-weight: 400;
color: var(--charcoal); letter-spacing: .04em; line-height: 1.7;
}
.voice-article__catch p strong { color: var(--coral); }
.voice-article__body {
padding: 40px 48px 48px;
display: flex; flex-direction: column; gap: 40px;
} .voice-section__label {
display: flex; align-items: center; gap: 12px;
margin-bottom: 20px;
}
.voice-section__icon {
width: 32px; height: 32px; border-radius: 50%;
background: var(--coral); color: #fff;
font-family: var(--font-latin);
font-size: 12px; font-weight: 500;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.voice-section__title {
font-size: 16px; font-weight: 700;
color: var(--charcoal); letter-spacing: .06em;
}
.voice-section__title span {
display: block; font-size: 13.5px; font-weight: 400;
color: var(--coral); letter-spacing: .2em;
text-transform: uppercase; font-family: var(--font-latin);
margin-bottom: 3px;
}
.voice-section p {
font-size: 15px; color: var(--text-muted);
line-height: 2.1; padding-left: 44px;
}
.voice-section p strong { color: var(--text-base); font-weight: 700; }
.voice-section--media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px; align-items: start;
}
.voice-section--media .voice-section__photo {
border-radius: var(--radius-sm);
overflow: hidden;
aspect-ratio: 4/3;
background: var(--sand);
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--text-muted);
letter-spacing: .1em;
}
.voice-section--media .voice-section__photo img {
width: 100%; height: 100%; object-fit: cover;
}
.voice-section__photo-caption {
font-size: 11px; color: var(--text-muted);
text-align: right; margin-top: 10px;
letter-spacing: .06em;
} .voice-episode {
background: var(--cream);
border-radius: var(--radius-md);
padding: 32px 40px;
border: 1px solid rgba(200,184,164,.25);
position: relative; overflow: hidden;
}
.voice-episode::before {
content: '"';
font-family: var(--font-latin);
font-size: 160px; font-weight: 300;
color: rgba(217,119,87,.1);
position: absolute; top: -30px; left: 16px;
line-height: 1; pointer-events: none;
}
.voice-episode__label {
font-family: var(--font-latin);
font-size: 15px; letter-spacing: .28em; font-weight: 700;
text-transform: uppercase; color: var(--coral);
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px;
position: relative; z-index: 1;
}
.voice-episode__label::before { content: ''; width: 24px; height: 1px; background: var(--coral); }
.voice-episode p {
font-size: 14px; line-height: 2.1;
color: var(--text-muted); position: relative; z-index: 1;
padding-left: 0;
}
.voice-episode p strong { color: var(--text-base); } .voice-facility-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0; align-items: center;
background: var(--cream);
border-radius: var(--radius-md);
border: 1px solid rgba(200,184,164,.25);
overflow: hidden;
}
.voice-facility-card__photo { background: var(--sand);
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--text-muted);
}
.voice-facility-card__photo img {
width: 100%; 
height: auto; object-fit: cover;
}
.voice-facility-card__info {
padding: 20px 36px;
}
.voice-facility-card__en {
font-family: var(--font-latin);
font-size: 13.5px; letter-spacing: .28em;
text-transform: uppercase; color: var(--coral);
display: block; margin-bottom: 12px;
}
.voice-facility-card__name {
font-family: var(--font-serif);
font-size: clamp(18px,2.5vw,26px); font-weight: 600;
color: var(--charcoal); letter-spacing: .04em;
margin-bottom: 10px;
}
.voice-facility-card__type {
font-size: 13px; color: var(--coral);
letter-spacing: .1em; margin-bottom: 16px;
border: 1px solid rgba(217,119,87,.3);
display: inline-block; padding: 3px 12px;
border-radius: var(--radius-pill);
}
.voice-facility-card__address {
font-size: 14px; color: var(--text-muted);
letter-spacing: .06em; line-height: 1.8;
} .voice-summary {
background: linear-gradient(125deg, var(--coral) 0%, var(--coral-lt) 60%, #eba882 100%);
border-radius: var(--radius-md);
padding: 40px 48px;
text-align: center;
position: relative; overflow: hidden;
}
.voice-summary::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 22px 22px;
}
.voice-summary__label {
font-family: var(--font-latin);
font-size: 10px; letter-spacing: .28em;
text-transform: uppercase; color: rgba(255,255,255,.7);
display: block; margin-bottom: 16px;
position: relative;
}
.voice-summary__quote {
font-family: var(--font-serif);
font-size: clamp(20px,2.5vw,26px); font-weight: 600;
color: #fff; line-height: 1.6; letter-spacing: .06em;
position: relative;
}
.voice-summary__sub {
font-size: 15px; color: rgba(255,255,255,.75);
margin-top: 16px; line-height: 1.9;
position: relative;
}
.voice-summary__person {
display: grid;
grid-template-columns: 200px 1fr;
gap: 36px; align-items: center;
justify-content: center;
margin-top: 36px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.15);
position: relative;
text-align: center;
max-width: 500px;
margin-inline: auto;
}
.voice-summary__avatar {
width: 200px; height: 200px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.voice-summary__avatar img {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.voice-summary__by {
font-family: var(--font-sans);
font-size: 15px; font-weight: 700;
letter-spacing: .06em;
color: #fff;
text-align: center;
}
.voice-summary__by small {
display: block; font-size: 12px; font-weight: 400;
color: rgba(255,255,255,.6);
margin-top: 6px; letter-spacing: .1em;
} @media (max-width: 960px) {
.voice-intro { flex-direction: column; gap: 15px; padding: 32px; }
.voice-intro__divider { width: 60px; height: 1px; }
.voice-article__head { flex-direction: column; align-items: flex-start; padding: 28px 20px; }
.voice-article__location { text-align: left; }
.voice-article__catch { margin: 32px 32px 0; padding: 16px 20px; }
.voice-article__body { padding: 28px 32px 36px; gap: 32px; }
.voice-section--media { grid-template-columns: 1fr; }
.voice-facility-card { grid-template-columns: 1fr; }
.voice-facility-card__info { padding: 24px 28px 28px; }
.voice-summary { padding: 30px 20px; }
.voice-summary__person { gap: 5px; }
}
@media (max-width: 600px) {
.voice-tabs__btn { font-size: 12px; padding: 10px 16px; }
.voice-episode { padding: 24px 20px; }
.voice-article__body { padding: 24px 15px 32px; }
.voice-article__catch { margin: 24px 24px 0; }
.voice-summary__sub { text-align:justify; }
.voice-summary__person { display:block; margin: 25px auto 0; }
.voice-summary__avatar { width: 170px; height: 170px; margin: 0 auto 20px; }
.voice-section p { padding: 0 5px }
.voice-episode__label::before { content:none }
}  .faq-block {
max-width: 860px;
margin-inline: auto;
}
.faq-category {
margin-bottom: 64px;
}
.faq-category:last-child {
margin-bottom: 0;
}
.faq-category__label {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--sand);
position: relative;
}
.faq-category__label::before {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 60px; height: 2px;
background: linear-gradient(90deg, var(--coral), transparent);
}
.faq-category__en {
font-family: var(--font-latin);
font-size: 11px; letter-spacing: .28em;
text-transform: uppercase; color: var(--coral);
}
.faq-category__ja {
font-family: var(--font-serif);
font-size: 18px; font-weight: 600;
color: var(--charcoal); letter-spacing: .06em;
} .faq-list {
display: flex;
flex-direction: column;
gap: 12px;
list-style: none;
padding: 0; margin: 0;
} .faq-item {
background: #fff;
border-radius: var(--radius-sm);
border: 1px solid rgba(200,184,164,.2);
overflow: hidden;
transition: box-shadow .3s, border-color .3s;
}
@media (hover: hover) {
.faq-item:hover {
border-color: rgba(217,119,87,.25);
box-shadow: var(--shadow-soft);
}
}
.faq-item.is-open {
border-color: rgba(217,119,87,.35);
box-shadow: var(--shadow-card);
} .faq-q {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: background .2s;
}
@media (hover: hover) {
.faq-q:hover {
background: var(--coral-pale);
}
}
.faq-item.is-open .faq-q {
background: var(--coral-pale);
}
.faq-q__icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--coral);
color: #fff;
font-family: var(--font-latin);
font-size: 14px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
letter-spacing: 0;
}
.faq-q__text {
flex: 1;
font-family: var(--font-sans);
font-size: 15px; font-weight: 600;
color: var(--charcoal);
line-height: 1.65;
letter-spacing: .03em;
}
.faq-q__arrow {
flex-shrink: 0;
width: 20px; height: 20px;
position: relative;
}
.faq-q__arrow::before,
.faq-q__arrow::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 8px; height: 1.5px;
background: var(--stone);
border-radius: 2px;
transition: transform .3s cubic-bezier(.16,1,.3,1), background .2s;
}
.faq-q__arrow::before { transform: translate(-50%,-50%) rotate(-45deg) translateX(3px); }
.faq-q__arrow::after  { transform: translate(-50%,-50%) rotate(45deg)  translateX(-3px); }
.faq-item.is-open .faq-q__arrow::before { transform: translate(-50%,-50%) rotate(45deg)  translateX(3px); background: var(--coral); }
.faq-item.is-open .faq-q__arrow::after  { transform: translate(-50%,-50%) rotate(-45deg) translateX(-3px); background: var(--coral); } .faq-a {
padding: 0 24px 24px 72px;
position: relative;
}
.faq-a::before {
content: 'A';
position: absolute;
left: 24px; top: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--sand);
color: var(--coral);
font-family: var(--font-latin);
font-size: 14px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.faq-a[hidden] { display: none; }
.faq-a p {
font-size: 14px;
color: var(--text-muted);
line-height: 2.1;
}
.faq-a p strong { color: var(--text-base); font-weight: 700; }
.faq-a a {
color: var(--coral);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity .2s;
}
@media (hover: hover) {
.faq-a a:hover { opacity: .75; }
} @media (max-width: 600px) {
.faq-category__ja { font-size: 15px; }
.faq-q { padding: 18px 16px; gap: 12px; }
.faq-q__text { font-size: 14px; }
.faq-a { padding: 0 16px 20px 60px; }
} .pp-wrap {
max-width: 800px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 0;
} .pp-block {
padding: 36px 0;
border-bottom: 1px solid var(--sand);
display: grid;
grid-template-columns: 220px 1fr;
gap: 32px;
align-items: baseline;
}
.pp-block:first-child { padding-top: 0; }
.pp-block__title {
font-family: var(--font-serif);
font-size: 14px; font-weight: 600;
color: var(--brown-mid);
letter-spacing: .06em;
line-height: 1.7;
position: relative;
padding-left: 14px;
}
.pp-block__title::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 16px;
background: var(--coral);
border-radius: 2px;
}
.pp-block__text {
font-size: 14px;
color: var(--text-muted);
line-height: 2.1;
}
.pp-block__list {
list-style: none;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
grid-column: 2;
}
.pp-block__list li {
font-size: 14px;
color: var(--text-muted);
line-height: 1.8;
padding-left: 16px;
position: relative;
}
.pp-block__list li::before {
content: '・';
position: absolute; left: 0;
color: var(--coral);
} .pp-contact {
padding: 48px 0 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.pp-contact__text {
font-size: 14px;
color: var(--text-muted);
line-height: 2;
}
.pp-contact__company {
font-size: 13px;
color: var(--brown-mid);
font-weight: 600;
letter-spacing: .06em;
} @media (max-width: 640px) {
.pp-block {
grid-template-columns: 1fr;
gap: 12px;
padding: 28px 0;
}
.pp-block__list { grid-column: 1; }
}  .exh-year {
display: flex; align-items: center; gap: 8px;
margin-bottom: 40px; margin-top: 10px;
}
.exh-year:first-of-type { margin-top: 0; }
.exh-year__num {
font-family: var(--font-latin); font-size: 52px; font-weight: 300;
color: var(--coral); line-height: 1; letter-spacing: -.02em;
}
.exh-year__label { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.exh-year__rule {
flex: 1; height: 1px;
background: linear-gradient(90deg, var(--sand) 0%, transparent 100%);
margin-left: 8px;
} .exh-month {
display: grid; grid-template-columns: 88px 1fr;
gap: 0 32px; margin-bottom: 40px;
}
.exh-month__head {
display: flex; flex-direction: column;
align-items: flex-end; padding-top: 18px;
border-right: 1px solid var(--sand);
padding-right: 24px; gap: 4px;
}
.exh-month__num {
font-family: var(--font-latin); font-size: 40px; font-weight: 300;
color: var(--brown-mid); line-height: 1; letter-spacing: -.02em;
}
.exh-month__en {
font-family: var(--font-latin); font-size: 10px; letter-spacing: .18em;
text-transform: uppercase; color: var(--stone);
}
.exh-month__body { display: flex; flex-direction: column; gap: 12px; padding-left: 4px; } .exh-card {
background: #fff; border-radius: 12px;
border: 1px solid var(--sand);
transition: box-shadow .25s, transform .25s;
}
@media (hover: hover) {
.exh-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
}
.exh-card__inner {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 8px 24px;
padding: 20px 24px;
align-items: center;
} .exh-card__meta {
grid-column: 1; grid-row: 1;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.exh-card__date {
font-size: 12px; font-weight: 600; color: var(--coral);
letter-spacing: .04em;
background: rgba(217,119,87,.08);
padding: 3px 12px; border-radius: var(--radius-pill);
}
.exh-card__pref {
font-size: 11.5px; font-weight: 600; color: var(--brown-mid);
letter-spacing: .06em;
background: var(--sand);
padding: 3px 12px; border-radius: var(--radius-pill);
} .exh-card__content {
grid-column: 1; grid-row: 2;
display: flex; flex-direction: column; gap: 6px;
}
.exh-card__title {
font-size: 15px; font-weight: 600;
color: var(--text-base); line-height: 1.7; letter-spacing: .04em;
}
.exh-card__venue {
font-size: 13.5px; color: var(--text-muted);
display: flex; align-items: center; gap: 5px; letter-spacing: .03em;
align-items: baseline;
} .exh-card__action {
grid-column: 2; grid-row: 1 / 3; align-self: center;
}
.exh-card__link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--coral);
letter-spacing: .04em;
border: 1px solid rgba(217,119,87,.3);
padding: 8px 18px; border-radius: var(--radius-pill);
white-space: nowrap; transition: background .2s, color .2s;
align-items: baseline;
}
@media (hover: hover) {
.exh-card__link:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
} .exh-empty {
text-align: center; padding: 80px 0;
color: var(--text-muted); font-size: 14px; line-height: 2.2;
} @media (max-width: 640px) {
.exh-year__num { font-size: 36px; }
.exh-month { grid-template-columns: 45px 1fr; gap: 0 7px; }
.exh-month__head { padding-right: 14px; padding-top: 12px; }
.exh-month__num { font-size: 28px; }
.exh-month__en { writing-mode: vertical-rl; margin: 15px auto 0; }
.exh-card__inner {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 10px; padding: 16px;
}
.exh-card__action { grid-column: 1; grid-row: 3; }
.exh-card__link { width: 100%; justify-content: center; }
}  .contact-lead {
text-align: center;
margin-bottom: 56px;
}
.contact-lead p {
font-size: 14px;
color: var(--text-muted);
line-height: 2.2;
letter-spacing: .04em;
} .contact-form-wrap {
max-width: 900px;
margin-inline: auto;
background: #fff;
border-radius: 16px;
border: 1px solid var(--sand);
padding: clamp(32px,5vw,56px);
} .cf-field {
margin-bottom: 32px;
}
.cf-field:last-of-type { margin-bottom: 0; } .cf-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-serif);
font-size: 15px;
font-weight: 600;
color: var(--text-base);
letter-spacing: .06em;
margin-bottom: 12px;
}
.cf-label--required::after {
content: '必須';
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
color: #fff;
background: var(--coral);
padding: 2px 8px;
border-radius: var(--radius-pill);
letter-spacing: .06em;
}
.cf-label--optional::after {
content: '任意';
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
background: var(--sand);
padding: 2px 8px;
border-radius: var(--radius-pill);
letter-spacing: .06em;
} .cf-input {
height: 46px;
padding: 0 16px;
border: 1.5px solid var(--sand);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-base);
background: var(--warm-white);
transition: border-color .2s, box-shadow .2s;
width: 180px;
}
.cf-input--wide { width: 100%; }
.cf-input:focus {
outline: none;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(217,119,87,.12);
} .cf-name-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.cf-name-row .cf-sama {
flex-shrink: 0;
white-space: nowrap;
}
.cf-name-unit {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.cf-name-unit--wide {
flex: 1;
}
.cf-name-unit--wide .cf-input { width: 100%; }
.cf-sama {
font-size: 14px;
color: var(--text-muted);
white-space: nowrap;
} .cf-note {
margin-top: 8px;
font-size: 12px;
color: var(--text-muted);
letter-spacing: .04em;
} .cf-textarea {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--sand);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-base);
background: var(--warm-white);
resize: vertical;
transition: border-color .2s, box-shadow .2s;
line-height: 1.8;
}
.cf-textarea:focus {
outline: none;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(217,119,87,.12);
} .cf-radio-group {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.cf-radio {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.cf-radio input[type="radio"] {
display: none;
}
.cf-radio__box {
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid var(--stone);
background: #fff;
flex-shrink: 0;
position: relative;
transition: border-color .2s;
}
.cf-radio__box::after {
content: '';
position: absolute;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--coral);
top: 50%; left: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .2s;
}
.cf-radio input[type="radio"]:checked + .cf-radio__box {
border-color: var(--coral);
}
.cf-radio input[type="radio"]:checked + .cf-radio__box::after {
transform: translate(-50%,-50%) scale(1);
}
.cf-radio__text {
font-size: 14px;
color: var(--text-base);
letter-spacing: .04em;
} .cf-submit {
margin-top: 30px;
text-align: center;
}
.cf-btn {
display: inline-flex;
width: 350px;
max-width: 100%;
align-items: center;
justify-content: center;
background: var(--coral);
color: #fff;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: .1em;
padding: 16px 56px;
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
transition: background .2s, transform .2s, box-shadow .2s;
box-shadow: 0 4px 24px rgba(217,119,87,.3);
}
@media (hover: hover) {
.cf-btn:hover {
background: var(--coral-lt);
transform: translateY(-2px);
box-shadow: 0 8px 36px rgba(217,119,87,.4);
}
} @media (max-width: 560px) {
.contact-form-wrap { padding: 28px 20px 48px; }
.cf-radio-group { gap: 16px; }
.cf-input { width: 100%; }
.cf-name-row { gap: 8px; }
} .single-article {
max-width: 1000px;
margin-inline: auto;
} .single-article__head {
padding-bottom: 32px;
border-bottom: 1px solid var(--sand);
margin-bottom: 40px;
}
.single-article__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.single-article__date {
font-family: var(--font-latin);
font-size: 13px;
letter-spacing: .08em;
color: var(--text-muted);
}
.single-article__cat {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
color: var(--coral);
background: rgba(217,119,87,.1);
padding: 3px 12px;
border-radius: var(--radius-pill);
text-decoration: none;
transition: background .2s, color .2s;
}
@media (hover: hover) {
.single-article__cat:hover {
background: var(--coral);
color: #fff;
}
}
.single-article__title {
font-family: var(--font-serif);
font-size: clamp(20px, 3vw, 28px);
font-weight: 500;
color: var(--text-base);
line-height: 1.7;
letter-spacing: .06em;
} .single-article__thumb {
margin-bottom: 40px;
border-radius: 12px;
overflow: hidden;
}
.single-article__thumb img {
width: 100%;
height: auto;
display: block;
} .single-article__body {
font-size: 15px;
line-height: 2.1;
color: var(--text-base);
letter-spacing: .04em;
}
.single-article__body p {
margin-bottom: .2em;
}
.single-article__body h2 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
color: var(--text-base);
margin: 2.4em 0 1em;
padding-left: 16px;
border-left: 3px solid var(--coral);
line-height: 1.6;
}
.single-article__body h3 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
color: var(--brown-mid);
margin: 2em 0 .8em;
}
.single-article__body img {
max-width: 100%;
height: auto;
border-radius: 8px; }
.single-article__body a {
color: var(--coral);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (hover: hover) {
.single-article__body a:hover {
color: var(--coral-dk);
}
}
.single-article__body ul,
.single-article__body ol {
padding-left: 1.5em;
margin-bottom: 1.6em;
}
.single-article__body li {
margin-bottom: .5em;
line-height: 1.9;
} .single-article__foot {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--sand);
}
.single-article__back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--brown-mid);
letter-spacing: .06em;
text-decoration: none;
transition: color .2s, gap .2s;
}
@media (hover: hover) {
.single-article__back:hover {
color: var(--coral);
gap: 12px;
}
}
.single-article__back-arrow {
transition: transform .2s;
}
@media (hover: hover) {
.single-article__back:hover .single-article__back-arrow {
transform: translateX(-4px);
}
} @media (max-width: 640px) {
.single-article__body { font-size: 14px; }
.single-article__body h2 { font-size: 16px; }
} .news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.news-card {
background: #fff;
border-radius: 12px;
border: 1px solid var(--sand);
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
color: inherit;
transition: box-shadow .25s, transform .25s;
}
@media (hover: hover) {
.news-card:hover {
box-shadow: var(--shadow-card);
transform: translateY(-3px);
}
}
.news-card__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.news-card__date {
font-family: var(--font-latin);
font-size: 12px;
letter-spacing: .06em;
color: var(--text-muted);
}
.news-card__cat {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
color: var(--coral);
background: rgba(217,119,87,.1);
padding: 3px 10px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.news-card__title {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 400;
color: var(--text-base);
line-height: 1.7;
letter-spacing: .04em;
flex: 1;
transition: color .2s;
}
@media (hover: hover) {
.news-card:hover .news-card__title {
color: var(--coral);
}
}
.news-card__link {
font-size: 12px;
font-weight: 600;
color: var(--coral);
letter-spacing: .06em;
margin-top: auto;
} @media (max-width: 600px) {
.news-grid {
grid-template-columns: 1fr;
}
} .pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin: 40px 0 0;
}
.pagination__nav {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #888;
padding: 10px 18px;
border-radius: 6px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
text-decoration: none;
transition: background 0.15s;
}
.pagination__nav:hover {
background: #f5f5f5;
color: #333;
} .pagination__nav.disabled {
opacity: 0.35;
pointer-events: none;
}
.pagination__count {
font-size: 13px;
color: #888;
}
.pagination__count strong {
color: #333;
font-weight: 500;
} .fac-voices {
background: var(--charcoal);
padding: var(--section-gap) 20px;
}
.fac-voices-inner {
max-width: 1100px;
margin: 0 auto;
}
.fac-voices .section-label .en { color: var(--coral-lt); }
.fac-voices .section-label .jp { color: var(--cream); }
.fac-voices .section-label .rule { background: var(--coral); } .fac-voice-main {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
overflow: hidden;
display: grid;
grid-template-columns: 380px 1fr;
margin-bottom: 40px;
} .fac-voice-main__img {
position: relative;
overflow: hidden;
min-height: 340px;
}
.fac-voice-main__case {
position: absolute; top: 16px; left: 16px; z-index: 1;
font-family: var(--font-latin);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: #fff;
background: rgba(217,119,87,.85);
padding: 4px 12px; border-radius: var(--radius-pill);
}
.fac-voice-main__img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.fac-voice-main__img-label {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(44,36,32,.75), transparent);
padding: 32px 20px 18px;
}
.fac-voice-main__facility-name {
font-family: var(--font-serif);
font-size: 18px; font-weight: 600;
color: #fff; letter-spacing: .06em;
display: block; margin-bottom: 6px;
}
.fac-voice-main__facility-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fac-voice-main__type {
font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: .06em;
}
.fac-voice-main__location {
font-family: var(--font-latin);
font-size: 11px; letter-spacing: .12em;
color: var(--coral-lt);
} .fac-voice-main__body {
padding: 40px 44px;
display: flex; flex-direction: column; gap: 24px;
justify-content: center;
}
.fac-voice-main__catch {
font-family: var(--font-serif);
font-size: clamp(17px, 2vw, 22px);
font-weight: 400;
color: var(--coral-lt);
letter-spacing: .08em;
line-height: 1.6;
padding-left: 16px;
border-left: 3px solid var(--coral);
}
.fac-voice-main__points {
display: flex; flex-direction: column; gap: 14px;
}
.fac-voice-main__point {
display: flex; gap: 12px; align-items: flex-start;
}
.fac-voice-main__point-icon {
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(217,119,87,.2);
border: 1px solid var(--coral);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 10px; color: var(--coral-lt);
margin-top: 2px;
}
.fac-voice-main__point-text {
font-size: 13.5px;
color: rgba(255,255,255,.65);
line-height: 1.9;
}
.fac-voice-main__point-text strong {
color: #fff; font-weight: 600;
}
.fac-voice-main__person {
display: flex; align-items: center; gap: 14px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.08);
}
.fac-voice-main__avatar {
width: 80px; height: 80px;
border-radius: var(--radius-md); overflow: hidden;
flex-shrink: 0;
}
.fac-voice-main__avatar img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.fac-voice-main__by {
font-size: 12px;
color: rgba(255,255,255,.5);
letter-spacing: .06em;
line-height: 1.7;
}
.fac-voice-main__by strong {
color: rgba(255,255,255,.8);
font-weight: 600; display: block;
} .fac-voices__cta { text-align: center; } @media (max-width: 860px) {
.fac-voice-main { grid-template-columns: 1fr; }
.fac-voice-main__img { min-height: 220px; }
.fac-voice-main__body { padding: 28px 24px; }
} .flow {
background: var(--warm-white);
padding: 10px 20px 100px;
position: relative;
overflow: hidden;
}
.flow::before {
content: '';
position: absolute; top: -80px; right: -80px;
width: 420px; height: 420px; border-radius: 50%;
border: 1px solid rgba(217,119,87,.12);
pointer-events: none;
}
.flow::after {
content: '';
position: absolute; bottom: -100px; left: -100px;
width: 360px; height: 360px; border-radius: 50%;
border: 1px solid rgba(200,184,164,.2);
pointer-events: none;
}
.flow-inner {
max-width: 1000px; margin: 0 auto;
position: relative; z-index: 1;
background-color: rgba(217,119,87,.055); padding: 60px 10px;
border-radius: var(--radius-md);
} .flow-tabs {
display: flex; gap: 0;
border-radius: var(--radius-pill);
background: var(--sand);
padding: 4px;
width: fit-content;
margin: 0 auto 30px;
}
.flow-tab {
padding: 10px 36px;
border-radius: var(--radius-pill);
font-size: 14px; font-weight: 500; letter-spacing: .06em;
cursor: pointer;
color: var(--text-muted);
border: none; background: none;
transition: background .2s, color .2s, box-shadow .2s;
}
.flow-tab.active {
background: #fff; color: var(--coral);
box-shadow: var(--shadow-soft);
} .flow-panel { display: none; }
.flow-panel.active { display: block; } .flow-steps {
display: flex; flex-direction: column;
align-items: center; gap: 8px;
} .flow-step { width: 100%; max-width: 680px; }
.flow-step__content {
background: #fff;
border: 1px solid var(--sand);
border-radius: var(--radius-md);
padding: 18px 24px;
box-shadow: var(--shadow-soft);
display: flex; align-items: center; gap: 12px;
}
.flow-step__num {
font-family: var(--font-latin); font-size: 36px; font-weight: 300;
color: var(--coral); letter-spacing: .04em;
line-height: 1; flex-shrink: 0; width: 48px; text-align: center;
}
.flow-step__body { flex: 1; }
.flow-step__body h3 {
font-size: 15px; font-weight: 400;
color: var(--charcoal); letter-spacing: .04em;
margin-bottom: 2px;
}
.flow-step__body p { font-size: 13px; color: var(--text-muted); line-height: 1.8; } .flow-step-arrow {
width: 100%; max-width: 680px;
text-align: center;
color: var(--coral); font-size: 18px;
opacity: .4; line-height: 1; padding: 2px 0;
} .flow-branch { width: 100%; max-width: 680px; }
.flow-branch__label {
text-align: center; font-size: 14px;
letter-spacing: .1em; color: var(--text-muted);
margin-bottom: 12px;
display: flex; align-items: center; gap: 10px;
}
.flow-branch__label::before,
.flow-branch__label::after { content:''; flex:1; height:1px; background:var(--sand); }
.flow-branch__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flow-branch__col-head {
text-align: center; font-size: 14px; font-weight: 600;
letter-spacing: .08em; color: var(--coral);
background: rgba(217,119,87,.07);
padding: 8px 12px; border-radius: var(--radius-pill);
margin-bottom: 10px;
}
.flow-branch__steps { display: flex; flex-direction: column; gap: 6px; }
.flow-branch__step {
background: #fff; border: 1px solid var(--sand);
border-radius: 10px; padding: 14px 18px;
display: flex; gap: 10px; align-items: center;
box-shadow: var(--shadow-soft);
}
.flow-branch__step-num {
width: 26px; height: 26px; border-radius: 50%;
background: rgba(217,119,87,.07);
border: 1px solid rgba(217,119,87,.3);
color: var(--coral); font-family: var(--font-latin); font-size: 13px;
display: grid; place-items: center; flex-shrink: 0;
}
.flow-branch__step-body h4 { font-size: 14px; font-weight: 500; color: var(--charcoal); }
.flow-branch__step-body p { font-size: 11px; color: var(--text-muted); line-height: 1.7; }
.flow-branch__arrow { text-align: center; color: var(--stone); font-size: 15px; padding: 1px 0; }
@media (max-width: 640px) {
.flow-branch__cols { grid-template-columns: 1fr; }
.flow-tab { padding: 10px 20px; }
.flow-step__content { padding: 18px 15px; gap: 10px; }
.flow-step__num {
text-align: left; font-size: 25px; width: 32px; }
}
.dl-section {
padding: 40px 0;
margin-bottom: 30px;
}
.dl-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
gap: 36px;
justify-content: center;
} .dl-card {
overflow: hidden;
} .dl-card__thumb {
width: 100%;
background: #F0E8DC;
overflow: hidden;
}
.dl-card__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
} .dl-card__body {
padding: 14px 10px 16px;
}
.dl-card__label {
font-size: 0.7rem;
color: #d97757;
font-weight: bold;
letter-spacing: 0.06em;
margin: 0 0 5px;
}
.dl-card__title {
font-size: 16px;
font-weight: bold;
color: #2C2420;
margin: 0 0 5px;
line-height: 1.4;
}
.dl-card__meta {
font-size: 0.78rem;
color: #5a453a;
margin: 0 0 10px;
}
.dl-card__rule {
border: none;
border-top: 1px solid #C8B8A4;
margin: 0 0 10px;
} .dl-card__link {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
font-weight: bold;
color: #3D3330;
text-decoration: none;
padding: 4px 0;
transition: color 0.2s;
}
.dl-card__link:hover {
color: #d97757;
}
.dl-card__link-arrow {
font-size: 1.1rem;
color: #d97757;
line-height: 1;
}
.dl-card__link-sub-icon {
font-size: 0.85rem;
margin-left: 2px;
}
.dl-card__dl-icon {
font-size: 0.85rem;
} @media (max-width: 600px) {
.dl-grid {
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
}
@media (min-width: 1000px) {
.dl-grid {
grid-template-columns: repeat(2, 1fr);
margin: 0 auto;
background: rgba(217, 119, 87, .055);
padding: 50px;
border-radius: 10px;
}
.dl-card {
display: flex;
flex-direction: row;
max-width: 500px;
}
.dl-card__thumb {
width: 200px;
min-width: 200px;
aspect-ratio: unset;
height: auto;
}
.dl-card__body {
flex: 1;
padding: 18px 15px;
}
}  .exh-body {
display: flex;
align-items: flex-start;
gap: 0;
position: relative;
} .exh-sidenav {
width: 168px;
flex-shrink: 0;
position: sticky;
top: clamp(24px, 3vw, 40px);
align-self: flex-start;
padding-right: 24px;
}
.exh-sidenav__label {
font-family: var(--font-latin);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--stone);
display: block;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--sand);
}
.exh-sidenav__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.exh-sidenav__item a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 10px;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: .06em;
color: var(--text-muted);
text-decoration: none;
transition: background .18s, color .18s;
}
.exh-sidenav__item a:hover {
background: var(--sand);
color: var(--charcoal);
}
.exh-sidenav__cnt {
font-family: var(--font-latin);
font-size: 10px;
color: var(--stone);
letter-spacing: .05em;
} .exh-content {
flex: 1;
min-width: 0;
border-left: 1px solid var(--sand);
padding-left: clamp(24px, 3vw, 48px);
} .exh-list-region {
margin-bottom: clamp(48px, 6vw, 80px);
scroll-margin-top: 100px;
}
.exh-list-region:last-child { margin-bottom: 0; }
.exh-list-region__head {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 16px;
border-bottom: 2px solid var(--sand);
}
.exh-list-region__num {
font-family: var(--font-latin);
font-size: clamp(36px, 5vw, 52px);
font-weight: 600;
color: var(--sand);
line-height: 1;
letter-spacing: -.02em;
flex-shrink: 0;
}
.exh-list-region__title {
font-family: var(--font-serif);
font-size: clamp(18px, 2.2vw, 24px);
color: var(--charcoal);
font-weight: 600;
letter-spacing: .06em;
}
.exh-list-region__count {
margin-left: auto;
font-size: 12px;
color: var(--text-muted);
letter-spacing: .08em;
} .japan-bg {
position: relative;
z-index: 0;
}
.japan-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url(//ijoudesu.com/wp-content/themes/ijoudesu2/images/japan-map.svg) no-repeat;
background-position: right 10% top 120px;
background-size: clamp(480px, 42vw, 720px);
opacity: 0.045; pointer-events: none;
}
.exh-list-row {
display: grid;
grid-template-columns: 88px 1fr 1fr auto;
align-items: center;
gap: 0 24px;
padding: 20px 0;
border-bottom: 1px solid rgba(200,184,164,.35);
transition: background .2s;
}
.exh-list-row:hover {
background: rgba(217,119,87,.04);
padding-inline: 12px;
margin-inline: -12px;
}
.exh-list-row__pref {
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
color: var(--coral);
}
.exh-list-row__name a {
font-size: 15px;
color: var(--text-base);
text-decoration: none;
font-weight: 500;
line-height: 1.5;
transition: color .2s;
}
.exh-list-row__name a:hover { color: var(--coral); }
.exh-list-row__addr {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.exh-list-row__tel a {
font-family: var(--font-latin);
font-size: 14px;
letter-spacing: .06em;
color: var(--brown-mid);
text-decoration: none;
white-space: nowrap;
}
.exh-list-row__tel a:hover { color: var(--coral); } .exh-list-row__tel::before {
content: '\f095';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--stone);
font-size: 11px;
margin-right: 6px;
} .exh-list-row__name a .exh-list__link-icon {
font-size: 10px;
margin-left: 6px;
color: var(--stone);
transition: color .2s;
vertical-align: middle;
position: relative;
top: -1px;
}
.exh-list-row__name a:hover .exh-list__link-icon {
color: var(--coral-lt);
} @media (max-width: 860px) {
.exh-sidenav { width: 130px; }
}
@media (max-width: 680px) {
.exh-body { flex-direction: column; }
.exh-sidenav {
width: 100%;
position: static;
padding-right: 0;
padding-bottom: 20px;
border-bottom: 1px solid var(--sand);
margin-bottom: 28px;
}
.exh-sidenav__list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.exh-sidenav__item a {
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--sand);
}
.exh-content { border-left: none; padding-left: 0; }
.exh-list-row {
grid-template-columns: 55px 1fr;
grid-template-rows: auto auto auto;
gap: 0 10px;
}
.exh-list-row__addr { grid-column: 2; margin-top: 8px; }
.exh-list-row__tel  { grid-column: 2; }
}