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

@media screen and (max-width:599px){
	
	.pc{display: none;}
	.sp{display: initial}
	
	section{width: 100%;}
	
	header{display: none;}
	header li.tel a{pointer-events: auto;}
	.mv{height: auto;}
	.mv:after{
		background: url("../img/mv_bg_sp.jpg")no-repeat center;
		background-size: cover;}

	.mv .catch{
		position: relative;
		width: 100%;
		top: auto;
		right: 0;
		transform: none;}
	
	.mv .img{
		position: relative;
		width: 75vw;
		height: 60vw;
		margin-left: auto;
		margin-top: -80px;
		overflow: hidden;
		z-index: 1;}
	
	.mv .img img{width: 100%;}
	
	.trouble{
		padding: 30px 15px;
		background-size: 50vw;}
	.trouble h2{
		font-size: 4.5vw;
		margin-bottom: 30px;}
	.trouble h2 b:before{
		letter-spacing: 4vw;
		top: -4.5vw;
		width: 100%;
		padding-left: 1.5vw;}

	.trouble ul.min{
		padding: 0;
		font-size: 3vw;}
	
	.trouble ul.min li {margin-bottom: 20px;}
	.trouble ul.min li:before{
		width: 5vw;
		height: 5vw;
		margin-right: 2vw;}
	
	.trouble .ex{display: none;}
	.trouble .ex_sp{
		display: block;
		background: #f2eee6;
		border-radius: 15px;
		padding-top: 10px;
		position: relative;}
	.trouble .ex_sp li{
		display: flex;
		align-items: flex-end;
		line-height: 0;
		height: 100%;
		padding:0 10px;}
	.trouble .ex_sp li img{width: 100%;}

	.slick-slider .slick-track,
	.slick-slider .slick-list{display: flex;}
	.slide-arrow.prev-arrow,
	.slide-arrow.next-arrow{
		position: absolute;
		top:calc(50% - 14px);
		z-index: 5;}
	.slide-arrow.prev-arrow{left: 5px;}
	.slide-arrow.next-arrow{right: 5px;}
	
	.trouble .ex_sp:after {
    	content: "";
    	border: solid;
    	border-width: 40px 23px;
    	border-color: transparent transparent #f2eee6 transparent;
    	position: absolute;
    	top: -68px;
		left: 14vw;}
	
	.feature_pre{
		padding: 30px 0 15vw;
		-webkit-clip-path: polygon(100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw), 0 0);
		clip-path: polygon(100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw), 0 0);}
	
	.feature_pre .tit{
		width: calc(100% - 30px);
		font-size: 3.5vw;
		margin-bottom: 30px;}
	.feature_pre .tit + p{font-size: 4.5vw;}
	
	.feature{
		padding: 26vw 0 10px;
		margin-top: -18vw;}
	.feature h2{
		padding: 0 20px;
		margin-bottom: 50px;}
	
	.feature h2 img{
		width: 60vw;
		transform: none;}
	
	.feature:after{
		width: 55vw;
		height: 40vw;
		top: 26vw;}
	
	.feature .in{
		display: block;
		padding: 0 15px;}
	
	.feature .in .box:nth-child(1) h3 img{width: 50vw;}
	.feature .in .box:nth-child(2) h3 img{width: 62vw;}
	.feature .in .box:nth-child(3) h3 img{width: 50vw;}
	.feature .in .box:nth-child(4) h3 img{width: 62vw;}
	.feature .in .box:nth-child(5) h3 img{width: 62vw;}
	
	.feature .in .box h3:before{top: 10px;}
	.feature .in .box:nth-child(1) h3:before{
		width: 10vw;
		height: 14vw;
		left: 0;}
	.feature .in .box:nth-child(2) h3:before{
		width: 15vw;
		height: 18vw;
		left: -40px;}
	.feature .in .box:nth-child(3) h3:before{
		width: 14vw;
		height: 15vw;
		left: -30px;}
	.feature .in .box:nth-child(4) h3:before{
		width: 14vw;
		height: 16vw;
		left: -38px;}
	.feature .in .box:nth-child(5) h3:before{
		width: 15vw;
		height: 15vw;
		left: -30px;}
	
	.cv{display: none;}
	
	.flow{padding: 30px 0;}
	.flow h2{
		font-size: 7vw;
		margin-bottom: 30px;}
	.flow ul li{flex-basis:50%;}
	
	.flow ul li label{position: relative;}
	.flow ul li label:after{
		content: "";
		border: solid;
		border-width: 20px 12px;
		position: absolute;
		bottom: -40px;
		left: calc(50% - 12px);}
	
	.flow ul li.our label:after{border-color: #ff9619 transparent transparent transparent;}
	.flow ul li.other label:after{border-color: #b0a294 transparent transparent transparent;}
	
	
	.flow ul li.our label{font-size: 4.5vw;}
	.flow ul li.other label{font-size: 4vw;}
	
	.flow section{padding: 0 15px;}
	.flow .in{padding: 20px 15px 0;}
	.flow .in .box{display: block;}
	
	.flow #our:checked ~ .in .other,
	.flow #our:checked ~ ul .other label:after{display: none;}
	.flow #other:checked ~ .in .our,
	.flow #other:checked ~ ul .our label:after{display: none;}
	
	.flow .in .box p img{width: 100%;}
	.flow .in .box p:first-child:after{content: none;}
	
	.case{
		padding-top: 30px;
		padding-bottom: 10px;
		background: url(../img/bg.png) no-repeat top 30px right #f2f2f2;
		background-size: 80vw;}
	.case h2{
		font-size: 7vw;
		margin-bottom: 30px;}
	.case .in{
		display: block;
		padding: 0 15px;}
	
	.case .box{margin-bottom: 40px;}
	.case .box label{
		display: block;
		text-align: center;
		background: #ff9619;
		color: #fff;
		font-size: 1.07em;
		letter-spacing: 0.1em;
		padding: 10px;}
	.case .box label:after{content: "見る ▼";}
	
	.case .box .detail{
		transform: scaleY(0);
		transform-origin: top;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition-duration: .3s;}
	
	.case .box input:checked + label{margin-bottom: 10px;}
	.case .box input:checked + label + .detail{
		opacity: 1;
		max-height: 9999px;
		transform: scaleY(1);}
	
	.case .box input:checked + label:after{content: "閉じる ▲";}
	
	.dr{padding: 30px 15px;}
	.dr h2{
		font-size: 7vw;
		margin-bottom: calc(94vw + 10px);}
	.dr h3{
		font-size: 4vw;
		text-align: center;}
	.dr .in{padding: 40px 20px;}
	.dr .in .txt{width: 100%;}
	.dr .in .photo{
		width: 70vw;
		height: 94vw;
		bottom: auto;
		overflow: hidden;
		top: calc(-94vw - 10px);}
	
	#contact{padding: 30px 0;}
	#contact h2{
		font-size: 7vw;
		margin-bottom: 30px;}
	#contact table tr,
	#contact table th,
	#contact table td{
		display: block;
		width: 100%;
		box-sizing: border-box;}
	#contact table th{text-align: left;}
	#contact table tr,
	#contact table th,
	#contact table td{border: none;}
	
	footer{padding-top: 50px;}
	footer section{
		display: block;
		text-align: center;
		padding: 0 15px;}
	
	footer section .photo {margin-bottom: 10px;}
	footer section .photo p:not([class]) img{width: 100%;}
	footer .tel{font-size: 9.5vw;}
	footer .tel a{pointer-events: auto;}
	footer table{width: 100%;}
	footer table + p{text-align: left;}
	footer table th,
	footer table td{padding: 10px 1vw;}
	
	footer .copyright{padding: 5px 5px 60px;}
	
	.pagetop{
		right: 20px;
		bottom: 12vw;}
	.pagetop img{width: 10vw;}
	
	.sp_menu{
		display: flex;
		width: 100%;
		background: #ff9619;
		color: #fff;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;}
	
	.sp_menu li{
		flex-basis: 50%;
		height: 100%;
		text-align: center;
		font-size: 5vw;
		font-weight: bold;
		letter-spacing: 0.1em;
		border-top:1px solid #fff;}
	.sp_menu li:not(:last-child){border-right: 1px solid #fff;}
	
	.sp_menu li a{
		display: block;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;}
	.sp_menu li img{margin-right: 5px;}
	
	.application{padding: 40px 15px;}
	

}