@charset "UTF-8";

/* ============================================
   Foundation
   ============================================ */

:root {
  /* Color */
  --color-text: #080808;
  --color-main: #649b7f;
  --color-accent: #e37240;
  --color-product-new: #e5b53f;
  --color-bg: #f4f4f4;
  --color-white: #fff;
  --color-dark: #3e3a39;
  --color-gray: #4d4c47;
  --color-muted: #9a9a9a;
  --color-note: #666;
  --color-line: #707070;
  --color-line-light: rgb(255 255 255 / 0.55);
  --color-placeholder: #e5e5e5;
  --color-veil: rgb(255 255 255 / 0.15);

  /* Typography */
  --font-base: "Noto Sans JP", system-ui, sans-serif;
  --fs-xs: 1.2rem;
  --fs-sm: 1.4rem;
  --fs-md: 1.5rem;
  --fs-lg: 1.6rem;
  --fs-xl: 2rem;
  --fs-2xl: 3.4rem;
  --fs-heading-v: 5.8rem;
  --fs-catch: 3.7rem;
  --fs-visual: 8rem;

  /* Space */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 100px;

  /* Layout */
  --container: 980px;
  --gutter: 20px;
  --page-min-width: 1300px;
  /* XD（1380px）の 1px。広い画面では画面幅に比例して大きくなり、背景の絵柄を相似形で拡大する */
  --design-px: max(1px, 100vw / 1380);
  --header-side: 320px;
  --header-toggle-width: 283px;
  --header-bar-height: 67px;
  --float-width: calc(var(--header-side) - 26px);
  --float-bottom: 20px;
  --float-tel-height: 68px;
  --float-gap: 12px;
  --heading-v-width: 95px;
  --heading-v-gap: 88px;
  --curve-depth: 56px;
  --curve-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 Q101.5 100 203 100 L797 100 Q898.5 100 1000 0 Z'/%3E%3C/svg%3E");
  --list-bleed: 24px;

  /* Radius */
  --radius-sm: 5px;
  --radius-md: 10px;

  /* Motion */
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --easing-out: cubic-bezier(0.33, 1, 0.68, 1);
  --hover-opacity: 0.7;

  /* z-index */
  --z-gnav: 50;
  --z-float: 60;
  --z-nav: 100;
  --z-header: 110;
}

html {
  font-size: 62.5%;
}

body {
  min-width: var(--page-min-width);
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-lg);
  line-height: 1.5;
  /* Mac で文字が太く描かれるのを抑え、XD の文字の太さに近づける */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

body.is-nav-open {
  overflow: hidden;
}

/* ============================================
   Layout
   ============================================ */

/* ---- Header（FV に重なるロゴとカタログボタン） ---- */

.l-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* トップでロゴを包む h1。見出しの初期の文字サイズ・太さをロゴに持ち込まない */
.l-header__brand {
  font-size: inherit;
  font-weight: inherit;
}

.l-header__logo {
  padding: 22px 0 0 27px;
}

.l-header__toggle {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-header);
}

/* 見えなくするだけでは h1 と .l-header の枠がメニューの手前に残り、メニュー内のロゴのタップを奪うので取り除く */
.is-nav-open .l-header__brand {
  display: none;
}

/* ---- Global navigation ---- */
.l-gnav {
  position: sticky;
  top: 0;
  z-index: var(--z-gnav);
  background-color: var(--color-white);
}

/* 画面が --page-min-width より狭いとページは横にはみ出すが、右上のボタンは画面の右端に固定のまま。
   ナビの右端も画面の幅から測り、メニューと SNS がボタンの下に入らないようにする */
.l-gnav__inner {
  display: flex;
  align-items: center;
  width: calc(min(100%, 100vw) - var(--header-side));
  min-height: var(--header-bar-height);
  padding-inline: var(--space-lg);
}

/* 左へ寄せきってもまだ狭いときは、縮めずに形を保つ（ロゴの縮小や SNS のつぶれを防ぐ） */
.l-gnav__logo {
  flex-shrink: 0;
}

.l-gnav__logo .c-logo__tagline {
  display: none;
}

.l-gnav__menu {
  display: flex;
  flex-shrink: 0;
  gap: 40px;
  margin-left: 40px;
  font-size: var(--fs-sm);
  list-style: none;
}

/* margin の auto で右に寄せ、狭い画面で左へ寄ってきてもメニューとの間は padding の分だけ残す */
.l-gnav__sns {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-lg);
}

.l-gnav--subpage .l-gnav__inner {
  width: calc(min(100%, 100vw) - var(--header-toggle-width));
  padding-left: 18px;
}

/* 狭い画面でメニューが左へ寄っても、トップと同じくロゴとの間は 40px 残す */
.l-gnav--subpage .l-gnav__logo {
  margin-right: 40px;
}

.l-gnav--subpage .l-gnav__logo .c-logo__tagline {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.l-gnav--subpage .l-gnav__menu {
  margin-left: auto;
  white-space: nowrap;
}

.l-gnav--subpage .l-gnav__sns {
  margin-left: 0;
}

.l-gnav__menu a,
.l-footer__menu a,
.l-footer__policy a {
  transition: color var(--duration-base) var(--easing-out);
}

.l-gnav__menu a:hover,
.l-gnav__menu a:focus-visible,
.l-footer__menu a:hover,
.l-footer__menu a:focus-visible,
.l-footer__policy a:hover,
.l-footer__policy a:focus-visible {
  color: var(--color-main);
}

/* ---- Footer ---- */

.l-footer {
  border-top: 7px solid var(--color-main);
  background-color: var(--color-white);
}

/* XD に合わせ、ロゴとメニュー1行目の上端を緑の線の上端から 77px（線 7px + 70px）にそろえる */
.l-footer__inner {
  display: flex;
  justify-content: space-between;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 70px var(--gutter) 0;
}

/* XD の文字データ（18px・Medium・行送り 30px）に合わせる。基準線は緑の線の上端から 150px・180px */
.l-footer__hours {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 30px;
}

.l-footer__logo {
  margin-bottom: 14px;
}

/* 営業時間の行送りを詰めた分を足し、住所の位置（XD どおり）を保つ */
.l-footer__address {
  margin-top: 35px;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.l-footer__address dt {
  font-weight: 500;
}

.l-footer__address dd+dt {
  margin-top: 14px;
}

.l-footer__sp-break {
  display: none;
}

.l-footer__nav {
  flex: none;
}

.l-footer__menu {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  gap: 14px 40px;
  font-size: var(--fs-sm);
  list-style: none;
}

.l-footer__sns {
  margin-top: 30px;
}

.l-footer__tel {
  margin-top: 60px;
}

.l-footer__tel .c-tel__label {
  font-size: 1.6rem;
}

.l-footer__tel .c-tel__number {
  font-size: 2.4rem;
}

.l-footer__policy {
  margin-top: 20px;
  font-size: var(--fs-xs);
  line-height: 2;
  list-style: none;
}

.l-footer__policy a {
  color: var(--color-muted);
}

/* XD では区切り線の左右に 33px の余白がある。線は緑の線の上端から 445px（SNS・契約書のリンクがある状態）、
   コピーライトの基準線は 480px、フッター全体の高さは 515px */
.l-footer__copyright {
  margin: 51px 33px 0;
  padding: var(--space-sm) var(--space-lg) 28px;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--fs-xs);
  line-height: 25px;
  text-align: center;
}

/* small の既定（smaller）で 10px にならないよう、段落の文字サイズを使う */
.l-footer__copyright small {
  font-size: inherit;
}

/* ============================================
   Object / Component
   ============================================ */

.c-news-new {
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  background-color: var(--color-product-new);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 22px;
  vertical-align: middle;
}

/* ---- ロゴ（キャッチフレーズ＋ロゴ画像） ---- */

.c-logo {
  display: block;
}

.c-logo__tagline {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-sm);
  line-height: 1;
}

.c-logo--light {
  color: var(--color-white);
}

/* ---- 矢印アイコン ---- */

.c-icon-arrow {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 8px;
  background: url(../img/arrow-black.svg) no-repeat;
  background-size: contain;
}

/* 四角で囲んだ矢印ボタン。ブログカードの .c-icon-arrow--box と
   Read More の .c-readmore__icon は寸法だけが違うので、
   見た目とホバーの動きはここでまとめて定義する */

.c-icon-arrow--box,
.c-readmore__icon {
  --box-fill: var(--color-main);
  display: grid;
  flex: none;
  place-items: center;
  border: 1px solid currentcolor;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--box-fill) 0 0);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  transition:
    background-size var(--duration-base) var(--easing-out),
    border-color var(--duration-base) var(--easing-out);
}

.c-icon-arrow--box {
  width: 42px;
  height: 42px;
}

.c-icon-arrow--box::before,
.c-icon-arrow--box::after,
.c-readmore__icon::before,
.c-readmore__icon::after,
.c-button .c-icon-arrow::before,
.c-button .c-icon-arrow::after {
  content: "";
  grid-area: 1 / 1;
  width: 9px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  transition:
    opacity var(--duration-base) var(--easing-out),
    translate var(--duration-base) var(--easing-out);
}

.c-icon-arrow--box::before,
.c-readmore__icon::before {
  background-image: url(../img/arrow-black.svg);
  translate: 2px 0;
}

.c-icon-arrow--box::after,
.c-readmore__icon::after {
  background-image: url(../img/arrow-white.svg);
  opacity: 0;
  translate: -14px 0;
}

a:hover .c-icon-arrow--box,
a:focus-visible .c-icon-arrow--box,
a:hover .c-readmore__icon,
a:focus-visible .c-readmore__icon {
  border-color: var(--box-fill);
  background-size: 100% 100%;
}

a:hover .c-icon-arrow--box::before,
a:focus-visible .c-icon-arrow--box::before,
a:hover .c-readmore__icon::before,
a:focus-visible .c-readmore__icon::before {
  opacity: 0;
  translate: 18px 0;
}

a:hover .c-icon-arrow--box::after,
a:focus-visible .c-icon-arrow--box::after,
a:hover .c-readmore__icon::after,
a:focus-visible .c-readmore__icon::after {
  opacity: 1;
  translate: 2px 0;
}

/* ---- ページ内リンク（レポートと下層ページで同じ下線の動き） ---- */

.c-page-anchor,
.p-report-hero__nav a {
  position: relative;
  transition: color var(--duration-base) var(--easing-out);
}

.c-page-anchor:is(:hover, :focus-visible),
.p-report-hero__nav a:is(:hover, :focus-visible) {
  color: var(--color-main);
}

