@charset "utf-8";
/* ------------------------------------------------------------------------ */

/*  Parts

/* ------------------------------------------------------------------------ */

/* Layout
--------------------------------------------------------------------------- */

/* --- margin --- */

.auto  { margin-right : auto; margin-left : auto;}

.mt0   { margin-top	: 0 !important;}
.mt5   { margin-top	: 5px !important;}
.mt10  { margin-top	: 10px !important;}
.mt15  { margin-top	: 15px !important;}
.mt20  { margin-top	: 20px !important;}
.mt25  { margin-top	: 25px !important;}
.mt30  { margin-top	: 30px !important;}
.mt35  { margin-top	: 35px !important;}
.mt40  { margin-top	: 40px !important;}
.mt45  { margin-top	: 45px !important;}
.mt50  { margin-top	: 50px !important;}

.mr0   { margin-right : 0 !important;}
.mr5   { margin-right : 5px !important;}
.mr10  { margin-right : 10px !important;}
.mr15  { margin-right : 15px !important;}
.mr20  { margin-right : 20px !important;}
.mr25  { margin-right : 25px !important;}
.mr30  { margin-right : 30px !important;}
.mr35  { margin-right : 35px !important;}
.mr40  { margin-right : 40px !important;}
.mr45  { margin-right : 45px !important;}
.mr50  { margin-right : 50px !important;}

.mb0   { margin-bottom : 0 !important;}
.mb5   { margin-bottom : 5px !important;}
.mb10  { margin-bottom : 10px !important;}
.mb15  { margin-bottom : 15px !important;}
.mb20  { margin-bottom : 20px !important;}
.mb25  { margin-bottom : 25px !important;}
.mb30  { margin-bottom : 30px !important;}
.mb35  { margin-bottom : 35px !important;}
.mb40  { margin-bottom : 40px !important;}
.mb45  { margin-bottom : 45px !important;}
.mb50  { margin-bottom : 50px !important;}

.ml0   { margin-left : 0 !important;}
.ml5   { margin-left : 5px !important;}
.ml10  { margin-left : 10px !important;}
.ml15  { margin-left : 15px !important;}
.ml20  { margin-left : 20px !important;}
.ml25  { margin-left : 25px !important;}
.ml30  { margin-left : 30px !important;}
.ml35  { margin-left : 35px !important;}
.ml40  { margin-left : 40px !important;}
.ml45  { margin-left : 45px !important;}
.ml50  { margin-left : 50px !important;}

.m0   { margin : 0 !important;}
.m10  { margin : 10px !important;}
.m15  { margin : 15px !important;}
.m20  { margin : 20px !important;}
.m25  { margin : 25px !important;}
.m30  { margin : 30px !important;}
.m35  { margin : 35px !important;}
.m40  { margin : 40px !important;}
.m45  { margin : 45px !important;}
.m50  { margin : 50px !important;}


/* --- padding --- */

.pt0  { padding-top : 0 !important;}
.pt5  { padding-top : 5px !important;}
.pt10 { padding-top : 10px !important;}
.pt15 { padding-top : 15px !important;}
.pt20 { padding-top : 20px !important;}

.pr0  { padding-right : 0 !important;}
.pr5  { padding-right : 5px !important;}
.pr10 { padding-right : 10px !important;}
.pr15 { padding-right : 15px !important;}
.pr20 { padding-right : 20px !important;}

.pl0  { padding-left : 0 !important;}
.pl5  { padding-left : 5px !important;}
.pl10 { padding-left : 10px !important;}
.pl15 { padding-left : 15px !important;}
.pl20 { padding-left : 20px !important;}

.pb0  { padding-bottom : 0 !important;}
.pb5  { padding-bottom : 5px !important;}
.pb10 { padding-bottom : 10px !important;}
.pb15 { padding-bottom : 15px !important;}
.pb20 { padding-bottom : 20px !important;}

.pb0   { padding : 0  !important;}
.pb5   { padding : 5px !important;}
.pb10  { padding : 10px !important;}
.pb15  { padding : 15px !important;}
.pb20  { padding : 20px !important;}

