@charset "UTF-8";
/* CSS Document */

body {
  background: #fff;
}
#contents {
  width: 100%;
padding: 0;
overflow: hidden;	
}
#main_contents {
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
 .media_pc {
    display: block !important;
  }
 .media_sp {
    display: none !important;
  }
.fadeIn {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

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

@media screen and (max-width:768px){
.media_pc {
    display: none !important;
  }
 .media_sp {
    display: block !important;
  }
}

/*------------------------------------------------
main
------------------------------------------------*/
.sun {
  width: 10%;
  right: 5%;
  left: 85%;
  position: absolute;
  top: 20px;
}
.baloon {
  width: 6%;
  left: 4%;
  right: 90%;
  position: absolute;
  top: 40%;
  height: 13%;
  bottom: 47%;
animation: floating-y 1.8s ease-in-out infinite alternate-reverse;	
}
.page_nav_wrap {
  position: relative;
padding-top: 40px;	
}
.page_nav {
  margin-top: -80px;
}
.nav_list {
  display: flex;
  justify-content: center;
  position: relative;
z-index: 1;	
}
.nav_li:nth-child(2) {
  margin: 0 20px;
}
.nav_li a:hover{
	opacity: 0.7;
	transition: 0.5s;
}
.sec_main {
  position: relative;
  height: calc(100vh - 100px);
  background-image: url("../img/main_img.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}
.sec_main.type02{
  background-image: url("../img/main_img02.jpg");
}
.main_title {
width: 38%;
  height: 30%;
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  text-align: center;
}
.deco_wrap .cloud {
position: absolute;
  left: 0;
  right: 0;
  bottom: 170px;
  margin: auto;
  z-index: 0;
}
.deco_wrap .hill {
  position: relative;
  z-index: 0;
}
.sec_main_inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.hill_wrap {
position: absolute;
  bottom: -5%;
}
.deco_wrap {
  position: absolute;
top: calc(100% - 35%);
}
.wave {
  position: absolute;
  top: 2%;
  right: 0;
  left: 0;
}

@media screen and (min-width:2000px){
.sec_main {
  height: calc(100VH + 360px);
}
}
@media screen and (min-width:1800px){
.sec_main {
  height: calc(100VH + 340px);
}
}

@media screen and (min-width:1700px){
.sec_main {
  height: calc(100VH + 320px);
}
}

@media screen and (min-width:1600px){
.sec_main {
  height: calc(100VH + 300px);
}
}

@media screen and (max-width:768px){
.sec_main {
  height: calc(64vh - 80px);
	}
.main_title {
  width: 56%;
	}
.page_nav_wrap {
  padding: 40px 24px 0 24px;
}
.page_nav {
  margin-top: -40px;
}
.wave {
  top: 10px
	}
}

@media screen and (max-width:599px){
  .main_title {
    width: 60%;
 bottom: 15px; 
  }
.nav_li:nth-child(2) {
  margin: 0 8px;
}	
}


/*------------------------------------------------
sec01
------------------------------------------------*/
#sec01 .title_sec_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#sec01 .lead_sec01 {
width: 60%;
  font-size: 24px;
  line-height: 2;
  text-align: center;
  margin: 0 auto 60px auto;
font-family: "Kiwi Maru", serif;	
}
#sec01 .lead_txt_wrap .txt {
  font-size: 20px;
  line-height: 2;
  color: #626262;	
margin: 0 auto 0 0;
font-family: "Kiwi Maru", serif;
overflow: hidden;
white-space: nowrap;
width: 0;
}

.txt_cloud {
  opacity: 0;
}
.txt_cloud.show{
  animation:
fadeUp 1.5s 17600ms forwards;
}
.txt_cloud.show .title_lead{
	opacity: 0;
}
.txt_cloud.show .title_lead{
  animation:
fadeUp 1.5s 21000ms forwards;
}

.lead_content_wrap.fadeIn .next{
	opacity: 0;
}
.lead_content_wrap.fadeIn.scrollin .next{
 animation: showup 1.5s 21000ms forwards;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
	 transform : translate(0, 50px); 
  }
  100% {
    opacity: 1;
	transform: translate(0, 0);  
  }
}






