@charset 'utf-8';
/*
 * name:top.css
 * author:nulo lab

/* common
------------------------------------------------ */
#contents { padding: 40px 0 100px; }
.sectionBlock:not(:last-child) { margin-bottom: 100px; }

@media screen and (max-width: 768px) {
	#contents { padding: 20px 0 60px; }
	.sectionBlock:not(:last-child) { margin-bottom: 60px; }
}

/* visual
------------------------------------------------ */
#visual { position: relative; width: 100%; opacity: 0; }
.visual-frame { position: relative; padding-bottom: 600px; width: 100%; height: 0; overflow: hidden; }
.visual-move { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.visual-item { position: relative; width: 100%; height: 100%; }
.visual-item::after { content: ''; position: absolute; top: 0; left: 0; transition: opacity 0.4s ease; width: 100%; height: 100%; background-color: rgba(255,255,255,0.6); z-index: 2; }
.visual-item > .cover { display: block; position: relative; width: 100%; height: 100%; z-index: 1; }
.visual-item.active::after { pointer-events: none; opacity: 0; }
.visual-item picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.visual-direct { position: absolute; top: 50%; margin-top: -21px; width: 22px; height: 42px; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.visual-direct::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }
.visual-direct-prev { left: -44px; }
.visual-direct-prev::after { background-image: url(../../img/share/slide1_prev.svg); }
.visual-direct-next { right: -44px; }
.visual-direct-next::after { background-image: url(../../img/share/slide1_next.svg); }
.visual-dots { display: flex; justify-content: center; position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; margin-top: 25px; }
.visual-dots > a { display: block; position: relative; margin: 0 5px; width: 14px; height: 14px; background-color: #D0D0D0; border-radius: 50%; text-indent: -9999px; white-space: nowrap; color: #000; overflow: hidden; }
.visual-dots > a.active { background-color: #6F0101; color: #fff; }

@media screen and (min-width: 1320px) {
	.visual-direct-prev { left: 50%; margin-left: -643px; }
	.visual-direct-next { right: 50%; margin-right: -643px; }
}

@media screen and (min-width: 769px) and (max-width: 1320px) {
	.visual-direct-prev { left: 10px; }
	.visual-direct-next { right: 10px; }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
	.visual-frame { padding-bottom: 50%; }
}

@media screen and (max-width: 1200px) {
	#visual.no-slide .visual-move { margin-left: 0 !important; width: 100% !important; }
	#visual.no-slide .visual-item { width: 100% !important; }
}

@media screen and (max-width: 768px) {
	.visual-frame { padding-bottom: 96%; }
	.visual-direct { margin-top: -11px; width: 12px; height: 22px; }
	.visual-direct-prev { left: 3px; }
	.visual-direct-next { right: 3px; }
}

/* collection
------------------------------------------------ */
#collection { position: relative; }
.collectionBlock + .collectionBlock { margin-top: 100px; }
.collectionBlock.no-padding { margin-bottom: 40px; }
.collectionBlock--banner > a { display: block; padding-bottom: 25%; width: 100%; height: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.collectionBlock--lists { margin-top: 40px; }

@media screen and (max-width: 768px) {
	.collectionBlock + .collectionBlock { margin-top: 60px; }
	.collectionBlock.no-padding { margin-bottom: 25px; }
	.collectionBlock--banner { margin: 0 -20px; width: calc(100% + 40px); }
	.collectionBlock--lists { margin-top: 20px; }
}

/* bestsellers
------------------------------------------------ */
#bestsellers { position: relative; }

/* shopCategory
------------------------------------------------ */
#shopCategory { position: relative; padding: 40px 0; background-color: #F5F5F5; }
.shopCategory-links-item > a { display: block; position: relative; width: 100%; background-color: #fff; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.16); color: #070606; }
.shopCategory-links-pic { position: relative; padding-bottom: 100%; width: 100%; height: 0; overflow: hidden; }
.shopCategory-links-pic > img { position: absolute; top: 0; left: 0; }
.shopCategory-links-textTitle { padding: 20px 0; text-align: center; font-family: serif; font-size: 18px; font-size: 1.8rem; line-height: 1.2; background-color: #fff; color: #070606; }
.shopCategoryBlock--focus .shopCategory-links-pic { padding-bottom: 48.275862069%; }
.shopCategoryBlock--focus .shopCategory-links-textTitle { padding: 18px 0; font-size: 20px; font-size: 2rem; }
.shopCategoryBlock--focus + .slide-1 { margin-top: 40px; }

@media screen and (min-width: 769px) {
	.shopCategoryBlock--focus .shopCategory-links { display: flex; flex-wrap: wrap; }
	.shopCategoryBlock--focus .shopCategory-links-item { margin: 40px 3.3333333334% 0 0; width: 48.3333333333%; }
	.shopCategoryBlock--focus .shopCategory-links-item:nth-of-type(-n+2) { margin-top: 0; }
	.shopCategoryBlock--focus .shopCategory-links-item:nth-of-type(2n) { margin-right: 0; }
	.shopCategoryBlock .slide-1-frame { padding-bottom: 4px; overflow: visible; }
	.shopCategoryBlock .slide-1-move { flex-wrap: wrap; transition: none !important; transform: none !important; margin: 0 !important; width: auto !important; }
	.shopCategoryBlock .slide-1-item { display: none !important; }
	.shopCategoryBlock .slide-1-item.origin { display: block !important; margin: 2.22222222227% 2.22222222227% 0 0 !important; width: 23.3333333333% !important; }
	.shopCategoryBlock .slide-1-item.origin:nth-of-type(-n+4) { margin-top: 0 !important; }
	.shopCategoryBlock .slide-1-item.origin:nth-of-type(4n) { margin-right: 0 !important; }
	.shopCategoryBlock .slide-1-dots { display: none; }
}

@media screen and (max-width: 768px) {
	#shopCategory { margin-bottom: 20px; }
	.shopCategory-links-textTitle { padding: 12px 0; font-size: 12px; font-size: 1.2rem; }
	.shopCategoryBlock--focus .shopCategory-links-item:not(:first-child) { margin-top: 20px; }
	.shopCategoryBlock--focus .shopCategory-links-textTitle { padding: 11px 0; font-size: 14px; font-size: 1.4rem; }
	.shopCategoryBlock--focus + .slide-1 { margin-top: 20px; }
	.shopCategoryBlock .slide-1-frame { margin-left: -6px; padding: 4px 2px 0; width: calc(100% + 4px); }
	.shopCategoryBlock .slide-1-item { padding: 4px; }
}

/* about
------------------------------------------------ */
.about__pic,
.about__text { display: inline-block; vertical-align: middle; }
.about__pic { width: calc( 100% - 610px ); height: 590px; background: url(../../img/top/about_pic.jpg) no-repeat top center; background-size: cover; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.about__text { width: 570px; margin-left: 40px; }
.about__textTitle { font-family: 'Playfair-Regular'; font-size: 40px; font-size: 4rem; color: #070606; letter-spacing: 0.15em; line-height: 1.32; font-weight: normal; margin-bottom: 20px; }
.about__textCmn { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; line-height: 2.25; color: #4B4B4B; }
.about__textMore { font-size: 12px; font-size: 1.2rem; letter-spacing: 0.1em; display: block; text-align: center; width: 180px; line-height: 50px; border: 1px solid #4B4B4B; padding: 3px; margin-top: 90px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.about__textMore a { display: block; color: #fff; background: #4B4B4B; }

@media screen and (max-width: 768px) {
	.about__pic,
	.about__text { display: block; }
	.about__pic { width: 100%; height: 280px; background: url(../../img/top/about_pic_sp.jpg) no-repeat center center; background-size: cover; margin-bottom: 18px; }
	.about__text { width: 100%; margin-left: 0px; }
	.about__textTitle { font-size: 20px; font-size: 2rem; margin-bottom: 15px; }
	.about__textCmn { font-size: 13px; font-size: 1.3rem; line-height: 1.76; }
	.about__textMore { width: 200px; line-height: 53px; margin: 30px auto 0; }
}

/* wagashi
------------------------------------------------ */
.wagashi__pic,
.wagashi__text { display: inline-block; vertical-align: middle; }
.wagashi__pic { width: calc( 100% - 610px ); height: 590px; background: url(../../img/top/wagashi_pic.jpg) no-repeat top center; background-size: cover; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.wagashi__text { width: 570px; margin-right: 40px; }
.wagashi__textTitle { font-family: 'Playfair-Regular'; font-size: 40px; font-size: 4rem; color: #070606; letter-spacing: 0.15em; line-height: 1.32; font-weight: normal; margin-bottom: 20px; }
.wagashi__textCmn { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; line-height: 2.25; color: #4B4B4B; }
.wagashi__textMore { font-size: 12px; font-size: 1.2rem; letter-spacing: 0.1em; display: block; text-align: center; width: 180px; line-height: 50px; border: 1px solid #4B4B4B; padding: 3px; margin-top: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.wagashi__textMore a { display: block; color: #fff; background: #4B4B4B; }

@media screen and (max-width: 768px) {
	#wagashi { display: flex; flex-direction: column-reverse; }
	.wagashi__pic,
	.wagashi__text { display: block; }
	.wagashi__pic { width: 100%; height: 280px; background: url(../../img/top/wagashi_pic_sp.jpg) no-repeat center center; background-size: cover; margin-bottom: 18px; }
	.wagashi__text { width: 100%; margin-left: 0px; }
	.wagashi__textTitle { font-size: 20px; font-size: 2rem; margin-bottom: 15px; }
	.wagashi__textCmn { font-size: 13px; font-size: 1.3rem; line-height: 1.76; }
	.wagashi__textMore { width: 200px; line-height: 53px; margin: 30px auto 0; }
}

/* location
------------------------------------------------ */
.location__pic,
.location__text { display: inline-block; vertical-align: middle; }
.location__pic { width: calc( 100% - 540px ); height: 440px; background: url(../../img/location/usa_01-202504.jpg) no-repeat top center; background-size: cover; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.location__text { width: 500px; margin-left: 40px; }
.location__textTitle { font-family: 'Playfair-Regular'; font-size: 40px; font-size: 4rem; color: #070606; letter-spacing: 0.15em; line-height: 1.32; font-weight: normal; margin-bottom: 20px; }
.location__textCmn { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; line-height: 2.25; color: #4B4B4B; }
.location__textMore { font-size: 12px; font-size: 1.2rem; letter-spacing: 0.1em; display: block; text-align: center; width: 180px; line-height: 50px; border: 1px solid #4B4B4B; padding: 3px; margin-top: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.location__textMore a { display: block; color: #fff; background: #4B4B4B; }

@media screen and (max-width: 768px) {
	.location__pic,
	.location__text { display: block; }
	.location__pic { width: 100%; height: 280px; background: url(../../img/location/usa_01-202504.jpg) no-repeat center center; background-size: cover; margin-bottom: 18px; }
	.location__text { width: 100%; margin-left: 0px; }
	.location__textTitle { font-size: 20px; font-size: 2rem; margin-bottom: 15px; }
	.location__textCmn { font-size: 13px; font-size: 1.3rem; line-height: 1.76; }
	.location__textMore { width: 200px; line-height: 53px; margin: 30px auto 0; }
}

/* instagram
------------------------------------------------ */
#top-instagram { position: relative; margin-top: 100px; }
.top-instagram-title { margin-bottom: 40px; text-align: center; font-family: 'Playfair-Regular'; font-size: 26px; font-size: 2.6rem; }
.top-instagram-title > a { display: inline-block; position: relative; padding-left: 60px; vertical-align: top; color: #070606; }
.top-instagram-title > a::before { content: ''; position: absolute; top: 4px; left: 0; width: 40px; height: 40px; background: url(../../img/share/sns_instagram_color.png) no-repeat center center; background-size: 100% 100%; }
.top-instagram-lists { display: flex; flex-wrap: wrap; }
.top-instagram-lists > li > a { display: block; position: relative; padding-bottom: 100%; width: 100%; height: 0; overflow: hidden; }
.top-instagram-lists > li > a > img { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; max-width: inherit; object-fit: cover; font-family: 'object-fit: cover;'; }
.top-instagram-textMore { font-size: 1.2rem; letter-spacing: 0.1em; display: block; text-align: center; width: 180px; line-height: 50px; border: 1px solid #4B4B4B; padding: 3px; margin: 50px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
.top-instagram-textMore > a { display: block; color: #fff; background: #4B4B4B; }

@media screen and (min-width: 769px) {
	.top-instagram-lists > li { margin: 4% 4% 0 0; width: 22%; }
	.top-instagram-lists > li:nth-of-type(-n+4) { margin-top: 0; }
	.top-instagram-lists > li:nth-of-type(4n) { margin-right: 0; }
	.top-instagram-lists > li:nth-of-type(n+9) { display: none; }
}

@media screen and (max-width: 768px) {
	.top-instagram-title { margin-bottom: 20px; font-size: 20px; font-size: 2rem; }
	.top-instagram-title > a { padding-left: 50px; }
	.top-instagram-title > a::before { top: 3px; width: 30px; height: 30px; }
	.top-instagram-lists > li { margin: 2.98507462685% 2.98507462685% 0 0; width: 31.3432835821%; }
	.top-instagram-lists > li:nth-of-type(-n+3) { margin-top: 0; }
	.top-instagram-lists > li:nth-of-type(3n) { margin-right: 0; }
	.top-instagram-textMore { width: 200px; line-height: 53px; margin: 30px auto 0; }
}