@charset "UTF-8";
po
/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*------------------------------------------------------
 Base (Mobile only view)
------------------------------------------------------*/
:root {
  --times-num: 1; /* 横幅を変更するときはこの数値を変更してください。375px...1, 700px...1.5 etc */
}

.kairoLpBody {
  color: #333;
  width: 100%;
  max-width: 440px;
  min-width: 440px;
  margin-inline: auto;
  -webkit-text-size-adjust: 100%;
  font-family: "Inter", "Noto Sans JP", "Montserrat", serif;
  font-size: calc(15px * var(--times-num));
  overflow-x: hidden;
}
@media screen and (min-width: 440px) {
  .kairoLpHtml {
    background: #f8eeef;
  }

  .kairoLpBody {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    margin-block: 100px;
    background: white;
  }
}
@media screen and (max-width: 440px) {
  :root {
    --times-num: 1;
  }
  .kairoLpBody {
    max-width: 440px;
    min-width: initial;
  }
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  user-select: none;
  pointer-events: none;
}
/* header */
.headerWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 440px;
  margin: 0 auto;
}
.headerLogo {
  padding: 6px 71px 0 20px;
}
.headerLogo-access {
  width: 63%;
  margin-top: 7px;
}
.headerNav-list {
  display: flex;
  align-items: center;
}
.headerNav li a img {
  height: 100%;
}
.headerNav li a:hover {
  height: 100%;
}

/* cta */
.cta {
  padding: calc(30px * var(--times-num)) calc(10px * var(--times-num)) calc(10px * var(--times-num));
  text-align: center;
  background-color: #4c3c2c;
}
.ctaSectionTitle {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-family: "Inter";
  font-weight: 500;
  letter-spacing: 1px;
}
/* 画面幅が402px以下の場合に14pxに変更 */
@media (max-width: 440px) {
  .ctaSectionTitle {
    font-size: 12px;
  }
}
.sectionTitle__emphasis {
  font-family: "Inter";
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 0;
}
.sectionTitle__emphasis::before {
  content: url(../img/cta/cta_left.svg);
  vertical-align: middle;
  padding-right: 5px;
}
.ctaSectionTitle::after {
  content: url(../img/cta/cta_right.svg);
  vertical-align: middle;
  padding-right: 5px;
}

.ctaContainer {
  background-color: white;
  border-radius: calc(4px * var(--times-num));
  margin-top: calc(16px * var(--times-num));
}
.ctaContainer__subtitle-wrap {
  display: flex;
  justify-content: space-between;
  padding-left: calc(22px * var(--times-num));
  padding-right: calc(31px * var(--times-num));
  align-items: center;
}
.ctaContainer__subtitle-img {
  width: 28%;
  margin-right: 8px;
}
.ctaContainer__subtitle-text {
  width: 72%;
}
.ctaContainer__subtitle-price {
  width: 90%;
  margin: 0 auto;
}
.ctaBtnContainer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 7px 12px;
}
.ctaBtn:hover {
  opacity: 0.7;
}
.icon {
  font-size: 24px;
}
.arrow {
  font-size: 9px;
}
/* borrow */
.borrow {
  background-color: #f4f1ea;
  padding-top: calc(80px * var(--times-num));
  text-align: center;
}

.titleLine {
  width: 56%;
  height: 1px;
  background-color: #333;
  margin: 14px auto 0;
  position: relative;
}
.titleLine::after {
  content: "";
  position: absolute;
  top: 100%; /* 線の下に配置 */
  left: 50%;
  transform: translateX(-50%); /* 中央揃え */
  width: 0;
  height: 0;
  border-left: 8px solid transparent; /* 左側の三角形 */
  border-right: 8px solid transparent; /* 右側の三角形 */
  border-top: 8px solid #333;
}

.borrowSectionTitle {
  width: 60%;
  margin: 0 auto;
}

