@charset "UTF-8";
/* CSS Document */
.main-visual {
  width: 100%;
  height: 100vh;
  background-image: url("../images/top/main-visual.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 56% 50%;
  position: relative;
}
@media(min-width: 600px) {
  .main-visual {
    height: 60vh;
  }
}
@media(min-width: 900px) {
  .main-visual {
    max-width: 1330px;
    height: 70vh;
    margin: 0 auto;
  }
}
@media(min-width: 1024px) {
  .main-visual {
    background-position: 56% 30%;
  }
}
/*花吹雪のCSS指定ここから*/
#particles-js {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.main-visual__title, .blurTrigger, .h2-garamond, .section-top h3, .menu__button-more {
  font-family: 'Cormorant Garamond', serif;
}
/*メインビジュアルの名前は画面幅で位置とサイズを変えていく*/
#name-wrapper {
  color: #333;
  font-size: 1.8rem;
  text-align: left;
  letter-spacing: .2em;
  position: absolute;
  top: 24%;
  left: 6%;
  z-index: 3;
}
@media(min-width: 426px) {
  #name-wrapper {
    font-size: 2.0rem;
    left: 10%;
  }
}
@media(min-width: 600px) {
  #name-wrapper {
    font-size: 2.2rem;
    top: 40%;
    left: 14%;
  }
}
@media(min-width: 769px) {
  #name-wrapper {
    font-size: 2.4rem;
    line-height: 1.6;
    top: 50%;
    left: 18%;
  }
}
@media(min-width: 1025px) {
  #name-wrapper {
    font-size: 2.6rem;
  }
}
/*↑メインビジュアル名前の指定ここまで*/
/*名前ふわっとここから*/
.blurTrigger {
  animation-name: blurAnime;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
}
/*ふわっと出現*/
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
.blurTrigger {
  opacity: 0;
}
/*スクロールダウンここから*/
/*スクロールダウン全体の場所*/
.scrolldown2 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 20px;
  left: 50%;
}
/*Scrollテキストの描写*/
.scrolldown2 span {
  /*描画位置*/
  position: absolute;
  left: 10px;
  bottom: 10px;
  /*テキストの形状*/
  color: #BD9899;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #BD9899;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
/* 線の描写 */
.scrolldown2:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 50px;
  background: #BD9899;
}
/*↑ここまで*/
@media(min-width: 600px) {
  .scrolldown2 {
    display: none;
  }
}
.section-top {
  width: 100%;
  margin: 120px 0px;
}
.section-top-wrap {
  margin: 0 auto 40px;
}
.section-top-wrap h2 {
  color: #D3A5AF;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: .3em;
  line-height: 2;
}
.section-top-wrap h3 {
  color: #D8D8D8;
  font-size: 2.4rem;
  font-weight: 200;
  letter-spacing: .4em;
  text-align: center;
  padding-bottom: 50px;
}
.section-top-wrap p {
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: .3em;
  line-height: 1.6;
  padding-bottom: 40px;
}
@media(min-width: 769px) {
  .section-top-wrap h2 {
    font-size: 2.0rem;
  }
  .section-top-wrap h3 {
    font-size: 3.2rem;
  }
  .section-top-wrap p {
    font-size: 1.6rem;
  }
}
.section-works {
  width: 100%;
  margin-bottom: 140px;
  background-image: url("../images/top/bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.section-works__bg-filter {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}
.h2-garamond {
  color: #333;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: .2em;
  text-align: left;
  padding: 24px 186px 40px 60px;
  position: relative;
}
/*h2前の線のあしらい*/
.h2-garamond:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 40px;
  width: 1px;
  height: 90px;
  background: #333;
}
@media (min-width: 769px) {
  .h2-garamond {
    margin: 0px 100px 0px 100px;
  }
}
@media (min-width: 1440px) {
  .h2-garamond {
    margin-left: 240px;
  }
}
.works-slide {
  width: 350px;
  margin: 0 auto;
}
.section-works__slide {
  width: 326px;
  height: 300px;
  margin: 30px 10px 60px;
}
.section-works__slide img {
  width: 100%;
}
.button-slide {
  padding-bottom: 80px;
}
@media(min-width: 768px) {
  .works-slide {
    width: 70%;
    margin: 0 auto;
  }
}
.section-works__slide {
  width: 326px;
  height: 300px;
  margin: 30px 10px 60px;
}
.section-works__slide img {
  width: 100%;
}
.button-slide {
  padding-bottom: 80px;
}
.section-menu {
  width: 100%;
  margin-bottom: 130px;
}
.flex-menu__middle li {
  max-width: 375px;
  height: 400px;
  list-style: none;
  position: relative;
  margin: 0 auto 60px;
}
.flex-menu__middle li img {
  width: 100%;
}
.section-menu__detail {
  width: 314px;
  height: 220px;
  background-color: rgba(248, 248, 248, 0.6);
  position: absolute;
  top: 42%;
  left: 5%;
}
.section-menu__detail h3 {
  color: #333;
  font-size: 1.6rem;
  font-weight: 200;
  letter-spacing: .2em;
  line-height: 1.2;
  text-align: center;
  padding: 20px;
}
.section-menu__detail p {
  font-size: 1.4rem;
  text-align: left;
  letter-spacing: .2em;
  padding: 0 4px 20px;
}
@media (min-width: 360px) {
  .section-menu__detail {
    top: 46%;
    left: 8%;
  }
}
@media(min-width: 769px) {
  .flex-menu__middle {
    max-width: 1000px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
  }
}
/*枠がないタイプの共通MOREボタン*/
.menu__button-position {
  text-align: center;
}
.menu__button-more {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: rgba(255, 255, 255, 0);
  padding: 8px 30px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 1.4rem;
  color: #626262;
  letter-spacing: .2em;
  /*ボタンアニメーション*/
  transition: all .2s linear;
}
.menu__button-more:hover {
  color: #d8d8d8;
}
/*矢印の形状*/
.menu__button-more::before {
  content: "";
  /*下線の位置*/
  position: absolute;
  top: 50%;
  right: -40px;
  /*下線の見た目*/
  width: 50px;
  height: 1px;
  background: #8f8f8f;
  /*ボタンアニメーション*/
  transition: all .2s linear;
}
.menu__button-more::after {
  content: "";
  /*矢印の位置*/
  position: absolute;
  top: 26%;
  right: -36px;
  /*矢印の見た目*/
  width: 1px;
  height: 10px;
  background: #8f8f8f;
  transform: skewX(45deg);
  /*アニメーションの指定*/
  transition: all .2s linear;
}
/*hover時の移動*/
.menu__button-more:hover::before {
  right: -60px;
}
.menu__button-more:hover::after {
  right: -56px;
}
/*↑ボタンの指定ここまで*/
.section-voice {
  width: 100%;
  background-color: #fafafa;
  padding-bottom: 100px
}
.section-voice__wrap {
  margin-bottom: 80px;
}
.section-voice__name-wrap, .section-voice__name-wrap-reverse {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.section-voice__name-wrap img, .section-voice__name-wrap-reverse img {
  width: 120px;
  height: 120px;
  margin-right: 20px;
}
.section-voice__name-wrap-title {
  text-align: left;
  font-size: 1.6rem;
  letter-spacing: .2em;
  line-height: 1.2;
  padding-top: 60px;
}
.name-wrap-title__font {
  font-size: 1.4rem;
}
.section-voice__wrap h3 {
  color: #838383;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-align: center;
  margin: 20px 12px;
}
.section-voice__sentence-wrap {
  margin-bottom: 60px;
}
.section-voice__wrap-detail {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: left;
  background-color: #FFF;
  padding: 20px 12px;
}
.section-voice__name-wrap-reverse {
  flex-direction: row-reverse;
}
.section-voice__name-wrap-reverse img {
  margin-left: 40px;
}
@media (min-width: 769px) {
  .section-voice__wrap {
    display: flex;
    justify-content: space-around;
    max-width: 1000px;
    margin: 0 auto;
  }
  .section-voice__flex-wrap {
    max-width: 380px;
  }
  .section-voice__flex-wrap-pc {
    padding-top: 86px;
    margin-right: 0px;
  }
}