:root{
  --line-shift-x: 0px;
  --line-shift-y: 0px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Noto Serif JP", serif;
  color:#fff;
  background:#000;
  font-size: 17px;
}

/* ======================
   HERO（header：ここはそのまま）
====================== */
.hero{ position: relative; overflow: hidden; }

/* 共通 */
.hero__bg{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero__bg img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 初期状態：PC想定 */
.hero__bg .sp_none{
  display: block;
}
.hero__bg .pc_none{
  display: none;
}

/* SP表示 */
@media (max-width: 768px){
  .hero__bg .sp_none{
    display: none;
  }
  .hero__bg .pc_none{
    display: block;
  }

  .hero__bg{
    height: 100vh;
  }

  .hero__bg img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
}

/* iOS対策（任意だけどおすすめ） */
@supports (height: 100svh){
  @media (max-width: 768px){
    .hero__bg{
      height: 100svh;
    }
    .hero__bg img{
      height: 100svh;
    }
  }
}
@keyframes bgFadeIn{ from{opacity:0;} to{opacity:1;} }
.sp-break{
  display: inline;
}

@media (max-width: 768px){
  .sp-break{
    display: block;
    height: 0;
  }
}
.hero__shade{
  position:absolute;
  inset:0;
  z-index:1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55));
  pointer-events:none;
}

.hero__center{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-content:center;
  gap:18px;
  padding:24px;
  text-align:center;
}

