@charset "UTF-8";
@import url("reboot.css");

body{font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
background: #FEF4D6}
article {
    width: 1024px;
    margin: 0 auto;
	background: #FFFFFF;
	padding: 40px 20px;
}

h2{
    font-size: 1.8rem;
    color: #675732;
    background-color: #DEB74F;
    padding: 10px 20px;
    margin-bottom: 30px;
}
h3{
	font-size: 1.8rem
}
h4{
	font-size: 1.2rem;
	background-color: #FEF4D6;
	display: inline-block;
	padding: 5px
}
h5{
	font-size: 1.2rem;
	padding: 5px
}
hr{
	margin-bottom: 20px;
	margin-top: 20px
}
.textred{
    color:red;
}
#caption,#schedule,#program,#cast,#contact,#adsale{
	margin-bottom: 60px
}
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pageTop i {
  padding-top: 6px
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 9px 6px 0 8px;
  border-radius: 30px;
  width: 45px;
  height: 45px;
  background-color: #ADADAD;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.sp{
	display: none;
}
.corona_info{
	border: #FF0004 solid 2px;
	margin-bottom: 40px;
	padding: 20px;
}
.corona_info p{
	padding: 0;
	margin: 0;
	font-size: 1.1rem;
	color: #FF0004
}
/* ヘッダー */
header{
    background-color: #675732;
    position: fixed;
    z-index: 1;
    width: 100%;
}
header h1{
	color: #FFFFFF;
}
header nav{
	width: 1024px;
	margin:0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	justify-content:space-between
}
header nav ul{
    font-size: 1.2rem;
	color: #FFFFFF;
	margin-top: 13px;
}
header nav ul li {
    display: inline;
    padding-left: 40px;
}
header nav a{
    color: #FFFFFF
}
header nav a:hover{
    color: #BCBCBC;
}

#mainVisual {
    padding-top: 88px;
}
#mainVisual img {
	display: block;
	margin: 0 auto;
}
/* 特典 */
.tokuten {
	padding: 10px;
	margin-bottom: 60px;
}
.tokuten h3{
    background-color: #44308E;
    display: inline;
    margin-right: 20px;
    font-size: 1.2rem;
    padding: 10px;
    color: #FFFFFF;
}
.tokuten p{
	display: inline;
	font-size: 1rem
}
/* 演目 */
.programcast{
	margin-left:92px
}
/* 出演 */
.profile {
    display: flex;
	margin-bottom: 40px
}
.profile p{
	font-size: 1rem
}
.profile img{
	width: 240px;
	height: auto;
}
.profile .subcast img{
	width: 210px;
	height: auto;
}
figure {
	margin-right: 30px
}
/* 先行予約 */
#adsale {
	text-align: center
}
#adsale h2{
	text-align: left
}
.saleday {
    font-size: 2.4rem;
    margin-bottom: -12px;
}
.saleday span{
    font-size: 4rem;
}
.button{
    width: 80%;
    margin: 0 auto;
    background: #DC9B7F;
    border-radius: 5px;
    margin-bottom: 30px;
}
.button:hover{
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
}
.button p{
    margin: 0;
    text-align: center;
}
.button a{
    font-size: 2rem;
    color: #FFFFFF;
    display: block;
    padding: 10px;
}
.button a:hover{
    text-decoration: none;
}
#adsale ul{
	text-align: left;
	list-style: none;
	width: 760px;
	margin: 0 auto 20px auto
}
#adsale ul li:before{
	content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-1rem; /* 1文字分、左に寄せる */}

