@charset "utf-8";

/* =======================================
	top CSS
========================================== */
/* ヒーローイメージ＆トップヘッダー（ヘッダーが上部までスクロールされたら固定表示にするJSと連携）
------------------------------------------ */
/*ヒーローイメージ*/
body {
	/* iOSでは下部に隠れてしまうため、高さいっぱいに表示されません */
	height: 100vh;
}
/* Safari用のハックは、Chromeに適用されないようにする */
@supports (-webkit-touch-callout: none) {
	body {
		/* Safari用のハック */
		height: -webkit-fill-available;
	}
}
.hero {
	overflow: hidden;
	height: calc(100vh - 70px);/*トップヘッダー分引く*/
	position: relative;
}
.hero h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hero h1 img {
	width: 100%;
	max-width: 761px;
}
@media screen and (max-width: 999px) {/* SP & TB */
	.hero h1 {
		width: 90%;
	}
}

/*トップヘッダー*/
.top-header {
	z-index: 100;
	box-sizing: border-box;
	width: 100%;
	height: 70px;
	background: #f7f7f7;
	border-bottom: 3px solid #87CEEB;
	position: absolute;/*ヘッダーが上部までスクロールされたら固定表示にするJSと連携*/
}
.top-header.fixed {
	position: fixed;/*ヘッダーが上部までスクロールされたら固定表示にするJSと連携*/
	top: 0;/*ヘッダーが上部までスクロールされたら固定表示にするJSと連携*/
}
.top-header h1 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
@media screen and (max-width: 767px) {/* SP */
	.top-header h1 {
		width: 40%;
	}
}

/* POLICY : 
------------------------------------------ */
#POLICY {
	text-align: center;
}
@media screen and (min-width: 1000px) {/* PC */
	#POLICY {
		margin: 140px 0 0;/*ヘッダー高70px＋マージン70px*/
		padding: 10px 0 150px;/*黄色の帯の上側の余白10px*/
		background: linear-gradient(#fff23f 80px, transparent 80px, transparent);/*黄色の帯*/
	}
	#POLICY p.pc {
	}
	#POLICY p.sp {
		display: none;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#POLICY {
		margin: 110px 0 0;/*ヘッダー高70px＋マージン40px*/
		padding: 10px 0 50px;/*黄色の帯の上側の余白10px*/
		background: linear-gradient(#fff23f 80px, transparent 80px, transparent);/*黄色の帯*/
	}
	#POLICY p.pc {
	}
	#POLICY p.sp {
		display: none;
	}
}
@media screen and (max-width: 768px) {/*  SP */
	#POLICY {
		margin: 110px 0 0;/*ヘッダー高70px＋マージン40px*/
		padding: 10px 0 50px;/*黄色の帯の上側の余白10px*/
		background: linear-gradient(#fff23f 70px, transparent 70px, transparent);/*黄色の帯*/
	}
	#POLICY p.pc {
		display: none;
	}
	#POLICY p.sp {
	}
}

/* SERVICE : 
------------------------------------------ */
@media screen and (min-width: 1000px) {/* PC */
	#SERVICE {
		margin: 0 0 150px;
		background: url("../../img/wt50px.jpg") repeat-x, linear-gradient(90deg, #f7f7f7, #f7f7f7 50%, #87CEEB 50%, #87CEEB);/*左白｜右水色*/
		background-size: 100% 90px;
	}
	#SERVICE h3.h3 {
		font-size: 22px;
	}
	#SERVICE div.clmL {
		float: left;
		box-sizing: border-box;
		width: 50%;
		padding: 0 60px 0 0;
	}
	#SERVICE div.clmL p {
		text-align: justify;
		text-justify: inter-character;
	}
	#SERVICE div.clmR {
		float: right;
		box-sizing: border-box;
		width: 50%;
		padding: 0 0 0 60px;
		color: #166484;
	}
	#SERVICE div.clmR h3.h3 {
		color: #166484;
	}
}
@media screen and (max-width: 999px) {/* TB & SP */
	#SERVICE {
		margin: 0 0 50px;
	}
	#SERVICE h2.h2 {
		padding: 0 20px;
	}
	#SERVICE h3.h3 {
		font-size: 22px;
	}
	#SERVICE div.clmL {
		padding: 0 20px;
	}
	#SERVICE div.clmR {
		padding: 20px 20px 50px;
		background: #87CEEB;
		margin: 20px 0 0 0;
		color: #166484;
	}
	#SERVICE div.clmR h3.h3 {
		color: #166484;
	}
}

