@charset "utf-8";
/* CSS Document */
#sub {
    position: relative;
    top: 0;
    left: 0;
    z-index: -0;
    background: url("../images/kv1.jpg") no-repeat center top /cover;
    height: 400px;
}

#sub::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 1;
}

#sub h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 4.0rem;
    z-index: 10;
}

#animals-photo {
	margin: 50px 0;
}
#donated {
	padding: 50px 0 100px;
	margin: 50px 0;
}
/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slide-thumbnail1-parts {
	overflow-x: hidden;
	margin-bottom: 2rem;
}

/*画像たちを囲むブロック*/
.slide-thumbnail1-parts .img-parts1 {
	display: flex;
	overflow: hidden;
}

/*画像*/
.slide-thumbnail1-parts .img-parts1 img {
	padding: 0 1vw;	/*上下の余白はなし、左右への余白は画面の1%*/
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1-parts .rtl-parts, .slide-thumbnail1-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.slide-thumbnail1-parts .rtl-parts {animation-name: slide-rtl-parts;}
.slide-thumbnail1-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

/*背景色
---------------------------------------------------------------------------*/
.background4-parts {
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 0% 0%, hsla(65,100%,91%,1) 0px, transparent 50%),
	radial-gradient(at 79% 23%, hsla(189,78%,82%,1) 0px, transparent 50%),
	radial-gradient(at 100% 95%, hsla(229,100%,93%,1) 0px, transparent 50%),
	radial-gradient(at 22% 88%, hsla(170,92%,89%,1) 0px, transparent 50%);
}
/*横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal1-parts .list-parts {
	display: flex;	/*flexボックスを使う指定*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 25px 0;	/*上下、左右へのボックス内の余白*/
	position: relative;
}

.list-normal1-parts .list-parts div {
	flex: 1;
}

/*１つ目のボックスにのみ上に線を入れる*/
.list-normal1-parts .list-parts:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*ボックス内のfigure画像*/
.list-normal1-parts .list-parts figure {
	width: 20%;			/*画像の幅*/
	margin-right: 20px;	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-normal1-parts .list-parts h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 10px;	/*下に少し余白を作る*/
	color: #333;			/*文字色*/		
}
.list-normal1-parts .list-parts h4 a  {
	color: inherit;
}

/*ボックス内のpタグ*/
.list-normal1-parts .list-parts p {
	margin: 0;
	font-size: 0.7em;		/*文字サイズを親要素の70%に。*/
}


/*list内のtableっぽく見える所
---------------------------------------------------------------------------*/
/*ボックス全体*/
.list-normal1-parts dl.line-parts {
	grid-template-columns: repeat(2, auto 1fr);	/*２列にする（各ボックスは、左は内容に応じて自動、残りを右側に割り当て）*/
}

/*ボックス一個あたり*/
dl.line-parts {
	margin: 0;
	display: grid;						/*gridボックスを使う指定*/
	grid-template-columns: auto 1fr;	/*左は内容に応じて自動、残りを右側に割り当て*/
	font-size: 0.7em;					/*文字サイズを親要素の70%に。*/
	border-top: 1px solid #ccc;			/*上の線の幅、線種、色*/
}

dl.line-parts dt, dl.line-parts dd {
	border-bottom: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 0 0.5rem;				/*上、左右への余白*/
}
dl.line-parts dt {
	background: #eee;	/*背景色*/
}
/*parts-list-normal2
---------------------------------------------------------------------------*/
/*１枚目の写真*/
.parts-list-normal2.image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*２枚目の写真*/
.parts-list-normal2.image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*３枚目の写真*/
.parts-list-normal2.image3-parts {
	background: url("../images/info_img6.png") no-repeat center center / cover;
}

/*ボックス１個あたり*/
.parts-list-normal2 {
	padding: 5vw;	/*ボックス内の余白。画面幅100%＝100vwです。*/
	position: relative;
	overflow-x: hidden;
	margin-bottom: 1vw;	/*下に空けるスペース。ボックス同士の隙間です。*/
}

/*マウスオン用のアニメーション*/
.parts-list-normal2::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.parts-list-normal2:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*テキストブロック*/
.parts-list-normal2 .text-parts {
	position: relative;z-index: 1;
	width: 80%;		/*幅*/
	height: 100%;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

#animals-photo p,
#donated p {
	text-align: center;
	margin-bottom: 40px;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*テキストブロック*/
	.parts-list-normal2 .text-parts {
		width: 40%;		/*幅*/
	}

	}/*追加指定ここまで*/


/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.parts-list-normal2 .text-parts.reverse-parts {
	margin-left: auto;
}

/*parts-list-normal2内のh3見出し*/
.parts-list-normal2 h3 {
	margin: 0;padding: 0;
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 2rem;		/*文字サイズを200%*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 1.2;		/*行間を狭くする*/
}

/*parts-list-normal2内のh3見出し内の１文字目の大きな文字*/
.parts-list-normal2 h3 .large-parts {
	font-size: 7rem;	/*文字サイズを7倍*/
}

/*見出しの右上にある英語の小さな文字*/
.parts-list-normal2 h3 span:not(.large-parts) {
	font-size: 1rem;	/*文字サイズを標準に戻す*/
	opacity: 0.5;		/*透明度50%*/
	position: absolute;
	right: 0px;	/*右からの配置場所*/
	top: 0px;	/*上からの配置場所*/
}


/*ボタン
---------------------------------------------------------------------------*/
.parts-list-normal2 .btn-parts a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;		/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.parts-list-normal2 .btn-parts a:hover {
	letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}
.parts-list-normal2:hover .btn-parts a {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}

/*list-grid1-parts, list-grid2-parts 共通
---------------------------------------------------------------------------*/
/*list-partsブロック全体を囲むブロック*/
.list-grid1-parts,.list-grid2-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts,.list-grid2-parts .list-parts {
    display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-parts .list-parts *,
.list-grid2-parts .list-parts * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1-parts .list-parts p,
.list-grid2-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}


/*list-grid2-parts
---------------------------------------------------------------------------*/

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid2-parts .list-parts {
	grid-template-columns: 100px 1fr;	/*１つ目（この場合はfigure要素）を100pxに、２つ目（この場合はtextブロック））を残った幅で使う*/
	gap: 1rem;				/*ブロックの間に空けるマージン的な指定*/
	align-items: center;	/*画像とテキストブロックについて、天地の中央で揃えるようにする。この１行を削除すると、上に揃う。*/
	margin-bottom: 1rem;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
/*listブロック全体を囲むブロック*/
	.list-grid2-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}
	/*ボックス１個あたり*/
	.list-grid2-parts .list-parts {
		margin-bottom: 0;
	}

	}/*追加指定ここまで*/



	.wave1-section-parts {
	margin: 30px 0;
}
	#sub {
	height: 250px;
}