@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%}
	

#main{
margin-top:100px; 
}
#main .mv{
position: relative
}
#main .mv div{
position: absolute; top:25%; max-width:357px; right:0; left:0; margin:0 auto; width: 30%
}
	
#c01{
background: linear-gradient(90deg, #fff 0%, #fff 70%, #f7f7f7 70%, #f7f7f7 100%);
}
#c01 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
#c01 .about{
display: flex;flex-wrap: wrap; padding: 10% 0
}
#c01 .about div:nth-child(1){
width: 30%; padding: 10% 7.5%;
}
#c01 .about div:nth-child(1) p{
padding:5% 0
}
#c01 .about div:nth-child(1) img{
max-width: 354px
}
#c01 .about div:nth-child(2){
width: 55%
}
	
#c02{
background:url("../../img/06-feel_jscent02/contents/02/bg.png"); background-size:100% 100%; background-position:center;  background-repeat:no-repeat
}
#c02 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf; background: #fff
}
#c02 .project{
padding:10% 5% 3%; 
}
#c02 .project div:nth-child(1){
text-align: center;
}
#c02 .project div:nth-child(1) p{
text-align: center; margin-bottom: 5%
}
#c02 .project div:nth-child(1) img{
max-width: 472px; margin-bottom: 3%
}
#c02 .project div:nth-child(2){
width: 100%
}
#c02 .project2{
display: flex;flex-wrap: wrap; max-width: 1150px; margin:0 auto
}
#c02 .project2 .pro01{
padding: 5%; width: 37%; text-align: center;
}
#c02 .project2 .pro01 .txt{
width:100%; margin: 0 auto 10%
}
#c02 .project2 .pro01 .btn{
width:40%; margin: 5% auto
}
#c02 .project2 .ic{
width: 5%; margin:15% auto 0; text-align: center
}
#c02 .project2 .pro02{
padding: 5%; width: 35%; 
}
#c02 .project2 .pro02 .txt{
width:25%; margin: 0 auto 3%; 
}
#c02 .project2 .pro02 .btn{
width:70%; margin: 5% auto
}
#c02 .project2 .pro02 p{
line-height: 200% !important
}

#c03{

}
#c03 .san{
display: flex;flex-wrap: wrap;
}
#c03 .san div{
width: 33.3%
}
	
#c03 .js01{
background:url("../../img/06-feel_jscent02/contents/03/1/item.png"); background-size:cover; background-position:left bottom;  background-repeat:no-repeat; padding: 15%; background-color: #ccc; position: relative; margin-top:-10px
	}
#c03 .js01 .name{
width: 15%; position: absolute; right: 20%; top: 25%
}
#c03 .js01 p{
width: 25%; position: absolute; right: 10%; top: 45%; line-height: 180% !important
}
#c03 .js01 .btn{
width: 10%; position: absolute; right: 25%; top: 70%
}
#c03 .photo01{
background:url("../../img/06-feel_jscent02/contents/03/1/bg.png"); background-size:cover; background-position:right bottom;  background-repeat:no-repeat; padding: 10%; background-color: #ccc; position: relative; 
	}
#c03 .photo01 p{
text-align: center; margin:5% auto 5%; 
}
#c03 .photo01 .ttl{
text-align: center; max-width: 130px; margin:0 auto 5%
}
#c03 .photo01 .p{
max-width: 750px; margin:0 auto 5%
}
	
#c03 .js02{
background:url("../../img/06-feel_jscent02/contents/03/2/item.png"); background-size:cover; background-position:left bottom;  background-repeat:no-repeat; padding: 15%; background-color: #ccc; position: relative; margin-top:-10px
	}
#c03 .js02 .name{
width: 15%; position: absolute; right: 20%; top: 25%
}
#c03 .js02 p{
width: 25%; position: absolute; right: 10%; top: 45%; line-height: 180% !important
}
#c03 .js02 .btn{
width: 10%; position: absolute; right: 25%; top: 70%
}
#c03 .photo02{
background:url("../../img/06-feel_jscent02/contents/03/2/bg.png"); background-size:cover; background-position:right bottom;  background-repeat:no-repeat; padding: 10% 0; background-color: #ccc; display: flex;flex-wrap: wrap;
	}
#c03 .photo02 p{
margin:6% auto 0; width: 40%
}
#c03 .photo02 p img{
margin:0 auto 0; 
}
#c03 .photo02 .ttl{
text-align: center; width:100%; margin:0 auto 5%
}
#c03 .photo02 .p{
 margin:0 auto 5%; width: 55%; margin-right:5%
}
.js02-dots-loop img {
	top: 40px;
    right: 55%;
}
.js02-slide-loop img {
position: absolute !important; 
}
	
	
#c03 .js03{
background:url("../../img/06-feel_jscent02/contents/03/3/item.png"); background-size:cover; background-position:left bottom;  background-repeat:no-repeat; padding: 15%; background-color: #ccc; position: relative; margin-top:-10px
	}
