/* ============================================================================================================================
汎用
============================================================================================================================ */

/* 縦見出し */
.vertical-title { color:var(--gray); font-size:33px; font-weight:700; line-height:0.9; writing-mode:vertical-lr; } 

/* フレックスボックス */
div.top-flexbox { align-items:flex-start; justify-content:center; overflow:hidden; padding:25px 0; width:100%; }
div.top-flexbox h2 { max-width:30px; width:30px; }
div.box-item { width:calc( 100% -  30px ); }

/* 汎用コンテンツ */
section.content { margin-bottom:100px; }

/* 汎用テキスト */
.top-page p { font-size:16px; font-weight:400; line-height:200%; letter-spacing:1.6px; }

@container(min-width:960px) {

/* フレックスボックス */
div.top-flexbox { justify-content:space-between;}

/* 縦見出し */
.vertical-title { color:var(--bk); font-size:50px; line-height:1; width:90px; } 

/* 配置調整 */
div.top-flexbox h2 { max-width:100%; width:auto; }
div.box-item { width:calc( 100% - 90px ); }

/* 汎用テキスト */
.top-page p { line-height:35px; letter-spacing:4px; }

}

/* ============================================================================================================================
ヘッダー
============================================================================================================================ */

/* 装飾 */
body::after { display:none; }

@media(min-width:960px) {

/* ナビゲーション */
nav.main-nav { position:absolute; top:80px; left:50%; transform:translateX(-50%); max-width:1000px; width:100%; z-index:10; }

/* スクロールでメニュー固定 */
nav.main-nav.is-fixed { position:fixed; top:0; left:50%; transform:translateX(-50%); height:auto; z-index:1000; } 
nav.main-nav.is-fixed ul.menu-list { background-color:rgba(255,255,255,0.7); border-radius:20px; transition:0; padding:10px 20px; height:auto; max-width:1000px; }

}

/* ============================================================================================================================
ファーストビュー
============================================================================================================================ */

/* ベース */
.top-page div.fv { overflow:hidden; padding-top:47px; padding-bottom:102px; position:relative; max-width:100vw; width:100vw; z-index:1; }
.top-page div.fv img { height:auto; max-width:100%; }

/* 見出し */
.top-page div.fv h1 { padding-left:15px; margin-bottom:49px; }
.top-page div.fv h1 img { aspect-ratio:288/109; height:auto; max-width:288px; width:288px; }

/* 装飾 */
.top-page div.fv::before, div.fv::after { content:''; display:inline-block; position:absolute; z-index:-1; }
.top-page div.fv::after { aspect-ratio:1/1; background-color:var(--pi-1); border-radius:50%; top:47px; right:-400px; height:619px; max-width:619px; width:619px; }

/* 画像 */
.top-page div.fv-img, div.fv-img img { aspect-ratio:360/319; }
.top-page div.fv-img { position:relative; height:319px; max-width:360px; width:calc( 100% - 33px ); z-index:1; }
.top-page div.fv-img img { border-radius:0 10px 10px 0; height:auto; max-width:360px; width:100%; }
.top-page div.fv-img::before { aspect-ratio:74/47; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url(../img/top/top-bird.png); content:''; display:inline-block; transform:translateY(-75%); position:absolute; top:100%; left:62px; height:47px; max-width:74px; width:74px; z-index:1; }

@container(min-width:960px) {

/* ベース */
.top-page div.fv { align-items:flex-end; display:flex; flex-direction:row-reverse; gap:150px; justify-content:center; padding:0; margin-bottom:100px; height:781px; }

/* 見出し */
.top-page div.fv h1 { padding-left:15px; margin-bottom:49px; }
.top-page div.fv h1 img { aspect-ratio:311/461; height:auto; max-width:311px; width:311px; }

/* 装飾 */
.top-page div.fv::before { background-color:var(--pi-2); top:46px; left:0; height:calc(781px - 46px); width:94px; }
.top-page div.fv::after { top:34px; left:auto; right:-532px; height:747px; max-width:747px; width:747px; }

/* 画像 */
.top-page div.fv-img, .top-page div.fv-img img { aspect-ratio:439/586; border-radius:20px; height:auto; max-width:439px; width:439px; }
.top-page div.fv-img::before { aspect-ratio:117/62; top:auto; right:-600px; bottom:120px; left:auto; max-height:62px; height:62px; max-width:117px; width:117px;  }

}

/* ============================================================================================================================
コンテンツ汎用
============================================================================================================================ */

/* 見出しまとめて */
div.info h3, .about-content h3, .entry-content h3 { font-size:24px; font-weight:700; }

