@charset 'utf-8';
/* reset, header, common, fv, price, product, cta, promise, simulation, choice_reason, voice, subsidy, benefit, message, faq, area, flow, fix_cv, contact, company_terms*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --black: #333;
  --teal: #02BFBF;
  --yellow: #FFFF4D;
  --blue: #58A9E4;
  --dark_gray: #1D1D20;
  --red: #FF6666;
  --white_gray: #F7F7F7;
  --font_size-xs: 0.75rem;   /* 12px */
  --font_size-sm: 0.875rem;  /* 14px */
  --font_size-md: 1.125rem;  /* 18px */
  --font_size-lg: 1.25rem;   /* 20px */
  --font_size-xl: 1.5rem;    /* 24px */
  --font_size-2xl: 2rem;     /* 32px */
  --font_size-3xl: 2.5rem ;  /* 40px */
  --font_size-4xl: 3rem;     /* 48px */
  /* 1.75rem 28px */
  /* 1.875rem 30px */
  /* 2.25rem 36px */
  /* 2.375rem 38px */
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}
html.is_no_smooth {
  scroll-behavior: auto;
}
body, h1, h2, h3, h4, p, blockquote, dl, dd {
  margin-block-end: 0;
}
figure {
  margin: 0;
}
body, h1, h2, h3, h4 {
  margin-block-start: 0;
}
body, p, ul, ol, td, th {
  margin: 0;
  padding: 0;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
body {
  color: var(--black);
  font-size: 1rem;
  font-family: "Zen Maru Gothic", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 2;
  min-height: 100vh;
}
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}
a {
  color: currentColor;
  text-decoration: none;
}
img,
picture {
  max-width: 100%;
  vertical-align: bottom;
  height: auto;
}
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}
:target {
  scroll-margin-block: 5ex;
}
address {
  font-style: normal;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: var(--font_size-sm);
  }
  .pc {
    display: none;
  }
}

/*-----------------
common
-----------------*/
.c-inner {
  width: min(90%, 1000px);
  margin: 0 auto;
}

.c-heading_band {
  font-size: var(--font_size-4xl);
  text-align: center;
  margin-bottom: 20px;
  .c-ttl_text {
    font-size: 1em;
  }
  .c-ttl_sub {
    display: block;
    font-size: 0.5em;
    margin-bottom: 20px;
  }
  .c-ttl_sub.side_slash_text {
    display: inline-flex;
  }
}

@media screen and (max-width: 767px) {
  .c-heading_band {
    font-size: 1.875rem;
    margin-bottom: 30px;
  }
}

.u-text_teal {
  color: var(--teal);
}
.u-text_red {
  color: var(--red);
}
.u-text_yellow {
  color: var(--yellow);
}
.u-text_blue {
  color: var(--blue);
}
.u-font_w_normal {
  font-weight: 400;
}

.side_slash_text {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  /*color: #fff;*/
  /*font-weight: 700;*/
  /*line-height: 1.6;*/
  width: 100%;
}
.slashes {
  display: flex;
  gap: 4px;
}
.slashes span {
  display: block;
  width: 2px;
  height: 1.3em;
  background: #fff;
}
.slashes_left span {
  transform: rotate(-25deg);
}
.slashes_right span {
  transform: rotate(25deg);
}

/*-----------------
common btn
-----------------*/
.c_btn_upper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--font_size-sm);
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-bottom: 7px;
}

.c_btn {
  border: none;
  border-radius: 5em;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font_size-md);
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 5px;
  position: relative;
  .sm {
    font-size: 0.77em;
    font-weight: 700;
  }
}
.c_btn:before {
  content: '';
  background: linear-gradient(0deg, transparent, #fff);
  border-radius: 5em;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}
.c_btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 5em;
  aspect-ratio: 1 / 1;
  height: 100%;
}
.c_btn .icon img {
  width: 20px;
}
.c_btn .text {
  display: inline-block;
  text-shadow: rgba(0, 0, 0, 0.25) 0 1px;
}

.btn_tel_upper {
  background-color: var(--red);
  border-radius: 3em;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--font_size-sm);
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding: 2px;
}

.btn_tel .tel_num {
  font-size: 2.375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.15;
  white-space: nowrap;
}
.btn_tel .tel_num .icon {
  position: relative;
  top: 2px;
}

.btn_line {
  background-color: #06C755;
  box-shadow: 0 2px #00A142;
}

.btn_mail {
  background-color: var(--teal);
  box-shadow: 0 2px #2CACAC;
}

.open_time {
  color: #666;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-top: 3px;
  white-space: nowrap;
}
.open_time .label {
  border: 1px solid #666;
  display: inline-block;
  font-size: 0.9em;
  margin-right: 5px;
  padding: 0 2px;
}

/*-----------------
header
-----------------*/
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-x: scroll;
  gap: 20px;
  padding: 19px 40px 26px 30px;
  visibility: hidden;
  opacity: 0;
}
.wf_active .header {
  visibility: visible;
  opacity: 1;
  transition: 0.1s;
}
.header_logo_area {
  color: #999;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font_size-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  width: 470px;
  min-width: 470px;
  .logo {
    max-width: 290px;
    min-width: 150px;
    margin-top: 10px;
  }
}

.header_btns {
  display: flex;
  gap: 20px;
  margin-left: auto;
  margin-top: 13px;
  .c_btn {
    width: 230px;
    height: 60px;
    letter-spacing: 0.08em;
  }
  .open_time {
    font-size: var(--font_size-sm);
    display: flex;
    gap: 18px;
  }
}

@media screen and (max-width: 768px) {
  .header {
    padding: 14px 14px;
  }
  .header_logo_area {
    font-size: 10px;
    min-width: inherit;
    .logo {
      width: 45%;
    }
  }
  .header_btns {
    display: none;
  }
}

