@charset "UTF-8";

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

body {
  line-height: 1;
}

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

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
}

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

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

del {
  text-decoration: line-through;
}

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

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

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

input,
select {
  vertical-align: middle;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ol,
ul {
  list-style-type: none;
}

/* =========================================================
   Keyframes
========================================================= */
@-webkit-keyframes opening-y {
  0% {
    stroke-dashoffset: 3000;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  85% {
    stroke-dashoffset: 2450;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: transparent;
    fill: #ffdb00;
  }
}

@keyframes opening-y {
  0% {
    stroke-dashoffset: 3000;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  85% {
    stroke-dashoffset: 2450;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: transparent;
    fill: #ffdb00;
  }
}

@-webkit-keyframes opening-w {
  0% {
    stroke-dashoffset: 3000;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  85% {
    stroke-dashoffset: 2450;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: transparent;
    fill: #fff;
  }
}

@keyframes opening-w {
  0% {
    stroke-dashoffset: 3000;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  85% {
    stroke-dashoffset: 2450;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: transparent;
    fill: #fff;
  }
}

@-webkit-keyframes opening-b {
  0% {
    stroke-dashoffset: 3000;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  85% {
    stroke-dashoffset: 2450;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: transparent;
    fill: #000;
  }
}

@keyframes opening-b {
  0% {
    stroke-dashoffset: 3000;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  85% {
    stroke-dashoffset: 2450;
    stroke-width: 2;
    stroke: #ffdb00;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: transparent;
    fill: #000;
  }
}

/* =========================================================
   Typography / Global
========================================================= */
html {
  font-size: 62.5%;
  overflow-y: scroll;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic,
    'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo,
    sans-serif;
  font-size: 1.6rem;
  line-height: 1.8125;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #000;
}

::-moz-selection {
  background: #000;
  color: #fff;
}

::-webkit-selection {
  background: #000;
  color: #fff;
}

::selection {
  background: #000;
  color: #fff;
}

img::-moz-selection {
  background: rgba(0, 0, 0, .75);
}

img::selection {
  background: rgba(0, 0, 0, .75);
}

img::-moz-selection {
  background: rgba(0, 0, 0, .75);
}

a {
  color: #000;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a[href^="tel:"] {
  pointer-events: none;
  color: #000;
  text-decoration: none;
  cursor: text;
}

img,
svg {
  vertical-align: top;
  width: 100%;
  height: auto;
}

/* =========================================================
   Layout: Loading
========================================================= */
.l-loading {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  -webkit-transition: opacity .5s linear 2.175s, -webkit-transform 0s linear 2.675s;
  transition: opacity .5s linear 2.175s, -webkit-transform 0s linear 2.675s;
  transition: opacity .5s linear 2.175s, transform 0s linear 2.675s;
  transition: opacity .5s linear 2.175s, transform 0s linear 2.675s, -webkit-transform 0s linear 2.675s;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.is-complete .l-loading {
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.l-loading .mark {
  width: 100px;
  position: absolute;
  right: 50%;
  bottom: 50%;
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.l-loading .mark svg {
  -webkit-transition: opacity .25s linear 2s, -webkit-transform .25s cubic-bezier(.645, .045, .355, 1) 2s;
  transition: opacity .25s linear 2s, -webkit-transform .25s cubic-bezier(.645, .045, .355, 1) 2s;
  transition: opacity .25s linear 2s, transform .25s cubic-bezier(.645, .045, .355, 1) 2s;
  transition: opacity .25s linear 2s, transform .25s cubic-bezier(.645, .045, .355, 1) 2s, -webkit-transform .25s cubic-bezier(.645, .045, .355, 1) 2s;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.is-complete .l-loading .mark svg {
  opacity: 0;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

.l-loading .mark svg .b,
.l-loading .mark svg .w,
.l-loading .mark svg .y {
  stroke: #fff;
  fill: transparent;
  stroke-width: 2;
  stroke-dasharray: 3000;
  stroke-dashoffset: 2450;
}

.is-complete .l-loading .mark svg .y {
  -webkit-animation: opening-y 1.75s cubic-bezier(.77, 0, .175, 1) 0s forwards;
  animation: opening-y 1.75s cubic-bezier(.77, 0, .175, 1) 0s forwards;
}

.is-complete .l-loading .mark svg .w {
  -webkit-animation: opening-w 1.75s cubic-bezier(.77, 0, .175, 1) 0s forwards;
  animation: opening-w 1.75s cubic-bezier(.77, 0, .175, 1) 0s forwards;
}

.is-complete .l-loading .mark svg .b {
  -webkit-animation: opening-b 1.75s cubic-bezier(.77, 0, .175, 1) 0s forwards;
  animation: opening-b 1.75s cubic-bezier(.77, 0, .175, 1) 0s forwards;
}

/* =========================================================
   Layout: Wrapper / Footer
========================================================= */
.l-wrapper {
  overflow: hidden;
  -webkit-transition: opacity .25s linear 0s;
  transition: opacity .25s linear 0s;
}

.is-complete .l-wrapper {
  opacity: 1;
}

.l-footer {
  position: relative;
  text-align: center;
  background: #ffdb00;
  padding: 30px 0;
  margin: calc(100px + 30px) 0 0;
}

.l-footer:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent transparent #ffdb00 transparent;
  position: absolute;
  left: 0;
  top: -100px;
}

.l-footer .ttl {
  font-size: 1.8rem;
  margin: 0 0 15px;
}

.l-footer ul img {
  font-size: 0;
  width: 17px;
  vertical-align: middle;
  margin: 0 5px 0 0;
}

.l-footer ul.btns {
  margin: 30px 0 15px;
  font-size: 1.4rem;
}

.l-footer ul.btns li {
  margin: 5px 0 0;
}

.l-footer ul.credit li {
  cursor: text;
}

.l-footer .privacy {
  width: 94px;
  margin: 30px auto;
}

.l-footer .pagetop {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 10;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .25s linear 0s, -webkit-transform 0s linear .25s;
  transition: opacity .25s linear 0s, -webkit-transform 0s linear .25s;
  transition: transform 0s linear .25s, opacity .25s linear 0s;
  transition: transform 0s linear .25s, opacity .25s linear 0s, -webkit-transform 0s linear .25s;
}

.is-scroll .l-footer .pagetop {
  -webkit-transition: opacity .25s linear 0s, -webkit-transform 0s linear 0s;
  transition: opacity .25s linear 0s, -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s, opacity .25s linear 0s;
  transition: transform 0s linear 0s, opacity .25s linear 0s, -webkit-transform 0s linear 0s;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.l-footer .copyright {
  font-size: 1.1rem;
}

/* =========================================================
   Page: Top MV
========================================================= */
/* MV全体を16:9に固定 */
.p-top__mv,
.p-top__mv #mainimg {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: unset;
}

.p-top__mv #mainimg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}




.p-top__mv .txt {
  position: absolute;
  right: 30px;
  bottom: 90px;
  z-index: 3;
  color: #fff; /* ベース文字色は白のまま */

  /* BOX要素はここから削除 */
  background: none;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 小さい文字だけBOX化（ガラス調） */
.p-top__mv .txt .txt-box {
  background: rgba(255, 255, 255, 0.1); /* 今の薄さをそのまま移植 */
  padding: 28px 32px;

  /* 左だけ強い角丸 */
  border-radius: 24px 8px 8px 24px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}




.p-top__mv .txt .catch01 {
  width: 30vw;
}

.p-top__mv .txt .catch01 img {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}


.p-top__mv .txt .catch02 {
  width: 25vw;
  margin: 0 0 15px; /* 箱の中なので上の30pxは不要 */
}


.p-top__mv .txt .desc {
  font-size: 1.32812vw;
  font-weight: 700;
}

.p-top__mv .blanks {
  position: absolute;
  right: 0;
  top: 0;
}

.p-top__mv .blanks ul {
  font-size: 0;
  text-align: right;
}

.p-top__mv .blanks li {
  display: inline-block;
  margin: 0 0 0 8px;
}

/* =========================================================
   MV Video Background (Keep triangle design)
========================================================= */

/* MVの高さを担保（画像を消すと潰れる対策） */
.p-top__mv {
  
  overflow: hidden;
}

/* 背景動画：最背面 */
.p-top__mv #mainimg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.p-top__mv #mainimg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 三角形（既存の装飾）：動画の上 */
.p-top__mv:before,
.p-top__mv:after,
.p-top__mv .logo:before,
.p-top__mv .logo:after {
  z-index: 1;
}

/* 文字・ロゴ：最前面 */
.p-top__mv .logo span {
  z-index: 3; /* 既に3ならOK */
}




/* =========================================
   MV Text: 縦センターに固定（PC）
========================================= */
@media (min-width: 981px) {
  .p-top__mv .txt {
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
    right: 30px;
  }
}


/* =========================================
   Top MV: 16:9 固定（PC）＋余白最適化
========================================= */
@media (min-width: 981px) {
  .p-top__mv {
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 56px; /* ← 次セクションまでの余白（好みで40〜72） */
  }

  .p-top__mv #mainimg {
    position: absolute;
    inset: 0;
  }

  .p-top__mv #mainimg video {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 16:9同士なので基本トリミング最小 */
    object-position: center;  /* 必要なら center top */
  }
}




/* =========================================================
   Page: Top Whats
========================================================= */
.p-top__whats {
  position: relative;
  padding: 1px 0 0;
}

.p-top__whats .ttl {
  width: 8vw;
  position: absolute;
  right: 5vw;
  top: 45px;
  z-index: 1;
}

.p-top__whats .img {
  width: 69.25vw;
  padding: 0 16vw 0 0;
  margin: 0 0 0 auto;
}

.p-top__whats .copy {
  position: absolute;
  left: 0;
  top: 120px;
}

.p-top__whats .copy li {
  margin: 0 0 15px;
  font-size: 0;
}

.p-top__whats .copy01 img {
  width: 33.99vw;
}

.p-top__whats .copy02 img {
  width: 38.05vw;
}

.p-top__whats .copy03 img[src$="waths-copy01.svg"] {
  left: 50%;
  transform: translateX(90%);
  height: 270px;
  width: auto;
  display: block;
}


.p-top__whats .desc {
  font-size: 1.32812vw;
  font-weight: 700;
  width: 55vw;
  margin: 45px auto 0;
  text-align: center;     /* 文字を中央揃え */
  margin-left: auto;
  margin-right: auto;    /* ブロック自体を中央へ */
}

.p-top__whats .btn {
  text-align: center;
  margin: 30px 0 0;
}

/* 「相場を、使いこなす」下線装飾 */
.u-slash {
  font-weight: 700;
  background: url(../images/slash.svg) repeat-x center bottom;
  background-size: .35em;
  padding: 0 .3em;
}

/* =========================================================
   Page: Top Point
========================================================= */

.p-top__point {
  position: relative;
  padding: 30px 0 0;
  margin: 60px 0 0;
  z-index: 2;
}

.p-top__point .ttl {
  width: 8vw;
  position: absolute;
  left: 5vw;
  top: 45px;
  z-index: 1;
}

.p-top__point .img {
  width: 64.5vw;
  padding: 0 0 0 16vw;
  margin: 0 auto 0 0;
}

.p-top__point .copy {
  text-align: right;
  position: absolute;
  right: 0;
  top: 120px;
}

.p-top__point .copy li {
  margin: 0 0 15px auto;
}

.p-top__point .copy03 img {
  width: 29.145vw;
}

.p-top__point .copy04 img {
  width: 37.19vw;
}

.p-top__point .ttl-sub {
  font-size: 0;
  text-align: center;
  margin: 45px 0 0;
}

.p-top__point .ttl-sub strong {
  font-size: 1.5625vw;
  position: relative;
  display: inline-block;
  background: url(../images/slash.svg) repeat-x center bottom;
  background-size: .75em;
  padding: 0 .5em;
}

.p-top__point .ttl-sub strong:nth-of-type(1) {
  padding-right: 0;
}

.p-top__point .ttl-sub strong:nth-of-type(2) {
  padding-left: 0;
}

.p-top__point .points {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 2.5vw;
}

.p-top__point .points .block {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 calc(100% / 3);
  -ms-flex: 0 1 calc(100% / 3);
  flex: 0 1 calc(100% / 3);
  padding: 0 2.5vw;
  margin: 45px 0 0;
}

.p-top__point .points h3 {
  font-size: 1.5625vw;
  line-height: 1.35;
  position: relative;
  padding: 0 0 0 2.5em;
}

.p-top__point .points h3 img {
  width: 2em;
  position: absolute;
  bottom: 50%;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  left: 0;
}

.p-top__point .points p {
  font-size: 1.25vw;
  margin: 15px 0 0;
}

.p-top__point .btn {
  text-align: center;
  margin: 30px 0 0;
}


/* =========================================================
   Page: Top Point (Modifiers)
========================================================= */

.p-top__point--first {}

/* first：右端に20px余白 */
.p-top__point--first .copy {
  right: 20px;
}



/* second：画像なし＋copy中央 */
.p-top__point--second .img {
  display: none;
}

.p-top__point--second .copy {
  position: static;
  top: auto;
  right: auto;
  text-align: center;
  margin: 0 auto;
}

.p-top__point--second .copy li {
  margin: 0 auto 15px;
}

/* second と third の間隔を詰める */
.p-top__point--second {
  margin-bottom: -150px; /* -20〜-40で微調整可 */
}


/* third：copy を左寄せ */
.p-top__point--third .copy {
  text-align: left;
  left: 0;
  right: auto;
}

/* li の左寄せ（auto を解除） */
.p-top__point--third .copy li {
  margin: 0 0 15px 0;
}

.p-top__point--third {
  padding-bottom: 300px;
}


/* =========================================================
   Page: Top Service
========================================================= */
.p-top__service {
  position: relative;
  margin: calc(100px + 30px) 0 calc(100px + 15px);
  background: #ffdb00;
  z-index: 1;
}

.p-top__service:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: transparent #ffdb00 transparent transparent;
  position: absolute;
  left: 0;
  top: -100px;
}

.p-top__service:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100vw 100px 0;
  border-color: transparent #ffdb00 transparent transparent;
  position: absolute;
  left: 0;
  bottom: -100px;
}

.p-top__service > .inner {
  padding: 30px 0;
  width: 60vw;
  margin: 0 auto;
  text-align: center;
}

.p-top__service .ttl {
  width: 8vw;
  position: absolute;
  right: 5vw;
  top: 45px;
  z-index: 1;
}

.p-top__service .ttl-sub {
  display: inline-block;
  font-size: 0;
  text-align: center;
}

.p-top__service .ttl-sub strong {
  font-size: 1.5625vw;
  position: relative;
  display: inline-block;
  background: url(../images/slash_w.svg) repeat-x center bottom;
  background-size: .75em;
}

.p-top__service .ttl-sub strong:first-of-type {
  padding-left: .5em;
}

.p-top__service .ttl-sub strong:last-of-type {
  padding-right: .5em;
}

.p-top__service .ttl-sub span {
  font-size: 1.1rem;
  font-weight: 400;
  display: block;
  text-align: right;
  margin: 5px 0 0;
}

.p-top__service figcaption {
  font-size: 1.40625vw;
  font-weight: 700;
  margin: 0 0 15px;
}

.p-top__service .sevice01 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 30px 0 0;
}

.p-top__service .sevice01 li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 30%;
  -ms-flex: 0 1 30%;
  flex: 0 1 30%;
}

.p-top__service .sevice02 {
  margin: 45px 0;
}

.p-top__service .sevice03 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.p-top__service .sevice03 li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 17.5%;
  -ms-flex: 0 1 17.5%;
  flex: 0 1 17.5%;
}

.p-top__service .btn {
  text-align: center;
  margin: 60px 0 0;
}



/* =========================================================
   Page: Top Merit
========================================================= */
.p-top__merit {
  position: relative;
  padding: 60px 0 0;
  margin: 30px 0 40px;
}

.p-top__merit .ttl {
  width: 13.6vw;
  position: absolute;
  right: 5vw;
  top: 90px;
  z-index: 1;
}

.p-top__merit .img {
  width: 69.5vw;
  padding: 0 16vw 0 0;
  margin: 0 0 0 auto;
}

.p-top__merit .copy {
  position: absolute;
  left: 0;
  top: 120px;
}

.p-top__merit .copy li {
  margin: 0 0 15px;
}

.p-top__merit .copy07 img {
  width: 30.79vw;
}

.p-top__merit .copy08 img {
  width: 27.11vw;
}

.p-top__merit .ttl-sub {
  font-size: 0;
  text-align: center;
  margin: 30px 0 0;
}

.p-top__merit .ttl-sub strong {
  font-size: 1.5625vw;
  position: relative;
  display: inline-block;
  background: url(../images/slash.svg) repeat-x center bottom;
  background-size: .75em;
  padding: 0 .5em;
}

.p-top__merit .merits {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 2.5vw;
}

.p-top__merit .merits .block {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 calc(100% / 4);
  -ms-flex: 0 1 calc(100% / 4);
  flex: 0 1 calc(100% / 4);
  padding: 0 2.5vw;
  margin: 45px 0 0;
}

.p-top__merit .merits h3 {
  font-size: 1.40625vw;
  line-height: 1.35;
  position: relative;
  padding: 0 0 0 2.75em;
}

.p-top__merit .merits h3 img {
  width: 2.25em;
  position: absolute;
  bottom: 50%;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  left: 0;
}

.p-top__merit .merits p {
  font-size: 1.25vw;
  margin: 15px 0 0;
}

.p-top__merit .merits li {
  font-size: 1.01562vw;
  font-weight: 700;
  opacity: .5;
}

.p-top__merit .btn {
  text-align: center;
  margin: 45px 0 0;
}

/* Merit：横帯ヒーロー画像 */
.merit-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw); /* 全幅化テク */
  margin-right: calc(50% - 50vw);
}

.merit-hero img {
  width: 100%;
  height: 38vw;        /* 横帯の高さ感（調整OK：32〜42） */
  max-height: 420px;   /* PCでの上限 */
  object-fit: cover;
  display: block;
}

/* Merit：動画3カラム（縦動画対応） */
.merit-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 15px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.merit-videos .video video {
  width: 100%;
  aspect-ratio: 9 / 16;   /* ← 縦動画 */
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* SP：横3のまま、さらに詰める */
@media (max-width: 980px) {
  .merit-videos {
    gap: 8px;
    padding: 12px 10px 0;
  }

  .merit-videos .video video {
    border-radius: 4px;
  }
}

/* =====================================
   斜線付きタイトル（上品・共通）
===================================== */
.ttl-slash{
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.4;
}

.ttl-slash span{
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.ttl-slash strong{
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 800;
  background: url(../images/slash.svg) repeat-x center bottom;
  background-size: .75em;
  padding: 0 .4em;
}




/* =========================================================
   p-top__merit：統合（重大発表）カード
   ※セクション限定で他へ波及しない
========================================================= */

/* ===== 一時的に非表示（merit 枠装飾） =====
section.p-top__merit .benefit-announce{
  width: min(920px, calc(100% - 30px));
  margin: 18px auto 10px;
  padding: 18px 16px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

section.p-top__merit .benefit-announce::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:4px; height:100%;
  background: rgba(255,219,0,.95);
}

===== */

section.p-top__merit .benefit-announce__badge{
  display:inline-block;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.90);
  color:#fff;
  margin: 0 0 10px;
}

section.p-top__merit .benefit-announce__title{
  font-size: 2.0rem;
  line-height: 1.35;
  font-weight: 900;
  margin: 0 0 12px;
}

section.p-top__merit .benefit-announce__title span{
  background: linear-gradient(transparent 62%, rgba(255,219,0,.55) 62%);
  padding: 0 .15em;
}

section.p-top__merit .benefit-announce__hero{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: rgba(255,219,0,.08);
}

section.p-top__merit .benefit-announce__sub{
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 8px;
}

section.p-top__merit .benefit-announce__name{
  margin: 0 0 10px;
  line-height: 1.35;
}

section.p-top__merit .benefit-announce__name strong{
  font-size: 1.9rem;
  font-weight: 900;
  display: inline-block;
}

section.p-top__merit .benefit-announce__name small{
  display:block;
  font-size: 1.2rem;
  font-weight: 700;
  opacity: .85;
  margin-top: 2px;
}

section.p-top__merit .benefit-announce__price{
  margin: 10px 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

section.p-top__merit .benefit-announce__price li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.05);
}

section.p-top__merit .benefit-announce__price .k{
  width: 4.2em;
  flex: 0 0 auto;
  font-weight: 900;
}

section.p-top__merit .benefit-announce__price .v{
  font-weight: 800;
  line-height: 1.45;
}

section.p-top__merit .benefit-announce__price .is-hot{
  background: rgba(0,0,0,.92);
  color: #fff;
  border-color: rgba(0,0,0,.92);
}

section.p-top__merit .benefit-announce__price .is-hot b{
  color:#ffdb00;
}

section.p-top__merit .benefit-announce__note{
  margin: 8px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.55;
}

section.p-top__merit .benefit-announce__value{
  margin-top: 14px;
}

section.p-top__merit .benefit-announce__conclusion{
  margin: 0 0 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,248,220,.95);
  border: 1px solid rgba(0,0,0,.05);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.55;
}

section.p-top__merit .benefit-announce__conclusion .label{
  display:inline-block;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.90);
  color:#fff;
  margin-right: 8px;
}

section.p-top__merit .benefit-announce__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

section.p-top__merit .benefit-announce__card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
}

