/* ===== Mobile guide hub (guide page layout) ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.guide-hub-body {
  background: #ece8e1;
  color: #4a4540;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

.guide-hub {
  min-height: 100vh;
  padding-bottom: 0;
}

.guide-hub-body .footer {
  margin-bottom: 64px;
}

.guide-hub-canvas {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 40px rgba(28, 26, 23, .06);
}

/* Hero */
.gh-hero {
  position: relative;
  min-height: clamp(520px, 118vw, 680px);
  overflow: hidden;
}
.gh-logo {
  position: relative;
  width: 20%;
  z-index: 3;
}
.gh-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 34%, rgba(255, 255, 255, .2) 58%, rgba(255, 255, 255, 0) 72%),
    url('../image/guide-hub/first-hero.png') 72% center / cover no-repeat;
}

.gh-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(22px, 5.5vw, 40px) clamp(66px, 20vw, 90px);
}

.gh-hero-title {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 8px);
  margin-bottom: clamp(18px, 4vw, 28px);
  font-size: clamp(20px, 4.8vw, 30px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .14em;
  color: #4a4540;
}

.gh-hero-sub {
  margin-bottom: clamp(16px, 3.5vw, 24px);
  font-size: clamp(18px, 4.4vw, 28px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .12em;
  color: #4a4540;
}

.gh-hero-rule {
  width: min(100%, 280px);
  height: 1px;
  margin: 0 0 clamp(18px, 4vw, 26px);
  border: none;
  background: linear-gradient(90deg, #c9bfb0 0%, rgba(201, 191, 176, .2) 100%);
}

.gh-hero-desc {
  max-width: 28em;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: .06em;
  color: #7a746c;
}

.gh-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(52px, 12vw, 72px);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #9a928a;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 10px;
  letter-spacing: .28em;
}

.gh-hero-scroll svg {
  width: 12px;
  height: 28px;
  opacity: .7;
}

.gh-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
}

.gh-hero-wave svg {
  display: block;
  width: 100%;
  height: clamp(32px, 8vw, 56px);
}

/* About header */
.gh-about {
  position: relative;
  padding: clamp(8px, 2vw, 16px) clamp(20px, 5vw, 32px) clamp(28px, 6vw, 40px);
  text-align: center;
  background: linear-gradient(81deg, #fff 0% 0%, rgb(248 240 235) 100%);
}

.gh-about-floral {
  position: absolute;
  bottom: clamp(8px, 2vw, 16px);
  width: clamp(72px, 18vw, 96px);
  height: clamp(88px, 22vw, 112px);
  opacity: .42;
  background: center / contain no-repeat;
}

.gh-about-floral--left {
  left: clamp(4px, 2vw, 12px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cpath d='M40 90V30M40 30c-12 0-22 10-22 22M40 30c12 0 22 10 22 22M28 52c-8 6-12 14-10 22M52 52c8 6 12 14 10 22' stroke='%23b8a99a' stroke-width='1' fill='none'/%3E%3Ccircle cx='28' cy='48' r='4' fill='%23d4c4b0' opacity='.5'/%3E%3Ccircle cx='52' cy='56' r='3' fill='%23d4c4b0' opacity='.4'/%3E%3C/svg%3E");
}

.gh-about-floral--right {
  right: clamp(4px, 2vw, 12px);
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cpath d='M40 90V30M40 30c-12 0-22 10-22 22M40 30c12 0 22 10 22 22M28 52c-8 6-12 14-10 22M52 52c8 6 12 14 10 22' stroke='%23b8a99a' stroke-width='1' fill='none'/%3E%3Ccircle cx='28' cy='48' r='4' fill='%23d4c4b0' opacity='.5'/%3E%3Ccircle cx='52' cy='56' r='3' fill='%23d4c4b0' opacity='.4'/%3E%3C/svg%3E");
}

.gh-about-title {
  position: relative;
  z-index: 1;
  font-size: clamp(18px, 4.2vw, 24px);
  font-weight: 500;
  letter-spacing: .16em;
  color: #5c5650;
}

.gh-about-tag {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .32em;
  color: #b0a89c;
}

/* 1DAY section (image-like hero) */
.gh-1day{
  position:relative;
  background:#fcfbfa;
  min-height:clamp(360px,88vw,520px);
  overflow:hidden;
}
.gh-1day-media{position:absolute;inset:0;z-index:1}
/* .gh-1day-media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 40%, rgba(255,255,255,0) 66%);
} */
.gh-1day-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:right center;
}
.gh-1day-inner{
  position:relative;z-index:2;
  padding:clamp(18px,5vw,28px) clamp(22px,5.5vw,40px) clamp(72px,16vw,100px);
  max-width:520px;
  top:50%;
  transform: translateY(30%);
}

.gh-1day-desc{
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(14px, 3.1vw, 16px);
  font-weight: 500;
  line-height: 4;
  letter-spacing: 0.06em;
  color: #6b6560;
}
.gh-1day-desc-narrow{
  display:none;
}
@media screen and (max-width: 560px){
  .gh-1day-desc-wide{
    display:none;
  }
  .gh-1day-desc-narrow{
    display:block;
  }
}
.gh-1day-wave{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;
}
.gh-1day-wave svg{
  display:block;width:100%;height:clamp(32px,8vw,56px);
}

/* Philosophy */
.gh-philosophy{
  padding:clamp(36px,8vw,56px) clamp(24px,6vw,40px) clamp(40px,8vw,56px);
  background:#fff;
}
.gh-philosophy-head{
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,18px);
  margin-bottom:clamp(32px,7vw,48px);
}
.gh-philosophy-jp{
  flex-shrink:0;
  font-size:clamp(22px,5.2vw,30px);
  font-weight:500;
  letter-spacing:.14em;
  color:#3a3630;
}
.gh-philosophy-en{
  flex-shrink:0;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.38em;
  color:#b0a89c;
}
.gh-philosophy-line{
  flex:1;
  height:1px;
  background:#e8e2da;
}
.gh-philosophy-text{
  margin:0;
  font-size:clamp(20px,4.8vw,28px);
  font-weight:500;
  line-height:1.85;
  letter-spacing:.1em;
  color:#3a3630;
}

