@charset "utf-8";
/* CSS Document */
#appeal-wrapper section{
width: 100%;
max-width:1200px;
margin: 0 auto;
padding: 60px 20px;
}

#appeal-wrapper section h2{
position: relative;
font-size:45px;
margin:0 auto 60px;
padding-bottom: 50px;
text-align:center
}
#appeal-wrapper section h2:after{
position:absolute;
content:"";
width: 100px;
height: 5px;
left: 50%;
bottom:0;
transform: translateX(-50%);
background:#333;
}
#appeal-wrapper section p{
font-size:16px;
line-height: 1.6
}
#appeal-wrapper .weak {
font-size:0.86em;
font-weight:normal;
}

#appeal-wrapper #mv-wrapper{
width: 100%;
}
#appeal-wrapper #mv-wrapper img{
display: block;
width: 100%;
height: auto
}
#appeal-wrapper section#about{
width: 100%;
max-width:100%;
padding: 60px 0;
}
#appeal-wrapper #about-wrapper .about-box{
position: relative;
display: flex;
}
#appeal-wrapper #about-wrapper .about-text{
padding: 30px 0 0 30px;
width: 48vw;
max-width: 600px;
margin: 0
}
#appeal-wrapper #about-wrapper .about-img{
 min-width: 50vw;
 font-size: 0;
 overflow: hidden;
 position: relative;
 background: url( "../design/img/about_bg.jpg") no-repeat right center;
 background-size: auto 100%;
 background-color: #e9e9e9;
 z-index: 1;
 margin: 0
}

#appeal-wrapper #about-wrapper .about-img:before {
 content: "";
 display: block;
 padding-top: 400px;
}

#appeal-wrapper #strengths-wrapper{
background:#333;
}

#appeal-wrapper #strengths h2{
color: #fff
}

#appeal-wrapper #strengths h2:after{
background: #fff
}

#appeal-wrapper #strengths ul{
display: flex;
justify-content: space-between;
}

#appeal-wrapper #strengths li{
width: 30%;
background: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
margin: 0 10px;
}
#appeal-wrapper #strengths li img{
width: 100%;
height: auto;
margin-bottom: 5px
}
#appeal-wrapper #strengths li h3{
font-size:18px;
margin: 0 auto 15px;
padding-bottom: 15px;
width:100%
}
#appeal-wrapper #strengths li div{
margin-top: auto;
width:100%
}
#appeal-wrapper #work{
counter-reset:work;
padding-bottom: 0
}
#appeal-wrapper .work-detail{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom:120px;
}
#appeal-wrapper .work-detail.work-detail-even{
flex-direction: row-reverse
}
#appeal-wrapper .work-detail .work-text{
width: 50%;
padding-right: 50px;
}
#appeal-wrapper .work-detail .work-img{
width: 50%
}
#appeal-wrapper .work-detail .work-img img{
width: 100%;
max-width: 520px;
height: auto
}
#appeal-wrapper .work-detail .work-text h3{
margin-bottom: 40px;
margin-top: 0;
display: flex;
justify-content: flex-start;
align-items: center
}
#appeal-wrapper .work-detail .work-text h3 span.work-number{
display: block;
position: relative;
 width: 100px;
 height: 74px;
}
#appeal-wrapper .work-detail .work-text h3 span.work-number:before{
position: absolute;
font-size:70px;
 width: 100%;
 height: 100%;
 counter-increment: work;
 content: "0" counter(work);
 top: 0;
 left: 0;
color:#333;
line-height: 1
}
#appeal-wrapper .work-detail .work-text h3 span.work-title{
 font-size:24px;
 color: #333;
 font-weight: bold;
flex: 1
}
#appeal-wrapper .work-detail .work-text p{
margin-bottom: 10px;
}
#appeal-wrapper .work-detail .work-text h3 + p{
 font-size:24px !important;
 font-weight: bold;
 margin-bottom: 40px;
}
#appeal-wrapper #voice-wrapper{
background:#ccc;
}
#appeal-wrapper #voice h2 + p{
font-size:30px;
font-weight: bold;
text-align: center;
margin-bottom: 100px;
}
#appeal-wrapper #voice ul{
width: 100%;
display: flex;
justify-content:space-between;
align-items: center;
flex-wrap: wrap
}
#appeal-wrapper #voice ul li{
position: relative;
font-size:18px;
width:40%;
margin:0 5%;
margin-bottom: 50px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
padding: 40px;
}
#appeal-wrapper #voice ul li:after {
position: absolute;
content: "";
width: 41px;
height: 28px;
background: url("../img/callout.png") bottom center;
bottom: -22px;
right: 20px;
}

