@charset "UTF-8";
/* common 
******************************************************************************************/
html {
  font-size: 10px;
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}

@media (max-width: 720px) {
  html {
    font-size: 1.3888888889vw;
  }
}
body {
  position: relative;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f5f5dc;
  color: #292929;
}

body.is-noscroll {
  overflow: hidden;
}

.wrapper {
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}

.container {
  max-width: 118.8rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.4rem;
}

@media screen and (max-width: 768px) {
  .sp-none {
    display: none;
  }
}
.pc-none {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc-none {
    display: block;
  }
}
.red {
  color: #FE2C55;
}

.yellow {
  color: #FBE63D;
}

/* =========================
   HEADER（中央寄せ固定：ずれ対策）
========================= */
.header{
  position: fixed;
  top: 0;

  /* ★これがズレ解消の肝：72remを画面中央に固定 */
  left: 50%;
  transform: translateX(-50%);

  width: min(100%, 72rem);
  height: 50px;
  background-color: #231815;
  z-index: 999;
  box-sizing: border-box;
}

/* 行内レイアウト */
.header__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  box-sizing: border-box;
}

/* ロゴ */
.header__logo a{
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.header__logo img{
  height: 28px;
  width: auto;
  display: block;
}

/* CTAは縦積みで右寄せ */
.header__cta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* CTAは縦積みで右寄せ */
.header__cta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

/* ★ボタンデザイン：既存の丸/緑/アイコン付きを維持しつつ、文字だけ少し細く */
.cta-button{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 12px;
  border-radius:999px;
  background:#06c755;
  color:#fff;

  font-size:14px;
  line-height:1;

  text-decoration:none;
  white-space:nowrap;

  /* デザインが消えるケース対策 */
  border:0;
  appearance:none;
  -webkit-appearance:none;

  transition:opacity .25s, transform .25s;
}

.cta-button:active{
  opacity:.85;
  transform:translateY(1px);
}
@media (any-hover:hover){
  .cta-button:hover{ opacity:.9; }
}

.line-icon{
  display:inline-flex;
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.line-icon img{
  width:18px;
  height:18px;
  display:block;
}

/* 同意文言：ボタン直下・小さめ・改行OK */
.cta-consent{
  margin:0;
  font-size:10px;
  line-height:1.2;
  color:rgba(255,255,255,.85);
  text-align:right;
  max-width:320px;      /* 折り返しやすく */
  white-space:normal;   /* 改行/折返しOK */
}

.cta-consent a{
  color:rgba(255,255,255,.95);
  text-decoration:underline;
}

/* スマホで崩れる場合用（必要なら残す） */
@media (max-width:520px){
  .cta-button{ padding:7px 10px; font-size:13px; }
  .cta-consent{ display:none; }
}

.line-icon{
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.line-icon img{
  width: 18px;
  height: 18px;
  display: block;
}

/* ✅ CTA全体（ボタン幅＝基準）を作るラッパー */
.header__cta-wrap{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch; /* 子要素を同じ幅に */
}

/* ✅ 同意文：ボタン外・ボタンと同幅・下に“はみ出して”表示 */
.consent-note{
  position: absolute;
  top: calc(100% + 6px); /* ボタンの外（下） */
  left: 0;
  width: 100%;          /* ← ボタン幅と同じになる */
  margin: 0;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
  background: #231815;
  box-sizing: border-box;
  text-align: center;
}

.consent-note a{
  color: rgba(255,255,255,.98);
  text-decoration: underline;
}

/* ✅ SPでも非表示にしない（小さくするだけ） */
@media (max-width: 520px){
  .consent-note{
    font-size: 9px;
    padding: 5px 6px;
    line-height: 1.2;
  }
}


/* スマホは詰まるので同意文言を非表示（必要なら残してもOK） */
@media (max-width: 520px){
  .cta-button{ padding: 7px 10px; font-size: 13px; }
  .header__logo img{ height: 26px; }
}

/* 固定ヘッダー分の余白（必要なら） */
/* body{ padding-top: 50px; } */


.mv {
  position: relative;
  margin-top: 50px;
}

.mv-text {
  position: absolute;
  width: 114%;
  padding: 1rem 7rem 2rem 4.6rem;
  border-top: 1.5rem solid #25f4ee;
  border-bottom: 1.5rem solid #FE2C55;
  background-color: #000;
  top: 38.4rem;
  left: -7%;
  rotate: -10.5deg;
  color: #fff;
}

.mv-text::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 20.9rem;
  aspect-ratio: 418/156;
  background: url(../images/mv/red_line.webp) no-repeat;
  background-size: contain;
  top: -6.9rem;
  right: -5.6rem;
  rotate: 10.5deg;
}

.mv-text::after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 13.3rem;
  aspect-ratio: 1;
  background: url(../images/mv/green_circle.webp) no-repeat;
  background-size: contain;
  top: 17.8rem;
  left: -2.1rem;
}

.mv-text__top {
  font-size: 5rem;
  letter-spacing: 0.05em;
  margin-left: 3.9rem;
}

.mv-text__top span {
  font-size: 3.5rem;
}

.mv-text__main {
  display: block;
  font-size: 6rem;
  letter-spacing: 0.05em;
  margin: -0.4rem 0 0 2.9rem;
  white-space: nowrap;
}

.mv-text__main .red {
  margin: 0 0.8rem;
  vertical-align: middle;
}

.mv-text__main .small {
  position: relative;
  font-size: 4rem;
  top: 0.5rem;
}

.mv-text__bottom {
  display: block;
  font-size: 5rem;
  letter-spacing: 0.05em;
  margin-top: 0.1rem;
  text-align: right;
}

.mv-text__bottom span {
  font-size: 3.5rem;
}

span.mv-text__astarisk {
  display: block;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin-top: 0.1rem;
  text-align: right;
}

.mv-text__note {
  position: relative;
  display: flex;
  margin-top: 1.2rem;
  z-index: 1;
}

.mv-text__note .label {
  display: grid;
  place-content: center;
  font-size: 2.7rem;
  letter-spacing: 0.05em;
  height: 4.6rem;
  padding: 0 1.6rem;
  margin-right: 0.4rem;
  background-color: #FE2C55;
  color: #fff;
  border-radius: 100vmax;
  flex-shrink: 0;
}

.mv-text__note .label1 {
  letter-spacing: 0.25em;
  padding: 0 0.5rem 0 0.5rem;
  text-indent: 0.25em;
}

.mv-text__note .label2 {
  padding: 0 1.6rem 0 1.5rem;
  letter-spacing: 0;
}

.mv-text__note .label3 {
  font-size: 2.6rem;
  letter-spacing: 0;
  padding: 0 1.6rem 0 1.2rem;
}

.mv-text__note .small {
  position: relative;
  font-size: 2rem;
  top: 1.6rem;
}

.mv-text__note .red {
  font-size: 3.4rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.mv-bubbles {
  position: absolute;
  top: 64.1rem;
  left: 0;
  width: 100%;
}

.mv-bubble1 {
  position: absolute;
  width: 23.7rem;
  aspect-ratio: 236.652/238.655;
  background: url(../images/mv/bubble1.webp) no-repeat;
  background-size: contain;
  top: 0;
  left: 45.7rem;
  white-space: nowrap;
  text-align: center;
}

.mv-bubble1 .small {
  position: absolute;
  scale: 1 1.3;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.25;
  top: 6.3rem;
  left: 5.1rem;
}

.mv-bubble1 .main {
  position: absolute;
  scale: 1 1.3;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  top: 10.6rem;
  left: 3.5rem;
  line-height: 1.1;
}

.mv-bubble2 {
  position: absolute;
  width: 24.9rem;
  aspect-ratio: 249.125/195.286;
  background: url(../images/mv/bubble2.webp) no-repeat;
  background-size: contain;
  top: 12.5rem;
  left: 0.5rem;
}

.mv-bubble2 .main {
  position: absolute;
  font-size: 3rem;
  line-height: 1.16;
  letter-spacing: 0.05em;
  top: 4.8rem;
  left: 7rem;
}

.mv-bubble2 .main .price {
  display: block;
  text-indent: -1.7rem;
}

.mv-bubble2 .small {
  position: absolute;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  top: 12.1rem;
  left: 9.3rem;
}

.mv-bubble3 {
  position: absolute;
  width: 30.1rem;
  aspect-ratio: 249.125/195.286;
  background: url(../images/mv/bubble3.webp) no-repeat;
  background-size: contain;
  top: 31.4rem;
  left: 1.6rem;
}

.mv-bubble3 .top {
  position: absolute;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  top: 7.9rem;
  left: 1.5rem;
  text-align: center;
}

.mv-bubble3 .large {
  position: relative;
  font-size: 3rem;
  letter-spacing: 0.05em;
  padding: 0 0.1rem 0 0.4rem;
  top: -0.2rem;
}

.mv-bubble3 .main {
  position: absolute;
  font-size: 3rem;
  letter-spacing: 0.05em;
  top: 12.6rem;
  left: 4rem;
}

.mv-note {
  position: absolute;
  font-size: 1.2rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-shadow: 0.1rem 0.1rem 0.1rem #fff, -0.1rem -0.1rem 0.1rem #fff, -0.1rem 0.1rem 0.1rem #fff, 0.1rem -0.1rem 0.1rem #fff;
  left: 39.5rem;
  bottom: 1.2rem;
  color: #231815;
}

.cta {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 720/220;
  background: url(../images/cta_bg.webp) no-repeat;
  background-size: cover;
  color: #fff;
  text-align: center;
}

.cta__catch {
  font-size: 2.7rem;
  line-height: 1.2962962963;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}

.cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 61.5rem;
  font-size: 3.7rem;
  letter-spacing: 0.05em;
  aspect-ratio: 615/75;
  padding-left: 6.3rem;
  background-color: #02DE5A;
  color: #fff;
  border-radius: 100vmax;
  transition: filter 0.4s;
}

.cta__btn::before {
  display: inline-block;
  content: "";
  width: 5rem;
  aspect-ratio: 5/4.8;
  background: url(../images/line.webp) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.cta__btn::after {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  border: 0.2rem solid #fff;
  inset: 0;
  margin: auto;
  border-radius: 100vmax;
}

.cta__btn:active {
  filter: brightness(0.8);
}

@media (any-hover: hover) {
  .cta__btn:hover {
    filter: brightness(0.8);
  }
}
.cta__note {
  font-size: 0.9rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.7777777778;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
}

.lead {
  position: relative;
  padding: 3.6rem 0 6.4rem;
  background: url(../images/lead_bg.webp) no-repeat;
  background-size: cover;
  text-align: center;
}

.lead__catch {
  position: relative;
  display: grid;
  place-content: center;
  width: 61rem;
  aspect-ratio: 61/8.4;
  font-size: 3.7rem;
  letter-spacing: 0.05em;
  margin: 0 auto;
  border: 0.3rem solid #292929;
  background-color: #FBE63D;
  color: #292929;
  border-radius: 100vmax;
  position: 0;
}

.lead__catch::before {
  position: absolute;
  display: block;
  content: "";
  width: 3rem;
  height: 2.8rem;
  bottom: -2.7rem;
  left: 50%;
  translate: -50%;
  background-color: #FBE63D;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  z-index: 2;
}

.lead__catch::after {
  position: absolute;
  display: block;
  content: "";
  width: 3.6rem;
  height: 3.2rem;
  bottom: -3.2rem;
  left: 50%;
  translate: -50%;
  background-color: #292929;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  z-index: 1;
}

.lead__main {
  font-size: 8.5rem;
  line-height: 0.8705882353;
  letter-spacing: 0.05em;
  margin-top: 2rem;
  color: #FBE63D;
  text-shadow: 0 0 1.3rem rgba(255, 255, 255, 0.5);
}

.lead__main span {
  font-size: 9.7rem;
  margin: 0 2rem;
}

.lead__list {
  position: relative;
  width: 57rem;
  margin: 10.8rem auto 0;
}

.lead__item {
  position: relative;
}

.lead__item01 .lead__image {
  width: 37.2rem;
  aspect-ratio: 372/238;
}

.lead__image {
  box-shadow: 1rem 1rem 0 #FBE63D;
}

.lead__lables {
  position: absolute;
  display: flex;
  gap: 1.4rem;
  top: -7.6rem;
  left: -2.5rem;
}

.lead__lables > .lead__label {
  position: relative;
}

.lead__label {
  position: absolute;
  display: flex;
  width: 27.7rem;
  aspect-ratio: 277/87;
  border: 0.2rem solid #292929;
}

.lead__label::before {
  position: absolute;
  display: block;
  content: "";
  width: 2rem;
  height: 2.2rem;
  bottom: -2.1rem;
  z-index: 1;
}

.lead__label::after {
  position: absolute;
  display: block;
  content: "";
  width: 2.4rem;
  height: 2.6rem;
  bottom: -2.6rem;
}

.lead__term {
  display: grid;
  place-content: center;
  width: 10.5rem;
  font-family: "Noto Sans JP", serif;
  background-color: #FBE63D;
  flex-shrink: 0;
}

.lead__term span {
  display: block;
}

.lead__term .info {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}

.lead__term .name {
  display: block;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}

.lead__desc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  letter-spacing: -0.025em;
  background-color: #fff;
  flex: 1;
}

.lead__desc span {
  position: relative;
  font-size: 3.2rem;
  margin: 0 0.4rem 0 0.8rem;
  top: -0.2rem;
}

.lead__item02 {
  position: absolute;
  width: 27.3rem;
  aspect-ratio: 273/213;
  top: 22.3rem;
  left: 28.8rem;
  z-index: 1;
}

.lead__item02 .lead__label {
  top: -6.5rem;
  left: 1rem;
}

.lead__item03 {
  width: 32.2rem;
  aspect-ratio: 322/251;
  margin-top: 11.5rem;
}

.lead__item03 .lead__label {
  top: -8.7rem;
  left: -2.5rem;
}

.lead__label--1::before,
.lead__label--4::before {
  left: 2.5rem;
  background-color: #FBE63D;
  clip-path: polygon(0 0, 100% 100%, 90% 0);
  z-index: 1;
}

.lead__label--1::after,
.lead__label--4::after {
  left: 2.3rem;
  background-color: #292929;
  clip-path: polygon(0 0, 100% 100%, 90% 0);
}

.lead__label--2::before {
  left: 6rem;
  background-color: #FBE63D;
  clip-path: polygon(10% 0, 0 100%, 100% 0);
  z-index: 1;
}

.lead__label--2::after {
  left: 5.8rem;
  background-color: #292929;
  clip-path: polygon(10% 0, 0 100%, 100% 0);
}

.lead__label--3::before {
  left: 23rem;
  background-color: #fff;
  clip-path: polygon(10% 0, 0 100%, 100% 0);
  z-index: 1;
}

.lead__label--3::after {
  left: 22.8rem;
  background-color: #292929;
  clip-path: polygon(10% 0, 0 100%, 100% 0);
}

.result {
  padding: 4.6rem 0 0;
  background: url(../images/result_bg.webp) no-repeat;
  background-size: cover;
  overflow: hidden;
}

.result__title {
  position: relative;
  width: 45.5rem;
  aspect-ratio: 455/125;
  margin: 0 auto;
  box-shadow: 0.5rem 0.5rem 0 #FE2C55;
  z-index: 0;
  font-size: 3rem;
  line-height: 1.1666666667;
  letter-spacing: 0.05em;
  padding: 2.2rem;
  border-radius: 100vmax;
  background-color: #fff;
  text-align: center;
  z-index: 2;
}

.result__title span.large {
  font-size: 3.7rem;
  line-height: 1.0571428571;
}

.result__title span.deco {
  position: absolute;
  display: block;
  content: "";
  width: 1rem;
  height: 2.5rem;
  bottom: -2.4rem;
  left: 50%;
  translate: -50%;
  background-color: #fff;
  border-radius: 0 0 100vmax 100vmax;
  z-index: 2;
  box-shadow: 0.5rem 0.5rem 0 #FE2C55;
}

.result__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 4.4rem;
}

