*{
  all:unset;
  display:revert;
}


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

s {
  text-decoration: line-through;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

.del{
  text-decoration: line-through;
}
.caution {
  color: var(--color-theme);
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}


:root {
  --color-theme: #CE424D;
  --color-body: #212529;
  --color-link: #435ED8;
  --color-black: #212529;
  --color-graydark: #495057;
  --color-graylight: #909AA4;
  --color-gray3: #dee2e6;
  --color-gray2: #e9ecef;
  --color-blue: #435ED8;
  --color-white: #FFFFFF;
  --color-na: #F7F3F4;
  --font-nav-scale:20px;
  --font-body-scale:15px;
  --font-heading-scale:15px;
  --font-button-scale:12px;
  --spacing-content:16px;
  --spacing-sections:32px;
  --width-content:1200px;
  --width-content-s:768px;
}

.sm-hide {
  display: block;
}
.lg-hide {
  display: none;
}

.hide {
  display: none !important;
}


body {
  background-color: var(--color-white);
  color: var(--color-body);
  font-family: "zen-old-mincho", sans-serif;
  font-weight: 400;
  font-style: normal;
}



/* font */

h1,
h2,
h3,
h4 {
  display: block;
  width: 100%;
  margin: 0;
  font-weight: normal;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 400;
  font-style: normal;
}

h1,
.font-h1 {
  font-size: calc(var(--font-heading-scale) * 2.0);
  line-height: 1.5;
}

h2,
.font-h2,
.rte .font-h2{
  font-size: calc(var(--font-heading-scale) * 2.0);
  line-height: 1.5;
}

h3,
.font-h3 {
  font-size: calc(var(--font-heading-scale) * 1.6);
  line-height: 1.5;
}

h4,
.font-h4 {
  font-size: calc(var(--font-heading-scale) * 1.33333);
  line-height: 1.5;
}


.font-subtitle {
  font-size: calc(var(--font-heading-scale) * 1.0);
  line-height: 1.5;
}

.font-button {
  font-size: var(--font-button-scale);
  line-height: 1.0;
}

.font-body1,
.font-body1 p {
  font-size: var(--font-body-scale);
  line-height: 2.0;
}

.font-body2,
.font-body2 p {
  font-size: calc(var(--font-body-scale) * 0.8) !important;
  line-height: 2.0;
}

.font-caption {
  font-size: 12px;
  line-height: 2.0;
}

.text-center {
  text-align: center;
}

ul {
  list-style: none;
}

p,
table,
ul li,
dl dt,
dl dd {
  color: var(--color-body);
}

dl a,
li a,
p a{
  text-decoration: none;
  color: var(--color-blue);
}

dl a:hover,
li a:hover,
p a:hover,
a:hover img{
  opacity: 0.6;
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all  0.2s ease-in-out;
}

a {
  cursor: pointer;
}

.quote {
  padding: calc(var(--spacing-content) * 2);
  background-color: var(--color-na);
}

/* /font */


/* common */
.inner {
  padding-right: calc(var(--spacing-sections) * 1);
  padding-left: calc(var(--spacing-sections) * 1);
  width: 100vw;
  max-width:var(--width-content);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.inner.inner-s {
  max-width:var(--width-content-s);
}
.inner.inner-vw {
  max-width:100vw;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.rte{
  display: flex;
  flex-wrap: wrap;
  gap:calc(var(--spacing-content) * 1) 0;
}
.rte .rte-title {
  padding-bottom: calc(var(--spacing-content) * 0);
}

.rte h3{
  font-size: var(--font-body-scale);
  border-bottom: 1px solid var(--color-body);
  padding-bottom: calc(var(--spacing-content) * 0.6);
  margin-bottom: calc(var(--spacing-content) * 0.6);
}

.rte h3 + p{
  margin-top: calc(0 - var(--spacing-content));
}

.rte p{
  display: block;
  width: 100%;
}

.rte dl {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-body);
  padding-top: calc(var(--spacing-sections) * 0.5);
  width: 100%;
}

  .rte dl dt,
  .rte dl dd{
    display: block;
  }
  .rte dl dt {
    width: 60px;
    border-bottom: 1px solid var(--color-body);
    padding-bottom: calc(var(--spacing-sections) * 0.5);
    margin-bottom: calc(var(--spacing-sections) * 0.5);
  }
  .rte dl dd {
    width: calc(100% - 60px);
    padding-left: 1em;
    border-bottom: 1px solid var(--color-body);
    padding-bottom: calc(var(--spacing-sections) * 0.5);
    margin-bottom: calc(var(--spacing-sections) * 0.5);
    padding-left: calc(var(--spacing-sections) * 0.5);
  }

  .rte dl.credit dt {
    width: 80px;
  }
  .rte dl.credit dd {
    width: calc(100% - 80px);
  }

  .rte ul {
    list-style: circle;
    list-style-position: outside;
    padding-left: 32px;
    display: block;
    line-height: 1;
  }
  .rte ul li{
    line-height: 1.5;
    padding: 8px 0 0;
  }
  .rte ul li:first-child{
    padding: 0px 0 0;
  }
  .rte-item {
    display: block;
    width: 100%;
  }
    .rte-item ul,
    .rte-item p{
      margin: 8px 0;
    }
    .rte-item ul:first-child,
    .rte-item p:first-child{
      margin: 0px 0 8px;
    }

.embed {
  display: block;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

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

.btn {
  width: 100%;
}

.link-btn,
.btn-more{
  display: inline-block;
  font-size: calc(var(--font-body-scale) * 1.0);
  line-height: 1.5;
  padding: 8px 16px;
  cursor: pointer;
}

.link-btn.link-btn-primary {
  color: var(--color-white);
  background-color: var(--color-theme);
  border:1px solid var(--color-theme);
}
.link-btn.link-btn-primary:hover {
  opacity: 1;
  color: var(--color-theme);
  background-color: var(--color-white);
}
.link-btn.link-btn-primary.link-btn-sogetsu {
  color: var(--color-body) !important;
  background-color: #b5ddb0;
  border:1px solid #b5ddb0;
}
.link-btn.link-btn-primary.link-btn-sogetsu:hover {
  opacity: 1;
  color: #b5ddb0 !important;
  background-color: var(--color-body) !important;
}

.link-btn.link-btn-secondary,
.btn-more.btn-more-secondary {
  color: var(--color-theme);
  border:1px solid var(--color-theme);
}
.link-btn.link-btn-secondary:hover,
.btn-more.btn-more-secondary:hover {
  opacity: 1;
  color: var(--color-white);
  background-color: var(--color-theme);
}

.link-btn.link-btn-theme {
  color: var(--color-theme);
  border:1px solid var(--color-body);
  background-color: var(--color-body);
  opacity: 0.8;
}
.link-btn.link-btn-theme:hover {
  opacity: 1;
  color: var(--color-body);
  background-color: var(--color-theme);
}

.btn-more-wrap {
  padding-top: calc(var(--spacing-content) * 1);
}

.btn-more-communication {
  margin-top: calc(var(--spacing-content) * 1);
}

.btn-remarks {
  display: block;
  width: 100%;
  padding-top: calc(var(--spacing-content) * 0.5);
}


.link-instagram:link,
.link-instagram:visited {
  display: inline-block;
  background-image: url(/assets/images/icon-instagram-on.svg);
  background-repeat: no-repeat;
  background-size: 16px auto !important;
  background-position: left center;
  line-height: 16px;
  padding-left: 24px;
  color: var(--color-theme);
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  transition: all  0s ease-in-out;
}
.link-instagram:hover {
  display: inline-block;
  background-image: url(/assets/images/icon-instagram.svg);
  background-repeat: no-repeat;
  background-size: 16px auto !important;
  background-position: left center;
  line-height: 16px;
  padding-left: 24px;
  color: var(--color-body);
  opacity: 1 !important;
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  transition: all  0s ease-in-out;
}

.list-prof li {

}

.list-prof li a {

}



.hide {
  display: none !important;
}

.announcement {
  position: fixed;
  right: 0;
  top: 0;
  padding-top: calc(var(--spacing-sections) * 0);
  padding-right: calc(var(--spacing-sections) * 1);
  z-index: 998;
  opacity: 0;
}

.announcement.is-show{
  opacity: 1;
  transition: all 1s;
}

.announcement a {
  min-width: 151px;
}
/* /common */




/* header */

#header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: calc(var(--spacing-sections) * 1);
  padding-right: calc(var(--spacing-sections) * 1);
  padding-left: calc(var(--spacing-sections) * 1);
  padding-bottom: calc(var(--spacing-sections) * 1);
}

#header.header-page {
  justify-content: space-between;
}

#header .header-nav-info{
  width: 500px;
}

