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

/*--------------------
catch
--------------------*/
#catch h2{
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-weight: bold;
letter-spacing: 0.3rem;
}
#catch div p{
text-align: center;
letter-spacing: 0.1rem;
}
/*--------------------
news
--------------------*/
#news{
box-shadow: 0 0 15px 0px #ebebeb;
}
#news h2{
font-family: 'Montserrat', sans-serif;
font-weight: 300;
letter-spacing: 0.2rem;
text-align: center;
color: #005726;
}
#news h2 span{
display: block;
font-weight: bold;
}
#news ul li{
font-family: "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
border-bottom: solid 1px #707070;
}
#news ul li:first-of-type{
padding-top: 0;
}
/*--------------------
concept
--------------------*/
#concept{
background: #FAF8F4;
}
#concept h2{
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.3rem;
font-weight: bold;
color: #005726;
}
#concept p{
line-height: 3.6rem;
}
#concept p span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
#concept a.btn{
color: #fff;
background: #685744;
}
/*--------------------
PLAN
--------------------*/
#plan h2{
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.3rem;
font-weight: bold;
text-align: center;
color: #005726;
}
#plan h2 .storie{
font-weight: 300;
color: #005726;
}
#plan h2 span:last-of-type{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
color: #474645;
}
#plan ul{
margin-bottom: 40px;
}
#plan li:last-of-type{
margin-bottom: 0px;
}
/*--------------------
proposal
--------------------*/
#proposal{
background-color: #FAF8F4;
}
#proposal .logo{
display: block;
margin: 0 auto;
}
#proposal h2{
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.3rem;
font-weight: bold;
text-align: center;
color: #005726;
}
#proposal h3{
text-align: center;
letter-spacing: 0.2rem;
font-weight: 500;
}
#proposal ul li{
position: relative;
background-color: #111;
border-radius: 50%;
}
#proposal ul li img{
border-radius: 50%;
opacity: 0.5;
}
#proposal ul li h4{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
font-weight: 500;
color: #fff;
width: 100%;
text-align: center;
}
#proposal p{
text-align: center;
letter-spacing: 0.2rem;
line-height: 3em;
}
/*--------------------
professionalism
--------------------*/
#professionalism{
background: url("../images/professionalism.jpg"); 
background-size: cover;
background-repeat: no-repeat;
}
#professionalism h2{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
letter-spacing: 0.3rem;
}
#professionalism h2 span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
#professionalism ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#professionalism ul li{
text-align: center;
font-weight: bold;
border: solid 1px #fff;
}
#professionalism ul li a{
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
/*--------------------
spec
--------------------*/
#spec h2{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-align: center;
color: #005726;
letter-spacing: 0.3rem;
}
#spec h2 span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
color: #474645;
}
#spec p{
text-align: center;
letter-spacing: 0.2rem;
line-height: 2em;
}
#spec .spec-tab{
border: solid 1px #999;
}
#spec .spec-tab li{
text-align: center;
}
#spec .spec-tab li:last-of-type{
border-right: none;
}
#spec .spec-tab li:hover{
background: #FAF8F4;
}
#spec .spec-tab li a{
display: block;
}
#spec .slider{
overflow: hidden;
}
/*--------------------
flow
--------------------*/
#flow{
background: #FAF8F4;
}
#flow h2{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-align: center;
color: #005726;
}
#flow h2 span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
color: #474645;
}
#flow p{
text-align: center;
line-height: 3.6rem;
}
#flow p span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
line-height: 5.5rem;
letter-spacing: 0.3rem;
}
#flow a.btn{
color: #fff;
background: #685744;
margin: 0 auto;
}
/*--------------------
qa
--------------------*/
#qa{
position: relative;
background: url("../images/qa.jpg");
}
#qa h2{
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
-weblit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
letter-spacing: 0.3rem;
}
#qa h2 span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
/*------------------
#works
------------------*/
#works h2{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-align: center;
color: #005726;
letter-spacing: 0.3rem;
}
#works h2 span{
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
color: #474645;
}
#works > p{
line-height: 3.0rem;
letter-spacing: 0.2rem;
}
#works li h5{
text-align: center;
font-weight: 500;
}
#works li p{
letter-spacing: 0.1rem;
line-height: 1.8em;
}
#works > p{
line-height: 3.0rem;
text-align: center;
}


