@charset "utf-8";

/*-------------------------------------------------------------------
  ドキュメント
-------------------------------------------------------------------*/

div.doc {
	margin-top:		0.5em;
	min-height:		40em;
}

div.doc h1:first-child,
div.doc h2:first-child {
	margin-top:		1em;
}

div.doc h1 {
	font-size:		1.75rem;
	font-weight:		bold;
	line-height:		1.25em;
	margin:			1em 0;
	color:			#33667D;
}

div.doc h2 {
	font-size:		1.5rem;
	font-weight:		bold;
	line-height:		1.25em;
	margin:			2em 0 1em 0;
	padding:		0.2em 0 0.2em 0;
	border-bottom:		3px solid #BDCCD3;
	color:			#33667D;
}

div.doc h3 {
	font-size:		1.25rem;
	font-weight:		bold;
	line-height:		1.25em;
	margin:			2em 0 1em 0;
	padding:		0.2em 0 0.2em 0;
	border-bottom:		1px solid #BDCCD3;
	color:			#33667D;
}

div.doc h4 {
	font-size:		1.2rem;
	font-weight:		bold;
	line-height:		1.25em;
	margin:			2em 0 1em 0;
	padding:		0;
	color:			#33667D;
}

div.doc h5 {
	font-size:		1.1rem;
	font-weight:		bold;
	line-height:		1.25em;
	margin:			2em 0 1em 0;
	color:			#33667D;
}

div.doc h6 {
	font-size:		1.1rem;
	margin:			2em 0 1em 0;
	line-height:		1.25em;
	text-decoration:	underline;
}

div.doc .quote {
	margin:			0;
	padding:		0.5em;
	border:			1px solid silver;
	border-radius:		4px;
	font-size:		90%;
	line-height:		1.5em;
}

div.doc div.eye_catch {
	text-align:		center;
/*	color:			#228AE6;	*/
/*	color:			#33667D;	*/
	color:			silver;
}
div.doc div.eye_catch i {
	font-size:		18rem;
	margin:			2rem 0;
}

div.doc figure,
div.doc div.fig {
	margin:			1em 0;
	text-align:		center;
	font-size:		80%;
}

div.doc figure img,
div.doc div.fig img {
	max-width:		100%;
	margin:			0.5em;
}

div.doc div.fig_right {
	float:			right;
	margin:			0.5em 0 0.5em 1em;
}

div.doc .label {
	font-weight:		bold;
}

div.doc .linkto {
	font-weight:		bold;
}

div.doc .youtube {
	margin:			0 auto;
	max-width:		900px;
}

div.doc .youtube .embed {
	position:		relative;
	width:			100%;
	padding-top:		56.25%;
}

div.doc .youtube iframe {
	position:		absolute;
	top:			0;
	right:			0;
	width:			100% !important;
	height:			100% !important;
}

div.doc .submenu {
	text-align:		center;
	margin:			0 0 3em 0;
}

div.social {
	margin:			1em 0 0 0;
	text-align:		left;
	height:			20px;
}

div.social:empty {
	display:		none;
}

/* ボタングループ */

div.action_group {
	margin:			1em 0;
	line-height:		4em;
}

/* リスト */

ul li {
	margin-top:		0.5em;
	margin-bottom:		0.5em;
}
ol li {
	margin-top:		0.5em;
	margin-bottom:		0.5em;
}
ul.download {
	list-style-image:	url(../image/ico_down.png);
}
dl dt {
	margin-top:		0.5em;
	font-weight:		bold;
}
dl dd {
	margin-bottom:		0.5em;
}


/* 吹き出し風 */

.balloon_t {
	position:		relative;
	display:		block;
	max-width:		32em;
	margin:			2em auto 2em 0.75em;
	padding:		1.5em;
	background-color:	#fff3ad;
	border-radius:		0.5em;
}

.balloon_t:before {
	content:		"";
	position:		absolute;
	top:			-1.5em;
	left:			50%;
	margin-left:		-0.75em;
	border:			0.75em solid transparent;
	border-bottom:		0.75em solid #fff3ad;
}

.balloon_b {
	position:		relative;
	display:		block;
	margin:			2em auto 2em 0.75em;
	padding:		1.5em;
	max-width:		32em;
	background:		#fff3ad;
	border-radius:		0.5em;
}

.balloon_b:before {
	content:		"";
	position:		absolute;
	top:			100%;
	left:			50%;
	margin-left:		-0.75em;
	border:			0.75em solid transparent;
	border-top:		0.75em solid #fff3ad;
}

