﻿/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ページ共通___________________________*/
.main-area {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 2;
  font-size: calc(14* (100vw / 375));
  padding-bottom: calc(120* (100vw / 375));
  overflow-x: hidden;
  text-align: center;
  color: #000;
}

.main-area * {
  letter-spacing: 0.075em;
}

.main-area img,
.main-area iframe {
  width: 100%;
  height: auto;
}

.main-area a,
.main-area picture {
  display: inline-block;
}

@font-face {
  font-family: "Baskerville";
  src: url("../fonts/baskerville.ttf") format("truetype");
}

@font-face {
  font-family: "HKGrotesk_medium";
  src: url("../fonts/HKGrotesk-Medium.otf") format("opentype");
}

@font-face {
  font-family: "HKGrotesk_bold";
  src: url("../fonts/HKGrotesk-Bold.otf") format("opentype");
}

.ff_hkg_m {
  font-family: "HKGrotesk_medium";
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}

.ff_hkg_b {
  font-family: "HKGrotesk_bold";
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

_:lang(x)+_:-webkit-full-screen-document,
.ff_hkg_b {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.ff_bask {
  font-family: "Baskerville", serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
}

.main-area .lp_credit {
  font-size: calc(12* (100vw / 375));
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.05em;
  margin-top: calc(11* (100vw / 375));
  text-align: left;
  text-align: left;
}

.main-area .lp_credit li:nth-child(n+2) {
  margin-top: calc(9* (100vw / 375));
}

.main-area .lp_credit a {
  text-decoration: underline;
  display: block;
}

@media screen and (max-width: 767px) {
  .main-area .pcOnly {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .main-area {
    font-size: 1.4rem;
    padding-bottom: 10rem;
  }

  .main-area .spOnly {
    display: none;
  }

  .main-area a {
    transition: all 0.3s;
  }

  .ff_gara {
    font-size: 5rem;
  }

  .main-area .lp_credit {
    font-size: 1.2rem;
    margin-top: 1.6rem;
  }

  .main-area .lp_credit li:nth-child(n+2) {
    margin-top: 0.3rem;
  }

  .main-area .lp_credit a {
    display: inline-block;
  }
}

/* ▽ sec__fv ▽ */
.sec__fv {
  position: relative;
}

.sec__fv h3 {
  font-size: calc(18* (100vw / 375));
  margin-top: calc(45* (100vw / 375));
  line-height: 1.5555555556;
}

.sec__fv h3+p {
  margin-top: calc(16* (100vw / 375));
}

/* .js-slider-auto {
  margin-top: calc(42* (100vw / 375));
}

.js-slider-auto_item {
  width: calc(135* (100vw / 375));
} */

.animation_bg {
  display: flex;
  width: 100vw;
  overflow: hidden;
  background: #F1EEE9;
  margin-top: calc(45* (100vw / 375));
}

.animation_bg {
  width: 100%;
  height: calc(180* (100vw / 375));
  background-image: url(../img/slider_all.jpg);
  background-repeat: repeat-x;
  background-size: auto calc(180* (100vw / 375));
  animation: loop 120s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes loop {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -4800px 0;
  }
}

@media screen and (min-width: 768px) {
  .sec__fv h2 {
    width: 120rem;
    margin: auto;
  }

  .sec__fv h3 {
    font-size: 1.8rem;
    margin-top: 5.5rem;
  }

  .sec__fv h3+p {
    margin-top: 1.7rem;
  }

  /* .js-slider-auto {
    margin-top: 5.4rem;
  }

  .js-slider-auto_item {
    width: 30rem;
  } */

  .animation_bg {
    height: 40rem;
    background-size: auto 40rem;
    animation: loop 80s linear infinite;
    margin-top: 5.4rem;
  }
}

@media screen and (min-width: 1400px) {
  .js-slider-auto {
    width: 1400px;
    margin: 5.4rem auto 0;
  }

  .js-slider-auto .slick-list {
    overflow: visible;
  }
}

/* ▽_____________ sec__style1 ______________▽ */
.sec__style {
  position: relative;
}

.bg_content::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: calc(696* (100vw / 375));
  background: #D4D9D9;
  bottom: calc(-55* (100vw / 375));
  left: 50%;
  transform: translateX(-50%);
}

.js-slider-set2 {
  background-color: #fff;
  pointer-events: none;
}

.lp_credit {
  margin-top: calc(17* (100vw / 375));
}



.detail_ttl {
  font-size: calc(30* (100vw / 375));
  line-height: 1.4;
  color: #535353;
  margin-top: calc(78* (100vw / 375));
  letter-spacing: 0.05em;
}

.contents_ttl {
  font-size: calc(29* (100vw / 375));
  line-height: 1.5;
  letter-spacing: 0.075em;
  color: #B2B7B7;
}

@media screen and (max-width: 767px) {
  .detail_tx {
    margin-top: calc(23* (100vw / 375));
  }

  .contents_ttl {
    margin-top: calc(51* (100vw / 375));
  }

  .contents_ttl+p {
    margin-top: calc(10* (100vw / 375));
  }

  .detail_ttl+.img {
    margin-top: calc(18* (100vw / 375));
  }

  .img02,
  .img05 {
    width: calc(315* (100vw / 375));
    margin: calc(23* (100vw / 375)) auto 0;
  }

  .sec__style1 .content_wrap.__2 {
    width: calc(280* (100vw / 375));
    margin: calc(30* (100vw / 375)) 0 0 auto;
  }





  /* .sec__style2 */
  .sec__style2 .detail_ttl {
    margin-top: calc(135* (100vw / 375));
  }

  .img05 {
    margin-top: calc(54* (100vw / 375));
  }

  .sec__style2 .content_wrap.__2 {
    width: calc(280* (100vw / 375));
    margin: calc(30* (100vw / 375)) 0 0 0;
  }

  .sec__style2 .lp_credit {
    padding-left: calc(15* (100vw / 375));
  }
}

.sec__style2::before {
  background: #F2EAD9;
}

@media screen and (min-width: 768px) {

  .lp_credit {
    margin-top: calc(17* (100vw / 375));
  }

  .bg_content::before {
    height: 69.9rem;
    bottom: -7.6rem;
  }

  .detail_ttl {
    font-size: 3.6rem;
    margin-top: 13.9rem;
  }

  .contents_ttl {
    text-align: left;
    font-size: 3.2rem;
  }

  .contents_ttl+p {
    text-align: left;
    margin-top: 2rem;
  }

  .detail_ttl+.img {
    width: 52rem;
    margin: 3.8rem auto 0;
  }

  .detail_tx {
    margin-top: 3.2rem;
  }

  .style_contents.__2 {
    display: grid;
    grid-template-columns: 52rem auto;
    grid-template-rows: 4.6rem 25.4rem auto;
    width: 92rem;
    margin: 9.4rem auto 0;
  }

  .sec__style1 .tx_wrap {
    grid-area: 2/2/3/3;
  }

  .sec__style1 .content_wrap.__1 {
    width: 44rem;
    grid-area: 1/1/2/3;
  }

  .sec__style1 .content_wrap.__2 {
    width: 40rem;
    grid-area: 3/2/5/3;
  }






  /* .sec__style2 */
  .sec__style2 .detail_ttl {
    margin-top: 21.4rem;
    letter-spacing: 0.075em;
  }

  .sec__style2 .style_contents.__2 {
    grid-template-columns: 48rem auto;
    grid-template-rows: 18.8rem auto;
    margin: 9.4rem auto 0;
  }

  .sec__style2 .content_wrap.__1 {
    width: 44rem;
    grid-area: 1/2/2/3;
  }

  .sec__style2 .content_wrap.__2 {
    width: 40rem;
    grid-area: 2/1/3/2;
  }
}

/* ▽_____________ style1 ______________▽ */




/* ▽_____________ lp_foot_btn ______________▽ */
.main-area .lp_foot_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(280* (100vw / 375));
  height: calc(50* (100vw / 375));
  margin: calc(116* (100vw / 375)) auto 0;
  line-height: 1;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(14* (100vw / 375));
  letter-spacing: 0.05em;
  border: #000 1px solid;
}

@media screen and (min-width: 768px) {
  .main-area .lp_foot_btn {
    width: 28rem;
    height: 5rem;
    font-size: 1.4rem;
    margin: 15.6rem auto 0;
  }
}


/* ▽ imganime ▽ */
.js-fadeIn {
  opacity: 0;
  will-change: opacity, transform;
  transition: ease-in, opacity 2500ms, transform 1000ms;
  transform: translate3d(0, 0, 0) scale(1);
}

.showFade {
  opacity: 1;
}