@charset "UTF-8";



.life {width: 60%;margin:0 auto 100px;text-align: left;}
.life h4 {font-size: 1.4vw;line-height: 1.6;margin: 0 0 20px;}
.life ul {
width: 100%;
margin: 0 0 40px;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.life ul li {width: 32%;margin: 0 2% 2% 0;}
.life ul li:nth-child(3n+1):nth-last-child(-n+3),
.life ul li:nth-child(3n+1):nth-last-child(-n+3) ~ li {margin: 0 2% 0 0;}
.life ul li:nth-child(3n) {margin: 0 0 2% 0!important;}
.life ul li img {width: 100%;height: auto;vertical-align: bottom;}





.lunch {
width: 90%;
margin: 0 auto 100px;
padding: 5% 0;
background-color: rgba(224, 208, 65, 0.2);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.lunch h3 {
font-size: 1.4vw;
font-weight: 700;
width: 40%;
line-height: 60px;
position: relative;
height: 60px;
margin: 0 auto 40px;
padding: 0 2rem;
text-align: center;
color: #fff;
background: #0095d9;
}
.lunch h3:before,
.lunch h3:after {
position: absolute;
top: 0;
display: block;
height: 48px;
content: '';
border: 30px solid #0095d9;
}

.lunch h3:before {
left: -40px;
border-left-width: 15px;
border-left-color: transparent;
height: 0;
}

.lunch h3:after {
right: -40px;
border-right-width: 15px;
border-right-color: transparent;
height: 0;
}

.lunch h3 span {position: relative;display: block;}
.lunch p {font-size: 1.2vw;line-height: 1.6;margin: 0 0 40px;}
.lunch ul {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.lunch ul li {width: 33.33%;margin: 0;}
.lunch ul li img {width: 100%;height: auto;}

@media screen and (max-width: 1060px) {
.life {width: 90%;margin:0 auto 10%;text-align: left;}
.life h4 {font-size: 1.4vw;line-height: 1.6;margin: 0 0 20px;}
.life ul {
width: 100%;
margin: 0 0 40px;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.life ul li {width: 32%;margin: 0 2% 2% 0;}
.life ul li:nth-child(3n+1):nth-last-child(-n+3),
.life ul li:nth-child(3n+1):nth-last-child(-n+3) ~ li {margin: 0 2% 0 0;}
.life ul li:nth-child(3n) {margin: 0 0 2% 0!important;}
.life ul li img {width: 100%;height: auto;vertical-align: bottom;}

.lunch {
width: 90%;
margin: 0 auto 100px;
padding: 5% 0;
background-color: rgba(224, 208, 65, 0.2);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.lunch h3 {
font-size: 1.4vw;
font-weight: 700;
width: 40%;
line-height: 60px;
position: relative;
height: 60px;
margin: 0 auto 40px;
padding: 0 2rem;
text-align: center;
color: #fff;
background: #0095d9;
}
.lunch h3:before,
.lunch h3:after {
position: absolute;
top: 0;
display: block;
height: 48px;
content: '';
border: 30px solid #0095d9;
}
.lunch h3:before {
left: -40px;
border-left-width: 15px;
border-left-color: transparent;
height: 0;
}
.lunch h3:after {
right: -40px;
border-right-width: 15px;
border-right-color: transparent;
height: 0;
}
.lunch h3 span {position: relative;display: block;}
.lunch p {font-size: 1.2vw;line-height: 1.6;margin: 0 0 40px;}
.lunch ul {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.lunch ul li {width: 33.33%;margin: 0;}
.lunch ul li img {width: 100%;height: auto;}
}

@media screen and (max-width: 767px) {

.life {width: 90%;margin:0 auto 5%;text-align: left;}
.life h4 {font-size: 3.4vw;line-height: 1.6;margin: 0 0 2%;}
.life ul {
width: 100%;
margin: 0 0 5%;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.life ul li {width: 32%;margin: 0 2% 2% 0;}
.life ul li:nth-child(3n+1):nth-last-child(-n+3),
.life ul li:nth-child(3n+1):nth-last-child(-n+3) ~ li {margin: 0 2% 0 0;}
.life ul li:nth-child(3n) {margin: 0 0 2% 0!important;}
.life ul li img {width: 100%;height: auto;vertical-align: bottom;}

.lunch {
width: 90%;
margin: 0 auto 5%;
padding: 5% 0;
background-color: rgba(224, 208, 65, 0.2);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.lunch h3 {
font-size: 3.4vw;
font-weight: 700;
width: 40%;
line-height: 2em;
position: relative;
height: 2em;
margin: 0 auto 2.5%;
padding: 0;
text-align: center;
color: #fff;
background: #0095d9;
}
.lunch h3:before,
.lunch h3:after {
position: absolute;
top: 0;
display: block;
height: 48px;
content: '';
border: 1em solid #0095d9;
}
.lunch h3:before {
left: -1em;
border-left-width: 1em;
border-left-color: transparent;
height: 0;
}
.lunch h3:after {
right: -1em;
border-right-width: 1em;
border-right-color: transparent;
height: 0;
}
.lunch h3 span {position: relative;display: block;}
.lunch p {font-size: 3vw;line-height: 1.6;margin: 0 5% 5%;text-align: left;}
.lunch ul {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.lunch ul li {width: 33.33%;margin: 0;}
.lunch ul li img {width: 100%;height: auto;}
}



.kodomon_block {padding: 5% 0;margin: 0 0 5%; background-color: rgba(0, 149, 217, 0.2);position: relative;}

.kodomon {width: 60%;margin:0 auto;text-align: left;}
.kodomon img {width: 100%;height: auto;}

.kodomon dl {}
.kodomon dl dt {font-size: 3.4vw;line-height: 1;font-weight: 700;text-align: center;margin: 0 0 5%;}
.kodomon dl dt img {height: 4vw;width: auto;vertical-align: bottom;margin: 0 1% 0 0;}
.kodomon dl dd {text-align: center;}
.kodomon dl dd p.sub_title{font-size: 2vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;}
.kodomon dl dd p {font-size: 1vw;line-height: 1.6;}


ul.kodomon_pic {
position: absolute;
bottom: 15%;
left: 5%;

width: 90%;margin:0 auto -15%;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
ul.kodomon_pic li {width: 33.33%;}
ul.kodomon_pic li img {width: 100%;height: auto;}


.kodomon_icon {width: 80vw;margin: 0 auto 6%;}
.kodomon_icon dl {margin: 0 0 5%;}
.kodomon_icon dl dt {font-size: 3.4vw;line-height: 1;font-weight: 700;text-align: center;margin: 0 0 2.5%;}
.kodomon_icon dl dt img {height: 4vw;width: auto;vertical-align: bottom;margin: 0 1% 0 0;}
.kodomon_icon dl dd {text-align: center;}
.kodomon_icon dl dd p.sub_title{font-size: 2vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;}
.kodomon_icon dl dd p {font-size: 1vw;line-height: 1.6;}
.kodomon_icon ul { display: flex;
 justify-content: center;flex-wrap: wrap;}
.kodomon_icon ul li {width: 22%;margin: 0 4% 4% 0;}
.kodomon_icon ul li:nth-child(4n) {margin: 0 0 4%;}
.kodomon_icon ul li img {width: 70%;height: auto;margin: 0 0 2.5%;}
.kodomon_icon ul li h4 {font-size: 1.2vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;}
.kodomon_icon ul li p {font-size: 1vw;line-height: 1.6;text-align: left;}


.useful_back {width: 70vw;margin: 0 auto 10%;padding: 5vw; background-color: rgba(0, 149, 217, 0.2);
border-radius: 40px;
}
.useful_back h4 {font-size: 3.4vw;line-height: 1.6;font-weight: 700;text-align: center;margin: 0 0 5%;}
.useful_back h4 span {font-size: 2vw;line-height: 1.6;font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.useful_back h4 span::before,
.useful_back h4 span::after {
content: '';
width: 1px;
height: 40px;
background-color: #0095d9;
}
.useful_back h4 span::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.useful_back h4 span::after {
margin-left: 30px;
transform: rotate(35deg)
}

.useful_back ul {
display:flex;
flex-wrap:wrap;
}
.useful_back ul li {width: 30%;margin: 0 5% 0 0;}
.useful_back ul li img {width: 100%;height: auto;margin: 0 0 2.5%;}
.useful_back ul li:nth-child(3n) {margin: 0;}
.useful_back ul li dl {}
.useful_back ul li dl dt {font-size: 1.2vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;}
.useful_back ul li dl dd {font-size: 1vw;line-height: 1.6;text-align: left;}




@media screen and (max-width: 1060px) {
.kodomon {width: 90%;margin:0 auto;text-align: left;}
.kodomon img {width: 100%;height: auto;}
}

@media screen and (max-width: 767px) {

.kodomon_block {padding: 5% 0;margin: 0 0 5%; background-color: rgba(0, 149, 217, 0.2);position: relative;}


.kodomon {width: 90%;margin:0 auto;text-align: left;}
.kodomon img {width: 100%;height: auto;}



.kodomon dl {}
.kodomon dl dt {font-size: 5.4vw;line-height: 1;font-weight: 700;text-align: center;margin: 0 0 5%;}
.kodomon dl dt img {height: 7vw;width: auto;vertical-align: bottom;margin: 0 1% 0 0;}
.kodomon dl dd {text-align: center;}
.kodomon dl dd p.sub_title{font-size: 4vw;line-height: 1.6;font-weight: 700;margin: 0 0 5%;}
.kodomon dl dd p {font-size: 3vw;line-height: 1.6;text-align: left;}


ul.kodomon_pic {position: absolute;bottom: 5%;left: 5%;
width: 90%;margin:0 auto -15%;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
ul.kodomon_pic li {width: 33.33%;}
ul.kodomon_pic li img {width: 100%;height: auto;}


.kodomon_icon {width: 90vw;margin: 0 auto 6%;}
.kodomon_icon dl {margin: 0 0 5%;}
.kodomon_icon dl dt {font-size: 4.4vw;line-height: 1;font-weight: 700;text-align: center;margin: 0 0 2.5%;}
.kodomon_icon dl dt img {height: 4vw;width: auto;vertical-align: bottom;margin: 0 1% 0 0;}
.kodomon_icon dl dd {text-align: center;}
.kodomon_icon dl dd p.sub_title{font-size: 2vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;}
.kodomon_icon dl dd p {font-size: 3vw;line-height: 1.6;text-align: left;}
.kodomon_icon ul { display: flex;
 justify-content: center;flex-wrap: wrap;}
.kodomon_icon ul li {width: 30%;margin: 0 5% 5% 0;}
.kodomon_icon ul li:nth-child(4n) {margin: 0 5% 5% 0;}
.kodomon_icon ul li:nth-child(3n) {margin: 0 0 5%;}
.kodomon_icon ul li img {width: 70%;height: auto;margin: 0 0 2.5%;}
.kodomon_icon ul li h4 {font-size: 3.2vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;text-align: left;}
.kodomon_icon ul li p {font-size: 2.8vw;line-height: 1.6;text-align: left;}


.useful_back {width: 80vw;margin: 0 auto 10%;padding: 5vw; background-color: rgba(0, 149, 217, 0.2);
border-radius: 20px;
}
.useful_back h4 {font-size: 4.4vw;line-height: 1.6;font-weight: 700;text-align: center;margin: 0 0 5%;}
.useful_back h4 span {font-size: 3.6vw;line-height: 1.6;font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.useful_back h4 span::before,
.useful_back h4 span::after {
content: '';
width: 1px;
height: 20px;
background-color: #0095d9;
}
.useful_back h4 span::before {
margin-right: 20px;
transform: rotate(-35deg)
}
.useful_back h4 span::after {
margin-left: 20px;
transform: rotate(35deg)
}

.useful_back ul {
display:flex;
flex-wrap:wrap;
}
.useful_back ul li {width: 100%;margin: 0 0 5%;}
.useful_back ul li img {width: 100%;height: auto;margin: 0 0 2.5%;}
.useful_back ul li:nth-child(3n) {margin: 0;}
.useful_back ul li dl {}
.useful_back ul li dl dt {font-size: 3vw;line-height: 1.6;font-weight: 700;margin: 0 0 2.5%;text-align: left;}
.useful_back ul li dl dd {font-size: 2.8vw;line-height: 1.6;text-align: left;}


}