.result__item {
  position: relative;
  padding: 2rem 0 2.5rem;
  background-color: #fff;
  border-radius: 2rem;
  box-shadow: 1rem 1rem 0 #FE2C55;
  z-index: 0;
}

.result__item h3 {
  font-size: 2.8rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  min-height: 11.2rem;
  text-align: center;
}

.result__image {
  padding: 0 2rem;
}

.result__sub {
  font-size: 3.8rem;
  line-height: 1.2105263158;
  letter-spacing: 0.05em;
  margin-top: 8.2rem;
  text-align: center;
  color: #fff;
}

.result__point {
  position: relative;
  display: flex;
  align-items: center;
  width: 54.4rem;
  aspect-ratio: 544/72;
  font-size: 3.8rem;
  line-height: 1.2105263158;
  letter-spacing: 0.05em;
  border: 0.2rem solid #FBE63D;
  padding-left: 10.4rem;
  margin: 3.5rem auto 0;
  color: #fff;
  border-radius: 100vmax;
}

.result__point::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 7.2rem;
  aspect-ratio: 1;
  top: -0.1rem;
  left: -0.2rem;
  background: url(../images/point.webp) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.result-point__graph-wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 40rem;
  margin: 2.4rem auto;
}

.result-point__graph {
  display: flex;
  align-items: center;
}

