/* ===== 共通 ===== */
*, 
*::before, 
*::after { box-sizing: border-box; }

:root {
  --content-width: 1000px;
  --pc-section-y: 40px;
  --sp-section-y: 32px;
  --sp-side-padding: 16px;
}

body { margin: 0;
  font-family: 
  "Noto Sans JP", sans-serif; 
  color: #36363a; 
  line-height: 1.6; 
  background: #fff; 
}

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

a { 
  text-decoration: none; 
  color: #414143; 
}

.section-inner { 
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.btn { 
  display: inline-block;
  padding: 14px 22px;
  border-radius: 30px; 
  font-weight: bold; 
  text-align: center; 
  transition: 0.3s; 
  cursor: pointer; 
  border: none; 
}

.btn-trial { 
  background: #4CAF50; 
  color: #fff; 
}

.btn-contents-view { 
  background: #EA7F24; 
  color: #fff; 
}

.btn:hover { 
  opacity: 0.85; 
  transform: translateY(-2px); 
}

.section-title {
  display: flex;           /* アイコンと文字を横並びにする */
  align-items: center;     /* 上下の高さを中央で揃える */
  justify-content: center; /* 全体を中央寄せにする */
  gap: 12px;               /* アイコンと文字の間の距離 */
  font-size: 28px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 30px;
}

/* アイコン自体のサイズ調整 */
.title-icon {
  width: 40px;  /* お好みの大きさに調整してください */
  height: auto;
}

/*注釈のサイズ*/
.note{
  font-size: 12px;
  color: #666;
  text-align: right;
}

/* 科目別カラー */
.result-card.result-english {
  --subject-color: #F04E57;
  --subject-light:#fcf1f1;
}

.result-card.result-math {
  --subject-color: #e2bd05;
  --subject-light: #fdf7dc;
}

.result-card.result-science {
  --subject-color: #2A869E;
  --subject-light: #ecf6f8;
}

.result-card.result-social {
  --subject-color: #2A4EA1;
  --subject-light: #eef2fa;
}

.sp-only {
  display: none;
}

/*--動く演出---*/
.js-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== ヘッダー ===== */
.lp-header { 
  position: sticky; 
  top: 0; 
  background: #fff; 
  z-index: 1000; 
  border-bottom: 1px solid #eee; 
}

.header-inner { 
  max-width: 1100px; 
  margin: auto; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 12px 20px; 
}

.header-nav { 
  display: flex; 
  gap: 20px; 
  align-items: center; 
}

.header-cta { 
  display: flex; 
  gap: 10px; 
}

.header-logo img { 
  height:95px; 
  width: auto; 
}

/* ===== ファーストビュー (FV) ===== */
.fv {
  position: relative;
  background: #fff;
  overflow: hidden;
  min-height: 550px;
}

.fv-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 550px;
}

/* 文字エリア：z-indexを上げて画像より手前に */
.fv-content-inner {
  position: relative;
  z-index: 20; 
  padding: 80px 20px;
  display: flex;
  align-items: center;
  min-height: 550px;
  margin-bottom: 20px;
}

.fv-copy {
  max-width: 580px;
}

.fv-copy h1 {
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.3;
  margin-bottom: 50px;
  font-weight: 900;
}

.fv-copy h1 span { 
  color: #EA7F24; 
}

.fv-lead { 
  font-size: 18px; 
  margin-top: 15px; 
}

.fv-text { 
  font-size: 16px; 
  margin-bottom: 25px; 
}

.fv-buttons { 
  display: flex; 
  gap: 15px; 
}

/* 背景画像エリア：z-indexを下げて文字の後ろに */
.fv-image-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background-image: url('../img/img_202605LP/fv-student1.png'); 
  background-repeat: no-repeat;
  background-position: center center; /* 顔が切れないよう中央に配置 */
  background-size: cover;
  z-index: 1; 
}

/* 白グラデーション：文字の可読性を上げる */
.fv-image-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 左側を白く塗りつぶし、中央付近から透明にする */
  background: linear-gradient(to right, 
    rgba(255,255,255,1) 0%, 
    rgba(255,255,255,1) 10%, 
    rgba(255,255,255,0) 50%
  );
  z-index: 2;
}

.fv-badge {
  position: absolute;
  right: 20px;
  top: 20px;
  background: #fff;
  border: 2px solid #EA7F24;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 25;
}

.fv-campaign {
  width: 100%;
  max-width: 750px;
  text-align: center;
  margin: 0 auto;
}

.fv-campaign img {
  display: block;
  margin: 0 auto; /* 画像そのものに対して、左右の余白を自動（auto）にして真ん中に寄せる */
  transition: 0.3s;
}

.fv-campaign img:hover{
  opacity: 0.95; 
  transform: translateY(-2px); 
}

/* ===== 成績アップ事例 ===== */
.results {
  background: linear-gradient(180deg, #fffaf5 0%, #fdfaf7 100%);
  padding: 40px 0;
  overflow: hidden;
}

.results-inner {
  max-width: var(--content-width);
}

.section-title-row {
  text-align: center;
  margin-bottom: 22px;
}

.results-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 18px;
  border-radius: 999px;
  background: #fff3e6;
  color: #EA7F24;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.results-title {
  margin-bottom: 8px;
}

.results-title .title-icon {
  width: 42px;
}

.results-lead {
  margin: 0;
  color: #666;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.result-swiper {
  width: 100%;
  padding: 24px 0 54px !important;
  overflow: hidden;
}

.result-card {
  border-color: var(--subject-color);
  width: 300px !important;
  min-height: 250px;
  background:
    radial-gradient(circle at top right, rgba(234,127,36,0.09), transparent 32%),
    #fff;
  border: 2px solid #f5c9a8;
  border-radius: 22px;
  padding: 24px 22px 18px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10px 25px rgba(234, 127, 36, 0.10);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.result-card::after {
  position: absolute;
  right: 22px;
  top: 86px;
  font-size: 34px;
  font-weight: bold;
  color: var(--subject-color);
  opacity: 0.75;
}

.result-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.result-card .subject {
  background: var(--subject-color);
  margin: 0 !important;
  padding: 5px 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

.result-mark {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--subject-color);
  border-radius: 999px;
  color: var(--subject-color);
  font-size: 15px;
  font-weight: 900;
  transform: rotate(-6deg);
  background: #fff;
}

.result-copy {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #ffd0a8;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
}

.result-card .score {
  margin: 0 !important;
  color: #EA7F24;
  line-height: 1;
  font-weight: 900;
  position: relative;
}

.result-card .score strong {
  display: inline;
  margin: 0;
  font-size: 68px;
  line-height: 1;
  color: #EA7F24;
  letter-spacing: -0.04em;
}

.result-card .score span {
  font-size: 24px;
  font-weight: 900;
  margin-left: 3px;
}

.score-change {
  background: var(--subject-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 18px;
  padding: 9px 18px;
  border-radius: 12px;
  color: #333;
  font-size: 19px;
  font-weight: bold;
  line-height: 1.2;
}

.score-change span:last-child,
.score-change b {
  color: var(--subject-color);
}

.score-change span:last-child {
  font-size: 22px;
}

.score-change-single {
  color: var(--subject-color);
  font-size: 16px;
}

.result-card .grade {
  margin:10px !important;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.result-card .grade::before {
  content: "👤";
  margin-right: 5px;
  opacity: 0.7;
  color: var(--subject-color);
}

.result-card .date {
  margin: 0 !important;
  font-size: 11px;
  color: #777;
  line-height: 1.45;
}

.results-note {
  text-align: r;
  margin-top: -5px;
}

/* Swiper */
.result-swiper .swiper-pagination-bullet {
  background: #ddd;
  opacity: 1;
}

.result-swiper .swiper-pagination-bullet-active {
  background: #EA7F24 !important;
}

/* ===== 共感 ===== */
.worries {
  background:#fdfaf7; /* 成績パートと同じ、少し温かみのある白背景 */
  overflow: hidden;
  padding: 40px 0 50px;
}

.worries-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0px 30px;
}

/* 左側：見出し */
.worries-title-area {
  flex: 0 0 auto;
}

.worries-title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  margin: 0;
}

.worries-title span {
  display: block; /* 「こんな悩み」で改行 */
  font-size: 28px;
}

/* 右側：コンテンツ全体 */
.worries-content-area {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap:40px;
}

/* 吹き出し本体 */
.worries-speech-bubble {
  position: relative;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 15px;
  padding: 35px 35px;
  text-align: left;
  width: 100%;
  max-width: 550px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-bottom: 0;
}

/* 吹き出しの尻尾 */
.worries-speech-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px; /* 吹き出しの右外側に出す */
  transform: translateY(-50%);
  border-width: 10px 0 10px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
}

