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


@media screen and (min-width: 1620px) and (max-width: 1920px) {

}
@media screen and (min-width: 1286px) and (max-width: 1620px) {

}
/* 1280px以下に適用されるCSS（スクエアモニター用） */
@media screen and (max-width: 1286px) {
	#mainvisual h2 {
		top: 10em;
	}
    #news .news_left {
		padding: 4em 0 0 4em;
	}
	#works .works_left {
		padding: 4em 0 0 4em;
	}
	#footer_nav{
		width: 60%;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1260px)  {
	#footer_nav{
		width: 70%;
	}

}
@media screen and (max-width: 1024px) {
/* mainvisual */
	#mainvisual h2 {
		top: 8em;
	}
/* about */
	#about .about_left {
		padding: 5em 0;
	}
/* business */
	#business .business_right {
		width: 50%;
		padding: 0 0 0 3em;
	}
    /* news */
	#news {
		padding: 5em 2em;
	}
	#news .news_left {
		padding: 4em 0 0 3em;
	}
/* works */
	#works {
		padding: 5em 2em;
	}
	#works .works_left {
		padding: 4em 0 0 3em;
	}
/* recruit */
	#recruit {
		padding: 5em 5em;
	}
/* contact */
	#contact {
		background-position: left;
	}
	#contact .contact_left {
		margin-left: 2em;
	}
}

@media screen and (max-width: 912px) {
/* menu */
	.menu li {
		margin-right: 2em;
	}
/* mainvisual */
	#mainvisual h2 {
		top: 7em;
	}
/* about */
	#about .about_left h3 {
		margin-left: 0;
		top: 0;
	}
	#about .about_sab {
		margin-left: 0;
	}
	#about .about_text {
		width: 370px;
		margin-left: 0;
	}
/* busines */
	#business {
		padding: 5em 2em;
	}
    /* news */
	#news .news_left {
		padding: 4em 0 0 2em;
	}
/* works */
	#works .works_left {
		padding: 4em 0 0 2em;
	}
/* contact */
	#contact .contact_left {
		width: 40%;
	}
/* footer_nav */
	#footer_nav {
		width: 80%;
	}
}

/* 850px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 850px) {
/* menu */
	.menu li {
		margin-right: 1em;
	}
/* mainvisual */
	#mainvisual .fs50 {
		font-size: 40px;
	}
	#mainvisual h2 {
		top: 8em;
	}
/* about */
	#about {
		margin: 7em 0;
	}
	#about .about_text {
		width: 350px;
	}
	#about .about_right {
		margin-top: 3em;
	}
    /* news */
	#news .news_left {
	    height: 500px;
		padding: 4em 0 0 0.5em;
	}
	#news .news_right li img {
		width: 45%;
	}
/* works */
	#works .works_left {
	    height: 500px;
		padding: 4em 0 0 0.5em;
	}
	#works .works_right li img {
		width: 45%;
	}
/* recruit */
	#recruit .recruit_text {
		width: 100%;
	}
	
/* footer_nav */
	#footer_nav {
		width: 90%;
	}
}
@media screen and (max-width: 768px) {
	header h1 {
		width: 30%;
	}
	#mainvisual h2 {
		top: 8em;
	}
	#about .about_text {
		width: 320px;
	}
	#about .about_right img {
		margin-top: 4em;
	}
	
	#business .business_right {
		width: 55%;
	}
}
@media screen and (max-width: 540px) {


}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    header {
  margin: 1em 1em 0 1em;
}
	header h1 {
		width: 50%;
	}
    .header_icon
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap : 10px;
        width: 25%;
    }
/* mainvisual */
	#mainvisual {
		margin-bottom: 5em;
        height: 42vw;
	}
    #video {
    /*天地中央配置*/
    position: relative;
    width: 100%; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 100%; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
        top: 0;
  left: 0;
  transform: translate(0, 0);
}
	#mainvisual h2 {
		top: 8em;
		left: 1em;
	}
	#mainvisual .sp_fs30 {
		font-size: 26px!important;
	}
/* about */
	.about_btn {
		left: 5.5em;
	}
	#about {
		margin: 4em 0;
	}
	#about .about_left {
		float: none;
		width: 100%;
		background: url(../img/logo01.png);
		background-repeat: no-repeat;
   		background-size: contain;
	}
	#about .about_right {
		float: none;
		width: 100%;
		margin-top: 0;
    	margin-left: 1em;
	}
	#about .about_text {
		width: 100%;
	}

/* business */	
	#business {
		margin-top: 6em;
	}
	#business .business_right {
		float: none;
		width: 100%;
		padding: 0;
	}
	#business .business_left {
		float: none;
		width: 100%;
		margin-top: 5em;
	}
	.business_btn {
		margin-left: 4em;
	}
    /* news */
	#news{
		padding: 5em 2em;
	}
	#news .news_left {
		float: none;
		width: 100%;
		height: 200px;
		padding: 0 2em;
	}
	#news .news_right {
		float: none;
		width: 100%;
	}
/* works */
	#works{
		padding: 5em 2em;
	}
	#works .works_left {
		float: none;
		width: 100%;
		height: 200px;
		padding: 0 2em;
	}
	#works .works_right {
		float: none;
		width: 100%;
	}
/* recruit */
	#recruit {
		padding: 5em 1em;
	}
/* contact */	
	#contact .contact_left {
		float: none;
		width: 100%;
	}
	#contact .contact_right {
		width: 26%;
		margin-right: 7em;
	}
	.contact_btn {
		margin-left: 1em;
	}
/* footer_menu */
	.footer_menu li span {
		margin: 0 1.5em 0 1.5em;
	}
	.footer_menu li {
		margin-bottom: 0.5em;
	}
}
@media screen and (max-width: 391px) {
	#mainvisual h2 {
		top: 10em;
	}
	#mainvisual .sp_fs30 {
		font-size: 20px!important;
	}
	#contact .contact_right {
		margin-right: 5em;
	}
}
@media screen and (max-width: 376px) {
/* about */
	#about {
		margin: 3em 0;
	}
	.about_btn {
		left: 4.5em;
	}
	.business_btn {
		margin-left: 4em;
	}
/* business */
	#business {
		padding: 5em 0em;
	}
    /* news */
	#news {
		padding: 5em 0em;
	}
	#news .news_right li img {
		margin-right: 0.5em;
		margin-bottom: 2em;
	}
/* works */
	#works {
		padding: 5em 0em;
	}
	#works .works_right li img {
		margin-right: 0.5em;
		margin-bottom: 2em;
	}
/* contact */
	#contact {
		padding: 1em;
	}
	#contact .contact_left {
		margin-left: 1em;
	}
	.contact_btn {
		margin-left: 2em;
	}
	#contact .contact_right {
		margin-right: 7em;
	}
/* footer */
	.footer_menu li span {
		margin: 0 1em 0 1em;
	}
}