@charset "UTF-8";
/* CSS Document */

/* Color */
/* 子ども教育 #EC6D80 rgba(236,109,128,1)　：　hover #DA2F40 */

#kodomo #page-title .base { background: rgba(236,109,128,1); background: linear-gradient(0deg, rgba(236,109,128,1) 0%, rgba(236,109,128,.6) 100%); }
#kodomo #page-title h1 strong { color: #EC6D80; }
#kodomo #page-title h1 strong span { color: #FFF; }
.kodomo-bg { background: rgba(236,109,128,.2); }

/* Index */
#kodomo #index-column ul li a { background: linear-gradient(0deg, rgba(236,109,128,.6) 0%, rgba(236,109,128,1) 100%); }
#kodomo #index-column ul li a:hover { background: linear-gradient(0deg, rgba(236,109,128,.8) 0%, rgba(236,109,128,1) 100%); }

/* Common */
#index-read h2 { font-size: 1.8rem; line-height: 1.4; text-align: center; color: #EC6D80; margin-bottom: 1rem; }
#index-read p { font-size: 1.1rem; line-height: 1.8; text-align: center; }
#index-read p span::before { content: "\A"; white-space: pre; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #index-read h2 { font-size: 1.3rem; line-height: 1.4; margin-bottom: 1rem; }
  #index-read h2 span::before { content: "\A"; white-space: pre; }
  #index-read p { font-size: 1rem; line-height: 1.6; text-align: justify; }
  #index-read p span::before { content: "";  }
}


/* Merit */
#kodomo-merit ul { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
#kodomo-merit ul li { width: calc(48% - 3rem); margin-bottom: 4%; padding: 0 1.5rem 5rem 1.5rem; border-radius: 1.5rem; background: #FFF; position: relative; }
#kodomo-merit ul li:nth-child(n + 3) { margin-bottom: 0; }
#kodomo-merit ul li .images { width: min(80%,300px); margin: -1rem auto 1rem auto; }
#kodomo-merit ul li dl { padding-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; }
#kodomo-merit ul li dl dt { font-family: "Barlow", sans-serif; width: 5rem; position: relative; }
#kodomo-merit ul li dl dt strong { font-size: 3rem; line-height: 1.2; text-align: center; font-weight: 400; color: #FFF; width: 5rem; height: 5rem; border-radius: 50%; background: #EC6D80; display: flex; align-items: center; justify-content: center; }
#kodomo-merit ul li dl dt span { font-size: 1.1rem; line-height: 1.2; text-align: center; color: #EC6D80; width: 5rem; position: absolute; top: -1.4rem; left: 0; }
#kodomo-merit ul li dl dd { font-size: 1.3rem; line-height: 1.3; text-align: justify; color: #EC6D80; width: calc(100% - 5.5rem); }
#kodomo-merit ul li dl dd span::before { content: "\A"; white-space: pre; }
#kodomo-merit ul li p { text-align: justify; }
#kodomo-merit ul li p.link-btn { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); }
#kodomo-merit ul li p.link-btn a { line-height: 1.2; text-align: center; color: #FFF; width: 12rem; padding: .5rem 0; background: #EC6D80; border-radius: 1.5rem; display: block; position: relative; }
#kodomo-merit ul li p.link-btn a::after { content: ""; width: .6rem; height: .8rem; background: #FFF; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); }
#kodomo-merit ul li p.link-btn a:hover { opacity: .8; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #kodomo-merit ul li { width: calc(100% - 2rem); padding: 0 1rem 5rem 1rem; }
  #kodomo-merit ul li:nth-child(n + 3) { margin-bottom: 4%; }
  #kodomo-merit ul li:last-child { margin-bottom: 0; }
  #kodomo-merit ul li dl dt { width: 4rem; }
  #kodomo-merit ul li dl dt strong { font-size: 2.5rem; line-height: 1.2; width: 4rem; height: 4rem; }
  #kodomo-merit ul li dl dt span { font-size: 1rem; line-height: 1.2; width: 4rem; }
  #kodomo-merit ul li dl dd { font-size: 1.1rem; line-height: 1.3; width: calc(100% - 4.5rem); }
  #kodomo-merit ul li dl dd span::before { content: ""; }
  #kodomo-merit ul li p { line-height: 1.6; }
}


