@charset "UTF-8";
/*************************************
SIZE
*************************************/
/*************************************
COLORS
*************************************/
/*************************************
MIXINS
*************************************/
/*------------------------------------
animation
	*/
@keyframes maskAnim {
  0% {
    visibility: hidden;
    mask-image: none;
    opacity: 0;
    display: none;
  }
  99% {
    visibility: hidden;
    mask-image: var(--link);
    opacity: 1;
    display: block;
  }
  100% {
    visibility: visible;
    mask-image: var(--link);
    opacity: 1;
    display: block;
  }
}
@keyframes fingerAnim {
  0% {
    transform: translateX(20.5128205128vw);
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateX(-20.5128205128vw);
    opacity: 0;
  }
}
@keyframes loadBarAnim {
  0% {
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 7px);
  }
}
/*------------------------
COLOR
-------------------------*/
a {
  color: #000;
  text-decoration: none;
}

/*------------------------
TEXT SET
-------------------------*/
html {
  font-size: 62.5%;
}

body {
  font-family: "zen-old-mincho", serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  box-sizing: border-box;
}
.en {
  font-family: miller-banner, serif;
  font-weight: 600;
}

.sans {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/*------------------------
BASIC LAYOUT / MODULE
-------------------------*/
img {
  image-rendering: -webkit-optimize-contrast;
}

.pcHide {
  display: none;
}
@media screen and ( max-width : 768px ) {
  .pcHide {
    display: block;
  }
}

.spHide {
  display: block;
}
@media screen and ( max-width : 768px ) {
  .spHide {
    display: none;
  }
}

.lbx {
  cursor: pointer;
}

.tac {
  text-align: center;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.wrap {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
@media screen and ( max-width : 1024px ) {
  .wrap {
    padding: 0 20px;
  }
}

.minWrap {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

figure {
  margin: 0;
}

/*------------------------
RESET
-------------------------*/
body {
  word-wrap: break-word;
}

th, td {
  text-align: left;
  vertical-align: top;
  border: none;
}

caption {
  text-align: left;
}

img {
  border: 0;
  vertical-align: bottom;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

fieldset, img {
  border: 0;
}

a {
  outline: none;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

/*
	clearfix
------------------------------------- */
.clearfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

* html .clearfix {
  display: inline-block;
}

.clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/*html5の要素をblock*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
  box-sizing: border-box;
}

/*------------------------
FORM
-------------------------*/
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/*------------------------
TABLE
-------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
  width: 100%;
}

img {
  width: 100%;
}

body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.boxLink {
  cursor: pointer;
}

/*=============================
COMMON PARTS
==============================*/
#loadCover {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #FFF;
  position: fixed;
  z-index: 1000;
  top: 0;
  transition: opacity 1.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactBtn a {
  width: 27.6388888889vw;
  display: inline-block;
  border: 1px solid #000;
  padding: 0.6944444444vw;
  text-align: center;
  font-size: 0.9027777778vw;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  transition: background 0.4s;
}
@media screen and ( max-width : 768px ) {
  .contactBtn a {
    width: 64.1025641026vw;
    padding: 1.5384615385vw 2.0512820513vw;
    font-size: 3.0769230769vw;
    line-height: 1.3;
  }
}
.contactBtn a span {
  font-size: 0.7638888889vw;
  color: #333333;
}
@media screen and ( max-width : 768px ) {
  .contactBtn a span {
    font-size: 2.4358974359vw;
    display: inline-block;
    margin-top: 0.5128205128vw;
  }
}
@media screen and ( min-width : 769px ) {
  .contactBtn a:hover {
    background-color: #1e1e1e;
    color: #FFF;
  }
  .contactBtn a:hover span {
    color: #DDDDDD;
  }
}

.nextNav {
  display: none;
  pointer-events: none;
}

#infscr-loading {
  visibility: hidden;
  opacity: 0;
  z-index: -999;
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
}
#infscr-loading img {
  visibility: hidden;
  opacity: 0;
}

.loaded #circle {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  -webkit-border-radius: 100%;
  -ms-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: #000;
  position: fixed;
  z-index: 999;
  opacity: 0.3;
  transform-origin: center center;
  transition: all 0.3s ease-out;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and ( max-width : 768px ) {
  .loaded #circle {
    display: none;
  }
}
.loaded #circle.hover {
  pointer-events: none;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
}
@media screen and ( max-width : 768px ) {
  .loaded #circle.hover {
    display: none;
  }
}
.loaded #circle.acSm {
  opacity: 0.5;
  background: #101319;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}
@media screen and ( max-width : 768px ) {
  .loaded #circle.acSm {
    display: none;
  }
}
.loaded #circle.acLg {
  opacity: 0.7;
  background: #101319;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-30px);
}
@media screen and ( max-width : 768px ) {
  .loaded #circle.acLg {
    display: none;
  }
}
.loaded #circle.acLg:before {
  content: "DETAIL";
  display: block;
  color: #FFF;
  font-family: "noto-sans-cjk-jp", sans-serif;
}
@media screen and ( max-width : 768px ) {
  .loaded #circle.acLg:before {
    display: none;
  }
}
.loaded.touch #circle {
  display: none !important;
}
.loaded.touch #circle:before {
  display: none !important;
}

