@charset "UTF-8";

/* ============================================================
   フォント差し替え用
   ------------------------------------------------------------
   指定フォントが決まったら、下記 @font-face を有効化し
   --font-primary の先頭にフォント名を追加してください。
   ============================================================ */

@font-face {
  font-family: "SiteFont";
  src: url("../fonts/SiteFont.woff2") format("woff2"),
       url("../fonts/SiteFont.woff")  format("woff");
  font-weight: 400;
  font-display: swap;
}


:root {
  /* ---- フォント（★ここを差し替え） ---- */
  --font-primary: adobe-jenson-pro-subhead, serif;
  /* ---- カラー ---- */
  --color-slider-bg: #89805d;   /* スライドコンテンツ背景色 */
  --color-gate-bg:   #89805d;   /* パスワードセクション背景色 */
  --color-content-bg: #89805d;  /* ランディング背景色（テクスチャ画像を敷く場合は .lp で指定） */
  --color-content-text: #040000;/* ランディングの文字色（濃い墨〜こげ茶） */
  --color-content-line: rgba(42, 40, 28, 0.55); /* 罫線・ボーダー色 */

  /* ---- アニメーション時間（JS 側 main.js の定数と揃えています） ---- */
  --bg-fade-duration:    3s;    /* 背景フェードイン */
  --logo-fade-duration:  3s;    /* ロゴの滲み出し / 消え（逆再生） */
  --content-fade-duration: 1.2s;/* スライドコンテンツの表示 */
  --slide-fade-duration: 0.6s;    /* スライド画像の切り替え */
}

/* ---- リセット ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  min-height: 100%;   /* 高さは中身に合わせて伸ばす（height:100% だとはみ出す） */
  /* ↓ この色が iPhone の上下バーに反映される（中身は .intro / .content のオリーブが覆う） */
  background-color: #000;
}
body {
  font-family: var(--font-primary);
  color: #040000;
  -webkit-font-smoothing: antialiased;
  font-style: italic;
  /* 上下のバー（セーフエリア）には body の黒を見せ、中身はオリーブにする */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { display: block; max-width: 100%; height: auto; }

/* タップ要素はダブルタップズーム待ちを無効化し、スマホで1タップ即反応させる */
a, button, [role="button"], input, label {
  touch-action: manipulation;
}

/* イントロ表示中はスクロールさせない（body.intro-active で制御） */
/* 高さは確保しておく（バー領域に body の黒を出すため） */
body.intro-active { overflow: hidden; min-height: 100vh; }

/* 上下のバー（セーフエリア）を常に黒く保つ帯
   ※スクロールしてもコンテンツがバー領域に重ならないようにする */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  background-color: #000;
  z-index: 9999;
  pointer-events: none;
}
body::before {   /* 上部バー */
  top: 0;
  height: env(safe-area-inset-top, 0px);
}
body::after {    /* 下部バー */
  bottom: 0;
  height: env(safe-area-inset-bottom, 0px);
}


/* ============================================================
   ファーストビュー（イントロ）
   ============================================================ */
.intro {
  position: fixed;
  left: 0;
  right: 0;
  /* 上下のバー（セーフエリア）は body の黒を見せ、その内側だけオリーブにする */
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
  overflow: hidden;
  background-color: #040000;   /* オープニングの背景色（オリーブ） */
}

.intro-inner {
  background-color: #040000;   /* オープニングの背景色（オリーブ） */
  width: 100%;
  height: 100%;
}

/* 背景画像：3秒かけてフェードイン */
.intro__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}
.intro.is-bg-in .intro__bg {
  opacity: 1;
  transition: opacity var(--bg-fade-duration) ease;
}

