@charset "utf-8";

@import url("style/variables.css");/*変数定義*/
	
:root{
}

body{
	background:#cef0ff;
}

.section_title{
	text-align: center;
	margin-bottom:40px;
}

#preamble{
	padding:40px 0 0 0;
	background:none;
}
#sns_btn{/*シェアボタン*/
	margin:60px auto 0 auto;
}

#top_img{
	padding:20px 0 0 0;
	overflow: hidden;
	position:relative !important;
	/*z-index: 3;*/
	img{
		border-radius: 30px;
	}
	a{
		&:hover{
			opacity: .75;
		}
	}
	@media (max-width: 768px) {
		padding:20px 20px 30px 20px;
	}
}
.swiper-wrapper{
	position:static !important;
}
.swiper-button-next:after, .swiper-button-prev:after {/*左右の矢印変更！*/
	display: none;
 }
 .fa-arrow-circle-left,.fa-arrow-circle-right{/*矢印色変更*/
	 color:white;
	 @include text-shadow(0px,0px,2px,rgba(0,0,0,.25));
	 &:hover{
		 color:rgb(var(--baceFontColor));
	 }
 }
 .swiper-button-prev, .swiper-rtl .swiper-button-next {/*矢印位置調整*/
	 left:50% !important;
	 margin-left:-580px;
	 @media (max-width: 1200px) {
		 left:20px !important;
		 margin-left:0;
	 }
 }
 .swiper-button-next, .swiper-rtl .swiper-button-prev{/*矢印位置調整*/
	right:50% !important;
	margin-right:-580px;
	@media (max-width: 1200px) {
		right:20px !important;
		margin-right:0;
	}
}
	
#breadcrumb{
	display:none;
}

.section_title{
	padding:60px 0 40px 0;
}

#youkoso{/*ようこそ、えぼしスポーツの里へ。*/
	background:rgb(var(--mainColor));
	color:white;
	font-size: 1.8em;
	font-weight: 600;
	width:min(780px,100%);
	margin:0 auto;
	padding:.3em .3em;
	border-radius: 10px;
	@media (max-width: 700px) {
		inline-size: fit-content;
  	margin-inline: auto;
  	text-align: left;
		padding:.3em .5em;
	}
}

aside.for_page{/*リンク*/
	margin:50px auto 0 auto;
	a{
		color:rgb(var(--baceFontColor));
		font-size: 1.2rem;
		font-weight: 600;
		display:inline-block;
		border:2px solid rgb(var(--subColor));
		padding:.5em 1em;
		border-radius: 15px;
		background:white;
		svg{
			margin:0 0 0 .3em;
			fill:rgb(var(--subColor));
		}
		&:hover{
			background:rgb(var(--subColor));
			color:white;
			svg{
				fill:white;
			}
		}
	}
	
}

#business_hours{/*入場無料*/
	background:white;
	padding:20px;
	border-radius: 20px;
	border:2px solid rgb(var(--subColor));
	position:relative;
	margin:30px auto 0 auto;
	> div{
		display:grid;
		grid-template-columns: 180px 1fr;
		gap:20px;
		align-items: center;
		div{
			&:nth-of-type(1){
				background:rgb(var(--subColor));
				color:white;
				padding:10px 20px;
				border-radius: 10px;
				
				h3{
					font-size: 1.7rem;
					font-weight: 600;
				}
				p{
					
				}
			}
			&:nth-of-type(2){
				text-align: left;
				font-size: 1.1rem;
				font-weight: 500;
				aside{
					font-size: .9rem;
				}
			}
		}
	}
	> aside{
		text-align: left;
		margin:20px auto 0 auto;
		padding:20px 0 0 0;
		border-top:2px dotted silver;
		color:#1b5cbe;
		h3{
			font-size: 1.2em;
			font-weight: 500;
			span{
				font-size: 1.2em;
				text-decoration: underline;
				text-underline-offset: .2em;
				text-decoration-thickness: 1px;
			}
		}
		p{
			margin:.2em auto 0 auto;
		}
	}
	&::after{
		content:url(grp/jitensha.png);
		bottom:0px;
		right:10px;
		position:absolute;
	}
	@media (max-width: 970px) {
		&::after{
			content:"";
		}
	}
	@media (max-width: 860px) {
		margin-top:0;
		> div{
			display:grid;
			grid-template-columns: 180px 1fr;
			gap:20px;
			div{
				&:nth-of-type(2){
					padding-right:0;
			}
		}
		&::after{
			content:"";
		}
		}
	}
	@media (max-width: 700px) {
		> div{
			display:block;
			padding:0;
			overflow: hidden;
			div{
				&:nth-of-type(2){
					padding:20px;
				}
			}
		}
	}
}