.c-page-anchor::before,
.p-report-hero__nav a::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 15px;
  border-bottom: 1px solid var(--color-main);
  transition: width var(--duration-base) var(--easing-out);
  content: "";
}

.c-page-anchor:is(:hover, :focus-visible)::before,
.p-report-hero__nav a:is(:hover, :focus-visible)::before {
  width: 100%;
}

/* ---- Read More ---- */

.c-readmore {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 19px;
  color: var(--color-text);
}

.c-readmore__icon {
  width: 44px;
  height: 44px;
}

.c-readmore--light .c-readmore__icon {
  --box-fill: var(--color-white);
}

.c-readmore--light .c-readmore__icon::before {
  background-image: url(../img/arrow-white.svg);
}

.c-readmore--light .c-readmore__icon::after {
  background-image: url(../img/arrow-black.svg);
}

.c-readmore__label {
  font-size: var(--fs-md);
}

.c-readmore--light {
  color: var(--color-white);
}

/* ---- ボタン ---- */
.c-button {
  --btn-color: var(--color-text);
  --btn-fill: var(--color-main);
  --btn-reverse: var(--color-white);

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 163px;
  min-height: 44px;
  padding: 0 var(--space-sm) 0 14px;
  border: 1px solid var(--btn-color);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--btn-fill) 0 0);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  color: var(--btn-color);
  font-size: var(--fs-md);
  transition:
    background-size var(--duration-base) var(--easing-out),
    border-color var(--duration-base) var(--easing-out),
    color var(--duration-base) var(--easing-out);
}

.c-button--light {
  --btn-color: var(--color-white);
  --btn-fill: var(--color-white);
  --btn-reverse: var(--color-text);
}

.c-button--dark {
  --btn-color: var(--color-white);
  border-color: var(--color-dark);
  background-color: var(--color-dark);
}

.c-button:hover,
.c-button:focus-visible {
  border-color: var(--btn-fill);
  background-size: 100% 100%;
  color: var(--btn-reverse);
}

.c-button .c-icon-arrow {
  display: grid;
  place-items: center;
  background-image: none;
}

.c-button .c-icon-arrow::before {
  background-image: url(../img/arrow-black.svg);
}

.c-button .c-icon-arrow::after {
  background-image: url(../img/arrow-white.svg);
  opacity: 0;
  translate: -12px 0;
}

.c-button--light .c-icon-arrow::before,
.c-button--dark .c-icon-arrow::before {
  background-image: url(../img/arrow-white.svg);
}

.c-button--light .c-icon-arrow::after {
  background-image: url(../img/arrow-black.svg);
}

.c-button:hover .c-icon-arrow::before,
.c-button:focus-visible .c-icon-arrow::before {
  opacity: 0;
  translate: 12px 0;
}

.c-button:hover .c-icon-arrow::after,
.c-button:focus-visible .c-icon-arrow::after {
  opacity: 1;
  translate: 0 0;
}

.c-button--accent {
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background-image: none;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  transition: opacity var(--duration-base) var(--easing-out);
}

.c-button--block {
  display: flex;
  width: 100%;
  min-height: 82px;
}

/* ---- 電話番号ボックス ---- */

.c-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  transition:
    background-color var(--duration-base) var(--easing-out),
    opacity var(--duration-base) var(--easing-out);
}

.c-tel:hover,
.c-tel:focus-visible {
  background-color: var(--color-main);
}

.c-tel__label {
  font-size: var(--fs-sm);
}

.c-tel__number {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
}

.c-tel--float {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background-color: var(--color-gray);
}

.c-tel--main {
  border-radius: var(--radius-md);
  background-color: var(--color-main);
}

.c-tel--dark {
  min-height: 82px;
  border-radius: var(--radius-md);
  background-color: var(--color-dark);
}

/* ---- SNS ---- */

.c-sns {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
}

/* アイコンは画像なので、色ではなく透過で反応を返す */
.c-sns a {
  transition: opacity var(--duration-base) var(--easing-out);
}

.c-sns a:hover,
.c-sns a:focus-visible {
  opacity: var(--hover-opacity);
}

/* ---- ナビ開閉ボタン ---- */

.c-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: var(--space-md);
  width: var(--header-toggle-width);
  min-height: var(--header-bar-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-white);
  transition:
    width var(--duration-base) var(--easing-out),
    gap var(--duration-base) var(--easing-out),
    background-color var(--duration-base) var(--easing-out),
    opacity var(--duration-base) var(--easing-out);
}

.c-nav-toggle__label {
  max-width: 200px;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition:
    max-width var(--duration-base) var(--easing-out),
    opacity var(--duration-base) var(--easing-out);
}

.c-nav-toggle__icon,
.c-nav-toggle__icon::before,
.c-nav-toggle__icon::after {
  display: block;
  height: 2px;
  background-color: currentcolor;
}

.c-nav-toggle__icon {
  position: relative;
  width: 15px;
  border-radius: 999px;
}

.c-nav-toggle__icon::before,
.c-nav-toggle__icon::after {
  transition: width var(--duration-base) var(--easing-out), opacity var(--duration-base) var(--easing-out);
  border-radius: 999px;
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
}

.c-nav-toggle__icon::before {
  top: -7px;
  width: 26px;
}

.c-nav-toggle__icon::after {
  top: 7px;
  width: 10px;
}

.c-nav-toggle.is-open {
  gap: 0;
  width: 80px;
  background-color: var(--color-main);
}

.c-nav-toggle.is-open .c-nav-toggle__label {
  max-width: 0;
  opacity: 0;
}

.c-nav-toggle.is-open .c-nav-toggle__icon::before,
.c-nav-toggle.is-open .c-nav-toggle__icon::after {
  width: 0;
  opacity: 0;
}

/* ---- 縦組みセクション見出し ---- */

.c-heading-v {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.c-heading-v--reverse {
  flex-direction: row;
}

.c-heading-v--light {
  color: var(--color-white);
}

.c-heading-v__ja {
  padding-bottom: 14px;
  position: relative;
  isolation: isolate;
  writing-mode: vertical-rl;
  font-size: var(--fs-heading-v);
  font-weight: 700;
  line-height: 1;
}

.c-heading-v__ja::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6px;
  right: -8px;
  width: 26px;
  height: 100%;
  background-color: var(--color-accent);
  transform-origin: top;
  transition: scale var(--duration-slow) var(--easing-out);
}

/* 画面に入るまでは縮めておき、上から下へ引かれるように見せる。
   JS が動かない場合はこのクラスが付かないので線は最初から出る */
.c-heading-v.is-hidden .c-heading-v__ja::before {
  scale: 1 0;
}

.c-heading-v--reverse .c-heading-v__ja::before {
  right: auto;
  left: -8px;
}

.c-heading-v__en {
  margin-top: 2px;
  writing-mode: vertical-rl;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
}

/* ---- 塗りのあるボタンのホバー ---- */
.c-button--accent:hover,
.c-button--accent:focus-visible,
.c-tel--main:hover,
.c-tel--main:focus-visible,
.c-nav-toggle:hover,
.c-nav-toggle:focus-visible {
  opacity: var(--hover-opacity);
}

/* ---- 投稿・固定ページの共通本文 ---- */

.c-entry-content {
  --entry-rule: color-mix(in srgb, var(--color-line) 35%, var(--color-white));
  --entry-tint: color-mix(in srgb, var(--color-main) 6%, var(--color-white));
  --entry-link: color-mix(in srgb, var(--color-main) 70%, var(--color-text));
  display: flow-root;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.c-entry-content > :where(* + *),
.c-entry-content :where(p + p) {
  margin-top: var(--space-md);
}

.c-entry-content :where(h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.6;
  text-wrap: pretty;
}

.c-entry-content :where(h2) {
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-main);
  border-radius: var(--radius-sm);
  background-color: var(--entry-tint);
  font-size: 2.6rem;
}

.c-entry-content :where(h3) {
  margin-top: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-main);
  font-size: var(--fs-xl);
}

.c-entry-content :where(h4) {
  margin-top: var(--space-md);
  padding-left: var(--space-xs);
  border-left: 3px solid var(--color-accent);
  font-size: var(--fs-lg);
}

.c-entry-content :where(h5) {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
}

.c-entry-content :where(h6) {
  margin-top: var(--space-md);
  color: var(--color-gray);
  font-size: var(--fs-sm);
}

.c-entry-content :where(h2, h3, h4, h5, h6) + :where(p, ul, ol, dl) {
  margin-top: var(--space-sm);
}

.c-entry-content :where(a) {
  color: var(--entry-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: opacity var(--duration-base) var(--easing-out);
}

.c-entry-content :where(a):is(:hover, :focus-visible) {
  opacity: var(--hover-opacity);
}

.c-entry-content :where(strong, b) {
  font-weight: 700;
}

.c-entry-content :where(em, i) {
  font-style: italic;
}

.c-entry-content :where(mark) {
  padding-inline: .15em;
  background-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-white));
  color: inherit;
}

.c-entry-content :where(small) {
  font-size: .85em;
}

.c-entry-content :is(ul, ol) {
  padding-left: 1.6em;
}

.c-entry-content :where(ul) {
  list-style: disc;
}

.c-entry-content :where(ol) {
  list-style: decimal;
}

.c-entry-content :where(ul ul) {
  list-style: circle;
}

.c-entry-content :where(ol ol) {
  list-style: lower-alpha;
}

.c-entry-content :where(li + li, li > ul, li > ol) {
  margin-top: var(--space-2xs);
}

.c-entry-content :where(dt) {
  font-weight: 700;
}

.c-entry-content :where(dd) {
  margin-top: var(--space-2xs);
  padding-left: var(--space-sm);
}

.c-entry-content :where(dd + dt) {
  margin-top: var(--space-md);
}

.c-entry-content blockquote {
  padding: var(--space-md);
  border-left: 4px solid var(--color-main);
  background-color: var(--entry-tint);
}

.c-entry-content :where(blockquote cite) {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-gray);
  font-size: var(--fs-xs);
  font-style: normal;
}

.c-entry-content figure {
  max-width: 100%;
  margin-bottom: 0;
}

.c-entry-content :is(img, video) {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
}

.c-entry-content figure > figcaption {
  margin-top: var(--space-xs);
  color: var(--color-gray);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
}

.c-entry-content :where(.aligncenter) {
  margin-inline: auto;
}

.c-entry-content :where(.alignleft) {
  margin-right: auto;
}

