@charset "UTF-8";

@layer generic, base;
@import './destyle.min.css' layer(generic);

/* 基本的なスタイル設定 */
@layer base {
  :root {
    --Noto-Sans-JP: 'Noto Sans JP', sans-serif;
    --Roboto: 'Roboto', sans-serif;
    --color-base: #34404b;
    --color-red: #ff3e36;
    --color-green: #04a75f;
    --color-bg: #f0f7ee;
    --color-orange: #fb891f;
    --color-gray: #f5f5f5;
    --leading-trim: calc((1em - 1lh) / 2);
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    --clamp-root-font-size: 16;
    --clamp-slope: calc(
      (var(--clamp-max) - var(--clamp-min)) /
        (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --clamp-y-axis-intersection: calc(
      var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min))
    );
    --clamp-preffered-value: calc(
      var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) +
        (var(--clamp-slope) * 100vi)
    );
    --clamp: clamp(
      calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
      var(--clamp-preffered-value),
      calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
    );
    font-size: var(--clamp);
  }

  /* bodyにデフォルト値を設定する */
  body {
    --clamp-viewport-min: 375;
    --clamp-viewport-max: 1200;
    --clamp-min: 14;
    --clamp-max: 16;
    font-family: var(--Noto-Sans-JP);
    color: var(--color-base);
  }

  img {
    max-inline-size: 100%;
    height: auto;
    vertical-align: bottom;
  }

  .cta-btn {
    display: block;
    &:hover {
      opacity: 0.7;
    }
  }

  /*============================
.l-container
============================*/
  .l-container {
    --size: 1100px;
    --gutter: max(5vi, 20px);

    box-sizing: revert;
    max-inline-size: var(--size);
    padding-inline: var(--gutter);
    margin-inline: auto;
  }

  /*============================
.title
============================*/
  .title {
    text-align: center;
    --clamp-min: 25;
    --clamp-max: 40;
    font-weight: 600;
  }
  .title-number {
    font-family: var(--Roboto);
    color: var(--color-orange);
    font-size: 1.5em;
    margin-inline: 0.1em;
  }
  .title-text {
    font-family: var(--Roboto);
    color: var(--color-orange);
  }
  .text-transform {
    text-transform: uppercase;
  }

  /*============================
 header
============================*/
  .header-title {
    background: var(--color-green);
    padding: 5px 0;
    margin-block-end: 15px;
    h1 {
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
  }

  header {
    background: #fff;
    padding-block: 0 15px;
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-logo {
      inline-size: 200px;
    }
  }

  a.btn {
    display: inline-block;
    padding: 0.8em 2em;
    background-color: #ff3e36; /* 背景色 */
    box-shadow: 0 5px 0 #c8211b;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    &:hover {
      box-shadow: none;
      transform: translateY(5px);
    }
  }

  @media screen and (max-width: 768px) {
    .header-title {
      h1 {
        font-size: 10px;
      }
    }
    .header-inner {
      .header-logo {
        inline-size: 40vw;
      }
    }
    a.btn {
      padding: 0.8em 1em;
    }
  }

  /*============================
   fv
============================*/
  .fv {
    position: relative;
  }
  .fv-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }
  .fv-inner {
    padding-block: 100px;
  }
  .fv-main {
    border: 5px solid var(--color-green);
    border-radius: 10px;
    padding: 1em 1em 4em;
    background-color: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 1;
    max-inline-size: 650px;
    margin-inline: auto;
    text-align: center;
  }
  .fv-main-title {
    background-color: var(--color-green);
    color: #fff;
    padding: 0.3em 1em;
    border-radius: 10px;
    inline-size: fit-content;
    margin-inline: auto;
    position: absolute;
    inset-block-start: -30px;
    inset-inline: 0;
    margin-inline: auto;
    --clamp-min: 22;
    --clamp-max: 30;
  }
  .fv-main-img {
    max-inline-size: 370px;
    margin-inline: auto;
    margin-block: 2em 1em;
  }
  .fv-main-text {
    --clamp-min: 20;
    --clamp-max: 30;
    font-weight: 600;
  }
  .fv-main-btn {
    max-inline-size: 400px;
    margin-inline: auto;
    margin-block: 1em 0;
  }
  .fv-main-bottom {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    inline-size: 110%;
  }
  .fv-main-icon {
    position: absolute;
    right: -30%;
    bottom: -10px;
    inline-size: 300px;
  }

  @media screen and (max-width: 768px) {
    .fv-main-icon {
      position: absolute;
      right: 0;
      bottom: -19vw;
      inline-size: 30vw;
    }
  }

  /*============================
   main
============================*/
  @media screen and (max-width: 768px) {
    .main {
      overflow: hidden;
    }
  }

  /*============================
   step
============================*/
  .step {
    background-color: var(--color-bg);
    padding-block: 5em;
    position: relative;
  }
  .step-bgText {
    position: absolute;
    top: 5%;
    left: 0;
    inline-size: 8vw;
  }
  .step-title {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;
  }
  .step-title-icon {
    position: absolute;
    inline-size: 130px;
    left: -130px;
    top: 50%;
    transform: translateY(-60%);
  }

  .step-cards {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
    position: relative;
    z-index: 2;
  }
  .step-card {
    background: #fff;
    border: 2px solid var(--color-green);
    border-radius: 20px;
    padding: 32px 24px 24px 24px;
    display: grid;
    grid-template-rows: subgrid;
    justify-items: center;
    grid-row: span 4;
    position: relative;
    inline-size: calc((100% - 30px * 2) / 3);
  }
  .step-card:nth-child(1),
  .step-card:nth-child(2) {
    &::before {
      content: '';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 25px 0 25px 20px;
      border-color: transparent transparent transparent var(--color-green);
    }
  }
  .step-card-header {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    aspect-ratio: 1/1;
  }
  .step-card-icon {
    margin-block: 1.7em 1em;
    inline-size: 150px;
    aspect-ratio: 1/1;
  }
  .step-card-title {
    --clamp-min: 20;
    --clamp-max: 28;
    font-weight: 600;
    color: var(--color-green);
    margin-block-end: 1em;
    text-align: center;
    line-height: 1.4;
  }
  .step-card-text {
    --clamp-min: 16;
    --clamp-max: 18;
    color: var(--color-base);
    text-align: center;
    line-height: 1.7;
  }
  @media (max-width: 900px) {
    .step {
      padding-block: 3em;
    }
    .step-bgText {
      display: none;
    }
    .step-title-icon {
      position: absolute;
      inline-size: 22vw;
      left: -22vw;
      top: 50%;
      transform: translateY(-60%);
    }
    .step-cards {
      flex-direction: column;
      align-items: center;
      gap: 4em;
    }
    .step-card {
      max-width: 100%;
      min-width: 0;
      width: 100%;
    }
    .step-card-icon {
      margin-block: 1.7em 1em;
      inline-size: 20vw;
      aspect-ratio: 1/1;
    }
    .step-card:nth-child(1),
    .step-card:nth-child(2) {
      &::before {
        content: '';
        position: absolute;
        left: 50%;
        right: auto;
        top: auto;
        bottom: -20px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 25px 0 25px;
        border-color: var(--color-green) transparent transparent transparent;
      }
    }
  }

  /*============================
   reason
============================*/
  .reason {
    padding-block: 5em;
    position: relative;
  }
  .reason-bgText {
    position: absolute;
    top: 5%;
    right: 0;
    inline-size: 8vw;
  }
  .reason-title {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;
  }
  .reason-title-icon {
    position: absolute;
    inline-size: 130px;
    right: -130px;
    top: 50%;
    transform: translateY(-60%);
  }
  .reason-feature {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    align-items: center;
    background: var(--color-gray);
    border-radius: 10px;
    padding: 3em;
    margin-block-start: 2em;
    gap: 20px;
    position: relative;
    z-index: 2;
  }
  .reason-feature-title {
    color: var(--color-green);
    --clamp-min: 24;
    --clamp-max: 40;
    font-weight: 600;
    margin-block-end: 0.5em;
    line-height: 1.4;
  }
  .reason-feature-desc {
    --clamp-min: 16;
    --clamp-max: 16;
    line-height: 1.7;
  }
  .reason-feature-img img {
    border-radius: 10px;
  }

  @media screen and (max-width: 900px) {
    .reason {
      padding-block: 3em;
    }
    .reason-bgText {
      display: none;
    }
    .reason-title-icon {
      position: absolute;
      inline-size: 18vw;
      right: -20vw;
      top: 50%;
      transform: translateY(-60%);
    }
  }
  @media screen and (max-width: 768px) {
    .reason-feature {
      grid-template-columns: 1fr;
      padding: 2em;
    }
  }

  /*============================
   cta
============================*/
  .cta {
    background-color: var(--color-green);
    padding-block: 1em;
    position: relative;
  }
  .cta-block {
    border: 4px solid #027e47;
    border-radius: 10px;
    padding: 2em 5em 2em 2em;
    background-color: #fff;
    max-inline-size: 920px;
    margin-inline: auto;
    position: relative;
  }
  .cta-block-text {
    margin-left: auto;
    inline-size: fit-content;
  }
  .cta-block-title {
    position: relative;
    --clamp-min: 19;
    --clamp-max: 40;
    font-weight: 600;
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-end: 0.5em;
    &::before {
      content: '';
      position: absolute;
      left: -35px;
      bottom: -5px;
      inline-size: 25px;
      height: 51px;
      background-image: url(../img/cta/title-deco01.png);
      background-size: contain;
      background-repeat: no-repeat;
    }
    &::after {
      content: '';
      position: absolute;
      right: -35px;
      bottom: -5px;
      inline-size: 25px;
      height: 51px;
      background-image: url(../img/cta/title-deco02.png);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .cta-block-btn {
    inline-size: 560px;
    margin-inline: auto;
  }
  .cta-block-img {
    position: absolute;
    left: 20px;
    bottom: 0;
    inline-size: 200px;
  }
  @media screen and (max-width: 960px) {
    .cta-block {
      padding: 2em;
    }
    .cta-block-text {
      margin: auto;
      inline-size: fit-content;
    }
    .cta-block-img {
      display: none;
    }
  }
  @media screen and (max-width: 768px) {
    .cta-block-btn {
      inline-size: 100%;
    }
    .cta-block-title {
      &::before {
        left: -6vw;
        bottom: -9px;
        inline-size: 20px;
        height: 41px;
      }
      &::after {
        right: -6vw;
        bottom: -9px;
        inline-size: 20px;
        height: 41px;
      }
    }
  }

  /*============================
   voice
============================*/
  .voice {
    background-color: var(--color-bg);
    padding-block: 60px 100px;
    position: relative;
  }
  .voice-bgText {
    position: absolute;
    top: 5%;
    left: 0;
    inline-size: 8vw;
  }
  .voice-title {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-end: 7em;
  }
  .voice-title-icon {
    position: absolute;
    inline-size: 120px;
    left: -130px;
    top: 50%;
    transform: translateY(-60%);
  }
  .voice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 70px 20px;
    margin-top: 2em;
  }
  .voice-card {
    background: #fff;
    border: 2px solid var(--color-green);
    border-radius: 10px;
    padding: 4em 2em 2em;
    position: relative;
  }
  .voice-card-img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    inline-size: 100px;
    aspect-ratio: 1/1;
  }
  .voice-card-title {
    text-align: center;
    --clamp-min: 18;
    --clamp-max: 26;
    font-weight: 600;
    color: var(--color-green);
    margin-block-end: 0.6em;
  }
  .voice-card-text {
    line-height: 1.5;
  }
  @media screen and (max-width: 768px) {
    .voice {
      padding-block: 60px 3em;
    }
    .voice-bgText {
      display: none;
    }
    .voice-title {
      margin-block-end: 5em;
    }
    .voice-title-icon {
      position: absolute;
      inline-size: 110px;
      left: -110px;
      top: 50%;
      transform: translateY(-60%);
    }
    .voice-cards {
      gap: 4em;
    }
  }
  @media screen and (max-width: 425px) {
    .voice-title-icon {
      inline-size: 20vw;
      left: -20vw;
    }
  }
  /*============================
   faq
============================*/
  .faq {
    padding-block: 60px 100px;
    position: relative;
  }
  .faq-bgText {
    position: absolute;
    top: 5%;
    right: 0;
    inline-size: 8vw;
  }
  .faq-title {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;
  }
  .faq-title-icon {
    position: absolute;
    inline-size: 80px;
    right: -38%;
    top: 50%;
    transform: translateY(-60%);
  }

  .accordion {
    margin-block-start: 2em;
    position: relative;
    z-index: 2;
    max-inline-size: 800px;
    margin-inline: auto;
    & + & {
      margin-block-start: 1.5em;
    }
    h3 {
      --clamp-min: 16;
      --clamp-max: 20;
      font-weight: 600;
      &:hover {
        cursor: pointer;
      }
    }
  }

  .button {
    --_foreground: #34404b;
    --_background: #f5f5f5;
    --_duration: 0.3s;

    display: block grid;
    grid-template: '. icon' / 1fr 1em;
    column-gap: 1em;
    align-items: center;
    padding-block: calc(1.3em + var(--leading-trim));
    padding-inline: 2em;
    background-color: color-mix(in sRGB, var(--_background), black var(--_darken, 0%));
    color: var(--_foreground);
    letter-spacing: 0.1em;
    transition: background-color var(--_duration);
    border-radius: 5px;
    &::before,
    &::after {
      content: '';
      grid-area: icon;
      border-block-end: 3px solid var(--color-green);
    }
    &::after {
      rotate: 90deg;
      transition: opacity var(--_duration);
    }
    &[aria-expanded='true'] {
      --_darken: 20%;
    }
    &:not([aria-expanded='true']):focus-visible {
      --_darken: 10%;
    }
    &:not([aria-expanded='true']):hover {
      @media (any-hover: hover) {
        --_darken: 10%;
      }
    }
    &[aria-expanded='true']::after {
      opacity: 0;
    }
  }
  .panel {
    background-color: #fcfcfc;
    &:target {
      display: revert;
    }
  }
  .accordion-inner {
    padding: 1.5em;
    p {
      line-height: 1.7;
    }
  }

  @media screen and (max-width: 768px) {
    .faq {
      padding-block: 3em;
    }
    .faq-bgText {
      display: none;
    }
    .faq-title-icon {
      position: absolute;
      inline-size: 80px;
      right: -100px;
      top: 50%;
      transform: translateY(-60%);
    }
    .button {
      padding-inline: 1.5em;
    }
  }
  @media screen and (max-width: 425px) {
    .faq-title-icon {
      inline-size: 15vw;
      right: -20vw;
    }
  }
  /*============================
   contact
============================*/
  .contact {
    background-color: var(--color-bg);
    padding-block: 60px 100px;
    position: relative;
  }
  .contact-bgText {
    position: absolute;
    top: 5%;
    left: 0;
    inline-size: 8vw;
  }
  .contact-title {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-end: 3em;
  }
  .contact-title-icon {
    position: absolute;
    inline-size: 160px;
    left: -45%;
    top: 50%;
    transform: translateY(-40%);
  }

  .contact-form {
    background: #fff;
    padding: 3em;
    border-radius: 10px;
    max-inline-size: 900px;
    margin-inline: auto;
  }

  .formTable {
    width: 100%;
    margin: 0 auto 1.5em;
    border-collapse: collapse;
  }
  .formTable dt {
    width: 100%;
    font-size: 18px;
    text-align: left;
    font-weight: 600;
  }
  .formTable dd {
    margin-top: 1em;
    max-inline-size: 100%;
    font-weight: normal;
    text-align: left;
  }
  .formTable dd.form-text-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .formTable dd.form-text-group input[type='text'] {
    width: 10em;
  }
  .formTable dd.form-checkbox-group input[type='checkbox'] {
    margin-inline-end: 5px;
  }
  .formTable dd + dt {
    margin-top: 2em;
  }
  .formTable .form-radio-group,
  .formTable .form-checkbox-group {
    display: flex;
    gap: 1.5em;
    align-items: center;
  }
  .formTable .form-radio-group label {
    &:hover {
      cursor: pointer;
    }
  }
  .form-select-group {
    display: inline-flex;
    align-items: center;
    position: relative;
    max-inline-size: 300px;
    &::after {
      position: absolute;
      right: 15px;
      width: 10px;
      height: 7px;
      background-color: #535353;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: '';
      pointer-events: none;
    }
  }
  .form-select-group select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: 0.4em calc(0.8em + 30px) 0.4em 0.8em;
    border: none;
    border-radius: 3px;
    background: #f5f5f5;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
  }
  button,
  input,
  optgroup,
  textarea {
    appearance: auto;
    background-color: #f5f5f5;
    box-sizing: border-box;
  }
  .formTable input[type='text'],
  .formTable textarea {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #cbcbcb;
    padding: 0.5em;
    font-size: 1em;
  }
  .formTable textarea {
    min-height: 100px;
  }
  .form-checkbox {
    margin-block-start: 2em;
    text-align: center;
    label {
      &:hover {
        cursor: pointer;
      }
    }
  }
  .privacy {
    border: 2px solid var(--color-gray);
    padding: 2em;
    block-size: 200px;
    border-radius: 10px;
    max-inline-size: 900px;
    margin-inline: auto;
    overflow-y: scroll;
  }
  .privacy-header-title {
    --clamp-min: 15;
    --clamp-max: 18;
    font-weight: 600;
  }
  .privacy-header-text {
    --clamp-min: 14;
    --clamp-max: 16;
    margin-block-start: 0.5em;
  }
  .privacy-content {
    margin-block-start: 1em;
  }
  .privacy-content-title {
    font-weight: 600;
    margin-block-end: 0.5em;
  }
  .privacy-content-text {
    --clamp-min: 14;
    --clamp-max: 14;
  }
  .privacy-content-list {
    margin-block-start: 0.5em;
    padding-inline-start: 1em;
    list-style: disc;
  }
  .privacy-content-list-item {
    --clamp-min: 14;
    --clamp-max: 14;
    & + & {
      margin-block-start: 0.5em;
    }
  }

  .form-btn {
    margin-block-start: 2em;
  }
  input[type='submit'] {
    background: none;
    display: block;
    inline-size: 300px;
    margin-inline: auto;
    padding: 1em;
    background-color: var(--color-green);
    color: #fff;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    &:hover {
      opacity: 0.7;
    }
  }
  input[type='submit']:disabled {
    background: #cbcbcb;
    cursor: not-allowed;
  }
  @media screen and (max-width: 768px) {
    .contact {
      padding-block: 60px 3em;
    }
    .contact-bgText {
      display: none;
    }
    .contact-title-icon {
      position: absolute;
      inline-size: 130px;
      left: -130px;
      top: 50%;
      transform: translateY(-40%);
    }
    .contact-form {
      padding: 2em 1em;
    }
    #formWrap {
      width: 95%;
      margin: 0 auto;
    }
    .formTable .form-radio-group,
    .formTable .form-checkbox-group {
      flex-direction: column;
      align-items: flex-start;
    }
    .formTable th,
    .formTable td {
      width: auto;
      display: block;
    }
    .formTable th {
      margin-top: 5px;
      border-bottom: 0;
    }
    .privacy {
      padding: 1em;
    }
  }
  @media screen and (max-width: 425px) {
    .contact-title-icon {
      inline-size: 25vw;
      left: -25vw;
    }
  }
  /*============================
   footer
============================*/
  .footer {
    padding-block: 3em 1em;
  }
  .footer-logo {
    margin-inline: auto;
    inline-size: 200px;
    margin-block-end: 2em;
  }
  .footer-nav {
    margin-block: 2em;
  }
  .footer-nav-list {
    display: flex;
    gap: 2em;
    justify-content: center;
  }
  .footer-nav-item {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      background-color: var(--color-base);
      width: 1px;
      height: 100%;
      bottom: 0;
      left: -15px;
    }
    &:nth-child(1)::before {
      display: none;
    }
    a {
      &:hover {
        opacity: 0.7;
      }
    }
  }
  .footer-copyright {
    text-align: center;
  }
  @media screen and (max-width: 768px) {
    .footer-logo {
      inline-size: 50%;
    }
  }
}

.thanks {
  margin: 100px auto;
}
@media screen and (max-width: 768px) {
  .thanks {
    margin: 50px auto;
  }
}

.thanks .title {
  --clamp-min: 20;
  --clamp-max: 30;
  margin-block-end: 1em;
  text-align: center;
  color: var(--color-green);
}

.thanks .text {
  --clamp-min: 18;
  --clamp-max: 18;
  text-align: center;
}

.thanks a {
  inline-size: 300px;
  margin: 2em auto 0;
  background: var(--color-green);
  border: 1px solid var(--color-green);
  color: #fff;
  border-radius: 50vw;
  display: block;
  text-align: center;
  padding: 10px;
}
.thanks a:hover {
  background: #fff;
  border: 1px solid var(--color-green);
  color: var(--color-green);
}