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


/* ------------------------------------------------------------
  COMMEN CLASS
------------------------------------------------------------ */
body {
  color: #333333;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif";
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*Indent*/
.indent {
  padding-left: 1em;
  text-indent: -1em;
}

/* btn */

.btn_01 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  max-width: 264px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 5px;
  background-color: #72777D;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  transition: 0.3s ease-in-out;
}

.btn_01::after {
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  content: "";
  height: 8px;
  transform: rotate(-45deg);
  width: 8px;
  margin-left: 8px;
}

.btn_01:hover {
  background-color: #515356;
}

.btn_02 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 210px;
  max-width: 250px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 5px;
  background-color: #72777D;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  transition: 0.3s ease-in-out;
}

.btn_02::after {
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}

.btn_02:hover {
  background-color: #515356;
}

@media screen and (min-width: 1024px) {

  /*マウスオーバー時ゆっくり透過*/
  .fade {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  .fade:hover {
    opacity: 0.7;
    filter: alpha(opacity=90);
  }
}

/* ------------------------------------------------------------
PC用設定
------------------------------------------------------------ */
.pc {
  display: block
}

.sp {
  display: none
}

.container {
  width: 100%;
  max-width: 1140px;
  padding: 0 32px;
  margin: 0 auto;
}

/* ------------------------------------------------------------
tb用設定
------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 24px;
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------
sp用設定
------------------------------------------------------------ */
@media screen and (max-width: 480px) {
  .pc {
    display: none
  }

  .sp {
    display: block
  }
}

/* ------------------------------------------------------------
header
------------------------------------------------------------ */
.header_belux {
  padding: 16px;
  height: 64px;
  background-color: #333333;
}

.img_logo {
  display: block;
  width: 136px;
  height: auto;
}

/* ------------------------------------------------------------
main
------------------------------------------------------------ */
/* mv */
.mv {
  position: relative;
}

.mv_copy {
  position: absolute;
  /* top: 50%; */
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
  width: 96%;
  color: #fff;
  letter-spacing: .1em;
}

.mv_copy_main {
  font-weight: bold;
  font-size: 20px;
}

.mv_copy_sub {
  margin-top: 16px;
  font-size: 12px;
}

@media screen and (min-width: 768px) {
  .mv_copy {
    top: 68%;
  }

  .mv_copy_main {
    font-size: 32px;
  }

  .mv_copy_sub {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.7;
  }
}

@media screen and (min-width: 1024px) {
  .mv_copy {
    top: 74%;
  }

  .mv_copy_main {
    font-size: 40px;
  }

  .mv_copy_sub {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.7;
  }
}

/* intro */
.intro {
  margin-top: 32px;
}

.intro_wrap {
  display: flex;
  flex-direction: column-reverse;
}

.intro_txt_heading {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

.intro_txt_read {
  margin-top: 16px;
  line-height: 1.7;
}

.intro_txt_note {
  margin-top: 16px;
  font-size: 11px;
}

.intro_img {
  margin-top: 16px;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .intro {
    margin-top: 96px;
  }

  .intro_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .intro_txt_heading {
    font-size: 32px;
  }

  .intro_txt {
    width: 48%;
  }

  .intro_img {
    margin-top: 0;
    width: 48%;
  }
}

/* situation */
.situation {
  margin-top: 32px;
  padding: 48px 0;
  background-color: #f0f0f0;
}

.situation_heading {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

.situation_wrap {
  margin-top: 24px;
}

.situation_block+.situation_block {
  margin-top: 32px;
}

.situation_txt {}

.situation_txt_heading {
  margin-top: 12px;
  font-size: 18px;
  font-weight: bold;
}

.situation_txt_read {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
}

@media screen and (min-width: 768px) {
  .situation {
    margin-top: 96px;
    padding: 96px 0;
  }

  .situation_heading {
    font-size: 32px;
  }

  .situation_wrap {
    margin-top: 48px;
  }

  .situation_block {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .situation_block+.situation_block {
    margin-top: 64px;
  }

  .situation_block.flex_reverse {
    flex-direction: row-reverse;
  }

  .situation_img {
    width: 50%;
  }

  .situation_txt {
    width: 47%;
  }

  .situation_txt_heading {
    margin-top: 0;
    font-size: 20px;
  }

  .situation_txt_read {
    margin-top: 16px;
    font-size: 15px;
  }
}

/* tour */
.tour {
  margin-top: 64px;
}

.tour_wrap {
  /* padding-bottom: 32px; */
}

.tour_heading {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

.swiper-box {
  margin-top: 24px;
}

.tour_txt {
  margin-top: 12px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: underline;
}

.btn_area {
  padding-top: 64px;
}

@media screen and (min-width: 768px) {
  .tour {
    max-width: 1200px;
    padding: 0 32px;
    margin: 128px auto 0;
  }

  .tour_wrap {
    padding-bottom: 0;
  }

  .tour_heading {
    font-size: 32px;
  }

  .swiper-box {
    margin-top: 40px;
  }

  .btn_area {
    padding-top: 48px;
  }
}

/* swiper */
/*ページネーションを要素内におく*/
.swiper-box {
  position: relative;
}

/*ページネーションの位置を調整*/
.swiper-box .swiper-pagination {
  bottom: -35px !important;
}

/*ページネーションの色を変更*/
.swiper-box .swiper-pagination-bullet {
  background: rgb(140, 185, 213);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.5rem;
  color: rgb(140, 185, 213);
}

/* PC時のスタイル */
@media screen and (min-width: 768px) {

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }

  .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* luxury */
.luxury {
  margin-top: 48px;
  border: solid 1px #d1cdba;
  padding: 16px;
  border-radius: 8px;
  background-color: #FCFAF1;
}

.luxury_txt_heading {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.luxury_wrap {
  margin-top: 16px;
}

.luxury_txt {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.7;
}

.btn_contact_block_txt {
  font-weight: bold;
  padding: 16px 0;
}

@media screen and (min-width: 768px) {
  .luxury {
    margin-top: 128px;
    padding: 56px;
  }

  .luxury_txt_heading {
    font-size: 32px;
  }

  .luxury_wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }

  .luxury_img {
    width: 42%;
  }

  .luxury_txt {
    width: 54%;
    font-size: 14px;
    margin-top: 0;
  }
}

.btn_contact {
  margin-top: 48px;
  padding: 48px 0;
  background-color: #f0f0f0;
}

.btn_contact_heading {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

.btn_contact_txt {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
}

.btn_contact_wrap {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.btn_contact .btn_02 {
  min-width: 100%;
  min-height: 64px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .btn_contact {
    margin-top: 128px;
    padding: 96px 0;
  }

  .btn_contact_heading {
    font-size: 32px;
  }

  .btn_contact_txt {
    margin-top: 32px;
    font-size: 15px;
    text-align: center;
  }

  .btn_contact_wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }

  .btn_contact .btn_02 {
    min-width: 400px;
    min-height: 64px;
    margin: 0 auto;
  }
}



.belux_contact_heading {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

@media screen and (min-width: 768px) {


  .belux_contact_heading {
    font-size: 32px;
    margin-top: 64px;
    margin-bottom: 32px;
  }
}

/* ------------------------------------------------------------
footer
------------------------------------------------------------ */
.footer_belux {
  margin-top: 64px;
  background-color: #333333;
  ;
}

.footer_belux_wrap {
  width: 100%;
  max-width: 1200px;
  padding: 48px 24px;
  margin: 0 auto;
}

.footer_belux_logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 192px;
  height: auto;
  margin: 0 auto;
}

.footer_belux_txt {
  font-size: 11px;
  margin-top: 8px;
  color: #fff;
}

.footer_belux_info {
  display: flex;
  flex-direction: column;
  margin: 32px 0 0 0;
}

.footer_belux_sns {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.footer_belux_sns a {
  display: block;
  width: 24px;
  height: 24px;
}

.footer_belux_link {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 0 0;
  font-size: 12px;
  text-decoration: underline;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .footer_belux {
    margin-top: 128px;
  }

  .footer_belux_wrap {
    padding: 64px 32px;
  }

  .footer_belux_logo {
    margin: 0 0 0 auto;
  }

  .footer_belux_info {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .footer_belux_sns {
    gap: 32px;
  }

  .footer_belux_sns a {
    width: 32px;
    height: 32px;
  }

  .footer_belux_link {
    gap: 32px;
  }
}

/*------------------------------
 ▼共通デザイン（モバイル向け）
 -------------------------------*/
・ ・ ・
/*-------------------------------------
▼中型画面向けデザイン（タブレットなど）
--------------------------------------*/
@media screen and (min-width: 768px) {
  ・ ・ ・
}

/*-------------------------------
▼大型画面向けデザイン（PCなど）
--------------------------------*/
@media screen and (min-width: 1024px) {
  ・ ・ ・
}