section.p-top__merit .benefit-announce__card h4{
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 900;
}

section.p-top__merit .benefit-announce__card ul,
section.p-top__merit .benefit-announce__card ol{
  margin: 0;
  padding-left: 1.2em;
}

section.p-top__merit .benefit-announce__card li{
  font-size: 1.35rem;
  line-height: 1.65;
  margin-top: 8px;
}

section.p-top__merit .benefit-announce__card li:first-child{
  margin-top: 0;
}

section.p-top__merit .benefit-announce__closing{
  margin: 12px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  opacity: .9;
}

/* 締め文言：センター固定（親がleftでも勝つ） */
section.p-top__merit .benefit-announce__closing{
  text-align: center;
  width: 100%;
}

/* SP最適化：さらに読みやすく */
@media (max-width:980px){
  section.p-top__merit .benefit-announce{
    width: calc(100% - 30px);
    padding: 16px 14px 14px;
  }
  section.p-top__merit .benefit-announce__title{
    font-size: 1.9rem;
  }
  section.p-top__merit .benefit-announce__grid{
    grid-template-columns: 1fr;
  }
  section.p-top__merit .benefit-announce__card li{
    font-size: 1.45rem;
  }
  section.p-top__merit .benefit-announce__price .k{
    width: 3.6em;
  }
}



