/* 共通 */
.guide_honbun_fontc {
  color:#70412c;
}
.guide_honbun_size1_8 {
  font-size:1.8rem;
}
.guide_panel_bgc {
  background-color:#fffde5;
}

.cloud_ttl_bg {
  position: relative;
  display: inline-block;
  padding: 14px 40px; /* 上下左右の余白（文字が波に被らないように調整） */
  color: #ffffff;
  font-weight: bold;
  font-size: 3rem;
  letter-spacing: 0.05em;
  /*white-space: nowrap;*/
  z-index: 1;
}

@media (max-width: 767px) {
.cloud_ttl_bg {
  font-size: 2.4rem;
}
}

/*継承　上書き*/
.media>.item>.caption .title {
  font-size: 1.8rem;
}

.lyt_movie>.item .caption {
  font-size: 1.8rem;
}

.list_note_01>li, .list_note_02>li {
    font-size: 1.8rem;
}

/* -------------------------------------------
   綺麗なフクロ文字（ベースの文字）
------------------------------------------- */
.smooth-fukuro {
  position: relative;
  z-index: 1; /* 重なり順の基準を作る（必須） */
  
  /* 基本設定 */
  font-weight: bold;
  font-size: 3.0rem;
  line-height: 1.6;
  text-align: left;
  margin: 0 auto 20px;
  padding-left: 0.7rem;
  max-width: 1280px;
  
  /* ★ここで色は指定しません！ .guide_pageX_fontc などの色が自然に効きます */
}

/* -------------------------------------------
   綺麗なフクロ文字（背面に敷く白フチ専用レイヤー）
------------------------------------------- */
.smooth-fukuro::before {
  /* HTMLの data-text="..." から文字を引っ張ってくる */
  content: attr(data-text); 
  
  /* 本来の文字の真後ろにピッタリ配置する */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* マイナスを指定して背面に潜り込ませる */
  padding-left: 0.7rem;
  
  /* 極太の白フチと、内側の白塗りつぶし */
  -webkit-text-stroke: 8px #ffffff;
  color: #ffffff; 
  
  pointer-events: none; /* テキスト選択の邪魔をしないように */
}

/* -------------------------------------------
   パソコン向け（画面幅768px以上）のサイズ調整
------------------------------------------- */
@media (min-width: 768px) {
  .smooth-fukuro {
    font-size: 4.0rem;
    padding-left: 4.0rem;
  }
  .smooth-fukuro::before {
    -webkit-text-stroke: 10px #ffffff; /* PC時はフチをさらに太く */
    padding-left: 4.0rem;
  }
}

  /* -------------------------------------------
   パネル見出し用の吹き出し画像
------------------------------------------- */
.recommend-balloon-panel {
  position: absolute;
  
  /* パネル見出しの余白に合わせて位置を微調整 */
  top: -10px;      /* 上への飛び出し具合 */
  right: -130px;    /* 右への飛び出し具合 */
  
  width: 80px;     /* お好みの大きさに変更してください */
  height: auto;
  
  z-index: 10;     
  pointer-events: none; 
}

/* スマホ向け（画面幅767px以下） */
@media (max-width: 767px) {
  .recommend-balloon-panel {
    width: 65px;     /* スマホでは少し小さく */
    right: -45px;    /* 画面からはみ出さないように調整 */
    top: -5px;
  }

.image-wrapper {
  position: relative; /* 子要素の基準になる非常に重要な設定 */
  width: 95%;
  max-width: 580px; /* PCでの最大幅（画像の実際のサイズ等に合わせて調整） */
  margin: 0 auto;
}

}
@media (min-width: 768px) {
/* ① 全体を囲む箱（基準位置） */
.image-wrapper {
  position: relative; /* 子要素の基準になる非常に重要な設定 */
  width: 80%;
  max-width: 580px; /* PCでの最大幅（画像の実際のサイズ等に合わせて調整） */
  margin: 0 auto;
}
}

/* ② ベース画像 */
.base-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ③ リンクエリアの共通設定 */
.link-area {
  position: absolute; /* 画像の上に浮かせます */
  display: block;
}

