@charset "utf-8";


/* CMS Template(CSS編集はCMS管理画面から)

/flower-guide/css/flower-guide.css

Update:  2025-10-11 AM 11:35

====================*/



/* ----------------------------------------------------
Media query All
---------------------------------------------------- */
/* common */
body { overflow: hidden; height: 100%;}
html, body { overflow-x: hidden;}
#nav-sub,.navi-local-footer{
	display: none !important;
}

.wrap{padding:0 0 0 0;background: none !important;}
.inner02{
  width: 100%;
  background: #FFFFFF;
}
.attraction-details h2{
  margin: 0;
  padding: 0;
  border: none;
}
.attraction-details .inner p{ margin-bottom: 0;}
#flower{
  font-family: 游明朝 Medium,"Yu Mincho Medium",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
@media all and (-ms-high-contrast:none){
#flower{
  font-family: "HG明朝E","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}
}
#flower img{
  width: auto;
  max-width: 100%;
}
#flower p{ font-size: 1.8rem;}
#flower h3{ font-size: 4.4rem; }
.mainTit{
  background: rgba(255,255,255,0.4);
  padding: 20px 30px 35px;
}
.mainTit h2{
  line-height: 1.0;
  margin-bottom: 20px;
}
.mainTit p{
  font-size: 1.6rem !important;
  text-shadow: 2px  2px 3px #ffffff,-2px  2px 3px #ffffff,2px -2px 3px #ffffff,-2px -2px 3px #ffffff,2px  0px 3px #ffffff,0px  2px 3px #ffffff,-2px  0px 3px #ffffff,0px -2px 3px #ffffff;
}
.best{
  text-align: center;
  max-width: 357px;
  width: 100%;
  margin: 0 auto 15px !important;
  padding: 10px 0;
  color: #fff;font-size: 2.4rem;
  border-radius: 30px;
  line-height: 1 !important;
  font-weight: bold;
  font-size: 1.6rem !important;
}
.mainvis{  
  height: 900px;
	margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
	display: flex;
  align-items: center;
}
.mainvis + p{
  text-align: center;
  margin: 45px auto 0;
  padding: 0 0 50px;
  line-height: 2.0;
}
.fallback .mainvis{
	background: url("/flower-guide/img/bg_colchicum.jpg") left center / cover no-repeat;
  /* background: url("/flower-guide/img/img_main_autumn.jpg") left center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_summer.jpg") center center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_summer00.jpg") center center / cover no-repeat; */
	/* background: url("/flower-guide/img/img_main_autumn-yuri.jpg") center center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_autumn03.jpg") left center / cover no-repeat; */
	/* background-attachment: fixed; */
}
.webp .mainvis {
	background: url("/flower-guide/img/bg_colchicum.webp") left center / cover no-repeat;
  /* background: url("/flower-guide/img/img_main_autumn.webp") left center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_summer.webp") center center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_summer00.webp") center center / cover no-repeat; */
	/* background: url("/flower-guide/img/img_main_autumn-yuri.webp") center center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_autumn03.webp") left center / cover no-repeat; */
	/* background-attachment: fixed; */
}
.avif .mainvis {
	background: url("/flower-guide/img/bg_colchicum.avif") left center / cover no-repeat;
  /* background: url("/flower-guide/img/img_main_autumn.avif") left center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_summer.avif") center center / cover no-repeat; */
 /*  background: url("/flower-guide/img/img_main_summer00.avif") center center / cover no-repeat; */
	/* background: url("/flower-guide/img/img_main_autumn-yuri.avif") center center / cover no-repeat; */
  /* background: url("/flower-guide/img/img_main_autumn03.avif") left center / cover no-repeat; */
	/* background-attachment: fixed; */
}


