/* ========= 0. TOKENS: GLOBAL ========= */
html{background-color: #DFD7C2;}

:root{
  --bg:#DFD7C2; --fg:#555; --brand:#C35239;

  /* Links */
  --link:#0093b8; --link-hover:#00c9fb;
  --link-underline: none;

  /* Letter spacing (文字間) */
  --ls-base: 0.02em;       /* 全体 */
  --ls-title: 0.06em;      /* タイトル */
  --ls-concept: 0.07em;    /* コンセプト文 */
  --ls-address: 0.08em;    /* 住所 */
  --ls-sns-heading: 0.08em;/* SNS見出し */

  /* Font weights */
  --fw-concept: 700;

  /* Layout base */
  --w-safe:358px; --pad-x:16px;
  --lh-base:1.8; --bg-overlay:0;

  /* Hero image */
  --hero-w-sp: 400px;       /* SP幅: 参考値（実際の幅指定は後で 100% にする） */
  --hero-w-pc: 480px;       /* PC幅 */
  --hero-ar:26 / 16;

  /* Hero alignment / scale */
  --hero-shift-y:-82%;
  --hero-shift-y-pc:-54%;
  --hero-scale:1.2;
  --hero-scale-pc:1;

  /* “Window” height（今は未使用） */
  --slot-sp:clamp(120px,24svh,200px);
  --slot-pc:clamp(140px,20svh,220px);

  /* Address gaps */
  --addr-gap:16px;
  --addr-gap-bottom:24px;

  /* Block shifts */
  --top-shift-y:-10px;
  --content-shift-y:0px;

  /* Concept / SNS tokens */
  --concept-gap-top:0px;
  --concept-gap-bottom:0px;

  --sns-gap-top:20px;
  --sns-heading-bottom:10px;
  --sns-icons-gap:24px;
  --sns-gap-bottom:10px;
  --sns-icon-size:60px;
  --sns-heading-size:18px;

  /* スライドショー tokens */
  --slide-fade: 1500ms;
  --slide-interval: 4500ms;
}

/* ========= 0.1 TOKENS: PC container width ========= */
@media (min-width:768px){
  :root{ --w-safe:768px; }
}

/* ========= 1. BASE LAYOUT ========= */
html{ scroll-behavior:smooth; }

body{
  /* font-family: "Noto Sans JP", sans-serif; */
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size:16px;
  line-height:var(--lh-base);
  letter-spacing:var(--ls-base);
  color:var(--fg);
  background: url("../img/bg_img.png") repeat;
  margin:0;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  justify-items:center;
  overflow-x:hidden;
}
@media (min-width:768px){
  body{ grid-template-rows:auto auto auto; }
}

.container{
  width:min(100%, var(--w-safe));
  margin-inline:auto;
  padding-inline:var(--pad-x);
  text-align:center;
}

/* ========= 2. COMPONENTS ========= */
/* 2.1 Top (logo + title) */
.top{ transform: translateY(var(--top-shift-y)); }

h1{ margin:100px 0 40px 0; }
h1 img{
  width:140px;
  margin-inline:auto;
  -webkit-user-drag:none;
  user-select:none;
}
@media (min-width:768px){
  h1 img{ width:220px; }
}

.title{
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--ls-title);
  color: #444;
  line-height: 1.3;
}

