@charset "UTF-8";
@import url("ress_custom.min.css");
body {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 1.5235988201vh;
  line-height: 1.8em;
  position: relative;
  z-index: 1;
  color: #000;
  background: #ededee;
}

@media all and (-ms-high-contrast: none) {
  body {
    font-family: "メイリオ", "Meiryo", sans-serif;
  }
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

a,
a:hover {
  text-decoration: none;
  color: #7e7e7e;
}

a:visited {
  color: #7e7e7e;
}

img {
  vertical-align: bottom;
}

a > img:hover {
  opacity: 0.75;
}

li {
  list-style-type: none;
  list-style-position: inside;
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img,
p img, div img, li img {
  width: 100%;
  height: auto;
}

.pc {
  display: block;
}

.pcil {
  display: inline;
}

.sp {
  display: none;
}

.spil {
  display: none;
}

@media (max-width: 768px) {
  .sp {
    display: block;
  }
  .spil {
    display: inline;
  }
  .pc {
    display: none;
  }
  .pcil {
    display: none;
  }
}
body {
  width: 100%;
  height: 400vw;
  position: relative;
}

div#root_wrapper {
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow-x: scroll;
  scrollbar-width: none;
}
div#root_wrapper::-webkit-scrollbar {
  display: none;
}
div#root_wrapper div.inner {
  position: absolute;
  width: auto;
  height: 100%;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
