@charset "utf-8";

@charset "UTF-8";
/* 使い方
font-size: rem(16);
font-size: vw(16);
font-size: vw(16, 1440); // ブラウザ幅が1440pxのデザインデータの場合
line-height: lh(16,28);
letter-spacing: ls(50);
*/
/* ----------------------------------------
reset css
---------------------------------------- */
.kikanshi h2.sdgs-post-heading {
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent;
}

/* =======================================
general settings
======================================= */
.kikanshi .sdgs-main-wrapper * {
  font-size: initial;
  line-height: initial !important;
  letter-spacing: initial;
}

.kikanshi #sdgs-main * {
  color: var(--text-color);
  font-size: var(--fz);
}
.kikanshi #sdgs-main * img {
  align-items: baseline;
}
.kikanshi #sdgs-main * dl, .kikanshi #sdgs-main * dt, .kikanshi #sdgs-main * dd {
  margin: 0;
}
.kikanshi #sdgs-main * figure, .kikanshi #sdgs-main * h2, .kikanshi #sdgs-main * h3, .kikanshi #sdgs-main * h4, .kikanshi #sdgs-main * h5, .kikanshi #sdgs-main * h6 {
  margin: 0;
}

.pc-only {
  display: none;
}

.sp-only {
  display: block;
}

/* ----------------------------------------
feature style css
---------------------------------------- */
#feature-article {
  font-family: inherit;
  font-weight: inherit;
  --accent-color: #008ccd;
  --black: #000;
  --fz: clamp(14px, 8.1824px + 1.8182vw, 18px);
  --phrase: #c7a899;
  --text-color: #222;
  --white: #fff;
}

#feature-article > * {
  width: 100%;
  margin: 0 auto;
}

#feature-article * {
  font-size: var(--fz);
}