.borrowContainer {
  margin-top: calc(47px * var(--times-num));
  margin-bottom: calc(122px * var(--times-num));
  margin-inline: calc(25px * var(--times-num));
  text-align: left;
  line-height: 1.5;
}
.borrowContainer ul li {
  display: flex;
  align-items: flex-start;
  gap: calc(17px * var(--times-num));
  margin-bottom: calc(23px * var(--times-num));
}
.borrowContainer ul li img {
  width: calc(18px * var(--times-num));
  min-width: calc(24px * var(--times-num));
}
.borrowContainer ul li p {
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
}
.borrowContainer ul li span {
  color: #f19f15;
  font-size: 16px;
  font-weight: 600;
  display: inline;
  position: relative;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #3a556d;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}

.borrowImg {
  position: relative;
}
.borrowImg img {
  position: absolute;
  top: -108px;
  left: 49%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 1;
}
.borrowUnder {
  background-image: url(../img/borrow/borrow_bgimg.webp);
  background-size: cover; /* 画像を親要素のサイズに合わせる */
  background-position: center; /* 中央寄せ */
  background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
  width: 100%; /* 横幅いっぱい */
  max-width: 440px; /* コンテンツの最大幅 */
  margin: 0 auto; /* ページの中央に寄せる */
  text-align: center;
  padding-top: calc(138px * var(--times-num));
  padding-bottom: calc(35px * var(--times-num));
}
.borrowUnder h3 {
  padding-top: calc(17px * var(--times-num));
  font-family: "intel";
  font-weight: 400;
  font-size: calc(13px * var(--times-num));
  line-height: 1.21;
  letter-spacing: 1px;
}
.borrowUnderText {
  background-color: #f4f8f9;
  position: relative;
  width: fit-content;
  margin-inline: auto;
  margin-top: 13px;
  padding: calc(12px * var(--times-num)) calc(24px * var(--times-num));
  line-height: 1.8;
}
.borrowUnderText p {
  color: #333;
  font-weight: 600;
  font-size: calc(20px * var(--times-num));
  display: block;
  position: relative;
  letter-spacing: calc(1.16px * var(--times-num));
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #f3dcb4;
  text-decoration-thickness: calc(6px * var(--times-num));
  text-underline-offset: calc(-2px * var(--times-num));
}
/* habit */
.habit {
  background: url(../img/habit/habit_bg.webp) white;
  position: relative;
}
.habit1 {
  padding-inline: calc(40px * var(--times-num));
  padding-block: calc(20px * var(--times-num)) calc(66px * var(--times-num));
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
  background: #f5f5f5;
}
.habit1 img {
  max-width: 40%;
}

.habitTitle {
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #3a556d;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.habit1Container {
  text-align: center;
  margin-top: calc(28px * var(--times-num));
}
.habit1ContainerTitle {
  font-size: calc(20px * var(--times-num));
  color: #333;
  background: #d7d7d7;
  border-radius: calc(4px * var(--times-num));
  padding: calc(3px * var(--times-num)) calc(13px * var(--times-num));
  margin-inline: auto;
  width: fit-content;
  font-weight: 500;
  letter-spacing: calc(2px * var(--times-num));
}
.habit1ContainerTitle span {
  font-size: 1.4rem;
  letter-spacing: calc(1.739px * var(--times-num));
}
.habit1ContainerText {
  margin-top: calc(14px * var(--times-num));
  font-size: calc(25px * var(--times-num));
  line-height: 1.6;
}
.habit1ContainerText span {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: 1px;
}
/* ---- */
.habit2 {
  margin-top: calc(35px * var(--times-num));
}
.habit2Title {
  width: calc(228px * var(--times-num));
  margin-inline: auto;
}
.habit2ContainerTitle {
  font-size: calc(20px * var(--times-num));
  color: #333;
  background: #d7d7d7;
  border-radius: calc(4px * var(--times-num));
  padding: calc(4px * var(--times-num)) calc(14px * var(--times-num));
  margin-inline: auto;
  width: fit-content;
  font-weight: 500;
  letter-spacing: calc(2px * var(--times-num));
  position: relative;
}
.habit2ContainerTitle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #d7d7d7;
}
.habit2ContainerText {
  font-size: 31px;
  font-weight: 600;
  width: fit-content;
  margin: 10px auto;
}
.habit2ContainerText span {
  display: inline-block;
  position: relative;
}

