@charset "UTF-8";

/* =========================================================
   クラス名のルール
   - 「部品名__中の要素--種類違い」の書き方（BEM）で統一
   - is-〇〇 ：JavaScriptで付け外しする状態（開いている・選択中など）
   - u-〇〇  ：どの部品にも使える補助クラス
   - js-〇〇 ：JavaScriptで操作するための目印（見た目は付けない）
   スマホ基準で書き、768px以上でPC用に上書きする
   ========================================================= */

/* ---------- 変数 ---------- */
:root {
  --color-text: #000;
  --color-sub: #333;
  --color-bg: #fff;
  --color-line: #bdbdbd;
  --color-dark: #1f1f1f;
  --color-placeholder: #d9d9d9;
  /* 仮の画像枠 */
  --color-placeholder-dark: #9a9a9a;
  /* 白文字が乗る仮の画像枠 */
  --color-light: #f3f3f3;
  --color-muted: #c8c8c8;
  /* 商品画像の枠の背景の濃さ（1 で不透明、0 で完全に透明）。小さくするほど、後ろのページの背景が透ける */
  --product-bg-alpha: .5;
  --product-bg: linear-gradient(to bottom, rgba(191, 175, 157, var(--product-bg-alpha)) 0%, rgba(234, 234, 234, var(--product-bg-alpha)) 100%);
  /* ページの背景（ざらつきのある明るいグレー）。body と、コンテンツ全体の枠（page-body）の両方で使う */
  --page-bg:
    linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)),
    url("../img/bg-light.webp") 0 0 / 100% 100% no-repeat,
    url("../img/bg-grain.webp") 0 0 / 256px 256px repeat,
    #f2f2f2;
  --font-en: "League Spartan", "Noto Sans JP", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;

  --container: 1200px;
  --gutter: 18px;
  --section-space: 110px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-space: 200px;
  }
}

/* ---------- リセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure,
address {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* ---------- 基本 ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 仮の画像枠：中に img を入れると枠いっぱいに表示される */
.hero__img,
.ranking__img,
.about__img,
.products__img,
.category__link,
.newin__img,
.series__img,
.room__link,
.journal__img,
.instagram__link,
.showroom__map {
  display: block;
  background: var(--color-placeholder);
  overflow: hidden;
}

.hero__img img,
.ranking__img img,
.about__img img,
.products__img img,
.category__link img,
.newin__img img,
.series__img img,
.room__link img,
.journal__img img,
.instagram__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 共通の枠 ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  margin-top: var(--section-space);
  /* メニューのリンクなどで移動してきたとき、画面の上の端にくっつかないよう、止まる位置を下げる
     （SPは三本線ボタンの下あたり。PCはヘッダーのPC用の指定で、もっと大きい値に上書きしている） */
  scroll-margin-top: 60px;
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* 見出し：大きく見せる（本文の文字の約4倍）
   SPは画面の幅に合わせて大きさが変わる（幅の12.5%。幅375pxで約47px）
   小さすぎ・大きすぎにならないよう、40px〜60px の範囲に収める */
.section__title {
  margin-bottom: 13px;
  font-family: var(--font-en);
  font-size: 7.63vw;
  font-weight: 500;
  line-height: 1.2;
}

.section__more {
  font-family: var(--font-en);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .section__title {
    margin-bottom: 20px;
    font-size: 50px;
  }

  .section__more {
    font-size: 16px;
  }
}

/* 横スクロールの共通部品（Journal で使用） */
.scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* SPは画面の右端まではみ出して見せる */
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller>li {
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {

  /* PCはコンテンツ幅の中で切れて見せる */
  .scroller {
    margin-right: 0;
    padding-right: 0;
  }
}

/* 矢印ボタンの共通部品
   クラス名を arrow から slide-arrow に変更：共通フッター（common_new_footer）も arrow という
   クラス名を使っていて、この指定がフッターの見出しにまで効いてしまうため */
.slide-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

.slide-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.slide-arrow--next::before {
  transform: translateX(-3px) rotate(45deg);
}

.slide-arrow--prev::before {
  transform: translateX(3px) rotate(-135deg);
}

/* 黒いボタンの共通部品（マウスを乗せると白黒が反転する） */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 285px;
  max-width: 100%;
  height: 52px;
  margin: 36px auto 0;
  border: 1px solid #000;
  /* 反転したときに、白背景の上でもボタンの形が分かるように */
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 14px;
  transition: background .2s, color .2s;
}

.btn:hover {
  background: #fff;
  color: #000;
}

@media (min-width: 768px) {
  .btn {
    width: 415px;
    height: 76px;
    margin: 44px 0 0;
    font-size: 18px;
  }
}

/* リンクの右に付ける「>」（文字ではなく、CSSの線で描いた図形）
   正方形の上と右の辺だけに線を引き、45度回して「>」に見せている
   ・大きさ：width / height（文字の大きさに合わせて変わるよう em で指定）
   ・線の太さ：border の 1px　・色：文字と同じ色（currentColor） */
.section__more::after,
.btn::after,
.header__link--store::after {
  content: "";
  flex-shrink: 0;
  width: .45em;
  height: .45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}

/* Follow us・ONLINE STORE：文字のすぐ右に、文字の高さの中央にそろえて置く
   （.btn は横並びの指定（flex・gap）が元からあるので、位置の指定は不要） */
.section__more::after,
.header__link--store::after {
  display: inline-block;
  margin-left: .6em;
  vertical-align: middle;
}

