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

/* ---------------------------------------------------------- base */
body {
  background-color: #EDEAE5;
  font-family: "Shippori Mincho", serif;
  font-size: .75em;
  font-weight: 400;
  color: #372E1E;
}

.pc,
.pcImg {
  display: none;
}

a {
  transition: all .4s ease;
}
a:hover {
  opacity: .6;
}

@media screen and (min-width: 768px) {
  body {
    font-size: .875em;
  }

  .pc {display: block;}
  .pcImg {display: inline;}
  .sp,
  .spImg {display: none;}
}

.noLink {
  opacity: .4;
  pointer-events: none;
}


/* ---------------------------------------------------------- header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 24px 16px 0 32px;
  z-index: 1000;
}
.header .logo {
  margin-right: auto;
}
.header .header-nav .nav-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.header .header-nav .nav-list li a {
  font-size: .9em;
  letter-spacing: .09em;
  font-family: "Sorts Mill Goudy", serif;
}
.header .header-nav .nav-list .ico {
  width: 32px;
  height: 32px;
}
.header .header-nav .nav-list .ico a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .header {
    padding: 40px 80px 0;
  }
  .header .logo img {
    width: 80px;
  }
  .header .header-nav .nav-list li:nth-child(2) {
    margin: 0 32px;
  }
  .header .header-nav .nav-list li a {
    font-size: 1.1428em;
  }
  .header .header-nav .nav-list .ico {
    width: 40px;
    height: 40px;
  }
  .header .header-nav .nav-list .ico a img {
    width: 20px;
  }
}


/* ---------------------------------------------------------- mainContents */
.mainContents h1,
.mainContents h3 {
  line-height: 1.5;
  margin-bottom: 2.5em;
  font-size: 1.1428em;
  letter-spacing: .06em;
  font-weight: 500;
}
.mainContents h2 {
  line-height: 1.5;
  font-size: 1.1428em;
  letter-spacing: .09em;
  font-family: "Sorts Mill Goudy", serif;
  writing-mode: sideways-lr;
  font-weight: 500;
  color: #9D8B69;
}

.mainContents p {
  line-height: 2.24;
  letter-spacing: .05em;
}
.mainContents p + p {
  margin-top: 1.714em;
}

.mainContents .btn1,
.mainContents .btn2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  line-height: 1.5;
  letter-spacing: .05em;
}
.mainContents .btn1 {
  width: 216px;
  height: 48px;
  border: 1px solid #615643;
}
.mainContents .btn2 {
  width: fit-content;
  padding-bottom: 8px;
  border-bottom: 1px solid #615643;

}
.mainContents .btn1:after,
.mainContents .btn2:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 12px solid #bab2a5;
  border-right: 0;
} 


/* ---------------------------------------------------------- fv */
.fv {
  min-height: 100vh;
}
.fv .fv-wrapper {
  margin: 22.5vh 0 0 30vw;
}
.fv .fv-image {
  width: 40vw;
  height: 64.72vw;
  line-height: 0;
  margin-bottom: 24px;
  opacity: 0;
}
.fv .fv-image img {
  width: 100%;
}
.fv .catch-txt {
  margin-left: 8vw;
}
.fv .catch-txt h1,
.fv .catch-txt p {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .fv .fv-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 57.738vw;
    margin: calc((100vh - 17.5vw) / 2) auto 0;
  }
  .fv .fv-image {
    width: 100%;
    height: 17.5vw;
    margin-bottom: 56px;
  }
  .fv .catch-txt {
    margin-left: 0;
  }
}


/* ---------------------------------------------------------- section */
.cont-sec {
  display: flex;
  flex-wrap: wrap;
  max-width: 1280px;
  position: relative;
  margin: 0 auto;
  padding: 74.667vw 40px;
}
.atmosphere {
  justify-content: center;
}
.ritual {
  justify-content: flex-end;
}
.action {
  padding-bottom: 120px;
}

.cont-sec .wrapper {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.action figure {
  line-height: 0;
  margin-bottom: 40px;
}
.action .btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
.action .faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 64px;
  padding-left: calc(16.2px + 24px);
}
.action .faq li {
  border-left: 1px solid #BAB2A5;
  padding-left: 16px;
}
.action .faq li h4 {
  line-height: 1.5;
  margin-bottom: 2.28em;
  letter-spacing: .05em;
  font-weight: 500;
}
.action .faq li p {
  line-height: 2;
}

.cont-sec .sec-ph {
  position: absolute;
}
.cont-sec .sec-ph.ph1 {
  top: 3vw;
  right: 3vw;
  width: 50vw;
}
.cont-sec .sec-ph.ph2 {
  top: 17vw;
  right: 17vw;
  width: 50vw;
  z-index: -1;
}
.cont-sec .sec-ph.ph3 {
  bottom: 20vw;
  right: 20vw;
  width: 30vw;
}
.cont-sec .sec-ph.ph4 {
  top: 15vw;
  left: 10vw;
  width: 29.289vw;
}
.cont-sec .sec-ph.ph5 {
  bottom: 15vw;
  right: 6vw;
  width: 61.5vw;
}
.cont-sec .sec-ph.ph6 {
  top: -2vw;
  left: 17vw;
  width: 30vw;
}
.cont-sec .sec-ph.ph7 {
  top: 15vw;
  left: 4vw;
  width: 32vw;
}
.cont-sec .sec-ph.ph8 {
  bottom: 20vw;
  right: 40vw;
  width: 25vw;
}

