@charset "utf-8";

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap');

@font-face {
    font-family: "DIN-Regular";
    src: url('../img/heatx/fonts/DIN-Regular.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: "DIN Condensed Bold";
    src: url('../img/heatx/fonts/DIN Condensed Bold.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
	font-family: 'GothickMB101';
	src: url('../img/heatx/fonts/A-OTF-GothicMB101Pro-Reg.woff2') format('woff2');
}
@font-face {
    font-family: "RodinProB";
    src: url('../img/heatx/fonts/FOT-RodinPro-B.woff2') format('woff2');
}
@font-face {
    font-family: "RodinProDB";
    src: url('../img/heatx/fonts/FOT-RodinPro-DB.woff2') format('woff2');
}
@font-face {
    font-family: "RodinProEB";
    src: url('../img/heatx/fonts/FOT-RodinPro-EB.woff2') format('woff2');
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*cssのリセット*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    /*    margin: 0;
    padding: 0;*/
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}

html {
    margin-top: 0 !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul,
ol {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    /*    padding: 0;*/
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    transition: all .3s;
}

a:hover {
    opacity: .7;
}

ins {
    text-decoration: none;
    color: #000;
    background-color: #ff9;
}

mark {
    font-weight: bold;
    font-style: italic;
    color: #000;
    background-color: #ff9;
}


abbr[title],
dfn[title] {
    cursor: help;
    border-bottom: 1px dotted;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

hr {
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #ccc;
}

input[type="submit"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="button"],
input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

button {
    outline: none;
    padding: 0;
    appearance: none;
    background-color: transparent;
    border: none;

}

html {
    font-size: 62.5%;
}

body {
    font-family: "NotoSansCJKjp", sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    color: #ffffff;
    line-height: 1.5;
}

body .firstVisit {
  color: #000000;
}

img {
    width: 100%;
    image-rendering: -webkit-optimize-contrast;
    vertical-align: bottom;
}

.inner {
    width: 90%;
    max-width: 1170px;
    margin: 0 auto;
}
@media screen and (max-width:1000px) {
    .inner {
        width: 100%;
    }
}

article {
    overflow: hidden;
}

/*-----------------------
         header
-------------------------*/

header {
    background-image: linear-gradient(90deg, rgb(0, 0, 0) 23%, rgba(113, 113, 113, 1) 53%, rgb(0, 0, 0) 82%);
}
header .inner {
    width: 100%;
}
header,
header .subl.top {
    background-color: var(--gre1);
    color: var(--ylw2);
}

header:before {
    content: '';
    inset: 0;
    position: absolute;
    display: block;
    background-image: linear-gradient(to right, #00000071 0%, #00000000 30%, #00000000 40%, #00000000 60%, #00000071);
}

header .td.logo {
    color: #fff;
}

header :where(.td.mainMenu) a {
    --arc: var(--ylw2);
}

header .logo svg * {
    fill: #ffffff;
}

header .cart svg * {
    fill: #ffffff;
}

header .td.tp,
header input+.swh li {
    background-color: var(--ylw1);
}

header .td.cart .cart {
    background-color: #71717188;
}

.floatTOP>div {
    background-color: var(--gre1);
    background-image: radial-gradient(circle at 50% 24%, #00000000, #00000088);
    text-shadow: 0 .4em .6em #00000033;
    color: #ffffff;
}

.caution {
    width: 80%;
    margin: 0 auto 2.5em;
    color: #031746
}

@media screen and (min-width:840px) {
    :root {
        --half: linear-gradient(to right, #00000071, #00000000, #00000071);
    }

    header:before {
        background-image: linear-gradient(to right, #00000071, #00000000, #00000071);
    }

    header .subl.top {
        background-color: transparent;
    }

    header .subl.top .xi>label>.subl:before {
        background-color: var(--gre1);
        opacity: .96;
    }
}

:root {
  --vw-base: 1vw;
}

@media (max-width: 1000px) {
  :root {
    --vw-base: 1.111111vw;
  }
}

header :where(.subl > .xi > label)>a[act] {
    color: #ffffff;
    --arc: #ffffff;
}

body {
    --ylw1: #717171;
    --ylw2: #ffffff;
    --gre1: #2b2b2b;;
    --gre2: #168673;
}

.caches {
    overflow: hidden;
    height: 0;
}

.flx0 .inner,
.flx0 .outer,
.flx .inner,
.flx .outer,
.flx1 .inner {
    padding: 8vw calc(8vw - env(safe-area-inset-right)) 8vw calc(8vw - env(safe-area-inset-left));
}

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

    .flx0 .inner,
    .flx0 .outer,
    .flx .inner,
    .flx .outer,
    .flx1 .inner {
        padding: 48px calc(48px - env(safe-area-inset-right)) 48px calc(48px - env(safe-area-inset-left));
    }
}

.PurcFloat {
	display: flex;
    justify-content: flex-end;
}

.PurcFloat,
.PurcFloat:hover,
.PurcFloat:visited,
.PurcFloat:focus,
.PurcFloat:active {
    /* 底からの距離を調整（数値を大きくすると上に移動） */
    top: calc(100vh - 100px) !important;
    --ry: 30vw;
    pointer-events: none;
    outline: none;
}

.PurcFloat .statPic {
/*    inset: auto 0 0;*/
}

:where(.PurcFloat, .PurcFloat:hover, .PurcFloat:visited) {
	max-width: 100%;
}

.PurcFloat>* {
    position: relative;
}

.PurcFloat>div>div {
    background-color: var(--gre1);
}

.PurcFloat .statPic {
    pointer-events: auto;
/*    inset: 0;*/
/*    margin: auto;*/
    width: fit-content;
    max-width: 70%;
	top: unset !important;
}

.PurcFloat .statPic .slg {
    display: none;
}

.PurcFloat .statPic .pic {
    max-width: 100%;
}

@media screen and (min-width: 1470px) {
	.PurcFloat .statPic {
		right: unset !important;
	}
}

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

    .PurcFloat,
    .PurcFloat:hover,
    .PurcFloat:visited {
        --ry: 250px;
    }

    .PurcFloat .statPic {
        max-width: 40%;
    }
}

@keyframes bfloatIZ {
    0% {
        transform: translateY(-6em);
    }

    100% {
        transform: translateY(-7em);
    }
}

.section_ttl h2{
    font-weight: 400;
    text-align: center;
    font-size: clamp(24px, 3.646vw, 70px);
}
@media screen and (max-width: 768px) {

    .pc_br{
        display: none;
    }
}

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

    .sp_br{
        display: none;
    }
}

a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

a {
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* 共通パーツ */

.text-white {
	color: white;
}

.bg-black {
	background: black;
}

.cta__btn {
  position: absolute;
  padding: 0 50px;
  max-width: 1170px;
  top: 21.5%;
}

.cta {
  margin-top: 54px;
  position: relative;
}

.cta__btn-02 {
  position: absolute;
  padding: 0 25px;
  max-width: 1100px;
  top: 77%;
  left: 50%;
  transform: translateX(-50%);
}

/* footer */
.footer {
  display: flex;
  justify-content: flex-end;
  width: 750px;
}
@media screen and (max-width: 1024px) {
  .footer {
    display: block;
  }
}

.PurcFloat .statPic {
  position: fixed;
  bottom: 20px; /* 底からの距離（数値を大きくすると上に移動） */
  width: 150px;
  animation: floating-y 500ms ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 1024px) {
  .PurcFloat .statPic {
    right: 10%;
  }
}
@media screen and (max-width: 768px) {
  .PurcFloat .statPic {
    width: 100px;
    bottom: 20px;
    right: 0;
  }
}

@-webkit-keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

.hero {
  width: 100%;
  min-height: 100svh;
  background: url(bg.png) center / cover no-repeat;
  background-image: url(bg.png);
  background-position: center top;
  display: grid;
  place-items: center;
  padding: 18svh 0 10svh 0;
  background-color: #ffffff;
}
@media screen and (max-width: 768px) {
  .hero {
    padding: 3.5svh 0 7svh 0;
  }
}

section.hero .hero-content {
  width: 100%;
  text-align: center;

  .catch {
    font-family: "RodinProEB", sans-serif;
    font-size: clamp(42px, calc(var(--vw-base) * 12), 166px);
    line-height: 1.04;
    letter-spacing: -0.056em;
    font-weight: 900;
    white-space: nowrap;
  }
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    font-family: "RodinProB", sans-serif;
  }

  /* @media screen and (max-width:1000px) {
    .catch {
        font-size: clamp(42px, 13.3vw, 166px);
        }
    } */


  .device {
    width: clamp(230px, calc(var(--vw-base) * 41), 479px);
    /* max-width: 260px; */
    height: auto;
    margin: 0 auto;
    margin-top: 3rem;
  }
  @media screen and (max-width: 768px) {
  .device {
    margin-top: 1.5rem;
  }
}

  .title-wrapper {
    display: inline-block;
    width: clamp(280px, calc(var(--vw-base) * 61.3), 718px);
    text-align: center;
    
    .sub {
      display: block;
      font-family: "RodinProB", sans-serif;
      font-size: clamp(18px, calc(var(--vw-base) * 5.4), 63.5px);
      white-space: nowrap;
    }

    .title-img {
      width: 100%;
      height: auto;
      display: block;
      margin-top: 0.2rem;
      /* padding: 0 0.3rem; */
    }

    .label {
      width: 100%;
      font-family: "RodinProDB", sans-serif;
      font-size: clamp(12px, calc(var(--vw-base) * 3.7), 43px);
      background-color: #ea5520;
      margin: 3.0rem 0;
      display: inline-block;
    }
  }

  .price1 {
    font-family: "RodinProB", sans-serif;
    font-size: clamp(20.5px, calc(var(--vw-base) * 6.18), 72.3px);
    font-weight: 600;
    margin-top: 1.0rem;
  }

  .price2 {
    font-family: "RodinProB", sans-serif;
    font-size: clamp(35px, calc(var(--vw-base) * 10.4), 122px);
    font-weight: 600;
    line-height: 1.1;
  }
}

section.what-is-heatx {
  padding: 3em 0;
  background-color: #a0a0a1;
  font-family: "Noto Sans JP", sans-serif;
  @media screen and (max-width: 768px) {
    padding: 2em 0;
  }

  .what1 > div, .what1 > p, .what2 > div, .what2 > p, what2 > .img {
      width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
      margin: 0 auto;
  }
  @media screen and (max-width: 768px) {
    .what1 > div, .what1 > p, .what2 > div, .what2 > p {
      width: 90%;
    }
  }

  .what1 {
    position: relative;
    margin-bottom: 12em;

    & > div.highlight {
      width: 100%;
      background-color: #eb6a34;
      padding: 1.0em 0;
      @media screen and (max-width: 768px) {
        padding: 0.6em 0;
      }
      p {
        width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
        @media screen and (max-width: 768px) {
          width: 90%;
        }
        margin: 0 auto;
        font-family: "RodinProB", sans-serif;
        font-size: 3.5cqw;
        @media screen and (max-width: 768px) {
          font-size: 4.8cqw;
        }
        font-feature-settings: "palt" 1;
        position: relative;
        z-index: 1;
      }
    }

    p.lead {
      font-family: "RodinProDB", sans-serif;
      font-size: clamp(16px, calc(var(--vw-base) * 5.4 * 0.9), 63px);
      margin-bottom: 0.2em;
    }

    p.desc1 {
      font-family: "RodinProDB", sans-serif;
      font-size: 2.2cqw;
      letter-spacing: 0.03em;
      margin-top: 2em;
      font-feature-settings: "palt" 1;
      line-height: 1.78;
      margin-bottom: 0.6em;
      position: relative;
      z-index: 1;
    }
    @media screen and (max-width: 768px) {
      p.desc1 {
        margin-top: 1.4em;
        font-size: 3.3cqw;
        white-space: nowrap;
      }
    }

    p.recommend {
      font-family: "RodinProB", sans-serif;
      font-size: clamp(14px, calc(var(--vw-base) * 3.47 * 0.9), 40.6px);
      letter-spacing: 0.03em;
      margin-top: 0.8em;
      position: relative;
      z-index: 1;
    }

    img {
      position: absolute;
      right: 3cqw;
      top: 7cqw;
      width: clamp(150px, calc(var(--vw-base) * 37 * 0.9), 433px);
      z-index: 0;
    }
  }

  @media screen and (max-width: 768px) {
    .what1 {
      margin-bottom: 6em;
    }
  }

  .what2 {
    @media screen and (max-width: 768px) {
      margin-top: -8cqw;
    }
    p.desc2 {
      font-family: "RodinProB", sans-serif;
      font-size: clamp(14px, calc(var(--vw-base) * 4.23 * 0.9), 49.56px);
      line-height: 1.462;
      margin-top: 1.5em;
    }
    @media screen and (max-width: 768px) {
      p.desc2 {
        margin-top: 1.2em;
      }
    }
    p.note {
      font-family: "RodinProDB", sans-serif;
      font-size: clamp(12px, calc(var(--vw-base) * 2.91 * 0.9), 34.1px);
      margin-top: 0.3em;
    }
    .img {
      margin-top: 2em;
      img {
        width: 100%;
      }
    }
  }

  div.balloon {
    position: relative;
    /* display: inline-block; */
    margin-bottom: 1em;
    padding: 0.5em;
    background-color: #e95520;
    /* font-size: calc(var(--vw-base) * 1.1 * 0.9); */
    line-height: 1.5;
    border: 0.2em solid #ffffff;
    white-space: nowrap;
    z-index: 1;
    container-type: inline-size;
    font-size: 1cqw;

    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 32.6%;
      border-style: solid;
      border-width: 4.1em 0 0 2.9em;
      border-color: #ffffff transparent transparent;
      translate: calc(-50% + 0.1px) 100%;
      z-index: 2;
    }
    @media screen and (max-width: 768px) {
      &:before {
        border-width: 4.1em 0 0 3.1em;
      }
    }


    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 32.6%;
      border-style: solid;
      border-width: 3.5em 0 0 2.5em;
      border-color: #e95520 transparent transparent;
      translate: calc(-50% + 0.4px) 100%;
      z-index: 3;
    }

    h2 {
      font-family: "RodinProB", sans-serif;
      font-size: 7.5cqw;
      font-feature-settings: "palt" 1;
      position: relative;
      z-index: 1;
    }
  }
}

section.heatx-features {
  position: relative;
  /* background-image: url(features-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  padding: 3em 0;
  container-type: inline-size;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    @media screen and (max-width: 768px) {
      width: 90%;
    }
    margin: 0 auto;
    position: relative;
    z-index: 2;
  
    .main-title {
      display: flex;
      font-size: clamp(24px, calc(var(--vw-base) * 6.8 * 0.9), 79.6px);
      margin-bottom: 0.3em;
      span {
        font-family: "RodinProB", sans-serif;
        font-feature-settings: "palt" 1;
        font-size: clamp(24px, calc(var(--vw-base) * 6.8 * 0.9), 79.6px);
        line-height: 0.9;
        white-space: nowrap;
        letter-spacing: -0.1em;
        @media screen and (max-width: 768px) {
          font-size: 7.5cqw;
        }
      }
      img {
        width: 27cqw;
        @media screen and (max-width: 768px) {
          width: 31cqw
        }
      }
    }
    .feature-lead {
      display: flex;
      align-items: center;
      gap: 1em;
      .feature-point {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2.5px solid #ffffff;
        border-radius: 50%;
        width: clamp(30px, calc(var(--vw-base) * 14.4 * 0.9), 168.9px);
        height: clamp(30px, calc(var(--vw-base) * 14.4 * 0.9), 168.9px);
        .feature-point-label {
          font-family: "RodinProB", sans-serif;
          font-size: clamp(10px, calc(var(--vw-base) * 2.7 * 0.9), 31.68px);
          margin-top: 0.1em;
        }
        .feature-point-number {
          font-family: "RodinProB", sans-serif;
          font-size: clamp(24px, calc(var(--vw-base) * 7.0 * 0.9), 82px);
          line-height: 0.8;
          @media screen and (max-width: 768px) {
            font-size: clamp(24px, calc(var(--vw-base) * 6.8 * 0.9), 82px);
          }
        }
      }
      .feature-heading {
        font-size: clamp(16px, calc(var(--vw-base) * 6.3 * 0.9), 74.75px);
        font-family: "RodinProB", sans-serif;
      }
      @media screen and (max-width: 768px) {
        .feature-heading {
          font-size: 6.5cqw;
        }
      }
    }
  }

  .point-block {
    &:not(:last-child) {
      margin-bottom: 3em;
    }
    &.point1 {
      .flex-content {
        display: flex;
        margin-top: 1.5em;
        @media screen and (max-width: 768px) {
          margin-top: 1em;
        }
        .text-side {
          width: 50%;
          container-type: inline-size;
          .mode-box {
            container-type: inline-size;
            border: 1.5px solid #ffffff;
            padding: 0.2em 0 0.7em 1.3em;
            @media screen and (max-width: 768px) {
              padding-left: 0.8em;
              padding-bottom: 0.4em;
            }
            background-color: #e95520;
            border-radius: 4.4cqw;
            margin-bottom: 0.6em;
            @media screen and (max-width: 768px) {
              margin-bottom: 0.2em;
            }
            .mode-label {
              font-family: "RodinProEB", sans-serif;
              font-size: 8cqw;
              @media screen and (max-width: 768px) {
                font-size: 9cqw;
              }
              &:before{
                content: '';
                background-repeat: no-repeat;
                background-size: contain;
                width: 8cqw;
                height: 9cqw;
                display: inline-block;
                vertical-align: middle;
              }
              &.standard:before {
                background-image: url('icon_mode_standard.png');
              }
              &.boost:before {
                background-image: url('icon_mode_boost.png');
              }
            }
            .mode-sub {
              font-family: "RodinProDB", sans-serif;
              font-size: 5.24cqw;
              line-height: 0.8;
              padding-left: 8cqw;
              @media screen and (max-width: 768px) {
                font-size: 6cqw;
              }
            }
          }
          .mode-desc {
            font-family: "RodinProDB", sans-serif;
            font-size: 5.5cqw;
            line-height: 1.462;
            letter-spacing: 0.03em;
            margin-bottom: 1em;
            @media screen and (max-width: 768px) {
              font-size: 6.5cqw
            }
          }
          .mode-instruction {
            font-family: "RodinProDB", sans-serif;
            font-size: 5.8cqw;
            white-space: nowrap;
            margin-top: 4em;
          }
          @media screen and (max-width: 768px) {
            .mode-instruction {
              margin-top: 2em;
            }
          }

        }
        .image-side {
          width: 50%;
          .device-img {
            width: 60%;
            margin-left: 21%;
            transform: rotate(35deg) translateY(-15%);
          }
        }
      }
      .caution {
        container-type: inline-size;
        font-family: "RodinProDB", sans-serif;
        font-size: 1.7cqw;
        color: #ffffff;
        width: 100%;
        margin-top: 0;
        padding-left: 1.5em;
        text-indent: -1.5em;
        line-height: 1.3;
        margin: 0;
        &:before {
          content: '※';
        }
        @media screen and (max-width: 768px) {
          font-size: 2.4cqw;
          margin-top: 1.8em;
        }
      }
    }

    &.point2, &.point3 {
      .flex-content {
        display: flex;
        justify-content: space-between;
        margin-top: 1.1em;
        @media screen and (max-width: 768px) {
          margin-top: 1em;
        }
        .text-side {
          width: 52%;
          container-type: inline-size;
          .point-desc {
            font-family: "RodinProDB", sans-serif;
            font-size: 6.5cqw;
          }
        }
        .image-side {
          width: 45%;
          .device-img {
            width: 100%;
          }
        }
      }
    }

    &.point3 {
      container-type: inline-size;
      .saving-container {
        margin-top: 4.5cqw;
        border: solid 2px #ffffff;
        .calculation-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.5em;
          .label {
            width: 24.3%;
            container-type: inline-size;
            border-right: solid 2px #ffffff;
            align-self: stretch;
            display: flex;
            align-items: center;
            span {
              font-family: "RodinProDB", sans-serif;
              font-size: 13cqw;
            }
          }
          .calculation {
            width: 75.7%;
            container-type: inline-size;
            align-self: stretch;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-family: "RodinProDB", sans-serif;
              font-size: 5cqw;
            }
          }
        }
        .saving-box {
          border-top: solid 2px #ffffff;
          background-color: #e95520;
          display: block;
          width: 100%;
          text-align: center;
          container-type: inline-size;
          span {
            font-family: "RodinProB", sans-serif;
            font-size: 8cqw;
          }
        }
      }
    }
    &.point4 {
      .feature-lead .feature-heading {
        letter-spacing: -0.05em;
        line-height: 1.1;
      }
      .point-desc1, .point-desc2 {
        font-family: "RodinProDB", sans-serif;
        font-size: clamp(14px, calc(var(--vw-base) * 3.1 * 0.9), 36.56px);
        display: block;
        text-align: center;
      }
      .point-desc1 {
        margin: 0.6em 0;
      }
      .point-desc2 {
        letter-spacing: -0.05em;
        white-space: nowrap;
        line-height: 2;
        margin: 0.4em 0 1em 0;
        span {
          color: #e95520;
          border-bottom: 0.1em solid #e95520;
        }
      }
      @media screen and (max-width: 768px) {
        .point-desc1 {
          font-size: 3.5cqw;
          margin: 1em 0;
        }
        .point-desc2 {
          font-size: clamp(11px, calc(var(--vw-base) * 3.1 * 0.9), 36.56px);
          margin: 1em 0 1.6em 0;
        }
      }
      .image img {
        width: 100%;
      }
      .sub-desc {
        .header {
          font-family: "RodinProDB", sans-serif;
          font-size: clamp(12px, calc(var(--vw-base) * 3.47 * 0.9), 40.6px);
          display: flex;
          align-items: center;
          margin-bottom: 0.4em;
          @media screen and (max-width: 768px) {
            font-size: 4.5cqw;
          }
          &:before, &:after {
            content: "";
            height: 0.07em;
            flex-grow: 1;
            background-color: #ffffff;
          }
          &:before {
            margin-right: 0.2em;
          }
          &:after {
            margin-left: 0.2em;
          }
        }
        .flex-content {
          display: flex;
          justify-content: space-between;
          .device {
            width: 50%;
            container-type: inline-size;
            label {
              font-family: "RodinProDB", sans-serif;
              font-size: 6.1cqw;
            }
            .desc {
              display: flex;
              align-items: center;
              margin-top: 1cqw;
              .image {
                width: 26%;
                margin-right: 2cqw;
                img {
                  border: 2.5px solid #ffffff;
                  border-radius: 50%;
                }
              }
              .text {
                font-family: "RodinProDB", sans-serif;
                font-size: 5.1cqw;
              }
            }
          }
        }
      }
      .summary-phrase {
        text-align: center;
        font-family: "RodinProB", sans-serif;
        font-size: clamp(16px, calc(var(--vw-base) * 6.3 * 0.9), 74.75px);
        margin-top: 0.6em
      }
      @media screen and (max-width: 768px) {
        .summary-phrase {
          margin-top: 1.4em
        }
      }
    }
  }
}

section.heatx-features::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-features::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(features-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.manual .inner {
  .header {
    display: block;
    text-align: center;
    font-family: "DIN-Regular", sans-serif;
    font-weight: 700;
    font-size: clamp(24px, calc(var(--vw-base) * 4.3 * 0.9), 50.6px);
    @media screen and (max-width: 768px) {
      font-size: 28px;
    }
    .main {
      border-bottom: 0.05em solid #ffffff;
      padding-bottom: 0.08em;
    }
    .sub {
      display: block;
      font-family: "GothickMB101", sans-serif;
      font-size: 49%;
      font-weight: 300;
      letter-spacing: 0.3em;
    }
  }
}

section.heatx-how-to-use {
  position: relative;
  /* background-image: url(howtouse-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    ul.flex-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 3cqw;
      li {
        container-type: inline-size;
        width: 50%;
        margin-bottom: 6cqw;
        &:nth-child(odd) {
          transform: translateX(-4.72cqw);
        }
        &:nth-child(even) {
          transform: translateX(-2.36cqw);
        }
        .image img {
          width: 100%;
        }
        .desc {
          padding-left: 9.45cqw;
          font-family: "M PLUS Rounded 1c", sans-serif;
          font-weight: 400;
          font-size: 5.8cqw;
          line-height: 1.4;
          margin-top: 0.4em;
        }
        @media screen and (max-width: 768px) {
          .desc {
            font-size: 8cqw;
          }
        }
        .mode-tag {
          display: flex;
          gap: 4cqw;
          margin-top: 0.6em;
          padding-left: 9.45cqw;
          div:nth-child(1) {
            width: 55%;
          }
          div:nth-child(2) {
            width: 45%;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      ul.flex-content {
        width: 100%;
        margin-left: 2.5cqw;
      }
    }
    p[class^="caution"] {
      font-family: "M PLUS Rounded 1c", sans-serif;
      font-size: 2.3cqw;
      letter-spacing: -0.1em;
    }
  }
  @media screen and (max-width: 768px) {
    .inner {
      width: 90%;
    }
  }
}

section.heatx-how-to-use::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 10cqw;
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-how-to-use::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 10cqw;
  background-image: url(howtouse-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-spec {
  position: relative;
  /* background-image: url(spec-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 7cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    .comparison-table {
      display: grid;
      grid-template-columns: 18% 1fr 1fr;
      gap: 0;
      margin-top: 6cqw;
    }
    .empty-cell {
        background-color: transparent;
    }
    .product-image {
      container-type: inline-size;
      grid-column: span 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5cqw;
      margin-bottom: 1.2cqw;
      padding: 1.4cqw 0 0.8cqw 0;
      z-index: 1;
      position: relative;
      img {
        object-fit: contain;
      }
      img {
        width: auto;
        height: 53cqw;
      }
      .product-name {
          font-weight: bold;
          text-align: center;
          font-size: 6.25cqw;
          @media screen and (max-width: 768px) {
            font-size: 8.25cqw;
          }
      }
      &.heatx {
          background-color: #e95520;
          color: white;
          margin-right: 2.3cqw;
          &:after {
            border-color: #e95520 transparent transparent;
          }
      }
      &.iqos {
          background-color: #7bbebc;
          color: white;
          &:after {
            border-color: #7bbebc transparent transparent;
          }
      }
      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 5cqw;
        translate: -50% 100%;
        z-index: 2;
      }
    }
    .label-cell {
        container-type: inline-size;
        font-family: "M PLUS Rounded 1c", sans-serif;
        background-color: #ffffff;
        color: #595757;
        padding: 1em 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 2.3cqw;
        span {
          font-size: 14.5cqw;
        }
    }
    .value-cell {
        container-type: inline-size;
        font-family: "M PLUS Rounded 1c", sans-serif;
        padding: 1em 0;
        @media screen and (max-width: 768px) {
          padding: 0.6em 0;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-bottom: 1px solid transparent;
        font-weight: bold;
        position: relative;
        span {
          font-size: 6.8cqw;
          @media screen and (max-width: 768px) {
            font-size: 8.4cqw;
          }
        }
        span.small {
          font-size: 4.8cqw;
          @media screen and (max-width: 768px) {
            font-size: 6cqw;
          }
        }
    }
    .value-cell:not(:nth-last-child(-n+2))::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 5%;
        width: 90%;
        height: 1px;
        background-color: #ffffff;
    }
    .heatx-cell {
        background-color: #ed7848;
        color: white;
        margin-right: 2.3cqw;
    }
    .iqos-cell {
        background-color: #cfe6e5;
        color: #426e6d;
    }
  }
  @media screen and (max-width: 768px) {
    .inner {
      width: 90%;
    }
  }
}

section.heatx-spec::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-spec::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(spec-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-voice {
  position: relative;
  /* background-image: url(voice-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 7cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    .header-sub {
      font-family: "M PLUS Rounded 1c", sans-serif;
      font-size: 3.8cqw;
      text-align: center;
      border: 1.5px solid #ffffff;
      letter-spacing: 0.15em;
      padding: 0.1em 0;
      margin-top: 0.1em;
      margin-bottom: 1.8em;
    }
    .voice-list {
      background-color: #ffffff;
      padding: 2.5cqw 5.5cqw 4.5cqw 5.5cqw;
      .flex-content {
        display: flex;
        justify-content: space-between;
        gap: 4cqw;
        container-type: inline-size;
        &:first-child {
          margin-top: 2cqw;
        }
        &:not(:first-child) {
          margin-top: 6cqw;
        }
        .person {
          width: 19.2cqw;
          img {
            width: 100%;
          }
          label {
            color: #000000;
            display: block;
            text-align: center;
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-weight: 500;
            font-size: 3.5cqw;
            margin-top: 1cqw;
          }
        }
        .voice {
          container-type: inline-size;
          font-family: "M PLUS Rounded 1c", sans-serif;
          font-weight: 700;
          color: #000000;
          background-color: #dee9f0;
          flex: 1;
          padding: 2cqw;
          border-radius: 1cqw;
          position: relative;
          span {
            font-size: 4.5cqw;
            line-height: 1.4;
            span {
              color: #ed7848;
              text-decoration: underline;
               text-underline-offset: 0.25em;
            }
          }
          &:before {
            content: "";
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-radius: 50%;
            transform: rotate(45deg);
            left: -5cqw;
            top: 8cqw;
            border-left: 5cqw solid transparent;
            border-top: 5cqw solid transparent;
            border-right: 5cqw solid transparent;
            border-bottom: 5cqw solid #dee9f0;
          }
          &:after {
            content: "";
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-radius: 50%;
            transform: rotate(45deg);
            left: -10cqw;
            top: -5cqw;
            border-left: 10cqw solid transparent;
            border-top: 10cqw solid transparent;
            border-right: 10cqw solid transparent;
            border-bottom: 10cqw solid #ffffff;
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .inner {
      width: 90%;
    }
  }
}

section.heatx-voice::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-voice::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(voice-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-pse {
  position: relative;
  /* background-image: url(pse-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 8cqw 0;
  font-family: "M PLUS Rounded 1c", sans-serif;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      display: block;
      width: 60.4%;
      margin: 0 auto;
      text-align: center;
      font-weight: 500;
      container-type: inline-size;
      border: 1.5px solid #ffffff;
      span {
        font-size: 9.2cqw;
        letter-spacing: 0.05em;
      }
    }
    @media screen and (max-width: 768px) {
      .header {
        padding: 0.2em 0;
        width: 77%;
      }
    }
    .desc1 {
      display: block;
      width: 60.4%;
      margin: 0.7em auto;
      text-align: center;
      font-size: 3.1cqw;
      font-weight: 400;
      letter-spacing: 0.03em;
      @media screen and (max-width: 768px) {
        margin: 1em auto;
      }
    }
    @media screen and (max-width: 768px) {
      .desc1 {
        width: 100%;
        font-size: 5cqw;
      }
    }
    .image {
      width: 32.5%;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
    hr {
      font-size: 3.1cqw;
      display: block;
      width: 60.4%;
      margin: 2em auto;
      height: 2px;
    }
    .desc2 {
      display: block;
      margin: 0.7em auto 0 auto;
      text-align: center;
      font-size: 2.6cqw;
      font-weight: 400;
      letter-spacing: 0.02em;
    }
    @media screen and (max-width: 768px) {
      .desc2 {
        font-size: 3.4cqw;
      }
    }
  }
}

section.heatx-pse::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 34px);
}
@media screen and (max-width: 768px) {
  section.heatx-pse::before {
    height: calc(100% - 1px);
  }
}

section.heatx-pse::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(pse-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-guarantee {
  position: relative;
  /* background-image: url(guarantee-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 8cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      display: block;
      text-align: center;
      font-family: "M PLUS Rounded 1c", sans-serif;
      font-weight: 700;
      font-size: 8.1cqw;
      margin-bottom: 0.2em;
      white-space: nowrap;
    }
  }
}

section.heatx-guarantee::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-guarantee::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(guarantee-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-compatible {
  position: relative;
  /* background-image: url(pse-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  font-family: "M PLUS Rounded 1c", sans-serif;
  padding: 8cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      display: block;
      text-align: center;
      font-family: "M PLUS Rounded 1c", sans-serif;
      font-weight: 700;
      font-size: 8.1cqw;
    }
    .desc1 {
      font-size: 4.1cqw;
      margin: 0.4em 0 0.9em 0;
      text-align: center;
      span {
        letter-spacing: 0.08em;
        white-space: nowrap;
      }
    }
    .image {
      width: 90.16%;
      margin: 0 auto;
      img {
        width: 100%;
        box-shadow: 1.5cqw 1.5cqw 2cqw rgba(0, 0, 0, 0.4);
      }
    }
    .desc2 {
      font-size: 2.65cqw;
      letter-spacing: 0.08em;
      line-height: 1.6;
      margin-top: 1.4em;
      font-weight: 500;
      display: block;
    }
  }
}

section.heatx-compatible::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-compatible::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(compatible-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-purchase {
  position: relative;
  /* background-image: url(pse-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 8cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      display: block;
      width: 60.4%;
      margin: 0 auto;
      text-align: center;
      font-family: "GothickMB101", sans-serif;
      font-weight: 700;
      container-type: inline-size;
      border: 1.5px solid #ffffff;
      padding-bottom: 0.8em;
      span {
        font-size: 8.94cqw;
        letter-spacing: 0.05em;
      }
      @media screen and (min-width: 769px) and (max-width: 1024px) {
        padding-top: 0.8em;
      }
    }
    @media screen and (max-width: 768px) {
      .header {
        padding-top: 0.1em;
        padding-bottom: 0.2em;
      }
    }
    .desc {
      display: block;
      margin: 1em auto;
      text-align: center;
      font-family: "GothickMB101", sans-serif;
      font-size: 2.84cqw;
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .product {
      display: flex;
      justify-content: space-between;
      margin-top: 4cqw;
      background-color: #ffffff;
      color: #000000;
      padding: 2.5cqw 5.5cqw;
      @media screen and (max-width: 768px) {
        padding-right: 2cqw;
      }
      gap: 4cqw;
      position: relative;
      overflow: hidden;
      .image {
        width: 16cqw;
        img {
          width: 100%;
        }
      }
      .info {
        width: 38cqw;
        margin-top: 5cqw;
        @media screen and (max-width: 768px) {
          width: 34cqw;
        }
        .product-name {
          font-family: "DIN-Regular", sans-serif;
          font-size: 4.7cqw;
          font-weight: 700;
          line-height: 1.2;
          .sub {
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-size: 2.5cqw;
            font-weight: 700;
            display: block;
          }
        }
        .price {
          font-size: 2.68cqw;
          margin-top: 0.8em;
          label {
            font-family: "NotoSansCJKjp", sans-serif;
            font-size: 2.68cqw;
            font-weight: 700;
          }
          p {
            font-family: "DIN Condensed Bold", sans-serif;
            font-size: 10.65cqw;
            font-weight: 700;
            color: #d61518;
            line-height: 0.9;
            .unit {
              font-family: "NotoSansCJKjp", sans-serif;
              font-size: 4.66cqw;
              font-weight: 700;
            }
            .tax {
              font-family: "NotoSansCJKjp", sans-serif;
              font-size: 2.76cqw;
              font-weight: 500;
              color: #000000;
            }
          }
        }
      }
      .action {
        flex: 1;
        container-type: inline-size;
        margin-top: 9cqw;
        .quan {
          label {
            font-family: "NotoSansCJKjp", sans-serif;
            font-size: 7cqw;
            font-weight: 700;
            margin-right: 1em;
          }
          .cartquans {
            border: solid 2px rgba(0, 0, 0, 0.6);
            font-size: 8cqw;
            padding: 0.5em 0;
            padding-right: 2em;
            appearance: none;
            background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7 9l6 10 6-10z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 0.5em center;
            background-size: 1.2em;
          }
        }
        .addcartbtn {
          font-family: "NotoSansCJKjp", sans-serif;
          font-size: 8cqw;
          margin-top: 1.5em;
          .cartaddinput2 {
            width: 100%;
            color: #FFF100;
            background-color: #22AC39;
            background-image: unset;
            border-radius: 0;
            border: 2cqw solid #006935;
            margin: auto;
            font-family: "NotoSansCJKjp", sans-serif;
            padding: 0.5em 0;
          }
        }
      }
      @media screen and (max-width: 768px) {
        .action {
          margin-top: 3cqw;
        }
      }
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: -7cqw;
        width: 0;
        height: 0;
        display: block;
        border-top: 7cqw solid #000000;
        border-right: 7cqw solid transparent;
        border-left: 7cqw solid transparent;
        border-bottom: 7cqw solid transparent;
      }
    }
    .product.green {
      .info .product-name {
        color: #28625c;
        .sub {
          color: #000000;
        }
      }
      &:after {
        border-top: 7cqw solid #28625c;
      }
    }
    .product.purple {
      .info .product-name {
        color: #413b8a;
        .sub {
          color: #000000;
        }
      }
      &:after {
        border-top: 7cqw solid #413b8a;
      }
    }
    .product.winered {
      .info .product-name {
        white-space: nowrap;
        color: #af2d28;
        .sub {
          color: #000000;
        }
      }
      &:after {
        border-top: 7cqw solid #af2d28;
      }
    }
  }
}

section.coupon-banner {
  background-color: #3e3a39;
  .image {
    width: 80%;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
}

section.extra-banner {
  background-color: #3e3a39;
  .image {
    width: 80%;
    margin: 0 auto;
    a {
      display: block;
      &:nth-of-type(1) {
        margin-bottom: 2cqw;
        @media screen and (max-width: 768px) {
          margin-bottom: 3cqw;
        }
      }
      img {
        width: 100%;
      }
    }
  }
}

section.heatx-purchase::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
  height: calc(100cqw - 1px);
}

section.heatx-purchase::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(purchase-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-post-mailing {
  position: relative;
  /* background-image: url(guarantee-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 8cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }
  }
}

section.heatx-post-mailing::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
}

section.heatx-post-mailing::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(post-mailing-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-review-video {
  position: relative;
  /* background-image: url(voice-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 7cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      container-type: inline-size;
      width: 60.47cqw;
      margin: 0.1em auto 0.5em;
      font-family: "DIN-Regular", sans-serif;
      font-weight: 700;
      text-align: center;
      border: 1.5px solid #ffffff;
      letter-spacing: 0.15em;
      padding: 0.1em 0;
      span {
        font-size: 9.47cqw;
      }
    }
    .header-sub {
      font-family: "GothickMB101", sans-serif;
      font-weight: 600;
      font-size: 3.8cqw;
      text-align: center;
      margin-top: 0.1em;
      margin-bottom: 1.8em;
    }

    /* .review-video {
      position: relative;
      width: 100%;
    } */

    /* .review-video::before {
      content: '';
      display: block;
      padding-top: 100%;
    } */


    /* .review-video__slider {
      position: absolute;
      top: 21%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 1200px;
    } */
    @media screen and (max-width: 768px) {
      .review-video__slider {
        top: 65%;
      }
    }

    .review-video__item {
      outline: none;
      padding: 0 30px;
    }

    .review-video__link {
      display: block;
      text-decoration: none;
    }

    .review-video__thumbnail {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .review-video__thumbnail img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .review-video__play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .review-video__play:hover {
      background: rgba(255, 255, 255, 1);
      transform: translate(-50%, -50%) scale(1.1);
    }

    .review-video__play-icon {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 15px 0 15px 26px;
      border-color: transparent transparent transparent #333;
      margin-left: 5px;
    }

    .review-video__text {
      margin-top: 25px;
      padding: 0 10px;
    }

    .review-video__desc {
      font-family: 'M PLUS 2', 'Noto Serif JP', serif;
      font-weight: 300;
      font-size: clamp(1.0rem, 2.0vw, 1.8rem);
      letter-spacing: 0.3rem;
      line-height: 2.0;
      color: white;
      text-align: left;
    }

    /* Slick carousel custom styles */
    .review-video__slider .slick-prev,
    .review-video__slider .slick-next {
      width: 50px;
      height: 50px;
      z-index: 10;
    }

    .review-video__slider .slick-prev {
      left: 0;
    }

    .review-video__slider .slick-next {
      right: 0;
    }

    .review-video__slider .slick-prev:before,
    .review-video__slider .slick-next:before {
      font-size: 50px;
      color: white;
      opacity: 0.75;
    }

    .review-video__slider .slick-prev:hover:before,
    .review-video__slider .slick-next:hover:before {
      opacity: 1;
    }

    .review-video__slider .slick-dots {
      bottom: -50px;
    }

    .review-video__slider .slick-dots li button:before {
      font-size: 12px;
      color: white;
      opacity: 0.5;
    }

    .review-video__slider .slick-dots li.slick-active button:before {
      color: white;
      opacity: 1;
    }

    @media screen and (max-width: 768px) {
      .review-video__slider .slick-prev,
      .review-video__slider .slick-next {
        width: 35px;
        height: 35px;
      }
      
      .review-video__slider .slick-prev:before,
      .review-video__slider .slick-next:before {
        font-size: 35px;
      }
      
      .review-video__play {
        width: 60px;
        height: 60px;
      }
      
      .review-video__play-icon {
        border-width: 12px 0 12px 20px;
      }

      .review-video__desc {
        letter-spacing: 0.2rem;
        line-height: 1.4;
      }

      .review-video__text {
        margin-top: 15px;
      }

      .review-video__item {
        padding: 0 10px;
      }
    }
  }
}

section.heatx-review-video::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
}

section.heatx-review-video::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(review-video-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-faq {
  position: relative;
  /* background-image: url(voice-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 7cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      container-type: inline-size;
      width: 60.47cqw;
      margin: 0.1em auto 0.5em;
      font-family: "DIN-Regular", sans-serif;
      font-weight: 700;
      text-align: center;
      border: 1.5px solid #ffffff;
      letter-spacing: 0.15em;
      padding: 0.1em 0;
      span {
        font-size: 9.47cqw;
      }
    }
    .header-sub {
      font-family: "GothickMB101", sans-serif;
      font-weight: 600;
      font-size: 3.8cqw;
      text-align: center;
      margin-top: 0.1em;
      margin-bottom: 1.8em;
    }
    .faq {
      background-color: #ffffff;
      padding: 6cqw;
      .faq-item {
        &:not(:last-child) {
          margin-bottom: 3cqw;
        }
        .faq-question {
          color: #e95520;
          width: 100%;
          display: flex;
          align-items: center;
          gap: 2cqw;
          background: none;
          cursor: pointer;
          text-align: left;
          .faq-q {
            font-family: "DIN Condensed Bold", sans-serif;
            font-weight: 700;
            font-size: 10.7cqw;
            line-height: 1;
          }

          .faq-text {
            font-family: "M PLUS Rounded 1c", sans-serif;
            flex: 1;
            font-size: 3.58cqw;
            font-weight: 700;
            line-height: 1.1;
            &.flex-column {
              display: flex;
              flex-direction: column;
              gap: 0.1em;
            }
            .sub-wrapper {
              display: flex;
              align-items: flex-start;
              gap: 0.15em;
            }
            .sub-label {
              width: 6.6%;
              @media screen and (max-width: 768px) {
                width: 12%;
                margin-top: -2px;
              }
            }
            .sub {
              font-size: 1.8cqw;
              @media screen and (max-width: 768px) {
                font-size: 2.2cqw;
              }
              font-weight: 700;
              line-height: 1;
            }
          }

          .faq-icon {
            position: relative;
            width: 18px;
            height: 18px;
            margin-left: 1.5cqw;
            &::before,
            &::after {
              content: "";
              position: absolute;
              background: #ff5a1f;
            }

            &::before {
              top: 50%;
              left: 0;
              width: 100%;
              height: 2px;
              transform: translateY(-50%);
            }

            &::after {
              left: 50%;
              top: 0;
              width: 2px;
              height: 100%;
              transform: translateX(-50%);
              transition: opacity 0.3s;
            }
          }

        }
        @media screen and (max-width: 1024px) {
          &:not(:last-child) .faq-text {
            margin-top: -6px;
          }
        }
        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease;
          color: #231815;
          p {
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-size: 2.82cqw;
            @media screen and (max-width: 768px) {
              font-size: 3.2cqw;
            }
            line-height: 1.6;
          }
        }
        &:last-child .faq-answer p {
          margin-top: 2cqw;
          @media screen and (max-width: 768px) {
            margin-top: 3cqw;
          }
        }
        &.is-open .faq-icon::after {
          opacity: 0;
        }
      }
    }
  }
}

section.heatx-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
}

section.heatx-faq::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(faq-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

section.heatx-overview {
  position: relative;
  /* background-image: url(voice-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top; */
  background-color: #3e3a39;
  container-type: inline-size;
  padding: 7cqw 0;

  .inner {
    width: clamp(280px, calc(var(--vw-base) * 81.1 * 0.9), 948.76px);
    container-type: inline-size;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
      width: 90%;
    }

    .header {
      container-type: inline-size;
      width: 60.47cqw;
      margin: 0.1em auto 0.5em;
      font-family: "DIN-Regular", sans-serif;
      font-weight: 700;
      text-align: center;
      border: 1.5px solid #ffffff;
      letter-spacing: 0.15em;
      padding: 0.1em 0;
      span {
        font-size: 9.47cqw;
      }
    }
    .header-sub {
      font-family: "GothickMB101", sans-serif;
      font-weight: 600;
      font-size: 3.8cqw;
      text-align: center;
      margin-top: 0.1em;
      margin-bottom: 1.8em;
    }
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      background-color: rgba(35, 24, 21, 0.4);
      border: 2.5px solid #ffffff;
      overflow: hidden;
      th, td {
        font-family: "M PLUS Rounded 1c", sans-serif;
        font-weight: 500;
        font-size: 2.54cqw;
        color: #ffffff;
        padding: 0.8em 1em;
        border: 1px solid #ffffff;
        background-color: rgba(0, 0, 0, 0.4);
        @media screen and (max-width: 768px) {
          font-size: 3.5cqw;
          padding: 0.8em 0.5em;
        }
      }
      th {
        width: 32.2%;
        text-align: center;
      }
      td {
        text-align: left;
      }
    }
    @media screen and (max-width: 768px) {
      .spec-table {
        border-width: 1.5px;
        tr:nth-of-type(3) th, tr:nth-of-type(7) td {
          vertical-align: middle;
        }
      }
    }

  }
}

section.heatx-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-color: #fff;
  z-index: 0;
}