@media (min-width: 768px) {
  /* PCだけ：リンクにマウスを乗せると「>」が右に動く */
  .section__more:hover::after,
  .btn:hover::after,
  .header__link--store:hover::after {
    transform: translateX(6px) rotate(45deg);
  }
}

/* PC・SPで表示を切り替える補助クラス（カンプで片方にしかない要素に使用） */
@media (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

/* 商品名と価格（Ranking・Signature products・New in で共通） */
/* 商品名：1行に収め、はみ出したら「…」で省略する
   ranking__type・newin__type：タイプ（シングル・2脚セットなど）を、商品名の下の行に分けて表示するため追加
   （タイプがある商品だけ、商品名・タイプ・シリーズ名と価格の3行になる） */
.ranking__name,
.ranking__type,
.products__name,
.newin__name,
.newin__type {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* シリーズ名と価格を1行に並べるため追加 */
.ranking__meta,
.products__meta,
.newin__meta {
  display: flex;
  gap: .4em;
}

/* 自動で入る価格は数字のみのため、先頭に「¥」を付ける */
.ranking__price::before,
.products__price::before,
.newin__price::before {
  content: "¥";
}

/* =========================================================
   ヘッダー
   ========================================================= */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
}

/* SP：三本線ボタン */
.header__toggle {
  position: fixed;
  top: 18px;
  right: 16px;
  z-index: 20;
  width: 38px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  mix-blend-mode: difference;
  /* 白い背景の上でも見えるように */
}

.header__toggle-line {
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  transition: transform .3s, opacity .3s;
}

/* メニューを開いている間と、メインビジュアルの画像の上にいる間（is-on-hero）は、
   色の差を使わず、白い線のままにする（is-on-hero は main.js で付け外しする） */
.header.is-open .header__toggle,
.header.is-on-hero .header__toggle {
  mix-blend-mode: normal;
}

.header.is-open .header__toggle-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header.is-open .header__toggle-line:nth-child(2) {
  opacity: 0;
}

.header.is-open .header__toggle-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.header__nav {
  position: fixed;
  inset: 0;
  z-index: 15;
  padding: 90px 32px 40px;
  background: rgba(0, 0, 0, .9);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.header.is-open .header__nav {
  opacity: 1;
  visibility: visible;
}

.header__list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  /* グループとグループの間 */
}

.header.is-open .header__list {
  opacity: 1;
}

.header__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header__link {
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 1.3;
}

/* header__group--store：SPのメニューでは、オンラインストアのグループを一番上に並べる
   （HTMLの順番は変えず、見た目の順番だけを入れ替える。PCでは元の順番に戻している） */
.header__group--store {
  order: -1;
}

/* header__link--store：オンラインストアへ戻るリンクだけ、下線を付けて区別するため追加 */
.header__link--store {
  margin-bottom: 20px; /* SP：下のグループとの間を、ほかのグループの間（36px）より、さらに広く空ける */
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (min-width: 768px) {
  .header {
    position: fixed;
    z-index: 10;
    mix-blend-mode: difference;
    pointer-events: none;
    transition: transform .3s;
    /* 隠す・出すときの動き */
  }

  /* 下にスクロールしている間（is-hidden）は、メニューを画面の上の外に隠す
     is-hidden は main.js で付け外しする（上にスクロールすると外れて、また表示される） */
  .header.is-hidden {
    transform: translateY(-100%);
  }

  /* キーボード操作でメニューの中に移動したときは、隠れていても表示する */
  .header.is-hidden:focus-within {
    transform: none;
  }

  /* メインビジュアルの画像の上にいる間（is-on-hero）は、色の差を使わず、白い文字のままにする
     is-on-hero は main.js で付け外しする（画像の上では白のほうが読みやすいため追加） */
  .header.is-on-hero {
    mix-blend-mode: normal;
  }

  /* メニューのリンクで移動したとき、見出しが固定メニューの下に重ならないよう、止まる位置を下げる */
  .section {
    scroll-margin-top: 150px;
  }

  .header__toggle {
    display: none;
  }

  /* PC：画面上部に4列で並べる */
  .header__nav {
    position: static;
    padding: 32px var(--gutter) 0;
    background: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }

  /* PC：オンラインストア以外の4つのグループを、左端から同じ間隔で並べる
     ・列は「グループ×4｜残りの幅」の5列。オンラインストアは最後の列に入れ、その中で右端に寄せている
     ・gap の2つ目の数値 … グループとグループの間。画面の幅に合わせて広がる
       （幅1280pxで約150px、1440pxで約190px、1700px以上で上限の300px）
       4つ目のグループとオンラインストアの間も、これと同じか、それより広くなる
     ・4つを右へ動かしたいときは、左右の余白（.header__nav の padding）ではなく、
       この .header__list に padding-left を足す */
  .header__list {
    display: grid;
    grid-template-columns: repeat(4, auto) 1fr;
    gap: 0 clamp(8px, calc(25vw - 170px), 300px);
  }

  .header__group {
    gap: 0;
  }

  .header__link {
    font-size: 20px;
    line-height: 1.55;
    transition: opacity .2s;
    pointer-events: auto;
    /* メニューの文字は押せるように戻す */
    white-space: nowrap;
    /* 列が増えて幅が狭くなっても、項目の途中で折り返さないようにする */
  }

  .header__link:hover {
    opacity: .6;
  }

  /* PC：オンラインストアのグループは、HTMLの順番どおり一番右に置く */
  .header__group--store {
    order: 0;
  }

  /* PC：オンラインストアのグループは、HTMLの順番どおり一番右に置く */
  .header__group--store {
    order: 0;
  }

  /* PC：オンラインストアへ戻るリンクを、右の余白の列の中で右端に寄せる */
  .header__link--store {
    margin-bottom: 0;
    margin-left: auto;
  }
}

/* =========================================================
   メインビジュアル
   ========================================================= */
/* メインビジュアルは画面の上に固定し（sticky）、スクロールすると、後ろのコンテンツ（page-body）が上にかぶさってくる */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  color: #fff;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  background: #1a1a1a;
}

.hero__title {
  position: absolute;
  top: 42%;
  left: 0;
  width: 100%;
}

/* ロゴ画像を画面幅いっぱいに表示するため追加 */
.hero__logo {
  width: 100%;
  height: auto;
}

/* 背景画像を枠いっぱいに広げるため（中の img は既存の .hero__img img で指定済み） */
.hero__img picture {
  display: block;
  height: 100%;
}

@media (min-width: 768px) {
  /* PCもSPと同じく画面の高さいっぱい（高さの指定は上の .hero を使用） */

  /* 画面が狭いときにメニューと重ならないよう、最低140pxは下げる */
  .hero__title {
    top: 230px;
  }
}

/* page-body：メインビジュアルより後ろのコンテンツ全体をまとめる枠
   （後ろに固定したメインビジュアルの上に、背景ごとかぶせて見せるため追加）
   ・position: relative … 固定したメインビジュアルより手前に重ねる
   ・background … 枠の後ろのメインビジュアルが透けないよう、ページと同じ背景を敷く
   ・display: flow-root … 中の最初と最後の余白を、枠の外に出さず、背景の内側に収める */
.page-body {
  position: relative;
  display: flow-root;
  background: var(--page-bg);
}

/* =========================================================
   Keywords
   ========================================================= */
.section--keywords {
  margin-top: 36px;
}

/* SP：横4列に並べ、4つに満たない行は中央に寄せる */
.keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 6px;
}

