@charset 'UTF-8';

:root {
  --white: #fff;
  --black: #000;
  --gray1: #fbfbfb;
  --gray2: #f5f5f5;
  --gray3: #e4e4e4;
  --purple: #a12e7a;
  --blue: #136ad2;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  font-feature-settings: "palt";
  font-optical-sizing: auto;
  line-height: 1.6;
  color: var(--black);
  letter-spacing: 0.04em;
  background: var(--gray2);
}

p {
  margin: 1em 0;
}

a {
  text-decoration: none;
}

main {
  min-width: 350px;
  background: var(--gray1);
  container-type: inline-size;
}

header {
  aspect-ratio: 434 / 72;
  border-bottom: 0.3cqw solid var(--gray3);
}

.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 25px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 92 / 40;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--white);
  background: var(--purple);
  border-radius: 7px;
}

.section-inner {
  padding: 80px 0;
  margin: auto;
}

.sec01 .section-inner {
  width: 305px;
  padding-top: 60px;
}

.sec01-img01 {
  width: 100%;
}

.sec01-txt01 {
  font-size: 19px;
  font-weight: bold;
}

.sec01-txt01 :first-child {
  font-size: 23px;
}

.sec01-txt01 em {
  font-size: 1.211em;
  font-style: normal;
}

.sec01-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 281px;
  aspect-ratio: 281 / 48;
  padding: 5px 25px;
  margin: auto;
  font-size: 18px;
  font-weight: bold;
  color: var(--white);
  background: var(--purple);
  border-radius: 10px;
}

.sec01-btn::after {
  width: 10px;
  aspect-ratio: 1;
  content: "";
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
  transform: rotate(135deg);
}

.sec02 .section-inner {
  padding-top: 0;
}

.sec02-box {
  width: 340px;
  padding: 30px;
  margin: auto;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 3px 20px -12px #0009;
}

.sec02-title {
  padding-left: 60px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--blue);
  background: left center / 40px 53px url("./img02.svg") no-repeat;
}

.sec02-category {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.sec02-category-item {
  padding: 4px 18px;
  font-size: 15px;
  color: var(--white);
  background: var(--purple);
  border-radius: 5px;
}

.sec02-list {
  padding-top: 20px;
  padding-left: 1.3em;
}

.sec02-list-item {
  font-size: 15px;
  font-weight: bold;
  list-style-type: disc;
}

.sec03 {
  color: var(--white);
  background: var(--purple);
}

.sec03-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.sec03-flow {
  width: 325px;
  padding-top: 60px;
  margin: auto;
}

.sec03-flow-title {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.sec03-flow-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  font-size: 52px;
  color: var(--purple);
  background: var(--white);
}

.sec03-flow-box {
  padding: 10px 0 10px 50px;
  margin: 30px 0 30px 35px;
  border-left: 1px solid var(--white);
}

.sec03-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 239 / 48;
  padding: 5px 25px;
  margin: auto;
  font-size: 18px;
  font-weight: bold;
  color: var(--purple);
  background: var(--white);
  border-radius: 10px;
}

.sec03-btn::after {
  width: 10px;
  aspect-ratio: 1;
  content: "";
  border-top: 1px solid var(--purple);
  border-left: 1px solid var(--purple);
  transform: rotate(135deg);
}

.sec03-notes {
  font-size: 13px;
  color: var(--black);
}

.sec03-txt01 {
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

.sec03-txt01 em {
  margin: 0 0.05em;
  font-size: 80px;
  font-style: normal;
  font-weight: bold;
}





.sec04 {
  background: var(--gray2);
}

.sec04 .section-inner {
  padding-bottom: 20px;
}

.sec04-block {
  width: 325px;
  padding: 30px;
  margin: auto;
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: bold;
  background: var(--white);
  border-radius: 20px;
}

.sec04-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
}

.sec04-table {
  width: 100%;
}

.sec04-table th, .sec04-table td {
  padding: 3px;
  font-size: 13px;
  font-weight: normal;
  text-align: center;
}

.sec04-table tr :not(:last-child) {
  border-right: 1px solid var(--gray3);
}

.sec04-table tr:nth-of-type(2) th, .sec04-table tr:nth-of-type(2) td {
  border-top: 1px solid var(--gray3);
}

.gmap {
  position: relative;
  left: -20px;
  width: calc(100% + 40px);
  aspect-ratio: 265 / 240;
}

