@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}


html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media all and (-ms-high-contrast: none)  {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body{
	padding:0;
	margin:0;
	text-rendering: optimizeLegibility;
	color: #444;
	line-height: 1.75;
	background-color:#f7f7f7;
}
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}
div{
	margin:0;
	padding:0;
}
.wrapper{
	width;100%;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}
.main{
	width;100%;
	margin:0 auto;
	padding:0px 14px 14px 14px;
	background-color:#fff;
	position:relative;
	overflow:hidden;
	float:left;
}

h3{
	font-size: 26px;
	line-height: 1.5;
	background-color:#ff9900;
	padding:1px 7px 0px 7px;
	margin:14px -14px 0 -14px;
	color:#fff;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
h3:before {
    content:'\2726';
    padding:0 2px 0 0;
}
h3.nomark{
	text-align:center!important;
	margin:0 0!important;
}
h3.nomark:before {
    content:''!important;
    padding:0!important;
}
h4{
	font-size: 20px;
	line-height: 1.5;
	border-radius: 3px;
	margin:7px 0 0 0;
}
h4:before {
    content:'\2605';
    color:#ff9900;
}
.pict{
	width:100%;
}
.pict img{
	width:auto;
	max-width:100%;
}
.youtube{
	margin:0;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow:visible;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
	width:100%;
    height: 100%;
}
.loading{
    background-image: url("loading_black2.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-color:#000;
}
.codeform{
	clear:both;
	float:none;
	position:relative;
}

.inputselect{
	margin:0 0 10px 0;
	line-height:1.5;
}


/* 表示文字の装飾 */
.info{
    color: #e88a00;
    display: inline-block;                        /* インライン要素化 */
    font-weight:bold;
    font-size:100%;
    border-radius: 50%;
    border:2px solid #e88a00;
	background-color:#fff;
	width:1.4em;
	height:1.4em;
	line-height:1.4;
	text-align:center;
	transform-origin:0px 0px;
	transform:scale(0.65,0.65);
	vertical-align:-0.175em;

}
 
/* ツールチップ部分を隠す */
.info span {
    display: none;
}
 
/* マウスオーバー */
.info:hover {
    position: relative;
    cursor: pointer;
}
 
/* マウスオーバー時にツールチップを表示 */
.info:hover span {
    display: block;                  /* ボックス要素にする */
    position: fixed;            /* relativeからの絶対位置 */
    right: -1em;
    bottom:2em;
    background-color: #444;
    padding: 5px;
    width: 12em;
    color: #fff;
    z-index: 100;
    font-size:1.2em;
    font-weight:normal;
	text-align:left;
	border-radius: 3px;
}
.button{
	position:relative;
	clear:both;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 0 14px 0;
}
#preview{
	display: block;
	position:relative;
	padding: 0 0 3px 0;
	float:left;
	width:49%;
}
#preview span{
position:relative;
text-align:center;width:100%;height:auto;margin:0 auto;
color:#fff;border-radius:4px;background-color: #ff9900;box-shadow: 0 3px 0 0 #d68000;line-height: 28px;display: block;
font-weight:bold;
font-size:1em;
cursor: pointer;
}
#preview:hover{
	padding: 0 0 3px 0;
}
#preview:hover span{
	box-shadow: 0 3px 0 0 #d68000;
}
#preview:active{
	padding: 3px 0 0 0;
}
#preview:active span{
	box-shadow: none;
}
#done{
	display: block;
	position:relative;
	padding: 0 0 3px 0;
	float:right;
	width:49%;
}
#done span{
position:relative;
text-align:center;width:100%;height:auto;margin:0 auto;
color:#fff;border-radius:4px;background-color: #e82020;box-shadow: 0 3px 0 0 #aa1616;line-height: 28px;display: block;
font-weight:bold;
font-size:1em;
cursor: pointer;
}
#done:hover{
	padding: 0 0 3px 0;
}
#done:hover span{
	box-shadow: 0 3px 0 0 #aa1616;
}
#done:active{
	padding: 3px 0 0 0;
}
#done:active span{
	box-shadow: none;
}
.previewwindow{
	float:none;
	clear:both;
	border:1px solid #ddd;
	margin:0 auto;
}
.notice{
	color:#666;
	text-align:center;
	font-size:10px;
}

