@charset "utf-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 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)}