/*-----------------
fv
-----------------*/
.fv {
  overflow: hidden;
}
.fv_inner {
  font-size: clamp(15px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: 0.05em;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.fv_img_01 {
  position: absolute;
  bottom: 0;
  left: -23vw;
  width: min(34.666vw, 528px);
}
.fv_img_02 {
  position: absolute;
  bottom: 0;
  right: -19.5vw;
  width: min(29.333vw, 445px);
}
.fv_img_03 {
  position: absolute;
  top: 0;
  right: -20%;
  width: min(13vw, 128px);
}

.fv_catch_01 {
  border-radius: 3em;
  font-size: 1em;
  line-height: 1.6;
  outline: 1px solid var(--black);
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  width: fit-content;
  z-index: 1;
  &::before {
    content: "";
    border-radius: 3em;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: -1;
  }
  .accent {
    color: var(--red);
  }
}

.fv_catch_02 {
  font-size: 1em;
  line-height: 1.2;
  margin-top: 15px;
  text-shadow: 0 3px #fff;
  .text1 {
    display: inline-block;
    font-size: 1.56em;
    margin-left: 23px;
  }
  .text2 {
    display: inline-block;
    font-size: 4.875em;
    line-height: 0.9;
    margin-left: 8px;
    vertical-align: text-bottom;
  }
}

.fv_catch_03 {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 30px auto 0;
  width: 96%;
}

.fv_catch_04 {
  width: 75%;
  margin: 16px auto 0;
  position: relative;
  left: 10px;
}

.fv_medal {
  display: flex;
  justify-content: center;
  gap: 14px;
  width: 72%;
  margin: 2px auto;
  img {
    max-width: 150px;
    width: 34%;
  }
}

.fv_banner {
  display: flex;
  justify-content: center;
  margin-top: 26px;
  gap: 16px;
  .bnr_wrap {
    max-width: 225px;
  }
  img {
    width: 100%;
  }
}

.fv_note {
  font-size: 0.375em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  margin-top: 25px;
}

@media screen and (min-width: 768px) {
  .fv {
    background: url(../img/fv_bg.webp) center/cover no-repeat;
    padding: 74px 0 0;
  }
  .fv_inner {
    width: 80%;
    padding-bottom: 14px;
  }
}

@media screen and (max-width: 767px) {
  .fv_sp_upper_area {
    background: url(../img/fv_bg.webp) center/cover no-repeat;
    position: relative;
    padding-top: 28px;
    padding-bottom: 34vw;
  }
  .fv_img_01 {
    left: -10px;
    width: 58%;
  }
  .fv_img_02 {
    right: 0;
    width: 48%;
  }
  .fv_img_03 {
    display: none;
  }
  .fv_catch_01 {
    padding: 0 10px;
  }
  .fv_catch_03 {
    gap: 5px;
  }
  .fv_catch_03 {
    width: 80%;
  }
  .fv_medal {
    justify-content: flex-end;
  }
  .fv_note {
    font-size: 12px;
    margin-top: 14px;
  }
  .fv_banner .bnr_wrap {
    width: 36%;
  }
}

/*-----------------
price
-----------------*/
.price .c-heading_band {
  background-color: #FFF0F0;
  margin-bottom: 46px;
  padding: 50px 0 58px;
  .text1 {
    color: var(--red);
    font-size: 1.3em;
  }
  .text_group {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 33px;
    position: relative;
    left: 10px;
  }
  .text2_wrap {
    font-size: 0.666em;
    line-height: 1.4;
  }
  .text2 {
    color: var(--red);
  }
  .text3 {
    background-color: var(--red);
    border-radius: 3em;
    color: #fff;
    display: inline-block;
    line-height: 1.2;
    padding: 0 1em;
  }
  .text4 {
    line-height: .7;
    position: relative;
    z-index: 1;
    &::after {
      content: '';
      background-color: rgba(255, 255, 77, 0.85);
      position: absolute;
      display: block;
      height: 15px;
      width: 100%;
      bottom: 0;
      z-index: -1;
    }
  }
  .text4-2 {
    display: inline-block;
    font-size: 2em;
    font-weight: 400;
    rotate: 15deg;
    vertical-align: middle;
    position: relative;
    top: -0.15em;
    z-index: 2;
  }
}

.price_main_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(27px, 4.8vw, 70px);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 50px;
}

.price_reason .ttl_wrap {
  text-align: center;
}
.price_reason .ttl {
  font-size: var(--font_size-3xl);
  &.side_slash_text {
    gap: 0.8em;
  }
  .slashes span {
    background-color: var(--black);
    height: 1em;
  }
}

@media screen and (max-width: 767px) {
  .price {
    margin: 20px auto 0;
  }
  .price .c-heading_band .text_group {
    align-items: center;
    flex-direction: column;
  }
  .price_reason .ttl {
    font-size: 1.875rem;
  }
}


.reason_list {
  display: grid;
}

.reason_item {
  background-color: #fff;
  img {
    width: 100%;
  }
  .list_ttl_wrap {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--teal);
    color: #fff;
    font-size: clamp(18px, 2vw, 24px);
    text-align: center;
    position: relative;
    padding: 10px 10px 8px;
    .ttl_text {
      line-height: 1.3;
    }
    .emph {
      color: var(--yellow);
      font-size: 1.3em;
    }
    .emph2 {
      color: var(--yellow);
      font-size: 1.3em;
      .sm {
        font-size: 0.625em;
      }
    }
  }
  .reason_tag {
    background: #fff;
    border-radius: 3em;
    color: var(--teal);
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    font-size: 15px;
    line-height: 0.8;
    padding: 0 1em;
    position: relative;
    width: fit-content;
    margin: 0 auto 10px;
    .num {
      font-size: 1.6em;
      vertical-align: text-bottom;
      position: relative;
      top: -1px;
    }
  }
  .text_wrap {
    font-weight: 400;
  }
}

.price_reason {
  .reason_list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 40px;
  }
  .reason_item {
    border: 1px solid #ddd;
    box-shadow: 1px 2px 2px rgb(0 0 0 / 0.1);
    .text_wrap {
      padding: 20px 9% 28px;
    }
  }
}

/*-----------------
product
-----------------*/
.product {
  background-color: rgba(255, 102, 102, 0.1);
  margin-top: 78px;
}
.product .c-heading_band {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%), var(--red);
  color: #fff;
  padding: 38px 0;
}

.product_lead {
  font-size: var(--font_size-2xl);
  line-height: 1.6;
  text-align: center;
  .marker {
    background: linear-gradient(transparent 0%, transparent 66%,var(--yellow)66%,var(--yellow)100%);
    display: inline-block;
  }
  .waribiki {
    color: var(--red);
    line-height: 1;
    font-size: 1.5em;
    position: relative;
    top: 8px;
  }
}
.product_lead.text2 {
  line-height: 1.2;
  position: relative;
  right: 17px;
  .marker {
    position: relative;
    left: 0.4em;
  }
  .num {
    font-size: 2em;
    line-height: 0.9;
  }
}
.kakomi_moji {
  background-color: var(--red);
  border-radius: 3em;
  color: #fff;
  display: inline-block;
  font-size: 1.125em;
  aspect-ratio: 1 / 1;
  width: 1.45em;
  position: relative;
  padding-top: 4px;
  top: -4px;
  &.moji1 {
    left: 0.4em;
  }
  &.moji2 {
    left: 0.18em;
  }
}

.komikomi_box {
  background-color: #fff;
  box-shadow: 1px 2px 2px rgb(0,0,0,0.1);
  font-size: 24px;
  margin-top: 24px;
  margin-bottom: 60px;
}
.komikomi_box_header {
  background-color: rgba(255, 102, 102, 0.4);
  font-size: 24px;
  padding: 10px;
  text-align: center;
  .emph {
    background-color: var(--red);
    border-radius: 4px;
    color: var(--yellow);
    margin: 0 4px;
    padding: 1px 10px;
  }
}
.komikomi_detail {
  padding: 25px 10px 26px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .product_lead {
    font-size: 22px;
  }
  .product_lead.text2 {
    margin-top: 30px;
  }
  .kakomi_moji {
    padding-top: 3px;
    top: 0px;
  }
  .komikomi_box_header {
    font-size: var(--font_size-sm);
  }
}

