@charset "utf-8";

@import '/ginza-square/common/css/all.css';
@import '/ginza-square/common/css/styles.css';


/* コミュニティスタジオ
--------------------------------------------------------------*/

#csta {

}

#csta .info-4f{
    background: #F7F3F0;
    text-align: center;
    margin: 80px 0;
    padding: 40px 0;
    border-radius: 16px;
}

#csta .info-4f p{
    line-height: 2.2em;
    font-size: 2.0rem;
}


.app-b ul{
    text-align: center;
    margin: 10px auto 20px;
    display: flex;
    justify-content: center;
    gap: 0 2%;
}

#csta .info-4f a.app{
    color: #0071bc;
    text-decoration: none;
    font-size: 1.6rem;
}

#csta,
#csta p{
    color: #333333;
}

#csta h4{
    font-size: 2.2rem;;
}

#csta h5 {
    font-family: 'Noto Serif JP', serif;
}

/*サブナビ*/
#subnav .subnav_wrap {
    width: 100%;
    margin: 0 auto;
}
#subnav .subnav_lists {
    display: flex;
    flex-wrap: wrap;
    max-width: 1170px;
    gap: 0 2%;
    justify-content: center;
    justify-content: space-between;
}

#subnav .subnav_list {
    width: 16%;
    padding: 0 2.4em;
    height: 75px;
    position: relative;
    transition: all .3s;
    text-align: center;
    border-radius: 5px;
    background-color: #9E8977;
    color: #FFF;
}

#subnav .subnav_list:hover {
    background-color: #9E8977;
    opacity:0.8;
    /*background-color: rgba(227,93,95,1.00);*/
}

#subnav .subnav_list:before {
    /*content: "";
    width: 2px;
    height: 100%;
    background-color: #c7a976;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;*/
}

#subnav .subnav_list:after{
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    position: absolute;
    right: 1.5em;
    top: 45%;
}


#subnav .subnav_list:last-child::after{
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    position: absolute;
    right: 1.5em;
    top: 45%;
    margin-right: 0%;
    padding-right: 0%;
}

#subnav .subnav_list:hover::before {
    /*background-color: #c7a976;*/
}

#subnav .subnav_list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.05em;
    /*font-weight: 500;*/
    transition: all .3s;
    line-height: 1.2em;
}

#subnav .subnav_list:hover a {
    color: #fff;
}



#csta h3{
    color:#9E8977;
    font-family: "Noto Serif JP', serif";
    font-weight: 300;
    font-size: 35px;
}

#csta h3:before{
    content: url("/ginza-square/communitystudio/img/heading_icon.png");
    padding-right: 20px;
}
#csta h3:after{
    content: url("/ginza-square/communitystudio/img/heading_icon.png");
    padding-left: 20px;
}



/*コンセプト*/
#concept {
    text-align: center;
    margin: 70px auto;
}

#concept .bg {
    background-image: url("/ginza-square/communitystudio/img/con_bg.png");
    width: 650px;
    height: 650px;
    background-size: cover;
    text-align: center;
     margin: 0px auto;
    position: relative;
}

#concept .bg .dotimg{
    position: absolute;
    left: -60px;
    top:50px;
    width: 185px;
}

#concept .bg .dotimg03{
    position: absolute;
    right: -130px;
    top:160px;
    width: 123px;
}

#concept .bg .roundimg{
    position: absolute;
    left: -120px;
    bottom:50px;
    width: 90px;
}

#concept .bg .illust{
    position: absolute;
   right: -200px;
    bottom:-30px;
    width: 345px;
}

#concept .bg .illust-en{
    position: absolute;
   right: -260px;
    bottom:-30px;
    width: 345px;
}


#concept .inner{
    padding: 100px 0 0 0;
}


#concept h4{
    color: #9E8977; 
    font-size: 30px;
    font-family: "YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif'";
    font-weight: 300;
    margin: 30px 0 0 0;
}

#concept .discri{
    margin: 50px 0 0 0;
}

#outline p,
#concept p{
    margin: 2em 0;
    line-height: 2.0em;
    coler:#333333;
}



/*講師紹介*/
#teacher .bg-01{
padding: 60px 0 90px;
background-color: #f5f3f0;
margin-top: 80px;
}

#teacher h3{
color:#9E8977;
font-family: "Noto Serif JP', serif";
font-weight: 300;
font-size: 35px;
}

