@charset "utf-8";

/* * {
  outline: 1px solid blue;
} */

@import url("https://fonts.googleapis.com/css2?family=Spectral&family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP");

.sp_only {
  display: block;
}

.pc_only {
  display: none;
}

#footer {
  margin-top: 0;
  padding-top: 80px;
  background-color: #fff;
}

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

.fs-l-main {
  width: 100% !important;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  position: relative;
  z-index: 0;
}

.fs-l-pageMain {
  width: 100% !important;
  max-width: 100%;
}

.fs-c-breadcrumb {
  max-width: 800px;
  margin-inline: auto;
}

.main {
  width: 100%;
  text-align: center;
  font-family:
    游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ,
    "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana,
    sans-serif;
  --text--color: #3e3021;
  --button--color: #745e4d;
}

/* LP */
#nonwire-diagnosis_2605 {
  width: 100%;
  /* max-width: 800px;
  overflow: hidden;
  position: relative; */
  margin: 0 auto;
  line-height: 1;
  font-family:
    "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic",
    Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-feature-settings: "palt";
}

/* SP スマホ 375px基準に*/
/* ============================================================
   最初のセクション：MV & 概要（重ね合わせ）
   ============================================================ */
.diagnosis-intro {
  width: calc(375 / 375 * 100vw);
  margin: 0 auto;
  position: relative; /* 子要素を重ねる基準点 */
  text-align: center;
  overflow: hidden;
}

.intro-mv {
  width: calc(375 / 375 * 100vw);
}

.intro-mv img {
  width: 100%;
  height: auto;
  display: block;
}

.intro-description {
  position: absolute;
  bottom: calc(400 / 375 * 100vw);
  bottom: calc(180 / 375 * 100vw);
  left: 0;
  width: 100%;
  z-index: 10;
}

.intro-sub-title {
  font-family: "the-seasons", sans-serif;
  font-weight: 400;
  font-size: calc(18 / 375 * 100vw);
  color: #8b5131;
  margin-bottom: calc(45 / 375 * 100vw);
}

.intro-text {
  font-family:
    "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic",
    Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: calc(12 / 375 * 100vw);
  line-height: 2.4;
  color: #8b5131;
  letter-spacing: 0.08em;
  margin-bottom: calc(32 / 375 * 100vw);
}

.diagnosis-intro {
  margin-bottom: calc(-160 / 375 * 100vw);
}

#quiz-area {
  color: #5d3d3d;
  width: calc(375 / 375 * 100vw);
  /* max-width: 800px; */
  margin: 0 auto;
  padding: calc(72 / 375 * 100vw) 0;
}

.quiz-area_bg {
  position: relative;
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/quiz/quiz_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100%;
  /* max-width: 800px; */
  margin-inline: auto;
  box-shadow: 0 15px 30px rgba(92, 33, 41, 0.17);
}

/* --- Question ヘッダー部分 --- */
.q-header {
  text-align: center;
  margin-bottom: calc(20 / 375 * 100vw);
  /* margin-bottom: calc(20 * (100vw / 375)); */
}

.q-label,
.q-number {
  font-family: "the-seasons", sans-serif;
  font-style: normal;
}

.q-label {
  font-weight: 400;
  display: block;
  font-size: calc(23 / 375 * 100vw);
  /* font-size: calc(23 * (100vw / 375)); */
  letter-spacing: 0.2em;
  color: #955555;
}

.q-number {
  display: block;
  font-weight: 100;
  font-size: calc(50 / 375 * 100vw);
  line-height: 1;
  color: rgba(149, 85, 85, 0.4);
  margin-top: calc(5 / 375 * 100vw);
}

.q-text {
  font-size: calc(14 / 375 * 100vw);
  /* font-size: calc(270 * (100vw / 375)); */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: calc(33 / 375 * 100vw);
}

.answer-item {
  /* width: calc(270 * (100vw / 375)); */
  /* width: calc(270 * (800px / 375)); */
  width: calc(270 / 375 * 100vw);
}

/* --- 回答ボタンエリア --- */
.answer-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 375 * 100vw);
  padding-bottom: calc(70 / 375 * 100vw);
}

.answer-options:last-child {
  padding-bottom: calc(64 / 375 * 100vw);
}

/* ラジオボタン本体は完全に隠す */
.answer-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ボタンの外枠デザイン（通常時） */
.btn-inner {
  display: flex;
  align-items: center;
  padding: calc(20 / 375 * 100vw) calc(29 / 375 * 100vw);
  border: 1.5px solid #d1b5b5; /* 細いベージュのライン */
  border-radius: calc(60 / 375 * 100vw); /* 綺麗な長円形 */
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: rgba(255, 255, 255, 0.6); /* ほんのり透ける白 */
}

/* アルファベット (A, B, C) */
.alphabet {
  font-family: "the-seasons", sans-serif;
  font-size: calc(30 / 375 * 100vw);
  font-weight: 300;
  color: #d1b5b5;
  margin-top: calc(5 / 375 * 100vw);
  width: calc(40 / 375 * 100vw);
  text-align: center;
  flex-shrink: 0;
  transition: color 0.4s ease;
}

