@charset "utf-8";
/* *************************************
parts.css
再利用可能な汎用コンポーネント（Block）
CLAUDE.md準拠：外側余白を持たず、modifierはdata-*で表現
************************************* */

/* *************************************
heading（見出し共通）
************************************* */
h1,
h2,
h3,
h4 {
  /* font-family: var(--serif); */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* *************************************
hamburger
************************************* */
.hamburger {
  width: fit-content;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  @media (any-hover: hover) {
    &:hover {
      cursor: pointer;
    }
  }
}

.hamburger__btn {
  display: block;
  padding: calc(8 * var(--rem));
}

.hamburger__btn span {
  display: block;
  width: calc(32 * var(--rem));
  height: calc(2 * var(--rem));
  background-color: var(--black);
  transition: 0.3s ease;
}

.hamburger__btn span:nth-child(2) {
  margin-block: calc(8 * var(--rem));
}

.hamburger[data-state='open'] .hamburger__btn span:nth-child(1) {
  transform: translateY(calc(10 * var(--rem))) rotate(45deg);
}
.hamburger[data-state='open'] .hamburger__btn span:nth-child(2) {
  opacity: 0;
}
.hamburger[data-state='open'] .hamburger__btn span:nth-child(3) {
  transform: translateY(calc(-10 * var(--rem))) rotate(-45deg);
}

.hamburger__menu,
.hamburger__close {
  text-transform: uppercase;
  font-size: calc(12 * var(--rem));
  font-weight: bold;
  line-height: 1;
  color: var(--black);
}

.hamburger[data-state='open'] .hamburger__menu {
  display: none;
}

.hamburger__close {
  display: none;
}

.hamburger[data-state='open'] .hamburger__close {
  display: block;
}

/* *************************************
page-head
************************************* */
.page-head {
  padding: 0;
  height: calc(300 * var(--rem));
  position: relative;
}
.page-head__img {
  height: inherit;
}

.page-head__img img {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
  padding: calc(16 * var(--rem)) calc(80 * var(--rem));
  border-radius: var(--radius);
  @media (width < 768px) {
    padding: calc(16 * var(--rem)) calc(32 * var(--rem));
  }
}

.page-head__title-jp {
  font-size: calc(50 * var(--rem));
  @media (width < 768px) {
    font-weight: bold;
    font-size: calc(34 * var(--rem));
    white-space: nowrap;
  }
}

.page-head[data-page='news'] .page-head__title-jp {
  @media (width < 768px) {
    font-size: calc(35 * var(--rem));
  }
}

.page-head[data-page='privacy'] .page-head__title-jp {
  font-size: calc(45 * var(--rem));
  text-align: center;
  @media (width < 768px) {
    font-size: calc(25 * var(--rem));
  }
}

.page-head[data-page='privacy'] .page-head__title-jp {
  font-size: calc(45 * var(--rem));
  text-align: center;
  @media (width < 768px) {
    font-size: calc(25 * var(--rem));
  }
}

.page-head__title-jp::first-letter {
  color: var(--pink-deep);
}

.page-head__title-en {
  text-transform: uppercase;
  text-align: center;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

/* *************************************
btn1（既存：丸ボタン）
************************************* */
.btn1 {
  display: inline-block;
  background-color: var(--sub);
  min-width: calc(160 * var(--rem));
  padding: calc(10 * var(--rem));
  text-align: center;
  border-radius: 100vmax;
  color: var(--white);
}

/* *************************************
btn2（既存：矢印付き丸ボタン）
************************************* */
.btn2 {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: calc(8 * var(--rem));
  align-items: center;
  background-color: var(--sub);
  min-width: calc(160 * var(--rem));
  padding: calc(10 * var(--rem)) calc(16 * var(--rem));
  border-radius: 100vmax;
  color: var(--white);
}

.btn2::before {
  content: '';
}

.btn2::after {
  content: '';
  display: block;
  width: calc(16 * var(--rem));
  aspect-ratio: 1;
  background: url(../images/common/btn-arrow-w.svg) no-repeat center / contain;
  justify-self: end;
  transition: transform 0.3s ease;
  @media (any-hover: hover) {
    .btn2:hover & {
      transform: translateX(4px);
    }
  }
}

/* *************************************
btn（汎用ボタン：愛燦サイト用）
// data-variant で見た目バリエーションを切り替え
************************************* */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--rem));
  padding: calc(20 * var(--rem)) calc(34 * var(--rem));
  border-radius: 999px;
  font-size: calc(18 * var(--rem));
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: calc(56 * var(--rem));
  min-width: calc(300 * var(--rem));
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  cursor: pointer;
  background: transparent;
  color: inherit;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
    min-width: calc(250 * var(--rem));
  }
}

