@charset "UTF-8";
/*--------------------------------------------------
【更新履歴】
2020.1.28 ：マニュアル作成にあたり内容整理。
2019.5.29 ：メインイメージ・ヘッダー・フッターの記述を整理、最適化。
2019.4.10 ：単位の混在を整理。
2018.11.29：不要な要素などを削除。
2018.05.24：	共通要素の色とBGの設定を分離せず一か所にまとめるようにしました。
2018.05.17：	更新履歴の項を追加。メディアクエリに印刷時の記述を追加。
			@media screen and ~~ -> @media print, screen and~~

目次
・基本ルール
・ベースレイアウト
	└ヘッダー・ナビゲーション・メインイメージ・コンテンツ・フッター
・コンテンツ部分の共通スタイル
・サイト全体で使う共通スタイル
・ページ個別のスタイル
	└index,about,contactなど

■normalize.cssについて
各ブラウザ特有のズレなどをリセットするためのCSSです。
こちらは編集しないで下さい。
全てのスタイルはstyle.cssで指定して下さい。

■メディアクエリについて
記述例：
ウィンドウサイズが600px以上（PC）のCSSを指定する場合
@media print, screen and (min-width: 600px) {
	header {
		font-size: 1.5rem;
	}
	header p {
		color: red;
	}
}

■本番公開前のクリーンアップ
下記のようなクリーンアップサービスなどを使用して
コメントや不要な改行を削除して下さい。
https://csscompressor.com/
--------------------------------------------------*/
/*--------------------------------------------------
	基本ルール
--------------------------------------------------*/
/*font-sizeはremで指定しています。15px=1.5rem。*/
html {
	font-size: 62.5%;
}
body {
	font-size: 15px;
	font-size: 1.5rem;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 200 - 900;
	font-style: normal;/*細めのフォントを見やすくする。デザイン次第で不要なら削除。*/
	line-height: 1.7;
	color: #333;
}
table {
	table-layout: fixed;/*IE11*/
	border-collapse: collapse;
	border-spacing: 0;
}
p, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, dt, dd, figure {
	margin: 0;
	padding: 0;
}
ul, li, ol, dl, dt, dd {
	list-style: none;
}
a {
}
a:hover {
	text-decoration: none;
}
strong {
	font-weight: bold;
}
figure {
	margin-block: 0em;
	margin-inline: 0em;
}
img {
	margin: 0;
	vertical-align: middle;
	border: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	body {
		image-rendering: -webkit-optimize-contrast;
	}
}
/*--------------------------------------------------
	ヘッダー部分レイアウト
--------------------------------------------------*/
/*
以下、ヘッダーロゴ～ナビゲーションがPC時1008pxに収まっているレイアウト
*/
/*ヘッダー*/
header {
	background: #fff;
}
header .hdr_bar {
	width: 100%;
	background: #23322d;
}
header .hdr_bar p {
	padding: 8px;
	font-size: 1.2rem;
	color: #fff;
}
header .hdr_box {
	position: relative;
	width: 100%;
}
header .hdr_box .hdr_box_logo {
	width: 60%;
	width: calc(100% - 144px);
}
header .hdr_box .hdr_box_logo a {
	position: relative;
	display: block;
	width: 100%;
	height: 72px;
}
header .hdr_box .hdr_box_logo a:hover {
	opacity: 0.7;
}
header .hdr_box .hdr_box_logo img {
	display: block;
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translate(0%, -50%);
	max-width: 96%;
	height: auto;
	max-height: 60px;
}
/*------------------------------------------------*/
/*SP表示時のナビゲーションのレイアウト*/
header .hdr_contact .tel,
header .hdr_contact .navbtn {
	position: absolute;
	width: 72px;
	height: 72px;
	display: flex;
	z-index: 900;
}
header .hdr_contact .tel {
	top: 0;
	right: 73px;
}
header .hdr_contact .navbtn {
	top: 0;
	right: 0;
}
header .hdr_contact .tel a,
header .hdr_contact .navbtn {
	text-indent: -7777px;
	overflow: hidden;
	background-color: rgba(255,255,255,0.6);
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
}
header .hdr_contact .tel a {
	display: block;
	width: 100%;
	height: 100%;
	background-image:  url(../img/ico_hdr_tel.svg);
}
header .hdr_contact .tel a:hover {
	opacity: 0.7;
}
header .hdr_contact .navbtn {
	background-image: url(../img/ico_navbtn.svg);
}
header .hdr_contact .mail {
	display: none;
}
header .hdr_contact .mail a:hover {
	opacity: 0.7;
}
/*一定距離スクロールすると電話・メニューボタンがページ右上に固定されるようにする*/
.fixed .hdr_contact .tel,
.fixed .hdr_contact .navbtn {
	position: fixed;
}