/* ボタン内テキスト */
.text {
  /* font-size: calc(12 * (100vw / 375)); */
  font-size: calc(12 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.5;
  color: #5c2129;
  text-align: left;
  transition: color 0.4s ease;
}

/* --- 選択された時のスタイル（画像Bの状態） --- */
.answer-item input:checked + .btn-inner {
  background-color: #955555; /* 指示画像の濃いブラウン */
  border-color: #925f5f;
  transform: scale(1.02); /* わずかに大きくして「選択感」を出す */
  box-shadow: 0 calc(10 / 375 * 100vw) calc(20 / 375 * 100vw)
    rgba(146, 95, 95, 0.2);
}

.answer-item input:checked + .btn-inner .alphabet,
.answer-item input:checked + .btn-inner .text {
  color: #ffffff; /* 文字を白抜きに */
}

/* ホバー時の挙動（PC） */
@media (hover: hover) {
  .btn-inner:hover {
    border-color: #925f5f;
    background-color: #fff9f9;
  }
}

/* --- 診断するボタン --- */
.submit-area {
  text-align: center;
}

#diagnosis-submit {
  background: #955555;
  color: #fff;
  border: none;
  padding: calc(20 / 375 * 100vw) calc(75 / 375 * 100vw);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 calc(4 / 375 * 100vw) calc(15 / 375 * 100vw)
    rgba(146, 95, 95, 0.3);
  transition: all 0.3s ease;
}

/* ============================================================
   診断結果セクション（Section 01〜07 共通）
   ============================================================ */

.diag-result-item {
  width: calc(375 / 375 * 100vw); /* デザインカンプに基づき800px固定 */
  margin: 0 auto calc(100 / 375 * 100vw); /* セクション間の余白 */
  /* padding: 80px 0; */
  text-align: center;
  box-sizing: border-box;
  position: relative;
  /* GSAPアニメーション用初期設定 */
  display: none;
  opacity: 0;
  /* 背景の設定（セクションごとに個別に指定） */
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

/* --- 背景画像個別指定の例 --- */

#section-1 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_01/wireless_collection_01_bg.png");
}

#section-2 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_02/wireless_collection_02_bg.png");
}

#section-3 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_03/wireless_collection_03_bg.png");
}

#section-4 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_04/wireless_collection_04_bg.png");
}

#section-5 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_05/wireless_collection_05_bg.png");
}

#section-6 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_06/wireless_collection_06_bg.png");
}

#section-7 {
  background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/collection_07/wireless_collection_07_bg.png");
}

#section-1,
#section-2,
#section-3,
#section-4,
#section-5,
#section-6,
#section-7 {
  background-size: cover;
  background-repeat: no-repeat;
}

/* #section-2 { background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/wireless_collection_02_bg.jpg"); } ... */

.result-item-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- タイトル画像エリア（WIRELESS Collection 01） --- */
.item-title {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 30px;
}

.item-title img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sec_title_01,
.sec_title_02,
.sec_title_03,
.sec_title_04,
.sec_title_05,
.sec_title_06,
.sec_title_07 {
  padding-top: calc(68.8 / 375 * 100vw);
}

.sec_title_01 img {
  width: calc(284.7 / 375 * 100vw);
}

.sec_title_02 img {
  width: calc(293.7 / 375 * 100vw);
}

.sec_title_03 img {
  width: calc(292.7 / 375 * 100vw);
}

.sec_title_04 img {
  width: calc(294.7 / 375 * 100vw);
}

.sec_title_05 img {
  width: calc(292.7 / 375 * 100vw);
}

.sec_title_06 img {
  width: calc(294.7 / 375 * 100vw);
}

.sec_title_07 img {
  width: calc(291.7 / 375 * 100vw);
}

/* --- キャッチコピー（白背景のタグ風） --- */
.item-copy {
  font-weight: 500;
  margin-bottom: calc(40 / 375 * 100vw);
  text-align: center;
}

.item-copy p {
  margin: calc(4 / 375 * 100vw) 0;
}

.item-copy p:last-child {
  margin: 0;
}

.item-copy span {
  display: inline-block;
  background: #f5f0ea;
  padding: calc(3 / 375 * 100vw) calc(9 / 375 * 100vw) calc(2 / 375 * 100vw);
  font-size: calc(14 / 375 * 100vw);
  color: #5c2129;
  letter-spacing: 0.1em;
}

.item-copy span:nth-of-type(2) {
  background: #f5f0ea;
  color: #5c2129;
}

.item-models {
  /* 変化を滑らかにする設定（0.3秒かけて変わる） */
  transition: opacity 0.3s ease;
  cursor: pointer; /* マウスを置いた時に指マークにする */
}

.item-models:hover {
  opacity: 0.85;
}

/* --- 商品ビジュアル（モデル画像）：曲線デザイン --- */
.product-visual {
  width: 85%;
  position: relative;
  z-index: 2; /* 詳細ボックスの上に重ねる */
}

.product-visual img {
  width: 100%;
  height: auto;
  display: block;
  /* カンプ通りの右上の大きな角丸 */
  border-top-right-radius: 120px;
}