@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }	
  100% {
    opacity: 0;
  }
}
#sec01 .lead_txt_wrap .txt.show{
	position: relative;
}
#sec01 .title_lead {
  max-width: 800px;
  width: 60%;
  margin-bottom: 10px;
}
#sec01 {
  position: relative;
padding-top: 40px;	
}
#sec01 .inner_sec{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
#sec01 .lead_txt_wrap {
max-width: 680px;	
width: 60%;	
  margin: 0 auto;
  position: relative;	
}
#sec01 .lead_txt_wrap.mb40 {
  margin-bottom: 40px;
}
#sec01 .cloud.cloud01 {
  width: 16%;
  height: 11%;
position: absolute;
  left: 1%;
  top: 49%;
  bottom: 70%;
  margin: auto;
}
#sec01 .cloud.cloud02 {
position: absolute;
  right: 1%;
  bottom: -40px;
  width: 16%;
}
#sec01 .cloud{
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-16px);
  }
  100% {
   transform: translateY(16px);
  } 
}


.flowing {
white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim 3s forwards linear;
}

.flowing:nth-child(2) {
	animation-delay: 2.5s;
}

.flowing:nth-child(3) {
	animation-delay: 5s;
}

@keyframes flowing-anim {
 0%{
	 width: 0%;
   }
100%{
	 width: 100%;
   }
}



@media screen and (max-width:768px){
#sec01 {
  padding: 60px 20px 40px 20px;
}
#sec01 .lead_sec01 {
  width: 100%;
  font-size: 20px;
  line-height: 1.8;
  margin: 16px auto 48px auto;
	}
#sec01 .lead_txt_wrap .txt {
  width: calc(100% - 40px);
  font-size: 18px;
	}
.deco_title.tree01 {
  display: none;
}
.deco_title.tree02 {
  display: none;
}
#sec01 .lead_txt_wrap {
  width: calc(100% - 40px);
	}
#sec01 .cloud.cloud01 {
  width: 16%;
  height: 11%;
  left: 1%;
  top: 2%;
  bottom: 87%;
	}
}


/*------------------------------------------------
sec02
------------------------------------------------*/
#sec02 {
  margin-top: 320px;
background: #eef4fd;	
}
#sec02 .title_sec_wrap {
  text-align: center;
  position: relative;
}
#sec02 .deco_cloud {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: auto;
}
#sec02 .deco_title {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
z-index: 1;	
}
#sec02 .title_sec {
  position: relative;
  z-index: 2;
margin-bottom: 64px;
display: flex;
  justify-content: center;	
}

/*#sec02 .offsetElement {
position: absolute;
width: 1124px;
  height: 1615px;
  background-image: url("../img/track.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  offset-path: path("M145.015,306.579s9.024,103.578,176.946,103.578h180.477s156.937-7.847,189.109,98.87-17.263,183.616-72.976,213.434-194.601,3.923-235.405,123.98,9.416,237.759,188.324,238.544,242.046,0,242.046,0c0,0,112.63,1.569,149.511,69.444");
  offset-rotate: auto;
  animation: move 10s linear infinite;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}
*/

#sec02 .num_wrap {
  display: flex;
  align-items: center;
}
#sec02 .step_li:nth-child(2n) .num_wrap {
  flex-direction: row-reverse;
}
#sec02 .road_map {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  position: relative;	
}
#sec02 .offsetElementWrapper {
  position: relative;
}
#sec02 .num_wrap{
  position: relative;
  z-index: 1;	
}
#sec02 .step_li:nth-child(2){
margin-top: -50px;
padding-right: 100px;	
}
#sec02 .step_li:nth-child(1) .offsetElementWrapper {
  margin-top: -40px;
}
#sec02 .step_img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;	
}
#sec02 .offsetElementWrapper {
  position: absolute;
  top: -50px;
  right: 0;
  bottom: 0;
  left: 0;
}
#sec02 .step_li {
  font-size: clamp(16px, 1.63vw, 18px);
  line-height: 1.8;
  color: #49628b;
  position: absolute;