/* ④ 各リンクの位置とサイズを指定（画像に合わせて%を微調整してください） */
/* 左側（家庭向け）のリンク */
.link-left {
  top: 83%;    /* 上から83%の位置 */
  left: 7%;    /* 左から8%の位置 */
  width: 39%;  /* 幅40% */
  height: 11%; /* 高さ12% */
}

/* 右側（病院向け）のリンク */
.link-right {
  top: 83%;    /* 上から83%の位置（左と揃える） */
  left: 56%;   /* 左から52%の位置 */
  width: 39%;  /* 幅40% */
  height: 11%; /* 高さ12% */
}

/* ⑤ 音声読み上げ用テキストを見えなくする魔法のコード */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* 背景のうねり部分 */
.cloud_ttl_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  /* 縦横比を無視して要素ぴったりに引き伸ばす設定 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 背景のうねり部分 */
.cloud_ttl_bg_001::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%233485c9'/></svg>");
}

.cloud_ttl_bg_002::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%23ed7987'/></svg>");
}

.cloud_ttl_bg_003::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%2351ba97'/></svg>");
}

.cloud_ttl_bg_004::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%23f18f4d'/></svg>");
}

.cloud_ttl_bg_005::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%238476b5'/></svg>");
}

.cloud_ttl_bg_006::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%2345bdcf'/></svg>");
}

.cloud_ttl_bg_007::before {
  /* 画像の形を模したSVGコード（インライン） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M30,7 C100,11 200,2 270,6 C295,7 300,18 295,30 C290,42 295,53 270,54 C200,52 100,58 30,54 C5,54 0,42 5,30 C10,18 5,6 30,7 Z' fill='%23eb6d9a'/></svg>");
}




/* 背景カラー */
.guide_pageh_bgc {
  background-color:#fffbc7;
}

.guide_page1_bgc {
  background-color:#c7d9f0;
}
.guide_page2_bgc {
  background-color:#fce5e8;
}
.guide_page3_bgc {
  background-color:#d6eace;
}
.guide_page4_bgc {
  background-color:#fce4d6;
}
.guide_page5_bgc {
  background-color:#d2d5ec;
}
.guide_page6_bgc {
  background-color:#c8e7e9;
}
.guide_page7_bgc {
  background-color:#fadce9;
}


/* 見出しフォントカラー */
.guide_page1_fontc {
  color:#5b98d2;
}
.guide_page2_fontc {
  color:#ed7987;
}
.guide_page3_fontc {
  color:#51ba97;
}
.guide_page4_fontc {
  color:#f18f4d;
}
.guide_page5_fontc {
  color:#8476b5;
}
.guide_page6_fontc {
  color:#45bdcf;
}
.guide_page7_fontc {
  color:#eb6d9a;
}

/* page1 アラート*/
/* ==========================================
   PC向けのベーススタイル
   ========================================== */
.alert-box {
  position: relative;
  max-width: 900px;
  margin: 50px auto;
  /* アイコンが左側に重なるため、padding-leftを広めに確保 */
  padding: 30px 30px 30px 65px; 
  background-color: #ffffff;
  
  /* 枠線とドロップシャドウ（ぼかしなしの立体影） */
  border: 4px solid #4a90e2;
  border-radius: 20px;
  box-shadow: 6px 6px 0px 0px #4a90e2;
}

/* テキスト全体のスタイリング */
.alert-content {
  color: #4a90e2;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6;
}

.alert-content p {
  margin: 0;
}

.alert-content p + p {
  margin-top: 10px; /* 2行目との間隔 */
}

/* 赤い下線 */
.highlight-red {
  position: relative;
  display: inline-block;
}
.highlight-red::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  background-color: #ff5252; /* 画像の赤い下線を再現 */
}

