/* ============================================================
   Le tiroir | yohaku-layout.css
   YOHAKUのレイアウト言語を移植(文章・配色・素材は不変)
   - 角丸ゼロ / 影ゼロ / ヘアライン
   - 極大の縦余白(セクション 160px 前後)
   - 英字ラベル(Garamond・字間0.3em) + 明朝見出し + ミュートな本文
   - ボタンは「線リンク」(下線+矢印)
   - 画像はコラージュ的にずらす
   site-system.css の後、最後に読み込む
   ============================================================ */

:root {
  --y-ease: cubic-bezier(0.22, 1, 0.36, 1); --text-v37-y-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --y-muted: #6f7681; --text-v37-y-muted: #6f7681;
  --y-line: rgba(57, 119, 157, .22); --text-v37-y-line: rgba(51, 88, 122, .22);
  --y-inner: 1240px; --text-v37-y-inner: 1240px;
  --y-pad: clamp(24px, 4.6vw, 74px); --text-v37-y-pad: clamp(24px, 4.6vw, 74px);
  --y-sec: clamp(84px, 10vw, 168px); --text-v37-y-sec: clamp(84px, 10vw, 168px);
}

/* ------------------------------------------------------------
   0) 角丸・影・過装飾のリセット
   ------------------------------------------------------------ */
.ph, .work-card, .work-card__image,
.type-card, .type-card__image, .type-card__image--ill,
.option-card, .option-card__image, .option-card__image img,
.rec-card, .plan-card, .plan-card__image, .plan-card__image img,
.news-item__image, .form-card, .side-card, .faq-item, .faq-side,
.rec-card__icon--ill, .step-card__icon--ill, .estimate, .estimate__panel,
.works-sec, .consult, .included, .funding, .people, .flow, .contact-steps, .faq-main,
.fv__text, .fv__image, .hero__bg, .concept-card__image .ph {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.type-card, .option-card, .rec-card, .plan-card, .work-card,
.form-card, .side-card, .faq-side__cta, .merit-card {
  border: none;
  background: transparent;
}
/* 装飾ブロブは撤去(YOHAKUは装飾ゼロ) */
.fv::before, .concept-intro::before, .contact-intro::before, .faq-head::before { display: none !important; }

/* ------------------------------------------------------------
   1) タイポグラフィ
   ------------------------------------------------------------ */
body { color: #2b2f34; }

h1, h2, h3,
.fv__title, .hero__title, .page-head__title, .center-head__title,
.sec-title, .sec-head__title, .concept-intro__title, .contact-intro__title,
.faq-head__title, .estimate__title, .consult__title, .flow__title,
.people__title, .concept-card__title, .company-info__title, .cafe__info-title,
.access__title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .12em;
}
.fv__title, .hero__content .hero__title { font-size: clamp(26px, 2.5vw, 34px); }
.page-head__title, h1.center-head__title { font-size: clamp(24px, 2.2vw, 30px); }
.sec-title, .sec-head__title, .concept-intro__title, .contact-intro__title,
.faq-head__title, .estimate__title, .consult__title, .flow__title, .people__title {
  font-size: clamp(20px, 1.8vw, 26px);
}
.concept-card__title { font-size: clamp(18px, 1.5vw, 22px); }

/* 英字・ラベル */
.sec-label, .fv__lead, .hero__label, .hero__en, .page-head__en,
.works-intro__en, .contact-intro__en, .faq-head__label, .sec-head__note {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--text-v37-y-muted);
}
.sec-num, .sec-head__num, .concept-card__num, .flow-step__num, .step-card__num, .faq-cat__num {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--text-v37-c-blue);
  opacity: .8;
}

/* 本文 */
.sec-body, .fv__desc, .hero__desc, .concept-intro__desc, .concept-intro__lead,
.concept-card__desc, .estimate__desc, .consult__desc, .people__desc,
.page-head__lead, .faq-head__lead, .contact-intro__lead, .center-head__lead,
.type-card__desc, .option-card__desc, .rec-card__desc, .step-card__desc,
.merit-item__desc, .works-intro {
  font-size: 14px;
  line-height: 2.25;
  letter-spacing: .08em;
  color: var(--text-v37-y-muted);
}

/* ------------------------------------------------------------
   2) 余白のリズム
   ------------------------------------------------------------ */
.perf, .spec, .price-type, .included, .plans, .options, .funding,
.recommend, .consult, .concept, .concept-intro, .works-sec,
.people, .company-info, .cafe, .flow, .contact-steps, .contact-main,
.contact-faq, .access, .faq-main, .news {
  padding-top: var(--y-sec);
  padding-bottom: var(--y-sec);
}
.container, .perf__inner, .spec__inner, .contact-steps__inner,
.contact-main__inner, .news__layout {
  max-width: var(--y-inner);
  padding-left: var(--y-pad);
  padding-right: var(--y-pad);
}
.sec-head { margin-bottom: clamp(40px, 4.4vw, 64px); }