/* Features */
.gh-features{
  padding:clamp(40px,8vw,56px) clamp(16px,4vw,24px) clamp(48px,8vw,64px);
  background:#f7f6f4;
}
.gh-features-title{
  margin:0 0 clamp(28px,6vw,40px);
  text-align:center;
  font-size:clamp(20px,4.6vw,26px);
  font-weight:600;
  letter-spacing:.12em;
  color:#3d4f5f;
}
.gh-features-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,3vw,20px);
}
.gh-feature-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(28,26,23,.07);
}
.gh-feature-img-wrap{
  aspect-ratio:4/3;
  overflow:hidden;
  line-height:0;
}
.gh-feature-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gh-feature-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:clamp(14px,3.5vw,18px) clamp(12px,3vw,16px) clamp(14px,3.5vw,18px);
}
.gh-feature-title{
  margin:0;
  padding-right:18px;
  font-size:clamp(11px,2.6vw,13px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:.04em;
  color:#3d4f5f;
}
.gh-feature-num{
  display:block;
  margin-bottom:4px;
  font-size:clamp(10px,2.4vw,11px);
  font-weight:500;
  letter-spacing:.06em;
  color:#7a8b9a;
}
.gh-feature-toggle{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  color:#a8b0b8;
  transition:color .25s, opacity .25s;
}
.gh-feature-toggle:hover{color:#3d4f5f}
.gh-feature-toggle svg{
  width:10px;
  height:10px;
}
.gh-feature-toggle-icon--close{
  display:none;
}
.gh-feature-card.is-open .gh-feature-toggle-icon--open{
  display:none;
}
.gh-feature-card.is-open .gh-feature-toggle-icon--close{
  display:block;
}
.gh-feature-more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.gh-feature-more-inner{
  overflow:hidden;
}
.gh-feature-card.is-open .gh-feature-more{
  grid-template-rows:1fr;
}
.gh-feature-lead{
  margin:0 0 8px;
  padding-top:8px;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:clamp(10px,2.4vw,11px);
  font-weight:500;
  line-height:1.7;
  letter-spacing:.04em;
  color:#4a5560;
}
.gh-feature-desc{
  margin:0;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:clamp(9px,2.2vw,10px);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.03em;
  color:#8a9098;
}

/* Nav cards */
.gh-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 16px);
  padding: 0 clamp(16px, 4vw, 24px) clamp(32px, 6vw, 48px);
  background: #f7f6f4;
}