/* リボン部分 */
.title::before{
  content: "";
  position: absolute;
  left: -0.7em;  /* 左のリボンはみ出し */
  right: -0.7em; /* 右のリボンはみ出し */
  background: #c35239;
  height: 1.3em;
  bottom: -0.4em;
  z-index: -1;
  
  transform: scaleX(0);          /* 最初は幅ゼロ */
  transform-origin: left center; /* 左から伸びる */

  /* 1 伸びるのは一回だけ
     2 色変化は10秒ごとにループ */
  animation:
      ribbonGrow 0.7s ease-out forwards,
      ribbonFlash 1.6s ease-out 0.8s forwards,
      ribbonFlashLoop 10s ease-in-out 3.0s infinite;   /* ループ */
}
/* 最初にリボンが伸びる */
@keyframes ribbonGrow {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
/* 伸び切った直後に白っぽく光る（1回だけ） */
@keyframes ribbonFlash {
  0%   { background-color: #c35239; }
  50%  { background-color: #D4B567; }
  100% { background-color: #c35239; }
}
/* ここがループ（ゆっくり色が変わって戻る） */
@keyframes ribbonFlashLoop {
  0%   { background-color: #c35239; }
  50%  { background-color: #EAD8A4; }
  100% { background-color: #c35239; }
}

/* 2.2 Stage */
.stage{
  position:relative;
  width:min(100%, var(--w-safe)); /* container と同じ幅にする */
  margin:0 auto 20px;             /* 中央寄せ＋下だけ余白 */
  height:auto;
}

/* 2.3 Hero layer */
.hero-layer{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, var(--hero-shift-y)) scale(var(--hero-scale));
  width:var(--hero-w-sp);
  aspect-ratio:var(--hero-ar);
  z-index:0;
  pointer-events:none;
  border-radius:6px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,var(--bg-overlay));
  z-index:1;
}

/* ===== PC用の hero-layer ===== */
@media (min-width:768px){
  .hero-layer{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin-inline:auto;
    width:var(--hero-w-pc);
    aspect-ratio:var(--hero-ar);
  }
}

/* 2.3.1 Slideshow slides */
.hero-layer.has-slideshow{
  background:none !important;
}
.hero-layer .slide{
  position:absolute; inset:0;
  background:center / cover no-repeat;
  opacity:0;
  transition:opacity var(--slide-fade) ease;
  z-index:0;
}
.hero-layer .slide.is-active{ opacity:1; }

/* 2.4 Content */
.concept{
  font-size:16px;
  line-height:1.9;
  letter-spacing:var(--ls-concept);
  font-weight: 500;
  margin-inline:auto;
  /* max-width:60ch; */
  max-width:var(--hero-w-pc);
  opacity:1;
  text-align:left;
}
@media (min-width:768px){
  .concept{
    /* max-width:46.5ch; */
    max-width: var(--hero-w-pc);  /* スライドショーと同じ幅にする */
  }
}

.address{
  margin-top:var(--addr-gap);
  margin-bottom:var(--addr-gap-bottom);
  font-size:16px;
  font-weight:500;
  letter-spacing:var(--ls-address);
}

.sns{
  margin-top:var(--sns-gap-top);
  margin-bottom:var(--sns-gap-bottom);
}
.sns h2{
  font-size:var(--sns-heading-size);
  font-weight:700;
  margin-bottom:var(--sns-heading-bottom);
  letter-spacing:var(--ls-sns-heading);
}
.sns ul{
  display:flex;
  justify-content:center;
  gap:var(--sns-icons-gap);
  padding-top:4px;
  margin-bottom:100px;
}
.sns a{
  text-decoration:none;
  transition:opacity .25s ease;
}
.sns a:hover{ opacity:.6; }
.sns img{
  display:block;
  width:var(--sns-icon-size);
  height:auto;
}

/* ========= 3. テキストリンク ========= */
a:where(:not(:has(img))),
a:where(:not(:has(img))):visited{
  color:var(--link);
  text-decoration:var(--link-underline);
  text-underline-offset:.18em;
  transition:color .2s ease;
}
a:where(:not(:has(img))):hover{
  color:var(--link-hover);
}

/* ========= 4. ACCESSIBILITY / PRINT ========= */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
@media print{
  a{ color:inherit; text-decoration:none }
}

/* ========= 5. DESKTOP ========= */
@media (min-width:768px){
  :root{
    --top-shift-y:-50px;
    --sns-gap-bottom:-40px;
    --addr-gap-bottom:12px;
  }
}

/* ========= 6. MOBILE ========= */
@media (max-width:767px){
  :root{
    --w-safe:400px;
    --hero-w-sp:100%;    /* 行の幅いっぱい */
  }

  .container{
    padding-inline: 0;  /* スマホだけ左右の余白をゼロに */
  }

  /* logoエリア */
  h1{
    margin-top: 50px;
  }

  /* title */
  .title{
    margin-bottom: 45px;
  }

  /* スライドショー：左右16pxを引いた幅にする */
  .hero-layer{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin-inline:auto;
    width: calc(100% - 32px);
    aspect-ratio:var(--hero-ar);
  }

  /* コンセプト文も同じ幅にそろえる */
  .concept{
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin-inline:auto;
  }

  /* SNSアイコン */
  .sns ul{
    margin-bottom: 40px;
  }
}

/* ========= 7. EFFECT HOOKS ========= */
.content{
  transform:translateY(var(--content-shift-y));
}