@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

@import url("animation.css");
@import url("sanitize.css");
/* @import url("inview.css"); */
/* @import url("all.min.css"); */
/* @import url("normalize.css"); */

/* @memo */
/* 幅は1200, 900, 600 で統一 */

/* px	画面上の一点を指す絶対単位 */
/* %	親要素に対する相対的なサイズを指定 */
/* em	親要素のfont-sizeを基準に計算される */
/* rem	HTMLルート要素のフォントサイズを基準に計算される */
/* vh・vw	全ビューポート（ブラウザの画面領域）の幅に対する相対単位。1vwはビューポート幅の1%を表す。 */

/* max-width: ◯◯px：画面サイズが◯◯px以下に適用 */
/* min-width: ◯◯px：画面サイズが◯◯px以上に適用 */

/* vh・vw	全ビューポート（ブラウザの画面領域）の幅に対する相対単位。1vwはビューポート幅の1%を表す。 */


:root {
	--page-color: #fff;
	--text-color: #333;
	--base-color: var(--clr-blue);
	--link-color: var(--clr-orange);
	--title-color: #0054d4;
	/* --title-color: #fb7200; */
	--title-bg-color: #eef6ff;
	--header-height: 70px;
	--space-large: 7vw;
	--space-middle: 5vw;
	--space-small: 2vw;

	--clr-indigo: #6610f2;
	--clr-purple: #6f42c1;
	--clr-pink: #e83e8c;
	--clr-red: #dc3545;
	--clr-orange: #fd7200;
	--clr-yellow: #ffc107;
	--clr-green: #28a745;
	--clr-teal: #20c997;
	--clr-cyan: #17a2b8;
	--clr-blue: #0044ff;
	--clr-white: #fff;
	--clr-light: #e3e3e3;
	--clr-gray: #6c757d;
	--clr-dark: #343a40;
	--clr-black: #000;

	--clr-th-gray: #7b7b7b;
	--clr-th-red: #d31729;
	--clr-th-green: #2b9f45;
	--clr-th-blue: #006adb;
	--clr-td-gray: #f8f8f8;
	--clr-td-red: #ffebee;
	--clr-td-green: #e4f6e7;
	--clr-td-blue: #e2f0ff;
	--clr-td-yellow: #ffffe2;

	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;

	--table2_blank_width: 25%;
	--table3_blank_width: 20%;
	--table4_blank_width: 20%;

	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--time-animation: 0.35s;
}

@keyframes org_opa {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* ### 全体の設定 */
body * {
	box-sizing: border-box;
}

html,
body {
	font-size: 14px;
	height: 100%;
}

@media screen and (min-width:900px) {
	html,
	body {
		font-size: 16px;
	}
}

@media screen and (min-width:1200px) {
	html,
	body {
		font-size: 18px;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: none;
	background: var(--clr-white);
	/* background-color: #f7f7f7; */
	color: var(--text-color);
	line-height: 2;
	animation: org_opa var(--time-animation) 0.5s both;
}

/* ### リセット */
h1 {
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
figure,
dd {
	margin: 0;
}
ul {
	list-style: none;
}
nav, ul, li, ol {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
}

img {
	border: none;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	vertical-align: middle;
}

video {
	max-width: 100%;
}

iframe {
	width: 100%;
}

input {
	font-size: 1rem;
}

/* section { overflow-x: hidden; overflow-y: hidden;} */
section+section {
	margin-top: 3rem;
}

main>section:last-child {
	margin-bottom: 3rem;
}

section.y {
	overflow-y: scroll;
}
section.x {
	overflow-x: scroll;
}

/* #menubarのみ別で設定 */
a {
	color: var(--base-color);
	transition: var(--time-animation);
	cursor: pointer;
	/*hoverまでにかける時間。0.3秒*/
	/* border-bottom: 1px solid var(--base-color); */
}

a:hover {
	color: var(--link-color);
}

/* ### html要素 */
/* ------------ mainブロック ------------ */
main {
	/* margin: 0 5%; */
	padding: 15px 5% 0;
	/* padding-top: 15px; */
	position: relative;
}

body:not(.home) main {
	padding-top: var(--header-height);
}

@media screen and (min-width:900px) {
	main {
		padding: 15px 0 0;
		/* padding-top: 15px; */
	}
}

/* ------------ 見出し ------------ */
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.3rem;
}
h4 {
	font-size: 1.1rem;
}

/* main p {
	margin: 0 1rem 0.2rem;
} */

/* ------------ ナビバー ------------ */
header.navi {
	display: flex;
	/*垂直揃えの指定。天地中央に配置されるように*/
	align-items: center;
	padding: 0 30px;
	height: var(--header-height);
	/*スクロールしても動かないようにする指定*/
	position: fixed;
	z-index: 10;
	width: 100%;
	background: linear-gradient(var(--clr-white), rgba(255, 255, 255, 0.7));
	box-shadow: 0 0 3px #555;
	justify-content: space-between;
}

@media screen and (min-width:900px) {
	nav>ul>li:last-child {
		padding-right: 80px;
	}
}

/* ------------ mainimg ------------ */
/* @memo 幅に合わせた固定値に変更 ＞ ％やvwで記述している箇所は元の値 */
/* 元の値では1200pxの設定はない */
#mainimg {
	background: url("../images/mainimg.png") no-repeat center center / cover;
	/*アスペクト比2:3（3÷2=1.5）> 150% */
	/* padding-top: 100%; */
	padding-top: 400px;
	width: 100%;
	position: relative;
	overflow: hidden;
}
	@media screen and (min-width:600px) {
		#mainimg {
			/*アスペクト比16:9（9÷16=0.5624）> 56.25% */
			/* padding-top: 48.0%; */
			padding-top: 600px;
		}
	}
	@media screen and (min-width:1200px) {
		#mainimg {
			padding-top: 800px;
		}
	}

#mainimg > div {
	position: absolute;
	/* top: 46vw; */
	top: 170px;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	left: var(--space-large);
	
}
	@media screen and (min-width:600px) {
		#mainimg > div {
			/* top: 22vw; */
			top: 300px;
		}
	}
	@media screen and (min-width:1200px) {
		#mainimg > div {
			top: 420px;
		}
	}

#mainimg p {margin: 0;}
#mainimg .text {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.8;
	text-align: left;
	/* padding-left: 7vw; */
	padding-left: 10px;
}
	@media screen and (min-width:600px) {
		#mainimg .text {
			/* padding-left: 2vw;
			font-size: 3.6vw; */
			padding-left: 20px;
			font-size: 48px;
		}
	}
	@media screen and (min-width:1200px) {
		#mainimg .text {
			font-size: 60px;
		}
	}

#mainimg .mainimg_btn {
	/* font-size: 1rem; */
	font-weight: 600;
	/* margin-top: 3vw; */
	margin-top: 20px;
	display: flex;
	/* gap: 1rem; */
	gap: 16px;
}

