@charset "UTF-8";
#Billboard {position: relative;}
#Billboard h2 {position: absolute;bottom: 50%;left: 5%;z-index: 2;color: #fff;font-size: 240%;font-weight: 600;letter-spacing: 0.25em;}
#Billboard h3 {position: absolute;top: 50%;left: 5%;z-index: 2;color: #fff;font-size: 125%;letter-spacing: 0.36em;}
#Billboard .swiper-slide {overflow: hidden;}
#Billboard .swiper-slide img {object-fit: cover;object-position: 50%;height: 100vh;filter: contrast(.5) brightness(1.5) grayscale(0.3);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: filter;}
#Billboard .swiper-slide-active img,
#Billboard .swiper-slide-duplicate-active img,
#Billboard .swiper-slide-prev img {filter: contrast(1) brightness(1) grayscale(0);transition: filter var(--easing) 3000ms;}

#Billboard .scroll {position: absolute;bottom: 5%;left: 50%;z-index: 2;width: fit-content;color: #fff;}
#Billboard .scroll::before {animation: 2s scroll infinite;background: #fff;border-radius: 3px;content: "";height: 10px;left: 0;margin: auto;position: absolute;right: 0;width: 2px;}
#Billboard .scroll::after {border: 1px solid #fff;border-radius: 20px;content: "";display: block;height: 50px;margin-inline: auto;margin-top: 10px;width: 30px;}
@keyframes scroll {0% {opacity: 0;top: 40%;}50% {opacity: 1;}100% {opacity: 0;top: 70%;}}

#Main .block-index-01 {position: relative;z-index: 1;}
#Main .block-index-01 > figure {position: sticky;top: 0;left: 0;width: 100%;z-index: -2;}
#Main .block-index-01 > figure img {height: 100vh;object-fit: cover;}
#Main .block-index-01 > figure::after {bottom: inherit;top: 0;}
#Main .block-index-01 h3 {margin-bottom: 1em;border-bottom: 1px solid #c5bbb2;font-size: 175%;font-weight: 600;line-height: 1.2;letter-spacing: 0.25;color: #c5bbb2;}
#Main .block-index-01 h4 {margin-bottom: 1em;font-size: 137.5%;letter-spacing: 0.36em;color: #fff;}
#Main .block-index-01 .lead {max-width: 36em;margin: 0 auto;font-size: 100%;text-align: center;line-height: 2.5;letter-spacing: 0.2em;color: #fff;}
#Main .block-index-01 .container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;opacity: 0;transition: opacity ease-out 600ms 200ms;}
#Main .block-index-01 .container.staging {opacity: 1;}
#Main .block-index-01 .container::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #523f25;opacity: 0.5;z-index: -1;}

#Main .block-index-02 .swiper-slide {max-width: 500px;margin: 3em 1.5em;}
#Main .block-index-02 .swiper-slide figure img {border-radius: 3px;}
#Main .block-index-02 .swiper-slide figcaption {margin: 1.25em 1em 0.75em;color: var(--color-02);}
#Main .block-index-02 .swiper-slide p {margin: 0 1.125em;font-size: 93.5%;}
#Main .block-index-02 .swiper-button-next,
#Main .block-index-02 .swiper-button-prev {margin: 0;width: 3em;height: 3em;top: 30%;background-color: #fff;background-size: 15% auto;background-position: 50%;border-radius: 100%;border: 1px solid #dddddd;}
#Main .block-index-02 .swiper-button-prev,
#Main .block-index-02 .swiper-container-rtl .swiper-button-next {left:calc(50% - 250px);transform: translateX(-50%);background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23665854'%2F%3E%3C%2Fsvg%3E");}
#Main .block-index-02 .swiper-button-next,
#Main .block-index-02 .swiper-container-rtl .swiper-button-prev {right:calc(50% - 250px);transform: translateX(50%);background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23665854'%2F%3E%3C%2Fsvg%3E");}
#Main .block-index-02 .swiper-pagination-bullet {width: 0;height: 0;margin: 0 0.5em;background-color: #fff;border: 2px solid #88716a;opacity: 1;vertical-align: middle;}
#Main .block-index-02 .swiper-pagination-bullet-active {width: 0.75em;height: 0.75em;border: 1px solid #88716a;}