/* タグ1つ分の幅：全体の幅から、間の余白（6px × 3か所）を引いて4等分する */
.keywords>li {
  width: calc((100% - 6px * 3) / 4);
}

.keywords__tag {
  padding-top: .3em;
  /* 英字フォントの下側の余白で上に寄って見えるため、見た目の中央に補正 */
  display: grid;
  place-items: center;
  width: 100%;
  height: 34px;
  border: 1px solid var(--color-line);
  font-family: var(--font-en);
  font-size: 13px;
  line-height: 1;
  transition: background .2s;
  background: #fff;
  /* 背景のざらつきが透けないよう白を敷く */
}

.keywords__tag:hover {
  background: var(--color-light);
}

@media (min-width: 768px) {
  .section--keywords {
    margin-top: 90px;
  }

  /* 画面が狭いときは自動で折り返す */
  .keywords {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 11px;
  }

  .keywords__tag {
    width: 100%;
    height: 36px;
    font-size: 16px;
  }

  .keywords>li {
    width: auto;
  }
}

/* =========================================================
   Ranking
   ========================================================= */
.ranking {
  /* SPは画面の左右の端まで広げ（margin）、同じ幅だけ内側に余白を取る（padding）
     ・最初と最後は、左右に余白（--gutter）が空く
     ・送っている途中のカードは、余白の部分にも見えるので、画面の端で切れて見える */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}

/* Swiperが読み込めなかったときも、横スクロールで見られるようにする */
.ranking:not(.swiper-initialized) {
  overflow-x: auto;
}

.ranking__list {
  display: flex;
}

/* 動かしたときに線がずれないよう、枠線は1枚ずつに付ける */
.ranking__item {
  flex-shrink: 0;
  width: 167px;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  border-left: 1px solid #555;
}

/* 1位は左側の上下、最後の順位は右側の上下だけ角を丸くする（並び全体で1つの角丸の枠に見せるため）
   overflow: hidden は、中の白い帯（ranking__body）の角が丸い枠からはみ出さないようにするため */
.ranking__item:first-child {
  border-radius: 1.4vw 0 0 1.4vw;
  overflow: hidden;
}

.ranking__item:last-child {
  border-right: 1px solid #555;
  border-radius: 0 1.4vw 1.4vw 0;
  overflow: hidden;
}

/* カードの高さを、並びの中で一番高いカードにそろえる
   （タイプの行があるカードだけ3行になるため。そろえないと、枠線の下の端がガタガタになる）
   ・ranking__item … Swiperが付ける「高さ100%」を外し、並びの高さいっぱいに伸ばす
   ・ranking__link・ranking__body … 伸びた分を、下の白い帯（ranking__body）に回す */
.ranking__item {
  display: flex;
  flex-direction: column;
  height: auto;
}

.ranking__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ranking__body {
  flex: 1;
}

.ranking__img {
  aspect-ratio: 400 / 440;
  background: transparent;
}

.ranking__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 12px;
  background: #fff;
}

.ranking__num {
  font-family: var(--font-en);
  font-size: 24px;
  line-height: 1;
}

.ranking__text {
  min-width: 0;
  /* 横並びの中で幅を縮められるようにし、商品名の省略を効かせる */
  font-size: 12px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .ranking {
    margin: 0;
    padding: 0;
  }

  .ranking__item {
    width: 276px;
  }

  /* PCは角丸を小さくする（画面の幅の1%） */
  .ranking__item:first-child {
    border-radius: .5vw 0 0 .5vw;
  }

  .ranking__item:last-child {
    border-radius: 0 .5vw .5vw 0;
  }

  .ranking__body {
    justify-content: center;
    gap: 16px;
    padding: 16px 12px 20px;
  }

  .ranking__num {
    font-size: 40px;
  }

  .ranking__text {
    font-size: 12px;
  }
}

