@charset "utf-8";


/*20260619追加*/
  .furusatorecommend {
  background:
  radial-gradient(circle at top left, transparent 50%, #5e0202 50%, #5e0202 calc(50% + 4px), transparent calc(50% + 4px)),
  radial-gradient(circle at top right, transparent 50%, #5e0202 50%, #5e0202 calc(50% + 4px), transparent calc(50% + 4px)),
  radial-gradient(circle at bottom left, transparent 50%, #5e0202 50%, #5e0202 calc(50% + 4px), transparent calc(50% + 4px)),
  radial-gradient(circle at bottom right, transparent 50%, #5e0202 50%, #5e0202 calc(50% + 4px), transparent calc(50% + 4px)),
  linear-gradient(90deg, #5e0202 4px, #faeed8 4px, #faeed8 calc(100% - 4px), #5e0202 calc(100% - 4px)),
  linear-gradient(180deg, #5e0202 4px, #faeed8 4px, #faeed8 calc(100% - 4px), #5e0202 calc(100% - 4px));
  background-position: top left, top right, bottom left, bottom right, left 15px, 15px top;
  background-size: 20px 20px, 20px 20px,20px 20px,20px 20px, 100% calc(100% - 30px), calc(100% - 30px) 100%;
  background-repeat: no-repeat;
  position: relative;
 /* margin:2em auto;*/
  padding: 30px 10px;
}

/* 全体の横並びと、アイコン・テキストの上下中央揃え */
.furusato_caption {
 display: flex;
    align-items: center;
    text-align: left;
    margin-top: 0px !important;
}

/* ::before を使って左側にアイコンを配置 */
.furusato_caption::before {
  content: "";
  display: block;
  width: 50px;                 /* アイコンの横幅（画像の比率に合わせて調整） */
  height: 50px;                /* アイコンの縦幅 */
  background-image: url("https://dshopping.docomo.ne.jp/campaign/img/furusato_icon.png"); /* アイコン画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;          /* アイコンと右側テキストの間のスキマ */
  flex-shrink: 0;              /* 画面が狭くなってもアイコンが潰れないようにする */
}

/* 右側のテキストの塊：中身を上から下に垂直並び（flex）にする */
.furusato_caption-text {
  display: flex;
  flex-direction: column;      /* 2つのspanを上下に並べる */
  justify-content: center;
}

/* 1行目：メインタイトル */
.furusato_caption-text .main-ttl {
  font-size: 20px;             /* 文字の大きさ */
  font-weight: bold;           /* 太字 */
  color: #750e12;              /* 濃いグレー */
  line-height: 1.3;
}

/* 2行目：注釈（キャンペーン対象外） */
.furusato_caption-text .sub-ttl {
  font-size: 14px;             /* 文字を少し小さく */
  color: #666666;              /* 文字色を少し薄く */
  margin-top: 4px;             /* 1行目との間のスキマ */
  line-height: 1.3;
}
@media(max-width: 767px) {
	.furusato_caption-text .main-ttl {
  font-size: 18px;
}
	.furusato_caption-text .sub-ttl {
  font-size: 12px;   
	}