.delighter{
  opacity: 0;
  transition: all .75s ease-out;
  transform: translateY(-20px);
}
.delighter.started{
  opacity: 1;
  transform: translateY(0);
}
.mainvis .mainTit{
  max-width: 556px;
  position: relative;
  margin: 0 auto 0;
}
/* .mainvis .mainTit::before{
  content: "";
  position: absolute;
  display: block;
  background: url("/flower-guide/img/bg_main_summer.png") left top / cover no-repeat;
  width: 216px; height: 211px;
  top: -65px; right: -25px;
} */
.tsutsuji{
  padding: 100px 0 0 0;
  position: relative;
  max-width: 1070px;
  margin: 0 auto 40px;
}
.tsutsuji .tit{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
}
.tsutsuji h3{
  color: #e01f6c;
  margin-right: 50px;
  display: inline-block;
}
.tsutsuji .best{
  background: #e01f6c;
  margin: 0 !important;
  font-size: 1.6rem;
}
.tsutsuji .slide{
  margin-top: 30px;
  max-width: 1000px;
}
/* .yuri::before{
  content: "";
  display: block;
  position: absolute;
  background: url("/flower-guide/img/bg_yuri02.png") 0 0 / cover no-repeat;
  width: 19%; height: 0;
  padding-top: 34%;
  right: 15px; bottom: 0;
  z-index: 9999;
} */
.yuri{
  padding: 100px 0 0 200px;
  /* background: url("/flower-guide/img/bg_kouyou.jpg") left 100px no-repeat; */
  background: url("/flower-guide/img/bg_yuri.png") left 100px no-repeat;
  /* background: url("/flower-guide/img/gb_kisuge.png") left 100px no-repeat; */
  position: relative;
  max-width: 1070px;
  margin: 0 auto 80px;
}
.yuri .tit{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
}
.yuri h3{
  color: #ed6d00;
  margin-right: 50px;
  display: inline-block;
}
.yuri .best{
  background: #ed6d00;
  margin: 0 !important;
  font-size: 1.6rem;
}
.yuri .slide{
  margin-top: 30px;
  max-width: 1000px;
}
.clover{
  background: url("/flower-guide/img/img_clover.jpg") center top no-repeat;
  margin: 0 calc(50% - 50vw);
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.clover .best{ background: #27ad3a; margin-bottom: 15px;}

.yuri2{
  background: url("/flower-guide/img/bg_yuri.jpg") center center / cover no-repeat;
  margin: 100px calc(50% - 50vw) 0;
  padding: 0 calc(50vw - 50%);
  height: 850px;
  display: flex;
  align-items: center;
  background-attachment: fixed;
}
.yuri2 > div{
  max-width: 800px;
  width: 100%;
  margin: 0 auto 0;
}
.yuri2 h3{ color: #ff9c00;}
.yuri2 .best{ background: #ff9c00; margin: 0 0 15px !important;}
.yuri2 .slide{ margin-top: 15px;}

.cosmos{
  margin: 0 calc(50% - 50vw) 0;
  padding: 0 calc(50vw - 50%);
  height: 700px;
  display: flex;
  justify-content: flex-end;
  align-items: center;  
}
.fallback .cosmos {
	background: url("/flower-guide/img/bg_cosmos.jpg?20230824") center center / cover no-repeat;
	background-attachment: fixed;
}
.webp .cosmos {
	background: url("/flower-guide/img/bg_cosmos.webp?20230824") center center / cover no-repeat;
	background-attachment: fixed;
}
.avif .cosmos {
	background: url("/flower-guide/img/bg_cosmos.avif?20230824") center center / cover no-repeat;
	background-attachment: fixed;
}

.cosmos > div{
  max-width: 551px;
  width: 100%;
  margin-right: 15px;
}
.cosmos h3{ color: #ed0064;}
.cosmos .best{ background: #ed0064; margin: 0 0 15px !important;}
.cosmos .slide{ margin-top: 15px;}

.colchicum{  
  margin: 0 calc(50% - 50vw);
  padding: 200px calc(50vw - 50%) 0;
  height: 1270px;  
}
.fallback .colchicum {
	background: url("/flower-guide/img/bg_colchicum.jpg") center center / cover no-repeat;
	background-attachment: fixed;
}
.webp .colchicum {
	background: url("/flower-guide/img/bg_colchicum.webp") center center / cover no-repeat;
	background-attachment: fixed;
}
.avif .colchicum {
	background: url("/flower-guide/img/bg_colchicum.avif") center center / cover no-repeat;
	background-attachment: fixed;
}

.colchicum .inr{
  max-width: 622px;
  margin: 0 auto 0;
  padding: 40px 0 50px;
  text-align: center !important;
  background: rgba(255,255,255,0.8);
}
.colchicum h3{ color: #b31d82;}
.colchicum .best{ background: #b31d82;font-size: 1.6rem;}

.acacia{
  margin: 0 calc(50% - 50vw);
  padding: 80px calc(50vw - 50%) 0;
  display: flex;
  justify-content: flex-end;  
  height: 900px;
}
.fallback .acacia {
	background: url("/flower-guide/img/bg_acacia2023.jpg") center center / cover no-repeat;
	background-attachment: fixed;
}
.webp .acacia {
	background: url("/flower-guide/img/bg_acacia2023.webp") center center / cover no-repeat;
	background-attachment: fixed;
}
.avif .acacia {
	background: url("/flower-guide/img/bg_acacia2023.avif") center center / cover no-repeat;
	background-attachment: fixed;
}
.acacia > div{max-width: 757px; margin-right: 15px; width: 100%;}
.acacia h3{
  /*color: #cc9000;*/
  color: #FFFFFF;
  /* margin-right: 78px; */
  padding-right: 80px;
  text-align: right;
}
.acacia .best{
  background: #CCBB00;
  margin: 0  80px 15px auto !important;
  font-size: 1.6rem;
}
.acacia .txt{
  color: #FFFFFF;
  text-shadow:
    #705f19 2px 0px,  #705f19 -2px 0px,
    #705f19 0px -2px, #705f19 0px 2px,
    #705f19 2px 2px , #705f19 -2px 2px,
    #705f19 2px -2px, #705f19 -2px -2px,
    #705f19 1px 2px,  #705f19 -1px 2px,
    #705f19 1px -2px, #705f19 -1px -2px,
    #705f19 2px 1px,  #705f19 -2px 1px,
    #705f19 2px -1px, #705f19 -2px -1px;
}
.acacia .txt.sub-text{
	margin-top: 8px;
	font-size: 1.3rem !important;
	line-height: 1.4 !important;
}
.acacia ul{
  display: flex;
  justify-content: space-between;
}
.acacia ul li img{ margin-bottom: 10px;}
.acacia ul li:nth-of-type(1){
  text-align: right;
  width: 40%;
  margin-top: 50px;
}
.acacia ul li:nth-of-type(2){ width: 57%;}
.acacia .btn a{
  display: inline-block;
  margin-top: 10px;
  padding: 15px 25px;
  color: #fff;
  font-size: 2.2rem;
  background: #ccbb00;
  position: relative;
  z-index: 1;
  line-height: 1;
  text-decoration: none;
}
.other{
	max-width: 1200px;
	margin: 0 auto 0;
  padding: 100px 0 100px 50px;
}
.other li{ position: relative; }
.other li:nth-of-type(1)::before{
  content: "";
  position: absolute;
  display: block;
  bottom: 0; right: -230px;
  width: 52.6%; height: 0;
  padding-top: 40.1864%;
  background: url("/flower-guide/img/bg_map.png") 0 0 / cover no-repeat;
  z-index:-1;
}
@media only screen and (max-width: 1200px) {
  .other li:nth-of-type(1)::before{ background: none;}
}
.other li+li{ margin-top: 30px;}


/* All END */

/* ----------------------------------------------------
- 520px (Smartphone layout Only)
---------------------------------------------------- */
@media (max-width: 520px) {



/* - 520px (Smartphone layout Only) END */
}

/* ----------------------------------------------------
- 960px (Smartphone Tablet layout Only)
---------------------------------------------------- */
@media (max-width: 960px) {

.yuri{
    background: none;
    padding: 100px 15px 0;
  }
  .yuri::before,.other li:nth-of-type(1)::before{ background: none;}
  .yuri .slide{ margin: 30px auto 0;}
  .other{padding: 100px 15px;}
	#flower p{ font-size: 1.6rem;}
  #flower h3{ font-size: 3rem; text-align: center; margin-bottom: 10px;}
  .mainTit{ padding: 20px;  }
  .best{ font-size: 1.6rem; max-width: 400px; text-align: center !important;}

  .mainvis{    
    height: 500px;
    justify-content: center;     
  }
	.fallback .mainvis {
    background: url("/flower-guide/img/bg_colchicum.jpg") left center / cover no-repeat;
    /* background: url("/flower-guide/img/img_main_summer00.jpg") right center / cover no-repeat; */
		/* background: url("/flower-guide/img/img_main_autumn-yuri.jpg") right center / cover no-repeat; */
		/* background: url("/flower-guide/img/img_main_autumn03.jpg") right center / cover no-repeat; */
		background-attachment:inherit; 
	}
	.webp .mainvis {
    background: url("/flower-guide/img/bg_colchicum.webp") left center / cover no-repeat;
		/* background: url("/flower-guide/img/img_main_summer00.webp") right center / cover no-repeat; */
		/* background: url("/flower-guide/img/img_main_autumn-yuri.webp") right center / cover no-repeat; */
    /* background: url("/flower-guide/img/img_main_autumn03.webp") right center / cover no-repeat; */
		background-attachment:inherit; 
	}
	.avif .mainvis {
    background: url("/flower-guide/img/bg_colchicum.avif") left center / cover no-repeat;
		/* background: url("/flower-guide/img/img_main_summer00.avif") right center / cover no-repeat; */
		/* background: url("/flower-guide/img/img_main_autumn-yuri.avif") right center / cover no-repeat; */
    /* background: url("/flower-guide/img/img_main_autumn03.avif") right center / cover no-repeat; */
		background-attachment:inherit; 
	}
  .mainvis .mainTit{
    margin: 0 15px;
    padding-top: 40px;
    max-width: 300px;
  }
  .mainvis .mainTit::before{ width: 140px; height: 137px;}
  
  .yuri{
    padding: 50px 15px 0;
    margin-bottom: 50px;
  }
  .yuri .tit{ justify-content: center;}
  .tsutsuji{
  padding: 50px 15px 0;
  margin-bottom: 0px;
  position: relative;
}
.tsutsuji .tit{
  justify-content: center;
}

  .yuri h3{  margin-right: 0;}
  .clover{
    background-size: cover;
    height: auto;
    padding: 50px 15px;
  }
  .yuri2{
    margin-top: 30px;
    height: auto;
    justify-content: center;
    padding: 50px 15px;
    background-attachment:inherit;  
    
  }
  .yuri2 > div{ margin-left: 0;}
  .yuri2 .best{margin: 0 auto 15px !important;} 
  
  .cosmos{
    margin-top: 30px;
    height: auto;
    justify-content: center;
    padding: 50px 15px;
    background-attachment:inherit;  
    
  }
  .cosmos > div{ margin-right: 0;}
  .cosmos .best{margin: 0 auto 15px !important;}
  
  .colchicum{
    height: auto;
    margin: 0;
    padding: 60px 15px 220px;
    background-attachment:scroll;
  }
  .acacia{
    height: auto;
    padding: 80px 15px;
    position: relative;
    background-attachment:inherit;
  }
  .acacia::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.5);
    top: 0; left: 0;
  }
  .acacia > div{ position: relative;}
  .acacia > div,.acacia h3{ margin-right: 0;}
  .acacia .btn a{ font-size: 1.6rem;}
  .other{ padding: 50px 15px 80px;}

/* - 960px (Smartphone Tablet layout Only) END*/
}

/* ----------------------------------------------------
961px- (Pc layout Only)
---------------------------------------------------- */
@media (min-width: 961px) {



/* 961px - END*/
}
/* ----------------------------------------------------
961px-1200px
---------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1200px) {



/* 961px-1200px END*/
}
/* ----------------------------------------------------
961px-1400px
---------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1400px) {


  /* 961px-1400px END*/
  }

/* ----------------------------------------------------
- 1920px (Pc layout Only)
---------------------------------------------------- */
@media (max-width: 1920px) {



/* - 1920px - END*/
}
/* ----------------------------------------------------
メディアクエリ設定 (PC) 1800px～ 
---------------------------------------------------- */
@media screen and (min-width: 1800px) {

  
  /* (PC) 1800px～  END*/
} 
/* ----------------------------------------------------
1921px- (Pc layout Only Wide)
---------------------------------------------------- */
@media (min-width: 1921px) {


/* 1921px - END*/
}