:root {
  --black: #530D1D;
  --black2: #530d1d8a;
  --button: #C72443;
  --pink: #DD9499;
  --yellow: #E8A170;
  --gray: #FAF4F2;
  --gray2: #D5C8C9;
  --want1: #F37D7F;
  --want2: #ED9D97;
  --want3: #F38E6F;
  --want4: #EBA269;
  --red-opa: #F4DFDE;
  --border: #dd94998a;
  --padding-top-bottom: 20rem;
  --sp-pad: 10rem;
  --transition: 0.4s;
  --sp_inner: 5%;
  --in: 70%;
  --in-sp: 85%;
  --small-in: 100%;
  --letter: 0.01em;
  --letter2: 0.02em;
  --radius: 2rem;
  --radius2: 1rem;
  --radius3: 0.4rem;
  --gra: linear-gradient(to right, var(--pink) 0%, var(--yellow) 100%);
  --gra2: linear-gradient(to right, #df787f 0%, #ffbf86 100%);
  --gra3: linear-gradient(to right, #e65660 0%, #f7a258 100%);
}


/*--------------------------------------------

リセットCSS 

------------------------------------------------*/
a {
  text-decoration: none;
  color: revert;
  color: var(--black);
}

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

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

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

html:focus-within {
  scroll-behavior: smooth;
}


img,
picture {
  max-width: 100%;
  width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

html,
body {
  /* 上下の跳ね返り（バウンス）を無効化する */
  overscroll-behavior-y: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

* {
  letter-spacing: var(--letter2);
}

/*--------------------------------------------

ここからCSS 

------------------------------------------------*/
.sp {
  display: none;
}

.pc {
  display: block;
}


html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

main,
body {
  width: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: var(--letter2);
  font-family: "Outfit", "Zen Kaku Gothic New", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 文字の縁を滑らかにする */
  font-feature-settings: "palt";
  /* 文字の幅を自動で詰める（カーニング） */
  color: var(--black);
  position: relative;
  z-index: 100000;
  background: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-feature-settings: "palt";
  /* プロポーショナルメトリクスを有効化 */
}

/* --- 修正版：ページ遷移（transformを削除） --- */
body {
  opacity: 0;
  /* transform: translateY(15px); ← これを削除することでヘッダーが固定されます */
  transition: opacity 0.4s ease;
  background-color: #fff;
}

body.is-visible {
  opacity: 1;
}

body.is-fadeout {
  opacity: 0;
}

/* --- ヘッダー：スクロール前（基本設定） --- */
header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.8rem;
  z-index: 10000;
  background-color: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, height 0.4s ease;
  overflow: visible;
  /* 疑似要素（フェード幕）を見せるために */
}

/* --- スクロール後に背景と影を付ける --- */
header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.85) !important;
  /* 少し不透明度を上げる */

  /* 前回の影は薄く残す（全体の浮遊感のため） */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);

  /* Safari用のbackdrop-filter */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* ボケを少し強める */

  /* 前回の「border-bottom: 1px solid...」は削除！ */

  /* スクロール時の高さ調整（お好みで） */
  height: 8.8rem !important;
}

/* --- これが「境界線をぼかす」魔法のフェード幕 --- */
header.is-scrolled::after {
  content: "";
  position: absolute;
  bottom: -4rem;
  /* ヘッダーの下端から、さらに下へ伸ばす距離 */
  left: 0;
  width: 100%;
  height: 4rem;
  /* フェードさせる範囲の高さ */

  /* 上から下へ、白（磨りガラス）から透明へ溶け込ませるグラデーション */
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.85) 0%,
      /* ヘッダーと同じ色でスタート */
      transparent 100%
      /* 下に向かって完全に透明になる */
    );

  /* フェード部分にも磨りガラス効果をかけることで、後ろのコンテンツも一緒にぼかす */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  /* 文字の後ろに配置するためのz-index調整 */
  z-index: -1;

  /* 表示をふわっと滑らかにするtransition */
  transition: opacity 0.4s ease, bottom 0.4s ease;
  opacity: 1;
}

/* スクロールしていない時は、フェード幕を隠しておく */
header:not(.is-scrolled)::after {
  opacity: 0;
  bottom: 0;
}

main {
  overflow: clip;
  /* もし古いブラウザも気にするなら以下を併記 */
  display: flow-root;
  background: #fff;
}

.section {
  padding: var(--padding-top-bottom) 0;
  position: relative;
  z-index: 6;
}

.sec_inner {
  width: var(--in);
  margin: 0 auto;
}

.title {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 4rem;
}

.title .small {
  font-size: 2rem;
  display: block;
  font-weight: 500;
  color: var(--pink);
}

b {
  font-weight: bold;
}

.r {
  color: var(--button);
}

p {
  font-size: 1.8rem;
}


.button {
  display: inline-block;
  padding: 1.2em 5em;
  border: 1.2px solid var(--button);
  /* 少し線を細くして洗練させる */
  border-radius: 50rem;
  color: var(--button);
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  /* 最初は白地（または透明） */
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.5s ease,
    border-color 0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    /* 弾むような動き */
    box-shadow 0.5s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  /* わずかな影 */
}

/* じわ〜っとした光の演出 */
.button::before {
  content: "";
  position: absolute;
  top: 100%;
  /* 下から出現させる */
  left: 50%;
  width: 120%;
  height: 250%;
  background: var(--pink);

  /* --- ここが「今っぽい」ぼかしの魔法 --- */
  filter: blur(40px);
  /* 強烈にぼかすことで境界線を消し去る */
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  /* 最初は透明 */

  transition:
    transform 1.0s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease;
  transform: translate(-50%, 0) scale(0.5);
}

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

  /* ホバー時の挙動 */
  .button:hover {
    color: #fff;
    border-color: var(--pink);
    transform: translateX(-50%) translateY(0px);
    /* わずかに浮き上がる */
    box-shadow: 0 10px 25px rgba(255, 131, 163, 0.3);
    /* ピンクの光の影 */
  }

  .button:hover::before {
    opacity: 1;
    /* 下からじわっと中心まで競り上がってくる */
    transform: translate(-50%, -75%) scale(1.2);
  }

  .button:hover::after {
    background: url("../images/arrow-white.webp");
    background-size: cover;
  }
}

.button::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
  background: url("../images/arrow.webp");
  background-size: cover;
  width: 1.22rem;
  height: 2rem;
  transition: var(--transition);
}

.cta-button::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4.2rem;
  background: url("../images/arrow-white.webp");
  background-size: cover;
  width: 1.22rem;
  height: 2rem;
  transition: var(--transition);
}

.cta-button-box {
  width: 48%;
}

.cta-button-box .big {
  font-size: 3.6rem;
}

.cta-button-box p {
  color: var(--button);
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.4em;
  font-size: 2rem;
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--button);
  font-size: 2.4rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-radius: 40rem;
  padding: 1.6em 0;
  position: relative;
  overflow: hidden;

  box-shadow:
    /* 【層1：最外郭】最も明るく、細い光。縁をくっきりさせる */
    inset 0 0 1rem rgba(255, 255, 255, 1),

    /* 【層2：中間】外側から中へ、少し広めの光のブラー */
    inset 0 0 3rem rgba(255, 255, 255, 0.6),

    /* 【層3：深部】さらに大きく中へ、非常に薄い光の溶け込み */
    inset 0 0 6rem rgba(255, 255, 255, 0.3),

    /* 【外側】既存の軽い影（ボタンの立体感用） */
    0 4px 15px rgba(0, 0, 0, 0.1);
  isolation: isolate;
  /* z-indexの重なりを安定させる */
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s ease;
  cursor: pointer;
  text-decoration: none;
  /* aタグの場合の考慮 */
}

/* じわ〜っと広がるピンクの光 */
.cta-button::before {
  content: "";
  position: absolute;
  top: 120%;
  /* 最初はボタンの下に隠しておく */
  left: 50%;
  width: 120%;
  height: 300%;
  background: var(--gra3);

  /* 強烈なぼかしで「光の霧」を作る */
  filter: blur(50px);
  border-radius: 50%;
  z-index: -1;
  /* 文字の後ろ、背景色の上に配置 */
  opacity: 0;

  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease;
  transform: translate(-50%, 0) scale(0.5);
}

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

  /* ホバー時の挙動 */
  .cta-button:hover {
    /* ピンクの発光に合わせて外側の影も光らせる */
    box-shadow:
      inset 0 0 4rem 1rem rgba(255, 255, 255, 0.9),
      inset 0 0rem 1rem rgba(255, 255, 255, 1),
      0 0.5rem 2rem rgba(255, 131, 162, 0);
  }

  .cta-button:hover::before {
    opacity: 1;
    /* 下からじわ〜っと中央まで競り上がる */
    transform: translate(-50%, -85%) scale(1.2);
  }
}

/* アイコンなどが入っている場合の微調整 */
.cta-button i,
.cta-button span,
.cta-button img {
  position: relative;
  z-index: 1;
}

.cta-button img {
  width: 5rem;
  display: inline-block;
}

.big2 {
  font-size: 4rem;
  margin-right: -0.4rem;
}

/*--------------------------------------------


header


------------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.8rem;
  z-index: 10000;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}



header .logo {
  width: 24rem;
  position: absolute;
  top: 2.2rem;
  left: 8rem;
}

header nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96rem;
  position: absolute;
  top: 2.2rem;
  right: 50rem;
}

header nav ul a {
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
}

header nav ul a::after {
  content: "";
  background: url("../images/kira.webp");
  background-size: cover;
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: -0.5rem;
  left: -3.5rem;
}

header .cta-button {
  position: absolute;
  top: 1.4rem;
  right: 6rem;
  font-size: 1.6rem;
  padding: 1em 2em;
  box-shadow: inset 0 0 4rem 0.2rem rgba(255, 255, 255, 0.6), inset 0 0rem 1rem rgba(255, 255, 255, 1);
}

header .cta-button img {
  width: 3rem;
}

header .cta-button::after {
  right: 1.8rem;
  scale: 0.7;
  top: 46%;
}

header .cta-button {
  padding: 1em 3em;
  padding-left: 2em;
}

/*--------------------------------------------


top


------------------------------------------------*/
.top {
  background: url("../images/top-back.webp");
  background-size: cover;
  width: 100%;
  height: calc(100vh + 210rem);
}

.top .sec_inner {
  position: relative;
  z-index: 10;
}

.top-sec {
  width: 65%;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  height: 100vh;
}

.top-sec-sec {
  height: fit-content;
}

.top h1 {
  width: 66rem;
}


.top .cta-bottom {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  width: 65rem;
  scale: 0.75;
  margin-left: -12rem;
}

.top .king-wrap {
  width: 100%;
  scale: 0.9;
}

.top .cta-button-box {
  width: 100%;
  margin-top: 2rem;
  margin-left: 2rem;
}


.top .cta-button {
  font-size: 2.8rem;
}


.sepa-fv {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  right: 0rem;
  width: 70rem;
  z-index: -1;
}

/*--------------------------------------------


concept


------------------------------------------------*/
.concept {
  padding-top: 0rem;
  position: relative;
}


.concept .title {
  margin-bottom: 8rem;
}

.concept .box {
  background: var(--gra);
}

.concept h3 {
  font-size: 3.2rem;
  text-align: center;
  margin-top: 8rem;
  line-height: 2;
  margin-bottom: 12rem;
}


/* スライダー全体の余白調整 */
.slider {
  margin: 0 -2rem;
  margin-top: 8rem;
  padding-bottom: 4rem;
  /* padding: 2remの分、外側にはみ出させて位置を調整 */
}

.slider .slick-list {
  overflow: visible;
}

/* 各スライド（img-box）の設定 */
.slider .img-box {
  /* 4rem離すために、左右に2remずつ余白を作る */
  padding: 0 2rem;
  box-sizing: border-box;
  /* パディングを含めた幅計算にする */
  transition: transform 0.3s ease;
  /* 動きを滑らかにしたい場合 */
}

/* 偶数番目（2, 4, 6...枚目）を下にずらす */
.slider .slick-slide:nth-child(even) .img-box {
  transform: translateY(4rem);
}

/* 画像自体の見た目（念のため） */
.img-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius2);
}

.concept-1 {
  width: 30rem;
  display: inline-block;
  margin-right: 1rem;
  transform: translateY(1.5rem);
}

/*--------------------------------------------


want


------------------------------------------------*/
.want {
  position: relative;
  z-index: 5;
  margin-top: -20rem;
  padding-top: 4rem;
}

.want::after {
  content: "";
  width: 250rem;
  height: 250rem;
  border-radius: 50%;
  background: var(--gray);
  position: absolute;
  top: -24rem;
  left: -30rem;
  z-index: -1;
}

.want-wrap {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
  margin-top: 6.4rem;
}

.want-box {
  background: #fff;
  padding-bottom: 3.2rem;
  border-radius: var(--radius2);
  overflow: hidden;
}

.want-box h3 {
  font-size: 2.6rem;
  text-align: center;
  margin-top: 3.2rem;
}

.want-box p {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 1.6rem;
}

.box {
  display: inline-block;
  background: var(--pink);
  padding: 0.05em 0.4em 0;
  color: #fff;
  margin: 0.2em 0.2em;
}

.want-1 .box,
.want-1.cate {
  background: var(--want1);
}

.want-2 .box,
.want-2.cate {
  background: var(--want2);
}

.want-3 .box,
.want-3.cate {
  background: var(--want3);
}

.want-4 .box,
.want-4.cate {
  background: var(--want4);
}

/*--------------------------------------------


vision


------------------------------------------------*/
.vision {
  background: var(--gray);
  padding-top: 0;
}

.vision-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  margin-top: 6.4rem;
}

.vision-box-box {
  background: #fff;
  border-radius: var(--radius2);
  padding: 4rem;
  box-shadow: 0 0 20px #cc926026;
}

.vision-img-box {
  width: 120%;
  margin-left: -10%;
  margin-top: -12rem;
}

.vision-img-box h3 {
  background: var(--want1);
  color: #fff;
  font-size: 2.8rem;
  text-align: center;
  display: block;
  width: 84%;
  margin-inline: auto;
  margin-top: -0.1rem;
  margin-bottom: 4rem;
  padding: 0.2em 0;
  border-radius: var(--radius3);
}

.want-2 .vision-img-box h3 {
  background: var(--want2);
}

.want-3 .vision-img-box h3 {
  background: var(--want3);
}

.want-4 .vision-img-box h3 {
  background: var(--want4);
}

.vision .r {
  font-weight: bold !important;
}

.vision .want-1,
.vision .want-1 .r {
  color: var(--want1);
  font-weight: 700;
}

.vision .want-2,
.want-2 .r {
  color: var(--want2);
  font-weight: 700;
}

.vision .want-3,
.want-3 .r {
  color: var(--want3);
  font-weight: 700;
}

.vision .want-4,
.want-4 .r {
  color: var(--want4);
  font-weight: 700;
}

.skill-box h4 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.skill-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1rem;
}

.skill-box p {
  background: var(--gray);
  width: 100%;
  padding: 0.3em 1em 0.2em;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--black2);
}

.skill-box p .r {
  font-weight: 700 !important;
}

.hukidasi-box {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin-inline: auto;
  margin-bottom: 10rem;
}

.hukidasi-box p {
  color: var(--black);
  background: #fff;
  padding: 1.2em 0.6em;
  font-size: 1.5rem;
  border-radius: var(--radius3);
  width: 48%;
  text-align: center;
  letter-spacing: -0.05em;
  position: relative;
  box-shadow: 0 0 20px #cc926026;
}

.hukidasi-box p .r {
  font-weight: 700 !important;
}

/* 吹き出しの三角部分（少しだけ大きく・尖らせる） */
.hukidasi-box p::after {
  content: "";
  position: absolute;
  /* 【微調整】三角の長さに合わせて位置を調整 */
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);

  /* 【微調整】少しずつ数値を大きくしました */
  border-left: 1.0rem solid transparent;
  /* 0.8 -> 1.0rem */
  border-right: 1.0rem solid transparent;
  /* 0.8 -> 1.0rem */
  border-top: 2.6rem solid #fff;
  /* 2.2 -> 2.6rem */
  display: block;
  transform-origin: top center;
  border-radius: 0.2rem;
}

/* 2つ目の吹き出し（逆向きに傾ける） */
.hukidasi-2::after {
  transform: translateX(-50%) rotate(30deg) !important;
}

.vision-bottom {
  background: var(--gra);
  border-radius: var(--radius2);
  color: #fff;
  text-align: center;
  width: 60rem;
  padding: 1.2em;
  font-weight: bold;
  font-size: 3.2rem;
  margin-inline: auto;
  margin-top: 6rem;
  position: relative;
}

/* 上向きの三角形（横幅広め・鋭すぎない調整） */
.vision-bottom::before {
  content: "";
  position: absolute;
  /* 三角形の高さに合わせて調整（少し大きくしたので -3.0rem ほど） */
  top: -3.0rem;
  left: 50%;
  transform: translateX(-50%);
  /* 【サイズ変更】横幅を広げ、高さを出すことで「鋭さ」を抑えます */
  border-left: 2.0rem solid transparent;
  /* 1.2 -> 2.0rem に拡大 */
  border-right: 2.0rem solid transparent;
  /* 1.2 -> 2.0rem に拡大 */
  border-bottom: 3.0rem solid #e8a287;
  /* 2.2 -> 3.0rem に拡大 */
  display: block;
}

