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

@media only screen and (max-width:1366px){
	
    
}

@media only screen and (max-width:1180px){
    
}


@media only screen and (max-width:1024px){
    
    /* --------------- 共通 --------------- */
    
    .page-head-area,.page-head-area::before{ height: 420px; }
    .page-head-ttl__main{ font-size: 2.6em; }
	
	/* --------------- ヘッダー --------------- */
    
    header #pc_nav{ margin-top: 25px; }
    header .logo{ width: 120px; padding: 15px 20px; }
    header #pc_nav .menu ul li:nth-child(1),
    header #pc_nav .menu ul li:nth-child(2){ padding: 0 1em; }
    header #pc_nav .menu ul li:nth-child(3){ padding-left: 1em; }
    
    /* --------------- スライドショー --------------- */
    #vegas{ height: 600px; }
    #vegas .caption h1{ font-size: 50px; padding-bottom: 10px; }
    
    /* --------------- トップページ --------------- */
    
    .t-company-content{ padding: 40px 5% 40px 0; margin-bottom: 60px; }
    .t-company-sec::before{ font-size: 10em; }
    .t-company-text-area h2{ font-size: 26px; margin-bottom: 20px; }
    .t-company-text-area p{ font-size: 16px; }
    
    .t-outline-sec{ margin-bottom: 60px; }
    .t-outline-img-area{ width: 280px; }
    .t-outline-info-area{ width: calc( 100% - 360px ); }
    .t-outline-tit h2,.common-tit h2{ font-size: 45px; }
    .t-outline-table table tr th, 
    .t-outline-table table tr td{ font-size: 16px; }
    
    .t-works-sec{ margin-bottom: 60px; }
    .t-works-img-area,.t-works-img-area img{ height: 320px; }
    .t-works-text{ font-size: 16px; }
    .t-btn{ font-size: 16px; }
    
    .contact-sec{ padding: 40px 0; }
    .contact-text-area{ padding-left: 40px; margin-left: 40px; }
    .contact-text-area p{ font-size: 16px; }
    .contact-text-area .contact-tel{ font-size: 50px; }
    
    /* --------------- フッター --------------- */
    
    .footer_inner{ padding: 30px 0; }
    .company-name img{ width: 130px; }
    
}

@media only screen and (max-width:990px){
    
}

@media only screen and (max-width:880px){
    
    /* --------------- ヘッダー --------------- */
    
    header #pc_nav{ display: none; }
    header .logo{ padding: 15px 30px; }
    
	/*ハンバーガーメニュー*/
	/*.button_container {
		display: block;
  		position: fixed;
  		top: 4%;
  		right: 5%;
  		height: 35px;
  		width: 45px;
  		cursor: pointer;
  		z-index: 100;
  		-webkit-transition: opacity .25s ease;
  		transition: opacity .25s ease;
		z-index: 2000;
	}*/
    .button_container {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        height: 65px;
        width: 65px;
        cursor: pointer;
        z-index: 100;
        -webkit-transition: opacity .25s ease;
        transition: opacity .25s ease;
        z-index: 2000;
        background: #3A3A3A;
    }
	/*.button_container:hover {
  		opacity: .7;
	}*/
	.button_container.active .top {
  		-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
        transform: translateY(10px) translateX(0) rotate(45deg);
  		background: #fff;
	}
	.button_container.active .middle {
  		opacity: 0;
  		background: #fff;
	}
	.button_container.active .bottom {
  		-webkit-transform: translateY(-4px) translateX(0) rotate(-45deg);
    	transform: translateY(-4px) translateX(0) rotate(-45deg);
		background: #fff;
	}
	.button_container span {
		background: #fff;
		border: none;
		height: 1.5px;
		width: 20px;
		position: absolute;
		top: 24px;
		left: 0;
        right: 0;
        margin: 0 auto;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		cursor: pointer;
	}
	.button_container span:nth-of-type(2) {
		top: 31px;
	}
	.button_container span:nth-of-type(3) {
		top: 38px;
	}

	.overlay {
		display: block;
		position: fixed;
		background: #3A3A3A;
		top: 0;
		left: 0;
		width: 100%;
		height: 0%;
 		 opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
		transition: opacity .35s, visibility .35s, height .35s;
		overflow: hidden;
	}
	.overlay.open {
		opacity: 1;
		visibility: visible;
		height: 100%;
		z-index: 1000;
	}
	.overlay.open li {
		-webkit-animation: fadeInRight .5s ease forwards;
		animation: fadeInRight .5s ease forwards;
		-webkit-animation-delay: .35s;
		animation-delay: .35s;
        /*border-bottom: dashed 1px #fff;*/
	}
	.overlay nav {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
        display: block;
		width: 70%;
		margin: 0 auto;
	}
	.overlay ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		display: inline-block;
		position: relative;
        width: 100%;
		height: 100%;
	}
	.overlay ul li {
		display: block;
        width: 100%;
		height: 15%;
		height: calc(100% / 3);
		min-height: 30px;
		position: relative;
		opacity: 0;
        box-sizing: border-box;
        margin-bottom: 25px;
	}
	/*.overlay ul li::before {
    	content: "";
    	position: absolute;
    	top: 26px;
    	left: 0;
    	width: 15px;
    	height: 15px;
    	background: #fff;
        border-radius: 3px;
	}*/
	.overlay ul li a {
		display: flex;
        flex-direction: column;
		position: relative;
		color: #fff;
		text-decoration: none;
		overflow: hidden;
	}
    .overlay ul li a .en{ font-size: 2.5em; font-weight: 700; }
    .overlay ul li a .ja{ font-size: 1.2em; font-weight: 500; padding: 5px 0 0 4px; }
	.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { width: 100%; }
    
    .menu_list_link{
        display: flex;
        align-items: center;
        margin-top: 25px;
        text-decoration: none;
        color:#fff;
    }
    .menu_list_link .link-img{ padding: 5px; background: #fff; border-radius: 50%; }
    .menu_list_link .link-img img{ width: 25px; }
    .menu_list_link .link-text p{ margin: 0; padding-left: 10px; }
    
	@-webkit-keyframes fadeInRight {
		0% { opacity: 0; left: 20%; }
		100% { opacity: 1; left: 0; }
	}

	@keyframes fadeInRight {
		0% { opacity: 0; left: 20%; }
		100% { opacity: 1; left: 0;	}
	}
	
	/*.button_container span.change-color { background-color: #2E3B92; }*/
    
    /* --------------- スライドショー --------------- */
    
    #vegas{ height: 60vh; }
    #vegas .caption{ bottom: 10%; left: 5%; }
    .scroll-Block{ display: none; }
    
    /* --------------- トップページ --------------- */
    
    .t-outline-img-area{ width: 250px; }
    .t-outline-info-area { width: calc( 100% - 300px ); }
    
    .t-works-img-area, .t-works-img-area img{ height: 320px; }
    .t-works-text-area{ padding: 2em 0;}
    
    .contact-text-area .contact-tel{ font-size: 40px; }
    
}

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

}

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

