.care-guide .fc_purple {
  color:#9b72b0;
}
.care-guide .fc_pink {
  color: #eb6ea0;
}
.care-guide .fc_blue2 {
  color: #585ca7;
}


.care-guide .icon_01 {
    z-index: 1;
    display: inline-flex;
    padding: 2px 2px;
    min-width: 5rem;
    min-height: 1.5rem;
    background: #9b72b0;
    color: #fff;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
}

/* 共通レイアウト（色の指定は消す） */
.hdg-line {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 2.5rem;
  font-weight: bold;
}

.hdg-line::before {
  content: "";
  flex-basis: 1em;
  height: 2.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
}

.hdg-line::after {
  content: "";
  flex-grow: 1;
  height: 2.5rem;
  margin-left: 1rem;
}

/* --- 色のバリエーション --- */

/* ブルー */
.hdg-line.is-blue {
  color:#52a5dc;
}

.hdg-line.is-blue::before,
.hdg-line.is-blue::after {
  background: #52a5dc;
}

/* ピンク */
.hdg-line.is-pink {
  color:#eb6ea0;
}
.hdg-line.is-pink::before,
.hdg-line.is-pink::after {
  background: #eb6ea0; /* 例 */
}

/* オレンジ */
.hdg-line.is-orange {
  color:#ee7800;
}
.hdg-line.is-orange::before,
.hdg-line.is-orange::after {
  background: #ee7800; /* 例 */
}

/* 特定のページ（body.page-special）の中にある .h_1 だけ上書き */
.care-guide .hdg_lv3_01 .hdg {
    position: relative; /* absoluteの基準点 */
    padding-left: 0.5rem;
    color: #e85298; 
}

.care-guide .hdg_lv3_01::before {
    width: 15px; /* 矢印っぽくするために幅を広げる */
    clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%);
    background: #e85298; 
}

.label-block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;       /* 上下の余白（高さを決める） */
  color: #fff;
  font-weight: bold;
  box-sizing: border-box;
  margin-bottom: 10px;

  /* ここがポイント：半円にする設定 */
  border-radius: 50vh;   /* または 999px など大きな値 */
}

