@charset "utf-8";
/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/ :root {
	--base-color: #fff; /*テンプレートの土台となる色（主に背景カラー）*/
	--base-inverse-color: rgb(10, 47, 96); /*上のbase-colorの対となる色（主にテキストカラー）*/
	--primary-color: rgb(10, 47, 96); /*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: rgb(10, 47, 96); /*上のprimary-colorの対となる色*/
	--space-large: 6vw; /*主に余白の一括管理用。画面幅100%＝100vwです。*/
}
/*fadeInのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*fadeOutのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}
/*全体の設定
---------------------------------------------------------------------------*/
body * {
	box-sizing: border-box;
}
html, body {
	font-size: 13px; /*基準となるフォントサイズ*/
	height: 100%;
}
/*画面幅1200px以上の追加指定*/
@media screen and (min-width:1000px) {
	html, body {
		font-size: 14px;
	}
} /*追加指定ここまで*/
/*画面幅1600px以上の追加指定*/
@media screen and (min-width:1600px) {
	html, body {
		font-size: 1vw;
	}
} /*追加指定ここまで*/
body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; /*フォント種類*/
	font-optical-sizing: auto;
	font-weight: 500;
	-webkit-text-size-adjust: none;
	background: var(--base-color); /*varは背景色のことで冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color); /*文字色。冒頭で指定しているbase-inverse-colorを読み込みます。*/
	line-height: 2; /*行間*/
}
/*リセット他*/
figure {
	margin: 0;
}
dd {
	margin: 0;
}
nav ul {
	list-style: none;
}
nav, ul, li, ol {
	margin: 0;
	padding: 0;
}
section li {
	margin-left: 1rem;
}
/*table全般の設定*/
table {
	border-collapse: collapse;
}
/*画像全般の設定*/
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
/*videoタグ*/
video {
	max-width: 100%;
}
/*iframeタグ*/
iframe {
	width: 100%;
}
/*input*/
input {
	font-size: 1rem;
}
/*section*/
section {
	overflow-x: hidden;
	padding: var(--space-large);
}

.txt_yellow {
	color: #FFEB5E;
}
.sp {
	display: none;
}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
	text-decoration: none;
	color: #3799F7;
}
/*マウスオン時*/
a:hover {
	text-decoration: none; /*下線を消す*/
	opacity: 0.9; /*色を90%だけ出す*/
}
/*loading（ローディング）
---------------------------------------------------------------------------*/
@keyframes progress {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}
/*ロゴ画像*/
#loading img {
	width: 300px; /*画像の幅*/
	margin-bottom: 20px; /*ローディングバーとの間のスペース調整*/
}
/*ローディングブロック*/
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-color); /*背景色*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	animation: fadeOut 1s ease 2s forwards;
}
/*プログレスバーの土台*/
.progress-container {
	width: 200px; /*幅。お好みで。*/
	height: 4px; /*高さ。お好みで。*/
	border-radius: 2px; /*角をほんの少し丸くする*/
	background: #fff; /*バーのベースカラー*/
	overflow: hidden;
}
/*プログレスバー*/
.progress-bar {
	width: 100%;
	height: 100%;
	background: #000; /*進行中のバーの色*/
	animation: progress 2s linear; /*#loadingのanimation時間に合わせて2秒に設定*/
	transform-origin: left;
}
/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px; /*ヘッダーの高さ*/
}
/*ロゴ画像*/
#logo img {
	display: block;
	width: 150px; /*ロゴの幅*/
}
#logo a {
	text-decoration: none;
}
/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {
	/*ロゴ画像*/
	#logo img {
		width: 300px; /*ロゴの幅*/
	}
} /*追加指定ここまで*/
/*コンテンツごとのヘッダーロゴ　、メニューのフォントカラー
---------------------------------------------------------------------------*/
#logo {
	margin: 0;
	padding: 0;
	padding-left: 3vw; /*ロゴの左側に空ける余白*/
	color: #233142;
}
#index #logo, #service #logo {
	color: #fff; /*トップページのフォントカラー*/
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-style: normal;
}
/*メニュー１個あたりの設定*/
header nav li a {
	display: block;
	text-decoration: none;
	font-size: 1.4rem; /*文字サイズ90%*/
	padding: 0.5rem 3rem; /*メニュー内の余白。上下、左右へ。*/
	color: #233142;
}
/*トップページのフォントカラー*/
#index header nav li a, #service header nav li a {
	color: #fff;
}
/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {
	header {
		height: 90px; /*ヘッダーの高さ*/
		width: 90%;
		left: 5%;
	}
	#index header, #service header {
		height: 90px; /*トップページのラインカラー*/
		padding-top: 100px;
	}
} /*追加指定ここまで*/
/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
header nav ul {
	display: none;
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin-right: 100px; /*ハンバーガーアイコンに重ならないように余白*/
		display: flex; /*横並びにする*/
		justify-content: center;
	}
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem; /*右に空ける余白*/
	}
} /*追加設定ここまで*/
/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul, .small-screen #menubar ul ul {
	animation: fadeIn 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}