header .hdr_contact .navbtn.navopen {
	border-left: none;
	background-color: inherit;
	background-image: url(../img/ico_navbtn-close.svg);
	z-index: 1000;
}
nav {
	position: fixed;
	width: 86vw;
	height: 100%;
	padding: 88px 24px 72px;
	box-sizing: border-box;
	top: 0;
	right: 0;
	z-index: 900;
	transform: translateX(100vw);
	transition: all 0.4s cubic-bezier(0.38, 0, 0.25, 1);
}
nav.navopen {
	width: 100%;
	position: fixed;
	overflow: scroll;
	transform: translateX(0);
	transition: all 0.4s cubic-bezier(0.38, 0, 0.25, 1);
	z-index: 900;
	background-color: rgba(255,255,255,.8);
}
nav ul {
}
nav ul li {
	border-bottom: 1px solid #907bed;
}
nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px 0;
	text-align: center;
	text-decoration: none;
	color: #43396e;
}
/*SP表示時のナビゲーションのレイアウト終わり*/
/*------------------------------------------------*/
@media print, screen and (min-width: 600px) {
	header {
		display: block;
		border-bottom: 2px solid #907bed;
	}

	header .hdr_box {
		display: flex;
		justify-content: space-between;
		width: 1008px;
		margin: 0 auto;
	}
	header .hdr_box .hdr_box_logo {
		width: 30%;
		max-height: inherit;
		padding: 0;
	}
	header .hdr_box .hdr_box_logo a {
		width: 100%;
		height: 100%;
	}
	header .hdr_box .hdr_box_logo img {
		position: relative;
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: inherit;
		top: 8px;
		left: 0;
		transform: none;
	}
	header .hdr_contact {
		width: 42%;
		display: flex;
	}
	header .hdr_contact .tel {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		right: 0;
		margin-right: 8px;
	}
	header .hdr_contact .tel a {
		text-indent: 0;
		text-align: right;
		border: 0;
		background: none;
	}
	header .hdr_contact .tel img {
		width: auto;
		height: 100%;
	}
	header .hdr_contact .mail {
		position: relative;
		display: block;
	}

	header .hdr_contact .mail img {
		width: auto;
		height: 100%;
	}

	header .hdr_contact .mail a {
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 38px auto;
	}
	
	header .hdr_contact .navbtn {
		display: none;
	}
	.fixed .hdr_contact {
		position: relative;
	}
	.fixed .hdr_contact .tel {
		position: relative;
		right: 0;
	}
	.fixed .hdr_contact .navbtn {
		position: relative;
	}
}
@media print, screen and (min-width: 600px) {
	nav {
		width: 100%;
		padding: 0;
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		transition: none;
		border-radius: 0;
	}
	nav ul {
		width: 1008px;
		margin: 0 auto;
		display: flex;
		flex-flow: nowrap;
		justify-content: space-around;
	}
	nav ul li {
		margin: 0;
		box-sizing: border-box;
		border-bottom: 0;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><path fill="%23e7e4f8" d="M0.000,0.000 L32.000,0.000 L32.000,32.000 L0.000,32.000 L0.000,0.000 Z" /></svg>');
		background-position: 0 center;
		background-repeat: no-repeat;
		background-size: 1px 25%;
	}
	nav ul li:first-child {
		background: none;
	}
	nav ul li a {
		height: auto;
		padding: 20px 10px;
	}

	nav ul li p{
		display: inline-block;
	}
	nav ul li  p:hover,
	nav ul li.current p {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><path fill="%23c3ed64" d="M0.000,0.000 L32.000,0.000 L32.000,32.000 L0.000,32.000 L0.000,0.000 Z" /></svg>');
		background-position: 0 80%;
		background-repeat: no-repeat;
		background-size: 100% 3px;
	}
}
/*メインイメージ*/
.mainimg {
	position: relative;
	width: 100%;
	background: url(../img/mainimage.jpg) center 50% no-repeat;
	background-size: cover;
}
.mainimg h1 span.visually-hidden{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

#index .mainimg ,
#policy .mainimg {
	position: relative;
	width: 100%;
	aspect-ratio: 35/16;
	background: url(../img/index/mainimage.jpg) center 50% no-repeat;
	background-size: cover;
}

#notify .mainimg ,
#aboutlhi .mainimg ,
#business .mainimg ,
#company .mainimg ,
#contact .mainimg ,
#recruit .mainimg {
	aspect-ratio: 56/13;
}
#notify .mainimg {
	background: url(../img/notify/mainimage.png) center 50% no-repeat;
	background-size: cover;
}
#aboutlhi .mainimg {
	background: url(../img/aboutlhi/mainimage.png) center 50% no-repeat;
	background-size: cover;
}
#business .mainimg {
	background: url(../img/business/mainimage.png) center 50% no-repeat;
	background-size: cover;
}
#company .mainimg {
	background: url(../img/company/mainimage.png) center 50% no-repeat;
	background-size: cover;
}
#contact .mainimg {
	background: url(../img/contact/mainimage.png) center 50% no-repeat;
	background-size: cover;
}
#policy .mainimg {
	background: url(../img/index/mainimage.png) center 50% no-repeat;
	background-size: cover;
}
#recruit .mainimg {
	background: url(../img/recruit/mainimage.png) center 50% no-repeat;
	background-size: cover;
}

.mainimg .mainimg_box {
	position: relative;
	height: 100px;/*トップページとそれ以外で高さを変えています。ここではindex以外のページのメインイメージの高さを設定しています。indexのメインイメージの高さはcss下部の個別の方に設定する。*/
}
.mainimg .mainimg_box .catch {
	width: 90%;
	height: auto;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
}
.mainimg .mainimg_box .catch img {
	width: 100%;
	height: auto;
}
@media print, screen and (min-width: 600px) {
	.mainimg .mainimg_box {
		width: 1008px;
		height: 200px;
		margin: 0 auto;
	}
	.mainimg .mainimg_box .catch {
		width: 60%;
	}
}