#pick_news{/*園内情報*/
	margin:30px auto 0 auto;
	h3{
		text-align: left;
		span{
			display:inline-block;
			padding:.2em .5em;
			background:red;
			color:white;
			font-size: 1.4em;
			font-weight: 600;
			border-radius: 10px 10px 0 0;
		}
	}
	ul{
		/*height:7em;
		overflow-y: auto;*/
		border:3px solid red;
		padding:20px;
		background:white;
		li{
			text-align: left;
			a{
				color:rgb(var(--baceFontColor));
				display:grid;
				grid-template-columns: 10em 1fr;
				align-items: center;
				padding:5px 0;
				time{
					font-size: .9rem;
				}
				h3{
					font-size: 1.3rem;
					font-weight: 600;
					color:red;
				}
				p{
					font-size: 1.1rem;
					display:none;
				}
				&:hover{
					h3{
						text-decoration: underline;
						text-underline-offset: .2em;
						text-decoration-thickness: 1px;
					}
				}
			}
			&:nth-of-type(1){
				display:block;
			}
		}
	}
	@media (max-width: 700px) {
		ul{
			li{
				a{
					display:block;
				}
			}
		}
	}
}

#hitori{
	margin:30px auto 0 auto;
	a{
		display:inline-block;
		border-radius: 10px;
		overflow: hidden;
		background:white;
		&:hover{
			img{
				opacity: .75;
			}
		}
	}
}

#top_banner_2{
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap:20px;
	margin:30px auto 0 auto;
	a{
		display:block;
		border-radius: 10px;
		overflow: hidden;
		&:hover{
			img{
				opacity: .75;
			}
		}
	}
	@media (max-width: 700px) {
		display:block;
		> * + *{
			margin-top:20px;
		}
	}
}

#top_banner{/*トップバナー*/
	--_column: 2;
  --_gap: clamp(8px, 2cqi, 16px);

  display: block grid;
  grid-template-columns: repeat(auto-fit, calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column)));
  gap: var(--_gap);
  justify-content: center;

  @container (640px <= inline-size) {
    --_column: 3;
  }
	margin:30px auto 0 auto;
	a{
		display:block;
		background:white;
		border-radius: 10px;
		overflow: hidden;
		&:hover{
			img{
				opacity: .75;
			}
		}
	}
	@media (max-width: 1200px) {
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr));
		gap:10px;
	}
}

#article_list{/*主な施設紹介*/
	background:urL(grp/himawari.png) center center repeat-x,#aeeec5;
	width: 100vw;
	margin: 0 calc(50% - 50vw);

	padding-bottom:80px;
	position:relative;
	&::after{/*なみ*/
		content:"";
		height:45px;
		width:100%;
		position:absolute;
		top:-45px;
		left:0;
		background:url(grp/nami_g.png) center center repeat-x;
		z-index: 8;
	}
	> h3{
		padding:100px 0 30px 0;
		font-size: clamp(1.3rem, 1.118rem + 0.91vw, 1.8rem);
		font-weight: 600;
		color:#039649;
		position:relative;
		&::before{
			content:url(grp/image_family.png);
			position:absolute;
			top:0;
			left:50%;
			margin-left:-157px;
			margin-top:-35px;
			z-index: 10;
		}
	}
	> p{
		width:min(760px,calc(100% - 40px));
		margin:0 auto;
		text-align: left;
	}
	> div{/*スライダー部分*/
		margin:50px auto 0 auto;
		ul{
			
			li{
				text-align: center;
				position:relative;
				a{
					width:min(180px,100%);
					display:block;
					margin:0 auto;
					figure{
						display:block;
						border-radius: 50%;
						aspect-ratio: 1 / 1;
						overflow: hidden;
						background:white;
					}
					h3{
						margin:.5em auto 0 auto;
						color:rgb(var(--baceFontColor));
						font-weight: 500;
					}
					&::before{
						position:absolute;
					}
					&:hover{
						figure{
							img{
								opacity: .75;
							}
						}
						h3{
							color:#039649;
						}
					}
				}
				&::before{
					position:absolute;
				}
				&str{
					&::before{
						content:url(grp/kazari01.png);
						top:0;
						right:0;
					}
				}
			}
		}
	}
}

.slider {/*スライダー*/
  margin: 0 auto;

  .slick-slide {
    margin: 0 10px;
  }
	.slick-list{
		z-index: 10;
	}
  .slick-prev,
  .slick-next {
		z-index: 15;
    position: absolute;
    top: 40%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    height: 15px;
    width: 15px;

    &.slick-prev {
      left: 1.5%;
      transform: rotate(-135deg);
    }

    &.slick-next {
      right: 1.5%;
      transform: rotate(45deg);
    }
  }

  .slick-dots {
    text-align: center;
    margin: 20px 0 0 0;

    li {
      display: inline-block;
      margin: 0 5px;

      button {
        color: transparent;
        outline: none;
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 50%;
        background: #ccc;
      }

      &.slick-active button {
        background: #333;
      }
    }
  }
}

