@charset "UTF-8";
/* 【オーディションページ用CSS】 */

/* ****************************** */
/* [A-1] 汎用設定 */
/* ****************************** */
body{
    font-family: "Noto";
    font-size: 16px;
    color: #333;
    font-weight: 100;
    letter-spacing: 1.6px;
    line-height: 1.6;
    text-align: center;
    word-break: break-all;
} /* 【サイト全体に適応させる書式設定】 */
main{
    margin: 0 auto 40px;
} /* main要素のマージン0auto*/
section{
    overflow: hidden;
} /* 子要素がsectionからはみ出さないように。 */
.links{
    padding: 0 3px;
    
    color: #424cce;
    border-bottom: 1px #222 dashed;
} /* このサイト内の通常リンク設定 */

#auditionPage{
    background-color: #ff0;
}
.auditionInner{
    width: 100%;
}


/* ****************************** */
/* [A-2] 共通BEMブロック */
/* ****************************** */
.guideBoxTitle{
    font-size: 25px;
    margin-bottom: 5px;
} /* 各ボックスの<H2>タイトル */
.guideBox__text{
    font-size: 18px;
    text-align: left;
} /* 各ボックスの<p>本文 */
.hideBr{
    display: none;
} /* レスポンシブ用隠し<BR> */
.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
} /* stickyが作動するクラス */
.hr{
    width: 90%;
    border-width: 5px;
    margin: 0 auto 150px;
    border-color: #fff;
    border-style: dotted;
}
.min{
    margin-top: 10px;
    font-size: 13px;
    padding: 0 20px;
} /* 小さくする文字用 */

[class*="pawButton"]{
    display: block;
    width: 100px;
    height: 100px;
    
    border: 1px #fff solid;
    border-radius: 50%;
    box-sizing: border-box;
    margin: 0 auto;
    
    position: absolute;
    left: 50%;
    margin-left: -50px;
    bottom: 100px;
    
    animation: fuwafuwa 5s infinite;
    visibility: hidden;
}
.pawButton:hover{
    background-color: rgba(255, 255, 255, 0.5);
    border-style: dashed;
}
.pawButton__pawBig{
    width: 50px;
    height: 50px;
    
    border: 2px #fff solid;
    border-radius: 50%;
    
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -25px;
    background-color: transparent;
    color: #fff;
    font-size: 30px;
    visibility: visible;
} /* 肉球ボタン大 */
[class*="pawButton__pawSmall"]{
    display: block;
    width: 25px;
    height: 25px;
    
    border: 2px #fff solid;
    border-radius: 50%;
    margin-left: -12.5px;
    background-color: transparent;
    
    position: absolute;
    visibility: visible;
} /* 肉球ボタン小・共通 */
.pawButton__pawSmall-1{
    top: 10px;
    left: 50%;
} /* 肉球ボタン小・1 */
.pawButton__pawSmall-2{
    top: 22px;
    left: 20%;
} /* 肉球ボタン小・2 */
.pawButton__pawSmall-3{
    top: 22px;
    left: 80%;
} /* 肉球ボタン小・3 */
.pawButton__pawBig:hover,
[class*="pawButton__pawSmall"]:hover{
    border-style: dashed;
    background-color: rgba(255, 255, 255, 0.5);
} /* 肉球ホバー */
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -50px);}
	100% {-webkit-transform:translate(0, 0);}
} /* ふわふわアニメーション */

/* ****************************** */
/* [A-3] インターテキストボックス */
/* ****************************** */
.interTextBox{
    width: 100%;
    height: 100px;
}
.interTextBox__text{
    width: 100%;
    
    font-size: 50px;
    color: #fff;
    font-family: "Nico Moji";
    text-shadow: 0 0 20px #000;
    line-height: 2;
    background-color: rgba(255, 0, 0, 0.25);
}


/* ****************************** */
/* [1] タイトルボックス */
/* ****************************** */
.titleBox{
    width: 100%;
    height: 1000px;
    
    position: relative;
    overflow: hidden;
/*    margin-bottom: 100px*/
}
.titleBox__tiltText{
    transform: rotate(-12deg);
    width: 200%;
    height: 150px;
    
    padding: 10px;
    box-sizing: border-box;
    
    position: absolute;
    top: 25%;
    left: -50%;
    
    font-family: "Mplus 1p";
}
.titleBox__tiltText-1{
    display: block;
    background-color: rgba(255, 0, 0, 0.33);
    border-top: 3px #fff solid;
    
    font-size: 45px;
    color: #fff;
    text-shadow: 0 0 20px #000;
}
.titleBox__tiltText-2{
    display: block;
    background-color: rgba(255, 255, 255, 0.38);
    
    border-bottom: 3px #fff solid;
    
    font-size: 60px;
    color: #f00;
    text-shadow: 0 0 10px #fff,
                 0 0 30px #000;
}


