@charset "utf-8";



/*CSSスライドショーアニメーション設定
---------------------------------------------------------------------------*/
/*1枚目*/
@keyframes slide1 {
	0% {left: 110%;}
	3% {left: 0%;}
	20% {left: 0%;}
	23% {left: -110%;}
	100% {left: -110%;}
}
/*2枚目*/
@keyframes slide2 {
	0% {left: 110%;}
	33% {left: 110%;}
	36% {left: 0%;}
	53% {left: 0%;}
	56% {left: -110%;}
	100% {left: -110%;}
}
/*3枚目*/
@keyframes slide3 {
	0% {left: 110%;}
	66% {left: 110%;}
	69% {left: 0%;}
	86% {left: 0%;}
	89% {left: -110%;}
	100% {left: -110%;}
}

/*mainimg　pcの時（768px以上）のスタイル
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg .pc-only {
	position: relative;
	overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	width: 100%;
}
#mainimg .pc-only img.slide0 {
	height: 20em;
}
#mainimg .pc-only span.img_com.flex {
	position: absolute;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: center;
	color: #fff;
	bottom: 50px;
    left: 0;
	height: auto;
    width: 100%;
    font-weight: bold;
    line-height: 2;
    text-shadow: 2px 0px 10px #333333;
    font-size: clamp(20px, (100vw - 375px) * 10 / (1280 - 375) + 20px, 35px);
}

@media screen and (min-width:1024px){
	#mainimg .pc-only img.slide0 {
		height: auto;
	}
}

/*mainimg　スマホの時（768px以下）のスタイル
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg .smart-only{
	position: relative;
	overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	width: 100%;
}
#mainimg .smart-only span.img_com.flex {
	position: absolute;
    justify-content: center;
    align-items: center;
    text-align: left;
    color: #6d6d6d;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    font-weight: bold;
    line-height: 2;
    text-shadow: 2px 0px 2px #ffffff;
    font-size: clamp(23px,(100vw - 375px)* 10 /(1280 - 375) + 23px, 35px);
}