@charset "utf-8";
/* CSS Document */
html { overflow-x: hidden;}
body.player12 { /*background: #170D11;*/ background-size: cover;}
.player12 #player12_mainWrap { height: auto; min-width: 200px; max-width: 100%;}
.player12 #player12_mainWrap figure { margin: 0 auto;}
.player12 #player12_mainWrap h1 {
    position: static;
    z-index: 1; text-align: center; margin-top: -13vw; margin-bottom: 3vw;
}

.player12 #player12_mainWrap p img { width: 60%; height: auto;}
.player12 #player12_mainWrap p {
    position: static;
    text-align: center; margin-bottom: 5vw;
}

.player12 #content { /*background-image: url("../img/player12/bg.jpg"); background-repeat: no-repeat; background-size: cover;*/ width: auto;margin: 0; padding-bottom: 50px;}
.player12 #content > *,.player12 #content > div { margin-left:auto; margin-right: auto; max-width: 900px;}
.player12 #content div img { margin-left: -42px;}
.player12 #content > div p { }

.banner { display: flex;justify-content: center; gap:20px; margin-bottom: 5vw;}
.banner a { display: block; width: 30%;}
.banner a img { width: 100%; height: auto;}
p.mT {margin-top: -35px;}

@media screen and (max-width:900px){
    .player12 #player12_mainWrap h1 img { width: 80%; height: auto;}
    .player12 #player12_mainWrap p img { width: 90%; height: auto;}
    .player12 #content img { width: 100%; height: auto;}
    .player12 #content { padding: 0 10px 20px 10px; overflow: hidden;}
    .player12 #content > div { width: auto; margin-bottom: 10px;}
    .player12 #content > p { margin-bottom: 10px;}
    .player12 #content div img {
        width: calc(100% + 8.2vw);
    }
    .player12 #content div img {
    margin-left: -4vw;
}
    .banner { flex-direction: column;}
    .banner a {  width: 90%; margin: 0 auto;}
    p.mT {margin-top: 0;}
}