/*--------------------------------------------------
	コンテンツ部分レイアウト
--------------------------------------------------*/
/*ここではコンテンツ部分のベースレイアウトのみ決める。本文のスタイル設定は「コンテンツ部分の共通スタイル」の項で行う*/
.wrapper {
	position: relative;
	box-sizing: border-box;
}
#index .wrapper{
	padding-top: 80px;
}
@media (min-width:600px){
	.wrapper {
		padding: 0;
	}
}
.wrapper .content {
}
.wrapper .content main {
}
.wrapper .content .side {
}
.wrapper .content .side ul {
}
.wrapper .content .side li {
	margin: 0 0 8px;
}
.wrapper .content .side li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 32px 8px;
	box-sizing: border-box;
	background: #fff;
}
@media print, screen and (min-width: 600px) {
	.wrapper {
		position: relative;
		background-image: url(../img/common/bg_shape.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.wrapper .content {
		position: relative;
		width: 1008px;
		margin: 0 auto;
	}

	.wrapper .content::before{
		content: "";
		position: absolute;
		top: -70px;
		left: 0;
		width:189px;
		height: 239px;
		background-image: url(../img/common/bg_dots-top.png);
		background-repeat: no-repeat;
		background-size: contain;
		z-index: -1;
	}

	.wrapper .content::after{
		content: "";
		position: absolute;
		bottom: -70px;
		right: 0;
		width:189px;
		height: 239px;
		background-image: url(../img/common/bg_dots-bottom.png);
		background-repeat: no-repeat;
		background-size: contain;
		z-index: -1;
	}
	.wrapper .content main {
		order: 2;
		/*order:2;を右に置きたい要素に設定する*/
		margin: 80px auto;
		width: 774px;
		box-sizing: border-box;
	}
	.wrapper .content .side {
		width: 240px;
		padding: 0;
		box-sizing: border-box;
	}
	.wrapper .content .side ul {
		width: 100%;
	}
	.wrapper .content .side li {
		margin: 0 0 16px;
	}
}
/*フッター*/
footer {
	color: #202a56;
	background: #cdcbd6;
}
footer .ftr_nav {
	display: none;
}

footer .ftr_box .logo {
	width: 45%;
	margin: 0 0 16px;
}
footer .ftr_box .logo a:hover {
	opacity: 0.7;
}
footer .ftr_box .logo img {
	width: 100%;
	height: 100%;
}
footer .ftr_box address {
	margin: 0 0 16px;
	font-size: 1.3rem;
	font-style: normal;
}
footer .ftr_box .copy {
	font-size: 1.4rem;
	font-weight: normal;
}

footer .ftr_nav {
	position: relative;
	display: block;
	width: 100%;
	height: 166px;
	margin: 0 auto;
}
footer .ftr_nav ul {
	position: absolute;
	top: 20%;
	width: 100%;
	height: 60px;
	align-items: baseline;
	font-size: 0;
}
footer .ftr_nav ul li {
	display: inline-block;
	padding: 0 16px;
	font-size: 1.5rem;
	margin: 0;
	box-sizing: border-box;
	border-bottom: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><path fill="%23e7e4f8" d="M0.000,0.000 L32.000,0.000 L32.000,32.000 L0.000,32.000 L0.000,0.000 Z" /></svg>');
	background-position: 0 center;
	background-repeat: no-repeat;
	background-size: 1px 50%;
}
footer .ftr_nav ul li a {
	color: #202a56;
}

footer .ftr_box-container{
	width: 100%;
	border-bottom: 2px solid #907bed;
}

footer .ftr_box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: auto;
	margin: 0 auto 2rem;
	align-items: center;
}
footer .ftr_box .ftr_box_logo {
	width: 50%;
	max-height: inherit;
	padding: 0;
}
footer .ftr_box .ftr_box_logo a {
	width: 100%;
	height: 100%;
}
footer .ftr_box .ftr_box_logo img {
	position: relative;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: inherit;
	left: 0;
	transform: none;
}
footer .ftr_contact {
	width: 50%;
	margin-top: 14px;
	display: flex;
	justify-content: space-between;
}
footer .ftr_contact .tel {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	right: 0;
	margin-right: 8px;
}
footer .ftr_contact .tel a {
	text-indent: 0;
	text-align: right;
	border: 0;
	background: none;
}
footer .ftr_contact .tel img {
	width: 100%;
	height: auto;
}
footer .ftr_contact .mail {
	position: relative;
	display: block;
}

footer .ftr_contact .mail img {
	width: 100%;
	height: auto;
}

footer .ftr_contact .mail a {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 38px auto;
}

footer .copy{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	background-color: #fff;
	box-sizing: border-box;
	border: 5px solid #e4f7b9;
}

.fixed .hdr_contact {
	position: relative;
}
.fixed .hdr_contact .tel {
	position: fixed;
	right: 73px;
}
footer .ftr_box .copy {
	width: 100%;
	text-align: center;
}
@media print, screen and (min-width: 600px) {
	footer .ftr_nav {
		position: relative;
		display: block;
		width: 1008px;
		height: 166px;
		margin: 0 auto;
	}
	footer .ftr_nav ul {
		position: absolute;
		top: 33%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
		height: 60px;
		align-items: baseline;
		font-size: 0;
	}
	footer .ftr_nav ul li {
		display: inline-block;
		padding: 0 16px;
		font-size: 1.5rem;
		margin: 0;
		box-sizing: border-box;
		border-bottom: 0;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><path fill="%23e7e4f8" d="M0.000,0.000 L32.000,0.000 L32.000,32.000 L0.000,32.000 L0.000,0.000 Z" /></svg>');
		background-position: 0 center;
		background-repeat: no-repeat;
		background-size: 1px 50%;
	}
	footer .ftr_nav ul li a {
		color: #202a56;
		text-decoration: none;
	}

	footer .ftr_box-container{
		width: 100%;
		border-bottom: 2px solid #907bed;
	}
	
	footer .ftr_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 1008px;
		height: 136px;
		margin: 0 auto;
		align-items: center;
	}
	footer .ftr_box .ftr_box_logo {
		width: 30%;
		max-height: inherit;
		padding: 0;
	}
	footer .ftr_box .ftr_box_logo a {
		width: 100%;
		height: 100%;
	}
	footer .ftr_box .ftr_box_logo img {
		position: relative;
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: inherit;
		left: 0;
		transform: none;
	}
	footer .ftr_contact {
		width: 34%;
		margin-top: 14px;
		display: flex;
		justify-content: space-between;
	}
	footer .ftr_contact .tel {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		right: 0;
		margin-right: 8px;
	}
	footer .ftr_contact .tel a {
		text-indent: 0;
		text-align: right;
		border: 0;
		background: none;
	}
	footer .ftr_contact .tel img {
		width: 100%;
		height: auto;
	}
	footer .ftr_contact .mail {
		position: relative;
		display: block;
	}

	footer .ftr_contact .mail img {
		width: 100%;
		height: auto;
	}

	footer .ftr_contact .mail a {
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 38px auto;
	}

	footer .copy{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80px;
		background-color: #fff;
		box-sizing: border-box;
		border: 5px solid #e4f7b9;
	}
	
	.fixed .hdr_contact {
		position: relative;
	}
	.fixed .hdr_contact .tel {
		position: relative;
		right: 0;
	}
	footer .ftr_box .copy {
		width: 100%;
		text-align: center;
	}
}
/*--------------------------------------------------
	コンテンツ部分の共通スタイル
--------------------------------------------------*/
section {
	margin: 0 0 10rem;
	padding: 0 5% 0;
}
@media (min-width:600px){
	section{
		padding: 0; 
	}
}
section h2 {
	display: flex;
	padding: 10px 0;
	margin: 0 0 16px;
	font-size: 2rem;
	color: #202a56;
	align-items: center;
}
@media (min-width:600px){
	section h2 {
		padding: 10px;
	}
}

section h2::before{
	content: "";
	width: 23px;
	height: 44px;
	background-image: url(../img/common/h2-shape.png);
	background-repeat: no-repeat;
	background-size: contain;
}
#index section .sec_content {
	padding: 0 5%;
}
@media (min-width:600px){
	#index section .sec_content {
		padding: 0;
	}
}
section .sec_content::after {
	/*
	この設定を追加すると .sec_content 内の子要素を flex した際 space-between を設定しているにも関わらず左右に余白ができてしまう。個別に設定したほうが無難。
	content: " ";
	display: block;
	clear: both;
	*/
}
section .sec_content h3 {
	margin: 0 0 16px;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #5fad83;
}
section .sec_content p,
section .sec_content ul,
section .sec_content ol,
section .sec_content dl {
	margin-bottom: 16px;
}
section .sec_content table {
	width: 100%;
	margin: 0 0 16px;
	border-width: 1px;
	border-style: solid;
	border-color: #b6b3b8;
}
section .sec_content table caption {
	padding: 10px;
	font-size: 1.6rem;
	font-weight: bold;
	background-color: #b6b3b8;
}
section .sec_content table th,
section .sec_content table td {
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #b6b3b8;
}
section .sec_content table th {
	background-color: #d8d7d9;
}
@media print, screen and (min-width: 600px) {
	section h2 {
		padding: 10px 0;
	}
	section .sec_content {
		padding: 0;
	}
}
/*--------------------------------------------------
	サイト全体で使う共通スタイル
--------------------------------------------------*/
/*floatした子要素を内包する親要素にclass="clear"を
付与することでfloatを解除します。*/
.clear::after {
	content: " ";
	display: block;
	clear: both;
}


