@charset "UTF-8";
/* SORAE｜Step 7 作り直し（2026-10-18）。土台＝main.css（Step 4 のベース再現）。ここは固有の部品だけ：
   ロゴ（SORAE の文字）・サービスの3色・自作のぼかし・FV の3案・01〜09 の中身・お問い合わせ。文字の段・余白・動きはベースの数字のまま */
:root {
  /* ver17：制作担当の決定＝フォント B（Zen Maru Gothic＋Barlow）・透明感 B 澄んだ白（2026-10-19） */
  --t-font-en: Barlow;
  --t-font-ja: "Zen Maru Gothic";
  --t-ink: #5c6c75;   /* 灰青（白地 5.44:1）。前は #505758 */
  --t-label: #7f888c; /* 3.62:1。前は #838383 */
  --t-lav: #6e76a1;   /* BEAUTY COUNSELING 4.40:1（明るさを保って彩度を約7割に） */
  --t-yel: #aa8f54;   /* BEAUTY SUPPORT 3.10:1 */
  --t-sky: #518ba7;   /* AFTER SUPPORT 3.75:1 */
  --t-gray: #717e86;  /* 行動の段（お問い合わせ・ご購入） */
  --t-lav-bg: #eff0f9;
  --t-yel-bg: #f9f4e6;
  --t-sky-bg: #e9f5fa;
  --t-gray-bg: #f0f3f6;
  --t-band: #ebf6f9;  /* 06 の帯（明るく淡い水色）・遷移の幕も同じ色 */
  --t-cloud-r: url(/demos/sorae/images/t-cloud-r-b.svg);
  --t-cloud-r2: url(/demos/sorae/images/t-cloud-r2-b.svg);
  --t-cloud-l: url(/demos/sorae/images/t-cloud-l-b.svg);
  --t-cloud-l2: url(/demos/sorae/images/t-cloud-l2-b.svg);
}
body { background: #fff; line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
/* 日本語の折り返し：語のまとまりで折る（行頭の「ー」「っ」・語の途中・1〜2字の最後の行を出さない）。見出しと Q は行の長さをそろえる */
h1, h2, h3, .t-top-section__lead, .t-faq__q-text, .t-flow__text, .t-social__close { text-wrap: balance; }
h1, h2, h3, .t-header__panel, .t-footer__nav, .t-footer__sns-title, .t-footer__row, .t-button, .t-top-section__name { font-family: var(--t-font-en), var(--t-font-ja), sans-serif; }

/* ---------- ロゴ（SORAE の細い英字・ベースのロゴと同じく細い欧文 300） ---------- */
.t-logo { font-family: var(--t-font-en), var(--t-font-ja), sans-serif; font-weight: 300; letter-spacing: .22em; color: var(--t-ink); line-height: 1; white-space: nowrap; display: inline-block; }
.t-header__logo .t-logo { font-size: 52px; }
@media only screen and (max-width: 768px) { .t-header__logo .t-logo { font-size: 28px; } }

/* ---------- 色の名札（サービスの3色） ---------- */
.t-is-lav { --c: var(--t-lav); --c-bg: var(--t-lav-bg); }
.t-is-yel { --c: var(--t-yel); --c-bg: var(--t-yel-bg); }
.t-is-sky { --c: var(--t-sky); --c-bg: var(--t-sky-bg); }
.t-is-gray { --c: var(--t-gray); --c-bg: var(--t-gray-bg); }
.t-header__nav-text.t-is-lav, .t-top-section__name.t-is-lav { color: var(--t-lav); }
.t-header__nav-text.t-is-yel, .t-top-section__name.t-is-yel { color: var(--t-yel); }
.t-header__nav-text.t-is-sky, .t-top-section__name.t-is-sky { color: var(--t-sky); }
.t-button.t-is-lav:before { background: var(--t-lav); }
.t-button span { font-weight: 400; }
.t-top-section__name, .t-header__nav-text, .t-flow__name.t-is-en { white-space: nowrap; }

/* ---------- ヘッダー（メニュー） ---------- */
.t-header__nav { max-width: 900px; margin-left: auto; margin-right: auto; }
@media only screen and (min-width: 769px) {
  .t-header__nav-item { width: 33.333%; }
  .t-header__nav-text { font-size: 20px; }
  .t-header__nav-image { height: 210px; }
  .t-header__row { justify-content: center; gap: 70px; }
}
@media only screen and (max-width: 768px) {
  .t-header__nav-list { justify-content: center; }
  .t-header__nav-item { width: 33.333%; padding-left: 6px; padding-right: 6px; }
  .t-header__nav-text { font-size: 12px; letter-spacing: .02em; }
}
.t-header__contact .t-button { width: 300px; margin: 0 auto; }
.t-header__contact .t-button span { font-family: var(--t-font-ja), sans-serif; font-weight: 500; }
@media only screen and (max-width: 768px) { .t-header__contact .t-button { width: 240px; } }
.t-header__sns-item { font-size: 18px; letter-spacing: .05em; font-weight: 300; }
@media only screen and (max-width: 768px) { .t-header__sns-item { font-size: 16px; } }

/* ---------- FV（ベースの FV の作りの中で3案） ---------- */
.t-top-intro__title { transform: none; writing-mode: vertical-rl; z-index: 2; }
.t-top-intro__title .t-logo { letter-spacing: .32em; }
@media only screen and (min-width: 769px) {
  .t-top-intro__title { left: -6px; top: 64px; width: auto; }
  .t-top-intro__title .t-logo { font-size: 5.4vw; }
}
@media only screen and (max-width: 768px) {
  .t-top-intro__title { left: -4px; top: 22px; }
  .t-top-intro__title .t-logo { font-size: 18px; }
}
.t-fv { position: relative; }
.t-fv .t-top-intro__image { aspect-ratio: 948 / 632; }
.t-fv .t-top-intro__figure { position: absolute; inset: 0; z-index: 0; }
.t-fv .t-top-intro__figure img { width: 100%; height: 100%; object-fit: cover; }
/* ver15：b の写真は上に空を足した 1.25。PC の窓（1.5）では下寄せで商品を見せる */
@media only screen and (min-width: 769px) { .t-fv--b .t-top-intro__figure img { object-position: 50% 88%; } }
.t-fv .t-clip { z-index: 1; }
@media only screen and (max-width: 768px) {
  .t-fv .t-top-intro__image { aspect-ratio: 975 / 781; }
}
.t-fv__catch { font-family: var(--t-font-ja), sans-serif; font-weight: 500; color: var(--t-ink); letter-spacing: .02em; line-height: 1.6; position: absolute; z-index: 2; }
.t-fv__line { display: block; white-space: nowrap; }
@media only screen and (min-width: 769px) {
  /* ver17：FV＝b（右に縦書きの見出し・窓は 80％） */
  .t-fv__catch { font-size: 40px; left: auto; right: 34px; top: 250px; writing-mode: vertical-rl; letter-spacing: .14em; line-height: 1.9; }
  .t-fv--b .t-top-intro__image { width: 80%; }
  .t-top-intro__new { right: auto; left: 0; bottom: -10%; }
}
.t-fv__sub { position: absolute; z-index: 2; }
@media only screen and (min-width: 769px) { .t-fv__sub { width: 19%; right: 6%; bottom: -21%; } }
@media only screen and (max-width: 768px) { .t-fv__sub { width: 30%; right: -2%; bottom: -8%; } }
.t-top-intro__new { z-index: 2; }
.t-top-intro__new a { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; background: var(--t-lav); color: #fff; letter-spacing: .08em; }
.t-top-intro__new-img { display: block; width: 44%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; margin-bottom: 8%; }
.t-top-intro__new-img img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (min-width: 769px) { .t-top-intro__new { width: 160px; } .t-top-intro__new a { font-size: 15px; } }
@media only screen and (max-width: 768px) { .t-top-intro__new { width: 96px; bottom: -6px; } .t-top-intro__new a { font-size: 11px; letter-spacing: .02em; } }
@media only screen and (max-width: 768px) {
  .t-top-intro { display: flex; flex-direction: column; }
  .t-fv__catch { position: relative; font-size: 22px; text-align: left; margin-top: 44px; padding-left: 34px; padding-right: 100px; }
  .t-fv__sub { width: 22%; right: -2%; bottom: auto; top: 34%; }  /* 小窓は商品の無い右上の空へ */
}

/* ---------- 01 SORAE（ベースの ABOUT・本文は左揃えの中央の列） ---------- */
.t-about .t-top-section__inner { position: relative; z-index: 1; }
.t-top-section.t-is-type1.t-about .t-top-section__lead { font-size: 24px; line-height: 1.8; }
.t-about__image { position: relative; z-index: 0; }
@media only screen and (min-width: 769px) { .t-about__image { margin: -60px -40px 0 80px; } }
@media only screen and (max-width: 768px) { .t-about__image { margin-top: -10px; } }
.t-about .t-top-section__text { line-height: 2; }
.t-about .t-top-section__text p + p, .t-about__voices + p { margin-top: .9em; }
@media only screen and (min-width: 769px) {
  .t-about .t-top-section__inner { max-width: 1280px; }
  .t-about .t-top-section__text { max-width: 640px; margin-top: 44px; font-size: 18px; }
}
@media only screen and (max-width: 768px) {
  .t-top-section.t-is-type1.t-about .t-top-section__lead { font-size: 16px; }
  .t-top-section.t-is-type1.t-about .t-top-section__text { font-size: 15px; margin-top: 22px; }
}
.t-about__voices { margin: 1.6em 0; }
.t-about__voices li { position: relative; padding-left: 1.4em; line-height: 1.6; }
.t-about__voices li + li { margin-top: .5em; }
.t-about__voices li:before { content: ""; position: absolute; left: 0; top: .42em; width: .78em; height: .78em; border-radius: 50%; background: var(--c); }
@media only screen and (min-width: 769px) { .t-about__voices li { font-size: 24px; } }
@media only screen and (max-width: 768px) { .t-about__voices li { font-size: 16px; } }
.t-about__side { position: absolute; z-index: 0; margin: 0; }
@media only screen and (min-width: 769px) {
  .t-about__side--r { right: 50px; top: 530px; width: 17vw; max-width: 250px; }
}
@media only screen and (max-width: 768px) {
  .t-about { display: flex; flex-direction: column; }
  .t-about__side--r { display: none; }
}

/* ---------- 02 SERVICE（ベースの ABOUT の重ね）＋ 03〜05（ベースの PRODUCTS の行） ---------- */
.t-service__head { position: relative; margin: 0 auto; max-width: 1280px; }
@media only screen and (min-width: 769px) { .t-service__head { padding: 0 180px; } }
@media only screen and (max-width: 768px) { .t-service__head { padding: 0 30px; } }
.t-service__lead { font-family: var(--t-font-ja), sans-serif; font-weight: 500; letter-spacing: .02em; line-height: 1.6; position: relative; z-index: 1; }
.t-service__text { position: relative; z-index: 1; line-height: 2; }
.t-service__text p + p { margin-top: .9em; }
.t-service__image { position: relative; z-index: 0; }
@media only screen and (min-width: 769px) {
  .t-service__lead { font-size: 40px; }
  .t-service__text { font-size: 18px; max-width: 640px; margin-top: 30px; }
  .t-service__image { margin-top: -120px; margin-left: 60px; }
}
@media only screen and (max-width: 768px) {
  .t-service__lead { font-size: 22px; }
  .t-service__text { font-size: 15px; margin-top: 16px; }
  .t-service__image { margin-top: -20px; }
}
.t-service .t-service__head + .t-top-section__container { margin-top: 120px; }
@media only screen and (max-width: 768px) { .t-service .t-service__head + .t-top-section__container { margin-top: 40px; } }
@media only screen and (min-width: 769px) {
  .t-service .t-top-section__row { align-items: center; }
  .t-service .t-top-section__wrapper { padding-top: 0; }
}
.t-service .t-top-section__lead { font-family: var(--t-font-ja), sans-serif; }
.t-top-section.t-is-type2.t-service .t-top-section__text { line-height: 1.6; }
@media only screen and (min-width: 769px) { .t-top-section.t-is-type2.t-service .t-top-section__text { font-size: 16px; } }
@media only screen and (max-width: 768px) { .t-top-section.t-is-type2.t-service .t-top-section__text { font-size: 15px; text-align: left; } .t-service .t-top-section__wrapper { margin-top: 0; } }
.t-top-section__image img { display: block; }

/* ---------- 06 ご相談の流れ（ベースの LINE UP の帯：図＋写真つきの仕様カード） ---------- */
.t-top-line { background: var(--t-band); }
.t-top-line .t-svg-line svg { display: block; width: 100%; }
@media only screen and (min-width: 769px) { .t-top-line .t-svg-line .t-pc svg { height: 183px; } }
@media only screen and (max-width: 768px) { .t-top-line .t-svg-line .t-sp svg { height: 46px; } }
.t-ring { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 760 / 460; }
.t-ring__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-ring__path path { fill: none; stroke: #abc2cb; stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.t-ring__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.t-ring__center .t-logo { font-size: 28px; color: #9eaeb4; }
.t-ring__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.t-ring__circle { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 70%, #fff) 72%); overflow: hidden; }  /* ver16：ベースの LINE UP の図と同じ「色の面の丸」（写真にしない） */
.t-ring__circle img { width: 100%; height: 100%; object-fit: cover; }  /* ver15：写真そのもの（円で切り抜き済み）・乗算はやめた */
.t-ring__label { margin-top: 8px; padding: 6px 14px; border-radius: 100px; background: var(--c); color: #fff; font-size: 13px; line-height: 1; white-space: nowrap; }
.t-ring__label.t-is-en { font-family: var(--t-font-en), var(--t-font-ja), sans-serif; letter-spacing: .05em; }
@media only screen and (min-width: 769px) { .t-ring__circle { width: 128px; height: 128px; } }
@media only screen and (max-width: 768px) {
  .t-ring__circle { width: 18vw; height: 18vw; }
  .t-ring__label { font-size: 11px; padding: 4px 9px; margin-top: 5px; }
  .t-ring__name { display: none; }
  .t-ring__center .t-logo { font-size: 16px; }
}
.t-top-line__h3.t-is-ja { font-family: var(--t-font-ja), sans-serif; font-weight: 500; color: var(--t-ink); letter-spacing: .1em; }
@media only screen and (min-width: 769px) { .t-top-line__h3.t-is-ja { font-size: 40px; margin-top: 90px; } }
@media only screen and (max-width: 768px) { .t-top-line__h3.t-is-ja { font-size: 22px; margin-top: 44px; } }
.t-flow__cards { list-style: none; }
.t-flow__cards .t-top-line__item-image { display: flex; justify-content: center; }
.t-flow__cards .t-top-line__item-image img { height: 100%; width: auto; }
.t-flow__pill { width: fit-content; margin: 15px auto 0; padding: 6px 16px; border-radius: 100px; background: var(--c); color: #fff; font-family: var(--t-font-en), var(--t-font-ja), sans-serif; font-size: 13px; line-height: 1; letter-spacing: .1em; }
.t-flow__cards .t-top-line__item-name { letter-spacing: .02em; color: var(--t-ink); }
.t-flow__cards .t-top-line__item-name.t-is-en { font-family: var(--t-font-en), var(--t-font-ja), sans-serif; font-weight: 300; color: var(--c); letter-spacing: .02em; white-space: nowrap; }
.t-flow__sub { margin-top: 6px; font-size: 14px; line-height: 1.5; }
.t-flow__text { text-align: left; line-height: 1.7; margin-top: 12px; }
@media only screen and (min-width: 769px) {
  .t-flow__cards .t-top-line__item-name { font-size: 16px; margin-top: 14px; }
  .t-flow__cards .t-top-line__item-name.t-is-en { font-size: min(16px, 1.25vw); }
  .t-flow__text { font-size: 15px; }
}
@media only screen and (max-width: 768px) {
  .t-flow__cards .t-top-line__item-name { font-size: 15px; margin-top: 10px; }
  .t-flow__cards .t-top-line__item-name.t-is-en { font-size: min(13px, 2.9vw); }
  .t-flow__text { font-size: 14px; }
  .t-flow__cards .t-top-line__item:last-child { margin-left: auto; margin-right: auto; }
}

/* ---------- 07 SOCIAL CONTRIBUTION（ベースの NEWS の位置：左の雲＋縦書きラベル・写真と色の丸を伴う中央の列） ---------- */
.t-social__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 30px; display: grid; align-items: center; }
@media only screen and (min-width: 769px) { .t-social__inner { grid-template-columns: 380px 1fr; gap: 70px; padding-left: 140px; } }
.t-social__figure { position: relative; margin: 0; }
.t-social__photo img { display: block; width: 100%; }
.t-social__circle { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--t-lav); color: #fff; line-height: 1; }
.t-social__circle-s { font-size: 14px; letter-spacing: .1em; }
.t-social__circle-n { font-family: var(--t-font-en), sans-serif; font-weight: 300; margin-top: 6px; }
.t-social__circle-n small { font-size: .45em; margin-left: .05em; }
.t-social__dot { position: absolute; border-radius: 50%; background: var(--c); }
.t-social__dot.t-is-yel { --c: #e6cf98; }
.t-social__dot.t-is-sky { --c: #a1d0e3; }
@media only screen and (min-width: 769px) {
  .t-social__circle { width: 170px; height: 170px; right: -40px; bottom: -20px; }
  .t-social__circle-n { font-size: 52px; }
  .t-social__dot.t-is-yel { width: 26px; height: 26px; left: 10px; top: 0; }
  .t-social__dot.t-is-sky { width: 16px; height: 16px; right: 40px; top: 20px; }
}
@media only screen and (max-width: 768px) {
  .t-social__figure { width: 72%; margin: 0 auto 44px; }
  .t-social__circle { width: 112px; height: 112px; right: -24px; bottom: -18px; }
  .t-social__circle-s { font-size: 12px; }
  .t-social__circle-n { font-size: 28px; }
  .t-social__dot.t-is-yel { width: 18px; height: 18px; left: 0; top: 0; }
  .t-social__dot.t-is-sky { width: 12px; height: 12px; right: 20px; top: 10px; }
}
.t-social__en { font-family: var(--t-font-en), sans-serif; font-weight: 300; color: var(--t-lav); letter-spacing: .1em; line-height: 1.2; }
.t-social__lead { font-family: var(--t-font-ja), sans-serif; font-weight: 500; letter-spacing: .02em; line-height: 1.6; }
.t-social__text { line-height: 2; }
.t-social__text p + p { margin-top: .9em; }
.t-social__em { color: var(--t-lav); }
.t-social__close { line-height: 1.8; }
@media only screen and (min-width: 769px) {
  .t-social__en { font-size: 20px; }
  .t-social__lead { font-size: 40px; margin-top: 14px; }
  .t-social__text { font-size: 18px; margin-top: 28px; }
  .t-social__close { font-size: 20px; margin-top: 36px; }
}
@media only screen and (max-width: 768px) {
  .t-social__en { font-size: 15px; }
  .t-social__lead { font-size: 22px; margin-top: 8px; }
  .t-social__text { font-size: 15px; margin-top: 18px; }
  .t-social__close { font-size: 16px; margin-top: 22px; }
}

/* ---------- 08 よくあるご質問（ベースの ALL SPEC LIST の色の札・写真を伴う開閉の一覧） ---------- */
.t-faq { position: relative; }
@media only screen and (min-width: 769px) { .t-faq { margin-top: 160px; } }
@media only screen and (max-width: 768px) { .t-faq { margin-top: 64px; } }
.t-faq__intro { position: absolute; right: 0; background: var(--t-cloud-r2) 100% 0 no-repeat; background-size: contain; }
@media only screen and (min-width: 769px) { .t-faq__intro { width: 240px; height: 520px; top: -120px; } }
@media only screen and (max-width: 768px) { .t-faq__intro { width: 80px; height: 180px; top: -60px; } }
.t-faq__title { font-family: var(--t-font-ja), sans-serif; font-weight: 500; color: var(--t-ink); letter-spacing: .1em; line-height: 1.2; text-align: center; }
@media only screen and (min-width: 769px) { .t-faq__title { font-size: 40px; margin-bottom: 50px; } }
@media only screen and (max-width: 768px) { .t-faq__title { font-size: 22px; margin-bottom: 26px; } }
.t-faq__inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; padding: 0 30px; }
.t-faq__cols { display: grid; align-items: start; }
@media only screen and (min-width: 769px) { .t-faq__cols { grid-template-columns: 34% 1fr; gap: 60px; } .t-faq__figure { position: sticky; top: 60px; } }
.t-faq__figure { position: relative; margin: 0; }
.t-faq__figure img { display: block; width: 100%; }
.t-faq__dot { position: absolute; border-radius: 50%; background: var(--c); }
.t-faq__dot.t-is-lav { width: 22px; height: 22px; left: 4%; bottom: 14%; }
.t-faq__dot.t-is-sky { width: 14px; height: 14px; right: 6%; bottom: 4%; }
@media only screen and (max-width: 768px) { .t-faq__figure { width: 56%; margin: 0 auto 24px; } }
.t-faq__item { border-bottom: 1px solid #e6eef2; }
.t-faq__item:first-child { border-top: 1px solid #e6eef2; }
.t-faq__q { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 4px; cursor: pointer; list-style: none; }
.t-faq__q::-webkit-details-marker { display: none; }
.t-faq__mark { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--t-font-en), sans-serif; font-weight: 400; font-size: 16px; line-height: 1; }
.t-faq__mark.t-is-a { background: #fff; color: var(--t-gray); border: 1.5px solid var(--t-gray); }
.t-faq__q-text { font-family: var(--t-font-ja), sans-serif; font-weight: 500; line-height: 1.6; text-align: left; }
.t-faq__toggle { position: relative; width: 16px; height: 16px; }
.t-faq__toggle:before, .t-faq__toggle:after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--t-label); transition: transform 400ms; }
.t-faq__toggle:after { transform: rotate(90deg); }
.t-faq__item[open] .t-faq__toggle:after { transform: rotate(0); }
.t-faq__a { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 0 4px 22px; }
.t-faq__a-text { line-height: 1.8; padding-top: 6px; }
@media only screen and (min-width: 769px) { .t-faq__q-text { font-size: 16px; } .t-faq__a-text { font-size: 15px; } }
@media only screen and (max-width: 768px) { .t-faq__q-text { font-size: 15px; } .t-faq__a-text { font-size: 15px; } .t-faq__mark { width: 32px; height: 32px; font-size: 14px; } .t-faq__q, .t-faq__a { gap: 12px; } }

/* ---------- 09 ご相談（ベースのピルのボタン） ---------- */
.t-cta { position: relative; text-align: center; }
.t-cta:before, .t-cta:after { content: ""; position: absolute; pointer-events: none; }
.t-cta:before { left: 0; background: var(--t-cloud-l2) 0 50% / contain no-repeat; }
.t-cta:after { right: 0; background: var(--t-cloud-r2) 100% 50% / contain no-repeat; }
@media only screen and (min-width: 769px) {
  .t-cta { margin-top: 110px; padding: 70px 30px; }
  .t-cta:before { width: 260px; height: 420px; top: -80px; }
  .t-cta:after { width: 220px; height: 360px; bottom: -120px; }
  .t-cta .t-button { width: 460px; font-size: 20px; padding-top: 30px; padding-bottom: 30px; }
}
@media only screen and (max-width: 768px) {
  .t-cta { margin-top: 40px; padding: 30px 24px; }
  .t-cta:before { width: 90px; height: 180px; top: -30px; }
  .t-cta:after { width: 80px; height: 160px; bottom: -40px; }
  .t-cta .t-button { width: 100%; max-width: 330px; font-size: 15px; padding-right: 30px; padding-left: 10px; }
}
.t-cta .t-button { margin: 0 auto; position: relative; z-index: 1; }
.t-cta .t-button span, .t-header__contact .t-button span { font-family: var(--t-font-ja), sans-serif; font-weight: 500; letter-spacing: .06em; }

/* ---------- フッター（ベースのフッターの作り・雲の画像 → 自作のぼかし） ---------- */
.t-footer__logo .t-logo { font-size: 40px; }
@media only screen and (max-width: 768px) { .t-footer__logo .t-logo { font-size: 28px; } }
@media only screen and (min-width: 769px) { .t-footer { min-height: 360px; } .t-footer__info { padding-top: 70px; } }
.t-footer__nav-title, .t-footer__sns-title { color: var(--t-label); }

.t-footer__sns-item { font-family: var(--t-font-en), var(--t-font-ja), sans-serif; font-weight: 300; font-size: 18px; letter-spacing: .05em; }
@media only screen and (max-width: 768px) { .t-footer:before { display: none; } .t-footer__sns-item { font-size: 16px; } }

/* ---------- お問い合わせ（ベースの記事ページ） ---------- */
.t-intro { text-align: center; }
.t-intro__logo .t-logo { font-size: 52px; letter-spacing: .24em; }
@media only screen and (min-width: 769px) { .t-intro { padding-top: 38px; } }
@media only screen and (max-width: 768px) { .t-intro { padding-top: 22px; } .t-intro__logo .t-logo { font-size: 28px; } }
.t-detail { max-width: 1140px; margin: 0 auto; padding: 0 30px; }
.t-detail__kv { border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 9; }
.t-detail__kv img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (min-width: 769px) { .t-detail__kv { margin-top: 130px; } }
@media only screen and (max-width: 768px) { .t-detail__kv { margin-top: 55px; border-radius: 20px; } }
.t-detail__intro, .t-detail__body { max-width: 800px; margin-left: auto; margin-right: auto; }
.t-detail__title { font-family: var(--t-font-ja), sans-serif; font-weight: 500; line-height: 1.6; }
@media only screen and (min-width: 769px) { .t-detail__title { font-size: 32px; margin-top: 75px; } }
@media only screen and (max-width: 768px) { .t-detail__title { font-size: 20px; margin-top: 50px; } }
.t-is-404 .t-detail__title { margin-top: 140px; }
.t-contact__lead { line-height: 1.8; }
@media only screen and (min-width: 769px) { .t-contact__lead { font-size: 16px; margin-top: 30px; } }
@media only screen and (max-width: 768px) { .t-contact__lead { font-size: 15px; margin-top: 20px; } }
.t-contact__note { line-height: 1.8; font-size: 16px; margin-top: 30px; }
.t-contact__form { margin-top: 20px; }
.t-contact__field { margin-top: 30px; border: 0; padding: 0; min-width: 0; }
.t-contact__label { display: block; font-size: 15px; line-height: 1.6; margin-bottom: 10px; padding: 0; }
.t-contact__input { display: block; width: 100%; border: 1px solid #d1dde1; border-radius: 16px; background: #fff; padding: 15px 20px; font: 500 16px/1.6 var(--t-font-ja), sans-serif; color: var(--t-ink); transition: border-color 400ms, box-shadow 400ms; }
.t-contact__input:focus { outline: none; border-color: var(--t-sky); box-shadow: 0 0 0 3px rgba(52, 143, 181, .18); }
.t-contact__input[aria-invalid="true"] { border-color: #c0563f; }
.t-contact__textarea { resize: vertical; min-height: 160px; }
.t-contact__choices { display: flex; flex-wrap: wrap; gap: 12px; }
.t-contact__choices legend { width: 100%; }
.t-contact__choice { position: relative; cursor: pointer; }
.t-contact__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-contact__choice span { display: inline-block; border: 1.5px solid var(--c); color: var(--c); border-radius: 100px; padding: 11px 22px; font-size: 15px; line-height: 1.4; transition: background 400ms, color 400ms; }
.t-contact__choice input:checked + span { background: var(--c); color: #fff; }
.t-contact__choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(52, 143, 181, .3); }
.t-contact__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 50px; }
.t-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 52px; padding: 0 36px; color: #fff; font: 500 16px/1 var(--t-font-ja), sans-serif; letter-spacing: .08em; }
.t-pill:before { content: ""; position: absolute; inset: 0; border-radius: 500px; background: var(--t-ink); }
.t-pill span { position: relative; }
.t-pill.t-is-line { color: var(--t-ink); }
.t-pill.t-is-line:before { background: #fff; border: 1.5px solid var(--t-ink); }
.t-pill:hover:before, .t-pill:active:before { animation: t-menu-bounce 1000ms both; will-change: transform; }
.t-contact__review { display: grid; grid-template-columns: 170px 1fr; margin-top: 24px; border-top: 1px solid #e7eef1; }
.t-contact__review dt, .t-contact__review dd { border-bottom: 1px solid #e7eef1; padding: 14px 0; line-height: 1.7; }
.t-contact__review dt { color: var(--t-label); font-size: 14px; }
.t-contact__review dd { font-size: 16px; white-space: pre-wrap; word-break: break-word; }
.t-contact__review dd.t-is-empty { color: var(--t-label); }
@media only screen and (max-width: 768px) { .t-contact__review { grid-template-columns: 1fr; } .t-contact__review dt { border-bottom: 0; padding-bottom: 0; } }
.t-page-contact .t-footer { margin-top: 160px; }
@media only screen and (max-width: 768px) { .t-page-contact .t-footer { margin-top: 80px; } }
/* メニューの形が右へはみ出して横のスクロール幅を広げないように、入れ物で切る（土台のスマホと同じ指定を PC にも） */
.t-header__menu-svg { overflow: hidden; }

/* ---------- 03〜05 の行の印（ベースの行のボタンの重さの代わりに、色の丸の中の商品。原稿に無い文言は足さない） ---------- */
.t-row__mark { display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 70%, #fff) 72%); overflow: hidden; }  /* ver16：隣の写真の縮小をやめて色の面の丸に */
.t-row__mark img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (min-width: 769px) { .t-row__mark { width: 84px; height: 84px; } }
@media only screen and (max-width: 768px) { .t-row__mark { width: 60px; height: 60px; margin-bottom: 12px; } }

/* ---------- タブレット 600〜768px：スマホの並びをただ広げない（本文の列 560px・行は写真と文字の2列・カードは3列） ---------- */
@media only screen and (min-width: 600px) and (max-width: 768px) {
  .t-top-section.t-is-type1 .t-top-section__inner, .t-service__head, .t-social__inner, .t-faq__inner { max-width: 620px; margin-left: auto; margin-right: auto; }
  .t-service .t-top-section__row { display: flex; align-items: center; gap: 28px; max-width: 700px; margin: 0 auto; }
  .t-service .t-top-section__row .t-top-section__image { width: 46%; flex-shrink: 0; }
  .t-service .t-top-section__container.t-is-type2-2 .t-top-section__row { flex-direction: row; }
  .t-service .t-top-section__container:not(.t-is-type2-2) .t-top-section__row { flex-direction: row-reverse; }
  .t-service .t-top-section__wrapper { flex: 1; }
  .t-flow__cards.t-top-line__items .t-top-line__item { width: 33.333%; }
  .t-ring { max-width: 600px; }
  .t-ring__circle { width: 100px; height: 100px; }
  .t-ring__label { font-size: 12px; }
}

.t-nw { white-space: nowrap; }

/* ---------- ver16：監修 ver15 の直し ---------- */
/* フッターの右の雲：切れた辺をページの右端に付ける（文字の後ろに四角く切れた雲を出さない） */
@media only screen and (min-width: 769px) { .t-footer:before { background-position: 100% 100%; } }
/* 360 以下：06 のカードの英字の名前をカードの中に（2行にしない） */
@media only screen and (max-width: 374px) { .t-flow__cards .t-top-line__item-name.t-is-en { font-size: 11px; letter-spacing: 0; } }
/* 768：06 のカードの2段目を1段目の格子に合わせて中央に */
@media only screen and (min-width: 600px) and (max-width: 768px) { .t-flow__cards.t-top-line__items { justify-content: center; } .t-flow__cards .t-top-line__item:last-child { margin-left: 0; margin-right: 0; } }
/* 01 の大きな窓：追加の写真（8_v2・4:5）に合わせて縦長に。本文の下へ少しもぐらせ、中央に置く */
.t-about__image img { display: block; width: 100%; height: auto; }
@media only screen and (min-width: 769px) { .t-about__image { width: 460px; margin: -40px auto 0; } }
@media only screen and (max-width: 768px) { .t-about__image { width: 72%; max-width: 360px; margin: -6px auto 0; } }
@media only screen and (min-width: 600px) and (max-width: 768px) { .t-fv__sub { width: 18%; top: 18%; } }

/* ---------- ver17：透明感 B 澄んだ白（本体の既定に）。土台 main.css の直書きの色を上書き ---------- */
body, a { color: var(--t-ink); }
.t-top-line__h3 { color: var(--t-ink); }
.t-top-line__title, .t-top-news__title,
.t-top-section.t-is-type1 .t-top-section__title, .t-top-section.t-is-type2 .t-top-section__title { color: var(--t-label); }
.t-header__menu-button span { background: var(--t-label); }
.t-curtain path { fill: var(--t-band); }
/* 写真は明るさだけ上げる（彩度は下げない） */
:is(img, picture, video):not([src$=".svg"]) { filter: brightness(1.06); }
/* 影と線を薄く */
#t-inset-shadow feFlood { flood-color: #c5e5eb; flood-opacity: .6; }

/* ---------- ver19：写真の見せ方 C（写真が主役）を本体の既定に（制作担当の決定・2026-10-19）。文字の段・余白はそのまま、写真の枠だけを広げる ---------- */
@media only screen and (min-width: 769px) {
  /* FV：窓 92％（画面の約8割）・縦書きの見出しは窓の右のふちに少し重なる */
  .t-fv--b .t-top-intro__image { width: 92%; }
  /* 01：大きな窓 620px・小さな窓 340px */
  .t-about__image { width: 620px; }
  .t-about__side--r { width: 23vw; max-width: 340px; right: 30px; }
  /* 02：1160px（本文の列の外まで） */
  .t-service__image { margin-left: -60px; margin-right: -180px; }
  /* 03〜05：写真を画面の半分以上に。外側へ最大 100px（1240px 未満は 0）・文字の列の内側へ 110px＝文字の列の幅は前のまま */
  .t-service .t-top-section__row .t-top-section__image { --out: clamp(0px, calc((100vw - 1240px) / 2), 100px); --in: 110px; flex-shrink: 0; width: calc(50% + var(--out) + var(--in)); margin-right: calc(var(--out) * -1); margin-left: calc(var(--in) * -1); position: relative; z-index: 0; }
  .t-service .t-top-section__container.t-is-type2-2 .t-top-section__row .t-top-section__image { margin-left: calc(var(--out) * -1); margin-right: calc(var(--in) * -1); }
  .t-service .t-top-section__wrapper { position: relative; z-index: 1; }
  /* 06：カードの写真 144px／08：写真の列 46％ */
  .t-flow__cards .t-top-line__item-image { height: 144px; }
  .t-faq__cols { grid-template-columns: 46% 1fr; }
  /* 07：帯の上の「売上の1％」の丸と色の点 */
  .t-social__circle { right: 12%; bottom: -40px; }
  .t-social__dot.t-is-yel { left: 14%; top: 6%; }
  .t-social__dot.t-is-sky { right: 30%; top: 4%; }
}
/* 07：写真を全幅の帯に（9_v2 の横長の不定形）。本文は中央の列 */
.t-social__inner { display: block; max-width: none; padding: 0; }
.t-social__figure { width: auto; margin: 0 0 56px; }
.t-social__photo { display: none; }
.t-social__band { display: block; }
.t-social__band img { display: block; width: 100%; height: auto; }
.t-social__body { max-width: 640px; margin: 0 auto; padding: 0 30px; box-sizing: content-box; }
@media only screen and (max-width: 768px) {
  .t-fv--b .t-top-intro__image { margin-left: -20px; margin-right: -20px; }
  .t-fv__sub { right: 20%; top: 2%; width: 18%; }  /* 窓を広げた分、淡い黄の小窓は商品の無い上の空へ */
  .t-fv__catch { margin-top: -18px; z-index: 3; }  /* 見出しを窓の下のふちに少し重ねる */
  .t-about__image { width: 92%; max-width: 470px; }
  .t-service__image { margin-left: -30px; margin-right: -30px; }
  .t-flow__cards .t-top-line__item-image { height: 104px; }
  .t-faq__figure { width: 76%; }
  .t-social__figure { width: auto; margin: 0 0 52px; }
  .t-social__circle { right: 8%; bottom: -36px; }
}
@media only screen and (max-width: 599px) {
  .t-service .t-top-section__row .t-top-section__image { margin-left: -30px; margin-right: -30px; }
}
@media only screen and (min-width: 600px) and (max-width: 768px) {
  .t-service .t-top-section__row .t-top-section__image { width: calc(46% + 50px); margin-right: -30px; margin-left: -20px; position: relative; z-index: 0; }
  .t-service .t-top-section__container.t-is-type2-2 .t-top-section__row .t-top-section__image { margin-left: -30px; margin-right: -20px; }
  .t-service__image { margin-left: -60px; margin-right: -60px; }
}

/* ===== ver8：付箋の【案の決定】で選ばれた案を本体へ（2026-10-22） ===== */
/* FV の小窓：D（ミモザと瓶） */
#fv-sub img { display: block; width: 100%; height: auto; }
/* COUNSELING・SUPPORT・AFTER：D（写真の重なりをやめ、文は中央の細い列） */
@media only screen and (min-width: 769px) {
  #counseling .t-top-section__image,
  #counseling ~ #after .t-top-section__image { width: calc(50% + var(--out)); margin-left: 0; }
  #counseling ~ #support .t-top-section__image { width: calc(50% + var(--out)); margin-right: 0; }
  #counseling .t-top-section__wrapper,
  #counseling ~ #support .t-top-section__wrapper,
  #counseling ~ #after .t-top-section__wrapper { padding-left: 0; padding-right: 0; }
  #counseling .t-top-section__wrapper > *,
  #counseling ~ #support .t-top-section__wrapper > *,
  #counseling ~ #after .t-top-section__wrapper > * { max-width: min(440px, calc(100% - 80px)); margin-left: auto; margin-right: auto; }
  #counseling .t-top-section__name,
  #counseling ~ #support .t-top-section__name,
  #counseling ~ #after .t-top-section__name { font-size: clamp(28px, 2.4vw, 34px); }
  #counseling .t-top-section__lead,
  #counseling ~ #support .t-top-section__lead,
  #counseling ~ #after .t-top-section__lead { margin-top: 14px; }
}
@media only screen and (min-width: 600px) and (max-width: 768px) {
  #counseling .t-top-section__row,
  #counseling ~ #support .t-top-section__row,
  #counseling ~ #after .t-top-section__row { gap: 48px; }
  #counseling .t-top-section__image,
  #counseling ~ #after .t-top-section__image { margin-left: 0; }
  #counseling ~ #support .t-top-section__image { margin-right: 0; }
  #counseling .t-top-section__name,
  #counseling ~ #support .t-top-section__name,
  #counseling ~ #after .t-top-section__name { font-size: 22px; }
}
@media only screen and (max-width: 599px) {
  #counseling .t-top-section__wrapper > *,
  #counseling ~ #support .t-top-section__wrapper > *,
  #counseling ~ #after .t-top-section__wrapper > * { max-width: 300px; margin-left: auto; margin-right: auto; }
  #counseling .t-top-section__wrapper,
  #counseling ~ #support .t-top-section__wrapper,
  #counseling ~ #after .t-top-section__wrapper { margin-top: 12px; }
}
/* ご相談の流れ｜輪の図：B（横一列・細い線） */
#flow-ring .t-ring__path { display: none; }
#flow-ring .t-ring__circle { width: var(--d); height: var(--d); }
#flow-ring { --d: 104px; aspect-ratio: auto; max-width: 960px; display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 64px; }
#flow-ring::before { content: ""; position: absolute; left: 10%; right: 10%; top: calc(64px + var(--d) / 2); height: 1px; background: #b9ccd3; }
#flow-ring .t-ring__center { top: 0; transform: translateX(-50%); }
#flow-ring .t-ring__center .t-logo { font-size: 20px; }
#flow-ring .t-ring__node { position: relative; left: auto; top: auto; transform: none; z-index: 1; }
#flow-ring .t-ring__label { margin-top: 14px; font-size: 12px; }
@media only screen and (max-width: 768px) {
  #flow-ring { --d: min(13vw, 84px); padding-top: 40px; }
  #flow-ring::before { top: calc(40px + var(--d) / 2); }
  #flow-ring .t-ring__center .t-logo { font-size: 14px; }
  #flow-ring .t-ring__label { margin-top: 8px; }
}
/* ご相談の流れ｜5枚のカード：B（文を2行にそろえる） */
#flow-steps .t-flow__text { display: block; text-align: center; text-wrap: wrap; }
#flow-steps .t-flow__text > span { display: block; }
@media only screen and (min-width: 769px) { #flow-steps .t-flow__text { font-size: 14px; } }
@media only screen and (max-width: 768px) { #flow-steps .t-flow__text { font-size: 13px; } }
/* SUSTAINABLE BEAUTY 左の縦書き：C（RECYCLE） */
#social-earth { background-position: 0 0; box-sizing: content-box; }
@media only screen and (min-width: 769px) {
  #social-earth { top: -200px; width: 280px; height: 495px; padding-left: 56px; padding-top: 70px; }
}
@media only screen and (max-width: 768px) {
  #social-earth { top: -114px; width: 91px; height: 170px; padding-left: 16px; padding-top: 14px; }
}
/* フッターの SNS：D（Instagram・LINE の丸い線アイコン） */
#footer-sns .t-footer__sns-item { margin-left: 0; }
#footer-sns .t-footer__sns-list { gap: 16px; }
#footer-sns .t-footer__sns-icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid color-mix(in srgb, currentColor 45%, #fff); border-radius: 50%; color: var(--t-ink); }
#footer-sns .t-footer__sns-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#footer-sns .t-footer__sns-icon svg .t-fill { fill: currentColor; stroke: none; }
#footer-sns .t-footer__sns-icon svg .t-dots { stroke-width: 2.1; }
#footer-sns .t-footer__sns-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media only screen and (min-width: 769px) {
  #footer-sns .t-footer__sns-list { margin-top: 20px; }
  #footer-sns .t-footer__sns-icon { width: 46px; height: 46px; }
  #footer-sns .t-footer__sns-icon svg { width: 22px; height: 22px; }
}
@media only screen and (max-width: 768px) {
  #footer-sns .t-footer__sns-icon { width: 42px; height: 42px; }
  #footer-sns .t-footer__sns-icon svg { width: 20px; height: 20px; }
  #footer-sns .t-footer__sns-list { margin-bottom: 32px; }  /* 文字の頃の間（8px）のままだと、アイコンの下に著作表記が詰まる */
}

/* ===== ver9.1：付箋の【案の決定】FV＝B 英字と細い線を添える（写真の上には何も載せない・2026-10-22） ===== */
#t-fv-sec .t-fv__catch::before { content: ""; position: absolute; background: #b3c7cf; }
#t-fv-sec .t-fv__catch::after { content: "SKIN CARE SALON" / ""; position: absolute; font-family: var(--t-font-en), sans-serif; font-weight: 400; color: #8ea7b1; line-height: 1; white-space: nowrap; }
#t-fv-sec .t-top-intro__new a::before { content: "CONTACT" / ""; display: block; font-family: var(--t-font-en), sans-serif; font-weight: 300; letter-spacing: .24em; text-indent: .24em; line-height: 1; opacity: .85; }
@media only screen and (min-width: 769px) {
  #t-fv-sec .t-fv__catch::before { width: 1px; height: 48px; top: -76px; right: .95em; }
  #t-fv-sec .t-fv__catch::after { top: 6px; right: -30px; font-size: 11px; letter-spacing: .34em; }
  #t-fv-sec .t-top-intro__new a::before { font-size: 12px; margin-bottom: 10px; }
}
@media only screen and (max-width: 768px) {
  #t-fv-sec .t-fv__catch::before { width: 36px; height: 1px; left: 34px; bottom: -16px; }
  #t-fv-sec .t-fv__catch::after { left: 80px; bottom: -20px; font-size: 9px; letter-spacing: .3em; }
  #t-fv-sec .t-top-intro__new a::before { font-size: 9px; margin-bottom: 6px; }
}
/* ===== ver9.2：769〜1439px はキャッチと線・英字を画面幅に合わせて縮める（1440px と同じ比率・小窓に重ならない・2026-10-22） ===== */
@media only screen and (min-width: 769px) and (max-width: 1439px) {
  .t-fv__catch { font-size: 2.78vw; right: 2.36vw; top: 17.36vw; }
  #t-fv-sec .t-fv__catch::before { height: 3.33vw; top: -5.28vw; }
  #t-fv-sec .t-fv__catch::after { font-size: max(9px, .76vw); top: .42vw; right: -2.08vw; letter-spacing: .3em; }
  #t-fv-sec .t-top-intro__new { width: max(110px, 11.1vw); }
  #t-fv-sec .t-top-intro__new a { font-size: max(12px, 1.04vw); }
  #t-fv-sec .t-top-intro__new a::before { font-size: max(9px, .83vw); margin-bottom: .7vw; }
  /* 右上のメニューの白い形も 1440px と同じ比率に（固定 440px のままだと狭い幅でキャッチを隠す） */
  .t-header__menu-svg svg { width: max(280px, 30.56vw); height: max(244px, 26.67vw); right: min(-108px, -11.8vw); top: min(-83px, -9.03vw); }
  /* RECYCLE の縦の英字も同じ比率に（52px 固定だと 834px で本文の列に重なる） */
  .t-top-news__title { font-size: 3.61vw; }
  .t-top-news__intro { padding-left: 4.44vw; }
  /* フッターのメニューを途中で折らない */
  .t-footer__nav-item a { white-space: nowrap; }
}

/* ===== ver9.3：付箋20【相談2】B＝ご相談の流れの球の図を外し、見出しから始める（2026-10-22） ===== */
@media only screen and (min-width: 769px) { #flow .t-top-line__h3.t-is-ja { margin-top: 40px; } }
@media only screen and (max-width: 768px) { #flow .t-top-line__h3.t-is-ja { margin-top: 24px; } }
/* 06：769〜1439px はカードの丸い写真をカードの幅に収める（144px 固定だと 834px でカードからはみ出す） */
@media only screen and (min-width: 769px) and (max-width: 1439px) {
  .t-flow__cards .t-top-line__item-image { height: auto; }
  .t-flow__cards .t-top-line__item-image img { width: min(100%, 144px); height: auto; }
}