/* ロゴ：滲み出す（blur + opacity）。逆再生で消える */
.intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;               /* ロゴ表示幅（お好みで調整） */
  max-width: 320px;
  opacity: 0;
  filter: blur(14px);
}
/* 滲み出し（表示） */
.intro.is-logo-in .intro__logo {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--logo-fade-duration) ease,
              filter  var(--logo-fade-duration) ease;
}
/* 逆再生（消える）：滲みながらフェードアウト */
.intro.is-logo-out .intro__logo {
  opacity: 0;
  filter: blur(14px);
  transition: opacity var(--logo-fade-duration) ease,
              filter  var(--logo-fade-duration) ease;
}

/* イントロ全体をフェードアウトして退場 */
.intro.is-hide {
  opacity: 0;
  transition: opacity var(--content-fade-duration) ease;
  pointer-events: none;
  will-change: opacity;          /* iOS でフェードを GPU 合成させ、終了時のスナップを防ぐ */
  -webkit-backface-visibility: hidden;
}


/* ============================================================
   コンテンツ（イントロ後に表示）
   ============================================================ */
.content {
  opacity: 0;
  transition: opacity var(--content-fade-duration) ease;
  background-color: #89805d;   /* コンテンツ背景（オリーブ） */
  /* セーフエリア分を除いた高さ（下端のバーに黒を残す） */
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.content.is-show { opacity: 1; }


/* ============================================================
   スライドコンテンツ
   ============================================================ */
.slider {
  position: relative;
  min-height: 100svh;
  background-color: var(--color-slider-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 70px;
  touch-action: none;   /* 表示エリア全体で縦スワイプを受ける */
}

/* 上部ロゴ */
.slider__logo,
.p2-head{
  position: fixed;
    z-index: 1111;
    width: 100%;
    /* 初期は背景なし（ロゴのみ）。スクロールで .is-scrolled が付くとふわっと表示 */
    background: transparent;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 上部バー（セーフエリア）の黒を覆わない */
    top: env(safe-area-inset-top, 0px);
    transition: background-color 0.8s ease;
}
.slider__logo.is-scrolled,
.p2-head.is-scrolled{
    background-color: #89805d;
}
/* 下の線：初期は非表示、スクロールでふわっと表示 */
.slider__logo::after,
.p2-head::after{
        content: "";
        display: block;
        background: #040000;
        width: 100%;
        height: 0.42px;
        position: absolute;
        left: 0px;
        bottom: 0px;
        opacity: 0;
        transition: opacity 0.5s ease;
}
.slider__logo.is-scrolled::after,
.p2-head.is-scrolled::after{
        opacity: 1;
}
/* パスワードページ（.gate 内）と 2ページ目（.p2-head）は最初から背景色＋下線を表示 */
.gate .slider__logo,
.p2-head{
  background-color: #89805d;
}
.gate .slider__logo::after,
.p2-head::after{
  opacity: 1;
}

.slider__logo img,
.p2-head img{
  width: 62px;
}

/* スライド表示エリア（画面中央） */
.slider__viewport {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;   /* 画像に合わせて調整可 */
  touch-action: none;    /* 縦スワイプをブラウザスクロールに奪われない */
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--slide-fade-duration) ease;
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 画像全体を見せる。cover にすると全面表示 */
}

/* カウンター（下部） */
.slider__counter {
  position: absolute;
  bottom: 27px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: -0.014em;
  color: #040000;
}


/* ============================================================
   パスワードセクション
   ============================================================ */
.gate {
  position: relative;
  min-height: 100vh;
  /* body のセーフエリア padding 分を差し引く */
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background-color: var(--color-gate-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
}
/* ロゴ ＋ Invitation（中央） */
.gate__inner {
  text-align: center;
  transform: translateY(-40%);   /* ほんの少し上に配置 */
}
.gate__logo {
  width: 170px;
  margin: 0 auto;
}
.gate__invitation {
  margin-top: 40px;
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #040000;
}
/* Password 入力欄（下線式・下部に固定） */
.gate__form {
  position: absolute;
    left: 0;
    bottom: 142px;
    width: 100%;
    padding: 0 45px;
}
.gate__field {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 0.42px solid #040000;
  padding-bottom: 3px;
}
.gate__label {
  font-size: 12px;
  color: #040000;
  white-space: nowrap;
      font-family: "adobe-jenson-pro-subhead", serif;
    font-weight: 300;
    font-style: normal;
}
.gate__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 16px;          /* 16px 未満は iOS で自動ズームするため 16px */
  letter-spacing: 0.08em;
  color: #040000;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
}
/* 送信ボタン（右向き矢印アイコン） */
.gate__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 4px 6px;
  color: #040000;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
}
.gate__arrow:hover { opacity: 0.6; }
.gate__arrow:disabled { opacity: 0.3; cursor: default; }
.gate__arrow svg { display: block; }
.gate__error {
  margin-top: 12px;
  font-size: 12px;
  font-style: italic;
  color: #5a2020;
}