/* LOGO */
.logoBox{
  position:relative;
  width:min(500px, 86vw);
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  text-decoration:none;
}
.logoBox__inner{
  width:72%;
  height:72%;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.logoBox__inner img{ width:100%; height:auto; display:block; }

/* LINE（初回のみ） */
.line{
  position:absolute;
  background:#fff;
  opacity:.95;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
  animation-fill-mode: forwards;
}

.line--top{
  height:5px;
  width:calc(100% + 26px);
  left:-8px;
  top:20px;
  animation: topIn 2s ease-out 1;
}
.line--right{
  width:5px;
  height:calc(100% + 34px);
  right:20px;
  top:-24px;
  animation: rightIn 3s ease-out 1;
}
.line--bottom{
  height:5px;
  width:calc(109% - 42px);
  left:25px;
  bottom:20px;
  animation: bottomIn 5s ease-out 1;
}
.line--left{
  width:5px;
  height:calc(100% + 42px);
  left:20px;
  top:24px;
  animation: leftIn 4s ease-out 1;
}
@keyframes topIn{ 0%{transform:translateX(-18px);opacity:0;} 100%{transform:translateX(0);opacity:1;} }
@keyframes rightIn{0%{transform:translateY(-18px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
@keyframes bottomIn{0%{transform:translateX(18px);opacity:0;} 100%{transform:translateX(0);opacity:1;} }
@keyframes leftIn{ 0%{transform:translateY(18px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }

@media (max-width:560px){
  .line--top{ top:0; }
  .line--right{ right:0; }
  .line--bottom{ bottom:0; }
  .line--left{ left:0; height: calc(100% + 9px);}
}

/* ======================
   INTRO（動きは WOW/animate.css 側）
====================== */
.intro{
  position: relative;
  overflow: hidden;
  color:#2b2b2b;
  padding:72px 0 64px;
}
.intro__bg{
  position:absolute;
  inset:0;
  /* background:
    linear-gradient(to bottom, rgba(255,255,255,0) 80%, #fff 80%),
    url(../images/top/back2.jpg) center / cover no-repeat; */
  background:url(../images/top/back2.jpg) center / cover no-repeat;
  opacity:1;
  pointer-events:none;
}
/* .intro::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.62);
  pointer-events:none;
} */
.intro__inner{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}
.intro__vmark{
  position:absolute;
  right:10px;
  top:8px;
  writing-mode: sideways-lr;
  text-orientation: mixed;
  font-size: clamp(40px, 6.8vw, 86px);
  letter-spacing:.10em;
  color: rgba(170,150,135,.55);
  user-select:none;
}
.intro__head{
  text-align:center;
  margin:0 auto 75px;
  max-width:820px;
}
.intro__title{
  margin:0 0 12px;
  font-size: clamp(20px, 3vw, 34px);
  font-weight:500;
  letter-spacing:.06em;
  color: #000;
}
.intro__title2{
  margin:0 0 12px;
  font-size: clamp(20px, 3vw, 34px);
  font-weight:500;
  letter-spacing:.06em;
  color: #000;
  text-align: center;
  margin-bottom: 90px;
}
.intro__sub {
    margin: 0 0 18px;
    font-size: clamp(14px, 1.7vw, 26px);
    font-weight: bold;
    letter-spacing: .12em;
    /* color: rgba(60, 55, 50, .75); */
}
/* ブランド色 */
.intro__brand{
  color: #7b1e4a;
}

/* カナを少し小さく */
.intro__kana{
  font-size: 0.85em;   /* 少し小さく */
  letter-spacing: .08em;
}
.intro__lead{
  margin:0;
  font-size: clamp(12px, 1.35vw, 17px);
  font-weight:300;
  line-height:2.1;
  letter-spacing:.08em;
  color: #000;
}
.intro__photos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:start;
  max-width:980px;
  margin:0 auto;
}
.intro__photo{ margin:0; }
.intro__photo img{ width:100%; height:auto; display:block; }

@media (max-width:860px){
  .intro{ padding:56px 0 52px; }
  .intro__inner{ padding:0 18px; }
  .intro__photos{ grid-template-columns:1fr; gap:18px; }
  .intro__vmark{ right:6px; top:0; opacity:.7; }
  .icon {
    width: 18% !important;
}
}
@media (max-width:640px){
	  .intro__lead br:first-of-type{
    display: none;
  }
.intro__lead {
    font-size: 18px;
}
.intro__title {
    font-size: 22px;
}
.intro__sub {
    font-size: 24px;
}
.intro__head h2 ,.intro__head p{
	text-align: left !important;
}
}
/* ======================
   GALLERY（動き：スクロール＋hover）
====================== */
.gallery{
  position: relative;
  padding: 72px 0 86px;
  overflow: hidden;
  background: #fff;
}

/* 背景：上20%白 + back3 */
.gallery::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url(../images/top/back3.jpg) center / cover no-repeat;
  /* background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 20%,
      rgba(255,255,255,0) 20%
    ),
    url(../images/top/back3.jpg) center / cover no-repeat; */
}

/* うっすら白ベール */
/* .gallery::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: rgba(255,255,255,.55);
} */

.gallery__inner{
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  /* padding: 0 28px; */
}

.gallery__title{
  margin: 0 0 28px;
  text-align: center;
  font-weight: 400;
  letter-spacing: .16em;
  color: #3a3531;
}

/* ===== グリッド ===== */
.gallery__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 28px;
  align-items: start;
}

/* =================================================
   WOW用（外側） ※transformは使わない
================================================= */
.gallery__item{
  margin: 0;
}

/* =================================================
   段差 + hover（内側に集約）
================================================= */
.gallery__inner{
  --step: 0px;    /* 列ごとの段差 */
  --hover: 0px;   /* hover時の下げ */

  transform: translateY(calc(var(--step) + var(--hover)));
  transition: transform .28s ease;
  will-change: transform;
}

/* 右に行くほど上がる段差 */
.gallery__item:nth-child(3n + 1) .gallery__inner{ --step: 0px; }
.gallery__item:nth-child(3n + 2) .gallery__inner{ --step: -24px; }
.gallery__item:nth-child(3n)     .gallery__inner{ --step: -48px; }

/* hover：全て同じだけ下がる */
.gallery__item:hover .gallery__inner{
  --hover: 6px;   /* ← 下げ幅はここだけ調整 */
}

/* ===== 画像 ===== */
.gallery__inner img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  box-shadow: none;
  border-radius: 0;

  transition: filter .35s ease;
}

/* hover：上品に少しだけ変化 */
.gallery__item:hover img{
  filter: brightness(1.08) contrast(1.03);
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px){
  .gallery__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .gallery__item:nth-child(odd)  .gallery__inner{ --step: 0px; }
  .gallery__item:nth-child(even) .gallery__inner{ --step: -22px; }
}

@media (max-width: 560px){
  .gallery{
    padding: 56px 0 70px;
  }

  .gallery__inner{
    padding: 0 2%;
  }

  .gallery__grid{
    /* grid-template-columns: 1fr; */
    gap: 14px;
  }
  .intro__title2 {
    margin-bottom: 40px;
}
.logoBox {
    width: min(250px, 86vw);
}
.intro__head {
    margin: 0 auto 40px;
}
  /* SPは段差・hoverなし */
  .gallery__inner{
    transform: none;
    --step: 0px;
    --hover: 0px;
  }
}

/* ======================
   LIGHTBOX
====================== */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.lightbox.is-open{ display:block; }

.lightbox__overlay{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.92);
  cursor: zoom-out;
}

.lightbox__content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  margin:0;
  pointer-events:none;
}
.lightbox__content img{
  max-width:90vw;
  max-height:88vh;
  object-fit:contain;
  pointer-events:auto;
  opacity:0;
  transform: scale(.96);
  transition: opacity .35s ease, transform .35s ease;
}
.lightbox.is-open .lightbox__content img{
  opacity:1;
  transform: scale(1);
}