.product_list_section {
  background-color: #fff;
  padding: 60px 0 111px;
}

.product_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(332px, 1fr));
  gap: 40px 4%;
}

.product_item {
  background-color: #fff;
  border: 1px solid #ccc;
  padding-block-end: 28px;
  .text1 {
    background-color: var(--blue);
    color: #fff;
    font-size: var(--font_size-lg);
    line-height: 1.55;
    text-align: center;
  }
}

.product_summary {
  display: flex;
  padding-top: 28px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  .logo_detail {
    margin-top: 24px;
  }
}

.product_summary_text {
  margin-top: 40px;
  .row {
    display: flex;
    align-items: flex-start;
    line-height: 1.1;
    margin-top: 12px;
  }
  dt {
    border-left: 4px solid var(--black);
    padding-left: 0.75em;
    width: 4.1em;
  }
  dd {
    margin-left: 8px;
  }
}

.price_breakdown {
  width: 88%;
  margin: 20px auto 0;
  .total_price {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.discount_rate {
  background-color: var(--red);
  border-radius: 3em;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1.25vw;
  line-height: 1;
  aspect-ratio: 1 / 1;
  width: 4.4em;
  height: 4.4em;
  .num {
    font-family: "Roboto", sans-serif;
    font-size: 2em;
  }
  .per {
    font-size: 1.1em;
  }
  .off {
    display: block;
  }
  .sm_text {
    font-size: 0.9em;
    line-height: 1.2;
    text-align: center;
  }
}

.product_base_price .maker_price {
  font-size: clamp(10px, 0.8125vw, 13px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 7px;
  margin-left: 3px;
  .txt2 {
    font-family: "Roboto", sans-serif;
    font-size: 1.23em;
    margin-left: 7px;
  }
  .txt3 {
    font-size: 1.07em;
  }
  .txt4 {
    font-size: 0.92em;
  }
}
.product_base_price .mbl_price {
  font-size: clamp(11px, 0.875vw, 14px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:8px 0;
  margin-top: 7px;
  .txt1 {
    background-color: #FFD8D8;
    border-radius: 3em;
    color: var(--red);
    font-size: 1em;
    padding: 0 6px;
  }
  .txt2 {
    color: var(--red);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 2.57em;
    line-height: 0.9;
    margin-left: 7px;
  }
  .txt3 {
    color: var(--red);
    font-size: 1.42em;
  }
}

.price_breakdown_rows {
  border-top: 1px solid #ccc;
  margin-top: 16px;
}
.price_breakdown_row {
  border-bottom: 1px solid #ccc;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  font-size: clamp(11px, 1vw, 16px);
}

.breakdown_label {
  background-color: #F5F5F5;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
  width: 100%;
  padding: 7px 1% 7px 5%;
}

.breakdown_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #b3b3b3;
  color: #fff;
  font-size: 0.8em;
  line-height: 1;
}

.breakdown_price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
  padding: 7px 5% 7px 2%;
}

.breakdown_price_num {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.8em;
  line-height: 1;
  position: relative;
  top: 0.08em;
}

.breakdown_price_unit {
  letter-spacing: -0.1em;
  .yen {
    font-size: 1.1em;
    position: relative;
    left: 1px;
  }
  .zei {
    font-size: 0.75rem;
  }
}

.final_price_box {
  background-color: #FFEEEE;
  text-align: center;
  .label {
    background-color: var(--red);
    color: #fff;
    line-height: 1.6;
    font-size: var(--font_size-md);
    margin-top: 16px;
  }
}
.final_price_value {
  font-size: var(--font_size-4xl);
  line-height: 1.4;
  text-indent: 0.5em;
  .num {
    color: var(--red);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
  }
  .yen {
    color: var(--red);
    font-size: 0.66em;
  }
  .zei {
    font-size: 1rem;
  }
}

.product_features {
  margin-top: 15px;
  .label {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    &::after {
      content: '';
      display: block;
      flex: 1;
      height: 1px;
      background-color: var(--black);
    }
  }
  .feature_list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    li {
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      border-radius: 3em;
      font-weight: 400;
      line-height: 1.8;
      padding: 0px 13px;
    }
  }
}

.product_note {
  margin-top: 60px;
  .note_list {
    font-weight: 400;
    li {
      margin-bottom: 10px;
    }
  }
}
.product_note_label {
  background-color: #f5f5f5;
  font-size: var(--font_size-lg);
  text-align: center;
  margin-bottom: 20px;
}


@media screen and (max-width: 767px) {
  .product_item .text1 {
    font-size: 1rem;
  }
  .product_img {
    width: 50%;
    max-width: fit-content;
  }
  .product_summary_text {
    font-size: min(16px, 3.2vw);
  }
  .discount_rate {
    font-size: 4vw;
  }
  .product_base_price .maker_price {
    font-size: clamp(10px, 3.7vw, 18px);
    .txt1 {
      display: block;
    }
  }
  .product_base_price .mbl_price {
    font-size: clamp(10px, 4vw, 20px);
    margin-top: 8px;
    .txt1 {
      display: block;
      width: fit-content;
      padding: 0 16px;
    }
    .txt2 {
      font-size: 2em;
    }
  }
  .price_breakdown_row {
    font-size: clamp(11px, 3.2vw, 16px);
  }
  .price_breakdown {
    width: 92%;
  }
  .final_price_value {
    font-size: 2.375rem;
  }
}

/*-----------------
cta
-----------------*/
.cta {
  background: url(../img/cta_bg-01.webp), url(../img/cta_bg-02.webp),
  linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%), var(--yellow);
  background-repeat: no-repeat;
  background-position: top left, bottom 20% right;
  padding-bottom: 58px;
}
.cta .c-heading_band {
  background-color: var(--yellow);
  font-size: var(--font_size-3xl);
  padding-block: 14px 0px;
  margin-bottom: 38px;
  .c-ttl_text {
    line-height: 1.35;
  }
  .text1 {
    font-size: 1.6em;
    text-shadow: 0 1px 0 #fff;
  }
  .text_row_wrap {
    padding-left: 0.6em;
  }
  .text3 {
    font-size: 1.6em;
    text-shadow: 0 2px 2px #fff;
  }
  .ex_mark {
    display: inline-block;
    font-size: 2.25em;
    font-weight: 400;
    letter-spacing: -10px;
    line-height: 1;
    rotate: 20deg;
    vertical-align: middle;
    position: relative;
    top: -0.25em;
    left: -0.3em;
    z-index: 2;
  }
  span:not([class]) {
    padding-inline: 6px;
  }
}

