@charset "utf-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 初版 1.0.0
	┃　■ 2版 1.0.1  update:2024/01/10
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* CSS Document */

/*	┌…………………………………………………………………………………………………………………………………………………………┐
	︙
	︙　□ bootstrap5.0.3向けの拡張CSS（5.3非対応）
	︙
	︙　再配布の予定はありません。この拡張を希望する場合は連絡してください。内容を確認し全てに適用する場合は追加します。
	︙　Bootstrap5の拡張ではない場合は、個別のCSSで対応をお願いする場合があります。
	︙
	└…………………………………………………………………………………………………………………………………………………………┘*/




/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ aside要素
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│
	│　□ 基本設定
	│
	└─────────────────────────────┘*/

		aside {
			z-index:9; /* container-bg-vmax要素の上に配置するために指定する */
		}



/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ main要素
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│
	│　□ お知らせ
	│
	└─────────────────────────────┘*/

/* 西濃運輸タイプのお知らせ表示 */
ul.news-01 {
	margin:0 0.5rem 2rem 0.5rem;
	padding-left:0;
}

	ul.news-01 li {
		border-top:1px solid #cdcdcd;
		list-style-type:none;
		margin-bottom:0;
		position: relative;
	}

	ul.news-01 li:after {
		content: "\F285";
			font-family: bootstrap-icons;
			margin-left:0.5em;
			position: absolute;
			right:1rem;
			top:calc(50% - 0.9rem); /* 複数行になった場合に対応するため、修正の余地あり */
			font-size: 1.2rem;
			font-weight: bold;
			color:rgba(0,0,0,0.30);
	}

		ul.news-01 li:last-child {
			border-bottom:1px solid #cdcdcd;
		}



			ul.news-01 li span.news-date {
				display:block;
				width:10em;
				color:#000000;
				font-size:0.9rem;
				font-weight: bold;
			}

			@media screen and (min-width: 768px) {
				ul.news-01 li span.news-date {
					display:inline-block;
				}
			}
	ul.news-01 li a {
		display:block;
		height:100%;
		padding:2rem 3rem 2rem 1rem;
	}

	/* ただのお知らせ */
	ul.news-01 li a {
		color:rgba(0,100,255,1.00);
		background-color: transparent;
		    transition: 0.3s all;
	}
	ul.news-01 li a:hover  {
		background-color: rgba(0,102,255,0.10);
		    transition: 0.3s all;
		
		    -webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
	}

	/* 重要なお知らせ */
	ul.news-01.news-important li a {
		color:#FF0004;
	}
	ul.news-01.news-important li a:hover  {
		background-color: rgba(255,0,0,0.07);
		    transition: 0.3s all;
		
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
	}





/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ 文章はpタグの中に掲載する 
	︙　
	└…………………………………………………………………………………………………………………………┘*/
	
		main p {
			line-height: 185%;
			
			/* 下記のpaddingをmarginで指定すると背景色を設定した際に、内包する要素が枠ギリギリに表示するため「見にくい」
			下マージンは、次の要素と隣接しすぎないようにするために指定*/
			margin:0 0 1rem 0; 
			
			/* 以前はmarginで指定していたが、上記を追加した際にpaddingへ変更する。 */
			padding:0 0.5rem 0 0.5rem;
		}


/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 表示文字数をviewportで調整するエリア
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

		/* 表示文字数を指定するエリアに設置 */
		p.countlinkText {
			line-height:120% !important;
			letter-spacing:0em;
			margin:0.25rem 0rem 0rem 0rem;
		}
			div:has(p.countlinkText) h4 {
				margin-bottom:0.15rem !important;
			}
		/* lg .col-lg- */
		@media screen and (min-width: 992px) {
			p.countlinkText {
				padding:0rem 0rem 0rem 0rem;
			}	
		}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ ページのタイトルエリア
	│　
	└──────────────────────────────────────────────────────────┘*/

		.pageTitle {
			padding-top:20rem;
			padding-bottom:1rem;
			margin-bottom:3rem;
			/* 背景画像の設定 */
				background-size: cover;
				background-repeat: no-repeat;
				background-position: left 50% top 50%;
				/* background-blend-mode:darken; 背景画像との描画モードの設定 */
				background-color:rgba(0,0,0,0.5);
				filter:grayscale(50%);/*  */
				/* backdrop-filter:grayscale(80%); blur(8px) grayscale(80%) */
				/* -webkit-backdrop-filter:grayscale(80%); blur(8px) grayscale(80%) */
				
		}
			.pageTitle h2 {
				font-size:3rem;
			}
			.pageTitle h2 span.bodyText {
				display:block;
				margin-top:1rem;
				font-size:1rem;
				letter-spacing:0.15em !important;
			}