::selection {
  background: #efefef;
}

/*=============================
HEADER
==============================*/
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3888888889vw;
}
@media screen and ( max-width : 768px ) {
  header {
    padding: 3.8461538462vw;
  }
}

#logo {
  width: 29.8611111111vw;
}
@media screen and ( max-width : 768px ) {
  #logo {
    width: 51.2820512821vw;
  }
}

#gNav {
  display: flex;
  align-items: center;
  font-size: 1.5277777778vw;
  padding-right: 1.3888888889vw;
}
@media screen and ( max-width : 768px ) {
  #gNav {
    display: none;
  }
}
#gNav li {
  margin: 0 2.7777777778vw 0 0;
  line-height: 1;
  position: relative;
}
#gNav li:last-of-type {
  margin: 0;
}
#gNav li.ig {
  width: 1.8055555556vw;
}
#gNav .bar:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #000000;
  bottom: -0.2777777778vw;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
#gNav .bar:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}
#gNav .bar.ac:after {
  transform: scaleX(1);
}

/*=============================
DRAWER
==============================*/
#drawer {
  transition: all 0.2s;
  cursor: pointer;
  position: fixed;
  width: 11.5384615385vw;
  height: 3.0769230769vw;
  right: 3.8461538462vw;
  top: 12.8205128205vw;
  opacity: 1;
  pointer-events: auto;
  z-index: 800;
}
#drawer li {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
}
#drawer .no1 {
  top: 0;
  left: 0;
}
#drawer .no2 {
  bottom: 0;
  left: 0;
}

#modal {
  width: 100vw;
  height: 100dvh;
  background-color: rgba(255, 255, 255, 0.95);
  background-size: cover;
  background-position: center center;
  z-index: 110;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding-top: 33.3333333333vw;
}
#modal .inner {
  display: block;
  width: 100%;
}
#modal .ig {
  width: 100%;
  padding: 0 7.6923076923vw;
  padding-top: 5.5555555556vw;
  position: relative;
}
#modal .ig a {
  width: 6.6666666667vw;
  display: block;
  position: absolute;
  right: 7.6923076923vw;
}

#modalNav {
  font-size: 6.1538461538vw;
  padding: 7.6923076923vw;
  line-height: 1;
}
#modalNav li {
  position: relative;
  border-top: 1px solid #AAA;
  padding: 4.1025641026vw 0;
  width: 100%;
  background-image: url(../images/arrow_move.svg);
  background-repeat: no-repeat;
  background-position: right 0.6944444444vw center;
  background-size: 3.0769230769vw;
}
#modalNav li:last-of-type {
  border-bottom: 1px solid #AAA;
}
#modalNav li.ac a {
  color: #999;
}
#modalNav .bar a {
  display: inline-block;
  position: relative;
}