.sec_model_01 img,
.sec_model_02 img,
.sec_model_03 img,
.sec_model_04 img,
.sec_model_05 img,
.sec_model_06 img,
.sec_model_07 img,
.sec_model_09 img,
.sec_model_10 img,
.sec_model_11 img,
.sec_model_12 img,
.sec_model_13 img,
.sec_model_14 img {
  width: calc(286.75 / 375 * 100vw);
}

.sec_model_08 img {
  width: calc(340 / 375 * 100vw);
}

/* --- 商品詳細ボックス（ベージュ背景のカード） --- */
.product-detail-box {
  width: 85%;
  background: rgba(249, 246, 243, 0.85); /* 透過ベージュ */
  padding: calc(80 / 375 * 100vw) calc(30 / 375 * 100vw) calc(50 / 375 * 100vw); /* 上を広めにして画像と重ねる */
  border-radius: calc(40 / 375 * 100vw);
  margin-top: calc(
    -60 / 375 * 100vw
  ); /* 画像と重ねるためのネガティブマージン */
  margin-bottom: calc(60 / 375 * 100vw);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* --- テキスト情報 --- */

.item-info {
  margin: calc(31 / 375 * 100vw) 0 calc(47 / 375 * 100vw);
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.4);
  width: calc(286.75 / 375 * 100vw);
  border-radius: calc(20 / 375 * 100vw);
}

.brand-name {
  font-size: calc(12 / 375 * 100vw);
  font-weight: 500;
  color: #5c2129;
  padding-top: calc(20 / 375 * 100vw);
  margin-bottom: calc(4 / 375 * 100vw);
  letter-spacing: 0.05em;
}

.product-name {
  font-size: calc(12 / 375 * 100vw);
  font-weight: 500;
  color: #5c2129;
  margin-bottom: calc(12 / 375 * 100vw);
  letter-spacing: 0.03em;
}

/* --- カラーバリエーション画像 --- */
.color-variants {
  margin-bottom: calc(12 / 375 * 100vw);
}

.color-variants img {
  display: block;
  margin: 0 auto;
  height: auto;
}

.sec_color-img_01 img {
  width: calc(70 / 375 * 100vw);
}

.sec_color-img_02 img {
  width: calc(55 / 375 * 100vw);
}

.sec_color-img_03 img {
  width: calc(40 / 375 * 100vw);
}

.sec_color-img_04 img {
  width: calc(40 / 375 * 100vw);
}

.sec_color-img_05 img {
  width: calc(55 / 375 * 100vw);
}

.sec_color-img_06 img {
  width: calc(40 / 375 * 100vw);
}

.sec_color-img_07 img {
  width: calc(85 / 375 * 100vw);
}

.sec_color-img_08 img {
  width: calc(40 / 375 * 100vw);
}

.sec_color-img_09 img {
  width: calc(55 / 375 * 100vw);
}

.sec_color-img_10 img {
  width: calc(55 / 375 * 100vw);
}

.sec_color-img_11 img {
  width: calc(70 / 375 * 100vw);
}

.sec_color-img_12 img {
  width: calc(70 / 375 * 100vw);
}

.sec_color-img_13 img {
  width: calc(70 / 375 * 100vw);
}

.sec_color-img_14 img {
  width: calc(55 / 375 * 100vw);
}

/* --- スペック情報リスト --- */
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 35px 0;
  font-size: 0;
}

.product-meta {
  color: #5c2129;
  font-size: calc(12 / 375 * 100vw);
  margin-bottom: calc(20 / 375 * 100vw);
}

.product-meta li {
  margin-bottom: calc(4 / 375 * 100vw);
}

.product-meta li:last-child {
  margin-bottom: 0;
}

/* --- CHECKボタン：デザイン再現 --- */
.check-btn {
  display: inline-block;
  background-color: #955555; /* カンプのボタン色 */
  color: #ffffff !important;
  text-decoration: none;
  padding: calc(8 / 375 * 100vw) calc(30 / 375 * 100vw) calc(7 / 375 * 100vw);
  font-family: "the-seasons", sans-serif;
  font-size: calc(14 / 375 * 100vw);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  border: none;
  margin-bottom: calc(13 / 375 * 100vw);
}

.check-btn:hover {
  opacity: 0.85;
}

#check-all-section {
  display: none;
  text-align: center;
  padding-bottom: calc(30 / 375 * 100vw);
  width: 100%;
}

.check-all-section_text {
  font-size: calc(12 / 375 * 100vw);
  color: #5c2129;
  padding-bottom: calc(20 / 375 * 100vw);
}

/* --- 初期状態を隠す設定 --- */
.init-hidden {
  display: none;
  opacity: 0;
}

/* --- レイアウト設定 --- */

.result-display {
  display: none; /* JS実行まで非表示 */
  width: calc(375 / 375 * 100vw);
  min-height: 100vh;
  position: relative;
  background: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/recommend_bg_01.png")
    no-repeat center center;
  background-size: cover;
  padding: calc(60 / 375 * 100vw) 0;
  margin: 0 auto;
}

