@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Oxygen+Mono');

/*--------------------------------------------------------
	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%; margin: 0;padding: 0; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; height: auto; }
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }

/*--------------------------------------------------------
	base 
---------------------------------------------------------*/
body { background: #eee; color: #222; margin: 0; padding: 0; position: relative; font-family: 'Montserrat', sans-serif; font-weight: 400;}
a{ color: #222; outline: none;}
img{ max-width: 100%; }
.none{ display: none;}

/*テキスト選択時 カラー*/
::selection { background:rgba(255, 255, 255, 0.99); color: #000!important; }
img::selection { background: #222; color: #000; }
::-moz-selection { background: #222; color: #000; }
.pc{ display: inline-block;}
.sp{ display: none;}
@media screen and (max-width: 750px) {
.pc{ display: none;}
.sp{ display: inline-block;}
}/*END*/

/*anime 
================================*/
.anime{ visibility: hidden;}
/*[co]contents*/
header,
footer,
#main .main_logo,
.cince,
.stalker,
#Concept h2,
#Concept p,
#Job_description h2,
#Job_description ul li:nth-child(odd),
#Job_description ul li:nth-child(odd) p,
#Job_description ul li:nth-child(even),
#Job_description ul li:nth-child(even) p,
#Works h2,
#Works p,
#Works .btn,
#About h2,
#About table th,
#About table td,
#Contact h2,
#Contact .Contact_bar,
#Contact tr:nth-child(1),
#Contact tr:nth-child(2),
#Contact tr:nth-child(3),
#Contact tr:nth-child(4),
#Contact .read,
#Contact .submit_btn,
.page_top,
.page_top_bar{ visibility: hidden;}


/* mouse stalker
------------------------------------*//*
html,body,a,.back,.submit{cursor: none!important;}*/
.stalker { position: fixed; z-index: 10000; pointer-events: none; margin: 0px 0 0 0px; width: 0px; height: 0px; display: block; } /* luminosity */
.stalker .stalker_S { border-radius: 50%; background: #000; position: absolute; left: 50%; top:50%; z-index: 10001; opacity: 1; }
.stalker .stalker_L._hover + .stalker_S { background: #000; }
.tr01{ width: 10px; height: 10px; margin: -5px 0 0 -5px; transition: transform 0.1s cubic-bezier(0.07, 0.38, 0.36, 1), width 0.1s ease, height 0.1s ease;}
.tr02{ width: 6px; height: 6px; margin: -3px 0 0 -3px; transition: transform 0.12s cubic-bezier(0.07, 0.38, 0.36, 1), width 0.12s ease, height 0.12s ease;}
.tr03{ width: 4px; height: 4px; margin: -2px 0 0 -2px; transition: transform 0.14s cubic-bezier(0.07, 0.38, 0.36, 1), width 0.14s ease, height 0.14s ease;}
.tr04{ width: 2px; height: 2px; margin: -1px 0 0 -1px; transition: transform 0.16s cubic-bezier(0.07, 0.38, 0.36, 1), width 0.16s ease, height 0.16s ease;}
.stalker .stalker_L { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: #fff; opacity: 0.8;  box-sizing: border-box; position: absolute; left: 50%; top:50%; border-radius: 50%; transition: transform 0.4s cubic-bezier(0.07, 0.38, 0.36, 1), width 0.2s ease, height 0.2s ease , margin 0.2s ease, background 0.2s ease, border 0.2s ease ;  z-index: 20; }
.stalker .stalker_L._hover { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;  opacity: 0.5; box-sizing: border-box; position: absolute; left: 50%; top:50%; transition: transform 0.4s cubic-bezier(0.07, 0.38, 0.36, 1), width 0.2s ease, height 0.2s ease , margin 0.2s ease, background 0.2s ease, border 0.2s ease; }


/* stalker_ON
------------------------------------*/
.stalker .stalker_ON._hover{
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
  animation-name: stalkerON;
  }
@keyframes stalkerON {
	0% 	{opacity: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px;}
	5% {opacity: 1;}
	90% {opacity: 0.1;}
	100%{opacity: 0; width: 80px; height: 80px; margin: -40px 0 0 -40px;}
}
@media screen and (max-width: 750px) {
html,body,a,.back,.submit{cursor:inherit!important;}
.stalker {display: none;}
}/*END*/

/* header
------------------------------------*/
header { width: 100%; position: fixed; top: 0; z-index: 500; }
header .header_L{ position: absolute; z-index: 0; opacity: 1; display: inline-block; padding: 0; margin: 0px; width: 10px; height: 10px;  }
header .header_L a { margin: 22px 0 0 35px;  width: 250px; height: 70px;  display: block;  }
header .header_L a::after { content:" "; display:block; clear:both;}/*clearfix*/
header .header_L a .g_logo{  float: left; width: 65px; transition: 0.3s; }
header .header_L a .url{ float: left; margin: 27px 0 0 15px; font-size: 14px; line-height: 1; letter-spacing: 1.5px; font-weight: 600; transition: 0.3s; }
header a .g_logo,
header a .url{transition: 0.3s;}
header a:hover .g_logo,
header a:hover .url{ /*color: #726e60;*/filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
@media screen and (max-width: 750px) {
header .header_L a { margin: 5vw 0 0 5vw; width: 220px; height: 55px;}
header .header_L a .g_logo{ width: 55px; }
header .header_L a .url{ margin: 5px 0 0 5px; font-size: 12px; line-height: 1; letter-spacing: 1.5px; font-weight: 600; }
}/*END*/
/*nav*/
header nav{ width: auto; position: absolute; right: 0px; top: 0px; margin: 0; }
header nav ul { margin: 0px 40px 0 30px; }
header nav ul::after { content:" "; display:block; clear:both;}/*clearfix*/
header nav ul li { float: left; margin-right: 0px; }
header nav ul li a{ font-size: 15px; font-weight: 600; letter-spacing: 1px; text-decoration: none; padding: 50px 19px 25px; display: block; position: relative; transition: 0.3s;}
header nav ul li a:hover{color: #726e60;}
header nav ul li a::after { background: #222; left: 50%; bottom: 10px; width: 1px; height: 0px; position: absolute; content:" "; display:block; z-index: 1; transition: 0.3s;}
header nav ul li a:hover::after { bottom: -10px; width: 1px; height: 13px;}
header nav ul li a.on { color: #726e60;}
header nav ul li a.on::after { bottom: -10px; width: 1px; height: 13px;}
@media screen and (max-width: 950px) {
header nav ul { margin: 0px 40px 0 30px; }
header nav ul li a{ font-size: 1.7vw; font-weight: 600; letter-spacing: 1px; text-decoration: none; padding: 50px 2vw 25px; display: block; position: relative; transition: 0.3s;}
}/*END*/
@media screen and (max-width: 750px) {
header nav{ display: none;}
}/*END*/


/* header scroll 縮小時
-------------------------------*/
@media screen and (max-width: 750px) {
header p.url{ transition: 0.8s;}
header.smaller p.url{ opacity: 0;}
footer .footer_L{ transition: 0.8s; }
footer.smaller .footer_L{ opacity: 0;}
}/*END*/


/* [ = ]
-------------------------------*/
header .btn_drawer,
header .drawer-nav{ display: none; }
@media screen and (max-width: 750px) {
header .btn_drawer{ display:block; position: absolute; left: 0px; top:0px; z-index: 500;}
}/*END*/

/* sp nav open 
-------------------------------*/
@media screen and (max-width: 750px) {
.sp_nav_inner{ padding-top: 0px; background: #222; height: 100vh; position: relative; z-index: 99999; }
.drawer-nav .sp_nav{ height: 100%; display: flex; align-items: center; justify-content: center;  }
.drawer-nav .sp_nav ul{ padding: 0 0 0;}
/*sp_nav*/
.drawer-nav .sp_nav ul > li > a{ font-size: 8vw; line-height: 1; font-weight: 600; letter-spacing: 0.1vw; text-align: center; color: #fff; padding: 4vh 0 !important; display: block; position: relative; text-decoration: none; }
}/*END*/


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


/* main
------------------------------------*/
#main{  height: 100vh; width: 100%; position: relative; z-index: 1; display: block;  }
#main .main_logo img{ width: 100%; /*opacity: 0;*/} 
#main .main_logo{ width: 80vw; position: absolute; left: 50%; top: 50%; margin: -40vw 0 0 -40vw; z-index: 1!important;}
#main .cince{ width: 200px; font-size: 14px; line-height: 1; letter-spacing: 1px; font-weight: 500; z-index: 5!important; position: absolute; left: 50%; bottom: 32%; margin:0 0 0 -100px; text-align: center; }

@media screen and (orientation: portrait) { /* 縦 */
#main .main_logo{ width: 100vw; position: absolute; left: 50%; top: 50%; margin: -50vw 0 0 -50vw; z-index: 1!important;}
}/*END*/


@media screen and (max-width: 750px) and (orientation: portrait) { /* 縦 / w750 */
#main .main_logo{ width: 140vw; position: absolute; left: 50%; top: 50%; margin: -70vw 0 0 -70vw; z-index: 1!important;}

}/*END*/

@media screen and (max-width: 750px) {

#main .cince{ width: 200px; font-size: 12px; line-height: 1; letter-spacing: 1px; font-weight: 500; z-index: 5!important; position: absolute; left: 50%; bottom: 34%; margin:0 0 0 -100px; text-align: center; }
}/*END*/

#main .main_logo {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

} 



/* scroll_btn_box フェードイン
------------------------------------*/
#scroll_btn_box {
 animation: fadeIn2 1s ease 1.5s 1 normal forwards;
 -webkit-animation: fadeIn2 1s ease 1.5s 1 normal forwards;
 opacity: 0;
}
@keyframes fadeIn2 {
 0% { opacity: 0; margin-top: -100px;}
 100% { opacity: 1; margin-top: 0px;}
}
@-webkit-keyframes fadeIn2 {
 0% { opacity: 0; margin-top: -100px;}
 100% { opacity: 1; margin-top: 0px;}
}










/* scroll_btn_box
-------------------------------*/
#scroll_btn_box{height: 0px; width: 100px; position: absolute; bottom: 20vh; left: 50%; margin-left: -50px; z-index: 2;}
#scroll_btn_box .scroll_btn a{ width: 100px; height: 15vh;position: absolute; top: 0px;  z-index: 600; display: block;   }
#scroll_btn_box .scroll_btn:hover + #scroll .scroll_wheel{ background: #666!important; }
#scroll_btn_box #scroll{ width: 100px; height:15vh ; display: block; transition: 0.3s; text-decoration: none; position: absolute; z-index: 1; top: 0px; left: 50%; margin-left: -50px; overflow: hidden; /* background: rgba(255,0,255,0.3);/**/ }
#scroll_btn_box #scroll .scroll_wheel { width: 2px; height: 100%; background: #000;/*c5c0ad*/  content:" "; display:block; position: absolute; left: 50%; top:0px; margin-left: -1px; transition: 0.3s; animation-name: scroll_wheel; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out;} 
@keyframes scroll_wheel { 
 0% { top: 0%; height: 0%; }
 20% { top:0%; height: 100%; }
 80% { top:0%; height: 100%; }
 100%{ top:100%; height: 0%; }
}

@media screen and (max-width: 1300px) {
#scroll_btn_box{height: 0px; width: 100px; position: absolute; bottom: 15vh; left: 50%; margin-left: -50px; z-index: 2;}

}/*END*/


/* Concept
------------------------------------*/
#Concept{ margin-top: 0; padding: 7vw 0 100px; width: 100%; position: relative;}
#Concept h2{ margin-top: 10vw; font-size:  60px; line-height: 1; font-weight: 600; position: relative; z-index: 1; text-align: center; }
#Concept h2 span{ padding: 0 0 5px 0px; border-bottom: solid 5px #000;}
#Concept h2 br{ display: none;}
#Concept p.txt{ margin-top: 90px; color:#222; font-size: 20px; line-height: 3; letter-spacing: 1px; text-align: center;}
@media screen and (max-width: 1300px) {
#Concept p.txt{ font-size:1.55vw; }
}/*END*/
@media screen and (max-width: 1000px) {
#Concept h2{ margin-top: 10vw; font-size:  60px; line-height: 1.5; font-weight: 600; position: relative; z-index: 1; text-align: center; }
#Concept h2 br{ display: inline;}
#Concept p{ width: 85%; margin: 0 auto; }
#Concept p.txt{ margin-top: 60px; font-size:16px; line-height: 2.5;  text-align: left;}
#Concept p.txt br{ display: none; }
}/*END*/
@media screen and (max-width: 800px) {
#Concept{ padding: 10vw 0 0px; width: 100%; position: relative;}
#Concept h2{ margin-top: 10vw; font-size:  8vw; line-height: 1.8; font-weight: 600; position: relative; z-index: 1; text-align: center; }
#Concept h2 span{ padding: 0 0 .5vw 0px; border-bottom: solid 1vw #000;}
}/*END*/



/* Job_description
------------------------------------*/
#Job_description{ text-align: left; padding: 50px 0 300px 0; position: relative; z-index: 1; /* background: rgba(0,0,0,0.05);/**/ }
#Job_description .inner{ position: relative; max-width: 1800px; width: 85%; margin: 50px auto 0; }
#Job_description .inner::after { content:" "; display:block; clear:both;}/*clearfix*/
/*inner_L*/
#Job_description .inner .inner_L{ width: 500px;}
#Job_description .inner .inner_L h2{ padding: 50px 0 0 0px; font-size: 140px; line-height: 1; font-weight: 600; position: relative; z-index: 1; }
#Job_description .inner .inner_L h2 div{ padding:0px; margin: 0; }
#Job_description .inner .inner_L h2 .dry02 { margin-top: -40px; }
@media screen and (max-width: 1500px) {
#Job_description .inner .inner_L h2{ font-size: 9.4vw; }
}/*END*/
@media screen and (max-width: 1100px) {
#Job_description .inner .inner_L h2{ font-size: 104px; }
}/*END*/
@media screen and (max-width: 740px) {
#Job_description{ text-align: left; padding: 50px 0 200px 0; position: relative; z-index: 1; /* background: rgba(0,0,0,0.05);/**/ }
#Job_description .inner .inner_L h2{padding: 0px 0 0 0px; font-size: 14vw; }
}/*END*/


/*Safari ハック*/
_::-webkit-full-page-media, _:future, :root #Job_description .inner .inner_L h2 .dry02 { margin-top: 14px; }
@media screen and (max-width: 1350px) {
_::-webkit-full-page-media, _:future, :root #Job_description .inner .inner_L h2 .dry02 { margin-top: 1vw; }
}/*END*/
#Job_description ul{ margin: 120px auto 0; max-width: 1300px; width: 90%;}
#Job_description ul::after { content:" "; display:block; clear:both;}/*clearfix*/
#Job_description ul li { margin-top: 120px; width: 45%; }
#Job_description ul li:nth-child(odd){ float: left; }
#Job_description ul li:nth-child(even){ float: right;  }
#Job_description ul li h3{ margin-top: 0px; padding: 0; font-size: 50px; line-height: 1.4; font-weight: 700; display: inline; color: #000;  }
#Job_description ul li h3 span{ padding: 0 0px; border-bottom: solid 4px #000;}
#Job_description ul li p{ margin-top: 25px; display: block; }
p{ font-size: 16px; line-height: 1.8; display: block; }

@media screen and (max-width: 900px) {
#Job_description{ padding: 50px 0 80px 0;  }

#Job_description ul{ margin: 20px auto 0; width: 90%;}
#Job_description ul li { margin-top: 60px; width: 100%; }
#Job_description ul li:nth-child(odd){ float: left; }
#Job_description ul li:nth-child(even){ float: right;  }
#Job_description ul li h3{ margin-top: 0px; padding: 0; font-size: 40px; line-height: 1.4;  }
}/*END*/


@media screen and (max-width: 550px) {
#Job_description ul li h3{ margin-top: 0px; padding: 0; font-size: 7vw; line-height: 1.4; }
}/*END*/




/* Works
------------------------------------*/
#Works{ width:100%; margin: 0 auto;  padding: 75px 0; text-align: left; position: relative; z-index: 1; /**/ }

#Works .inner{ position: relative; max-width: 1800px; width: 90%; margin: 50px auto 0; padding: 150px 0 250px 0;  text-align: center;  background: rgba(0,0,0,0.04);}

#Works .inner h2{ padding: 50px 0 0 0px; font-size: 140px; line-height: 1; font-weight: 600; position: relative; z-index: 1; transition: 0.3s; }
@media screen and (max-width: 1500px) {
#Works .inner h2{ font-size: 9.4vw; }
}/*END*/
@media screen and (max-width: 1100px) {
#Works .inner h2{ font-size: 104px; }
}/*END*/
@media screen and (max-width: 740px) {
#Works .inner h2{padding: 0px 0 0 0px; font-size: 14vw; }
}/*END*/
#Works .inner .txt_box{  margin: 20px auto 0; width: 80%; max-width: 1400px; text-align: center;}
.btn a { margin-top: 40px; display: inline-block; color: #222; border: solid 2px #222; border-radius: 50px; background: none;  padding:16px 40px; text-align: center; font-size: 16px; letter-spacing: 2px; cursor:pointer; transition: .4s; text-decoration: none;}
.btn a:hover { background:#222!important; border: solid 2px #222!important; color: #fff!important;	text-decoration:none;}
@media screen and (max-width: 640px) {
#Works{ width: 100%; margin: 0 auto; text-align: left; padding: 20px 0 60px 0; position: relative; z-index: 1; }
#Works .inner{ margin: 50px auto 0; padding: 150px 0 150px 0;  text-align: center;  background: rgba(0,0,0,0.04);}
#Works .inner .txt_box {  margin: 20px auto 0; width: 85%;text-align: left;}
#Works .inner .txt_box br { display: none; }
#Works .inner .txt_box span { display: inline-block; }
}/*END*/



/* About
------------------------------------*/
#About{ width: 90%; max-width: 1100px; margin: 0 auto; text-align: left; padding: 150px 0 250px 0; position: relative; z-index: 1; }
#About h2{ padding: 50px 0 0 0px; font-size: 140px; line-height: 1; font-weight: 600; position: relative; z-index: 1; text-align: right; }

@media screen and (max-width: 1500px) {
#About h2{ font-size: 9.4vw; }
}/*END*/
@media screen and (max-width: 1100px) {
#About h2{ font-size: 104px; }
}/*END*/
@media screen and (max-width: 740px) {
#About h2{padding: 0px 0vw 0 0px; font-size: 14vw; text-align: center; }
}/*END*/



#About table{ width: 85%; width: 700px; margin: 50px auto 0; font-size: 16px; line-height: 1.8;  }
#About table th{ padding: 15px 0; font-weight: bold;}
#About table td{ padding: 15px 0 15px 40px;}

@media screen and (max-width: 840px) {
	
#About{ width: 85%; max-width: 1100px; margin: 0 auto; text-align: left; padding: 100px 0 150px 0; position: relative; z-index: 1; }
	
#About table{ max-width: 700px; width: 100%; margin: 50px auto 0; font-size: 16px; line-height: 1.8;  }
#About table th{ white-space: nowrap;}
#About table td{ padding: 15px 0 15px 20px;}

}/*END*/




/* Contact
------------------------------------*/
#Contact{ padding: 140px 0 300px; width: 100%; position: relative;  z-index: 10; }
#Contact .Contact_bg{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(40,40,40,0.03); z-index: -10;  }
#Contact .inner{ position: relative;  z-index: 100; }
#Contact .inner h2{ font-size: 100px; line-height: 1; font-weight: 600; z-index: 10; text-align: center; }
#Contact .inner .read{ text-align: center; font-size: 13px; }
#Contact .inner .Contact_bar{ background: #222; width: 2px; height: 110px; margin: 40px auto 30px; }
.red{color: #a00}
/*form*/
table.contact_table { max-width: 650px; width: 90%; margin: 0 auto;}
table.contact_table td{ padding: 0 0 20px; font-size: 12px;}
table.contact_table td h4{ padding: 0 0 10px; font-size: 18px; font-weight: 600;}
table.contact_table td h4 sup{font-size: 14px;}
table.contact_table td p{ padding: 0 0 10px; font-size: 13px; font-weight: normal!important; color: #a00;}
input[type="text"], input[type="password"], textarea, select { margin: 0 0 8px;padding: 10px;box-sizing: border-box;color:#000;background: #fff ;border: 1px solid #fff;outline: none;border-radius: 5px;width: 100%;font-size: 16px; -webkit-appearance: none; transition: .5s;} 
/*テキストエリア　フォーカス時*/
input:focus,
textarea:focus{box-shadow:0px 0px 3px 1px #ccc;border:1px solid #ccc;}
/*ボタン*/
input[type="button"],
input[type="submit"] { -webkit-appearance: none; margin-top: 30px; outline: none; }
input[type="button"],
input[type="submit"].submit,a.submit { display: inline-block; color: #222; border: solid 2px #222; border-radius: 50px; background: none; width: 50%; max-width: 210px; padding:16px 0; text-align: center; font-size: 16px; letter-spacing: 2px; cursor:pointer; transition: .4s;}
#Contact .submit:hover { background:#222!important; border: solid 2px #222!important; color: #fff!important;	text-decoration:none;}
#Contact .back { display: inline-block; color: #000; background-color: #555; border: solid 2px #555; width: 40%; max-width: 210px;	padding:16px 0; text-align: center; font-size: 16px;	cursor:pointer;	transition: .4s;}
#Contact .back:hover {	background-color:#777; border: solid 2px #777;}
#Contact textarea{ width: 100%; }
@media screen and (max-width: 750px) {
#Contact{ padding: 20vw 0 300px; width: 100%; position: relative; background: rgba(40,40,40,0.03); }
#Contact .inner h2{ font-size: 13.1vw; line-height: 1; font-weight: 600; z-index: 1; text-align: center; }
#Contact .inner .read{ text-align: center; font-size: 13px; }
#Contact .inner .Contact_bar{ background: #222; width: 2px; height: 20vw; margin: 10vw auto 30px; }
/*form*/
table.contact_table { max-width: 650px; width: 80%; margin: 0 auto;}
table.contact_table td{ padding: 0 0 20px; font-size: 12px;}
table.contact_table td h4{ padding: 0 0 10px; font-size: 16px; font-weight: 600;}
table.contact_table td h4 sup{font-size: 14px;}
table.contact_table td p{ padding: 0 0 10px; font-size: 12px; font-weight: normal;}
}/*END*/
/*確認ページ*/
#contact_check{ padding: 100px 0 150px; width:80%; max-width: 650px; margin: 0 auto;}
#contact_check h2{ font-size: 100px; font-weight: 600; line-height: 1; text-align: center;}
#contact_check p.read{ font-size: 16px; line-height: 1.8; text-align: center; padding: 50px 0;}
#contact_check table { width:100%; padding-bottom: 20px;}
#contact_check table td { width:100%; color:#000; font-size:16px; line-height: 1.6; border-collapse:collapse; padding: 40px 0; border-bottom: solid 2px #333;}
#contact_check table td h4 { font-size: 13px; color: #888; padding: 0 0 3px 0;}
#contact_check input[type="submit"].submit,
#contact_check a.submit { display: inline-block; color: #fff; border: solid 2px #222; background: #222; width: 40%; max-width: 210px; padding:16px 0; text-align: center; font-size: 16px; cursor:pointer; transition: .4s;}
#contact_check .submit:hover { background:#222!important; border: solid 2px #222!important; color: #fff!important;	text-decoration:none;}
@media screen and (max-width: 750px) {
#contact_check{ padding: 15vw 0 15vw; width:80%; max-width: 650px; margin: 0 auto;}
#contact_check h2{ font-size: 13.1vw; font-weight: 600; line-height: 1; text-align: center;}
#contact_check p.read{ font-size: 13px; line-height: 1.8; text-align: center; padding: 5vw 0;}
#contact_check table td { width:100%; color:#fff; font-size:16px; line-height: 1.6; border-collapse:collapse; padding: 30px 0; border-bottom: solid 2px #333;}
}/*END*/
@media screen and (max-width: 450px) {
#contact_check p.read{ font-size: 12px; line-height: 1.8; text-align: center; padding: 5vw 0;}
}/*END*/
/*サンクスページ*/
#contact_thanks{ padding: 100px 0 150px;  width:80%; max-width: 650px; margin: 0 auto; text-align: center;}
#contact_thanks h2{ font-size: 100px; font-weight: 600; line-height: 1; text-align: center;}
#contact_thanks p.read{ font-size: 16px; line-height: 2.5; text-align: center; padding: 50px 0;}
#contact_thanks .btn_home a{ display: inline-block; color: #000; border: solid 2px #222; background: none; border-radius: 50px; width: 60%; max-width: 200px; padding:16px 0; text-align: center; font-size: 16px; cursor:pointer; transition: .4s; text-decoration: none;}
#contact_thanks .btn_home a:hover{ background: #222; color: #fff;}
@media screen and (max-width: 750px) {
#contact_thanks{ padding: 15vw 0 15vw; text-align: center;}
#contact_thanks h2{ font-size: 13.1vw; font-weight: 600; line-height: 1; text-align: center;}
#contact_thanks p.read{ font-size: 13px; line-height: 2.5; text-align: center; padding: 5vw 0;}
#contact_thanks .btn_home a{  font-size: 14px; }
}/*END*/
@media screen and (max-width: 380px) {
#contact_thanks p.read{ font-size: 12px; line-height: 2.5; text-align: center; padding: 5vw 0;}
}/*END*/

/* footer
------------------------------------*/
footer{ width: 100%; text-align: center; padding: 0px 0; position: fixed; bottom: 0px; z-index: 1; vertical-align: bottom;  }
footer::after { content:" "; display:block; clear:both;}/*clearfix*/
/*footer_L*/
footer .footer_L{ position: absolute;  left: 50px; bottom:30px; z-index: 1; text-align: left; }
/*date_time*/
footer .footer_L .date_time { font-family: 'Oxygen Mono', monospace; font-size: 16px; line-height: 1.2; color: #222; text-align: left; margin-bottom: 10px; }
footer .footer_L .date_time #date { display: inline-block; }
footer .footer_L .date_time #date2 { display: inline-block; }
footer .footer_L .date_time #time { display: inline-block; }
/*browser_data*/
footer .footer_L .browser_data{ color: #222; font-family: 'Oxygen Mono', monospace; font-size: 11px; line-height: 1; }
footer .footer_L .browser_data #Winsize{ margin: 0px 10px 0 0px;}
footer .footer_L .browser_data #XY{ margin: 0px 10px 0 0px; text-align: left; display: inline-block; }
footer .footer_L .browser_data #Scroll_Y{ text-align: left; display: inline-block; }
/*copyright*/
footer .copyright{position: absolute; right: 50px; bottom:50px; font-size: 12px; line-height: 1; letter-spacing: 1px; vertical-align: bottom; }

@media screen and (max-width: 1000px) {
footer .footer_L{ position: absolute;  left: 20px; bottom:20px; max-width: 200px; width: 42%; z-index: 800!important; text-align: left; }
footer .footer_L .date_time { width: 100%; font-family: 'Oxygen Mono', monospace; font-size: 14px; letter-spacing: 0px; line-height: 1.5; text-align: left; margin-bottom: 10px; }
footer .footer_L .browser_data{ color: #222; font-family: 'Oxygen Mono', monospace; font-size: 10px; line-height: 1.3;  }
footer .footer_L .browser_data #Winsize{ margin: 0px 10px 0 0px; display: block;}
footer .footer_L .browser_data #XY{ margin: 0px 10px 0 0px; text-align: left; display: block; }
footer .footer_L .browser_data #Scroll_Y{ text-align: left; display:block; }
footer .copyright{ position: absolute; right: 20px; bottom:20px; font-size: 10px; line-height: 1; letter-spacing: 1px; vertical-align: bottom; z-index: 500; }
}/*END*/

@media screen and (max-width: 370px) {
footer .footer_L{ position: absolute;  left: 20px; bottom:20px; max-width: 200px; width: 42%; z-index: 800!important;letter-spacing: 0px; text-align: left; }
footer .footer_L .date_time { font-size: 12px; letter-spacing: 0px; line-height: 1.4;  margin-bottom: 0px;  }
footer .footer_L .browser_data{ display: none;}
}/*END*/


/* page_top
------------------------------------*/
.page_top{ width: 1000px; height: 1000px; border-radius: 50%; background: none; position: absolute; bottom:-880px; left: 50%; z-index: 100; margin-left: -500px; transition: 0.3s;  }
/*.page_top:hover{ background: #999!important; }*/
.page_top a { display: block; width: 1000px; height: 1200px; border-radius: 500px; margin: -60px auto 0 ; position: relative; }
.page_top_bar{ width: 2px; height: 120px; display: block; transition: 0.3s; text-decoration: none; position: absolute; z-index: 110; bottom: 60px; left: 50%;margin-left: -1px; overflow: hidden;  }
.page_top_bar .page_top_bar_move {width: 2px; height: 120px; background: #222; content:" "; display:block; position: absolute; left: 50%; top:-120px; margin-left: -1px;
transition: 0.3s; animation-name: page_top_bar_move; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; } 
.page_top:hover + .page_top_bar .page_top_bar_move{ background: #726e60!important; }
@keyframes page_top_bar_move {
 0% { top: 122px; }
 20% { top:0px; }
 80% { top:0px; }
 100%{ top: -122px; }
}

/* line
------------------------------------*/
.line01,
.line02,
.line03{ width: 1px; height: 100%; position: absolute; z-index: -10; top:0px; border-right:1px dotted #666; box-sizing: border-box; 
  animation-timing-function:cubic-bezier(.14,.64,.5,.91);/*イージング*/
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-name: line;
  }
.line01{ left: 25%;}
.line02{ left: 50%;}
.line03{ left: 75%;}

@keyframes line {
	0% 	{opacity: 0.5;}
	60% {opacity: 0.3;}
	100%{opacity: 0.3;}
}

/* load
------------------------------------*/
.load01,
.load02,
.load03,
.load04{ width: 25%; height: 90%; background:#fff; position: fixed; top:0%; z-index: 200;  
  animation-timing-function:cubic-bezier(.14,.64,.5,.91);/*イージング*/
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}
.load01{ left: 0%; animation-name: load01;}
.load02{ left: 25%; animation-name: load02;}
.load03{ left: 50%; animation-name: load03;}
.load04{ left: 75%; animation-name: load04;}

@keyframes load01 {
	0% 	{height: 100%;}
	10% {height: 100%;}
	50% {height: 0%;}
	100%{height: 0%;}
}
@keyframes load02 {
	0% 	{height: 100%;}
	15% {height: 100%;}
	55% {height: 0%;}
	100%{height: 0%;}
}
@keyframes load03 {
	0% 	{height: 100%;}
	20% {height: 100%;}
	60% {height: 0%;}
	100%{height: 0%;}
}
@keyframes load04 {
	0% 	{height: 100%;}
	25% {height: 100%;}
	65% {height: 0%;}
	100%{height: 0%;}
}

/*----------------------------------------------------------
		アニメ
-----------------------------------------------------------*/
/* in  
-------------------------------*/
.in { display: inline-block; position: relative; overflow: hidden;}

/* in_start  
-------------------------------*/
.in_start::after {
  content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; 
	background: #111;
  animation-name: in_start;
  animation-timing-function:ease;/*イージング*/
  animation-duration: 3.5s;
  animation-fill-mode: forwards;
}
.dry02.in_start::after {animation-name: dry02;}
.dry03.in_start::after {animation-name: dry03;}
.dry04.in_start::after {animation-name: dry04;}
.dry05.in_start::after {animation-name: dry05;}
.dry06.in_start::after {animation-name: dry06;}
@keyframes in_start {
	0% 	{transform: translateX(-100%);}
	10% {transform: translateX(0);}
	15% {transform: translateX(0);}
	25%{transform: translateX(101%);}
	100%{transform: translateX(101%);}
}
@keyframes dry02 {
	0% 	{transform: translateX(-100%);}
	5% {transform: translateX(-100%);}
	15% {transform: translateX(0);}
	20% {transform: translateX(0);}
	30%{transform: translateX(101%);}
	100%{transform: translateX(101%);}
}
@keyframes dry03 {
	0% 	{transform: translateX(-100%);}
	10% {transform: translateX(-100%);}
	20% {transform: translateX(0);}
	25% {transform: translateX(0);}
	35%{transform: translateX(101%);}
	100%{transform: translateX(101%);}
}
@keyframes dry04 {
	0% 	{transform: translateX(-100%);}
	15% {transform: translateX(-100%);}
	25% {transform: translateX(0);}
	30% {transform: translateX(0);}
	40%{transform: translateX(101%);}
	100%{transform: translateX(101%);}
}
@keyframes dry05 {
	0% 	{transform: translateX(-100%);}
	20% {transform: translateX(-100%);}
	30% {transform: translateX(0);}
	35% {transform: translateX(0);}
	45%{transform: translateX(101%);}
	100%{transform: translateX(101%);}
}
@keyframes dry06 {
	0% 	{transform: translateX(-100%);}
	25% {transform: translateX(-100%);}
	35% {transform: translateX(0);}
	40% {transform: translateX(0);}
	50%{transform: translateX(101%);}
	100%{transform: translateX(101%);}
}

/* inin  （要素フェードイン）
-------------------------------*/
.in .inin  { opacity: 0;  }
.in_start .inin  { 
	opacity: 1; 
	animation-duration: 3.5s; 
	animation-name: fadeIn; 
	animation-fill-mode: forwards;margin: 0; padding: 0;
}
.dry02.in_start .inin { animation-name: indry02; }
.dry03.in_start .inin { animation-name: indry03; }
.dry04.in_start .inin { animation-name: indry04; }
.dry05.in_start .inin { animation-name: indry05; }
.dry06.in_start .inin { animation-name: indry06; }
@keyframes fadeIn {
  0% 	{ opacity: 0;}
  10% { opacity: 0;}
  15% { opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% 	{ opacity: 0;}
  10% { opacity: 0;}
  15% { opacity: 1;}
}
/*dry02*/
@keyframes indry02 {
  0% 	{ opacity: 0;}
  15% { opacity: 0;}
  20% { opacity: 1;}
}
@-webkit-keyframes indry02 {
  0% 	{ opacity: 0;}
  15% { opacity: 0;}
  20% { opacity: 1;}
}
/*dry03*/
@keyframes indry03 {
  0% 	{ opacity: 0;}
  20% { opacity: 0;}
  25% { opacity: 1;}
}
@-webkit-keyframes indry03 {
  0% 	{ opacity: 0;}
  20% { opacity: 0;}
  25% { opacity: 1;}
}
/*dry04*/
@keyframes indry04 {
  0% 	{ opacity: 0;}
  25% { opacity: 0;}
  30% { opacity: 1;}
}
@-webkit-keyframes indry04 {
  0% 	{ opacity: 0;}
  25% { opacity: 0;}
  30% { opacity: 1;}
}
/*dry05*/
@keyframes indry05 {
  0% 	{ opacity: 0;}
  30% { opacity: 0;}
  35% { opacity: 1;}
}
@-webkit-keyframes indry05 {
  0% 	{ opacity: 0;}
  30% { opacity: 0;}
  35% { opacity: 1;}
}
/*dry06*/
@keyframes indry06 {
  0% 	{ opacity: 0;}
  35% { opacity: 0;}
  40% { opacity: 1;}
}
@-webkit-keyframes indry06 {
  0% 	{ opacity: 0;}
  35% { opacity: 0;}
  40% { opacity: 1;}
}