/* 尻尾の枠線 */
.worries-speech-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  border-width: 11px 0 11px 13px;
  border-style: solid;
  border-color: transparent transparent transparent #ddd;
  z-index: 1;
}

/* 吹き出しの中のリセット */
.worries-list {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.worries-list li {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #555;
  padding: 0 20px;
}

/* チェックマーク */
.check-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

/* メッセージ */
.worries-message {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
  display:block;
  text-align: left;
  align-items: center;
  line-height: 1.6;
  padding: 0 20px;
}

/* 顔アイコン */
.stress-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle; /* 文字の高さに合わせる */
  margin-left: 4px;      /* 文字とのちょっとした隙間 */
}

/* 悩み画像 */
.worries-image-row {
  flex: 0 0 auto;       /* 幅を固定しない */
}

.worry-photo {
  height: 200px;        /* ここでサイズ感を調整（吹き出しの高さくらいに） */
  width: auto;          /* 横幅は自動計算 */
  display: block;
  object-fit: contain;
}

/* ===== 問題 (problem) ===== */
.problem {
  background:#f3f3f3;
  padding: 40px 0;
  text-align: center;
}

.problem h2 {
  font-size: 28px;
  margin-top: 0;
  margin-bottom: 50px;/* 円の上に少し余裕を持たせる */
}

.problem-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* PCでの円同士の間隔 */
  margin-bottom: 40px;
}

.problem-item {
  position: relative; /* アイコンを上に乗せる基準 */
  background: #fff;
  border-radius: 50%;
  width: 160px; /* 円を大きくして改行を防ぐ */
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ① アイコンの配置 */
.problem-icon {
  position: absolute;
  top: 6px; /* 円に対する位置（お好みで調整） */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ② アイコン画像のサイズ */
.problem-icon img {
  width: 35px;
  height: auto;
}

/* ③ 文字の改行と余白の調整 */
.problem-item p {
  margin: 15px 0 0 0; /* アイコンの場所を空ける */
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}

/* ⑤ 「これでは～」を中心ぞろえ */
.problem-message {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center; /* 中央揃えを明示 */
  margin: 0 auto;
}

.plus {
  font-size: 24px;
  color: #999;
  font-weight: bold;
}

.text-underline{
  font-weight: bold;
  font-size: 25px;
  /* 下線の設定 */
  border-bottom: 2px solid #EA7F24; /* 太さ 種類 色 */
  padding-bottom: 2px;/* 線と文字の余白 */
  display: inline-block;
}

/* ===== オファー ===== */
.offer {
  background: #fff8f2;
  padding: 40px 0;
}

/* 全体を横並びにする */
.offer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* コピーと下の段の隙間 */
}

/* ① 左側：テキストコピー */
.offer-copy {
  text-align: center;
}

.offer-copy h2 {
  font-size: 26px;
  line-height: 1.6;
  margin: 0;
}

.offer-copy h2 .highlight {
  color: #EA7F24;
  font-size: 1.2em; /* 周りの文字より20%大きく */
  font-weight: bold;
}

/* ② アイコンパートを「吹き出し」にする */
.offer-bottom-row {
  display: flex;
  flex-direction: row; /* 横に並べる */
  align-items: center; /* 上下の中心を合わせる */
  justify-content: center; /* 左右の中央に寄せる */
  gap: 40px; /* 吹き出しとメッセージの間の距離 */
  width: 100%; /* 親の幅いっぱいに広げて中央配置を安定させる */
  padding: 0 0 0 90px;
}

.offer-flow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border: 3px solid #EA7F24; /* 枠線をオレンジに */
  border-radius: 25px;
  padding: 30px 50px;
  position: relative;
  flex: 0 0 550px;
}

.offer-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
}

.offer-icon img{
  width: 100%;
}

.offer-step span {
  font-size: 24px;
  margin-bottom: 5px;
}
.offer-step p {
  margin: 0;
  font-size: 14px;
  color: #EA7F24;
  white-space: nowrap;
}
.offer .plus {
  color: #EA7F24;
  font-weight: bold;
  font-size: 20px;
}

/* 吹き出しの角（PC版：右側に出す） */
.offer-flow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px; /* 枠線の外側に配置 */
  transform: translateY(-50%);
  border-width: 14px 0 14px 18px; /* 右向きの三角 */
  border-style: solid;
  border-color: transparent transparent transparent #EA7F24; /* 枠線と同じオレンジ */
  z-index: 1;
}

.offer-flow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  border-width: 12px 0 12px 15px;
  border-style: solid;
  border-color: transparent transparent transparent #fff; /* 中を白塗り */
  z-index: 2;
}

/* ③ 右側：メッセージ（吹き出しの先） */
.offer-message {
  flex: 0 0 220px;
}
.offer-message p {
  margin: 0;
  font-size: 25px;
  font-weight: bold;
  line-height: 1.4;
  color: #333;
}

/* ===== ベネフィット ===== */
.benefits {
  padding: 40px 0;
  text-align: center;
}

/* ① 星アイコンを見出しの両脇に配置 */
.benefits-title {
  position: relative; /* 星を配置する基準 */
  display: inline-block; /* 文字の幅に合わせる */
  margin: 0 auto 40px;
  text-align: center;
  line-height: 1.4;
  font-size: 28px;
  font-weight: bold;
  padding: 0 60px; /* 星が入るための左右スペースを確保 */
}

.benefits h2 span {
  color: #EA7F24;
}

/*benefit・howtoともに共通*/
.star-icon {
  position: absolute;
  top: 50%; /* 上から50%の位置 */
  transform: translateY(-50%); /* 自分の高さの半分だけ戻して「ド真ん中」に */
  width: 40px; /* アイコンのサイズ */
  height: auto;
}

/* 左の星 */
.star-l {
  left: 0;
}

/* 右の星 */
.star-r {
  right: 0;
}

/* カード全体のコンテナ */
.benefit-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* ② カード間の縦線を入れる */
.benefit-card {
  flex: 1;
  background: #fff;
  padding: 20px;
  position: relative; /* 線の基準点 */
}

/* 最後のカード以外に右側の線を追加 */
.benefit-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20%; /* 上下に少し余白を作る */
  right: 0;
  width: 1px;
  height: 60%;
  background-color: #eee; /* 薄いグレーの線 */
}