#mainimg .mainimg_btn a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;
	margin-bottom: 10px;
}

#mainimg .mainimg_btn a:hover {
	opacity: 1;
	transform: scale(1.05);
}
	@media screen and (min-width:600px) {
		#miainimg .mainimg_btn {
			font-size: 1.4vw;
		}
	
		#mainimg .mainimg_btn a {
			margin: 0;
			padding: 0.6rem 3rem;
		}
	}

#mainimg .mainimg_btn p:nth-of-type(1) a {
	/* background: var(--clr-cyan); */
	background: rgba(255, 255, 255, 25%);
	color: var(--clr-black) solid 1px;
}

#mainimg .mainimg_btn p:nth-of-type(2) a {
	/* background: var(--clr-black); */
	/* color: var(--clr-cyan); */
	background: rgba(255, 255, 255, 25%);
	color: var(--clr-black);
	/* letter-spacing: 0.1em; */
}

#mainimg .mainimg_btn i {
	transform: scale(1.4);	/*140%に拡大*/
	padding-right: 0.8rem;	/*アイコンとテキストとの間の余白*/
}

/* ------------ input関連 ------------ */
label {
	cursor: pointer;
}
label.calc {
	font-size: large;
}

input.calc {
	font-size: large;
	padding: 0.6rem;
}
input.calc,
input.calc:focus,
input.calc:hover {
	border: none;
	outline: none;
	border-bottom: solid 1px var(--clr-light);
}

input[type="number"].calc {
	width: 105px;
}
input[type="email"].calc {
	width: 400px;
	max-width: calc(100% - 2rem);
}

input[type="number"].calc:hover,
input[type="email"].calc:hover {
	border-bottom: solid 1px var(--clr-black);
}
input[type="number"].calc:focus,
input[type="email"].calc:focus {
	border-bottom: solid 1px var(--base-color);
	/* border: solid 1px var(--clr-black); */
}

.required_style {
	border: 1px solid var(--clr-red);
}
/* ### 単体のスタイル */
/* ------------ コンテンツ（フッター関連「以外」を囲むブロック） ------------ */
#contents {
	flex: 1;
	padding: 10px;
}

@media screen and (min-width:600px) {
	#contents {
		padding: 30px;
	}

	body:not(.home) #contents {
		padding-top: 100px;
	}
}

/* ------------ コンテナ（サイト全体を囲むブロック） ------------ */
#container {
	/* height: 100%; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* max-width: 1800px; */
	/* margin: 0 auto; */
}

/* ロゴ */
#logo img {
	display: block;
	max-height: 88px;
	/* margin: auto; */
}

#logo {
	width: 220px;
}

/* ------------ ナビバーの設定 ------------ */
#menubar a {
	color: var(--clr-dark);
	display: block;
	text-decoration: none;
}

#menubar a:hover {
	color: var(--link-color);
	border-bottom: none;
}

#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
}

#menubar .ddmenu_parent ul {
	display: none;
}

#menubar {
	position: relative;
	z-index: 1;
	font-size: 18px;
	/* 端末サイズで文字サイズが変わるため指定 */
}

#menubar.disp_show {
	display: block;
}

/* ドロップダウンメニューのリンクタグ */
#menubar .ddmenu {
	cursor: default;
}

/* ddmenuを指定しているメニューに矢印アイコンをつける設定 */
a.ddmenu::before {
	content: "\f078";
	/* アイコン名の指定。Font Awesome */
	font-weight: bold;
	/* この設定がないとアイコンが出ない場合あり */
	margin-right: 10px;
	display: inline-block;
	transform: scale(0.7);
	/* 元々のサイズの70%に */
}

/* メニューブロック設定 */
.pc #menubar>nav>ul {
	display: flex;
	margin-left: 30px;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
}

/* 大きな端末用のドロップダウンメニュー */
/* メニュー１個あたりの設定 */
.pc #menubar a {
	padding: 10px;
}

/* 現在表示中（current）のメニュー ：jsで.currentを判定 */
.pc #menubar li.current>a {
	/* color: var(--base-color); */
	color: var(--base-color);
	/*文字色*/
}

/* ドロップダウンメニューブロック全体 */
.pc #menubar ul ul {
	position: absolute;
	z-index: 100;
	border-radius: 7px;
	overflow: hidden;
	text-align: center;
	color: var(--clr-white);
}

/* メニュー１個あたり */
.pc #menubar ul ul a {
	color: inherit;
	background: rgba(0, 0, 0, 0.7);
	padding: 10px 20px;
}
.pc #menubar ul ul a:hover {
	background: rgba(0, 0, 0, 0.6);
	color: var(--link-color);
}

/* 小さな端末用の開閉ブロック */
.mobile #menubar {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	margin-top: var(--header-height);
	background: var(--clr-white);
	text-align: center;
	/* animation: animation1 0.5s both; */
	/* animation.cssのanimation1を実行、0.2sは0.2秒 */
	color: #000;
}

/* メニュー１個あたりの設定 */
.mobile #menubar a {
	color: inherit;
	padding: 10px;
}

.mobile #menubar li {
	border-bottom: 1px solid #999;
	color: #000;
	text-align: left;
	padding-left: 20px;
}
.mobile #menubar li:first-child {
	border-top: 1px solid #999;
}

.mobile #menubar ul>li>ul>li {
	border-bottom: 1px solid #ccc;
	text-align: left;
	padding-left: 26px;
}
.mobile #menubar ul>li>ul>li:last-child {
	border-bottom: none;
}

.mobile #menubar li.current>a {
	color: var(--base-color);
}

/* ------------ ハンバーガーメニュー ------------ */
#menubar_icon {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 20px;
	top: 15px;
	padding: 16px 14px;
	width: 46px;
	height: 46px;
	flex-direction: column;
	/* 子要素（３本バー）を縦並びにする */
	justify-content: space-between;
	/* アイコンをそれぞれ端に寄せる */
}

#menubar_icon.disp_show {
	display: flex;
}

@media screen and (min-width:600px) {
	#menubar_icon {
		right: 40px;
		top: 12px;
	}
}

/* バー１本あたりの設定 */
#menubar_icon span {
	display: block;
	transition: var(--time-animation);
	/*アニメーションにかける時間。0.3秒*/
	border-top: 2px solid #777;
}

/* １本目および２本目のバーの共通設定 */
#menubar_icon.ham span:nth-of-type(1),
#menubar_icon.ham span:nth-of-type(3) {
	transform-origin: center center;
	/*変形の起点をセンターに設定*/
	width: 20px;
	border-top: 2px solid #000;
	/*バーの色を変更*/
}

/* １本目のバー */
#menubar_icon.ham span:nth-of-type(1) {
	transform: rotate(45deg) translate(3.8px, 5px);
	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/* ３本目のバー */