font-family: "Kiwi Maru", serif;	
}
#sec02 .step_li:nth-child(1) {
  top: 3%;
  left: 29%;
  width: 70%;
  height: 15%;
  bottom: 82%;
}
#sec02 .step_li:nth-child(2) {
width: 40%;
  right: 46%;
  left: 20%;
  top: 42%;
  height: 8%;
  bottom: 51%;
}
#sec02 .step_li:nth-child(3) {
  top: 62%;
  left: 48%;
  width: 19%;
  right: 33%;
  height: 7%;
  bottom: 31%;
}
#sec02 .step_li:nth-child(4) {
  bottom: 5%;
  right: 27%;
  width: 32%;
  height: 7%;
  top: 88%;
  left: 41%;
}
#sec02 .click{
	display: none;
}
@media screen and (max-width:768px){
#sec02 .title_sec {
  margin-bottom: 20px;
	}
#sec02 .detail.media_sp {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  font-family: "Kiwi Maru", serif;	
  color: #49628b;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}	
#sec02 {
  margin-top: 160px;
padding-bottom: 40px;	
	}
#sec02 .road_map {
  padding: 0 8px;
}
.pop_title {
	
  font-size: 21px;
  font-weight: 600;
}
/*#sec02 .click{
	display: block;
}
#sec02 .click_01 {
  position: absolute;
  left: 20%;
  width: 8%;
  height: 8%;
  right: 71%;
  top: 13%;
  bottom: 79%;
}
#sec02 .click_02 {
  width: 8%;
  height: 8%;
  position: absolute;
  top: 45%;
  right: 21%;
  left: 71%;
  bottom: 47%;
}	
#sec02 .click_03 {
    width: 8%;
    height: 8%;
    position: absolute;
    top: 70%;
    left: 23%;
    right: 69%;
    bottom: 22%;
}
#sec02 .click_04 {
  width: 8%;
  height: 8%;
  position: absolute;
  right: 2%;
  bottom: 0;
  top: 94%;
  left: 90%;
}*/		
}

@media screen and (max-width:599px){
#sec02 .deco_title {
top: -50px;
    width: 100px;
    margin: 0 auto;
}

}

/*------------------------------------------------
sec03
------------------------------------------------*/
#sec03 .title_sec_wrap {
  background: #eef4fd;
  text-align: center;
}
#sec03 .deco_roof {
  margin-top: -5px;
}
#sec03 .title_sec {
  background: #fff;
margin-bottom: 32px;	
}
#sec03 .title_sec img {
  display: block;
  margin: 0 auto;
}
#sec03 .title_sec img.img_flag {
  margin: 20px auto 0 auto;
}

#sec03 .main_sec03 {
  text-align: center;
}
#sec03 .dialy_wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
#sec03 .slider_wrap {
  background-image: url("../img/bg_sec03.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 80px 20px 40px 20px;
  margin-bottom: 80px;	
}
#sec03 .slick-list {
  background: #fff;
}


/* スライダー全体の親ラッパー */
#sec03　.slider_wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
  overflow: visible !important; /* 親はvisibleでスライドのはみ出しを許容 */
}

/* slickの表示領域（スライドが動く範囲） */
#sec03　.slick-list {
  overflow: hidden !important; /* スライドのはみ出しをここで隠す */
}

/* スライド全体のトラック */
#sec03　.slick-track {
  display: flex !important; /* 横並び */
  align-items: center;      /* 高さ揃え */
}

/* 各スライド */
#sec03　.slick-slide {
  padding: 0 5px !important;     /* スライド間の隙間 */
  box-sizing: border-box !important;
  outline: none;                 /* フォーカス枠など防止 */
}
#sec03 .slide-item .img{
  padding: 0 10px;
}

/* スライド内の画像 */
#sec03　.slide-item img {
  width: 100% !important;        /* 横幅は親に合わせる */
  max-width: 440px !important;   /* 最大幅固定 */
  display: block;
  object-fit: cover;
  margin: 0 auto;
  transition: transform 0.5s ease;
  will-change: transform;
}

/* スマホ対応 */
@media (max-width: 767px) {
  #sec03　.slider_wrap {
    max-width: 100% !important;
    padding: 0 10px !important;
  }
  #sec03　.slick-slide {
    padding: 0 5px !important;
  }
  #sec03　.slide-item img {
    max-width: 100% !important;
  }
}

@media (max-width: 599px) {
#sec03 .deco_title {
  width: 120px;
  margin: 0 auto;
}
}


