@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
}

body {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.6;
  background-color: #DCDAD7;
}

.rblock, .pblock {
  position: relative;
}

.ablock {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rblock img, .rblock picture,
.ablock img, .ablock picture {
  display: block;
  border: 0;
}

.pblock img, .pblock picture {
  border: 0;
  display: block;
  width: 100%;
}

li {
  list-style: none;
}

a {
  color: #444444;
}

#wrapper {
  position: relative;
  overflow-x: hidden;
}

header.c_header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

main.c_main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #F3F1ED;
}

main.c_main:after {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: url(../images/common/sub_v.png) left top no-repeat, url(../images/common/navpage/menu/menu_vision.svg) 97% 98% no-repeat;
  background-size: cover, 44.739% auto;
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.main {
  position: relative;
  width: 100%;
  min-height: 600px;
}

.sub main.c_main {
  color: #000;
  background-color: #DCDAD7;
}

#lovl {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  background: transparent;
}

.loader {
  position: relative;
  left: 50%;
  top: 50%;
  width: 64px;
  margin-left: -32px;
  margin-top: -32px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #bbb 94%, rgba(0, 0, 0, 0)) top/8px 8px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 30%, #ccc);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 0);
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 0);
  animation: a_loader 2s infinite linear;
}

@keyframes a_loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}
.loader_sub_over {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  pointer-events: none;
}

.loader_sub_over:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/common/sub_v.png) left top no-repeat, url(../images/common/navpage/menu/menu_vision.svg) 97% 98% no-repeat #DCDAD7;
  background-size: cover, 44.739% auto;
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  transform: translateY(100%);
}

/*
.loader_sub_over_animation:after {
   //  animation: a_loader_sub_over 0.1s linear forwards;
}
*/
.no-image img {
  opacity: 0.5;
}

.noswiper {
  margin-top: 3%;
  margin-bottom: 3%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.noswiper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 743px;
  background-color: rgba(0, 0, 0, 0.2);
}

@keyframes a_loader_sub_over {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@media screen and (max-width: 1920px) {
  main.c_main:before {
    background-size: auto 100%, 44.739% auto;
  }
}
@media screen and (max-width: 767px) {
  main.c_main:after {
    background-image: url(../images/common/sub_v_sp.png), url(../images/common/navpage/menu/menu_vision.svg);
    background-position: left top, 70% 98%;
    background-size: auto 100%, 91.87% auto;
  }
  .main {
    min-height: unset;
  }
}
#lovl.lovl4 {
  background-color: transparent;
}

@keyframes a_loader4_frame {
  0% {
    background-color: #DCDAD7;
  }
  99% {
    background-color: #DCDAD7;
  }
  100% {
    background-color: transparent;
  }
}
#wrapper.loader4_wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  mask-image: url(../images/common/loader2_vision_b.svg);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 67.1875% auto;
}

#wrapper.loader4_wrapper_mask {
  mask-image: url(../images/common/loader2_vision_b.svg), radial-gradient(circle closest-side at center, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 99.9%, rgba(255, 255, 255, 0) 100%);
  mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 67.1875% auto, 0.01% 0.01%;
}

.loader4_wrapper_mask_animation {
  animation: a_loader4_mask 1s 0.2s ease-in forwards;
}

@keyframes a_loader4_mask {
  0% {
    mask-size: 67.1875% auto, 0.01% 0.01%;
  }
  100% {
    mask-size: 67.1875% auto, 500% 500%;
  }
}
.loader4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #DCDAD7;
}

.loader4_vision {
  position: relative;
  width: 67.1875%;
}

.loader4_vision img {
  position: relative;
  display: block;
  width: 100%;
}

.loader4_vision_fade {
  animation: a_loader4_vision_fade 5s linear forwards;
}

@keyframes a_loader4_vision_fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#lovl.lovl_sub {
  background-color: #DCDAD7;
  overflow: hidden;
}

#lovl.lovl_sub:after {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: url(../images/common/sub_v.png) left top no-repeat, url(../images/common/navpage/menu/menu_vision.svg) 97% 98% no-repeat, #DCDAD7;
  background-size: cover, 44.739% auto;
  background-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

@keyframes a_loader_opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#lovl.lovl_sub.loader_sub_end {
  /*
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #fff; //  rgba(255,0,0,0.3);
  background: linear-gradient(135deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
  mask-repeat: no-repeat;
  mask-position: left bottom;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
  mask-repeat: no-repeat;
  mask-position: left top;
  mask-size: auto 100%;
  */
  animation: a_loader_end 0.2s ease-out forwards;
}

