@charset "UTF-8";
/*-----------
common
-----------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(http://fonts.googleapis.com/css?family=Lora);
/*テキスト*/
.menu > li{text-align:center;}
.txt {line-height:1.8; font-size:1rem;}
.btn {line-height:1.8; font-size:1.1rem;}
.message{font-size:1.1rem; letter-spacing:0.1em; line-height:2; margin-bottom:0.5em;}
.tit{font-size:1.2rem; letter-spacing:0.1em; line-height:1.3; margin-bottom:0.5em; font-weight:500;}
.notice{font-size:0.9rem;}

/*汎用*/
.mt10{ margin-top:10px;}
.mt30{ margin-top:30px;}
.mt50{ margin-top:50px;}

.mb10{ margin-bottom:10px;}
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}

/*スマホでは非表示*/
.sp{display:none;}

.wrapper{margin:0 auto; width:1000px;}
.block{margin:0 auto 0px; padding:20px 0 30px; display:block;}
.image img{width:100%;}
/*画像 luminous モーダルの時の最大サイズ */
.lum-lightbox-inner img { max-width: 650px;}

/*フェードインアニメーション--*/

.fadein {
  opacity: 0;
  transform : translate(0, 80px);
  transition : all 1800ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}


/*-----------
フォレスタトップ
-----------*/
body#foresta2024{background:#fff;}
body#foresta2024 .container{ width:100%; text-align: center; padding:0; margin:0 auto; font-size:14px; font-weight:400; font-family:'Zen Maru Gothic', serif; color:#40220F; background: url("images/bk_forest.jpeg") top center repeat;}
section:after{display:none;}

ul.flexList {display:flex; flex-wrap:wrap; gap:30px 50px; justify-content:center;}
ul.flexList li .illust img {width:auto;}

a:hover .image img{opacity:0.7; transition:0.5s all;}