div#root_wrapper div.mainvisual {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
div#root_wrapper div.mainvisual .mvimg {
  width: auto;
  height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div#root_wrapper div.mainvisual .mvslider {
  width: 62.6843657817vh;
  margin-bottom: 4vh;
}
div#root_wrapper div.mainvisual .mvlogo {
  width: 14.6755162242vh;
  height: auto;
}
div#root_wrapper div.mainvisual .mvlogo img {
  width: 100%;
  height: auto;
}
div#root_wrapper div.gnavi {
  width: 14vh;
  height: 100vh;
  background: #ededee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.2ms ease;
}
div#root_wrapper div.gnavi.scroll {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}
div#root_wrapper div.gnavi .inner {
  height: 90vh;
  border-right: 1px solid #222;
  width: 12vh;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 0;
}
div#root_wrapper div.gnavi .inner .navilogo {
  display: flex;
  justify-content: center;
}
div#root_wrapper div.gnavi .inner .logo {
  width: 20%;
  height: auto;
  max-width: 80px;
  margin: 0 auto;
}
div#root_wrapper div.gnavi .inner .logo img {
  width: 100%;
  height: auto;
}
div#root_wrapper div.gnavi .inner .naviwrapper {
  position: relative;
}
div#root_wrapper div.gnavi .inner .naviwrapper .navi {
  position: absolute;
  width: 24vh;
  display: flex;
  transform: rotate(-90deg);
  top: 22.3vh;
  left: -6.5vh;
}
div#root_wrapper div.gnavi .inner .naviwrapper .navi li {
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-left: 2.5vh;
}
div#root_wrapper div.corp_logo {
  width: 360vh;
  height: 100vh;
  background: #ededee;
  position: relative;
}
div#root_wrapper div.corp_logo .logomain {
  position: absolute;
  left: 6.5%;
  top: 50%;
  transform: translateY(-50%);
  height: 9.808259587vh;
  width: auto;
}
div#root_wrapper div.corp_logo .logomain h1 {
  height: 100%;
}
div#root_wrapper div.corp_logo .logomain img {
  height: 100%;
  width: auto;
}
div#root_wrapper div.corp_logo .floatlogo {
  position: absolute;
  width: auto;
  height: 96vh;
  margin: 2vh 0;
  display: flex;
  flex-flow: column;
  left: 80vh;
  z-index: 2;
}
div#root_wrapper div.corp_logo .floatlogo .floatblock {
  height: 33.3333333%;
  width: auto;
  position: relative;
}
div#root_wrapper div.corp_logo .floatlogo .floatblock img {
  height: 100%;
  width: auto;
  position: absolute;
}
div#root_wrapper div.corp_logo .floatlogo .floatblock.logo_inter img {
  left: 59vh;
}
div#root_wrapper div.corp_logo .floatlogo .floatblock.logo_gro img {
  left: 0px;
}
div#root_wrapper div.corp_logo .floatlogo .floatblock.logo_ove img {
  left: 95vh;
}
div#root_wrapper div.corp_logo .logoarea_img {
  height: 47.7876106195vh;
  width: 177.9498525074vh;
  left: 150vh;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  overflow: hidden;
}
div#root_wrapper div.corp_logo .logoarea_img img {
  height: 100%;
  width: auto;
  position: absolute;
  left: -60vh;
}
div#root_wrapper div.corp_logo .logoarea_title {
  position: absolute;
  left: 69vh;
  top: 10%;
  height: 80.604719764vh;
  width: auto;
}
div#root_wrapper div.corp_logo .logoarea_title img {
  height: 100%;
  width: auto;
  position: absolute;
  left: 0vh;
}
div#root_wrapper div.corp_profile {
  width: 70vh;
  height: 100vh;
  background: #ededee;
  position: relative;
}
div#root_wrapper div.corp_profile h2 {
  position: absolute;
  height: 1.6224188791vh;
  width: auto;
  left: -50vh;
  top: 50%;
  transform: translateY(-50%);
}
div#root_wrapper div.corp_profile h2 img {
  height: 100%;
  width: auto;
}
div#root_wrapper div.corp_profile dt, div#root_wrapper div.corp_profile dd, div#root_wrapper div.corp_profile p {
  margin-bottom: 1.2em;
  letter-spacing: 0.12em;
  line-height: 1.6em;
}
div#root_wrapper div.corp_profile dt {
  margin: 0;
}
div#root_wrapper div.corp_profile div.prof {
  margin: 32vh 0 10vh;
}
div#root_wrapper div.corp_profile div.prof.btm {
  margin: 0;
}
div#root_wrapper div.corp_profile h3 {
  font-size: 2.6548672566vh;
  font-weight: 300;
  letter-spacing: 0.3em;
  line-height: 2em;
}
div#root_wrapper div.corp_profile p {
  letter-spacing: 0.3em;
}
div#root_wrapper div.collection-lead {
  width: 200vh;
  height: 100vh;
  background: #ededee;
  position: relative;
}
div#root_wrapper div.collection-lead .collection-lead-img {
  height: 74.8525073746vh;
  width: 153.982300885vh;
  margin: 12.5368731563vh auto 0;
  display: flex;
  justify-content: space-between;
}
div#root_wrapper div.collection-lead .collection-lead-img img {
  width: 49.8%;
  height: 100%;
  margin-right: 0.2%;
}
div#root_wrapper div.collection-lead .collection-lead-img .collection-lead-banner {
  height: 100%;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
}
div#root_wrapper div.collection-lead .collection-lead-img .collection-lead-banner img {
  width: 49.8%;
  height: 49.8%;
  margin: 0;
}
div#root_wrapper div.collection {
  width: 470vh;
  height: 100vh;
  background: #ededee;
  position: relative;
}
div#root_wrapper div.collection:hover {
  cursor: pointer;
}
div#root_wrapper div.collection .collectionlist {
  height: 67.2566371681vh;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 12%;
  top: 50%;
  transform: translateY(-50%);
}
div#root_wrapper div.collection .collectionlist .collection_item {
  height: 46%;
  width: 104.7197640118vh;
  width: 100vh;
  margin-right: 15%;
}
div#root_wrapper div.collection .collectionlist .collection_item .banner {
  width: 100%;
  height: 27.2861356932vh;
  overflow: hidden;
}
div#root_wrapper div.collection .collectionlist .collection_item .banner img {
  height: 100%;
  width: auto;
  margin-left: 0%;
}
div#root_wrapper h2.gatetitle {
  height: 100vh;
  width: 39.5280235988vh;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
}
div#root_wrapper h2.gatetitle .actimg {
  width: 19.7640117994vh;
  height: auto;
}
div#root_wrapper h2.gatetitle .actimg img {
  width: 100%;
  height: auto;
}
div#root_wrapper div.concept {
  width: 550vh;
  height: 100vh;
  background: #000;
  position: relative;
  padding-left: 6vh;
}
div#root_wrapper div.concept .concept_contents {
  position: absolute;
  left: 50vh;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70.6489675516vh;
}
div#root_wrapper div.concept .concept_contents p, div#root_wrapper div.concept .concept_contents img {
  width: 107.9646017699vh;
}
div#root_wrapper div.concept .concept_contents p {
  color: #fff;
  font-size: 1.6224188791vh;
  margin: auto 10vh;
  line-height: 3em;
  letter-spacing: 0.2em;
}
div#root_wrapper div.concept .conceptlist {
  height: 62.4631268437vh;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 76vh;
  top: 50%;
  transform: translateY(-50%);
}
div#root_wrapper div.concept .conceptlist li {
  height: 25.5%;
  width: 70vh;
  display: flex;
  align-items: center;
}
div#root_wrapper div.concept .conceptlist li .img {
  width: 28%;
  text-align: center;
  height: 70%;
}
div#root_wrapper div.concept .conceptlist li .img img {
  height: 100%;
  width: auto;
}
div#root_wrapper div.concept .conceptlist li .text h3 {
  height: 2.8761061947vh;
  width: auto;
  margin-bottom: 1em;
}
div#root_wrapper div.concept .conceptlist li .text h3 img {
  height: 100%;
  width: auto;
}
div#root_wrapper div.concept .conceptlist li .text p {
  color: #Fff;
  font-size: 1.1542012927em;
}
div#root_wrapper div.contact {
  width: 180vh;
  height: 100vh;
  background: #ededee;
  position: relative;
  padding-left: 6vh;
}
div#root_wrapper div.contact .text {
  height: 90%;
  width: 110vh;
  position: absolute;
  left: 65vh;
  top: 50%;
  transform: translateY(-50%);
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #b6b6b6;
}
div#root_wrapper div.contact .text p {
  font-size: 1.1542012927em;
  letter-spacing: 0.2em;
}
div#root_wrapper div.contact dl {
  margin: 3.5em 0;
}
div#root_wrapper div.contact dl.mail {
  margin: 5em 0;
}
div#root_wrapper div.contact dl.tel {
  margin: 0;
}
div#root_wrapper div.contact dl.flex {
  display: flex;
}
div#root_wrapper div.contact dl.flex dt {
  margin-right: 1em;
}
div#root_wrapper div.contact dl.flex dd {
  margin-bottom: 0.5em;
}
div#root_wrapper div.contact dd {
  margin-bottom: 1.8em;
  letter-spacing: 0.1em;
}
div#root_wrapper div.contact div.prof {
  margin: 5.8rem 0;
}
div#root_wrapper div.careers {
  width: 200vh;
  height: 100vh;
  background: #ededee;
  position: relative;
}
div#root_wrapper div.careers h2 {
  position: absolute;
  height: 1.6224188791vh;
  width: auto;
  left: 20vh;
  top: 50%;
  transform: translateY(-50%);
}
div#root_wrapper div.careers h2 img {
  height: 100%;
  width: auto;
}
div#root_wrapper div.careers .contents {
  height: 90%;
  width: auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border-left: 2px solid #b6b6b6;
  color: #222;
  padding-left: 60vh;
}
div#root_wrapper div.careers .contents .section {
  min-height: 68%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-right: 10vh;
}
div#root_wrapper div.careers .contents .section h3 {
  margin-bottom: 1.5em;
}
div#root_wrapper div.careers .contents .section h4 {
  margin-top: 1.5em;
}
div#root_wrapper div.careers .contents .section a.btn {
  display: block;
  height: 4.0560471976vh;
}
div#root_wrapper div.careers .contents .section a.btn img {
  height: 100%;
  width: auto;
}

