@charset "utf-8";


/* =============================================================================
   common
   ========================================================================== */


/* Typography */
html {
	font-size: 100%;
	color: #262626;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
}
@media only screen and (max-width: 767px) {
	/*html {
		font-size:87.5%;
	}*/
}

.mincho { font-family: 'Noto Serif JP', serif;}
.engRoboto { font-family: "Roboto", sans-serif;}

h1,h2,h3,h4,h5,h6 { line-height: 1.3; font-size: 1.125em;}
p { line-height: 1.7;}
li,dt,dd,th,td,caption { line-height: 1.4;}


ul.release { margin: 0; padding: 0; list-style: none;}


/* anchor-link */
a { color: #0075C1; text-decoration:none; transition: all 0.1s linear;}
a:hover { color:#262626; text-decoration:underline;}

a.underline { color: #0075C1; text-decoration: underline;}
a.underline:hover { text-decoration: none;}

a.imgOver:hover img{
	zoom: 1;
	opacity: .50;
	filter: alpha( opacity=50 );
	-ms-filter: "alpha(opacity=50)";
	-khtml-opacity: .50;
	-moz-opacity: .50;
}
a.bgOver:hover {
	zoom: 1;
	opacity: .50;
	filter: alpha( opacity=50 );
	-ms-filter: "alpha(opacity=50)";
	-khtml-opacity: .50;
	-moz-opacity: .50;
}
@media only screen and (max-width: 1000px) {
	a.imgOver:hover img{
		zoom: 1;
		opacity: 1;
		filter: alpha( opacity=100 );
		-ms-filter: "alpha(opacity=100)";
		-khtml-opacity: 1;
		-moz-opacity: 1;
	}
	a.bgOver:hover {
		zoom: 1;
		opacity: 1;
		filter: alpha( opacity=100 );
		-ms-filter: "alpha(opacity=100)";
		-khtml-opacity: 1;
		-moz-opacity: 1;
	}
}


/* layout */
.clear:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.wrap {
	max-width: 1100px;
	margin:0 auto;
	box-sizing: border-box;
}
.wrapS {
	width:860px;
	margin:0 auto;
}
.smpBr { display:none;}
.smpBox { display:none;}
.pcBox {}
.smphide {}
.dispMobi { display:none;}
@media only screen and (max-width: 1000px) {
	.wrap {
		padding: 0 40px;
	}
}
@media only screen and (max-width: 820px) {
	.wrapS {
		padding: 0 40px;
	}
}
@media only screen and (max-width: 640px) {
	.wrap {
		padding: 0 20px;
	}
	.wrapS {
		padding: 0 20px;
	}
	.wrap .wrapS {
		padding: 0;
	}
}


/*PC→スマホ 表示・非表示*/
.pcBlock { display: block !important;}
.spBlock { display: none !important;}
.pcInline { display: inline !important;}
.spInline { display: none !important;}
@media only screen and (max-width: 1000px) {
	/*PC→スマホ 表示・非表示*/
	.pcBlock { display: none !important;}
	.spBlock { display: block !important;}
	.pcInline { display: none !important;}
	.spInline { display: inline !important;}
}


.video-container {
	position: relative;
	margin: 0;
	padding: 0;
	padding-bottom: 56.25%;
	height:0;
	overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


hr {
	background-color: #ddd;
	border: 0;
	clear: both;
	height: 1px;
	margin: 2em 0;
}


/* Tables */
/*
table.simple = スマホ時column
.scroll-table table = スマホ時横スクロール
.scroll-table table thead = この時に使う
*/
table {
    border-collapse: collapse;
    border-spacing: 0;
	overflow: auto;
	margin: 1em 0;
	width: 100%;
}
table th,
table td {
	vertical-align: middle;
	padding: 15px 15px;
	border: 1px solid #c4c4c4;
	background: #FFF;
}
table thead th,
table thead td {
	text-align: center;
	font-weight: bold;
}
table th {
	text-align: left;
	font-weight: bold;
	border-right: 1px solid #ccc;
	padding-right: 30px;
}
table td {
	border-left: 1px solid #ccc;
	padding-left: 30px;
}
.scroll-table {}
.scroll-text {
	display: none;
	padding-top: 5px;
	padding-bottom: 15px;
	text-align: right;
}
@media only screen and (max-width: 1000px) {
	table th {
		white-space: nowrap;
	}
	table th,
	table td {
		padding: 15px 10px;
	}
	table td {
		padding-left: 20px;
	}
	.scroll-table {
		overflow: auto;
		white-space: nowrap;
	}
	.scroll-table::-webkit-scrollbar{
		height: 5px;
	}
	.scroll-table::-webkit-scrollbar-track{
		background: #F1F1F1;
	}
	.scroll-table::-webkit-scrollbar-thumb {
		background: #BCBCBC;
	}
	.scroll-text {
		display: block;
	}
	table.simple th,
	table.simple td{
		border: none;
		text-align:left;
		width:auto;
		display:block;
	}
	table.simple th {
		padding-bottom: 5px;
	}
	table.simple td {
		padding-left: 10px;
		padding-top: 5px;
		border-bottom: 1px solid #ccc;
	}
}




/* 汎用スタイル */

/* float 指定
------------------------------------------*/
.imgLeft {
    float: left;
	margin:0.5em 1em 2em 0;}
.imgRight {
    float: right;
	margin:0.5em 0 2em 1em;}
.imgLeft02 {
    float: left;
	width: 250px;
	margin:0.5em 1em 2em 0;}
.imgRight02 {
    float: right;
	width: 250px;
	margin:0.5em 0 2em 1em;}

/* padding 指定
------------------------------------------*/
.noPad { padding:0 !important;}
.pad5 { padding:5px !important;}
.pad10 { padding:10px !important;}
.pad15 { padding:15px !important;}
.pad20 { padding:20px !important;}
.padT5 { padding-top:5px !important;}
.padT10 { padding-top:10px !important;}
.padT15 { padding-top:15px !important;}
.padT20 { padding-top:20px !important;}
.padT30 { padding-top:30px !important;}
.padT40 { padding-top:40px !important;}
.padT50 { padding-top:50px !important;}
.padR5 { padding-right:5px !important;}
.padR10 { padding-right:10px !important;}
.padR15 { padding-right:15px !important;}
.padR20 { padding-right:20px !important;}
.padR30 { padding-right:30px !important;}
.padR40 { padding-right:40px !important;}
.padR50 { padding-right:50px !important;}
.padB5 { padding-bottom:5px !important;}
.padB10 { padding-bottom:10px !important;}
.padB15 { padding-bottom:15px !important;}
.padB20 { padding-bottom:20px !important;}
.padB30 { padding-bottom:30px !important;}
.padB40 { padding-bottom:40px !important;}
.padB50 { padding-bottom:50px !important;}
.padL5 { padding-left:5px !important;}
.padL10 { padding-left:10px !important;}
.padL15 { padding-left:15px !important;}
.padL20 { padding-left:20px !important;}
.padL30 { padding-left:30px !important;}
.padL40 { padding-left:40px !important;}
.padL50 { padding-left:50px !important;}

/* margin 指定
------------------------------------------*/
.noMar { margin:0 !important;}
.mar5 { margin:5px !important;}
.mar10 { margin:10px !important;}
.mar15 { margin:15px !important;}
.mar20 { margin:20px !important;}
.marT5 { margin-top:5px !important;}
.marT10 { margin-top:10px !important;}
.marT15 { margin-top:15px !important;}
.marT20 { margin-top:20px !important;}
.marR5 { margin-right:5px !important;}
.marR10 { margin-right:10px !important;}
.marR15 { margin-right:15px !important;}
.marR20 { margin-right:20px !important;}
.marB5 { margin-bottom:5px !important;}
.marB10 { margin-bottom:10px !important;}
.marB15 { margin-bottom:15px !important;}
.marB20 { margin-bottom:20px !important;}
.marL5 { margin-left:5px !important;}
.marL10 { margin-left:10px !important;}
.marL15 { margin-left:15px !important;}
.marL20 { margin-left:20px !important;}

/* font style
------------------------------------------*/
.fontRed { color:crimson;}
.fontRed2 { color:red;}
.fontBlue { color:#0066CC;}
.fontBlue2 { color:blue;}
.fontGreen { color:green;}
.fontYellow { color:gold;}
.fontYellow2 { color:yellow;}
.fontRem8 { font-size:12px; font-size:0.9rem;}
.fontRem10 { font-size:14px; font-size:1.0rem;}
.fontRem11 { font-size:15px; font-size:1.1rem;}
.fontRem12 { font-size:16px; font-size:1.2rem;}
.fontRem14 { font-size:18px; font-size:1.4rem;}
.fontRem16 { font-size:20px; font-size:1.6rem;}
.fontRem18 { font-size:22px; font-size:1.8rem;}
.fontBold { font-weight:bold;}
.textLeft { text-align:left;}
.textRight { text-align:right;}
.textCenter { text-align:center;}
.textCenterLeft { text-align:center;}
@media only screen and (max-width: 1000px) {
	.textCenterLeft { text-align:left;}
}