#header .header-hero{
  width: calc(100% - 500px - 32px);
  min-height: calc(100vh - calc(var(--spacing-sections) * 2));
}

#header .header-hero.header-hero-vh,
#header .header-hero.header-hero-sogetsu{
  width: calc(100% - 500px - 32px);
  min-height: calc(100vh - calc(var(--spacing-sections) * 2));
}

#header .header-hero.header-hero-img {
  min-height: auto;
  max-width: 680px;
}

#artwork {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.aw001.morning {
  background-image: url(/assets/images/artwork/a-image001.jpg);
}
#artwork.aw001.afternoon {
  background-image: url(/assets/images/artwork/a-image002.jpg);
}
#artwork.aw001.night {
  background-image: url(/assets/images/artwork/a-image003.jpg);
}

#artwork.aw002.morning {
  background-image: url(/assets/images/artwork/b-image003.jpg);
}
#artwork.aw002.afternoon {
  background-image: url(/assets/images/artwork/b-image002.jpg);
}
#artwork.aw002.night {
  background-image: url(/assets/images/artwork/b-image001.jpg);
}

#artwork.aw003.morning {
  background-image: url(/assets/images/artwork/c-image003.jpg);
}
#artwork.aw003.afternoon {
  background-image: url(/assets/images/artwork/c-image002.jpg);
}
#artwork.aw003.night {
  background-image: url(/assets/images/artwork/c-image001.jpg);
}