/* ============================================================
   ランディング（SPECTRE デザイン）
   ------------------------------------------------------------
   スライドコンテンツの下に続くセクション群
   ============================================================ */
.lp {
  color: var(--color-content-text);
  background-image: url('../images/bg_content_sp.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  opacity: 0;                        /* スライダー終了までは隠す */
  transition: opacity 1s ease;
}
.lp.is-revealed { opacity: 1; }      /* スライダー終了後にふわっと表示 */

/* セクション上部の丸マーク（○） */
.lp-mark {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0;
    border: 1px solid #040000;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    position: absolute;
    top: 173px;
    left: 17px;
}

/* ---------- Hero ---------- */
.lp-hero {
  /* body のセーフエリア padding 分を差し引く */
  height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 24px;
  justify-content: center;
  position: relative;
}
.lp-hero__brand img{
  width: 75px;
  height: auto;
}
.lp-hero__title {
  margin: 0;
  width: 75%;
}
/* Hero のコピー：背景(.lp)が出終わって2秒後に、ふわっとゆっくり表示
   ─ .lp のフェードイン 1.8s ＋ 待ち 2s = 3.8s 遅らせて開始 */
.lp-hero .lp-hero__title.reveal {
  opacity: 0;
  transform: none !important;
  transition: opacity 3s ease 6.7s, transform 3s ease 6.7s;
  will-change: opacity, transform;
}
.lp-hero .lp-hero__title.reveal.is-inview {
  opacity: 1;
  transform: none;
}
/* ヘッダーロゴから来た場合（?skip=1）はオープニング分(約4s)を省いた遅延にする */
body.is-skip-intro .lp-hero .lp-hero__title.reveal {
  transition: opacity 3s ease 0.5s, transform 3s ease 0.5s;
}
.lp-hero__title em { font-style: italic; }
.lp-hero__arrow {
  margin-top: auto;
  color: var(--color-content-text);
  line-height: 0;
  position: absolute;
  bottom:15px;
  left: 50%;
  transform: translateX(-50%);
}
.lp-hero__arrow  img{ 
  width: 52px;
}

/* ---------- About ---------- */
.lp-about {
  padding: 136px 10px 100px;
  position: relative;
}
.lp-about__label {
    margin-top: 55px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    padding-left: 6px;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
}
.lp-about__title {
  padding-left: 7px;
  font-style: normal;
  font-weight: 300;
  font-size: 21px;
  letter-spacing: 0.01em;
}
.lp-about__title img{
  width: 80px;
}
.lp-about__figure {
  width: 64%;
  margin: -54px 0 0 auto;  /* 見出しの右横に寄せて配置 */
}
.lp-about__figure img { width: 100%; }
.lp-about__figure figcaption {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.025em;
  opacity: 1;
}
.lp-about__ja {
width: 100%;
    margin: 57px 0 0 7px;
    text-align: justify;
    font-size: 13px;
    line-height: 2.2;
    letter-spacing: -0.01em;
    font-style: normal;
    font-family: fot-tsukuaoldmin-pr6n, sans-serif;
    text-indent: 9.2em;
    padding-right: 7px;
}
.lp-about__en {
margin: 7px 7px 0px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0.014em;
}

/* ---------- Mail ---------- */
.lp-mail { margin:27px 5px 20px; }
.lp-mail__title {
    font-size: 22px;
    display: inline-block;
    border-bottom: 1px solid var(--color-content-text);
    padding-bottom: 2px;
    line-height: 0.8em;
    font-family: "adobe-jenson-pro-subhead", serif;
font-weight: 300;
font-style: normal;
}
.lp-mail__note {
    margin-top: 14px;
    font-size: 16px;
    letter-spacing: 0.022em;

    font-family: "adobe-jenson-pro-subhead", serif;
font-weight: 300;
font-style: normal;
}
/* send ボタン（クリックでメーラー起動） */
.lp-mail__submit {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 0;

    font-family: "adobe-jenson-pro-subhead", serif;
font-weight: 300;
font-style: normal;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--color-content-text);
  background: transparent;
  border: 1px solid var(--color-content-line);
  cursor: pointer;
  position: relative;
}
.lp-mail__submit::after {
  content: "";
  display: block;
  background: #040000;
  width: 100%;
  height: 0.42px;
  position: absolute;
  left: 0px;
  bottom: -23px;
}