section.heatx-overview::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top: 5.7cqw; */
  background-image: url(overview-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}


.PurcFloat {
	display: flex;
    justify-content: flex-end;
}

.PurcFloat,
.PurcFloat:hover,
.PurcFloat:visited {
    inset: auto auto 2em;
}

.PurcFloat .statPic {
/*    inset: auto 0 0;*/
}

.PurcFloat,
.PurcFloat:hover,
.PurcFloat:visited {
    --ry: 30vw;
    pointer-events: none;
}

:where(.PurcFloat, .PurcFloat:hover, .PurcFloat:visited) {
	max-width: 100%;
}

.PurcFloat>* {
    position: relative;
}

.PurcFloat>div>div {
    background-color: var(--gre1);
}

.PurcFloat .statPic {
    pointer-events: auto;
/*    inset: 0;*/
/*    margin: auto;*/
    width: fit-content;
    max-width: 70%;
	top: unset !important;
}

.PurcFloat .statPic .slg {
    display: none;
}

.PurcFloat .statPic .pic {
    max-width: 100%;
}

@media screen and (min-width: 1470px) {
	.PurcFloat .statPic {
		right: unset !important;
	}
}

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

    .PurcFloat,
    .PurcFloat:hover,
    .PurcFloat:visited {
        --ry: 250px;
    }

    .PurcFloat .statPic {
        max-width: 40%;
    }
}

.PurcFloat .statPic {
  position: fixed;
  bottom: 20px; /* 底からの距離（数値を大きくすると上に移動） */
  width: 150px;
  animation: floating-y 500ms ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 1024px) {
  .PurcFloat .statPic {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .PurcFloat .statPic {
    width: 100px;
  }
}