.habit2ContainerText span::before {
  content: "・";
  position: absolute;
  top: 0;
  left: -28px;
}
.habit2ContainerText span::after {
  content: "・";
  position: absolute;
  top: 0;
  right: -14%;
}

.habit2Text {
  background: url(../img/habit/lifestyle_bk.webp);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  margin-top: calc(24px * var(--times-num));
  padding-inline: calc(20px * var(--times-num));
}
.habit2Text p {
  font-size: calc(18px * var(--times-num));
  line-height: 1.85;
  letter-spacing: 2px;
  margin-top: calc(21px * var(--times-num));
  font-weight: 400;
}
.habit2Text p span {
  font-weight: 600;
  color: #a86b35;
}
/*セクションの間のドット*/
.dots {
  display: flex;
  flex-direction: column; /* 縦方向に配置 */
  align-items: center; /* 中央揃え */
  font-size: 1rem; /* ドットのサイズ調整 */
  color: #333;
  margin: 24px auto 0;
  position: relative;
  top: -5px;
  z-index: 10;
}
.dots span {
  line-height: 1;
}
/*approach*/
.approach {
  background: #fbeee7;
  padding-block: calc(55px * var(--times-num)) calc(53px * var(--times-num));
  position: relative;
  text-align: center;
  margin-top: -36px;
}
.approachSectionTitle {
  font-size: 32px;
  font-weight: 500;
  color: #a86b35;
}
.approachContainer {
  padding-inline: calc(20px * var(--times-num));
  margin-top: calc(20px * var(--times-num));
}
.approachContainer img {
  margin: 24px auto 0;
}
.approachDown {
  width: 44%;
}
.approachUnder {
  margin-top: calc(40px * var(--times-num));
}
.approachUnder-title {
  width: 77%;
  margin: 0 auto;
}
.approachUnder-title-img {
  padding-top: 4px;
  width: 96%;
}
.approachUnder-text {
  margin-top: 23px;
}
.approachUnder-text p {
  font-size: calc(23px * var(--times-num));
  line-height: 1.75;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 3px;
  margin-top: 4px;
}
.approachUnder-text span {
  color: #a86b35;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 4px;
  font-size: calc(28px * var(--times-num));
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #a86b35;
}
.approachUnder-text-good {
  font-size: calc(25px * var(--times-num));
  margin-top: 10px;
}
.approachUnderImg {
  margin-top: 20px;
}
video {
  width: 100%;
  max-width: fit-content;
  display: block;
  margin-inline: auto;
}
@media (max-width: 440px) {
  .approachUnder-text span {
    font-size: 24px;
  }
}

/* improvement */
.improvement {
  padding-block: calc(20px * var(--times-num)) calc(53px * var(--times-num));
  padding-inline: calc(38px * var(--times-num));
}
.improvementTop {
  text-align: center;
  font-size: calc(22px * var(--times-num));
  font-weight: 500;
  line-height: 1.54;
}
@media (max-width: 405px) {
  .improvementTop {
    font-size: 19px;
  }
}
.improvementTop span {
  font-weight: 600;
}
.improvementTop-emphasis {
  color: #a86b35;
  font-size: calc(25px * var(--times-num));
  line-height: 1.6;
  text-decoration: underline solid #a86b35;
}
@media (max-width: 388px) {
  .approachUnder-text-good {
    font-size: 22px;
  }
}