#menubar_icon.ham span:nth-of-type(3) {
	transform: rotate(-45deg) translate(3.8px, -5px);
	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/* ２本目のバー */
#menubar_icon.ham span:nth-of-type(2) {
	display: none;
	/*２本目は使わないので非表示にする*/
}

/* ------------ フッターメニュー ------------ */
footer #footermenu {
	background: #333;
	color: #999;
	font-size: 0.7em;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	/*並びかたの種類の指定*/
	align-items: flex-start;
	/*垂直揃えの指定。上に配置されるように。*/
}

footer #footermenu a {
	text-decoration: none;
	color: #999;
}

footer #footermenu a:hover {
	color: #ccc;
}

footer #footermenu ul {
	margin: 0;
	padding: 0 2px;
	flex: 1;
	list-style: none;
}

footer #footermenu .footer_title {
	font-weight: bold;
	color: #ccc;
	padding-bottom: 5px;
}

/* ------------ フッター設定 ------------ */
footer #copy small {
	font-size: 100%;
}

footer #copy {
	font-size: 0.7rem;
	text-align: center;
	padding: 20px;
	background: #111;
	color: var(--clr-white);
}

footer #copy a {
	text-decoration: none;
	color: var(--clr-white);
}

/* ------------ iframe ------------ */
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 50%;
	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/* ------------ error list ------------ */
.error_list {
	color: var(--clr-red);
}

/* ### ボタン */
/* ------------ pagetopボタン ------------ */
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 20;
	position: fixed;
	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;
	bottom: 20px;
	color: var(--clr-white);
	font-size: 1.5rem;
	background: rgba(0, 0, 0, 0.2);
	width: 60px;
	line-height: 60px;
	/*高さ*/
	border-radius: 50%;
}

/* ------------ 画面右側の側面にある縦長ボタン（オンライン相談） ------------ */
#btn-special {
	padding: 0;
	margin: 0;
}
#btn-special a {
	display: block;
	text-decoration: none;
	position: fixed;
	z-index: 100;
	right: 0px;
	/*右からの配置場所*/
	top: 20vw;
	/*上からの配置場所*/
	writing-mode: vertical-rl;
	text-orientation: upright;
	/*background: linear-gradient(#906f53, #6b5038);背景グラデーション*/
	background: linear-gradient(#ec9347, #d36b12);
	color: #f6ebd2;
	/*文字色*/
	padding: 2rem 1rem;
	/*上下、左右へのボタン内の余白*/
	border-radius: 3px 0px 0px 3px;
	/*角を丸くする指示。左上、右上、右下、左下への順番。*/
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広く*/
}

/*アイコンの下の余白*/
#btn-special i {
	padding-bottom: 1rem;
}

/* ------ input.btn： @remind bootstrapのスタイルが優先されるため調整が必要 ------ */
input.btn {
	background: none;
	border: none;
	outline: none;
}
.btn input {
	background: none;
	border: none;
	outline: none;
}

/* OK */
.btn1 input,
.btn2 input,
.btn3 input,
.btn4 input,
.btn5 input,
.btn6 input {
	background: none;
	border: none;
	outline: none;
}

/* ------ btn1：幅全体に囲む ------ */
.btn1 a {
	display: block;
	text-decoration: none;
	padding: 0.8rem 2rem;
	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;
	/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;
	/*テキストをセンタリング*/
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
}
.btn1 a:hover {
	letter-spacing: 0.2rem;
	/*文字間隔を少し広げる*/
	box-shadow: none;
	/*ボタンの影を消す*/
}

.btn1 a {
	color: var(--clr-dark);
	/*clr--clr-darkを読み込みます。*/
	background: var(--clr-white);
	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/* ------ btn2：丸枠の矢印 ------ */
.btn2 {
	text-align: right;
	/*テキストを右寄せ*/
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広く*/
}
.btn2 a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	position: relative;
	padding-right: 5rem;
	/*矢印のアイコンと重ならないように余白をとる*/
}
/* 矢印のアイコン設定 */
.btn2 a::after {
	content: "";
	background: url("../images/arrow1.svg") no-repeat right center / 100px;
	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	display: block;
	position: absolute;
	right: 0px;
	bottom: -0.5rem;
	width: 50px;
	/*アイコンの幅。ここを変更する場合は、上と下にあるbackgroundの100pxの数値も調整します。*/
	height: 50px;
	/*アイコンの高さ*/
	border-radius: 50%;
	text-align: center;
	transition: var(--time-animation);
	/*hover時に切り替えをなめらかにする*/
	border: 1px solid var(--clr-dark);
}
.btn2 a:hover::after {
	background-color: var(--clr-dark);
	background-position: left center;
	/*矢印画像の入れ替え。画像の左側を読み込みます。*/
}
/*背景色が暗い所で使う場合*/
.btn2.white {
	color: var(--clr-dark);
}
.btn2.white a::after {
	background: url("../images/arrow1_white.svg") no-repeat right center / 100px;
	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	border: 1px solid var(--clr-white);
	/*枠線の幅、線種、色*/
}
.btn2.white a:hover::after {
	background-color: var(--clr-white);
	background-position: left center;
	/*矢印画像の入れ替え。画像の左側を読み込みます。*/
}

/* ------ 中央に線＞＞btn3：左, btn4：内から外, btn5：右、btn6：外から内 ------ */
.btn3, .btn4, .btn5, .btn6, 
.btn3 a, .btn4 a, .btn5 a, .btn6 a {
	color: var(--clr-dark);
}

.btn3, .btn4, .btn5, .btn6 {
	/* display: inline-block; */
	position: relative;
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border: 1px solid var(--clr-dark);
	color: var(--clr-dark);
	background: var(--clr-white);
	cursor: pointer;
}
.btn3::before,
.btn4::before,
.btn4::after,
.btn5::after,
.btn6::before,
.btn6::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 1px;
	background: var(--clr-dark);
	transition: var(--time-animation)
}
.btn3::before,
.btn4::before {
	left: 0;
	top: 24px;
	transform: scale(1, 1);
	transform-origin: left top;
}
.btn4::after,
.btn5::after {
	right: 0;
	top: 24px;
	transform: scale(1, 1);
	transform-origin: right top;
}
.btn3:hover::before,
.btn4:hover::before,
.btn4:hover::after,
.btn5:hover:after {
	transform: scale(0, 1);
	visibility: hidden
}
.btn6::before {
	top: 24px;
	left: 0;
	transform: scale(0, 1);
	transform-origin: left top;
}
.btn6::after {
	top: 24px;
	right: 0;
	transform: scale(0, 1);
	transform-origin: right top;
}

.btn6:hover::before,
.btn6:hover::after {
	transform: scale(1, 1);
}

