/* Scss Document */
/*============================================================================
	common
=============================================================================*/
article { padding: 100px 0; }
@media (max-width: 690px) { article { padding: 75px 0; } }

/*============================================================================
	fvArea
=============================================================================*/
#fvArea { width: 100%; position: relative; }
#fvArea .swiper-wrapper { width: 100%; }
#fvArea .swiper-wrapper .swiper-slide { width: 100%; }
#fvArea .swiper-wrapper .swiper-slide picture { width: 100%; display: block; overflow: hidden; position: relative; }
#fvArea .swiper-wrapper .swiper-slide picture::before { content: ''; padding-top: 45.5%; width: 100%; display: block; }
@media (max-width: 1024px) { #fvArea .swiper-wrapper .swiper-slide picture::before { padding-top: 480px; } }
@media (max-width: 690px) { #fvArea .swiper-wrapper .swiper-slide picture::before { padding-top: 90vh; } }
#fvArea .swiper-wrapper .swiper-slide picture source, #fvArea .swiper-wrapper .swiper-slide picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; position: absolute; top: 0; left: 0; z-index: 1; }
#fvArea .swiper-pagination { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; bottom: 50%; }
@media (max-width: 690px) { #fvArea .swiper-pagination { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; bottom: 10px; } }
#fvArea .swiper-pagination-bullet { margin: 5px; background: #E9E9DD; transition: 0.4s; opacity: 1; }
#fvArea .swiper-pagination-bullet-active { opacity: 1; background: transparent; border: 2px solid #E9E9DD; transform: scale(1.2); }
#fvArea #fvCatchBox { margin: auto; width: 200px; height: 420px; position: absolute; top: 0; left: 8.5%; right: auto; bottom: 0; z-index: 100; }
@media (max-width: 1024px) { #fvArea #fvCatchBox { height: 370px; left: 3%; } }
@media (max-width: 690px) { #fvArea #fvCatchBox { left: auto; right: 10px; } }
#fvArea #fvCatchBox p { color: #FFFFFF; font-size: 3.2rem; font-weight: 400; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 0.3em; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8); }
@media (max-width: 1024px) { #fvArea #fvCatchBox p { font-size: 2.8rem; } }
#fvArea #fvCatchBox p span.en { font-size: 1.3rem; font-weight: 300; }
#fvArea #fvCatchBox p [data-ruby]::before { top: 0; }
body.en #fvArea #fvCatchBox { margin: auto; width: 80%; height: 20%; top: 0; left: 5%; right: auto; bottom: 0; }
body.en #fvArea #fvCatchBox p { font-size: 2.4rem; text-align: left; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; }
@media (max-width: 1024px) { body.en #fvArea #fvCatchBox { height: 200px; top: auto; bottom: 5%; }
  body.en #fvArea #fvCatchBox p { font-size: 2.0rem; } }

/*============================================================================
	aboutArea
=============================================================================*/
#aboutArea { color: #FFFFFF; background: url("../img/common/bg_dark.jpg") repeat center center; }
#aboutArea #aboutSlider { margin: 0 auto 65px; }
@media (max-width: 690px) { #aboutArea #aboutSlider { margin: 0 auto 30px; } }
#aboutArea #aboutSlider .swiper-slide { max-width: 1080px; }
@media (max-width: 1024px) { #aboutArea #aboutSlider .swiper-slide { width: 90%; }
  #aboutArea #aboutSlider .swiper-slide.swiper-slide-active { margin-top: 30px; } }
#aboutArea #aboutSlider .swiper-button-prev, #aboutArea #aboutSlider .swiper-button-next { width: 40px; height: 40px; margin-top: -20px; }
@media (max-width: 690px) { #aboutArea #aboutSlider .swiper-button-prev, #aboutArea #aboutSlider .swiper-button-next { width: 20px; height: 20px; margin-top: -10px; } }
#aboutArea #aboutSlider .swiper-button-prev { background: url("../img/index/sliderNav_bk.svg") no-repeat center center; background-size: contain; }
#aboutArea #aboutSlider .swiper-button-prev::after { content: ""; }
#aboutArea #aboutSlider .swiper-button-next { transform: scale(-1, 1); background: url("../img/index/sliderNav_bk.svg") no-repeat center center; background-size: contain; }
#aboutArea #aboutSlider .swiper-button-next::after { content: ""; }
#aboutArea .innerBox p { line-height: 2; letter-spacing: 0.5rem; }
#aboutArea .innerBox p + p { margin-top: 2em; }

/*============================================================================
	productsArea
=============================================================================*/
#productsArea { position: relative; z-index: 0; }
#productsArea .titleBlock { z-index: 10; }
#productsArea h3 { font-size: 3.2rem; font-weight: 400; text-align: center; letter-spacing: 0.3rem; text-indent: 0.3rem; line-height: 1.5; position: relative; z-index: 5; }
@media (max-width: 690px) { #productsArea h3 { font-size: 2.0rem; line-height: 1.8; }
  #productsArea h3 [data-ruby]::before { width: 160%; top: -1em; left: -30%; } }
#productsArea::after { content: ''; margin: auto; width: 50%; height: 400px; background: #F0EFED; display: block; position: absolute; top: 27%; left: 0; bottom: auto; z-index: -1; }
@media (max-width: 1024px) { #productsArea::after { height: 320px; top: 20%; } }
@media (max-width: 690px) { #productsArea::after { height: 215px; background: #F0EFED; background-size: 25.5%; top: 30%; } }
#productsArea ul#productsList { position: relative; z-index: 5; }
#productsArea ul#productsList::before { content: ''; padding-top: 35%; width: 100%; display: block; }
@media (min-width: 1650px) { #productsArea ul#productsList::before { padding-top: 40%; } }
@media (max-width: 690px) { #productsArea ul#productsList::before { padding-top: 45%; } }
#productsArea ul#productsList li { margin: 0 2.4% 0 0; font-weight: 400; letter-spacing: 0.3rem; width: 23.2%; }
#productsArea ul#productsList li:nth-of-type(4) { margin-right: 0; }
#productsArea ul#productsList li:nth-of-type(2n) { margin-top: 80px; }
@media (max-width: 1024px) { #productsArea ul#productsList li { margin: 0 4% 30px 0; width: 48%; }
  #productsArea ul#productsList li:nth-of-type(2n) { margin: 0 0 30px 0; } }
#productsArea ul#productsList li figure { margin: 0 auto 30px; width: 100%; position: relative; }
@media (max-width: 1024px) { #productsArea ul#productsList li figure { margin: 0 auto 15px; } }
#productsArea ul#productsList li figure::before { content: ''; padding-top: 146%; width: 100%; display: block; }
@media (max-width: 1024px) { #productsArea ul#productsList li figure::before { padding-top: 118%; } }
#productsArea ul#productsList li figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; position: absolute; top: 0; left: 0; z-index: 1; }
#productsArea .bgImg { margin: auto; max-width: 1550px; width: 88%; height: auto; position: absolute; top: 170px; left: auto; right: 0; bottom: auto; z-index: 0; }
@media (max-width: 690px) { #productsArea .bgImg { top: 260px; } }
#productsArea .bgImg::before { content: ''; padding-top: 43%; width: 100%; display: block; }
@media (min-width: 1650px) { #productsArea .bgImg::before { padding-top: 40%; } }
@media (max-width: 690px) { #productsArea .bgImg::before { padding-top: 60%; } }
#productsArea .bgImg img { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; position: absolute; top: 0; left: 0; z-index: 1; }

/*============================================================================
	giftArea
=============================================================================*/
#giftArea { background-color: #F0EFED; position: relative; }
#giftArea .mainClm { z-index: 5; }
#giftArea #giftItemList li { margin: 0 2.4% 0 0; width: 23.2%; }
#giftArea #giftItemList li:first-of-type, #giftArea #giftItemList li:last-of-type { margin-right: 0; }
@media (max-width: 690px) { #giftArea #giftItemList li { margin: 0 4% 50px 0; width: 48%; }
  #giftArea #giftItemList li:nth-of-type(3) { margin-right: 0; } }
#giftArea #giftItemList li figure { width: 100%; position: relative; }
#giftArea #giftItemList li figure::before { content: ''; padding-top: 100%; width: 100%; display: block; }
#giftArea #giftItemList li figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; position: absolute; top: 0; left: 0; z-index: 1; }
#giftArea #giftItemList li .itemInfo { margin: 30px 0 0; }
@media (max-width: 690px) { #giftArea #giftItemList li .itemInfo { margin: 10px 0 0; } }
#giftArea #giftItemList li .itemInfo .itemTtl { font-weight: 400; letter-spacing: 0.3rem; }
#giftArea #giftItemList li .itemInfo .fl { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
@media (max-width: 690px) { #giftArea #giftItemList li .itemInfo .fl { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } }
#giftArea #giftItemList li .itemInfo .fl .delivary { font-size: 1.2rem; }
#giftArea #giftItemList li .itemInfo .fl .delivary span { margin-left: 5px; padding: 0 15px; height: 17px; line-height: 17px; text-align: center; border: 1px solid #2D3132; display: inline-block; }
#giftArea #giftItemList li.topItem { margin-bottom: 50px; width: 100%; position: relative; }
#giftArea #giftItemList li.topItem figure::before { padding-top: 41.5%; }
@media (max-width: 690px) { #giftArea #giftItemList li.topItem figure::before { padding-top: 100%; } }
#giftArea #giftItemList li.topItem .itemInfo { position: absolute; top: 0; left: 20px; z-index: 10; }
#giftArea .moreLink { margin: 50px auto 0; width: 180px; }
@media (max-width: 690px) { #giftArea .moreLink { margin: 30px auto 0; } }
#giftArea::after { content: ''; margin: auto; width: 100%; height: 400px; background: url("../img/common/bg_ichimatsu.svg") repeat 0 0; display: block; position: absolute; top: auto; left: 0; bottom: 0; z-index: 1; mix-blend-mode: multiply; }
@media (max-width: 1024px) { #giftArea::after { height: 320px; } }

/*============================================================================
	newsArea
=============================================================================*/
#textNewsList li { display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#textNewsList li date { margin-right: 2em; display: block; }
#textNewsList li a.ctg { margin-right: 2em; padding: 0 5px; font-size: 1.4rem; min-width: 105px; width: auto; height: 18px; line-height: 18px; text-align: center; border: 1px solid #2D3132; display: inline-block; }
#textNewsList li .newsTtl { font-weight: 400; letter-spacing: 0.3rem; }
#textNewsList li + li { margin-top: 20px; }
@media (max-width: 690px) { #textNewsList li date { margin-right: 0; }
  #textNewsList li a.ctg { margin: 0 0 0 auto; }
  #textNewsList li .newsTtl { margin-top: 5px; width: 100%; }
  #textNewsList li + li { margin-top: 30px; } }

#newsArea { color: #FFFFFF; background: url("../img/common/bg_dark.jpg") repeat center center; }
#newsArea #textNewsList li { color: #FFFFFF; }
#newsArea #textNewsList li a.ctg { border: 1px solid #FFFFFF; }
#newsArea #textNewsList li a { color: #FFFFFF; }
#newsArea .moreLink { margin: 50px auto 0; width: 140px; }
@media (max-width: 690px) { #newsArea .moreLink { margin: 30px auto 0; } }

/*============================================================================
	spacerBox
=============================================================================*/
.spacerBox { width: 100%; position: relative; }
.spacerBox::before { content: ''; padding-top: 29.2%; width: 100%; display: block; }
@media (max-width: 690px) { .spacerBox::before { padding-top: 56.25%; } }
.spacerBox img { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; position: absolute; top: 0; left: 0; z-index: 1; }

/*============================================================================
	shopArea
=============================================================================*/
#shopArea { color: #FFFFFF; background: url("../img/common/bg_dark.jpg") repeat center center; }
#shopArea #shopSlider { margin: 0 auto 65px; }
@media (max-width: 690px) { #shopArea #shopSlider { margin: 0 auto 30px; } }
#shopArea #shopSlider .swiper-slide { max-width: 1080px; }
@media (max-width: 1024px) { #shopArea #shopSlider .swiper-slide { width: 90%; }
  #shopArea #shopSlider .swiper-slide.swiper-slide-active { margin-top: 30px; } }
#shopArea #shopSlider .swiper-button-prev, #shopArea #shopSlider .swiper-button-next { width: 23px; height: 23px; margin-top: -11px; }
@media (max-width: 690px) { #shopArea #shopSlider .swiper-button-prev, #shopArea #shopSlider .swiper-button-next { width: 20px; height: 20px; margin-top: -10px; } }
#shopArea #shopSlider .swiper-button-prev { background: url("../img/index/sliderNav_wh.svg") no-repeat center center; background-size: contain; }
#shopArea #shopSlider .swiper-button-prev::after { content: ""; }
#shopArea #shopSlider .swiper-button-next { transform: scale(-1, 1); background: url("../img/index/sliderNav_wh.svg") no-repeat center center; background-size: contain; }
#shopArea #shopSlider .swiper-button-next::after { content: ""; }
#shopArea .innerBox p { line-height: 2; letter-spacing: 0.5rem; }
#shopArea .innerBox p + p { margin-top: 2em; }

/*-------------------------
	online shop
-------------------------*/
#onlineShopArea { background: #F0EFED; padding: 100px 0; }
#onlineShopArea .mainClm { padding-right: calc((100% - 1260px) / 2); box-sizing: border-box; }
@media (max-width: 1024px) { #onlineShopArea .mainClm { padding-right: 5%; } }
@media (max-width: 690px) { #onlineShopArea .mainClm { padding-right: 0; } }
#onlineShopArea .mainClm h3 { font-weight: 500; font-size: 2.8rem; text-align: center; margin-bottom: 50px; }
@media (max-width: 690px) { #onlineShopArea .mainClm h3 { font-size: 2.2rem; } }
@media (max-width: 690px) { #onlineShopArea .mainClm .linkBox { margin: 0 auto; width: 95%; } }
#onlineShopArea .mainClm .linkBox a { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: calc((100% - 80px)/ 3); margin-right: 40px; background: #fff; padding: 30px; box-sizing: border-box; }
#onlineShopArea .mainClm .linkBox a:nth-of-type(3n) { margin-right: 0; }
#onlineShopArea .mainClm .linkBox a:last-of-type { margin-right: 0; }
#onlineShopArea .mainClm .linkBox a:nth-of-type(n + 4) { margin-top: 40px; }
@media (max-width: 1024px) { #onlineShopArea .mainClm .linkBox a { width: calc((100% - 40px)/ 2); }
  #onlineShopArea .mainClm .linkBox a:nth-of-type(3n) { margin-right: 40px; }
  #onlineShopArea .mainClm .linkBox a:nth-of-type(2n) { margin-right: 0; }
  #onlineShopArea .mainClm .linkBox a:nth-of-type(n + 3) { margin-top: 40px; } }
@media (max-width: 690px) { #onlineShopArea .mainClm .linkBox a { width: 100%; margin-right: 0; }
  #onlineShopArea .mainClm .linkBox a:nth-of-type(3n) { margin-right: 0; }
  #onlineShopArea .mainClm .linkBox a:nth-of-type(n + 2) { margin-top: 40px; } }
#onlineShopArea .mainClm .linkBox a figure { margin-bottom: 25px; }
#onlineShopArea .mainClm .linkBox a span { display: block; text-align: center; font-weight: 500; font-size: 2.0rem; }
#onlineShopArea .mainClm .linkBox a.official figure { min-height: 170px; height: 170px; }
#onlineShopArea .mainClm .linkBox a.official figure img { height: 100%; }