@charset "utf-8";

/*
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/*--------------------------------------------------------
	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;background: #fff; color: #000; font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 16px; line-height: 1.6; font-style: normal; -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*/


/*-------------------------------------------------
	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; }


.it{ font-style: italic;}


/*-------------------------------------------------
	header
--------------------------------------------------*/
header{ position: relative; z-index: 9999; }
header img{ width: 100%; vertical-align: top;}
/*------ header logo ------*/
header .seiko_logo{ width: 130px; position:absolute; right: 32px; top: 32px; }
header .presage_logo{ width: 180px; position:absolute; left: 32px; top: 32px; }
@media (max-width: 1600px) {
header .seiko_logo{ width: 8.17vw; right: 2vw; top: 2vw;}
header .presage_logo{ width: 11.2vw; left: 2vw; top:2vw; }
}/*END*/
@media screen and (orientation: portrait) { 
header .seiko_logo{ width: 130px; right: 32px; top: 32px; }
header .presage_logo{ width: 180px; left: 32px; top: 32px;}
}/*END*/
@media screen and (max-width: 780px) and (orientation: portrait) { 
header .seiko_logo{ width: 17vw; right: 3.8vw; top: 3.8vw;}
header .presage_logo{ width: 23.2vw; left: 3.8vw; top: 3.8vw; }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
header .seiko_logo{ width: 20vw; right: 2vw; top: 3.3vw;}
header .presage_logo{ width: 28vw; left: 3.3vw; top: 3.3vw; }
}/*END*/

/*-------------------------------------------------
	co_main
--------------------------------------------------*/
#top_main { position: relative;  overflow: hidden; z-index: 10;}
/*img*/
.sl_co_img { width: 100%; height:auto; animation-duration: 3s; transition: 1s;}
.sl_co_img img{ width: 100%;}

/*[ on / off ]*/
#top_main .x15{display:block;}
#top_main .x1{display:none;}
#top_main .tab{display:none;}
#top_main .sp{display:none;}
@media screen and (max-width: 1400px) {
#top_main .x15{display:none;}
#top_main .x1{display:block;}
#top_main .tab{display:none;}
#top_main .sp{display:none;}
}/*END*/
@media screen and (orientation: portrait) {
#top_main .x1{display:none;}
#top_main .tab{display:block;}
#top_main .sp{display:none;}
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
#top_main .x1{display:none;}
#top_main .tab{display:none;}
#top_main .sp{display:block;}
}/*END*/

/*---- base ----*/
#top_main .main_sl { overflow: hidden;} 
#top_main .main_sl .slick-list { padding: 0; }
#top_main .main_sl ul li { width: 100%; height: auto; margin: 0px; outline: none; }
@media screen and (orientation: portrait) {/*縦*/
}/*END*/

/* sl_co */
#top_main .sl_co { width: 100%; display: block; overflow: hidden; position: relative; text-align: center; }