/* =========================================================
   Top Merit: 3カラム化 + センター寄せ + カード枠
========================================================= */
@media (min-width: 981px) {

  /* ブロック全体をセンター寄せ（余白と段組みの整流） */
  .p-top__merit .merits{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* ← センター寄せの要 */
    gap: 30px;                 /* カラム間の余白 */
    padding: 0 5vw;            /* 端の余白（お好みで） */
    margin: 45px auto 0;
    max-width: 1200px;         /* 横幅を締めて中央で綺麗に */
  }

  /* 3カラム */
  .p-top__merit .merits .block{
    flex: 0 1 calc((100% - 60px) / 3); /* gap 30px×2 = 60px */
    max-width: 360px;                  /* 伸びすぎ防止（お好みで） */
    margin: 0;                         /* 既存のmargin打ち消し */
    padding: 26px 26px 28px;
    background: #fff;                  /* ← 写真カード風の白地 */
    border: 1px solid rgba(0,0,0,.08); /* うっすら枠 */
    border-radius: 12px;               /* 角丸 */
    box-shadow: 0 14px 30px rgba(0,0,0,.12); /* 綺麗な影 */
  }

  /* 見出しの詰め（カード内で綺麗に） */
  .p-top__merit .merits h3{
    padding-left: 2.75em;  /* 既存設計を維持 */
    margin-bottom: 10px;
  }

  /* 箇条書き（p）の行間を少し整える */
  .p-top__merit .merits p{
    margin-top: 10px;
  }

}

