@charset "utf-8";

/*---------------------------------------------------------------------------------------------

ベース

---------------------------------------------------------------------------------------------*/

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.lato {
  font-family: "Lato", sans-serif;
  font-style: normal;
}

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

.navi_pc_cont {
  width: 100%;
  height: 75px;
  background: url("../img/bg_nav_pc.webp") no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  bottom: -200px;
  left: 0;
  z-index: 10;
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
}

.navi_pc_cont.show {
  bottom: 0;
  transform: translateY(0);
}

.nav_logo_pc {
  display: block;
  max-width: 260px;
  width: 20%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.nav_list_pc {
  width: 75%;
  height: 75px;
  color: #FFF;
  margin-left: 25%;
}

.nav_list_pc li {
  font-size: 1.2vw;
  margin-right: 5%;
}

.nav_list_pc li:last-child {
  margin-right: 0;
}

/* .main {
  min-width: 1240px;
} */

/* @media screen and (min-width: 769px) and (max-width: 1240px) {
  .main {
      overflow-x: scroll;
  }
} */

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

  .main {
    min-width: auto;
  }

  .head_menu_sp {
    width: 100%;
    padding: 10px;
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 12;
    background: #FFF;
    transform: translateY(-100%);
    transition: transform 0.4s ease-out;
  }

  .head_menu_sp.show {
    top: 0;
    transform: translateY(0);
  }

  .head_logo_sp {
    display: block;
    width: 50px;
  }

  .menu_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -30%;
  }

  .menu_logo_sp {
    width: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
  }

}

@media screen and (max-width: 400px) {

  .menu_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0%;
  }

}

/*---------------------------------------------------------------------------------------------

FLEX

---------------------------------------------------------------------------------------------*/

