@charset "UTF-8";
/* RIVIERA */

#page-header {
  position: relative;
  aspect-ratio: 1 / 0.643;
  background-color: #FFF;
}
#page-header::before {
  position: absolute;
  top: 0;
  left: 6%;
  content: '';
  display: block;
  width: 2px;
  height: calc( 100% - 12.2% );
  background-color: #DEDBB4;
}
#page-header::after {
  position: absolute;
  top: calc( 100% - 12.2% - 4em );
  left: calc( 6% - 1.8em );
  content: 'SCROLL';
  font-family: var(--font-ja-min);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: right;
  color: #DEDBB4;
}

#page-header p {
  position: absolute;
  opacity: 0;
  top: calc( 116 / 707 * 100% );
  left: 11.5%;
  width: 7.7%;
  z-index: 10;
}
#page-header p span {
  display: block;
  height: max-content;
}
#page-header p span:nth-child(1) {
  margin: 0 0 0 1.2em;
}
#page-header p span:nth-child(2) {
  margin: 10em 0 0 .8em;
}
#page-header p span:nth-child(3) {
  margin: 6em 0 0 0;
}

.ph-slider-wrap {
  position: absolute;
  width: 64.6%;
  top: calc( 146 / 707 * 100% );
  right: 0;
}
.ph-slider-wrap::before {
  content: '';
  display: block;
  width: 23.6%;
  aspect-ratio: 1 / 2.678;
  background-image: url(../img/h_sl_bg1.jpg);
  background-size: cover;
  position: absolute;
  top: calc( -83 / 707 * 100% );
  left: -9%;
  z-index: 2;
}
.ph-slider-wrap::after {
  content: '';
  display: block;
  width: 29.6%;
  aspect-ratio: 1 / 1.631;
  background-image: url(../img/h_sl_bg2.png);
  background-size: cover;
  position: absolute;
  top: calc( 142 / 707 * 100% );
  left: -19%;
  z-index: 1;
}
.ph-slider {
  border-radius: 16px;
  background-color: #FFF;
  overflow: hidden;
  z-index: 5;
}


@media ( width <= 1000px )  {
  
  #page-header {
    aspect-ratio: 1 / 0.743;
  }
  #page-header p {
    font-size: clamp(0.75rem, 0.456rem + 1.47vw, 1.375rem);
    letter-spacing: 0.4em;
  }
  
}
@media ( width <= 640px ) {
  
  #page-header {
    display: flex;
    flex-flow: column;
    padding-top: 50px;
    padding-bottom: 30px;
    align-items: center;
    aspect-ratio: auto;
  }
  #page-header::before {
    left: 10%;
    height: calc( 100% - 20px );
  }
  #page-header::after {
    top: calc( 100% - 30px - 3em );
    left: calc( 10% - 1.8em )
  }
  #page-header p {
    position: initial;
    width: 29.7%;
    order: 2;
  }
  #page-header p span:nth-child(1) {
    margin: 0 0 0 .8em;
  }
  #page-header p span:nth-child(2) {
    margin: 10em 0 0 .6em;
  }
  #page-header p span:nth-child(3) {
    margin: 6em 0 0 0;
  }
  .ph-slider-wrap {
    position: initial;
    width: 92.5%;
    margin-bottom: 30px;
    order: 1;
  }
  .ph-slider-wrap::before {
    width: 19.4%;
    aspect-ratio: 1 / 2.678;
    top: calc( 22 / 707 * 100% );
    left: 11%;
    z-index: 2;
  }
  .ph-slider-wrap::after {
    width: 29.6%;
    aspect-ratio: 1 / 1.631;
    top: calc( 48 / 707 * 100% );
    left: 7%;
    z-index: 1;
  }
  .ph-slider {
    width: 82.7%;
    margin-left: auto;
  }
  
}



