@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+&family=DM+Serif+Display&Code:wght@100;200;300;400;500;600;700&display=swap');

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 初版 1.0.0
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

 /* headingBgText01でM+PLUS+1使用 */
 /*  headingBgText02でSyuku使用  */


/* CSS Document */



/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　
   ┃　■　ul
   ┃　
   ┃　ul.custom-style-type を必ず設定する。
   ┃　その上でデザインを指定するclassを指定する。
   ┃　
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
	.custom-style-type li {
		position: relative;
		list-style-type:none;
	}

	.custom-style-type li:before {
			position: absolute;
			top: 0px;
			left: 0; 
			margin-left:-1.15em;
	}

/*	┌────────────────────────┐
	│　
	│　□ 青い四角
	│　
	└────────────────────────┘*/

		ul.custom-style-type-01 li:before {
			/* position: absolute;
			top: 0px;
			left: 0; 
			margin-left:-1em;*/
			color:rgba(0,100,210,0.80);
			content: "■";
		}

/*	┌────────────────────────┐
	│　
	│　□ 赤い※印
	│　
	└────────────────────────┘*/

		ul.custom-style-type-kome li:before {
			/* position: absolute;
			top: 0px;
			left: 0; 
			margin-left:-1em;*/
			color:rgba(210,0,0,0.80);
			content: "※";
		}

/*	┌────────────────────────┐
	│　
	│　□ 赤いハイフン
	│　
	└────────────────────────┘*/

		ul.custom-style-type-hyphen li:before {
			/* position: absolute;
			top: 0px;
			left: 0; 
			margin-left:-1em;*/
			color:rgba(0,30,180,0.80);
			content: "−";
		}


/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　
   ┃　■ ドロップシャドウ
   ┃　
   ┃　image.cssの「ボックスシャドウ」にテキスト用の設定があります。
   ┃　
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	/* 設定を移動 */

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　
   ┃　■　文字の修飾
   ┃　
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*	┌────────────────────────┐
	│　
	│　□ ネオン文字（白文字・黄色い光）
	│　
	└────────────────────────┘*/

	.neon-style-text-01 {
		color: #FFF;
		text-shadow: 
			0 0 0.05em rgba(240,206,98,1.00),
			0 0 0.10em rgba(240,206,98,1.00),
			0 0 0.15em rgba(240,206,98,1.00),
			0 0 0.30em rgba(240,206,98,1.00);
		filter: saturate(80%);
	}

	.neon-style-text-02 {
		color: #000000;
		text-shadow: 
			0 0 0.05em rgba(240,206,98,1.00),
			0 0 0.10em rgba(240,206,98,1.00),
			0 0 0.15em rgba(240,206,98,1.00),
			0 0 0.30em rgba(240,206,98,1.00);
		filter: saturate(80%);
	}

	.neon-style-text-03 {
		color: #000000;
		text-shadow: 
			0 0 0.05em rgba(255,255,255,1.00),
			0 0 0.10em rgba(255,255,255,1.00),
			0 0 0.15em rgba(255,255,255,1.00),
			0 0 0.30em rgba(255,255,255,1.00);
		filter: saturate(80%);
	}

/*	┌────────────────────────┐
	│　
	│　□ アンダーライン（基本設定）
	│　
	│　各種色設定とともに、使用します。
	│　
	│　【課題】文字の大きさに依存しないようにするための、改修が必要である。
	│　【課題】通常のアンダーラインと区別するため、今後はlineMarkerを使用すること。
	│　
	└────────────────────────┘*/
.lineMarker,
.underLine {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom 0.25em left 0;
		display:inline-block;
		padding-left:0.25em;
		padding-right:0.25em;
}

	.fs-2.lineMarker,
	.fs-2.underLine {
		background-position: bottom 0em left 0;
}

/*	┌────────────────────────┐
	│　
	│　□ アンダーライン（各種色設定）
	│　
	└────────────────────────┘*/
	.lineMarker-white,
	.underLine-white {
		background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(255,255,255,0.80) 60%);
		}

	.lineMarker-blue,
	.underLine-blue {
		background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(0,130,255,0.40) 60%);
		}

	.lineMarker-red,
	.underLine-red {
		background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(255,0,0,0.40) 60%);
		}

	.lineMarker-yellow,
	.underLine-yellow {
		background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(255,240,0,0.40) 70%);
		}

	.lineMarker-green,
	.underLine-green {
		background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(0,225,5,0.40) 50%);
		}

/*	┌────────────────────────┐
	│　
	│　□ 頭にアイコン付きの白いアンダーライン
	│　
	│　【課題】白色のアンダーラインとアイコンの表示を割けて、どこにでも使用できるようにしたい。
	│　
	└────────────────────────┘*/