/* SP　PC　only */
.pc-only{
	display: none;
}
.sp-only{
	display: block;
}
@media (min-width:600px){
	.pc-only{
		display: block;
	}
	.sp-only{
		display: none;
	}
}

/*ページトップ*/
.pagetop {
}
/*ページャー※WP用。不要なら削除*/
/*ページャー*/
ul.pagination {
	margin: 16px 0 0;
	text-align: center;
}
ul.pagination .page_num {
	display: none;
}
ul.pagination li {
	display: inline-block;
	margin: 0 2px;
	border: 1px solid #d9dcde;
}
ul.pagination li.current {
	padding: 4px 8px;
}
ul.pagination li:hover,
ul.pagination li.current {
	color: #fff;
	background: #202a56;
	border: 1px solid #202a56;
}
ul.pagination li a {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 4px 8px;
	color: #202a56;
	text-decoration: none;
}
ul.pagination li:hover a {
	color: #fff;
}

.flex{
	display: flex;
}

p{
	font-size: 1.6rem;
	color: #202a56;
}

.grid{
	display: grid;
}

@media print, screen and (min-width: 600px) {
}
/*--------------------------------------------------
	ページ個別のスタイル
--------------------------------------------------*/

/*-------------------------------------------index*/
#index .mainimg .mainimg_box {
	height: 150px;/*indexのメインイメージの高さ*/
}
/*※※※以下は指定例です。削除して下さい※※※*/

#index section{
	padding: 0;
}

#index .s1 p {
}
#index .s1 ul {
}
#index .s1 img {
	width: 100%;
}
#index .s1 p {
	font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#index .s2 img {
	width: 100%;
}
#index .s2 ul li {
}
#index .s2 dl {
}
#index .s2 table {
}
#index .s4 li:nth-child(4n+1) {
	background: pink;
}
#index .s4 li:nth-child(4n+2),
#index .s4 li:nth-child(4n+3),
#index .s4 li:nth-child(4n+4) {
	background: #ccc;
}
/* MVの”弊所より「境界確定のお知らせ」~” */
#index .mv_btm-bar{
	position: absolute;
	width: 100%;
	height: 80px;
	background-color: #c3ed64;
}

#index .bar_wrap{
	display: flex;
	width: 1008px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}

#index .bar_wrap .bar-ttl{
	position: relative;
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	color: #202a56;
	height: 80px;
	gap: 128px;
}


#index .bar_wrap .bar-ttl a.sp-only{
	display: inline;
}

#index .bar_wrap .bar-ttl .pc-only{
	display: none;
}


#index .bar_wrap .bar-ttl span::before{
	content: "";
	position: absolute;
	bottom: 4px;
	width: 80px;
	height: 108px;
	background-image: url(../img/index/top_mv-btm-bar.png);
	background-size: cover;
	
}

/* index以外のMV下タイトルバー */
.mv_btm-bar{
	width: 100%;
	height: 80px;
	background-color: #c3ed64;
}

.bar_wrap{
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
}

.bar_wrap .bar-ttl{
	position: relative;
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	color: #202a56;
	height: 80px;
	gap: 128px;
}

.bar_wrap .bar-ttl h1{
	font-size: 1.8rem;
}






/* TOPのカード */
#index .s1{
	border-top: 80px;
}

#index .content-group{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	row-gap: 4px;
	justify-content: space-between;
	align-items: center;
}
#index .content-group .content-card{
	position: relative;
	max-width: 100%;
	width: 385px;
	height: 510px;
	box-sizing: border-box;
	padding: 0 24px;
}

#index .content-group .content-card h4{
	font-size: 2.4rem;
	font-weight: normal;
	color: #43396e;
	text-align: center;
	padding-top: 66px;
}
#index .content-group .content-card p{
	height: 177px;
	font-family: "Noto Serif JP", serif;
	font-size: 1.6rem;
	line-height: 2.8rem;
	color: #43396e;
	padding: 30px 20px 0;
}

.btn{
	position: relative;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 217px;
	height: 58px;
	color: #fff;
	margin: 0 auto;
	z-index: 10;
}

.btn::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/btn_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.btn:hover::before{
	position: absolute;
	content: "";
	opacity: .8;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/btn_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.btn a{
	position: relative;
	text-decoration: none;
	color: #fff;
	z-index: 10;
}
.btn_w{
	position: relative;
	cursor: pointer;
	display: none;
	justify-content: center;
	align-items: center;
	width: 217px;
	height: 58px;
	color: #202a56;
	margin: 0 auto;
	z-index: 10;
}

.btn_w::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/btn_bg-w.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.btn_w:hover::before{
	position: absolute;
	content: "";
	opacity: .8;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/btn_bg-w.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.btn_w a{
	position: relative;
	text-decoration: none;
	color: #202a56;
	z-index: 10;
}

#index .content-group .btn{
	margin-top: 101px;
}

#index .content-group .content_top-left{
	background:  #eeedfc;
}
#index .content-group .content_top-left::after{
	content: "";
	position: absolute;
	width: 332px;
	height: 304px;
	bottom: 0;
	background-image: url(../img/index/bg_top-left.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 5;
	
}

#index .content-group .content_top-right{
	background:  #eeedfc;
}
#index .content-group .content_top-right::after{
	content: "";
	position: absolute;
	width: 224px;
	height: 248px;
	bottom: 0;
	right: 24px;
	background-image: url(../img/index/bg_top-right.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	z-index: 5;
	
}
#index .content-group .content_bottom-left{
	background:  #eeedfc;
}
#index .content-group .content_bottom-left::after{
	content: "";
	position: absolute;
	width: 290px;
	height: 250px;
	bottom: 0;
	left: 24px;
	background-image: url(../img/index/bg_bottom-left.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 5;
	
}
#index .content-group .content_bottom-right{
	background:  #eeedfc;
}
#index .content-group .content_bottom-right::after{
	content: "";
	position: absolute;
	width: 290px;
	height: 250px;
	bottom: 0;
	background-image: url(../img/index/bg_bottom-right.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 5;
	
}



