/* /kids/: shared site shell, reservation motion and FAQ behavior. */
.kids-page { overflow: hidden; color: var(--color-text); background: var(--color-bg-main); font: 500 15px/1.5 var(--font-ja); letter-spacing: .45px; }
.kids-page p { margin: 0; font: inherit; letter-spacing: inherit; }
.kids-page img[src$=".svg"] { width: auto; height: auto; max-width: none; }
.kids-page a:focus-visible, .kids-page button:focus-visible { outline: 2px solid var(--color-main); outline-offset: 3px; }
.kids-fv { position: relative; height: 768px; padding: 0 24px; }
.kids-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 24px 0; margin-bottom: 20px; font: 500 13px/1 var(--font-article); letter-spacing: 0; }
.kids-heading { position: relative; z-index: 1; text-align: center; color: var(--color-main); margin-bottom: 20px; }
.kids-heading p { color: var(--color-main); margin-bottom: 8px; font: 400 20px/1 var(--font-en); }
.kids-heading h1 { color: var(--color-main); font: 700 32px/1.2 var(--font-ja); letter-spacing: 0; }
.kids-hero { position: relative; height: 435px; }
.kids-hero > img, .kids-fv > img { position: absolute; pointer-events: none; }
.kids-hero-pattern-one { right: .14px; bottom: -85.79px; }
.kids-hero-blur { left: -9px; top: 37.93px; }
.kids-hero-pattern-two { left: 10px; top: 63.93px; }
.kids-hero-cloud { left: -85px; top: 5.93px; }
.kids-hero-photo-one { position: absolute; right: -53.73px; top: 15px; width: 316.733px; height: 321.931px; }
.kids-hero-frame-one { position: absolute; top: 0; left: 0; }
.kids-hero-mask-one { position: absolute; left: 18.58px; top: 14.63px; width: 282.534px; height: 287.036px; mask: url('../images/kids/171d7.svg') no-repeat 0 0 / 282.534px 287.036px; }
.kids-hero-mask-one img { position: absolute; width: 330.594px; height: 494px; max-width: none; left: -46.26px; top: -33.70px; }
.kids-hero-photo-two { position: absolute; left: -71px; top: 218px; width: 359.135px; height: 357px; }
.kids-hero-frame-two { position: absolute; top: 21.31px; left: 23.66px; transform: rotate(-81.03deg) scaleY(-1); }
.kids-hero-mask-two { position: absolute; left: 35.11px; top: 41.11px; width: 277.161px; height: 277.375px; mask: url('../images/kids/5160b.svg') no-repeat 0 0 / 277.161px 277.375px; }
.kids-hero-mask-two img { position: absolute; width: 310px; height: 465px; max-width: none; left: -32.042px; top: -14.796px; }
.kids-page .kids-hero-copy { position: absolute; top: 300px; left: 24px; font-size: 16px; font-weight: 700; letter-spacing: .48px; }
.kids-fv-cloud { bottom: 46.07px; right: 137px; }
.kids-fv-flower { bottom: .14px; right: 148px; transform: rotate(180deg) scaleY(-1); }
.kids-lead { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 80px 24px; text-align: center; }
.kids-lead p { position: relative; }
.kids-lead > img { position: absolute; pointer-events: none; }
.kids-lead-cloud-top { right: -8px; top: 30.93px; transform: rotate(180deg) scaleY(-1); }
.kids-lead-cloud-bottom { right: 281px; top: 295.93px; }
.kids-lead-flower-one { right: 95.31px; top: 2.68px; transform: rotate(-153.81deg) scaleY(-1); }
.kids-lead-flower-two { right: 130.72px; top: 30.72px; transform: rotate(161.88deg) scaleY(-1); }
.kids-section { align-items: stretch; display: flex; flex-direction: column; gap: 20px; padding: 30px 24px; }
.kids-section h2 { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--color-main); font: 700 24px/1 var(--font-ja); letter-spacing: 0; }
.kids-section h2 img { flex: none; transform: rotate(180deg) scaleY(-1); }
.kids-section-heading { display: flex; flex-direction: column; gap: 8px; }
.kids-plan-details, .kids-plan-notes { display: flex; flex-direction: column; gap: 24px; padding: 32px 16px; background: var(--color-white); }
.kids-plan-details > div, .kids-plan-notes > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kids-plan-details > div > p:not(.kids-price) { font-size: 14px; line-height: 1.3; }
.kids-label { display: inline-block; padding: 2px 4px; background: var(--color-accent-beige); font: 500 18px/1 var(--font-ja); letter-spacing: .54px; }
.kids-page .kids-price { display: flex; align-items: center; gap: 4px; font: 500 20px/1 var(--font-num); letter-spacing: -.8px; white-space: nowrap; }
.kids-price > span { align-self: flex-start; font-size: 16px; letter-spacing: 0; }
.kids-price small { font: 400 12px/1 var(--font-num); letter-spacing: 0; }
.kids-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kids-tags li { background: var(--color-accent-pink-1); padding: 8px; font-size: 14px; line-height: 1.3; }
.kids-plan-notes { background: var(--color-bg-main); border: 1px solid var(--color-text); align-items: center; }
.kids-plan-notes > div { width: 100%; }
.kids-note { display: flex; flex-direction: column; gap: 8px; background: var(--color-white); border-left: 3px solid var(--color-accent-beige); border-radius: 0 2px 2px 0; padding: 16px 20px 16px 23px; }
.kids-option-tags li { background: var(--color-white); border: 1px solid var(--color-accent-beige); }
.kids-page .plan-btn { font: 700 16px/1 var(--font-ja); letter-spacing: 0; }
.kids-plan-booking { width: min(100%, 283px); margin-right: 4px; }
.kids-spot-list { display: flex; flex-direction: column; gap: 20px; }
.kids-spot { display: flex; flex-direction: column; gap: 12px; padding: 25px; border: 1px solid var(--color-accent-beige); background: var(--color-white); }
.kids-spot-photo { width: 100%; height: auto; aspect-ratio: 322/215; object-fit: cover; border-radius: 12px; }
.kids-spot-title { display: flex; align-items: center; gap: 8px; }
.kids-spot-title h3 { padding: 2px 4px; color: var(--color-white); background: var(--color-main); font: 500 18px/1 var(--font-ja); letter-spacing: .54px; }
.kids-spot-title > span { color: var(--color-main); font-size: 13px; font-weight: 700; letter-spacing: .39px; white-space: nowrap; }
.kids-tips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 16px 23px; border-left: 3px solid var(--color-accent-beige); border-radius: 0 2px 2px 0; background: var(--color-bg-main); }
.kids-tips h4 { display: flex; align-items: center; gap: 4px; padding: 4px 12px; height: 30px; border: 1px solid var(--color-text); border-radius: 40px; background: var(--color-white); font: 700 14px/1 var(--font-ja); letter-spacing: .42px; }
.kids-shooting { align-items: stretch; position: relative; display: flex; flex-direction: column; gap: 24px; padding: 60px 24px 30px; background: linear-gradient(179.5912694deg, #6b4b3e 0%, #fff5ec 100%); }
.kids-shooting > img { position: absolute; pointer-events: none; }
.kids-shooting-cloud-three { top: 623.93px; right: 323px; }
.kids-shooting-cloud-one { right: -14px; top: 38.93px; transform: rotate(180deg) scaleY(-1); }
.kids-shooting-cloud-two { right: -37px; top: 1063.93px; transform: rotate(180deg) scaleY(-1); }
.kids-shooting-heading { position: relative; display: flex; flex-direction: column; gap: 20px; text-align: center; }
.kids-shooting-heading h2 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--color-text); font: 700 24px/1 var(--font-ja); letter-spacing: 0; }
.kids-shooting-heading h2 span { display: inline-block; padding: 4px; background: var(--color-white); }
.kids-shooting-heading p { color: var(--color-white); }
.kids-shooting-list { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kids-shooting-card { position: relative; width: min(315px, 100%); border-radius: 12px; overflow: hidden; background: var(--color-white); padding-bottom: 16px; }
.kids-shooting-photo { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
/* These three Figma exports contain a portrait-sized, pre-stretched bitmap.
   Restore the design frame's display ratio before clipping; cover would crop
   the stretched bitmap and leave the people visibly elongated. */
.kids-spot-photo[src$="/12822.png"],
.kids-spot-photo[src$="/52e53.png"],
.kids-shooting-photo[src$="/0b560.png"] {
  object-fit: fill;
  object-position: center bottom;
  overflow: hidden;
}
.kids-shooting-content { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 0; }
.kids-shooting-content h3 { display: flex; align-items: center; gap: 4px; font: 700 20px/1.3 var(--font-ja); letter-spacing: .6px; color: var(--color-main); }
.kids-shooting-content h3 img { transform: rotate(180deg) scaleY(-1); flex: none; }
.kids-shooting-price { display: flex; align-items: center; gap: 11px; min-height: 39px; }
.kids-time { display: flex; align-items: center; gap: 3px; font: 500 13px/1 var(--font-num); letter-spacing: 0; white-space: nowrap; }
.kids-page .kids-shooting-description { display: flex; align-items: center; min-height: 70px; padding: 8px; background: var(--color-accent-beige); font-size: 14px; line-height: 1.3; letter-spacing: 0; }
.kids-shooting-content .plan-btn { margin-right: 4px; }
.kids-recommend { position: absolute; z-index: 1; left: 0; top: 16.37px; padding: 6px 10px; color: var(--color-main); background: var(--color-accent-pink-2); border: solid var(--color-white); border-width: 1px 1px 1px 0; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .39px; }
.kids-shooting-info { position: relative; display: flex; flex-direction: column; gap: 12px; }
.kids-shooting-info > div { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px; background: var(--color-white); }
.kids-shooting-info h3 { color: var(--color-main); font: 700 18px/1 var(--font-ja); letter-spacing: .54px; }
.kids-shooting-info > .kids-shooting-benefit { background: var(--color-accent-pink-2); }
/* These are the front-page FAQ classes; only button resets are page-specific. */
.kids-faq .faq-question { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: 500 16px/1.3 var(--font-ja); letter-spacing: 0; }
.kids-question-text { flex: 1; }
.kids-faq .faq-answer[hidden] { display: none; }
.kids-faq .faq-answer { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.kids-faq .faq-item.is-open .faq-answer { max-height: none; }
.kids-related-list { display: flex; flex-direction: column; gap: 12px; }
.kids-related-card { position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 21px 21px; background: var(--color-white); border: 1px dashed var(--color-accent-beige); border-radius: 12px; overflow: hidden; }
.kids-related-text { position: relative; flex: 1; min-width: 0; padding-top: 16px; color: var(--color-main); }
.kids-related-text p { position: relative; color: var(--color-main); font: 400 14px/1 var(--font-en); letter-spacing: 0; margin-bottom: 8px; }
.kids-related-text h3 { position: relative; width: max-content; font: 700 16px/1 var(--font-ja); letter-spacing: .48px; }
.kids-related-text > span { display: block; margin-top: 20px; color: var(--color-text); font-size: 12px; line-height: 1; letter-spacing: 0; }
.kids-related-text .kids-related-cloud { position: absolute; left: 12px; top: 6.37px; }
.kids-related-pattern { position: absolute; right: 48px; top: 21px; }
.kids-related-flower-one { position: absolute; right: 105px; bottom: 30.12px; transform: rotate(180deg) scaleY(-1); }
.kids-related-flower-two { position: absolute; right: 85px; bottom: 21.12px; transform: rotate(180deg) scaleY(-1); }
.kids-related-photo { position: relative; flex: none; width: 98.865px; height: 100.487px; }
.kids-related-frame { position: absolute; top: 0; left: 0; }
.kids-related-mask { position: absolute; left: 5.8px; top: 4.57px; width: 88.1897px; height: 89.5951px; mask: url('../images/kids/ddc57.svg') no-repeat 0 0 / 88.1897px 89.5951px; }
.kids-related-mask img { position: absolute; width: 96.985px; height: 145.46px; max-width: none; }
.kids-related-photo .kids-related-mask img { left: -.66px; top: -48.39px; }
.kids-related-rickshaw .kids-related-mask img { left: -5.933px; top: -39.49px; }
.kids-related-course .kids-related-mask img { width: 152.434px; height: 101.635px; left: -26.81px; top: -5.60px; }
.kids-reservation { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 80px 24px 120px; text-align: center; background: linear-gradient(132.8127587deg, #ffe9e9 2.5016%, #ffacac 97.498%); }
.kids-reservation-text { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.kids-reservation h2 { margin: 0; font: 700 24px/1.5 var(--font-ja); letter-spacing: .72px; }
.kids-reservation > img { position: absolute; pointer-events: none; }
.kids-reservation-cloud-bottom { left: 9px; bottom: 89.2px; }
.kids-reservation-cloud-top { right: 22.5px; top: 62.8px; transform: rotate(180deg) scaleY(-1); }
.kids-reservation-leaf { left: 190px; top: -17.2px; }
.kids-reserve-button .plan-btn-border { border-radius: 999px; }
.kids-reserve-button .plan-btn-text { display: flex; align-items: center; gap: 16px; padding: 12px 32px; border-radius: 999px; font-weight: 900; letter-spacing: 1.28px; box-shadow: var(--shadow-01); }
.kids-reservation-info { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kids-reservation-info p { display: flex; gap: 8px; font-size: 16px; line-height: 1; letter-spacing: 0; }
@media (max-width: 389px) {
  .kids-heading h1 { font-size: clamp(24px, 7.6vw, 30px); }
  .kids-lead { padding-left: 16px; padding-right: 16px; font-size: 13px; }
  .kids-section h2 { font-size: 21px; }
  .kids-spot { padding: 16px; }
  .kids-tips { padding-left: 12px; padding-right: 12px; }
  .kids-shooting { padding-left: 16px; padding-right: 16px; }
  .kids-shooting-content h3 { font-size: 18px; }
  .kids-related-card { padding-left: 16px; padding-right: 16px; }
  .kids-related-text h3 { font-size: 14px; }
  .kids-reservation-text p { font-size: 13px; }
}

/* Final round CTA shared by the kids, furisode and hakama pages. */
.kids-page .kids-reserve-button .plan-btn-border { display:none; }
.kids-page .kids-reserve-button .plan-btn-text,
.kids-page .kids-reserve-button:hover .plan-btn-text {
  transform:none;
  transition:box-shadow .25s ease;
}
.kids-page .kids-reserve-button:hover .plan-btn-text { box-shadow:none; }