/*	┌─────────────────────────────┐
	│
	│　□ footer要素
	│
	└─────────────────────────────┘*/
	.pageTopLink{
		font-size:52pt;
		margin:0;
	}
		footer ol,
		footer ul {
			 margin-top:1rem;
			 padding-left: 1rem;
		}
		/* ■■■　footerで表示する会社名　■■■ */
		p span.footerCompanyName {
			font-size:15pt;
			letter-spacing:-0.025em;
			font-weight:bold;
		}
		/* ■■■　footerで表示するSNSアイコン（個別に色は指定する）　■■■ */
		footer p.snsicon i {
			font-size:1.8rem;
			display:inline-block;
			margin-right:1rem;
		}
		/* ■■■　footerで表示するコピーライト　■■■ */
		footer .copyright {
			border-top:1px solid #cdcdcd;
			text-align:center;
			font-size:9pt;
			opacity: 0.8;
			padding:1em 0 2em 0;
		}



		/* ■■■　footer領域のsection下のマージンは不要　■■■ */
		footer section {
			padding-bottom:2rem;
			margin-bottom:0rem;
			}

		 /* ■■■　footerで使用する、補足説明、登録商標の注意書きを書くためのスタイル。文字を小さくして若干文字を薄くしている。　■■■ */

		footer p.supplement,
		footer ol.supplement li {
			opacity: 0.8;
			font-size:8pt;
			line-height:120%;
			margin:0;/* Bootstrapではデフォルト1rem */
		}

		 /* ■■■　footerで使用する、サイトマップで使用　■■■ */

			footer .sitemap ul {
				margin-top: 0.5em;
			}

				footer .sitemap li {
					font-size:8pt;
					margin-bottom: 0.75em;
					list-style-type:"■ ";
					color:rgba(0,0,0,0.15);
				}

					/* footerのサイトマップの自サイトリンクに > を右につける */
					footer .sitemap li a[target="_self"]:after {
						/*　適用せず
						content: "\F285";
						font-weight: 600;
						font-family: bootstrap-icons;
						margin-left:0.5em;
						vertical-align: bottom;
						*/
					}





/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ Bootstrap5拡張
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* */
	.modal-dialog {
		width: min(100% - 2rem,800px);
}
		@media (min-width: 576px){
			.modal-dialog {
				max-width: 800px;
				margin-top:0rem;
				padding-right: 0;
			}
		}


/*	 ┌──────────────────────────────
	 │　
	 │　□ border　追加設定
	 │　
	 │　borderの幅(太さ)だけ内容する要素の幅を小さくする。
	 │　これにより幅の数値が大きくなることを防ぐことで、意図しない改行を防ぐ。高さは対応しない。
	 │　
	 └──────────────────────────────*/


/* 必ず左右のborderを指定するとは限らないため設定しない。この間違いを繰り返さないようにするために残す

.border-1 {width:calc(100% - 2px);}
.border-2 {width:calc(100% - 4px);}
.border-3 {width:calc(100% - 6px);}
.border-4 {width:calc(100% - 8px);}
.border-5 {width:calc(100% - 10px);}
.border-6 {width:calc(100% - 12px);}
.border-7 {width:calc(100% - 14px);}
.border-8 {width:calc(100% - 16px);}
.border-9 {width:calc(100% - 18px);}
.border-10 {width:calc(100% - 20px);}

*/

/* borderの太さは、Bootstrapではpxで設定する。*/

.border-6 {border-width: 6px !important;}
.border-7 {border-width: 7px !important;}
.border-8 {border-width: 8px !important;}
.border-9 {border-width: 9px !important;}
.border-10 {border-width: 10px !important;}

/*	 ┌──────────────────────────────
	 │　
	 │　□ border　追加色設定
	 │　・http://creators-manual.com/tone/
	 │　
	 │　※color.css　のほうが、色指定の詳細を記述する予定。
	 │　迷った場合は、color.cssを優先する。
	 │　
	 └──────────────────────────────*/

.border-lightgray-nx1,
.border-gray-li-nx1 {border-color:rgba(200,200,200,1.00) !important;}

.border-darkblue-nx1,
.border-blue-da-nx1 {border-color:rgba(0,50,100,1.00) !important;}

.border-darkblue-nx2,
.border-blue-da-nx2 {border-color:rgba(0,77,187,1.00) !important;}