#teacher .inner{
width: 1170px;
text-align: center;
margin: 0 auto;
}

#teacher .inner .category{
display: flex;
flex-wrap: wrap;
max-width: 1170px;
justify-content: space-between;
margin-top: 50px;
}


#teacher .inner .category > dl {
/*flex: 1 1;*/
order: -1;
position: relative;
min-width: 70px;
/*padding: .7em 1em;*/
text-align: center;
flex-flow: column;
margin-top: 0;
width: 375px;
margin-bottom:90px;
} 

#teachere p{
margin: 2em 0;
line-height: 2.0em;
coler:#333333;
font-size: 20px;
}

#teacher h5{
font-size: 26px;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
margin: 15px 0px;
text-align: center;
}

#teacher .inner .category  dl dd.name {
padding: 0px 0px 15px 0px;
margin-right: 15px;
color: #9E8977;
font-size: 2.6rem;
border-bottom: solid 1px #9E8977;
}

#teacher .inner .category dl dd.affiliation{
line-height: 1.4em;
font-size: 1.7rem;
color: #9E8977;
margin: 20px 15px 5px 0;
height: 40px;
}

#teacher .inner .category  dl dd.discri {
padding: 15px 0px 40px 0px;
font-size: 1.6rem;
text-align: left;
}

#teacher .inner .category dl dd.message {
background-color: #fff;
padding: 20px 30px;
margin-right: 15px;
color: #9E8977;
text-align: left;
font-size: 1.5rem;
position: relative;
}

#teacher .inner .category dl dd.message.h_260{
min-height: 260px;
}

#teacher .inner .category dl dd.message.h_230{
min-height: 230px;
} 

#teacher .inner .category dl dd.message .ttl_center{
position: absolute;
top:-15px;
left:50%;
transform: translate(-50%,0%);
width: 30%;
}

#teacher h5.offer{
font-size: 1.8rem;
background-color: #fff;
border-radius: 25px;
padding: 5px 0;
color: #9e8977;
border: solid 1px #9e8977;
}



/*概要*/
#qa .bg-01,
#outline .bg-01{
    padding: 100px 0;
    background-color: #F7F3F0;
}

#outline h3{
    color:#9E8977;
    font-family: "Noto Serif JP', serif";
    font-weight: 300;
    font-size: 35px;
}


#qa .inner,
#outline .inner{
    width: 1170px;
    text-align: center;
    margin: 0 auto;
}

#outline .inner .category{
 display: flex;
    flex-wrap: wrap;
    max-width: 1170px;
    gap: 0 45px;
    justify-content: center;
}


#outline .inner .category> dl {
    /*flex: 1 1;*/
    order: -1;
    position: relative;
    min-width: 70px;
    /*padding: .7em 1em;*/
    text-align: center;
    flex-flow: column;
    width: 358px;
    margin-top: 0;
  } 

#line-recruit p,
#apply p,
#outline p{
    margin: 2em 0;
    line-height: 2.0em;
    coler:#333333;
    font-size: 20px;
}

#outline h5{
    font-size: 26px;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    margin: 15px 0px;
    text-align: center;
}


#outline h5.bty{
    color: #DC9697;
}
#outline h5.hlt{
    color: #AFC69B;
}
#outline h5.cul{
    color: #87BCD1;
}
#outline dd{
    text-align: left;
}


/*お申込みについて*/
#apply{
    margin-top: 0px;
}
#apply .inner {
    text-align: center;
    margin: 0 auto;
    width: 1170px;
    padding: 100px 0 80px;
}

#line-recruit .inner {
    text-align: center;
    margin: 0 auto;
    width: 1170px;
    padding: 90px 0 90px;
}

#apply .inner article {
 display: flex;
    flex-wrap: wrap;
    max-width: 1170px;
    gap: 0 45px;
    justify-content: center;
    margin-top: 80px;
}


#apply .inner  article > dl {
    /*flex: 1 1;*/
    order: -1;
    position: relative;
    min-width: 70px;
    /*padding: .7em 1em;*/
    text-align: center;
    flex-flow: column;
    width: 255px;
    height: auto;
    background-color: #F7F3F0;
    padding: 60px 10px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    margin-top: 0;
    border: solid 1px #9e8977;
  } 