.saletel {
	font-size: 1.2rem;
	color: #ffffff;
	background: linear-gradient(-135deg, #340500, #010005);
	width: 760px;
	margin: 0 auto 20px auto;
	padding: 5px
}
.hurikomi{
	width: 760px;
	text-align: left;
	margin: 0 auto 20px auto
	
}
/*お問い合わせ */
#contact p{
	text-align: center;
	font-size: 1.2rem;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"
}
/* フッター */
footer{
	text-align: center;
	color: #ffffff;
	background: linear-gradient(#010005, #340500);
	padding: 20px;
}
/* テーブル */

table {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 0.8rem;
	width: 100%;
	border-collapse:collapse;
	color: #2C2C2C;
}
tbody{
	width: 100%;
}
th {
    background-color: #44308E;
    border: solid 1px #ccc;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
}
td {
  border: solid 1px #ccc;
  padding: 10px;
}
caption p{
	margin: 0;
	color: #000000;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.tbl-r05 td:first-child {
  background: #FFF4D6;
}
	.sp-table{
	display: none;
	}
@media screen and (max-width: 640px) {
	.sp-table{
		display:table
	}
  .tbl-r05 {
    width: 100%;
	margin: 0 auto;
  }
  .tbl-r05 .thead {
    display: none;
  }
  .tbl-r05 tr {
    width: 100%;
  }
  .tbl-r05 td {
    display: block;
    text-align: right;
    width: 100%;
  }
  .tbl-r05 td:first-child {
    background-color: #44308E;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
  }
  .tbl-r05 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
	margin-bottom: 40px;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
@media screen and (max-width: 640px) {
header{
	background: #000000;
	position:static;
    z-index:1;
	width: 100%;
}
header h1{
	color: #FFFFFF;
	text-align: center
}
header nav{
	width: 100%;
	margin:0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	display:block;
}
header nav ul{
    font-size: 1rem;
	color: #FFFFFF;
	margin-top: 13px;
	padding: 0;
	margin: 0;
	text-align: center;
	
}
header nav ul li {
    display: inline;
    padding-left: 10px;
	padding-right: 10px;
}
header nav a{
    color: #FFFFFF
}
header nav a:hover{
    color: #BCBCBC;
}
#mainVisual {
    padding-top: 0px;
}
#mainVisual img {
	display: block;
	margin: 0 auto;
}
article {
    width: 100%;
    margin: 0 auto;
	background: #FFFFFF;
	padding: 40px 20px;
	box-sizing: border-box
}
	.sp{
		display: block;
	}
	img {max-width: 100%;
	height: auto;}
/* 特典 */
.tokuten {
	padding: 10px;
	margin-bottom: 60px;
}
.tokuten h3{
    background-color: #44308E;
    display: inline;
    margin-right: 20px;
    font-size: 1.2rem;
    padding: 10px;
}
.tokuten p{
	display: block;
	margin-top: 20px;
	font-size: 1rem
}
/* 演目 */
.programcast{
	margin-left:0px
}
/* 先行予約 */
#adsale {
	text-align: center
}
#adsale h2{
	text-align: left
}
.saleday {
	font-size: 1.5rem
}
.saleday span{
	font-size: 2rem
}
.button{
    width: 80%;
    margin: 0 auto;
    background: #DC9B7F;
    border-radius: 5px;
    margin-bottom: 30px;
}
.button:hover{
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
}
.button p{
    margin: 0;
    text-align: center;
}
.button a{
    font-size: 1.2rem;
    color: #FFFFFF;
    display: block;
    padding: 10px;
}
.button a:hover{
    text-decoration: none;
}
#adsale ul{
	text-align: left;
	list-style: none;
	width: 90%;
	margin: 0 auto 20px auto
}
#adsale ul li:before{
	content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-1rem; /* 1文字分、左に寄せる */}
	#adsale h3{
		font-size: 1.1rem
	}
.saletel {
	font-size: 1.2rem;
	color: #ffffff;
	background: linear-gradient(-135deg, #340500, #010005);
	width: 90%;
	margin: 0 auto 20px auto;
	padding: 5px
}
.hurikomi{
	width: 100%;
	text-align: left;
	margin: 0 auto 20px auto
	
}
/* 出演 */
.profile {
    display: block;
	margin-bottom: 40px
}
.profile p{
	font-size: 0.9rem
}
.profile img{
	width: 100%;
	height: auto;
}
.profile .subcast img{
	width: 100%;
	height: auto;
}
figure {
	margin-right: 0
}
.pc{display: none}
}