@charset "UTF-8";

/* --- 全体の枠組み --- */
.reco-box {
  border: 2px solid #0066cc;
  background-color: #fff;
  margin: 20px 0;
  font-family: sans-serif;
  color: #333;
  line-height: 1.7;
}

/* --- タイトルエリア --- */
.reco-box .reco-title-wrap {
  background-color: #0066cc;
  padding: 15px;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}

/* タイトル全体の外枠 */
.reco-box .main-title {
  display: flex;
  align-items: center;     
  justify-content: center; 
  gap: 10px;               
  flex-wrap: wrap;         
  
  color: #fff;
  font-weight: bold;
  font-size: 1.3em; 
  line-height: 1.4;
  margin: 0;
}

/* テキスト部分全体を囲むspan */
.reco-box .title-text {
  position: relative; 
  display: inline-block;
  color: #fff; 
}

/* 「ホンネ」調整 */
.reco-box .honne-adjust {
  font-size: 1.05em; 
  color: #fff; 
}

/* 「の」調整 */
.reco-box .small-char {
  font-size: 0.8em;       
  vertical-align: 1px;    
  margin: 0 1px;          
  color: #fff; 
}

/* 「ひらめき線」アイコン */
.reco-box .title-text::after {
  content: "";
  position: absolute; 
  
  top: -4px;   
  right: -12px; 
  
  width: 24px;
  height: 24px;
  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 2L12 6M4.2 4.2L7 7M19.8 4.2L17 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  
  transform: rotate(40deg); 
}

/* 「直販店員の」バッジ */
.reco-box .sub-badge {
  position: static;
  transform: none;
  margin-right: 0;
  background-color: #fff;
  color: #0066cc;
  font-size: 0.8em;       
  font-weight: bold;
  padding: 5px 16px;      
  border-radius: 100px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  white-space: nowrap;
  line-height: 1.2;
}

/* --- スマホ対策 --- */
@media (max-width: 600px) {
  .reco-box .reco-title-wrap {
    padding: 15px 5px; /* 全体の左右余白を調整 */
  }

  .reco-box .main-title {
    flex-direction: row;     /* 横並び維持 */
    gap: 4px;                /* バッジとタイトルの隙間を最小限に */
    font-size: 1.25em;       /* PCとほぼ同じ大きさをキープ */
  }
  
  .reco-box .sub-badge {
    font-size: 0.8em;        
    padding: 4px 10px;       /* バッジの余白を少し詰める */
  }
  
  /* アイコン位置 */
  .reco-box .title-text::after {
      right: -14px; 
      width: 18px; 
      height: 18px;
      top: -2px;
  }
}

/* --- 本文エリア --- */
.reco-box .reco-content {
  padding: 25px;
}
.reco-box p {
  margin-bottom: 1.2em;
}

/* --- 箇条書きと太字 --- */
.reco-box ul {
  margin: 15px 0 20px 0;
  padding: 15px 15px 15px 20px;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
  color: #555;
  font-size: 0.9em;
  list-style: none;
}
.reco-box li {
  position: relative;
  margin-bottom: 5px;
  padding-left: 1em;
}
.reco-box li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #0066cc;
}
.reco-box strong {
  font-weight: bold;
}

/* --- 箇条書きエリアの修正 --- */
.reco-box ul {
  padding: 10px 20px 10px 30px; 
  margin: 20px 0;
  background-color: #f7f7f7;
  border: none;
  border-radius: 8px;
  color: #333;
  font-size: 1em;
  list-style: none;
}

.reco-box li {
  position: relative;
  margin-bottom: 8px;           /* 行間を少し広げる */
  padding-left: 0.5em;
  line-height: 1.6;
}

.reco-box li::before {
  content: "・";
  position: absolute;
  left: -1em;
  top: 0;
  font-weight: bold;
  color: #333;
}

/* --- 新設：小見出しデザイン --- */
.reco-box .point-head {
  margin-top: 25px;            /* 上に少し隙間を空ける */
  margin-bottom: 10px;         /* 下の本文との隙間 */
  padding: 8px 12px;           /* 内側の余白 */
  background-color: #e6f2ff;   /* 非常に薄い青（テーマに合わせ調整可） */
  border-left: 5px solid #0066cc; /* 左側のアクセントライン */
  color: #0066cc;              /* 文字色をテーマカラーに */
  font-weight: bold;
  font-size: 1.1em;            /* 本文より少し大きく */
  line-height: 1.4;
}

/* 小見出し直後のpタグの余白調整 */
.reco-box .point-head + p {
  margin-top: 0;
}

/* --- 区切り線（1の上、3の下用） --- */
.reco-box .reco-hr {
  border: none;
  border-top: 2px dashed #0066cc; /* テーマカラーの点線 */
  opacity: 0.3;                   /* 主張しすぎないよう少し薄く */
  margin: 30px 0;                 /* 上下の余白を広めにとって区切りを強調 */
}

/* --- 特定の箇所だけ以前の「上下点線・背景なし」に戻すクラス --- */
.reco-box ul.dashed-list {
  background-color: transparent;  /* 背景色をなしに */
  border-top: 1px dotted #ccc;    /* 上に点線 */
  border-bottom: 1px dotted #ccc; /* 下に点線 */
  border-radius: 0;               /* 角丸を解除 */
  padding: 15px 15px 15px 20px;   /* 余白を以前の調整に戻す */
}