/* Marukiplix 仮サイト D 案
   「障子越しの夕方」。全文を明朝で組み、写真の明暗で場面を切り替える。
   - ヒーローは角を丸めた額縁の写真に、白い明朝の見出しと縦書きのメニュー
   - 各セクションの見出しは、白い短冊（縦書き）を写真や地の上端に掛ける
   - 色は和紙の地・墨・灰の3段と、写真。アクセント色は持たない（フォーカスの線だけ藍鉄）
   動きは、読み込み時に写真がわずかに引いて見出しが行ごとに出る、の1回だけ（と、スクロールの線） */

@font-face {
  /* 禅オールド明朝（SIL OFL 1.1）。このページで使う文字だけに絞ったもの（assets-src/d/fonts/ に元と作り方） */
  font-family: "Zen Old Mincho D";
  src: url("fonts/zen-old-mincho-regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Old Mincho D";
  src: url("fonts/zen-old-mincho-semibold-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --washi: #f7f5f4;     /* 地（ごく薄い灰桜） */
  --shiro: #ffffff;     /* 短冊・パネル */
  --sumi: #1f1d1c;      /* 本文・見出し */
  --hai: #6b6663;       /* 補足 */
  --rule: #ddd7d4;      /* 罫線 */
  --yoru: #262422;      /* 暗い面 */
  --aitetsu: #33506b;   /* フォーカスの線 */

  --font-mincho: "Zen Old Mincho D", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --inset: clamp(.5rem, 1vw, .75rem);
  --radius: clamp(.875rem, 1.6vw, 1.5rem);
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--washi);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--font-mincho);
  font-size: 1rem;
  line-height: 2.05;
  letter-spacing: .06em;
  overflow-x: clip;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
}

h1, h2, p, dl, dd, ul { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--aitetsu);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: .5rem 1rem;
  background: var(--shiro);
  color: var(--sumi);
  text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ── ヘッダー: ヒーローの写真の上に重ねる ── */

.site-header {
  position: absolute;
  top: var(--inset);
  left: var(--inset);
  right: var(--inset);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 3.2vw, 2.75rem) clamp(1.25rem, 3.6vw, 3rem);
  color: var(--shiro);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  line-height: 1;
}

.brand-mark {
  width: clamp(2.25rem, 3.6vw, 3rem);
  height: clamp(2.25rem, 3.6vw, 3rem);
  flex: none;
}

.brand-name {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  letter-spacing: .12em;
}

/* 縦書きのメニュー（右から 事業・会社概要・お問い合わせ） */
.site-nav {
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(.75rem, 2vw, 1.75rem);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .42em;
}

.site-nav a {
  writing-mode: vertical-rl;
  text-decoration: none;
  padding: .25rem .25rem;
  border-right: 1px solid transparent;
  transition: border-color .25s;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  border-right-color: currentColor;
}

/* ── ヒーロー: 角の丸い額縁の写真 ── */

.hero {
  padding: var(--inset) var(--inset) 0;
}

.hero-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(34rem, calc(100svh - 6rem));
  padding: 9rem clamp(1.5rem, 5.5vw, 5rem) 7rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--yoru);
  color: var(--shiro);
  isolation: isolate;
}

.hero-img,
.hero-frame::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-img {
  z-index: -2;
  object-fit: cover;
  object-position: 62% 50%;
}

/* 見出しの下の写真を少し沈める */
.hero-frame::after {
  content: "";
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(20 18 17 / .62) 0%, rgb(20 18 17 / .28) 55%, rgb(20 18 17 / .12) 100%),
    linear-gradient(0deg, rgb(20 18 17 / .35) 0%, rgb(20 18 17 / 0) 40%);
}

.hero-title {
  font-weight: 400;
  font-size: clamp(1.5rem, 6.4vw, 3.75rem);
  line-height: 1.8;
  letter-spacing: .14em;
  text-shadow: 0 0 1.5em rgb(0 0 0 / .25);
}

.hero-title .line { display: block; }

/* スクロールの合図（飾り） */
.scroll {
  position: absolute;
  right: clamp(1.25rem, 3.6vw, 3rem);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  font-size: .75rem;
  letter-spacing: .2em;
  line-height: 1;
}

.scroll-word { writing-mode: vertical-rl; }

.scroll-line {
  position: relative;
  width: 1px;
  height: clamp(4rem, 12svh, 7rem);
  background: rgb(255 255 255 / .35);
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--shiro);
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-img {
    animation: settle 2.8s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero-title .line {
    opacity: 0;
    animation: rise 1.2s ease-out forwards;
  }
  .hero-title .line:nth-child(1) { animation-delay: .5s; }
  .hero-title .line:nth-child(2) { animation-delay: .85s; }
  .hero-title .line:nth-child(3) { animation-delay: 1.2s; }
  .scroll-line::after {
    animation: drip 2.4s cubic-bezier(.65, 0, .35, 1) 2s infinite;
  }
}

@keyframes settle {
  from { transform: scale(1.07); }
  to { transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(.4em); }
  to { opacity: 1; transform: none; }
}