#modal {
  opacity: 0;
  pointer-events: none;
}
#modal .inner {
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s;
  filter: blur(2.0833333333vw);
}

#drawer li {
  transition: transform 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.menuOpen #modal {
  opacity: 1;
  pointer-events: auto;
}
.menuOpen #modal .inner {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
}

.menuOpen #drawer .no1 {
  transform: translateY(0.4166666667vw);
  background-color: #000 !important;
}
@media screen and ( max-width : 768px ) {
  .menuOpen #drawer .no1 {
    transform: translateY(1.5384615385vw);
  }
}
.menuOpen #drawer .no2 {
  transform: translateY(-0.3472222222vw);
  background-color: #000 !important;
}
@media screen and ( max-width : 768px ) {
  .menuOpen #drawer .no2 {
    transform: translateY(-1.2820512821vw);
  }
}

#content {
  padding: 3.4722222222vw 0;
}
@media screen and ( max-width : 768px ) {
  #content {
    padding: 23.0769230769vw 0 33.3333333333vw;
  }
}

/*=============================
TOPPAGE & ARCHIVE
==============================*/
.archivePage .titleArea {
  font-size: 2.4305555556vw;
  text-align: center;
}
@media screen and ( max-width : 768px ) {
  .archivePage .titleArea {
    font-size: 4.8717948718vw;
  }
}
.archivePage .titleArea .title {
  font-weight: 900;
  letter-spacing: 0.1em;
  padding-top: 1.8055555556vw;
  padding-bottom: 0.9722222222vw;
}
@media screen and ( max-width : 768px ) {
  .archivePage .titleArea .title {
    letter-spacing: 0.03em;
  }
}
.archivePage .titleArea .number {
  font-size: 0.9722222222vw;
}
@media screen and ( max-width : 768px ) {
  .archivePage .titleArea .number {
    font-size: 3.0769230769vw;
  }
}
.archivePage .titleArea .number span {
  display: inline-block;
  background-color: #000;
  color: #FFF;
  padding: 0.0694444444vw 0.2083333333vw;
  line-height: 1;
}
@media screen and ( max-width : 768px ) {
  .archivePage .titleArea .number span {
    padding: ptSp(1) 1.0256410256vw;
  }
}

