@charset "utf-8";
/* CSS Document */

/* ----------------------------------------
header
---------------------------------------- */
header a {
  display: block;
}
header {
  position: fixed;
  z-index: 10;
  top: 0px;
  width: 100%;
  padding: 25px 10px;
  background-color: #fff;
}
header .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  width: min(95%, 1400px);
  margin-inline: auto;
}
header .inner,
header .inner .cta_wrap,
.sitemap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sitemap {
  justify-content: flex-end;
}
header .logo img {
  display: block;
  width: 267px;
  height: auto;
}
header .nav_wrap hr,
header .nav_wrap .cta_wrap {
  display: none;
}
@media (max-width: 1300px) {
  header {
    padding: 10px;
  }
  header .logo img {
    width: 190px;
  }
  header .inner .cta_wrap {
    display: none;
  }
  header .sitemap {
    flex-flow: column;
  }
  header .sitemap a {
    width: 100%;
  }
  header .nav_wrap hr,
  header .nav_wrap .cta_wrap {
    display: block;
  }
  header .nav_wrap .cta_wrap {
    font-size: 3.5rem;
  }
}

/* #hamburger */
header input[type="checkbox"],
#hamburger ~ label {
  display: none;
}
@media (max-width: 1300px) {
  #hamburger ~ label {
    position: relative;
    display: block;
    width: 50px;
    aspect-ratio: 1 / 1;
    z-index: 10;
  }
  #hamburger ~ label span {
    --space: 10px;
    position: absolute;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    height: 1px;
    display: inline-block;
    background-color: var(--c_main);
  }
  #hamburger ~ label span:nth-of-type(1) {
    top: calc(50% - var(--space));
  }
  #hamburger ~ label span:nth-of-type(2) {
    top: 50%;
  }
  #hamburger ~ label span:nth-of-type(3) {
    top: calc(50% + var(--space));
  }
  #hamburger:checked ~ label span {
    top: 50%;
  }
  #hamburger:checked ~ label span:nth-of-type(1) {
    rotate: -45deg;
  }
  #hamburger:checked ~ label span:nth-of-type(2) {
    display: none;
  }
  #hamburger:checked ~ label span:nth-of-type(3) {
    rotate: 45deg;
  }

  /* .nav_wrap */
  #hamburger ~ .nav_wrap {
    visibility: hidden;
  }
  #hamburger:checked ~ .nav_wrap {
    visibility: visible;
  }
  body:has(#hamburger:checked) {
    overflow: hidden;
  }

  #hamburger ~ .nav_wrap {
    --width: 320px;
    position: fixed;
    top: 0px;
    /* right: calc(-1 * var(--width)); */
    right: 0px;
    width: min(100%, var(--width));
    height: 100dvh;
    padding-block: calc(var(--height_header) + 20px);
    padding-inline: 20px;
    background-color: color-mix(in srgb, var(--c_main) 10%, #fff);
    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.3));
    overflow-y: scroll;
  }
}

/*----------------------------------------
.fix_footer
----------------------------------------*/
.fix_footer {
  display: none;
}
@media (max-width: 520px) {
  .fix_footer {
    visibility: hidden;
  }
  .scroll .fix_footer {
    visibility: visible;
  }
  .fix_footer {
    display: block;
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
    padding: 1px;
    background-color: var(--c_main);
  }
  .fix_footer .wrap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
  }
  .fix_footer .wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    min-height: 50px;
    padding: 5px;
    color: var(--c_main);
    background-color: var(--base_bg);
  }
}

/* ----------------------------------------
.page_top
---------------------------------------- */
.page_top {
  position: fixed;
  z-index: 100;
  right: 3%;
  bottom: 3%;
  padding: 10px;
  background-color: var(--c_acc);
}
.page_top::before {
  content: "";
  --size: 40px;
  --mask: url(../images/icon_arrow.svg) center center / contain no-repeat;
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: 1 / 1;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: #fff;
  transform: rotate(-90deg);
}
@media (max-width: 520px) {
  .page_top {
    bottom: 60px;
  }
  .page_top::before {
    --size: 20px;
  }
}

