@charset "utf-8";
/* レイアウトのためのCSS */

body{
    font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    color: #333;
    font-size:1rem;
    line-height:1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; 
    word-wrap: break-word;
}

@media screen and (max-width:768px) {
body{
    font-size:0.8rem;
    }
}

*{box-sizing: border-box;}

ul{
    margin:0;
    padding: 0;
    list-style: none;
}

a{
    color: #333;
    text-decoration: none;
    outline: none;
}
a:hover {
    opacity: 0.6;
}

img{
    width: 100%;
    height: auto;
}

/* font-family */

#splash-logo,
.top-lead,
h1,
h2,
h3 span,
#g-nav,
#pc-nav,
.openbtn,
#footer{
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.1em;
}

/* splash */
#splash-logo{
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #b38d1b;
}

/* g-nav */
#g-nav.panelactive li:last-child a{
    margin: 30px 0 0 0;
    padding: 10px 20px;
    border: 2px solid #333;
    white-space: nowrap;
}

/*pc-nav*/
#pc-nav span.bgLRextend::before{
    background:#333;
}

@media screen and (max-width:990px) {
    #pc-nav{
        display: none;
    }
}

/* heading */
h1{
    text-transform: uppercase;
    font-size: 1.5rem;
    position: absolute;
    top: 40%;
    left: 5%;
    line-height: 1;
    letter-spacing: 0.2em;
}
@media screen and (max-width:550px) {
    h1{
        font-size:1.2rem;
        top: 32%;
    }
}

h1 a{
    color:#b38d1b;
}
h2{
    font-size: 3rem;
}
h3{
    font-size: 2rem;
}
h4{
    font-size: 1.8rem;
}
@media screen and (max-width:768px) {

    h2{
      font-size:2rem;
    }
    h3{
        font-size: 1.5rem;
    }
    h4{
        font-size: 1rem;
    }
}

/* lead */
.top-lead{
    position: fixed;
    bottom:10%;
    left:5%;
    font-size:2.8rem;
    font-weight: bold;
    line-height: 1.5;
}
.top-lead .sub{
    font-size:1.8rem;
}
.top-lead .sub-rig{
    margin-left: 1rem;
}
.top-lead .sub-lef{
    margin-right: 1rem;
}

@media screen and (max-width:900px) {
    .top-lead{
        display: none;
    }
}

.top-lead br.sponly{
    display: none;
}
@media screen and (max-width:768px) {
    .top-lead br.sponly{
        display: inline-block;
    }
    .top-lead .sub { font-size: 1.1rem; }
    .top-lead .sub-rig,
    .top-lead .sub-lef{
        margin-left: 0;
        margin-right: 0;
    }
}

/* main-area */
#main-area{
    width:90%;
    margin:0 auto;
    padding: 50px 0; 
}

/* greeting */
#greeting{
    text-align: left;
    margin:0 0 400px 0;
}
@media screen and (max-width:768px) {
    #greeting{
        margin:0 0 100px 0;
    }
}

#greeting h2{
    color:#b38d1b;
    margin:0 0 30px 0;
}
#greeting p{
    line-height: 2;
    margin: 0 0 50px 0;
    font-size: 1.2rem;
}
@media screen and (max-width:768px) {
    #greeting p{
        font-size:1rem;
        }
    #greeting p br.pconly{
        display: none;
        }
}

#greeting .content-lead{
    position: relative;
    color:#b38d1b;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 90px 0;
}
@media screen and (max-width:768px) {
    #greeting .content-lead{
        font-size:1rem;
        }
}
#greeting .content-lead::after{
    content:'';
    position: absolute;
    bottom:-30px;
    left: 0;
    background:#b38d1b;
    width:12em;
    height: 3px;
}

/* concept */
#concept{
    margin:0 0 400px 0;
}
@media screen and (max-width:768px) {
    #concept{
        margin: 0 0 100px 0;
    }
}

#concept h2{
    color: #b38d1b;
    text-align: center;
    margin:0 0 30px 0;
}

#concept h3{
    text-align: center;
    margin:0 0 100px 0;
}

#concept .content-box{
    border: 2px solid #b38d1b;
    padding: 60px 60px;
    margin: 0 200px 100px 200px;
}
@media screen and (max-width:1300px) {
    #concept .content-box{
        margin:0 100px 100px 100px;
    }
}
@media screen and (max-width:768px) {
    #concept .content-box{
        padding: 40px 24px;
        margin:0 0 60px 0;   
    }
}

#concept .content-box h4 {
    text-align: center;
    color: #b38d1b;
    position: relative;
    margin-bottom: 40px;
}
#concept .content-box h4::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
    background: #b38d1b;
    width: 4em;
    height: 2px;
}