.price_structure {
  position: relative;
  padding-bottom: 25px;
  z-index: 2;
  .breakdown {
    background-color: #fff;
    border: 3px solid var(--teal);
    border-radius: 20px;
    width: 68%;
    position: relative;
    & + .note {
      line-height: 1.7;
      margin-top: 20px;
      margin-inline: 20px;
      position: relative;
      z-index: 2;
    }
  }
  .label {
    background-color: var(--teal);
    border-radius: 3em;
    color: var(--yellow);
    font-size: var(--font_size-xl);
    position: absolute;
    left: 50%;
    translate: -50% -0.7em;
    line-height: 1.65;
    padding-inline: 17px;
    text-align: center;
  }
  .breakdown_inner {
    padding: 48px 5% 26px;
    text-align: center;
  }
}
.cta_person_img {
  position: absolute;
  bottom: 0;
  right: 3%;
  width: 36%;
}

.cta_lower_column {
  display: grid;
  grid-template-columns: 1.84fr 1fr;
  gap: 12px;
}

.cta_box {
  background-color: #fff;
  .box_header {
    color: #fff;
    font-size: var(--font_size-xl);
    text-align: center;
    padding: 3px;
  }
  .box_inner {
    font-weight: 400;
    width: 90%;
    max-width: fit-content;
    margin-inline: auto;
    min-height: 160px;
  }
  .c_btn .text {
    text-indent: 0.7em;
  }
}

.cta_box-mail .box_header {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), #48A1E2;
}
.cta_box-mail .box_inner {
  font-size: var(--font_size-sm);
  line-height: 1.4;
  margin-block: 14px 34px;
  text-align: center;
}

.cta_box_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-block: 20px;
  .c_btn {
    width: 260px;
    height: 60px;
  }
}

.cta_box-tel .box_header {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--red);
  letter-spacing: 0.05em;
  .icon_tel {
    width: 0.8em;
    vertical-align: middle;
    position: relative;
    right: 14px;
    bottom: 2px;
  }
}

.cta_box-tel .box_inner {
  height: calc(100% - 54px);
  .btn_tel {
    display: block;
    margin-top: 26px;
  }
  .tel_num {
    font-size: clamp(30px, 4.2vw, 42px);
  }
  .icon_tel2 {
    width: 0.9em;
    position: relative;
    left: -2%;
    top: 6px;
  }
  .open_time {
    font-size: var(--font_size-md);
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-inline: 3%;
    .label {
      padding: 0 6px;
      width: 5em;
      text-align: center;
      margin-right: 10px;
    }
  }
}

@media screen and (max-width: 767px) {
  .cta .c-heading_band {
    font-size: 1.35rem;
    .text_row_wrap {
      padding-left: 0.8em;
    }
    span:not([class]) {
      padding-inline: 2px;
    }
  }
  .price_structure .breakdown {
    width: 100%;
    max-width: 400px;
    .label {
      font-size: var(--font_size-md);
      width: 14em;
    }
    & + .note {
      font-size: var(--font_size-xs);
      margin-inline: 5px;
      width: 60%;
    }
  }
  .price_structure .breakdown_inner {
    padding: 36px 5% 36px;
  }
  .cta_person_img {
    right: -1%;
    width: 40%;
  }
  .cta_lower_column {
    grid-template-columns: 1fr;
  }
  .cta_box .box_header {
    font-size: var(--font_size-lg);
  }
}


/*-----------------
promise
-----------------*/
.promise {
  background: url(../img/promise_bg.webp) no-repeat top center / contain #101A79;
  padding-block: 48px 80px;
  .title_lead {
    max-width: 800px;
    margin: 0 auto;
  }
}

.promise_ttl {
  font-size: var(--font_size-xl);
  .text1 {
    background-color: #fff;
    border-radius: 3em;
    display: inline-block;
    padding: 6px 20px;
    position: relative;
    bottom: 8px;
    margin-right: 10px;
  }
  .text2 {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 3.33em;
  }
  .text3 {
    color: #fff;
    font-size: 2em;
  }
}

.promise_lead {
  color: #fff;
  font-size: var(--font_size-md);
  font-weight: 500;
  line-height: 1.8;
  margin-top: 24px;
}

.promise_list {
  background-color: rgb(255 255 255 / 0.9);
  box-shadow: 1px  2px 2px rgb(0 0 0 / 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 50px;
  font-size: var(--font_size-md);
  margin-top: 44px;
  padding: 42px 48px 50px;
  li {
    border-bottom: 1px dashed #000;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px 0 5px;
  }
  li::before {
    content: '';
    background: url(../img/icon_check.svg) no-repeat center / contain;
    width: 1.33em;
    height: 1.33em;
    display: block;
    position: relative;
    top: 0.4em;
  }
}

@media screen and (min-width: 768px) {
  .promise_list li:first-of-type,
  .promise_list li:nth-of-type(2) {
    padding: 4px 0 1px;
  }
}

@media screen and (max-width: 767px) {
  .promise_ttl {
    font-size: var(--font_size-md);
    text-align: center;
    .text1 {
      margin-bottom: 3px;
      margin-right: 0;
      padding-inline: 30px;
    }
    .text2 {
      font-size: 4.33em
    }
    .text3 {
      font-size: 3em
    }
  }
  .promise_lead {
    width: 94%;
    margin: 24px auto 0;
    font-size: 1rem;
  }
  .promise_list {
    grid-template-columns: 1fr;
    font-size: var(--font_size-sm);
    padding: 42px 16px 50px;
    li {
      gap: 8px;
    }
  }
}

/*-----------------
simulation
-----------------*/
.simulation {
  background-color: #F4FBFF;
  padding-bottom: 70px;
  .c-heading_band {
    background:
      url(../img/heading_bg.png) no-repeat top center / contain,
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
    background-color: var(--blue);
    padding-block: 40px 36px;
    margin-bottom: 30px;
  }
  .c-ttl_text {
    color: #fff;
  }
}

.speech_bubble {
  background: #fff;
  border-radius: 3em;
  color: var(--blue);
  display: block;
  font-size: var(--font_size-xl);
  padding: 7px 33px;
  position: relative;
  width: fit-content;
  margin: 0 auto 20px;
}
.speech_bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 10px;
  background: #fff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.simulation_lead {
  font-size: var(--font_size-xl);
  text-align: center;
  margin-bottom: 40px;
  .marker {
    background: linear-gradient(transparent 0%, transparent 68%,var(--yellow)68%,var(--yellow)100%);
    display: inline-block;
    font-size: 1.5em;
    line-height: 1.5;
  }
  .text2 {
    line-height: 1.4;
    margin-top: 20px;
  }
}

.simulation_box {
  background-color: #fff;
  border: 3px solid var(--blue);
  font-weight: 400;
  padding: 48px;
  .upper {
    display: grid;
    grid-template-columns: 39% 1fr;
    gap: 30px 48px;
  }
  .lower {
    display: grid;
    grid-template-columns: 1fr 33%;
    gap: 30px 48px;
    line-height: 2.25;
    margin-top: 52px;
  }
}

