/* suspense */
.suspense iframe#iframe {width:100%;border:none;}
.suspense #prevnext li span{display:none;}
.suspense #prevnext p {display:none;}
.suspense li.back a{ float:left; display:block;text-indent: -9999px;background:url(../img/back.png) center center no-repeat;background-size: contain;}
.suspense li.next a{ float:right; display:block;text-indent: -9999px;background:url(../img/next.png) center center no-repeat;background-size: contain;}
.suspense h3{position:relative;color:#fff;background:#000;border-radius:20px;}
.suspense h3:after{content:" ";width:0;height:0;
	border-width:8px;border-style:solid;border-color:transparent;border-top-color:#000;z-index:1;}
.suspense select {-moz-appearance: none;text-indent: 0.01px;text-overflow: '';}
.suspense select::-ms-expand {display: none;}
.suspense .bgY{background:#fff000;}

@media all and (min-width: 768px) {
.suspense #mainBox{background:url(../img/suspense/bg.png) center top }
.suspense #mainBox h2{width:910px;height:202px;background:url(../img/suspense/title.png) no-repeat; margin:0 auto}
.suspense #prevnext{clear:both; margin:20px auto; width:840px;overflow:hidden;}
.suspense li.back a,.suspense li.next a{width:100px;height:100px; border-radius: 70px;color: #000;padding: 65px 20px 20px;}
.suspense h3{width:860px;font-size:140%;line-height:140%;margin:20px auto 0;padding:10px 20px;}
.suspense h3:after{position:absolute;top:100%;left:28px;}
.suspense .entBox{padding:40px 80px;overflow: hidden;}
.suspense .entBox ol{list-style-type: disc;padding-left:10px;line-height:200%;}
.suspense form {width:100%;padding:30px 0 10px;}
.suspense label {position: relative;display: block;width: 400px; background: #fff000;margin:0 0 20px 40px;}
.suspense label:before {content: "";
    position: absolute; top: 50%;right: 10px;display: block;width: 0;height: 0;margin: -2px 0 0 0;border: 5px solid transparent;border-top: 7px solid #000;}
.suspense select {cursor: pointer;position: relative;-webkit-appearance: none;appearance: none;display: block;width: 400px;padding: 0.5em 1em;color: #000; border: none;background: transparent;
font-size:110%;}
.suspense .txt{line-height:265%;font-weight:bold;}
.effect{z-index:0;position: relative;}
.mame{width:800px;margin:60px auto;background:url(../img/suspense/mame_bg.png) #fff; position: relative;}
.mame:before, .mame:after
{z-index: -1;position: absolute; content: "";bottom: 25px;left: 10px;width: 50%; top: 90%;max-width:300px;
  background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777;box-shadow: 0 35px 20px #777; 
-webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg);transform: rotate(-8deg);}
.mame::after { -webkit-transform: rotate(8deg);-moz-transform: rotate(8deg);-o-transform: rotate(8deg);-ms-transform: rotate(8deg);transform: rotate(8deg);
  right: 10px; left: auto;}
.suspense .mame h4{height:100px;color:#e4007f;font-size:180%; transform: rotate(-8deg);   -moz-transform: rotate(-8deg); -webkit-transform: rotate(-8deg);margin-left:30px;}
.suspense .ph1{display:block;width:910px;height:660px;background:url(../img/suspense/ph1.png) no-repeat; margin:0 auto;text-indent: -9999px;}
.suspense .ph2{display:block;width:910px;height:664px;background:url(../img/suspense/ph2.png) no-repeat; margin:0 auto;text-align:center;}
.suspense .ftBt{display:block;width:910px;margin:0 auto 40px;text-align:center;}
.suspense .postBt,.suspense .readBt{display:inline-block}
.suspense .postBt a,.suspense .readBt a{display:block;background:#000;color:#fff;}
.suspense .postBt a,.suspense .readBt a{text-decoration:none;margin:0 30px 20px;width:220px;font-size:160%;padding:20px 30px;}
.suspense .ph2 span a{margin:530px 30px 0;}
.suspense .prof,.suspense .prof2{display:none;}
.suspense .ph2 span a:hover,.suspense .ftBt span a:hover{background:#e4007f;}
.suspense li.cPnk{list-style-type: circle;font-size:120%;}
.suspense .end{margin-top:20px;}
}


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

.suspense #mainBox h2{width:100%;padding-top:23%;height:0x;background:url(../img/suspense/title.png) center top no-repeat ; margin:0 auto;background-size: contain;}
.suspense #prevnext{clear:both; margin:0px auto 1em; width:90%;}
.suspense li.back a,.suspense li.next a {width:60px;height:60px;border-radius: 70px;color: #000;padding: 38px 5px 20px;}
.suspense h3{width:95%;font-size:80%;line-height:140%;margin:0 auto 2em;padding:0.5em 1em;}
.suspense h3:after{position:absolute;top:100%;left:20px;}
.suspense .entBox{width:80%; margin:0 auto 1em; }
.suspense .entBox ol{list-style-type: disc;padding-left:1.0em;font-size:80%;line-height:200%;}
.suspense form {width: 100%;}
.suspense label {position: relative;display: block;width: 90%;background: #fff000;margin:1em auto;}
.suspense label:before {content: "";
    position: absolute; top: 50%;right: 10px;display: block;width: 0;height: 0;margin: -2px 0 0 0;border: 5px solid transparent;border-top: 7px solid #000;}
.suspense select {cursor: pointer;position: relative;-webkit-appearance: none;appearance: none;display: block;width:100%;padding: 0.5em 1em;color: #000; border: none;background: transparent;
font-size:90%;}
.suspense .mame{width:90%;margin:1em auto;background:url(../img/suspense/mame_bg.png);border:solid 2px #eee;}
.suspense .mame h4{color:#e4007f;font-size:110%;margin:1em 0.5em 0;text-align:center;}
.suspense .ph1{display:block;width:90%;padding-top:57%;height:0;border:solid 8px #fff000;margin:0 auto;background:url(../img/suspense/ph1_smp.jpg) center center no-repeat #fff000; background-size: contain;position:relative;}
.suspense .ph1 img{position:absolute;top:0;left:0;}
.suspense .prof{width:90%;padding:1em;font-size:70%;}
.suspense .prof2{width:95%;padding:1em;}
.suspense .prof .cPnk{font-size:120%;}
.suspense .postBt a{display:block;width:70%;margin:2em auto;padding:1em;background:#e4007f;color: #fff;font-size:80%;line-height:120%;font-weight:bold; text-decoration:none;text-align:center;border-radius: 30px;}
.suspense .readBt a{display:block;width:70%;margin:1em auto 2em;padding:1em;background:#000;color: #fff;font-size:80%;line-height:120%;font-weight:bold; text-decoration:none;text-align:center;border-radius: 30px;}
.suspense li.cPnk{list-style-type: circle;font-size:90%;font-weight:bold;}
.suspense .end{text-align:center;margin-bottom:2em;}
}



/* hidebox */
section h5 {position:relative;}
section h5 span {display:block;cursor:pointer;line-height:1.5;font-weight:bold;}
section.hidebox h5.hide-btn span {display:block;cursor:pointer;}
section.hidebox h5.hide-btn span:before {position:absolute;content:"";display:block;width:22px;height:22px;top:50%;
	background-image:url(../img/onsen/bt.png);background-repeat:no-repeat;margin-top:-10px;}
section.hidebox h5.hide-on span:before {background-position:0 -78px;}
section.hidebox h5.hide-off span:before {background-position:left top;}

@media all and (min-width: 768px) {
.suspense .mame{padding-bottom:30px;}
.suspense .mame ul{width:700px;margin:30px auto;padding:0;list-style: square outside;}
.suspense .mame li{line-height:140%;font-weight:bold;margin-bottom:20px;margin-left:20px;}
.suspense .mame li:last-child{margin-bottom:0;}
section{overflow:hidden;width:740px;margin:0 auto 10px;}
section h5{font-size:140%;}
section h5{border-bottom:dashed 2px #999;}
section div{padding:0 15px;}
section h5 span {padding:11px 20px 11px 10px;}
section.hidebox h5.hide-btn span:before {position:absolute;right:10px;}
}

@media all and (max-width: 767px) {
.suspense .mame{padding-bottom:1em;}
.suspense .mame ul{margin:0 auto;padding:1em;list-style: square outside;}
.suspense .mame li{font-size:80%;line-height:140%;margin-bottom:1em;margin-left:1em;}
.suspense .mame li:last-child{margin-bottom:0;}
section {overflow:hidden;width:90%;margin:0 auto 0.5em;}
section h5{font-size:80%;border-bottom:dashed 1px #999;}
section div{padding:0 0.1em;}
section h5 span {padding:11px 0;}
section.hidebox h5.hide-btn span:before {position:absolute;right:0;}
}