.benefit-icon {
  display: block;
  width: 50px;
  margin: 0 auto 15px;
}

.benefit-card h3 {
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

/* ===== 口コミ ===== */
.voices {
  background: #fff8f2;
  padding: 40px 0;
  overflow: hidden; /* はみ出し防止 */
}

.voices h2{
  margin-top: 0;
  text-align: center;

}

.voices .note {
  margin: 0;
}

.voice-swiper {
  width: 100%;
  padding: 20px 0 60px !important; /* 下にページネーションの余白 */
}

/* カード本体：横長のデザインに */
.voice-card {
  background: #fff;
  border-radius: 30px;
  padding: 30px;
  display: flex !important; /* 横並び */
  align-items: center;
  gap: 20px;
  max-width: 700px;
  height: auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* 左側：アイコンと名前のセット */
.voice-icon-part {
  flex: 0 0 100px;
  text-align: center;
}

.voice-icon-part img {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
}

.voice-name {
  display: block;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

/* 右側：文章 */
.voice-text-part {
  flex: 1;
  text-align: left;
}

.voice-text-part p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.voice-text-part strong {
  display: block;
  font-size: 18px;
  color: #000;
  margin-bottom: 8px;
}

/* ===== 使い方 (howto) 新デザイン決定版 ===== */
.howto {
  padding: 40px 0;
  background-color: #fff;
}

.howto-header {
  text-align: center;
  margin-bottom: 2px;
}

.howto-title {
  position: relative;    /* 星を配置する基準 */
  display: inline-block; /* 文字の幅に合わせる */
  margin: 0 auto 20px;   /* 下のリード文との間隔 */
  text-align: center;
  line-height: 1.4;
  font-size: 28px;
  font-weight: bold;
  padding: 0 60px;       /* 星が入るための左右スペース */
  width: auto;           /* 幅を自動調整 */
}

.howto-lead {
  margin-bottom: 10px;
  color: #666;
  font-size: 15px;
}

/* --- 届くもの・準備するもの --- */
.kit-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.kit-box-main { flex: 2; }
.kit-box-sub { flex: 1; }

.kit-box {
  background: #fff8f2;
  border: 2px dashed #EA7F24;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
}

.kit-box h3{
  font-size: 20px;
  margin-top: 15px;
}

.kit-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 5px;
}

.kit-icon img {
  width: auto;
  height: 200px;
  object-fit: contain;
}

.kit-item p {
  font-weight: bold;
  font-size: 20px;
  margin: 5px 0 0;
}
.kit-item span {
  display: block;
  font-size: 16px;
  color: #666;
}

.prep-list-single {
  list-style: none;
  padding: 0;
  display: inline-block;
  text-align: left;
}
.prep-list-single li {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 5px;
}

/* --- 使い方3STEPカード --- */
.howto-step-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 60px;
}

.step-top-row {
  display: block; /* PCでは横に並べず、標準の縦並びにする */
  text-align: center;
}

.simple-step-card {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}

.step-top-row {
  display: block; 
  text-align: center;
}

.step-label {
  display: inline-block;
  background: #dc7d29;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 50px;
  margin-bottom: 15px; /* ラベルの下に余白 */
}

.simple-step-card h3 {
  font-size: 25px;
  margin-bottom: 20px;
  color: #333;
}

.step-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: #f9f9f9;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.step-image img {
  width: 100%;
  max-width: 180px;
  max-height: 100%;
  object-fit: contain;
}

.step-desc {
  font-size: 15px;
  font-weight: bold;
  color: #444;
  margin-bottom: 10px;
}

/* カード内のアコーディオン */
.step-details {
  border-top: 1px solid #eee;
  margin-top: 10px;
}
.step-details summary {
  padding: 10px 0;
  font-size: 13px;
  color: #EA7F24;
  cursor: pointer;
  font-weight: bold;
  list-style: none;
}
.step-details summary::-webkit-details-marker { display: none; }

.step-details .details-content {
  padding: 10px 0;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
  text-align: left;
}

/* カード間の矢印 */
.step-arrow-divider {
  width: 20px;
  height: 20px;
  border-top: 3px solid #FFE0B2;
  border-right: 3px solid #FFE0B2;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --- 下部メッセージボックス --- */
.simple-message-box {
  max-width: 1000px;
  height: 180px;
  margin: 5px auto;
  background-color: #FFF8F0;
  border-radius: 24px;
  padding: 20px 40px 0px 40px;
  position: relative; /* イラストの右下固定の基準 */
}

/* タイトル行：時計と文字を中央で揃える */
.message-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  color: #EA7F24;
  margin: 0 0 10px;
  line-height: 1.3;
}

.clock-icon-fallback img {
  width: 35px; /* アイコンサイズ調整 */
  height: auto;
}

/* 下段エリア */
.message-bottom-group {
  display: flex;
  justify-content: space-between;
}

.message-bottom-group p {
  font-size: 16px;
  color: #666;
  margin: 0 50px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ② イラストを一番右下端に */
.message-illust {
  width: 160px;
  height: auto;
  margin-top: -40px; /* 少し上に浮かせて箱に収める調整 */
}

/* ===== 特徴 (features) 最新版 ===== */
.features {
  background: #fff;
  padding: 40px 0;
  padding-top: 0;
  border-bottom: 1px solid #eee;
}

.features h2 {
  text-align: center;
  font-size: 26px;
  margin-top: 0 !important;
  margin-bottom: 30px;
}

.feature-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-card {
  flex: 1;
  position: relative;
  padding: 0 20px;
}

/* 縦線（最後のカード以外に付ける） */
.feature-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  background-color: #ddd;
}