.toggle{
	position:relative;
	background-color:#999;
	border-radius:4px;
	color:#fff;
	padding:7px!important;
	margin:0 0 7px 0!important;
	cursor: pointer;
}
.toggle strong{

	line-height:1!important;
	display:inline-block;
	width:100%;
}

.toggle strong .arrow::after{
	content:"\25B6";
}
.toggle.active strong .arrow::after{
	content:"\25BC"!important;
}
.toggle strong .close{
	display:none;
	border:2px solid #fff;
	padding:1px 2.5px;
	float:right;
	margin:0 5px 0 0;
}
.toggle.active strong .close{
	display:inline-block;
}
.toggle strong .close::after{
	content:" ";
}
.toggle.active strong .close::after{
	content:"\2716"!important;
}
.toggledata{
	display:none;
	margin:7px!important;
	line-height:1.3;
}
.toggledata pre{
	cursor: text;
}
.sns{
	height:24px;
	margin:7px 0;
	overflow:hidden;

}
.sns_default{
	float:right;
	display:inline-block;
	margin:7px 0 0 7px;
	font-size:14px;
	height:24px;
	line-height:24px;
	text-align:center;
	text-shadow:none;
}
.sns_share{
	float:right;
	display:inline-block;
	height:1.5rem;
	line-height:1.5rem;
	text-align:center;
	margin:7px 0 0 10px;
	border-radius: 4px;
	font-size:10px;
	overflow:hidden;
}

.sns_share a{
	display:inline-block;
	text-decoration:none;
	color:#ffffff;	
	height:1.5rem;
	padding:0 4px;
	text-shadow:none;
	font-weight:bold;
}

.twitter_btn{
	background-color:#1DA1F2;
}
.twitter_btn a:hover{
	background-color:#B0B0B0;
	color:#1DA1F2;
}
.facebook_btn{
	background-color:#315096;
}
.facebook_btn a:hover{
	background-color:#B0B0B0;
	color:#315096;
}
.hatena_btn{
	background-color:#00a4de;

}
.hatena_btn a:hover{
	background-color:#B0B0B0;
	color:#00a4de;
}
.tab_wrap{position:relative;width:100%;margin:0 0;background:#fff;overflow:hidden;text-align:center;}
input[type="radio"]{display:none;}
.tab_area{position: relative;margin:0;font-size:0;background:#eee;border-top:1px solid #ddd;}
.tab_area label{margin:0; display:inline-block; padding:0 7px; color:#999; background:#eee; text-align:center; line-height:2.5em; font-size:13px; font-weight:bold; cursor:pointer;}
.tab_area label.labelcat{ display:block;text-align:left;color:#fff;font-size:16px;line-height:1.5em;padding:1px 0 0 7px;background:#ccc;	text-shadow: 0px 1px 2px rgba(0,0,0,0.3);}
.tab_area label:hover{}
.panel_area{position: relative;margin:0;padding:0px;}
.tab_panel{width:100%; padding:0; display:none;height:auto;padding:0 0 7px 0;}
 
#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background:#fff; color:#000;}
#tab4:checked ~ .panel_area #panel4{display:block;}
#tab5:checked ~ .tab_area .tab5_label{background:#fff; color:#000;}
#tab5:checked ~ .panel_area #panel5{display:block;}
#tab6:checked ~ .tab_area .tab6_label{background:#fff; color:#000;}
#tab6:checked ~ .panel_area #panel6{display:block;}
#tab7:checked ~ .tab_area .tab7_label{background:#fff; color:#000;}
#tab7:checked ~ .panel_area #panel7{display:block;}
#tab8:checked ~ .tab_area .tab8_label{background:#fff; color:#000;}
#tab8:checked ~ .panel_area #panel8{display:block;}
#tab9:checked ~ .tab_area .tab9_label{background:#fff; color:#000;}
#tab9:checked ~ .panel_area #panel9{display:block;}
#tab10:checked ~ .tab_area .tab10_label{background:#fff; color:#000;}
#tab10:checked ~ .panel_area #panel10{display:block;}
#tab11:checked ~ .tab_area .tab11_label{background:#fff; color:#000;}
#tab11:checked ~ .panel_area #panel11{display:block;}

#dmmcat{
	display:none;
}

.adbottom{
	width:686px;
	height:280px;
	text-align:center;
	margin:7px auto 0 auto;
}
.adbottom_inner{
	width:336px;
	height:280px;
	float:left;
}
.adside{
	width:300px;
	min-height:600px;
	height:auto;
	float:right;
	margin:14px 0 0 0;
}
#footer{
	z-index:500!important;
	width:100%;
	height:50px;
	padding:0;
	position: fixed;
	bottom: 0;
	font-size: 0;
	line-height: 0;
	text-align: center;
	background-color:#000;
}
#page_top {
	position:fixed;
	width:100%;
	bottom:10px;
	text-align: center;
	padding:0;
	margin:0;
	z-index: 9999;
}
#page_top a{
	display:inline-block;
	width:200px;
	border-radius: 6px;
	color:#fff;
	font-size:0.9em;
	text-decoration:none;
	background:#ff9900;
	border:2px solid #fff;
	text-align: center;
	line-height: 2.5;
	font-weight:bold;
	padding:0;
	margin:0;
}
#page_top a:after{
	content:"TOP\306B\623B\308B";
}
#page_top a:hover{
	color:#ff9900;
	background:#fff;
	border:2px solid #ff9900;
}

