@charset 'utf-8';
/* ======================================== 
トップページCSS
========================================*/


/* ==================== ▽ 色設定CSS ▽ ==================== */

/* 全体 */
html { background-color:#fff; }

/* 見出し */
.top_midashi .subtitle { color:#c9cdce; }

/* お知らせ */
div.notice_frame::after { color:#c9cdce; }
div.in_frame { background-color:#fff; box-shadow:0px 0px 10px #ffedab20; }
ul.oshirase_list li span.cat a { color:#000; background-color:#4ce8c4; }
ul.oshirase_list li.event span.cat a { color:#000; background-color:#f5938e; }
ul.oshirase_list li.office span.cat a { color:#000; background-color:#fcfe69; }

/* 園での生活の様子 */
div.life { background-color:#fffcb6; }

/* 園での生活の様子 */
div.life h2 { background-color:#fff; border:1px solid #000; }

/* 入園について */
div.top_entry_list ul li::before { color:#f5938e; }

@media only screen and (min-width:600px) {
/* ◆ ===== タブレット ===== ◆ */

/* ヘッダ */
div.bg_circle::before { background-color:#fcfe69; }

}

@media only screen and (min-width:1025px) {
/* ◆ ===== PC ===== ◆ */

/* 見出し */
.top_midashi .subtitle { color:#000; }

/* ヘッダ */
div.bg_square { background-color:#d4cbe4; }

/* お知らせ */
div.notice_frame::after { color:#000; }

/* 園の紹介 */
div.top_about div.deco_circle { background-color:#fcfe69; }
div.top_about div.deco_square { background-color:#d4cbe4; }

/* 入園について */
div.entry_object01, div.entry_object04 { background-color:#f5938e; }
div.entry_object02 { background-color:#fcfe69; }

}


/* ==================== ▽ 個別CSS ▽ ==================== */

/* 調整 */
html { min-height:500px; height:100%; width:100%; }
div.site { min-height:100%; }

/* 横幅 */
div.w, main div.w { padding:0 1.25em; }

/* 見出し */
.top_midashi { display:inline-block; margin:0 0 0 24px; position:relative; z-index:1; }
.top_midashi::after { content:''; display:inline-block; background-repeat:no-repeat; background-position:center center; background-size:contain; }
.top_midashi .subtitle { font-size:36px; font-weight:600; position:absolute; top:30px; left:-107.5px; z-index:1; transform:rotate(90deg); }

/* 写真 */
div.top_ph { border-radius:2.5em; overflow:hidden; }

/* ヘッダ */
div.header_box h1 img { max-width:300px; }
div.top_header_right img { border-radius:25px; }
div.intro_txt { padding:20px 16px; }
div.intro_txt p { font-size:1.8em; margin:.25em 0; }

/* お知らせ */
div.notice_frame { margin:20px 0 0 0; position:relative; z-index:1; }
div.notice_frame::after { content:'NEWS'; font-size:36px; font-weight:600; display:inline-block; position:absolute; top:0; left:0; transform:translate(-35px,20px) rotate(90deg); z-index:-1; }
div.notice_frame h2 { font-size:2.5em; display:inline-block; margin:0 0 0 12.5vw; transform:translate( .5em,-1em ); position:absolute; z-index:1; }
div.notice_frame h2::after { content:''; display:inline-block; background-image:url("../img/top/notice/title_sp.svg"); background-repeat:no-repeat; background-position:center center; background-size:contain; margin:0 0 0 .75em; vertical-align:middle; height:33px; width:43px; }
div.in_frame { border-radius:1em; padding:3.5em 2em 3.5em 1.75em; margin:0 0 30px 12.5vw; }
ul.oshirase_list li { margin:0  0 .75em 0; }
ul.oshirase_list li:last-child { margin:0; }
ul.oshirase_list li div.notice_list_top::before { content:''; display:inline-block; background-repeat:no-repeat; background-position:center center; background-size:contain; vertical-align:middle; }
ul.oshirase_list li div.notice_list_top::before { background-image:url("../img/top/notice/i_office.svg"); height:26px; width:25px; }
ul.oshirase_list li.event div.notice_list_top::before { background-image:url("../img/top/notice/i_event.svg"); height:26px; width:25px; }
ul.oshirase_list li.office div.notice_list_top::before { background-image:url("../img/top/notice/i_office.svg"); height:26px; width:25px; }
ul.oshirase_list li div.notice_list_top { margin:0 0 .5em 0; }
ul.oshirase_list li div.notice_list_top span.cat a { display:inline-block; padding:.15em .5em; margin:0 .25em 0 0; text-align:center; width:75px; }
p.notice_list_bottom { padding:0 0 0 2.25em; }

/* 園の紹介 */
div.top_about { position:relative; z-index:1; }
div.top_about h2 { font-size:2.5em; margin:0 0 .75em 0; }
div.top_about div.top_midashi::after { background-image:url("../img/top/about/i_syokai.svg"); position:absolute; top:0; left:120px; height:41px; width:37px; }
div.top_about div.top_ph { margin:0 24px 20px 24px; }
div.top_about p { margin:0 24px 20px 24px; }

/* 保育の特色 */
div.feature { margin:30px 0 0 0; }
div.feature h3 { font-size:2em; margin:0 0 .75em 0; text-align:center; }

/* 園での生活の様子 */
div.life { padding:52px 0; position:relative; margin:225px 0 0 0; z-index:1; }
div.life div.bird { position:absolute; z-index:1; top:-150px; left:3em; }
div.life div.bird::after { content:''; background-repeat:no-repeat; background-position:center center; background-size:contain; background-image:url("../img/top/life/bird.svg"); display:inline-block; position:absolute; z-index:1; top:48px; left:80px; height:40px; width:35px; }
div.life h2 { border-radius:5em; display:inline-block; text-align:center; padding:.5em 2.25em; position:absolute; top:-1em; left:50%; transform:translate(-50%,0); max-width:80vw; }
div.movie { aspect-ratio:16 / 9; box-sizing:border-box; padding:0 24px; margin:0 0 24px 0; max-width:100%; width:auto; }
div.movie iframe { height:100%; width:100%; }
div.life p { margin:0 30px; }
ul.life_btn { margin:auto; width:75vw; }
ul.life_btn li a { display:block; background-repeat:no-repeat; background-position:center center; background-size:contain; }
ul.life_btn li:first-child { transform:translate(0,30px); }
ul.life_btn li:first-child a { height:calc( 438px * 0.4 ); width:calc( 405px * 0.4 ); }
ul.life_btn li:first-child a:link, ul.life_btn li:first-child a:visited { background-image:url("../img/top/life/btn01.png"); }
ul.life_btn li:first-child a:active, ul.life_btn li:first-child a:hover { background-image:url("../img/top/life/btn01_ov.png"); }
ul.life_btn li:nth-child(2) { transform:translate(16px,0); }
ul.life_btn li:nth-child(2) { display:flex; justify-content:flex-end; }
ul.life_btn li:nth-child(2) a { height:calc( 378px * 0.4 ); width:calc( 416px * 0.4 ); }
ul.life_btn li:nth-child(2) a:link, ul.life_btn li:nth-child(2) a:visited { background-image:url("../img/top/life/btn02.png"); }
ul.life_btn li:nth-child(2) a:active, ul.life_btn li:nth-child(2) a:hover { background-image:url("../img/top/life/btn02_ov.png"); }
ul.life_btn li:nth-child(3) { transform:translate(0,-30px); }
ul.life_btn li:nth-child(3) a { height:calc( 405px * 0.4 ); width:calc( 397px * 0.4 ); }
ul.life_btn li:nth-child(3) a:link, ul.life_btn li:nth-child(3) a:visited { background-image:url("../img/top/life/btn03.png"); }
ul.life_btn li:nth-child(3) a:active, ul.life_btn li:nth-child(3) a:hover { background-image:url("../img/top/life/btn03_ov.png"); }

/* 入園について */
div.top_entry { position:relative; z-index:1; }
div.top_entry h2 { font-size:2.5em; margin:0 0 .75em 0; }
div.top_entry div.top_midashi::after { background-image:url("../img/top/entry/i_entry.svg"); position:absolute; top:0; left:150px; height:41px; width:37px; }
div.top_entry .top_midashi .subtitle { top:30px; left:-78px; }
div.top_entry_txt { padding:0 30px; margin:0 0 36px 0; }
p.entry_hyo { margin:auto; max-width:calc( 100% - 60px ); }
p.entry_btn { text-align:center; margin:60px auto auto auto; max-width:calc( 100% - 60px ); }
div.entry_object03 { display:none; }
div.top_entry_list { margin:20px auto 0 auto; max-width:65%; }
div.top_entry_list ul li { line-height:2; }
div.top_entry_list ul li::before { content:'▶'; margin:0 .25em 0 0; }

/* 外部リンク */
div.top_link ul { padding:0 25px; }
div.top_link ul li { text-align:center; margin:0 0 10px 0; }

@media only screen and (min-width:600px) {
/* ◆ ===== タブレット ===== ◆ */

/* 見出し */
.top_midashi { margin:0 0 0 24px; }
.top_midashi .subtitle { left:-115px; }

/* ヘッダ */
div.header_box h1 span img { padding:0 15px 0 0; }
div.bg_circle { right:0; left:auto; transform:translate(70%,-50%); }
div.bg_circle::before { content:''; border-radius:50%; position:absolute; top:50%; right:50%; left:auto; transform:translate(0,-50%); height:70vh; width:70vw; z-index:-1; }

/* お知らせ */
div.notice_frame { margin:20px auto 0 auto; width:85%; }
div.notice_frame::after { transform:translate(-36px,20px) rotate(90deg); }
div.notice_frame h2 { margin:0 0 0 36px; }
div.in_frame { padding:4em 5em 4em 5em; margin:0 36px 30px 36px; }
ul.oshirase_list li { margin:0  0 1.25em 0; }
ul.oshirase_list li:last-child { margin:0; }
ul.oshirase_list li.event div.notice_list_top::before { height:31px; width:30px; }
ul.oshirase_list li.office div.notice_list_top::before { height:31px; width:30px; }
ul.oshirase_list li div.notice_list_top { margin:0 0 .75em 0; }
ul.oshirase_list li div.notice_list_top span.cat a { width:120px; }

/* 保育の特色 */
div.feature { margin:80px 0 0 0; }
div.feature h3 { font-size:2.25em; margin:0 24px 1em 24px; text-align:left; }
div.feature_block { display:flex; justify-content:space-around; align-items:center; }

/* 園での生活の様子 */
div.life { padding:60px 0; margin:120px 0 0 0; }
div.life div.bird { top:-40px; left:12vw; }
div.life h2 { display:block; text-align:center; padding:.5em 1em; margin:0 auto 36px auto; position:static; transform:translate(0,0); width:300px; }
div.movie { margin:0 auto 36px auto; }
div.life p { text-align:center; }
ul.life_btn { display:flex; justify-content:center; align-items:center; width:auto; }
ul.life_btn li { margin:0 20px 0 0; }
ul.life_btn li:last-child { margin:0; }
ul.life_btn li:nth-child(2) { display:block; }
ul.life_btn li:first-child { transform:translate(0,0); }
ul.life_btn li:nth-child(2) { transform:translate(0,0); }
ul.life_btn li:nth-child(3) { transform:translate(0,0); }

/* 入園について */
p.entry_btn { text-align:center; margin:60px auto auto auto; max-width:calc( 100% - 60px ); }
p.entry_btn img { margin:auto; max-width:450px; text-align:center; }

/* 外部リンク */
div.top_link ul { display:flex; justify-content:space-around; align-items:flex-start;  padding:0; }
div.top_link ul li { margin:0 5px 0 0; }
div.top_link ul li:last-child { margin:0; }

}

@media only screen and (min-width:1025px) {
/* ◆ ===== PC ===== ◆ */

/* ヘッダ */
header { padding:60px 0; }
div.bg_circle::before { width:750px; }
div.bg_square { position:absolute; top:50%; left:0; transform:translate(0,-50%); z-index:1; height:70vh; width:75px; }
div.top_header_deployment { display:flex; justify-content:space-around; align-items:flex-start; margin:50px 0 0 0; }
div.top_header_left { padding:0 20px 20px 20px; width:320px; }
div.top_header_left img { max-width:300px; }
div.top_header_right { width:calc( 100% - 320px ); }
div.top_header_right img { max-height:500px; }
div.intro_txt p { font-size:2em; margin:.25em 0; }
header h1::before { display:none; }

/* メニュー */
nav ul.main_nav_list { margin:3vh auto auto auto; }

/* お知らせ */
div.notice_flower { position:absolute; top:-90px; right:60px; }
div.notice_flower::before { content:''; display:inline-block; background-repeat:no-repeat; background-position:center center; background-size:contain; background-image:url("../img/top/notice/flower.png"); position:absolute; top:-60px; right:80px; height:67px; width:66px; z-index:1; }
div.notice_frame { margin:200px auto 0 auto; max-width:1024px; width:85%; }
div.notice_frame::after { font-size:40px; transform:translate(-42px,30px) rotate(90deg); }
div.notice_frame h2 { font-size:32px; margin:0 0 0 50px; }
div.in_frame { padding:5em; margin:0 50px 36px 50px; }
div.notice_frame h2::after { position:absolute; top:160px; left:-100px; }

/* 園の紹介 */
div.top_about { margin:250px auto auto auto; width:85%; }
div.top_about div.deco_circle, div.top_about div.deco_square { position:absolute; z-index:-1; }
div.top_about div.deco_circle { border-radius:50%; top:-32.5vh; left:-150px; height:100px; width:100px; }
div.top_about div.deco_square { top:-100px; right:-150px; height:100px; width:100px; }
div.top_about h2 { font-size:32px; margin:0 0 24px 12px; }
div.top_about div.top_midashi::after { top:130px; left:-50px; }
div.top_about div.top_ph { margin:0 36px 36px 36px; }
div.top_about p { margin:0 24px 36px 24px; }

/* 園での生活の様子 */
div.movie { max-width:1024px; width:75%; }
ul.life_btn { margin:0 60px; }
ul.life_btn li:first-child a { height:calc( 438px * 0.6 ); width:calc( 405px * 0.6 ); }
ul.life_btn li:nth-child(2) a { height:calc( 378px * 0.6 ); width:calc( 416px * 0.6 ); }
ul.life_btn li:nth-child(3) a { height:calc( 405px * 0.6 ); width:calc( 397px * 0.6 ); }

/* 入園について */
div.top_entry { padding:0 0 120px 0; margin:auto; width:85%; }
div.top_entry h2 { font-size:32px; }
div.top_entry div.top_midashi::after { top:140px; left:-65px; }
div.top_entry .top_midashi .subtitle { left:-100px; }
div.top_entry_txt { margin:0 0 60px 0; }
p.entry_hyo { max-width:calc( 100% - 60px ); }
p.entry_hyo img { max-width:600px; margin:0; }
p.entry_btn { margin:100px auto auto auto; }
div.entry_object01, div.entry_object04 { border-radius:50%; position:absolute; z-index:-1; height:100px; width:100px; }
div.entry_object01 { top:60px; right:-120px; }
div.entry_object02 { position:absolute; z-index:-1; top:620px; left:-20vw; height:120px; width:120px; }
div.entry_object03 { display:inline-block; position:absolute; top:1000px; right:-120px; z-index:-1; }
div.entry_object03 img { object-fit:contain; height:100px; width:auto; }
div.entry_object04 { top:1400px; left:-120px; }
div.top_entry_list { margin:30px auto 0 auto; max-width:450px; }
div.top_entry_list ul { padding:0 50px; }

/* 外部リンク */
div.top_link ul { padding:0 100px; }

}

@media only screen and (min-width:1200px) {
/* ◆ ===== クソデカ幅 ===== ◆ */

/* お知らせ */
div.notice_frame { max-width:1200px; width:70%; }

}