.c-entry-content :where(.alignright) {
  margin-left: auto;
}

.c-entry-content :where(.alignwide, .alignfull) {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.c-entry-content :where(.wp-block-table) {
  overflow-x: auto;
}

.c-entry-content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-sm);
}

.c-entry-content :where(caption) {
  margin-bottom: var(--space-xs);
  font-weight: 700;
  text-align: left;
}

.c-entry-content table > :is(thead, tfoot) {
  border: 0;
}

.c-entry-content table :is(th, td) {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--entry-rule);
  text-align: left;
  vertical-align: top;
}

.c-entry-content table th {
  background-color: var(--entry-tint);
  font-weight: 700;
}

.c-entry-content .wp-block-table > figcaption {
  text-align: left;
}

.c-entry-content hr {
  margin-block: var(--space-lg);
  border: 0;
  border-top: 1px solid var(--entry-rule);
  opacity: 1;
}

.c-entry-content :where(code, kbd, pre) {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
}

.c-entry-content :where(:not(pre) > code, kbd) {
  padding: .15em .4em;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
}

.c-entry-content pre {
  overflow-x: auto;
  max-width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--entry-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  line-height: 1.7;
  white-space: pre;
}

.c-entry-content pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
  white-space: inherit;
}

.c-entry-content :where(iframe, audio) {
  max-width: 100%;
}

.c-entry-content :where(.wp-block-embed.is-type-video iframe) {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.c-entry-content :where(details) {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--entry-rule);
  border-radius: var(--radius-sm);
}

.c-entry-content :where(summary) {
  font-weight: 700;
  cursor: pointer;
}

.c-entry-content :where(details[open] > summary) {
  margin-bottom: var(--space-sm);
}

.c-entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.c-entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--entry-link);
  border-radius: var(--radius-sm);
  background-color: var(--entry-link);
  color: var(--color-white);
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
}

.c-entry-content .is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--entry-link);
}

.c-entry-content > :first-child,
.c-entry-content :where(blockquote, li, dd, details) > :first-child {
  margin-top: 0;
}

/* ============================================
   Object / Project
   ============================================ */

/* ---- セクション共通レイアウト ---- */

.p-section {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg);
}

.p-section__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--heading-v-gap);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.p-section__head {
  flex: none;
  width: var(--heading-v-width);
  /* 見出しはコンテンツ幅の外側へ張り出す */
  margin-left: calc(var(--heading-v-width) * -1);
}

.p-section__body {
  flex: 1;
  min-width: 0;
}

.p-section__inner--reverse {
  flex-direction: row-reverse;
}

.p-section__inner--reverse .p-section__head {
  margin-right: calc(var(--heading-v-width) * -1);
  margin-left: 0;
}

.p-section--curve,
.p-sustainability {
  position: relative;
  z-index: 1;
  margin-bottom: calc(var(--curve-depth) * -1);
}

.p-section--curve {
  mask-image: linear-gradient(#000 0 0), var(--curve-shape);
  mask-size:
    100% calc(100% - var(--curve-depth)),
    100% var(--curve-depth);
  mask-position:
    left top,
    left bottom;
  mask-repeat: no-repeat;
}

/* ---- ファーストビュー ---- */

.p-fv {
  position: relative;
  height: 100vh;
}

.p-fv__media {
  height: 100%;
  position: relative;
  z-index: 0;
}

/* XD：緑を 50% の乗算で重ねる */
.p-fv__media::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(100 155 127 / 50%);
  mix-blend-mode: multiply;
}

.p-fv__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-fv__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-fv__copy::before,
.p-fv__copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -7px;
  width: 26px;
  background-color: var(--color-accent);
  /* 6秒で「上から引く → 保つ → 下へ抜ける」を一巡し、繰り返す */
  animation: fv-line 6s var(--easing-out) infinite backwards;
}

/* 左の「考えている。ずっと。」は右の線を引き終えてから始める */
.p-fv__copy::before {
  height: calc(100% + 15px);
  left: 18px;
  animation-delay: 0.9s;
}

/* 右の「暮らしにもっと。」が先 */
.p-fv__copy::after {
  height: calc(100% - 42px);
  right: -8px;
}

@keyframes fv-line {
  0% {
    transform-origin: top;
    scale: 1 0;
  }

  12%,
  58% {
    transform-origin: top;
    scale: 1 1;
  }

  /* 原点だけ下へ移す。倍率は 1 のままなので見た目は動かない */
  58.1% {
    transform-origin: bottom;
    scale: 1 1;
  }

  70%,
  100% {
    transform-origin: bottom;
    scale: 1 0;
  }
}

/* 動きを減らす設定では線を出したままにする */
@media (prefers-reduced-motion: reduce) {
  .p-fv__copy::before,
  .p-fv__copy::after {
    animation: none;
  }
}

.p-fv__foot {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-start;
  padding-right: var(--header-side);
  padding-left: var(--space-lg);
}

.p-fv__tel {
  position: fixed;
  right: 0;
  bottom: var(--float-bottom);
  z-index: var(--z-float);
  width: var(--float-width);
  min-height: var(--float-tel-height);
}

.p-fv__catalog {
  display: none;
}

/* ---- 新着記事のティッカー（FV 下部） ---- */

.p-ticker {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  min-height: 88px;
  padding: 0 14px;
  border-top: 2px solid var(--color-line-light);
  color: var(--color-white);
  transition: background-color var(--duration-base) var(--easing-out);
}

.p-ticker:hover,
.p-ticker:focus-visible {
  background-color: var(--color-veil);
}

.p-ticker__date {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.p-ticker__title {
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.p-ticker__title .c-news-new {
  margin-right: var(--space-xs);
}

.p-ticker .c-icon-arrow {
  margin-left: auto;
  background: url(../img/arrow-white.svg) no-repeat;
  background-size: contain;
}

/* ---- 施工事例 ---- */

/* 100vw は Windows のスクロールバー幅まで含むため、スライダーのはみ出し量は
   このセクションの幅（スクロールバーを除いた表示幅 = 100cqw）から計算する */
.p-works {
  container-type: inline-size;
  padding-block: 92px 98px;
}

.p-works__slider {
  --slider-bleed: max(0px, calc((100cqw - var(--container)) / 2));

  overflow-x: auto;
  margin-right: calc(var(--slider-bleed) * -1);
  scrollbar-width: none;
}

.p-works__slider::-webkit-scrollbar {
  display: none;
}

/* 掴んで動かせる箇所であることをカーソルで示す（はみ出しがある時だけ） */
.p-works__slider.is-draggable {
  cursor: grab;
}

.p-works__slider.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.p-works__list {
  display: flex;
  width: max-content;
  gap: 50px;
  padding-right: var(--slider-bleed);
  list-style: none;
}

.p-works__item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 50px;
  width: 662px;
}

.p-works__img {
  flex: none;
  width: 312px;
  height: 406px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.p-works__title {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}

.p-works__text {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.p-works__body .c-readmore {
  margin-top: var(--space-xl);
}

.p-works__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}

/* ---- 中間ビジュアル ---- */

/* 写真は画面に貼り付けたまま、このセクションを窓にして覗かせる。
   clip-path が固定配置の写真をセクションの内側だけに切り抜く */
.p-visual {
  position: relative;
  clip-path: inset(0);
  height: 100vh;
}

.p-visual__img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.p-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-main) 55%, transparent);
}

.p-visual__copy {
  position: absolute;
  top: calc(50% + var(--curve-depth) / 2);
  left: 50%;
  z-index: 1;
  color: var(--color-white);
  font-size: var(--fs-visual);
  font-weight: 300;
  line-height: 1;
  translate: -50% -50%;
  white-space: nowrap;
}

.p-visual__sp-break,
.p-visual__copy-image {
  display: none;
}

/* ---- 事業紹介 ---- */

.p-service__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 47px 51px;
  list-style: none;
}

