/* HARUMI'S HAWAII — homepage-specific */

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--header-h) + 1.5rem);padding-bottom:clamp(4.5rem,10vw,7.5rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(95deg, rgba(244,251,253,.95) 0%, rgba(244,251,253,.6) 38%, rgba(244,251,253,.12) 62%, transparent 80%),
    radial-gradient(120% 80% at 80% 6%, rgba(255,255,255,.55), transparent 42%),
    url('../img/water-topview.jpg') center/cover no-repeat,
    linear-gradient(180deg,#eef8fd 0%,#cbe8f8 26%,#8fd2f0 50%,#46baea 72%,#1597d6 100%);
}
.hero__sun{position:absolute;top:12%;right:14%;width:min(26vw,200px);aspect-ratio:1;border-radius:50%;z-index:1;
  background:radial-gradient(circle,#fff 0%,#fff3d6 38%,rgba(255,213,140,.35) 62%,transparent 72%);
  mix-blend-mode:screen;animation:hero-breathe 9s ease-in-out infinite}
.hero__caustics{position:absolute;inset:0;z-index:1;opacity:.45;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  animation:hero-drift 24s linear infinite}
.hero__inner{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.hero__copy{min-width:0}
.hero__photo{position:relative;justify-self:end;width:100%;max-width:380px;animation:hero-rise 1.2s .55s both}
.hero__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border:10px solid #fff;border-radius:.9rem;box-shadow:0 30px 64px rgba(21,112,155,.3)}
.hero__photo figcaption{margin:.9rem auto 0;width:fit-content;padding:.3rem 1rem;border-radius:2rem;background:rgba(255,255,255,.72);font-size:.76rem;letter-spacing:.08em;color:var(--lagoon)}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.7);padding:.4rem 1rem;border-radius:2rem;color:var(--lagoon);font-size:.82rem;font-weight:500;margin-bottom:1.5rem;box-shadow:0 6px 16px rgba(30,126,132,.1);animation:hero-rise 1s both}
/* 和文10字が1行に収まる大きさ。写真と並ぶ 900〜1180px の幅がいちばん厳しい */
.hero__title{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(1.9rem,4.2vw,3.9rem);line-height:1.2;letter-spacing:-.01em;color:var(--lagoon);margin-bottom:1.6rem;text-shadow:0 2px 30px rgba(255,255,255,.4)}
.hero__title span{display:block;overflow:hidden}
.hero__title span i{display:block;font-style:normal;animation:hero-rise 1.2s var(--ease) both}
.hero__title span:nth-child(1) i{animation-delay:.15s}
.hero__title span:nth-child(2) i{animation-delay:.32s}
/* 320px 級の端末で「ケア」が3行目に落ちないよう、一段小さくする */
@media(max-width:359px){.hero__title{font-size:1.7rem}}
.hero__lede{max-width:34rem;color:#1d5b5f;font-size:1.06rem;line-height:1.85;margin-bottom:2.2rem;animation:hero-rise 1s .7s both}
.hero__actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;animation:hero-rise 1s .9s both}
.hero__card{position:absolute;z-index:4;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-radius:1.2rem;padding:.8rem 1.1rem;box-shadow:0 16px 36px rgba(30,126,132,.18);font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:.55rem;animation:hero-floaty 6s ease-in-out infinite}
.hero__card small{display:block;color:var(--ink-soft);font-weight:400;font-size:.68rem}
.hero__card .d{width:9px;height:9px;border-radius:50%;background:var(--aqua)}
.hero__card{max-width:14rem}
.hero__card--1{left:-15%;top:10%;animation-delay:-1s}
.hero__card--2{right:-7%;bottom:11%;animation-delay:-3s}
.hero__waves{position:absolute;bottom:-1px;left:0;right:0;z-index:2;line-height:0}
.hero__waves svg{width:100%;height:clamp(70px,12vw,140px);display:block}

@media(max-width:900px){
  .hero__card{display:none}
  .hero__inner{grid-template-columns:1fr;gap:2.2rem}
  .hero__photo{justify-self:center;max-width:min(100%,330px)}
  .hero__photo img{border-width:8px}
  .hero__bg{background:
    linear-gradient(180deg, rgba(244,251,253,.96) 0%, rgba(244,251,253,.5) 32%, rgba(244,251,253,.06) 55%, transparent 75%),
    url('../img/water-topview.jpg') center/cover no-repeat,
    linear-gradient(180deg,#eef8fd,#46baea);}
}

@keyframes hero-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes hero-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:1}}
@keyframes hero-drift{from{transform:translate(0,0)}to{transform:translate(-60px,-30px)}}
@keyframes hero-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- NEWS ---------- */
.news{max-width:860px;margin-inline:auto}
.news__list{display:grid;gap:0;margin-top:.5rem}
.news__item{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.news__item:first-child{border-top:1px solid var(--line)}
.news__date{font-family:"Fraunces",serif;font-style:italic;color:var(--aqua-deep);font-size:.95rem;white-space:nowrap}
.news__text{color:var(--ink)}
.news__text a{color:var(--aqua-deep);text-decoration:none}
.news__text a:hover{text-decoration:underline}
.news__more{text-align:center;margin-top:1.6rem}
@media(max-width:560px){.news__item{grid-template-columns:1fr;gap:.2rem}}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding-inline:.5rem}
.gallery figure{margin:0;overflow:hidden;border-radius:.6rem;aspect-ratio:1}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
@media(max-width:720px){.gallery{grid-template-columns:repeat(2,1fr)}}