@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');

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

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/



/*テーマカラーの定義（CSS変数）
---------------------------------------------------------------------------*/
:root {
	--primary-color: #fff;
	--blue-color: #00164e;
	--red-color: #c90200;
	--orange-color: #f57300;
	--pink-color: #ff66c4;
	--hover-color: #c5c5c5;
	--green-color: #00a770;
	--gray-color: #585858;
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
/* 開くアニメーション */
@keyframes opa1 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*全体の設定
---------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

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

@media screen and (min-width:900px) {

	html,
	body {
		font-size: 16px;
	}
}

body {
	font-family: 'M PLUS Rounded 1c', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	background: var(--blue-color);
	color: #333;
	line-height: 2;
}

.sp {
	display: none;
}

@media screen and (max-width:899px) {
	.sp {
		display: block;
	}

	.pc {
		display: none;
	}
}

/*リセット*/
figure {
	margin: 0;
}

dd {
	margin: 0;
}

nav {
	margin: 0;
	padding: 0;
}

/*table全般の設定*/
table {
	border-collapse: collapse;
}

/*画像全般の設定*/
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/*iframeタグ*/
iframe {
	width: 100%;
}

/*他*/
input {
	font-size: 1rem;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;
	transition: 0.3s;
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);
	text-decoration: none;
}

a.text-link {
	color: #fff;
	text-decoration: none;
}

/*ボタン
---------------------------------------------------------------------------*/
.button-page {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 300px;
	margin: 0 auto;
	padding: 1em 2em;
	overflow: hidden;
	border: none;
	border-radius: 5px;
	background-color: #3c769f;
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	margin-top: 1rem;
	text-decoration: unset;
}

.button-page::before {
	display: block;
	position: absolute;
	top: -50%;
	left: -30%;
	transform: rotate(30deg);
	width: 70px;
	height: 100px;
	content: '';
	background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
	animation: animation-button-10 2s infinite linear;
}

@keyframes animation-button-10 {
	17% {
		left: 120%;
	}

	100% {
		left: 120%;
	}
}

.button-page::after {
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin-left: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: '';
}

.button-page:hover {
	background-color: #2c668f;
}

.button-blank {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .9em 2em;
	border: none;
	border-radius: 5px;
	background-color: #ff5722;
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
	text-decoration: none;
}

.button-blank::after {
	width: 1.25em;
	height: 1.25em;
	margin-left: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
	content: '';
}

.button-blank:hover {
	background-color: #00164e;
}

/*戻るテキストリンク
---------------------------------------------------------------------------*/
.return {
	display: block;
	text-align: center;
}

/*別ウインドウ
---------------------------------------------------------------------------*/
a.blank:after {
	width: 15px;
	height: 15px;
	margin-left: 8px;
	background-image: url(/images/common/blank_navy.png);
	content: '';
	display: inline-block;
	background-size: contain;
	vertical-align: middle;
	margin-top: -3px;
}

/*各コンテンツMV配置パターン１
---------------------------------------------------------------------------*/
.mv-box {
	width: 100%;
	height: 300px;
}

.mv-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main.pattern01 {
	position: relative;
	margin: -150px 5% 0;
	background-color: #fff;
	z-index: 1;
}

main.pattern01 h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	color: var(--blue-color);
	font-weight: normal;
	font-size: 2rem;
	letter-spacing: 0.1em;
	padding: 3rem 0;
}

@media screen and (max-width:899px) {
	main.pattern01 h2 {
		font-size: 1.5rem;
		line-height: 1.5;
		margin: 0;
		padding: 1rem 0;
	}
}

/*見出し
---------------------------------------------------------------------------*/
.des01 {
	display: flex;
	align-items: center;
	padding: .5em .7em;
	background-color: #f2f2f2;
	color: var(--blue-color);
}

.des01::before {
	display: inline-block;
	width: 5px;
	height: 1.5em;
	margin-right: .5em;
	background-color: var(--blue-color);
	content: '';
}

@media screen and (max-width:899px) {
	.des01 {
		line-height: 1.5;
	}

	.des01::before {
		height: 2.5em;
	}
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
}

/*トップページ以外のコンテナー*/
body:not(.home) #container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/*コンテンツ（main要素を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	max-width: 1800px;
	margin: auto 0;
}


