/* CSS Document */

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ テストコンテンツ
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│　□ 子要素
	└─────────────────────────────┘*/

/*	┏─────────────────────────────┓
	│　★ 特殊なケース								
	┗─────────────────────────────┛*/

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ ウィンドウサイズによってCSSの指定を帰る場合の雛形
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* xs .col- 特に指定はしません */

/* sm .col-sm- */
@media screen and (min-width: 576px) {
	
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	
}

/*	┌──────────────────────────────
	│　テストコンテンツ
	└──────────────────────────────*/
.template-content{
	display:none;
}

.test-content{
	display:none;
}

/* 説明をするための情報を掲載するdivに適用 */
.info-text {
	margin:1rem;
	border:1px solid #FF0004;
	padding:0.5rem 1rem 3rem 1rem;
	color:#FF0004;
	background-color:#ffffff;
	border-radius:10px;
	/* display:none; */
	position:relative;
} 
.info-text:after {
	content:"※この表示は表示内容を説明する情報で、実際のサイトでは表示しません。";
	position:absolute;
	bottom:0.75rem;
	left:1rem;
	padding-left:0.5rem;
	font-size:0.75em;
	background-color: rgba(255,221,221,1.00);
} 



/*	┌──────────────────────────────
	│　標準タグ
	└──────────────────────────────*/

body {color:rgba(60,60,60,1.00);}

.h1,h1 {
	padding:.25rem 0rem;
}

.h2,h2 {
	font-weight:bold;
	text-align:center;
}

	/* sm .col-sm- */
	@media screen and (min-width: 576px) {
		.h2,h2 {
			text-align:center;
		}
	}
	/* md .col-md- */
	@media screen and (min-width: 768px) {
		.h2,h2 {
			text-align:center;
		}
	}
	/* lg .col-lg- */
	@media screen and (min-width: 992px) {
		.h2,h2 {
			text-align:left;
		}
	}

.h3,h3 {
	
}


.h4,h4 {
	letter-spacing: 0.12em;
}

.h5, h5 {
	font-size:1.1rem;
	font-weight:bold;
}

li {
	margin-bottom:1rem;
}

p{
	margin: 1rem 1rem; /* この設定はやめたい */
}

a {text-decoration: none;}

ul.lstyle-none {padding-left:0.2em;}
ul.lstyle-none li {list-style-type:none; padding-left:0;}

.btn-outline-primary,
.btn-outline-danger {background-color: #ffffff;}

/*	┌──────────────────────────────
	│　box-shadow
	└──────────────────────────────*/

.shadow-10px-010 {box-shadow: 10px 10px 0 0 rgba(0,0,0,0.10)}


/*	┌──────────────────────────────
	│　opacity bt5.1以上は標準
	└──────────────────────────────*/
.opacity-100 {opacity: 1}

.opacity-75 {opacity: .75}

.opacity-50 {opacity: .5}

.opacity-25 {opacity: .25}

.opacity-0 {opacity: 0}



/*	┌──────────────────────────────
	│　position
	└──────────────────────────────*/

/* 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 以外を設定
	└──────────────────────────────*/

.w-10 {width:10%}
.w-20 {width:20%}
.w-30 {width:30%}
.w-40 {width:40%}
.w-60 {width:60%}
.w-70 {width:70%}
.w-80 {width:80%}
.w-90 {width:90%}

.w-1rem {width:1rem}
.w-2rem {width:2rem}
.w-3rem {width:3rem}

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

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

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

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

.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;
}
/* 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;
}

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

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

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

/* negative-letter-spacing */

.lh-0p5em {line-height: 0.5em}
.lh-1em {line-height: 1em}
.lh-1p25em {line-height:1.25em}





/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ 余白設定
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│　□ paddingの指定
	└─────────────────────────────┘*/

.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-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;}
}

@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-lightgrey-vmax {
	background-color:rgba(245,245,245,1.00);/* 通常の領域の背景 */
	box-shadow:0 0 0 100vmax rgba(245,245,245,1.00);/* 通常の領域背景と同じ配色を使用する。 */
	clip-path:inset(0 -100vmax);/*  */
	}

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

.bg-white-50,
.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)}


/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ ボーダー
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│　□ 色
	└─────────────────────────────┘*/
.border-lightgray {border-color:rgba(200,200,200,1.00) !important;}

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

.border-blue2 {border-color:rgba(0,77,187,1.00) !important;}