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

/*　スマホ　*/
@media( max-width : 480px ){

/*共通部分*/
	body{
		max-width: 100%!important;
	}
	h2{
		font-size: 1.8rem;
		background-size: 50% 2px;
		padding-top:60px;
		margin-bottom: 5%;
	}
	#COMPANY_PROFILE h2{
		background-size: 80% 2px;
		padding-top:5%;
		font-size: 1.5rem;
	}
	p{
		font-size: 1rem;
	}
	.br{
		display:block;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}

/*	ハンバーガーメニュー　*/
	.menu{
		display: none;
	}
	.menu_phone{
		display: block;
		position:fixed;
		top:0;
		left:0;
		display: flex;
		z-index:1000;
		flex-direction: column;
		width: 100vw;
		font-size: 0.8rem;
		text-align: center;
		background: #fff;
		transform: translateY(-100%);
		transition: all 0s ease-in-out;
	}
	.menu_phone a{
		padding-top:3%;
		padding-bottom: 3%;
		font-family: 'Caveat', cursive;
		font-size: 1rem;
	}
	.menu_phone a:active{
		background-color: rgba(131,199,224,.2);
	}

/*	toggleClass  */

	nav.menu_phone.active {
    transform: translateY(0%);
}

	nav.menu_phone.active1 {
    transition: all 0.65s ease-Out;
}
	#open{
		display: flex;
		position: fixed;
		z-index: 1500;
		top:0;
		right:0;
		text-align: center;
    	width: 47px;
    	height: 47px;
    	cursor: pointer;
		align-items: center;
		background-color: rgba(255,255,255,.7);
	}
	#open span{
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 28px;
    border-bottom: solid 2px #767D7C;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 9px;
	margin: 0;
	padding: 0;
}

#open span:nth-child(1) {
    top:11px;
}

#open span:nth-child(2) {
    top: 20px;
}

#open span:nth-child(3) {
    top: 29px;
}

/* 最初のspanをマイナス45度に */
#open.active span:nth-child(1) {
    top: 18px;
    left: 9px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
#open.active span:nth-child(2),
#open.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* top */
	#top{
		background-image: url("../images/top_phone.jpg");
		background-size: cover;
		background-position: right 0;
		width: 100%;
		height: auto;
		min-height: 60vh;
	}
	#top p{
		font-size:0.9rem;
	}
	.line_stp{
		width: 100px;
		bottom: 5%;
		left: 3%;
	}
/*ABOUT US*/

#aboutus{
	width: 100%;
}
	.about{
		width: 100%;
		display: block;
		/* display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 10px; */
	}
	.quick{
	width: 150px;
	height:auto;
}
	.parts h3{
		font-size:2.5rem;
		margin-top: 0;
		margin-bottom: 2%;
	}
	.parts{
		width:90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
		height: auto;
		border-width: 1px;
	}
	.parts_icon{
		margin-top: 2%;
		width: 120px;
	}
	.parts li{
		font-size: 0.8rem;
		/* letter-spacing: -0.1rem; */
		line-height: 1;
		padding-top:0.3rem;
		padding-bottom: 0.2rem;
	}
	.parts ul li:last-child img{
		margin-top: 5px;
	}
	.parts ul .sp_line_height {
		line-height: 1.2;
	}
