/* style.css（デザインの部屋） */
.blog-content {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333333;
  letter-spacing: 0.05em;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.blog-content p {
  margin-bottom: 2rem;
}

/* 大見出し（H2）：おしゃれなボックス塗りつぶしデザイン */
.blog-content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;            /* 文字の色を白にして目立たせる */
  padding: 1rem 1.5rem;      /* ボックスの中の上下左右の余白 */
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;        /* 角を少しだけ丸くして上品に */
  
  /* さわやかな青〜水色のグラデーション（お好みの色に変えられます） */
  background: linear-gradient(135deg, #1C99C7 0%, #03D2C0 100%);
  
  /* ボックスの後ろに薄い影をつけて、少し浮き出た立体感を作る */
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
}
.blog-content h3 {
  font-size: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
  font-weight: 700;
  border-bottom: 2px solid #e0e0e0;
}

.blog-content ul {
  background: #f8f9fa;
  padding: 1.5rem 1.5rem 1.5rem 2.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.blog-content li {
  margin-bottom: 0.8rem;
}

.blog-content strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #fff3b3 60%);
  padding: 0 0.2em;
}

.highlight-pink {
  font-weight: 700;
  background: linear-gradient(transparent 50%, #ffdee9 50%);
  padding: 0 0.2em;
}

.blog-note {
  background-color: #FFF0F4;
  border-left: 4px solid #FF5589;
  padding: 1.25rem;
  margin-bottom: 2rem;
  border-radius: 0 8px 8px 0;
}

/* ==========================================================================
   追加パーツ：ここから下をCSSの末尾に貼り付けてください
   ========================================================================== */

/* --- 1. メリット・デメリット（良い例・悪い例）のボックス --- */
.box-good, .box-bad {
  padding: 1.25rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  border: 1px solid;
}
/* 良い例（チェックマーク等用）：薄いグリーン */
.box-good {
  background-color: #f3faf7;
  border-color: #c3e6cb;
  color: #155724;
}
/* 悪い例（NG発声法など用）：薄いグレーピンク */
.box-bad {
  background-color: #fff5f5;
  border-color: #f5c6cb;
  color: #721c24;
}

/* --- 2. スマホ対応！料金表・スケジュール表（テーブル） --- */
.table-responsive {
  width: 100%;
  overflow-x: auto; /* スマホではみ出た時に横スクロールさせる */
  margin-bottom: 2rem;
  -webkit-overflow-scrolling: touch;
}
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}
.blog-content th {
  background-color: #1C99C7; /* H2に合わせたメインカラー */
  color: #ffffff;
  padding: 12px;
  font-weight: 700;
  border: 1px solid #1C99C7;
}
.blog-content td {
  padding: 12px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
}
/* しましま模様にして表を読みやすくする */
.blog-content tr:nth-child(even) td {
  background-color: #f8f9fa;
}

/* --- 3. 思わず押したくなる立体ボタン --- */
.btn-link-container {
  text-align: center; /* ボタンを中央に寄せる */
  margin: 2.5rem 0;
}
.btn-link {
  display: inline-block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #ffffff !important; /* リンクの青文字を強制上書き */
  text-decoration: none;     /* 下線を消す */
  padding: 1rem 3rem;
  border-radius: 50px;       /* 完全な丸カプセル型 */
  
  /* 👇 紫（#7C26CC）から、綺麗に馴染む薄い紫（#A95FFF）へのグラデーション */
  background: linear-gradient(135deg, #7C26CC 0%, #A95FFF 100%); 
  
  /* 👇 影も紫色の光（rgbaの数値を紫に変更）にしてネオン感をアップ */
  box-shadow: 0 6px 20px rgba(124, 38, 204, 0.35); 
  
  transition: all 0.3s ease; /* マウスを乗せた時の動きを滑らかに */
}

/* マウスを乗せた時（スマホでタップした時）の動き */
.btn-link:hover {
  transform: translateY(-3px); /* わずかに上に浮き上がる */
  
  /* 👇 マウスホバー時に影をより鮮やかにして、発光しているようなエフェクトに */
  box-shadow: 0 10px 25px rgba(124, 38, 204, 0.55); 
}

/* --- 4. ブログ内の写真・画像をおしゃれにする --- */
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;        /* 写真の角を丸く */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* うっすら上品な影 */
  margin-bottom: 2rem;
  display: block;
}


/* ==========================================================================
   決定版：Paletta専用 体験レッスン＆診断 案内ボックス
   ========================================================================== */

/* 全体を囲む綺麗なボックス */
.paletta-cta-box {
  background-color: #F6F0FF;       /* 提示いただいたFF5589を薄くした極薄ピンク */
  border: 2px solid #7C26CC;       /* ブランドカラーの紫の枠線 */
  border-radius: 12px;             /* 角を丸く */
  padding: 2rem 1.5rem;            /* ボックス内の余白 */
  margin: 3rem 0;                  /* 前後の文章とのすき間 */
  box-shadow: 0 10px 30px rgba(124, 38, 204, 0.08); /* 上品な薄い影 */
  text-align: center;              /* 中身を中央寄せ */
}

/* ボックス内の区切り点線 */
.paletta-cta-box hr {
  border: 0;
  border-top: 1px dashed #5c0ebb;
  margin: 2rem 0;
}

/* ボックス内の文章 */
.paletta-cta-box p {
  font-size: 16px;
  text-align: left;
  margin-bottom: 2rem !important;
  line-height: 1.8 !important;
  color: #333333;
}

/* ボタン共通のきれいなデザイン */
.paletta-cta-box .back-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff !important;      /* 青文字リンクを強制で白にする */
  text-decoration: none;          /* 下線を消す */
  padding: 15px 30px;
  border-radius: 50px;            /* 綺麗なカプセル型ボタン */
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* 診断ボタン（青グラデーション） */
.paletta-cta-box .btn-blue {
  background: linear-gradient(to right, #1c98c6, #02d3c0);
  box-shadow: 0 4px 15px rgba(2, 211, 192, 0.3);
}

/* 体験ボタン（紫グラデーション） */
.paletta-cta-box .btn-purple {
  background: linear-gradient(135deg, #7C26CC 0%, #A95FFF 100%);
  box-shadow: 0 4px 15px rgba(92, 14, 187, 0.3);
}

/* ボタンにマウスを乗せた時・タップした時のぷるんとした動き */
.paletta-cta-box .back-btn:hover {
  transform: translateY(-3px);
  opacity: 0.95;
}


/* ==========================================================================
   追加：ブログヘッダー・ファーストビュー（FV）およびセンター見出し設定
   ========================================================================== */

/* 1. PCとスマホの画像切り替えスイッチ（SPでPC画像が出るのを完全に防ぐ） */
@media (min-width: 769px) {
  .hide-pc { display: none !important; }
}
@media (max-width: 768px) {
  .hide-sp { display: none !important; }
}

/* FVの画像全体の設定（デバイスの画面幅いっぱいにピッタリ広げる） */
.blog-header-fv h1 {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.blog-header-fv img {
  width: 100vw;                /* 画面の横幅いっぱいに強制指定 */
  max-width: none;             /* 上限を解除 */
  height: auto;
  display: block;
  margin-left: calc(50% - 50vw); /* 親要素の余白を無視して画面端に合わせるマジック */
  margin-right: calc(50% - 50vw);
}

/* 2. タイトルエリアの装飾 */
.box01 {
  background-color: #ffffff;
  padding: 40px 20px 30px 20px; /* 上下の余白（pt40, pb30の代わり） */
}
.ttl01.center {
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: #7C26CC;              /* パレッタの紫をアクセントに */
  font-weight: 500;
  margin-bottom: 10px;
}
.ttl02.center {
  text-align: center;
  font-size: 50px;           /* パソコンで見栄えのする大文字 */
  line-height: 1.4;
  color: #111111;
  max-width: 800px;
  margin: 0 auto;
}
.date-text {
  text-align: center;
  color: #888;
  font-size: 14px;
  margin-top: 15px;
}

/* 3. 共通のセンター寄せ・余白用クラス */
.center {
  text-align: center;
}
.pb40 {
  padding-bottom: 40px;
}

/* スマホ表示のときだけタイトルの文字サイズを少し調整 */
@media (max-width: 768px) {
  .ttl02.center {
    font-size: 1.4rem;         /* スマホで画面からはみ出さないサイズ */
    padding: 0 10px;
  }
}

/* 4. 案内ボックスの上のセンター見出し用 */
.cta-title-center {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
  color: #5c0ebb;              /* ご指定のカラーコード #5c0ebb */
  text-align: center;          /* 確実に真ん中寄せ */
}


/* ==========================================================================
   追加：タイトルエリア（ttl01・ttl02）の最優先・強制上書き設定
   ========================================================================== */

/* 1. 「BLOG」の文字を確実に中央に寄せ、サイズとフォントを固定 */
p.ttl01.center {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  font-size: 16px !important;       
  font-weight: 500 !important;      
  letter-spacing: 0.2em !important; 
  text-align: center !important;    
  margin: 0 auto 10px !important;
  display: block !important;
}

/* 2. 記事タイトル文字（ttl02）の共通設定 */
h2.ttl02.center {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  font-weight: 700 !important;      
  line-height: 1.4 !important;
  text-align: center !important;    
  margin: 0 auto !important;
  display: block !important;
  background: none !important;      /* 背景の塗りつぶし等を完全にリセット */
  box-shadow: none !important;      /* 影を完全にリセット */
  padding: 0 !important;            /* 余計なパディングをリセット */
}

/* パソコン閲覧時（画面幅が769px以上）のタイトルサイズを強制指定 */
@media screen and (min-width: 769px) {
  h2.ttl02.center {
    font-size: 50px !important;     /* パソコン版の大きさを32pxに強制 */
  }
}

/* スマホ閲覧時（画面幅が768px以下）のタイトルサイズを強制指定 */
@media screen and (max-width: 768px) {
  h2.ttl02.center {
    font-size: 22px !important;     /* スマホ版の適切な大きさに強制 */
    padding: 0 10px !important;     
  }
}

/* 3. タイトル文字を水色のグラデーションにする（オリジナル設定を最優先適用） */
h2.ttl02.center span {
  display: inline !important;
  background: linear-gradient(to right, #1c98c6, #02d3c0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* 4. 案内ボックスの上の見出し用（確実に真ん中寄せ） */
.cta-title-center {
  font-weight: bold !important;
  font-size: 20px !important;
  margin-bottom: 20px !important;
  color: #5c0ebb !important;
  text-align: center !important;          
}


.ttl01{
		line-height: 1.5em;
		font-size: 3.8vw;
		color: #fff  !important;
	}
	.ttl01 span{
		background: linear-gradient(90deg, #1c98c6, #02d3c0);
		padding: 0px 14px 2px;
		border-radius: 300px;
	}






/* --- 5. 「おすすめの人」専用のチェックリスト --- */
.blog-content ul.list-recommend {
  background-color: #f3faf7;
  border: 1px solid #c3e6cb;
  padding: 1.5rem 1.5rem 1.5rem 2.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  list-style-type: none; /* デフォルトの黒丸を消す */
}
.blog-content ul.list-recommend li {
  position: relative;
  margin-bottom: 0.8rem;
  color: #155724;
}
.blog-content ul.list-recommend li::before {
  content: "💡";
  position: absolute;
  left: -1.8rem; /* アイコンを左に少しはみ出させる */
  top: 0;
}
.blog-content ul.list-recommend li:last-child {
  margin-bottom: 0; /* 最後の項目の下の隙間をなくす */
}