.balloon_l {
	position:		relative;
	max-width:		32em;
	margin:			2em auto 2em 0.75em;
	padding:		1.5em;
	background-color:	#fff3ad;
	border-radius:		0.5em;
}
.balloon_l::before{
	content:		'';
	position:		absolute;
	display:		block;
	width:			0;
	height:			0;
	left:			-0.75em;
	top:			1.5em;
	border-right:		0.75em solid #fff3ad;
	border-top:		0.75em solid transparent;
	border-bottom:		0.75em solid transparent;
}

.balloon_r {
	position:		relative;
	max-width:		32em;
	margin:			2em 0.75em 2em auto;
	padding:		1.5em;
	background-color:	#fff3ad;
	border-radius:		0.5em;
}
.balloon_r::before {
	content:		'';
	position:		absolute;
	display:		block;
	width:			0;
	height:			0;
	right:			-0.75em;
	top:			1.5em;
	border-left:		0.75em solid #fff3ad;
	border-top:		0.75em solid transparent;
	border-bottom:		0.75em solid transparent;
}

/* ポップアップ */

.popup_wrap input {
	display:		none;
}

.popup_overlay {
	display:		flex;
	justify-content:	center;
	overflow:		auto;
	position:		fixed;
	top:			0;
	left:			0;
	z-index:		9999;
	width:			100%;
	height:			100%;
	background:		rgba(0, 0, 0, 0.7);
	opacity:		0;
	transition:		opacity 0.5s, transform 0s 0.5s;
	transform:		scale(0);
}

.popup_trigger {
	position:	absolute;
	width:		100%;
	height:		100%;
}

.popup_content {
	position:		relative;
	align-self:		center;
	width:			90%;
	max-width:		800px;
	padding:		30px 30px 15px;
	box-sizing:		border-box;
	background:		#fff;
	line-height:		1.4em;
	transition:		0.5s;
}

.popup_content .picture,
.popup_content .video {
	max-width:		720px;
	max-height:		720px;
}

.popup_content .close_btn {
	position:		absolute;
	top:			14px;
	right:			16px;
	font-size:		30px;
	cursor:			pointer;
}

.popup_wrap {
	display:		inline-block;
}

.popup_wrap input:checked ~ .popup_overlay {
	opacity:		1;
	transform:		scale(1);
	transition:		opacity 0.5s;
}

.popup_open_btn {
	text-decoration:	underline;
	color:			#4444BC;
	cursor:			pointer;
}
.popup_open_btn:hover{
	color:			red;
}


/*-------------------------------------------------------------------
  イメージグリッド
-------------------------------------------------------------------*/

ul.grid-ss {
	display:		flex;
	flex-wrap:		wrap;
	list-style:		none;
	margin:			0 0 40px 0;
	padding:		0;
/*	justify-content:	left;*/
}
ul.grid-ss li {
	display:		block;
	width:			256px;
	max-width:		256px;
	margin:			5px;
	text-align:		center;
	vertical-align:		middle;
	overflow:		hidden;
	white-space:		nowrap;
	text-overflow:		ellipsis;
	font-size:		80%;
}
ul.grid-ss li a {
	text-decoration:	none;
	font-size:		80%;
}
ul.grid-ss li img,
ul.grid-ss li i {
	width:			256px;
}
ul.grid-ss li i {
	display:		block;
	box-sizing:		border-box;
	padding-top:		20px;
	font-size:		60px;
	width:			100px;
	vertical-align:		middle;
	background-color:	#33667D;
	color:			white;
}

ul.grid-ss li img {
	display:		block;
	vertical-align:		bottom;
}


/* 参考イメージ */

ul.grid-fig {
	display:		flex;
	flex-wrap:		wrap;
	list-style:		none;
	margin:			0 0 40px 0;
	padding:		0;
/*	justify-content:	left;*/
}
ul.grid-fig li {
	display:		block;
	width:			320px;
	max-width:		320px;
	margin:			5px;
	text-align:		center;
	vertical-align:		middle;
	overflow:		hidden;
	white-space:		nowrap;
	text-overflow:		ellipsis;
	font-size:		80%;
}
ul.grid-fig li a {
	text-decoration:	none;
	font-size:		80%;
}
ul.grid-fig li img,
ul.grid-fig li i {
	width:			320px;
}
ul.grid-fig li i {
	display:		block;
	box-sizing:		border-box;
	padding-top:		20px;
	font-size:		60px;
	width:			100px;
	vertical-align:		middle;
	background-color:	#33667D;
	color:			white;
}

ul.grid-fig li img {
	display:		block;
	vertical-align:		bottom;
}

.grid-center {
	justify-content: center;
}