@charset 'UTF-8';

/* common
------------------------------------------------ */
@media screen and (min-width: 769px) {
  .page-sticky-links { top: calc(100% - 240px); }
}

/* introduce
------------------------------------------------ */
.concept-introduce { position: relative; padding: 72px 0 66px; }
.concept-introduce-title { margin-bottom: 28px; }
.concept-introduce-title__en { margin-bottom: 16px; text-align: center; font-family: 'Gilda Display', serif; font-size: 3rem; letter-spacing: 0.04em; font-weight: 400; line-height: 1.2; }
.concept-introduce-title__ja { text-align: center; font-family: 'Noto Serif JP', serif; font-size: 1.6rem; letter-spacing: 0.2em; line-height: 1.2; }
.concept-introduce-text { text-align: center; font-family: 'Noto Serif JP', serif; font-size: 1.2rem; letter-spacing: 0.1em; line-height: 2.83333333333; }
.concept-introduce-text + .concept-introduce-text { margin-top: 2.83333333333em; }

@media screen and (min-width: 769px) {
  .concept-introduce { padding: 136px 0 146px; }
  .concept-introduce-title { margin-bottom: 54px; }
  .concept-introduce-en { margin-bottom: 14px; font-size: 3.8rem; }
  .concept-introduce-ja { font-size: 1.6rem; }
  .concept-introduce-text { font-size: 1.4rem; line-height: 3.14285714286; }
  .concept-introduce-text + .concept-introduce-text { margin-top: 3.14285714286em; }
}

/* copy
------------------------------------------------ */
.concept-copy { position: relative; padding: 60px 0; background-color: #F7F7F7; }
.concept-copy-text { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; letter-spacing: 0.1em; line-height: 2.83333333333; }

@media screen and (max-width: 768px) {
  .concept-copy-photo { margin: 0 20px; }
  .concept-copy-text { margin-top: 54px; text-align: center; }
}

@media screen and (min-width: 769px) {
  .concept-copy > .wrap { display: flex; justify-content: center; align-items: center; }
  .concept-copy-photo { width: 362px; }
  .concept-copy-text { margin-left: 148px; font-size: 1.6rem; letter-spacing: 0.2em; line-height: 2.625; }
}

/* movie
------------------------------------------------ */
.concept-movie { position: relative; padding-bottom: 56.2666666667%; width: 100%; height: 0; overflow: hidden; }
.concept-movie-play { position: absolute; font-family: 'Gilda Display', serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; }
.concept-movie-play > a { display: block; position: relative; color: #fff; }
.concept-movie-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
.concept-movie-bg video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.concept-movie-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #9B9B9B; mix-blend-mode: multiply; opacity: 0.8; z-index: 2; }
.concept-movie-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.concept-movie-modal__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 40px); z-index: 2; }
.concept-movie-modal__media { position: relative; padding-bottom: 56.2666666667%; width: 100%; height: 0; overflow: hidden; }
.concept-movie-modal__content video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.concept-movie-modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); cursor: pointer; z-index: 1; }

@media screen and (max-width: 768px) {
  .concept-movie-play { top: 50%; left: 50%; transform: translate(-50%,-50%); }
  .concept-movie-play > a::before { content: ''; display: block; margin: 0 auto 8px; width: 19px; height: 23px; background: url(../../img/icon/play1.svg) no-repeat center center; background-size: 100% 100%; }
}

@media screen and (min-width: 769px) {
  .concept-movie-play { transition: opacity 0.4s ease; transform: translate(-50%,-50%); width: 168px; height: 168px; font-size: 2rem; opacity: 0; }
  .concept-movie-play.is-active { opacity: 1; }
  .concept-movie-play > a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
  .concept-movie-play > a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 50%; }
  .device-click .concept-movie-play > a:hover { color: #fff; }
  .concept-movie-modal__content { width: 720px; }
}

/* brand
------------------------------------------------ */
.concept-brand { position: relative; }
.concept-brand-title { margin-bottom: 38px; }
.concept-brand-title__en { margin-bottom: 14px; font-family: 'Gilda Display', serif; font-size: 3rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; }
.concept-brand-title__ja { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; letter-spacing: 0.2em; line-height: 1.2; }
.concept-brand-lists__item:not(:first-child) { margin-top: 48px; }
.concept-brand-lists__en { margin-bottom: 25px; font-family: 'Barlow', sans-serif; font-size: 1.6rem; line-height: 1.2; color: #9B9B9B; }
.concept-brand-lists__ja { margin-bottom: 20px; font-family: 'Noto Serif JP', serif; font-size: 1.8rem; letter-spacing: 0.2em; line-height: 1.2; }
.concept-brand-lists__text { font-size: 1.2rem; letter-spacing: 0.1em; line-height: 2.5; }

@media screen and (max-width: 768px) {
  .concept-brand { margin: 74px 20px 0; }
  .concept-brand-lists__info { margin-top: 32px; }
}

@media screen and (min-width: 769px) {
  .concept-brand { margin-top: 126px; }
  .concept-brand-content { padding: 0 36px 0 204px; }
  .concept-brand-title { margin-bottom: 50px; }
  .concept-brand-title__en { margin-bottom: 26px; font-size: 4rem; }
  .concept-brand-title__ja { font-size: 1.6rem; }
  .concept-brand-lists__item { display: flex; justify-content: space-between; align-items: center; }
  .concept-brand-lists__item:not(:first-child) { margin-top: 40px; }
  .concept-brand-lists__photo { width: 43.659043659%; }
  .concept-brand-lists__info { width: 49.0644490644%; }
  .concept-brand-lists__en { margin-bottom: 36px; font-size: 1.4rem; }
  .concept-brand-lists__ja { margin-bottom: 24px; font-size: 1.8rem; }
  .concept-brand-lists__text { font-size: 1.2rem; }
}