@charset "UTF-8";
#loading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #d3d3d3;
  text-align: center;
  color: #f5f5f5;
}
#loading_logo {
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loading_logo img {
  width: 250px;
}
@media (min-width:768px) {
  #loading_logo img {
    width: 280px;
  }
}
@media (min-width:1024px) {
  #loading_logo img {
    width: 350px;
  }
}
.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);
  }
}
.loading-bg {
  display: none;
}
/*bodyにappearクラスがついたら出現*/
body.appear .loading-bg {
  display: block;
  content: "";
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background-color: #f5f5f5;
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes PageAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
#wrapper {
  opacity: 0;
}
body.appear #wrapper {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.top {
  padding: 66px 20px 0;
}
.header-img {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.header-img img {
  width: 100%;
  height: 82vh;
  max-height: 945px;
  object-fit: cover;
  object-position: 46% 100%;
}
@media(min-width: 768px) {
  .top {
    padding: 66px 80px 0;
  }
  .header-img {
    margin: 0 auto;
    width: 90%;
  }
  .header-img img {
    width: 100%;
    height: 83vh;
    object-position: 100% 25%;
    ;
  }
}
@media(min-width: 1440px) {
  .header-img {
    width: 80%;
  }
  .header-img img {
    object-position: 100% 25%;
    ;
  }
}
/*スクロールダウン全体の場所*/
.scrolldown1 {
  position: absolute;
  bottom: 20px;
  left: 10%;
  height: 95px;
}
/*Scrollテキストの描写*/
.scrolldown1 span {
  display: block;
  position: absolute;
  bottom: 30px;
  color: #fff;
  font-size: 12px;
  font-family: cormorant-garamond, serif;
  font-weight: 300;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  left: 0;
  width: 0.8px;
  height: 80px;
  background: #fff;
  animation: pathmove 2s ease-in-out infinite;
  opacity: 0;
}
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 60px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 95px;
    opacity: 0;
  }
}
#main {
  background: linear-gradient(#ffffff 40%, #d3d3d3);
}
.animation {
  opacity: 0;
  visibility: hidden;
  transition: 1.3s;
  transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scrollanime {
  opacity: 0;
} /*一瞬表示されるのを防ぐ*/
.section-apparel {
  padding: 50px 20px 0;
  margin: 0 auto;
  max-width: 1160px;
}
.apparel-right {
  display: none;
}
.apparel-photo {
  overflow: hidden;
  width: 100%;
}
.apparel-photo img {
  width: 115%;
  height: auto;
  object-fit: cover;
  object-position: top;
  transition: all 1s 0s ease;
  transform: scale(1.0, 1.0);
  vertical-align: bottom;
}
.apparel-title, .cosmetic-title, .portrait-title, .ad-title {
  margin: 10px 0 20px;
  text-align: left;
}
.section-apparel h2, .section-cosmetics h2, .section-portrait h2, .section-ad h2 {
  font-size: 1.2rem;
  font-family: montserrat;
  font-weight: 500;
}
.section-apparel h2 span, .section-cosmetics span, .section-portrait span, .section-ad span {
  font-size: 1.1rem;
  font-family: montserrat;
  font-weight: 500;
  display: inline-block;
  color: #b2ada7;
  margin-right: 10px;
}
.view-more {
  font-size: 1.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  text-align: left;
}
.view-more a {
  position: relative;
  display: inline-block;
  color: #595959;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #b2ada7;
  padding-bottom: 2px;
}
.view-more a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #b2ada7;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.view-more a:hover {
  border: none;
  color: #b2ada7;
}
.view-more a:hover::after {
  width: 150%;
}
.fade {
  opacity: 0;
  transition: opacity 2s;
}
.fade.view {
  opacity: 1;
}
@media(min-width:768px) {
  .section-apparel {
    display: flex;
    padding: 70px 60px 0px;
    margin: 0 auto;
  }
  .apparel-left {
    width: 50%;
    margin-right: 30px;
  }
  .apparel-right {
    width: 50%;
    display: block;
    margin-top: 110px;
    margin-left: 30px;
  }
  .apparel-photo {
    width: 100%;
    text-align: right;
  }
  .apparel-photo img {
    width: 70%;
    height: auto;
  }
  .apparel-photo-rt {
    width: 100%;
    text-align: left;
    overflow: hidden;
  }
  .apparel-photo-rt img {
    width: 70%;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: all 1s 0s ease;
    transform: scale(1.0, 1.0);
    vertical-align: bottom;
  }
  .apparel-photo img:hover, .apparel-photo-rt img:hover, .cosmetic-photo img:hover, .cosme-conright img:hover, .ad-photo img:hover, .portrait-photo img:hover {
    transform: scale(1.1, 1.1);
  }
  .apparel-mo-title {
    display: none;
  }
  .apparel-pc-title {
    margin-top: 15px;
    width: 70%;
    text-align: right;
  }
  .section-apparel h3 {
    font-size: 1.5rem;
    font-family: montserrat;
    font-weight: 500;
    text-align: right;
  }
  .section-apparel h3 span {
    font-size: 1.2rem;
    font-family: montserrat;
    font-weight: 500;
    display: inline-block;
    color: #b2ada7;
    margin-right: 10px;
  }
  .apparel-title-content {
    margin-top: 15px;
    text-align: center;
  }
  .view-more.ap {
    text-align: right;
    margin-top: 25px;
    font-size: 2rem;
  }
  .view-more a {
    font-weight: 300;
  }
}
@media(min-width: 1440px) {
  .section-apparel {
    padding: 100px 60px 80px;
  }
  .view-more.ap {
    text-align: right;
    margin-top: 25px;
    font-size: 2.3rem;
  }
  .view-more {
    text-align: right;
    margin-top: 25px;
    font-size: 2.3rem;
  }
}
.section-cosmetics {
  padding: 60px 20px 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 1160px;
}
.cosmetic-pc-title {
  display: none;
}
.cosme-conleft {
  flex: 5;
  width: 100%;
  margin-right: 20px;
}
.cosmetic-photo {
  overflow: hidden;
  width: 100%;
  text-align: left;
}
.cosmetic-photo img {
  width: 115%;
  height: 35vh;
  object-fit: cover;
  object-position: center;
  transition: all 1s 0s ease;
  transform: scale(1.0, 1.0);
}
.cosme-conright {
  flex: 5;
  width: 100%;
  text-align: right;
}
.cosme-photo-rt {
  overflow: hidden;
}
.cosme-conright img {
  width: 100%;
  height: 35vh;
  object-fit: cover;
  object-position: center;
  transition: all 1s 0s ease;
  transform: scale(1.0, 1.0);
}
@media (min-width:768px) {
  .section-cosmetics {
    padding: 80px 60px 100px;
  }
  .cosme-conleft {
    width: 50%;
    margin-right: 30px;
  }
  .cosmetic-mo-title {
    display: none;
  }
  .cosmetic-pc-title {
    display: block;
  }
  .cosmetic-pc-title {
    margin-top: 15px;
  }
  .section-cosmetics h3 {
    font-size: 1.5rem;
    font-family: montserrat;
    font-weight: 500;
  }
  .section-cosmetics h3 span {
    font-size: 1.2rem;
    font-family: montserrat;
    font-weight: 500;
    display: inline-block;
    color: #b2ada7;
    margin-right: 10px;
  }
  .cosmetic-title-content {
    margin-top: 15px;
  }
  .view-more.cosme.pc {
    margin-top: 25px;
    font-size: 2rem;
    text-align: right;
  }
  .cosmetic-photo {
    width: 100%;
    text-align: left;
    margin-top: 105px;
  }
  .cosmetic-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  .cosme-conright {
    width: 100%;
    display: block;
    margin-left: 30px;
    text-align: right;
  }
  .cosme-conright img {
    width: 70%;
    height: auto;
  }
}
@media (min-width:1440px) {
  .section-cosmetics {
    padding: 40px 60px 60px;
  }
  .view-more.cosme.pc {
    font-size: 2.3rem;
  }
}
.section-ad {
  padding: 80px 20px 0;
  max-width: 1160px;
  margin: 0 auto;
}
.ad-photo {
  width: 100%;
}
.ad-photo img {
  width: 100%;
  max-width: 750px;
  height: 38vh;
  max-height: 600px;
  object-fit: cover;
  object-position: center;
  transition: all 1s 0s ease;
  transform: scale(1.0, 1.0);
}
.box {
  position: relative;
  overflow: hidden;
}
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#f2f2f2 50%, #e8e8e8);
  transition: 1.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.screen1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e0e0e0;
  transition: 1.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.screen.show, .screen1.show {
  transform: translateX(100%);
}
@media(min-width: 768px) {
  .section-ad {
    padding: 0px 60px 0;
  }
  .ad-content {
    width: 85%;
    text-align: right;
    margin-left: 15%;
  }
  .ad-title-wrapper {
    width: 100%;
    text-align: right;
  }
  .ad-title {
    margin-top: 15px;
  }
  .section-ad h2 {
    font-size: 1.5rem;
    text-align: right;
  }
  .section-ad h2 span {
    font-size: 1.2rem;
    text-align: right;
  }
  .ad-photo {
    overflow: hidden;
    width: 75%;
    text-align: right;
    margin-left: 25%;
  }
  .ad-photo img {
    height: auto;
    width: 100%;
    object-fit: cover;
    object-position: left;
    position: relative;
    text-align: right;
  }
  .view-more.ad {
    margin-top: 25px;
    font-size: 2rem;
    text-align: right;
  }
}
@media(min-width: 1440px) {
  .section-ad {
    padding: 100px 60px 70px;
  }
  .view-more.ad {
    font-size: 2.3rem;
  }
}
.section-portrait {
  padding: 80px 20px 90px;
  margin: 0 auto;
  max-width: 1160px;
}
.portrait-photo {
  overflow: hidden;
  width: 100%;
}
.portrait-photo img {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: cover;
  object-position: left;
  vertical-align: bottom;
  transition: all 1s 0s ease;
  transform: scale(1.0, 1.0);
}
@media(min-width: 768px) {
  .section-portrait {
    padding: 70px 60px 85px;
  }
  .portrait-title {
    margin-top: 15px;
    text-align: center;
    width: 62%;
  }
  .view-more.po {
    text-align: right;
    margin-top: 25px;
    font-size: 2rem;
    width: 62%;
  }
  .section-portrait h2 {
    font-size: 1.5rem;
    text-align: right;
  }
  .section-portrait h2 span {
    font-size: 1.2rem;
  }
  .portrait-photo {
    overflow: hidden;
    text-align: left;
    width: 62%;
  }
  .portrait-photo img {
    height: auto;
    width: 100%;
  }
}
@media(min-width: 1440px) {
  .section-portrait {
    padding: 10px 60px 100px;
  }
  .view-more.po {
    font-size: 2.3rem;
  }
}
.footer {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 10px;
}
.footer hr {
  border-top: solid 1px #e0e0e0;
  margin-bottom: 5px;
  margin-top: 0;
}
.footer-copyright {
  font-family: montserrat;
  font-size: 1rem;
  color: #f7f7f7;
  font-weight: 300;
}
@media(min-width:768px) {
  .footer {
    padding-bottom: 20px;
  }
  .footer hr {
    margin-bottom: 15px;
  }
  .footer-copyright {
    font-size: 1.1rem;
    font-weight: 300;
  }
}