.simulation_hearing {
  background-color: #E6F5FF;
  border-radius: 30px;
  padding: 38px 5% 18px;
  position: relative;
  margin-top: 58px;
  text-align: center;
  .label {
    background-color: #fff;
    border: 2px solid var(--blue);
    border-radius: 3em;
    color: var(--blue);
    font-size: var( --font_size-lg);
    font-weight: 700;
    line-height: 1.6;
    padding-inline: 18px;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -0.8em;
    width: min(260px, 90%);
  }
  .hearing_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
    column-gap: 5%;
    row-gap: 20px;
  }
  .hearing_list_item {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 118px 1.8em 4em;
    align-items: center;
    justify-items: center;
    /*row-gap: 8px;*/
    line-height: 1.8;
    &.item2 img {
      align-self: start;
    }
    &.item3 img {
      align-self: center;
      position: relative;
      right: 12px;
    }
  }
  .hearing_list_ttl {
    font-size: var(--font_size-md);
    font-weight: 700;
    line-height: 1.4;
  }
}

@media screen and (max-width: 767px) {
  .speech_bubble {
    font-size: var(--font_size-lg);
  }
  .simulation_lead {
    font-size: var(--font_size-md);
  }
  .simulation_box {
    padding: 48px 5%;
    .upper {
      grid-template-columns: 1fr;
    }
    .lower {
      grid-template-columns: 1fr;
      line-height: 1.8;
      margin-top: 52px;
    }
  }
  .simulation_hearing .label{
    font-size: var( --font_size-md);
  }
}

/*-----------------
choice_reason
-----------------*/
.choice_reason {
  background-color: rgb(247 255 139 / 0.5);
  padding-block: 58px;
  .section_intro {
    padding-bottom: 29px;
    position: relative;
    text-align: center;
  }
  .main_title {
    display: block;
    font-size: var(--font_size-4xl);
    margin-top: 28px;
  }
  .title_img {
    position: absolute;
    left: 11px;
    bottom: 0;
  }
  .section_intro_text {
    font-size: var(--font_size-xl);
    line-height: 1.5;
    margin-top: 38px;
  }
}
.ribbon_title {
  background: var(--teal);
  display: inline-block;
  font-size: var(--font_size-2xl);
  color: #fff;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 16px) 50%,
    100% 100%,
    0 100%,
    16px 50%
  );
  padding: 7px 28px;
}

.choice_reason {
  .reason_list {
    background-color: #fff;
    padding: 50px 5% 30px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 40px;
  }
  .reason_item {
    .list_ttl_wrap {
      display: grid;
      grid-template-rows: 26px 1fr;
      font-size: clamp(20px, 2vw, 28px);
      height: min(5em, 109px);
      .ttl_text {
        align-self: center;
        line-height: 1;
      }
      .sm {
        font-size: 0.571em;
      }
    }
    .text_wrap {
      padding: 10px 0 20px;
    }
  }
}

@media screen and (max-width: 767px) {
  .choice_reason {
    .main_title {
      font-size: var(--font_size-2xl);
    }
    .title_img {
      display: none;
    }
    .section_intro_text {
      font-size: var(--font_size-md);
    }
  }
  .ribbon_title {
    font-size: var(--font_size-xl);
    color: #fff;
  }
}

/*-----------------
voice
-----------------*/
.voice {
  padding-block: 68px 61px;
}
.voice_box {
  background-color: #E6F5FF;
  border: 2px solid var(--blue);
  width: min(90%, 1200px);
  margin: 70px auto 0;
}
.voice_box_heading_box {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--blue);
  color: #fff;
  font-size: var(--font_size-2xl);
  padding-block: 22px;
  position: relative;
  text-align: center;
  text-indent: 2em;
  .heading_img {
    position: absolute;
    top: 50%;
    left: 4vw;
    translate: 0 -50%;
    width: clamp(110px, 16vw, 190px);
  }
  .ttl_text {
    font-size: clamp(22px, 2.66vw, 32px);
  }
}
.voice_content_wrap {
  padding: 20px 0 55px;
  .intro_text {
    font-weight: 400;
    text-align: center;
  }
}
.voice_list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px auto 0;
  width: min(96%, 1000px);
  .voice_item {
    width: 235px;
  }
  .voice_item.item2 {
    margin-top: 40px;
  }
  .voice_item.item4 {
    margin-top: 106px;
  }
}
.voice_balloon {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 40px 40px 40px 0;
  font-weight: 400;
  padding: 30px 20px 24px;
}
.voice_user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  margin-top: 9px;
  .user_img {
    width: min(26%, 50px);
  }
}

@media screen and (min-width: 1300px) {
  .voice_box_heading_box .heading_img {
    left: 10%;
  }
  .voice_box_heading_box .ttl_text {
    font-size: 1em;
  }
}
@media screen and (max-width: 900px) {
  .voice_list {
    flex-wrap: wrap;
    .voice_item.item4 {
      margin-top: auto;
    }
  }
}
@media screen and (max-width: 767px) {
  .voice_list .voice_item {
    width: 46%;
    font-size: var(--font_size-xs);
  }
  .voice_list .voice_item.item2 {
    margin-top: auto;
  }
  .voice_box_heading_box {
    text-align: right;
    text-indent: 2.5em;
    padding-right: 0.6em;
  }
  .voice_box_heading_box .heading_img {
    left: -5%;
    top: 50%;
  }
  .voice_balloon {
    padding: 24px 15px 18px;
  }
}

/*-----------------
subsidy
-----------------*/
.subsidy {
  background-color: #EDF8F8;
  padding-bottom: 131px;
  .c-heading_band {
    background:
      url(../img/heading_bg.png) no-repeat top center / contain,
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--teal);
    color: #fff;
    padding-block: 28px 42px;
  }
}

.subsidy_lead {
  text-align: center;
  .lead_title {
    font-size: var(--font_size-2xl);
    line-height: 1.55;
    margin-top: 38px;
    text-align: center;
    .lg {
      font-size: 1.125em;
    }
  }
  .marker {
    background: linear-gradient(transparent 0%, transparent 66%,var(--yellow)66%,var(--yellow)100%);
    display: inline-block;
  }
}

.subsidy_lead_target {
  font-size: var(--font_size-lg);
  margin-block: 34px 20px;
  span {
    border-bottom: 1px dotted var(--black);
    display: inline-block;
  }
}

.subsidy_project_box {
  border: 3px solid var(--teal);
  margin-top: 40px;
}
.subsidy_project_heading {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%), var(--teal);
  color: #fff;
  font-size: var(--font_size-2xl);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  line-height: 1.8;
  padding-block: 15px;
  text-align: center;
  .title {
    font-size: 1em;
  }
  .sub_text {
    background-color: #fff;
    border-radius: 3em;
    color: var(--teal);
    font-size: 0.625em;
    padding: 0 20px;
  }
}

