@charset "UTF-8";
/* ==============================================================
*  reset
* ============================================================ */
*,::before,::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:where(html) {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}
:where(a) {
  text-decoration: none;
}
:where(svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}
:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
  vertical-align: bottom;
}
:where(svg) {
  fill: currentColor;
  stroke: none;
}
:where(ul, ol) {
  list-style: none;
}
:where(table) {
  border-collapse: collapse;
}
:where(hr) {
  block-size: 0;
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  overflow: visible;
}
:where(input) {
  border-radius: 0;
}
:where(input[type="text"], textarea) {
  padding: 0 2px;
}
:where(button, label, select, summary) {
  cursor: pointer;
}
:where(button, input, textarea, select) {
  border: 1px solid;
  font: inherit;
}
:where(button) {
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  appearance: none;
}
:where(textarea) {
  overflow: auto;
  resize: vertical;
  user-select: auto;
}
:where([disabled]) {
  cursor: default;
}
:where([hidden]) {
  display: none;
}

/* ==============================================================
*  base
* ============================================================ */
:root {}

html {
  line-height: 1.5;
  box-sizing: border-box;
}

body {
  color: #202020;
  background-color: #fff;
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-kerning: normal;
  font-size: 1.17vw;
  line-height: 1.75;
}
@media (width <= 768px) {
  body {
    font-size: 4.26vw;
  }
}


/* ==============================================================
*  common
* ============================================================ */
/* ---------- header ---------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.header-inner {
  position: relative;
  padding: 24px 22px 10px;
}
@media (width <= 768px) {
  .header-inner {
  }
}

.header-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}
@media (width <= 768px) {
  .header-logo {
    font-size: 1px;
    line-height: 1;
    width: min(75%, 256px);
  }
}


/* ---------- main ---------- */
.main {
  overflow: hidden;
}


/* ---------- pageHero ---------- */
.pageHero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1366/1022;
  background: url(../img/img_hero_bg.svg) no-repeat center bottom -1px/cover;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .pageHero {
    aspect-ratio: 375/832;
  }
}

.pageHero_catch {
  position: absolute;
  top: 16.33vw;
  left: 7.17vw;
  width: 31.7vw;
  height: auto;
  aspect-ratio: 453/109;
}
@media (width <= 768px) {
  .pageHero_catch {
    top: 38.13vw;
    left: 50%;
    translate: -50% 0;
    width: 68vw;
    aspect-ratio: 268/63;
  }
}

.pageHero_img {
  position: absolute;
  top: 6.22vw;
  left: 42.83vw;
  width: 49.93vw;
  height: auto;
  aspect-ratio: 682/385;
}
@media (width <= 768px) {
  .pageHero_img {
    top: 67.2vw;
    left: 50%;
    translate: -50% 0;
    width: 92vw;
  }
}

.pageHero_hgroup {
  padding-block-start: 34.92vw;
  text-align: center;
  & h1 {
    color: #FFF;
    font-size: 5.71vw;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.3;
  }
  & p {
    color: #FFF;
    font-size: 1.9vw;
    font-weight: 700;
  }
}
@media (width <= 768px) {
  .pageHero_hgroup {
    padding-block-start: 117.33vw;
    & h1 {
      margin-block-start: 1.6vw;
      font-size: 11.2vw;
      line-height: 1.4;
    }
    & p {
      font-size: 4.8vw;
      line-height: 1.6;
    }
  }
}

/* ---------- symbol ---------- */
.symbol {
  position: relative;
  z-index: 10;
  width: 45.68vw;
  height: auto;
  aspect-ratio: 624/568;
  margin-block-start: -18.74vw;
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .symbol {
    width: 85.33vw;
    margin-block-start: -38.66vw;
  }
}