/*--------------------------------------------


実績


------------------------------------------------*/

.achi {
  background: #fff;
}


.achi-box {
  background: var(--gray);
  border-radius: 50rem 50rem 0 0;
  padding-bottom: 4rem;
  transition: var(--transition);
}

.achi-img-box {
  margin-top: -6rem;
  position: relative;
}

.achi-bottom-box {
  padding: 0 4rem;
}

.achi-bottom-box h3 {
  text-align: center;
  background: #fff;
  padding: 1.2em 1em;
  font-size: 1.8rem;
  margin-bottom: 4rem;
  position: relative;
  line-height: 1.5;
  border-radius: var(--radius3);
}

.achi-bottom-box h3::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  /* 指定の位置 */
  left: 50%;
  transform: translateX(-50%);
  border-left: 1.5rem solid transparent;
  /* 左右の幅 */
  border-right: 1.5rem solid transparent;
  border-top: 2.0rem solid var(--want1);
  display: block;
}

.achi-bottom-box p {
  text-align: center;
  color: #fff;
  padding: 1.2em 1em;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5 !important;
  border-radius: var(--radius3);
}

.want-1 .achi-bottom-box p {
  background: var(--want1);
}

.want-2 .achi-bottom-box p {
  background: var(--want2);
}

.want-3 .achi-bottom-box p {
  background: var(--want3);
}

.want-4 .achi-bottom-box p {
  background: var(--want4);
}

.want-2 .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want2);
}

.want-3 .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want3);
}

.want-4 .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want4);
}

.achi-cate {
  display: block;
  position: absolute;
  bottom: 0;
  left: 4rem;
  color: #fff;
  background: var(--want1);
  padding: 0.3em 2em 0.25em;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 0.2rem;
}

.achi-company {
  background-color: var(--black);
  color: #fff;
  font-size: 1.4rem;
  padding: 0.3em 2em 0.2em;
  border-radius: 0.2rem;
  height: fit-content;
  margin-bottom: 2rem;
}

.cate-box {
  display: flex;
  gap: 0.8rem;
}

.want-2 .achi-cate {
  background: var(--want2);
}

.want-3 .achi-cate {
  background: var(--want3);
}

.want-4 .achi-cate {
  background: var(--want4);
}

/* --- 1. スライダー全体コンテナ --- */
#achi-slider {
  margin-top: 6.4rem;
  /* 元の margin-top を反映 */
  margin-bottom: 1rem;
  /* 元の margin-bottom を反映 */
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* --- 2. Gridを完全に殺してFlex化する --- */
.achi-wrap.splide__list {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 3. 4.5枚表示 ＋ 透明度と変形の同期設定 --- */
.achi-box.splide__slide {
  width: 22.222% !important;
  /* 100% / 4.5枚 */
  flex-shrink: 0;
  opacity: 0.2;
  /* デフォルト（両端）は透明 */
  padding: 0;
  padding-bottom: 4rem;
  /* 元の gap: 4rem の半分を左右に振る */
  box-sizing: border-box;
  /* ボタンを押した瞬間にパッと切り替わるよう 0.2s 設定 */
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* 中央3枚（Activeとその前後）を不透明にする */
.achi-box.splide__slide.is-active,
.achi-box.splide__slide.is-next,
.achi-box.splide__slide.is-prev {
  opacity: 1.0 !important;
}

.achi .splide__track {
  padding: 6.0rem 0 !important;
  /* 上下の切れ防止 */
  overflow: visible !important;
}

.achi .splide__arrow--prev,
.media .splide__arrow--prev {
  left: 24rem !important;
}

.achi .splide__arrow--next,
.media .splide__arrow--next {
  right: 24rem !important;
}

.single-achi .page-achi-box::before {
  display: none;
}

/*--------------------------------------------


CTA


------------------------------------------------*/
.cta {
  background: url("../images/cta-back.webp");
  background-size: cover;
  padding: 10rem 0;
}

.cta .title .big {
  font-size: 6.4rem;
}

.cta-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.4rem;
  margin-top: 6.4rem;
  margin-bottom: 8rem;
}

.cta-box {
  padding: 4rem;
  padding-top: 5rem;
  background: #fff;
  border-radius: var(--radius2);
  position: relative;
}

.cta-box::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4.5rem;
  background: url("../images/arrow-cta.webp");
  background-size: cover;
  width: 2.5rem;
  height: 2.8rem;
}

.cta-box:last-of-type:after {
  display: none;
}

.cta-box .number {
  background: var(--pink);
  border-radius: 50%;
  color: #fff;
  display: block;
  width: 6.8rem;
  height: 6.8rem;
  text-align: center;
  font-size: 1.6rem;
  padding-top: 0.6rem;
  position: absolute;
  top: -3.4rem;
  left: 50%;
  transform: translateX(-50%);
}

.cta-box .number .big {
  font-size: 3rem;
  display: block;
  margin-top: -1rem;
}

.cta-box h3 {
  font-size: 2rem;
  margin-top: 1rem;
  text-align: center;
}

.cta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.king-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 48%;
}

.king-box {
  border-radius: 50%;
  background: #ffffff17;
  position: relative;
  box-shadow:
    /* 1. 全体的な内側の強い白い光 */
    inset 0 0 4rem 4rem rgba(255, 255, 255, 0.9),
    /* 2. 上部からさらに強い光を差し込ませる（オプション） */
    inset 0 0.5rem 1.0rem rgba(255, 255, 255, 1);
  aspect-ratio: 1 / 1;
  padding-top: 3.8rem;
}

.king-box img {
  width: 5rem;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.king-box h3 {
  text-align: center;
  font-size: 2rem;
}

.king-p {
  text-align: center;
  background: var(--gra2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1;
}

.king-p .big {
  font-size: 8rem;
}

.king-p .big2 {
  font-size: 5rem;
}

.king-p-small {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 0.4rem;
  letter-spacing: 0;
}

/*--------------------------------------------


選ばれる理由


------------------------------------------------*/
.reason {
  background: #fff;
}

.reason-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12rem;
  margin-top: 10rem;
}

.reason-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reason-box-left {
  width: 70%;
  margin-left: -15vw;
  position: relative;
}

.reason-box-left .img-box {
  border-radius: 0 40rem 40rem 0;
  overflow: hidden;
}


.reason-box-right {
  width: 50%;
  position: relative;
  padding-left: 12rem;
}

.reason-box-right img {
  width: 80%;
  margin-left: 0;
}

.reason .number {
  position: absolute;
  top: 2rem;
  right: 4rem;
  width: 12rem;
  z-index: 2;
}

.reason-box-right h3 {
  font-size: 4rem;
  margin-bottom: 3.2rem;
  width: 110%;
}

.reason-box-right p {
  line-height: 2;
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

.reason-box2 .reason-box-right {
  order: 1;
  padding-left: 0;
}

.reason-box2 .reason-box-left {
  order: 2;
  margin-right: -15vw;
  margin-left: 0;
}

.reason-box2 .reason-box-left .img-box {
  border-radius: 40rem 0rem 0rem 40rem;
}

.reason-box2 .number {
  right: initial;
  left: 4rem;
}

.reason-box1 .box {
  background: var(--want1);
}

.reason-box2 .box {
  background: var(--want3);
}

.reason-box3 .box {
  background: var(--yellow);
}

/*--------------------------------------------


代表紹介


------------------------------------------------*/
.profile {
  background: url("../images/profile-back.webp");
  background-size: cover;
}

.profile .title {
  text-align: left;
}

.profile h3 {
  font-size: 2.4rem;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.profile p {
  line-height: 2;
  width: 50%;
}

.profile .button {
  margin-top: 8rem;
  margin-left: 0;
  transform: translateX(0);
}

/*--------------------------------------------


講師紹介


------------------------------------------------*/
.teacher {
  background: #fff;
}

.teacher-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
  margin-top: 6.4rem;
}

.teacher-box p {
  text-align: center;
  margin-top: 2.4rem;
}

.teacher-box h3 {
  font-size: 4rem;
  text-align: center;
  font-weight: 500;
}

/* ボタン自体の設定 */
.teacher-button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 1rem 5rem 1rem 2rem;
  /* 右側にアイコン分の余白 */
  background: #fff;
  border-radius: var(--radius3);
  font-weight: bold;
  font-size: 1.6rem;
  user-select: none;
  cursor: pointer;
}

/* プラス・マイナスボタンの共通パーツ（横棒） */
.teacher-button::after,
.faq-question::after {
  content: '';
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 0.2rem;
  background-color: var(--pink);
  transition: transform 0.3s;
}

/* プラスの縦棒 */
.teacher .faq-question-icon-plus {
  position: absolute;
  right: 2rem;
  top: 50%;
  margin-top: -0.1rem;
  /* 高さを半分ずらして中央に */
  width: 1.5rem;
  height: 0.2rem;
  background-color: var(--pink);
  transform: rotate(90deg);
  transition: transform 0.3s;
}

/* 開いている時のマイナス化（縦棒を横にする） */
.is-open .faq-question-icon-plus {
  transform: rotate(0deg);
}

/* コメントエリア（ヌルッとする外枠） */
.teacher-comment-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

/* 中身の余白 */
.teacher-comment-inner {
  padding: 1.5rem;
}

.teacher-button {
  text-align: center;
  width: 100%;
  border: 1.6px solid var(--pink);
  color: var(--pink);
  border-radius: 4rem;
  padding: 1em;
  margin-top: 2rem;
}

.teacher-comment-container .hidden {
  text-align: left;
  line-height: 2;
}

/*--------------------------------------------


voice


------------------------------------------------*/
.voice {
  background: var(--gray);
  padding-bottom: 26rem;
}



.voice-top {
  margin-bottom: 2rem;
}

.voice-top img {
  width: 10rem;
  position: absolute;
  top: -6.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.voice-bottom,
.voice-top {
  position: relative;
}

.voice-top p {
  background: #fff;
  border-radius: var(--radius2);
  padding: 2em;
  font-size: 1.75rem;
  line-height: 2;
  box-shadow: 0 0 20px #cc926015;
}

.voice-bottom p {
  background: #EFD5CF;
  border-radius: var(--radius2);
  padding: 2em;
  font-size: 1.75rem;
  line-height: 2;
  box-shadow: 0 0 20px #cc926015;
}

.voice-bottom img {
  width: 8rem;
  position: absolute;
  bottom: -5.5rem;
  left: 50%;
  transform: translateX(-50%);
}

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

.voice-top .cate-box {
  display: flex;
  margin-top: 1rem;
  margin-bottom: -1rem;
  gap: 0.6rem;
}

.voice-top .cate-box .cate,
.page-media .cate-box .cate,
.media .cate-box .cate,
.media-single-top .cate-box .cate,
.media-kanren-box .cate-box .cate {
  color: #fff;
  background: var(--want1);
  padding: 0.7rem 1.4rem 0.5rem;
  line-height: 1;
  margin-top: 0;
  font-size: 1.4rem;
  border-radius: 0.2rem;
}

.voice-top .cate-box .company,
.page-media .cate-box .company,
.media .cate-box .company,
.media-single-top .cate-box .company,
.media-kanren-box .cate-box .company {
  color: #fff;
  background: var(--black);
  padding: 0.7rem 1.4rem 0.5rem;
  line-height: 1;
  font-size: 1.4rem;
  border-radius: 0.2rem;
}

.media-kanren-box h4 {
  margin-top: 1rem;

}

.page-voice .cate-box {
  margin-top: 0;
  margin-bottom: 1rem;
}

.page-voice .sec_inner {
  display: flex;
}

.page-voice .cate-button-box {
  position: initial;
}

.page-voice .voice-wrap {
  width: calc(100% - 30rem);
}

.cate-button-left {
  position: sticky;
  top: 18rem;
  width: 30rem;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  height: fit-content;
  font-weight: 700;
  max-height: calc(100vh - 20rem);
  overflow-y: auto;
  /* 中身が溢れたらスクロールを出す */
}

/* --- ボタン並び --- */
.cate-button-box-2 {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* --- カテゴリーボタン --- */
.news-cate-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.news-cate-button.is-active {
  background: #ff69b4;
  /* CSSで設定されている通りに反映されます */
  color: #fff;
}

/* --- サブメニュー表示（ぬる・ふわ） --- */
.sub-menu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease, visibility 0s 0.4s;
}

.sub-menu-wrap.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.4s ease, opacity 0.4s ease, visibility 0s 0s;
}

.sub-menu-set {
  min-height: 0;
  overflow: hidden;
  display: none;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  width: 100%;
  padding-right: 8rem;
  gap: 0.4rem;

}

.sub-menu-set.is-active {
  display: flex;
}

.sub-menu-set li {
  font-size: 1.4rem;
  cursor: pointer !important;
  color: #fff;
  background: var(--black) !important;
  border-radius: 0.2em;
}

/* --- 受講生の声（アニメーション用） --- */
.voice-box {
  display: none;
  opacity: 0;
  transform: translateY(1.25rem);
  /* 20px */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.voice-box.is-animated {
  opacity: 1;
  transform: translateY(0);
}

.page-voice .cate-button-box {
  gap: 0.8rem;
}

/*----------------スライダー-----------------*/
/* --- 1. 全体設定 --- */
#voice-slider {
  margin-top: 6rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* --- 2. Grid解除 --- */
.voice-wrap.splide__list {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 3. 透明度の即時切り替え --- */
.splide__slide {
  width: 22.222% !important;
  /* 4.5枚分 */
  flex-shrink: 0;
  opacity: 0.2;
  /* 両端は透明 */
  /* 秒数は 's' を使います。0.25秒でスッと切り替えます */
  transition: opacity 0.25s ease-out !important;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* ボタンを押した瞬間にクラスが変わるため、ここが即座に反応します */
.splide__slide.is-active,
.splide__slide.is-next,
.splide__slide.is-prev {
  opacity: 1.0 !important;
}

.voice .splide__track {
  padding: 6.0rem 0 !important;
  overflow: visible !important;
}

/* --- 4. ピンクボタンのデザイン (単位: rem) --- */
.splide__arrows {
  /* ボタンの位置を微調整したい場合はここ */
}

.splide__arrow {
  background: #ffffffb9 !important;
  width: 8rem !important;
  height: 8rem !important;
  border-radius: 50% !important;
  opacity: 1.0 !important;
  border: 2px solid var(--pink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, background 0.5s ease;
  position: relative;
}

.splide__arrow::after {
  content: "";
  background: url("../images/arrow.webp");
  background-size: cover;
  width: 1.2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background 0.5s ease;
}

.splide__arrow:hover {
  background: var(--pink) !important;
}

.splide__arrow:hover::after {
  background: url("../images/arrow-white.webp");
  background-size: cover;
}

.splide__arrow--prev {
  left: 26rem !important;
  transform: scaleX(-1) !important;
  top: 43% !important;
}

.splide__arrow--next {
  right: 26rem !important;
}

/*--------------------------------------------


present-cta


------------------------------------------------*/
.present-cta {
  background: url("../images/present-cta.webp");
  background-size: cover;
  padding-top: 20rem;
  position: relative;
  z-index: 10;
}

.present-cta .title {
  position: relative;
  font-size: 4.8rem;
}

.present-cta .title::after {
  content: "";
  background: url("../images/present.webp");
  background-size: cover;
  width: 9rem;
  height: 11rem;
  position: absolute;
  top: -1.3rem;
  left: calc(50% - 32rem);
}

.present-cta .title::before {
  content: "";
  background: url("../images/present.webp");
  background-size: cover;
  width: 9rem;
  height: 11rem;
  position: absolute;
  top: -1.3rem;
  right: calc(50% - 30.5rem);
}

.present-cta .title .mini {
  font-size: 2.4rem;
  display: block;
}

.present-cta-top {
  background: var(--gra);
  color: #fff;
  font-size: 2.4rem;
  text-align: center;
  font-weight: bold;
  padding: 1.2em;
  width: 80rem;
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius2);
}

.present-cta-top::after {
  content: "";
  position: absolute;
  bottom: -9rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/arrow-3.webp);
  background-size: cover;
  width: 9.5rem;
  height: 9rem;
}

.present-cta-top .big {
  font-size: 4rem;
}

.cta-button-box h3 {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 1rem;
}

.present-cta-box-wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4.8rem;
  margin-bottom: 8rem;
  margin-top: 8rem;
}

.present-cta-box-box {
  background: #ffffffce;
  border-radius: var(--radius2);
  padding: 6.4rem 8rem;
  position: relative;
  border: 2px solid var(--want4);
}

.present-cta-box-box h3 {
  text-align: center;
  font-size: 2.4rem;
  width: 50%;
}

.present-cta-box-box h3 .big {
  font-size: 4rem;
  line-height: 1;
}

.present-cta-box-box h3 .box {
  display: block;
  background: var(--gra);
  margin-left: 4rem;
  margin-right: 4rem;
  padding: 1rem;
  border-radius: var(--radius2);
  font-size: 3.2rem;
}

.present-cta-box-box h3 .box .big {
  font-size: 5rem;
  margin-left: 0.05em;
}

.present-cta-box-box img {
  position: absolute;
  top: -6rem;
  right: 0rem;
  width: 50%;
  padding-left: 4rem;
}

.tokuten {
  position: absolute;
  top: -2rem !important;
  left: 0;
  width: 16rem !important;
  z-index: 5;
  padding: 0;
}

.first-present {
  position: relative;
}

.first-present::after {
  content: "";
  background: url("../images/purasu.webp");
  background-size: cover;
  width: 12rem;
  height: 12rem;
  position: absolute;
  bottom: -8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}

/*--------------------------------------------


step


------------------------------------------------*/
.step {
  background: #fff;
}

.step-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4.8rem;
  margin-top: 6.4rem;
}

.step-box {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--gray);
  width: 100%;
  border-radius: var(--radius2);
}