@media only screen and (max-width:640px){
    
    /* --------------- 共通 --------------- */
    
    #br_sp{ display: block; }
    #content{ margin: 30px auto; }
    
    .page-head-area, .page-head-area::before{ height: 280px; }
    .page-head-ttl__main{ font-size: 40px; padding-bottom: 10px; }
    .page-head-ttl__sub{ font-size: 18px; }
    
	/* --------------- ヘッダー --------------- */
    
    header .logo{ width: 100px; padding: 10px 15px; }
    
    /* --------------- スライドショー --------------- */
    
    #vegas{ height: 460px; }
    #vegas .caption h1{ font-size: 30px; padding-bottom: 5px; }
    #vegas .caption .txt{ font-size: 14px; padding-left: 4px; }
    
    /* --------------- トップページ --------------- */
    
    .t-company-content{ 
        flex-direction: column;
        padding: 40px 5% 80px 5%; 
        margin-bottom: 40px;
    }
    .t-company-img-area{ width: 100%; }
    .t-company-text-area{ width: 100%; padding-left: 0; }
    .t-company-text-area h2{ font-size: 23px; margin: 15px 0; }
    .t-company-sec::before{ font-size: 4.2em; bottom: -6px; }
    
    .t-outline-sec{ margin-bottom: 40px; }
    .t-outline-content{ flex-direction: column; }
    .t-outline-img-area{ width: 220px; }
    .t-outline-info-area{ width: 100%; padding-top: 40px; }
    .t-outline-tit{ margin-bottom: 20px; }
    .t-outline-tit h2, .common-tit h2{ font-size: 40px; }
    .t-outline-tit p, .common-tit p{ font-size: 16px; margin-top: 10px; }
    .t-outline-table table tr th,
    .t-outline-table table tr td{ display: block; font-size: 16px; padding: 10px 0; }
    
    .t-works-sec{ margin-bottom: 40px; }
    .t-works-content{ flex-direction: column; }
    .t-works-img-area, .t-works-img-area img{ width: 100%; height: 220px; }
    .t-works-text-area{ width: 100%; padding: 30px 25px; }
    .t-works-text{ font-size: 0.9em; margin: 25px 0; }
    .t-btn{ font-size: 0.9em; }
    
    .contact-sec{ padding: 40px 0; }
    .contact-content{ flex-direction: column; align-items: flex-start; }
    .contact-text-area{ width: 100%; padding: 0; margin: 0; border: none; }
    .contact-text-area .contact-text{ margin: 0; font-size: 16px; padding: 20px 0; }
    .contact-text-area .contact-tel{ 
        font-size: 30px; 
        padding-top: 20px; 
        border-top: solid 1px #fff;
    }
    
    /* --------------- 施工実績 --------------- */
    
    .works-list { grid-template-columns: 1fr; grid-template-rows: auto; }
    .works-list li { grid-column: 1; grid-row: auto; }
    
    /* --------------- フッター --------------- */
    
    .footer_inner{ flex-direction: column; align-items: flex-start; padding: 25px 0; }
    .company-name { margin-bottom: 10px; }
    .company-name a{ font-size: 16px; }
    .company-name img{ width: 100px; }
    .footer-copy-right{ padding-top: 15px; }
    .footer-copy-right p{ font-size: 10px; }
    
}

@media only screen and (max-width:420px){
    
}