/* ABOUT */
/* ============================== */
#about {
  position: relative;
  background-color: #F0F7F8;
}
.about-inner {
  display: flex;
}
.about-inner > div {
  flex: 1;
}
.about-txt-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  padding-left: 92px;
  order: 2;
}
.about-txt h2 {
  width: 414px;
  line-height: 1;
  margin-bottom: 45px;
}
.about-txt p {
  font-family: var(--font-ja-hannari);
  font-size: 16px;
  letter-spacing: 0.23em;
  line-height: 2.438;
}

.about-img-wrap {
  padding: 65px 50px 65px 0;
  background-image: url(../img/about_img_bg.jpg);
  background-size: cover;
  background-position: right center;
}
.about-img {
  aspect-ratio: 1	/	1.25;
  width: 100%;
  max-width: 472px;
  height: 100%;
  margin: 0 0 0 auto;
}


@media ( width <= 1000px )  {
  
}
@media ( width <= 640px ) {
  
  .about-inner {
    display: block;
  }
  
  .about-txt-wrap {
    display: block;
    width: 92%;
    margin: auto;
    padding: 40px 0;;
    order: 2;
  }
  .about-txt h2 {
    width: 87%;
    line-height: 1;
    margin: 0 auto 30px;
  }
  .about-txt p {
    font-size: clamp(0.75rem, 0.632rem + 0.59vw, 1rem);
    margin-left: 7%;
    margin-right: 7%;
    line-height: 1.88;
  }
  
  .about-img-wrap {
    padding: 60px 0;
  }
  .about-img {
    aspect-ratio: auto;
    width: 80%;
    margin: auto;
  }
  
}


/* STORY */
/* ============================== */
#story {
  padding-top: 160px;
  padding-bottom: 180px;
  background-color: #FFF;
}
.story-inner {
  width: 1000px;
  margin: auto;
}

.story-b1 {
  display: flex;
  margin-bottom: 50px;
}
.story-b1 > div {
  flex: 1;
}
.story-b1-txt {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: max-content;
  margin-left: 76px;
}
.story-b1-txt h2 {
  width: 188px;
  margin-bottom: 70px;
}
.story-b1-txt p {
  width: 69px;
}
.story-b1-img-wrap {
  width: 497px;
}

.story-b2 {
  position: relative;
  aspect-ratio: 1 / 0.866;
  width: 100%;
  height: 100%;
  margin-bottom: 175px;
}
.story-b2-p1 {
  position: absolute;
  top: 0;
  left: 0;
}
.story-b2-p1 p {
  letter-spacing: 0.23em;
  line-height: 2.429;
}
.story-b2-img1 {
  width: 347px;
  margin-bottom: 24px;
}
.story-b2-img2 {
  position: absolute;
  top: calc( 230 / 866 * 100% );
  left: 63.9%;
  width: 360px;
}
.story-b2-img3 {
  position: absolute;
  top: calc( 578 / 866 * 100% );
  left: 33.4%;
  width: 415px;
}

.story-b3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.story-b3-img1 {
  width: 316px;
  margin-right: 70px;
}
.story-b3-p2 p {
  letter-spacing: 0.23em;
  line-height: 2.429;
}