.step-box::after {
  content: "";
  width: 2rem;
  height: 4.8rem;
  background: var(--pink);
  position: absolute;
  bottom: -4.8rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
}

.step-box:last-of-type:after {
  display: none;
}

.step-box img {
  width: 40rem;
}

.step-box-right {
  padding-left: 8rem;
}

.step-box-right-top {
  display: flex;
  align-items: last baseline;
}

.step-box-right-top img {
  width: 8rem;
}

.flex {
  display: flex;
  align-items: last baseline;
  gap: 1rem;
  width: 34rem;
}

.flex h3 {
  font-size: 2.4rem;
}

.step-box-right p {
  margin-top: 2.4rem;
  line-height: 1.8;
  font-size: 1.8rem;
}

.step-box-right p .b {
  font-weight: bold;
}

.step-can-box {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  transform: translateY(-0.5rem);
}

.step-can-box span {
  display: block;
  background: var(--pink);
  padding: 1rem 1.4rem;
  color: #fff;
  text-align: center;
  height: 4rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.step-box-last .flex {
  width: 100%;
}

.step-box-last h3 .box {
  background: var(--gra);
  padding: 1.2rem 2rem 0.8rem;
  margin-bottom: 0.6rem;
  margin-top: 1rem;
  border-radius: var(--radius3);
}

.step-box-last p {
  margin-top: 1rem;
}

.step .r {
  color: var(--pink);
}

.sche {
  margin-top: 12rem;
}

/*--------------------------------------------


よくある質問


------------------------------------------------*/
.faq {
  background: var(--gray);
}

.faq-wrap {
  max-width: var(--small-in);
  margin: 0 auto;
}

.faq-box {
  margin-bottom: 2rem;
  border-radius: var(--radius2);
  overflow: hidden;
  /* 角丸を中身にも適用させるため */
}

/* 質問部分 */
.faq-question {
  position: relative;
  margin: 0;
  padding: 2.4rem 5rem 2.4rem 12rem;
  background: #fff;
  cursor: pointer;
  font-size: 2rem;
  /* 指定サイズ */
  font-weight: bold;
  display: flex;
  align-items: center;
  border-radius: var(--radius2);
  /* 質問部分の角丸 */
}

/* Qアイコン */
.faq-question::before {
  content: 'Q';
  position: absolute;
  left: 7rem;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--pink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 500;
}

/* プラス・マイナスボタン */
.faq-question::after {
  content: '';
  position: absolute;
  right: 8rem;
  width: 1.5rem;
  height: 0.2rem;
  background-color: var(--pink);
  transition: transform 0.3s;
}

/* プラスの縦棒（擬似要素の前にさらに追加） */
.faq-question-icon-plus {
  position: absolute;
  right: 8rem;
  width: 1.5rem;
  height: 0.2rem;
  background-color: var(--pink);
  transform: rotate(90deg);
  transition: transform 0.3s;
}

/* 開いている時のマイナス化 */
.faq-box.is-open .faq-question-icon-plus {
  transform: rotate(0deg);
}

/* 回答部分のコンテナ（高さ制御用） */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
  background: var(--red-opa);
  /* 透明度80%（0.5から0.8へ修正） */
  border-bottom-left-radius: var(--radius2);
  border-bottom-right-radius: var(--radius2);
  /* ここにpaddingは入れない */
}

/* 回答部分のインナー（ここでお好みの余白を調整） */
.faq-answer-inner {
  position: relative;
  padding: 3rem 3rem 3rem 12rem;
  /* 上右下：3rem、左：8rem（Qと揃えるため） */
}

/* Aアイコンの配置調整 */
.faq-answer-inner::before {
  content: 'A';
  position: absolute;
  left: 8rem;
  /* Qのアイコン位置（3rem）に合わせる */
  top: 2.8rem;
  /* テキストの1行目の高さに合わせる */
  width: 3.2rem;
  height: 3.2rem;
  color: var(--button);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 500;
}

.faq-answer p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  /* 少し行間を広げると読みやすくなります */
  margin: 0;
}

.faq-answer-inner p span {
  font-weight: 700;
}

/*--------------------------------------------


cta-message


------------------------------------------------*/
.cta-flex {
  display: flex;
  margin-bottom: 12rem;
}

.cta-flex .title {
  text-align: left;
  line-height: 2;
  margin-top: -1.6rem;
  padding-left: 2.8rem;
}

.cta-flex p {
  padding-left: 12rem;
  line-height: 2;
  font-size: 1.8rem;
}

.cta-message {
  padding: 20rem 0;
}

.cta-message-img {
  width: 36rem;
  display: inline-block;
  margin-right: 1rem;
  transform: translateY(1rem);
}

/*--------------------------------------------


クイズ


------------------------------------------------*/
.quiz {
  background: #fff;
}

.quiz-p {
  font-size: 2rem;
  text-align: center;
  line-height: 1.8;
}

.quiz-box {
  padding: 0rem 0rem 2rem;
  background: var(--gray);
  border-radius: var(--radius2);
}

.quiz-box h3 {
  font-size: 1.6rem;
  margin-top: 0.6rem;
  padding-left: 3rem;
  padding-right: 3rem;
  font-weight: 700;
}


.quiz-box .cate {
  margin-left: 3rem;
}

/* --- スライダー全体 --- */
#quiz-slider {
  margin: 2.0rem 0 3.2rem;
  width: 100%;
  overflow: visible;
  opacity: 1;
}

/* --- Gridを強制解除してFlexboxへ --- */
.quiz-wrap.splide__list {
  display: flex !important;
  gap: 0 !important;
}

/* --- スライド設定 --- */
.quiz-box.splide__slide {
  display: block;
  /* width: 22.222% !important; ← これがあるとループが壊れて表示されません。削除してください */
  opacity: 1;
  /* 初期状態で見えるようにする */
  transition: opacity 0.4s ease;
}

/* 中央3枚を不透明に */
.quiz-box.splide__slide.is-active,
.quiz-box.splide__slide.is-next,
.quiz-box.splide__slide.is-prev {
  opacity: 1.0 !important;
}

/* 1. まず全スライドを半透明にする（!importantを打ち消す強さで書く） */
#quiz-slider .splide__slide {
  opacity: 0.3 !important;
  /* ここはお好みの薄さで */
  transition: opacity 0.3s ease;
}

/* 2. 「現在アクティブなスライド」と「完全に見えているスライド」だけを不透明にする */
#quiz-slider .splide__slide.is-active,
#quiz-slider .splide__slide.is-visible {
  opacity: 1 !important;
}

.quiz .splide__arrow--prev {
  left: 22rem !important;
  transform: scaleX(-1) !important;
  top: 35% !important;
}

.quiz .splide__arrow--next {
  right: 22rem !important;
  top: 45% !important;
}

.quiz .cate,
.page .cate {
  display: inline-block;
  background: var(--want1);
  color: #fff;
  margin-top: 0.6rem;
  padding: 0.3rem 1.4rem 0.2rem;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.quiz .cate {
  margin-top: 0.6rem;
}

.page-media .cate {
  margin-top: 0;
}

/*--------------------------------------------


media


------------------------------------------------*/
.media {
  background: var(--gray);
}

.media .title .mini,
.quiz .title .mini,
.page-top .title .mini {
  font-size: 2.4rem;
}

.media-wrap {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-top: 6.4rem;
  margin-bottom: 6.4rem;
}

.media-box {
  background: #fff;
  border-radius: var(--radius2);
  position: relative;
}

.media-cate-img {
  position: absolute;
  top: -2rem;
  left: -2rem;
  width: 8rem;
}

.media-box-bottom {
  padding: 3.2rem;
}

.media-box-bottom-small .cate {
  display: inline-block;
  background: var(--pink);
  text-align: center;
  color: #fff;
  padding: 0.6em 1em 0.4em;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: var(--radius3);
}

.media-box .time,
.single-news .time {
  display: block;
  font-size: 1.2rem;
  margin-top: 2.4rem;
  color: var(--black2);
  line-height: 1;
}


.media-box-bottom h3 {
  margin-top: 1rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --- メディアスライダー全体 --- */
#media-slider {
  margin-top: 4rem;
  /* 必要に応じて調整してください */
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* --- Gridを強制的に解除 --- */
.media-wrap.splide__list {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- スライド（media-box）の設定 --- */
.media-box.splide__slide {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 22.222% !important;
  /* PC 4.5枚分 */
  flex-shrink: 0;
  opacity: 0.2;
  /* 基本は透明 */
  padding: 0;
  box-sizing: border-box;
  /* transformとopacityを0.2秒で同期して即座に反応させる */
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* 中央3枚を不透明に */
.media-box.splide__slide.is-active,
.media-box.splide__slide.is-next,
.media-box.splide__slide.is-prev {
  opacity: 1.0 !important;
}

.splide__track {
  padding: 4.0rem 0 !important;
  overflow: visible !important;
}


.page-top-media h1 {
  position: relative;
}

.button-p {
  color: var(--button);
  text-align: center;
  font-weight: 700;
  margin-top: 0.8rem;
  font-size: 1.4rem;
}


.page-top-media .button-p {
  display: block;
  margin-top: 0rem;
  margin-bottom: 4rem;
}

.media .button {
  margin-top: 2rem;
}

#media-slider .splide__slide {
  opacity: 0.3 !important;
}

#media-slider .splide__slide.is-visible {
  opacity: 1 !important;
}

/*--------------------------------------------


新着記事一覧


------------------------------------------------*/
.news {
  background: #fff;
}

.news .sec_inner {
  display: flex;
  justify-content: space-between;
  margin-top: 6.4rem;
}

.cate-button-box {
  width: 30rem;
  padding-right: 8rem;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  height: fit-content;
  font-weight: 700;
}


.cate-button-box li {
  font-size: 1.8rem;
  background: #ab9b9b;
  color: #fff;
  padding: 1em 1em 0.8em;
  border-radius: var(--radius3);
  width: 100%;
  cursor: pointer;
  text-align: center;
}

.sub-menu li {
  padding-left: 2rem !important;
}

.news-wrap {
  width: calc(100% - 30rem);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3.2rem;
}

.news-box {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.news-small-box {
  display: flex;
  justify-content: space-between;
  width: fit-content;
  align-items: center;
  gap: 1.4rem;
}

.news-small-box .cate {
  display: block;
  background: var(--pink);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.8rem 2rem 0.6rem;
  border-radius: var(--radius3);
  line-height: 1;
}

.news-small-box .time {
  font-size: 1.2rem;
  color: var(--black2);
}

.news-box h3 {
  font-size: 2rem;
  padding: 1.4rem 0;
  font-weight: 500;
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 行数を指定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* はみ出た分を隠す */
}

.news-box h3::after {
  content: "";
  background: url("../images/arrow.webp");
  background-size: cover;
  width: 1.2rem;
  height: 2rem;
  position: absolute;
  right: 0;
  top: 1.8rem;
}

/* 非表示用 */
.is-hidden {
  display: none !important;
}

/* フェードインのアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表示される記事にアニメーションを適用 */
.news-box:not(.is-hidden) {
  animation: fadeInUp 0.5s ease forwards;
}

/* ボタンのアクティブ状態（お好みのデザインに調整してください） */
.news-cate-button.is-active {
  background: var(--pink);
  color: #fff;
}

.news .button {
  margin-top: 6.4rem;
}

/*--------------------------------------------


会社概要


------------------------------------------------*/
.company {
  background: var(--gray);
}

.company .sec_inner {
  display: flex;
  justify-content: space-between;
  margin-top: 6.4rem;
}

.company-wrap {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  padding-right: 8rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.company-box {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2.4rem;
  width: 100%;
}

.company-box h3 {
  font-size: 1.8rem;
  color: var(--pink);
  width: 18rem;
}

.company-box p {
  font-size: 1.8rem;
}

.map-container {
  width: 50%;
  border-radius: var(--radius2);
  overflow: hidden;
}

.company-box a img {
  width: 2rem;
  display: inline-block;
  transform: translateY(0.4rem);
}

/*--------------------------------------------


フッター


------------------------------------------------*/
.footer {
  background: var(--pink);
  padding: 10rem 0;
}


#open-incognito-widget {
  display: none;
}

.footer p,
.footer a {
  color: #fff;
}

.footer p {
  font-size: 1.4rem;
}

.footer-top {
  border-bottom: none;
  /* 既存のボーダーを消す */
  background-image: radial-gradient(circle, #ffffff74 0.09375rem, transparent 0.09375rem);
  /* 0.09375rem = 1.5px (ドットの大きさ) */
  background-size: 0.625rem 0.1875rem;
  /* 0.625rem(10px) = 横の間隔 / 0.1875rem(3px) = 線の高さ */
  background-position: bottom;
  background-repeat: repeat-x;

  /* ボーダーとの距離を調整したい場合は padding を使う */
  padding-bottom: 0.625rem;
  /* 10px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.footer-top a img {
  width: 24rem;
}

.footer-nav {}

.footer-nav ul {
  display: flex;
  justify-content: space-between;
  gap: 8rem;
}

.footer-nav ul a {
  font-size: 1.6rem;
  position: relative;
  display: block;
}

.footer-nav ul a::before {
  content: "";
  position: absolute;
  top: -0rem;
  left: -3rem;
  width: 2.4rem;
  height: 2.4rem;
  background: url("../images/kira-white.webp");
  background-size: cover;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0rem;
}

.footer-bottom-nav {
  width: 65rem;
}

.footer-bottom-nav ul {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

.footer-bottom-nav ul a {
  font-size: 1.3rem;
}


/*--------------------------------------------






page-top






------------------------------------------------*/




/*----------------パンクず-----------------*/
.breadcrumb-container {
  padding: 2rem 0;
  position: relative;
  z-index: 10;
  /* 左右に10vwの余白を空けたい場合はここに追加 */
  /* padding-left: 10vw; */
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

/* 区切り線の設定（最後の要素以外に付ける） */
.breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin: 0 1.5rem;
  color: #ccc;
  font-family: sans-serif;
  /* スラッシュは標準フォントが綺麗 */
  font-weight: 100;
}

.breadcrumb-item a {
  text-decoration: none;
  color: var(--black2);
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: var(--orange);
  /* ホバー時に赤くする */
}

/* 現在地のスタイル */
.breadcrumb-item[aria-current="page"] {
  color: var(--black);
  font-weight: bold;
}

.page-top-img-box {
  width: 100%;
  height: 55rem;
  /* 任意の高さ */
  overflow: hidden;
  /* 動いてはみ出した部分を隠す */
  position: relative;
}

.page-top-img.js-parallax-single {
  width: 100%;
  height: 110%;
  /* ★重要：動くための余白（1.3倍程度） */
  object-fit: cover;
  position: absolute;
  top: -15%;
  /* ★重要：初期位置を少し上にずらして中央を合わせる */
  left: 0;
  will-change: transform;
  /* ブラウザの描画を最適化 */
}

/*--------------------------------------------

ページネーション

------------------------------------------------*/
/* 中央寄せのコンテナ */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  width: 100%;
  margin-top: 12rem;
  /* 上下の余白 */
}

.pagination-list {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  /* 数字同士のスキマ */
  list-style: none;
  padding: 0;
}

.pagination-item {
  display: flex;
  align-items: center;
}

/* 数字・記号のリンク */
.pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  /* 40px相当 */
  height: 2.5rem;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 500;
  color: var(--black2);
  /* 基本はblack2 */
  transition: color var(--transition), border-color var(--transition);
  border-bottom: 2px solid transparent;
  /* ホバー時に線を出すための準備 */
}

/* ホバー時：文字色をblackにする */
.pagination-link:hover {
  color: var(--pink);
}

/* 現在のページ：文字色をblackにし、下に差し色の赤を入れる（アクセント） */
.pagination-link.is-current {
  color: #fff;
  position: relative;
  z-index: 5;
}

.pagination-link.is-current::after {
  content: "";
  width: 7rem;
  height: 7rem;
  background: url("../images/page-nation.webp");
  background-size: cover;
  position: absolute;
  top: -2.5rem;
  left: -2.5rem;
  z-index: -1;
}

/* 省略記号（…）のスタイル */
.pagination-ellipsis {
  color: var(--black2);
  padding: 0 0.5rem;
}

/*--------------------------------------------

page共通部分

------------------------------------------------*/

.page-top {
  padding: 20rem 0 10rem;
  background: url("../images/cta-back.webp");
  background-size: cover;
  background-position: center;
  clip-path: ellipse(100% 100% at 50% 0%);

}

.page-top .title {
  text-align: center;
  font-size: 5.6rem;
}

.page {
  padding-top: 15rem;
  padding-bottom: 20rem;
}

.media-single-top .title,
.news-single-top .title {
  font-size: 4rem;
}

/*--------------------------------------------

page-news

------------------------------------------------*/
.page-news .sec_inner {
  display: flex;
  justify-content: space-between;
}

.page-news .cate-button-box {
  position: sticky;
  top: 20rem;
  left: 0;
}

/*--------------------------------------------

news-single

------------------------------------------------*/
.news-single-top {
  padding-top: 30rem;
}

.news-single-top h1 {
  position: relative;
  margin-bottom: 12rem;
  z-index: 2;
}

.news-single-top h1::after {
  content: "";
  width: 100%;
  height: 22.5rem;
  background: url("../images/single-news-kira.webp");
  background-size: cover;
  position: absolute;
  top: -15rem;
  left: 0;
  z-index: -1;
}

.news-single-top h1::before {
  content: "";
  width: 100%;
  height: 22.5rem;
  background: url("../images/single-news-kira.webp");
  background-size: cover;
  position: absolute;
  bottom: -10rem;
  left: 0;
  rotate: 180deg;
  z-index: -1;
}

.p {
  color: var(--button);
  font-weight: 700;
}

.news-single-top .news-small-box {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

/*------------------------------------*/
.single-news .sec_inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 必須：サイドバーを自由に動けるようにする */
  position: relative;
}

.single-news .sec_inner .button {
  width: 100%;
}

.single-news-left {
  width: calc(100% - 34rem);
  padding-right: 8rem;
}

.single-news-right {
  width: 34rem;
  background: var(--gray);
  border-radius: var(--radius2);
  padding: 6.4rem 4rem 2rem;
  position: sticky;
  top: 12rem;
  right: 0;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* 動きを滑らかにするため transition はあえて入れない（スクロールに直結させるため） */
}

/*------------------------------------*/
.video-wrapper,
.video-container,
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper {
  margin-bottom: 2.4rem;
}

.kizi-h2 {
  background: var(--pink);
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  padding: 0.4em 1em;
  border-radius: var(--radius3);
  margin-bottom: 2.4rem;
}

.kizi section {
  margin-bottom: 12rem;
}

.kizi section p {
  line-height: 2;
  margin-bottom: 4rem;
}

/*--------------------------------------------

目次

------------------------------------------------*/
.mokuzi {
  background: var(--gray);
  border-radius: var(--radius2);
  padding: 4rem 6.4rem;
  margin-bottom: 4rem;
}

.mokuzi h4,
.point h4 {
  color: var(--pink);
  font-size: 2.4rem;
  margin-bottom: 2rem;
}

.mokuzi ul,
.point ul {
  list-style: none;
  counter-reset: mokuzi-counter;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.mokuzi li,
.point li {
  position: relative;
  counter-increment: mokuzi-counter;
  padding-left: 1rem;
  /* 番号分の余白 */
  margin-bottom: 1rem;
}

.mokuzi li::before,
.point li::before {
  /* 01, 02... 形式の番号のみを表示 */
  content: counter(mokuzi-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.2em;
  font-weight: bold;
  color: #fff;
  background: var(--pink);
  border-radius: 50%;
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mokuzi li::after {
  content: "";
  background: url("../images/mokuzi-arrow.webp");
  background-size: cover;
  width: 2.8rem;
  height: 1.7rem;
  position: absolute;
  right: -4rem;
  top: 0.5rem;
}

.mokuzi li a,
.point li {
  text-decoration: none;
  color: inherit;
  font-size: 1.8rem;
  padding-left: 4rem;
}

.point {
  position: relative;
  border: 0.4rem solid transparent;
  background-image:
    linear-gradient(var(--gray), var(--gray)),
    var(--gra);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--radius2);
  padding: 4rem 6.4rem;
}


.point ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
}

.point li {
  width: 100%;
  padding-left: 2.8em;
}

.point li::after {
  content: "";
  background: url("../images/point-tuki.webp");
  background-size: cover;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: -0.4em;
  left: 0;
}

.point li::before {
  background: none;
  color: var(--pink);
  left: 0.3em;
}

.kizi .img-box {
  border-radius: 0.2rem;
  overflow: hidden;
  margin-bottom: 2.4rem;
}

.kizi-h3 {
  font-size: 2.4rem;
  padding-left: 4.5rem;
  padding-bottom: 0.5em;
  border-bottom: 1.6px solid var(--pink);
  position: relative;
  margin-bottom: 2.4rem;
}

.kizi-h3::after {
  content: "";
  background: url("../images/kizi-h3.webp");
  background-size: cover;
  position: absolute;
  top: -0.3em;
  left: 0;
  width: 4.5rem;
  height: 4.5rem;
}

.space {
  padding: 2rem;
}

.hyou {
  border: 1px solid #dec4c48d;
  border-radius: var(--radius2);
  margin-bottom: 4rem;
}

.hyou-box {
  display: flex;
  height: fit-content;
  border-bottom: 1px solid #dec4c491;
}

.hyou h5 {
  width: 28rem;
  background: #FDF1F0;
  color: var(--pink);
  font-size: 1.8rem;
  padding: 2.4rem 4rem 1.8rem;
}

.hyou p {
  width: calc(100% - 28rem);
  padding: 2rem 4rem;
  margin: 0 !important;
}

.kizi-voice {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4.8rem;
  width: 100%;
  margin-top: 6.4rem;
  margin-bottom: 8rem;
}

.kizi-voice-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.kizi-voice-box img {
  width: 16rem;
}

.kizi-voice-box p {
  width: calc(100% - 24rem);
  background: var(--gray);
  border-radius: var(--radius2);
  padding: 4rem 4.8rem;
  font-size: 1.8rem;
  margin: 0 !important;
  position: relative;
}

.kizi-voice-box p::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -4rem;
  width: 4rem;
  height: 4rem;
  background: url("../images/sankaku.webp");
  background-size: cover;
}

.kizi-voice-box.right p::after {
  left: initial;
  right: -4rem;
  background: url("../images/sankaku-gyaku.webp");
  background-size: cover;
}

.back::after {
  right: initial;
  left: 4rem;
  background: url("../images/arrow-back.webp");
  background-size: cover;
}

.back:hover::after {
  background: url("../images/arrow-back-white.webp");
  background-size: cover;
}

.button-box {
  display: flex;
  justify-content: space-between;
  width: 13.8rem;
}

.button-box a {
  border: 2px solid var(--pink);
  background: #fff;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  position: relative;
}

.button-box a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../images/arrow.webp");
  background-size: cover;
  width: 1.22rem;
  height: 2rem;
  transition: var(--transition);
}

.button-box .back::after {
  background: url("../images/arrow-back.webp");
  background-size: cover;
  transition: var(--transition);
}

.button.back {
  padding-left: 6em;
}

.button-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: -4rem;
  margin-bottom: 4rem;
}

.single-news-right section {
  margin-bottom: 10rem;
}

.single-news-right section:last-of-type {
  margin-bottom: 5rem;
}

.single-news-right section .button::after {
  right: 1.4rem;
  scale: 0.8;
  top: 2.5rem;
}

.single-news-right section h3 {
  font-size: 2.4rem;
  color: var(--pink);
  margin-bottom: 2rem;
  text-align: center;
}

.youtube-link {
  background: #fff;
  border-radius: var(--radius2);
  display: block;
  padding: 2rem 2rem 2rem;
  position: relative;
}

.youtube-link::after {
  content: "";
  width: 8rem;
  height: 8rem;
  position: absolute;
  top: -2rem;
  left: -2rem;
  background: url("../images/youtube.webp");
  background-size: cover;
  border-radius: 50%;
}

.youtube-link-img {
  width: 50%;
  margin: 0 auto;
}

.youtube-link h6 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1rem;
  line-height: 1;
  text-align: center;
}

