:root {
  --brand-navy: #094c4a;
  --brand-deep: #094c4a;
  --brand-teal: #6e6248;
  --brand-sky: #d9dccb;
  --brand-beige: #f6f2ec;
  --brand-pad: clamp(22px, 5vw, 76px);
}

body {
  font-size: 16px;
  font-weight: 400;
}

.site-header {
  height: 80px;
  position: sticky;
  inset: 0 0 auto;
  z-index: 50;
  background: #094c4a;
  color: var(--brand-beige);
  border-bottom: 1px solid rgba(246, 242, 236, .14);
  backdrop-filter: blur(14px);
}

.site-header .inner {
  width: min(1440px, 100%);
  height: 100%;
  margin: auto;
  padding-inline: clamp(22px, 3vw, 52px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

.site-header.site-header .inner.inner {
  height: 100%;
  min-height: 0;
  padding-inline: clamp(22px, 3vw, 52px);
}
.site-header .site-logo,
.site-header .site-title {
  position: relative;
  z-index: 52;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 32px;
}
.site-header .site-logo img,
.site-header .site-title img,
.site-header .site-logo-img { width: auto; height: 32px; }
.site-header .global-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.15vw, 24px);
  margin-left: auto;
}
.global-nav > a:not(.nav-cta) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  color: var(--brand-beige);
  text-align: center;
  white-space: nowrap;
}
.global-nav > a > span { font: 400 15px/1 "Cormorant", serif; letter-spacing: .09em; }
.global-nav > a > small { font: 400 11px/1.2 "Noto Serif JP", serif; letter-spacing: .08em; opacity: .78; }
.global-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 1px;
  margin: 0;
  background: currentColor;
  opacity: .72;
  transition: left .25s, width .25s;
}
.global-nav > a:not(.nav-cta):hover::after,
.global-nav > a[aria-current="page"]::after { left: 8%; width: 84%; }
.nav-cta {
  display: inline-flex !important;
  min-width: 122px;
  min-height: 44px !important;
  padding: 10px 21px !important;
  align-items: center;
  justify-content: center;
  background: var(--brand-teal) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  font: 400 12px/1.4 "Noto Serif JP", serif !important;
  letter-spacing: .08em !important;
  white-space: nowrap;
}
.nav-cta:hover { background: #6f5d3a !important; }
.site-header .global-nav > a.nav-instagram {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 28px;
  padding: 10px 0;
}
.site-header .global-nav > a.nav-instagram::after { display: none; }
.nav-instagram svg { display: block; width: 20px; height: 20px; }
.global-nav > a > .nav-instagram-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn,
.button,
.brand-contact {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  border: 1px solid transparent;
  font: 400 12px/1.4 "Noto Serif JP", serif;
  letter-spacing: .1em;
  transition: background-color .25s, color .25s, border-color .25s;
}

.btn--teal,
.button-line,
.brand-contact {
  background: var(--brand-teal);
  color: #fff !important;
  border-color: var(--teal);
}

.btn--teal:hover,
.button-line:hover,
.brand-contact:hover {
  background: var(--brand-navy);
  color: #fff !important;
}

.btn--outline,
.button-outline,
.section-link a,
.text-link {
  background: transparent;
  color: var(--ink, #2b2d28);
  border: 1px solid rgba(9, 76, 74, .42);
}

.btn--outline:hover,
.button-outline:hover,
.section-link a:hover,
.text-link:hover {
  border-color: var(--brand-navy);
  background: rgba(255, 255, 255, .45);
}

.btn--beige,
.section-link.on-dark a {
  background: transparent;
  color: var(--brand-beige);
  border: 1px solid rgba(246, 242, 236, .5);
}

.btn--beige:hover,
.section-link.on-dark a:hover {
  background: rgba(246, 242, 236, .1);
  border-color: var(--brand-beige);
}

.section-link {
  display: flex;
  justify-content: flex-start;
  margin-top: 30px;
  text-align: left;
}

.section-link.on-dark {
  justify-content: center;
}

.section-link a,
.text-link {
  width: fit-content;
  min-width: 172px;
  margin-top: 0;
  text-align: center;
  text-decoration: none;
}

.section-link a span {
  display: none;
}

.sec,
.home-section { padding-block: clamp(96px, 10vw, 144px); }
.hd-ja { font-size: clamp(28px, 3vw, 40px); }
.lead,
.hero-lead,
.service p:last-of-type,
.flow-item p,
.provide-item p,
.guide-card div > span,
.flow-list div > p:last-child { font-size: 16px; font-weight: 400; }

h1,
h2,
h3,
.card-title,
.footer-nav a {
  text-wrap: balance;
  word-break: auto-phrase;
}

.page-head::after { background: linear-gradient(90deg, rgba(4, 32, 31, .86), rgba(4, 32, 31, .38)); }
.page-order .page-head::before { background-image: url("/img/shoot-20261003/S-015.webp"); background-position: center 58%; }
.page-flow .page-head::before { background-image: url("/img/shoot-20261003/S-028.webp"); background-position: center 58%; }
.page-concept .page-head::before { background-image: url("/img/shoot-20261003/S-003.webp"); background-position: center 54%; }
.page-voice .page-head::before { background-image: url("/img/shoot-20261003/S-008.webp"); background-position: center 34%; }
.page-access .page-head::before { background-image: url("/img/shoot-20261003/S-146.webp"); background-position: center 58%; }

.service-section .journal-link {
  margin-top: clamp(30px, 4vw, 52px);
}

.page-order .sec {
  padding-block: clamp(62px, 7vw, 104px);
}

.page-order .first-time-section {
  padding-block: clamp(48px, 5vw, 70px);
}

/* Shared footer for static pages and Astro-rendered reading pages */
.site-footer {
  padding-top: 76px;
  background: #073e3d;
  color: var(--brand-beige);
}

.site-footer > .inner,
.site-footer .footer-inner {
  width: min(1400px, 100%);
  max-width: 1400px;
  margin: auto;
  padding: 0 var(--brand-pad) 62px;
}

.site-footer > .inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr .75fr;
  gap: clamp(46px, 8vw, 120px);
  align-items: start;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr .75fr;
  gap: clamp(46px, 8vw, 120px);
  align-items: start;
  margin-bottom: 0;
}

.site-footer .footer-brand {
  max-width: none;
}

.site-footer .footer-brand .name,
.site-footer .footer-logo {
  display: inline-flex;
  align-items: center;
  color: var(--brand-beige);
  font: 400 25px/1 "Cormorant", serif;
  letter-spacing: .13em;
}

.site-footer .footer-logo-img,
.site-footer .footer-brand img {
  width: auto;
  height: 36px;
}

.site-footer .footer-brand p,
.site-footer .footer-tagline {
  max-width: 34em;
  margin: 24px 0 0;
  color: #d9dccb;
  font-size: 11px;
  line-height: 2;
}

.site-footer .footer-heading {
  margin: 0 0 18px;
  color: var(--brand-beige);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

.site-footer .footer-nav,
.site-footer .footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-links li {
  margin: 0;
}

.site-footer .footer-nav a,
.site-footer .footer-links a {
  color: var(--brand-beige);
  font: 400 13px/1.4 "Cormorant", serif;
  letter-spacing: .07em;
  opacity: .88;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-links a:hover {
  color: #fff;
  opacity: 1;
}

.site-footer .footer-contact p {
  margin: 0 0 20px;
  color: #d9dccb;
  font-size: 11px;
  letter-spacing: .08em;
}

.site-footer .copyright,
.site-footer .footer-bottom {
  padding: 21px var(--brand-pad);
  border-top: 1px solid rgba(246, 242, 236, .12);
  color: rgba(217, 220, 203, .85);
  font-size: 9px;
  letter-spacing: .08em;
}

.site-footer .footer-bottom {
  max-width: none;
  display: block;
  margin: 0;
}

.site-footer .footer-bottom p {
  margin: 0;
}

@media (max-width: 1280px) {
  .site-header { height: 68px; }
  .site-header .inner { padding-inline: 22px; gap: 0; }
  .site-header .site-logo,
  .site-header .site-title { flex-basis: auto; height: 27px; }
  .site-header.site-header .inner.inner { padding-inline: 22px; }
  .site-header .site-logo img,
  .site-header .site-title img,
  .site-header .site-logo-img.site-logo-img { height: 27px; }
  .site-header .menu-toggle { display: block; margin-left: auto; }
  .site-header .global-nav {
    position: fixed;
    inset: 68px 0 auto;
    z-index: 51;
    width: 100%;
    height: calc(100dvh - 68px);
    max-height: calc(100dvh - 68px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 28px 22px calc(105px + env(safe-area-inset-bottom));
    margin: 0;
    background: var(--brand-deep);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform .3s, visibility .3s;
  }
  .site-header .global-nav.is-open { transform: none; visibility: visible; }
  .global-nav > a:not(.nav-cta) { align-items: flex-start; }
  .global-nav > a > span { font-size: 21px; }
  .global-nav > a > small { font-size: 11px; }
  .global-nav > a:not(.nav-cta) { padding: 18px 4px; border-bottom: 1px solid rgba(246, 242, 236,.2); }
  .global-nav > a:not(.nav-cta)::after { display: none; }
  .site-header .nav-cta { margin-top: 20px; }
  /* 2026-10-29 メニューが11項目になったため、スマホでLINEボタンまで1画面に収まるよう間隔を詰める */
  .global-nav > a:not(.nav-cta) { padding-block: 14px; }
  .global-nav > a > span { font-size: 19px; }
  .site-header .global-nav > a.nav-instagram { width: auto; justify-content: flex-start; gap: 12px; padding: 14px 4px; }
  .global-nav > a > .nav-instagram-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 19px; }
}

@media (max-width: 960px) {
  .site-footer > .inner,
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
}

@media (max-width: 760px) {
  .site-footer .footer-nav,
  .site-footer .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
  }

  .site-footer .footer-nav a,
  .site-footer .footer-links a {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.page-profile .page-head::before { background-image:url("/img/shoot-20261003/S-140.webp"); background-position:center 28%; }
.page-fabrics .page-head::before { background-image:url("/img/shoot-20261003/S-017.webp"); }

/* 2026-10-06: 文字リンクを副ボタンと同じ寸法に揃える（トップで枠だけ付き潰れていたため） */
.section-link a,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 26px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .12em;
}
.contact-panel .text-link,
.contact-actions .text-link {
  margin-top: 16px;
}

/* 2026-10-06: ブログ一覧・記事末の相談帯（ChannelListと同じ見た目） */
.reading-line-cta { padding: clamp(5rem, 9vw, 8rem) 24px; background: #094c4a; color: #f6f2ec; text-align: center; }
.reading-line-cta > div { max-width: 760px; margin: 0 auto; }
.reading-line-cta p { margin: 0 0 1rem; color: #d9dccb; font-family: "Cormorant", serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.reading-line-cta h2 { margin: 0; color: #f6f2ec; font-family: "Noto Serif JP", serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; line-height: 1.6; }
.reading-line-cta span { display: block; margin: 1.35rem auto 2rem; color: #d9dccb; line-height: 2; }
.reading-line-cta a { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 25px; border: 1px solid rgba(246, 242, 236, .5); color: #f6f2ec; font-size: 12px; letter-spacing: .1em; text-decoration: none; }
.reading-line-cta a:hover { background: rgba(246, 242, 236, .1); border-color: #f6f2ec; }
/* 2026-10-06: トップCONTACT（濃紺パネル）上の副ボタン */
.contact-panel .text-link {
  margin: 16px 0 0 14px;
  color: var(--brand-beige);
  border-color: rgba(246, 242, 236, .5);
}
.contact-panel .text-link:hover { background: rgba(246, 242, 236, .1); border-color: var(--brand-beige); }
@media (max-width: 640px) { .contact-panel .text-link { margin-left: 0; } }

/* 2026-10-16: 真鍮の文字色を背景で使い分け（生成り上=濃い真鍮、濃いモス上=明るい真鍮） */
:root { --teal-text: #6e6248; }
.sec--teal,.sec--navy,.home-hero,.achievement-section,.access-panel,.contact-panel,.page-head,.site-footer,.partner-hero,.partner-section.contact,.partner-lab-footer,.reading-line-cta,.line-cta,.on-dark { --teal-text: #cfc2a2; }
.site-footer p, .site-footer .copyright, .site-footer .footer-copyright, .site-footer small { color: #d9dccb; }

/* 2026-10-16 整え案2: 文字は墨色、緑は面だけ */
:root { --ink: #2b2d28; }
body { color: var(--ink); }

/* 2026-10-16 フッター小文字を確実に明るく */
body .site-footer .footer-brand p, body .site-footer .footer-tagline, body .site-footer p, body .site-footer .copyright, body .site-footer .footer-bottom, body .site-footer .copyright p { color: #d9dccb; }

/* 2026-10-16 緑の帯が2つ続くときの大きすぎる隙間を詰め、細い線で区切る */
.sec--teal:has(+ .final-cta) { padding-bottom: clamp(48px, 6vw, 80px); }
.sec--teal + .final-cta { padding-top: 0; }
.sec--teal + .final-cta > .wrap { padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(246, 242, 236, .18); }

/* 2026-10-16 紹介文・一行説明を文節で改行（語の途中で折れないように） */
.site-footer p, .footer-brand p, .footer-tagline, .hero-lead { word-break: auto-phrase; text-wrap: pretty; }
body .site-footer .footer-brand p, body .site-footer .footer-tagline { max-width: 32em; }
@media (max-width: 760px) { .hero-lead { text-wrap: balance; } }

/* 2026-10-29: 文末の1〜2文字だけが次の行に落ちるのを防ぐ。店名は途中で改行しない */
p, li, dd, summary { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.page-reviews .page-head::before { background-image: url("/img/shoot-20261003/S-003.webp"); background-position: center 54%; }
/* 2026-10-30: 行頭に小さい「ュ」「ッ」などが来ないようにする（日本語の禁則） */
html { line-break: strict; }

/* 2026-11-01 字体を明朝（Noto Serif JP）に変えて折り返し位置が変わり、「承りま／す。」のような語の途中の改行が増えたため、
   日本語の文は文節の切れ目で折り返し（Chrome・Edge。対応しないブラウザは今までどおり）、行末に1〜2文字だけ残る行も減らす */
main p, main li, main dd, .site-footer p { word-break: auto-phrase; overflow-wrap: break-word; text-wrap: pretty; }
/* 2026-11-01 フッターを #073e3d にしたため、小さい「© THE REQUIRED」が暗く沈まないよう濃さを上げる */
body .site-footer .copyright, body .site-footer .footer-bottom { opacity: .72; }

/* 2026-11-01 「LINEで相談」のボタンをネイビー #1F2E55 に（社長指定。上のメニュー・本文中・トップの冒頭・スマホの画面下） */
.nav-cta, a.btn--teal[href*="lin.ee"], .hero-actions .button-line { background: #1f2e55 !important; border-color: #1f2e55 !important; color: #fff !important; }
.nav-cta:hover, a.btn--teal[href*="lin.ee"]:hover, .hero-actions .button-line:hover { background: #2c3e6e !important; border-color: #2c3e6e !important; }
.mobile-line { background: #1f2e55 !important; color: #fff !important; }
/* 2026-11-01 フッターの屋号を「sarto THE REQUIRED」のロゴ画像に（今井様から。紺のロゴを生成り色にして使用） */
body .site-footer .footer-brand .name img, body .site-footer .footer-logo-img { display: block; width: auto; height: 48px; }
/* 2026-11-01 PCで「LINEで相談」が濃い地（メニューバー・トップの映像）の上で見えにくいため、白い枠を付ける */
.nav-cta, .hero-actions .button-line { border: 1px solid rgba(255, 255, 255, .85) !important; }
.nav-cta:hover, .hero-actions .button-line:hover { border-color: #fff !important; }
/* 2026-11-12 上のメニューの「LINEで相談」だけ、ネイビーからメニューバーと同じ緑＋白線囲いに戻す（06_修正依頼。本文中・スマホの画面下はネイビーのまま） */
.site-header .nav-cta { background: #094c4a !important; border: 1px solid rgba(255, 255, 255, .85) !important; color: #fff !important; }
.site-header .nav-cta:hover { background: #0c5f5c !important; border-color: #fff !important; }
/* 2026-11-01 フッターのロゴの下にカタカナで「リクワイヤード」（06_修正依頼 No.15） */
body .site-footer .footer-brand .name, body .site-footer .footer-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.site-footer .footer-logo-kana { display: block; margin-right: -.5em; font: 400 11px/1 "Noto Serif JP", serif; letter-spacing: .5em; color: #f6f2ec; opacity: .85; }

/* 2026-11-12 想いのページの上部を、スーツの線画（S-158）にした（社長指示）。線画は白い紙の絵なので、このページだけ上部を生成りの地＋墨色の文字にする */
.page-concept .page-head { min-height: clamp(340px, 40vw, 580px); background: #f6f2ec; color: #2b2d28; border-bottom: 1px solid var(--line, #d9d4c8); }
.page-concept .page-head::before { background-image: url("/img/shoot-20261003/S-158-head2.webp"); background-repeat: no-repeat; background-size: auto 56%; background-position: 76% 46%; } /* 小さめに置いて余白を取る（社長指示） */
.page-concept .page-head::after { background: none; }
.page-concept .page-head .ja { color: #6e6248; }
@media (max-width: 760px) {
  .page-concept .page-head { min-height: 380px; justify-content: flex-start; padding-top: 104px; }
  .page-concept .page-head::before { background-size: auto 50%; background-position: 90% 86%; }
}

/* 2026-11-12 フッターのメニューを、上のメニューと同じ項目・同じ順に（社長指示）。英字の下に小さく日本語 */
.site-footer .footer-nav a small { display: block; margin-top: 5px; font-family: var(--ja, "Noto Serif JP", serif); font-size: 10px; letter-spacing: .12em; opacity: .7; }
.site-footer .footer-nav a.footer-instagram { display: inline-flex; align-items: center; gap: 8px; }