@media (max-width: 560px){
/*--------------------
hero
--------------------*/
.hero{
margin-top: 65px;
}
/*--------------------
catch
--------------------*/
#catch{
padding-bottom: 60px;
}
#catch h2{
font-size: 2.5rem;
padding-bottom: 20px;
}
#catch div p{
font-size: 1.4rem;
line-height: 4.2rem;
padding-bottom: 30px;
}
/*--------------------
news
--------------------*/
#news{
padding: 40px 20px;
}
#news h2{
font-size: 2.6rem;
padding-bottom: 30px;
}
#news h2 span{
font-size: 4.2rem;
}
#news ul li{
font-size: 1.4rem;
padding: 10px;
}
#news ul li time{
display: block;
padding-bottom: 5px;
}
/*--------------------
concept
--------------------*/
#concept{
margin: 40px 0;
}
#concept div{
padding: 40px 20px;
}
#concept h2{
font-size: 3.6rem;	
padding-bottom: 10px;
}
#concept p{
font-size: 1.4rem;	
padding-bottom: 30px;
}
#concept p span{
font-size: 2.0rem;
padding-bottom: 10px;
line-height: 4.0rem;
letter-spacing: 0.2rem;
}
#concept a.btn{
font-size: 1.6rem;
margin: 0 auto;
}
/*--------------------
PLAN
--------------------*/
#plan{
padding-bottom: 80px;
}
#plan .plan-img{
padding-bottom: 40px;
}
#plan h2{
font-size: 3.6rem;
}
#plan h2 .storie{
display: block;
font-size: 2.6rem;
}
#plan h2 span:last-of-type{
font-size: 2.0rem;
padding: 20px 0 40px;
}
#plan h3 span{
display: block;
font-size: 2.5rem;
font-weight: bold;
}
#plan ul{
margin-bottom: 40px;
}
#plan li{
margin-bottom: 20px;
}	
/*--------------------
proposal
--------------------*/
#proposal{
padding: 40px 0;
}
#proposal .logo{
width: 40%;
padding-bottom: 40px;
}
#proposal h2{
font-size: 3.6rem;
margin-bottom: 10px;
}
#proposal h3{
font-size: 2.0rem;
padding-bottom: 60px;
}
#proposal ul{
padding-bottom: 30px;
}
#proposal ul li{
width: 80%;
margin: 0 auto 20px;;
}
#proposal ul li img{
border-radius: 50%;
}
#proposal ul li h4{
font-size: 2.4rem;
}
#proposal p{
font-size: 1.4rem;
}
/*--------------------
professionalism
--------------------*/
#professionalism{
padding: 40px 0;
}
#professionalism h2{
font-size: 2.2rem;
}
#professionalism h2 span{
font-size: 1.8rem;
padding: 10px 0 40px;
}
#professionalism ul li{
margin: 0 3% 20px 0;
width: 44%;
}
#professionalism ul li a{
height: 60px;
width: auto;
font-size: 1.5rem;
}
#professionalism ul li:nth-child(even){
margin-right: 0;
}
/*--------------------
spec
--------------------*/
#spec{
padding: 40px 0;
}
#spec h2{
font-size: 3.6rem;
}
#spec h2 span{
font-size: 1.8rem;
padding: 10px 0 20px;
}
#spec p{
font-size: 1.4rem;
padding-bottom: 20px;
}
#spec .spec-tab{
margin-bottom: 20px;
}
#spec .spec-tab li{
border-bottom: solid 1px #999;
font-size: 1.2rem;
padding: 15px 0;
}
#spec .spec-tab li:last-of-type{
border-bottom: none;
}
/*--------------------
flow
--------------------*/
#flow div{
padding: 50px 5%;;
}
#flow h2{
font-size: 3.6rem;
}
#flow h2 span{
font-size: 1.8rem;
padding: 20px 0;
}
#flow p{
font-size: 1.4rem;	
padding-bottom: 30px;
}
#flow p span{
font-size: 3.5rem;
padding-bottom: 20px;
}
#flow a.btn{
font-size: 1.6rem;
}
/*--------------------
qa
--------------------*/
#qa{
height: 200px;
margin: 40px 0;
background-size: cover;
background-repeat: no-repeat;
}
#qa h2{
top: 55%;
font-size: 4.6rem;
}
#qa h2 span{
font-size: 1.8rem;
padding: 10px 0 20px;
}
/*------------------
#works
------------------*/
#works h2{
font-size: 3.6rem;
}
#works h2 span{
font-size: 1.8rem;
padding: 10px 0 20px;
}
#works > p{
font-size: 1.4rem;
padding-bottom: 20px;
}
#works li{
padding-bottom: 30px;
}
#works li:last-of-type{
padding-bottom: 0;
}
#works li img{
padding-bottom: 10px;
}
#works li h5{
padding-bottom: 10px;
}
#works li p{
font-size: 1.4rem;
}	
}


