@charset "utf-8";

/*-----------------------------------------------
	hero
-----------------------------------------------*/

.top-hero {
  position: relative;
  z-index: 9;
}

.top-hero__ttl {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 780px;
  height: 480px;
  max-width: 100%;
  margin: auto;
}

.top-hero__frame {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 120px);
  height: calc(var(--vh, 1vh) * 100);
}

.top-hero__movie {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.top-hero_kv {
  width: 100%;
  height: calc(100vh - 120px);
  /* height: calc(var(--vh, 1vh) * 100); */
  background-image: url(../img/index/kv.jpg);
  background-size: cover;
  background-position: 50% 80%;
}
.video-note {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.6;
    text-align: right;
}

@media only screen and (max-width: 767px) {
  .top-hero__ttl img {
    /* margin-top: -8%; */
  }
  .top-hero_kv {
    background-image: url(../img/index/kv_sp.jpg);
    background-position: 50% 50%;
  }
 .video-note {
    font-size: 10px;
    margin-top: 8px;
    line-height: 1.6;
    text-align: right;
}
}


/*-----------------------------------------------
	main
-----------------------------------------------*/


/*-----( common )-----*/

.top-sec-head__eng {
  height: 32px;
}

.top-sec-head__eng img {
  width: auto;
  height: 100%;
}

.top-sec-head__jp {
  margin-top: 16px;
  font-weight: 500;
}

.btf__bnr {
  display: block;
  margin: 90px auto 0;
}

@media only screen and (max-width: 767px) {
  /*-----( common )-----*/
  .top-sec-head__eng {
    height: 27px;
    text-align: center;
  }
  .top-sec-head__jp {
    text-align: center;
  }
  .btf__bnr {
    margin: 60px auto 0;
  }
}


/*-----------------------------------------------
	news
-----------------------------------------------*/


/*-----( top-news )-----*/

.top-news {
  display: flex;
  justify-content: space-between;
  padding: 110px 0 100px;
}

.news {
  width: 47%;
  margin-right: 3%;
}

.news-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 13px;
}

.news-list li {
  border-bottom: 1px solid #DFE1E2;
}

.news-list a {
  display: flex;
  padding: 30px 0 25px;
  text-decoration: none;
}

.news-list time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 90px;
  height: 25px;
  background: #F2EFEC;
  border-radius: 13px;
  color: #006428;
  font-size: 12px;
}

.news-list span {
  display: block;
  margin: 1px 0 0 4%;
  color: #222;
}

.news-btm__btn {
  display: none;
}


/*-----( fb )-----*/

.fb-block {
  flex-shrink: 0;
  width: 500px;
}

.fb-block iframe {
  height: 505px;
}


/*-----( Instagram )-----*/

.insta-block {
  flex-shrink: 0;
  width: 500px;
}

.insta-block iframe {
  height: 550px;
}

