@charset "utf-8";
/*================================
*
*基本設定
*
================================*/

/*================================
　ここから全サイズ適用
================================*/

/*CSS Variable
================================*/
:root {
	--theme-color01: #009cea;
	--theme-color02: #daf3ff;
	--accent-color: #fce952;
	--base-color_black: #000;
	--base-color_gray: #eee;
	--base-color_white: #fff;
}
/*
================================*/
html {
	overflow-y: scroll;
	font-size: 10px;
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body {
	overflow: hidden;
	min-height: 100vh;
	/*↓文字の基本設定*/
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
	font-size: 18px;
	font-size: 1.8em;
	font-weight: 400;
	text-align: justify;
	color: #333;
	vertical-align: baseline;
	/* ↓iPhoneの文字サイズ自動調整を無効化 */
	-webkit-text-size-adjust: 100%;
}
p, li, dt, dd, th, td, small, address {
	/*↓文字の行の高さ設定*/
	line-height: 1.6;
	/*↓文字の字間を設定*/
	/*letter-spacing: 0.05em;*/
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
a {
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	/*color: inherit;*/
}
a:hover {}
a:active {
	text-decoration: none;
}
/*margin-bottom
================================*/
.mb0 {
	margin-bottom: 0 !important;
}
.mb5 {
	margin-bottom: 5px !important;
}
.mb10 {
	margin-bottom: 10px !important;
}
.mb15 {
	margin-bottom: 15px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.mb60 {
	margin-bottom: 60px !important;
}
.mb70 {
	margin-bottom: 70px !important;
}
.mb80 {
	margin-bottom: 80px !important;
}
.mb90 {
	margin-bottom: 90px !important;
}
.mb100 {
	margin-bottom: 100px !important;
}

/* コンテナ類、幅制御
================================*/
.inner {
	margin: 0 auto;
	/*max-width: calc(1200px + 14rem);*/
	padding-left: 7rem;
	padding-right: 7rem;
}

/* ページ内リンク位置調整
================================*/
.anchor-link {
	display: block;
	transform: translateY(-120px);
}

/* ブロック要素、インライン要素
================================*/
.blk {
	display: block;
}
.inl {
	display: inline;
}
.inl-blk {
	display: inline-block;
}

/* ブロック要素の揃え方向
================================*/
.b-cen,
.blk-c {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.b-lef,
.blk-l {
	display: block;
	margin-right: auto;
}
.b-rig,
.blk-r {
	display: block;
	margin-left: auto;
}

/* 文字、インライン要素の揃え方向
================================*/
.t-cen,
.ta-c {
	text-align: center !important;
}
.t-lef,
.ta-l {
	text-align: left !important;
}
.t-rig,
.ta-r {
	text-align: right !important;
}

/* 文字ウェイト
================================*/
/*Regular*/
.fw400 {
	font-weight: 400;
}
/*Medium*/
/*
.fw500 {
	font-weight: 500;
}
*/
/*Bold*/
.fw700 {
	font-weight: 700;
}

/*文字カラー
================================*/
.fc-fff {
	color: #fff;
}
.fc-333 {
	color: #333;
}
.fc-009cea,
.fc-theme01 {
	color: var(--theme-color01);
}
.fc-daf3ff,
.fc-theme02 {
	color: var(--theme-color02);
}
.fc-fce952,
.fc-accent {
	color: var(--accent-color);
}
.fc-30cadc {
	color: #30cadc;
}
.fc-31b29a {
	color: #31b29a;
}
.fc-f8b551 {
	color: #f8b551;
}
.fc-f59f49 {
	color: #f59f49;
}
.fc-e46ea6 {
	color: #e46ea6;
}
/*
.fc- {
	color: #;
}
*/

/* インデント
================================*/
.kome {
	padding-left: 1em;
	text-indent: -1em;
}

/* object-fit
================================*/
.fit-cover {
	-o-object-fit: cover;
	object-fit: cover;
	height: 100%;
	width: 100%;
}



/*================================
ノートPC 1366px～0px
================================*/
@media (max-width: 1366px) {}


/*================================
TABLET横 1080px～0px
================================*/
@media (max-width: 1080px) {

	/* font size設定 */
	/*--------------------------
	ベースとなるhtmlのfont sizeを10pxから8pxに変更することで、
	10px = 1remだったのが8px = 1remとなり、サイト全体の文字をサイズダウンする。
	ベースのfont sizeを変更したことで、bodyに設定した基本のfont sizeが
	1.8em = 18pxだったのが1.8em = 14.4pxになってしまうので、
	bodyのfont sizeを2em（16px相当）に変更する
	--------------------------
	※chrome対策のため、body要素のみemを使用、他の要素ではremを使用すること
	--------------------------
	※文字サイズ一覧※
	12.8px = 1.6rem
	14px = 1.75rem
	16px = 2rem
	18px = 2.25rem
	20px = 2.5rem
	24px = 3rem
	26px = 3.25rem
	28px = 3.5rem
	32px = 4rem
	--------------------------*/

	html {
		font-size: 8px;
		font-size: 50%;
	}
	body {
		/*16px = 2em*/
		font-size: 2em;
	}

}


/*================================
TABLET縦 834px～0px
================================*/
@media (max-width: 834px) {

	/*margin-bottom
	================================*/
	.mb0-tab {
		margin-bottom: 0 !important;
	}
	.mb5-tab {
		margin-bottom: 5px !important;
	}
	.mb10-tab {
		margin-bottom: 10px !important;
	}
	.mb15-tab {
		margin-bottom: 15px !important;
	}
	.mb20-tab {
		margin-bottom: 20px !important;
	}
	.mb30-tab {
		margin-bottom: 30px !important;
	}
	.mb40-tab {
		margin-bottom: 40px !important;
	}
	.mb50-tab {
		margin-bottom: 50px !important;
	}
	.mb60-tab {
		margin-bottom: 60px !important;
	}
	.mb70-tab {
		margin-bottom: 70px !important;
	}
	.mb80-tab {
		margin-bottom: 80px !important;
	}
	.mb90-tab {
		margin-bottom: 90px !important;
	}
	.mb100-tab {
		margin-bottom: 100px !important;
	}

	/* コンテナ類、幅制御
	================================*/
	.inner {
		padding-left: 40px;
		padding-right: 40px;
	}

	/* 文字、インライン要素の揃え方向
	================================*/
	.t-cen-tab,
	.ta-c-tab {
		text-align: center !important;
	}
	.t-lef-tab,
	.ta-l-tab {
		text-align: left !important;
	}
	.t-rig-tab,
	.ta-r-tab {
		text-align: right !important;
	}

	/* ページ内リンク位置調整
	================================*/
	.anchor-link {
		-webkit-transform: translateY(-80px);
		transform: translateY(-80px);
	}

	
}



/*================================
SP表示 667px～0px
================================*/
@media (max-width: 667px) {
	
	/*margin-bottom
	================================*/
	.mb0-sp {
		margin-bottom: 0 !important;
	}
	.mb5-sp {
		margin-bottom: 5px !important;
	}
	.mb10-sp {
		margin-bottom: 10px !important;
	}
	.mb15-sp {
		margin-bottom: 15px !important;
	}
	.mb20-sp {
		margin-bottom: 20px !important;
	}
	.mb30-sp {
		margin-bottom: 30px !important;
	}
	.mb40-sp {
		margin-bottom: 40px !important;
	}
	.mb50-sp {
		margin-bottom: 50px !important;
	}
	.mb60-sp {
		margin-bottom: 60px !important;
	}
	.mb70-sp {
		margin-bottom: 70px !important;
	}
	.mb80-sp {
		margin-bottom: 80px !important;
	}
	.mb90-sp {
		margin-bottom: 90px !important;
	}
	.mb100-sp {
		margin-bottom: 100px !important;
	}

	/* コンテナ類、幅制御
	================================*/
	.inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* 文字、インライン要素の揃え方向
	================================*/
	.t-cen-sp,
	.ta-c-sp {
		text-align: center !important;
	}
	.t-lef-sp,
	.ta-l-sp {
		text-align: left !important;
	}
	.t-rig-sp,
	.ta-r-sp {
		text-align: right !important;
	}
	

}






/*================================
*
*共通パーツ（ヘッダー、フッターなど）
*
================================*/

/* リンクボタン
-------------------------------*/
.link-btn {
	transition: .4s;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 6rem;
	padding: 1rem 6rem 1rem 5rem;
	background-image: url(../img/link_arrow.png);
	background-position: right 6px center;
	background-size: 4.5rem auto;
	background-repeat: no-repeat;
	background-color: var(--theme-color01);
	border: 2px solid var(--theme-color01);
	border-radius: 4rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
}
/*type02*/
.link-btn.-type02 {
	border: 2px solid var(--accent-color);
}
/*type03*/
.link-btn.-type03 {
	background-image: url(../img/link_arrow02.png);
	background-color: #fff;
	color: var(--theme-color01);
}
/*type04*/
.link-btn.-type04 {
	background-image: url(../img/link_arrow02.png);
	background-color: #fff;
	border: 2px solid var(--accent-color);
	color: var(--theme-color01);
}
/*type05*/
.link-btn.-type05 {
	background-image: url(../img/link_arrow02.png);
	background-color: var(--accent-color);
	color: var(--theme-color01);
}
/*hover*/
.link-btn:hover,
.link-btn.-type02:hover,
.link-btn.-type03:hover,
.link-btn.-type04:hover,
.link-btn.-type05:hover {
	background-image: url(../img/link_arrow_on.png);
	background-color: #81d5fd;
	border: 2px solid var(--theme-color01);
	color: #fff;
}

/*================================
ヘッダー
================================*/
.header {
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	padding: 40px 7rem 0;
}
.hd_content {
	/*flex*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 4rem;
	/*others*/
	max-width: 1200px;
	height: 8rem;
	margin: auto;
	padding: 6px 6px 6px 3rem;
	background: #fff;
	border-radius: 4rem;
	border: 1px solid var(--theme-color01);
}
.hd_group01 {}
.hd_group02 {
	/*flex*/
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 3rem;
}
/*ロゴ
-------------------------------*/
.hd_logo {
	max-width: 34.2rem;
	width: 100%;
}
.hd_logo_img {}


/*================================
グローバルナビ
================================*/
.g-nav_lists {
	/*flex*/
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 2rem;
}
.g-nav_item {
	position: relative;
	z-index: 1;
}
.g-nav_link {
	transition: .3s;
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
	color: rgba(85, 85, 85, 1);
}
.g-nav_item:hover .g-nav_link {
	color: rgba(85, 85, 85, 0.7);
}

/* サブメニュー
-------------------------------*/
.g-nav_sub-content {
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	bottom: 0;
	transform: translate(-50%,calc(100% - 20px));
	width: 16rem;
	padding-top: 2rem;
}
.g-nav_item:hover .g-nav_sub-content {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%,calc(100% + 0px));
}
.g-nav_sub-lists {
	padding: 0 10px 20px;
	background: #fff;
	border-radius: 6px;
}
.g-nav_sub-item {
	padding: 4px 0;
}
.g-nav_sub-link {
	transition: .3s;
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
	color: rgba(85, 85, 85, 1);
}
.g-nav_sub-item:hover .g-nav_sub-link {
	color: rgba(85, 85, 85, 0.7);
}

/*エントリーボタン
-------------------------------*/
.hd_entry {
	width: 6.6rem;
}
.hd_entry-btn {
	transition: .4s;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6.6rem;
	height: 6.6rem;
	background: var(--theme-color01);
	border: 3px solid var(--accent-color);
	border-radius: 50%;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}
.hd_entry-btn:hover {
	background-color: #fff;
	color: var(--theme-color01);
}

/*================================
フッター
================================*/
.footer {
	position: sticky;
	top: 100vh;
	background: var(--theme-color01);
	background: url(../img/pattern01.jpg)top center/20rem auto;
}
.footer .inner {
	max-width: calc(1200px + 14rem);
	padding-top: 8rem;
}

/*-------------------------------*/
.ft-head {}
.ft-head_content {
	/*flex*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 4rem;
	/*others*/
	max-width: 1200px;
	/*height: 8rem;*/
	margin: auto;
	/*
	padding: 6px 6px 6px 3rem;
	background: #fff;
	border-radius: 4rem;
	border: 1px solid var(--theme-color01);
	*/
}
.ft-head_group01 {}
.ft-head_group02 {
	/*flex*/
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 3rem;
}
/*-------------------------------*/
.ft-head_logo {
	width: 34.2rem;
}
.ft-head_logo_img {}
/*-------------------------------*/
.ft-head_entry {
	width: 6.6rem;
}
.ft-head_entry-btn {
	transition: .4s;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6.6rem;
	height: 6.6rem;
	background: var(--theme-color01);
	border: 3px solid var(--accent-color);
	border-radius: 50%;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}
.ft-head_entry-btn:hover {
	background-color: #fff;
	color: var(--theme-color01);
}
/*-------------------------------*/
.ft_menu {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px 4rem;
	flex-flow: row wrap;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 50px;
	text-align: center;
}
/*
.ft_menu_group {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px 4rem;
}
*/
.ft_menu_content {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px 4rem;
}
.ft_menu_lists {
	/*
	display: inline-block;
	padding: 0 10px;
	vertical-align: top;
	*/
	text-align: left;
}
.ft_menu_title {
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}
.ft_menu_link {
	color: #fff;
}
.ft_menu_sub-lists
.ft_menu_sub-item {}
.ft_menu_sub-link {
	font-size: 1.4rem;
	font-weight: 700;
	color: #333;
}
/*コピーライト表記
-------------------------------*/
.copyright {
	padding: 4rem 7rem;
	border-top: 1px solid #fff;
	font-size: 1.6rem;
	text-align: center;
	color: #fff;
}
/*ページTOPへ戻る
-------------------------------*/
.pagetop {
	opacity: 0;
	visibility: hidden;
	transition: .4s;
	position: fixed;
	z-index: 6;
	right: 30px;
	bottom: 20px;
	width: 6rem;
	height: 6rem;
	background: url(../img/pagetop.png)center/contain no-repeat;
	cursor: pointer;
}
.pagetop:hover {
	opacity: 0.9;
}




/*================================
ノートPC 1366px～0px
================================*/
@media (max-width: 1366px) {}


/*================================
TABLET横 1080px～0px
================================*/
@media (max-width: 1080px) {


	/* リンクボタン
	-------------------------------*/
	.link-btn {}

	/*================================
	ヘッダー
	================================*/
	.header {}
	.hd_content {}
	.hd_group01 {}
	.hd_group02 {}
	/*ロゴ
	-------------------------------*/
	.hd_logo {}
	.hd_logo_img {}


	/*================================
	グローバルナビ
	================================*/
	.g-nav_lists {}
	.g-nav_item {}
	.g-nav_link {}
	.g-nav_item:hover .g-nav_link {}

	/* サブメニュー
	-------------------------------*/
	.g-nav_sub-content {}
	.g-nav_item:hover .g-nav_sub-content {}
	.g-nav_sub-lists {}
	.g-nav_sub-item {}
	.g-nav_sub-link {}

	/*===================================
	ドロワーナビ
	===================================*/

	/*エントリーボタン
	-------------------------------*/
	.hd_entry {}
	.hd_entry-btn {}

	/*================================
	フッター
	================================*/
	.footer {}
	.footer .inner {}

	/*-------------------------------*/
	.ft-head {}
	.ft-head_content {}
	.ft-head_group01 {}
	.ft-head_group02 {}
	/*-------------------------------*/
	.ft-head_logo {}
	.ft-head_logo_img {}
	/*-------------------------------*/
	.ft-head_entry {}
	.ft-head_entry-btn {}
	/*-------------------------------*/
	.ft_menu {}
	.ft_menu_group {}
	.ft_menu_content {}
	.ft_menu_lists {}
	.ft_menu_title {}
	.ft_menu_link {}
	.ft_menu_sub-lists
	.ft_menu_sub-item {}
	.ft_menu_sub-link {}
	/*コピーライト表記
	-------------------------------*/
	.copyright {}
	/*ページTOPへ戻る
	-------------------------------*/
	.pagetop {}


}


/*================================
TABLET縦 834px～0px
================================*/
@media (max-width: 834px) {


	/* リンクボタン
	-------------------------------*/
	.link-btn {}

	/*================================
	ヘッダー
	================================*/
	.header {
		padding: 40px 40px 0;
	}
	.hd_content {}
	.hd_group01 {}
	.hd_content {}
	/*ロゴ
	-------------------------------*/
	.hd_logo {}
	.hd_logo_img {}


	/*================================
	グローバルナビ
	================================*/
	.g-nav_lists {}
	.g-nav_item {}
	.g-nav_link {}
	.g-nav_item:hover .g-nav_link {}

	/* サブメニュー
	-------------------------------*/
	.g-nav_sub-content {}
	.g-nav_item:hover .g-nav_sub-content {}
	.g-nav_sub-lists {}
	.g-nav_sub-item {}
	.g-nav_sub-link {}

	/*エントリーボタン
	-------------------------------*/
	.hd_entry {}
	.hd_entry-btn {}

	/*================================
	フッター
	================================*/
	.footer {}
	.footer .inner {}

	/*-------------------------------*/
	.ft-head {}
	.ft-head_content {}
	.ft-head_group01 {}
	.ft-head_group02 {}
	/*-------------------------------*/
	.ft-head_logo {}
	.ft-head_logo_img {}
	/*-------------------------------*/
	.ft-head_entry {}
	.ft-head_entry-btn {}
	/*-------------------------------*/
	.ft_menu {
		justify-content: flex-start;
	}
	.ft_menu_group {
		flex-flow: column;
	}
	.ft_menu_content {}
	.ft_menu_lists {
		width: calc(100%/4 - 4rem*3/4);
	}
	.ft_menu_title {}
	.ft_menu_link {}
	.ft_menu_sub-lists
	.ft_menu_sub-item {}
	.ft_menu_sub-link {}
	/*コピーライト表記
	-------------------------------*/
	.copyright {}
	/*ページTOPへ戻る
	-------------------------------*/
	.pagetop {}


}



/*================================
SP表示 667px～0px
================================*/
@media (max-width: 667px) {


	/* リンクボタン
	-------------------------------*/
	.link-btn {
		padding: 0.5rem 4rem 0.5rem 3rem;
		background-size: 3.4rem auto;
		/*font-size: 1.8rem;*/
		min-height: auto;
		background-position: right 3px center;
	}

	/*================================
	ヘッダー
	================================*/
	.header {
		padding: 0;
	}
	.hd_content {
		padding: 6px 10px;
		border: none;
		border-radius: 0;
		box-shadow: 0 0 10px rgba(0,0,0,0.12);
	}
	.hd_group01 {}
	.hd_group02 {
		gap: 0 2rem;
	}
	/*ロゴ
	-------------------------------*/
	.hd_logo {
		max-width: 120px;
	}
	.hd_logo_img {}


	/*================================
	グローバルナビ
	================================*/
	.g-nav_lists {}
	.g-nav_item {}
	.g-nav_link {}
	.g-nav_item:hover .g-nav_link {}

	/* サブメニュー
	-------------------------------*/
	.g-nav_sub-content {}
	.g-nav_item:hover .g-nav_sub-content {}
	.g-nav_sub-lists {}
	.g-nav_sub-item {}
	.g-nav_sub-link {}

	/*エントリーボタン
	-------------------------------*/
	.hd_entry {}
	.hd_entry-btn {}

	/*================================
	フッター
	================================*/
	.footer {}
	.footer .inner {}

	/*-------------------------------*/
	.ft-head {}
	.ft-head_content {}
	.ft-head_group01 {}
	.ft-head_group02 {}
	/*-------------------------------*/
	.ft-head_logo {
		max-width: 120px;
	}
	.ft-head_logo_img {}
	/*-------------------------------*/
	.ft-head_entry {}
	.ft-head_entry-btn {}
	/*-------------------------------*/
	.ft_menu {}
	.ft_menu_group {}
	.ft_menu_content {}
	.ft_menu_lists {
		width: calc(100%/2 - 4rem/2);
	}
	.ft_menu_title {}
	.ft_menu_link {}
	.ft_menu_sub-lists
	.ft_menu_sub-item {}
	.ft_menu_sub-link {}
	/*コピーライト表記
	-------------------------------*/
	.copyright {}
	/*ページTOPへ戻る
	-------------------------------*/
	.pagetop {
		right: 10px;
		width: 40px;
		height: 40px;
	}
	
}