/* FLOW : 
------------------------------------------ */
@media screen and (min-width: 1000px) {/* PC */
	#FLOW {
		padding: 10px 0 150px;/*黄色の帯の上側の余白10px*/
		background: linear-gradient(#fff23f 80px, transparent 80px, transparent);/*黄色の帯*/
	}
	#FLOW ol.flowSP {
		display: none;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#FLOW {
		margin: 0 0 50px;
		padding: 10px 0 0 0;/*黄色の帯の上側の余白10px*/
		background: linear-gradient(#fff23f 80px, transparent 80px, transparent);/*黄色の帯*/
	}
	#FLOW ol.flowSP {
		display: none;
	}
}
@media screen and (max-width: 767px) {/* SP */
	#FLOW {
		margin: 0 0 50px;
		padding: 10px 0 0 0;/*黄色の帯の上側の余白10px*/
		background: linear-gradient(#fff23f 70px, transparent 70px, transparent);/*黄色の帯*/
	}
	#FLOW .flowPC {
		display: none;
	}
	#FLOW ol.flowSP li {
		box-sizing: border-box;
		border: 2px solid #000;
		padding: 10px 0;
		text-align: center;
		position: relative;
		margin-bottom: 15px;
	}
	#FLOW ol.flowSP li::after {
		content: url("../../img/arrowDown.png");
		display: block;
		height: 15px;
		position: absolute;
		bottom: -14px;
		left: 50%;
		transform: translateX(-50%);
	}
	#FLOW ol.flowSP li:last-of-type::after {
		content: none;
	}
	#FLOW ol.flowSP li h3 {
		font-size: 17px;
		font-weight: bold;
	}
}

/* NEWS : 
------------------------------------------ */
#NEWS h2.h2 {
	color: #fff;
}
@media screen and (min-width: 1000px) {/* PC */
	#NEWS {
		background: linear-gradient(90deg, #87CEEB, #87CEEB 70%, #f7f7f7 70%, #f7f7f7);/*左水色｜右白*/
		padding: 80px 0;
		margin: 0 0 150px;
	}
	#NEWS h2.h2 {
		float: left;
	}
	#NEWS div.fb-container {
		float: left;
		margin: 20px 0 0 100px;
		width: 500px;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#NEWS {
		margin: 0 0 50px;
		padding: 50px 0;
		background: #87CEEB;
	}
	#NEWS h2.h2 {
		float: left;
	}
	#NEWS div.fb-container {
		float: left;
		margin: 20px 0 0 100px;
		width: 500px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	#NEWS {
		margin: 0 0 50px;
		padding: 50px 0;
		background: #87CEEB;
	}
	#NEWS div.fb-container {
		width: 100%;
		max-width: 500px;
	}
}

/* ACHIEVEMENT : ※CSSだけで＋−切り替えのアコーディオンメニュー
------------------------------------------ */
#ACHIEVEMENT input[type="checkbox"] {
	display: none;
}
#ACHIEVEMENT label.ac-title {
	pointer-events: none;/* クリックを無効にする */
	position: relative;
	display: flex;
	align-items: center;/* 内包要素を上下センターに */
	justify-content: center;/*内包要素を左右センターに */
	height: 50px;
	background: #87CEEB;
	color: #166484;
	font-size: 1.2em;
	font-weight: bold;
}
#ACHIEVEMENT label.ac-title::after {
	content: "";
	display: block;
	width: 100%;
	border-top: 1px solid #fff;
	position: absolute;
	bottom: 6px;
	left: 0;
}
#ACHIEVEMENT label.ac-title i {
	display: none;
}
#ACHIEVEMENT p.hd {
	text-indent: -1em;
	font-weight: bold;
}
#ACHIEVEMENT p {
	padding: 0 0 0 1em;
}
@media screen and (min-width: 1000px) {/* PC */
	#ACHIEVEMENT {
		padding: 0 0 150px;
	}
	#ACHIEVEMENT div.ac-toggle {
		padding: 1em 0 2em 10px;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#ACHIEVEMENT {
		margin: 0 0 50px;
	}
	#ACHIEVEMENT div.ac-toggle {
		padding: 1em 0 2em 10px;
	}
