@charset "utf-8";
/* CSS Document */

#container {
    width: auto;
    margin: 0 auto;
	padding: 50px 0 0;
}

#container {
    font-size: 1rem;
}

img {
width: 100%;
}

p {
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

/* 文字のスタイル */

.fs_l {
    font-size: 1.15rem;
}
.fs_s {
    font-size: 0.85rem;
}
.caution__btn {
    position: relative;
    border: none;
    border-bottom: 2px solid #666;
    width: 15em;
    max-width: 90%;
    margin-top: 1em;
}

.fw_600 {
    font-weight: 600;
}

.red{
color: red;
}


.headline {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.2em;
}


section {
    padding: 40px 0 ;
}







.inner {
    max-width: 720px;
    margin: auto;
}





/* メインビジュアル */


.mv {
    padding: 100px 0 60px;
    /* background-color: black; */
}


.mv__img.fade {
    max-width: 840px;
    margin: auto;
}

/* イントロ */




.introduction {
    width: 900px;
    max-width: 90%;
    margin: 80px auto;
}



h1.introduction__title {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.introduction__txt {
margin-bottom: 2rem
}


.introduction__txt p {
line-height: 2;
}

.introduction__date {
    font-size: 1.5rem;
	font-weight: 600;
    margin: 1em 0;
}



/* ========== クーポン告知セクション ========== */
.coupon {
  width: 100%;
  margin: 0 auto;
  padding: 40px 16px;
  background: #ff8800; /* オレンジ背景 */
  box-sizing: border-box;
  text-align: center;
  color: #fff; /* デフォルト文字色 白 */
}

/* 見出し */
.coupon-headline {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 2;
    letter-spacing: 1px;
    color: #fff;
}

/* クーポン画像エリア */
.coupon-area {
  max-width: 400px;
  margin: 0 auto 24px;
}
.coupon-area img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: transform .25s ease;
}
.coupon-area img:hover {
  transform: scale(1.03);
}

/* 注意書き */
.coupon-attention {
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: #fff; /* 白字に */
}
.coupon-attention p {
  margin: 6px 0;
}

.coupon-howto {
  max-width: 640px;
  margin: 0 auto;
  text-align: right; /* 任意で右寄せにすると「補助リンク感」が出る */
}

.coupon-link {
  font-size: 14px;
  color: #fff; /* オレンジ背景上なら白 */
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .2s ease;
}
.coupon-link:hover {
  opacity: 0.8;
}

.coupon-link i {
  margin-left: 6px;  /* テキストとの間隔 */
  position: static;  /* 絶対配置を解除 */
}



/* スマホ調整 */
@media (max-width: 767px) {
  .coupon {
    padding: 30px 12px;
  }
  .coupon-headline {
    font-size: 18px;
  }
  .coupon-attention {
    font-size: 13px;
  }
}

/* ========== 注意事項　全体幅 960px & ベース ========== */

/* 見出し・アコーディオン */
#rule {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 16px; /* スマホの左右余白 */
  padding-right: 16px;
}


#rule a:link, a:visited {
    color: #2196F3;
}

/* 見出し・アコーディオン */
#rule .ecm-campaign-details-headline {
  font-weight: 700; font-size: 18px; line-height: 1.4; text-align: center;
  margin: 16px 0 12px;
}
#rule .ecm-campaign-details-title {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; font-weight: 700; cursor: pointer;
}
#rule .ecm-campaign-details-title .ecm-icon-chevron-down { transition: transform .2s ease; }
#rule .ecm-campaign-details-title[aria-expanded="true"] .ecm-icon-chevron-down { transform: rotate(180deg); }
#rule [data-accordion-panel][aria-hidden="true"] { display: none; }
#rule [data-accordion-panel] {
  margin-top: 12px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
}

/* スマホ　フォント調整 */

@media (max-width: 959.98px) {
#rule [data-accordion-panel] {
    margin-top: 12px;
    padding: 2px;
    font-size: 13px;
}
}





/* ========== グループは1カラム。各グループの中で2カラム ========== */

/* グループの箱 */
#rule .ecm-campaign-details-group {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 16px;
  margin-top: 16px; /* グループ間の間隔 */
}

#rule .ecm-campaign-details-group:first-child {
  border-top: none;
}



