@charset "UTF-8";

html,body {
	width: 100%;
	height: 100vh;
	font-size:14px;
}

body {
	background-color: #fff;
	color: #000;
	font-family:tbudgothic-std, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	margin:0;
	padding: 0;
}
img {
	max-width: 100%;
	height: auto;
}
h2 {
	display: inline-block;
	padding: 1rem 5rem;
	border: 2px solid #036eb8;
	margin-bottom: 5rem;
	position: relative;
	letter-spacing: 0.15em;
	color: #333;
	font-weight: bold;
	
}
h2::after{
	content: "";
	display: inline-block;
	background-color: #e2eff7;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top:10px;
	left:10px;
}
h3 {
	letter-spacing: 0.15em;
}

a:link, a:visited {
	color: #000;
	text-decoration: none;
}
a:hover {
	color:#036eb8;
}

.fsize_15 {
	font-size: 1.5rem;
}
.fsize_2 {
	font-size: 2rem;
}
.wrapper {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.absolute_center {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/*header*/
header {
	background-color: #fff;
	padding: 1.5rem 0rem;
	width: 100%;
}
.yk_headlogo {
	width: auto;
	height: 50px;
	
}
.yk_headnav {
	padding-top: 2rem;
}
.yk_headnav ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: flex-end;
}
.yk_headnav li {
	-webkit-transform: skewX(150deg);
	-moz-transform: skewX(150deg);
	transform: skewX(150deg);
}
.yk_headnav li+li {
	border-left: 1px solid #000;
	margin-left: 1rem;
	padding-left: 1rem;
}
.yk_headnav li a {
	display: block;
	-webkit-transform: skewX(-150deg);
	-moz-transform: skewX(-150deg);
	transform: skewX(-150deg);
}
.yk_headnav li a:link, .yk_headnav li a:visited {
	color:#000;
	text-decoration: none;
}
.yk_headnav li a:hover {
	opacity: 0.7;
}













/*hero*/
.yk_hero, .yk_fader {
	width: 100%;
	height: 100vh;
}
.yk_hero {
	position: relative;
	background-color: #ccc;
}
.yk_fader {
	background-position: center center;
	background-size: cover;
}
.yk_fader img{
	width: 100%;
	height: 100vh;
	object-fit: cover; 
}
.slide1 {
	background-image: url("image/img01.jpg");
}
.slide2 {
	background-image: url("image/img02.jpg");
}
.slide3 {
	background-image: url("image/img03.jpg");
}
.slide4 {
	background-image: url("image/img04.jpg");
}

.yk_herologo img{
	width: 250px;
	height: auto;
}
.yk_heronav {
	position: absolute;
	width: 100%;
	top:0px;
	padding-top: 2rem;
	color: #fff;
}
.yk_heronav ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: flex-end;
}
.yk_heronav li {
	-webkit-transform: skewX(150deg);
	-moz-transform: skewX(150deg);
	transform: skewX(150deg);
}
.yk_heronav li+li {
	border-left: 1px solid #fff;
	margin-left: 1rem;
	padding-left: 1rem;
}
.yk_heronav li a {
	display: block;
	-webkit-transform: skewX(-150deg);
	-moz-transform: skewX(-150deg);
	transform: skewX(-150deg);
}
.yk_heronav li a:link, .yk_heronav li a:visited {
	color:#fff;
	text-decoration: none;
}
.yk_heronav li a:hover {
	opacity: 0.7;
}
.yk_btn {
	
}
.yk_btn a:link,.yk_btn a:visited {
	padding: 1rem 4rem;
	border: 2px solid #fff;
	color:#fff;
	letter-spacing: 0.2em;
	font-weight: bold;
	position: relative;
}
.yk_btn a::after {
	content:"";
	display: inline-block;
	width: 100px;
	height: 8px;
	background: url("image/ar_w.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left:90%;
	top:calc( 50% - 4px );
}
.yk_btn a:hover {
	text-decoration: none;
	background-color: #fff;
	color: #000;
}
.yk_btn a:hover::after {
	content:"";
	display: inline-block;
	width: 100px;
	height: 8px;
	background: url("image/ar_k.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left:90%;
	top:calc( 50% - 4px );
}



/*contents*/


.yk_vlink {
	width: 80%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5rem;
	
}
.yk_vlink img {
	width: 100%;
	height: auto;
}
.vlink_caption {
	text-align: left;
	position: absolute;
	top: 60%;
	left: -2rem;
}
.vlink_caption p {
	margin-bottom: 1rem;
	background-color: #036eb8;
	padding: 10px 30px;
	color: #fff;
}
.yk_vlink a {
}
.yk_vlink a:hover {
	
	
}
.googlemap {
	width: 80%;
}
.googlemap iframe {
	width: 100%;
}

footer {
	padding: 6rem 0rem;
	background-color: #8ec6ed;
	width: 100%;
}

.yk_contact_btn a:link, .yk_contact_btn a:visited {
	color: #036eb8;
	display: block;
	width: 60%;
	font-size: 1.5rem;
	text-align: center;
	padding: 2rem;
	background-color: #fff;
	font-weight: bold;
	position: relative;
	
}

.yk_contact_btn a:hover {
	color: #fff;
	background-color:#036eb8;
}
.yk_contact_btn a::before{
	content: "";
	width: 95%;
	height: 80%;
	border: 2px solid #8ec6ed;
	position: absolute;
	 top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.yk_contact_btn a::after {
	content:"";
	display: inline-block;
	width: 100px;
	height: 8px;
	background: url("image/ar_b.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: -35px;
	top:calc( 50% - 4px );
}
.yk_contact_btn a:hover::after {
	content:"";
	display: inline-block;
	width: 100px;
	height: 8px;
	background: url("image/ar_w.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: -35px;
	top:calc( 50% - 4px );
}


.yk_page_eyecatch img{
	width: 100%;
	height: 320px;
	object-fit: cover;
}




/*about_page*/


.yk_prof {
	font-size: 1.5rem;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10rem;
}
.yk_prof tr {
	border-bottom: 1px solid #666;
}
.yk_prof th {
	padding: 0.75rem 0rem 0.75rem 1rem;
	width: 15rem;
	letter-spacing: 0.1em;
}
.vlink_btn {
	position: absolute;
	top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


/*works_page*/

.yk_works_block {
	text-align: center;
	padding: 2rem;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}
.yk_works_block p{
	display: block;
	background-color: #eee;
	border-radius: 12px;
	padding: 5rem 0rem;
	
}
.yk_works_block p:hover{
	display: block;
	background-color: #f6f6f6;
	border-radius: 12px;
	padding: 5rem 0rem;
	
}
.yk_works_block p span{
	border-bottom: 2px solid #036eb8;
	padding-bottom: 0.75rem;
}

/*recruit page*/
.yk_rec_contact {
	width: 60%;
	font-size:1.5rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5rem;
	letter-spacing: 0.1em;
	
}
.yk_rec_contact p {
	border-bottom: 1px solid #000;
	padding-bottom: 1rem;
}


/*contact_page*/
.yk_contact_msg{
	font-size:0.8rem;
}
.yk_contact_tel {
	font-weight:bold;
	border-bottom:1px solid #000;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	font-size:1.5rem;
	margin-bottom:4rem;
}
form {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	font-size:1.2rem;
}
form input[type="text"] ,form input[type="email"] ,form textarea {
	
	border:1px solid #ccc;
	margin-bottom:1.5rem;
	width:100%;
	border-radius:5px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
  outline: 0;
}

form input[type="submit"] {
	color:#036eb8;
	background-color:#fff;
	width:160px;
	padding:0.5rem 1rem;
	margin:30px auto;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
	border:2px solid #036eb8;

	border-radius:16px;
}
form input[type="submit"]:hover {
	color:#fff;
	background-color:#036eb8;
	width:160px;
	padding:0.5rem 1rem;
	margin:30px auto;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
	transform: scale(1.05);
}
.ajax-loader {
	display:none!important;
}
.yk_contact_tri {
	color:#036eb8;
}
.yk_contact_hs {
	color:#fff;
	background-color:#f00;
	border-radius:20px;
	padding:0.25rem 0.5rem;
	font-size:0.7rem;
	font-weight:bold;
	vertical-align:middle;
	margin-left:1rem;
}