@charset "UTF-8";



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

****************/
#s_top_hero {
	display: flex;
	/*grid-template-columns: 1fr;*/ /* 縦に並べる */

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


#s_top_hero .msg {
	width: calc(55%);
	display: grid;
	grid-template-columns: 1fr; /* 縦に並べる */

    position: relative; /* right を使用するために position を設定 */
	/*border: 1px solid red;*/ /* 枠線の幅、スタイル、色を設定 *//*デバッグ用*/

}

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


	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: 14px;
	font-weight: bold;

    color: black;
    line-height: 2.6;
    letter-spacing: 1.2px;


    /* width: calc(65%); */
    margin: 240px 0 0 60px;

    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{

    top: 12%;
    left: 60px; /* .picture の左側を基準に配置 */
    margin: 0;
	z-index: 31;


    width: 300px;
    position: absolute;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;

    overflow: hidden;


}
#s_top_hero .picture .image1 img {

    /* アニメーションの名前を指定 */
    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 {
    top: 0%;
    left: 180px; /* .picture の左側を基準に配置 */
    margin: 0;
	z-index: 30;


	width: 350px;
    position: absolute;
	border-top-left-radius: 30px;
    border-bottom-left-radius: 10px;

	overflow: hidden;

}


#s_top_hero .picture .image2 img {

    /* アニメーションの名前を指定 */
    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%);
	}
}