@charset "utf-8";


#wrapper{background:#a7584b;}
.charabgmain{background:url(/blog_images/starlight_orchestra_cd/cp/main_bg.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding-bottom: 5%; animation-name: fade-inanime; animation-duration: 2s; animation-fill-mode: forwards;}


h2{width: 95%; margin: 0 auto; font-size:100px; text-align: center; padding-top: 3%; color: #fff; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
h3{width: 95%; max-width: 900px; margin: 0 auto; font-size:60px; text-align: right; padding-top: 0; color: #fff; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; letter-spacing: 0.3em;}

h3 span{color: #0fd3c1; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

.cp-title{width: 60%; max-width: 1249px; padding: 5% 3% 3% 5%;}
.present-box{width: 70%; max-width: 900px; background:rgba(0,0,0,0.65); margin: -30px auto 0 auto; padding: 3% 5%; font-size: 24px; color: #fff; }

.present-box_img{width: 40%; }
.present-box_txt{width: 53%; padding: 2% 2% 2% 5%; line-height:1.61; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; letter-spacing: 0.1em; font-weight: bold;}
.present-box_txt img{}

.present-box_txt a:link { color: #0fd3c1; text-decoration: underline; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.present-box_txt a:visited { color: #0fd3c1; }
.present-box_txt a:hover { color: #0fd3c1; text-decoration: none;}
.present-box_txt a:active { color: #0fd3c1; }

.movie-type1{width: 95%; max-width: 1000px; margin: 0 auto;}
.movie-type2{width: 95%; max-width: 1000px; margin: 0 auto;}

.movie_emb_box{max-width: 1000px;}

.movie-type1 li{}
.movie-type2 li{width: 49%; padding:0.5%;}




.read-box{width: 95%; margin: 0 auto; font-size:16px; line-height:1.61;  text-align: center; color: #fff; text-shadow: #70dacf 1px 1px 5px, #70dacf -1px 1px 5px, #70dacf 1px -1px 5px, #70dacf -1px -1px 5px;}

.explanation-txt{width: 95%; max-width: 1000px; margin: 0 auto 5% auto; font-size:18px; line-height:1.61;  text-align: left; color: #fff; text-shadow: #54363b 1px 1px 5px, #54363b -1px 1px 5px, #54363b 1px -1px 5px, #54363b -1px -1px 5px;  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}





@media screen and (max-width: 800px) {

.cp-title{width: 90%; max-width: 1249px; padding: 5% 3% 3% 5%;}
h2{font-size:10vw; padding-bottom:4%;}
h3{font-size:10vw; text-align: center;}
.read-box{font-size:3vw;}
.present-box{width: 85%; margin: -30px auto 0 auto; padding: 3% 5%; font-size: 24px; color: #fff; }
.present-box_img{width: 100%; }
.present-box_txt{width: 100%; padding: 2% 0; font-size:16px;}
}



.cdseries-box{width: 95%; max-width: 750px; margin: 3% auto 0 auto; justify-content: center;}
.cdseries-box li{width: 47%; padding:1.5%;}
.cdseries-box-title{color: #fefef2; font-size:11px; padding: 3% 0; line-height:1.61; }

.cdseries-box-btn{width: calc(100% - 2px); border: solid 1px #fefef2; }
.cdseries-box-btn a{display:block; width: 96%; padding:2%; text-align: center;}
.cdseries-box-btn a{ color: #fefef2; text-decoration: none;}
.cdseries-box-btn a:visited { color: #fefef2; }
.cdseries-box-btn a:hover { color: #fefef2; background:rgba(255,255,255,0.40);}
.cdseries-box-btn a:active { color: #fefef2; }



.cdseries-box-btn a{ position: relative; z-index: 2; overflow: hidden; display:block; width: 100%;}
.cdseries-box-btn a:hover { color: #fff;}
.cdseries-box-btn a::after {top: -100%; width: 100%; height: 100%;}
.cdseries-box-btn a:hover::after { top: 0; background:rgba(255,255,255,0.40);}
.cdseries-box-btn a::before,
.cdseries-box-btn a::after { position: absolute; z-index: -1; display: block; content: '';}
.cdseries-box-btn a,
.cdseries-box-btn a::before,
.cdseries-box-btn a::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;}





@media screen and (max-width: 700px) {
.cdseries-box-title{font-size:2vw;}

}



.btn-box{ width: 95%; max-width: 900px; margin: 5% auto 0 auto;}
.free-btn a{display:block; width: 100%; padding:3% 2%; text-align: center; background:#212121; margin-bottom: 4%; font-size: 18px;}
.free-btn a{ color: #fefef2; text-decoration: none;}
.free-btn a:visited { color: #fefef2; }
.free-btn a:hover { color: #fefef2; background:#207971; }
.free-btn a:active { color: #fefef2; }

.free-btn a,
.free-btn a::before,
.free-btn a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}



.sns-box{width: 95%; max-width: 180px; margin: 5% auto 0 auto;}

.txt-link-box{width: 95%; max-width: 490px; margin: 5% auto 0 auto;}
.txt-link-box li{ margin:0.5%; background:#544f4e;}
.txt-link-box a{ color: #fefef2; text-decoration: none; padding: 0.5%;}
.txt-link-box a:visited { color: #fefef2; }
.txt-link-box a:hover { color: #fefef2; text-decoration: underline;}
.txt-link-box a:active { color: #fefef2; }

.txt-link-box li.link1{width: 28%; padding:0.8%;}
.txt-link-box li.link2{width: 23%; padding:0.8%;}
.txt-link-box li.link3{width: 41%; padding:0.8%;}



@media screen and (max-width: 640px) {
.txt-link-box li.link1{width: 98%; padding:1%; text-align: center;}
.txt-link-box li.link2{width: 98%; padding:1%; text-align: center;}
.txt-link-box li.link3{width: 98%; padding:1%; text-align: center;}
}



/* anime */

@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


@keyframes fade-inanime2 {
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}