.workItem {
  display: block;
  width: 70.8333333333vw;
  margin: 19.4444444444vw auto;
}
@media screen and ( max-width : 768px ) {
  .workItem {
    width: 86.4102564103vw;
    margin: 30.7692307692vw auto;
  }
}
.workItem.vImage {
  width: 46.5277777778vw;
}
@media screen and ( max-width : 768px ) {
  .workItem.vImage {
    width: 71.7948717949vw;
  }
}
.workItem .coverImage {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.workItem .coverImage img {
  display: block;
  border: solid 1.3888888889vw #FFFFFF;
  box-sizing: border-box;
}
@media screen and ( max-width : 768px ) {
  .workItem .coverImage img {
    border: solid 1.7948717949vw #FFFFFF;
  }
}
.workItem .mask {
  position: absolute;
  visibility: hidden;
  display: none;
  opacity: 0;
  left: 0;
  top: 0;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 150%;
  z-index: 1;
}
.workItem .base {
  filter: grayscale(100) brightness(1.4) contrast(1.2);
}

.workItem.ac .mask.no1 {
  --link: url("../images/mask.apng?q=1");
}
.workItem.ac .mask.no2 {
  --link: url("../images/mask.apng?q=2");
}
.workItem.ac .mask.no3 {
  --link: url("../images/mask.apng?q=3");
}
.workItem.ac .mask.no4 {
  --link: url("../images/mask.apng?q=4");
}
.workItem.ac .mask.no5 {
  --link: url("../images/mask.apng?q=5");
}
.workItem.ac .mask.no6 {
  --link: url("../images/mask.apng?q=6");
}
.workItem.ac .mask.no7 {
  --link: url("../images/mask.apng?q=7");
}
.workItem.ac .mask.no8 {
  --link: url("../images/mask.apng?q=8");
}
.workItem.ac .mask.no9 {
  --link: url("../images/mask.apng?q=9");
}
.workItem.ac .mask.no10 {
  --link: url("../images/mask.apng?q=10");
}
.workItem.ac .mask.no11 {
  --link: url("../images/mask.apng?q=11");
}
.workItem.ac .mask.no12 {
  --link: url("../images/mask.apng?q=12");
}
.workItem.ac .mask.no13 {
  --link: url("../images/mask.apng?q=13");
}
.workItem.ac .mask.no14 {
  --link: url("../images/mask.apng?q=14");
}
.workItem.ac .mask.no15 {
  --link: url("../images/mask.apng?q=15");
}
.workItem.ac .mask.no16 {
  --link: url("../images/mask.apng?q=16");
}
.workItem.ac .mask.no17 {
  --link: url("../images/mask.apng?q=17");
}
.workItem.ac .mask.no18 {
  --link: url("../images/mask.apng?q=18");
}
.workItem.ac .mask.no19 {
  --link: url("../images/mask.apng?q=19");
}
.workItem.ac .mask.no20 {
  --link: url("../images/mask.apng?q=20");
}
.workItem.ac .mask.no21 {
  --link: url("../images/mask.apng?q=21");
}
.workItem.ac .mask.no22 {
  --link: url("../images/mask.apng?q=22");
}
.workItem.ac .mask.no23 {
  --link: url("../images/mask.apng?q=23");
}
.workItem.ac .mask.no24 {
  --link: url("../images/mask.apng?q=24");
}
.workItem.ac .mask.no25 {
  --link: url("../images/mask.apng?q=25");
}
.workItem.ac .mask.no26 {
  --link: url("../images/mask.apng?q=26");
}
.workItem.ac .mask.no27 {
  --link: url("../images/mask.apng?q=27");
}
.workItem.ac .mask.no28 {
  --link: url("../images/mask.apng?q=28");
}
.workItem.ac .mask.no29 {
  --link: url("../images/mask.apng?q=29");
}
.workItem.ac .mask.no30 {
  --link: url("../images/mask.apng?q=30");
}
.workItem.ac .mask.no31 {
  --link: url("../images/mask.apng?q=31");
}
.workItem.ac .mask.no32 {
  --link: url("../images/mask.apng?q=32");
}
.workItem.ac .mask.no33 {
  --link: url("../images/mask.apng?q=33");
}
.workItem.ac .mask.no34 {
  --link: url("../images/mask.apng?q=34");
}
.workItem.ac .mask.no35 {
  --link: url("../images/mask.apng?q=35");
}
.workItem.ac .mask.no36 {
  --link: url("../images/mask.apng?q=36");
}
.workItem.ac .mask.no37 {
  --link: url("../images/mask.apng?q=37");
}
.workItem.ac .mask.no38 {
  --link: url("../images/mask.apng?q=38");
}
.workItem.ac .mask.no39 {
  --link: url("../images/mask.apng?q=39");
}
.workItem.ac .mask.no40 {
  --link: url("../images/mask.apng?q=40");
}
.workItem.ac .mask.no41 {
  --link: url("../images/mask.apng?q=41");
}
.workItem.ac .mask.no42 {
  --link: url("../images/mask.apng?q=42");
}
.workItem.ac .mask.no43 {
  --link: url("../images/mask.apng?q=43");
}
.workItem.ac .mask.no44 {
  --link: url("../images/mask.apng?q=44");
}
.workItem.ac .mask.no45 {
  --link: url("../images/mask.apng?q=45");
}
.workItem.ac .mask.no46 {
  --link: url("../images/mask.apng?q=46");
}
.workItem.ac .mask.no47 {
  --link: url("../images/mask.apng?q=47");
}
.workItem.ac .mask.no48 {
  --link: url("../images/mask.apng?q=48");
}
.workItem.ac .mask.no49 {
  --link: url("../images/mask.apng?q=49");
}
.workItem.ac .mask.no50 {
  --link: url("../images/mask.apng?q=50");
}
.workItem.ac .mask.no51 {
  --link: url("../images/mask.apng?q=51");
}
.workItem.ac .mask.no52 {
  --link: url("../images/mask.apng?q=52");
}
.workItem.ac .mask.no53 {
  --link: url("../images/mask.apng?q=53");
}
.workItem.ac .mask.no54 {
  --link: url("../images/mask.apng?q=54");
}
.workItem.ac .mask.no55 {
  --link: url("../images/mask.apng?q=55");
}
.workItem.ac .mask.no56 {
  --link: url("../images/mask.apng?q=56");
}
.workItem.ac .mask.no57 {
  --link: url("../images/mask.apng?q=57");
}
.workItem.ac .mask.no58 {
  --link: url("../images/mask.apng?q=58");
}
.workItem.ac .mask.no59 {
  --link: url("../images/mask.apng?q=59");
}
.workItem.ac .mask.no60 {
  --link: url("../images/mask.apng?q=60");
}
.workItem.ac .mask.no61 {
  --link: url("../images/mask.apng?q=61");
}
.workItem.ac .mask.no62 {
  --link: url("../images/mask.apng?q=62");
}
.workItem.ac .mask.no63 {
  --link: url("../images/mask.apng?q=63");
}
.workItem.ac .mask.no64 {
  --link: url("../images/mask.apng?q=64");
}
.workItem.ac .mask.no65 {
  --link: url("../images/mask.apng?q=65");
}
.workItem.ac .mask.no66 {
  --link: url("../images/mask.apng?q=66");
}
.workItem.ac .mask.no67 {
  --link: url("../images/mask.apng?q=67");
}
.workItem.ac .mask.no68 {
  --link: url("../images/mask.apng?q=68");
}
.workItem.ac .mask.no69 {
  --link: url("../images/mask.apng?q=69");
}
.workItem.ac .mask.no70 {
  --link: url("../images/mask.apng?q=70");
}
.workItem.ac .mask.no71 {
  --link: url("../images/mask.apng?q=71");
}
.workItem.ac .mask.no72 {
  --link: url("../images/mask.apng?q=72");
}
.workItem.ac .mask.no73 {
  --link: url("../images/mask.apng?q=73");
}
.workItem.ac .mask.no74 {
  --link: url("../images/mask.apng?q=74");
}
.workItem.ac .mask.no75 {
  --link: url("../images/mask.apng?q=75");
}
.workItem.ac .mask.no76 {
  --link: url("../images/mask.apng?q=76");
}
.workItem.ac .mask.no77 {
  --link: url("../images/mask.apng?q=77");
}
.workItem.ac .mask.no78 {
  --link: url("../images/mask.apng?q=78");
}
.workItem.ac .mask.no79 {
  --link: url("../images/mask.apng?q=79");
}
.workItem.ac .mask.no80 {
  --link: url("../images/mask.apng?q=80");
}
.workItem.ac .mask.no81 {
  --link: url("../images/mask.apng?q=81");
}
.workItem.ac .mask.no82 {
  --link: url("../images/mask.apng?q=82");
}
.workItem.ac .mask.no83 {
  --link: url("../images/mask.apng?q=83");
}
.workItem.ac .mask.no84 {
  --link: url("../images/mask.apng?q=84");
}
.workItem.ac .mask.no85 {
  --link: url("../images/mask.apng?q=85");
}
.workItem.ac .mask.no86 {
  --link: url("../images/mask.apng?q=86");
}
.workItem.ac .mask.no87 {
  --link: url("../images/mask.apng?q=87");
}
.workItem.ac .mask.no88 {
  --link: url("../images/mask.apng?q=88");
}
.workItem.ac .mask.no89 {
  --link: url("../images/mask.apng?q=89");
}
.workItem.ac .mask.no90 {
  --link: url("../images/mask.apng?q=90");
}
.workItem.ac .mask.no91 {
  --link: url("../images/mask.apng?q=91");
}
.workItem.ac .mask.no92 {
  --link: url("../images/mask.apng?q=92");
}
.workItem.ac .mask.no93 {
  --link: url("../images/mask.apng?q=93");
}
.workItem.ac .mask.no94 {
  --link: url("../images/mask.apng?q=94");
}
.workItem.ac .mask.no95 {
  --link: url("../images/mask.apng?q=95");
}
.workItem.ac .mask.no96 {
  --link: url("../images/mask.apng?q=96");
}
.workItem.ac .mask.no97 {
  --link: url("../images/mask.apng?q=97");
}
.workItem.ac .mask.no98 {
  --link: url("../images/mask.apng?q=98");
}
.workItem.ac .mask.no99 {
  --link: url("../images/mask.apng?q=99");
}
.workItem.ac .mask {
  animation: maskAnim 100ms forwards;
}

/*===========================================================*/
/*===========================================================*/
.bg {
  width: 100vw;
  height: 100vh;
  background-color: #FFF;
  position: fixed;
  z-index: -1;
  top: 0;
  opacity: 0;
  transition: all 1.2s;
}

.bg.view {
  opacity: 1;
}

.bgImage {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  filter: blur(3px);
  top: 0;
}

#debug {
  position: fixed;
  bottom: 200px;
  margin: auto;
  left: 0;
  right: 0;
  color: red;
  font-size: 18px;
  z-index: 999;
}