.p-service__img {
  width: 100%;
  height: 318px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.p-service__title {
  margin-top: var(--space-lg);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}

.p-service__text {
  margin-top: var(--space-2xs);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.p-service__item .c-readmore {
  margin-top: var(--space-md);
}

.p-service__lead {
  height: 220px;
  margin-top: 50px;
  margin-left: 17px;
  writing-mode: vertical-rl;
  font-size: var(--fs-md);
}

/* ---- サステナビリティ経営方針 ---- */

.p-sustainability {
  --sustainability-image: url(../img/sustainability.webp);
  overflow: hidden;
  background-image:
    var(--sustainability-image),
    linear-gradient(color-mix(in srgb, var(--color-main) 55%, transparent), color-mix(in srgb, var(--color-main) 55%, transparent)),
    url(../img/home-bg2.webp);
  background-repeat: no-repeat;
  background-size: auto 100%, cover, cover;
  background-position: center;
  background-attachment: scroll, fixed, fixed;
  color: var(--color-white);
}

.p-sustainability__inner {
  position: relative;
  z-index: 1;
  width: 745px;
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: 102px;
}

.p-sustainability__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
}

.p-sustainability__title {
  margin-top: var(--space-3xs);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.p-sustainability__sp-break {
  display: none;
}

.p-sustainability__text {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  line-height: 1.9;
  text-align: justify;
}

.p-sustainability__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ---- ブログ ---- */

.p-blog__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 47px;
  list-style: none;
}

.p-blog__link {
  display: block;
  color: var(--color-text);
}

.p-blog__img {
  width: 100%;
  height: 187px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.p-blog__date {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.p-blog__title {
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.5;
}

.p-blog__foot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: 6px;
}

.p-blog__text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.p-blog__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}

/* ---- お知らせ ---- */

.p-news {
  padding-bottom: 76px;
  background-color: var(--color-main);
  color: var(--color-white);
}

.p-news__list {
  margin-right: calc(var(--list-bleed) * -1);
  border-bottom: 1px solid var(--color-white);
  list-style: none;
}

.p-news__item {
  border-top: 1px solid var(--color-white);
}

.p-news__link {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 80px;
  padding-right: var(--space-sm);
  color: var(--color-white);
  transition: background-color var(--duration-base) var(--easing-out);
}

.p-news__link:hover,
.p-news__link:focus-visible {
  background-color: var(--color-veil);
}

.p-news__date {
  flex: none;
  font-size: var(--fs-sm);
}

.p-news__title {
  overflow: hidden;
  font-size: var(--fs-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-news__title .c-news-new {
  margin-right: var(--space-xs);
}

.p-news__link .c-icon-arrow {
  margin-left: auto;
  background: url(../img/arrow-white.svg) no-repeat;
  background-size: contain;
}

.p-news__more {
  display: flex;
  justify-content: flex-end;
  margin-right: calc(var(--heading-v-gap) * -1);
  margin-top: 50px;
}

/* ---- よくある質問 ---- */

.p-faq {
  padding-block: 72px 84px;
}

/* XD：最初のカテゴリー名の基準線は、見出しの帯の上端から 19px */
.p-faq__list {
  margin-top: -7px;
  margin-left: calc(var(--list-bleed) * -1);
}

.p-faq__group + .p-faq__group {
  margin-top: 44px;
}

.p-faq__category {
  margin-bottom: 10px;
  color: var(--color-main);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.53;
}

.p-faq__item {
  overflow: hidden;
  border-bottom: 1px solid var(--color-main);
}

/* XD：質問1件の送りは 72px（線 1px を含む）、質問の基準線は箱の上端から 40px */
.p-faq__question {
  padding: 22px 65px 25px;
  position: relative;
  list-style: none;
  cursor: pointer;
}

.p-faq__question::-webkit-details-marker {
  display: none;
}

.p-faq__mark {
  position: absolute;
  top: calc(50% - 4px);
  left: 24px;
  transform: translateY(-50%);
  color: var(--color-main);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}

.p-faq__text {
  display: block;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.6;
}

.p-faq__question::after {
  content: "";
  width: 9px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 36px;
  margin-top: -4px;
  background: url(../img/arrow-black.svg) no-repeat center;
  background-size: contain;
  rotate: 90deg;
  transition: rotate var(--duration-base) var(--easing-out);
}

.p-faq__item[open]:not(.is-closing) .p-faq__question::after {
  rotate: -90deg;
}

.p-faq__answer {
  padding: 0 33px var(--space-md) calc(var(--list-bleed) + 41px);
  font-size: var(--fs-md);
  line-height: 1.8;
}

/* ---- トップページの SP 上書き（PC の各セクションの直後にまとめる） ---- */

@media (width <= 767px) {
  .p-home-page {
    --home-sp-gutter: 24px;
    --home-sp-action-height: 68px;
    --curve-depth: 34px;
    min-width: 0;
    padding-bottom: calc(var(--home-sp-action-height) + env(safe-area-inset-bottom));
    font-size: var(--fs-sm);
  }

  .p-home-page .l-gnav {
    display: none;
  }

  .p-home-page .p-banner {
    right: 0;
    bottom: calc(var(--home-sp-action-height) + env(safe-area-inset-bottom) + 10px);
    width: min(58vw, 220px);
  }

  .p-home-page .p-banner__link {
    border-radius: var(--radius-sm);
  }

  .p-home-page .p-fv {
    height: 100vh;
    height: 100dvh;
  }

  .p-home-page .p-fv__media {
    height: calc(100% - var(--home-sp-action-height) - env(safe-area-inset-bottom));
  }

  .p-home-page .p-fv__copy {
    top: calc((100% - var(--home-sp-action-height) - env(safe-area-inset-bottom)) / 2);
    left: calc(50% - 4px);
    width: 103px;
  }

  .p-home-page .p-fv__copy img {
    width: 103px;
    height: 286px;
  }

  .p-home-page .p-fv__copy::before,
  .p-home-page .p-fv__copy::after {
    top: -6px;
    width: 21px;
  }

  .p-home-page .p-fv__copy::before {
    left: 17px;
    height: calc(100% + 14px);
  }

  .p-home-page .p-fv__copy::after {
    right: -7px;
    height: calc(100% - 35px);
  }

  .p-home-page .p-fv__foot {
    inset: auto 0 calc(var(--home-sp-action-height) + env(safe-area-inset-bottom));
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr;
    grid-template-rows: 82px;
    padding: 0;
  }

  .p-home-page .p-ticker {
    width: calc(100% - var(--home-sp-gutter) * 2);
    min-height: 0;
    margin-inline: var(--home-sp-gutter);
    padding: 0;
  }

  .p-home-page .p-ticker__date {
    display: none;
  }

  .p-home-page .p-fv__tel {
    position: fixed;
    right: auto;
    bottom: 0;
    left: 0;
    width: 50%;
    height: calc(var(--home-sp-action-height) + env(safe-area-inset-bottom));
    min-height: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0;
    background-color: var(--color-main);
  }

  .p-home-page .p-fv__catalog {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: var(--z-float);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 50%;
    height: calc(var(--home-sp-action-height) + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    border: 0;
    background-color: var(--color-accent);
    color: var(--color-white);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .p-home-page .p-fv__catalog .c-nav-toggle__icon::before {
    top: -8px;
  }

  .p-home-page .p-fv__catalog .c-nav-toggle__icon::after {
    top: 8px;
  }

  .p-home-page.is-nav-open:not(.is-site-menu) .p-fv__tel,
  .p-home-page.is-nav-open:not(.is-site-menu) .p-fv__catalog {
    visibility: hidden;
  }

  .p-home-page .p-section {
    padding: 56px 0 58px;
  }

  .p-home-page .p-section__inner,
  .p-home-page .p-section__inner--reverse {
    display: block;
    width: 100%;
    max-width: none;
    padding-inline: var(--home-sp-gutter);
  }

  .p-home-page .p-section__head,
  .p-home-page .p-section__inner--reverse .p-section__head {
    width: 100%;
    margin: 0 0 65px;
  }

  .p-home-page .p-works {
    margin-bottom: -33px;
    padding-bottom: 18px;
  }

  .p-home-page .p-service .p-section__head {
    margin-bottom: 72px;
  }

  .p-home-page .p-works__slider {
    overflow: visible;
    margin: 0;
  }

  .p-home-page .p-works__list {
    display: grid;
    width: 100%;
    gap: 52px;
    padding: 0;
  }

  .p-home-page .p-works__item {
    display: block;
    width: 100%;
  }

  .p-home-page .p-works__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 345 / 406;
  }

  .p-home-page .p-works__body {
    margin-top: 28px;
  }

  .p-home-page .p-works__title {
    font-size: var(--fs-xl);
    line-height: 30px;
  }

  .p-home-page .p-works__text {
    margin-top: var(--space-xs);
    font-size: var(--fs-md);
    line-height: 24px;
  }

  .p-home-page .p-works__text br {
    display: none;
  }

  .p-home-page .p-works__body .c-readmore {
    margin-top: var(--space-md);
  }

  .p-home-page .p-works__more,
  .p-home-page .p-blog__more,
  .p-home-page .p-news__more {
    justify-content: center;
    margin: 50px 0 0;
  }

  .p-home-page .p-works__more {
    margin-top: 52px;
  }

  .p-home-page .p-visual {
    height: 508px;
  }

  .p-home-page .p-visual__img {
    height: 100svh;
  }

  .p-home-page .p-visual__copy {
    top: 50%;
    width: calc(100% - var(--home-sp-gutter) * 2);
    font-size: 6rem;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }

  .p-home-page .p-visual__sp-break {
    display: initial;
  }

  .p-home-page .p-visual--thinking .p-visual__copy {
    display: none;
  }

  .p-home-page .p-visual--thinking .p-visual__copy-image {
    position: absolute;
    top: 50%;
    left: 28px;
    z-index: 1;
    display: block;
    width: min(319px, calc(100% - 56px));
    height: auto;
    translate: 0 -50%;
  }

  .p-home-page .p-visual--thinking {
    height: 508px;
  }

  .p-home-page .p-service {
    margin-top: -13px;
    padding-top: 68px;
    padding-bottom: 50px;
  }

  .p-home-page .p-service__lead {
    display: none;
  }

  .p-home-page .p-service__list {
    grid-template-columns: 1fr;
    gap: 29px;
  }

  /* SP だけ、上から 外構用コンクリートブロック → 外構設計・工事 → 太陽光パネル リサイクル → 建築設計・工事 の順に並べる（先方の要望）。
     HTML の順（PC の 2×2 の並び）は 1 太陽光パネル リサイクル・2 外構用コンクリートブロック・3 建築設計・工事・4 外構設計・工事 */
  .p-home-page .p-service__item:nth-child(1) {
    order: 3;
  }

  .p-home-page .p-service__item:nth-child(2) {
    order: 1;
  }

  .p-home-page .p-service__item:nth-child(3) {
    order: 4;
    margin-bottom: 1px;
  }

  .p-home-page .p-service__item:nth-child(4) {
    order: 2;
  }

  .p-home-page .p-service__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 345 / 318;
  }

  .p-home-page .p-service__title {
    margin-top: 30px;
    font-size: var(--fs-xl);
  }

  .p-home-page .p-service__text {
    margin-top: var(--space-2xs);
    font-size: var(--fs-md);
    line-height: 24px;
  }

  .p-home-page .p-service__item:nth-child(3) .p-service__text {
    font-size: 1.1rem;
    line-height: 18px;
  }

  .p-home-page .p-service__item:nth-child(4) .p-service__text {
    font-size: var(--fs-xs);
    line-height: 19px;
  }

  .p-home-page .p-service__item .c-readmore {
    margin-top: var(--space-md);
  }

  .p-home-page .p-sustainability {
    --curve-depth: clamp(30px, calc(12vw - 14px), 80px);
    --sustainability-image: url(../img/sustainability-sp.webp);
    margin-top: -17px;
    margin-bottom: -71px;
    background-image: var(--sustainability-image);
    background-size: auto max(100%, 100vw);
    background-position: center bottom;
    background-attachment: scroll;
  }

  .p-home-page .p-sustainability__inner {
    width: 100%;
    max-width: none;
    padding: 64px var(--home-sp-gutter) 48px;
  }

  .p-home-page .p-sustainability__label {
    line-height: 24px;
  }

  .p-home-page .p-sustainability__title {
    margin-top: 0;
    font-size: var(--fs-2xl);
    line-height: 40px;
  }

  .p-home-page .p-sustainability__sp-break {
    display: initial;
  }

  .p-home-page .p-sustainability__text {
    margin-top: 28px;
    font-size: var(--fs-md);
    line-height: 24px;
  }

  .p-home-page .p-sustainability__more {
    justify-content: center;
    margin-top: var(--space-md);
  }

  .p-home-page .p-blog__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 266px;
    grid-template-columns: none;
    gap: 40px;
    overflow-x: auto;
    width: calc(100vw - var(--home-sp-gutter));
    padding-right: var(--home-sp-gutter);
    scrollbar-width: none;
  }

  .p-home-page .p-blog__list::-webkit-scrollbar {
    display: none;
  }

  .p-home-page .p-blog__img {
    display: block;
    height: 187px;
  }

  .p-home-page .p-blog__foot {
    gap: 10px;
  }

  .p-home-page .p-blog__text {
    font-size: var(--fs-md);
    line-height: 22px;
  }

  .p-home-page .p-blog {
    margin-top: -21px;
    padding-top: 52px;
    padding-bottom: 50px;
  }

  .p-home-page .p-news {
    padding-top: 53px;
    padding-bottom: 44px;
  }

  .p-home-page .p-news .p-section__head {
    margin-bottom: 46px;
  }

  .p-home-page .p-news__list {
    margin: 0;
  }

  .p-home-page .p-news__link {
    display: block;
    position: relative;
    min-height: 76px;
    padding: 14px var(--space-md) 14px 0;
  }

  .p-home-page .p-news__date {
    display: block;
  }

  .p-home-page .p-news__title {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-md);
    line-height: 24px;
  }

  .p-home-page .p-news__link .c-icon-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    translate: 0 -50%;
  }

  .p-home-page .p-news__more {
    margin-top: 55px;
  }

  .p-home-page .p-faq {
    padding-top: 52px;
    margin-bottom: 7px;
    padding-bottom: 57px;
  }

  /* XD：最初のカテゴリー名の基準線は、見出しの帯の上端から 81px */
  .p-home-page .p-faq .p-section__head {
    margin-bottom: 51px;
  }

  .p-home-page .p-faq__list {
    margin: 0;
  }

  .p-home-page .p-faq__group + .p-faq__group {
    margin-top: 29px;
  }

  .p-home-page .p-faq__category {
    margin-bottom: 11px;
    font-size: var(--fs-lg);
    line-height: 1.5;
  }

  .p-home-page .p-faq__item {
    border-bottom-width: 3px;
  }

  /* XD：1行の質問は箱の上下中央、2行の質問は箱いっぱい */
  .p-home-page .p-faq__question {
    display: flex;
    align-items: center;
    min-height: 85px;
    padding: 18px var(--home-sp-gutter) 19px 55px;
  }

  .p-home-page .p-faq__mark {
    left: 16px;
  }

  .p-home-page .p-faq__text {
    font-size: var(--fs-md);
    line-height: 24px;
  }

  .p-home-page .p-faq__question::after {
    display: none;
  }

  .p-home-page .p-faq__answer {
    padding: 0 var(--home-sp-gutter) 20px 55px;
    font-size: var(--fs-sm);
  }
}

