@charset "utf-8";

/*-----------------------------------------------------	*/
/*	トップページ					*/
/*-----------------------------------------------------	*/

html, body { height: 100%; }

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


.tx90 { font-size:90%; line-height:120%; }
.tx80 { font-size:80%; }
.tx-L { font-size:180%; }
.tx-orange { color:#E55205; }
.tx-white { color:#FFF; }
.tx-red { color:#AE1000; }
.tx-blue { color:#00BFFF; }
.tx-navy { color:#33638A; }
.wid50 { width:50%; }

h2 {text-align:left; font-size:.4.8rem; font-weight:800; color:#26BCE1; padding-bottom:20px;}
h2 span { font-size:45%; font-weight:400; color: #999; padding-left:15px; }

h3 {padding-bottom:0.5em; text-align:left; font-size:5.5rem;	font-weight:900; margin-top:0px;}
h3 span {font-size:45%; font-weight:500; margin-left: 10px; letter-spacing: 0.05em;}

h4 {
	font-size:100%;
	font-weight:bold;
}

section {
	padding-bottom:5em;
	text-align:center !important;
	position:relative !important;
}

/*-- メインビジュアル  --*/

#Visual {
	width:100%;
	margin:0 0 5em 0;
	padding-bottom: 0;
	height:700px;
	position:relative;
}

.topMV {
	/*height:100vh;
	max-height:620px;*/
	width: 100%;
	/*position: absolute;
	top:0;
	left:0;*/
}

.mainvis01 {
	/*background-image: url(images_top/MainVis_01.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;*/
}

.mainvis02 {
	/*background-image: url(images_top/MainVis_02.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;*/
}

.mainvis_inner {
	position: relative;
	width:100%;
	max-width: 1360px;
	height:auto;
	margin:0 auto 0 auto;
}

#Visual .catchc {
	position:absolute;
	top:178px;
	left:30px;
	text-align:left;
	width:53%;
	font-weight:600;
	font-size: 1.75rem;
	color:#030F34;
	line-height:160%;
	letter-spacing: 0.09em;
	text-shadow:
    2px 2px 0px #FFF, -2px -2px 0px #FFF, -2px 2px 0px #FFF, 2px -2px 0px #FFF, 2px 0px 0px #FFF, -2px 0px 0px #FFF, 0px 2px 0px #FFF, 0px -2px 0px #FFF;
	z-index: 50;
}

#Visual .catchc h1.maincopy {
	font-size: 5.6rem;
	margin-top: -1em !important;
	margin-bottom: 0.4em;
	text-align:left;
	line-height:125%;
	color: #20242C;
	font-weight: 900;
}

#Visual .mvImg {position: absolute; right: -235px; top:100px;	z-index: 1;}
#Visual .mvImg img {border-radius: 506px 0px 0px 0px; object-fit: cover; height:620px;}
#Visual .mvImg02 {position: absolute; right: -65px; top:100px;	z-index: 1;}
#Visual .mvImg02 img {border-radius: 506px 0px 0px 0px; object-fit: cover; height:620px; width:93%;}

.topMovie {position: absolute; top:520px; left:5%; width:335px; border:5px solid #FFF; box-shadow: 2px 3px 8px #707070; z-index: 110; }

/*.markerline {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 70%, #FFFF00 0%) repeat scroll 0 0;
}*/


/*-- ボタン --*/

section#topLinkBtn {
	padding-bottom:85px;
	text-align:center !important;
	position:relative !important;
	z-index: 25;
}

section#topLinkBtn .targetLink {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width:100%;
	max-width:1100px; 
}

a.whBtn {
	display: inline-block;
	font-size:90%;
	font-weight:600;
	text-align:center;
	background:#FFF;
	color:#333;
	border-radius:40px;
	width:300px;
	line-height: 60px;
	text-decoration:none;
	box-shadow: 0px 0px 8px #08304D33;
	position:relative;
}

.widebtn { /*width:350px !important;*/ margin-bottom: 5px; }

a.whBtn::after {
	display: block;
	content: " ";
	width: 8px;
	height: 8px;
	transform: rotate(-45deg);
	right: 24px;
	top: 25px;
	position: absolute;
	border-right: 2px solid #26BCE1;
	border-bottom: 2px solid #26BCE1;
}

a.whBtn:hover,
a.whBtn02:hover,
a.whBtn03:hover {	color:#FFF;	background:#26BCE1; }
a.whBtn:hover::after,
a.whBtn02:hover::after,
a.whBtn03:hover::after{ border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; }

a.whBtn02 {
	display: inline-block;
	font-size:90%;
	font-weight:500;
	text-align:center;
	background:#FFF;
	color:#26BCE1;
	border:solid 1px #26BCE1;
	border-radius:40px;
	width:250px;
	line-height: 48px;
	text-decoration:none;
	position:relative;
	text-indent: -0.5em;
	letter-spacing: 0.05em;
	text-shadow:none;
}

a.whBtn02::after {
	display: block;
	content: " ";
	width: 8px;
	height: 8px;
	transform: rotate(-45deg);
	right: 24px;
	top: 21px;
	position: absolute;
	border-right: 2px solid #26BCE1;
	border-bottom: 2px solid #26BCE1;
}

a.whBtn03 {
	display: block;
	font-size:90%;
	font-weight:500;
	text-align:center;
	background:#FFF;
	color:#26BCE1;
	border-radius:40px;
	width:180px;
	line-height: 48px;
	text-decoration:none;
	position:relative;
	text-indent: -0.5em;
	letter-spacing: 0.05em;
	box-shadow: 0px 0px 8px #08304D33;
	margin-top:0.5em;
}

a.whBtn03::after {
	display: block;
	content: " ";
	width: 8px;
	height: 8px;
	transform: rotate(-45deg);
	right: 24px;
	top: 21px;
	position: absolute;
	border-right: 2px solid #26BCE1;
	border-bottom: 2px solid #26BCE1;
}

.btnArea {text-align: center; padding:0 auto;}
.btnshort {width:180px !important;}

/*-- News  --*/

section#News {
	clear:both;
	overflow:hidden;
	padding-bottom:4em;
	margin-bottom:8em;
}

section#News .newsInner {width:100%; max-width:1100px; margin: 0 auto;}

section#News ul.news {
	width:100%;
	margin: 0 auto 40px auto;
	display:flex;
	justify-content: space-between;
	list-style:none;
}

section#News ul.news li {
	width:calc(100% / 3.2);
	color:#3D4454;
	font-size: 90%;
}

section#News ul.news li {margin-bottom:17px;}

section#News ul.news li .newsdate {
	display: block;
	color:#AAA;
	font-weight:500;
}
section#News ul.news li a {
	-webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all  0.3s ease-out;
	text-decoration:none !important;
	color: #3D4454 !important;
}