/* ### リンク */
a .link_ul1 {
	position: relative;
	color: var(--text-color);
}

a .link_ul1::after {
	content: '';
	position: absolute;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: var(--base-color);
	/*アニメーションの指定*/
	transition: all var(--time-animation);
	transform: scale(0, 1);
	/* X方向0、Y方向1 */
	transform-origin: left top;
	/* 左上基点 */
}

a:hover .link_ul1::after {
	transform: scale(1, 1);
	/* X方向にスケール拡大 */
}

/* ### タイトル */
.page_title {
	width: 100%;
	height: 190px
}

.page_title_wrap {
	text-align: center;
	line-height: 210px
}

.page_title .page_title_wrap>h1 {
	font-family: 'Exo-Bold', sans-serif;
	display: inline-block;
	position: relative;
	/* font-size: 48px; */
	font-size: 3rem;
	font-weight: bold;
	color: var(--clr-dark);
	letter-spacing: 5px;
}

.page_title .page_title_wrap>h1::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	/* top: 60px; */
	bottom: -6px;
	width: 60%;
	height: 2px;
	transform: translate(-50%);
	background-color: var(--title-color)
}

/* ### テーブル（ta1）*/
.scroll_table {
	overflow: auto;
}
.scroll_table table {
	width: 1000px;
	white-space: nowrap;
}

@media screen and (min-width:900px) {
	.scroll_table table {
		width: 100%;
	}
}

table.tbl2 .blank {
	width: var(--table2_blank_width);
}
table.tbl3 .blank {
	width: var(--table3_blank_width);
}
table.tbl4 .blank {
	width: var(--table4_blank_width);
}

table.tbl2 .col,
table.tbl2 .col {
	width: calc((100% - var(--table2_blank_width)) / 2);
}
table.tbl3 .col,
table.tbl3 .col {
	width: calc((100% - var(--table3_blank_width)) / 3);
}
table.tbl4 .col,
table.tbl4 .col {
	width: calc((100% - var(--table4_blank_width)) / 4);
}


th,
td {
	padding: 2em .5em;
	text-align: center;
}

.tbl_tile tr {
	border: 3px solid var(--page-color);
}
.tbl_tile th,
.tbl_tile td {
	border-right: 3px solid var(--page-color);
}

.tbl_tile th {
	color: var(--clr-white);
	background: var(--clr-th-gray);
}
.tbl_tile td {
	background-color: var(--clr-td-gray);
}
.tbl_tile td:first-child {
	font-weight: bold;
}

thead th.plan1 {
	background: var(--clr-th-red);
}
thead th.plan2 {
	background: var(--clr-th-green);
}
thead th.plan3 {
	background: var(--clr-th-blue);
}

tbody td.plan1 {
	background: var(--clr-td-red);
}
tbody td.plan2 {
	background: var(--clr-td-green);
}
tbody td.plan3 {
	background: var(--clr-td-blue);
}
tbody td.plan12 {
	background: var(--clr-td-yellow);
}

.tbl caption {
	font-weight: bold;
	/*太字に*/
	padding: 10px 5px;
	background: #777;
	color: var(--clr-white);
	margin-bottom: 15px;
	border-radius: 5px;
}

.tbl {
	border-top: 1px solid #ccc;
	width: 100%;
	margin: 0 auto 2rem;
}

.tbl tr {
	border-bottom: 1px solid #ccc;
}

.tbl th,
.tbl td {
	padding: 10px 5px;
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合がある*/
}

.tbl th {
	width: 30%;
	text-align: left;
	background: #fafafa;
}

@media screen and (min-width:900px) {
	.tbl caption {
		padding: 5px 15px;
	}

	.tbl th,
	.tbl td {
		padding: 20px 15px;
	}

	.tbl th {
		width: 20%;
	}
}

/* ------------ タブメニュー ------------ */
/*タブ切り替え全体のスタイル*/
.tabs {
	padding-bottom: 40px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
}
.tab_title {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	display: flex;
	cursor: pointer;
}
.tab {
	width: calc(100%/2);
	height: 50px;
	border-bottom: 4px solid var(--title-color);
	background-color: var(--clr-td-gray);
	line-height: 50px;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	cursor: pointer;
}
.tab:hover {
	opacity: 0.75;
}
.tab.active {
	background-color: var(--title-color);
	color: var(--clr-white);
}
.tab_content {
	display: none;
}
.tab_content.active {
	display: block;
}
.estimate_div {
	text-align: center;
}
/* ### 見出し */
/* hdr1：smallが下、 hdr2：smallが上、 hdr3：smallが右 */
.heading1,
.heading2,
.heading3 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 1.5rem;
	font-weight: bold;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.heading2 {
	flex-direction: column-reverse;
}

.heading3 {
	padding-left: 0.8rem;
	justify-content: space-between;
	flex-direction: unset;
	border-bottom: 2px solid var(--clr-light);
}

.heading1 .small,
.heading2 .small,
.heading3 .small {
	font-weight: normal;
	opacity: 0.6;
}

.heading3 .small {
	margin: auto 0;
}

/* 中央揃えで太字に色 */
.heading4 {
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	color: var(--title-color);
}

/* 横に強調ライン */
.heading5 {
	border-left: 4px solid var(--title-color);
	padding-left: 10px;
	margin: 1rem 0;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: normal;
}

/* ### 基本形状：スタイル */
/* ------------ 共通 ------------ */
.basic {
	padding: 1rem 2rem;
}

.left_text,
.right_text {
	order: 1;
}

.left_img,
.right_img {
	order: 0;
}

.left_img {
	text-align: right;
}
.right_img {
	text-align: left;
}

.left_img img,
.right_img img {
	max-width: 100%;
	max-height: 100%;
}

@media screen and (min-width:900px) {
	.inner_item {
		margin-left: 7%;
		margin-right: 7%;
	}

	.left_text,
	.right_text {
		width: 50%;
		padding: 0 2em 0 2em;
	}

	.left_text,
	.left_img {
		width: 50%;
		order: 0;
	}

	.right_text,
	.right_img {
		width: 50%;
		order: 1;
	}
}

/* ------------ card: 縦に画像とテキストを並べる ------------ */
.card {
	padding: 20px;
	background: var(--clr-white);
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
	margin-bottom: 2rem;
}

.card .text {
	flex: 1;
}

.card p {
	margin: 0 !important;
	line-height: 1.5;
}

.card h4 {
	margin: 0.5rem 0;
}

.card img {
	margin-bottom: 1rem;
}

.card .text_area,
.card .img_area {
	margin: 0.5rem;
}

/* ------------ box: 上下左右にborderライン ------------ */
.box1,
.box2,
.box3,
.box4 {
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
}

.box1::before,
.box2::before,
.box3::before,
.box4::before,
.box1::after,
.box2::after,
.box3::after,
.box4::after {
	content: "";
	position: absolute;
	border: 0.5px solid var(--text-color);
}