.gh-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 2.5vw, 14px);
  min-height: clamp(88px, 22vw, 104px);
  padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(14px, 3.5vw, 18px);
  border: 1px solid rgba(28, 26, 23, .06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(28, 26, 23, .05);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}

.gh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28, 26, 23, .08);
}

.gh-card-icon {
  flex-shrink: 0;
  width: clamp(44px, 11vw, 52px);
  height: clamp(44px, 11vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0ebe3;
  color: #7a8b6e;
}

.gh-card-icon svg {
  width: clamp(22px, 5.5vw, 26px);
  height: clamp(22px, 5.5vw, 26px);
}

.gh-card-label {
  position: relative;
  z-index: 2;
  padding-right: 36%;
  font-size: clamp(15px, 3.8vw, 18px);
  font-weight: 600;
  letter-spacing: .1em;
  color: #3a3630;
}

.gh-card-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 28%, #000 72%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 28%, #000 72%);
  opacity: .88;
}

.gh-card-arrow {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: clamp(34px, 8.5vw, 40px);
  height: clamp(34px, 8.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7a8b6e;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

/* Sticky footer */
.gh-sticky-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 100;
  transform: translateX(-50%);
  width: 100%;
  max-width: 840px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #7a8b6e;
  box-shadow: 0 -4px 20px rgba(28, 26, 23, .12);
}

.gh-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 12px);
  min-height: 64px;
  padding: 10px 12px;
  text-decoration: none;
  color: #fff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 500;
  letter-spacing: .06em;
  transition: background .25s;
}

.gh-bar-btn:first-child {
  border-right: 1px solid rgba(255, 255, 255, .28);
}

.gh-bar-btn:hover {
  background: rgba(0, 0, 0, .08);
}

/* LINE float sits above sticky CTA bar */
.guide-hub-body .line-float {
  bottom: 88px;
}

@media (max-width: 768px) {
  .guide-hub-body .line-float {
    bottom: 76px;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .guide-hub-body .line-float {
    bottom: calc(88px + env(safe-area-inset-bottom));
    right: calc(16px + env(safe-area-inset-right));
  }
}

@media (max-width: 768px) {
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .guide-hub-body .line-float {
      bottom: calc(76px + env(safe-area-inset-bottom));
    }
  }
}

.gh-bar-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-bar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gh-bar-icon--cal {
  width: 24px;
  height: 24px;
}

.gh-bar-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #7a8b6e;
  font-size: 14px;
  line-height: 1;
}

/* ===== Responsive ===== */

/* Desktop canvas */
@media screen and (min-width: 841px) {
  .guide-hub {
    padding: 24px 0 72px;
  }
}

/* Tablet */
@media screen and (min-width: 720px) {
  .gh-features-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gh-feature-title {
    font-size: 12px;
  }

  .gh-feature-lead {
    font-size: 11px;
  }

  .gh-feature-desc {
    font-size: 10px;
  }
}

