/* 入口 */
@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
    /* -------- */
    font-size: inherit;
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* regular */
    font-style: normal;
    letter-spacing: 0.024em;
    line-height: 1.4;
    background-repeat: no-repeat;
    outline: none;
    /* debug */
    /* outline: 1px solid rgba(255, 0, 255, 0.2) !important; */
    /* background: rgba(0, 255, 0, 0.05) !important; */
    /* -------- */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
    /* -------- */
    font-size: 1.1rem;
    /* -------- */
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*--------------------------------------------------------------------*
 * reset
 *--------------------------------------------------------------------*/
html {
  font-size: 10px;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 10px;
  }
}

body {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
}

img {
  vertical-align: bottom;
}

a:link,
a:visited,
a:hover,
a:active {
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
}

/* bootstrap */
.container {
  padding-right: 0;
  padding-left: 0;
}

.row {
  margin-right: 0;
  margin-left: 0;
  width: 100%
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, 
.col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, 
.col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, 
.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, 
.col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, 
.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, 
.col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, 
.col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, 
.col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, 
.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-right: 0;
  padding-left: 0;
}

hr {
  margin: 8px 0;
  border-top: 1px solid rgba(224, 224, 224, 0.3);
}

p,
li {
  margin-bottom: 2px;
}

/*--------------------------------------------------------------------*
 * 
 *--------------------------------------------------------------------*/
.bx1 {
  padding: 24px 0 40px 0;
}

.bx2 {
  padding: 24px 0 24px 0;
}

.bx3 {
  padding: 8px 24px;
}

.bx3-b {
  padding: 8px 24px 0 24px;
}

.bx3-1 {
  padding: 6px 22px;
}

.bx3-2,
#gallery .bx3grid {
  padding: 4px 20px;
}

.bx3-4,
#portfolio .bx3grid {
  padding: 0px 8px;
}

.bx4,
#cv h3.hdln,
#contact h3.hdln,
#gallery h3.hdln {
  padding: 8px 0;
}

.bx44 {
  padding: 16px;
}

.bx4t {
  padding: 8px 0 0 0;
}

.bx4b {
  padding: 0 0 8px 0;
}

.bx41 {
  padding: 0 1px 1px 0;
}

.dash1, .dash2, .dash3 {
  background-image: url(dashes_w50_h17.svg);
  background-repeat: no-repeat;
  height: 17px;
  width: 100%;
}

.dash1 {
  background-position: 0 0;
}

.dash2 {
  background-position: -50px -17px;
}

.dash3 {
  background-position: 0 -34px;
}

.nowrap {
  display: inline-block;
}

/*--------------------------------------------------------------------*
 * masonry .grid .grid-item .grid-sizer
 *--------------------------------------------------------------------*/
.grid .filterDiv {
  display: none; /* Hidden by default */
}

.grid .show {
  display: block;
}

#gallery .grid-item {
  padding: 4px;
}

#portfolio .grid-item {
  padding: 16px;
}

/* default (minimum) fluid 2 columns */
.grid-sizer           { width: 50%; }
.grid-item            { width: 50%; }
.grid-item--widthm    { width: 100%; }/*576*/
.grid-item--widthl    { width: 100%; }
.grid-item--widthxl   { width: 100%; }

/* sm */
@media screen and (min-width: 576px) {
  .grid-sizer         { width: 50%; }
  .grid-item          { width: 50%; }/*288*/
  .grid-item--widthm  { width: 50%; }
  .grid-item--widthl  { width: 100%; }/*576*/
  .grid-item--widthxl { width: 100%; }
}

/* md */
@media screen and (min-width: 768px) {
  .grid-sizer         { width: 33.333%; }
  .grid-item          { width: 33.333%; }
  .grid-item--widthm  { width: 33.333%; }
  .grid-item--widthl  { width: 66.666%; }
  .grid-item--widthxl { width: 100%; }/*768*/
}

/* lg */
@media screen and (min-width: 992px) {
  .grid-sizer         { width: 25%; }
  .grid-item          { width: 25%; }
  .grid-item--widthm  { width: 25%; }
  .grid-item--widthl  { width: 50%; }
  .grid-item--widthxl { width: 75%; }
}

/* xl */
@media screen and (min-width: 1200px) {
  .grid-sizer         { width: 20%; }
  .grid-item          { width: 20%; }
  .grid-item--widthm  { width: 20%; }
  .grid-item--widthl  { width: 40%; }
  .grid-item--widthxl { width: 60%; }
}

/*--------------------------------------------------------------------*
 * photoswipe override
 *--------------------------------------------------------------------*/
.my-gallery figcaption {
  display: none; /* hidden by default */
}

.pswp__button,
.pswp__counter,
.pswp__button--close,
.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom,
.pswp__caption,
.pswp__top-bar .masthead,
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0.7;
}

