@charset "UTF-8";

@font-face {
	font-family: 'Ryumin';
	src: local("Ryumin Regular KL"), local("リュウミン R-KL");
	font-weight: normal;
}

@font-face {
	font-family: 'Ryumin';
	src: local("Ryumin Medium KL"), local("リュウミン M-KL");
	font-weight: 500;
}

@font-face {
	font-family: 'Ryumin';
	src: local("Ryumin Bold KL"), local("リュウミン B-KL");
	font-weight: bold;
}

/* 文字装飾
	最初に赤い四角をつける
*/
/* ボックス
	タイトルをベタ塗り白文字、内容を同色の線で囲う
*/
/*-----------------------------------------------------------------------
	layout
-----------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.pcOnly {
		display: none;
	}
}

@media print, screen and (min-width: 769px) {
	.spOnly {
		display: none;
	}
}

.clearfix::after {
	content: '';
	display: block;
	clear: both;
}

.clear {
	clear: both;
}

/*-----------------------------------------------------------------------
	title
-----------------------------------------------------------------------*/
/* ページタイトル
	中央寄せ、大文字
*/
.ttlStyle01 {
	text-align: center;
	font-size: 25px;
	font-weight: 500;
	letter-spacing: 0.17em;
}

@media screen and (max-width: 768px) {
	.ttlStyle01 {
		font-size: 23px;
	}
}

/* セクションタイトル
	やや大文字、最初に赤い四角、指定色の下線
*/
.ttlStyle02 {
	/* 下線：紺(デフォルト) */
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	border-bottom: 4px solid #2d2869;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
	/* 下線：オレンジ */
	/* 下線：緑 */
	/* 下線：茶色 */
	/* 下線：明るい青 */
}

.ttlStyle02::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #ca151a;
}

@media screen and (max-width: 768px) {
	.ttlStyle02 {
		margin-bottom: 20px;
		border-bottom-width: 3px;
		font-size: 17px;
	}
}

.ttlStyle02org {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	border-bottom: 4px solid #f29600;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle02org::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #ca151a;
}

@media screen and (max-width: 768px) {
	.ttlStyle02org {
		margin-bottom: 20px;
		border-bottom-width: 3px;
		font-size: 17px;
	}
}

.ttlStyle02grn {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	border-bottom: 4px solid #1eaa39;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle02grn::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #ca151a;
}

@media screen and (max-width: 768px) {
	.ttlStyle02grn {
		margin-bottom: 20px;
		border-bottom-width: 3px;
		font-size: 17px;
	}
}

.ttlStyle02brn {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	border-bottom: 4px solid #946134;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle02brn::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #ca151a;
}

@media screen and (max-width: 768px) {
	.ttlStyle02brn {
		margin-bottom: 20px;
		border-bottom-width: 3px;
		font-size: 17px;
	}
}

.ttlStyle02blu {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	border-bottom: 4px solid #008cd6;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle02blu::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #ca151a;
}

@media screen and (max-width: 768px) {
	.ttlStyle02blu {
		margin-bottom: 20px;
		border-bottom-width: 3px;
		font-size: 17px;
	}
}

/* サブセクション(下層セクション)タイトル
	やや大文字、最初に四角
*/
.ttlStyle03 {
	/* 四角：オレンジ(デフォルト) */
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
	/* 四角：緑 */
	/* 四角：茶色 */
	/* 四角：明るい青 */
}

.ttlStyle03::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #f29600;
}

@media screen and (max-width: 768px) {
	.ttlStyle03 {
		margin-bottom: 20px;
		font-size: 17px;
	}
}

.ttlStyle03grn {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle03grn::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #1eaa39;
}

@media screen and (max-width: 768px) {
	.ttlStyle03grn {
		margin-bottom: 20px;
		font-size: 17px;
	}
}

.ttlStyle03brn {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle03brn::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #946134;
}

@media screen and (max-width: 768px) {
	.ttlStyle03brn {
		margin-bottom: 20px;
		font-size: 17px;
	}
}

.ttlStyle03blu {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.ttlStyle03blu::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.85em;
	background: #008cd6;
}

@media screen and (max-width: 768px) {
	.ttlStyle03blu {
		margin-bottom: 20px;
		font-size: 17px;
	}
}

/*-----------------------------------------------------------------------
	table
-----------------------------------------------------------------------*/
.tblStyle01 {
	text-transform: uppercase;
}

.tblStyle01 th {
	white-space: nowrap;
}

.tblStyle01 td {
	padding-left: 1.5em;
}

@media screen and (max-width: 768px) {
	.tblStyle01 td {
		padding-left: 1.2em;
	}
}

.tblStyle01 tr + tr > * {
	padding-top: 1.5em;
}

/*-----------------------------------------------------------------------
	box
-----------------------------------------------------------------------*/
/* boxStyle01 -> mixin
	タイトルをベタ塗り白文字、内容を同色の線で囲う
*/
/*
	赤枠、赤文字、中央寄せ
*/
.boxStyle02 {
	padding: 20px 10px;
	border: 3px solid #e50012;
	border-radius: 5px;
	color: #e50012;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.boxStyle02 {
		padding: 10px;
		font-size: 18px;
	}
}

/*-----------------------------------------------------------------------
	flow
-----------------------------------------------------------------------*/
/*
	タイトルと詳細横並び、タイトルから矢印
	タイトルベタ塗りで白文字、詳細に枠
*/
.flwStyle01 {
	/* メインカラー：緑(デフォルト) */
	/* メインカラー：明るい青 */
}

