@charset "Shift_JIS";
/* --------------------------------------------------------------------
「煎茶と和菓子特集」ページ用CSS(SP) / .tea-sencha
--------------------------------------------------------------------- */

/* フォントのメインカラー */
.tea-sencha .c_set1 {
  color: #425909;
}

.tea-sencha .c_set2 {
  color: #60432b;
}

#event_wrapper_top {
  margin-bottom: 0;
}

/* 基礎知識(.basic_knowledge) */
.tea-sencha .basic_knowledge {
  position: relative;
  z-index: 0;
  margin: 20px 3% 0;
  border: 1px solid #5c302d;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
}

.tea-sencha .basic_knowledge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url("/contents/proper/foods/event/tea-sencha/img/bg.jpg") center center / cover repeat;
  pointer-events: none;
}

.tea-sencha .basic_knowledge .knowledge_header {
  padding: 20px 3%;
}

.tea-sencha .basic_knowledge .header_title {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  color: #0A0A0A;
}

.tea-sencha .basic_knowledge .header_title::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 100%;
  display: block;
  height: 70%;
  aspect-ratio: 17/10;
  margin: 0 10px 0 0;
  background: url("/contents/proper/foods/event/tea-sencha/img/title_bg03.png") center center / contain no-repeat;
}

.tea-sencha .basic_knowledge .knowledge_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 3%;
  overflow: hidden;
}

.tea-sencha .basic_knowledge article {
  padding: 20px 0;
  overflow: hidden;
}

.tea-sencha .basic_knowledge article:nth-of-type(2) {
  border-top: 1px dotted #352623;
}

.tea-sencha .basic_knowledge article:first-of-type {
  padding: 0 0 20px;
}

.tea-sencha .basic_knowledge article .desc {
  font-size: 1.6rem;
  color: #0A0A0A;
}

.tea-sencha .basic_knowledge article h3 {
  margin: 0 0 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #0A0A0A;
}

/* 煎茶に合う和菓子は？(.about_sweets) */
.tea-sencha .basic_knowledge .about_sweets {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.tea-sencha .basic_knowledge .about_sweets .list {
  position: relative;
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 0 auto 10px;
}

.tea-sencha .basic_knowledge .about_sweets .list span:not(:last-of-type) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 5px;
  background: #af560e;
  border-radius: 50%;
  font-size: 1.3rem;
  color: #fff;
}

.tea-sencha .basic_knowledge .about_sweets .list span:last-of-type {
  position: absolute;
  right: -20px;
  bottom: 5px;
  display: block;
  font-size: 1.2rem;
}

.tea-sencha .basic_knowledge .about_sweets .desc {
  text-align: center;
}

/* お茶説明(.about_sencha) */
.tea-sencha .basic_knowledge .about_sencha {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tea-sencha .basic_knowledge .about_sencha h3 {
  text-align: center;
}

.tea-sencha .basic_knowledge .about_sencha .desc {
  text-align: left;
}

/* --------------------------------------------------------------------
イベント出力コンテンツ（.event_）
--------------------------------------------------------------------- */

/* タイトル(.event_ > .goods_title) */
.event_ .goods_title {
  position: relative;
  margin: 60px 0 20px;
  padding: 20px 0 0;
  text-align: center;
}

.event_ .goods_title h2 {
  position: relative;
  display: inline-block;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: bold;
  color: #000;
}

.event_ .goods_title span.goods_title-text {
  position: relative;
  padding: 0 10px;
  font-size: 3rem;
  line-height: 1.2;
}

/* タイトルのリード文 */
.event_ .goods_add {
  margin: 0 0 20px;
  color: #000;
}

.event_ .goods_add .lead_txt {
  margin: 20px 0 0;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
}

/* タイトルデザイン:煎茶（#sencha） */
.event_ #sencha.goods_title span {
  display: inline-block;
  padding: 10px 40px;
  background: #f6f6eb;
  font-size: 2.4rem;
}

.event_ #sencha.goods_title span.goods_title-text::before,
.event_ #sencha.goods_title span.goods_title-text::after {
  content: '';
  position: absolute;
  height: 40%;
  aspect-ratio: 50/40;
  background: url("/contents/proper/foods/event/tea-sencha/img/title_bg04.png") center center / cover no-repeat;
}

.event_ #sencha.goods_title span.goods_title-text::before {
  top: -2px;
  left: -2px;
}