.result-point__graph p {
  font-size: 3rem;
  line-height: 1.1666666667;
  letter-spacing: 0.05em;
  text-align: right;
  writing-mode: vertical-rl;
  color: #fff;
}

.result-point__chart-block {
  flex: 1;
}

.result-point__chart {
  position: relative;
  width: 21.9rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 100vmax;
}

.result-point__chart span {
  position: absolute;
  font-size: 2rem;
  letter-spacing: 0.05em;
}

.result-point__chart01 {
  background-image: conic-gradient(#25f4ee 180deg, #fff 180deg 360deg);
}

.result-point__chart01 .liver {
  top: 50%;
  left: 12.3rem;
  translate: 0 -50%;
}

.result-point__chart01 .appli {
  top: 50%;
  left: 2.4rem;
  translate: 0 -50%;
}

.result-point__chart02 {
  background-image: conic-gradient(#25f4ee 180deg, #fff 180deg 270deg, #ccc 270deg 360deg);
}

.result-point__chart02 .liver {
  top: 50%;
  left: 12.3rem;
  translate: 0 -50%;
}

.result-point__chart02 .appli {
  top: 69%;
  left: 3.4rem;
}

.result-point__chart02 .office {
  top: 22%;
  left: 3.4rem;
}

.result__sub2 {
  font-size: 3.8rem;
  line-height: 1.2105263158;
  letter-spacing: 0.05em;
  margin-top: 0.9rem;
  text-align: center;
  color: #fff;
}

.result__arrow {
  position: relative;
  width: 48rem;
  aspect-ratio: 480/108;
  font-size: 3.4rem;
  line-height: 1.3529411765;
  letter-spacing: 0.05em;
  margin-top: 3.9rem;
  left: -2.4rem;
  background: url(../images/result_arrow.webp) no-repeat;
  background-size: cover;
  color: #000;
}

.result__arrow span {
  position: absolute;
  top: 2.5rem;
  left: 4rem;
}

.result__note {
  position: relative;
  width: 68.4rem;
  font-size: 11rem;
  line-height: 1.2090909091;
  letter-spacing: 0.05em;
  font-style: italic;
  margin: -2rem auto 0;
  color: #fff;
  text-shadow: 0.678rem 0.678rem 0 #292929;
}

.result__note span {
  display: block;
}

.result__note .bottom {
  position: relative;
  top: -4rem;
}

.result__note .right {
  position: absolute;
  font-size: 4.7rem;
  line-height: 0.9787234043;
  letter-spacing: 0.05em;
  text-shadow: 0.678rem 0.678rem 0 #292929;
  top: 12rem;
  right: 2rem;
}

.feature {
  padding: 4.4rem 0 0;
  background-color: #FFE1EF;
}

.feature__title {
  position: relative;
  width: 68rem;
  aspect-ratio: 680/158;
  font-size: 4.9rem;
  letter-spacing: 0.05em;
  padding-top: 3rem;
  border: 0.4rem solid #000;
  background-color: #fff;
  box-shadow: 0.6rem 0.6rem 0 #FBF50D;
  text-align: center;
  margin: 0 auto;
  z-index: 0;
}

.feature__title .text {
  display: flex;
  justify-content: center;
}

.feature__title .text img {
  width: 35.8rem;
  margin-left: 1rem;
}

.feature__title .text span {
  margin-top: 3.8rem;
  margin-left: -1.5rem;
}

.feature__title span.deco {
  position: absolute;
  display: block;
  content: "";
  width: 6rem;
  aspect-ratio: 126/79;
  bottom: -3.69rem;
  left: 50%;
  translate: -50%;
  background-color: #fff;
  background: url(../images/title_bg_deco.webp) no-repeat;
  background-size: contain;
  z-index: 2;
}

.feature__lead {
  font-size: 3rem;
  line-height: 1.2333333333;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 4.1rem;
}

.feature__lead span.large {
  font-size: 3.7rem;
  line-height: 1.0277777778;
}

.feature__lead span.hour {
  margin: 0 0.5rem;
  letter-spacing: 0.05em;
}

.feature__lead span.red {
  letter-spacing: 0.02em;
}

.feature__list {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  margin-top: 3.8rem;
}

.feature__item {
  position: relative;
  padding: 3rem 2.8rem 3.3rem 2rem;
  border: 0.4rem solid #040000;
  background-color: #fff;
  border-radius: 0 2rem 0 2rem;
}

.feature__item .inner {
  position: relative;
  padding: 1rem;
  border: 0.2rem solid #000;
  background-color: #fff;
  border-radius: 0 0.8rem 0 0.8rem;
  z-index: 1;
}

.feature__item span.bg {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 1rem;
  left: 1rem;
  background-color: red;
  border-radius: 0 0.8rem 0 0.8rem;
  z-index: 0;
}

.feature-graph-block {
  width: 68rem;
  background-color: #fff;
  padding: 4rem 1rem 1.3rem;
  margin: 2.1rem auto 0;
  border: 0.4rem solid #292929;
  border-radius: 0 2rem 0 2rem;
  box-shadow: 0.5rem 0.5rem 0 #DF3F3E;
}

.feature-graph-block__list {
  display: flex;
  justify-content: center;
  gap: 9.4rem;
}

.feature-graph-block__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-graph-block__item h3 {
  font-size: 3rem;
  line-height: 1.1666666667;
  letter-spacing: 0.05em;
  text-align: center;
}

.feature__graph {
  position: relative;
  width: 21.9rem;
  aspect-ratio: 1;
  margin-top: 2.3rem;
  margin-bottom: 2rem;
  border-radius: 100vmax;
}

.feature-graph-block__item:nth-child(1) .feature__graph {
  background-image: conic-gradient(#FE2C55 0deg 311deg, #999999 311deg 360deg);
}

.feature-graph-block__item:nth-child(2) .feature__graph {
  background-image: conic-gradient(#FE2C55 0deg 48deg, #999999 48deg 360deg);
}

.feature__graph__text {
  position: absolute;
  width: calc(100% - 3.8rem);
  aspect-ratio: 1;
  inset: 0;
  margin: auto;
  background-color: #fff;
  border-radius: 100vmax;
  text-align: center;
}

.feature__graph__text .inner {
  position: absolute;
  width: 100%;
  top: 6.6rem;
  left: 50%;
  translate: -50%;
}

.feature__graph__text .small {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.feature__graph__text .large {
  display: block;
  font-size: 4.7rem;
  letter-spacing: 0.05em;
  margin-top: 0.1rem;
}

.feature-graph-color {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.7rem;
}

.feature-graph-color .color {
  width: 3.9rem;
  aspect-ratio: 39/22;
}

.feature-graph-color .red {
  background-color: #FE2C55;
}

.feature-graph-color .grey {
  background-color: #999999;
}

.feature-graph-color p {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  letter-spacing: 0.05em;
}

.feature-graph__atarisk {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-align: right;
  margin-top: 6rem;
}

.feature__text h3 {
  font-size: 3rem;
  line-height: 1.1666666667;
  letter-spacing: 0.05em;
}

.feature__text p {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}

.feature__item {
  display: flex;
  gap: 2.8rem;
}

.feature__item:nth-child(1) {
  box-shadow: 0.5rem 0.5rem 0 #FE2C55;
}

.feature__item:nth-child(1) h3 {
  color: #FE2C55;
}

.feature__item:nth-child(2) {
  box-shadow: 0.5rem 0.5rem 0 #1CC9C0;
}

.feature__item:nth-child(2) h3 {
  color: #1CC9C0;
}

.feature__item:nth-child(3) {
  box-shadow: 0.5rem 0.5rem 0 #3DB156;
}

.feature__item:nth-child(3) h3 {
  color: #3DB156;
}

.feature__item:nth-child(4) {
  box-shadow: 0.5rem 0.5rem 0 #4D469A;
}

.feature__item:nth-child(4) h3 {
  color: #4D469A;
}

.feature__item:nth-child(5) {
  box-shadow: 0.5rem 0.5rem 0 #F7931E;
}

.feature__item:nth-child(5) h3 {
  color: #F7931E;
}

.feature__item:nth-child(6) {
  box-shadow: 0.5rem 0.5rem 0 #FF7BAC;
}

.feature__item:nth-child(6) h3 {
  color: #FF7BAC;
}

.feature__image {
  width: 29rem;
  flex-shrink: 0;
}

.feature__catch {
  position: relative;
  font-size: 4.9rem;
  line-height: 1.1666325905;
  letter-spacing: 0.05em;
  color: #ff7bac;
  text-align: center;
  margin-top: 4.2rem;
  z-index: 0;
}

.feature__catch::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 42rem;
  aspect-ratio: 419.89/57.97;
  top: 8.1rem;
  left: 50%;
  translate: -50%;
  background: url(../images/feature_catch_deco.webp) no-repeat;
  background-size: contain;
  vertical-align: middle;
  z-index: -1;
}

.feature__catch span {
  display: block;
  font-size: 1.6rem;
  margin-top: 1rem;
  text-align: center;
}

.feature__sub {
  position: relative;
  font-size: 3.6rem;
  line-height: 1.0277777778;
  letter-spacing: 0.05em;
  margin-top: 5.5rem;
  text-align: center;
}

.feature__sub::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 9rem;
  height: 0.2rem;
  top: 5.6rem;
  left: -1.1rem;
  background-color: #292929;
  vertical-align: middle;
  rotate: 58deg;
}

.feature__sub::after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 9rem;
  height: 0.2rem;
  top: 5.6rem;
  right: -1.1rem;
  background-color: #292929;
  vertical-align: middle;
  rotate: -58deg;
}

.feature-bottom {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 4.5rem -1.4rem 0;
}

.feature-bottom__left {
  position: relative;
  width: 40rem;
  aspect-ratio: 400/267;
}

.feature-bottom__left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-bottom__left::before {
  position: absolute;
  display: block;
  content: "";
  width: 1rem;
  height: 100%;
  top: 1rem;
  right: -1rem;
  background-color: #FBE63D;
}

.feature-bottom__left::after {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% + 1rem);
  height: 1rem;
  bottom: -1rem;
  left: 0;
  background-color: #FBE63D;
}

.feature-bottom__right {
  padding-top: 2.5rem;
  padding-left: 1.7rem;
  flex: 1;
}

.feature-bottom__right p {
  font-size: 3.6rem;
  line-height: 1.0277777778;
  letter-spacing: 0.05em;
  text-align: center;
}

.feature-bottom__right .image {
  width: 10.8rem;
  margin-top: 0.4rem;
  margin-left: auto;
  margin-right: 2.7rem;
}

.feature__note {
  position: relative;
  display: grid;
  place-content: center;
  aspect-ratio: 720/227;
  margin: 1.7rem -1.4rem 0;
  background: url(../images/feature_note.webp) no-repeat;
  background-size: cover;
}

.feature__note p {
  font-size: 4.4rem;
  line-height: 0.9545454545;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
}

.star {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
}

.star1 {
  top: 3rem;
  left: -0.4rem;
  width: 1.6rem;
  box-shadow: 0 0 2rem 2.4rem rgba(255, 255, 255, 0.6);
}

.star2 {
  top: 2.8rem;
  left: 6.5rem;
  width: 0.6rem;
  box-shadow: 0 0 2rem 1rem rgba(255, 255, 255, 0.6);
}

.star3 {
  top: 8rem;
  left: 4.1rem;
  width: 1rem;
  box-shadow: 0 0 2rem 1.8rem rgba(255, 255, 255, 0.6);
}

.star4 {
  top: 9.5rem;
  right: 2.1rem;
  width: 1.6rem;
  box-shadow: 0 0 2rem 2.4rem rgba(255, 255, 255, 0.6);
}

.star5 {
  top: 16.5rem;
  right: 0.4rem;
  width: 1rem;
  box-shadow: 0 0 2rem 2rem rgba(255, 255, 255, 0.6);
}

.talents {
  padding: 3rem 0 8.6rem;
  background-color: #FFE1EF;
}

.talents__list {
  display: flex;
  flex-direction: column;
  gap: 5.5rem;
  margin-top: 4rem;
}

.talents__item {
  position: relative;
  width: 63rem;
  margin-left: 1.3rem;
}

.talents__item .inner {
  position: relative;
  padding: 5.4rem 2.4rem 1rem;
  border: 0.4rem solid #000;
  background-color: #FBE63D;
  z-index: 1;
}

.talents__item span.bg {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 2rem;
  left: 3.8rem;
  border: 0.4rem solid #000;
  background-color: #fff;
  z-index: 0;
  rotate: -0.7deg;
}

.talents__item::before {
  position: absolute;
  display: block;
  content: "";
  width: 2.5rem;
  aspect-ratio: 25.33/64.1;
  top: -1.8rem;
  left: 1.2rem;
  background: url(../images/clip.webp) no-repeat;
  background-size: contain;
  z-index: 2;
}

.talents__head {
  display: flex;
  gap: 2rem;
}

.talents__image {
  width: 25rem;
  aspect-ratio: 250/200;
  background-color: #6234E0;
  flex-shrink: 0;
}

.talents__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.talents__text {
  flex: 1;
}

.talents__text span {
  display: block;
  font-size: 2rem;
  margin-top: 1.6rem;
}

.talent__name {
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0.05em;
  padding-top: 1rem;
}

.talents__body {
  margin-top: 1.1rem;
  min-height: 15rem;
  padding: 0.5rem 1rem 2rem;
  background-color: #fff;
}

.talents__body span.heading {
  font-size: 2.4rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.talents__body p {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.talents__btn {
  display: block;
  width: fit-content;
  font-size: 2.4rem;
  padding: 2.4rem;
  margin: 1.2rem auto 0;
  border-radius: 100vmax;
  background-color: #6234E0;
  color: #fff;
  transition: filter 0.4s;
}

.talents__btn:active {
  filter: brightness(0.8);
}

@media (any-hover: hover) {
  .talents__btn:hover {
    filter: brightness(0.8);
  }
}
.flow {
  padding: 5.2rem 0 5rem;
  background: url(../images/flow_bg.webp) no-repeat;
  background-size: cover;
}

.flow__title {
  position: relative;
  width: 68rem;
  aspect-ratio: 680/150;
  margin: 0 auto;
  z-index: 0;
}

.flow__title .text {
  position: relative;
  font-size: 3.5rem;
  letter-spacing: 0.05em;
  padding: 0.8rem;
  border: 0.4rem solid #000;
  box-shadow: 1rem 1rem 0 #FBF50D;
  background-color: #fff;
  text-align: center;
  z-index: 2;
}

.flow__title .text span.num {
  font-size: 5rem;
  line-height: 1.1412;
  letter-spacing: 0.05em;
  margin: 0 1rem;
}

.flow__title .text span.large {
  position: relative;
  font-size: 6.5rem;
  line-height: 1.2058461538;
  letter-spacing: 0.05em;
  top: -1rem;
}

.flow__title span.deco {
  position: absolute;
  display: block;
  content: "";
  width: 5.4rem;
  aspect-ratio: 126/79;
  bottom: -3rem;
  left: 50%;
  translate: -50%;
  background-color: #fff;
  background: url(../images/title_bg_deco.webp) no-repeat;
  background-size: contain;
  z-index: 2;
}

.flow__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 7.5rem;
  margin-left: 6.7rem;
}

.flow__list::before {
  position: absolute;
  display: block;
  content: "";
  width: 0.1rem;
  height: 100%;
  top: 0;
  left: 5rem;
  background-color: #FE2C55;
}

.flow__item {
  display: flex;
  align-items: flex-start;
  gap: 2.9rem;
}

.flow__num {
  position: relative;
  width: 10rem;
  display: grid;
  place-content: center;
  font-family: "Noto Sans JP", serif;
  aspect-ratio: 1;
  background-color: #3A2B5B;
  background: url(../images/flow_num_bg.webp), #3A2B5B;
  background-size: contain;
  border-radius: 100vmax;
  flex-shrink: 0;
  color: #FE2C55;
}

.flow__num .step {
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-indent: 0.2em;
}

.flow__num .num {
  font-size: 3.8rem;
}

.flow__text {
  padding-top: 1rem;
}

.flow__text h3 {
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #FE2C55;
}

.flow__text p {
  font-family: "Noto Sans JP", serif;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
  color: #fff;
}

.flow__start {
  display: grid;
  place-content: center;
  width: 58.3rem;
  aspect-ratio: 583.34/150.11;
  margin: 4.5rem auto 0;
  border-radius: 0.8rem;
  background: url(../images/start_bg.webp) no-repeat;
  background-size: contain;
  color: #fff;
  text-align: center;
}

.flow__start span {
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.flow__start p {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}

.flow__btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  width: 27rem;
  aspect-ratio: 272.56/75.99;
  padding-left: 1.9rem;
  margin-top: 2rem;
  margin-left: -1rem;
  background: url(../images/line_bg.webp) no-repeat;
  background-size: contain;
  color: #fff;
  transition: filter 0.4s;
}

.flow__btn::before {
  display: inline-block;
  content: "";
  width: 3.4rem;
  aspect-ratio: 33.68/32.09;
  background: url(../images/line.webp) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.flow__btn:active {
  filter: brightness(0.8);
}

@media (any-hover: hover) {
  .flow__btn:hover {
    filter: brightness(0.8);
  }
}
.benefit {
  padding: 5.5rem 0 9rem;
  background: url(../images/benefit_bg.webp) no-repeat;
  background-size: cover;
}

.benefit__title {
  position: absolute;
  font-size: 3.7rem;
  letter-spacing: 0.05em;
  width: 61rem;
  aspect-ratio: 615.12/75.18;
  padding: 2rem;
  margin: 0 auto;
  border: 0.3rem solid #25F4EE;
  top: -4rem;
  left: 50%;
  translate: -50%;
  text-align: center;
  border-radius: 100vmax;
  background-color: #000;
  color: #fff;
}

.benefit__title::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 0.3rem);
  height: calc(100% - 0.3rem);
  border: 0.3rem solid #25F4EE;
  inset: 0;
  margin: auto;
  border-radius: 100vmax;
}

.benefit__inner {
  position: relative;
  border: 0.3rem solid #25F4EE;
  margin-top: 4rem;
  padding: 7.4rem 0 0;
  background: rgba(0, 0, 0, 0.7);
}

.benefit__list {
  display: grid;
  grid-template-columns: repeat(2, 29rem);
  justify-content: center;
  gap: 0 6rem;
}

.benefit__item {
  width: 29rem;
}

.benefit__text {
  padding: 0.5rem 0 2rem;
}

.benefit__text h3 {
  font-size: 3rem;
  line-height: 1.1666666667;
  letter-spacing: 0.05em;
  color: #25F4EE;
  white-space: nowrap;
  text-align: center;
}

.benefit__item:nth-child(3) h3 {
  font-size: 2.6rem;
}

.benefit__item:nth-child(1) .benefit__text, .benefit__item:nth-child(2) .benefit__text, .benefit__item:nth-child(4) .benefit__text, .benefit__item:nth-child(5) .benefit__text, .benefit__item:nth-child(6) .benefit__text, .benefit__item:nth-child(7) .benefit__text {
  padding-top: 1.8rem;
}

.faq {
  padding: 5.2rem 0 4.9rem;
  background-color: pink;
}

.faq__title {
  position: relative;
  font-size: 6.5rem;
  line-height: 1.1667180277;
  letter-spacing: 0.05em;
  color: #FF7BAC;
  text-align: center;
  z-index: 0;
}

.faq__title::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 42rem;
  aspect-ratio: 419.89/57.97;
  top: 3.1rem;
  left: 50%;
  translate: -50%;
  background: url(../images/faq_title_doco.webp) no-repeat;
  background-size: contain;
  vertical-align: middle;
  z-index: -1;
}