#flowers{/*花だより*/
	background:url(grp/hana_bg.png) center center repeat-x,#fffdcf;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position:relative;
	padding-bottom:100px;
	position:relative;
	&::before{/*お花カー*/
		content:url(grp/flower_car.png);
		position:absolute;
		bottom:0;
		right:0;
		z-index: 10;
	}
	&::after{/*なみ*/
		content:"";
		height:45px;
		width:100%;
		position:absolute;
		top:-45px;
		left:0;
		background:url(grp/nami_y.png) center center repeat-x;
	}
	> ul{
		width: min(calc(100% - 40px), var(--page_max));
		margin:0 auto;
		display:grid;
		grid-template-columns: repeat(4,1fr);
		gap:40px;
		background:url(grp/katatumuri.png) top center no-repeat;
		li{
			a{
				display:block;
				margin:0 auto;
				width:min(200px,100%);
				color:rgb(var(--baceFontColor));
				padding-bottom:1.5em;
				position:relative;
				height:100%;
				figure{
					aspect-ratio: 1 / 1;
					position:relative;
					overflow: hidden;
					border-radius: 50%;
					
					img{
						min-width:100%;
						min-height:100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
				h3{
					margin:1em auto 0 auto;
					text-align: left;
					font-weight: 600;
				}
				time{
					position:absolute;
					right:0;
					bottom:0;
					font-size: .85rem;
				}
				&:hover{
					figure{
						img{
							opacity: .75;
						}
					}
				}
			}
		}
	}
	@media (max-width: 860px) {
		&::before{/*お花カー*/
			content:"";
		}
		> ul{
			display:grid;
			grid-template-columns: repeat(2,1fr);
		}
	}
}

.info{/*更新　共通*/
	background:white;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position:relative;
	&::after{/*なみ*/
		content:"";
		height:45px;
		width:100%;
		position:absolute;
		top:-45px;
		left:0;
		background:url(grp/nami_w.png) center center repeat-x;
	}
	ul{
		width: min(calc(100% - 40px), var(--page_max));
		margin:30px auto 0 auto;
		display:grid;
		grid-template-columns: repeat(4,1fr);
		gap:40px;
		li{
			display:none;
			a{
				display:block;
				border-radius: 20px;
				background:white;
				overflow: hidden;
				height:100%;
				position:relative;
				figure{
					aspect-ratio: 4 / 3;
        	position:relative;
        	overflow: hidden;
					img{
						min-width:100%;
						min-height:100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
				h3{
					color:rgb(var(--baceFontColor));
					font-size: 1.1rem;
					font-weight: 600;
					text-align: left;
					padding:.5em 15px 40px 15px;
				}
				time{
					display:block;
					color:#555;
					font-size: .8rem;
					text-align: right;
					position:absolute;
					bottom:15px;
					right:15px;
				}
				&:hover{
					figure{
						img{
							opacity: .75;
						}
					}
				}
			}
			&:nth-of-type(-n+4){
				display:block;
			}
		}
	}
	@media (max-width: 1200px) {
		ul{
			gap:20px;
		}
	}
	@media (max-width: 860px) {
		ul{
			display:grid;
			grid-template-columns: repeat(2,1fr);
		}
	}
	@media (max-width: 480px) {
		ul{
			display:block;
			> * + *{
				margin-top:20px;
			}
			li{
				display:none !important;
				&:nth-of-type(-n+2){
					display:block !important;
				}
			}
		}
	}
}

#event_news{
	padding-bottom:100px;
	margin-top:100px;
	background:urL(grp/dack.png) center center repeat-x,#fffdcf;
	&::after{
		background:url(grp/nami_y.png) center center repeat-x;
	}
	ul{
		position:relative;
		&::before{
			content:url(grp/event_image.png);
			position:absolute;
			top:-120px;
			right:0;
		}
		li{
			figure{
				img{
					min-width: 100%;
  					min-height: 100%;
  					object-fit: cover;
  					position: absolute;
  					left: 50%;
  					top: 0;
  					transform: translateX(-50%);
				}
			}
		}
	}
	
}

#infobox{
	background:urL(grp/hairt.png) center center repeat-x,#ffe0ca;
	padding-bottom:100px;
	&::after{
		background:url(grp/nami_o.png) center center repeat-x;
	}
	ul{
		position:relative;
		&::before{
			content:url(grp/info_image.png);
			position:absolute;
			top:-130px;
			left:20px;
		}
	}
}

#links{/*リンク*/
	background:url(grp/link_bg.png) bottom repeat-x;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position:relative;
	padding-bottom:60px;
	&::after{/*なみ*/
		content:"";
		height:45px;
		width:100%;
		position:absolute;
		top:-45px;
		left:0;
		background:url(grp/nami_b.png) center center repeat-x;
	}
	ul{
		&:nth-of-type(1){
			display:flex;
			justify-content: center;
			flex-wrap:wrap;
			gap:10px;
			li{
				width:min(240px,100%);
				a{
					display:block;
					&:hover{
						img{
							opacity: .75;
						}
					}
				}
			}
		}
		&:nth-of-type(2){
			display:flex;
			justify-content: start;
			flex-wrap:wrap;
			margin:30px auto 0 auto;
			width: min(calc(100% - 40px), var(--page_max));
			gap:.5em 10px;
			li{
				a{
					display:block;
					background:white;
					border:1px solid silver;
					color:rgb(var(--baceFontColor));
					padding:.3em .5em;
					font-weight: 600;
					border-radius: 10px;
					&:hover{
						color:rgb(var(--mainColor));
					}
				}
			}
		}
	}
}
#sns_btn{/*シェアボタン*/
	margin:00px auto 0 auto;
}