/* ----- */
.improvementUnder {
  margin-top: calc(50px * var(--times-num));
}
.improvementUnder-title {
  color: #a86b35;
  font-size: 6vw;
  line-height: 1.18;
  font-weight: 600;
  padding-left: 8px;
  border-left: 4px solid #a86b35;
  margin-top: calc(24px * var(--times-num));
  letter-spacing: 1px;
}
@media (min-width: 440px) {
  .improvementUnder-title {
    font-size: 26px;
  }
}
.improvementUnder-item img {
  margin-top: calc(11px * var(--times-num));
}
.improvementUnder-text {
  font-size: calc(18px * var(--times-num));
  font-weight: 500;
  line-height: 1.66;
  margin-top: calc(18px * var(--times-num));
}
.dottedUnderline {
  border-bottom: 2px dotted #333; /* 2pxの点線、色は黒 */
  padding-bottom: 2px;
  letter-spacing: 1px;
}
.improvementUnder-title-under {
  margin-top: 24px;
  letter-spacing: 1px;
}

/* effect */
.effect {
  background: #fbeee7;
  padding-block: calc(56px * var(--times-num)) calc(71px * var(--times-num));
  padding-inline: calc(16px * var(--times-num));
}
.effect h2 {
  font-size: calc(19px * var(--times-num));
  line-height: 2;
  text-align: center;
  color: #333;
  font-weight: 400;
}
.effect-title {
  width: 53%;
  margin: 5px auto;
}
.effectContainer {
  margin-top: calc(53px * var(--times-num));
  background: white;
  border-radius: calc(9px * var(--times-num));
  padding-block: calc(36px * var(--times-num)) calc(10px * var(--times-num));
  padding-inline: calc(16px * var(--times-num));
  position: relative;
  box-shadow: 3.823px 3.823px 3.823px 0px rgba(126, 190, 206, 0.1);
}
.effectContainerTip {
  position: absolute;
  top: -19px;
  left: 51%;
  translate: -50% 0;
  font-size: calc(19px * var(--times-num));
  background: #fff;
  border-radius: 999px;
  padding: calc(2px * var(--times-num)) calc(20px * var(--times-num));
  border: #f8eeef 1px solid;
  font-weight: 600;
  letter-spacing: 2px;
}
.effectContainer-list {
  display: flex;
  align-items: flex-start;
  gap: calc(12px * var(--times-num));
  margin-bottom: calc(27px * var(--times-num));
  font-size: calc(18px * var(--times-num));
}
.effectContainer-mark {
  width: calc(15px * var(--times-num));
  min-width: calc(21px * var(--times-num));
  margin-top: calc(7px * var(--times-num));
  margin-left: calc(7px * var(--times-num));
}
.effectContainer ul li span {
  font-weight: 600;
  position: relative;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #3a556d;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}
.effectContainer-item :nth-child(3) {
  margin-top: 37px;
  margin-bottom: 16px;
}
.effectContainer-item :nth-child(4) {
  margin-bottom: 23px;
}
.effectContainer-item :nth-child(5) {
  margin-bottom: 17px;
}
.ctaSymptoms {
  height: 16px;
  background-color: #4c3c2c;
}
/*symptoms*/
.symptomsInner {
  margin-top: 37px;
  padding-inline: calc(13px * var(--times-num));
}
.symptomsTitle img {
  width: 41%;
  margin: 0 auto;
}

.symptomsContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.symptomsContainer-wrap {
  padding-bottom: 16px;
  background-color: #f4f1ea;
  box-shadow: 1.89px 2.53px 6.95px 0px rgba(0, 0, 0, 0.2);
}
.symptomsContainer-title {
  font-size: calc(19px * var(--times-num));
  font-weight: 700;
  line-height: 2.12;
  color: #fff;
  background-color: #a86b35;
  text-align: center;
}
.symptomsContainer img {
  width: 50%;
  margin: 0 auto;
}
.symptomsContainer-list {
  font-size: calc(17px * var(--times-num));
  font-weight: 400;
  line-height: 0.8;
  margin-left: 50px;
  margin-top: 12px;
  list-style-type: disc;
}
/* feature */
.feature {
  position: relative;
  padding-block: calc(64px * var(--times-num)) calc(48px * var(--times-num));
  padding-inline: calc(20px * var(--times-num));
}
.feature .sectionTitle img {
  width: 85%;
  margin: 15px auto 5px;
}
.sectionTitle {
  display: flex;
  margin-inline: auto;
}
.featureContainer {
  padding-inline: calc(10px * var(--times-num));
}
.featureList {
  margin-top: calc(40px * var(--times-num));
}
.featureList:first-of-type {
  margin-top: calc(32px * var(--times-num));
}
.featureTitle {
  display: flex;
  align-items: center;
}
.featureTitle img {
  width: calc(60px * var(--times-num));
  min-width: calc(70px * var(--times-num));
  margin-right: calc(16px * var(--times-num));
}
.featureTitle p {
  font-size: calc(24px * var(--times-num));
  font-weight: 600;
  line-height: 1.35;
  color: #a86b35;
}
@media (max-width: 396px) {
  .featureTitle p {
    font-size: 19px;
  }
}

.featureImg {
  margin-top: calc(20px * var(--times-num));
}
.featureText {
  margin-top: calc(16px * var(--times-num));
  margin-inline: 10px;
  font-size: calc(16px * var(--times-num));
  font-weight: 400;
  line-height: 1.6;
}
.featureText span {
  font-weight: 600;
  color: #a86b35;
  position: relative;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #3a556d;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}

.featureText small {
  display: inline-block;
  margin-top: calc(16px * var(--times-num));
}
.ctaArrow {
  position: absolute;
  top: 99%;
  left: 50%;
  display: flex;
  width: 1px;
  height: 68px;
  border-radius: 9999px;
  background-color: #333333;
  margin: 0 auto;
  z-index: 12;
}

.ctaArrow::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 18px;
  border-radius: 9999px;
  background-color: #333333;
  transform: rotate(45deg);
  transform-origin: 50% calc(100% - 0.5px);
}

/* cta_intro */
.ctaIntro {
  background: #fbeee7;
  text-align: center;
  padding-block: calc(66px * var(--times-num)) calc(75px * var(--times-num));
  margin-bottom: calc(16px * var(--times-num));
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  font-size: calc(24px * var(--times-num));
}
.ctaIntroTop span {
  font-size: calc(26px * var(--times-num));
  color: #a86b35;
  font-weight: 600;
  line-height: 1.5;
  display: inline-block;
  margin-top: calc(12px * var(--times-num));
}
.higlight-wrap {
  margin-block: calc(20px * var(--times-num)) calc(8px * var(--times-num));
  margin-left: 20px;
}
.highlight {
  font-weight: bold; /* 強調 */
}

.ctaDotted::after {
  content: "•"; /* 点を追加 */
  color: #333; /* 点の色 */
}

.highlight {
  display: inline-block;
  position: relative;
}

.ctaDotted {
  font-size: 1.2em; /* 初期サイズ */
}

.ctaDotted::after {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6em;
}
.ctaIntroBottom {
  margin-top: calc(7px * var(--times-num));
  font-size: calc(25px * var(--times-num));
  line-height: 1.4;
}
.ctaIntroBottom span {
  font-size: 1.3em;
  font-weight: 600;
  color: #a86b35;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #fcea71;
  text-decoration-thickness: calc(10px * var(--times-num));
  text-underline-offset: calc(-4px * var(--times-num));
  text-decoration-skip-ink: none;
}
.ctaFlow {
  margin: 30px;
  background-color: #fff;
}
/* flow */
.flow {
  background: #e4ddcd;
  padding-bottom: calc(54px * var(--times-num));
  position: relative;
}
.flow h2 {
  background: #4c3c2c;
  padding-block: calc(20px * var(--times-num));
  position: relative;
}
.flow h2 img {
  width: 47%;
  margin: 0 auto;
}
.flowTitleUnderPol {
  position: absolute;
  bottom: calc(-7px * var(--times-num));
  left: 50%;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-left: calc(14px * var(--times-num)) solid transparent;
  border-right: calc(14px * var(--times-num)) solid transparent;
  border-top: calc(8px * var(--times-num)) solid #4c3c2c;
}
.flowContainerWrap {
  padding-inline: calc(20px * var(--times-num));
  border-radius: calc(4px * var(--times-num));
}
.flowContainer {
  margin-top: calc(38px * var(--times-num));
  background: white;
  box-shadow: 0px 3.823px 3.823px 0px rgba(0, 0, 0, 0.05);
  padding-bottom: calc(16px * var(--times-num));
}
.flowList {
  padding: calc(32px * var(--times-num)) calc(24px * var(--times-num)) calc(19px * var(--times-num));
}
.stepContainer {
  text-align: center; /* 中央揃え */
  font-family: "Montserrat", sans-serif;
  color: #4c3c2c;
}

.stepLabel {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px; /* 文字間隔を広げる */
}

.stepNumber {
  display: block;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.24;
  margin-top: -6px;
}

.stepLine {
  margin: 5px auto 0;
  width: 50px; /* 線の長さ */
  height: 1px; /* 線の太さ */
  background-color: #4c3c2c;
  border: none; /* デフォルトのボーダーを消す */
}

.flowTitle {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--times-num));
  margin-top: 20px;
}
.flowTitle h3 {
  font-size: calc(25px * var(--times-num));
  font-weight: 600;
}
@media (max-width: 423px) {
  .flowTitle {
    flex-direction: column; /* 縦並びにする */
    text-align: center; /* 中央寄せ */
    gap: 0;
  }

  .flowTitle h3 {
    margin-top: 20px; /* サブタイトルとの間隔調整 */
  }
}
.flowTitle img {
  width: calc(140px * var(--times-num));
}
.flowListUnder {
  margin-top: calc(15px * var(--times-num));
}
.flowCtaBtnContainer {
  margin-top: calc(24px * var(--times-num));
  padding-top: calc(33px * var(--times-num));
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--times-num));
  background: #f4ece3;
  position: relative;
  box-shadow: calc(3.87px * var(--times-num)) calc(3.87px * var(--times-num))
    calc(3.87px * var(--times-num)) rgba(0, 0, 0, 0.07);
}
.flowCtaBtn {
  border-radius: 4px;
  margin-inline: auto;
  display: block;
}
.flowCtaBtnPol {
  position: absolute;
  top: calc(-8px * var(--times-num));
  left: 50%;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-left: calc(14px * var(--times-num)) solid transparent;
  border-right: calc(14px * var(--times-num)) solid transparent;
  border-bottom: calc(8px * var(--times-num)) solid #f4ece3;
}
.flowListUnderPol {
  width: 0;
  height: 0;
  border-left: calc(48px * var(--times-num)) solid transparent;
  border-right: calc(48px * var(--times-num)) solid transparent;
  border-top: calc(35px * var(--times-num)) solid #4c3c2c;
  margin: auto;
}
/* voice */
.voice {
  background: #fefcf6;
  padding-block: calc(25px * var(--times-num)) calc(58px * var(--times-num));
}
.voiceTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}
.voice-img {
  width: 47%;
}