.btn[data-variant='primary'] {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 55%, var(--orange-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(180, 90, 110, 0.22);
  @media (any-hover: hover) {
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(180, 90, 110, 0.32);
    }
  }
}

.btn[data-variant='ghost'] {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink-3);
  @media (any-hover: hover) {
    &:hover {
      border-color: var(--pink-deep);
      color: var(--pink-deep);
    }
  }
}

.btn[data-size='sm'] {
  padding: calc(14 * var(--rem)) calc(24 * var(--rem));
  font-size: calc(15 * var(--rem));
  min-height: calc(68 * var(--rem));
}

.btn svg {
  margin-block-start: calc(4 * var(--rem));
}

/* *************************************
btn-tel（電話ボタン）
************************************* */
.btn-tel {
  background: var(--paper);
  color: var(--ink);
  padding: calc(12 * var(--rem)) calc(20 * var(--rem));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--rem));
  font-size: calc(15 * var(--rem));
  @media (width < 768px) {
    justify-content: center;
  }
}

.btn-tel svg {
  margin-block-start: calc(-4 * var(--rem));
  @media (width < 768px) {
  width: calc(25 * var(--rem));
  height: calc(25 * var(--rem));
  aspect-ratio: 1;
  object-fit: cover;
  margin-block-start: calc(4 * var(--rem));
  }
}

.btn-tel__text {
  font-size: calc(12 * var(--rem));
  text-align: center;
  line-height: 1;
  @media (width < 768px) {
  font-size: calc(14 * var(--rem));
  }
}

.btn-tel__num {
  font-family: var(--serif);
  font-size: calc(22 * var(--rem));
  letter-spacing: 0.04em;
  color: var(--pink-deep);
  line-height: 1;
  @media (width < 768px) {
  font-size: calc(35 * var(--rem));
  display: inline-block;
  margin-block-start: calc(4 * var(--rem));
  }
}

.btn-tel__hours {
  display: block;
  color: var(--ink-2);
  font-size: calc(12 * var(--rem));
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  @media (width < 768px) {
    display: block;
  }
}

/* *************************************
eyebrow（小見出し用ラベル）
************************************* */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--rem));
  font-family: var(--mono);
  font-size: calc(13 * var(--rem));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow::before {
  content: '';
  width: calc(24 * var(--rem));
  height: 1px;
  background: var(--pink-deep);
}

/* *************************************
sect-head（セクション見出し）
************************************* */
.sect-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--rem));
  text-align: center;
  margin-block-end: calc(64 * var(--rem));
}

.sect-head__ja-en {
  font-family: var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.18em;
  font-size: calc(12 * var(--rem));
  text-transform: uppercase;
  font-weight: 600;
}

.sect-head__title {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 600;
}

.sect-head__title::first-letter {
  color: var(--pink-deep);
}

.sect-head__title[data-section='pricing']::first-letter {
  color: var(--white);
}

.sect-head__title small {
  display: block;
  font-family: var(--mono);
  font-size: calc(13 * var(--rem));
  color: var(--ink-3);
  letter-spacing: 0.2em;
  margin-block-start: calc(16 * var(--rem));
  font-weight: 500;
}

.sect-head__lead {
  width: min(100%, calc(680 * var(--rem)));
  color: var(--ink-2);
  font-size: calc(20 * var(--rem));
  line-height: 2.05;
}

/* sect-head（反転：濃いピンク背景上） */
.sect-head[data-invert='true'] .sect-head__title,
.sect-head[data-invert='true'] .sect-head__title * {
  color: #fff;
}
.sect-head[data-invert='true'] .sect-head__title small {
  color: rgba(255, 255, 255, 0.7);
}
.sect-head[data-invert='true'] .sect-head__ja-en {
  color: rgba(255, 255, 255, 0.7);
}
.sect-head[data-invert='true'] .sect-head__lead {
  color: rgba(255, 255, 255, 0.88);
}
.sect-head[data-invert='true'] .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.sect-head[data-invert='true'] .eyebrow::before {
  background: rgba(255, 255, 255, 0.5);
}

.sect-head[data-color='white'] {
  span {
    color: var(--white);
  }

  .sect-head__title,
  .sect-head__title::first-letter {
    color: var(--white);
  }

  small {
    color: var(--white);
  }

  .sect-head__lead {
    color: var(--white);
  }
}