@media only screen and (max-width: 979px) {
  /*-----( top-news )-----*/
  .top-news {
    display: block;
  }
  .news {
    width: 80%;
    margin: 0 auto 80px;
  }
  /*-----( fb )-----*/
  .fb-block {
    margin: 0 auto;
  }
  /*-----( Instagram )-----*/
  .insta-block {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 979px) {
  /*-----( top-news )-----*/
  .top-news {
    display: block;
  }
  .news {
    width: 80%;
    margin: 0 auto 80px;
  }
  /*-----( fb )-----*/
  .fb-block {
    margin: 0 auto;
  }
  /*-----( Instagram )-----*/
  .insta-block {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  /*-----( top-news )-----*/
  .top-news {
    padding: 67px 0 0;
  }
  .news {
    width: 100%;
    margin: 0 auto 80px;
  }
  .news-head {
    display: block;
    margin: 0 0 18px;
  }
  .news-head__btn {
    display: none;
  }
  .news-list a {
    display: block;
    padding: 20px 0 22px;
  }
  .news-list time {
    font-size: 12px;
  }
  .news-list span {
    display: block;
    margin: 7px 0 0 0;
  }
  .news-btm__btn {
    display: flex;
    margin: 40px auto 0;
  }
  .fb-block {
    width: 100%;
    margin-bottom: 80px;
  }
  .fb-block iframe {
    width: 100%!important;
    max-width: 336px!important;
    height: 388px!important;
    margin: 0 auto!important;
  }
  .insta-block {
    width: 100%;
    margin-bottom: 80px;
  }
  .insta-block iframe {
    width: 100%!important;
    max-width: 336px!important;
    height: 388px!important;
    margin: 0 auto!important;
  }
}

@media only screen and (max-width: 320px) {
  .fb-block iframe {
    min-width: 288px!important;
    max-width: 288px!important;
    height: 340px!important;
  }
}


}
@media only screen and (max-width: 320px) {
  .insta-block iframe {
    min-width: 288px!important;
    max-width: 288px!important;
    height: 340px!important;
  }
}

/*-----------------------------------------------
	pickup
-----------------------------------------------*/
.pickup,
.plan {
  width: 95%;
  max-width: 1520px;
  margin: 0 auto;
  background: #F8F7F2;
}
.pickup-head {
  padding: 113px 0 60px;
  text-align: center;
}
.pu-slider {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 80px;
}
.pu-slider__item {
  display: block;
  padding: 0 5.5%;
  color: #222;
  text-decoration: none;
  transition: all .4s ease-out;
}
.pu-slider__img {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 264px;
  border: 2px solid #3C1A1A;
}
.pu-slider__item img {
  transition: all .4s ease-out;
}
.pu-slider-box {
  position: relative;
  z-index: 2;
  width: 83%;
  margin: -47px auto 0;
  padding: 38px 9% 42px;
  background: #fff;
}
.pu-slider-box time {
  display: block;
  margin: 0 0 2px;
  color: #006428;
  font-size: 20px;
  font-weight: 700;
}
.pu-slider .slick-arrow {
  position: absolute;
  z-index: 2;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 20px;
  height: 30px;
}
.pu-slider .slick-prev {
  top: 121px;
  left: -55px;
  background: url(../img/common/arw_05.svg) left top / cover no-repeat;
}
.pu-slider .slick-next {
  top: 121px;
  right: -55px;
  background: url(../img/common/arw_04.svg) left top / cover no-repeat;
}
@media (hover: hover) {
  .pu-slider__item:hover img {
    transform: scale(1.1);
  }
}
@media only screen and (max-width: 1279px) {
  .pu-slider__item img {
    width: auto;
    max-width: none;
    height: 100%;
  }

}
@media only screen and (max-width: 767px) {
  .pickup {
    width: 100%;
    padding: 0 0 80px;
  }

  .pickup-head {
    padding: 88px 0 40px;
  }
  .pu-slider {
    padding-bottom: 40px;
  }

  .pu-slider__item {
    padding: 0 1.485%;
    color: #222;
    text-decoration: none;
    transition: all .4s ease-out;
  }

  .pu-slider__img {
    height: 177px;
  }

  .pu-slider__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .pu-slider-box {
    width: 88%;
    margin: -23px auto 0;
    padding: 19px 7% 23px;
  }

  .pu-slider-box time {
    margin: 0 0 7px;
    font-size: 16px;
  }

  .pu-slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0;
  }

  .pu-slider .slick-dots li {
    margin: 0 10px;
  }

  .pu-slider .slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: #C4C4C4;
    border-radius: 5px;
  }

  .pu-slider .slick-dots .slick-active button {
    background: #006428;
  }

  .pu-slider .slick-arrow {
    width: 12px;
    height: 18px;
  }

  .pu-slider .slick-prev {
    top: 78px;
    left: -18px;
  }

  .pu-slider .slick-next {
    top: 78px;
    right: -14px;
  }
}