.en_footer #page_top a:after{
	content:"\025b2\00a0TOP\00a0\025b2"!important;
}

.contact{
	font-size:0.8em;
}

.en_notice{
	color:#666;
	font-size:0.8em;
}
.language{
	display:block;
	text-decoration:none;
	font-size:0.9em;
	font-weight:bold;
	line-height:1.5;
	text-align:right;
	margin:0 -14px -14px -14px;
	padding:4px 7px;
}

.language span{
	border:1px solid #ccc;
	display:inline-block;
    width:0.9em;
    height:calc((0.9em / 4) * 3 );
	margin:0 1px 0 0;
	line-height:0.9;
}
.best{
  margin:0!important;

}
	.side{
		background-color:#fff;
		margin:0 0 114px 0;
	}
	.side h4{
		background-color:#666;
		color:#fff;
		padding:0 7px;
		border-radius:0px;
		margin:0 -14px 7px -14px;
	}
	.side h4:before {
	    content:'\1F4CC';
	    color:#ff9900;
	}
	.side a{
		display:block;
		line-height:130%;
		text-decoration:none;
		margin:0 14px 14px 14px;
	}
	.side a img{
		width:100%;
		height:auto;
	}
@media screen and (min-width: 1080px) {
	.wrapper{
		width:1080px;
	}
	.main{
		width: 728px!important;
		border-right:1px solid #ddd;
		border-left:1px solid #ddd;
		margin:0 auto;
	}
	.side{
		border-right:1px solid #ddd;
		border-left:1px solid #ddd;
		width:300px;
		background-color:#fff;
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		margin:0;
	}
	.side h4{
		background-color:#666;
		color:#fff;
		padding:0 7px;
		border-radius:0px;
		margin:0 -14px 7px -14px;
	}
	.side h4:before {
	    content:'\1F4CC';
	    color:#ff9900;
	}
	.side a{
		display:block;
		line-height:130%;
		text-decoration:none;
		margin:0 14px 14px 14px;
	}
	.side a img{
		width:100%;
		height:auto;
	}
	.youtbeouter{
		width:560px
	}
	#page_top{
		text-align:right;
		right:14px;
		bottom:14px;
		width:200px;
	}
}