@charset "utf-8";

/* CSS Document */
html {
  font-size: 62.5%;
  /* 16px * 62.5% = 10px */
  box-sizing: border-box;
  /*要素の幅と高さにpaddingとborderを含める。(幅や高さの計算をするときにpaddingとborderが含まれていないと面倒なので)*/
}

*,
::before,
::after {
  box-sizing: inherit;
  /* 全ての要素と擬似要素のbefore&afterにも↑の指定を継承する。(継承するようにしておけば、外部のCSSなどを読み込んだときにbox-sizingの指定があったら、それが優先して効くようになる)*/
}

main {
  overflow-x: hidden;
  /*意図しない横スクロールが出ないようにする。(SPで見たとき)*/
}

li {
  list-style: none;
  /*リストの先頭につく「・」を削除する*/
}

a {
  color: inherit;
  /*リンクのデフォルトの色(青)を親要素から継承した色にする。(親要素のどこかでcolorを指定していたらその色に、どこでも指定していなければhtmlの初期値である黒になる)*/
  text-decoration: none;
  /*リンクの下線を削除する。*/
}

img {
  height: auto;
  /*高さを自動にする。*/
  max-width: 100%;
  /*画像の幅が画面の幅より大きくならないようにする。(widthでもほぼ同じだが、max-width: 100%で指定しておけばその画像本来の幅以上にもならない)*/
  vertical-align: middle;
  /*画像の下に余白ができるのを防ぐ。*/
}

h2,
h3,
h4 {
  font-weight: inherit;
}

picture {
  text-align: center;
}



/* 文字の色設定 */
body {
  color: #021728;
}

.white {
  color: #ffffff;
  /* RGB */
}


/* フォントの設定 */
body {
  font-family: shippori-mincho, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5px;
}

.nav-eg,
.section__title-eg {
  font-family: cormorant-garamond, serif;
  font-weight: 400;
  font-style: normal;
}


/* 背景 */
body::before {
  background-image: url("/assets/images/bg--sp.jpg");
  background-repeat: no-repeat;
  /* 擬似要素に背景画像 */
  background-size: cover;
  /* cover指定 */
  content: "";
  /* 画像を表示させる為に必要*/
  display: block;
  /*ブロックボックスで表示*/
  position: fixed;
  /* 擬似要素全体を固定 */
  width: 100%;
  /* 横幅を画面全体 */
  height: 100vh;
  /* 縦幅を画面全体 */
  top: 68px;
  /* 上からの配置を0 */
  left: 0;
  /* 左からの配置を0 */
  z-index: -1;
  /*背景画像になるように重ね順を-1*/
}

@media (min-width:750px) {
  body::before {
    background-image: url("/assets/images/bg--pc.jpg");
    top: 0;
  }
}


/* 影の付くところ */
.shadow {
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.2));
}



/* ↓　header　↓ */
.header__sp {
  position: fixed;
  /* スクロールした時に追従してくるようにする。 */
  height: 68px;
  width: 100%;
  background-color: #021728;
  z-index: 1;
}

.logo-horizontal {
  width: 135px;
  position: absolute;
  top: 12px;
  left: 30px;
  z-index: 0;
}

.button--tel--small {
  position: absolute;
  right: 86px;
  top: 15px;
  width: 40px;
  border: 1px solid;
  padding: 9px;
}

