@charset "UTF-8";

/* noto-sans-jp-regular - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2');
}

/* noto-sans-jp-500 - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-jp/noto-sans-jp-v56-japanese_latin-500.woff2') format('woff2');
}

/* noto-sans-jp-600 - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/noto-sans-jp/noto-sans-jp-v56-japanese_latin-600.woff2') format('woff2');
}

/* noto-sans-jp-700 - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp/noto-sans-jp-v56-japanese_latin-700.woff2') format('woff2');
}

/* barlow-condensed-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-condensed/barlow-condensed-v13-latin-regular.woff2') format('woff2');
}

/* barlow-condensed-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-condensed/barlow-condensed-v13-latin-500.woff2') format('woff2');
}

/* barlow-condensed-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-condensed/barlow-condensed-v13-latin-600.woff2') format('woff2');
}

/* barlow-condensed-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-condensed/barlow-condensed-v13-latin-700.woff2') format('woff2');
}

:root {
  --base-color: 255, 255, 255;
  --contrast-color: 0, 0, 0;
  --contrast-2-color: 68, 46, 35;
  /*#442E23*/
  --gray-color: 128, 128, 128;
  /*#808080*/
  --primary-color: 244, 89, 16;
  /*#F45910*/
  --primary-light-color: 255, 222, 206;
  /*#FFDECE*/
  --primary-light2-color: 252, 202, 165;
  /*#FCC9A5*/
  --accent-color: 255, 227, 74;
  /*#FFE34A*/
  --accent-light-color: 255, 244, 216;
  /*#FFF4D8*/
  --red-color: 226, 0, 0;
  /*#E20000*/
  --font-jp: 'Noto Sans JP', "Roboto", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif;
  --font-en: 'Barlow Condensed', 'Noto Sans JP', "Roboto", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif;
  /*root font size:10px minViewport:320px maxViewport:1140px Relative Units:vw */
  /* base padding */
  --padding-block: clamp(5rem, 3.049rem + 6.098vw, 10rem);
  /* inner padding */
  --padding-inline: clamp(1.6rem, 0.663rem + 2.927vw, 4rem);
}

* html body {
  background: url(null) fixed;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

/*ナビ表示のときはスクロールしないように*/
html.is-locked {
  overflow-y: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: rgb(var(--base-color));
  color: rgb(var(--contrast-color));
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  font-style: normal;
  font-family: var(--font-jp);
  overflow-wrap: break-word;
  text-size-adjust: 100%;
  font-feature-settings: "palt";
  letter-spacing: 1.6px;
}


.sp-hidden {
  display: none;
}

.pc {
  display: none;
}

@media (min-width: 480px) {
  .sp-only {
    display: none;
  }
}

@media (min-width: 768px) {}

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

  .pc {
    display: block;
  }
}

@media (min-width: 751px) {

  /*電話番号リンクをスマホのみ有効にする*/
  /* a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  } */
}

.font-en,
.num {
  font-family: var(--font-en);
}

.has-base-color {
  color: rgb(var(--base-color));
}

.has-primary-color {
  color: rgb(var(--primary-color));
}

.has-red-color {
  color: rgb(var(--red-color));
}

.has-contrast-2-color {
  color: rgb(var(--contrast-2-color));
}

.has-gray-color {
  color: rgb(var(--gray-color));
}

.has-base-background-color {
  background-color: rgb(var(--base-color));
}

.has-contrast-2-background-color {
  background-color: rgb(var(--contrast-2-color));
}

.has-gray-background-color {
  background-color: rgb(var(--gray-color));
}

.has-primary-background-color {
  background-color: rgb(var(--primary-color));
}

.has-primary-light-background-color {
  background-color: rgb(var(--primary-light-color));
}

.has-accent-background-color {
  background-color: rgb(var(--accent-color));
}

.has-accent-light-background-color {
  background-color: rgb(var(--accent-light-color));
}

/* ------------------------------------------------------------ */
/* img */
/* ------------------------------------------------------------ */
.main-logo,
.thum,
.image,
.banner {
  margin: 0 auto;
  text-align: center;
}

/* ------------------------------------------------------------ */
/* link */
/* ------------------------------------------------------------ */
::selection {
  color: #383838;
  background: rgba(0, 0, 0, 0.1);
  text-shadow: none;
}

::-moz-selection {
  color: #383838;
  background: rgba(0, 0, 0, 0.1);
  text-shadow: none;
}

a {
  color: rgb(var(--contrast-color));
  cursor: pointer;
  line-height: inherit;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

a:link,
a:visited,
a:active {
  color: rgb(var(--contrast-color));
  text-decoration: none;
}

a:hover {
  color: rgb(var(--primary-color));
  opacity: 0.8;
  text-decoration: none;
}


/* ------------------------------------------------------------ */
/* ボタン */
/* ------------------------------------------------------------ */
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1em;
}

.btns:has(> .btn:only-child) {
  justify-content: center;
}

.btn {
  display: flex;
}


@media screen and (min-width:480px) {
  .btns:has(> .btn:nth-child(2)) .btn {
    flex: 1;
  }

  .btns:has(> .btn:nth-child(2)) .btn a {
    width: 100%;
  }
}


.btn a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgb(var(--base-color));
  background: rgb(var(--primary-color));
  border: 2px solid rgb(var(--primary-color));
  border-radius: 100vmax;
  margin: 0 auto;
  padding: 0.5em 1.25em;
  font-size: 1.125em;
  font-weight: 700;
}

.btn a:hover {
  color: rgb(var(--primary-color));
  background: rgb(var(--base-color));
}