/*===========================================================*/
/*===========================================================*/
.bottom #gNav {
  opacity: 0;
  transition: opacity 0.9s;
}

.loaded.bottom #gNav {
  opacity: 1;
}

/*===========================================================*/
/*===========================================================*/
.loaded #content.aboutPage {
  opacity: 1;
}

#content.aboutPage {
  padding-top: 20.8333333333vw;
  width: 75vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 1.2s;
  transition-delay: 0.3s;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage {
    padding-top: 30.7692307692vw;
    width: 86.4102564103vw;
    flex-wrap: wrap;
  }
}
#content.aboutPage .photoArea {
  width: 27.7777777778vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .photoArea {
    width: 63%;
    margin: 0 auto;
  }
}
#content.aboutPage .textArea {
  width: 41.6666666667vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .textArea {
    width: 100%;
    padding-top: 5.1282051282vw;
  }
}
#content.aboutPage .textArea .title {
  font-size: 2.0833333333vw;
  margin-bottom: 1.7361111111vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .textArea .title {
    font-size: 7.1794871795vw;
    margin-bottom: 3.8461538462vw;
  }
}
#content.aboutPage .textArea .profile {
  line-height: 1.58;
  margin-bottom: 2.7777777778vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .textArea .profile {
    margin-bottom: 7.6923076923vw;
    margin-top: -1.2820512821vw;
  }
}
#content.aboutPage .textArea .profile .jp {
  font-size: 1.1805555556vw;
  margin-bottom: 1.1111111111vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .textArea .profile .jp {
    font-size: 3.0769230769vw;
    margin-bottom: 3.0769230769vw;
    text-align: justify;
  }
}
#content.aboutPage .textArea .profile .en {
  position: relative;
  padding-top: 1.1111111111vw;
  font-size: 1.1111111111vw;
  color: #444444;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .textArea .profile .en {
    font-size: 3.0769230769vw;
    padding-top: 3.0769230769vw;
    color: #222222;
    line-height: 1.4;
  }
}
#content.aboutPage .textArea .profile .en::before {
  content: "";
  display: block;
  position: absolute;
  width: 1.1111111111vw;
  height: 1px;
  background-color: #222222;
  top: 0;
  left: 0;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .textArea .profile .en::before {
    width: 4.1025641026vw;
  }
}
#content.aboutPage .exhibitionArea {
  margin-top: -0.6944444444vw;
  margin-bottom: 3.4722222222vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .exhibitionArea {
    margin-top: -1.2820512821vw;
    margin-bottom: 12.8205128205vw;
  }
}
#content.aboutPage .exhibitionArea .item {
  display: flex;
  margin-bottom: 1.7361111111vw;
  line-height: 1;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .exhibitionArea .item {
    margin-bottom: 3.8461538462vw;
  }
}
#content.aboutPage .exhibitionArea .year {
  width: 3.4722222222vw;
  font-size: 0.9722222222vw;
  color: #333333;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .exhibitionArea .year {
    width: 11.5384615385vw;
    font-size: 3.0769230769vw;
  }
}
#content.aboutPage .exhibitionArea .name {
  font-size: 1.1805555556vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .exhibitionArea .name {
    font-size: 3.5897435897vw;
    margin-top: -0.2564102564vw;
  }
}
#content.aboutPage .exhibitionArea .place {
  font-size: 0.8333333333vw;
  margin-top: 0.2777777778vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .exhibitionArea .place {
    font-size: 2.8205128205vw;
    margin-top: 1.0256410256vw;
  }
}
#content.aboutPage .instaLink {
  margin-bottom: 2.0833333333vw;
  font-size: 0.8333333333vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .instaLink {
    margin-bottom: 5.1282051282vw;
    font-size: 3.0769230769vw;
    margin-top: -2.5641025641vw;
  }
}
#content.aboutPage .instaLink .boxLink {
  display: flex;
  align-items: center;
}
#content.aboutPage .instaLink .boxLink::before {
  display: block;
  content: "";
  width: 1.5277777778vw;
  height: 1.5277777778vw;
  background-image: url(../images/ig.svg);
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 0.6944444444vw;
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .instaLink .boxLink::before {
    width: 5.1282051282vw;
    height: 5.1282051282vw;
    margin-right: 2.5641025641vw;
  }
}
@media screen and ( max-width : 768px ) {
  #content.aboutPage .contactBtn a {
    width: 100%;
    padding: 2.5641025641vw 2.0512820513vw;
    font-size: 3.0769230769vw;
    line-height: 1.3;
  }
}

