@charset "UTF-8";
/* CSS Information
===============================
File name:Index.css
Description:Onna Village Resort Wedding
Date:2019
Contents:*Index Page
Root EM:62.5%=10px
=============================== */
/* Construction
===============================*/
.main {
  padding: 0;
}

/* Campaign slide
===============================*/
.txt-slide__wrap {
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #ccc;
  background-color: #f2f2f2;
  padding: 1rem 4rem;
  height: calc(2em * 1.6); /* 65px */
  font-size: 1.4rem;
  box-sizing: content-box;
}
.txt_slide__slide {
  opacity: 0;
  transition: opacity 0.5s;
}
.txt_slide__slide.initialized {
  opacity: 1;
}
.campaign_slide__header {
  margin-right: 1em;
  font-weight: bold;
}
.campaign_slide__link {
  text-decoration: underline;
}

/* Visual
===============================*/
.visual {
  width: 100%;
  display: block;
  margin-bottom: 3rem;
}
.visual_img {
  width: 100%;
}

/* Visual menu
===============================*/
.visual_menu {
  position: relative;
  margin-bottom: 0.8rem;
  background-color: #cedcea;
  background-repeat: no-repeat;
  width: 100%;
  height: calc(640px / 16 * 9);
}
.visual .visual_menu:last-of-type {
  margin-bottom: 6rem;
}
.visual_menu--about {
  background-image: url(/res/img/index/cutout_couple-hold-hands.png);
  background-position: right 0 bottom 0;
  background-size: 68% auto;
}
.visual_menu--hotellunch {
  background-image: url(/res/img/index/cutout_dish.png);
  background-position: right bottom;
  background-size: 70% auto;
}
.visual_menu--puremium {
  background-image: url(/res/img/index/cutout_passport-heart.png);
  background-position: right 20% center;
  background-size: 40% auto;
}
.visual_menu--spot {
  background-image: url(/res/img/index/cutout_couple-heart.png);
  background-position: right 10% top -10%;
  background-size: 76% auto;
}
.visual_menu--chapel {
  background-image: url(/res/img/index/cutout_couple-ceremony.png);
  background-position: right 20% top -38%;
  background-size: 50% auto;
}
.visual_menu--week {
  background-image: url(/res/img/index/cutout_week.png);
  background-position: right top;
  background-size: 55% auto;
}
.visual_menu--suite {
  background-image: url(/res/img/index/cutout_fruits.png);
  background-position: right top;
  background-size: 75% auto;
}
.visual_menu--rdp {
  background-image: url(/res/img/index/cutout_onnanabii.png);
  background-position: right 20px bottom;
  background-size: 55% auto;
}
.visual_menu--gift {
  background-image: url(/res/img/index/cutout_pair-cup.png);
  background-position: right 20px bottom;
  background-size: 60% auto;
}
.visual_menu--optional_tour {
  background-image: url(/res/img/index/cutout_tougei.png);
  background-position: right bottom;
  background-size: 55% auto;
}
.visual_menu--sweets {
  background-image: url(/res/img/index/cutout_pancake.png);
  background-position: right 20px bottom 10px;
  background-size: 55% auto;
}
.visual_menu__hdader {
  position: absolute;
  top: 50%;
  left: 1em;
  margin: auto 0;
  color: #fff;
  font-size: 2.6rem;
  font-weight: 600;
  text-shadow: 0px 0px 4px rgba(0, 26, 51, 0.5);
  transform: translateY(-50%);
}
.visual_menu___link {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Top menu
===============================*/
.top_menu {
  margin-bottom: 6rem;
  padding: 0 4rem;
}
.top_menu:last-of-type {
  margin-bottom: 0;
}
.top_menu--gallery {
  padding-right: 0;
}
.top_menu__header {
  margin-bottom: 2rem;
  font-size: 2.6rem;
  font-weight: normal;
}
.top_menu__news-item {
  border-bottom: 1px solid #f2f2f2;
}
.top_menu__news-link {
  display: block;
  text-decoration: none;
  padding: 2rem 0;
}
.top_menu__news-list .top_menu__news-item:first-of-type .top_menu__news-link {
  padding-top: 0;
}
.top_menu__news-date {
  margin-bottom: 0.8rem;
  color: #999;
  font-size: 0.8em;
}

/* Companies
===============================*/
.companies {
  display: flex;
  flex-wrap: wrap;
}
.companies__item {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: calc(100% / 3);
  height: calc((640px - 8rem) / 3);
}
.companies__item:nth-of-type(3n) {
  border-right: none;
}
.companies__item:last-of-type,
.companies__item:nth-last-of-type(2),
.companies__item:nth-last-of-type(3) {
  border-bottom: none;
}
.companies_link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
}
.companies__img {
  width: 100%;
  height: auto;
}

