@charset "UTF-8";

/*=====================================================
  共通
======================================================*/

.left {
    float: left;
}

.right {
    float: right;
}

.cf {width:100%;}
.cf:after {
  content: ""; 
  display: block; 
  clear: both;
 }

header {
	background: #000;
	color: #fff;
}

body , h1,h2 ,h3 ,p ,ul li {
  font-size: 0.9rem;
/*  font-family: TsukuGoPr5-R,Arial,Roboto,"Droid Sans","FOT-筑紫ゴシック Pr5 R","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic;*/
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1.8rem;
}

.thin-font{
    font-family: "Mplus 1p";
    font-weight: 200;
}

.en-bold {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
}

@media screen and (max-width: 767px){
    .en-bold {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 350px){
    .en-bold {
        font-size: 1.6rem;
    }
}



body {
  color: #221714;
}

h1 {
    line-height: 1.5rem;
}

h2,h3 {
  line-height: 1.5;
}

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

.youtube-container {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 1em auto;
    max-width: 650px;
}
.youtube-container iframe{
    width: 100%;
    height: 100%;
}

/*=====================================================
  ヘッダー header
======================================================*/
/*
  メニュー PC
*/
.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
/* header */
#top-head {
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 22px 0 11px 0;
    line-height: 1;
    z-index: 999;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    width: 330px;   
    float: left;
    padding-bottom: 2px;
}
@media screen and (min-width: 1164px) {
	#top-head .logo {
		padding: 5px 30px;
	}
}

#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
}

@media screen and (min-width: 1164px) {
	#global-nav ul li {
		padding: 16px 0;
	}
}

#global-nav ul li a {
	font-weight: bold;
    padding: 0 28px;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 22px;
    height: 78px;
    background: #000;
    background: rgba(0,0,0,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #fff;
    padding: 0 20px;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

#global-nav .header-entry-btn {
	padding: 0;
}

#global-nav .header-entry-btn a {
	padding: 0 30px 0 10px;
} 

#global-nav .header-entry-btn a img {
	width: 214px;
} 


/*
  メニュー スマホ
*/
@media screen and (max-width: 1163px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #000;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #top-head .logo img {
	width: 240px;
}
#top-head .logo-pc {
		display: none;
}
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(318deg);
        -moz-transform: rotate(318deg);
        transform: rotate(318deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-318deg);
        -moz-transform: rotate(-318deg);
        transform: rotate(-318deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}

/* btn ボタン */
.white-border-btn:link ,
.white-border-btn:visited {
    border: 2px solid #fff;
    display: inline-block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    /*-webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;*/
    transition: 0.2s;
}