/* ------------------------------------------------------------
   3) ボタン → 線リンク(下線+矢印)
   ------------------------------------------------------------ */
.spec__btn, .works__more-btn, .news__more-btn, .consult__btn,
.bottom-cta__btn, .hero__cta, .estimate__btn, .side-card__btn, .faq-side__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none !important;
  color: var(--text-v37-c-blue-dark) !important;
  border: none;
  border-bottom: 1px solid var(--y-line);
  border-radius: 0 !important;
  padding: 0 2px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  box-shadow: none !important;
  transition: opacity .3s ease;
}
.spec__btn::after, .works__more-btn::after, .news__more-btn::after,
.consult__btn::after, .bottom-cta__btn::after, .hero__cta::after,
.estimate__btn::after, .side-card__btn::after, .faq-side__cta-btn::after {
  content: "";
  width: 30px; height: 1px;
  background: currentColor;
  transition: transform .5s var(--y-ease);
}
.spec__btn:hover, .works__more-btn:hover, .news__more-btn:hover, .consult__btn:hover,
.bottom-cta__btn:hover, .hero__cta:hover, .estimate__btn:hover,
.side-card__btn:hover, .faq-side__cta-btn:hover {
  opacity: .6;
  transform: none !important;
}
.spec__btn:hover::after, .works__more-btn:hover::after, .news__more-btn:hover::after,
.consult__btn:hover::after, .estimate__btn:hover::after { transform: translateX(6px); }
/* 既存の矢印スパンは線リンクでは不要 */
.estimate__btn .arrow, .consult__btn .arrow, .spec__btn .arrow,
.works__more-btn .arrow, .news__more-btn .arrow { display: none; }
/* ネイビー面の上は白の線リンク */
.estimate__panel .estimate__btn { color: var(--text-v37-c-white) !important; border-bottom-color: rgba(255,255,255,.45); }

/* ヘッダーCTA:塗り → ヘアライン枠 */
.header { background: transparent; }
.header__cta {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--y-line);
  background: none;
  color: var(--text-v37-c-blue-dark);
  padding: 12px 26px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  transition: opacity .3s ease;
}
.header__cta:hover { opacity: .6; background: none; color: var(--text-v37-c-blue-dark); }
.header__inner { padding-right: var(--y-pad) !important; gap: 28px; }
.gnav a { font-weight: 500; font-size: 13.5px; letter-spacing: .12em; }

/* ------------------------------------------------------------
   4) ページヒーロー:全面写真+左下の英字ラベル&タイトル
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .hero { height: min(78vh, 660px); }
  .hero__content {
    position: absolute;
    left: 0; right: 0; bottom: clamp(40px, 5vw, 72px);
    max-width: var(--y-inner);
    margin: 0 auto;
    padding: 0 var(--y-pad);
    text-align: left;
  }
  .hero__bg::after {
    background: linear-gradient(to top, rgba(28,40,54,.5) 0%, rgba(28,40,54,.06) 60%, transparent 100%);
  }

  /* 性能ページFV:写真右・テキスト左のコラージュ */
  .fv { display: block; position: relative; background: var(--c-white); padding-bottom: clamp(60px, 7vw, 110px); }
  .fv__image { width: 68%; margin-left: auto; height: min(72vh, 620px); overflow: hidden; }
  .fv__image .ph { min-height: 0; height: 100%; }
  .fv__text {
    position: relative; z-index: 2;
    width: min(560px, 50%);
    margin: -160px 0 0 var(--y-pad);
    background: var(--c-white);
    padding: 56px 56px 0 0;
  }
  .fv__lead { display: block; }
  .fv__title { margin-top: 18px; }
  .fv__desc { margin-top: 24px; }
}

/* ------------------------------------------------------------
   5) 交互2カラム(duo)
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .perf__inner { display: flex; align-items: center; gap: clamp(48px, 5vw, 84px); }
  .perf__text { flex: 0 0 clamp(340px, 32%, 430px); }
  .perf__image { flex: 1; min-width: 0; }
  .perf__image .ph { height: clamp(380px, 40vw, 500px); min-height: 0; }
  .perf--reverse .perf__inner { flex-direction: row-reverse; }

  .concept__grid { grid-template-columns: 1fr; gap: clamp(80px, 8vw, 128px); }
  .concept-card { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 5vw, 80px); align-items: center; padding: 0; }
  .concept-card:nth-child(even) .concept-card__image { order: -1; }
  .concept-card__body { width: 100% !important; padding: 0 !important; }
  .concept-card__image { width: 100% !important; }
  .concept-card__image .ph { width: 100%; min-height: clamp(340px, 34vw, 440px); height: 100%; }
  .concept-card__icon--ill { width: 54px; height: 54px; }
  .concept-card__num { font-size: 15px; margin-top: 18px; }
  .concept-card__lead { margin-top: 12px; font-size: 14px; letter-spacing: .08em; color: var(--text-v37-c-blue-dark); }
}

/* ------------------------------------------------------------
   6) セクション見出し:英字ラベル+明朝(左揃え)
   ------------------------------------------------------------ */