#c03 .js03 .name{
width: 15%; position: absolute; right: 20%; top: 25%
}
#c03 .js03 p{
width: 25%; position: absolute; right: 10%; top: 45%; line-height: 180% !important
}
#c03 .js03 .btn{
width: 10%; position: absolute; right: 25%; top: 70%
}
#c03 .photo03{
background:url("../../img/06-feel_jscent02/contents/03/3/bg.png"); background-size:cover; background-position:right bottom;  background-repeat:no-repeat; padding: 10% 0; background-color: #ccc; display: flex;flex-wrap: wrap;
	}
#c03 .photo03 p{
margin:6% auto 0; width: 40%
}
#c03 .photo03 p img{
margin:0 auto 0; 
}
#c03 .photo03 .ttl{
text-align: center; width:100%; margin:0 auto 5%
}
#c03 .photo03 .p{
 margin:0 auto 5%; width:55%; margin-right:5%
}
.js03-dots-loop img {
	top: 40px;
    right: 55%;
}
.js03-slide-loop img {
position: absolute !important; 
}
	
#c04{
padding-bottom: 15%; background:url("../../img/06-feel_jscent02/contents/04/bg.png"); background-size:100% 100%; background-position:center;  background-repeat:no-repeat
}
#c04 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf; background: #fff
}
#c04 .txt{
text-align: center; margin:5% auto; width: 140px
}
	
#c04 .making01{
padding: 5% 5% 0; display: flex; flex-wrap: wrap; max-width: 1080px; margin:0 auto
}
#c04 .making01 div:nth-child(1){
width: 40%; margin:0 auto
}
#c04 .making01 div:nth-child(2){
width: 40%; margin:0 auto; padding-top: 12%
}	
#c04 .making01 p{
line-height: 350% !important
}	
	
	
#c04 .making02{
padding: 5% 5% 0; display: flex; flex-wrap: wrap; max-width: 1080px; margin:0 auto
}
#c04 .making02 div:nth-child(1){
width: 40%; margin:0 auto; padding-top: 18%
}
#c04 .making02 div:nth-child(2){
width: 40%; margin:0 auto;
}	
#c04 .making02 p{
line-height: 350% !important
}	
	
	
} 



@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%}
	

	
#main{
margin-top:100px; 
}
#main .mv{
position: relative
}
#main .mv div{
position: absolute; top:10%; max-width:357px; right:0; left:0; margin:0 auto; width: 45%
}
	
#c01{
background: linear-gradient(90deg, #fff 0%, #fff 70%, #f7f7f7 70%, #f7f7f7 100%); margin-bottom: 5%
}
#c01 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
#c01 .about{
display: flex;flex-wrap: wrap; padding: 10% 0
}
#c01 .about div:nth-child(1){
width: 100%; padding:10% 5%
}
#c01 .about div:nth-child(1) p{
padding:5% 0
}
#c01 .about div:nth-child(1) img{
max-width: 354px; width: 85%;
}
#c01 .about div:nth-child(2){
width: 100%
}
	
#c02{
background:url("../../img/06-feel_jscent02/contents/02/bg.png"); background-size:100% 100%; background-position:center;  background-repeat:no-repeat
}
#c02 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf; background: #fff
}
#c02 .project{
padding:10% 5% 3%; 
}
#c02 .project div:nth-child(1){
text-align: center;
}
#c02 .project div:nth-child(1) p{
text-align: center; margin-bottom: 5%
}
#c02 .project div:nth-child(1) img{
max-width: 472px; margin-bottom: 3%
}
#c02 .project div:nth-child(2){
width: 100%
}
#c02 .project2{
display: flex;flex-wrap: wrap; max-width: 1150px; margin:0 auto
}
#c02 .project2 .pro01{
padding: 5%; width:100%; text-align: center;
}
#c02 .project2 .pro01 .txt{
width:100%; margin: 0 auto 10%
}
#c02 .project2 .pro01 .btn{
width:40%; margin: 5% auto
}
#c02 .project2 .ic{
width: 100%; margin:5% auto; text-align: center
}
#c02 .project2 .pro02{
padding: 5% 5% 15%;  width: 100%; 
}
#c02 .project2 .pro02 .txt{
width:25%; margin: 0 auto 3%; 
}
#c02 .project2 .pro02 .btn{
width:70%; margin: 5% auto
}