/* ！マークのアイコン（PC時は左側中央） */
.alert-icon {
  position: absolute;
  /* 左辺の真ん中に配置 */
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  
  width: 55px;
  height: 55px;
  background-color: #fff48c; /* 画像に近い黄色 */
  border: 4px solid #4a90e2;
  border-radius: 50%;
  box-shadow: 3px 3px 0px 0px #4a90e2; /* アイコン自体の影 */
  
  /* 「！」を丸の中央に上下左右中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: #4a90e2;
  font-size: 36px;
  font-weight: 900;
  font-family: sans-serif;
}

/* ==========================================
   スマホ向けのスタイル（画面幅768px以下）
   ========================================== */
@media (max-width: 768px) {
  .alert-box {
    /* アイコンが上側に重なるため、padding-topを広めに、左は元に戻す */
    padding: 45px 20px 20px 20px;
    margin: 40px 15px;
    font-size: 16px;
  }
  
  .alert-content {
    font-size: 1.8rem;
    text-align: center; /* 必要に応じてスマホ時は中央寄せに */
  }

  /* ！マークのアイコン（スマホ時は上部中央） */
  .alert-icon {
    /* 上辺の真ん中に配置を変更 */
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
  }
}

.hand-drawn-arc-up {
  position: relative;
  display: inline-block;
  padding-bottom: 10px; 
  font-size:3.0rem;
}

@media (max-width: 767px) {
.hand-drawn-arc-up {
  font-size:2.4rem;
}
}


/* 1本目と2本目の共通設定 */
.hand-drawn-arc-up::before,
.hand-drawn-arc-up::after {
  content: "";
  position: absolute;
  width: 55%; 
  height: 15px; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 【1本目の線】 */
.hand-drawn-arc-up::before {
  left: 0;
  bottom: 1px; 
  /* stroke='%23ff6b6b' で線の色を指定しています（#ff6b6b の意味） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,15 Q 50,2 98,10' fill='none' stroke='%23c7d9f0' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 【2本目の線】 */
.hand-drawn-arc-up::after {
  right: 0;
  bottom: 0; 
  /* こちらも同様に stroke='%23ff6b6b' に変更 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,12 Q 50,5 98,18' fill='none' stroke='%23c7d9f0' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ページセクション背景*/

/* ==========================================================
   1. セクション（親要素）とラッパー
   ========================================================== */
.panel-section {
  padding: 40px 16px; 
}
.content-wrapper {
  width: 99%;
  /*max-width: 700px;*/
  margin: 0 auto;
}

/* ==========================================================
   2. 白い大きな角丸ボックス
   ========================================================== */
.main-card {
  --title-width: 100%; 
  --title-height: 60px;   
  --title-push-up: 16px;  
  --content-gap: 24px;    
  
  position: relative;
  background-color: #ffffff;
  border-radius: 32px;
  padding: calc(var(--title-height) - var(--title-push-up) + var(--content-gap)) 20px 20px 20px; 
}

@media (min-width: 768px) {
  .panel-section { padding: 60px 60px; }
  .main-card {
    --title-width: 80%;   
    --title-height: 80px;   
    --title-push-up: 24px;  
    --content-gap: 40px;    
    border-radius: 48px;
    padding: calc(var(--title-height) - var(--title-push-up) + var(--content-gap)) 60px 40px 60px;
  }
}

/* ==========================================================
   3. 大見出し：共通ベーススタイル（形や配置だけを定義）
   ========================================================== */
.main-card__title {
  position: absolute;
  top: calc(var(--title-push-up) * -1); 
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  
  width: var(--title-width);
  height: var(--title-height);
  
  border-radius: 0; 
  background-color: transparent; 
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  font-weight: bold;
  font-size: 30px!important;
  letter-spacing: 0.05em;
  
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0px; 
  padding-bottom: 50px;
  box-sizing: border-box;
}
.main-card__title--01 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23c7d8ef'/></svg>");
  color: #5997d1;
}

.main-card__title--02 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23fce5e7'/></svg>");
  color: #ed7986;
}

.main-card__title--03 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23d6eace'/></svg>");
  color: #49ba97;
}

.main-card__title--04 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23fce4d6'/></svg>");
  color: #f18f4d;
}

.main-card__title--05 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23d2d5ec'/></svg>");
  color: #8477b6;
}

.main-card__title--06 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23c8e7e9'/></svg>");
  color: #41bdce;
}

.main-card__title--07 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,80 0,0 Z' fill='%23fadce9'/></svg>");
  color: #eb6c9a;
}


