@charset "utf-8";

/* レイアウト */
html {
	height:100%;
	line-height: 1;
}
body {
	width:100%;
	min-width:320px;
	height:100%;
	font-size: 16px;
	line-height: 20px;
	color:#2b2b2b;
	background: url(./../images/bghard.png);
}
#wrapper{
	overflow: hidden;
	min-width:320px;
	max-width: 768px;
	min-height: 100%;
	margin: 0 auto;
	background: #000;
	-webkit-box-shadow: #000 0 10px 2px 2px;
	        box-shadow: #000 0 10px 2px 2px;
}
li {
	list-style: none;
}
#header {
	display: table;
	width: 100%;
	height: 40px;
}
#header div {
	display: table-cell;
	padding: 5px 10px;
	vertical-align: middle;
	background: #FFF;
}
#header img {
	width: 100px;
}
#header ul {
	text-align: right;
}
#header ul li {
	display: inline-block;
	border-radius: 5px;
}
#header ul li a {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url(./../images/sns-icon.png) no-repeat 0 0;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	vertical-align: bottom;
	border-radius: 5px;
}
#header ul li.facebook a {
	background-position: 0 -30px;
}
#header ul li.line a {
	background-position: 0 -60px;
}
#header ul li.mail a {
	background-position: 0 -90px;
}
/* PC時非表示 */
#header ul li.line {
    display:none;
}

#header ul li.line.show {
    display:inline-block;
}