/*-----------------------------------------------
	plan
-----------------------------------------------*/
.plan {
	padding: 100px 0 298px;
}
.plan-head {
  padding: 67px 0 0;
  text-align: center;
}
.plan-lead {
  margin: 21px auto 40px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .plan {
    width: 100%;
    padding: 40px 0;
    background: #fff;
  }

  .plan-head {
    padding: 45px 0 0;
  }

  .plan-lead {
    width: 92%;
    margin: 20px auto 44px;
  }
}

/*-----------------------------------------------
	movie
-----------------------------------------------*/

.movie .wrapper {
  position: relative;
  margin: -198px auto 80px;
}
.movie .wrapper::before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  display: block;
  width: 18%;
  height: 0;
  padding-top: 8.59%;
  background: url(../img/index/bg_movie.svg) left top / cover no-repeat;
}
.movie-head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 100%;
  pointer-events: none;
}
.movie-head-inner {
  margin: 104px 0 0;
}
.movie-box {
  position: relative;
  z-index: 2;
  width: 80%;
  height: 0;
  margin: 0 0 0 auto;
  padding-top: 45%;
}
.movie__btn {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.movie__btn img {
  position: absolute;
  top: 0;
  left: 0;
}
.movie__btn img:first-child {
  z-index: 2;
}
.movie__btn img:last-child {
  z-index: 1;
}
@media (hover: hover) {
  .movie__btn:hover img:first-child {
    display: none;
  }
}
.movie-box iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: auto;
}
@media only screen and (max-width: 767px) {
  .movie {
    position: relative;
    padding: 0 0 40px;
  }

  .movie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 282px;
    background: #F8F7F2;
  }

  .movie .wrapper {
    margin: 0 auto;
    padding: 81px 0 0;
  }

  .movie .wrapper::before {
    display: none;
  }

  .movie-head {
    position: relative;
    display: block;
    height: auto;
    text-align: center;
  }

  .movie-head-inner {
    margin: 0 auto 0;
  }

  .movie-box {
    width: 100%;
    height: 0;
    margin: 40px auto 0;
    padding-top: 55%;
  }
}

/*-----------------------------------------------
	more
-----------------------------------------------*/
.more {
  padding: 0 0 20px;
  background: #006428;
}
.more-head {
  padding: 92px 0 60px;
  text-align: center;
  color: #fff;
}
.more-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.more-nav li {
  width: 47.27%;
  margin: 0 0 60px;
}
.sns {
  padding: 88px 0 80px;
}
.sns-head {
  padding: 0 0 64px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .more {
    padding: 0 0 51px;
  }

  .more-head {
    padding: 67px 0 39px;
  }

  .more-nav {
    display: block;
  }

  .more-nav li {
    width: 100%;
    margin: 0 auto 26px;
  }

  .sns-head {
    padding: 0 0 44px;
  }
}
/*-----( access )-----*/