.underLine-white-03 {
	padding-left:1.6em;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em;
	background-image: url("/assets/images/common/_parts/parts_03.svg");
}

	.underLine-white-03 span{
		padding:0 .25em;
		display:inline-block;
		background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(255,255,255,0.80) 70%);
		}


/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　
   ┃　■　hXの日本語の後ろに英字をかっこよく配置
   ┃　https://pulpxstyle.com/heading-design/
   ┃　
   ┃　<style>
   ┃　@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');
   ┃　</style> 
   ┃　
   ┃　<link rel="preconnect" href="https://fonts.googleapis.com">
   ┃　<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   ┃　<link href="https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap" rel="stylesheet"> 
   ┃　
   ┃　font-family: 'M PLUS 1 Code', sans-serif;
   ┃　<hx data-en="">ここにコーナータイトル<hx>
   ┃　
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	.headingBgText01 {
		position: relative;
		padding-top: 50px;
		padding-left: 0px;
		/* font-size: 26px; */
	}

	.headingBgText01 span {
		position: relative;
		z-index: 2;
	}

	.headingBgText01::before {
		content: attr(data-en);
		position: absolute;
		transform: rotate(-10deg);
		top: -10px;
		left: -20px;
		color: rgba(253,246,167,1.00);/* 242,197,186,1.00 */
		font-size: 80px;
		font-weight: 400;
		font-family: 'Oooh Baby', cursive;
		font-style: italic;
	}


	.headingBgText02 {
		position: relative;
		padding-top: 50px;
		padding-left: 0px;
		/* font-size: 26px; */
		width:100%;
	}

	.headingBgText02 span {
		position: relative;
		z-index: 2;
	}

	.headingBgText02::after {
		width:100%;
		content: attr(data-en);
		position: absolute;
		top: 0.5em;
		left: 0%;
		color: rgba(100,100,100,0.20);/* 242,197,186,1.00 */
		font-size: 80px;
		font-weight: 400;
		font-family: 'DM Serif Display', serif;
		/* font-style: italic; */
	}

/*	 ┌──────────────────────────────
	 │　
	 │　□ box-shadow　追加設定
	 │　
	 └──────────────────────────────*/

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

/*	 ┌──────────────────────────────
	 │　
	 │　□ タイトルタグのあしらい
	 │　
	 │　参考:https://saruwakakun.com/html-css/reference/h-design
	 └──────────────────────────────*/


	 /* 【未掲載】 */
.title-asri-01 {
	position: relative;
	display: inline-block;
	padding: 0 55px;
	text-align:center;
  }
  
  .title-asri-01:before, .title-asri-01:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: rgb(59, 134, 255);
  }
  
  .title-asri-01:before {
	left:0;
  }
  .title-asri-01:after {
	right: 0;
  }

   /* 【未掲載】 */
  .title-asri-02 {
	position: relative; /* これの変わりにposition-rerlativeでもOK */
	letter-spacing: 0.2em;
  }
  
  .title-asri-02-blu:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 7px;
	background: -webkit-repeating-linear-gradient(-45deg, #6aa3d1, #6aa3d1 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #6aa3d1, #6aa3d1 2px, #fff 2px, #fff 4px);
  }

  .title-asri-02-gry:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 7px;
	background: -webkit-repeating-linear-gradient(-45deg, #d5d5d5, #d5d5d5 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #d5d5d5, #d5d5d5 2px, #fff 2px, #fff 4px);
  }



.title-asri-03 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.title-asri-03:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

/* タイトル中央下に縦棒を表示する */

.title-asri-04 {
  position: relative;
  display: block;
  margin-bottom: 4.5rem;
}
.title-asri-04:before {
  content: '';
  position: absolute;
  bottom: -3.75rem;
  display: inline-block;
  width: 4px;
  height: 3rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgba(0,50,122,0.25);
  border-radius: 2px;
}



/* タイトルの上下を挟むように（）を表示 */

.title-asri-05 {
  position: relative;
  /* color: #158b2b; */
  /* font-size: 20px; */
  padding: 10px 0;
  text-align: center;
  margin-bottom: 0.750em;
	letter-spacing: 0.1em
}

	.title-asri-05:before {
	  content: "";
	  position: absolute;
	  top: -8px;
	  left: 50%;
	  width: 150px;
	  height: 2.50em;/* 58px */
	  border-radius: 50%;
	  border: 5px solid rgba(0,50,122,0.25);
	  border-left-color: transparent;
	  border-right-color: transparent;
	   -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	}