#apply .inner  article > dl dt.no{
    position: absolute;
    top:-25px;
    left:50%;
     transform: translate(-50%,0%);
    width: 16%;
}
#apply .inner  article > dl:after{
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 3px solid #9E8977;
    border-right: 3px solid #9E8977;
    content: '';
    position: absolute;
    right: -2.5em;
    top: 50%;
}

#apply .inner  article > dl:last-child::after{
    border: none;
    margin-right: 0%;
    padding-right: 0%;
}

#apply .inner  article > dl dt{
    color: #9E8977;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 20px;
    font-weight: 400;
    margin: 10px 0 10px 0;
}

#apply .inner  article > dd{
    font-size: 16px;
    line-height: 1.6em;
}

#apply .btn-area{
    padding: 40px 0 0;
}

#apply .btn-area .btn-01{
    width: 630px;
    margin: 30px auto 0;
}

#apply .btn-area .btn-02{
    width: 630px;
    margin: -30px auto 0;
}





/*Q&A*/
#qa {
    text-align: center;
}
#qa h3{
     font-family: 'Oswald', sans-serif;
}
#qa .inner{
    width: 840px;
    margin: 0 auto;
}

#qa .container{
    margin: 40px 0 0 0;
}

#qa .qa-q {
    max-width: 860px;
    margin-bottom: 0px;
    border-bottom: 2px solid #9E8977;
}

#qa .qa-q summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1.5em 2em 1.5em 5em;
    color: #9E8977;
    font-weight: 500;
    cursor: pointer;
    background-color: #FFF;
    font-size: 20px;
}

#qa .qa-q summary::-webkit-details-marker { display: none }

#qa .qa-q summary::before{
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 2.3em;
}

#qa .qa-q summary::before {
    color: #fff;
    content: "Q";
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 1.0em;
    border-radius: 50%;
    font-weight: 400;
    font-size: 1.3em;
    line-height: 40px;
    text-align: center;
     background-color: #9E8977;
     font-family: 'Oswald', sans-serif;
}

#qa .qa-q summary::after {
    transform: rotate(134deg);
    transition: transform .5s;
     width: 8px;
    height: 8px;
    border-top: 3px solid #9E8977;
    border-right: 3px solid #9E8977;
    content: '';
    right: 1.5em;
}

#qa .qa-q[open] summary::after {
    transform: rotate(320deg);
}

#qa .qa-q p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1.5em 4.5em 1.5em 6.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
    background-color: #EFEBE5;
    text-align: left;
}

#qa .qa-q[open] p {
    transform: none;
    opacity: 1;
}

#qa .qa-q p.list {
    padding: 0.2em 3em;
}

#qa .qa-q p.list:last-child {
    padding: 0.2em 3em 2.0em 3em;
}


/*LINE募集*/
#csta #line-recruit h4{
    width: 36%;
    margin: 0 auto 30px;
}



/*ボタン*/
#csta .btn-section{
     width: 630px;
    margin: 60px auto 0;
}


#csta .btn-03,
#csta .btn-01,
#csta .btn-02{
    padding: 15px ;
    position: relative;
}

#csta .btn-01{
    background-color: #9E8977;
    border-radius: 32px;
    padding: 10px 0;
}

#csta .btn-02{
    background-color: #FFF;
    border: solid 3px #9E8977;
    border-radius: 32px;
    padding: 17px 0;
}

#csta .btn-03{
    background-color: #06C055;
    border-radius: 32px;
    padding: 10px 0;
}

#csta  a .btn-01,
#csta  a .btn-02{
    color: #FFF;
    text-decoration: none;
}

#csta .btn-03 a,
#csta .btn-01 a{
    color: #FFF;
    text-decoration: none;
     font-size: 2.0rem;
}


#csta .btn-02 a{
    color: #9E8977;
    text-decoration: none;
     font-size: 2.0rem;
}



#csta .btn-03::after,
#csta .btn-01::after{
     transform: rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    position: absolute;
    right: 2.5em;
    top: 45%;
}


#csta  .btn-02::after{
     transform: rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 3px solid #9E8977;
    border-right: 3px solid #9E8977;
    content: '';
    position: absolute;
    right: 2.5em;
    top: 45%;
}

#csta .btn-02:hover{
    background-color: #F7F3F0;
}

#csta .btn-01:hover,
#csta .btn-03:hover{
 opacity:0.8;
}