/* *************************************
skip-link（アクセシビリティ）
************************************* */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pink-deep);
  color: #fff;
  padding: calc(12 * var(--rem)) calc(20 * var(--rem));
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* *************************************
fix-btn
************************************* */
.fix-btn {
  position: fixed;
  display: block;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  z-index: 50;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  width: min(100%, calc(500 * var(--rem)));
  display: none;
  @media (width < 768px) {
    display: grid;
  }
}

.fix-btn a {
  padding-block: calc(12 * var(--rem)) calc(8 * var(--rem));
  padding-inline: calc(4 * var(--rem));
  border-radius: calc(8 * var(--rem)) calc(8 * var(--rem)) 0 0;
  height: 100%;
  text-align: center;
  line-height: 1;
  filter: drop-shadow(0px 5px 10px rgb(0 0 0 / 0.2));
  font-weight: bold;
}

.fix-btn__tel {
  font-family: var(--serif);
  font-size: calc(22 * var(--rem));
  letter-spacing: 0.04em;
  color: var(--pink-deep);
  background-color: var(--white);

  align-items: center;
  justify-content: center;
}

.fix-btn__tel p {
  font-size: calc(12 * var(--rem));
  width: 100%;
  margin-block-end: calc(4 * var(--rem));
}

.fix-btn__contact {
  font-size: calc(18 * var(--rem));
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 55%, var(--orange-deep) 100%);
  color: var(--white);
  display: grid;
  place-content: center;
}

/* *************************************
title1
************************************* */
.title1 {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: calc(8 * var(--rem));
  text-wrap: balance;
  word-break: auto-phrase;
  font-size: calc(30 * var(--rem));
  @media (width < 768px) {
    font-size: calc(22 * var(--rem));
    text-wrap: balance;
    word-break: auto-phrase;
  }
}

.title1::before {
  content: '';
  display: block;
  width: 0.6lh;
  aspect-ratio: 1;
  background: linear-gradient(120deg, var(--pink-deep) 0%, var(--pink) 50%, var(--orange-deep) 100%);
  border-radius: 100vmax;
  margin-block-start: calc(9 * var(--rem));
  @media (width < 768px) {
    /* margin-block-start: calc(5 * var(--rem)); */
  }
}

/* *************************************
title2
************************************* */
.title2 {
  font-size: calc(40 * var(--rem));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: inline-block;
  position: relative;
  @media (width < 768px) {
    font-size: calc(26 * var(--rem));
  }
}