/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;
	z-index: 100;
	margin-left: 1rem;
}
/*メニュー１個あたりの設定*/
header nav ul ul a {
	padding: 0.3em 1em; /*上下、左右へのメニュー内の余白*/
	margin-top: 4px; /*上に空けるスペース。ドロップダウン同士の隙間。*/
	background: var(--base-color); /*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color); /*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color); /*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 3px; /*角を少し丸くする指定*/
}
@media screen and (max-width: 699px) {
	header #logo {
		margin: 50px auto 0;
	}
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {
	display: none;
}
#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menubar a {
	display: block;
	text-decoration: none;
}
/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {
	display: block;
}
.small-screen #menubar.display-block {
	display: block;
}
/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {
	display: none;
}
/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {
	display: none;
}
/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free"; /*Font Awesomeを使う指示*/
	content: "\f078"; /*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em; /*アイコンとテキストとの間に空けるスペース*/
}
/*メニューブロック内のロゴ画像の幅*/
#menubar .logo {
	width: 200px;
}
/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {
		right: -100vw;
	}
	100% {
		right: 0px;
	}
}
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;
	overflow: auto;
	z-index: 100;
	right: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 10vw 50px; /*ブロック内の余白。上、左右、下への順番。*/
	background: var(--primary-color); /*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	animation: animation1 0.2s both; /*animation1を実行する。0.2sは0.2秒の事。*/
}
/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	margin: 1rem 0; /*メニューの外側に空けるスペース。上下、左右への順番。*/
}
.small-screen #menubar a {
	border-radius: 5px; /*角を丸くする指定*/
	padding: 1rem 2rem; /*メニュー内の余白。上下、左右へ。*/
	background: var(--base-inverse-color); /*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color); /*背景色。冒頭のbase-colorを読み込みます。*/
}
/*子メニュー*/
.small-screen #menubar ul ul a {
	background: var(--base-color); /*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color); /*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color); /*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	margin-left: 2rem; /*左に空けるスペース*/
}
/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: fadeIn 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 0px; /*右からの配置場所指定*/
	top: 0px; /*上からの配置場所指定*/
	padding: 20px 15px; /*上下、左右への余白*/
	width: 60px; /*幅（３本バーが出ている場合の幅になります）*/
	height: 60px; /*高さ*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: right top;
	background: var(--base-inverse-color); /*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 0px 0px 0px 10px; /*角を丸くする指定。左上、右上、右下、左下への順番。*/
}
/*画面900px以上の追加指定*/
@media screen and (min-width:900px) {
	#menubar_hdr {
		/*transform: scale(1.5);	1.5倍のサイズに。お好みで。*/
		display: none;
	}
} /*追加指定ここまで*/
/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s; /*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid var(--base-color); /*線の幅、線種、varは色のことで冒頭のbase-colorを読み込みます。*/
}
/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: rgb(10, 47, 96);
}
/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1), #menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center; /*変形の起点。センターに。*/
}
/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1) {
	transform: rotate(45deg) translate(6px, 5.8px); /*回転45°と、X軸Y軸への移動距離の指定*/
}
/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3) {
	transform: rotate(-45deg) translate(7px, -7px); /*回転-45°と、X軸Y軸への移動距離の指定*/
}
/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2) {
	display: none; /*２本目は使わないので非表示にする*/
}
/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	background: var(--base-color) url("../images/hero.svg") no-repeat center center / cover;
	width: 100%;
	padding-top: 150%; /*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}
#mainimg > div {
	left: var(--space-large);
	align-items: flex-start;
	justify-content: center;
	padding-bottom: 140px;
}
/*画面420px以上の追加指定*/
@media screen and (min-width:420px) {
	#mainimg {
		background: var(--base-color) url("../images/hero.svg") no-repeat center center / cover;
		padding-top: 56.25%; /*アスペクト比16:9（9÷16=0.5624）*/
	}
} /*追加指定ここまで*/
#mainimg > div {
	position: absolute;
	top: 60px; /*header分を確保*/
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*画面420px以上の追加指定*/
@media screen and (min-width:420px) {
	#mainimg > div {
		left: var(--space-large);
		align-items: flex-start;
		justify-content: end;
		padding-bottom: 140px;
	}
} /*追加指定ここまで*/
/*テキストのブロック*/
#mainimg p {
	margin: 0;
}
#mainimg .text {
	font-size: 28px; /*文字サイズ。*/
	font-weight: 800; /*太字に*/
	line-height: 1.8; /*行間*/
	text-align: center; /*テキストをセンタリング*/
	color: #fff;
}
/*画面420px以上の追加指定*/
@media screen and (min-width:420px) {
	#mainimg .text {
		text-align: left; /*テキストを左寄せ*/
		font-size: 3.6vw; /*文字サイズ。*/
	}
	#mainimg .logo {
		position: absolute;
		bottom: 20%;
	}
} /*追加指定ここまで*/
@media screen and (max-width:419px) {
	#mainimg .logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		/*width: 50%;
			margin: 50% auto;*/
	}
}
/*ボタン*/
#mainimg .btn {
	font-size: 1rem; /*文字サイズ*/
	font-weight: 600; /*少し太字に*/
	margin-top: 3vw; /*上のテキストとボタンの間のスペース。*/
	display: flex;
	gap: 1rem; /*ボタン同士の余白*/
}
#mainimg .btn a {
	display: block;
	text-decoration: none;
	padding: 0.8rem 2rem; /*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px; /*ボタン同士の隙間*/
}
/*マウスオン時*/
#mainimg .btn a:hover {
	opacity: 1;
	transform: scale(1.05); /*105%に拡大*/
}
/*画面420px以上の追加指定*/
@media screen and (min-width:420px) {
	/*ボタン*/
	#mainimg .btn {
		font-size: 1.4vw; /*文字サイズ*/
	}
	#mainimg .btn a {
		margin: 0;
		padding: 0.6rem 3rem; /*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}
} /*追加指定ここまで*/
/*1つ目のボタン（お問い合わせ）の追加設定*/
#mainimg .btn p:nth-of-type(1) a {
	background: var(--primary-color); /*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}
/*2つ目のボタン（資料請求）への追加設定*/
#mainimg .btn p:nth-of-type(2) a {
	background: var(--base-inverse-color); /*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--primary-color); /*文字色。冒頭のprimary-colorを読み込みます。*/
	letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
}
/*ボタン内のアイコン*/
#mainimg .btn i {
	transform: scale(1.4); /*140%に拡大*/
	padding-right: 0.8rem; /*アイコンとテキストとの間の余白*/
}
/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	overflow-x: hidden;
}
/*h2見出し（共通）*/
main h2 {
	margin: 0;
	padding: 0;
	font-size: 1.4rem; /*文字サイズ。240%。*/
	font-weight: 800; /*太字に*/
	margin-bottom: 5vw; /*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	position: relative;
}
/*画面700px以上の追加指定*/
@media screen and (min-width:700px) {
	main h2 {
		font-size: 2.4rem; /*文字サイズ。240%。*/
	}
} /*追加指定ここまで*/
/*テキストをセンタリングする場合*/
main h2.c {
	align-items: center;
}
/*h2内のspan（小文字）*/
main h2 span {
	font-size: 0.85rem; /*文字サイズ85%*/
	opacity: 0.5; /*透明度。色を50%だけ出す。*/
	font-weight: normal; /*太字ではなく標準にする*/
}
/*h2内のimg画像（「そのお悩み」という手書き風のふきだしに使っています）*/
h2 img {
	width: 100px; /*画像の幅*/
	transform: rotate(-10deg); /*左に10度傾ける。そのままがいいならこの１行を削除。*/
	position: absolute;
	left: -10px; /*左からの配置場所*/
	top: -40px; /*上からの配置場所。マイナスがついているので本来とは逆の方向に移動します。*/
}
/*画面700px以上の追加指定*/
@media screen and (min-width:700px) {
	h2 img {
		width: 140px; /*画像の幅*/
		left: 40px; /*左からの配置場所*/
	}
} /*追加指定ここまで*/
/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;
	display: block;
	background: rgba(0, 0, 0, 0.9);
	text-align: right;
	padding: 0.5rem 1rem;
	color: #ccc;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}
/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: var(--primary-color); /*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}
/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background-color: var(--base-inverse-color); /*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color); /*文字色。冒頭のbase-colorを読み込みます。*/
}
/*bg2
---------------------------------------------------------------------------*/
.bg2 {
	background: #f3f3e9; /*背景色*/
}
/*bg3
---------------------------------------------------------------------------*/
.bg3 {
	background: #fff; /*背景色*/
}
/*調整用スタイル
---------------------------------------------------------------------------*/
.padding0 {
	padding: 0 !important;
}
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.color-check, .color-check a {
	color: #ff0000 !important;
}
.l {
	text-align: left !important;
}
.c {
	text-align: center !important;
}
.r {
	text-align: right !important;
}
.ws {
	width: 95%;
	display: block;
}
.wl {
	width: 95%;
	display: block;
}
.mb0 {
	margin-bottom: 0px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb-space-large {
	margin-bottom: var(--space-large) !important;
}
.look {
	line-height: 1.5 !important;
	display: inline-block;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all;
}
.small {
	font-size: 0.75em;
}
.large {
	font-size: 2em;
	letter-spacing: 0.1em;
}
.pc {
	display: none;
}
.dn {
	display: none !important;
}
.block {
	display: block !important;
}
.inline-block {
	display: inline-block !important;
}
.relative {
	position: relative;
}
.marker {
	background: linear-gradient(transparent 50%, yellow);
}
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
	.ws {
		width: 48%;
		display: inline;
	}
	.sh {
		display: none;
	}
	.pc {
		display: block;
	}
} /*追加指定ここまで*/
/*----------------------------------

コンテンツ

---------------------------------- */
.content-vision {
	/*background-color: #f5f8ff;*/
}
.content-flex {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	color: #0a2f60;
	position: relative;
}
/*.patent {
	position: absolute;
	top: -50px;
	right: 0;
	background-color: #fff;
	border-radius: 10px;
	width: 150px;
	padding: 5px;
	text-align: center;
	font-size: 18px;
}*/
.main-content .title h2 {
	font-size: 7vw;
	line-height: 1;
	padding-left: 10px;
	padding-bottom: 10px;
	border-bottom: 10px solid #f8fd0b;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 0;
}
#index .main-content .sub-title {
	font-size: 7vw;
	font-weight: bold;
	border-bottom: 2px solid #0a2f60;
	margin: 0;
	padding-left: 12px;
	padding-bottom: 7px;
}
.main-content .sub-title {
	font-size: 2.5vw;
	font-weight: bold;
	border-bottom: 2px solid #0a2f60;
	margin: 0;
	padding-left: 12px;
	padding-bottom: 7px;
}
#service .main-content .sub-title span {
	font-size: 1.2vw;
	font-weight: 300;
	display: block;