/* 上記の色指定は、暫定版 nxの記載のあるセレクタは試作版です。 */

/*	 ┌──────────────────────────────
	 │　
	 │　□ z-index
	 │　
	 │　・positionを付け加えないこと。必ずrelativeとは限らない。
	 │　・zindexは、今後は記述方法として使用しない。
	 │　・ネガティブな値を使用する場合は、数値の前にnを記述する。
	 │　
	 └──────────────────────────────*/

.z-n9,
.zindex-n9 {
	z-index:-9;
}

.z-n99,
.zindex-n99 {
	z-index:-99;
}

.z-9{
	z-index:9;
}

.z-10{
	z-index:10;
}

.z-99 {
	z-index:99;
}

.z-1200 {
	/* bt5の標準要素より前に表示するな愛に使用します */
	z-index:1200; 
	}

.z-1300 {
	z-index:1300;
}


/*	 ┌──────────────────────────────
	 │　
	 │　□ border-radius　追加設定 (for bt5.0.3)
	 │　
	 │　rounded-1=0.20rem > rounded-2=0.25rem > rounded-3=0.30rem
	 │　
	 └──────────────────────────────*/

.rounded-4 {border-radius: .45rem!important;}
.rounded-5 {border-radius: .50rem!important;}
.rounded-6 {border-radius: .55rem!important;}
.rounded-7 {border-radius: .60rem!important;}
.rounded-8 {border-radius: .65rem!important;}
.rounded-9 {border-radius: .70rem!important;}

/*	 ┌──────────────────────────────
	 │　
	 │　□ rounded
	 │　
	 └──────────────────────────────*/

/* sm .col-sm- */
@media screen and (min-width: 576px) {
	.rounded-sm-1 {border-radius: 0.20rem !important;}
	.rounded-sm-2 {border-radius: 0.25rem !important;}
	.rounded-sm-3 {border-radius: 0.30rem !important;}
	.rounded-sm-4 {border-radius: 0.35rem !important;}
	.rounded-sm-5 {border-radius: 0.40rem !important;}
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	.rounded-md-1 {border-radius: 0.20rem !important;}
	.rounded-md-2 {border-radius: 0.25rem !important;}
	.rounded-md-3 {border-radius: 0.30rem !important;}
	.rounded-md-4 {border-radius: 0.35rem !important;}
	.rounded-md-5 {border-radius: 0.40rem !important;}
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.rounded-lg-1 {border-radius: 0.20rem !important;}
	.rounded-lg-2 {border-radius: 0.25rem !important;}
	.rounded-lg-3 {border-radius: 0.30rem !important;}
	.rounded-lg-4 {border-radius: 0.35rem !important;}
	.rounded-lg-5 {border-radius: 0.40rem !important;}
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.rounded-xl-1 {border-radius: 0.20rem !important;}
	.rounded-xl-2 {border-radius: 0.25rem !important;}
	.rounded-xl-3 {border-radius: 0.30rem !important;}
	.rounded-xl-4 {border-radius: 0.35rem !important;}
	.rounded-xl-5 {border-radius: 0.40rem !important;}
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.rounded-xxl-1 {border-radius: 0.20rem !important;}
	.rounded-xxl-2 {border-radius: 0.25rem !important;}
	.rounded-xxl-3 {border-radius: 0.30rem !important;}
	.rounded-xxl-4 {border-radius: 0.35rem !important;}
	.rounded-xxl-5 {border-radius: 0.40rem !important;}
}


/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ container
	│　
	└──────────────────────────────────────────────────────────┘*/

/*	 ┌──────────────────────────────
	 │　
	 │　□ containerの調整
	 │　
	 │　・標準では、Containerの表示領域の幅が広すぎて読みにくい。これを調整するため下記の設定
	 │　・containerと同じ位置にcontainer-inner-spaceを追加する。
	 │　
	 └──────────────────────────────*/

	/* xl .col-xl- */
	@media screen and (min-width: 1200px) {
		.container-inner-space > .row {
			/*  */ 
			margin-left:5.5rem;
			margin-right:5.5rem;
		}

		/* .container-inner-space　が2回使用している場合は2カラムレイアウトと判断し2回目には両サイドのmarginの値は"0"にする */
		.container-inner-space .container-inner-space .row {
			/*  */ 
			margin-left:0rem;
			margin-right:0rem;
			
		}

	}
	/* xxl .col-xxl- */
	@media screen and (min-width: 1400px) {
		.container-inner-space > .row {
			/*  */
			margin-left:8.5rem;
			margin-right:8.5rem;	
		}
		.container-inner-space .container-inner-space .row {
			/*  */ 
			margin-left:0rem;
			margin-right:0rem;
			
		}
	}

