@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root{--ink:#111;--muted:#575757;--pink:#ff7f7f;--magenta:#ff7fff;--blue:#7fbfff;--mint:#7fffbf;--green:#BFFF7F;--yellow:#ffff7f;--peach:#f6b085;--line:#dedede}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"M PLUS Rounded 1c",sans-serif;line-height:1.75;background:#fff}h1,h2,h3,.brand,.category-no,.guide-card strong{font-family:"Zen Maru Gothic",sans-serif}a{text-decoration:none;color:inherit}button,input{font:inherit}
.topbar{min-height:94px;padding:10px 4.5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;background:rgba(255,255,255,.96);position:sticky;top:0;z-index:40;backdrop-filter:blur(8px)}.logo-wrap{display:block;width:250px}.site-logo{display:block;width:100%;height:auto}.topbar nav{display:flex;gap:25px;font-size:.74rem;font-weight:700;letter-spacing:.09em}.topbar nav a:hover{opacity:.55}
.hero{min-height:700px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:52px 7vw 70px}.hero-visual{height:560px;position:relative}.shape{position:absolute;border-radius:50%;z-index:0}.s1{width:176px;height:176px;background:#f3dd74;left:-25px;bottom:70px}.s2{width:149px;height:149px;background:#bfe4d5;right:25px;top:25px}.s3{width:116px;height:116px;background:#f3b28c;right:2px;bottom:35px}.hero-photo{position:absolute;inset:35px 50px 30px 20px;border-radius:47% 53% 44% 56%/48% 45% 55% 52%;overflow:hidden;background:#f5e9ef;isolation:isolate;z-index:1}.hero-slide{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);z-index:1;will-change:opacity,transform,clip-path}.hero-slide.active{opacity:1;z-index:2}.slide-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;color:rgba(50,50,50,.22);font-weight:700;letter-spacing:.16em;pointer-events:none}.hero-badge{position:absolute;right:22px;bottom:0;width:122px;height:122px;border-radius:50%;background:#222;color:#fff;display:grid;place-items:center;text-align:center;font-weight:700;line-height:1.2;letter-spacing:.08em;transform:rotate(-7deg);z-index:6}.hero-copy{transform:translateX(24px)}.kicker,.mini{font-size:.76rem;font-weight:700;letter-spacing:.14em}.hero h1{font-size:clamp(2.8rem,5vw,5.4rem);line-height:1.18;margin:14px 0 25px;font-weight:700}.pink-line{position:relative;z-index:0}.pink-line:after{content:"";position:absolute;left:-5px;right:-5px;bottom:8px;height:14px;background:linear-gradient(90deg,#ff7f7f 0%,#ff7fff 20%,#7fbfff 40%,#7fffbf 60%,#BFFF7F 80%,#ffff7f 100%);z-index:-1}.lead{font-family:"M PLUS Rounded 1c",sans-serif;font-size:1rem;font-weight:500;color:#343434}.round-link{display:inline-flex;gap:22px;align-items:center;margin-top:25px;border:2px solid #222;border-radius:999px;padding:13px 22px;font-weight:700}.round-link:hover{background:#222;color:white}
.concept{position:relative;text-align:center;padding:65px 20px;background:var(--pink);overflow:hidden}.concept .pill{display:inline-block;background:#fff;padding:7px 18px;border-radius:999px}.concept h2{font-size:clamp(2.1rem,4vw,3.9rem);line-height:1.4;margin:20px 0}.concept>p:last-of-type{max-width:720px;margin:0 auto}.concept-deco,.concept-hearts{position:absolute;color:#fff;font-size:4rem;font-weight:300;opacity:.95;letter-spacing:.1em}.concept-deco{right:9%;top:18px}.concept-hearts{left:9%;bottom:10px}
.howto{padding:85px 7vw;background:var(--yellow);color:#111}.compact-head{margin-bottom:42px}.category-head{display:grid;grid-template-columns:100px 1fr;gap:24px}.category-no{font-size:4.8rem;line-height:1;font-weight:700}.category-head p:first-child{letter-spacing:.12em;font-weight:700;font-size:.76rem;margin:0}.category-head h2{font-size:2.55rem;margin:6px 0 8px;line-height:1.35}.rule{width:72px;height:3px;background:#111;margin:13px 0}.desc{color:#3f3f3f}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.steps article{position:relative;background:#fff;border-radius:50% 50% 24px 24px;min-height:260px;padding:32px 18px 22px;text-align:center;border:1px solid rgba(0,0,0,.12)}.step-icon{font-size:2.8rem;line-height:1;margin-bottom:8px}.steps b{display:block;font-size:1.3rem}.steps h3{font-size:1.02rem;margin:7px 0}.steps p{font-size:.8rem;color:#555;margin:0}
.floor-guide{display:grid;grid-template-columns:70px 1fr;padding:76px 6vw;background:#fff}.side-title{writing-mode:vertical-rl;letter-spacing:.16em;font-weight:700;font-size:.75rem}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.guide-card{min-height:190px;padding:24px;border-radius:18px;display:flex;flex-direction:column;justify-content:flex-end;transition:.2s}.guide-card:hover{transform:translateY(-4px)}.guide-card span{font-size:2rem;font-weight:700}.guide-card strong{font-size:1.06rem}.guide-card small{font-size:.75rem}.g1{background:var(--magenta)}.g2{background:var(--yellow)}.g3{background:var(--blue)}.g4{background:var(--peach)}
.rental-section{padding:90px 7vw;background:var(--peach)}.rental-intro{display:grid;grid-template-columns:100px 1fr;gap:24px;margin-bottom:36px}.white-no{background:#fff;border-radius:50%;width:82px;height:82px;display:grid;place-items:center;font-size:2.8rem}.rental-intro h2{font-size:2.65rem;margin:4px 0 5px}.rental-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:1120px;margin:0 auto}.rental-card{background:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;min-height:360px}.rental-photo{background:linear-gradient(145deg,#f1eee7,#e5ece9);min-height:320px;display:grid;place-items:center;color:#a0a0a0;letter-spacing:.12em;position:relative}.rental-photo .card-no{position:absolute;left:18px;bottom:8px;font-size:3.3rem;color:rgba(0,0,0,.13);font-weight:700}.rental-copy{padding:30px 24px;display:flex;flex-direction:column;justify-content:center}.rental-copy h3{font-size:1.25rem;margin:7px 0}.rental-copy .story{font-size:.82rem;color:#555}.price{font-weight:700;font-size:1.08rem}.stock{font-size:.78rem;color:#486f5b;margin:8px 0 14px}.detail-btn,.primary-btn{border:0;background:#111;color:#fff;border-radius:999px;padding:11px 18px;cursor:pointer;font-weight:700}.detail-btn:hover,.primary-btn:hover{opacity:.75}
.attention-section{padding:90px 7vw;background:#98ea98}.attention-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.attention-grid>div{background:rgba(255,255,255,.9);padding:25px;border-radius:18px}.attention-grid strong{font-size:1.05rem}.attention-grid p{font-size:.87rem;color:#444}
.reservation-section{padding:90px 7vw;background:#a9a3ef}.mypage-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:35px}.panel{background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.09);border-radius:20px;padding:26px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{font-size:.82rem;color:#565656;display:flex;flex-direction:column}.form-grid .full{grid-column:1/-1}input{border:1px solid #d5d5d5;padding:11px 12px;border-radius:10px;margin-top:5px;background:#fff}.small,.muted{font-size:.8rem;color:#666}.history-item{padding:12px 0;border-bottom:1px solid #eee}.status{display:inline-block;background:#f4e8b9;padding:3px 8px;border-radius:999px;font-size:.72rem}
.modal{display:none;position:fixed;inset:0;z-index:60}.modal.show{display:block}.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.modal-card{position:relative;z-index:1;background:#fff;width:min(950px,92vw);max-height:90vh;overflow:auto;margin:5vh auto;border-radius:26px;padding:28px}.close{position:absolute;right:17px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:#eee;font-size:1.4rem;cursor:pointer}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px}.detail-photo{height:380px;border-radius:22px;background:linear-gradient(145deg,#f0e8df,#e9f4f0);display:grid;place-items:center;color:#999;font-weight:700;letter-spacing:.14em}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:10px}.cal-head,.cal-day{text-align:center;padding:9px 3px;border-radius:9px}.cal-head{font-size:.72rem;color:#777}.cal-day{border:1px solid #ddd;background:#fff;cursor:pointer}.cal-day.selected{background:#111;color:#fff}.cal-day.blocked{background:#f1f1f1;color:#aaa;text-decoration:line-through;cursor:not-allowed}.summary{background:#f8f6f1;border-radius:14px;padding:14px;margin-top:14px}.notice{padding:12px;border-radius:12px;background:#fff4cf;font-size:.84rem}
footer{padding:34px 7vw;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-logo{width:210px;height:auto}
/* slideshow fx */
.hero-slide.fx-fade-in{animation:fxFadeIn 1.35s ease both}.hero-slide.fx-fade-out{animation:fxFadeOut 1.35s ease both}@keyframes fxFadeIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@keyframes fxFadeOut{from{opacity:1}to{opacity:0;transform:scale(.985)}}
.hero-slide.fx-inside-in{animation:fxInsideIn 1.45s cubic-bezier(.22,.7,.25,1) both}.hero-slide.fx-outside-out{animation:fxOutsideOut 1.45s cubic-bezier(.22,.7,.25,1) both}@keyframes fxInsideIn{from{opacity:.1;clip-path:circle(0 at 50% 50%);transform:scale(1.08)}to{opacity:1;clip-path:circle(75% at 50% 50%);transform:scale(1)}}@keyframes fxOutsideOut{from{opacity:1;clip-path:circle(75% at 50% 50%)}to{opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.96)}}
.hero-slide.fx-diag-tl-in{animation:fxDiagTLIn 1.5s ease both}.hero-slide.fx-diag-tl-out{animation:fxDiagTLOut 1.5s ease both}@keyframes fxDiagTLIn{from{opacity:.15;clip-path:polygon(0 0,0 0,0 0)}to{opacity:1;clip-path:polygon(0 0,160% 0,0 160%)}}@keyframes fxDiagTLOut{from{opacity:1}to{opacity:0;clip-path:polygon(100% 100%,100% 100%,100% 100%)}}
.hero-slide.fx-diag-tr-in{animation:fxDiagTRIn 1.5s ease both}.hero-slide.fx-diag-tr-out{animation:fxDiagTROut 1.5s ease both}@keyframes fxDiagTRIn{from{opacity:.15;clip-path:polygon(100% 0,100% 0,100% 0)}to{opacity:1;clip-path:polygon(-60% 0,100% 0,100% 160%)}}@keyframes fxDiagTROut{from{opacity:1}to{opacity:0;clip-path:polygon(0 100%,0 100%,0 100%)}}
.hero-slide.fx-zoom-in{animation:fxZoomIn 1.4s ease both}.hero-slide.fx-zoom-out{animation:fxZoomOut 1.4s ease both}@keyframes fxZoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes fxZoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)}}
@media(max-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}.guide-grid{grid-template-columns:repeat(2,1fr)}.rental-grid{grid-template-columns:1fr}.attention-grid{grid-template-columns:1fr}.topbar nav{gap:14px}}
@media(max-width:760px){.topbar{min-height:74px}.logo-wrap{width:170px}.topbar nav{display:none}.hero{grid-template-columns:1fr;padding:35px 5vw}.hero-visual{height:420px}.hero-copy{transform:none}.floor-guide{grid-template-columns:1fr;padding:55px 5vw}.side-title{writing-mode:horizontal-tb;margin-bottom:18px}.guide-grid{grid-template-columns:1fr 1fr}.category-head,.rental-intro{grid-template-columns:70px 1fr}.category-no{font-size:3rem}.category-head h2{font-size:1.9rem}.steps{grid-template-columns:1fr}.steps article{border-radius:24px;min-height:auto}.rental-card{grid-template-columns:1fr}.rental-photo{min-height:260px}.mypage-grid,.detail-layout{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.footer-logo{width:170px}}
@media(prefers-reduced-motion:reduce){.hero-slide{animation:none!important}}


/* ===== HERO decorative random motion ===== */
.hero-visual .shape {
  --move-x: 0px;
  --move-y: 0px;
  transform: translate(var(--move-x), var(--move-y));
  transition-property: transform;
  transition-timing-function: ease-in-out;
  will-change: transform;
}
.hero-badge {
  --badge-x: 0px;
  --badge-y: 0px;
  transform: translate(var(--badge-x), var(--badge-y)) rotate(-7deg) !important;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  will-change: transform;
}
.s1 { transition-duration: 4.4s; }
.s2 { transition-duration: 3.8s; }
.s3 { transition-duration: 4.9s; }
.hero-badge { transition-duration: 4.2s; }
@media (max-width:760px){
  .hero-visual .shape,.hero-badge { transition-duration: 4.5s !important; }
}



/* ===== Yellow circle position adjustment ===== */
/* 左下の黄色い〇を、右上の〇とほぼ同じ高さまで上へ移動 */
.hero-visual .s1 {
  top: 55px !important;
}
.small-title {
  font-size: 0.7em;
}

/* =========================================================
   Little_Pallet Responsive Layout
   PC / Laptop / Tablet / Smartphone
   ========================================================= */

html {
  font-size: 16px;
  overflow-x: hidden;
}

body {
  width: 100%;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

main,
section,
header,
footer {
  width: 100%;
}

.topbar {
  width: 100%;
  gap: 24px;
}

.logo-wrap {
  flex: 0 0 auto;
  width: clamp(180px, 18vw, 250px);
}

.topbar nav {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* HERO */
.hero {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(28px, 4vw, 64px);
  padding-left: clamp(24px, 7vw, 110px);
  padding-right: clamp(24px, 7vw, 110px);
}

.hero-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 1.15 / 1;
  min-height: 430px;
  max-height: 620px;
}

.hero-photo {
  inset:
    clamp(28px, 4vw, 46px)
    clamp(38px, 5vw, 64px)
    clamp(26px, 4vw, 42px)
    clamp(18px, 2vw, 30px);
}

.hero-copy {
  min-width: 0;
  transform: translateX(clamp(0px, 1.5vw, 24px));
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.lead {
  font-size: clamp(.92rem, 1.2vw, 1rem);
}

/* Decorative circles scale with screen */
.s1 {
  width: clamp(115px, 12vw, 176px);
  height: clamp(115px, 12vw, 176px);
  left: clamp(-24px, -1.5vw, -10px);
}

.s2 {
  width: clamp(100px, 10vw, 149px);
  height: clamp(100px, 10vw, 149px);
  right: clamp(8px, 2vw, 25px);
}

.s3 {
  width: clamp(80px, 8vw, 116px);
  height: clamp(80px, 8vw, 116px);
  right: clamp(0px, .5vw, 8px);
}

.hero-badge {
  width: clamp(92px, 9vw, 122px);
  height: clamp(92px, 9vw, 122px);
  font-size: clamp(.72rem, 1vw, .95rem);
}

/* Common section paddings */
.concept,
.howto,
.rental-section,
.attention-section,
.reservation-section {
  padding-left: clamp(24px, 7vw, 110px);
  padding-right: clamp(24px, 7vw, 110px);
}

.floor-guide {
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}

.category-head,
.rental-intro {
  min-width: 0;
}

.category-head > div:last-child,
.rental-intro > div:last-child {
  min-width: 0;
}

.category-head h2,
.rental-intro h2 {
  overflow-wrap: break-word;
}

.steps article,
.guide-card,
.rental-card,
.panel,
.attention-grid > div {
  min-width: 0;
}

/* Large laptop */
@media (max-width: 1200px) {
  .topbar nav {
    gap: 14px;
    font-size: .70rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 30px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-grid {
    grid-template-columns: 1fr;
    max-width: 900px;
  }

  .attention-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet landscape / small laptop */
@media (max-width: 900px) {
  .topbar {
    min-height: 82px;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .logo-wrap {
    width: clamp(165px, 24vw, 210px);
  }

  .topbar nav {
    gap: 10px 14px;
    max-width: 58%;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 52px;
  }

  .hero-visual {
    width: min(100%, 720px);
    margin: 0 auto;
    min-height: 420px;
  }

  .hero-copy {
    width: min(100%, 720px);
    margin: 0 auto;
    transform: none;
    text-align: center;
  }

  .lead {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
  }

  .round-link {
    justify-content: center;
  }

  .concept h2 {
    font-size: clamp(2rem, 6vw, 3.4rem);
  }

  .category-head,
  .rental-intro {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .category-no {
    font-size: 3.6rem;
  }

  .mypage-grid {
    grid-template-columns: 1fr;
  }

  .rental-card {
    grid-template-columns: .95fr 1.05fr;
  }
}

/* Tablet portrait / smartphone */
@media (max-width: 760px) {
  .topbar {
    min-height: 72px;
    padding: 8px 18px;
  }

  .logo-wrap {
    width: 170px;
  }

  .topbar nav {
    display: none;
  }

  .hero {
    padding: 26px 18px 48px;
    gap: 22px;
  }

  .hero-visual {
    min-height: 0;
    aspect-ratio: 1 / .92;
    max-height: none;
  }

  .hero-photo {
    inset: 30px 36px 28px 18px;
  }

  .s1 {
    top: 34px !important;
    left: -10px;
  }

  .s2 {
    top: 20px;
    right: 8px;
  }

  .s3 {
    right: -2px;
    bottom: 28px;
  }

  .hero-badge {
    right: 10px;
    bottom: 4px;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.4rem);
    line-height: 1.18;
  }

  .pink-line:after {
    bottom: 4px;
    height: 10px;
  }

  .concept,
  .howto,
  .rental-section,
  .attention-section,
  .reservation-section {
    padding: 64px 20px;
  }

  .floor-guide {
    grid-template-columns: 1fr;
    padding: 58px 20px;
  }

  .side-title {
    writing-mode: horizontal-tb;
    margin-bottom: 18px;
  }

  .guide-grid {
    grid-template-columns: 1fr 1fr;
  }

  .guide-card {
    min-height: 155px;
    padding: 18px;
  }

  .category-head,
  .rental-intro {
    grid-template-columns: 62px minmax(0,1fr);
    gap: 14px;
  }

  .category-no {
    font-size: 2.8rem;
  }

  .white-no {
    width: 58px;
    height: 58px;
    font-size: 2rem;
  }

  .category-head h2,
  .rental-intro h2 {
    font-size: clamp(1.65rem, 6vw, 2.2rem);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .steps article {
    min-height: 0;
    border-radius: 24px;
  }

  .rental-card {
    grid-template-columns: 1fr;
  }

  .rental-photo {
    min-height: 250px;
  }

  .form-grid,
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .form-grid .full {
    grid-column: auto;
  }

  footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-logo {
    width: 165px;
  }
}

/* Small smartphone */
@media (max-width: 480px) {
  .topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo-wrap {
    width: 148px;
  }

  .hero {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-visual {
    aspect-ratio: 1 / 1;
  }

  .hero-photo {
    inset: 25px 26px 24px 12px;
  }

  .s1 {
    width: 96px;
    height: 96px;
  }

  .s2 {
    width: 86px;
    height: 86px;
  }

  .s3 {
    width: 70px;
    height: 70px;
  }

  .hero-badge {
    width: 82px;
    height: 82px;
    font-size: .64rem;
  }

  .hero h1 {
    font-size: clamp(1.95rem, 11vw, 2.8rem);
  }

  .hero-copy .small-title {
    font-size: .68em;
  }

  .lead br {
    display: none;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-card {
    min-height: 125px;
  }

  .concept h2 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .concept-deco,
  .concept-hearts {
    font-size: 2.4rem;
    opacity: .7;
  }

  .category-head,
  .rental-intro {
    grid-template-columns: 1fr;
  }

  .category-no,
  .white-no {
    margin-bottom: 6px;
  }

  .modal-card {
    width: 94vw;
    padding: 22px 16px;
  }

  .detail-photo {
    height: 260px;
  }
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 5.4rem);
}

.hero h1 .small-title,
.hero h1 .pink-line {
  font-size: 0.5em;
}

/* =========================================================
   OUR CONCEPT decoration image replacement
   HTML変更不要：
   .concept-deco   の ☆ を images/star.png に置換
   .concept-hearts の ♡ を images/heart.png に置換
   ========================================================= */

.concept-deco,
.concept-hearts {
  position: absolute;
  z-index: 2;

  /* 元の ☆ / ♡ の文字を見えなくする */
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;

  /* 画像表示 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 1 !important;
  pointer-events: none;
}

/* 星 */
.concept-deco {
  width: clamp(120px, 17vw, 240px);
  height: clamp(20px, 13vw, 190px);
  right: 7%;
  top: 22px;
  background-image: none;
}

/* ハート */
.concept-hearts {
  width: clamp(120px, 17vw, 240px);
  height: clamp(90px, 13vw, 190px);
  left: 7%;
  bottom: 18px;
  background-image: none;
}

/* タブレット */
@media (max-width: 900px) {
  .concept-deco {
    width: 130px;
    height: 100px;
    right: 4%;
    top: 18px;
  }

  .concept-hearts {
    width: 130px;
    height: 100px;
    left: 4%;
    bottom: 15px;
  }
}

/* スマートフォン */
@media (max-width: 600px) {
  .concept-deco {
    width: 92px;
    height: 72px;
    right: 2%;
    top: 12px;
  }

  .concept-hearts {
    width: 92px;
    height: 72px;
    left: 2%;
    bottom: 10px;
  }
}


/* =========================================================
   CATEGORY GUIDE と各セクションの色を統一
   01 緑 → 02 黄 → 03 青 → 04 オレンジ
   ========================================================= */

/* 01 RENTAL */
.g1,
.rental-section {
  background: var(--mint) !important;
}

/* 02 HOW TO USE */
.g2,
.howto {
  background: var(--yellow) !important;
}

/* 03 ATTENTION */
.g3,
.attention-section {
  background: var(--blue) !important;
}

/* 04 RESERVATION */
.g4,
.reservation-section {
  background: var(--peach) !important;
}


/* =========================================================
   追加修正
   1. 「かわいい」下線：ピンク → 黄色
   2. 01「商品を選ぶ」画像だけ小さく
   ========================================================= */

/* 「かわいい」の下線グラデーション */
.pink-line::after {
  background: linear-gradient(
    90deg,
    #ff7f7f 0%,
    #ffff7f 100%
  ) !important;
}

/* 5ステップのアイコンサイズを統一 */
.step-icon-img {
  display: block;
  width: 70px;
  height: auto;
  margin: 0 auto 10px;
}


/* =========================================================
   FINAL FIXES
   littlepalette / concept images / attention link
   ========================================================= */

/* 星・ハートはHTML内のimgのみ表示 */
.concept-deco,
.concept-hearts {
  background-image: none !important;
}

.concept-star,
.concept-heart {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ATTENTION 詳細リンク */
.attention-more-link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 9px 18px;
  border: 2px solid #111;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  background: rgba(255,255,255,.9);
  transition: .2s;
}

.attention-more-link:hover {
  background: #111;
  color: #fff;
}


/* =========================================================
   ATTENTION 「詳しくはこちらから」ボタン
   ========================================================= */
.attention-more-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 11px 22px;
  border: 2px solid #111;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.attention-more-link span {
  font-size: 1.05rem;
  transition: transform .2s ease;
}

.attention-more-link:hover {
  background: #111;
  color: #fff;
  transform: translateY(-2px);
}

.attention-more-link:hover span {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .attention-more-link {
    padding: 10px 18px;
    font-size: .84rem;
  }
}


/* =========================================================
   04 MEMBER MENU
   ========================================================= */

.member-menu-section {
  background: var(--peach) !important;
}

.member-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}

.member-menu-card {
  position: relative;
  min-height: 240px;
  padding: 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .2s ease, box-shadow .2s ease;
}

.member-menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}

.member-menu-no {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(0,0,0,.12);
}

.member-menu-card p {
  margin: 0 0 3px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.member-menu-card h3 {
  margin: 0 0 6px;
  font-size: 1.45rem;
}

.member-menu-card small {
  color: #666;
  font-size: .82rem;
}

.member-menu-card b {
  margin-top: 20px;
  font-size: 1.4rem;
}

@media (max-width: 900px) {
  .member-menu-grid {
    grid-template-columns: 1fr;
  }

  .member-menu-card {
    min-height: 170px;
  }
}

@media (max-width: 600px) {
  .member-menu-card {
    min-height: 150px;
    padding: 22px;
  }
}


/* =========================================================
   04 MEMBER MENU - 白抜きカード強調版
   ========================================================= */

.member-menu-section {
  background: var(--peach) !important;
}

.member-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 42px !important;
}

.member-menu-card {
  position: relative !important;
  min-height: 245px !important;
  padding: 30px 28px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.07) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;

  color: #111 !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.member-menu-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.12) !important;
}

.member-menu-no {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  font-family: "Zen Maru Gothic", sans-serif !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(0,0,0,.10) !important;
}

.member-menu-card p {
  margin: 0 0 5px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: #555 !important;
}

.member-menu-card h3 {
  margin: 0 0 8px !important;
  font-size: 1.5rem !important;
  color: #111 !important;
}

.member-menu-card small {
  font-size: .84rem !important;
  color: #666 !important;
}

.member-menu-card b {
  display: inline-block !important;
  margin-top: 20px !important;
  font-size: 1.45rem !important;
  color: #111 !important;
}

/* タブレット */
@media (max-width: 900px) {
  .member-menu-grid {
    grid-template-columns: 1fr !important;
  }

  .member-menu-card {
    min-height: 180px !important;
  }
}

/* スマートフォン */
@media (max-width: 600px) {
  .member-menu-card {
    min-height: 160px !important;
    padding: 24px 22px !important;
  }
}

/* ===== CONCEPT 星・ハート 文字かぶり防止 ===== */

.concept {
  position: relative;
  overflow: hidden;
}

.concept h2,
.concept > p {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* 星 */
.concept-deco {
  width: clamp(94px, 10.2vw, 153px) !important;
}

/* ハート */
.concept-hearts {
  width: clamp(94px, 10.2vw, 153px) !important;
}

/* タブレット */
@media (max-width: 900px) {
  .concept-deco,
  .concept-hearts {
    width: 81px !important;
  }
}

/* スマートフォン */
@media (max-width: 600px) {
  .concept-deco,
  .concept-hearts {
    width: 55px !important;
  }
}

/* ===== 03・04 番号を01 RENTALと統一 ===== */

#attention .category-no,
#reservation .category-no {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  font-size: 2.8rem !important;
  line-height: 1;
  font-weight: 700;
}

/* スマホ・タブレット */
@media (max-width: 760px) {
  #attention .category-no,
  #reservation .category-no {
    width: 58px;
    height: 58px;
    font-size: 2rem !important;
  }
}

/* ===== RENTAL 商品画像・タイプ表示 ===== */
.rental-photo{
  overflow:hidden;
}

.rental-product-image{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  display:block;
}

.rental-type{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:7px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.7rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
}

.rental-type.natural{
  background:#e9f3ec;
  color:#42634c;
}

.rental-type.color{
  background:#fff0f4;
  color:#9a405d;
}

.detail-product-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:22px;
}

.detail-photo:has(.detail-product-image){
  overflow:hidden;
  padding:0;
}

@media(max-width:760px){
  .rental-product-image{
    min-height:250px;
  }
}

/* ===== HERO decorative circles - CSS animation fixed version ===== */
.hero-visual .s1 {
  animation: lpFloatS1 6.8s ease-in-out infinite alternate !important;
}

.hero-visual .s2 {
  animation: lpFloatS2 5.9s ease-in-out infinite alternate !important;
}

.hero-visual .s3 {
  animation: lpFloatS3 7.4s ease-in-out infinite alternate !important;
}

.hero-badge {
  animation: lpFloatBadge 6.3s ease-in-out infinite alternate !important;
}

@keyframes lpFloatS1 {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(22px, -13px); }
  70%  { transform: translate(-10px, 15px); }
  100% { transform: translate(16px, 7px); }
}

@keyframes lpFloatS2 {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(-17px, 11px); }
  75%  { transform: translate(10px, 20px); }
  100% { transform: translate(-7px, -12px); }
}

@keyframes lpFloatS3 {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(-11px, -16px); }
  65%  { transform: translate(14px, 9px); }
  100% { transform: translate(-8px, 13px); }
}

@keyframes lpFloatBadge {
  0%   { transform: translate(0, 0) rotate(-7deg); }
  35%  { transform: translate(-10px, -9px) rotate(-5deg); }
  70%  { transform: translate(8px, -15px) rotate(-9deg); }
  100% { transform: translate(-5px, 8px) rotate(-6deg); }
}

/* ===== RENTAL 予約カレンダー ===== */
.calendar-toolbar{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.calendar-title{
  text-align:center;
  font-size:1.08rem;
}

.calendar-nav-btn{
  width:42px;
  height:42px;
  border:1px solid #d6d6d6;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
}

.calendar-nav-btn:hover{
  background:#111;
  color:#fff;
}

.calendar-legend{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:12px 0 7px;
  font-size:.76rem;
  color:#555;
}

.calendar-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.legend-mark{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}

.legend-mark.available{
  background:#dff5e7;
  border:1px solid #5d9a72;
}

.legend-mark.unavailable{
  background:#eee;
  border:1px solid #aaa;
}

.calendar-status{
  min-height:1.6em;
  margin-bottom:8px;
  color:#666;
  font-size:.78rem;
}

.calendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  margin-top:8px;
}

.cal-head{
  text-align:center;
  padding:7px 2px;
  font-size:.72rem;
  color:#777;
}

.cal-blank{
  min-height:58px;
}

.cal-day{
  position:relative;
  min-height:58px;
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
  padding:5px 3px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
}

.cal-day.available{
  background:#f6fff9;
  border-color:#b7dfc5;
}

.cal-day.available:hover{
  border-color:#111;
  transform:translateY(-1px);
}

.cal-day.selected{
  background:#111 !important;
  color:#fff;
  border-color:#111;
}

.cal-day.blocked{
  background:#f2f2f2;
  color:#aaa;
  cursor:not-allowed;
  text-decoration:none;
}

.cal-date{
  font-size:.84rem;
  font-weight:700;
  line-height:1;
}

.cal-mark{
  font-size:.76rem;
  line-height:1;
  font-weight:700;
}

.cal-day small{
  font-size:.58rem;
  line-height:1;
}

@media(max-width:600px){
  .calendar{
    gap:3px;
  }

  .cal-day,
  .cal-blank{
    min-height:48px;
  }

  .cal-date{
    font-size:.76rem;
  }

  .cal-mark{
    font-size:.68rem;
  }
}

/* ===== 予約完了表示 ===== */
.reservation-complete{
  padding:18px 8px 8px;
}

.reservation-complete h2{
  margin:6px 0 18px;
}

.reservation-result{
  line-height:2;
}

.reservation-complete-note{
  margin:18px 0;
  color:#555;
  font-size:.88rem;
}

.reservation-complete-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.reservation-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.primary-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}


/* ===== littlepalette スマートフォン用メニュー (2026-10-08) ===== */
.mobile-menu-toggle{display:none;}
@media (max-width:760px){
  .topbar{position:sticky;top:0;z-index:100;overflow:visible;}
  .mobile-menu-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:46px;height:44px;padding:8px;border:1px solid #ddd;
    border-radius:12px;background:#fff;cursor:pointer;flex:0 0 auto;
    margin-left:auto;
  }
  .mobile-menu-toggle span{display:block;width:23px;height:2px;background:#222;border-radius:3px;transition:transform .2s,opacity .2s;}
  .mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .mobile-menu-toggle.is-open span:nth-child(2){opacity:0;}
  .mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .topbar nav#siteNavigation{
    display:none;position:absolute;left:0;right:0;top:100%;width:100%;max-width:none;
    padding:12px 18px 20px;background:#fff;border-top:1px solid #eee;
    box-shadow:0 14px 22px rgba(0,0,0,.12);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    max-height:calc(100dvh - 74px);overflow-y:auto;z-index:101;
    font-size:14px;letter-spacing:.03em;
  }
  .topbar nav#siteNavigation.is-open{display:flex;}
  .topbar nav#siteNavigation a{display:block;padding:13px 12px;border-bottom:1px solid #eee;}
  .topbar nav#siteNavigation .header-login-link{margin-top:10px;text-align:center;border:2px solid #111;border-radius:999px;}
}

/* ===== littlepalette 最終カラー設定 ===== */

/* 01 レンタルセット：オレンジ */
.rental-section {
    background: #f6b085 !important;
}

/* 02 予約5ステップ：黄色 */
.howto {
    background: #ffff7f !important;
}

/* 03 注意事項：グリーン */
.attention-section {
    background: #98ea98 !important;
}

/* 04 会員メニュー：パープル */
.reservation-section.member-menu-section {
    background: #a9a3ef !important;
}

/* 02 の白丸 */
.howto .white-no {
    background: #ffffff !important;
    color: #111111;
    border-radius: 50%;
}