/* SPも「枠（カード）」だけは効かせる（1カラムのまま） */
@media (max-width: 980px) {
  .p-top__merit .merits .block{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    padding: 18px 18px 20px;
  }
}

/* =========================================================
   Page: Top online
========================================================= */
.p-top__online {
  position: relative;
  padding: 60px 0 0;
  margin: 120px 0 40px;
}

.p-top__online .ttl {
  width: 13.6vw;
  position: absolute;
  right: 5vw;
  top: 90px;
  z-index: 1;
}

.p-top__online .img {
  width: 69.5vw;
  padding: 0 16vw 0 0;
  margin: 0 0 0 auto;
}

/* =========================================
   p-top__online video support
========================================= */
.p-top__online .img video{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像と同じトリミング */
  display: block;
}


.p-top__online .copy {
  position: absolute;
  left: 0;
  top: 120px;
}

.p-top__online .copy li {
  margin: 0 0 15px;
}

.p-top__online .copy07 img {
  width: 30.79vw;
}

.p-top__online .copy08 img {
  width: 27.11vw;
}

.p-top__online .ttl-sub {
  font-size: 0;
  text-align: center;
  margin: 30px 0 0;
}

.p-top__online .ttl-sub strong {
  font-size: 1.5625vw;
  position: relative;
  display: inline-block;
  background: url(../images/slash.svg) repeat-x center bottom;
  background-size: .75em;
  padding: 0 .5em;
}

.p-top__online .merits {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 2.5vw;
}

.p-top__online .merits .block {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 calc(100% / 4);
  -ms-flex: 0 1 calc(100% / 4);
  flex: 0 1 calc(100% / 4);
  padding: 0 2.5vw;
  margin: 45px 0 0;
}

.p-top__online .merits h3 {
  font-size: 1.40625vw;
  line-height: 1.35;
  position: relative;
  padding: 0 0 0 2.75em;
}

.p-top__online .merits h3 img {
  width: 2.25em;
  position: absolute;
  bottom: 50%;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  left: 0;
}

.p-top__online .merits p {
  font-size: 1.25vw;
  margin: 15px 0 0;
}

.p-top__online .merits li {
  font-size: 1.01562vw;
  font-weight: 700;
  opacity: .5;
}