.title2::after {
  content: '';
  display: inline-block;
  width: calc(80 * var(--rem));
  height: calc(2 * var(--rem));
  background: var(--pink-deep);
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.title2 span {
  color: var(--pink-deep);
  font-size: calc(45 * var(--rem));
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

/* *************************************
lead-text
************************************* */
.lead-text {
  text-align: center;
  text-transform: uppercase;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
    text-align: left;
  }
}

.lead-text span {
  font-size: calc(16 * var(--rem));
  display: inline-block;
  line-height: 1.8;
  @media (width < 768px) {
    font-size: calc(12 * var(--rem));
  }
}

/* *************************************
title3
************************************* */
.title3 {
  position: relative;
  padding-inline-start: calc(24 * var(--rem));
  text-wrap: balance;
  word-break: auto-phrase;
  @media (width < 768px) {
    font-size: calc(23 * var(--rem));
    text-wrap: wrap;
    word-break: normal;
    padding-inline-start: calc(16 * var(--rem));
  }
}

.title3::before {
  content: '';
  display: block;
  width: calc(6 * var(--rem));
  height: 100%;
  background: linear-gradient(120deg, var(--pink-deep) 0%, var(--pink) 50%, var(--orange-deep) 100%);
  position: absolute;
  top: 0;
  left: 0;
}

/* *************************************
table1
************************************* */
.table1 {
  border: calc(1 * var(--rem)) solid var(--pink-deep);
  background: var(--white);
}

.table1__item {
  display: grid;
  grid-template-columns: calc(200 * var(--rem)) 1fr;
  border-bottom: calc(1 * var(--rem)) solid var(--pink-deep);
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.table1__item:last-child {
  border-bottom: none;
}

.table1__item dt {
  padding: calc(24 * var(--rem));
  text-align: center;
  background: var(--pink-soft);
  @media (width < 768px) {
    font-size: calc(18 * var(--rem));
    padding: calc(16 * var(--rem));
  }
}

.table1__item dd {
  border-left: calc(1 * var(--rem)) solid var(--pink-deep);
  padding: calc(24 * var(--rem));
  @media (width < 768px) {
    border-left: none;
    font-size: calc(18 * var(--rem));
    padding: calc(16 * var(--rem));
  }
}

/* *************************************
table2
************************************* */
.table2 {
  display: grid;
  gap: calc(16 * var(--rem));
}

.table2__item {
  display: grid;
  grid-template-columns: auto 1fr;
  border-bottom: 1px solid var(--pink-mid);
  gap: calc(64 * var(--rem));
  align-items: self-end;
  padding-block-end: calc(8 * var(--rem));
  @media (width < 768px) {
    gap: calc(16 * var(--rem));
  }
}

.table2__item dt {
  @media (width < 768px) {
    font-size: calc(18 * var(--rem));
  }
}

.table2__item dt span {
  font-size: calc(16 * var(--rem));
}

.table2__item dd {
  text-align: right;
  @media (width < 768px) {
    font-size: calc(18 * var(--rem));
  }
}

.table2__item dd span {
  font-size: calc(16 * var(--rem));
  @media (width < 768px) {
    font-size: calc(12 * var(--rem));
  }
}

/* *************************************
card1-list
************************************* */
.card1-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.card1-list__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  position: relative;
  gap: calc(20 * var(--rem));
  background-color: var(--white);
  padding-bottom: calc(24 * var(--rem));
  border-radius: var(--radius);
  overflow: clip;
  @media (width < 768px) {
  }
}

.card1-list__tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--pink-deep);
  color: var(--white);
  padding-inline: calc(8 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.card1-list__img img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card1-list__title {
  padding-inline: calc(10 * var(--rem));
  color: var(--pink-deep);
  font-size: calc(25 * var(--rem));
  font-weight: bold;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(4 * var(--rem));
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  @media (width < 768px) {
    font-size: calc(20 * var(--rem));
  }
}

.card1-list__title::before {
  content: '';
  display: block;
  width: 1lh;
  aspect-ratio: 1;
  background: url(../../library/images/plans/biu1.svg) no-repeat center / contain;
}

.card1-list__item:nth-child(2) .card1-list__title::before {
  background: url(../../library/images/plans/biu2.svg) no-repeat center / contain;
}

.card1-list__item:nth-child(3) .card1-list__title::before {
  background: url(../../library/images/plans/biu3.svg) no-repeat center / contain;
}

.card1-list__text {
  padding-inline: calc(24 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

/* *************************************
card2-list
************************************* */
.card2-list {
  display: grid;
  gap: calc(40 * var(--rem));
}

.card2-list__item {
  display: flex;
  gap: calc(24 * var(--rem));
  border-bottom: 2px solid var(--pink-deep);
  padding-bottom: calc(24 * var(--rem));
  @media (width < 768px) {
    flex-direction: column;
  }
}

.card2-list__img {
  flex-basis: 30%;
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0.2);
}

.card2-list__img img {
  aspect-ratio: 3 /2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card2-list__wrap {
  flex-basis: 70%;
  padding: calc(16 * var(--rem));
  background: var(--white);
  @media (width < 768px) {
    padding: 0;
  }
}

.card2-list__cat {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rem));
}

.card2-list__cat-item {
  background: var(--pink-soft);
  color: var(--pink-deep);
  padding: calc(8 * var(--rem)) calc(12 * var(--rem));
  font-size: calc(16 * var(--rem));
  line-height: 1;
  border-radius: 100vmax;
  min-width: calc(150 * var(--rem));
  text-align: center;
  @media (width < 768px) {
    font-size: calc(14 * var(--rem));
  }
}

.card2-list__cat-item:nth-child(2) {
  background: var(--orange-soft);
  color: var(--orange-deep);
}

.card2-list__title {
  font-size: calc(28 * var(--rem));
  margin-block-start: calc(16 * var(--rem));
  @media (width < 768px) {
    font-size: calc(22 * var(--rem));
  }
}

.card2-list__text {
  margin-block-start: calc(8 * var(--rem));
  font-size: calc(18 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

/* *************************************
cat-list1
************************************* */
.cat-list1 {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rem));
}

.cat-list1__item {
}

.cat-list1__link {
  display: block;
  border: 1px solid var(--pink-deep);
  font-size: calc(16 * var(--rem));
  line-height: 1;
  padding: calc(8 * var(--rem)) calc(16 * var(--rem));
  border-radius: 100vmax;
  text-transform: uppercase;
  background-color: var(--pink-deep);
  color: var(--white);
}

/* *************************************
post-list
************************************* */
.post-list {
}

.post-list__item {
}

.post-list__link {
  display: grid;
  grid-template-columns: auto calc(110 * var(--rem)) 1fr;
  gap: calc(16 * var(--rem));
  align-items: center;
  padding-block: calc(24 * var(--rem));
  border-bottom: 1px solid var(--line-2);
  @media (width < 768px) {
    grid-template-columns: calc(100 * var(--rem)) 1fr;
    grid-template-rows: repeat(2, auto);
  }
}

.post-list__item:first-child .post-list__link {
  border-top: 1px solid var(--line-2);
}

.post-list__time {
  font-family: var(--mono);
  font-size: calc(16 * var(--rem));
  color: var(--ink-3);
  letter-spacing: 0.06em;
  @media (width < 768px) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.post-list__cut {
  display: block;
  border: 1px solid var(--pink-deep);
  font-size: calc(14 * var(--rem));
  line-height: 1;
  padding: calc(8 * var(--rem)) calc(16 * var(--rem));
  border-radius: 100vmax;
  text-transform: uppercase;
  background-color: var(--pink-deep);
  color: var(--white);
  text-align: center;
  @media (width < 768px) {
    grid-column: 2/3;
    grid-row: span 1;
    width: fit-content;
  }
}

.post-list__title {
  font-size: calc(18 * var(--rem));
  @media (width < 768px) {
    grid-column: span 2;
    grid-row: 2/3;
  }
}

/* *************************************
pagination
************************************* */
.pagination {
}

.page-numbers {
}

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(16 * var(--rem));
  @media (width < 768px) {
    gap: calc(8 * var(--rem));
  }
}

.page-numbers li * {
  display: block;
  padding: calc(2 * var(--rem)) calc(12 * var(--rem));
  border: 1px solid var(--pink-deep);
  font-size: calc(16 * var(--rem));
}

.page-numbers.current {
  background-color: var(--pink-deep);
  color: var(--white);
}

.page-numbers a {
  transition:
    color 0.3s ease-in-out,
    background 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .page-numbers a:hover {
    background: var(--pink-deep);
    color: var(--white);
    opacity: 1;
  }
}

/* *************************************
area-table
************************************* */
.area-table {
}

.area-table__item {
  display: grid;
  grid-template-columns: auto 1fr;
}

.area-table__item dt {
}

.area-table__item dd {
}

/* *************************************
area-list
************************************* */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--rem)) calc(10 * var(--rem));
}

