@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description : 共通ベースラインCSS
===================================================================== */

/* =====================================================================
*    共通・大枠
* =================================================================== */
html {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
	font-size: 10px;
	line-height: 1.4;
}

.wrapper {
    position: relative;
    overflow: hidden;
	background: #000;
}

.wrapper > * {
	position: relative;
	z-index: 10;
}

.wrapper::before {
	content: "";
	width: 100%;
	height: 0;
	padding-top: 160.15625%;
	display: block;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 87, 112, 1) 100%);
	background-size: 100% 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 9;
}

.wrapper > .inner {
	width: 100%;
    position: relative;
}

@media screen and (min-width:640px){
	.wrapper::before {
		padding-top: 1025px;
	}
}

@media screen and (min-width:700px){
	.wrapper::after {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 68.6275%;
		background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 87, 112, 1) 100%);
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.wrapper::before {
		padding-top: 70.5883%;
	}

	/* コンテンツ枠 */
	.contents {
		width: 100%;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-o-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box;
		padding-right: 300px;
	}

	/* 右カラム枠 */
	#right_column {
		position: absolute;
		top: 0;
		right: 0;
	}
}

@media screen and (min-width:1020px){
	.wrapper::after {
		padding-top: 700px;
	}

	.wrapper::before {
		padding-top: 720px;
	}

	/* 右カラム枠 */
	#right_column {
		right: 50%;
		margin-right: -510px;
	}
}

img {
	width: 100%;
	height: auto;
	display: block;
}



@media screen and (max-width:699px){
	.pc {
		display: none;
	}
}

@media screen and (min-width:700px){
	.sp {
		display: none;
	}
}