.pswp__button:focus,
.pswp__button:hover,
.pswp__button:active,
.pswp__ui--over-close .pswp__button--close,
.pswp__top-bar .masthead:hover {
  opacity: 1;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background-color: rgba(0, 0, 0, 0.3);
}

.pswp__top-bar,
.pswp__ui--fit .pswp__top-bar {
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 0px solid rgba(255, 255, 255, 0);
}

.pswp__caption,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}

.pswp__button,
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--left:before,
.pswp--has_mouse .pswp__button--arrow--right,
.pswp--has_mouse .pswp__button--arrow--right:before {
  -webkit-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left:before,
.pswp--has_mouse .pswp__button--arrow--right:before {
  transition: opacity 0.66s ease;
}

.pswp__ui--idle .pswp__button--arrow--left:before,
.pswp__ui--idle .pswp__button--arrow--right:before {
  opacity: 0;
}

.pswp__button--close,
.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom {
  width: 40px;
  height: 40px;
  float: none;
}

.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
  background-image: url(custom-skin.svg);
}

.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
  background: none;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  height: 32px;
  border-radius: 50%;
}

.pswp__counter {
  position: relative;
  height: 40px;
  line-height: 40px;
  margin-top: -40px;
  text-align: center;
}

.pswp__button--close,
.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom {
  position: relative;
  top: 0;
  height: 40px;
  line-height: 40px;
  margin-top: -40px;
  margin-left: auto;
  margin-right: 10px;
}

.pswp__button--zoom {
  margin-right: 50px;
}

.pswp__button--share {
  margin-right: 90px;
}

.pswp__button--fs {
  margin-right: 130px;
}

.pswp__button--close {
  background-position: -10px -44px;
}

.pswp__button--zoom {
  background-position: -98px 0;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -142px 0;
}

.pswp__caption {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  color: #fff; 
}

.pswp__caption__center {
  max-width: none; /* overridden by media below */
  margin: 0;
  font-size: inherit;
  padding: 0;
  line-height: normal;
  color: #fff;
}

.pswp__top-bar {
  height: 40px;
  margin: 0 auto; 
}

.pswp__top-bar .masthead {
  z-index: 200;
  color: rgba(255, 255, 255, 1);
}

.psbx {
  height: 40px;
  margin-right: auto;
  margin-left: auto;
  padding: 0px;
  line-height: 40px;
}

.psbx1 {
  padding: 0;
}

.psbx2 {
  padding: 8px 0px 8px 0px;
}

.psbx3 {
  padding: 0px 24px;
}

.psbx3 p {
  margin-bottom: 0;
}

.pswp__caption--fake .psbx2 {
  margin-right: auto;
  margin-left:  auto;
  padding: 8px 0px 8px 0px;
  /* debug */
  /* color: rgba(0, 255, 0, 1); */
  /* background-color: rgba(255, 0, 255, 0.3); */
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  /* debug */
  /* visibility: visible; */
}

.pswp__preloader {
  top: 50vh;
  margin: -22px 0 0 -22px;
  visibility: hidden;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: absolute;
    left: 50%;
    top: 50vh;
    margin: -22px 0 0 -22px;
    float: none;
  }
}

.pswp__preloader--active {
  visibility: visible;
}

.pswp--css_animation .pswp__preloader__icn {
  opacity: 1;
}

.pswp__ui--idle .pswp__caption {
  opacity: 0;
}

/* sm */
@media screen and (min-width: 576px) {
  .psbx, .psbx1, .pswp__caption--fake .psbx2 { max-width: 540px; width: 540px; }
}

/* md */
@media screen and (min-width: 768px) {
  .psbx, .psbx1, .pswp__caption--fake .psbx2 { max-width: 720px; width: 720px; }
}

/* lg */
@media screen and (min-width: 992px) {
  .psbx, .psbx1, .pswp__caption--fake .psbx2 { max-width: 960px; width: 960px; }
}

/* xl */
@media screen and (min-width: 1200px) {
  .psbx, .psbx1, .pswp__caption--fake .psbx2 { max-width: 1140px; width: 1140px; }
}

.pswp__error-msg {
  width: 100% !important;
  text-align: center;
  font-size: inherit;
  color: #fff !important;
}

.pswp__error-msg a {
  color: #fff !important;
  text-decoration: none;
}







/*--------------------------------------------------------------------*
 * hover caption
 *--------------------------------------------------------------------*/
.hvrCap {
  width: 100%;
  padding-bottom: 98%;
  height: 0;
  display: block;
  overflow: hidden;
  position: relative;
}

.hvrCap .hcImg {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hvrCap .hcCap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  color: rgba(0, 0, 0, 1);
  vertical-align: bottom;
}

.hvrCap:hover .hcCap {
  opacity: 0.3;
}

