@charset "utf-8";

/* ---------------------------------------------------------------------------------------------

　   COMMON

--------------------------------------------------------------------------------------------- */

@media only screen and ( max-width : 767px ) {
  #footer_anime {
    bottom: 74rem;
  }
  #sp_fixed_nav {
    position: fixed;
    width: calc(100% - 3rem);
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: 91;
    border: .2rem solid #fff;
    border-radius: 1rem;
    background: rgba(255,255,255,.4);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #sp_fixed_nav li {
    margin-right: 1.5rem;
  }
  #sp_fixed_nav li:last-child {
    margin-right: 0;
  }
  #sp_fixed_nav li.sp_fixed_nav_entry {
    margin-left: 1rem;
  }
  #sp_fixed_nav li a {
    color: var(--mainColor);
    height: 3.2rem;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
  }
  #sp_fixed_nav li.sp_fixed_nav_entry a {
    background: var(--mainColor);
    color: #fff;
    padding: 0 1rem;
  }
  #sp_fixed_nav li a span {
    position: relative;
    padding-left: 1.3rem;
  }
  #sp_fixed_nav li a span:before {
    content: "";
    width: .8rem;
    height: .8rem;
    background: var(--mainColor);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .6rem;
  }
  #sp_fixed_nav li.sp_fixed_nav_entry a span:before {
    background: var(--subColor);
  }
}
@media print, screen and ( min-width : 768px ) {
  #footer_anime {
    bottom: 36rem;
  }
  #sp_fixed_nav {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------------------------

　   MV

--------------------------------------------------------------------------------------------- */

#mv {
  position: relative;
}
.webp #mv {
  background: url(../img/webp/bg.webp) repeat-y top left / 100% fixed;
}
.no-webp #mv {
  background: url(../img/bg.jpg) repeat-y top left / 100% fixed;
}
#mv_inner {
  position: relative;
  z-index: 3;
}
.mv_title {
  position: absolute;
  z-index: 11;
  bottom: 50%;
  width: 100%;
  left: 0;
}
.mv_copy_jp {
  font-size:4.3vw;
  letter-spacing: .1em;
  top:0;
  position: relative;
  left:4.39vw;
  color: #fff;
  font-weight: 700;
}
.mv_copy_jp span {
  display: inline-block;
  background: #fff;
  color: var(--mainColor);
  padding-left: .2em;
  margin-bottom: .2em;
}
.mv_copy_en {
  font-size: 1.1vw;
  letter-spacing: .25em;
  bottom: 0;
  position: relative;
  left:4.39vw;
  color: #fff;
  font-weight: 700;
}
.mv_scroll_down {
  position: absolute;
  z-index: 10;
}
.mv_scroll_down_inner {
  position: relative;
}
.mv_scroll_down .mv_scroll_down_circle {
  animation:8s linear infinite rotation;
}
.mv_scroll_down .mv_scroll_down_ico {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.mv_scroll_down img {
  display: block;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
.mv_bg_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.webp .mv_bg_logo {
  background: url(../img/webp/bg.webp) repeat-y top left / 100% fixed;
}
.no-webp .mv_bg_logo {
  background: url(../img/bg.jpg) repeat-y top left / 100% fixed;
}
.mv_bg_logo img {
  mix-blend-mode: soft-light;
  height: 100%;
}
.mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
#mv #nav li a {
  display: block;
  position: relative;
  padding-left: 2rem;
  font-weight: 700;
}
#mv #nav li a:before {
  content: "";
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--mainColor);
}
@media only screen and ( max-width : 767px ) {
  #mv {
    padding: 10rem 1.5rem 0;
  }
  #nav li {
    font-size: 3.2vw;
    margin-bottom: 2.67vw;
  }
  #mv #nav li a {
    padding-left: 5.33vw;
  }
  #mv #nav li a:before {
    width: 2.13vw;
    height: 2.13vw;
  }

  .mv_title {
    bottom: 4%;
    width: 100%;
    left: 0;
  }

  .mv_copy_jp {
    font-size:8vw;
    line-height: 1.2em;
    left:0;
    letter-spacing: 0;
  }
  .mv_copy_en {
    font-size: 3.2vw;
    letter-spacing: 0;
    left: 0;
  }
  .mv_scroll_down {
    width: 26.67vw;
    height: 26.67vw;
    right: 4vw;
    top: 8vw;
  }
  .mv_scroll_down_ico {
    width: 4.8vw;
  }
  .mv_scroll_down_circle {
    width: 26.67vw;
  }
  .mv_bg_logo {
    width: 86%;
    /*background-size: 100% auto;*/
    left: 7%;
    align-items: flex-end;
    /*background-position: center bottom;*/
  }
  .mv_bg_logo img {
    height: auto;
  }
}
@media only screen and (max-width: 767px) and (min-height: 740px) {

}
@media print, screen and ( min-width : 768px ) {
  #mv_inner {
    padding-top: 4rem;
  }
  .mv_bg_logo {
    top: 4rem;
    height: calc(100% - 4rem);
  }
  .mv_title {
    bottom: 5%;
  }
  #nav {
    position: absolute;
    z-index: 4;
    right:5vw;
    top: 17%;
  }
  #nav li {
    font-size: 1.17vw;
    margin-bottom: 1em;
  }
  #nav li:last-child {
    margin-bottom: 0;
  }
  .mv_scroll_down {
    width: 16rem;
    height: 16rem;
    right: 7vw;
    bottom: 5vw;
  }
  .mv_scroll_down_ico {
    width: 2.7rem;
  }
  .mv_scroll_down_circle {
    width: 16rem;
  }
}
@media print, screen and ( min-width : 2000px ) {
  .mv_title {
  }
  .mv_copy_jp {
    font-size:90px;
    left:96px;
  }
  .mv_copy_en {
    font-size: 25px;
  }
  #nav {
    right:110px;
    top: 17%;
  }
  #nav li {
    font-size: 25px;
  }
}



