@charset "Shift_JIS";
/* --------------------------------------------------------------------
土用の丑CSS / .unagi
--------------------------------------------------------------------- */
/* 改行切り替え */
.mainframe_ .sp_only { display: none; }
.wrapper_:not(:has(.mainframe_)) .pc_only { display: none; }

/* 既存トピックス（非表示） */
.m-newslist2_,
.l-news01_ {
  display: none;
}

/* ピックアップバナー（差し込み用バナー）基本 */
#pickup_bnr { width: 100%; max-width: 640px; margin: 20px auto; padding: 0 3%; }
#pickup_bnr img { width: 100%; height: auto; }

/*--------------------- PC・SP　共通設定 -------------------------------------------------*/

/* フォントサイズ（デフォルト） */
.unagi {
  font-size: 1.6rem;
  line-height: 1.4;
}
.unagi a:hover {
  text-decoration: none;
}

/* ボタン 右矢印（＞） */
.unagi .btn_basic a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  width: 100%;
  max-width: 380px;
  height: 70px;
  margin: 0 auto;
  background: #222;
  border-radius: 60px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
}

.unagi .btn_basic a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}

/* 【調節】パラメーターによるクラス付与（changeActive.js） */
.mainframe_ #navi_menu.js-change-active-area,
.mainframe_ #title_list.js-change-active-area,
.wrapper_:not(:has(.mainframe_)) #navi_menu.js-change-active-area,
.wrapper_:not(:has(.mainframe_)) #title_list.js-change-active-area {
  /* カラー設定 */
  --js-color-bg-on: #073D6C;    /* ONボタン：背景 */
  --js-color-border-off: #d3e0e2;      /* OFFボタン：ボーダー */
  --js-color-linkover-off: #fcf8ed;    /* OFFボタン：マウスオーバー */
}

.wrapper_:not(:has(.mainframe_)) #navi_menu.js-change-active-area ul li:nth-child(n+3) { width: calc((100% / 3) - 2%); }

/*--------------------- PC -------------------------------------------------*/
/* 上部パーツ
================================================== */
/* MV */
.mainframe_ .unagi .head .title {
  position: relative;
}

/* キャッチコピー */
.mainframe_ .unagi .catch_copy {
  text-align: center;
  margin: 15px 0;
}

.mainframe_ .unagi .catch_copy .bold {
  font-weight: bold;
}

/* トピックス（#topic）
================================================== */
.mainframe_ .unagi #topic {
  width: 100%;
  max-width: 600px;
  margin: 15px auto;
}

.mainframe_ .unagi #topic a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  padding: 10px 30px;
  background: #fff;
  border: 1px solid #fe0e11;
  border-radius: 3px;
}

.mainframe_ .unagi #topic a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  transform: translateY(-50%) rotate(-45deg);
}

.mainframe_ .unagi #topic a > div {
  padding: 0 0 0 54px;
  background: url("/contents/common/img/icon_attention.png") center left / 44px auto no-repeat;
}

.mainframe_ .unagi #topic .title {
  color: #fe0e11;
}

/* マウスオーバー */
.mainframe_ .unagi #topic a:hover {
  opacity: 1;
  background: #fff6cc;
}

/* キャンペーン（#campaign）
================================================== */
.mainframe_ .unagi #campaign {
  margin: 15px auto;
}

.mainframe_ .unagi #campaign_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  background: #fbf9f6;
}

/* タイトル */
.mainframe_ .unagi #campaign .title_box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
  padding: 0 10px 0 0;
  border-right: 2px dashed #d1c2c0;
}

.mainframe_ .unagi #campaign .title_box .title {
  padding: 15px 0 3px 0;
}

.mainframe_ .unagi #campaign .title h2 {
  color: #28211a;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.1rem;
}

/* 内容 */
.mainframe_ .unagi #campaign ul {
  display: flex;
  gap: 10px;
}

.mainframe_ .unagi #campaign ul li {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: end;
  gap: 6px;
  color: #28211a;
  padding: 0 8px;
}

.mainframe_ .unagi #campaign ul li::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.8em;
  background: #fccf76;
  border-radius: 60px;
}

/* 画像 */
.mainframe_ .unagi #campaign ul li .img {
  position: relative;
  z-index: 0;
  width: 70px;
}

.mainframe_ .unagi #campaign ul li .img img {
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(19%) sepia(6%) saturate(2660%) hue-rotate(319deg) brightness(95%) contrast(87%); /* #28211a */
}

.mainframe_ .unagi #campaign ul li .img::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
/* クーポン */
.mainframe_ .unagi #campaign ul li.cont_coupon .img::after { aspect-ratio: 1; background: url("/contents/siblings/unagi/img/icon_coupon_bg.png") 0 0 / cover no-repeat; }

/* テキスト */
.mainframe_ .unagi #campaign ul li .detail {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 0;
}

.mainframe_ .unagi #campaign ul li .detail .txt_sub {
  font-size: 1.6rem;
  line-height: 1.2;
}

.mainframe_ .unagi #campaign ul li .detail .txt_main {
  grid-column: 1 / span 2;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
}
.mainframe_ .unagi #campaign ul li.cont_coupon .txt_main {text-indent: -0.5em; letter-spacing: -0.10rem; } /* クーポン */

/* ボタン：新規登録 */
.mainframe_ .unagi #campaign .btn_register a {
  display: inline-block;
  color: #1a0dab;
  font-size: 1.4rem;
  font-weight: bold;
}

/* ボタン：トピックス */
.mainframe_ .unagi #campaign .btn_topic {
  min-width: 9em;
}