#c03{

}
#c03 .san{
display: flex;flex-wrap: wrap;
}
#c03 .san div{
width: 33.3%
}
	
#c03 .js01{
background:url("../../img/06-feel_jscent02/contents/03/1/item.png"); background-size:100%; background-position:left bottom;  background-repeat:no-repeat; padding: 10% 5% 45%; background-color: #F6F6F6; position: relative; margin-top:-10px; 
	}
#c03 .js01 .name{
width: 30%;
}
#c03 .js01 p{
width: 100%;  line-height: 180% !important; margin:5% 0
}
#c03 .js01 .btn{
width: 40%; float: right
}
#c03 .photo01{
background:url("../../img/06-feel_jscent02/contents/03/1/bg.png"); background-size:cover; background-position:right bottom;  background-repeat:no-repeat; padding: 10% 5%; background-color: #ccc; position: relative; 
	}
#c03 .photo01 p{
text-align: left; margin:5% auto 5%; 
}
#c03 .photo01 .ttl{
text-align: center; max-width: 130px; margin:0 auto 5%
}
#c03 .photo01 .p{
max-width: 750px; margin:0 auto 5%
}
	
#c03 .js02{
background:url("../../img/06-feel_jscent02/contents/03/2/item.png"); background-size:100%; background-position:left bottom;  background-repeat:no-repeat; padding: 10% 5% 45%; background-color: #F6F6F6; position: relative; margin-top:-10px; 
	}
#c03 .js02 .name{
width: 40%;
}
#c03 .js02 p{
width: 100%;  line-height: 180% !important; margin:5% 0
}
#c03 .js02 .btn{
width: 40%; float: right
}
#c03 .photo02{
background:url("../../img/06-feel_jscent02/contents/03/2/bg.png"); background-size:cover; background-position:right bottom;  background-repeat:no-repeat; padding: 10% 5%; background-color: #ccc; display: flex;flex-wrap: wrap;
	}
#c03 .photo02 p{
margin:70% auto 0; width: 100%
}
#c03 .photo02 p img{
margin:0 auto 0; 
}
#c03 .photo02 .ttl{
text-align: center; width:100%; margin:0 auto 5%
}
#c03 .photo02 .p{
 margin:0 auto 5%; width: 100%; 
}


	
	
#c03 .js03{
background:url("../../img/06-feel_jscent02/contents/03/2/item.png"); background-size:100%; background-position:left bottom;  background-repeat:no-repeat; padding: 10% 5% 45%; background-color: #F6F6F6; position: relative; margin-top:-10px; 
	}
#c03 .js03 .name{
width: 40%;
}
#c03 .js03 p{
width: 100%;  line-height: 180% !important; margin:5% 0
}
#c03 .js03 .btn{
width: 40%; float: right
}
#c03 .photo03{
background:url("../../img/06-feel_jscent02/contents/03/3/bg.png"); background-size:cover; background-position:right bottom;  background-repeat:no-repeat; padding: 10% 5%; background-color: #ccc; display: flex;flex-wrap: wrap;
	}
#c03 .photo03 p{
margin:70% auto 0; width: 100%
}
#c03 .photo03 p img{
margin:0 auto 0; 
}
#c03 .photo03 .ttl{
text-align: center; width:100%; margin:0 auto 5%
}
#c03 .photo03 .p{
 margin:0 auto 5%; width: 100%; 
}

	
#c04{
padding-bottom: 15%; margin-bottom: 0; background:url("../../img/06-feel_jscent02/contents/04/bg.png"); background-size:100% 100%; background-position:center;  background-repeat:no-repeat
}
#c04 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf; background: #fff
}
#c04 .txt{
text-align: center; margin:15% auto; width: 140px
}
	
#c04 .making01{
padding: 5% 5% 0; display: flex; flex-wrap: wrap; max-width: 750px; margin:0 auto
}
#c04 .making01 div:nth-child(1){
width:60%; margin:0 auto
}
#c04 .making01 div:nth-child(2){
width: 60%; margin:0 auto; padding-top: 10%
}	
#c04 .making01 p{
margin-bottom: 10%
}	
	
	
#c04 .making02{
padding: 5% 5% 0; display: flex; flex-wrap: wrap; max-width: 750px; margin:0 auto
}
#c04 .making02 div:nth-child(1){
width: 60%; margin:0 auto; padding-top: 10%; order: 2
}
#c04 .making02 div:nth-child(2){
width: 60%; margin:0 auto; order: 1
}	
#c04 .making02 p{
margin-bottom: 10%
}	

.js03-slide-loop img {
position: absolute !important; 
}
.js02-slide-loop img {
position: absolute !important; 
}
	
}