/*	 ┌──────────────────────────────
	 │　□ ２カラム対応
	 │　
	 │　container-inner-space　の中に　container-inner-space　がある場合に、
	 │　中のコンテナの余白padding設定を削除する。
	 └──────────────────────────────*/

	.container-inner-space .container-inner-space {
		padding-left:0;
		padding-right:0;
	}
/*	 ┌──────────────────────────────
	 │　□ ２カラム対応
	 │　
	 │　body直下のタグのclassに"twoColumns"を記載する
	 │　余白調整で使用する。
	 └──────────────────────────────*/

	/* md .col-md- */
	@media screen and (min-width: 768px) {
		/* mdの時にmainの両サイドの余白を取り除く */
		body > .twoColumns > .row > main {
			padding-left:0.75rem !important;
			padding-right:0.75rem !important;
		}
		body > .twoColumns > .row > main > div section.row {
			padding-left:1.5rem !important;
			padding-right:1.5rem !important;
			
		}
	}
	/* lg .col-lg- */
	@media screen and (min-width: 992px) {
		body > .twoColumns > .row > main {
			padding-left:0 !important;
			padding-right:15px !important;
		}
	}






/*	 ┌──────────────────────────────
	 │　
	 │　■ 中央寄せテキスト（高さの中央に表示する）
	 │　
	 └──────────────────────────────*/

h2.featurette-heading {
	line-height:1.15em;
	
}

h2.featurette-heading span.text-muted {
	display:inline-block;
	font-size:1.6rem;
	
}

/* sm .col-sm- */
@media screen and (min-width: 576px) {
	.featurette-heading {
		margin-top: 1rem;
		margin-bottom: 1rem;
	  }
}

/* md .col-md- */
@media screen and (min-width: 768px) {
	.featurette-heading {
		margin-top: 3rem;
		font-size: 2rem;
		margin-bottom:0;
	  }
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	/* Bump up size of carousel content */
	.carousel-caption p {
		margin-bottom: 1.25rem;
		font-size: 1.25rem;
		line-height: 1.4;
	  }
	  .featurette-heading {
		margin-top: 5rem;
		font-size: 3rem;
		margin-bottom:0;
	  }
	  .twoColumns .featurette-heading { /* 2カラムの時 */
		font-size: 2.8rem;
		margin-top: 2rem;
	}
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.featurette-heading {
		margin-top: 5rem;
		font-size: 3rem;
		margin-bottom:0;
	  }
	  .twoColumns .featurette-heading { /* 2カラムの時 */
		font-size: 2.8rem;
		margin-top: 0.5rem;
	}
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.featurette-heading {
		margin-top: 6.4rem;
		font-size: 3rem;
		margin-bottom:0;
	  }
	.twoColumns .featurette-heading { /* 2カラムの時 */
		margin-top: 2rem;
	}
}


/*	┌──────────────────────────────
	│　
	│　■　opacity (for bt5.0.3　→　5.1から標準として採用される)
	│　
	└──────────────────────────────*/

.opacity-100 {opacity: 1.00}
.opacity-75 {opacity: 0.75}
.opacity-50 {opacity: 0.5}
.opacity-25 {opacity: 0.25}
.opacity-0 {opacity: 0.00}


/*	┌──────────────────────────────
	│　
	│　■position
	│　
	│　・標準（~5.3）ではないため追加する。
	│　
	└──────────────────────────────*/


/* positionの解除 */
.position-initial {
	position: initial;
	}


/* sm .col-sm- */
@media screen and (min-width: 576px) {
	.position-sm-static {position: static}
	.position-sm-relative {position: relative}
	.position-sm-absolute {position: absolute;}
	.position-sm-fixed {position: fixed}
	.position-sm-sticky {position: sticky}
}

/* md .col-md- */
@media screen and (min-width: 768px) {
	.position-md-static {position: static}
	.position-md-relative {position: relative}
	.position-md-absolute {position: absolute;}
	.position-md-fixed {position: fixed}
	.position-md-sticky {position: sticky}
}

/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.position-lg-static {position: static}
	.position-lg-relative {position: relative}
	.position-lg-absolute {position: absolute;}
	.position-lg-fixed {position: fixed}
	.position-lg-sticky {position: sticky}
}