/* =========================================================
   About us
   ========================================================= */
.about__label {
  font-family: var(--font-en);
  font-size: 12px;
}

.about__title {
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
}

.about__sub {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .03em;
}

.about__inner {
  margin-top: 30px;
}

.about__img {
  aspect-ratio: 16 / 9;
}

.about__body {
  padding: 24px var(--gutter) 0;
}

.about__catch {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.about__text {
  font-size: 12px;
  line-height: 2;
}

.about__text+.about__text {
  margin-top: 1.8em;
}

@media (min-width: 768px) {
  .about__label {
    font-size: 16px;
  }

  .about__title {
    font-size: 66px;
  }

  .about__sub {
    font-size: 20px;
  }

  .about__inner {
    display: flex;
    align-items: flex-start;
    margin-top: 66px;
  }

  .about__img {
    flex-shrink: 0;
    width: 52.5%;
    border-radius: 0 .5vw .5vw 0;
    /* PCだけ、右上・右下を角丸にする（左側は画面の端に付いているため付けない） */
  }

  .about__body {
    padding: 93px var(--gutter) 0 3.5%;
  }

  .about__catch {
    margin-bottom: 93px;
    font-size: 22px;
  }

  .about__text {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* =========================================================
   Signature products
   ========================================================= */
/* Swiperで動かす（設定は main.js。カード同士の間隔もSwiper側で指定） */
.products {
  /* SPは画面の左右の端まで広げ（margin）、同じ幅だけ内側に余白を取る（padding）
     ・最初と最後は、左右に余白（--gutter）が空く
     ・送っている途中のカードは、余白の部分にも見えるので、画面の端で切れて見える */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}

/* Swiperが読み込めなかったときも、横スクロールで見られるようにする */
.products:not(.swiper-initialized) {
  overflow-x: auto;
}

.products:not(.swiper-initialized) .products__list {
  gap: 12px;
}

.products__list {
  display: flex;
}

.products__item {
  flex-shrink: 0;
  width: 300px;
}

.products__img {
  aspect-ratio: 300 / 256;
  background: var(--product-bg);
  border-radius: 1.4vw;
  /* 角丸（画面の幅の2%。幅393pxで約8px、幅1440pxで約29px） */
}

/* 背景が透明な商品画像のため、切らずに全体を枠の中に収める */
/* 画像の端で切れている影や背景の境目を目立たせないよう、左右の端をぼかす */
.products__img img {
  width: auto;
  /* 画像の要素を絵と同じ幅にし、ぼかしを絵の端にかける */
  margin: 0 auto;
  /* 枠の中で左右中央に置く */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.products__text {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
}

@media (min-width: 768px) {

  .products {
    margin: 0;
    padding: 0;
  }

  .products:not(.swiper-initialized) .products__list {
    gap: 26px;
  }

  .products__item {
    width: 722px;
  }

  .products__img {
    aspect-ratio: 444 / 293;
    border-radius: .5vw;
    /* PCは角丸を小さくする（画面の幅の1%。幅1440pxで約14px） */
  }

  .products__text {
    margin-top: 44px;
    font-size: 15px;
  }
}

/* =========================================================
   Category
   ========================================================= */
.category__link {
  position: relative;
  height: 100%;
}

/* 背景の画像に合わせて文字の色が変わるよう、白文字を下の色と重ね合わせる（差の絶対値） */
.category__name {
  position: absolute;
  top: 12px;
  left: 16px;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, .35);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

/* 画像が入るまで、上段2枚の境目が分かるように仮枠の色を変える */
.category__item--large+.category__item--large .category__link {
  background: #cfcfcf;
}

.category__main {
  display: flex;
  flex-direction: column;
}

/* 上段：画像（1200×600／2:1）と同じ比率。PC・SP共通 */
.category__item--large {
  aspect-ratio: 2 / 1;
}

.category__item--large .category__name {
  top: 20px;
  left: 26px;
  font-size: 16px;
}

.category__sub {
  position: relative;
}

/* 下段：Swiperで動かす（設定は main.js） */
/* Swiperが読み込めなかったときも、横スクロールで見られるようにする */
.category__slider:not(.swiper-initialized) {
  overflow-x: auto;
}

.category__list {
  display: flex;
}

/* 下段：画像（600×600／1:1）と同じ比率。PC・SP共通 */
.category__list .category__item {
  flex-shrink: 0;
  width: 41%;
  aspect-ratio: 1 / 1;
}

/* 矢印もカテゴリ名と同じく、背景に合わせて色が変わるようにする */
.category__arrow {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 2;
  /* Swiperの画像より手前に表示する */
  color: #fff;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4));
  transform: translateY(-50%);
  transition: opacity .2s, visibility .2s;
}

/* 左矢印：右矢印と左右対称に置くため追加 */
.category__arrow--prev {
  right: auto;
  left: 4px;
}

/* 端まで行って使えなくなった矢印は消す（Swiperが自動で付ける目印を利用） */
.category__arrow.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 768px) {
  .category {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
    width: calc(100% - var(--gutter) * 2);
  }

  .category__main {
    flex-direction: row;
    gap: 6px;
    margin-bottom: 6px;
  }

  .category__item--large {
    flex: 1;
  }

  .category__item--large .category__name {
    top: 18px;
    left: 22px;
    font-size: 25px;
  }

  .category__list .category__item {
    width: 27%;
  }

  /* PCだけ角丸にする（画面の幅の0.8%）
     ・上段の2枚：四隅すべて
     ・下段：いちばん左の1枚は左側の上下、いちばん右の1枚は右側の上下だけ */
  .category__item--large .category__link {
    border-radius: .5vw;
  }

  .category__list .category__item:first-child .category__link {
    border-radius: .5vw 0 0 .5vw;
  }

  .category__list .category__item:last-child .category__link {
    border-radius: 0 .5vw .5vw 0;
  }

  .category__name {
    top: 18px;
    left: 22px;
    font-size: 25px;
  }

  .category__arrow {
    right: 8px;
  }

  .category__arrow--prev {
    right: auto;
    left: 8px;
  }
}

/* 枠の外に矢印を置く余白がある画面幅のときだけ、外側に出す */
@media (min-width: 1360px) {
  .category__arrow {
    right: -60px;
    color: #1a1a1a;
    filter: none;
  }

  .category__arrow--prev {
    right: auto;
    left: -60px;
  }
}

/* =========================================================
   New in
   ========================================================= */
/* Swiperで動かす（設定は main.js。カード同士の間隔もSwiper側で指定） */
.newin {
  /* SPは画面の左右の端まで広げ（margin）、同じ幅だけ内側に余白を取る（padding）
     ・最初と最後は、左右に余白（--gutter）が空く
     ・送っている途中のカードは、余白の部分にも見えるので、画面の端で切れて見える */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}

/* Swiperが読み込めなかったときも、横スクロールで見られるようにする */
.newin:not(.swiper-initialized) {
  overflow-x: auto;
}

.newin:not(.swiper-initialized) .newin__list {
  gap: 6px;
}

.newin__list {
  display: flex;
}

.newin__item {
  flex-shrink: 0;
  width: 150px;
}

/* 画像（400×440）と同じ比率にして、ぴったり収める */
.newin__img {
  aspect-ratio: 400 / 440;
  background: transparent;
}

.newin__img img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.newin__text {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.newin__meta {
  justify-content: center;
}

@media (min-width: 768px) {

  .newin {
    margin: 0;
    padding: 0;
  }

  .newin:not(.swiper-initialized) .newin__list {
    gap: 11px;
  }

  .newin__item {
    width: 216px;
  }

  .newin__text {
    margin-top: 21px;
    font-size: 12px;
  }
}

/* =========================================================
   Series
   ========================================================= */
/* SP：名前を3つずつの2行にして、左にそろえて大きく見せる（デザインカンプと同じ並べ方）
   （折り返し位置は、HTMLの series__break で決めている）
   ・名前と名前の間は広げない（上の行も下の行も、同じ column-gap の間隔になる）
   ・左右の余白（.container の余白）は、同じ幅のマイナスの余白で打ち消す
   ・左端は、文字が画面の端に付かないよう、少しだけ空ける（padding-left）
   ・文字の大きさは font-size の数値（画面の幅に対する%）で調整する
     長いほうの行（Hurst, Palu, Muun）が、画面の幅にちょうど収まる手前の大きさにしておく
     （大きくしすぎると、3つ目の名前が次の行に落ちる）
   ・行間は line-height で調整する（数値を小さくすると詰まる） */
.series__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 calc(var(--gutter) * -1);
  padding-left: 1vw;
  font-family: var(--font-en);
  font-size: 13.6vw;
  font-weight: 500;
  line-height: .95;
  /* column-gap: .1em; */
}

/* 2行目の折り返し位置を作るための空要素 */
.series__break {
  flex-basis: 100%;
  height: 0;
}

.series__name {
  display: block;
  /* 文字を動かすための枠（reveal-line）を中に入れても、行の高さが変わらないようにする */
  color: var(--color-muted);
  transition: color .2s;
}

.series__name.is-active,
.series__name:hover {
  color: var(--color-text);
}

/* 画像の切り替えはSwiperで行う（設定は main.js） */
.series__visual {
  position: relative;
  margin-top: 0px;
  overflow: hidden;
  /* Swiperが読み込めなかったときも、1枚目だけを表示する */
}

.series__list {
  display: flex;
}

/* series__item：「商品を見る」ボタンを各画像の右下に置くための基準にするため追加 */
.series__item {
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

/* 画像（1680×720／21:9）と同じ比率にして、PC・SPとも切れずに収める */
.series__img {
  aspect-ratio: 2 / 1;
  background: var(--color-placeholder-dark);
}

.series__link {
  display: block;
}

.series__btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 14px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4));
  transition: background .2s;
}

/* ボタン右の小さな三角 */
.series__btn::after {
  content: "";
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid currentColor;
}

.series__link:hover .series__btn {
  background: rgba(255, 255, 255, .2);
}

@media (min-width: 768px) {

  /* PCは広げずに、中央にまとめる（左右の余白も打ち消さない） */
  .series__names {
    justify-content: center;
    margin: 0;
    font-size: 60px;
    line-height: 1.2;
      column-gap: .1em;
  }

  .series__visual {
    margin-top: 53px;
  }

  .series__img {
    aspect-ratio: 16 / 5;
  }

  .series__btn {
    right: max(var(--gutter), calc((100% - var(--container)) / 2 - 60px));
    bottom: 40px;
    gap: 12px;
    padding: 10px 26px 10px 32px;
    font-size: 16px;
  }

  .series__btn::after {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 7px;
  }
}

/* =========================================================
   Shop the ROOM
   ========================================================= */
.room {
  /* 100cqw ＝ この枠の横幅（中の要素の幅計算を枠基準にするため） */
  container-type: inline-size;
  --slide-w: 84cqw;
  --side: calc((100cqw - var(--slide-w)) / 2);
  position: relative;
}

.room__list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* 真ん中の1枚を中央に置き、左右の画像を少しのぞかせる */
  padding: 0 var(--side);
  scroll-padding: 0 var(--side);
}