/* ---------------------------------------------------------------------------------------------

　   MV SLIDER

--------------------------------------------------------------------------------------------- */

[class*=swiper]:focus {
    outline: none;
  }
#mv .swiper {
  position: relative;
  z-index: 2;
}
#mv .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
#mv .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
#mv .slide {
  position: relative;
  /*width: 83.5rem;*/
  margin: 0 auto;
}
#mv .slide-img01, #mv .slide-img01-shadow, #mv .slide-img02 {
  -webkit-animation: 2s cubic-bezier(.2, 1, .2, 1) both;
          animation: 2s cubic-bezier(.2, 1, .2, 1) both;
  opacity: 0;
  text-align: center;
}

#mv .slide-img01 {
  position: relative;
  z-index: 4;
}
#mv .slide-img01-shadow {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  mix-blend-mode: overlay;
  width: 100%;
  height: 100%;
}
.slide01 .slide-img01-shadow {
  background: url(../img/mv01_01_shadow.svg) no-repeat center / auto 100%;
}
.slide02 .slide-img01-shadow {
  background: url(../img/mv02_01_shadow.svg) no-repeat center / auto 100%;
}
.slide03 .slide-img01-shadow {
  background: url(../img/mv03_01_shadow.svg) no-repeat center / auto 100%;
}
#mv .slide-img02 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
}
#mv .swiper-slide.anm-started .slide-img01,
#mv .swiper-slide.anm-started .slide-img01-shadow,
#mv .swiper-slide.anm-started .slide-img02 {
  -webkit-animation-name: mv-fadeIn;
          animation-name: mv-fadeIn;
}
#mv .swiper-slide.anm-finished .slide-img01,
#mv .swiper-slide.anm-finished .slide-img01-shadow,
#mv .swiper-slide.anm-finished .slide-img02 {
  -webkit-animation-name: mv-fadeOut;
          animation-name: mv-fadeOut;
}