.p-top__online .btn {
  text-align: center;
  margin: 45px 0 0;
}


/* =========================================================
   Top online: 3カラム化 + センター寄せ + カード枠
========================================================= */
@media (min-width: 981px) {

  /* ブロック全体をセンター寄せ（余白と段組みの整流） */
  .p-top__online .merits{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* ← センター寄せの要 */
    gap: 30px;                 /* カラム間の余白 */
    padding: 0 5vw;            /* 端の余白（お好みで） */
    margin: 45px auto 0;
    max-width: 1200px;         /* 横幅を締めて中央で綺麗に */
  }

  /* 3カラム */
  .p-top__online .merits .block{
    flex: 0 1 calc((100% - 60px) / 3); /* gap 30px×2 = 60px */
    max-width: 360px;                  /* 伸びすぎ防止（お好みで） */
    margin: 0;                         /* 既存のmargin打ち消し */
    padding: 26px 26px 28px;
    background: #fff;                  /* ← 写真カード風の白地 */
    border: 1px solid rgba(0,0,0,.08); /* うっすら枠 */
    border-radius: 12px;               /* 角丸 */
    box-shadow: 0 14px 30px rgba(0,0,0,.12); /* 綺麗な影 */
  }

  /* 見出しの詰め（カード内で綺麗に） */
  .p-top__online .merits h3{
    padding-left: 2.75em;  /* 既存設計を維持 */
    margin-bottom: 10px;
  }

  /* 箇条書き（p）の行間を少し整える */
  .p-top__online .merits p{
    margin-top: 10px;
  }

}

/* SPも「枠（カード）」だけは効かせる（1カラムのまま） */
@media (max-width: 980px) {
  .p-top__online .merits .block{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    padding: 18px 18px 20px;
  }
}

/* =========================================================
   Footer: Black / Center / Social / Pagetop
========================================================= */

/* footer本体 */
.l-footer{
  background: #000;
  color: #fff;
  text-align: center;
  padding: 28px 0 28px;
  margin: 0;                 /* 既存の calc(...) を無効化 */
}

/* 黄色三角を消す */
.l-footer:before{
  display: none;
}

/* リンク色 */
.l-footer a{
  color: #fff;
  text-decoration: none;
  opacity: .85;
}
.l-footer a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* SNSアイコン行（HTML側で ul がある想定） */
.l-footer ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
}

/* 著作権行 */
.l-footer .copyright{
  font-size: 1.2rem;
  opacity: .85;
  margin: 0 0 8px;
}

/* クレジット行（《Web Design:…》） */
.l-footer .credit{
  font-size: 1.2rem;
  opacity: .85;
}

/* 右下の↑ボタン（画像のような枠） */
.l-footer .pagetop{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,.75);
  background: transparent;
  opacity: 1;                /* is-scroll 制御があっても常時表示に寄せる */
  transform: none;
}

/* 既存の矢印（:after）を白く見せる */
.l-footer .pagetop .c-btn--pagetop:after{
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

/* hover */
.l-footer .pagetop:hover{
  background: rgba(255,255,255,.08);
}

/* SP調整 */
@media (max-width: 980px){
  .l-footer{
    padding: 50px 15px 30px;
  }
  .l-footer .pagetop{
    right: 15px;
    bottom: 15px;
    width: 52px;
    height: 52px;
  }
}

.footer-sns a{
  transition: opacity .2s ease, transform .2s ease;
}
.footer-sns a:hover{
  transform: translateY(-2px);
}

/* footer SNS：公式アイコン（サイズ統一・少し大きめ） */
.l-footer .footer-sns{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;              /* 少し余白アップ */
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.l-footer .footer-sns a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;            /* タップ領域拡大 */
  height: 52px;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}

.l-footer .footer-sns a:hover{
  opacity: 1;
  transform: translateY(-2px);
}

.l-footer .footer-sns img{
  width: 28px;            /* ← 実アイコンサイズ */
  height: 28px;
  display: block;
  object-fit: contain;   /* PNG / SVG 混在対策 */
}

/* TikTokだけ少し大きくする */
.l-footer .footer-sns li.is-tiktok img{
  width: 42px;   /* 通常28px → TikTokのみ大きく */
  height: 42px;
}

/* =========================================================
   Inview
========================================================= */
.p-top .is-inview1 {
  -webkit-transition: opacity .5s linear 0s, -webkit-transform .75s cubic-bezier(.165, .84, .44, 1) 0s;
  transition: opacity .5s linear 0s, -webkit-transform .75s cubic-bezier(.165, .84, .44, 1) 0s;
  transition: opacity .5s linear 0s, transform .75s cubic-bezier(.165, .84, .44, 1) 0s;
  transition: opacity .5s linear 0s, transform .75s cubic-bezier(.165, .84, .44, 1) 0s, -webkit-transform .75s cubic-bezier(.165, .84, .44, 1) 0s;
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.p-top .is-inview1.is-out {
  opacity: 0;
  -webkit-transform: translate(0, 60px);
  -ms-transform: translate(0, 60px);
  transform: translate(0, 60px);
}

.p-top .is-inview2 {
  overflow: hidden;
  -webkit-transition: width .75s cubic-bezier(.785, .135, .15, .86) 175ms;
  transition: width .75s cubic-bezier(.785, .135, .15, .86) 175ms;
}

.p-top .is-inview2.copy01 {
  width: 33.99vw;
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
}

.p-top .is-inview2.copy02 {
  width: 38.05vw;
}

.p-top .is-inview2.copy03 {
  width: 29.145vw;
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
}

.p-top .is-inview2.copy04 {
  width: 37.19vw;
}

.p-top .is-inview2.copy05 {
  width: 37.66vw;
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
}

.p-top .is-inview2.copy06 {
  width: 32.27vw;
}

.p-top .is-inview2.copy07 {
  width: 30.79vw;
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
}

.p-top .is-inview2.copy08 {
  width: 27.11vw;
}

.p-top .is-inview2.is-out {
  width: 0;
}

/* =========================================================
   Components
========================================================= */
.c-btn {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
  background: #000;
  color: #fff;
  padding: 1.25em 2em;
  -webkit-transition: background .25s linear 0s;
  transition: background .25s linear 0s;
}

.c-btn:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: .5em;
  height: .5em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 0 0 0 1em;
}

.c-btn:hover {
  background: #404040;
}

.c-btn--mv {
  font-size: 1.2rem;
}

.c-btn--pagetop {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.c-btn--pagetop:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -5px;
}

/* LINEで相談するボタンのみ色変更 */
.p-top__whats .btn .c-btn {
  background: #06c755;   /* LINEグリーン */
  color: #fff;
}

.p-top__whats .btn .c-btn:hover {
  background: #04b34f;
}

/* Merit内：LINEで相談するボタンも同じ色に（他へ波及させない） */
.p-top__merit .btn .c-btn {
  background: #06c755;   /* LINEグリーン */
  color: #fff;
}

.p-top__merit .btn .c-btn:hover {
  background: #04b34f;
}


/* =========================================================
   Utilities
========================================================= */
.u-pc-view {
  display: block !important;
}

.u-sp-view {
  display: none !important;
}

.u-pc-view-in {
  display: inline !important;
}

.u-sp-view-in {
  display: none !important;
}

.u-pc-view-ib {
  display: inline-block !important;
}

.u-sp-view-ib {
  display: none !important;
}

.u-fs0 {
  font-size: 0;
}

/* =========================================================
   Media Query
========================================================= */
@media (max-width:980px) {
  a[href^="tel:"] {
    pointer-events: auto;
    text-decoration: underline;
    cursor: pointer;
  }

  .l-footer {
    margin: calc(45px + 30px) 0 0;
    padding: 30px 15px;
  }

  .l-footer:before {
    border-width: 0 0 45px 100vw;
    top: -45px;
  }

  .l-footer .desc {
    text-align: left;
  }

  .l-footer ul.btns {
    margin: 15px 0;
  }

  .l-footer .privacy {
    margin: 15px auto;
  }

  .p-top__mv {
    background: #ffdb00;
  }

  .p-top__mv:before {
    display: none;
  }

  .p-top__mv:after {
    display: none;
  }

  .p-top__mv .logo span {
    width: 17.5vw;
    left: 4vw;
    top: 2vh;
  }

  .p-top__mv .logo:before {
    display: none;
  }

  .p-top__mv .logo:after {
    border-width: 305px 35vw 0 0;
    z-index: 2;
  }

  .p-top__mv .img {
    height: 95vw;
    background: red;
  }

  .p-top__mv .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .p-top__mv .txt {
    position: relative;
    right: auto;
    bottom: auto;
    padding: 0 15px 5px;
    margin: -45px 0 0;
  }

  .p-top__mv .txt:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 0 0 100vw;
    border-color: transparent transparent transparent #ffdb00;
    position: absolute;
    left: 0;
    top: 0;
  }

  .p-top__mv .txt:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 100vw 0 0;
    border-color: #ffdb00 transparent transparent transparent;
    position: absolute;
    left: 0;
    bottom: -45px;
  }

  .p-top__mv .txt .catch01 {
    width: 240px;
    position: relative;
  }

  .p-top__mv .txt .catch02 {
    width: 180px;
    margin: 15px 0 10px;
  }

  .p-top__mv .txt .desc {
    font-size: 1.6rem;
  }

  .p-top__mv .blanks li {
    display: block;
    margin: 0 0 5px;
  }


  /**************************************** SP：Top whats セクション ***************************************/
  
  .p-top__whats .ttl {
    width: 65px;
    right: 0;
  }

  .p-top__whats .img {
    width: auto;
    padding: 0 20px 0 15px;
    margin-top: -20px
  }

  .p-top__whats .copy {
    position: static;
  }

  .p-top__whats .copy li {
    margin: 10px 0 0;
  }

  .p-top__whats .copy01 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__whats .copy02 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__whats .desc {
    font-size: 1.6rem;
    width: auto;
    margin: 20px 15px;
  }



  /**************************************** SP：Top point セクション ***************************************/


  .p-top__point {
    margin: 15px 0 0;
  }

  .p-top__point .ttl {
    width: 65px;
    left: 0;
  }

  .p-top__point .img {
    width: auto;
    padding: 0 15px 0 45px;
  }

  .p-top__point .copy {
    position: static;
  }

  .p-top__point .copy li {
    margin: 10px 0 0 auto;
  }