.voiceTitle-line {
  height: 1px; /* 線の太さ */
  width: 26px;
  background-color: #333; /* 線の色 */
  margin: 0 5px;
}
.voiceContainer {
  padding-inline: calc(20px * var(--times-num));
}
.voiceContainerFuk {
  width: 60%;
  margin-inline: auto;
  text-align: center;
  font-size: calc(22px * var(--times-num));
  margin-top: calc(32px * var(--times-num));
  font-weight: 400;
}
.voiceContainer span {
  display: block;
  text-align: center;
  font-size: calc(27px * var(--times-num));
  margin-top: calc(5px * var(--times-num));
  font-weight: 600;
  letter-spacing: calc(1.147px * var(--times-num));
}
.voiceContainerWorks {
  width: 92%;
  margin-inline: auto;
  margin-top: calc(10px * var(--times-num));
}
/* ----- */
.voiceContainerList {
  margin-top: calc(26px * var(--times-num));
  padding-inline: 9px;
}
.voiceContainerList li {
  padding-block: calc(13px * var(--times-num)) calc(22px * var(--times-num));
  margin-bottom: 30px;
  background: #f4ece3;
  position: relative;
  border-radius: calc(4.779px * var(--times-num));
  overflow: hidden;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1);
}
.voiceContainerListImg {
  width: 73%;
  margin-block: 28px 5px;
  margin-inline: auto;
}
.voiceContainerListFuk {
  width: 86%;
  margin-inline: auto;
  margin-top: calc(8px * var(--times-num));
}
.voiceContainerListTip {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(13px * var(--times-num));
  background: #e4ddcd;
  padding: calc(2px * var(--times-num)) calc(10px * var(--times-num));
  font-weight: 600;
  color: #333;
}
.voiceCaution {
  text-align: center;
  color: #333333;
  font-size: calc(12px * var(--times-num));
  margin-top: 0.6rem;
}
/* ----- */
.voiceGoogle {
  margin-top: calc(76px * var(--times-num));
}
.voiceGoogleTitle {
  font-family: "Inter";
  font-weight: 400;
  font-size: calc(27px * var(--times-num));
  text-align: center;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #333;
  text-decoration-thickness: calc(1px * var(--times-num));
  text-underline-offset: calc(10px * var(--times-num));
  text-decoration-skip-ink: none;
}
.voiceGoogleList li {
  margin-top: calc(24px * var(--times-num));
}
.voiceGoogleList img {
  width: 97%;
}