.youtube-link .button {
  font-size: 1.6rem;
  padding: 1em 0;
  width: 100%;
}

.news-kanren-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.8rem;
  margin-top: 2rem;
}

.news-kanren-box a {
  display: block;
  border-bottom: 1px solid #530d1d37;
  padding-bottom: 1rem;
}

.news-kanren-box a h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.7;
  font-size: 1.6rem;
  margin-top: 1rem;
  padding-bottom: 0rem;
  font-weight: 500;
}

.media-kanren-box .img-box {
  margin-bottom: 1rem;
}

.media-kanren-box a {
  border: none;
}

.media-kanren-box {
  gap: 4rem;
}

/*--------------------------------------------


page-media


------------------------------------------------*/

.page-media .sec_inner {
  display: flex;
  justify-content: space-between;
  position: relative;
}

/* 非表示にするためのクラス */
.page-media .media-box.is-hidden {
  display: none !important;
  animation: none;
}

/* 表示される時の「ふわっと」アニメーション */
.page-media .media-box:not(.is-hidden) {
  display: block;
  /* または flex など元の指定に合わせてください */
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }

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

/* ボタンが押された時の見た目（お好みで調整してください） */
.page-media .media-cate-button {
  cursor: pointer;
  transition: var(--transition);
}

.page-media .media-cate-button.is-active {
  background: var(--pink);
  color: #fff;
  font-weight: bold;
}

.page-media .media-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: calc(100% - 30rem);
  gap: 12rem 4rem;
  margin-top: 0rem;
  margin-bottom: 0;
}

.page-media .cate-button-box {
  width: 30rem;
  display: flex;
}

.page-media .media-box {
  opacity: 0;
  transition: var(--transition);
}

.page-media .cate-button-box li {
  font-size: 2rem;
}


/* 親要素の data-cate の値に応じて背景色を自動切り替え */
.media-box[data-cate="tel"] .cate {
  background-color: var(--want1);
}

.media-box[data-cate="face"] .cate {
  background-color: var(--want2);
}

.media-box[data-cate="chat"] .cate {
  background-color: var(--want3);
}

.media-box[data-cate="sns"] .cate {
  background-color: var(--want4);
}


/* --- 3. ついでにボタン側もこの変数を使うように整理（任意） --- */

.media-cate-button.c-all.is-active {
  background: var(--color-all);
  border-color: transparent;
}

.media-cate-button.c-tel.is-active {
  background: var(--want1);
  border-color: var(--want1);
}

.media-cate-button.c-face.is-active {
  background: var(--want2);
  border-color: var(--want2);
}

.media-cate-button.c-chat.is-active {
  background: var(--want3);
  border-color: var(--want3);
}

.media-cate-button.c-sns.is-active {
  background: var(--want4);
  border-color: var(--want4);
}

/* 全て */
.media-cate-button[data-cate-target="all"].is-active {
  background: var(--gra);
  color: #fff;
  border-color: transparent;
}

/* 電話占い */
.media-cate-button[data-cate-target="tel"].is-active {
  background-color: var(--want1);
  color: #fff;
  border-color: var(--want1);
}

/* 対面占い */
.media-cate-button[data-cate-target="face"].is-active {
  background-color: var(--want2);
  color: #fff;
  border-color: var(--want2);
}

/* チャット占い */
.media-cate-button[data-cate-target="chat"].is-active {
  background-color: var(--want3);
  color: #fff;
  border-color: var(--want3);
}

/* SNS占い */
.media-cate-button[data-cate-target="sns"].is-active {
  background-color: var(--want4);
  color: #fff;
  border-color: var(--want4);
}

.media-single-top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
}

.media-single-top-wrap img {
  width: 50rem;
  height: auto;
}

.media-single-top .media-single-top-wrap .right {
  width: calc(100% - 50rem);
  padding-left: 8rem;
}

.media-single-top .media-single-top-wrap .right h1 {
  text-align: left;
  margin-bottom: 2rem;
  font-size: 4rem;
  margin-top: 0;
}

.media-single-top .media-single-top-wrap .right p {
  font-size: 1.8rem;
  line-height: 2;
}

.media-single-top h1 {
  margin: 0;
}








/*--------------------------------------------

2つカテゴリー

------------------------------------------------*/
.sub-menu li {
  border-bottom: 1px solid #ffffff86 !important;
  border-radius: 0;
  padding-left: 0 !important;
  padding-bottom: 0.5rem !important;
}

.sub-menu li:last-of-type {
  margin-bottom: 2.5rem !important;
}

.sub-menu {
  padding: 0 2rem !important;
  margin-top: -1rem !important;
}







/* 親ボタン全体の枠 */
.news-cate-button {
  cursor: pointer;
  display: block;
  overflow: hidden;
}

/* プルダウンの器（最初は閉じる） */
.sub-menu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  /* 高さをゼロ */
  opacity: 0;
  /* 透明 */
  visibility: hidden;
  /* 隠す */

  /* 閉じる時のアニメーション：最後に見えなくする */
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease,
    visibility 0s 0.4s;
}

/* 開いた状態 */
.news-cate-button.is-open .sub-menu-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;

  /* 開く時は即座に表示 */
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.4s ease,
    visibility 0s 0s;
}



/*--------------------------------------------

CONTACT

------------------------------------------------*/
/*--------------------------------------------

single-contact

------------------------------------------------*/
.page-contact {
  background: var(--gray);
}

.page-contact h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 8rem;
  line-height: 1.85;
  font-weight: 500;
}


.page-contact .sec_inner {
  max-width: 1000px;
}

.single-contact_wrap {
  margin-top: 8rem;
}

.single-contact-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 4rem;
}

.textarea-box {
  align-items: normal;
  align-content: normal;
}

input,
textarea {
  border: none;
  background: #fff;
  border-radius: var(--radius2);
  padding: 1.2em 2em;
  font-size: 1.8rem;
  width: calc(100% - 26rem);
}

textarea {
  height: 26rem;
}

label {
  font-size: 1.8rem;
  font-weight: bold;
  width: 26rem;
}

.required {
  background: url("../images/kira.webp");
  background-size: cover;
  width: 3rem;
  aspect-ratio: 1 / 1;
  display: inline-block;
  margin-left: 0.6rem;
  transform: translateY(-0.2rem);
}

.single-contact_wrap .small {
  color: var(--black2);
  font-weight: 400;
  font-size: 1.2rem;
  display: block;
  margin-top: 0.4rem;
}

.attention {
  text-align: center;
  margin-top: 8rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--black2);
  /* 好きな色に変えてください */
  opacity: 1;
  /* Firefox対策：不透明度を1にしないと色が薄くなることがあります */
}

.page-contact .button {
  background: none;
  margin-top: 4rem;
}

.gray-back {
  background: var(--gray);
}

.thanks {
  padding-top: 10rem;
  padding-bottom: 15rem;
}

.thanks h2 {
  font-size: 8rem;
  margin: 0 auto;
  margin-bottom: 4rem;
  position: relative;
  width: 42rem;
}

.thanks h2::after {
  content: "";
  width: 8rem;
  height: 8rem;
  background: url("../images/kira.webp");
  background-size: cover;
  position: absolute;
  top: 3rem;
  left: -10rem;
}

.thanks h2::before {
  content: "";
  width: 8rem;
  height: 8rem;
  background: url("../images/kira.webp");
  background-size: cover;
  position: absolute;
  top: 3rem;
  right: -10rem;
}

.thanks h3 {
  font-size: 2rem;
  line-height: 1.8;
  text-align: center;
}

/*--------------------------------------------

page-voice

------------------------------------------------*/
.page-voice {
  padding-top: 10rem;
}

.page-voice .voice-wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24rem;
  margin-bottom: 25rem;
  margin-top: 20rem;
  position: relative;
}

.page-voice .voice-wrap::after {
  content: "";
  width: 100%;
  height: 11rem;
  background: url("../images/single-news-kira.webp");
  background-size: cover;
  position: absolute;
  top: -16rem;
  left: 0;
}

.page-voice .voice-box {
  position: relative;
  padding-left: 8rem;
  padding-right: 10rem;
}

.page-voice .voice-box::after {
  content: "";
  width: 100%;
  height: 11rem;
  background: url("../images/single-news-kira.webp");
  background-size: cover;
  position: absolute;
  bottom: -18rem;
  left: 0;
}

.page-voice .voice-top p {
  width: 80%;
  margin-left: 8rem;
  padding: 5rem;
  padding-top: 6rem;
  margin-bottom: 4rem;
}

.page-voice .voice-top img {
  transform: translateX(0);
  left: 3rem;
  top: -3rem;
}

.page-voice .voice-bottom img {
  transform: translateX(0);
  left: initial;
  right: 4rem;
  top: -2rem;
}

.page-voice .voice-bottom p {
  width: 80%;
  margin-left: calc(20% - 8rem);
  padding: 5rem;
}


/* data-cateの値に応じて背景色を切り替え */
.voice-wrap .voice-box[data-cate="tel"] .cate {
  background: var(--want1);
}

.voice-wrap .voice-box[data-cate="face"] .cate {
  background: var(--want2);
}

.voice-wrap .voice-box[data-cate="chat"] .cate {
  background: var(--want3);
}

.voice-wrap .voice-box[data-cate="sns"] .cate {
  background: var(--want4);
}