/* FAQ */
#kodomo-faq ul { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
#kodomo-faq ul li { width: 48%; margin-bottom: 4%; border-radius: 1.5rem; background: #FFF; }
#kodomo-faq ul li dl { padding: 2rem 1.5rem 1.5rem 1.5rem; }
#kodomo-faq ul li dl dt { font-size: 1.2rem; line-height: 1.3; text-align: justify; margin-bottom: 1rem; padding-left: 5.8rem; position: relative; }
#kodomo-faq ul li dl dt strong { font-family: "Barlow", sans-serif; font-size: 3.5rem; line-height: 1.3; color: #EC6D80; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#kodomo-faq ul li dl dt span::before { content: "\A"; white-space: pre; }
#kodomo-faq ul li dl dd h3 { font-size: 1.1rem; line-height: 1.6; text-align: justify; margin-bottom: .8rem; padding-left: .5rem; border-left: solid .3rem #EC6D80; }
#kodomo-faq ul li dl dd h3 span::before { content: "\A"; white-space: pre; }
#kodomo-faq ul li dl dd p { text-align: justify; }
#kodomo-faq ul li dl dd p strong { font-family: "Barlow", sans-serif; font-size: 2rem; line-height: 1.3; color: #EC6D80; padding: 0 1rem .5rem 0; float: left; }
#kodomo-faq ul li dl dd p:after { content: ""; display: block; clear: both; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #kodomo-faq ul { flex-direction: column; }
  #kodomo-faq ul li { width: 100%; }
  #kodomo-faq ul li dl dt span::before, #kodomo-faq ul li dl dd h3 span::before { content: ""; }
  #kodomo-faq ul li dl dd h3 { font-size: 1rem; line-height: 1.4; }
  #kodomo-faq ul li dl dd p { line-height: 1.6; }
  #kodomo-faq ul li dl dt span::before { content: ""; }
}


/* Merit 1-4 */
#merit-read h2 { font-size: 1.6rem; line-height: 1.4; text-align: center; color: #EC6D80; margin-bottom: 1rem; }
#merit-read #profile { margin-bottom: 2rem; position: relative; }
#merit-read #profile dt { height: 480px; border-radius: 1.5rem; position: relative; overflow: hidden; }
#merit-read #profile dt img { width: 100%; height: auto; position: absolute; top: 50%; transform: translateY(-50%); }
#merit-read #profile dd { width: 8rem; height: 8rem; color: #FFF; border-radius: 50%; background: #EC6D80; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: -1rem; right: 2rem; }
#merit-read #profile dd span { font-size: .7rem; line-height: 1.3; text-align: center; }
#merit-read #profile dd strong { font-size: 1.1rem; line-height: 1.3; text-align: center; padding-top: .2rem; }
#merit-read ul { display: flex; justify-content: space-between; }
#merit-read ul li { width: 48%; }
#merit-read ul li h3 { font-size: 1.2rem; line-height: 1.3; text-align: justify; color: #EC6D80; padding-bottom: .5rem; }
#merit-read ul li p { text-align: justify; }

