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

/*
Theme Name:長栄工業株式会社
*/

@media only screen and (max-width: 767px){
	html{
		
	}
	
	#head{
		height: auto;
	}
	
	#slideshow{
		width: 100%;
		height: 500px;
	}
	
	#slideshow img{
		height: 100%;
	}
	
	.contents_title{
		font-size: 0.8em !important;
		width: 100%;
		line-height: 1.5;
	}
	
	.about_link{
		margin: 0 auto;
		text-align: center;
	}
	
	.txt_fadein{
		width: 100% !important;
	}
	
	.contents_wrap{
		width: 100%;
		margin-top: 50px;
		margin-left: 0;
	}
	
	.headnav{
		display: none;
	}
	
	.head{
		display: block;
		height: 4rem !important;
	}
	
	.topcontents01{
		width: 100%;
		display: block;
	}
	
	.topcontents02{
		width: 100%;
		display: block;
		margin-bottom: 50px;
		margin: 110px auto 0;
	}
	
	#posts{
		width: auto;
		display: block;
		padding: 20px;
	}
	
	.footer_contents{
		width: auto;
		display: block;
		padding: 50px 20px;
	}
	
	.header-logo{
		width: 15rem;
		margin: 15px 0 10px 10px;
	}
	
	.slider-text{
		top:250px;
	}
	
	.post{
		width: auto;
	}
	
	.post_title{
		display: block;
	}
	
	#main{
		width: auto;
		padding: 20px;
		margin: 0;
	}
	
	.cnt02-link01, .cnt02-link02{
		display: block;
		margin: 0 0 30px;
		width: 100%;
	}
	
	.section{
		border: none;
		padding: 0;
		height: auto;
		margin: 0;
	}
	
	.footer_contents01{
		margin: 0 auto;
	}
	
	.footer_contents01 p{
		font-size: 12px;
		letter-spacing: 0.1em;
	}
	
	.footer_contents01 img{
		width: 50%;
	}
	
	.aboutlogo{
		width: 15%;
		margin: 0 auto 30px;
	}
	
	.about_title{
		width: 80%;
		height: 100px;
	}
	
	.business_title{
		width: 90%;
		height: 100px;
	}
	
	.business{
		display: block;
		padding: 0;
	}
	
	#business::before{
		width: 100%;
		margin-top: -5em;
		height: 75em;
	}
	
	#busines{
		padding: 100px 0 0;
	}
	
	.container{
		padding: 0;
	}
	
	.navbar{
		height: auto;
	}
	
	#about{
		margin-top: 30px;
		background-position: top;
		background-size: 100%;
		margin-bottom: 0;
		padding: 50px 0 20px;
	}
	
	.contents_wrap{
		margin-bottom: 30px;
	}
	
	.topcontents_text{
		width: 100%;
	}
	
	.title{
		text-align: center;
		font-size: 21px;
		width: auto;
		font-size: 1em;
	}
	
	.title h1{
		font-size: 18px !important;
        font-weight: bold;
        font-family: "Noto Sans JP", sans-serif;
        letter-spacing: 0.05em;
	}
	
	.hamburger{
		display: block;
	    width: 35px;
        height: 25px;
        position: absolute;
        top: 15px;
		right: 10px;
	}
	
	.hamburger span{
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #005BAC;
		transition: .5s;
    }
	
	.hamburger span:first-of-type{/* ハンバーガーメニューの1番目の線 */
       top: 0;
    }
	
    .hamburger span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
       top: 50%;
    }
	
    .hamburger span:last-of-type{/* ハンバーガーメニューの3番目の線 */
       top: 100%;
    }
	
	.mobile-nav{
	   display: block;
	   background-color: rgba(230, 230, 230, .95);
       position: fixed;
       top: 4rem;
       width: 100%;
       left: 0;
       transform: translateX(100%); 
		transition: .5s;
	}
	
	.mobile-nav ul{
		width: auto;
		padding: 0;
	}
	
	.mobile-nav li{
       text-align: left;
		list-style: none;
		padding: 30px;
		border-bottom: 1px solid #cccccc;
	}
	
	.mobile-nav li a{
		color: black;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		width: 100%;
	}
	
	.mobile-nav li:hover{
		background-color: #005BAC;
		transition: 0.3s;
		color: white;
	}
	
	.hamburger.active span:first-of-type{/* ハンバーガーメニューの1番目の線 */
        top: 50%;
        transform: rotate(45deg);
    }

	.hamburger.active span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
        opacity: 0;/* 透明にする */
    }

	.hamburger.active span:last-of-type{/* ハンバーガーメニューの3番目の線 */
        top: 50%;
        transform: rotate(-45deg);
    }
	
    .mobile-nav.active{
        transform: translateX(0); 
    }
	
	.footer_contents02{
		width: 100%;
	}
	
	.about-pic{
		position: relative;
		height: auto;
		background-color: white;
		width: 100%;
		margin-bottom: 30px;
	}
	
	.about-pic img{
		width: 100%;
		padding-top: 0;
	}
	
	.footer_contents02{
		display: block;
	}
	
	.footer_contents02 ul{
		padding-right: 0 !important;
		margin-bottom: 0;
	}
	
	.cnt02-link01-img img{
		height: 200px;
	}
	
	.business_link{
		margin: 30px auto 0;
	}
	
	.anchor_box{
		display: none;
	}
	
	.sidebar_wrap,
	.page_textarea,
	.work01-1,
	.work01-3,
	.work01-3-2{
		display: block;
	}
	
	.work01-1,
	.work01-3,
	.work01-3-2{
		padding-top: 30px;
	}
	
	.base{
		margin-bottom: 110px;
	}
	
	.base2{
		width: 100%;
	}
	
	.cp-01,
	.cp-03{
		width: 100%;
		margin-top: 120px;
	}
	
	.cp-03{
		margin-bottom: 150px;
	}
	
	.pagetitle-img img{
		height: 50vw;
	}
	
	.pagetitle-img{
		margin-left: 5%;
	}
	
	.pagetitle-wrap{
		padding: 80px 5% 50px;
	}
	
	.pagetitle-en{
		font-size: 44px;
	}
	
	.pagetitle{
		font-size: 16px;
        margin-top: 0;
	}
	
	.section p{
		font-size: 15px;
	}
	
	.cp-02 img,
	.cp-04 img{
		height: 250px;
	}
	
	.btn-area{
		display: block;
		width: 90%;
		left: 0;
		position: relative;
		top:-20px;
	}
	
	.btn-area::before{
		display: none;
	}
	
	.btn-area .btn-area-next,
	.cp-03 .btn-area .btn-area-next{
		font-size: 0.9rem;
	}
	
	.mask{
		overflow: visible !important;
	}
	
	.cp-03 .btn-area{
		left: 0;
		width: 90%;
		position: relative;
		top:-20px;
	}
	
	.cp-text{
		left: 0;
		position: static;
		margin-top: 30px;
	}
	
	.cp-text .title_ja{
		font-size: 1.3rem;
	}
	
	.h2-txt{
		font-size: 32px;
	}
	
	.h3-txt{
		font-size: 24px;
		margin-top: 60px;
	}
	
	.block-txt{
		font-size: 14px;
		margin-top: 36px;
		font-weight: 500;
	}
	
	.ceo-img{
		width: 60%;
	}
	
	.table-wrap,
	.table-wrap2{
		margin-top: 36px;
	}
	
	.table-wrap th, 
	.table-wrap td,
	.table-wrap2 th, 
	.table-wrap2 td,
	.list li{
		font-size: 14px;
		font-weight: 500;
	}
	
	.table-wrap .th,
	.table-wrap2 .th{
		margin-right: 0;
	}
	
	.table-wrap th{
		padding: 14px 8px 0;
	}
	
	.table-wrap td{
		padding: 14px 8px;
	}
	
	.table-wrap2 .th{
		padding-right: 0;
	}
	
	.table-wrap tr{
		display: grid;
	}
	
	.page_textarea01,
	.page_textarea03{
		width: 100%;
		font-size: 24px;
	}
	
	.page_textarea02{
		width: 100%;
		font-size: 14px;
		font-weight: 500;
	} 
	
	.work01-1-1_text{
		font-size: 14px;
	}
	
	.work01-1-1{
		margin-bottom: 20px;
		border-radius: 1.5vw;
	}
	
	.work_subtitle{
		font-size: 32px;
	}
	
	.work01-2{
		padding: 0;
	}
	
	.table-wrap th,
	.table-wrap2 th{
		width: 100%;
	}
	
	.work4-img{
		display: block;
	}
	
	.work4-img img{
		margin-bottom: 15px;
	}
	
	.slider{
		padding: 0;
	}
	
	.pc{
		display: none;
	}
	
	.mb{
		display: block;
	}
	
	.work01-2_img img{
		height: 100%;
	}
	
	.about-pic .slider img{
		padding-top: 0;
	}
	
	.work01-2-2{
		display: block;
	}
	
	.work01-2-2 img{
		width: 100%;
		height: 250px;
		margin: 0 0 25px;
	}
	
	.work01-4_head{
		padding: 10px 30px;
	}
	
	.page_textarea04{
		margin: 50px 0;
	}
	
	.pagetitle-wrap2{
		padding: 80px 5% 50px;
	}
	
	.page_textarea07{
		font-size: 18px;
		margin-right: 0;
		padding: 30px;
		width: auto;
	}
	
	.about_link_box{
		display: block;
	}
	
	.page_textarea{
		margin-bottom: 50px;
	}
	
	.work_subtitle{
		margin-top: 50px;
	}
	
	.work2-2-2{
		display: block;
	}
	
	.work2-2-2 img{
		margin-top: 10px;
	}
	
	.slider-container{
		height: 200px;
		margin: 80px 0 0 !important;
	}
	
	.base4{
		width: 100%;
	}
	
	.work4-img img{
		width: 100%;
	}
}