@media print, screen and (min-width: 600px) {
	#index .mainimg .mainimg_box {
		height: auto;/*indexのメインイメージの高さ(PC用)*/
	}


	#index .mv_btm-bar{
		width: 100%;
		height: 80px;
		background-color: #c3ed64;
	}

	#index .bar_wrap{
		display: flex;
		width: 1008px;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
	}

	#index .bar_wrap .bar-ttl{
		position: relative;
		display: flex;
		align-items: center;
		font-size: 1.8rem;
		color: #202a56;
		height: 80px;
		gap: 128px;
	}

	#index .bar_wrap .bar-ttl a.sp-only{
		display: none;
	}
	
	#index .bar_wrap .bar-ttl .pc-only{
		display: inline;
	}


	#index .bar_wrap .bar-ttl span::before{
		content: "";
		position: absolute;
		bottom: 4px;
		width: 80px;
		height: 108px;
		background-image: url(../img/index/top_mv-btm-bar.png);
		background-size: cover;
		
	}

	/* index以外のMV下タイトルバー */
.mv_btm-bar{
	position: absolute;
	width: 100%;
	height: 80px;
	background-color: #c3ed64;
	bottom: 0;
}

.bar_wrap{
	display: flex;
	width: 1008px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}

.bar_wrap .bar-ttl{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	color: #202a56;
	width: 100%;
	height: 80px;
	gap: 128px;
}

.bar_wrap .bar-ttl h1{
	font-size: 2.4rem;
}


	#index .s1{
		border-top: 80px;
	}

	#index .content-group{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: 4px;
		justify-content: space-between;
	}
	#index .content-group .content-card{
		position: relative;
		width: 385px;
		height: 510px;
		box-sizing: border-box;
		padding: 0 24px;
	}

	#index .content-group .content-card h4{
		font-size: 2.4rem;
		font-weight: normal;
		color: #43396e;
		text-align: center;
		padding-top: 66px;
	}
	#index .content-group .content-card p{
		height: 177px;
		font-family: "Noto Serif JP", serif;
		font-size: 1.6rem;
		line-height: 2.8rem;
		color: #43396e;
		padding: 30px 20px 0;
	}

	.btn{
		position: relative;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 217px;
		height: 58px;
		color: #fff;
		margin: 0 auto;
		z-index: 10;
	}

	.btn::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../img/common/btn_bg.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.btn:hover::before{
		position: absolute;
		content: "";
		opacity: .8;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../img/common/btn_bg.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.btn a{
		position: relative;
		text-decoration: none;
		color: #fff;
		z-index: 10;
	}
	.btn_w{
		position: relative;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 217px;
		height: 58px;
		color: #202a56;
		margin: 0 auto;
		z-index: 10;
	}

	.btn_w::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../img/common/btn_bg-w.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.btn_w:hover::before{
		position: absolute;
		content: "";
		opacity: .8;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../img/common/btn_bg-w.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.btn_w a{
		position: relative;
		text-decoration: none;
		color: #202a56;
		z-index: 10;
	}

	#index .content-group .btn{
		margin-top: 101px;
	}

	#index .content-group .content_top-left{
		background: linear-gradient(315deg, transparent 10px, #eeedfc 10px);
	}
	#index .content-group .content_top-left::after{
		content: "";
		position: absolute;
		width: 332px;
		height: 304px;
		bottom: 0;
		background-image: url(../img/index/bg_top-left.png);
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 5;
		
	}

	#index .content-group .content_top-right{
		background: linear-gradient(45deg, transparent 10px, #eeedfc 10px);
	}
	#index .content-group .content_top-right::after{
		content: "";
		position: absolute;
		width: 224px;
		height: 248px;
		bottom: -4px;
		right: 24px;
		background-image: url(../img/index/bg_top-right.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right;
		z-index: 5;
		
	}
	#index .content-group .content_bottom-left{
		background: linear-gradient(225deg, transparent 10px, #eeedfc 10px);
	}
	#index .content-group .content_bottom-left::after{
		content: "";
		position: absolute;
		width: 290px;
		height: 250px;
		bottom: 0;
		left: 24px;
		background-image: url(../img/index/bg_bottom-left.png);
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 5;
		
	}
	#index .content-group .content_bottom-right{
		background: linear-gradient(135deg, transparent 10px, #eeedfc 10px);
	}
	#index .content-group .content_bottom-right::after{
		content: "";
		position: absolute;
		width: 290px;
		height: 250px;
		bottom: 0;
		background-image: url(../img/index/bg_bottom-right.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 5;
		
	}

}

/* mv_btm-bar */
#index .mv_btm-bar{
	width: 100%;
	height: 80px;
	background-color: #c3ed64;
}

#index .bar_wrap{
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}

#index .bar_wrap .bar-ttl{
	position: relative;
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	color: #202a56;
	height: 80px;
	gap: 106px;
}



#index .bar_wrap .bar-ttl span::before{
	content: "";
	position: absolute;
	bottom: 4px;
	width: 80px;
	height: 108px;
	background-image: url(../img/index/top_mv-btm-bar.png);
	background-size: cover;
	
}
#index .bar_wrap .bar-ttl .btn_w{
	display: none;
}

@media (min-width:600px){
	#index .mv_btm-bar{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80px;
		background-color: #c3ed64;
	}

	#index .bar_wrap{
		display: flex;
		width: 1008px;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
	}

	#index .bar_wrap .bar-ttl{
		position: relative;
		display: flex;
		align-items: center;
		font-size: 1.8rem;
		color: #202a56;
		height: 80px;
		gap: 128px;
	}

	

	#index .bar_wrap .bar-ttl span::before{
		content: "";
		position: absolute;
		bottom: 4px;
		width: 80px;
		height: 108px;
		background-image: url(../img/index/top_mv-btm-bar.png);
		background-size: cover;
		
	}
	#index .bar_wrap .bar-ttl .btn_w{
		display: block;
	}

}
/* 新着情報 */
#newsWrap {
	width: 774px;
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #FFF;
	border: solid 3px #eeebfc;
	box-sizing: border-box;
  }
  

  #newsWrap h2{
	display: block;
	text-align: center;
  }
  #newsWrap:before {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	margin-left: -15px;
	border: 12px solid transparent;
	border-top: 12px solid #fff;
	z-index: 2;
  }
  
  #newsWrap:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -17px;
	border: 14px solid transparent;
	border-top: 14px solid #eeebfc;
	z-index: 1;
  }
  
  .balloon2 p {
	margin: 0;
	padding: 0;
  }
  #newsWrap ul{
	max-height: 200px;
	overflow: auto;
	padding: 0;
  }
  #newsWrap ul li span.up_ymd{
	display: inline-block;
	width: 27%;
	margin: 0;
	padding: 0;
	color: #202a56;
	border-bottom: 2px solid #c3ed64;
	font-family: 'Noto Sans JP';
	font-weight: 700;
  }
  #newsWrap ul li span.title{
	display: inline-block;
	width: 70%;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid #907bed;
  }

  /* Chrome, Edge, Safari 用（WebKit系） */