#ACHIEVEMENT label.ac-title i {
	display: none;
}
}
@media screen and (max-width: 768px) {
	#ACHIEVEMENT {
		margin: 0 0 50px;
	}
	#ACHIEVEMENT label.ac-title {
		pointer-events: all;/* SPでクリックを有効にする */
		margin-bottom: 10px;
	}
	/* ＋ボタン */
	#ACHIEVEMENT label.ac-title i {
		display: block;
		box-sizing: border-box;
		height: 20px;
		width: 20px;
		cursor: pointer;
		background: url("../../img/plus-light.svg") no-repeat center center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 15px;
	}
	/* クリックされたら−ボタンに */
	#ACHIEVEMENT input#ac1:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac2:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac3:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac4:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac5:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac6:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac7:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac8:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac9:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac10:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac11:checked ~ label.ac-title i,
	#ACHIEVEMENT input#ac12:checked ~ label.ac-title i
	{
		background: url("../../img/minus-light.svg") no-repeat center center;
	}
	#ACHIEVEMENT div.ac-toggle {/* 最初は非表示に */
		height: 0;
		padding: 0 0 0 10px;
		transition: .2s;
		overflow: hidden;
	}
	#ACHIEVEMENT input#ac1:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac2:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac3:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac4:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac5:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac6:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac7:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac8:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac9:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac10:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac11:checked ~ div.ac-toggle,
	#ACHIEVEMENT input#ac12:checked ~ div.ac-toggle
	{/* チェックされたら表示する */
		height: auto;
		padding: 5px 0 1em 10px;/*上下余白でアニメーションっぽく見せる*/
	}
}

/* MESSAGE : 
------------------------------------------ */
#MESSAGE {
	color: #166484;
}
#MESSAGE h2.h2 {
	color: #fff;
}
#MESSAGE .txt70R h3 {
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 1em 0;
}
#MESSAGE .txt70R p {
	font-weight: 500;
}
#MESSAGE .txt70R p.ceo {
	text-align: right;
	margin: 1em 0 0 0;
}
#MESSAGE .txt70R p.ceo img {
	width: 140px;
}
@media screen and (min-width: 1000px) {/* PC */
	#MESSAGE {
		margin: 0 0 150px;
		padding: 80px 0 80px;
		background: #87CEEB;
	}
	#MESSAGE div.img30L figure {
		margin: -24px 0 0 0;
	}
	#MESSAGE div.img30L figure img.sp {
		display: none;
	}
	#MESSAGE div.txt70R {
		padding: 0 0 0 60px;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#MESSAGE {
		margin: 0 0 50px;
		padding: 50px 0;
		background: #87CEEB;
	}
	#MESSAGE div.img30L figure {
		margin: -12px 0 0 0;
	}
	#MESSAGE div.img30L figure img.sp {
		display: none;
	}
	#MESSAGE div.txt70R {
		padding: 0 0 0 30px;
	}
	#MESSAGE h3 {
		font-size: 18px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	#MESSAGE {
		margin: 0 0 50px;
		padding: 50px 0;
		background: #87CEEB;
	}
	#MESSAGE div.img30L figure img.pc {
		display: none;
	}
}

/* COMPANY : 
------------------------------------------ */
#COMPANY dl dt {
	font-weight: bold;
	color: #666;
}
@media screen and (min-width: 1000px) {/* PC */
	#COMPANY {
		margin: 0 0 150px;
	}
	#COMPANY dl dt {
		width: 6em;
		text-align: justify;
		text-align-last: justify;
		text-justify: inter-character;
	}
	#COMPANY dl dd {
		margin: -1.6em 0 1em 0;
		padding: 0 0 0 8em;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#COMPANY {
		margin: 0 0 50px;
	}
	#COMPANY dl dd {
		padding: 0 0 1em 0;
		border-bottom: 1px solid #ccc;
		margin: 0 0 1em 0;
	}
}
@media screen and (max-width: 767px) {/* SP */
	#COMPANY {
		margin: 0 0 50px;
	}
	#COMPANY dl dd {
		padding: 0 0 1em 0;
		border-bottom: 1px solid #ccc;
		margin: 0 0 1em 0;
	}
}

/* CONTACT : 
------------------------------------------ */
@media screen and (min-width: 1000px) {/* PC */
	#CONTACT {
		margin: 0 0 150px;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#CONTACT {
		margin: 0 0 50px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	#CONTACT {
		margin: 0 0 50px;
	}
}