@media (width <= 767px) and (prefers-reduced-motion: reduce) {
  .p-home-page .c-heading-v__ja::before {
    transition: none;
  }

  .p-home-page .p-visual__img {
    position: absolute;
    height: 100%;
  }
}

/* ---- 商品詳細 ---- */

.p-product-page {
  overflow-x: hidden;
}

.p-product-page.is-lightbox-open {
  overflow: hidden;
}

.p-product-action {
  display: none;
}

.p-product-page main {
  position: relative;
}

/* パンくずは基本の文字と配置を共用し、背景色・右寄せはページ側で分ける。 */
.p-product-breadcrumb,
.p-editorial-breadcrumb,
.p-wp-breadcrumb {
  position: absolute;
  z-index: 1;
  top: 28px;
  right: calc((100% - var(--container)) / 2);
  left: calc((100% - var(--container)) / 2);
  color: var(--color-dark);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 20px;
}

/* 絶対配置のため、折り返すと下の要素に重なる。常に1行にし、長いページ名は末尾を省略する。 */
.p-product-breadcrumb ol,
.p-editorial-breadcrumb,
.p-wp-breadcrumb ol {
  display: flex;
  gap: 0 13px;
}

.p-product-breadcrumb li,
.p-editorial-breadcrumb > *,
.p-wp-breadcrumb li {
  flex: none;
  white-space: nowrap;
}

.p-product-breadcrumb [aria-current="page"],
.p-editorial-breadcrumb [aria-current="page"],
.p-wp-breadcrumb [aria-current="page"] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-product-breadcrumb ol,
.p-wp-breadcrumb ol {
  list-style: none;
}

.p-product-breadcrumb li + li::before,
.p-wp-breadcrumb li + li::before {
  content: "＞";
  margin-right: 13px;
}

.p-product-hero {
  --hero-step: 396px;
  --hero-main-top: 114px;
  --hero-slide-width: 558px;
  --hero-slide-height: 355px;
  --hero-side-rise: 77px;
  --hero-side-scale: 0.823;
  --hero-thumbs-top: 499px;

  position: relative;
  /* サムネイルの上の余白を写真欄の内側に収める（外に重なると写真欄ごと下にずれる） */
  display: flow-root;
  /* 高さはサムネイルの段数で決まる（写真が5枚以上で2段になると、下の製品名を押し下げる）。1段なら XD の 608px */
  padding-bottom: 47px;
}

.p-product-hero__slider {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--hero-main-top) + var(--hero-slide-height));
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.p-product-hero__slider::-webkit-scrollbar {
  display: none;
}

.p-product-hero__slider.is-dragging,
.p-product-hero__slider.is-resetting {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* 複製画像から本体へ戻す間はフェードさせず、同じ画像を瞬時に置き換える */
.p-product-hero__slider.is-resetting .p-product-hero__item,
.p-product-hero__slider.is-resetting .p-product-hero__slide {
  transition: none;
}

.p-product-hero__slider:focus-visible .p-product-hero__item.is-active img {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.p-product-hero__track {
  position: relative;
  display: flex;
  width: max-content;
  margin-top: var(--hero-main-top);
  padding-inline: calc((100vw - var(--hero-step)) / 2);
}

.p-product-hero__slider--single {
  overflow: hidden;
  cursor: default;
}

.p-product-hero__slider--single .p-product-hero__track {
  justify-content: center;
  width: 100%;
  padding-inline: 0;
}

.p-product-hero__item {
  position: relative;
  flex: 0 0 var(--hero-step);
  width: var(--hero-step);
  height: var(--hero-slide-height);
  opacity: 0;
  pointer-events: none;
  scroll-snap-align: center;
  transition: opacity var(--duration-base) var(--easing-out);
}

.p-product-hero__item.is-prev,
.p-product-hero__item.is-next {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.p-product-hero__slider.is-dragging .p-product-hero__item.is-prev,
.p-product-hero__slider.is-dragging .p-product-hero__item.is-next {
  cursor: grabbing;
}

.p-product-hero__item.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.p-product-hero__slide {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--hero-slide-width);
  max-width: none;
  height: var(--hero-slide-height);
  border-radius: var(--radius-sm);
  filter: blur(4px);
  object-fit: cover;
  transform: translate(-50%, calc(-1 * var(--hero-side-rise))) scale(var(--hero-side-scale));
  transition:
    width var(--duration-base) var(--easing-out),
    transform var(--duration-base) var(--easing-out),
    filter var(--duration-base) var(--easing-out),
    border-radius var(--duration-base) var(--easing-out);
  user-select: none;
  -webkit-user-drag: none;
}

.p-product-hero__item.is-active .p-product-hero__slide {
  border-radius: var(--radius-md);
  filter: none;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .p-product-hero__slider {
    scroll-behavior: auto;
  }

  .p-product-hero__item,
  .p-product-hero__slide {
    transition: none;
  }
}

/* 本文の右端（XD の4枚の右端）から左へ1列に並べる。写真が多くても右にはみ出さず、本文の幅を超える分だけ次の段に折り返す */
.p-product-hero__thumbs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  width: var(--container);
  max-width: calc(100% - var(--gutter) * 2);
  margin: var(--hero-thumbs-top) auto 0;
}

.p-product-hero__thumb {
  overflow: hidden;
  flex: none;
  width: 72px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-placeholder);
  cursor: pointer;
}

.p-product-hero__thumb:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.p-product-hero__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-product-intro,
.p-product-content {
  width: var(--container);
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
}

.p-product-intro {
  padding: var(--space-3xs) 0 49px;
  border-bottom: 2px solid var(--color-line);
}

/* 写真のない製品は、絶対配置のパンくず（top 28px・1行 20px）の下からタイトルを始める。 */
.p-product-breadcrumb + .p-product-intro {
  padding-top: calc(28px + 20px + var(--space-md));
}

/* 長い製品名は1行を使って折り返し、バッジは次の行に回す。 */
.p-product-intro__heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 51px;
  gap: var(--space-sm);
}

.p-product-intro__title {
  min-width: 0;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.p-product-intro__badges {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  white-space: nowrap;
}

.p-product-intro__badge {
  display: block;
  padding: 3px 15px var(--space-3xs);
  border-radius: 999px;
  color: var(--color-white);
  font-size: var(--fs-md);
  line-height: 1.3;
}

.p-product-intro__badge--green {
  background-color: var(--color-main);
}

.p-product-intro__badge--black {
  background-color: var(--color-text);
}

.p-product-intro__badge--orange {
  background-color: var(--color-accent);
}

.p-product-intro__badge--yellow {
  background-color: var(--color-product-new);
}

.p-product-intro__body {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 20px 47px;
  margin-top: 22px;
}

.p-product-intro__copy {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--fs-md);
  line-height: 1.6;
}

.p-product-intro__actions {
  grid-column: 2;
  grid-row: 1;
  padding-top: var(--space-2xs);
}

.p-product-intro__buttons {
  display: flex;
  gap: 20px;
}

