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

/* Color */
/* 健康栄養 #8DC21F rgba(141,194,31,1)　：　hover #4E9404 */

#kenko #page-title .base { background: rgba(141,194,31,1); background: linear-gradient(0deg, rgba(141,194,31,1) 0%, rgba(141,194,31,.6) 100%); }
#kenko #page-title h1 strong { color: #8DC21F; }
#kenko #page-title h1 strong span { color: #FFF; }
.kenko-bg { background: rgba(141,194,31,.2); }

/* Index */
#kenko #index-column ul li a { background: linear-gradient(0deg, rgba(141,194,31,.6) 0%, rgba(141,194,31,1) 100%); }
#kenko #index-column ul li a:hover { background: linear-gradient(0deg, rgba(141,194,31,.8) 0%, rgba(141,194,31,1) 100%); }

/* Field */
#index-read h2 { font-size: 1.8rem; line-height: 1.4; text-align: center; color: #8DC21F; 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; }
#kenko-field h2 { font-size: 1.8rem; line-height: 1.3; text-align: center; color: #8DC21F; margin-bottom: 1.5rem; }
#kenko-field #chart { position: relative; }
#kenko-field #chart ul { width: min(100%,600px); height: 0; margin: 0 auto; padding-top: min(90%,540px); position: relative; }
#kenko-field #chart ul li { width: 55%; height: 0; padding-top: 55%; background: rgba(141,194,31,.4); border-radius: 50%; position: absolute; }
#kenko-field #chart ul li:first-child { top: 0; left: 50%; transform: translateX(-50%); }
#kenko-field #chart ul li:nth-child(2) { bottom: 0; left: 0; }
#kenko-field #chart ul li:last-child { right: 0; bottom: 0; }
#kenko-field #chart ul li div { text-align: center; width: 100%; display: block; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#kenko-field #chart ul li:first-child div { transform: translate(-50%,-60%); }
#kenko-field #chart ul li:nth-child(2) div { transform: translate(-60%,-50%); }
#kenko-field #chart ul li:last-child div { transform: translate(-40%,-50%); }
#kenko-field #chart ul li div h3 { font-size: min(4.5vw,2rem); line-height: 1.3; text-align: center; color: #FFF; }
#kenko-field #chart h4 { font-size: min(4.5vw,1.8rem); line-height: 1.3; text-align: center; color: #FFF; width: 5.2em; padding: .4rem .5rem .5rem .5rem; border: solid 2px #FFF; border-radius: .5rem; background: #8DC21F; box-shadow: 0 0 .5rem rgba(0,0,0,.2); position: absolute; top: 51%; left: 50%; transform: translateX(-50%); z-index: 2; }
#field-box { padding: 2rem 0 1rem 0; display: flex; justify-content: space-between; }
#field-box dl { width: calc(32% - 1rem); padding: .5rem; border-radius: 1rem; background: #FFF; }
#field-box dl dt { font-size: 1.2rem; line-height: 1.3; text-align: center; color: #FFF; margin-bottom: .6rem; padding: .4rem 0; border-radius: .5rem; background: #8DC21F; }
#field-box dl dd h3 { font-size: 1.1rem; line-height: 1.3; font-weight: bold; text-align: center; color: #8DC21F; padding-bottom: .5rem; }
#field-box dl dd h3 span::before { content: "\A"; white-space: pre; }
#field-box dl dd ul li { line-height: 1.6; text-align: justify; text-indent: -1em; padding: 0 0 .3em 1em; }
#field-box dl dd ul li span { color: #8DC21F; }
#kenko-field p.read { text-align: center; }
#kenko-field p.read span::before { content: "\A"; white-space: pre; }
@media only screen and (max-width: 768px) {
  #field-box dl dt { height: 2.8em; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #field-box dl dd h3 span::before { content: ""; }
}
@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: "";  }
  #kenko-field h2 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 1rem; }
  #kenko-field h2 span::before { content: "\A"; white-space: pre; }
  #field-box { padding: 1rem 0 .5rem 0; flex-direction: column; }
  #field-box dl { width: calc(100% - 1rem); margin-bottom: .5rem; padding: .5rem; border-radius: 1rem; background: #FFF; }
  #field-box dl dt { height: auto; display: block; }
  #field-box dl dd h3 span::before { content: "\A"; white-space: pre; }
  #kenko-field p.read { line-height: 1.6; text-align: justify; }
  #kenko-field p.read span::before { content: ""; }
}