/* ----------------------------------------
coop-recommend css
---------------------------------------- */
#feature-article {
  padding: 0 5px;
}
#feature-article p, #feature-article li, #feature-article dd, #feature-article th, #feature-article td {
  font-size: 1.125em;
  line-height: 1.75 !important;
  letter-spacing: -0.035em;
}
#feature-article p span, #feature-article p strong, #feature-article p em, #feature-article li span, #feature-article li strong, #feature-article li em, #feature-article dd span, #feature-article dd strong, #feature-article dd em, #feature-article th span, #feature-article th strong, #feature-article th em, #feature-article td span, #feature-article td strong, #feature-article td em {
  line-height: 1.75 !important;
  letter-spacing: -0.035em;
}
#feature-article section {
  margin-top: 13.9082058414vw;
}
#feature-article section:first-of-type {
  margin-top: 0;
}
#feature-article .link {
  width: 100%;
  max-width: 83.4492350487vw;
  margin: 2.7816411683vw auto 0 auto;
}
#feature-article .link a {
  display: block;
  padding: 0.75em 1.5em 0.75em 0.5em;
  background: #e60012;
  border-radius: 50vh;
  color: var(--white);
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  position: relative;
}
#feature-article .link a:after {
  content: "";
  width: 1em;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1em;
  transform: rotate(45deg);
  aspect-ratio: 1;
}
#feature-article .feature-article {
  /** mv **/
}
#feature-article .feature-article-mv__meta {
  width: 100%;
  padding: 0 1.5rem;
  position: absolute;
  top: 0;
}
#feature-article .feature-article-mv__block {
  padding: 10rem 0 0;
  position: relative;
}
#feature-article .feature-article-mv__heading {
  width: 34.7705146036vw;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
}
#feature-article .feature-article-mv__heading img {
  width: 100%;
}
#feature-article .feature-article-mv__subheading {
  margin: 1rem 0 0;
  color: #61bc87;
  font-size: 2rem;
}
#feature-article .feature-article-mv__summary {
  margin-top: 4.1724617524vw;
  color: #333;
  font-size: 4.1724617524vw;
  font-weight: 500;
  text-align: justify;
}
#feature-article .feature-article-mv__img {
  width: 100%;
  margin: 0 0 0 auto;
}
#feature-article .feature-article {
  /** content **/
}
#feature-article .feature-article-content__heading {
  margin-bottom: 2rem;
  color: #63a7dc;
  font-size: 2rem;
}
#feature-article .feature-article-content__2col {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
#feature-article .feature-article-content__2col:last-child {
  margin-top: 2.7816411683vw;
}
#feature-article .feature-article-content__2col p {
  width: calc(100% - 16rem);
}
#feature-article .feature-article-content__illust {
  width: 15rem;
}
#feature-article .feature-article-content__fukidashi {
  padding: 1rem 2rem;
  background: #fff;
  border: solid 0.2rem #b8dfd2;
  border-radius: 1rem;
  position: relative;
}
#feature-article .feature-article-content__fukidashi::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: #fff;
  border-top: 0.2rem solid #b8dfd2;
  border-right: 0.2rem solid #b8dfd2;
  position: absolute;
  top: 50%;
  right: -1.1rem;
  transform: translateY(-50%) rotate(45deg);
}
#feature-article .feature-article-content__pic figcaption {
  font-size: 1.2rem;
  line-height: 1.8 !important;
}
#feature-article .feature-article-content__bigheading {
  padding: 2.7816411683vw;
  margin-bottom: 4.1724617524vw;
  border-top: dotted 0.6954102921vw #d7e9c1;
  border-bottom: dotted 0.6954102921vw #d7e9c1;
  color: #63a7dc;
  font-size: 5.5632823366vw;
  text-align: center;
}
#feature-article .feature-article-content__bigheading span {
  display: block;
  padding: 0.5rem 2rem;
  margin: 0 0 1.3908205841vw;
  background: #63a7dc;
  border-radius: 5rem;
  color: #fff;
  font-size: 4.1724617524vw;
}
#feature-article .feature-article-content__table {
  display: block;
  width: 100%;
  margin-bottom: 6.9541029207vw;
}
#feature-article .feature-article-content__table__group {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#feature-article .feature-article-content__table__group tr {
  display: block;
  width: 100%;
}
#feature-article .feature-article-content__table__group tr:last-child {
  flex: 1;
}
#feature-article .feature-article-content__table__group th, #feature-article .feature-article-content__table__group td {
  box-sizing: border-box;
  display: block;
}
#feature-article .feature-article-content__table__group th {
  width: 100%;
}
#feature-article .feature-article-content__table__group td {
  flex: 1 1 0;
  width: auto;
}
#feature-article .feature-article-content__table__group--baby {
  display: block;
  flex: none;
  border-right: none;
}
#feature-article .feature-article-content__table__group--baby th span {
  padding: 2.5rem 1rem;
}
#feature-article .feature-article-content__table__group--kids {
  display: block;
  flex: none;
}
#feature-article .feature-article-content__table th span {
  display: block;
  padding: 3.4770514604vw;
  background: #8bb9e4;
  border-radius: 6.9541029207vw;
  color: #fff;
  font-size: 4.1724617524vw;
  font-weight: 500;
  line-height: 1 !important;
  text-align: center;
}
#feature-article .feature-article-content__table td {
  padding: 4.1724617524vw 2.0862308762vw 0;
  position: relative;
}
#feature-article .feature-article-content__table td .gr {
  color: #0fae6f;
  font-size: 1.8rem;
}
#feature-article .feature-article-content__table td:last-child {
  border-right: none;
}
#feature-article .feature-article-content__table td .illust {
  display: block;
  width: 13rem;
  margin: 4.1724617524vw auto;
}
#feature-article .feature-article-content__table td .ttl {
  display: block;
  padding: 0.6954102921vw;
  background: #f6f9e9;
  border-radius: 4.1724617524vw;
  font-size: 5.5632823366vw;
  font-weight: 500;
  text-align: center;
}
#feature-article .feature-article-content__table td:nth-child(2) .ttl {
  background: #e8f1c7;
}
#feature-article .feature-article-content__table td:nth-child(3) .ttl {
  background: #dae8a4;
}
#feature-article .feature-article-content__box__border {
  padding: 2rem;
  margin: 0 0 2rem;
  border: solid 0.1rem #b8dfd2;
  border-radius: 1rem;
}
#feature-article .feature-article-content__box__head {
  padding: 0;
  margin: 0 0 1rem;
  background: inherit;
  color: #0fae6f;
  font-size: 5.5632823366vw;
}
#feature-article .feature-article-content__box__profile {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
#feature-article .feature-article-content__box__name {
  border-bottom: solid 0.1rem #231815;
  font-size: 1.4rem !important;
}
#feature-article .feature-article-content__box__small {
  font-size: 1.4rem !important;
}
#feature-article .feature-article-content__box__pic {
  width: 14.5rem;
}
#feature-article .feature-article-content__box__pic__kozu {
  margin: 0 auto 1rem;
}
#feature-article .feature-article-content__box__inner {
  width: calc(100% - 15rem);
}
#feature-article .feature-article-content__inner {
  padding: 2rem;
  margin-bottom: 3rem;
  background: #ecf3fb;
  border-radius: 2rem;
}
#feature-article .feature-article-content__subheading {
  margin: 0 auto 3rem;
  background: #63a7dc;
  color: #fff;
}
#feature-article .feature-article-content__block {
  margin: 0 0 3rem;
}
#feature-article .feature-article-content__block__illust {
  width: 20rem;
  margin: 2rem auto 0;
}
#feature-article .feature-article-content__block__number {
  display: block;
  width: 6rem;
  height: 6rem;
  padding: 2rem;
  margin: 0 0 1rem;
  background: #63a7dc;
  border-radius: 3rem;
  color: #fff;
  font-size: 2rem !important;
  line-height: 1 !important;
  text-align: center;
}
#feature-article .feature-article-content__3col__box {
  margin-top: 3rem;
}
#feature-article .feature-article-content__3col__fukidashi {
  padding: 2rem;
  margin: 0 0 14rem;
  border: solid 0.2rem #b8dfd2;
  border-radius: 3rem;
  position: relative;
}
#feature-article .feature-article-content__3col__fukidashi::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: #fff;
  border-right: 0.2rem solid #b8dfd2;
  border-bottom: 0.2rem solid #b8dfd2;
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  transform: translateX(-50%) rotate(45deg);
}
#feature-article .feature-article-content__3col__illust {
  width: 10rem;
  position: absolute;
  left: 0;
  bottom: -11rem;
  z-index: 1;
}
#feature-article .feature-article-content__grttl {
  display: block;
  width: 100%;
  padding: 1.5rem;
  margin: 0;
  background: #0fae6f;
  border-radius: 1rem;
  color: #fff;
  line-height: 1.3 !important;
}
#feature-article .feature-article-content__grbg {
  padding: 0 1.5rem 1.5rem;
  margin: 1.5rem 0 0;
  position: relative;
  position: relative;
}
#feature-article .feature-article-content__grbg::before {
  content: "";
  width: 100%;
  height: calc(100% - 3rem);
  background: #e5f3ee;
  border-radius: 1rem;
  position: absolute;
  left: 0;
  bottom: 0;
}
#feature-article .feature-article-content__grbg p {
  position: relative;
}
#feature-article .feature-article-content__grillust {
  width: 90%;
  position: relative;
}
#feature-article .feature-article-content__faq {
  margin: 4.1724617524vw 0 2.7816411683vw;
}
#feature-article .feature-article-content__faq .question {
  padding: 3rem 0 0;
  margin: 0 0 1rem;
  position: relative;
}
#feature-article .feature-article-content__faq .illust {
  width: 8.5rem;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