.room__list::-webkit-scrollbar {
  display: none;
}

.room__item {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  aspect-ratio: 328 / 195;
}

.room__item:nth-child(even) .room__link {
  background: #cfcfcf;
}

.room__link {
  height: 100%;
}

.room__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.room__arrow--prev {
  left: var(--side);
}

.room__arrow--next {
  right: var(--side);
}

@media (min-width: 768px) {
  .room {
    --slide-w: min(1200px, calc(100cqw - 160px));
  }

  .room__item {
    aspect-ratio: 1192 / 590;
  }

  .room__arrow--prev {
    left: calc(var(--side) + 8px);
  }

  .room__arrow--next {
    right: calc(var(--side) + 8px);
  }
}

/* =========================================================
   Journal
   ========================================================= */
.journal {
  gap: 24px;
}

.journal__item {
  width: 266px;
}

.journal__img {
  aspect-ratio: 266 / 313;
}

.journal__title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.journal__text {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .journal {
    gap: 40px;
  }

  .journal__item {
    width: 345px;
  }

  .journal__img {
    aspect-ratio: 345 / 406;
  }

  .journal__title {
    margin-top: 21px;
    font-size: 15px;
  }

  .journal__text {
    font-size: 12px;
    line-height: 1.8;
  }
}

/* =========================================================
   Instagram
   ========================================================= */
