#wrapper {
position: relative;
}
#mcP{
position: absolute;
top: -30px;
right: 21%;
}
.mcas{width:240px;}
.mcas img{width:100%;}
/*-- Pan_box ----------------------*/
#pan_box {
color: #820000;
display: block;
font-weight: bold;
font-size: 0.8em;
position: absolute;
left: 15%;
}
#pan_box a{
color:#820000;
text-shadow: 1px 1px 4px #ffffff, -1px -1px 4px #ffffff,-1px 1px 4px #ffffff, 1px -1px 4px #ffffff;
text-decoration:none;
}
#pan_box a:hover{
color: #820000;
}
/*-- Contents all ----------------------*/
.logo2 {
margin: 44px 0 0 50px;
}
h3{
font-size: 1.8em;
line-height: 2.0em;
letter-spacing: 0.1em;
font-weight: bold;
display: -webkit-flex;
display: flex;
}
h3 strong{
color :#fff;
display: block;
text-align: center;
text-shadow: -1px -1px 5px rgba(139,102,102,0.3), -1px -1px 8px rgba(190,185,160,0.6);
width: 20%;
}
h3 span{
display: block;
padding: 0 0 0 20px;
text-align: left;
width: 80%;
}
#ttlR01 strong{
background: rgb(219,138,18);
background: -moz-linear-gradient(153deg, rgba(219,138,18,1) 50%, rgba(108,0,0,1) 100%);
background: -webkit-linear-gradient(153deg, rgba(219,138,18,1) 50%, rgba(108,0,0,1) 100%);
background: linear-gradient(153deg, rgba(219,138,18,1) 50%, rgba(108,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#db8a12",endColorstr="#6c0000",GradientType=1);
}
#ttlR02 strong{
background: rgb(159,25,217);
background: -moz-linear-gradient(153deg, rgba(159,25,217,1) 50%, rgba(0,0,164,1) 100%);
background: -webkit-linear-gradient(153deg, rgba(159,25,217,1) 50%, rgba(0,0,164,1) 100%);
background: linear-gradient(153deg, rgba(159,25,217,1) 50%, rgba(0,0,164,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9f19d9",endColorstr="#0000a4",GradientType=1);
}
#ttlR03 strong{
background: rgb(219,25,154);
background: -moz-linear-gradient(153deg, rgba(219,25,154,1) 50%, rgba(108,0,12,1) 100%);
background: -webkit-linear-gradient(153deg, rgba(219,25,154,1) 50%, rgba(108,0,12,1) 100%);
background: linear-gradient(153deg, rgba(219,25,154,1) 50%, rgba(108,0,12,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#db199a",endColorstr="#6c000c",GradientType=1);
}
#ttlCast strong{
background: rgb(195,12,12);
background: -moz-linear-gradient(153deg, rgba(195,12,12,1) 50%, rgba(108,0,0,1) 100%);
background: -webkit-linear-gradient(153deg, rgba(195,12,12,1) 50%, rgba(108,0,0,1) 100%);
background: linear-gradient(153deg, rgba(195,12,12,1) 50%, rgba(108,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c30c0c",endColorstr="#6c0000",GradientType=1);
}
.wait {
background: rgb(255,255,255,0.8);
border: solid 1px #ccc;
display: block;
font-size: 1.5em;
margin: 20px auto;
text-align: center;
padding: 20px;
}
#title{
background: url(../images/sp/bg_head.png) repeat-x center center;
font-family: vdl-logog, sans-serif;
font-weight: 400;
font-style: normal;
margin: 20px 0 0 0;
width: 100%;
}
#block2 {
/* margin: 100px; */
margin: 60px auto;
width: 80%;
}
#block3 ul {
display: -webkit-flex;
display: flex;
font-size: 1.5em;
line-height: 1.5em;
margin: 30px 0;
}
#block3 ul li{
width: 33%;
margin: 20px 0.5%;
}
#block3 ul li span{
font-size: 0.9em;
}
#block3 ul li img{
margin: 0 0 18px;
width: 75%;
}
/* 動画囲いタグ ----------------------　<div class="video-container"></div> */
.video-container {
padding: 56.25% 0 0;
position: relative;
width: 100%;
}
.video-container iframe{
height: 100% !important;
position: absolute;
right: 0;
top: 0;
width: 100% !important;
}
.ttlBox{
padding: 10px 0 0 0;
}
.ttlBox .in{
display: -webkit-flex;
display: flex;
margin: 20px auto 0;
width: 1200px;
}
.ttlBox .in p img{
width: 100%;
}
.ttlText {
font-size: 1.3em;
line-height: 1.7em;
margin: 40px auto;
display: block;
width: 80%;
}
#ttlImgArea {margin: 0 auto 50px !important;}
.ttlBox .time{
color: #c30c0c;
display: block;
font-size: 1.5em;
line-height: 1.5em;
margin: 20px 0 0 0;
text-shadow: 1px 1px 4px #ffffff, -1px -1px 4px #ffffff,-1px 1px 4px #ffffff, 1px -1px 4px #ffffff;
}
#sns_button_pc {
position: absolute;
right: 15%;
width: 80px;
}
/* -------------------------------------------------  */
.blockBox ul{
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
padding: 30px 0;
}
.blockBox ul li{
background: rgb(255,255,255,0.8);
border: solid 1px #ccc;
display: block;
margin: 0 0.5% 20px;
padding: 20px;
width: 31.3%;
}
.blockBox ul li.slide{
display: table;
/*width: 100%;*/
}
.blockBox ul li.slide .inner{
display: table-cell;
vertical-align: middle;
}
.blockBox ul li.sl{
margin-left: 17%;
}
.blockBox ul li img {
aspect-ratio: 16 / 20;
margin: 0 auto;
max-height: 30vw;
object-fit: contain;
width: 80%;
}