/* ****************************** */
/* [2] ビデオボックス */
/* ****************************** */
.stickyBox-1{
    width: 100%;
}
.stickyBox1__video{
    width: 100%;
/*    height: 1000px;*/
    height: 50%;
    object-fit: cover;
} /* ビデオそのもの */


/* ****************************** */
/* [3] 募集趣意ボックス */
/* ****************************** */
[class*="stickyBox-"]{
    width: 100%;
/*    height: 3000px;*/
    
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    
    padding: 0 0 40px;
    box-sizing: border-box;
    margin-bottom: 100px;
} /* 【張り付く大枠】共通設定 */
.stickyBox-2{
    height: 1700px;
    position: relative;
} /* 募集趣意ボックス */
[class*="guideBox-"]{
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px 30px;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px #000;
    position: absolute;
}
.guideBox-1{
    width: 50%;
    min-width: 300px;
/*    background-color: rgba(239, 255, 120, 0.8);*/
    border-radius: 0 50px 0 0;
    box-shadow: 10px -10px 20px rgba(239, 255, 120, 0.8);
    
    top: 40px;
    left: 50px;
}
.guideBox-2{
    width: 50%;
    min-width: 300px;
/*    background-color: rgba(255, 169, 238, 0.8);*/
    border-radius: 0 0 0 50px;
    box-shadow: -10px 10px 20px rgba(255, 169, 238, 0.8);

    top: 400px;
    right: 50px;
}
.guideBox-3{
    width: 80%;
/*    background-color: rgba(169, 202, 255, 0.8);*/
    border-radius: 0 0 50px 0;
    box-shadow: 10px 10px 20px rgba(169, 202, 255, 0.8);
    
    top: 900px;
    left: 50px;
    margin-left: -50px;
}
.guideBox-4{
    width: 80%;
/*    background-color: rgba(169, 255, 172, 0.8);*/
    border-radius: 50px 0 0 0;
    box-shadow: -10px -10px 20px rgba(169, 255, 172, 0.8);
    
    top: 1200px;
    right: 50px;
    margin-right: -50px;
}
.pawButton-2{
    bottom: 0px
}


/* ****************************** */
/* [6] 募集要項ボックス */
/* ****************************** */
.stickyBox-3{
    width: 100%;
    max-width: 1000px;
    
    padding: 80px 20px 200px;
    box-sizing: border-box;
    margin: 0 auto;
/*    background-color: #fff;*/
    position: relative;
}
.conditionBox__inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}
[class*="conditionBox-"]{
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border: 2px #333 dashed;
    box-sizing: border-box;
    margin-bottom: 40px;
}
.conditionBox-1{
    width: 45%;
/*    background-color: rgba(207, 255, 238, 0.8);*/
    border-right: none;
    border-bottom: none;
    border-radius: 50px 0 0 0;
    box-shadow: -20px -20px 50px rgba(207, 255, 238, 0.8);
}
.conditionBox-2{
    width: 45%;
/*    background-color: rgba(247, 255, 183, 0.8);*/
    border-left: none;
    border-bottom: none;
    border-radius: 0 50px 0 0;
    box-shadow: 20px -20px 50px rgba(247, 255, 183, 0.8);
}
.conditionBox-3{
    width: 95%;
/*    background-color: rgba(255, 175, 175, 0.8);*/
    border-top: none;
    border-radius: 0 0 25px 25px;
    box-shadow: 0px 20px 50px rgba(255, 175, 175, 0.8);
}

.guideBox__list{
    width: 100%;
    text-align: left;
    font-size: 18px;
}
.guideBox__listTitle-1{
    float: left;
    width: 20%;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    font-weight: 600;
}
.guideBox__listText-1{
    float: right;
    width: 80%;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    border-bottom: 1px #000 dashed;
}
.guideBox__listTitle-2{
    float: left;
    width: 60%;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    font-weight: 600;
}
.guideBox__listText-2{
    float: right;
    width: 40%;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    border-bottom: 1px #000 dashed;
}
.guideBox__text-big{
    text-align: center;
    font-family: "Lato";
    font-size: 30px;
    font-weight: 600;
    margin: 10px 0 ;
    color: #f00;
    text-shadow: 0 0 1px #fff619;
}
.pawButton-3{
    bottom: 0;
}

