@charset "UTF-8";




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

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


#s_top_hero .msg {
	width: calc(55%);
	display: grid;
	grid-template-columns: 1fr; /* 縦に並べる */
	/*border: 1px solid red;*/ /* 枠線の幅、スタイル、色を設定 *//*デバッグ用*/
	position: relative; /* right を使用するために position を設定 */
}


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

	width: 560px;
	font-weight: 500;


    position: absolute; /* 右側基準にするために absolute を使用 */
    right: 0; /* .msg の右側を基準に配置 */


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

	animation-delay: 0s; 
}
/* 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%);
    font-size: 16px;
	font-weight: bold;

    color: black;
    line-height: 2.6;
    letter-spacing: 1.2px;
	width: 600px;
	margin: 270px 0 0 0px;
	padding: 0 0 0 80px;

	position: absolute; /* 右側基準にするために absolute を使用 */
    right: 0; /* .msg の右側を基準に配置 */

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

	animation-delay: 0s; 

}
/* topメッセージ用フェードインアニメーション*/
@keyframes fadeInHonbun {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}





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

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


}


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

		overflow: hidden;
}

#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;*/ /*アニメーションループ数*/



    /* アニメーションの名前を指定 */
    animation-name: zoomOutTopImg, scaleLoop;
    /* アニメーションの持続時間を指定 */
    animation-duration: 8s, 20s;
    /* アニメーションのタイミング関数を指定 */
    animation-timing-function: ease-in-out, ease-in-out;
    /* アニメーションの終了後の状態を指定 */
    animation-fill-mode: forwards, none;
    /* アニメーションの繰り返し回数を指定 */
    animation-iteration-count: 1, infinite;
    /* 2つ目のアニメーションに遅延を追加 */
    animation-delay: 0s, 20s;


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

	  transform: scale(1); /*画像の拡大*/
	  filter: brightness(111%);
	}
}
/* 拡大と縮小を繰り返すループアニメーション */
@keyframes scaleLoop {
    0%, 100% {
        transform: scale(1); /* 通常の大きさ */
    }
    50% {
        transform: scale(1.1); /* 少し大きくする */
    }
}


#s_top_hero .picture .image2 {
    position: absolute;
    top: 0%;
    left: 250px; /* .picture の左側を基準に配置 */

	margin: 0;
	border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;
	z-index: 30;

	width: 400px;
    margin: 0;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;

	overflow: hidden;
}
#s_top_hero .picture .image2 img {

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



    /* アニメーションの名前を指定 */
    animation-name: zoomInTopImg, scaleLoop;
    /* アニメーションの持続時間を指定 */
    animation-duration: 12s, 20s;
    /* アニメーションのタイミング関数を指定 */
    animation-timing-function: ease-in-out, ease-in-out;
    /* アニメーションの終了後の状態を指定 */
    animation-fill-mode: forwards, none;
    /* アニメーションの繰り返し回数を指定 */
    animation-iteration-count: 1, infinite;
    /* 2つ目のアニメーションに遅延を追加 */
    animation-delay: 0s, 20s;
}
/* 画像を拡大するアニメーション */
@keyframes zoomInTopImg {
	from {
	  transform: scale(1); /* 初期状態 */
	}
	to {
	  /*transform: scale(1.5);*/ /* 1.5倍に拡大 */

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