.p-product-intro__button {
  width: 207px;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding-inline: 10px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.p-product-intro__video {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 17px;
  font-size: var(--fs-xs);
}

.p-product-intro__tags {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  gap: var(--space-xs);
  color: var(--color-main);
  font-size: var(--fs-xs);
}

.p-product-intro__tags a {
  color: inherit;
}

.p-product-intro__tags a:hover,
.p-product-intro__tags a:focus-visible {
  text-decoration: underline;
}

.p-product-overview {
  --overview-width: max(100vw, var(--page-min-width));
  --overview-bleed: calc((var(--overview-width) - var(--container)) / 2);

  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  width: var(--overview-width);
  margin-left: calc(var(--overview-bleed) * -1);
  padding: 55px var(--overview-bleed) 60px;
  scrollbar-width: none;
}

.p-product-overview::-webkit-scrollbar {
  display: none;
}

.p-product-overview.is-draggable {
  cursor: grab;
}

.p-product-overview.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.p-product-overview.is-dragging .p-product-lightbox-trigger,
.p-product-overview.is-dragging a {
  cursor: grabbing;
}

.p-product-overview:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.p-product-overview__inner {
  display: flex;
  width: max-content;
}

.p-product-overview__col--color {
  flex: 0 0 491px;
  padding-right: var(--space-xl);
  border-right: 1px solid var(--color-text);
}

.p-product-overview__col--related {
  flex: 0 0 537px;
  padding-inline: 47px;
  border-right: 1px solid var(--color-text);
}

.p-product-overview__col--works {
  flex: 0 0 490px;
  padding-left: 47px;
}

.p-product-overview__heading {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}

.p-product-overview__heading span {
  margin-left: var(--space-2xs);
  font-size: var(--fs-md);
  font-weight: 400;
}

.p-product-overview__colors {
  display: grid;
  grid-template-columns: repeat(3, 136px);
  gap: 14px 18px;
  margin-top: 19px;
  list-style: none;
}

.p-product-overview__colors li {
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.p-product-overview__colors img {
  display: block;
  width: 136px;
  height: 79px;
  margin-bottom: 7px;
  border-radius: var(--radius-md);
  object-fit: none;
  object-position: center 70%;
}

.p-product-overview__note {
  margin-top: var(--space-lg);
  color: var(--color-note);
  font-size: var(--fs-xs);
}

.p-product-overview__cards {
  display: grid;
  grid-template-columns: repeat(2, 208px);
  gap: var(--space-md) 26px;
  margin-top: 19px;
  list-style: none;
}

.p-product-overview__cards a {
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 10px 0;
  font-size: var(--fs-xs);
}

.p-product-overview__cards img {
  grid-column: 1 / -1;
  display: block;
  width: 208px;
  height: 186px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.p-product-overview__arrow {
  width: 30px;
  height: 30px;
}

.p-product-section {
  padding: 49px 0;
  border-bottom: 2px solid var(--color-line);
}

.p-product-overview + .p-product-section {
  position: relative;
}

.p-product-overview + .p-product-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 2px solid var(--color-line);
}

.p-product-section__heading {
  display: flex;
  align-items: center;
  min-height: 57px;
  padding-left: var(--space-sm);
  border-left: 10px solid var(--color-text);
  font-size: var(--fs-xl);
  font-weight: 500;
}

.p-product-section__lead,
.p-product-section__note {
  color: var(--color-note);
  font-size: var(--fs-xs);
}

.p-product-section__lead {
  margin-top: 30px;
}

.p-product-section__diagrams {
  display: grid;
  grid-template-columns: repeat(8, 104px);
  gap: 20px;
  margin-top: 20px;
  list-style: none;
}

.p-product-section__diagrams li {
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: nowrap;
}

.p-product-section__diagrams img,
.p-product-section__technical-images img {
  display: block;
  width: 104px;
  height: 104px;
  margin-bottom: var(--space-2xs);
  border: 1px solid color-mix(in srgb, var(--color-line) 50%, white);
  object-fit: contain;
  object-position: center;
}

.p-product-section--dimension .p-product-section__note {
  margin-top: 20px;
}

.p-product-section__technical-images {
  display: grid;
  grid-template-columns: repeat(4, 104px);
  gap: 20px;
  margin-top: 30px;
  list-style: none;
}

.p-product-section__technical-images li {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.p-product-section--technical .p-product-section__note {
  margin-top: 20px;
}

.p-product-section--technical {
  padding-bottom: 39px;
}

.p-product-lightbox-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.p-product-lightbox-trigger:focus-visible {
  border-radius: var(--radius-md);
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.p-product-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 2.4rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.p-product-lightbox[open] {
  display: grid;
  place-items: center;
}

.p-product-lightbox::backdrop {
  background: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.p-product-lightbox[open]::backdrop {
  animation: product-lightbox-backdrop-in var(--duration-base) ease-out both;
}

.p-product-lightbox.is-closing::backdrop {
  animation: product-lightbox-backdrop-out var(--duration-base) ease-in both;
}

.p-product-lightbox__panel {
  position: relative;
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 5.6rem 4rem 3.2rem;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.p-product-lightbox[open] .p-product-lightbox__panel {
  animation: product-lightbox-panel-in var(--duration-base) var(--easing-out) both;
}

.p-product-lightbox.is-closing .p-product-lightbox__panel {
  animation: product-lightbox-panel-out var(--duration-base) ease-in both;
}

.p-product-lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
}

.p-product-lightbox__close:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-accent);
}

.p-product-lightbox__figure {
  max-width: 100%;
  margin: 0;
}

.p-product-lightbox__image {
  display: block;
  width: auto;
  max-width: min(100%, 85rem);
  height: auto;
  max-height: min(70vh, 70rem);
  margin-inline: auto;
  object-fit: contain;
}

.p-product-lightbox__caption {
  margin-top: 1.6rem;
  font-size: var(--fs-xl);
  line-height: 1.5;
  text-align: center;
}

@keyframes product-lightbox-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes product-lightbox-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes product-lightbox-panel-in {
  from { opacity: 0; transform: translateY(1.2rem) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes product-lightbox-panel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(0.8rem) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .p-product-lightbox[open]::backdrop,
  .p-product-lightbox[open] .p-product-lightbox__panel {
    animation: none;
  }
}

.p-product-section--price {
  padding-top: 50px;
}

/* 最後の欄は区切り線を引かず、価格表と同じ余白でフッターへ続ける。
   価格表のない製品（カラー・関連、寸法図、技術情報、製品名の欄で終わる）も同じ終わり方にする */
.p-product-section:last-child,
.p-product-overview:last-child,
.p-product-intro:not(:has(+ .p-product-content > *)) {
  padding-bottom: 142px;
  border-bottom: 0;
}

.p-product-section__price-table {
  width: 100%;
  margin-top: 31px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.p-product-section__price-table th,
.p-product-section__price-table td {
  height: 40px;
  padding: 0 31px;
  border: 1px solid color-mix(in srgb, var(--color-line) 50%, white);
  font-weight: 400;
  text-align: left;
}

.p-product-section__price-table thead {
  background-color: var(--color-bg);
}

.p-product-section__price-table th:not(:first-child),
.p-product-section__price-table td {
  text-align: center;
}

.p-product-section__price-table th:first-child {
  width: 54%;
}

.p-product-section--price .p-product-section__note {
  margin-top: 25px;
}

/* ---- 製品ナビゲーション ---- */
.p-nav {
  visibility: hidden;
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  overflow-y: auto;
  background-color: rgb(255 255 255 / 0.72);
  opacity: 0;
  backdrop-filter: blur(24px);
  transition:
    opacity var(--duration-base) var(--easing-out),
    visibility var(--duration-base) var(--easing-out);
}

.p-nav.is-open {
  visibility: visible;
  opacity: 1;
}

.p-nav__inner {
  display: flex;
  width: var(--container);
  translate: 0 12px;
  transition: translate var(--duration-base) var(--easing-out);
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: 131px var(--space-2xl);
}

.p-nav.is-open .p-nav__inner {
  translate: 0 0;
}

.p-nav__col {
  flex: none;
  width: 500px;
  padding-top: 60px;
}

.p-nav__search {
  display: flex;
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

.p-nav__search-input {
  flex: 1;
  min-width: 0;
  padding-inline: var(--space-sm);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
}

.p-nav__search-input:focus,
.p-nav__search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 入力欄の枠ではなく検索ボックス全体を囲み、キーボード操作でも位置がわかるようにする */
.p-nav__search:has(.p-nav__search-input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.p-nav__search-button {
  flex: none;
  padding-inline: var(--space-md);
  border: 0;
  border-left: 1px solid var(--color-gray);
  background-color: var(--color-gray);
  color: var(--color-white);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.p-nav__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 28px;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
}

.p-nav__title::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--color-accent);
}

.p-nav__title--search {
  margin-top: var(--space-xl);
}

.p-nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: var(--space-lg);
  list-style: none;
}

.p-nav__link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  color: var(--color-text);
}

/* XD は直径 45px、文字色の 0.5px の線を丸の内側に引いている。
   普通の画面（1倍）では 0.5px の線が 1px の濃い線に太るので、1px の半透明で同じ濃さに見せる */
.p-nav__thumb {
  flex: none;
  width: 45px;
  height: 45px;
  border: 1px solid color-mix(in srgb, var(--color-text) 50%, transparent);
  border-radius: 50%;
  background-color: var(--color-placeholder);
  object-fit: cover;
}

/* 高解像度の画面では XD どおり 0.5px で引く */
@media (min-resolution: 2dppx) {
  .p-nav__thumb {
    border-width: 0.5px;
    border-color: var(--color-text);
  }
}

/* 新商品 新色：写真の代わりに XD どおりオレンジの丸に NEW */
.p-nav__thumb--new {
  display: grid;
  place-items: center;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.p-nav__text {
  font-size: var(--fs-md);
}

.p-nav__side {
  flex: none;
  width: 368px;
  margin-left: auto;
  padding: 60px var(--space-md) 0 0;
}

.p-nav__tel {
  min-height: 82px;
  margin-top: var(--space-md);
}

.p-nav__meta {
  display: flex;
  align-items: flex-start;
  margin-top: 54px;
}

.p-nav__menu {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 25px 72px;
  font-size: var(--fs-sm);
  line-height: 1;
  list-style: none;
}

.p-nav__link,
.p-nav__menu a {
  transition: color var(--duration-base) var(--easing-out);
}

.p-nav__link:hover,
.p-nav__link:focus-visible,
.p-nav__menu a:hover,
.p-nav__menu a:focus-visible {
  color: var(--color-main);
}

.p-nav__sns {
  margin-left: auto;
}

.p-nav__company {
  margin-top: 46px;
}

.p-nav__company .c-logo {
  margin-bottom: var(--space-sm);
}

.p-nav__hours {
  font-size: 1.8rem;
  line-height: 1.7;
  white-space: nowrap;
}

/* SP の右上メニュー用（common-sp.css で表示）。PC は常に製品ナビ */
.p-nav__site {
  display: none;
}

/* ---- 右下に固定するバナー ---- */

.p-banner {
  position: fixed;
  right: 0;
  bottom: calc(var(--float-bottom) + var(--float-tel-height) + var(--float-gap));
  z-index: calc(var(--z-float) - 1);
  width: var(--float-width);
  opacity: 0;
  visibility: hidden;
  translate: 0 80px;
  transition:
    opacity var(--duration-slow) var(--easing-out),
    translate var(--duration-slow) var(--easing-out),
    visibility var(--duration-slow);
}

.p-banner.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.p-banner__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: opacity var(--duration-base) var(--easing-out);
}

.p-banner__link:hover,
.p-banner__link:focus-visible {
  opacity: var(--hover-opacity);
}

.p-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

.p-banner__close {
  position: absolute;
  top: -15px;
  left: -15px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-text);
  transition: opacity var(--duration-base) var(--easing-out);
}

.p-banner__close:hover,
.p-banner__close:focus-visible {
  opacity: var(--hover-opacity);
}

.p-banner__close::before,
.p-banner__close::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background-color: currentcolor;
}

.p-banner__close::before {
  rotate: 45deg;
}

.p-banner__close::after {
  rotate: -45deg;
}

/* ---- お問い合わせ・求人エントリー・個人情報保護方針（PC カンプ） ---- */

.p-form-page {
  --form-rule: color-mix(in srgb, var(--color-main) 50%, var(--color-white));
}

.p-form-page__main {
  background-color: var(--color-bg);
}

.p-form-hero {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 385px;
  background-color: var(--color-main);
  color: var(--color-white);
  /* XD の底辺の円弧を、共通セクションの曲線とは分けて保持する */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 67 1380 385' preserveAspectRatio='none'%3E%3Cpath d='M-336-192H1716A644 644 0 0 1 1072 452H308A644 644 0 0 1-336-192Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}

/* XD で緑にタイル写真を乗算で重ねた見た目は、書き出した1枚の画像で再現する（ブログ・NEWS と共通） */
.p-form-hero::before {
  content: "";
  position: absolute;
  top: calc(-259 * var(--design-px));
  left: 50%;
  width: calc(2052 * var(--design-px));
  height: calc(644 * var(--design-px));
  background: url("../img/page-hero-bg.webp") no-repeat center / 100% 100%;
  translate: -50% 0;
  pointer-events: none;
}

.p-form-hero__inner {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: 147px;
  text-align: center;
}

.p-form-hero__en,
.p-editorial-hero__en {
  margin-bottom: 9px;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 17px;
}

.p-form-hero__title,
.p-editorial-hero__title {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  line-height: 1;
}

.p-form-hero__title::before,
.p-editorial-hero__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  /* 元の SVG は高さ 58px、その下 18px がオレンジ線 */
  height: calc(100% * 18 / 58);
  background-color: var(--color-accent);
  transform-origin: left center;
  animation: form-title-line var(--duration-slow) var(--easing-out) both;
}