/* ---------- leadBox ---------- */
.leadBox {
  position: relative;
  margin-block-start: -2.48vw;
  padding-block: 8.49vw 21.82vw;
  background: linear-gradient(to bottom,transparent 0%,transparent 30%, #D3EDFB 30%,#D3EDFB 100%);
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/1182;
    background: url(../img/img_lead_bg.svg) no-repeat center top/cover;
    content: "";
  }
  & > div {
    display: grid;
    align-items: center;
    gap: 0 6.59vw;
    grid-template-columns: 1fr 45.75vw;
    width: 91.29vw;
    margin-block-start: 6vw;
    margin-inline: auto;
    padding-inline-start: 3.51vw;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .leadBox {
    margin-block-start: -9.6vw;
    padding-block: 21.33vw 96vw;
    &::before {
      width: 256vw;
    }
    & > div {
      gap: 19.47vw 0;
      grid-template-columns: 100%;
      width: 100%;
      margin-block-start: 19.47vw;
      padding-inline: 4vw;
    }
  }
}

.leadBox_ttl {
  width: 42.9vw;
  height: auto;
  aspect-ratio: 620/41;
  margin-inline: auto;
  line-height: 1;
}
@media (width <= 768px) {
  .leadBox_ttl {
    width: 84.8vw;
  }
}

.leadBox_txt {
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.17vw;
  line-height: 1.75;
  letter-spacing: 0.018em;
  color: #505050;
}
@media (width <= 768px) {
  .leadBox_txt {
    font-size: 4.27vw;
    letter-spacing: -0.02em;
  }
}

.leadBox_imgWrap {
  position: relative;
}

.leadBox_img {
  border-radius: 1.1vw;
  overflow: hidden;
}
@media (width <= 768px) {
  .leadBox_img {
    border-radius: 1.87vw;
  }
}

.leadBox_catch {
  position: absolute;
  top: 0;
  right: 0;
  translate: 0 -50%;
  display: block;
  width: 14.86vw;
  height: auto;
  aspect-ratio: 1;
}
@media (width <= 768px) {
  .leadBox_catch {
    width: 30.93vw;
  }
}


/* ---------- pfasBox ---------- */
.pfasBox {
  position: relative;
  margin-block-start: -18.37vw;
  padding-block: 10.4vw 24.89vw;
  background: linear-gradient(to bottom,transparent 0%,transparent 30%, #fff 30%,#fff 100%);
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/596;
    background: url(../img/img_pfas_bg.svg) no-repeat center top/cover;
    content: "";
  }
  &::after {
    position: absolute;
    top: -3.88vw;
    left: -12.01vw;
    display: block;
    width: 51.24vw;
    height: auto;
    aspect-ratio: 700/397;
    background: url(../img/img_pfas_bird.svg) no-repeat center/cover;
    content: "";
  }
  & > div {
    position: relative;
    width: 91.29vw;
    margin-inline: auto;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .pfasBox {
    margin-block-start: -55.2vw;
    padding-block: 30.13vw 50.67vw;
    &::before {
      left: 23%;
      width: 256vw;
    }
    &::after {
      top: 7.73vw;
      left: -5.87vw;
      width: 116.27vw;
    }
    & > div {
      width: 100%;
      padding-inline: 4vw;
    }
  }
}

.pfasBox_mark {
  width: 7.47vw;
  height: auto;
  aspect-ratio: 102/94;
  margin-inline: auto;
}
@media (width <= 768px) {
  .pfasBox_mark {
    width: 27.2vw;
  }
}

.pfasBox_ttl {
  margin-block-start: 0.73vw;
  color: #37ADBC;
  font-size: 5.86vw;
  font-weight: 700;
  text-align: center;
}
@media (width <= 768px) {
  .pfasBox_ttl {
    margin-block-start: 2.13vw;
    font-size: 10.67vw;
    letter-spacing: 0.025em;
  }
}

.pfasBox_balloon {
  width: 28.4vw;
  height: auto;
  aspect-ratio: 388/70;
  margin-block-start: 3.66vw;
  margin-inline: auto;
}
@media (width <= 768px) {
  .pfasBox_balloon {
    width: 88vw;
    margin-block-start: 8.8vw;
  }
}

.pfasBox_lead {
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin-block-start: 0.73vw;
  font-size: 2.2vw;
  font-weight: 600;
  line-height: 1.67;
  text-align: center;
}
@media (width <= 768px) {
  .pfasBox_lead {
    margin-block-start: 2.93vw;
    font-size: 5.07vw;
    line-height: 1.79;
  }
}

.pfasBox_media {
  display: grid;
  gap: 0 6.37vw;
  grid-template-columns: 45.74vw 1fr;
  margin-block-start: 6.59vw;
}
@media (width <= 768px) {
  .pfasBox_media {
    gap: 11.73vw 0;
    grid-template-columns: 100%;
    margin-block-start: 18.67vw;
  }
}

.pfasBox_ttl2 {
  margin-block-start: -0.88vw;
  font-size: 2.64vw;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.67;
}
@media (width <= 768px) {
  .pfasBox_ttl2 {
    font-size: 5.33vw;
    line-height: 1.8;
  }
}

.pfasBox_txt {
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  width: 35.14vw;
  & p {
    margin-block-start: 3.66vw;
    font-size: 1.17vw;
    letter-spacing: 0.01em;
    line-height: 1.75;
    color: #505050;
  }
  & strong {
    margin-block-start: 2.56vw;
    font-size: 1.61vw;
    font-weight: 600;
    color: #091B34;
    letter-spacing: 0.025em;
    line-height: 1.73;
  }
}
@media (width <= 768px) {
  .pfasBox_txt {
    width: 100%;
    & p {
      margin-block-start: 9.07vw;
      font-size: 4.27vw;
      letter-spacing: -0.015em;
    }
    & strong {
      margin-block-start: 6.67vw;
      font-size: 5.33vw;
      line-height: 1.8;
    }
  }
}

.pfasBox_img {
  border-radius: 1.1vw;
  overflow: hidden;
}
@media (width <= 768px) {
  
}


/* ---------- costBox ---------- */
.costBox {
  position: relative;
  margin-block-start: -20.64vw;
  padding-block: 10.98vw 24.89vw;
  background: linear-gradient(to bottom, transparent 0%, transparent 20%, #D3EDFB 20%, #D3EDFB 100%);
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/516;
    background: url(../img/img_cost_bg.svg) no-repeat center top/contain;
    content: "";
  }
  & > div {
    position: relative;
    width: 91.29vw;
    margin-inline: auto;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .costBox {
    margin-block-start: -26.67vw;
    padding-block: 28vw 67.73vw;
    &::before {
      width: 256vw;
    }
    & > div {
      width: 100%;
      padding-inline: 4vw;
    }
  }
}

.costBox_mark {
  width: 8.57vw;
  height: auto;
  aspect-ratio: 117/101;
  margin-inline: auto;
}
@media (width <= 768px) {
  .costBox_mark {
    width: 31.47vw;
  }
}

.costBox_ttl {
  margin-block-start: 0.73vw;
  color: #37ADBC;
  font-size: 5.86vw;
  font-weight: 700;
  text-align: center;
}
@media (width <= 768px) {
  .costBox_ttl {
    margin-block-start: 2.13vw;
    font-size: 10.67vw;
  }
}

.costBox_balloon {
  width: 28.4vw;
  height: auto;
  aspect-ratio: 388/70;
  margin-block-start: 3.66vw;
  margin-inline: auto;
}
@media (width <= 768px) {
  .costBox_balloon {
    width: 88vw;
    margin-block-start: 8.8vw;
  }
}

.costBox_lead {
  margin-block-start: 0.73vw;
  font-size: 2.2vw;
  font-weight: 600;
  line-height: 1.67;
  text-align: center;
}
@media (width <= 768px) {
  .costBox_lead {
    margin-block-start: 2.93vw;
    font-size: 5.07vw;
    line-height: 1.79;
  }
}

.costBox_note {
  margin-block-start: 1.02vw;
  font-size: 1.02vw;
  letter-spacing: 0.01em;
  text-align: center;
}
@media (width <= 768px) {
  .costBox_note {
    margin-block-start: 2.93vw;
    font-size: 3.73vw;
  }
}

.costBox_txt {
  width: 53.44vw;
  margin-block-start: 3.88vw;
  margin-inline: auto;
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.17vw;
  letter-spacing: 0.01em;
  color: #505050;
}
@media (width <= 768px) {
  .costBox_txt {
    width: 100%;
    margin-block-start: 22.13vw;
    font-size: 4.27vw;
  }
}

.costBox_img {
  width: 79.06vw;
  height: auto;
  aspect-ratio: 1080/483;
  margin-block-start: 4.69vw;
  margin-inline: auto;
}
@media (width <= 768px) {
  .costBox_img {
    position: relative;
    width: 100%
    aspect-ratio: 345/211;
    margin-block-start: 15.47vw;
    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      display: block;
      width: 9.33vw;
      height: auto;
      aspect-ratio: 1;
      background: url(../img/img_modal.svg) no-repeat center/cover;
      pointer-events: none;
      content: "";
    }
  }
}

@media (width <= 768px) {
  .costBox_modal {
    position: fixed;
    inset: 0;
    display: none;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    padding-block-start: 8vw;
    border: none;
    background-color: transparent;
    &[open] {
      display: block;
    }
    &::backdrop {
      background-color: rgba(0,0,0,0.3);
    }
    & img {
      background-color: #FFF;
      object-fit: contain;
      padding: 2vw;
    }
  }
}

@media (width <= 768px) {
  .costBox_closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 8vw;
    height: auto;
    aspect-ratio: 1;
    padding-block-start: 8vw;
    background-color: #FFF;
    &::before, &::after {
      position: absolute;
      top: 50%;
      right: 50%;
      translate: 50% -50%;
      transform-origin: center;
      display: block;
      width: 6.4vw;
      height: 2px;
      background-color: #222;
      content: "";
    }
    &::before {
      rotate: 45deg;
    }
    &::after {
      rotate: -45deg;
    }
  }
}

.costBox_list {
  width: 79.06vw;
  margin-inline: auto;
  & li {
    font-size: 1.02vw;
    letter-spacing: 0.01em;
    line-height: 1.57;
  }
}
@media (width <= 768px) {
  .costBox_list {
    width: 100%;
    margin-block-start: 10.13vw;
    & li {
      font-size: 3.73vw;
    }
  }
}

.costBox_openBtn {
  background-color: transparent;
  appearance: none;
  pointer-events: none;
}
@media (width <= 768px) {
  .costBox_openBtn {
    pointer-events: all;
  }
}



/* ---------- lawBox ---------- */
.lawBox {
  position: relative;
  margin-block-start: -20.64vw;
  padding-block-start: 20.64vw;
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/559;
    background: url(../img/img_law_bg.svg) no-repeat center top/contain;
    content: "";
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  & > div {
    position: relative;
    width: 91.29vw;
    margin-inline: auto;
  }
}
@media (width <= 768px) {
  .lawBox {
    margin-block-start: -53.33vw;
    padding-block-start: 42.67vw;
    &::before {
      width: 256vw;
    }
  }
}

.lawBox_mark {
  width: 6.52vw;
  height: auto;
  aspect-ratio: 89/110;
  margin-inline: auto;
}
@media (width <= 768px) {
  .lawBox_mark {
    width: 21.6vw;
  }
}

.lawBox_ttl {
  margin-block-start: 0.73vw;
  color: #37ADBC;
  font-size: 5.86vw;
  font-weight: 700;
  text-align: center;
}
@media (width <= 768px) {
  .lawBox_ttl {
    margin-block-start: 2.13vw;
    font-size: 10.67vw;
  }
}

.lawBox_balloon {
  width: 28.4vw;
  height: auto;
  aspect-ratio: 388/70;
  margin-block-start: 3.66vw;
  margin-inline: auto;
}
@media (width <= 768px) {
  .lawBox_balloon {
    width: 88vw;
    margin-block-start: 8.8vw;
  }
}

.lawBox_lead {
  margin-block-start: 0.73vw;
  font-size: 2.2vw;
  font-weight: 600;
  line-height: 1.67;
  text-align: center;
}
@media (width <= 768px) {
  .lawBox_lead {
    margin-block-start: 2.93vw;
    font-size: 5.07vw;
    line-height: 1.79;
  }
}

.lawBox_media {
  display: grid;
  gap: 1.98vw 6.15vw;
  grid-template-areas: 'lawA lawB' 'lawC lawC';
  grid-template-columns: 47.14vw 37.99vw;
  margin-block-start: 8.05vw;
}
@media (width <= 768px) {
  .lawBox_media {
    gap: 1.33vw 0;
    grid-template-areas: 'lawB' 'lawA' 'lawC';
    grid-template-columns: 100%;
    margin-block-start: 17.07vw;
  }
}

.lawBox_media1 {
  grid-area: lawB;
}

.lawBox_media2 {
  grid-area: lawA;
}
@media (width <= 768px) {
  .lawBox_media2 {
    padding-block-end: 14.67vw;
  }
}

.lawBox_media3 {
  grid-area: lawC;
}

.lawBox_txt {
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #505050;
}

.lawBox_note {
  margin-block-start: 0.95vw;
  font-size: 1.02vw;
  letter-spacing: -0.05em;
  color: #505050;
}
@media (width <= 768px) {
  .lawBox_note {
    margin-block-start: 4.8vw;
    font-size: 3.73vw;
    letter-spacing: -0.02em;
    line-height: 1.71;
  }
}

.lawBox_img {
  width: 37.99vw;
  height: auto;
  aspect-ratio: 519/222;
  margin-block-start: 2.64vw;
}
@media (width <= 768px) {
  .lawBox_img {
    width: 100%;
    margin-block-start: 8vw;
  }
}

.lawBox_caption {
  margin-block-start: 0.73vw;
  font-size: 1.02vw;
  letter-spacing: -0.05em;
}
@media (width <= 768px) {
  .lawBox_caption {
    margin-block-start: 4vw;
    font-size: 3.73vw;
    letter-spacing: -0.02em;
  }
}

.lawBox_table {
  position: relative;
  width: 100%;
  border: 2px solid #37ADBC;
  table-layout: fixed;
  &::before {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 7.61vw;
    height: auto;
    aspect-ratio: 104/96;
    background: url(../img/img_law_arrow.svg) no-repeat center/cover;
    content: "";
  }
  & sup {
    font-size: 0.6em;
  }
  & caption {
    margin-block-end: 1.32vw;
    font-size: 1.32vw;
    font-weight: 700;
    text-align: left;
  }
  & thead {
    background-color: #E7F4F7;
    & th {
      width: 30%;
      padding-block: 0.59vw;
      &[rowspan="2"] {
        width: 40%;
      }
      &[colspan="2"] {
        width: auto;
      }
    }
  }
  & tbody {
    background-color: #FFF;
  }
  & th {
    padding-block: 1.02vw;
    padding-inline: 1.46vw;
    border: 1px solid #C0C0C0;
    font-size: 1.24vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    &.emphasis {
      background-color: #37ADBC;
      color: #FFF;
      font-weight: 700;
    }
  }
  & td {
    padding-block: 1.02vw;
    padding-inline: 1.46vw;
    border: 1px solid #C0C0C0;
    font-size: 1.24vw;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    &.emphasis {
      background-color: #37ADBC;
      color: #FFF;
      font-size: 1.54vw;
      font-weight: 700;
      text-align: center;
      & span {
        display: inline-block;
        margin-block-start: 0.59vw;
        font-size: 1.1vw;
        line-height: 1.6;
        text-align: left;
      }
    }
  }
  & .left {
    text-align: left;
  }
}
@media (width <= 768px) {
  .lawBox_table {
    margin-block-start: 9.33vw;
    &::before {
      width: 20.53vw;
      aspect-ratio: 77/55;
      background-position: center bottom;
    }
    & caption {
      margin-block-end: 4.8vw;
      font-size: 4.8vw;
      letter-spacing: 0.025em;
    }
    & thead {
      & th {
        padding-inline: 3.2vw;
        padding-block: 2.13vw;
        &[rowspan="2"] {
          width: 33%;
        }
        &[colspan="2"] {
          width: auto;
        }
      }
    }
    & th {
      padding-block: 4.27vw;
      padding-inline: 3.47vw;
      font-size: 4.53vw;
    }
    & td {
      padding-block: 4.27vw;
      padding-inline: 3.2vw;
      font-size: 4.53vw;
      &.emphasis {
        padding-inline: 2.13vw;
        font-size: 5.07vw;
        & span {
          margin-block-start: 2.67vw;
          font-size: 4vw;
        }
      }
    }
  }
}

.lawBox_strong {
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 2.42vw;
  font-weight: 600;
  letter-spacing: 0.005em;
  & span {
    display: inline-block;
    margin-inline-end: 0.5em;
    padding-inline: 1.1vw;
    border-radius: 0.44vw;
    background-color: #37ADBC;
    color: #FFF;
    & code {
      margin-inline-start: 0.2em;
      font-size: 0.75em
    }
  }
}
@media (width <= 768px) {
  .lawBox_strong {
    font-size: 6.4vw;
    line-height: 2.17;
    & span {
      border-radius: 1.6vw;
    }
  }
}

.lawBox_list {
  margin-block-start: 1.02vw;
  & li {
    font-size: 1.02vw;
    line-height: 1.57;
  }

}
@media (width <= 768px) {
  .lawBox_list {
    margin-block-start: 4.8vw;
    & li {
      font-size: 3.73vw;
      & + li {
        margin-block-start: 2.67vw;
      }
    }
  }
}


/* ---------- topicBox ---------- */
.topicBox {
  padding-block: 15.98vw 7.32vw;
  & > div {
    width: 91.29vw;
    margin-inline: auto;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .topicBox {
    padding-block-start: 29.33vw;
    padding-block-end: 2.67vw;
    & > div {
      width: 100%;
      padding-inline: 4vw;
    }
  }
}

.topicBox_ttl {
  width: 8.78vw;
  height: auto;
  aspect-ratio: 120/29;
  margin-inline: auto;
  line-height: 1;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .topicBox_ttl {
    width: 32vw;
  }
}

.topicBox_ttl2 {
  width: 100%;
  margin-block-start: 2.12vw;
  padding-block: 0.15vw;
  border: 3px solid #37ADBC;
  border-radius: 9999px;
  color: #37ADBC;
  font-size: 2.49vw;
  font-weight: 600;
  text-align: center;
}
@media (width <= 768px) {
  .topicBox_ttl2 {
    margin-block-start: 3.73vw;
    padding-block: 5.33vw 5.87vw;
    border-width: 0.8vw;
    border-radius: 9.33vw;
    font-size: 8vw;
    line-height: 1.5;
  }
}

.topicBox_ttl3 {
  margin-block-start: 2.05vw;
  font-size: 1.32vw;
  font-weight: 400;
  letter-spacing: 0.025em;
}
@media (width <= 768px) {
  .topicBox_ttl3 {
    margin-block-start: 9.33vw;
    font-size: 4.8vw;
  }
}

.topicBox_media {
  display: grid;
  align-items: center;
  gap: 0 4.39vw;
  grid-template-columns: 1fr 48.17vw;
  margin-block: 2.2vw 3.07vw;
}
@media (width <= 768px) {
  .topicBox_media {
    gap: 9.6vw 0;
    grid-template-columns: 100%;
    margin-block: 14.4vw 12vw;
  }
}

.topicBox_txt {
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.17vw;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: #505050;
  & * + p {
    margin-block-start: 1.46vw;
  }
}
@media (width <= 768px) {
  .topicBox_txt {
    font-size: 4.27vw;
    & * + p {
      margin-block-start: 5.6vw;
    }
  }
}

.topicBox_img {
  width: 48.17vw;
  height: auto;
  aspect-ratio: 658/289;
}
@media (width <= 768px) {
  .topicBox_img {
    width: 119.47vw;
    aspect-ratio: 448/307;
    margin-inline-start: -13.33vw;
  }
}

.topicBox_media2 {
  display: grid;
  gap: 0 6.37vw;
  grid-template-columns: 1fr 1fr;
  margin-block-start: 4.39vw;
}
@media (width <= 768px) {
  .topicBox_media2 {
    gap: 12vw 0;
    grid-template-columns: 100%;
    margin-block-start: 17.87vw;
  }
}

.topicBox_img2 {
  width: 41vw;
  height: auto;
  aspect-ratio: 580/336;
  border-radius: 0.44vw;
  overflow: hidden;
}
@media (width <= 768px) {
  .topicBox_img2 {
    width: 100%;
    aspect-ratio: 350/345;
    border-radius: 1.6vw;
  }
}

.topicBox_note {
  margin-block-start: 1.32vw;
  font-size: 0.95vw;
  letter-spacing: 0.01em;
  line-height: 1.54;
  color: #505050;
}
@media (width <= 768px) {
  .topicBox_note {
    margin-block-start: 4.8vw;
    font-size: 3.47vw;
  }
}

.topicBox_img3 {
  width: 42.61vw;
  height: auto;
  aspect-ratio: 582/77;
  margin-block-start: 1.17vw;
}
@media (width <= 768px) {
  .topicBox_img3 {
    width: 100%;
    aspect-ratio: 350/192;
    margin-block-start: 4.26vw;
  }
}

.topicBox_BtnLink {
  margin-block-start: 2.42vw;
  & a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 580/62;
    padding-inline: 1.46vw 4.69vw;
    border: 2px solid #37ADBC;
    color: #202020;
    font-size: 1.46vw;
    font-weight: 600;
    &::before, &::after {
      position: absolute;
      top: 50%;
      right: 1.46vw;
      translate: 0 -50%;
      display: block;
      width: 1.76vw;
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #37ADBC;
      transition: background 0.3s ease-out;
    }
    &::after {
      background-color: #FFF;
      mask: url(../img/icn_topic_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out;
    }
  }
}
@media (width <= 768px) {
  .topicBox_BtnLink {
    margin-block-start: 9.33vw;
    & a {
      aspect-ratio: 347/62;
      padding-inline: 4.8vw 16vw;
      font-size: 4.8vw;
      &::before, &::after {
        right: 5.33vw;
        width: 6.4vw;
      }
    }
  }
}
@media (hover: hover) {
  .topicBox_BtnLink a:hover {
    &::before {
      background-color: #5BBCCE;
    }
    &::after {
      mask-position: 0 0;
    }
  }
}


/* ---------- specBox ---------- */
.specBox {
  position: relative;
  padding-block: 12.45vw 6.44vw;
  background: linear-gradient(to bottom, transparent 0%, transparent 20%, #7BC0A8 20%, #7BC0A8 100%);;
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/1184;
    background: url(../img/img_spec_bg.svg) no-repeat center top/cover;
    content: "";
  }
  & > div {
    width: 91.29vw;
    margin-inline: auto;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 768px) {
  .specBox {
    padding-block: 53.33vw 28.8vw;
    &::before {
      width: 256vw;
    }
    & > div {
      width: 100%;
      padding-inline: 4vw;
    }
  }
}

.specBox_media {
  display: grid;
  gap: 0 4.61vw;
  grid-template-columns: 35.65vw 1fr;
}
@media (width <= 768px) {
  .specBox_media {
    gap: 9.33vw 0;
    grid-template-columns: 100%;
  }
}

.specBox_ttl {
  color: #FFF;
  font-size: 3.66vw;
  font-weight: 700;
  letter-spacing: 0.025em;
}
@media (width <= 768px) {
  .specBox_ttl {
    font-size: 12vw;
  }
}

.specBox_ttl2 {
  margin-block-start: 4.9vw;
  padding-block-end: 0.37vw;
  border-block-end: 2px solid #FFF;
  color: #FFF;
  font-size: 1.46vw;
  font-weight: 700;
  letter-spacing: 0.025em;
}
@media (width <= 768px) {
  .specBox_ttl2 {
    margin-block-start: 18.13vw;
    padding-block-end: 1.07vw;
    font-size: 5.33vw;
  }
}

.specBox_ttl3 {
  margin-block-start: 2.93vw;
  color: #FFF;
  font-size: 1.32vw;
  font-weight: 700;
  letter-spacing: 0.025em;
}
@media (width <= 768px) {
  .specBox_ttl3 {
    margin-block-start: 9.07vw;
    font-size: 4.8vw;
  }
}

.specBox_dl {
  display: grid;
  align-items: center;
  gap: 0.37vw 1px;
  grid-template-columns: 10.98vw 1fr;
  margin-block-start: 0.73vw;
  & > div {
    display: contents;
  }
  & dt {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 150/50;
    padding-inline: 1.1vw;
    background-color: #C4F0D7;
    font-size: 1.17vw;
    letter-spacing: 0.02em;
  }
  & dd {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline: 1.1vw;
    background-color: #FFF;
    font-size: 1.17vw;
    letter-spacing: 0.02em;
  }
}
@media (width <= 768px) {
  .specBox_dl {
    gap: 1.33vw 0;
    grid-template-columns: 100%;
    & > div {
      display: block;
    }
    & dt {
      aspect-ratio: 345/50;
      padding-inline: 4vw;
      font-size: 4.27vw;
    }
    & dd {
      aspect-ratio: 345/50;
      margin-block-start: 2px;
      padding-inline: 4vw;
      font-size: 4.27vw;
    }
  }
}

.specBox_img {
  margin-block-start: 5.86vw;
}
@media (width <= 768px) {
  .specBox_img {
    margin-block-start: 9.33vw;
  }
}


/* ---------- contactBox ---------- */
.contactBox {
  padding-block: 9.52vw;
}
@media (width <= 768px) {
  .contactBox {
    padding-block: 34.66vw;
  }
}

.contactBox_btnLink {
  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51.24vw;
    height: auto;
    aspect-ratio: 700/110;
    margin-inline: auto;
    border-radius: 0.37vw;
    background-color: #0095B1;
    color: #FFF;
    font-size: 1.68vw;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: center;
    & span {
      position: relative;
      display: inline-block;
      padding-inline-end: 2.56vw;
      &::before, &::after {
        position: absolute;
        top: calc(50% + 1px);
        right: 0;
        translate: 0 -50%;
        display: block;
        width: 1.76vw;
        height: auto;
        aspect-ratio: 1;
        content: "";
      }
      &::before {
        border-radius: 50%;
        background-color: #FFF;
        transition: background 0.3s ease-out;
      }
      &::after {
        background-color: #101010;
        mask: url(../img/icn_topic_arrow.svg) no-repeat 100% 0 / 200% 100%;
        transition: mask 0.3s ease-out, color 0.3s ease-out;
      }
    }
  }
}
@media (width <= 768px) {
  .contactBox_btnLink {
    padding-inline: 4vw;
    & a {
      width: 100%;
      aspect-ratio: 345/110;
      border-radius: 1.33vw;
      font-size: 6.13vw;
      & span {
        padding-inline-end: 9.33vw;
        &::before, &::after {
          width: 6.4vw;
        }
      }
    }
  }
}
@media (hover: hover) {
  .contactBox_btnLink a:hover {
    & ::before {
      background-color: #5BBCCE;
    }
    & ::after {
      background-color: #FFF;
      mask-position: 0 0;
    }
  }
}


/* ---------- footer ---------- */
.footerCopy {
  padding-block: 1.17vw;
  text-align: center;
  & small {
    font-size: 0.88vw;
  }
}
@media (width <= 768px) {
  .footerCopy {
    padding-block: 11.2vw 36.53vw;
    & small {
      font-size: 3.2vw;
    }
  }
}



.pageTopWrap {
  position: fixed;
  right: max(calc(50% - 44vw), calc(50% - 600px));
  bottom: 100px;
  translate: 50% 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  &.is-show {
    opacity: 1;
    visibility: visible;
  }
  &.is-absolute {
    position: absolute;
    top: 112px;
    bottom: auto;
  }
}
@media (width < 768px) {
  .pageTopWrap {
    right: 40px;
    bottom: 16px;
    &.is-absolute {
      top: 270px;
    }
  }
}

.pageTop {
  position: relative;
  display: block;
  width: 65px;
  border-radius: 100%;
  background: #37ADBC;
  aspect-ratio: 1;
  transition: background .3s;
  &::after {
    position: absolute;
    top: calc(50% + 3px);
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    width: 18px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    aspect-ratio: 1;
    content: "";
  }
}
@media (width < 768px) {
  .pageTop {
    width: 50px;
    &::after {
      width: 14px;
    }
  }
}
@media (hover: hover) {
  .pageTop:hover {
    background-color: #5BBCCE;
  }
}


/* ==============================================================
*  animation
* ============================================================ */
.barSlideIn {
  & > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      clip-path: inset(0 100% 0 0);
      transition: clip-path .6s cubic-bezier(0.37, 0, 0.63, 1);
      content: "";
    }
    & span {
      display: inline-block;
      clip-path: inset(0 100% 0 0);
      transition: clip-path .6s cubic-bezier(0.37, 0, 0.63, 1);
    }
    &:nth-of-type(1) {
      & span {
        transition-delay: .6s;
      }
    }
    &:nth-of-type(2) {
      &::before {
        transition-delay: .3s;
      }
      & span {
        transition-delay: .9s;
      }
    }
    &:nth-of-type(3) {
      &::before {
        transition-delay: .6s;
      }
      & span {
        transition-delay: 1.5s;
      }
    }
  }
  &.is-animated {
    & > span {
      &::before {
        clip-path: inset(0);
      }
      & span {
        clip-path: inset(0);
      }
    }
  }
}

.slideUp {
  & > span {
    translate: 0 100px;
    display: inline-block;
    opacity: 0;
    transition: translate 1s .5s ease-out, opacity 1s .5s ease-out;
    &:nth-of-type(2) {
      transition-delay: .8s;
    }
  }
  &.is-animated {
    & > span {
      translate: 0 0;
      opacity: 1;
    }
  }
}




/* ==============================================================
*  utility
* ============================================================ */
.visuallyHidden {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  margin: -1px!important;
  padding: 0!important;
  border: 0!important;
  clip: rect(0,0,0,0)!important;
  overflow: hidden!important;
  white-space: nowrap!important;
}

@media (width > 768px) {
  .hiddenPc {
    display: none !important;
  }
}

@media (width <= 768px) {
  .hiddenSp {
    display: none !important;
  }
}