@media (min-width: 561px){
.sp{
display: none;
}
#works li:nth-child(1){
transition-delay: .3s;
}
#works li:nth-child(2){
transition-delay: .6s;
}
#works li:nth-child(3){
transition-delay: .9s;
}
}


@media (min-width: 561px) and (max-width: 1024px){
/*--------------------
hero
--------------------*/
.hero{
margin-top: 100px;
}
/*--------------------
catch
--------------------*/
#catch{
padding-bottom: 60px;
}
#catch h2{
font-size: 40px;
font-size: 4rem;
padding-bottom: 80px;
}
#catch div{
display: flex;
justify-content: space-between;
align-items: center;
}
#catch div p{
width: 55%;
font-size: 16px;
font-size: 1.6rem;
line-height: 5.2rem;
}
#catch div img{
width: 45%;
transition-delay: .3s;
}	
/*--------------------
news
--------------------*/
#news{
padding: 40px 40px 40px 0;
}
#news div{
display: flex;
justify-content: space-between;
align-items: center;
}
#news h2{
width: 40%;
font-size: 36px;
font-size: 3.6rem;
}
#news h2 span{
font-size: 56px;
font-size: 5.6rem;
}
#news ul{
transition-delay: .3s;
width: 60%;
}
#news ul li:nth-child(2){
transition-delay: .3s;
}
#news ul li:nth-child(3){
transition-delay: .6s;
}
#news ul li{
font-size: 16px;
font-size: 1.6rem;
padding: 20px 0;
}
#news ul li time{
padding: 0 50px 0 20px;;
}
/*--------------------
concept
--------------------*/
#concept{
margin: 80px 0;
}
#concept div{
padding: 50px 0 50px 40px;
}
#concept h2{
font-size: 56px;
font-size: 5.6rem;	
padding-bottom: 20px;
}
#concept p{
font-size: 16px;
font-size: 1.6rem;	
padding-bottom: 30px;
}
#concept p span{
font-size: 35px;
font-size: 3.5rem;
padding-bottom: 20px;
line-height: 5.5rem;
letter-spacing: 0.3rem;
}
#concept a.btn{
font-size: 18px;
font-size: 1.8rem;
}
/*--------------------
PLAN
--------------------*/
#plan{
padding-bottom: 80px;
}
#plan .plan-img{
display: flex;
padding-bottom: 120px;
}
#plan .plan-img img{
width: 50%;
}
#plan h2{
font-size: 56px;
font-size: 5.6rem;
}
#plan h2 .storie{
font-size: 36px;
font-size: 3.6rem;
padding-right: 20px;
}
#plan h2 span:last-of-type{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0 40px;
}
#plan ul{
margin-bottom: 40px;
}
#plan li{
margin-bottom: 20px;
}	
/*--------------------
proposal
--------------------*/
#proposal{
padding: 80px 0;
}
#proposal .logo{
width: 20%;
padding-bottom: 40px;
}
#proposal h2{
font-size: 56px;
font-size: 5.6rem;
margin-bottom: 20px;
}
#proposal h3{
font-size: 40px;
font-size: 4rem;
padding-bottom: 60px;
}
#proposal ul{
display: flex;
justify-content: center;
padding-bottom: 60px;
}
#proposal ul li{
width: 25%;
margin-right: 40px;
}
#proposal ul li:nth-child(1){
transition-delay: .3s;
}
#proposal ul li:nth-child(2){
transition-delay: .6s;
}
#proposal ul li:nth-child(3){
transition-delay: .9s;
}
#proposal ul li:last-of-type{
margin-right: 0px;
}
#proposal ul li img{
border-radius: 50%;
}
#proposal ul li h4{
font-size: 22px;
font-size: 2.2rem;
}
/*--------------------
professionalism
--------------------*/
#professionalism{
padding: 60px 0;
}
#professionalism h2{
font-size: 56px;
font-size: 5.6rem;
}
#professionalism h2 span{
font-size: 24px;
font-size: 2.4rem;
padding:20px 0 80px;
}
#professionalism ul li{
margin: 0 3% 50px 0;
width: 28%;
}
#professionalism ul li:nth-of-type(3n){
margin-right: 0;
}
#professionalism ul li a{
height: 70px;
width: auto;
font-size: 20px;
font-size: 2.0rem;
}
/*--------------------
spec
--------------------*/
#spec{
padding: 80px 0;
}
#spec h2{
font-size: 56px;
font-size: 5.6rem;
}
#spec h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0 20px;
}
#spec p{
padding-bottom: 60px;
}
#spec .spec-tab{
display: flex;
margin-bottom: 20px;
}
#spec .spec-tab li{
font-size: 12px;
font-size: 1.2rem;
padding: 15px 0;
width: 33.3%;
border-right: solid 1px #999;
}
/*--------------------
flow
--------------------*/
#flow{
display: flex;
justify-content: center;
}
#flow img{
width: 50%;
}
#flow div{
padding: 50px 5%;;
width: 50%;
}
#flow h2{
font-size: 56px;
font-size: 5.6rem;
}
#flow h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0;
}
#flow p{
font-size: 16px;
font-size: 1.6rem;	
padding-bottom: 30px;
}
#flow p span{
font-size: 35px;
font-size: 3.5rem;
padding-bottom: 20px;
}
#flow a.btn{
font-size: 18px;
font-size: 1.8rem;
}
/*--------------------
qa
--------------------*/
#qa{
height: 300px;
margin: 80px 0;
}
#qa h2{
top: 55%;
font-size: 56px;
font-size: 5.6rem;
}
#qa h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0 40px;
}	

