:root {
  --ink: #141414;
  --muted: #3e3e3e;
  --line: #e8e8e8;
  --container: 1100px;
  --font-size-title: clamp(15px, 3vw, 25px);
  --font-size-body: clamp(13px, 1.8vw, 15px);
}

* {
  box-sizing: border-box;
}

:where(.f-freepage) {
  color: var(--ink);
  /* font-family: "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; */
  background: #fff;
  letter-spacing: 0.02em;
}

:where(.f-freepage) h1,
:where(.f-freepage) h2,
:where(.f-freepage) h3,
:where(.f-freepage) h4,
:where(.f-freepage) p,
:where(.f-freepage) figure,
:where(.f-freepage) dl,
:where(.f-freepage) dt,
:where(.f-freepage) dd {
  margin: 0;
  padding: 0;
}

.js-show-b {
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transform: translate(0, 0);
}

.js-show-b.is-show-b {
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transform: translate(0, 0);
}

.l-section {
  padding: 120px 0;
}

.u-imgfix {
  display: block;
  width: 100%;
  height: auto;
}

.js-show-l {
  opacity: 1;
  transform: none;
}

.hacobune-univideo {
  width: 100%;
  max-width: min(var(--container), calc(100% - 48px));
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}

.hacobune-univideo .hacobune-container,
.hacobune-univideo .hacobune-app-container,
.hacobune-univideo video,
.hacobune-univideo iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.intro {
  margin: 0 auto;
  padding: 120px 0 140px;
}

/* Video block spacing: align vertical rhythm with other content sections */
.p-video {
  padding: 40px 0 160px;
}

