@charset "utf-8";

/* reset
---------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,main,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; font-style:normal; background:transparent; box-sizing:border-box; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
ol,ul { list-style:none;} 
table { border-collapse:collapse; border-spacing:0; width:100%; } 
caption,th { text-align:left; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
input,select,textarea { font-family:inherit; font-size:100%; font-weight:normal; box-sizing:border-box; }
label { white-space:nowrap; }
img	{ vertical-align:middle; font-size:0; line-height:0; max-width:100%; height:auto; }
iframe { max-width:100%; }
strong { font-weight:bold; } 
body { -webkit-text-size-adjust:100%; }
@media print {
body { width:1100px; -webkit-transform: scale(0.8); transform: scale(0.8); transform-origin: 0 0; }
}



/* baseSet
-------------------------------------------------------------------------------------------------------- */
/* common class */
html		{ font-size:calc(100vw / 32); } 
body	{ color:#333333; font-size:1.4rem; line-height:1.6; font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
a			{ color:#333; outline:none; text-decoration:none; }
a:hover		{ text-decoration:none; transition: 0.3s; }
@media print, screen and (min-width: 768px) {
html	{ font-size:62.5%; } /* 768px Over */
body	{ font-size:1.6rem; line-height:1.6; }
a:hover	{ opacity:0.7; }
}



/* unique class */
.inner		{ position:relative; max-width:1110px; margin:0 auto; padding:0 2rem; box-sizing: content-box; }
.only-pc	{ display:none; }
.en_font	{ font-family: 'Open Sans', sans-serif;}
.min_font	{ font-family: "ヒラギノ明朝 ProN W3" , "HiraMinProN-W3" , "游明朝", YuMincho, 'ＭＳ 明朝','MS Mincho', "メイリオ", Meiryo, serif;}
.rev		{ flex-direction: row-reverse;}
.sm			{ font-size: 1rem;}
@media print, screen and (min-width: 768px) {
.inner		{ padding:0 40px; }
.only-sp	{ display:none; }
.only-pc	{ display:block; }
.sm			{ font-size: 1.2rem;}

}

@media print, screen and (min-width: 1024px) {
.inner		{ padding:0 10px; }
.sm			{ font-size: 1.4rem;}

}




/* ----------------------------------------------
header
------------------------------------------------------------ */

html.hidden,body.hidden				{ height:100%; overflow:hidden; transition: 0.3s; }
html.hidden:after,body.hidden:after	{ position: absolute; top: 0; left: 0;  content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.1);}


#header												{ position: relative; height: 6rem;}
#header .head-wrap									{ }
#header .head-wrap .logo_box						{ -webkit-display: flex; display: flex; position:absolute; top:1.8rem; left:2rem; }
#header .head-wrap .logo_box .logo					{ position: relative; width: 100%; max-width: 17rem; z-index: 555;  }
	
#header .head-wrap #gNav							{  }
#header .head-wrap #gNav #gMenuBtn					{ display:block; position:absolute; top:2rem; right:2rem; z-index:161; }
#header .head-wrap #gNav #gMenuBtn a				{ display:block; padding-top:2.5rem; overflow:hidden; width:2.5rem; height:0; background:url("../images/common/gmenu_btn_open.png") no-repeat center center; background-size:contain; }
#header .head-wrap #gNav #gMenu						{ overflow: scroll; transition: 0.3s; position:fixed; right:0; top:0; width:100%; height:100%; padding:10rem 2rem 6rem; background-color:#ffffff; margin-right:-100%; z-index: 55; }

#header .head-wrap #gNav #gMenu ul 					{ -webkit-display: flex; display: flex; flex-wrap: wrap; margin: 0 -10px;}
#header .head-wrap #gNav #gMenu ul li				{ position: relative; width: calc(50% - 20px); margin: 0 10px 4rem; padding: 0 0 0 1.5rem;}
#header .head-wrap #gNav #gMenu ul li:after			{ position: absolute; top: 0.8rem; left: 0; content: ""; display: block; width: 0.5rem; height: 2px; background: #1e90de;}
#header .head-wrap #gNav #gMenu ul li a				{ display: block; letter-spacing: 0.2rem;  }


/* 採用情報、お問い合わせ --------------- */
/* common */
#header .head-wrap #gNav #gMenu ul li.bg				{ width: 100%; padding: 0; }
#header .head-wrap #gNav #gMenu ul li.bg a				{ padding: 1.8rem 2rem 1.2rem; }
#header .head-wrap #gNav #gMenu ul li.bg:after			{ display: none;}
#header .head-wrap #gNav #gMenu ul li.bg a span			{ padding: 0.1rem 0 0 3rem; background: no-repeat left top; background-size: contain;}

/* recruit */
#header .head-wrap #gNav #gMenu ul li.bg.recruit		{ margin: 0 0 2rem;}
#header .head-wrap #gNav #gMenu ul li.bg.recruit a		{ background: -webkit-linear-gradient(-45deg, #fff100 0%,#ffd700 100%); background: linear-gradient(135deg, #fff100 0%,#ffd700 100%);  }
#header .head-wrap #gNav #gMenu ul li.bg.recruit a span	{ background-image: url("../images/common/gmenu_recruit.png") ; }

/* contact */
#header .head-wrap #gNav #gMenu ul li.bg.contact		{ margin: 2rem 0 0 0;}
#header .head-wrap #gNav #gMenu ul li.bg.contact a		{ background: -webkit-linear-gradient(-45deg, #00bfff 0%,#1e90de 100%); background: linear-gradient(135deg, #00bfff 0%,#1e90de 100%); }
#header .head-wrap #gNav #gMenu ul li.bg.contact a span	{ color: #ffffff; background-image: url("../images/common/gmenu_contact.png") ; }


/* view --------------- */

#header.view .head-wrap #gNav #gMenuBtn a	{ background-image:url("../images/common/gmenu_btn_close.png") ;}
#header.view .head-wrap #gNav #gMenu	{ margin-right: 0; }



@media print, screen and (min-width: 768px) {
#header												{ height: 100px;}
#header .head-wrap .logo_box						{ top: 30px; left: 30px;  }
#header .head-wrap .logo_box .logo					{ max-width: 260px; }
#header .head-wrap #gNav #gMenuBtn					{ top:3.6rem; right:3rem;}
#header .head-wrap #gNav #gMenuBtn a				{ padding-top:35px; width:35px;  }
#header .head-wrap #gNav #gMenu						{ width:40%; padding-top:110px; margin-right: -40%; z-index: 55; }
}
#header .head-wrap #gNav #gMenu ul 					{ -webkit-display: block; display: block; margin: 0 ;}
#header .head-wrap #gNav #gMenu ul li				{ width: 100%; margin: 0 0 60px; padding: 0 0 0 1.5rem;}
#header .head-wrap #gNav #gMenu ul li:nth-child(4)	{ margin: 0 0 50px; }
#header .head-wrap #gNav #gMenu ul li a				{ font-size: 14px; }


@media print, screen and (min-width: 1024px) {
#header .head-wrap .logo_box						{ left:20px; }
#header .head-wrap .logo_box .logo					{ max-width:300px; }
#header .head-wrap #gNav							{ width: 66%; margin: 0 0 0 auto; }
#header .head-wrap #gNav #gMenuBtn					{ display:none; }
#header .head-wrap #gNav #gMenu						{ overflow: hidden; -webkit-display: flex; display: flex; justify-content: flex-end; transition: 0; position:static; width:100%; height:100px; padding:0; background-color:initial; margin-right: 0;  }

#header .head-wrap #gNav #gMenu ul 					{ -webkit-display: flex; display: flex; flex-wrap: nowrap; }
#header .head-wrap #gNav #gMenu ul li				{ width: auto; margin: 0; padding: 0;}
#header .head-wrap #gNav #gMenu ul li:after			{ display: none; padding: 0;}
#header .head-wrap #gNav #gMenu ul li:nth-child(4)	{ margin: 0 20px 0 0; }
#header .head-wrap #gNav #gMenu ul li a				{ padding: 44px 20px 0; font-size: 14px; }

/* 採用情報、お問い合わせ --------------- */
/* common */
#header .head-wrap #gNav #gMenu ul li.bg				{ width: 100px; padding: 0; text-align: center; }
#header .head-wrap #gNav #gMenu ul li.bg a				{ padding: 20px 0 0 0 ; font-size: 12px; line-height: 100px; }
#header .head-wrap #gNav #gMenu ul li.bg a span			{ padding: 35px 0 0 0; background: no-repeat center top; background-size: 30px; font-weight: bold;}

/* recruit */
#header .head-wrap #gNav #gMenu ul li.bg.recruit		{ margin: 0;}

/* contact */
#header .head-wrap #gNav #gMenu ul li.bg.contact		{ margin: 0;}

}


@media print, screen and (min-width: 1260px) {
#header												{ height: 150px;}
#header .head-wrap .logo_box						{ top: 40px; left: 60px;  }
#header .head-wrap .logo_box .logo					{ max-width: 420px; }

#header .head-wrap #gNav #gMenu						{ height:150px;  }
#header .head-wrap #gNav #gMenu ul li:nth-child(4)	{ margin: 0 50px 0 0; }
#header .head-wrap #gNav #gMenu ul li a				{ padding: 70px 25px 0; font-size: 14px; }


/* 採用情報、お問い合わせ --------------- */
/* common */
#header .head-wrap #gNav #gMenu ul li.bg				{ width: 150px;}
#header .head-wrap #gNav #gMenu ul li.bg a				{ padding: 26px 0 0 0 ; font-size: 14px; line-height: 150px; }
#header .head-wrap #gNav #gMenu ul li.bg a span			{ padding: 44px 0 0 0; background: no-repeat center top; background-size: 36px; font-weight: normal; letter-spacing: 1px;}


/* contact */
#header .head-wrap #gNav #gMenu ul li.bg.contact a span		{ padding: 42px 0 0 0;}

}



/* footer
-------------------------------------------------------------------------------------------------------- */
#footer								{ position: relative;}
#footer	#fMenu						{ -webkit-display: flex; display: flex; flex-wrap: wrap; padding: 2.5rem 2rem 2rem; }
#footer	#fMenu li					{ width: 50%; }
#footer	#fMenu li a					{ display: block; padding: 1.5rem 0; font-size: 1.2rem; letter-spacing: 0.1rem; }

#footer	.logo_box					{ padding: 3rem 2rem 3rem; background: #ecf1f6;}
#footer	.logo_box .logo				{ max-width: 24rem; }
#footer	.logo_box .txt				{ margin-top: 2.5rem; font-size: 1.2rem; }
#footer	.logo_box .txt .com_name	{ font-size: 1.2rem; font-weight: bold;}
#footer	.logo_box .txt .com_add		{ margin-top: 0.5rem; }
#footer	.logo_box .txt .com_tel		{ margin-top: 0.5rem; }
#footer	.copy	{ padding: 1rem; color: #939393; font-size: 1rem; text-align: center; }

@media print, screen and (min-width: 768px) {
#footer								{ }
#footer .f-wrap						{ }
#footer	#fMenu						{ justify-content: center; padding: 25px 10px 20px; }
#footer	#fMenu li					{ width: auto; margin: 0 2rem; }
#footer	#fMenu li a	span			{ padding-left: 20px; font-size: 14px;}
#footer	.logo_box					{ padding: 30px 30px 30px; }
#footer	.logo_box .logo				{ max-width: 300px; margin: 0 ;}
#footer	.logo_box .txt				{ margin: 20px 0 0 0; text-align: left;}
#footer	.logo_box .txt .com_name	{ font-size: 14px; }
#footer	.logo_box .txt .com_tel		{ margin-top: 0; }
#footer	.copy						{ padding: 15px 30px; text-align: left;}

}
@media print, screen and (min-width: 1024px) {
#footer								{ background: #ecf1f6;  }
#footer .f-wrap						{ max-width: 1110px; margin: 0 auto; -webkit-display: flex; display: flex; flex-direction: row-reverse; padding: 60px 0;  }
#footer	#fMenu						{ width: 60%; padding:0 1rem 0; justify-content:flex-end; }
#footer	#fMenu li					{ margin: 0 0 0 20px; }
#footer	#fMenu li a					{ padding: 1.5rem 0 0; font-size: 14px; }
#footer	#fMenu li a	span			{ padding-left: 0; background:none; font-size: 14px; font-weight: bold;}

#footer	.logo_box					{ width: 40%; padding: 0 10px 0; border-top: none; background: none; border-right: #939393 1px solid; }
#footer	.logo_box .txt				{ font-size: 14px;}
#footer	.copy						{ padding: 25px 10px; font-size: 12px; background: #ffffff;}
#footer	.copy p						{ max-width: 1110px; margin: 0 auto;  }

}






/* ------------------------------------------
contents
-------------------------------------------------------------- */

.contents_wrap			{ overflow: hidden; }
.bg_dot					{ background-image: url("../images/common/bg_dot.png"), url("../images/common/bg_dot.png"), url("../images/common/bg_dot.png"); background-repeat: repeat-y; background-position:0%,50%,100%; max-width: 1600px; margin: 0 auto; }
.bg_color				{ background-color: #eaeff3;}
.box-wrap				{ padding: 4rem 0;}
.full_back				{ width: 100%; position: absolute; top: 0; left: 0;}

@media print, screen and (min-width: 768px) {
.bg_dot					{ background-image: url("../images/common/bg_dot.png"), url("../images/common/bg_dot.png"), url("../images/common/bg_dot.png"), url("../images/common/bg_dot.png"), url("../images/common/bg_dot.png"); background-position: 0%,25%,50%,75%,100%;}
.box-wrap				{ padding: 90px 0;}
}

@media print, screen and (min-width: 1024px) {

.box-wrap				{ padding: 140px 0;}


}





/* -------------------------------------------------------
pageTitle
---------------------------------------------------------------- */

#pageTitle									{ height: 15rem; padding: 6.5rem 0 0 0px; background: #cccccc no-repeat center center; background-size: cover;  }
#pageTitle.no-img							{ background: #adc36f;}
#pageTitle .main							{ font-size: 1.8rem; letter-spacing: 0.2rem; text-align: center; color: #ffffff;}

@media print, screen and (min-width: 768px) {
#pageTitle									{ height: 250px; padding: 120px 0 0 0;}
#pageTitle .main							{ font-size: 22px; }

}
@media print, screen and (min-width: 1024px) {
#pageTitle									{ height: 350px; padding: 170px 0 0 0;}
#pageTitle .main							{ font-size: 26px; }

}


/* -------------------------------------------------------
pageTop
---------------------------------------------------------------- */
#pageTop									{ z-index: 555;}

@media print, screen and (min-width: 768px) {
#pageTop									{ max-width: 72px; padding: 10px;}

}
@media print, screen and (min-width: 1024px) {
#pageTop									{ padding: 0;}

}


/* -------------------------------------------------------
ttl-sect
---------------------------------------------------------------- */
.ttl-sect					{ text-align: center; letter-spacing: 0.1rem;}
.ttl-sect .main				{ font-size: 2rem; }
.ttl-sect .sub				{ margin-top: 1rem; font-size: 1rem;}

.sect-bottom				{ margin-top: 1rem;}
.sect-bottom .txt			{ margin-top: 1rem; font-size: 1.2rem; line-height: 1.8;}

@media print, screen and (min-width: 768px) {
.ttl-sect .main				{ font-size: 34px; }
.ttl-sect .sub				{ margin-top: 20px; font-size: 14px;}

.sect-bottom				{ margin-top: 20px;}
.sect-bottom .txt			{ margin-top: 20px; font-size: 14px; line-height: 1.8;}

}

@media print, screen and (min-width: 1024px) {
.ttl-sect .main				{ font-size: 46px; }

}







/* -------------------------------------------------------
link-btn
---------------------------------------------------------------- */

.link-btn				{ position: relative; text-align: center;}
.link-btn a				{ display: block; padding:1.8rem 1.5rem 1.5rem; font-size: 1.2rem; color: #ffffff; background: -webkit-linear-gradient(-45deg, #00bfff 0%,#1e90de 100%); background: linear-gradient(135deg, #00bfff 0%,#1e90de 100%);  }
.link-btn a span		{ display: block; background: url("../images/common/ar_right_wh.png") no-repeat 100% center ; background-size: 0.8rem; }
@media print, screen and (min-width: 768px) {
.link-btn				{ max-width: 22rem; margin: 0 auto;}
.link-btn a				{ padding:20px 24px 16px; font-size: 14px;}
.link-btn a span		{ }

}

@media print, screen and (min-width: 1024px) {
.link-btn				{ max-width: 30rem; margin: 0 auto;}
.link-btn a				{ padding:26px 24px 22px; }

}




/* -------------------------------------------------------
#lead-wrap
---------------------------------------------------------------- */
#lead-wrap							{ position: relative; }
#lead-wrap .txt-box					{ padding: 4rem 0;  }
#lead-wrap .txt-box .ttl-bg 		{ text-align: center; }
#lead-wrap .txt-box .ttl-bg .bg		{ font-size: 5rem; color: #f5f5f5; }
#lead-wrap .txt-box .ttl-bg .main	{ margin-top: -7rem; font-size: 2rem; font-weight: bold;}
#lead-wrap .txt-box .sub			{ margin-top: 1.5rem; font-size: 1.2rem; line-height: 1.6;  }

@media print, screen and (min-width: 768px) {
#lead-wrap							{}
#lead-wrap .txt-box					{ padding: 90px 0; }
#lead-wrap .txt-box .ttl-bg .bg		{ font-size: 100px; line-height: 1;}
#lead-wrap .txt-box .ttl-bg .main	{ margin-top: -65px; font-size: 24px; }
#lead-wrap .txt-box .sub			{ margin-top: 40px; font-size: 16px; line-height: 1.8; }

}

@media print, screen and (min-width: 1024px) {
#lead-wrap							{}
#lead-wrap .txt-box					{ padding: 140px 0; }
#lead-wrap .txt-box .ttl-bg .bg		{ font-size: 140px;}
#lead-wrap .txt-box .ttl-bg .main	{ margin-top: -86px; font-size: 30px; }
#lead-wrap .txt-box .sub			{ max-width: 800px; margin: 80px auto 0; font-size: 16px;}

}





/* -------------------------------------------------------
contact_box
---------------------------------------------------------------- */

.contact_box								{ position: relative; padding: 3rem 0 5rem; background:url("../images/common/con_box_bg.jpg") no-repeat center center; background-size: cover;}
.contact_box .row							{ margin-top: 4rem;}
.contact_box .inbox							{ position: relative; border: #1e90de 2px solid; text-align: center;}
.contact_box .inbox:before					{ position: absolute; top: -30px; left: 50%; content: ""; display: block; width: 5rem; height: 5rem; margin-left: -2.5rem; background: no-repeat; background-size: cover;}
.contact_box .inbox .lead					{ font-size: 1.2rem;}
.contact_box .inbox.tel-box					{ }
.contact_box .inbox.tel-box a				{ display: block; padding: 4rem 2rem 2rem 2rem; }
.contact_box .inbox.tel-box:before			{ background-image: url("../images/common/con_box_tel.png");}
.contact_box .inbox.tel-box .num			{ font-size: 3.2rem; color: #1e90de; }
.contact_box .inbox.tel-box .time			{ font-size: 1.1rem; color: #1e90de; }
.contact_box .inbox.mail-box				{ margin-top: 4rem; padding: 4rem 2rem 2rem 2rem; }
.contact_box .inbox.mail-box:before			{ background-image: url("../images/common/con_box_mail.png");}
.contact_box .inbox.mail-box .link-btn		{ margin-top: 1.5rem; }
.contact_box .inbox.mail-box .link-btn a	{ padding: 16px 24px 14px;}

@media print, screen and (min-width: 768px) {
.contact_box								{ padding: 60px 0;}
.contact_box:before							{ top: -80px; left: -40px; width: 200px; height: 200px;}
.contact_box:after							{ top: -140px; width: 210px; height: 210px; }
.contact_box .row							{ -webkit-display: flex; display: flex;}
.contact_box .inbox							{ width: 51%;  }
.contact_box .inbox .lead					{ font-size: 14px;}

.contact_box .inbox.tel-box					{ margin: 0 -1px 0 0; }
.contact_box .inbox.tel-box a				{ display: block; padding:66px 20px 20px 20px; }
.contact_box .inbox.tel-box .num			{ font-size: 40px; }
.contact_box .inbox.tel-box .time			{ font-size: 14px;}
.contact_box .inbox.mail-box				{ margin: 0 0 0 -1px; padding:50px 20px 20px 20px; }
.contact_box .inbox.mail-box .link-btn		{ max-width: 220px; margin: 15px auto;}
}

@media print, screen and (min-width: 1024px) {
.contact_box								{ padding: 50px 0 70px;}
.contact_box:before							{ top: -100px; width: 250px; height: 250px;}
.contact_box:after							{ top: -200px; width: 270px; height: 270px; }
.contact_box .inbox .lead					{ font-size: 16px;}
.contact_box .inbox:before					{ top: -25px;}

}