@charset "Shift_JIS";


.mainframe_, .wrapper_:not(:has(.mainframe_)) {
  /* カラー設定 */
  --color-purple: #af8cb2;
  --color-purple-shadow: rgb(175, 140, 178, 30%);
  --color-purple-light: #f0eaf6;
  --color-offwhite: #faf6f0;

  /* フォントファミリー */
  --font-mincho: "游明朝体", "Yu Mincho", yumincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;

  /* フォントサイズ設定 */
  --fs-btn : var(--fontsize-m); /* ボタン：16px */
  --fs-navi: var(--fontsize-l); /* ナビゲーション：18px */
}
  
/* 改行切り替え */
.mainframe_ .sp_only {
  display: none; 
}

.wrapper_:not(:has(.mainframe_)) .pc_only {
  display: none; 
}

/* --------------------------------------------------------------------
【PC】「お盆のお供え」ページ用CSS / .mainframe_ .obon
--------------------------------------------------------------------- */

/* 初期設定
--------------------------------- */

/*  画像見出し（.m-titleimg_） */
.mainframe_ .m-titleimg_ {
  margin-bottom: 10px;
}

/* 下層カテゴリー非表示（.free_block_) */
.mainframe_ .free_block_ {
  display: none;
}

/* フリースペースの余白 */
.mainframe_ #genre_wrap_top,
.mainframe_ #genre_wrap_btm {
  margin-bottom: 60px;
}

/* リード文 */
.mainframe_ .obon .txt .lead_txt {
  font-family: var(--font-mincho);
}

/* 情報コンテンツ(.tips)
--------------------------------- */
.mainframe_ .obon .tips {
  max-width: 600px;
  margin: 30px auto 0;
  background: var(--color-purple-light);
  border: var(--color-purple) solid 1px;
  border-radius: 4px;
}

.mainframe_ .obon .tips .tips_header {
  padding: 20px;
}

.mainframe_ .obon .tips .header_title {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fontsize-1xl);
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  color: #111;
}

.mainframe_ .obon .tips .tips_content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 20px;
}

.mainframe_ .obon .tips .tips_content article {
  line-height: 1.8;
  color: #222;
}

.mainframe_ .obon .tips .tips_content article > h3 {
  padding: 10px;
  border-left: #222 4px solid;
  font-size: var(--fontsize-l);
  font-weight: bold;
  line-height: 1;
}

.mainframe_ .obon .tips .tips_content article > p,
.mainframe_ .obon .tips .tips_content article > dl {
  margin: 10px 0 0;
}

.mainframe_ .obon .tips .tips_content article > p,
.mainframe_ .obon .tips article.knowledge dd {
  color: #333;
}

/* お供えの意味(.tips > .knowledge) */
.mainframe_ .obon .tips article.knowledge dt,
.mainframe_ .obon .tips article.knowledge dd {
  display: inline;
  margin: 0;
  padding: 0;
}

.mainframe_ .obon .tips article.knowledge dt {
  font-weight: bold;
}

/* ナビメニュー（#navi_menu）
--------------------------------- */
.mainframe_ .obon #navi_menu {
  margin-top: 20px;
}

.mainframe_ .obon #navi_menu ul {
  display: grid;
  gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
}

.mainframe_ .obon #navi_menu ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 10px 0 15px;
  background: #fff;
  border: 1px solid var(--color-purple);
  border-radius: 3px;
  font-family: var(--font-mincho);
  font-size: var(--fs-navi);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  color: #111;
  box-shadow: 0 2px 3px 0 rgb(61, 61, 61, 15%);
}

.mainframe_ .obon #navi_menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: rotate(45deg);
}

/* マウスオーバー */
.mainframe_ .obon #navi_menu ul li a:hover {
  background: var(--color-purple-light);
  opacity: 1;
}

/* --------------------------------------------------------------------
イベント出力コンテンツ(.event_)
--------------------------------------------------------------------- */
.mainframe_:has(.obon) .event_ .goods_ {
  margin-top: 40px;
}