.box1::before,
.box2::before,
.box1::after,
.box2::after {
	width: 40px;
	height: 30px;
}

.box1::before {
	top: 0px;
	left: 0px;
	border-right: none;
	border-bottom: none;
}
.box1::after {
	bottom: 0px;
	right: 0px;
	border-top: none;
	border-left: none;
}

.box2::before {
	top: 0px;
	right: 0px;
	border-bottom: none;
	border-left: none;
}
.box2::after {
	bottom: 0px;
	left: 0px;
	border-top: none;
	border-right: none;
}

.box3::before,
.box3::after {
	width: 40px;
	height: 100%;
}
.box3::before {
	top: 0;
	left: 0;
	border-right: none;
}
.box3::after {
	top: 0;
	right: 0;
	border-left: none;
}

.box4::before,
.box4::after {
	width: 100%;
	height: 40px;
}
.box4::before {
	top: 0;
	left: 0;
	border-bottom: none;
}
.box4::after {
	bottom: 0;
	right: 0;
	border-top: none;
}

.box4::before,
.box4::after {
	width: 100%;
	height: 30px;
}
.box4::before {
	border-bottom: none;
	top: 0;
	left: 0;
}
.box4::after {
	border-top: none;
	bottom: 0;
	left: 0;
}

.box1 h2,
.box2 h2,
.box3 h2,
.box4 h2 {
	margin-top: 0;
}

/* seoと見た目のバランスを整える処理 */
.box1 h3,
.box2 h3,
.box3 h3,
.box4 h3 {
	font-size: 1.1rem;
}

.box1 h4,
.box2 h4,
.box3 h4,
.box4 h4,
.box1 h3,
.box2 h3,
.box3 h3,
.box4 h3 {
	font-weight: bold;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.box1 p,
.box2 p,
.box3 p,
.box4 p {
	margin: 0 0 0.2rem;
}

.box1 .upper,
.box2 .upper,
.box3 .upper,
.box4 .upper {
	flex: 1;
}

.box1 .lower,
.box2 .lower,
.box3 .lower,
.box4 .lower {
	text-align: right;
}

.box1 .lower img,
.box2 .lower img,
.box3 .lower img,
.box4 .lower img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	margin-left: 20px;
}

/* ### 基本形状：画像 */
/* ------------ layer: 画像の上に文字 ------------ */
.img_layer {
	position: relative;
}