/* 大きな文字が画面幅を超えても横揺れしないように */
.instagram {
  overflow: hidden;
}

.instagram .section__head {
  margin-bottom: 0;
}

.instagram__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.instagram__item {
  aspect-ratio: 114 / 134;
}

.instagram__link {
  height: 100%;
}

.instagram__item:nth-child(3n+2) .instagram__link {
  background: #cfcfcf;
}

/* アカウント名の大きな文字（装飾のため読み上げ対象外）
   文字の大きさは --account-size の数値（画面幅に対する%）で調整する。
   1行目が画面幅の97〜98%に収まるくらいが目安
   （ぴったり100%だと、Windowsではスクロールバーの分だけ右端が切れることがあるため） */
.instagram__account {
  --account-size: 15.4vw; /* SP：1行目「signaturestudio」の大きさ */
  display: block; /* リンク（a）にしたため、段落のときと同じく横幅いっぱいの箱として扱う */
  position: relative;
  margin-top: -8px;
  font-family: var(--font-en);
  font-size: var(--account-size);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-align: center;
  padding-bottom: .15em;
}

/* 「.official」：Libre Caslon Text のイタリック */
.instagram__account-sub {
  display: block;
  font-family: "Libre Caslon Text", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-align: right;
  padding-right: .15em;
}

@media (min-width: 768px) {
  .instagram__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .instagram__item {
    aspect-ratio: 175 / 207;
  }

  .instagram__account {
    --account-size: 9.7vw;
    /* PC：1行「signaturestudio.official」の大きさ */
  }


  .instagram__account-sub {
    display: inline;
  }
}

/* =========================================================
   Instagram：Yotpoのギャラリーの見た目の調整
   Yotpoは自分のCSSを、このCSSより後から読み込むため、
   同じ強さの指定ではYotpoが勝ってしまう。
   そのため、すべての指定の先頭に .instagram .yotpo-pictures-widget を付けて
   Yotpoの指定より強くし、Yotpo側の指定とぶつかる箇所にだけ !important を使う
   ========================================================= */

/* タイトルと「もっと見る」は使わない（Yotpoの設定で消せなかった場合の予備） */
.instagram .yotpo-pictures-widget .yotpo-pictures-gallery-header-wrapper,
.instagram .yotpo-pictures-widget .yotpo-load-more-button {
  display: none !important;
}

/* 並べ方：SPは3列
   ・列の幅は minmax(0, 1fr) … 中身の大きさに関係なく、枠の幅をぴったり3等分する
     （1fr だけだと、中の要素が広いときに列が広がり、右端の列が枠からはみ出して切れる）
   ・width / max-width / margin / padding … Yotpoが付ける「枠より広い幅」や「左右の余白」を打ち消し、
     並び全体を枠の幅に収める（右端の列が切れるのを防ぐため） */
.instagram .yotpo-pictures-widget .yotpo-pictures-gallery-images-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.instagram .yotpo-pictures-widget .yotpo-single-image-container {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
}

/* Yotpoは、並びの各マスの前に「正方形の高さを作るための見えない要素（::before）」を入れている。
   4:5の高さは画像の枠で作っているので、この見えない要素は使わない（残すと上に正方形分の余白ができる） */
.instagram .yotpo-pictures-widget .yotpo-single-image-container::before {
  display: none !important;
}

/* SPは9枚まで表示（10枚目以降は隠す） */
.instagram .yotpo-pictures-widget .yotpo-single-image-container:nth-of-type(n+10) {
  display: none !important;
}

/* 読み込み中の表示が、画像の並びの1マスを使わないようにする */
.instagram .yotpo-pictures-widget .yotpo-preloader-wrapper {
  grid-column: 1 / -1;
}