.sec-head { text-align: left; }
.sec-head__num { display: block; font-size: 13px; }
.sec-head__num::before { content: "0"; }
.sec-head__num::after { content: none; }
.sec-head__title { display: block; margin-top: 16px; }
.sec-head__note { display: block; margin-top: 14px; font-size: 11.5px; letter-spacing: .18em; }

.center-head { text-align: left; }
.center-head__lead { margin-top: 18px; }
.page-head { padding-top: clamp(70px, 8vw, 130px); padding-bottom: clamp(40px, 5vw, 70px); }
.page-head__title { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
.page-head__en { font-size: 13px; }

/* ------------------------------------------------------------
   7) カード:枠なし・写真+ヘアライン
   ------------------------------------------------------------ */
.work-card__body, .type-card, .option-card, .rec-card { padding: 0; text-align: left; }
.type-card__image, .option-card__image, .work-card__image, .news-item__image { overflow: hidden; }
.type-card__label {
  display: inline-block; margin-top: 22px;
  background: none; color: var(--text-v37-c-blue-dark);
  border: none; padding: 0;
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .16em;
}
.type-card__price { margin-top: 12px; letter-spacing: .04em; }
.type-card__desc { margin-top: 14px; }
.work-card__area { background: none; border: 1px solid var(--y-line); border-radius: 0; color: var(--text-v37-c-blue-dark); }
.work-card__meta { border-top: 1px solid var(--y-line); }
.rec-card { align-items: flex-start; }
.plan-card { border-top: 1px solid var(--y-line); padding-top: 32px; }

.filter-tab, .works__tabs a {
  border-radius: 0 !important;
  border: none;
  border-bottom: 1px solid transparent;
  background: none !important;
  color: var(--text-v37-c-text);
  letter-spacing: .14em;
}
.filter-tab.is-active, .works__tabs .is-active {
  color: var(--text-v37-c-blue-dark) !important;
  border-bottom-color: var(--c-blue);
}
.works__tabs { border: none !important; background: none !important; gap: 6px; }

/* CTAパネル:全幅・余白広く */
.estimate__panel { padding: clamp(56px, 6vw, 96px) 8%; }
.estimate__title { letter-spacing: .14em; }
.estimate__desc { margin-top: 22px; }
.estimate__buttons { margin-top: 40px; gap: 40px; }

/* リスト・罫線 */
.news-item { border-color: var(--y-line); }
.faq-item { border-bottom: 1px solid var(--y-line); }
.checklist li { letter-spacing: .06em; }

/* ------------------------------------------------------------
   8) SP
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .fv__text { padding: 28px 0 0; margin: 0; width: 100%; }
  .hero__content { bottom: 28px; }
  .concept-card { padding: 0; }
  .page-head__title { gap: 10px; }
  .estimate__buttons { gap: 22px; }
  .header__cta { display: none; }
}

/* ヒーロー写真上のテキストは白のまま(本文ミュート指定より優先) */
.hero__content .hero__title,
.hero__content .hero__desc,
.hero__content .hero__label,
.hero__content .hero__en { color: var(--text-v37-c-white); }
.hero__bg::after {
  background: linear-gradient(to top, rgba(57, 119, 157,.78) 0%, rgba(57, 119, 157,.42) 42%, rgba(57, 119, 157,.12) 72%, rgba(57, 119, 157,.02) 100%) !important;
}
/* 会社案内はタイポ型ヒーローなので除外 */


/* ヒーローの可読性:全体ヴェール+下部スクリム(YOHAKU heroCard__veil 相当) */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(57, 119, 157,.30);
  z-index: 1;
  pointer-events: none;
}
.hero__bg::after { z-index: 2; }


/* 施工事例の支給ヒーローは対象外(そのまま維持) */
.works-hero, .works-hero * { border-radius: revert; }
.works-hero__tabs { border: 1px solid var(--c-border) !important; border-radius: 999px !important; background: var(--c-white) !important; }
.works-hero__tabs a { border-right: 1px solid var(--c-border); border-bottom: none; }
.works-hero__tabs a:last-child { border-right: none; }
.works-hero__tabs .is-active { background: var(--c-blue) !important; color: var(--text-v37-c-white) !important; }
.works--visual-hero { padding-top: 0; }