#feature-article .feature-article-content__faq .question_lead {
  width: calc(100% - 10rem);
  margin: 0 0 0 auto;
}
#feature-article .feature-article-content__faq .answer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 8rem);
  padding: 1rem;
  margin: 0 0 0 auto;
  background: #f0f7e8;
  border: solid 0.2rem #61bc87;
  border-radius: 1rem;
  position: relative;
}
#feature-article .feature-article-content__faq .answer .arrow {
  width: 3.5rem;
  position: absolute;
  top: 3rem;
  left: -5rem;
}
#feature-article .feature-article-content__faq .answer p {
  width: 48%;
}
#feature-article .feature-article-content__faq .answer figure {
  width: 48%;
  position: relative;
}
#feature-article .feature-article-content__faq .answer figure figcaption {
  font-size: 1.3rem !important;
  position: absolute;
  right: 0;
  bottom: -4rem;
  white-space: pre;
}
#feature-article .feature-article-content__pic {
  width: 70%;
  margin: 2rem auto 0;
}
#feature-article .feature-article-content__step {
  position: relative;
}
#feature-article .feature-article-content__step .illust {
  width: 9rem;
  position: absolute;
  left: 0;
  bottom: 0;
}
#feature-article .feature-article-content__step .illust01 {
  width: 7.5rem;
}
#feature-article .feature-article-content__step .inner {
  width: calc(100% - 10rem);
  padding: 1rem;
  margin: 0 0 0 auto;
  background: #d7ece5;
  border-radius: 1rem;
}
#feature-article .feature-article-content__blttl {
  margin: 0 0 2rem;
  background: #caddf2;
}
#feature-article .feature-article-content__tsumire {
  width: 80%;
  margin: 0 auto 1rem;
}
#feature-article .feature-article-content__border {
  padding: 1.5rem;
  background: #f0f7e8;
  border: solid 0.2rem #61bc87;
  border-radius: 1rem;
  position: relative;
}
#feature-article .feature-article-content__border .illust {
  width: 13.9082058414vw;
  position: absolute;
  top: -3rem;
  right: 1rem;
}
#feature-article .feature-article-content__food {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: 3rem 0 0;
}
#feature-article .feature-article-content__food:last-child {
  margin-top: 3rem;
}
#feature-article .feature-article-content__food .pic {
  margin: 2rem auto 0;
}
#feature-article .feature-article-content__food .box span {
  display: inline-block;
  padding: 1rem;
  background: #5fb483;
  border-radius: 2rem;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1 !important;
  text-align: center;
  white-space: pre;
}
#feature-article .feature-article-content__food .box .point {
  padding: 0.5rem 1rem;
  background: #63a7dc;
  color: #fff;
}
#feature-article .feature-article-content__food__button {
  margin: 5rem 0;
}
#feature-article .feature-article-content__voice {
  padding: 1.5rem;
  background: #eef6e5;
  border-radius: 1rem;
}
#feature-article .feature-article-content__voice .pic {
  width: 10rem;
  margin: 3rem 0 0 auto;
  text-align: center;
}
#feature-article .feature-article-content__uchinoko .heading {
  margin: 0 0 4.1724617524vw;
  color: #e73d7b;
  font-size: 5.5632823366vw;
  text-align: center;
}
#feature-article .feature-article-content__uchinoko .pic {
  width: 41.7246175243vw;
}
#feature-article .feature-article-content__uchinoko .feature-article-content__flex {
  display: flex;
  gap: 2rem;
  margin: 0 0 3rem;
}
#feature-article .feature-article-content__uchinoko figure {
  margin: 0 0 2rem;
}
#feature-article .feature-article-content__uchinoko figcaption {
  padding: 0.5rem;
  margin: 0 0 1rem;
  color: #fff;
  line-height: 1.3 !important;
  text-align: center;
}
#feature-article .feature-article-content__uchinoko .orange {
  background: #f39800;
}
#feature-article .feature-article-content__uchinoko .green {
  background: #094;
}
#feature-article .feature-article-content__uchinoko .blue {
  background: #63a7dc;
}
@media screen and (min-width: 720px) {
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
  #feature-article {
    --fz: 16px;
  }
  #feature-article section {
    margin-top: 10rem;
  }
  #feature-article .link {
    max-width: 46.5rem;
    margin: 2rem auto 0 auto;
  }
  #feature-article .feature-article-mv__wrap {
    max-width: 80rem;
    margin: 0 auto;
  }
  #feature-article .feature-article-mv__meta {
    padding: 0 3rem;
  }
  #feature-article .feature-article-mv__block {
    padding: 0 3rem;
  }
  #feature-article .feature-article-mv__heading {
    width: 14.4rem;
  }
  #feature-article .feature-article-mv__subheading {
    margin: 3rem 0 0;
    font-size: 3rem;
    line-height: 1.5 !important;
  }
  #feature-article .feature-article-mv__summary {
    margin-top: 3rem;
    color: #333;
    font-size: 2rem;
    font-weight: 500;
    text-align: justify;
  }
  #feature-article .feature-article-mv__img {
    width: 60rem;
  }
  #feature-article .feature-article-content__heading {
    font-size: 2.5rem;
  }
  #feature-article .feature-article-content__flex {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }
  #feature-article .feature-article-content__2col {
    align-items: center;
  }
  #feature-article .feature-article-content__2col:last-child {
    margin-top: 0;
  }
  #feature-article .feature-article-content__falf {
    width: 50%;
  }
  #feature-article .feature-article-content__bigheading {
    padding: 2rem;
    margin-bottom: 3rem;
    border-top: dotted 0.5rem #d7e9c1;
    border-bottom: dotted 0.5rem #d7e9c1;
    color: #63a7dc;
    font-size: 3rem;
    text-align: center;
  }
  #feature-article .feature-article-content__bigheading span {
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 2rem 0 0;
    font-size: 2rem;
  }
  #feature-article .feature-article-content__table {
    display: flex;
    margin-bottom: 5rem;
  }
  #feature-article .feature-article-content__table__group tr {
    display: flex;
  }
  #feature-article .feature-article-content__table__group--baby {
    flex: 0 0 75%;
    border-right: dashed 0.1rem #727171;
  }
  #feature-article .feature-article-content__table__group--kids {
    flex: 1 1 25%;
  }
  #feature-article .feature-article-content__table__group--kids .illust {
    bottom: -4rem !important;
  }
  #feature-article .feature-article-content__table th {
    padding: 0 0.5rem;
  }
  #feature-article .feature-article-content__table th span {
    display: block;
    min-height: 7rem;
    padding: 1.5rem;
    background: #8bb9e4;
    border-radius: 4rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1 !important;
    text-align: center;
  }
  #feature-article .feature-article-content__table td {
    padding: 3rem 1.5rem 15rem;
    border-right: dashed 0.1rem #727171;
  }
  #feature-article .feature-article-content__table td .illust {
    margin-top: 0;
    margin-left: -6.5rem;
    margin-bottom: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
  }
  #feature-article .feature-article-content__table td .ttl {
    display: block;
    padding: 0.5rem;
    background: #f6f9e9;
    border-radius: 3rem;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
  }
  #feature-article .feature-article-content__box {
    width: 48%;
  }
  #feature-article .feature-article-content__box__head {
    font-size: 2.2rem;
  }
  #feature-article .feature-article-content__inner {
    padding: 4rem;
  }
  #feature-article .feature-article-content__block {
    display: flex;
    justify-content: space-between;
  }
  #feature-article .feature-article-content__block p {
    width: calc(100% - 22rem);
  }
  #feature-article .feature-article-content__block__illust {
    margin: 0;
  }
  #feature-article .feature-article-content__3col {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
  #feature-article .feature-article-content__3col__box {
    width: 32%;
    margin-top: 0;
  }
  #feature-article .feature-article-content__3col__fukidashi {
    margin: 0 0 11rem;
  }
  #feature-article .feature-article-content__faq {
    margin: 0 0 2rem;
  }
  #feature-article .feature-article-content__step {
    min-height: 17rem;
  }
  #feature-article .feature-article-content__border .illust {
    width: 7rem;
    top: -3rem;
    right: 2rem;
  }
  #feature-article .feature-article-content__food {
    justify-content: space-between;
    gap: 3rem;
    margin: 0;
  }
  #feature-article .feature-article-content__food:last-child {
    flex-direction: row-reverse;
  }
  #feature-article .feature-article-content__food .pic {
    width: 30rem;
    margin: 0;
  }
  #feature-article .feature-article-content__food .box {
    width: calc(100% - 33rem);
  }
  #feature-article .feature-article-content__uchinoko .heading {
    font-size: 3rem !important;
  }
  #feature-article .feature-article-content__uchinoko .pic {
    width: auto;
  }
}
@media screen and (min-width: 720px) and (max-width: 1000px) {
  #feature-article {
    --fz: 16px;
  }
}