#sec03 .dialy {
  width: 100%;	
  font-family: "Kiwi Maru", serif;	
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  padding: 20px;
  background: #fff;	
}
#sec03 .dialy rt {
  margin-bottom: -6px;
}
#sec03 .page_left {
  width: 48%;
}
#sec03 .page_right {
  width: 48%;
}
#sec03 .deco_dialy01 {
  width: 15%;
}
#sec03 .deco_dialy02 {
  width: 15%;
}
#sec03 .dialy_content {
max-width: 1000px;
  width: 70%;
  margin: 0 auto;	
  position: relative;
}
#sec03 .dialy_content:before{
  content: "";	
  width: calc(50% + 20px);
  height: calc(100% + 40px);
  background: #d6f0fc;
  border-radius: 8px 16px 16px 8px;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;	
}
#sec03 .dialy_content:after{
  content: "";	
  width: calc(50% + 20px);
  height: calc(100% + 40px);
  background: #d6f0fc;
  border-radius: 16px 8px 8px 16px;
  position: absolute;
  top: -20px;
  bottom: -20px;
  right: -20px;
  z-index: -1;	
}
#sec03 .place {
  display: flex;
  font-size: 18px;
  align-items: baseline;	
  padding-bottom: 4px;
  border-bottom: solid 1px #ccc;
  margin-bottom: 24px;
}
#sec03 .place dt {
  margin-right: 20px;
}
#sec03 .weather {
  display: flex;
  align-items: center;
border: solid 4px #dae6f7;
  border-radius: 10px;
margin-bottom: 8px;	
}
#sec03 .weather_list {
  display: flex;
  padding: 0 16px;
}
#sec03 .weather_list li {
  display: flex;
  align-items: center;
  margin-right: 12px;
}
#sec03 .weather .title {
  background: #dae6f7;
  padding: 10px 8px;
}
#sec03 .date {
  font-size: 20px;
  margin-bottom: 16px;
}
#sec03 .detail {
  border: solid 4px #dae6f7;
  border-radius: 10px;
  padding: 10px 16px;
}
#sec03 .detail dt {
  font-size: 20px;
}
#sec03 .detail dd {
  font-size: 18px;
}
#sec03 .daialy_txt {
  font-size: 18px;
  line-height: 2.4;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 98.5%, #000 100%);
  background-repeat: repeat-y;
  background-size: 100% 2.4em;
margin-top: 8px;	
}	
#sec03 .dialy_img {
  width: 100%;
  border-radius: 10px;
}
.dialy_wrap .item {
    /* slickでslider化するとimgがblockになるのでtext-alignでは中央寄せできなくなる */
    text-align: center;
}

.dialy_wrap .item img {
    /* 100%にしてしまえば横幅目一杯に広がるので「左に寄る問題」自体が発生しなくなる */
    width: 100%;
}

.dialy_wrap .center {
    /* slickでslider化するとimgがblockになるのでmarginで中央寄せにしないといけない */
    margin: 0 auto;
}
.dialy_wrap #slider_dialy {
  margin: 0 auto;
}
.slide-arrow {
  bottom: 0;
  cursor: pointer;
  margin: auto;
  position: absolute;
  top: 0;
  width: 48px;
  z-index: 1;	
}
.prev-arrow {
  left: -40px;
}
.next-arrow {
  right: -40px;
}
.dialy_wrap .dialy_img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


@media screen and (max-width:768px){
#sec03 {
  padding-bottom: 60px;
}	
#sec03 .dialy_content {
  width: 85%;
margin-bottom: 16px;	
	}
#sec03 .deco_dialy01 {
  display: none;
}	
#sec03 .deco_dialy02 {
  display: none;
}	
#sec03 .dialy {
flex-wrap: wrap;
padding: 10px;	
	}
#sec03 .page_left {
  width: 100%;
  margin-bottom: 24px;	
}
#sec03 .page_right {
  width: 100%;
}
#sec03 .dialy_content::before {
content: "";
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: #d6f0fc;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;	
}
#sec03 .dialy_content::after {
  display: none;
	}