.area-item {
  display: block;
  border: 1px solid var(--pink-mid);
  font-size: calc(14 * var(--rem));
  line-height: 1;
  padding: calc(4 * var(--rem)) calc(16 * var(--rem));
  border-radius: 100vmax;
  text-transform: uppercase;
  background-color: var(--pink-mid);
  color: var(--pink-deep);
  text-align: center;
}

.area-list[data-area='central'] .area-item {
  background: var(--pink-soft);
  border-color: var(--pink-soft);
}

.area-list[data-area='west'] .area-item {
  background: var(--orange-soft);
  border-color: var(--orange-soft);
  color: var(--orange-deep);
}

/* *************************************
list1
************************************* */
.list1 {
  padding: calc(40 * var(--rem));
  border-radius: var(--radius);
  box-shadow: 0 calc(5 * var(--rem)) calc(10 * var(--rem)) 0 rgb(0 0 0 / 0.2);
  border: 1px solid var(--pink-mid);
  display: grid;
  gap: calc(24 * var(--rem));
  background: var(--white);
  @media (width < 768px) {
    padding-inline: calc(20 * var(--rem));
    font-size: calc(16 * var(--rem));
    gap: calc(16 * var(--rem));
  }
}

.list1__item {
  position: relative;
  padding-inline-start: calc(48 * var(--rem));
  @media (width < 768px) {
    padding-inline-start: calc(38 * var(--rem));
  }
}

.list1__item::before {
  content: '';
  display: block;
  width: 1lh;
  aspect-ratio: 1;
  background: url(../../library/images/common/check.svg) no-repeat center / contain;
  position: absolute;
  top: calc(0 * var(--rem));
  left: 0;
}

.list1__item span {
  display: block;
  font-size: calc(14 * var(--rem));
}

/* *************************************
table3
************************************* */
.table3 {
border: calc(1 * var(--rem)) solid var();
border: 1px solid var(--pink-mid);
}

.table3__item {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-bottom:1px solid var(--pink-mid) ;
}


.table3__item:last-child {
border: none;
}

.table3__item dt {
display: grid;
place-content: center;
padding: calc(10 * var(--rem));
}

.table3__item dd {
  display: grid;
place-content: center;
padding: calc(10 * var(--rem));
  border-left:1px solid var(--pink-mid) ;
}

.table3__item:nth-child(odd) {
  background: #fff5f940;
}

.table3__item[data-col='head'] {
background: var(--pink-soft);
}