@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; background: #fff;  color: #000; font-family: 'Noto Serif JP', 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*/
/*cookie*/
#onetrust-banner-sdk{ outline: none; }

/*------------------------------------
	font アンチエイリアス
-------------------------------------*/
/* 解像度 1x：subpixel、解像度 2x：grayscale */
h1,h2,h3{ -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,h3{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

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

/*------------------------------------
	anime set
-------------------------------------*/
.main_img img,
.h1_1,
.h1_2,
#lead h2,
#lead h2 rt,
#lead p,
#lead img,
#design h2,
#dial h2,
#dial p,
#dial img,
#strap h2,
#strap p,
#strap img,
.spec h2,
.spec h3,
.spec p,
.spec img,
.spec .spec_btn,
#craftsmanship h2,
#craftsmanship p,
#craftsmanship img
{ visibility: hidden; }

/*------------------------------------
	bg fixed
-------------------------------------*/
body:before{ content: ''; display: block; position: fixed; left: 0; top: 0; width: 100%; height:100vh; background: url("../img/dial_bg.jpg") center center; background-size: cover; z-index: -2; }

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

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

/*------------------------------------
	#main
-------------------------------------*/
#main{ width: 100%; position: relative; z-index: 5; }
#main .title_box { position: absolute; top:0; left: 44.6%; height: 100%; width: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;}
#main .title_box h1 { font-family: 'Times New Roman', Times, serif; text-align: center; }
#main .title_box h1 .h1_1{ font-size: 2.4vw; line-height: 1.2;  display: block;}
#main .title_box h1 .h1_2 { margin-top: 1.5%;font-size: 3.3vw; line-height: 1.1; display: block;}
@media screen and (orientation: portrait) {
#main .title_box { width: 100%; position: absolute; top:76%; left: 0%;height: auto;}
#main .title_box h1{ width: 100%;display: block;  text-align: center;}
#main .title_box h1 .h1_1{  font-size: 3.45vw; line-height: 1.2; display: block;  text-align: center;}
#main .title_box h1 .h1_2 { margin-top: 0.5%;font-size: 4.48vw; line-height: 1.2; letter-spacing: 0.1vw; display: block;}
}/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
#main .title_box { width: 100%; position: absolute; top:76.5%; left: 0%;height: auto;}
#main .title_box h1 .h1_1{ font-size: 4.25vw; line-height: 1.2; letter-spacing: 0.06vw; display: block;  text-align: center;}
#main .title_box h1 .h1_2 { margin-top: 0.8%;font-size: 5.6vw; line-height: 1.2; display: block;}
}/*END*/

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

/*------------------------------------
	lead
-------------------------------------*/
#lead{ max-width: 1200px; width: 90%; margin: 0 auto; padding: 100px 0 0px; text-align: center;}

#lead h2{ font-size: 40px; line-height: 1.2; font-family: 'Times New Roman', Times, serif;}
@media (max-width: 1400px) {
#lead h2{ font-size: 38px;}
}/*END*/
@media (max-width: 800px) {
#lead h2{ font-size: 36px;}
}/*END*/
@media (max-width: 750px) {
#lead h2{ font-size: 34px;}
}/*END*/
@media (max-width: 620px) {
#lead h2{ font-size: 5.3vw;}
}/*END*/
@media (max-width: 500px) {
#lead h2{ font-size: 6.1vw;}
}/*END*/


#lead .img_box{ margin: 50px auto ; width: 90%; max-width: 740px; }
@media (max-width: 750px) {
#lead{  padding: 80px 0 0px;}
#lead .img_box{ margin: 40px auto ; }
}/*END*/
@media (max-width: 450px) {
#lead{  padding: 60px 0 0px;}
#lead .img_box{ margin: 30px auto ; }
}/*END*/

#lead .txt_box{ margin: 0px auto 0; width: 90%; max-width: 980px; text-align: left;}

#lead .x15{ display: block;}
#lead .x1{ display: none;}
@media (max-width: 750px) {
#lead .x15{ display: none;}
#lead .x1{ display: block;}
}/*END*/


/*------------------------------------
	design
-------------------------------------*/
#design{ margin-top: 120px;}

/*------------------------------------
	h2_head
-------------------------------------*/
h2.h2_head{ text-align: center;}
h2.h2_head .h2_head_txt{ font-size: 24px; line-height: 1; letter-spacing: 7px; display: block; font-family: 'Times New Roman', Times, serif;}
h2.h2_head .h2_head_bar{ margin: 23px auto 0; display: block; height: 3px; width: 45px; background: #cab088;}
@media (max-width: 1300px) {
#design{ margin-top: 100px;}

h2.h2_head .h2_head_txt{ font-size: 22px; line-height: 1; letter-spacing: 7px; display: block; font-family: 'Times New Roman', Times, serif;}
}/*END*/
@media (max-width: 750px) {
#design{ margin-top: 90px;}
h2.h2_head .h2_head_txt{ font-size: 18px; line-height: 1; letter-spacing: 7px; display: block; font-family: 'Times New Roman', Times, serif;}
}/*END*/

/*------------------------------------
	dial
-------------------------------------*/
#dial{ margin: 70px auto 0; position: relative; z-index: 2;}
#dial .img_box{ margin: 0px auto 0; width:100%;  }
#dial .txt_box{ margin: 60px auto 0; width: 70%; max-width: 830px; display: flex;}
#dial .txt_box h2{ padding-right: 50px; color: #beab7a;}
@media (max-width: 1600px) {
#dial .txt_box{ margin: 55px auto 0; width: 70%; max-width: 830px; display: flex;}
}/*END*/
@media (max-width: 1360px) {
#dial{ margin: 60px auto 0;}
#dial .txt_box{ margin: 6vw auto 0; width: 70%; max-width: 790px; display: flex;}
}/*END*/
@media (max-width: 1100px) {
#dial{ margin: 50px auto 0;}
#dial .txt_box{ margin: 6vw auto 0; width: 70%; max-width: 700px; display: flex;}
}/*END*/
@media (max-width: 1000px) {
#dial{ margin: 50px auto 0;}
#dial .txt_box h2{ padding-right: 5vw;}
}/*END*/
@media (max-width: 750px) {
#dial{ margin: 50px auto 0;}
#dial .txt_box{ margin: 6vw auto 0; width: 80%; max-width: 650px; display: block;}
#dial .txt_box h2{ text-align: center;padding-right: 0;}
#dial .txt_box p{ margin-top: 20px;}
}/*END*/
@media (max-width: 450px) {
#dial{ margin: 40px auto 0;}
}/*END*/

#dial .x15{ display: block;}
#dial .x1{ display: none;}
@media (max-width: 1000px) {
#dial .x15{ display: none;}
#dial .x1{ display: block;}
}/*END*/

/*------------------------------------
	txt [base]
-------------------------------------*/
.de h2{ font-size: 60px; line-height: 1; font-family: 'Times New Roman', Times, serif; }
#craftsmanship h2{ font-size: 52px; line-height: 1; font-family: 'Times New Roman', Times, serif;}
.txt{ font-size: 18px; line-height: 1.7; }
.txt2{ font-size: 16px; line-height: 1.7; letter-spacing: .8px; }
.txt_s{ font-size: 14px; line-height: 1.4; }
sup{ font-size: 12px; line-height: 1; }
@media (max-width: 1360px) {
.de h2{ font-size: 55px; }
#craftsmanship h2{ font-size: 50px; }
.txt{ font-size: 17px; }
.txt2{ font-size: 16px; }
.txt_s{ font-size: 13px; }
sup{ font-size: 11px;}
}/*END*/
@media (max-width: 1100px) {
.de h2{ font-size: 50px; }
#craftsmanship h2{ font-size: 48px; }
.txt{ font-size: 16px; }
.txt2{ font-size: 15px; }
.txt_s{ font-size: 12px; }
sup{ font-size: 10px;}
}/*END*/
@media (max-width: 1024px) {
.de h2{ font-size: 60px; }
#craftsmanship h2{ font-size: 45px; }
}/*END*/
@media (max-width: 850px) {
.de h2{ font-size: 55px; }
.txt2{ font-size: 14px; }
}/*END*/
@media (max-width: 500px) {
.de h2{ font-size: 40px; }
#craftsmanship h2{ font-size: 40px; }
.txt{ font-size: 15px; }
.txt2{ font-size: 13px; }
.txt_s{ font-size: 11px; }
}/*END*/
@media (max-width: 410px) {
.de h2{ font-size: 35px; }
#craftsmanship h2{ font-size: 35px; }
}/*END*/
@media (max-width: 400px) {
.txt{ font-size: 14px; }
.txt_s{ font-size: 10px; }
}/*END*/


.it{ font-style: italic;}


/*------------------------------------
	strap
-------------------------------------*/
#strap{ margin: 140px 0 0; position: relative; height: 700px;}
#strap .img_box{ position: absolute; left: 50%; top: 0; margin-left: -1200px; height: 700px; width: 2400px; z-index: -1; }
#strap .inner{ width: 80%; height: 100%; max-width: 1050px; margin: 0 auto; display: flex; align-items: center;flex-direction : row-reverse;}
#strap .inner .txt_box{ width: 50%; max-width: 520px; color: #fff;}
#strap .inner .txt_box .txt{ margin: 30px 0;}
#strap .inner .txt_box span{ display: inline-block;}
@media (max-width: 1600px) {
#strap .img_box{ position: absolute; left: 50%; top: 0; margin-left: -800px; height: 700px; width: 1600px; z-index: -1; }
}/*END*/
@media (max-width: 1400px) {
#strap .img_box{ position: absolute; left: 53%; top: 0; margin-left: -800px; height: 700px; width: 1600px; z-index: -1; }
#strap .inner .txt_box{ width: 50%; max-width: 450px; color: #fff;}
}/*END*/
@media (max-width: 1360px) {
#strap .img_box{ position: absolute; left: 53%; top: 0; margin-left: -800px; height: 700px; width: 1600px; z-index: -1; }
#strap .inner .txt_box{ width: 50%; max-width: 430px; color: #fff;}
}/*END*/
@media (max-width: 960px) {
#strap{ margin: 120px 0 0; }
#strap .img_box{ position: absolute; left: 53%; top: 0; margin-left: -740px; height: 700px; width: 1600px; z-index: -1; }
#strap .inner{ width: 75%; height: 100%; max-width: 1050px;}
#strap .inner .txt_box{ width: 43%; max-width: 390px; color: #fff;}
}/*END*/
@media (max-width: 840px) {
#strap .img_box{ position: absolute; left: 53%; top: 0; margin-left: -700px; height: 700px; width: 1600px; z-index: -1; }
#strap .inner{ width: 85%; height: 100%; max-width: 1050px;}
#strap .inner .txt_box{ width: 43%; max-width: 390px; color: #fff;}
}/*END*/
@media (max-width: 750px) {
#strap{ margin: 100px 0 20px ; position: relative; height: auto; background: #fff;}
#strap .img_box{ position: relative; left: 0%; top: 0; margin-left: 0px; height: auto; width: 100%; z-index: 1; }
#strap .inner{ margin: 0 auto; width: 80%; height: auto; max-width: 100%; display: block; padding: 50px 0 60px;}
#strap .inner .txt_box{ width: 100%; max-width: 100%; color: #000;}
#strap .inner .txt_box h2{ color: #beab7a; text-align: center;}
#strap .inner .txt_box .txt{ margin: 20px 0;}
}/*END*/
@media (max-width: 500px) {
#strap{ margin: 100px 0 20px ; position: relative; height: auto; background: #fff;}
#strap .inner{ margin: 0 auto; width: 80%; height: auto; max-width: 100%; display: block; padding: 10vw 0 12vw;}
}/*END*/

#strap .x15{ display: block;}
#strap .x1{ display: none;}
#strap .sp{ display: none;}
@media (max-width: 1600px) {
#strap .x15{ display: none;}
#strap .x1{ display: block;}
#strap .sp{ display: none;}
}/*END*/
@media (max-width: 750px) {
#strap .x15{ display: none;}
#strap .x1{ display: none;}
#strap .sp{ display: block;}
}/*END*/

/*---------------------
	sl
-----------------------*/
.sl { margin-top:100px; width: 100%;}
.sl ul li{width: 30%; }
.sl ul li img{width: 100%; }
@media (max-width: 1800px) {
.sl ul li{width: 40%; }
}/*END*/
@media (max-width: 750px) {
.sl { margin-top:0px; width: 100%;}
.sl ul li{width: 60%; }
}/*END*/
@media (max-width: 400px) {
.sl ul li{width: 70%; }
}/*END*/

/*-------------------------------------------------
	spec
--------------------------------------------------*/
.spec{ padding: 0 0 80px; background: #fff; color: #000; position:relative; overflow: hidden;}
.spec .title_box{ padding: 80px 0 60px; }
@media screen and (max-width:1050px) {
.spec{ padding: 0 0 80px; }
.spec .title_box{ padding: 8vw 0 7.5vw; }
}/*END*/
@media screen and (max-width: 760px) {
.spec .title_box{ padding: 9vw 0 8.5vw; }
}/*END*/
@media screen and (max-width: 640px) {
.spec{ padding: 0 0 70px; }
.spec .title_box{ padding: 10vw 0 9.5vw;  }
}/*END*/
@media screen and (max-width: 640px) {
}/*END*/
@media screen and (max-width: 500px) {
.spec .title_box{ padding: 12vw 0 11.5vw;  }
.spec{ padding: 0 0 60px; }
}/*END*/
.spec .title_box h2 { font-size: 32px; line-height: 1.3; text-align: center; }
@media screen and (max-width: 1024px) {
.spec .title_box h2 { font-size: 3.1vw; }
}/*END*/
@media screen and (max-width: 850px) {
.spec .title_box h2 { font-size: 3.5vw; }
}/*END*/
@media screen and (max-width: 640px) {
.spec .title_box h2 { font-size: 4.2vw;  }
}/*END*/
@media screen and (max-width: 450px) {
.spec .title_box h2 { font-size: 5vw;  }
}/*END*/

.spec_title_br{ display: none;}
@media screen and (max-width: 640px) {
.spec_title_br{ display: block;}
}/*END*/


/*spec_box1*/
.spec_box1{ background: #fff; width: 94%; margin: 0 auto; }
.spec_box1 .inner{ margin: 0 auto; width: 100%; max-width: 750px; display: flex; justify-content: center; }
.spec_box1 .img_box{ max-width: 257px; }
.spec_box1 .txt_box{ margin-left: 7%; margin-top: 0px; line-height: 1.5;display: flex; align-items: center; justify-content: center; text-align: center; }
@media screen and (max-width: 1000px) {
.spec_box1 .txt_box{ margin-left: 4%;}
}/*END*/
@media screen and (max-width: 750px) {
.spec_box1 .img_box{ width:38%; }
.spec_box1 .txt_box{ margin-left: 5%;}
}/*END*/
@media screen and (max-width: 650px) {
.spec_box1 .txt_box{ margin-left: 6vw; }
}/*END*/
@media screen and (max-width: 500px) {
.spec_box1 .img_box{ width:40%; }
}/*END*/
@media screen and (max-width: 450px) {
.spec_box1 .txt_box{ margin-left: 4vw;}
}/*END*/
@media screen and (max-width: 370px) {
.spec_box1 .inner{ margin: 0 auto 30px; width: 100%; max-width: 650px; display: block; }
.spec_box1 .txt_box{ margin:20px 0 0 0%; display: block;}
.spec_box1 .img_box{ width:50%; margin: 0 auto; }
}/*END*/
/* [ on off ]*/
.spec .x15{display:block;}
.spec .x1{display:none;}
@media (max-width: 640px) {
.spec .x15{display:none;}
.spec .x1{display:block;}
}/*END*/
.number		{ margin-top: 0px; font-size: 25px; letter-spacing: 1px; color: #001327; }
.caribre	{ margin-top: 5px; font-size: 15px; }
.price		{ margin-top: 7px; font-size: 18px; }
.price span	{ margin-top: 0px; font-size: 12px; margin-left: 3px; }
.limited	{ margin-top: 7px; font-size: 15px; position: relative; padding-bottom: 4px; display: inline-block;} .limited::after { content: ''; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 2px; background: #000; }
.limited_sub{ margin-top: 3px; font-size: 12px; }
.spec_txt	{ margin-top: 15px; font-size: 14px; }
.spec_txts	{ margin-top: 18px; font-size: 13px; }
@media screen and (max-width: 1000px) {
.number		{ margin-top: 0px; font-size: 22px; }

}/*END*/
@media screen and (max-width: 640px) {
.number		{ margin-top: 0px; font-size: 22px; }
.caribre	{ margin-top: 5px; font-size: 14px; }
.price		{ margin-top: 7px; font-size: 16px; }
.price span	{ margin-top: 0px; font-size: 11px; margin-left: 3px; }
.limited	{ margin-top: 7px; font-size: 14px; position: relative; padding-bottom: 4px; display: inline-block;}
.limited_sub{ margin-top: 3px; font-size: 11px; }
.spec_txt	{ margin-top: 15px; font-size: 13px; }
.spec_txts	{ margin-top: 18px; font-size: 12px; }
}/*END*/
@media screen and (max-width: 450px) {
.number		{ margin-top: 0px; font-size: 20px; }
.caribre	{ margin-top: 5px; font-size: 13px; }
.price		{ margin-top: 7px; font-size: 16px; }
.price span	{ margin-top: 0px; font-size: 11px; margin-left: 3px; }
.limited	{ margin-top: 7px; font-size: 14px; position: relative; padding-bottom: 4px; display: inline-block;}
.limited_sub{ margin-top: 3px; font-size: 11px; }
.spec_txt	{ margin-top: 15px; font-size: 12px; }
.spec_txts	{ margin-top: 18px; font-size: 12px; }
}/*END*/
.shop_sp{ text-align: center; margin-top: -3vw; position: relative; z-index: 3;}
@media (max-width: 370px) {
.shop_sp{ text-align: center; margin-top: 25px;}
}/*END*/
/* [ on off ]*/
.shop_pc{ display: block;}
.shop_sp{ display: none;}
@media (max-width: 550px) {
.shop_pc{ display: none;}
.shop_sp{ display: block;}
}/*END*/
/*spec_btn*/
.spec_btn { margin:22px auto 0; display: block;}
.spec_btn a {width: 190px; padding: 16px 0 18px; margin:0 auto; font-size: 14px; line-height: 1; font-weight: 400;letter-spacing: 1px; color: #fff; background: #000; display: block; transition: 0.3s; text-decoration: none; border-radius: 4px;}
.spec_btn a:hover { cursor: pointer; color: #fff; opacity: 0.8; }
@media screen and (max-width: 640px) {
.spec_btn { margin: 18px auto 0; }
.spec_btn a {  width: 170px; padding: 16px 0 18px; font-size: 13px; letter-spacing: 1px;}
}/*END*/
@media screen and (max-width: 450px) {
.spec_btn { margin: 15px auto 0; }
.spec_btn a { width: 160px; font-size: 12px;  padding: 16px 0 18px; }
}/*END*/
@media screen and (max-width: 400px) {
.spec_btn { margin: 15px auto 0; }
.spec_btn a { width: 150px; font-size: 11.5px;  padding: 16px 0 18px; }
}/*END*/
/*spec_btn*/
.spec_btn2 { margin:10px auto 0; }
/*spec_bottom*/
.spec_bottom{ margin: 60px auto 0; width: 100%; display: inline-block; text-align: center;  }
.spec_bottom p{ margin: 0 auto; width: 95%;}
.spec_bottom span{ display: inline-block; }
@media screen and (max-width: 370px) {
.spec_bottom{ margin: 20px auto 0;  }
.spec_btn a { width: 160px; font-size: 11.5px;  padding: 16px 0 18px; letter-spacing: 1px; }
}/*END*/
/*spec_sub*/
.spec_sub{ max-width: 80%; margin: 0 auto; padding: 70px 0 0; text-align: center;}
.spec_sub p{ display: inline-block;margin: 0 auto;  font-size: 14px; }
.spec_sub p span{ display: inline-block;}
@media screen and (max-width: 1050px) {
.spec_sub{ padding: 8vw 0 0;}
}/*END*/
@media screen and (max-width: 760px) {
.spec_sub{ padding: 9vw 0 0;}
}/*END*/
@media screen and (max-width: 640px) {
.spec_sub{ padding: 10vw 0 0; }
.spec_sub p{font-size: 13px; }
}/*END*/
@media screen and (max-width: 500px) {
.spec_sub{ padding: 12vw 0 0;}
.spec_sub p{font-size: 12px; }
}/*END*/
@media screen and (max-width: 370px) {
.spec_sub{ padding: 7vw 0 0;}
.spec_sub p{font-size: 12px; }
}/*END*/

/*------------------------------------
	#Craftsmanship
-------------------------------------*/
#craftsmanship{ padding: 100px 0; background: #262626; color: #fff; }
#craftsmanship h2{ text-align: center; }
#craftsmanship .txt_box{ margin: 45px auto 0; max-width: 920px; width: 80%;}
/*cra_profile*/
#craftsmanship .cra_profile{ margin: 80px auto 0; max-width:825px; width: 80%; }
#craftsmanship .cra_profile ul {display: flex;  justify-content: space-between; }
#craftsmanship .cra_profile ul li { width: 46.1%; text-align: center;}
#craftsmanship .cra_profile ul li .name_box{ margin-top: 20px; }
#craftsmanship .cra_profile ul li .name_box p.cra_name_head{ font-size: 13px;line-height: 1.1; }
#craftsmanship .cra_profile ul li .name_box p.cra_name{ font-size: 22px; line-height: 1.6;}
@media (max-width: 1200px) {
#craftsmanship .cra_profile ul li .name_box p.cra_name_head{ font-size: 12px; }
#craftsmanship .cra_profile ul li .name_box p.cra_name{ font-size: 20px;}
}/*END*/
@media (max-width: 640px) {
#craftsmanship{ padding: 80px 0;}
#craftsmanship .txt_box{ margin: 35px auto 0; max-width: 920px; width: 80%;}
#craftsmanship .cra_profile{ margin: 80px auto 0; max-width:825px; width: 90%; }
#craftsmanship .cra_profile ul li { width: 47%; text-align: center;}
#craftsmanship .cra_profile ul li .name_box p.cra_name_head{ font-size: 11px; }
#craftsmanship .cra_profile ul li .name_box p.cra_name{ font-size: 18px;}
}/*END*/
@media (max-width: 450px) {
#craftsmanship{ padding: 70px 0;}
#craftsmanship .txt_box{ margin: 30px auto 0; max-width: 920px; width: 80%;}
#craftsmanship .cra_profile{ margin: 0px auto 0; max-width:825px; width: 60%; }
#craftsmanship .cra_profile ul {display: block;  }
#craftsmanship .cra_profile ul li { width: 100%; text-align: center; margin-top: 50px;}
#craftsmanship .cra_profile ul li .name_box{ margin-top: 15px; }
#craftsmanship .cra_profile ul li .name_box p.cra_name_head{ font-size: 11px; }
#craftsmanship .cra_profile ul li .name_box p.cra_name{ font-size: 18px;}
}/*END*/
/*cra_image*/
#craftsmanship .cra_image{ margin: 80px auto 0; max-width: 2400px; }
#craftsmanship .cra_image ul{ display: flex;}
#craftsmanship .cra_image ul li{ width: 33.3333%;}
#craftsmanship .x15{ display: block;}
#craftsmanship .x1{ display: none;}
@media (max-width: 1000px) {
#craftsmanship .x15{ display: none;}
#craftsmanship .x1{ display: block;}
}/*END*/

/*-------------------------------------------------
	special_page
--------------------------------------------------*/
#special_page{ padding: 80px 0 100px; background: #fff; }
#special_page h2{ text-align: center; font-size: 35px; line-height: 1; font-family: 'Times New Roman', Times, serif;}
#special_page ul{ margin: 0 auto; width: 90%; max-width: 1200px; margin-top: 50px; display: flex; justify-content: center;  }
#special_page ul li{ max-width: 325px; margin:0 20px; }
#special_page ul li p{ margin-top: 15px; font-size: 14px; line-height: 1.5; text-align: center;}
#special_page ul li a{ color: #000; text-decoration: none; transition: 0.3s; }
#special_page ul li a:hover{ color: #555; text-decoration: none; }
#special_page ul li a .img_box { overflow: hidden;}
#special_page ul li a .img_box img{ transition: 0.5s;}
#special_page ul li a:hover .img_box img{ transform: scale(1.05); opacity: .8;}
@media (max-width:640px){
#special_page{ padding: 70px 0 100px; }
#special_page h2{ font-size: 30px; }
#special_page ul{ margin: 0 auto; width: 85%; max-width: 325px; margin: 0px auto 0; display: block; }
#special_page ul li{margin:50px 0 0 }
}/*END*/
@media (max-width:450px){
#special_page{ padding: 60px 0 100px;}
#special_page h2{ font-size: 25px; }
#special_page ul li p{ margin-top: 14px; font-size: 13px; line-height: 1.5;}
}/*END*/

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