@charset "UTF-8";

/* ===============================
	サイト内共通 style
=============================== */
main {
	font-family: 'Noto Sans Japanese', sans-serif;
	background: #fff;
}
sup {
	color: #00a0e9;
}

em {
	font-style: normal;
	font-weight: bold;
}

.arrow {
	position: relative;
	display: inline-block;
	padding-left: 1.5em;
	vertical-align: middle;
	text-decoration: none;
}

.arrow::before, .arrow::after {
	position: absolute;
	top: 0.4em;
	left: 0;
	margin: auto;
	content: '';
	vertical-align: middle;
}

.arrow::before {
	left: 0;
	width: 0.6em;
	height: 0.6em;
	border-top: 1px solid #434343;
	border-right: 1px solid #434343;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

a.blockLink:HOVER .arrow,
.arrow:HOVER {
	color: #197c77;
}

a.blockLink:HOVER .arrow::before,
.arrow:HOVER::before {
	border-top: 1px solid #197c77;
	border-right: 1px solid #197c77;
}

article {
	padding-bottom: 2%;
}

/* Youtube 動画 */
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

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

/* ===============================
	common utility
=============================== */
ul.horizon {
	display: flex;
	flex-wrap: wrap;
}

ul.star { /* リスト（青字・※n） */
	padding-left: 2em;
}

ul.star li {
	text-indent: -2em;
}

ul.star li span {
	color: #00a0e9;
	margin-right: 0.5em;
}

ul.kome { /* リスト（黒字・※） */
	padding-left: 1.5em;
}

ul.kome li {
	text-indent: -1.5em;
}

ul.kome li:BEFORE {
	content: "\203b";
	margin-right: 0.5em;
}

ul.disc { /* リスト（●） */
	padding-left: 1.5em;
}

ul.disc li {
	text-indent: -1.5em;
}

ul.disc li:BEFORE {
	content: "\25cf";
	margin-right: 0.5em;
}

ul.single { /* リスト（黒字・1文字） */
	padding-left: 1.5em;
}

ul.single li {
	text-indent: -1.5em;
}

ul.single li span {
	margin-right: 0.5em;
}

.caption {
	font-size: 0.77em;
	line-height: 1.4em;
}

.tc {
	text-align: center !important;
}

.tl {
	text-align: left !important;
}

.tr {
	text-align: right !important;
}

.red {
	color: red !important;
}

.blue {
	color: #00a0e9 !important;
}

.fs {
	font-size: 0.82em;
	line-height: 1.2;
}

.fxs {
	font-size: 0.77em;
	line-height: 1.2;
}

.fitImg img {
	width: 100%;
	height: auto;
}

.mt0 {
	margin-top: 0 !important;
}

.mt05em {
	margin-top: 0.5em;
}

.mt1em {
	margin-top: 1em;
}

.mt15em {
	margin-top: 1.5em;
}

.mt2em {
	margin-top: 2em;
}

.mt25em {
	margin-top: 2.5em;
}

.mt3em {
	margin-top: 3em;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 481px) {
	article {
		padding-top: 52px;
		position: relative;
	}
	.flexBox {
		display: flex;
		flex-wrap: wrap;
	}
	.mainImg {
		overflow: hidden;
		position: relative;
	}
	.mainImg img {
		position: relative;
		left: 50%;
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	/* ナビゲーションメニュー */
	#naviMenu {
		width: 100%;
		height: 52px;
		background: #eee;
		position: absolute;
		top: 0;
		z-index: 10;
	}
	#naviMenu .baseWidth, #naviMenu ul, #naviMenu li, #naviMenu ul li a {
		display: flex;
		justify-content: center;
	}
	#naviMenu a {
		display: inline-block;
		padding: 1.8rem 1.8rem;
		font-size: 1.4rem;
		line-height: 1;
		text-decoration: none;
	}
	#naviMenu a:HOVER,
	#naviMenu a.active {
		color: #197c77;
	}
	#drawerBtn {
		display: none !important;
	}
}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {
	/* ナビゲーションメニュー */
	#naviMenu {
		display: none;
	}
	#drawerBtn {
		display: none;
		padding: 1em;
		position: fixed;
		top: 0;
		right: 0;
		background: #000;
		color: #ccc;
		text-align: center;
		cursor: pointer;
	}
	#drawerCloseBtn {
		padding: 0.2em 1em;
		margin: 1em;
		background: #ccc;
		color: #333;
		font-weight: bold;
		text-align: center;
		position: relative;
		cursor: pointer;
	}
	#drawerCloseBtn .times {
		line-height: 1;
		position: absolute;
		top: 50%;
		right: 0.5em;
		margin-top: -0.5em;
	}
/* 	#naviMenu {
		width: 100%;
		background: #eee;
		position: absolute;
		top: 0;
		-moz-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35);
		-webkit-box-shadow: 0 8px -5px 8px rgba(0, 0, 0, 0.35);
		-o-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35);
		-ms-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35);
		box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35);
		z-index: 100;
	}
	#naviMenu .baseWidth, #naviMenu .pciMark, #naviMenu ul li a {
		display: flex;
		justify-content: space-around;
	}
	#naviMenu .baseWidth {
		flex-wrap: nowrap;
		padding-left: 0;
		padding-right: 0;
	}
	#naviMenu .pciMark {
		flex-basis: 16%;
		align-items: center;
		padding: 0.2em 0;
	}
	#naviMenu ul {
		display: flex;
		flex-wrap: wrap;
	}
	#naviMenu li {
		display: flex;
		flex-basis: calc(100%/ 2);
		padding: 0.2em 0;
		border-bottom: solid 1px #ddd;
	}
	#naviMenu a {
		width: 100%;
		flex-wrap: wrap;
		align-items: center;
		padding: 0.4em;
		font-size: 1rem;
		line-height: 1.4;
		border-right: solid 1px #ddd;
		text-align: center;
		text-decoration: none;
		position: relative;
	}
	#naviMenu .pciMark a {
		border-right: none;
	}
	#naviMenu a:HOVER,
	#naviMenu a.active {
		color: #197c77;
	}
	#naviMenu em {
		width: 100%;
		font-size: 1.2em;
	} */
}

/* ===============================
	screen setting
=============================== */
@media screen {
	/* Loading */
	#pageLoad {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		z-index: 999;
	}
	#pageLoad.loading {
		background-image: url(../images/pageloading.gif);
		background-position: center center;
		background-repeat: no-repeat;
	}
	/* pageTop */
	a#pageTop {
		width: 50px;
		height: 50px;
		background-image: url(../images/pagetop.png);
		background-repeat: no-repeat;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		text-decoration: none;
		position: fixed;
		bottom: 20px;
		right: 0;
		display: none;
	}
	a#pageTop:hover {
		background-position: 0 bottom;
	}
	.fix {
		position: fixed !important;
	}
}

/* ===============================
	print setting
=============================== */
@media print {
	a#pageTop {
		display: none !important;
	}
	.printNewPage {
		page-break-before: always;
	}
}