/* タイトル(.event_ > .goods_title) */
.mainframe_:has(.obon) .event_ .goods_title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  padding-top: 20px;
}

.mainframe_:has(.obon) .event_ .goods_title ~ .goods_title {
  margin-top: 70px;
}

/* タイトル */
.mainframe_:has(.obon) .event_ .goods_title .title h2 {
  margin: 0;
  padding: 0 0 0 20px;
  font-family: var(--font-mincho);
  font-size: var(--fontsize-7xl);
  font-weight: bold;
  text-align: center;
  color: #111;
}

.mainframe_:has(.obon) .event_ .goods_title .title h2 > span {
  padding: 0 70px 10px 40px;
  background: url("/contents/proper/living/event/obon/img/title-deco.png") no-repeat right bottom / auto 70%;
}

/* リード文 */
.mainframe_:has(.obon) .event_ .goods_title .textbox {
  margin: 0 0 20px;
}

.mainframe_:has(.obon) .event_ .goods_title .textbox p {
  margin: 10px 0 0;
  font-size: var(--fontsize-m);
  line-height: 1.4;
  text-align: center;
  color: #333;
}

/* 詳細ボタン */
.mainframe_:has(.obon) .event_ .btn_basic {
  margin-top: 50px;
}

.mainframe_:has(.obon) .event_ .btn_basic a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  max-width: 360px;
  margin: 0 auto;
  background: var(--color-purple);
  border-radius: 60px;
  font-size: var(--fs-btn);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.mainframe_:has(.obon) .event_ .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);
}

.mainframe_:has(.obon) .event_ .btn_basic a > span > span {
  font-weight: bold;
}

/* マウスオーバー */
.mainframe_:has(.obon) .event_ .btn_basic a:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------
【PC】「お盆のお供え」下部回遊エリア(フリースペース3) / .mainframe_ .obon
--------------------------------------------------------------------- */

/* おすすめ特集（#recommend_banner_wrap）
--------------------------------- */
.mainframe_ .obon#recommend_banner_wrap {
  padding: 30px 20px;
  background: var(--color-offwhite)
}

.mainframe_ .obon#recommend_banner_wrap .title {
  margin: 0 auto 10px;
  font-family: var(--font-mincho);
  font-size: var(--fontsize-7xl);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #111;
  letter-spacing: 0.25rem;
}

.mainframe_ .obon#recommend_banner_wrap .title::before {
  content: none;
}

.mainframe_ .obon#recommend_banner_wrap .title span {
  background: none;
}

.mainframe_ .obon#recommend_banner_wrap .lead_txt {
  margin-bottom: 30px;
  font-size: var(--fontsize-m);
  line-height: 1.4;
  text-align: center;
  color: #333;
}

/* //PC ここまで */

/* --------------------------------------------------------------------
【SP】「お盆のお供え」ページ用CSS / .mainframe_ .obon
--------------------------------------------------------------------- */

/* 初期設定
--------------------------------- */

/* 下層カテゴリー非表示（.m-catlist_) */
.wrapper_:not(:has(.mainframe_)) .m-catlist_ {
  display: none;
}