/*===== main_01 =====*/
.main_01 .sl_co_inner { position: absolute; top: 72.4%; left: 19.8%;  z-index:3;}
.main_01 .sl_co_inner h1{ color:#000; margin-left: 0px; text-align: left; font-family: 'Times New Roman', Times, serif; line-height: 1; }
.main_01 .sl_co_inner h1 .sl_title1{ display: block; margin-top:0px; font-size:2.97vw; opacity: 0; }
.main_01 .sl_co_inner h1 .sl_title2{ display: block; margin-top:.21vw; font-size:4.47vw;  opacity: 0;}
@media screen and (orientation: portrait) {
.main_01 .sl_co_inner { position: absolute; top:74.7%; left: 8.4%;}
.main_01 .sl_co_inner h1 .sl_title1{font-size: 4.35vw; line-height: 1; text-align: left; }
.main_01 .sl_co_inner h1 .sl_title2 { font-size: 6.6vw; line-height: 1.1; display: block; margin-left: -1%;}
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
.main_01 .sl_co_inner { position: absolute; top:74.7%; left: 8%; }
}/*END*/

/*===== main_02 =====*/
.main_02 .sl_co_inner { position: absolute; top: 0%; left: 13.5%; height: 100%;  z-index:3;display: flex; align-items: center; justify-content: center; text-align: left; }
.main_02 .sl_co_inner h1{ color:#000; margin-left: 0px; font-family: 'Times New Roman', Times, serif; line-height: 1;}
.main_02 .sl_co_inner h1 .sl_title1{ display: block; margin-top:-0.5vw; font-size:2.97vw; opacity: 0; }
.main_02 .sl_co_inner h1 .sl_title2{ display: block; margin:.21vw 0 0 -0.15vw; font-size:4.47vw; opacity: 0;}
.main_02 .sl_co_inner h1 .sl_title3{ display: block; margin-top:0.3vw; font-size:2.6vw;  opacity: 0;}
@media screen and (orientation: portrait) {
.main_02 .sl_co_inner { position: absolute; top: 78%; left: 0%; width: 100%; height: auto; display: block; text-align: center;}
.main_02 .sl_co_inner h1 .sl_title1{ margin-top:0vw; font-size:4.65vw; }
.main_02 .sl_co_inner h1 .sl_title2{ margin:.21vw 0 0 0; font-size:7vw; }
.main_02 .sl_co_inner h1 .sl_title3{ margin-top:0.9vw; font-size:4.1vw; }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
.main_02 .sl_co_inner { position: absolute; top: 77.5%; }
.main_02 .sl_co_inner h1 .sl_title1{ margin-top:0vw; font-size:6.5vw; }
.main_02 .sl_co_inner h1 .sl_title2{ margin:.21vw 0 0 0; font-size:9.8vw; }
.main_02 .sl_co_inner h1 .sl_title3{ margin-top:0.9vw; font-size:5.8vw; }
}/*END*/


/* -----------------------------------------
 co_main [ animation ]
 -----------------------------------------*/
/*===== main_01 =====*/
#top_main .sl_co.main_01.slick-active .sl_co_inner h1 .sl_title1{ animation:fadeInRight 1s both .9s; visibility:visible; opacity: 1; transition:1.3s;}
#top_main .sl_co.main_01.slick-active .sl_co_inner h1 .sl_title2{ animation:fadeInRight 1s both 1.1s; visibility:visible; opacity: 1; transition:1.3s;}

/*===== main_02 =====*/
#top_main .sl_co.main_02.slick-active .sl_co_inner h1 .sl_title1{ animation:fadeInRight 1s both .9s; visibility:visible; opacity: 1; transition:1.3s;}
#top_main .sl_co.main_02.slick-active .sl_co_inner h1 .sl_title2{ animation:fadeInRight 1s both 1.1s; visibility:visible; opacity: 1; transition:1.3s;}
#top_main .sl_co.main_02.slick-active .sl_co_inner h1 .sl_title3{ animation:fadeIn 2s both 1.6s; visibility:visible; opacity: 1; transition:1.3s;}

/************ fadeIn ***********/
@keyframes fadeIn{0%{opacity:0; } 100%{opacity:1;}}
#top_main .fadeIn{animation-name:fadeIn}
/************ fadeInRight ***********/
@keyframes fadeInRight{0%{opacity:0; transform:translate3d(60px,0,0)} 100%{opacity:1;transform:none;}}
#top_main .fadeInRight{ animation-name:fadeInRight}
/************ fadeInBottom ***********/
@keyframes fadeInBottom{0%{opacity:0; transform:translate3d(0,60px,0)} 100%{opacity:1;transform:none;}}
#top_main .fadeInBottom{ animation-name:fadeInBottom}
/************ zoomOut ***********/
@keyframes zoomOut{0%{opacity:0;transform:scale(0.1)}50%{opacity:1}}
#top_main .zoomOut{animation-name:zoomOut}

/* -----------------------------------------
 slick base setting
 -----------------------------------------*/
 /* sl < > 
 ---------------------*/
 /* < > btn */
 #top_main .main_sl .slick-prev,
 #top_main .main_sl .slick-next { position: absolute; z-index: 10; top:50%; width: 40px; height: 40px; padding: 0px; margin-top: -40px; transition: 0.5s; opacity: 0.6; outline: none; cursor: pointer; }
 #top_main .main_sl .slick-prev { left: 2%; background: url("../img/sl_prev.svg") no-repeat center center; background-size:contain;}
 #top_main .main_sl .slick-next { right: 2%; background: url("../img/sl_next.svg") no-repeat center center; background-size:contain;}
 #top_main .main_sl .slick-prev:hover,
 #top_main .main_sl .slick-next:hover {opacity: 0.4!important;}
@media (max-width: 1400px) {
 #top_main .main_sl .slick-prev,
 #top_main .main_sl .slick-next { position: absolute; z-index: 10; top:50%; width: 30px; height: 30px; padding: 0px; margin-top: -30px; transition: 0.5s; outline: none; cursor: pointer; }
}/*END*/
@media screen and (orientation: portrait) {
 #top_main .main_sl .slick-prev,
 #top_main .main_sl .slick-next { position: absolute; z-index: 10; top:50%; width: 40px; height: 40px; padding: 0px; margin-top: -40px; transition: 0.5s; opacity: 0.6; outline: none; cursor: pointer; }
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
 #top_main .main_sl .slick-prev,
 #top_main .main_sl .slick-next { position: absolute; z-index: 10; top:50%; width: 30px; height: 30px; padding: 0px; margin-top: -30px; transition: 0.5s; outline: none; cursor: pointer; }
 #top_main .main_sl .slick-prev { left: 1.5%; }
 #top_main .main_sl .slick-next { right: 1.5%; }
}/*END*/

/* sl dots
 ---------------------*/
 #top_main .main_sl ul.slick-dots{  position: relative; bottom: 0px; left: 0%; z-index: 100; width:100%; margin:20px auto 0; padding: 0; list-style: none; display: flex; justify-content: center; z-index:1;}
 #top_main .main_sl ul.slick-dots li{ position: relative; height: 20px; width: 30px; margin: 0 0px; z-index: 2;}
/*button ●○○○ */
 #top_main .main_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 */
 #top_main .main_sl ul.slick-dots li button:before{ position: absolute; top:50%; left: 50%; content: ''; margin: -7px 0 0 -7px; width: 14px; height: 14px; background: #000; opacity: 0.2; box-sizing: border-box; transition: 0.3s; border-radius: 10px;}/* focus */
/* ON focus */
 #top_main .main_sl ul.slick-dots li button:hover:before,/* ON */
 #top_main .main_sl ul.slick-dots li.slick-active button:before{ cursor: pointer; position: absolute; top:50%; left: 50%; content: ''; margin: -7px 0 0 -7px; opacity: 1; width: 14px; height: 14px; background: #000; box-sizing: border-box; transition: 0.3s; border-radius: 10px;}/* focus */
 #top_main .main_sl ul.slick-dots li::before{ position: absolute; width: 100px; margin-left: -50px; left: 50%; bottom:65px; transition:0.5s; z-index: -1; }
@media screen and (max-width: 640px) and (orientation: portrait) { /* 縦 / 640px */
 #top_main .main_sl ul.slick-dots li{ position: relative; height: 20px; width: 20px; margin: 0 0px; z-index: 2;}
 #top_main .main_sl ul.slick-dots li button:before{ position: absolute; top:50%; left: 50%; content: ''; margin: -4px 0 0 -4px; width: 8px; height: 8px; background: #000; opacity: 0.2; box-sizing: border-box; transition: 0.3s; border-radius: 10px;}/* focus */
 #top_main .main_sl ul.slick-dots li button:hover:before,/* ON */
 #top_main .main_sl ul.slick-dots li.slick-active button:before{ cursor: pointer; position: absolute; top:50%; left: 50%; content: ''; margin: -4px 0 0 -4px; opacity: 1; width: 8px; height: 8px; background: #000; box-sizing: border-box; transition: 0.3s; border-radius: 10px;}/* focus */
}/*END*/

/*一つだけの場合　非表示*/
.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: 16px; height: 16px; margin: -8px 0 0 -8px; background: url("../img/page_top.svg") 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: 14px; height: 14px; margin: -7px 0 0 -7px; }
}/*END*/


