/* nine.css — /nine/（NINE化粧品）の書き直し。
 * 元＝nine/css/style.css（2015）＋ Bootstrap 3。寸法は本番の計算値を実測して合わせた（DECISIONS 2026-10-25「書き直す」）。
 * Bootstrap・owl.carousel・Font Awesome・jQuery は使わない。
 */
@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin.woff2") format("woff2"); font-weight: 400; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; src: url("../fonts/opensans-latin.woff2") format("woff2"); font-weight: 300 800; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --c-text: #424242;
  --c-link: #263238;
  --c-accent: #fcac45;
  --c-dark: #212121;
  --f-base: "Marcellus", sans-serif;
  --f-body: "Open Sans", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* 元の main.js はページ内リンクで目的の 40px 手前に止めていた（V3-05） */
html { scroll-padding-top: 40px; }
/* キーボードで移った先は、黒いメニュー（50px）の下に隠れないように（V2-2-02） */
a, button, input, textarea, summary { scroll-margin-top: 60px; }
body { margin: 0; background: #fff; color: var(--c-text); font-family: var(--f-base); font-size: 14px; line-height: 20px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { vertical-align: middle; border: 0; }
a { color: var(--c-link); text-decoration: none; }
a:hover, a:focus { color: var(--c-accent); }
a:hover img { opacity: .7; }
h1, h2, h3, h4 { font-family: inherit; color: inherit; line-height: 1.1; }
h1 { margin: 20px 0 10px; font-size: 36px; font-weight: 500; }
h1 strong { font-weight: 900; }
h2 { margin: 0; font-size: 30px; font-weight: 300; line-height: 40px; }
h3 { margin: 20px 0 10px; font-size: 18px; font-weight: 900; }
p { margin: 0 0 10px; font-family: var(--f-body); line-height: 200%; }
strong { font-weight: 700; }
ul { margin: 0 0 20px 20px; padding: 0; }
hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid #eee; }
.space { margin-top: 40px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; padding: 8px 12px; background: #fff; color: #000; }
.skip-link:focus { top: 8px; }
.ico { display: inline-block; vertical-align: -2px; }
.ico--caret { margin-right: 10px; }
.hl { color: var(--c-accent); }

/* 幅（Bootstrap 3 の .container と同じ） */
/* Bootstrap の .container と同じく、内側の余白を外と重ねない（clearfix の ::before が display:table だった）。
   幅は「最大幅」ではなく「固定幅」＝親に余白があると、元と同じくはみ出す（768px の製品ページの写真＝V3-16） */
.wrap { display: flow-root; width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 768px) { .wrap { width: 750px; } }
@media (min-width: 992px) { .wrap { width: 970px; } }
@media (min-width: 1200px) { .wrap { width: 1170px; } }

/* ── メニュー（上に固定。写真の上では透明、スクロールすると黒＝元の .on） ── */
/* 元の navbar-fixed-top は下に 1px の枠があり、帯の高さは 91px（V3-3-05） */
.nv { position: fixed; inset: 0 0 auto; z-index: 1030; padding: 20px; border-bottom: 1px solid transparent; transition: background-color .8s, padding .8s; }
.nv.is-on, .nv-solid .nv { padding: 0; background: var(--c-dark); }
.nv__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; margin-inline: auto; padding-inline: 15px; }
.nv__brand { display: block; height: 50px; margin-left: -15px; padding: 15px; color: #fff; font-size: 22px; font-weight: 900; line-height: 20px; }
.nv__brand:hover, .nv__brand:focus { color: #fff; }
.nv__menu ul { display: flex; margin: 0 -15px 0 0; list-style: none; }
.nv__menu a { display: block; padding: 15px; color: #fff; font-size: 12px; line-height: 20px; letter-spacing: 1px; }
.nv__menu a:hover, .nv__menu a:focus { color: #fff; }
.nv__menu a[aria-current] { color: var(--c-accent); font-weight: 700; }
.nv__toggle { display: none; margin: 8px 0 8px 0; padding: 9px 10px; border: 1px solid #ddd; border-radius: 0; background: transparent; cursor: pointer; }
.nv__toggle:hover, .nv__toggle:focus-visible { border-color: var(--c-accent); background: var(--c-accent); }
.nv__bar { display: block; width: 22px; height: 2px; background: #888; }
.nv__bar + .nv__bar { margin-top: 4px; }
.nv__toggle:hover .nv__bar { background: #fff; }
@media (min-width: 768px) { .nv__inner { max-width: 750px; } }
@media (min-width: 992px) { .nv__inner { max-width: 970px; } }
@media (min-width: 1200px) { .nv__inner { max-width: 1170px; } }
@media (max-width: 767px) {
  .nv__brand { margin-left: -15px; }
  .nv__toggle { margin-right: 0; }
  .nv__toggle { display: block; }
  .js .nv__menu { display: none; flex-basis: 100%; }
  .js .nv.is-open .nv__menu { display: block; }
  .nv__menu ul { flex-direction: column; margin: 7.5px -15px; }
  .nv__menu a { padding: 10px 15px; }
}
@media (max-width: 603px) { .nv { background-color: rgba(0, 0, 0, .79); } }
.nv-solid main { padding-top: 50px; }

/* ── ページ上部の写真と見出し（元の #○○-home ＋ .top-overlay／.overlay） ── */
.hero { background: center / cover no-repeat; color: #cfcfcf; text-align: center; }
.hero__inner { height: 750px; padding: 20% 15px 0; background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 17%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.1) 100%); }
.hero--band { color: #fff; }
.hero--band .hero__inner { height: auto; padding: calc(80px + 20%) 15px 80px; background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,.73) 17%, rgba(0,0,0,.66) 35%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.4) 100%); }
@media (max-width: 768px) { .hero__inner { padding-top: 40%; } .hero--band .hero__inner { padding-top: calc(80px + 40%); } }
.hero .lead { width: 300px; max-width: 100%; margin: 30px auto; font-size: 16px; font-weight: 300; line-height: 36px; }
/* 元の矢印は .fa（inline-block）で、下の余白 50px が帯の高さに入っていた */
.hero__down a { display: grid; place-items: center; width: 49px; height: 48px; margin: 0 auto 50px; border: 2px solid #b4b4b4; border-radius: 50%; color: #fff; transition: all .5s; }
.hero__down a:hover, .hero__down a:focus { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.hero--top { background-image: url("../img/nine/top-1500w.webp"); background-image: image-set(url("../img/nine/top-1500w.avif") type("image/avif"), url("../img/nine/top-1500w.webp") type("image/webp")); }
.hero--water { background-image: url("../img/nine/ninewater-1500w.webp"); background-image: image-set(url("../img/nine/ninewater-1500w.avif") type("image/avif"), url("../img/nine/ninewater-1500w.webp") type("image/webp")); }
.hero--neckgel { background-image: url("../img/nine/item/neckgel-1100w.webp"); background-image: image-set(url("../img/nine/item/neckgel-1100w.avif") type("image/avif"), url("../img/nine/item/neckgel-1100w.webp") type("image/webp")); }
.hero--component, .hero--medi { background-image: url("../img/nine/component-1500w.webp"); background-image: image-set(url("../img/nine/component-1500w.avif") type("image/avif"), url("../img/nine/component-1500w.webp") type("image/webp")); }
.hero--qa { background-image: url("../img/nine/qa-1500w.webp"); background-image: image-set(url("../img/nine/qa-1500w.avif") type("image/avif"), url("../img/nine/qa-1500w.webp") type("image/webp")); }
.hero--story { background-image: url("../img/nine/story-1500w.webp"); background-image: image-set(url("../img/nine/story-1500w.avif") type("image/avif"), url("../img/nine/story-1500w.webp") type("image/webp")); color: #fff; }
.hero--about { background-image: url("../img/nine/about-company-1600w.webp"); background-image: image-set(url("../img/nine/about-company-1600w.avif") type("image/avif"), url("../img/nine/about-company-1600w.webp") type("image/webp")); }
.hero--plain { color: var(--c-text); }
@media (max-width: 767px) {
  .hero--top { background-image: url("../img/nine/top-800w.webp"); background-image: image-set(url("../img/nine/top-800w.avif") type("image/avif"), url("../img/nine/top-800w.webp") type("image/webp")); }
  .hero--water { background-image: url("../img/nine/ninewater-800w.webp"); background-image: image-set(url("../img/nine/ninewater-800w.avif") type("image/avif"), url("../img/nine/ninewater-800w.webp") type("image/webp")); }
  .hero--neckgel { background-image: url("../img/nine/item/neckgel-600w.webp"); background-image: image-set(url("../img/nine/item/neckgel-600w.avif") type("image/avif"), url("../img/nine/item/neckgel-600w.webp") type("image/webp")); }
  .hero--component, .hero--medi { background-image: url("../img/nine/component-800w.webp"); background-image: image-set(url("../img/nine/component-800w.avif") type("image/avif"), url("../img/nine/component-800w.webp") type("image/webp")); }
  .hero--qa { background-image: url("../img/nine/qa-800w.webp"); background-image: image-set(url("../img/nine/qa-800w.avif") type("image/avif"), url("../img/nine/qa-800w.webp") type("image/webp")); }
  .hero--story { background-image: url("../img/nine/story-800w.webp"); background-image: image-set(url("../img/nine/story-800w.avif") type("image/avif"), url("../img/nine/story-800w.webp") type("image/webp")); }
  .hero--about { background-image: url("../img/nine/about-company-800w.webp"); background-image: image-set(url("../img/nine/about-company-800w.avif") type("image/avif"), url("../img/nine/about-company-800w.webp") type("image/webp")); }
}

/* ── 見出しと下線（元の .section-title） ── */
.st--center { padding: 30px 0; text-align: center; }
.st h2 strong { font-weight: 700; }
/* 案内ページ（form-item・form-company）は題名の見出しを h1 にした。見た目は他の .st の h2 と同じ（verify-loop 仕上げ V2-04） */
.st h1 { margin: 0; font-size: 30px; font-weight: 300; line-height: 40px; }
.st h1 strong { font-weight: 700; }
.st__line { position: relative; width: 60px; height: 10px; margin: 20px auto 0; border-top: 4px solid var(--c-accent); }
/* 元は下線の飾り（hr）が回り込みで、直後に回り込みの解除（.clearfix）がある所だけ下に 28px あいていた */
.st__line--clear { margin-bottom: 28px; }
.st__line::after { content: ""; position: absolute; top: 10px; left: 10px; width: 40px; border-top: 4px solid rgba(252, 172, 69, .34); }
.st__small { margin: 0; font-family: var(--f-base); font-size: 85%; line-height: 20px; }
.st { display: flow-root; }
.st > hr { float: left; clear: both; width: 60px; margin: 20px 0; border-top: 4px solid #eee; }
.st__kicker { margin: 10px 0; font-family: var(--f-base); font-size: 18px; font-weight: 500; line-height: 1.1; }
p.intro { margin: 12px 0 0; font-size: 16px; line-height: 32px; }
ul.about-list { margin: 30px 0 0; list-style: none; }
ul.about-list li { font-family: var(--f-body); font-size: 16px; line-height: 30px; }
ul.about-list .ico { margin-right: 10px; }
.toc { margin: 0 0 20px 30px; list-style: none; text-align: left; }
.toc li { position: relative; }
.toc .ico { position: absolute; left: -30px; top: 3px; width: 30px; }

/* ── トップ ── */
.intro .lead { width: 300px; max-width: 100%; margin: 30px auto; font-size: 16px; font-weight: 300; line-height: 36px; }
.band { background: center / cover no-repeat fixed; color: #fff; text-align: center; }
.band__overlay { padding: 80px 0; background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,.73) 17%, rgba(0,0,0,.66) 35%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.4) 100%); }
.band--water { background-image: url("../img/nine/ninewater-1500w.webp"); background-image: image-set(url("../img/nine/ninewater-1500w.avif") type("image/avif"), url("../img/nine/ninewater-1500w.webp") type("image/webp")); }
.band p { color: #fff; }
@media (hover: none), (max-width: 991px) { .band, .news { background-attachment: scroll; } }

/* 丸い写真のカード（元の .thumbnail ＋ .img-circle.team-img） */
.circle { display: block; width: 120px; height: 120px; margin-inline: auto; border: 4px solid transparent; border-radius: 50%; object-fit: cover; transition: all .5s; }
.card-c { margin-bottom: 20px; padding: 4px; text-align: center; }
.card-c__caption { padding: 9px; color: #333; }
.card-c__caption h3 { margin: 10px 0; font-weight: 500; }
.band .card-c { margin: 15px; padding: 4px; }
.band .card-c__caption { color: #fff; }
.band .card-c__caption h3 { margin: 20px 0 10px; font-weight: 900; }

/* NINEウォーターの2枚（1000px 未満は1枚ずつ横に送る＝元の owl.carousel） */
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__item { scroll-snap-align: start; }
.slider__dots { display: flex; justify-content: center; margin-top: 10px; }
.slider__dots button { width: 24px; height: 25px; padding: 5px 7px 10px; border: 0; background: none; cursor: pointer; }
.slider__dots button::before { content: ""; display: block; width: 10px; height: 10px; background: #5a5a5a; transition: background-color .5s; }
.slider__dots button[aria-current="true"]::before, .slider__dots button:hover::before { background: var(--c-accent); }
@media (min-width: 1000px) { .slider__track { grid-auto-columns: 50%; overflow: visible; } .slider__dots { display: none !important; } }

/* 商品2つ（元の .nine-item.col-md-6 ＞ .item-style） */
.products { display: grid; margin-inline: -15px; }
.product { padding: 60px 15px 30px; }
@media (min-width: 992px) { .products { grid-template-columns: 1fr 1fr; align-items: start; } }
.product__box { padding: 15px; background: #eee; }
/* 写真は元の .img-responsive と同じく、元の大きさより広げない（Medi.J は 600px のまま＝V3-04） */
.product__box img { display: block; max-width: 100%; height: auto; }
.product__name { margin: 0; }
.product__name strong { font-weight: 700; }

.news { padding: 30px 0; background: center / cover no-repeat fixed; text-align: center;
  background-image: url("../img/nine/05-1800w.webp"); background-image: image-set(url("../img/nine/05-1800w.avif") type("image/avif"), url("../img/nine/05-1800w.webp") type("image/webp")); }
@media (max-width: 767px) { .news { background-image: url("../img/nine/05-800w.webp"); background-image: image-set(url("../img/nine/05-800w.avif") type("image/avif"), url("../img/nine/05-800w.webp") type("image/webp")); } }
.news__list { max-width: 730px; margin-inline: auto; }
.news__title { margin: 10px 0; font-size: 14px; font-weight: 700; line-height: 20px; }
.news__item p { margin: 30px 0; color: #333; }

/* ── 製品ページの上の段（元の .nine-item ＋ .row ＞ .col-md-6） ── */
.about { padding: 60px 15px 30px; }
.about__row { display: grid; margin-inline: -15px; }
.about__row > * { padding-inline: 15px; }
.about__img img { display: block; max-width: 100%; height: auto; }
@media (min-width: 992px) { .about__row { grid-template-columns: 1fr 1fr; align-items: start; } }
.about .toc { margin: 30px 30px 50px 60px; }

/* 首のケア手順 */
.howto__lead { text-align: center; }
.howto { display: grid; margin: 0 -15px; padding: 0; list-style: none; }
.howto__step { padding-inline: 15px; }
/* minmax(0,1fr)＝絵（187px）が列の幅を押し広げない。絵は元と同じく枠からはみ出す（V3-2-01） */
@media (min-width: 992px) { .howto { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } }
.howto__title { background: var(--c-dark); color: #fff; font-size: 1.6em; line-height: 1.42857; text-align: center; }
.howto__item { padding: 20px; border: 1px solid #ddd; text-align: center; }
/* 手順の絵は元どおり 187px のまま（枠が狭い 992〜1199px でもはみ出して縮まない＝V3-15） */
.howto__item img { max-width: none; height: auto; }
.howto__item p { margin-top: 15px; }

/* 成分のカード（元の .service.col-md-4.col-sm-6） */
.comps { text-align: center; }
.comps__lead .card-c, .comps__grid .card-c { padding: 4px; }
.comps__grid { display: grid; margin-inline: -15px; }
.comps__grid > * { margin-inline: 15px; }
@media (min-width: 768px) { .comps__grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 992px) { .comps__grid { grid-template-columns: repeat(3, 1fr); } }

/* ── 写真＋本文の段（元の .row ＞ .col-md-3 ＋ .col-md-9） ── */
.media { display: grid; margin-inline: -15px; }
.media > * { padding-inline: 15px; }
.media__img img { display: block; max-width: 100%; height: auto; }
@media (min-width: 992px) { .media { grid-template-columns: 1fr 3fr; align-items: start; } }
/* 成分名の見出しは元の .container の中＝幅は .wrap と同じ（360px で長い名前が2行になる＝V3-3-02） */
.comp__title { width: 100%; margin: 30px auto 0; padding: 80px 15px 30px; }
@media (min-width: 768px) { .comp__title { width: 750px; } }
@media (min-width: 992px) { .comp__title { width: 970px; } }
@media (min-width: 1200px) { .comp__title { width: 1170px; } }

/* ── Q&A（元の .FAQbox ＋ .acMenu。答えは押すと開く） ── */
.qa-top { text-align: center; }
.qa-top__list { display: grid; margin: 40px -15px 0; list-style: none; }
.qa-top__list a { display: block; padding-inline: 15px; }
.qa-top__list strong { display: block; margin: 10px 0; font-size: 18px; line-height: 1.1; }
/* 元は3つ並び（col-sm-4）。お買い物の項目を外したので、同じ幅のまま2つを中央に置く */
@media (min-width: 768px) { .qa-top__list { grid-template-columns: repeat(2, calc(100% / 3)); justify-content: center; } }
.qa__band { margin: 30px 0; padding: 16px 15px; background: var(--c-dark); color: #fff; text-align: center; }
.qa__note { margin: 0; font-family: var(--f-base); line-height: 20px; text-align: center; }
.faq, .dotbox { margin: 16px 8px; padding: 16px; border: 3px dotted currentColor; border-radius: 10px; text-align: left; }
.faq summary { display: block; padding-right: 15px; background: url("../img/nine/down_swich.svg") right center / 14px no-repeat; font-weight: 900; line-height: 20px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] summary { background-image: url("../img/nine/up_swich.svg"); }
.faq p { margin: 10px 0 0; }
.faq__top { margin: 0; font-family: var(--f-base); line-height: 20px; text-align: right; }
.faq__top a { display: inline-block; padding: 6px 12px; border: 1px solid transparent; white-space: nowrap; }
.faq__top .ico { width: 12px; height: 12px; }

/* ── 個人情報 ── */
.pv-menu { padding: 15px; }
/* 768px 未満は元の inline-block と同じく、収まるだけ横に並べて折り返す（V3-2-03） */
.pv-menu__links { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -15px; list-style: none; text-align: center; }
.pv-menu .st p { text-align: start; }
.pv-menu__links a { display: block; padding: 7px 12px; line-height: 20px; white-space: nowrap; }
@media (min-width: 768px) { .pv-menu__links { display: grid; grid-template-columns: repeat(3, 1fr); } }
.rule { margin: 20px 0; }
.pv .dotbox ul { margin: 0 0 20px 20px; }
.pv__after { font-family: var(--f-base); line-height: 20px; }

/* ── 開発秘話・お問い合わせの案内 ── */
.story { padding: 80px 0; text-align: center; }
.story__grid, .guide__grid { display: grid; margin-inline: -15px; }
@media (min-width: 768px) { .story__grid { grid-template-columns: 1fr 1fr; } .guide__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .guide__grid { grid-template-columns: repeat(3, 1fr); } }
.card-c--story { margin: 15px 30px; color: var(--c-accent); }
.card-c--story .card-c__caption h3 { margin: 10px 0; }
.guide { text-align: center; }
.guide__item { padding-inline: 15px; }
/* 縦に積む幅では項目どうしの間を取る（お買い物の項目は見出しだけになり、次のアイコンが詰まって見えた・仕上げ V3-03） */
@media (max-width: 767px) { .guide__item + .guide__item { margin-top: 30px; } }
.guide__item h3 { margin: 10px 0; font-weight: 500; }
.guide__icon { display: inline-block; }

/* ── 会社概要 ── */
.company__table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.company__table th, .company__table td { padding: 8px; border-top: 1px solid #ddd; line-height: 1.42857; text-align: left; vertical-align: top; }
@media (min-width: 768px) { .company__table { width: calc((100% + 30px) * 8 / 12 - 30px); margin-inline: auto; } }
.to-contact { text-align: center; }
.to-contact__btn { margin: 0 0 40px; font-family: var(--f-base); }
.btn-cta { display: inline-block; padding: 10px 16px; border: 1px solid #eea236; border-radius: 6px; background: #f0ad4e; color: #fff; font-size: 18px; line-height: 24px; }
.btn-cta:hover, .btn-cta:focus { border-color: #d58512; background: #ec971f; color: #fff; }

/* ── お問い合わせ（元の表の形：左に項目名・右に入力欄・1行おきに色） ── */
.contact .form { --th: 34%; margin-bottom: 20px; }
.contact .form__field { display: grid; grid-template-columns: var(--th) 1fr; margin: 0; padding: 0; border: 0; border-top: 1px solid #ddd; }
.contact .form__field:nth-child(odd of .form__field) { background: #f9f9f9; }
.contact .form__label { padding: 8px; font-weight: 700; line-height: 20px; }
.contact fieldset.form__field { display: block; min-width: 0; }
.contact fieldset .form__label { float: left; width: var(--th); }
.contact fieldset.form__field > .form__choices { margin: 0 0 0 var(--th); padding: 8px; }
.contact .form__choices label { display: block; margin-bottom: 5px; font-weight: 700; }
.contact .form__choices input { margin: 4px 4px 0 0; vertical-align: -1px; }
.contact .form__field > :not(.form__label) { margin: 8px; }
.contact .form__input, .contact .form__textarea { display: block; width: calc(100% - 16px); height: 34px; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); color: #555; font: inherit; line-height: 20px; }
.contact .form__textarea { height: 214px; resize: vertical; }
.contact .form__input:focus, .contact .form__textarea:focus { border-color: #66afe9; outline: 2px solid #0279a0; outline-offset: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); }
.form__req { display: inline-block; margin-left: 4px; padding: .2em .6em .3em; border-radius: .25em; background: #c9302c; color: #fff; font-size: 75%; font-weight: 700; line-height: 1; vertical-align: 1px; }
.contact .nf-turnstile { display: block; border-top: 1px solid #ddd; padding: 8px 8px 8px calc(var(--th) + 8px); }
.contact .form__submit { display: block; width: calc((100% + 30px) * 8 / 12 - 30px); margin: 20px auto 0; padding: 10px 16px; border: 1px solid #eea236; border-radius: 6px; background: #f0ad4e; color: #fff; font: inherit; font-size: 18px; line-height: 24px; cursor: pointer; }
.contact .form__submit:hover { border-color: #d58512; background: #ec971f; }
.contact .form__submit:disabled { opacity: .65; cursor: wait; }
.nf-tip { display: block; margin-top: 6px; color: #a94442; font-size: 13px; }
.contact .form__field > .nf-tip { grid-column: 2; margin: -4px 8px 8px; }
.contact fieldset.form__field > .nf-tip { margin: -4px 8px 8px calc(var(--th) + 8px); }
#nf-form { scroll-margin-top: 70px; }
.nf-response { margin: 0 0 20px; padding: 15px; border: 1px solid #ebccd1; border-radius: 4px; background: #f2dede; color: #a94442; font-family: var(--f-body); line-height: 1.6; }
.nf-response.nf-ok { border-color: #d6e9c6; background: #dff0d8; color: #3c763d; }
@media (max-width: 767px) { .contact .form { --th: 32.5%; } }

/* ── フッター ── */
.ft { padding: 20px 0 15px; background: #eee; color: #222; }
.ft__title { margin: 20px 0 10px; font-size: 18px; font-weight: 900; line-height: 1.1; }
.ft p { margin: 10px 0; font-size: 12px; }
@media (max-width: 603px) { .ft__nav { text-align: center; } }