/*	color: rgb(10, 47, 96);
	background-color: #fff;
	text-align: center;
	border-radius: 5px;*/
}
.page .main-content .sub-title {
	font-size: 2vw;
	line-height: 1.6;
}
@media screen and (min-width:700px) {
	.main-content .title h2 {
		font-size: 3vw;
	}
	#index .main-content .sub-title {
		font-size: 2.5vw;
	}
}
@media screen and (min-width:900px) {
	.main-content .title h2 {
		font-size: 2.5vw;
	}
}
.content-flex-vision dl {
	margin-top: 0;
}
.content-flex-vision dt {
	font-size: 20px;
	margin: 30px 0;
	font-weight: bold;
	line-height: 1.5;
}
.content-flex-vision dd {
	color: #000000;
	font-size: 14px;
	margin: 0 10px;
}
.content-flex .title {
	width: 30%;
	margin-top: 20px;
}
.content-flex .title-contants {
	width: 20%;
	margin-top: 4px;
}
.content-flex .title-contants .title {
	width: 100%;
	margin-top: 0;
}
.content-flex .txt_contants {
	width: 80%;
}
.page .main-content {
	padding-top: 12vw;
}
/*--- Company---*/
.wrapper-company {
	margin-bottom: 50px;
}
.wrapper-company dl {
	display: flex;
	align-items: center;
	gap: 50px;
	border-bottom: 1px solid #0a2f60;
	padding: 30px 0;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.5;
}
.wrapper-company dl dt {
	word-break: keep-all;
	width: 10%;
}
/*--- Service---*/
.content-service .title {
	margin-top: 5px;
}
.content-service h3 {
	/*background-color: #FEFF8E;*/
	padding: 10px;
	font-size: 4.5vw;
	border-top: solid 1px #0a2f60;
	border-bottom: solid 1px #0a2f60;
}
.content-service p {
	font-size: 4vw;
	margin: 5px 0;
}
.content-service .movie {
	background-color: #0a2f60;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 250px;
}
.content-service .movie p {
	color: #fff;
	font-size: 24px;
}
.bg_navy {
	background-color: rgb(10, 47, 96);
	color: #fff;
}
.bg_navy dl, .bg_navy p, .bg_navy h2, .bg_navy h3 {
	color: #fff;
}
.bg_navy dl, .bg_navy .sub-title {
	border-bottom: solid 1px #fff;
}
.content-services {
	background-color: #0a2f60;
}
.wrapper-services {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 40px;
	color: #fff;
	font-weight: bold;
}
.wrapper-services > div:first-child {
	width: 70%;
}
.wrapper-services h4 {
	font-size: 1.4vw;
}
.service1 p {
	overflow: hidden;
	font-weight: normal;
}
.service1 p img {
	float: left;
	margin-right: 2%;
	width: 40%;
}
.abso {
	background: #fff;
	color: #000;
	padding: 10px 25px;
	width: 80%;
	text-align: center;
	font-size: 18px;
	margin-bottom: 50px;
}
.wrapper-services .title {
	font-size: 5.5vw;
	border-left: 13px solid #90abcf;
	line-height: 1;
	padding-left: 10px;
	padding-bottom: 10px;
	border-bottom: 13px solid #c8d8ed;
	color: #fff;
}
.wrapper-services .title span {
	font-size: 20px;
}
.wrapper-services div:first-child ul {
	margin: 60px 0;
	font-size: 20px;
	text-align: center;
	word-break: keep-all;
	line-height: 2;
	list-style: none;
}
.flex-services {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	font-size: 23px;
}
.flex-services p {
	word-break: keep-all;
}
.flex-services p:last-child {
	width: 40%;
}
.wrapper-services div:last-child ul {
	margin: 60px 0;
	font-size: 18px;
	text-align: center;
	list-style: none;
	position: relative;
}
.wrapper-services div:last-child ul li {
	margin: 40px 0;
}
.wrapper-services div:last-child ul li a {
	position: relative;
	display: block;
	padding: 25px 40px;
	border-radius: 20px;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
	border: 1px solid #0e1f37;
	line-height: 1.5;
	white-space: nowrap;
}
.wrapper-services div:last-child ul::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-15deg); /* 位置を中央に＆斜めに */
	background-color: rgb(255, 255, 255, 0.9); /* 文字の背景 */
	color: rgb(10, 47, 96); /* 文字色を白に */
	font-size: 1.8vw;
	font-weight: bold;
	padding: 15px 40px; /* 背景サイズを調整 */
	border-radius: 5px; /* 背景の角を丸く */
	content: "Coming Soon!";
	display: inline-block;
	white-space: nowrap; /* 改行を防ぐ */
	line-height: 1.6;
}
.wrapper-services .service1 ol {
	margin-left: 15px;;
}
.wrapper-services .service1 li {
	margin-bottom: 15px;
	text-align: left;
	font-size: 1.2vw;
}
.wrapper-services .service1 li span {
	font-size: 24px;
	color: #fff962;
}
.wrapper-services .service1 .txt1 {
	font-size: 20px;
	margin-bottom: 50px;
	margin-top: 50px;
}
.wrapper-services .service1 .txt2 {
	font-size: 28px;
	position: relative;
	margin: 0;
	padding: 15px 6%;
	font-weight: 600;
}
.wrapper-services .service1 .txt2::before {
	top: 0;
	left: 0;
	content: "";
	position: absolute;
	width: 80px;
	height: 50px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
}
.wrapper-services .service1 .txt2::after {
	bottom: 0;
	right: 0;
	content: "";
	position: absolute;
	width: 80px;
	height: 50px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.wrapper-services .service1 .logo {
	text-align: center;
	margin-top: 20px;
}
.wrapper-services2 {
}
.service1 h4.sttl2 {
	border-left: solid 8px #d2e0f1;
	padding-left: 0.5em;
	line-height: 1.2;
}
.service1 dl {
	border-bottom: none;
}
.service1 dt {
	padding-left: 1.5em;
	line-height: 1.6;
	position: relative;
}
.service1 dt::before {
	font-family: 'Font Awesome 6 Free';
	content: "\f00c";
	font-weight: 900;
	position: absolute;
  left:0;
}
.service1 dd {
	padding-left: 1.6em;
	font-weight: normal;
	margin-bottom: 10px;
}
/*.service3 .txt2 {
	background-color: #fff;
	font-size: 1.6vw;
	color: rgb(10, 47, 96);
	border-radius: 5px;
	text-align: center;
}
.service4 .txt1 {
	font-size: 1.4vw;
	line-height: 1.6;
	position: relative;
	margin-right: 10%;
}
.service4 .txt1::after {
	font-family: 'Font Awesome 6 Free';
	content: "\f101";
	font-size: 3.6vw;
	font-weight: 900;
	position: absolute;
	right: -33%;
  top: -12%;
  bottom: 0;
  margin: auto 0;
}*/
/*--- About us---*/
.content-about {
	
}
/*--- Press---*/
.flex-press {
	position: relative;
	display: block;
	padding: 25px 40px;
	line-height: 1.5;
	text-align: center;
}
.flex-press::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-15deg); /* 位置を中央に＆斜めに */
	background-color: rgb(255, 255, 255, 0.9); /* 文字の背景 */
	color: rgb(10, 47, 96); /* 文字色を白に */
	font-size: 40px;
	font-weight: bold;
	padding: 15px 70px; /* 背景サイズを調整 */
	border-radius: 5px; /* 背景の角を丸く */
	content: "Coming Soon!";
	display: inline-block;
	white-space: nowrap; /* 改行を防ぐ */
}
.flex-press p {
	font-size: 25px;
	line-height: 3;
}
.wrapper-law dt {
	width: 20%;
}
.wrapper-law dd {
	width: 80%;
}
/*--- privacy--*/
.terms > div {
	margin-bottom: 20px;
}
.terms h3 {
	background-color: #EEE;
	padding: 5px 15px;
	margin-bottom: 20px;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 600;
}
.terms h4 {
	margin-bottom: 10px;
	font-size: 1rem;
	font-weight: 600;
	padding-left: 5px;
}
.terms p {
	padding-left: 5px;
	margin-bottom: 10px;
	font-weight: normal;
}
.terms ul, .terms ol {
	padding-left: 25px;
}
.terms .privacy2 ol > li {
	margin-bottom: 20px;
}
.terms ol li ol {
	list-style: none;
	counter-reset: number;
}
.terms ol li .number li {
	list-style-type: none;
	position: relative;
	padding-left: 3em;
	counter-increment: number1;
}
.terms ol li .number li::before {
	content: '（'counter(number1, number) '）';
	position: absolute;
	left: 0;
}
@media screen and (min-width:700px) {
	.content-service h3 {
		font-size: 20px;;
	}
	.content-service p {
		font-size: 18px;
	}
	.content-service .movie {
	  height: 500px;
	}
}