@media screen and (max-width: 719px) {
  .gh-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* Mobile */
@media screen and (max-width: 560px) {
  .guide-hub {
    padding-bottom: 0;
  }

 

  .gh-hero {
    padding-top: clamp(8px, 2vw, 16px);
  }

  .guide-hub-canvas {
    box-shadow: none;
  }

  /* Hero */
  .gh-hero {
    min-height: clamp(480px, 125vw, 580px);
  }
  .gh-logo {
    position: relative;
    width: 36%;
    z-index: 3;
  }
  .gh-hero-bg {
    background:
      url('../image/guide-hub/first-hero.png') 66% 30% / cover no-repeat;
  }

  .gh-hero-content {
    padding: 80px clamp(18px, 5vw, 24px) clamp(63px, 18vw, 100px)
  }

  .gh-hero-title {
    font-size: clamp(18px, 5vw, 22px);
    letter-spacing: .12em;
  }

  .gh-hero-sub {
    font-size: clamp(16px, 4.5vw, 20px);
  }

  .gh-hero-desc {
    max-width: none;
    font-size: clamp(10px, 3vw, 12px);
    color: #000;
  }
  .gh-hero-scroll{
    bottom: 0;
    color: #474442;
  }

  /* About */
  .gh-about {
    padding: clamp(12px, 3vw, 20px) clamp(16px, 4vw, 24px) clamp(24px, 5vw, 32px);
    background: linear-gradient(81deg, #f8f2eb 0% 0%, rgb(248 240 235) 100%);
  }

  .gh-about-title {
    font-size: clamp(16px, 4.2vw, 20px);
  }

  /* 1DAY / About salon block */
  .gh-1day {
    min-height: clamp(320px, 95vw, 420px);
  }

  .gh-1day-img {
    object-fit: cover;
    object-position: 75% center;
    opacity: .92;
  }
  .gh-1day-media::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(98deg, rgba(255, 255, 255, .96) 0%, rgb(255 255 255 / 86%) 42%, rgb(255 255 255 / 2%) 68%, rgba(255, 255, 255, .1) 100%);
    z-index: 2;
  }

  .gh-1day-inner {
    top: auto;
    transform: translateY(40px);
    max-width: 58%;
    padding: clamp(20px, 5vw, 28px) clamp(14px, 4vw, 20px) clamp(48px, 12vw, 64px);
  }

  .gh-1day-desc {
    font-size: clamp(11px, 3vw, 13px);
    line-height: 2.2;
  }

  /* Philosophy */
  .gh-philosophy {
    padding: clamp(28px, 7vw, 40px) clamp(18px, 5vw, 24px);
  }

  .gh-philosophy-head {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: clamp(24px, 6vw, 32px);
  }

  .gh-philosophy-line {
    flex-basis: 100%;
    order: 3;
  }

  .gh-philosophy-text {
    font-size: clamp(16px, 4.2vw, 20px);
    line-height: 1.9;
  }

  /* Features */
  .gh-features {
    padding: clamp(32px, 7vw, 44px) clamp(14px, 4vw, 20px) clamp(40px, 8vw, 52px);
  }

  .gh-features-title {
    font-size: clamp(18px, 4.5vw, 22px);
  }

  .gh-features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .gh-feature-img-wrap {
    aspect-ratio: 16 / 9;
  }

  .gh-feature-title {
    font-size: clamp(13px, 3.5vw, 15px);
    padding-right: 22px;
  }

  .gh-feature-num {
    font-size: 11px;
  }

  .gh-feature-lead {
    font-size: clamp(12px, 3.2vw, 13px);
  }

  .gh-feature-desc {
    font-size: clamp(11px, 3vw, 12px);
  }

  /* Nav cards */
  .gh-nav {
    padding: 0 clamp(14px, 4vw, 20px) clamp(28px, 6vw, 40px);
  }

  .gh-card {
    min-height: clamp(80px, 20vw, 96px);
    padding: clamp(10px, 3vw, 14px);
  }

  .gh-card-label {
    font-size: clamp(14px, 3.6vw, 16px);
    padding-right: 42%;
  }

  .gh-card-media {
    width: 46%;
  }

  .gh-card-icon {
    width: 40px;
    height: 40px;
  }

  .gh-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .gh-card-arrow {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Sticky footer */
  .gh-sticky-bar {
    max-width: 100%;
  }

  .gh-bar-btn {
    min-height: 56px;
    gap: 6px;
    padding: 8px 10px;
    font-size: clamp(10px, 2.6vw, 11px);
  }

  .gh-bar-icon {
    width: 24px;
    height: 24px;
  }

  .gh-bar-icon--cal {
    width: 20px;
    height: 20px;
  }

  .gh-bar-arrow {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}

/* Small phones */
@media screen and (max-width: 380px) {
  .gh-hero-title {
    font-size: 17px;
  }

  .gh-hero-sub {
    font-size: 15px;
  }

  .gh-1day-inner {
    max-width: 62%;
  }

  .gh-bar-btn span:not(.gh-bar-icon):not(.gh-bar-arrow) {
    font-size: 9px;
    letter-spacing: .04em;
  }

  .gh-bar-arrow {
    display: none;
  }
}

/* Touch devices — disable hover lift */
@media (hover: none) {
  .gh-card:hover {
    transform: none;
    box-shadow: 0 4px 18px rgba(28, 26, 23, .05);
  }
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .gh-sticky-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .guide-hub {
    padding-bottom: 0;
  }

  .guide-hub-body .footer {
    margin-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}