/* 画像の枠：投稿に合わせて縦横比4:5 */
.instagram .yotpo-pictures-widget .yotpo-single-image-container .y-image-wrapper {
  position: relative;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* 画像：枠いっぱいに広げ、はみ出た部分は切る
   （Yotpoが画像に付ける yotpo-image-wide / yotpo-image-tall の !important より強くする） */
.instagram .yotpo-pictures-widget .yotpo-single-image-container img.yotpo-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  transform: none !important;
}

@media (min-width: 768px) {

  /* 並べ方：PCは4列（列の幅の考え方はSPと同じ） */
  .instagram .yotpo-pictures-widget .yotpo-pictures-gallery-images-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  /* PCは8枚まで表示（9枚目以降は隠す） */
  .instagram .yotpo-pictures-widget .yotpo-single-image-container:nth-of-type(n+9) {
    display: none !important;
  }
}

/* =========================================================
   Show Room
   ========================================================= */
.showroom__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 357 / 91;
  background: var(--color-dark);
  color: #fff;
  border-radius: 1.4vw;
  /* 角丸（SPは画面の幅の2%） */
}

.showroom__open {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .02em;
}

.showroom__access {
  margin-top: 30px;
}

.showroom__heading {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.showroom__address {
  font-size: 13px;
  line-height: 1.5;
}

.showroom__map {
  margin-top: 14px;
  aspect-ratio: 357 / 154;
  border-radius: 1.4vw;
  /* 角丸（SPは画面の幅の2%）。中の地図は、枠の overflow: hidden で角に沿って切れる */
}

.showroom__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 予約ボタン：共通の .btn はPCで左寄せのため、PC・SPとも中央にそろえる指定を追加 */
.showroom__reserve {
  margin: 24px auto 0;
}

/* 問い合わせ先：ショールームの住所のすぐ下に、住所と同じ見た目で置くため追加 */
.showroom__contact {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  margin-top: .5em;
  /* 住所と問い合わせ先の間を少し空ける */
  font-size: 13px;
  line-height: 1.8;
}

/* 項目（TEL・MAIL）の途中では改行せず、入りきらないときは項目ごとに次の行へ送る */
.showroom__contact-item {
  white-space: nowrap;
}

.showroom__contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.showroom__contact a:hover {
  text-decoration: none;
}

@media (min-width: 768px) {
  .showroom__visual {
    aspect-ratio: 736 / 222;
    border-radius: .5vw;
    /* PCは角丸を小さくする（画面の幅の1%） */
  }

  .showroom__open {
    font-size: 33px;
  }

  .showroom__access {
    margin-top: 64px;
  }

  .showroom__heading {
    margin-bottom: 13px;
    font-size: 21px;
  }

  .showroom__address {
    font-size: 16px;
  }

  .showroom__map {
    margin-top: 21px;
    aspect-ratio: 2 / 1;
    border-radius: .5vw;
    /* PCは角丸を小さくする（画面の幅の1%） */
  }

  .showroom__reserve {
    margin: 44px auto 0;
  }

  .showroom__contact {
    font-size: 16px;
  }
}

/* =========================================================
   For Business
   ========================================================= */
.business__text {
  font-size: 13px;
  line-height: 1.7;
}

.business__list {
  margin-top: 1.7em;
  font-size: 13px;
  line-height: 1.7;
}

@media (min-width: 768px) {

  .business__text,
  .business__list {
    font-size: 18px;
  }
}

/* =========================================================
   Trust
   ========================================================= */
.trust__title {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.trust__list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 50px;
  margin-bottom: 80px;
}

/* SP：見出し｜本文 の横並び
   列の幅は「見出し 1 ： 縦線 ： 本文 2」。見出しは短い英単語なので列を狭くし、縦線を左に寄せて、
   見出しから縦線までと、縦線から本文までの空きが近くなるようにしている（本文の列も広がり、折り返しが減る） */
.trust__item {
  display: grid;
  grid-template-columns: 1fr 1px 2fr;
  align-items: center;
  column-gap: 36px;
}

.trust__item::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 32px;
  background: #666;
}

.trust__heading {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 500;
}

.trust__text {
  grid-column: 3;
  grid-row: 1;
  font-size: 12px;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .trust__title {
    font-size: 53px;
  }

  .trust__list {
    flex-direction: row;
    justify-content: space-between;
    gap: 26px;
    margin-top: 107px;
    margin-bottom: 266px;
  }

  /* PC：見出し・短い線・本文 の縦並び */
  .trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
  }

  .trust__item::before {
    order: 2;
    width: 58px;
    height: 1px;
    margin: 29px 0 51px;
  }

  .trust__heading {
    order: 1;
    font-size: 31px;
  }

  /* 文字の大きさは画面の幅に合わせて変える（幅768pxで12px、幅1032px以上で16px）
     3列の幅が狭いタブレットでも、いちばん長い行（17文字）が1行に収まるようにするため */
  .trust__text {
    order: 3;
    font-size: clamp(12px, 1.55vw, 16px);
  }
}