.hvrCap .hcBtm {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px 16px;
  width: 100%;
}

.hcCap .idx_w {
  color: rgba(255, 255, 255, 1);
}

.hcCap .sub_w,
.hcCap .ext_w {
  color: rgba(255, 255, 255, 0.6);
}

@media (pointer: fine) {
  .hvrCap .hcCap {
    background-color: rgba(255, 0, 0, 0);
    transition: all 0.33s ease;
  }
  
  .hvrCap:hover .hcCap {
    opacity: 1;
    background-color: rgba(255, 0, 0, 1);
  }
  
  .hvrCap:hover .hcCap .idx {
    color: rgba(255, 255, 255, 1);
  }
  
  .hvrCap:hover .hcCap .sub,
  .hvrCap:hover .hcCap .ext {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .hvrCap:hover .hcBtm {
    background-color: transparent;
  }
}




/*--------------------------------------------------------------------*
 * font
 *--------------------------------------------------------------------*/
.ext,
.ext_w,
.credit,
.psbx3 .sub,
.pswp__caption p,
.pswp__counter {
  font-size: 1rem;
}

#header li a,
#header li span, .idx {
  font-size: 1.15rem;
}

#cv h3.hdln,
#contact h3.hdln,
#gallery h3.hdln,
.masthead {
  font-size: 1.3rem;
}

na {
  font-size: 1.6rem;
}

#home h2.hdln,
#notFound h2.hdln,
h2.hdln a {
  font-size: 2.6rem;
}

#home h2.hdln,
#notFound h2.hdln,
h2.hdln a {
  font-weight: 300; /* light */
  font-style: italic;
}

#cv h4 {
  font-style: italic;
}

.sub,
.ext,
.credit,
#cv .venue,
#cv .place,
#cv .notes {
  color: rgba(0, 0, 0, 0.6);
}

.sub a,
.ext a,
.credit a,
#cv .venue a,
#cv .place a,
#cv .notes a {
  color: rgba(255, 0, 0, 1);
}

.capSep {
  opacity: 0.6;
}

.credit,
.more {
  text-align: right;
}




/*--------------------------------------------------------------------*
 * header
 *--------------------------------------------------------------------*/
#header {
  z-index: 100;
  width: 100%;
  color: rgba(0, 0, 0, 1);
  background: rgba(255, 255, 255, 0.99);
  border-bottom: 1px solid rgba(224, 224, 224, 0.3);
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  transition: background 0.66s ease;
}

#header a:link,
#header a:visited,
#header a:hover,
#header a:active {
  color: rgba(0, 0, 0, 1);
}

#header .container,
#header .row,
#header .col,
#header h1 {
  height: 40px;
}

#header .masthead,
.pswp__top-bar .masthead {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 24px;
}

#header .masthead:hover {
  opacity: 0.3;
}

#header .masthead .mhSub,
.pswp__top-bar .masthead .mhSub {
  display: none;
}

@media screen and (min-width: 576px) {
  #header .masthead .mhSub,
  .pswp__top-bar .masthead .mhSub {
    display: inline;
  }
}

#header .masthead .dash2,
.pswp__top-bar .masthead .dash2 {
 display: inline-block;
  line-height: 17px;
  height:17px;
  width: 24px;
  text-indent: -9999px;
  margin: 0 8px;
}

#header .navToggle {
  z-index: 102;
  height: 40px;
  width: 40px;
  cursor: pointer;
  margin-left: auto;
  margin-right: 11px;
  background-image: url(navToggle_w40_h40.svg);
  background-position: 0 0;
}

#header .navToggle.open {
  background-position: 0 -40px;
}

#header .navMenu {
  z-index: 101;
  width: 192px;
  position: absolute;
  top: 41px; /* h1 height + border-bottom 1px */
  right: 24px; /* bx3 margin-right */
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.33s ease;
  transition-delay: 0.01s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#header .navMenu a:link,
#header .navMenu a:visited,
#header .navMenu a:active {
  color: rgba(0, 0, 0, 1);
}

#header .navMenu a:hover {
  color: rgba(255, 255, 255, 1);
}

#header .navMenu a:hover {
  opacity: 0.3;
}

#header .navMenu.open {
  transform: translateY(0%);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#header .navMenu ul li {
  background-color: rgba(255, 255, 255, 0.6);
  list-style-type: none;
  margin-bottom: 0px;
  _border-bottom: 1px solid rgba(224, 224, 224, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

#header .navMenu ul li:last-child{
  _border: none;
}

@media (pointer: fine) {
  #header .navToggle:hover {
    opacity: 0.3;
  }

  #header .navMenu ul li:hover,
  #header.top .navMenu ul li:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 0, 0, 1);
    transition: all 0.33s ease;
  }
  
  #header .navMenu a:hover {
    opacity: 1;
  }
}

