@charset "utf-8";
/* CSS Document */
:root{
  --ink:#000;
  /* 最終レイアウト座標 */
  --title-left: 6vw;
  --title-top:  3vh;
  --photo-right: 6vw;
  --photo-top:   28vh;
  --photo-final-w: clamp(420px, 52vw, 980px);
  /* オープニング時の中央サイズ */
  --photo-start-w: clamp(320px, 45vw, 480px);
  /* タイトル最終サイズ */
  --title-final-size: clamp(48px, 16vw, 220px);
}

html,body{height:100%}
body{
  margin:0;
}

img {
    max-width: 100%;
    height: auto;
}
/* イントロ中だけ止めたい場合は html にクラスで付ける */
html.intro-lock{ overflow: hidden; }

/* イントロ完了までヘッダー（ロゴ＆ハンバーガー）を隠す */
.site-header{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

/* ========== 演出用オーバーレイ（中央演出） ========== */
.stage{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:grid; place-items:center;
}
.group{position:relative; will-change:transform}
.photo{position:relative; overflow:hidden; width:var(--photo-start-w); will-change:transform;}
.photo img{
  display:block; width:100%; height:auto;
  /* 中央から上下に開く */
  clip-path:inset(50% 0 50% 0);
  filter:grayscale(100%);
  opacity:.65; /* 文字の視認性 */
  will-change:clip-path,filter,opacity,transform;
  backface-visibility:hidden; transform:translateZ(0);
}

.title{
  position:absolute; inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  margin:0; white-space:nowrap; color:var(--ink);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","游明朝","YuMincho",serif;
  font-weight:700; letter-spacing:.08em; line-height:.92;
  font-size:clamp(48px, 16vw, 220px);
  will-change:transform,color,font-size;
}
.char{display:inline-block; clip-path:inset(100% 0 0 0)} /* 下→上ワイプ */

/* ========== 本番DOM（スクロール可） ========== */
#hero{ position:relative; opacity:0; min-height:140vh; }
#heroTitle{
  position:absolute; left:var(--title-left); top:var(--title-top);
  margin:0; color:var(--ink);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","游明朝","YuMincho",serif;
  font-weight:700; letter-spacing:.08em; line-height:.92;
  font-size:var(--title-final-size);
}

/* 右側写真のボックス（高さはJSで比率固定） */
#gallery{
  position:absolute; right:var(--photo-right); top:var(--photo-top);
  width:var(--photo-final-w); overflow:hidden;
}

/* ギャラリー内の画像はボックスにフィット（高さ0対策） */
#gallery img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(0%); opacity:1; 
  /*transform:translateX(0);*/
  will-change:opacity,transform;
}

/* ヘッダーはイントロ完了まで隠す */
.site-header{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.about {
    padding: 200px 0;
    
}

.about h2 {
    max-width: 480px;
    margin: auto;
}

.about .imgarea{
  position: relative;
}

/* これが “高さの土台” */
.about .imgarea::before{
  content:"";
  display:block;
  /* = img2のtop(200px) + img2の高さ(幅×アスペクト比) */
  padding-top: calc(280px + (min(60vw, 1280px) * (1211 / 1820)));
}

/* 絶対配置はそのまま */
.about .imgarea .img1{
  position:absolute;
  top:100px; left:0;
  width:min(45vw, 1080px);
  z-index:1;
}
.about .imgarea .img2{
  position:absolute;
  top:280px; right:0;
  width:min(60vw, 1280px);
  z-index:0;
}


/* === ABOUT: 見出し＋本文ブロック === */
.about .flex{
  width: min(92vw, 1200px);
  margin: clamp(36px, 8vw, 86px) auto 0;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.2fr); /* 左：見出し／右：本文 */
  gap: clamp(24px, 6vw, 80px);
  align-items: center; /* 上下センター（揃えたい場合は start に） */
}

.about .title02{
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.35;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1; /* 和文の約物を詰めて整える（任意） */
}
.about .title02 span{ color:#00479d; }

.about .text{
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 2;
  font-weight: 700; /* 画像の例のように少し太め */
  letter-spacing: .01em;
}

.about .text h2{
	margin: 0 auto 0 0;
}

/* SP：縦積み */
@media (max-width:1023px){
  .about .flex{
    width: 94vw;
    display: block;
    margin-top: 28px;
  }
  .about .title02{
    font-size: clamp(22px, 6vw, 34px);
    margin-bottom: 12px;
  }
  .about .text{ font-size: 15px; }
}

/* =========================
   STORONG POINT（調整版）
   ========================= */
.storong-point{
  /* 調整つまみ */
  --wrap-w: min(92vw, 1200px);
  --title-h: 170px;      /* ← h2画像の高さを小さく */
  --title-gap: 32px;
  --align-adjust: 0px;   /* 上端がズレる場合 ±2〜12px で微調整 */

  background: rgba(0,0,0,1.0);
  color:#fff;
  padding:120px 0;
}
.storong-point .sp-inner{
  width: var(--wrap-w);
  margin: 0 auto;
  position: relative;
}

/* タイトル画像（左上） */
.storong-point .sp-inner > h2{
  margin: 0 0 var(--title-gap);
  line-height: 0;
}
.storong-point .sp-inner > h2 img{
  height: var(--title-h);
  width: auto;
  display: block;
}

/* 1枚目の画像の“頭”をタイトルと揃える */
.storong-point .sp-inner > .box:first-of-type .sp-visual{
  margin-top: calc(-1 * (var(--title-h) + var(--title-gap)) + var(--align-adjust));
}

/* 交互2カラム（下端で揃える） */
.storong-point .box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;               /* bottom 揃え */
  margin: clamp(36px, 5vw, 80px) 0;
}
.storong-point .box:nth-of-type(odd)  .text      { order:1; }
.storong-point .box:nth-of-type(odd)  .sp-visual { order:2; }
.storong-point .box:nth-of-type(even) .text      { order:2; }
.storong-point .box:nth-of-type(even) .sp-visual { order:1; }