div#imgviewer {
  transition: height 0.4s, opacity 0.4s;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100vw;
  height: 0;
  background: #ededee;
  left: 0;
  top: 49.9%;
  transform: translateY(-50%);
}
div#imgviewer.active {
  opacity: 1;
  visibility: visible;
  height: 100.2vh;
}
div#imgviewer .inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f6f6f6;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
div#imgviewer .inner .worksslides {
  height: auto;
  margin-top: 0vh;
  width: 100%;
  display: none;
}
div#imgviewer .inner .worksslides .slick-prev {
  left: 17%;
  z-index: 10;
  width: 30px;
}
div#imgviewer .inner .worksslides .slick-next {
  right: 17%;
  z-index: 10;
  width: 30px;
}
div#imgviewer #worksclose {
  position: fixed;
  right: 1%;
  top: 1%;
  width: 6.1209439528vh;
  height: 6.1209439528vh;
  z-index: 10;
}
div#imgviewer #worksclose img {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  body {
    width: 100%;
    height: auto;
    background: #f4f4f4;
    font-size: 3.2028469751vw;
    color: #323333;
  }
  div > img, h1 > img, h2 > img, h3 > img, h4 > img, p > img,
  div a > img, h1 a > img, h2 a > img, h3 a > img, h4 a > img, p a > img {
    width: 100%;
    height: auto;
  }
  div#sp_root_wrapper {
    width: 100%;
    height: auto;
  }
  div#sp_root_wrapper .header_navi {
    width: 100%;
    height: 186px;
    height: 16.4601769912vw;
    position: fixed;
    z-index: 1000;
    background: #ededed;
    background-color: rgba(244, 244, 244, 0.8);
    transition: background-color 2s ease-out;
  }
  div#sp_root_wrapper .header_navi.active {
    background-color: rgba(244, 244, 244, 0);
  }
  div#sp_root_wrapper .header_navi .toggle_menu {
    position: absolute;
    top: 8vw;
    left: 5vw;
    width: 10vw;
    height: 3vw;
    z-index: 1000;
    cursor: pointer;
  }
  div#sp_root_wrapper .header_navi .toggle_menu::before, div#sp_root_wrapper .header_navi .toggle_menu::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    transition: all 0.6s ease;
  }
  div#sp_root_wrapper .header_navi .toggle_menu::before {
    top: 0;
  }
  div#sp_root_wrapper .header_navi .toggle_menu::after {
    bottom: 0;
  }
  div#sp_root_wrapper .header_navi .toggle_menu .menu_btn_bar {
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
    visibility: visible;
    opacity: 1;
  }
  div#sp_root_wrapper .header_navi .toggle_menu.active {
    position: fixed;
  }
  div#sp_root_wrapper .header_navi .toggle_menu.active::before {
    transform: rotate(45deg);
    top: 50%;
  }
  div#sp_root_wrapper .header_navi .toggle_menu.active::after {
    transform: rotate(-45deg);
    bottom: 50%;
  }
  div#sp_root_wrapper .header_navi .toggle_menu.active .menu_btn_bar {
    visibility: hidden;
    opacity: 0;
  }
  div#sp_root_wrapper #sp_mainvisual {
    width: 100%;
    height: 142.8825622776vw;
  }
  div#sp_root_wrapper .mvslider {
    width: 80%;
    margin: 0vw auto 10vw;
    padding-top: 18vw;
    height: auto;
    margin-bottom: 0;
  }
  div#sp_root_wrapper #sp_mainvisual {
    position: relative;
  }
  div#sp_root_wrapper #sp_mainvisual img {
    position: absolute;
  }
  div#sp_root_wrapper header {
    width: 100%;
    height: auto;
    padding: 8vw 0;
  }
  div#sp_root_wrapper header h1 {
    width: 51.6903914591vw;
    width: 100%;
    margin: 0 auto;
  }
  div#sp_root_wrapper header .header_logo {
    width: 24.0213523132vw;
    margin: 0 auto 20vw;
  }
  div#sp_root_wrapper section {
    width: 100%;
    height: auto;
    padding: 14vw 0;
  }
  div#sp_root_wrapper section h2.text {
    width: 90%;
    margin: 0 auto 6vw;
    height: auto;
    text-align: center;
    border-bottom: 2px solid #abaaa9;
    padding: 7.5vw;
  }
  div#sp_root_wrapper section h2.imgtitle {
    margin: 10vw 0;
    width: 100%;
    height: 15.8362989324vw;
    position: relative;
    overflow: hidden;
  }
  div#sp_root_wrapper section h2.imgtitle .h2inner {
    position: absolute;
    left: 50%;
    height: 100%;
    width: 327.4911032028vw;
    display: flex;
    flex-wrap: nowrap;
    transform: translateX(-50%);
  }
  div#sp_root_wrapper section h2.imgtitle .h2inner img {
    height: 100%;
    width: auto;
  }
  div#sp_root_wrapper .corp img {
    display: block;
    width: 98%;
    width: 21.2633451957vw;
    margin: 0 auto;
  }
  div#sp_root_wrapper .clients img {
    display: block;
    width: 83.0071174377vw;
    margin: 0 auto;
  }
  div#sp_root_wrapper .collection-haeder {
    padding-bottom: 0;
  }
  div#sp_root_wrapper .collection-haeder p, div#sp_root_wrapper .collection-haeder h3 {
    width: 80%;
    margin: auto;
    letter-spacing: 0.2em;
    line-height: 3em;
  }
  div#sp_root_wrapper .collection-haeder h3 {
    margin: 3em auto 2em;
  }
  div#sp_root_wrapper .collection-haeder p {
    margin: 0 auto 3em;
  }
  div#sp_root_wrapper .collection-haeder .imageblock {
    width: 98%;
    margin: auto;
  }
  div#sp_root_wrapper .collection-haeder .imageblock img {
    margin-bottom: 0.2vw;
  }
  div#sp_root_wrapper .sp_collection {
    padding: 0;
  }
  div#sp_root_wrapper .sp_collection .sp_workslist .works {
    padding-bottom: 30vw;
  }
  div#sp_root_wrapper .sp_collection .sp_workslist .works p {
    width: 86%;
    margin: 3vw auto;
  }
  div#sp_root_wrapper .sp_collection .sp_workslist .works .banner {
    width: 100%;
    height: 102.7046263345vw;
    overflow-y: hidden;
  }
  div#sp_root_wrapper .sp_collection .sp_workslist .works .banner img {
    width: 100%;
    height: auto;
  }
  div#sp_root_wrapper .sp_collection .sp_workslist .works .banner.mvabv img {
    margin-top: -10%;
  }
  div#sp_root_wrapper .concept {
    background: #000;
    padding: 1% 0;
  }
  div#sp_root_wrapper .concept .sp_service_slide {
    width: 100%;
    margin: 25vw auto;
  }
  div#sp_root_wrapper .concept .sp_service_slide .panel img.img1 {
    width: 72.6868327402vw;
    display: block;
    margin: 0 auto;
  }
  div#sp_root_wrapper .concept .sp_service_slide .panel img.img2 {
    width: 85.3202846975vw;
    display: block;
    margin: 0 auto;
  }
  div#sp_root_wrapper .concept .sp_service_slide .slick-dots {
    bottom: -20vw;
  }
  div#sp_root_wrapper .concept .sp_service_slide .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 0.9;
  }
  div#sp_root_wrapper .concept .sp_service_slide .slick-dots li button:before {
    color: #fff;
    opacity: 0.4;
  }
  div#sp_root_wrapper .concept .concept_contents {
    width: 98%;
    margin: auto;
    padding: 5vw 0 48vw;
  }
  div#sp_root_wrapper .concept .concept_contents p {
    width: 80%;
    margin: 10vw auto 20vw;
    color: #fff;
    font-size: 1.0555555556em;
    line-height: 3em;
    letter-spacing: 0.1em;
  }
  div#sp_root_wrapper .contact {
    padding: 10vw 0 5vw;
  }
  div#sp_root_wrapper .contact .infotext {
    width: 86%;
    margin: 50vw auto 50vw;
  }
  div#sp_root_wrapper .contact .infotext p {
    text-align: center;
    font-size: 1.3888888889em;
  }
  div#sp_root_wrapper .contact .infotext .flex {
    font-size: 1.8888888889em;
    display: flex;
  }
  div#sp_root_wrapper .contact .infotext .flex dt {
    width: 22%;
  }
  div#sp_root_wrapper .contact .infotext .flex dt, div#sp_root_wrapper .contact .infotext .flex dd {
    margin-bottom: 1em;
  }
  div#sp_root_wrapper .contact .infotext .flex.mail {
    margin: 10vw auto;
  }
  div#sp_root_wrapper .contact .infotext dd {
    margin-bottom: 1.5em;
  }
  div#sp_root_wrapper .companyprofile .prof {
    width: 86%;
    margin: 10vw auto 0;
  }
  div#sp_root_wrapper .companyprofile .prof dl {
    margin-bottom: 1.2em;
  }
  div#sp_root_wrapper .careers .cr_section {
    width: 86%;
    margin: 10vw auto 0;
  }
  div#sp_root_wrapper .careers .cr_section h3 {
    font-size: 1.6em;
    margin: 1em 0;
    font-weight: 600;
  }
  div#sp_root_wrapper .careers .cr_section h4 {
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.2em;
  }
  div#sp_root_wrapper .careers .cr_section a.btn {
    display: block;
    width: 90%;
    margin: 10vw auto 20vw;
  }
  div#sp_root_wrapper footer {
    background: #000;
    padding: 6vw 0;
  }
  div#sp_root_wrapper footer p {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 3.5587188612vw;
    letter-spacing: 0.2em;
  }
  div#sp_root_wrapper .navi_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    background: #ededed;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
  }
  div#sp_root_wrapper .navi_modal.active {
    visibility: visible;
    opacity: 1;
  }
  div#sp_root_wrapper .navi_modal .gnavi {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 10vw;
  }
  div#sp_root_wrapper .navi_modal .gnavi ul.navi {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  div#sp_root_wrapper .navi_modal .gnavi ul.navi li {
    text-align: center;
    margin-bottom: 10vw;
  }
  div#sp_root_wrapper .navi_modal .gnavi ul.navi li a {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #333;
    font-size: 5.3380782918vw;
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  #sp_imgviewer {
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll;
    height: 0;
    width: 100%;
    padding-top: 16vw;
    background: #ededee;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transition: opacity 0.6s, height 0.8s, visibility 0.6s;
    z-index: 20;
  }
  #sp_imgviewer.active {
    visibility: visible;
    opacity: 1;
    height: 100vh;
  }
  #sp_imgviewer header.viewer_header {
    background: #ededee;
    height: 16vw;
    width: 100%;
    position: fixed;
    top: 0;
    left: auto;
    z-index: 10;
    opacity: 0.9;
  }
  #sp_imgviewer header.viewer_header a#sp_worksclose {
    position: absolute;
    top: 1vw;
    right: 1vw;
    display: block;
    height: 14vw;
    width: auto;
  }
  #sp_imgviewer header.viewer_header a#sp_worksclose img {
    height: 100%;
    width: auto;
  }
  #sp_imgviewer .inner .worksslides {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */