/* ==========================================================
   THE HIKKA Collection フルスクラッチ複製 CSS
   原本: Studio design製 単一ページサイト
   BP: mobile ≤540 / tablet 541-840 / desktop ≥841 (Studio標準)
   ========================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #736032;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  /* 想いセクションの写真がビューポート外へ張り出すため横スクロールを抑止 */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.section-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 16px;
  position: relative;
}

.heading {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.8;
  letter-spacing: 1.25px;
  margin: 0 0 16px;
  padding: 16px 0;
  width: fit-content;
  white-space: nowrap;
}

.heading--right {
  text-align: right;
  margin-left: auto;
}

.heading--center {
  /* 中央配置は箱(fit-content)のmargin autoで行う。テキスト揃えは原本実測どおりleft
     (箱=文字幅なので見た目は同じだが、原本のcomputed text-alignに合わせる) */
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

/* ================= 1. ヒーロー ================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  /* 原本実測: ヒーローSECTION自体の背景色は白(画像はその上のcover)。画像読込前の下地も原本に合わせる */
  background: #fff url('../assets/s-4897x3266_v-frms_webp_6d4d7609-0a59-4ce8-a608-c2c05179b073_regular.webp') center/cover no-repeat;
  overflow: hidden;
}

.hero-row {
  position: absolute;
  left: -10px;
  right: -10px;
  /* 原本実測: 1440/1920では文字列が幅1416pxで中央に留まる(1366以下は画面幅+20) */
  max-width: 1416px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-row--top {
  top: 3px;
}

.hero-row--bottom {
  bottom: 0;
}

/* 原本は下段の各文字Pが高さ89px固定のflexセンター(全帯共通)。上段は自然高(fs×1.4) */
.hero-row p {
  margin: 0;
  height: 89px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 配置はflexが担う(taは効かないが原本のcomputed値center に合わせる) */
  text-align: center;
  font-family: "Shippori Mincho B1", serif;
  font-size: 60px;
  line-height: 1.4;
  color: #9fff00;
}

.hero-row--top p {
  /* 原本実測(≥841): 上段のみ自然高84(=60×1.4) */
  height: 84px;
}

@media (min-width: 841px) and (max-width: 1080px) {
  .hero-row {
    left: -14px;
    right: -14px;
  }
}

/* 代替フォント(Shippori Mincho B1)の英数字ランは原本(秀英横太明朝)と字幅が違い
   折返し位置がずれる。word-spacing負値だと単語同士が重なるため、ラン種別ごとに
   spanの字間へ分散して原本実測幅に固定する(fs16帯の実測値。fs14帯は≤540で上書き) */
.latin-caps {
  /* "THE HIKKA COLLECTION"20字: +23.4px広い(原本210.98px) */
  letter-spacing: -0.38px;
}

.latin-year {
  /* "2017"/"2023": 1.35px狭い(原本37.58px) */
  letter-spacing: 1.14px;
}

.latin-num {
  /* "30": 0.49px狭い(原本18.8px) */
  letter-spacing: 1.05px;
}

.latin-lower {
  /* "hikka": 5.3px広い(原本41.39px) */
  letter-spacing: -0.26px;
}

.latin-acr {
  /* "OEM": 3.95px広い(原本38.53px) */
  letter-spacing: -0.52px;
}

.hero-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 179px;
  height: 121px;
  background: url('../assets/s-774x526_v-fs_webp_7f6481e0-617f-49a5-8661-9255b5d82c4b_small.webp') center/cover no-repeat;
}

/* ================= 共通セクション ================= */
.sec {
  width: 100%;
}

/* ================= 2. HIKKA COLLECTIONの想い ================= */
.sec-thoughts {
  background: #fff;
}

/* 横にはみ出す要素(想いの写真・カルーセルのカード列)は原本同様セクション側でクリップする。
   bodyのoverflow-x:hiddenだけだと文書のscrollWidthが2130になり、モバイルChromeが
   内容幅からレイアウトビューポートを広げる(実機でピンチアウト/横パンで白地が出る) */
.sec-thoughts,
.sec-lineup {
  overflow-x: clip;
}

.sec-thoughts .heading {
  /* 原本箱幅343固定。代替フォントの英字が広い分は右へはみ出させる */
  margin-bottom: 0;
  padding: 16px 0;
  width: 343px;
  text-align: left;
}

.thoughts-body {
  position: relative;
  padding: 32px 0 32px;
}