/* =========================================================
   スクロールで表示（「画像の枠」が、ふわっと浮き上がる）
   対象：About us・Signature products・Series の画像の枠
   is-reveal ／ is-visible ／ is-loaded は main.js で付け外しする
   ・is-reveal ：JavaScriptが動いたときだけ付く（隠す合図）
   ・is-visible：js-reveal を付けた要素が画面に入ったら付く
   ・is-loaded ：枠の中の画像の読み込みが終わったら付く
                （読み込み前に枠の灰色だけが先に見えるのを防ぐため追加）
   「画面に入った」と「画像の読み込みが終わった」の両方がそろったときに表示する
   ※ほかのセクションに付けるときは、画像のすぐ外側の枠に js-reveal を付け、
     下の2か所の一覧と、main.js の画像の枠の一覧に、画像の枠のクラス名を足す
   ・動きの速さの変化：ゆっくり動き出し、最後にゆっくり止まる（ease）
   ・時間：transition の 1s
   ・浮き上がる距離：translateY の 48px
   ========================================================= */
.about__img.is-reveal,
.is-reveal .products__img,
.is-reveal .series__img {
  opacity: 0;
  transform: translateY(48px);
}

/* 動きは「表示するとき」だけに付ける（隠すときに動くと、ページを開いた直後に一瞬見えてから消えるため） */
.about__img.is-reveal.is-visible.is-loaded,
.is-reveal.is-visible .products__img.is-loaded,
.is-reveal.is-visible .series__img.is-loaded {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease, transform 1s ease;
}

/* =========================================================
   文字を1行ずつ、下から持ち上げるように表示
   対象：About us の文章・Series の名前・Instagram の大きな文字（signaturestudio.official）
   reveal-line ／ reveal-line__inner は main.js で自動で付ける
   ・行の外枠（reveal-line）：はみ出した部分を隠す「見えない枠」
   ・行の中身（reveal-line__inner）：この枠の中で、下から上へ動く
   ・行ごとの遅れ：main.js で 0.08秒ずつ（--line-delay）
     Series は、同じ行に並んでいる名前を同時に動かす
   ・時間：transition の 0.7s
   ========================================================= */
.reveal-line {
  display: block;
  overflow: hidden;
  /* 「g」など下に伸びる文字が枠で切れないよう、下に少し余白を取り、その分を詰めて見た目の位置を保つ */
  padding-bottom: .15em;
  margin-bottom: -.15em;
}

.reveal-line__inner {
  display: block;
}

.is-reveal .reveal-line__inner {
  transform: translateY(120%);
}

/* ---------- 行間を詰めた大きな文字（Series の名前・Instagram の大きな文字） ----------
   行の高さを詰めているため、行の外枠のままだと文字の上が切れてしまう。
   そのため、枠の位置や大きさを変えずに「見える範囲」だけを切り取る方法（clip-path）にしている
   ・上は .3em、下は .15em、枠より広く見せる（文字の上下が切れないようにするため）
   ・左右は 1em 広く見せる（斜めの文字の端が切れないようにするため） */
.series__name .reveal-line,
.instagram__account .reveal-line {
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
  -webkit-clip-path: inset(-.3em -1em -.15em -1em);
  clip-path: inset(-.3em -1em -.15em -1em);
}

/* 見える範囲を広げたぶん、隠すときに下げる距離も大きくする（動く前に文字の先が見えないようにするため） */
.series__names.is-reveal .reveal-line__inner,
.instagram__account.is-reveal .reveal-line__inner {
  transform: translateY(150%);
}

@media (min-width: 768px) {

  /* PC：signaturestudio.official は動かさず、最初から表示する（1行ずつの表示はSPだけ）
     文字の位置がずれないよう、動かすための枠は「ただの文字」と同じ扱いに戻す */
  .instagram__account .reveal-line,
  .instagram__account .reveal-line__inner {
    display: inline;
  }

  .instagram__account .reveal-line {
    -webkit-clip-path: none;
    clip-path: none;
  }

  .instagram__account.is-reveal .reveal-line__inner {
    transform: none;
  }
}

/* 表示するとき（上の「隠すとき」の指定より後ろに書く） */
.is-reveal.is-visible .reveal-line__inner {
  transform: none;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--line-delay, 0s);
}

/* ---------- 動きを減らす設定の人向け ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   共通フッターのCSS対策
   共通フッター（common_new_footer）と一緒に、サイト共通のSP用CSS（sp_style.css。幅600px以下で有効）が
   このCSSより後に読み込まれる。そのCSSは「*」「a」「body」「h1〜h5」「nav」のようにタグ名だけで
   書かれた指定を持っていて、LPの文字にも効いてしまうため、LPの範囲（header と main）だけ元に戻す。
   ・フッターには効かないよう、すべて header と main の中に限定している
   ・クラスで付けた指定のほうが優先されるよう、ここではタグ名だけで書いている（クラス名は使わない）
   ========================================================= */

/* 文字の土台：body に書いた内容が上書きされるため、LPの範囲に同じ内容を直接付ける */
header,
main {
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: normal;
}

main {
  color: var(--color-text);
}

/* 書体：すべての要素に書体が直接付けられ、親の書体を引き継がなくなるため、引き継ぐ形に戻す */
body header *,
body main * {
  font-family: inherit;
}

/* リンクの色：a に色が直接付けられるため、親の色を引き継ぐ形に戻す
   （マウスを乗せたとき・タップした直後の色も同じように戻す。
     リンクにクラスで色を付けるときは、.btn のように :hover の色も一緒に書くこと） */
body header a,
body main a,
body header a:hover,
body main a:hover {
  color: inherit;
}

/* 見出し：h1〜h5 に付けられる色・字間・行間・文字の寄せ・太さを戻す */
body main h1,
body main h2,
body main h3 {
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  font-weight: bold;
}

/* メニュー：nav に付けられる下の余白を消す */
body header nav {
  margin-bottom: 0;
}