/* faq */
.faq {
  padding-block: calc(66.91px * var(--times-num)) calc(44.92px * var(--times-num));
}
.faq h2 {
  text-align: center;
  font-weight: 500;
  font-size: calc(24px * var(--times-num));
}
.faq h2 img {
  width: 27%;
  min-width: calc(82px * var(--times-num));
  margin-inline: auto;
  margin-bottom: calc(9px * var(--times-num));
}
.faqContainer {
  margin-top: calc(17px * var(--times-num));
  padding-inline: calc(20px * var(--times-num));
}
.faqContainerList {
  background: #faf6f2;
  margin-top: calc(12px * var(--times-num));
  list-style: none;
}

details summary {
  position: relative;
  cursor: pointer;
}
summary {
  display: block;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
details summary:hover {
  opacity: 0.7;
}
details summary:hover {
  opacity: 0.7;
}
details summary::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  margin-right: 20px;
  width: calc(24px * var(--times-num));
  height: calc(24px * var(--times-num));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/faq/faq_toggle.webp) #b29244 no-repeat center center;
  background-size: calc(16px * var(--times-num));
  background-position-x: 55%;
  background-position-y: center;
  border-radius: 999px;
}
details[open] summary::before {
  rotate: 45deg;
}
.faqContainerListTitle {
  padding: calc(16px * var(--times-num)) calc(16px * var(--times-num));
  padding-right: calc(40px * var(--times-num));
  display: flex;
  align-items: flex-start;
  gap: calc(10px * var(--times-num));
  border-bottom: #333 1px dashed;
  line-height: 1.4;
}
.faqContainerListTitle p {
  font-family: "Montserrat", serif;
  font-size: 17px;
}
.faqContainerListText {
  padding: calc(16px * var(--times-num));
  padding-bottom: calc(24px * var(--times-num));
}
.faqContainerListText small {
  font-size: calc(11.5px * var(--times-num));
  line-height: 1.4;
  display: inline-block;
}
/*access*/
.access {
  background: #fefcf6;
  padding-inline: calc(20px * var(--times-num));
  padding-top: 66px;
  padding-bottom: 60px;
}