/* 写真は帯ごとにビューポート基準の実測直値(左右へ張り出す) */
.thoughts-photo {
  background-size: cover;
  background-position: center;
}

.thoughts-photo--1 {
  /* 841〜1080帯: x=-100固定、幅は原本実測 900→600/1000→660/1024→674 = 60vw+60(1080で708に到達) */
  width: min(calc(60vw + 60px), 708px);
  height: 398px;
  margin-left: calc(50% - 50vw - 100px);
  background-image: url('../assets/s-4096x2732_v-frms_webp_739ab66b-a016-4f49-92f5-a31f613d1cd8_middle.webp');
}

.thoughts-photo--2 {
  /* 841〜1080帯: w=514固定。右端は原本実測 900→vw+104/1000→vw+79/1024→vw+73 (=0.75vw+329)。
     コンテンツ箱右端(vw-16)基準の負マージンにすると 25vw-345 (1000で-95) */
  width: 514px;
  height: 322px;
  margin: -150px calc(25vw - 345px) 0 auto;
  background-image: url('../assets/s-4096x2732_v-frms_webp_9d30c0d3-5ac2-41ae-9028-6a4358b4cea6_small.webp');
}

@media (min-width: 1081px) {
  .thoughts-photo--1 {
    /* 1280実測: x=0, w=708 */
    width: 708px;
    margin-left: calc(50% - 640px);
  }

  .thoughts-photo--2 {
    /* 1280実測: x=724, w=514 (右へ-74張り出し) */
    margin-right: -74px;
  }
}

/* 本文は幅982px・ビューポート中央固定(1280でx=149/1000でx=9) */
.thoughts-text {
  /* 原本実測982.2px。THE HIKKA COLLECTION行は原本で箱幅ギリギリ(残り0.02px)の
     1行組みなので、0.2px狭いと折れてしまう */
  /* 841〜981幅では画面幅いっぱい(原本実測: 900で x0 w900) */
  width: min(982.2px, 100vw);
  margin: -40px 0 0 calc(50% - min(491.1px, 50vw));
  padding: 16px;
  background: rgba(255, 255, 255, 0.525);
  font-family: "Shippori Mincho B1", serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  color: #333;
  position: relative;
  z-index: 1;
}

/* ================= 3. ご利用イメージ ================= */
.sec-usage {
  background: #7a9381;
  color: #fff;
}

.sec-usage .section-inner {
  padding-left: 0;
  padding-right: 0;
}

.sec-usage .heading {
  color: #fff;
}

.usage-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
}

.usage-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 40px 80px;
  text-align: center;
}

.usage-title {
  font-family: "Shippori Mincho B1", serif;
  font-size: 24px;
  /* ≤840では16pxに縮小(measure_600/375実測値) */
  line-height: 1.8;
  letter-spacing: 1.2px;
  margin: 0 0 16px;
}

.usage-text {
  font-family: "Shippori Mincho B1", serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.7px;
  text-align: left;
  margin: 0 0 16px;
}

.usage-col img {
  width: 100%;
  aspect-ratio: 380 / 436;
  height: auto;
  object-fit: cover;
}