#kodomo-point { padding-top: 1rem; position: relative; }
#kodomo-point h2 { font-size: 1.2; line-height: 1.2; text-align: center; color: #FFF; width: 10rem; background: #EC6D80; position: absolute; top: -.8rem; }
#kodomo-point h2 strong { padding: .4rem 0; display: block; position: relative; }
#kodomo-point h2 strong::after { content: ""; width: 1rem; height: 1rem; background: #EC6D80; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); }
#kodomo-point h3 { font-size: 1.3rem; line-height: 1.4; text-align: justify; color: #EC6D80; padding-bottom: .5rem; }
#kodomo-point p { text-align: justify; }
#kodomo-point p.only-txt { column-count: 2; column-gap: 3rem; }
#kodomo-point div.block { display: flex; justify-content: space-between; }
#kodomo-point div.block dl { width: 48%; }
#kodomo-point div.block dl dt { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #FFF; margin-bottom: .5rem; padding: .3rem 0; background: #EC6D80; }
#kodomo-point dl.list dt { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #EC6D80; margin-bottom: .5rem; padding: .3rem 0; border: solid 1px #EC6D80; background: #FFF; }
#kodomo-point dl.list dd ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
#kodomo-point dl.list dd ul li { font-size: .9rem; line-height: 1.4; text-align: justify; text-indent: -1em; width: calc(48% - 1rem); padding: 0 0 .2rem 1rem; }
#kodomo-point dl.list dd ul li span { color: rgba(236,109,128,.6); }
#kodomo-point p.etc { text-align: right; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #merit-read h2 { font-size: 1.3rem; line-height: 1.4; text-align: justify; }
  #merit-read h2 span::before { content: "\A"; white-space: pre; }
  #merit-read #profile { margin-bottom: 1rem; }
  #merit-read #profile dt { height: auto; border-radius: 1rem; }
  #merit-read #profile dt img { position: relative; top: 0; transform: translateY(0); }
  #merit-read #profile dd { width: 7rem; height: 7rem; bottom: -.5rem; right: -.5rem; }
  #merit-read #profile dd span { font-size: .65rem; line-height: 1.3; }
  #merit-read #profile dd strong { font-size: 1rem; line-height: 1.3; }
  #merit-read ul { flex-direction: column; }
  #merit-read ul li { width: 100%; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: solid 1px #EC6D80; }
  #merit-read ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  #merit-read ul li h3 { font-size: 1.1rem; line-height: 1.3; }
  #merit-read ul li p { line-height: 1.6; }
  #kodomo-point h2 { left: 50%; transform: translateX(-50%); }
  #kodomo-point h3 { font-size: 1.2rem; line-height: 1.4; text-align: center; }
  #kodomo-point h3 span::before { content: "\A"; white-space: pre; }
  #kodomo-point p { line-height: 1.6; }
  #kodomo-point p.only-txt { column-count: 1; column-gap: 0; }
  #kodomo-point div.block { flex-direction: column; }
  #kodomo-point div.block dl { width: 100%; margin-bottom: 1rem; }
  #kodomo-point div.block dl:nth-last-of-type(1) { margin-bottom: 0; }
  #kodomo-point dl.list dd ul li { font-size: .9rem; line-height: 1.4; width: calc(100% - 1rem); }

}


#merit-list ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
#merit-list ul li { width: calc(24% - 1rem); padding-left: 1rem; }
#merit-list ul li a dl { border: solid 1px #EC6D80; border-radius: .5rem; position: relative; }
#merit-list ul li a:hover dl { background: rgba(236,109,128,.2); }
#merit-list ul li a dl dt { width: 4rem; height: 4rem; border: solid 2px #FFF; border-radius: 50%; background: #EC6D80; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: -1rem; transform: translateY(-50%); }
#merit-list ul li a dl dt span { font-size: .8rem; line-height: 1.2; text-align: center; color: #FFF; }
#merit-list ul li a dl dt strong { font-size: 2rem; line-height: 1.2; font-weight: 400; text-align: center; color: #FFF; }
#merit-list ul li a dl dd { color: #EC6D80; height: 3rem; padding-left: 4rem; display: flex; align-items: center; justify-content: flex-start; }
#merit-list ul li a.active dl { background: rgba(236,109,128,.2); background: linear-gradient(0deg, rgba(236,109,128,.8) 0%, rgba(236,109,128,1) 100%); }
#merit-list ul li a.active dd { color: #FFF; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #merit-list ul li { width: calc(100% - 1rem); margin-bottom: 1.5rem; }
  #merit-list ul li:last-child { margin-bottom: 0; }
}

#subconte-link.top-line { border-top: solid 1px #EC6D80; }
#subconte-link ul li a { color: #EC6D80; border-color: #EC6D80; background: #FFF; }
#subconte-link ul li a::after { background: #EC6D80; }
#subconte-link ul li a:hover { background: rgba(236,109,128,.2); }
#subconte-link ul li a.active { color: #FFF; background: rgba(236,109,128,.8); background: linear-gradient(0deg, rgba(236,109,128,.7) 0%, rgba(236,109,128,1) 100%); }
#subconte-link ul li a.active::after { background: #FFF; }