@charset "UTF-8";

/* ===============================
	PC/Tab/Mobile共通
=============================== */
/* カラー設定 */
article {
	color: #000;
}

.bg-gray {
	background: #f7f7f7;
}

.bg-pink {
	background: #f19298;
	color: #fff;
}

.bg-sky {
	background: #84c0e4;
	color: #fff;
}

.color-gray {
	color: #a0a0a0;
}

.color-red {
	color: #e3002c;
}

.color-blue {
	color: #00a0e9;
}

.sub-section .sub-ttl {
	background: #000;
	color: #fff;
}

/* ユーティリティクラス */
.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.font-s {
	font-size: 0.8em;
	line-height: 1.2;
}

.bold {
	font-weight: bold;
}

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

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

/* topページ共通設定 */
.link-detail, .link-detail a {
	color: #5065a4;
	text-decoration: none;
}

.link-detail .fa-arrow-right.circle {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	font-size: 0.8em;
	text-align: center;
	vertical-align: middle;
	border: solid 1px #5065a4;
	border-radius: 50%;
}

.link-detail .fa-arrow-right.circle::before {
	display: block;
	padding: 0.2em;
}

.feature-item .sub-ttl {
	background: #e1111e;
	color: #fff;
}

sup.h2Sup {
	font-size: 40%;
	top: -1.5em;
}

.capTextR {
	text-align: right;
	font-size: 1.2rem;
}

