@charset "utf-8";

@media screen and (min-width: 768px) and (max-width: 979px){ /* tb */
}

@media screen and (max-width: 767px){ /* sp */
}


#content{}
	.content{
		background: #fff;
		text-align: center;
		min-width: 980px;
		width: expression(this.width >= this.height ? "980px" : "auto");
		margin: auto;
		letter-spacing: -.40em;
		box-shadow: 0px 0px 2px #bbb;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
		.content article>*{letter-spacing: normal;}
		.content article>h1{
			text-align: center;
			background: #ffffff; /* Old browsers */
			background: -moz-linear-gradient(top, #ffffff 22%, #f0f0f0 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #ffffff 22%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #ffffff 22%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
			
		}
			.content article>h1 span{
				font-size: 1.3em;
				padding: .8em 0 .6em;
				max-width: 980px;
				margin: auto;
				display: block;
				text-align: left;
				line-height: 1em;
				position: relative;
			}
			/*
			.content article>h1 span::after{
				content: "";
				display: inline-block;
				width: 2.65em;
				height: 2.65em;
				position: absolute;
				top: 0px;
				right: 0px;
				background-position: right center;
				background-repeat: no-repeat;
				background-size: 85%;
			}
				.notice_style article>h1 span::after	{background-image: url(../images/notice/h1_icon.png);}
				.lineup_style article>h1 span::after	{background-image: url(../images/lineup/h1_icon.png);}
				.howto_style article>h1 span::after	{background-image: url(../images/howto/h1_icon.png);}
				.event_style article>h1 span::after	{background-image: url(../images/event/h1_icon.png);}
				.support_style article>h1 span::after	{background-image: url(../images/support/h1_icon.png);}
				.products_style article>h1 span::after	{background-image: url(../images/lineup/h1_icon.png);}
			*/

@media screen and (min-width: 768px) and (max-width: 959px){ /* tb */
	.content{
		min-width: 100%;
	}
		.content article>h1 span{
			max-width: 760px;
		}
}
@media screen and (max-width: 767px){ /* sp */
	.content{
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
		.content article>h1 span{
			padding: .8em 0;
			text-align: center;
			font-size:90%;
		}
		.content article>h1 span::after{
			content:none;
		}
}



.content-main{}
	.content-main{
		display: inline-block;
		width: 760px;
		padding: 1em 0;
		letter-spacing: normal;
		*display: inline;
		*zoom: 1;
		text-align: left;
		color: #444;
		/*box-shadow: 0 0 0 3px #ff0 inset;*/
	}
	.content-main.no_sidebar{width: 980px;}
@media screen and (min-width: 768px) and (max-width: 959px){ /* tb */
	.content-main.no_sidebar{width: 760px;}
}
@media screen and (max-width: 767px){ /* sp */
	.content-main{
		display: block;
		width: auto;
		margin: auto;
		font-size: 80%;
		padding: 1em 1em 3em;
	}
	.content-main.no_sidebar{width:auto;}
	.content-main img{max-width:100%;}
}

	.content-main > section{
		padding: 1em 0 0;
		margin-bottom: 2em;
		/*box-shadow: 0 0 0 1px #f0f inset;*/
	}
		.content-main>section::after{
			content: "."; 
			display: block;
			clear: both;
			height: 0;
			visibility: hidden;
		}
		.content-main>section{min-height: 1px;}
		* html ..content-main>section{
			height: 1px;
			/*\*//*/
			height: auto;
			overflow: hidden;
			/**/
		}
	
	.content-main > section > p{margin-bottom: 1em;}
	
	

	
	.content-main > p{
		margin-bottom: 20px;
	}
	.content-main small{
		font-size: 80%;
		color: #666;
	}
	.content-main ul li{
		margin: 3px auto;
	}
	.content-main ul.marker{
		margin-bottom: 20px;
	}
	.content-main ul.marker li{
		list-style-type: square;
		margin-left: 22px;
	}
	
	.content-main .center{
		text-align: center;
	}
		.content-main .center>*{
			margin-left: auto;
			margin-right: auto;
		}
	
	.trans_hover a: hover{
		filter: alpha(opacity=70);
		-moz-opacity: 0.7;
		opacity: 0.7;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}
	
	
	div.f_right_img{
		float: right;
		margin-left: 20px;
	}
	div.f_right_img .caption{
		display: block;
		font-size: 75%;
	}
	div.f_left_img{
		float: left;
		margin-right: 20px;
	}
	div.f_left_img .caption{
		display: block;
		font-size: 75%;
	}
	
@media screen and (max-width: 767px){ /* sp */
	div.f_right_img{
		float:none;
		border:1px solid #ccc;
		margin:0 0 10px;
		text-align:center;
		padding:10px;
	}
		div.f_right_img img{
			display:block;
			margin:auto;
		}
}
	
	
	
	.title_style_a{
		font-size: 160%;
		padding: 0;
		margin-bottom: 1em;
		font-weight: bold;
		letter-spacing: normal;
		border-bottom-width: 3px;
		border-bottom-style: solid;
		line-height: 1.1em;
	}
		.title_style_a ruby{font-weight: bold;}
		.lineup_style .title_style_a , .lineup_style .title_style_a *{		color: #0054ff;}
		.products_style .title_style_a , .products_style .title_style_a *{	color: #0054ff;}
		.notice_style .title_style_a , .notice_style .title_style_a *{		color: #dcb900;}
		.howto_style .title_style_a , .howto_style .title_style_a *{		color: #f54fe5;}
		.event_style .title_style_a , .event_style .title_style_a *{		color: #e12430;}
		.support_style .title_style_a , .support_style .title_style_a *{	color: #3d8d8f;}
		.lineup_style .title_style_a{	border-color: #0054ff;}
		.products_style .title_style_a{	border-color: #0054ff;}
		.notice_style .title_style_a{	border-color: #dcb900;}
		.howto_style .title_style_a{	border-color: #f54fe5;}
		.event_style .title_style_a{	border-color: #e12430;}
		.support_style .title_style_a{	border-color: #3d8d8f;}
@media screen and (max-width: 767px){ /* sp */
	.title_style_a{
		font-size: 140%;
		margin: auto 0 1em;
		padding-left: 0;
	}
}


	.youtube-embed{
		margin: 1em auto;
		width: 95%;
	}
		.youtube-embed div{
			height: 0;
			padding-top: 56.25%;
			position: relative;
		}
		.youtube-embed iframe{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
		}


.btn_l{}
	.content-main a.btn_l{
		overflow: hidden;
		color: #fff !important;
		font-weight: bold;
		background: #777 url(../images/common/btn_l_bk.png) left center;
		display: inline-block;
		padding: 8px 25px 6px 48px;
		text-decoration: none;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-radius: 8px;
		font-size: 120%;
	}
		.content-main a.btn_l.notice{background-color: #cbbf33;}
		.content-main a.btn_l.lineup{background-color: #0054ff;}
		.content-main a.btn_l.howto{background-color: #ff4ae2;}
		.content-main a.btn_l.event{background-color: #fb3636;}
		.content-main a.btn_l.support{background-color: #3d8d8f;}
		.content-main a.btn_l: hover{background-position: -600px center;}
@media screen and (max-width: 767px){ /* sp */
	.content-main a.btn_l{
		display:block;
		text-align:center;
		max-width:500px;
	}
}



.btn_m{}
	.content-main a.btn_m , .content-main span.btn_m{
		overflow: hidden;
		color: #fff !important;
		font-weight: bold;
		background: #777 url(../images/common/btn_m_bk.png) left center;
		display: inline-block;
		padding: 4px 20px 4px 37px;
		text-decoration: none;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-radius: 5px;
		font-size: 95%;
	}
		.content-main a.btn_m.notice{background-color: #cbbf33;}
		.content-main a.btn_m.lineup{background-color: #0054ff;}
		.content-main a.btn_m.howto{background-color: #ff4ae2;}
		.content-main a.btn_m.event{background-color: #fb3636;}
		.content-main a.btn_m.support{background-color: #3d8d8f;}
		.content-main a.btn_m: hover{background-position: -600px center;}
@media screen and (max-width: 767px){ /* sp */
	.content-main a.btn_m{
		display:block;
		max-width:500px;
		padding:6px 20px 6px 37px;
		font-size:100%;
		text-align:center;
	}
}


.link_marker{}
	.content-main a.link_marker ,
	.content-main a.cue_marker , 
	.content-main a.dl_marker,
	.content-main a.outsite_marker{
		display: inline-block;
		padding-left: 22px;
		background-repeat: no-repeat;
		background-position: left center;
		margin-right: 10px;
	}
	.content-main a.link_marker: hover ,
	.content-main a.cue_marker: hover,
	.content-main a.dl_marker: hover{
		/*color: #000;*/
	}
	.content-main a.link_marker{
		background-image: url(../images/common/link_marker.png);
	}
		.content-main a.link_marker.notice{background-image: url(../images/notice/link_marker.png);}
		.content-main a.link_marker.lineup{background-image: url(../images/lineup/link_marker.png);}
		.content-main a.link_marker.howto{background-image: url(../images/howto/link_marker.png);}
		.content-main a.link_marker.event{background-image: url(../images/event/link_marker.png);}
		.content-main a.link_marker.support{background-image: url(../images/support/link_marker.png);}

	.content-main a.cue_marker{
		background-image: url(../images/common/cue_marker.png);
	}
		.content-main a.cue_marker.notice{background-image: url(../images/notice/cue_marker.png);}
		.content-main a.cue_marker.linup{background-image: url(../images/lineup/cue_marker.png);}
		.content-main a.cue_marker.howto{background-image: url(../images/howto/cue_marker.png);}
		.content-main a.cue_marker.event{background-image: url(../images/event/cue_marker.png);}
		.content-main a.cue_marker.support{background-image: url(../images/support/cue_marker.png);}

	.content-main a.dl_marker{
		background-image: url(../images/common/dl_marker.png);
	}
		.content-main a.dl_marker.notice{background-image: url(../images/notice/dl_marker.png);}
		.content-main a.dl_marker.linup{background-image: url(../images/lineup/dl_marker.png);}
		.content-main a.dl_marker.howto{background-image: url(../images/howto/dl_marker.png);}
		.content-main a.dl_marker.event{background-image: url(../images/event/dl_marker.png);}
		.content-main a.dl_marker.support{background-image: url(../images/support/dl_marker.png);}

	.content-main a.outsite_marker{
		background-image: url(../images/common/to_outsite.png);
	}
@media screen and (max-width: 767px){ /* sp */
	.content-main a.link_marker ,
	.content-main a.cue_marker ,
	.content-main a.dl_marker{
		font-size:110%;
		font-weight:bold;
	}
}



.content-main aside.pickup{
	border-width: 2px;
	border-style: solid;
	margin-bottom: 2em;
	border-radius: 5px;
}
	.content-main  aside.pickup > p , aside.pickup > div  , aside.pickup > ul{
		font-size: 90%;
		padding: 10px;
	}
		aside.pickup > ul.marker{
			margin-bottom: 0px !important;
		}
		aside.pickup > ul li{
			line-height: 1.2em;
		}
	aside.pickup > h1{
		font-size: 90%;
		padding: 5px 10px;
		background: #f0f;
		color: #fff;
		font-weight: bold;
	}
	.lineup_style aside.pickup{
		border-color: #0054ff;
		background: #f0f4ff;
	}
		.lineup_style aside.pickup h1{background: #0054ff;}
	.products_style aside.pickup{
		border-color: #0054ff;
		background: #f0f4ff;
	}
		.products_style aside.pickup h1{background: #0054ff;}
	.howto_style aside.pickup{
		border-color: #ff58bc;
		background: #fff5fb;
	}
		.howto_style aside.pickup h1{background: #ff58bc;}
	.event_style aside.pickup{
		border-color: #e12430;
		background: #fff0f0;
	}
		.event_style aside.pickup h1{background: #e12430;}



/*---- .layout ----*/
	.layout_f_img{margin-bottom: 30px;}
		.layout>div{
			float: right;
			margin-left: 20px;
		}
@media screen and (max-width: 767px){ /* sp */
/*---- .layout ----*/
	.layout_f_img{}
		div.layout>div{
			float:none;
			border:1px solid #ccc;
			margin:0 0 10px;
			text-align:center;
			padding:10px;
		}
		div.layout>div img{
			display:block;
			margin:auto;
		}
}

/*
.harf{
	display: inline-block;
	* display: block;
	* zoom: 1;
	width: 48%;
	vertical-align: top;
}
*/


/*-----.to_link------*/
.to_begin , .to_lineup , .to_howto , .to_support , .to_event, .to_notice, .to_other{
	display: inline-block;
	padding-left: 18px;
	background-repeat: no-repeat;
	background-position: left center;
	margin-right: 10px;
}
	.to_begin{	background-image: url(../images/begin/link_to.png);}
	.to_lineup{	background-image: url(../images/lineup/link_to.png);}
	.to_howto{	background-image: url(../images/howto/link_to.png);}
	.to_event{	background-image: url(../images/event/link_to.png);}
	.to_notice{	background-image: url(../images/notice/link_to.png);}
	.to_support{	background-image: url(../images/support/link_to.png);}
	.to_other{	background-image: url(../images/common/link_to.png);}


		
/*- btn-style -*/
	a.btn-style{
		display: inline-block;
		line-height: 1em;
		color: #fff;
		padding: .5em 2em .3em 3em;
		border-radius: .3em;
		text-decoration: none;
		position: relative;
		overflow: hidden;
		box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3) , 0 0 2px 2px rgba(255,255,255,0.2) inset;
		background: #f0f;
		font-size: 100%;
		font-weight: bold;
		text-align: center;
		transition: 0.1s;
		background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(66,66,66,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#424242',GradientType=0 );
	}
	a.btn-style>span{
		display: inline-block;
		font-weight: bold;
		color: #fff;
	}
	a.btn-style.f80{
		font-size: 80%;
		border-radius: .2em;
		box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3) , 0 0 1px 1px rgba(255,255,255,0.2) inset;
	}
	a.btn-style.f120{font-size: 120%;}
	a.btn-style.f140{font-size: 140%;}
	a.btn-style.f160{font-size: 160%;}
		a.btn-style::before{
			position: absolute;
			content: "";
			height: 100%;
			top: -40%;
			border-radius: 50%;
			background: rgba(255,255,255,.2);
			z-index: 20;
			width: 90%;
			width: -webkit-calc(100% - 10px) ;
			width: calc(100% - 10px) ;
			left: 5%;
			left: -webkit-calc(0% + 5px) ;
			left: calc(0% + 5px) ;
		}
		a.btn-style::after{
			position: absolute;
			content: "";
			width: 1em;
			height: 1em;
			top: .4em;
			left: 1.2em;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			z-index: 21;
			background-image: url(/japan/images/common/svg/general.svg);/*- 汎用 -*/
		}
		a.btn-style.external::after{ background-image: url(/japan/images/common/svg/external.svg);}/*- 外部サイト -*/
		a.btn-style.download::after{ background-image: url(/japan/images/common/svg/download.svg);}/*- ダウンロード -*/
		a.btn-style.none::after{ content: none;}/*- 無し -*/
	a.btn-style:hover{
		color: #fff;
		opacity: .8;
		transition: .2s;
	}
@media screen and (max-width: 767px){
	a.btn-style{
		display: block;
		border-radius: .3em;
		padding: 1em 2em .8em;
		margin-bottom: 1em;
	}
	a.btn-style::before{
		width: 100%;
		left: 0%;
		border-radius: 0 0 50% 50%;
	}
	a.btn-style::after{
		width: 1.2em;
		height: 1.2em;
		top: .8em;
		left: .8em;
	}
}
	a.btn-style: hover{
		box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.4) , 0 0 2px 2px rgba(255,255,255,0) inset;
		text-shadow: 0 0 0 rgba(0,0,0,0);
		color: #fff;
	}
	a.btn-style: hover::before{
		background: rgba(255,255,255,0);
		transition: 0.1s;
	}
	a.btn-style.notice{
		background: rgb(119,101,1);
		background: -moz-linear-gradient(top, rgba(119,101,1,1) 1%, rgba(193,186,1,1) 100%);
		background: -webkit-linear-gradient(top, rgba(119,101,1,1) 1%,rgba(193,186,1,1) 100%);
		background: linear-gradient(to bottom, rgba(119,101,1,1) 1%,rgba(193,186,1,1) 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#776501', endColorstr='#c1ba01',GradientType=0 );
	}
	a.btn-style.event{
		background: rgb(123,5,5);
		background: -moz-linear-gradient(top, rgba(123,5,5,1) 0%, rgba(238,35,35,1) 100%);
		background: -webkit-linear-gradient(top, rgba(123,5,5,1) 0%,rgba(238,35,35,1) 100%);
		background: linear-gradient(to bottom, rgba(123,5,5,1) 0%,rgba(238,35,35,1) 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7b0505', endColorstr='#ee2323',GradientType=0 );
	}
	a.btn-style.howto{
		background: rgb(188,28,148);
		background: -moz-linear-gradient(top, rgba(188,28,148,1) 1%, rgba(223,59,205,1) 100%);
		background: -webkit-linear-gradient(top, rgba(188,28,148,1) 1%,rgba(223,59,205,1) 100%);
		background: linear-gradient(to bottom, rgba(188,28,148,1) 1%,rgba(223,59,205,1) 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#bc1c94', endColorstr='#df3bcd',GradientType=0 );
	}
	a.btn-style.lineup{
		background: rgb(17,51,184);
		background: -moz-linear-gradient(top, rgba(17,51,184,1) 1%, rgba(34,108,222,1) 100%);
		background: -webkit-linear-gradient(top, rgba(17,51,184,1) 1%,rgba(34,108,222,1) 100%);
		background: linear-gradient(to bottom, rgba(17,51,184,1) 1%,rgba(34,108,222,1) 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1133b8', endColorstr='#226cde',GradientType=0 );
	}
	a.btn-style.support{
		background: rgb(5,107,146);
		background: -moz-linear-gradient(top, rgba(5,107,146,1) 0%, rgba(11,187,205,1) 100%);
		background: -webkit-linear-gradient(top, rgba(5,107,146,1) 0%,rgba(11,187,205,1) 100%);
		background: linear-gradient(to bottom, rgba(5,107,146,1) 0%,rgba(11,187,205,1) 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#056b92', endColorstr='#0bbbcd',GradientType=0 );
	}