/* CSS Document */
html,body{
margin:0;
padding:0;
font-size:16px;
}

h1,h2,h3,h4,h5,p,form{
margin:0;
padding:0;
}

p,address,ul,ol,dl,caption{
margin:0;
padding:0;
}

ul ul,
ol ul,
ul ol,
ol ol,
dl ul,
dl ol,
dl dl{
padding-left:20px;
font-size:100% !important;
}

ul dl,
ol dl{
display:inline;
font-size:100% !important;
}

ul dl dt,
ol dl dt,
ul dl dd,
ol dl dd{
font-size:100% !important;
}

a img{
border:none;
}

address,em{
font-style:normal;
}

hr{
background:#D8E044;
color:#D8E044;
border:none;
height:2px;
width: 100%;
max-width:800px;
margin:auto;
}

br.sp{
display: none;
}


#menuflg{
display: none;
}

/* HTML BODY */
html{
background:url(../img/parts/html_bg.gif);
}
body{
max-width:1030px;
padding:30px 0;
margin:0 auto;
font-family: 'Noto Sans JP', sans-serif;
text-shadow:-1px 1px rgba(255,255,255,0.6);
}

/* HEADER CATCH */
#header{
float:left;
background:url(../img/header/title.gif) no-repeat;
width:470px;
height:70px;
margin:5px 0 25px 0;
text-indent:-9999px;
}

#catch{
float:right;
width:270px;
height:75px;
margin-bottom:25px;
}

#catch p{
background:url(../img/header/catch_p.gif) no-repeat;
width:270px;
height:20px;
text-indent:-9999px;
margin-bottom: 0;
}

#catch #phone{
display: block;
background:url(../img/header/catch_phone.gif) no-repeat;
width:270px;
height:28px;
text-indent:-9999px;
}
#catch #e_mail a{
display:block;
background:url(../img/header/catch_mail.gif) no-repeat;
width:270px;
height:26px;
text-indent:-9999px;
}

@media screen and (max-width:750px) {

#header{
float:none;
background-size: cover;
width:63%;
height:9.4vw;
margin:2px auto 10px auto;
}

#catch{
float:none;
width:270px;
height:75px;
margin:0 auto 10px auto;
}

}

@media screen and (max-width:500px) {
body{
position: relative;
overflow-x: hidden;
padding-top: 0;
}

br.sp{
display: block;
}

#header{
width:75%;
height:11vw;
margin:4% 0 8% 4%;
}

#catch{
display: none;
}


}



/* MAIN CONTENT */
#main_content{
box-sizing: border-box;
float:right;
width:765px;
padding-left: 15px;
}

#main_content h1{
position: relative;
background:linear-gradient(#FFF,#EEE);
box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
color:#942C0A;
text-shadow: 1px 1px 0 #FFF;
border-radius:8px;
padding:0.3em 0;
margin-bottom: 0.5em;
font-size:200%;
font-family: 'Kosugi Maru', sans-serif;
}

#main_content h1:first-child:after{
content: "";
position: absolute;
top: 2px;
left: 2px;
border: 1px solid #FFF;
border-radius:8px;
width: calc(100% - 4px);
height: calc(100% - 4px);
}

#main_content h2{
color: #FF0033;
margin:0 auto 30px auto;
font-family: 'Kosugi Maru', sans-serif;
text-align: center;
font-size:175%;
}

#main_content > h2:first-child{
position: relative;
background:linear-gradient(#FFF,#EEE);
box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
color:#942C0A;
text-shadow: 1px 1px 0 #FFF;
border-radius:8px;
padding:0.3em 0;
font-size:200%;
}

#main_content > h2:first-child:after{
content: "";
position: absolute;
top: 2px;
left: 2px;
border: 1px solid #FFF;
border-radius:8px;
width: calc(100% - 4px);
height: calc(100% - 4px);
}

#main_content h3{
color:#FF6600;
margin:0 auto 5px auto;
font-family: 'Kosugi Maru', sans-serif;
font-size:150%;
}

#main_content h4{
color:#FF6600;
margin:0 auto 5px auto;
font-family: 'Kosugi Maru', sans-serif;
font-size:125%;
}