.main {
	position: relative;
}
.main h1 img {
	width: 100%;
	/*
	-webkit-box-shadow: #479725 0px 10px 10px;
	        box-shadow: #479725 0px 10px 10px;
	*/
}
.mainvisual-s {
	padding: 0 10px;
	background: #4591ff;
	background: -moz-linear-gradient(top,  #4591ff 0%, #81d7ff 60%, #d9fdff 100%);
	background: -webkit-linear-gradient(top,  #4591ff 0%,#81d7ff 60%,#d9fdff 100%);
	background: linear-gradient(to bottom,  #4591ff 0%,#81d7ff 60%,#d9fdff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4591ff', endColorstr='#d9fdff',GradientType=0 );
	border-bottom: 2px #000 solid;
}
.mainvisual-s .mainvisual-s-inner {
	height: 89px;
	max-width: 480px;
	margin: 0 auto;
	background: url(./../images/mainvisual_s1.png) no-repeat 0% 50%, url(./../images/mainvisual_s2.png) no-repeat 100% 50%;
	-webkit-background-size: auto 100%;
	     -o-background-size: auto 100%;
	        background-size: auto 100%;
}
.mainvisual-s .mainvisual-s-inner a {
	display: inline-block;
	width: 180px;
	height: 67px;
	padding: 10px;
}
.mainvisual-s .mainvisual-s-inner a img {
	width: 100%;
}
.headernav {
	display: table;
	width: 100%;
	border-bottom: 2px solid #000;
	color: #fff;
	background: #123800;
}
.headernav li {
	display: table-cell;
	width: 25%;
	text-align: center;
	vertical-align: middle;
	font-size: 87.5%;
	line-height: 1.2;
}
.headernav li.current {
	padding: 2px 0 0 0;
	border-bottom: #fb9800 solid 2px;
}
.headernav li div {
	display: table;
	width: 100%;
}
.headernav li a {
	display: table-cell;
	height: 46px;
	padding: 2px 4px 0;
	border-bottom: transparent solid 2px;
	vertical-align: middle;
	color: #fff;
}
.headernav li span {
	display: inline-block;
}
.headernav li a:hover {
	display: table-cell;
	height: 46px;
	border-bottom: #fb9800 solid 2px;
	vertical-align: middle;
	color: #fff;
}
.contents {
	background: url(./../images/bgtile.png);
	-webkit-background-size: 68px auto;
	     -o-background-size: 68px auto;
	        background-size: 68px auto;
}
.footerNav {
	border-bottom: 1px solid #000;
}
.footerNav li {
	border-top: 2px solid #000;
	background: #333;
}
.footerNav li a {
	display: block;
	position: relative;
	padding: 10px;
	font-size: 87.5%;
	color: #FFF;
}
.footerNav li a:hover {
	text-decoration: underline;
}
.footerNav li a:after {
	display:block;
	position:absolute;
	content:"";
	right:20px;
	top:50%;
	width:10px;
	height:10px;
	margin: -7px 0 0 0;
	border-right: 4px solid #fff;
	border-top: 4px solid #fff;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.footerSubNav {
	padding: 10px 0;
	text-align: center;
	background: #000;
}
.footerSubNav li {
	display: inline-block;
	padding: 0 6px;
	font-size: 75%;
}
.footerSubNav li+li {
	border-left: 1px solid #fff;
}
.footerSubNav li a {
	color: #FFF;
}
.footerSubNav li a:hover {
	text-decoration: underline;
}
.copyright {
	padding: 0 0 20px;
	font-size: 75%;
	text-align: center;
	color: #FFF;
	background: #000;
}

@media only screen and (min-width: 480px){
	.mainvisual-s .mainvisual-s-inner {
		background: url(./../images/mainvisual_s1.png) no-repeat 0% 50%, url(./../images/mainvisual_s2.png) no-repeat 100% 50%, url(./../images/mainvisual_s3.png) no-repeat 65% 50%;
		-webkit-background-size: auto 100%;
		-o-background-size: auto 100%;
		background-size: auto 100%;
	}
}

/* 768px 以上(タブレット以上) */
@media only screen and (min-width: 768px){
	.footerNav {
		padding: 10px;
		background: #000;
		text-align: center;
	}
	.footerNav li {
		padding: 2px;
		display: inline-block;
		background: transparent;
	}
	.footerNav li a {
		display: inline;
	}
	.footerNav li a:after {
		border: none;
	}
	.footerNav li+li {
		border-left: 1px solid #fff;
	}
}
.index .news {
	max-width: 100%;/*520px;*/
	margin: 10px auto;
}

.index .news .inner {
	margin: 0 10px;
	padding: 10px;
	border: 2px solid #000;
	background: #FFF;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
	box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
}

.index .news .inner ul {
    margin:3%;
}

.index .news .inner ul h1 {
    padding-bottom:2%;
    text-align:center;
    border-bottom:#F60 1px solid;
    color:#F60;
}

.index .news .inner ul h2 {
    padding:3% 0;
    text-align:center;
    font-size: 75%;
}

.index .news .inner ul p {
    font-size: 87.5%;
}

.index .news .inner ul p span {
    color:#F60;
}

.index .news .inner .tw_pre {
    padding-bottom:3%;
    text-align:center;
}

.index .news .inner .tw_pre table {
    width:100%;
    border:#CCC 1px solid;
}

.index .news .inner .tw_pre table th{
    padding:1%;
    text-align:center;
    border-bottom:#CCC 1px solid;
    background:#FFC;
}

.index .news .inner .tw_pre table td{
    width:50%;
    padding:1%;
    border-bottom:#CCC 1px solid;
    border-right:#CCC 1px solid;

}

.index .news .inner .tw_pre table tr:nth-child(odd){
    background:#EEE;
}

.index .news .inner .tw_follow {
    padding-top:3%;
    text-align:center;
}

.index .news .inner .tw_follow img {
    width:100%;
    max-width:400px;
}

.index .store,
.column .store {
	max-width: 520px;
	margin: 10px auto;
}
.index .store h3,
.column .store h3 {
	padding:0 10px;
	margin: 0 auto;
}
.index .store h3 img,
.column .store h3 img {
	width: 300px;
}
.index .store .inner,
.column .store .inner {
	margin: 0 10px;
	padding: 10px;
	border: 2px solid #000;
	background: #FFF;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
	box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
}
.index .store ul,
.column .store ul {
	display: table;
	width: 100%;
	text-align: center;
}
.index .store li,
.column .store li {
	display: table-cell;
	vertical-align: middle;
	font-size: 87.5%;
}
.index .store li a,
.column .store li a {
	display: inline-block;
	margin: 2px;
}
.index .store li.qr,
.column .store li qr {
	display: none;
}

.index .store .deviceLink,
.column .store .deviceLink {
    padding:3% 0 0 0;
    text-align:center;
    font-size:75%;
}

.index .store .deviceLink a,
.column .store .deviceLink a {
    color:#36F;
    text-decoration:underline;
}

.index .user-timeline {
	margin: 10px 10px 0;
}
.index .user-timeline h3 {
	max-width: 500px;
	margin: 0 auto;
}
.index .user-timeline h3 img {
	width: 300px;
}
.index .user-timeline-inner {
	overflow: hidden;
	max-width: 500px;
	margin: 0 auto;
	border: 2px solid #000;
	background: #FFF;
	-webkit-border-radius: 8px;
	        border-radius: 8px;
	-webkit-box-shadow: #9c9c9c 2px 3px 0;
	        box-shadow: #9c9c9c 2px 3px 0;
}
.index .user-timeline iframe {
	vertical-align: bottom;
}
.index .copy-inner {
	position: relative;
	margin: 50px 10px 0;
	border: 2px solid #000;
	background: #f5eebe;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
	        box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
}
.index .copy-area {
	margin: 0 0 20px;
}
.index .copy-area h3 {
	position: absolute;
	top: -40px;
	left: -10px;
}
.index .copy-area h3 img {
	width: 300px;
}
.index .copy ul {
	padding: 10px;
}

.index .copy ul li img {
	width: 100%;
}

.index .pad_info {
    width:96%;
    margin:0 auto;
}

.index .pad_info {
    border-top:#666 1px dashed;
}

.index .pad_info li {
    vertical-align:middle;
}


.index .pad_info .pad_img {
    max-width:300px;
}

.index .pad_info .pad_img img {
    width:100%;
}

.index .pad_info .pad_video {
	width:50%;
    margin-right:5%;
    text-align:center;
}
.index .pad_info .pad_video flame {
    height:200px;
}

.index .pad_info .pad_controller {
}

.index .pad_info .title_controller {
    width:100%;
    max-width:350px;
    margin-bottom:1%;
}

.index .pad_info .img_controller {
    width:100%;
    max-width:347px;
}
.index .pad_info .pad_controller p {
    margin-left:1%;
    font-size:90%;
}

.index .pad_controllerList {
    width:90%;
    margin:2% auto;
    border:#666 2px solid;
}

.index .pad_controllerList li {
}

.index .pad_controllerList li h2 {
    margin-bottom:2%;
}

.index .pad_controllerList li p {
    font-size:80%;
}

.index .pad_controllerList li p span {
    color:#06C;
    font-size:120%;
    font-weight:bold;
}


.index .copy .btn-back {
    padding: 10px 0 15px;
    text-align: center;
}

.index .copy .btn-back a {
    display: inline-block;
    width: 190px;
    height: 46px;
    background: url(./../images/btn2.png) no-repeat;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 46px;
    text-decoration: none;
    filter: dropshadow(color=#000000, offX=0, offY=-1) dropshadow(color=#000000, offX=1, offY=0) dropshadow(color=#000000, offX=0, offY=1) dropshadow(color=#000000, offX=-1, offY=0);
    text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px;
    border: none;
}

.index .copy .btn-back a:hover,
.index .copy .btn-back a:focus {
    background-position: 0 -46px;
}

.index .note {
	margin: 20px 0 0 0;
	padding: 10px;
	background: rgba(238, 238, 238, .7);
}
.index .note li {
	position: relative;
	padding: 0 10px 0 14px;
	margin: 0 0 4px;
	font-size: 75%;
	line-height: 1.4;
}
.index .note li:before {
	position: absolute;
	display: block;
	content: "・";
	width: 18px;
	height: 18px;
	left: 0;
}

/* 480px 以上(タブレット以上) */
@media only screen and (min-width: 480px){
	.index .copy-area ul {
		display: table;
	}
	.index .copy-area ul li {
		display: table-cell;
	}
	.index .copy-area ul li:nth-child(2n) {
		padding: 0 0 0 10px;
	}
	.index .store li.qr {
		display: table-cell;
	}
}

/* 768px 以上(タブレット以上) */
/*
@media only screen and (min-width: 768px){
	.index .copy-area {
		display: table;
	}
	.index .copy-area > div {
		display: table-cell;
		width: 50%;
		vertical-align: top;
	}
	.index .copy-area ul {
		display: block;
	}
	.index .copy-area ul li {
		display: block;
	}
	.index .pre-registration {
		height: 155px;
	}
	.index .pre-registration h3, .index .copy h3 {
		left: 0;
	}
}
*/

/* パンくずナビ */
.breadcrumbs {
    padding:2% 2% 0 2%;
    color:#164003;
    font-weight:bold;
    font-size:75%;
}

.breadcrumbs a {
    color:#76ee3f;
    text-decoration:underline;
}

/* device */

.device {
    max-width:500px;
    margin:0 auto;
}

.device .dv_box {
    text-align:center;
}

.device .dv_box h1 {
    width:90%;
    margin:0 auto;
    padding:5% 0 2% 0;
    text-align:center;
    border-bottom:#F60 1px solid;
    color:#F60;
}

.device .dv_box p {
    padding:3% 5%;
    text-align:left;
    font-size:75%;
}

.device .dv_box .inner-white {
    position: relative;
    margin: 10px 10px 0;
    border: 2px solid #000;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
            box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
}

.device .dv_box .inner-white table {
    width:90%;
    margin:0 auto 5%;
    font-size:75%;
    border:#CCC 1px solid;
}

.device .dv_box .inner-white table th {
    padding:1%;
    text-align:center;
    border-bottom:#CCC 1px solid;
    border-right:#CCC 1px solid;
    background:#FFC;
}

.device .dv_box .inner-white table td {
    width:30%;
    padding:1%;
    border-bottom:#CCC 1px solid;
    border-right:#CCC 1px solid;
}

.device .btn-back {
    padding: 15px 0;
    text-align: center;
}

.device .btn-back a {
    display: inline-block;
    width: 190px;
    height: 46px;
    background: url(./../images/btn2.png) no-repeat;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 46px;
    text-decoration: none;
    filter: dropshadow(color=#000000, offX=0, offY=-1) dropshadow(color=#000000, offX=1, offY=0) dropshadow(color=#000000, offX=0, offY=1) dropshadow(color=#000000, offX=-1, offY=0);
    text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px;
    border: none;
}

.device .btn-back a:hover,
.device .btn-back a:focus {
    background-position: 0 -46px;
}

/* column */
.column {
    max-width:660px;
    margin:0 auto;
}

.column .column_box {
    text-align:center;
}

.column .column_box p {
    max-width:540px;
    padding:3% 5%;
    margin:0 auto;
    text-align:left;
}

.column .column_box .column_box_bigTxt {
    margin-top:4%;
    line-height:300%;
}

.column .column_box .column_box_txtL {
    font-size:350%;
}

.column .column_box .column_box_txtM {
    font-size:150%;
}

.column .column_box .column_box_txtS {
    font-size:80%;
}

.column .column_box .column_box_bigTxt em {
    color:#ff0096;
}

.column .column_box .inner-white {
    position: relative;
    margin: 10px 10px 0;
    border: 2px solid #000;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
            box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
}

.column .column_box .inner-white .boxList-blue {
    width:90%;
    max-width:540px;
    margin:0 auto;
    background:#72f1fa;
}

.column .column_box .inner-white .boxList-yellow {
    width:90%;
    max-width:540px;
    margin:0 auto;
    background:#fffd55;
}

.column .column_box .inner-white .boxList-yellow p {
    width:250px;
    margin:0 auto;
    text-align:left;

}

.column .column_box .inner-white .boxList-nocol,
.column .column_box .inner-white .boxList-nocolMix {
    width:90%;
    max-width:540px;
    margin:0 auto;
}

.column .column_box .inner-white .boxList-blue li,
.column .column_box .inner-white .boxList-nocol li,
.column .column_box .inner-white .boxList-nocolMix li,
.column .column_box .inner-white .boxList-yellow li {
    display:inline-block;
    padding:2% 0;
}

.column .column_box .inner-white .boxList-blue li img,
.column .column_box .inner-white .boxList-nocol li img {
    width:90%;
}

.column .column_box .inner-white .boxList-nocolMix img,
.column .column_box .inner-white .boxList-yellow img {
    width:90%;
    margin-bottom:4%;
    max-width:281px;
}

.column .column_box .inner-white .boxList-nocolMix li p {
    width:250px;
    padding:3% 5%;
    margin:0 auto;
    text-align:left;
}

.column .column_box .inner-white .column_box_img {
    width:90%;
    max-width:540px;
    margin:0 auto;
}

.column .column_box .inner-white .column_box_img img {
    width:100%;
}


.column .column_box .inner-white .txt_redL {
    font-size:300%;
    color:#F00;
}

.column .column_box .inner-white .txt_underb {
    font-size:150%;
    text-decoration:underline;
    line-height:120%;
}

.column .column_box .inner-white .txt_center {
    text-align:center;
    line-height:150%;
}


.index .store .deviceLink {
    padding:3% 0 0 0;
    text-align:center;
    font-size:75%;
}

.index .store .deviceLink a {
    color:#36F;
    text-decoration:underline;
}


.column .btn-back {
    padding: 15px 0;
    text-align: center;
}

.column .btn-back a {
    display: inline-block;
    width: 190px;
    height: 46px;
    background: url(./../images/btn2.png) no-repeat;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 46px;
    text-decoration: none;
    filter: dropshadow(color=#000000, offX=0, offY=-1) dropshadow(color=#000000, offX=1, offY=0) dropshadow(color=#000000, offX=0, offY=1) dropshadow(color=#000000, offX=-1, offY=0);
    text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px;
    border: none;
}

.column .btn-back a:hover,
.column .btn-back a:focus {
    background-position: 0 -46px;
}

/* notes/friend battle */

.friendBattle {
    max-width:500px;
    margin:0 auto;
}

.friendBattle .fB_box {
    text-align:center;
}

.section .fB_box {
    max-width:430px;
    margin:0 auto;
    text-align:center;
}

.friendBattle .fB_box h3,
.section .fB_box h3 {
    position: absolute;
    top: -40px;
    left: -10px;
}

.friendBattle .fB_box h3 img,
.section .fB_box h3 img {
    width: 300px;
}

.friendBattle .fB_box .inner-green,
.section .fB_box .inner-green {
    position: relative;
    margin: 50px 10px 0;
    border: 3px solid #013f8e;
    background: #78f9be;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
            box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
}

.friendBattle .fB_box .inner-beige {
    position: relative;
    margin: 50px 10px 0;
    border: 2px solid #000;
    background: #f5eebe;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
            box-shadow: #9c9c9c 2px 3px 0, #fcfbee 0 0 0 4px inset;
}

.friendBattle .fB_box .inner-green ul,
.friendBattle .fB_box .inner-beige ul {
    padding:3% 0;
}

.section .fB_box .inner-green ul {
    padding:5% 0 0;
}

.friendBattle .fB_box .inner-green li,
.friendBattle .fB_box .inner-beige li {
    padding:2% 0;
}

.friendBattle .fB_box .inner-green ul img,
.friendBattle .fB_box .inner-beige ul img,
.section .fB_box .inner-green ul img {
    width:90%;
}

.friendBattle .battle_start {
    padding:4% 0 3%;
    text-align:center;
}

.friendBattle .battle_start img {
    width:90%;
}

.friendBattle .btn-back {
    padding: 15px 0;
    text-align: center;
}

.friendBattle .btn-back a {
    display: inline-block;
    width: 190px;
    height: 46px;
    background: url(./../images/btn2.png) no-repeat;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 46px;
    text-decoration: none;
    filter: dropshadow(color=#000000, offX=0, offY=-1) dropshadow(color=#000000, offX=1, offY=0) dropshadow(color=#000000, offX=0, offY=1) dropshadow(color=#000000, offX=-1, offY=0);
    text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px;
    border: none;
}

.friendBattle .btn-back a:hover,
.friendBattle .btn-back a:focus {
    background-position: 0 -46px;
}


/* help */
.help {
	min-height: 100%;
}
.help h2 {
	position: relative;
	width: 336px;
	height: 44px;
	margin: 0 auto -25px;
	padding: 20px 0;
	z-index: 100;
	text-align: center;
	background: url(../images/UI.Common.title_bg.png) no-repeat 50% 50%;
	-webkit-background-size: 336px auto;
	        background-size: 336px auto;
}
.help h2 img {
	height: 26px;
}
.help .section-inner ul {
	max-width: 500px;
	margin: 0 auto;
	padding: 15px;
}
.help .section-inner ul li:last-child dl {
	margin: 0;
}
.help .section-inner ul li dl {
	margin: 0 0 12px;
	overflow: hidden;
	border: 3px solid #fff;
	-webkit-border-radius: 12px;
            border-radius: 12px;
	-webkit-box-shadow: rgba(0,0,0,.2) 3px 3px 0;
	        box-shadow: rgba(0,0,0,.2) 3px 3px 0;
}
.help .section-inner ul li dl dt {
	position: relative;
	padding: 13px 50px;
	color: #FFF;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #005672), color-stop(0.00, #0084ae));
	background: -webkit-linear-gradient(#0084ae, #005672);
	background: linear-gradient(#0084ae, #005672);
	cursor: pointer;
}
.help .section-inner ul li dl dt:before {
	position: absolute;
	display: block;
	content:"";
	margin: -13px 0 0 0;
	width: 26px;
	height: 26px;
	left: 15px;
	top:50%;
	background: url(../images/UI.Help.icon.q.png) no-repeat;
	-webkit-background-size: 26px 26px;
	        background-size: 26px 26px;
}
.help .section-inner ul li dl dt:after {
	position: absolute;
	display: block;
	content:"";
	margin: -16px 0 0 0;
	width: 33px;
	height: 33px;
	right: 10px;
	top:50%;
	background: url(../images/UI.Help.icon.plus.png) no-repeat;
	-webkit-background-size: 33px 33px;
	        background-size: 33px 33px;
}
.help .section-inner ul li dl dt.open:after {
	background: url(../images/UI.Help.icon.minus.png) no-repeat;
	-webkit-background-size: 33px 33px;
	        background-size: 33px 33px;
}
.help .section-inner ul li dl dd {
	display: none;
	position: relative;
	padding: 15px 30px 20px 50px;
	border-top:3px solid #fff;
	color: #FFF;
	font-size: 87.5%;
	line-height: 1.286;
	background: url(../images/UI.Help.detailbg.png) repeat , -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #004968), color-stop(0.00, #003249)) , url(../images/UI.Help.detailbg.png) repeat;
	background: url(../images/UI.Help.detailbg.png) repeat , -webkit-linear-gradient(#003249, #004968) ;
	background: url(../images/UI.Help.detailbg.png) repeat , linear-gradient(#003249, #004968) ;
	-webkit-background-size: 26px 27px , auto auto;
	        background-size: 26px 27px , auto auto;
}
.help .section-inner ul li dl dd:before {
	position: absolute;
	left: 15px;
	top:17px;
	content:"";
	display: block;
	width: 26px;
	height: 26px;
	background: url(../images/UI.Help.icon.a.png) no-repeat;
	-webkit-background-size: 26px 26px;
	        background-size: 26px 26px;
}
.help .section-inner ul li dl dd em img {
	margin: 10px 0 0 0;
	display: block;
	max-width: 100%;
}
.help .section-inner ul li dl dd span {
	position: relative;
	margin: 10px 0 0 0;
	padding: 0 0 0 1em;
	display: block;
	font-size: 78.6%;
	line-height: 1.273;
	color: #f9ff61;
}
.help .section-inner ul li dl dd span:before {
	position: absolute;
	left: 0;
	content:"※";
}
.help .section-inner ul li dl dd ol {
	margin: 15px 0 0 0;
}
.help .section-inner ul li dl dd ol li {
	position: relative;
	padding: 0 0 0 1.2em;
	margin: 0 0 8px;
	font-size: 78.6%;
	line-height: 1.273;
}
.help .section-inner ul li dl dd ol li:last-child {	margin: 0;}
.help .section-inner ul li dl dd ol.dot-list li:before {
	position: absolute;
	left: 0;
	content:"・";
}
.help .section-inner ul li dl dd ol.number-list li {
	padding: 0 0 0 2.2em;
	counter-increment: num;
}
.help .section-inner ul li dl dd ol.number-list li:before {
	position: absolute;
	left: 0;
	margin: -4px 5px 0 0;
    padding: 4px 6px;
	content: counter(num, decimal);
	border: 1px solid #fff;
    border-radius: 13px;
    line-height: 1;
}
.help .section-inner .btn-back {
	padding: 15px 0;
	text-align: center;
}
.help .section-inner .btn-back a {
	display: inline-block;
	width: 190px;
	height: 46px;
	background: url(./../images/btn2.png) no-repeat;
	-webkit-background-size: 100%;
	     -o-background-size: 100%;
	        background-size: 100%;
	color: #fff;
	font-weight: bold;
	line-height: 46px;
	text-decoration: none;
	filter:dropshadow(color=#000000,offX= 0,offY=-1)
	dropshadow(color=#000000,offX= 1,offY= 0)
	dropshadow(color=#000000,offX= 0,offY= 1)
	dropshadow(color=#000000,offX=-1,offY= 0);
	text-shadow: black 1px 1px 0px, black -1px 1px 0px,
	             black 1px -1px 0px, black -1px -1px 0px;
	border: none;
}
.help .section-inner .btn-back a:hover, .help .section-inner .btn-back a:focus {
	background-position: 0 -46px;
}
.help .section-inner strong {
    color: #f9ff61;
    font-weight: bold;
}

.movie {
    min-height: 100%;
}

.movie h2 {
    position: relative;
    width: 336px;
    height: 44px;
    margin: 0 auto;
    padding: 20px 0;
    z-index: 100;
    text-align: center;
    background: url(../images/UI.Common.title_bg.png) no-repeat 50% 50%;
    -webkit-background-size: 336px auto;
    background-size: 336px auto;
}

.movie h2 img {
    height: 26px;
}

.movie .inner {
    overflow: hidden;
    margin: 0 10px 15px;
    padding: 10px;
    max-width: 480px;
    border: 2px solid #000;
    background: #FFF;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
    box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
}

.movie .intro .dr {
    float: left;
    width: 60px;
    height: 48px;
    /*
        width: 77px;
        height: 62px;
        */
    margin-right: 5px;
}

.movie .intro .comment {
    float: left;
    width: 205px;
    height: 33px;
    margin-top: 5px;
}


/* 一覧 */

.movie .movie-list {
    overflow: hidden;
    margin: 20px 0 0;
}

.movie .movie-list .item {
    overflow: hidden;
    margin: 0 10px 15px;
    max-width: 480px;
    padding: 10px;
    border: 2px solid #000;
    background: #FFF;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
    box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
}

/* プレイヤー */

.movie .movie-list .item .player {
    display: none;
}

.movie .movie-list .item .player .detail {
    padding: 10px;
}

.movie .movie-list .item .player .detail a {
    color: #000;
}

.movie .movie-list .item .player .detail a:hover {
    color: #888;
    -moz-transition: 0.2s ease-in;
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=7);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

.movie .movie-list .item .player .thumb {
    position: relative;
    overflow: hidden;
    padding-top: 55.6%;
    height: 0;
}

.movie .movie-list .item .player .thumb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movie .movie-list .item .player .detail .title {
    font-size: 1.125;
    font-weight: bold;
    line-height: 1.375;
}

.movie .movie-list .item .player .detail .time {
    font-size: 75%;
    color: #878787;
}

.movie .movie-list .item .player .detail .discription {
    font-size: 87.5%;
    line-height: 1.2857;
}


/* リスト */

.movie .movie-list .item .list {
    display: block;
    width: 100%;
    color: #000;
}

.movie .movie-list .item .list:hover {
    color: #888;
}

.movie .movie-list .item .list:hover dl {
    -moz-transition: 0.2s ease-in;
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=7);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

.movie .movie-list .item .list .thumb {
    width: 120px;
    float: left;
    position: relative;
}

.movie .movie-list .item .list .thumb img {
    width: 100%;
}

.movie .movie-list .item .list .detail {
    float: left;
    width: 49%;
    padding: 0px 5px 5px 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

.movie .movie-list .item .list .detail .title {
    font-size: 1.125;
    font-weight: bold;
    line-height: 1.375;
}

.movie .movie-list .item .list .detail .time {
    font-size: 75%;
    color: #878787;
}

.movie .movie-list .item .list .detail .discription {
    font-size: 87.5%;
    line-height: 1.2857;
}


/* Twitter */

.movie .contents .twitter {
    margin-top: 15px;
    text-align: center;
}

.movie .contents .twitter .textimage {
    width: 100%;
}

.movie .contents .twitter .comment {
    width: 80%;
    margin: 15px auto -15px;
    padding: 0 0 0 40px;
    text-align: left;
}

.movie .contents .twitter .comment .dr {
    width: 60px;
    height: 48px;
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

.movie .contents .twitter .comment .balloon {
    position: relative;
}

.movie .contents .twitter .comment .balloon img {
    position: absolute;
    width: 127px;
    height: 32px;
    /*254x64*/
    -moz-animation: ballon 2s infinite;
    -webkit-animation: ballon 2s infinite;
    animation: ballon 2s infinite;
}

@-moz-keyframes ballon {
    0% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes ballon {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes ballon {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.movie .contents .twitter .btn-tweet {
    margin: 10px auto 15px;
    max-width: 80%;
}

.movie .contents .twitter .btn-tweet a {
    position: relative;
    display: block;
    padding: 10px 0 10px 40px;
    background: #55acee;
    color: #fff;
    font-weight: bold;
    text-align: left;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 5px 0px #2680c4;
    -webkit-box-shadow: 0 5px 0px #2680c4;
    box-shadow: 0 5px 0px #2680c4;
    text-align: center;
}
.movie .contents .twitter .btn-tweet a:hover {
    background: #7dc7ff;
    -moz-box-shadow: 0 5px 0px #30a1f7;
    -webkit-box-shadow: 0 5px 0px #30a1f7;
    box-shadow: 0 5px 0px #30a1f7;
}

.movie .contents .twitter .btn-tweet a span {
    position: relative;
}

.movie .contents .twitter .btn-tweet a span:before {
    position: absolute;
    content: '';
    width: 25px;
    /* 50x42 */
    height: 16px;
    top: 50%;
    left: -30px;
    margin-top: -8px;
    background: url('../images/icon_twitter_for_tweetbutton.png') no-repeat;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -ms-background-size: contain;
    background-size: contain;
}


/* 360px 以上(ふるいスマホ) */

@media only screen and (min-width: 360px) {
    .movie .movie-list .item .list .thumb {
        width: 160px;
    }
}


/* 480px 以上(スマホ) */

@media only screen and (min-width: 480px) {
    .movie .movie-list .item {
        margin: 0 auto 15px;
    }
    .movie .movie-list .item .list .thumb {
        width: 240px;
    }

    .movie .inner {
        margin: 0 auto 15px;
    }

    .movie .intro .dr {
        width: 85px;
        height: auto;
    }
    .movie .intro .comment {
        width: 350px;
        height: auto;
    }
    .movie .contents .twitter {
        margin-top: 20px;
    }
    .movie .contents .twitter .comment {
        padding: 0 0 0 110px;
    }
    .movie .contents .twitter .comment .dr {
        width: 85px;
        height: auto;
    }
    .movie .contents .twitter .comment .balloon img {
        width: 160px;
        height: auto;
    }
}


/* 768px 以上(タブレット以上) */

@media only screen and (min-width: 768px) {
    .movie .intro {
        margin-bottom: 30px;
    }
    .movie .intro .dr {
        width: 100px;
        height: auto;
    }
    .movie .intro .comment {
        width: 360px;
        height: auto;
        margin-top: 10px;
    }
    .movie .movie-list {
        overflow: hidden;
    }
    .movie .movie-list .item {
        float: left;
        width: 44%;
        height: 350px;
        margin: 0 10px 25px;
    }
    .movie .movie-list .item .list .thumb {
        float: none;
        width: 100%;
        min-height: 250px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
    }
    .movie .movie-list .item .list .thumb:after {
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        width: 78px;
        height: 56px;
        margin-left: -39px;
        margin-top: -28px;
        background: url(../images/icon_play.png) no-repeat;
        -moz-box-shadow: 0 0 10px #666;
        -webkit-box-shadow: 0 0 10px #666;
        box-shadow: 0 0 10px #666;
        border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -ms-border-radius: 15px;
    }
    .movie .movie-list .item .list .detail {
        float: none;
        width: auto;
        padding: 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
    }
    .movie .contents .twitter {
        margin-top: 25px;
    }
    .movie .contents .twitter .comment {
        padding: 0 0 0 50px;
    }
    .movie .contents .twitter .comment .dr {
        width: 100px;
        height: auto;
    }
    .movie .contents .twitter .comment .balloon img {
        width: 200px;
        height: auto;
    }
    .movie .contents .twitter .btn-tweet a span:before {
        width: 35px;
        height: 30px;
        top: 50%;
        left: -45px;
        margin-top: -15px;
    }

}

.movie .btn-back {
    padding: 15px 0;
    text-align: center;
}

.movie .btn-back a {
    display: inline-block;
    width: 190px;
    height: 46px;
    background: url(./../images/btn2.png) no-repeat;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 46px;
    text-decoration: none;
    filter: dropshadow(color=#000000, offX=0, offY=-1) dropshadow(color=#000000, offX=1, offY=0) dropshadow(color=#000000, offX=0, offY=1) dropshadow(color=#000000, offX=-1, offY=0);
    text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px;
    border: none;
}

.movie .btn-back a:hover,
.help .section-inner .btn-back a:focus {
    background-position: 0 -46px;
}


/* 全画面ポップアップ */

#background-sheet {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 999;
    background-color: rgba(150, 150, 150, .8);
}

#background-sheet .close {
    position: absolute;
    height: 32px;
    width: 100%;
    top: -9px;
    left: 32px;
    text-align: right;
    z-index: 1000;
}

#background-sheet .close a {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    -ms-border-radius: 32px;
    text-align: center;
    font-size: 32px;
    line-height: 64px;
    color: #333;
    background-color: #fff;
    -webkit-box-shadow: #999 0px 2px 2px 1px;
    -moz-box-shadow: #999 0px 2px 2px 1px;
    box-shadow: #999 0px 2px 4px 1px;
}


/* 全画面YouTube?*/

.movie-detail {
    position: relative;
    width: 720px;
    /* 800x450 */
    height: 405px;
    /* サイズを指定しておかないと天地の位置の調整ができない */
    padding: 32px 8px 0;
    margin: 0 auto;
}

.movie-detail .main {
    width: 720px;
    height: 405px;
}

.movie-detail .main iframe {
    width: 100%;
    height: 100%;
}


.movie .btn-back {
	padding: 15px 0;
	text-align: center;
}
.movie .btn-back a {
	display: inline-block;
	width: 190px;
	height: 46px;
	background: url(./../images/btn2.png) no-repeat;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	color: #fff;
	font-weight: bold;
	line-height: 46px;
	text-decoration: none;
	filter:dropshadow(color=#000000,offX= 0,offY=-1)
		dropshadow(color=#000000,offX= 1,offY= 0)
		dropshadow(color=#000000,offX= 0,offY= 1)
		dropshadow(color=#000000,offX=-1,offY= 0);
	text-shadow: black 1px 1px 0px, black -1px 1px 0px,
		black 1px -1px 0px, black -1px -1px 0px;
	border: none;
}
.movie .btn-back a:hover, .help .section-inner .btn-back a:focus {
	background-position: 0 -46px;
}


.notes h2 {
	position: relative;
	width: 336px;
	height: 44px;
	margin: 0 auto -25px;
	padding: 20px 0;
	z-index: 100;
	text-align: center;
	background: url(../images/UI.Common.title_bg.png) no-repeat 50% 50%;
	-webkit-background-size: 336px auto;
	background-size: 336px auto;
}
.notes h2 img {
	height: 26px;
}
.notes .section dl {
	max-width: 420px;
	margin: 20px auto 0;
}
.notes .section dl dt {
	margin: 0 10px;
}
.notes .section dl dd {
	position: relative;
	margin: 0 10px;
	padding: 16px 10px 10px;
	border: 2px solid #000;
	background: #FFF;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
	box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
}
.notes .section dl img {
	width: 100%;
}
.notes .section .btn-back {
	padding: 15px 0;
	text-align: center;
}
.notes .section .btn-back a {
	display: inline-block;
	width: 190px;
	height: 46px;
	background: url(./../images/btn2.png) no-repeat;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	color: #fff;
	font-weight: bold;
	line-height: 46px;
	text-decoration: none;
	filter:dropshadow(color=#000000,offX= 0,offY=-1)
		dropshadow(color=#000000,offX= 1,offY= 0)
		dropshadow(color=#000000,offX= 0,offY= 1)
		dropshadow(color=#000000,offX=-1,offY= 0);
	text-shadow: black 1px 1px 0px, black -1px 1px 0px,
		black 1px -1px 0px, black -1px -1px 0px;
	border: none;
}
.notes .section .btn-back a:hover, .notes .section .btn-back a:focus {
	background-position: 0 -46px;
}

.noscript {
    position: relative;
	margin: 10px;
	padding: 16px 10px 10px;
	border: 2px solid #000;
	background: #FFF;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
	box-shadow: #9c9c9c 2px 3px 0, #efefef 0 0 0 4px inset;
}
.noscript p {
    text-align: center;
    font-size: 75%;
    line-height: 1.3333;
    color: #ff0000;
}


.modaltxt {
	font-size: 85%;
	padding-bottom: 20px;
}
.modalimg img {
	max-width: 560px;
	width: 100%;
}