@charset "utf-8";

/* Box sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margin */
body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

* Remove list styles on ul, ol with a list role */
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; margin: 0; }

/* Set core body defaults */
html:focus-within{
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}
a{
	text-decoration: none;
	color: inherit;
}
img, picture, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* メインビジュアル */
.mv{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80vh;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.mv::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	transition: background 0.6s ease-in-out;
	z-index: 1;
	pointer-events: none;
}
html.header-colored .mv::before {
	background: rgba(0, 0, 0, 0.5);
}
.hero_wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	z-index: 0;
}
.hero_wrapper .mv_img,
.hero_wrapper video{
	width: 100%;
	height: 80vh;
	object-fit: cover;
	pointer-events: none;
}
.hero_wrapper > *{
	grid-area: 1 / -1 / 1 / -1;
}
.hero_wrapper .mv_logo{
	max-width: 300px;
	z-index: 1;
}

/* 葉っぱの背景 */
.leaf-bg{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	pointer-events: none;
	height: 100vh;
}

/* CONCEPT */
.concept{
	margin-top: 72vh;
	padding-top: 120px;
	position: relative;
	z-index: 0;
	padding-bottom: 150px;
}
.concept_bg1,
.concept_bg2,
.concept_bg3{
	position: absolute;
}
.concept_bg1{
	bottom: -50%;
	left: 0;
	max-width: 500px;
}
.concept_bg2{
	bottom: -100%;
	right: 0;
	max-width: 480px;
}
.concept_bg3{
	bottom: -150%;
	left: 0;
	max-width: 680px;
}
.concept_container{
	padding-top: 80px;
	position: relative;
	z-index: 1;
}
.concept_container h3{
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 393)), 24px);
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	text-shadow: 1px 1px 5px rgb(0, 0, 0, 1),
	1px 1px 10px rgb(0, 0, 0, 1);
}
.concept_container p{
	font-size: clamp(13px, calc(13px + 5 * ((100vw - 375px) / 393)), 18px);
	font-weight: 500;
	line-height: 2.5;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	text-shadow: 1px 1px 5px rgb(0, 0, 0, 1),
	1px 1px 10px rgb(0, 0, 0, 1);
}
.concept_no1{
	padding-bottom: 80px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}
.concept_no1
.concept_no2{
	padding-bottom: 40px;
}

.concept_no1 p{
	padding-top: 20px;
}
.concept_no1 .concept_text_box{
	width: 44%;
}
.concept_img1{
	max-width: 600px;
	height: auto;
	width: 50%;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
.concept_no2{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 33px;
	position: relative;
	z-index: 1;
}

.concept_img2{
	max-width: 450px;
	height: auto;
	width: 50%;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
.concept_no3{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 50px;
	margin-top: -200px;
	position: relative;
	z-index: 0;
}
.concept_no3 .concept_text_box2{
	text-align: right;
}

.concept_img3{
	max-width: 363px;
	height: auto;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
.c_block{
	display: block;
}
.c_block2{
	display: inline-block;
}
@media(max-width:1280px){
	.concept_no3{
		margin-top: 0;
		padding-top: 30px;
	}
	.concept{
		padding-bottom: 100px;
	}
}
@media(max-width:1080px){
	.concept_no1{
		flex-direction: column;
	}
	.concept_img1{
		width: 100%;
		margin: 0 auto;
	}
	.concept_no1 .concept_text_box{
		width: 100%;
	}
}
@media(max-width:768px){
	.concept_container{
		padding-top: 70px;
	}
	.concept_bg1{
		max-width: 300px;
		bottom: -30%;
	}
	.concept_bg2{
		max-width: 280px;
		bottom: -140%;
	}
	.concept_bg3{
		max-width: 350px;
		bottom: -200%;
	}
	.concept_no1{
		padding-bottom: 60px;
	}

	.concept_no1 .concept_text_box{
		width: 100%;
	}
	.concept_no2{
		flex-direction: column;
		align-items: flex-start;
		gap: 30;
	}
	.concept_img2{
		width: 100%;
	}
	.concept_no3{
		gap: 15px;
	}
	.concept_no3 .concept_text_box2{
		width: 50%;
	}
	.concept_img3{
		width: 50%;
	}
}
@media(max-width:1080px) and (min-width:768px){

	.concept_img1{
		margin-left: auto;
		margin-right: 0;
	}
	.c_block{
		display: inline-block;
	}
	.c_block2{
		display: block;
	}
}
@media(max-width:580px){
	.concept{
		padding-bottom: 30px;
	}
	.concept_container{
		padding-top: 30px;
	}
	.concept_no1{
		padding-bottom: 30px;
	}
	.concept_no1 p{
		padding-top: 15px;
	}
	.concept_img2{
		order: 2;
	}
	.concept_no2 h3{
		order: 1;
	}
	.concept_no3{
		flex-direction: column;
		align-items: center;
	}
	.concept_no3 .concept_text_box2{
		width: 100%;
		text-align: left;
	}
	.concept_img3{
		width: 100%;
		max-width: 100%;
	}

	.concept_bg2{
		bottom: -100%;
	}
	.concept_bg3{
		bottom: -150%;
	}
}

/* bannerセクション */
.sec_banner1{
	width: 100%;
	display: grid;
	place-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}

.sec_banner1 > *{
	grid-area: 1 / -1 / 1 / -1;
}
.sec_banner1 p{
	color: #ffffff;
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 393)), 24px);
	text-shadow: 1px 1px 10px #000000;
	z-index: 1;
	letter-spacing: 0.1em;
	line-height: 2;
	font-weight: 500;
}
.sec_banner1 img{
	object-fit: cover;
	min-height: 500px;
}