@-webkit-keyframes mv-fadeIn {
  0% {
    -webkit-transform: translateY(6rem);
            transform: translateY(6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mv-fadeIn {
  0% {
    -webkit-transform: translateY(6rem);
            transform: translateY(6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes mv-fadeOut {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(6rem);
            transform: translateY(6rem);
    opacity: 0;
  }
}
@keyframes mv-fadeOut {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(6rem);
            transform: translateY(6rem);
    opacity: 0;
  }
}

@media only screen and ( max-width : 767px ) {

}

@media print, screen and ( min-width : 768px ) {
  #mv .slide {
    min-width: 83.5rem;
  }
  #mv .slide-img01 img, #mv .slide-img02 img {
    width: auto;
    max-width: 80%;
    max-height: calc(100vh - 4rem);
  }
}

/* ---------------------------------------------------------------------------------------------

　   CONCEPT

--------------------------------------------------------------------------------------------- */

#mv_obi {
  position: absolute;
  width: 200%;
  top: 0;
  left: -50%;
  right: -50%;
  z-index: 3;
}
.mv_obi_inner {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  padding:0 2%;
  overflow: hidden;
}
.mv_obi_inner .mv_flowing {
  white-space: nowrap;
}
.mv_obi_inner .mv_flowing p {
  display: inline-block;
}

#concept {
  position: relative;
}
#concept .container {
  position: relative;
  z-index: 4;
}
#concept .container:after {
  content: "";
  position: absolute;
  background: url(../img/deco.svg) no-repeat center / 100%;
}
.concept_content {
  position: relative;
  z-index: 4;
}
.concept_txt p {
  font-weight: 700;
}
.concept_content p:last-child {
  margin-bottom: 0;
}
.concept_ph {
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.concept_ph01 {
  position: relative;
  z-index: 2;
}
.concept_ph02 {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
}
@media only screen and ( max-width : 767px ) {
  .mv_obi_inner .mv_flowing img {
    max-width: 168.8rem;
    width: 168.8rem;
  }
  .mv_obi_inner .mv_flowing p {
    margin-right: 1rem;
  }
  #concept {
    padding: 8.4rem 0 5rem;
  }
  #concept .container:after {
    width: 2.4rem;
    height: 2.4rem;
    right: 0;
    bottom: 0;
  }
  .concept_ph {
    padding-bottom: 8.53vw;
    margin-top: 3.5rem;
  }
  .concept_ph01 {
    width: 65.6vw;
  }
  .concept_ph02 {
    width: 46.67vw;
  }
  .concept_content p {
    margin-bottom: 3.5rem;
    line-height: 2.1429em;
  }
}
@media print, screen and ( min-width : 768px ) {
  #mv_obi {
    top: 11rem;
  }
  .mv_obi_inner .mv_flowing img {
    width: 388.4rem;
  }
  .mv_obi_inner .mv_flowing p {
    margin-right: 3.66vw;
  }
  #concept {
    padding: 14rem 0 10rem;
  }
  .concept_content p {
    margin-bottom: 6rem;
    line-height: 2.8em;
  }
  .concept_ph {
    width: 54rem;
  }
  .concept_ph01 {
    width: 38rem;
  }
  .concept_ph02 {
    width: 27rem;
  }
  #concept .container:after {
    width: 3.6rem;
    height: 3.6rem;
    right: -6rem;
    bottom: -5rem;
  }
}



/* ---------------------------------------------------------------------------------------------

　   MESSAGE

--------------------------------------------------------------------------------------------- */
#message {
  position: relative;
}
#message .container {
  position: relative;
  z-index: 4;
}
.message_wrapper {
  position: relative;
}
#massage_anime {
  opacity: .3;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}