@media (min-width:1060px) {
  .sp {
    display: none;
  }

  .header__pc {
    height: 100px;
    width: 100%;
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .later {
    background-color: #021728;
    height: 100px;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: 0.6s;
    pointer-events: none;
  }

  .later.active {
    opacity: 1;
    transition: 0.6s;
    pointer-events: auto;
  }

  .logo-horizontal {
    width: 212px;
  }

  .globalMenuPc ul {
    display: flex;
    height: 100px;
    align-items: center;
    text-align: center;
    padding-right: 381px;
  }

  .globalMenuPc--contents.button--tel--big {
    margin: 10px 10px;
  }

  .globalMenuPc--contents {
    width: 115px;
    padding: 18px 0;
    transition: 0.6s;
  }

  .globalMenuPc--contents:hover {
    background-color: #ffffff;
    color: #021728;
    transition: 0.6s;
  }

  .globalMenuPc--contents.now {
    background-color: #ffffff;
    color: #021728;
    transition: 0.6s ease 0s;
  }

  .globalMenuPc--contents .nav-eg {
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .globalMenuPc--contents .nav-jp {
    font-size: 1.4rem;
    letter-spacing: 1.5px;
  }

  .button--tel--big.pc {
    margin-right: 10px;
    z-index: 3;
  }
}

/* ↓　ハンバーガーメニュー　↓ */
/*　ハンバーガーボタン　*/
.hamburger {
  display: block;
  position: fixed;
  right: 30px;
  top: 15px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  z-index: 9999;
}

.hamburger span {
  display: block;
  position: absolute;
  width: 40px;
  -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) {
  height: 1px;
  background: #ffffff;
}

.hamburger span:nth-child(2) {
  top: 16px;
  font-family: 'cormorant-garamond';
  font-size: 1.2rem;
}

.hamburger span:nth-child(3) {
  height: 1px;
  background: #ffffff;
  top: 39px;
}

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

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

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

@keyframes active {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.globalMenuSp {
  position: fixed;
  top: 0;
  right: 0;
  color: #ffffff;
  background-color: #021728;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: 0.4s all;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

nav.globalMenuSp.active {
  animation: active 0.6s linear 0s;
  pointer-events: auto;
  z-index: 1000;
  opacity: 1;
}


nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.globalMenuSp--flex1 li {
  list-style-type: none;
  width: 100%;
  /* transition: 0.4s all; */
}

.globalMenuSp--flex1 li:not(:last-child) {
  margin-bottom: 40px;
}

.globalMenuSp--flex1 li:last-child {
  margin-bottom: 60px;
}

.globalMenuSp--flex1 li a .nav-eg {
  color: #ffffff;
  font-size: 2.2rem;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.globalMenuSp--flex1 li a .nav-jp {
  font-size: 1.4rem;
  letter-spacing: 1.5px;
}


/* 電話をかけるボタン */
.button--tel--big_wrapper {
  display: inline-flex;
  border: #ffffff 1px solid;
  padding: 0 16px 0 23px;
  width: 344px;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  transition: 0.6s;
}

.button--tel--big__left {
  font-size: 1.6rem;
  letter-spacing: 1px;
  line-height: 2.7rem;
  padding-top: 6px;
}

.button--tel--big__right {
  text-align: center;
}

.button--tel--big__right1 {
  font-size: 2.6rem;
  letter-spacing: 2px;
  line-height: 3rem;
  margin-bottom: 6px;
}

.button--tel--big__right2 {
  font-size: 1.4rem;
  letter-spacing: 1.5px;
}

.button--tel--big__right2 span {
  letter-spacing: 0px;
}

.button--tel--big.sp .button--tel--big_wrapper {
  margin: 0 auto 25px;
}

.button--tel--big_wrapper:hover {
  background-color: #ffffff;
  color: #021728;
  transition: 0.6s;
}

.icon--wrapper {
  display: flex;
}

.button--instagram {
  width: 35px;
}

.button--twitter {
  width: 35px;
  margin-left: 42px;
}

.button--instagram:hover,
.button--twitter:hover {
  opacity: 0.7
}

/* ハンバーガーメニュー開いてるとき背景スクロールしない */
body.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
}

@media (min-width:1060px) {
  nav.globalMenuSp {
    display: block;
    top: 0;
    right: 0;
    width: 170px;
    padding: 40px;
    background-color: transparent;
    transition: opacity .6s ease, visibility .6s ease;
  }

  nav.globalMenuSp ul li a {
    font-size: 1.7rem;
    padding: 0.5em 0;
  }

  body.fixed {
    position: inherit;
  }
}




/*　↓ footer ↓  */
footer {
  padding: 30px 0 13px;
}

.logo-vertical {
  width: 135px;
  display: block;
  margin: 0 auto 42px;
}

.copyright {
  font-size: 1rem;
  text-align: center;
  display: block;
}

@media (min-width:1060px) {
  footer {
    padding: 38px 0 31px;
    position: relative;
  }

  .logo-vertical {
    position: absolute;
    top: 40px;
    left: 121px;
    width: 250px;
  }

  .globalMenuPc.footer ul {
    padding-right: 0;
    align-items: flex-start;
    justify-content: center;
  }

  .footer_right {
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .button--tel--big.footer {
    margin: 0 0 65px 0;
  }

  .icon--wrapper.pc {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
  }


  .copyright {
    font-size: 1rem;
    text-align: center;
    display: block;
  }

}