@keyframes form-title-line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-form-hero__title::before,
  .p-editorial-hero__title::before {
    animation: none;
  }
}

.p-form-hero__title img {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-form-section__inner {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.p-form-section {
  padding-top: 108px;
}

.p-form-section__eyebrow {
  display: table;
  padding: 0 14px;
  border-radius: 999px;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 21px;
}

.p-form-section__title {
  margin-top: 14px;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 50px;
}

.p-form-section__intro {
  margin-top: 21px;
  font-size: var(--fs-md);
  line-height: 26px;
}

.p-form-card {
  width: 100%;
  margin-top: 52px;
  padding: var(--space-3xl) 111px;
  border-radius: 100px;
  background-color: var(--color-white);
}

.p-form-card__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  min-height: 98px;
  padding: 23px 0 var(--space-md);
  border-top: 1px solid var(--form-rule);
  box-shadow: 0 -1px var(--form-rule);
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-form-card__row--address {
  align-items: start;
  min-height: 164px;
}

.p-form-card__row--message {
  align-items: start;
  min-height: 248px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--form-rule);
  box-shadow: 0 -1px var(--form-rule), 0 1px var(--form-rule);
}

.p-form-card__required {
  display: inline-block;
  flex: none;
  padding: 0 9px;
  border-radius: 3px;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 20px;
}

.p-form-card__input,
.p-form-card__select,
.p-form-card__textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid #a7a7a7;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-md);
}

.p-form-card__input::placeholder,
.p-form-card__textarea::placeholder {
  color: #aaa;
}

.p-form-card__input:focus-visible,
.p-form-card__select:focus-visible,
.p-form-card__textarea:focus-visible,
.p-form-card__postcode-button:focus-visible,
.p-form-card__submit:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 3px;
}

.p-form-card__inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.p-form-card__input--postcode {
  width: 200px;
}

.p-form-card__postcode-button {
  min-width: 150px;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.p-form-card__address {
  display: grid;
  gap: var(--space-sm);
}

.p-form-card__select {
  width: 240px;
  padding-right: 40px;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='%233e3a39' d='M0 0h10L5 5z'/%3E%3C/svg%3E") no-repeat right 17px center / 10px 5px;
}

.p-form-card__textarea {
  min-height: 200px;
  padding: 15px;
  resize: vertical;
}

.p-form-card__submit-area {
  margin-top: 58px;
  text-align: center;
}

.p-form-card__submit-area p {
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-form-card__submit {
  position: relative;
  width: 400px;
  min-height: 70px;
  margin-top: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-white);
  font: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
}

.p-form-card__submit span {
  position: absolute;
  right: 25px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

.p-form-section--tel {
  padding-top: 110px;
  padding-bottom: 190px;
}

.p-form-tel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 300px;
  margin-top: 52px;
  padding: 70px 111px;
  border-radius: 100px;
  background-color: var(--color-white);
}

.p-form-tel__office {
  padding-top: 6px;
}

.p-form-tel__office + .p-form-tel__office {
  padding-left: 50px;
  border-left: 1px solid #ddd;
}

.p-form-tel__office .p-form-section__eyebrow {
  margin-bottom: var(--space-md);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 28px;
}

.p-form-tel__number {
  display: flex;
  align-items: baseline;
  gap: 17px;
  line-height: 46px;
  white-space: nowrap;
}

.p-form-tel__number span {
  color: var(--color-main);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 20px;
}

.p-form-tel__number a {
  color: var(--color-text);
  font-size: 3.8rem;
  font-weight: 700;
}

.p-form-tel__office > p:last-child {
  margin-top: 15px;
  color: var(--color-dark);
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-form-section--entry {
  padding-top: 108px;
  padding-bottom: 225px;
}

.p-form-section--entry .p-form-section__intro {
  margin-top: 0;
}

.p-form-section--entry .p-form-card {
  margin-top: 52px;
}

.p-form-card__split {
  display: grid;
  grid-template-columns: 32px minmax(0, 216fr) 42px minmax(0, 220fr);
  align-items: center;
  gap: 0 var(--space-sm);
}

.p-form-card__split label {
  white-space: nowrap;
}

.p-form-card__split label:nth-of-type(2) {
  padding-left: 10px;
}

.p-form-card__birthday {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.p-form-card__birthday .p-form-card__input {
  width: 90px;
}

.p-form-card__birthday .p-form-card__input:first-of-type {
  width: 130px;
}

.p-form-card__birthday > span:first-child {
  margin-right: 2px;
}

.p-form-card__birthday .p-form-card__input:not(:first-of-type) {
  margin-left: 9px;
}

.p-policy {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
  padding: 108px 0 190px;
}

.p-policy__card {
  padding: 98px 111px 102px;
  border-radius: 100px;
  background-color: var(--color-white);
}

.p-policy__back {
  position: relative;
  display: flex;
  align-items: center;
  width: 163px;
  margin: 60px auto 0;
  padding: 9px 14px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-policy__back span {
  position: absolute;
  right: 18px;
  font-size: var(--fs-xl);
  line-height: 1;
}

/* ---- ブログ・NEWS・サステナビリティレポート ---- */

.p-editorial-breadcrumb a {
  color: inherit;
}

.p-editorial-hero .p-editorial-breadcrumb {
  color: var(--color-white);
}

.p-report-hero .p-editorial-breadcrumb {
  top: 617px;
  right: 0;
  left: auto;
  width: max-content;
}

.p-editorial-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  overflow: hidden;
  height: 385px;
  background-color: var(--color-main);
  color: var(--color-white);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 67 1380 385' preserveAspectRatio='none'%3E%3Cpath d='M-336-192H1716A644 644 0 0 1 1072 452H308A644 644 0 0 1-336-192Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.p-editorial-hero--news {
  --editorial-photo-top: -256;
  --editorial-photo-offset: -37;
  height: 388px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 67 1380 388' preserveAspectRatio='none'%3E%3Cpath d='M-373-189H1679A644 644 0 0 1 1035 455H271A644 644 0 0 1-373-189Z'/%3E%3C/svg%3E");
}

.p-editorial-hero::before {
  content: "";
  position: absolute;
  top: calc(var(--editorial-photo-top, -259) * var(--design-px));
  left: calc(50% + var(--editorial-photo-offset, 0) * var(--design-px));
  width: calc(2052 * var(--design-px));
  height: calc(644 * var(--design-px));
  background: url("../img/page-hero-bg.webp") no-repeat center / 100% 100%;
  translate: -50% 0;
  pointer-events: none;
}

.p-editorial-hero__inner {
  position: relative;
  align-self: start;
  margin-top: 147px;
  text-align: center;
}

.p-editorial-hero__title img {
  display: block;
}

.p-editorial-archive {
  display: grid;
  grid-template-columns: minmax(0, 914px) 213px;
  align-items: start;
  gap: 57px;
  width: 1184px;
  margin-inline: auto;
  padding-top: 86px;
  padding-bottom: 105px;
}

.p-editorial-archive--blog {
  grid-template-columns: minmax(0, 890px) 213px;
  gap: 81px;
  padding-bottom: 106px;
}

/* 一覧と Category 欄の並びは .p-editorial-archive のまま（XD：一覧 914px、欄 213px）。 */
.p-editorial-archive--news {
  /* 最新XDのFV下端は3px低いが、本文の開始位置は同じ。 */
  padding-top: 83px;
}

.p-editorial-archive--news .p-editorial-pagination {
  width: 100%;
}

.p-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 46px;
  margin-top: 17px;
  list-style: none;
}

.p-editorial-card {
  min-width: 0;
  height: 286px;
}

.p-editorial-card__link {
  display: block;
  color: var(--color-text);
}

.p-editorial-card__image {
  display: block;
  width: 100%;
  height: 187px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.p-editorial-card__date {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 18px;
}

.p-editorial-card__title {
  margin-top: -3px;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 22px;
}

.p-editorial-card__foot {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 6px;
}

.p-editorial-card__excerpt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-md);
  line-height: 22px;
  white-space: nowrap;
}

.p-editorial-card__arrow {
  height: 41px;
}

.p-editorial-category__title {
  margin-bottom: 17px;
  color: var(--color-main);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 30px;
}

.p-editorial-category__list {
  display: grid;
  gap: 15px;
  list-style: none;
}

.p-editorial-category__link {
  display: block;
  min-height: 36px;
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--color-main) 20%, var(--color-white));
  color: var(--color-gray);
  font-size: var(--fs-xs);
  line-height: 36px;
  text-align: center;
  transition:
    background-color var(--duration-base) var(--easing-out),
    color var(--duration-base) var(--easing-out);
}