.faq__item {
  position: relative;
}

details {
  position: relative;
  border: 0.3rem solid #000;
  border-radius: 0 2rem 0 2rem;
  margin-top: 2.4rem;
  box-shadow: 0.5rem 0.5rem 0 #FF7BAC;
  z-index: 1;
}

details:nth-of-type(1) {
  margin-top: 3.7rem;
}

summary {
  /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
  display: block;
}

summary::-webkit-details-marker {
  /* Safariで表示されるデフォルトの三角形アイコンを消します */
  display: none;
}

.summary_inner {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 1.9rem 3rem 2rem;
  background-color: #fff;
  color: #002255;
  border-radius: 0 2rem 0 2rem;
}

.summary_inner p {
  font-size: 2.8rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: #FF7BAC;
}

/* --------アイコンがプラス------------------ */
.plus {
  display: block;
  position: relative;
  width: 3.6rem;
  margin-left: auto;
  flex-shrink: 0;
  transform-origin: center 43%;
  /*  transition: transform 0.4s;*/
}

/* is-openedクラスが付与されたときのスタイル */
details.is-opened .plus::after {
  transform: rotate(0);
}

details.is-opened .summary_inner {
  border-radius: 0 2rem 0 0;
}

/* アイコンのバーのスタイル */
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  display: block;
  width: 3.6rem;
  height: 0.3rem;
  background-color: #FF7BAC;
}