#main_content dl{
max-width:740px;
margin:0 auto 30px auto;
}

#main_content div.content{
max-width:740px;
margin:0 auto 30px auto;
}

#main_content div.content:after{
content:"";
display:block;
clear:both;
}

#main_content .content .cols{
width:auto !important;
}

#main_content .ninjin_s_r{
background:url(../img/chara/ninjin_s.gif) top right no-repeat;
}
#main_content .imo_s_r{
background:url(../img/chara/imo_s.gif) top right no-repeat;
}

#main_content img{
max-width: 100%;
}

#main_content a{
word-break: break-all;
}

#main_content .map{
margin: 3% 0 1% 0;
text-align: center;
}


#main_content .map iframe{
box-sizing: border-box;
border: 1px solid #DDD;
width: 100%;
height: 30vh;
}

#main_contents_sp{
z-index: 90;
display: none;
overflow: hidden;
}

@media screen and (max-width:985px) {

#main_content{
width: calc(100% - 221px);
}

#main_content h2:first-child{
font-size: 4.1vw;
}

}


@media screen and (max-width:750px) {

#main_content{
width:70.6%;
}

}



@media screen and (max-width:500px) {

#main_content{
float: none;
width: auto;
padding: 0 2vw;
}



.menuflg{
position: fixed;
z-index: 100;
top: 0;
right: 0;
background-color: #F60;
color: #FFF;
text-shadow: none;
width: 13vw;
height: 13vw;
}

.menuflg::after{
content: 'MENU';
position: absolute;
bottom: 0;
width: 100%;
font-size: 3vw;
text-align: center;
}

.menuflg span{
position: absolute;
left: 10%;
display: block;
background-color: #FFF;
width: 80%;
height: 2px;
transition: all 0.1s ease-in-out;
}

.menuflg span:nth-child(1){
top:2vw;
}

.menuflg span:nth-child(2){
top:4.5vw;
}

.menuflg span:nth-child(3){
top:7vw;
}

#menuflg:checked + .menuflg span:nth-child(1){
top:4.5vw;
width: 60%;
left: 20%;
transform: rotate(45deg);
}

#menuflg:checked + .menuflg span:nth-child(2){
opacity: 0;
}

#menuflg:checked + .menuflg span:nth-child(3){
top:4.5vw;
width: 60%;
left: 20%;
transform: rotate(-45deg);
}


#menuflg + .menuflg + ul + #main_contents_sp{
position: fixed;
top: 0;
right: -100%;
display: block;
width: 100%;
height: 100%;
height: 100lvh;
transition: right 0.4s ease-in-out;
}

#menuflg:checked + .menuflg + ul + #main_contents_sp{
right:0;
}


#main_content h2:first-child{
font-size: 7vw;
}


#main_content h2{
font-size: 5.1vw;
}

#main_content h3{
font-size: 4.8vw !important;
}

#main_content h4{
font-size: 4.4vw;
}

#main_content p,
#main_content ul{
font-size: 4vw;
}

}

/* MAIN CONTENTS */

@media screen and (min-width:501px) {

#main_contents{
clear:both;
float:left;
width:221px;
list-style:none;
}

#main_contents li{
display:inline;
}


#main_contents h2{
width:221px;
}

#main_contents a{
display:block;
background-position:top;
width:221px;
height:56px;
text-indent:-9999px;
}

#main_contents .infant a,
#main_contents .schoolchildren a,
#main_contents .payment a{
height:66px;
}

#main_contents .invite a{
height:106px;
}

#main_contents .mamenoki a{
height:116px;
}

#main_contents .recipe a{
height:116px;
}

#main_contents .recruitment a,
#main_contents .recruit a{
height:116px;
}

#main_contents .arcanursery a{
height:103px;
}

#main_contents .mamenoki a{
background:url(../img/main_contents/mamenokihouse.png) no-repeat;
}

#main_contents .invite a{
background:url(../img/main_contents/invite.gif) no-repeat;
}