/* フリースペースの余白 */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_top {
  margin-bottom: 60px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm {
  margin: 30px 0;
}

/* リード文 */
.wrapper_:not(:has(.mainframe_)) .obon .txt .lead_txt {
  font-family: var(--font-mincho);
}

/* 情報コンテンツ(.tips)
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .obon .tips {
  margin: 30px 3% 0;
  background: var(--color-purple-light);
  border: var(--color-purple) solid 1px;
  border-radius: 4px;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_header {
  padding: 20px 3%;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .header_title {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fontsize-1xl);
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  color: #111;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 3% 20px;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_content article {
  line-height: 1.8;
  color: #222;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_content article > h3 {
  padding: 4px 3%;
  border-left: #222 4px solid;
  font-size: var(--fontsize-l);
  font-weight: bold;
  line-height: 1;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_content article > p,
.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_content article > dl {
  margin: 5px 0 0;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips .tips_content article > p,
.wrapper_:not(:has(.mainframe_)) .obon .tips article.knowledge dd {
  color: #333;
}

/* お供えの意味(.tips > .knowledge) */
.wrapper_:not(:has(.mainframe_)) .obon .tips article.knowledge dt,
.wrapper_:not(:has(.mainframe_)) .obon .tips article.knowledge dd {
  display: inline;
  margin: 0;
  padding: 0;
}

.wrapper_:not(:has(.mainframe_)) .obon .tips article.knowledge dt {
  font-weight: bold;
}

/* ナビメニュー（#navi_menu）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .obon #navi_menu {
  margin-top: 20px;
}

.wrapper_:not(:has(.mainframe_)) .obon #navi_menu ul {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 3%;
}

.wrapper_:not(:has(.mainframe_)) .obon #navi_menu ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 10px 0 15px;
  background: #fff;
  border: 1px solid var(--color-purple);
  border-radius: 3px;
  font-family: var(--font-mincho);
  font-size: var(--fs-navi);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  color: #111;
  box-shadow: 0 2px 3px 0 rgb(61, 61, 61, 15%);
}

.wrapper_:not(:has(.mainframe_)) .obon #navi_menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------
イベント出力コンテンツ(.event_)
--------------------------------------------------------------------- */

/* タイトル(.event_ > .goods_title) */
.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_title ~ .goods_title {
  margin-top: 60px;
}

/* タイトル */
.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_title .title h2 {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--fontsize-5xl);
  font-weight: bold;
  text-align: center;
  color: #111;
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_title .title h2 > span {
  padding: 0 64px 10px 50px;
  background: url("/contents/proper/living/event/obon/img/title-deco.png") no-repeat right bottom / auto 70%;
}

/* リード文 */
.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_title .textbox {
  margin: 20px 0 0;
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_title .textbox p {
  font-size: var(--fontsize-m);
  line-height: 1.4;
  text-align: center;
  color: #333;
}

/* 商品カード */
.wrapper_:not(:has(.mainframe_)):has(.obon):has(.obon) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ li {
  border-color: var(--color-purple);
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ li.swiper-slide-active {
  box-shadow: 0 0 4px var(--color-purple-shadow);
}

/* 詳細ボタン */
.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .btn_basic {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .btn_basic a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  margin-top: 30px;
  background: #fff;
  background: var(--color-purple);
  border-radius: 60px;
  font-size: var(--fs-btn);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .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);
}

.wrapper_:not(:has(.mainframe_)):has(.obon) .event_ .btn_basic a > span > span {
  font-weight: bold;
}

/* --------------------------------------------------------------------
【SP】「お盆のお供え」下部回遊エリア(フリースペース4) / .mainframe_ .obon
--------------------------------------------------------------------- */

/* おすすめ特集（#recommend_banner_wrap）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .obon#recommend_banner_wrap {
  padding: 30px 20px;
  background: var(--color-offwhite)
}

.wrapper_:not(:has(.mainframe_)) .obon#recommend_banner_wrap .title {
  margin: 0 auto 10px;
  font-family: var(--font-mincho);
  font-size: var(--fontsize-5xl);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #111;
  letter-spacing: 0.25rem;
}

.wrapper_:not(:has(.mainframe_)) .obon#recommend_banner_wrap .title::before {
  content: none;
}

.wrapper_:not(:has(.mainframe_)) .obon#recommend_banner_wrap .title span {
  background: none;
}

.wrapper_:not(:has(.mainframe_)) .obon#recommend_banner_wrap .lead_txt {
  margin-bottom: 30px;
  font-size: var(--fontsize-m);
  line-height: 1.4;
  text-align: center;
  color: #333;
}

.wrapper_:not(:has(.mainframe_)) .obon#recommend_banner_wrap ul.btn_list {
  margin: 0;
}

/* //PC ここまで */