@container(min-width:768px) {

/* 見出しまとめて */
div.info h3, .about-content h3, .entry-content h3 { font-size:40px; }
h2.back-config.vertical-title { position:relative; z-index:1; }
section.oshirase h2.back-config.vertical-title::after { aspect-ratio:47/82; background-image:url('../img/top/osirase-icon.png'); height:82px; width:47px; }
section.about-content  h2.back-config.vertical-title::after { aspect-ratio:46/81; background-image:url('../img/top/about-icon-pc.png'); height:81px; width:46px; }
section.entry-content  h2.back-config.vertical-title::after { aspect-ratio:67/90; background-image:url('../img/top/entry-icon-pc.png'); margin-top:20px; height:70px; width:47px; }

}

/* ============================================================================================================================
お知らせ
============================================================================================================================ */

/* ベース */
div.info { background-color:var(--wh); padding:0 38px 27px 7px; }

/* 見出し */
div.info h3 { transform:translateY(-50%); padding-left:12px; }
div.info h3::after { aspect-ratio:37/24; background-image:url('../img/top/info-icon.png'); margin-left:7px; height:27px; width:37px; }

@container(min-width:960px) {

/* ベース */
section.oshirase { margin:auto; margin-bottom:140px; max-width:1000px; width:100%; }

/* 見出し */
div.info h3::after { display:none; }

}

/* ============================================================================================================================
※WordPressに移管部分
============================================================================================================================ */

/* お知らせ情報 */
ul.info-box { background-color:var(--wh); flex-direction:column; gap:16px; padding:20px 10px; }
ul.info-box li { gap:16px; }
ul.info-box li div.oshirase-item { flex-direction:column; gap:5px; }
div.item-data { flex-direction:column; }
div.item-data time { font-size:13px; font-weight:700; line-height:1.6; }
ul.info-box li div.oshirase-item p.category, ul.info-box li div.oshirase-item p.title { font-weight:700; }
ul.info-box li div.oshirase-item p.category a { align-items:center; color:var(--bk); font-size:14px; justify-content:center; line-height:14px; letter-spacing:4.2px; height:20px; width:90px; }

/* カテゴリ別色 */
.affairs p.category a { background-color:var(--pi-1); }
.event p.category a { background-color:var(--pi-2); }

/* アイコン設定 */
ul.info-box li::before { aspect-ratio:1/1; display:inline-block; margin-top:22px; height:18px; width:18px; }
ul.info-box li.affairs::before { background-image:url('../img/top/icon-affairs.svg'); }
ul.info-box li.event::before { background-image:url('../img/top/icon-event.svg'); }

@container(min-width:768px) {

/* お知らせ情報 */
ul.info-box { gap:64px; padding:40px 50px; }
ul.info-box li div.oshirase-item { gap:11px; }
div.item-data { align-items:center; flex-direction:row-reverse; justify-content:flex-end; gap:16px; }
div.item-data time { font-size:20px; }
ul.info-box li div.oshirase-item p.category a { height:30px; width:140px; }
ul.info-box li div.oshirase-item p.title { font-size:18px; }

/* アイコン設定 */
ul.info-box li::before { margin-top:0; height:30px; width:30px; }

}

/* ============================================================================================================================
園の紹介
============================================================================================================================ */

/* 見出し */
.about-content h3 { padding-bottom:10px; padding-left:12px; }
.about-content h3::after { aspect-ratio:37/41; background-image:url('../img/top/about-icon.png'); transform:translateY(10px) rotate(-10deg); margin-left:7px; height:41px; width:37px; }

/* 配置調整 */
.about-content div.box-item { flex-direction:column; padding:0 27px 0 0; gap:18px; }
.about-content div.box-item img { aspect-ratio:330/182; border-radius:20px; object-fit:cover; object-position:top center; height:auto; max-width:100%; }
.about-content div.box-item p { font-weight:700; padding:0 10px; }

@container(min-width:960px) {

/* ベース */
.about-content { margin:auto; max-width:1000px; width:100%; }

/* 見出し */
.about-content h3::after { display:none; }

}

/* ============================================================================================================================
保育の特色
============================================================================================================================ */

/* ベース */
section.features-content { padding:0 30px; margin:auto; margin-bottom:60px; }

/* 見出し */
section.features-content h3 { font-size:24px; font-weight:700; text-align:center; margin-bottom:25px; }

/* 画像 */
div.features-ph { text-align:center; }
div.features-ph img { aspect-ratio:282/211; border-radius:24px; margin:auto; height:auto; max-width:auto; max-width:90%; width:100%; }

/* 配置 */
section.features-content div.flex { flex-direction:column; gap:10px; }  