@media (max-width: 580px) {
#csta h4{
font-size: 1.6rem;
}
#csta p{
font-size: 1.6rem;
}
#csta .info-4f{
padding: 20px;
}
#csta .info-4f p{
line-height: 2.2em;
font-size: 1.4rem;
text-align: left;
margin: 0;
}
#csta .info-4f a.app{
font-size: 1.2rem;
}
#subnav .subnav_lists {
display: flex;
flex-wrap: wrap;
/* max-width: 375px; */
margin-top: 60px;
justify-content: space-between;
}
#subnav .subnav_list {
width: 48%;
padding: 0 1.5em 0 0.5em;
height: 55px;
position: relative;
transition: all .3s;
text-align: center;
border-radius: 5px;
background-color: #9E8977;
color: #FFF;
box-sizing: border-box;
margin-bottom: 1em;
}
#subnav .subnav_list a {
    font-size: 1.2rem;
    line-height: 1.4em;
}
#outline p, 
#concept p {
margin: 1.5em 0; 
line-height: 1.6em;
}
#concept {
text-align: center;
margin: 50px auto;
width: 100%;
}
#csta #concept h3 {
font-size: 3.2rem;
}
#csta h3:before {
content: url(/ginza-square/communitystudio/img/heading_icon_smp.png);
padding-right: 20px;
}
#csta h3:after {
content: url(/ginza-square/communitystudio/img/heading_icon_smp.png);
padding-left: 20px;
}
#concept h4 {
color: #9E8977;
font-size: 1.6rem;
/* font-family: "YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif'"; */
font-weight: 300;
margin: -5px 0 0 0;
}
#concept .discri {
margin: 20px 0 30px 0;
}
#concept .bg {
background-image: url(/ginza-square/communitystudio/img/con_bg.png);
height: 100%;
width: 90%;
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
text-align: center;
margin: 0px auto;
position: relative;
padding: 0px 20px;
}
#concept .bg .dotimg {
position: absolute;
left: 0px;
top: -30px;
width: 30%;
}
#concept .bg .roundimg {
position: absolute;
left: 0px;
bottom: 50px;
width: 40px;
}

#concept .bg .dotimg03 {
position: absolute;
right: 0px;
top: 180px;
width: 80px;
}

#concept .illust {
width: 55%;
margin: 0 auto;
}
#concept .inner {
padding: 0px 0 0 0;
width: 100%;
}
  #qa .bg-01, 
  #outline .bg-01 {
  padding: 20px 0;
  }
  #qa .inner, 
  #outline .inner {
  width: 90%;
  text-align: center;
  margin: 0 auto;
  padding: 30px 10px;
  }    
  #outline h3 {
  font-weight: 300;
  font-size: 2.6rem;
  }
    #outline .inner .category{
display: block;
    text-align: center;
    flex-wrap: wrap;
    /* max-width: 1170px; */
    /* gap: 0 45px; */
 }
    
    #outline .inner .category> dl {
        /* flex: 1 1; */
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    text-align: center;
    flex-flow: column;
    width: 90%;
    margin-top: 20px;
    }
    #outline h5{
        font-size: 2.2rem;
        margin: 0;
    }
    #outline dd{
        margin-top: 0px;
  }
  #csta .btn-section {
  width: 90%;
  margin: 30px auto 0;
      box-sizing: border-box;
  }   
  #csta .btn-01 {
  border-radius: 32px;
  padding: 20px 0;
   box-sizing: border-box;
  }
#csta .btn-03 a, 
#csta .btn-01 a {
  color: #FFF;
  text-decoration: none;
  font-size: 1.6rem;
  }
  #csta h3 {
        color: rgb(158, 137, 119);
        font-weight: 300;
        font-size: 2.2rem;
        font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    }

#outline .inner{
    width: 90%;
    text-align: center;
    margin: 0 auto;
} 
    #apply .inner {
        margin: 0 auto;
        width: 90%;
        padding: 40px 20px;
    }
    #apply p{
        text-align: left;
    }
    #apply .inner article {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 56px 0px;
        justify-content: center;
        margin-top: 0px;      
  }
    #apply .inner article > dl {
        order: -1;
        position: relative;
        min-width: 70px;
        text-align: center;
        width: 100%;
        min-height: 230px;
        background-color: rgb(247, 243, 240);
        flex-flow: column;
        padding: 40px 10px 20px;
        border-radius: 20px;
        box-sizing: border-box;
    }

   #apply .inner article > dl dt {
        color: #9E8977;
        font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-size: 2.0rem;
        font-weight: 400;
        margin-bottom: 20px;
    }
    
    #apply .inner article > dl dt .mb10{
        margin-bottom: 10px;
    }
    
    #apply .inner article > dl dd {
        font-size: 1.4rem;
        line-height: 1.6em;
    }