.flwStyle01 > .item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

@media screen and (max-width: 768px) {
	.flwStyle01 > .item {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}

.flwStyle01 > .item + .item {
	margin-top: 25px;
}

.flwStyle01 > .item:last-of-type .ttl::after,
.flwStyle01 > .item:last-of-type .detail::after {
	content: none;
}

.flwStyle01 > .item > * {
	border: 2px solid #1eaa39;
}

.flwStyle01 .ttl {
	position: relative;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 282px;
	        flex: 0 0 282px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background: #1eaa39;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
}

.flwStyle01 .ttl::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: calc(100% + 2px);
	width: 0;
	height: 0;
	margin-left: -36px;
	border-style: solid solid none solid;
	border-color: #1eaa39 transparent transparent transparent;
	border-width: 20px 36px 0 36px;
}

@media screen and (max-width: 768px) {
	.flwStyle01 .ttl {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
		padding: 5px;
		border-bottom: none;
		font-size: 16px;
	}
	.flwStyle01 .ttl::after {
		content: none;
	}
}

.flwStyle01 .detail {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 13px 12px 13px 25px;
	background: rgba(30, 170, 57, 0.1);
}

@media screen and (max-width: 768px) {
	.flwStyle01 .detail {
		position: relative;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding: 15px 10px;
	}
	.flwStyle01 .detail::after {
		content: "";
		display: block;
		position: absolute;
		left: 50%;
		top: calc(100% + 2px);
		width: 0;
		height: 0;
		margin-left: -36px;
		border-style: solid solid none solid;
		border-color: #1eaa39 transparent transparent transparent;
		border-width: 20px 36px 0 36px;
	}
}

.flwStyle01 .detail .text {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	padding-top: 0.5em;
}

@media screen and (max-width: 768px) {
	.flwStyle01 .detail .text {
		padding-top: 0;
	}
}

.flwStyle01 .detail .attention {
	font-size: 12px;
}

.flwStyle01 .detail .image {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-left: 0.6em;
}

@media screen and (max-width: 768px) {
	.flwStyle01 .detail .image {
		-webkit-box-flex: 1;
		    -ms-flex: 1 1 auto;
		        flex: 1 1 auto;
		margin-left: 0;
		margin-top: 10px;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
}

.flwStyle01 .detail .image > .item {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}

@media screen and (max-width: 768px) {
	.flwStyle01 .detail .image > .item {
		-webkit-box-flex: 0;
		    -ms-flex: 0 1 auto;
		        flex: 0 1 auto;
	}
}

.flwStyle01 .detail .image > .item + .item {
	margin-left: 10px;
}

.flwStyle01blu > .item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

@media screen and (max-width: 768px) {
	.flwStyle01blu > .item {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}

.flwStyle01blu > .item + .item {
	margin-top: 25px;
}

.flwStyle01blu > .item:last-of-type .ttl::after,
.flwStyle01blu > .item:last-of-type .detail::after {
	content: none;
}

.flwStyle01blu > .item > * {
	border: 2px solid #008cd6;
}

.flwStyle01blu .ttl {
	position: relative;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 282px;
	        flex: 0 0 282px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background: #008cd6;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
}

.flwStyle01blu .ttl::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: calc(100% + 2px);
	width: 0;
	height: 0;
	margin-left: -36px;
	border-style: solid solid none solid;
	border-color: #008cd6 transparent transparent transparent;
	border-width: 20px 36px 0 36px;
}

@media screen and (max-width: 768px) {
	.flwStyle01blu .ttl {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
		padding: 5px;
		border-bottom: none;
		font-size: 16px;
	}
	.flwStyle01blu .ttl::after {
		content: none;
	}
}

.flwStyle01blu .detail {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 13px 12px 13px 25px;
	background: rgba(0, 140, 214, 0.1);
}

@media screen and (max-width: 768px) {
	.flwStyle01blu .detail {
		position: relative;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding: 15px 10px;
	}
	.flwStyle01blu .detail::after {
		content: "";
		display: block;
		position: absolute;
		left: 50%;
		top: calc(100% + 2px);
		width: 0;
		height: 0;
		margin-left: -36px;
		border-style: solid solid none solid;
		border-color: #008cd6 transparent transparent transparent;
		border-width: 20px 36px 0 36px;
	}
}

.flwStyle01blu .detail .text {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	padding-top: 0.5em;
}

@media screen and (max-width: 768px) {
	.flwStyle01blu .detail .text {
		padding-top: 0;
	}
}

.flwStyle01blu .detail .attention {
	font-size: 12px;
}

.flwStyle01blu .detail .image {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-left: 0.6em;
}

@media screen and (max-width: 768px) {
	.flwStyle01blu .detail .image {
		-webkit-box-flex: 1;
		    -ms-flex: 1 1 auto;
		        flex: 1 1 auto;
		margin-left: 0;
		margin-top: 10px;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
}

.flwStyle01blu .detail .image > .item {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}

@media screen and (max-width: 768px) {
	.flwStyle01blu .detail .image > .item {
		-webkit-box-flex: 0;
		    -ms-flex: 0 1 auto;
		        flex: 0 1 auto;
	}
}

.flwStyle01blu .detail .image > .item + .item {
	margin-left: 10px;
}