/* ---------- Art Works ---------- */
.lp-works {
  padding: 64px 15px 530px;
  text-align: center;
  background-image: url('../images/bottom-texture.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}
.lp-works__title {
  margin-top: 20px;
  position: relative;
      padding-top: 4px;
}
.lp-works__title img{
    width: 142px;
    margin: 0px auto;
}
.lp-mark2 {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0;
    border: 1px solid #040000;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.lp-works__visual {
  position: relative;
  margin-top: 49px;
  aspect-ratio: 3 / 4.04;      /* 作品画像の比率に合わせて調整可 */
  touch-action: pan-y;      /* 横スワイプは切替に使い、縦のページスクロールは許可 */
}
/* 作品スライド（フェード切替） */
.lp-works__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--slide-fade-duration) ease;
  pointer-events: none;
}
.lp-works__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.lp-works__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-works__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 260px;
  z-index: 2;
  pointer-events: none;
}
/* ドット（クリックで切替） */
.lp-works__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.lp-works__dots button {
  width: 32%;
  height: 2px;
  padding: 0;
  border: 0;
  background: var(--color-content-line);
  cursor: pointer;
  transition: background 0.3s ease;
}
.lp-works__dots button.is-active { background: var(--color-content-text); }
.lp-works__visit {
  display: block;
  width: 100%;
  margin-top: 30px;
  padding: 10px 0;
    font-family: "adobe-jenson-pro-subhead", serif;
font-weight: 300;
font-style: normal;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  color: var(--color-content-text);
  border: 1px solid var(--color-content-line);
}
.lp-works__footer {
    margin-top: 260px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.02em;
}


/* ============================================================
   2ページ目（page2.php）
   ------------------------------------------------------------
   テクスチャ背景を敷く場合は .p2 の background-image を有効化
   ============================================================ */