#main_contents .enter a{
background:url(../img/main_contents/enter.gif) no-repeat;
}
#main_contents .infant a{
background:url(../img/main_contents/infant.gif) no-repeat;
}
#main_contents .care a{
background:url(../img/main_contents/care.gif) no-repeat;
}
#main_contents .schedule a{
background:url(../img/main_contents/schedule.gif) no-repeat;
}
#main_contents .schoolchildren a{
background:url(../img/main_contents/schoolchildren.gif) no-repeat;
}
#main_contents .payment a{
background:url(../img/main_contents/payment.gif) no-repeat;
}
#main_contents .circle a{
background:url(../img/main_contents/circle.gif) no-repeat;
}
#main_contents .meal a{
background:url(../img/main_contents/meal.gif) no-repeat;
}
#main_contents .recipe a{
background:url(../img/main_contents/recipe.gif) no-repeat;
}
#main_contents .arcanursery a{
background:url(../img/main_contents/arcanursery.gif) no-repeat;
}
#main_contents .recruitment a {
background: url("../img/main_contents/recruitment.png?22091601") no-repeat;
}
#main_contents .recruit a {
background: url("../img/main_contents/recruit.png") no-repeat;
}


#main_contents a:hover,
#main_contents a:active,
#home #main_contents .enter a,
#care #main_contents .care a,
#schedule #main_contents .schedule a,
#circle #main_contents .circle a,
#infant #main_contents .infant a,
#schoolchildren #main_contents .schoolchildren a,
#payment #main_contents .payment a,
#meal #main_contents .meal a{
background-position:bottom;
}

}


@media screen and (max-width:750px) {

#main_contents{
width:29.4%;
}
#main_contents h2{
width: 100%;
}

#main_contents a,
#main_contents a:hover{
width: 100%;
height:8vw;
}


#main_contents a{
background-size: cover !important;
}

#main_contents .infant a,
#main_contents .schoolchildren a,
#main_contents .payment a{
height:9.5vw;
}

#main_contents .recipe a{
height:15.5vw;
}

#main_contents .recruitment a{
height: 15vw;
}

#main_contents .arcanursery a{
height:13.5vw;
}

#main_contents .mamenoki a{
height: 15vw;
}

}

@media screen and (max-width:500px) {

#main_contents{
float: none;
width: auto;
}

#main_contents{
display: none;
}

#main_contents_sp{
background-color:#FFFFF6;
}

#main_contents_sp a:link,
#main_contents_sp a:visited{
color: #333;
}

#main_contents_sp .title{
margin-bottom: 0;
text-align: center;
}

#main_contents_sp .title img{
width: 60%;
height: auto;
margin: 7vw 0;
}

#main_contents_sp ul{
list-style: none;
}
#main_contents_sp dl{
border-bottom: 4px dotted #F90;
margin:0 4% 2% 4%;
padding:0 1em 3% 1em;
text-align: center;
}

#main_contents_sp dl:nth-of-type(1){
border-top: 4px dotted #F90;
padding:2.5% 0;
}

#main_contents_sp dl:nth-of-type(3){
margin:0 4% 4% 4%;
}

#main_contents_sp dt{
font-size: 4.5vw;
margin-bottom: 2%;
}

#main_contents_sp dd{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
line-height: 1.7;
font-size: 3.5vw;
}

#main_contents_sp dd a{
display: block;
}

#main_contents_sp dl:nth-of-type(3) dd a{
width: 45%;
}

#main_contents_sp dd span{
color: #CCC;
}

#main_contents_sp dl:nth-of-type(3) dd span:last-child{
display: inline-block;
width: 45%;
}

#main_contents_sp p{
margin:0 4% 3% 4%;
text-align: center;
font-size: 4.5vw;
}

#main_contents_sp .recipe{
padding:0 0 3% 0;
}

#main_contents_sp .contact{
position: absolute;
bottom: 2%;
left: 4%;
box-sizing: border-box;
background: #FFF;
color: #F60;
border: 4px solid #F60;
border-radius: 10px;
width: 92%;
padding: 3%;
margin: 0;
font-weight: 700;
font-size: 4vw;
}