/* SP：2024 - 1st（his-clum01）を左寄せ */

  .p-top__point--first .copy li.copy01 {
    margin-left: 125px;   /* 左端から20px */
    margin-right: auto; /* auto を解除 */
  }

  .p-top__point--second .copy li.copy01 {
    margin-left: 70px;   /* 左端から20px */
    margin-right: auto; /* auto を解除 */
  }

  
  .p-top__point .copy03 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__point .copy04 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__point .ttl-sub {
    margin: 15px 0 0;
  }

  .p-top__point .ttl-sub strong {
    font-size: 1.8rem;
  }

  .p-top__point .ttl-sub strong:nth-of-type(1) {
    padding-right: .5em;
  }

  .p-top__point .ttl-sub strong:nth-of-type(2) {
    padding-left: .5em;
  }

  .p-top__point .points {
    display: block;
    padding: 0 15px;
  }

  .p-top__point .points .block {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    padding: 0;
    margin: 30px 0 0;
  }

  .p-top__point .points h3 {
    font-size: 1.8rem;
  }

  .p-top__point .points p {
    font-size: 1.6rem;
  }

/* SP：POINT（first）のTTL調整 */

  .p-top__point--first .ttl {
    left: 15px;      /* 左端15px空白 */
    width: 37px;     /* 既存65px → 少し小さく */
  }



  /* ① 公式LINEボタンと次セクション（Top-2画像）の縦空白を詰める */
  .p-top__whats .btn {
    margin: 20px 0 0;      /* 既存 30px を詰める（必要なら 15〜25で微調整） */
  }

  .p-top__point--first {
    margin-top: 8px;       /* 既存 .p-top__point の 15px をさらに詰める */
    padding-top: 10px;     /* 既存 30px の“上の間”を詰める（ここが効きます） */
  }

  /* ② Top-2.svg を「左20px / 右15px」で大きく見せる */
  .p-top__point--first .img {
    padding: 0 1px 0 20px;  /* 既存(0 15px 0 45px)を差し替え */
    width: auto;             /* 念のため（既存通りでOK） */
  }

  .p-top__point--first .img img {
    width: 100%;
    max-width: none;
  }


/* 2026：video を img と同じ扱いにする */
.p-top__point--2026 .img video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


  /* 2026：動画ブロックは左右15px、できるだけ大きく */
  .p-top__point--2026 .img{
    padding: 0 15px;     /* 左右15px */
    width: auto;         /* 既存の width:auto に寄せる */
  }

  /* 高さを確保して「最大化」感を出す（調整OK） */
  .p-top__point--2026 .img video{
    height: 52vw;        /* 例：横幅に比例して大きめ表示 */
    max-height: 320px;   /* 上限（不要なら削除OK） */
  }

  /* 2026のcopyは既存SPと同じ流れでOK（必要なら微調整） */



  /* 2026：copy全体を左基準に */
  .p-top__point--2026 .copy {
    left: 0;
    right: auto;
    padding-left: 15px;   /* 左余白15px */
    padding-right: 15px;  /* 右余白15px（テキストの呼吸） */
    text-align: left;
  }

  /* 2026：liの右寄せを解除 */
  .p-top__point--2026 .copy li {
    margin-left: 0;
    margin-right: auto;   /* 既存 auto を打ち消し */
  }

  /* 2026：年号（copy01）も左に揃える */
  .p-top__point--2026 .copy li.copy01 {
    margin-left: 0;
  }