.p2 {
  color: var(--color-content-text);
  background-color: #89805d;   /* コンテンツ背景（オリーブ）※バーの黒が透けないように */
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background-image: url('../images/bg_content_sp2.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 565px;
  background-color: #89805d;
}

/* 上部ブランド */
.p2-head {
  text-align: center;
  height: 45px;
}
.p2-brand {
}
.p2-brand img{
}

/* イントロ */
.p2-intro {
  padding: 110px 15px 0;
  text-align: center;
}
.p2-title {
  width: 100%;
  margin: 0 auto 10px;
  font-weight: normal;
    font-style: normal;
    font-size: 28px;
}
/* 見出し下のマーク（差し替え可：円形プレースホルダ） */
.p2-mark {
  display: block;
  position: relative;
  width:42px;
      margin: 0 auto;
}

/* メイン画像 */
.p2-hero {
  margin-top: 40px;
}
.p2-hero img { width: 100%; }
.p2-hero figcaption {
  margin-top: 40px;
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.08em;
  position: relative;
}
.p2-hero figcaption::after{
  content:"";
  width: 15px;
  display: block;
  height: 0.7px;
  background-color: #040000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom:34px;
}

/* テキスト（和文・英文） */
.p2-text {
  /* p2-intro の外（.p2-body 内）へ移動したため、左右余白で従来位置(左55/右15)を維持 */
  margin: 144px 15px 0 55px;
}
.p2-ja {
  font-family: fot-tsukuaoldmin-pr6n, var(--font-primary), serif;
    font-style: normal;
    font-size: 13px;
    line-height: 2.01em;
    letter-spacing: -0.01em;
    text-align: left;
        margin-bottom: 16px;
}
.p2-ja span{
    font-family: "adobe-jenson-pro-subhead", serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.03em;
        font-size: 14.4646px;
}
.p2-en {
    font-family: var(--font-primary);
    font-style: italic;
    font-size: 16px;
    line-height: 1.4em;
    letter-spacing: 0.01em;
    text-align: left;
    margin-bottom: 15px;
}
.p2-en.top {
    margin-top: 73px;
    position: relative;
}
.p2-en.top::after{
content: "";
    width: 15px;
    display: block;
    height: 1px;
    background-color: #040000;
    position: absolute;
    left: 7px;
    transform: translateX(-50%);
    bottom: 84px;
}
.p2-en.last {
    margin-bottom: 0;
    position: relative;
}
.p2-en.last::after{
content: "";
    width: 100%;
    display: block;
    height: 0.42px;
    background-color: #040000;
    position: absolute;
    left: 0;
    bottom: -68px;
}

/* ギャラリー（3枚） */
.p2-gallery {
margin-top: 139px;
    padding: 0 15px 0 55px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.p2-gallery img { width: 100%; }

/* Address */
.p2-address {
    margin-top: 53px;
    padding: 0 15px 0 55px;
}
div.p2-address{
  display: none;
}
.p2-address__title {
  font-family: var(--font-primary);
    font-style: normal;
  font-size: 22px;
    letter-spacing: 0.01em;
    display: inline-block;
    position: relative;
    font-weight: normal;
}
.p2-address__title::after{
content: "";
    width: 104%;
    display: block;
    height: 1px;
    background-color: #040000;
    position: absolute;
    left: 0;
    bottom: 2px;
}
.p2-address__text {
    margin-top: 30px;
    font-family: var(--font-primary);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6em;
    letter-spacing: -0.01em;
}

.p2-address__text span{
display: block;
    font-family: fot-tsukuaoldmin-pr6n, var(--font-primary), serif;
    font-style: normal;
    font-size: 13px;
    line-height: 2.01em;
    letter-spacing: -0.01em;
    text-align: left;
    margin-bottom: 8px;
}

/* フッター */
.p2-footer {
    margin-top: 270px;
    text-align: center;
    font-family: var(--font-primary);
    font-style: italic;
    font-size: 18px;
    letter-spacing: -0.004em;
}
footer{
    padding: 64px 15px 530px;
    background-image: url(../images/bottom-texture.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}
br.pc-br{
  display: none;
}
.p2-footer-texture{
  display: none;
}

/* ============================================================
   2ページ目 PC（min-width: 768px）※ SP はそのまま
   Hero全幅 → 本文テキスト(左) ＋ ギャラリー画像(右) の2カラム → フッター
   ============================================================ */
@media (min-width: 768px) {

  .p2 {
    background-image: none;
    padding-bottom: 0;
  }   /* 下部テクスチャ用の余白（調整可） */

  /* ブランド・見出し・マーク・Hero は中央・全幅 */
  .p2-intro {
    max-width: 100%;
    margin: 0 auto;
    padding: 128px 20px 0;
  }
  .p2-title { font-size: 32px; margin-bottom: 19px; }
  .p2-mark  { width: 46px; }
  .p2-hero  { margin-top: 40px; }
  .p2-hero figcaption { font-size: 12px; margin-top: 55px; }
  .p2-hero figcaption::after{
    bottom: 39px;
  }
  .p2-footer-texture{
    width: 100%;
    height: 515px;
    background-image: url(../images/bottom-texture_pc2.jpg);
    background-size: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        display: block;
  }

  /* 本文＋ギャラリーの2カラム（左：テキスト＋Address / 右：ギャラリー） */
  .p2-body {
    display: grid;
    grid-template-columns: 46% 50.7%;
    justify-content: space-between;
    align-items: start;
    max-width: 100%;
    margin: 230px auto 0;
    padding: 0 20px 0 120px;
  }
  .p2-text {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
  }
  .p2-gallery {
    grid-column: 2;
    grid-row: 1 / span 2;             /* 右カラム：テキスト＋Address の高さに沿う */
    margin: 0;
    padding: 0;
    gap: 113px;
  }

  /* 文字サイズをPC向けに少し調整 */
  .p2-ja {
    font-size: 15px;
    line-height: 2.1em;
    margin-bottom: 24px;
  }
  .p2-en {
    font-size: 18px;
    margin-bottom: 22px;
  }
  .p2-en.top::after {
    content: "";
    width: 20px;
    display: block;
    height: 1px;
    background-color: #040000;
    position: absolute;
    left: 0px;
    transform: none;
    bottom: 105px;
}
  .p2-en.top { margin-top: 106px; }

  div.p2-address {
    margin:162px 0 0;
    padding: 0;
    display: block;
  }
  .p2-footer { margin-top: 412px;
  font-size: 16px;}
}


/* ============================================================
   スクロールで「ふわっと」出現
   ------------------------------------------------------------
   出現させたい要素に class="reveal" を付けるだけ。
   画面に入ると JS(initReveal) が .is-inview を付与して表示されます。
   併用できるバリエーション（例: class="reveal reveal--fade reveal--d2"）:
     --fade  移動なし・フェードのみ
     --down  上から降りてくる
     --left  右から  /  --right 左から
     --zoom  少し拡大から
     --slow  ゆっくり / --fast 速め
     --d1〜--d4  出現を少し遅らせる（連続要素をずらす時に）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 2s ease, transform 2s ease;
  will-change: opacity, transform;
}

/* バリエーション（初期状態を上書き） */
.reveal.reveal--fade  { transform: none; }
.reveal.reveal--down  { transform: translateY(-28px); }
.reveal.reveal--left  { transform: translateX(28px); }
.reveal.reveal--right { transform: translateX(-28px); }
.reveal.reveal--zoom  { transform: scale(1.04); }
.reveal.reveal--slow  { transition-duration: 1.4s; }
.reveal.reveal--fast  { transition-duration: 0.6s; }

/* 出現の遅延 */
.reveal.reveal--d1 { transition-delay: 0.15s; }
.reveal.reveal--d2 { transition-delay: 0.30s; }
.reveal.reveal--d3 { transition-delay: 0.45s; }
.reveal.reveal--d4 { transition-delay: 0.60s; }

/* 画面に入った状態（全バリエーション共通で表示位置へ） */
.reveal.is-inview {
  opacity: 1;
  transform: none;
}
 .pc-about{
display: none !important;
 }
/* モーション低減設定の端末では即表示（アニメなし） */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 768px) {
  /* ---------- ランディング背景（PC用テクスチャ） ---------- */
  .lp {
    color: var(--color-content-text);
    background: none;
  }
  .lp-hero{
    background-image: url('../images/bg_content_pc.jpg');
    background-size:  cover;
    background-position: top;
            background-repeat: no-repeat;
  }

  /* ---------- Hero ---------- */
  .lp-hero__title { width: 301px; }   /* 「The Art of Harmonia」を中央に */

  /* ---------- About：左テキスト / 右画像の2カラム ---------- */
  .lp-about {
    display: grid;
    grid-template-columns: 32% 44.3%;   /* 左テキスト / 右画像（比率は調整可） */
    justify-content: space-between;    /* 中央に余白 */
    align-items: start;
    margin: 0 auto;
    padding: 143px 22px 0;
    position: relative;
  }
  .lp-about::after{
    content: "";
    display: block;
    background: #040000;
    width: 100%;
    height: 0.5px;
    position: absolute;
    left: 0px;
    bottom: -71px;
  }
  .lp-about > * { grid-column: 1; }    /* 既定は左カラム */
  /* ○マークを通常フローで左上へ（SPの絶対配置を解除） */
  .lp-about .lp-mark {
    position: static;
    margin: 203px 0 12px;
    width: 13px;
    height: 13px;
  }
  /* 画像は右カラム。テキスト全体の高さに沿って配置 */
  .lp-about__figure {
    grid-column: 2;
    grid-row: 1 / span 10;
align-self: end;
        width: 100%;
        margin: 0 0 -30px 0;
        /*
        position: absolute;
        right: 22px;
        bottom: -32px;
        */
  }
  .lp-about__figure figcaption {
    text-align: center;
    font-size: 12px;
    margin-top: 18px;
  }
  /* テキストの余白をPC向けに */
  .lp-about__label {
    margin-top: -1px;
    font-size: 21px;
    padding-left: 0px;
    letter-spacing: 0.016em;
    margin-bottom: -4px;
  }
  .lp-about__title{
    font-size: 27px;
    padding-left: 1px;
  }
  .lp-about__ja  {
    margin: 63px 0 0;
    text-indent: 0;
    padding-right: 0;
    letter-spacing: 0.03em;
  }
  .lp-about__en{
          margin: 17px 0 0;
          line-height: 1.5em;
        }
  .lp-mail{
    margin: 53px 0 0;
  }
  .lp-mail__note{
        margin-top: 10px;
        letter-spacing: -0.017em;
  }
  .lp-mail__submit{
    margin-top: 9px;
    padding: 5px 0;
  }
  .lp-mail__submit::after{
    display: none;
  }

  /* ---------- ART WORKS ---------- */
  /* 背景テクスチャは全幅のまま、中身は中央幅に収める */
  .lp-works {
    padding: 245px 0 0;
    background-image: none;
  }
  .lp-works__title,
  .lp-works__visual,
  .lp-works__dots,
  .lp-works__visit,
  .lp-works__footer {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
  }
  .lp-works__title img { width: 180px; }
  .lp-works__visual {
    margin: 89px 20px 0 20px;
    max-width: 100%;
    padding: 0;
    aspect-ratio: 16 / 10;
  }
  .lp-works__slide img{
    height: auto;
    object-fit: contain;
  }
  .lp-works__overlay { width: 22%; max-width: 380px; }
  .lp-works__dots button { width: 40%; }
  .lp-works__visit { 
    padding-top: 11px;
    padding-bottom: 11px;
    margin-top: 29px;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  .lp-works__footer { 
    margin-top: 440px;
    text-align: center; 
  }
  .lp-works__dots{
    margin-top: 37px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 100%;
  }
.gate__logo {
  width: 225px;
  margin: 0 auto;
}
.gate__form{
    bottom: 221px;
    width: 375px;
    left: 50%;
    transform: translateX(-50%) !important;
}
.p2-en.last::after{
  display: none;
}
br.pc-br{
  display: block;
}
div.p2-address{
  display: block;
}
section.p2-address{
  display: none;
}

 .sp-about{
display: none;
 }
 .pc-about{
display: block !important;
 }
 .pc-about-wrap{
  display: flex;
          align-items: flex-end;
        /* gap: 20%; */
        justify-content: space-between;
        width: 100%;
 }
  .pc-about-wrap .left{
    width: 40%;
  }
  .pc-about-wrap figure{
    width: 44.3%;
  }
}

@media (min-width: 1366px) {
  .lp-hero{
    background-size:  cover;
    background-position: bottom;
  }
}