/*------------------
#works
------------------*/
#works h2{
font-size: 56px;
font-size: 5.6rem;
}
#works h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0;
}
#works > p{
font-size: 16px;
font-size: 1.6rem;
padding-bottom: 50px;
}
#works ul{
display: flex;
justify-content: center;
}
#works img{
padding-bottom: 10px;
}
#works li{
width: 40%;
padding-right: 30px;
}
#works li:last-of-type{
padding-right: 0px;
}
#works li h5{
padding-bottom: 10px;
}
#works li p{
font-size: 14px;
font-size: 1.4rem;
}
}


@media (min-width: 1025px){
/*--------------------
catch
--------------------*/
#catch{
padding-bottom: 60px;
}
#catch h2{
font-size: 40px;
font-size: 4rem;
padding-bottom: 80px;
}
#catch div{
display: flex;
justify-content: space-between;
}
#catch div p{
width: 50%;
font-size: 16px;
font-size: 1.6rem;
line-height: 5.2rem;
}
#catch div img{
width: 50%;
transition-delay: .3s;
}	
/*--------------------
news
--------------------*/
#news{
padding: 40px 40px 40px 0;
}
#news div{
display: flex;
justify-content: space-between;
align-items: center;
}
#news h2{
width: 40%;
font-size: 36px;
font-size: 3.6rem;
}
#news h2 span{
font-size: 56px;
font-size: 5.6rem;
}
#news ul{
transition-delay: .3s;
width: 60%;
}
#news ul li:nth-child(2){
transition-delay: .3s;
}
#news ul li:nth-child(3){
transition-delay: .6s;
}
#news ul li{
font-size: 16px;
font-size: 1.6rem;
padding: 20px 0;
}
#news ul li time{
padding: 0 50px 0 20px;;
}
/*--------------------
concept
--------------------*/
#concept{
display: flex;
justify-content: center;
margin: 80px 0;
}
#concept img{
width: 50%;
}
#concept div{
padding: 50px 0 50px 40px;
width: 50%;
}
#concept h2{
font-size: 56px;
font-size: 5.6rem;	
padding-bottom: 20px;
}
#concept p{
font-size: 16px;
font-size: 1.6rem;	
padding-bottom: 30px;
}
#concept p span{
font-size: 35px;
font-size: 3.5rem;
padding-bottom: 20px;
line-height: 5.5rem;
letter-spacing: 0.3rem;
}
#concept a.btn{
font-size: 18px;
font-size: 1.8rem;
}
/*--------------------
PLAN
--------------------*/
#plan{
padding-bottom: 80px;
}
#plan .plan-img{
display: flex;
padding-bottom: 120px;
}
#plan .plan-img img{
width: 50%;
}
#plan h2{
font-size: 56px;
font-size: 5.6rem;
}
#plan h2 .storie{
font-size: 36px;
font-size: 3.6rem;
padding-right: 20px;
}
#plan h2 span:last-of-type{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0 40px;
}
#plan ul{
margin-bottom: 40px;
}
#plan li{
margin-bottom: 100px;
}	
/*--------------------
proposal
--------------------*/
#proposal{
padding: 80px 0;
}
#proposal .logo{
width: 20%;
padding-bottom: 40px;
}
#proposal h2{
font-size: 56px;
font-size: 5.6rem;
margin-bottom: 30px;
}
#proposal h3{
font-size: 40px;
font-size: 4rem;
padding-bottom: 60px;
}
#proposal ul{
display: flex;
justify-content: center;
padding-bottom: 60px;
}
#proposal ul li{
width: 25%;
margin-right: 40px;
}
#proposal ul li:nth-child(1){
transition-delay: .3s;
}
#proposal ul li:nth-child(2){
transition-delay: .6s;
}
#proposal ul li:nth-child(3){
transition-delay: .9s;
}
#proposal ul li:last-of-type{
margin-right: 0px;
}
#proposal ul li img{
border-radius: 50%;
}
#proposal ul li h4{
font-size: 28px;
font-size: 2.8rem;
}
/*--------------------
professionalism
--------------------*/
#professionalism{
padding: 60px 0;
}
#professionalism h2{
font-size: 56px;
font-size: 5.6rem;
}
#professionalism h2 span{
font-size: 24px;
font-size: 2.4rem;
padding:20px 0 80px;
}
#professionalism ul li{
margin: 0 3% 50px 0;
width:25%;
}
#professionalism ul li a{
height: 90px;
width: auto;
font-size: 22px;
font-size: 2.2rem;
}
#professionalism ul li a:hover{
background: rgba(255,255,255,0.2);
transition: .3s;
}
/*--------------------
spec
--------------------*/
#spec{
padding: 80px 0;
}
#spec h2{
font-size: 56px;
font-size: 5.6rem;
}
#spec h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0 20px;
}
#spec p{
padding-bottom: 60px;
}
#spec .spec-tab{
display: flex;
margin-bottom: 20px;
}
#spec .spec-tab li{
font-size: 12px;
font-size: 1.2rem;
padding: 15px 0;
width: 33.3%;
border-right: solid 1px #999;
}
/*--------------------
flow
--------------------*/
#flow{
display: flex;
justify-content: center;
}
#flow img{
width: 50%;
}
#flow div{
padding: 50px 5%;;
width: 50%;
}
#flow h2{
font-size: 56px;
font-size: 5.6rem;
}
#flow h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0;
}
#flow p{
font-size: 16px;
font-size: 1.6rem;	
padding-bottom: 30px;
}
#flow p span{
font-size: 35px;
font-size: 3.5rem;
padding-bottom: 20px;
}
#flow a.btn{
font-size: 18px;
font-size: 1.8rem;
}
/*--------------------
qa
--------------------*/
#qa{
height: 300px;
margin: 80px 0;
}
#qa h2{
top: 55%;
font-size: 56px;
font-size: 5.6rem;
}
#qa h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0 40px;
}	
/*------------------
#works
------------------*/
#works h2{
font-size: 56px;
font-size: 5.6rem;
}
#works h2 span{
font-size: 24px;
font-size: 2.4rem;
padding: 20px 0;
}
#works > p{
font-size: 16px;
font-size: 1.6rem;
padding-bottom: 50px;
}
#works ul{
display: flex;
justify-content: center;
}
#works img{
padding-bottom: 10px;
}
#works li{
width: 30%;
padding-right: 30px;
}
#works li:last-of-type{
padding-right: 0px;
}
#works li h5{
padding-bottom: 10px;
}
#works li p{
font-size: 14px;
font-size: 1.4rem;
}
}