.message_title {
  color: var(--mainColor);
}
.message_txt p {
  line-height: 2.5em;
  font-weight: 700;
}
.message_txt p:last-child {
  margin-bottom: 0;
}
@media only screen and ( max-width : 767px ) {
  #message {
    padding: 5rem 0;
  }
  .message_ph {
    margin-left: -2rem;
    margin-bottom: 2.5rem;
  }
  .message_ph img {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  .message_title {
    font-size: 2.4rem;
    margin-bottom: 2.5rem;
  }
  .message_txt {
    margin-bottom: 5rem;
  }
  .message_txt p {
    margin-bottom: 3.5rem;
  }
  #massage_anime {
    width: 50rem !important;
    bottom: -8rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  #message {
    padding: 10rem 0;
  }
  .message_title {
    font-size: 4rem;
    margin-bottom: 5rem;
  }
  .message_ph {
    width: 55rem;
    position: absolute;
    left: -12rem;
    top: 0;
  }
  .message_content {
    margin-left: 51rem;
    padding-top: 6.5rem;
  }
  .message_txt {
    margin-bottom: 7rem;
  }
  .message_txt p {
    margin-bottom: 5rem;
  }
  #massage_anime {
    bottom: -20rem;
  }
  .message_ph img {
    border-radius: 2rem;
  }
}

/* ---------------------------------------------------------------------------------------------

　   lifestyle

--------------------------------------------------------------------------------------------- */
#lifestyle {
  position: relative;
  max-width: 112.6rem;
  margin: 0 auto;
}
#lifestyle:before {
  content: "";
  position: absolute;
  z-index: -1;
}
.webp #lifestyle:before {
  background: url(../img/webp/bg_circle.webp) no-repeat center / 100%;
}
.no-webp #lifestyle:before {
  background: url(../img/bg_circle.png) no-repeat center / 100%;
}
.lifestyle_title {
  color: var(--mainColor);
  letter-spacing: .05em;
}
.lifestyle_title .en {
  display: block;
  font-weight: 700;
  letter-spacing: .2em;
}
.lifestyle_list .lifestyle_content {
  overflow: hidden;
}
.lifestyle_content p {
  line-height: 2.5em;
}
.lifestyle_content .btn {
  max-width: 29rem;
  margin-top: 2.5rem;
}

#lifestyle_anime {
  opacity: .4;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70% !important;
  height: auto;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  #lifestyle {
    margin-top: 10rem;
    padding: 0 2rem 5rem;
  }
  #lifestyle:before {
    width: 40.6rem;
    height: 40.6rem;
    left: -15rem;
    bottom: -20rem;
  }
  .lifestyle_container {
    display: block;
    margin-top: .6rem;
  }
  .lifestyle_img {
    display: none;
  }
  .lifestyle_list_item01, .lifestyle_list_item02, .lifestyle_list_item03 {
    border-bottom: 1px solid #C6C1E2;
  }
  .lifestyle_list_item02, .lifestyle_list_item03 {
    padding-top: 5rem;
  }
  .lifestyle_list .lifestyle_spImg {
    width: 100%;
    margin-bottom: 2rem;
  }
  .lifestyle_list .lifestyle_spImg img {
    display: block;
    width: 100%;
    border-radius: 1.5rem;
  }
  .lifestyle_list .lifestyle_content {
    padding-bottom: 5rem;
  }
  .lifestyle_list_item02 .lifestyle_content, .lifestyle_list_item03 .lifestyle_content {
    height: auto;
    padding-bottom: 5rem;
  }
  .lifestyle_title {
    font-size: 2.4rem;
  }
  .lifestyle_title .en {
    font-size: 1.2rem;
  }
  .lifestyle_content p {
    margin-top: 2rem;
    font-size: 1.4rem;
  }
  #lifestyle_anime {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 70rem !important;
  }
}
@media print, screen and ( min-width : 768px ) {
  #lifestyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 82%;
    height: 100vh;
    margin-top: 10rem;
  }
  #lifestyle:before {
    width: 60.6rem;
    height: 60.6rem;
    left: -22rem;
    bottom: -13rem;
  }
  .lifestyle_container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 7.2rem;
  }
  .lifestyle_list_dtl {
    padding: 5rem 0;
  }
  .lifestyle_img {
    overflow: hidden;
    position: relative;
    width: 31.972%;
    aspect-ratio: 41/55;
  }
  .lifestyle_img_item01, .lifestyle_img_item02, .lifestyle_img_item03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .lifestyle_img_item01 {
    z-index: 1;
  }
  .lifestyle_img_item02 {
    z-index: 2;
  }
  .lifestyle_img_item03 {
    z-index: 3;
  }
  .lifestyle_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
  }
  .lifestyle_list {
    width: 60.391%;
    border-top: 2px solid #C6C1E2;
  }
  .lifestyle_list_item01, .lifestyle_list_item02, .lifestyle_list_item03 {
    border-bottom: 2px solid #C6C1E2;
  }
  .lifestyle_list .lifestyle_spImg {
    display: none;
  }
  .lifestyle_list .lifestyle_content {
    /*padding-bottom: 5rem;*/
  }
  .lifestyle_title {
    font-size: 4rem;
  }
  .lifestyle_title .en {
    font-size: 1.4rem;
  }
  .lifestyle_content p {
    margin-top: 2.5rem;
  }
  #lifestyle_anime {
    right: -8rem;
  }
}

