@charset "utf-8";
/*----------------------------------------------------------------------------------------------------------
	スマホ用（～768px）背景用のスライドショー
------------------------------------------------------------------------------------------------------------*/
body{
	overflow: hidden;
}

.slideshow_com {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.item_com {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: slideshow03 25s infinite;
  opacity: 0;
}

.item_com:nth-child(1) {
  background-image: url("../image/common/mainimg01.webp");
  animation-delay: 0s;
}
.item_com:nth-child(2) {
  background-image: url("../image/common/mainimg02.webp");
  animation-delay: 5s;
}
.item_com:nth-child(3) {
  background-image: url("../image/common/mainimg03.webp");
  animation-delay: 10s;
}
.item_com:nth-child(4) {
  background-image: url("../image/common/mainimg04.webp");
  animation-delay: 15s;
}
.item_com:nth-child(5) {
  background-image: url("../image/common/mainimg05.webp");
  animation-delay: 20s;
}

@keyframes slideshow03 {
  0%    {opacity: 0; }
  10%   {opacity: 1; }/*①：100÷（写真の枚数）÷2*/
  20%   {opacity: 1; }/*②：100÷（写真の枚数）*/
  30%   {opacity: 0; }/*①+②*/
  100%  {opacity: 0; }
}


/*トップページ・スマホ用
*************************************************/
.slideshow_sp {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.item_sp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: slideshow01 20s infinite;
  opacity: 0;
}

.item_sp:nth-child(1) {
background-image: url("../image/common/mainimg51.webp");
  animation-delay: 0s;
}
.item_sp:nth-child(2) {
background-image: url("../image/common/mainimg52.webp");
  animation-delay: 5s;
}
.item_sp:nth-child(3) {
background-image: url("../image/common/mainimg53.webp");
  animation-delay: 10s;
}
.item_sp:nth-child(4) {
background-image: url("../image/common/mainimg54.webp");
  animation-delay: 15s;
}

@keyframes slideshow01 {
  0%    {opacity: 0; }
  12.5% {opacity: 1; }/*①：100÷（写真の枚数）÷2*/
  25%   {opacity: 1; }/*②：100÷（写真の枚数）*/
  37.5% {opacity: 0; }/*①+②*/
  100%  {opacity: 0; }
}


/*トップページ・PC用
*************************************************/
.slideshow_pc {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.item_pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: slideshow02 60s infinite;
  opacity: 0;
}

.item_pc:nth-child(1) {
	background-image: url("../image/common/mainimg01_2022.webp");
	animation-delay: 0s;
}
.item_pc:nth-child(2) {
	background-image: url("../image/common/mainimg02.webp");
	animation-delay: 5s;
}
.item_pc:nth-child(3) {
	background-image: url("../image/common/mainimg03.webp");
	animation-delay: 10s;
}
.item_pc:nth-child(4) {
	background-image: url("../image/common/mainimg04_2022.webp");
	animation-delay: 15s;
}
.item_pc:nth-child(5) {
	background-image: url("../image/common/mainimg05.webp");
	animation-delay: 20s;
}
.item_pc:nth-child(6) {
	background-image: url("../image/common/mainimg06_2024.webp");
	animation-delay: 25s;
}
.item_pc:nth-child(7) {
	background-image: url("../image/common/mainimg07_2022.webp");
	animation-delay: 30s;
}
.item_pc:nth-child(8) {
	background-image: url("../image/common/mainimg08.webp");
	animation-delay: 35s;
}
.item_pc:nth-child(9) {
	background-image: url("../image/common/mainimg09.webp");
	animation-delay: 40s;
}
.item_pc:nth-child(10) {
	background-image: url("../image/common/mainimg10.webp");
	animation-delay: 45s;
}
.item_pc:nth-child(11) {
	background-image: url("../image/common/mainimg12.webp");
	animation-delay: 50s;
}
.item_pc:nth-child(12){
	background-image: url("../image/common/mainimg13.webp");
	animation-delay: 55s;
}

@keyframes slideshow02 {
  0%    {opacity: 0; }
  4.2%  {opacity: 1; }/*①：100÷（写真の枚数）÷2*/
  8.3%  {opacity: 1; }/*②：100÷（写真の枚数）*/
  12.5% {opacity: 0; }/*①+②*/
  100%  {opacity: 0; }
}








/*-------------------------------------------------------------------------------------------------------------------------------
	タブレット用（768px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:768px){

.slideshow_sp{display: none;}
.slideshow_pc{display: block;}
/********/
}






/*-------------------------------------------------------------------------------------------------------------------------------
	PC用（1300px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1300px){

/********/
}