body {
background: #fff;
color: #545454;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 500;
font-style: normal;
width: 100%;
height:100%;
font-size: 13px;
line-height:1.8em;
margin: 0;
}


#wrap{
width: 100%;
position: relative;
}

.pc{ display: block;}
.sp{ display: none;}
.fontS{ font-size: 80%; letter-spacing: 0.1em;}
.efblock{ width: 100%;}

.no-wrap { display: inline-block;}
.no-space{ letter-spacing: -0.1vw;}


@keyframes  fadeanm {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes  scaleanm {
0% { transform: scale(1.2,1.2); opacity: 0;}
100% { transform: scale(1,1); opacity: 1;}
}

@keyframes  slideanm {
0% { transform: translateY(100%); opacity: 1;}
100% { transform: translateY(0); opacity: 1;}
}

.linkLabel{
margin-top:-60px;
padding-top:60px;
text-indent: -99999px;
}

[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
	width: 200%;
	text-align: center;
    top: -1.8em;
    left: -50%;
    right: 0;
    margin: 0 auto;
    font-size: 0.6em;
	letter-spacing: 0;
}

/*---------------------------------------------

main

----------------------------------------------*/

#content{
width: 100%;
line-height: 0;
position: relative;
overflow-x: hidden;
}

#main{
background: #fc688f;
width: 100%;
position: relative;
overflow: hidden;
margin: 60px 0 0;
}

#main:before{
content:"";
display: block;
padding-top: 50%;
}

#mainImgAll{
width: 48.83%; height: 95.4%;
position: absolute;
top: 2.3%; right: 50%;
z-index: 1;
overflow: hidden;
}

#mainImg{
background: url("../images/top2/main_pc.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: scaleanm 1.2s cubic-bezier(0,.64,.41,1) 1s forwards;
opacity: 0;
}

#logo{
background: url("../images/top2/logo_pc.png") no-repeat center;
background-size: contain;
width: 45.2%; height: 24.66%;
position: absolute;
top: 8.26%; left: 52.23%;
z-index: 5;
animation: fadeanm 2s ease 2s forwards;
opacity: 0;
}

#roadshow{
background: url("../images/top2/roadshow_pc.png") no-repeat center;
background-size: contain;
width: 25.46%; height: 5.46%;
position: absolute;
top: 35%; left: 62.83%;
z-index: 5;
animation: fadeanm 2s ease 2.2s forwards;
opacity: 0;
}

#billing_top{
background: url("../images/top2/billing_top_pc.png") no-repeat center;
background-size: contain;
width: 23.9%; height: 21.93%;
position: absolute;
top: 53.73%; left: 62.83%;
z-index: 5;
animation: fadeanm 2s ease 2.6s forwards;
opacity: 0;
}

#catch01{
background: url("../images/top2/catch01.png") no-repeat center;
background-size: contain;
width: 4.5%; height: 31.4%;
position: absolute;
top: 6%; right: 52.2%;
z-index: 4;
animation: scaleanm 1s ease 3s forwards;
opacity: 0;
}

#catch02{
background: url("../images/top2/catch02.png") no-repeat center;
background-size: contain;
width: 39.36%; height: 4.8%;
position: absolute;
top: 44.53%; left: 55.33%;
z-index: 4;
animation: scaleanm 1s ease 2.4s forwards;
opacity: 0;
}

#mainCastImg{
background: url("../images/top2/chara.png") no-repeat center;
background-size: cover;
width: 44.53%; height: 18.33%;
position: absolute;
bottom: 0; left: 52.8%;
z-index: 1;
animation: slideanm 0.8s cubic-bezier(0,.64,.41,1) 2.8s forwards;
transform: translateY(100%);
}


/*---------------------------------------------

movie

----------------------------------------------*/

#topmovarea{
width:100%;
margin:0 auto;
padding: 4em 0;
line-height: 0;
position: relative;
}

#movieM{
background: url("../images/m_movie.png") no-repeat center;
background-size: contain;
width: 11%;
margin: 0 auto;
position: relative;
overflow: hidden;
}

#movieM:before{
content:"";
display: block;
padding-top: 50%;
}

#topmovarea .movie {
width: 70%;
min-width: 900px;
margin: 3em auto 0;
}

#topmovarea .movie .inner {
background-color: #000;
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 0 auto;
overflow: hidden;
}