.plus::before {
  left: 0;
  transform: rotate(0);
}

.plus::after {
  right: 0;
  transform: rotate(-90deg);
  transition: transform 0.4s;
}

.qa {
  font-size: 5rem;
  line-height: 1;
  font-weight: 600;
  margin-right: 1.8rem;
  color: #FF7BAC;
  flex-shrink: 0;
  translate: 0 -0.4rem;
}

/* --------アコーディオンの中身のスタイル-------- */
.content {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 0 2rem;
  /* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */
}

.content::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 2rem);
  height: 0.3rem;
  top: 0;
  left: 50%;
  translate: -50%;
  background-color: #FF7BAC;
}

.content_inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 2.1rem 1.6rem;
  min-height: 13.6rem;
}

.content_inner p {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.content_inner p span {
  font-size: 1.8rem;
  font-weight: 700;
  margin-inline: 0.4rem;
  color: #FE2C55;
}

.content_inner .qa {
  position: relative;
  flex-shrink: 0;
  translate: 0 -0.5rem;
}

.footer {
  padding: 2.6rem 0 1rem;
  background-color: #000;
  color: #fff;
}

.footer__inner {
  font-family: "Noto Sans JP", serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer__logo {
  width: 24rem;
}

.footer__address {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3333333333;
  letter-spacing: 0.05;
  margin-top: 3.2rem;
}

.footer__name {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3333333333;
  letter-spacing: 0.05em;
  margin-top: 1.9rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 4.8rem;
}

.footer__link {
  font-size: 1.2rem;
  line-height: 1.3333333333;
  letter-spacing: 0.05em;
  text-decoration: underline;
  transition: opacity 0.4s;
}

.footer__link:active {
  opacity: 0.6;
}

@media (any-hover: hover) {
  .footer__link:hover {
    opacity: 0.6;
  }
}
.footer__copyright {
  font-size: 1.2rem;
  line-height: 1.3333333333;
  letter-spacing: 0.05em;
  margin-top: 4.6rem;
}

.flow__start--link{
  display:block;           /* ブロック全体クリック */
  text-decoration: none;   /* 下線を消す */
}
.flow__start--link:hover{
  opacity: .9;             /* ほんの少し反応 */
}
.flow__start--link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* =========================
   INTERVIEW（対話形式）
========================= */
.interview{
  padding: 7.2rem 0 6rem;
  background-color: #FFE1EF; /* talents/featureと合わせる */
}

.interview__head{
  border: .4rem solid #000;
  background:#fff;
  box-shadow: .6rem .6rem 0 #FBF50D;
  border-radius: 0 2rem 0 2rem;
  padding: 2.2rem 2rem;
}

.interview__title{
  font-size: 4.2rem;
  letter-spacing: .05em;
  line-height: 1.1;
}

.interview__sub{
  margin-top: 1rem;
  font-family: "Noto Sans JP", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: .05em;
}

.interview__profile{
  display:flex;
  gap: 1.6rem;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: .3rem solid #000;
}

.interview__photo{
  width: 12rem;
  aspect-ratio: 1;
  border: .4rem solid #000;
  border-radius: 100vmax;
  overflow:hidden;
  background:#fff;
  flex-shrink:0;
}

.interview__photo img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.interview__meta{
  font-family: "Noto Sans JP", serif;
  letter-spacing: .05em;
}

.interview__meta .name{
  display:block;
  font-size: 2.4rem;
  font-weight: 700;
}

.interview__meta .desc{
  display:block;
  margin-top: .6rem;
  font-size: 1.4rem;
  line-height: 1.35;
}

.chat{
  margin-top: 2.6rem;
  display:flex;
  flex-direction: column;
  gap: 1.6rem;
}

.chat__item{
  display:flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.chat__item--a{
  flex-direction: row-reverse;
}

.chat__avatar{
  width: 5.4rem;
  height: 5.4rem;
  border: .3rem solid #000;
  border-radius: 100vmax;
  display:grid;
  place-content:center;
  background:#fff;
  font-family: "Noto Sans JP", serif;
  font-size: 1.2rem;
  letter-spacing: .05em;
  flex-shrink:0;
}

.chat__bubble{
  max-width: 56rem;
  border: .3rem solid #000;
  border-radius: 0 2rem 0 2rem;
  background:#fff;
  box-shadow: .5rem .5rem 0 #FF7BAC;
  padding: 1.6rem 1.8rem;
}

.chat__item--a .chat__bubble{
  background:#FBE63D;
  box-shadow: .5rem .5rem 0 #FE2C55;
}

.chat__name{
  font-size: 1.4rem;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  letter-spacing: .05em;
}

.chat__text{
  margin-top: .6rem;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.6;
  letter-spacing: .05em;
}

.chat__text .red{ font-weight:700; }

.interview__note{
  margin-top: 2.2rem;
  font-size: 1.2rem;
  font-family: "Noto Sans JP", serif;
  line-height: 1.6;
  letter-spacing: .05em;
  color: #231815;
}

.interview__actions{
  margin-top: 2.4rem;
  display:flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}

.interview__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 42rem;
  max-width: 100%;
  padding: 1.6rem 1.8rem;
  border-radius: 100vmax;
  border: .3rem solid #000;
  background:#fff;
  box-shadow: .5rem .5rem 0 #FBF50D;
  text-decoration:none;
  color:#292929;
  font-size: 1.8rem;
  letter-spacing: .05em;
}

.interview__back:active{ filter: brightness(.9); }

@media (max-width: 520px){
  .interview__title{ font-size: 3.5rem; }
  .chat__bubble{ max-width: 52rem; }
  .interview__back{ width: 100%; }
}
/* ボタン内を縦積みに */
.cta-button{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
}

/* メイン行（アイコン＋LINE登録） */
.cta-button .cta-main{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
}

/* 注意文（小文字） */
.cta-button .cta-sub{
  font-size: 6px;
  line-height: 1.3;
  opacity: .9;
  text-align: center;
}

/* 注意文内リンク（ボタンの見た目を崩さない） */
.cta-button .cta-sub__link{
  color: inherit;
  text-decoration: underline;
}

/* スマホだけ任意で改行（見やすさ保険） */
@media (max-width: 480px){
  .cta-button .cta-sub__br{ display:inline; }
}
@media (min-width: 481px){
  .cta-button .cta-sub__br{ display:none; }
}
/* CTA箱を「ボタン内2段表示」にするだけ（色や角丸は既存 .cta-button を活かす） */
.cta-button--with-consent{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
}

/* 箱全体クリック（LINE） */
.cta-button--with-consent .cta-button__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 上段（LINE登録する） */
.cta-button--with-consent .cta-button__main{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.1;
}

/* 下段（注意文） */
.cta-button--with-consent .cta-button__consent{
  position: relative;
  z-index: 2;              /* overlayより手前 */
  font-size: 7px;
  line-height: 1.35;
  text-align: center;
  opacity: .9;
}

/* 注意文内リンクはクリックできるように */
.cta-button--with-consent .cta-button__consent a{
  position: relative;
  z-index: 3;
  color: inherit;
  text-decoration: underline;
}

/* =========================================================
   ヘッダー：LINEボタン（注意文込み）を“はみ出さず”収める
========================================================= */
.header{
  /* もし既存で height 固定 or overflow hidden がある場合に備えて上書き */
  height: auto !important;
  overflow: visible !important;

  padding: 10px 0;
}

.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  /* 内側に余白（ボタンが端で切れない） */
  padding: 0 16px;

  /* ボタンが大きくなっても折り返してヘッダー内に収める */
  flex-wrap: wrap;
}

.header__logo img{
  display: block;
  height: 40px;
  width: auto;
}

/* 右側CTA */
.header__cta{
  display: flex;
  justify-content: flex-end;
  width: auto;
}

/* 緑の“ボタン枠” */
.cta-pill{
  background: #06c755;
  border-radius: 9999px;
  padding: 10px 14px;
  box-sizing: border-box;

  /* 横幅が広すぎてはみ出すのを防ぐ */
  max-width: 360px;
  width: fit-content;
}

/* 上段：LINE登録する（リンク） */
.cta-pill__main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}