@media (min-width: 768px) {
  .main-card__title { font-size: 1.35rem; padding-top: 0px;padding-bottom: 40px; }

.main-card__title--01 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23c7d8ef'/></svg>");
  color: #5997d1;
}

.main-card__title--02 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23fce5e7'/></svg>");
  color: #ed7986;
}

.main-card__title--03 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23d6eace'/></svg>");
  color: #49ba97;
}

.main-card__title--04 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23fce4d6'/></svg>");
  color: #f18f4d;
}

.main-card__title--05 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23d2d5ec'/></svg>");
  color: #8477b6;
}

.main-card__title--06 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23c8e7e9'/></svg>");
  color: #41bdce;
}

.main-card__title--07 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><path d='M0,0 L360,0 Q180,120 0,0 Z' fill='%23fadce9'/></svg>");
  color: #eb6c9a;
}
}
/* ==========================================================
   1. ベースのパネル設計（親要素）
   ========================================================== */
.panel {
  position: relative; /* ★ラベルの配置基準にするため必須 */
  
  /* 【スマホ基準（デフォルト）の余白】 */
  /* ラベルが2行になっても大丈夫なように、上側の余白を広め（56px）に確保 */
  padding: 5px 16px 16px 16px; 
  
  background-color: #fffde4;
  color: #333333;
}

/* パターンB：しっかり角丸 */
.panel--lg {
  margin-top:60px;
  border-radius: 20px;
}


/* PC マージン 
@media (min-width: 768px) {
.panel--lg_page2_margin {
  margin-top:30px;
}
}
*/

/* スマホ　マージン*/
@media (max-width: 767px) {
.panel--lg_page2_margin {
  margin-top:120px;
}
.panel--lg_page3_margin {
  margin-top:120px;
}
.panel--lg_page4_margin {
  margin-top:120px;
}

}

/* ==========================================================
   3. ラベルの配置・レスポンシブ制御クラス
   ========================================================== */
.panel__label {
  position: absolute;
  
  /* 【スマホ時：下端を固定して、改行時は上へ伸ばす魔法】 */
  /* パネルの上枠線から、内側に20px食い込んだ位置に「ラベルの下端」をロック */
  bottom: calc(100% - 40px); 
  
  /* 【スマホ時：中央寄せ】 */
  left: 50%;
  transform: translateX(-50%);
  
  /* 【スマホ時：改行の安全対策】 */
  white-space: normal; /* 改行を許可 */
  width: max-content;  /* 基本は文字幅ぴったり */
  max-width: 100%;      /* パネルの横幅85%を超えたら自動改行 */
  text-align: center;  /* 2行になったときに中央揃えにする */
}

/* ==========================================================
   4. PCサイズ（画面幅 768px 以上）の調整
   ========================================================== */
@media (min-width: 768px) {
  
  /* パネルの余白をPC用に最適化 */
  .panel {
    padding: 15px 24px 24px 24px; /* 左右と下の余白を少し広げる */
    margin: 70px 0 0;
  }
  
  /* ラベルのサイズをPC用に大きく戻す */
  .tape-bg {
    padding: 14px 40px;
    font-size: 1.1rem;
  }
  
  /* ラベルの位置を「中央寄せ」から「左上配置」に切り替え */
  .panel__label {
    bottom: auto;       /* スマホ用の下基準をリセット */
    top: -40px;         /* PCは上枠線から40px上に飛び出させる（上基準） */
    left: 16px;         /* 左枠線から16px内側 */
    transform: none;    /* スマホの中央寄せを解除 */
    
    white-space: nowrap; /* PCでは絶対に改行させない */
    max-width: none;     /* 横幅制限を解除 */
  }
}



/* page7 marker*/
.marker-perfect {
  /* 文字側の設定 */
  position: relative; /* 丸の配置の基準にするため必須 */
  display: inline-block;
  padding: 0.4em 0.8em; /* ゆったりめの余白 */
  margin: 0 0.1em;
  white-space: nowrap; 
  /* ★文字自体を傾ける transform は削除しました */
}