.storong-point .sp-visual img{ display:block; width:100%; height:auto; }

/* 見出しフォント：明朝＋細めに */
:root{
  --font-meister:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',YuMincho,'Sawarabi Mincho','Times New Roman',serif;
}
.storong-point .text h3{
  font-family: var(--font-meister);
  font-weight: 500;               /* ← 細く（必要なら 400 でもOK） */
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.15;
  margin: 0 0 .4em;
  letter-spacing: .02em;
}
.storong-point .text p{
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 2;
  letter-spacing: .02em;
}

/* SP/Tablet */
@media (max-width:1023px){
  .storong-point{
    padding:80px 0;
    --title-h: 120px;
    --title-gap: 20px;
    --align-adjust: 0px;
  }
  .storong-point .sp-inner{ width: 94vw; }
  .storong-point .sp-inner > .box:first-of-type .sp-visual{ margin-top: 0; }

  .storong-point .box{
    grid-template-columns: 1fr; /* 縦積み */
    align-items: start;
    gap: 16px;
    margin: 28px 0;
  }
  .storong-point .box .sp-visual{ order:1; }
  .storong-point .box .text     { order:2; }

  .storong-point .text h3{ font-size: clamp(28px, 7vw, 40px); font-weight: 500; }
  .storong-point .text p { font-size: 15px; }
}

/* 奇数の .box の .text 左側だけインデント（PCのみ） */
@media (min-width: 1024px){
  .storong-point{ --odd-text-indent: 50px; } /* ←お好みで 40〜60px などに調整 */

  .storong-point .box:nth-of-type(odd) .text{
    padding-left: var(--odd-text-indent);
  }
}


/* =========================================
   Smartphone (<=768px) — TOP 一括調整（更新版）
   ========================================= */
@media (max-width: 768px){

  /* ---------- HERO（メイン） ---------- */
  /* 高さをさらに短縮して、画像も少し上へ */
  #hero{
    min-height: 74vh;        /* 88vh → 74vh に短縮 */
    min-height: 74svh;       /* 対応環境ではツールバー分も詰まる */
  }
  #heroTitle{
    left: 6vw;
    top: 4vh;                /* 6vh → 4vh（タイトルを少し上へ） */
    font-size: clamp(48px, 16vw, 66px);
  }
  #gallery{
    left: 50%;
    right: auto;
    top: 14vh;               /* 22vh → 14vh（画像を上げて上余白を圧縮） */
    width: min(90vw, 520px);
    transform: translateX(-50%);
  }
  #gallery img{
    display: block;          /* 画像下の行間余白を消す */
    object-fit: cover;
  }

  /* ---------- ABOUT 見出し＆画像 ---------- */
  .about{
    padding: 44px 0 120px;   /* main→about間をさらに圧縮（56→44） */
  }
  .about h2 img{
    width: 65vw;             /* 見出しは少し小さめのまま */
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .about .imgarea{
    position: relative;
    width: 94vw;
    margin: 40px auto;     /* 見出し→写真の余白を少し確保 */
  }
  /* コンテナ高さ（img1の半分＋img2の高さ）をやや短縮して下余白も詰める */
  .about .imgarea::before{
    content: "";
    display: block;
    padding-top: calc(16vw + (60vw * (1211 / 1820))); /* 18vw → 16vw */
  }
  /* 左上：img1、右下：img2（半分ほど重ね） */
  .about .imgarea .img1{
    position: absolute;
    top: 0; left: 0;
    width: 60vw;
    z-index: 1;
  }
  .about .imgarea .img2{
    position: absolute;
    top: 16vw; right: 0;     /* 18vw → 16vw（重なりを少し増やす） */
    width: 60vw;
    z-index: 0;
  }

  /* ABOUT テキスト（読みやすさ） */
  .about .flex{
    width: 92vw;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }
  .about .title02{
    font-size: clamp(24px, 7.8vw, 32px);
    margin-bottom: 8px;
    letter-spacing: .02em;
  }
  .about .text{
    font-size: clamp(16px, 4.1vw, 18px);
    line-height: 1.9;
  }

  /* ---------- STORONG POINT：順序を「テキスト→写真」で固定 ---------- */
  .storong-point .box{
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    margin: 28px 0;
  }
  .storong-point .box:nth-of-type(odd)  .text,
  .storong-point .box:nth-of-type(even) .text{ order: 1; }
  .storong-point .box:nth-of-type(odd)  .sp-visual,
  .storong-point .box:nth-of-type(even) .sp-visual{ order: 2; }
}

/* スマホ <=768px：h3 と p をぐっと見やすく */
@media (max-width: 768px){
  .storong-point .box .text h3{
    font-size: clamp(36px, 8vw, 48px);  /* 画面幅に合わせて伸縮 */
    line-height: 1.25;
    margin: 0 0 8px;
    letter-spacing: .02em;
  }
  .storong-point .box .text p{
    font-size: clamp(16px, 5.2vw, 24px);
    line-height: 1.9;
    margin: 6px 0 0;
  }
  .storong-point .box .text p + p{
    margin-top: 4px; /* サブ行の詰め */
  }
}

/* タブレット 769–1023px：PCより少し小さめ、SPより大きめ */
@media (min-width: 769px) and (max-width: 1023px){
  .storong-point .box .text h3{
    font-size: clamp(26px, 3.2vw, 30px);
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: .02em;
  }
  .storong-point .box .text p{
    font-size: clamp(15px, 2.0vw, 18px);
    line-height: 1.85;
  }
}