.feature-item-inner {
  display: flex; /* アイコンとテキストを横並び */
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.feature-icon {
  flex: 0 0 60px; /* アイコンの幅を固定 */
}

.feature-icon img {
  width: 100%;
  height: auto;
}

.feature-text {
  text-align: left;
}

.feature-text h3 {
  font-size: 18px;
  color: #4CAF50; /* 緑色などのテーマ色（適宜変更してください） */
  margin: 0 0 5px 0;
}

/* クラスに合わせて色を変える場合 */
.feature-card:nth-child(1) h3 { color: #4CAF50; }
.feature-card:nth-child(2) h3 { color: #2196F3; }
.feature-card:nth-child(3) h3 { color: #EA7F24; }

.feature-text p {
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
  color: #666;
}

/* ===== オススメのお客様（recommend） ===== */
.recommend {
  padding: 40px 0;
  background: #fff;
}

.recommend-card {
  max-width: 95%;
  margin: 0 auto;
  padding: 40px 30px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.4)),
    url("../img/img_202605LP/recommend-learning-situation.png") center / cover no-repeat;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.recommend-card h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 28px;
}

.recommend-card ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 620px;
}

.recommend-card li {
  background: rgba(255,255,255,0.9);
  margin-bottom: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.recommend-card li::before {
  content: "✓";
  color: #EA7F24;
  font-size: 22px;
  margin-right: 12px;
  font-weight: bold;
}

/* ===== 理念 (philosophy) ===== */
.philosophy {
  padding: 40px 0;
  background-color: #fdfaf7;
}

.philosophy-header {
  text-align: center;
}

.philosophy h2{
  margin-top: 0;
}

.section-label {
  display: inline-block;
  color: #EA7F24;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

/* 2. 教材への想い（幅広カード） */
.philosophy-box {
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  background: #fff;
  padding: 30px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column; /* 全体を縦並びに */
  align-items: center;
}

.philosophy-top-row {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-bottom: 30px;
  text-align: left;
}

.developer-photo {
  flex: 0 0 180px;
  text-align: center;
}

.philosophy-header p{
  margin: 10px 2rem;
}

.developer-photo img {
  width: 180px;
  height: 180px;
  border-radius: 50%; /* 画像通りの丸型 */
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-top: 10px;
  margin-bottom: 10px;
}

.developer-photo p {
  font-size: 13px;
  color: #888;
  font-weight: bold;
  margin: 0;
}

.philosophy-text {
  flex: 1;
}

.trust-badge {
  display: inline-block;
  background: #fff3e0;
  color: #EA7F24;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 25px;
  border-radius: 50px;
  margin-bottom: 15px;
}

.philosophy-text h3 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 20px;
  color: #333;
}

.philosophy-lead {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* アコーディオンの調整 */
.philosophy-more {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.philosophy-more summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 40px;
  border: 2px solid #EA7F24;
  color: #EA7F24;
  border-radius: 50px;
  font-weight: bold;
  display: inline-block; /* 中央寄せ用 */
  transition: 0.3s;
  background: #fff;
}

.philosophy-more summary::-webkit-details-marker { display: none; }

.philosophy-more summary:hover {
  background: #EA7F24;
  color: #fff;
}

.philosophy-more-body {
  margin-top: 30px;
  padding: 40px;
  background: #f8f8f8; /* 画像通りの薄いグレー */
  border-radius: 15px;
  font-size: 15px;
  line-height: 2;
  color: #444;
  text-align: left;
}

.philosophy-more-body p {
  margin-bottom: 20px;
}

.philosophy-photo{
  text-align: center;
}

.philosophy-photo img{
width: 500px;
}
/* ===== 料金 ===== */
.price {
  padding: 40px 0;
  background: #fffaf5;
}

.price-card-new {
  max-width: 95%;
  margin: 0 auto;
  background: #fff;
  border: 2px solid #f1e5da;
  border-radius: 28px;
  padding: 34px 40px;
  box-shadow: 0 10px 28px rgba(234, 127, 36, 0.12);
}

.price-main-area {
  display: grid;
  grid-template-columns:auto 1.6fr 1fr;
  gap: 25px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
}

.price-badge {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #666;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-top:-2rem;
}

.price-summary {
  text-align: left;
  justify-self:center;
  transform: translateX(12px);
}

.price-summary p{
  text-align: left;
}

.price-lead {
  font-size: 18px;
  font-weight: bold;
  margin: 0; 
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: bold;
}

.price-main .unit {
  font-size: 22px;
}

.price-main .amount {
  font-size: 58px;
  line-height: 1;
  color: #EA7F24;
}

.price-main .credit {
  font-size: 24px;
}

.price-main .tax {
  font-size: 16px;
}

.price-small-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.price-points-new {
  list-style: none;
  padding: 0;
  margin: 0;
}

.price-points-new li {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.price-points-new li::before {
  content: "✓";
  color: #EA7F24;
  font-size: 22px;
  margin-right: 10px;
}

.trial-contents {
  margin-top: 26px;
  padding: 24px;
  background: #fff8f0;
  border-radius: 20px;
}

.trial-contents h3 {
  text-align: center;
  color: #EA7F24;
  font-size: 22px;
  margin: 0 0 18px;
}

.trial-contents ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.trial-contents li {
  background: #fff;
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.trial-contents li::before {
  content: "✓";
  display: block;
  color: #EA7F24;
  font-size: 20px;
  margin-bottom: 4px;
}

.price-cta-new {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}

.price-cta-new .btn {
  min-width: 260px;
  padding: 14px 24px;
  font-size: 17px;
}

/* ===== 対応 (details) ===== */
.details {
  padding: 40px 0;
}

.details-header h2 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

/* 縦積みレイアウト */
.details-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 1. 対応について（横長のスペックバー） */
.detail-box {
  display: column;
  align-items: center;
  width: 95%;
  max-width: var(--content-width);
  margin:0 auto;
  background: #fff;
  padding: 25px 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
  gap: 10px;
}

.detail-box h3 {
  font-size: 16px;
  color: #EA7F24;
  margin-bottom: 20px;
}

.detail-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 15px;
}

.detail-list li {
  flex: 1;
  width: auto;
  min-width: 150px;
  font-size: 14px;
  border-left: 1px solid #eee;
  padding-left: 15px;
}

.detail-list li:first-child {
  border-left: none;
  padding-left: 0;
}

.detail-list span {
  display: block;
  font-weight: bold;
  color: #EA7F24;
  font-size: 11px;
  background: #fff3e0;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 5px;
}

.detail-list p{
text-align: center;
}

/* ===== FAQ ===== */
.faq {
  padding: 40px 0;
}

.faq details {
  background: #f9f9f9;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}

/* ===== 最後のCTAセクション ===== */
.final-cta {
  padding: 40px 0;
  background-color: #fef5de; /* 優しいベージュ背景 */
  overflow: hidden; /* 画像のはみ出し防止 */
}

.final-cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 100%;
  margin: 0 auto;
}

/* 画像とタイトルのグループ（PCではそのまま横並びの一部） */
.final-cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

.final-cta-image {
  flex-shrink: 0;
}

.final-cta-image img {
  width: 300px; /* PCでの画像サイズ調整 */
  height: auto;
}

.final-cta-title {
  font-size: 2rem;
  line-height: 1.5;
  color: #333;
  font-weight: bold;
  text-align: left;
  margin: 0;
}

/* ボタンエリア（PCでは右側に並ぶ） */
.final-cta-buttons {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  gap: 25px;
  flex-shrink: 0;
}

.final-cta-buttons .btn {
  padding: 20px 30px;
  font-size: 1.2rem;
  min-width: 280px;
  text-align: center;
}

/* ===== フローティングCTA ===== */
/* 1. オレンジボタン（購入）の調整 */
.floating-cta {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1000px; /* PCでの圧を抑えるバイ */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9990; /* 博士より後ろバイ */
  pointer-events: none;
}

.floating-cta .btn-contents-view {
  pointer-events: auto;
  /* スマホとかぶらないよう、右側にマージンを作るバイ */
  margin-right: 90px; 
  flex: 0 1 400px;
  border: 3px solid #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  text-align: center;
  padding: 15px;
  font-size: 18px;
}

.floating-cta a {
  flex: 1;
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

/* ===== アイコン ===== */
.dstudy-social-section {
  padding: 32px 20px 8px;
  background: #f9f7f3;
  text-align: center;
}

.dstudy-social-inner {
  max-width: 760px;
  margin: 0 auto;
}

.dstudy-social-title {
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #6c5f42;
}

.dstudy-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.dstudy-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  line-height: 1;
  text-decoration: none;
}

.dstudy-social-link img {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

.dstudy-social-link:hover,
.dstudy-social-link:focus-visible {
  opacity: 0.78;
}

/* ===== フッター ===== */
.lp-footer {
  flex-direction: row;
  padding: 24px 20px 20px;
  background-color: #333;
  color: #fff;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;      /* 横並び */
    justify-content: space-between; /* 両端に振分け */
    align-items: flex-start;  /* 上揃え */
}

/* 左側：会社情報 */
.footer-left {
    flex: 1;
}

.footer-left p {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.6;
}

/* 右側：リンク集（PCでは右寄せ） */
.footer-right {
    display: flex;
    flex-direction: column;   /* リンクを縦に積む */
    gap: 10px;
    text-align: right;        /* 文字を右寄せ */
}

.footer-right a {
    text-decoration: none;
    font-size: 14px;
    color: #fff;
}

.footer-right a:hover {
    text-decoration: underline;
}

.footer-copy {
    text-align: center;
    margin-top: 40px;
    font-size: 12px;
}

/* ===== トップに戻るボタン ===== */
/* --- ページトップボタン（背景なし・文字のみ版） --- */
.page-top {
    position: fixed;
    right: 20px; 
    bottom: 250px; /* 博士の上に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    width: 45px;
    background-color: transparent; /* 背景を透明にするバイ！ */
    color: #685647; /* 文字色はどこスタカラーで見やすくするバイ */
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
    z-index: 9997;
}

/* 文字を縦に並べるための設定 */
.page-top span {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1;
}

/* 文字の上に「▲」を足すと、よりボタンらしくなるバイ（いらなければ消してOK！） */
.page-top::before {
    content: "▲";
    font-size: 12px;
    margin-bottom: 5px;
}

.page-top.is-show {
    opacity: 0.7; /* 少し透かしておくと、より馴染む */
    visibility: visible;
}

.page-top:hover {
    opacity: 1; /* カーソルを当てた時だけクッキリさせる */
}

/* 非表示用のクラス（フッターエリアに来た時に強制で消す用） */
.is-hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ===== チャットボット ===== */
/* 待機中の博士全体 */
.chat-waiting-wrapper {
  position: fixed;
  bottom: 20px;
  right: 25px;
  cursor: pointer;
  z-index: 9999; /* 一番手前！ */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
}

/* 博士の丸アイコン */
.doctor-icon-mini {
  width: 140px;
  height: 140px;
  background:#4CAF50;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: float-hakase 3s ease-in-out infinite; /* ぷかぷかさせる */
}

/* 吹き出し */
.chat-bubble {
  background: #fff;
  border: 2px solid #4CAF50;
  padding: 8px 20px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 20px;
  position: relative;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 吹き出しのしっぽ */
.chat-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 25px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}
.chat-bubble::before {
  content: "";
  position: absolute;
  bottom: -13px;
  right: 24px;
  border-width: 11px 11px 0;
  border-style: solid;
  border-color: #4CAF50 transparent transparent;
}

/* チャットボットの配置とサイズ（角丸＆浮遊感デザイン） */
.chat-container {
  position: fixed;
  bottom: -100%; /* 最初は隠す */
  right: 20px;
  width: 90%;
  max-width: 380px;
  height: 65vh; 
  min-height: 420px;
  max-height: 550px;
  background: #fff;
  border: 3px solid #EA7F24;
  border-radius: 20px; 
  overflow: hidden;
  z-index: 10000;
  transition: all 0.5s ease-out;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 表示された時の位置 */
.chat-container.active {
  bottom: 20px; /* 下の隙間 */
  right: 20px;  /* 右の隙間 */
}

/* ヘッダーの角も親に合わせる */
.chat-header {
  background: #EA7F24;
  color: #fff;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-radiusは親のoverflow:hiddenが効くから書かなくてOK */
}
.chat-doctor-thumb { width: 45px; height: 45px; border-radius: 50%; background: #fff; object-fit: cover; }

/* ログ部分 */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: #fdfaf7;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* 入力エリア */
.chat-input-area {
  padding: 15px;
  border-top: 1px solid #eee;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.msg { padding: 12px 16px; border-radius: 15px; line-height: 1.5; font-size: 15px; max-width: 85%; position: relative; }
.doctor-msg { background: #fff; border: 1px solid #eee; align-self: flex-start; }
.user-msg { background: #EA7F24; color: #fff; align-self: flex-end; border-radius: 15px 15px 0 15px; }

/* 入力エリア：ボタンが並ぶ場所 */
.chat-input-area {
  padding: 15px;
  border-top: 1px solid #eee;
  background: #fff;
  display: flex;
  flex-wrap: wrap; /* ボタンが多ければ折り返す */
  gap: 8px;
  justify-content: center;
}

.chat-btn { background: #fff; border: 2px solid #EA7F24; color: #EA7F24; padding: 10px; border-radius: 50px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.chat-btn:hover { background: #EA7F24; color: #fff; }
.chat-text-input { border: 2px solid #eee; padding: 12px; border-radius: 10px; outline: none; }

/*最新記事*/
.dstudy-blog-widget {
  background: #F9F7F3;
  padding: 2px 20px 10px;
}

.dstudy-blog-widget__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dstudy-blog-widget__title {
  text-align: center;
  color: #1F3A8A;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.dstudy-blog-widget__lead {
  text-align: center;
  color: #333;
  line-height: 1.8;
  margin-bottom: 32px;
}

.dstudy-blog-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dstudy-blog-card {
  display: block;
  background: #fff;
  color: #333;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dstudy-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.dstudy-blog-card__image-wrap {
  width: 100%;
  aspect-ratio: 1200 / 630;
  background: #eee;
  overflow: hidden;
}

.dstudy-blog-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dstudy-blog-card__noimage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-weight: 700;
}

.dstudy-blog-card__body {
  padding: 16px 18px 20px;
}

.dstudy-blog-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

.dstudy-blog-widget__button-wrap {
  text-align: center;
  margin-top: 32px;
}

.dstudy-blog-widget__button {
  display: inline-block;
  padding: 13px 32px;
  background: #f19b12;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

.dstudy-blog-widget__button:hover {
  color: #fff;
  opacity: 0.9;
}

.dstudy-blog-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #555;
}

/* ===== PC対応 (Responsive) ===== */
@media (min-width: 901px) {
  .section-inner {
    max-width: 1000px;
  }

  .fv,
  .fv-container,
  .fv-content-inner {
    min-height: 500px;
  }

  .section-title,
  .benefits-title,
  .howto-title {
    font-size: 26px;
  }
}

@media(min-width:768.1px) {
  .nav-cta-sp { display: none;}
  .menu-btn { display: none; }
}

/* ===== タブレット対応 (Responsive) ===== */
@media (max-width: 900px) { /* 853pxをカバーするために900px以下で指定 */

  /*タブレット：料金*/
.header-logo img{
  max-width: 15%;
  height: auto;
}

  .price-horizontal-card {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;    /* 中央寄せ */
    padding: 30px 20px;
    gap: 15px;
  }

.price-label {
  width: 200px;
  height: 50px;
  color: #fff;
  border-radius:8px;
  display: flex;
  font-weight: bold;
  font-size: 18px;
}

  .price-summary, .price-points, .price-cta {
    width: 100%;
    text-align: center;
    border: none;           /* PC版の仕切り線を消す */
    padding: 0;
  }

.price-lead, .price-summary p{
  text-align: center !important;
}

.price-main{
  justify-content: center !important;
}

  .price-points li {
    justify-content: center; /* チェックマークごと中央へ */
  }

/*対応：タブレット*/
.detail-box {
margin: 0 auto !important;
}

.detail-box h3 {
  text-align: center;
}

.detail-list {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* ★親の ul ごと中央に寄せる */
    gap: 20px;
    padding: 0;
  }
  
.detail-list span {
    display: block;         /* inline-block から変更 */
    margin: 0 auto 8px;     /* ★左右 auto で中央配置を確定させる */
    width: fit-content;     /* ★文字の幅にギュッと縮めるのがポイント */
    background: #fff3e0;
    color: #EA7F24;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
  }

.detail-list li {
    display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: center;    /* ★これで span も下の文字も中央に揃う */
    width: 100%;
    border-left: none;
    border-bottom: 1px solid #eee;
    padding: 0 0 15px 0;    /* 下線との間に少し隙間を */
    text-align: center;
  }
  
.detail-list li:last-child { border-bottom: none; }

/*最終CTA：タブレット*/
.final-cta-container {
    flex-direction: column; /* 全体を縦に積む */
    gap: 30px;
  }

  /* 上段：写真とコピー */
  .final-cta-main {
    flex-direction: row;    /* 写真と文字は横並びを維持 */
    justify-content: center;
    text-align: left;
    width: 100%;
  }

  .final-cta-image img {
    width: 150px;           /* サイズを適度に調整 */
  }

  /* 下段：ボタン2つ横並び */
  .final-cta-buttons {
    flex-direction: row;    /* 横並び */
    justify-content: center;
    width: 100%;
    gap: 15px;
  }

  .final-cta-buttons .btn {
    flex: 1;                /* 幅を揃えて並べる */
    max-width: 400px;
    padding: 15px 10px;
    font-size: 18px;        /* 2つ並べるために少し文字を小さく */
  }
}

/* ===== スマホ対応 (Responsive) ===== */
@media (max-width: 768px) {

.sp-only {display: inline;}
.pc-only { display: none; }
.header-nav { display: none; } /* ハンバーガー用に隠す */
.section-inner{ padding: 5px 10px;} 

  .fv-inner {
    flex-direction: column;
  }

.fv-campaign {
    width: calc(100% - 32px);
    margin-bottom: 5px;
  }

  .worries {
    padding: 32px 0;
  }

  .worries-inner {
    padding-left: var(--sp-side-padding);
    padding-right: var(--sp-side-padding);
    flex-direction: column;
  }

  .result-cards,
  .benefit-cards,
  .voice-cards,
  .feature-cards {
    flex-direction: column;
  }

  .howto-grid {
    grid-template-columns: 1fr;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .final-cta-inner {
    flex-direction: column;
  }
  
.fv-container {
    min-height: 550px; /* ここを少し高くして余裕を持たせる */
    display: flex;
    flex-direction: column;
  }

.fv-content-inner {
    padding: 30px 20px;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between !important; /* 強制的に上下に振り分け */
    align-items: flex-start;
    z-index: 20;
  }

.fv-copy {
    width: 100%;
    margin-bottom: auto; /* これで下の要素を一番下まで押し出す */
  }

.fv-copy h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 0;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
  }

.fv-lead {
    width: 100%;
    font-size: 18px;
    margin-top: 350px; /* 女の子の顔を避けるための強制的な隙間 */
  }

  .fv-text {
    width: 100%;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .fv-buttons {
    width: 100%;
    flex-direction: column;
    margin-top:50px;
    gap: 8px;
  }

/* 背景画像を全体に広げる */
.fv-image-bg {
  width: 100%;
  height: 100%;
  opacity: 1;
  background-position: center center;
}

  /* スマホは縦グラデーション */
.fv-image-bg::before {
    /* 文字が重なる上下だけを少し白くして、顔の部分は透明にする */
    background: linear-gradient(to bottom, 
      rgba(255,255,255,0.85) 15%, 
      rgba(255,255,255,0) 25%, 
      rgba(255,255,255,0) 50%, 
      rgba(255,255,255,1) 80%

      );
  }

.fv-badge {
    width: 100px; /* 80pxから拡大 */
    height: 100px;
    font-size: 12px;
    top: 440px;
    right: 15px;
    border-width: 3px;
    background: rgba(255, 255, 255, 0.9);
  }

  /* ハンバーガーメニューボタン */
  .menu-btn {
    display: block;
    width: 30px; height: 24px;
    background: none; border: none; position: relative; z-index: 1100;
  }
  .menu-btn span {
    display: block; position: absolute; width: 100%; height: 2px;
    background: #333; transition: 0.3s;
  }
  .menu-btn span:nth-child(1) { top: 0; }
  .menu-btn span:nth-child(2) { top: 11px; }
  .menu-btn span:nth-child(3) { bottom: 0; }
  .menu-btn.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .menu-btn.active span:nth-child(2) { opacity: 0; }
  .menu-btn.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

  /* スマホメニュー本体 */
  .header-nav.active {
    display: flex; flex-direction: column; position: fixed;
    top: 0; right: 0; width: 80%; height: 100vh;
    background: #fff; padding: 100px 30px; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  }
  .nav-cta-sp { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin-top: 30px; }

.section-title {
    font-size: 22px;
    gap: 8px;
  }
  .title-icon {
    width: 30px;
  }

/*　 共感エリア　*/
.worries-inner {
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    gap: 0;
  }

  .worries-title-area {
    flex: none;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .worries-title {
    font-size: 26px;
  }
  
  .worries-title span {
    display: inline; /* スマホでは1行で表示 */
    font-size: 26px;
  }

  /* コンテンツエリア：縦並びにして、中身を強制的に入れ替える */
.worries-content-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  /* 吹き出しを一番上に (order: 1) */
.worries-speech-bubble {
    order: -1 !important; 
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* 写真を下に (order: 2) */
  .worries-image-row {
    width: 80%;
    order: 2 !important;
    text-align: center;
  }

  .worry-photo {
    height: 150px; /* お好みの高さに調整 */
    width: auto;
    margin: 0 auto;
  }

  /* 【SP版】吹き出しの角を下向きに固定 */
  .worries-speech-bubble::after,
  .worries-speech-bubble::before {
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .worries-speech-bubble::after {
    bottom: -12px;
    border-width: 12px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
  }

  .worries-speech-bubble::before {
    bottom: -15px;
    border-width: 13px 11px 0 11px;
    border-color: #ddd transparent transparent transparent;
  }

  .worries-list li, .worries-message {
    font-size: 16px;
  }

  /* 問題（prpblem部分） */
  .problem {
    padding: 32px 0;
  }

  .problem-flow {
    gap: 8px; /* スマホでは間隔を詰める */
  }

.problem-item {
    width: 120px !important;
    height: auto !important;   /* 高さを固定せず、パディングで調整 */
    aspect-ratio: 1 / 1;      /* ★正円（1:1）にしたい場合はこれを入れる */
    padding: 20px 10px;       /* 上下の余白でふっくらと */
    border-radius: 50%;       /* これで角を丸く */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .problem-icon {
    width: 40px;
    height: 45px;
    top:1px;
  }

  .problem-icon img {
    width: 24px;
  }

  .problem-item p {
    font-size: 11px; /* 小さな円に合わせて文字も調整 */
    margin-top: 10px;
  }

  .plus {
    font-size: 16px;
  }

  .problem h2 {
    font-size: 22px;
  }

.text-underline{
  font-size: 20px;
}

  /*offer部分*/
.offer {
  padding: 32px 0;
  }

.offer-bottom-row {
    display: flex;
    flex-direction: column; /* スマホでは「吹き出し」と「テキスト」を縦に積む */
    align-items: center;    /* ど真ん中に寄せる */
    justify-content: center;
    gap: 30px;              /* 吹き出しと下のテキストの隙間 */
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

.offer-copy h2{
  font-size: 20px;
}

  /* ② 吹き出し本体（白枠の箱）のサイズ */
  .offer-flow {
    display: flex;
    flex-direction: row;    /* アイコン同士は「横」に並べる */
    justify-content: space-around;
    align-items: center;
    width: 95%;             /* 画面幅いっぱいに広げる */
    max-width: 400px;       /* 広がりすぎないように制限 */
    flex: none;             /* PCの設定をリセット */
    padding: 20px 10px;     /* 内側の余白を詰める */
    border-radius: 20px;
    background: #fff;
    border: 3px solid #EA7F24;
    position: relative;
  }

  /* ③ アイコン3つのサイズを揃える */
  .offer-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  .offer-icon {
    width: 45px;            /* アイコンを少し小さくして1列に収める */
    height: 45px;
    margin-bottom: 5px;
  }

  .offer-step p {
    font-size: 11px;
    white-space: nowrap;    /* 改行させない */
    color: #EA7F24;
  }

  .offer .plus {
    font-size: 14px;
    margin: 0 4px;
  }

  /* ④ 吹き出しの下のテキスト */
  .offer-message {
    flex: none;             /* 幅固定を解除 */
    width: 100%;
    text-align: center;     /* 文字を中央寄せに */
  }

  .offer-message p {
    font-size: 22px;        /* スマホで見やすい大きさに */
    line-height: 1.4;
  }

  /* ⑤ 吹き出しの角（PCの右向きを消して、下に作り直す） */
  .offer-flow::before,
  .offer-flow::after {
    right: auto;            /* PCの設定を消す */
    top: auto;
    border-width: 0;
  }

  .offer-flow::before {
    content: "";
    position: absolute;
    bottom: -15px;          /* 下側に配置 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 12px 0 12px;
    border-style: solid;
    border-color: #EA7F24 transparent transparent transparent;
    z-index: 1;
  }

  .offer-flow::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px 10px 0 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 2;
  }

/*成績実績*/
.results {
    padding: 34px 0 28px;
  }

  .results-title {
    font-size: 22px;
    line-height: 1.4;
  }

  .results-lead {
    font-size: 13px;
    padding: 0 12px;
  }

  .result-swiper {
    padding: 18px 0 48px !important;
  }

  .result-card {
    width: 82vw !important;
    max-width: 320px;
    min-height: 360px;
    padding: 22px 20px 16px;
  }

  .result-card .score strong {
    font-size: 60px;
  }

  .result-card .score span {
    font-size: 21px;
  }

  .score-change {
    font-size: 17px;
    margin: 16px auto;
  }

  .score-change span:last-child {
    font-size: 20px;
  }

  /*ベネフィット部分*/
.benefits {
  padding: 32px 0;
}

.benefits-title {
    font-size: 22px;
    padding: 0 45px; /* スマホでは星のスペースを少し狭める */
  }

.star-icon {
    width: 30px; /* スマホでは星を少し小さく */
  }

.benefit-cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;/* 縦並びを解除して横並びに戻す */
    border: none; /* ← ① 親要素の外枠を消す */
  }

  /* スマホでは縦線を消して、代わりに下に薄い横線を引くか、線自体を消す */
  .benefit-card:not(:last-child)::after {
    display: none;
  }
  
.benefit-card {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box;
    padding: 20px 10px;
    margin: 0;
    
    /* 一旦すべてのボーダーを消してから、必要な場所（十字）だけ付ける */
    border: none; 
  }

  /* ② 十字の「縦線」を引く（左側の列だけに右線を付ける） */
  .benefit-card:nth-child(odd) {
    border-right: 1px solid #eee;
  }

  /* ③ 十字の「横線」を引く（1段目の2つだけに下線を付ける） */
  .benefit-card:nth-child(1),
  .benefit-card:nth-child(2) {
    border-bottom: 1px solid #eee;
  }

  .benefit-card:last-child {
    border-bottom: none;
  }

  .benefit-icon {
    width: 40px;
    margin-bottom: 10px;
  }
  
  .benefit-card h3 {
    font-size: 14px;
    line-height: 1.3;
  }

  /* PC版で付けていた「右側の縦線」をリセット */
  .benefit-card:not(:last-child)::after {
    display: none;
  }

/*口コミパート*/
.voices {
  padding: 32px 0;
}

.voices .note {
  text-align: left;
}

.voice-card {
    max-width: 90%;
    padding: 20px;
    gap: 15px;
  }
  .voice-icon-part { flex: 0 0 70px; }
  .voice-icon-part img { width: 60px; height: 60px; }
  .voice-text-part strong { font-size: 16px; }
  .voice-text-part p { font-size: 13px; }

/*使い方パート*/
.kit-container { flex-direction: column; }

.kit-box-main, .kit-box-sub { 
  width: 95%; 
  margin: 0 auto
  ;
}

.kit-box{
  padding: 10px;
}

.kit-item p {
  font-size: 12px;
}

.kit-item span {
  display: block;
  font-size: 10px;
}

.kit-icon img{
  height: auto;
}

.plus-mini{
  margin: -10px
px;
}

.howto-title {
    font-size: 22px;
    padding: 0 45px;
    display: block; /* スマホでは中央寄せしやすくするためにブロック化 */
    width: fit-content;
  }

  .howto-step-area {
    flex-direction: column;
    gap: 14px;
  }

  .step-arrow-divider { transform: rotate(135deg); margin: 0 auto; }

  .step-top-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
  }

  .simple-step-card {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 18px 16px 14px;
    text-align: left;
    align-items: start;
  }

  .step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .step-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2px;
  }
  /* STEPラベルを左上に配置 */
  .step-label {
    margin: 0;
    font-size: 11px;
    padding: 4px 14px;
  }

/* スマホ独自のサイズ調整 */
  .step-image {
    width: 110px !important;
    height: 100px !important;
    margin: 0 !important;
    border-radius: 8px;
  }

    .step-image img {
    max-width: 100%;
    max-height:100%;
    object-fit: contain;
  }

.step-label {
    margin: 0 !important;
    flex-shrink: 0;
  }

/* タイトルを右側に */
  .step-right h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.2;
    text-align: left;
  }
  
  /* 説明文を右側に */
  .step-desc {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    font-weight: bold;
    text-align: left;
  }

/* 詳しく見る（アコーディオン）を全幅＆中央寄せ */
  .step-details {
    width: 100%;
    border-top: 1px solid #eee;
    margin-top: 10px;
  }

  .step-details summary {
    text-align: center; /* 「詳しく見る」の文字をカード中央に */
    padding: 10px 0;
  }

  /* カード間の矢印を小さく中央に */
  .step-arrow-divider {
    width: 15px;
    height: 15px;
    border-width: 2px;
    margin: 5px auto;
  }
  
/* ① 全体を縦積みの三段にする */
.simple-message-box {
    padding: 20px 20px;
    text-align: center;
    height: 250px;
    margin-bottom: 0px !important;
  }

/* スマホ：タイトルからアイコンを外して中央に積むならこれ */
  .message-title {
    flex-direction: column; 
    gap: 10px;
    font-size: 20px;
  }

/* 1段目：アイコン */
  .message-icon {
    margin: 0 auto;
  }
  .clock-icon-fallback img {
    width: 40px !important;
    margin-top: 0 !important; /* PC用の位置調整をリセット */
  }

/* 2段目：h4 見出し */
  .message-content h4 {
    font-size: 20px;
    margin: 0;
    width: 100%;
    text-align: center;
  }

/* 3段目：テキストとイラストの横並び */
  .message-bottom-group {
    display: flex;      /* スマホの時だけ横並びに！ */
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    width: 100%;
    margin-top: 5px;
  }

  .message-content p {
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
    margin:10px;
  }

  .message-illust {
    width: 100px !important; /* イラストを少し小さく */
    height: auto;
    flex-shrink:0;
    margin: 10px;
  }

/*特徴パート*/
.features {
  padding: 32px 0;
  }
  
.feature-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 0 20px;
  }

.feature-card {
    flex: none;
    width: 100%;
    max-width: 360px;       /* ★ここが重要！3つの項目が共通で持つ「最大幅」を指定*/
    margin: 0;              /* 余計なマージンを消す*/
    padding: 0;
  }
  
/* SPでは区切り線を完全に消す */
  .feature-card:not(:last-child)::after {
    display: none !important;
  }

.feature-item-inner {
    display: flex;
    flex-direction: row;      /* アイコンと文字を横並びにする */
    align-items: center;      /* アイコンと文字を垂直中央で揃える */
    justify-content: flex-start; /* 内部要素は左揃え */
    gap: 15px;                /* アイコンと文字の間の距離 */
    min-width: 240px;         /* 3つの項目の左端を揃えるためのガイドライン */
  }

  .feature-icon {
    flex: 0 0 60px; /* スマホではアイコンをさらに小さく */
  }

.feature-icon img {
    width: 100%;
    height: auto;
  }

.feature-text {
    text-align: left;         /* 文章は左揃え */
  }

  .feature-text h3 {
    font-size: 18px;          /* 文字サイズをアップ */
    margin: 0;
    white-space: nowrap;      /* 改行させずに1行で目立たせる */
  }

  /*詳細・理念*/
.philosophy { padding: 32px 0; }

.philosophy-box {
  width: 100%;
  padding: 30px 20px;
  display: flex;
  flex-direction: column; /* 全体を縦に積む */
  align-items: center;    /* 子要素を中央に寄せる */
}

  .philosophy-top-row {
    display: flex;
    flex-direction: column;
    align-items: center; /* 縦の軸を中央に揃える */
    width: 100%;
    gap: 20px; /* 要素ごとの隙間 */
  }

  /* ① バッジ：中央ぞろえ */
  .trust-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;        /* 中央寄せ */
    padding: 10px 35px;
    text-orientation: mixed;
    border-radius: 50px;
    font-size: 13px;
    text-align: center;
  }

  /* テキストエリア：ここも縦並びにする */
  .philosophy-text {
    width: 100%;
    padding-left: 0;       /* PCの余白をリセット */
    text-align: left;      /* 文字自体は左揃え */
  }

  /* ② 見出し：左揃え */
  .philosophy-text h3 {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;      /* 左揃え */
  }

  /* ③ リード文：見出しの下に左揃え */
  .philosophy-lead {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 0;
    width: 100%;
    text-align: left;      /* 左揃え */
  }

  /* ④ 開発者写真：中央ぞろえ */
  .developer-photo {
    width: 80%;
    margin:0;
    text-align: center;    /* 中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .developer-photo img {
    width: 150px;          /* スマホで見やすいサイズ */
    height: 150px;
    margin-bottom: 10px;
  }

  .developer-name{
    font-size: 12px;
    color: #888;
  }

  /* 想いのアコーディオンボタン（中央に戻す） */
  .philosophy-more {
    width: 100%;
    text-align: center;
  }

  .philosophy-more-body {
  margin-top: 20px !important;
  padding:1px 14px !important;
  line-height: 1.5;
}

.philosophy-more-body p {
  margin-bottom: 18px;
}

/*対応*/
.details {
  padding: 32px 0;
}

.details-header p{
text-align: left;
}

/*料金*/
.price {
  padding: 32px 0;
}

.price-card-new {
    width: calc(100% - 16px);
    padding: 26px 18px;
  }

.price-badge {
  margin-top: 0px;
  margin-bottom: 1px;
}

  .price-main-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .price-summary {
    text-align: center;
  }

  .price-main {
    justify-content: center;
  }

  .price-main .amount {
    font-size: 52px;
  }

  .price-points-new li {
    justify-content: flex-start;
  }

  .trial-contents ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .trial-contents li {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
  }

  .trial-contents li::before {
    display: inline;
    margin-bottom: 0;
  }

  .price-cta-new {
    flex-direction: column;
  }

  .price-cta-new .btn {
    width: 100%;
    min-width: 0;
  }

/*FAQ*/
.faq {
  padding: 32px 0;
}

/*最後のCTA*/
.final-cta-container {
    display: flex;
    flex-direction: column !important; /* 縦並び */
    align-items: center;
    gap: 20px;
  }

.final-cta-main {
flex-direction: column;
}

/* ① タイトルを一番上にする */
  .final-cta-title {
    order: 1;
    text-align: center;
    font-size: 20px;
    margin-bottom: 5px;
  }
  
/* ② 写真を真ん中にする */
.final-cta-image {
    order: 2;
    width: 300px;
  }

  .final-cta-image img {
    width: 300px;
  }

/* ③ ボタンを一番下にする */
  .final-cta-buttons {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
  
.final-cta-buttons .btn {
    width: 100%;
  }

/*フッター*/
.footer-inner {
        flex-direction: column; /* 会社情報とリンク集を縦に並べる */
        gap: 20px;
    }

    .footer-right {
        display: flex;
        flex-direction: row;    /* ★横に並べる */
        flex-wrap: wrap;        /* ★入り切らない場合は次の行へ */
        justify-content: flex-start; /* 左寄せ */
        gap: 15px 20px;         /* ★縦の隙間15px、横の隙間20px */
        text-align: left;
    }
    
    .footer-right a {
        display: inline-block;
        font-size: 13px;        /* スマホで見やすいように少し小さめに */
        white-space: nowrap;    /* ★リンク内の文字が途中で折れないようにする */
    }

/*チャットボット*/
@keyframes float-hakase {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* チャットが開いている時は、待機アイコンを消す */
.chat-active #chat-waiting-icon {
  display: none;
}

.doctor-icon-mini {
        width: 60px;  /* スマホは邪魔にならないサイズバイ */
        height: 60px;
    }
    
    .chat-bubble {
        font-size: 11px;
        padding: 4px 8px;
    }

.chat-waiting-wrapper {
        right: 15px;
        bottom: 15px;
        right: 0;
    }

.chat-container {
    right: 10px;
    width: calc(100% - 20px);
    height: 60vh;
  }
  .chat-container.active {
    bottom: 15px; 
  }

.final-link-btn {
  display: block;
  background: #4CAF50;
  color: #fff !important;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}

/*フローティングCTA*/
.floating-cta {
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
    justify-content: flex-start; /* 左に寄せるバイ */
    bottom: 20px;
  }

  .floating-cta .btn-contents-view {
    margin-right: 85px; /* ★博士の横幅分を強制的に空けるバイ！ */
    flex: 1;
    font-size: 18px;
    padding: 12px;
  }

/*TOPへ戻るボタン*/
.page-top {
        right: 2px;
        bottom: 130px; /* スマホの博士サイズに合わせる */
        width: 35px;
        height: 80px;
        font-size: 10px;
    }

/*SNSアイコン*/
  .dstudy-social-section {
    padding: 30px 16px 6px;
  }

  .dstudy-social-links {
    gap: 20px;
  }

  .dstudy-social-link {
    padding: 10px;
  }

  .dstudy-social-link img {
    height: 32px;
  }	

/*最新記事：スマホ*/
  .dstudy-blog-widget {
    padding: 3px 40px 5px;
  }

  .dstudy-blog-widget__title {
    font-size: 1.6rem;
  }

  .dstudy-blog-card-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}