/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.position-xl-static {position: static}
	.position-xl-relative {position: relative}
	.position-xl-absolute {position: absolute;}
	.position-xl-fixed {position: fixed}
	.position-xl-sticky {position: sticky}
	
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.position-xxl-static {position: static}
	.position-xxl-relative {position: relative}
	.position-xxl-absolute {position: absolute;}
	.position-xxl-fixed {position: fixed}
	.position-xxl-sticky {position: sticky}
	
}

/*	┌──────────────────────────────
	│　幅指定　w-25 w-50 w-75 w-100 w-auto 以外を設定
	└──────────────────────────────*/
.mnw-35em {min-width:35em;}


.w-10 {width:10%}
.w-15 {width:15%}
.w-20 {width:20%}
/* .w-25 {width:25%} */
.w-30 {width:30%}
.w-35 {width:35%}
.w-40 {width:40%}
.w-45 {width:45%}
.w-60 {width:60%}
.w-70 {width:70%}
/* .w-75 {width:75%} */
.w-80 {width:80%}
.w-90 {width:90%}

/* sm .col-sm- */
@media screen and (min-width: 576px) {
.w-sm-5 {width:5% !important}
.w-sm-10 {width:10% !important}
.w-sm-15 {width:15% !important}
.w-sm-20 {width:20% !important}
.w-sm-25 {width:25% !important}
.w-sm-30 {width:30% !important}
.w-sm-50 {width:50% !important}
.w-sm-70 {width:70% !important}
.w-sm-75 {width:75% !important}
.w-sm-80 {width:80% !important}
.w-sm-85 {width:85% !important}
.w-sm-90 {width:90% !important}
.w-sm-95 {width:95% !important}
.w-sm-100 {width:100% !important}
}

/* md .col-md- */
@media screen and (min-width: 768px) {
.w-md-5 {width:5% !important}
.w-md-10 {width:10% !important}
.w-md-15 {width:15% !important}
.w-md-20 {width:20% !important}
.w-md-25 {width:25% !important}
.w-md-30 {width:30% !important}
.w-md-50 {width:50% !important}
.w-md-70 {width:70% !important}
.w-md-75 {width:75% !important}
.w-md-80 {width:80% !important}
.w-md-85 {width:85% !important}
.w-md-90 {width:90% !important}
.w-md-95 {width:95% !important}
.w-md-100 {width:100% !important}
}

/* lg .col-lg- */
@media screen and (min-width: 992px) {
.w-lg-5 {width:5% !important}
.w-lg-10 {width:10% !important}
.w-lg-15 {width:15% !important}
.w-lg-20 {width:20% !important}
.w-lg-25 {width:25% !important}
.w-lg-30 {width:30% !important}
.w-lg-50 {width:50% !important}
.w-lg-70 {width:70% !important}
.w-lg-75 {width:75% !important}
.w-lg-80 {width:80% !important}
.w-lg-85 {width:85% !important}
.w-lg-90 {width:90% !important}
.w-lg-95 {width:95% !important}
.w-lg-100 {width:100% !important}
}


.w-1rem {width:1rem !important}
.w-1Arem {width:1.5rem !important}
.w-2rem {width:2rem !important}
.w-2Arem {width:2.5rem !important}
.w-3rem {width:3rem !important}

.w-1em {width:1em !important}
.w-2em {width:2em !important}
.w-3em {width:3em !important}

/*	┌──────────────────────────────
	│　高さ指定　h-25 h-50 h-75 h-100 h-auto 以外を設定
	└──────────────────────────────*/
.h-1rem {height:1em !important}
.h-2rem {height:2em !important}
.h-3rem {height:3em !important}


.h-2em {height:2em !important}
.h-3em {height:3em !important}
.h-100vh {height: 100vh; !important}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ 文字設定
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│　□ 文字色
	└─────────────────────────────┘*/

.tc-darkblue {color:rgba(0,50,100,1.00)}
.tc-white {color:rgba(255,255,255,1.00);}
.tc-black {color:rgba(0,0,0,1.00);}

@media screen and (min-width: 576px) {
	.tc-sm-black {color:rgba(0,0,0,1.00);}
	.tc-sm-white {color:rgba(255,255,255,1.00);}
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	.tc-md-black {color:rgba(0,0,0,1.00);}
	.tc-md-white {color:rgba(255,255,255,1.00);}
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.tc-lg-black {color:rgba(0,0,0,1.00);}
	.tc-lg-white {color:rgba(255,255,255,1.00);}
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.tc-xl-black {color:rgba(0,0,0,1.00);}
	.tc-xl-white {color:rgba(255,255,255,1.00);}
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.tc-xxl-black {color:rgba(0,0,0,1.00);}
	.tc-xxl-white {color:rgba(255,255,255,1.00);}
}