@media screen and (width >= 376px) {
  .header-layout {
    padding: 0 11.52cqw;
  }

  .header-title {
    font-size: 4.14cqw;
  }

  .header-btn {
    padding: 1.152cqw 2.3cqw;
    font-size: 3.687cqw;
    border-radius: 1.613cqw;
  }

  .section-inner {
    padding: 18.433cqw 0;
  }

  .sec01 .section-inner {
    width: 70.276cqw;
    padding-top: 13.825cqw;
  }

  .sec01-txt01 {
    font-size: 4.378cqw;
  }

  .sec01-txt01 :first-child {
    font-size: 5.3cqw;
  }

  .sec01-btn {
    width: 64.747cqw;
    padding: 1.152cqw 5.76cqw;
    font-size: 4.147cqw;
    border-radius: 2.304cqw;
  }

  .sec01-btn::after {
    width: 2.304cqw;
    border-top-width: 0.23cqw;
    border-left-width: 0.23cqw;
  }

  .sec02-box {
    width: 82.258cqw;
    padding: 6.912cqw;
    border-radius: 4.608cqw;
    box-shadow: 0 0.691cqw 4.608cqw -2.765cqw #000a;
  }

  .sec02-title {
    padding-left: 13.825cqw;
    font-size: 5.069cqw;
    background: left center / 40px 53px url("./img02.svg") no-repeat;
    background-size: 9.217cqw 12.212cqw;
  }

  .sec02-category {
    padding-top: 4.608cqw;
  }

  .sec02-category-item {
    padding: 0.922cqw 4.6cqw;
    font-size: 3.456cqw;
    border-radius: 1.152cqw;
  }

  .sec02-list {
    padding-top: 4.608cqw;
  }

  .sec02-list-item {
    font-size: 3.456cqw;
  }

  .sec03-title {
    font-size: 5.53cqw;
  }

  .sec03-flow {
    width: 74.885cqw;
    padding-top: 13.825cqw;
  }

  .sec03-flow-title {
    gap: 5.76cqw;
    font-size: 4.608cqw;
  }

  .sec03-flow-number {
    width: 16.129cqw;
    height: 16.129cqw;
    font-size: 11.982cqw;
  }

  .sec03-flow-box {
    padding: 2.304cqw 0 2.304cqw 11.521cqw;
    margin: 6.912cqw 0 6.912cqw 8.065cqw;
    border-left-width: 0.230cqw;
  }

  .sec03-btn {
    padding: 1.152cqw 5.76cqw;
    font-size: 4.147cqw;
    border-radius: 2.304cqw;
  }

  .sec03-btn::after {
    width: 2.304cqw;
    border-top-width: 0.230cqw;
    border-left-width: 0.230cqw;
  }

  .sec03-notes {
    font-size: 2.995cqw;
  }

  .sec02-txt01 {
    font-size: 4.147cqw;
  }

  .sec02-txt01 em {
    font-size: 18.433cqw;
  }

  .sec04 .section-inner {
    padding-bottom: 4.608cqw;
  }

  .sec04-block {
    width: 74.885cqw;
    padding: 6.912cqw;
    margin-bottom: 9.217cqw;
    font-size: 4.147cqw;
    border-radius: 4.608cqw;
  }

  .sec04-title {
    margin-bottom: 4.608cqw;
    font-size: 5.069cqw;
  }

  .sec04-table th, .sec04-table td {
    padding: 0.691cqw;
    font-size: 2.995cqw;
  }

  .sec04-table tr :not(:last-child) {
    border-right-width: 0.23cqw;
  }

  .sec04-table tr:nth-of-type(2) th, .sec04-table tr:nth-of-type(2) td {
    border-top-width: 0.23cqw;
  }

  .gmap {
    left: -4.608cqw;
    width: calc(100% + 9.216cqw);
  }
}

@media screen and (width >= 600px) {
  main {
    max-width: 600px;
    margin: auto;
  }

  .btn-purple {
    transition: background .3s;
  }

  .btn-purple:active, .btn-purple:hover, .btn-purple:focus {
    background: #de2e7a;
  }

  .btn-white {
    transition: background .3s;
  }

  .btn-white:active, .btn-white:hover, .btn-white:focus {
    background: #ffe4ff;
  }

  .main-inner {
    border-right: 0.3cqw solid var(--gray3);
    border-left: 0.3cqw solid var(--gray3);
  }
}