#Main .block-index-03 {position: relative;}
#Main .block-index-03 .container {position: relative;z-index: 2;}
#Main .block-index-03 .news {border-top: 1px solid #ddd;background-color: #fff;margin: 1.5em 0;padding: 3em 0;}
#Main .block-index-03 .news h3 {font-size: 162.5%; color: var(--color-02);}
#Main .block-index-03 .news ul {max-height: 7em;margin-right: 1em;padding-right: 1em;overflow-y: scroll;}
#Main .block-index-03 .news ul li {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
#Main .block-index-03 .news ul li time {display: inline-block;width: 6em;}
#Main .block-index-03 .news ul li span {display: inline-block;width: 8em;margin-right: 1em;text-align: center;font-size: 75%;color: #fff;}
#Main .block-index-03 .news ul li.category-01,
#Main .block-index-03 .news ul li.category-01 a {color: var(--color-01);}
#Main .block-index-03 .news ul li.category-01 span {background-color: var(--color-01);}
#Main .block-index-03 .news ul li.category-02,
#Main .block-index-03 .news ul li.category-02 a {color: var(--color-02);}
#Main .block-index-03 .news ul li.category-02 span {background-color: var(--color-02);}
#Main .block-index-03 .news ul li.category-03,
#Main .block-index-03 .news ul li.category-03 a {color: #55686c;}
#Main .block-index-03 .news ul li.category-03 span {background-color: #55686c;}
#Main .block-index-03 .contents h4 {margin-bottom: 1em;font-size: 125%;color: var(--color-02);}
#Main .block-index-03 .contents figure {background-color: #fff;clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 3em), calc(100% - 3em) 100%, 0% 100%, 0% 0%);}
#Main .block-index-03 .contents figure img {mix-blend-mode: multiply;}
#Main .block-index-03 .contents figure figcaption {position: absolute;left: 0.5em;bottom: 0.4em;font-size: 200%;letter-spacing: 0.1em;line-height: 1.25;color: #fff;}
#Main .block-index-03 .contents figure figcaption small {display: block;font-size: 43.75%;}
#Main .block-index-03 .contents .lead {max-width: 22em;font-size: 93.75%;line-height: 2;}
#Main .block-index-03 .contents .grid-list > div a {position: relative;border-radius: 1em;overflow: hidden;}
#Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a::before {content: "+";position: absolute;bottom: 0;right: 0;border-radius: 100%;width: 2em;height: 2em;background-color: #fff;text-align: center;line-height: 2;font-size: 137.5%;color: var(--color-01);z-index: 2;transform-origin: 100% 100%;}
#Main .block-index-03 .contents .grid-list > div:nth-child(2) a::before {background-color: #f3f2f1;}
#Main .block-index-03::before {content: "";position: absolute;top: 5%;left: 0;right: 0;bottom: 25%;background-color: #f3f2f1;transform-origin: 0 0;transform: skewY(5deg);}

#Main .block-index-04 h3 {margin: 2em 0 1em;white-space: nowrap;font-size: 225%;line-height: 1.25;letter-spacing: 0.06em;color: var(--color-02);}
#Main .block-index-04 h3 small {display: block;font-size: 38.89%;}
#Main .block-index-04 h4 {padding-right: 1em;border-right: 1px solid #ddd;white-space: nowrap;line-height: 1;font-size: 125%;}
#Main .block-index-04 h4 small {display: block;margin-top: 0.75em;font-size: 70%;font-weight: 400;}
#Main .block-index-04 article {position: relative;}
#Main .block-index-04 article figcaption {position: absolute;top: 1.5em;left: 1.5em;background-color: #fff;padding: 0.2em 1.5em;font-size: 75%;color: var(--color-02);}
#Main .block-index-04 article .column {background-color: #f5f5f5;padding: 2em;display: flex;align-items: center;justify-content: space-between;gap: 1.25em;}
#Main .block-index-04 article .lead {margin: 0;}
#Main .block-index-04 article .more a {position: relative;border: 1px solid var(--color-02);padding: 0.5em 3.5em 0.5em 1.5em;color: var(--color-02);}
#Main .block-index-04 article .more a::before {content: "";position: absolute;top: 0;bottom: 0;right: 0;width: 2em;background: transparent url("../img/common/icon_external.svg") no-repeat 0 50% / 0.75em auto;}
#Main .block-index-04 article + article {margin-top: 3em;}