@media (max-width:560px){
  .lightbox__content img{ max-width:92vw; max-height:82vh; }
}

/* ======================
   FOOTER（動きは WOW/animate.css 側）
====================== */
.footer{
  background:#fff;
  color:#2b2b2b;
  font-family:"Noto Serif JP", serif;
}

/* Map（くすませる） */
.footer__map{
  position:relative;
  width:100%;
  height:450px;
  overflow:hidden;
}
.footer__map iframe{
  width:100%;
  height:450px;
  border:0;
  filter: grayscale(1) brightness(.98) contrast(.88) saturate(.75);
}
.footer__map::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.32);
  pointer-events:none;
}

.footer__inner{
  max-width:1120px;
  margin:0 auto;
  padding:100px 28px 26px;
}

/* 完全2カラム */
.footer__grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  column-gap: 40px;
  row-gap: 16px;
  align-items:start;
}

.footer__logo img{
  width:100%;
  height:auto;
  display:block;
}

.footer__meta{ padding-top:6px; }

.footer__topline{
  margin:0 0 10px;
  letter-spacing:.14em;
  color:#3c3732;
}
.footer__brand{
  margin:0 0 12px;
  font-size:22px;
  letter-spacing:.18em;
  color:#7b1e4a;
}
.footer__items{
  margin:0;
  letter-spacing:.08em;
  color:#2f2a27;
}

.footer__contact{
  grid-column: 2;
  margin-top:8px;
  letter-spacing:.10em;
  color:#2f2a27;
}
.footer__contact p{ margin:0; line-height:1.8; }

.footer__copy{
  grid-column: 2;
  margin:8px 0 0;
  font-size:11px;
  letter-spacing:.12em;
  color:#7a726c;
}

@media (max-width: 720px){
  .footer__grid{ grid-template-columns: 1fr; row-gap: 14px; }
  .footer__contact, .footer__copy{ grid-column: 1; }
  .footer__logo{ width: 260px; max-width: 70vw; }
}
@media (max-width:560px){
  .footer__map{ height:220px; }
  .footer__map iframe{ height:220px; }
  .footer__inner{ padding:28px 18px 22px; }
}

/* ======================
   アニメ苦手な人向け（安全）
====================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

.icon{
	position: fixed;
	width: 7%;
	bottom: 10px;
	right: 10px;
	z-index: 99;
}