.line-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 375px;
  max-width: 100%;
  height: 48px;
  margin: 0 auto;
  border: 1px solid #9fff00;
  border-radius: 24px;
  color: #333;
  /* 原本実測: 2箇所とも rgba(0,0,0,0.2) 0 2px 10px の影あり(2026-09-07「ないもの」総点検で追加) */
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 10px 0;
  /* 原本実測: hoverで背景#9fff00・文字白。入りは300ms ease-in-out、戻りは0.3s cubic-bezier(0.4,0.4,0,1) */
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.line-pill:hover {
  background: #9fff00;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.line-pill span {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #9fff00;
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.line-pill:hover span {
  color: #fff;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

/* ================= 4. 製作のプロセス ================= */
.sec-process {
  background: #e8e8e8;
}

.sec-process .section-inner {
  padding: 70px 16px 32px;
}

.sec-scenery .section-inner {
  padding: 79px 16px 56px;
}

.sec-process .heading {
  color: #323232;
  padding: 0;
}

/* リード3本(プロセス/ラインナップ/利用シーン)の字面調整(2026-09-07 クライアント指摘「本文が大きい」):
   原本は fs20/ls1(字送り21px・行送り36px)。代替フォントShippori Minchoは字面が秀英明朝より
   かな約5%大きい(canvas実測: の143vs133, 国180vs175)ため fs19/ls2 で字面だけ縮め、
   字送り21px・行送り36pxは原本と同一に保つ(折返し位置・箱寸法は不変)。fs25帯は fs24/ls2.25/lh45 */
/* リード3本(製作のプロセス/商品ラインナップ/利用シーン)は 2026-09-07 ユーザー指示の意図的変更:
   原本(fs20/25)は「プレビューサイトも大きい」ため、ご利用イメージ本文(.usage-text)と同じ
   fs14/lh1.8/ls0.7(541〜840帯は16/1.8/0.8)に落とす。箱幅・余白・左揃えは原本のまま */
.process-lead {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.7px;
  color: #1c1c1c;
  /* 原本実測: 箱は中央(margin auto)だがテキストは左揃え(最終行が左に寄る) */
  text-align: left;
  max-width: 703px;
  margin: 32px auto 48px;
}

.lead-latin {
  /* 原本サイズに合わせていた頃の英字幅補正は不要になった(本文と同じ字間で流す) */
  letter-spacing: inherit;
}

.process-image {
  width: 100%;
  margin: 0 auto;
  object-fit: cover;
}

/* ================= 5. 製作風景 ================= */
.sec-scenery {
  background: #e8e8e8;
  /* 写真4枚の幅計算にセクション幅(=画面幅、スクロールバー抜き)を使うためのコンテナ指定 */
  container-type: inline-size;
}

.sec-scenery .heading {
  color: #323232;
  padding: 0;
}

.scenery-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 40px;
  margin-top: 54px;
}

.scenery-photo {
  /* 原本は≥841で255px固定の4枚横並び(1140px)。画面幅が1172px未満だと両端の写真が画面外に
     はみ出して見切れる(原本も同じ)。2026-09-08 クライアント指摘で意図的変更: 画面幅から
     左右16px+間隔40px×3を引いた残りを4等分し、255pxを上限に正方形のまま縮める。
     1172px以上では従来どおり255px(1280実測と同一)。cqw非対応の古いブラウザは255px固定のまま */
  width: 255px;
  width: min(255px, calc((100cqw - 152px) / 4));
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

/* ================= 6. 商品ラインナップ ================= */
.sec-lineup {
  background: #736032;
  color: #fff;
}

.sec-lineup .heading {
  color: #fff;
  margin-bottom: 0;
  padding: 16px 0 0;
}

.sec-lineup .section-inner {
  padding: 72px 0 24px;
}

.lineup-lead {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.7px;
  text-align: center;
  /* 原本と同じ位置(「対応を」の後)で2行に折るための箱幅: 14字×14.7=205.8 */
  width: 210px;
  max-width: 100%;
  margin: 32px auto 32px;
  padding-bottom: 16px;
}

.carousel {
  position: relative;
  width: 100%;
}

.carousel-track {
  /* 原本実測: カード列は窓からはみ出して画面端まで見切れで並ぶ(クリップはbodyの
     overflow-x hidden任せ)。位相はjs/main.jsがtranslateXで合わせるため中央寄せ・クリップ禁止 */
  display: flex;
  gap: 40px;
}

.carousel-item {
  flex: 0 0 auto;
  /* ≥841帯: カード枠=画面幅の50%(上限540)、画像はその-40。原本実測 900→410/1000→460/1024→472/≥1080→500 */
  width: min(500px, 50vw - 40px);
  display: flex;
  flex-direction: column;
}

.carousel-item-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}

.carousel-item p {
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  line-height: 1.8;
  font-family: "Shippori Mincho B1", serif;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: #fff;
}

.carousel-arrows {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 47px;
}

.carousel-arrow {
  width: 81px;
  height: 33px;
  padding: 0;
  border-radius: 128px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 原本実測: hoverで背景#262626。入りは0.4s cubic-bezier(0.19,1,0.22,1)、戻りは0.4s cubic-bezier(0.4,0.4,0,1) */
  transition: all 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.carousel-arrow:hover {
  background: #262626;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.arrow-icon {
  position: relative;
  display: flex;
  width: 16px;
  height: 16px;
}

.carousel-arrow .material-icons {
  font-size: 16px;
  line-height: 16px;
  /* 原本実測: hoverで表のアイコンが送り方向へ8px流れて消え、裏(twin)が逆側から0へ入る(0.3s)。
     入りは cubic-bezier(0.19,1,0.22,1)、表アイコンの戻りは cubic-bezier(0.4,0.4,0,1) */
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.carousel-arrow .arrow-twin {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: #fafafa;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.carousel-arrow[data-dir="1"] .arrow-twin {
  translate: -8px;
}

.carousel-arrow[data-dir="-1"] .arrow-twin {
  translate: 8px;
}

.carousel-arrow:hover .material-icons {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.carousel-arrow[data-dir="1"]:hover .material-icons:not(.arrow-twin) {
  opacity: 0;
  translate: 8px;
}

.carousel-arrow[data-dir="-1"]:hover .material-icons:not(.arrow-twin) {
  opacity: 0;
  translate: -8px;
}

.carousel-arrow:hover .arrow-twin {
  opacity: 1;
  translate: 0;
}

/* ================= 7. LINE CTA単体 ================= */
.sec-cta {
  background: #736032;
}

.sec-cta .section-inner {
  padding: 56px 0;
}

/* ================= 8. 利用シーン ================= */
.sec-scene {
  background: #fff;
}

.sec-scene .heading {
  margin-bottom: 0;
}

.sec-scene .section-inner {
  padding: 88px 16px;
}

.scene-lead {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.7px;
  color: #1c1c1c;
  /* 原本実測: 箱は中央(margin auto)だがテキストは左揃え(最終行が左に寄る) */
  text-align: left;
  max-width: 703px;
  margin: 40px auto 40px;
}

.scene-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.scene-photo {
  width: 259px;
  height: 249px;
  max-width: 45%;
  background-size: cover;
  background-position: center;
}

/* ================= 9. ご利用の流れ ================= */
.sec-flow {
  background-size: cover;
  background-position: center;
  position: relative;
}

.sec-flow .heading {
  color: #fff;
  margin-bottom: 0;
}

.sec-flow .section-inner {
  padding: 72px 0;
}

.flow-list {
  list-style: none;
  margin: 0 auto;
  padding: 40px 0;
  max-width: 684px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.flow-list li {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 24px;
  height: 82px;
  background: rgba(238, 238, 238, 0.718);
}

.flow-num {
  font-family: "Merriweather", serif;
  font-size: 25px;
  line-height: 1.4;
  color: #333;
  width: 23px;
  /* 375で本文が2行になるステップ(2〜4)で番号箱が縮み、本文左端がずれるのを防ぐ */
  flex-shrink: 0;
  text-align: center;
}

.latin-flow {
  /* ステップ1「LINE」: 代替フォントは原本より4.7px広い(実測181.9 vs 186.6)。4字で分散 */
  letter-spacing: -1.18px;
}

.flow-text {
  flex: 1 1 auto;
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}

/* ================= 10. FAQ ================= */
.sec-faq {
  background: #854664;
}

.sec-faq .heading {
  color: #fff;
  margin-bottom: 0;
  /* 「FAQ」英字3字: 原本実測52.8px、代替フォント60px。3字で分散(≤540は別値) */
  letter-spacing: -1.15px;
}

.faq-list {
  /* 原本は余白56が枠の外(margin)。枠はQ行群にぴったり付く */
  list-style: none;
  margin: 56px auto;
  padding: 0;
  max-width: 700px;
  /* 原本(Studio実測): ULはborder-topのみ・LIは全項目border-bottomのみ。外枠・縦線なし */
  border-top: 1px solid #b0b0b0;
}

.faq-item {
  border-bottom: 1px solid #b0b0b0;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
}

.faq-q h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  flex: 1;
}

.faq-q-mark,
.faq-q-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}

.faq-q-mark {
  /* 「Q.」は原本実測17.5px、代替フォントは19.7px。2字で分散し質問文の開始xを揃える */
  letter-spacing: -1.1px;
}

.faq-q-text {
  flex: 1;
}

.faq-chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 配置はflexが担う(taは効かないが原本のcomputed値center に合わせる) */
  text-align: center;
  padding: 0 16px;
  font-size: 24px;
  line-height: 24px;
  color: #fff;
  /* 閉状態: keyboard_arrow_upを180°回して下向き。開くと0°(上向き)に戻る(原本と同じ反転) */
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(0deg);
}

.faq-a {
  /* 閉状態が既定(height:0のためページ高さは閉状態ベースラインのまま)。
     開閉は原本実測: height 0↔実高を0.3s cubic-bezier(0.4,0.4,0,1)で遷移 */
  height: 0;
  overflow: hidden;
  margin: 0;
  transition: height 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.faq-a p {
  /* 開状態スタイルは原本実測: fs16(≤840は14)/lh1.8/白。原本はP自体に左右28pxのpadding(全帯共通)、
     下の32pxはラッパー側。ここではPにまとめる(2026-09-07: 以前は左右0+ls0.05emで折返しを近似していた誤り) */
  margin: 0;
  padding: 0 28px 32px;
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  line-height: 1.8;
  /* 原本computed: 回答はletter-spacing normal(質問文と同じ)。0.05emは誤りだった(2026-09-07修正) */
  letter-spacing: normal;
  color: #fff;
  text-align: left;
}

/* ================= 11. 主宰 ================= */
.sec-profile {
  background: #333;
  color: #fff;
}

.sec-profile .heading {
  /* 全帯h=117(45+pb72)・箱幅390固定(中央配置)。原本はテキスト幅=箱幅 */
  color: #fff;
  padding: 0 0 72px;
  margin-bottom: 0;
  width: 390px;
  text-align: left;
}

.title-latin {
  /* "THE HIKKA COLLECTION"20字: 代替フォントは原本(389.8px全体)より36.5px広く箱の右へはみ出し、
     タイトルが右にずれて見えていた。20字で分散して原本幅に固定する */
  letter-spacing: -0.575px;
}

.profile-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.profile-photo {
  width: 538px;
  max-width: 100%;
  height: auto;
}

.profile-text {
  /* 原本実測: 写真538の残り幅を文章列が埋める(1280→478/1000→398/900→298)。
     flex-basis 380だと900前後で写真の下へ落ちてしまう */
  flex: 1 1 0;
  max-width: 478px;
}

.profile-en {
  font-family: "Shippori Mincho", serif;
  font-size: 12px;
  line-height: 1.8;
  /* 原本ls0.6(0.05em)。代替フォントの英字ランが7.6px広い(実測87 vs 94.6)ため13字で分散 */
  letter-spacing: 0.02px;
  margin: 0;
  padding-right: 24px;
  width: fit-content;
  /* 箱幅固定帯(600/375)で折り返させない */
  white-space: nowrap;
}

.profile-ja {
  font-family: "Shippori Mincho", serif;
  font-size: 25px;
  line-height: 1.8;
  letter-spacing: 1.25px;
  margin: 0;
  padding-right: 24px;
  width: fit-content;
}

.profile-bio {
  /* 原本は経歴ボックス自体にpadding(右24で折返し幅454=9行@1280) */
  font-family: "Shippori Mincho B1", serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  margin: 0;
  padding: 24px 24px 24px 0;
}

/* 主宰と問い合わせの間の区切り線(原本実測: 1px #eee) */
.profile-divider {
  height: 1px;
  background: #eee;
  margin-top: 61px;
}

.sec-profile .section-inner {
  padding-bottom: 16px;
}

/* ================= 12. お問い合わせ ================= */
.sec-contact {
  background: #333;
  color: #fff;
}

.sec-contact .heading {
  color: #fff;
  margin-bottom: 0;
  /* 見出しの中で唯一コンテンツ幅を超えうる(360で336>328)。原本は2行に折り返す(h104) */
  max-width: 100%;
  white-space: normal;
}

.sec-contact .section-inner {
  padding: 64px 16px 136px;
}

.contact-text {
  font-family: "Shippori Mincho B1", serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  /* 原本実測: 箱は中央(margin auto)だがテキストは左揃え(最終行が左に寄る) */
  text-align: left;
  /* 原本実測の箱幅597(600ではない)。左揃えなので箱幅がそのまま行頭xに効く */
  max-width: 597px;
  margin: 0 auto 40px;
}

.contact-latin {
  /* 代替フォントのLINE4字は原本(秀英横太明朝)より4.7px広く折返しが1字ずれる。
     原本実測幅(fs16帯=41.11px)に揃える */
  letter-spacing: -0.38px;
}

.contact-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto 40px;
  background-size: cover;
  background-position: center;
}

.contact-link {
  display: flex;
  justify-content: center;
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-family: "Shippori Mincho B1", serif;
  font-size: 12px;
  line-height: 1.8;
  /* 原本ls0.6(0.05em)。URL59字の英字ランが23.7px広い(実測380.4 vs 404.1)ため分散 */
  letter-spacing: 0.2px;
  color: #fff;
  /* 600帯で原本は1行のまま(代替フォントの英字幅差で折り返さないように) */
  white-space: nowrap;
}

/* ==========================================================
   タブレット 541〜840
   ========================================================== */
@media (max-width: 840px) {
  .hero-row {
    left: -13px;
    right: -13px;
  }

  .hero-row--top {
    top: 13px;
  }

  .hero-row p {
    font-size: 45px;
  }

  .hero-row--top p {
    /* 600実測: 上段のみ自然高(63) */
    height: 63px;
  }

  .hero-photo {
    /* 600実測: 154x105 */
    width: 154px;
    height: 105px;
  }

  .thoughts-photo--1 {
    /* 原本実測: w=596固定、x=600→-188/768→-138/820→-122 (=0.3vw-368)。
       コンテンツ箱左端(16)基準のマージンにすると 30vw-384 */
    width: 596px;
    height: 400px;
    margin-left: calc(30vw - 384px);
  }

  .thoughts-photo--2 {
    /* 原本実測: w=393固定、右端=600→vw+119/768→vw+77/820→vw+64 (=269-0.25vw)。
       コンテンツ箱右端(vw-16)基準の負マージンにすると 25vw-285 (600で-135) */
    width: 393px;
    height: 300px;
    margin: -150px calc(25vw - 285px) 0 auto;
  }

  .thoughts-text {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .process-lead,
  .scene-lead {
    /* 541〜840帯の.usage-textと同じ(意図的変更) */
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.8px;
  }

  /* ≤840では横長画像から縦長トリミング表示に切替(measure_600/375実測 aspect≒0.727) */
  .process-image {
    aspect-ratio: 343 / 472;
    height: auto;
  }

  .carousel-track {
    gap: 32px;
  }

  .carousel-item {
    /* 原本実測: 541〜840はカード枠=画面幅の50%(600で300)、画像はその-32(268)。
       固定268pxだと600以外の実機幅(768/820等)でずれる */
    width: calc(50% - 32px);
  }

  .sec-lineup .heading {
    padding: 32px 0;
  }

  .sec-lineup .section-inner {
    padding: 40px 0 24px;
  }

  .sec-process .section-inner {
    padding: 143px 40px 64px;
  }

  .process-lead {
    margin: 38px auto 24px;
  }

  .sec-flow .section-inner {
    padding: 72px 16px;
  }

  .sec-profile .section-inner {
    padding: 72px 16px 1px;
  }

  .profile-divider {
    margin-top: 47px;
  }

  .sec-scene .section-inner {
    padding: 32px 16px 88px;
  }

  .sec-scenery .section-inner {
    padding: 46px 16px 32px;
  }

  .scenery-row {
    margin-top: 31px;
  }

  .usage-col {
    padding: 40px 32px;
  }

  .usage-title {
    font-size: 16px;
    /* 原本実測: fs16帯はls=0.8px(0.05em) */
    letter-spacing: 0.8px;
  }

  .usage-text {
    font-size: 16px;
    letter-spacing: 0.8px;
  }

  .faq-q-mark,
  .faq-q-text {
    font-size: 16px;
  }

  .faq-q-mark {
    /* fs16: 原本15.5px vs 代替17.5px */
    letter-spacing: -1px;
  }

  .faq-a p {
    font-size: 14px;
  }

  .contact-text,
  .contact-link {
    font-size: 14px;
    /* 原本ls0.7(0.05em)。URL59字の英字ランが27.5px広いため分散 */
    letter-spacing: 0.23px;
  }

  .contact-text {
    /* 原本実測: コンテンツ幅の80%・上限478(600→454/768→478/820→478) */
    width: 80%;
    max-width: 478px;
    margin-bottom: 40px;
    /* 原本実測: fs14帯はls=0.7px(0.05em) */
    letter-spacing: 0.7px;
  }

  .contact-latin {
    /* fs14帯の原本英字実測幅35.98pxに合わせる */
    letter-spacing: -0.34px;
  }

  .contact-link {
    /* 原本実測: コンテンツ幅の80%(600→454/768→589/820→630) */
    width: 80%;
  }

  .faq-list {
    /* 原本実測: 541〜840はコンテンツ幅いっぱい(768→736/820→788)。700上限は≥841のみ */
    max-width: none;
  }

  .contact-qr {
    margin-bottom: 72px;
  }

  .lineup-lead {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.8px;
    /* 14字×16.8=235.2 */
    width: 240px;
  }

  .scenery-row {
    flex-wrap: wrap;
    gap: 24px;
  }

  .scenery-photo {
    /* 原本実測(600/390/414/430): 幅は2列の流動(50%-12px)、高さは固定(541〜840=255、≤540=160)。
       以前のaspect-ratio(幅連動の高さ)は375/600ちょうど以外の実機幅で下のセクションを
       押し下げていた(430で+55px) */
    width: calc(50% - 12px);
    height: 255px;
    aspect-ratio: auto;
    max-width: none;
  }

  .scene-grid {
    /* 600/375の原本は端数行が左寄せ */
    justify-content: flex-start;
  }

  .scene-photo {
    /* 原本実測: 幅は2列の流動(50%-8px)、高さは固定(541〜840=249、≤540=134) */
    width: calc(50% - 8px);
    height: 249px;
    aspect-ratio: auto;
    max-width: none;
  }

  .profile-photo {
    width: 100%;
  }

  .profile-text {
    max-width: 100%;
  }

  .contact-text {
    margin-top: 32px;
    margin-bottom: 65px;
  }

  .contact-qr {
    margin-bottom: 80px;
  }

  .profile-en {
    font-size: 25px;
    line-height: 1.8;
    /* 原本ls1.25。英字ラン実測180.1 vs 197のため13字で分散 */
    letter-spacing: -0.05px;
    /* 600実測の箱幅204。英字が広い分は右へはみ出させる */
    width: 204px;
  }
}

/* ==========================================================
   タブレット帯のみ 541〜840 (お問い合わせ下余白は600実測=176)
   ========================================================== */
@media (min-width: 541px) and (max-width: 840px) {
  .sec-contact .section-inner {
    padding-bottom: 176px;
  }
}

/* ==========================================================
   モバイル ≤540
   ========================================================== */
@media (max-width: 540px) {
  .section-inner {
    padding: 72px 16px;
  }

  .heading {
    font-size: 20px;
    /* 原本実測: fs20帯はls=1px(0.05em) */
    letter-spacing: 1px;
  }

  .sec-faq .heading {
    /* fs20: 原本42.3px vs 代替(ls1px時)47.95px を3字で分散 */
    letter-spacing: -0.88px;
  }

  .hero-row {
    left: -12px;
    right: -12px;
  }

  .hero-row--top {
    top: 20px;
  }

  .hero-row p {
    font-size: 35px;
  }

  .hero-row--top p {
    /* 375では上段のみ自然高(49) */
    height: 49px;
  }

  .hero-photo {
    width: 122px;
    height: 83px;
  }

  .thoughts-photo--1 {
    /* 原本実測: x=-100固定、幅は375→428/414→463/430→477 (=0.9vw+90)、h=260 */
    width: calc(90vw + 90px);
    height: 260px;
    margin-left: calc(50% - 50vw - 100px);
  }

  .thoughts-photo--2 {
    /* 原本実測: 幅0.9vw+90(375で428)、右端はvw+101で一定(本文直下・右へ張り出し) */
    width: calc(90vw + 90px);
    height: 300px;
    margin: 0 -117px 0 auto;
  }

  .thoughts-text {
    font-size: 14px;
    letter-spacing: 0.7px;
    margin: -40px 0 0 calc(50% - 50vw);
  }

  .sec-thoughts .heading {
    width: 275px;
  }

  .usage-col {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 40px 0;
  }

  .usage-text {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .sec-usage .section-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .usage-col img {
    height: auto;
    aspect-ratio: 380 / 436;
  }

  .scenery-row {
    /* 375実測: 見出しから35px・格子間隔24 */
    margin-top: 35px;
    gap: 24px;
  }

  .scenery-photo {
    /* 原本実測: 幅は50%-12px(375で159.5≒160、430で187)、高さ160固定 */
    height: 160px;
  }

  .scene-grid {
    gap: 16px;
  }

  .scene-photo {
    /* 原本実測: 幅は50%-8px(375で163.5≒164、430で191)、高さ134固定 */
    height: 134px;
  }

  .carousel-track {
    gap: 16px;
  }

  .carousel-item {
    /* 原本実測(375/390/414/430): カード枠=画面幅の80%、画像はその-16(375で284、430で328) */
    width: calc(80% - 16px);
  }

  .sec-scenery .section-inner {
    padding: 51px 16px 72px;
  }

  .sec-flow .section-inner {
    padding: 72px 16px;
  }

  .sec-scene .section-inner {
    padding: 96px 16px;
  }

  .sec-profile .section-inner {
    padding: 72px 16px 0;
  }

  .profile-divider {
    margin-top: 24px;
  }

  .carousel-item p {
    font-size: 14px;
  }

  .faq-chevron {
    font-size: 18px;
    line-height: 18px;
  }

  .sec-cta .section-inner {
    padding: 24px 16px;
  }

  .faq-list {
    /* 原本実測: 上下余白なし・左右インセットはコンテンツ幅の5%(375で17、390で18、430で20) */
    margin: 0 5%;
    padding: 0;
  }

  .carousel-arrows {
    margin-top: 22px;
  }

  .carousel-arrow {
    /* 原本実測: ≤540のみ矢印ボタンは80×35(≥541は81×33)。アイコン16pxは共通 */
    width: 80px;
    height: 35px;
  }

  .contact-text {
    /* 原本実測: ≤540はコンテンツ幅いっぱい(375→343/430→398)。≤840の80%上書きを戻す */
    width: 100%;
    margin-bottom: 40px;
  }

  .contact-qr {
    margin-bottom: 72px;
  }

  .contact-link {
    /* 375では原本どおり2行に折り返す。1行目(…@872uhaux?)と2行目(oat_content=…)で代替フォントの字幅差の向きが逆なので行別にls補正。
       flexのままだとテキストと.link-tailが別アイテムになり折り返せないためblockに */
    display: block;
    white-space: normal;
    letter-spacing: 0.02px;
    /* 原本実測: ≤540はコンテンツ幅いっぱい(375→343/430→398) */
    width: 100%;
  }

  .contact-link .link-tail {
    letter-spacing: 0.5px;
  }

  .profile-body {
    flex-direction: column;
    align-items: center;
  }

  .profile-photo {
    width: 100%;
  }

  .sec-profile .heading {
    padding: 0 0 32px;
    width: 312px;
  }

  .profile-text {
    max-width: 100%;
    /* 縦flexではflex-basis:380pxが最小高さになってしまうため解除 */
    flex: 0 0 auto;
  }

  .profile-en {
    font-size: 20px;
    width: 168px;
    /* 原本ls1(0.05em)。英字ラン実測144.3 vs 157.65(ls1換算)のため13字で分散 */
    letter-spacing: -0.03px;
  }

  .profile-ja {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .profile-bio {
    font-size: 14px;
    letter-spacing: 0.7px;
    padding: 24px 0 0;
  }

  .lineup-lead {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.7px;
    width: 210px;
  }

  .process-lead,
  .scene-lead {
    /* ≤540帯の.usage-textと同じ(意図的変更) */
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.7px;
  }

  .title-latin {
    /* fs20: 原本全体312.4px vs 代替341.1px → 28.7pxを20字で分散 */
    letter-spacing: -0.435px;
  }

  .latin-caps {
    /* fs14帯の原本英字実測幅184.86pxに合わせる */
    letter-spacing: -0.31px;
  }

  .latin-year {
    letter-spacing: 0.99px;
  }

  .latin-num {
    letter-spacing: 0.92px;
  }

  .latin-lower {
    letter-spacing: -0.23px;
  }

  .latin-acr {
    letter-spacing: -0.45px;
  }

  .process-lead {
    /* 375実測: 見出し下43px・図版まで24px */
    margin: 43px auto 24px;
  }

  .sec-process .section-inner {
    padding: 99px 16px 88px;
  }
}

/* ================= 14. 出現アニメーション =================
   原本実測(全帯共通): 待機=opacity:0(見出し系は+blur(100px))、
   transition 1s ease-in-out、delayは要素別0.3s基準(d0=0/d4=0.4/d5=0.5)。
   要素上端がビューポート下端に達した瞬間に発火するone-shot。 */
.appear {
  opacity: 0;
  transition: opacity 1s ease-in-out 0.3s, filter 1s ease-in-out 0.3s, translate 1s ease-in-out 0.3s;
}

.appear--blur {
  filter: blur(100px);
}

.appear--d0 {
  transition-delay: 0s;
}

.appear--d4 {
  transition-delay: 0.4s;
}

.appear--d5 {
  transition-delay: 0.5s;
}

/* ヒーロー14文字の文字別遅延(原本実測: 品0/作・循0.3/生・を・、0.4/、・へ0.5/を0.6/想0.7/人・に0.8/い0.9/環1.0) */
.appear--d6 {
  transition-delay: 0.6s;
}

.appear--d7 {
  transition-delay: 0.7s;
}

.appear--d8 {
  transition-delay: 0.8s;
}

.appear--d9 {
  transition-delay: 0.9s;
}

.appear--d10 {
  transition-delay: 1s;
}

/* 原本実測: ぼかし無しの要素(本文・写真・流れ・FAQ・経歴・URL)はすべて20px下から浮き上がる。
   ぼかし付き(見出し・リード・ヒーロー文字)は位置固定でぼかしが晴れる */
.appear:not(.appear--blur) {
  translate: 0 20px;
}

.appear.appear-active {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
}