/* 丸側の設定（疑似要素） */
.marker-perfect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* SVG画像をこちらに移動 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M45 92 C100 95 95 5 50 10 C5 15 -5 85 55 83' fill='none' stroke='%23eb6d9a' stroke-width='4' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  
  /* ★ここで丸だけを傾ける */
  transform: rotate(-30deg);
  
  /* 文字の後ろに配置する */
  z-index: -1;
}

/* --- 見出し用大サイズ --- */
.marker-perfect-large {
  position: relative;
  z-index: 1;        /* ★最重要：潜り込みを防ぐ専用のレイヤーを作る */
  display: inline-block;
  font-size: 2em;    /* 文字を大きく */
  font-weight: bold;
  padding: 0.3em 0em; 
  margin: 0 0em;
  white-space: nowrap; 
}

/* 丸側の設定（疑似要素） */
.marker-perfect-large::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -50%;
  width: 200%;
  height: 90%;
  
  /* SVG画像をこちらに移動 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M45 92 C100 95 95 5 50 10 C5 15 -5 85 55 83' fill='none' stroke='%23eb6d9a' stroke-width='4' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  
  /* ★ここで丸だけを傾ける */
  transform: rotate(-15deg);
  
  /* 文字の後ろに配置する */
  z-index: -1;
}




/* */
/* -------------------------------------------
   1. スマホ向け：しっかり太い丸フチ（約4px分の厚み）
------------------------------------------- */
.main-card__title {
    margin: 0 auto;
    max-width: 1280px;
    text-align: left;
    line-height: 1.6;
    font-weight: bold;
    
    font-size: 24px!important; /* スマホの文字サイズ */

    /* 内側(2px)と外側(4px)の2段階に分けて、全方位に白い影を敷き詰めて太くします */
    text-shadow:
        /* 内側の隙間埋め用 (2px) */
        2px  0px 1px #fff, -2px  0px 1px #fff,  0px  2px 1px #fff,  0px -2px 1px #fff,
        1.4px  1.4px 1px #fff, -1.4px  1.4px 1px #fff,  1.4px -1.4px 1px #fff, -1.4px -1.4px 1px #fff,
        /* 外側の極太用 (4px) */
        4px  0px 1px #fff, -4px  0px 1px #fff,  0px  4px 1px #fff,  0px -4px 1px #fff,
        2.8px  2.8px 1px #fff, -2.8px  2.8px 1px #fff,  2.8px -2.8px 1px #fff, -2.8px -2.8px 1px #fff;
}

/* -------------------------------------------
   2. パソコン向け：圧倒的な存在感の極太丸フチ（約7.5px分の厚み）
------------------------------------------- */
@media (min-width: 768px) {
    .main-card__title {
        font-size: 30px!important; /* パソコンの文字サイズ */
        
text-shadow:
            /* 内側：文字のすぐそばを埋める */
            1.5px  1.5px 0.5px #fff, -1.5px  1.5px 0.5px #fff,  1.5px -1.5px 0.5px #fff, -1.5px -1.5px 0.5px #fff,
            1.5px  0px   0.5px #fff, -1.5px  0px   0.5px #fff,  0px    1.5px 0.5px #fff,  0px   -1.5px 0.5px #fff,
            /* 外側：太さを出すための層 */
            3px    3px   0.5px #fff, -3px    3px   0.5px #fff,  3px   -3px   0.5px #fff, -3px   -3px   0.5px #fff,
            3px    0px   0.5px #fff, -3px    0px   0.5px #fff,  0px    3px   0.5px #fff,  0px    -3px  0.5px #fff;
    }
}



/* */
.qa-item {
  display: flex;
  align-items: flex-start; /* アイコンとテキストの先頭を揃える */
  margin-bottom: 20px;
}

.qa-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size:2.2rem;
  flex-shrink: 0; /* アイコンの形を維持 */
  margin-right: 15px;
}

/* Qのスタイル */
.q-icon {
  background-color: #45bdcf;
}

/* Aのスタイル */
.a-icon {
  background-color: #ed7987;
}