/* ----------------------------------------
.mv
---------------------------------------- */
.mv {
  --transform: 60px;
}
.mv .lead {
  padding: var(--transform) 0 calc((var(--transform) + 20px));
  aspect-ratio: 1440 / 800;
}
.mv .pnav_list {
  transform: translateY(calc(-1 * var(--transform)));
}
.mv .pnav_list .grid_4c {
  --gap: 24px;
}
.mv .pnav_list a {
  --size: 32px;
  --padding: 15px;
  --arrow: 10px;
  position: relative;
  padding: var(--padding);
  padding-bottom: calc(var(--padding) + var(--arrow));
  background-color: #fff;
  border: 1px solid color-mix(in srgb, var(--c_main) 50%, #fff);
}
.mv .pnav_list a::after {
  content: "";
  position: absolute;
  top: calc(100% - var(--arrow));
  left: 50%;
  transform: translate(-50%, 0%) rotate(90deg);
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: 1 / 1;
  background: url(../images/icon_arrow.svg) center center / contain no-repeat;
}
.mv .pnav_list dt {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid;
}
.mv .pnav_list dd {
  font-size: 1.3rem;
}
.mv .pnav_list dd span {
  display: block;
  font-size: 1.8rem;
  font-family: var(--ff_jp02);
}
@media (max-width: 520px) {
  .mv {
    --transform: 20px;
  }
  .mv .lead {
    aspect-ratio: auto;
    min-height: 600px;
  }
  .mv .pnav_list .grid_4c {
    --gap: 15px;
  }
  .mv .pnav_list a {
    padding-bottom: var(--padding);
    padding-right: var(--size);
  }
  .mv .pnav_list a::after {
    top: var(--padding);
    left: auto;
    right: 0;
    transform: rotate(90deg);
  }
}

/* ----------------------------------------
.reason_list
---------------------------------------- */
.reason_list li {
  padding: 30px 20px;
  border: 1px solid;
}
.reason_list .figure {
  width: 75px;
  margin: 0 auto;
}
.reason_list dl {
  margin-top: 20px;
}
.reason_list dt {
  font-size: 2.2rem;
  font-family: var(--ff_jp02);
  text-align: center;
}
.reason_list dd {
  margin-top: 20px;
}

/* ----------------------------------------
.trouble
---------------------------------------- */
.trouble dt {
  --size: 0.6em;
  position: relative;
  margin-bottom: var(--size);
  padding: 5px 20px;
  background-color: #fff;
  border-bottom: 1px solid;
}
.trouble dt::after {
  content: "";
  position: absolute;
  top: calc(100% - var(--size) - 1px);
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  display: block;
  width: calc(2 * var(--size));
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: var(--base_bg);
  clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
  border-bottom: 1px solid;
}
.trouble dd li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
}
.trouble dd li::before {
  content: "";
  display: block;
  width: 1.5em;
  height: auto;
  aspect-ratio: 1 / 1;
  background: url(../images/icon_check.svg) center center / contain no-repeat;
}

/* ----------------------------------------
.benefits_list
---------------------------------------- */
.benefits_list {
  counter-reset: num 0;
}
.benefits_list li {
  padding: 30px 15px;
  background-color: var(--c_main);
}
.benefits_list li i {
  display: block;
  font-size: 2.4rem;
  font-family: var(--ff_jp02);
  text-align: center;
}
.benefits_list li i::before {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  border-bottom: 1px solid;
}
.benefits_list dl {
  margin-top: 20px;
}
.benefits_list dt {
  font-size: 2.2rem;
  font-family: var(--ff_jp02);
  text-align: center;
}
.benefits_list dd {
  margin-top: 20px;
}

/* ----------------------------------------
.map
---------------------------------------- */
.map iframe {
  aspect-ratio: 740 / 400;
}

/* ----------------------------------------
form
---------------------------------------- */
form .policy {
  overflow-y: scroll;
  height: 200px;
  padding: 20px;
  border: 1px solid;
}
.action {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row-reverse;
  gap: 10px;
}
.action a,
.action [type="submit"],
.action [type="button"] {
  --btn_color: #fff;
  --btn_bg: var(--base_color);
  -webkit-appearance: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  width: fit-content;
  min-height: 70px;
  padding: 20px;
  font-size: 1.6rem;
  font-family: var(--ff_jp02);
  text-align: center;
  color: var(--btn_color);
  background-color: var(--btn_bg);
  border: 1px solid var(--btn_color);
}
@media (max-width: 520px) {
  .action {
    flex-flow: column-reverse;
  }
}

.table_form {
  --width: 25%;
}
@media (min-width: 521px) {
  .table_form th {
    padding-left: max(5%, 100px);
  }
  .table_form td {
    padding-right: max(5%, 100px);
  }
}
.table_form [data-type="require"] p,
[data-name="agree"] p {
  display: flex;
  gap: 5px;
}
.table_form [data-type="require"] p {
  align-items: flex-start;
  flex-flow: column;
}
[data-name="agree"] p {
  justify-content: center;
  align-items: center;
}
.table_form [data-type="require"] p::after,
[data-name="agree"] p::after {
  content: "必須";
  display: block;
  padding: 2px 5px;
  font-size: 0.8em;
  font-weight: bold;
  color: #fff;
  background-color: #dd3423;
}
.table_form :is(input[type="text"], select, textarea) {
  width: 100%;
  padding: 10px;
  background-color: var(--base_bg);
}
.table_form textarea {
  min-height: 200px;
}
@media (max-width: 520px) {
  .table_form [data-type="require"] p {
    flex-flow: row;
    gap: 20px;
  }
}

/* ----------------------------------------
footer
---------------------------------------- */
footer {
  background-color: #e3dfd7;
}
footer .logo img {
  width: 267px;
}
@media (max-width: 520px) {
  footer .logo img {
    width: 60%;
  }
}