#topmovarea .movie .inner iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
}

#topmovarea .movie .tab_area {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 10px auto 0;
justify-content: center;
}

#topmovarea .movie .tab_area li {
background: #9d7b1f;
width: 250px;
line-height: 3em;
text-align: center;
font-size: 16px;
margin: 0.4% 0.4% 0;
border-radius: 0.1em;
font-weight: 600;
font-style: normal;
}

#topmovarea .movie .tab_area li a{
width: 100%; height: 100%;
display: block;
text-decoration: none;
color: #fff;
float: left;
}

#topmovarea .movie .tab_area li a.active{
background: #fd6891;
color: #fff;
}


/*---------------------------------------------

about

----------------------------------------------*/

#aboutAll{
background: #fc688f url("../images/about/bg_pc.jpg") no-repeat center top;
background-size: cover;
width: 100%;
padding: 0;
}

#about_catch01{
background: url("../images/about/catch01.png") no-repeat center;
background-size: contain;
width: 100%;
position: relative;
}

#about_catch01:before{
content:"";
display: block;
padding-top: 9.66%;
}

#about_introAll{
background: url("../images/about/img_pc.png") no-repeat center;
background-size: 100% 100%;
width: 100%;
position: relative;
}

#about_introAll:before{
content:"";
display: block;
padding-top: 45.86%;
}

#aboutM{
background: url("../images/m_about.png") no-repeat center;
background-size: contain;
width: 50%; height: 13%;
position: absolute;
top: 17.44%; left: 0;
z-index: 2;
}

#about_catch02{
background: url("../images/about/catch02_pc.png") no-repeat center;
background-size: contain;
width: 100%; height: 4.6%;
position: absolute;
top: 3.6%; left: 0;
z-index: 2;
}

#about_introtxt{
width: 50%;
position: absolute;
top: 38.5%; left: 0;
z-index: 2;
text-align: center;
font-size: 1vw;
line-height: 1.9em;
color: #fff;
}

#about_catch03{
background: url("../images/about/catch03_pc.png") no-repeat center;
background-size: contain;
width: 58%;
position: relative;
margin: 0 auto;
}

#about_catch03:before{
content:"";
display: block;
padding-top: 9.8%;
}

#about_storytxt{
width: 100%;
margin: 0 auto;
padding: 2em 0;
text-align: center;
font-size: 1vw;
line-height: 1.9em;
color: #fff;
}

.about_storyM{
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
color: #000;
font-size: 120%;
line-height: 2em;
}

@keyframes imgslide {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}

#aboutPhotoall{
width: 143%;
position: relative;
}

#aboutPhotoall:before{
content:"";
display: block;
padding-top: 7%;
}

#aboutPhotoA{
background: url("../images/about/photo_pc.png") no-repeat center;
background-size: 100% 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: imgslide 60s linear infinite;
}

#aboutPhotoB{
background: url("../images/about/photo_pc.png") no-repeat center;
background-size: 100% 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; left: -100%;
z-index: 2;
animation: imgslide 60s linear infinite;
}


/*---------------------------------------------

original

----------------------------------------------*/

#originalAll{
width: 100%;
position: relative;
overflow: hidden;
padding: 4em 0;
}

#originalM{
background: url("../images/m_original.png") no-repeat center;
background-size: contain;
width: 14.4%;
margin: 0 auto;
position: relative;
overflow: hidden;
}

#originalM:before{
content:"";
display: block;
padding-top: 39%;
}

#originalTxtBlock{
width: 70%;
min-width: 900px;
margin: 4em auto 0;
display: flex;
flex-wrap: wrap;
align-item: center;
justify-content: space-between;
}

#originalImg{
width: 22.55%;
pointer-events: none;
border: 1px solid #D5D5D5;
}

#originalTxtAll{
width: 70%;
}

#originalTxtM{
width: 100%;
font-size: 1.8vw;
line-height: 1.8em;
color: #9d7b1f;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
margin-bottom: 0;
text-indent: -0.3em;
}

#originalTxtM .originalfontS{ font-size: 80%; text-indent: 0.5em;}
#originalTxtM .originalfontSS{ font-size: 60%;}

.originalNM{
width: 100%;
font-size: 1.4vw;
line-height: 2.5em;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
color: #9d7b1f;
border-bottom: 1px solid #9d7b1f;
margin-bottom: 0.7em;
}