/* Element
===============================*/
.front {
  width: 100%;
}
.front_lead {
  margin-bottom: 3rem;
}
.front_banner {
  margin: 2rem 0 4rem;
  overflow: hidden;
  /* 定形外＆1枚バナーのため設定を外す
  aspect-ratio: 80/25;
   */
}
.front_banner__item {
  transition: opacity 0.5s;
}
.front_banner__item.initialized {
  opacity: 1;
}

/* News List */
.front_news {
  width: 100%;
  background: #f8f6e7;
  margin-bottom: 4rem;
}
.front_news__item {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.3;
  color: #af9c54;
  text-align: center;
}
.front_news__list {
  width: 100%;
}
.front_news__link {
  border-bottom: dashed 1px #ddd;
}
.front_news__field:last-child .front_news__link {
  border: 0;
  padding-bottom: 0;
}
.front_news__link {
  display: block;
  text-decoration: none;
}
.front_news__data {
  color: #9f9b8e;
  display: block;
  margin-bottom: 0.5rem;
}
.front_news__title {
  width: 100%;
  font-weight: normal;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gallery slide */
.gallery {
  opacity: 0;
  transition: opacity 0.5s;
}
.gallery.initialized {
  opacity: 1;
}
.gallery__item {
  padding-right: 10px;
}
.gallery__inner-item {
  position: relative;
  background: no-repeat center center / cover;
  padding-top: 56.25%;
  transition: opacity 0.15s ease-out;
}
.gallery__inner-item:hover {
  opacity: 0.85;
}
.gallery__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Button
===============================*/
/* ゆくゆくは下記にボタン統一 */
.btn-wrap {
  margin: 3rem auto 0;
  width: 90%;
  max-width: 42rem;
  min-width: 20rem;
}

.btn {
  display: inline-block;
  position: relative;
  background-color: #fff;
  border: 2px solid #333;
  padding: 1.4rem 2.1rem;
  width: 100%;
  color: #333;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  outline: none;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1),
    background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  cursor: pointer;
}
.btn:hover {
  background: #333;
  border-color: #333;
  color: #fff !important;
}
.btn-arrow {
  transition: background-color 300ms ease-out;
}
.btn-arrow span {
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}
.btn-arrow:hover span {
  transform: translate3d(-1rem, 0, 0);
}
.btn-arrow svg {
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
}
.btn-arrow:hover svg {
  opacity: 1;
  right: -2rem;
}

/* Responsive
====================*/
/*[ MIN ]---------------------------*/
@media (min-width: 64.0625em) {
  /*1025*/
}
@media (min-width: 40.0625em) {
  /*641*/
}
@media (min-width: 30.0625em) {
  /*481*/
  .front_news {
    padding: 4rem;
  }
  .front_news__link {
    padding: 2rem 0;
  }
  .front_news__title {
    font-size: 1.8rem;
  }
}
/*[ MAX ]---------------------------*/
@media (max-width: 40em) {
  /*640*/
  .visual_menu {
    height: calc(100vw / 16 * 9);
  }
  .companies__item {
    height: calc((100vw - 8rem) / 3);
  }
}
@media (max-width: 30em) {
  /*480*/
  .visual .visual_menu:last-of-type {
    margin-bottom: 5rem;
  }
  .visual_menu__hdader,
  .top_menu__header {
    font-size: 1.8rem;
  }
  .top_menu {
    margin-bottom: 5rem;
    padding: 0 2rem;
  }
  .top_menu:last-of-type {
    margin-bottom: 0;
  }
  .top_menu--gallery {
    padding-right: 0;
  }
  .txt-slide__wrap {
    padding: 1rem 2rem;
  }
  .visual,
  .front_lead,
  .front_banner {
    margin-bottom: 2rem;
  }
  .front_news {
    padding: 2rem;
    margin-bottom: 2rem;
  }
  .front_news__item {
    font-size: 2rem;
    margin-bottom: 0;
  }
  .front_news__link {
    padding: 1.5rem 0;
  }
  .companies__item {
    height: calc((100vw - 4rem) / 3);
  }
}
@media (max-width: 23.75em) {
  /*380*/
}
@media (max-width: 22.5em) {
  /*360*/
}
@media (max-width: 21.25em) {
  /*340*/
  .visual .visual_menu:last-of-type {
    margin-bottom: 4rem;
  }
  .top_menu {
    margin-bottom: 4rem;
    padding: 0 1.5rem;
  }
  .top_menu:last-of-type {
    margin-bottom: 0;
  }
  .top_menu--gallery {
    padding-right: 0;
  }
  .txt-slide__wrap {
    padding: 1rem 1.5rem;
  }
  .companies__item {
    height: calc((100vw - 3rem) / 3);
  }
}