/*画面幅980px以下の追加指定*/
@media screen and (max-width:980px) {
	.content-flex {
		display: inherit;
	}
	.main-content .title {
		width: inherit;
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 4vw;
	}
	.main-content .txt_contants {
		width: inherit;
	}
	.content-vision dl {
		margin-bottom: 20px;
	}
	.page .main-content {
		padding-top: 16vw;
	}
	/*--- Company---*/
	#company .main-content .sub-title {
		font-size: 5vw;
	}
	.content-flex .title-contants {
		width: 100%;
		display: inherit;
	}
	.content-flex .title-contants .title {
		width: 100%;
		margin-top: 0;
	}
	/*--- service---*/

	.wrapper-services h4 {
		font-size: 1.8vw;
	}
	.wrapper-services .service1 li {
		font-size: 1.6vw;
	}
	.wrapper-services div:last-child ul::after {
		font-size: 2.2vw;
		padding: 15px 70px; /* 背景サイズを調整 */
	}
	.wrapper-services div:last-child ul li a {
		padding: 25px;
		border-radius: 15px;
		font-size: 1.8vw;
	}
	.wrapper-services .service1 .txt1 {
	font-size: 18px;
	margin-bottom: 50px;
}
	.wrapper-services .service1 .txt2 {
		font-size: 22px;
		position: relative;
		margin: 0;
		padding: 15px 6%;
		font-weight: 600;
	}
	.wrapper-services .service1 .txt2::before {
		top: 0;
		left: 0;
		content: "";
		position: absolute;
		width: 80px;
		height: 50px;
		border-left: 1px solid #fff;
		border-top: 1px solid #fff;
	}
	.wrapper-services .service1 .txt2::after {
		bottom: 0;
		right: 0;
		content: "";
		position: absolute;
		width: 80px;
		height: 50px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
}
/*画面幅480px以下の追加指定*/
@media screen and (max-width:480px) {
	.content-flex {
		display: inherit;
	}
	.main-content .title {
		width: inherit;
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 7vw;
	}
	.page .main-content .sub-title {
		font-size: 4.5vw;
	}
	.page .main-content {
		padding-top: 20vw;
	}
	/*--- Company---*/
	.wrapper-company dl {
		display: inherit;
		padding: 20px 0;
	}
	.wrapper-company dt {
		font-weight: bold;
		margin-bottom: 5px;
	}
	/*--- service---*/
	.wrapper-services {
		display: inherit;
	}

	.wrapper-services .service1 {
		display: inherit;
		width: 100% !important;
	}
	.wrapper-services h4 {
	  font-size: 4vw;
	}
	.wrapper-services div:first-child ol li {
		font-size: 4vw;
		margin-bottom: 10px;
	}
	.wrapper-services .service1 ol {
		margin-top: 20px;
	}
	.wrapper-services .service1 li {
	  margin-bottom: 10px;
	}
	#service .main-content .sub-title span {
	  font-size: 4.6vw;
	}
	.flex-services {
		display: block;
		text-align: center;
	}
	.flex-services p {
		font-size: 5vw;
	}
	.flex-services p:last-child {
		width: 50%;
		margin: 0 auto;
	}
	.wrapper-law dd {
		width: 100%;
	}
	.wrapper-services div:last-child ul::after {
		font-size: 6vw;
		padding: 15px 80px;
	}
	.wrapper-services div:last-child ul li a {
		font-size: 5vw;
	}