@keyframes drip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ── 設立の帯 ── */

.founding-bar {
  padding: 1.5rem var(--gutter);
}

.founding {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .9375rem;
  letter-spacing: .14em;
  line-height: 1.6;
}

.founding-label {
  padding: .125rem .75rem;
  border: 1px solid var(--sumi);
  font-size: .8125rem;
}

/* 帯の右に伸びる細い線 */
.founding::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  height: 1px;
  background: var(--rule);
}

/* ── 準備中のお知らせ: 縦書きの文 ── */

.statement {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(5rem, 12vw, 10rem);
  overflow: hidden;
  overflow: clip;
}

.statement-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(40rem, 94vw);
  height: auto;
  transform: translate(-50%, -50%);
  color: #dcd4d1;
  pointer-events: none;
}

.statement-text {
  position: relative;
  writing-mode: vertical-rl;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 2.5;
  letter-spacing: .32em;
}
.statement-text .col { display: block; }
.statement-text .gap { margin-right: 1.5em; }

/* ── セクション共通: 白い短冊の見出し ── */

.section {
  position: relative;
  padding-top: 4rem;
}

.tab {
  position: absolute;
  top: 0;
  left: max(var(--gutter), 7vw);
  z-index: 2;
  writing-mode: vertical-rl;
  margin: 0;
  padding: 1.75rem 1rem 1.5rem;
  background: var(--shiro);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .32em;
  box-shadow: 0 .75rem 2rem rgb(31 29 28 / .06);
  scroll-margin-top: 1.5rem;
}

/* ── 事業: 写真の帯の上に半透明のパネル ── */

.band {
  position: relative;
  display: grid;
  place-items: center;
  /* 上の余白は、掛けた短冊（縦書きの見出し）の下までとる */
  padding: 13rem var(--gutter) clamp(5rem, 10vw, 8rem);
  isolation: isolate;
  background: var(--yoru);
}

.band-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

.panel {
  width: min(42rem, 100%);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem);
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.business-item + .business-item {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

.business dt {
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .1em;
  word-break: keep-all;
}

.business dd {
  margin-top: .75rem;
  color: var(--hai);
  font-size: .9375rem;
  line-height: 2.1;
}

/* ── 会社概要 ── */

.section-plain {
  padding-top: clamp(5.5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  padding-inline: var(--gutter);
}

.profile {
  width: min(44rem, 100%);
  margin-inline: auto;
}

.profile-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--rule);
}
.profile-row:first-child { border-top: 1px solid var(--sumi); }

.profile dt {
  color: var(--hai);
  font-size: .875rem;
  letter-spacing: .2em;
  padding-top: .1rem;
}

.biz-list {
  list-style: none;
  padding: 0;
}

.pending { color: var(--hai); }

/* ── お問い合わせ: 暗い面と白い面を左右に ── */

.section-contact {
  padding-top: 4rem;
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-main,
.contact-sub {
  display: grid;
  place-items: center;
  min-height: clamp(14rem, 26vw, 20rem);
  /* 上の余白は、掛けた短冊の下までとる */
  padding: 10rem var(--gutter) 4rem;
  text-align: center;
}

.contact-main {
  background: var(--yoru);
  color: var(--shiro);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.8;
  letter-spacing: .14em;
  word-break: keep-all;
}

.contact-sub {
  background: var(--shiro);
  color: var(--hai);
  font-size: .9375rem;
  letter-spacing: .1em;
  word-break: keep-all;
}

/* ── フッター: 暗くした写真に、中央のロゴ ── */

.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--yoru);
  color: var(--shiro);
  overflow: hidden;
}

.footer-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(20 18 17 / .45);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(5rem, 10vw, 8rem) var(--gutter) 2.5rem;
  text-align: center;
}

.footer-mark {
  width: 4.5rem;
  height: 4.5rem;
}

.footer-name {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  letter-spacing: .18em;
  line-height: 1.4;
}

.footer-note {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  font-size: .75rem;
  color: rgb(255 255 255 / .78);
}

.footer-copy {
  margin-top: .5rem;
  font-size: .75rem;
  color: rgb(255 255 255 / .78);
  letter-spacing: .1em;
}

/* ── 狭い画面 ── */

@media (max-width: 48rem) {
  .hero-frame {
    justify-content: flex-end;
    min-height: max(32rem, calc(100svh - 5rem));
    padding-bottom: 9rem;
  }
  .hero-img { object-position: 74% 50%; }
  .hero-frame::after {
    background:
      linear-gradient(0deg, rgb(20 18 17 / .7) 0%, rgb(20 18 17 / .3) 55%, rgb(20 18 17 / .2) 100%);
  }

  .section-plain { padding-top: 12rem; }

  .profile-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-main { padding-top: 13rem; }
  .contact-sub { min-height: 0; padding-block: 3.5rem; }
}

@media (max-width: 30rem) {
  .site-nav { font-size: .8125rem; letter-spacing: .32em; }
  .founding { gap: 1rem; }
}