.voice-box {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, background-color 0.3s ease;
}

/* アニメーション適用後 */
.voice-box.is-animated {
  opacity: 1;
  transform: translateY(0);
}

.media-box .img-box,
.quiz-box .img-box {
  overflow: hidden;
  border-radius: 0;
}

.media-box .img-box img,
.quiz-box .img-box img {
  transition: var(--transition);
  border-radius: 0;
}

.quiz-box .img-box {
  margin-bottom: 1.8rem !important;
}

.media-box:hover .img-box img,
.quiz-box:hover .img-box img {
  scale: 1.1;
}

/*--------------------------------------------

page-profile

------------------------------------------------*/
.page-rofile-top .mini {
  font-size: 2.4rem;
  display: block;
  margin-top: -6rem;
}

.page-voice-wrap {
  margin-top: 20rem;
  display: flex;
  flex-wrap: wrap;
  gap: 18rem;
}

.page-profile .sec_inner {
  position: relative;
  z-index: 5;
}

.page-profile .sec_inner::after {
  content: "";
  position: absolute;
  top: 80rem;
  right: -50rem;
  background: var(--pink);

  /* 白に近いピンクを使い、広範囲にぼかす */
  box-shadow:
    inset 0 0 5rem rgba(255, 255, 255, 0.6),
    /* 内側への広範囲な淡い光 */
    inset 0 0 1.5rem rgba(255, 255, 255, 0.4);
  /* 際（キワ）だけに細く白を足す */
  opacity: 0.8;
  width: 80rem;
  height: 80rem;
  border-radius: 50%;
  z-index: -1;
}

.page-profile .sec_inner::before {
  content: "";
  position: absolute;
  top: 150rem;
  left: -50rem;
  background: var(--yellow);
  /* 白に近いピンクを使い、広範囲にぼかす */
  box-shadow:
    inset 0 0 5rem rgba(255, 255, 255, 0.6),
    /* 内側への広範囲な淡い光 */
    inset 0 0 1.5rem rgba(255, 255, 255, 0.4);
  /* 際（キワ）だけに細く白を足す */
  opacity: 0.8;
  width: 80rem;
  height: 80rem;
  border-radius: 50%;
  z-index: -1;
}

.page-voice-box {
  background: var(--gray);
  border-radius: var(--radius2);
  width: 100%;
  position: relative;
  padding: 10rem 0 6rem;
  padding-left: 56rem;
}

.page-voice-box img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48rem;
}

.page-voice-box h3 {
  background: var(--gra);
  color: #fff;
  border-radius: var(--radius2);
  display: inline-block;
  padding: 0.3em 1.4em;
  font-size: 4rem;
  position: absolute;
  top: -4rem;
  left: 56rem;
}

.page-voice-box p {
  font-size: 1.8rem;
  line-height: 2;
}

.page-voice-box2 {
  padding-left: 12rem;
}

.page-voice-box2 h3 {
  left: 12rem;
}

.page-voice-box2 img {
  left: initial;
  right: 4rem;
}

.page-profile .single-news-right {
  height: fit-content;
  position: initial;
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 16rem;
  padding: 8rem 8rem;
}



.page-profile .single-news-right-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.page-profile .single-news-right-youtube-link {
  width: 40rem;
  padding-right: 12rem;
  position: relative;
}

.page-profile .single-news-right-youtube-link::after {
  content: "";
  position: absolute;
  top: 0rem;
  right: 6rem;
  background: var(--border);
  width: 2px;
  height: 100%;
}

.page-profile .single-news-right-youtube-many-link {
  width: calc(100% - 40rem);
}

.page-profile .news-kanren-box {
  flex-wrap: nowrap;
}

.page-profile .news-kanren-box a {
  border-bottom: none;
}

.page-profile .single-news-right section {
  margin-bottom: 0;
}

.page-profile .news-kanren-box a {
  line-height: 1.6;
  padding-bottom: 0;
}

.page-profile .news-kanren-box img {
  margin-bottom: 1rem;
}

.page-profile .single-news-right .single-news-right-youtube-many-link h3 {
  margin-bottom: 3.2rem;
}

.page-profile .youtube-link .button::after {
  right: 1.4rem;
}

.news-kanren-box .img-box img {
  transition: var(--transition);
}

.news-kanren-box .img-box img:hover {
  scale: 1.05;
}

/*--------------------------------------------

page-achi

------------------------------------------------*/
.page-achi .achi-wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12rem;
}

.page-achi-box {
  background: var(--gray);
  border-radius: var(--radius2);
  width: 100%;
  padding-left: 4rem;
  padding-right: 8rem;
  padding-bottom: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-achi .achi-box {
  width: 40rem;
  background: none;
  padding-bottom: 0;
}

.page-achi-box-right {
  width: calc(100% - 40rem);
  padding-left: 0rem;
  padding-top: 5rem;
}

.page-achi-box-right .achi-bottom-box-title {
  font-size: 2.8rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.page-achi .page-achi-box-right .achi-bottom-box-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* ここを5行に指定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-achi-box-right p {
  font-size: 1.8rem;
  line-height: 2;
}

.page-achi .page-achi-box-right p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  /* ここを5行に指定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-achi .sec_inner {
  display: flex;
  justify-content: space-between;
  position: relative;
}



.page-achi .achi-wrap {
  width: calc(100% - 30rem);
  margin-top: 1rem;
}

.page-achi .achi-cate {
  position: initial;
  display: inline-block;
  margin-bottom: 2rem;
}

/* --- ラベル（achi-cate）の色連動 --- */
.page-achi-box[data-achi="tel"] .achi-cate {
  background-color: var(--want1);
  color: #fff;
}

.page-achi-box[data-achi="face"] .achi-cate {
  background-color: var(--want2);
  color: #fff;
}

.page-achi-box[data-achi="chat"] .achi-cate {
  background-color: var(--want3);
  color: #fff;
}

.page-achi-box[data-achi="sns"] .achi-cate {
  background-color: var(--want4);
  color: #fff;
}

/* --- ボタンの色連動 --- */
.news-cate-button[data-achi-target="all"].is-active {
  background: var(--gra);
  border-color: transparent;
  color: #fff;
}

.news-cate-button[data-achi-target="tel"].is-active {
  background-color: var(--want1);
  border-color: var(--want1);
  color: #fff;
}

.news-cate-button[data-achi-target="face"].is-active {
  background-color: var(--want2);
  border-color: var(--want2);
  color: #fff;
}

.news-cate-button[data-achi-target="chat"].is-active {
  background-color: var(--want3);
  border-color: var(--want3);
  color: #fff;
}

.news-cate-button[data-achi-target="sns"].is-active {
  background-color: var(--want4);
  border-color: var(--want4);
  color: #fff;
}

/* ふわっとアニメーション */
.page-achi-box.is-animated {
  animation: fadeInUp 0.5s ease forwards;
}

/* --- 電話占い (tel) --- */
.page-achi-box[data-achi="tel"] .achi-bottom-box p {
  background: var(--want1);
}

.page-achi-box[data-achi="tel"] .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want1);
}

/* --- 対面占い (face) --- */
.page-achi-box[data-achi="face"] .achi-bottom-box p {
  background: var(--want2);
}

.page-achi-box[data-achi="face"] .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want2);
}

/* --- チャット占い (chat) --- */
.page-achi-box[data-achi="chat"] .achi-bottom-box p {
  background: var(--want3);
}

.page-achi-box[data-achi="chat"] .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want3);
}

/* --- SNS占い (sns) --- */
.page-achi-box[data-achi="sns"] .achi-bottom-box p {
  background: var(--want4);
}

.page-achi-box[data-achi="sns"] .achi-bottom-box h3::after {
  border-top: 2.0rem solid var(--want4);
}

/*--------------------------------------------

achi-single

------------------------------------------------*/
.achi-single-top .page-achi-box {
  background: none;
}

.achi-single-top .achi-img-box {
  margin-top: 5rem;
}

.achi-single-top .achi-box {
  padding-bottom: 0;
  background: none;
  width: 40rem;
}

.achi-single-top {
  padding-top: 15rem;
}

.achi-single-top .page-achi-box-right {
  padding-left: 8rem;
}

.achi-single-top .achi-cate {
  position: initial;
  margin-bottom: 2rem;
  display: inline-block;
}

.achi-single-top .page-achi-box-right .achi-bottom-box-title {
  font-size: 4rem;
}

.single-achi .page-achi-box {
  padding: 0;
}

.single-achi .achi-bottom-box {
  padding: 0;
}

.single-achi .achi-box {
  background: none;
  border-radius: 0;
  padding-bottom: 0;
}

.single-achi .news-kanren-box a {
  display: block;
  overflow: auto;
}

.single-achi .single-news-right section .achi-bottom-box h3,
.single-achi .single-news-right section .achi-bottom-box p {
  font-size: 1.4rem;
}

.single-achi .single-news-right section .achi-bottom-box h3 {
  margin-bottom: 3.5rem;
}

.single-achi .single-news-right section .achi-img-box {
  margin-top: 4rem;
}

.single-achi .news-kanren-box a {
  border-radius: 0;
}

.single-achi .news-kanren-box {
  gap: 0;
}

.other-achi {
  padding: 20rem 0;
  background: #f2eae8;
}

.page-top .page-achi-box::before {
  display: none;
}

/*--------------------------------------------

single-media

------------------------------------------------*/

.quiz-page-top .mini {
  display: block;
  font-size: 2.8rem;
  margin-top: 2.8rem;
}

.page-quiz-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3列表示 */
  gap: 8rem 4rem;
  width: calc(100% - 30rem);
}

.quiz-box {
  transition: opacity 0.3s ease;
  /* ふわっと切り替え */
  text-decoration: none;
  color: inherit;
}

/* アクティブなボタンのスタイル（以前のものを継承） */
.media-cate-button {
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-cate-button.is-active {
  background: var(--pink);
  color: #fff;
}

.page-quiz .cate-button-box {
  width: 30rem;
}

/* data-cateの値に応じて背景色を切り替え */
.page-quiz-wrap .quiz-box[data-cate="tel"] .cate {
  background: var(--want1);
}

.page-quiz-wrap .quiz-box[data-cate="face"] .cate {
  background: var(--want2);
}

.page-quiz-wrap .quiz-box[data-cate="chat"] .cate {
  background: var(--want3);
}

.page-quiz-wrap .quiz-box[data-cate="sns"] .cate {
  background: var(--want4);
}

.quiz-wrap .quiz-box,
.page-quiz-wrap .quiz-box,
.news-kanren-box.quiz-kanren-box a {
  position: relative;
}

.quiz-wrap .quiz-box::after,
.page-quiz-wrap .quiz-box::after {
  content: "1";
  background: var(--gray);
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  color: var(--black);
  font-size: 2.8rem;
  position: absolute;
  top: -2rem;
  left: -2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.4rem;
}

.quiz-wrap .quiz-box::before,
.page-quiz-wrap .quiz-box::before {
  content: "レベル";
  color: var(--black);
  font-size: 1.4rem;
  position: absolute;
  top: -0.8rem;
  left: -0.3rem;
  z-index: 2;
}

.news-kanren-box.quiz-kanren-box a::after {
  content: "1";
  background: var(--gray);
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  color: var(--black);
  font-size: 2.4rem;
  position: absolute;
  top: -1rem;
  left: -0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.4rem;
}

.news-kanren-box.quiz-kanren-box a::before {
  content: "レベル";
  color: var(--black);
  font-size: 1.2rem;
  position: absolute;
  top: -0.6rem;
  left: 0.6rem;
  z-index: 2;
}

.quiz-wrap .quiz-box.lebel-2::after,
.page-quiz-wrap .quiz-box.lebel-2::after {
  content: "2";
}

.quiz-wrap .quiz-box.lebel-3::after,
.page-quiz-wrap .quiz-box.lebel-3::after {
  content: "3";
}

/* --- レベル順に並べ替え --- */
.page-quiz-wrap .lebel-1 {
  order: 1;
  /* 一番上（最初） */
}

.page-quiz-wrap .lebel-2 {
  order: 2;
  /* 二番目 */
}

.page-quiz-wrap .lebel-3 {
  order: 3;
  /* 三番目（最後） */
}

.page-quiz .cate-button-box li {
  padding: 1em 1em 0.8em;
}

.single-quiz-wrap .cta-button::after {
  right: 2rem;
}

.page-quiz .cate-button-box li,
.page-news .cate-button-box li {
  padding: 1.3em 1em;
}

/*----------------------------------------*/
/* 外側の余白と中央寄せ */
.password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

/* パスワードボックス本体 */
.password-box {
  width: 100%;
  background: var(--gray);
  border-radius: 0 var(--radius2) var(--radius2) 0;
  padding: 4rem;
  text-align: center;
}

/* アイコン（あれば） */
.password-icon {
  width: 6.4rem;
  margin: 0 auto 2.4rem;
}

.password-box h3 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.password-lead {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--black2);
  margin-bottom: 1.4rem;
}

/* フォームエリア */
.password-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
  justify-content: center;
}

/* 入力欄 */
.password-form input[type="password"] {
  width: 100%;
  padding: 1.5rem 2rem;
  border: 0.1rem solid var(--black2);
  border-radius: 0.8rem;
  font-size: 1.6rem;
  background: #fff;
  transition: border-color 0.3s ease;
}

.password-form input[type="password"]:focus {
  outline: none;
  border-color: var(--pink);
}

/* 送信ボタン */
.password-submit {
  background: var(--pink);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1.5rem 6rem;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  width: 100%;
}

.password-submit:hover {
  opacity: 0.8;
}

/* クイズリストの上に出る警告 */
#quiz-lock-msg {
  background: rgba(255, 0, 0, 0.05);
  border: 0.1rem solid #ff0000;
  padding: 1.5rem;
  border-radius: 0.8rem;
  margin: 2.0rem auto;
  max-width: 60.0rem;
}

/* --- クイズ全体のプレビューエリア --- */
.quiz-preview-container {
  width: 100%;
  margin-top: 8rem;
}

/* --- 【重要】クリック不可にする設定 --- */
.quiz-display-only {
  pointer-events: none;
  /* マウス操作をすべて無効化 */
  user-select: none;
  /* テキスト選択も不可にする（任意） */
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}

/* --- 各問題のブロック --- */
.quiz-item {
  background: var(--gray);
  border-radius: var(--radius2);
  padding: 8rem 8rem;
  margin-bottom: 3.0rem;
  width: 100%;
}

.quiz-question {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2.0rem;
  line-height: 1.5;
}

/* --- 選択肢のリスト --- */
.quiz-options {
  list-style: none;
  padding: 4rem 4rem 2rem;
  border-radius: var(--radius3);
  margin: 0;
  background: #fff;
  position: relative;
}


.quiz-options li {
  margin-bottom: 1.2rem;
}

.quiz-options label {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
}

/* --- チェックボックスを完全な正方形に修正 --- */
.quiz-options input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.6rem;
  /* 縦横同じ数値 */
  height: 1.6rem;
  margin-right: 1.4rem;
  border-radius: 0;
  /* 角丸を 0 にして完全な正方形へ */
  cursor: pointer;
  background-color: #fff;
  position: relative;
  vertical-align: middle;
  transition: all 0.2s ease;
  box-sizing: border-box;
  /* 枠線を含めてサイズを固定 */
  position: relative;
  padding: 2rem;
  border-radius: 50%;
  border: 0.2rem solid var(--pink);
}

.quiz-options input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #53140d44;
  border-radius: 50%;
}

.single-quiz-wrap-next .quiz-options input[type="checkbox"]::after {
  display: none;
}