@media screen and (min-width: 768px) {
  .cont-sec {
    padding-top: 320px;
    padding-bottom: 320px;
  }
  .philosophy {
    padding-top: 560px;
  }
  .action {
    padding-bottom: 240px;
  }

  .cont-sec .wrapper {
    gap: 32px;
  }

  .ritual {
    padding-right: 120px;
  }

  .action {
    justify-content: center;
  }
  .action .product {
    display: flex;
    justify-content: center;
    gap: 80px;
  }
  .action figure img {
    width: 225px;
  }
  .action .btns {
    flex-direction: row;
    align-items: flex-end;
    gap: 36px;
    margin-top: 56px;
  }
  .action .faq {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 80px;
    margin-top: 120px;
    padding-left: 0;
  }
  .action .faq li {
    padding-left: 32px;
  }

  .cont-sec .sec-ph.ph1 {
    width: 20.89vw;
    max-width: 351px;
  }
  .cont-sec .sec-ph.ph2 {
    width: 20.89vw;
    max-width: 351px;
  }
  .cont-sec .sec-ph.ph3 {
    width: 12.5595vw;
    max-width: 211px;
  }
  .cont-sec .sec-ph.ph4 {
    width: 12.261vw;
    max-width: 206px;
  }
  .cont-sec .sec-ph.ph5 {
    width: 25.714vw;
    max-width: 432px;
  }
  .cont-sec .sec-ph.ph6 {
    width: 12.5595vw;
    max-width: 211px;
  }
  .cont-sec .sec-ph.ph7 {
    width: 13.392vw;
    max-width: 225px;
  }
  .cont-sec .sec-ph.ph8 {
    width: 10.357vw;
    max-width: 174px;
 }
}

@media screen and (min-width: 1200px) {
  .cont-sec .sec-ph.ph1 {
    top: 360px;
    right: 0;
  }
  .cont-sec .sec-ph.ph2 {
    top: 456px;
    right: 100px;
  }
  .cont-sec .sec-ph.ph3 {
    bottom: 54px;
    right: 232px;
  }
  .cont-sec .sec-ph.ph4 {
    top: -15px ;
    left: 94px;
  }
  .cont-sec .sec-ph.ph5 {
    bottom: calc(50% - 80px);
    right: 0;
    transform: translateY(-50%);
  }
  .cont-sec .sec-ph.ph6 {
    top: -15px;
    left: 200px;
  }
  .cont-sec .sec-ph.ph7 {
    top: 80px;
    left: 108px;
  }
  .cont-sec .sec-ph.ph8 {
    bottom: 108px;
    right: 450px;
 }
}

@media screen and (min-width: 1540px) {
  .cont-sec .sec-ph.ph1 {
    right: -140px;
  }
  .cont-sec .sec-ph.ph2 {
    right: -44px;
  }
  .cont-sec .sec-ph.ph5 {
    right: -120px;
  }
}


/* ---------------------------------------------------------- footer */
.footer {
  padding: 40px 24px;
  background-color: #211B3F;
  color: #fff;
}
.footer .wrapper {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.footer .wrapper h2 {
  margin-bottom: 1.6em;
  line-height: 1.5;
  font-size: 1.0714em;
  letter-spacing: .06em;
}
.footer .wrapper p {
  line-height: 2;
  font-size: .857em;
  letter-spacing: .048em;
}

@media screen and (min-width: 768px) {
  .footer {
    padding: 80px 40px;
  }
  .footer .wrapper {
    gap: 56px;
  }
  .footer .logo img {
    width: 56px;
  }
}


/* ---------------------------------------------------------- scrollInAnim */
.scrollInAnim {
  opacity: 0;
  transition: 1s cubic-bezier(.81,.01,.93,.72) all;
}
.scrollInAnim.sec-ph {
  transition: .5s cubic-bezier(.81,.01,.93,.72) all;
}
.scrollInAnim.isScroll {
  opacity: 1;
}


/* ---------------------------------------------------------- bg */
.bg1,
.bg2 {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  will-change: transform;  /* Safariの描画を安定させるヒント */
}
.bg1 {
  background: url(../images/bg1.png) center center / 1200px auto no-repeat;
}
.bg2 {
  background: url(../images/bg2.png) left bottom / 110% auto no-repeat;
}

@media screen and (min-width: 768px) {
  .bg1 {
    background-size: cover;
  }
  .bg2 {
    background-size: 100% auto;
  }
}