#main_contents_sp .contact a:link,
#main_contents_sp .contact a:visited{
}

}

/* CM */
#cm{
float:left;
width:221px;
padding:15px 5px 10px 5px;
}

#cm h2{
display:none;
}

#cm address{
color:#FC2C12;
margin-bottom:5px;
font-size:75%;
font-weight:bold;
}

#cm .name{
background:url(../img/cm/title.gif) no-repeat;
width:221px;
height:85px;
text-indent:-9999px;
}

#cm dl{
padding:0 0 10px 2px;
}

#cm dd{
}

#cm dt{
margin:15px 0 5px 0;
}

#cm dt span{
display:block;
width:207px;
height:32px;
text-indent:-9999px;
}

#cm dt.otsuki span{
background:url(../img/cm/otsuki.gif) no-repeat;
}
#cm dt.asaka span{
background:url(../img/cm/asaka.gif) no-repeat;
}

#cm dd a{
display:block;
width:45px;
height:20px;
margin:-24px 0 0 166px;
}

#cm .tel{
background:url(../img/cm/tel.gif) no-repeat;
width:137px;
height:18px;
text-indent:-9999px;
}
#cm .tel2{
background:url(../img/cm/tel2.gif) no-repeat;
width:137px;
height:18px;
text-indent:-9999px;
}

#cm .mail.otsuki a{
display:block;
background:url(../img/cm/mail-otsuki.gif) no-repeat;
width:211px;
height:18px;
text-indent:-9999px;
}

#cm .mail.asaka a{
display:block;
background:url(../img/cm/mail-asaka.gif) no-repeat;
width:211px;
height:18px;
text-indent:-9999px;
}

@media screen and (max-width:500px) {
#cm{
float: none;
margin:0 auto 15px auto;
}


}




/* NAVI */
#nav{
border-top:1px solid #D8E044;
border-bottom:1px solid #D8E044;
clear:both;
max-width:1020px;
padding:10px 5px 10px 5px;
margin-bottom:5px;
}
#nav hr{
display:none;
}

#nav ol{
list-style:none;
font-size:68.75%;
font-weight:bold;
}

#nav li{
display:inline;
font-weight:bold;
}

#nav br{
clear:both;
}

#nav .home a,
#nav .now a{
float:left;
}
#nav .top a{
float:right;
}

#nav strong{
font-weight:bold !important;
}

#nav .home a{
margin-right:5px;
}

#nav a:link{
color:#003366;
}
#nav a:visited{
color:#663366;
}

#nav a:hover,
#nav a:active{
color:#000000;
}


/* FOOTER */
#name{
background:url(../img/parts/name_bg.gif) no-repeat;
width:390px;
height:128px;
text-indent:-9999px;
margin:30px auto 0 auto;
}
#reference{
background:none;
max-width: 100%;
width:390px;
height:auto;
text-indent:0;
margin-top:15px;
}

#reference img{
max-width: 100%;
}

#text_menu{
clear:both;
list-style:none;
font-size:75%;
text-align:center;
margin:20px 0;
line-height:1.5;
}
#text_menu li{
display:inline;
}

#home #name,
#home #text_menu{
margin-top:0;
}

#copyright{
font-family:Arial, Helvetica, sans-serif;
font-size:68.75%;
font-weight:bold;
text-align:center;
}

.kkc{
margin:30px 0;
text-align:center;
}

/* COMMON CLASS */
.hidden{
display:none;
}

.bold{
font-weight:bold;
}

.txal{
text-align:left;
}

.txar{
text-align:right;
}
.txac{
text-align:center;
}

.fltl{
float:left;
}

.fltr{
float:right;
}

.clrl{
clear:left;
}
.clrr{
clear:right;
}

.clrb{
clear:both;
}

.fs10{
font-size:62.5%;
}

.fs12{
font-size:75%;
}

.fs14{
font-size:87.5%;
}
.fs16{
font-size:100%;
}

.fs10px{
font-size:10px !important;
}

.fs12px{
font-size:12px !important;
}

.fs14px{
font-size:14px !important;
}

.fs16px{
font-size:16px !important;
}