.mainframe_ .unagi #campaign .btn_topic a {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  height: 60px;
  padding: 0 6px;
  background: #e85c7a;
  border-radius: 3px;
  border: 1px solid #e85c7a;
}

.mainframe_ .unagi #campaign .btn_topic a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 6px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}

/* マウスオーバー */
.mainframe_ .unagi #campaign .btn_register a:hover {
  text-decoration: underline;
}

.mainframe_ .unagi #campaign .btn_topic a:hover {
  opacity: 1;
  color: #28211a;
  background: #fff;
}
.mainframe_ .unagi #campaign .btn_topic a:hover::after {
  border-color: #28211a;
}

/* ピックアップバナー（差し込み用バナー） */
.mainframe_ .unagi #pickup_bnr {
  position: relative;
}

.mainframe_ .unagi #pickup_bnr .icon {
  position: absolute;
  z-index: 2;
  top: -10px;
  left: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: auto;
  aspect-ratio: 1;
  background: #bf0d0d;
  border-radius: 60px;
}

.mainframe_ .unagi #pickup_bnr .icon span {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.mainframe_ .unagi #pickup_bnr .icon > span {
  font-size: 1.6rem;
  padding: 6px 0 0 0;
  transform: rotate(-10deg);
}
.mainframe_ .unagi #pickup_bnr .icon > span > span {
  font-size: 2.2rem;
  padding: 4px 0 0 0;
}

.mainframe_ .unagi #pickup_bnr .att {
  font-size: 1.2rem;
  text-align: right;
  padding: 3px 0 0 0;
}

/*--------------------- SP -------------------------------------------------*/
/* 上部パーツ
================================================== */
/* キャッチコピー */
.wrapper_:not(:has(.mainframe_)) .unagi .catch_copy {
  font-size: 1.4rem;
  text-align: center;
  margin: 10px 3%;
}

.wrapper_:not(:has(.mainframe_)) .unagi .catch_copy .bold {
  font-weight: bold;
}

/* トピックス（#topic）
================================================== */
.wrapper_:not(:has(.mainframe_)) .unagi #topic {
  padding: 0 3%;
  width: 100%;
  max-width: 500px;
  margin: 10px auto;
}

.wrapper_:not(:has(.mainframe_)) .unagi #topic a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  padding: 10px;
  background: #fff;
  border: 1px solid #fe0e11;
  border-radius: 3px;
}

.wrapper_:not(:has(.mainframe_)) .unagi #topic a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  transform: translateY(-50%) rotate(-45deg);
}

.wrapper_:not(:has(.mainframe_)) .unagi #topic a > div {
  padding: 0 10px 0 50px;
  background: url("/contents/common/img/icon_attention.png") left 10px / 40px auto no-repeat;
}

.wrapper_:not(:has(.mainframe_)) .unagi #topic .title {
  color: #fe0e11;
}

.wrapper_:not(:has(.mainframe_)) .unagi #topic a > div > p:nth-of-type(2) {
  font-size: 1.3rem;
}

/* キャンペーン（#campaign）
================================================== */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign {
  margin: 20px 3%;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 3%;
  background: #fbf9f6;
}

/* タイトル */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign .title {
  padding: 0 0 5px 0;
  border-bottom: 2px dashed #d1c2c0;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign .title h2 {
  color: #28211a;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.2;
}

/* 内容 */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 10px;
  width: 100%;
  margin: 12px auto;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: end;
  gap: 6px;
  color: #28211a;
  padding: 0 10px;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.8em;
  background: #fccf76;
  border-radius: 60px;
}

/* 画像 */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li .img {
  position: relative;
  z-index: 0;
  width: 80px;
  margin: 0 auto;
}
.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li.cont_shipping .img { width: 70px; }

.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li .img img {
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(19%) sepia(6%) saturate(2660%) hue-rotate(319deg) brightness(95%) contrast(87%); /* #28211a */
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li .img::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
/* クーポン */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li.cont_coupon .img::after { aspect-ratio: 1; background: url("/contents/siblings/unagi/img/icon_coupon_bg.png") 0 0 / cover no-repeat; }

/* テキスト */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li .detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: end;
  padding: 0 0 3px 0;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li .detail .txt_sub {
  font-size: 1.5rem;
  line-height: 1.2;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li .detail .txt_main {
  grid-column: 1 / span 2;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  font-feature-settings: "palt";
}
.wrapper_:not(:has(.mainframe_)) .unagi #campaign ul li.cont_coupon .txt_main { letter-spacing: -0.10rem; } /* クーポン */

/* ボタン：新規登録 */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign .btn_register {
  position: absolute;
  top: 20px;
  right: 3%;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign .btn_register a {
  display: inline-block;
  color: #1a0dab;
  font-size: 1.4rem;
  font-weight: bold;
}
.wrapper_:not(:has(.mainframe_)) .unagi #campaign .btn_register a::after {
  display: inline;
  content: ' ＞';
}

/* ボタン：トピックス */
.wrapper_:not(:has(.mainframe_)) .unagi #campaign .btn_topic {
  width: 90%;
  margin: 0 auto;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign .btn_topic a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  height: 50px;
  background: #e85c7a;
  border-radius: 60px;
  border: 1px solid #e85c7a;
}

.wrapper_:not(:has(.mainframe_)) .unagi #campaign .btn_topic a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}


/* ピックアップバナー（差し込み用バナー） */
.wrapper_:not(:has(.mainframe_)) .unagi #pickup_bnr .icon {
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  padding: 0 10px;
  background: #bf0d0d;
}

.wrapper_:not(:has(.mainframe_)) .unagi #pickup_bnr .att {
  font-size: 1.3rem;
  text-align: right;
  padding: 3px 0 0 0;
}