@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: 30px 15px 0;
  position: absolute;
}
#feature-article .feature-article-mv__block {
  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: 10px 0 0;
  color: #df5546;
  font-size: 2rem;
}
#feature-article .feature-article-mv__caption {
  padding-top: 10px;
  font-size: 1.2rem;
  line-height: 1.5 !important;
}
#feature-article .feature-article-mv__summary {
  padding: 10px 0 0;
}
#feature-article .feature-article-mv__flex {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 20px;
}
#feature-article .feature-article {
  /** content **/
}
#feature-article .feature-article-content__heading {
  margin-bottom: 20px;
  color: #ec7065;
  font-size: 2.5rem;
}
#feature-article .feature-article-content__heading span {
  padding: 0 0.08em;
  background: linear-gradient(transparent 70%, #fff176 70%);
  font-size: 2.5rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#feature-article .feature-article-content__flex {
  margin-top: 20px;
}
#feature-article .feature-article-content__halfflex {
  margin-top: 20px;
}
#feature-article .feature-article-content__spflex {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
#feature-article .feature-article-content__spflex .feature-article-content__col {
  width: 50%;
}
#feature-article .feature-article-content__flex4col {
  margin-top: 20px;
}
#feature-article .feature-article-content__flex4col .feature-article-content__col {
  margin-bottom: 10px;
}
#feature-article .feature-article-content__caption {
  padding-top: 10px;
  font-size: 1.2rem;
  line-height: 1.5 !important;
}
#feature-article .feature-article-content__col {
  width: 100%;
  margin-bottom: 30px;
}
#feature-article .feature-article-content__subheading {
  margin: 0 0 20px;
  background-color: #f1e1d6;
  color: #ec7065;
}
#feature-article .feature-article-content__lead span {
  color: #1f5ba3;
  font-size: 1.8rem;
}
#feature-article .feature-article-content__lead small {
  font-size: 1.2rem;
}
#feature-article .feature-article-content__lead strong {
  font-size: 1.8rem;
  font-weight: bold;
}
#feature-article .feature-article-content__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  text-align: center;
}
#feature-article .feature-article-content__list li {
  display: inline-block;
  padding: 20px;
  border: solid 3px #95c7ec;
  border-radius: 10px;
  color: #11a3de;
}
#feature-article .feature-article-content__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 20px 0;
  text-align: center;
}
#feature-article .feature-article-content__box li {
  display: inline-block;
  padding: 3px 20px;
  border: solid 3px #95c7ec;
  border-radius: 30px;
  color: #11a3de;
}
#feature-article .feature-article-content__2col {
  width: 100%;
}
#feature-article .feature-article-content__2col + .feature-article-content__2col {
  margin-top: 20px;
}
#feature-article .feature-article-content__ttl {
  display: block;
  width: 100%;
  margin-top: 100px;
  background-color: #f08300;
  border-radius: 6px;
  color: #fff;
  font-size: 2rem;
  position: relative;
}
#feature-article .feature-article-content__ttl span {
  display: block;
  width: 135px;
  position: absolute;
  top: -57px;
  left: 20px;
}
#feature-article .feature-article {
  /** gaza **/
}
#feature-article .feature-article-gaza__tomato {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ec7065;
  border-radius: 5px;
  color: #fff;
}
#feature-article .feature-article-gaza__box {
  padding: 20px;
  background-color: #fdf8e8;
  border-radius: 6px;
}
#feature-article .feature-article-gaza__box p {
  padding-bottom: 20px;
}
#feature-article .feature-article-gaza__block {
  padding: 0 20px 20px;
  border: solid 1px #ec7065;
  border-radius: 6px;
}
#feature-article .feature-article-gaza__subheading {
  padding: 0 0 10px;
  margin: 0;
  background-color: inherit;
  color: #ec7065;
  font-size: 2rem;
}
#feature-article .feature-article-gaza__prof {
  width: 200px;
  margin: 0 auto 20px;
}
#feature-article .feature-article {
  /** staff **/
}
#feature-article .feature-article-staff__col {
  margin-top: 5.5632823366vw;
}
#feature-article .feature-article-staff__img {
  text-align: center;
}
#feature-article .feature-article-staff__img img {
  height: 33.3796940195vw;
}
#feature-article .feature-article-staff__meta {
  flex: 1;
  padding-left: 2.0862308762vw;
  margin-top: 2.7816411683vw;
}
#feature-article .feature-article-staff__lead {
  color: #333;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75 !important;
  letter-spacing: 0em;
  text-align: center;
}
#feature-article .feature-article-staff__lead strong {
  color: #333;
  font-size: 4.1724617524vw;
  font-weight: 400;
  line-height: 1.75 !important;
  letter-spacing: 0em;
}
@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: 100px 30px 0;
  }
  #feature-article .feature-article-mv__heading {
    width: 14.4rem;
  }
  #feature-article .feature-article-mv__subheading {
    margin: 30px 0 0;
    font-size: 3rem;
  }
  #feature-article .feature-article-content__heading {
    font-size: 3rem;
  }
  #feature-article .feature-article-content__heading span {
    font-size: 3rem;
  }
  #feature-article .feature-article-content__flex {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  #feature-article .feature-article-content__halfflex {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  #feature-article .feature-article-content__spflex {
    gap: 30px;
  }
  #feature-article .feature-article-content__flex4col {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  #feature-article .feature-article-content__col {
    width: 50%;
  }
  #feature-article .feature-article-content__box {
    gap: 10px;
  }
  #feature-article .feature-article-content__box li {
    padding: 5px 30px;
  }
  #feature-article .feature-article-content__2col {
    width: 50%;
  }
  #feature-article .feature-article-content__2col + .feature-article-content__2col {
    margin-top: 0;
  }
  #feature-article .feature-article-content__ttl {
    margin-top: 60px;
    font-size: 2.5rem;
  }
  #feature-article .feature-article-staff__col {
    display: flex;
    gap: 30px;
    margin-top: 0;
  }
  #feature-article .feature-article-staff__img img {
    height: 16rem;
  }
  #feature-article .feature-article-staff__meta {
    flex: 1;
    padding-left: 1rem;
    margin-top: 0;
  }
  #feature-article .feature-article-staff__lead {
    color: #333;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.75 !important;
    letter-spacing: 0em;
    text-align: justify;
  }
  #feature-article .feature-article-staff__lead strong {
    color: #333;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.75 !important;
    letter-spacing: 0em;
  }
}
@media screen and (min-width: 720px) and (max-width: 1000px) {
  #feature-article {
    --fz: 16px;
  }
}