/* ****************************** */
/* [7] エントリーボックス */
/* ****************************** */
.stickyBox-4{
    width: 90%;
    height: 500px;
    margin: 0 auto;
    position:relative;
}
.entryBox{
    width: 100%;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.18);
    border: 3px #333 dashed;
    border-radius: 50px;
    box-sizing: border-box;
    margin: 40px auto 40px;
    position: absolute;
    top: 50%;
    margin-top: -125px;
}
input[type=text]{
    display: block;
    background-color: rgba(255, 255, 255, 0.4);
    
    width: 90%;
    height: 100px;
    
    padding: 10px;
    border: 3px rgba(255, 0, 0, 0.7) solid;
    border-radius: 25px;
    box-shadow: 0 0 5px #000;
    margin: 20px auto 20px;
    
    font-size: 50px;
} /* エントリーフォーム（通常時） */
input[type=text]:focus{
    background-color: rgba(206, 255, 0, 0.25);
    color: #000;
} /* エントリーフォーム（フォーカス時） */
input[type=submit]{
    display: block;
    background-color: rgba(255, 255, 255, 0);
    width: 250px;
    height: 80px;
    
    padding: 10px;
    border: 3px rgba(255, 0, 0, 0.7) solid;
    border-radius: 25px;
    box-shadow: 0 0 5px #000;
    margin: 20px auto 20px;
    
    font-size: 40px;
    color: #fff;
    text-shadow: 0 0 5px #000;
} /* エントリーボタン（通常時） */
input[type=submit]:hover{
    background-color: rgba(255, 0, 0, 0.25);
    border: 3px #fff solid;
} /* エントリーボタン（ホバー時） */


/* ****************************** */
/* [8] オーディションフッター */
/* ****************************** */
.auditionFottor{
    background-color: rgba(255, 255, 255, 0.21);
    padding: 20px 0;
    color: #ededed;
    font-size: 14px;
    
    margin: 0 auto;
    width: 100%;
    height: 200px;
    
/*    border-top: 5px #fff solid;*/
    box-shadow: 5px 5px 10px 10px rgba(0,0,0, 0.5);
    
    position: relative;
/* <HR>と猫イメージを揃える準備 */
}
.auditionFottor__hr{
    border-color: #fff;
    width: 90%;
    border-width: 2px;
    position: absolute;
    bottom: 150px;
    left: 5%;
} /* <HR>の幅を90%にしてposition設定。 */
.auditionFottor__nyanko1{
    width: 100px;
    position: absolute;
    bottom: 143px;
    left: 5px;
} /* 猫のイメージ設定（左） */
.auditionFottor__nyanko2{
    width: 100px;
    position: absolute;
    bottom: 165px;
    right: 10%;
} /* 猫のイメージ設定（右） */
.auditionFottor__copyright{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -166.9455px;
    margin-bottom: 10px;
} /* コピーライトの位置を最下に固定。ネガティブマージンで中央揃え */
.auditionFottor__copyright span:before{
    display: inline;
    content: "\f1f9";
    font-size: 15px;
    font-family: "FontAwesome";
    letter-spacing: 2px;
    padding: 0 5px;
} /* (C)マークをFontAwesomeで追加。 */
.siteTitle{
    font-size: 50px;
    color: #ff1010;
    font-family: "Indie Flower";
    line-height: 0.9;
    letter-spacing: 1px;
    text-shadow: 0 0 5px #f5f5f5,
                 0 0 6px #000;
    
    padding: 0px 2px;
    
    position: absolute;
    bottom: 80px;
    left: 50%;
    margin-left: -208.3205px;
    z-index: 100;
} /* サイトタイトルの全体設定 */



/******************************************/
/******************************************/
/******************************************/
/******************************************/
/******************************************/

/* 【モバイル用CSS】 */
@media screen and (max-width:768px) {
/* ****************************** */
/* [A-2] 共通BEMブロック */
/* ****************************** */
.hideBr{
    display: block;
} /* レスポンシブ用隠し<BR> */

.conditionBox-1{
    width: 95%;
}
.conditionBox-2{
    width: 95%;
}










/* ****************************** */
/* [1] タイトルボックス */
/* ****************************** */
.titleBox__tiltText-1{
    font-size: 20px;
}
.titleBox__tiltText-2{
    font-size: 35px;
}










/* ****************************** */
/* [0-4] グローバルナビゲーション */
/* ****************************** */
.globalNavi__list{
    width: 100%;
}
.globalNavi__link{
    font-size: 16px;
} /* 【リンク設定】 */
















}