/*	PRODUCT */
	#product{
		width: 95vw;
		margin-left: auto;
		margin-right: auto;
	}
	#product h3{
		width:150px;
		height: 50px;
		padding: 10px 0;
		font-size: 0.9rem;
		border-width: 3px;
		margin-top:10%;
		margin-bottom: 10%;
	}
	#product h3:after{
		width:150px;
		height: 50px;
		top: 2px;
  		left: -8px;
	}
	.swiper-wrapper{
		width: 95%;
		margin: 3% auto;
		max-width: 350px;
		padding-left: 0%;
	}

	.item{
		margin:0 50px;
	}
	.item:first-child{
		margin: 0;
	}
	.item:last-child{
		margin: 0;
	}
	.swiper-wrapper .slick-next { right: 0; z-index: 100;}
	.swiper-wrapper .slick-prev { left: 0; z-index: 100;}
	.slick-prev:before, .slick-next:before{
		font-size: 20px;
	} 
	.swiper-wrapper .item img { 
		width: auto;
		height:20vw;
		max-height: 150px; 
		min-height: 150px; 
		margin-right:auto;
		margin-left:auto;
	}
	#product h4{
		margin-bottom: 10px;
		font-size: 1rem;
	}
	.big{
		font-size: 1.05rem;
	}
	#product figcaption{
		text-align: center;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		overflow-wrap: break-word;
		margin-bottom: 3%;
		font-size:0.8rem;
	}
/*		DTP・sup 	*/
	#dtp, #sup{
		width: 100%;
		margin: 4% auto 10% auto;
	}
	#sup{
		width: 100%;
		margin: 30% auto 10% auto;
	}
	.dtp_slide, .sup_slide{
		width: 90%;
		margin: 2% auto;
	}
	.dtp_slide img{
		width: 100%;
		margin: 2% auto 0;
	}
	.sup_slide img{
		width: 85%;
		margin: 2% auto 0;
	}
	#sup .item{
		margin:0;
	}

/*	MANAGEMENT */
	.column{
		justify-content: center;
	}
	#management img{
		width:45%;
		margin-right: 0;
	}
	#management .flex{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#management h3{
		margin-left: 0;
		margin-top:5%;
		margin-bottom: 6%;
		text-align: center;
		font-size: 1.25rem;
		font-family: 'Noto Sans JP', sans-serif;
	}
	#management ul{
		width: 70vw;
		margin-left: auto;
		margin-right: auto;
	}
	#management ul li{
		font-size: 1rem;
		font-weight: bold;
		padding-bottom: 1px;
		line-height: 3;
		border-bottom: dotted 1px #83c7e0;
	}
	#management ul li:before{
		  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-left:0.7rem solid #83c7e0;
		top:50%;
	}
	.mg1{
		order: 1;
	}
	.mg2{
		order: 2;
	}
	#management p{
		width: 85vw;
		margin: 2% auto 8% auto;
		text-align: left;
	}
	.none{
		display: none;
	}
/*contact*/
	#contact .center{
		font-size: 0.8rem;
		letter-spacing: -0.05rem;
	}
	.space{
		display: none;
	}
	.form_center{
		margin-top: 8%;
	}
	.form_center,form input[type="text"],input[type="email"],form textarea,.privacy{
		width: 80vw;
	}
	.btn_submit{
		margin-top: 2%;
		letter-spacing: 0;
		width: 10rem;
		height: 3rem;
	}
	.privacy p {
		font-size: 0.9rem;
	}

/*		csr 	*/
	#csr{
		flex-direction: column;
		align-items: center;
		text-align: justify;
		width: 90%;
		margin: 10% auto;
	}
	.left{
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
	}
	.csr1{
		order: 1;
		margin-bottom: 2%;
		line-height: 2;
	}
	.csr2{
		order:2;
		width: 100%;
	}

/*		会社概要	*/

	#COMPANY_PROFILE{
		background-image: url("../images/office_phone.jpg");
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#COMPANY_PROFILE a{
		text-decoration: underline dotted #333333;
		-webkit-text-decoration:underline dotted #333333;
	}
	.flex_top{
		flex-direction: column;
		align-items: center;
	}
	.flex_top section{
		width: 80vw;
		min-width: 80vw;
		font-size: 0.8rem;
	}
	.flex_top section:first-child{
	margin-right: 0;
	}
	.cp li{
		font-size:14px;
		text-align: center;

	}
	table{
		width: 100%;
		margin: 2% auto;
	}
	th{
		min-width: 5rem;
	}
	th,td{
		font-size:14px;
		font-weight: 500;
		padding-bottom: 3%
	}
	footer p{
		font-size: 1rem;
	}

}