@charset 'utf-8';

/* common
------------------------------------------------ */

@media screen and (max-width: 768px) {
  .fs-l-pageMain { margin: 0; }
}

@media screen and (min-width: 769px) {
  .fs-l-pageMain { padding: 0; max-width: inherit; }
}

/* visual
------------------------------------------------ */
.top-visual { position: relative; margin-bottom: 80px; }
.top-visual-copy { position: absolute; bottom: -1px; left: 0; width: 76.4%; z-index: 3; }
.top-visual-frame { position: relative; padding-bottom: 130.4%; width: 100%; height: 0; overflow: hidden; }
.top-visual-move { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-item { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.top-visual-item.active { z-index: 2; }
.top-visual-item > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.top-visual-photo picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-photo img { position: absolute; top: 0; left: 0; }
.top-visual-bullets { display: flex; height: 1px; }
.top-visual-bullets > a { display: block; width: 20px; height: 100%; background-color: #e6e6e6; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.top-visual-bullets > a + a { margin-left: 5px; }
.top-visual-bullets > a.active { background-color: #000; }

@media screen and (max-width: 768px) {
  .top-visual-bullets { margin: 14px 20px 0; }
}

@media screen and (min-width: 769px) {
  .top-visual { margin-bottom: 127px; }
  .top-visual-copy { bottom: -3px; width: 38.2%; max-width: 573px; }
  .top-visual-frame { padding-bottom: 45.6%; }
  .top-visual-bullets { margin-top: 22px; }
  .top-visual-bullets > a { width: 30px; }
  .top-visual-bullets > a + a { margin-left: 8px; }
}

/* concept
------------------------------------------------ */
.top-concept { position: relative; }
.top-concept-logo--image { width: 100%; }
.top-concept-logo--ja { margin-top: 16px; font-size: 1.1rem; line-height: 1.2; }
.top-concept-text { font-size: 1.4rem; line-height: 2.5; }
.top-concept .more-1 { margin-top: 45px; }
.top-concept-photo { position: relative; }

@media screen and (max-width: 768px) {
  .top-concept { display: flex; flex-flow: column-reverse; }
  .top-concept-info { padding: 48px 20px 57px; border-bottom: 1px solid #e6e6e6; }
  .top-concept-logo { margin: 0 auto; width: 85px; text-align: center; }
  .top-concept-logo--image { height: 37px; }
  .top-concept-text { margin: 26px 30px 0; }
  .top-concept-photo::after { content: ''; position: absolute; top: 20px; left: 0; width: 100%; height: 1px; background-color: #e6e6e6; }
}

@media screen and (min-width: 769px) {
  .top-concept::before,
  .top-concept::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background-color: #e6e6e6; z-index: 1; }
  .top-concept::before { top: 40px; }
  .top-concept::after { bottom: 40px; }
  .top-concept-info { padding: 164px 0 234px; }
  .top-concept .title-1 { margin-bottom: 123px; text-align: left; }
  .top-concept-logo { width: 85px; }
  .top-concept-logo--image { height: 37px; }
  .top-concept-logo--ja { margin-top: 12px; font-size: 1.3rem; }
  .top-concept-text { margin-top: 52px; font-size: 1.5rem; line-height: 2.5333; }
  .top-concept .more-1 { margin-top: 54px; text-align: left; }
  .top-concept-photo { position: absolute; top: 0; right: 0; width: 60%; height: 100%; }
  .top-concept-photo picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .top-concept-photo img { position: absolute; top: 0; left: 0; }
}

/* product
------------------------------------------------ */
.top-product { position: relative; }
.top-product-slide + .top-product-slide { margin-top: 25px; }

@media screen and (max-width: 768px) {
  .top-product { padding: 77px 0 80px; }
  .top-product .title-1 { padding-left: 20px; }
}

@media screen and (min-width: 769px) {
  .top-product { margin: 0 auto; padding: 154px 20px 120px; max-width: 1420px; }
  .top-product-slide + .top-product-slide { margin-top: 68px; }
}

/* topics
------------------------------------------------ */
.top-topics { position: relative; background-color: #f4f4f4; }
.top-topics .topics-lists-info { margin-top: 0; padding: 16px 12px 25px; background-color: #fff; }
.top-topics .topics-lists-date { padding-right: 10px; }
.top-topics .topics-lists-title,
.top-topics .topics-lists-excerpt { margin-right: 11px; margin-left: 11px; }
.top-topics .more-1 { margin-top: 50px; }

@media screen and (max-width: 768px) {
  .top-topics { padding: 52px 20px 55px; }
}

@media screen and (min-width: 769px) {
  .top-topics { padding: 65px 0 70px; }
  .top-topics .line-pc-3 .topics-lists-item { margin: 2% 2% 0 0; width: 32%; }
  .top-topics .line-pc-3 .topics-lists-item:nth-of-type(-n+3) { margin-top: 0; }
  .top-topics .line-pc-3 .topics-lists-item:nth-of-type(3n) { margin-right: 0; }
  .top-topics .topics-lists-info { padding: 20px 15px 30px; }
  .top-topics .topics-lists-date { padding-right: 12px; }
  .top-topics .topics-lists-title,
  .top-topics .topics-lists-excerpt { margin-right: 10px; margin-left: 10px; }
  .top-topics .more-1 { margin-top: 57px; }
}

/* instagram
------------------------------------------------ */
.top-instagram { position: relative; }
.top-instagram-account { position: absolute; top: 0; right: 0; font-family: 'Source Serif 4', serif; font-size: 1.4rem; line-height: 1.2; }
.top-instagram .more-1 { margin-top: 50px; }

@media screen and (max-width: 768px) {
  .top-instagram { padding: 52px 20px 80px; }
}

@media screen and (min-width: 769px) {
  .top-instagram { padding: 116px 0 120px; }
  .top-instagram-account { right: 20px; font-size: 1.5rem; }
}

/* image
------------------------------------------------ */
.top-image { position: relative; padding: 124px 0 174px; }
.top-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; }
.top-image-logo { margin: 0 auto; }

@media screen and (max-width: 768px) {
  .top-image::after { background-image: url(../../img/top/image_bg.jpg); }
}

@media screen and (min-width: 769px) {
  .top-image { padding: 168px 0 172px; }
  .top-image::after { background-image: url(../../img/top/image_bg-pc.jpg); }
  .top-image-logo { max-width: 505px; }
}