@media ( width <= 1000px )  {
  
  .story-inner {
    width: 94%;
  }
  
  .story-b1-img-wrap {
    width: 47.9%;
  }
  
  .story-b1-txt p {
    width: 32.6%;
  }
  
  .story-b2 {
    margin-bottom: 60px;
  }
  .story-b2-img1 {
    width: 37.4%;
  }
  .story-b2-img2 {
    width: 36%;
  }
  .story-b2-img3 {
    width: 41.5%;
  }
  
  .story-b3 {
    align-items: flex-start;
  }
  .story-b3-p1 {
    width: 48.6%;
  }
  .story-b3-img1 {
    width: 90%;
    margin-right: 0;
  }
  
}
@media ( width <= 640px ) {
  
  #story {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .story-inner {
    width: 100%;
  }
  
  .story-b1 {
    display: initial;
  }
  
  .story-b1-txt {
    margin: auto;
    padding-bottom: 50px;
    width: auto;
  }
  .story-b1-txt h2 {
    width: 50.7%;
    margin: 0 auto 50px;
  }
  .story-b1-txt p {
    width: 20%;
  }
  .story-b1-img-wrap {
    width: 100%;
  }
  
  .story-b2 {
    aspect-ratio: initial;
    width: auto;
    height: auto;
    margin-bottom: 30px;
  }
  .story-b2-p1 {
    position: relative;
    width: 81.6%;
    margin: -8% auto 50px;
  }
  .story-b2-p1 p {
    letter-spacing: 0.12em;
    line-height: 1.8;
  }
  .story-b2-p2 {
    position: relative;
  }
  .story-b2-img1 {
    width: 92%;
  }
  .story-b2-img2 {
    position: relative;
    margin-left: auto;
    margin-bottom: 30px;
    width: 64%;
    left: initial;
    right: 0;
  }
  .story-b2-img3 {
    position: relative;
    width: 100%;
    left: 0;
  }
  
  .story-b3 {
    display: block;
    width: 84.3%;
    margin: auto;
  }
  .story-b3-p1 {
    width: 100%;
  }
  .story-b3-img1 {
    width: 100%;
    margin-bottom: 30px;
    margin-right: 0;
  }
  .story-b3-p2 {
    flex: 1;
  }
  .story-b3-p2 p {
    letter-spacing: 0.12em;
    line-height: 1.8;
  }
  
}


/* BG */
/* ============================== */
.img-delimiter-value {
  height: 680px;
  overflow: hidden;
}
.img-delimiter-value::before {
  background-image: url(../img/delimiter_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}


@media ( width <= 1000px )  {
  
  .img-delimiter-value {
    height: 50vw;
  }
  
}
@media ( width <= 640px ) {
  
}


/* VALUE */
/* ============================== */
#value {
  background-color: #FFF;
  margin: auto;
  padding-top: 120px;
  text-align: center;
}
#value > h2 {
  width: 182px;
  line-height: 1;
  margin: 0 auto 70px;
}
#value > section {
  max-width: 1000px;
  margin: auto;
}
#value > section + section {
  margin-top: 110px;
}
#value > section h3 {
  font-family: var(--font-ja-min);
  font-weight: normal;
  font-size: 27px;
  letter-spacing: 1.5em;
  text-indent: 1.5em;
  line-height: 1;
  margin-bottom: 10px;
}
#value > section.value-b1 h3 {
  letter-spacing: 0.23em;
  text-indent: 0.23em;
}
#value > section .catch {
  font-family: var(--font-ja-hannari);
  font-size: 22px;
  letter-spacing: 0.23em;
  text-indent: 0.23em;
  line-height: 2.438;
  margin-bottom: 15px;
}
#value > section .read {
  line-height: 2.286;
  letter-spacing: 0.23em;
  margin-left: 0.23em;
}
#value > section div[class*='txt-wrap'] {
  margin-bottom: 40px;
}
#value > section div[class*='img-wrap'] {
  display: flex;
  justify-content: space-between;
}
.value-b1-img1 {
  width: 49%;
}
.value-b1-img2,
.value-b1-img3 {
  width: 24.6%;
}
.value-b2-img-wrap > div,
.value-b3-img-wrap > div {
  width: 49.6%;
}


@media ( width <= 1000px )  {
  
}
@media ( width <= 640px ) {
  
  #value {
    padding-top: 60px;
  }
  #value > h2 {
    width: 35%;
    margin: 0 auto 40px;
  }
  
  #value > section + section {
    margin-top: 41px;
  }
  
  #value > section div[class*='txt-wrap'] {
    width: 92%;
    margin: auto;
    margin-bottom: 20px;
  }
  #value > section h3 {
    font-size: clamp(1rem, 0.676rem + 1.62vw, 1.688rem);
  }
  #value > section .catch {
    font-size: clamp(0.875rem, 0.64rem + 1.18vw, 1.375rem);
    line-height: 1;
  }
  #value > section .read {
    line-height: 1.8;
    letter-spacing: 0.12em;
    margin-left: 0.12em;
  }
  
}