/* 色バリエーション */
.label-pink  { background-color: #ff69b4; font-size:2rem; }
.label-green { background-color: #28a745; font-size:2rem; }
.label-blue  { background-color: #007bff; font-size:2rem; }

.tape-label {
  font-size:2.5rem;
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 0;
  color: #fff;
  font-weight: bold;
  box-sizing: border-box;
  margin-bottom: 10px;

  /* 
     clip-pathでギザギザに切り抜く
     左端(0%付近)と右端(100%付近)でジグザグさせています
  */
clip-path: polygon(
    /* 左側（端: 0%, 内側: 5px） */
    0% 0%, 5px 10%, 0% 20%, 5px 30%, 0% 40%, 5px 50%, 0% 60%, 5px 70%, 0% 80%, 5px 90%, 0% 100%,
    /* 右側（端: 100%, 内側: calc(100% - 10px)） */
    calc(100% - 5px) 100%, 100% 90%, calc(100% - 5px) 80%, 100% 70%, calc(100% - 5px) 60%, 100% 50%, calc(100% - 5px) 40%, 100% 30%, calc(100% - 5px) 20%, 100% 10%, calc(100% - 5px) 0%
  );
}

/* 色バリエーション（中のspanは不要になりました） */
.tp-pink  { background-color: #ff69b4; }
.tp-green { background-color: #a160ca; }
.tp-blue  { background-color: #007bff; }

.care-guide .form_check .text::after {
    position: absolute;
    top: 8px;
    left: 3px;
    z-index: 1;
    width: 14px;
    height: 10px;
    border-bottom: solid 3px #b68ad1;
    border-left: solid 3px #b68ad1;
    opacity: 0;
    transition: opacity .2s ease-out;
    transform: rotate(-45deg);
}

.care-guide .panel_02 .panel_02_hdg {
    background: #a160ca;
    color: #fff;
}
.care-guide .panel_02 {
    background: #f0e3f7;
}


 

.care-guide .panel_01 {
border: 3px solid #9b72b0; /* border-colorではなく全体を書き直す */
}

.care-guide .hdg_lv2_01 .hdg {
  color:#9b72b0;
}

.care-guide .hdg_lv2_01 .hdg {
display: flex;
justify-content: flex-start;
align-items: left;
gap: 15px;
}
.care-guide .hdg_lv2_01 .hdg img {
height:4rem;
margin-top:0.6rem;
}

.panel_01_pink {
    border: 3px solid #e84586;
    position: relative;
    padding-top: 40px; /* 見出しの高さに合わせて調整 */
    margin-top: 20px;
}

.panel_01_hdg_pink {
    position: absolute;
    font-size: 2.6rem;
    top: 0;
    left: 0;
    margin: 0;
    display: inline-block;
    /* ここで影をつける（内側のclip-pathの形を反映してくれる） */
    /*filter: 
        drop-shadow(4px 0 0 #fff)    /* 白い隙間 */
    /*    drop-shadow(9px 0 0 #e84586); /* 外側の5pxボーダー */
}

.panel_01_hdg_pink span {
    display: inline-block;
    padding: 5px 35px 5px 15px;
    background-color: #e84586; /* メインの帯色 */
    color: #fff;
    /* ここで斜めカット */
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.care-guide .panel_01_pink .hdg_lv4_01 {
color: #e84586;
}

:root {
  --corner-radius: 15px;
  --border-width: 3px;
  --border-color: #9b72b0;
}

.inner-round-border {
  position: relative;
  width: 100%;
  /*max-width: 400px;*/
  min-height: 150px;
  padding: calc(var(--corner-radius) + 10px);
  box-sizing: border-box;
}

/* 枠線部分 */
.inner-round-border::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  
  /* 角を削るためのマスク（放射状グラデーションを使用） */
  --mask: radial-gradient(circle at var(--corner-radius) var(--corner-radius), transparent 0%, transparent var(--corner-radius), black calc(var(--corner-radius) + 0.5px))
          calc(-1 * var(--corner-radius)) calc(-1 * var(--corner-radius));
  
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

/* 内側をくり抜いて「枠」にするための擬似要素 */
.inner-round-border::after {
  content: "";
  position: absolute;
  /* 枠線の太さ分だけ内側に追い込む */
  inset: var(--border-width);
  background: white; /* 背景色に合わせて変更してください（透過したい場合は別の工夫が必要です） */
  
  /* 枠線と同じ形に削る */
  --mask: radial-gradient(circle at var(--corner-radius) var(--corner-radius), transparent 0%, transparent var(--corner-radius), black calc(var(--corner-radius) + 0.5px))
          calc(-1 * var(--corner-radius)) calc(-1 * var(--corner-radius));
          
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.content {
  position: relative;
  z-index: 2;
}

.care-guide .content .list_note_01 { 
  width: fit-content; /* 中身のサイズに合わせる */
  margin-left: auto;  /* 左側の余白を最大にして右に押し出す */
}


.care-guide .panel_pd {
  padding: 0px 37px 0px;
}



.panel_01_blue {
    border: 3px solid #9b72b0;
    position: relative;
    padding-top: 40px; /* 見出しの高さに合わせて調整 */
    margin-top: 20px;
}

.panel_01_hdg_blue {
    position: absolute;
    font-size: 2.6rem;
    top: 0;
    left: 0;
    margin: 0;
    display: inline-block;
    /* ここで影をつける（内側のclip-pathの形を反映してくれる） */
    filter: 
        drop-shadow(4px 0 0 #fff)    /* 白い隙間 */
        drop-shadow(9px 0 0 #9b72b0); /* 外側の5pxボーダー */
}

.panel_01_hdg_blue span {
    display: inline-block;
    padding: 5px 35px 5px 15px;
    background-color: #9b72b0; /* メインの帯色 */
    color: #fff;
    /* ここで斜めカット */
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}


.panel_01_blue2 {
    border: 3px solid #585ca7;
    background-color:#e9e4f1;
    position: relative;
    padding-top: 40px; /* 見出しの高さに合わせて調整 */
    margin-top: 20px;
}

.panel_01_hdg_blue2 {
    position: absolute;
    font-size: 2.6rem;
    top: 0;
    left: 0;
    margin: 0;
    display: inline-block;
    /* ここで影をつける（内側のclip-pathの形を反映してくれる） */
}


  .panel_01_hdg_blue2 span {
    display: inline-block;
    padding: 5px 35px 5px 15px; /* 右側のパディングを少し広めに取ると綺麗です */
    background-color: #585ca7;
    color: #fff;
    
    /* 右側を角丸にする設定 */
    /* 上 右 下 左 / 角丸の半径 */
    clip-path: inset(0 0 0 0 round 0 100px 100px 0);
}

   /* 共通スタイル */
.icon-q {
  font-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;            /* サイズ（文字の大きさに合わせる） */
  aspect-ratio: 1 / 1;    /* 正方形を維持 */
  border-radius: 50%;     /* 完璧な円にする */
  color: #fff;            /* 文字色は白 */
  font-weight: bold;
  margin-right: 10px;     /* テキストとの間隔 */
  flex-shrink: 0;         /* 円が潰れないように固定 */
}

.icon-a {
  font-size: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;            /* サイズ（文字の大きさに合わせる） */
  aspect-ratio: 1 / 1;    /* 正方形を維持 */
  border-radius: 50%;     /* 完璧な円にする */
  color: #fff;            /* 文字色は白 */
  font-weight: bold;
  margin-right: 10px;     /* テキストとの間隔 */
  flex-shrink: 0;         /* 円が潰れないように固定 */
}

/* Qは青 */
.icon-q {
  background-color: #585ca7;
}

/* Aはピンク */
.icon-a {
  background-color: #e85298;
}

/* Q&Aの並び（横並びにする場合） */
.qa-row {
  display: flex;
  align-items: flex-start; /* 複数行になっても円を上端に固定 */
  margin-bottom: 20px;
}

.qa_bg_white {
background-color:#fff;padding:10px;
}

.care-guide .qa_package_img {display:flex;}
.care-guide .qa_package_img_parent {display:flex;flex-direction: column;flex: 1;}
.care-guide .item img.icon {margin-top: auto; margin-left: 0px;}

.point_vcenter {display: flex; align-items: center;}

/* 画面幅が768px以下のとき（スマホ・タブレット想定） */
@media screen and (max-width: 768px) {
  .item img.icon {
    width: 50% !important; /* 強制的に50%にする */
    height: auto;          /* 縦横比を維持 */
    display: block;        /* 中央寄せを効かせるために必要 */
    align-self: center;
  }
}