@media(max-width:580px){
	.sec_banner1 > * {
		grid-area: unset;
	}
	.sec_banner1 p{
		padding-bottom: 30px;
		text-align: left;
		width:var(--content-width);
		margin: 0 auto;
	}
}

/* メニューセクション */
.menu{
	position: relative;
	padding-top: 120px;
	padding-bottom: 150px;
	background: linear-gradient(135deg,#FFFD90 0%, #FFFD90 60%, #FFFFFF 100%);
}
.sec_bg1{
	position:absolute;
	top: -3%;
	left: 0;
	z-index: 0;
	max-width: 570px;
	height: auto;
}
.sec_bg2{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 0;
	max-width: 500px;
	height: auto;
}
.menu_container{
	position: relative;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
	margin: 0 auto;
	padding-top: 120px;
}
@media(max-width:768px){
	.menu_container{
		grid-template-columns: repeat(2, 1fr);
	}
}
.menu_item_header{
	background: var(--accent);
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 10px 15px;
}
.menu_item{
	display: block;
	transition: filter .3s ease;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.menu_item:hover{
	filter: brightness(1.1);
}
.menu_item.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.menu_title{
	font-size: 1rem;
	line-height: 1;
}
.menu_title .font_family{
	font-size: clamp(24px, calc(24px + 8 * ((100vw - 768px) / 512)), 32px);
}
.menu_view-more{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-size: 0.75rem;
	font-weight: 500;
}
.menu_arrow{
	width: 30px;
	height: 16px;
	display: grid;
	place-items: center;
	margin-left: 3px;
}
.menu_arrow span{
	width: 28px;
	height: 5px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: skew(45deg);
}
.menu_item:hover .menu_arrow span{
	animation: arrow-out .25s ease-out forwards,
    arrow-in  .55s .26s cubic-bezier(.2,.8,.4,1.1) forwards;
}
@keyframes arrow-out{
	from {transform:translateX(0)   skew(45deg); opacity:1;}
	to   {transform:translateX(14px)skew(45deg); opacity:0;}
}
@keyframes arrow-in{
	from {transform:translateX(-14px)skew(45deg); opacity:0;}
	to   {transform:translateX(0)    skew(45deg); opacity:1;}
}
@media(hover:none){
	.menu_item:active{
		filter: brightness(1.2);
	}
}
@media(max-width:1280px){
	.menu_container{
		gap: 25px;
	}
}
@media(max-width:1080px){
	.menu_container{
		padding-top: 85px;
	}
	.sp_view-more{
		display: none;
	}
	.menu_container{
		gap: 15px;
	}
}
@media(max-width:540px){
	.menu{
		padding-top: 85px;
		padding-bottom: 160px;
	}
	.menu_container{
		gap: 15px;
		padding-top: 40px;
	}
	.menu_item_header{
		padding: 3px 6px 7px;
	}
	.sp_menu_title_size .menu_item_header{
		padding: 8px 6px 7px;
	}
	.sp_menu_title_size .menu_title .font_family{
		font-size: 1.125rem;
	}
}
/* ニュース */
.news{
    padding-top: 120px;
    padding-bottom: 150px;
    width: min(1000px, 90vw);
    margin: 0 auto;
}
.news_banner{
	width: 100%;
	height: auto;
	padding-top: 75px;
	margin: 0 auto;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .01);
}
.top-news {
	width: 100%;
	padding: 20px;
	box-shadow:3px 3px 10px rgba(0,0,0,.01);
	background:#ffffff;
	margin-top: 80px;
}
.top-news__scroller {
	--visible-items: 3;
    --news-item-gap: 16px;
    --news-item-est-height: 68px;
    width: 100%;
    margin: 0;
    padding:20px;
    border-radius:8px;
    max-height:calc(
      (var(--news-item-est-height) * var(--visible-items)) +
      (var(--news-item-gap) * (var(--visible-items) - 1))
    );
    overflow-y:auto;
    overscroll-behavior:auto;
    scrollbar-gutter:stable;
    padding-right:24px;
}
.top-news__scroller::-webkit-scrollbar{
	width:8px;
}
.top-news__scroller::-webkit-scrollbar-track{
	background:#e0e0e0;
	border-radius:999px;
}
.top-news__scroller::-webkit-scrollbar-thumb{
	background:#bcbcbc;
	border-radius:999px;
}
.top-news__scroller::-webkit-scrollbar-thumb:hover{
	background:#999;
}
.top-news__list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    row-gap:var(--news-item-gap);
}
.top-news__item{
    padding-bottom:16px;
    position:relative;
}
.top-news__link{
    display:grid;
    grid-template-columns:1fr 5fr;
    column-gap:24px;
    align-items:end;
    text-decoration:none;
}
.top-news__link:hover .top-news_text,
.top-news__link:focus-visible .top-news_text{
	text-decoration:underline;
}

