@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{
margin-bottom: 5%
}
#c02 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
#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: 375px; margin-bottom: 5%
}
#c02 .project div:nth-child(2){
max-width: 900px; margin:0 auto
}
#c02 .project div:nth-child(3) {
    max-width: 900px;
    margin: 0 auto;
}
	
	
#c03{
margin-bottom: 5%
}
#c03 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
#c03 .movie{
padding:10% 5% 3%
}
#c03 .movie div:nth-child(1){
text-align: center;
}
#c03 .movie div:nth-child(1) p{
text-align: center; margin-bottom: 10%
}
#c03 .movie div:nth-child(1) img{
max-width: 490px; margin-bottom: 5%
}
#c03 .movie div:nth-child(2){
margin:0 auto
}
	
	
	
#c04{
margin-bottom: 15%; margin-top: 10%
}
#c04 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
	
#c04 .gallery01{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery01 div:nth-child(1){
width: 40%; margin:0 auto
}
#c04 .gallery01 div:nth-child(2){
width: 50%; margin:0 auto; padding-top: 15%
}	
#c04 .gallery01 p{
line-height: 350% !important
}	
	
#c04 .gallery02{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery02 div:nth-child(1){
width: 40%; margin:0 auto
}
#c04 .gallery02 div:nth-child(2){
width: 50%; margin:0 auto; 
}	
#c04 .gallery02 p{
line-height: 350% !important
}
#c04 h2 {
    line-height: 170% !important
}


#c04 .gallery03{
padding: 10% 5% 0 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery03 div:nth-child(1){
width: 65%; margin:0 auto
}
#c04 .gallery03 div:nth-child(2){
width: 25%; margin: 0 auto; padding: 19% 5% 0;
}	
#c04 .gallery03 p{
line-height: 350% !important
}	
	
#c04 .gallery04{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery04 div:nth-child(1){
width: 60%; margin:0 auto
}
#c04 .gallery04 div:nth-child(2){
width: 30%; margin:0 auto; 
}	
#c04 .gallery04 p{
line-height: 350% !important
}
	
#c04 .gallery05{
padding: 10% 5% 0; display: flex;flex-wrap: wrap; margin-top:-15%
}
#c04 .gallery05 div:nth-child(1){
width: 45%; margin:0 auto
}
#c04 .gallery05 div:nth-child(2){
width: 45%; margin:0 auto; padding-top: 25%;
}	
#c04 .gallery05 p{
line-height: 350% !important
}	
	
#c04 .gallery06{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery06 div:nth-child(1){
    width: 40%; margin:0 0 0 20%;
}
#c04 .gallery06 div:nth-child(2){
width: 40%; margin:0 auto; 
}	
#c04 .gallery06 p{
line-height: 350% !important
}

#c04 .gallery07{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery07 div:nth-child(1){
width: 60%; margin:0 auto
}
#c04 .gallery07 div:nth-child(2){
width: 30%; margin:0 auto; padding-top: 15%;
}	
#c04 .gallery07 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{
margin-bottom: 15%
}
#c02 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
#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: 375px; margin-bottom: 5%
}
#c02 .project div:nth-child(2){
max-width: 900px; margin:0 auto
}
#c02 .project div:nth-child(3) {
    max-width: 900px;
    margin: 0 auto;
}
	
	
#c03{
margin-bottom: 15% 
}
#c03 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
#c03 .movie{
padding:10% 5% 15%
}
#c03 .movie div:nth-child(1){
text-align: center;
}
#c03 .movie div:nth-child(1) p{
text-align: left; margin-bottom: 10%
}
#c03 .movie div:nth-child(1) img{
max-width: 490px; margin-bottom: 5%
}
#c03 .movie div:nth-child(2){
margin:0 auto
}
	
	
	
#c04{
margin-bottom: 15%; margin-top: 10%
}
#c04 .ttl{
padding: 30px 5%; border-bottom:1px solid #cfcfcf
}
	
#c04 .gallery01{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery01 div:nth-child(1){
width: 70%; margin:0 auto
}
#c04 .gallery01 div:nth-child(2){
width: 70%; margin:0 auto; padding-top: 5%
}	
#c04 .gallery01 p{
margin-bottom: 5%
}	
	
#c04 .gallery02{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery02 div:nth-child(1){
width: 70%; margin:0 auto; order: 2; padding-top: 5%
}
#c04 .gallery02 div:nth-child(2){
width: 100%; margin:0 auto; order: 1
}	
#c04 .gallery02 p{
margin-bottom: 5%
}
#c04 h2 {
    line-height: 170% !important
}
	
#c04 .gallery03{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery03 div:nth-child(1){
width: 100%; margin:0 auto
}
#c04 .gallery03 div:nth-child(2){
width: 70%; margin:0 auto; padding-top: 5%
}	
#c04 .gallery03 p{
margin-bottom: 5%
}	
	
#c04 .gallery04{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery04 div:nth-child(1){
width: 70%; margin:0 auto; order: 2; padding-top: 5%
}
#c04 .gallery04 div:nth-child(2){
width: 70%; margin:0 auto; order: 1
}	
#c04 .gallery04 p{
margin-bottom: 5%
}
	
#c04 .gallery05{
padding: 10% 5% 0; display: flex;flex-wrap: wrap; 
}
#c04 .gallery05 div:nth-child(1){
width: 70%; margin:0 auto
}
#c04 .gallery05 div:nth-child(2){
width: 70%; margin:0 auto; padding-top: 5%
}	
#c04 .gallery05 p{
margin-bottom: 5%
}	
	
#c04 .gallery06{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery06 div:nth-child(1){
width: 70%; margin:0 auto; order: 2; padding-top: 5%
}
#c04 .gallery06 div:nth-child(2){
width: 100%; margin:0 auto; order: 1
}	
#c04 .gallery06 p{
margin-bottom: 5%
}

#c04 .gallery07{
padding: 10% 5% 0; display: flex;flex-wrap: wrap;
}
#c04 .gallery07 div:nth-child(1){
width: 100%; margin:0 auto
}
#c04 .gallery07 div:nth-child(2){
width: 70%; margin:0 auto; padding-top:5%
}	
#c04 .gallery07 p{
margin-bottom: 5%
}	
	
}