@charset "utf-8";
/* =================================================================================
Reset
================================================================================= */
html{overflow-y:scroll;}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form{margin:0; padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;}ul,li{list-style:none;}img{border:none; vertical-align:bottom;}
a{color:#FE7378; text-decoration:none;-moz-transition-duration: .3s all ease-in;-webkit-transition-duration: .3s all ease-in;transition-duration: .3s all ease-in;}a:hover{text-decoration:none;}
input[type=text],input[type=password],textarea,input[type=e-mail]{-webkit-appearance:none;height:23px;padding:5px;border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;font-size:100%;box-shadow:none;}
select{height:35px;padding:5px;border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;font-size:100%;box-shadow:none; background-color:#fff !important;}
input[type=submit]{-webkit-appearance:none;}
input[type=button]{border:none; cursor:pointer;}
@media only screen and (max-width:640px){input[type=text],input[type=password],textarea,input[type=e-mail],select{height:35px;-webkit-box-sizing:border-box;box-sizing:border-box;}}
strong {font-weight:normal;}
table{border-collapse:collapse;}th{text-align:left;}
input[type=submit]{border:none; cursor:pointer; font-size:14px;}input[type="radio"], input[type="checkbox"]{margin:0 5px 0 0; vertical-align:-1px;}
input[type="text"]:focus,textarea:focus,input[type="e-mail"]:focus,input[type="password"]:focus{border:1px solid #ff2673 !important;background-color:#fff;}
input:-ms-input-placeholder{color:#999;}
/* ------- HTML5 ------ */
address,article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}figure{margin:0; padding:0;}[hidden], command, datalist, menu[type=context], rp, source{display:none;}
header,div, p, a, h1,h2,h3, li,article,section,th,td {box-sizing: border-box;}
/* =================================================================================
Layout
================================================================================= */
body {
min-width:980px;
font-size:16px;
font-family: 'Noto Sans JP', sans-serif;
line-height:1.5;
background-color:#fff;
color:#3c3c3c;
font-weight: 500;
text-align:left;
-webkit-text-size-adjust: 100%;/*iPhone自動フォント調整機能解除*/
overflow: hidden;
}

body .fadeout {
opacity: 0;
}

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

#container{
    background: linear-gradient(91deg, #ffe9de, #ffe9be, #fffec5, #dcffd9, #d1edfb, #f1e0ff, #ffe5f2);
}

.wrapper{
width:980px!important;
margin:0 auto;
padding:40px 10px;
}

footer{
padding:22px 10px;
background:#020202;
text-align:center;
color:#fff;
line-height:1;
}

@media only screen and (max-width:640px){
body{
    min-width:375px;
	font-size: 14px;
}

.wrapper{
    width:100%!important;
    padding:30px 15px;
}

footer{font-size:12px;}
}

.fCGray{color:#999 !important;}

.cmnWrap01 {
padding: 20px 40px 30px;
border-radius: 15px;
box-sizing: border-box;
background: #fff;
box-shadow: 1px 1px 2px 0 rgb(35 24 21 / 20%);
}

.bgYellow{
	background-color: #fff6e6;
}

.cmnTtl_1{
position:relative;
min-height:80px;
padding:10px;
color:#fff;
background: #f6aa7d;
font-size:36px;
text-align:center;
box-sizing:border-box;
}


@media only screen and (max-width:640px){
.cmnTtl_1{
    font-size:24px;
    min-height:60px;
}
}



/* =================================================================================
style
================================================================================= */

/* mv
------------------------------------------------------- */
.mvArea{
max-width:1340px;
width:100%;
margin:0 auto;
}

.mvArea img{
width:100%;
height:auto;
}

.mvArea .mv_pc{
    display: block;
}

.mvArea .mv_sp{
    display: none;
}


@media only screen and (max-width:640px){
    .mvArea .mv_pc{
        display: none;
    }

    .mvArea .mv_sp{
        display: block;
    }
}

/* infoArea
------------------------------------------------------- */
.infoArea{
width:960px;
margin:0 auto;
padding:40px;
background: rgba(255,255,255,0.9);
box-shadow: 0px 0px 6px #ccc;
}

.infoArea .ttl{
margin-bottom:30px;
text-align:center;
color:#ff985b;
font-size:36px;
}

.infoLst{
position:relative;
border-top:1px dashed #999999;
}

.infoLst li{
display:flex;
position:relative;
padding:20px;
border-bottom:1px dashed #999999;
}

.infoLst::before,.infoLst::after,
.infoLst li::before,.infoLst li::after{
content:"";
display:block;
position:absolute;
width:7px;
height:7px;
border-radius:7px;
background-color:#ff985b;
z-index:1;
}

.infoLst::before{
top:-3px;
left:0;
}

.infoLst li::before,
.infoLst li:last-of-type::before{
top:auto;
bottom:-3px;
left:0;
}

.infoLst::after{
top:-3px;
right:0;
}

.infoLst li::after,
.infoLst li:last-of-type::after{
top:auto;
bottom:-3px;
right:0;
}

.infoLst .date{
flex-basis:90px;
font-size:14px;
}

.infoLst .txt{
flex:1;
margin-left:50px;
}


@media only screen and (max-width:640px){
.infoArea{
    width:100%;
    padding:15px 20px;
}

.infoArea .ttl{
    margin-bottom:15px;
    font-size:24px;
}

.infoLst li{
    flex-direction:column;
    padding:10px;
}

.infoLst .date{
    flex-basis:auto;
    font-size:11px;
}

.infoLst .txt{margin:5px 0 0;}
}


/* introArea
------------------------------------------------------- */
.emphaBox{
padding:10px;
text-align:center;
background: rgba(255,255,255,0.5);
box-shadow: 0px 0px 6px #ccc;
box-sizing:border-box;
}

.emphaBoxInner{
position:relative;
padding:20px;
color:#fff;
background: #60b973;
box-sizing:border-box;
}

.emphaBox .logo{
width:55px;
height:auto;
}

.emphaBox .ttl{
margin-top:5px;
font-size:36px;
line-height:1.1;
}
.emphaBox .ttl .sub{
display:block;
margin-top:5px;
font-size:18px;
}


@media only screen and (max-width:640px){
.emphaBox{
    width:100%;
    box-sizing:border-box;
}

.emphaBox .ttl{font-size:24px;}
.emphaBox .ttl .sub{font-size:14px;}

.emphaBox .detail{
    width:85%;
    margin:0 auto;
    text-align:left;
}
}


/* storyArea
------------------------------------------------------- */

.storyArea{
    font-family: 'Noto Serif JP', serif;
	position: relative;
	padding: 35px 30px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    font-weight: bold;
	text-align:center;
    overflow: hidden;
    box-shadow: 0px 0px 6px #ccc;
}

.storyArea .story{
    position:relative;
    min-height: 450px;
    padding: 45px 0 60px;
    box-sizing: border-box;
    background-image: linear-gradient(#e9e9e9 1px, transparent 1px);
    background-size: 100% 25px;
    background-position: top 20px left 20px;
    z-index: 1;
}

.storyArea::before,
.storyArea::after,
.storyArea .story::before,
.storyArea .story::after,
.storyArea .story > .ttl::before{
	content: "";
	display: block;
	position: absolute;
	background: no-repeat top left / 100% auto;
}

.storyArea::before{
    top: 15px;
    left: 50%;
    width: calc(100% - 40px);
    border-top: dotted 15px #e1e1e1;
    transform: translateX(-50%);
}

.storyArea::after{
    width: 570px;
    height: 312px;
    background-image: url("../images/bg_story_staff_notation_colorful.png");
    bottom: -10px;
    left: -8px;
}

.storyArea .story::before{
	background-image: url("../images/img_story_flower_pink.png");
	width: 146px;
	height: 146px;
    top: 4px;
    left: -15px;
    z-index: -1;
}

.storyArea .story::after{
	background-image: url("../images/img_story_flower_blue.png");
	width: 240px;
    height: 230px;
    bottom: -32px;
    right: -20px;
    z-index: -1;
}

.storyArea .story > .ttl{
    position: relative;
    margin-bottom: 30px;
    font-size: 34px;
    letter-spacing: 8px;
}

.storyArea .story > .ttl::before{
    width: 450px;
    height: 96px;
    background-image: url("../images/img_story_notation_green.png");
    top: -46px;
    right: -176px;
    z-index: -1;
}

@media only screen and (max-width:640px){
    .storyArea{
        padding: 25px 15px;
    }

    .storyArea .story{
        min-height: 360px;
        padding: 25px 0 60px;
        background-size: 100% 22px;
    }

    .storyArea::before{
        width: calc(100% - 30px);
        border-top-width: 10px;
    }

    .storyArea::after{
        width: 285px;
        height: 156px;
        bottom: 6px;
        left: -3px;
    }

    .storyArea .story::before{
        width: 54px;
        height: 54px;
        top: 14px;
        left: -7px;
    }

    .storyArea .story::after{
        width: 120px;
        height: 115px;
        bottom: -32px;
        right: -20px;
    }

    .storyArea .story > .ttl{
        margin-bottom: 25px;
        font-size: 26px;
        letter-spacing: 6px;
    }

    .storyArea .story > .ttl::before{
        width: 225px;
        height: 48px;
        top: 16px;
        right: -126px;
    }
}


/*****fadeup***************************/
.fadeUpTrigger{
    opacity: 0;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }

    to {
    opacity: 1;
    transform: translateY(0);
    }
}


/*****fadeleft***************************/    
.fadeLeftTrigger{
    opacity: 0;
}

.fadeLeft{
animation-name:fadeLeftAnime;
animation-fill-mode:forwards;
animation-duration:3s;
opacity:0;
}

@keyframes fadeLeftAnime{
from {
    opacity: 0;
    transform: translateX(-40px);
}

to {
    opacity: 1;
    transform: translateX(0);
}
}


/* performerArea
------------------------------------------------------- */

.bdrBtmTtl{
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 30px;
	font-size: 24px;
    font-weight: bold;
	text-align: center;
}

.bdrBtmTtl::after{
	content: "";
	display: block;
	position: absolute;
	width: 100px;
	height: 4px;
	bottom: 0;
	left: 50%;
	background-color: #ff985b;
	transform: translateX(-50%);
}

@media only screen and (max-width:640px){
	.bdrBtmTtl{
		margin-bottom: 20px;
		padding-bottom: 8px;
		font-size: 20px;
	}
	
	.bdrBtmTtl::after{
		width: 80px;
		height: 3px;
	}
}

.introduction .item{
margin-top:40px;
}

.twoClm{
display:flex;
align-items: flex-start;
margin-left:-40px;
}

.twoClm .clm{
margin-left:40px;
}

.twoClm.img .clm.img{
flex-basis:360px;
}

.twoClm.performer .clm.img,
.twoClm.staff .clm.img{
flex-basis:270px;
}

.twoClm.performer .clm.txt .name,
.twoClm.staff .clm.txt .name{
margin-bottom:15px;
font-size:20px;
font-weight:bold;
}

.twoClm.performer .clm.txt .ruby,
.twoClm.staff .clm.txt .ruby{
font-size:16px;
}

.twoClm.img .clm.txt,
.twoClm.performer .clm.txt,
.twoClm.staff .clm.txt{flex:1;}

.twoClm.img .clm.img img,
.twoClm.performer .clm.img img,
.twoClm.staff .clm.img img{width:100%;height:auto;}

@media only screen and (max-width:640px){
.twoClm{
    margin-left:0;
}

.twoClm.row{
    flex-direction:column;
}

.twoClm.row .clm{margin:0;}

.twoClm.img .clm.img{
    flex-basis:100%;
    margin:0 10px 15px;
}

.twoClm.performer .clm.img,
.twoClm.staff .clm.img{
    flex-basis:auto;
    width:250px;
    margin:0 auto 10px;
}

.twoClm.performer .clm.txt,
.twoClm.staff .clm.txt{
    max-width:400px;
    margin:0 auto;
}

.twoClm.performer .clm.txt .name,
.twoClm.staff .clm.txt .name{
    text-align:center;
    font-size:18px;
    margin-bottom: 10px;
}

.twoClm.performer .clm.txt .ruby,
.twoClm.staff .clm.txt .ruby{
    display:block;
    font-size:14px;
}
}

.itemGrid{
display:flex;
flex-wrap:wrap;
margin-left:-40px;
}

.itemGrid .twoClm{
margin-left:-20px;
}

.itemGrid .twoClm .clm{
margin-left:20px;
}

.itemGrid .item{
width:calc(50% - 40px);
margin-top:40px;
margin-left:40px;
}

.itemGrid .twoClm .clm.img{
flex-basis:190px;
padding:5px;
background:#b1967f;
box-sizing:border-box;
}

.staff .itemGrid .item:first-child{width: 100%;}


@media only screen and (max-width:640px){
.itemGrid .twoClm {margin:0;}

.itemGrid{
    flex-direction:column;
    margin-left:0;
}

.itemGrid .item{
    width:100%;
    margin:0 auto 30px;
}

.itemGrid .item:last-child{margin-bottom:0;}

.itemGrid .twoClm .clm.img{
    flex-basis:auto; 
    width:200px;
    margin:0 auto 10px;
}
}

.mainPerformer{
	display: flex;
	flex-wrap: wrap;
	margin: -30px 0 0 -40px;
}

.mainPerformer .clm{
	width: 266px;
	margin: 30px 0 0 40px;
}

.mainPerformer .name{
    margin-top: 10px;
    line-height: 1.1;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.mainPerformer .name .ruby{
    font-size: 12px;
}

.mainPerformer .name .role{
    display: block;
    margin-top: 10px;
    font-size: 14px;
}

.subPerformer{
	display: flex;
	flex-wrap: wrap;
	margin: -20px 0 0 -10px;
}

.subPerformer .clm{
	width: 212px;
	margin: 20px 0 0 10px;
}

.mainPerformer .clm img,
.subPerformer .clm img{
	width: 100%;
}

.subPerformer .name{
    margin-top: 8px;
    line-height: 1.3;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

@media only screen and (max-width:640px){
    .mainPerformer{
        display: block;
        margin: 0;
    }

    .mainPerformer .clm{
        width: 266px;
        margin: 30px auto 0;
    }

    .mainPerformer .clm:first-child{margin-top: 0;}

    .mainPerformer .name{
        margin-top: 10px;
        line-height: 1.1;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }

	.subPerformer{
		max-width: 380px;
		justify-content: space-between;
		margin: -15px auto 0;
	}
	
	.subPerformer .clm{
		width: calc(50% - 5px);
		max-width: 180px;
		margin: 15px 0 0;
	}
}


/* eventInfoArea
------------------------------------------------------- */
.lineTbl{
width:100%;
}

.lineTbl tr{
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
}

.lineTbl th{
width:140px;
vertical-align:top;
}

.lineTbl th,
.lineTbl td{
padding:20px;
}

@media only screen and (max-width:640px){
.lineTbl th{width:100px;}

.lineTbl th,
.lineTbl td{
    padding:10px;
}
}


/* ticketInfoArea
------------------------------------------------------- */
.ticketInfo dt {
font-weight:bold;
margin-bottom:5px;
}

.ticketInfo dd {
margin:0 0 10px 5px;
}

.discLi li {
position: relative;
margin-left:10px;
margin-bottom:10px;
}
.discLi li:after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
background-color: #666;
border-radius: 100%;
margin-left:5px;
}


/* backNumberArea
------------------------------------------------------- */
.backNumberArea .ttl{
text-align:center;
font-size:24px;
}

.rowFlxBox{
display:flex;
flex-wrap: wrap;
margin-left:-30px;
}

.rowFlxBox .item{
margin-left:30px;
text-align:center;
flex-basis: calc(20% - 30px);
margin-bottom: 30px;
}

.rowFlxBox .item img{
display:block;
margin-bottom:10px;
width:100%;
height:auto;
}

@media only screen and (max-width:640px){
.backNumberArea .ttl{
    font-size:20px;
}

.rowFlxBox{
    flex-wrap:wrap;
    margin-top:-20px;
}

.rowFlxBox .item{
    flex-basis:calc(50% - 30px);
    margin-top:20px;
}

.rowFlxBox .item img{margin-bottom:5px;}
}

/* sponsorArea
------------------------------------------------------- */
.sponsorArea .ttl{
font-size:24px;
text-align:center;
}

.bnrArea{
display:flex;
justify-content:center;
}

.bnrArea span{
background:#fff;
height:70px;
padding:10px 5px;
box-sizing:border-box;
}

.bnrArea img{
width:auto;
height:100%;
}

@media only screen and (max-width:640px){
.bnrArea{flex-wrap:wrap;}
}


/*shop btn*/
.shopLinkArea{
text-align: center;
margin-bottom:30px;
}

.shopLinkArea .btnShop{
display: block;
position: relative;
width: 490px;
margin: 0 auto 10px;
padding: 17px 10px 12px;
box-sizing: border-box;
color: #fff;
text-align: center;
font-size: 18px;
background-color: #f74551;
transition: all .3s;
font-weight: bold;
}

.shopLinkArea.cmnBtnArea{
padding-top: 50px;
border-top:10px solid #f2f2f2;
}

.shopLinkArea.cmnBtnArea .btnShop{background-color: #020202;}

.shopLinkArea .btnShop:after{
position: absolute;
top: 45%;
right: 15px;
border-top: 10px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
content: '';
}

.shopLinkArea .btnShop:hover{
background-color: #d0b24c;
text-decoration: none;
}

.shopLinkArea.cmnBtnArea .btnShop:hover{
background-color: #f7a734;
}


@media only screen and (max-width:640px){
.shopLinkArea{margin-bottom:20px;}

.shopLinkArea .btnShop{
    width: 100%;
    padding: 17px 10px 12px;
    font-size: 18px;
}

.shopLinkArea.cmnBtnArea{padding-top: 30px;}
}

/* =============================================================
movie
============================================================= */
.youtubeWrap{
    width:960px;
    margin: 0 auto;
}

.youtubeWrap{width: 100%;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


@media only screen and (max-width:640px){
    .youtubeWrap{width: 100%;}
}