@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("https://use.typekit.net/gsk5puj.css");

/* -----------------------------------------------
common
----------------------------------------------- */
:root {
  --main-color: #35B558;
  --light-color: #F2F8F5;
  --font-futura: "futura-pt", sans-serif;
}
html,
body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
body {
  color: #3B5246;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
}
.inner__wrap {
  margin-inline: auto;
}
.font__futura {
  font-family: var(--font-futura);
}
video {
  width: 100%;
}
p {
  line-height: 2.25;
}

@media (max-width: 767px) {
  :root {
    --vw: calc(100vw / 375); /* ●●● = 基準値、vwの計算に使用：calc(var(--vw) * px) */
  }
  .pc__only {
    display: none;
  }
  body {
    font-size: 14px;
  }
  .inner__wrap {
    width: 92%;
  }
}

@media (min-width: 768px) {
  .sp__only {
    display: none;
  }
  body {
    font-size: 16px;
  }
  .inner__wrap {
    width: 100%;
    max-width: calc(1040px + 40px);
    padding: 0 20px;
  }
}

@media (any-hover: hover) {
  a,
  button {
    transition: all .3s;
    cursor: pointer;
  }
  a:hover,
  button:hover {
    opacity: 0.8;
  }
}

/* -----------------------------------------------
header
----------------------------------------------- */
header {
  background-color: #fff;
  position: fixed;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
}
.header__column {
  display: flex;
  align-items: center;
}