#appeal-wrapper #voice ul li:nth-child(even){
margin-top: 50px;
margin-bottom: 0
}

#appeal-wrapper #gallery{
width: 100%;
padding: 50px 0;
background: url("../design/img/gallery_bg.jpg") no-repeat center;
background-size: cover
}

#appeal-wrapper #gallery  li {
margin: 0 30px;
}
#appeal-wrapper #gallery li img{
width: 100%
	}
#appeal-wrapper #data ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between
}

#appeal-wrapper #data ul li{
width: 25%;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 30px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

#appeal-wrapper #data li > span{
position: relative;
width: 180px;
height: 180px;
border-radius: 90px;
background: #f5f5f5;
display: flex;
justify-content: center;
margin-bottom: 10px;
}

#appeal-wrapper #data li > span img {
width: 50%;
height:auto;
filter: invert(14%) sepia(0%) saturate(1781%) hue-rotate(155deg) brightness(109%) contrast(86%);
}

#appeal-wrapper #data li dl{
font-weight: bold;
text-align: center;
margin: 0 auto
}

#appeal-wrapper #data li dt{
font-size:24px;
margin: 0 auto 
}
#appeal-wrapper #data li dd{
font-size:24px;
margin: 0 auto
}
#appeal-wrapper #data li dd span{
font-size:74px;
}

#appeal-wrapper #data li#danjo dd span,
#appeal-wrapper #data li#gakureki dd span{
font-size:50px;
}

#appeal-wrapper #data li#danjo dd:last-of-type,
#appeal-wrapper #data li#gakureki dd:last-of-type{
margin-top: -10px;
}

#appeal-wrapper #company table {
max-width:900px;
}

#appeal-wrapper #flow-wrapper{
background:#ccc;
counter-reset: flow;
margin-bottom: 30px
}

#appeal-wrapper #flow ul{
display: flex;
justify-content: space-between
}

#appeal-wrapper #flow ul li{
position: relative;
width: 30%;
margin: 0 auto;
border-radius: 10px;
border: solid 3px #333;
padding:40px 20px 20px;
background: #fff
}

#appeal-wrapper #flow ul li span.step{
position:absolute;
content:"";
width: 60px;
height: 60px;
top:-30px;
left: 50%;
border-radius: 30px;
background: #333;
transform: translateX(-50%)
}

#appeal-wrapper #flow ul li span.step:before{
position: absolute;
content:"STEP";
color:#fff;
font-weight: bold;
width: 30px;
height: 15px;
font-size: 12px;
top:7px;
left: 50%;
transform: translateX(-50%)
}

#appeal-wrapper #flow ul li span.step:after{
position: absolute;
width: 30px;
height: 30px;
top:17px;
left: 50%;
transform: translateX(-50%);
text-align: center;
counter-increment: flow;
content:counter(flow);
font-size:30px;
color: #fff;
font-weight: bold;
}

#appeal-wrapper #flow ul li:after{
position: absolute;
content:"";
background:#333;
height: 60px;
width: 20px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
top:50%;
margin-top: -30px;
right:-10%
}

#appeal-wrapper #flow ul li:last-of-type:after{
display: none
}

#appeal-wrapper #flow h4{
text-align: center;
font-size:24px;
margin-bottom: 30px;
width: 100%;
line-height: 1
}

#appeal-wrapper #flow h4 span{
font-size:18px;	
line-height: 1
}

#appeal-wrapper #close-btn{
display: block;
border:none;
border-radius:5px;
background: #333;
color:#fff;
font-size:20px;
margin: 50px auto;
padding: 10px 15px;
cursor: pointer
}

#appeal-wrapper #close-btn:hover{
background: #333
}