/* チェックが入った時：背景をピンク ＋ 白いチェックマーク */
.quiz-options input[type="checkbox"]:checked {
  background-color: var(--pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 40%;
  /* チェックの大きさ微調整 */
  background-position: center;
  background-repeat: no-repeat;
}

.quiz-preview-container label {
  width: 100%;
}

.quiz-fix-bottom {
  position: sticky;
  bottom: 4rem;
  left: 0;
  box-shadow: 0 0 40px #400c0555;
  overflow: hidden;
  border-radius: var(--radius2);
  margin-top: 8rem;

  /* --- 追加：ふわっと出すための設定 --- */
  opacity: 0;
  /* 最初は透明 */
  visibility: hidden;
  /* クリックもできないようにする */
  transition: opacity 0.5s ease, visibility 0.5s ease;
  /* 0.5秒かけて変化 */
  z-index: 100;
}

/* --- 表示された時のクラス --- */
.quiz-fix-bottom.is-show {
  opacity: 1;
  visibility: visible;
}

/* 入力欄を包む箱 */
.password-input-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* 入力欄：右側にアイコン分の余白を確保 */
.password-input-wrapper input {
  width: 100%;
  padding: 1.4rem;
  padding-right: 4.5rem !important;
  padding-left: 2rem;
}

/* 目のアイコンの配置 */
.password-toggle {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  cursor: pointer;
  width: 3.0rem;
  height: 3.0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.toggle-icon {
  width: 2.0rem;
  height: auto;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.password-toggle:hover .toggle-icon {
  opacity: 1.0;
}

.quiz-inst {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 8rem;
  line-height: 1.8;
  margin-top: 4rem;
}

.quiz-inst-h2 {
  font-size: 4rem !important;
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 8rem;
  position: relative;
}

.quiz-inst-h2::after {
  content: "";
  width: 103%;
  height: 8rem;
  background: url("../images/single-news-kira.webp");
  background-size: cover;
  position: absolute;
  top: -4rem;
  left: 0;
}

.quiz-inst-h2::before {
  content: "";
  width: 103%;
  height: 8rem;
  background: url("../images/single-news-kira.webp");
  background-size: cover;
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  rotate: 180deg;
}

.quiz-fix {
  border: 0.4rem solid transparent;
  background-image: linear-gradient(var(--gray), var(--gray)), var(--gra);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--radius2);
}

.quiz-single-top .cate {
  color: #fff;
  font-size: 1.4rem;
  padding: 0.3rem 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  border-radius: 0.3rem;
  font-weight: 700;
}

/*----------------------------------------*/

.single-quiz-wrap {
  width: calc(100% - 42rem);
}

.line-entry-box {
  background: #F4DFDE;
  padding: 4rem;
  border-radius: var(--radius2) 0 0 var(--radius2);
  height: fit-content;
  width: 55%;
}

.line-entry-box h3 {
  color: var(--button);
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 0.6rem;
}

.line-entry-box p {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  color: var(--black2);
}

.line-entry-box p.r {
  margin: 0;
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--button);
}

.line-entry-box .cta-button {
  font-size: 1.6rem;
  box-shadow: inset 0 0 2rem 0.5rem rgba(255, 255, 255, 0.8), inset 0 0rem 0.5rem rgba(255, 255, 255, 1);
}

.line-entry-box .cta-button img {
  width: 3rem;
}

.quiz-fix {
  display: flex;
  justify-content: flex-start;

}

.quiz-item .attention {
  background: #F4DFDE;
  border-radius: var(--radius3);
  border: 1px solid var(--button);
  padding: 2rem;
  margin-top: 0;
  margin-bottom: 2rem;
}

.quiz-item .attention p {
  color: var(--button);
  font-size: 1.8rem;
  font-weight: bold;
}

.single-quiz-wrap h2 {
  font-size: 3.2rem;
  margin-bottom: 2rem;
}

.quiz-item {
  position: relative;
}

.quiz-item::after {
  content: "";
  position: absolute;
  top: -2rem;
  left: -2rem;
  background: url("../images/quiz-number.webp");
  background-size: cover;
  width: 8rem;
  height: 8rem;
}

.quiz-item::before {
  content: "01";
  position: absolute;
  top: -0.2rem;
  left: 0.9rem;
  font-size: 3rem;
  color: var(--pink);
}


.quiz-kanren-box .quiz-box h3 {
  color: var(--black);
  font-size: 1.6rem;
  text-align: left;
}

.quiz-kanren-box .quiz .cate,
.page .quiz-kanren-box .cate {
  margin-top: -2rem;
  padding: 0.2rem 1.4rem 0.1rem;
  font-size: 1.2rem;
}

.kizi .quiz-kanren-box .img-box {
  margin-bottom: 0.8rem;
}

.quiz-kanren-box .quiz-box h3 {
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
  padding-left: 0;
  padding-right: 0;
}

.news-kanren-box.quiz-kanren-box a {
  border: none;
  border-radius: var(--radius3);
}

.news-kanren-box.quiz-kanren-box a .img-box {
  border-radius: var(--radius3);
}

.page .quiz-kanren-box .cate {
  font-size: 1.2rem;
  margin-left: 0;
}

.quiz-kanren-box {
  gap: 4rem;
  margin-top: 3rem;
}

/*--------------------------------------------

パスワード打った後のクイズ画面

------------------------------------------------*/
.single-quiz-wrap-next .quiz-preview-container {
  margin-top: 0;
}

/* 本番用：クリックを有効にする */
.single-quiz-wrap-next .quiz-display-only {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.quiz-btn-area {
  text-align: center;
  margin: 4.0rem 0;
}

.quiz-btn-area .button::after {
  background: none;
  content: "+";
  color: #fff;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  right: 4rem;
  width: initial;
  height: initial;
}

#submit-quiz {
  padding: 3.6rem 0;
  font-size: 2rem;
  font-weight: 900;
  background: var(--pink) !important;
  color: #fff;
  border: none;
  border-radius: 50rem;
  cursor: pointer;
  transition: opacity 0.3s;
}

#submit-quiz:hover {
  opacity: 0.8;
}

/* フィードバックエリア */
.answer-feedback {
  margin-top: 2.5rem;
  padding-top: 2.0rem;
  border-top: 0.2rem solid #e1d1d1;
}

.feedback-text {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: center;
}

.text-correct {
  color: #2ecc71;
}

/* 正解は緑 */
.text-incorrect {
  color: var(--button);
}

/* 不正解は赤 */

/* 正解の選択肢をハイライト */
.is-correct-option {
  background-color: rgba(46, 204, 113, 0.1);
  border: 0.2rem solid #2ecc71;
  border-radius: 0.8rem;
}

/* アコーディオンの見た目 */
.result-accordion {
  margin-top: 5.0rem;
  border-radius: var(--radius2);
  overflow: hidden;
}

.accordion-header {
  background: var(--pink);
  color: #fff;
  padding: 8rem 4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.accordion-header::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4rem;
  background: url("../images/arrow-top.webp");
  background-size: cover;
  width: 8rem;
  height: 8rem;
}

.accordion-header h3 {
  text-align: center;
  width: 100%;
  margin-bottom: 2rem;
}

.accordion-header h3 .big {
  font-size: 8rem;
  margin-right: 0.4rem;
  line-height: 1.2;
}

.accordion-header p {
  width: 100%;
  font-size: 1.8rem;
}

.accordion-content {
  padding: 3.0rem;
  background: #f9f9f9;
  text-align: center;
  font-size: 1.8rem;
  display: none;
  /* 初期は隠す */
}

.single-quiz-wrap-next .quiz-options::after {
  display: none;
}



.single-quiz-wrap-next .quiz-preview-container label {
  cursor: pointer;
}

/* 正解・不正解のテキスト */
.feedback-text {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2.0rem;
}

/* 正解：緑 */
.text-correct {
  color: #2ecc71;
}

/* 不正解：var(--button) */
.text-incorrect {
  color: var(--button);
}

/* 正解の選択肢を強調 */
.is-correct-option {
  border: 0.2rem solid #2ecc71 !important;
  background: rgba(46, 204, 113, 0.1) !important;
  border-radius: 0.8rem;
  padding: 1rem 0;
}

.single-quiz-wrap-next .kizi-voice-box p {
  background: #ebfaef;
  border: 1.6px solid #2ecc71;
}

.single-quiz-wrap-next .kizi-voice-box p::after {
  background: url("../images/sankaku-green.webp");
  background-size: cover;
}

.single-quiz-wrap-next .kizi-voice-box p .p {
  color: #04ac4a !important;
}

.single-quiz-wrap .button-wrap {
  margin-top: 12rem;
}

.other-achi,
.other-voice {
  padding: 12rem 0;
}

/*--------------------------------------------

404

------------------------------------------------*/
.not-found {
  background: #fff;
}

.not-found h1 {
  font-size: 4rem !important;
  position: relative;
}

.not-found h1::after {
  content: "";
  background: url("../images/not-found.webp");
  background-size: cover;
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 7.5rem;
  left: 37rem;
}

.not-found h1::before {
  content: "";
  background: url("../images/not-found.webp");
  background-size: cover;
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 7.5rem;
  right: 38rem;
}

.not-found h1 .big {
  font-size: 16rem;
  color: var(--pink);
}

.not-found .button {
  margin-top: 2rem;
}




/*----------------------------------------------------------
  
  プルダウン

  ------------------------------------------------------*/
/* --- 親ボタンの土台 --- */
.media-cate-button {
  display: block;
  /* 10px */
  overflow: hidden;
  cursor: pointer;
  /* 全体がクリック可能であることを示す */
}

/* ラベル部分（余白もしっかり確保） */
.parent-label {
  display: block;
  padding: 0.5rem 2rem;
  /* 20px 30px */
  pointer-events: none;
  /* ラベルをすり抜けて親(li)にクリックを伝える */
}

/* --- プルダウンの器（ぬる・ふわ設定） --- */
.sub-menu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;

  /* 閉じる時の設定 */
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease,
    visibility 0s 0.4s;
}

/* 開いた状態 */
.media-cate-button.is-open .sub-menu-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;

  /* 開く時は遅延なし */
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.4s ease,
    visibility 0s 0s;
}

/* --- 子メニュー（中身） --- */
.sub-menu {
  min-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* 25px */
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* 子ボタン（エキサイトなど） */
.sub-filter-btn {
  background: none !important;
  border-radius: 2.5rem;
  /* 40px */
  font-size: 0.875rem;
  /* 14px */
  cursor: default;
  padding: 1rem 1.4rem 0.8rem !important;
}

.parent-label {
  font-size: 1.8rem;
}

.gray2 {
  background: #f2eae8;
  padding: 0;
}

.gray2 .single-news-right {
  background: none;
  margin: 0;
}

/*--------------------------------------------

プライバシーポリシー

------------------------------------------------*/

.page-privacy .sec_inner {
  max-width: 108rem;
}

.page-privacy h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 0.6em;
}

.page-privacy h2::after {
  content: "";
  position: absolute;
  left: 0em;
  top: 0.25em;
  width: 0.8rem;
  height: 1.05em;
  background: var(--pink);
}


.privacy-section {
  margin-bottom: 4rem;
  background: var(--gray);
  padding: 6.4rem 8rem;
  border-radius: var(--radius2);
}

.privacy-section:last-of-type {
  margin-bottom: 8rem;
}

.privacy-section p,
.pra-h3,
.page-specified p {
  line-height: 2;
  font-size: 1.8rem;
}

