@charset "UTF-8";

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

/* CSS Document */

.samplemark {
	/*	*/
	position: relative;
	

}
.samplemark:before {
	position: absolute;
	content: "サンプル";
	color:rgba(255,0,0,0.80);
	font-weight:bold;
	top:calc(45% - 0.5em);
	/**/	
	left: calc(50% - 2em);
	font-size: clamp(1rem, 1.5rem, 3rem);
}
/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 背景をすりガラスのようにする
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

	/* すりガラス効果 */
	.effect-surigarasu,
	.surigarasu-effect {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		/* animeを動かすためにはbackground-colorが稼働には必要か 2023年12月10日 */
		/* background-color: rgba(255, 255, 255, 0.01); */
	}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 画像にのみ「すりガラス効果」を適用させる。
	│　
	│　すりガラス効果を直接imgに指定しても使用できません。今表示している要素の表示エリアの後ろの重なる要素に対して有効になるためです。
	│　画像に::beforeでボックス要素を置くことができれば設置可能と思われます。
	│　しかしそれができませんでした。基本figurerタグを設置するので、そちらに設置してください。
	│　文字がぼける場合は、z-indexで対応する
	│　
	└──────────────────────────────────────────────────────────┘*/

	.effect-surigarasu-01,
	.surigarasu-effect-01 {
		position: relative;
	}

		.effect-surigarasu-01::before,
		.surigarasu-effect-01::before {
				position: absolute;
				content:"";
				color:#000;
				top:0px;
				left:0px;
					width:100%;
					height:100%;
					background-color: rgba(255, 255, 255, 0.01);/*  */
				z-index:-9;
				
				/*  */
			
				backdrop-filter: blur(4px); /*  grayscale(80%) */
				-webkit-backdrop-filter: blur(4px); /*  grayscale(80%) */
				
				/* animeを動かすためにはbackground-colorが稼働には必要か 2023年12月10日 */
				
			}


/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ figure関連の初期設定。figureは、下マージンを取り除く
	︙　
	└…………………………………………………………………………………………………………………………┘*/


		figure {
			/* 【廃止検討】margin設定が、ユーザーの初期設定に影響するのではないか！ */
			margin:0 0.5rem 0 0.5rem
		}

		figcaption {
			font-size:0.8rem;
			text-align:center;
			padding:0.5em 0;
			margin-bottom:1rem;
			z-index: 1199;
		}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 3つの画像をlayer表示する
	│　
	└──────────────────────────────────────────────────────────┘*/

div.img-layer-display{
	position:relative;
	/* ここで最背面の背景画像を指定する */
}
	
	div.img-layer-display img.layer1 {
		position: absolute;
		top:0px;
		left:0px;
		z-index:10;
	}

	div.img-layer-display img.layer2 {
		position: absolute;
		top:0px;
		left:0px;
		z-index:20;
	}


/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ imgタグで使用できるビジュアル効果
	┃　
	┃　① 画像を有機的な形にマスクして表示する。
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　① イメージの形をborder-radiusを使用して有機的に変更
	│　
	└──────────────────────────────────────────────────────────┘*/

	.img-borderRadius1 {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;}
	.img-borderRadius2 {border-radius: 70% 30% 30% 70% / 70% 30% 70% 30%;}
	.img-borderRadiusCircle {border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}

			/*画面サイズxs(~767px)の場合*/
			@media screen and (max-width:767px) {
				.img-borderRadius1,
				.img-borderRadius2{
					margin:1em 3em 1em 3em;
					width: calc(100% - 6em);
				}
			}


/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ figcapion
	┃　
	┃　① figcaptionを画像の下部に重ねて表示する。
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ figcapionの表示①
	│　figcaptionを画像の上に表示する。
	│　
	└──────────────────────────────────────────────────────────┘*/

	figure.capText1 {
		position: relative;
		margin-bottom:1rem;
	}

		figure.capText1 figcaption {
			position: absolute;
			width:100%;
			bottom:0rem;
			left:0rem;
			text-align:left;
			padding:0.25rem 0.50rem;
			margin:0;
			font-size:0.7rem;
		}

			figure.capText1 figcaption .title {
				display:block;
				font-weight:bold;
				font-size:0.9rem;

			}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 画像のズーム
	┃　
	┃　① 表示領域を固定して、その領域内だけでズームする。
	┃　② 画像そのものが拡大表示する。
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 画像のズーム　①　
	│　
	└──────────────────────────────────────────────────────────┘*/

	figure.img-zoom {
		/* 
		border: thin #c0c0c0 solid;
		flex-flow: column;
		max-width: 150px;
		margin: auto;
		display: flex;
		padding: 5px;
		*/

		/* 領域外を非表示に指定する */
		overflow:hidden;
	}
		figure.img-zoom img {
			transform:scale(1.05,1.05);
			transition:0.5s all;
		}

		figure.img-zoom img:hover {
			transform:scale(1.15,1.15);
			transition:0.5s all;
			cursor:pointer ;
		}

		figure.img-zoom figcaption {
			color: #fff;
			/* 
			background-color: #222;
			color: #fff;
			font: italic smaller sans-serif;
			padding: 3px;
			text-align: center;
			*/
		}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 画像のズーム　②
	│　
	└──────────────────────────────────────────────────────────┘*/

	img.img-zoom {
		transform: scale(1.0);
		transition-duration: 0.3s;
		}
	img.img-zoom:hover {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
		  transition-duration: 0.3s;
		border:2px solid #fff;
		}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ img-designshdow 基本設定
	┃　
	┃　ボックスシャドウとデザインシャドウでは、設定必須 figurerに設置して使用する。
	┃　
	┃　写真の背景斜線ずらしにCSSコード追加
	┃　https://wdidearecipe.com/errata/errata-195/
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

	.img-designshdow {
		position: relative;
		margin-bottom:2.2rem;/* デザインシャドウの領域分だけ下のマージンを大きくする。 */
		margin-right:15px;/* デザインシャドウの領域分だけ左のマージンを大きくする。 */
	}

	.img-designshdow figcaption {
		margin-bottom:0rem;/* デザインシャドウの領域分だけ下のマージンを大きくする。 */
	}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ ドロップシャドウ （単色のみ）
	│　
	└──────────────────────────────────────────────────────────┘*/

