@charset "utf-8";


/*===========================================

↓↓↓↓↓機能、構成やレイアウトに関するcss

===========================================*/


/*===============================
フレックスボックス
===============================*/
.flex {
	display: flex;
}
.fl_btw_str {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.fl_btw_sta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.fl_btw_cen {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fl_aro_str {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
}
.fl_aro_sta {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}
.fl_aro_cen {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.fl_cen_str {
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.fl_cen_sta {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.fl_cen_cen {
	display: flex;
	justify-content: center;
	align-items: center;
}
.fl_sta_str {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
.fl_sta_sta {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.fl_sta_cen {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
/* flex-flow */
.col_wrap{
	flex-flow: column wrap;
}
.col_nowrap{
	flex-flow: column nowrap;
}
.col_wrap-rev{
	flex-flow: column wrap-reverse;
}
.row_wrap{
	flex-flow: row wrap;
}
.row_nowrap{
	flex-flow: row nowrap;
}
.row-rev_wrap{
	flex-flow: row-reverse wrap;
}
.row-rev_nowrap{
	flex-flow: row-reverse nowrap;
}
.row_wrap-rev{
	flex-flow: row wrap-reverse;
}
.row-rev_wrap-rev{
	flex-flow: row-reverse wrap-reverse;
}

/*フレックスボックスの均等分割
-------------------------------*/
*[class^="fl_"] {
	/*background: red;*/
}
.-cut2,
.-cut3,
.-cut4,
.-cut5,
.-cut6,
.-cut7,
.-cut8 {
	column-gap: 4rem;
}
/* 1/2 */
.-cut2 > .fl_item {
	width: calc(100%/2 - (4rem/2));
}
.-cut2.gap-c0 > .fl_item {
	width: 50%;
}
/* 1/3 */
.-cut3 > .fl_item {
	width: calc(100%/3 - (8rem/3));
}
.-cut3.gap-c0 > .fl_item {
	width: calc(100%/3);
}
/* 1/4 */
.-cut4 > .fl_item {
	width: calc(100%/4 - (12rem/4));
}
.-cut4.gap-c0 > .fl_item {
	width: calc(100%/4);
}
/* 1/5 */
.-cut5 > .fl_item {
	width: calc(100%/5 - (16rem/5));
}
.-cut5.gap-c0 > .fl_item {
	width: calc(100%/5);
}
/* 1/6 */
.-cut6 > .fl_item {
	width: calc(100%/6 - (20rem/6));
}
.-cut6.gap-c0 > .fl_item {
	width: calc(100%/6);
}
/* 1/7 */
.-cut7 > .fl_item {
	width: calc(100%/7 - (24rem/7));
}
.-cut7.gap-c0 > .fl_item {
	width: calc(100%/7);
}
/* 1/8 */
.-cut8 > .fl_item {
	width: calc(100%/8 - (28rem/8));
}
.-cut8.gap-c0 > .fl_item {
	width: calc(100%/8);
}

/*フレックスボックスのgap
-------------------------------*/
/*
左右のgapを1rem＝10pxにすることで
タブレット表示の際に1rem＝8pxとなり
少し隙間を小さくする
*/
/*左右の隙間*/
.gap-c0 {
	column-gap: 0;
}
.gap-c10 {
	column-gap: 1rem;
}
.gap-c20 {
	column-gap: 2rem;
}
.gap-c30 {
	column-gap: 3rem;
}
.gap-c40 {
	column-gap: 4rem;
}
/*上下の隙間*/
.gap-r0 {
	row-gap: 0;
}
.gap-r10 {
	row-gap: 10px;
}
.gap-r20 {
	row-gap: 20px;
}
.gap-r30 {
	row-gap: 30px;
}
.gap-r40 {
	row-gap: 40px;
}
.gap-r50 {
	row-gap: 50px;
}
.gap-r60 {
	row-gap: 60px;
}
.gap-r70 {
	row-gap: 70px;
}
.gap-r80 {
	row-gap: 80px;
}

/*fl_itemの割合
-------------------------------*/
/*flex boxで左右に並ぶ2つのアイテムの幅を％で管理*/
.fl_item.-w20p {
	width: calc(20% - 2rem);
}
.fl_item.-w21p {
	width: calc(21% - 2rem);
}
.fl_item.-w22p {
	width: calc(22% - 2rem);
}
.fl_item.-w24p {
	width: calc(24% - 2rem);
}
.fl_item.-w25p {
	width: calc(25% - 2rem);
}
.fl_item.-w26p {
	width: calc(26% - 2rem);
}
.fl_item.-w28p {
	width: calc(28% - 2rem);
}
.fl_item.-w29p {
	width: calc(29% - 2rem);
}
.fl_item.-w30p {
	width: calc(30% - 2rem);
}
.fl_item.-w32p {
	width: calc(32% - 2rem);
}
.fl_item.-w34p {
	width: calc(34% - 2rem);
}
.fl_item.-w35p {
	width: calc(35% - 2rem);
}
.fl_item.-w36p {
	width: calc(36% - 2rem);
}
.fl_item.-w37p {
	width: calc(37% - 2rem);
}
.fl_item.-w38p {
	width: calc(38% - 2rem);
}
.fl_item.-w40p {
	width: calc(40% - 2rem);
}
.fl_item.-w42p {
	width: calc(42% - 2rem);
}
.fl_item.-w43p {
	width: calc(43% - 2rem);
}
.fl_item.-w46p {
	width: calc(46% - 2rem);
}
.fl_item.-w47p {
	width: calc(47% - 2rem);
}
.fl_item.-w48p {
	width: calc(48% - 2rem);
}
.fl_item.-w50p {
	width: calc(50% - 2rem);
}
.fl_item.-w52p {
	width: calc(52% - 2rem);
}
.fl_item.-w53p {
	width: calc(53% - 2rem);
}
.fl_item.-w54p {
	width: calc(54% - 2rem);
}
.fl_item.-w57p {
	width: calc(57% - 2rem);
}
.fl_item.-w58p {
	width: calc(58% - 2rem);
}
.fl_item.-w60p {
	width: calc(60% - 2rem);
}
.fl_item.-w62p {
	width: calc(62% - 2rem);
}
.fl_item.-w63p {
	width: calc(63% - 2rem);
}
.fl_item.-w64p {
	width: calc(64% - 2rem);
}
.fl_item.-w65p {
	width: calc(65% - 2rem);
}
.fl_item.-w66p {
	width: calc(66% - 2rem);
}
.fl_item.-w68p {
	width: calc(68% - 2rem);
}
.fl_item.-w70p {
	width: calc(70% - 2rem);
}
.fl_item.-w71p {
	width: calc(71% - 2rem);
}
.fl_item.-w72p {
	width: calc(72% - 2rem);
}
.fl_item.-w74p {
	width: calc(74% - 2rem);
}
.fl_item.-w75p {
	width: calc(75% - 2rem);
}
.fl_item.-w76p {
	width: calc(76% - 2rem);
}
.fl_item.-w78p {
	width: calc(78% - 2rem);
}
.fl_item.-w79p {
	width: calc(79% - 2rem);
}
.fl_item.-w80p {
	width: calc(80% - 2rem);
}

/*マージントップ
-------------------------------*/
.mt_auto {
	margin-top: auto;
}


/*================================
幅と高さの指定
================================*/

/*※幅と高さのpx指定、％指定について*/
/*================================

幅と高さの指定は以下の6種
・width と height
・max width と max height
・min width と min height

6種それぞれにpx指定した場合と、％指定した場合の2パターンがあります。

------------------------------
例：width, height（px指定）
------------------------------
width: 480px; → .w480, w480-tab, w480-sp
height: 480px; → .h480, h480-tab, h480-sp

.w〇-tab = タブレットの際に〇px
.w〇-sp = スマホの際に〇px


------------------------------
例：width, height（％指定）
------------------------------
・末尾にpercentの意味でpを追加

width: 100%; → .w100p, w100p-tab, w100p-sp
height: 100%; → .h100p, h100p-tab, h100p-sp


------------------------------
例：max width, max height（px指定）
------------------------------
・頭にmaxの意味でmx-を追加

max width: 480px; → .mx-w480, .mx-w480-tab, .mx-w480-sp
max height: 480px; → .mx-h480, .mx-h480-tab, .mx-h480-sp


------------------------------
例：max width, max height（％指定）
------------------------------
・末尾にpercentの意味でpを追加

max width: 100%; → .mx-w100p, .mx-w100p-tab, .mx-w100p-sp
max height: 100%; → .mx-h100p, .mx-h100p-tab, .mx-h100p-sp


------------------------------
例：min width, min height（px指定）
------------------------------
・頭にminの意味でmn-を追加

min width: 480px; → .mn-w480, .mn-w480-tab, .mn-w480-sp
min height: 480px; → .mn-h480, .mn-h480-tab, .mn-h480-sp


------------------------------
例：min width, min height（％指定）
------------------------------
・末尾にpercentの意味でpを追加

min width: 100%; → .mn-w100p, .mn-w100p-tab, .mn-w100p-sp
min height: 100%; → .mn-h100p, .mn-h100p-tab, .mn-h100p-sp

================================*/


/*width（px指定）
-------------------------------*/
.w480 {
	width: 480px;
}
.w490 {
	width: 490px;
}

/*width（％指定）
-------------------------------*/
.w100p {
	width: 100%;
}

/*height（px指定）
-------------------------------*/
.h00 {
	height: 00px;
}

/*height（％指定）
-------------------------------*/
.h100p {
	height: 100%;
}

/*max width（px指定）
-------------------------------*/
.mx-w360 {
	max-width: 360px;
	width: 100%;
}
.mx-w400 {
	max-width: 400px;
	width: 100%;
}
.mx-w490 {
	max-width: 490px;
	width: 100%;
}
.mx-w530 {
	max-width: 530px;
	width: 100%;
}
.mx-w670 {
	max-width: 670px;
	width: 100%;
}
.mx-w755 {
	max-width: 755px;
	width: 100%;
}
.mx-w840 {
	max-width: 840px;
	width: 100%;
}
.mx-w860 {
	max-width: 860px;
	width: 100%;
}

/*max width（％指定）
-------------------------------*/
.mx-w100p {
	max-width: 100%;
	width: 100%;
}

/*max height（px指定）
-------------------------------*/
.mx-h00 {
	max-height: 00px;
}

/*max height（％指定）
-------------------------------*/
.mx-h100p {
	max-height: 100%;
}

/*min width（px指定）
-------------------------------*/
.mn-w00 {
	min-width: 00px;
}

/*min width（％指定）
-------------------------------*/
.mn-w100p {
	min-width: 100%;
}

/*min height（px指定）
-------------------------------*/
.mn-h00 {
	min-height: 00px;
}

/*min height（％指定）
-------------------------------*/
.mn-h100p {
	min-height: 100%;
}







/*================================
↓　各ブレイクポイント毎の flex-direction
==================================
横並びのアイテムのflex-direction を column に変更して
タブレット・スマホ幅で見やすいように変更する
==================================
.col_wrap-pc…………………ノートPCで縦並びにする
.col_wrap-tab_lg………タブレット(横画面)で縦並びにする
.col_wrap-tab………………タブレット(縦画面)で縦並びにする
.col_wrap-sp…………………スマホで縦並びにする
================================*/



/*================================
ノートPC 1366px～0px
================================*/
@media (max-width: 1366px) {
	/* flex-flow　縦並び
	-------------------------------*/
	.col_wrap-pc {
		flex-flow: column wrap;
	}
	.col_wrap-pc > .fl_item {
		width: 100%!important;
	}
}


/*================================
TABLET横 1080px～0px
================================*/
@media screen and (max-width: 1080px) {
	/* flex-flow　縦並び
	-------------------------------*/
	.col_wrap-tab_lg {
		flex-flow: column wrap;
	}
	.col_wrap-tab_lg > .fl_item {
		width: 100%!important;
	}
}


/*================================
TABLET縦 834px～0px
================================*/
@media screen and (max-width: 834px) {
	/* flex-flow　縦並び
	-------------------------------*/
	.col_wrap-tab {
		flex-flow: column wrap;
	}
	.col_wrap-tab > .fl_item {
		width: 100%!important;
	}

	/*フレックスボックスの均等分割
	-------------------------------*/
	/* 1/2 */
	.-cut2-tab > .fl_item {
		width: calc(100%/2 - (4rem/2));
	}
	.-cut2-tab.gap-c0 > .fl_item {
		width: 50%;
	}
	/* 1/3 */
	.-cut3-tab > .fl_item {
		width: calc(100%/3 - (8rem/3));
	}
	.-cut3-tab.gap-c0 > .fl_item {
		width: calc(100%/3);
	}
	/* 1/4 */
	.-cut4-tab > .fl_item {
		width: calc(100%/4 - (12rem/4));
	}
	.-cut4-tab.gap-c0 > .fl_item {
		width: calc(100%/4);
	}

	/*フレックスボックスのgap
	-------------------------------*/
	/*上下の隙間*/
	.gap-r0-sp {
		row-gap: 0;
	}
	.gap-r10-sp {
		row-gap: 10px;
	}
	.gap-r20-sp {
		row-gap: 20px;
	}
	.gap-r30-sp {
		row-gap: 30px;
	}
	.gap-r40-sp {
		row-gap: 40px;
	}

	/*================================
	幅と高さの指定
	================================*/

	/*width（px指定）
	-------------------------------*/
	.w00-tab {
		width: 00px;
	}

	/*width（％指定）
	-------------------------------*/
	.w100p-tab {
		width: 100%;
	}

	/*height（px指定）
	-------------------------------*/
	.h00-tab {
		height: 00px;
	}

	/*height（％指定）
	-------------------------------*/
	.h100p-tab {
		height: 100%;
	}

	/*max width（px指定）
	-------------------------------*/
	.mx-w00-tab {
		max-width: 00px;
		width: 100%;
	}

	/*max width（％指定）
	-------------------------------*/
	.mx-w100p-tab {
		max-width: 100%;
		width: 100%;
	}

	/*max height（px指定）
	-------------------------------*/
	.mx-h00-tab {
		max-height: 00px;
	}

	/*max height（％指定）
	-------------------------------*/
	.mx-h100p-tab {
		max-height: 100%;
	}

	/*min width（px指定）
	-------------------------------*/
	.mn-w00-tab {
		min-width: 00px;
	}

	/*min width（％指定）
	-------------------------------*/
	.mn-w100p-tab {
		min-width: 100%;
	}

	/*min height（px指定）
	-------------------------------*/
	.mn-h00-tab {
		min-height: 00px;
	}

	/*min height（％指定）
	-------------------------------*/
	.mn-h100p-tab {
		min-height: 100%;
	}


}


/*================================
SP表示 667px～0px
================================*/
@media (max-width: 667px)  {
	/* flex-flow　縦並び
	-------------------------------*/
	.col_wrap-sp {
		flex-flow: column wrap;
	}
	.col_wrap-sp > .fl_item {
		width: 100%!important;
	}

	/*フレックスボックスの均等分割
	-------------------------------*/
	.-cut2,
	.-cut3,
	.-cut4,
	.-cut5,
	.-cut6,
	.-cut7,
	.-cut8 {
		column-gap: 20px;
	}
	/* 1/2 */
	.-cut2 > .fl_item {
		width: calc(100%/2 - (20px/2));
	}
	/* 1/3 */
	.-cut3 > .fl_item {
		width: calc(100%/3 - (40px/3));
	}
	/* 1/4 */
	.-cut4 > .fl_item {
		width: calc(100%/4 - (60px/4));
	}

	/*フレックスボックスの均等分割
	-------------------------------*/
	/* 1/2 */
	.-cut2-tab > .fl_item {
		width: calc(100%/2 - (20px/2));
	}
	/* 1/3 */
	.-cut3-tab > .fl_item {
		width: calc(100%/3 - (40px/3));
	}
	/* 1/4 */
	.-cut4-tab > .fl_item {
		width: calc(100%/4 - (60px/4));
	}

	/*フレックスボックスの均等分割
	-------------------------------*/
	/* 1/2 */
	.-cut2-sp > .fl_item {
		width: calc(100%/2 - (20px/2));
	}
	/* 1/3 */
	.-cut3-sp > .fl_item {
		width: calc(100%/3 - (40px/3));
	}
	/* 1/4 */
	.-cut4-sp > .fl_item {
		width: calc(100%/4 - (60px/4));
	}
	/* 1/2 */
	.-cut2-sp > .fl_item {
		width: calc(100%/2 - (20px/2));
	}


	/*================================
	幅と高さの指定
	================================*/

	/*width（px指定）
	-------------------------------*/
	.w00-sp {
		width: 00px;
	}

	/*width（％指定）
	-------------------------------*/
	.w100p-sp {
		width: 100%;
	}

	/*height（px指定）
	-------------------------------*/
	.h00-sp {
		height: 00px;
	}

	/*height（％指定）
	-------------------------------*/
	.h100p-sp {
		height: 100%;
	}

	/*max width（px指定）
	-------------------------------*/
	.mx-w00-sp {
		max-width: 00px;
		width: 100%;
	}
	.mx-w120-sp {
		max-width: 120px;
		width: 100%;
	}
	.mx-w200-sp {
		max-width: 200px;
		width: 100%;
	}

	/*max width（％指定）
	-------------------------------*/
	.mx-w100p-sp {
		max-width: 100%;
		width: 100%;
	}

	/*max height（px指定）
	-------------------------------*/
	.mx-h00-sp {
		max-height: 00px;
	}

	/*max height（％指定）
	-------------------------------*/
	.mx-h100p-sp {
		max-height: 100%;
	}

	/*min width（px指定）
	-------------------------------*/
	.mn-w00-sp {
		min-width: 00px;
	}

	/*min width（％指定）
	-------------------------------*/
	.mn-w100p-sp {
		min-width: 100%;
	}

	/*min height（px指定）
	-------------------------------*/
	.mn-h00-sp {
		min-height: 00px;
	}

	/*min height（％指定）
	-------------------------------*/
	.mn-h100p-sp {
		min-height: 100%;
	}


}

/*===========================================

↑↑↑↑↑機能、構成やレイアウトに関するcss

===========================================*/







/*===========================================

↓↓↓↓↓外観、デザインや飾りに関するcss

===========================================*/


/*================================
コンテナ類、幅制御
===============================*/
.main {}
.section {
	padding-top: 10rem;
	padding-bottom: 10rem;
}
.section .inner {
	margin: 0 auto;
	max-width: calc(1000px + 100px);
	padding-left: 50px;
	padding-right: 50px;
}
.section .inner.-wide {
	max-width: calc(1200px + 100px);
}
.content {}
.content:not(:last-child) {
	padding-bottom: 100px;
}

/*================================
メインビジュアル
===============================*/
.mainvisual {
	/* background: #008080; */
	/* background: rgba(255, 255, 255, 0.8); */
	position: relative;
	padding: 0 30px 30px 90px;
}
.mainvisual:before {
	content: "";
	background: #008080;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 94.5%;
}
.mainvisual:after {
	content: "";
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	left: 0;
	top: 0;
	width: 307px;
	height: 5.5%;
}
.mainvisual_container:before,
.mainvisual_container:after {
	content: "";
	position: absolute;
}
.mainvisual_container:before {
	background: url(../img/mv_deco_l.png) no-repeat left top / contain;
	left: 0;
	top: 0;
	width: 308px;
	height: 362px;
}
.mainvisual_container:after {
	background: url(../img/mv_deco_r.png) no-repeat right bottom / contain;
	right: 0;
	bottom: 0;
	width: 149px;
	height: 248px;
}
.mainvisual_container {
	/* padding: 0 30px 60px 70px; */
}
.mainvisual_inner {
	max-width: 1260px;
	margin-inline: auto;
	position: relative;
	z-index: 10;
}
.mainvisual_img {
	text-align: right;
	padding-left: 50px;
}
.mainvisual_img-item {
	display: inline-block;
}
.mainvisual_catchcopy {
	position: absolute;
	left: 0;
	top: 25%;
	text-shadow: 1px 1px 9px rgba(0, 0, 0, 0.4);
}
.mainvisual_catchcopy_jp {
	display: inline-block;
	margin-right: 10px;
	font-size: clamp(20px, 48 / 1200 * 100vw, 48px);
	color: #fff;
}
.mainvisual_catchcopy_en {
	display: inline-block;
	font-size: clamp(16px, 48 / 1200 * 100vw, 34px);
	color: #fff;
}

/* パンくずリスト
================================*/
.breadcrumb {}
.breadcrumb .inner {
	max-width: calc(1200px + 100px);
	margin: 0 auto;
	padding-top: 10px;
	padding-left: 50px;
	padding-right: 50px;
}
.breadcrumb_lists {
	display: flow-root;
}
.breadcrumb_lists li {
	float: left;
	position: relative;
	z-index: 1;
	font-size: 1.6rem;
	line-height: 1.2;
	color: #333;
}
.breadcrumb_lists li a {
	color: #333;
}
.breadcrumb_lists li:not(:last-child) {
	margin-right: 20px;
}
.breadcrumb_lists li:not(:last-child)::after {
	position: absolute;
	content: ">";
	top: -1px;
	right: -18px;
	width: 12px;
	height: 13px;
	color: #333;
}

/*margin-bottom
================================*/
.mb0{
	margin-bottom:0 !important;
}
.mb10{
	margin-bottom:10px !important;
}
.mb15{
	margin-bottom:15px !important;
}
.mb20{
	margin-bottom:20px !important;
}
.mb25{
	margin-bottom:25px !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;
}

/* 見出し
================================*/
/*section_heading*/
/*-----------------------------*/
.section_heading {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
	margin-bottom: 50px;
}
.section_heading::before {
	position: absolute;
	z-index: -1;
	content: "";
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100vw;
	height: 3px;
}
.section_heading_bg {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 12.4rem;
	padding: 0 1.6rem 0.4rem;
	background-position: center;
	background-size: auto 12.4rem;
	background-repeat: no-repeat;
}
.section_heading_en {
	font-size: clamp(36px, 48 / 1200 * 100vw, 48px);
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0.1em;
	color: #008080;
}
.section_heading_jp {
	font-size: clamp(20px, 30 / 1200 * 100vw, 30px);
	text-align: center;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
/*type*/
.section_heading.-type01::before {
	background: #f6f6f6;
}
.section_heading.-type01 .section_heading_bg {
	background-image: url(../img/section_heading_deco01.png);
	background-color: #fff;
}
.section_heading.-type02::before {
	background: #f6f6f6;
}
.section_heading.-type02 .section_heading_bg {
	background-image: url(../img/section_heading_deco02.png);
	background-color: #eee;
}

/*content_heading*/
/*-----------------------------*/
.content_heading01 {
	position: relative;
	z-index: 1;
	margin-bottom: 50px;
	padding-bottom: 6px;
	border-bottom: 2px solid #eee;
	font-size: clamp(24px, 30 / 1200 * 100vw, 30px);
	letter-spacing: 0.1em;
}
.content_heading01.-type02 {
	border-bottom-color: #fff;
}
.content_heading01::before {
	position: absolute;
	z-index: -1;
	content: "";
	left: 0;
	bottom: -2px;
	height: 2px;
	width: 5rem;
	background: #008080;
}
.content_heading02 {
	margin-bottom: 40px;
	padding: 2px 10px;
	background: #008080;
	border-radius: 10px;
	font-size: clamp(16px, 24 / 1200 * 100vw, 24px);
	text-align: center;
	line-height: 1.2;
	color: #fff;
}
.content_heading03 {
	margin-bottom: 10px;
	font-size: clamp(18px, 22 / 1200 * 100vw, 22px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #008080;
}

/*item_heading*/
/*-----------------------------*/
.item_heading01 {
	margin-bottom: 30px;
	font-size: clamp(20px, 30 / 1200 * 100vw, 30px);
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #008080;
}
.item_heading02 {
	margin-bottom: 10px;
	font-size: clamp(18px, 22 / 1200 * 100vw, 22px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.1em;
	color: #008080;
}

/* フレーム
================================*/
/*frame-plain*/
.frame-plain {
	padding: 30px;
	background: rgba(255,255,255,0.7);
	border-radius: 10px;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
}
/*frame-deco*/
.frame-deco {
	position: relative;
	z-index: 1;
	padding: 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
}
.frame-deco_body {
	padding: 20px 20px;
	border: 2px solid rgba(0, 128, 128,0.9);
	border-radius: 10px;
}
.frame-deco:before,
.frame-deco:after,
.frame-deco_body:before,
.frame-deco_body:after {
	position: absolute;
	content: "";
	width: 11px;
	height: 11px;
	border: 2px solid rgba(0, 128, 128,0.9);
	border-radius: 50%;
}
.frame-deco:before {
	right: 5px;
	top: 5px;
}
.frame-deco:after {
	left: 5px;
	top: 5px;
}
.frame-deco_body:before {
	right: 5px;
	bottom: 5px;
}
.frame-deco_body:after {
	left: 5px;
	bottom: 5px;
}
/*padding*/
[class*="frame-"].-pd20 {
	padding: 20px;
}
[class*="frame-"].-pd30 {
	padding: 30px;
}
[class*="frame-"].-pd40 {
	padding: 40px;
}
[class*="frame-"].-pd50 {
	padding: 50px;
}

/* 背景（コンテンツ幅）
================================*/
.bg-fff {
	background-color: #fff;
}
.bg-eee {
	background-color: #eee;
}
.wave-eee {
	background-image: url(../img/wave-eee.png);
	background-position: top center;
	background-repeat: repeat-x;
}
.wave-fff {
	background-image: url(../img/wave-fff.png);
	background-position: top center;
	background-repeat: repeat-x;
}

/* 影
================================*/
.shadow01 {
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
}
/*
.shadow02 {
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
	border-radius: 4%;
}
*/
/* ブロック要素、インライン要素
================================*/
.inline-block {
	display: inline-block;
}
.block {
	display: block;
}
.block_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.block_right {
	display: block;
	margin-left: auto;
}
.block_left {
	display: block;
	margin-right: auto;
}

/* 文字
================================*/
.text_center {
	text-align: center !important;
}
.text_left {
	text-align: left !important;
}
.text_right {
	text-align: right !important;
}

/* 文字ウェイト
================================*/
/*Medium*/
.fw500 {
	font-weight: 500;
	vertical-align: baseline;
}
/*Bold*/
.fw700 {
	font-weight: 700;
	vertical-align: baseline;
}

/*文字カラー
================================*/
.fc-fff {
	color: #fff!important;
	vertical-align: baseline;
}
.fc-333 {
	color: #333!important;
	vertical-align: baseline;
}
.fc-008080 {
	color: #008080!important;
	vertical-align: baseline;
}
.fc-e4007f {
	color: #e4007f!important;
	vertical-align: baseline;
}

/* 文字サイズ
================================*/
.fs16 {
	font-size: 1.6rem;
	vertical-align: baseline;
}
.fs18 {
	font-size: 1.8rem;
	vertical-align: baseline;
}
.fs20 {
	font-size: 2rem;
	vertical-align: baseline;
}
.fs22 {
	font-size: 2.2rem;
	vertical-align: baseline;
}
.fs24 {
	font-size: 2.4rem;
	vertical-align: baseline;
}
.fs26 {
	font-size: 2.6rem;
	vertical-align: baseline;
}

/* 注釈コメント
================================*/
.kome {
	padding-left: 1em;
	text-indent: -1em;
}

/* リンクボタン
================================*/
.button-link {
	width: 100%;
	border-radius: 10px;
	border: 1px solid #008080;
	background: #fff;
	min-height: 50px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	place-content: center;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
	text-align: center;
	line-height: 1.5;
	color: #333;
	cursor: pointer;
}
.button-link span:before,
.button-link span:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.button-link span {
	position: relative;
	display: inline-block;
	padding-right: 35px;
}
.button-link span:first-letter {
	color: #008080;
}
.button-link span:before {
	content: "";
	border-radius: 50%;
	width: 25px;
	height: 25px;
	right: 0;
	border: 1px solid #333;
}
.button-link span:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #008080;
	right: 6px;
}

/* チェックリストなど
================================*/
/*check*/
.li-check {
	padding-left: 1.7em;
	background: url(../img/li-check.png)left top 0.6em/1em auto no-repeat;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
	font-weight: 700;
	text-align: left;
}
/*dot*/
.li-dot {
	position: relative;
	padding-left: 1em;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
	text-align: left;
}
.li-dot::before {
	position: absolute;
	content: "";
	left: 0.4em;
	top: 0.9em;
	width: 0.3rem;
	height: 0.3rem;
	background: #333;
	border-radius: 50%;
}
.li-dot02 {
	position: relative;
	padding-left: 1em;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
	text-align: left;
}
.li-dot02::before {
	position: absolute;
	content: "";
	left: 0.4em;
	top: 0.86em;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid #333;
	border-radius: 50%;
}
/*number*/
.ol-num {
	counter-reset: ol-num;
}
.ol-num > li {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
}
.ol-num > li::before {
	counter-increment: ol-num;
	content: counter(ol-num)".";
	display: block;
	width: 1.4em;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
}
.ol-num > li > .text {
	width: calc(100% - 1.4em);
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
}
.ol-num02 {
	counter-reset: ol-num02;
}
.ol-num02 > li {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
}
.ol-num02 > li::before {
	counter-increment: ol-num02;
	content: "("counter(ol-num02)")";
	display: block;
	width: 2em;
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
}
.ol-num02 > li > .text {
	width: calc(100% - 2em);
	font-size: clamp(16px, 18 / 1200 * 100vw, 18px);
}



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

	/*================================
	メインビジュアル
	===============================*/
	.mainvisual_container:before,
	.mainvisual_container:after {
		width: 25%;
	}
	.mainvisual:after {
		width: 25%;
	}


}


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

	/*================================
	コンテナ類、幅制御
	===============================*/
	.main {}
	.section {}
	.section .inner {}
	.section .inner.-wide {}
	.content {}
	.content:not(:last-child) {}

	/*================================
	メインビジュアル
	===============================*/
	.mainvisual_catchcopy {
		line-height: 1.5;
	}




}


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

	/* 横スクロール
	================================*/
	.tab-scroll {
		overflow-x: scroll;
		position: relative;
		z-index: 1;
	}
	.scroll_text {
		text-align: center;
	}
	.scroll_text .word {
		position: relative;
		z-index: 1;
		display: inline-block;
		padding-right: 20px;
		padding-bottom: 0.2em;
		font-size: 2rem;
		line-height: 1;
		color: #856d53;
	}
	.scroll_text .word::after {
		position: absolute;
		content: "";
		right: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		border-left: 8px solid #39b54a;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
	}


	/*================================
	コンテナ類、幅制御
	===============================*/
	.main {}
	.section {}
	.section .inner {
		padding-left: 40px;
		padding-right: 40px;
	}
	.content {}
	.content:not(:last-child) {}

	/*================================
	メインビジュアル
	===============================*/
	.mainvisual {
		padding: 0 15px 40px 60px;
	}


	/* パンくずリスト
	================================*/
	.breadcrumb {}
	.breadcrumb .inner {
		padding-left: 40px;
		padding-right: 40px;
	}
	.breadcrumb_lists {}
	.breadcrumb_lists li {}
	.breadcrumb_lists li a {}
	.breadcrumb_lists li:not(:last-child) {}
	.breadcrumb_lists li:not(:last-child)::after {}
	
	/* 見出し
	================================*/
	/*section_heading*/
	/*-----------------------------*/
	.section_heading {}
	.section_heading::before {}
	.section_heading_bg {}
	.section_heading_en {}
	.section_heading_jp {}
	/*type*/
	.section_heading.-type01::before {}
	.section_heading.-type01 .section_heading_bg {}
	.section_heading.-type02::before {}
	.section_heading.-type02 .section_heading_bg {}

	/*content_heading*/
	/*-----------------------------*/
	.content_heading01 {}
	.content_heading02 {}
	.content_heading03 {}

	/*item_heading*/
	/*-----------------------------*/
	.item_heading01 {}

	/* フレーム
	================================*/
	/*frame-plain*/
	.frame-plain {}
	/*frame-deco*/
	.frame-deco {}
	.frame-deco_body {}
	.frame-deco:before,
	.frame-deco:after,
	.frame-deco_body:before,
	.frame-deco_body:after {}
	.frame-deco:before {}
	.frame-deco:after {}
	.frame-deco_body:before {}
	.frame-deco_body:after {}
	/*padding*/
	[class*="frame-"].-pd20 {}
	[class*="frame-"].-pd30 {}
	[class*="frame-"].-pd40 {}
	[class*="frame-"].-pd50 {}
	
	/* チェックリストなど
	================================*/
	/*.li-check {}*/



}



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

	/* 横スクロール
	================================*/
	.sp-scroll {
		overflow-x: scroll;
		position: relative;
		z-index: 1;
	}


	/*================================
	コンテナ類、幅制御
	===============================*/
	.main {}
	.section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.section .inner {
		padding-left: 20px;
		padding-right: 20px;
	}
	.content {}
	.content:not(:last-child) {}

	/*================================
	メインビジュアル
	===============================*/
	.mainvisual {
		padding: 0 10px 30px 30px;
	}
	.mainvisual:after {
		height: 15%;
	}
	.mainvisual:before {
		height: 85%;
	}
	.mainvisual_img {
		padding-left: 30px;
	}


	/* パンくずリスト
	================================*/
	.breadcrumb {}
	.breadcrumb .inner {}
	.breadcrumb_lists {}
	.breadcrumb_lists li {}
	.breadcrumb_lists li a {}
	.breadcrumb_lists li:not(:last-child) {}
	.breadcrumb_lists li:not(:last-child)::after {}

	/* 見出し
	================================*/
	/*section_heading*/
	/*-----------------------------*/
	.section_heading {}
	.section_heading::before {}
	.section_heading_bg {}
	.section_heading_en {}
	.section_heading_jp {}
	/*type*/
	.section_heading.-type01::before {}
	.section_heading.-type01 .section_heading_bg {
		min-height: 100px;
		background-size: auto 100px;
	}
	.section_heading.-type02::before {}
	.section_heading.-type02 .section_heading_bg {}

	/*content_heading*/
	/*-----------------------------*/
	.content_heading01 {}
	.content_heading02 {}
	.content_heading03 {}

	/*item_heading*/
	/*-----------------------------*/
	.item_heading01 {}

	/* フレーム
	================================*/
	/*frame-plain*/
	.frame-plain {
		padding: 16px;
	}
	/*frame-deco*/
	.frame-deco {}
	.frame-deco_body {}
	.frame-deco:before,
	.frame-deco:after,
	.frame-deco_body:before,
	.frame-deco_body:after {}
	.frame-deco:before {}
	.frame-deco:after {}
	.frame-deco_body:before {}
	.frame-deco_body:after {}
	/*padding*/
	[class*="frame-"].-pd20 {}
	[class*="frame-"].-pd30 {}
	[class*="frame-"].-pd40 {}
	[class*="frame-"].-pd50 {}

	/* チェックリストなど
	================================*/
	/*.li-check {}*/





}