/* ============================================================
   9) フォントをYOHAKUに完全準拠
   JP: Shippori Mincho / EN: Cormorant Garamond
   ============================================================ */
:root {
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif; --text-v37-font-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans:  "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif; --text-v37-font-sans: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif; --text-v37-font-en: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
}
body, input, select, textarea, button { font-family: var(--font-serif); }
body { font-weight: 400; }
.gnav a, .drawer__label, .drawer__child a, .header__cta,
.footer a, .footer p, .footer address, .footer span,
.form-chip, .filter-tab, .form-submit { font-weight: 400; }
.footer a, .footer p, .footer address, .footer span { letter-spacing: .1em; }

/* ============================================================
   10) 会社概要:YOHAKU ACCESS 型(英字見出し+定義リスト+写真)
   ============================================================ */
.c-info, .c-cafe { max-width: 100%; }
.c-cafe { margin-top: clamp(72px, 8vw, 128px); }

.c-info__head { margin-bottom: clamp(28px, 3vw, 44px); }
.c-info__en {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--text-v37-y-muted);
}
.c-info__head .company-info__title,
.c-info__head .cafe__info-title {
  margin-top: 12px;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: .14em;
}

.c-info__body, .c-cafe__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(36px, 4.4vw, 72px);
}
.c-info__dl { flex: 1; border-top: 1px solid var(--y-line); }
.c-info__row {
  display: flex;
  gap: clamp(20px, 2.6vw, 44px);
  padding: 18px 2px;
  border-bottom: 1px solid var(--y-line);
}
.c-info__row dt {
  flex: 0 0 clamp(88px, 9vw, 130px);
  font-size: 13.5px;
  letter-spacing: .12em;
}
.c-info__row dd {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: .06em;
  color: var(--text-v37-y-muted);
}
.c-info__ph { flex: 0 0 clamp(280px, 32%, 430px); }
.c-info__ph .ph { width: 100%; aspect-ratio: 3 / 2; }

.c-cafe__text { flex: 1; }
.c-cafe__text .cafe__desc { max-width: 42em; }
.c-info__dl--cafe { margin-top: 34px; max-width: 34em; }
.c-cafe__ph { flex: 0 0 clamp(280px, 34%, 460px); }
.c-cafe__ph .ph { width: 100%; aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .c-info__body, .c-cafe__body { flex-direction: column; }
  .c-info__ph, .c-cafe__ph { flex: none; width: 100%; }
  .c-info__row { flex-direction: column; gap: 6px; padding: 15px 2px; }
  .c-info__row dt { flex: none; }
}

/* 会社案内ヒーロー(共通の全面写真型) */
.hero--photo { position: relative; padding: 0; margin-bottom: 0; }
.hero--photo .hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero--photo .hero__bg .ph { width: 100%; height: 100%; }
.hero--photo .hero__content { z-index: 3; }
.hero--photo .hero__en { color: rgba(255,255,255,.9); }
.hero--photo .hero__desc { max-width: 46em; }
@media (max-width: 900px) {
  .hero--photo { height: min(62vh, 460px); }
  .hero--photo .hero__content {
    position: absolute; left: 0; right: 0; bottom: 26px;
    padding: 0 var(--y-pad); text-align: left;
  }
  .hero--photo .hero__title, .hero--photo .hero__desc, .hero--photo .hero__en { color: var(--text-v37-c-white); }
  .hero--photo .hero__desc { font-size: 12.5px; }
}

/* ============================================================
   11) 会社案内トップ:YOHAKU ACCESS 型
   (写真帯 → 大きな英字タイトル+小さな和文 → リード文)
   ============================================================ */
.c-top { padding-bottom: 0; }
.c-top__ph {
  margin-left: clamp(24px, 8vw, 150px);
  height: clamp(240px, 34vw, 460px);
  overflow: hidden;
}
.c-top__ph .ph { width: 100%; height: 100%; }
.c-top__body {
  max-width: var(--y-inner);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 92px) var(--y-pad) 0;
}
.c-top__en {
  font-family: var(--font-en);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  color: #2b2f34;
}
.c-top__jp {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--text-v37-y-muted);
}
.c-top__intro {
  margin-top: clamp(28px, 3vw, 44px);
  max-width: 46em;
  font-size: 14px;
  line-height: 2.25;
  letter-spacing: .07em;
  color: var(--text-v37-y-muted);
}
@media (max-width: 900px) {
  .c-top__ph { margin-left: 0; }
}