.accessTitle {
  font-size: calc(46px * var(--times-num));
  font-weight: 600;
  text-align: center;
  color: #2b2f36;
  line-height: 1.4;
}
.accessTitle-sub {
  text-align: center;
  font-size: calc(18px * var(--times-num));
  font-weight: 500;
  margin-bottom: 17px;
}

.addressItem {
  display: flex;
  padding-bottom: 8px;
  border-bottom: 1px solid;
  margin-top: 17px;
  margin-bottom: 10px;
  gap: 12px;
}
.addressContainer {
  margin-top: 50px;
}
.addressContainer-title {
  font-size: calc(23px * var(--times-num));
  font-weight: 600;
  color: #4c3c2c;
}
.label {
  font-size: calc(16px * var(--times-num));
  font-weight: 400;
  margin-bottom: 5px;
  width: 60px;
  white-space: nowrap;
}
.accessItem {
  display: flex;
  gap: 12px;
}
.actual-address,
.actual-access {
  font-size: calc(18px * var(--times-num));
  font-weight: 400;
  margin-left: 10px;
  line-height: 1.5;
  flex-grow: 1;
}
.access_wrap {
  margin-top: 54px;
}

.access_container {
  margin-bottom: 39px;
}
.access_container:last-child {
  margin-bottom: 0;
}