#concept .content-box .content-lead {
    text-align: center;
    color: #b38d1b;
    font-size: 1.4rem;
    margin-bottom: 40px;
}
@media screen and (max-width:768px) {
    #concept .content-box .content-lead {
        margin-bottom: 24px;
    }
}
#concept .content-box .content-txt {
    font-size: 1.2rem;
    line-height: 2.4rem;
    width: 80%;
    margin: 0 auto;
}
@media screen and (max-width:1300px) {
    #concept .content-box .content-txt {
        width: 100%;
    }
}
@media screen and (max-width:768px) {
    #concept .content-box .content-txt {
        font-size: 1rem;
        line-height: 2rem;
        width: 100%;
    }
}

/* members */
#members{
    margin:0 0 400px 0;
}
@media screen and (max-width:768px) {
    #members{
        margin: 0 0 100px 0;
    }
}
#members h2{
    color: #b38d1b;
    text-align: center;
    margin:0 0 100px 0;
}
@media screen and (max-width:550px) {
    #members h2{
        margin:0 0 50px 0;
    }
}

#members .member-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin:0 60px 300px 60px;
    position: relative;
}
@media screen and (max-width:1300px) {
    #members .member-area{
        display: block;
        margin: 0 0 100px 0;
        position: relative;
    }
}
#members .member-area .img img{
    width: 400px;
    height: auto;
}
@media screen and (max-width:768px) {
    #members .member-area .img img{
        width: 90%;
        height: auto;
    }
}
#members .member-area .content{
    margin-left: 60px;
    background: #fff;
    box-shadow: 0 0 20px #ccc;
    padding: 60px 80px;
    position: relative;
    top: 80px;
}
@media screen and (max-width:768px) {
    #members .member-area .content{
        margin-left: 6%;
        padding: 60px 24px;
    }
}
@media screen and (max-width:1300px) {
    #members .member-area .content{
        top: -60px;
    }
}
#members .member-area::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 8em;
    background: rgba(179, 141, 27, 0.3);
    right: 10%;
    top: 40%;
    z-index: -1;
}
@media screen and (max-width:1300px) {
    #members .member-area::after {
        display: none;
    }
}

#members .member-area .content h4{
    margin-bottom: 24px;
}
#members .member-area .content p.content-txt{
    line-height: 2rem;
    font-size: 1.1rem;
}
#members .btn {
    margin-top: 100px;
    text-align: right;
}
#members .btn a {
    background: #cd1132;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 12px 40px;
    border-radius: 12px;
}
@media screen and (max-width:768px) {
    #members .btn a {
    font-size: 0.8rem;
        padding: 12px;
    }
}

/* works */
#works{
    margin: 0 0 200px 0;
}
@media screen and (max-width:768px) {
    #works{
        margin: 0 0 100px 0;
    }
}
#works h2{
    color: #b38d1b;
    text-align: center;
    margin:0 0 100px 0;
}
@media screen and (max-width:550px) {
    #works h2{
        margin:0 0 50px 0;
    }
}

#works p{
    font-size: 3rem;
    color: #a9a9a9;
    text-align: center;
    margin: 0 0 100px 0;
}
@media screen and (max-width:768px) {
    #works p{
        font-size: 1rem;
    }
}

/* img */
.fixed-background {
  min-height: 40vh;
  width: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width:768px) {
    .fixed-background {
      background-attachment: initial;
      background-size: cover;
      background-position: center;
    }
}
 
.background-01 {
  background-image: url("../img/bg01.jpg");
}

/* contact */
#contact{
    margin: 200px 0 200px 0;
}
@media screen and (max-width:768px) {
    #contact{
        margin: 100px 0 100px 0;
    }
}
#contact h2{
    color: #b38d1b;
    text-align: center;
    margin:0 0 100px 0;
}
@media screen and (max-width:550px) {
    #contact h2{
        margin:0 0 50px 0;
    }
}

#contact .content .btn {
    margin-top: 100px;
    text-align: center;
}
#contact .content .btn a {
    border: 2px solid #b38d1b;
    background: #b38d1b;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    padding: 40px 80px;
    border-radius: 12px;
}
#contact .content .btn a:hover {
    border: 2px solid #b38d1b;
    background: #fff;
    color: #b38d1b;
}
@media screen and (max-width:800px) {
    #contact .content .btn a {
        font-size: 2rem;
        font-weight: bold;
        padding: 24px 40px;
    }
}
@media screen and (max-width:600px) {
    #contact .content .btn a {
        font-size: 1rem;
        padding: 24px 12px;
    }
}

/* footer */
#footer{
    padding: 100px 0;
    border-top:1px solid #b38d1b;
    text-align: center;
    background: #fff;
    position: relative;
    text-transform: uppercase;
}

#footer .footer-logo{
    font-weight: bold;
    letter-spacing: 0.3em;
    margin: 0 0 50px 0;
    color: #b38d1b;
}
#footer small{
     color:#888;
}