.header__nav__contact a {
  color: #fff;
  background-color: var(--main-color);
  border-radius: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__nav__child {
  transition: all 0.3s;
}
.header__nav__child a span {
  font-weight: normal;
  position: relative;
  padding-right: 1em;
}
.header__nav__child a span::after {
  content: '';
  width: 6px;
  aspect-ratio: 1/1;
  border-top: 1px solid var(--main-color);
  border-right: 1px solid var(--main-color);
  position: absolute;
  top: calc(50% + 1px);
  right: 0;
  translate: 0 -50%;
  rotate: 45deg;
}

@media (max-width: 767px) {
  header {
    width: 94.44%;
    top: 10px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    height: 55px;
  }
  .header__column {
    height: 100%;
  }
  .header__logo {
    width: 160px;
  }
  
  /* ハンバーガー */
  /* header {
    position: relative;
    width: 100%;
    height: 75px;
  } */
  /* html:has(body.menu__open),
  body.menu__open {
    height: 100%;
    overflow: hidden;
  } */
  #nav__toggle {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 10;
    background: none;
    border: none;
    padding: 0;
  }
  #nav__toggle span {
    width: 25px;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    background: var(--main-color);
    position: absolute;
    transition: transform .6s ease-in-out, top .5s ease;
  }
  #nav__toggle span:nth-child(1) {
    top: 18px;
  }
  #nav__toggle span:nth-child(2) {
    top: 26px;
  }
  #nav__toggle span:nth-child(3) {
    top: 34px;
  }
  body.menu__open #nav__toggle span:nth-child(1) {
    top: 26px;
    transform: translateX(-50%) rotate(45deg);
  }
  body.menu__open #nav__toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  body.menu__open #nav__toggle span:nth-child(3) {
    top: 26px;
    transform: translateX(-50%) rotate(-45deg);
  }
  .header__nav__wrap {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transition: all 0.5s;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    top: -10px;
    left: 0;
    margin: 0 calc(50% - 50vw);
    padding: 92px 4% 150px;
    overflow-y: scroll;
    z-index: 9;
  }
  body.menu__open .header__nav__wrap {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  .header__nav__wrap ul {
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .header__nav__wrap li + li {
    margin-top: 0.4em;
  }
  .header__nav__wrap li a.header__nav__parent {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 0.3em;
    padding: 0.5em;
  }
  .header__nav__wrap li.child__open a.header__nav__parent {
    color: var(--main-color);
  }
  .header__nav__wrap li a.header__nav__parent i {
    position: relative;
    display: block;
    width: 16px;
    aspect-ratio: 1/1;
    background-color: var(--main-color);
    border-radius: 50%;
  }
  .header__nav__wrap li a.header__nav__parent i::before {
    content: '';
    width: 7px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .header__nav__wrap li a.header__nav__parent i::after {
    content: '';
    width: 1px;
    height: 7px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .header__nav__wrap li.child__open a.header__nav__parent i::after {
    width: 0;
  }
  .header__nav__wrap li.header__nav__contact {
    margin-top: 34px;
  }
  .header__nav__contact a {
    width: 240px;
    height: 50px;
    margin-inline: auto;
  }
  .header__nav__child {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 38px;
  }
  .child__open .header__nav__child {
    display: flex;
  }
  .header__nav__child a {
    padding: 0.2em 0.5em;
  }
  .header__nav__child a + a {
    margin-top: 0.3em;
  }
}

@media (min-width: 768px) {
  header {
    width: 94.44%;
    height: 70px;
    top: 20px;
    padding-left: 30px;
    padding-right: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  }
  .header__column {
    height: 100%;
    justify-content: space-between;
    gap: 0 30px;
  }
  .header__logo {
    width: max(17.03vw, 154px);
    max-width: 184px;
  }
  .header__nav__wrap {
    height: 100%;
  }
  .header__nav__wrap ul {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0 1em;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .header__nav__wrap li {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }
  .header__nav__wrap li a.header__nav__parent {
    padding: 0.5em;
  }
  .header__nav__wrap li:hover a.header__nav__parent {
    color: var(--main-color);
  }
  .header__nav__contact {
    margin-left: 10px;
  }
  .header__nav__contact a {
    width: 140px;
    height: 50px;
  }
  .header__nav__child {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    padding: 22px calc(25px - 1em) 20px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  }
  .header__nav__wrap li:hover .header__nav__child {
    opacity: 1;
    pointer-events: inherit;
  }
  .header__nav__child a {
    padding: 0.2em 0.5em;
  }
  .header__nav__child a + a {
    margin-top: 0.3em;
  }
}

@media (min-width: 768px) and (max-width: 850px) {
  .header__nav__wrap ul {
    font-size: 1.44vw;
  }
}

@media (any-hover: hover) {
  .header__nav__wrap li a.header__nav__parent:hover {
    opacity: 1;
  }
}

/* -----------------------------------------------
contact__wrap
----------------------------------------------- */
.contact__content__wrap {
  background-color: var(--light-color);
}
.contact__tel a {
  color: var(--main-color);
  font-weight: bold;
}

@media (max-width: 767px) {
  .contact__description {
    margin-bottom: 50px;
  }
  .contact__content__wrap {
    border-radius: 20px;
    padding: 30px 10px;
    text-align: center;
  }
  .contact__tel {
    letter-spacing: 0.05em;
  }
  .contact__tel a {
    font-size: 28px;
  }
  .contact__form.link__btn {
    margin-top: 20px;
  }
  .contact__form.link__btn a {
    width: 300px;
    max-width: 100%;
    height: 50px;
    padding-left: 50px;
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .contact__description {
    margin-bottom: 80px;
  }
  .contact__content__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px 60px;
    border-radius: 50vh;
    padding: 50px 10px;
  }
  .contact__tel {
    letter-spacing: 0.05em;
  }
  .contact__tel a {
    font-size: 42px;
  }
  .contact__form.link__btn a {
    width: 440px;
    height: 90px;
    padding-left: 50px;
    font-size: 18px;
  }
}

/* -----------------------------------------------
footer
----------------------------------------------- */
footer {
  background-color: var(--light-color);
}

@media (max-width: 767px) {
  footer {
    padding: 38px 0 18px;
  }
  .footer__description {
    font-size: 12px;
    margin-bottom: 30px;
  }
  .footer__column {
    margin-bottom: 30px;
  }
  .footer__column .logo__wrap {
    margin-bottom: 30px;
  }
  .footer__column .logo__wrap .logo {
    width: 180px;
    margin-bottom: 8px;
  }
  .footer__column .logo__wrap p {
    font-size: 14px;
    line-height: 1.71;
  }
  .footer__nav__wrap ul {
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .footer__nav__wrap li + li {
    margin-top: 0.5em;
  }
  .footer__nav__wrap li a {
    padding: 0.5em 0;
  }
  .copyright small {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  footer {
    padding: 28px 0 18px;
  }
  .footer__description {
    margin-bottom: 60px;
  }
  .footer__column {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 10px;
  }
  .footer__column .logo__wrap .logo {
    width: 214px;
    margin-bottom: 8px;
  }
  .footer__column .logo__wrap p {
    font-size: 14px;
    line-height: 1.71;
  }
  .footer__nav__wrap ul {
    display: flex;
    gap: 0 1em;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .footer__nav__wrap li a {
    padding: 0.5em;
  }
  .copyright small {
    font-size: 12px;
  }
}

/* -----------------------------------------------
共通
----------------------------------------------- */
.text__link {
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

/* text-align */
.text__center {
  text-align: center;
}
.text__right {
  text-align: right;
}

/* border */
.border__bottom {
  position: relative;
}
.border__bottom::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #CFD9D4;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}
.border__bottom__inner {
  position: relative;
}
.border__bottom__inner::after {
  content: '';
  height: 1px;
  background-color: #CFD9D4;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}

@media (max-width: 767px) {
  .border__bottom__inner::after {
    width: 92%;
  }
}

@media (min-width: 768px) {
  .border__bottom__inner::after {
    width: calc(100% - 40px);
    max-width: 1040px;
  }
}

/* background */
.bg__w__half__left {
  position: relative;
}
.bg__w__half__left::before {
  content: '';
  height: 100%;
  background-color: var(--light-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.bg__w__half__right {
  position: relative;
}
.bg__w__half__right::before {
  content: '';
  height: 100%;
  background-color: var(--light-color);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.bg__w__full {
  position: relative;
}
.bg__w__full::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--light-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.bg__w__full__h__half {
  position: relative;
}
.bg__w__full__h__half::before {
  content: '';
  width: 100vw;
  background-color: var(--light-color);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
}

@media (max-width: 767px) {
  .bg__w__half__left::before {
    width: calc(var(--vw) * 320);
    border-radius: 0 calc(var(--vw) * 20) calc(var(--vw) * 20) 0;
  }
  .bg__w__half__right::before {
    width: calc(var(--vw) * 320);
    border-radius: calc(var(--vw) * 20) 0 0 calc(var(--vw) * 20);
  }
  .bg__w__full__h__half::before {
    height: 83.02%;
  }
}

@media (min-width: 768px) {
  .bg__w__half__left::before {
    width: 66.66vw;
    border-radius: 0 2.85vw 2.85vw 0;
  }
  .bg__w__half__right::before {
    width: 66.66vw;
    border-radius: 2.85vw 0 0 2.85vw;
  }
  .bg__w__full__h__half::before {
    height: 83.02%;
  }
}

/* sec__heading */
.sec__heading {
  font-weight: bold;
}

@media (max-width: 767px) {
  .sec__heading {
    font-size: 26px;
    letter-spacing: 0.05em;
  }
}

@media (min-width: 768px) {
  .sec__heading {
    font-size: 36px;
    letter-spacing: 0.05em;
  }
}

/* sub__sec__heading */
.sub__sec__heading {
  font-weight: bold;
}

@media (max-width: 767px) {
  .sub__sec__heading {
    font-size: 22px;
    line-height: 1.75;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
  }
}

@media (min-width: 768px) {
  .sub__sec__heading {
    font-size: 32px;
    line-height: 1.75;
    letter-spacing: 0.05em;
    margin-bottom: 120px;
  }
}

/* u__deco */
.u__deco {
  position: relative;
}
.u__deco::after {
  content: '';
  background-image: url(../images/common/leaf.svg);
  background-position: left center;
  background-repeat: space no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}
.u__deco__white::after {
  content: '';
  background-image: url(../images/common/leaf_white.svg);
}

@media (max-width: 767px) {
  .u__deco {
    padding-bottom: 32px;
    margin-bottom: 40px;
  }
  .u__deco::after {
    width: 44px;
    height: 12px;
    background-size: 12px;
  }
}

@media (min-width: 768px) {
  .u__deco {
    padding-bottom: 52px;
    margin-bottom: 80px;
  }
  .u__deco::after {
    width: 54px;
    height: 14px;
    background-size: 14px;
  }
}

/* l__deco */
.l__deco {
  position: relative;
}
.l__deco::after {
  content: '';
  aspect-ratio: 1/1;
  background: url(../images/common/leaf.svg) center / contain no-repeat;
  position: absolute;
  left: 0;
  translate: 0 -50%;
}

@media (max-width: 767px) {
  .l__deco {
    padding-left: 28px;
  }
  .l__deco::after {
    width: 15px;
    top: calc(0.375em + 0.5em + 0.1em);
  }
}

@media (min-width: 768px) {
  .l__deco {
    padding-left: 38px;
  }
  .l__deco::after {
    width: 18px;
    top: calc(0.375em + 0.5em + 0.1em);
  }
}

/* link__btn */
.link__btn a {
  background-color: var(--main-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  border-radius: 50vh;
  position: relative;
}
.link__btn a::after {
  content: '';
  aspect-ratio: 8/13;
  background: url(../images/common/link_arrow_white.svg) center / contain no-repeat;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

@media (max-width: 767px) {
  .link__btn a {
    min-width: 200px;
    min-height: 50px;
    padding: 10px 50px 10px 30px;
    letter-spacing: 0.05em;
  }
  .link__btn a::after {
    width: 8px;
    right: 35px;
  }
  .link__btn__s a {
    min-width: 110px;
    min-height: 40px;
    padding: 10px 20px 10px 15px;
    font-size: 12px;
  }
  .link__btn__s a::after {
    width: 6px;
    right: 14px;
  }
}

@media (min-width: 768px) {
  .link__btn a {
    min-width: 230px;
    min-height: 70px;
    padding: 10px 50px 10px 30px;
    letter-spacing: 0.05em;
  }
  .link__btn a::after {
    width: 8px;
    right: 35px;
  }
  .link__btn__s a {
    min-width: 110px;
    min-height: 40px;
    padding: 10px 20px 10px 15px;
    font-size: 12px;
  }
  .link__btn__s a::after {
    width: 6px;
    right: 14px;
  }
}

/* 余白 */
@media (max-width: 767px) {
  .pt__s {
    padding-top: 50px;
  }
  .pt__r {
    padding-top: 60px;
  }
  .pt__l {
    padding-top: 120px;
  }

  .pb__s {
    padding-bottom: 50px;
  }
  .pb__r {
    padding-bottom: 80px;
  }
  .pb__l {
    padding-bottom: 120px;
  }

  .mb__s {
    margin-bottom: 50px;
  }
  .mb__r {
    margin-bottom: 60px;
  }
  .mb__l {
    margin-bottom: 120px;
  }

  .mt__r {
    margin-top: 60px;
  }
}

@media (min-width: 768px) {
  .pt__s {
    padding-top: 80px;
  }
  .pt__r {
    padding-top: 120px;
  }
  .pt__l {
    padding-top: 240px;
  }

  .pb__s {
    padding-bottom: 80px;
  }
  .pb__r {
    padding-bottom: 180px;
  }
  .pb__l {
    padding-bottom: 240px;
  }

  .mb__s {
    margin-bottom: 80px;
  }
  .mb__r {
    margin-bottom: 120px;
  }
  .mb__l {
    margin-bottom: 240px;
  }

  .mt__r {
    margin-top: 120px;
  }
}

/* text__img__content */
.text__img__content ul li {
  line-height: 2.25;
  text-indent: -1.3em;
  padding-left: 1.3em;
}

@media (max-width: 767px) {
  .text__img__content {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px 0;
  }
  .text__img__content__text {
    display: flex;
    flex-direction: column;
    gap: 40px 0;
  }
  .text__img__content__text .link__btn {
    text-align: center;
  }
  .text__img__content__img img {
    border-radius: 5px;
  }
}

@media (min-width: 768px) {
  .text__img__content {
    display: flex;
    gap: 0 60px;
  }
  .text__img__content.rev {
    flex-direction: row-reverse;
  }
  .text__img__content__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  }
  .text__img__content__img {
    width: 42.31%;
  }
  .text__img__content__img img {
    border-radius: 10px;
  }
}

/* page__title__wrap */
.page__title__wrap {
  position: relative;
  z-index: 1;
  background-color: #fff;
  display: grid;
}
.page__title__wrap::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--light-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.breadcrumb {
  grid-area: breadcrumb;
  position: relative;
}
.breadcrumb::before {
  content: '';
  aspect-ratio: 236/97;
  background: url(../images/common/page_title_deco.png) center / contain no-repeat;
  position: absolute;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb li + li::before {
  content: '-';
  display: inline-block;
  margin: 0 0.5em;
}
.breadcrumb li span {
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
}
.page__title__text {
  grid-area: page__title__text;
  position: relative;
}
.page__title__text h1 {
  font-weight: bold;
}
.page__title__img {
  grid-area: page__title__img;
}

@media (max-width: 767px) {
  .page__title__wrap {
    padding: 80px 2.78% 50px;
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto;
    gap: 20px 0;
    grid-template-areas: 
    "breadcrumb"
    "page__title__text"
    "page__title__img"; 
  }
  .page__title__wrap::before {
    border-radius: 0 0 0 calc(var(--vw) * 50);
  }
  .breadcrumb ol {
    font-size: 12px;
  }
  .breadcrumb::before {
    width: 100px;
    top: calc(100% + 15px);
    left: -4vw;
  }
  .page__title__text {
    margin-top: 40px;
  }
  .page__title__text h1 {
    font-size: 32px;
    letter-spacing: 0.05em;
  }
  .page__title__img img {
    border-radius: 5px;
  }
}

@media (min-width: 768px) {
  .page__title__wrap {
    padding: 110px 2.78% 20px;
    grid-template-columns: 1fr 47.06%; 
    grid-template-rows: auto 1fr;
    gap: 20px 20px;
    grid-template-areas: 
    "breadcrumb page__title__img"
    "page__title__text page__title__img";
    justify-content: center;
    min-height: 490px;
  }
  .page__title__wrap::before {
    border-radius: 0 0 0 min(8.33vw, 120px);
  }
  .breadcrumb ol {
    font-size: 14px;
  }
  .breadcrumb::before {
    width: min(16.39vw, 236px);
    top: calc(100% + 20px);
    left: -2.78vw;
  }
  .page__title__text {
    width: 100%;
    max-width: calc(560px - 20px);
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-bottom: min(2.78vw, 40px);
  }
  .page__title__text h1 {
    font-size: 48px;
    letter-spacing: 0.05em;
  }
  .page__title__img {
    max-width: 640px;
  }
  .page__title__img img {
    border-radius: 10px;
  }
}

/* dl__content */
.dl__content dt {
  font-weight: bold;
}
.dl__content div {
  border-bottom: 1px solid #CFD9D4;
}
.dl__content div:first-child {
  border-top: 1px solid #CFD9D4;
}

@media (max-width: 767px) {
  .dl__content div {
    display: flex;
    flex-direction: column;
    gap: 10px 0px;
    padding: 16px 0px;
    line-height: 2;
  }
  /* .dl__content dt {
    width: 130px;
    padding-bottom: 1em;
  }
  .dl__content dd {
    flex: 1;
  } */
}

@media (min-width: 768px) {
  .dl__content div {
    display: flex;
    padding: 22px 0;
    line-height: 2.5;
  }
  .dl__content dt {
    width: 223px;
    padding-right: 1em;
  }
  .dl__content dd {
    flex: 1;
  }
}

/* flow__content */
.flow__content {
  position: relative;
}
.flow__content::before {
  content: '';
  width: 1px;
  background-color: #CFD9D4;
  position: absolute;
  top: 0.5em;
}
.flow__content div {
  display: flex;
}
.flow__content dt {
  font-weight: bold;
}
.flow__content dd {
  position: relative;
}
.flow__content dd::before {
  content: '';
  aspect-ratio: 1/1;
  background-color: var(--main-color);
  border-radius: 50%;
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 10px;
}

@media (max-width: 767px) {
  .flow__content::before {
    height: calc(100% + 16px - 0.5em);
    left: calc(105px + 5px - 1px);
  }
  .flow__content div + div {
    margin-top: 40px;
  }
  .flow__content dt {
    width: 104px;
    padding-right: 1em;
  }
  .flow__content dd {
    flex: 1;
    padding-left: 30px;
  }
}

@media (min-width: 768px) {
  .flow__content::before {
    height: calc(100% + 26px - 0.5em);
    left: calc(124px + 5px - 1px);
  }
  .flow__content div + div {
    margin-top: 60px;
  }
  .flow__content dt {
    width: 124px;
    padding-right: 1em;
  }
  .flow__content dd {
    flex: 1;
    padding-left: 40px;
  }
}

/* text__before */
.text__before__circle {
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.text__before__circle::before {
  content: '● ';
  color: var(--main-color)
}

@media (max-width: 767px) {
  .text__before__circle + .text__before__circle {
    margin-top: 1.5em;
  }
}

@media (min-width: 768px) {
  .text__before__circle + .text__before__circle {
    margin-top: 2em;
  }
}

/* -----------------------------------------------
pickup__wrap
----------------------------------------------- */
.pickup__wrap {
  border: 1px solid var(--main-color);
}
.pickup__wrap h2 {
  color: var(--main-color);
  text-align: center;
}
.pickup__item h3 {
  background-color: #EFF8F2;
  text-align: center;
}

@media (max-width: 767px) {
  .pickup__wrap {
    border-radius: 20px;
    padding: 40px 5.77% 60px;
  }
  .pickup__wrap h2 {
    font-size: 22px;
    margin-bottom: 50px;
  }
  .pickup__item {
    display: flex;
    flex-direction: column;
    gap: 15px 0;
  }
  .pickup__item + .pickup__item {
    margin-top: 50px;
  }
  .pickup__item h3 {
    padding: 10px 10px;
    border-radius: 5px;
    font-size: 18px;
  }
  .pickup__item .link__btn {
    margin-top: auto;
  }
}

@media (min-width: 768px) {
  .pickup__wrap {
    border-radius: 30px;
    padding: 60px 5.77% 80px;
  }
  .pickup__wrap h2 {
    font-size: 28px;
    margin-bottom: 60px;
  }
  .pickup__item {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
  }
  .pickup__item:not(.pickup__column__item) + .pickup__item:not(.pickup__column__item) {
    margin-top: 60px;
  }
  .pickup__item h3 {
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 20px;
  }
  .pickup__column {
    display: flex;
    justify-content: space-between;
  }
  .pickup__column__item {
    width: 46.74%;
  }
  .pickup__column__item .link__btn {
    margin-top: auto;
  }
}

/* -----------------------------------------------
tab
----------------------------------------------- */
.tab__btn__list {
  display: grid;   
  grid-template-columns: repeat(2, 1fr);
}
.tab__btn__list button {
  all: unset;
  width: 100%;
  background-color: var(--light-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab__btn__list button.active {
  background-color: var(--main-color);
  color: #fff;
}
.tab__content:not(.active) {
  display: none;
}

@media (max-width: 767px) {
  .tab__btn__list {
    border-bottom: 2px solid var(--main-color);
  }
  .tab__btn__list button {
    font-size: 16px;
    min-height: 50px;
    border-radius: 5px 5px 0 0;
  }
}

@media (min-width: 768px) {
  .tab__btn__list {
    border-bottom: 2px solid var(--main-color);
  }
  .tab__btn__list button {
    font-size: 20px;
    min-height: 80px;
    border-radius: 10px 10px 0 0;
  }
}

/* -----------------------------------------------
news__wrap
----------------------------------------------- */
.news__list__wrap li {
  border-bottom: 1px solid #CFD9D4;
}
.news__list__wrap li:first-child {
  border-top: 1px solid #CFD9D4;
}
.news__list__wrap time {
  font-weight: bold;
}
.news__list__wrap strong {
  font-weight: normal;
}

@media (max-width: 767px) {
  .news__list__wrap {
    margin-bottom: 80px;
    letter-spacing: 0.05em;
  }
  .news__list__wrap a {
    display: flex;
    flex-direction: column;
    gap: 5px 0;
    padding: 15px 0;
  }
}

@media (min-width: 768px) {
  .news__list__wrap {
    margin-bottom: 120px;
    letter-spacing: 0.05em;
  }
  .news__list__wrap a {
    display: flex;
    gap: 0 40px;
    padding: 30px 0;
  }
  .news__list__wrap strong {
    flex: 1;
  }
}