@charset "UTF-8";
/*
 * page.css (Refined Minimalist / No TOC)
 * ----------------------------------------
 * 固定ページ標準
 * - tokens / base / layout / components（c-content 等）前提
 * - 目次は完全廃止（このCSSにもTOC要素なし）
 * - 法務/案内系（特商法・規約・会社情報）の可読性を上げる
 */

/* ======================================
   Header
   ====================================== */

.p-pageHeader {
  padding-top: max(100px, 13vh);
  padding-bottom: 0;
  text-align: center;
}

.p-pageHeader__title {
  font-family: var(--font-family-heading);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  line-height: 1.4;
  margin: 0;
}

.p-pageHeader__lead {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: var(--fs-14);
  line-height: 2.0;
  color: var(--color-muted);
  letter-spacing: var(--ls-base);
}

.p-pageHeader__divider {
  width: min(560px, 80%);
  height: 1px;
  background: var(--color-border);
  margin: 32px auto 0;
  position: relative;
}

.p-pageHeader__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 40px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--color-accent);
  opacity: .70;
}

/* ======================================
   Featured Media (optional)
   ====================================== */

.p-pageMedia {
  max-width: var(--content-max);
  margin: 0 auto 34px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  box-shadow: var(--shadow-soft);
}

.p-pageMedia img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.02);
}

@supports (animation-timeline: view()) {
  .p-pageMedia img{
    animation: pageImgZoom 1.1s cubic-bezier(.25,1,.5,1) both;
    animation-timeline: view();
    animation-range: entry 12% cover 35%;
  }
  @keyframes pageImgZoom { to { transform: scale(1); } }
}

/* ======================================
   Body
   ====================================== */

.p-pageBody {
  padding-top: 52px;
  padding-bottom: var(--section-pad-bottom);
}

/* 重要：components/content.css の “本文ガード（左右padding）” と二重になりがちなので無効化
   → l-container の gutter を正にする */
.p-pageBody .c-content{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;

  /* URL/メールが崩れない（特商法で必須） */
  overflow-wrap: anywhere;
  word-break: break-word;

  font-size: 15px;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: var(--ls-base);
  color: var(--color-ink, #1a1a1a);
}

/* 要素間リズム（“余白の品”） */
.p-pageBody .c-content > * + *{
  margin-top: var(--flow-2);
}

/* 最初の見出しの “上の空きすぎ” を消す */
.p-pageBody .c-content > h2:first-child,
.p-pageBody .c-content > h3:first-child{
  margin-top: 0;
  padding-top: 0;
}

/* ======================================
   Headings
   ====================================== */

.p-pageBody .c-content h2{
  font-size: 18px;
  font-weight: 700;
  margin-top: 44px;
  padding-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  scroll-margin-top: 120px;
}

.p-pageBody .c-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 46px;
  height: 2px;
  background: var(--color-accent);
  opacity: .75;
}

.p-pageBody .c-content h3{
  font-size: 15px;
  font-weight: 700;
  margin-top: 32px;
  padding-left: 10px;
  border-left: 3px solid var(--color-accent);
  scroll-margin-top: 120px;
}

.p-pageBody .c-content h4{
  font-size: var(--fs-13);
  font-weight: 700;
  margin-top: 24px;
  color: var(--color-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  scroll-margin-top: 120px;
}

/* ======================================
   Common elements
   ====================================== */

.p-pageBody .c-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.p-pageBody .c-content hr{
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 34px 0;
}

.p-pageBody .c-content ul,
.p-pageBody .c-content ol{
  padding-left: 1.2em;
}
.p-pageBody .c-content li + li{
  margin-top: 10px;
}

/* 引用・注釈（規約系で出やすい） */
.p-pageBody .c-content blockquote{
  margin: 28px 0;
  padding: 18px 18px;
  border-left: 3px solid var(--color-border);
  background: rgba(0,0,0,0.02);
  color: var(--color-muted);
}

/* ======================================
   Table (会社概要/特商法など)
   ====================================== */

.p-pageBody .c-content table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
}

.p-pageBody .c-content th,
.p-pageBody .c-content td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-13);
  line-height: 1.8;
  vertical-align: top;
}

.p-pageBody .c-content th{
  width: 28%;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(0,0,0,0.02);
}

/* ======================================
   DL (特商法はdlが最適)
   ====================================== */

.p-pageBody .c-content dl{
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.p-pageBody .c-content dt{
  margin: 0;
  padding: 18px 0 6px;
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.p-pageBody .c-content dd{
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border);
}

/* “太字の項目名＋本文” を自動でdlっぽく整える（対応ブラウザのみ）
   ※ Gutenbergでdl作らない運用でも勝てる */
@supports selector(p:has(> strong:first-child)){
  .p-pageBody .c-content p:has(> strong:first-child){
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .p-pageBody .c-content p:has(> strong:first-child) > strong{
    display: block;
    font-size: var(--fs-12);
    letter-spacing: 0.12em;
    color: var(--color-muted);
    font-weight: 700;
    margin-bottom: 6px;
  }
}

/* ======================================
   Footer (edit link etc)
   ====================================== */

.p-pageFoot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
}

/* ======================================
   Responsive
   ====================================== */

@media (max-width: 1024px) {
  .p-pageHeader {
    padding-top: 92px;
  }
}

@media (max-width: 640px) {
  .p-pageHeader {
    padding-top: 76px;
  }

  .p-pageHeader__title {
    font-size: 22px;
    text-align: left;
  }

  .p-pageHeader__lead {
    text-align: left;
  }

  .p-pageHeader__divider {
    margin-top: 24px;
    width: 100%;
  }

  .p-pageMedia {
    margin-bottom: 28px;
    border-radius: var(--radius-sm);
  }

  .p-pageBody {
    padding-top: 36px;
    padding-bottom: 96px;
  }
}