@charset "utf-8";
/* CSS Document */

:root{
--clr-red: #D9292C;
--clr-blu: #0278EC;
--clr-grn: #24B41E;
--clr-nvy: #023261;
--clr-yel: #FEEF31;
--space-s: clamp(1.6rem, 3.75vw, 2.4rem);
--space-m: clamp(2.4rem, 6.25vw, 4.0rem);
--space-l: clamp(4.0rem, 10vw, 6.4rem);
--space-xl: clamp(6.4rem, 15vw, 9.6rem);
--font-xl: clamp(2.4rem, 3.2vw, 4.8rem);
--font-l: clamp(2.0rem, 2.7vw, 3.2rem);
--font-m: clamp(1.6rem, 2.0vw, 2.4rem);
--font-s: clamp(1.6rem, 1.8vw, 2.0rem);
--radius: clamp(32px, 6.25vw, 64px);
}

/*=============================================================
	reset
=============================================================*/
html { height: 100%; font-size: 62.5%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, blockquote, th, td, img, p { margin: 0px; padding: 0px; font-weight: 400;}
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal;}
h1, h2, h3, h4, h5, h6, div, p, pre, ul, ol, dl, dt, dd, address, form, blockquote { text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption, th { text-align: left;}
q:before, q:after { content: '';}
img, object, embed { vertical-align: top;}
legend { display: none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
img, abbr, acronym, fieldset { border: none;}
li { list-style-type: none;}
svg { fill: currentColor;}
input[type="submit"] { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
figure { padding: 0; margin: 0;}

/*=============================================================
	common
=============================================================*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body { margin: 0; padding: 0; text-align: center; font-size: 2.0rem; line-height: 1.8em; font-family: YakuHanJP, "LINE Seed JP", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif; font-optical-sizing: auto; color: #333; background: #FFF; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative;}
a { color: rgba(51,51,51,1.0); text-decoration: underline; transition: all 0.3s ease 0s;}
a:hover { color: rgba(51,51,51,0.64); text-decoration: none;}
h2, h3, h4 { font-family: "LINE Seed JP", sans-serif; font-style: normal;}
h2, h3 { font-weight: 700 !important;}

/*---------- align & clearfix ----------*/
.align-left { text-align: left;}
.align-right { text-align: right;}
.align-center { text-align: center;}
.container, .clearfix { zoom: 1;}
.container:after, .clearfix:after { content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/*=============================================================
	components
=============================================================*/
/* loading screen */
#loading-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 1.0s ease, visibility 1.0s ease;}
#loading-screen.is-hidden { opacity: 0; visibility: hidden;}
#loading-logo { width: 200px; max-width: 80%; margin-bottom: 20px; height: auto;}
.loading-bar-container { width: 300px; max-width: 80%; height: 6px; background-color: #DDD; border-radius: 3px; overflow: hidden;}
.loading-bar-progress { width: 0; height: 100%; background-color: #24B41E; animation: loadingAnimation 1.5s ease forwards;}
@keyframes loadingAnimation { 0% { width: 0;} 100% { width: 100%;}}

/* top page layout */
#wrapper { width: 100%; position: relative; overflow: hidden;}
article.contents { width: 100%; padding: var(--space-xl) 0; position: relative;}
article.contents section { width: 90%; margin: 0px auto; max-width: 1200px;}

/* hero area */
#globalNav { position: fixed; top: 1.6rem; right: 10%; z-index: 100; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); border-radius: 8px; transition: all 0.3s ease 0s; width: var(--nav-initial-width, max-content);}
#globalNav ul { display: flex; justify-content: center; list-style: none; padding: 0 1.0rem;}
#globalNav li { margin: 0 8px; padding: 0.8em; position: relative; word-break: keep-all;}
#globalNav li:nth-child(n+2):before { content: ""; width: 4px; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.04); position: absolute; top: 50%; left: -6px; transform: translateY(-50%);}
#globalNav a { text-decoration: none; color: #333; font-weight: bold;}
#globalNav a:hover { color: var(--clr-red);}
#globalNav.is-scrolled { background-color: rgba(244, 244, 244, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); width: 80%; right: 10%;}
#heroArea{ padding-bottom: 4.0rem;}
#heroArea h1 img { width: 100%; height: auto;}
#heroArea h2{ text-align: center; font-size: var(--font-m); font-weight: 600; color: var(--clr-red); margin-top: var(--space-s);}

/* slider */
#slider { width: 100%; overflow: hidden; padding: var(--space-m) 0;}
.slider-track { display: flex; width: max-content; animation: infiniteScroll 80s linear infinite;}
.slider-track ul { display: flex; list-style: none; margin: 0; padding: 0;}
.slider-track li { width: 18.4vw; padding: 0 1vw;}
.slider-track img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); animation: floating 3s ease-in-out infinite;}
@keyframes infiniteScroll { 0% { transform: translateX(0);} 100% { transform: translateX(-50%);}}
@keyframes floating { 0%, 100% { transform: translateY(0);} 50% { transform: translateY(-12px);}}

/* about */
.contents.about { position: relative;}
.contents.about section { position: relative;}
.contents.about:before { content: ""; width: 100%; height: 100%; /*height: calc(100% + 10.0rem);*/ background: var(--clr-yel) url("../../images/about_mask.webp") no-repeat right bottom; background-size: 30%; border-radius: 0 0 var(--radius) var(--radius); position: absolute; bottom: 0; left: 0; z-index: -1;}
.contents.about h2 { text-align: center; position: relative; z-index: 1;}
.contents.about h2 span { display: inline; font-size: var(--font-xl); line-height: 1.2em; color: var(--clr-red); padding-bottom: 0.2em; position: relative;}
.contents.about h2 span:before { content: ""; width: 100%; height: 4px; background: rgba(217,41,44,0.24); position: absolute; bottom: 0; left: 0;}
.contents.about h2 span:after { content: ""; width: 100%; height: 4px; background: rgba(217,41,44,0.24); position: absolute; bottom: 6px; left: 0;}
.contents.about p { text-align: center; margin-top: 1.5em; position: relative; z-index: 1;}
.contents.about .movie { width: 72%; padding-bottom: 40.5%; margin: var(--space-m) auto 0; border-radius: 16px; border: solid 8px #FFF; overflow: hidden; position: relative; z-index: 1;}
.contents.about .movie iframe { width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

/* kids decors */
.kids-decors { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; pointer-events: none; z-index: 0;}
.kids-decors li { position: absolute; width: 20vw; max-width: 140px; min-width: 80px;}
.kids-decors li:nth-child(1){ top: -2.0rem; left: 0;}
.kids-decors li:nth-child(2){ top: 35%; left: -7.2vw;}
.kids-decors li:nth-child(3){ bottom: 10%; left: 0;}
.kids-decors li:nth-child(4){ top: 25%; right: 0;}
.kids-decors li:nth-child(5){ bottom: 10%; right: 2%;}
.kids-decors img { width: 100%; height: auto; display: block; animation: floating 3s ease-in-out infinite;}

/* concept */
.contents.concept { position: relative; display: none;}
.contents.concept:before { content: ""; width: 100%; height: 100%; background: url("../../images/concept_bg.webp") no-repeat center top; background-size: 100%; position: absolute; top: -6.4rem; left: 0; z-index: -2;}
.contents.concept h2 { text-align: center; font-size: var(--font-xl); line-height: 1.2em; color: var(--clr-nvy);}
.contents.concept h2 span { display: block; width: 240px; margin: 0px auto 0.16em;}
.contents.concept h2 span img { width: 100%; height: auto;}
.contents.concept h3 { font-size: var(--font-m); line-height: 1.2em; text-align: center; color: var(--clr-red); margin-top: 1.0em;}
.contents.concept section > p { text-align: center; margin-top: 1.0em;}
.contents.concept .column { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-m);}
.contents.concept .column .inner { width: 31%;}
.contents.concept .column .inner h4{ font-size: var(--font-m); line-height: 7.6rem; color: #1184C7; font-weight: 700; text-align: center; background: url("../../images/heading_bg.webp") no-repeat; background-size: cover;}
.contents.concept .column .inner figure{ margin-top: var(--space-s); aspect-ratio: 1 / 1; overflow: hidden;}
.contents.concept .column .inner figure img{ width: 100%; height: 100%; object-fit: cover;}
.contents.concept .column .inner:nth-child(1) figure img{ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;}
.contents.concept .column .inner:nth-child(2) figure img{ border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%;}
.contents.concept .column .inner:nth-child(3) figure img{ border-radius: 70% 30% 40% 60% / 60% 40% 50% 40%;}
.contents.concept .column .inner p{ margin-top: 1.0em;}

/* content */
.contents.content {}
.contents.content:before { content: ""; width: 100%; height: 100%; border-radius: 40px; background: url("../../images/content_bg.webp") repeat; position: absolute; top: 0; left: 0; z-index: -1;}
.contents.content h2 { text-align: center; font-size: var(--font-xl); line-height: 1.2em; font-weight: 700; padding-bottom: 0.4em; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); background: url("../../images/belt.webp") no-repeat center bottom; background-size: contain;}
.contents.content h2 span.red { color: #F08278;}
.contents.content h2 span.grn { color: #8CBE5A;}
.contents.content h2 span.blu { color: #8CB4EB;}
.contents.content h2 span.yel { color: #F0BE50;}
.contents.content .column { display: flex; justify-content: center; flex-wrap: wrap; margin-top: var(--space-m);}
.contents.content .column .inner { width: 31%; background: #FFF; border-radius: 16px; box-shadow: 0 0 16px rgba(0,0,0,0.16); overflow: hidden; margin-right: 3.5%;}
.contents.content .column .inner:nth-child(3n), .contents.content .column .inner:last-child { margin-right: 0;}
.contents.content .column .inner:nth-child(n+4) { margin-top: var(--space-m);}
.contents.content .column .inner img { width: 100%; height: auto;}
.contents.content .column .inner h3 { font-size: var(--font-s); line-height: 44px; color: #FFF; font-weight: 700; padding-left: 1.0em; background: url("../../images/ribbon_bg.webp") no-repeat; background-size: contain; position: relative; top: -22px; margin-bottom: -22px;}
.contents.content .column .inner p { margin-top: 0 !important; padding: 1.0em; line-height: 1.4em;}
.contents.content section { position: relative;}

/* 装飾画像の設定（サイズ可変・回転アニメーション追加） */
.contents.content ul.side li { position: absolute; width: 10vw; max-width: 150px; z-index: -1;}
.contents.content ul.side.left li:nth-child(1) { top: 5%; right: 110%;}
.contents.content ul.side.left li:nth-child(2) { top: 35%; right: 105%;}
.contents.content ul.side.left li:nth-child(3) { top: 45%; right: 115%;}
.contents.content ul.side.left li:nth-child(4) { top: 75%; right: 100%;}
.contents.content ul.side.right li:nth-child(1) { top: 5%; left: 110%;}
.contents.content ul.side.right li:nth-child(2) { top: 35%; left: 105%;}
.contents.content ul.side.right li:nth-child(3) { top: 45%; left: 115%;}
.contents.content ul.side.right li:nth-child(4) { top: 75%; left: 100%;}
.contents.content ul.side li img { width: 100%; height: auto; transform-origin: center center; display: block;}
.contents.content ul.side li:nth-child(odd) img { animation: rotateCW 20s linear infinite;}
.contents.content ul.side li:nth-child(even) img { animation: rotateCCW 24s linear infinite;}
@keyframes rotateCW { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}
@keyframes rotateCCW { 0% { transform: rotate(0deg);} 100% { transform: rotate(-360deg);}}

/* outline */
.contents.outline{}
.contents.outline section{ padding: var(--space-xl); background: #FBF9F7; border-radius: 40px;}
.contents.outline h2{ text-align: center; font-size: var(--font-xl); line-height: 1.2em; font-weight: 700; color: #565037;}
.contents.outline table{ width: 100%; border-top: solid 1px rgba(0,0,0,0.04); margin-top: var(--space-m);}
.contents.outline table tr{ border-bottom: solid 1px rgba(0,0,0,0.04);}
.contents.outline table th{ width: 18.4%; padding: 1.5em 0;}
.contents.outline table td{ width: 81.6%; padding: 1.5em 0;}
.contents.outline .map{ margin: var(--space-xl) auto 0; width: 90%; max-width: 1200px; border: solid 8px #FFF; padding-bottom: 32%; position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 0 16px rgba(0,0,0,0.16);}
.contents.outline .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

/* precautions */
.precautions h2{ text-align: center; font-size: var(--font-l); line-height: 1.2em; font-weight: 700; color: var(--clr-nvy);}
.precautions dl{}
.precautions dl dt{ font-weight: 700; margin-top: var(--space-m); color: var(--clr-nvy); padding-bottom: 0.5em; border-bottom: solid 1px rgba(0,0,0,0.08); margin-bottom: 0.5em;}

.contact{ overflow: hidden;}
.contact:before{ content: ""; width: 200%; height: 400%; background: #F6F0EA; border-radius: 100%; position: absolute; top: 0; left: -50%; z-index: -1;}
.contact h2{ text-align: center; font-size: var(--font-xl); line-height: 1.2em; font-weight: 700; color: #565037;}
.contact h3{ font-size: var(--font-l); line-height: 1.2em; text-align: center; font-weight: 700; color: var(--clr-red); margin-top: var(--space-s);}
.contact p.mail{ text-align: center; margin-top: var(--space-m); line-height: 1.6em;}
.contact p.mail a{ display: inline-block; text-align: center; font-size: var(--font-m); line-height: 1.4em; text-decoration: underline; color: #565037; font-weight: 700;}
.contact p.mail a:hover{ text-decoration: none;}
.contact p.mail span{ display: block; text-align: center;}

/* parallax */
.parallax { width: 100%; padding-bottom: 18.4%; position: relative; background-image: url("../../images/parallax_image.webp"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}

/* footer */
footer{ padding: var(--space-l) 0; background: var(--clr-yel);}
footer .partner{ width: 90%; margin: 0px auto; max-width: 1200px; display: flex; justify-content: flex-start; flex-wrap: wrap;}
footer .partner li{ width: 23.5%; margin-right: 2%;}
footer .partner li:nth-child(4n),
footer .partner li:last-child{ margin-right: 0;}
footer .partner li:nth-child(n+5){ margin-top: 1.0em;}
footer .partner li a{ display: block; opacity: 1.0;}
footer .partner li a:hover{ opacity: 0.64;}
footer .partner li img{ width: 100%; height: auto;}
footer .copyright{ text-align: center; padding-top: var(--space-l);}

/* page top */
#pageTop { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; background-color: #023261; border-radius: 50%; border: none; cursor: pointer; z-index: 90; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2);}
#pageTop.is-show { opacity: 1; visibility: visible;}
#pageTop::before { content: "\e5d8"; font-family: 'Material Symbols Outlined'; color: #FFF; font-size: 32px; font-weight: normal; font-style: normal; line-height: 1;}