/* Field 1-4 */
#field-read.column { margin-bottom: -2rem; padding-bottom: 0; }
.field-comment { padding-bottom: 1rem; position: relative; }
.field-comment dt { width: 40%; position: absolute; top: -.5rem; right: 0; }
.field-comment dd { width: 56%; }
.field-comment dd h2 { font-size: 1.5rem; line-height: 1.4; color: #8DC21F; margin-bottom: .5rem; }
.field-comment dd p { text-align: justify; }
.field-profile { display: flex; align-items: flex-end; justify-content: space-between; }
.field-profile dt { width: 56%; }
.field-profile dd { width: 44%; }
.field-profile dd p { line-height: 1.3; padding: .5rem 0 4rem 2rem; border-top: solid 1px #8DC21F; }
.field-profile dd p strong { font-size: 1.1rem; line-height: 1.2; font-weight: bold; padding-bottom: .5rem; display: block; }
#field-flow .inner-box { padding-top: 4rem; }
#field-flow h2 { font-size: 1.5rem; line-height: 1.2; font-weight: bold; text-align: center; color: #FFF; margin-bottom: 4rem; padding: .6rem 0; border-radius: 1rem; background: rgba(141,194,31,.7); position: relative; }
#field-flow h2::after { content: ""; width: 3rem; height: 1.5rem; background: rgba(141,194,31,.7); clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -2.75rem; left: 50%; transform: translateX(-50%); }
#field-flow ul li { margin-bottom: 4rem; padding: 1.5rem 1.5rem 0 1.5rem; border-radius: 1rem; background: #FFF; position: relative; }
#field-flow ul li::after { content: ""; width: 3rem; height: 1.5rem; background: rgba(141,194,31,.7); clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -2.75rem; left: 50%; transform: translateX(-50%); }
#field-flow ul li:last-child { margin-bottom: 0; }
#field-flow ul li:last-child::after { display: none; visibility: hidden; }
#field-flow ul li dl { position: relative; }
#field-flow ul li dl dt { width: 26%; position: absolute; right: 0; bottom: -.3rem; }
#field-flow ul li dl dd { width: 70%; min-height: 10rem; }
#field-flow ul li h3 { font-size: 1.3rem; line-height: 1.4; padding-bottom: .5rem; color: #8DC21F; }
#field-flow ul li p { text-align: justify; padding-bottom: 1.5rem; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #field-read.column { margin-bottom: 0; padding-bottom: 2rem; }
  .field-comment { display: flex; flex-direction: column-reverse; }
  .field-comment dt { width: 80%; margin: 0 auto; position: relative; top: auto; }
  .field-comment dd { width: 100%; }
  .field-comment dd h2 { font-size: 1.3rem; line-height: 1.4; }
  .field-comment dd p { line-height: 1.6; padding-bottom: .5rem; }
  .field-profile { flex-direction: column; }
  .field-profile dt { width: 100%; padding-bottom: .5rem; }
  .field-profile dd { width: 100%; }
  .field-profile dd p { font-size: .9rem; line-height: 1.3; padding: 0; border-top: none; }
  #field-flow .inner-box { padding-top: 2rem; }
  #field-flow h2 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 2rem; }
  #field-flow h2::after { width: 2rem; height: 1rem; bottom: -1.5rem; }
  #field-flow ul li { margin-bottom: 2rem; padding: 1rem 1rem 0 1rem; }
  #field-flow ul li::after { width: 2rem; height: 1rem; bottom: -1.5rem; }
  #field-flow ul li dl { padding-bottom: 1rem; display: flex; flex-direction: column-reverse; }
  #field-flow ul li dl dt { width: 80%; margin: 0 auto; position: relative; right: 0; bottom: auto; }
  #field-flow ul li dl dd { width: 100%; min-height: auto; }
  #field-flow ul li h3 { font-size: 1.1rem; line-height: 1.4; }
  #field-flow ul li p { line-height: 1.6; padding-bottom: 1rem; }
}


#special-icon { padding-bottom: 1rem; }
#special-icon dt { width: 5rem; height: 5rem; margin: 0 auto .2rem auto; border: solid 2px #FFF; border-radius: 50%; background: #8DC21F; display: flex; align-items: center; justify-content: center; }
#special-icon dt img { width: 85%; }
#special-icon dd { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #8DC21F; }
#special-read #profile { display: flex; justify-content: space-between; }
#special-read #profile dt { width: 40%; }
#special-read #profile dd { width: 56%; }
#special-read #profile dt img { padding-bottom: .5rem; }
#special-read #profile dt p { font-size: .9rem; line-height: 1.4; }
#special-read #profile dt p strong { line-height: 1.4; }
#special-read #profile dt p span { padding-left: .5rem; }
#special-read #profile dd h2 { font-size: 1.3rem; line-height: 1.4; text-align: justify; color: #8DC21F; padding-bottom: .5rem; }
#special-read #profile dd h2 span::before { content: "\A"; white-space: pre; }
#special-read #profile dd p { text-align: justify; }
#special-read #step { margin-top: 2rem; }
#special-read #step li { margin-bottom: 2rem; padding: 1.5rem 1.5rem 1.5rem 5.5rem; border-radius: 1rem; background: #FFF; position: relative; }
#special-read #step li h3 { line-height: 1.3; text-align: center; color: #FFF; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: #8DC21F; display: flex; align-items: center; justify-content: center; position: absolute; top: -1rem; left: -1rem; }
#special-read #step li h4 { font-size: 1.3rem; line-height: 1.3; text-align: justify; color: #8DC21F; padding-bottom: .5rem; }
#special-read #step li p { text-align: justify; }
#special-read #step li dl.photo { position: relative; }
#special-read #step li dl.photo dt { width: 36%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#special-read #step li dl.photo dd { width: 60%; }
#special-read #case h3 { font-size: 1.3rem; line-height: 1.3; text-align: center; color: #8DC21F; margin-bottom: 2.5rem; padding-bottom: .3rem; border-bottom: solid 1px #8DC21F; position: relative; }
#special-read #case h3::before { content: ""; width: 2rem; height: 1.5rem; background: #8DC21F; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); }
#special-read #case h3::after { content: ""; width: 2rem; height: 1.5rem; background: #E8F3D2; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: calc(-1.5rem + 2px); left: 50%; transform: translateX(-50%); }
#special-read #case ul { border-left: solid 1px #8DC21F; display: flex; align-items: stretch; justify-content: space-between; }
#special-read #case ul li { border-right: solid 1px #8DC21F; }
#special-read #case ul.block2 li { width: 50%; }
#special-read #case ul.block3 li { width: calc(100% / 3); }
#special-read #case ul li dl { padding: 0 1rem; }
#special-read #case ul li dl dt { font-size: 1.1rem; line-height: 1.2; text-align: center; color: #FFF; margin-bottom: .5rem; padding: .3rem 0; background: #8DC21F; }
#special-read #case ul li dl dd p { text-align: justify; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #special-icon dd { font-size: 1.1rem; line-height: 1.2; }
  #special-read #profile { flex-direction: column-reverse; }
  #special-read #profile dt { width: 100%; }
  #special-read #profile dt p span { padding-left: 0; }
  #special-read #profile dt p span::before { content: "\A"; white-space: pre; }
  #special-read #profile dd { width: 100%; padding-bottom: 1rem; }
  #special-read #profile dd h3 { font-size: 1.1rem; line-height: 1.4; }
  #special-read #profile dd h3 span::before { content: ""; }
  #special-read #profile dd p { line-height: 1.6; }
  #special-read #step li { padding: 4.5rem 1rem 1rem 1rem; }
  #special-read #step li h3 { font-size: .9rem; line-height: 1.3; width: 5rem; height: 5rem; left: 50%; transform: translateX(-50%); }
  #special-read #step li h4 { font-size: 1.1rem; line-height: 1.3; }
  #special-read #step li p { line-height: 1.6; }
  #special-read #step li dl.photo { display: flex; flex-direction: column-reverse; }
  #special-read #step li dl.photo dt { width: 100%; position: relative; top: auto; transform: translateY(0); }
  #special-read #step li dl.photo dd { width: 100%; padding-bottom: 1rem; }
  #special-read #case h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 2rem; }
  #special-read #case h3 span::before { content: "\A"; white-space: pre; }
  #special-read #case h3::before { width: 1.5rem; height: 1rem; bottom: -1rem; }
  #special-read #case h3::after { width: 1.5rem; height: 1rem;bottom: calc(-1rem + 2px); }
  #special-read #case ul { border-left: none; flex-direction: column; }
  #special-read #case ul li { border-right: none; }
  #special-read #case ul.block2 li, #special-read #case ul.block3 li { width: 100%; }
  #special-read #case ul li dl { padding: 0 0 1rem 0; }
  #special-read #case ul li:last-child dl { padding-bottom: 0; }
  #special-read #case ul li p { line-height: 1.6; }
}

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

