.strbody{
margin:0;
padding:0;
box-sizing: border-box; 
height:100%;
}
div{
box-sizing: border-box; 
}
.clear{
clear:both;
display:block;
height:780px;
}
.video_container0{
margin:0 0 0 0;
padding:0;
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(190, 180, 165, 0.3), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
display:block;
} #video_container1{
display:block;
margin: 0; padding: 0px; width: 100%;  height:auto;
}
.videospace{
width:80%;
max-width:840px;
margin:auto;
margin-top:0px;
margin-bottom:10px;
max-height:550px;
display:block;
}
video {
object-fit: scale-down;
display:block;
width:100%;
max-height:480px;
}
#playfilename{
margin: auto; padding: 10px 0 20px 40px; height:auto; width: 80%; border-bottom:solid 1px silver;
white-space:nowrap;
overflow:auto;
color:#888888;
line-height:1rem;
mix-blend-mode:multiply;
display:block;
}
#playfilename .tline1{
font-weight:600;
font-size:1rem;
margin:0 0 0.1rem 0;
line-height:1.3rem;
letter-spacing:1px;
}
#playfilename .tline2{
font-size:0.9rem;
margin:0 0 0 0.5rem;
letter-spacing:1px;
}
#playfilename .tline3{
font-size:0.8rem;
margin:0 0 0 0.5rem;
letter-spacing:-0.02rem;
} .video_container3_2{
width:100%;
height:auto;
margin:auto;
margin:2.3rem 0 0 0rem;
padding:0rem 1rem 0rem 1.5rem;
text-align:center;
display:block;
}
.scroll-group::-webkit-scrollbar{
display:none;
}
.slider-title{
border-radius:3px;
margin:-0.7rem 0 0.3rem 1rem;
color:#888888;
text-align:left;
letter-spacing:-0.05rem;
font-size:1rem;
font-family:'FOT-キアロ Std B';
font-weight:700;
}
.slider-group {
position: relative;
width: 95%;
min-height: 200px;
height: auto;
display: flex;
flex-wrap: nowrap;
overflow-y:hidden;
overflow-x: auto;
margin:0 0.2rem 1rem 0;
padding:0rem 1rem 0 1rem;
}
.slider-card {
flex: 0 0 auto;
width: 167px;
height:95px;
margin: 0 1.2rem 0rem 0;
text-align:left;
position:relative;
}
.slider-img-box {
width:160px;
height:90px;
vertical-align:middle;
overflow:hidden;
border-radius: 5px;
text-align:center;
padding:0;
margin:0 0 0.2rem 0;
display: flex; align-items: center; justify-content: center; }
.slider-img-box img {
width: 100%;
object-fit: scale-down;
border-radius: 5px;
opacity:0.7;
}
.slider-card-img2 {
object-position:0 -1.7rem;
}
.slider-card-img3 {
object-position:0 -1.1rem;
}
.slider-card-img4 {
object-position:0 -0.6rem;
}
.slider-card-img5 {
object-position:0 -0.3rem;
}
.slider-img-box img:hover{
animation: zoomIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
.splist2{
height:1.3rem;
border-radius:3px;
padding:0;
color:#777777;
letter-spacing:-0.05rem;
display:block;
}
div.splist2 .tline1{
font-weight:600;
font-size:0.7rem;
margin-bottom:0px;
line-height:1.4rem;
color:#888888;
}
div.splist2 .tline2{
margin:0;
font-size:0.6rem;
line-height:-0.5rem;
display:block;
}
div.splist2 .tline3{
visibility:hidden;
}
.nowplay{
display:inline-block;
display:none;
height:auto;
position:absolute;
top:10%;
color:white;
font-size:1.1rem;
cursor: pointer;
left: 50%;
transform: translate(-52%, -0%);
-webkit-transform: translate(-52%, -0%);
-ms-transform: translate(-52%, -0%);
font-family: "Georgia", "游明朝" , "游明朝体" , serif;
}
@keyframes zoomIn {
0% {
transform: scale(1);
opacity: 0.7;
}
100% {
opacity: 0.9;
transform: scale(1.1);
}
}
#playfilename2{
visibility:hidden;
} .y_button{
text-decoration:none;
text-align:center;
font-size:0.9rem;
padding:7px 0px 0px 0px;
width:200px;
height:40px;
color:black;
letter-spacing:-0.01rem;
border-radius:19px;
display:inline-block;
color:#7f6e63;
margin-right:3rem;
position:relative;
z-index:100;
}
.y_button_w:hover .y_button{
box-shadow: 2px 2px 3px inset;
background-color:white;
　color:#444444 !important;
border:1px solid #ddcccc;
transform: translate( 2px, 2px)  scale( 1, 1.1);
}
.y_button_w{
display:inline-block;
vertical-align:top;
}
.y_button_s{
margin-top:-2rem;
display:block;
height:50px;
} @media screen and (min-width:700px) and (max-width:950px) {
.clear{
height:700px;
}
} @media screen and (min-width:480px) and (max-width:699px) {
.clear{
height:680px;
}
.videospace{
width:100%;
}
#playfilename{
padding: 10px 0 12px 5px; width: 90%; line-height:1rem;
letter-spacing:-0.02rem;
}
#playfilename .tline1{
font-size:0.8rem;
}
#playfilename .tline2{
font-size:0.6rem;
}
#playfilename .tline3{
font-size:0.6rem;
}
.y_button{
font-size:0.88rem;
padding:8px 0px 0px 0px;
width:190px;
height:40px;
border-radius:19px;
margin-right:1rem;
margin-left:0.2rem;
}
} @media screen and (min-width:100px) and (max-width:479px) { 
.clear{
height:520px;
}
.videospace{
width:100%;
}
#playfilename{
padding: 10px 0 12px 5px; width: 90%; line-height:1rem;
letter-spacing:-0.02rem;
}
#playfilename .tline1{
font-size:0.8rem;
}
#playfilename .tline2{
font-size:0.6rem;
}
#playfilename .tline3{
font-size:0.6rem;
}
.y_button{
font-size:0.88rem;
padding:8px 0px 0px 0px;
width:190px;
height:40px;
border-radius:19px;
margin-right:1rem;
margin-left:0.2rem;
}
}