/* テキスト */
section.features-content p { font-weight:700; }
section.features-content p.center { margin-top:20px; }

@container(min-width:960px) {

/* ベース */
section.features-content { padding:0; margin-bottom:200px; max-width:1000px; width:100%; }

/* 見出し */
section.features-content h3 { font-size:32px; text-align:left; margin-bottom:40px; }

/* 配置 */
section.features-content div.flex { align-items:center; flex-direction:row; gap:60px; }

/* テキスト */
section.features-content p.center { margin-top:50px; }

}

/* ============================================================================================================================
地域との関わり・食育・安全衛生
============================================================================================================================ */

/* リスト */
ul.button-list { aspect-ratio:344/351; flex-direction:column; padding:0 30px; position:relative; margin:auto; height:auto; width:100%; z-index:1; }
ul.button-list li { position:absolute; left:50%; z-index:1; }
ul.button-list li a { display:inline-block; }
ul.button-list li:nth-child(1) { top:0; transform:translateX(-170px); }
ul.button-list li:nth-child(1) a { aspect-ratio:206/162; background-image:url('../img/top/button-list-01-sp.png'); height:162px; width:206px; }
ul.button-list li:nth-child(1) a:active, ul.button-list li:nth-child(1) a:hover { background-image:url('../img/top/button-list-01-ov-sp.png'); }
ul.button-list li:nth-child(2) { top:100px; transform:translateX(20px); }
ul.button-list li:nth-child(2) a { aspect-ratio:152/120; background-image:url('../img/top/button-list-02-sp.png'); height:120px; width:152px; }
ul.button-list li:nth-child(2) a:active, ul.button-list li:nth-child(2) a:hover { background-image:url('../img/top/button-list-02-ov-sp.png'); }
ul.button-list li:nth-child(3) { top:160px; transform:translateX(-160px); }
ul.button-list li:nth-child(3) a { aspect-ratio:177/161; background-image:url('../img/top/button-list-03-sp.png'); height:161px; width:177px; }
ul.button-list li:nth-child(3) a:active, ul.button-list li:nth-child(3) a:hover { background-image:url('../img/top/button-list-03-ov-sp.png'); }

@container(min-width:960px) {

/* リスト */
ul.button-list { aspect-ratio:auto; flex-direction:row; position:static; margin-bottom:100px; max-width:1000px; width:100%; }
ul.button-list li { position:static; }
ul.button-list li:nth-child(1), ul.button-list li:nth-child(2), ul.button-list li:nth-child(3) { transform:none; }
ul.button-list li:nth-child(1) a { aspect-ratio:350/320; background-image:url('../img/top/button-list-01-pc.png'); height:320px; width:350px; }
ul.button-list li:nth-child(1) a:active, ul.button-list li:nth-child(1) a:hover { background-image:url('../img/top/button-list-01-ov-pc.png'); }
ul.button-list li:nth-child(2) a { aspect-ratio:257/237; background-image:url('../img/top/button-list-02-pc.png'); height:237px; width:257px; }
ul.button-list li:nth-child(2) a:active, ul.button-list li:nth-child(2) a:hover { background-image:url('../img/top/button-list-02-ov-pc.png'); }
ul.button-list li:nth-child(3) a { aspect-ratio:300/317; background-image:url('../img/top/button-list-03-pc.png'); height:317px; width:300px; }
ul.button-list li:nth-child(3) a:active, ul.button-list li:nth-child(3) a:hover { background-image:url('../img/top/button-list-03-ov-pc.png'); }

}

/* ============================================================================================================================
入園について
============================================================================================================================ */

/* 見出し */
.entry-content h3 { padding-bottom:10px; padding-left:12px; margin-bottom:30px; }
.entry-content h3::after { aspect-ratio:67/90; background-image:url('../img/top/entry-icon.png'); transform:translateY(10px) rotate(-10deg); margin-left:7px; height:43px; width:58px; }

/* テキスト */
.entry-content p { font-weight:700; }
.entry-content div.text-box { padding:0 12px; margin-bottom:50px; }
.entry-content div.text-box p:first-child { font-size:18px; margin-bottom:30px; }
.entry-content div.text-box p a { text-decoration:underline; }

/* 画像 */
.entry-content img { padding-right:20px; height:auto; max-width:100%; width:100%; }

@container(min-width:960px) {

/* ベース */
.entry-content { margin:auto; margin-bottom:165px; max-width:1000px; width:100%; }

/* 見出し */
.entry-content h3::after { display:none; }

/* テキスト */
.entry-content div.text-box p:first-child { font-size:28px; }

}