#apply .inner article > dl:after {
            display: none;
    }
    #apply .btn-area .btn-01{
    width: 100%;
    margin: 30px auto 0;
}
    
#apply .inner  article > dl dt.no{
    position: absolute;
    top:-20px;
    left:50%;
     transform: translate(-50%,0%);
    width: 12%;
}    
    
    #qa .qa-q summary {
    font-size: 1.4rem;
        padding: 1.0em 2.2em 1.0em 3.5em;
        text-align: left;
}
    #qa .qa-q summary::before {
        color: #fff;
        content: "Q";
        display: inline-block;
        position: absolute;
        width: 32px;
        height: 32px;
        left: 0.5em;
        border-radius: 50%;
        font-weight: 400;
        font-size: 1.0em;
        line-height: 30px;
        text-align: center;
        background-color: #9E8977;
        font-family: 'Oswald', sans-serif;
    }
    #qa .qa-q p {
        position: relative;
        transform: translateY(-10px);
        opacity: 0;
        margin: 0;
        padding: 1.5em 1.5em 1.5em 1.5em;
        transition: transform .5s, opacity .5s;
        background-color: #EFEBE5;
        text-align: left;
    }
    #qa .qa-q[open] summary::after {
        transform: rotate(320deg);
    }
#qa .qa-q summary::after {
transform: rotate(134deg);
transition: transform .5s;
width: 6px;
height: 6px;
border-top: 3px solid #9E8977;
border-right: 3px solid #9E8977;
content: '';
position: absolute;
right: 1.0em;
}
#line-recruit .inner {
text-align: center;
margin: 0 auto;
width: 100%;
padding: 30px 0 20px;
}
#csta #line-recruit h4 {
width: 90%;
margin: 0 auto 30px;
}
/*講師紹介*/
#teacher .bg-01{
padding: 40px 0;
background-color: #f5f3f0;
margin-top: 40px;
}

#teacher h3{
color:#9E8977;
font-weight: 300;
font-size: 2.4rem;
}

#teacher .inner{
width: 90%;
text-align: center;
margin: 0 auto;
}

#teacher .inner .category{
display: flex;
flex-wrap: wrap;
max-width: 580px;
justify-content: space-between;
margin-top: 0px;
}

#teacher .inner .category > dl {
/*flex: 1 1;*/
order: -1;
position: relative;
min-width: 70px;
/*padding: .7em 1em;*/
text-align: center;
flex-flow: column;
margin-top: 0;
padding-left: 2%;
margin: 40px auto 20px;
} 

#teachere p{
margin: 2em 0;
line-height: 2.0em;
coler:#333333;
font-size: 20px;
}

#teacher h5{
font-size: 26px;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
margin: 15px 0px;
text-align: center;
}

#teacher .inner .category  dl dd.name {
padding: 0px 0px 10px 0px;
margin-right: 15px;
color: #9E8977;
font-size: 2.0rem;
border-bottom: solid 1px #9E8977;
}

#teacher .inner .category dl dd.affiliation{
line-height: 1.4em;
font-size: 1.7rem;
color: #9E8977;
margin: 20px 15px 0px 0;
height: auto;
}

#teacher .inner .category  dl dd.discri {
padding: 15px 10px 25px 0px;
font-size: 1.5rem;
text-align: left;
}

#teacher .inner .category dl dd.message {
background-color: #fff;
padding: 20px;
margin-right: 15px;
color: #9E8977;
text-align: left;
font-size: 1.4rem;
position: relative;
}

#teacher .inner .category dl dd.message.h_260{
  min-height: inherit;
}

#teacher .inner .category dl dd.message.h_230{
   min-height: inherit;
} 

#teacher .inner .category dl dd.message .ttl_center{
position: absolute;
top:-15px;
left:50%;
transform: translate(-50%,0%);
width: 30%;
}

#teacher h5.offer{
font-size: 1.6rem;
line-height: 1.4em;
background-color: #fff;
border-radius: 15px;
padding: 5px 30px;
color: #9e8977;
border: solid 1px #9e8977;
margin: 30px 15px 30px 10px;    
font-weight: 400;
}
    }