.subsidy_project {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 15%;
  align-items: start;
  width: min(96%, 800px);
  margin: 34px auto 28px;
  text-align: center;
  position: relative;
}
.subsidy_project::before {
  content: "+";
  position: absolute;
  left: 50%;
  top: 74%;
  translate: -50% 0;
  color: #555;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.subsidy_project_label {
  background: var(--blue);
  color: #fff;
  font-size: clamp(1rem, 2vw, var(--font_size-lg));
  border-radius: 3em;
  padding: 0 6px;
  margin: 27px auto 0;
  width: 88%;
  min-width: 190px;
  position: relative;
  .label_badge {
    position: absolute;
    width: 4em;
    left: -16%;
    top: -74%;
  }
}
.subsidy_project_label.label2 {
  background: #D8EEFF;
  color: var(--blue);
}

.subsidy_project_price {
  font-size: var(--font_size-xl);
  line-height: 1;
  margin-top: 16px;
  .num {
    font-size: 2.66em;
  }
  .unit {
    font-size: 1.5em;
  }
}

.project_note {
  font-size: var(--font_size-sm);
  font-weight: 400;
  line-height: 1.6;
  margin-top: 14px;
}

.application_support {
  width: min(90%, 800px);
  margin: 60px auto 0;
  .ttl {
    font-size: var(--font_size-2xl);
    text-align: center;
    &.side_slash_text {
      gap: 0.8em;
    }
    .slashes span {
      background-color: var(--black);
    }
  }
}
.application_support_list {
  margin-top: 26px;
  li {
    display: flex;
    align-items: flex-start;
    gap: 10px 46px;
    margin-bottom: 28px;
  }
  .list_ttl {
    font-size: var(--font_size-xl);
    font-weight: 700;
    margin: 7% 0 2%;
  }
}

.subsidy_note01 {
  font-weight: 400;
  margin-top: 50px;
}
.subsidy_note02 {
  background-color: #fff;
  font-size: var(--font_size-sm);
  font-weight: 400;
  line-height: 1.8;
  margin-top: 10px;
  padding: 28px 30px;
}

@media screen and (max-width: 767px) {
  .subsidy_lead .lead_title {
    font-size: var(--font_size-lg);
  }
  .subsidy_project_heading {
    font-size: var(--font_size-xl);
    flex-direction: column;
  }
  .subsidy_lead_target {
    font-size: 1rem;
  }
  .subsidy_project {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }
  .subsidy_project::before {
    top: 45%;
  }
  .subsidy_project_label {
    width: 78%;
  }

  .application_support .ttl {
    font-size: var(--font_size-xl);
  }
  .application_support_list li {
    gap: 10px 16px;
    img {
      width: min(24%, 100px);
    }
  }
  .application_support_list .list_ttl {
    font-size: var(--font_size-lg);
  }
}

/*-----------------
benefit
-----------------*/
.benefit {
  padding-bottom: 60px;
  .c-heading_band {
    background:
      url(../img/heading_bg.png) no-repeat top center / contain,
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--red);
    color: #fff;
    padding-block: 48px 32px;
    position: relative;
    margin-bottom: 30px;
    .title_icon {
      position: absolute;
      top: 0;
      left: 50%;
      translate: -50% -50%;
    }
    .c-ttl_sub {
      margin-bottom: 10px;
    }
    .sm {
      font-size: 0.66em;
    }
  }
}

.benefit_lead {
  text-align: center;
  .lead_title {
    font-size: var(--font_size-2xl);
    line-height: 1.4;
    letter-spacing: 0.05em;
    .lg {
      font-size: 1.125em;
    }
    .xl {
      font-size: 1.33em;
    }
  }
  .text {
    font-weight: 400;
    margin-top: 30px;
  }
}

.speech_border {
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 3em;
  color: var(--red);
  display: inline-block;
  font-size: var(--font_size-xl);
  line-height: 1.4;
  letter-spacing: 0.05em;
  padding: 2px 20px;
  position: relative;
}
.speech_border::before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 18%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background: var(--red);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.speech_border::after {
  content: "";
  background: #fff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  position: absolute;
  bottom: -10px;
  left: 18%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
}

.benefit_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 38px;
  margin-top: 48px;
}

.benefit_list_item {
  box-shadow: 1px 2px 2px rgb(0 0 0 / 0.1);
  .text_wrap {
    padding: 20px 9% 28px;
  }
}

.benefit_list_item.item1 .benefit_list_ttl_wrap {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--blue);
}
.benefit_list_item.item2 .benefit_list_ttl_wrap {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--teal);
}

.benefit_list_ttl_wrap {
  font-size: clamp(22px, 3vw, var(--font_size-2xl));
  height: clamp(80px, 8.3vw, 100px);
  position: relative;
  .ttl_label {
    position: absolute;
    left: 13px;
    top: 50%;
    translate: 0 -50%;
    width: 2.65em;
  }
  .ttl_text_img {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -12px;
    width: min(70%, 290px);
  }
  .list_ttl {
    font-size: 1em;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .ttl_text {
    display: block;
    padding-bottom: 14px;
    .lg {
      font-size: 1.125em;
    }
  }
}

.benefit_list_desc_wrap {
  padding: 20px 6% 38px;
  .desc_ttl {
    color: var(--red);
    font-size: clamp(18px, 2.4vw, var(--font_size-xl));
    line-height: 1.7;
    text-align: center;
    margin-bottom: 10px;
  }
  .note {
    background-color: #f5f5f5;
    font-size: var(--font_size-sm);
    font-weight: 400;
    line-height: 1.7;
    margin-top: 22px;
    padding: 10px 22px;
  }
}

@media screen and (max-width: 767px) {
  .benefit_lead .lead_title {
    font-size: var(--font_size-xl);
  }
  .speech_border {
    font-size: var(--font_size-md);
  }
  .benefit_list_desc_wrap .note {
    font-size: var(--font_size-xs);
  }
}

/*-----------------
message
-----------------*/
.message {
  background-color: rgba(88, 169, 228, 0.5);
  padding-block: 60px;
}

.message_box {
  background-color: #fff;
  border: 6px solid #DBEAF5;
  position: relative;
  width: min(90%, 1000px);
  margin: 182px auto 0;
}
.message_people {
  display: flex;
  justify-content: center;
  gap: 6%;
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -73%;
  width: min(90%, 680px);
  li {
    flex: 1;
    position: relative;
  }
  .person_img {

  }
  .person_name {
    background-color: var(--blue);
    border-radius: 4px;
    color: #fff;
    font-size: var(--font_size-md);
    line-height: 1.2;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    width: 5.5em;
    text-align: center;
    line-height: 1.7;
  }
}

.message_box_inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 20px 5.5%;
  padding: 94px 43px 32px 43px;
  .meesage_main {
    font-weight: 400;
  }
}

.message_comment_title_box {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), #58A9E4;
  border-radius: 20px 20px 20px 0px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 180px;
  .comment_icon {
    position: relative;
    top: -0.8em;
    width: 3.125em;
  }
  .comment_title {
    font-size: var(--font_size-sm);
    line-height: 1.5;
    .lg {
      display: block;
      font-size: var(--font_size-xl);
    }
  }
}