.cta-pill__main .line-icon img{
  display: block;
  width: 24px;
  height: 24px;
}

/* 下段：注意文（ボタン内） */
.cta-pill__consent{
  margin-top: 4px;
  text-align: center;

  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,.95);

  /* 長文でもはみ出さず折り返す */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cta-pill__consent a{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
}

/* SP：ロゴ＋CTAを横並び固定（CTAは右寄せ） */
@media (max-width: 768px){
  .header{
    padding: 8px 0;
  }

  .header__inner{
    flex-wrap: nowrap;                 /* ← ヘッダー要素は折り返さない */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
  }

  .header__logo{
    flex: 0 0 auto;
  }
  .header__logo img{
    height: 28px;                      /* ロゴを小さめに */
    width: auto;
    display: block;
  }

  .header__cta{
    width: auto;                       /* ← 100%をやめる（上下に落ちる原因） */
    flex: 1 1 auto;                    /* 右側は伸縮OK */
    min-width: 0;                      /* はみ出し対策 */
    display: flex;
    justify-content: flex-end;
  }

  .cta-pill{
    width: auto;
    max-width: clamp(180px, 56vw, 240px); /* 画面幅に応じて小さく */
    padding: 8px 10px;
  }

  .cta-pill__main{
    font-size: 14px;
    gap: 8px;
  }
  .cta-pill__main .line-icon img{
    width: 20px;
    height: 20px;
  }

  .cta-pill__consent{
    font-size: 9px;
    line-height: 1.2;
  }
}