.mark{ padding:2px 10px; background:#40220F; letter-spacing:0; color:#fff; font-weight:400;}
.mark.off{ border:1px solid #333; padding:2px 10px; background:transparent; text-decoration:none; letter-spacing:0; color:#333;}

/*-----------カバー----------*/
#cover {background: url("images/bk_mainimg.jpg") center center no-repeat #fff; background-size:cover; height:110vh; position:relative; margin-top:40px;}
#cover h1{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); margin-top:-40px;}
@media(max-width : 960px ){
#cover {height:60vh;}
#cover h1{width:100%;}
#cover h1 img{width:65%;}
}
h2.headline {font-size:2.5rem; margin-bottom:20px; font-weight:500; letter-spacing:0.2em; font-family:'Kaisei Opti', serif;}
#leadArea{background:#fff;}
#leadArea h2.headline {font-size:4rem; margin:10px auto 20px;}


/*-----------シーズン----------*/
#seasonArea{ padding:50px 0 0; position:relative;}
#seasonArea:before{position:absolute; content:""; width:100%; height:100px; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); z-index:100; top:0; left:0;}
#seasonArea .wrapper{width:100%; background:transparent; background-image: radial-gradient(rgba(255, 255, 255, 0.3) 20%, transparent 0), radial-gradient(rgba(255, 255, 255, 0.5) 10%, transparent 0); background-position: 5px 5px, 30px 30px; background-size: 50px 50px; margin:0 auto; padding:30px 0  100px;}
#seasonArea .flexList{ gap:0 20px;}
#seasonArea .flexList li{flex-basis:190px;}
#seasonArea .flexList li .image img{border-radius:50%; border:6px solid rgba(255,255,255,0.2); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0);}
@media(max-width : 960px ){
#seasonArea .flexList#may li:nth-child(4),#seasonArea .flexList#july li:nth-child(4),#forestArea .flexList li:nth-child(3){display:none;}
}

/*-----------森エリア----------*/
#forestArea {padding:10px 0 0;  back ground:linear-gradient(180deg, #fff 40%, #C3F4C9 100%); position:relative;}
#forestArea div{ position:relative;}
#forestArea .flexList{ position:absolute; bottom:0px; right:30px; z-index:500; gap:20px; margin-bottom:30px;}	
#forestArea .flexList li{ width:250px; background:#fff; padding:0 0 10px;}	
#forestArea .flexList li .image{border-radius:50%; background:#fff; margin:-125px 0 0; }	
#forestArea .flexList li .image img{border-radius:50%; width:100%; border:10px solid #fff;}	
@media(max-width : 960px ){
#forestArea .flexList{ position:relative; bottom:0; right:0;}	
}
/*-----------スポット----------*/
#spotArea {margin:0; padding:0;}
#spotArea .flexList{ width:100%; gap:0;}	
#spotArea .flexList li{flex-basis:25%; min-width:300px;}
#spotArea .flexList li .image{margin:0;}
#spotArea .flexList li .message{margin:0 auto 10px;}


/*-----------イベント----------*/
#eventsArea { background-image: radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 54.4%), radial-gradient(transparent 50%, rgba(255, 255, 255, 0.1) 54.4%); background-position: 0px 0px, 16px 16px; background-size: 32px 32px; margin:0 auto; padding:80px 0 50px;}

.btn.strong a{font-size:110%; padding:1em 2em; border-radius:2em;}




/*-----------イベント未使用　ここから----------*/

#eventsArea .wrapper{display:flex; justify-content:center; gap:50px; padding:0 5%; width:100%; background:transparent;}

/*--------- 5月のみの時　#eventsArea .eventBox{flex-basis:50%; min-width:500px;}-------------------*/
#eventsArea .eventBox{flex-basis:100%; min-width:500px;}
@media(max-width : 960px ){
#eventsArea .wrapper{display:block;}
}
#eventsArea .units{display:flex; justify-content:center; gap:30px; margin-top:30px;}
#eventsArea .units .eventUnit{flex-basis:360px; border-left:4px solid #18943B; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); padding:0;}
#eventsArea h3.day{background:#18943B; color:#fff; padding:10px; display:block; margin:0; }
#eventsArea .units .eventUnit dt.time{text-align:left; margin:10px 0 0 2em; color:#18943B; letter-spacing:0.1em; font-size:1rem; font-weight:500; position:relative;}
#eventsArea .units .eventUnit dt.time:before{content: "─"; position:absolute; left:-1.5em; top:0px; letter-spacing:0; font-size:1.5rem; }
#eventsArea .time span{font-size:0.8rem; letter-spacing:0.1em; font-weight:300;}
#eventsArea .units .eventUnit dd{padding:10px 14px 0; margin:0;}
#eventsArea .units .eventUnit dd.image{padding-bottom:0;}
#eventsArea .units .eventUnit dd.image img{height:150px; object-fit:cover;}
#eventsArea .units .eventUnit dd .message{margin:0; font-weight:500;}
#eventsArea .units .eventUnit dd .txt{display:none;}
.wrapper:after{display:none;}

#eventsArea .unit#library{display:block;}
#eventsArea .unit#library h3.day{letter-spacing:0.1em; margin-bottom:0;}
#eventsArea .unit#library a{background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); display:block; padding:10px;}
#eventsArea .unit#library .image{ display:flex; gap:10px; margin:10px auto;}
#eventsArea .unit#library .image img{height:150px; width:50%; object-fit:cover; display:inline-block;}
#eventsArea .unit#library .time{color:#18943B; letter-spacing:0.1em; font-size:1rem; font-weight:500; padding:20px auto 0;}

#eventsArea ul li{position:relative;}
#eventsArea ul li span{position:absolute;top:10px;left:10px;background:#fff;font-size:12px;width:100px;}
#eventsArea ul li:hover span{background:#fff;}

/*-----------イベント未使用　ここまで----------*/



/*-----------ワークショップキット----------*/
#workshopArea .grid{display:grid; grid-template-columns:250px auto; grid-gap:30px; justify-content:center; align-items: center; margin:-80px 5% 0;}
#workshopArea .grid .txt{text-align:left;}
#workshopArea  .flexList{margin:30px auto 50px;}
#workshopArea  .flexList li{ flex-basis:250px;}	
#workshopArea  .flexList li .image img{clip-path: polygon(50% 0%, 100% 28%, 100% 100%, 0 100%, 0% 28%); margin-bottom:10px;}
#workshopArea  .flexList li .tit+.txt{margin-top:-6px;}
@media(max-width : 960px ){
#workshopArea .grid{margin-top:-30px;}
#workshopArea .flexList{gap:0 2%;}
#workshopArea .flexList li{ flex-basis:31%;}
}

/*-----------サービス----------*/
#serviceArea{padding:50px 0; background:transparent; background-image: radial-gradient(rgba(255, 255, 255, 0.3) 20%, transparent 0), radial-gradient(rgba(255, 255, 255, 0.5) 10%, transparent 0); background-position: 5px 5px, 30px 30px; background-size: 50px 50px; }
#serviceArea .caution{background:#FAEC9C;}
#serviceArea .flexList{margin:50px auto;}
#serviceArea .flexList>li{background:rgba(255,255,255,0.9); /*flex-basis:350px;*/ padding:20px;}
#serviceArea .flexList>li .illust{margin-top:-40px;}
#serviceArea .flexList#special>li{border:10px solid #FAEC9C;}
#serviceArea .flexList#special>li:first-child{ flex-basis:29%;}
#serviceArea .flexList#special>li:nth-child(2){ flex-basis:29%;}
#serviceArea .flexList#special>li:nth-child(3){ flex-basis:29%;}
#serviceArea .flexList#special>li:nth-child(4){ flex-basis:350px;}
#serviceArea .flexList#special>li:nth-child(5){ flex-basis:350px;}
#serviceArea .flexList#special>li:nth-child(6){ flex-basis:350px;}
#serviceArea .flexList#special>li:nth-child(7){ flex-basis:350px;}
@media(max-width : 960px ){
#serviceArea .flexList#special>li:first-child{ flex-basis:350px;}
#serviceArea .flexList#special>li:nth-child(2){ flex-basis:350px;}
#serviceArea .flexList#special>li:nth-child(3){ flex-basis:350px;}
}

/*
#serviceArea .flexList#special>li:last-child{ flex-basis:max-content;}
*/
#serviceArea table.outline{margin-bottom:20px;}
#serviceArea table.outline tr th, #serviceArea table.outline tr td{padding:0.1em 5px 0.1em 1em;}

#serviceArea .flexList#special li .txt{text-align:left;}
#serviceArea .flexList li .btn{margin-bottom:0;}
#serviceArea:after{position:absolute; content:""; width:100%; height:100px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); z-index:100; bottom:0; left:0;}
.btn a span.notice{color:#fff;}
@media(max-width : 960px ){
#serviceArea .flexList li{flex-basis:90%;}
#serviceArea .flexList#usual{margin:0 2%; gap:20px}
#serviceArea .flexList#usual li {flex-basis:47%;}

}