.event_ #sencha.goods_title span.goods_title-text::after {
  right: -2px;
  bottom: -2px;
  rotate: 180deg;
}

/* タイトルデザイン：和菓子 */
.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title {
  margin-bottom: 30px;
}

.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-deco {
  position: absolute;
  top: -15px;
  left: 50%;
  display: inline-block;
  width: 80px;
  font-size: 2.4rem;
  transform: translate(-50%, -50%);
  letter-spacing: 0.25rem;
}

/* マーカー線 */
.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-deco::after,
.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title h2::after {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
  height: 20px;
  opacity: 0.4;
  transform: translate(-50%, -50%);
}

.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-deco::after {
  top: 60%;
  left: 30%;
  width: 70%;
  background: #97aa69;
  rotate: 5deg;
}

.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title h2::after {
  bottom: 0;
  left: 50%;
  width: 100%;
  background: #e0b48f;
  rotate: -3deg;
}

/* 青海波 */
.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-text::before,
.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-text::after {
  content: '';
  position: absolute;
  height: 20px;
  aspect-ratio: 240/100;
  opacity: 0.6;
}

.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-text::before {
  top: -5px;
  left: -60px;
  background: url("/contents/proper/foods/event/tea-sencha/img/title_bg01.png") center center / cover no-repeat;
}

.event_ :is(#dorayaki, #yokan, #castella, #monaka).goods_title span.goods_title-text::after {
  right: -60px;
  bottom: -5px;
  background: url("/contents/proper/foods/event/tea-sencha/img/title_bg02.png") center center / cover no-repeat;
}

/* SP:商品カード(.event_ > .goods_ > ul.goods_p_.goods_list_wrapper_) 商品表示モード：なし */
.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ {
  display: grid;
  gap: 30px 10px;
  grid-template-columns: repeat(2, 1fr);
  padding: 0 3%;
  border: none;
}

.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ li {
  padding: 0;
  border: none;
}

.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ li > a {
  padding: 0;
}

.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .img_,
.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ img {
  display: block;
  width: 100%;
}

.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .desc_ {
  display: block;
  padding: 0;
}

/* 商品名 */
.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .desc_ .name_ {
  margin: 10px 0 0;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #000;
  text-decoration: none;
}

/* 値段 */
.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .desc_ > .price_box .price_ {
  margin: 10px 0 0;
  font-size: 1.6rem;
  text-align: right;
  color: #000;
}

.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .desc_ > .price_box .price_::after {
  content: '(税込)';
  font-size: 1.4rem;
  color: #000;
}

/* コメント文 */
.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .desc_ .small_ {
  display: none;
}

/* アイコン */
.event_ .goods_ > ul.goods_p_.goods_list_wrapper_ .desc_ > .icon_ {
  display: none;
}

/* 下部回遊エリア
================================================== */

/* コンテンツナビ用ボタン（#content_navi_wrap） */
.wrapper_ #content_navi_wrap {
  position: relative;
  margin: 40px 0 0;
  background: url("/contents/proper/foods/event/tea-sencha/img/navi_bg_top.jpg") left top / 230px auto no-repeat,
  url("/contents/proper/foods/event/tea-sencha/img/navi_bg_btm.jpg") right bottom / 230px auto no-repeat,
  url("/contents/proper/foods/event/tea-sencha/img/bg.jpg") center center / 230px auto repeat;
  overflow: hidden;
}

.wrapper_ #content_navi_wrap > .inner {
  position: relative;
  z-index: 2;
  padding: 60px 3%;
}

.wrapper_ #content_navi_wrap > .inner ul.btn_list:nth-of-type(1) {
  margin: 0 auto 20px
}

.wrapper_ #content_navi_wrap::before,
.wrapper_ #content_navi_wrap::after {
  content: '';
  position: absolute;
  width: 80px;
  height: auto;
}

/* 葉っぱ */
.wrapper_ #content_navi_wrap::before {
  bottom: 0;
  left: 0;
  aspect-ratio: 260 / 315;
  background: url("/contents/proper/foods/event/tea-sencha/img/navi_icon01.png") center center / contain no-repeat;
}

/* 茶器 */
.wrapper_ #content_navi_wrap::after {
  right: 8%;
  bottom: 0;
  aspect-ratio: 300 / 184;
  background: url("/contents/proper/foods/event/tea-sencha/img/navi_icon02.png") center center / contain no-repeat;
}