/**************************************** SP：Top online セクション ***************************************/


/* SPだけ：onlineを消して、2026を出す */

  .p-top__online { display: none; }
  .p-top__point--2026 { display: block; }



/**************************************** SP：Top service セクション ***************************************/
  .p-top__service {
    margin: calc(45px + 30px) 0 calc(45px + 15px);
  }

  .p-top__service:before {
    border-width: 45px 100vw 0 0;
    top: -45px;
  }

  .p-top__service:after {
    border-width: 0 100vw 45px 0;
    bottom: -45px;
  }

  .p-top__service > .inner {
    width: auto;
    padding: 15px;
  }

  .p-top__service .ttl {
    width: 65px;
    right: 0;
    top: 0;
  }

  .p-top__service .ttl-sub strong {
    font-size: 1.8rem;
    padding: 0 .5em;
  }

  .p-top__service figcaption {
    font-size: 1.6rem;
    margin: 0 0 5px;
  }

  .p-top__service .sevice01 {
    display: block;
    max-width: 200px;
    margin: 0 auto;
  }

  .p-top__service .sevice01 li {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    margin: 30px 0 0;
  }

  .p-top__service .sevice02 {
    margin: 30px 0;
  }

  .p-top__service .sevice02 .scrl {
    overflow-x: auto;
    padding: 0 0 15px;
  }

  .p-top__service .sevice02 .scrl::-webkit-scrollbar-track {
    background: 0 0;
  }

  .p-top__service .sevice02 .scrl::-webkit-scrollbar-thumb {
    background: #000;
  }

  .p-top__service .sevice02 .scrl::-webkit-scrollbar-track-piece {
    background: rgba(255, 255, 255, .5);
  }

  .p-top__service .sevice02 .scrl::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .p-top__service .sevice02 .scrl img {
    width: 640px;
  }

  .p-top__service .sevice03 {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
  }

  .p-top__service .sevice03 li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 calc(100% / 3);
    -ms-flex: 0 1 calc(100% / 3);
    flex: 0 1 calc(100% / 3);
    padding: 5px;
  }

  .p-top__service .btn {
    margin: 30px 0 0;
  }

  .p-top__payment {
    padding: 0;
  }

  .p-top__payment .ttl {
    width: 65px;
    left: 0;
    top: 0;
  }

  .p-top__payment .img {
    width: auto;
    padding: 0 15px 0 45px;
  }

  .p-top__payment .copy {
    position: static;
  }

  .p-top__payment .copy li {
    margin: 10px 0 0 auto;
  }

  .p-top__payment .copy05 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__payment .copy06 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__payment .ttl-sub {
    margin: 20px 0 0;
  }

  .p-top__payment .ttl-sub strong {
    font-size: 1.8rem;
  }

  .p-top__payment .ttl-sub strong:nth-of-type(1) {
    padding-right: .5em;
  }

  .p-top__payment .ttl-sub strong:nth-of-type(2) {
    padding-left: .5em;
  }

  .p-top__payment .desc {
    font-size: 1.6rem;
    text-align: left;
    width: auto;
    margin: 15px;
  }

  .p-top__payment .btn {
    margin: 20px 0 0;
  }

  .p-top__merit {
    padding: 15px 0 0;
    margin: 45px 0 0;
  }

  .p-top__merit .ttl {
    width: 98px;
    right: 0;
    top: 0;
  }

  .p-top__merit .img {
    width: auto;
    padding: 0 45px 0 15px;
  }

/* ---- 危険：p-top__merit を直指定しており、service内のp-top__meritにも効いてしまうため一旦無効化 ----
.p-top__merit {
  position: relative;
}

.p-top__merit .copy {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  width: calc(100% - 60px);
}

  .p-top__merit .copy li {
    margin: 10px 0 0;
  }

---- */

  .p-top__merit .copy07 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__merit .copy08 img {
    width: 65vw;
    max-width: 300px;
  }

  .p-top__merit .ttl-sub {
    margin: 20px 0 0;
  }

  .p-top__merit .ttl-sub strong {
    font-size: 1.8rem;
  }

  .p-top__merit .merits {
    display: block;
    padding: 0 15px;
  }

  .p-top__merit .merits .block {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    padding: 0;
    margin: 30px 0 0;
  }

  .p-top__merit .merits h3 {
    font-size: 1.8rem;
  }

  .p-top__merit .merits p {
    font-size: 1.6rem;
  }

  .p-top__merit .merits li {
    font-size: 1.2rem;
  }

  .p-top__merit .btn {
    margin: 30px 0 0;
  }

  .p-top .is-inview2.copy01 {
    width: 65vw;
  }

  .p-top .is-inview2.copy02 {
    width: 65vw;
  }

  .p-top .is-inview2.copy03 {
    width: 65vw;
  }

  .p-top .is-inview2.copy04 {
    width: 65vw;
  }

  .p-top .is-inview2.copy05 {
    width: 65vw;
  }

  .p-top .is-inview2.copy06 {
    width: 65vw;
  }

  .p-top .is-inview2.copy07 {
    width: 65vw;
  }

  .p-top .is-inview2.copy08 {
    width: 65vw;
  }

  .p-top .is-inview2.is-out {
    width: 0;
  }

  .c-btn {
    font-size: 1.6rem;
  }

  .c-btn--mv {
    font-size: .8rem;
    line-height: 1.35;
    padding: 0;
    text-align: center;
    min-width: 60px;
    min-height: 55px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .c-btn--mv:after {
    display: none;
  }

  .u-pc-view {
    display: none !important;
  }

  .u-sp-view {
    display: block !important;
  }

  .u-pc-view-in {
    display: none !important;
  }

  .u-sp-view-in {
    display: inline !important;
  }

  .u-pc-view-ib {
    display: none !important;
  }

  .u-sp-view-ib {
    display: inline-block !important;
  }
}