/*ヘッダー
---------------------------------------------------------------------------*/
/*トップページのヘッダー*/
.home header {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

/*トップページ以外のヘッダー*/
body:not(.home) header {
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5%;
}

/*ロゴ共通*/
#logo img {
	display: block;
}

/*トップページ以外のロゴ*/
body:not(.home) #logo img {
	height: 50px;
}

/*動画*/
video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}

@media screen and (max-width:899px) {
	.home #logo {
		width: 100%;
	}

	.home #logo img {
		max-width: 100%;
	}
}


/*メニューブロック設定
---------------------------------------------------------------------------*/
#menubar a {
	display: block;
	text-decoration: none;
}

#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menubar {
	display: none;
}

#menubar.d-b,
#menubar_hdr.d-b {
	display: block;
}

#menubar.d-n,
#menubar_hdr.d-n {
	display: none;
}


/*メニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
	position: fixed;
	overflow: auto;
	z-index: 100;
	right: 0px;
	top: 0px;
	width: 30%;
	height: 100%;
	padding: 100px 20px 20px;
	background: #fffffff7 url(../images/common/menu_bg.png) no-repeat center bottom / 100%;
	text-align: center;
	animation: opa1 0.8s both;
	box-shadow: 0 0px 30px 7px rgb(6 6 6 / 20%);
}

#menubar nav {
	margin: 0 auto;
	max-width: 500px;
}

#menubar nav a {
	padding: 1rem;
	margin: 1rem;
	font-size: 1.5rem;
}

#menubar nav a:hover {
	background-color: #fff;
}

/*メニューブロックのicon類
---------------------------------------------------------------------------*/
/*アイコンブロック全体*/
#menubar .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
}

/*アイコン１個あたり*/
#menubar .icon li {
	margin: 0.7rem;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 1%;
	top: 14px;
	padding: 16px 14px;
	width: 46px;
	height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform: scale(1.8);
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	border-top: 1px solid #fff;
	box-shadow: #ffffff 0px 0px 3px;
}

#menubar_hdr.ham span {
	border-top: 1px solid var(--blue-color);
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;
	width: 20px;
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1) {
	transform: rotate(45deg) translate(3.8px, 5px);
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3) {
	transform: rotate(-45deg) translate(3.8px, -5px);
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2) {
	display: none;
}

@media screen and (max-width:899px) {
	#menubar {
		width: 90%;
		background: #ffffffeb url(../images/common/menu_bg.png) no-repeat center;
		padding-top: 50px;
	}

	#menubar .fab:before {
		font-size: 3rem;
	}
}

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

footer {
	font-size: 0.7rem;
	text-align: center;
	padding: 20px;
	color: #fff;
}

/*リンクテキスト*/
footer a {
	color: inherit;
	text-decoration: none;
}

/*著作部分*/
footer .pr {
	display: block;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
	display: block;
}

/*ボタンの設定*/
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 99;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0, 0, 0, 0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}


/*テーブル
---------------------------------------------------------------------------*/
/*ta1テーブルブロック設定*/
.ta1 {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1rem;
	margin: -1rem;
}

/*thとtd（左右）共通設定*/
.ta1 th,
.ta1 td {
	padding: 0.5rem 1rem;
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 20%;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

/*動画
---------------------------------------------------------------------------*/
.youtube {
	position: relative;
	width: 100%;
	padding-bottom: 57.25%;
	height: 0;
	overflow: hidden;
}

.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*　注意書き※のインデント
---------------------------------------------------------------------------*/
.indent {
	text-indent: -1em;
	margin-left: 1em;
	margin-bottom: 5px;
	font-size: 12px;
	color: red;
	line-height: 1.5;
}

.indent + .indent {
	margin-top: 0;
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.color-check,
.color-check a {
	color: #ff0000 !important;
}

.color-theme,
.color-theme a {
	color: #dbca9e !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;
}

.look {
	display: inline-block;
	padding: 0.2em 0.5em;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #555;
	border-radius: 3px;
	word-break: break-all;
	margin: 1px;
}

.small {
	font-size: 0.75em;
}

.large {
	font-size: 2em;
	letter-spacing: 0.1em;
}

.pc {
	display: none;
}

.dn {
	display: none !important;
}

.block {
	display: block !important;
}

.fs1 {
	font-size: 2rem;
}

@media screen and (min-width:900px) {
	.ws {
		width: 48%;
		display: inline;
	}

	.sh {
		display: none;
	}

	.pc {
		display: block;
	}
}