.flex {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.al-start {
  -webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.al-center {
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.jt-center {
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.jt-around {
  -ms-flex-pack: distribute;
	justify-content: space-around;
}

.jt-between {
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.jt-start {
  -webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.jt-end {
  -webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.flex_wrap {
  -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}

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

  .sp_noflex {
    display: block;
  }

  .sp_wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .sp_flexcolumn {
    flex-flow: column-reverse;  
  }

}

/*---------------------------------------------------------------------------------------------

PC

---------------------------------------------------------------------------------------------*/

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

  .onlyPC {
    display: block;
  }

  .onlySP {
    display: none !important;
  }
}

/*---------------------------------------------------------------------------------------------

TAB

---------------------------------------------------------------------------------------------*/

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

  .onlyTAB {
  display: none !important;
  }

}

@media screen and (max-width: 1240px) {

  .onlyTAB {
  display: block;
  }

}

/*---------------------------------------------------------------------------------------------

SP

---------------------------------------------------------------------------------------------*/


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

  .onlyPC {
    display: none !important;
  }

  .onlySP {
    display: block;
  }

}

/*---------------------------------------------------------------------------------------------

ハンバーガーメニュー

---------------------------------------------------------------------------------------------*/

.hamburger {
  display: block;
  position: absolute;
  z-index: 12;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 30px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 3px ;
  left    : 6px;
  background : #746A60;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
  background : #628987;
}
.hamburger span:nth-child(2) {
  top: 20px;
  background: #A59D8C;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 10;
  top  : 0;
  left : 0;
  background: #FFF;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

nav.globalMenuSp ul {
  margin: 70px auto;
  padding: 0;
  width: 100%;
  display: block;
  color: #524C46;
  font-size: 1.8rem;
}

nav.globalMenuSp ul li {
  position: relative;
  list-style-type: none;
  padding: 0;
  width: 90%;
  margin: 15px auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}

nav.globalMenuSp ul li a {
  display: block;
  padding: .8em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateY(0%);
}


/*---------------------------------------------------------------------------------------------

共通のパララックスセクション

---------------------------------------------------------------------------------------------*/

.parallax-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.parallax1 .parallax-bg {
  /* background-image: url('../img/top/bg_mv.webp'); */
}


/*---------------------------------------------------------------------------------------------

下層ページ

---------------------------------------------------------------------------------------------*/

.under_mv_cont {
  width: 100%;
  position: relative;
}

.under_mv_tit {
  color: #FFF;
  position: absolute;
  top: 30%;
  left: 10%;
}

.under_mv_tit h1 {
  font-size: 4.2rem;
  margin-bottom: 10px;
}

.under_mv_tit span {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: .1em;
}

.read_cont {
  width: 100%;
  margin: 40px auto 90px auto;
  text-align: center;
}

.read_cont h2 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: .1em;
}

.under_head_wrap {
  position: relative;
  margin-top: 50px;
}

.under_head_shape {
  position: absolute;
  width: 230px;
  top: -85px;
  left: -65px;
  z-index: 0;
}

.under_head_tit {
  font-size: 6.2rem;
  letter-spacing: .15em;
  font-weight: 300;
  margin-bottom: 15px;
}

.under_head_tit span {
  color: #628987;
}

.under_head_sub {
  font-size: 3.2rem;
}

.under_head_coution {
  font-size: 1.4rem;
  margin-left: 20px;
}

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

  .under_mv_cont img {
    width: 100%;
  }

  .under_mv_tit {
    top: auto;
    bottom: 20%;
    left: 5%;
  }

  .under_mv_tit h1 {
    font-size: 2.8rem;
  }

  .under_mv_tit span {
    font-size: 1.4rem;
  }

  .read_cont {
    width: 90%;
  }

  .read_cont h2 {
    font-size: 1.6rem;
    letter-spacing: 0;
  }


}

/*---------------------------------------------------------------------------------------------

フッター

---------------------------------------------------------------------------------------------*/

.foot_cont {
  position: relative;
  width: 100%;
  background: url("../img/bg_footer_pc.webp") no-repeat;
  background-size: cover;
  background-position: top center;
  color: #FFF;
  padding-top: 170px;
  padding-bottom: 80px;
}

.foot_logo {
  width: 100%;
  text-align: center;
}

.foot_logo img {
  max-width: 160px;
}

.foot_navi {
  margin-top: 80px;
  font-size: 1.8rem;
  font-weight: 300;
}

.foot_navi li {
  padding: 0 25px;
  position: relative;
}

.foot_navi li::after {
  position: absolute;
  content: "｜";
  top: 0;
  right: -1rem;
  font-size: 1.8rem;
}

.foot_navi li:last-child:after {
  display: none;
}

.foot_navi li a {
  opacity: 1;
  transition: .3s;
}

.foot_navi li a:hover {
  opacity: .6;
}

.foot_copy {
  margin-top: 80px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
}

.top_btn {
  position: absolute;
  width: 100px;
  top: 5%;
  right: 5%;
}

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

  .foot_navi {
    flex-wrap: wrap;
    width: 50%;
    margin: auto;
    margin-top: 80px;
    justify-content: space-between !important;
  }

}

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

.foot_cont {
  background: url("../img/bg_footer_sp.webp") no-repeat;
  background-size: cover;
  background-position: top center;
  padding-top: 110px;
  padding-bottom: 40px;
}

.foot_logo img {
  max-width: 120px;
}

.foot_navi {
  flex-wrap: wrap;
  width: 85%;
  margin: auto;
  margin-top: 80px;
  justify-content: space-between !important;
}

.foot_navi li {
  text-align: center;
  margin-bottom: 25px;
  padding: 0;
}

.foot_navi li:first-child:after,
.foot_navi li:nth-of-type(3):after,
.foot_navi li:nth-of-type(4):after {
  display: none;
}

.sp_col_1 {
  width: 100%;
}

.sp_col_2 {
  width: 50%;
}

.top_btn {
  width: 63px;
  top: 0;
}

}

@media screen and (max-width: 400px) {

  .foot_navi {
  flex-wrap: wrap;
  width: 85%;
  margin: auto;
  margin-top: 80px;
  justify-content: space-between !important;
  }

}