/*	┌─────────────────────────────┐
	│　□ テキストの指定
	└─────────────────────────────┘*/

.text-right,
.right-text {text-align: right;}

.text-left {text-align: left;}

/* sm .col-sm- */
@media screen and (min-width: 576px) {
	.text-sm-center {text-align:center;}
	.text-sm-start {text-align:left;}
	.text-sm-end {text-align:right;}
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	.text-md-center {text-align:center;}
	.text-md-start {text-align:left;}
	.text-md-end {text-align:right;}
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.text-lg-center {text-align:center;}
	.text-lg-start {text-align:left;}
	.text-lg-end {text-align:right;}
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.text-xl-center {text-align:center;}
	.text-xl-start {text-align:left;}
	.text-xl-end {text-align:right;}
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.text-xxl-center {text-align:center;}
	.text-xxl-start {text-align:left;}
	.text-xxl-end {text-align:right;}
}

/*	┌─────────────────────────────┐
	│　□ 文字の影　text-shadow
	└─────────────────────────────┘*/
.txtshadow-white-1px {text-shadow:1px 1px 0px #fff;}
.txtshadow-white-3px {text-shadow:3px 3px 0px #fff;}


.txtshadow-blk-1px {text-shadow:1px 1px 0px rgba(0,0,0,0.70);}

/* sm .col-sm- */
@media screen and (min-width: 576px) {
	.txtshadow-blk-sm-1px {text-shadow:1px 1px 0px rgba(0,0,0,0.70);}
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	.txtshadow-blk-md-1px {text-shadow:1px 1px 0px rgba(0,0,0,0.70);}
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.txtshadow-blk-lg-1px {text-shadow:1px 1px 0px rgba(0,0,0,0.70);}
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.txtshadow-blk-xl-1px {text-shadow:1px 1px 0px rgba(0,0,0,0.70);}
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.txtshadow-blk-xxl-1px {text-shadow:1px 1px 0px rgba(0,0,0,0.70);}
}

/*	┌─────────────────────────────┐
	│　□ 文字のフチ　text-border
	└─────────────────────────────┘*/
/* 1ピクセルの白フチ */
.txtborder-white-1px {
	    text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #fff,
          -1px 1px 0px #fff,  1px -1px 0px #fff,
           1px 0px 0px #fff, -1px  0px 0px #fff,
           0px 1px 0px #fff,  0px -1px 0px #fff;
}
/* 2ピクセルの白フチ　(　❌文字の角がギザギザになりますので使えない。サンプルとして記載してる。) */
.txtborder-white-2px {
	text-shadow:
			2px 2px 0px #fff, -2px -2px 0px #fff,
			-2px 2px 0px #fff,  2px -2px 0px #fff,
			2px 0px 0px #fff, -2px  0px 0px #fff,
			0px 2px 0px #fff,  0px -2px 0px #fff;
}

/* 3ピクセルの白フチ　(　❌文字の角がギザギザになりますので使えない。サンプルとして記載してる。) */
.txtborder-white-3px {
	    text-shadow:
           3px 3px 0px #fff, -3px -3px 0px #fff,
          -3px 3px 0px #fff,  3px -3px 0px #fff,
           3px 0px 0px #fff, -3px  0px 0px #fff,
           0px 3px 0px #fff,  0px -3px 0px #fff;
}

/*	┌─────────────────────────────┐
	│　□ 文字間
	└─────────────────────────────┘*/

.ls-0 {letter-spacing: 0;}
.ls-01em {letter-spacing: 0.1em}

/* negative-letter-spacing */

.ls-n01em {letter-spacing: -0.1em}
.ls-n01rem {letter-spacing: -0.1rem}

/*	┌─────────────────────────────┐
	│　□ 行間
	└─────────────────────────────┘*/

/* negative-letter-spacing */

.lh-0p5em {line-height: 0.5em} /* p=point */
.lh-1em {line-height: 1em}
.lh-1p25em {line-height:1.25em}





/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ 余白設定
	┃	
	┃	1  : 00.25
	┃	2  : 00.50
	┃	3  : 01.00 (default)
	┃	4  : 01.50
	┃	5  : 03.00
	┃	 5a : 04.00 ※独自拡張
	┃	 5b : 05.00 ※独自拡張
	┃	6  : 06.00 ※独自拡張
	┃	7  : 12.00 ※独自拡張
	┃	 7a : 14.00 ※独自拡張
	┃	 7b : 16.00 ※独自拡張
	┃	8  : 18.00 ※独自拡張
	┃	9  : 24.00 ※独自拡張
	┃	
	┃	数値の前にnがある場合は、negativeのnでマイナスの値を示す
	┃	
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│　□ paddingの指定
	└─────────────────────────────┘*/
.pt-4a {padding-top: 2.0rem;}
.pt-4b {padding-top: 2.5rem;}


/* sm .col-sm- */
@media screen and (min-width: 576px) {
	.pb-sm-2 {padding-bottom:0.5rem !important;}
	.pb-sm-3 {padding-bottom:1rem !important;}
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	.pb-md-2 {padding-bottom:0.5rem !important;}
	.pb-md-3 {padding-bottom:1rem !important;}
	
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.pb-lg-2 {padding-bottom:0.5rem !important;}
	.pb-lg-3 {padding-bottom:1rem !important;}
	
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	.pb-xl-2 {padding-bottom:0.5rem !important;}
	.pb-xl-3 {padding-bottom:1rem !important;}
	
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	.pb-xxl-2 {padding-bottom:0.5rem !important;}
	.pb-xxl-3 {padding-bottom:1rem !important;}
	
}


.pb-6 {padding-bottom:6rem !important;}
.pb-7 {padding-bottom:12rem !important;}
.pb-8 {padding-bottom:18rem !important;}
.pb-9 {padding-bottom:24rem !important;}

.py-6 {padding-top:6rem; padding-bottom:6rem !important;}
.py-7 {padding-top:12rem; padding-bottom:12rem !important;}
.py-8 {padding-top:18rem; padding-bottom:18rem !important;}
.py-9 {padding-top:24rem; padding-bottom:24rem !important;}

/*	┌──────────────────────────────
	│　□ marginの指定
	└──────────────────────────────*/
.mt-5a {margin-top:4rem !important;} /* 2024/01/10 */
.mt-5b {margin-top:5rem !important;} /* 2024/01/10 */
.mt-6 {margin-top:6rem !important;}
.mt-7 {margin-top:12rem !important;}
.mt-7a {margin-top:14rem !important;}
.mt-7b {margin-top:16rem !important;}
.mt-8 {margin-top:18rem !important;}
.mt-9 {margin-top:24rem !important;}

.mb-6 {margin-bottom:6rem !important;}
.mb-7 {margin-bottom:12rem !important;}
.mb-7a {margin-bottom:14rem !important;}
.mb-7b {margin-bottom:16rem !important;}
.mb-8 {margin-bottom:18rem !important;}
.mb-9 {margin-bottom:24rem !important;}

/* ネガティブ トップ マージン */
/* .mt-0 {margin-top:0rem !important;} */
.mt-n5 {margin-top:-3rem !important;}
.mt-n6 {margin-top:-6rem !important;}
.mt-n7 {margin-top:-12rem !important;}
.mt-n8 {margin-top:-18rem !important;}
.mt-n9 {margin-top:-24rem !important;}

@media screen and (max-width: 767px) {
	.gx-xs-0 {grid-gutter-width:0 !important;}
}

@media screen and (min-width: 575px) {
.mt-sm-0 {margin-top:0rem !important;}
.mt-sm-6 {margin-top:6rem !important;}
.mt-sm-7 {margin-top:12rem !important;}
.mt-sm-8 {margin-top:18rem !important;}
.mt-sm-9 {margin-top:24rem !important;}
	.mt-sm-n5 {margin-top:-3rem !important;}
	.mt-sm-n6 {margin-top:-6rem !important;}
	.mt-sm-n7 {margin-top:-12rem !important;}
	.mt-sm-n8 {margin-top:-18rem !important;}
	.mt-sm-n9 {margin-top:-24rem !important;}
}

@media screen and (min-width: 768px) {
.mt-md-0 {margin-top:0rem !important;}
.mt-md-6 {margin-top:6rem !important;}
.mt-md-7 {margin-top:12rem !important;}
.mt-md-8 {margin-top:18rem !important;}
.mt-md-9 {margin-top:24rem !important;}
	.mt-md-n5 {margin-top:-3rem !important;}
	.mt-md-n6 {margin-top:-6rem !important;}
	.mt-md-n7 {margin-top:-12rem !important;}
	.mt-md-n8 {margin-top:-18rem !important;}
	.mt-md-n9 {margin-top:-24rem !important;}
.mb-md-6 {margin-bottom:6rem !important;}
.mb-md-7 {margin-bottom:12rem !important;}
.mb-md-7a {margin-bottom:14rem !important;}
.mb-md-7b {margin-bottom:16rem !important;}
.mb-md-8 {margin-bottom:18rem !important;}
.mb-md-9 {margin-bottom:24rem !important;}

}

@media screen and (min-width: 992px) {
.mt-lg-0 {margin-top:0rem !important;}
.mt-lg-3a {margin-top:1.5rem !important;}
.mt-lg-4a {margin-top:2.5rem !important;}
.mt-lg-6 {margin-top:6rem !important;}
.mt-lg-7 {margin-top:12rem !important;}
.mt-lg-8 {margin-top:18rem !important;}
.mt-lg-9 {margin-top:24rem !important;}
	.mt-lg-n5 {margin-top:-3rem !important;}
	.mt-lg-n6 {margin-top:-6rem !important;}
	.mt-lg-n6 {margin-top:-6rem !important;}
	.mt-lg-n7 {margin-top:-12rem !important;}
	.mt-lg-n8 {margin-top:-18rem !important;}
	.mt-lg-n9 {margin-top:-24rem !important;}
}

@media screen and (min-width: 1200px) {
.mt-xl-0 {margin-top:0rem !important;}
.mt-xl-6 {margin-top:6rem !important;}
.mt-xl-7 {margin-top:12rem !important;}
.mt-xl-8 {margin-top:18rem !important;}
.mt-xl-9 {margin-top:24rem !important;}
	.mt-xl-n5 {margin-top:-3rem !important;}
	.mt-xl-n6 {margin-top:-6rem !important;}
	.mt-xl-n6 {margin-top:-6rem !important;}
	.mt-xl-n7 {margin-top:-12rem !important;}
	.mt-xl-n8 {margin-top:-18rem !important;}
	.mt-xl-n9 {margin-top:-24rem !important;}
}

@media screen and (min-width: 1400px) {
.mt-xxl-0 {margin-top:0rem !important;}
.mt-xxl-6 {margin-top:6rem !important;}
.mt-xxl-7 {margin-top:12rem !important;}
.mt-xxl-8 {margin-top:18rem !important;}
.mt-xxl-9 {margin-top:24rem !important;}
	.mt-xxl-n5 {margin-top:-3rem !important;}
	.mt-xxl-n6 {margin-top:-6rem !important;}
	.mt-xxl-n6 {margin-top:-6rem !important;}
	.mt-xxl-n7 {margin-top:-12rem !important;}
	.mt-xxl-n8 {margin-top:-18rem !important;}
	.mt-xxl-n9 {margin-top:-24rem !important;}
}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	 ┃　■ 背景設定
	 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	 │　
	 │　□ 要素外（ウィンドウ幅いっぱいまで）に背景色を拡張する。
	 │　
	 │　BSでcontainerを使用しつつ、幅いっぱいに背景色をつける。
	 │　ブラウザの表示領域にある要素の長辺をウィンドウの幅100%にする事ができる単位がvmax
	 │　
	 └─────────────────────────────┘*/

.container-bg-vmax {
	clip-path:inset(0 -100vmax);
	padding-top:3rem;
	padding-bottom:3rem;

}

	.container-bg-vmax-lightgrey {
		background-color:rgba(245,245,245,1.00);/* 通常の領域の背景 */
		box-shadow:0 0 0 100vmax rgba(245,245,245,1.00);/* 通常の領域背景と同じ配色を使用する。 */
		}
	
	.container-bg-vmax-lightblue {
		background-color:#f0f8ff;/* 通常の領域の背景 */
		box-shadow:0 0 0 100vmax #f0f8ff;/* 通常の領域背景と同じ配色を使用する。 */
		}

/*	┌─────────────────────────────┐
	 │　□ 背景色
	 └─────────────────────────────┘*/


.bg-white-t50 {background-color: rgba(255,255,255,0.50)}

.bg-white-t75 {background-color: rgba(255,255,255,0.75)}


.bg-gray-05 {background-color: rgba(243,243,243,1.00)}
.bg-gray-10 {background-color: rgba(229,229,229,1.00)}

.bg-yellow-1 {background-color: rgba(255,253,190,1.00)}
.bg-yellow-2 {background-color: rgba(255,252,127,1.00)}
.bg-yellow-3 {background-color: rgba(255,250,0,1.00)}

.bg-blue-1 {background-color: rgba(0,100,255,1.00)}

.bg-blue-t05,
.bg-blue-1-t05 {background-color: rgba(0,100,255,0.05)}

.bg-blue-t25,
.bg-blue-1-t25 {background-color: rgba(0,100,255,0.25)}

.bg-blue-t50,
.bg-blue-1-t50 {background-color: rgba(0,100,255,0.50)}