.nowrap { white-space : nowrap;}

#crumb {
	margin		: 4px 0 8px;
	text-align	: left;
}

	#crumb li {
		display			: inline;
		line-height		: 110%;
		list-style-type	: none;
		font-size		: 85%;
	}


/* --- display --- */

.block	{ display : block;}
.inline { display : inline;}

.fltbox { margin : 0 auto;}
.flt_r  { float : right !important;}
.flt_l  { float : left !important;}

.txt_r { text-align : right !important;}
.txt_c { text-align : center !important;}
.txt_l { text-align : left !important;}

.psn { position : relative;}

.none {
	background	: none !important;
	border		: none !important;
}


/* Heading
--------------------------------------------------------------------------- */

.h01 {
	font-size: 38px;
	font-size: 3.8rem;
	font-weight: 500;
	margin: 0 0 20px;
}

.h01_1 {
	font-size: 38px;
	font-size: 3.8rem;
	font-weight: 500;
}

.h02 {
	margin: 70px 0 20px;
	font-size: 26px;
	font-size: 2.6rem;
	border-bottom: 2px solid #004994;
	text-align: left;
	font-weight: bold;
}

	section .container:first-of-type .h02 {
		margin-top: 0;
	}

.h03 {
	font-size: 30px;
	font-size: 3.0rem;
	color: #004994;
}

.h04 {
	font-size: 32px;
	font-size: 3.2rem;
	text-align: left;
	line-height: 1.4;
	margin: 0 0 20px;
	padding: 0 10px 10px;
	border-bottom: 1px solid #999;
}

.h05 {
	font-size: 22px;
	font-size: 2.2rem;
	text-align: left;
	line-height: 1.4;
	margin: 0 0 10px;
	padding: 7px 12px 5px;
	border-left: 8px solid #004994;
}

.h06 {
	font-size: 68px;
	font-size: 6.8rem;
	font-weight: 500;
}

.h07 {
	margin: 50px 0 0;
	font-size: 36px;
	font-size: 3.6rem;
	font-weight: 500;
}

.h08 {
	margin: 50px 0 20px;
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: normal;
}

.h09 {
	font-size: 22px;
	font-size: 2.2rem;
	text-align: left;
	line-height: 1.4;
	margin: 0 0 10px;
	padding: 7px 12px 5px;
	color:white;
	background:#2874cacc;
	text-align:center;
}

/*---------------------- responsive styles -----------------------*/
@media screen and (max-width:480px) {
	.h02 {
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 1.4;
	}

	.h03 {
		font-size: 26px;
		font-size: 2.6rem;
	}

	.h04 {
		font-size: 20px;
		font-size: 2.0rem;
	}

	.h06 {
		font-size: 42px;
		font-size: 4.2rem;
	}
		.h09 {
		font-size: 26px;
		font-size: 2.6rem;
	}
}


/* image
--------------------------------------------------------------------------- */