.top-news_date{
	font-size: clamp(13px, calc(13px + 3 * ((100vw - 580px) / 189)), 16px);
    line-height:1;
	letter-spacing: 0.2em;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
    padding-bottom:20px;
	border-bottom: 1px solid var(--news-color-line);
}

.top-news_text{
	font-size: clamp(13px, calc(13px + 3 * ((100vw - 580px) / 189)), 16px);
    line-height:1;
	letter-spacing: 0.2em;
	font-weight: 500;
	border-bottom: 1px solid #999999;
	padding-bottom: 20px;
	width: 100%;
}
.top-news__no-posts{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
    padding:32px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 24px rgba(0,0,0,.08);
}

@media (max-width:600px){
    .top-news__scroller{
		--news-item-est-height:72px;
		padding:20px 16px;
    }
	.top-news__link{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap:8px;
	}
	.top-news_date{
		padding-bottom: 9px;
	}
	.top-news_text{
		padding-bottom: 12px;
	}
}

/* アクセス */
.access{
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	padding-top: 120px;
	padding-bottom: 150px;
	background: linear-gradient(135deg,#BFFFFF 0%, #BFFFFF 60%, #FFFFFF 100%);
}
.access .sec_bg1{
	top: 5%;
}
.access_container{
	position: relative;
	top: 0;
	left: 0;
	width: min(1000px, 90vw);
	margin: 0 auto;
	font-size: 1rem;
}
.info_container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	padding-top: 80px;
	font-size: 1rem;
}
.access_map{
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	max-width: 480px;
	min-width: 350px;
}
.access_map iframe{
	width: 100%;
	height: 100%;
	border: 0;
}
.info_size{
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 393)), 24px);
	font-weight: 600;
	letter-spacing: 0.05em;
}
.access_info{
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
}
.access_info dl{
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 25px;
	column-gap: 18px;
}
.access_info dt{
	font-weight: 400;
	white-space: nowrap;
	font-size: clamp(15px, calc(15px + 3 * ((100vw - 375px) / 393)), 18px);
}
.flex_dt{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.access_info dd{
	line-height: 1.7;
	font-weight: 400;
}
.access_info a{
	color: inherit;
	text-decoration: none;
}
.access_divider{
	grid-column: 1 / -1;
	border: none;
	border-top: 1px solid #999999;
	padding-bottom: 10px;
}
.ok_text{
	font-size: 0.8125rem;
}

@media(max-width:1080px){
	.info_container{
		grid-template-columns: 1fr;
	}
	.access_map{
		max-width: 480px;
		margin: 0 auto;
	}
	.access_info{
		max-width: 480px;
		margin: 0 auto;
		width: 100%;
	}
	.access_divider{
		padding-bottom: 0;
	}
}
@media(max-width:768px){

	.access_map{
		margin-bottom: 50px;
		max-width: 480px;
	}
}
@media(max-width:580px){
	.access_map{
		min-width: 300px;
	}
	.info_btn{
		padding: 20px 30px;
	}
}