@charset 'utf-8';

/* common
------------------------------------------------ */
#footer { margin-top: 0; }

@media screen and (min-width: 769px) {
	#footer { margin-top: 0; }
}

/* visual
------------------------------------------------ */
.top-visual { position: relative; padding-bottom: 40px; background: #fff; z-index: 5; }
.top-visual__links { position: absolute; top: 48px; left: 182px; }
.top-visual__links--item { font-family: 'Nunito', sans-serif; font-size: 1.2rem; font-weight: 300; line-height: 6.25; }
.top-visual__links--item > a { display: inline-block; position: relative; text-decoration: none; vertical-align: top; letter-spacing: .25em; }
.top-visual__links--item > a.has-child { min-width: 76px; }
.top-visual__links--item > a.has-child::before,
.top-visual__links--item > a.has-child::after { content: ''; position: absolute; top: 50%; right: 0; width: 7px; height: 1px; background: #000; }
.top-visual__links--item > a.has-child::before { transition: ease 0.4s; transform: rotate(90deg); }
.top-visual__links--item > a.has-child.active::before { transform: rotate(0); }
.top-visual__links__sub { display: none; position: relative; padding-left: 35px; }
.top-visual__links__sub--item { font-size: 1.1rem; line-height: 4.54545454545; }
.top-visual__links__sub--item > a { display: inline-block; text-decoration: none; vertical-align: top; letter-spacing: .25em; }
.top-visual-child { display: none; }
.top-visual-categories { padding: 0 0 20px 40px; }
.top-visual-categories--item { line-height: 1.6; }
.top-visual-categories--item:not(:first-child) { margin-top: 31px; }
.top-visual-categories--item > a { display: inline-block; position: relative; text-decoration: none; vertical-align: top; }
.top-visual-categories--photo { position: absolute; top: 50%; left: -6px; transform: translateY(-50%); margin-top: -1px; width: 60px; opacity: 0; }
.top-visual-categories--name { padding-left: 66px; font-family: 'Nunito', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; font-size: 1.1rem; font-weight: 300; letter-spacing: .25em; line-height: 1.2; }
.device-click .top-visual-categories--photo { transition: ease 1s; }
.device-click .top-visual-categories--item > a:hover { opacity: 1; }
.device-click .top-visual-categories--item > a:hover .top-visual-categories--photo { opacity: 1; }
.top-visual-colors { padding: 0 0 20px 40px; }
.top-visual-colors--item { line-height: 1.6; }
.top-visual-colors--item:not(:first-child) { margin-top: 32px; }
.top-visual-colors--item > a { display: inline-block; position: relative; text-decoration: none; vertical-align: top; }
.top-visual-colors--icon { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 12px; height: 12px; }
.top-visual-colors--name { padding-left: 26px; font-family: 'Nunito', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; font-size: 1.1rem; font-weight: 300; letter-spacing: .25em; line-height: 1.2; }
.top-visual__slide { position: relative; margin-left: auto; width: 80%; }
.top-visual__slide__frame { position: relative; padding-bottom: 143.75%; width: 100%; overflow: hidden; }
.top-visual__slide__move { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual__slide--item { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.top-visual__slide--item.active { z-index: 2; }
.top-visual__slide__bullets { position: absolute; bottom: 15px; right: 10px; width: 8px; z-index: 2; }
.top-visual__slide__bullets a { display: block; margin-top: 12px; width: 100%; height: 8px; background: #fff; border: solid #000 1px; border-radius: 50%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.top-visual__slide__bullets a:first-child { margin-top: 0; }
.top-visual__slide__bullets a.active { background: #000; }
.top-visual--scroll { display: none; position: fixed; bottom: 20px; left: 20px; transform-origin: left top; transform: translate(25px,-138px) rotate(90deg); font-family: 'Nunito', sans-serif; font-size: 1rem; line-height: 1.2; }
.top-visual--scroll:after { content: ''; position: absolute; top: 50%; right: -115px; margin-top: -1px; width: 100px; height: 1px; background: #010101; }

@media screen and (max-width: 768px) {
	.top-visual__links { display: none; }
}

@media screen and (min-width: 769px) {
	.top-visual { padding-bottom: 0; }
	.top-visual__slide { margin-left: auto; width: 45.7142857143%; }
	.top-visual__slide__bullets { bottom: 28px; right: 22px; }
	.top-visual--scroll { left: 50%; transform: translate(-3px,-128px) rotate(90deg); }
	.top-visual--scroll:after { right: -98px; width: 80px; }
}

/* item
------------------------------------------------ */
.top-item { position: relative; padding-top: 55px; background: #fff; z-index: 2; }
.top-item .btn--1 { margin-top: 40px; }

@media screen and (min-width: 769px) {
	.top-item { padding-top: 190px; }
	.top-item .title--1 { margin-bottom: 42px; }
	.top-item .btn--1 { margin-top: 76px; }
}

/* color
------------------------------------------------ */
.top-color { position: relative; padding-top: 98px; background: #fff; z-index: 3; }
.top-color .title--1 { margin-bottom: 50px; }

@media screen and (min-width: 769px) {
	.top-color { padding-top: 190px; }
	.top-color .title--1 { margin-bottom: 110px; }
}

/* pickup
------------------------------------------------ */
.top-pickup { position: relative; padding: 100px 20px; background: #fff; z-index: 2; }
.top-pickup .title--1 { margin-bottom: 45px; }
.top-pickup .btn--1 { margin-top: 34px; }
.p-recommend-pickup .p-custom-style-recommend .fr3-item { overflow: hidden; }
.p-recommend-pickup .p-custom-style-recommend .fr3-productListStatic{ counter-reset: rank; }
.p-recommend-pickup .p-custom-style-recommend .fr3-productListStatic .fr3-item::before{content: counter(rank)"."; counter-increment: rank; position: absolute; left: 0; top: 0; border-radius: 50%; font-family: 'Nunito', sans-serif; font-style: italic; font-weight: 300; text-align: center; line-height: 24px; font-size: 2rem; color: #1B1B1B; z-index: 2;}
.p-recommend-pickup .p-custom-style-recommend .fr3-productListStatic .fr3-item::after { content: ''; position: absolute; top: -40px; left: -40px; transform: rotate(45deg); width: 80px; height: 80px; background-color: #FFFFFF; z-index: 1; }
.p-recommend-pickup .p-custom-style-recommend.flywheel-recommend__frame{ --grid-repeat: 2 !important; }
.p-recommend-pickup .p-custom-style-recommend.flywheel-recommend__frame.-row1-sp .fr3-item:nth-child(4) { display: block; }
.p-recommend-pickup .p-custom-style-recommend.flywheel-recommend__frame.-row1-sp .fr3-item:nth-child(n + 5){ display: none; }
#fs_ProductDetails .p-custom-style-recommend.flywheel-recommend__frame.-row1-sp .fr3-item:nth-child(n + 5) { display: none !important; }
.p-recommend-pickup .p-custom-style-recommend .fr3-item__productName{ font-weight: 400; }
@media screen and (min-width: 769px) {
	.top-pickup { padding: 200px 20px; }
	.top-pickup .title--1 { margin-bottom: 95px; }
	.top-pickup .btn--1 { margin-top: 72px; }
	.p-recommend-pickup .p-custom-style-recommend.flywheel-recommend__frame { --grid-repeat: 4 !important; }
    .lists-ranking-photo::after { top: -30px; left: -30px; width: 60px; height: 60px; }
}

/* ranking
------------------------------------------------ */
.top-ranking { position: relative; padding: 100px 0; background: #fff; z-index: 2; }
.top-ranking .title--1 { margin-bottom: 45px; }
.top-ranking .btn--1 { margin-top: 34px; }

@media screen and (min-width: 769px) {
	.top-ranking { padding: 190px 0 200px; }
	.top-ranking .title--1 { margin-bottom: 95px; }
	.top-ranking .btn--1 { margin-top: 72px; }
}


/* product
------------------------------------------------ */
.top-product { position: relative; padding: 55px 0 100px; background: #fff; z-index: 2; }
.top-product__slide { position: relative; }
.top-product__slide__frame { position: relative; width: 100%; overflow: hidden; }
.top-product__slide__move { position: relative; }
.top-product__slide--item { float: left; }
.top-product__slide--item > a { display: block; }
.top-product__slide__bullets { position: absolute; bottom: 15px; right: 10px; width: 8px; z-index: 2; }
.top-product__slide__bullets a { display: block; margin-top: 12px; width: 100%; height: 8px; background: #fff; border: solid #000 1px; border-radius: 50%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.top-product__slide__bullets a:first-child { margin-top: 0; }
.top-product__slide__bullets a.active { background: #000; }

@media screen and (min-width: 769px) {
	.top-product { padding: 190px 0 200px; }
	.top-product .title--1 { margin-bottom: 90px; }
	.top-product__slide__bullets { bottom: 2px; right: -25px; }
}

@media screen and (max-width: 1280px) and (min-width: 769px) {
	.top-product__slide__bullets { bottom: 20px; right: 20px; }
}

/* library
------------------------------------------------ */
.top-library { position: relative; padding-bottom: 100px; background: #fff; z-index: 2; }
.top-library__posts { position: relative; }
.top-library__posts:after { content: ''; position: absolute; top: 50px; right: 0; width: 85.0666666667%; height: calc(100% - 160px); background: #f4f4f4; z-index: -1; }
.top-library__lists--item { margin-top: 42px; }
.top-library__lists--item:first-child { margin-top: 0; }
.top-library__lists--item > a { display: block; position: relative; text-decoration: none; }
.top-library__lists--photo { position: relative; }
.top-library__lists--photo img { width: 100%; max-width: inherit; }
.top-library__lists__info { position: relative; margin-top: 16px; text-align: right; }
.top-library__lists--date { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 300; }
.top-library__lists--title { margin-top: 5px; word-break: break-word; font-family: 'Nunito', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; font-size: 1.2rem; font-weight: 400; line-height: 1.875; }
.top-library .btn--1 { margin-top: 52px; }

.top-library__posts.library-len-1:after { display: none; }

@media screen and (max-width: 768px) {
	.top-library__posts--focus { width: 85.0666666667%; }
	.top-library__posts--focus .top-library__lists__info { margin-left: 17.5548589342%; }
	.top-library__posts--other { margin: 42px 20px 0 auto; width: 65.0666666667%; }
}

@media screen and (min-width: 769px) {
	.top-library { padding-bottom: 200px; }
	.top-library .title--1 { margin-bottom: 90px; }
	.top-library__posts:after { top: 80px; width: 87.1428571429%; height: calc(100% - 240px); }
	.top-library__lists__info { margin-top: 20px; }
	.top-library__lists--date { font-size: 1.1rem; }
	.top-library__lists--title { margin-top: 8px; font-size: 1.4rem; line-height: 1.85714285714; }
	.top-library__posts--focus { position: absolute; top: 0; left: 0; width: 52.8571428571%; z-index: 2; }
	.library-len-1 .top-library__posts--focus { position: relative; top: auto; left: auto; }
	.top-library__posts--other { padding-top: 150px; }
	.top-library__posts--other .top-library__lists { margin: 0 60px 0 auto; width: 33.5%; }
	.top-library .btn--1 { margin-top: 90px; }
}

/* popupstore
------------------------------------------------ */
.top-popupstore { position: relative; padding-bottom: 100px; background: #fff; z-index: 2; }
.top-popupstore__posts { position: relative; }
.top-popupstore__lists { margin: 0 auto; }
.top-popupstore__lists--item > a { display: block; position: relative; text-decoration: none; }
.top-popupstore__lists--photo { position: relative; }
.top-popupstore__lists--photo img { width: 100%; max-width: inherit; }
.top-popupstore__lists__info { position: relative; margin-top: 16px; text-align: right; }
.top-popupstore__lists--date { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 300; }
.top-popupstore__lists--title { margin-top: 5px; word-break: break-word; font-family: 'Nunito', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; font-size: 1.2rem; font-weight: 400; line-height: 1.875; }
.top-popupstore .btn--1 { margin-top: 52px; }

@media screen and (max-width: 768px) {
	.top-popupstore__lists { width: calc(100% - 85px); }
	.top-popupstore__lists--item { margin-top: 42px; }
	.top-popupstore__lists--item:first-child { margin-top: 0; }
}

@media screen and (min-width: 769px) {
	.top-popupstore { padding-bottom: 200px; }
	.top-popupstore .title--1 { margin-bottom: 90px; }
	.top-popupstore__lists { display: flex; flex-wrap: wrap; padding: 0 20px; max-width: 1040px; }
	.top-popupstore__lists--item { margin: 42px 10% 0 0; width: 45%; }
	.top-popupstore__lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-popupstore__lists--item:nth-of-type(2n) { margin-right: 0; }
	.top-popupstore__lists__info { margin-top: 20px; }
	.top-popupstore__lists--date { font-size: 1.1rem; }
	.top-popupstore__lists--title { margin-top: 8px; font-size: 1.4rem; line-height: 1.85714285714; }
	.top-popupstore .btn--1 { margin-top: 90px; }
}

/* parallax
------------------------------------------------ */
.top-parallax { position: relative; padding-bottom: 40%; width: 100%; height: 0; overflow: hidden; }
.top-parallax:after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: -1; opacity: 0; }
.top-parallax.active:after { opacity: 1; }

@media screen and (max-width: 768px) {
	.top-parallax:after { background-image: url(../../img/top/parallax_bg.jpg?v=1); }
}

@media screen and (min-width: 769px) {
	.top-parallax { padding-bottom: 0; height: 380px; }
	.top-parallax:after { background-image: url(../../img/top/parallax_bg-pc.jpg?v=1); }
}