.access_step_title {
  margin-bottom: 17px;
}

.access_step_num,
.access_step_txt {
  display: block;
}

.access_step_num {
  display: inline-block;
  background-color: #4c3c2c;
  color: #fff;
  padding-inline: 14px;
  font-size: calc(21px * var(--times-num));
  font-weight: 500;
  border-radius: 3px;
  margin-bottom: 16px;
}

.access_step_txt {
  width: calc(100% - 6px);
  font-size: calc(22px * var(--times-num));
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: 0.05em;
  color: #4c3c2c;
}

.access_img:nth-child(3) {
  margin-top: 16px;
}

.access_step_detail {
  font-size: 20px;
  margin-top: 28px;
  margin-bottom: 20px;
}

/* iframeスタイル */
.iframe_container {
  position: relative;
  width: 100%; /* 親要素の幅に合わせる */
  max-width: 800px; /* 最大幅を指定 */
  margin: 0 auto; /* 中央揃え */
  aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
  overflow: hidden; /* はみ出しを隠す */
}
.iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* ボーダーを消す */
}

/* message */

.messageContainer {
  padding-inline: calc(20px * var(--times-num));
  font-size: calc(14px * var(--times-num));
  margin-top: calc(28px * var(--times-num));
  line-height: normal;
}

/*message*/
/* message */
.message {
  padding-block: calc(40px * var(--times-num)) calc(30px * var(--times-num));
  background: #fefcf6;
  position: relative;
  font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}
.message h2 {
  text-align: center;
  font-size: calc(28px * var(--times-num));
  font-weight: 500;
  padding: calc(10px * var(--times-num)) calc(18px * var(--times-num));
  border: #333 1px solid;
  border-radius: calc(5px * var(--times-num));
  width: fit-content;
  margin-inline: auto;
}
.message-img {
  margin-top: 28px;
  position: relative;
}
.message-img img {
  width: 87%;
  margin: 0 auto;
}
.name-wrap {
  position: absolute;
  top: 17%;
  left: 10%;
  background-color: #fff;
  padding: 8px 10px;
}

.position {
  font-size: 20px;
}
.name {
  font-size: 30px;
  line-height: 1;
}

.messageContainer {
  padding-inline: calc(25px * var(--times-num));
  font-size: calc(16px * var(--times-num));
  margin-top: calc(28px * var(--times-num));
  line-height: normal;
}

/* footer */
.kairoFooter {
  position: sticky;
  bottom: 0;
  right: 0;
  margin-inline: auto;
  background: #fefcf6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  transition: opacity 0.5s ease-in-out;
}

.kairoFooter.isActive {
  opacity: 1;
}

.footerInner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footerTextContainer {
  color: #4c3c2c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  width: 100%;
  gap: calc(18px * var(--times-num));
}
.kairoFooter .footerBtnContainer {
  display: flex;
  align-items: flex-start;
}
.kairoFooter .footerBtn {
  object-fit: cover;
  margin: 0;
}

/* copyright */
.copyright {
  text-align: center;
  padding: calc(73px * var(--times-num));
  font-size: calc(12px * var(--times-num));
  letter-spacing: calc(0.774px * var(--times-num));
}


.note_small{
  width: 86%;
  margin: 8px auto 0;
  font-size: 12px;
}