@charset "utf-8";

/* ===================================================================
css information

File Name  : layout.css
Author     : 
Style Info : 
=================================================================== */

/* howToPlay
-----------------------------------------------*/

.howToPlay #container { padding:75px 0 0 0; }
.howToPlay .alBg { margin:15px 0 0 0; }
.howToPlay #howToPlayNav { display:none; }

.howToPlay h2.cmnTtl { position:relative; cursor:pointer; text-indent:15px; }
.howToPlay h2.cmnTtl:before { content:''; display:block; position:absolute;
background:URL(../img/allow.png) no-repeat center center; background-size:contain;
width:15px; 
height:50px; 
position:absolute; 
right:12px; 
top:0;
}
.howToPlay h2.cmnTtl.active:before { background:URL(../img/allow_on.png) no-repeat center center; background-size:contain; }
.howToPlay h2.cmnTtl.type01 { background:#45a7dc; }
.howToPlay h2.cmnTtl.type01:after { background:URL(../img/ttlIcon_01.png) no-repeat left center; background-size:100% 100%; }
.howToPlay h2.cmnTtl.type02 { background:#0aabb7; }
.howToPlay h2.cmnTtl.type02:after { background:URL(../img/ttlIcon_02.png) no-repeat left center; background-size:100% 100%; }
.howToPlay h2.cmnTtl.type03 { background:#f18948; }
.howToPlay h2.cmnTtl.type03:after { background:URL(../img/ttlIcon_03.png) no-repeat left center; background-size:100% 100%; }
.howToPlay h2.cmnTtl.type04 { background:#8bbb1a; }
.howToPlay h2.cmnTtl.type04:after { background:URL(../img/ttlIcon_04.png) no-repeat left center; background-size:100% 100%; }
.howToPlay h2.cmnTtl.type05 { background:#edb031; }
.howToPlay h2.cmnTtl.type05:after { background:URL(../img/ttlIcon_05.png) no-repeat left center; background-size:100% 100%; }

.howToPlay .mainContInner { padding:10px; display:none; }
.howToPlay .mainContInner p { color:#444; font-size:13px; line-height:160%; word-wrap:break-word; }
.howToPlay .mainContInner p br { display:none; }
.howToPlay .mainContInner .contTtl_01 { font-size:16px; color:#fff; padding:10px; line-height:140%; position:relative; margin:0 0 10px 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background:rgb(119,119,119);
background: transparent\9;
background:rgba(119,119,119,0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf777777,endColorstr=#bf777777);
zoom: 1;
}
.howToPlay .mainContInner .contTtl_01.firstCont { margin-top:0 !important; }
.howToPlay .mainContInner .Lcont {  }
.howToPlay .mainContInner .Rcont {  }
.howToPlay .mainContInner .detailWrap01 { width:100%; }
.howToPlay .mainContInner .detailWrap01 figure { width:100%; max-width:360px; margin:0 auto; }
.howToPlay .mainContInner .detailWrap01 figure img { width:100%; }
.howToPlay .mainContInner .detailWrap01 figure:last-child { padding:0 0 10px 0; }
.howToPlay .mainContInner .detailWrap02 .Lcont,
.howToPlay .mainContInner .detailWrap02 .Rcont { width:100%; }
.howToPlay .mainContInner .detailWrap02 figure { width:100%; max-width:360px; margin:0 auto; }
.howToPlay .mainContInner .detailWrap02 figure img { width:100%; }
.howToPlay .mainContInner .detailWrap02 figure:last-child { padding:0 0 10px 0; }

.howToPlay .mainContInner .movieWrap { border-top:#999 1px dotted; margin:5px 0 0 0; padding:10px 0; }
.howToPlay .mainContInner .movieWrap h2 { text-align:center; height:55px; }
.howToPlay .mainContInner .movieWrap h2 img { height:100%; }
/*
.howToPlay .mainContInner .movieWrap .movieBox { width:617px; height:364px; margin:0 auto; background:URL(../img/bg_01.png) no-repeat center center; padding:18px 0 0 19px; }
*/

.howToPlay .mainContInner .movieWrap .movieBox { width:300px; padding:10px; border:#bacbd8 1px solid; margin:10px auto; position:relative; left:-10px;
background:rgb(172,203,227);
background: transparent\9;
background:rgba(172,203,227,0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfaccbe3,endColorstr=#bfaccbe3);
zoom: 1;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(213, 235, 251, 1),inset -1px -1px 0px 0px rgba(213, 235, 251, 1);
-moz-box-shadow:    inset 1px 1px 0px 0px rgba(213, 235, 251, 1),inset -1px -1px 0px 0px rgba(213, 235, 251, 1);
box-shadow:         inset 1px 1px 0px 0px rgba(213, 235, 251, 1),inset -1px -1px 0px 0px rgba(213, 235, 251, 1);
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.howToPlay .mainContInner .movieWrap .movieBox:nth-child(n) {
filter: none;
}
.howToPlay .mainContInner .movieWrap .frameWrap { width:280px; height:158px; overflow:hidden; }
.howToPlay .mainContInner .movieWrap iframe { width:280px; height:158px; }


.howToPlay .txtWrap01 {  }

.howToPlay #mainCont01 { margin-top:0 !important; }
.howToPlay #mainCont01 .mainContInner { padding-top:10px !important; }
.howToPlay #mainCont01 article { border-bottom:#999 1px dotted; }
.howToPlay #mainCont01 article h2 { height:74px; text-align:center; }
.howToPlay #mainCont01 article h2 img { height:100%; }
.howToPlay #mainCont01 article .col01 {  }
.howToPlay #mainCont01 article p { margin:10px 0 0 0; }
.howToPlay #mainCont01 .cont01 { padding:0 0 10px 0; }
.howToPlay #mainCont01 .cont01 figure { width:100%; max-width:360px; margin:10px auto 0 auto; }
.howToPlay #mainCont01 .cont01 figure img { width:100%; }
.howToPlay #mainCont01 .cont02 { padding:10px 0; }
.howToPlay #mainCont01 .cont02 div { width:100%; margin:10px auto 0 auto; }
.howToPlay #mainCont01 .cont02 figure { width:100%; max-width:360px; margin:10px auto 0 auto; }
.howToPlay #mainCont01 .cont02 figure img { width:100%; }
.howToPlay #mainCont01 .cont03 { padding:10px 0; }
.howToPlay #mainCont01 .cont03 { border-bottom:0 !important; padding-bottom:5px !important; }
.howToPlay #mainCont01 .cont03 figure { width:100%; max-width:260px; margin:6px auto 0 auto; }
.howToPlay #mainCont01 .cont03 figure img { width:100%; }


.howToPlay #mainCont02 .mainContInner { padding-bottom:0 !important; }
 
 
.howToPlay #mainCont03 .col01 {  }
.howToPlay #mainCont03 h4 { width:100%; max-width:260px; margin:6px auto 10px auto; }
.howToPlay #mainCont03 h4 img { width:100%; }
.howToPlay #mainCont03 .col02 { width:300px; padding:10px; border:#bacbd8 1px solid; margin:10px auto; position:relative; left:-10px;
background:rgb(172,203,227);
background: transparent\9;
background:rgba(172,203,227,0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfaccbe3,endColorstr=#bfaccbe3);
zoom: 1;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(213, 235, 251, 1),inset -1px -1px 0px 0px rgba(213, 235, 251, 1);
-moz-box-shadow:    inset 1px 1px 0px 0px rgba(213, 235, 251, 1),inset -1px -1px 0px 0px rgba(213, 235, 251, 1);
box-shadow:         inset 1px 1px 0px 0px rgba(213, 235, 251, 1),inset -1px -1px 0px 0px rgba(213, 235, 251, 1);
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px; }
.howToPlay #mainCont03 .col02 img { width:100%; }


.howToPlay #mainCont04 .contBox01 { padding:10px 0 0 0; }
.howToPlay #mainCont04 .contBox01 figure { width:100%; max-width:360px; margin:0 auto; }
.howToPlay #mainCont04 .contBox01 figure img { width:100%; }
.howToPlay #mainCont04 .contBox01 dl { width:100%; padding:10px 0 0 0; }
.howToPlay #mainCont04 .contBox01 dl dt { width:100%; height:42px; position:relative; line-height:42px; font-size:14px; color:#fff; padding:0 10px; }
.howToPlay #mainCont04 .contBox01 dl dt.col01 { background:#8bbb1a; }
.howToPlay #mainCont04 .contBox01 dl dt.col02 { background:#edb031; }
.howToPlay #mainCont04 .contBox01 dl dt.col03 { background:#7c5ca4; }
.howToPlay #mainCont04 .contBox01 dl dt.col03:after { content:''; width:80px; height:22px; position:absolute; right:6px; top:10px; background:URL(../img/figure15.png) no-repeat center center; background-size:100% 100%; }
.howToPlay #mainCont04 .contBox01 dl dd { padding:8px 10px; font-size:13px; line-height:160%; background:#f5f5f5; border-bottom:#ddd 1px solid; border-left:#ddd 1px solid; border-right:#ddd 1px solid; margin:0 0 6px 0; color:#444; }
.howToPlay #mainCont04 .contBox01 dl dd br { display:none; }


.howToPlay #mainCont05 .contTtl_01 { }
.howToPlay #mainCont05 ul { width:100%;  }
.howToPlay #mainCont05 ul li { width:100%; margin:6px 0 0 0; }
.howToPlay #mainCont05 ul li a { width:100%; height:110px; display:table; overflow:hidden; padding:10px; color:#333; text-decoration:none; border:#ddd 1px solid; background:#f5f5f5;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px; }
.howToPlay #mainCont05 ul li a figure { width:120px; height:90px; position:relative; display:table-cell; vertical-align:top; }
.howToPlay #mainCont05 ul li a figure:after { content:''; display:block; width:46px; height:33px; background:URL(../img/mv_arrow_off.png) no-repeat left top; position:absolute; top:50%; left:50%; margin:-16px 0 0 -23px;  }
.howToPlay #mainCont05 ul li a:hover figure:after { background-image:URL(../img/mv_arrow_on.png) !important; }
.howToPlay #mainCont05 ul li section { display:table-cell; vertical-align:middle; padding:0 0 0 10px; }
.howToPlay #mainCont05 ul li section p { font-size:15px; line-height:140%; }
.howToPlay #mainCont05 .cont02 { margin:15px 0 0 0; }

.howToPlay .linkBnr01 { text-align:center; padding:0 0 20px; }
.howToPlay .linkBnr01 img { width:100%; max-width: 420px;}
.howToPlay .linkBnr01 > a { display:inline-block; }
.howToPlay .linkBnr01 > a + a { margin-top:6px; }