img.image	{ border: solid 1px #d9d9d9; padding : 1px; background : #FFF;}

.imgbox	{
	margin		: 0 0 30px;
	_zoom		: 1;
	overflow	: hidden;
}

.imgL { float : left;  margin : 0 10px 5px 0; }
.imgR { float : right; margin : 0 0 5px 10px; }

.imgbox p {
	overflow	: hidden;
	_zoom		: 1;
}

.object_fit_img {
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

img {
	backface-visibility: hidden;
}

/* table
--------------------------------------------------------------------------- */

.tblStyle01 {
	border-collapse		: separate;
	*border-collapse	: collapse;
	border-spacing		: 0;
	empty-cells			: show;
	border-top			: 1px solid #D5D5D5;
	border-right		: none;
	border-bottom		: none;
	border-left			: 1px solid #D5D5D5;
	margin				: 0 auto;
	width				: 100%;
}

	.tblStyle01 th,
	.tblStyle01 td {
		border-top		: none;
		border-right	: 1px solid #D5D5D5;
		border-bottom	: 1px solid #D5D5D5;
		border-left		: none;
		font-weight		: normal;
	}

	.tblStyle01 th{
		margin			: 0;
		padding			: 10px;
		background		: #f7f7f7;
		text-align		: left;
		background		: -webkit-gradient(linear, left top, right bottom, from(#eaeaea), color-stop(0.25, #eaeaea), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, #eaeaea), color-stop(0.75, #eaeaea), color-stop(0.75, white), to(white));
		background		: -moz-linear-gradient(-45deg, #eaeaea 25%, white 25%, white 50%, #eaeaea 50%, #eaeaea 75%, white 75%, white);
		background		: linear-gradient(-45deg, #eaeaea 25%, white 25%, white 50%, #eaeaea 50%, #eaeaea 75%, white 75%, white);
		background-size	: 4px 4px;
	}

	.tblStyle01 td{
		padding		: 10px;
		text-align	: left;
	}

/*---------------------- responsive styles -----------------------*/
@media screen and (max-width:480px) {
	table.sp_layout {
		border: none;
	}

		table.sp_layout th,
		table.sp_layout td {
			display: block;
			width: 100%;
			border: none;
		}

		table.sp_layout th {
			font-weight: bold;
		}

		table.sp_layout td {
			margin: 0 0 10px;
		}
}


/* list
--------------------------------------------------------------------------- */

.olStyle01 {
	margin	: 0 0 10px 35px;
}

	.olStyle01 li {
		list-style		: decimal;
		margin-bottom	: 3px;
		padding			: 0;
		text-align		: left;
	}


.ulStyle01 {
	margin	: 0 15px 10px;
}

	.ulStyle01 li {
		list-style	: disc;
		margin		: 0 0 3px 15px;
		padding		: 0;
		text-align	: left;
	}

ul.check_list01 {
	text-align: left;
}

	ul.check_list01 li {
		text-indent: -0.67em;
		padding-left: 1.4em;
		line-height: 1.4;
		margin: 0 0 5px;
	}

		ul.check_list01 li:before {
			content: url('/common/img/icon/icon_check_001.png');
			display: inline-block;
			margin: 0 5px 0 0;
			/*text-indent: -1em;*/
		}

.asterisk {
	margin: 10px 0;
	font-size: 0.8em;
}

	.asterisk li {
		list-style: none;
		margin: 0 0 3px;
		text-indent: -1.00em;
		padding-left: 1.00em;
	}

	.asterisk li:before {
		content: '※';
	}

.gray_box {
	background: #e6edf5;
	margin: 20px 0 0;
	padding: 20px;
}



/* text
--------------------------------------------------------------------------- */

/* --- size --- */

.txt08 { font-size : 0.8rem !important;   font-size:8px !important;}
.txt10 { font-size : 1rem !important;   font-size:10px !important;}
.txt12 { font-size : 1.2rem !important; font-size:12px !important;}
.txt14 { font-size : 1.4rem !important; font-size:14px !important;}
.txt18 { font-size : 1.8rem !important; font-size:18px !important;}
.txt20 { font-size : 2.0rem !important; font-size:20px !important;}

.txt_small { font-size : 0.8em !important;}


/* --- color --- */

.blue	{ color : #004994;}
.l_blue	{ color : #369bd6;}


/* --- lineheight --- */

.height18 { line-height : 1.8;}
.height19 { line-height : 1.9;}
.height20 { line-height : 2;}


/* ------------------------------------------------------------------------ */

/*  Form

/* ------------------------------------------------------------------------ */

.formStyle01 {
	margin			: 0 auto;
	border			: 1px solid #D1D1D1;
	border-collapse	: collapse;
	border-spacing	: 0;
	empty-cells		: show;
}

	.formStyle01 th{
		border		: 1px solid #D1D1D1;
		padding		: 6px 8px;
		background	: #EDEDED;
		font-size	: 75%;
		font-weight	: normal;
	}

	.formStyle01 td{
		border		: 1px solid #D1D1D1;
		padding		: 6px 8px;
		font-size	: 75%;
	}

	.formStyle01 .txt10 { color:#444;}

	.wid5p		{ width : 5% !important; margin-bottom : 2px !important;}
	.wid10p		{ width : 10% !important; margin-bottom : 2px !important;}
	.wid15p		{ width : 15% !important; margin-bottom : 2px !important;}
	.wid20p		{ width : 20% !important; margin-bottom : 2px !important;}
	.wid25p		{ width : 25% !important; margin-bottom : 2px !important;}
	.wid30p		{ width : 30% !important; margin-bottom : 2px !important;}
	.wid35p		{ width : 35% !important; margin-bottom : 2px !important;}
	.wid40p		{ width : 40% !important; margin-bottom : 2px !important;}
	.wid45p		{ width : 45% !important; margin-bottom : 2px !important;}
	.wid50p		{ width : 50% !important; margin-bottom : 2px !important;}
	.wid55p		{ width : 55% !important; margin-bottom : 2px !important;}
	.wid60p		{ width : 60% !important; margin-bottom : 2px !important;}
	.wid65p		{ width : 65% !important; margin-bottom : 2px !important;}
	.wid70p		{ width : 70% !important; margin-bottom : 2px !important;}
	.wid75p		{ width : 75% !important; margin-bottom : 2px !important;}
	.wid80p		{ width : 80% !important; margin-bottom : 2px !important;}
	.wid85p		{ width : 85% !important; margin-bottom : 2px !important;}
	.wid90p		{ width : 90% !important; margin-bottom : 2px !important;}
	.wid95p		{ width : 95% !important; margin-bottom : 2px !important;}
	.wid100p	{ width : 100% !important; margin-bottom : 2px !important;}

	.wid20  { width : 20px; margin-bottom : 2px !important;}
	.wid40  { width : 40px; margin-bottom : 2px !important;}
	.wid60  { width : 60px; margin-bottom : 2px !important;}
	.wid80  { width : 80px; margin-bottom : 2px !important;}
	.wid100 { width : 100px; margin-bottom : 2px !important;}
	.wid120 { width : 120px; margin-bottom : 2px !important;}
	.wid140 { width : 140px; margin-bottom : 2px !important;}
	.wid160 { width : 160px; margin-bottom : 2px !important;}
	.wid180 { width : 180px; margin-bottom : 2px !important;}
	.wid200 { width : 200px; margin-bottom : 2px !important;}
	.wid220 { width : 220px; margin-bottom : 2px !important;}
	.wid240 { width : 240px; margin-bottom : 2px !important;}
	.wid260 { width : 260px; margin-bottom : 2px !important;}
	.wid280 { width : 280px; margin-bottom : 2px !important;}
	.wid300 { width : 300px; margin-bottom : 2px !important;}
	.wid400 { width : 400px; margin-bottom : 2px !important;}

	label { margin : 0 0 0 -2px; padding:1px 0 0; cursor : pointer; vertical-align:middle;}
	label:hover { text-decoration:underline;}

	.required {
		display: inline-block;
		background: #f13333;
		color: #fff;
		font-weight: normal;
		margin: 0 10px 0 0;
		padding: 0 10px;
	}

	dl.dl_form {
		margin: 0 0 30px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		text-align: left;
	}

		dl.dl_form dt {
			width: 320px;
			padding: 30px 20px;
			background: #cbe5fe;
			font-weight: bold;
			border: 1px solid #fff;
			border-width: 0 1px 1px 0;
		}

		dl.dl_form dd {
			width: calc(100% - 320px);
			width: -webkit-calc(100% - 320px);
			padding: 20px;
			background: #cbcbcb;
			border-bottom: 1px solid #fff;
		}

		.confirm dl.dl_form dd {
			background: #fff;
		}

	input:focus,
	textarea:focus {
		background-color : #f7fdeb;
	}

	input.txt {
		border-bottom	: 1px solid #CCC;
		border-left		: 1px solid #999;
		border-right	: 1px solid #CCC;
		border-top		: 1px solid #999;
		padding			: 4px;
	}

	textarea.txtarea {
		border-bottom	: 1px solid #CCC;
		border-left		: 1px solid #999;
		border-right	: 1px solid #CCC;
		border-top		: 1px solid #999;
		padding			: 4px;
	}

	input[type="radio"]{
		margin-top: -3px;
	}

	input[type="checkbox"]{
		margin-top: -3px;
	}

	input:not([type="checkbox"]):not([type="radio"]), textarea {
		font-size: 16px;
		font-size: 1.6rem;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 10px;
		border: 1px solid #999;
		border-radius: 5px;
		-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
		-moz-box-shadow:    inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
		box-shadow:         inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	}

	input,
	select,
	textarea {
		border				: 1px solid #999;
		padding				: 5px 5px 4px;
		font-family			: "メイリオ", Meiryo, MS PGothic,"Hiragino Kaku Gothic Pro", arial, sans-serif;
		display: inline;
	}

	dl.dl_form dd input.zip3,
	dl.dl_form dd input.zip4 {
		width: 80px;
	}

	.form_err {
		border: 2px solid #f13333 !important;
		background: #fff5f5;
	}

	.err_msg {
		display: none;
		margin: 20px 0 !important;
		text-align: center !important;
		background: #fff;
		color: #f13333;
		border: 1px solid #f13333;
		padding: 10px;
	}

	.privacy_err {
		display: none;
		margin: 20px 0 !important;
		text-align: center !important;
		background: #fff;
		color: #f13333;
		border: 1px solid #f13333;
		padding: 10px;
	}

	.mail_err {
		display: none;
		margin: 0 0 5px !important;
		color: #f13333;
		background: #fff;
		padding: 5px;
	}

	button {
		background: none;
		border: none;
		display: inline;
		cursor: pointer;
	}

	.disnon {
		display: none;
	}

.btn_row {

}

	.btn_row .btn {
		margin: 0 10px;
	}

.btn {
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
	min-width: 320px;
	display: inline-block;
	padding: 15px 25px 12px;
	text-decoration: none !important;
	-webkit-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	transition: 0.3s all ease;
	border-radius: 8px;
}

.btn.btn_blue {
	background: #004898;
	color: #fff;
	border: 1px solid #004898;
}

.btn.btn_blue:hover {
	background: #fff;
	color: #004898;
}

.btn.btn_white {
	background: #fff;
	color: #004898;
	border: 1px solid #004898;
}

.btn.btn_white:hover {
	background: #004898;
	color: #fff;
	border: 1px solid #fff;
}

.btn.btn_l_blue {
	background: #369bd6;
	color: #fff;
	border: 1px solid #369bd6;
}

.btn.btn_l_blue:hover {
	background: #fff;
	color: #369bd6;
	border: 1px solid #369bd6;
}

.btn.disabled {
	opacity: 0.3;
	pointer-events: none;
}

span.genre_tip.media {
	background: #004994;
}

span.genre_tip.exhibit {
	background: #940031;
}

span.genre_tip.developer {
	background: #d944aa;
}

span.genre_tip.pr {
	background: #ef742b;
}

span.genre_tip.notice {
	background: #0c9400;
}

span.genre_tip.handson {
	background: #f13333;
}

/*---------------------- responsive styles -----------------------*/
@media screen and (max-width:640px) {
	dl.dl_form {
		display: block;
	}

		dl.dl_form dt,
		dl.dl_form dd {
			width: 100%;
			padding: 10px;
			border: none;
		}

		dl.dl_form dt {

		}

		dl.dl_form dd {
			margin: 0 0 5px;
			padding: 15px 10px;
		}
}

/*---------------------- responsive styles -----------------------*/
@media screen and (max-width:480px) {
	.btn_row {

	}

		.btn_row .btn {
			margin: 0 0 10px;
		}

	.btn {
		width: 100% !important;
		min-width: inherit;
	}
}