.btn-cp a {
  color: rgb(var(--contrast-2-color));
  border: none;
  background: linear-gradient(-45deg, #D9C314 0%, #F8F428 30%, #FDFC2B 60%, #E2D11A 98%, #FFFF2C 100%);
  border-bottom: solid 4px #997911;
  padding-right: 2em;
  position: relative;
  z-index: 1;
}

.btn-cp a::after {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.102 17.118'%3E%3Cpath d='M379.335,43.714a1.5,1.5,0,0,1-1.061-2.561L384.23,35.2l-6.041-6.041a1.5,1.5,0,0,1,2.121-2.121l7.1,7.1a1.5,1.5,0,0,1,0,2.121L380.4,43.275A1.5,1.5,0,0,1,379.335,43.714Z' transform='translate(-377.749 -26.596)' fill='%23482c15'/%3E%3C/svg%3E");
  position: absolute;
  top: 50%;
  right: 0.75em;
  transition: right 0.3s;
  transform: translateY(-50%);
  z-index: 2;
}

.btn-cp a:hover {
  background: linear-gradient(-45deg, #D9C314 0%, #F8F428 30%, #FDFC2B 60%, #E2D11A 98%, #FFFF2C 100%);
  border-bottom: none;
  transform: translateY(4px);
}

.btn-cp a:hover::after {
  right: 0.5em;
}

.btn-outline a {
  color: rgb(var(--contrast-2-color));
  background: transparent;
  border-color: rgb(var(--contrast-2-color));
}

.btn-outline a:hover {
  color: rgb(var(--contrast-2-color));
  background: rgb(var(--base-color));
  border-color: rgb(var(--contrast-2-color));
}

/* ------------------------------------------------------------ */
/* common layouts */
/* ------------------------------------------------------------ */
.wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.content {
  width: 100%;
  height: auto;
  position: relative;
  padding: 0;
  margin: 0 auto;
}

.base {
  width: 100%;
  height: auto;
  position: relative;
  padding: var(--padding-block) 0;
  margin: 0 auto;
}

.inner {
  width: 100%;
  max-width: calc(1140px + var(--padding-inline) * 2);
  height: auto;
  padding: 0 var(--padding-inline);
  margin: 0 auto;
  clear: both;
}

.inner::after {
  content: "";
  clear: both;
  display: block;
}

.slash {
  padding-top: calc(var(--padding-block) / 2);
  margin-top: calc(var(--padding-block) + 4rem);
  /* padding-top: 4rem;
  margin-top: 10rem; */
}

.slash::before {
  content: "";
  display: block;
  width: 100%;
  height: 6rem;
  background-color: rgb(var(--primary-color));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  position: absolute;
  top: -6rem;
  left: 0;
}

.arrow+section {
  padding-top: calc(var(--padding-block) + 4rem);
}

.arrow::after {
  content: "";
  display: block;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 40px solid rgb(var(--base-color));
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}


/* ------------------------------------------------------------ */
/* animation */
/* ------------------------------------------------------------ */
@keyframes fadeInup {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.ani-fadeInup {
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.ani-fadeInup.is-show {
  animation: fadeInup 0.8s ease-in-out 0.3s 1 forwards;
}

.inview {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.inview.is-show {
  opacity: 1;
}

.ani-reval {
  opacity: 0;
  clip-path: 0 0 0 100%;
  transition: all 0.3s ease-in-out;
}

.ani-reval.is-show {
  animation: reveal 0.5s ease-in-out 0.3s 1 forwards;
}

@keyframes reveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}

.ani-slideup {
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.ani-slideup.is-show {
  animation: slideup 0.5s ease-in-out 0.3s 1 forwards;
}

@keyframes slideup {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------ */
/* flx_box */
/* ------------------------------------------------------------ */
.flx_box {
  width: 100%;
  height: auto;
  margin: 0 auto 1em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.flx_box:has(> .flx_item:only-child) {
  justify-content: center;
}

.flx_box:not(.nowrap) {

  flex-wrap: wrap;
}

/* カラム共通 */
.flx_item {
  width: 100%;
  height: auto;
  margin: 0;
}


/* ------------------------------------------------------------ */
/* typo,ttl */
/* ------------------------------------------------------------ */
.main-ttl {
  font-size: 1.5em;
  margin: 0 auto 1.5em;
  text-align: center;
  position: relative;
}

.ttl-img {
  display: block;
  width: 100%;

}

.ttl-hidden {
  display: none;
  text-indent: -9999px;
  visibility: hidden;
  opacity: 0;
}

.main-ttl.has-point {
  padding: 1em 1em 0;
}

.main-ttl.has-point::before,
.main-ttl.has-point::after {
  content: "";
  display: block;
  width: 6rem;
  height: 10rem;
  position: absolute;
}

.main-ttl.has-point::before {
  background: url(../img/ttl-point-left.svg) no-repeat left center / contain;
  top: -0.8em;
  left: -0.3em;
  transform: rotate(56deg);
}

.main-ttl.has-point::after {
  background: url(../img/ttl-point-right.svg) no-repeat right center / contain;
  top: -0.8em;
  right: -0.3em;
  transform: rotate(-56deg);
}


h3:has(.bdr) {
  width: 100%;
  font-size: 1.75em;
  line-height: 1.5;
  margin-bottom: 1em;
  text-align: center;
  position: relative;
}

.bdr {
  /* width: 100%; */
  display: inline-block;
  padding: 0 0.5em 0.25em;
  text-align: center;
  border-bottom: 3px solid rgb(var(--primary-color));
  position: relative;
  z-index: 1;
}

.bdr::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: rgb(var(--primary-color));
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  z-index: -3;
}

.bdr::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: rgb(var(--base-color));
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  z-index: -2;
}


/* ------------------------------------------------------------ */
/* cta-nav */
/* ------------------------------------------------------------ */
.cta-nav {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  right: 50%;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.4);
  z-index: 999;
  transition: transform 0.4s ease-in-out;
  transform: translate(50%, 120%);
}

.cta-nav.is-fixed {
  transform: translate(50%, 0);
}

.cta-nav-link {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  background-color: rgb(var(--base-color));
}

.cta-ttl {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgb(var(--contrast-2-color)) url(../img/cta-ttl.svg) no-repeat center / auto 50%;
  border-radius: 100vmax;
  margin: 0 auto 10px;
}

.cta-ttl span,
.cta-link-item span {
  font-size: 1rem;
  display: block;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}

.cta-link-item {
  width: 50%;
}

.cta-link-item a {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.8rem 1rem;
}

.cta-link-item.mail a {
  background: rgb(var(--primary-color)) url(../img/cta-mail.svg) no-repeat center / auto 75%;
}

.cta-link-item.phone a {
  background: #FF951A url(../img/cta-phone.svg) no-repeat center / auto 80%;
}



/* ------------------------------------------------------------ */
/* mainvisual */
/* ------------------------------------------------------------ */
.mainvisual {
  width: 100%;
  padding: var(--padding-block) 0 calc(var(--padding-block) / 2);
  min-height: 24rem;
  /* display: grid;
  place-content: center; */
  /* background: url(../img/mv-bg.jpg) no-repeat center / cover; */
  position: relative;
}

.mainvisual .inner {
  max-width: calc(1280px + var(--padding-inline) * 2);
}

.mainvisual::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% + 24rem);
  background: url(../img/mv-bg.png) no-repeat center / cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.mv-ttl {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.mv-ttl img {
  width: 100%;
  height: auto;
}


/* ------------------------------------------------------------ */
/* campaign */
/* ------------------------------------------------------------ */
.mainvisual+.campaign {
  margin-top: var(--padding-block);
}

.cp-ttl-container {
  display: flex;
  flex-wrap: wrap;
}

.cp-ttl {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.cp-ttl-hidden {
  display: none;
  text-indent: -9999px;
  visibility: hidden;
  opacity: 0;
}

.cp-ttl-img {
  display: block;
  width: 100%;
}

.cp-ttl-img.kousoku-otoku-anshin {
  margin: 4rem auto 2rem;
}

.cp-ttl-img.koujihi_muryo {
  margin: 2rem auto 0;
}

.cp-ttl-img.kanyu_campaign {
  margin: 2rem auto 3.2rem;
}

.cp-ttl-img.muryou {
  margin: 2rem auto 4rem;
}

.cp-ttl-img.kanyu {
  margin: 2rem auto;
}



.cp-ttl-img img {
  width: 100%;
  height: auto;
}

.cp-bnr {
  width: 100%;
  margin-inline: auto;
  margin-block: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;

  @media (min-width: 768px) {
    /* flex-wrap: nowrap; */
    gap: 2.4rem;
  }
}

.cp-bnr-item {
  width: 100%;
  display: flex;
  align-items: center;

  @media (min-width: 768px) {
    /* width: fit-content; */
    width: calc((100% - 6rem - 4.8rem) / 2);
  }
}

.cp-bnr-item a {
  width: 100%;
  background-color: #fff;
}

.cp-bnr .plus {
  display: grid;
  place-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='M14.919,38.88H34.041V2.71H69.48V-14.95H34.041V-51.12H14.919v36.17H-20.52V2.71H14.919Z' transform='translate(20.52 51.12)' fill='%23ffffff'/%3E%3C/svg%3E");
  width: 5rem;
  height: 5rem;
  @media (min-width: 768px) {
  width: 6rem;
  height: 6rem;
  }
}

/*
.cp-bnr-item+.cp-bnr-item::before {
  content: "+";
  display: inline-block;
  margin-bottom: 2.4rem;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;

  @media (min-width: 768px) {
    margin-right: 2.4rem;
    margin-bottom: 0;

  }
} */


/* .cp-bnr-item {
  width: 100%;
} */

/* ------------------------------------------------------------ */
/* アコーディオン */
/* ------------------------------------------------------------ */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  /* Safari-デフォルトの三角形を削除*/
  display: none;
}

.faq-object {
  width: 100%;
  margin: 0 auto;
}

.faq-object+.faq-object {
  margin-top: 2rem;
}

.faq-q {
  padding: 1rem 0.5em 1rem 3em;
  font-size: 1.125em;
  font-weight: 700;
  color: rgb(var(--base-color));
  background-color: rgb(var(--contrast-2-color));
  position: relative;
}

.faq-q::before {
  content: "Q";
  display: grid;
  place-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.2em;
  border-radius: 50%;
  color: rgb(var(--contrast-2-color));
  background-color: rgb(var(--base-color));
  position: absolute;
  top: 50%;
  left: 0.5em;
  line-height: 1;
  transform: translateY(-50%);
}

/* .faq-object:not([open="true"]) .faq-q::after {
  content: "";
  display: block;
  width: 2px;
  height: 1em;
  background: #000;
  position: absolute;
  top: 50%;
  right: 1.5em;
  transform: translate(50%, -50%);
} */

.faq-a {
  background-color: rgb(var(--base-color));
  font-size: 1.125em;
  font-weight: 500;
  padding: 1em 1em 1.5em 3em;
  position: relative;
  overflow: hidden;
}

.faq-a::before {
  content: "A";
  display: grid;
  place-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.2em;
  border-radius: 50%;
  background-color: rgb(var(--contrast-2-color));
  color: rgb(var(--base-color));
  position: absolute;
  top: 1em;
  left: 0.5em;
  line-height: 1;
}

/* ------------------------------------------------------------ */
/* form  */
/* ------------------------------------------------------------ */
.form-container {
  width: 100%;
  max-width: calc(800px + var(--padding-inline) *2);
  margin: 4rem auto;
  padding: 3rem var(--padding-inline);
}

.form-container .form-ttl {
  font-weight: 600;
}

.form-container .form-box input[type="checkbox"]:checked::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid rgb(var(--primary-color));
  border-bottom: 2px solid rgb(var(--primary-color));
  transform: rotate(-45deg);
  font-family: initial;
  font-weight: normal;
  left: 2px;
  top: 3px;
}

/* ------------------------------------------------------------ */
/* footer */
/* ------------------------------------------------------------ */
.main-footer {
  width: 100%;
  padding: 1.5em 5%;
  background: rgb(var(--contrast-2-color));
  color: rgb(var(--base-color));
}

.copy {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
}

/* ------------------------------------------------------------ */
/* problem */
/* ------------------------------------------------------------ */
.problem .main-ttl {
  padding: 2em 1em 4em;
  background: url(../img/fukidashi-sp.svg) no-repeat center / contain;
  margin-bottom: 0;
}

.problem-list {
  margin: 4rem auto 0;
}

.problem-item {
  width: 100%;
  position: relative;
}

.problem-item .txt {
  display: block;
  font-size: 1.125em;
  font-weight: 700;
  text-align: center;
  position: absolute;
  z-index: 2;
}

.flx_item:nth-of-type(1) .problem-item .txt {
  top: 4rem;
  right: 18%;
}

.flx_item:nth-of-type(2) .problem-item .txt {
  top: 5rem;
  right: 50%;
  transform: translateX(50%);
}

.flx_item:nth-of-type(3) .problem-item .txt {
  top: 4rem;
  right: 44%;
}

/* ------------------------------------------------------------ */
/* merit */
/* ------------------------------------------------------------ */
.merit .main-ttl.has-point {
  padding-top: 0;
}

.merit .main-ttl.has-point::before,
.merit .main-ttl.has-point::after {
  width: 8rem;
  height: 12rem;
  top: 2.2em;
}


.merit-anker {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.merit-anker li {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 3rem 0 1em;
}

.merit-anker li a {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  background: #fff;
}

.merit-anker li .num {
  display: grid;
  place-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  line-height: 1;
  letter-spacing: 0;
  font-size: 3em;
  font-weight: 600;
  color: rgb(var(--base-color));
  background: rgb(var(--primary-color));
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.merit-anker-ttl {
  width: 100%;
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  background-color: rgb(var(--base-color));
  padding: 1.5em 0.5em 1em;
  margin: auto;
}

.merit-anker-ttl .caps {
  display: block;
  font-size: 0.65em;
  color: rgb(var(--primary-color));
}

.merit-anker li .more {
  width: 100%;
  font-weight: 700;
  font-size: 1.125em;
  color: rgb(var(--base-color));
  background: rgb(var(--primary-color));
  padding: 0.5em;
  margin: auto 0 0;
  text-align: center;
  position: relative;
}

.merit-anker .more::after {
  content: "";
  display: block;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid rgb(var(--primary-color));
  position: absolute;
  bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.merit-list {
  width: 100%;
  margin: 8rem auto 4rem;
}

.merit-item {
  width: 100%;
  margin: 8rem auto 0;
  background-color: rgb(var(--base-color));
}

.merit-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(var(--base-color));
  border-top: 5px solid rgb(var(--primary-color));
  position: relative;
}

.merit-ttl {
  width: 100%;
  padding: 1.5em 0.25em 0.5em;
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  background-color: rgb(var(--base-color));
}

.merit-ttl .caps {
  display: block;
  font-size: 0.65em;
  color: rgb(var(--primary-color));
}

.merit-desc {
  width: 100%;
  padding: 1em 1em;
  font-size: 1.125em;
  font-weight: 500;
  color: rgb(var(--base-color));
  background: rgb(var(--primary-color));
}

.merit-header .num {
  display: grid;
  place-content: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  line-height: 1;
  letter-spacing: 0;
  font-size: 3.5em;
  font-weight: 600;
  color: rgb(var(--base-color));
  background: rgb(var(--primary-color));
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.merit-txt {
  width: 100%;
  padding: 1.5em 1em;
  background: rgb(var(--base-color));
}

.merit-txt .ttl-img {
  text-align: center;
}

.merit-txt .ttl-img img {
  width: 100%;
  height: auto;
}

.merit-txt .flx_item {
  font-weight: 700;
  font-size: 2.4rem;
  position: relative;
}

.merit-txt .flx_item.has-shadow {
  margin: 4rem 0 0;
  padding: 1.5em 1em 1em;
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

#merit2 .flx_item {
  width: fit-content;
  margin-inline: auto;
}

.merit-txt .flx_item .label {
  font-weight: 700;
  text-align: center;
  padding: 0.25em 0.75em;
  border-radius: 1.5rem;
  line-height: 1.2;
  font-size: 2.2rem;
  color: rgb(var(--base-color));
  background: #AAAAAA;
  position: relative;
}

.merit-txt .flx_item:nth-of-type(1) .label {
  background: rgb(var(--primary-color));
}

.merit-txt .flx_item .label {
  font-weight: 700;
  text-align: center;

  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
}

.merit-txt .flx_item figcaption {
  margin: 1.2rem auto 0;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
}

.merit-point {
  width: 100%;
  padding: 1em 1em;
  font-size: 1.25em;
  font-weight: 700;
  color: rgb(var(--base-color));
  background: rgb(var(--contrast-2-color));
  position: relative;
}

.merit-point::before {
  content: "";
  display: block;
  width: 110px;
  height: 36px;
  margin: 0 0 1rem;
  background: url(../img/point.svg) no-repeat left center / contain;
  position: relative;
}


.merit-item .box {
  margin: 2rem auto 4rem;
  padding: 2em 1em;
  background-color: rgb(var(--base-color));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

.merit-item .box:last-of-type {
  margin-bottom: 2rem;
}

.merit-item .box h4 {
  width: 80%;
  margin: 0 auto;
}

.merit-item .box .img-box {
  margin: 4rem auto;
}

.discount-price {
  padding: 1em;
  border-radius: 1rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
  color: rgb(var(--red-color));
  border: 2px solid rgb(var(--red-color));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.discount-price>span {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
}

.discount-price span:has(.tate) {
  display: inline-flex;
  align-items: flex-end;
  gap: 1rem;
}

.discount-price .num {
  font-size: 6.2rem;
  line-height: 1;
  font-weight: 600;
}

.discount-price .tate {
  font-size: 2.2rem;
  display: inline-block;
  width: 1em;
  height: 100%;
}

.merit-item .btns {
  margin: 4rem auto 0;
}

.merit-item .btns .btn a {
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.7;
  border-width: 1px;
}

.merit-item .btns .btn a:hover {
  background-color: rgba(var(--accent-color), 0.3);
}


.notice {
  font-size: 1.4rem;
  width: 100%;
  margin: 4rem auto;
}

.notice li {
  margin: 0 0 0.75em;
}


.recommend-box {
  width: 100%;
  padding: 2em 1.5em;
  background: rgb(var(--base-color));
  border: 5px solid rgb(var(--primary-color));
}

.recommend-box h2 {
  margin: 0 auto 2.4rem;
}

.recommend-box .txt {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
}

.recommend-box .img {
  margin: 1.5em auto 0;
}

/* ------------------------------------------------------------ */
/* voice */
/* ------------------------------------------------------------ */

.voice-list {}

.voice-item {
  width: 100%;
  padding: 2em;
  margin-block: 0.5em;
  background-color: rgb(var(--base-color));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.voice-item .ttl {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 auto 1.4rem;
}

.voice-item .ttl>span {
  font-size: 2.4rem;
  color: rgb(var(--primary-color));
}

.voice-item .txt {
  width: 100%;
  font-size: 1.125em;
  font-weight: 500;
}

.voice-item .img {
  width: 8rem;
  height: 11rem;
  margin: 0 auto 2.5rem;
  /* display: flex; */
}

.voice-item .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------ */
/* price */
/* ------------------------------------------------------------ */

.price {
  padding-top: 0;
}

.price .cp-ttl-container {
  transform: translateY(-4%);
}

.price:has(#kanyu) .cp-ttl-container {
  transform: translateY(-10%);
}

.price .cp-ttl-img.kanyu {
  margin-top: 0;
}

.price .box#kanyu .main-ttl {
  max-width: 85%;
}
.price .cp-bnr {
  margin-top: 3rem;
}

.price .box {
  padding: 2em 1em;
  position: relative;
}

.price .box:has(.box-tag) {
  padding-top: 9rem;

  +.box {
    margin-top: 5rem;
  }
}

.box-tag {
  width: 180px;
  height: 66px;
  padding: 0 1.5em;
  background-color: rgb(var(--primary-color));
  color: rgb(var(--base-color));
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.box-tag .font-en {
  font-size: 1.7em;
  display: inline-block;
  line-height: 1;
  font-weight: 600;
  margin: 0 0 0 8px;
  vertical-align: text-bottom;
}


.price .desc {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
  margin: 0 auto 4rem;
}

.price .desc.round {
  padding: 0.25em 0.75em;
  background-color: rgb(var(--primary-light-color));
  border-radius: 100vmax;
}

.price-table {
  width: 100%;
  overflow-x: scroll;
  position: relative;
}

.price-table::after {
  content: "→ スクロールで全体をご覧いただけます";
  display: block;
  width: 100%;
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(var(--contrast-color), 0.5);
  margin: 1rem 0 0;
  position: sticky;
  left: 0;
}

.price-table h4 {
  font-size: 2.2rem;
  color: rgb(var(--contrast-2-color));
  position: sticky;
  left: 0;
  margin: 0 0 0.8rem;
}

table {
  width: 100%;
  min-width: 420px;
  border-bottom: 1px solid rgb(var(--contrast-2-color));
  position: relative;
}

th,
td {
  padding: 0.25em 0.5em;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
  text-align: center;
  width: calc((100% - 80px)/2);
}

thead {
  background-color: rgb(var(--contrast-2-color));
  color: rgb(var(--base-color));
}

th {
  background-color: rgb(var(--contrast-2-color));
  color: rgb(var(--base-color));
  border-bottom: 1px solid rgb(var(--base-color));
  width: 80px;
}


tbody tr {
  border-top: 1px solid rgb(var(--contrast-2-color));
  background-color: rgb(var(--base-color));

}

tbody tr.row-ttl+tr {
  border-top: none;
}

tbody tr.row-ttl {
  border-top: none;
  background-color: rgb(var(--primary-light-color));
}

tbody td {
  font-size: 2.2rem;
  background-color: rgb(var(--base-color));
}

table .sticky {
  position: sticky;
  left: 0;
}

tbody .has-medium-font-size td {
  font-size: 1.8rem;
}

tbody td.has-medium-font-size {
  font-size: 1.8rem;
}

tbody td .num {
  font-weight: 600;
  font-size: 1.75em;
}

.row-ttl td {
  font-size: 1.6rem;
  padding: 0.25em 1em;
  font-weight: 500;
  text-align: left;
  background-color: rgb(var(--primary-light-color));
}

.fukidashi-box {
  position: relative;
  margin-inline: auto;

  @media (min-width: 480px) {
    max-width: 70%;
  }

  @media (min-width: 600px) {
    max-width: 560px;
    padding-top: 140px;
  }

}

.fukidashi {
  width: fit-content;
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
  padding: 1.5em 1.5em 3em;
  position: relative;
  z-index: 1;

  /* margin-bottom: 2rem; */
  @media (min-width: 600px) {
    position: absolute;
  }
}

.fukidashi>* {
  position: relative;
  z-index: 2;
}

.fukidashi::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/fukidashi-center.svg) no-repeat center top / contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.fukidashi:nth-of-type(1) {
  margin-left: auto;
  padding-top: 1.2em;

  @media (min-width: 600px) {
    left: -10%;
    top: 110px;
  }
  @media (min-width: 768px) {
    left: -10px;
    top: 110px;
  }
}

.fukidashi:nth-of-type(1)::after {
  @media (min-width: 600px) {
    /* transform: rotate(-5deg); */
    background-image: url(../img/fukidashi-left.svg);
  }
}

.fukidashi:nth-of-type(2) {
  margin-right: auto;

  @media (min-width: 600px) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);

  }
}



.fukidashi:nth-of-type(3) {
  margin-left: auto;

  @media (min-width: 600px) {
    right: -10%;
    top: 110px;
  }
  @media (min-width: 768px) {
    right: -10px;
    top: 110px;
  }
}

.fukidashi:nth-of-type(3)::after {
  transform: scale(-1, 1);

  @media (min-width: 600px) {
    /* transform: scale(-1, 1) rotate(-5deg); */
    transform: scale(1,1);
    background-image: url(../img/fukidashi-right.svg);

  }
}

.illust {
  width: 90%;
	max-width: 300px;
	max-height: 340px;
  text-align: center;
  margin-inline: auto;
  margin-top: 1.6rem;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ------------------------------------------------------------ */
/* plan */
/* ------------------------------------------------------------ */

.plan .desc {
  font-size: 1.25em;
  font-weight: 500;
  text-align: center;
  margin: 0 auto 5.2rem;
}

.plan .desc span {
  font-weight: 700;
}

.plan-box.set,
.plan-item {
  background-color: rgb(var(--base-color));
}

.plan-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(var(--primary-light-color));
}

.plan-box {
  padding: 0 0 1em;
  margin: 0 auto 2rem;
}

.plan-box .plan-desc {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
  padding: 0 1em 1em;
}

.plan-box .flx_item {
  padding: 0.5em 1em 0;
  display: flex;
  flex-direction: column;
}

/*
.plan-box .plan-item {
  margin: 0.5em 0;
}

.plan-box.set .plan-item {
  padding: 0 1em;
  margin: 0;
} */

.plan-ttl {
  width: 100%;
  font-size: 1.75em;
  padding: 0.15em 0.5em;
  font-weight: 700;
  text-align: center;
  color: rgb(var(--base-color));
  background-color: rgb(var(--primary-color));
  margin: 0 auto 2rem;
}

.plan-box>.plan-ttl {
  font-size: 2.55em;
}

.plan-box>.plan-ttl span {
  font-size: 0.6em;
  display: block;
}

.plan-box .plan-item .plan-ttl {
  font-size: 1.25em;
  margin-bottom: 0;
}

.plan-txt {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
  padding: 0 1em 2em;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.plan-txt>div {
  padding: 4rem 0 0;
}

.plan-txt>.plan-price {
  padding: 2.4rem 0 0;
}

/* .plan-box.set .plan-txt {
  padding: 0;
} */

.plan-item .plan-desc {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
  padding: 2rem 0 0;
  margin-block: auto;
}

.plan-item+p {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
  padding: 1.5em 1em;
}

.plan-box .note {
  font-size: 0.875em;
  padding: 0;
  text-align: right;
  margin: 2rem 0 0 auto;
}

.plan-price {
  font-size: 2.125em;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  line-height: 1;
  margin: 0 auto 2rem;
}

.plan-box.set .plan-price {
  font-size: 2em;
  margin: 0 auto;
}

.plan-price .num {
  font-size: 2em;
}

.plan-item .flx_item {
  background-color: rgb(var(--primary-light-color));
  padding: 1.5em 1em;
}

.badge-ttl {
  font-size: 1.55em;
  padding: 0.15em 5rem 0.15em 1em;
  font-weight: 700;
  text-align: left;
  color: rgb(var(--primary-color));
  background-color: rgb(var(--base-color));
  border-radius: 100vmax;
  margin: 0 auto 2rem;
  position: relative;
}

.badge-ttl::after {
  content: "";
  display: block;
  width: 8rem;
  height: 8rem;
  position: absolute;
  right: -1rem;
  top: -1rem;
}

.badge-ttl.double::after {
  background: url(../img/plan-set-double.svg) no-repeat center top / 100%;
}

.badge-ttl.triple::after {
  background: url(../img/plan-set-triple.svg) no-repeat center top / 100%;
}

.plan-box+.btn {
  margin: 3rem 0 0 auto;
  justify-content: flex-end;
}

.plan-box+.btn a {
  margin: 0;
}

.plan .notice {
  margin-top: 2rem;
  margin-bottom: 0;
}

/* ------------------------------------------------------------ */
/* flow */
/* ------------------------------------------------------------ */
.flow-chart {
  margin: 0 auto 7.2rem;
}

.flow-list {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  background-color: rgb(var(--primary-light-color));
  padding: 2em 3em calc(2em + 50px);
  position: relative;
}

.flow-list::before,
.flow-list::after {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background-color: rgb(var(--primary-light-color));
  clip-path: polygon(0 0, 100% 0, 100% 15%, 50% 100%, 0 15%);
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
}

.flow-list::after {
  clip-path: none;
  background-color: rgb(var(--primary-light2-color));
  z-index: 1;
}

.flow-list:nth-of-type(odd) {
  background-color: rgb(var(--primary-light2-color));
}

.flow-list:nth-of-type(odd)::before {
  background-color: rgb(var(--primary-light2-color));
}

.flow-list:nth-of-type(odd)::after {
  background-color: rgb(var(--primary-light-color));
}

.flow-list:last-of-type::before {
  background-color: rgb(var(--primary-light2-color));
}

.flow-list:last-of-type::after {
  background-color: rgb(var(--primary-light2-color));
}

.flow-list .label {
  width: 14rem;
  padding: 0 1em;
  margin: 0 auto 0.8rem;
  border-radius: 100vmax;
  font-weight: 700;
  text-align: center;
  color: rgb(var(--base-color));
  background-color: rgb(var(--primary-color));
}

.flow-ttl {
  font-size: 1.275em;
  text-align: center;
  color: rgb(var(--primary-color));
  margin: 0 auto 1.4rem;
}

.flow-txt {
  font-weight: 500;
}

/* ------------------------------------------------------------ */
/* osusume */
/* ------------------------------------------------------------ */

.check-list {
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.check-list-item {
  width: fit-content;
  font-size: 1.75em;
  font-weight: 700;
  padding: 0 0.5em 1rem 6rem;
  line-height: 1.6;
  margin: 0 0 2rem;
  border-bottom: 4px dashed rgb(var(--accent-color));
  position: relative;
}

.check-list-item::before {
  content: "";
  display: block;
  width: 4.8rem;
  height: 3.2rem;
  background: url(../img/icon-check.svg) no-repeat center / contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.service-area {
  background-color: rgb(var(--primary-light-color));
  padding: 1.5em;
  width: 100%;
  margin: 4rem auto 0;
}

.service-area h3 {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  color: rgb(var(--primary-color));
  text-align: center;
  margin: 0 auto 1rem;
}

.service-area p {
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* ------------------------------------------------------------ */
/* form */
/* ------------------------------------------------------------ */

.form .desc {
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;

}

@media screen and (min-width:480px) {

  /* スマートフォン横 */
  .sp {
    display: block;
  }

  .cta-nav {
    width: 400px;
  }

  /* ------------------------------------------------------------ */
  /* flx_box */
  /* ------------------------------------------------------------ */
  .flx_box:has(> .flx_item:nth-child(2)) .flx_item {
    width: calc((100% - 1em) / 2);
  }

  .flx_box:has(> .flx_item:nth-child(3)) .flx_item {
    width: calc((100% - 1em) / 2);
  }

  .flx_box:has(> .flx_item:nth-child(3)) .flx_item:last-child {
    margin-inline: auto;
  }

  .flx_box:has(> .flx_item:nth-child(4)) .flx_item {
    width: calc((100% - 1em) / 2);
  }

  /* ------------------------------------------------------------ */
  /* merit */
  /* ------------------------------------------------------------ */
  .merit-list li {
    flex-direction: row;
  }


  /* ------------------------------------------------------------ */
  /* problem */
  /* ------------------------------------------------------------ */
  .problem .main-ttl {
    padding: 2em 1em 3.2em;
    background: url(../img/fukidashi.svg) no-repeat center / contain;
  }

  .problem .main-ttl .sp {
    display: none;
  }

  .problem .main-ttl .pc {
    display: block;
  }

  .problem-list .flx_item:nth-of-type(2) {
    margin-top: 20%;
  }

  .problem-list .flx_item:nth-of-type(3) {
    transform: translate(-40%, -40%);
  }

  .flx_item:nth-of-type(1) .problem-item .txt {
    top: 12%;
    right: 11%;
  }

  .flx_item:nth-of-type(2) .problem-item .txt {
    top: 12%;
    right: 50%;
    transform: translateX(50%);
  }

  .flx_item:nth-of-type(3) .problem-item .txt {
    top: 12%;
    right: 44%;
  }

  /* ------------------------------------------------------------ */
  /* merit */
  /* ------------------------------------------------------------ */
  .merit .main-ttl .sp {
    display: none;
  }

  .merit .main-ttl .pc {
    display: block;
  }

  .merit .main-ttl.has-point {
    padding-inline: 6rem;
  }

  .merit .main-ttl.has-point::before,
  .merit .main-ttl.has-point::after {
    width: 6rem;
    height: 12rem;
    top: 50%;
  }

  .merit .main-ttl.has-point::before {
    /* top: -0.8em; */
    left: -1em;
    transform: translateY(-50%) rotate(0);
  }

  .merit .main-ttl.has-point::after {
    /* top: -0.8em; */
    right: -1em;
    transform: translateY(-50%) rotate(0);
  }

  .merit-anker {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .merit-anker li {
    width: calc((100% - 2rem)/2);
  }

  .merit-anker li:last-of-type {
    margin-inline: auto;
  }

  .merit-txt {
    padding: 1.5em 2em;
  }

  .merit-item .box {
    padding: 3em 3em;
  }

  .recommend-box h2 .sp {
    display: none;
  }

  .recommend-box h2 .pc {
    display: block;
  }

  .recommend-box .ttl-img img {
    transform: translateX(50px);
  }

  .price .box {
    padding: 3em 3em;
  }

  .plan-box .flx_box:has(> .flx_item:nth-child(2)) .flx_item {
    width: 100%;
  }

  .badge-ttl {
    width: fit-content;
    min-width: 300px;
  }

  th,
  td {
    padding: 0.25em 0.5em;
    font-size: 1.6rem;
    width: calc((100% - 120px) / 2);
  }

  th {
    width: 120px;
  }

  .flow-chart {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.2rem;
    max-width: 600px;

  }

  .flow-list {
    width: 50%;
    padding: 2em 3em 2em 3em;
  }

  .flow-list::before,
  .flow-list::after {
    width: 50px;
    height: 100%;
    clip-path: polygon(0 0, 15% 0, 100% 50%, 15% 100%, 0 100%);
    bottom: 0;
    left: auto;
    right: -1em;
    transform: translate(0);
    z-index: 2;
  }

  .flow-list::after {
    clip-path: none;
    z-index: 1;
  }

  .flow-list:nth-of-type(2):after,
  .flow-list:nth-of-type(4):after {
    background-color: rgb(var(--accent-light-color));
  }

  .flow-list:last-of-type {
    margin-inline: auto;
  }

  .flow-list:last-of-type::before,
  .flow-list:last-of-type::after {
    display: none;
  }




  .osusume .main-ttl.has-point {
    padding: 0 8rem;
    width: fit-content;
  }

  .osusume .main-ttl.has-point::before,
  .osusume .main-ttl.has-point::after {
    width: 6rem;
    height: 100%;
  }

  .osusume .main-ttl.has-point::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(0);
  }

  .osusume .main-ttl.has-point::after {
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0);
  }

}

@media screen and (min-width:768px) {

  /* タブレット縦 / スマートフォン横 */
  /* ------------------------------------------------------------ */
  /* common content */
  /* ------------------------------------------------------------ */


  /* ------------------------------------------------------------ */
  /* flx_box */
  /* ------------------------------------------------------------ */
  .flx_box:has(> .flx_item:nth-child(2)) .flx_item {
    width: calc((100% - 1em) / 2);
  }

  /* .flx_box:has(> .flx_item:nth-child(3)) .flx_item {
    width: calc((100% - 2em) / 3);
  }

  .flx_box:has(> .flx_item:nth-child(3)) .flx_item:last-child {
    margin-inline: 0;
  } */

  .flx_box:has(> .flx_item:nth-child(4)) .flx_item {
    width: calc((100% - 1em) / 2);
  }


  /* ------------------------------------------------------------ */
  /* cta-nav */
  /* ------------------------------------------------------------ */
  .cta-nav {
    width: 240px;
    bottom: 1em;
    right: 0;
    box-shadow: none;
    transform: translate(100%, 0);
  }

  .cta-nav.is-fixed {
    transform: translate(0);
  }

  .cta-nav-link {
    gap: 0.8rem;
    padding: 0;
    background: none;
  }

  .cta-ttl {
    background-size: 90% auto;
    border-bottom: 3px solid #000000;
    border-radius: 0;
    margin: 0;
  }

  .cta-link-item {
    width: 100%;
    min-height: 10rem;
  }

  .cta-link-item.mail a {
    background-position: left 1em center;
    background-size: 70% auto;
    border-bottom: 3px solid #8D340C;
  }

  .cta-link-item.phone a {
    background-position: left 1em center;
    background-size: 80% auto;
    border-bottom: 3px solid #91540D;
  }

  .cta-link-item a:hover {
    opacity: 1;
    border-bottom-width: 0;
  }

  .merit .main-ttl.has-point {
    padding-inline: 8rem;
    width: fit-content;
  }

  .merit-header .num {
    width: 6.4rem;
    height: 6.4rem;
    font-size: 3em;
    top: 50%;
    left: 2rem;
    transform: translate(0, -50%);
  }

  .merit-ttl {
    width: 50%;
    padding: 0.5em 0.75em 0.5em 10rem;
    text-align: left;
    align-self: center;
  }

  .merit-ttl .caps {
    line-height: 1.5;
  }

  .merit-desc {
    width: 50%;
    position: relative;
    display: flex;
  }

  .merit-desc span {
    align-self: center;
  }

  .merit-desc::before {
    content: "";
    display: block;
    background-color: rgb(var(--primary-color));
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -30px;
    /* z-index: -1; */
  }

  #merit2 .merit-txt {
    align-items: center;
  }

  #merit2 .flx_item {
    margin: 0;
  }

  #merit2 .flx_item:has(img) {
    width: calc(55% - 0.5em);
  }

  #merit2 .flx_item {
    width: calc(45% - 0.5em);
  }

  .merit-item .box h4 {
    width: 100%;
    margin: 0 auto;
  }

  .merit-item .box h4 .sp,
  .merit-item .box .img-box .sp {
    display: none;
  }

  .merit-item .box h4 .pc,
  .merit-item .box .img-box .pc {
    display: block;
  }

  .discount-price {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .discount-price>span {
    text-align: left;
  }

  .price .desc {
    width: fit-content;
    max-width: 740px;
  }

  .price .desc.round {
    padding: 0.25em 2.5em;
  }

  .plan-box>.plan-desc {
    padding: 2rem 6rem 4rem;
  }

  .plan-box .flx_box {
    max-width: 560px;
  }

  .badge-ttl {
    padding: 0.15em 8rem 0.15em 4rem;
    width: fit-content;
  }

  th,
  td {
    width: calc(100% / 3);
  }

  th {
    width: calc(100% / 3);
  }
}

@media screen and (min-width:960px) {

  /* デスクトップ/タブレット横 */
  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  /* ------------------------------------------------------------ */
  /* common content */
  /* ------------------------------------------------------------ */
  .flx_box {
    gap: 3rem;
  }

  .flx_box:has(> .flx_item:nth-child(2)) .flx_item {
    width: calc((100% - 3rem) / 2);
  }

  .flx_box:has(> .flx_item:nth-child(3)) .flx_item {
    width: calc((100% - 6rem) / 3);
  }

  .flx_box:has(> .flx_item:nth-child(3)) .flx_item:last-child {
    margin-inline: 0;
  }

  .flx_box:has(> .flx_item:nth-child(4)) .flx_item {
    width: calc((100% - 9rem) / 4);
  }


  .cta-link-item.mail a {
    background-size: 75% auto;
  }

  .cta-link-item.phone a {
    background-size: 90% auto;
  }

  /* ------------------------------------------------------------ */
  /* section */
  /* ------------------------------------------------------------ */
  .cp-ttl-container {
    margin: 0 auto 6rem;
  }

  .cp-ttl {
    width: fit-content;
    max-width: 920px;
  }

  .cp-ttl:has(.muryou) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* gap: 2rem; */
  }

  .cp-ttl-img.chance {
    max-width: 616px;
  }

  .cp-ttl-img.keizokuriyou {
    width: 55%;
    max-width: 505px;
    margin: 0 auto 0 0;
  }

  .cp-ttl-img.muryou {
    width: 45%;
    max-width: 367px;
    margin: 0 0 0 auto;
  }

  .btn-cp a {
    font-size: 2.2rem;
  }


  .problem .main-ttl {
    padding: 2.2em 1.5em 3.7em;
    background-size: 100% auto;
    width: fit-content;
  }

  .problem-list {
    align-items: flex-end;
    gap: 1.2rem;
    max-width: 810px;
  }

  .problem-list:has(> .flx_item:nth-child(3)) .flx_item {
    width: calc((100% - 2.4rem) / 3);
  }

  .problem-list .flx_item:nth-of-type(2) {
    margin-top: 0;
  }

  .problem-list .flx_item:nth-of-type(3) {
    transform: translate(0, 0);
  }

  .merit-anker {
    gap: 3rem;
  }

  .merit-anker li {
    width: calc((100% - 6rem) / 3);
  }

  .merit-header .num {
    width: 8rem;
    height: 8rem;
    font-size: 3.5em;
  }

  .merit-ttl {
    padding: 0.5em 4rem 0.5em 12rem;
    font-size: 2.5em;
  }


  .merit-point {
    padding: 1em 4rem;
    font-size: 1.375em;
    display: flex;
    justify-content: center;
  }

  .merit-point::before {
    margin: 0 1rem 0 0;
  }

  #merit1 .merit-txt {
    max-width: calc(812px + 8rem);
    padding: 4rem;
  }

  #merit2 .merit-txt {
    max-width: calc(712px + 8rem);
    padding: 4rem;
  }

  #merit2 .flx_item {
    width: calc(45% - 1.5rem);
  }

  #merit2 .flx_item:has(img) {
    width: calc(55% - 1.5rem);
  }

  .merit-item .box {
    padding: 4rem 6rem;
    width: fit-content;
    max-width: calc(695px + 12rem);
  }

  .merit-item .box h4 {
    width: fit-content;
    min-width: 446px;
  }

  .merit-item .box .img-box {
    width: fit-content;
    min-width: 500px;
    max-width: 564px;
  }

  .discount-price {
    min-width: 500px;
    margin: 0 auto;
    width: fit-content;
  }

  .recommend-box {
    padding: 7rem 6rem 6rem;
  }

  .recommend-box h2 {
    margin: 0 auto 4rem;
  }

  .recommend-box .flx_box:has(> .flx_item:nth-child(2)) .flx_item {
    padding-inline: 2rem;
  }

  .voice-list {
    margin-top: 6rem;
  }

  .price .box {
    padding: 6rem;
  }

  .price-table {
    overflow-x: hidden;
  }

  .price-table::after {
    display: none;
  }

  table {
    min-width: 100%;
  }

  .badge-ttl {
    width: fit-content;
    padding: 0.15em 11rem 0.15em 1.5em;
  }

  .badge-ttl::after {
    width: 10rem;
    height: 10rem;
    right: -1rem;
    top: -1rem;
  }

  /* .plan-box.set .plan-item {
    padding: 0 6rem;
  } */
  .plan-box .flx_box {
    max-width: 100%;
    padding: 0 6rem;
  }

  .plan-box .flx_box:has(> .flx_item:nth-child(2)) .flx_item {
    width: calc((100% - 3rem) / 2);
    padding: 0;
  }


  .flow-chart {
    max-width: 1090px;
  }

  .flow-list {
    width: calc(100% / 5);
    padding: 2rem;
    justify-content: space-between;
  }

  .flow-list::before,
  .flow-list::after {
    width: 30px;
    right: -1rem;
  }

  .flow-list:nth-of-type(2):after,
  .flow-list:nth-of-type(4):after {
    background-color: rgb(var(--primary-light2-color));
  }

  .flow-list .label {
    max-width: 14rem;
    width: fit-content;
  }

  .flow-ttl {
    line-height: 1.5;
    min-height: 62px;
  }

  .flow-txt {
    margin-bottom: auto;
  }

  .faq-object {
    max-width: 1090px;
  }

  .service-area {
    max-width: 1090px;
  }



}

@media screen and (min-width:1150px) {

  .flow-list .label {
    width: 14rem;
  }

  .flow-ttl {
    min-height: auto;
  }

}

@media (orientation: landscape) and (max-width: 767px) {
  /* デバイスが横向き、画面の横幅が 767px 以下の場合の記述 */
}