/* ===============================
	PC / Tab
=============================== */
@media print , screen and (min-width: 481px) {
	article {
		padding-top: 60px;
		padding-bottom: 6rem;
		font-size: 1.6rem;
		line-height: 1.4;
		position: relative;
	}
	/* ユーティリティクラス */
	.sp-disp-block {
		margin-right: 1em;
	}
	.mts {
		margin-top: 4rem;
	}
	.sp-width-full {
		width: 960px;
		padding-bottom: 6rem;
		margin-left: auto;
		margin-right: auto;
	}
	/* モバイルナビゲーション */
	#drawerBtn {
		display: none !important;
	}
	/* PCナビゲーション */
	#naviMenu {
		width: 100%;
		padding: 0.8rem 0;
		background-color: rgba(230, 0, 13, 0.9);
		color: #fff;
		position: absolute;
		top: 0;
		z-index: 1;
	}
	#naviMenu ul {
		display: flex;
		justify-content: space-around;
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	#naviMenu ul li {
		display: flex;
		align-items: center;
		width: 15%;
		border-right: solid 1px #fff;
		font-size: 1.8rem;
		text-align: center;
	}
	#naviMenu ul li:first-child {
		width: 25%;
		flex-shrink: 0;
		font-size: 2.8rem;
		text-align: left;
	}
	#naviMenu ul li a {
		display: block;
		width: 100%;
		color: #fff;
		text-decoration: none;
    line-height: 1.3;
	}
	#naviMenu ul li:first-child a {
		padding: 0;
	}
	#naviMenu ul li a.active, #naviMenu ul li a:hover {
		color: #ffff00;
	}
	/* メインビジュアル */
	.main-img {
		padding-top: 4rem;
		font-size: 2.6rem;
		line-height: 1.4;
		font-weight: 500;
	}
	.main-img .visual {
		padding-top: 2rem;
		overflow: hidden;
		position: relative;
	}
	.main-img .visual img {
		position: relative;
		left: 50%;
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	/* メイン下部 */
	.main-bottom {
		padding-top: 10rem;
		padding-bottom: 6rem;
	}
	/* Youtube */
	.youtube-container {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.youtubeBox {
		margin-left: 10%;
		margin-right: 10%;
	}
	/* 外部リンクバナー */
	.link-box {
		margin-top: 6rem;
		text-align: center;
	}
	.link-outer {
		display: inline-block;
	}
	.link-outer a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 3em;
		padding: 1em 1em;
		font-size: 1.4rem;
		line-height: 1.4;
		background: #535353;
		color: #fff;
		text-decoration: none;
	}
	.link-outer a .text {
		padding-right: 1em;
	}
	/* サブエリア */
	.sub-section {
		padding-top: 6rem;
		padding-bottom: 8rem;
	}
	.sub-section img {
		width: 100%;
	}
	.sub-section .sub-text {
		margin-top: 2rem;
	}
	.sub-section .sub-img {
		margin-top: 2rem;
	}
	.sub-section .sub-ttl {
		width: 23rem;
		padding: 0.5em 0;
		font-size: 1.8rem;
		line-height: 1;
		text-align: center;
	}
	.sub-section .ttl-gray {
		padding: 0.3em;
		margin-top: 6rem;
		font-size: 1.6rem;
		background: #898989;
		color: #fff;
		text-align: center;
	}
	.sub-section .ttl-gray+.text {
		margin-top: 1em;
	}
	.sub-item {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.sub-item .flex-container {
		display: flex;
		justify-content: space-between;
	}
	.sub-item .flex-container-half {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.sub-item .flex-item-text {
		width: 45%;
	}
	.sub-item .flex-item-img {
		width: 47%;
	}
	.sub-item .flex-item-half {
		width: 47%;
	}
	.sub-item .flex-item-half p.text {
		line-height: 1.6;
	}
	.sub-item h3.sub-title {
		font-size: 3.4rem;
		line-height: 1.4;
		font-weight: 400;
	}
	.sub-item h4.sub-title {
		font-size: 2.6rem;
		line-height: 1.4;
		font-weight: 500;
	}
	.sub-item .sub-title sup {
		font-size: 56%;
		top: -.8em;
	}
	.sub-item .sub-title-large {
		margin-bottom: 0.5em;
		font-size: 3.4rem;
		line-height: 1.4;
		font-weight: 400;
	}
	.sub-item .sub-text {
		margin-top: 2rem;
		line-height: 2;
	}
	.sub-item .sub-img {
		margin-top: 2rem;
	}
	/* タイトルテキスト - プレーン */
	.sub-item .title-text .ttl {
		margin-top: 1em;
		font-size: 1.2em;
		line-height: 1.4;
		color: #e3002c;
	}
	.sub-item .title-text .ttl:first-of-type {
		margin-top: 0;
	}
	.sub-item .title-text .text {
		font-size: 1.4rem;
	}
	.sub-item .title-text img {
		margin-top: 2rem;
	}
	.textCap {
		font-size: 1.4rem;
	}
	/* タイトルテキスト - ベタ */
	.sub-item .title-text-beta .ttl {
		padding: 0.1em;
		background: #898989;
		color: #fff;
		text-align: center;
	}
	.sub-item .title-text-beta .ttl+.text {
		margin-top: 1em;
	}
	.subTitle {
		margin-top: 0.5em;
		text-align: center;
		color: #a0a0a0;
		font-size: 1.4rem;
	}
	.sub-item .title-text-beta .ttl {
		margin-top: 8rem;
	}
	.sub-item .flex-item-img .sub-img:first-of-type {
		margin-top: 0;
	}
	/* NEWマーク */
	.sub-item .sub-new {
		display: inline-block;
		padding: 0.4em 0.8em;
		font-size: 1.4rem;
		line-height: 1;
		background: #e3002c;
		color: #fff;
	}
	/* サブコンテナー */
	.sub-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.sub-container .sub-item {
		width: 45%;
		padding-top: 6rem;
		padding-bottom: 26rem;
		position: relative;
	}
	.sub-container .sub-item.has-text {
		padding-bottom: 28rem;
	}
	.sub-container .sub-item.size-half {
		padding-bottom: 15rem;
	}
	.sub-container .sub-item.size-half.has-text {
		padding-bottom: 18rem;
	}
	.sub-container .sub-item.no-pb {
		padding-bottom: 0;
	}
	.sub-container .sub-item .sub-img {
		width: 100%;
		margin-top: 0;
		position: absolute;
		bottom: 0;
	}
	.sub-container .sub-img.adjust-pb {
		padding-bottom: 1.2em;
	}
	.sub-container .sub-img.pb-half {
		padding-bottom: 5rem;;
	}
	.sub-container p.sub-text {
		line-height: 1.6;
		padding-bottom: 1em;
	}
	/* 注釈エリア */
	.caption-container {
		padding-top: 10rem;
	}
	/* ハーフサイズ画像 */
	.img-half {
		font-size: 1.6rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.img-half .img-half-item {
		width: 49.4%;
	}
	.img-half-ttl:first-child {
		margin-top: 2rem;
	}
	.img-half .img-half-item .ttl {
		padding: 0.25em;
	}
	.image-caption {
		font-size: 1.4rem;
		position: absolute;
		bottom: -1.5em;
	}
	/* ハーフサイズ画像テキスト */
	.img-text-half {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.img-text-half .img-half-item {
		width: 47%;
	}
	/* 画像キャプション */
	.cap-img {
		position: relative;
	}
	.cap-text {
		position: absolute;
		bottom: -1.5em;
		right: 0;
		font-size: 0.77em;
	}
	/* 画像リスト */
	ul.list-img {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 6rem;
	}
	ul.list-img.col3 li {
		width: 31%;
	}
	ul.list-img.col4 li {
		width: 24%;
	}
	ul.list-img-text {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 6rem;
	}
	ul.list-img-text.col3 li {
		width: 31%;
	}
	ul.list-img-text .ttl {
		font-size: 1.8rem;
		color: #e7010e;
	}
	ul.list-img-text .ttl+.text {
		margin-top: 0.5em;
	}
	ul.list-img-text img {
		width: 100%;
		margin-top: 2rem;
	}
	ul.sensor img {
		margin-top: 0;
	}
}

/* ===============================
	mobile
=============================== */
@media screen and (max-width: 480px) {
	article {
		padding-bottom: 4rem;
		line-height: 1.6;
		color: #000;
	}
	article img {
		width: 100%;
	}
	.sp-width-full {
		padding-bottom: 3rem;
	}
	.sp-disp-block {
		display: block;
	}
	.mts {
		margin-top: 2rem;
	}
	/* PCナビゲーション */
	#naviMenu {
		display: none;
	}
  	#naviMenu ul li a {
		display: block;
		width: 100%;
		color: #fff;
		text-decoration: none;
    line-height: 1.3;
	}
	/* メインビジュアル */
	.main-img {
		padding-top: 2rem;
		line-height: 1.4;
		font-weight: 500;
		overflow: hidden;
	}
	.main-img .visual {
		width: 150%;
		padding-top: 2rem;
		position: relative;
		left: -25%;
	}
	/* メイン下部 */
	.main-bottom {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	/* Youtube */
	.youtube-container {
		padding-bottom: 3rem;
	}
	/* 外部リンクバナー */
	.link-box {
		margin-top: 3rem;
	}
	.link-outer {
		display: inline-block;
	}
	.link-outer a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 3em;
		padding: 0.4em 0.8em;
		line-height: 1.4;
		background: #535353;
		color: #fff;
		text-decoration: none;
	}
	.link-outer a .text {
		padding-right: 1em;
	}
	/* サブエリア */
	.sub-section {
		padding-top: 4rem;
		padding-bottom: 6rem;
	}
	.sub-section .sub-text {
		margin-top: 2rem;
	}
	.sub-section .sub-img {
		margin-top: 2rem;
	}
	.sub-section .sub-ttl {
		width: 20rem;
		padding: 0.5em 0;
		margin-right: auto;
		font-size: 1.6rem;
		line-height: 1;
		text-align: center;
	}
	.sub-section .ttl-gray {
		padding: 0.5em;
		margin-top: 4rem;
		font-size: 1.6rem;
		background: #898989;
		color: #fff;
		text-align: center;
	}
	.sub-section .ttl-gray+.text {
		margin-top: 1em;
	}
	.sub-item {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.sub-item .sub-title {
		font-size: 1.9rem;
		line-height: 1.5;
		font-weight: 400;
	}
	.sub-item .sub-title sup {
		font-size: 60%;
		top: -.7em;
	}
	.sub-item .sub-title-large {
		margin-bottom: 0.5em;
		font-size: 1.9rem;
		line-height: 1.5;
		font-weight: 400;
	}
	.sub-item .sub-text {
		margin-top: 2rem;
		line-height: 1.6;
	}
	.sub-item .sub-img {
		margin-top: 2rem;
	}
	/* タイトルテキスト - プレーン */
	.sub-item .title-text .ttl {
		margin-top: 1em;
		font-size: 1.2em;
		color: #e3002c;
	}
	.sub-item .title-text .ttl:first-of-type {
		margin-top: 0;
	}
	.sub-item .title-text .text {
		font-size: 1.4rem;
	}
	.sub-item .title-text img {
		margin-top: 2rem;
	}
	/* タイトルテキスト - ベタ */
	.sub-item .title-text-beta .ttl {
		padding: 0;
		margin-top: 3rem;
		background: #898989;
		color: #fff;
		text-align: center;
	}
	.sub-item .title-text-beta .ttl+.text {
		margin-top: 1em;
	}
	.sub-item .title-text-beta .ttl {
		margin-top: 3rem;
	}
	.textCap {
		font-size: 1.2rem;
	}
	.subTitle {
		margin-top: 0.5em;
		text-align: center;
		color: #a0a0a0;
		font-size: 1.2rem;
	}
	/* NEWマーク */
	.sub-item .sub-new {
		display: inline-block;
		padding: 0.4em 0.8em;
		font-size: 1.2rem;
		line-height: 1;
		background: #e3002c;
		color: #fff;
	}
	/* 注釈エリア */
	.caption-container {
		padding-top: 4rem;
	}
	/* ハーフサイズ画像 */
	.img-half {
		font-size: 1.4rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.img-half .img-half-item {
		width: 49.4%;
	}
	.img-half-ttl:first-child {
		margin-top: 2rem;
	}
	.img-half .img-half-item .ttl {
		padding: 0.25em;
	}
	.img-half .img-half-item .text {
		font-size: 1.4rem;
		margin-top: 0.25em;
	}
	/* ハーフサイズ画像テキスト */
	.img-text-half {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.img-text-half .img-half-item {
		width: 47%;
	}
	/* 画像キャプション */
	.cap-img {
		position: relative;
	}
	.cap-text {
		position: absolute;
		bottom: -1.5em;
		right: 0;
		font-size: 0.77em;
	}
	/* 画像リスト */
	ul.list-img {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 3rem;
	}
	ul.list-img.col3 li {
		width: 49.4%;
	}
	ul.list-img.col4 li {
		width: 49.4%;
	}
	ul.list-img-text {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	ul.list-img-text .ttl {
		margin-top: 3rem;
		font-size: 1.8rem;
		color: #e7010e;
	}
	ul.list-img-text .ttl+.text {
		margin-top: 0.5em;
	}
	ul.list-img-text img {
		margin-top: 0.5em;
	}
}