.meesage_note {
  font-size: var(--font_size-sm);
  text-align: right;
  margin-top: 12px;
}

@media screen and (max-width: 767px) {
  .message_people {
    gap: 2%;
    width: min(100%, 680px);
    .person_name {
      font-size: var(--font_size-sm);
      width: 4.5em;
    }
  }
  .message_box_inner {
    grid-template-columns: 1fr;
    padding: 74px 20px 32px 20px;
  }
  .message_comment_title_box {
    height: 130px;
    .comment_icon {
      top: -0.4em;
    }
    .comment_title {
      font-size: var(--font_size-xs);
      .lg {
        font-size: var(--font_size-lg);
      }
    }
  }
  .meesage_note {
    font-size: var(--font_size-xs);
  }
}

/*-----------------
faq
-----------------*/
.faq {
  background-color: rgba(247, 255, 139, 0.5);
  padding-block: 66px 46px;
}
.faq_heading_group {
  text-align: center;
  padding-bottom: 40px;
  position: relative;
  span {
    display: block;
  }
  .c-ttl_text {
    display: inline-block;
    font-size: 3.5rem;
  }
  .c-ttl_sub {
    border-bottom: 3px dotted var(--teal);
    color: var(--teal);
    font-size: 0.42em;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
    &::before {
      content: '';
      background: url(../img/faq_title_icon.svg) no-repeat center / contain;
      display: inline-block;
      width: 1.24em;
      height: 1.5em;
      position: absolute;
      left: -1.65em;
      top: -0.2em;
    }
  }
}

.faq_lead {
  font-weight: 400;
  margin-top: 26px;
}

.faq_ttl_img {
  position: absolute;
  bottom: 0;
  right: 20px;
}

.faq_wrap {
  margin-top: 0;
}

.accordion_button {
  cursor: pointer;
  padding-right: 40px;
  position: relative;
}
.accordion_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .3s ease;
}
.accordion_button[aria-expanded="true"]::after {
  transform: translateY(-40%) rotate(-135deg);
}

.accordion_content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.accordion_item.is_open .accordion_content {
  /* JSでmax-heightを付与 */
}

.faq_item {
  background: #fff;
  box-shadow: 1px 2px 4px rgb(0 0 0 / 0.1);
  margin-bottom: 15px;
}
.faq_question {
  background-color: var(--white_gray);
  font-size: var(--font_size-md);
  font-weight: 700;
  line-height: 1.6;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: start;
  gap: 12px;
  padding: 15px 40px 20px 50px;
  .conetnt {
    align-self: end;
  }
}
.faq_question .text_q {
  color: var(--teal);
  font-size: 2.25rem;
  line-height: 1;
}

.faq_answer {
  background-color: #fff;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding-inline: 50px;
  padding-block: 18px 34px;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.faq_item.is_open .faq_answer {
  opacity: 1;
  visibility: visible;
}

.faq_answer .text_a {
  color: var(--red);
  font-size: 2.25rem;
  line-height: 1;
  position: relative;
  top: -0.1em;
}

.faq_answer_body {
  font-weight: 400;
}
.faq_answer_lead {
  color: var(--red);
  font-size: var(--font_size-md);
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 6px;
}

@media screen and (max-width: 1000px) {
  .faq_ttl_img {
    width: 26%;
    right: -5%;
  }
}

@media screen and (max-width: 767px) {
  .faq_heading_group .c-ttl_text {
    font-size: 3rem;
  }
  .faq_heading_group .c-ttl_sub::before {
    left: 0;
    top: -0.3em;
  }

  .accordion_button::after {
    right: 14px;
    width: 10px;
    height: 10px;
  }

  .faq_question {
    font-size: 1rem;
    grid-template-columns: 28px 1fr;
    padding: 20px 30px 20px 14px;
  }
  .faq_question .text_q {
    font-size: 2rem;
  }
  .faq_answer {
    grid-template-columns: 36px 1fr;
    padding-inline: 14px;
    padding-block: 20px;
  }
  .faq_answer .text_a {
    font-size: 2rem;
  }
  .faq_answer_lead {
    font-size: 1rem;
  }
}

/*-----------------
area
-----------------*/
.area_inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: 33px;
}
.area_text {
  position: relative;
  z-index: 2;
}
.area_title {
  font-size: 2.25rem;
  img {
    width: 1.2em;
    vertical-align: text-bottom;
  }
  .text {
    margin-left: 16px;
    line-height: 1.8;
  }
}
.area_lead {
  font-size: var(--font_size-lg);
  line-height: 1.8;
  margin-top: 48px;
}
.area_list {
  font-weight: 400;
}
.area_img {
  margin: 0;
  position: relative;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  .area_inner {
    grid-template-columns: 44% 1fr;
  }
  .area_title {
    margin-top: 28px;
  }
  .area_img {
    left: -7.2%;
    width: 107.2%;
  }
}

@media screen and (max-width: 767px) {
  .area_inner {
    padding-block: 60pxf;
  }
  .area_title {
    font-size: 1.875rem;
  }
}

/*-----------------
flow
-----------------*/
.flow {
  background-color: #F4FBFF;
  padding-block: 72px 45px;
}
.flow_lead {
  font-weight: 400;
  text-align: center;
  margin-top: 48px;
}

.flow_list {
  width: min(90%, 1000px);
  margin: 40px auto 0;
}
.flow_item_box {
  border: 3px solid var(--blue);
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 10px 5.5%;
  margin-bottom: 28px;
  padding: 18px 4.7% 24px;
  position: relative;
}
.flow_item_box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 17px;
  translate: 0 100%;
  width: 30px;
  height: 24px;
  background: var(--blue);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.flow_item_box.no_arrow::after {
  content: none;
}

.flow_img_area {
  position: relative;
  .num {
    color: var(--blue);
    font-size: var(--font_size-4xl);
    line-height: 1;
    text-shadow: 0 0 2px #fff;
    position: absolute;
    left: 10px;
    top: -10px;
  }
}

.flow_text_area {
  margin-top: 15px;
  .ttl {
    color: var(--blue);
    font-size: var(--font_size-xl);
  }
  .text {
    font-weight: 400;
    margin-top: 24px;
  }
}

@media screen and (max-width: 767px) {
  .flow_item_box {
    grid-template-columns: 1fr;
  }
  .flow_img_area {
    text-align: center;
  }
  .flow_text_area .ttl {
    font-size: var(--font_size-lg);
  }
}

/*-----------------
footer
-----------------*/
.footer {
  margin-top: 60px;
}
.footer_nav {
  font-weight: 400;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 50px;
}
.footer_copy {
  background-color: #444;
  color: #fff;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  padding-block: 14px;
  margin-top: 62px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .footer_nav {
    gap: 20px;
  }
  .footer_copy {
    font-size: var(--font_size-sm);
    margin-top: 30px;
  }
}