#sec03 .date {
  font-size: 18px;
  margin-bottom: 4px;
}
#sec03 .place {
  font-size: 17px;
  margin-bottom: 10px;
}
#sec03 .detail dt {
  font-size: 18px;
}	
#sec03 .detail dd {
  font-size: 16px;
}	
#sec03 .daialy_txt {
  font-size: 16px;
	}
#sec03 .slider_wrap {
  margin-bottom: 32px;
padding: 30px 20px 64px 20px;	
}
#sec03 .main_sec03 {
  padding: 0 20px;
}	
#sec03 .slick-list {
  background: #fff;
}
#sec03 .dialy_img {
  height: auto;
	}
#sec03 .weather .title img {
  width: 8px;
}
#sec03 .weather_list li img {
  max-width: 42px;
}	
}

@media screen and (max-width:599px){

}

/*-----------------------------------
slick
-----------------------------------*/
.slick-dots li button::before {
  font-size: 10px;
}
.slick-dots li {
  width: 10px;
  height: 10px;
	}
.slick-dots li.slick-active button::before {
  opacity: .75;
  color: #78d09c;
}	
@media screen and (max-width:599px){
.prev-arrow {
width: 40px;	
left: inherit;
    right: 50px;
    top: -56px;
    bottom: inherit;
}
.next-arrow {
 width: 40px;	
  right: 0;
  bottom: inherit;
  top: -56px;
}	
}

.typeWriter {
font-size: 20px;
  line-height: 2;
  color: #626262;
  margin: 0 auto 0 0;
  font-family: "Kiwi Maru", serif;
  text-align: left;
}
.typeWriter_02 {
font-size: 20px;
  line-height: 2;
  color: #626262;
  margin: 0 auto 0 0;
  font-family: "Kiwi Maru", serif;
  text-align: left;
}
.typeWriter > span {
  animation: caret 0.8s steps(1) infinite;
}
.typeWriter_02 > span {
  animation: caret 0.8s steps(1) infinite;
}




@keyframes caret {
  50% {
    border-color: transparent;
  }
}

  .typing {
    font-size: 20px;
	line-height: 2; 
	color: #626262; 
	font-family: "Kiwi Maru", serif;   
    white-space: pre-wrap;
    min-height: 4em;
    border-right: 2px solid #fff;
    text-align: left;
  }
#animation-section {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}
#img1 {
  margin-bottom: 16px;
}
#img2 {
  margin-bottom: 16px;
}
#text1 {
  margin-bottom: 40px;
}
 .text-content {
    white-space: pre-wrap;
  }
  .animated-img {
    display: none;
    max-width: 100%;
  }
  .icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 6px;
  }
#text2 .icon {
  width: 32px;
}

#pop1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-\ transform: translateY(-50%) translateX(-50%);
  background: #fff;
  width: calc(100% - 40px);
  padding: 32px;
font-size: clamp(16px, 1.63vw, 18px);
  line-height: 1.8;
  color: #49628b;
  font-family: "Kiwi Maru", serif;	
}
#pop2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-\ transform: translateY(-50%) translateX(-50%);
  background: #fff;
  width: calc(100% - 40px);
  padding: 32px;
font-size: clamp(16px, 1.63vw, 18px);
  line-height: 1.8;
  color: #49628b;
  font-family: "Kiwi Maru", serif;	
}
#pop3 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-\ transform: translateY(-50%) translateX(-50%);
  background: #fff;
  width: calc(100% - 40px);
  padding: 32px;
font-size: clamp(16px, 1.63vw, 18px);
  line-height: 1.8;
  color: #49628b;
  font-family: "Kiwi Maru", serif;	
}
#pop4 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-\ transform: translateY(-50%) translateX(-50%);
  background: #fff;
  width: calc(100% - 40px);
  padding: 32px;
font-size: clamp(16px, 1.63vw, 18px);
  line-height: 1.8;
  color: #49628b;
  font-family: "Kiwi Maru", serif;	
}
#pop1 button {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
}
#pop2 button {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
}
#pop3 button {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
}
#pop4 button {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
}


@media screen and (max-width:599px){
.typing {
  font-size: 18px;
  line-height: 1.8;
	}
}


/*-----------------------------------
loading
-----------------------------------*/
/*.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#wrapper {
    display: none;
}

#wrapper.show {
    display: block;
}
*/