/* =========================
   PATCH: ヘッダー同意文を「ボタン外」＆「ヘッダー内」に収める
========================= */

/* ヘッダーは高さ固定をやめて、中身に合わせて伸びる */
.header{
  height: auto !important;
  min-height: 50px;              /* 最低ラインは維持 */
  overflow: visible;             /* 切れ防止 */
  padding: 6px 0 8px;            /* 同意文ぶんの下余白 */
}

/* 右側CTAを「ボタン＋同意文」の縦積みにする */
.header__cta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ★このwrapの幅＝ボタン幅＝同意文幅（見た目安定のため幅を固定寄りに） */
.header__cta-wrap{
  width: clamp(190px, 34vw, 280px);
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;          /* 子要素を同じ幅に */
}

/* ボタンはwrap幅いっぱい（＝同意文と同幅） */
.header__cta-wrap .cta-button{
  width: 100%;
  justify-content: center;
}

/* 同意文：ボタン外、ボタンと同幅で折り返し */
.header__consent{
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  font-size: 5px;
  line-height: 1.25;
  color: rgba(255,255,255,.9);
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;
}

.header__consent a{
  color: rgba(255,255,255,.98);
  text-decoration: underline;
}

/* もし既存で absolute の同意文があるなら無効化（残ってると飛び出し原因） */
.consent-note{
  position: static !important;
  top: auto !important;
}