@media (max-width: 1024px) {
.gotop { display: none !important;}
}/*END*/

/*-------------------------------------------------
	footer
--------------------------------------------------*/
footer{ background: #262626; width: 100%; height: auto; position: relative; z-index: 30; }
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: 'Noto Sans JP', 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*/
.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; }
@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*/



/*-------------------------------------------------
	bottom_nav
--------------------------------------------------*/
.bottom_nav{ width: 100%; position: relative; z-index: 1000;}
.bottom_nav ul{display: flex; margin: 0 auto; width: 80%; max-width: 1080px; z-index: 1000;}
.bottom_nav ul li a{ position: relative; display: block;}
.bottom_nav ul li a .arrow{ position: absolute; right: 12px; top: 0; width: 9px; height: 100%;display: flex; align-items: center; justify-content: center; transition: 0.3s;}
.bottom_nav ul li:nth-child(1) a .arrow{ position: absolute; left: 12px; right:initial; top: 6px; width: 9px; height: 100%;display: flex; align-items: center; justify-content: center; transition: 0.3s; transform: rotate(180deg);}
.bottom_nav ul li a .arrow img{ margin-top: 8px; }
.bottom_nav ul li a:hover .arrow{right: 8px;}
.bottom_nav ul li:nth-child(1)  a:hover .arrow{left: 8px;}

.bottom_nav ul li a:hover{ }
@media (max-width: 1024px) {
.bottom_nav ul{display: flex; margin: 0 auto; width: 100%; max-width: 1080px; z-index: 1000;}
}/*END*/
@media (max-width: 750px) {
.bottom_nav ul{display: flex; margin: 0 auto; width: 100%; max-width: 1080px; z-index: 1000;}
.bottom_nav ul li a .arrow{ display: none;}
.bottom_nav ul li:nth-child(1) a .arrow{ display: none;}
}/*END*/

/* [ on off ]*/
.bottom_nav .pc{ display: block;}
.bottom_nav .sp{ display: none;}
@media (max-width: 750px) {
.bottom_nav .pc{ display: none;}
.bottom_nav .sp{ display: block;}
}/*END*/