/*-----------------
fix_cv
-----------------*/
.fix_cv {
  background-color: var(--black);
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0 20px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.fix_cv.is_show {
  opacity: 1;
  visibility: visible;
}

.fix_cv_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 6%;
  margin: 0 auto;
  width: min(96%, 840px);
  .btns {
    display: flex;
    align-items: center;
    gap: 6%;
  }
  .c_btn {
    width: 260px;
    height: 60px;
  }
  .c_btn .text {
    margin-left: 10px;
  }
  .open_time {
    color: #fff;
    font-size: var(--font_size-sm);
    display: flex;
    gap: 18px;
    .label {
      border-color: #fff;
      color: #fff;
    }
  }
}

.fix_cv_tel_wrap {
  .icon_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 840px) {
  .fix_cv_inner {
    gap: 10px 6%;
    width: min(95%, 420px);
    .btn_tel_upper {
      background-color: transparent;
      font-size: var(--font_size-xs);
    }
    .btn_tel .tel_num {
      background-color: var(--red);
      border-radius: 3em;
      font-size: clamp(1.8rem, 7.4vw, 2.375rem);
      line-height: 0.9;
      height: 40px;
      padding: 5px 0.5em 5px 5px;
      .icon {
        top: inherit;
      }
    }
    .open_time {
      font-size: var(--font_size-xs);
      flex-direction: column;
      gap: 8px;
      margin-top: 1em;
      .label {
        font-size: var(--font_size-xs);
        width: 5em;
        text-align: center;
      }
    }
    .btns {
      gap: 2%;
      width: 100%;
    }
    .btn_wrap {
      width: 50%;
    }
    .c_btn_upper {
      font-size: var(--font_size-xs);
    }
    .c_btn {
      font-size: var(--font_size-sm);
      width: 100%;
      height: 40px;
    }
  }
  .fix_cv_tel_wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    .icon_wrap {
      aspect-ratio: 1 / 1;
      background-color: #fff;
      border-radius: 3em;
      height: 100%;
      .icon {
        width: 72%;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .fix_cv {
    padding: 16px 0;
  }
  .fix_cv_inner {
    flex-wrap: nowrap;
    gap: 10px 1%;
    .fix_cv_tel_wrap {
      justify-content: flex-start;
      width: 33%;
    }
    .btn_tel_upper {
      display: none;
    }
    .btn_tel {
      width: 100%;
    }
    .btn_tel .tel_num {
      font-size: 0.7rem;
      justify-content: flex-start;
      gap: 6px 8px;
      height: 34px;
      padding: 3px;
    }
    .btns {
      width: 66%;
    }
    .c_btn_upper {
      font-size: 10px;
      display: none;
    }
    .c_btn {
      gap: 6px 8px;
      font-size: 0.7rem;
      height: 34px;
      padding: 3px;
    }
    .c_btn .text.pc {
      display: none;
    }
    .c_btn .icon img {
      width: 14px;
    }
    .open_time {
      display: none;
    }
  }
}

@media screen and (max-width: 430px) {
  .fix_cv_inner {
    .c_btn .text {
      margin-left: 2px;
    }
  }
}

/*-----------------
contact
-----------------*/
.contact {
  padding-bottom: 60px;
  .c-heading_band {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), var(--blue);
    color: #fff;
    padding-block: 38px;
  }
}

.contact_form_wrap {
  width: min(90%, 600px);
  margin: 80px auto 0;
}

.form_group {
  margin-top: 20px;
}

.form_label_wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.required_tag {
  background: var(--red);
  border-radius: 4px;
  color: #fff;
  font-size: var(--font_size-xs);
  font-weight: 700;
  line-height: 1.8;
  padding: 0 4px;
}

.form_field {
  margin-top: 16px;
}

.form_field input,
.form_field select,
.form_field textarea {
  background: var(--white_gray);
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 16px;
  appearance: none;
  width: 100%;
  height: 50px;
  padding: 10px 16px;
}

.form_field input::placeholder,
.form_field textarea::placeholder {
  color: #aaa;
}

.form_field textarea {
  resize: vertical;
  height: 150px;
}

.address_group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.address_postcode {
  max-width: 330px;
}

.radio_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  max-width: 600px;
}

.radio_item {
  position: relative;
  cursor: pointer;
  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}
.radio_item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 5px;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 5em;
  color: #aaa;
  text-align: center;
  transition: 0.2s;
}

.radio_item input:checked + span {
  background: #AFF2F2;
  border-color: #AFF2F2;
  color: #008E8E;
}

.select_wrap {
  position: relative;
  select {
    color: #aaa;
    position: relative;
  }
  select:valid {
    color: #333;
  }
}
.select_wrap::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.form_label_note {
  font-size: var(--font_size-sm);
  font-weight: 400;
  margin-top: 6px;
}

.error_message {
  color: var(--red);
}

.form_submit {
  margin-top: 60px;
  text-align: center;
}

.submit_btn {
  background: var(--teal) linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
  border: none;
  border-radius: 5em;
  box-shadow: 0 2px 0 #2CACAC;
  color: #fff;
  font-size: var(--font_size-md);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 276px;
  height: 60px;
  padding: 0 40px;
}
.submit_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.submit_btn.btn_back {
  background: #aaa;
  box-shadow: 0 2px 0 #8f8f8f;
  margin-bottom: 20px;
  &::after {
    left: 24px;
    transform: translateY(-50%) rotate(225deg);
  }
}

@media screen and (max-width: 767px) {
  .radio_list {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  .address_postcode {
    max-width: 100%;
  }

  .submit_btn {
    min-width: 260px;
    height: 56px;
    font-size: 1rem;
  }
}

/*-----------------
form confirm&thanks
-----------------*/
.contact_confirm {
  padding: 50px 8px;
  .form_row {
    border-bottom: 1px solid #aaa;
    padding: 10px;
    max-width: 950px;
    margin: 0 auto;
  }
}
.confirm_lead {
  text-align: center;
  margin-top: 20px;
}

.thanks_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 54px;
  width: 90%;
  max-width: 780px;
  margin: 0 auto;
  padding: 5% 0;
}
.thanks_btn {
  background-color: var(--teal);
  border-radius: 5em;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--font_size-md);
  letter-spacing: 0.05em;
  padding: 5px;
  position: relative;
  width: 270px;
  height: 60px;
  margin: 60px auto 0;
  text-align: center;
}

/*-----------------
company_terms
-----------------*/
.company_terms_wrap {
  border-top: 2px solid #ccc;
  padding-block: 100px 60px;
}
.company_terms_inner {
  width: min(90%, 800px);
  margin: 0 auto;
}
.company_terms_title {
  font-size: var(--font_size-xl);
  margin-bottom: 50px;
  text-align: center;
}
.company_terms_list dd {
  font-weight: 400;
  margin-left: 0;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .company_terms_title {
    font-size: 1.2rem;
  }
}