@charset "utf-8";

:root{
}

#breadcrumb{
	display:none;
}

#preamble{
	width:auto;
}

#top_img{
	padding:0 20px;
	figure{
		position: relative;
		display:block;
		aspect-ratio:  5 / 2;
		background-image: url("grp/top_image.jpg");
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
		img{
		}
		figcaption{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-weight: 500;
			text-shadow: 0 0 3px #333;

			--clamp-max: 30;
			--clamp-min: 25;
			font-size: var(--clamp);
			color:white;
		}
	}
	@media (max-width: 1000px) {
		figure{
			position: relative;
			display:block;
			aspect-ratio:  3 / 2;
			background-image: url("grp/top_image.jpg");
  		background-size: cover;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-attachment: fixed;
		}
	}
	@media (max-width: 760px) {
		figure{
			position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background-image: url("grp/top_image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; を削除または scroll に変更 */
    background-attachment: scroll; /* またはこの行を削除 */
		}
	}
}

#youkoso{
	width:var(--container-width);
	margin:50px auto 0 auto;
	display:grid;
	grid-template-columns: 1fr 2fr;
	gap:40px;
	align-items: center;
	figure{
			aspect-ratio: 3 / 2;
			position:relative;
			overflow: hidden;
			text-align: center;
			border-radius: 15px;
			img {
      	min-width:100%;
				min-height:100%;
				object-fit: cover;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
    	}
		}
		> div{
			text-align: left;
			p{
				margin:1em auto 0 auto;
				line-height: 1.8em;
			}
		}
	@media (max-width: 760px) {
		display:block;
		figure{
			width:min(480px,100%);
			margin:0 auto;
		}
		> div{
			margin-top:60px;
		}
	}
}


.loop_wrap {
	margin:80px auto 0 auto;
  display: flex;
  width: 100%;
  height: 250px;
  overflow: hidden;
	ul {
  	width: auto;
		display: flex;
		&:first-child {
			animation: loop 160s -80s linear infinite;
		}
		&:last-child {
			animation: loop2 160s linear infinite;
		}
		li{
			aspect-ratio:  3 / 2;
			img{
				width: auto;
  			height: 100%;
			}
		}
	}
	&:hover ul {/*マウスオーバーでとまる*/
  	/*animation-play-state: paused;*/
	}
	@media (max-width: 1000px) {
		height:200px;
	}
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

#article_list{
	width:var(--container-width);
	margin:0 auto;
	> div{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
		gap:20px;
		section{
			a{
				figure{
					span{
					display:block;
					aspect-ratio:  3 / 2;
					overflow: hidden;
					background:#eee;
					border-radius: 10px;
					}
					figcaption{
					margin:.5em auto 0 auto;
					text-align: left;
					font-weight: 400;
					font-size: 1.1em;
					color:rgb(var(--baceFontColor));
					}
				}
				&:hover{
					figure{
						span{
							img{
								opacity: .75;
							}
						}
					}
				}
			}
		}
	}
}