.mt-10{
	margin-top: 10px;
}
.mt-30{
	margin-top: 30px;
}
.mt-50{
	margin-top: 50px;
}

.mt-80{
	margin-top: 80px;
}

.mt-100{
	margin-top:100px;
}




/*
body{
   background-image:
   radial-gradient(at 99% 56%, hsla(40,100%,96%,1) 0px, transparent 50%),
   radial-gradient(at 0% 64%, hsla(346,100%,96%,1) 0px, transparent 50%);
   background-attachment: fixed;
   background-size: 300% 300%;
   animation: GradietionAnimation 10s ease infinite;
}

@keyframes GradietionAnimation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
*/

/*ふわっと*/
#animation {
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*期間*/
.box2 {
	border: 3px solid #db879e;
	max-width: 900px;
	margin: 0 auto;
	}

.box2_ttl {
	font-size: 18px;
	margin: 0;
	background: #6f4b3e;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	text-align: center;
	}

.box2_main {
	padding-top: 0.8em;
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.box2_sub{
	color:red;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}

.box2_kikan {
	border: 3px solid #b4647c;
	background-color: #fff;
	max-width: 80%;
	margin: 0 auto;
	}

.box2_ttl_kikan {
	font-size: 18px;
	margin: 0;
	background:#b4647c;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	text-align: center;
	}

.box2_main_kikan {
	padding-top: 0.8em;
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.box2_sub_kikan{
	color:red;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}



.item-image {
    position: relative; /* 子要素のabsolute基準点 */
    overflow: hidden; /* 画像がはみ出さないように */
	width: 100%;
	padding-bottom: 100%; 
	height: 0;
}

.item-image img {
    position: absolute; /* 親要素内で位置指定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の表示方法 */
    transition: opacity 0.3s ease-in-out; /* 透明度変化のアニメーション */
}

/* 通常表示の画像 */
.item-image .main-image {
    opacity: 1; /* 通常は見える */
}

/* ホバー時に表示する画像 */
.item-image .hover-image {
    opacity: 0; /* 通常は隠れている */
}

/* .item-image にホバーした時 */
.item-image:hover .main-image {
    opacity: 0; /* メイン画像を隠す */
}

.item-image:hover .hover-image {
    opacity: 1; /* ホバー画像を出現させる */
}

/*順番にふわっと*/
.l-container {
  max-width: 1400px;
  margin: 50px auto;
}
.image__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap:15px;
}

.image__list img {
  opacity: 0;
  width:200px;
  height: auto;
}

.image__list div.show {
  opacity: 1;
  animation-name: showOrder;
  animation-duration: 0.1s;
}

.image__list img.show {
  opacity: 1;
  animation-name: showOrder;
  animation-duration: 0.1s;
}


@keyframes showOrder {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/*flex*/
.FlexContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    overflow:visible;
    flex-direction: row;
}

.FlexContainer div {
    width: 200px;
    height: 600px;
    margin: 10px;
}

.box_s{
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.box_s img{
	width: 350px;
	margin-bottom: 1.5em;
}

.item_ttl{
	font-size: 2.2rem;
}

.tag{
    padding: 0.5em 1em;
	margin: 2em 0;
	font-weight: bold;
	border: solid 0.5px #000000;
	font-size: 12px;
	text-align: center;
    }


/*-----------------------------------------------------*/
/* PC */
/*-----------------------------------------------------*/
@media (min-width: 993px) {
	



}
@media screen and (min-width: 768px){
	
	}

/*-----------------------------------------------------*/
/* タブレット */
/*-----------------------------------------------------*/

@media screen and (min-width: 769px) and (max-width: 992px) {
	
	.image__list div{
  	opacity: 0;
  	width:200px;
  	height: auto;
}


	.image__list img {
  	opacity: 0;
  	width:200px;
  	height: auto;
}

}


/*-----------------------------------------------------*/
/* SP */
/*-----------------------------------------------------*/
@media (max-width:767px) {
	
	.box2_kikan {
	max-width: 90%;
	}
	
	.image__list div{
  	opacity: 0;
  	width:180px;
  	height: auto;
}


	.image__list img {
  	opacity: 0;
  	width:180px;
  	height: auto;
}
	
.item_ttl{
	text-align: center;
	}