/* ---------------------------------------------------------------------------------------------

　   page link

--------------------------------------------------------------------------------------------- */
#page_link .container {
  position: relative;
}
.page_link_container {
  position: relative;
}
.page_link_wrapper:before,
.page_link_wrapper:after,
.page_link_container:before,
.page_link_container:after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.page_link_wrapper:before {
  background-image: url(../img/dc_tl.svg);
}
.page_link_wrapper:after {
  background-image: url(../img/dc_tr.svg);
}
.page_link_container:before {
  background-image: url(../img/dc_bl.svg);
}
.page_link_container:after {
  background-image: url(../img/dc_br.svg);
}
#page_link .heading {
  margin-bottom: 0;
  position: relative;
}
#page_link .heading:after {
  content: "";
  background: url(../img/arrow.svg) no-repeat center / 100%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.page_link_box a {
  display: block;
}
.page_link_thumb {
  overflow: hidden;
  border-radius: 2rem;
}
.page_link_thumb img {
  transition: .3s;
}
.page_link_box a:hover .page_link_thumb img {
  transform: scale(1.1);
}
@media only screen and ( max-width : 767px ) {
  #page_link {
    padding: 5rem 0 13rem;
  }
  #page_link .heading:after {
    width: 4.5rem;
    height: 4.5rem;
  }
  .page_link_wrapper:before,
  .page_link_wrapper:after,
  .page_link_container:before,
  .page_link_container:after {
    width: 1rem;
    height: 1rem;
  }
  .page_link_wrapper:before {
    top: -3rem;
    left: 2rem;
  }
  .page_link_wrapper:after {
    top: -3rem;
    right: 2rem;
  }
  .page_link_container:before {
    bottom: -3rem;
    left: 2rem;
  }
  .page_link_container:after {
    bottom: -3rem;
    right: 2rem;
  }
  .page_link_box {
    border-bottom: .2rem solid var(--subColor);
    padding-bottom: 3rem;
    margin-bottom: 3rem;
  }
  .page_link_box:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .page_link_thumb {
    margin-bottom: 2rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  #page_link {
    padding: 10rem 0 16rem;
  }
  .page_link_wrapper:before,
  .page_link_wrapper:after,
  .page_link_container:before,
  .page_link_container:after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .page_link_wrapper:before {
    top: -3rem;
    left: -6rem;
  }
  .page_link_wrapper:after {
    top: -3rem;
    right: -6rem;
  }
  .page_link_container:before {
    bottom: -3rem;
    left: -6rem;
  }
  .page_link_container:after {
    bottom: -3rem;
    right: -6rem;
  }
  #page_link .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  #page_link .container:after {
    content: "";
    width: .2rem;
    top: 0;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--subColor);
    position: absolute;
  }
  #page_link .heading:after {
    width: 5rem;
    height: 5rem;
  }
  .page_link_box {
    width: 50.3rem;
  }
  .page_link_thumb {
    margin-bottom: 2.5rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   XXX

--------------------------------------------------------------------------------------------- */

@media only screen and ( max-width : 767px ) {
}
@media print, screen and ( min-width : 768px ) {
}