@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%; height: auto; vertical-align: bottom; }
a{ outline: none;}
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }
/*-------------------------------------------------
	base
--------------------------------------------------*/
body {position: relative; color: #000; background: #000;font-family: 'Noto Sans JP', sans-serif;font-weight: 400;font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
/*txt img 選択時*/
::selection { background:#666; }
::-moz-selection { background:#666; }/*Firefox*/
img::selection { background:none; }
img::-moz-selection { background:none; }/*Firefox*/
/*cookie*/
#onetrust-banner-sdk{ outline: none; }
video {display: block;}
/*-------------------------------------------------
	font アンチエイリアス
--------------------------------------------------*/
/* 解像度 1x：subpixel、解像度 2x：grayscale */
h1,
h2,
p
{ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; }
@media only screen and 
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
h1,
h2,
p{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
/*-------------------------------------------------
	anime set
--------------------------------------------------*/
#main_bg,
h1
{ visibility: hidden; }
/*-------------------------------------------------
	fade
--------------------------------------------------*/
.wrap_f{ width: 100%; height: 100%; position: relative;}
.wrap_f::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; pointer-events: none; user-select: none; z-index: 8888; opacity: 1; transition:2s; }
.wrap_f.fade::after { opacity: 0; pointer-events: none; user-select: none; }

/*-------------------------------------------------
	header
--------------------------------------------------*/
header{ position: absolute; left: 0px; top: 0px; z-index: 9999; width: 100%; }
header div{ margin: 0; line-height: 1; font-size: 1px; display: block; }
header div img{ width: 100%; vertical-align: top;}
/*------ header logo ------*/
header .seiko_logo{ width: 130px; position:absolute; right: 30px; top: 30px; text-align: right;}
header .prospex_logo{ width: 240px; position:absolute; left: 30px; top: 30px; }
@media (max-width: 1600px) {
header .seiko_logo{ width: 8.17vw; right: 1.85vw; top: 1.85vw; }
header .prospex_logo{ width: 14.9vw; left: 1.9vw; top: 1.8vw; }
}/*END*/
@media screen and (orientation: portrait) {
header .seiko_logo{ width: 130px; right: 30px; top: 30px; }
header .prospex_logo{ width: 220px; left: 30px; top: 30px; }
}/*END*/
@media screen and (max-width: 780px) and (orientation: portrait) { 
header .seiko_logo{ width: 17vw; right: 3.8vw; top: 3.8vw; }
header .prospex_logo{ width: 28vw; left: 3.8vw; top: 3.8vw; }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
header .seiko_logo{ width: 20vw; right: 3.8vw; top: 3.8vw; }
header .prospex_logo{ width: 36vw; left: 3.8vw; top: 3.8vw; }
}/*END*/

/*-------------------------------------------------
	contents
--------------------------------------------------*/
.wrapper{ position: relative; overflow: hidden;}
/*-------------------------------------------------
	#main
--------------------------------------------------*/
#main{ height: 50vw; width: 100%; position: relative; left: 0px; top: 0px;}
#main .inner { position: relative; top:0vw; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
#main .inner h1 { width:53.5vw; }
@media screen and (orientation: portrait) {
#main{ height: 125vw; width: 100%; position: relative; left: 0px; top: 0px; }
#main .inner h1 { width:70%; }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
#main{ height: 173.5vw; }
#main .inner h1 { width:75%; }
}/*END*/
@media screen and (max-width: 400px) and (orientation: portrait) {
#main{ height: 146.1vw;}
#main .inner h1 { width:75%; }
}/*END*/

/*main_bg*/
#main_bg { background: url("../img/main_img_mm.jpg") no-repeat center top ; background-size: contain; position: absolute; z-index: -1; left: 0px; top: 0px; width: 100%; height: 100%; }
@media screen and (orientation: portrait) {
#main_bg { background: url("../img/main_tab.jpg") no-repeat center top ; background-size: contain;}
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
#main_bg { background: url("../img/main_sp2.jpg") no-repeat center top ; background-size: contain;}
}/*END*/
@media screen and (max-width: 400px) and (orientation: portrait) {
#main_bg { background: url("../img/main_sp.jpg") no-repeat center top ; background-size: contain;}
}/*END*/

/*---------------------
	scroll
-----------------------*/
.scroll{ height: 95px; width: 80px; z-index: 200; transition: .3s;position: absolute; left: 50%; bottom:0px; margin-left: -40px; }
.scroll a{ display: block; width: 100%; height: 100%;z-index: 200; transition: 0.3s; cursor: pointer;}
.scroll .scroll_wheel{ margin: 0 auto; width: 1px; height: 100%; opacity: 0; overflow:hidden; animation: scroll_wheel 0s 0s 1 forwards ease-out; background:rgba(255,255,255,0.24);display: block; position: relative; transition: 0.3s; z-index: 200;}
@keyframes scroll_wheel { 0% { bottom:0%; opacity: 0;} 100% { bottom:0%; opacity: 1;}}
.scroll .scroll_wheel:after { opacity: 1; width: 100%; height: 30%; animation: scroll_wheel_after 2s 0.5s infinite normal ease; background:#fff; position: absolute; content:" "; display:block; z-index: 11; left: 0%; top:-100%; transition: 0.3s;}
@keyframes scroll_wheel_after { 0% { top:0%; opacity: 1;} 30% { top:100%; opacity: 1;} 31% { top:100%; opacity: 0;} 32% { top:-34%; opacity: 0;} 33% { top:-34%; opacity: 1;} 80% { top:0%;} 100% { top:0%;} }
.scroll a:hover .scroll_wheel:after { background:#fff; cursor: pointer;}
.scroll a:hover .scroll_wheel{ background:#848991; cursor: pointer;}
.scroll a:hover { cursor: pointer;}
@media screen and (max-width: 1400px) {
.scroll { height: 90px; }
}/*END*/
@media screen and (max-width: 1200px) and (orientation: landscape) {
.scroll { height: 80px; }
}/*END*/
@media screen and (max-width: 1000px) and (orientation: landscape) {
.scroll { height: 8vw;}
}/*END*/
@media screen and (orientation: portrait) {
.scroll { height: 12vw;  }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
.scroll { height: 16vw; }
}/*END*/

/*-------------------------------------------------
	read
--------------------------------------------------*/
#read { background: linear-gradient(to bottom , rgba(000,000,000,0.2) 0%,  rgba(000,000,000,0.8) 100%);color: #fff;}
#read .inner{ padding: 85px 0 95px; width: 90%; max-width: 1000px; margin: 0 auto; text-align: center; }
#read .inner p span{ display: inline-block; }
@media (max-width: 1400px) {
#read .inner{ padding: 85px 0 95px; width: 90%; max-width: 950px; }
}/*END*/
@media (max-width: 1200px) {
#read .inner{ padding: 85px 0 95px; width: 90%; max-width: 880px; }
}/*END*/
@media (max-width: 1100px) {
#read .inner{ padding: 85px 0 95px; width: 90%; max-width: 830px; }
}/*END*/
@media (max-width: 1024px) {
#read .inner{ padding: 90px 0 95px; width: 80%; max-width: 780px; }
}/*END*/
@media (max-width: 1000px) {
#read .inner{ padding: 90px 0 95px; width: 80%; max-width: 800px; text-align: left; }
}/*END*/
@media (max-width: 980px) {
#read .inner{ padding: 70px 0 75px;}
}/*END*/
@media (max-width: 720px) {
#read .inner{ width: 85%; }
#read .inner p span{ }
}/*END*/
@media (max-width: 620px) {
#read .inner{ padding: 60px 0 65px; }
}/*END*/
/*--- br ---*/
.read_br1{display: block; }
.read_br2{display: block; }
@media (max-width: 1024px) {
.read_br2{display: none; }
}/*END*/
@media (max-width: 1000px) {
.read_br1{display: none; }
}/*END*/


/*-------------------------------------------------
	movie
--------------------------------------------------*/
.movie{ padding: 0vw 0; /*background: #000;*/ position: relative;}
@media screen and (max-width: 750px) {
.movie{ padding: 0px 0 100px; }
}/*END*/
.top_movie{ padding:0;}
@media screen and (orientation: portrait) {
.top_movie{ padding: 0;}
}/*END*/
video {width: 100%; /*height: 34.4vw;*/ }
@media screen and (orientation: portrait) {
video {width: 100%; /*height: 56.3vw;*/}
}/*END*/
.movie_pc{ display: block;}
.movie_sp{ display: none;}
@media screen and (orientation: portrait) {
.movie_pc{ display: none;}
.movie_sp{ display: block;}
}/*END*/

/*-------------------------------------------------
	special_site
--------------------------------------------------*/
#special_site{ padding-bottom: 90px; position: relative; background:#fff; color: #000; position: relative; overflow: hidden;  }
#special_site h2{ padding: 90px 0 ; font-size: 20.5px;  letter-spacing: 8px; line-height: 1.6; text-align: center;font-family:Helvetica,  Arial, sans-serif;  font-weight: bold; }
#special_site h2 span{ display:block; width: 20%; max-width: 50px; height: 2px; margin: 20px auto 0; background: #bfbfbf; }
@media (max-width: 1000px){
#special_site h2{ padding: 80px 0; font-size: 20.5px; letter-spacing: 8px; }
#special_site h2 span{margin: 25px auto 0;}
}/*END*/
@media (max-width: 590px){
#special_site h2{ padding: 70px 0; font-size: 19px; letter-spacing: 7px; }
#special_site h2 span{margin: 22px auto 0;}
}/*END*/
@media (max-width: 500px){
#special_site h2{ padding: 60px 0; font-size: 18px; letter-spacing: 6px; }
#special_site h2 span{margin: 20px auto 0;}
}/*END*/
@media (max-width: 400px){
#special_site h2{ padding: 60px 0; font-size: 16px; letter-spacing: 5.5px; }
}/*END*/
#special_site .txt_box{ padding-top: 25px;}

 /*-------------- Slider p --------------*/
.slider p{max-width: 400px; margin: 0 auto;font-size: 20px; line-height: 1.4; text-align: center; font-family:Helvetica,  Arial, sans-serif;  font-weight: bold;}
.slider p span{ display: inline-block; }
@media (max-width: 1600px){
.slider p{ font-size: 20px; }
}/*END*/
@media (max-width: 1400px){
.slider p{ font-size: 19px; }
}/*END*/
@media (max-width: 1300px){
.slider p{ font-size: 18.5px;max-width: 300px;}
}/*END*/
@media (max-width: 1000px){
#special_site{ padding-bottom: 0px;}
.slider p{ font-size: 20px; }
}/*END*/
@media (max-width: 640px){
.slider p{ font-size: 19px; }
}/*END*/
@media (max-width: 450px){
.slider p{ font-size: 18px; }
}/*END*/
@media (max-width: 400px){
.slider p{ font-size: 17px; }
}/*END*/
@media (max-width: 310px) {
.slider p br{ display: none;}
}/*END*/

 /* Slider
 ----------------------------------------------------*/
.slider{ width:80%; margin:0 auto; height:auto; position:relative; }
@media (max-width: 1600px){
.slider{ width: 80%; }
}/*END*/
@media (max-width: 1001px){
.slider{ width:85%; max-width: 800px; }
}/*END*/

/*-------- slider off時　ここから --------*/
.slider ul{ margin: 0 auto; max-width: 90%; display: flex; justify-content: center; }
@media (max-width: 1000px){
.slider ul{  display: block; max-width: 100%; }
}/*END*/
/*-------- slider off時　ここまで --------　*/

.slider img{width:100%; margin: 0;}
@media (max-width: 1000px){
.slider li{ margin-bottom: 90px;}
}/*END*/
@media (max-width: 640px){
.slider li{ margin-bottom: 17vw;}
}/*END*/
.slider li a .img_box{ overflow: hidden; width: 90%; max-width: 500px; margin: 0 auto; }
.slider li a .img_box img{ transition: .7s; }
.slider li a .txt_box { transition: .5s; text-align: center; }
.slider li a{ text-decoration: none; color: #000; }
.slider li a:hover .img_box img{ transform: scale(1.05); opacity: 0.7; }
.slider li a {transition: 0.5s; }
.slider li a:hover .txt_box{ opacity: 0.5; }
/* btn */
.slider a .btn{ display: none; }
@media (max-width: 1000px) {
.slider li a:hover .img_box img{ transform: scale(1); opacity: 1; }
.slider li a:hover .txt_box{ opacity: 1; }
.slider a .btn{ margin: 35px auto 0; font-size: 14px; line-height: 1; letter-spacing: 2px; padding: 15px 55px 17px; border: solid 1px #000; display: inline-block; color: #000; text-decoration: none; border-radius: 50px; transition: .3s;}
}/*END*/
@media (max-width: 640px) {
.slider a .btn{ margin: 28px auto 0; font-size: 13.5px; letter-spacing: .2vw;padding: 15px 55px 17px; }
}/*END*/
@media (max-width: 500px) {
.slider a .btn{ margin: 20px auto 0; font-size: 13px;padding: 14px 50px 15px; }
}/*END*/
@media (max-width: 450px){
.slider a .btn{  font-size: 12px; padding: 13px 45px 14px;}
}/*END*/
@media (max-width: 400px){
.slider a .btn{  font-size: 11px; padding: 12px 40px 13px;}
}/*END*/
/* < > btn */
.slider .slick-prev,
.slider .slick-next { position: absolute; z-index: 999; top:12vw;width: 30px; height: 30px; margin-top: -15px; transition: 0.2s; outline: none;}
.slider .slick-prev:hover,
.slider .slick-next:hover {opacity: 0.4!important;}
.slider .slick-prev { left: -5.5vw; background: url("../img/sl_prev.gif") no-repeat left center; background-size: contain;}
.slider .slick-next { right: -5.5vw; background: url("../img/sl_next.gif") no-repeat right center; background-size: contain;}
@media (max-width: 750px){
.slider .slick-prev,
.slider .slick-next { position: absolute; z-index: 99; top:27vw; width: 9%; height: 100px; margin-top: -50px;}
.slider .slick-prev { left: -9%; }
.slider .slick-next { right: -9%; }
}/*END*/
/*dots*/
.slider .slick-dots{margin-top: 40px; padding: 0; z-index: 500; display: block; width: 100%;list-style: none; text-align: center; }
.slider .slick-dots li{ position: relative; display: inline-block; margin: 0 6px!important; width:20px!important; height: 20px!important; }
.slider .slick-dots li button,/* OFF */
.slider .slick-dots li button:hover{ display:none; margin: 0; padding: 0; font-size: 0; line-height: 0; display: block; cursor: pointer; border: 0; outline: none; background: transparent; width: 8px !important; height: 8px !important; border-radius: 30px; } /* hover */
.slider .slick-dots li button{ background:#ccc; } /* OFF */
.slider .slick-dots li button:hover{ background:#888; } /* hover */
.slider .slick-dots li button:before{ position: absolute; top: 0; left: 0; content: ''; }
.slider .slick-dots li.slick-active button:before{ position: absolute; top: 0; left: 0; opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); color: black;opacity: 1; width: 8px; height: 8px; background: #000; border-radius: 30px;}/* active */
.slick-dots > li:first-child:last-child { display: none;}
/*-------------------------------------------------
	gotop
--------------------------------------------------*/
.gotop { position:absolute; bottom:0px; right:20px;width:50px; height:70px; box-sizing:border-box; border-radius: 0%; z-index: 2000!important; }
.gotop a{ position: relative; display:block; background:rgba(33,33,33,0.8); text-decoration:none;width:50px; height:50px; box-sizing:border-box; border-radius: 0%; z-index: 11; transition: 0.3s; }
.gotop a::after { position:absolute; top:50%; left:50%; content: ''; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: url("../../asset/img/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: #262626; width: 100%; height: auto; position: relative; z-index: 10; }
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; font-family: Arial, Helvetica, sans-serif; font-weight: 400;}
@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; font-size: 12px; line-height: 1; color: #fff; }
}/*END*/
*,:after,:before { box-sizing: border-box;}
.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: 40px; 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;}
.foot_r .sns > li img { padding: 5px;}
@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*/
/*-------------------------------------------------
	txt [base]
--------------------------------------------------*/
#read .inner p span{ display: inline-block;}
.txt_l{ font-size: 18px; line-height: 2.2; }
#read .txt_l{opacity: 0.8;}
@media (max-width: 1400px) {
.txt_l{ font-size: 17px; line-height: 2.2;}
}/*END*/
@media (max-width: 1200px) {
.txt_l{font-size: 16px; line-height: 2.2; }
}/*END*/
@media (max-width: 1100px) {
.txt_l{ font-size: 15px; }
}/*END*/
@media (max-width: 1024px) {
.txt_l{ font-size: 16px; }
}/*END*/
@media (max-width: 640px) {
.txt_l{ font-size: 15px;  line-height: 2.0;}
}/*END*/
@media (max-width: 450px) {
.txt_l{ font-size: 14px; }
}/*END*/