@charset "utf-8";

/* -----------------------------------------------------------------
VIDEO CSS
LAST UPDATE:
--------------------------------------------------------------------*/

header .inner{ width: 980px;}

/*--------------------------------
section
---------------------------------*/
section{line-height: 1.6; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS PGothic", ＭＳ　Ｐゴシック, sans-serif;}
section.bdTCol1{border-top: 1px solid #dfdfdf;padding: 60px 0;}

.contentsInner{ width: 980px; margin: 0 auto;}
.contentsInner > p,
.contentsInner > ul{ margin-top: 20px;}

.contentsInner.col2{ width: 980px; margin: 0 auto;}

.pcOnly{ display: block;}
.spOnly{ display: none;}

@media screen and (max-width: 767px){
	section.bdTCol1{border-top: 1px solid #dfdfdf;padding: 30px 0;}
 .contentsInner{ padding: 0 15px 0; font-size: 1.2rem; width: auto;}
 .contentsInner > p,
 .contentsInner > ul{ margin-top: 10px;}
    
.contentsInner.col2{ width: 100%; margin: 0 auto;}
 
.pcOnly{ display: none;}
.spOnly{ display: block;}    
    
}

/*--------------------------------
BTN
---------------------------------*/

.playBtn{ width: 240px; margin: 30px auto 50px; text-align: center; cursor: pointer;}
.playBtn a{ display: block; background: url(../images/bg_btn_corner_y_01.png) no-repeat right top #00a08e; color: #fff; font-size: 0.9rem; text-decoration: none; background-size: 16px auto; padding: 13px 15px; transition: background-color 0.5s;}
.playBtn a:hover{ color: #fff; background-color: #fabf00;}
.playBtn a span{ padding-left: 30px; background: url(../images/icon_play_01.png)no-repeat left center; background-size: 18px auto; font-size: 1rem; padding: 3px 0px 3px 30px;}

.button .playBtn{ margin-bottom: 0;}

@media screen and (max-width: 767px){
.playBtn{ width: auto; padding: 0 40px; margin-bottom: 30px;}
.playBtn a{ font-size: 1rem;}
.playBtn a span{ padding-left: 20px; background: url(../images/icon_play_01.png)no-repeat left center; background-size: 13px auto; font-size: 1rem;}
.btnClose { width: auto; margin: 30px auto !important; padding: 0 70px;}
.btnClose a{ font-size: 0.75rem; padding: 13px 5px; text-align: center; border: solid 1px #d1d1d1; text-decoration: none;}
    
}

/*--------------------------------
TITLE
---------------------------------*/
.deviceTtlC01{ font-size: 2.4rem; text-align: center;}

.deviceTtlbd01{ font-size: 1.6rem; padding: 4px 0 20px 15px; margin-top: 20px; background: url(../images/icon_ttl_01.gif)no-repeat left top; background-size: 4px auto;}


@media screen and (max-width: 767px){

 .deviceTtlbd01{ font-size: 1.13rem; padding: 0 0 20px 16px; margin-top: 20px; background: url(../images/icon_ttl_01.gif)no-repeat left top; background-size: 4px auto;}
 .deviceTtlbd01.line01{ padding: 6px 0 20px 16px;}
 
}


/*---------------------------------
 LB
-----------------------------------*/
.layerLb{ width: 100%; height: 100%; position: fixed; top: 0; background: #000; display: block; z-index: 20; opacity: 0.8;}

.lbWrap{ position: fixed; top: 50%; left: 50%; background: #000; z-index: 20; opacity: 0; width: 640px; margin: -230px 0 0 -320px;}

.lbWrap .lbClose{ width: 28px; height: 28px; display: block; position: absolute; right: 0; top: -38px;}
.lbWrap .lbClose:hover{ cursor: pointer;}

@media only screen and (min-width: 768px){
  .lbWrap{ height:360px;}
}


@media only screen and (max-width: 767px){
  .lbWrap{ width: 288px; height:163px; margin: -130px 0 0 -145px;}
  .lbWrap video{ width: 288px; height: auto; margin-bottom: -5px; padding-bottom:1px;}
}


/*--------------------------------
BOX
---------------------------------*/
.colWrap{ overflow: hidden; background: #f9f9f9; margin: 20px 0 140px; padding: 20px;}
.bgWrap .colWrap{ margin-bottom: 20px;}
/*3*/
.colWrap .col4{width: 300px; float: left;}
.colWrap .col4:nth-child(2){margin-left: 40px; margin-right: 40px;}

/*?*/
.bgBox01{ background: #f3f3f3; padding: 26px 30px; margin-top: 30px;}
.bgBox02{ background: #f9f9f9; padding: 6px 50px; margin: 60px 0 0;}

.contentsCol01{ border: solid 1px #dfdfdf; border-left: solid 3px #00a08d; padding: 20px; margin-top: 20px;}

.contentsCol04 .videoBox{ width: 440px; margin: 25px auto 30px;}
.contentsCol04 .videoBox .video{ width: 440px; height: 247px; background: #000;}
.contentsCol04 .videoBox .video:hover{ opacity: 0.7;}

.col2 .contentsCol04{ display: inline-block; width: 440px; vertical-align: top; margin-top: 40px;}
.col2 .contentsCol04.left{ margin: 40px 30px 0 15px;}
.col2 .contentsCol04.center{ margin: 0 auto; display: block;}
.col2 .contentsCol04 .videoBox{ margin: 25px auto 0 auto; border: none; display: inline-block; width: 440px;}
.col2 .contentsCol04 .videoBox .video{ width: 100%; height: auto;}
.col2 .contentsCol04.center .videoBox{ margin: 25px auto 35px; display: block;}
.col2 .contentsCol04.single{ margin: 0 auto 35px; display: block; width: auto; text-align: center;}
.contentsCol04 .ttl{ font-size: 1.1rem; font-weight: bold; text-align: center;}
.contentsCol04 .ttl.line2{ font-size: 1.1rem; font-weight: bold; text-align: center; height: 58px;}
.contentsCol04 .ttl.line2 span{ font-weight: bold; margin: 20px 0; line-height: 1; display: inline-block;}
.contentsInner p.lead{ text-align: center; margin: 20px 0 0; font-size: 1.5rem; font-weight: bold;}

.brandingMovie01{ background: #f9f9f9; padding-bottom: 20px;}
.caption{ margin: 30px auto; width: 565px;text-align:center;}
.col2 .contentsCol04 .caption{ margin: 25px 15px 30px;}

.noticeList{ margin: 20px 25px;}
.noticeList li{ text-indent: -1em; margin-left: 1em; font-size: 0.75rem;}
.noticeNumberList li{ text-indent: -3.6em; margin-left: 3.6em;}

.bobun{ margin: 20px 0 90px; text-align: right; font-size: 0.75rem;}

.brandingMovie01 .noticeList li{ text-indent: -1em; margin-left: 2em;}
.brandingMovie01 .noticeList{ margin: 0;}

.footer_caution{ margin: 60px 0 40px;}

.backgroundButton01{ padding:20px 0; margin: 40px 0; text-align: center;}

@media screen and (max-width: 767px){
.colWrap{ margin: 0 0 80px;}
.colWrap .col4{width: 100%; float: none;}
.colWrap .col4:nth-child(2){margin-left:0; margin-right:0;}
 .brandingMovie01{ margin-bottom: 25px;}
 
 .contentsCol04 .videoBox{ width: 100%; margin: 20px 0;}
 .contentsCol04 .videoBox .video,
 .branding .contentsCol04 .videoBox .video{ width: 100%; height: auto;}
    
.col2 .contentsCol04{ display: block; width: auto;}
.col2 .contentsCol04.left{ margin: 0 auto;}
.col2 .contentsCol04.center{ margin: 0 auto; display: block;}
.col2 .contentsCol04.single{ margin: 0 auto;}
.col2 .contentsCol04 .videoBox{ width: 100%; margin: 20px 0 0;}
.col2 .contentsCol04.center .videoBox{ margin: 20px 0 40px;}
.contentsCol04 .ttl{ font-size: 0.9rem; margin-top: 60px;}    
.contentsCol04 .ttl.first{ margin-top: 10px;}
.contentsCol04 .ttl.line2{ font-size: 0.9rem; height: auto;}
.contentsCol04 .ttl.line2 span{ font-size: 0.9rem; font-weight: bold; margin: 0; line-height: normal; display: block;}
    
.caption{ margin: 20px 0; font-size: 1rem; width: 100%;}
.col2 .contentsCol04 .caption{ margin: 15px 0 20px;}
.contentsInner p.lead{ text-align: center; margin: 15px 0 25px; font-size: 1rem;}

.backgroundButton01{ margin: 20px 0;}

.noticeList{ margin: 20px 0 0;}
.noticeList li{ text-indent: -1em; margin-left: 1em; font-size: 0.7rem;}    

.bobun{ margin: 20px 0 20px 0; text-align: right; font-size: 0.7rem;}
    
header { min-width: inherit;}
header .container{ width: 100%;}
header .inner { width: 100%; border-bottom: 1px solid #cdcdcd;}
header .logo-my { width: 123px; margin: 0 auto; float: none;}
header .logo-my img{ width: 100%; height: auto;}

footer{ min-width: inherit; padding: 4.7% 1px;}
.footer_caution .button{ width: 100%;}    
footer address{ font-size: 0.7rem;}

}

@media screen and (max-width: 330px){

.colWrap{ padding: 20px 15px;}
.contentsInner p.lead{ font-size: 0.8rem;}

    
}