section#News ul.news li a img:hover,
section#News ul.news li a .newsdate:hover {opacity: 0.7; color: #AAA; }
section#News ul.news li a:hover {color: #26BCE1 !important; opacity: 1;}


/*-- Service --*/

section#Service {
	clear:both;
	overflow:hidden;
	text-align:center;
}

section#Service .serviceInner {width:100%; max-width:1100px; margin: 0 auto;}
section#Service .serviceItem {display: flex; justify-content: space-between; margin-bottom:8em;}
section#Service .servImg {width: 43.6%;}
section#Service .servTxt {width: 51.8%; font-size:90%;}
section#Service .servTxt .categSign { display:inline-block; background:rgba(61,68,84,0.45); padding:0px 17px; border-radius: 5px; color:#FFF; font-weight:400; font-size:105%; text-align: center;}
section#Service .servTxt .servbtnArea {text-align:right; margin-top:1em;}
.rever {flex-direction: row-reverse;}


/*-- Recruit --*/

section#Recruit {
	clear:both;
	overflow:hidden;
	text-align:center;
}

section#Recruit .recruitInner { width:100%; max-width:1100px; margin: 0 auto; background:url("top_img/bg_recruit.jpg") no-repeat; display: flex; justify-content: space-between;}
section#Recruit .recruTxt {padding:20px 30px 20px 20px; width:57.7%; font-size:90%;}
section#Recruit .recruImg {padding:0; width:42.2%;}
section#Recruit .recCopy { padding-left:20px; width:95%; text-align: left; font-size:230%; font-weight: 800; line-height: 1.7; margin-bottom: 1.5em;}
section#Recruit .recnav {padding-left:20px; display: flex; justify-content: space-between;}
section#Recruit .recnav p {font-weight: 500;}
section#Recruit .whBtn03 { align:right;}

/*-- お問い合わせボタン  --*/

section#InqBtn {
	clear:both;
	overflow:hidden;
	width:100%;
	text-align:center;
	padding-bottom:0 !important;
}

section#InqBtn .iqbinner {
	background:url(images_top/bg_inqBtn.jpg) no-repeat;
	background-size:cover;
	background-position:top center;
	padding-top:1.5em;
	padding-bottom:1.5em;
}

section#InqBtn h2 {
	text-align:center;
	font-size:180%;
	color:#FFF;
}


.btn_thum,
.btn_list {
	display:block;
}

.btn_thum a,
.btn_list a {
	display:block;
	background:#FB7E3C;
	font-weight:bold;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	text-align:center;
	color:#FFF;
	text-decoration:none;
}

.btn_thum a {
	padding:30px 20px;
	font-size:130%;
	margin-top:1.5em;
}

.btn_list a {
	padding:20px 10px;
	line-height:120%;
}

.btn_thum a:hover,
.btn_list a:hover {
	background:#FEDCC9;
	color:#FB7E3C !important;
}


/*-----------------------------------------------------	*/
/*	for - 800px					*/
/*-----------------------------------------------------	*/

@media screen and (min-width:961px) and ( max-width:1024px) {

	/*#Visual {
	height:65vh;
	margin:0 0 5% 0;
	}*/

}