@keyframes a_loader_end {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes a_loader_mask {
  0% {
    mask-size: auto 100%;
  }
  100% {
    mask-size: auto 0;
  }
}
.gnavi {
  position: absolute;
  left: 3.085%;
  top: 0;
  margin-top: 36px; /* 2.395%; */
  width: 93.647%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 101;
  font-family: "Century Gothic", "Poppins", "M PLUS 1", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 1px;
  font-size: max(0.78125vw, 15px);
  line-height: max(0.78125vw, 15px);
  letter-spacing: 5px;
  color: #fff;
}

.gnavi a {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menubtn a:hover {
  background-color: #ff3699;
  filter: brightness(1);
}

.gnavi a:hover {
  color: #ff3699;
}

.langmenu {
  margin-left: auto;
  margin-right: 2em;
  color: #fff;
  line-height: auto;
}

.langmenu ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.langmenu ul li {
  display: inline-block;
  padding-right: 1em;
  border-right: 1px solid #fff;
  margin-right: 1em;
  transition-duration: 0.2s;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.langmenu.open ul li {
  transform: translateX(0%);
  opacity: 1;
  pointer-events: auto;
}

.langmenu ul li.menu_lang_selected {
  padding-right: 0;
  margin-right: 0;
  transform: translateX(0%);
  opacity: 1;
  border: none;
  pointer-events: auto;
}

.langmenu.open ul li.menu_lang_selected {
  transform: translateX(0%);
  pointer-events: auto;
}

.langmenu ul li a {
  display: inline;
}

.menubtn {
  position: relative;
  margin-left: auto;
  width: 78px;
  aspect-ratio: 314 / 272;
  transition: filter 0.4s linear;
  overflow: hidden;
}

.menubtn a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mask-image: url(../images/common/menubtn.svg);
  mask-size: 100% 100%;
  background-color: #fff;
}

.sub .gnavi a,
.sub .langmenu a {
  filter: brightness(0);
}

.sub .gnavi .logo a {
  filter: brightness(1);
}

.sub .gnavi a:hover,
.sub .langmenu p:hover {
  filter: brightness(1);
}

.logo {
  width: 214.75px;
  filter: brightness(1);
}

.gnavi menu {
  position: relative;
  margin-left: 6.1%;
  width: 58.8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gnavi menu li:hover {
  animation: a_menuletter_gnavi 0.4s 0s linear;
}

@keyframes a_menuletter_gnavi {
  0% {
    transform: skew(-10deg, 2deg) scale(0.95);
  }
  50% {
    transform: skew(0deg, -1deg) scale(1.05);
  }
  100% {
    transform: skew(0deg, 0) scale(1);
  }
}
.gnavi menu,
.langmenu,
.menubtn {
  filter: brightness(1) drop-shadow(1px 1px 5px rgba(128, 128, 128, 0.4));
}

.open .langmenu a:hover {
  color: #288F94;
  filter: brightness(1);
}

.open .menubtn a:hover {
  background-color: #288F94;
  filter: brightness(1);
}

.open .gnavi menu {
  display: none;
}
.open .langmenu a,
.open .menubtn a {
  filter: brightness(0);
}
.open .logo,
.open .gnavi .logo a {
  filter: brightness(1);
}
.open .langmenu ul li {
  border-color: #000;
}

.sub .langmenu ul li {
  border-color: #000;
}

@media screen and (max-width: 1366px) {
  .gnavi {
    font-size: min(1.953125vw, 15px);
  }
  .gnavi menu {
    display: none;
  }
  .menubtn {
    filter: drop-shadow(1px 1px 2px rgb(255, 255, 255));
  }
}
@media screen and (max-width: 767px) {
  .gnavi {
    font-size: min(3.125vw, 24px);
    letter-spacing: 2px;
  }
  .menubtn {
    width: 12%;
  }
  .logo {
    width: 27.962%;
  }
  .open .logo {
    filter: brightness(1);
  }
  .open .langmenu ul li {
    border-color: #000;
  }
}
.navpage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 600px;
  z-index: 99;
  pointer-events: none;
  overflow-y: auto;
  background-color: #fff;
  transition: filter 0.4s linear;
  filter: opacity(0);
  font-family: "Century Gothic", "Poppins", "M PLUS 1", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 1px;
}

.navpage_vision {
  position: fixed;
  display: block;
  z-index: 99;
  pointer-events: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../images/common/navpage/menu/menu_vision.svg) 97% 98% no-repeat transparent;
  background-size: 44.739% auto;
  mix-blend-mode: multiply;
  filter: opacity(0);
}

.navpage a {
  position: relative;
  display: block;
}

.navpage picture,
.navpage img {
  display: block;
  width: 100%;
  height: auto;
}

.navpage_main {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.navpage_left {
  position: relative;
  width: 51.355%;
  height: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  color: #fff;
  background: url(../images/common/navpage/pic/menu_left7_bg.jpg) center center no-repeat #4EADC4;
  background-size: cover;
}

.navimage_pic {
  position: relative;
  width: 100%;
  height: 87%;
  z-index: 2;
  overflow: hidden;
  /* max-width: 853px; */
}

.navimage_pic_inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  /*
  mask-image: url(../images/common/navpage/pic/navimage_mask.png);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  */
}

.navimage_pic_inner picture,
.navimage_pic_inner img {
  position: relative;
  display: block;
  height: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transition-duration: 1s;
}

.navimage_pic_inner:hover picture,
.navimage_pic_inner:hover img {
  transform: scale(1.08);
}

.navimage_frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.navimage_pic .navimage_frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.navimage_text {
  position: relative;
  width: 88.723%;
  text-align: center;
}

.navimage_pretitle {
  margin-top: 1em;
  font-size: min(0.8206330598vw, 7px);
}

.navimage_title {
  font-size: min(1.6412661196vw, 14px);
  letter-spacing: 2px;
}

.navimage_posttitle {
  font-size: min(1.0550996483vw, 9px);
}

.navimage_copyright {
  margin-top: 1em;
  font-size: min(0.7033997655vw, 6px);
}

.navpage_right {
  position: relative;
  width: 48.645%;
  min-width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
  background-color: #DCDAD7;
}

.navmenu {
  position: relative;
  margin-left: 16.381%;
  margin-top: 0%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 83.618%;
  height: 61.75%;
}

.navmenu menu {
  position: relative;
  width: 23.126%;
  height: 42.374%;
  min-width: 216px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8%;
}

.menu_x_link,
.menu_i_link {
  position: relative;
  width: 100%;
}

.navmenu .menu_x {
  width: 2.699%;
  min-width: 20px;
  margin-bottom: 0.5em;
}

.navmenu .menu_i {
  width: 2.699%;
  min-width: 22px;
  margin-bottom: 0.5em;
}

.navmenu ul {
  font-size: min(1.540436457vw, 12px);
}

.navmenu a {
  display: inline;
  text-decoration: none;
}

.navmenu a:hover,
.open .langmenu a:hover {
  color: #68b7dd;
  filter: brightness(1);
}

.open .menubtn a:hover {
  background-color: #68b7dd;
  color: transparent;
  filter: brightness(1);
}

.navmenu ul li {
  margin-bottom: 0.5em;
}

.navmenu ul dl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.navmenu ul dt {
  width: 6em;
}

.navpage menu li {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 10.185%;
}

.navpage menu li.menu_top {
  padding-top: 7.407%;
}

.navpage menu li a {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  background-color: #231815;
  mask-size: 100% 100%;
  overflow: hidden;
}

.navpage menu li a:hover {
  color: transparent;
  background-color: #68b7dd;
}

.navpage menu li:hover {
  animation: a_menuletter 0.4s 0s linear;
}

@keyframes a_menuletter {
  0% {
    transform: skew(-10deg, 2deg) scale(0.95);
  }
  50% {
    transform: skew(0deg, -1deg) scale(1.05);
  }
  100% {
    transform: skew(0deg, 0) scale(1);
  }
}
.menu_top {
  width: 23.611%;
  left: 0%;
}

.menu_top a {
  mask-image: url(../images/common/navpage/menu/menu_top.svg);
}

.menu_works {
  width: 65.74%;
  left: 0.925%;
}

.menu_works a {
  mask-image: url(../images/common/navpage/menu/menu_works.svg);
}

.menu_about {
  width: 62.962%;
  left: 0.925%;
}

.menu_about a {
  mask-image: url(../images/common/navpage/menu/menu_about.svg);
}

.menu_brand {
  width: 63.425%;
  left: 1.851%;
}

.menu_brand a {
  mask-image: url(../images/common/navpage/menu/menu_brand.svg);
}

.menu_company {
  width: 98.611%;
  left: 1.388%;
}

.menu_company a {
  mask-image: url(../images/common/navpage/menu/menu_company.svg);
}

.menu_contact {
  width: 93.055%;
  left: 1.388%;
}

.menu_contact a {
  mask-image: url(../images/common/navpage/menu/menu_contact.svg);
}

.open .navpage {
  pointer-events: auto;
  filter: opacity(1);
}
.open .navpage_vision {
  filter: opacity(1);
}

@media screen and (max-width: 1366px) {
  .navmenu ul {
    font-size: max(0.878477306vw, 12px);
  }
}
@media screen and (max-width: 767px) {
  .navpage {
    min-height: unset;
    height: 100dvh;
  }
  .navpage_left {
    min-height: unset;
    display: none;
  }
  .navpage_vision {
    background-position: 70% 98%;
    background-size: 91.87% auto;
  }
  .navpage_right {
    min-height: unset;
    width: 100%;
  }
  .navmenu {
    margin-left: 10%;
    width: 90%;
  }
  .navmenu menu {
    width: 50%;
    height: 60%;
    min-width: unset;
  }
  .navmenu ul {
    font-size: max(1.5645371578vw, 12px);
  }
  .navmenu .menu_x {
    min-width: unset;
  }
  .navmenu .menu_i {
    min-width: unset;
  }
}
@keyframes a_slider {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-33.3333%);
  }
}