#newsWrap ul::-webkit-scrollbar {
	width: 8px; /* スクロールバーの幅 */
  }
  
  #newsWrap ul::-webkit-scrollbar-track {
	background: #f0f0f0; /* トラック（背景）の色 */
	border-radius: 10px;
  }
  
  #newsWrap ul::-webkit-scrollbar-thumb {
	background-color: #c3ed64; /* つまみの色 */
	border-radius: 10px;
	border: 2px solid #f0f0f0; /* つまみの余白 */
  }
  
  /* Firefox 対応 */
  #newsWrap ul {
	scrollbar-width: thin;
	scrollbar-color: #c3ed64 #f0f0f0; /* thumb color | track color */
  }
@media print, screen and (min-width: 600px){
	#newsWrap {
		width: 774px;
		position: relative;
		display: inline-block;
		margin: 1.5em 0;
		padding: 7px 10px;
		min-width: 120px;
		max-width: 100%;
		color: #555;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #eeebfc;
		box-sizing: border-box;
	  }
	  

	  #newsWrap h2{
		display: block;
		text-align: center;
	  }
	  #newsWrap:before {
		content: "";
		position: absolute;
		top: -3px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid #fff;
		z-index: 2;
	  }
	  
	  #newsWrap:after {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid #eeebfc;
		z-index: 1;
	  }
	  
	  .balloon2 p {
		margin: 0;
		padding: 0;
	  }
	  #newsWrap ul{
		padding: 0 5rem;
	  }
	  #newsWrap ul li span.up_ymd{
		display: inline-block;
		width: 29%;
		margin: 0;
		padding: 0;
		color: #202a56;
		border-bottom: 2px solid #c3ed64;
		font-family: 'Noto Sans JP';
		font-weight: 700;
	  }
	  #newsWrap ul li span.title{
		display: inline-block;
		width: 70%;
		margin: 0;
		padding: 0;
		border-bottom: 2px solid #907bed;
	  }
}

/*-----------------------------------------notify*/
.border-area{
	justify-content: space-around;
	align-items: center;
	margin: 2rem auto 4rem;
	width: 90%;
}
.border-area .border_area-img{
	width: 40%;
}
.border-area .border_area-img img{
	width: 100%;
}

#notify .border-caption p{
	width: 100%;
	font-size: 2.4rem;
	color: #202a56;
}
#notify .speech-box p{
	display: inline-block;
	padding: 10px 0;
}

.bird-guide{
	justify-content: space-between;
	align-items: center;
	margin: 3rem 0 4rem;
}

.speech-box {
	position: relative;
	box-sizing: border-box;
    display: inline-block;
    box-sizing:border-box;
	background: white;
	border: 4px solid #9c8cff;
	text-align: center;
    padding: .6rem 1.6rem;
	border-radius: 2px;
	height: 80px;
  }

  .speech-box::before {
	content: "";
	position: absolute;
	right: -20px;
	top: 70%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 19px solid #9c8cff;
  }

  .speech-box::after {
	content: "";
	position: absolute;
	right: -13px;
	top: 70%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 19px solid white;
  }
  .speech-box.num1 p::before{
	content: '';
	position: absolute;
	top: -1.4rem;
	left: 0;
	width: 3rem;
	height: 2rem;
	background-image: url(../img/speech-box_num1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
  }
  .speech-box.num2 p::before{
	content: '';
	position: absolute;
	top: -1.4rem;
	left: 0;
	width: 3rem;
	height: 2rem;
	background-image: url(../img/speech-box_num2.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
  }
  .speech-box.num3 p::before{
	content: '';
	position: absolute;
	top: -1.4rem;
	left: 0;
	width: 3rem;
	height: 2rem;
	background-image: url(../img/speech-box_num3.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
  }
  .speech-box p{
	width: auto;
	font-size: 1.7rem;
  }

  .speech-bird{
	width: 60%;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr;
	row-gap: 5%;
	grid-template-areas:
	 "num1"
	 "num2"
	 "num3";
  }
  .speech-box.num1{
	  grid-area: num1;
	}
	.speech-box.num2{
		grid-area: num2;
	}
  .speech-box.num3{
	  grid-area: num3;
	}
	.bird{
		width: 35%;
	}
	.bird img{
		width: 100%;
	}
	@media (min-width:600px){
	  .speech-box p{
		  font-size: 2rem;
		}
	  .speech-bird{
		  width: 80%;
		  grid-template-rows: 100px 60px;
		  grid-template-columns: 47.5% 47.5%;
		  column-gap: 5%;
		  grid-template-areas:
		   "num1 num2"
		   "num1 num2"
		   "num3 num3";
	  }
		.speech-box.num2{
		  margin-top: 10%;
		}
		.speech-box.num3{
		  width: 70%;
		  margin: -5% auto 0;
		}
		.bird{
			width: 17%;
		  }
	}

	.speach-bird{
		grid-area: bird;
	}

.down-arrow{
	width: 68px;
	margin: 0 auto;
}

#emphasis{
	text-align: center;
	margin-bottom: 5rem;
}

#emphasis p{
	position: relative;
	display: inline-block;
	font-size: 1.8rem;
	color: #202a56;
	padding: 1rem 1rem 0;
	z-index: 10;
}

#emphasis p span::after{
	content: '隣接地との確認は欠かせない要件です！';
	position: absolute;
	display: inline-block;
	text-align: center;
	height: 50%;
	width: 100%;
	top: 3rem;
	line-height: 2rem;
	left: 0;
	background-color: #c3ed64;
	color: #c3ed64;
	z-index: -1;
}

#emphasis.area-conflict{
	margin-bottom: 0;
}

#emphasis.area-conflict.pc-only p span::after{
	content: '私達が関わった現場に境界紛争や土地の問題を未来永劫残さない。';
	position: absolute;
	display: inline-block;
	text-align: center;
	height: 50%;
	width: 100%;
	top: 3rem;
	line-height: 2rem;
	left: 0;
	background-color: #c3ed64;
	color: #c3ed64;
	z-index: -1;
}
#emphasis.area-conflict.sp-only p span::after{
	content: 'や土地の問題を未来永劫残さない。';
	position: absolute;
	display: inline-block;
	text-align: center;
	height: 50%;
	width: 100%;
	top: 3rem;
	line-height: 2rem;
	left: 0;
	background-color: #c3ed64;
	color: #c3ed64;
	z-index: -1;
}
#emphasis.policy p span::after{
	content: 'それが一番大事にしている思いです。';
	position: absolute;
	display: inline-block;
	text-align: center;
	height: 50%;
	width: 100%;
	top: 3rem;
	line-height: 2rem;
	left: 0;
	background-color: #c3ed64;
	color: #c3ed64;
	z-index: -1;
}