/* Link Button */
#field-list { border-bottom: solid 1px #8DC21F; }
#field-basic { margin-bottom: 1.5rem; }
#field-basic, #field-special { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
#field-basic li { width: 24%; }
#field-basic li a { color: #8DC21F; height: 4rem; border: solid 1px #8DC21F; border-radius: 2rem; background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#field-basic li a:hover { background: rgba(141,194,31,.2); }
#field-basic li a.active { color: #FFF; background: rgba(141,194,31,.7); background: linear-gradient(0deg, rgba(141,194,31,.7) 0%, rgba(141,194,31,1) 100%); }
#field-basic li a h3 { font-family: "Noto Sans Japanese Bold"; font-size: 1.3rem; line-height: 1.3; }
#field-basic li a h4 { font-family: "Noto Sans Japanese Regular"; font-size: 1rem; line-height: 1.3; }
#field-special li { width: 49.25%; }
#field-special li a { color: #8DC21F; height: 4rem; border: solid 1px #8DC21F; border-radius: 2rem; background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#field-special li a:hover { background: rgba(141,194,31,.2); }
#field-special li a.active { color: #FFF; background: rgba(141,194,31,.7); background: linear-gradient(0deg, rgba(141,194,31,.7) 0%, rgba(141,194,31,1) 100%); }
#field-special li a dl { width: 100%; position: relative; }
#field-special li a dl dt { width: 5rem; height: 5rem; border: solid 2px #FFF; border-radius: 50%; background: #8DC21F; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: -2px; transform: translateY(-50%); }
#field-special li a dl dt img { width: 85%; }
#field-special li a dl dd { padding: 0 .5rem 0 5.5rem; display: flex; align-items: center; justify-content: center; }
#field-special li a dl dd h3 { text-align: center; }
#field-special li a dl dd h3 span { font-family: "Noto Sans Japanese Regular"; font-size: 1rem; line-height: 1.3; display: block; }
#field-special li a dl dd h3 strong { font-family: "Noto Sans Japanese Bold"; font-size: 1.3rem; line-height: 1.3; display: block; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #field-basic { padding-bottom: .5rem; }
  #field-basic li { width: 100%; margin-bottom: .5rem; }
  #field-special li { width: 100%; margin-bottom: 1rem; }
  #field-special li:last-child { margin-bottom: 0; }
}


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