@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;
}