/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height:100%; overflow-y:scroll; }
body{ height:100%; margin:0; padding:0; -webkit-text-size-adjust:100%;}
form{ margin:0; padding:0; }
p{ margin:0; padding:0; }
a, a:hover{ text-decoration:none; outline:none; }
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-size:100%; font-weight:normal; line-height:1.3; }
ul, dl, dt, dd{ margin:0; padding:0; }
li, ol{ margin:0; padding:0; list-style:none; }
table{ border:0; border-collapse:collapse; border-spacing:0; }
caption, th{ text-align:left; }
.clear{ clear:both; margin:0; padding:0; font-size:0; line-height:0; }
sup{ font-size:60%; }
header, nav, article, aside, section, footer{ display:block; }

@media (max-width: 768px) {
#wrapper{ overflow: visible!important}
}
#innerframe{ margin-top: 0;}
#dgs_tops img{ border:0; font-size:0; line-height:0;vertical-align:bottom; }
img{vertical-align: bottom}

.sp_on { display:none}
@media (max-width: 768px) {
.pc_on{ display:none}
.sp_on { display:block}
}

/* ************ dgs_top ************ */

body{ background: url(../images/bg.jpg) center -60px no-repeat; background-size: cover;}
.hover img { opacity: 1; transition: opacity 0.2s ease-out; }
.hover img:hover { opacity: 0.7; transition: opacity 0.2s ease-out; }
.hoverOpacity img { opacity: 0.7; transition: opacity 0.2s ease-out; }
.hoverOpacity img:hover { opacity: 1; transition: opacity 0.2s ease-out; }

header{ background: url(../images/header_bg_sp.jpg) center 0 no-repeat; background-size: contain;position: relative; padding-bottom: 24.8%}
h1{ width:18%; position: absolute; top: 7%; left: 20%}
h2{ width:52%; position: absolute; top: 3%; left: 5%}

#movie{ background: #000000 }
#movie #movie_inner_sp{ line-height:0; width: 100%; max-width: 1100px; background: #000; margin: 0 auto}
#movie #movie_inner_sp iframe{ width: 320px; height: 180px; padding-top: 0; overflow: hidden; margin: 0 auto; display: block}
#movie p{ color: #FFFFFF; font-size: 20px ;line-height: 1.2; padding: 4%}
#movielist{ background: #F4F4F4; padding: 1% 4% 5%; }
#itemContainer{ overflow: hidden}
#movielist ul{max-width: 1000px; margin: 0 auto;}
#movielist li{ width: 32.5%; margin:0 1% 1% 0 ; float: left;display: inline-block; position: relative}
#movielist li:nth-child(3n){margin:0 0 2% 0}
#movielist li img{ width: 100% }
#movielist li p{ background: rgba(1, 1, 1, 0.7) none repeat 0 0; color: #fff;font-size: 18px;  width: 30px; height: 30px; line-height: 30px; text-align: center;position: absolute; top: 0 ;right: 0}

/* html5video*/
#dgs_top #html5video_sp{ display:none; letter-spacing: normal; border-bottom: 1px solid #C8C8C8;}
#dgs_top #html5video_sp div{ display:none; }
@media (max-width: 768px) {
#dgs_top #html5video_sp{ letter-spacing: normal; order: 3;width: 100%;background: #FFFFFF;}
#dgs_top #html5video_sp #registration_tit{ padding: 2%;border-top: 1px solid #3a3a3a;border-bottom: 1px solid #3a3a3a; text-align: center;font-size: 14px;}
#dgs_top #html5video_sp div{ width:100%; display: none;padding:3%; text-align:center; letter-spacing: normal; order:3;}
#dgs_top #html5video_sp div p{ margin-bottom:10px; text-align: left; font-family: 'futura_md_btmedium'; font-size: 13px;}
#dgs_top #html5video_sp div p span{ font-size: 14px; font-weight: bold}
}

#link_other a{ width: 90%; max-width: 460px; background: #FFFFFF; display: block; border: 2px solid #000000 ; padding: 3% 3%; margin: 5% auto; font-size: 18px; text-align: center; color: #000000; }
#link_other a:hover{background: #ffcc00; }

#footer{ min-width: inherit; background: url(../../etc/designs/daisuki/images/bg.jpg) repeat 0 0 / 25px 25px ;color: #333 ;position: static;padding: 0;margin-top: 0; height: 153px;text-align: center; }
#footer:before{content:"" ;display:block;	height:2px;	width:100%;	background:url(../../etc/designs/daisuki/images/footer_border.jpg) repeat-x 0 0 ;  }
#footer #top_btn{ width: 12%; max-width: 46px; margin: 0 auto;top: -10%; position: relative}
#footer #top_btn img{ height: auto}
#footer ul{ padding:  3%}
#footer a{ color: #333;}
#footer a:hover{ text-decoration: underline }
#footer #copyrightMark{ line-height: 1.6}

@media screen and (min-width: 768px) {
header{ background: url(../images/header_bg_pc.png) center 0 no-repeat;padding-bottom: 210px}
header > div{ width:770px; margin: 0 auto; position: relative}
h1{ width:166px; position: absolute; top: 23px; left: 92px}
h2{ width:369px; position: absolute; top: 36px; left: 0}
#movie{ background: rgba(16, 16, 16, 0.8) none repeat 0 0;padding: 30px 0}
#movie #movie_inner_pc{ width: 760px; height: 432px; margin: 0 auto;  background: #000}
#movie p{ width: 760px; margin: 0 auto; font-size: 24px; padding:20px 0 0 0}
#movielist li p{ font-size: 16px;  width: 40px; height: 40px; line-height: 42px; right: 10px}
#link_other a{font-size: 24px; padding: 40px 3% }
#footer ul{ padding:0 0}
}