#header .navMenu ul li a {
  display: block;
  padding: 8px 16px;
}

/* ---- top ---- */
#header.top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
}

#header.top a:link,
#header.top a:visited,
#header.top a:hover,
#header.top a:active {
  color: rgba(255, 255, 255, 1);
}

#header.top .masthead .dash2,
.pswp__top-bar .masthead .dash2 {
  background-position: 0 -17px;
}

#header.top .navToggle {
  background-position: -40px 0;
}

#header.top .navToggle.open {
  background-position: -40px -40px;
}

#header.top .navMenu ul li {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}






/*--------------------------------------------------------------------*
 * promo
 *--------------------------------------------------------------------*/
#promo::before {
  z-index: -100;
  -webkit-transform: translate3d(0, 0, -100px);
  transform: translate3d(0, 0, -100px);
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  -webkit-background-size: cover;
  background: url(../ebdb2d29b7e9150f34c03c6be2d4a368.jpg) center/cover no-repeat;
  margin-bottom: -100vh;
}

#promo .container {
  height: 100vh;
  overflow: hidden;
}

#promo .container .row {
  height: 100%;
}

#promo,
#promo a:link,
#promo a:visited,
#promo a:hover,
#promo a:active {
  color: rgba(0, 0, 0, 1);
  _text-shadow: 0px 0px 30px rgba(155, 155, 135, 1.0);
}

#promo .ext,
#promo .sub {
  color: rgba(0, 0, 0, 0.6);
  _text-shadow: 0px 0px 30px rgba(155, 155, 135, 1.0);
}

#promo a:hover,
#promo .prmBar:hover {
  opacity: 0.3;
}

#promo .bx1 {
  padding-bottom: 0; /* .bx1 padding-bottom -> .prmBar height */
}

#promo .prmBar {
  background-image: url(prmBar.svg); 
  background-position: 0 0;
  height: 32px;
  width: 40px;
  opacity: 0.6;
  /*animation: prmMv 3s ease infinite;*/
}

@keyframes prmMv {
  0%    { transform:translateY(0) }
  1%    { transform:translateY(4px) }
  10%   { transform:translateY(0) }
  11%   { transform:translateY(4px) }
  20%   { transform:translateY(0) }
  100%  { transform:translateY(0) }
}




/*--------------------------------------------------------------------*
 * main
 *--------------------------------------------------------------------*/

#main {
  padding-top: 40px; /* header height */
  min-height: 100vh;
}

#home #main {
  padding-top: 0;
  min-height: 0;
}

#main a:link,
#main a:visited,
#main a:active {
  color: rgba(255, 0, 0, 1);
}

#main h2 a:link,
#main h2 a:visited,
#main h2 a:active {
  color: rgba(0, 0, 0, 1);
}

#main a:hover,
#main h2 a:hover {
  color: rgba(0, 0, 0, 0.3);
}

/* view selection */
.viewSel label {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
}

.viewSel .vsSep,
.sep {
  color: rgba(0, 0, 0, 0.3);
}

input[name="vsItem"] {
  display: none;
}

.viewSel input:checked + .vsItem {
  color: rgba(255, 0, 0, 1);
}

@media (pointer: fine) {
  .viewSel label:hover,
  .viewSel input:checked + .vsItem:hover {
    color: rgba(0, 0, 0, 0.3);
  }
}

/*--------------------------------------------------------------------*
 * cv
 *--------------------------------------------------------------------*/
#cv .en .exhTitle:before {
 content: "\201C"
}

#cv .en .exhTitle:after {
 content: "\201D"
}

#cv .en .place:before {
 content: "("
}

#cv .en .place:after {
 content: ")"
}

#cv .jp .exhTitle:before {
 content: "「"
}

#cv .jp .exhTitle:after {
 content: "」"
}

#cv .jp .place:before {
 content: "（"
}

#cv .jp .place:after {
 content: "）"
}

/*--------------------------------------------------------------------*
 * footer
 *--------------------------------------------------------------------*/
#footer {
  border-top: 1px solid rgba(224, 224, 224, 0.3);
  background: rgba(255, 255, 255, 1);
}

#footer ul li {
  padding-bottom: 2px;
}

#footer a:link,
#footer a:visited,
#footer a:active {
  color: rgba(0, 0, 0, 0.6);
}

#footer a:link.ftIdx,
#footer a:visited.ftIdx,
#footer a:active.ftIdx {
  color: rgba(0, 0, 0, 1);
}

#footer a:link.current,
#footer a:visited.current,
#footer a:active.current {
  color: rgba(255, 0, 0, 1);
}

#footer a:hover,
#footer a:hover.current,
#footer a:hover.ftIdx {
  color: rgba(0, 0, 0, 0.3);
}