/* 固定ヘッダーが伸びた分、MVが隠れるのが気になる場合だけ調整（任意） */
/* .mv{ margin-top: 90px; } */

/* =========================
   interview chat avatar fix
========================= */

.chat__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
}

/* アバター共通 */
.chat__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;   /* ←枠からはみ出すのを防ぐ */
  flex-shrink: 0;
}

/* アバター画像 */
.chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ←丸枠に収める */
  display: block;
}

/* 聞き手側は少し白背景で機材感 */
.chat__avatar--host {
  background: #ffffff;
  border: 2px solid #ececec;
  padding: 8px;
}

.chat__avatar--host img {
  object-fit: contain;
}

/* えむちゃん側は自然な人物表示 */
.chat__avatar--talent {
  border: 2px solid #ffd7e4;
}

/* 吹き出しをやわらかく */
.chat__bubble {
  max-width: 720px;
  padding: 16px 18px;
  border-radius: 20px;
  line-height: 1.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 質問側 */
.chat__item--q .chat__bubble {
  background: #fff8fb;
  border: 1px solid #ffd9e7;
}

/* 回答側 */
.chat__item--a .chat__bubble {
  background: #f7fbff;
  border: 1px solid #d9ebff;
}

/* 名前 */
.chat__name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* 本文 */
.chat__text {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 1.95;
  word-break: break-word;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .chat__item {
    gap: 10px;
    margin-top: 16px;
  }

  .chat__avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
  }

  .chat__bubble {
    padding: 14px 14px;
    border-radius: 16px;
  }

  .chat__name {
    font-size: 13px;
  }

  .chat__text {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* 人物アバターだけを確実に丸枠化 */
.chat .chat__avatar.chat__avatar--talent{
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  padding: 0;
  place-content: initial;
  background: #fff;
  border: 2px solid #ffd7e4;
  box-sizing: border-box;
}

/* 人物画像だけを確実に丸枠いっぱいに表示 */
.chat .chat__avatar.chat__avatar--talent img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
}