/* pankuzu */ #topickpath{ margin:0 2rem 6rem; position: relative; z-index: 2; } #topickpath ul{ justify-content: flex-start; line-height: 2rem; } #topickpath ul .txt{ font-size: 1.2rem; } #topickpath ul li:not(:last-child){ padding-right: 1.5rem; position: relative; margin-right: .5rem; } #topickpath ul li:not(:last-child):after{ content: '>'; position: absolute; right: 0; color: #666; font-size: 1rem; } #topickpath ul li{ font-size: 1.2rem;} #topickpath a{ color: #FF8066; border-bottom: 1px solid #FF8066; } #main{ height: 40rem; text-align: center; display: flex; align-items: center; position: relative;/* justify-content: center;*/} #mainBg{ background-size: cover; background-position: center; position: fixed; top: 0; height: 40rem; width: 100%; } #main h2{ text-shadow:0 0 1rem rgba(0,0,0,0.2); font-size:3.6rem; color: #fff; letter-spacing: 1rem; position:absolute; z-index: 2; text-align: center; width: 100%; box-sizing: border-box; top: 50%; position: absolute; margin-top: 3%;} .overlay{ width: 100%; height: 100%; background: rgba(0,0,0,0.25); position:absolute; top: 0; left: 0; z-index: 1;} #main:after{ position: absolute; content:''; background-size:contain; background-repeat: no-repeat; z-index: 2;} #news #main:after{ background-image: url(../images/cover/illust_news.png); width: 17.6rem; height: 13.2rem; right: 10rem;; bottom: -9rem;} #philosophy #main:after , #education #main:after , #message #main:after , #curriculum #main:after , #oneday #main:after{ background-image: url(../images/cover/illust_philosophy.png); width: 14.3rem; height: 12.7rem; right: 10rem;; bottom: -7rem;} #about #main:after, #facility #main:after , #staff #main:after{ background-image: url(../images/cover/illust_about.png); width: 14rem; height: 13.6rem; right: 10rem;; bottom: -7rem;} #guide #main:after, #faq #main:after, #voice #main:after, #album #main:after{ background-image: url(../images/cover/illust_guide.png); width: 15.9rem; height: 13.6rem; right: 10rem;; bottom: -7rem;} #support #main:after, #event #main:after{ background-image: url(../images/cover/illust_support.png); width: 10.1rem; height: 13.6rem; right: 10rem;; bottom: -7rem;} #contact #main:after , #privacy #main:after , #photo #main:after{ background-image: url(../images/cover/illust_contact.png); width: 20.9rem; height: 13.6rem; right: 10rem;; bottom: -6rem;} #mori #mori02 .inner.bgPink table{ width: 100%; margin-bottom: 40px; } #mori #mori02 .inner.bgPink table th,#mori #mori02 .inner.bgPink table td{ padding: 1.5rem; width: auto; text-align: center; } #mori #contents .box table th{ padding: 3rem 2rem; } @media screen and (max-width: 768px){ #mori #mori02 .inner.bgPink .tableWrap{ overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch } #mori #mori02 .inner.bgPink table th , #mori #mori02 .inner.bgPink table td { display: table-cell; } #mori #contents .box table th{ padding: 2rem 0; } } .title { margin-bottom: 4rem;} .title h3{ text-align: center; margin-left: auto; margin-right: auto; font-size: 3rem; line-height: 4rem; position: relative; margin-bottom:0; display: inline-block; padding: 2rem 5rem;} .title h3:before{ content:''; background: url(../images/common/title_b.png) no-repeat center; background-size: contain; width: 4.2rem; height: 4.2rem; position: absolute; top:0; left:0; } .title h3:after{ content:''; background: url(../images/common/title_a.png) no-repeat center; background-size: contain; width: 4.2rem; height: 4.2rem; position: absolute; bottom: 0; right:0; } .title p{ margin-top: 3rem; line-height: 3rem; margin-bottom: 6rem;} .title p a{ color:#FF8066; text-decoration: underline;} #localNav { margin-top: 12rem;} #localNav li{ width: 50%; box-sizing: border-box; padding: 1.5rem; overflow: hidden; } #localNav li figure{ overflow: hidden; height:28.5rem; width: 100%; display: block; border-radius: 2rem; position:relative; display: flex; align-items: center; justify-content: center; z-index: 1;} #localNav li figure div{ background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-transition: .4s; transition: .4s; width: 100%; height: 100%;} #localNav li figure figcaption{ border-radius: 10rem; text-align: center; position: absolute; background: #fff; font-size: 1.8rem; padding: 1.5rem; width:56%; max-width: 30rem; font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; } @media screen\0 { #localNav li figure{ display:block;} #localNav li figure figcaption{ top: 43%; left: 23%; } } #localNav li figure figcaption svg.arrow{ width:.8rem; height:1.2rem; fill:#FF8066; -webkit-transition: .4s; transition: .4s; right: 2rem; top: 50%; margin-top: -.6rem; fill:#FF8066; position: absolute;} #localNav li a:hover figure figcaption svg.arrow{ right:1.5rem; } #localNav li a:hover figure div{transform: scale(1.1);} #philosophy #localNav li:first-child , #education #localNav li:nth-child(2), #message #localNav li:nth-child(3), #curriculum #localNav li:nth-child(4), #oneday #localNav li:nth-child(5){ display: none;} #about #localNav li:first-child , #facility #localNav li:nth-child(2), #staff #localNav li:nth-child(3){ display: none;} #guide #localNav li:first-child , #faq #localNav li:nth-child(2), #voice #localNav li:nth-child(3), #album #localNav li:nth-child(4){ display: none;} /* PHILOSOPY */ #philosophy #philosophy01 h4 , #philosophy #philosophy01 p{ margin-bottom: 3rem;} #philosophy #philosophy01 .wrap-box{ align-items:center;} #philosophy #philosophy01 .txt{ text-align: left; margin-left: auto; margin-right: auto;} #philosophy #philosophy01 figure { width: 50rem; margin-left: auto; margin-right: auto;} #philosophy #philosophy01 .txt ul{ width: 48rem;} #philosophy #philosophy01 .txt ul li{ font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; font-size: 1.8rem; border-bottom: .2rem dotted #FF8066; padding-bottom: 1.5rem; margin-bottom: 2rem;} #philosophy #philosophy02 figure { width:46.9rem; margin-left: auto; margin-right: auto;} #philosophy #philosophy02 .wrap-box{ align-items:center;} #philosophy #philosophy02 .txt{ width: 55rem; text-align: left; margin-left: auto; margin-right: auto;} #philosophy #philosophy02 .txt dt{ font-size: 2.4rem; margin-bottom: 2rem; } #philosophy #philosophy02 .txt dt:before{ content: '●'; color:#D7ECFB; margin-right:.5rem; } #philosophy #philosophy02 .txt dt:nth-of-type(2):before{ color:#FFECD1; } #philosophy #philosophy02 .txt dt:nth-of-type(3):before{ color:#FFD8D8; } #philosophy #philosophy02 .txt dd {border-bottom: .2rem dotted #FF8066; padding-bottom:3rem; margin-bottom: 3rem;} #philosophy #philosophy03 dl{ background:#FFF9F7; border-radius: 2rem; padding:4rem; box-sizing: border-box; margin-left: auto; margin-right: auto; margin-bottom:2rem; align-items: center; justify-content: flex-start; } #philosophy #philosophy03 dt{ font-size: 2.4rem; color:#FF8066; display: flex; align-items: center; line-height: 1; width: 30%; } #philosophy #philosophy03 dt span{ font-size: 6rem; margin-right: 2rem; line-height: 1; margin-top: -1rem; } #philosophy #philosophy03 dd{ text-align: left; width: 70%; } /* EDUCATION */ #education #education01 .wrap-box{} #education #education01 figure { width: 42%; margin-left: auto; margin-right: auto; } #education #education01 figure img{ border-radius: 2rem;} #education #education01 .txt{ text-align: left; width: 50%;} #education #lunch.boxPink{ background: #FFF9F7; border-radius: 2rem; padding: 6rem; position: relative;} #education #lunch.boxPink h3{ color:#FF8066; font-size:3.6rem; line-height: 5rem; margin-bottom: 6rem; } #education #lunch.boxPink h3 span{font-size:2.4rem; display: block; } #education #lunch.boxPink ul{ margin-bottom: 6rem;} #education #lunch.boxPink li{ width: 48%;} #education #lunch.boxPink li img { border-radius: 2rem;} #education #lunch.boxPink:after{ content: ''; background: url("../images/education/icon_lunch.png") center no-repeat; background-size:contain; position: absolute; bottom: -4rem; right: 4rem; width:15rem; height:15rem;} /* MESSAGE */ #message #message01 figure{ width: 42%;} #message #message01 .txt{ width: 50%; text-align: left;} #message #message01 .txt p{ margin-bottom: 4rem;} #message #message01 .txt #name{ font-size:2.4rem; } #message #message01 .txt #name span{ font-size:1.5rem; display: block;} /* CURRICULUM */ #curriculum #curriculum01 .wrap-box{ width: 94rem; margin: 0 auto 4rem; align-items: center;} #curriculum #curriculum01 .txt{ text-align: left; width: 54rem;} #curriculum #curriculum01 .txt h4{ margin-bottom: 3rem;} #curriculum #curriculum01 figure{border-radius: 100%; width: 30rem; height: 30rem; overflow:hidden;} #curriculum #curriculum01 figure img{width: 100%; height: 100%; object-fit: cover;} #curriculum #curriculum01 .wrap-box:nth-of-type(even){ padding-right: 4rem;} #curriculum #curriculum01 .wrap-box:nth-of-type(odd){ padding-left: 4rem; flex-direction: row-reverse;} #curriculum #curriculum02 > .wrap-box{ border-bottom: .2rem dotted #FF8066; padding-bottom: 3rem; margin-bottom: 3rem; } #curriculum #curriculum02 > .wrap-box:last-of-type{ border-bottom: none; padding-bottom: 0;} #curriculum #curriculum02 > .wrap-box .txt{ width:60%; } #curriculum #curriculum02 > .wrap-box .img{ width: 40%;} #curriculum #curriculum02 > .wrap-box .txt dl { align-items: center;} #curriculum #curriculum02 > .wrap-box .txt dl dt{text-align: right; color: #FF8066; font-size:1.8rem; width: 15%; margin-bottom: 3rem; } #curriculum #curriculum02 > .wrap-box .txt dl dd{ width: 80%; margin-bottom: 3rem; } #curriculum #curriculum02 > .wrap-box .txt dl dd ul{ justify-content: flex-start;} #curriculum #curriculum02 > .wrap-box .txt dl dd ul li{ list-style:disc inside; margin-right: 2rem; text-align: left;} #curriculum #curriculum02 > .wrap-box .img li{ width: 48%;} #curriculum #curriculum02 > .wrap-box .img li img{ border-radius: 1rem; margin-bottom: 1rem;} #curriculum #curriculum02 > .wrap-box .img li figcaption{ line-height: 1;} /* ONEDAY */ #oneday #oneday01 .inner h3{ font-size: 3.6rem; color:#FF8066; margin-bottom: 4rem; background: #fff; padding: 2rem; } #oneday #oneday01 .txt , #oneday #oneday01 figure{ width: 46%;} #oneday #oneday01 .txt{ text-align:left;} #oneday #oneday01 .txt p{ margin-bottom: 2rem;} #oneday #oneday01 .txt h4{ line-height: 4rem;} #oneday #oneday01 figure img{ border-radius: 2rem;} #oneday #oneday01{ position: relative;} #oneday #oneday01:after{ position: absolute; content: ''; width:1rem; height: 100%; background:#FFE6E1; top: 0; left: 50%; margin-left: -.5rem; z-index: -1; } /* ABOUT */ #about #access #map{ margin-bottom: 6rem;} #about #bus figure{ width: 75%; margin-left: auto; margin-right: auto; } #about #history .txt{ width: 55%;} #about #history figure{ width: 40%} #about #history .txt { text-align: left; align-items: center;} #about #history .txt dl{ border-bottom: .2rem dotted #FF8066;} #about #history .txt dt{ color:#FF8066; font-size: 1.8rem; margin-bottom: 2rem; width: 20%; } #about #history .txt dd{ font-size: 1.5rem; margin-bottom: 2rem; width: 80%; } /* FACILITY */ ul.gallery{ justify-content: flex-start;} ul.gallery li{ width: 23%; margin:0 1% 2%;} ul.gallery li figure .cap{ border-radius: 1rem; padding-top: 75%; background-color: #ebebeb; background-position: center; background-size: cover; margin-bottom: 1rem; position: relative;} ul.gallery li figure .cap:after{ content:''; background: url(../images/common/icon_zoom.svg) no-repeat center; background-size: cover; width:1.4rem; height: 1.4rem; position: absolute; bottom: 1rem; right: 1rem; } /* GUIDE */ #guide01 .inner , #flow .inner , #guide03 .inner { margin-left: auto; margin-right: auto;} #guide01 .inner .bgPink{ padding: 4rem 8rem; box-sizing: border-box; margin-bottom: 2rem; border-radius: 2rem;} #guide01 .inner .bgPink dl{ align-items: center; border-bottom: .2rem dotted #FF8066; margin-bottom: 4rem; padding-bottom: 4rem; } #guide01 .inner .bgPink dt , #flow .inner li dt{ color: #FF8066; font-size: 1.8rem; width:30%; } #guide01 .inner .bgPink dd , #flow .inner li dd{ width:70%; text-align: left; } #guide01 .inner .bgPink dd table{ width: 100%; border: none;} #guide01 .inner .bgPink dd table tr{ border: none;} #guide01 .inner .bgPink dd table th , #guide01 .inner .bgPink dd table td{ border:.1rem solid #FF8066; border-right: .1rem solid #EFEFEF; padding: 2rem; text-align: center;} #guide01 .inner .bgPink dd table th { background: #FF8066; color: #fff; border-right: .1rem solid #EFEFEF;} #guide01 .inner .bgPink dd table td{ background: #fff; } #guide01 .inner .bgPink dd table th:last-child , #guide01 .inner .bgPink dd table td:last-child{border-right: .1rem solid #FF8066; } #guide01 .inner .bgPink .dl-column dt { width: 100%; margin-bottom: 2rem; text-align: left;} #guide01 .inner .bgPink .dl-column dd { width: 100%; } .btn.pdf{ font-size:2rem; padding: 3rem 17rem; height: auto;} .btn.pdf:after{ position: absolute; content: ''; width:4.65rem; height:5.5rem; right: 4.5rem; background-image:url(../images/common/icon_pdf.svg); background-repeat: no-repeat; background-size: cover; top: 50%; margin-top: -2.8rem;} #flow .inner li{ background:#FFF9F7; margin-bottom: 6rem; border-radius: 2rem; position: relative; padding:4rem; position: relative; } #flow .inner li span{ line-height: 1; position: absolute; font-size: 1.8rem; color:#FF8066; top: -.9rem; left: 4rem;font-weight: 700;} #flow .inner li dl{ align-items: center; } #flow .inner li:not(:last-child):after{ bottom: -4rem; position: absolute; content:''; transform: rotate(90deg); background-image:url(../images/common/arrow_orange.svg); width: 1rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: contain;} #guide03 .inner figure img { width: 80%; margin-bottom: 6rem;} #guide03 .inner figure figcaption dl{ text-align: left; } #guide03 .inner figure figcaption dt{ text-align: center; background:#FF8066; color: #333; font-size: 1.5rem; padding: 2rem; margin-bottom: 2rem; border-radius: 1rem; display: inline-block; width: 25rem;} #guide03 .inner figure figcaption dd{ margin-bottom: 6rem;} #guide03 .inner figure figcaption dt:nth-of-type(2){ background-color: #FAB8A0;} #guide03 .inner figure figcaption dt:nth-of-type(3){ background-color: #FADCA0;} #guide03 .inner figure figcaption dt:nth-of-type(4){ background-color: #AFD3AA;} #guide #news #newsList .inner.bgPink{ padding: 4rem 8rem;} /* FAQ */ #faq .box dl.accordion{ text-align: left;} #faq .box dl.accordion dt{ color: #FF8066; font-size: 1.8rem; position: relative; cursor: pointer;} #faq .box dl.accordion dt:after{top: 50%; right:0; position: absolute; content:''; transform: rotate(90deg); background-image:url(../images/common/arrow_orange.svg); width: 1rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: contain; top: -.4rem;} #faq .box dl.accordion dd{ margin:4rem 0 0; } #faq .box dl.accordion dd p{ margin: 0;} #faq .box dl.accordion dt.open:after{transform: rotate(-90deg);} #faq .box.faqList .inner{ position: relative; background:#FFF9F7; padding:4rem; border-radius: 2rem; margin:0 auto 4rem; } #faq .box.faqList .inner span{ position: absolute; top: -1.2rem; left: 4rem; line-height: 1; font-size: 2.4rem; color: #FF8066; font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; } /* VOICE */ #voice .box.voiceList li{ position: relative; background:#FFF9F7; padding:4rem; border-radius: 2rem; margin:0 auto 4rem; text-align: left; align-items: center; } #voice .box.voiceList li figure{ width:20%; text-align: center;} #voice .box.voiceList li figure img{ width: 20rem; margin-bottom: 1rem;} #voice .box.voiceList li figure figcaption{font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif;} #voice .box.voiceList li dl{ width: 75%;} #voice .box.voiceList li dt{ color: #FF8066; font-size: 1.8rem; position: relative; cursor: pointer; margin-bottom: 2rem;} #contents .box.noPost .inner.bgPink { border-radius:2rem; } #contents .box.noPost .inner.bgPink p{ margin-bottom: 0; font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; color: #FF8066;} /* ALBUM */ #album #album01 .wrap-box { justify-content: flex-start; margin-bottom: 6rem;} #album #album01 .wrap-box li{ width: 20%; padding:.1rem; box-sizing: border-box;} #album #album01 .wrap-box li a{} #album #album01 .wrap-box li figure{ background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 100%;} #album #album01 .btn svg.insta{ fill:#FF8066; position: absolute; left: 2rem; top: 50%; margin-top: -1rem; fill:#FF8066; -webkit-transition: .4s; transition: .4s; } #album #album01 .btn:hover svg.insta{ fill:#fff;} #album #album01 .wrap-box li:last-child , #album #album01 .wrap-box li:nth-last-child(2){ display: none;} /* SUPPORT */ #support #lead .pageLink{ justify-content: center; margin-top:6rem;} #support #lead .pageLink li{ line-height: 1;} #support #lead .pageLink li a{ color: #FF8066; text-decoration: underline; } #support #lead .pageLink li { margin:0 1rem; padding:0 1rem 0 0; border-right: .1rem solid #FF8066;} #support #lead .pageLink li:last-child {border:none;} #support #support01 .inner { width: 90rem; margin-left: auto; margin-right: auto;} #support #support01 .inner h4{ font-size: 1.8rem; color:#FF8066; line-height: 3rem; margin-bottom: 2rem; } #support #support01 .inner table{ width: 100%; margin-bottom: 2rem;} #support #support01 .inner p{ text-align: left; } #support #support01 .inner table{ width: 100%; border: none;} #support #support01 .inner table tr{ border: none;} #support #support01 .inner table tr.bgPink td{ background:#FFF9F7;} #support #support01 .inner table th , #support #support01 .inner table td{ border:.1rem solid #FF8066; border-right: .1rem solid #EFEFEF; padding: 2rem; text-align: center;} #support #support01 .inner table th { background: #FF8066; color: #fff; border-right: .1rem solid #EFEFEF;} #support #support01 .inner table td{ background: #fff; } #support #support01 .inner table th:last-child , #support #support01 .inner table td:last-child{border-right: .1rem solid #FF8066; } #support #support02 table { width: 90rem;} #support #support02 table th{ width: 20rem; } #support #support02 table ol{ list-style: outside decimal;} #support #support02 table li { margin-left: 2rem; margin-bottom: 1rem;} #support #support02 table li:last-child{ margin-bottom: 0;} #support #support02 table ul {list-style: outside disc;} #support #support03 .inner{ margin-bottom: 10rem;} #support #support03 .inner li.wrap-box{ margin-left: auto; margin-right: auto; } #support #support03 .inner li.wrap-box{ margin-bottom: 6rem;} #support #support03 .inner li.wrap-box figure{ width:30rem; } #support #support03 .inner li.wrap-box figure img{ border-radius: 1rem;} #support #support03 .inner li.wrap-box dl{ text-align: left; width: 75rem; } #support #support03 .inner li.wrap-box dl dt{ font-size:2.4rem; margin-bottom: 2rem; } #otherList h4{ color: #FF8066; margin-bottom: 6rem; } #otherList ul{justify-content: flex-start;} #otherList li{ width:25%; padding: 0 1%; box-sizing: border-box; margin-bottom: 4rem; } #contents .box .inner#otherList li a{ text-decoration: none; color:#333; } #otherList li a figure .cap{ background-image: url(../images/support/dummy.jpg); margin-bottom: 1rem; padding-top: 75%; border-radius: 1rem; background-position: center; background-repeat: no-repeat; background-size: cover;} #otherList li a figure figcaption{ text-decoration: none;} #otherList li a figure figcaption .date{ font-size: 1.2rem; line-height: 2.4rem; display: block;} #otherList ul{ margin-bottom: 2rem;} /* CONTACT */ #contact #lead .telBox{ width: 74rem; align-items: center; border-radius: 2rem; padding: 4rem 6rem; } #contact #lead .telBox h4{ font-size: 1.8rem; margin: 0;} #contact #lead .telBox dl{ text-align: center;} #contact #lead .telBox dt{ color: #FF8066; font-size:3.6rem; margin-bottom: 1rem; position: relative; padding:0 4rem; } #contact #lead .telBox dt:after{ position: absolute; left: 0; top: 0; content:''; background-image: url("../images/common/icon_tel.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; width:2.6rem; height: 3.7rem; } #contact #lead .telBox dd{ font-size:1.3rem; } #contact #form p{ margin-bottom: 4rem;} #contact #form p a{ color:#FF8066; text-decoration: underline; } #contents #form.box table{ margin-bottom: 4rem; width: 100%;} #form.box table th{ width: 30rem;} #form.box table th .must{ background:#FF8066; color: #fff; font-size: 1.3rem; padding:.2rem 1rem; line-height: 1; border-radius: .6rem; margin-left: 1rem; } #form.box table td{ background: #fff;} /* #form.box table td .mwform-checkbox-field{ width: 50%; display: block;} */ .wrap-box .horizontal-item{ width: 48%; display: inline-block;} .mw_wp_form .wrap-box .horizontal-item + .horizontal-item{ margin: 0 !important;} #contact #contents #form.box table td input , #contact #contents #form.box table td textarea { border: .1rem solid #ccc; padding: 1rem 2rem; background: #fff; border-radius: .5rem; } .post-password-form input[type=password]{ text-align: left; border: .1rem solid #ccc; padding: 1rem 2rem; background: #fff; border-radius: .5rem; } .post-password-form input[type=submit]{ background:#FF8066; color: #fff;border-radius: .5rem; padding: 1rem 2rem; text-align: center; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;} .post-password-form input[type=submit]:hover{opacity: 0.75; filter: alpha(opacity=75); -moz-opacity: 0.75; -ms-filter: "alpha(opacity=75)";} #contact #contents #form.box table td input:hover , #contact #contents #form.box table td textarea:hover , #contact #contents #form.box table td input:focus , #contact #contents #form.box table td textarea:focus{ border-color:#FF8066; } #contact #contents #form.box table td input[type=text]{ width: 50%;} #contact #contents #form.box table td input#year{ width: 12rem;} #contact #contents #form.box table td input#month , #contact #contents #form.box table td input#day{ width: 8rem;} #contact #contents #form.box table td input#zip { width: 20%; margin-right: 1.5rem;} #contact #contents #form.box table td input#addr{ margin-top: 2rem; width: 100%; display: block;} #contact #contents #form.box table td input#mail{ width: 100%;} #contact #contents #form.box table td .selectWrap{ display: inline-block; position: relative; width: 30%; border: .1rem solid #ccc; background: #fff; border-radius: .5rem; } #contact #contents #form.box table td .selectWrap select{ width: 100%; padding: 1rem 2rem;} #contact #contents #form.box table td .selectWrap:before{ position: absolute; top:45%; right: 2rem; width: 0; height: 0; padding: 0; content: ''; border-left: .6rem solid transparent; border-right: .6rem solid transparent; border-top: .6rem solid #4E255F; pointer-events: none; } @media screen\0 { #contact #contents #form.box table td .selectWrap:before{display: none !important;} #contact #contents #form.box table td .wrap-box{ display: block;} } #contact #contents #form.box table td textarea{ width: 100%;} #contact #form #privacy { width: 99rem; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 6rem;} #contact #form #privacy p{ margin-bottom: 4rem;} #contact #form #privacy .scrollBox h4{ font-size: 1.8rem; color:#4E255F; margin-bottom: 4rem; } #contact #form #privacy .scrollBox{ border: .1rem solid #ccc; padding: 4rem; overflow-y: scroll; text-align: left; height: 20rem;} #contact #form #privacy .scrollBox dt{ color: #333;} #contact #form #privacy .scrollBox dd{ margin-bottom: 4rem;} #contact #contents #form.box table td input.error-box , #contact #contents #form.box table td textarea.error-box{ border-color:#B70000;} #contact #contents #form.box .checkboxWrap.error-box{ border: .1rem solid #B70000; padding: 2rem;} .mw_wp_form_confirm{margin-top: -48rem; padding-top: 48rem;} #confirm .selectWrap{ display: inline; margin: 0 1rem;} #confirm #privacy{ display: none;} .backBtn{ background: #FF8066; color: #fff; } #confirm .btn , #confirm .backBtn{ width: 30%;} .confirm-box{ width: 60rem; margin: 4rem auto 0;} .mw_wp_form_confirm p{ display: none;} /* PRIVACY */ #privacy #privacy01 .bgPink{ border-radius: 2rem; margin-left: auto; margin-right: auto; padding:8rem;} #privacy #privacy01 .bgPink dl{ text-align: left;} #privacy #privacy01 .bgPink dt{ margin-bottom: 2rem; font-size: 1.8rem;} #privacy #privacy01 .bgPink dd:not(:last-child){ margin-bottom: 4rem;} #privacy #privacy01 .bgPink dd ul{ list-style: disc outside; margin-top: 2rem;} #privacy #privacy01 .bgPink dd ul li{ margin-left: 2rem;} /* PHOTO */ #photo #photoList .gallery { margin-top: 8rem;} #photo #photoList .gallery li { margin-bottom: 4rem;} #photo #photoList .gallery li a dl{ color: #FF8066; } #photo #photoList .gallery li a dl dt{ font-size: 1.3rem; line-height: 2rem;} #photo #photoList ul.gallery li figure .cap{ margin-bottom: 2rem;} #photo #lead p.date{ margin-bottom: 2rem; font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; } /*NURSERY */ #nursery #main , #nursery #main #mainBg{ height: 80rem;} #nursery #main h2 span{ display: block; width: 100%; font-size:2.4rem; margin-bottom: 2rem; } #nursery #nursery01 p span{ background: #FF8066; color: #fff; padding: .5rem 2rem; border-radius: 3rem; line-height: 1; margin-right: .5rem; } #nursery #nursery01 .inner table{ } #nursery #nursery01 .inner table td ul{ list-style: disc outside; margin-top: 2rem;} #nursery #nursery01 .inner table td ul li{ margin-left: 2rem;} #nursery #contents .box table{ width: auto;} /* mori */ #mori #main , #mori #main #mainBg{ height: 80rem;} #mori #main h2 span{ display: block; width: 100%; font-size:2.4rem; margin-bottom: 2rem; } #mori #mori01 p span{ background: #FF8066; color: #fff; padding: .5rem 2rem; border-radius: 3rem; line-height: 1; margin-right: .5rem; } #mori #mori01 .inner table{ } #mori #mori01 .inner table td ul{ list-style: disc outside; margin-top: 2rem;} #mori #mori01 .inner table td ul li{ margin-left: 2rem;} #mori #contents .box table{ width: 80rem;} #mori #contents .box table th{ width: 20rem;} .title h3 span.textRed{ display: block;} #mori #mori02 .inner h4{ line-height: 4.8rem;} #mori #mori02 .inner p.textLeft{ text-align: left;} #mori #mori02 .inner p.textLeft.textL{ font-size: 1.6rem;} #mori #mori02 .inner { width: 80rem; border-radius: 2rem; padding:4rem 4rem 2rem;} #mori #contents .box strong{color: #FF8066;} #mori #mori04 figure{ max-width:80rem; text-align: center; margin-left: auto; margin-right: auto; } #mori #mori08 .inner .bgPink { border-radius: 2rem; width: 80rem; padding-left: 4rem; padding-right: 4rem; margin: 0 auto 4rem;} #mori #mori08 .inner ol { text-align: center; margin-left: auto; margin-right: auto;} #mori #mori10 dl{ margin-top: 4rem; } #mori #mori10 dt{ font-size: 1.5rem; margin-bottom: 1rem;} #mori a.accordion{ cursor: pointer;} #mori .accordion:before , #mori .accordion:after { display: block; content: ''; background-color: #FF8066; position: absolute; width: 1.6rem; height: .2rem; top: calc(50% - .1rem);; right: 2rem; } #mori .accordion:before { width: .2rem; height: 1.6rem; top: calc(50% - .8rem); right: 2.7rem; } #mori .open .accordion:before{ display: none;} #mori .accordion:hover:before , #mori .accordion:hover:after{ background-color:#fff;} #mori .box .textBox{ margin-bottom: 4rem; } #mori .box .textBox h4{ line-height: 1.8; margin-bottom: 2rem;} /* NEWS */ .screen-reader-text{ display: none !important;} #news #newsList .inner.bgPink{ background:#FFF9F7; border-radius: 2rem; padding: 8rem; } #news #newsList .inner.bgPink { text-align: left;} #news #newsList .inner.bgPink li:not(:last-child){ margin-bottom: 2rem ; padding-bottom: 2rem; border-bottom: .2rem dotted #FF8066;} #news #newsList .inner.bgPink li a{ text-decoration: none;} #news .tag{ border-radius: 6rem; font-size: 1.2rem; background: #EDC25F; color: #fff; padding: .5rem 1rem; width: 14rem; margin: 0 2rem; box-sizing: border-box; display: inline-block; text-align: center; line-height: 1;} #news #contents .box .inner .tag , #news #newsList .inner.bgPink .tag{ color: #fff;} #news .tag.news03{ background: #ED2F00;} .navigation { margin-top: 8rem; text-align: center; margin-left: auto; margin-right: auto;} .nav-links{ display: flex; justify-content: center;} .navigation .page-numbers{ font-size: 1.8rem; border:.2rem solid #FF8066; width: 4rem; height: 4rem; text-decoration: none !important; color: #FF8066; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; border-radius: 100%; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 .5rem; } .navigation a.page-numbers:hover , .navigation .page-numbers.current{ background:#FF8066; color: white !important; opacity: 1; } .navigation .page-numbers.next , .navigation .page-numbers.prev{ display: none;} #news #lead , #event #lead{ margin-bottom: 6rem; } #news #lead h2 , #event #lead h2{ border-bottom: .2rem dotted #FF8066; padding-bottom: 2rem; font-size:2.4rem; margin-top: 2rem; line-height: 1.5; } #news #lead .tag , #event #lead .tag{ margin-left: 0;} #news #lead time , #event #lead time{ font-size: 1.5rem; line-height: 1;} #news #detail .inner img , #event #detail .inner img{ max-width: 100%; width: auto; border-radius:1rem; } #news #newsList .wrap-box{ margin-bottom: 4rem; justify-content: space-between;} #news #newsList .wrap-box h3{ font-size: 2.4rem; } #news #newsList .wrap-box .btn{ margin:0; font-size: 1.3rem; padding: 1rem 2rem; width: auto; height: auto; min-width: inherit;} #news #detail .inner , #event #detail .inner{ font-size: 1.5rem; line-height: 3rem;} /* STAFF */ #staff #staff01 ul.wrap-box.staffList { justify-content: center;} #staff #staff01 ul.wrap-box.staffList li{ width: 16.6%; margin-bottom: 4rem; padding: 0 1.5rem;} #staff #staff01 ul.wrap-box.staffList li figure .cap { padding-top: 100%; border-radius: 100%; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 2rem; background-color: #FFF9F7;} #staff #staff01 ul.wrap-box.staffList li figure figcaption dt{ margin-bottom: 0;} #staff #staff02 ul.staffList li.wrap-box{ margin-bottom:8rem; } #staff #staff02 ul.staffList li.wrap-box figure{ width: 50.5rem;} #staff #staff02 ul.staffList li.wrap-box figure .cap{ border-radius: 2rem; padding-top: 75%; background-color: #FFF9F7; background-repeat: no-repeat; background-size: cover; background-position: center;} #staff #staff02 ul.staffList li.wrap-box .txt{ width: 50%; text-align: left;} #staff #staff02 ul.staffList li.wrap-box .txt .tag{ font-size:1.3rem; background: #FF8066; color: #fff; padding: .5rem 2rem; border-radius: 3rem; line-height: 1; margin-right: .5rem; margin-bottom: 2rem; display: inline-block; } #staff #staff02 ul.staffList li.wrap-box .txt h4 { margin-bottom: 2rem;} #staff #staff02 ul.staffList li.wrap-box .txt h4 span{ font-size: 1.8rem; display: block; margin-bottom: 1rem;} #staff #staff01 .inner{ border-radius: 2rem; padding:4rem 2rem 0;} #staff #staff01 #staff001{ background:rgba(132,204,220,0.3); } #staff #staff01 #staff_a{ background:rgba(234,90,93,0.3); } #staff #staff01 #staff_b{ background:rgba(243,157,52,0.3); } #staff #staff01 #staff_c{ background:rgba(159,204,95,0.3); } #staff #staff01 #staff_d{ background:rgba(254,229,50,0.3); } #staff #staff01 #staff003{ background:rgba(246,190,201,0.3); } #staff #staff01 #staff_group{ background:rgba(214,175,208,0.3); } #staff #staff01 #staff_clean{ background:rgba(119,196,177,0.3); } #staff #staff01 #staff005{ background:rgba(172,211,122,0.3); } #staff #staff01 #staff006{ background:rgba(253,239,22,0.3); } #staff #staff01 #staff007{ background:rgba(243,161,127,0.3); } #staff #staff01 #staff008{ background:rgba(88,154,211,0.3); } #staff #staff01 .inner#staff_special{ display: none;} /* M-KIDS */ #support #m-kids .inner .title{ text-align: center;} #support #m-kids .inner table{ width: 100%; border: none; margin-bottom: 2rem;} #support #m-kids .inner table tr{ border: none;} #support #m-kids .inner table td.bgPink{ background:#FFF9F7;} #support #m-kids .inner table th , #support #m-kids .inner table td{ border:.1rem solid #FF8066; border-right: .1rem solid #EFEFEF; padding: 2rem; text-align: center;} #support #m-kids .inner table th:first-child , #support #m-kids .inner table td.bgPink{ width: 15rem; text-align: center;} #support #m-kids .inner table th { background: #FF8066; color: #fff; border-right: .1rem solid #EFEFEF;} #support #m-kids .inner table td{ background: #fff; text-align: left; vertical-align: top;} #support #m-kids .inner table th:last-child , #support #m-kids .inner table td:last-child{border-right: .1rem solid #FF8066; } #support #m-kids .inner:not(:first-of-type) table th{ border-bottom: .1rem solid #EFEFEF;} #support .inner .wrap-box.box3 li{ width: 32%; margin-bottom: 2%;} #support .inner .wrap-box.box3 li figure{ border-radius: 1rem; overflow: hidden; position: relative; width: 100%;} #support .inner .wrap-box.box3 li figure:before{content:""; display: block; padding-top: 66.6%;} #support .inner .wrap-box.box3 li img{position: absolute; top:50%; left:50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); } #contents .box a.link{ font-size: 1.5rem; text-decoration: underline;} #contents .box a.link:hover{text-decoration:none;} #contents .box .inner{ margin-bottom: 6rem;} #contents .box .inner a:not(.btn){ color:#FF8066; text-decoration: underline; } #contents .box .inner p{ margin-bottom: 4rem;} #contents .box#guide01 .inner p { margin: 1rem 0 0; } #contents .box .inner p.textS{ font-size: 1.2rem; line-height: 2.4rem;} #contents .box .map { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 4rem; } #contents .box .map iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and ( max-width:768px) { #contents .box a.link{ font-size: 1.2rem;} #philosophy #main:after , #education #main:after , #message #main:after , #curriculum #main:after , #oneday #main:after{ width: 6rem; height: 6rem; right: 1rem; bottom: -2rem;} #news #main:after{ width: 8rem; height:6rem; right: 1rem; bottom: -1rem;} #about #main:after, #facility #main:after , #staff #main:after{ width: 8rem; height: 7rem; right: 1rem; bottom: -1.5rem;} #guide #main:after, #faq #main:after, #voice #main:after, #album #main:after{ width:7rem; height: 6rem; right: 1rem; bottom: -1.5rem;} #support #main:after, #event #main:after{ width: 5rem; height: 6rem; right: 1rem; bottom: -1rem;} #contact #main:after , #privacy #main:after , #photo #main:after{ width: 8.5rem; height: 5.5rem; right: 1rem; bottom: -1rem;} #topickpath ul .txt { font-size: 1rem; } #topickpath { margin: 0 1rem 4rem; } #main ,#mainBg{ padding: 30% 0; height: auto; } #contents { padding-top: 0; } #main h2 { /* margin-top: 5%; */ font-size: 2.4rem; top: 50%;; position: absolute; } .title h3 { font-size: 2.4rem; padding: 1.5rem 3rem; } .title h3::before { width: 3rem; height: 3rem; } .title h3::after { width: 3rem; height: 3rem; } #philosophy #philosophy01 figure { width: 100%; } #philosophy #philosophy01 h4, #philosophy #philosophy01 p { margin-bottom: 2rem; } #philosophy #philosophy01 .txt { width: 100%; } #philosophy #philosophy01 .txt ul { width: 100%; margin-bottom: 4rem; } #philosophy #philosophy01 .txt ul li { font-size: 1.5rem; } .title p { margin-top: 2rem; margin-bottom: 4rem; } #philosophy #philosophy02 figure { width: 90%; margin-bottom: 4rem; } #philosophy #philosophy02 .txt dt { font-size: 2rem; margin-bottom: 1.5rem; } #philosophy #philosophy02 .txt dd { padding-bottom: 2rem; margin-bottom: 2rem; } #philosophy #philosophy03 dt { font-size: 2rem; align-items: baseline; width: 100%; margin-bottom: 1rem; } #philosophy #philosophy03 dt span { font-size: 3rem; margin-right: .5rem; margin-top: 0; } #philosophy #philosophy03 dl { border-radius: 1rem; padding: 2rem; } #philosophy #philosophy03 dd { width: 100%; } #localNav { margin-top: 6rem; } #localNav li { width: 48%; padding: 0; margin-bottom: 4%; } #localNav li figure { height: 10rem; border-radius: 1rem; } #localNav li figure figcaption { font-size: 1rem; padding: .8rem 2rem; width: 90%; line-height: 1; box-sizing: border-box; } #localNav li figure figcaption svg.arrow { width: .6rem; height: .8rem; right: 1rem; margin-top: -.3rem; } #philosophy #philosophy02 .txt dd:last-child { margin-bottom: 0; } #localNav li:nth-last-child(2) figure figcaption { letter-spacing: -.05rem; } #philosophy #philosophy01 .txt ul li:nth-child(4) { letter-spacing: -.04rem; } /* NEWS */ #news .tag { font-size: 1rem; width: 13rem; margin-right: 1rem; } #news #lead time, #event #lead time { font-size: 1.3rem; } #news #lead h2, #event #lead h2 { font-size: 1.8rem; line-height: 1.8; } #news #lead, #event #lead { margin-bottom: 4rem; } #contents .box .inner p { margin-bottom: 2rem; } #mori #mori02 .inner p.textLeft.textL{ font-size: 1.3rem;} #contents .box .inner { margin-bottom: 4rem; } #news #newsList .inner.bgPink , #guide #news #newsList .inner.bgPink{ border-radius: 1rem; padding:3rem 2rem; } #news #newsList .wrap-box h3 { font-size: 1.8rem; text-align: center; width: 100%; margin-bottom: 2rem; } #news #newsList .wrap-box { margin-bottom: 2rem; } #news #newsList .inner.bgPink .tag{ margin: 0 0 0 1rem;} #news #newsList .inner.bgPink li a:not(.tag) { display: block; margin-top: .5rem; } .navigation { margin-top: 4rem;} /* EDUCATION */ #education #education01 .txt { width: 100%; } #education #education01 figure { width: 100%; } #education #education01 figure img { border-radius: 1rem; } #education .title { margin-bottom: 2rem; } #education h4 { line-height: 3rem; margin-bottom: 2rem; font-size: 1.8rem; } #education #lunch.boxPink { padding: 3rem 2rem; } #education #lunch.boxPink h3 { font-size: 2.4rem; line-height: 3.6rem; margin-bottom: 3rem; } #education #lunch.boxPink li img { border-radius: 1rem; } #education #lunch.boxPink ul { margin-bottom: 3rem; } #education #lunch.boxPink h4 { margin-bottom: 1rem; font-size: 1.5rem; } #education #lunch.boxPink:after { bottom: auto; right: -1rem; width: 10rem; height: 10rem; top: -3rem; } #education #lunch.boxPink p{ text-align: left;} /* MESSAGE */ #message #message01 figure { width: 100%; margin-bottom: 4rem; } #message #message01 .txt { width: 100%; } #message #message01 .txt #name { font-size: 2rem; text-align: right; } #message #message01 .txt #name span { font-size: 1.2rem; } #message #message01 .txt p { margin-bottom: 2rem; } /* CURRICULUM */ #curriculum #curriculum01 .wrap-box { width: 100%; } #curriculum #curriculum01 .wrap-box:nth-last-of-type(2n+1) { padding-right: 0; } #curriculum #curriculum01 figure { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 3rem; } #curriculum #curriculum01 .txt h4 { margin-bottom: 2rem; text-align: center; } #curriculum #curriculum01 .wrap-box:nth-last-of-type(2n) { padding-left: 0; } #curriculum #curriculum02 > .wrap-box .txt , #curriculum #curriculum02 > .wrap-box .img{ width: 100%; } #curriculum #curriculum02 > .wrap-box .txt dl dd ul li { text-align: left; } /* ONEDAY */ #oneday #oneday01 .inner h3 { font-size: 2.4rem; margin-bottom: 2rem; padding: 2rem 0; } #oneday #oneday01 { text-align: left; } #oneday #oneday01::after { width: .8rem; left: 0; margin-left: 0; } #oneday #oneday01 .txt, #oneday #oneday01 figure { width: 100%; margin-bottom: 2rem; } #oneday #oneday01 .txt h4 { line-height: 3rem; margin-bottom: 2rem; } #oneday #oneday01 figure img { border-radius: 1rem; } #oneday #oneday01 figure.sp-only { display: block;} #oneday .inner .wrap-box { margin-left: 3rem; } #contents #oneday01 .inner { margin-bottom: 0; } /* ABOUT */ .btn.pdf { font-size: 1.2rem; padding: 2rem 0; width: 100%; } .btn.pdf::after { width: 2rem; height: 3rem; right: 3rem; margin-top: -1.5rem; } #about #history .txt { width: 100%; } #about #history figure { width: 100%; } #about #history .txt dt { font-size: 1.5rem; margin-bottom: 1rem; width: 100%; } #about #history .txt dd { font-size: 1.2rem; width: 100%; } /* FACILITY */ ul.gallery li { width: 48%; margin: 0 1% 4%; } /* STAFF */ #staff #staff01 ul.wrap-box.staffList li { width: 50%; margin-bottom: 2rem; } #staff #staff01 ul.wrap-box.staffList li figure .cap { margin-bottom: 1rem; } #staff #staff02 ul.staffList li.wrap-box figure .cap { border-radius: 1rem; } #staff #staff02 ul.staffList li.wrap-box .txt { width: 100%; } #staff #staff02 ul.staffList li.wrap-box figure { width: 100%; margin-bottom: 2rem; } #staff #staff02 ul.staffList li.wrap-box .txt .tag { font-size: 1.2rem; margin-right: 0; margin-bottom: 1.5rem; } #staff #staff02 ul.staffList li.wrap-box .txt h4 span { font-size: 1.5rem; } #staff #staff02 ul.staffList li.wrap-box { margin-bottom: 4rem; } /* GUIDE */ #guide01 .inner .bgPink { padding: 3rem 2rem; border-radius: 1rem; } #guide01 .inner .bgPink dt, #flow .inner li dt { font-size: 1.5rem; width: 100%; margin-bottom: 2rem; } #guide01 .inner .bgPink dd, #flow .inner li dd { width: 100%; } #guide01 .inner .bgPink dl { margin-bottom: 3rem; padding-bottom: 3rem; } #flow .inner li { border-radius: 1rem; padding: 3rem 2rem; } #flow .inner li span { font-size: 1.5rem; top: -.7rem; left: 2rem; } #guide01 .inner .bgPink dd table.sp-only{ display: table;} #guide01 .inner .bgPink dd table.sp-only th , #guide01 .inner .bgPink dd table.sp-only td{ width: 100%; border-color:#FF8066; } #guide01 .inner .bgPink dd table.sp-only td{ margin-bottom: 0;} #guide03 .inner figure img { width: 100%; margin-bottom: 4rem;} #guide03 .inner figure figcaption dl{ text-align:center; } #guide03 .inner figure figcaption dt{ text-align: center; font-size: 1.5rem; padding: 1.5rem; display: inline-block; width: 100%;} #guide03 .inner figure figcaption dd{ margin-bottom: 4rem; text-align: left;} /* FAQ */ #faq .box.faqList .inner { padding: 3rem 2rem; border-radius: 1rem; } #faq .box.faqList .inner span { top: -.7rem; left: 2rem; font-size: 1.5rem; } #faq .box dl.accordion dt { font-size: 1.5rem; line-height: 2.4rem; padding-right: 2rem; } #faq .box dl.accordion dd { margin: 2rem 0 0; } #faq .box dl.accordion dt::after { width: .7rem; top: 50%; margin-top: -1rem; } /* VOICE */ #voice .box.voiceList li { padding: 3rem 2rem; border-radius: 1rem; } #voice .box.voiceList li figure { width: 100%; margin-bottom: 2rem; } #voice .box.voiceList li dl { width: 100%; } /* ALBUM */ #album #album01 .wrap-box li { width: 25%; } /* SUPPORT */ #support #support01 .inner { width: 100%; } #support #lead .pageLink li { margin: 0 1rem 1rem 0; margin-bottom: 1rem; } #support #lead .pageLink { margin-top: 4rem; } #support #support01 .inner h4 { font-size: 1.5rem; } #support #support02 table th { width: 100%; } #support #support02 table { width: 100%; } #support #support03 .inner li.wrap-box figure { width: 100%; margin-bottom: 2rem; } #support #support03 .inner li.wrap-box dl { width: 100%; } #support #support03 .inner li.wrap-box dl dt { font-size: 1.5rem; margin-bottom: 1rem; } #support #support03 .inner { margin-bottom: 6rem; } #otherList h4 { margin-bottom: 4rem; } #otherList li { width: 50%; margin-bottom: 2rem; } #otherList li a figure figcaption .date { font-size: 1rem; line-height: 2rem; } #otherList li a figure figcaption { line-height: 2rem; } #otherList ul { margin-bottom: 2rem; } #support #support02 table td{ text-align: left;} #support #support01 table.sp-only{ width: 100%; display: table;} #support #support01 table.sp-only th{ width: 100%; display: table-cell;} #support #support01 table.sp-only td{ display: table-cell; margin-bottom: 0; width: 50%;} #support #support01 table.sp-only td.bgPink{ background:#FFF9F7;} /* M-KIDS */ #support #m-kids .inner table.sp-only{ width: 100%; display: table;} #support #m-kids .inner table th{ width: 100%; display: table-cell;} #support #m-kids .inner table td{ display: table-cell; margin-bottom: 0; width: auto; padding: 1rem;} #support #m-kids .inner table td.bgPink{ background:#FFF9F7;} #support #m-kids .inner table th:first-child, #support #m-kids .inner table td.bgPink{ width:20%; padding:1rem; font-size: 1.2rem;} /* CONTACT */ #contact #lead .telBox { width: 100%; border-radius: 1rem; padding: 3rem 2rem; } #form.box table th { width: 100%; } #contact #lead .telBox dt { font-size: 3rem; padding: 0 0 0 1rem; text-align: center; margin-left: auto; margin-right: auto; } #contact #lead .telBox h4 { margin: 0 auto 2rem; text-align: center; } #contact #lead .telBox dl { margin-left: auto; margin-right: auto; } #contact #lead .telBox dt::after { background-size: contain; width: 2rem; height: 3rem; } #contact #contents #form.box table td input[type="text"] { width: 100%; } #form.box table td { text-align: left; background: none; } #form.box table td .mwform-checkbox-field { width: 100%; margin-bottom: 1rem !important; } #form.box table th .must { font-size: 1.2rem; } #contact #contents #form.box table td input#year { width: 10rem; } #contact #contents #form.box table td input#month, #contact #contents #form.box table td input#day { width: 7rem; } #contact #contents #form.box table td input#zip { width: 30%; } #contact #contents #form.box table td .selectWrap { width: 50%; } .mwform-radio-field{ width: 40%; display: inline-block;} .confirm-box { width: 100%; } #confirm .btn, #confirm .backBtn { width: 45%; } #photo #photoList .gallery li { margin-bottom: 1rem; } #photo #photoList .gallery { margin-bottom: 4rem; } /* NURSERY */ #nursery #main h2 span { font-size: 1.5rem; margin-bottom: 1rem; } #nursery #main, #nursery #main #mainBg { height: 40rem; } #nursery #main h2 { line-height: 3rem; margin-top: -4rem; } #nursery #contents .box table td{ text-align: left;} #nursery #nursery01 p span { background: none; color: #FF8066; padding: 0; margin-right: 0; font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; } /* MORI */ #mori #main h2 span { font-size: 1.5rem; margin-bottom: 1rem; } #mori #main, #mori #main #mainBg { height: 40rem; } #mori #main h2 { line-height: 3rem; margin-top: -3rem; } #mori #contents .box table td{ text-align: left;} #mori #mori01 p span { background: none; color: #FF8066; padding: 0; margin-right: 0; font-family: "FOT-筑紫A丸ゴシック Std B" ,'Noto Sans JP',sans-serif; } #mori #contents .box table th , #mori #contents .box table{ width: 100%;} #mori #mori02 .inner , #mori #mori08 .inner{ width: 100%; border-radius: 1rem; padding: 2rem; } #mori #mori02 .inner h4 { line-height: 2.4rem; font-size: 1.5rem; } #mori #mori02 .inner, #mori #mori08 .inner { /*padding: 0;*/ } #mori #mori08 .inner .bgPink { width: 100%; } #privacy #privacy01 .bgPink { padding: 3rem 2rem; } #privacy #privacy01 .bgPink dt { font-size: 1.5rem; line-height: 3rem; } #privacy .title p { text-align: left; margin-bottom: 0; } #staff #staff01 .inner { padding: 2rem 1rem 0; } #staff #staff01 ul.wrap-box.staffList li { width: 33%; margin-bottom: 1rem; padding: 0 .5rem; } #staff #staff01 .inner .title { margin-bottom: 2rem; } } .underline{ text-decoration: underline; -webkit-text-decoration:underline; } .bus-photo{ display: flex; justify-content: space-between; gap:4rem; max-width: 80rem; margin: 4rem auto 0; } .bus-photo li img{ border-radius: 1rem; } @media screen and ( max-width:768px) { .bus-photo{ margin-top: 2rem; gap:2rem; } } /* ============================================================ Snow Monkey Forms を旧 MW WP Form の見た目に合わせる 対象：お問い合わせページ #contact #form 内のSMFフォームのみ ============================================================ */ /* カスタムバリデーションのエラー文（JSが付与する .smf-error-messages：フリガナ・電話番号 共通） */ /* SMF純正エラーと同じクラスなので、純正の見た目に寄る。必要なら下記で上書き調整 */ #contact #form .smf-form .smf-error-messages{ color: #B70000; font-size: 1.3rem; line-height: 1.6; margin-top: 1rem; } /* エラーになったフィールドの赤枠（JSが .smf-error-field を付与） */ #contact #form .smf-form .smf-error-field{ border-color: #B70000 !important; background-color: #FFF5F5; } /* 旧テーブルの罫線（オレンジ点線）＝ table border-top + tr border-bottom */ #contact #form .smf-form .title + .smf-item{ border-top: .2rem dotted #FF8066; } /* --- 行：旧テーブルの tr（ラベル列＝th ＋ 入力列＝td） --- */ #contact #form .smf-form .smf-item{ display: flex; align-items: stretch; border-bottom: .2rem dotted #FF8066; width: 100%; } /* ラベル列＝旧 th（薄ピンク背景・オレンジ文字・中央寄せ・縦中央） */ #contact #form .smf-form .smf-item__col--label{ flex: 0 0 30rem; max-width: 30rem; display: flex; align-items: center; justify-content: center; background: #FFF9F7; color: #FF8066; text-align: center; padding: 3rem; font-size: 1.5rem; line-height: 2.6rem; } #contact #form .smf-form .smf-item__label__text{ font-weight: 700; display:flex; align-items: center;} /* 必須バッジ＝旧 .must */ #contact #form .smf-form .smf-item__label__text strong{ display: inline-block; background: #FF8066; color: #fff; font-size: 1.3rem; font-weight: 400; line-height: 1; padding: .3rem 1rem .5rem; border-radius: .6rem; margin-left: 1rem; } /* 入力列＝旧 td（白背景・左寄せ・padding 3rem・縦中央） */ #contact #form .smf-form .smf-item__col--controls{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; background: #fff; text-align: left; padding: 3rem; font-size: 1.5rem; } /* --- 入力欄（テキスト/メール/電話/テキストエリア/セレクト）＝旧 input/textarea --- */ #contact #form .smf-form .smf-text-control__control, #contact #form .smf-form .smf-textarea-control__control, #contact #form .smf-form .smf-select-control__control{ border: .1rem solid #ccc; border-radius: .5rem; background: #fff; padding: 1rem 2rem; box-shadow: none; } #contact #form .smf-form .smf-text-control__control:hover, #contact #form .smf-form .smf-text-control__control:focus, #contact #form .smf-form .smf-textarea-control__control:hover, #contact #form .smf-form .smf-textarea-control__control:focus, #contact #form .smf-form .smf-select-control__control:hover, #contact #form .smf-form .smf-select-control__control:focus{ border-color: #FF8066; } /* --- 幅：テキスト系は50%、メール・住所・テキストエリアは100% --- */ #contact #form .smf-form [data-name="email"] .smf-text-control, #contact #form .smf-form [data-name="addr"] .smf-text-control, #contact #form .smf-form .smf-textarea-control{ width: 100%; } #contact #form .smf-form .smf-textarea-control__control{ width: 100%; } /* --- 入力欄とセレクトの高さを揃える（外形5.2rem） --- */ /* テキスト系は枠込み5.2rem、selectは外枠(.2rem)を足して5.2remになるよう5rem */ #contact #form .smf-form .smf-text-control__control{ height: 5.2rem; width: 100%; } #contact #form .smf-form [data-name="pref"] .smf-select-control__control{ height: 5rem; } /* --- セレクト（都道府県）＝旧 selectWrap（枠線は外側div・selectは枠なし・三角矢印） --- */ /* 外側div＝旧 .selectWrap（枠線・白背景・角丸・基準位置） */ #contact #form .smf-form [data-name="pref"] .smf-select-control{ position: relative; display: inline-block; width: 30%; min-width: 15.5rem; border: .1rem solid #ccc; background: #fff; border-radius: .5rem; } /* select本体は枠なし（枠は外側divが持つ） */ #contact #form .smf-form [data-name="pref"] .smf-select-control__control{ width: 100%; border: none; background: transparent; box-shadow: none; padding: 1rem 2rem; } /* SMF既定の矢印を隠し、旧テーマの三角矢印（紫）に差し替え */ #contact #form .smf-form [data-name="pref"] .smf-select-control__toggle{ display: none; } #contact #form .smf-form [data-name="pref"] .smf-select-control:before{ content: ''; position: absolute; top: 45%; right: 2rem; width: 0; height: 0; border-left: .6rem solid transparent; border-right: .6rem solid transparent; border-top: .6rem solid #4E255F; pointer-events: none; z-index: 2; } /* --- チェックボックス・ラジオを横並びに（旧 horizontal-item 風） --- */ #contact #form .smf-form .smf-checkboxes-control__control, #contact #form .smf-form .smf-radio-buttons-control__control{ display: flex; flex-wrap: wrap; gap: 1rem 3rem; } /* チェック/ラジオの選択色を旧テーマのオレンジに */ #contact #form .smf-form .smf-checkbox-control__control:checked, #contact #form .smf-form .smf-radio-button-control__control:checked{ background-color: #FF8066; border-color: #FF8066; } /* --- 確認画面（data-screen="confirm"）では個人情報文を非表示 --- */ #contact #form .snow-monkey-form[data-screen="confirm"] .privacy-text{ display: none; } /* --- 確認/送信ボタン＝旧 .btn（白地・オレンジ枠・オレンジ文字／hoverでオレンジ地・白文字） --- */ /* ※ .smf-action は .smf-form の外（兄弟）なので .smf-form 配下にしない */ #contact #form .smf-action{ text-align: center; margin-top: 4rem; display: flex; justify-content: center; } #contact #form .smf-action .smf-button-control__control{ display: inline-block; border-radius: 10rem; background: #fff; color: #FF8066; width: auto; border: .2rem solid #FF8066; text-align: center; margin: auto; transition: .4s; font-size: 1.5rem; padding: 1.5rem 7rem; min-width: 24rem; box-sizing: border-box; opacity: 1; position: relative; line-height: 1; height: 5rem; cursor: pointer; } #contact #form .smf-action .smf-button-control__control:hover{ background: #FF8066; color: #fff; opacity: 1; } /* --- スマホ：ラベルと入力欄を縦積みに --- */ @media screen and ( max-width:768px) { #contact #form .smf-form .smf-item{ display: block; } #contact #form .smf-form .smf-item__col--label{ max-width: none; justify-content: flex-start; text-align: left; padding: 1.5rem 2rem; } #contact #form .smf-form .smf-item__col--controls{ padding: 2rem; } #contact #form .smf-form .smf-text-control, #contact #form .smf-form [data-name="pref"] .smf-select-control{ width: 100%; } /* ボタンSP＝旧 .btn のSP指定 */ #contact #form .smf-action .smf-button-control__control{ height: auto; padding: 1.2rem 4rem; min-width: inherit; font-size: 1.2rem; } } #contact #form .smf-form .smf-item__col--controls p{ margin-bottom: 0; margin-top: 0; } #contact #form .smf-form .smf-radio-button-control , #contact #form .smf-form .smf-checkbox-control{ align-items: center; } #contact #form .smf-form .smf-radio-button-control__control , #contact #form .smf-form .smf-checkbox-control__control{ margin-top: 0; } #contact #form .wp-container-core-group-is-layout-4fc3f8e1{ gap:2rem; } #contact #form p.wp-block-paragraph{ margin-top:4rem; } .smf-form [data-invalid="1"] , #contact #form .smf-form .smf-text-control__control[data-invalid="1"] , #contact #form .smf-form .smf-textarea-control__control[data-invalid="1"] , #contact #form .smf-form .smf-select-control__control[data-invalid="1"]{ border-color: #B70000; } #contact #form .smf-form .smf-textarea-control__control{ padding: 2rem; line-height: 2; } #contact #form .snow-monkey-form[data-screen="confirm"] .privacy-text{ display: none; } .confirm-title{ display: none; } #contact #form .snow-monkey-form[data-screen="confirm"] .confirm-title{ display:block; } #contact #form .snow-monkey-form[data-screen="confirm"] .entry-title{ display:none; } .smf-placeholder { line-height: 2; } #contact #form p a.btn{ text-decoration: none; } #contact #form p a.btn:hover{ color: #fff; } #contact #form .smf-form .smf-text-control__control#addr{ max-width: 100%; } #contact #form .smf-form .smf-placeholder , #contact #form .wp-container-core-group-is-layout-8f761849{ width: 100%; } #contact #form .smf-form .smf-placeholder[data-name="zip"]{ max-width: 12rem; } .snow-monkey-forms-turnstile--position\:before{ margin-bottom: 2rem; } .snow-monkey-forms-turnstile>div{ justify-content: center; } @media screen and ( max-width:768px) { #contact #form .smf-form .smf-checkboxes-control__control{ flex-direction: column; } }