/*===========================================================*/
/*===========================================================*/
.loaded #content.errorPage {
  opacity: 1;
}

#content.errorPage {
  opacity: 0;
  padding-top: 16.6666666667vw;
  width: 75vw;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1.2s;
  transition-delay: 0.3s;
}
@media screen and ( max-width : 768px ) {
  #content.errorPage {
    padding-top: 38.4615384615vw;
    width: 86.4102564103vw;
    flex-wrap: wrap;
  }
}
#content.errorPage h3 {
  font-size: 4.8611111111vw;
  color: #AAAAAA;
  text-align: center;
}
@media screen and ( max-width : 768px ) {
  #content.errorPage h3 {
    font-size: 8.9743589744vw;
  }
}
#content.errorPage .caption {
  font-size: 1.25vw;
  line-height: 2;
  text-align: center;
}
@media screen and ( max-width : 768px ) {
  #content.errorPage .caption {
    font-size: 3.5897435897vw;
    padding-top: 5.1282051282vw;
  }
}
#content.errorPage .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4.1666666667vw;
}
@media screen and ( max-width : 768px ) {
  #content.errorPage .btn {
    padding-top: 15.3846153846vw;
  }
}
#content.errorPage .btn a {
  display: inline-block;
  border: 1px solid;
  padding: 0.6944444444vw 1.3888888889vw;
  font-size: 0.8333333333vw;
  background-color: rgba(255, 255, 255, 0);
  transition: background 0.4s;
}
@media screen and ( max-width : 768px ) {
  #content.errorPage .btn a {
    padding: 2.0512820513vw 7.6923076923vw;
    font-size: 2.8205128205vw;
  }
}
#content.errorPage .btn a:hover {
  background-color: #000;
  color: #FFF;
}

/*===========================================================*/
/*===========================================================*/
footer {
  padding: 3.4722222222vw 0 2.0833333333vw;
  text-align: center;
  font-size: 0.6944444444vw;
  color: #555555;
}
@media screen and ( max-width : 768px ) {
  footer {
    padding: 5.1282051282vw 0 3.8461538462vw;
    font-size: 2.0512820513vw;
  }
}