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

body{margin:0px auto}

.box {display: flex;flex-wrap: wrap;} 

a:hover{opacity:0.7} 
a:hover{opacity:0.7} 
a:hover{opacity:0.7} 


@media screen and (min-width:780px) { 

.sp{display:none} 
.contents{max-width: 1440px; margin:0px auto; padding:10% 5% 3%; } 
.p15{padding:0 15px }
	
.text-c p{
text-align: center
}
	
.box-half64_1{width:55%}
.box-half64_2{width:35%}
.box-half46_1{width:35%}
.box-half46_2{width:55%}
.box-half37_1{width:20%}
.box-half37_2{width:75%}
.box-half73_1{width:75%}
.box-half73_2{width:20%}
.box-half28_1{width:10%}
.box-half28_2{width:85%}
.box-half82_1{width:85%}
.box-half82_2{width:10%}
.box-half55{width:46%}
.box-half333{width:31%;}
.box-half4{width:22%}
	

#ttl{
background:url(""); background-size:100% 100%; background-position:center;  background-repeat:no-repeat; 
}
#ttl .ttl{
max-width: 255px; width: 40%; margin:5% auto 0
}
	
#c01 .list{
display: flex; flex-wrap: wrap; max-width: 750px; margin:10% auto 5%; 
}
#c01 .list div{
 width: 33%; text-align: center; border-bottom: 1px solid #cfcfcf;
}
#c01 .list div:first-child{
 border-bottom: 1px solid #cfcfcf;
 background: rgb(247, 247, 247);
}
#c01 .list div img{
padding:5% 20% 5%; margiin-bottom:30px
}
#c01 .list div:last-child img{
padding: 8% 20% 2%;
}

.pro{
text-align: center; margin: 5% 0; position: relative; 
}
.pro div:nth-child(2){
position: absolute; left: 0; right: 0; bottom:-15%; margin:0 auto; width: 12%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0.2));
}
.kurokawa{
display: flex;flex-wrap: wrap;
}
.kurokawa .p01{
width: 40%; margin:5% auto;
}
.kurokawa .p01 img:nth-child(1){
margin-bottom:10%
}
.kurokawa .p01 p{
border-bottom:1px solid #cfcfcf;
padding-bottom:8%; margin-bottom:8%
}
.kurokawa .p01 h2{
line-height: 180% !important
}
.kurokawa .p02{
width: 30%; margin:10% auto 0;
}
.kurokawa .btn{
max-width: 570px; margin:0 auto;
}

.kurokawa .p01 div:nth-child(1)  img:nth-child(1){
    max-width: 320px;
}
.kurokawa .p01 div:nth-child(2)  img:nth-child(1){
    max-width: 305px;
}
.kurokawa .p01 div:nth-child(3)  img:nth-child(1){
    max-width: 170px;
}


.sample{
	display: flex;flex-wrap: wrap; margin:5% auto
	}
		.sample div{
	width: 22%; background: #f7f7f7; padding:8% 0 4%; text-align: center; margin:0 3% 5% 0; position: relative
	}
	.sample div h2{
	line-height: 100% !important; margin:15% 0 0
	}
	.sample div p{
	line-height: 100% !important; margin:10px auto; font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif; color:#999999
	}
	.sample div img{
	width: 50%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0.2));
	}
	.sample div:nth-child(n+9) img{
	width: 18%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0.2));
	}
	.sample div .free{position: absolute; width: 70%; top:-15%; left:-25%; background: none}

.contents3{max-width: 1440px; margin:0px auto; padding:3% 5% 6%; } 
.contents4{max-width: 1440px; margin:0px auto; padding:3% 10% 6%; } 

.sample div .free img{
width: 50%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0)) !important; margin-top:5%
}
img#sample { margin-bottom: 10.6%; }

} 



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

.pc{display:none} 
.contents{width:90%; margin:0px auto; padding:15% 0 3%;} 
	
.text-c p{
text-align: left
}
	
.box-half64_1{width:100%}
.box-half64_2{width:100%}
.box-half46_1{width:100%}
.box-half46_2{width:100%}
.box-half37_1{width:20%}
.box-half37_2{width:75%}
.box-half73_1{width:75%}
.box-half73_2{width:20%}
.box-half28_1{width:15%}
.box-half28_2{width:80%}
.box-half82_1{width:80%}
.box-half82_2{width:15%}
.box-half55{width:100%}
.box-half333{width:66%}
.box-half4{width:46%}
	
	
#ttl{
background:url(""); background-size:100% 100%; background-position:center;  background-repeat:no-repeat; 
}
#ttl .ttl{
max-width: 386px; width: 40%; margin:15% auto 0
}
	

	
#c01 .list{
display: flex; flex-wrap: wrap; max-width: 750px; margin:0 auto 5%; 
}
#c01 .list div{
 width: 100%; text-align: center; border-bottom: 1px solid #cfcfcf;
}
#c01 .list div:first-child{
 border-bottom: 1px solid #cfcfcf;
 background: rgb(247, 247, 247);
}
#c01 .list div img{
padding:5% 20% 5%; margiin-bottom:30px
}
.pro{
text-align: center; margin: 5% 0; position: relative; 
}
.pro div:nth-child(2){
margin:-20% auto 0; width:25%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0.2));
}
.kurokawa{
display: flex;flex-wrap: wrap;
}
.kurokawa .p01{
width: 100%; margin:10% auto;
}
.kurokawa .p01 img:nth-child(1){
margin-bottom:10%
}
.kurokawa .p01 p{
border-bottom:1px solid #cfcfcf;
padding-bottom:8%; margin-bottom:8%
}
.kurokawa .p01 h2{
line-height: 180% !important
}
.kurokawa .p02{
width: 100%; margin:10% auto 0;
}
.kurokawa .btn{
max-width: 570px; margin:0 auto;
}

.kurokawa .p01 div:nth-child(1)  img:nth-child(1){
    max-width: 320px;
}
.kurokawa .p01 div:nth-child(2)  img:nth-child(1){
    max-width: 305px;
}
.kurokawa .p01 div:nth-child(3)  img:nth-child(1){
    max-width: 170px;
}


.sample{
	display: flex;flex-wrap: wrap; margin:5% auto
	}
		.sample div{
	width: 45%; background: #f7f7f7; padding: 15% 0 5%; text-align: center; margin:15% auto 5%; position: relative
	}
	.sample div h2{
	line-height: 100% !important; margin:15% 0 0
	}
	.sample div p{
	line-height: 100% !important; margin:10px auto; font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif; color:#999999
	}
	.sample div img{
	width: 50%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0.2));margin-top:5%
	}
	.sample div:nth-child(n+9) img{
	width: 18%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0.2));
	}
	.sample div .free{position: absolute; width: 85%; top: -30%; left:-25%; background: none}

.contents3{width:90%; margin:0px auto; padding:3% 0 3%; } 
.contents4{width:90%; margin:0px auto; padding:3% 0 3%; } 

.sample div .free img{
width: 50%; filter: drop-shadow(8px 8px 5px rgba(0,0,0,0)) !important; margin-top:5%
}
img#sample { margin-bottom: 10.6%; }
}