/* .copyrightArea */ footer .copyright_area { margin: 150px 0 0;position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end;} footer .copyright_area .txt_action { width: calc(70% - 150px); margin-right: 150px; color: #cdc9c3; font-size: 12px; font-weight: 400; letter-spacing: 0.075em; line-height: 1.8; order: 2; } /*footer .copyright_area .txt_action br { display: none }*/ footer .copyright_area .txt_action br.sp_block { display: none } footer .copyright_area p.txt_copy { padding: 0 0 0 15px; width: 30%; color: #d0c3ba; font-size: 12px; font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.035em; line-height:1.7; position: relative; z-index: 0; order: 1;} footer .copyright_area p.txt_copy span { position: absolute; top: 0; left: 0; font-size: 1.1em;vertical-align: 0;} @media screen and (max-width: 960px) { footer .copyright_area { margin: 60px 0 0; padding-right: 80px; display: block; } footer .copyright_area .txt_action { width: 100%; margin-right: 0; font-size: 12px;line-height: 1.8; position: static; } footer .copyright_area .txt_action br { display: block } footer .copyright_area p.txt_copy {width: 100%; margin: 20px 0 0; } } @media screen and (max-width: 738px) { footer .copyright_area { margin: 35px 0 0; } } @media screen and (max-width: 560px) { footer .copyright_area { position: static; margin: 60px 0 0;} footer .copyright_area .txt_action { font-size: 12px; } footer .copyright_area .txt_action br.sp_block { display: block } footer .copyright_area .txt_action:after { margin: 15px 0;} footer .copyright_area p.txt_copy { margin: 35px 0 0; padding: 0; font-size:12px;} footer .copyright_area p.txt_copy span { position: static;} }@charset "utf-8"; /* --------------------------------------------------------------------------------------------------- 　FONT --------------------------------------------------------------------------------------------------- */ @font-face{font-family:themify;src:url(../font/themify/themify.eot?-fvbane);src:url(../font/themify/themify.eot?#iefix-fvbane) format('embedded-opentype'),url(../font/themify/themify.woff?-fvbane) format('woff'),url(../font/themify/themify.ttf?-fvbane) format('truetype'),url(../font/themify/themify.svg?-fvbane#themify) format('svg');font-weight:400;font-style:normal}[class*=" ti-"],[class^=ti-]{font-family:themify;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ti-arrow-right:before {content: "\e628"}.ti-star:before{content:"\e60a"}.ti-search:before{content:"\e610"}.ti-zoom-in:before{content:"\e611"}.ti-zoom-out:before{content:"\e612"}.ti-mobile:before{content:"\e621"}.ti-minus:before{content:"\e622"}.ti-link:before{content:"\e62d"}.ti-layers:before{content:"\e62f"}.ti-layers-alt:before{content:"\e630"}.ti-heart:before{content:"\e634"}.ti-flag:before{content:"\e63a"}.ti-flag-alt:before{content:"\e63b"}.ti-flag-alt-2:before{content:"\e63c"}.ti-close:before{content:"\e646"}.ti-clip:before{content:"\e647"}.ti-angle-up:before{content:"\e648"}.ti-angle-right:before{content:"\e649"}.ti-angle-left:before{content:"\e64a"}.ti-angle-down:before{content:"\e64b"}.ti-check:before{content:"\e64c"}.ti-check-box:before{content:"\e64d"}.ti-bolt:before{content:"\e652"}.ti-bolt-alt:before{content:"\e653"}.ti-arrows-vertical:before{content:"\e657"}.ti-arrows-horizontal:before{content:"\e658"}.ti-fullscreen:before{content:"\e659"}.ti-arrow-top-right:before{content:"\e65a"}.ti-arrow-top-left:before{content:"\e65b"}.ti-arrow-circle-up:before{content:"\e65c"}.ti-arrow-circle-right:before{content:"\e65d"}.ti-arrow-circle-left:before{content:"\e65e"}.ti-arrow-circle-down:before{content:"\e65f"}.ti-angle-double-up:before{content:"\e660"}.ti-angle-double-right:before{content:"\e661"}.ti-angle-double-left:before{content:"\e662"}.ti-angle-double-down:before{content:"\e663"}.ti-thumb-up:before{content:"\e670"}.ti-quote-right:before{content:"\e67e"}.ti-quote-left:before{content:"\e67f"}.ti-control-play:before{content:"\e6ad"}.ti-control-forward:before{content:"\e6af"}.ti-book:before{content:"\e6b7"}.ti-back-right:before{content:"\e6bc"}.ti-back-left:before{content:"\e6bd"}.ti-arrows-corner:before{content:"\e6be"}.ti-archive:before{content:"\e6bf"}.ti-anchor:before{content:"\e6c0"}.ti-align-right:before{content:"\e6c1"}.ti-align-left:before{content:"\e6c2"}.ti-align-justify:before{content:"\e6c3"}.ti-align-center:before{content:"\e6c4"}.ti-alert:before{content:"\e6c5"}.ti-alarm-clock:before{content:"\e6c6"}.ti-agenda:before{content:"\e6c7"}.ti-write:before{content:"\e6c8"}.ti-window:before{content:"\e6c9"}.ti-wallet:before{content:"\e6cd"}.ti-video-clapper:before{content:"\e6ce"}.ti-video-camera:before{content:"\e6cf"}.ti-shift-right-alt:before{content:"\e6d9"}.ti-shift-left-alt:before{content:"\e6da"}.ti-ruler-alt-2:before{content:"\e6db"}.ti-receipt:before{content:"\e6dc"}.ti-pin2:before{content:"\e6dd"}.ti-pin-alt:before{content:"\e6de"}.ti-palette:before{content:"\e6e0"}.ti-more:before{content:"\e6e1"}.ti-more-alt:before{content:"\e6e2"}.ti-hand-point-up:before{content:"\e71a"}.ti-hand-point-right:before{content:"\e71b"}.ti-hand-point-left:before{content:"\e71c"}.ti-hand-point-down:before{content:"\e71d"}.ti-gallery:before{content:"\e71e"}.ti-face-smile:before{content:"\e71f"}.ti-youtube:before{content:"\e728"}.ti-twitter:before{content:"\e72a"}.ti-time:before{content:"\e72b"}.ti-share:before{content:"\e72e"}.ti-share-alt:before{content:"\e72f"}.ti-pinterest:before{content:"\e731"}.ti-new-window:before{content:"\e732"}.ti-instagram:before{content:"\e73d"}.ti-facebook:before{content:"\e741"}.ti-twitter-alt:before{content:"\e74b"}.ti-sharethis:before{content:"\e750"}.ti-sharethis-alt:before{content:"\e751"}.ti-email:before{content:"\e75a"}.ti-location-pin:before{content:"\e693"} @font-face{font-family:'FontAwesome';src:url('../font/FontAwesome4/fontawesome-webfont.eot?v=4.7.0');src:url('../font/FontAwesome4/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../font/FontAwesome4/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../font/FontAwesome4/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../font/FontAwesome4/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../font/FontAwesome4/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center} .fa-instagram:before{content:"\f16d"}.fa-facebook-official:before{content:"\f230"}.fa-facebook-square:before{content:"\f082"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-phone:before {content:"\f095";} /* --------------------------------------------------------------------------------------------------- 　normalize.css --------------------------------------------------------------------------------------------------- */ img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,figure{margin:0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C""\201D""\2018""\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* --------------------------------------------------------------------------------------------------- 　BASE --------------------------------------------------------------------------------------------------- */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* remember: box-sizing is not supported by IE7 :( */ outline: none; vertical-align: top; } html { width: 100%; } html, body {font: normal 1em/2em "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; font-weight:400; margin: 0; padding: 0; width: 100%; color: #382623; background: #f7f6f4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;vertical-align: top; } blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;font-weight:400} p { margin: 0; padding: 0; font-weight: normal; } a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a:focus { outline: none; } button { text-decoration:none; border:none;} /* ----- *::selection ----- */ *::-moz-selection {background: #f3e4da;color:#382623;} *::selection { background: #f3e4da; color: #382623; } /* ----- h1,h2,h3,h4,h5 ----- */ h1,h2,h3,h4,h5{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; margin: 0; padding: 0;} /* ----- .cf ----- */ .cf:before, .cf:after { content: ""; display: block; overflow: hidden; } .cf:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom: 1; } /* ----- .transition03 ----- */ .transition03 { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .transition05 { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } /* ----- img----- */ img { width: 100%; height:auto;/*-webkit-border-radius:2px;border-radius:2px;*/} /* ----- a ----- */ a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-tap-highlight-color: rgba(0,0,0,0); } a:focus, *:focus { outline: none; text-decoration: none; } a:hover { text-decoration: none; outline: none; } /* ----- p ----- */ p { margin: 0; padding: 0; font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 0.085em; } @media only screen and (max-width: 738px) { p { letter-spacing: 0.065em;} } /* --------------------------------------------------------------------------------------------------- 　#page --------------------------------------------------------------------------------------------------- */ #page { height:100%; position:relative; z-index:0; overflow: hidden; } /* .load */ .load { position: fixed; bottom: 0; top: 0; right: 0; left: 0; z-index: 1001;pointer-events: none;} .anim_load {transition: all .9s .4s ease-in; background: #f7f6f4; } .anim_load.started {transform: none;transform: translate(0, 0);opacity: 0; background: none} .anim_load.delighter.started { opacity: 0; background: none} /* --------------------------------------------------------------------------------------------------- main --------------------------------------------------------------------------------------------------- */ main {position: relative; z-index: 0;} /* --------------------------------------------------------------------------------------------------- .wrapper_sub_page --------------------------------------------------------------------------------------------------- */ .wrapper_sub_page { margin: 65px 0 0;} @media only screen and (max-width: 738px) { .wrapper_sub_page { margin: 55px 0 0;} } @media only screen and (max-width: 560px) { .wrapper_sub_page { margin: 50px 0 0;} } /* --------------------------------------------------------------------------------------------------- 　.object-fit_cover --------------------------------------------------------------------------------------------------- */ .object-fit_cover { object-fit: cover; font-family: 'object-fit: cover;' } /* --------------------------------------------------------------------------------------------------- 　#header --------------------------------------------------------------------------------------------------- */ #header, #header:after, #headerSp, #headerSp:after, #header .logo_area, #header .nav_area, #header .nav_area_right, ul.nav_list > li.arrow_down:before{ -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #header .logo_area h1 a{ -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #header { position: fixed; top: 0; left:0; right: 0; height: 65px; z-index: 99; -moz-box-sizing: border-box; box-sizing: border-box;} #header:after { position: absolute; top:0; right: 0; left: 0; bottom: 0; content: ""; background-color: transparent; z-index: -1;} #header.fixed:after { bottom: 0; background: #f7f6f4;box-shadow: 0px 0px 50px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, .1);} @media only screen and (max-width: 960px) { #header {display: none;} } /* -------------------------------------------- 　.logo_area -------------------------------------------- */ #header .logo_area { position: absolute; top:0; left: 4%;width: 120px; height: 65px; margin: 0 auto; z-index: 5;} #header.fixed .logo_area { height: 65px; } #header .logo_area h1{ width: 120px; height: 30px; display: block; position: absolute; top: 50%; left: 0; font-size: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index:0;} #header .logo_area h1 a {display: block;width: 120px; height: 30px; position: relative; z-index: 0; } #header .logo_area h1 a:before, #header .logo_area h1 a:after {-webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;} #header .logo_area h1 a:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: url("../images/logo_mock_w.png") center left no-repeat; background-size: contain; z-index: 0;} #header .logo_area h1 a:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: url("../images/logo_mock_b.png") center left no-repeat; background-size: contain; z-index: 0;opacity: 0;} /* #header.fixed */ #header.fixed .logo_area h1 a:before {opacity: 0;} #header.fixed .logo_area h1 a:after {opacity: 1;} /* .page_sub */ .page_sub #header .logo_area h1 a:before { opacity: 0;} .page_sub #header .logo_area h1 a:after { opacity: 1;} @media only screen and (max-width: 960px) { #header .logo_area {display: none;} } /* -------------------------------------------- 　.nav_area -------------------------------------------- */ #header .nav_area { position: absolute; top: 0; left: 4%; right: 4%; z-index: 0;} /* ul.nav_list */ ul.nav_list { ist-style: none; font-size: 0; text-align: center;position: relative; z-index: 0;} ul.nav_list li {display:inline-block; margin: 0 3vw; position: relative; z-index: 0;} ul.nav_list li:hover {cursor: pointer;} ul.nav_list li a { display: block; color: #f7f6f4; font-size: 15px;font-family: 'Azeret Mono', monospace;font-weight: 300;font-feature-settings : "palt" 1; letter-spacing: 0.075em; line-height: 65px;position: relative; z-index: 0;text-decoration: underline;text-decoration-color: transparent;text-decoration-thickness:1px;} ul.nav_list > li.arrow_down { padding-right: 20px;} ul.nav_list > li.arrow_down:hover {cursor: pointer;} ul.nav_list > li.arrow_down:before { position: absolute; top: 0; right: 0; bottom: 0; margin: auto 0; width: 14px; height: 14px; color: #f7f6f4;border: #f7f6f4 1px solid;font-size: 9px;line-height: 14px; font-family:'themify'; content:"\e64b"; text-align: center;z-index: 0; border-radius:5px;-webkit-border-radius:5px; letter-spacing: 0;} ul.nav_list > li.arrow_down > ul {position: absolute;top: 50px; left: 0; width:auto; padding: 20px 0 5px;-webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;visibility: hidden;opacity: 0; z-index: 0;} ul.nav_list > li.arrow_down:hover > ul {top: 55px;visibility: visible;opacity: 1;} ul.nav_list > li.arrow_down > ul:after { position: absolute; top: 15px; right: 0; bottom: 0; left: -15px; content: "";background: #f7f6f4; box-shadow: 0px 0px 40px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, .1); z-index: -1; border-radius:2px;-webkit-border-radius:2px;} ul.nav_list > li.arrow_down > ul > li {display: block; margin: 15px 0; width: 370px; text-align: left;} ul.nav_list > li.arrow_down > ul.list_product > li a { height: auto; color: #382623; overflow: hidden; position: relative; z-index: 0;} ul.nav_list > li:hover ul.list_product > li a:before { display: none; } ul.nav_list > li > ul.list_product > li a .thumb_area { float: left; width: 75px; height: 75px;} ul.nav_list > li > ul.list_product > li a .txt_area {position: absolute; top: 51%; left: 100px; z-index: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);} ul.nav_list > li > ul.list_product > li a .txt_area .t_en { display: block; font-size: 20px; font-family: orpheuspro, serif; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } ul.nav_list > li > ul.list_product > li a .txt_area .t_jp { margin: 5px 0 0; display: block; font-size: 12px; font-family: "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1; } /* #header.fixed */ #header.fixed ul.nav_list li a { color: #382623; } #header.fixed ul.nav_list > li.arrow_down:before {color:#382623; border-color: #382623;} /* .page_sub */ .page_sub ul.nav_list li a { color: #382623; } .page_sub ul.nav_list > li.arrow_down:before { color: #382623;border-color: #382623;} @media only screen and (min-width:961px) { ul.nav_list li a:hover { text-decoration-color: #f7f6f4;} .page_sub ul.nav_list li a:hover { text-decoration-color: #d3b2ac; } #header.fixed ul.nav_list li a:hover { text-decoration-color: #d3b2ac;} } /* -------------------------------------------- 　.nav_webstore_area -------------------------------------------- */ #header .nav_webstore_area {position: absolute; top: 0; right: 4.5%; z-index: 1; text-align: right;} /* ul.webshop_list */ ul.webshop_list { ist-style: none; font-size: 0; text-align: center;position: relative; z-index: 0;} ul.webshop_list li {display:inline-block; margin: 0 0 0 3vw; position: relative; z-index: 0;} ul.webshop_list li:hover {cursor: pointer;} ul.webshop_list li a, ul.webshop_list li .t_webshop{ display: block; color: #f7f6f4; font-size: 15px;font-family: 'Azeret Mono', monospace;font-weight: 300;font-feature-settings : "palt" 1; letter-spacing: 0.075em; line-height: 65px;position: relative; z-index: 0;text-decoration: underline;text-decoration-color: transparent;text-decoration-thickness:1px;} ul.webshop_list > li.arrow_down { padding-right: 20px;} ul.webshop_list > li.arrow_down:hover {cursor: pointer;} ul.webshop_list > li.arrow_down:before { position: absolute; top: 0; right: 0; bottom: 0; margin: auto 0; width: 14px; height: 14px; color: #f7f6f4;border: #f7f6f4 1px solid;font-size: 9px;line-height: 14px; font-family:'themify'; content:"\e64b"; text-align: center;z-index: 0; border-radius:5px;-webkit-border-radius:5px; letter-spacing: 0;} ul.webshop_list > li.arrow_down > ul {position: absolute;top: 50px; right: 0; width:auto; padding: 25px 0 10px;-webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;visibility: hidden;opacity: 0; z-index: 0;} ul.webshop_list > li.arrow_down:hover > ul {top: 55px;visibility: visible;opacity: 1;} ul.webshop_list > li.arrow_down > ul:after { position: absolute; top: 15px; right: -15px; bottom: 0; left: -25px; content: "";background: #f7f6f4; box-shadow: 0px 0px 40px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, .1); z-index: -1; border-radius:2px;-webkit-border-radius:2px;} ul.webshop_list > li.arrow_down > ul > li {display: block; margin: 20px 0; width: 250px; text-align: left;} ul.webshop_list > li.arrow_down > ul > li a { height: auto; color: #382623; overflow: hidden;font-family: 'Azeret Mono', monospace;font-weight: 300;letter-spacing: 0.05em; line-height: 1.5; position: relative; z-index: 0; text-transform: uppercase} ul.webshop_list > li.arrow_down > ul > li a .t_jp {padding: 0 0 0 .65em; font-size: .9em; font-family: "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; font-weight: 400; font-feature-settings : "palt" 1; letter-spacing: 0.05em; vertical-align: 0;} ul.webshop_list > li:hover ul.list_product > li a:before { display: none; } ul.webshop_list > li.arrow_down > ul> li a:after { position: absolute; top: 0; right: 10px; bottom: 0; width: 15px; content: "";background: url("../images/arrow_right.png") center right no-repeat; background-size: contain; } #header.fixed ul.webshop_list li a, #header.fixed ul.webshop_list li .t_webshop{ color: #382623; } #header.fixed ul.webshop_list > li.arrow_down:before {color:#382623; border-color: #382623;} /* .page_sub */ .page_sub ul.webshop_list li a, .page_sub ul.webshop_list li .t_webshop{ color: #382623; } .page_sub ul.webshop_list > li.arrow_down:before { color: #382623;border-color: #382623;} @media only screen and (min-width:961px) { ul.webshop_list > li.arrow_down > ul> li a:hover { text-decoration-color: none; opacity: .8;} #header.fixed ul.nav_list li a:hover { text-decoration-color: #d3b2ac;} } /* link off */ #header ul.webshop_list li a.link_no, #header.fixed ul.webshop_list li a.link_no{ pointer-events: none; color: #bbb; cursor:default} #header ul.webshop_list > li.arrow_down > ul> li a.link_no:after { opacity: .2;} #header ul.webshop_list li a.link_no:hover {opacity: 1;} /* --------------------------------------------------------------------------------------------------- 　#headerSp --------------------------------------------------------------------------------------------------- */ #headerSp { display: none; position: absolute; top:0; left:0;right: 0; height:85px; z-index:1000; } @media only screen and (max-width: 960px) { #headerSp { display: block; } } @media only screen and (max-width: 738px) { #headerSp {height: 55px; } } /* -------------------------------------------- 　.logo_area -------------------------------------------- */ #headerSp .logo_area { position: absolute; top:0; left: 4%;width: 142px; height: 85px; overflow: hidden;margin: 0 auto; z-index: 5;} #headerSp.fixed .logo_area { height: 85px; } #headerSp .logo_area h1{ width: 142px; height: 37px; display: block; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index:0;} #headerSp .logo_area h1 a {display: block; width: 142px; height: 37px; font-size: 0;} #headerSp .logo_area h1 img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } #headerSp .logo_area h1 a:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: url("../images/logo_mock_w.png") center left no-repeat; background-size: contain; z-index: 0;} /* .page_sub */ .page_sub #headerSp .logo_area h1 a:before {background: url("../images/logo_mock_b.png") center left no-repeat; background-size: contain;} @media only screen and (max-width: 738px) { #headerSp .logo_area { height: 70px; } #headerSp .logo_area h1{ width: 128px; height: 33px;} } @media only screen and (max-width: 560px) { } /* -------------------------------------------- 　.btnMenu -------------------------------------------- */ #headerSp a.btnMenu { position: fixed; top: 15px; right:15px; display: block; font-size: 0; width:55px; height:55px; z-index:0; } #headerSp a.btnMenu:after { position: absolute; top: 0; right: 0; left: 0; bottom: 0; content: ""; /*border: #989795 1px solid;*/ z-index: -1;-webkit-transition: all 0.5s ease; transition: all 0.5s ease; border-radius:100%;-webkit-border-radius:100%; } /* .hamburger */ #headerSp a.btnMenu .hamburger { position: absolute; top: 50%; left: 50%; height: 15px; width: 26px; z-index: 0;-webkit-transform: translate( -50%, -50%); transform: translate( -50%, -50%);} #headerSp a.btnMenu .hamburger:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border-top: #f7f6f4 1px solid; border-bottom: #f7f6f4 1px solid; z-index: 0;-webkit-transition: border 0.3s ease; transition: border 0.3s ease; } #headerSp a.btnMenu .hamburger:after { position: absolute; top: 50%; right: 0;left: 0; bottom: 0; height: 1px; content: ""; border-top: #f7f6f4 1px solid; z-index: 0;-webkit-transform: translate(0, -50%); transform: translate(0, -50%);-webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #headerSp.fixed a.btnMenu .hamburger:after, #headerSp.fixed a.btnMenu .hamburger:before { border-color:#382623; } #headerSp.fixed a.btnMenu:after { background: #f7f6f4; /*border-color: #f7f6f4;*/box-shadow: 0px 0px 30px rgba(0, 0, 0, .15);-webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, .15);} /* .page_sub */ .page_sub #headerSp .logo_area h1 a:before {} .page_sub #headerSp a.btnMenu .hamburger:after, .page_sub #headerSp a.btnMenu .hamburger:before { border-color:#382623; } @media only screen and (max-width: 738px) { #headerSp a.btnMenu { top: 10px; right:10px; width:50px; height:50px; } #headerSp a.btnMenu .hamburger { height: 13px; width: 24px; } } /* -------------------------------------------- 　.btnClose -------------------------------------------- */ #menu .btnClose { position: absolute; top:5px; right:15px; width:100px; height:55px; display: block; z-index:1001; font-size: 0;text-align: right; } #menu .btnClose .txt { position: absolute;top: 50%; right: 0;font-size: 15px;font-family: 'Azeret Mono', monospace;font-weight: 300;line-height: 1;text-align: center; letter-spacing: 0.025em; z-index: 0;-webkit-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; } #menu .btnClose .txt:before { position: absolute; top: 0px; left: -20px; bottom: 0; font-family:'themify'; content:"\e646"; font-size:0.9em; font-weight: normal; line-height: 15px; } @media only screen and (max-width: 738px) { #menu .btnClose { top: 5px; right:10px; width:80px; height:50px;} #menu .btnClose .txt {right: 5px; font-size: 15px;} #menu .btnClose .txt:before {left: -18px;} } /* ----------------------------------------------------------- jQuery.mmenu CSS ----------------------------------------------------------- */ #menu:not( .mm-menu ) { display: none; } /* jQuery.mmenu oncanvas CSS */ .mm-hidden { display: none !important; } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu, .mm-panels, .mm-panels > .mm-panel { margin: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } .mm-panels > .mm-panel { margin-top: 0px;} .mm-menu { box-sizing: border-box; background: inherit; display: block; overflow: hidden; padding: 0; } .mm-panel { -webkit-transition: -webkit-transform 0.425s ease 0.1s; -moz-transition: -moz-transform 0.425s ease 0.1s; -ms-transition: -ms-transform 0.425s ease 0.1s; -o-transition: -o-transform 0.425s ease 0.1s; transition: transform 0.425s ease 0.1s; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mm-panel.mm-opened { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .mm-panel.mm-subopened { -webkit-transform: translate3d(-30%, 0, 0); -moz-transform: translate3d(-30%, 0, 0); -ms-transform: translate3d(-30%, 0, 0); -o-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } .mm-panel.mm-highest { z-index: 1; } .mm-panels, .mm-panels > .mm-panel { background: inherit; border-color: inherit; } .mm-panels > .mm-panel { background: inherit; border-color: inherit; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 0 25px; } .mm-panels > .mm-panel.mm-hasnavbar { padding-top: 40px; } .mm-panels > .mm-panel:before, .mm-panels > .mm-panel:after { content: ''; display: block; height: 45px; } .mm-vertical .mm-panel { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .mm-vertical .mm-listview .mm-panel .mm-listview > li:last-child:after, .mm-listview .mm-vertical .mm-panel .mm-listview > li:last-child:after { border-color: transparent; } .mm-vertical li.mm-opened > .mm-panel, li.mm-vertical.mm-opened > .mm-panel { display: block; } /* jQuery.mmenu offcanvas addon CSS */ .mm-page { box-sizing: border-box; position: relative; } .mm-slideout { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow-x: hidden; position: relative; } html.mm-blocking { overflow: hidden; } html.mm-blocking body { overflow: hidden; } html.mm-background .mm-page { background: inherit; } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; } html.mm-blocking #mm-blocker { display: block; } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block; } .mm-menu { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening .mm-slideout { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); -o-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(440px, 0); -moz-transform: translate(440px, 0); -ms-transform: translate(440px, 0); -o-transform: translate(440px, 0); transform: translate(440px, 0); } } /* jQuery.mmenu dragOpen addon CSS */ html.mm-opened.mm-dragging .mm-menu, html.mm-opened.mm-dragging .mm-slideout { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* jQuery.mmenu pagedim extension CSS */ html.mm-pagedim #mm-blocker, html.mm-pagedim-white #mm-blocker, html.mm-pagedim-black #mm-blocker { opacity: 0; } html.mm-pagedim.mm-opening #mm-blocker, html.mm-pagedim-white.mm-opening #mm-blocker, html.mm-pagedim-black.mm-opening #mm-blocker { opacity: 0.5; /*transition: opacity 0.2s ease 0.1s;*/-webkit-transition: opacity 0.4s ease 0.1s; transition: opacity 0.4s ease 0.1s;} html.mm-pagedim #mm-blocker { background: inherit; } html.mm-pagedim-white #mm-blocker { background: #fff;background: #fafafa; } html.mm-pagedim-black #mm-blocker { background: #000; } /* jQuery.mmenu position extension CSS */ .mm-menu.mm-top, .mm-menu.mm-bottom { width: 100%; min-width: 100%; max-width: 100%; } .mm-menu.mm-right { left: auto; right: 0; } .mm-menu.mm-bottom { top: auto; bottom: 0; } html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-80%, 0); -moz-transform: translate(-80%, 0); -ms-transform: translate(-80%, 0); -o-transform: translate(-80%, 0); transform: translate(-80%, 0); } @media all and (max-width: 175px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 550px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-440px, 0); -moz-transform: translate(-440px, 0); -ms-transform: translate(-440px, 0); -o-transform: translate(-440px, 0); transform: translate(-440px, 0); } } /* jQuery.mmenu z-position extension CSS */ html.mm-front .mm-slideout { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; z-index: 0 !important; } .mm-menu.mm-front { z-index: 1; } .mm-menu.mm-front, .mm-menu.mm-next { -webkit-transition: -webkit-transform 0.425s ease; -ms-transition: -ms-transform 0.425s ease; transition: transform 0.425s ease; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .mm-menu.mm-front.mm-right, .mm-menu.mm-next.mm-right { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } html.mm-opening .mm-menu.mm-front, html.mm-opening .mm-menu.mm-next { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* jQuery.mmenu z-position extension CSS */ /*.mm-panels, .mm-panels > .mm-panel { background: #fefefe;}*/ .mm-panels { background: #faf9f7;} .nav_main_area { padding: 50px 10%;} @media screen and (max-width: 738px) { .nav_main_area { padding: 45px 6.5% 60px;} } /* ul.nav_list_sp */ ul.nav_list_sp { list-style: none;} ul.nav_list_sp li { display: block; margin: 25px 0; } ul.nav_list_sp li a { display: block;padding: 0;font-size: 30px;font-family: 'Azeret Mono', monospace;font-weight: 200;font-feature-settings : "palt" 1; letter-spacing: 0.075em; line-height: 1;} @media screen and (max-width: 738px) { ul.nav_list_sp li { } ul.nav_list_sp li a { font-size: 20px;} } @media screen and (max-width: 560px) { ul.nav_list_sp li { display: block; margin: 20px 0; } } /* ul.list_brand */ ul.nav_list_sp li ul.list_brand {font-size: 0; margin: 30px 0; } ul.nav_list_sp li ul.list_brand li { margin: 10px 0;} ul.nav_list_sp li ul.list_brand li a {padding:0; line-height: 1; overflow: hidden; position: relative; z-index: 0;} ul.nav_list_sp li ul.list_brand li a .thumb_area { float: left; width: 35%;} ul.nav_list_sp li ul.list_brand li a .txt_area { position: absolute; top: 50%; right: 0; width: 57.5%;-webkit-transform: translate(0, -50%); transform: translate(0, -50%);} ul.nav_list_sp li ul.list_brand li a .txt_area .t_en { display: block; font-size: 15px; font-family: orpheuspro, serif; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } ul.nav_list_sp li ul.list_brand li a .txt_area .t_jp { margin: 3px 0 0; display: block; font-size: 12px; font-family: "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; font-weight: 400; letter-spacing: 0.05em; line-height: 1.4; } @media screen and (max-width: 738px) { ul.nav_list_sp li ul.list_brand li a .txt_area .t_en { display: block; font-size: 16px; font-family: orpheuspro, serif; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } ul.nav_list_sp li ul.list_brand li a .txt_area .t_jp { margin: 3px 0 0; font-size: 11px; } } /* nav_sns_area_sp */ .nav_sns_area_sp { margin: 45px 0 0;} .title_follow { color: #989795; font-size: 14px; font-family: 'Azeret Mono', monospace; font-weight: 300;line-height: 1; font-feature-settings : "palt" 1; letter-spacing: 0.05em; text-indent: 0.1em} ul.nav_sns_sp { list-style: none; margin: 20px 0 0;} ul.nav_sns_sp li { display: block; margin: 8px 0 0; } ul.nav_sns_sp li a { display: block; padding: 0 0 0 25px;font-size: 16px;font-family: 'Azeret Mono', monospace; font-weight: 300;letter-spacing: 0.025em; line-height: 30px;position: relative; z-index: 0;} ul.nav_sns_sp li a:before { position: absolute; top: 1px; left: 2px; font-size: 15px; font-family:'FontAwesome'; font-weight: normal; z-index: 0; vertical-align: 0;} ul.nav_sns_sp li a.sns_instagram:before {content:"\f16d";} ul.nav_sns_sp li a.sns_twitter:before {font-size: 16px; content:"\f099"} @media screen and (max-width: 738px) { .nav_sns_area_sp { margin: 40px 0 0;} ul.nav_sns_sp li a { font-size: 15px; line-height: 25px;} ul.nav_sns_sp li a:before { font-size: 14px; } ul.nav_sns_sp li a.sns_twitter:before { left: 1px; } } /* nav_webshop_area_sp */ .nav_webshop_area_sp { margin: 45px 0 0;} ul.nav_webshop_sp { list-style: none; margin: 25px 0 0;} ul.nav_webshop_sp li { display: block;margin: 10px 0 0; } ul.nav_webshop_sp li a { display: inline-block; padding: 0 40px 0 15px; width: 270px; border: #382623 1px solid; font-size: 15px; font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.035em; line-height: 60px; text-align: left; position: relative; z-index: 0;border-radius:2px;-webkit-border-radius:2px;} ul.nav_webshop_sp li a .t_jp {padding: 0 0 0 .65em; font-size: .9em; font-family: "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; font-weight: 400; font-feature-settings : "palt" 1; letter-spacing: 0.05em; vertical-align: 0;} ul.nav_webshop_sp li a:after { position: absolute; top: 0; right: 15px; bottom: 0; width: 15px; content: "";background: url("../images/arrow_right.png") center right no-repeat; background-size: contain; } @media screen and (max-width: 738px) { ul.nav_webshop_sp li a {line-height: 55px;width: 270px; } } @media screen and (max-width: 560px) { ul.nav_webshop_sp li a { padding: 0 35px 0 13px;width: 250px; font-size: 14px;line-height: 45px;} ul.nav_webshop_sp li a:after { right: 13px; width: 15px;} } /* link off */ ul.nav_webshop_sp li a.link_no{ pointer-events: none; color: #bbb;border-color: #bbb; cursor:default} ul.nav_webshop_sp li a.link_no:after { opacity: .2;} /* --------------------------------------------------------------------------------------------------- 　#breadcrumb --------------------------------------------------------------------------------------------------- */ #breadcrumb { padding: 0 4%; height: 100px; position: relative;z-index: 1;} /* ol */ #breadcrumb ol { font-size: 0; position: absolute; top: 50%; left: 4%; right: 4%; webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0; } #breadcrumb ol { list-style: none; font-size: 0; margin: 0; padding: 0; line-height:1;} #breadcrumb li, #breadcrumb h1{ display: inline-block; font-size: 15px;font-family: 'Azeret Mono', monospace;font-weight: 300;margin: 0; padding: 0; letter-spacing: 0.05em; line-height:40px;} #breadcrumb li .t_jp, #breadcrumb h1 .t_jp{ margin: 0 0 0 5px; font-size: 0.95em; vertical-align: 0; font-family:"YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ";font-weight: 400;} #breadcrumb li:last-child {overflow: hidden;text-overflow: ellipsis; white-space: nowrap; } #breadcrumb li:after {color: #989795; font-size: 11px; font-family: 'themify'; content: "\e649"; font-weight: normal; margin: 0 15px; line-height:40px; } #breadcrumb li:last-child:after { display:none;} #breadcrumb li a { display: inline-block;position:relative; z-index:1; line-height:40px; text-decoration: underline;text-decoration-color: transparent;text-decoration-thickness:1px;} #breadcrumb li span.txt_jp {font-size: 11px; font-family: 'Noto Serif JP', serif; line-height:19px; height: 19px; vertical-align: 0; } @media only screen and (min-width:961px) { #breadcrumb li a:hover { text-decoration-color: #d3b2ac;} } @media only screen and (max-width:960px) { #breadcrumb { margin: 0; padding: 0 4%;height: 90px; } #breadcrumb li a:after { display: none;} } @media only screen and (max-width:738px) { #breadcrumb { height: 80px; } #breadcrumb li, #breadcrumb h1 { height:22px; line-height: 22px; font-size:13px; } #breadcrumb h1 {overflow: hidden;text-overflow: ellipsis; white-space: nowrap; width:10em;} #breadcrumb li:after { height:22px; font-size:8px; line-height:22px; margin:0 8px;} #breadcrumb li a { height:22px; line-height:22px; } } @media only screen and (max-width:560px) { #breadcrumb h1 {width:14em;} } /* --------------------------------------------------------------------------------------------------- 　footer --------------------------------------------------------------------------------------------------- */ footer { margin: 0; padding: 100px 4% 45px; background: #2d282a;color: #989795; position: relative; z-index: 0; } @media screen and (max-width: 960px) { footer { padding: 100px 4% 45px; } } @media screen and (max-width:738px) { footer { padding: 70px 3.5% 35px;} } @media screen and (max-width: 560px) { footer { padding: 70px 3.5% 35px; } } /* .inner */ footer .inner { padding: 0 25% 0 30%;font-size: 0;position: relative; z-index: 1;} @media screen and (max-width: 960px) { footer .inner { padding: 0 0 0 47.5%;} } @media screen and (max-width: 738px) { footer .inner { padding: 0;} } /* .txt_title_menu */ footer .txt_title_menu { margin: 0 0 20px;color: #d0c3ba; font-size: 14px;font-family: 'Azeret Mono', monospace;font-weight: 300; line-height: 1;font-feature-settings : "palt" 1; letter-spacing: 0.075em;} @media screen and (max-width: 738px) { footer .txt_title_menu { margin: 0 0 20px;font-size: 13px;} } @media screen and (max-width: 560px) { footer .txt_title_menu { margin: 0 0 15px; font-size: 12px;} } /* .nav_area */ footer .nav_area {font-size: 0;} footer .nav_box { display: inline-block; width: 40%;} @media screen and (max-width: 960px) { footer .nav_area { width: 100%;} footer .nav_box { width: 50%;} } @media screen and (max-width: 738px) { footer .nav_box { width: 50%;} } @media screen and (max-width: 560px) { footer .nav_box {display: block; width: 100%;} footer .nav_box+.nav_box {margin: 35px 0 0;} } /* .footer_nav_list */ footer ul.footer_nav_list { list-style: none; line-height: 0;} footer ul.footer_nav_list li { display: block; margin: 10px 0 0; padding: 0;} footer ul.footer_nav_list li a { display: inline-block; font-size: 14px; font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.075em; line-height: 1.2; position: relative; z-index: 0;text-decoration: underline;text-decoration-color: transparent;text-decoration-thickness:1px;} footer ul.footer_product_list li a { letter-spacing: 0.025em;} @media screen and (min-width: 961px) { footer ul.footer_nav_list li a:hover { color: #f7f6f4;text-decoration-color: #f7f6f4;} } @media screen and (max-width: 960px) { footer ul.footer_nav_list { } } @media screen and (max-width: 738px) { footer ul.footer_nav_list li a { color: #dad7d2; font-size: 15px; } } @media screen and (max-width: 560px) { footer ul.footer_nav_list li { margin: 8px 0 0; } footer ul.footer_nav_list li a { font-size: 15px; } } /* .sns_area */ footer .sns_box { display: block; margin: 35px 0 0; width: 80%;} footer ul.footer_sns_list { margin: -3px 0 0; list-style: none; line-height: 0;} footer ul.footer_sns_list li { display: inline-block; margin:0 15px 0 0; padding: 0;} footer ul.footer_sns_list li a { display: block;font-size: 0; line-height: 1.2; position: relative; z-index: 0;} footer ul.footer_sns_list li a:before { font-size: 18px;font-family:'FontAwesome'; font-weight: normal; z-index: 0;} footer ul.footer_sns_list li a.instagram:before {content:"\f16d";} footer ul.footer_sns_list li a.twitter:before {content:"\f099";} @media screen and (min-width: 961px) { footer ul.footer_sns_list li a:hover { color: #f7f6f4;} } @media screen and (max-width: 960px) { footer .sns_box { margin: 45px 0 0; width: 80%;} } @media screen and (max-width: 738px) { footer .sns_box { width: 50%;} footer ul.footer_sns_list {font-size: 0;margin: 0; } footer ul.footer_sns_list li { display: block; margin: 10px 0 0;} footer ul.footer_sns_list li a {padding: 0 0 0 20px;color: #dad7d2; font-size: 13px;font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.025em; line-height: 1.2;} footer ul.footer_sns_list li a:before { position: absolute; top: -1px; left: 0; font-size: 1.2em;} } @media screen and (max-width: 560px) { footer .sns_box { } footer ul.footer_sns_list { line-height: auto; margin: 0;} footer ul.footer_sns_list li {display: inline-block; margin:0 10px 0 0; } footer ul.footer_sns_list li a {display: block; padding: 0; font-size: 0; line-height: 1.2; position: relative; z-index: 0; } footer ul.footer_sns_list li a:before {position: static; font-size: 18px; font-family:'FontAwesome'; font-weight: normal; z-index: 0;} } /* .webshop_area */ footer .webstore_area { position: absolute; top: 0; right: 0; width: 30%; } footer ul.footer_webstore_list { /*margin: 39px 0 0; */ margin: 22px 0 0; list-style: none; line-height: 0;} footer ul.footer_webstore_list li { display: block; margin: 10px 0 0; padding: 0;} footer ul.footer_webstore_list li a { display: inline-block; padding: 0 40px 0 15px; width: 260px; border: #bfbdbb 1px solid; font-size: 14px; font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.035em; line-height: 50px; text-align: left; position: relative; z-index: 0;border-radius:3px;-webkit-border-radius:3px;} footer ul.footer_webstore_list li a .t_jp {padding: 0 0 0 .65em; font-size: .9em; font-family: "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; font-weight: 400; font-feature-settings : "palt" 1; letter-spacing: 0.05em; vertical-align: 0; } footer ul.footer_webstore_list li a:after { position: absolute; top: 0; right: 15px; bottom: 0; width: 15px; content: ""; background: url("../images/arrow_right_w.png") center right no-repeat; background-size: contain;} footer ul.footer_webstore_list br {display: none;} @media screen and (min-width: 961px) { footer ul.footer_webstore_list li a:hover { color: #2d282a; background: #f7f6f4; border-color: #f7f6f4;} footer ul.footer_webstore_list li a:hover:after { background: url("../images/arrow_right.png") center right no-repeat; background-size: contain; } } @media screen and (max-width: 960px) { footer .webstore_area { margin: 45px 0 0; position: static; width: 100%;} footer ul.footer_webstore_list li {text-align: left;} footer ul.footer_webstore_list li a { padding: 0 45px 0 20px; font-size: 14px; line-height: 50px;} footer ul.footer_webstore_list li a:after { right: 15px; bottom: 0;} } @media screen and (max-width: 738px) { footer ul.footer_webstore_list {margin: 18px 0 0; } footer ul.footer_webstore_list li {line-height: 1;} footer ul.footer_webstore_list li a { display: block; margin: 0; padding: 15px 40px 15px 15px;color: #dad7d2;line-height: 1.3;} footer ul.footer_webstore_list br {display: block;} } @media screen and (max-width: 560px) { footer ul.footer_webstore_list li { text-align: right; overflow: hidden;} footer ul.footer_webstore_list li a {/* float: right;*/display: block; margin: 0; padding: 12px 35px 12px 15px;line-height: 1.3;} } @media screen and (max-width: 320px) { footer ul.footer_webstore_list li a { padding: 12px 35px 12px 15px; } footer ul.footer_webstore_list li a:after { right: 12px;width: 16px; } } /* link off */ footer ul.footer_webstore_list li a.link_no{ pointer-events: none; cursor:default; opacity:.35} /* .logo_area */ footer .logo_area { position: absolute; top: 100px; left: 4%;} footer .logo_area .logo_img { width: 180px; } @media screen and (max-width: 960px) { footer .logo_area .logo_img { width: 160px; } } @media screen and (max-width: 738px) { footer .logo_area { position: static; margin: 15vw 0 0; width: 100%;} footer .logo_area .logo_img { width: 180px;} } @media screen and (max-width: 560px) { footer .logo_area { position: absolute; top: 70px; left: auto; right: 3.5%; text-align: right;margin:0;} footer .logo_area .logo_img { width: 40vw;} } /* .copyrightArea */ footer .copyright_area { margin: 150px 0 0; position: relative; z-index: 1; } footer .copyright_area .txt_action { color: #cdc9c3; font-size: 12px; font-weight: 400; letter-spacing: 0.075em; line-height: 1.3; position: absolute; top: 0; left: 30%;} footer .copyright_area .txt_action br { display: none } footer .copyright_area p.txt_copy { padding: 0 0 0 15px; color: #d0c3ba; font-size: 12px; font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.035em; line-height:1.3; position: relative; z-index: 0;} footer .copyright_area p.txt_copy span { position: absolute; top: 0; left: 0; font-size: 1.1em;vertical-align: 0;} @media screen and (max-width: 960px) { footer .copyright_area { margin: 60px 0 0; position: relative; z-index: 1; } footer .copyright_area .txt_action { font-size: 12px;line-height: 1.7; position: static; } footer .copyright_area .txt_action br { display: block } footer .copyright_area p.txt_copy { margin: 20px 0 0; } } @media screen and (max-width: 738px) { footer .copyright_area { margin: 35px 0 0; } } @media screen and (max-width: 560px) { footer .copyright_area { position: static; margin: 75px 0 0;} footer .copyright_area .txt_action { font-size: 12px; } footer .copyright_area .txt_action:after { margin: 15px 0;} footer .copyright_area p.txt_copy { padding: 0; font-size:12px;} footer .copyright_area p.txt_copy span { position: static;} } /* .copyright_area_2025 */ footer .copyright_area_2025 { margin: 150px 0 0;position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end;} footer .copyright_area_2025 .txt_action { width: calc(70% - 150px); margin-right: 150px; color: #cdc9c3; font-size: 12px; font-weight: 400; letter-spacing: 0.075em; line-height: 1.8; order: 2; } footer .copyright_area_2025 .txt_action br.sp_block { display: none } footer .copyright_area_2025 p.txt_copy { padding: 0 0 0 15px; width: 30%; color: #d0c3ba; font-size: 12px; font-family: 'Azeret Mono', monospace;font-weight: 300; letter-spacing: 0.035em; line-height:1.7; position: relative; z-index: 0; order: 1;} footer .copyright_area_2025 p.txt_copy span { position: absolute; top: 0; left: 0; font-size: 1.1em;vertical-align: 0;} @media screen and (max-width: 960px) { footer .copyright_area_2025 { margin: 60px 0 0; padding-right: 80px; display: block; } footer .copyright_area_2025 .txt_action { width: 100%; margin-right: 0; font-size: 12px;line-height: 1.75; position: static; } footer .copyright_area_2025 .txt_action br { display: block } footer .copyright_area_2025 p.txt_copy {width: 100%; margin: 20px 0 0; } } @media screen and (max-width: 738px) { footer .copyright_area_2025 { margin: 35px 0 0; } } @media screen and (max-width: 560px) { footer .copyright_area_2025 { position: static; margin: 50px 0 0; padding-right: 0; } footer .copyright_area_2025 .txt_action { font-size: 12px; } footer .copyright_area_2025 .txt_action br.sp_block { display: block } footer .copyright_area_2025 .txt_action:after { margin: 15px 0;} footer .copyright_area_2025 p.txt_copy { margin: 50px 0 0; padding: 0; font-size:12px;} footer .copyright_area_2025 p.txt_copy span { position: static;} } /* --------------------------------------------------------------------------------------------------- 　#scrollUp --------------------------------------------------------------------------------------------------- */ #scrollUp { position: absolute; bottom: 45px; right: 40px; z-index: 1000; } #scrollUp a { padding-right: 35px; display: block;border:none;font-size: 13px; font-family: 'Azeret Mono', monospace;font-weight: 400;line-height: 1.3;font-feature-settings : "palt" 1; letter-spacing: 0.05em; text-align: right; position:relative; z-index:1;} #scrollUp a:before { position:absolute; top:0;right:0; bottom:0; margin: auto 0; width: 20px; height: 20px; content: ""; background: url("../images/arrow_top_w.png") center center no-repeat; background-size: contain; z-index: 0;-webkit-transition: top 0.3s ease; transition: top 0.3s ease;} @media only screen and (min-width: 961px) { #scrollUp a:hover { color: #f7f6f4;} #scrollUp a:hover:before {top: -10px;} } @media only screen and (max-width: 960px) { #scrollUp a:hover { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } #scrollUp { position: absolute; bottom: 30px; right: 20px; } #scrollUp a { padding:0; width: 50px; height: 50px; display: block;border:none;font-size: 0;} #scrollUp a:before {left: 0; margin: auto; width: 25px; height: 25px; } } @media only screen and (max-width: 738px) { #scrollUp { position: absolute; bottom: 30px; right: 20px; } #scrollUp a { padding:0; width: 50px; height: 50px; display: block;border:none;font-size: 0;} #scrollUp a:before {left: 0; margin: auto; width: 35px; height: 35px; } } @media screen and (max-width: 560px) { } /* --------------------------------------------------------------------------------------------------- 　.link_area --------------------------------------------------------------------------------------------------- */ .link_area { text-align: center; margin-top:80px; } @media screen and (max-width: 960px) { .link_area {margin-top:70px; } } @media screen and (max-width: 738px) { .link_area {margin-top:60px; } } /* ======== .btn ======== */ .btn { display: inline-block; padding: 0 50px 0 40px;min-width: 200px; background: transparent;border:#382623 1px solid; font-size:15px; font-family: 'Azeret Mono', monospace;font-weight: 300;line-height:60px;font-feature-settings : "palt" 1; letter-spacing: 0.025em; text-align: center; text-decoration: none;position: relative; z-index:1; border-radius:3px;-webkit-border-radius:3px; } .btn:before { position: absolute; top:0; right:12px; z-index:2; font-size:13px; font-family:'themify'; content:"\e649"; font-weight:normal; font-style:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .btn_small { padding: 0 40px 0 30px;min-width: 180px; line-height: 50px;} .btn_buynow { display: inline-block; padding: 0 50px 0 20px;min-width: 170px; background: transparent;border:#382623 1px solid; font-size:15px; font-family: 'Azeret Mono', monospace;font-weight: 300;line-height:46px;font-feature-settings : "palt" 1; letter-spacing: 0.025em; text-align: center; text-decoration: none;position: relative; z-index:1; border-radius:3px;-webkit-border-radius:3px; } .btn_buynow:before { position: absolute; top: 0; right: 18px; bottom: 0; width: 22px; content: ""; background: url("../images/arrow_right.png") center right no-repeat; background-size: contain;} @media screen and (min-width: 961px) { .btn:hover, .btn_buynow:hover{ color: #f7f6f4; background:#382623;} .btn_buynow:hover:before { background: url("../images/arrow_right_w.png") center right no-repeat; background-size: contain;} } @media screen and (max-width: 960px) { .btn { padding: 0 40px 0 30px;min-width: auto; font-size:14px;line-height:50px;font-feature-settings : "palt" 1; letter-spacing: 0.025em; } .btn:before { right:12px;font-size:13px; } } @media screen and (max-width: 738px) { .btn { padding: 0 40px 0 30px;min-width: auto; font-size:14px;line-height:45px;font-feature-settings : "palt" 1; letter-spacing: 0.025em; } .btn:before { right:10px;font-size:13px; } .btn_buynow { padding: 0 45px 0 20px;min-width: 150px;line-height:42px; } .btn_buynow:before { right: 15px;width: 18px; } } /* ----------------------------------------------------------- .central ----------------------------------------------------------- */ .central { max-width: 1500px; margin: 0 auto; position: relative; } /* --------------------------------------------------------------------------------------------------- 　headline --------------------------------------------------------------------------------------------------- */ .headline { position: relative; z-index: 0; } .t_ttl_content_m_mono {font-size: 30px; font-family: 'Azeret Mono', monospace;font-weight: 200; line-height: 1;font-feature-settings : "palt" 1; letter-spacing: 0.075em;} .t_ttl_content_s_mono {font-size: 16px; font-family: 'Azeret Mono', monospace;font-weight: 300;line-height: 1;font-feature-settings : "palt" 1; letter-spacing: 0.075em;} @media only screen and (max-width: 960px) { .t_ttl_content_m_mono {font-size: 28px;font-weight: 200;} .t_ttl_content_s_mono {font-size: 15px;font-weight: 300;} } @media only screen and (max-width: 738px) { .t_ttl_content_m_mono {font-size: 25px;font-weight: 200;} .t_ttl_content_s_mono {font-size: 14px;font-weight: 300;} } @media only screen and (max-width: 560px) { .t_ttl_content_m_mono {font-size: 23px;font-weight: 200;} .t_ttl_content_s_mono {font-size: 14px;font-weight: 300;} } /* --------------------------------------------------------------------------------------------------- 　headline --------------------------------------------------------------------------------------------------- */ .headline_copy { margin: 20px 0 0;} .t_txt_copy { font-size: 18px;font-weight: 400;line-height: 1.9; letter-spacing: 0.15em;font-feature-settings : "palt" 1; } .t_txt_copy_M { font-size: 20px;font-weight: 400; line-height: 1.9; letter-spacing: 0.2em; font-feature-settings : "palt" 1; } .t_txt_copy_L { font-size: 2.95vw; line-height: 1.6;font-weight: 300; letter-spacing: 0.2em;font-feature-settings : "palt" 1; } .t_txt_copy_M .t_katakana {letter-spacing: .1em;} @media only screen and (max-width:960px) { .t_txt_copy { font-size: 18px;font-weight: 400;line-height: 1.9; letter-spacing: 0.15em;font-feature-settings : "palt" 1; } .t_txt_copy_M { font-size: 20px;font-weight: 400; line-height: 1.9; letter-spacing: 0.2em; font-feature-settings : "palt" 1; } .t_txt_copy_L { font-size: 4.5vw; line-height: 1.6;font-weight: 300; letter-spacing: 0.2em;font-feature-settings : "palt" 1; } .t_txt_copy_M .t_katakana {letter-spacing: .075em;} } @media only screen and (max-width:738px) { .t_txt_copy { font-size: 16px; } .t_txt_copy_M { font-size: 18px;} .t_txt_copy_L { font-size: 5.5vw;} } @media only screen and (max-width:560px) { /*.t_txt_copy { font-size: 18px;font-weight: 400;line-height: 1.9; letter-spacing: 0.15em;font-feature-settings : "palt" 1; } .t_txt_copy_M { font-size: 20px;font-weight: 400; line-height: 1.9; letter-spacing: 0.2em; font-feature-settings : "palt" 1; }*/ .t_txt_copy { font-size: 15px; line-height: 1.9; } .t_txt_copy_M { font-size: 17px; letter-spacing: 0.15em;line-height: 1.9; } .t_txt_copy_L { font-size: 6.55vw; line-height: 1.6;font-weight: 300; letter-spacing: 0.15em;font-feature-settings : "palt" 1; } .t_txt_copy_M .t_katakana {letter-spacing: .045em;} } @media only screen and (max-width:414px) { .t_txt_copy_M br.sp_none { display: none;} } /* ======== .btn_webshop ======== */ /*.btn_webshop { margin:13px 0 0; padding:0 35px 0 15px; display:inline-block;max-width:100%; font-size:13px; font-family: 'Inter', sans-serif; font-weight: 450;line-height:30px; letter-spacing:0.02em; text-align: center; text-decoration: none; color:#111; border:#111 1px solid; position: relative; z-index:1;border-radius:1px;-webkit-border-radius:1px; } .btn_webshop:before { position: absolute; top: 0; right: 10px; bottom: 0; width: 15px; content: ""; background: url("../images/arrow_right.png") center right no-repeat; background-size: contain;} .btn_webshop:hover { color: #fefefe; background:#111; border-color: #111; } .btn_webshop:hover:before { content: ""; background: url("../images/arrow_right_g.png") center right no-repeat; background-size: contain;} @media screen and (max-width: 960px) { .btn_webshop:before { right:10px;width: 13px; } .btn_webshop:hover { color: #111; background:none; border-color: #111; } .btn_webshop:hover:before {background: url("../images/arrow_right.png") center right no-repeat; background-size: contain;} } @media screen and (max-width: 738px) { .btn_webshop { margin:10px 0 0; padding:0 28px 0 12px; max-width:100%; } .btn_webshop:before { right: 8px; width: 12px; } }*/ /* --------------------------------------------------------------------------------------------------- 　.block_webshop --------------------------------------------------------------------------------------------------- */ .block_webshop { margin: 0; background: #2d282a; position: relative; z-index: 0;overflow: hidden;} /* .webshop_area */ .block_webshop .webshop_area { height: 45vw; max-height: 600px; position: relative; z-index: 0; } .block_webshop .webshop_area:after { position: absolute; top: 0; right: 33.333%;bottom: 0; left: 0; content: ""; background: url("../images/home/img_webshop.jpg") center center no-repeat; background-size: cover; z-index: -2;} .block_webshop .webshop_area a.link_all { position: absolute; top: 0;right: 0; bottom: 0; left: 0; content: ""; z-index: 3; pointer-events: none; display: none;} /* .txt_area */ .block_webshop .webshop_area .txt_area { position: absolute; top: 90px; left: 72.333%; color: #f7f6f4; z-index: 0;} .block_webshop .webshop_area .logo_img { margin: 0 0 30px; width: 200px; z-index: 1; } .block_webshop .t_ttl_content_s_mono {margin: 10px 0 0;} .block_webshop .webshop_area .ttl_jp { margin: 20px 0 0; color: #d0c3ba;font-size: 15px;font-weight: 400; line-height: 1; letter-spacing: 0.15em; } .block_webshop .webshop_area .img_area {display: none;} .block_webshop .btn_shopnow { position: absolute; bottom: 75px; left: 72.333%; margin: 0; display: inline-block; padding: 0 50px 0 40px;min-width: 200px; background: transparent;color: #f7f6f4;border:#f7f6f4 1px solid; font-size:15px; font-family: 'Azeret Mono', monospace;font-weight: 300;line-height:60px;font-feature-settings : "palt" 1; letter-spacing: 0.025em; text-align: center; text-decoration: none;z-index:1; border-radius:3px;-webkit-border-radius:3px;} .block_webshop .btn_shopnow:before { position: absolute; top: 0; right: 18px; bottom: 0; width: 22px; content: ""; background: url("../images/arrow_right_w.png") center right no-repeat; background-size: contain;} @media screen and (min-width: 961px) { .block_webshop .btn_shopnow:hover { color: #382623; background: #f7f6f4; border-color: #f7f6f4;} .block_webshop .btn_shopnow:hover:before { content: ""; background: url("../images/arrow_right.png") center right no-repeat; background-size: contain;} } @media screen and (max-width: 960px) { .block_webshop .webshop_area { height: 55vw;} .block_webshop .webshop_area:after { right: 40%;} .block_webshop .webshop_area .txt_area { position: absolute; top: 70px; left: 67.5%; width: 32.5%;} .block_webshop .webshop_area .txt_area .inner { /*position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: 0;*/} .block_webshop .webshop_area .logo_img { margin: 0 0 30px; width: 160px;} .block_webshop .t_ttl_content_s_mono {margin: 10px 0 0;white-space: nowrap; font-size: 14px;} .block_webshop .webshop_area .ttl_jp { margin: 20px 0 0;font-size: 15px;letter-spacing: 0.1em; } .block_webshop .btn_shopnow { position: absolute; bottom: 65px; left: 67.5%; padding: 0 60px 0 35px;min-width: 180px; line-height:50px;} } @media screen and (max-width: 738px) { .block_webshop .webshop_area { height: auto; height: 65vw; position: relative; z-index: 0; } .block_webshop .webshop_area:before { position: absolute; top:0 ; right: 0;bottom:0px;left: 0; content: ""; background:rgba(0,0,0,.1); z-index: -1;} .block_webshop .webshop_area:after { /*display: none;*/ bottom: 0px; right: 0;} .block_webshop .webshop_area a.link_all { position: absolute; top: 0;right: 0; bottom: 0; left: 0; content: ""; z-index: 3; pointer-events: none; display: none;} /* .txt_area */ .block_webshop .webshop_area .txt_area { position: static; width: 100%; padding: 0; position: absolute; top: 45px; left: 4%;} .block_webshop .webshop_area .txt_area .inner { position: relative; top: auto; left: auto; -webkit-transform: translate(0,0); transform: translate(0,0);} .block_webshop .webshop_area .logo_img { margin: 0 0 35px; width: 150px; } .block_webshop .t_ttl_content_s_mono {margin: 10px 0 0;} .block_webshop .webshop_area .ttl_jp { margin: 15px 0 0; font-size: 15px;} .block_webshop .btn_shopnow { position: absolute; bottom:50px; left: auto; right: 4%; padding: 0 45px 0 20px;background: #f7f6f4;color: #382623; font-size:14px;min-width: 150px;line-height:42px; text-align: left;} .block_webshop .btn_shopnow:before { right: 15px;width: 18px; background: url("../images/arrow_right.png") center right no-repeat; background-size: contain;} } @media screen and (max-width: 560px) { .block_webshop .webshop_area { height: 120vw; } .block_webshop .webshop_area:after { background: url("../images/home/img_webshop.jpg") top center no-repeat; background-size: cover; z-index: -2;} .block_webshop .webshop_area .txt_area { top: 35px; left: 4%;} .block_webshop .webshop_area .logo_img { margin: 0 0 20px; width: 140px; } .block_webshop .t_ttl_content_s_mono {margin: 10px 0 0;} .block_webshop .webshop_area .ttl_jp { margin: 12px 0 0; color: #f7f6f4; font-size: 16px; } .block_webshop .btn_shopnow {bottom: 45px;} } /* ----------------------------------------------------------- .delighter ----------------------------------------------------------- */ .img_effect.delighter {transition: all .5s ease-out;opacity: 0;position: relative; z-index: 1;} .img_effect.delighter.started {transform: none;transform: translate(0px, 0px);opacity: 1;} .img_effect.delighter:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #111; transition: all .5s ease-out; z-index: 0;} .img_effect.delighter.started:before { background: transparent; opacity: 0;} .box_effect.delighter {position: relative; z-index: 1;} .box_effect.delighter:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fefefe; transition: all .5s ease-out; z-index:0;} .box_effect.delighter.started:before { background: transparent; opacity: 0;} .bg_effect_r.delighter {transition: all .5s ease-out;transform: translate(50px, 0); opacity: 0;} .bg_effect_l.delighter {transition: all .5s ease-out;transform: translate(-50px, 0); opacity: 0;} .bg_effect_r.delighter.started, .bg_effect_l.delighter.started {transform: translate(0, 0); opacity: 1;} .txt-effect.delighter { position: relative; z-index: 0;} .txt-effect.delighter:before { position: absolute; top: 0; left: -2%; right: -2%; bottom: 0; content: ""; background: #fefefe; z-index: 2;transition: 0.3s all 0.1s ease-out;} .txt-effect.delighter:after { position: absolute; top: 0; left: -2%; right: -2%; bottom: 0; content: ""; background:#111; z-index: 1;transition: 0.4s all 0.5s ease-out;} .txt-effect.delighter.started:before, .txt-effect.delighter.started:after { right: -2%; left: 104%;} /* ----------------------------------------------------------- .slick-slider ----------------------------------------------------------- */ /* Slider */ .slick-slider{position: relative;display: block;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;} .slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;} .slick-list:focus{outline: none;} .slick-list.dragging{cursor: pointer;cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} .slick-track{ position: relative; top: 0;left: 0;display: block;margin-left: auto;margin-right: auto;} .slick-track:before, .slick-track:after{display: table;content: '';} .slick-track:after{clear: both;} .slick-loading .slick-track{visibility: hidden;} .slick-slide{display: none;float: left;height: 100%;min-height: 1px;} [dir='rtl'] .slick-slide{ float: right;} .slick-slide img{ display: block;} .slick-slide.slick-loading img{display: none;} .slick-slide.dragging img{pointer-events: none;} .slick-initialized .slick-slide{display: block;} .slick-loading .slick-slide{visibility: hidden;} .slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;} .slick-arrow.slick-hidden {display: none;} /* --- Dots --- */ .slick-dots{position:absolute;list-style:none;text-align:center;height:10px;z-index:100} .slick-dots li{position:relative;display:inline-block;margin:0 8px;padding:0;cursor:pointer;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-o-transition:all 1s ease-out;transition:all 1s ease-out} .slick-dots li button{border:1px solid #111; background:transparent; display:block;height:8px;width:8px;overflow:hidden;line-height:8px;font-size:0;color:transparent;cursor:pointer; padding:2px; -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out} .slick-dots li.slick-active button{outline:0;background:#111;border-color:#111; } @media screen and (max-width: 960px) { .slick-dots{margin-top: 30px;} .slick-dots li{margin:0 8px;} } /* --------------------------------------------------------------------------------------------------- 　.slider_mock --------------------------------------------------------------------------------------------------- */ .slider_mock { margin: 0; padding: 0; position: relative; z-index: 0; list-style: none;} .slider_mock .slick-list { padding: 0;} .slider_mock li.slide { position: relative; z-index: 0;} .slider_mock li.slide .slide_inner { margin: 0 3.5vw 0 0;} .slider_mock li.slide .txt_box { position: absolute; top: 1.5vw; left: 1.5vw; z-index: 1;} .slider_mock li.slide .t_product_series{ font-size: 15px;font-family: orpheuspro, serif; font-weight: 500; line-height: 1.3;font-feature-settings : "palt" 1;letter-spacing: 0.025em; } .slider_mock li.slide .t_product_name{ font-size: 15px;font-family: orpheuspro, serif; font-weight: 400; line-height: 1.3; font-feature-settings : "palt" 1; letter-spacing: 0.015em;} /* --- .slick-counter --- */ .slider_mock .slick-counter { position: absolute; bottom: -21px;right: 25px;padding: 0 6px 0 0; width: 143px; height: 35px;font-size: 32px; font-family: 'Azeret Mono', monospace;font-weight: 200; text-align: center; line-height: 35px; z-index: 1;} .slider_mock .slick-counter .current, .slider_mock .slick-counter .total{ display: inline-block;width: 16px; vertical-align: 0;} .slider_mock .slick-counter .counter_line { display: inline-block; margin: 0 4px 0 10px; font-size: 0.9em; font-family: "YakuHanJPs","Noto Sans JP", "Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese','Inter', "メイリオ", "Lucida Grande", Meiryo, sans-serif; line-height: 26px; } /* --- Arrows --- */ .slider_mock .slick-prev, .slider_mock .slick-next { font-size: 0; display: block; position: absolute; bottom:-15px;right: 25px; width: 22px; height: 22px; padding: 0;cursor: pointer;color: #382623;background: none; line-height: 20px; border: #382623 1px solid; z-index: 2; border-radius:5px;-webkit-border-radius:5px;} .slider_mock .slick-prev:before, .slider_mock .slick-next:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; font-family: 'themify'; font-size: 11px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slider_mock .slick-prev { padding:0; margin: 0 121px 0 0; } .slider_mock .slick-prev:before { content: "\e64a";} .slider_mock .slick-next { padding: 0; } .slider_mock .slick-next:before { content: "\e649"; } /* ----------------------------------------------------------- .delighter ----------------------------------------------------------- */ .fade_in.delighter {transition: opacity .5s ease-out;opacity: 0.2;} .fade_in.delighter.started {opacity: 1;} .fade_in.delighter.ended {opacity: 1;}