@charset "utf-8";


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

"/familyland/css/familyland.css

Update:  2026-05-12 AM 10:22

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



/* ----------------------------------------------------
Media query All
---------------------------------------------------- */
/* common */
body { overflow: hidden; height: 100%;}
html, body { overflow-x: hidden;}

.nsfont{ font-family: 'Noto Sans JP', sans-serif;font-weight: 300;}
#familyland h1,#familyland h2,#familyland h3,#familyland p,#familyland .btn a{
  font-family:'Noto Sans JP' ,"メイリオ", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 300;
}

#familyland .column{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


/* メインスライド */
#main-top{
  position: relative;
  margin: 0 auto 0;
}
#main-top .slide{
  z-index: 100;
  position: relative;
  overflow: hidden;
}
#main-top .slide .set{
  height: 750px;
  position: relative;
}
#main-top .slide .set img:not(.no-expansion){
  height: 100vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
@-moz-document url-prefix() {
  #main-top .slide{
    /*firefox ぶれ対策*/
    margin: -10px 0 0 0;
    z-index: 0;
  }
}
.add-animation img{
  animation: zoomUp 10s linear 0s normal both;
}
#main-top .slide .set a:hover{
  opacity: 1.0 !important;
}

#main-top{
  margin: 0 auto 78px auto;
}
#main-top .logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 99999;
}
#main-top .logo h1{
  width: 400px;
  height: 332px;
}

/* introduction */
#introduction{
  text-align: center;
  margin-bottom: 55px;
  padding: 0 10px;
}
#introduction h2{
  font-size:clamp(2.0rem, 2.16vw, 2.6rem);
  margin-bottom: 25px;
}
#introduction p{
  font-size: 1.6rem;
  line-height: 2.0;
}

/* land-map */
#land-map{
  text-align: center;
  margin-bottom: 50px;
}
/* information */
#familyland .information{
  width: 96%;
  max-width: 900px;
  margin: 0 auto 80px;
  padding: 35px 50px 15px;
  border-radius: 15px;
  background:#ebebeb;
  text-align: left;
}
#familyland .information h3{
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 15px;
}
#familyland .information p{
  margin-bottom: 15px;
}
#familyland .information .kome{
  font-size: 1.4rem;
}
#familyland .bus-btn a{
  position: relative;
  display: block;
  width: 90%;
  max-width: 350px;
  margin: 0 0 15px 0;
  padding: 12px 0 12px 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  text-align: center;
  color: #000000;
  text-decoration: none;
}
#familyland .bus-btn a::after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #666666;
  border-right: solid 2px #666666;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -4px;
}
/* plan-cuisine */
#plan-cuisine{
	max-width: 1600px;
	margin: 0 auto 80px;
	padding: 0 10px;
}
#plan-cuisine h2{
	position: relative;
}
#plan-cuisine h2::before {
  position: absolute;content: "";
  top: -20px;left: 0; right: 0;
  margin: 0 auto;
  background:url("/asset/img/icon_pickup.png") no-repeat;
  width: 78px;height: 24px;
  background-size: 78px 24px;
}
#plan-cuisine .wrapper{
	justify-content: center;
}
#plan-cuisine .set{
	width: 31.6%;
}
#plan-cuisine .set + .set{
	margin-left: 1.7%;
}
#plan-cuisine .set img{
	margin-bottom: 18px;
}
#plan-cuisine .set a{
	font-weight: bold;
	text-decoration: none;
}
/* All END */

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



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

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

.folder-resort-stay p{
  line-height: 1.7;
}
#main-top .slide .set{
    height: 450px;
}
#main-top .logo h1{
  width: 180px;
  height:150px;
}
/* introduction */
#introduction{
  text-align: center;
  margin-bottom: 35px;
}
#introduction h2{
  font-size:clamp(2.0rem, 2.16vw, 2.6rem);
  margin-bottom: 25px;
}
#introduction p{
  font-size: 1.6rem;
  line-height: 2.0;
  text-align: left;
}
#familyland .information{
  padding: 12px 12px 12px;
  border-radius: 10px;
  background:#ebebeb;
  text-align: left;
}
/* resort-info */
#resort-info{
  margin: 0 auto 35px;
  position: relative;
}
#resort-info .inr{
  max-width: 680px;
  margin: 8px 8px 8px;
  padding: 12px 20px 12px;
  background-color:rgba(29,164,221,0.75);
  position: relative;
  border-radius: 8px;
}
#resort-info p{
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 7px;
}
#resort-info .kome{
  font-size: 1.4rem;
  color: #FFFFFF;
  margin: 0 0 12px 0 !important;
}
#resort-info .btn-arrow a{
  display: block;
  position: relative;
  width: 90%;
  max-width: 380px;
  height: 50px;
  line-height: 50px;
  background-color: #FFFFFF;
  border-radius: 25px;
  text-align: center;
  text-decoration: none;
  color: #000000;
  margin: 0 auto 0;
}
#resort-info .text{
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.8;
}
/* land-map */
#land-map{
  text-align: center;
  margin-bottom: 50px;
}


/* plan-cuisine */
#plan-cuisine{
	margin: 0 auto 50px;
	padding: 0 10px;
}
#plan-cuisine h2::before {
  position: absolute;content: "";
  top: -35px;left: 0; right: 0;
  margin: 0 auto;
  background:url("/asset/img/icon_pickup.png") no-repeat;
  width: 78px;height: 24px;
  background-size: 78px 24px;
}
#plan-cuisine .set{
	width: 100%;
	margin: 0 0  14px 0;
	padding: 12px 0 0 0;
	border-top:1px dotted #d0d0d0 ;
}
#plan-cuisine .set a{
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#plan-cuisine .set a > div{
	width: 50%;
}
#plan-cuisine .set p{
	width: 47%;
	font-size: 1.4rem;
	line-height: 1.4;
}
#plan-cuisine .set img{
	margin-bottom: 0;
}

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

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

/* resort-info */
#resort-info{  
  max-width: 1920px;
  margin: 0 auto 70px;
  position: relative;
}
#resort-info .inr{
  max-width: 680px;
  padding: 25px 55px 30px;
  background-color:rgba(29,164,221,0.75);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(-40%) translateX(-50%);
  text-align: center;
  border-radius: 8px;
}
#resort-info p{
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 7px;
}
#resort-info .kome{
  font-size: 1.4rem;
  color: #FFFFFF;
  margin: 0 0 12px 0 !important;
}
#resort-info .btn-arrow a{
  display: block;
  position: relative;
  width: 90%;
  max-width: 380px;
  height: 50px;
  line-height: 50px;
  background-color: #FFFFFF;
  border-radius: 25px;
  text-align: center;
  text-decoration: none;
  color: #000000;
  margin: 0 auto 0;
}
#resort-info .text{
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.8;
}

/* 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) 1600px～ 
---------------------------------------------------- */
@media screen and (min-width: 1600px) {
#pool img{
  width: 100%;
}

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

/* main-top */
.fallback #main-top {
	background: url("/familyland/img/img_main_pc.jpg") no-repeat center center;
  background-size: cover;
}
.webp #main-top {
	background: url("/familyland/img/img_main_pc.webp") no-repeat center center;
  background-size: cover;
}
.avif #main-top {
	background: url("/familyland/img/img_main_pc.avif") no-repeat center center;
  background-size: cover;
}


/* 1921px - END*/
}