@charset "Shift_JIS";
/* CSS Document */

#wrapper .main {
padding-bottom: 15px;
}

#wrapper .main h2 {
background: url(../preview/preview_img/tt.jpg) no-repeat;
height: 58px;
width: 432px;
margin: 0px auto 7px auto;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
padding: 53px 380px 0px 19px;
text-indent: 0px;
line-height: 140%;
}


#wrapper .main h3 {
background: url(../preview/preview_img/bt_clinic.gif) no-repeat;
height: 32px;
color: #663333;
font-weight: bold;
padding: 16px 0px 0px 61px;
margin-bottom: 10px;
}

#wrapper .main h3 a {
color: #663333;
width: auto;
float: none;
}

#wrapper .main h2 span {
display: none;
}


#wrapper .main div {
width: 800px;
margin: auto;
background-color: #FFFFFF;
overflow: hidden;
}

#wrapper .main div div {
width: auto;
margin: 0px;
}

#wrapper .main img.vicon{
	height: 54px;
	margin: 5px 5px 0 0;
    float: left;
}
#wrapper .main p.vlink,
#wrapper .main div.vlink{
	margin: 15px 0 10px;
}
#wrapper .main p.vlink a,
#wrapper .main div.vlink a{
	padding: 10px 20px;
    border: 1px solid;
    border-radius: 30px;
    transition: ease-in .2s;
    font-weight: bold;
}
#wrapper .main .playlist p.vlink,
#wrapper .main .playlist div.vlink {
    margin: 22px 0 10px;
}

.videolink{
	width: 100%;
}

.hero__video{
    height: auto;
    width: 100%;
}
div.vlink .hero__video{
	display: none;
}
#wrapper .main .pre_right .playlist div .modal,
#wrapper .main .pre_left .allplay .modal{
    display: none;
    width: 100%;
    height: 100vh;
	background: none;
    position: fixed;
    top: 0;
	right: 0;
	margin: 0;
}
#wrapper .main .pre_right .playlist div .modal__bg,
#wrapper .main .pre_left .allplay div .modal__bg{
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100vh;
    position: absolute;
	margin: 0;
}
#wrapper .main .pre_right .playlist div .modal__content,
#wrapper .main .pre_left .allplay div .modal__content{
    background: #fff;
    width: 60%;
    height: auto;
    padding: 40px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#wrapper .main .modal__content .js-modal-close{
	background: #F69;
    color: #fff;
    padding: 5px 0;
    margin: 5px auto;
    display: block;
    width: 60px;
    text-align: center;
    border-radius: 15px;
	transition: ease .5s;
}
#wrapper .main .modal__content .js-modal-close:hover{
	background: #FF66999E;
}


/*********************************/


#wrapper .main .pre {
	width: 780px;
	margin: auto;
	padding-bottom: 15px;
}

#wrapper .main .pre_left {
	width: 240px;
	float: left;
}

#wrapper .main .pre_left img {
border : 2px solid #ffbed4;
padding: 8px;
}

#wrapper .main .pre_left div img {
border : none;
padding: 0px;
}

#wrapper .main .waku {
margin-top: 15px;
border : 2px solid #ffbed4;
text-align: center;
}
#wrapper .main .waku2 {
margin-top: 15px;
border : 2px solid #ffbed4;
text-align: left;
padding: 10px;
}

#wrapper .main .waku2 table{
border: none;
margin: 0px;
background: none;
}

#wrapper .main .waku2 table td {
border: none;
margin: 0px;
background: none;
}

#wrapper .main .allplay {
margin-top: 15px;
border : 2px solid #ffbed4;
text-align: center;
padding-bottom: 10px;
}


#wrapper .main .allplay div {
width: 229px;
height: 55px;
background: url(../preview/img/play00back.gif) no-repeat;
margin: 10px auto 0px auto;
}

#wrapper .main .allplay div.vlink{
	margin: 15px 0 10px;
	background: none;
	width: auto;
	height: auto;
}

#wrapper .main .allplay div li {
list-style: none;
text-indent: -9999em;
float: left;
padding-top: 20px;
}

#wrapper .main .allplay div li a {
display: block;
overflow: hidden;
height: 35px;
width: 28px;
}

#wrapper .main .allplay div li a.wl {
margin-left: 29px;
}
#wrapper .main .allplay div li a.ql {
margin-left: 60px;
}