/* テキストのスタイル */
.qa-text {
  padding-top: 5px;
  color: #70412c;
  line-height: 1.6;
}

  /* color-override というクラスが追加された時だけ、背景色を上書きする */
  .list_01.color-override > li::before {
      background-color: var(--marker-color, #d87b88);
  }

/* 見出し全体の設定 */
.icon-heading {
  display: flex;
  align-items: center; /* これが「縦方向のセンター揃え」の必須コードです */
  gap: 10px; /* アイコンとテキストの間の余白（お好みで調整） */
  
  /* 以下はデザインのベース設定なのでお好みで変更してください */
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #8476b5;
}

/* アイコン画像の設定 */
.heading-icon {
  width: 32px; /* アイコンの横幅 */
  height: 32px; /* アイコンの高さ */
  object-fit: contain; /* 画像が指定サイズ内で歪まないようにする */
  flex-shrink: 0; /* テキストが長くなってもアイコンが潰れないようにする */
}

/* 全体のテキストスタイル */
.custom-headline {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 28px;        /* 全体の文字サイズ */
  font-weight: bold;
  color: #5a3d28;         /* 画像に合わせた温かみのある茶色 */
  display: flex;
  align-items: center;    /* 縦方向の中央揃え */
  flex-wrap: wrap;        /* 改行対策 */
}

/* 強調部分（ココ）のスタイル */
.emphasis {
  font-size: 1.4em;       /* 周りの文字より大きく */
  color: #5b98d2;         /* 画像に合わせた鮮やかな青 */
  position: relative;     /* 擬似要素の位置の基準点 */
  padding: 0 10px;         /* 左右の余白を少し作る */
  margin: 0 10px;
  display: inline-block;
  line-height: 1;
z-index: 0;
}

/* 左上の放射状ライン（間隔を少し詰めたバージョン） */
.emphasis::before {
  content: "";
  position: absolute;
  /* ラインが中央に寄ってコンパクトになった分、位置を少し内側に調整しています */
  top: -28px;             
  left: -1px;            
  width: 54px;            /* 60px → 54px に少しコンパクトに */
  height: 45px;           /* 50px → 45px に少しコンパクトに */
  
  /* インラインSVG：間隔を狭め、より引き締まった楕円アークに修正 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 60 50'%3E%3Cpath d='M9,26 L4,18 M17,22 L12,10 M25,21 L25,7 M33,22 L38,10 M41,26 L46,18' stroke='%23007bbb' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  
  /* 角度と回転軸 */
  transform: rotate(-30deg);       
  transform-origin: bottom center; 
}

/* 黄色の下線（マーカー風） */
.emphasis::after {
  content: "";
  position: absolute;
  bottom: -6px;           /* 文字の下側に少しずらす */
  left: -5%;              /* 文字の左側に少しはみ出す */
  width: 110%;            /* 文字より少し長めにする */
  height: 8px;            /* 線の太さ */
  background-color: #fff353; /* 画像に合わせた明るい黄色 */
  border-radius: 4px;     /* 角を丸くして手書き感を出す */
  z-index: -1;            /* 文字の後ろに配置 */
}


/* ★ここを追加：下線の位置の基準ツマミになります */
.emphasis_markonly {
  position: relative;
  z-index: 1; /* 背景の黄色い線より前に文字を出すため */
}

/* 黄色の下線（マーカー風） */
.emphasis_markonly::after {
  content: "";
  position: absolute;
  bottom: -1px;           /* 文字の下側に少しずらす（好みの高さに調整してください） */
  left: -0.5%;              /* 文字の左側に少しはみ出す */
  width: 101%;            /* 文字より少し長めにする */
  height: 8px;            /* 線の太さ */
  background-color: #fff353; /* 画像に合わせた明るい黄色 */
  border-radius: 4px;     /* 角を丸くして手書き感を出す */
  z-index: -1;            /* 文字の後ろに配置 */
}

@media (max-width: 767px) {
.cloud_ttl_bg_qa {
    padding: 14px 27px;
}
}

.hand-drawn-arc-up_page2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px; 
}

