/* =========================================
   Base
========================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; }

body{
  margin:0;
  min-width:320px;
  background:#f5f4f4;
  color:#2d2321;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

.lp{ overflow:hidden; }

.container{
  width: min(calc(100% - 56px), 1030px);
  margin-inline:auto;
}

.container--narrow{
  width: min(calc(100% - 56px), 800px);
}

br.pc { display: inline; }
br.sp { display: none; }

@media (max-width: 768px){
  br.pc { display: none; }
  br.sp { display: inline; }
}

/* =========================================
   Hero
========================================= */
.hero{ padding-top:130px; }

.hero__inner{
  width:min(100%,1030px);
  margin-inline:auto;
  position:relative;
}

.hero__copy{
  position:relative;
  z-index:3;
  width:min(calc(100% - 56px), 1030px);
  margin:0 auto -44px;
}

.hero__copy-inner{
  width:100%;
  transform: translateX(0);
}

.hero__copy-svg{
  display:block;
  width:100%;
  height:auto;
}

.hero__visuals{
  display:grid;
  grid-template-columns: 1fr 1fr;
  position:relative;
  z-index:1;
}

.hero-slider{
  position:relative;
  aspect-ratio: 515 / 445;
  overflow:hidden;
  background:#cfcfcf;
}

.hero-slider__slide{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  opacity:0;
  transition: opacity 1.8s ease;
}

.hero-slider__slide.is-active{ opacity:1; }

/* =========================================
   Message
========================================= */
.message{ padding:74px 0 54px; }

.message__title{
  margin:0 0 30px;
  text-align:center;
  font-size: clamp(1.95rem, 2.7vw, 2.3rem);
  font-weight:500;
  line-height:1.55;
  letter-spacing:0.12em;
}

.message__body{ text-align:center; }

.message__body p{
  margin:0 0 0.9em;
  font-size: 12pt;        /* ←PCの本文サイズ */
  line-height: 1.95;       /* ←PCの本文行間 */
  letter-spacing:0.06em;
}

/* =========================================
   Gallery
========================================= */
.gallery{ padding:56px 0 86px; }

.gallery__grid{
  width:min(100%,900px);
  margin-inline:auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:4px;
}

.gallery__item{ overflow:hidden; }

.gallery__item img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.gallery__item:hover img{
  transform: scale(1.2);
  opacity:0.94;
}

/* =========================================
   Brand
========================================= */
.brand{ padding:2px 0 86px; }

.brand__logo{
  width:min(100%,300px);
  margin-inline:auto;
}

/* =========================================
   Access
========================================= */
.access{ padding:0 0 84px; }

.access__map-wrap{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.access__map{
  width: 100%;
  display: block;
}

.access__map-link{
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.access__map-link a{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
}

/* =========================================
   Contact
========================================= */
.contact{
  padding:0 0 80px;
  text-align:center;
}

.contact__tel{
  margin:0 0 8px;
  font-size: clamp(2.8rem, 4.6vw, 4.1rem);
  font-weight:700;
  line-height:1;
  letter-spacing:0.07em;
}

.contact__address{
  margin:0;
  font-size:0.93rem;
  line-height:1.8;
  letter-spacing:0.05em;
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 900px){
  .hero__copy{ margin-bottom:-24px; }
  .message{ padding-top:58px; padding-bottom:46px; }

  /* ★900px以下の本文 */
  .message__body p{
    font-size: 12pt;
    line-height: 1.9;
  }

  .gallery{ padding-top:46px; padding-bottom:68px; }
  .brand{ padding-bottom:64px; }
  .access{ padding-bottom:62px; }
}

@media (max-width: 768px){
  .container, .container--narrow{ width:min(calc(100% - 64px), 1030px); }

  .hero{ padding-top:60px; }

  .hero__copy{
    width:min(calc(100% - 32px), 1030px);
    margin-bottom:10px;
  }

  .hero__visuals{ grid-template-columns:1fr; }
  .hero-slider{ aspect-ratio: 4 / 3; }

  .message{ padding:44px 0 34px; }

  .message__title{
    margin-bottom:22px;
    font-size:1.55rem;
    line-height:1.65;
    letter-spacing:0.08em;
  }

  .message__body{ text-align:left; }

  /* ★スマホの本文（ここが“スマホだけ”のサイズ/行間） */
  .message__body p{
    font-size: 12pt;
    line-height: 1.9;
    letter-spacing: 0.04em;
  }

  .gallery{ padding:40px 0 54px; }
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); gap:6px; }

  .brand{ padding-bottom:44px; }
  .brand__logo{ width:min(100%,220px); }

  .access{ padding-bottom:44px; }

  .contact{ padding-bottom:52px; }
  .contact__tel{ font-size:2.2rem; letter-spacing:0.04em; }
  .contact__address{ font-size:0.9rem; line-height:1.75; }
}