.border-guide{
	box-sizing: border-box;
	width: 100%;
	padding: 2rem;
	border: 4px solid #eeedfc;
	margin: 2rem 0;
	background-color: #fff;
}


.trouble .trouble-img{
	width: 100%;
	height: auto;
	margin: 2rem auto 4rem;
}
.trouble .trouble-img img{
	width: 100%;
}

@media (min-width:600px){
	#emphasis p{
		font-size: 2.4rem;
		padding: 1rem 2rem 0;
	}
	.trouble .trouble-img{
		width: 384px;
		height: 256px;
	}
}



/*  */

/*-----------------------------------------aboutlhi*/
.chousashi .chousashi_logo-img{
	width: 100%;
	height: auto;
	margin: 0 auto 2rem;
}
@media (min-width:600px){
	.chousashi .chousashi_logo-img{
		width: 349px;
		height: 144px;
	}
}
.chousashi .chousashi_logo-img img{
	width: 100%;
}
.hexagon{
	box-sizing: border-box;
	position: relative;
	padding: 2rem;
	width: 100%;
	margin-bottom: 2rem;
	background-color: #eeedfc;
	clip-path: polygon(0 0, 92% 0, 100% 9%, 100% 100%, 7% 100%, 0 90%);
}
#recruit .hexagon{
	padding: 4.5rem 2rem;
}

.hexagon p{
	font-size: 1.6rem;
	color: #43396e;
}
.hexagon::after{
	content: '“';
	position: absolute;
	top: -3rem;
	left: 1rem;
	font-size: 10rem;
	color: #fff;
}

.chousashi .flex{
	width: 100%;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: space-between;
	margin-top: 2.5rem;
}

.chousashi .flex .border-bird{
	width: 50%;
	margin-top: 2rem;
}
.chousashi .flex .border-bird img{
	width: 100%;
}
.chousashi .flex .speech-box{
	width: 100%;
	height: 160px;
	border-color: #eeebfc;
}
.chousashi .flex .speech-box p{
	font-size: 1.6rem;
	text-align: left;
}
.chousashi .speech-box::before {
	content: "";
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color: #eeebfc transparent transparent transparent; /* 吹き出しの三角形 */
}

.chousashi .speech-box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 97%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color: #fff transparent transparent transparent; /* 吹き出しの三角形 */
}

.difference h2{
	margin: 0;
}

.difference .flex{
	width: 100%;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.difference .flex p{
	display: inline-block;
	width: 100%;
}
.difference .flex .sokuryo-bird{
	margin-top: 2rem;
	width: 35%;
}
  .difference .flex .sokuryo-bird img{
	width: 100%;
}
blockquote{
	margin: 2.5rem 0;
}
figcaption{
	font-size: 1rem;
	color: #202a56;
}
@media (min-width:600px){
	.hexagon{
		clip-path: polygon(0 0, 98% 0, 100% 10%, 100% 100%, 2% 100%, 0 89%);
	}
	blockquote{
		margin: 2rem;
	}
	.chousashi .flex{
		flex-direction: row;
		margin: 0;
	}
	.chousashi .flex .border-bird{
		width: 235px;
		margin: 0;
	}
	.chousashi .flex .speech-box{
		width: 530px;
		height: 110px;
	}
	.chousashi .speech-box::before {
		content: "";
		position: absolute;
		left: -20px;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-right: 19px solid #eeebfc;
		border-left: none;

	}
	
	.chousashi .speech-box::after {
		content: "";
		position: absolute;
		left: -13px;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-right: 19px solid white;
		border-left: none;
	}

	.difference .flex{
		flex-direction: row;
	}
	.difference .flex p{
		width: 80%;
	}
	.difference .flex .sokuryo-bird{
		margin: 0;
		width: 138px;
	}
}
/*-----------------------------------------business*/
#business .content-group{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 4px;
	justify-content: space-between;
	margin-bottom: 5rem;
}
#business .content-group .content-card{
	position: relative;
	width: 385px;
	height: 230px;
	box-sizing: border-box;
	padding: 0 24px;
}

#business .content-group .content-card h4{
	font-size: 2rem;
	font-weight: 700;
	color: #43396e;
	text-align: center;
	padding-top: 2rem;
}
#business .content-group .content-card p{
	font-family: "Noto Serif JP", serif;
	font-size: 1.7rem;
	line-height: 2.8rem;
	color: #43396e;
	padding-top: 1.5rem;
}
#business .content-group .content_top-left{
	background: linear-gradient(315deg, transparent 10px, #eeedfc 10px);
}


#business .content-group .content_top-right{
	background: linear-gradient(45deg, transparent 10px, #eeedfc 10px);
}

#business .content-group .content_bottom-left{
	background: linear-gradient(225deg, transparent 10px, #eeedfc 10px);
}

#business .content-group .content_bottom-right{
	background: linear-gradient(135deg, transparent 10px, #eeedfc 10px);
}

#business .content-group ul{
	padding-top: 1.5rem;
}

#business .content-group ul li{
	display: flex;
	width: 100%;
	align-items: center;
	border-bottom: 2px solid #fff;
	color: #43396e;
	font-size: 1.7rem;
	line-height: 3.5rem;
}

#business .content-group ul li::before{
	content: '';
	display: inline-block;
	width: 2px;
	height: 16px;
	margin-right: 1rem;
	background-color: #43396e;
}


#business .speech-box,
#contact .speech-box{
	position: relative;
	box-sizing: border-box;
    display: inline-block;
    box-sizing:border-box;
	background: white;
	border: 4px solid #9c8cff;
	text-align: center;
    padding: 1.5rem 1rem;
	border-radius: 2px;
	width: 100%;
	height: 120px;
	margin-bottom: 3rem;
  }

  #business .speech-box::before,
  #contact .speech-box::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color: #907bed transparent transparent transparent; /* 吹き出しの三角形 */
  }

  #business .speech-box::after,
  #contact .speech-box::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 95%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color: #fff transparent transparent transparent; /* 吹き出しの三角形 */
  }
  #business .speech-box ul,
  #contact .speech-box ul{
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	text-align: left;
  }
  #business .speech-box ul li,
  #contact .speech-box ul li{
	display: flex;
	align-items: center;
	width: 45%;
	font-size: 1.7rdem;
	font-weight: 600;
	color: #202a56;
  }
  #business .speech-box ul li::before,
  #contact .speech-box ul li::before{
	content: '';
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background-color: #202a56;
	margin-right: .2rem;
  }
  #business .business-p,
  #contact .business-p{
	font-size: 2.2rem;
	text-align: center;
	color: #202a56;
  }