/* グループ内のみ2カラム（PC時） */
@media (min-width: 960px) {
  #rule .ecm-campaign-details-group {
    display: grid;
    grid-template-columns: 220px 1fr; /* 左: 見出し / 右: 内容 */
    column-gap: 20px;
    row-gap: 8px;
    align-items: start;
  }
  /* 左カラム（見出し） */
  #rule .ecm-campaign-details-group > .fw-700 {
    grid-column: 1 / 2;
    margin: 0; /* 余白リセット */
  }
  /* 右カラム（内容） */
  #rule .ecm-campaign-details-group > :not(.fw-700) {
    grid-column: 2 / 3;
  }
}

/* スマホはグループ内も1カラム（縦積み） */
@media (max-width: 959.98px) {
  #rule .ecm-campaign-details-group {
    display: block;
  }
  #rule .ecm-campaign-details-group > .fw-700 {
    margin-bottom: 8px;
  }
}

/* 見出しの体裁 */
#rule .fw-700 { font-weight: 700; line-height: 1.5; }

/* “全幅扱い”したい特別ブロックは2カラム適用しない */
#rule .ecm-campaign-details-group-full {
  display: block !important; /* 2カラム化を解除 */
}

/* 小物 */
#rule .ecm-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 4px 8px; border-radius: 999px; background: #eef2ff;
}
#rule a.underline { text-decoration: underline; text-underline-offset: 2px; }
#rule .mt-8 { margin-top: 8px; }
#rule .d-flex { display: flex; }
#rule .d-flex-col { flex-direction: column; }
#rule .d-flex-gap-4 { gap: 16px; }

@media (min-width: 960px) { #rule .d-flex.d-flex-col { flex-direction: row; } }



/* ショッピング */
#search {
  width: 100%;
  max-width: 960px;   /* 最大幅960px */
  margin: 0 auto;     /* 中央寄せ */
  padding: 40px 16px; /* 両端に余白、スマホでも窮屈にならないように */
  box-sizing: border-box;
}




/* リンクボタン全体 */
#search .search-link {
  text-align: center;
  margin: 20px 0 30px;
}

/* ボタン風リンク */
#search .search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #e60012;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
    line-height: 4;
    width: 100%;
}
#search .search-btn:hover {
  background: #c0000f;
}
#search .search-btn i {
  font-size: 14px;
}





/* === search セクションに限定 === */
#search .keyword-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

#search .keyword-pill {
  display: block;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  text-align: center;
  font-size: 13px;     
  line-height: inherit;      /* 親の行間を継承 */
  color: inherit;            /* 親の文字色を継承 */
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;       /* ラベルが長くても pill らしさを維持 */
}

#search .keyword-pill:hover {
  background: #f60;
  color: #fff;
  border-color: #f60;
}

/* === ヘッドライン === */
h2.main_ttl {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}



/* 狭幅時の余裕（任意：140pxだと詰まる時は120pxに */
@media (max-width: 480px) {
  #search .keyword-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
}



#shopping {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 16px;
  text-align: center;
}

#shopping h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.pickup-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  text-align: center; /* キャプションを中央寄せ */
}

.pickup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pickup-item a {
  display: block;
  transition: transform .25s ease, opacity .25s ease;
}

.pickup-item a:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

.pickup-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.pickup-caption {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}


@media (max-width: 480px) {

.pickup-caption {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

}











footer {
    margin-top: 0;
}


/* フェードアップ */
.fade{
    transform: scale(.9);
    opacity: 0;
    visibility: hidden;
}







@media (max-width:540px) {



section {
    margin-top: 60px;
}

p {
font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 0.5rem;
}



.fs_l {
    font-size: 0.9rem;
}


.inner {
    width: 94%;
}


.headline {
    font-size: 1.5rem;
}


h1.introduction__title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
}



.introduction__date {
    font-size: 1.2rem;
    line-height: 1.85;
    font-weight: 600;
    margin: 1em 0;
}


/* クーポン */

.coupon-area {
    flex-wrap: wrap;
}

.coupon-area-block {
    width: 70%;
}

.coupon__sheet {
    flex-wrap: wrap;
}

.coupon__sheet {
    width: 75%;
}
.coupon__sheet__inner {
    margin: 0 auto 30px;
}


.caution__headline {
    font-size: 1rem;

}

.attention {
    width: 90%;
}


.attention__text {
    text-align: left;
    font-size: 0.9rem;
}

.attention__text_important {
    text-align: left;
    font-size: 0.9rem;
	color: #FFF;
}






}