/* ============================================================================================================================
よくあるご質問
============================================================================================================================ */

/* ベース */
p.faq { padding:0 30px; margin:auto; margin-bottom:55px; }

/* 画像 */
p.faq img { margin:auto; height:auto; max-width:100%; width:100%; }

@container(min-width:960px) {

/* ベース */
p.faq { padding:0; margin-bottom:130px; max-width:760px; width:100%; }

}

/* ============================================================================================================================
ご相談・お問い合わせ
============================================================================================================================ */

/* ベース */
section.contact { padding:0 30px; margin:auto; margin-bottom:30px; }

/* 画像 */
section.contact img { margin:auto; height:auto; max-width:100%; width:100%; }

/* テキスト */
section.contact div.contact-text {  margin:auto; max-width:90%; }
section.contact p.attention { text-indent:-1rem; padding-left:1rem; margin-top:15px; }
section.contact p.attention::before { content:'※'; }
section.contact p.right { font-size:12px; }

@container(min-width:960px) {

/* ベース */
section.contact { padding:0; margin-bottom:200px; max-width:750px; width:100%; }

/* テキスト */
section.contact div.contact-text { margin:auto; max-width:600px; }
section.contact div.contact-text p { font-size:22px; font-weight:700; letter-spacing:2.2px; line-height:1.6; max-width:100%; }
section.contact p.attention { margin-top:40px; }

}

/* ============================================================================================================================
バナーリスト
============================================================================================================================ */

/* ベース */
ul.bnr-list { flex-direction:column; gap:10px; margin:auto; margin-bottom:120px; }

/* バナー */
ul.bnr-list li { text-align:center; }
ul.bnr-list li img { height:auto; max-width:300px; }

@container(min-width:960px) {

/* ベース */
ul.bnr-list { flex-direction:row; gap:37px; justify-content:center; margin:auto; margin-bottom:248.5px; max-width:1000px; width:100%; }

}

@media( max-width:959px ) {

div.sp-only.back-config { position:relative; z-index:-1; }
section::before { aspect-ratio:177/368; background-image:url('../img/common/sakura-right.png'); display:inline-block; position:absolute; right:0; top:1000px; height:368px;; width:177px; z-index:-1; }
div.sp-only.back-config::before { aspect-ratio:250/331; background-image:url('../img/common/sakura-left-top.png'); position:absolute; bottom:-500px; left:0; height:331px; width:250px; z-index:-1; }

}

@media( min-width:960px ) {

/* デコレーション */
div.decoration, div.deco-top { position:relative; z-index:-1; }
main::before, main::after, div.deco-top::before, section.features-content::before { position:absolute; z-index:-1; }
main::before { aspect-ratio:376/780; background-image:url('../img/common/sakura-right.png'); top:1058px; right:20px; height:780px; width:376px; z-index:2; }
main::after { aspect-ratio:324/508; background-image:url('../img/common/sakura-left-top.png'); top:4636px; left:0; height:508px; width:324px; }
div.deco-top::before { aspect-ratio:348/633; background-image:url('../img/common/top-pc-sakura-1.png'); top:calc( -633px / 7 ); right:10vw; height:633px; width:348px; }
div.decoration span.deco-1 { aspect-ratio:1/1; background-color:#ffccd1; border-radius:50%; display:block; position:absolute; left:84px; top:1523px; height:86px;; width:86px; z-index:-1; }
div.decoration span.deco-2 { aspect-ratio:1/1; background-color:var(--pi-2); display:inline-block; position:absolute; top:1944px; right:80px; height:80px; width:80px; z-index:-1; }
div.decoration span.deco-3 { aspect-ratio:1/1; background-color:var(--pi-2); border-radius:50%; display:inline-block; position:absolute; right:60px; top:4269px; height:98px;; width:98px; z-index:-1; }
div.decoration span.deco-4 { aspect-ratio:1/1; background-color:#ffccd1; display:inline-block; position:absolute; top:4383px; left:59px; height:72px; width:72px; z-index:-1; }
div.decoration span.deco-5 { align-items:1/1; background-image:url('../img/common/triangle.png'); display:inline-block; position:absolute; top:5000px; right:65px; height:118px; width:118px; z-index:-1; }
div.decoration span.deco-6 { align-items:33/57; background-image:url('../img/top/osirase-icon.png'); display:inline-block; position:absolute; top:792px; right:450px; height:33px; width:57px; z-index:-1; }
section.features-content::before { aspect-ratio:384/256; background-image:url('../img/common/top-pc-sakura-2.png'); position:absolute; top:2200px; left:28px; height:256px; width:384px; z-index:-1; }

}