.accessarea {
  width: 95%;
  max-width: 1520px;
  margin: 0 auto;
  background: #F8F7F2;
}
.lct .page__ttl {
  margin: 0 auto 40px;
}
.access {
  padding: 0 0 80px 0;
}
.access-box {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.access-spv{ 
  display:none;
}
.access-01__ttl {
  padding: 10px 0 13px;
  color: #006428;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .1em;
}
.access-data {
  width: 60%;
}
.access-data img {
  width: 450px;
}

.access-data .cmn-head-02 {
  margin-bottom: 26px;
}
.access-data p+.cmn-head-02 {
  margin-top: 40px;
}
.access-data p {
  display: block;
  margin: 24px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.access-data p+p {
  margin-top: 12px;
}

.access__img {
  width: 323px;
  margin: 0 auto;
}

.access__map {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin: 80px auto 25px;
  padding-top: 47.27%;
}

.maparea {
  width: 95%;
  max-width: 1520px;
  margin: 0 auto;
}
.access__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.access-util {
  display: flex;
  justify-content: space-between;
}

.access__address {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.access__link {
  color: #006428;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.access__link::after {
  content: ">";
  margin: 0 0 0 8px
}

.access-stn {
  margin: 19px auto 0;
  padding: 36px 3.2% 37px;
  border: 4px solid #006428;
  color: #C8161F;
  line-height: 2;
}

.access-stn__ttl,
.access-stn p {
  font-size: 16px;
  font-weight: 700;
}

.access-stn p+.access-stn__ttl {
  margin-top: 30px;
}

.access-stn p+p {
  margin-top: 20px;
}

.access-img {
  margin-top: 28px;
}

.access-stn ul {
  margin-top: 32px;
}

.access-stn li {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.access .cmn__btn-01 {
  margin-top: 26px;
}

.access-stn li::before {
  content: "※";
}


@media only screen and (max-width: 767px) {
  .accessarea {
    width: 100%;
    padding: 0 0 80px;
  }
  .access {
    padding: 0;
  }
  .access-box {
    display: none;
  }
  .access-spv {
    position: relative;
    display: block;
    padding: 0 8%;
    background: #F8F7F2;
    overflow: hidden;
  }
  .access-spv__ttl {
    margin: 0 0 12px;
    color: #006428;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    position: relative;
    z-index: 3;
  }
  .access-spv__top {
    position: relative;
    z-index: 3;
  }
  .access-spv__list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
  }
  .access-spv__list li {
    position: relative;
    padding-left: 1.1em;
  }
  .access-spv__list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
  }
  .access-spv__route {
    margin-top: 160px;
    position: relative;
    z-index: 1;
  }
  .access-spv__route img {
    width: 100%;
    height: auto;
    display: block;
  }
  .access-spv__okinawa {
    position: absolute;
    top: 110px;
    right: 8%;
    width: 48%;
    max-width: 175px;
    aspect-ratio: 1 / 1.25;
    z-index: 2;
    pointer-events: none;
    background-image: url("/ytm/assets/img/info/img_accessmap_right.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .access-util {
    display: block;
  }
  .access-stn {
    margin: 19px auto 0;
    padding: 26px 4%;
    border: 2px solid #006428;
  }
  .access-img {
    margin-top: 20px;
  }
  .access .cmn__btn-01 {
    margin-top: 10px;
  }
  .access__img {
    grid-area: okimap;
    width: 100%;
    margin: 0;
  }
  .access__img img{
    width: 100%;
    height: auto;
    display: block;
  }
  .access-01__ttl{
    font-size: 18px;
    grid-area: title;
    margin: 0;
  }
}
/* =========================
   ABOUT
   ========================= */
.aboutarea{
  position: relative;
  width: 95%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 0 80px;
  background: #dbe2d8;
  overflow: hidden;
}
.aboutarea::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("/ytm/assets/img/index/bg_footprint.png");
  background-repeat: no-repeat;
  background-size: 55% auto;
  background-position: center 400px;
  opacity: 0.85;
}
.aboutarea .wrapper{
  position: relative;
  z-index: 1;
}
.about-head{
  margin: 0 0 52px;
}
.about-bird{
  position: absolute;
  top: 60px;
  right: 0px;
  width: 33%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.about-list{
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.about-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.about-card--reverse{
  direction: rtl;
}
.about-card--reverse > *{
  direction: ltr;
}
.about-card__img img{
  width: 100%;
  height: auto;
  display: block;
}
.about-card__ttl{
  margin: 0 0 16px;
  color: #0b6a3a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
}
.about-card__txt{
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}
@media (max-width: 767px){
  .aboutarea{
    padding: 110px 0 80px;
    margin: 0 auto;
    width: 100%;
  }
  .aboutarea::before{
    background-size: 550px auto;
    background-position: center 280px;
    opacity: 0.85;
    background-image: url(/ytm/assets/img/index/bg_footprint_sp.png);
  }
  .about-bird{
    top: -32px;
    right: 110px;
    width: 150px;
  }
  .about-head{
    margin-bottom: 34px;
  }
  .about-list{
    gap: 44px;
  }
  .about-card{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .about-card--reverse{
    direction: ltr;
  }
  .about-card__ttl{
    font-size: 18px;
    margin-bottom: 12px;
  }
}