.pra-h3 {
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

.page-specified .hyou h5 {
  width: 40rem;
}

.page-specified .hyou p {
  width: calc(100% - 40rem);
  display: flex;
  align-items: center;
}

.page-specified .hyou {
  margin-bottom: 8rem;
}

.page-specified .hyou p a {
  display: inline-block;
  color: var(--button);
  font-weight: bold;
  border-bottom: 1px solid var(--button);
  line-height: 1;
}

.indent-item {
  padding-left: 1em;
  /* ① 全体を文字1.5個分、右に寄せる */
  text-indent: -1em;
  /* ② 1行目だけを左に1.5個分、戻す */
}

.privacy-list {
  background: #fff;
  border-radius: var(--radius2);
  padding: 2.5rem 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-left: 1rem;
}

.privacy-list li {
  font-size: 1.6rem;
  width: 100%;
}

.izyou {
  margin-top: -6rem;
  margin-bottom: 6rem;
  padding-left: 0.5rem;
}

.bottom2 {
  margin-bottom: 2rem;
}

.bottom4 {
  margin-bottom: 4rem;
}

/*--------------------------------------------

スクロールアニメーション

------------------------------------------------*/

.ani-zoom-in {
  opacity: 0;
  transform: scale(1.05);
  /* 最初は少し大きく */
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.ani-zoom-in.is-animated {
  opacity: 1;
  transform: scale(1);
}

/*--------------------------------------------

ホバーアニメーション

------------------------------------------------*/
.page-achi-box {
  transition: var(--transition);
}

.page-achi-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  /* 親の角丸を継承 */
  padding: 3px;
  /* 線の太さ */
  background: var(--gra);
  /* ここにグラデーション */

  /* 内側をくり抜くマスク（CSSGridより簡単） */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0;
  /* 最初は透明 */
  transition: opacity 0.5s ease;
  /* opacityならヌルッと動く！ */
}

/* アニメーション完了後 */
.page-achi-box.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ホバー */
.page-achi-box.is-animated:hover::before {
  opacity: 1;
  /* グラデーションの線を表示 */
}

/*--------------------------------------------

メディアクエリ

------------------------------------------------*/
@media screen and (min-width: 1025px) {

  html {
    font-size: 0.53vw;
  }

}



/*--------------------------------------------










スマホ









------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .sp {
    display: block;
  }

  .pc {
    display: none;
  }

  html {
    font-size: 1.8vw;
  }

  .sec_inner {
    width: 84%;
  }

  .title {
    letter-spacing: 0;
  }

  .button {
    width: 100%;
    margin-left: 0;
    transform: translate(0);
    padding: 1.4em 0;
    font-size: 2.4rem;
  }

  .section {
    padding: 15rem 0;
  }

  .box {
    margin-left: 0.1em;
    margin-right: 0.1em;
  }

  .title .box {
    font-size: 5rem;
  }

  .title .small {
    margin-bottom: 1rem;
  }

  p {
    font-size: 2rem;
  }

  .title .small {
    font-size: 2rem;
  }

  .media .title .mini {
    font-size: 2.4rem;
  }

  .button.back {
    position: relative;
  }

  .button.back::before {
    position: initial;
    /* \3000 が全角スペースのコードです */
    content: "\3000";
  }

  /*--------------------------------------------

header

------------------------------------------------*/

  header {
    background: #fff;
    height: 7rem;
  }

  header .cta-button {
    display: none;
  }

  header.is-scrolled::after {
    display: none;
  }

  header.is-scrolled {
    height: 7rem !important;
  }

  header nav ul {
    position: initial;
    width: 100%;
  }

  /*--------------------------------------------

ハンバーガーボタン

------------------------------------------------*/
  /* --- 1. ハンバーガーボタン（三本線） --- */
  .hamburger {
    position: fixed;
    top: 1.1rem;
    right: 5%;
    width: 7rem;
    height: 5rem;
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    /* 線の間隔 */
  }

  .hamburger.is-active {
    top: 2rem;
    right: 4%;
  }

  .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--pink);
  }

  /* クリック時（is-active）のアニメーション */
  .hamburger.is-active span:nth-child(1) {
    transform: translateY(1.45rem) rotate(45deg);
  }

  .hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.is-active span:nth-child(3) {
    transform: translateY(-0.6rem) rotate(-45deg);
  }

  /* --- 2. ナビゲーション本体 --- */
  header nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--pink);
    /* 背景色 */
    z-index: 999;
    padding: 80px 20px 40px;
    overflow-y: auto;

    /* 最初は隠す（透明度と位置） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  header nav.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* --- 3. メニューリスト --- */
  header nav ul {
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
  }

  header nav>ul>li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  header nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1.5rem 0;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
  }


  /* --- スマホ専用ナビゲーションのスタイル --- */
  nav.sp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--pink);
    /* 背景を暗くして文字を際立たせる */
    z-index: 999;
    padding: 12rem 4rem;
    overflow-y: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
  }

  /* メニューが開いた時 */
  nav.sp.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .hamburger.is-active span {
    background-color: #ffffff !important;
  }

  /* リスト全体の装飾 */
  nav.sp ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: fit-content;
    gap: 0.1vh;
  }

  nav.sp ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
  }

  nav.sp ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding-bottom: 2rem;
    font-size: 2rem;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
    position: relative;
    padding-left: 5rem;
  }

  nav.sp ul li a::after {
    content: "";
    background: url("../images/kira-white.webp");
    background-size: cover;
    width: 3.4rem;
    height: 3.4rem;
    position: absolute;
    top: 1.4rem;
    left: 0rem;
  }

  nav.sp ul li a::before {
    content: "";
    background: url("../images/arrow-white.webp");
    background-size: cover;
    width: 1rem;
    height: 1.7rem;
    position: absolute;
    top: 2rem;
    right: 0rem;
  }

  /* 背景固定用 */
  body.overflow-hidden {
    overflow: hidden;
  }

  .header_rogo img {
    width: 28rem;
    left: 5%;
    top: 1.35rem;
  }

  .sp ul .cta-button {
    display: flex;
  }

  header .cta-button {
    position: initial;
    font-size: 2.2rem;
    padding: 4rem 2rem;
    width: 105%;
    margin-left: -2.5%;
    margin-top: 2rem;
  }

  header .cta-button img {
    width: 4rem;
  }

  header .cta-button-box p {
    margin-bottom: -1rem;
  }

  /*--------------------------------------------

.top

------------------------------------------------*/
  .top {
    height: 295rem;
    background: url("../images/top-sp.webp");
    background-size: cover;
    background-position: top;
    padding-top: 10rem;
  }

  .top h1 {
    font-size: 3.6rem;
    line-height: 1.8;
    text-align: center;
    opacity: 0;
  }

  .top .cta-bottom {
    width: 100%;
    margin-left: 0;
    scale: 1;
    margin-top: 32rem;
  }

  .top .king-wrap {
    display: flex;
    gap: 1rem;
    opacity: 0;
  }

  .top .cta-button-box {
    margin-top: -18rem;
  }

  .top .cta-button {
    font-size: 2.2rem;
  }

  .cta-button::after {
    right: 2.5rem;
  }

  .cta-button img {
    width: 4.5rem;
  }

  .top .sec_inner {
    height: auto;
    padding-top: 5rem;
  }

  .top .cta-button-box {
    margin-left: -0.5rem;
    width: 73%;
  }

  /*--------------------------------------------

.concept

------------------------------------------------*/
  .concept {
    padding-top: 10rem;
  }

  .concept .title {
    margin-bottom: 4rem;
    line-height: 1.8;
    margin-left: 1rem;
  }

  .concept h3 {
    margin-top: 4rem;
    margin-bottom: 4rem;
    font-size: 2.8rem;
    line-height: 2;
  }

  .slider .img-box {
    padding: 0 1.6rem;
  }

  .concept-3 {
    margin-bottom: 1rem;
  }

  /*--------------------------------------------

.want

------------------------------------------------*/
  .want {
    padding-bottom: 12rem;
    background: #fff;
    padding-top: 5rem;
  }

  .want::after {
    content: "";
    width: 70rem;
    height: 42rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -12rem;
    left: -9.5rem;
    z-index: -1;
  }

  .want-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
  }

  .want-box p {
    display: none;
  }

  .want-box {
    background: none;
  }

  .want-box h3 {
    margin-top: 2rem;
  }

  /*--------------------------------------------

.vision

------------------------------------------------*/
  .vision {
    position: relative;
    padding-top: 13rem;
  }

  .vision::after {
    content: "";
    background: url("../images/arrow-cta-sp.webp");
    background-size: cover;
    width: 12.5rem;
    height: 5.6rem;
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .vision .title {
    margin-bottom: 6.4rem;
  }

  .vision .title .box {
    letter-spacing: -0.05em;
  }

  .vision-wrap {
    gap: 0;
  }

  .vision-box-box {
    padding: 4rem;
  }

  .hukidasi-box p {
    font-size: 2rem;
  }

  .hukidasi-box {
    width: 100%;
  }

  .vision-img-box h3 {
    font-size: 4rem;
    width: 100%;
    margin-bottom: 3rem;
  }

  .skill-box h4 {
    font-size: 2.8rem;
  }

  .vision-img-box {
    width: 100%;
    margin-left: 0;
    margin-top: -14rem;
  }

  .vision-img-box img {
    width: 80%;
    margin: 0 auto;
  }

  .skill-box p {
    padding: 0.7em 1.4em 0.6em;
    font-size: 2rem;
  }

  .skill-wrap {
    gap: 0.5rem;
  }

  /* 1. Splideの土台を強制リセット（右ズレの根源を断つ） */
  #vision-slider-sp.splide,
  #vision-slider-sp .splide__track {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    /* 画面幅いっぱいに固定 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* 物理的に画面中央へ */
    overflow: hidden !important;
  }

  /* 2. リストを「ただの横並び」にリセット */
  #vision-slider-sp .splide__list {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    list-style: none !important;
  }

  /* 3. スライドの幅を「チラ見せ用」に数学的に固定 */
  #vision-slider-sp .splide__slide {
    width: 85% !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.4s;
    box-sizing: border-box !important;
    padding: 0 1.5rem !important;
  }

  /* 4. 中身（Box）を中央に寄せる */
  #vision-slider-sp .vision-box-box {
    width: 100% !important;
    /* スライド内で中央配置 */
  }

  /* アクティブ設定 */
  #vision-slider-sp .splide__slide.is-active {
    opacity: 1 !important;
  }



  .vision-bottom {
    width: 100%;
    font-size: 2.6rem;
  }

  /*--------------------------------------------

.achi

------------------------------------------------*/
  .achi .title {
    font-size: 3.6rem;
  }

  .achi .title .box {
    letter-spacing: 0.05em !important;
  }

  .achi-box.splide__slide {
    width: 80% !important;
  }

  .achi-bottom-box {
    padding: 0 3rem;
  }

  .achi-box p {
    line-height: 1.7 !important;
  }

  .achi .splide__arrow--next,
  .media .splide__arrow--next,
  .quiz .splide__arrow--next,
  .media .splide__arrow--next,
  .vision .splide__arrow--next {
    right: 1rem !important;
  }

  .achi .splide__arrow--prev,
  .media .splide__arrow--prev,
  .quiz .splide__arrow--prev,
  .media .splide__arrow--prev,
  .vision .splide__arrow--prev {
    left: 1rem !important;
  }

  .achi .button {
    margin-top: -3.4rem;
  }

  .achi-bottom-box p {
    font-size: 2rem;
  }

  .achi-bottom-box h3 {
    font-size: 2rem;
  }

  #achi-slider {
    margin-top: 4rem;
  }

  .achi .splide__arrow--prev {
    top: 45% !important;
  }

  .achi-cate {
    left: 3rem;
  }

  /*--------------------------------------------

.cta

------------------------------------------------*/
  .cta {
    background: url("../images/cta-back-sp.webp");
    background-size: cover;
    padding: 15rem 0;
  }

  .cta-wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 8rem;
  }

  .cta-box {
    padding: 5rem 5rem;
  }

  .cta-box h3 {
    font-size: 2.8rem;
    margin-top: 2rem;
  }

  .cta-box::after {
    top: initial;
    right: initial;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: url("../images/arrow-cta-sp.webp");
    background-size: cover;
    width: 6rem;
  }

  .cta-bottom {
    flex-wrap: wrap;
  }

  .cta-button {
    width: 106%;
    margin-left: -3%;
    padding: 1.4em 0;
    box-shadow: inset 0 0 3rem 1rem rgba(255, 255, 255, 0.5), inset 0 0rem 3rem rgba(255, 255, 255, 0.602) !important;
  }

  .king-wrap {
    width: 100%;
  }

  .cta-button-box {
    width: 100%;
  }

  .king-wrap {
    display: grid;
    /* 4等分にする（中央に配置しやすくするため） */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* 1つ目：左から2枠分 */
  .king-box:nth-child(1) {
    grid-column: 1 / 3;
  }

  /* 2つ目：右側の2枠分 */
  .king-box:nth-child(2) {
    grid-column: 3 / 5;
  }

  /* 3つ目：真ん中の2枠分（ここがポイント！） */
  .king-box:nth-child(3) {
    grid-column: 2 / 4;
    margin-top: -3.6rem;
  }

  .cta-button-box {
    margin-top: 6rem;
  }

  .cta-message-img {
    width: 40rem;
  }

  /*--------------------------------------------

reason

------------------------------------------------*/
  .reason-box {
    flex-wrap: wrap;
  }

  .reason-box-left {
    width: 115%;
  }

  .reason-box-right {
    width: 100%;
    padding-left: 0;
    margin-top: 4rem;
  }

  .reason .number {
    top: 0;
    right: 0;
  }

  .reason-box-right img {
    width: 100%;
  }

  .reason-box2 .reason-box-left {
    order: 1;
  }

  .reason-box-right h3 {
    font-size: 3.6rem;
  }

  .reason-box-right h3 .box {
    margin-left: 0;
  }

  .reason-box-right p {
    font-size: 2rem;
  }

  .reason-box3 h3 .box {
    font-size: 3.4rem;
    padding: 0.05em 0.3em 0;
  }

  .reason-wrap {
    gap: 15rem;
  }

  .reason-box2 .number {
    left: 0;
  }

  /*--------------------------------------------

profile

------------------------------------------------*/
  .profile .title {
    text-align: center;
  }

  .profile p {
    width: 100%;
  }

  .profile h3 {
    margin-top: 4rem;
    font-size: 3.2rem;
  }

  .profile h3 .box {
    font-size: 4rem;
  }

  /*--------------------------------------------

teacher

------------------------------------------------*/
  .teacher-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 8rem 2rem;
  }

  .teacher-box p {
    font-size: 1.8rem;
  }

  .teacher-box h3 {
    font-size: 3.2rem;
    margin-top: 0.2rem;
  }

  /*--------------------------------------------

voice

------------------------------------------------*/
  .voice {
    padding-bottom: 24rem;
  }

  .voice .splide__slide {
    width: 85% !important;
    margin: 0 !important;
  }

  .voice .splide__arrow--prev {
    left: 2rem !important;
    top: 45% !important;
  }

  .voice .splide__arrow--next {
    right: 2rem !important;
  }

  .voice .button {
    margin-top: 4rem;
  }

  .splide__arrow {
    width: 5.6rem !important;
    height: 5.6rem !important;
  }

  #voice-slider {
    margin-top: 4rem;
  }

  .voice-top p,
  .voice-bottom p {
    font-size: 1.95rem;
  }

  /*--------------------------------------------

present-cta

------------------------------------------------*/
  .present-cta {
    background: url("../images/present-cta-sp.webp");
    background-size: cover;
  }

  .present-cta-top {
    font-size: 2rem;
    width: var(--in-sp);
    padding: 1.6em 1.2em;
    top: -9rem;
  }

  .present-cta-top .big {
    font-size: 3.6rem;
    display: block;
    margin-bottom: -2rem;
  }

  .present-cta-top::after {
    bottom: -10rem;
  }

  .present-cta .title::before {
    content: "";
    background: url(../images/present.webp);
    background-size: cover;
    width: 5.05rem;
    height: 6rem;
    position: absolute;
    top: -2.6rem;
    right: 6.5rem;
  }

  .present-cta .title::after {
    content: "";
    background: url(../images/present.webp);
    background-size: cover;
    width: 5.05rem;
    height: 6rem;
    position: absolute;
    top: -2.6rem;
    left: 6rem;
  }

  .present-cta {
    padding-top: 25rem;
  }

  .present-cta-box-box {
    padding: 4rem;
  }

  .tokuten {
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0 !important;
    top: -2.5rem !important;
    width: 13rem !important;
    display: none;
  }

  .present-cta-box-box h3 {
    width: 100%;
  }

  .present-cta-box-box .present-img {
    position: initial;
    width: 100%;
    padding: 0;
    margin-top: 2rem;
  }

  .present-cta-box-box h3 .box {
    margin: 0;
    margin-top: 1rem;
  }

  .present-cta .title {
    margin-bottom: -4rem;
  }

  .cta-button-box h3 {
    font-size: 3.6rem;
    margin-bottom: 4rem;
    line-height: 1.3;
  }

  .cta-button-box h3 .big {
    font-size: 5rem;
  }

  .present-cta-box-box-2 {
    padding-bottom: 0;
  }

  /*--------------------------------------------

step-box

------------------------------------------------*/
  .step-box {
    flex-wrap: wrap;
  }

  .step-box-right {
    padding: 4rem;
    width: 100%;
  }

  .step-box img {
    width: 100%;
  }

  .step-box-right-top {
    flex-wrap: wrap;
  }

  .flex {
    width: 100%;
  }

  .step-box-right-top img {
    width: 8rem;
    position: absolute;
    top: -2rem;
    left: -1rem;
  }

  .flex h3 {
    font-size: 3.2rem;
    text-align: left;
    margin-bottom: 4rem;
  }

  .step-box::after {
    width: 11rem;
    height: 5rem;
    bottom: -9rem;
    background: url(../images/arrow-cta-sp.webp);
    background-size: cover;
  }

  .step-wrap {
    gap: 12rem;
    margin-top: 8rem;
  }

  .step-box-right p {
    font-size: 2rem;
    margin-top: 1.2rem;
  }

  .step-box-last h3 .box {
    margin-bottom: 0.2rem;
    padding: 0.6rem 2rem 0.3rem;
  }

  .step-box-last h3 .bottom {
    margin-bottom: 2rem;
    margin-top: -1rem;
  }

  .step-box-last .flex h3 {
    margin-bottom: 1rem;
  }

  .step-can-box span {
    padding: 0.8rem 1rem 1.4rem;
    font-size: 1.78rem;
  }

  .step-box-left {
    width: 100%;
  }

  /*--------------------------------------------

faq

------------------------------------------------*/
  .faq-question {
    padding: 2.4rem 4rem 2.4rem 6rem;
  }

  .faq-question::before {
    left: 2rem;
  }

  .faq-question::after {
    right: 2.4rem;
  }

  .faq-question-icon-plus {
    right: 2.4rem;
  }

  .faq-answer-inner {
    padding-left: 6rem;
  }

  .faq-answer-inner::before {
    left: 2rem;
  }

  .cta-flex .title {
    padding-left: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    line-height: 1.7;
  }

  .cta-flex p {
    font-size: 2rem;
    padding-left: 0;
    margin-top: 4rem;
  }

  .cta-flex {
    flex-wrap: wrap;
  }

  /*--------------------------------------------

Q&A

------------------------------------------------*/

  .faq-answer p {
    font-size: 2rem;
  }

  /*--------------------------------------------

quiz

------------------------------------------------*/


  .quiz-box.splide__slide {
    width: 88% !important;
    margin: 0 !important;
  }

  .quiz-p {
    margin-bottom: -1rem;
  }

  .quiz-wrap .quiz-box::after,
  .page-quiz-wrap .quiz-box::after {
    top: -1rem;
    left: -1rem;
  }

  .quiz-wrap .quiz-box::before,
  .page-quiz-wrap .quiz-box::before {
    left: 0.9rem;
    top: 0;
  }

  .quiz .button {
    margin-top: -2rem;
  }

  /*--------------------------------------------

media

------------------------------------------------*/

  .media .title .box {
    font-size: 4.5rem;
  }

  .media-box.splide__slide {
    width: 82% !important;
  }

  #media-slider {
    margin-top: -2rem;
  }

  .huki {
    display: block;
    position: absolute;
    top: -32rem;
    left: 8%;
    transform: translateX(0);
    font-size: 2.2rem;
    background: var(--gra);
    border-radius: var(--radius2);
    color: #fff;
    padding: 4rem 0rem;
    width: var(--in-sp);
    font-weight: 700;
  }

  .huki .big {
    font-size: 2.8rem;
  }

  .huki::after {
    content: "";
    position: absolute;
    bottom: -10rem;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/arrow-3.webp);
    background-size: cover;
    width: 9.5rem;
    height: 9rem;
  }

  /*--------------------------------------------

news

------------------------------------------------*/
  .news .title,
  .company .title {
    font-size: 4.5rem;
  }

  .news .sec_inner {
    flex-wrap: wrap;
  }

  .cate-button-box {
    width: 100%;
    padding-right: 0;
  }

  .cate-button-box li {
    width: 48.5%;
    font-size: 2rem;
  }

  .news-wrap {
    width: 100%;
    gap: 4rem;
    margin-top: 4rem;
  }

  .news-small-box .cate {
    font-size: 1.4rem;
  }

  .news-box h3 {
    padding-right: 2rem;
    line-height: 1.8;
  }

  .news-box h3::after {
    top: 2rem;
  }

  .news .button {
    margin-top: 0;
  }

  /*--------------------------------------------

company

------------------------------------------------*/
  .company .sec_inner {
    flex-wrap: wrap;
  }

  .company-wrap {
    width: 100%;
    padding: 0;
  }

  .company-box h3 {
    width: 14rem;
  }

  .map-container {
    width: 100%;
    margin-top: 4rem;
  }

  .company-box p {
    font-size: 2rem;
  }

  /*--------------------------------------------

footer

------------------------------------------------*/
  .footer {
    padding-bottom: 4rem;
  }

  .footer-top {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-top a img {
    width: 40rem;
    margin-left: -1.5rem;
  }

  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding-left: 0;
    gap: 3rem;
    margin-top: 8rem;
  }

  .footer-nav {
    width: 100%;
  }

  .footer-nav ul li {
    width: 100%;
  }

  .footer-nav ul a,
  .footer-bottom-nav ul a {
    position: relative;
    width: 100%;
    display: block;
    font-size: 2rem;
    font-weight: 700;
    padding-left: 5rem;
  }

  .footer-nav ul a::before,
  .footer-bottom-nav ul a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/kira-white.webp");
    background-size: cover;
    width: 3rem;
    height: 3rem;
  }

  .footer-nav ul a::after,
  .footer-bottom-nav ul a::after {
    content: "";
    width: 1rem;
    height: 1.8rem;
    background: url("../images/arrow-white.webp");
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
  }

  .footer-bottom {
    flex-wrap: wrap;
  }

  .footer p {
    order: 2;
    text-align: center;
    width: 100%;
  }

  .footer-bottom-nav {
    order: 1;
    width: 100%;
    margin-bottom: 10rem;
  }

  .footer-bottom-nav ul {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
  }

  .footer-bottom-nav ul a {
    font-size: 2rem;
    position: relative;
    width: 100%;
    display: block;
  }

  /*--------------------------------------------

page-top

------------------------------------------------*/
  .page-top {
    padding: 15rem 0 10rem;
    clip-path: ellipse(110% 100% at 50% 0%);
  }

  .page-top .title {
    margin-bottom: 0rem;
  }

  .page-news .sec_inner {
    flex-wrap: wrap;
  }

  .page {
    padding: 10rem 0 15rem;
  }

  /*--------------------------------------------

page-news

------------------------------------------------*/
  .page-news .cate-button-box {
    margin-bottom: 2rem;
    position: initial;
  }

  .pagination-link {
    font-size: 2.5rem;
  }

  .news-box h3 {
    font-size: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .page .cate {
    margin-top: 0;
    font-size: 1.4rem;
  }

  .news-box h3::after {
    top: 1.8rem;
  }

  /*--------------------------------------------

single-news

------------------------------------------------*/
  .news-single-top h1::after {
    height: 7.7rem;
    top: -12rem;
  }

  .news-single-top h1::before {
    height: 7.7rem;
    bottom: -7rem;
    width: 112%;
    left: -3.5rem;
  }

  .news-single-top h1::after {
    width: 112%;
    left: -2rem;
  }

  .news-single-top {
    padding-top: 20rem;
    clip-path: ellipse(140% 100% at 50% 0%);
  }

  .news-single-top h1 {
    margin-bottom: 8rem !important;
    text-align: left !important;
  }

  .single-news .sec_inner {
    flex-wrap: wrap;
  }

  .single-news-left {
    width: 100%;
    padding: 0;
  }

  .mokuzi {
    padding: 6rem 4rem;
    margin-bottom: 12rem;
  }

  .point {
    padding: 6rem 4rem;
  }

  .mokuzi li a,
  .point li {
    font-size: 2rem;
    line-height: 1.8;
    padding-left: 0;
  }

  .mokuzi li {
    padding-left: 4rem;
    padding-right: 2rem;
  }

  .mokuzi li::before,
  .point li::before {
    top: 0;
    left: -0.3em;
  }

  .mokuzi li::after {
    right: -1rem;
    top: 0.8rem;
  }

  .mokuzi h4,
  .point h4 {
    text-align: center;
  }

  .kizi-h2 {
    padding: 0.8em 1.2em;
    letter-spacing: 0.05em;
  }

  .point li {
    padding-left: 4rem;
  }

  .point li::after {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 0em;
    left: -1rem;
  }

  .kizi .img-box {
    margin-bottom: 4rem;
  }

  .single-news-right .kizi .img-box {
    margin-bottom: 1rem;
  }

  .hyou h5 {
    width: 100%;
    font-size: 2rem;
  }

  .hyou p {
    width: 100%;
  }

  .hyou-box {
    display: flex;
    flex-wrap: wrap;
  }

  .kizi-voice-box {
    flex-wrap: wrap;
  }

  .kizi-voice-box p {
    width: 100%;
  }

  .kizi-voice-box img {
    width: 12rem;
    margin: 0 auto;
    margin-bottom: -2.5rem;
    position: relative;
    z-index: 5;
  }

  .kizi-voice-box p::after {
    display: none;
  }

  .kizi-voice-box.right p {
    order: 2;
  }

  .kizi-voice-box.right img {
    order: 1;
  }

  .single-news-right {
    width: 100%;
    margin-top: 12rem;
    padding: 8rem 4rem 4rem;
  }

  .single-news-right section h3 {
    font-size: 2.8rem;
  }

  .news-kanren-box a h4 {
    font-size: 2rem;
  }

  .single-news-right section {
    margin-bottom: 8rem;
  }

  .pagination-container {
    margin-top: 8rem;
  }

  .news-single-top .news-small-box {
    justify-content: start;
  }

  /*--------------------------------------------

page-quiz

------------------------------------------------*/
  .page-quiz-wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 8rem;
    margin-top: 8rem;
    width: 100%;
  }

  .page-quiz-wrap .cate {
    margin-top: 1.6rem;
  }

  .page-quiz .cate-button-box,
  .page-achi .cate-button-box,
  .page-media .cate-button-box,
  .page-voice .cate-button-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .item-top {
    /* 1番目の要素だけ、2列分（1から3のラインまで）を占有させる */
    grid-column: 1 / 3;
    text-align: center;
  }

  .page-quiz .cate-button-box li,
  .page-achi .cate-button-box li,
  .page-media .cate-button-box li,
  .page-voice .cate-button-box li {
    width: 100%;
    text-align: center;
  }

  .quiz-page-top .mini {
    font-size: 2rem;
    letter-spacing: 0.05em;
  }

  /*--------------------------------------------

page-profile

------------------------------------------------*/
  .page-voice-wrap {
    margin-top: 14rem;
    gap: 15rem;
  }

  .page-voice-box {
    padding-left: 0;
    padding: 10rem 4rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4rem;
  }

  .page-voice-box p {
    font-size: 2rem;
  }

  .page-voice-box img {
    position: initial;
    width: 100%;
  }

  .page-voice-wrap .page-voice-box img,
  .page-voice-wrap .page-voice-box picture {
    order: 2;
  }

  .page-voice-wrap .page-voice-box div {
    order: 1;
  }

  .page-voice-box h3 {
    left: 0%;
    width: 100%;
    font-size: 4rem;
    text-align: center;
    padding: 0.4em 0;
    letter-spacing: 0.02em;
  }

  .page-profile .single-news-right {
    padding: 8rem 4rem;
    margin-top: 12rem;
  }

  .page-profile .single-news-right-div {
    flex-wrap: wrap;
    gap: 12rem;
  }

  .page-profile .single-news-right-youtube-link {
    width: 100%;
    padding-right: 0;
  }

  .single-news-right section h3 {
    text-align: center;
  }

  .single-news-right section .button::after {
    top: 3.05rem;
  }

  .page-profile .single-news-right-youtube-many-link {
    width: 100%;
  }

  .youtube-link h6 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .youtube-link .button {
    font-size: 2rem;
  }

  .page-profile .single-news-right-youtube-link::after {
    right: initial;
    left: 0;
    top: initial;
    bottom: -6rem;
    width: 100%;
    height: 2px;
  }

  .single-news-right section h3 {
    font-size: 3.2rem;
  }

  .page-profile .news-kanren-box {
    flex-wrap: wrap;
  }

  .news-kanren-box {
    gap: 6rem;
    margin-top: 4rem;
  }

  .page-profile .sec_inner::after {
    width: 40rem;
    height: 40rem;
    right: -20rem;
    top: 155rem;
  }

  .page-profile .sec_inner::before {
    width: 40rem;
    height: 40rem;
    left: -20rem;
    top: 313rem;
  }

  .page-profile .news-kanren-box a

  /*--------------------------------------------

page-voice

------------------------------------------------*/
  .page-voice .voice-wrap::after {
    height: 8rem;
    top: -18rem;
  }

  .page-voice .voice-box {
    padding: 0;
  }

  .button.back {
    padding-left: 0;
  }

  .media-single-top-wrap {
    flex-wrap: wrap;
    gap: 4rem;
  }

  .media-single-top .media-single-top-wrap .right {
    width: 100%;
    padding-left: 0;
  }

  .media-single-top {
    clip-path: ellipse(150% 100% at 50% 0%);
  }

  .quiz-fix {
    flex-wrap: wrap;
  }

  .line-entry-box {
    width: 100%;
  }

  .password-container {
    width: 100%;
  }

  .quiz-preview-container {
    margin-top: 4rem;
  }

  .quiz-item {
    padding: 8rem 4rem;
  }

  .quiz-item .attention p {
    text-align: left;
    font-size: 1.7rem !important;
    line-height: 1.6;
  }

  .quiz-item::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .quiz-item::after {
    left: 49%;
    transform: translateX(-50%);
  }

  .quiz-question {
    line-height: 1.7;
  }

  .quiz-box h3 {
    font-size: 2.2rem;
    text-align: left;
  }

  .quiz-kanren-box .quiz-box h3 {
    text-align: left;
    font-size: 2.2rem;
  }

  .page .quiz-kanren-box .cate {
    margin-top: 1rem;
  }

  .cate-button-left {
    width: 100%;
    padding-right: 0;
    position: initial;
    margin-bottom: 8rem;
  }

  .page-media .cate-button-left {
    margin-bottom: 0;
  }

  .sub-menu-set {
    padding-right: 0;
    gap: 0.6rem;
  }

  .sub-menu-wrap {
    width: 100%;
  }

  /*--------------------------------------------

single-quiz

------------------------------------------------*/
  .single-quiz-wrap {
    width: 100%;
  }

  .line-entry-box,
  .password-box {
    padding: 6rem 3rem;
  }

  .line-entry-box h3,
  .password-box h3 {
    margin-bottom: 1.4rem;
    font-size: 2.8rem;
  }

  .password-submit {
    font-size: 2rem;
    padding: 2rem;
  }

  .password-form input[type="password"] {
    font-size: 2rem;
    padding: 2rem;
  }

  .password-input-wrapper input {
    font-size: 2rem;
    padding: 2rem;
  }

  .password-input-wrapper .cta-button {
    padding: 3rem;
    font-size: 1.8rem;
  }

  .line-entry-box .cta-button {
    font-size: 1.6rem;
  }

  .quiz-fix-bottom.is-show {
    bottom: 0;
    width: 100vw;
    margin-left: -8vw;
    border-radius: 0;
    border: none;
    margin-top: 20rem;
    margin-bottom: -22rem;
  }

  .quiz-fix-bottom.is-show h3 {
    display: none;
  }

  .quiz-fix-bottom.is-show .line-entry-box {
    padding-bottom: 0;
    padding-top: 3rem;
    background: var(--gray);
  }

  .quiz-fix-bottom .password-box {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .quiz-fix-bottom .cta-button {
    font-size: 2rem;
  }

  .kizi-voice-box p {
    padding: 4rem 3rem;
  }

  .quiz-item {
    padding: 8rem 3rem;
  }

  .quiz-options {
    padding: 4.5rem 3rem 2rem;
    border-radius: var(--radius3);
  }

  .quiz-options li {
    margin-bottom: 2rem;
  }

  .quiz-question {
    font-size: 2.4rem;
  }

  .quiz-options label {
    font-size: 2rem;
  }

  .answer-feedback {
    margin-top: 5rem;
    padding-top: 5rem;
  }

  .single-quiz-wrap-next .kizi-voice-box p {
    font-size: 2rem;
  }

  .accordion-header {
    padding-bottom: 16rem;
  }

  .accordion-header::after {
    top: initial;
    bottom: 6rem;
    transform: translateX(-50%);
    left: 50%;
  }

  #submit-quiz {
    font-size: 2.4rem;
  }

  .quiz-options input[type="checkbox"] {
    padding: 2rem;
    border-radius: 50%;
    border: 0.15rem solid var(--pink);
  }

  .single-quiz-wrap {
    margin-top: 4rem;
  }


  /*--------------------------------------------

page-contact

------------------------------------------------*/
  .page-contact h2 {
    font-size: 2rem;
    text-align: left;
  }

  .single-contact-box {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .page-contact .attention {
    text-align: left;
    font-size: 1.6rem;
  }

  label {
    width: 100%;
    font-size: 2rem;
  }

  input,
  textarea {
    width: 100%;
    font-size: 2rem;
    padding: 1.4em 1.4em;
  }

  .page-voice .voice-top p {
    width: 100%;
    margin-left: 0%;
    font-size: 2rem;
    margin-bottom: 4rem;
    padding-top: 8rem;
  }

  .page-voice .voice-top img {
    left: 50%;
    transform: translateX(-50%);
    top: -9rem;
    width: 14rem;
  }

  .voice-top .cate-box .company,
  .voice-top .cate-box .cate {
    font-size: 1.6rem;
  }

  .page-voice .voice-bottom p {
    width: 100%;
    margin-left: 0%;
    font-size: 2rem;
    padding-top: 6rem;
  }

  .page-voice .voice-bottom img {
    right: initial;
    left: 50%;
    transform: translateX(-50%);
    top: initial;
    bottom: -8rem;
    width: 12rem;
  }

  .page-voice .voice-wrap {
    gap: 40rem;
    width: 100%;
  }

  .page-voice .voice-box::after {
    height: 8rem;
    bottom: -26rem;
  }

  .pagination-container {
    margin-top: 15rem !important;
  }

  .page-voice .pagination-container {
    margin-top: 32rem;
  }

  .page-voice .sec_inner {
    flex-wrap: wrap;
  }

  .page-voice .cate-button-box {
    position: initial;
    margin-bottom: 0rem;
  }

  .thanks h2 {
    font-size: 5rem;
    text-align: center;
  }

  .thanks h3 {
    text-align: left;
  }

  .thanks h2::after {
    width: 6rem;
    height: 6rem;
    position: absolute;
    top: 1.8rem;
    left: -1rem;
  }

  .thanks h2::before {
    width: 6rem;
    height: 6rem;
    position: absolute;
    top: 1.8rem;
    right: -1rem;
  }

  /*--------------------------------------------

page-achi

------------------------------------------------*/
  .page-achi .sec_inner {
    flex-wrap: wrap;
    gap: 4rem;
  }

  .page-achi .cate-button-box {
    width: 100%;
    position: initial;
  }

  .page-achi .achi-wrap {
    width: 100%;
  }

  .page-achi .achi-box {
    padding: 0;
    flex-wrap: wrap;
    width: 100%;
  }

  .page-achi-box-right {
    width: 100%;
  }

  .page-achi-box {
    flex-wrap: wrap;
    padding: 4rem;
  }

  .page-achi .achi-bottom-box {
    padding: 0;
  }

  .page-achi .pagination-container {
    margin-top: 12rem;
  }

  .page-achi .page-achi-box-right .achi-bottom-box-title {
    -webkit-line-clamp: 2;
    margin-top: -1rem;
    margin-bottom: 1rem;
  }

  .page-achi .page-achi-box-right p {
    -webkit-line-clamp: 2;
  }

  /*--------------------------------------------

page-single-achi

------------------------------------------------*/
  .single-achi .single-news-right section .achi-bottom-box h3,
  .single-achi .single-news-right section .achi-bottom-box p {
    font-size: 2rem;
  }

  .achi-single-top .achi-img-box {
    margin-top: 0;
  }

  .achi-single-top .page-achi-box {
    padding: 0;
  }

  .achi-single-top .page-achi-box-right {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .achi-single-top .achi-box {
    width: 80%;
    margin: 0 auto;
  }



  .achi-single-top .breadcrumb-container {
    margin-top: 4rem;
  }

  .achi-single-top {
    clip-path: ellipse(170% 100% at 50% 0%);
  }

  /*--------------------------------------------

page-media

------------------------------------------------*/
  .page-media .sec_inner {
    flex-wrap: wrap;
  }

  .page-media .cate-button-box {
    width: 100%;
    position: initial;
  }

  .page-media .media-wrap {
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
    gap: 8rem;
    margin-top: 8rem;
  }

  .media-box-bottom h3 {
    font-size: 2rem;
    -webkit-line-clamp: 2;
  }

  .media-kanren-box .img-box {
    margin-bottom: 2rem;
  }

  .page-media .pagination-container {
    margin-top: 10rem;
  }

  .page-news .pagination-container {
    margin-top: 10rem;
  }

  .vision .splide__arrow--prev {
    top: 52.3% !important;
    left: 2rem !important;
  }

  .vision .splide__arrow--next {
    top: 56% !important;
    right: 2rem !important;
  }

  body .page-top-media .title {
    font-size: 4.8rem;
  }

  .page-top-media h1 .huki {
    padding: 2rem 0;
    width: 100%;
    margin: 2rem auto 4rem;
  }

  .page-top-media h1 .huki .big {
    font-size: 2.8rem;
    font-weight: bold;
  }

  .media-single-top-wrap .right h1 {
    margin-top: 0;
  }

  /*----------------------------------------------------------
  
  404

  ------------------------------------------------------*/
  .not-found h1::after {
    content: "";
    background: url("../images/not-found.webp");
    background-size: cover;
    width: 10rem;
    height: 10rem;
    position: absolute;
    top: 6rem;
    left: -1rem;
  }

  .not-found h1::before {
    content: "";
    background: url("../images/not-found.webp");
    background-size: cover;
    width: 10rem;
    height: 10rem;
    position: absolute;
    top: 6rem;
    right: -1rem;
  }

  .not-found h1 .big {
    font-size: 14rem;
  }



  .other-achi,
  .other-voice {
    padding: 12rem 0;
  }

  .other-achi {
    margin-top: 15rem;
  }




  .single-news-left {
    width: var(--in-sp);
    margin-inline: auto;
  }

  .single-news-right,
  .single-quiz-wrap {
    padding: 10rem 8% 10rem;
  }

  .single-news-right section h3 {
    font-size: 4rem;
  }

  .single-news {
    padding-bottom: 0;
  }

  .single-news .sec_inner,
  .single-media .sec_inner {
    width: 100%;
  }



  /*----------------------------------------------------------
  
  プライバシーポリシー

  ------------------------------------------------------*/
  .privacy-section {
    padding: 3rem 0rem;
    background: none;
  }

  .pra-h3 {
    font-size: 2rem;
  }

  .privacy-section p,
  .pra-h3,
  .page-specified p {
    font-size: 2rem;
  }

  .page-privacy h2 {
    font-size: 2.8rem;
    margin-bottom: 1.4rem;
  }

  .privacy-list {
    background: var(--gray);
    padding: 4rem 4rem;
  }

  .privacy-list li {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .privacy-list li:last-of-type {
    margin-bottom: 0;
  }

  .page-specified .hyou h5 {
    width: 100%;
  }

  .page-specified .hyou p {
    width: 100%;
  }


  .fix {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 998;
    padding-top: 2rem;
    /* 【重要】初期状態を非表示に設定 */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;

    /* 動きを滑らかに */
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  /* 表示された時のスタイル */
  .fix.is-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* クリック可能にする */
  }

  .fix .cta-button {
    width: 92%;
    margin-left: 4%;
    margin-bottom: 2rem;
  }
}

header {
  transition: transform 0.3s ease-in-out;
  /* スムーズな動き */
}

header.is-hide {
  transform: translateY(-100%);
}