.white-border-btn:hover ,
.white-border-btn:active {
    background: #fff;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

.blue-border-btn:link ,
.blue-border-btn:visited {
    display: inline-block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: #004da0;
    /*-webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;*/
    transition: 0.2s;
}

.blue-border-btn:hover ,
.blue-border-btn:active {
    opacity: 0.7;
}


/*=====================================================
  TOPページ
======================================================*/

.head-container {
    background: url(/themes/voat-artistbank/img/head-container-bg.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 15%;
    padding-bottom: 10%;
}

@media screen and (max-width: 543px){
    .head-container {
        padding-top: 46%;
    }
}

.head-container p.lead-txt {
    font-size: 2.8rem;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    line-height: 3.9rem;
}

@media screen and (max-width: 543px){
    .head-container p.lead-txt {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
}

@media screen and (max-width: 350px){
    .head-container p.lead-txt {
        font-size: 1.5rem;
        line-height: 2.4rem;
    }
}


@media screen and (max-width: 584px){
    .head-container p.lead-txt .point-br {
        display: none;
    }
}

@media screen and (max-width: 543px){
    .head-container p.lead-txt .point-br {
        display: block;
    }
}


.head-container .lead-txt-second {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin-bottom: 70px;
}

@media screen and (max-width: 584px){
    .head-container .lead-txt-second {
        font-size: 1rem;
    }
}

.top-news-heading h2.en-bold {
    margin-bottom: 12px;
}

.top-about-btn-area {
    color: #fff;
    width: 700px; 
    margin: 0 auto;
}

@media screen and (max-width: 767px){
    .top-about-btn-area {
        width: inherit; 
    }
}

.top-about-btn-area a {
    width: 300px;
    font-size: 1.2rem;
    padding: 10px;
}

@media screen and (max-width: 767px){
    .top-about-btn-area a.white-border-btn {
        width: 48%;
    }
}

@media screen and (max-width: 600px){
    .top-about-btn-area a.white-border-btn {
        width: 80%;
        display: block;
        margin: 0 auto;
        float: none;
        font-size: 1rem;
    }


    .top-about-btn-area a.white-border-btn.left {
        margin-bottom: 20px;
    }
}


.top-about-btn-area a:after {
  content: "\f105";
  font-family: FontAwesome;
  margin-left: 13px;    

}

.top-closs-mark {
    font-size: 6rem;    
    display: inline-block;
    line-height: 2.8rem;
    margin: 0 0 0 1.3rem;
}

@media screen and (max-width: 767px){
    .top-closs-mark {
        display: none;
    }
}


/*notice-area*/

.notice-area {
    background: #161616;
    background-size: cover;
    background-position: center center;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.notice-area h2 ,
.notice-area p {
    color: #fff;
}

.notice-area h2 {
    font-size: 2rem;
}

@media screen and (max-width: 767px){
    .notice-area h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
    }
}

.notice-area p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.notice-area h3 {
    font-size: 1.5rem;
    color: #7dc5e8;
    margin-bottom: 30px;
}

.notice-area a {
    padding: 10px 60px;
}

@media screen and (max-width: 767px){
    .notice-area a {
        width: 80%;
        margin: 0 auto;
    }
}

/* top-news-container */

.top-news-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.top-news-container-heading h2 {
    font-size: 2.5rem;
}

/* top-about-container */

.top-about-container {
    background: url(/themes/voat-artistbank/img/top-about-area-bg.jpg);
    background-size: cover;
    background-position: center center;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.top-about-container h2 {
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px){
    .top-about-container h2 {
        font-size: 1.9rem;
        line-height: 2.4rem;
    }
}

.top-about-decoration-img {
    width: 55%;
    max-width: 304px;
    margin: 0 auto 25px auto;
}

.top-about-txt p {
    color: #fff;
}

@media screen and (max-width: 767px){
    .top-about-txt p {
        text-align: left;
    }
}

.top-about-container a.white-border-btn {
    font-size: 1.3rem;
    padding: 13px 90px;
    margin-top: 65px;
}

@media screen and (max-width: 767px){
    .top-about-container a.white-border-btn {
        width: 80%;
        margin: 65px auto 0 auto;
    }
}

/* top-bottoms-contents-container */


.parent-leftup {
-webkit-transform: skew(0deg, 5deg);
-ms-transform: skew(0deg, 5deg);
transform: skew(0deg, 5deg);
}
.parent-leftup .child {
-webkit-transform: skew(0deg, -5deg);
-ms-transform: skew(0deg, -5deg);
transform: skew(0deg, -5deg);
}

.parent-rightup {
-webkit-transform: skew(0deg, -5deg);
-ms-transform: skew(0deg, -5deg);
transform: skew(0deg, -5deg);
}
.parent-rightup .child {
-webkit-transform: skew(0deg, 5deg);
-ms-transform: skew(0deg, 5deg);
transform: skew(0deg, 5deg);
}

.parent-rightup .child-hidden {
    overflow: hidden;
}


.top-audition {
    background: #eaf3f9;
    margin-top: 5%;
}

.top-audition .child {
    padding-top: 9%;
    padding-bottom: 8%;
}

@media screen and (max-width: 767px){
    .top-audition .child {
        padding-top: 13%;
        padding-bottom: 9%;
    }
}

.top-audition h2 {
    margin-bottom: 12px;
}

p.top-audition-lead {
    color: #004da0;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 22px;
}

.top-audition-txt {
    font-size: 1rem;
    margin-bottom: 40px;
}

.top-audition-flow-sp-plus {
    margin-top: 30px;
}

.top-audition a.blue-border-btn,
.top-artist a.blue-border-btn{
    font-size: 1.3rem;
    padding: 13px 90px;
    margin-top: 65px;
}

@media screen and (max-width: 767px){
    .top-audition a.blue-border-btn,
    .top-artist a.blue-border-btn {
        width: 80%;
        margin: 45px auto 20px auto;
        display: block;
    }
}


.top-showcase {
    background: url(/themes/voat-artistbank/img/top-showcase-bg.jpg);
    background-size: cover;
    background-position: center center;
    padding-top: 20%;
    padding-bottom: 20%;
    margin-top: -5%;
    margin-bottom: -5%;
}

.top-showcase-container {
    margin-top: -130px;
}

@media screen and (max-width: 1100px){
    .top-showcase-container {
        margin-top: -60px;
    }
}

@media screen and (max-width: 767px){
    .top-showcase-container {
        margin-top: -10px;
        text-align: left;
    }
}

@media screen and (max-width: 543){
    .top-showcase-container {
        margin-top: 0px;
    }
}

.top-showcase-container {
    color: #fff;
}

.top-showcase-container h2 {
    margin-bottom: 20px;
}

p.top-showcase-lead {
    color: #f5e328;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 22px;
}

.top-showcase-txt {
    font-size: 1rem;
    margin-bottom: 40px;
}

.top-showcase-container a.white-border-btn {
    font-size: 1.3rem;
    padding: 13px 20px;
}

@media screen and (max-width: 767px){
    .top-showcase-container a.white-border-btn {
        font-size: 1rem;
        width: 80%;
        display: block;
        margin: 65px auto 0 auto;
    }
}

.top-artist {
    background: #fff;
}

.top-artist .child {
    padding-top: 9%;
    padding-bottom: 8%;
}

@media screen and (max-width: 767px){
    .top-artist .child {
        padding-top: 13%;
        padding-bottom: 9%;
    }
}

.showcase-banner {
    display: block;
    width: 100%;
    margin: 115px auto 0 auto;
}

@media screen and (max-width: 991px){
    .showcase-banner {
        width: 100%;
        margin: 85px auto 0 auto;
    }
}


/*=====================================================
  フッター footer
======================================================*/

footer {
    color: #fff;
}

footer .footer-container {
    margin-top: -27px;

    background-color: #232323;
    background: url(/themes/voat-artistbank/img/footer-bg-img.png);
    background-size: cover;
}

@media screen and (max-width: 543px){
    footer .footer-container {
        margin-top: 0;
    }
}

footer a:link ,
footer a:visited {
    color: #fff;
    text-decoration: none;
}

footer a:hover ,
footer a:active {
    color: #fff;
    opacity: 0.7;
    text-decoration: none;
}

footer .parent-rightup {
    background: #232323;
    color: #fff;
    padding-bottom: 17px;
    margin-bottom: 0px;
}

footer .parent-rightup .child {
    padding-top: 10%;
}

footer .footer-logo a{
    /*-webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;*/
    transition: 0.2s;

}

footer .footer-logo {
    width: 66%;
    margin-bottom: 10px;    
}

footer ul.footer-menu li{
    font-weight: bold;
    float: left;
    padding: 15px 20px;
    font-size: 1.1rem;  
}

@media screen and (max-width: 767px){
    footer ul.footer-menu li {
        float: none;
        display: block;
        padding: 15px 0;
        text-align: center;
    }

        footer ul.footer-menu li a {
            display: block; 
            width: inherit;
            height: inherit;
    }
}

footer ul.footer-menu li:first-child{
    padding: 15px 20px 15px 0;
}

@media screen and (max-width: 767px){
    footer ul.footer-menu li:first-child{
        padding: 10px 0;
    }
}


.sns-list {
    float: right;   
}

@media screen and (max-width: 991px){
    .sns-list {
        float: none;
        margin: 25px auto 0 auto;

    }
}

@media screen and (max-width: 767px){
    .sns-list {
        display: block;
        width: 36%;
        margin-top: 40px;
    }
}

@media screen and (max-width: 543px){
    .sns-list {
        width: 39%;

    }
}

@media screen and (max-width: 503px){
    .sns-list {
        width: 100%;

    }
}

footer .footer-sns-area .sns-content ul.sns-list li{
    float: left;
}

@media screen and (max-width: 503px){
    footer .footer-sns-area .sns-content ul.sns-list li{
        float: none;
        padding-top: 30px;
        text-align: center; 
    }
}

.footer-sns-area .footer-twitter a:before {
    content: "\f099";
}

.footer-sns-area .footer-facebook a:before {
    content: "\f09a";
}

.footer-sns-area .footer-instagram a:before {
    content: "\f16d";
}

.footer-sns-area .footer-twitter a:before,
.footer-sns-area .footer-facebook a:before,
.footer-sns-area .footer-instagram a:before {
    font-family: FontAwesome;
    font-size: 50px;
    color: #fff;
    position: relative;
    margin-right: 20px;
}

@media screen and (max-width: 767px){
    .footer-sns-area .footer-twitter a:before,
    .footer-sns-area .footer-facebook a:before,
    .footer-sns-area .footer-instagram a:before {
        font-family: FontAwesome;
        margin: 0 10px;
    }
}


.footer-logo-sp {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
    margin-top: 40px;
    margin-bottom: 7px;
}



/*==================== copy ====================*/
footer .copy-area-wrap {
    background: #232323;
    padding-top: 200px;
    margin-top: -139px;
}

footer .copy {
    text-align: center;
    background: #232323;
    color: #fff;
    padding: 10px 0;
}

@media (min-width:768px){
  .top-about-btn-area{
    display: flex;
    justify-content: space-between;
  }
  .top-closs-mark{
    margin: 0;
  }
}/*  */