.intro__inner {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

.intro .p-introTtl {
  font-family: sans-serif;
  font-size: var(--font-size-title);
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin-bottom: 24px;
}

.p-intro__link {
  margin-top: 50px;
  text-align: center;
}

.intro p {
    color: var(--muted);
    font-size: var(--font-size-body);
    line-height: 2;
    max-width: 50em;
    margin: 0 auto;
    text-align: justify;
}

/* Intro text rule: one paragraph per p-introTxt, no manual <br> layout */
.intro .p-introTxt + .p-introTxt {
  margin-top: 1.2em;
}

.intro .p-introNote {
  margin-top: 20px;
  color: #777;
  font-size: var(--font-size-body);
  line-height: 2;
  text-align: justify;
}

.p-brand {
   background-color: #fafafa;
}

.p-brand .c-basewidth {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.p-brand__logo {
  margin: 0 auto;
}

.s-logoWidth {
  width: 300px;
}

.p-brand__logo.p-brand__logo--wp {
  width: min(440px, 70vw);
}

.p-brand__title {
  margin: 36px 0 0;
  font-family: "Lato", "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: var(--font-size-title);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.p-brand__titleSub {
  display: inline-block;
  font-size: clamp(13px, 1.5vw, 15px);
  color: #232323;
  margin-left: 14px;
  position: relative;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.p-brand__titleSub::before {
  content: "/";
  display: inline-block;
  padding-right: 5px;
}

.p-brand__description {
  margin: 25px 0 0;
  padding-bottom: 20px;
}

.p-brand__txt {
  font-size: var(--font-size-body);
  line-height: 1.8;
  margin: 25px auto;
  width: 57.9268292683%;
  max-width: 55em;
  text-align: left;
}

.p-brand__link {
  margin-top: 30px;
  text-align: center;
} 

.p-item__link {
  margin-top: 18px;
}

.p-item__link .u-linkBtn {
    margin: 0;
  }


.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin: 0 auto 60px;
}

.p-content__inner {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}

.p-content.l-section {
  padding: 80px 0 0;
}

.p-content:not(:has(+ .p-content)) .p-content__inner {
  border-bottom: 0;
}

.feature-image,
.gallery-card {
  overflow: hidden;
}

.feature-image {
  aspect-ratio: 6 / 7;
}

.feature-image img,
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-text h3 {
  font-size: var(--font-size-title);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.4;
  margin: 0;
}

.feature-text p {
  margin: 0;
  text-align: left;
}

.feature-text p span {
  color: #797979;
  font-size: clamp(11px, 1vw, 14px);
  margin-left: .5em;
}

.feature-text .feature-price {
  color: var(--ink);
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 0;
}

.feature-price span {
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 400;
}

.feature-meta {
  margin-top: 16px;
  padding-bottom: 12px;
}

.feature-specList {
  margin: 10px 0 0;
  display: grid;
  gap: 4px;
}

.feature-specLine {
  margin: 0;
  display: grid;
  grid-template-columns: 4.8em 1fr;
  align-items: baseline;
  gap: 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.feature-specLabel {
  font-weight: 400;
}

.feature-specValue {
  min-width: 0;
  font-weight: 400;
}

.feature-text .feature-desc {
  margin-top: 16px;
}

.feature-text .feature-desc__lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.feature-desc__group {
  margin-top: 16px;
}

.feature-desc__group h4 {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.feature-desc__group h4::before {
  content: "■";
  margin-right: 0.4em;
}

.feature-desc__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.feature-desc__group li {
  position: relative;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: 1.75;
  padding-left: 1em;
  text-indent: 0;
  letter-spacing: 0.01em;
}

.feature-desc__group li::before {
  content: "\30FB";
  position: absolute;
  left: 0;
  top: 0;
}

.gallery {
  width: min(var(--container), calc(100% - 0));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-release-info {
  margin: 32px 0 0;
  max-width: 50em;
  text-align: left;
}

.p-release-info .p-release-info__content {
  width: 100%;
  padding: 0;
}

.p-release-info p {
  margin: 0;
  color: #232323;
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-align: left;
}

.p-release-info p + p {
  margin-top: 6px;
}

.release-label {
  display: inline-block;
  width: 10em;
}

.release-label--sub {
  padding-left: 1em;
}

.p-release-info__marked::before {
  content: "■";
  margin-right: 0.25em;
}

.p-release-info .p-release-info__name {
  color: var(--ink);
  font-size: var(--font-size-title);
  font-weight: 400;
  margin-bottom: 14px;
}

.p-release-info__link {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
  text-align: left;
}

.p-release-info__link .u-linkBtn {
  margin: 0;
}


@media (max-width: 640px) {
  .release-schedule--online {
    white-space: nowrap;
  }

  .l-section {
    padding: 76px 0;
  }

  .feature {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .feature-meta {
    margin-top: 14px;
    padding-bottom: 10px;
  }

  .feature-specList {
    margin-top: 8px;
  }

  .feature-text .feature-desc {
    margin-top: 14px;
  }

  .feature-desc__group {
    margin-top: 14px;
  }

  .feature-specLabel {
    min-width: 0;
  }

  .feature-specLine {
    grid-template-columns: 4.6em 1fr;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .p-content__inner {
    margin: 0 auto;
    padding-bottom: 56px;
  }

  .p-content.l-section {
    padding: 56px 0 0;
  }

  .intro {
    padding: 76px 0 88px;
  }

  .p-video {
    padding: 0 0 60px;
  }

  .p-brand__title {
    margin-top: 26px;
  }

  .p-brand__logo.p-brand__logo--wp {
    width: min(64vw, 280px);
    overflow: hidden;
  }

  .p-brand__logo--wp .u-imgfix {
    width: 160%;
    max-width: none;
    transform: translateX(-18.75%);
  }

  .p-brand__titleSub {
    display: block;
    margin: 8px 0 0;
  }

  .p-brand__titleSub::before {
    content: "";
    padding-right: 0;
  }

  .p-brand__txt {
    width: 100%;
    max-width: none;
  }

  .p-release-info {
    max-width: 50em;
    margin-top: 28px;
  }

  .p-release-info__link {
    justify-content: center;
    margin-top: 32px;
    text-align: center;
  }

  .p-intro__link,
  .p-item__link,
  .p-brand__link {
    text-align: center;
  }
}

/* Shoplist: Japanese text area uses Gothic stack */
.p-shoplist__shopName,
.p-shoplist__shopKana,
.p-shoplist__shopinfo dd,
.p-shoplist__notice {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.p-shoplist .p-shoplist__shopName {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  line-height: 1.4;
}

.p-shoplist .p-shoplist__shopKana,
.p-shoplist .p-shoplist__shopinfo dt,
.p-shoplist .p-shoplist__shopinfo dd,
.p-shoplist .p-shoplist__notice {
  font-size: var(--font-size-body);
}

.p-shoplist .p-shoplist__shopKana {
  margin-top: 8px;
  line-height: 1.6;
}

.p-shoplist .p-shoplist__ttl {
  font-size: var(--font-size-title);
  font-weight: 400;
}

.p-shoplist__inner {
  justify-content: center;
  max-width: 57.9268292683%;
}

@media (max-width: 640px) {
  .p-shoplist__block {
    align-items: center;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    margin: 0 auto 50px;
    max-width: 100%;
    padding: 50px 0 0;
    text-align: left;
    width: 100%;
  }

  .p-shoplist .p-shoplist__inner {
    box-sizing: border-box;
    max-width: 100%;
  }

  .p-shoplist__overview,
  .p-shoplist__imgArea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .p-shoplist__shopinfo dd,
  .p-shoplist__shopinfo a {
    overflow-wrap: anywhere;
  }
}

/* ONLY ARK：intro上部のコラボロゴ（NICENESS × ARKNETS） */
.p-introLogo {
  width: min(360px, 62vw);
  margin: 0 auto 28px;
}

@media (max-width: 640px) {
  .p-introLogo {
    width: min(300px, 70vw);
    margin-bottom: 22px;
  }
}

/* ONLY ARK：メインビジュアル（WP特設と同じくコンテナ幅） */
.p-mv {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

/* ONLY ARK：共通セクションのブランドロゴ
   WPの .p-brand__logo--wp はロゴ画像の余白を切るため SP で 160% 拡大＋位置補正を
   かけている。他ブランドのロゴでは崩れるので、専用の修飾子を用意して小さめに置く。 */
.p-brand__logo.p-brand__logo--onlyark {
  width: min(240px, 56vw);
}

@media (max-width: 640px) {
  .p-brand__logo.p-brand__logo--onlyark {
    width: min(200px, 52vw);
  }
}

/* ONLY ARK：メインビジュアル中央に重ねるコラボロゴ */
.p-look__img {
  position: relative;
}

/* 写真を暗く落としてロゴを読ませる。色は乗せず明度だけ下げる。 */
.p-look__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 1;
}

.p-mv__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 元画像の幅 1098px を上限に、できるだけ大きく */
  width: min(1098px, 78%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

/* ロゴ画像は赤＋黒（白背景用）のため、暗い写真の上では読めない。
   白単色に変換して視認性を確保する。白版のロゴ画像を用意できたら
   この指定を外して差し替える。 */
.p-mv__logo .u-imgfix {
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  .p-mv__logo {
    width: min(1098px, 82%);
  }
}

/* ONLY ARK：発売情報
   商品エリア（feature-meta）と同じクラス・同じ見た目を流用する。
     商品名   var(--font-size-title)      lh 1.4
     価格     clamp(15px, 1.6vw, 21px)    lh 1.3
     スペック  clamp(11px, 1vw, 14px)      グレー
   ラベル列は「オンラインストア :」が収まる幅で全行そろえる。
   区切り線などの装飾は入れず、余白だけでグルーピングする。 */
.p-release-info .p-release-info__name {
  color: var(--ink);
  font-size: var(--font-size-title);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.03em;
  margin: 0 0 14px;
}

.p-release-info .feature-price {
  color: var(--ink);
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0;
}

/* 商品エリアの .feature-text p span と同じ扱いにする */
.p-release-info .feature-price span,
.p-release-info .feature-specLabel,
.p-release-info .feature-specValue {
  color: #797979;
  font-size: clamp(11px, 1vw, 14px);
}

.p-release-info .feature-price span {
  margin-left: 0.5em;
}

.p-release-info .feature-specList {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
}

.p-release-info .feature-specLine {
  display: grid;
  grid-template-columns: 9.4em 1fr;
  align-items: baseline;
  margin: 0;
  line-height: 1.75;
}

.p-release-info .p-release-info__link {
  margin-top: 28px;
}

@media (max-width: 640px) {
  .p-release-info .feature-specLine {
    grid-template-columns: 8.6em 1fr;
  }
}

/* ============================================================
   ONLY ARK：全体ルールの整理
   セクション見出し / 行間 / カラー / グリッドを一本化する。
   ここより上の個別指定を打ち消す目的で、末尾にまとめて置く。
   ============================================================ */
:root {
  --sub: #797979;        /* ラベル・注記。#777 / #8a8a8a を統合 */
  --gutter: 48px;
  --measure: 50em;       /* 読み物の最大行長 */
  --section-y: 120px;
}

@media (max-width: 640px) {
  :root {
    --gutter: 24px;
    --section-y: 72px;
  }
}

/* ---- グリッド：全セクションを同じコンテナ幅に ---- */
.intro__inner,
.p-content__inner,
.f-freepage .c-basewidth,
.f-freepage .p-shoplist__inner {
  width: min(var(--container), calc(100% - var(--gutter)));
  max-width: none;
  margin-inline: auto;
}

.gallery {
  width: 100%;
}

/* ---- セクションの縦リズム ---- */
.intro {
  padding: var(--section-y) 0;
}

.f-freepage .p-brand {
  padding: var(--section-y) 0;
}

.f-freepage .p-shoplist {
  margin-top: 0;
  padding: var(--section-y) 0;
}

/* ---- セクション見出し（ブランド名 / SHOP LIST）----
   ブランド名の書体に統一し、太さを一段落とす。 */
.f-freepage .p-brand__title,
.f-freepage .p-shoplist__ttl {
  color: var(--ink);
  font-family: "Lato", "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: var(--font-size-title);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 auto 44px;
}

.f-freepage .p-brand__titleSub {
  font-weight: 400;
}

.f-freepage .p-brand__logo {
  margin: 0 auto 32px;
}

/* ---- 見出しの書体は本文と揃える（ページタイトルの sans-serif 指定を解除）---- */
.intro .p-introTtl {
  font-family: inherit;
  line-height: 1.5;
}

/* ---- 本文：読み物は行間1.9・行長50em、リストは1.75 ---- */
.intro p,
.f-freepage .p-brand__txt,
.feature-text .feature-desc__lead {
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: 1.9;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  /* 長文は両端を揃える。英単語は途中で折らない。 */
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

.feature-text .feature-desc__lead {
  max-width: none;
  line-height: 1.75;
}

.f-freepage .p-brand__txt + .p-brand__txt {
  margin-top: 1.6em;
}

/* ---- カラー：補助テキストを1色に ---- */
.intro .p-introNote,
.feature-text p span,
.p-release-info .feature-price span,
.p-release-info .feature-specLabel,
.p-release-info .feature-specValue {
  color: var(--sub);
}

/* ---- 罫線：背景に馴染む1色に統一 ---- */
.f-freepage .p-shoplist__block,
.f-freepage .p-shoplist__block:last-of-type {
  border-color: var(--line);
}

/* ---- セクション：背景色で区切る（ブランドと同じ考え方）---- */
.intro,
.f-freepage .p-brand {
  background-color: #fafafa;
}

.f-freepage .p-content,
.f-freepage .p-shoplist {
  background-color: #fff;
}

/* ---- セクションの上下パディングを統一 ---- */
.intro,
.f-freepage .p-content.l-section,
.f-freepage .p-brand,
.f-freepage .p-shoplist {
  padding: var(--section-y) 0;
}


/* ---- アイテムが続くときの区切り線（HTML側の指定は不要）----
   2つ目以降のアイテムの上に自動で線を引く。
   線の上下に同じ余白（--section-y）を取って中間に置く。
   <hr> やクラス付けは不要。アイテムが1点なら線は出ない。 */
.f-freepage .p-content.l-section {
  padding: 0;
}

.f-freepage .p-content__inner {
  padding: var(--section-y) 0;
  border-bottom: 0;
}

/* ① 1つのセクションに複数アイテムを並べる書き方 */
.f-freepage .p-content__inner > .feature:not(:first-child) {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  border-top: 1px solid var(--line);
}

/* ② アイテムごとにセクションを分ける書き方 */
.f-freepage .p-content + .p-content > .p-content__inner {
  border-top: 1px solid var(--line);
}

/* 手書きの区切り線が残っていても二重線にならないよう無効化する */
.f-freepage hr.p-item-divider {
  display: none;
}