@charset "UTF-8";
html {
    font-size: 100%;
}
body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 
    line-height: 1.7; 
    color: 
}


a {
    text-decoration: none;
    font-family: Geneva;
}
img {
    max-width: 100%;
    border-style:none;
    }
    
.section-wrapper{
    padding: 100px 0 70px;
  }
  .section-title{
    max-width: 260px;
    color: #0a123a;
    font-size: 3rem;
    margin:0 auto 100px;
    padding: 0 20px;
    width: 500px;
    height: 5px;
    margin-left: 60px;
    font-family: 'Red Rose', cursive;
  }
  
  .section-inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 50px;
  }
 
/*header*/
.logo {
    width: 130px;
    margin-top: 10px;
}
/*nav---*/
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 25px;
    list-style: none;
}
.main-nav li {
    margin-right: 36px;
}
.main-nav a {
    color: #87888e;
    font-family: 'Red Rose', cursive;
}
.page-header {
    display: flex;
    justify-content: space-between;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}
/*大きな背景画像*/
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    
}
#home {
    background-image: url(../images/big-bg.jpg);
    min-height: 100vh;
    width: 100%;

}
.page-title {
    color: #323443;
    font-family: 'Red Rose', cursive;
    font-size: 5rem;
    margin-left: 70px;
    margin-top: 300px;
    font-weight: 100;
}
/*main*/
.h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;

}
.title-ja {
    font-size: 2rem;
    text-align: center;
    margin-top: 40px;
    font-family: Noto serif JP;
    color:#87888e;
}

.concept-lead {
    text-align: center;
    font-size: 4.5rem;
    margin-top: 20px;
    margin-bottom: 60px;
    
    
    color:#87888e;
    font-family: 'Dancing Script', cursive;
    font-style: italic;
    

  }
.section-title {
    font-size: 2rem;
    margin-top: 100px;   
}
/*concept*/
.concept-wrapper {
    margin: 80px;   
}
.concept-content{
    display: flex;
    justify-content: space-between;
    align-items: center;  
}
.concept-text{
    max-width: 450px;
    
    text-align: justify;
    font-size: 1rem;
    font-style: ;
    color:#87888e;
    padding: ;
    margin-right: 80px;
    margin-bottom: 100px;   
}
.concept-img-wrapper{
    width: 44%;
}

/*profile*/

.profile-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 80px;
}

.profile-text{
    max-width: 440px;
    text-align: justify;
    font-size: 1rem;
    color:#87888e;
}
.profile-img-wrapper{
    width: 44%;
}
/*capres*/
.capres-content{
    display: flex;
    justify-content: space-between;
    margin: 80px;    
}

 
    

.capres-text{
    max-width: 440px;
    text-align: justify;
    font-size: 1rem;
    color:#87888e;
    margin-bottom: 80px;
}
/*button*/

.button {
    font-size: 1.375rem;
    background: #87888e;
    color:#fff;
    border-radius: 5px;
    padding: 15px 32px;
    margin: 100px ;
    margin-left: 140px;
    
}

.button:hover{
    background: #9ba5a0;
    color:#fff;
}
.capres-img-wrapper{
    width: 44%;
    
   
}
/*works*/
.works-content{
    display: flex;
    
    align-items: center;
    margin: 80px;
    
    
}
.works-text-wrapper{
    margin-left: 80px;
}
.works-text{
    max-width: 440px;
    text-align: justify;
    font-size: 1rem;
    font-style: ;
    color:#87888e;

}
.works-title {
    font-size: 1.3rem;
    color:#87888e;
}

.works-img-wrapper{
    width: 44%;
    
}


/*nakano*/
.nakano-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left:80px;
    margin-right: 80px;

}

.nakano-text{
    max-width: 440px;
    text-align: justify;
    font-size: 1rem;
    color:#87888e;
  

}
.nakano-img-wrapper{
    width: 44%;
  
}

/*contact*/
.emailme {
    font-size: 1rem;
    text-align: center;
    color:#87888e;
    margin-top: 10px;
    margin-bottom: 10px;
}
.mail-address {
    font-size: 1rem;
    text-align: center;
    color:#87888e;
    margin-bottom: 40px;
}

/*about page*/
.about-content{
   
    align-items: center;
    margin:80px;

}
.about-text-wrapper{

}
.about-text{
    
    
    text-align: justify;
    font-size: 1rem;
    
    color:#87888e;
    margin: 80px ;

}
.about-img-wrapper{
    width: 44%;
  
}




/*footer*/
footer {
    background: #87888e;
    text-align: center;
    padding: 26px 0;
} 
footer p {
    color: #fff;
    font-size: 0.875rem;
}


/*モバイル版-----------------------------------------*/
@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;
        
    }
    .main-nav {
    font-size: 0.8rem;
    margin-top: 5px;
}
    .main-nav li {
        margin: 0 5px;
    }
    .home-content {
        margin-top: 10px;
    }
   
    .page-header {
        flex-direction: column;
        align-items: center;
    }
    .h3{
       
        margin-top: 60px;
        margin-bottom: 80px;
        margin-left: 10px;
    }
    /*bg*/

    #home {
        background-image: url(../images/mobile.jpg); {
        
        height: auto;
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        
            }
    
    }
    .section-title{
        size: 1rem;
    }
    .page-title{
        margin-top: 0px;
        margin-left: 5px;
    }

    /*concept*/

    .concept-wrapper{
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        margin-left: 30px;
        margin-right: 10px;
    
    }
    .concept-content{
        margin: 10px 15px;
        flex-direction: column;
        overflow: hidden;
    }
    .concept-text-wrapper{
        text-align: center;
        font-size: 0.8rem;   
    }

    .about-text{
        margin-bottom: 50px;
    }
    .concept-img-wrapper{
        text-align: center;
    }
    .button {
        font-size: 1rem;
        background: #87888e;
        color:#fff;
        border-radius: 5px;
        padding: 15px 32px;
        margin-top: 20px;
        margin-left: 40px;
        margin-bottom: 10px;
    }
    
    .button:hover{
        background: #9ba5a0;
        color:#fff;
    }


    /*about.html*/
    .about-content{
        margin: 10px 15px;
        flex-direction: column;
    }
    .about-text{
        margin:0;
    }



    /*profile*/

    .profile-content{
        margin: 10px 15px;
        flex-direction: column;
    }

    /*capres*/
    .capres-content{
        margin: 10px 15px;
        flex-direction: column;   
    }
    .capres-img-wrapper{
        text-align: center;
        margin-left: 140px;
    }
    
    /*works*/

    .works-content{
        margin: 10px 15px;
        flex-direction: column;
    }
    .works-text-wrapper{
        margin-left: auto;
    }
    .works-img-wrapper{
        text-align : center;
        margin-bottom: 20px;
    }

    /*nakano*/

    .nakano-content{
        margin: 5px 15px;
        flex-direction: column;
    }
    .nakano-img-wrapper{
        margin-top: 20px;  
    }

    /*contact*/

}