.contentTxt{
width: 100%;
font-size: 1vw;
line-height: 1.8em;
text-align: justify;
}

.linkBtn{
background: #fd6891;
text-align: center;
width: 30%;
font-size: 1vw;
line-height: 50px;
margin: 0 0 0 auto;
}

.linkBtn a{ width: 100%; height: 100%; color: #fff;}



/*---------------------------------------------

comment

----------------------------------------------*/

#commentAll{
width: 100%;
position: relative;
overflow: hidden;
padding: 4em 0;
}

#commentM{
background: url("../images/m_comment.png") no-repeat center;
background-size: contain;
width: 262px; height: 79px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

#commentBlock{
width: 70%; max-width: 1100px;
min-width: 900px;
margin: 4em auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-item: center;
}

.commentBox{
width: 45%;
margin: 0 auto 20px;
}

.commentNM{
background: url("../images/comment/bg_nm.png") no-repeat left;
background-size: auto 100%;
width: 100%; height: 80px;
font-size: 25px;
line-height: 80px;
padding: 0;
margin: 0 0 10px;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
color: #9d7b1f;
text-align: center;
position: relative;
pointer-events: none;
}

.shikaku{
display: none;
}

.commentTxtAll{
width: 100%;
}

.commentTxt01{
width: 100%;
line-height: 1.6em;
text-align: center;
margin: 0 auto 1.5em;
font-size: 12px;
color: #9d7b1f;
margin-top: -10px;
font-weight: 600;
}

.commentTxt02{
width: 100%;
line-height: 1.8em;
letter-spacing: 0.02vw;
text-align: justify;
margin: 0 auto 2vw;
}



/*---------------------------------------------

bnr S

----------------------------------------------*/

#bnrSall{
width: 100%;
padding: 2vw 0;
text-align: center;
border-top: 2px dotted #fc688f;
}

#bnrSall img{ margin: 5px; border: 1px solid #BFBFBF; box-sizing: border-box;}


/*---------------------------------------------

billing

----------------------------------------------*/

#billing{
background: url("../images/top2/billing_full.png") no-repeat center;
background-size: contain;
width: 620px;
margin: 0 auto;
position: relative;
}

#billing:before{
content:"";
display: block;
padding-top: 58.8%;
}

/*---------------------------------------------

footer

----------------------------------------------*/

footer{
background: #fc688f;
width: 100%;
padding: 40px 0 60px;
font-size: 10px; 
letter-spacing: 1px;
line-height: 1.5em;
text-align: center;
color: #fff;
}

#sharearea{
width: 100%; line-height: 35px;
margin: 40px auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.shareTxt{
width: 100%;
text-align: center;
font-family: 'Saddlebag', sans-serif;
font-size: 20px;
color: #fff;
}

.share_i_x{
background: #fff url("../images/sns/i_x.png") no-repeat center;
background-size: 30px auto;
width: 50px; height: 50px;
margin: 7px;
border-radius: 25px;
line-height: 50px;
}

.share_i_line{
background: #fff url("../images/sns/i_line.png") no-repeat center;
background-size: 40px auto;
width: 50px; height: 50px;
margin: 7px;
border-radius: 25px;
line-height: 50px;
}

.share_i_x a,.share_i_line a{
width: 100%; height: 100%;
display: block;
}

#copyright{
background-size: contain;
width: 100%; height: 10px;
margin: 0 auto 20px;
font-size: 10px;
line-height: 10px;
text-align: center;
letter-spacing: 1px;
color: #fff;
}

#privacy{
background-size: contain;
width: 400px; height: 10px;
margin: 40px auto 0;
font-size: 10px;
line-height: 10px;
text-align: center;
letter-spacing: 1px;
}

#privacy a{ color: #fff; text-decoration: underline;}

#btnpagetop{
background: #fff;
width: 60px; height: 60px;
line-height: 60px;
text-align: center;
position: fixed;
bottom: 10px; right: 10px;
z-index: 15;
font-size: 20px;
transition: all .3s;
filter: drop-shadow(2px 2px 2px #d93b62);
color: #fd6891;
}

#btnpagetop a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
color: #fd6891;
}

#btnpagetop:hover{
opacity: 0.7;
cursor: pointer;
}
