@charset "utf-8";
/* CSS Document */
/*================================
                        共通領域
=================================*/
body {
  color: #191919;
  font-family: "Montserrat", "游ゴシック";
  background: #ffffff;
}
.inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
p {
  text-align: justify;
  line-break: strict;
}
a:link,
a:visited,
a:hover,
a:active {
  color: #707070;
}
a {
  text-decoration: none;
}
/*================================
                        ローディング領域
=================================*/
/*logoの表示*/
#splash {
  /* Loading背景画面設定　*/
  position: fixed; /*fixedで全面に固定*/
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #e0e1e1;
  text-align: center;
  color: #fff;
}
#splash_logo {
  /* Loading画像中央配置　*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  /* Loading アイコンの大きさ設定*/
  width: 300px;
}
.fadeUp {
  /* fadeUpをするアイコンの動き */
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*================================
                        ヘッダー領域
=================================*/
.wrapper {
  max-width: 1200px;
  padding: 45px 48px 38px 36px;
  margin: 0 auto;
}
.header_login {
  background-color: #ffffff;
}
.header_login > .wrapper {
  height: 80px;
  display: flex;
  align-items: center;
}
.area_logo_header .logo {
  display: block;
}
.area_logo_header .logo img {
  height: 76px;
  vertical-align: bottom;
}
/* ナビゲーション */
.area_nav_header {
  margin-left: auto;
}

/* リストナビ */
.area_nav_tilte {
  align-items: center;
  color: #070303;
  font-size: 37px;
  font-weight: bold;
  letter-spacing: 0.46em;
  margin: 0 auto;
}

.list_nav_header {
  display: flex;
  align-items: center;
}

.list_nav_header > li + li {
  margin-left: 30px;
}

.list_nav_header a {
  font-size: 24px;
  font-weight: 500;
  color: #707070;
}
/* ヘッダーコピーライト */
.list_nav_copy {
  display: none;
}
/*================================
                        スライドショー領域
=================================*/
.slider {
  position: relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
  background: url(../img/slick1.jpg);
}

.slider-item02 {
  background: url(../img/slick2.png);
}

.slider-item03 {
  background: url(../img/slick3.png);
}
.slider-item04 {
  background: url(../img/slick4.png);
}

.slider-item {
  width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat; /*背景画像をリピートしない*/
  background-position: center; /*背景画像の位置を中央に*/
  background-size: cover; /*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  z-index: 3;
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc; /*矢印の色*/
  border-right: 2px solid #ccc; /*矢印の色*/
  height: 25px;
  width: 25px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -50px 0 0 0;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 12px; /*ドットボタンのサイズ*/
  height: 12px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
  opacity: 0;
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
  opacity: 0;
}
/*================================
                        メインコンテンツ領域
=================================*/
.content_wrapper {
  display: flex;
  justify-content: space-between;
  margin: 106px 0 105px;
}

.content_item img {
  width: 299px; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 557px; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  object-fit: cover;
}

.content_name,
.content_text {
  display: none;
  vertical-align: bottom;
}
/*================================
                        フッター領域
=================================*/
.footer_content {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #e0e1e1;
}
.area_nav_footer {
  margin-top: 136px;
  text-align: center;
}
.list_nav_footer {
  display: flex;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: #707070;
  padding-top: 136px;
}
.list_nav_footer > li + li {
  margin-left: 30px;
}
.area_icon_footer {
  text-align: center;
  margin: 27px 0 38px;
}
/* フッターコピーライト */
.footer_copy {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 15px;
  color: #707070;
}
/*================================
                        スマホ対応領域
=================================*/
@media screen and (max-width: 960px) {
  /*ハンバーガーメニュー*/
  .wapper {
    position: fixed;
    top: 5vw;
    right: 10vw;
  }
  .menu-btn {
    display: block;
    width: 38px;
    height: 26px;
    position: relative;
    z-index: 210;
    align-items: center;
    margin: 0 10px 0 0;
  }
  .menu-btn i {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #070303;
    transition: transform 0.5s, opacity 0.5s;
    position: absolute;
  }
  .menu-btn i:nth-child(1) {
    top: 0;
  }
  .menu-btn i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .menu-btn i:nth-child(3) {
    bottom: 0;
  }
  .menu-btn.show {
    content: "";
    right: 3px; /*(0pxで仮想コンテンツサイトと同じ場所になる)*/
    position: relative;
    font-weight: 500;
    color: #070303;
  }
  .menu-btn.show i {
    background-color: #070303;
  }
  .menu-btn.show i:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
  }
  .menu-btn.show i:nth-child(2) {
    opacity: 0;
  }
  .menu-btn.show i:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
  }
  .list_nav_header {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: #f2e9d3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s, visibility 0.7s;
    z-index: 200;
  }
  .list_nav_header li {
    margin-top: 0px;
    width: 100%;
  }
  .list_nav_header li:nth-child(1) a,
  .list_nav_header li:nth-child(2) a {
    letter-spacing: 0.2em;
  }
  .list_nav_header li a {
    color: #191919;
    font-size: 19px;
    display: block;
    padding: 5px 0;
    line-height: 120%;
  }
  .list_nav_header li a:first-child {
    margin-top: 60px;
  }
  .list_nav_header a {
    font-weight: bold;
  }
  .gnav.show {
    opacity: 1;
    visibility: visible;
  }

  .gnav img {
    margin: 0 10px -10px -20px;
  }
  .gnav span {
    font-size: 12px;
  }

  #closetext {
    content: "";
    right: 3px;
    position: absolute;
    font-weight: 500;
    color: #070303;
  }
  .list-color5 p {
    text-align: center;
    font-size: 7px;
    margin-top: 45px;
  }

  /* メインコンテンツ領域 */
  .content_wrapper {
    display: flex;
    justify-content: flex-start;
  }

  .content_item img {
    width: 250px; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 250px; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    object-fit: cover;
  }

  .content_name,
  .content_text {
    display: block;
    vertical-align: bottom;
  }
}