@charset "UTF-8";

/* sp
----------------------------------------------- */

.top-title {margin-bottom: 10vw;}
.top-title .en { font-size: 6.32vw; font-family: goldenbook; letter-spacing: 0.4vw; display: block; }
.top-title .jp { margin-top: 2.5vw; font-size: 3.42vw; display: block; }

.top-more { padding: 2.5vw 8vw 2.5vw 0.5vw; font-size: 3.16vw; font-family: futura-pt; letter-spacing: 0.4vw; background: url(../images/arrow01.png) no-repeat center right 0.5vw; background-size: 2vw; border-bottom: 1px solid #b5b4b3; display: table; }
.top-about {padding: 20vw 0;}
.top-about .parallax-box {margin-bottom: 5vw;}
.top-about-content { width: 90vw; margin: auto; }
.top-about-image { width: 100%; }
.top-about-comment {margin-bottom: 6vw;}
.top-about-comment p { font-size: 3.42vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }

.top-products { padding-bottom: 14vw; position: relative; }
.top-products .deco { position: absolute; top: -52vw; left: -12vw; opacity: 0.4; z-index: -1; }
.top-products .deco img { width: 50%; }
.top-products-head { width: 90vw; margin: 0 auto 6vw; }
.top-products-head-comment {margin-bottom: 6vw;font-size: 3.42vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;}

.top-products-items { width: 90vw; margin: auto; counter-reset: number 0; }
.top-products-items li { width: 100%; margin-bottom: 14vw; }
.top-products-item-image { width: 100%; }
.top-products-item-text { margin-top: -11.5vw; z-index: 1; position: relative; }
.top-products-item-point { margin-bottom: 4vw; }
.top-products-item-point .title { padding: 1.5vw 1.5vw 1vw; margin: 0 0 2vw auto; font-size: 3.29vw; font-family: var(--mincho); background: #fff; display: table; }
.top-products-item-point .green { margin: 0 0.5vw; color: #2d5d2c; font-size: 3.95vw; font-family: var(--mincho); font-weight: 600; display: inline-block; }
.top-products-item-point .red { margin: 0 0.5vw; color: #b94c36; font-size: 3.95vw; font-family: var(--mincho); font-weight: 600; display: inline-block; }
.top-products-item-point .gray { margin: 0 0.5vw; color: #7a9191; font-size: 3.95vw; font-family: var(--mincho); font-weight: 600; display: inline-block; }
.top-products-item-inner { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-end; align-items: flex-end; }
.top-products-item-inner:before { content: "" counter(number,decimal-leading-zero) "."; counter-increment: number 1; margin: 0 2vw -1.5vw 0; color: #a5a5a5; font-size: 9.47vw; font-family: goldenbook; }
.top-products-item-title { margin-right: auto; }
.top-products-item-title .jp { margin-bottom: 0.5vw; font-size: 3.68vw; font-family: var(--mincho); font-weight: 600; display: block; }
.top-products-item-title .en { color: #a5a5a5; font-size: 2.63vw; font-family: futura-pt; letter-spacing: 0.2vw; display: block; }

.top-howto {padding-bottom: 18vw;z-index: 1;position: relative;}
.top-howto-image .parallax-box { width: 90vw; }
.top-howto-image .parallax-box { margin: 0 auto 14vw 0; }
.top-howto-image img { width: 100%; }
.top-howto-text { width: 90vw; margin: auto; }
.top-howto-subtitle { padding-bottom: 5vw; margin-bottom: 5vw; font-size: 3.95vw; font-family: var(--mincho); font-weight: 600; line-height: 1.4; position: relative; }
.top-howto-subtitle:after { content: ''; width: 15vw; height: 1px; background: #b5b4b3; position: absolute; bottom: 0; left: 0; }
.top-howto-comment {margin-bottom: 6vw;}
.top-howto-comment p { font-size: 3.42vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-howto .deco {width: 100%;z-index: -1;pointer-events: none;position: absolute;right: -52vw;bottom: -14vw;opacity: 0.4;}
.top-howto .deco img {width: 60%;}

.top-ticker-items { width: 100%; }
.top-ticker-item { max-width: 150vw; margin-right: 4vw; }
.top-ticker-item-title { font-size: 15.79vw; font-family: goldenbook; letter-spacing: 0.6vw; opacity: 0.1; }

.top-shoplist {padding: 20vw 0;}
.top-shoplist-head { width: 90vw; margin: 0 auto 6vw; }
.top-shoplist-more { margin-left: auto; }
.top-shoplist-container { padding-bottom: 8vw; z-index: 1; position: relative; }
.top-shoplist-container .scroll { width: 90vw; height: 1px; background: #aeadad; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; bottom: 0; left: 5vw; }
.top-shoplist-container .swiper-scrollbar-drag { height: 1px; background: #3e3e44; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; top: 0; }
.top-shoplist-items { width: 100%; margin: auto; }
.top-shoplist-item { width: 90vw; margin: 0 5vw; }
.top-shoplist-item-image { width: 100%; margin-bottom: 4vw; }
.top-shoplist-item-title { position: relative; }
.top-shoplist-item-title:after { content: ''; width: 6.5vw; height: 6.5vw; background: url(../images/arrow01.png) no-repeat center; background-size: 2vw; border: 0.5px solid #6b6b6b; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; right: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-shoplist-item-title .jp { margin-bottom: 2vw; font-size: 3.95vw; display: block; }
.top-shoplist-item-title .en { color: #a5a5a5; font-size: 3.16vw; font-family: futura-pt; letter-spacing: 0.4vw; display: block; }

.top-contact { background: url(../images/top-contact-bg.jpg) no-repeat top center; background-size: cover; }
.top-contact-items {width: 80vw;padding: 14vw 0;margin: auto;}
.top-contact-items li { padding: 6vw 0; }
.top-contact-item-title { padding-top: 10vw; margin-bottom: 10vw; text-align: center; position: relative; }
.top-contact-item-title.documents:before { background: #35343a url(../images/icon-documents.png) no-repeat center; background-size: 2.8vw; }
.top-contact-item-title.mail:before { content: '\e910'; font-family: 'icon'; }
.top-contact-item-title:before { content: ''; width: 7vw; height: 7vw; color: #fff; font-size: 3.29vw; background: #35343a; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 0; left: 50%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-contact-item-title .jp { margin-bottom: 1.5vw; font-size: 3.95vw; font-family: var(--mincho); font-weight: 600; display: block; }
.top-contact-item-title .en { font-size: 3.42vw; font-family: futura-pt; letter-spacing: 0.4vw; display: block; }
.top-contact-item-comment { margin-bottom: 8vw; font-size: 3.42vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-contact-item-more { padding: 4vw 0; margin-top: 1vw; background: url(../images/arrow01.png) no-repeat center right 0.5vw; background-size: 2vw; border-bottom: 1px solid #b5b4b3; }
.top-contact-item-more .jp { margin-bottom: 1.5vw; font-size: 3.68vw; display: block; }
.top-contact-item-more .en { font-size: 3.42vw; font-family: futura-pt; letter-spacing: 0.4vw; display: block; }

/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 
.top-title { margin-bottom: 50px; }
.top-title .en {font-size: 40px;letter-spacing: 2px;}
.top-title .jp { margin-top: 10px; font-size: 15px; }

.top-more { padding: 12px 50px 12px 4px; font-size: 18px; letter-spacing: 2px; background-position: center right 10px; background-size: 12px; transition: all .6s; }
.top-more:hover { background-position: center right; opacity: 1; }

.top-about { width: 90%; max-width: 1200px; margin: 0 auto; padding: 100px 0; }
.top-about .parallax-box { width: 48%; margin-bottom: 0; order: 1; }
.top-about-content { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
.top-about-title { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; order: 0; }
.top-about-title:after { content: ''; height: 0.5px; margin-left: 40px; background: #9d9c9d; flex: 1; }
.top-about-title .en {font-size: 40px;letter-spacing: 4px;}
.top-about-image { width: 100%; margin: 0; order: 3; }
.top-about-text { width: 42%; padding-top: 10px; }
.top-about-comment { margin-bottom: 40px; order: 0; }
.top-about-comment p { font-size: 14px; line-height: 2.2; }

.top-products { width: 90%; max-width: 1200px; margin: 0 auto; padding-bottom: 40px; }
.top-products .deco { top: -280px; left: calc(50% - 720px); }
.top-products-head { width: 90%; margin-bottom: 50px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-products-title { width: 240px; margin-bottom: 25px; }
.top-products-title .en {font-size: 40px;letter-spacing: 4px;}
.top-products-head-comment { width: 740px; margin-bottom: 25px; font-size: 14px; }
.top-about-more { margin-left: auto; }
.top-products-items { width: 90%; }
.top-products-items li { margin-bottom: 60px; }
.top-products-items li .parallax-box { margin-bottom: 30px; }
.top-products-item-text { margin: 0; position: relative; }
.top-products-item-point { margin: 0; z-index: 1; position: absolute; bottom: 95px; right: 25px; }
.top-products-item-point .title { padding: 5px 10px; margin-bottom: 10px; font-size: 18px; }
.top-products-item-point .green, .top-products-item-point .red, .top-products-item-point .gray { margin: 0 4px; font-size: 24px; }
.top-products-item-inner:before { margin: 0 10px -10px 0; font-size: 60px; }
.top-products-item-title .jp { margin-bottom: 5px; font-size: 24px; }
.top-products-item-title .en { font-size: 15px; letter-spacing: 1px; }

.top-howto { padding-bottom: 100px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.top-howto:after { content: ''; width: 460px; height: 540px; z-index: -1; pointer-events: none; position: absolute; top: -370px; right: calc(50% - 840px); bottom: auto; }
.top-howto-image { width: calc(50% - 25px); margin: 0; background: url(../images/top-howto-image-pc.jpg) no-repeat center right; background-size: cover; }
.top-howto-text { width: 46%; padding: 50px 0 50px 80px; margin-left: 0; }
.top-howto-subtitle { padding-bottom: 30px; margin-bottom: 30px; font-size: 22px; }
.top-howto-subtitle:after { width: 80px; }
.top-howto-comment { margin-bottom: 50px; }
.top-howto-comment p { font-size: 15px; line-height: 2.2; }
.top-howto .deco { left : calc(50% - -340px); bottom: -80px; }
.top-howto .deco img {width: 350px;}

.top-ticker-item { max-width: 120vw; margin-right: 60px; }
.top-ticker-item-title { font-size: 130px; letter-spacing: 6px; }

.top-shoplist { padding: 100px 0; }
.top-shoplist-content { width: 1200px; padding-left: 325px; margin: auto; position: relative; }
.top-shoplist-head { width: 325px; padding-top: 10px; margin: 0; position: absolute; top: 0; left: 0; }
.top-shoplist-more { margin: 0; transition: all .6s; }
.top-shoplist-container { width: calc(50vw + 270px); padding-bottom: 50px; overflow: hidden; }
.top-shoplist-container .scroll { width: 840px; left: 0; }
.top-shoplist-items { width: calc(50vw + 270px); margin: 0; }
.top-shoplist-item { width: 430px; margin: 0 70px 0 0; }
.top-shoplist-item a:hover { opacity: 1; }
.top-shoplist-item a:hover .top-shoplist-item-title:after { right: 0; }
.top-shoplist-item-image { margin-bottom: 30px; }
.top-shoplist-item-title:after { width: 32px; height: 32px; background-size: 12px; right: 10px; -moz-transition: all 0.6s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.6s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.6s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.6s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-shoplist-item-title .jp { margin-bottom: 10px; font-size: 24px; }
.top-shoplist-item-title .en { font-size: 15px; letter-spacing: 2px; }

.top-contact { padding: 100px 0; }
.top-contact-items { width: 90%; max-width: 1200px; padding: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.top-contact-items li { width: 50%; padding: 0; margin: 0; }
.top-contact-item-content { width: 360px; margin: auto; }
.top-contact-item-title { padding-top: 60px; margin-bottom: 80px; }
.top-contact-item-title.documents:before { background-size: 15px; }
.top-contact-item-title:before { width: 40px; height: 40px; font-size: 20px; }
.top-contact-item-title .jp { margin-bottom: 15px; font-size: 24px; }
.top-contact-item-title .en { font-size: 15px; letter-spacing: 2px; }
.top-contact-item-comment { margin-bottom: 30px; font-size: 15px; }
.top-contact-item-more { padding: 15px 0; margin-top: 10px; background-position: center right 10px; background-size: 12px; transition: all .6s; }
.top-contact-item-more:hover { background-position: center right; }
.top-contact-item-more:hover:hover { opacity: 1; }
.top-contact-item-more .jp { margin-bottom: 10px; font-size: 18px; }
.top-contact-item-more .en { font-size: 15px; letter-spacing: 2px; }
}

/* retina用
----------------------------------------------- */
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { .top-more { background: url(../images/arrow01@2x.png) no-repeat center right 10px; background-size: 12px; }
.top-howto-image { background: url(../images/top-howto-image-pc@2x.jpg) no-repeat center right; background-size: cover; }
.top-shoplist-item-title:after { background: url(../images/arrow01@2x.png) no-repeat center; background-size: 12px; }
.top-contact { background: url(../images/top-contact-bg@2x.jpg) no-repeat top center; background-size: cover; }
.top-contact-item-title.documents:before { background: #35343a url(../images/icon-documents@2x.png) no-repeat center; background-size: 15px; }
.top-contact-item-more { background: url(../images/arrow01@2x.png) no-repeat center right 10px; background-size: 12px; } }