@media screen and (min-width:801px) and ( max-width:960px) {

	/*#Visual {
	height:55vh;
	margin:0 0 10% 0;
	}*/

}

@media screen and (min-width: 801px) {

	.SP,
	#header { display:none; }	
	
}


@media screen and (max-width: 800px) {
	
	.col {
		float: none;
		width: auto;
		margin: 0 auto;
	}
	
	.PC,
	header#Defhead,
	div#Navmenu {
		display:none;
		visibility:hidden;
	}
	
	#page{
		padding-top: 50px;
	}
	
	table.entry { width:100%; }

	/*#Visual {height:600px; }*/
	#Visual .catchc {top:100px; width:65%;}
	#Visual .catchc h1.maincopy {font-size: 5.0rem;}
	
	section#News,
	section#Service,
	section#Recruit {padding-left:20px; padding-right:20px;}
	
	section#News ul.news {flex-wrap: wrap;}
	section#News ul.news li {width:calc(100% / 2.1); margin-bottom: 3em;}
}


@media screen and (min-width: 769px) {

	.SPP { display:none; }	
}


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

	.PCC {
		display:none;
		visibility:hidden;
	}

	section {
	width:100%;
	padding-bottom:3em !important;
	}
	
	/*#Visual {
	width:100%;
	height:0;
	margin:0 0 5em;
	padding-top: calc(100vh - 50px) !important;
	}
	
	.topMV {
	height:100%;
	max-height: unset;
	background-position: center bottom;
	}
	
	.mainvis_inner {
	width:100%;
	margin:4em auto 0 auto;
	}

	#Visual .catchc {
	position:absolute;
	left: 0;
	top: 128px;
	text-align:left;
	width:100%;
	font-weight:600;
	font-size: 0.8rem;
	color:#20242C;
	line-height:145%;
	}

	#Visual .catchc .maincopy {
	font-size: 290%;
	font-weight:700;
	text-align:center;
	}*/
	
	section#topLinkBtn .targetLink {flex-direction: column; max-width:100%; padding:0 auto;}
	
	a.whBtn {font-size:100%; border-radius:40px; line-height: 60px;	width:80%; box-shadow: 0px 0px 8px #08304D33; margin: 0 auto 10px auto;}
	
	.widebtn { font-size:120% !important; line-height: 35px !important; }
	.widebtn::after { top: 13px !important; }

	a.whBtn::after {
	width: 12px;
	height: 12px;
	right: 24px;
	top: 23px;
	border-right: 2px solid #26BCE1;
	border-bottom: 2px solid #26BCE1;
	}

	.sptxt-left { text-align: left; }
	

	/*-- News  --*/
	section#News {margin-bottom: 3em;}
	section#News .newsInner {flex-direction: column;}
	section#News ul.news li {font-size:100%;}
	
	/*-- Service  --*/
	h3 {font-size:4.8rem;}
	section#Service .serviceItem {display: flex; flex-direction: column-reverse; margin-bottom:6em;}
	section#Service .servImg {width: 100%;}
	section#Service .servTxt {width: 100%; font-size:100%; margin-bottom:1.5em;}
	
	/*-- Recruit  --*/
	section#Recruit .recruitInner { flex-direction: column;}
	section#Recruit .recruTxt {padding:20px; width:100%; font-size:100%;}
	section#Recruit .recruImg {text-align: center; width:100%;}
	section#Recruit .recCopy { width:100%; text-align: center; text-indent: 0; padding-left: 0; margin-bottom: 1.5em; font-size:215%;}
	section#Recruit .recnav {padding-left:20px; flex-direction: column;}
	section#Recruit .recnav div {text-align: center;}
	section#Recruit .whBtn03 { margin:1.0em auto 0.5em auto; }
	
	.btn-more {
	display:inline-block;
	}

	.btn_thum a,
	.btn_list a {
		margin-top:0.5em;
		font-size:100%;
	}
	
	.copyright {
	text-align:center;
	font-size:65%;
	line-height:100%;

	}
	
	.tx-Lf { text-align:left !important; }
	
}

@media screen and (max-width: 640px) {
	
	#Visual {height:670px;}
	#Visual .catchc h1.maincopy {font-size: 4.4rem;}
}

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

	#Visual .catchc {width:85%; top:80px;}
	#Visual .mvImg, #Visual .mvImg02 {top:10px;}
	#Visual .mvImg img, #Visual .mvImg02 img {height:480px;}
	#Visual .mvImg img {border-radius: 448px 0px 0px 0px;}
	.topMovie {width:300px; top:470px; left: 10%;}
	.topMovie iframe {width:290px !important;}
	
	section#News ul.news {flex-direction: column;}
	section#News ul.news li {width:100%;}
	section#News ul.news li picture {text-align:center !important; width: 100%;}
	section#News ul.news li picture img {margin: 0 auto;}
	
	section#Recruit .recCopy {font-size:200%;}

}

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

	#Visual {height:720px;}
}