.wrapper-services2 {
	padding: 5% 3%;
}
.service3 {
	margin-bottom: 2%;
}
.service3 .txt1 {
	font-size: 5.5vw;
	line-height: 1.2;
	margin-bottom: 15px;
}
.service3 .txt2 {
	font-size: 4.1vw;
    line-height: 1.4;
    padding: 5px 10px;
}
.service4 .txt1 {
	font-size: 4.5vw;
	margin-right: 0;
	margin-bottom: 15%;
}
.service4 .txt1::after {
	font-size: 8vw;
	content: "\f103";
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
	top: 100%;
}
	.service4 .txt1 + p {
		width: 80%;
	}
	.sp {
		display: block;
	}
}
/*----------------------------------

フッター

---------------------------------- */
.footer-nav, .footer-nav-w {
	padding: 30px 0;
	display: flex;
	justify-content: center;
	gap: 50px;
}
.footer-nav, .footer-nav-w a {
	color: color: var(--base-inverse-color);
}
.footer-nav ul, .footer-nav-w ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
}
.footer-nav ul {
	color: #0a2f60;
}
.footer-nav-w ul {
	list-style: none;
}

/*画面幅980px以下の追加指定*/
@media screen and (max-width:980px) {
	.footer-nav-w {
		display: block;
	}
	.copyright {
		text-align: center;
	}
}
/*画面幅480px以下の追加指定*/
@media screen and (max-width:480px) {
	.footer-nav-w ul {
		display: block;
		padding: 0 10%;
	}
	.copyright {
		text-align: left;
		padding: 0 10%;
	}
}