@charset "UTF-8";





/****************
	Topページ
		Top写真

****************/
#s_top_hero {
	/*display: flex;
	justify-content: flex-start;
	*/ /* 左揃え */
	
	/*height: 600px;
	width: 100%; 
	*//* 横幅を100%に設定 */


	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px; /* 必要に応じて調整 */
}

#s_top_hero .msg {
	/*width: calc(55%);
	display: grid;
	*/
	/*grid-template-columns: 1fr;
	*//* 縦に並べる */
	/*border: 1px solid red;*/ /* 枠線の幅、スタイル、色を設定 *//*デバッグ用*/
	/*position: relative;
	*//* right を使用するために position を設定 */
	
	position: absolute;
    z-index: 10; /* 画像の上に表示 */
    text-align: center;
    color: white; /* テキストの色を調整 */


	bottom: 0px;
	height: 300px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);

	display: flex;
	justify-content: left;
	/* align-items: center;*/


}

#s_top_hero .msg p.title {
    display: block;
    margin: 0;
    /*height: calc(60%);*/
    font-size: 25px;
    color: white;
    line-height: 1.5;
    /* width: calc(81%); */
    letter-spacing: 6.6px;
    /*margin: 20px 0 0 40px;*/

	/*width: 560px;*/
	font-weight: 500;


	
	margin: 0 0 0 0;
	padding: 0 10px 0 10px;
    /*background-color: rgba(0, 0, 0, 0.3);*? /* 背景を半透明にして読みやすく */
	top: 0%;
	left: 5%;
	transform: translate(0, 0);
	position: absolute;
	width: 400px;
	overflow: hidden;
	text-align: left;



	/*
	animation-name: fadeInTitle;
    animation-duration: 3s;
    animation-iteration-count: 1;
	*/
	/*アニメーションループ数*/

	/*animation-delay: 2s; */
}
/* topメッセージ用フェードインアニメーション*/
@keyframes fadeInTitle {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}




#s_top_hero .msg p.honbun {
    /*
	display: block;
    margin: 0;
    height: calc(40%);

	width: 600px;
	margin: 270px 0 0 0px;
	padding: 0 0 0 80px;
	*/
	/*position: absolute;
	*//* 右側基準にするために absolute を使用 */
    /*right: 0; 
	*//* .msg の右側を基準に配置 */


	font-size: 16px;
	font-weight: bold;
    color: white;
    line-height: 1.6;
    letter-spacing: 1px;


	margin: 0 0 0 0;
	padding: 0 10px 0 10px;
    /*background-color: rgba(0, 0, 0, 0.3);*/ /* 背景を半透明にして読みやすく */
	top: 40%;
	left: 5%;
	transform: translate(0, 0);
	position: absolute;
	width: 400px;
	overflow: hidden;
	text-align: left;

}


#s_top_hero .picture {
    /*
	display: flex;
    justify-content: center;
    align-items: center;

    width: calc(45%);
    overflow: hidden;
    position: relative;
	*/

	position: relative;
    width: 100%;
    height: 100%;


}


#s_top_hero .picture .image1 {
		/*width: 350px;*/
		/*top: 12%;
		margin: 0;
		z-index: 31;
	
		width: 350px;
		*/
		/*position: absolute;
		*/ /* 左側基準にするために absolute を使用 */
		/*left: 60px;
		*//* .picture の左側を基準に配置 */
		/*margin: 0;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 10px;
		*/

		border-top-left-radius: 30px;
		border-bottom-left-radius: 10px;

		overflow: hidden;

		top: 10%;
		left: 40%;
		transform: translate(-50%, 0); /* 斜めに配置 */
		z-index: 5;

		position: absolute;
		width: 350px; /* 必要に応じて調整 */
		height: auto;
}

#s_top_hero .picture .image1 img {

	/*transition: transform 0.5s ease-in-out;*/ /* スムーズなアニメーション */
	/*animation: zoomIn 3s;*/ /* 3秒かけて拡大し、その後縮小を繰り返す */


	animation-name: zoomOutTopImg;
    animation-duration: 8s;
	animation-fill-mode: forwards; /* アニメーション終了後、最後の状態を保持 */
    animation-iteration-count: 1; /*アニメーションループ数*/

}
/* 画像を拡大するアニメーション */
@keyframes zoomOutTopImg {
	from {
	  transform: scale(1.1); /* 初期状態 */
	}
	to {
	  /*transform: scale(1.5);*/ /* 1.5倍に拡大 */

	  transform: scale(1); /*画像の拡大*/
	  filter: brightness(111%);
	}
}
  

#s_top_hero .picture .image2 {
    /*
	position: absolute;
    top: 0%;
    margin: 0;
	border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;
	z-index: 30;

	width: 400px;
    left: 250px; /* .picture の左側を基準に配置 */
    /*margin: 0;*/
    border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;

	overflow: hidden;
	


	position: absolute;
    width: 350px; /* 必要に応じて調整 */
    height: auto;

	top: 0px;
	right: 0%;
    transform: translate(0, 0); /* 斜めに配置 */
    z-index: 4;
}
#s_top_hero .picture .image2 img {

	animation-name: zoomInTopImg;
    animation-duration: 10s;
	animation-fill-mode: forwards; /* アニメーション終了後、最後の状態を保持 */
    animation-iteration-count: 1; /*アニメーションループ数*/
}
/* 画像を拡大するアニメーション */
@keyframes zoomInTopImg {
	from {
	  transform: scale(1); /* 初期状態 */
	}
	to {
	  /*transform: scale(1.5);*/ /* 1.5倍に拡大 */

	  transform: scale(1.1,1.1); /*画像の拡大*/
	  filter: brightness(101%);
	}
}