.img_layer p {
	/*重ねたい子要素にabsolute*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--clr-white);
	font-size: 1.8rem;
	margin: 0 !important;
	padding: 0 !important;
}

/* ------------ circle: 丸の画像 ------------ */
img.circle {
	aspect-ratio: 1 / 1;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

img.rectangle {
	/* aspect-ratio: 1 / 1; */
	width: 100%;
	height: 300px;
	object-fit: cover;
}

/* ------------ hover時に拡大 ------------ */
.img_zoom img {
	transform: scale(1);
	transition: var(--time-animation) ease-in-out;
}

.img_zoom a img:hover {
	transform: scale(1.12);
}

.img_zoom a {
	display: block;
	/* line-height: 0; */
	/*行の高さを0にする*/
	overflow: hidden;
	/*拡大してはみ出る要素を隠す*/
	text-decoration: none;
}


/* ------------ ddouble: 画像の2つ並べ（4:3以下のアスペクト比に対応） ------------ */
.img_double1,
.img_double2 {
	position: relative;
	margin-bottom: 5vw;
}

.img_double1 img:nth-of-type(1) {
	position: relative;
	left: -5vw;
	width: 60%;
}

.img_double1 img:nth-of-type(2) {
	/* position: absolute; */
	position: absolute;
	width: 40%;
	top: 25vw;
	right: 3vw;
}

.img_double2 img:nth-of-type(1) {
	/* position: absolute; */
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: 3vw;
	width: 60%;
}
.img_double2 img:nth-of-type(2) {
	/* position: relative; */
	position: absolute;
	width: 40%;
	top: 25vw;
	left: 2vw;
}

@media screen and (min-width:900px) {
	.img_double1,
	.img_double2 {
		margin-bottom: 0;
	}

	.img_double1 img:nth-of-type(2) {
		top: 12vw;
	}

	.img_double2 img:nth-of-type(2) {
		top: 12vw;
	}

	div:has(.img_double1),
	div:has(.img_double2) {
		margin-bottom: 7vw;
	}
}

/* ------------ layer: 画像の上に文字 ------------ */
.layer_div>a {
	text-decoration: none;
	display: block;
}

.layer_div .layer {
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: var(--clr-white);
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	padding: 2rem 2rem;
}

@media screen and (min-width:900px) {
	.layer_div .layer {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.layer_div>a .layer {
		/* height: 100%; */
		min-height: 300px;
	}
}

/* アニメーション */
.layer_div .layer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	transition: transform var(--time-animation) 0.1s;
	/* 速度0.3秒、待機時間0.1秒 */
	z-index: 0;
}

.layer_div .layer:hover::before {
	transform: translateY(100%);
	/* マウスオンで半透明の黒を枠外へ出す、-100%にすると逆に移動 */
}

.layer_div .layer .text {
	position: relative;
	z-index: 1;
	font-size: 0.85rem;
}

.layer_div .layer h2,
.layer_div .layer h3,
.layer_div .layer h4 {
	font-size: 3rem;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1rem;
}

.layer_div .layer .small {
	font-size: 0.4em !important;
}

/* 背景画像 */
/* background-size（/の後ろ）
cover	要素を完全に覆うように画像を拡大縮小（アスペクト比維持）
contain	要素内に画像全体が収まるように拡大縮小（アスペクト比維持）
auto	画像の元のサイズを維持。
数値/%	具体的なサイズで指定。幅だけ指定するとアスペクト比維持、幅と高さを指定するとアスペクト比は無視。
 */
.bg_image1 {
	background: url("../images/contact.jpg") no-repeat center center / cover;
}
.bg_image2 {
	background: url("../images/faq.jpg") no-repeat center center / cover;
}
.bg_image_about {
	background: url("../images/bg_about.png") no-repeat center center / cover;
}

/* ### 大枠 */
/* ------------「お知らせ」ブロック ------------ */
.area_list {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	/*折り返す指定*/
	padding: 0 1rem;
}

/*dt(日付)設定*/
.area_list dt {
	width: 100%;
	padding: 5px 0;
}

/*dd(記事)設定*/
.area_list dd {
	padding: 0 0 10px 0;
	width: 100%;
	border-bottom: 1px dashed var(--clr-light);
}

@media screen and (min-width:900px) {
	.area_list dt,
	.area_list dd {
		padding: 15px 0;
		border-bottom: 1px dashed var(--clr-light);
	}

	.area_list dt {
		width: 14em;
		display: flex;
	}

	.area_list dd {
		width: calc(100% - 14em);
	}
}

/* ------ FAQ ------ */
/*FAQボックス全体*/
.faq {
	padding: 0 1rem;
}

/* 質問 */
.faq dt {
	border-radius: 3px;
	margin-bottom: 1rem;
	background: var(--clr-white);
	border: 1px solid #ccc;
	text-indent: -2rem;
	/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています*/
	padding: 5px 1em 5px 3em;
}

/* アイコン（Font Awesome） */
.faq dt::before {
	font-family: "Font Awesome 5 Free";
	content: "\f059";
	/*アイコンのコード*/
	color: var(--base-color);
	padding-right: 1rem;
}

/* 回答 */
.faq dd {
	padding: 5px 1rem 30px 3rem;
}

.openclose {
	cursor: pointer;
}

/* ------------ 左右寄せ ------------ */
@media screen and (min-width:900px) {
	.left_side,
	.right_side {
		width: 72%;
		padding: 1rem;
	}

	.left_side {
		margin-right: auto;
	}

	.right_side {
		margin-left: auto;
	}
}

/* ------------ 横並び ------------ */
.area_row {
	display: flex;
	flex-direction: column;
	gap: 5vw;
}

@media screen and (min-width:900px) {
	.area_row {
		display: flex;
		gap: 2vw;
		flex-direction: unset;
	}

	/* 3の倍数目のボックスの右側のマージンをなくす */
	/* .area_row .card:nth-of-type(3n) {
		margin-right: 0;
	} */
}

/* ------------ ３列ボックス ------------ */
@media screen and (min-width:900px) {
	.area_three {
		display: flex;
		flex-wrap: wrap;
	}

	.area_three>div {
		width: 32%;
		flex-wrap: wrap;
		margin-right: 2%;
	}
	.area_three>div:nth-of-type(3n) {
		margin-right: 0;
	}
}

/* ------------ ２列ボックス ------------ */
.area_twin {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	margin-bottom: 3rem;
}

@media screen and (min-width:900px) {
	.area_twin {
		display: flex;
		flex-direction: unset;
		margin-bottom: 0;
	}

	.area_twin.twin_center {
		align-items: center;
	}

	/* .area_twin > * { flex: 1; } */
}

/* ------------ 画像とテキストを段違いで表示 ------------ */
.area_overlap {
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.area_overlap h2,
.area_overlap h3,
.area_overlap h4 {
	margin: 0 0 0.2em 0;
}

.area_overlap p {
	margin: 0 0 0.2em 0;
}

.area_overlap img {
	width: 100%;
}

.area_overlap .left_text,
.area_overlap .right_text {
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
	/* background: var(--clr-light); */
}

@media screen and (min-width:900px) {
	.area_overlap {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.area_overlap .left_text,
	.area_overlap .left_img {
		position: relative;
		width: 50%;
		left: 2em;
	}

	.area_overlap .right_text,
	.area_overlap .right_img {
		position: relative;
		width: 50%;
		right: 2em;
	}

	.area_overlap .left_text,
	.area_overlap .right_text {
		z-index: 1;
		padding: 1.5em;
		top: 3rem;
	}
	.area_overlap .left_text {
		padding-right: 2.5em;
	}
	.area_overlap .right_text {
		padding-left: 2.5em;
	}

	.area_overlap .left_img,
	.area_overlap .right_img {
		z-index: 2;
		padding: 1.5em 0;
		top: -2rem;
	}
	.area_overlap .left_img {
		padding-right: 2.5em;
	}
	.area_overlap .right_img {
		padding-left: 2.5em;
	}
}

/* ------------ holizon_scroll ------------ */
/* .area_holizon_scroll * {margin: 0; padding: 0;} */

/*横スクロールブロック全体*/
.area_holizon_scroll {
	display: flex;
	overflow-x: scroll;
	/* firefox用 */
	scrollbar-width: auto;
	scroll-snap-type: x mandatory;
	/* スナップスクロールの有効化 */
	padding-bottom: 3vw;
}

/* Chrome, Safari, Edge用 */
.area_holizon_scroll::-webkit-scrollbar {
	display: auto;
}

.area_holizon_scroll div {
	width: 60%;
	margin: 1rem;
}

@media screen and (min-width:900px) {
	.area_holizon_scroll div {
		width: 30%;
	}
}

/* ------------ 2カラム ------------ */
/* .main要素 */
.column .main {
	margin-bottom: 30px;
}

@media screen and (min-width:900px) {
	/*カラムで使う為の指定*/
	.column {
		display: flex;
		justify-content: space-between;
		/*並びかたの種類の指定*/
	}

	.column .main {
		margin-bottom: 0;
		order: 2;
		/* 並び順。数字の小さい順番に表示される */
		width: calc(100% - 260px);
		/* 280pxは下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したもの */
	}

	/* 2カラムの中にある.sub要素 */
	.column .sub {
		order: 1;
		/* 並び順。数字の小さい順番に表示される */
		width: 230px;
	}
}

/*ブロック内のh3タグ*/
.sub h3::before {
	border: none;
	padding: 0;
}

/*ブロック内のh3タグ*/
.sub h3 {
	margin: 0;
	border: none;
	font-weight: normal;
	font-size: 1.1rem;
	background: #999;
	box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.6) inset;
	color: var(--clr-white);
	text-align: center;
	padding: 0.5em;
}

.sub h3 a {
	color: inherit;
}

/*サブメニューブロック全体*/
.sub .submenu {
	padding: 0;
	margin: 0 0 1rem;
}

/*メニュー１個あたり*/
.sub .submenu li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sub .submenu a {
	display: block;
	text-decoration: none;
	background: var(--clr-white);
	padding: 0.2rem 1rem;
}

/*アイコン（Font Awesome）*/
.sub .submenu a::before {
	transition: var(--time-animation);
	font-family: "Font Awesome 5 Free";
	/*Font Awesomeを使う指定*/
	content: "\f0da";
	/*アイコン名の指定。Font Awesome*/
	color: #ABABAB;
	/*アイコンの色*/
	padding-right: 0.8em;
	/*アイコンとテキストの間の余白*/
	font-weight: bold;
	/*この設定がないとアイコンが出ない場合あり*/
}

.sub .submenu a:hover::before {
	color: #666;
}

/* 2カラムのsubブロックでのみ使用 */
.sub .menu_box {
	background: rgba(0, 0, 0, 0.05);
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 1rem;
}

/* menu_box内で使った場合、下のマージンをなくす */
.sub .menu_box .submenu {
	margin-bottom: 0;
}

/* ### その他 */
.loop_area {
	width: 100%;
	overflow: hidden;
}

@keyframes loop_animation_right {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}

@keyframes loop_animation_left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.loop_right {
	z-index: -1;
	animation: loop_animation_right 3s linear infinite;
	width: 100%;
}

.loop_left {
	z-index: -1;
	animation: loop_animation_left 3s linear infinite;
	width: 100%;
}

/* deco_textとサイズ以外は同じ、整理しやすいように別で書いてる */
.loop_text {
	z-index: -1;
	position: absolute;
	color: var(--clr-light);
	font-size: 14vw;
}

/* deco text */
/* ボックス上部の大きな装飾テキス */
.deco_text {
	z-index: -1;
	position: absolute;
	color: var(--clr-light);
	font-size: 7vw;
}

.deco_about {
	font-size: 14vw;
	top: -4vw;
	right: 1vw;
}
@media screen and (min-width:900px) {
	.deco_about {
		top: -8vw;
		right: -24vw;
	}
}

.deco_heading3 {
	font-size: 10vw;
	top: -11vw;
	right: 3vw;
}

.deco_top {
	top: -5vw;
}
.deco_bottom {
	top: 12vw;
}
.deco_left {
	left: 0;
}
.deco_right {
	right: 0;
}


.disp_none {
	display: none;
}
.disp_show {
	display: block;
}

.main_text {
	display: block;
	font-size: 3rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.sub_text {
	font-size: 0.9rem;
	opacity: 0.6;
	letter-spacing: 0.1rem;
}

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

.nomal {
	font-weight: normal !important;
}
.bold {
	font-weight: bold !important;
}
.bolder {
	font-weight: bolder !important;
}
.light {
	font-weight: lighter !important;
}

.center {
	text-align: center !important;
}
.right {
	text-align: right !important;
}
.left {
	text-align: left !important;
}

.xxl {
	font-size: 3em !important;
}
.xl {
	font-size: 2.4em !important;
}
.large {
	font-size: 1.7em !important;
}
.middle {
	font-size: 1.2em !important;
}
.small {
	font-size: 0.7em !important;
}

.mw_900 {
	max-width: 900px;
}
.mw_1000 {
	max-width: 1000px;
}
.mw_1100 {
	max-width: 1100px;
}
.mw_1200 {
	max-width: 1200px;
}
.mw_1300 {
	max-width: 1300px;
}
.mw_1400 {
	max-width: 1400px;
}
.mw_1500 {
	max-width: 1500px;
}
.mw_1600 {
	max-width: 1600px;
}

@media screen and (min-width:900px) {
	/* .wl, .wm, .ws { min-width: 900px;} */
	.wl { width: 95%; }
	.wm { width: 90%; }
	.ws { width: 85%; }
}

@media screen and (min-width:1200px) {
	/* .wl, .wm, .ws { min-width: 1200px;} */
	.wl { width: 90%; }
	.wm { width: 85%; }
	.ws { width: 80%; }
}

.look {
	display: inline-block;
	padding: 0px 10px;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all;
}

.none  { display: none !important; }
.block { display: block !important; }
.flex  { display: flex !important; }

p.img {
	margin: 0 0 1rem !important;
}

/* バッヂ、newのspanタグ（.area_list dt spanに毎回.badgeを書く手間を省くため追記）*/
.area_list dt span {
	display: inline-block;
	width: 7em;
	background: #999;
	color: var(--clr-white);
	font-size: 0.8em;
	text-align: center;
	margin: 0 1em;
	align-self: flex-start;
	/*高さを間延びさせない指定*/
	line-height: 1.8;
	/*行間を少し狭く*/
	position: relative;
	/* top: 0.4em; */
	border-radius: 5px;
}

@media screen and (min-width:900px) {
	.badge,
	.area_list dt span {
		top: 0.4em;
	}
}

/* 文字に下線 */
.text_line {
	display: inline-block;
	position: relative;
	bottom: -2px;
	border-bottom: 2px solid var(--base-color);
}

/* marginの範囲内に下線 */
.margin_line {
	position: relative;
	bottom: -2px;
	border-bottom: 2px solid var(--clr-light);
}

.text_indigo { color: var(--clr-indigo) !important; }
.text_purple { color: var(--clr-purple) !important; }
.text_pink   { color: var(--clr-pink)   !important; }
.text_red    { color: var(--clr-red)    !important; }
.text_orange { color: var(--clr-orange) !important; }
.text_yellow { color: var(--clr-yellow) !important; }
.text_green  { color: var(--clr-green)  !important; }
.text_teal   { color: var(--clr-teal)   !important; }
.text_cyan   { color: var(--clr-cyan)   !important; }
.text_blue   { color: var(--clr-blue)   !important; }
.text_white  { color: var(--clr-white)  !important; }
.text_light  { color: var(--clr-light)  !important; }
.text_gray   { color: var(--clr-gray)   !important; }
.text_dark   { color: var(--clr-dark)   !important; }
.text_brack  { color: var(--clr-black)  !important; }

.ul_indigo {
	display: inline-block;
	border-bottom: 1px solid var(--clr-indigo) !important;
}
.ul_purple {
	display: inline-block;
	border-bottom: 1px solid var(--clr-purple) !important;
}
.ul_pink {
	display: inline-block;
	border-bottom: 1px solid var(--clr-pink) !important;
}
.ul_red {
	display: inline-block;
	border-bottom: 1px solid var(--clr-red) !important;
}
.ul_orange {
	display: inline-block;
	border-bottom: 1px solid var(--clr-orange) !important;
}
.ul_yellow {
	display: inline-block;
	border-bottom: 1px solid var(--clr-yellow) !important;
}
.ul_green {
	display: inline-block;
	border-bottom: 1px solid var(--clr-green) !important;
}
.ul_teal {
	display: inline-block;
	border-bottom: 1px solid var(--clr-teal) !important;
}
.ul_cyan {
	display: inline-block;
	border-bottom: 1px solid var(--clr-cyan) !important;
}
.ul_blue {
	display: inline-block;
	border-bottom: 1px solid var(--clr-blue) !important;
}
.ul_white {
	display: inline-block;
	border-bottom: 1px solid var(--clr-white) !important;
}
.ul_light {
	display: inline-block;
	border-bottom: 1px solid var(--clr-light) !important;
}
.ul_gray {
	display: inline-block;
	border-bottom: 1px solid var(--clr-gray) !important;
}
.ul_dark {
	display: inline-block;
	border-bottom: 1px solid var(--clr-dark) !important;
}
.ul_brack {
	display: inline-block;
	border-bottom: 1px solid var(--clr-black) !important;
}

.bg_none   { background: none !important; }
.bg_indigo { background: var(--clr-indigo) !important; }
.bg_purple { background: var(--clr-purple) !important; }
.bg_pink   { background: var(--clr-pink)   !important; }
.bg_red    { background: var(--clr-red)    !important; }
.bg_orange { background: var(--clr-orange) !important; }
.bg_yellow { background: var(--clr-yellow) !important; }
.bg_green  { background: var(--clr-green)  !important; }
.bg_teal   { background: var(--clr-teal)   !important; }
.bg_cyan   { background: var(--clr-cyan)   !important; }
.bg_blue   { background: var(--clr-blue)   !important; }
.bg_white  { background: var(--clr-white)  !important; }
.bg_light  { background: var(--clr-light)  !important; }
.bg_gray   { background: var(--clr-gray)   !important; }
.bg_dark   { background: var(--clr-dark)   !important; }
.bg_brack  { background: var(--clr-black)  !important; }

.bg_rg {
	background: rgb(255, 255, 240);
}
.bg_gb {
	background: rgb(240, 255, 255);
}

.ol_indigo { border: 1px solid var(--clr-indigo) !important; }
.ol_purple { border: 1px solid var(--clr-purple) !important; }
.ol_pink   { border: 1px solid var(--clr-pink)   !important; }
.ol_red    { border: 1px solid var(--clr-red)    !important; }
.ol_orange { border: 1px solid var(--clr-orange) !important; }
.ol_yellow { border: 1px solid var(--clr-yellow) !important; }
.ol_green  { border: 1px solid var(--clr-green)  !important; }
.ol_teal   { border: 1px solid var(--clr-teal)   !important; }
.ol_cyan   { border: 1px solid var(--clr-cyan)   !important; }
.ol_blue   { border: 1px solid var(--clr-blue)   !important; }
.ol_white  { border: 1px solid var(--clr-white)  !important; }
.ol_light  { border: 1px solid var(--clr-light)  !important; }
.ol_gray   { border: 1px solid var(--clr-gray)   !important; }
.ol_dark   { border: 1px solid var(--clr-dark)   !important; }
.ol_brack  { border: 1px solid var(--clr-black)  !important; }

.bg_radius1 {
	border-radius: 20vw 0 20vw 0;
}
.bg_radius2 {
	border-radius: 0 20vw 0 20vw;
}

#send_system_div,
#send_hp_div {
	display: none;
}

/* 背景にグラデーション色の飾り */
/* position:absoluteは表示からの絶対値 */
.bg_deco {
	z-index: -1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 150px;
	height: 150px;
}

@media screen and (min-width:900px) {
	.bg_deco {
		width: 300px;
		height: 300px;
	}
}

/* service/hp */
.deco_sv_hp1 {
	top: 6.0%;
	left: 3.0%;
	background: radial-gradient(circle at center, #c3d5fe 0%, #fff 50%);
}
.deco_sv_hp2 {
	top: 15.0%;
	right: 1.5%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
	width: 300px;
	height: 300px;
}
.deco_sv_hp3 {
	top: 25.0%;
	right: 52.0%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
}
.deco_sv_hp4 {
	top: 35.0%;
	right: 20.0%;
 	background: radial-gradient(circle at center, #c3d5fe 0%, #fff 50%);
}
.deco_sv_hp5 {
	top: 43.0%;
	right: 55.0%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
	width: 300px;
	height: 300px;
}
.deco_sv_hp6 {
	top: 58.0%;
	right: 10.0%;
	background: radial-gradient(circle at center, #c3d5fe 0%, #fff 50%);
}
.deco_sv_hp7 {
	top: 66.0%;
	right: 30.0%;
	background: radial-gradient(circle at center, #c3d5fe 0%, #fff 50%);
	width: 300px;
	height: 300px;
}

@media screen and (min-width:900px) {
	.deco_sv_hp1 {
		top: 2.5%;
		left: 5.0%;
	}
	.deco_sv_hp3 {
		top: 22.0%;
	}
	.deco_sv_hp4 {
		top: 30.0%;
	}
	.deco_sv_hp5 {
		top: 46.0%;
	}
	.deco_sv_hp7 {
		top: 68.0%;
	}
	.deco_sv_hp2, .deco_sv_hp5, .deco_sv_hp7 {
		width: 400px;
		height: 400px;
	}
}

/* service/system */
.deco_sv_system1 {
	top: 2.5%;
	left: 10.0%;
	background: rgba(120, 222, 255, 10%);
	transform: rotate(66deg);
	width: 200px;
	height: 200px;
}
.deco_sv_system2 {
	top: 21.0%;
	right: 8.0%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
	width: 300px;
	height: 300px;
}
.deco_sv_system3 {
	top: 36.0%;
	right: 55.0%;
	background: radial-gradient(circle at center, #c3d5fe 0%, #fff 50%);
}
.deco_sv_system4 {
	top: 52.0%;
	right: 18.0%;
	background: rgba(190, 190, 255, 10%);
	transform: rotate(45deg);
	width: 150px;
	height: 150px;
}
.deco_sv_system5 {
	top: 60%;
	right: 32.0%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
}

@media screen and (min-width:900px) {
	.deco_sv_system2 {
		width: 400px;
		height: 400px;
	}
	.deco_sv_system4 {
		top: 49.0%;
	}
}

/* service/it support */
.deco_sv_support1 {
	top: 4.0%;
	right: 15.0%;
	background: rgba(120, 222, 255, 10%);
	transform: rotate(45deg);
	width: 200px;
	height: 200px;
}
.deco_sv_support2 {
	top: 20.0%;
	right: 20.0%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
	width: 300px;
	height: 300px;
}
.deco_sv_support3 {
	top: 38.0%;
	right: 52.0%;
	background: radial-gradient(circle at center, #c3d5fe 0%, #fff 50%);
}
.deco_sv_support4 {
	top: 52.0%;
	right: 36.0%;
	background: rgba(190, 190, 255, 10%);
	transform: rotate(22deg);
	width: 150px;
	height: 150px;
}
.deco_sv_support5 {
	top: 60%;
	right: 7.0%;
	background: radial-gradient(circle at center, #ADD8E6 0%, #fff 50%);
}

@media screen and (min-width:900px) {
	.deco_sv_support2 {
		right: 28.0%;
		width: 400px;
		height: 400px;
	}
}

/* 背景ボカシのサンプル */
.bg_sample {
	z-index: -5;
	/* background: linear-gradient(to left, #fff, #ADD8E6, #FFFFFF); */
	/* background: radial-gradient(circle at 70%, #ADD8E6 0%, #fff 50%, #fff 75%, #ADD8E6 75%); */
	/* background: radial-gradient(circle at 72%, #ADD8E6 0%, #fff 50%); */
	background-image:
    radial-gradient(at 0 0, #fff 60%, transparent 90%),
    radial-gradient(at 110% 20%, #ADD8E6 20%, transparent 30%),
    radial-gradient(at 100% 100%, #c3d5fe, transparent);
	background-attachment: fixed;
  /* background: linear-gradient(to right, #FFFFFF 0%, #ADD8E6 100%); */
}