#wrapper .main .allplay div li a:hover.wl {
background: url(../preview/img/play00back.gif) -29px -82px;
}
#wrapper .main .allplay div li a:hover.wm {
background: url(../preview/img/play00back.gif) -57px -82px;
}
#wrapper .main .allplay div li a:hover.ql {
background: url(../preview/img/play00back.gif) -145px -82px;
}
#wrapper .main .allplay div li a:hover.qm {
background: url(../preview/img/play00back.gif) -173px -82px;
}

/*********************************/

#wrapper .main .pre_right {
	width: 525px;
	float: right;
}
#wrapper .main .pre_right span {
color: #EE6AA2;
}
#wrapper .main .pre_right .comment {
border-bottom: 2px solid #ffbed4;
border-top: 2px solid #ffbed4;
padding: 5px 0px;
margin: 7px 0px;
}
#wrapper .main .pre_right .playlist {
margin: 15px 0px;
}


#wrapper .main .pre_right .playlist div {
width: 170px;
float: left;
padding-right: 4px;
margin-bottom: 7px;
}
#wrapper .main .pre_right .playlist div div {
float: none;
margin-right: 0px;
margin-bottom: 0px;
}


#wrapper .main .pre_right .playlist .back01 {
background: url(../preview/img/playlist_back.gif) no-repeat 73px 5px;
padding: 5px 3px;
width: 164px;
height: 96px;
}

#wrapper .main .pre_right .playlist div div img {
width: 60px;
float: left;
height: 54px;
}

#wrapper .main .pre_right .playlist div div ul {
width: 50px;
float: right;
padding-right: 22px;
}

#wrapper .main .pre_right .playlist div div li {
list-style: none;
text-indent: -9999em;
float: left;
}

#wrapper .main .pre_right .playlist div div li a {
display: block;
width: 25px;
height: 25px;
overflow: hidden;
margin-top: 20px;
}

#wrapper .main .pre_right .playlist div div li a.ql {
margin-top: 28px;
}
#wrapper .main .pre_right .playlist div div li a.qm {
margin-top: 28px;
}

#wrapper .main .pre_right .playlist div div li a:hover.wl {
background: url(../preview/img/playlist_back.gif) -22px -130px;
}
#wrapper .main .pre_right .playlist div div li a:hover.wm {
background: url(../preview/img/playlist_back.gif) -47px -130px;
}
#wrapper .main .pre_right .playlist div div li a:hover.ql {
background: url(../preview/img/playlist_back.gif) -22px -183px;
}
#wrapper .main .pre_right .playlist div div li a:hover.qm {
background: url(../preview/img/playlist_back.gif) -47px -183px;
}

#wrapper .main .pre .download {
font-size: 95%;
line-height: 130%;
background-color: #e8e8e8;
padding: 4px 10px;
}
#wrapper .main .pre .download img {
margin: 5px 5px 0px 0px;
}


/****************************************
masuko
****************************************/
#wrapper .main .pre_right .playlist .masuko {
background: url(../preview/img/playlist_back_masuko.gif) no-repeat 104px 5px;
padding: 5px 3px;
width: 195px;
height: 96px;
}
#wrapper .main .pre_right .playlist .masuko li a:hover.wl {
background: url(../preview/img/playlist_back_masuko.gif) -22px -130px;
}
#wrapper .main .pre_right .playlist .masuko li a:hover.wm {
background: url(../preview/img/playlist_back_masuko.gif) -47px -130px;
}
#wrapper .main .pre_right .playlist .masuko li a:hover.ql {
background: url(../preview/img/playlist_back_masuko.gif) -22px -183px;
}
#wrapper .main .pre_right .playlist .masuko li a:hover.qm {
background: url(../preview/img/playlist_back_masuko.gif) -47px -183px;
}

#wrapper .main .pre_right .playlist .masuko img {
width: 91px;
float: left;
height: auto;
}

#wrapper .main .pre_right .masukotv div {
width: auto;
margin-right: 5px;
margin-bottom: 7px;
}
#wrapper .main .pre_right .masukotv {
border-top: 2px solid #ffbed4;
border-bottom: 2px solid #ffbed4;
height: 112px;
}
#wrapper .main .pre_right .masukotv p {
float: right;
width: 313px;
margin-top: 5px;
}