.result-inner {
  width: calc(375 / 375 * 100vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 演出エリア全体の背景設定 */
.result-title_bg {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ここに背景画像を指定（例としてbg.pngを想定） */
  background: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/recommend_bg_01.png")
    no-repeat center center;
  background-size: 100% auto;
}

/* 初期は隠しておく */
.result-title_bg.init-hidden {
  display: none;
  opacity: 0;
}

/* リボン：浮かさずに配置 */
.ribbon-layer {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-top: calc(20 / 375 * 100vw);
  margin-bottom: calc(40 / 375 * 100vw); /* 吹き出しと少し重ねる */
  text-align: center;
}

.ribbon-layer img {
  width: 100%;
  /* max-width: 450px; */
}

/* 吹き出し：浮かさずに高さを確保 */
.balloon-container {
  position: relative;
  width: calc(325.7 / 375 * 100vw);
  /* max-width: 450px; */
  z-index: 2;
  margin: 0 auto;
  /* margin-bottom: 0; */
}

.balloon-bg {
  width: 100%;
  height: auto;
}

.text-content {
  position: absolute; /* 吹き出し画像に対してのみ絶対配置 */
  /* top: calc( (800 * 0.45) / 375 * 100vw ); */
  top: calc((800 * 0.12) / 375 * 100vw);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
}

.just-for-you {
}

.just-for-you img {
  width: calc(143 / 375 * 100vw);
  margin: 0 auto;
}

/* 文字行の調整 */
.recommend-row,
.item-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* gap: 1.2vw; */
  width: 100%;
  margin-top: 3px;
}

/* 文字画像のサイズ固定（巨大化防止） */
.char-path {
  display: inline-block;
  width: auto;
  visibility: hidden;
  opacity: 0;
}

.text_r_1 {
  height: calc(29.4 / 375 * 100vw);
  margin-right: calc(1.8 / 375 * 100vw);
  margin-bottom: calc(2 / 375 * 100vw);
}

.text_e_1 {
  height: calc(19.5 / 375 * 100vw);
  margin-right: calc(2.1 / 375 * 100vw);
  margin-bottom: calc(1 / 375 * 100vw);
}

.text_c_1 {
  height: calc(19.55 / 375 * 100vw);
  margin-right: calc(2.4 / 375 * 100vw);
  margin-bottom: calc(0.8 / 375 * 100vw);
}

.text_o_1 {
  height: calc(19.56 / 375 * 100vw);
  margin-right: calc(3.5 / 375 * 100vw);
  margin-bottom: calc(1.6 / 375 * 100vw);
}

.text_m_1 {
  height: calc(21.39 / 375 * 100vw);
  margin-right: calc(2.8 / 375 * 100vw);
  margin-bottom: calc(2.9 / 375 * 100vw);
}

.text_m_2 {
  height: calc(21.1 / 375 * 100vw);
  margin-right: calc(3 / 375 * 100vw);
  margin-bottom: calc(6 / 375 * 100vw);
}

.text_e_2 {
  height: calc(19.55 / 375 * 100vw);
  margin-right: calc(3 / 375 * 100vw);
  margin-bottom: calc(8.4 / 375 * 100vw);
}

.text_n_1 {
  height: calc(19.99 / 375 * 100vw);
  margin-right: calc(3 / 375 * 100vw);
  margin-bottom: calc(7.9 / 375 * 100vw);
}

.text_d_1 {
  height: calc(30.79 / 375 * 100vw);
  margin-bottom: calc(5 / 375 * 100vw);
}

.text_i_1 {
  height: calc(26.73 / 375 * 100vw);
  margin-right: calc(3.2 / 375 * 100vw);
  margin-bottom: calc(0.8 / 375 * 100vw);
}

.text_t_1 {
  height: calc(27.45 / 375 * 100vw);
  margin-right: calc(3.2 / 375 * 100vw);
  margin-bottom: calc(1.8 / 375 * 100vw);
}

.text_e_3 {
  height: calc(27.99 / 375 * 100vw);
  margin-right: calc(3.6 / 375 * 100vw);
  margin-bottom: calc(3.1 / 375 * 100vw);
}

.text_m_3 {
  height: calc(28.44 / 375 * 100vw);
  margin-bottom: calc(5.2 / 375 * 100vw);
}

/* 商品セクション */
.diag-result-item {
  position: relative;
  width: 100%;
  margin-top: calc(-6 / 375 * 100vw);
  margin-bottom: 0;
  background: #fff;
  /* border-radius: 10px; */
  /* padding: 20px; */
  box-shadow: 0 calc(4 / 375 * 100vw) calc(15 / 375 * 100vw) rgba(0, 0, 0, 0.05);
}

/* recommend_items */

/* --- 最後の共通セクション --- */
.result-footer-banner {
  width: calc(375 / 375 * 100vw);
  margin: calc(-60 / 375 * 100vw) auto calc(100 / 375 * 100vw);
  position: relative;
  text-align: center;
}

.footer-banner-container {
  position: relative;
  width: 100%;
  line-height: 0;
}

.footer-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の上の重なり設定 */
.footer-banner-content {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.footer-banner-text {
  font-family:
    "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic",
    Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: calc(12 / 375 * 100vw);
  line-height: 1.8;
  color: #333;
  margin-bottom: calc(30 / 375 * 100vw);
  letter-spacing: 0.05em;
}

/* CHECK ALL ボタンのデザイン */
.footer-check-btn {
  display: inline-block;
  border: 1px solid #925f5f; /* スクショに合わせた細いエンジの枠線 */
  background-color: rgba(255, 255, 255, 0.6); /* ほんのり透ける白 */
  color: #925f5f !important;
  text-decoration: none;
  padding: calc(20 / 375 * 100vw) calc(30 / 375 * 100vw);
  font-size: calc(14 / 375 * 100vw);
  font-family: "the-seasons", sans-serif;
  letter-spacing: 0.1em;
  transition: all 0.3s;
}

.footer-check-btn:hover {
  background-color: #925f5f;
  color: #fff !important;
}
/* SP スマホ 375px基準に*/

/* PC 375pxカンプから計算 */
@media screen and (min-width: 780px) {
  /* font-size: calc(24px * (800 / 375)); */

  /* ============================================================
   最初のセクション：MV & 概要（重ね合わせ）
   ============================================================ */
  .diagnosis-intro {
    width: 800px;
    margin: 0 auto;
    position: relative; /* 子要素を重ねる基準点 */
    text-align: center;
    overflow: hidden;
  }

  .intro-mv {
    width: 800px;
  }

  .intro-mv img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* .result-comment {
    opacity: 0;
  } */

  /* 画像の上に重なるテキストエリア */
  .intro-description {
    position: absolute;
    bottom: calc(
      130px * (800 / 375)
    ); /* 画像の下端からの位置調整（カンプに合わせて調整） */
    left: 0;
    width: 100%;
    z-index: 10;
  }

  /* STYLE & COZY */
  .intro-sub-title {
    font-family: "the-seasons", sans-serif;
    font-weight: 400;
    font-size: calc(18px * (800 / 375));
    color: #8b5131; /* カンプのブラウン */
    margin-bottom: calc(45px * (800 / 375));
  }

  /* 説明文テキスト */
  .intro-text {
    font-family:
      "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
      "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN",
      "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック",
      "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
    font-size: calc(12px * (800 / 375));
    line-height: 2.4;
    color: #8b5131;
    letter-spacing: 0.08em;
    margin-bottom: calc(32px * (800 / 375));
  }

  /* 診断フォームへ続く余白を確保するための調整 */
  /* (position: absoluteにすると高さが消えるため、外側にマージンを持たせる) */
  .diagnosis-intro {
    margin-bottom: calc(-75px * (800 / 375));
  }

  /* 260513 */
  /* --- 共通：フォント設定（できれば明朝系を指定） --- */
  #quiz-area {
    color: #5d3d3d;
    max-width: 800px;
    margin: 0 auto;
    padding: calc(72px * (800 / 375)) 0;
  }

  .quiz-area_bg {
    position: relative;
    background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/quiz/quiz_bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    box-shadow: 0 calc(15px * (800 / 375)) calc(30px * (800 / 375))
      rgba(92, 33, 41, 0.17);
  }

  /* --- Question ヘッダー部分 --- */
  .q-header {
    text-align: center;
    margin-bottom: calc(20px * (800 / 375));
  }

  .q-label,
  .q-number {
    font-family: "the-seasons", sans-serif;
    font-style: normal;
  }

  .q-label {
    font-weight: 400;
    display: block;
    font-size: calc(23px * (800 / 375));
    /* font-size: calc(23 * (100vw / 375)); */
    letter-spacing: 0.2em;
    color: #955555;
  }

  .q-number {
    display: block;
    font-weight: 100;
    font-size: calc(50px * (800 / 375));
    line-height: 1;
    color: rgba(149, 85, 85, 0.4);
    margin-top: calc(5px * (800 / 375));
  }

  .q-text {
    font-size: calc(14px * (800 / 375));
    /* font-size: calc(270 * (100vw / 375)); */
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: calc(33px * (800 / 375));
  }

  .answer-item {
    /* width: calc(270 * (100vw / 375)); */
    width: calc(270px * (800 / 375));
  }

  /* --- 回答ボタンエリア --- */
  .answer-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * (800 / 375));
    padding-bottom: calc(70px * (800 / 375));
  }

  .answer-options:last-child {
    padding-bottom: calc(64 * (800px / 375));
  }

  /* ラジオボタン本体は完全に隠す */
  .answer-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* ボタンの外枠デザイン（通常時） */
  .btn-inner {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    border: 1.5px solid #d1b5b5; /* 細いベージュのライン */
    border-radius: calc(60 * (800px / 375)); /* 綺麗な長円形 */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: rgba(255, 255, 255, 0.6); /* ほんのり透ける白 */
  }

  /* アルファベット (A, B, C) */
  .alphabet {
    font-size: calc(30 * (800px / 375));
    font-weight: 300;
    color: #d1b5b5;
    margin-top: calc(5 * (800px / 375));
    margin-right: calc(25 * (800px / 375));
    width: calc(40 * (800px / 375));
    text-align: center;
    flex-shrink: 0;
    transition: color 0.4s ease;
  }

  /* ボタン内テキスト */
  .text {
    /* font-size: calc(12 * (100vw / 375)); */
    font-size: calc(12 * (800px / 375));
    font-weight: 500;
    line-height: 1.5;
    color: #5c2129;
    text-align: left;
    transition: color 0.4s ease;
  }

  /* --- 選択された時のスタイル（画像Bの状態） --- */
  .answer-item input:checked + .btn-inner {
    background-color: #955555; /* 指示画像の濃いブラウン */
    border-color: #925f5f;
    transform: scale(1.02); /* わずかに大きくして「選択感」を出す */
    box-shadow: 0 10px 20px rgba(146, 95, 95, 0.2);
  }

  .answer-item input:checked + .btn-inner .alphabet,
  .answer-item input:checked + .btn-inner .text {
    color: #ffffff; /* 文字を白抜きに */
  }

  /* ホバー時の挙動（PC） */
  @media (hover: hover) {
    .btn-inner:hover {
      border-color: #925f5f;
      background-color: #fff9f9;
    }
  }

  /* --- 診断するボタン --- */
  .submit-area {
    text-align: center;
  }

  #diagnosis-submit {
    background: #955555;
    color: #fff;
    border: none;
    padding: 20px 75px;
    font-size: calc(12 * (800px / 375));
    letter-spacing: 0.1em;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(146, 95, 95, 0.3);
    transition: all 0.3s ease;
  }

  /* ============================================================
   診断結果セクション（Section 01〜07 共通）
   ============================================================ */

  .diag-result-item {
    width: 800px; /* デザインカンプに基づき800px固定 */
    margin: 0 auto calc(100 * (800px / 375)); /* セクション間の余白 */
    /* padding: 80px 0; */
    text-align: center;
    box-sizing: border-box;
    position: relative;
    /* GSAPアニメーション用初期設定 */
    display: none;
    opacity: 0;
    /* 背景の設定（セクションごとに個別に指定） */
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
  }

  /* #section-2 { background-image: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/wireless_collection_02_bg.jpg"); } ... */

  .result-item-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* --- タイトル画像エリア（WIRELESS Collection 01） --- */
  .item-title {
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(30px * (800 / 375));
  }

  .item-title img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .sec_title_01,
  .sec_title_02,
  .sec_title_03,
  .sec_title_04,
  .sec_title_05,
  .sec_title_06,
  .sec_title_07 {
    padding-top: calc(68.8px * (800 / 375));
  }

  .sec_title_01 img {
    width: calc(284.7px * (800 / 375));
  }

  .sec_title_02 img {
    width: calc(293.7px * (800 / 375));
  }

  .sec_title_03 img {
    width: calc(292.7px * (800 / 375));
  }

  .sec_title_04 img {
    width: calc(294.7px * (800 / 375));
  }

  .sec_title_05 img {
    width: calc(292.7px * (800 / 375));
  }

  .sec_title_06 img {
    width: calc(294.7px * (800 / 375));
  }

  .sec_title_07 img {
    width: calc(291.7px * (800 / 375));
  }

  /* --- キャッチコピー（白背景のタグ風） --- */
  .item-copy {
    font-weight: 500;
    margin-bottom: 40px;
    text-align: center;
  }

  .item-copy p {
    margin: 4px 0;
  }

  .item-copy p:last-child {
    margin: 0;
  }

  .item-copy span {
    display: inline-block;
    background: #f5f0ea;
    padding: 3px 9px 2px;
    font-size: calc(14px * (800 / 375));
    color: #5c2129;
    letter-spacing: 0.1em;
  }

  .item-copy span:nth-of-type(2) {
    background: #f5f0ea;
    color: #5c2129;
  }

  .item-models {
    /* 変化を滑らかにする設定（0.3秒かけて変わる） */
    transition: opacity 0.3s ease;
    cursor: pointer; /* マウスを置いた時に指マークにする */
  }

  .item-models:hover {
    opacity: 0.85;
  }

  /* --- 商品ビジュアル（モデル画像）：曲線デザイン --- */
  .product-visual {
    width: 85%;
    position: relative;
    z-index: 2; /* 詳細ボックスの上に重ねる */
  }

  .product-visual img {
    width: 100%;
    height: auto;
    display: block;
    /* カンプ通りの右上の大きな角丸 */
    border-top-right-radius: 120px;
  }

  .sec_model_01 img,
  .sec_model_02 img,
  .sec_model_03 img,
  .sec_model_04 img,
  .sec_model_05 img,
  .sec_model_06 img,
  .sec_model_07 img,
  .sec_model_09 img,
  .sec_model_10 img,
  .sec_model_11 img,
  .sec_model_12 img,
  .sec_model_13 img,
  .sec_model_14 img {
    width: calc(286.75px * (800 / 375));
  }

  .sec_model_08 img {
    width: calc(340px * (800 / 375));
  }

  /* --- 商品詳細ボックス（ベージュ背景のカード） --- */
  .product-detail-box {
    width: 85%;
    background: rgba(249, 246, 243, 0.85); /* 透過ベージュ */
    padding: 80px 30px 50px; /* 上を広めにして画像と重ねる */
    border-radius: 40px;
    margin-top: calc(-60px * (800 / 375));
    margin-bottom: calc(60px * (800 / 375));
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }

  /* --- テキスト情報 --- */

  .item-info {
    margin: calc(31px * (800 / 375)) calc(47px * (800 / 375));
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.4);
    width: calc(286.75px * (800 / 375));
    border-radius: 20px;
  }

  .brand-name {
    font-size: calc(12px * (800 / 375));
    font-weight: 500;
    color: #5c2129;
    padding-top: calc(20px * (800 / 375));
    margin-bottom: calc(4px * (800 / 375));
    letter-spacing: 0.05em;
  }

  .product-name {
    font-size: calc(12px * (800 / 375));
    font-weight: 500;
    color: #5c2129;
    margin-bottom: calc(20px * (800 / 375));
    letter-spacing: 0.03em;
  }

  /* --- カラーバリエーション画像 --- */
  .color-variants {
    margin-bottom: calc(20px * (800 / 375));
  }

  .color-variants img {
    display: block;
    margin: 0 auto;
    height: auto;
  }

  .sec_color-img_01 img {
    width: 70px;
    width: calc(70px * (800 / 375));
  }

  .sec_color-img_02 img {
    width: calc(55px * (800 / 375));
  }

  .sec_color-img_03 img {
    width: calc(40px * (800 / 375));
  }

  .sec_color-img_04 img {
    width: calc(40px * (800 / 375));
  }

  .sec_color-img_05 img {
    width: calc(55px * (800 / 375));
  }

  .sec_color-img_06 img {
    width: calc(40px * (800 / 375));
  }

  .sec_color-img_07 img {
    width: calc(85px * (800 / 375));
  }

  .sec_color-img_08 img {
    width: calc(40px * (800 / 375));
  }

  .sec_color-img_09 img {
    width: calc(55px * (800 / 375));
  }

  .sec_color-img_10 img {
    width: calc(55px * (800 / 375));
  }

  .sec_color-img_11 img {
    width: calc(70px * (800 / 375));
  }

  .sec_color-img_12 img {
    width: calc(70px * (800 / 375));
  }

  .sec_color-img_13 img {
    width: calc(70px * (800 / 375));
  }

  .sec_color-img_14 img {
    width: calc(55px * (800 / 375));
  }

  /* --- スペック情報リスト --- */
  .spec-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    font-size: 0;
  }

  .product-meta {
    color: #5c2129;
    font-size: calc(12px * (800 / 375));
    margin-bottom: calc(20px * (800 / 375));
  }

  .product-meta li {
    margin-bottom: calc(4px * (800 / 375));
  }

  .product-meta li:last-child {
    margin-bottom: 0;
  }

  /* --- CHECKボタン：デザイン再現 --- */
  .check-btn {
    display: inline-block;
    background-color: #955555; /* カンプのボタン色 */
    color: #ffffff !important;
    text-decoration: none;
    padding: 16px 40px 16px;
    font-family: "the-seasons", sans-serif;
    font-size: calc(14px * (800 / 375));
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    border: none;
    margin-bottom: calc(13px * (800 / 375));
  }

  .check-btn:hover {
    opacity: 0.85;
  }

  #check-all-section {
    display: none;
    text-align: center;
    padding-bottom: calc(30px * (800 / 375));
    width: 100%;
  }

  .check-all-section_text {
    font-size: calc(12px * (800 / 375));
    color: #5c2129;
    padding-bottom: calc(20px * (800 / 375));
  }

  /* --- 初期状態を隠す設定 --- */
  .init-hidden {
    display: none;
    opacity: 0;
  }

  /* --- レイアウト設定 --- */

  .result-display {
    display: none; /* JS実行まで非表示 */
    width: 800px;
    min-height: 100vh;
    position: relative;
    background: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/recommend_bg_01.png")
      no-repeat center center;
    background-size: cover;
    padding: 60px 0;
    margin: 0 auto;
  }

  .result-inner {
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 演出エリア全体の背景設定 */
  .result-title_bg {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ここに背景画像を指定（例としてbg.pngを想定） */
    background: url("https://tu-hacci.co.jp/img/feature/nonwire-diagnosis_2605/recommend_bg_01.png")
      no-repeat center center;
    background-size: 100% auto;
  }

  /* 初期は隠しておく */
  .result-title_bg.init-hidden {
    display: none;
    opacity: 0;
  }

  /* リボン：浮かさずに配置 */
  .ribbon-layer {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-top: calc(20px * (800 / 375));
    margin-bottom: calc(40px * (800 / 375)); /* 吹き出しと少し重ねる */
    text-align: center;
  }

  .ribbon-layer img {
    width: 100%;
    /* max-width: 450px; */
  }

  /* 吹き出し：浮かさずに高さを確保 */
  .balloon-container {
    position: relative;
    width: calc(325.7px * (800 / 375));
    /* max-width: 450px; */
    z-index: 2;
    margin: 0 auto;
    /* margin-bottom: 0; */
  }

  .balloon-bg {
    width: 100%;
    height: auto;
  }

  .text-content {
    position: absolute; /* 吹き出し画像に対してのみ絶対配置 */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    text-align: center;
  }

  .just-for-you {
  }

  .just-for-you img {
    width: calc(143px * (800 / 375));
    margin: 0 auto;
  }

  /* 文字行の調整 */
  .recommend-row,
  .item-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* gap: 1.2vw; */
    width: 100%;
    margin-top: calc(3px * (800 / 375));
  }

  /* 文字画像のサイズ固定（巨大化防止） */
  .char-path {
    display: inline-block;
    width: auto;
    visibility: hidden;
    opacity: 0;
  }

  .text_r_1 {
    height: calc(29.4px * (800 / 375));
    margin-right: calc(1.8px * (800 / 375));
    margin-bottom: calc(2px * (800 / 375));
  }

  .text_e_1 {
    height: calc(19.5px * (800 / 375));
    margin-right: calc(2.1px * (800 / 375));
    margin-bottom: calc(1px * (800 / 375));
  }

  .text_c_1 {
    height: calc(19.55px * (800 / 375));
    margin-right: calc(2.4px * (800 / 375));
    margin-bottom: calc(0.8px * (800 / 375));
  }

  .text_o_1 {
    height: calc(19.56px * (800 / 375));
    margin-right: calc(3.5px * (800 / 375));
    margin-bottom: calc(1.6px * (800 / 375));
  }

  .text_m_1 {
    height: calc(21.39px * (800 / 375));
    margin-right: calc(2.8px * (800 / 375));
    margin-bottom: calc(2.9px * (800 / 375));
  }

  .text_m_2 {
    height: calc(21.1px * (800 / 375));
    margin-right: calc(3px * (800 / 375));
    margin-bottom: calc(6px * (800 / 375));
  }

  .text_e_2 {
    height: calc(19.55px * (800 / 375));
    margin-right: calc(3px * (800 / 375));
    margin-bottom: calc(8.4px * (800 / 375));
  }

  .text_n_1 {
    height: calc(19.99px * (800 / 375));
    margin-right: calc(3px * (800 / 375));
    margin-bottom: calc(7.9px * (800 / 375));
  }

  .text_d_1 {
    height: calc(30.79px * (800 / 375));
    margin-bottom: calc(5px * (800 / 375));
  }

  .text_i_1 {
    height: calc(26.73px * (800 / 375));
    margin-right: calc(3.2px * (800 / 375));
    margin-bottom: calc(0.8px * (800 / 375));
  }

  .text_t_1 {
    height: calc(27.45px * (800 / 375));
    margin-right: calc(3.2px * (800 / 375));
    margin-bottom: calc(1.8px * (800 / 375));
  }

  .text_e_3 {
    height: calc(27.99px * (800 / 375));
    margin-right: calc(3.6px * (800 / 375));
    margin-bottom: calc(3.1px * (800 / 375));
  }

  .text_m_3 {
    height: calc(28.44px * (800 / 375));
    margin-bottom: calc(5.2px * (800 / 375));
  }

  /* 商品セクション */
  .diag-result-item {
    position: relative;
    width: 100%;
    margin-top: calc(-6px * (800 / 375));
    margin-bottom: 0;
    background: #fff;
    /* border-radius: 10px; */
    /* padding: 20px; */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  /* recommend_items */

  /* --- 最後の共通セクション --- */
  .result-footer-banner {
    width: 800px;
    margin: calc(-60px * (800 / 375)) auto calc(100px * (800 / 375));
    position: relative;
    text-align: center;
  }

  .footer-banner-container {
    position: relative;
    width: 100%;
    line-height: 0;
  }

  .footer-banner-img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 画像の上の重なり設定 */
  .footer-banner-content {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  .footer-banner-text {
    font-family:
      "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
      "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN",
      "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック",
      "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
    font-size: calc(12px * (800 / 375));
    line-height: 1.8;
    color: #333;
    margin-bottom: calc(30px * (800 / 375));
    letter-spacing: 0.05em;
  }

  /* CHECK ALL ボタンのデザイン */
  .footer-check-btn {
    display: inline-block;
    border: 1px solid #925f5f; /* スクショに合わせた細いエンジの枠線 */
    background-color: rgba(255, 255, 255, 0.6); /* ほんのり透ける白 */
    color: #925f5f !important;
    text-decoration: none;
    padding: 30px 30px;
    font-size: calc(14px * (800 / 375));
    font-family: "the-seasons", sans-serif;
    letter-spacing: 0.1em;
    transition: all 0.3s;
  }

  .footer-check-btn:hover {
    background-color: #925f5f;
    color: #fff !important;
  }
}
/* PC 375pxカンプから計算 */

/* セクション検証用 */

/* #result-container,
.diag-result-item,
.init-hidden,
.result-title_bg,
.ribbon-layer,
.balloon-container,
.just-for-you img,
.char-path,
#check-all-section,
.result-footer-banner {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.char-path {
  display: inline-block !important;
} */

/* セクション検証用 */