@charset "utf-8";
/*------------------------------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
/*#wrapper{
    width: 540px;
    font-size: 16px;
}*/
}
/*------------------------------------------------------------------*/
#pg_tittle {
    background: #000;
    box-sizing: border-box;
    color: #FFF000;
    font-size: 36px;
    margin: 0 0 20px;
    padding: 0 20px;
    width: 100%;
}
h1.title {
    width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0px;
    text-align: center;
    letter-spacing: 10px;
}
#contents{
//    width: 960px;
    font-size: 18px;
    line-height:32px;
    margin: 0 auto;
}
#attention{
    border: 4px solid #000;
    box-sizing: border-box;
    font-size: 18px;
    line-height:32px;
    max-width: 800px;
    margin: 60px auto;
    padding: 20px 80px;
    width: 100%;
}
h2{
    width: 400px;
    text-align: center;
    font-size: 36px;
    margin: -50px auto 20px;
    background: #000;
    color: #FFF;
}
#pr_movie {
    width: 800px;
    text-align: center;
    margin: 10px auto;
    display: block;
}
#play_movie{
    text-align: center;
    margin: 10px auto;
    display: block;
}
@media only screen and (max-width: 750px) {
#pg_tittle {
    font-size: 20px;
}
h2 {
    font-size: 20px;
    max-width: 400px;
    width: 90%;
}
#contents p{
    padding: 0 10px;
}
#attention{
    box-sizing: border-box;
    padding: 20px 20px;
    max-width: 440px;
    width: 100%;
}
ul.dc, ul li.dc {
    padding: 0 0 0px 20px;
}
#pr_movie ,#play_movie{
    width: 100%;
}
#pr_movie_box{
    width: 480px;
}
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}