/* 1本目と2本目の共通設定 */
.hand-drawn-arc-up_page2::before,
.hand-drawn-arc-up_page2::after {
  content: "";
  position: absolute;
  width: 95%; 
  height: 15px; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 【1本目の線】 */
.hand-drawn-arc-up_page2::before {
  left: 0;
  bottom: 3px; 
  /* stroke='%23ff6b6b' で線の色を指定しています（#ff6b6b の意味） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,15 Q 50,2 98,10' fill='none' stroke='%23fff799' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 【2本目の線】 */
.hand-drawn-arc-up2::after {
  right: 0;
  bottom: 0; 
  /* こちらも同様に stroke='%23ff6b6b' に変更 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,12 Q 50,5 98,18' fill='none' stroke='%23fff799' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}



.hand-drawn-arc-up_page3 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px; 
}

/* 1本目と2本目の共通設定 */
.hand-drawn-arc-up_page3::before,
.hand-drawn-arc-up_page3::after {
  content: "";
  position: absolute;
  width: 55%; 
  height: 15px; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 【1本目の線】 */
.hand-drawn-arc-up_page3::before {
  left: 0;
  bottom: 1px; 
  /* stroke='%23ff6b6b' で線の色を指定しています（#ff6b6b の意味） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,15 Q 50,2 98,10' fill='none' stroke='%23d6eace' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 【2本目の線】 */
.hand-drawn-arc-up_page3::after {
  right: 0;
  bottom: 0; 
  /* こちらも同様に stroke='%23ff6b6b' に変更 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,12 Q 50,5 98,18' fill='none' stroke='%23d6eace' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.hand-drawn-arc-up_page5 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px; 
  font-size:3.0rem;
}

/* 1本目と2本目の共通設定 */
.hand-drawn-arc-up_page5::before,
.hand-drawn-arc-up_page5::after {
  content: "";
  position: absolute;
  width: 55%; 
  height: 15px; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 【1本目の線】 */
.hand-drawn-arc-up_page5::before {
  left: 0;
  bottom: 1px; 
  /* stroke='%23ff6b6b' で線の色を指定しています（#ff6b6b の意味） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,15 Q 50,2 98,10' fill='none' stroke='%23d2d5ec' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 【2本目の線】 */
.hand-drawn-arc-up_page5::after {
  right: 0;
  bottom: 0; 
  /* こちらも同様に stroke='%23ff6b6b' に変更 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,12 Q 50,5 98,18' fill='none' stroke='%23d2d5ec' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.hand-drawn-arc-up_page6q {
  position: relative;
  display: inline-block;
  padding-bottom: 10px; 
}

/* 1本目と2本目の共通設定 */
.hand-drawn-arc-up_page6q::before,
.hand-drawn-arc-up_page6q::after {
  content: "";
  position: absolute;
  width: 55%; 
  height: 15px; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 【1本目の線】 */
.hand-drawn-arc-up_page6q::before {
  left: 0;
  bottom: 1px; 
  /* stroke='%23ff6b6b' で線の色を指定しています（#ff6b6b の意味） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,15 Q 50,2 98,10' fill='none' stroke='%23c8e7e9' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 【2本目の線】 */
.hand-drawn-arc-up_page6q::after {
  right: 0;
  bottom: 0; 
  /* こちらも同様に stroke='%23ff6b6b' に変更 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,12 Q 50,5 98,18' fill='none' stroke='%23c8e7e9' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.hand-drawn-arc-up_page6a {
  position: relative;
  display: inline-block;
  padding-bottom: 10px; 
}

/* 1本目と2本目の共通設定 */
.hand-drawn-arc-up_page6a::before,
.hand-drawn-arc-up_page6a::after {
  content: "";
  position: absolute;
  width: 55%; 
  height: 15px; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 【1本目の線】 */
.hand-drawn-arc-up_page6a::before {
  left: 0;
  bottom: 1px; 
  /* stroke='%23ff6b6b' で線の色を指定しています（#ff6b6b の意味） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,15 Q 50,2 98,10' fill='none' stroke='%23fce5e8' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 【2本目の線】 */
.hand-drawn-arc-up_page6a::after {
  right: 0;
  bottom: 0; 
  /* こちらも同様に stroke='%23ff6b6b' に変更 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M 2,12 Q 50,5 98,18' fill='none' stroke='%23fce5e8' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}