body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a::before {transition: color ease 200ms, transform var(--easing) 200ms;}
body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a figure {transition: background-color ease 200ms, clip-path var(--easing) 200ms;}
body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a figure img {transition: transform var(--easing) 200ms;}
body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a:hover {opacity: 1;}
body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a:hover::before {color: var(--color-02);transform: scale(1.12);}
body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a:hover figure {background-color: #aaa;clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 4em), calc(100% - 4em) 100%, 0% 100%, 0% 0%);}
body.cursor #Main .block-index-03 .contents .grid-list > div:nth-child(n+2) a:hover figure img {transform: scale(1.025);}

body.cursor #Main .block-index-04 article .more a {transition: background-color ease 400ms, color ease 400ms;}
body.cursor #Main .block-index-04 article .more a::before {filter: invert(0);transition: filter ease 400ms;}
body.cursor #Main .block-index-04 article .more a:hover {background-color: var(--color-02);color: #fff;opacity: 1;}
body.cursor #Main .block-index-04 article .more a:hover::before {filter: invert(1);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) {
  #Main .block-index-03 .news {display: flex;align-items: center;gap: 3em;}
  #Main .block-index-03 .news h3 {position: relative;width: 6em;border-right: 1px solid #ddd;text-align: center;}
  #Main .block-index-03 .news ul {flex: 1;}

  #Main .block-index-03 .contents {overflow: hidden;margin-top: 3em;}
  #Main .block-index-03 .contents h3 {margin-bottom: 0;position: absolute;bottom: 0;left: 0;white-space: nowrap;font-size: 537.5%;line-height: 1.05;letter-spacing: 0;color: #c8bfbc;}
  #Main .block-index-03 .contents h3 small {display: block;font-size: 16.28%;}
  #Main .block-index-03 .contents .grid-list {justify-content: space-between;margin: 0 -0.5em;}
  #Main .block-index-03 .contents .grid-list > div {width: calc(50% - 1em);margin: 0.5em;position: relative;}
  #Main .block-index-03 .contents .grid-list > div:nth-child(n+3) {width: calc(25% - 1em);}

  #Main .block-index-04 {padding-bottom: 8em;}
}
@media only screen and (min-width: 769px) and (max-width: 1192px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Billboard .swiper-slide img[src*="mv_01"] {object-position: 90% 50%;}
  #Billboard .swiper-slide img[src*="mv_02"] {object-position: 70% 50%;}
  #Billboard .swiper-slide img[src*="mv_03"] {object-position: 52% 50%;}
  #Billboard .scroll::after {margin-top: -5px;border: none;}


  #Main .block-index-02 .swiper-slide {max-width: calc(100vw - 4em);}
  #Main .block-index-02 .swiper-button-prev, #Main .block-index-02 .swiper-container-rtl .swiper-button-next {left: 2em;}
  #Main .block-index-02 .swiper-button-next, #Main .block-index-02 .swiper-container-rtl .swiper-button-prev {right: 2em;}

  #Main .block-index-03 .news {margin: 2em 0 0;}
  #Main .block-index-03 .news h3 {margin-bottom: 0.5em;text-align: center;}
  #Main .block-index-03 .news ul {max-height: 16em;margin: 0 1em;padding: 0 1em;}
  #Main .block-index-03 .news ul li {white-space: normal;}
  #Main .block-index-03 .news ul li + li {border-top: 1px dotted var(--color-02);padding-top: 1.25em;}

  #Main .block-index-03 .contents h3 {margin: 1.5em 0 1em;white-space: nowrap;font-size: 225%;line-height: 1.25;letter-spacing: 0.06em;color: var(--color-02);}
  #Main .block-index-03 .contents h3 small {display: block;font-size: 38.89%;}
  #Main .block-index-03 .contents figure figcaption {letter-spacing: 0;}
  #Main .block-index-03 .contents .grid-list {justify-content: space-between;margin: 0 -0.5em;}
  #Main .block-index-03 .contents .grid-list > div {width: calc(100% - 1em);margin: 0.5em;position: relative;}
  #Main .block-index-03 .contents .grid-list > div:nth-child(n+3) {width: calc(50% - 1em);}
  #Main .block-index-03 .contents .grid-list > div:nth-child(2) {margin-top: 3em;}

  #Main .block-index-04 {padding-bottom: 4em;}
  #Main .block-index-04 h4 {border-right: none;border-bottom: 1px solid #ddd;margin: 0 0 1em;padding: 0 0 1em;}
  #Main .block-index-04 article figure {overflow: hidden;}
  #Main .block-index-04 article figure img {width: 140%;margin: 0 -20%;}
  #Main .block-index-04 article .column {display: block;}
  #Main .block-index-04 article .more {margin-top: 1.5em;}
}