@charset "utf-8";

@import "reset.css";
@import "cmn-options.css";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');



body{background-color:#c4e5e4;}

#bodywrap {
background: url(../img/bg.webp) 50% 0 repeat;
background-attachment:fixed;
}

#wrapper_head {
  width: 100%;
  max-width: 740px;
  height: auto;
  margin: 0 auto;
}

h1{filter: drop-shadow(1px 1px 10px #fff);}


#wrapper {
  width: 100%;
  max-width: 740px;
  height: auto;
  background-color:#fff;
  /*
background: url(../img/background01.png) 50% 0 no-repeat;
*/
  margin: 0 auto;
  /*
  filter: drop-shadow(0px 10px 10px #333);
  */
}

.kiwi{font-family: 'Kiwi Maru', serif;}



.txt {
  font-size: 1.2em;
  line-height: 1.5;
}

a:hover{transition: filter 0.5s ease;filter: brightness(1.3);}


/* ヘッダー */


  .movie {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    padding-top: 56.25%;
    background-color: #fff;
  }
  
/*
  .movie::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100svh;
    min-height: 700px;
    background-color: rgba(0,0,0,0.1);
    background-image: radial-gradient(#333 30%, transparent 31%), radial-gradient(#333 30%, transparent 31%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
  }
*/

  .movie video{
    width: 100%;
    height: auto;
    position: absolute;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  @media screen and (max-width: 640px) {
    .movie video{
      width: 100%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }


  .movie02 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 56.25%;
  }

  .movie02 video{
    width: 102%;
    height: auto;
    position: absolute;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

/* Loading背景画面設定　*/
/* ローディング*/
/*
.loading {
  position: fixed;
  z-index: 1000;
  width: 100%;
  max-width: 740px;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.5);
}
.loading.hide {
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}
.loading-wrap {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: auto;
  color:#5fc1c7;
  height: 20px;
}
*/

.font5 {
  font-size: 1.6em;line-height:2.1;
}

.midashi{ font-size: 2.8em;line-height:2.1;
}

.midashi_faq{ font-size: 2em;line-height:2.1;
}

.slider {
  margin: 40px auto 0;
  max-width: 550px;
  width: 80%;
}
.slick-img img {
  height: auto;
  width: 100%;
}

.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
}
.slick-arrow:hover {
  opacity: 0.7;
}

/* 共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 26px;
  height: 26px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
/* next */

.slick-next {
  right: -30px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* prev */

.slick-prev {
  left: -30px;
}
.slick-prev::after {
  left: 4px;
  transform: rotate(-135deg);
}



@media screen and (max-width: 640px) {
	.font5 {font-size: 1.8em;}
  .jost {
    font-size: 5em;
  }
  .txt {
    font-size: 1.8em;
  }
}


/* セクション03 */

#section03 {
  background-size: 100% auto;
  background-color:#fff;
}

#section03 h4 {
  width: 95%;
 padding-top: 8%;
 padding-left: 5%;
}


/* map */

#map {
  background-size: 100% auto;
  background-color:#E1EAF3;
}


/* TOPボタン */
  .pagetop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
	z-index:999;
}
.pagetop a {
    display: block;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}
.pagetop a:hover {
    display: block;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
}


/* フッター
*******************************/
#footer {
  border-top: solid 1px #000;
  text-align: center;
  padding: 10px 0;
  width: 100%;
  margin-top: 5px;
}

#footer p {
  width: 100%;
  margin: 0 auto;
}

ul.example{display: flex;justify-content: space-between;padding: 0 5%;}

ul.example li {
background:#eeeeee;
text-align: center;	
width: 31%;
}

ul.example li a{
color: #333333;
display: block;
text-decoration:none;
padding:5% 4% 5% 4%;
}



.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  background-color: #ffffff;
}
.youtube-container iframe {
  position: absolute;
  top: 0%;
  bottom:0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}