@media screen and (max-width:1000px) {
#appeal-wrapper section{
padding: 50px 15px;
}

#appeal-wrapper section h2{
position: relative;
font-size:28px;
margin-bottom: 50px;
padding-bottom: 40px;
}

#appeal-wrapper section h2:after{
width: 80px;
height: 4px;
}

#appeal-wrapper section p{
font-size:14px;
}

#appeal-wrapper section#about{
padding: 50px 15px;
}

#appeal-wrapper #about-wrapper .about-box{
flex-direction: column-reverse
}

#appeal-wrapper #about-wrapper .about-text{
padding:0;
width: 100%;
max-width:100%;
margin-bottom: 20px;
}

#appeal-wrapper #about-wrapper .about-img{
width: 100%;
min-width: auto;
background: url( "../design/img/about_bg.jpg") no-repeat right center;
background-size:100% auto;
}
#appeal-wrapper #about-wrapper .about-img:before {
padding-top: 40.715883668%;
}

#appeal-wrapper #strengths ul{
display:block;
}

#appeal-wrapper #strengths li{
width: 100%;
max-width: 400px;
padding: 20px;
margin:0 auto 30px;
}

#appeal-wrapper .work-detail{
display: block;
margin-bottom:50px;
}

#appeal-wrapper .work-detail .work-text{
width: 100%;
padding-right:0;
margin: 0 auto 50px
}

#appeal-wrapper .work-detail .work-img{
width: 100%;
max-width: 520px;
margin: 0 auto
}

#appeal-wrapper .work-detail .work-text h3{
 margin-bottom: 50px;
}

#appeal-wrapper .work-detail .work-text h3 span.work-number{
 width: 80px;
 height: 60px;
}

#appeal-wrapper .work-detail .work-text h3 span.work-number:before{
font-size:56px;
}

#appeal-wrapper .work-detail .work-text h3 span.work-title{
 font-size:18px;
}

#appeal-wrapper .work-detail .work-text h3 + p{
 font-size:18px !important;
 margin-bottom: 30px;
}

#appeal-wrapper #data ul{
width: 100%;
max-width: 500px;
margin: 0 auto;
}

#appeal-wrapper #data ul li{
width: 50%;
}

#appeal-wrapper #data li dt{
font-size:20px;
margin: 0 auto 
}
#appeal-wrapper #data li dd{
font-size:20px;
padding-left: 10px
}
}

@media screen and (max-width:767px) {	
#appeal-wrapper #voice h2 + p{
font-size:24px;
margin-bottom: 60px;
}

#appeal-wrapper #voice ul{
display:block;
}

#appeal-wrapper #voice ul li{
font-size:14px;
width:80%;
max-width: 400px;
margin:0 auto;
padding: 30px;
}

#appeal-wrapper #voice ul li:nth-child(odd){
margin-left:20px;
margin-top: 50px;
}	

#appeal-wrapper #voice ul li:nth-child(even){
margin-right:20px;
margin-top: 50px;
}	
	
#appeal-wrapper #voice ul li:nth-child(odd):after{
 background: url("../img/callout.png") bottom center;
 right:auto;
left:20px; 
}

#appeal-wrapper #gallery li {
 margin: 0 10px;
}

#appeal-wrapper #flow ul{
display:block;
}

#appeal-wrapper #flow ul li{
width: 100%;
max-width: 400px;
padding:40px 10px 10px;
margin-bottom: 90px;
}

#appeal-wrapper #flow ul li:last-of-type{
margin-bottom: 0;
}

#appeal-wrapper #flow ul li:after{
height: 60px;
width: 60px;
clip-path: polygon(0 0, 100% 0, 50% 50%);
top:auto;
bottom:-80px;
right:auto;
left: 50%;
transform: translateX(-50%)
}

#appeal-wrapper #flow h4{
font-size:18px;
}

#appeal-wrapper #flow h4 span{
font-size:14px;	
line-height: 1
}
}

@media screen and (max-width:450px) {
#appeal-wrapper #gallery  li {
margin: 0 10px;
}
#appeal-wrapper #data ul li{
width: 100%;
margin: 0 auto 40px
}
}