@charset "UTF-8";
/* CSS Document */

body{
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

header{
	width: 100%;
	padding: 15px 0;
	background-color: rgba(19,106,170,1.0);
}
.w-1000box{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.flex-center{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.header-logo{
	color: rgba(255,255,255,1.0);
	text-decoration: none;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	transition: 0.3s;
}
.header-logo:hover{
	color: rgba(175,175,175,1.00);
	opacity: 0.8s;
	transition: 0.3s;
}
.header-logo img{
	width: 100%;
	max-width: 150px;
	margin: 0 20px 0 0;
}
.header-logo h1{
	font-size: 1.2em;
}

.drawer-hamburger{
	display: none;
}
.drawer-brand {
	display: none;
}

header ul{
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
header ul li{
	margin: 0 0 0 30px;
	padding: 0 0 0 30px;
	border-left: 1px solid rgba(255,255,255,1.0);
}
header ul li:nth-child(2){
	border-left: 0px solid rgba(255,255,255,1.0);
}
header ul li a{
	color: rgba(255,255,255,1.0);
	text-decoration: none;
	transition: 0.3s;
}
header ul li a:hover{
	color: rgba(175,175,175,1.00);
	opacity: 0.8s;
	transition: 0.3s;
}

main{
	width: 100%;
	margin: 0;
	padding: 0;
}
.top-slider{
	position: relative;
}
.slider{
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.slider li{
	max-height: 1200px;
	overflow: hidden;
}
.slider li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top_logo-img{
	width: 25%;
	filter: drop-shadow(0 0 10px black);
	position: absolute;
	bottom: 30px;
	right: 0;
	left: 0;
	margin: auto;
}

.top-link_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 100px 0 150px;
	box-sizing: border-box;
	position: relative;
}
.top-link_wrap h3{
	margin: 0 0 100px;
	font-size: 3em;
	text-align: center;
	letter-spacing: 10px;
	position: relative;
	z-index: 100;
}
.top-link_box{
	width: 90%;
	max-width: 1400px;
	margin: 0 auto 75px;
}
.top-text_box{
	width: 90%;
	max-width: 1400px;
	margin: 0 auto 75px;
}
.top-text_box p{
	font-size:  1.2em;
	color: rgba(255,255,255,1.0);
	font-weight: 600;
	line-height: 2em;
}
.top-flex-box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
.top-flex-box div{
	width: 48%;
}
.top-flex-box div img{
	width: 100%;
	object-fit: cover;
	box-sizing: border-box;
}

.top-flex-box div:first-child img{
	border-bottom: 10px solid rgba(172,54,53,1.0);
}
.top-flex-box div:last-child img{
	border-bottom: 10px solid rgba(57,136,200,1.0);
}
.top-flex-box h4{
	width: 100%;
	margin: 0;
	padding: 0 1% 0;
	font-size: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
}
.top-link_services-h4f{
	text-align: left;
}
.top-link_services-h4s{
	text-align: right;
}

.wrap_company{
	margin: 0 auto -168px;
}
.wrap_company .top-link_box{
	margin: 0 auto 50px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.ggl-map{
	width: 50%;
	height: 450px;
	margin: 0 auto;
	padding: 0;
	display: block;
	border: 0px;
	border: 3px solid rgba(175,175,175,1.0);
	box-sizing: border-box;
}
.wrap_company .top-link_box div{
	width: 40%;
}
.wrap_company .top-link_box div img{
	width: 50%;
	margin: 0 0 30px;
	display: block;
}
.wrap_company .top-link_box div p{}

.sns-link_box{
	width: 80%;
	max-width: 1250px;
	margin: 0 auto 60px;
	padding: 0;
	border-collapse: collapse;
	cellpadding: 0;
}
.sns-link_box tr{}
.sns-link_box td{
	border: 1px solid rgba(19,106,170,1.0);
}
.sns-link{
    width: 100%;
    padding: 10px 0;
    text-align: center;
    color: rgba(50,50,50,1.0);
	text-decoration: none;
    display: block;
	box-sizing: border-box;
	transition: 0.3s;
}
.sns-link:hover{
	background-color: rgba(19,106,170,0.07);
	transition: 0.3s;
}
.sns-link img{
	width: 12%;
	margin: 15px auto;
	display: block;
}
.sns-link p{}

.top-link_button{
	width: 20%;
	margin: 0 auto 50px;
	padding: 15px 30px;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	color: rgba(255,255,255,1.0);
	background-color: rgba(19,106,170,1.0);
	display: block;
	border-radius: 30px;
	box-sizing: border-box;
	transition: 0.3s;
}
.top-link_button:hover{
	color: rgba(255,255,255,1.00);
	letter-spacing: 3px;
	background-color: rgba(106,238,121,1.0);
	transition: 0.3s;
}


.wrap_yk{
	padding: 50px 0 250px;
	position: relative;
	z-index: 100;
}
.wrap_yk::after{
	width: 15%;
	height: 93%;
	margin: 0 auto;
	background-color: rgba(19,106,170,0.4);
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
}
.wrap_yk h3{
	margin: 0 auto;
	text-shadow: 2px 2px 0 #fff;
	position: relative;
	z-index: 100;
}
.wrap_yk br:first-child{
	display: none;
}
.wrap_yk p{
	text-align: center;
	position: relative;
	z-index: 100;
}
.wrap_services{
	background-color: rgba(222,229,230,1.00);
}
.wrap_services .top-link_box{}
.wrap_services::after, .wrap_company::after{
	font-size: 10em;
	font-weight: 600;
	color: rgba(170,170,170,1.0);
	position: absolute;
	top: -65px;
	left: 0;
}
.wrap_services::after{content: 'SERVICES';}
.wrap_company::after{content: 'COMPANY';}
.wrap_services h3, .wrap_company h3{}
.link_services{}
.link_company{}



.rink-wrap{}
.rink-box{
	margin: 5px 0 0;
	padding: 75px 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.rink-services{background-image: url("https://yoshiokacorp.com/img/dummy-image.jpg");}
.rink-company{background-image: url("https://yoshiokacorp.com/img/dummy-image.jpg");}
.rink-contact{background-image: url("https://yoshiokacorp.com/img/dummy-image.jpg");}
.rink-box a{
	width: 35%;
	max-width: 500px;
	padding: 30px 30px;
	color: rgba(255,255,255,1.0);
	text-decoration: none;
	display: block;
	box-sizing: border-box;
	position: relative;
	transition: 0.3s;
}
.rink-box a:hover{
	opacity: 0.9;
	transition: 0.3s;
}
.rink-box a::after{
	content: "";
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 12px;
	left: 12px;
	transition: 0.3s;
}
.rink-box a:hover::after{
	opacity: 0.9;
	transition: 0.3s;
}
.rink-services a{background-color: rgba(149,181,124,1.0);}
.rink-company a{background-color: rgba(19,106,170,1.0);}
.rink-contact a{background-color: rgba(155,155,155,1.0);}
.rink-services a::after{border: 4px solid rgba(149,181,124,1.0);}
.rink-company a::after{border: 4px solid rgba(19,106,170,1.0);}
.rink-contact a::after{border: 4px solid rgba(155,155,155,1.0);}

.rink-services a:hover::after{border: 4px solid rgba(100,100,100,1.0)}

.rink-box a h3{
	font-size: 1.5em;
}
.rink-box a p{}

.foot-icon{
	width: 95%;
	margin: 120px auto 0;
	padding: 0;
	position: relative;
	z-index: 100;
}
.foot-icon img{
	max-height: 50px;
	margin: 0 0 0 auto;
	padding: 0;
	display: block;
}

footer{
	margin: -2px 0 0;
	padding: 0;
	box-sizing: border-box;
}
.footer-contact{
	padding: 50px 0;
	background-image: url("https://yoshiokacorp.com/img/bg-footer.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
}
.footer-contact-box{
	width: 90%;
	max-width: 750px;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
	background-color: rgba(255,255,255,0.9);
	border-radius: 20px;
}
.footer-contact-box h4{
	font-size: 2em;
}
.footer-contact-box p{}
.footer-contact-box p br:last-child{
	display: none;
}
.footer-contact-box a{
	width: 40%;
	margin: 50px auto;
	padding: 10px 30px;
	color: rgba(255,255,255,1.0);
	font-size: 1.2em;
	font-weight: 600;
	text-decoration: none;
	background-color: rgba(250,134,13,1.0);
	display: block;
	border-radius: 50px;
	box-sizing: border-box;
	position: relative;
	transition: 0.3s;
}
.footer-contact-box a:hover{
	color: rgba(255,255,255,1.0);
	letter-spacing: 3px;
	background-color: rgba(111,226,124,1.0);
	transition: 0.3s;
}
.footer-color{
	margin: 0;
	padding: 50px 0 0;
	background-color: rgba(50,50,50,1.00);
}
.footer-info-wrap{
	padding: 0 0 30px;
	box-sizing: border-box;
	align-items: flex-end;
}
.footer-info-box{
	width: 50%;
	color: rgba(255,255,255,1.0);
}
.footer-logo{}
.footer-logo a{}
.footer-logo a:hover{}
.footer-logo a img{
	width: 30%;
	max-width: 200px;
}
.footer-info{}
.footer-info p{}
.footer-info br:first-child, .footer-info br:last-child{
	display: none;
}
.footer-text{}
.footer-text p{
	text-align: right;
}
.footer-cr{
	width: 100%;
	margin: 0;
	padding: 7.5px 0;
	background-color: rgba(19,106,170,1.0);
	border-top: 1px solid rgba(255,255,255,1.0);
	box-sizing: border-box;
}
.footer-cr p{
	margin: 0;
	padding: 0;
	text-align: center;
	color: rgba(255,255,255,1.0);
}

.start-animation{
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1.0);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
}
.start-animation img{
	width: 40%;
	max-width: 600px;
	min-width: 275px;
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 550;
}





/*--------------------

Page - services

--------------------*/

.page-title-wrap{
	width: 100%;
	margin: 0 auto 100px;
	padding: 120px 0;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
	border-bottom: 5px solid rgba(19,106,170,1.0);
}
.page-title_services{background-image: url("https://yoshiokacorp.com/img/bg-services.jpg");}
.page-title_company{background-image: url("https://yoshiokacorp.com/img/bg-company.jpg");}
.page-title_contact{background-image: url("https://yoshiokacorp.com/img/bg-contact.jpg");}

.page-title{
	width: 75%;
	max-width: 1400px;
	margin: 0 auto;
}
.page-title h2{
	margin: 0;
	padding: 0 0 35px;
	font-size: 3.5em;
	color: rgba(255,255,255,1.0);
	letter-spacing: 5px;
	filter: drop-shadow(0 0 10px black);
	box-sizing: border-box;
	position: relative;
}
.page-title h2::after{
	margin: 0 auto;
	font-size: 0.5em;
	color: rgba(247,249,149,1.00);
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
}
.services_title{}
.services_title::after{content: 'SERVICES';}
.company_title{}
.company_title::after{content: 'COMPANY';}
.contact_title{}
.contact_title::after{content: 'CONTACT';}

.page-contents{
	width: 90%;
	margin: 0 auto 100px;
}

.page-contents-box{
	width: 90%;
	margin: 0 auto 150px;
}
.services-wrap .page-title-wrap{}
.company-wrap .page-title-wrap{}
.contact-wrap .page-title-wrap{}
.services-wrap .page-contents-box{
	max-width: 1500px;
}
.company-wrap .page-contents-box, .contact-wrap .page-contents-box{
	max-width: 1000px;
}
.page-flex{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: stretch;
}
.contents-text{
	padding: 0;
	box-sizing: border-box;
}
.contents-text h3{
	margin: 0 0 50px;
	padding: 0;
	font-size: 2.5em;
	letter-spacing: 10px;
	display: inline-block;
	box-sizing: border-box;
	position: relative;
}
.contents-text h3::after{
	width: 135%;
	height: 2px;
	content: '';
	position: absolute;
	top: 65px;
	left: 0;
}
.contents-text p{
	width: 100%;
	margin: 0 auto 20px;
	padding: 0 18% 0 0;
	box-sizing: border-box;
}
.contents-text-box{
	width: 85%;
	margin: 0 auto 100px;
}
.contents-text-box .align-right img{
	width: 30%;
}

.page-contents-box01 h3::after{background-color: rgba(172,54,53,1.0);}
.page-contents-box02 h3::after{background-color: rgba(111,226,124,1.0);}
.page-contents-box03 h3::after{background-color: rgba(19,106,170,1.0);}
.page-contents-box04 h3::after{background-color: rgba(135,135,135,1.0);}
.page-contents-box01 img{border-bottom: 15px solid rgba(172,54,53,1.0);}
.page-contents-box02 img{border-bottom: 15px solid rgba(111,226,124,1.0);}


.services-top-text{
	margin: 0 auto ;
	padding: 0 0 100px;
	position: relative;
}
.services-top-text::after{
	width: 15%;
	height: 94%;
	margin: 0 auto;
	background-color: rgba(19,106,170,0.2);
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
}
.services-top-text div{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0;
	box-sizing: border-box;
	position: relative;
	z-index: 100;
}
.services-top-text p{
	margin: 0;
	padding: 15px 0;
	font-size: 1.1em;
	text-align: center;
	line-height: 2em;
}
.services-title{
	width: 25%;
	margin: 50px 0 60px;
	padding: 0;
	font-size: 2.2em;
	letter-spacing: 10px;
	box-sizing: border-box;
	position: relative;
}
.services-title::after{
	width: 120%;
	height: 2px;
	content: '';
	position: absolute;
	top: 65px;
	left: 0;
}
.contents-box{
	width: 75%;
}
.contents-box img{
	width: 100%;
	margin: 0 auto 35px;
}
.contents-box p{
	margin: 0 0 25px;
}





/*--------------------

Page - company

--------------------*/

.company-text{
	width: 100%;
	line-height: 2.5em;
}
.align-right{
	width: 100%;
	margin: 50px auto 0;
	text-align: right;
}
.company_table{
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
}
.company_table tr{}
.company_table td{
	padding: 25px 0;
	border-bottom: 1px solid rgba(60,60,60,1.0);
}
.company_table td:first-child{
	padding-right: 50px;
	padding-left: 50px;
	text-align: center;
	background-color: rgba(250,250,250,1.0);
}
.company_table td:last-child{
	padding-right: 75px;
	padding-left: 25px;
}
.company_table tr:first-child td{
	border-top: 1px solid rgba(60,60,60,1.0);
}
.company_table td span{
	margin-top: 10px;
	display: block;
}
.company_table_sns-link{
	width: 35%;
}
.company_table td img{
	width: 25%;
	margin: 0 auto;
	display: block;
}
.company_table td a{
	text-decoration: none;
	transition: 0.2s;
}
.company_table td a:hover{
	color: rgba(175,175,175,1.00);
	transition: 0.2s;
}

.cards-color-box{
	width: 30%;
	height: 160px;
	margin: 0 1.5% 30px;
	padding: 30px 15px;
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 25%;
	border: 1px solid rgba(230,230,230,1.0);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.cards-color-box{
	width: 45%;
	height: 160px;
	margin: 0 1.5% 30px;
	padding: 30px 15px;
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 25%;
	border: 1px solid rgba(230,230,230,1.0);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.cards-color-box::after{
	content: "";
	width: 60px;
	height: 60px;
	border-radius: 50%;
	position: absolute;
	top: -15px;
	left: -15px;
}
.cards-color-box p{
	text-align: center;
}
.cards-color-box p:first-child{
	margin: 0 auto 20px;
	font-weight: 600;
}





/*--------------------

Page - contact

--------------------*/

.contact-form{
	width: 100%;
	margin: 50px 0 50px;
	padding: 30px 5%;
	border: 2px solid rgba(230,230,230,1.0);
	box-sizing: border-box;
}
.contact-text{
	text-align: center;
}

.contact-form div{
	width: 90%;
	margin: 30px auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-start;
}
.contact-form_item-title{
	width: 30%;
	margin: 0;
}
.contact-form_item-text{
	width: 70%;
	margin: 0;
}
.input{
	width: 70%;
	padding: 5px;
	font-size: 0.8em;
	-webkit-appearance: none;
	border: 1px solid rgba(180,180,180,1.0);
	box-sizing: border-box;
}
.contact-form div input{}
.contact-form div textarea{
	resize: vertical;
}
.submitbutton{
	width: 30%;
	margin: 50px auto 10px;
	padding: 10px 20px;
	-webkit-appearance: none;
	color: rgba(255,255,255,1.0);
	font-size: 0.9em;
	letter-spacing: 5px;
	background-color: rgba(250,134,13,1.0);
	display: block;
	border-radius: 50px;
	cursor: pointer;
	transition: 0.3s;
	border-style: none;
	box-sizing: border-box;
}
.submitbutton:hover{
	color: rgba(255,255,255,1.0);
	letter-spacing: 8px;
	background-color: rgba(111,226,124,1.0);
	transition: 0.3s;
}
.contact-form_caption{
	font-size: 0.9em;
	text-align: center;
}

.contact-form_title-msg{
	margin: 20px 0 60px;
}
.msg{
	color: rgba(251,48,51,1.0);
}

.tobutton{
	width: 30%;
	margin: 50px auto 10px;
	padding: 10px 20px;
	-webkit-appearance: none;
	color: rgba(255,255,255,1.0);
	font-size: 0.9em;
	letter-spacing: 5px;
	background-color: rgba(120,120,120,1.0);
	display: block;
	border-radius: 50px;
	cursor: pointer;
	transition: 0.3s;
	border-style: none;
	box-sizing: border-box;
}
.tobutton:hover{
	color: rgba(255,255,255,1.0);
	letter-spacing: 8px;
	background-color: rgba(19,106,170,1.0);
	transition: 0.3s;
}

.contactform_submit{
	background-color: rgba(250,134,13,1.0);
}
.contactform_submit:hover{
	background-color: rgba(111,226,124,1.0);
}





/*--------------------

Responsive

--------------------*/

@media only screen and ( max-width : 1200px ){
	/*--- top ---*/
	.top-link_wrap h3{margin: 0 0 75px; font-size: 2.5em;}
	.wrap_yk::after{width: 25%;}
	.wrap_services::after, .wrap_company::after{font-size: 7.5em; top: -55px;}
	.top-flex-box h4{font-size: 2em;}
	.top-link_button{width: 25%;}
	/*--- footer ---*/
	.footer-contact-box{padding: 20px 0;}
	.footer-contact-box h4{font-size: 1.8em;}
	/*--- services ---*/
	.page-title-wrap{padding: 80px 0;}
	.page-title h2{font-size: 3em;}
	.services-top-text p{font-size: 1em;}
	.page-contents-box{width: 90%; margin: 0 auto 150px;}
	.services-title{font-size: 1.8em; letter-spacing: 5px;}
	.services-title::after{top: 50px;}
	.contents-box img{margin: 0 auto 25px;}
	.page-contents-box01 img{border-bottom: 10px solid rgba(172,54,53,1.0);}
	.page-contents-box02 img{border-bottom: 10px solid rgba(111,226,124,1.0);}
	/*--- company ---*/
	.contents-text h3{font-size: 2.2em; letter-spacing: 7px;}
	.contents-text h3::after{top: 60px;}
	/*--- contact ---*/
}
@media only screen and ( max-width : 1080px ){
	/*--- top ---*/
	.top-link_wrap h3{font-size: 2.2em;}
	.wrap_yk{padding: 50px 0 150px;}
	.wrap_services::after, .wrap_company::after{font-size: 7em; top: -50px;}
	.top-flex-box h4{font-size: 1.6em;}
	/*--- footer ---*/
	.footer-contact-box{padding: 10px 0;}
	.footer-contact-box h4{font-size: 2em; margin: 30px auto;}
	.footer-contact-box a{margin: 30px auto; font-size: 1.2em;}
}
@media only screen and ( max-width : 1024px ){
	/*--- top ---*/
	.header-logo img{max-width: 150px;}
	.header-logo h1{font-size: 1.1em;}
	header ul li{margin: 0 0 0 30px; padding: 0 0 0 30px; font-size: 0.9em;}
	.top_logo-img{width: 35%;}
	.top-link_wrap h3{font-size: 2em;}
	.wrap_yk::after{width: 30%;}
	.top-link_wrap{padding: 100px 0 100px;}
	.wrap_yk{padding: 50px 0 100px;}
	.top-link_button{width: 30%;}
	/*--- footer ---*/
	.footer-color{font-size: 0.9em;}
	.footer-cr{font-size: 0.8em;}
	/*--- services ---*/
	.page-contents-box{margin: 0 auto 100px;}
	.services-top-text{padding: 0 0 50px;}
	.services-top-text div{width: 80%;}
	.services-top-text p{text-align: left; line-height: 1.8em;}
	.services-top-text p br{display: none;}
	.page-flex{display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}
	.services-title{width: 100%; margin: 0 0 20px; font-size: 2em; letter-spacing: 5px;}
	.services-title::after{width: 100%; top: 50px;}
	.contents-box{width: 100%;}
	.page-contents-box01 img{border-bottom: 7px solid rgba(172,54,53,1.0);}
	.page-contents-box02 img{border-bottom: 7px solid rgba(111,226,124,1.0);}
	/*--- company ---*/
	.contents-text-box{width: 95%;}
	.contents-text{width: 100%;}
	.contents-text h3{font-size: 2em; letter-spacing: 5px;}
	.contents-text h3::after{width: 40%; top: 60px;}
	.company_table td:first-child{padding-right: 20px; padding-left: 20px; font-size: 0.9em;}
	.company_table td:last-child{padding-right: 20px; padding-left: 30px; font-size: 0.9em;}
	/*--- contact ---*/
}
@media only screen and ( max-width : 834px ){}
@media only screen and ( max-width : 768px ){
	.header-logo h1{font-size: 1em;}
	header ul li{margin: 0 0 0 20px; padding: 0 0 0 20px; font-size: 0.9em;}
	.top-link_wrap h3{font-size: 1.8em;}
	.wrap_yk::after{width: 35%;}
	.top-link_wrap{padding: 75px 0;}
	.wrap_yk{padding: 50px 0 75px;}
	.top-flex-box h4{font-size: 1.4em;}
	.top-link_button{width: 35%;}
	.wrap_services::after, .wrap_company::after{font-size: 6em; top: -40px;}
	/*--- services ---*/
	.page-title-wrap{padding: 50px 0;}
}
@media only screen and ( max-width : 600px ){
	/*--- header ---*/
	.header-logo img{max-width: 120px;}
	.drawer-hamburger{display: block;}
	.drawer-brand {display: flex;}
	header ul{display: block;}
	header ul li{margin: 0 0 2px; padding: 0; font-size: 0.9em; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,0.4); background-blend-mode: lighten;}
	header ul li:nth-child(2){background-image: url("https://yoshiokacorp.com/img/bg-services.jpg");}
	header ul li:nth-child(3){background-image: url("https://yoshiokacorp.com/img/bg-company.jpg");}
	header ul li:nth-child(4){background-image: url("https://yoshiokacorp.com/img/bg-contact.jpg");}
	/*--- top ---*/
	.top_logo-img{width: 60%;}
	.wrap_yk{width: 90%; margin: 0 auto;}
	.wrap_yk br:first-child{display: block;}
	.top-link_wrap h3{font-size: 1.3em; letter-spacing: 7.5px;}
	.wrap_services h3, .wrap_company h3{margin: 0 0 35px; }
	.wrap_services::after, .wrap_company::after{font-size: 3.5em; top: -26px;}
	.top-flex-box h4{font-size: 1em; font-weight: 400;}
	.top-link_box{margin: 0 auto 50px;}
	.top-flex-box div:first-child img{border-bottom: 5px solid rgba(172,54,53,1.0);}
	.top-flex-box div:last-child img{border-bottom: 5px solid rgba(57,136,200,1.0);}
	.wrap_company .top-link_box{margin: 0 auto 50px; display: flex; flex-wrap: nowrap; flex-direction: column-reverse; justify-content: flex-start; align-items: center;}
	.wrap_company .top-link_box div{width: 90%; font-size: 0.9em;}
	.wrap_company .top-link_box div img{display: none;}
	.ggl-map{width: 90%; height: 400px;}
	.sns-link_box td{display: block; margin: 0 0 -1px;}
	.sns-link{padding: 5px 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}
	.sns-link img{width: 10%; margin: 0 25px;}
	.top-link_button{width: 50%; margin: 0 auto 30px; padding: 10px 15px; font-size: 0.9em; font-weight: 400;}
	/*--- footer ---*/
	.footer-contact{padding: 30px 0; background-position: center right;}
	.footer-contact-box{padding: 30px 7.5%; box-sizing: border-box;}
	.footer-contact-box h4{font-size: 1.3em; margin: 15px auto;}
	.footer-contact-box p{font-size: 0.9em;}
	.footer-contact-box p br:last-child{display: block;}
	.footer-contact-box a{width: 70%; margin: 30px auto 10px; padding: 10px 15px; font-size: 0.9em; font-weight: 400;}
	.footer-color{padding: 15px 0 0; font-size: 0.8em;}
	.footer-info-wrap{padding: 0 0 10px; display: block;}
	.footer-info-box{width: 100%;}
	.footer-logo{position: relative;}
	.footer-logo a img{width: 35%; max-width: none; position: absolute; top: 0; right: 0; opacity: 0.4;}
	.footer-info span{margin-top: 5px; display: block;}
	.footer-info br:first-child, .footer-info br:last-child{display: block;}
	.footer-text p{text-align: left;}
	.footer-cr{font-size: 0.7em;}
	/*--- services ---*/
	.page-title-wrap{margin: 0 auto 50px; padding: 25px 0; border-bottom: 3px solid rgba(19,106,170,1.0);}
	.page-title h2{padding: 0 0 20px; font-size: 2em; letter-spacing: 3px;}
	.page-title h2::after{font-size: 0.4em; top: 45px;}
	.services-title{font-size: 1.5em; letter-spacing: 4px;}
	.services-title::after{top: 40px;}
	.services-top-text{padding: 0 0 35px;}
	.services-top-text div{width: 80%;}
	.services-top-text::after{width: 30%; height: 94%;}
	.contents-box p{margin: 0 0 20px; line-height: 1.8em;}
	/*--- company ---*/
	.contents-text h3{margin: 30px 0; font-size: 1.6em; letter-spacing: 3px;}
	.contents-text h3::after{width: 70%; top: 40px;}
	.align-right{margin: 20px auto 0;}
	.contents-text-box .align-right img{width: 40%;}
	.contents-text-box{width: 100%;}
	.company_table tr{border-bottom: 1px solid rgba(200,200,200,1.0);}
	.company_table td{padding: 25px 0; border-bottom: 0px solid rgba(60,60,60,1.0); display: block;}
	.company_table tr:first-child{border-top: 1px solid rgba(200,200,200,1.0);}
	.company_table tr:first-child td{border-top: 0px solid rgba(60,60,60,1.0);}
	.company_table td:first-child{padding: 15px 0 10px 7.5%; text-align: left; font-weight: 600; }
	.company_table td:last-child{padding: 15px 5% 20px 10%;}
	.company_table_sns-link{width: 100%; box-sizing: border-box;}
	.company_table td img{width: 9%; margin: 0;}
	.company_table td a{padding: 10px 0; display: block;}
	/*--- contact ---*/
	.contact-form{margin: 0;}
	.contact-form div{width: 95%; display: block;}
	.contact-form_item-title{width: 100%;}
	.contact-form_item-text{width: 100%;}
	.input{width: 100%;}
	.submitbutton{width: 60%;}
	.tobutton{width: 60%;}
	.contact-text{font-size: 0.8em; text-align: left;}
}
@media only screen and ( max-width : 350px ){
	p{font-size: 0.9em;}
	/*--- top ---*/
	.top-link_wrap{padding: 50px 0;}
	.top-link_wrap h3{font-size: 1.2em; letter-spacing: 5px;}
	.wrap_yk{padding: 40px 0 50px;}
	.wrap_services::after, .wrap_company::after{font-size: 3em; top: -20px;}
	.top-link_button{width: 60%; margin: 0 auto 30px; padding: 5px 10px;}
	.ggl-map{width: 90%; height: 350px;}
	/*--- footer ---*/
	.footer-contact-box{padding: 20px 5%;}
	.footer-contact-box h4{font-size: 1.1em; margin: 10px auto;}
	.footer-contact-box p{font-size: 0.8em;}
	.footer-contact-box a{width: 70%; margin: 20px auto 10px; padding: 5px 10px;}
	/*--- services ---*/
	.services-top-text{padding: 0px;}
	.services-top-text p{font-size: 0.9em;}
}