@media (min-width:600px){
   #business .speech-box,
   #contact .speech-box{
	position: relative;
	box-sizing: border-box;
    display: inline-block;
    box-sizing:border-box;
	background: white;
	border: 4px solid #9c8cff;
	text-align: center;
    padding: 1.5rem 11rem;
	border-radius: 2px;
	width: 100%;
	height: 120px;
	margin-bottom: 3rem;
  }

  #business .speech-box ul li,
  #contact .speech-box ul li{
	display: flex;
	align-items: center;
	width: 45%;
	font-size: 2rem;
	font-weight: 600;
	color: #202a56;
  }
  #business .speech-box ul li::before,
  #contact .speech-box ul li::before{
	content: '';
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background-color: #202a56;
	margin-right: .5rem;
  }
  #business .business-p,
  #contact .business-p{
	font-size: 2.2rem;
	text-align: center;
	color: #202a56;
  }
  #business .speech-box ul li,
  #contact .speech-box ul li{
	display: flex;
	align-items: center;
	width: 45%;
	font-size: 2rem;
	font-weight: 600;
	color: #202a56;
  }
}
.container {
	width: min(90%, 760px);
	padding: 40px 0;
	margin-inline: auto;
	/* カウンターをリセット */
	counter-reset: step-index;
  }
  
  .step {
	position: relative;
	padding-bottom: 40px;
	/* カウンターを増やす */
	counter-increment: step-index;
  }
  
  /* 縦線の描画 */
  .step:not(:last-child)::before {
	position: absolute;
	top: 3px;
	left: 1.12rem;
	width: 3px;
	height: 100%;
	content: "";
	background-color: #c3ed64;
  }
  
  .step-title {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 1rem;
	align-items: center;
	font-weight: bold;
	color: #202a56;
  }
  
  .step-title::before {
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	content: '';
	background-color: #fff;
	border-radius: 50%;
	border: 4px solid #c3ed64;
  }
  
  .step-text {
	padding-left: 52px;
	font-size: 16px;
	line-height: 1.5;
	color: #202a56;
  }

/*-----------------------------------------company*/
#company .about table{
	width: 90%;
	margin:0 auto 5rem;
}

#company .about table tr{
	display: flex;
	flex-wrap: wrap;
}

#company .about table th{
	display: flex;
	align-items: center;
	justify-content: left;
	box-sizing: border-box;
	width: 30%;
	height: auto;
	padding: 1rem 0;
	border-bottom: 2px solid #c3ed64;
}

#company .about table td{
	box-sizing: border-box;
	width: 70%;
	height: auto;
	padding: 1rem;
	border-bottom: 2px solid #907bed;
}

#company .about .enkaku{
	margin-bottom: 0;
}

#company .about .enkaku th,
#company .about .enkaku td{
	border: none;
}
#company .about .enkaku th{
	width: 20%;
	font-weight: normal;
}
#company .about .enkaku td{
	width: 80%;
}

/*以下、Googlemapをレスポンシブで埋め込みたい場合のCSS*/
#company .s1 .gmap {
	position: relative;
	height: 0;
	padding-bottom: 75%;/*アス比16：9にしたい場合は56.25%*/
	overflow: hidden;
}
#company .s1 .gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#company .company_img-wrap{
	box-sizing: border-box;
	display: grid;
	width: 90%;
	margin: 0 auto 2rem;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	column-gap: 7px;
	row-gap: 7px;
	grid-template-areas:
	"grid1 grid2"
	"grid1 grid3";
}


#company .company_img-wrap .grid1{
	grid-area: grid1;
}

#company .company_img-wrap .grid1 img{
	width: 100%;
}
#company .company_img-wrap .grid2{
	grid-area: grid2;
}

#company .company_img-wrap .grid2 img{
	width: 100%;
}
#company .company_img-wrap .grid3{
	grid-area: grid3;
}

#company .company_img-wrap .grid3 img{
	width: 100%;
}

#company .years{
	width: 90%;
	display: flex;
	flex-direction: column;
	align-items: normal;
	margin: 0 auto;
}
#company .years h4{
	box-sizing: border-box;
	width: 100%;
	font-size: 2.5rem;
	color: #202a56;
}
#company .years p{
	box-sizing: border-box;
	width: 100%;
	color: #202a56;
}


@media (min-width:600px){
	#company .about table{
		width: 100%;
	}
	#company .company_img-wrap{
		width: 100%;
		column-gap: 18px;
		row-gap: 16px;
	}

	#company .years{
		width: 100%;
		flex-direction: row;
		align-items: center;
		margin: 0;
	}
	#company .years h4{
		box-sizing: border-box;
		width: 40%;
	}
	#company .years p{
		box-sizing: border-box;
		width: 70%;
	}
}


/*GooglemapのCSS*/
#company iframe{
	width: 100%;
	height: 360px;
}
@media (min-width:600px){
	#company iframe{
		width: 774px;
	}
	
}

/* -------------------------------contact */
#contact .contact-message{
	margin: 3rem 0;
}
#contact p.area{
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 3rem;
}
#contact .contact-baner{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
}
#contact .contact-baner .tel{
	width: 439px;
}
#contact .contact-baner .tel img{
	width: 100%;
}
#contact .contact-baner .mail{
	width: 319px;
}
#contact .contact-baner .mail img{
	width: 100%;
}

#contact p.circle{
	display: flex;
	align-items: center;
}

#contact p.circle::before{
	content: '';
	box-sizing: border-box;
	width: 3rem;
	height: 2rem;
	border-radius: 50%;
	background-color: #fff;
	border: 3px solid #c3ed64;
	margin-right: .5rem;
}
@media (min-width:600px){
	#contact .contact-message{
		margin:0 0 3rem;
	}
	#contact p.circle::before{
		width: 2rem;
	}
}

#policy section{
	margin-bottom: 2rem;
}

/* -------------------------------NEWS */

#newsWrap ul li{
	margin-bottom: 2rem;
}

#news .detailUpfile{
	margin: 1rem 0;
}

#news .detailUpfile img{
	max-width: 100%;
}

::-webkit-scrollbar-thumb {
	background-color: #e4f7b9;
	border-radius: 10px;
	border: 2px solid #ffffff; /* つまみの周囲の余白 */
  }