/* =========================
   SP：役割別copy（受け皿）
   ※汎用 .copy を触らず、専用クラスだけに適用する
========================= */
@media (max-width:980px) {

  /* =========================
     学べること：テキストカード（SPのみ）
     ・結論カードのみ背景を微変化
     ・行間／上下余白をコンパクト化
  ========================= */
  section.p-top__service .copy--learn {
    margin: 12px 15px 0;
    padding: 0;
    list-style: none;
  }

  section.p-top__service .copy--learn .learn-card {
    background: rgba(255,255,255,0.94);
    border-radius: 10px;
    padding: 12px 14px;          /* ← 上下を詰めた */
    margin-top: 10px;            /* ← カード間も詰めた */
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    line-height: 1.32;           /* ← 行間を少し詰める */

    /* ゆっくり出る */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
  }

  section.p-top__service .copy--learn .learn-card.is-inview1 {
    opacity: 1;
    transform: translateY(0);
  }

  /* テキスト */
  section.p-top__service .copy--learn .learn-card__text {
    font-size: 17px;             /* ← わずかに締める */
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0;
  }

  /* =========================
     結論カード（最上段だけ強調）
  ========================= */
  section.p-top__service .copy--learn .learn-card--conclusion {
    background: rgba(255, 248, 220, 0.95); /* ← 白より少しだけ色味 */
    padding: 14px 14px;                   /* ← 他より+2pxだけ余裕 */
  }

  section.p-top__service .copy--learn .learn-card__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    padding: 3px 5px;
    border-radius: 999px;
    margin-bottom: 6px;                   /* ← 詰めた */
    background: rgba(0,0,0,0.88);
    color: #fff;
  }

  /* ディレイ（ゆっくり感は維持） */
  section.p-top__service .copy--learn .learn-card:nth-child(1){ transition-delay: .05s; }
  section.p-top__service .copy--learn .learn-card:nth-child(2){ transition-delay: .12s; }
  section.p-top__service .copy--learn .learn-card:nth-child(3){ transition-delay: .19s; }
  section.p-top__service .copy--learn .learn-card:nth-child(4){ transition-delay: .26s; }


  /* メリット（meritセクション内） */


  /* =========================
   メリット：benefit（SP専用）
   ・画像の上に重ねる（PCには影響なし）
   ・section.p-top__merit に限定（service内の同名div等へ波及しない）
========================= */


  section.p-top__merit {
    position: relative;
  }

  section.p-top__merit .copy.copy--benefit {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 2;
    width: calc(100% - 60px); /* 左15 + 右45(画像の右余白) を考慮 */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  section.p-top__merit .copy.copy--benefit li {
    margin: 10px 0 0;
  }

  section.p-top__merit .copy.copy--benefit li:first-child {
    margin-top: 0;
  }

  section.p-top__merit .copy.copy--benefit img {
    display: block;
    width: 100%;
    height: auto;
  }

 /* =========================
     merit：benefit コピー微調整（SP）
     ・文字を少し小さく
     ・行間を読みやすく詰める
  ========================= */

  section.p-top__merit .copy.copy--benefit li {
    line-height: 0.5;          /* ← 行間を締める（既定よりやや詰め） */
  }

  section.p-top__merit .copy.copy--benefit img {
    transform: scale(0.85);     /* ← 全体を少しだけ小さく */
    transform-origin: left top; /* ← 左基準で縮小（ズレ防止） */
  }



  /* =========================
     p-top__merit：カード可読性改善（SP）
  ========================= */

  /* カード全体：余白を詰めて読みやすく */
  section.p-top__merit .merits .block{
    padding: 16px 16px 18px;     /* 既存より少しコンパクト */
    margin-top: 18px;            /* カード間隔を詰める */
  }

  /* 見出し：少し締める */
  section.p-top__merit .merits h3{
    font-size: 1.7rem;           /* 1.8rem → 少しだけ小さく */
    line-height: 1.25;
    margin-bottom: 10px;
  }

  /* 本文：行間を最適化 */
  section.p-top__merit .merits p{
    font-size: 1.5rem;           /* 1.6rem → ほんの少し締める */
    line-height: 1.55;
    margin-top: 10px;
  }

  /* 箇条書き（li）：インデント＆行間を揃える */
  section.p-top__merit .merits ul,
  section.p-top__merit .merits ol{
    margin-top: 12px;
    padding-left: 0;
  }

  section.p-top__merit .merits li{
    font-size: 1.45rem;
    line-height: 1.6;
    opacity: 1;                  /* もし薄くなっていたら解除 */
    margin-top: 10px;
    padding-left: 1.1em;         /* ・の分だけ字下げ */
    text-indent: -1.1em;         /* 先頭の・だけ外に出す */
  }

  section.p-top__merit .merits li:first-child{
    margin-top: 0;
  }


  /* =========================================
     p-top__merit：SP おしゃれ装飾 + 可読性UP
     （PCには一切影響しない）
  ========================================= */

  /* セクション余白を少し整える */
  section.p-top__merit{
    padding-top: 18px;
  }

  /* カード：余白・角丸・影を上品に */
  section.p-top__merit .merits .block{
    position: relative;
    padding: 18px 16px 18px;
    margin-top: 18px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
    overflow: hidden;
  }

  /* おしゃれ装飾：左上の細いアクセント + 右下の柔らかい円 */
  section.p-top__merit .merits .block:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,219,0,.95), rgba(255,219,0,0));
    opacity: .9;
  }

  section.p-top__merit .merits .block:after{
    content:"";
    position:absolute;
    right:-26px;
    bottom:-26px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(255,219,0,.18);
    filter: blur(0.2px);
  }

  /* 見出し：読みやすく・詰める */
  section.p-top__merit .merits h3{
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 10px;
    padding-left: 0; /* 既存のアイコン前提で崩れるなら削除OK */
  }

  /* 本文（あれば） */
  section.p-top__merit .merits p{
    font-size: 1.5rem;
    line-height: 1.6;
    margin-top: 10px;
  }

  /* 箇条書き：スマホで最強に読みやすい形 */
  section.p-top__merit .merits ul,
  section.p-top__merit .merits ol{
    margin-top: 12px;
    padding: 0;
  }

  section.p-top__merit .merits li{
    font-size: 1.5rem;
    line-height: 1.75;          /* ← 読みやすさ最優先 */
    margin-top: 10px;

    /* ・を揃える */
    padding-left: 1.15em;
    text-indent: -1.15em;
  }

  section.p-top__merit .merits li:first-child{
    margin-top: 0;
  }

  /* =========================================
     左の「01/02/03」：バッジ化（おしゃれ＆省スペース）
     ※ .num が存在する前提（なければ後述）
  ========================================= */
  section.p-top__merit .merits .num{
    position: absolute;
    left: 14px;
    top: 14px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;

    background: rgba(0,0,0,.88);
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;

    box-shadow: 0 10px 18px rgba(0,0,0,.18);
  }

  /* タイトルをバッジ分だけ右へ */
  section.p-top__merit .merits h3{
    padding-left: 58px;
  }

  /* バッジが吹き出し線（縦線＋角）が残る場合は消す */
  section.p-top__merit .merits .num:before,
  section.p-top__merit .merits .num:after{
    display:none !important;
  }




}