/* 標準的なドロップシャドウ テキスト向け bはbase,basicの頭文字 */
.dropshadw-b1 {filter: drop-shadow( .15rem .15rem 1px rgba(0, 0, 0, 0.25))}

/* 標準的なドロップシャドウ 画像やボックス向け */
.dropshadw-b2 {filter: drop-shadow( .25rem .25rem 2px rgba(0, 0, 0, 0.20))}

.dropshadw-01,
.img-dropshadw-01 {filter: drop-shadow( 15px 15px 0 #cdcdcd)}

.dropshadw-02,
.img-dropshadw-02 {filter: drop-shadow( 15px 15px 0 rgba(0,35,102,0.52))}

.dropshadw-03,
.img-dropshadw-03 {filter: drop-shadow( 10px 10px 0 rgba(0,90,180,0.50))}

.dropshadw-04,
.img-dropshadw-04 {filter: drop-shadow( 8px 8px 3px rgba(0,100,170,0.30))}

.dropshadw-05,
.img-dropshadw-05 {filter: drop-shadow( 8px 8px 3px rgba(0,100,170,0.30))}


/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ ボックスシャドウ
	│　
	│　テキストにも適用できるように設定あり。
	│　
	└──────────────────────────────────────────────────────────┘*/

.boxshadow-00,
.img-boxshadow-00 img { box-shadow: .25rem .25rem 2px 0px rgba(0, 0, 0, 0.10);}

.boxshadow-01,
.img-boxshadow-01 img { box-shadow: 15px 15px 0 #cdcdcd}

.boxshadow-02,
.img-boxshadow-02 img { box-shadow: 15px 15px 0 rgba(0,35,102,0.52)}

/* 白い背景ボックス */
.boxshadow-03,
.img-boxshadow-03 img{ box-shadow: 0px 12px 12px 12px rgba(255, 255, 255, 0.5);}

.boxshadow-04,
.img-boxshadow-04 img { box-shadow: 10px 10px 0 rgba(0,90,180,0.50)}

.boxshadow-05,
.img-boxshadow-05 img { box-shadow: 8px 8px 3px rgba(0,100,170,0.30);}



/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ デザインシャドウ （タイプ1）
	│
	│　写真の背景斜線ずらしにCSSコード追加
	│　https://wdidearecipe.com/errata/errata-195/
	│　
	└──────────────────────────────────────────────────────────┘*/

	.img-designshdow-01 img {
		position: relative;
		z-index: 2;
	}

		.img-designshdow-01::before {
		  content: '';
		  position: absolute;
		  bottom: -15px;
		  right: -15px;
		  width: 100%;
		  height: 100%;
		  background-image: repeating-linear-gradient(-45deg, #d34e23 0px, #d34e23 2px, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%);
			background-position: right bottom;
		  background-size: 10px 10px; /* 追加コード */
		  z-index: -1;
		}

	.img-designshdow-line-02 img {
		position: relative;
		z-index: 2;
	}

		.img-designshdow-line-02::before {
		  content: '';
		  position: absolute;
		  bottom: -15px;
		  right: -15px;
		  width: 100%;
		  height: 100%;
		  background-image: repeating-linear-gradient(-45deg, #234AD3 0px, #234AD3 2px, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%);
			background-position: right bottom;
		  background-size: 10px 10px; /* 追加コード */
		  z-index: -1;
		}

	.img-designshdow-line-03 img {
		position: relative;
		z-index: 2;
	}

		.img-designshdow-line-03::before {
		  content: '';
		  position: absolute;
		  bottom: -15px;
		  right: -15px;
		  width: 100%;
		  height: 100%;
		  background-image: repeating-linear-gradient(-45deg, #DAE2FF 0px, #DAE2FF 2px, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%);
			background-position: right bottom;
		  background-size: 10px 10px; /* 追加コード */
		  z-index: -1;
		}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ デザインシャドウ （タイプ2）
	│
	│　写真の背景斜線ずらしにCSSコード追加
	│　https://wdidearecipe.com/design/ch01-03/
	│　
	└──────────────────────────────────────────────────────────┘*/

	.img-designshdow-02 img {
	position: relative;
	z-index: 2;
	}
	.img-designshdow-02::before {
	  content: '';
	  position: absolute;
	  bottom: -15px;
	  right: -15px;
	  width: 100%;
	  height: 100%;
		background-image: radial-gradient(#ea987e 20%, rgba(0 0 0 / 0) 21%);
		background-position: right bottom;
		background-size: 10px 10px; /* 追加コード */
		z-index: -1;
	}

	.img-designshdow-dot-02 img {
	position: relative;
	z-index: 2;
	}
	.img-designshdow-dot-02::before {
	  content: '';
	  position: absolute;
	  bottom: -15px;
	  right: -15px;
	  width: 100%;
	  height: 100%;
		background-image: radial-gradient(#7083C7 20%, rgba(0 0 0 / 0) 21%);
		background-position: right bottom;
		background-size: 10px 10px; /* 追加コード */
		z-index: -1;
	}