@charset "UTF-8";
/* web-Business.jpg（4267×15871px）を1440px幅へ換算した0927版。
共通CSSには手を入れず、WordPressへ移植しやすいHTML/CSSで構成する。
寸法は1440px幅での設計図の実測値（本文の左端は165px、2段組の右段は849pxなど）。 */
.business-hero img {
width: 100%; height: 550px;
object-fit: cover; object-position: center 63%;
}
/* 新市場：左のラベルと右の本文は横組み。本文の3行目（「健康長寿ビジネス」の行）が
共通コンテナの幅に収まらないため、この区画だけコンテナを広げている。 */
.business-market { padding-block: 87px 36px; }
.business-market__grid {
max-width: 1360px;
padding-left: calc(var(--gutter) + 101px);
display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 63px;
}
.business-market__label { position: relative; isolation: isolate; }
/* 設計図の透かしは共通の大きさより一回り小さく字間も詰まっていて、「i」が左端に見えている。 */
.business-market__watermark,
.business-membership__watermark { font-size: 284px; letter-spacing: -.06em; }
.business-market__watermark { top: -47px; left: -180px; color: #ededed; }
.business-market__en {
font-family: var(--font-en); font-size: 62px; font-weight: 700; line-height: 1.24;
}
.business-market__sub { margin-top: 30px; text-align: center; font-size: 26px; letter-spacing: .12em; }
.business-market__body { color: var(--c-ink-body); }
.business-market h1 {
font-family: var(--font-mincho); color: var(--c-blue);
font-size: 50px; font-weight: 600; letter-spacing: .1em; line-height: 1.6;
}
.business-market__lead {
margin-top: 24px; color: var(--c-green); font-family: var(--font-mincho);
font-size: 36px; font-weight: 600; letter-spacing: .14em;
}
.business-market__body > p:not(.business-market__lead) {
font-size: 22px; line-height: 2.48; letter-spacing: .03em;
}
.business-market__lead + p { margin-top: 6px; }
.business-market__body strong {
color: var(--c-green); font-family: var(--font-mincho);
font-size: 35px; font-weight: 600; letter-spacing: .06em; line-height: 1.6;
}
/* Home / Studio と、販売代理店 / 企業連携。 */
.business-models { padding-block: 52px 52px; }
/* 設計図では葉の帯を原寸幅で上端に置き、下は白へ溶け込ませている（素材の下端は白）。 */
.business-models::before { background: #fff url("assets/bg-leaves.jpg") center -40px / 100% auto no-repeat; }
.business-models .section-title__en,
.business-partners .section-title__en { font-size: 56px; }
.business-models .section-title__ja,
.business-partners .section-title__ja { margin-top: 8px; letter-spacing: .18em; }
.business-columns {
margin-left: 77px;
display: grid; grid-template-columns: 688px minmax(0, 1fr);
}
.business-models__columns { margin-top: 70px; }
.business-description { border-left: 3px solid var(--c-blue); padding-left: 32px; color: var(--c-ink-body); }
.business-description__en {
font-family: var(--font-en); font-size: 31px; line-height: 1.4;
font-weight: 700; color: var(--c-blue); overflow-wrap: break-word;
}
.business-description__ja { margin-top: 2px; font-size: 21px; font-weight: 700; letter-spacing: .06em; }
.business-description__body { margin-top: 18px; font-size: 20px; line-height: 2; letter-spacing: .15em; }
.business-description__body p + p { margin-top: 22px; }
.business-partners { padding-block: 52px 66px; }
.business-partners__columns { margin-top: 70px; }
/* 会員サービスの比較。文字はHTML、吹き出しの輪郭だけSVG。
見出し・吹き出し・比較図・マスコットの4つを、3列のグリッドに置く。
比較図は吹き出しの下まで伸びるので、中央の列を両者で共有している。 */
.business-membership { background: #f3f8fc; padding-block: 45px 52px; overflow: hidden; }
.business-membership__grid {
padding-left: calc(var(--gutter) + 77px);
display: grid; grid-template-columns: 696px 93px minmax(0, 1fr);
grid-template-areas: "heading bubble bubble" "comparison comparison mascot";
}
.business-membership__heading { grid-area: heading; position: relative; isolation: isolate; margin-top: 70px; text-align: left; }
.business-membership__watermark { top: -49px; left: -176px; color: #e8e9eb; }
.business-membership__heading .section-title__en { font-size: 52px; line-height: 1.55; letter-spacing: -.01em; }
.business-membership__heading .section-title__ja { margin-top: 14px; font-size: 29px; letter-spacing: .1em; }
.business-comparison {
grid-area: comparison;
display: grid; grid-template-columns: 260px 116px 410px; align-items: center;
}
.business-comparison__old, .business-comparison__new { border-radius: 30px; padding: 26px 36px; min-height: 255px; }
.business-comparison__new { padding-inline: 45px; }
.business-comparison__old { background: #e0e5e8; color: var(--c-ink-body); }
.business-comparison__new { background: var(--c-blue); color: white; }
.business-comparison h3 { font-size: 25px; letter-spacing: .14em; }
.business-comparison p { margin-top: 20px; font-size: 23px; font-weight: 700; line-height: 2.05; letter-spacing: .18em; }
.business-comparison__old p { letter-spacing: .15em; }
.business-comparison__new p { font-size: 22px; line-height: 2.15; letter-spacing: .14em; }
/* 1006版でオレンジから濃い灰色に変更（設計図の実測 #606060） */
.business-comparison__arrow { font-size: 60px; line-height: 1; color: #606060; text-align: center; }
.business-bubble {
grid-area: bubble; justify-self: start;
position: relative; width: 448px; aspect-ratio: 450 / 345; display: grid; place-items: center;
}
.business-bubble__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.business-bubble p { position: relative; padding-bottom: 32px; font-size: 24px; line-height: 2.05; letter-spacing: .1em; text-align: center; color: var(--c-ink-body); }
.business-membership__mascot { grid-area: mascot; justify-self: end; width: 209px; margin-top: -10px; }
/* 募集対象：DOMは設計図の左列、右列の順。 */
.business-together { padding-block: 64px 30px; }
.business-together .section-title__en { font-size: 51px; }
.business-together .section-title__ja { margin-top: 6px; letter-spacing: .1em; }
.business-together__list {
margin: 62px 0 0 97px;
display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-template-columns: 666px minmax(0, 1fr); row-gap: 18px;
}
.business-together__list li { display: flex; gap: 22px; align-items: baseline; font-size: 25px; font-weight: 700; line-height: 1.7; letter-spacing: .14em; color: var(--c-ink-body); }
.business-together__list li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c-green); flex-shrink: 0; }
.business-together__closing { margin-top: 46px; font-family: var(--font-mincho); font-size: 29px; font-weight: 600; letter-spacing: .18em; line-height: 1.85; text-align: center; color: var(--c-blue); }
/* 末尾：提供写真には左の青白いフェードが含まれている。 */
.business-future { position: relative; isolation: isolate; min-height: 692px; background: #eaf8fd; }
.business-future__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 20% center; }
/* 見出しが1行に収まるよう、右側はコンテナの余白まで使う。 */
.business-future__content { padding: 50px 0 42px calc(var(--gutter) + 32px); }
.business-future h2 { font-family: var(--font-mincho); font-size: 50px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; color: var(--c-blue); }
.business-future__content > p { margin-top: 26px; font-size: 25px; font-weight: 500; line-height: 1.85; letter-spacing: .1em; color: var(--c-ink-body); }
.business-future__actions { margin-top: 38px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* 設計図では3つのボタンのうち短い2つが同じ幅にそろっているため、最小幅を持たせる。 */
/* 1006版ではボタンが4つになり、すべて同じ幅（設計図の実測で約320px）にそろっている */
.business-future__actions .btn { min-width: 320px; min-height: 45px; padding-inline: 20px; font-size: 20px; letter-spacing: .06em; }
/* 1440px幅の寸法のままでは、本文の行やグリッドの固定幅が収まらなくなる幅。
レイアウトは保ったまま、余白と文字を縮める。 */
@media (min-width: 1025px) and (max-width: 1399px) {
.business-market__grid { padding-left: calc(var(--gutter) + 3vw); grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: 40px; }
.business-market__en { font-size: 52px; }
.business-market__watermark { left: -80px; }
.business-market h1 { font-size: 42px; }
.business-market__lead { font-size: 30px; }
.business-market__body > p:not(.business-market__lead) { font-size: 19px; }
.business-market__body strong { font-size: 29px; }
.business-columns { margin-left: 3vw; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.business-description__body { font-size: 18px; letter-spacing: .1em; }
.business-membership__grid {
padding-left: calc(var(--gutter) + 3vw);
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "heading bubble" "comparison mascot";
}
.business-membership__watermark { left: -100px; }
.business-membership__heading .section-title__en { font-size: 44px; }
.business-membership__heading .section-title__ja { font-size: 24px; }
.business-comparison { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.5fr); }
.business-comparison__old, .business-comparison__new { padding-inline: 26px; min-height: 230px; }
.business-comparison h3 { font-size: 22px; }
.business-comparison p, .business-comparison__new p { font-size: 19px; letter-spacing: .1em; }
.business-comparison__arrow { font-size: 48px; }
.business-bubble { width: 380px; }
.business-bubble p { font-size: 18px; letter-spacing: .06em; }
.business-membership__mascot { width: 180px; margin-left: 24px; }
.business-together__list { margin-left: 3vw; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
.business-together__list li { font-size: 22px; letter-spacing: .1em; }
.business-future__content { padding-right: var(--gutter); }
.business-future h2 { font-size: 40px; letter-spacing: .04em; }
}
/* 1024px以下は1段組。本文の改行は設計図の1440px幅に合わせたものなので外す。
改行は class の無い
にしている（WordPress の RichText で保存すると、
の class が落ちうるため）。 */
@media (max-width: 1024px) {
.business-market__body > p br,
.business-description br,
.business-together__closing br { display: none; }
.business-hero img { height: auto; aspect-ratio: 1672 / 940; object-fit: contain; }
.business-market { padding-block: 54px; }
.business-market__grid { max-width: var(--container); padding-left: var(--gutter); grid-template-columns: minmax(0, 1fr); gap: 36px; }
.business-market__label { text-align: center; }
.business-market__en { font-size: 54px; }
.business-market__en br { display: none; }
.business-market__sub { margin-top: 12px; font-size: 23px; }
.business-market__watermark { left: 0; top: -12px; font-size: clamp(160px, 22vw, 284px); }
.business-market h1 { font-size: 42px; }
.business-market h1 br { display: none; }
.business-market__lead { font-size: 30px; margin-top: 24px; }
.business-market__body > p:not(.business-market__lead) { font-size: 20px; line-height: 2; }
.business-market__lead + p { margin-top: 12px; }
.business-market__body strong { font-size: 28px; }
.business-models, .business-partners { padding-block: 48px; }
.business-models::before { background-position: center top; background-size: cover; }
.business-models .section-title__en,
.business-partners .section-title__en,
.business-together .section-title__en { font-size: clamp(32px, 5.4vw, 50px); }
.business-models .section-title__ja,
.business-partners .section-title__ja { letter-spacing: .1em; }
.business-columns { margin-left: 0; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.business-models__columns, .business-partners__columns { margin-top: 38px; }
.business-description { padding-left: 24px; }
.business-description__en { font-size: 30px; }
.business-description__body { font-size: 19px; letter-spacing: .08em; margin-top: 16px; }
.business-membership { padding-block: 48px; }
.business-membership__grid {
padding-left: var(--gutter);
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "heading" "comparison" "bubble" "mascot";
}
.business-membership__heading { margin-top: 0; text-align: center; }
.business-membership__heading .section-title__en { font-size: 46px; }
.business-membership__heading .section-title__ja { font-size: 23px; }
.business-membership__watermark { top: -20px; left: 0; font-size: clamp(160px, 22vw, 284px); }
.business-comparison { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; max-width: 540px; width: 100%; justify-self: center; }
.business-comparison__old, .business-comparison__new { min-height: auto; text-align: center; padding: 24px; }
.business-comparison p, .business-comparison__new p { font-size: 20px; line-height: 1.9; letter-spacing: .08em; }
.business-comparison__arrow { font-size: 52px; transform: rotate(90deg); justify-self: center; }
.business-bubble { justify-self: center; width: min(448px, 100%); margin-top: 36px; }
.business-bubble p { font-size: 22px; }
.business-membership__mascot { justify-self: center; width: 180px; margin: -8px 0 0 220px; }
.business-together { padding-block: 48px; }
.business-together__list { margin: 36px 0 0; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-content: center; }
.business-together__list li { font-size: 22px; letter-spacing: .08em; }
.business-together__closing { font-size: 25px; letter-spacing: .1em; margin-top: 36px; }
.business-future { display: flex; flex-direction: column; min-height: auto; }
.business-future__content { order: 1; padding: 40px var(--gutter); }
.business-future__photo { order: 2; position: static; z-index: auto; height: auto; object-fit: contain; }
.business-future h2 { font-size: 36px; letter-spacing: .04em; }
.business-future__content > p { font-size: 22px; }
.business-future__actions { margin-top: 28px; }
.business-future__actions .btn { font-size: 20px; }
}
@media (max-width: 767px) {
.business-market__en { font-size: 38px; }
.business-market__en br { display: initial; }
.business-models .section-title__ja,
.business-partners .section-title__ja { letter-spacing: .04em; }
.business-market__sub { font-size: 18px; }
.business-market h1 { font-size: 30px; letter-spacing: .06em; }
.business-market__lead { font-size: 24px; }
.business-market__body > p:not(.business-market__lead) { font-size: 17px; letter-spacing: .02em; }
.business-market__body strong { font-size: 22px; letter-spacing: .02em; }
.business-description { padding-left: 18px; }
.business-description__en { font-size: 26px; }
.business-description__ja { font-size: 18px; }
.business-description__body { font-size: 17px; letter-spacing: .04em; }
.business-membership__heading .section-title__en { font-size: 32px; }
.business-membership__heading .section-title__ja { font-size: 18px; letter-spacing: .04em; }
.business-comparison h3 { font-size: 21px; }
.business-comparison p, .business-comparison__new p { font-size: 18px; letter-spacing: .04em; }
.business-bubble p { padding-bottom: 26px; font-size: clamp(14px, 4.3vw, 20px); letter-spacing: .02em; }
.business-membership__mascot { width: 140px; margin-left: auto; margin-right: 0; justify-self: end; }
.business-together__list li { font-size: 19px; gap: 14px; letter-spacing: .04em; }
.business-together__list li::before { width: 12px; height: 12px; }
.business-together__closing { font-size: 20px; letter-spacing: .04em; }
.business-future h2 { font-size: 28px; }
.business-future__content > p { font-size: 18px; letter-spacing: .06em; }
.business-future__actions { align-items: stretch; gap: 16px; }
.business-future__actions .btn { min-width: 0; padding-inline: 18px; font-size: 17px; }
}