@charset "utf-8";
/*--------------------------------------------------------
	reset 
---------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
ul,ol { list-style-type: none; }
em,strong,th,address { font-style: normal; font-weight: normal; text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; vertical-align: bottom; }
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }
a{cursor: pointer; outline: none;}
/*-------------------------------------------------
	base
--------------------------------------------------*/
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; position: relative; }
body {position: relative; background: #fff; color: #000; font-family: 'Montserrat', sans-serif; font-weight: 500; line-height: 1.5; font-size: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.sp{display:none}
.pc{display:inline}
@media (max-width:750px){
.sp{display:inline}
.pc{display:none}
}/*END*/

/*anime set
------------------------*/
.main_img,
.h1_1 img,
.h1_2 img,
.h1_3 img,
.side_l,
.side_r,
#concept .read,
#concept .img_box,
#concept .txt_box,
#concept .txt_box,
#design h2 img,
.dial_txt h3,
.dial_txt .txt,
.dial_txt .dial_btn,
.strap_img img,
.strap_txt,
#caseback h3,
#caseback .txt,
#caseback .txt_s,
.caseback_sl,
.img_box,
.txt_box_img,
.txt_box_inner,
#sb .txt_box,
.spec_h2_1,
.spec_h2_2,
.spec_h2_3,
#spec .inner_L,
#spec .inner_R
{ visibility: hidden;}

/*-------------------------------------------------
	header
--------------------------------------------------*/
header{ z-index: 80; width: 100%;height: 0px; position: fixed; }
header .s5s_logo a{ width: 100px; position:absolute; left: 30px!important; top: 30px!important; }
header .seiko_logo a{ width: 130px; position:absolute; left: 100%!important; top: 30px!important; margin-left: -160px; text-align: right; }
@media (max-width: 1600px) {
header .s5s_logo a{ width: 6.2vw; left: 1.85vw!important; top:1.85vw!important; }
header .seiko_logo a{ width: 8.17vw; top: 1.85vw!important; margin-left: -10.17vw; }
}/*END*/
@media (max-width: 1000px) {
header .s5s_logo a{ width: 8vw; left: 2.2vw!important; top:2.2vw!important; }
header .seiko_logo a{ width: 10vw; top: 1.85vw!important; margin-left: -12.17vw; }
}/*END*/
@media screen and (orientation: portrait) { 
header .s5s_logo a{ width: 100px; left: 30px!important; top: 30px!important;}
header .seiko_logo a{ width: 130px; top: 35px!important; margin-left: -160px; }
}/*END*/
@media screen and (max-width: 780px) and (orientation: portrait) { 
header .s5s_logo a{ width: 13vw; left: 3.8vw!important; top: 3.8vw!important; }
header .seiko_logo a{ width: 17vw; top: 4.5vw!important; margin-left: -22vw;}
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
header .s5s_logo a{ width: 17vw; left: 3.3vw!important; top: 3.3vw!important; }
header .seiko_logo a{ width: 20vw; top: 3.9vw!important; margin-left: -22vw;}
}/*END*/
header .black svg{ fill: #000; }
header .white svg{ fill: #fff; }
/*------ header logo ------*/
@media all and (-ms-high-contrast: none) {/* IE */
header a{ -ms-overflow-style: none; height: 60px !important; display: inline-block; padding: 0 !important; }
}/*END*/
/*scroll bar off*/
header a { -y: scroll; -ms-overflow-style: none;/* IE, Edge */ scrollbar-width: none;/* Firefox */}
header a::-webkit-scrollbar { display:none; /* Chrome, Safari */}

/*-------------------------------------------------
	contents
--------------------------------------------------*/
.wrapper{ position: relative; overflow: hidden;}

/*-------------------------------------------------
	side
--------------------------------------------------*/
.side { position: fixed; top:0%; height: 100vh; width: 16px; z-index: 5; }
.side_l{ left: 0% !important; margin-left:20px; }
.side_r{ left: 100% !important; margin-left:-36px;}
.side div{ width: 100%; height: 100vh; overflow: hidden;}
.side_l .black div{ background: url(../image/lide_lb.png)center center no-repeat; background-size: contain; }
.side_l .white div{ background: url(../image/lide_lw.png)center center no-repeat; background-size: contain; }
.side_r .black div{ background: url(../image/lide_rb.png)center center no-repeat; background-size: contain; }
.side_r .white div{ background: url(../image/lide_rw.png)center center no-repeat; background-size: contain; }
.side_l .none div{ background:none; background-size: contain; }
.side_r .none div{ background: none; background-size: contain; }
@media (max-width: 1000px) and (orientation: landscape) { 
.side { position: fixed; top:0%; height: 100vh; width: 1.4vw; max-width: 15px; z-index: 5; }
.side_l{ left: 0% !important; margin-left:15px; }
.side_r{ left: 100% !important; margin-left:-31px;}
}/*END*/
.main_side {display: none; }
@media (max-width: 640px) and (orientation: portrait) { 
.side { display: none; }
.main_sp_side { display: block; position: absolute; top:0%; height: 100%; width: 12px; z-index: 10; }
.main_sp_side.side_l{ left: 0% !important; margin-left:10px; }
.main_sp_side.side_r{ left: 100% !important; margin-left:-26px;}
.main_sp_side.side_l div{ width: 100%;height: 100%; background: url(../image/lide_lb.png)center center no-repeat; background-size: contain; }
.main_sp_side.side_r div{ width: 100%;height: 100%; background: url(../image/lide_rb.png)center center no-repeat; background-size: contain; }
}/*END*/
@media (max-width: 350px) and (orientation: portrait) { 
.main_sp_side { display: block; position: absolute; top:0%; height: 100%; width: 10px; z-index: 10; }
.main_sp_side.side_l{ left: 0% !important; margin-left:8px; }
.main_sp_side.side_r{ left: 100% !important; margin-left:-18px;}
.main_sp_side.side_l div{ width: 100%;height: 100%; background: url(../image/lide_lb.png)center center no-repeat; background-size: contain; }
.main_sp_side.side_r div{ width: 100%;height: 100%; background: url(../image/lide_rb.png)center center no-repeat; background-size: contain; }
}/*END*/

/*-------------------------------------------------
	main
--------------------------------------------------*/
#main{ width: 100%; max-height: 51vw; margin: 0 auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.main_inner{ width:72%; height: 29.6vw; position: relative; display: flex; align-items: center; }
.main_inner .main_img{ position: absolute; width: 52.5%; height: 100%; right: 0; top: 0; z-index: 0; display: flex; justify-content: space-between; }
.main_inner .main_img img{ width: 49%;}
.main_inner .main_img img.main_pc{ display: inline-block;}
.main_inner .main_img img.main_sp{ display: none;}
@media screen and (max-width: 1600px) {
.main_inner .main_img img.main_pc{ display: none;}
.main_inner .main_img img.main_sp{ display: inline-block;}
}/*END*/
.main_inner h1 { width: 38.3%; margin-left: 1.7%; }
.main_inner h1 span{ display: inline-block; overflow: hidden; }
.main_inner h1 span:nth-child(1){ width: 57.3%; }
.main_inner h1 span:nth-child(2){ width: 100%; margin: 0.5vw 0; }
.main_inner h1 span:nth-child(3){ width: 74.8%; }
@media screen and (max-width: 1024px) and (orientation: portrait) { 
#main{ width: 100%; max-height: 134vw;}
.main_inner{ width:70%; max-width: 54vh; height: auto; position: relative; display: block; }
/*main_img*/
.main_inner .main_img{ position: relative; width: 100%; margin: 0 auto;}
.main_inner .main_img .main_img_l{ position: relative; left: inherit; top: 0px;}
.main_inner .main_img .main_img_r{ position: relative; right: inherit; top: 0px;}
.main_inner .main_img img{ width: 48%; height: 100%; display: block;}
.main_inner h1 { width: 90%;margin-top: 8vw; margin-left: 0%; }
.main_inner h1 span:nth-child(2){ width: 100%; margin: 2vw 0; }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) { 
#main{ width: 100%; max-height: 174vw; margin: 0 auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.main_inner{ width:80%; max-width: 54vh; height: auto; position: relative; display: block; align-items: center; }
/*main_img*/
.main_inner .main_img{ position: relative; width: 95%; margin: 0 auto;}
.main_inner .main_img .main_img_l{ position: relative; left: inherit; top: 0px;}
.main_inner .main_img .main_img_r{ position: relative; right: inherit; top: 0px;}
.main_inner .main_img img{ width: 48%; display: block;}
.main_inner h1 { width: 90%; margin-top: 8vw; margin-left: 0%; }
.main_inner h1 span:nth-child(2){ width: 100%; margin: 2vw 0; }
}/*END*/
/*-------- scroll --------*/
.scroll{ height: 7vh; width: 80px; margin-left: -40px; position: absolute; left: 50%; bottom: 0; z-index: 200; transition: .3s;}
.scroll a{ display: block; width: 100%; height: 100%; position: relative; z-index: 200; transition: 0.3s; cursor: pointer;}
.scroll a .scroll_wheel{ width: 2px; height: 100%; opacity: 0; overflow:hidden; animation: scroll_wheel 0s 0s 1 forwards ease-out; background:rgba(0,0,0,1);display: block; position: absolute; left: 50%; bottom:0px; margin-left: -0.5px; transition: 0.3s; z-index: 200;}
@keyframes scroll_wheel { 0% { bottom:0%; opacity: 0;} 100% { bottom:0%; opacity: 1;}}
.scroll a .scroll_wheel:after { opacity: 1; width: 100%; height: 34%; animation: scroll_wheel_after 2.5s 0.5s infinite normal ease; background:#f00; position: absolute; content:" "; display:block; z-index: 11; left: 0%; top:-100%; }
@keyframes scroll_wheel_after { 0% { top:0%;} 30% { top:100%;} 31% { top:-34%;} 60% { top:0%;} 100% { top:0%;} }
.scroll a:hover .scroll_wheel { background:#f00;}
/*scroll_p*/
.scroll_p{ position: absolute; bottom: 115%; left: 50%; width: 80px; margin-left: -40px; font-size:11.5px; text-align: center; font-family: 'Montserrat', sans-serif; z-index: 200; pointer-events:none; }
@media screen and (max-width: 640px) {
.scroll_p{font-size:11px; }
}/*END*/
@media screen and (max-width: 400px) {
.scroll_p{font-size:10px; }
}/*END*/
/*-------- main_sl --------*/
.main_sl{ position: absolute; left:0; top: 0 !important; width: 100%; height: 100vh; z-index: -1; }
.main_sl li{ width: 100%; height: auto;}
.main_sl li img{ width: 100%;}

/*-------------------------------------------------
	concept
--------------------------------------------------*/
#concept{ padding-bottom:100px; background: url(../image/profile_bg.gif)center center no-repeat #1c1c1c ; color: #fff; }
#concept .inner{ text-align: center; }
/*-------- read --------*/
#concept .inner .read{ width: 90%; margin: 0 auto; padding: 85px 0; font-size: 24px; line-height: 1.75; font-weight: bold;}
@media screen and (max-width: 1300px) {
#concept .inner .read{ width: 80%; margin: 0 auto; padding: 85px 0; font-size: 22px; }
#concept .inner .read span{ display: inline-block; }
#concept .inner .read .read_br{display: none;}
}/*END*/
@media screen and (max-width: 940px) {
#concept .inner .read{ width: 80%; margin: 0 auto; padding: 85px 0; font-size: 20px; }
}/*END*/
@media screen and (max-width: 640px) {
#concept .inner .read{ width: 80%; margin: 0 auto; padding: 85px 0; font-size: 18px; }
#concept .inner .read span.span_mb{ display: inline-block; margin-bottom: 20px; }
}/*END*/
@media screen and (max-width: 450px) {
#concept{ padding-bottom:15vw; }
#concept .inner .read{ width: 85%; margin: 0 auto; padding: 13vw 0; font-size: 4.2vw; }
}/*END*/
@media screen and (max-width: 400px) {
#concept .inner .read{ width: 85%; margin: 0 auto; padding: 13vw 0; font-size: 4.4vw; }
}/*END*/
/*-------- prof --------*/
.prof{ width: 80%; max-width: 860px; margin: 0 auto; display: flex; justify-content:space-between;}
.prof .img_box{ width: 36.4%; max-width: 300px; }
.prof .txt_box{ width: 57%; text-align: left; display: flex; align-items: center; justify-content: center;}
.prof .txt_box h3{ font-size: 30px; letter-spacing: 2px; font-weight: bold; }
.prof .txt_box p{ margin-top: 14px; font-size: 15px; line-height: 1.6; }
/*sns*/
.prof .txt_box ul.sns{ padding: 27px 0 37px; display: flex; justify-content:flex-start;}
.prof .txt_box ul.sns li{ width:32px; margin-right: 10px; padding: 0;}
.prof .txt_box ul.sns li img{ transition: 0.3s;}
.prof .txt_box ul.sns li img:hover{ opacity: 0.6;}
.prof .txt_box .sign{ max-width: 364px;}
@media screen and (max-width: 640px) {
.prof{ width: 80%; max-width: 860px; margin: 0 auto; display: block; text-align: center;}
.prof .img_box{ width: 81%; max-width: 900px; margin: 0 auto; }
.prof .txt_box{ width: 100%; margin: 30px auto 0; text-align: center; display: flex; align-items: center; justify-content: center;}
.prof .txt_box h3{ font-size: 26px; letter-spacing: 0px; font-weight: bold; }
.prof .txt_box p{ margin-top: 14px; font-size: 15px; line-height: 1.8; text-align: left; }
.prof .txt_box ul.sns{ padding: 27px 0 30px; display: flex; justify-content:center;}
.prof .txt_box ul.sns li{ width:36px; margin: 0 10px; padding: 0;}
.prof .txt_box .sign{ width: 90%; max-width: 364px; margin: 0 auto;}
}/*END*/
@media screen and (max-width: 400px) {
.prof .txt_box p{ margin-top: 14px; font-size: 14px; line-height: 1.8; text-align: left; }
}/*END*/
@media screen and (max-width: 400px) {
.prof .txt_box p br{ display: none; }
}/*END*/
@media screen and (max-width: 359px) {
.prof .txt_box h3{ font-size: 24px; letter-spacing: 0px; }
}/*END*/

/*-------------------------------------------------
	title txt
--------------------------------------------------*/
#design h3 { font-size: 50px; font-family: 'Montserrat', sans-serif; font-weight: 600;}
#design p.txt { font-size: 16px; line-height: 1.7;}
#design p.txt_s{ font-size: 14px; line-height: 1.5; }
#spec p.txt_s { font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) {
#design h3 { font-size: 35px; }
#design p.txt { font-size: 15px; line-height: 1.7;}
#design p.txt_s{ font-size: 13px; line-height: 1.5;}
#spec p.txt_s { font-size: 13px; line-height: 1.5;}
}/*END*/
@media (max-width: 390px) {
#design h3 { font-size: 9vw; }
}/*END*/

/*-------------------------------------------------
	design
--------------------------------------------------*/
#design h2{ padding: 100px 0 0; width: 151px; margin: 0 auto; overflow: hidden; }
@media (max-width: 1350px) {
#design h2{ padding: 7.5vw 0 0; width: 151px; margin: 0 auto; }
}/*END*/
@media (max-width: 960px) {
#design h2{ padding: 80px 0 0; width: 15.7vw; margin: 0 auto; }
}/*END*/
@media (max-width: 800px) {
#design h2{ padding: 10vw 0 0; width: 15.7vw; margin: 0 auto; }
}/*END*/
@media (max-width: 640px) {
#design h2{ padding: 15vw 0 0; width: 26vw; margin: 0 auto; }
}/*END*/

/*-----------------------
	dial 
------------------------*/
#dial{ margin: 50px auto 0; width: 75%; max-width: 1080px; display: flex; justify-content:space-between; overflow: hidden;}
.dial_img { width: 52.8%; }
.dial_txt { width: 38%; display: flex; align-items: center; justify-content: center; }
/*dial_txt_inner*/
.dial_txt_inner{ width: 410px; margin-bottom: 150px; }
@media (max-width: 1060px) {
#dial{ margin: 50px auto 0; width: 750px; }
.dial_img { width: 50%; }
.dial_txt { width: 320px; display: flex; align-items: center; justify-content: center; }
.dial_txt_inner{ width: 100%; margin-bottom: 150px; }
}/*END*/
#dial p.txt{margin-top: 10px;}
/*dial_btn*/
.dial_btn { margin-top: 50px; display: flex; justify-content:flex-start; }
.dial_btn li div {position: relative; display:block; border: solid 1px #000; color:#000; text-decoration:none; background:#fff; padding:11px 40px; transition: 0.3s; cursor: pointer;}
.dial_btn li.active div::before{ width: 2px; height: 15px; position: absolute; left: 50%; top: -8px; margin-left: -1px; content: ''; display: block; background: #f00;}
.dial_btn li div::before{ width: 2px; height: 0px; position: absolute; left: 50%; top: -12px; margin-left: -1px; content: ''; display: block; background: #f00; transition: 0.3s;}
.dial_btn li div:hover::before{ width: 2px; height: 15px; position: absolute; left: 50%; top: -8px; margin-left: -1px; content: ''; display: block; background: #f00; transition: 0.3s;}
.dial_btn li.active div { color:#fff; background:#000; }
@media (max-width: 960px) {
#dial{ margin: 80px auto 0; width: 74%; max-width: 550px; display: block; }
.dial_img { width: 100%; }
.dial_txt_inner{ width: 420px; margin-bottom: 12vw; }
.dial_txt { position: relative; padding-top: 140px; width: 100%; display: flex; align-items: center; justify-content: center; }
.dial_btn { position: absolute; top: 0; left: 0; margin-top: 60px; width: 100%; display: flex;justify-content: center; }
}/*END*/
@media (max-width: 800px) {
#dial{ margin: 10vw auto 0; width: 74%; max-width: 550px; display: block; }
}/*END*/
@media (max-width: 640px) {
#dial{ margin: 13vw auto 0; width: 74%; max-width: 550px; display: block; }
.dial_txt_inner{ width: 420px; margin-bottom: 15vw; }
.dial_btn li div { padding:8px 30px; }
.dial_btn li.active div::before{ width: 2px; height: 12px; position: absolute; left: 50%; top: -6px; margin-left: -1px; content: ''; display: block; background: #f00;}
.dial_btn li div::before{ width: 2px; height: 0px; position: absolute; left: 50%; top: -8px; margin-left: -1px; content: ''; display: block; background: #f00; transition: 0.3s;}
.dial_btn li div:hover::before{ width: 2px; height: 12px; position: absolute; left: 50%; top: -6px; margin-left: -1px; content: ''; display: block; background: #f00; transition: 0.3s;}
}/*END*/
@media (max-width: 400px) {
#dial{ margin: 13vw auto 0; width: 74%; max-width: 550px; display: block; }
.dial_btn li div { padding:8px 18px; }
}/*END*/
.dial_pc{ display: block;}
.dial_sp{ display: none;}
@media (max-width: 960px) {
.dial_pc{ display: none;}
.dial_sp{ display: block;}
}/*END*/

/*--------------------------
	strap
---------------------------*/
#strap{ background:#1c1c1c; color: #fff; overflow: hidden; }
#strap .inner{ max-width: 894px; width: 70%; margin: 0 auto; display: flex; justify-content:space-between; flex-flow: row-reverse; }
#strap .inner .strap_img{ width:51.9%; }
#strap .inner .strap_img img{ max-height: 800px;}
#strap .inner .strap_txt{ width:360px; display: flex; align-items: center; }
#strap .inner .strap_txt p.txt{margin-top: 10px;}
@media (max-width: 960px) {
#strap .inner{ max-width: 100%; width: 100%; margin: 0 auto; display: block; }
#strap .inner .strap_img{ width:100%; padding: 12vw 0 5vw; }
#strap .inner .strap_txt{ width: 74%; max-width:360px; margin: 0 auto; padding: 0 0 16vw;display: block; }
}/*END*/
@media (max-width: 640px) {
#strap .inner .strap_txt{ width: 74%; max-width:320px;}
}/*END*/
.strap_pc{ display: block;}
.strap_sp{ display: none;}
@media (max-width:960px) {
.strap_pc{ display: none;}
.strap_sp{ display: block;}
}/*END*/

/*--------------------------
	Case back
---------------------------*/
#caseback{ position: relative; z-index: 1; padding: 100px 0 90px;}
@media (max-width: 1400px) {
#caseback{ padding: 7.2vw 0 80px;}
}/*END*/
@media (max-width: 1200px) {
#caseback{ padding: 80px 0 80px;}
}/*END*/
@media (max-width: 960px) {
#caseback{ padding: 80px 0 8vw;}
}/*END*/
@media (max-width: 640px) {
#caseback{ padding: 70px 0 6vw;}
}/*END*/
@media (max-width: 500px) {
#caseback{ padding: 13vw 0 6vw;}
}/*END*/
#caseback .inner{ max-width: 490px; width: 80%; margin: 0 auto;}
#caseback .inner h3{ text-align: center;}
#caseback .inner .txt{margin-top: 40px;}
#caseback .inner .txt_s{margin-top: 20px;}
@media (max-width: 950px) {
#caseback .inner{ max-width: 490px; width: 74%; }
}/*END*/
@media (max-width: 640px) {
#caseback .inner{ max-width:320px; width: 74%;}
#caseback .inner .txt{ margin-top: 4vw;}
}/*END*/
/*------caseback_sl------*/
.caseback_sl{ width: 100%; margin:0px auto; height:auto; position:relative;}
.caseback_sl img{width:100%; margin: 0;}
.caseback_sl li{ outline: none;}
/*caseback_sl_inner*/
.caseback_sl .caseback_sl_inner{ position: relative; width: 85%; max-width: 1000px; padding: 85px 0 105px; margin: 0 auto; cursor: move; }
.caseback_sl .caseback_sl_inner .back{ width: 43%; margin: 0 auto; text-align: center; }
.caseback_sl .caseback_sl_inner .back p{ display: none; }
.caseback_sl .caseback_sl_inner .front{ width: 19%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.caseback_sl .caseback_sl_inner .front img{ width: 53%; margin: 0 auto;}
.caseback_sl .caseback_sl_inner .front p{ margin: 20px auto 0; display: inline-block; border: solid 1px #000; color: #000; text-align: center; font-size: 14px; line-height: 1; padding: 4px 10px ; font-family: 'Montserrat', sans-serif;}
.caseback_sl .caseback_sl_inner .illust{ width: 19%; height: 100%; display: flex; align-items: center; justify-content: center;}
.caseback_sl li:nth-child(even) .caseback_sl_inner .front{ position: absolute; left: 2%; top: 0%; }
.caseback_sl li:nth-child(even) .caseback_sl_inner .illust{ position: absolute; right: 2%; top: 0%; }
.caseback_sl li:nth-child(odd) .caseback_sl_inner .front{ position: absolute; right: 2%; top: 0%; }
.caseback_sl li:nth-child(odd) .caseback_sl_inner .illust{ position: absolute; left: 0; top: 0%; }
@media (max-width: 1400px) {
.caseback_sl .caseback_sl_inner{ position: relative; width: 85%; max-width: 1000px; padding: 6vw 0 105px; margin: 0 auto; }
}/*END*/
@media (max-width: 1200px) {
.caseback_sl .caseback_sl_inner{ position: relative; width: 75%; max-width: 1000px; padding: 6vw 0 105px; margin: 0 auto; }
.caseback_sl .caseback_sl_inner .back{ width: 46%; margin: 0 auto; text-align: center; }
.caseback_sl .caseback_sl_inner .front{ width: 22%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.caseback_sl .caseback_sl_inner .front img{ width: 53%; margin: 0 auto;}
.caseback_sl .caseback_sl_inner .illust{ width: 22%; height: 100%; display: flex; align-items: center; justify-content: center;}
.caseback_sl li:nth-child(even) .caseback_sl_inner .front{ position: absolute; left: 0%; top: 0%; }
.caseback_sl li:nth-child(even) .caseback_sl_inner .illust{ position: absolute; right: 0%; top: 0%; }
.caseback_sl li:nth-child(odd) .caseback_sl_inner .front{ position: absolute; right: 0%; top: 0%; }
}/*END*/
@media (max-width: 960px) {
.caseback_sl .caseback_sl_inner{ position: relative; width: 75%; max-width: 1000px; padding: 6vw 0; margin: 0 auto; }
.caseback_sl .caseback_sl_inner .back{ width: 46%; margin: 0 auto; text-align: center; }
.caseback_sl .caseback_sl_inner .front{ width: 22%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.caseback_sl .caseback_sl_inner .front img{ width: 53%; margin: 0 auto;}
.caseback_sl .caseback_sl_inner .front p{ margin: 2vw auto 0; display: inline-block; border: solid 1px #000; color: #000; text-align: center; font-size: 12px; line-height: 1; padding: 3px 8px ; font-family: 'Montserrat', sans-serif;}
.caseback_sl .caseback_sl_inner .illust{ width: 22%; height: 100%; display: flex; align-items: center; justify-content: center;}
}/*END*/
@media (max-width: 640px) {
.caseback_sl .caseback_sl_inner{ position: relative; width: 75%; max-width: 1000px; padding: 10vw 0 6vw; margin: 0 auto; }
.caseback_sl .caseback_sl_inner .back{ width: 85%; margin: 0 auto; text-align: center; }
.caseback_sl .caseback_sl_inner .back p{ margin: 0px auto 0; display: inline-block; border: solid 1px #000; color: #000; text-align: center; font-size: 12px; line-height: 1; padding: 2px 6px ; }
.caseback_sl .caseback_sl_inner .front{ width: 49%; height: 100%; text-align: center; display: black;}
.caseback_sl .caseback_sl_inner .front img{ width: 53%; margin: 0 auto;}
.caseback_sl .caseback_sl_inner .front p{ display: none;}
.caseback_sl .caseback_sl_inner .illust{ width: 49%; height: 100%; display: black;}
.caseback_sl .caseback_sl_inner .box_sp{ width: 82%; margin: 0 auto; display: flex; justify-content: space-between; padding: 6vw 0 ;}
.caseback_sl .caseback_sl_inner .front,
.caseback_sl .caseback_sl_inner .illust{ position: relative !important; left: initial; right: initial; top: initial; }
.caseback_sl li:nth-child(odd) .caseback_sl_inner .illust{ margin-top: -2vw; }
}/*END*/

 /* Slider < > dots
 ----------------------------------------------------*/
 /* < > btn */
 .caseback_sl .slick-prev,
 .caseback_sl .slick-next { position: absolute; z-index: 999; top:50%; width: 30px; height: 30px; margin-top: -15px; transition: 0.2s; outline: none; cursor: pointer;}
 .caseback_sl .slick-prev:hover,
 .caseback_sl .slick-next:hover {opacity: 0.4!important;}
 .caseback_sl .slick-prev { left: 12%; background: url("../image/sl_prev.png") no-repeat left center ; background-size: contain;}
 .caseback_sl .slick-next { right: 12%; background: url("../image/sl_next.png") no-repeat right center; background-size: contain;}
 @media (max-width: 1500px){
.caseback_sl .slick-prev { left: 9%; }
.caseback_sl .slick-next { right: 9%; }
}/*END*/
@media (max-width: 1350px){
.caseback_sl .slick-prev { left: 7%; }
.caseback_sl .slick-next { right: 7%; }
}/*END*/
 @media (max-width: 960px){
.caseback_sl .slick-prev { left: 6%; }
.caseback_sl .slick-next { right: 6%; }
}/*END*/
 @media (max-width: 640px){
 .caseback_sl .slick-prev,
 .caseback_sl .slick-next { position: absolute; z-index: 99; top:50%; width: 26px; height: 26px; margin-top: -13px;}
 .caseback_sl .slick-prev { left: 5%; }
 .caseback_sl .slick-next { right: 5%; }
 }/*END*/
 /*dots*/
 .caseback_sl ul.slick-dots{position: absolute; bottom: 0px; left: 0%; z-index: 500; width:100%; margin:0 auto !important; padding: 0; list-style: none; text-align: center; display: flex !important; justify-content: center;z-index:1; }
 .caseback_sl ul.slick-dots li{ position: relative; width: 80px!important; height: 40px!important; margin: 0 2px; }
 .caseback_sl ul.slick-dots li button{ font-size: 0; line-height: 0; display: block; cursor: pointer; border: 0; outline: none; background: transparent; width: 100%; height: 100%; } /* OFF */
 .caseback_sl ul.slick-dots li button:before{ position: absolute; top:50%; left: 0;content: ''; margin-top: -2px; opacity: 1; width: 100%; height: 4px; background: #d9d9d9; transition: 0.3s;}/* focus */
 .caseback_sl ul.slick-dots li button:hover:before,/* ON */
 .caseback_sl ul.slick-dots li.slick-active button:before{ background: #c00; cursor: pointer;}/* focus */
 @media (max-width: 400px){
.caseback_sl ul.slick-dots li{ position: relative; width: 12%!important; height: 40px!important; margin: 0 2px; }
.caseback_sl ul.slick-dots li button:before{ height: 2px;}/* focus */
 }/*END*/

/*-------------------------------------------------
	box
--------------------------------------------------*/
#box{ position: relative; width: 100%;}
#box .inner{ width: 85%; max-width: 1220px; margin: 0 auto; padding: 144px 0 0; display: flex; justify-content:space-between; flex-flow: row-reverse;}
/*img_box*/
#box .inner .img_box{ width: 52%; text-align: right;}
#box .inner .img_box img{ width: 100%; }
/*txt_box*/
#box .inner .txt_box{ width: 48%;}
#box .inner .txt_box .txt_box_inner{ margin:15px 0 0 40%; width: 320px; transition: 0.3s; }
#box .inner .txt_box .txt{margin-top: 15px; }
#box .inner .txt_box .txt br{display: none; }
#box .inner .txt_box img{ width: 77.4%; margin:110px 0 0 7%; transition: 0.3s; }
@media (max-width: 1550px){
#box .inner{ width: 85%; max-width: 1220px; margin: 0 auto; padding: 9vw 0 0;}
}/*END*/
@media (max-width: 1500px){
#box .inner .txt_box img{ width: 77.4%; margin:110px 0 0 12%; }
}/*END*/
@media (max-width: 1440px){
#box .inner .txt_box .txt_box_inner{ margin:15px 0 0 40%; width: 320px;}
#box .inner .txt_box img{ width: 77.4%; margin:7.5vw 0 0 12%; }
#box .inner .txt_box .txt{margin-top: 15px; width: 330px; }
}/*END*/
@media (max-width: 1200px){
#box .inner{ width: 85%; max-width: 1220px; margin: 0 auto; padding: 9vw 0 2vw;}
#box .inner .txt_box .txt br{display: inline-block; }
}/*END*/
@media (max-width: 1000px){
#box .inner .txt_box .txt{margin-top: 15px; width:280px; }
#box .inner .txt_box .txt_box_inner{ margin:15px 0 0 35%; width: 320px;}
}/*END*/
@media (max-width: 860px){
#box .inner{ width: 80%; max-width: 1220px; margin: 0 0 0 12.5%; padding: 50px 0; display: block;}
/*img_box*/
#box .inner .img_box{ width: 86%; margin: 0 auto; text-align: right;}
/*txt_box*/
#box .inner .txt_box{ width: 100%; }
#box .inner .txt_box .txt_box_inner{ margin:-30px auto 0; width: 88%; max-width: 330px; }
#box .inner .txt_box img{ width: 90%; margin:7.5vw 0 0 5%; }
#box .inner .txt_box .txt{margin-top: 5px; width: 100%; }
#box .inner .txt_box .txt br{display: none; }
}/*END*/
#box .box_bg{ width: 92%; height: 120%; background: #e6e8ec; position: absolute; right: 0; top: 0; z-index: -1;}

/*-------------------------------------------------
	Special Booklet
--------------------------------------------------*/
#sb{ position: relative; margin-top: -40px; padding: 70px 0 10vw; overflow: hidden; }
#sb .inner{ width: 640px; margin: 0 auto; padding:0 0 130px 10%; display: flex; justify-content:space-between; flex-flow: row-reverse; transition: 0.3s; }
#sb .inner .txt_box{ width:63.9%; display: flex; align-items: center; }
#sb .inner .txt_box h3{ margin-left: -3px; width: 120%; }
#sb .inner .txt_box .txt{ margin: 15px 0 15px; width: 100%; }
#sb .inner .img_box{ width:27.4%; text-align: right; }
@media (max-width: 1500px){
#sb .inner{ padding:0 5% 130px 0%; }
}/*END*/
@media (max-width: 1000px){
#sb .inner{ padding:0 5% 10vw 0%; }
#sb .inner .img_box{ width:27.4%; text-align: right; }
#sb .inner .img_box img{ width:90%; }
}/*END*/
@media (max-width: 860px){
#sb{ position: relative; margin-top: -40px; padding: 12vw 0 15vw; overflow: hidden; }
#sb .inner{ width: 85%; max-width: 640px; margin: 0 0 0 10%; padding:0 0 12vw 0%; display: block; }
#sb .inner .txt_box{ width:84%; max-width: 520px; margin: 0 auto; display: block; align-items: center; }
#sb .inner .img_box{ width:44%; margin: 7vw auto 0; }
#sb .inner .img_box img{ width:100%; }
}/*END*/
@media (max-width: 640px){
#sb .inner{ width: 85%; max-width: 640px; margin: 0 0 0 5%; padding:0 0 12vw 0%; display: block; }
}/*END*/
@media (max-width: 440px){
#sb .inner .txt_box h3{ font-size: 8vw; }
}/*END*/
.sb_bg{ width: 92%; height: 100%; background: #e6e8ec; position: absolute; left: 0px; top:0px; z-index: -1;}
/*----- sl -----*/
.sb_inner{position: relative; margin-top: 0px; }
/*sl*/
.sl{ width: 100%; pointer-events: none; position: relative; z-index: 2;  }
.sl img{ width: 100%; }
/*sb_name*/
.sb_name{ position: absolute !important; left: 0px; top: -1.2vw; z-index: 1; height: 25vw;}
.sb_name::after { content:''; display:block; clear:both;}
.sb_name li{ float: left; font-size: 17vw; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-right: 5vw; outline: none;}
@media (max-width: 899px) {
.sb_name{ position: absolute !important; left: 0px; top: 2vw;}
.sb_name li{ float: left; font-size: 22vw; }
}/*END*/
@media (max-width: 849px) {
.sb_name{ position: absolute !important; left: 0px; top: 7.5vw; }
.sb_name li{ float: left; font-size: 28vw; }
}/*END*/

/*-------------------------------------------------
	collections
--------------------------------------------------*/
#spec { width: 95%; max-width: 2500px; margin: 0 auto; padding: 0; position: relative; text-align: center; background:#fff; color: #000; z-index: 0; overflow: hidden; }
@media screen and (max-width: 700px) {
#spec { width: 90%; }
}/*END*/
/*h2*/
#spec h2 { padding: 100px 0 0; font-family: 'Montserrat', sans-serif; font-weight: 600; }
#spec h2 span{ display: block; letter-spacing: 0px; }
#spec h2 .spec_h2_1{ font-size:43px; line-height: 1.25;}
#spec h2 .spec_h2_2{ font-size:89px; line-height: 1.15;}
#spec h2 .spec_h2_3{ font-size:53px; line-height: 1.15;}
@media screen and (max-width: 750px) {
#spec h2 { padding: 14vw 0 0; }
#spec h2 .spec_h2_1{ font-size:5.72vw; }
#spec h2 .spec_h2_2{ font-size:11.9vw; }
#spec h2 .spec_h2_3{ font-size:7.1vw; }
}/*END*/
/*wrap*/
#spec .wrap{ width: 100%; margin: 85px 0 85px; padding:20px 0 ; transition: 0.5s; display: flex; justify-content:space-between; position: relative; }
#spec .btm_txt_s{ margin: 0 auto 85px; width: 80%;}
#spec .btm_txt_s span{ display: inline-block; }
@media screen and (max-width: 1199px) {
#spec .wrap{display: block; margin: 30px 0 0px; }
#spec .btm_txt_s{ margin: 60px auto 85px; }
}/*END*/
@media screen and (max-width: 700px) {
#spec .wrap{ max-width: 640px; margin: 0 auto; padding: 9vw 0 30px;}
#spec .btm_txt_s{ margin: 20px auto 60px; }
}/*END*/
@media screen and (max-width: 408px) {
#spec .btm_txt_s span{ display: inline; }
}/*END*/
/*spec_line*/
#spec .wrap .spec_line{ height: 100%; width: 20px; position: absolute; left: 50%; top: 0; margin:0 0 0 -10px; background: url("../image/spec_line.gif") center top no-repeat; background-size: contain;}
@media screen and (max-width: 1199px) {
#spec .wrap .spec_line{ height: 10px; width: 80%; position: relative; left: 10%; top: 0; margin:0 0 0 0; background: url("../image/spec_line_sp.gif") left center ; background-size: 350px;}
#spec .wrap .spec_line.spec_line_btm{ margin:10vw 0 0 0; }
}/*END*/
@media screen and (max-width: 700px) {
#spec .wrap .spec_line{ height: 20px; width: 90%; position: relative; left: 5%; top: 0; margin:0 0 0 0; background: url("../image/spec_line_sp.gif") center center no-repeat; background-size: contain;}
#spec .wrap .spec_line.spec_line_btm{ margin:10vw 0 0 0; }
}/*END*/
.spec01,
.spec02{ width: 50%; display: flex; justify-content:space-between;}
@media screen and (max-width: 1199px) {
.spec01,
.spec02{ width: 100%; display: block; }
.spec01{padding:50px 0 100px; }
.spec02{padding:100px 0 0 0; }
}/*END*/
@media screen and (max-width: 700px) {
.spec01{padding:0vw 0 14vw; }
.spec02{padding:8vw 0 0 0; }
}/*END*/
/*#spec .inner*/
#spec .wrap .inner{ max-width: 540px; width: 85%; margin: 0 auto; display: flex; justify-content:space-between;}
#spec .wrap .inner_L{ width: 50%; }
@media screen and (max-width: 700px) {
#spec .wrap .inner_L{ width: 70%; margin: 0 auto;}
}/*END*/
#spec .wrap .inner_R{margin-top: 95px; width: 50%; }
@media screen and (max-width: 1330px) {
#spec .wrap .inner_R{ margin-top: 7vw;}
}/*END*/
@media screen and (max-width: 1250px) {
#spec .wrap .inner_R{ margin-top: 7vw;}
}/*END*/
@media screen and (max-width: 1199px) {
#spec .wrap .inner_R{ margin-top: 95px;}
}/*END*/
@media screen and (max-width: 700px) {
#spec .wrap .inner{ max-width: 540px; width: 85%; margin: 0 auto; display: block; }
#spec .wrap .inner_R{ margin-top: 10vw; width: 100%; }
}/*END*/
/*--------- img ---------*/
#spec .collections_img { max-width: 295px; margin: 0 auto; }
@media screen and (max-width: 750px) {
#spec .collections_img { max-width: 300px; margin: 0px auto 0; }
}/*END*/
@media screen and (max-width: 700px) {
#spec .collections_img { max-width: 300px; width: 100%; margin: 20px auto 0; }
}/*END*/
/*--------- txt ---------*/
.collections_name { margin-top: 0px; font-size: 16px!important; line-height: 1.6; letter-spacing: 1px; font-weight: 700!important;}
.collections_no { margin-top: 0px; font-size: 26px; line-height: 1; letter-spacing: 1px; background: #000; color: #fff; display: inline-block; padding: 1px 4px 1px 6px; font-family: 'Montserrat', sans-serif; font-weight: 600;}
.collections_movement { margin-top: 15px; font-size: 14px; line-height: 1.6; font-weight: 500; }
.collections_price { margin-top: 15px; font-size: 20px; line-height: 1; letter-spacing: 0px;font-weight: 500;}
.collections_price span { font-size: 12px; letter-spacing: 0px; margin-left: 3px;}
.collections_limited { margin-top: 15px; font-size: 14px; line-height: 1.6; letter-spacing: 0px; font-weight: 500; position: relative; display: inline-block;}
.collections_limited::after { position: absolute; display: block; content: ''; width: 100%; height: 2px; background: #111; }
.collections_release { margin-top: 20px; }
.collections_release p{ font-size: 14px; line-height: 1.6; letter-spacing: 0px; font-weight: 500;}
.collections_release p:nth-child(1){padding-bottom: 3px;}
.collections_txt{ width: 140%; margin: 20px 0 0 -20%; font-size: 13.5px; line-height: 1.6; letter-spacing: 0px; font-weight: 500; }
@media screen and (max-width: 450px) {
.collections_no { margin-top: 0px; font-size: 23px; line-height: 1; letter-spacing: 1px;}
}/*END*/
@media screen and (max-width: 430px) {
.collections_release p{ font-size: 13px; line-height: 1.6; letter-spacing: 0px;}
.collections_txt{ width: 140%; margin: 20px 0 0 -20%; font-size: 13px; letter-spacing: 0px;}
}/*END*/
/*collections_btn*/
.collections_btn { max-width: 190px; margin: 0px auto 0; }
.collections_btn a { margin-top: 10px; background: none; color: #000; border: solid 1px #000; font-size: 14px; line-height: 1; font-weight: 500; padding: 14px 0 16px; letter-spacing: 0px; display: block; transition: 0.3s; text-decoration: none; opacity: 1; }
.collections_btn a span{ width: 12px; height: 17px; margin: 0 5px -2px; display: inline-block; background: url("../image/map_icon.png") center bottom no-repeat; background-size: cover; }
.collections_btn a:hover span{ width: 12px; height: 17px; margin: 0 5px -2px; display: inline-block; background: url("../image/map_icon.png") center top no-repeat; background-size: cover; }
.collections_btn a:hover { background: #000; color: #fff; }
.collections_btn.btm_spec{ margin-top: 25px;}

/*-------------------------------------------------
	gotop
--------------------------------------------------*/
.gotop { position:absolute; bottom:0px; right:30px;width:50px; height:80px; box-sizing:border-box; border-radius: 0%; z-index: 2000!important; }
.gotop a{ position: relative; display:block; background:rgba(0,0,0,1); text-decoration:none;width:60px; height:60px; box-sizing:border-box; border-radius: 0%; z-index: 11; transition: 0.3s;border-radius: 50%; }
.gotop a::after { position:absolute; top:50%; left:50%; content: ''; width: 24px; height: 24px; margin: -12px 0 0 -12px; background: url("../image/page_top.png") no-repeat ; background-size: cover;}
.gotop a:hover { background:rgba(60,60,60,0.5); }
@media (max-width: 500px) {
.gotop { position:absolute; bottom:0px; right:10px; width:40px; height:50px; }
.gotop a{ width:40px; height:40px; }
.gotop a::after { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}/*END*/

/*-------------------------------------------------
	footer
--------------------------------------------------*/
footer{ background: #000; width: 100%; height: auto; }
footer::after { content:" "; display:block; clear:both;}
.foot_l{ float: left; margin: 59px 0 0 40px;}
.foot_l .foot_logo { float: left; line-height: 1; margin-bottom: 53px; }
.foot_l .foot_logo img { width: 131px; transition: 0.2s; }
.foot_l .foot_logo a:hover img{ opacity: 0.6;}
.foot_l .copyright { float: left; margin: 13px 0 0 32px; font-size: 12px; line-height: 1; letter-spacing: 1px; color: #fff; }
@media (max-width: 750px) { 
.foot_l{ float: none; margin: 39px 0 0 0px; text-align: center;}
.foot_l .foot_logo { float: none; line-height: 1; margin-bottom: 23px; }
.foot_l .copyright { float: none; margin: 13px 0 0 0px; padding-bottom: 30px;}
}/*END*/
.foot_r { float: right; padding-top: 58px; margin: 0 35px 0 0 ; }
.foot_r .sns { display: flex; list-style-type: none; }
.foot_r .sns img{ width: 100%;}
.foot_r .sns > li { width: 30px; margin-right: 12px; padding: 5px; line-height: 1; border-radius: 50%; transition: 0.3s; background: #3c3c3c;}
.foot_r .sns > li:nth-child(2){ margin-right: 0; }
.foot_r .sns > li:hover{ opacity: 0.5; }
@media (max-width: 750px) {
.foot_r { float: none; padding-top: 40px; margin: 0px; }
.foot_r .sns { position: static; margin-bottom: 20px; justify-content: center; }
.foot_r .sns > li { margin-right: 10px; }
}/*END*/