.p-editorial-category__link:is(:hover, :focus-visible),
.p-editorial-category__link.is-current {
  background-color: var(--color-main);
  color: var(--color-white);
}

.p-editorial-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 890px;
  max-width: 100%;
  min-height: 30px;
  margin-top: 50px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 24px;
}

.p-editorial-pagination a {
  color: var(--color-text);
  transition:
    background-color var(--duration-base) var(--easing-out),
    border-color var(--duration-base) var(--easing-out),
    color var(--duration-base) var(--easing-out);
}

.p-editorial-pagination a:is(:hover, :focus-visible) {
  color: var(--color-main);
}

.p-editorial-pagination a:is(.p-editorial-pagination__number, .page-numbers):not(.prev, .next):is(:hover, :focus-visible) {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: var(--color-white);
}

.p-editorial-pagination > a:first-child {
  margin-right: 6px;
}

.p-editorial-pagination > a:last-child {
  margin-left: 5px;
}

.p-editorial-pagination > .page-numbers.current[aria-current="page"] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: var(--color-white);
}

.p-editorial-news {
  margin-left: 1px;
  list-style: none;
}

.p-editorial-news__item {
  height: 81px;
  border-top: 1px solid var(--color-line);
}

.p-editorial-news__item:last-child {
  box-shadow: inset 0 -1px var(--color-line);
}

.p-editorial-news__link {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 12px;
  align-items: center;
  min-height: 80px;
  padding-right: var(--space-sm);
  color: var(--color-text);
  transition: background-color var(--duration-base) var(--easing-out);
}

.p-editorial-news__link:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--color-main) 15%, transparent);
}

.p-editorial-news__date {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 24px;
}

.p-editorial-news__title {
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-editorial-news__title .c-news-new {
  margin-right: var(--space-xs);
}

.p-editorial-news__arrow {
  width: 12px;
  height: 12px;
  background: url("../img/arrow-black.svg") no-repeat center / 8px 11px;
}

.p-editorial-post {
  position: relative;
  padding: 112px 0 103px;
  background-color: var(--color-bg);
}

.p-editorial-post__inner {
  width: var(--container);
  margin-inline: auto;
}

.p-editorial-post__category {
  display: table;
  padding-inline: 11px;
  border-radius: 11px;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: var(--fs-xs);
  line-height: 21px;
}

.p-editorial-post__title {
  margin-top: 25px;
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 50px;
}

.p-editorial-post__date {
  display: block;
  margin-top: 5px;
  color: #a7a7a7;
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-editorial-post__date .c-news-new {
  margin-left: var(--space-xs);
}

.p-editorial-post__body {
  margin-top: 60px;
  padding: var(--space-3xl) 111px 123px;
  border-radius: 100px;
  background-color: var(--color-white);
}

.p-editorial-post__image {
  display: block;
  width: 100%;
  height: 413px;
  border-radius: var(--radius-md);
  background-color: #a7a7a7;
  object-fit: cover;
}

.p-editorial-post__body:not(.c-entry-content) p {
  margin-top: 31px;
  overflow-wrap: anywhere;
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-editorial-back {
  position: relative;
  display: flex;
  align-items: center;
  width: 163px;
  min-height: 44px;
  margin: 50px auto 0;
  padding: 0 14px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-editorial-back span {
  position: absolute;
  right: 18px;
}

.p-editorial-back .c-icon-arrow,
.p-policy__back .c-icon-arrow {
  rotate: 180deg;
}

@media (prefers-reduced-motion: reduce) {
  .p-editorial-back,
  .p-policy__back,
  .p-editorial-back .c-icon-arrow::before,
  .p-editorial-back .c-icon-arrow::after,
  .p-policy__back .c-icon-arrow::before,
  .p-policy__back .c-icon-arrow::after,
  .p-report__policy-link,
  .p-report__policy-link .c-icon-arrow::before,
  .p-report__policy-link .c-icon-arrow::after,
  .p-editorial-card__arrow,
  .p-editorial-card__arrow::before,
  .p-editorial-card__arrow::after,
  .p-editorial-category__link,
  .p-editorial-pagination a,
  .p-editorial-news__link,
  .c-entry-content :where(a) {
    transition: none;
  }
}

html:has(> .p-report-page) {
  scroll-behavior: smooth;
}

.p-report {
  --report-rule: color-mix(in srgb, var(--color-main) 50%, var(--color-white));
}

.p-report__inner,
.p-report-hero__inner {
  position: relative;
  width: var(--container);
  margin-inline: auto;
}

.p-report-hero {
  position: relative;
  height: 598px;
}

.p-report-hero::before {
  content: "";
  position: absolute;
  top: -67px;
  width: 100%;
  height: 465px;
  background-color: var(--color-main);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1380 465' preserveAspectRatio='none'%3E%3Cpath d='M-429-237H1809A702 702 0 0 1 1107 465H273A702 702 0 0 1-429-237Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.p-report-hero__title {
  position: absolute;
  isolation: isolate;
  top: 37px;
  left: 0;
  width: 160px;
  height: 324px;
}

.p-report-hero__title::before,
.p-report-hero__title::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  width: 26px;
  background-color: var(--color-accent);
  transform-origin: top center;
  animation: report-title-line var(--duration-slow) var(--easing-out) both;
}

.p-report-hero__title::before {
  right: 0;
  height: 100%;
}

.p-report-hero__title::after {
  left: 68px;
  height: 164px;
  animation-delay: var(--duration-slow);
}

@keyframes report-title-line {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-report-hero__title::before,
  .p-report-hero__title::after {
    animation: none;
  }
}

.p-report-hero__title-image {
  display: block;
  width: 100%;
  height: auto;
}

.p-report-hero__photo {
  position: absolute;
  top: -67px;
  left: 297px;
  overflow: hidden;
  width: 683px;
  height: 665px;
  border-radius: 50px;
}

.p-report-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-report-hero__nav {
  position: absolute;
  top: 438.3px;
  left: 0;
  width: 212px;
}

.p-report-hero__nav a {
  display: flex;
  align-items: center;
  height: 40.2px;
  padding-top: 3px;
  border-bottom: 1px solid #d9d9d9;
  color: #a7a7a7;
  font-size: var(--fs-xs);
  line-height: 20px;
}

.p-report-hero__nav a::after {
  content: "";
  position: absolute;
  right: 7px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: 45deg;
}

@media (prefers-reduced-motion: reduce) {
  html:has(> .p-report-page) {
    scroll-behavior: auto;
  }

  .p-report-hero__nav a,
  .p-report-hero__nav a::before {
    transition: none;
  }
}

.p-report__columns {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 85px;
}

.p-report__eyebrow {
  color: var(--color-main);
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-report__title {
  margin-top: 5px;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 50px;
  white-space: nowrap;
}

.p-report-target,
.p-report-annual,
.p-report-sbt {
  scroll-margin-top: 87px;
}

.p-report-target {
  padding-top: 103px;
}

.p-report-target__body {
  padding-top: 5px;
}

.p-report-target__intro {
  font-size: var(--fs-md);
  line-height: 30px;
  white-space: nowrap;
}

.p-report-target__scopes {
  margin-top: 77px;
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-report-target__scopes > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  height: 81px;
  border-top: 1px solid var(--report-rule);
}

.p-report-target__scopes dt {
  font-weight: 500;
}

.p-report-target__scopes > div:last-child {
  box-shadow: 0 1px var(--report-rule);
}

.p-report__chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-base);
}

/* 背景の箱だけ CSS。カード・▼・グラフは1枚の画像（背景なしで書き出してある） */
.p-report__graphic {
  width: 100%;
  margin-top: 70px;
  /* 下はグラフの文字の下端から。箱の高さは XD どおり 420px */
  padding: 46px 80px 39px 60px;
  border-radius: 50px;
  background-color: color-mix(in srgb, var(--color-main) 20%, var(--color-white));
}

.p-report__graphic img {
  display: block;
  height: auto;
}

.p-report-annual {
  margin-top: 128px;
}

.p-report-annual__table-image {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 13px 5px;
}

.p-report-annual__charts {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

.p-report-sbt {
  position: relative;
  height: 1090px;
  margin-top: 95px;
  padding-top: 153px;
  background-color: var(--color-main);
  color: var(--color-white);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3064.742 1380 1090.258' preserveAspectRatio='none'%3E%3Cpath d='M0 3064.742C86.396 3101.211 179.223 3120 273 3120H1107C1200.777 3120 1293.604 3101.211 1380 3064.742V4099.742C1293.604 4136.211 1200.777 4155 1107 4155H273C179.223 4155 86.396 4136.211 0 4099.742Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.p-report-sbt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/editorial/report-sbt-background.webp") center / cover no-repeat;
  opacity: .2;
}

.p-report-sbt .p-report__eyebrow {
  color: inherit;
}

.p-report-sbt__card {
  position: relative;
  min-height: 676px;
  margin-top: 44px;
  padding: 149px 108px 92px;
  border-radius: 100px;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 24px;
}

.p-report-sbt__card p {
  white-space: nowrap;
}

.p-report-sbt__logo {
  position: absolute;
  top: -117px;
  right: 108px;
  width: 382px;
  height: 241px;
  padding: var(--space-sm) 31px;
  border: 1px solid #d9d9d9;
  border-radius: 30px;
  background-color: var(--color-white);
}

.p-report-sbt__logo img {
  display: block;
  width: 318px;
  height: 208px;
  object-fit: contain;
}

.p-report-sbt__definition {
  margin-top: 59px;
}

.p-report-sbt__definition + .p-report-sbt__definition {
  margin-top: 56px;
}

.p-report-sbt__definition h3 {
  color: var(--color-main);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 30px;
}

.p-report-sbt__definition p {
  margin-top: 10px;
}

.p-report__related {
  padding: var(--space-3xl) 0 140px;
}

.p-report__policy-link {
  display: flex;
  width: 400px;
  min-height: 64px;
  margin-inline: auto;
  padding-inline: 15px 19px;
  line-height: 24px;
}

.p-editorial-page main a:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 4px;
}

/* ============================================
   Object / Utility
   ============================================ */

.u-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}