#artwork.sleeping {
  background-image: url(/assets/images/unpeople-h1.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.sogetsu {
  background-image: url(/assets/images/performance/performance-sougetsu-fix.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.fukuoka {
  background-image: url(/assets/images/performance/performance-11-2.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.nara {
  background-image: url(/assets/images/performance/performance-10-2.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.sapporo {
  background-image: url(/assets/images/performance/performance-12.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.hirosaki {
  background-image: url(/assets/images/performance/performance-13.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.kobe-2 {
  background-image: url(/assets/images/performance/performance-14.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.kobe-3 {
  background-image: url(/assets/images/performance/performance-14-pairing-2.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.kobe {
  background-image: url(/assets/images/performance/performance-14-live.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

#artwork.shibuya {
  background-image: url(/assets/images/performance/performance-04.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}
#artwork.yokohama {
  background-image: url(/assets/images/performance/performance-07.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}
#artwork.tokyo {
  background-image: url(/assets/images/performance/performance-08.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

.site-title {
  font-size: var(--font-nav-scale);
  line-height: 1.2;
}

.site-title span {
  display: inline-block;
  padding-left: calc(var(--spacing-content) * 2);
}


.site-info {
  padding: calc(var(--spacing-content) * 1);
  background-color: var(--color-theme);
  margin-top: calc(var(--spacing-sections) * 2);
}

/* /header */

/* nav */
#gb-nav {
  font-size: var(--font-nav-scale);
  line-height: 1.2;
  padding-top: calc(var(--spacing-sections) * 1);
}

#gb-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-sections) * 0.5) 0;
}

#gb-nav ul li {
  display: block;
  width: 100%;
}

  li.nav-inspiration{
    display:none !important;
  }

p a,
.rte a {
  color: var(--color-theme);
}
p a:hover,
.rte a:hover {
  color: var(--color-body);
  opacity: 1;
}

a.plain,
a.active:hover {
  color: var(--color-body);
  text-decoration: none;
  opacity: 1;
}
a.plain:hover,
a.active {
  color: var(--color-theme);
  text-decoration: none;
  opacity: 1;
}

.nav-icon {
}

.nav-icon a {
  display: inline-block;
  height: 20px;
}

.nav-icon img {
  display: inline-block;
  width: 20px;
  height: 20px;
}
/* /nav */




/* main */
#main {
  display: block;
}


.sec-body-content-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-sections) * 1) 0;
}

.sec-body-content-wrap-sh{
}

.sec-body-content-wrap-sh .content{
  margin-top: calc(var(--spacing-sections) * 2);
}
.sec-body-content-wrap-sh .content:first-child {
   margin-top: 0;
}


.content {
  width: 100%;
}

.content-lg {
  max-width: var(--width-content);
  margin: 0 auto;
}

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

.content .movie .embed,
.content .movie .movie-body {
  width: 100%;
}

.content .movie .movie-body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  padding-top: calc(var(--spacing-content) * 0.5);
  padding-left: calc(var(--spacing-sections) * 1);
  padding-right: calc(var(--spacing-sections) * 1);
}

.content .movie .movie-body .body-text-right {
  width: 50%;
  text-align: right;
}

.content .movie .movie-body .body-text-left {
  width: 50%;
  text-align: left;
}


.content .media {
  display: flex;
  flex-wrap: wrap;
}
.content .media.media-text{
  align-items: center;
  padding: calc(var(--spacing-content)* 2);
  background-color: var(--color-na);
}

.content .media.media-wr {
  flex-direction: row-reverse;
}

.content .text {
}

.content .communication {
  padding: calc(var(--spacing-content) * 2);
  background-color: var(--color-na);
}

.content .prof {
  padding: calc(var(--spacing-content) * 2);
  background-color: var(--color-na);
}

.content .prof .prof-title {
  font-size: calc(var(--font-body-scale) * 1.3);
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.content-child {
  padding-top: calc(var(--spacing-sections) * 1);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-content) * 2) 0;
}

.content-child .content-body,
.content-child .content-header {
  display: block;
  width: 100%;
}

.content-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-content) * 2) 0;
}

.content-list.content-list-1-2 {
  margin-left:-32px;
}

.content-list.content-list-1-2 li{
  display: block;
  width: calc(50% - 32px);
  margin-left: 32px;
}

.content-list-body {
  padding-top: calc(var(--spacing-content) * 1);
}
.content-list-body-text {
  padding-top: calc(var(--spacing-content) * 0.0);
}

.content-list-body-text .rte + a {
  margin-top: calc(var(--spacing-content) * 0.5);
}

.communication-more {
  display: none;
  padding-top: calc(var(--spacing-content) * 1);
}

  .communication-sh {
    margin-top: calc(var(--spacing-content) * 1);
    padding: calc(var(--spacing-content) * 1);
    background-color: var(--color-white);
  }

  .signature {
    text-align: right;
  }

.media-img {
  margin: 0;
  padding: 0;
  width: 42%;
}

.media-body {
  width: calc(100% - 42%);
  padding-left:calc(var(--spacing-sections) * 1);
}

.content .media.media-wr .media-body {
  width: calc(100% - 42%);
  padding-left:0;
  padding-right:calc(var(--spacing-sections) * 1);
}

.content .media.media-slide {
  display: flex;
  flex-wrap: wrap;
  padding-left: calc(var(--spacing-sections) * 0);
  padding-right: calc(var(--spacing-sections) * 0);
}

.media.media-slide .media-img {
  margin: 0;
  padding: 0;
  width: 50%;
}

.media.media-slide .media-body {
  width: calc(100% - 50%);
  padding-right:calc(var(--spacing-sections) * 1);
  padding-left:calc(var(--spacing-sections) * 0);
}


.btn-refresh {
  display: block;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: auto;
}

.sp-image-wrap .link-btn{
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 48px;
}

.btn-refresh img {
  display: block;
  width: 100%;
}

.sp-image-item {
  display: block;
  position: absolute;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: grayscale(100%);
  filter: brightness(0.7);
}
.sp-image-item:last-child {
  filter: grayscale(0%);
  filter: brightness(1);
}

  .sp-image-wrap {
    position: relative;
    width: 100%;
    height:90vh;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }

  .sp-image-item-w {
    width: auto;
    height: auto;
    max-width:60%;
    max-height: 70%;
  }

  .sp-image-item-h {
    width: auto;
    height: auto;
    max-width:80%;
    max-height: 80%;
  }

  .sp-image-item-001{
    margin: -3% auto auto -15%;
  }
  .sp-image-item-002{
    margin: 5% auto auto 6%;
  }
  .sp-image-item-003{
    margin: auto 2% 1% auto;
  }
  .sp-image-item-004{
    margin: 10% auto auto 15%;
  }
  .sp-image-item-005{
    margin: auto -15% 5% auto;
  }
  .sp-image-item-006{
    margin: 5% auto auto 5%;
  }
  .sp-image-item-007{
    margin: auto 10% 5% auto;
  }
  .sp-image-item-008{
    margin: 3% auto auto 10%;
  }
  .sp-image-item-009{
    margin: 3% 3% auto auto;
  }
  .sp-image-item-010{
    margin: auto auto 3% 7%;
  }
  .sp-image-item-011{
    margin: 5% 5% auto auto;
  }
  .sp-image-item-013{
    margin: auto auto 3% 3%;
  }
  .sp-image-item-017{
    margin: 2% auto 5% auto;
  }
  .sp-image-item-018{
    margin: -4% auto auto 4%;
  }

.slide-content {
  width: 100vw;
  overflow: scroll;
  padding: calc(var(--spacing-content) * 2) 0 0;
  display: block;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slide-content:first-child {
  padding: calc(var(--spacing-content) * 0) 0 0;
}

.scroll {
  margin: auto;
  overflow-x: auto;
  white-space: nowrap;
  width: 100vw;
  overflow-scrolling: touch;
  vertical-align: top;
  cursor: grab;
  padding-left: 32px;
}
.scroll:active{
  cursor: grabbing;
}
.scroll.scroll-left {
  padding-left: calc(100vw - 50vw);
  transition: all 1s;
}
.scroll.scroll-left.is-inview {
  padding-left: 32px;
  transition: all 1s;
}

.scroll-top {
  margin-top: calc(var(--spacing-content) * 2);
}

.scroll-top.is-inview {
  margin-top: 0px;
  transition: all 1s;
}


.scroll-item {
  display: inline-block;
  margin-right: 26px;
  position: relative;
  vertical-align: top;
  word-wrap: break-word;
}

.scroll-item p{
  display: inline;
  word-wrap: break-word;
}

  .scroll-item-sq{
    width: 320px;
    height: 320px;
    position: relative;
  }
  .scroll-item-na{
    background-color: var(--color-na);
  }
  .scroll-item-001 {
    background-image: url(/assets/images/single/001.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-002 {
    background-image: url(/assets/images/single/002.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-003 {
    background-image: url(/assets/images/single/003.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-004 {
    background-image: url(/assets/images/single/004.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-005 {
    background-image: url(/assets/images/single/005.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-006 {
    background-image: url(/assets/images/single/006.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-007 {
    background-image: url(/assets/images/single/007.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-008 {
    background-image: url(/assets/images/single/008.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .scroll-item-009 {
    background-image: url(/assets/images/single/009.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .scroll-item-mov {
    width: 568.88888px;
    padding-bottom: 320px;
    background-color: #F7F3F4;
    position: relative;
  }
    .scroll-item-mov iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .scroll-item-mov p{
      position: absolute;
      width: 100%;
      left: var(--spacing-content);
      top: var(--spacing-content);
    }

.artwork{

}

.artwork ul{
  display: flex;
  flex-wrap: wrap;
  margin-left: -32px;
  gap: 32px 0;
}

.artwork ul li{
  display: inline-block;
  width: calc(33.33333% - 32px);
  margin-left: 32px;
}

.artwork ul li img {
  width: 100%;
  height: auto;
}

.btn-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.slide-content + .btn-toggle-wrap {
  padding-top: calc(var(--spacing-content) * 2);
}

.credit-btn-toggle {
  padding-top: calc(var(--spacing-content) * 2);
  display: flex;
  flex-wrap: wrap;
}

.credit-btn-toggle .credit {
  width: 50%;
}

.credit-btn-toggle .btn-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 50%;
}

.toggle-wrap .sec-artwork,
.toggle-wrap.toggle-wrap-cl .sec-tl {
  display: none;
}

.toggle-wrap.toggle-wrap-cl .sec-artwork {
  display:flex;
}


.sec{
  margin-top: calc(var(--spacing-content) * 4);
  margin-bottom: calc(var(--spacing-content) * 8);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-sections) * 1) 0;
}

.sec:first-child {
}

.sec-header,
.sec-body{
  width: 100%;
}


.sec-header .btn-toggle,
.sec-header .btn-toggle-aw {
  position: absolute;
  right: calc(var(--spacing-sections) * 1);
  top: 0;
}

.sec-body-thumb + .sec-body-desc {
  padding-top: calc(var(--spacing-content) * 1);
}

.table-wrap {
  padding-right: calc(var(--spacing-sections) * 1);
  padding-left: calc(var(--spacing-sections) * 1);
  width: 100vw;
  max-width: var(--width-content);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.table .pub {
  width: 100%;
  border-top:1px solid var(--color-body);
  border-left:1px solid var(--color-body);
}

  .table .pub tr th,
  .table .pub tr td {
    border-right:1px solid var(--color-body);
    border-bottom:1px solid var(--color-body);
    padding: 6px 12px;
  }

  .table .pub tr th.fixed-vertical{
    background-color: var(--color-body);
    color: var(--color-white);
    border-right:1px solid var(--color-white);
  }

  .table .pub tr th.fixed-vertical:last-child{
    border-right:1px solid var(--color-body);
  }

  a.td-link-btn:link,
  a.td-link-btn:visited{
    color: var(--color-theme);
  }
  a.td-link-btn:hover{
    color: var(--color-body);
  }

/* /main */


/* footer */
#footer {
  text-align: center;
  padding: calc(var(--spacing-sections) * 2) calc(var(--spacing-sections) * 1) calc(var(--spacing-sections) * 2) ;
}

#footer-nav {
  padding-bottom: calc(var(--spacing-sections) * 1);
}

#footer-nav ul li{
  display: inline-block;
  padding-right: calc(var(--spacing-sections) * 0.5);
  padding-left: calc(var(--spacing-sections) * 0.5);
}
.footer-nav-icon {
  height: 20px;
}


/* /footer */


.chat-wrap{
  position: fixed;
  right: 32px;
  bottom: 32px;
  cursor: pointer;
}

.chat-wrap:hover .chat-title{
  background-color: var(--color-theme);
  color: #FFFFFF;
}

.chat-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0px 8px;
}

.chat-title {
  font-weight: 700;
  color: var(--color-theme);
  background-color: #FFFFFF;
  border: 2px solid var(--color-theme);
  padding: 8px 16px;
  border-radius: 24px;
  display: inline-block;
}

.icon-chat {
  width: 72px;
   display: inline-block;
}

.icon-chat img {
  display: block;
  width: 100%;
}

.sh-dm {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 100%;
  height: 360px;
  max-height: 100vh;
  max-width: 480px;
  overflow: scroll;
  background-color: #FFFFFF;
  box-shadow: 10px 5px 5px var(--color-graylight);
  padding: 16px 16px;
  border-radius: 16px;
  border: 2px solid var(--color-theme);
  letter-spacing: 0.05em;
  display: none;
}

.sh-dm-close {
  display: block;
  width: 32px;
  height: 32px;
  position: fixed;
  right: 16px;
  bottom: 376px;
}

.sh-dm-close img{
  display: block;
  width: 100%;
}

.sh-dm-title {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom:1px solid var(--color-graylight);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sh-dm-title p{
  padding-left: 8px;
}

.sh-dm-content {
  padding:16px 0 16px;
}

.sh-dm-content .sh-dm-content-q{
  width: 100%;
  padding-left: 64px;
}

.sh-dm-content .sh-dm-content-q .sh-dm-content-q-inner{
  background-color: #379aee;
  color: #FFFFFF !important;
  border-radius: 16px;
  padding: 16px;
}

.sh-dm-content .sh-dm-content-q .sh-dm-content-q-inner p{
  color: #FFFFFF !important;
}

.sh-dm-content-a{
  width: 100%;
  padding-right: 32px;
  padding-top: 32px;
  position: relative;
}

.sh-dm-content-a-inner {
  width: calc(100% - 40px);
}

.sh-dm-icon-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.sh-dm-icon {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background-image: url(/assets/images/icon-shuta.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.sh-dm-content-a-inner{
  background-color: #efefef;
  border-radius: 16px;
  padding: 16px;
}

.buy-ticket {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.sh-dm-btn {
  width: 24px;
  position: absolute;
  bottom: calc(50% - 32px);
  right: 0px;
  cursor: pointer;
}
.sh-dm-btn.active{
  opacity: 0.3;
}

.sh-dm-heart{
  width: 24px;
  position: absolute;
  bottom: -4px;
  right: 22px;
  display: none;
}

.slide-wrap .slick-prev,
.slide-wrap .slick-next{
    display: none !important;
}

.slide-wrap .slick-slide li{
  position: relative;
  display: block !important;
  height: auto;
  width: 100%;
  padding-bottom: 56.25%;
  padding-bottom: 66.6666%;
  background-color: var(--color-gray2);
}

.slide-wrap.slide-wrap-sq .slick-slide li{
  width: 100%;
  padding-bottom: 100%;
}

.slide-wrap .slick-slide li.test img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.slide-wrap .slick-slide li img{
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.slide-wrap .slick-dots li {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 0px;
    padding: 0;
    cursor: pointer;
}
.slide-wrap .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    padding: 3px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: 0;
    background: 0 0;
}

.slide-wrap .slick-dots li button:before {
    line-height: 12px;
    width: 12px;
    height: 12px;
}

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

  :root {
    --font-nav-scale:18px;
    --font-body-scale:13px;
    --font-heading-scale:13px;
    --spacing-content:16px;
    --spacing-sections:16px;
  }

  .sm-hide {
    display: none;
  }
  .lg-hide {
    display: block;
  }

  h1,
  .font-h1 {
  }

  h2,
  .font-h2 {
  }

  h3,
  .font-h3 {
  }
  h4,
  .font-h4 {
  }

  .font-body1,
  .font-body1 p {
  }

  .rte .rte-title {
    padding-bottom: calc(var(--spacing-content) * 0);
  }


  #header {
    position: relative;
    display: block;
    flex-wrap: wrap;
    padding-top: calc(var(--spacing-sections) * 0);
    padding-right: calc(var(--spacing-sections) * 0);
    padding-left: calc(var(--spacing-sections) * 0);
    padding-bottom: calc(var(--spacing-sections) * 0);
  }
  .site-title {
    font-size: calc(var(--font-nav-scale) * 1.1);
    line-height: 1.2;
  }

  .site-title a {
    display: block;
    position: relative;
    width: 100%;
  }
  .site-title a span {
    position: absolute;
    right: 0;
    top: 0;
  }

  .header-nav-info {
    padding-top: calc(var(--spacing-sections) * 2);
    padding-right: calc(var(--spacing-sections) * 1);
    padding-left: calc(var(--spacing-sections) * 1);
    padding-bottom: calc(var(--spacing-sections) * 2);
  }

  #header .header-nav-info {
    width: 100%;
  }
  #header .header-hero,
  #header .header-hero.header-hero-sogetsu,
  #header .header-hero.header-hero-vh {
    width: calc(100% - 0px);
    min-height: auto;
  }

  #artwork {
      width: 100%;
      height: 0;
      padding-bottom: 151.3671875%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.sogetsu {
      width: 100%;
      height: 0;
      padding-bottom: 124.8046875%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.fukuoka {
      width: 100%;
      height: 0;
      padding-bottom: 125%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.nara {
      width: 100%;
      height: 0;
      padding-bottom: 125%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.sapporo {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.hirosaki {
      width: 100%;
      height: 0;
      padding-bottom: 125%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.kobe,
  #artwork.kobe-2 {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.kobe-3 {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.shibuya {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.yokohama {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.tokyo {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
  }
  #artwork.sleeping {
    background-image: url(/assets/images/unpeople-h1.jpg);
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
  }

  #gb-nav ul {
    gap: calc(var(--spacing-sections) * 1) 0;
  }
  .site-info {
    padding: calc(var(--spacing-content) * 1);
    margin-top: calc(var(--spacing-sections) * 0);
  }

  .content-wrap {
    gap: calc(var(--spacing-sections) * 4) 0;
    margin-top: calc(var(--spacing-content) * 2);
    margin-bottom: calc(var(--spacing-content) * 6);
  }

  .content .movie .movie-body .body-text-right,
  .content .movie .movie-body .body-text-left {
    width: 100%;
    text-align: left;
  }

  .content .movie .movie-body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .media-img,
  .media-body {
    width: 100%;
  }
  .media-body {
    padding-left: calc(var(--spacing-sections) * 0);
    padding-top: calc(var(--spacing-content) * 1);
  }

  .content .media.media-wr .media-body {
    padding-left: calc(var(--spacing-sections) * 0);
    padding-right: calc(var(--spacing-sections) * 0);
    padding-top: calc(var(--spacing-content) * 1);
  }

  .content .media.media-wr .media-body {
      width: calc(100% - 0%);
  }

  .content .media.media-slide {
    flex-direction: column-reverse;
  }

  .media.media-slide .media-body {
    width: calc(100% - 0%);
    padding-right: calc(var(--spacing-sections) * 0);
    padding-left: calc(var(--spacing-sections) * 0);
  }
  .media.media-slide .media-img {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }

  .sp-image-wrap {
    position: relative;
    width: 100%;
    height:100vw;
    max-width: var(--width-content);
    margin: 0 auto;
    overflow: hidden;
  }

  .sp-image-item-w {
    width: auto;
    height: auto;
    max-width:90%;
    max-height: 80%;
  }

  .sp-image-item-h {
    width: auto;
    height: auto;
    max-width:80%;
    max-height: 70%;
  }

  .sp-image-item-001{
    margin: -3% auto auto -3%;
  }
  .sp-image-item-002{
    margin: 5% auto auto 6%;
  }
  .sp-image-item-003{
    margin: auto 2% 1% auto;
  }
  .sp-image-item-004{
    margin: 1.5% auto -1% auto;
  }
  .sp-image-item-005{
    margin: auto auto 5% 1%;
  }
  .sp-image-item-006{
    margin: 5% auto auto 5%;
  }
  .sp-image-item-007{
    margin: auto 10% 5% auto;
  }
  .sp-image-item-008{
    margin: 3% auto auto 10%;
  }
  .sp-image-item-009{
    margin: 3% 3% auto auto;
  }
  .sp-image-item-010{
    margin: auto auto 3% 7%;
  }
  .sp-image-item-011{
    margin: 5% 5% auto auto;
  }
  .sp-image-item-013{
    margin: auto auto 3% 3%;
  }
  .sp-image-item-017{
    margin: 2% auto 5% auto;
  }
  .sp-image-item-018{
    margin: -4% auto auto 4%;
  }

.scroll {
  padding-left: 16px;
}
.scroll:active{
  cursor: grabbing;
}

.scroll.scroll-left {
  padding-left: calc(100vw - 32px);
  transition: all 1s;
}
.scroll.scroll-left.is-inview {
  padding-left: 16px;
  transition: all 1s;
}

.scroll-item {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  vertical-align: top;
}
  .scroll-item-sq{
    width: 193px;
    height: 193px;
    position: relative;
  }

  .scroll-item-mov {
    width: 343px;
    padding-bottom: 193px;
    background-color: #F7F3F4;
    position: relative;
  }

  .artwork ul{
    display: flex;
    flex-wrap: wrap;
    margin-left: 0px;
    gap: 16px 0;
  }

  .artwork ul li{
    display: inline-block;
    width: calc(100% - 0px);
    margin-left: 0px;
  }

  .credit-btn-toggle {
    padding-top: calc(var(--spacing-content) * 1);
    display: flex;
    flex-wrap: wrap;
  }

  .credit-btn-toggle .credit {
    width: 100%;
  }

  .credit-btn-toggle .btn-toggle-wrap {
    padding-top: calc(var(--spacing-content) * 1);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }


  .sec {
      margin-top: calc(var(--spacing-content) * 2);
      margin-bottom: calc(var(--spacing-content) * 4);
      gap: calc(var(--spacing-sections) * 2) 0;
  }

  .sec-body-content-wrap {
      gap: calc(var(--spacing-sections) * 2) 0;
  }

  .content .communication {
    padding: calc(var(--spacing-content) * 1);
  }

  .content-list-body {
    padding-top: calc(var(--spacing-content)* 0.5);
  }

  .content-list.content-list-1-2 {
    margin-left:-16px;
  }

  .content-list.content-list-1-2 li{
    display: block;
    width: calc(50% - 16px);
    margin-left: 16px;
  }

  #footer {
    text-align: left;
    padding: calc(var(--spacing-sections) * 2) calc(var(--spacing-sections) * 1) calc(var(--spacing-sections) * 2);
  }

  #footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-sections) * 1) 0;
    width: 100%;
  }

  #footer-nav ul li {
    display: block;
    padding-right: calc(var(--spacing-sections) * 0);
    padding-left: calc(var(--spacing-sections) * 0);
    width: 100%;
  }

  .icon-chat {
    width: 48px;
     display: inline-block;
  }

  .sh-dm {
      position: fixed;
      right: 0px;
      bottom: 0px;
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      max-width: 100vw;
      border-radius: 0px;
      border: 3px solid var(--color-theme);
      display: none;
      z-index: 999;
  }

  .sh-dm-close {
    right: 16px;
    bottom: auto;
    top: 16px;
    z-index: 999;
  }
  .sh-dm-inner{
    position: relative;
    z-index: 998;
  }

}