@charset "UTF-8";
/* 数値から単位を除外
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* `px` から `rem` に変換
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* `px` から `em` に変換
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/**
 * Common Styles
 *
 * 01. Reset
 * 02. Base
 * 03. Layout
 * 04. Parts
 *
 */
/* ==========================================================================
   01. Reset
   ========================================================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* ==========================================================================
   02. Base
   ========================================================================== */
@media screen and (max-width: 767px) {
  html {
    font-size: 26.6666666667vw; } }
@media screen and (min-width: 768px), print {
  html {
    font-size: 468.75%; } }
@media screen and (min-width: 1200px) {
  html {
    font-size: 6.25vw; } }
@media screen and (min-width: 1600px), print {
  html {
    font-size: 625%; } }

*, *:before, *:after {
  box-sizing: border-box; }

body {
  font-family: 'Noto Serif JP', serif;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(15, 16, 17, 0.08);
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%; }
  @media screen and (min-width: 768px), print {
    body {
      font-size: 0.16rem;
      min-width: 1080px; } }
  @media screen and (max-width: 767px) {
    body {
      font-size: 0.14rem; } }
  body *,
  body *:before,
  body *:after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

body {
  color: #000;
  position: relative; }

@media screen and (min-width: 768px), print {
  .-contentsPc {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 12.4rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem; } }

@media screen and (max-width: 767px) {
  .-contentsSp {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 3.15rem; } }

@media screen and (max-width: 767px) {
  .-pcItem {
    display: none; } }

@media screen and (min-width: 768px), print {
  .-spItem {
    display: none; } }

::selection {
  color: #fff;
  background: rgba(15, 16, 17, 0.7); }

.article {
  width: 100%;
  overflow: hidden;
  min-height: 60vh; }
  @media screen and (min-width: 768px), print {
    .under .article {
      padding-top: 1.8rem; } }
  @media screen and (max-width: 767px) {
    .under .article {
      padding-top: 1rem; } }

/* ==========================================================================
   03. block
   ========================================================================== */
/**
 * Swiper 6.3.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 30, 2020
 */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal; }
:root {
  --swiper-theme-color: #007aff; }

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box; }

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0); }

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap; }

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column; }

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform; }

.swiper-slide-invisible-blank {
  visibility: hidden; }

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height; }

/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px; }

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d; }

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; }

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */ }

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none; }

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start; }

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory; }

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory; }

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */ }

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color)); }

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none; }

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1; }

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto; }

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev'; }

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto; }

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next'; }

.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff; }

.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000; }

.swiper-button-lock {
  display: none; }

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */ }

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10; }

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0; }

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%; }

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33); }

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2; }

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer; }

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color)); }

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0); }

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left; }

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right; }

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute; }

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top; }

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top; }

.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0; }

.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0; }

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff; }

.swiper-pagination-black {
  --swiper-pagination-color: #000000; }

.swiper-pagination-lock {
  display: none; }

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1); }

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%; }

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%; }

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0; }

.swiper-scrollbar-cursor-drag {
  cursor: move; }

.swiper-scrollbar-lock {
  display: none; }

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; }

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; }

.swiper-slide-zoomed {
  cursor: move; }

/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */ }

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent; }

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff; }

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000; }

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg); } }
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000; }

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out; }

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity; }

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-cube {
  overflow: visible; }

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%; }

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0; }

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible; }

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0; }

.swiper-container-flip {
  overflow: visible; }

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1; }

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.swiper-container-horizontal > .swiper-pagination-bullets
.swiper-pagination-bullet {
  display: inline-block;
  background-color: #d2d2d2;
  border-radius: 50%; }
  @media screen and (min-width: 768px), print {
    .swiper-container-horizontal > .swiper-pagination-bullets
    .swiper-pagination-bullet {
      width: 0.145rem;
      height: 0.145rem;
      margin-left: 0.13rem;
      margin-right: 0.13rem; } }
  @media screen and (max-width: 767px) {
    .swiper-container-horizontal > .swiper-pagination-bullets
    .swiper-pagination-bullet {
      width: 0.1rem;
      height: 0.1rem;
      margin-left: 0.08rem;
      margin-right: 0.08rem; } }
  .swiper-container-horizontal > .swiper-pagination-bullets
  .swiper-pagination-bullet.-active {
    background-color: #000; }

@media (hover: hover), screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /*カーソル*/
  #mouseCursor {
    position: fixed;
    z-index: 999999;
    /*一番手前に来るように*/
    pointer-events: none;
    transition: transform 0.1s, background-color .3s;
    transition-timing-function: ease-out;
    opacity: 0;
    /*開いた瞬間非表示*/
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35); } }
  @media screen and (hover: hover) and (min-width: 768px), screen and (-ms-high-contrast: active) and (min-width: 768px), screen and (-ms-high-contrast: none) and (min-width: 768px), print and (hover: hover) {
    #mouseCursor {
      width: 0.06rem;
      height: 0.06rem;
      top: -0.03rem;
      left: -0.03rem; } }
  @media screen and (hover: hover) and (max-width: 767px), screen and (-ms-high-contrast: active) and (max-width: 767px), screen and (-ms-high-contrast: none) and (max-width: 767px) {
    #mouseCursor {
      width: 0.04rem;
      height: 0.04rem;
      top: -0.02rem;
      left: -0.02rem; } }
@media (hover: hover), screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #mouseCursor.-active {
      background-color: rgba(0, 0, 0, 0.15); }
    body[data-modal="show"] #mouseCursor, .-openMenu #mouseCursor {
      background-color: rgba(255, 255, 255, 0.45); }
      body[data-modal="show"] #mouseCursor.-active, .-openMenu #mouseCursor.-active {
        background-color: rgba(255, 255, 255, 0.15); }

  /*ストーカー要素*/
  #mouseCursor__stalker {
    position: fixed;
    z-index: 999999;
    /*一番手前に来るように*/
    pointer-events: none;
    /*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
    transition: transform 0.3s, background-color .3s, background-color .3s;
    transition-timing-function: ease-out;
    opacity: 0;
    /*開いた瞬間非表示*/
    overflow: visible;
    border-radius: 50%; } }
  @media screen and (hover: hover) and (min-width: 768px), screen and (-ms-high-contrast: active) and (min-width: 768px), screen and (-ms-high-contrast: none) and (min-width: 768px), print and (hover: hover) {
    #mouseCursor__stalker {
      width: 0.5rem;
      height: 0.5rem;
      top: -0.25rem;
      left: -0.25rem; } }
  @media screen and (hover: hover) and (max-width: 767px), screen and (-ms-high-contrast: active) and (max-width: 767px), screen and (-ms-high-contrast: none) and (max-width: 767px) {
    #mouseCursor__stalker {
      width: 0.3rem;
      height: 0.3rem;
      top: -0.15rem;
      left: -0.15rem; } }
@media (hover: hover), screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #mouseCursor__stalker:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background-color: rgba(0, 0, 0, 0);
      width: 90%;
      height: 90%;
      transition: transform .5s, background-color .5s, border-color .5s;
      transform: translateX(-50%) translateY(-50%) scale(1);
      pointer-events: none; }
      body[data-modal="show"] #mouseCursor__stalker:before, .-openMenu #mouseCursor__stalker:before {
        border: 1px solid rgba(255, 255, 255, 0.25);
        background-color: rgba(255, 255, 255, 0); }
    #mouseCursor__stalker.-active:before {
      background-color: rgba(0, 0, 0, 0.1);
      border-color: rgba(0, 0, 0, 0);
      transform: translateX(-50%) translateY(-50%) scale(1.5); }
    body[data-modal="show"] #mouseCursor__stalker.-active:before, .-openMenu #mouseCursor__stalker.-active:before {
      background-color: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0); } }
.hamburger {
  position: absolute;
  z-index: 10;
  cursor: pointer; }
  @media screen and (min-width: 768px), print {
    .hamburger {
      width: 1.32rem;
      height: 0.76rem;
      top: 0.245rem;
      right: 0.28rem; } }
  @media screen and (max-width: 767px) {
    .hamburger {
      width: 0.95rem;
      height: 0.75rem;
      top: 0;
      right: 0; } }
  @media screen and (max-width: 767px) and (min-aspect-ratio: 375 / 667) {
    .hamburger {
      width: 0.85rem;
      height: 0.65rem; } }

  .hamburger:before, .hamburger:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #0f1011;
    transform-origin: center center; }
    @media screen and (min-width: 768px), print {
      .hamburger:before, .hamburger:after {
        width: 0.8rem;
        height: 1px;
        margin-top: -0.01rem; } }
    @media screen and (max-width: 767px) {
      .hamburger:before, .hamburger:after {
        width: 0.46rem;
        height: 1px;
        margin-top: -0.01rem; } }
  @media screen and (max-width: 767px) and (min-aspect-ratio: 375 / 667) {
    .hamburger:before, .hamburger:after {
      width: 0.36rem; } }

  @media screen and (min-width: 768px), print {
    .hamburger:before {
      animation: hamburger-bar01 .75s forwards; }
    .hamburger:after {
      animation: hamburger-bar02 .75s forwards; } }
  @media screen and (max-width: 767px) {
    .hamburger:before {
      animation: hamburger-bar01-sp .75s forwards; }
    .hamburger:after {
      animation: hamburger-bar02-sp .75s forwards; } }
  body.-openMenu .hamburger:before, body.-openMenu .hamburger:after {
    background-color: #fff; }
  @media screen and (min-width: 768px), print {
    body.-openMenu .hamburger:before {
      animation: active-hamburger-bar01 .75s forwards; }
    body.-openMenu .hamburger:after {
      animation: active-hamburger-bar02 .75s forwards; } }
  @media screen and (max-width: 767px) {
    body.-openMenu .hamburger:before {
      animation: active-hamburger-bar01-sp .75s forwards; }
    body.-openMenu .hamburger:after {
      animation: active-hamburger-bar02-sp .75s forwards; } }

@keyframes hamburger-bar01 {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(10deg); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-0.07rem) rotate(0); } }
@keyframes active-hamburger-bar01 {
  0% {
    transform: translateX(-50%) translateY(-0.07rem) rotate(0); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(10deg); } }
@keyframes hamburger-bar02 {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(0.07rem) rotate(0); } }
@keyframes active-hamburger-bar02 {
  0% {
    transform: translateX(-50%) translateY(0.07rem) rotate(0); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(-10deg); } }
@keyframes hamburger-bar01-sp {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(10deg); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-0.04rem) rotate(0); } }
@keyframes active-hamburger-bar01-sp {
  0% {
    transform: translateX(-50%) translateY(-0.04rem) rotate(0); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(10deg); } }
@keyframes hamburger-bar02-sp {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(0.04rem) rotate(0); } }
@keyframes active-hamburger-bar02-sp {
  0% {
    transform: translateX(-50%) translateY(0.04rem) rotate(0); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(-10deg); } }
.header {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 8; }
  @media screen and (min-width: 768px), print {
    .header {
      min-width: 1200px;
      max-width: 1600px; } }
  @media screen and (max-width: 767px) {
    .header {
      z-index: 10; } }

.header__logo {
  position: absolute;
  overflow: visible; }
  .header__logo svg {
    overflow: visible; }
  @media screen and (min-width: 768px), print {
    .header__logo {
      width: 1.8rem;
      height: 0.375rem;
      left: 0.495rem;
      top: 0.41rem; } }
  @media screen and (max-width: 767px) {
    .header__logo {
      width: 1.115rem;
      height: 0.245rem;
      left: 0.245rem;
      top: 0.255rem; } }
  body.index .header__logo {
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s; }
    body.index .header__logo svg path {
      fill: transparent; }
  body.index.-openMenu .header__logo {
    opacity: 1;
    pointer-events: all; }
  .header__logo svg {
    width: auto;
    height: 100%; }
    .header__logo svg path {
      fill: #0f1011; }
  @media screen and (max-width: 767px) {
    .header__logo svg path {
      transition: fill .3s; }
      body.index.-openMenu .header__logo svg path, .-openMenu .header__logo svg path {
        fill: #fff; } }

.inview.-fadeIn {
  opacity: 0;
  transition: opacity 2s; }
  .inview.-fadeIn.-inviewed {
    opacity: 1; }
.inview.-fadeInUp {
  opacity: 0;
  transition: opacity 3s,transform 3s; }
  @media screen and (min-width: 768px), print {
    .inview.-fadeInUp {
      transform: translateY(0.445rem); } }
  @media screen and (max-width: 767px) {
    .inview.-fadeInUp {
      transform: translateY(0.17rem); } }
  .inview.-fadeInUp.-inviewed {
    opacity: 1;
    transform: translateY(0); }

.inview > .-blurIn {
  transition: opacity 1s,filter 1s,transform 1s;
  opacity: 0; }
  body:not(.-firefox) .inview > .-blurIn {
    will-change: filter;
    filter: blur(1rem);
    transform: scale(1.2); }

.inview.-inviewed > .-blurIn {
  opacity: 1; }
  body:not(.-firefox) .inview.-inviewed > .-blurIn {
    filter: blur(0);
    transform: scale(1); }

.inview.-inviewLazyLoad {
  opacity: 0;
  transition: filter 0.5s, opacity 1s; }
  body:not(.-firefox) .inview.-inviewLazyLoad {
    filter: blur(8px); }
    body:not(.-firefox) .inview.-inviewLazyLoad.-inviewLazyLoaded {
      filter: blur(0); }
  .inview.-inviewLazyLoad.-inviewLazyLoaded {
    opacity: 1; }

@media screen and (min-width: 768px), print {
  .indexNews .listNews {
    margin-top: 1rem; } }
@media screen and (max-width: 767px) {
  .indexNews .listNews {
    margin-top: 0.4rem; } }

.listNews__item {
  border-top: 1px solid #CECECE; }
  .listNews__item:last-child {
    border-bottom: 1px solid #CECECE; }

.listNews__link,
.listNews__text {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap; }
  @media screen and (min-width: 768px), print {
    .listNews__link,
    .listNews__text {
      padding: 0.5rem 0.535rem; } }
  @media screen and (max-width: 767px) {
    .listNews__link,
    .listNews__text {
      padding: 0.135rem 0.12rem;
      align-items: baseline; } }

.listNews__link {
  color: #0f1011 !important;
  transition: color 1s; }
  .listNews__link:hover {
    color: #b2b2b2 !important; }

@media screen and (min-width: 768px), print {
  .listNews__date {
    padding-top: .35em;
    font-size: 0.16rem;
    margin-right: 0.4rem; } }
@media screen and (max-width: 767px) {
  .listNews__date {
    font-size: 0.12rem;
    margin-right: 0.1rem; } }

.listNews__title {
  line-height: 1.45; }
  @media screen and (min-width: 768px), print {
    .listNews__title {
      font-size: 0.19rem;
      width: calc(100% - 7em); } }
  @media screen and (max-width: 767px) {
    .listNews__title {
      font-size: 0.12rem;
      margin-top: 0.065rem; } }

.loader {
  position: fixed;
  z-index: 9999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 2s 1s; }
  .-loadComplete .loader {
    opacity: 0;
    pointer-events: none; }

.loader__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: filter 2s; }
  .-loadComplete:not(.-firefox) .loader__inner {
    pointer-events: none; }
    @media screen and (min-width: 768px), print {
      .-loadComplete:not(.-firefox) .loader__inner {
        filter: blur(0.3rem); } }
    @media screen and (max-width: 767px) {
      .-loadComplete:not(.-firefox) .loader__inner {
        filter: blur(0.2rem); } }

.loaderCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 1s; }
  @media screen and (min-width: 768px), print {
    .loaderCircle {
      width: 5.95rem;
      height: 5.95rem; } }
  @media screen and (max-width: 767px) {
    .loaderCircle {
      width: 2.25rem;
      height: 2.25rem; } }
  @media screen and (min-width: 768px), print {
    .loaderCircle svg path {
      stroke-width: 0.005rem; } }
  @media screen and (max-width: 767px) {
    .loaderCircle svg path {
      stroke-width: 0.005rem; } }
  .-loadComplete .loaderCircle {
    opacity: 0;
    pointer-events: none; }

.loader__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 1s; }
  @media screen and (min-width: 768px), print {
    .loader__title {
      width: 3.125rem; } }
  @media screen and (max-width: 767px) {
    .loader__title {
      width: 1.45rem; } }
  .loader__title:before {
    content: "";
    display: block;
    padding-top: 50%; }
  .-loadComplete .loader__title {
    opacity: 0;
    pointer-events: none; }

.loader__illustrator {
  position: absolute;
  top: 0;
  height: 17.4%; }
  .loader__illustrator svg {
    width: auto;
    height: 100%;
    overflow: visible; }

.loader__eri {
  position: absolute;
  height: 28%;
  top: 33%; }
  .loader__eri svg {
    width: auto;
    height: 100%;
    overflow: visible; }

.loader__yoshida {
  position: absolute;
  height: 28%;
  top: 71%; }
  .loader__yoshida svg {
    width: auto;
    height: 100%;
    overflow: visible; }

@media screen and (min-width: 768px), print {
  .spotLight.-spotLightBlur {
    transition: filter 1s, opacity 1s,transform 1s;
    transform: scale(1) rotate(0.1deg); }
    .menu .spotLight.-spotLightBlur {
      transform-origin: center right; }
    .spotLight.-spotLightBlur.-activeSpot {
      opacity: .6;
      transform: scale(0.97) rotate(0.1deg);
      filter: grayscale(100%); }
      .worksSlider__wrap .spotLight.-spotLightBlur.-activeSpot, .worksList .spotLight.-spotLightBlur.-activeSpot, .menu .spotLight.-spotLightBlur.-activeSpot {
        opacity: .9;
        transform: scale(0.98) rotate(0.1deg);
        filter: grayscale(100%); } }

.tab {
  position: relative;
  transition: height .3s; }

.tab__item {
  opacity: 0;
  transition: opacity 1s ,filter 1s;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none; }
  @media screen and (min-width: 768px), print {
    body:not(.-firefox) .tab__item {
      filter: blur(0.5rem); } }
  @media screen and (max-width: 767px) {
    body:not(.-firefox) .tab__item {
      filter: blur(0.5rem); } }
  .tab__item.-active {
    opacity: 1;
    pointer-events: all; }
    body:not(.-firefox) .tab__item.-active {
      filter: blur(0); }

.tabNavigation__item {
  cursor: pointer; }

.indexMainvisual {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  user-select: none; }
  @media screen and (min-width: 768px), print {
    .indexMainvisual {
      min-width: 1200px;
      max-width: 1600px; }
      .indexMainvisual:before {
        content: "";
        display: block;
        padding-top: 78%; } }
  @media screen and (max-width: 767px) {
    .indexMainvisual {
      padding-bottom: 0.3rem;
      height: 8.8rem; } }
  @media screen and (max-width: 767px) and (min-aspect-ratio: 375 / 667) {
    .indexMainvisual {
      height: 100vh; } }

.indexMainvisual__switch {
  position: absolute;
  width: 10px;
  height: 2rem;
  z-index: 999;
  pointer-events: none;
  width: 100%; }
  @media screen and (min-width: 768px), print {
    .indexMainvisual__switch {
      top: 0; } }
  @media screen and (max-width: 767px) {
    .indexMainvisual__switch {
      height: 60vh; } }

.indexMainvisual__GalleryWrap {
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .indexMainvisual__GalleryWrap {
      position: absolute;
      width: 100%;
      height: 7.95rem;
      left: 0;
      top: 0.535rem; } }

.indexMainvisual__Gallery {
  pointer-events: none;
  transition: opacity 1s,filter 1s,transform 1s;
  will-change: filter; }
  @media screen and (min-width: 768px), print {
    .indexMainvisual__Gallery {
      position: fixed;
      width: 7.145rem;
      height: 11.245rem;
      left: 0.82rem;
      top: 0.305rem;
      z-index: 3; } }
  @media screen and (max-width: 767px) {
    .indexMainvisual__Gallery {
      position: absolute;
      width: 100%;
      height: 5.95rem;
      left: 0;
      top: 2rem; }
      .indexMainvisual__Gallery:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 2; } }
  @media screen and (max-width: 767px) and (min-aspect-ratio: 375 / 667) {
    .indexMainvisual__Gallery {
      top: 1.5rem;
      height: 4.4rem; } }

  @media screen and (min-width: 768px), print {
    body.-mainVisualFadeOut .indexMainvisual__Gallery {
      transform: scale(1.2);
      opacity: 0; } }
  @media screen and (min-width: 768px), print {
    body.-mainVisualFadeOut:not(.-firefox) .indexMainvisual__Gallery {
      filter: blur(0.5rem); } }

.indexMainvisual__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s,filter 0.8s,transform 0.8s;
  will-change: filter; }
  @media screen and (min-width: 768px), print {
    .indexMainvisual__image {
      transform: scale(1.2); } }
  @media screen and (min-width: 768px), print {
    body:not(.-firefox) .indexMainvisual__image {
      filter: blur(0.5rem); } }
  @media screen and (max-width: 767px) {
    body:not(.-firefox) .indexMainvisual__image {
      filter: blur(0.1rem); } }
  .indexMainvisual__image.-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transition-delay: 0.8s; }
    body:not(.-firefox) .indexMainvisual__image.-active {
      filter: blur(0); }
  .indexMainvisual__image.-first {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); }
    body:not(.-firefox) .indexMainvisual__image.-first {
      filter: blur(0); }

.indexAbout {
  position: relative;
  background-color: #fff;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .indexAbout {
      margin-top: 1rem;
      padding: 3rem 0; } }
  @media screen and (max-width: 767px) {
    .indexAbout {
      padding: 1rem 0; } }
  .indexAbout:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(img/pattern01.png);
    opacity: .07;
    overflow: hidden;
    backface-visibility: hidden;
    display: block; }
    body:not(.-safari) .indexAbout:before {
      background-attachment: fixed; }
    @media screen and (min-width: 768px), print {
      .indexAbout:before {
        background-size: 50vw auto;
        background-position: 0 -0.1rem; } }
    @media screen and (max-width: 767px) {
      .indexAbout:before {
        background-size: 75vw auto;
        background-position: -25vw 0.05rem; } }

.indexAbout__inner {
  background-color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .indexAbout__inner {
      padding: 2rem 0; } }
  @media screen and (max-width: 767px) {
    .indexAbout__inner {
      padding: 0.65rem 0; } }

@media screen and (max-width: 767px) {
  .indexAbout__title {
    text-align: center; } }
@media screen and (min-width: 768px), print {
  .indexAbout__title svg {
    width: auto;
    height: 0.585rem; } }
@media screen and (max-width: 767px) {
  .indexAbout__title svg {
    width: auto;
    height: 0.225rem; } }
.indexAbout__title svg path {
  fill: #0f1011; }

@media screen and (min-width: 768px), print {
  .indexAbout__text {
    margin-top: 0.605rem; } }
@media screen and (max-width: 767px) {
  .indexAbout__text {
    position: relative;
    width: 2.875rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.3rem;
    font-feature-settings: normal; } }
@media screen and (min-width: 768px), print {
  .indexAbout__text > p {
    font-size: 0.165rem;
    line-height: 2.8;
    margin-top: 0.225rem; } }
@media screen and (max-width: 767px) {
  .indexAbout__text > p {
    font-size: 0.125rem;
    line-height: 2.76;
    margin-top: 0.225rem; } }
@media screen and (min-width: 768px), print {
  .indexAbout__text > p.-en {
    font-size: 0.12rem;
    line-height: 2;
    margin-top: 0.4rem;
    width: 38%; } }
@media screen and (max-width: 767px) {
  .indexAbout__text > p.-en {
    font-size: 0.1rem; } }

.splitLetter {
  opacity: 0; }
  .indexAbout__text.-inviewed .splitLetter {
    opacity: 1; }

.indexAbout__imageWrap {
  display: block;
  user-select: none; }
  @media screen and (min-width: 768px), print {
    .indexAbout__imageWrap {
      position: absolute;
      width: 7.53rem;
      height: auto;
      top: 0.515rem;
      right: -1.75rem; } }
  @media screen and (max-width: 767px) {
    .indexAbout__imageWrap {
      position: relative;
      width: 3.31rem;
      height: auto;
      margin-left: auto;
      display: block;
      margin-top: 0.34rem; } }
  .indexAbout__imageWrap:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2; }
  .indexAbout__imageWrap img {
    width: 100%;
    height: auto; }

.indexGallery {
  background-color: #fff;
  position: relative;
  z-index: 3;
  overflow: hidden; }
  @media screen and (min-width: 768px), print {
    .indexGallery {
      padding: 2rem 0; } }
  @media screen and (max-width: 767px) {
    .indexGallery {
      padding: 0.65rem 0; } }

.indexGallery__title {
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .indexGallery__title svg {
      width: auto;
      height: 0.585rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__title svg {
      width: auto;
      height: 0.225rem; } }
  .indexGallery__title svg path {
    fill: #0f1011; }

.indexGallery__tab {
  display: flex;
  justify-content: center; }
  @media screen and (min-width: 768px), print {
    .indexGallery__tab {
      margin-top: 0.745rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__tab {
      margin-top: 0.3rem; } }

.indexGallery__tab__item {
  font-family: kings-caslon-display, serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  line-height: 1;
  color: #b2b2b2;
  transition: color .3s; }
  @media screen and (min-width: 768px), print {
    .indexGallery__tab__item {
      font-size: 0.275rem;
      padding: 0.105rem 0.15rem 0.285rem;
      margin-left: 0.26rem;
      margin-right: 0.26rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__tab__item {
      font-size: 0.12rem;
      padding: 0.075rem 0.1rem 0.12rem; } }
  .indexGallery__tab__item:before {
    content: "";
    display: block;
    width: 100%;
    background-color: #0f1011;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: center;
    transform: translateX(-50%) translateY(0) scaleX(0);
    opacity: 0;
    transition: opacity .3s, transform .3s; }
    @media screen and (min-width: 768px), print {
      .indexGallery__tab__item:before {
        height: 0.06rem; } }
    @media screen and (max-width: 767px) {
      .indexGallery__tab__item:before {
        height: 0.025rem; } }
  .indexGallery__tab__item.-active {
    color: #0f1011; }
    .indexGallery__tab__item.-active:before {
      transform: translateX(-50%) translateY(0) scaleX(1);
      opacity: 1; }

.indexGallery__contents__wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 768px), print {
    .indexGallery__contents__wrap {
      width: 12.4rem;
      margin-top: 0.55rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__contents__wrap {
      width: 2.925rem;
      margin-top: 0.3rem; } }
  .indexGallery__contents__wrap .tab__item {
    width: 100%; }

.indexGallery__contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  user-select: none; }
  @media screen and (min-width: 768px), print {
    .indexGallery__contents.-life .indexGallery__contents__item {
      width: 2.65rem;
      height: 3.9rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__contents.-life .indexGallery__contents__item {
      width: 1.31rem;
      height: 1.93rem; } }
  .indexGallery__contents.-life .indexGallery__contents__item:before {
    content: "";
    display: block;
    padding-top: 147%; }
  @media screen and (max-width: 767px) {
    .indexGallery__contents.-life .indexGallery__contents__item:nth-child(n + 2) {
      margin-top: 0; } }
  @media screen and (min-width: 768px), print {
    .indexGallery__contents.-life .indexGallery__contents__item:nth-child(1), .indexGallery__contents.-life .indexGallery__contents__item:nth-child(2), .indexGallery__contents.-life .indexGallery__contents__item:nth-child(3), .indexGallery__contents.-life .indexGallery__contents__item:nth-child(4) {
      margin-bottom: 0.6rem; } }
  @media screen and (min-width: 768px), print {
    .indexGallery__contents.-fashion .indexGallery__contents__item {
      width: 2.65rem;
      height: 5.2rem; }
      .indexGallery__contents.-fashion .indexGallery__contents__item:nth-child(n + 5) {
        margin-top: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__contents.-fashion .indexGallery__contents__item {
      width: 1.31rem;
      height: 2.56rem; }
      .indexGallery__contents.-fashion .indexGallery__contents__item:nth-child(n + 3) {
        margin-top: 0.3rem; } }
  @media screen and (min-width: 768px), print {
    .indexGallery__contents.-scenery .indexGallery__contents__item, .indexGallery__contents.-portrait .indexGallery__contents__item {
      width: 3.73rem;
      height: 5.2rem; }
      .indexGallery__contents.-scenery .indexGallery__contents__item:nth-child(n + 4), .indexGallery__contents.-portrait .indexGallery__contents__item:nth-child(n + 4) {
        margin-top: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__contents.-scenery .indexGallery__contents__item, .indexGallery__contents.-portrait .indexGallery__contents__item {
      width: 1.31rem;
      height: 1.93rem; } }

.indexGallery__contents__item {
  overflow: hidden;
  position: relative; }
  .indexGallery__contents__item:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2; }
  .indexGallery__contents__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(1) rotate(0.01deg); }

.indexScroll {
  position: absolute;
  transform-origin: right top;
  font-family: kings-caslon-display, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .23em;
  line-height: 1;
  opacity: 0;
  transition: opacity 1.5s; }
  .indexScroll.-active {
    opacity: 1; }
  @media screen and (min-width: 768px), print {
    .indexScroll {
      top: 100vh;
      right: 0.77rem;
      width: 1.965rem;
      font-size: 0.125rem;
      transform: rotate(90deg) translate3d(-0.21rem, 0, 0); } }
  @media screen and (max-width: 767px) {
    .indexScroll {
      display: none; } }

.indexScroll__bar {
  position: absolute;
  top: 50%;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden; }
  @media screen and (min-width: 768px), print {
    .indexScroll__bar {
      width: 1.055rem; } }
  .indexScroll__bar:before {
    content: '';
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translate3d(100%, 0, 0);
    animation-name: scroll;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: paused; }
    .-active .indexScroll__bar:before {
      animation-play-state: running; }

@keyframes scroll {
  0% {
    transform: translate3d(-100%, 0, 0); }
  100% {
    transform: translate3d(100%, 0, 0); } }
.indexTitle {
  position: absolute;
  z-index: 8; }
  @media screen and (min-width: 768px), print {
    .indexTitle {
      width: 5.92rem;
      height: 6.945rem;
      top: 3.855rem;
      left: 8.35rem; } }
  @media screen and (max-width: 767px) {
    .indexTitle {
      top: 1.025rem;
      left: 0.435rem;
      width: 2.92rem;
      height: 3.425rem; } }
  @media screen and (max-width: 767px) and (min-aspect-ratio: 375 / 667) {
    .indexTitle {
      transform: scale(0.85);
      transform-origin: center top;
      top: 0.6rem;
      left: 0.395rem; } }

.indexTitle__illustrator svg {
  overflow: visible; }
  @media screen and (min-width: 768px), print {
    .indexTitle__illustrator svg {
      width: auto;
      height: 0.505rem; } }
  @media screen and (max-width: 767px) {
    .indexTitle__illustrator svg {
      width: auto;
      height: 0.25rem; } }
  .indexTitle__illustrator svg path {
    fill: #0f1011; }

@media screen and (min-width: 768px), print {
  .indexTitle__eri {
    margin-top: 0.455rem; } }
@media screen and (max-width: 767px) {
  .indexTitle__eri {
    margin-top: 0.225rem; } }
.indexTitle__eri svg {
  overflow: visible; }
  @media screen and (min-width: 768px), print {
    .indexTitle__eri svg {
      width: auto;
      height: 0.805rem; } }
  @media screen and (max-width: 767px) {
    .indexTitle__eri svg {
      width: auto;
      height: 0.405rem; } }
  .indexTitle__eri svg path {
    fill: #0f1011; }

@media screen and (min-width: 768px), print {
  .indexTitle__yoshida {
    margin-top: 0.25rem; } }
@media screen and (max-width: 767px) {
  .indexTitle__yoshida {
    margin-top: 0.12rem; } }
.indexTitle__yoshida svg {
  overflow: visible; }
  @media screen and (min-width: 768px), print {
    .indexTitle__yoshida svg {
      width: auto;
      height: 0.805rem; } }
  @media screen and (max-width: 767px) {
    .indexTitle__yoshida svg {
      width: auto;
      height: 0.405rem; } }
  .indexTitle__yoshida svg path {
    fill: #0f1011; }

.indexTitle__slideup {
  display: inline-block;
  position: relative;
  overflow: hidden; }
  .indexTitle__slideup svg {
    transform: translateY(132%);
    opacity: 0;
    transition: transform 1s,opacity 1.5s; }
  .indexTitle__slideup.-active svg {
    transform: translateY(0);
    opacity: 1; }

.indexTitle__heart {
  position: absolute;
  right: 0;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .indexTitle__heart {
      bottom: 0.77rem;
      width: 2.21rem;
      height: 5.41rem; } }
  @media screen and (max-width: 767px) {
    .indexTitle__heart {
      bottom: 0.47rem;
      width: 1.09rem;
      height: 2.67rem; } }
  .indexTitle__heart > g {
    clip-path: url(#indexTitle__heart__mask);
    -webkit-clip-path: url(#indexTitle__heart__mask); }

.indexTitle__heart__area {
  fill: none; }

.indexTitle__heart__line {
  fill: none;
  stroke: #db0024;
  stroke-width: 20px;
  stroke-dasharray: 1700px;
  stroke-dashoffset: 1700px; }
  .indexTitle__heart.-active .indexTitle__heart__line {
    animation: drawHeart 1s ease-in both; }

.indexTitle__heart__mask {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath); }

@keyframes drawHeart {
  to {
    stroke-dashoffset: 0px; } }
.indexWorks {
  background-color: #f8f8f8;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden; }
  body:not(.-safari) .indexWorks {
    background-attachment: fixed; }
  @media screen and (min-width: 768px), print {
    .indexWorks {
      padding: 1.8rem 0;
      background-image: url(img/works.png); } }
  @media screen and (max-width: 767px) {
    .indexWorks {
      padding: 0.65rem 0;
      background-image: url(img/works_sp.png);
      background-size: 100%;
      background-attachment: initial; } }

.indexWorks__title {
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .indexWorks__title svg {
      width: auto;
      height: 0.585rem; } }
  @media screen and (max-width: 767px) {
    .indexWorks__title svg {
      width: auto;
      height: 0.225rem; } }
  .indexWorks__title svg path {
    fill: #0f1011; }

@media screen and (min-width: 768px), print {
  .indexNews {
    padding: 2rem 0 1.2rem; } }
@media screen and (max-width: 767px) {
  .indexNews {
    padding: 0.65rem 0 0.4rem; } }

.indexNews__title {
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .indexNews__title svg {
      width: auto;
      height: 0.585rem; } }
  @media screen and (max-width: 767px) {
    .indexNews__title svg {
      width: auto;
      height: 0.225rem; } }
  .indexNews__title svg path {
    fill: #0f1011; }

@media screen and (min-width: 768px), print {
  .indexBan {
    padding: 0 0 1.6rem; } }
@media screen and (max-width: 767px) {
  .indexBan {
    padding: 0 0 0.65rem; } }
.indexBan .banAbstract {
  text-align: center; }
  .indexBan .banAbstract a:hover {
    opacity: 0.6; }
  @media screen and (max-width: 767px) {
    .indexBan .banAbstract {
      width: 100%; }
      .indexBan .banAbstract img {
        width: 100%;
        height: auto; } }
  @media screen and (min-width: 768px), print {
    .indexBan .banAbstract.banAbstractGallery {
      margin-top: 0.4rem; } }
  @media screen and (max-width: 767px) {
    .indexBan .banAbstract.banAbstractGallery {
      margin-top: 0.3rem; } }
  @media screen and (min-width: 768px), print {
    .indexBan .banAbstract.banAbstractWorks {
      margin-top: 1rem; } }
  @media screen and (max-width: 767px) {
    .indexBan .banAbstract.banAbstractWorks {
      margin-top: 0.6rem; } }

.viewmore {
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .viewmore {
      margin-top: 1.09rem; } }
  @media screen and (max-width: 767px) {
    .viewmore {
      margin-top: 0.425rem; } }
  @media screen and (min-width: 768px), print {
    .indexAbout .viewmore {
      text-align: left; } }

.viewmore__link {
  display: inline-block; }
  @media screen and (min-width: 768px), print {
    .viewmore__link svg {
      width: auto;
      height: 0.395rem; } }
  @media screen and (max-width: 767px) {
    .viewmore__link svg {
      width: auto;
      height: 0.24rem; } }
  .viewmore__link svg path {
    transition: fill 1s; }
  .viewmore__link:hover svg path {
    fill: #0f1011; }

@media screen and (min-width: 768px), print {
  .indexAbout__image + .viewmore {
    text-align: left;
    margin-top: 1.35rem; } }
@media screen and (max-width: 767px) {
  .indexAbout__image + .viewmore {
    margin-top: 0.3rem; } }

.indexGallery__contents__wrap + .viewmore,
.worksSlider__navigation + .viewmore,
.listNews + .viewmore {
  position: relative;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 768px), print {
    .indexGallery__contents__wrap + .viewmore,
    .worksSlider__navigation + .viewmore,
    .listNews + .viewmore {
      margin-top: 1.09rem; } }
  @media screen and (max-width: 767px) {
    .indexGallery__contents__wrap + .viewmore,
    .worksSlider__navigation + .viewmore,
    .listNews + .viewmore {
      margin-top: 0.425rem; } }

@media screen and (min-width: 768px), print {
  .worksSlider__navigation + .viewmore {
    margin-top: 0.79rem; } }

.menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.97);
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.3s; }
  .-openMenu .menu {
    opacity: 1;
    pointer-events: all; }

@media screen and (min-width: 768px), print {
  .menu__inner {
    text-align: right; } }

@media screen and (min-width: 768px), print {
  .menuTitle {
    position: absolute;
    top: 4.475rem;
    left: 1rem;
    opacity: 0;
    transition: opacity 1.3s;
    text-align: left; }
    .-openMenu .menuTitle {
      opacity: 1; } }
.menuTitle svg path {
  fill: #fff; }

@media screen and (min-width: 768px), print {
  .menuTitle__illustrator svg {
    width: auto;
    height: 0.355rem; } }

@media screen and (min-width: 768px), print {
  .menuTitle__eri svg {
    width: auto;
    height: 0.6rem;
    margin-top: 0.335rem; } }

@media screen and (min-width: 768px), print {
  .menuTitle__yoshida svg {
    width: auto;
    height: 0.6rem;
    margin-top: 0.335rem; } }

@media screen and (min-width: 768px), print {
  .menuList {
    margin-right: 1rem;
    text-align: right;
    margin-top: 2.24rem;
    display: inline-block; } }
@media screen and (max-width: 767px) {
  .menuList {
    padding-left: 0.25rem;
    margin-top: 1.1rem;
    display: inline-block; } }
  @media screen and (max-width: 767px) and (min-aspect-ratio: 375 / 667) {
    .menuList {
      margin-top: 1.1rem; } }

@media screen and (min-width: 768px), print {
  .menuList__item + .menuList__item {
    margin-top: 0.85rem; } }
@media screen and (max-width: 767px) {
  .menuList__item + .menuList__item {
    margin-top: 0.53rem; } }
@media screen and (min-width: 768px), print {
  .menuList__item + .menuList__item.-instagram {
    margin-top: 0.3rem; } }
@media screen and (max-width: 767px) {
  .menuList__item + .menuList__item.-instagram {
    margin-top: 0.21rem; } }

@media screen and (min-width: 768px), print {
  .menuList__link svg {
    width: auto;
    height: 0.685rem; } }
@media screen and (max-width: 767px) {
  .menuList__link svg {
    width: auto;
    height: 0.255rem; } }
@media screen and (min-width: 768px), print {
  .menuList__item.-onlineshop .menuList__link svg, .menuList__item.-instagram .menuList__link svg {
    width: auto;
    height: 0.32rem; } }
@media screen and (max-width: 767px) {
  .menuList__item.-onlineshop .menuList__link svg, .menuList__item.-instagram .menuList__link svg {
    width: auto;
    height: 0.225rem; } }

.menuTitle__slideup {
  display: inline-block;
  position: relative;
  overflow: hidden; }
  .menuTitle__slideup svg {
    transform: translateY(132%);
    opacity: 0;
    transition: transform 1s,opacity 1.5s; }
    .menuTitle__slideup svg path {
      fill: #4e4e4e;
      transition: fill 2s; }
  .menuTitle__slideup.-active svg {
    transform: translateY(0);
    opacity: 1; }
  .menuTitle__slideup:hover svg path {
    fill: #fff; }

#modalBackground {
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  position: fixed;
  left: 0;
  top: -1px;
  z-index: 99998;
  background-color: rgba(0, 0, 0, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s; }

body[data-modal="show"] #modalBackground {
  pointer-events: all;
  opacity: 1; }

#modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  width: 100vw;
  height: auto;
  background-color: transparent;
  transition: opacity 1s;
  color: #fff; }
  @media screen and (min-width: 768px), print {
    #modal {
      width: 9.95rem;
      padding: 0;
      position: absolute; } }
  @media screen and (max-width: 767px) {
    #modal {
      width: 3rem;
      position: absolute; } }
  body[data-modal="show"] #modal {
    opacity: 1;
    pointer-events: all; }
  #modal img {
    max-width: 100%; }
  #modal movie {
    max-width: 100%; }

.modal__inner {
  transition: opacity .3s;
  opacity: 1; }
  #modal.-fadeoutInner .modal__inner {
    opacity: 0; }

.modal__link {
  cursor: pointer; }
  body[data-modal="lock"] .modal__link {
    pointer-events: none; }

.modal__contents {
  display: none; }

.modal__prev, .modal__next {
  cursor: pointer;
  position: absolute;
  z-index: 99999;
  top: 50%;
  transform: translateY(-50%);
  transition: top .3s,opacity .3s; }
  @media screen and (min-width: 768px), print {
    .modal__prev, .modal__next {
      right: -1rem;
      width: 1rem;
      height: 5rem; } }
  @media screen and (max-width: 767px) {
    .modal__prev, .modal__next {
      right: -0.3rem;
      width: 0.3rem;
      height: 2rem; } }
  #modal.-fadeoutInner .modal__prev,
  #modal.-fadeoutInner .modal__next {
    pointer-events: none;
    opacity: 0; }
  .modal__prev:before, .modal__next:before {
    content: "";
    display: block;
    position: absolute;
    left: 40%;
    top: 50%;
    border: 1px solid #fff;
    border-color: #fff #fff transparent transparent;
    transform-origin: center center;
    transform: translateX(-50%) translateY(-50%) rotate(-135deg); }
    @media screen and (min-width: 768px), print {
      .modal__prev:before, .modal__next:before {
        width: 0.4rem;
        height: 0.4rem; } }
    @media screen and (max-width: 767px) {
      .modal__prev:before, .modal__next:before {
        width: 0.1rem;
        height: 0.1rem; } }
  #modal.-alone .modal__prev, #modal.-alone .modal__next {
    display: none; }

.modal__prev {
  right: auto; }
  @media screen and (min-width: 768px), print {
    .modal__prev {
      left: -1rem; } }
  @media screen and (max-width: 767px) {
    .modal__prev {
      left: -0.3rem; } }
  .modal__prev:before {
    left: 60%; }

.modal__next:before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg); }
  @media screen and (max-width: 767px) {
    .modal__next:before {
      transform: translateX(-50%) translateY(-50%) rotate(45deg); } }

.modal__imageWrap {
  background-color: #fff;
  text-align: center;
  position: relative;
  user-select: none; }
  .modal__imageWrap:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2; }
  @media screen and (min-width: 768px), print {
    .modal__imageWrap {
      padding: 0.56rem; } }
  @media screen and (max-width: 767px) {
    .modal__imageWrap {
      padding: 0.275rem; } }
  .modal__imageWrap img {
    max-width: 100%; }
    @media screen and (min-width: 768px), print {
      .modal__imageWrap img {
        max-height: 70vh; } }
    @media screen and (max-width: 767px) {
      .modal__imageWrap img {
        max-height: 50vh; } }
  .modal__imageWrap video {
    max-width: 100%; }
    @media screen and (min-width: 768px), print {
      .modal__imageWrap video {
        max-height: 70vh; } }
    @media screen and (max-width: 767px) {
      .modal__imageWrap video {
        max-height: 50vh; } }

.modal__title {
  line-height: 1.45;
  word-break: break-all; }
  @media screen and (min-width: 768px), print {
    .modal__title {
      font-size: 0.275rem;
      margin-top: 0.35rem; } }
  @media screen and (max-width: 767px) {
    .modal__title {
      font-size: 0.15rem;
      margin-top: 0.105rem; } }

.modal__caption {
  line-height: 1.6; }
  .modal__caption a {
    color: #fff; }
    .modal__caption a:hover {
      opacity: 0.7; }
  @media screen and (min-width: 768px), print {
    .modal__caption {
      font-size: 0.18rem;
      margin-top: 0.17rem; } }
  @media screen and (max-width: 767px) {
    .modal__caption {
      font-size: 0.12rem;
      margin-top: 0.065rem; } }

.modal__txt {
  line-height: 2.0; }
  .modal__txt a {
    color: #fff; }
    .modal__txt a:hover {
      opacity: 0.7; }
  @media screen and (min-width: 768px), print {
    .modal__txt {
      font-size: 0.16rem;
      margin-top: 0.17rem; } }
  @media screen and (max-width: 767px) {
    .modal__txt {
      font-size: 0.12rem;
      margin-top: 0.065rem; } }

.modal__close {
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s; }
  @media screen and (min-width: 768px), print {
    .modal__close {
      position: fixed;
      width: 1.32rem;
      height: 0.76rem;
      top: 0.245rem;
      right: 0.28rem; } }
  @media screen and (max-width: 767px) {
    .modal__close {
      position: absolute;
      width: 0.95rem;
      height: 0.75rem;
      top: -0.55rem;
      right: -0.25rem; } }
  .modal__close:before, .modal__close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform-origin: center center; }
    @media screen and (min-width: 768px), print {
      .modal__close:before, .modal__close:after {
        width: 0.8rem;
        height: 1px;
        margin-top: -0.005rem; } }
    @media screen and (max-width: 767px) {
      .modal__close:before, .modal__close:after {
        width: 0.46rem;
        height: 1px;
        margin-top: -0.005rem; } }
  .modal__close:before {
    animation: modal__close-bar01 .75s forwards; }
  .modal__close:after {
    animation: modal__close-bar02 .75s forwards; }
  body[data-modal="show"] .modal__close {
    opacity: 1;
    pointer-events: all; }
    body[data-modal="show"] .modal__close:before {
      animation: active-modal__close-bar01 .75s forwards; }
    body[data-modal="show"] .modal__close:after {
      animation: active-modal__close-bar02 .75s forwards; }

@keyframes modal__close-bar01 {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(10deg); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(0) rotate(0); } }
@keyframes active-modal__close-bar01 {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(10deg); } }
@keyframes modal__close-bar02 {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(0) rotate(0); } }
@keyframes active-modal__close-bar02 {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0); }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(0); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(-10deg); } }
.worksSlider__wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  left: 50%;
  overflow: visible; }
  @media screen and (min-width: 768px), print {
    .worksSlider__wrap {
      margin-top: 0.9rem;
      transform: translateX(-2.48rem); } }
  @media screen and (max-width: 767px) {
    .worksSlider__wrap {
      margin-top: 0.375rem;
      transform: translateX(-1.4rem); } }
  @media screen and (min-width: 768px), print {
    .worksSlider__wrap {
      min-height: 6.1rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__wrap {
      min-height: 3.34rem; } }

#worksSlider {
  align-items: center; }

.worksSlider__item {
  position: relative; }
  @media screen and (min-width: 768px), print {
    .worksSlider__item {
      width: 4.96rem;
      height: 6.05rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__item {
      width: 2.8rem;
      height: 3.35rem; } }

.worksSlider__imageWrap {
  position: relative; }
  .worksSlider__imageWrap:before {
    content: "";
    padding-top: 100%;
    display: block; }
  .worksSlider__imageWrap:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    transform: translateY(-50%) translateX(-50%) scale(0.83) rotate(0.1deg);
    transition: transform .5s,opacity .5s;
    background-color: rgba(0, 0, 0, 0.7); }
    @media screen and (min-width: 768px), print {
      .worksSlider__imageWrap:after {
        width: 4.96rem;
        height: 4.96rem; } }
    @media screen and (max-width: 767px) {
      .worksSlider__imageWrap:after {
        width: 2.8rem;
        height: 2.8rem; } }
    .-active .worksSlider__imageWrap:after {
      transform: translateY(-50%) translateX(-50%) scale(1) rotate(0.1deg);
      opacity: 0; }
    .worksSlider__item:hover .worksSlider__imageWrap:after {
      opacity: 0; }

.worksSlider__image {
  background-color: transparent;
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translateY(-50%) translateX(-50%) scale(0.83) rotate(0.1deg);
  transition: transform 0.5s, opacity 0.5s, filter 0.5s !important; }
  @media screen and (min-width: 768px), print {
    .worksSlider__image {
      width: 4.96rem;
      height: 4.96rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__image {
      width: 2.8rem;
      height: 2.8rem; } }
  .-active .worksSlider__image {
    transform: translateY(-50%) translateX(-50%) scale(1) rotate(0.1deg); }

.worksSlider__textWrap {
  transition: padding .5s,transform .5s,opacity .5s, margin-top .5s;
  margin-top: 0; }
  @media screen and (min-width: 768px), print {
    .worksSlider__textWrap {
      transform: translateX(0.45rem) translateY(-0.25rem);
      width: calc(100% - 0.9rem); } }
  @media screen and (max-width: 767px) {
    .worksSlider__textWrap {
      opacity: 0;
      transform: translateX(0.23rem);
      width: calc(100% - 0.46rem); } }
  @media screen and (min-width: 768px), print {
    .-active .worksSlider__textWrap {
      transform: translateX(0) translateY(0);
      width: 100%;
      margin-top: 0.4rem; } }
  @media screen and (max-width: 767px) {
    .-active .worksSlider__textWrap {
      opacity: 1;
      transform: translateX(0);
      width: 100%;
      margin-top: 0.17rem; } }

.worksSlider__title {
  font-family: kings-caslon-display, serif;
  font-weight: 400;
  font-style: normal;
  transition: font-size .3s;
  line-height: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
  @media screen and (min-width: 768px), print {
    .worksSlider__title {
      font-size: 0.225rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__title {
      font-size: 0.15rem; } }
  @media screen and (min-width: 768px), print {
    .-active .worksSlider__title {
      font-size: 0.275rem; } }

.worksSlider__text {
  transition: font-size .3s;
  line-height: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
  @media screen and (min-width: 768px), print {
    .worksSlider__text {
      font-size: 0.175rem;
      margin-top: .7em; } }
  @media screen and (max-width: 767px) {
    .worksSlider__text {
      font-size: 0.12rem;
      margin-top: .5em; } }
  @media screen and (min-width: 768px), print {
    .-active .worksSlider__text {
      font-size: 0.21rem; } }

.worksSlider__navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; }
  @media screen and (min-width: 768px), print {
    .worksSlider__navigation {
      margin-top: 0.3rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__navigation {
      margin-top: 0.35rem; } }

.worksSlider__dots {
  text-align: center; }
  .worksSlider__dots .swiper-pagination-bullet {
    display: inline-block;
    background-color: #d2d2d2;
    border-radius: 50%; }
    @media screen and (min-width: 768px), print {
      .worksSlider__dots .swiper-pagination-bullet {
        width: 0.145rem;
        height: 0.145rem;
        margin-left: 0.13rem;
        margin-right: 0.13rem; } }
    @media screen and (max-width: 767px) {
      .worksSlider__dots .swiper-pagination-bullet {
        width: 0.1rem;
        height: 0.1rem;
        margin-left: 0.08rem;
        margin-right: 0.08rem; } }
    .worksSlider__dots .swiper-pagination-bullet.-active {
      background-color: #000; }

.worksSlider__left {
  background-image: url(img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(-1, 1); }
  @media screen and (min-width: 768px), print {
    .worksSlider__left {
      width: 0.7rem;
      height: 0.7rem;
      background-size: 0.175rem 0.35rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__left {
      width: 0.4rem;
      height: 0.4rem;
      background-size: 0.12rem 0.24rem;
      margin-right: 0.3rem; } }

.worksSlider__right {
  background-image: url(img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center; }
  @media screen and (min-width: 768px), print {
    .worksSlider__right {
      width: 0.7rem;
      height: 0.7rem;
      background-size: 0.175rem 0.35rem; } }
  @media screen and (max-width: 767px) {
    .worksSlider__right {
      width: 0.2rem;
      height: 0.2rem;
      background-size: 0.12rem 0.24rem;
      margin-left: 0.3rem; } }

.footer {
  position: relative; }

.footer__contact {
  position: relative; }
  @media screen and (min-width: 768px), print {
    .footer__contact {
      padding: 1.32rem 0; } }
  @media screen and (max-width: 767px) {
    .footer__contact {
      padding: 0.85rem 0; } }

.footer__video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  display: block; }
  .footer__video:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #515151;
    mix-blend-mode: multiply; }
  .footer__video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: .5; }

.footer__contactLead {
  position: relative;
  z-index: 2;
  text-align: center; }
  .footer__contactLead svg {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (min-width: 768px), print {
      .footer__contactLead svg {
        width: auto;
        height: 0.78rem; } }
    @media screen and (max-width: 767px) {
      .footer__contactLead svg {
        width: auto;
        height: 0.23rem; } }
    .footer__contactLead svg path {
      fill: #fffefe;
      fill-rule: evenodd; }
  .footer__contactLead span {
    display: inline-block;
    position: relative;
    overflow: hidden; }
    .footer__contactLead span svg {
      transform: translateY(132%);
      opacity: 0;
      transition: transform 1s,opacity 1.5s;
      transition-delay: .5s; }
  @media screen and (min-width: 768px), print {
    .footer__contactLead span + span {
      margin-top: 0.18rem; } }
  @media screen and (max-width: 767px) {
    .footer__contactLead span + span {
      margin-top: 0.08rem; } }
  .footer__contactLead.-inviewed span svg {
    transform: translateY(0);
    opacity: 1; }

.footer__contactMessage2 {
  text-align: center;
  letter-spacing: .08em;
  color: #fff;
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .footer__contactMessage2 {
      font-size: 0.19rem;
      margin-top: 0.275rem; } }
  @media screen and (max-width: 767px) {
    .footer__contactMessage2 {
      font-size: 0.11rem;
      margin-top: 0.175rem;
      line-height: 1.7; } }

.footer__contactMessage3 {
  text-align: center;
  letter-spacing: .08em;
  color: #fff;
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .footer__contactMessage3 {
      font-size: 0.14rem;
      margin-top: 0.2rem; } }
  @media screen and (max-width: 767px) {
    .footer__contactMessage3 {
      font-size: 0.08rem;
      margin-top: 0.175rem;
      line-height: 1.7; } }

.footer__contactLinkWrap {
  text-align: center;
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .footer__contactLinkWrap {
      margin-top: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .footer__contactLinkWrap {
      margin-top: 0.29rem; } }

.footer__contactLink {
  display: inline-block; }
  .footer__contactLink svg {
    width: auto; }
    .footer__contactLink svg path {
      fill: #b2b2b2;
      transition: fill 1s; }
    @media screen and (min-width: 768px), print {
      .footer__contactLink svg {
        height: 0.4rem; } }
    @media screen and (max-width: 767px) {
      .footer__contactLink svg {
        height: 0.25rem; } }
  .footer__contactLink:hover svg path {
    fill: #fff; }

.footer__copyright {
  text-align: center;
  line-height: 1; }
  @media screen and (min-width: 768px), print {
    .footer__copyright {
      font-size: 0.155rem;
      padding-top: 0.45rem;
      padding-bottom: 0.45rem; } }
  @media screen and (max-width: 767px) {
    .footer__copyright {
      font-size: 0.1rem;
      padding-top: 0.2rem;
      padding-bottom: 0.2rem; } }

/* ==========================================================================
   about
   ========================================================================== */
@media screen and (min-width: 768px), print {
  .-about {
    padding-bottom: 1.8rem; } }
@media screen and (max-width: 767px) {
  .-about {
    padding-bottom: 0.5rem; } }
@media screen and (min-width: 768px), print {
  .-about h2 {
    margin-top: 0.6rem;
    margin-bottom: 1.8rem; } }
@media screen and (max-width: 767px) {
  .-about h2 {
    margin-top: 0.1rem;
    margin-bottom: 0.5rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf {
    display: flex; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProfimg {
    width: 12%;
    margin-right: 5%; }
    .-about .aboutProf .aboutProfimg img {
      width: 100%;
      height: auto; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProfimg {
    width: 40%;
    margin: 0 auto 0.3rem; }
    .-about .aboutProf .aboutProfimg img {
      width: 100%;
      height: auto; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt {
    width: 83%; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutName {
    font-size: 0.25rem;
    margin-bottom: 0.3rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutName {
    font-size: 0.18rem;
    margin-bottom: 0.15rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutProftxt-in {
    line-height: 2;
    margin-bottom: 0.2rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutProftxt-in {
    font-size: 0.12rem;
    line-height: 2;
    margin-bottom: 0.15rem; } }
.-about .aboutProf .aboutProftxt .aboutProftxt-in a {
  color: #000; }
  .-about .aboutProf .aboutProftxt .aboutProftxt-in a:visited {
    color: #000; }
  .-about .aboutProf .aboutProftxt .aboutProftxt-in a:hover {
    opacity: 0.7; }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutProftxt-in02 {
    font-size: 0.13rem;
    line-height: 2;
    margin-bottom: 0.2rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutProftxt-in02 {
    font-size: 0.11rem;
    line-height: 1.75;
    margin-bottom: 0.1rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutEn {
    font-size: 0.15rem;
    line-height: 1.5;
    margin-top: 0.3rem;
    margin-bottom: 0.2rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutEn {
    font-size: 0.12rem;
    line-height: 1.5;
    margin-top: 0.15rem;
    margin-bottom: 0.2rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutEn02 {
    font-size: 0.13rem;
    line-height: 2;
    margin-bottom: 0.5rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutEn02 {
    font-size: 0.11rem;
    line-height: 2;
    margin-bottom: 0.3rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutExttl {
    font-size: 0.25rem;
    margin-bottom: 0.2rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutExttl {
    font-size: 0.18rem;
    margin-bottom: 0.15rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutExttl02 {
    margin-top: 0.5rem; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutExttl02 {
    margin-top: 0.3rem; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutEx {
    line-height: 2.2; } }
@media screen and (min-width: 768px), print {
  .-about .aboutProf .aboutProftxt .aboutEx li span {
    display: inline-block;
    margin-right: 10px; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutEx li span {
    display: block; } }
@media screen and (max-width: 767px) {
  .-about .aboutProf .aboutProftxt .aboutEx li {
    line-height: 1.5;
    margin-bottom: 0.15rem;
    font-size: 0.12rem; } }
.-about .aboutProf .aboutProftxt .aboutEx a {
  color: #000; }
  .-about .aboutProf .aboutProftxt .aboutEx a:visited {
    color: #000; }
  .-about .aboutProf .aboutProftxt .aboutEx a:hover {
    opacity: 0.7; }

/* ==========================================================================
   works
   ========================================================================== */
@media screen and (min-width: 768px), print {
  .-works h2 {
    margin-top: 0.6rem;
    margin-bottom: 1.8rem; } }
@media screen and (max-width: 767px) {
  .-works h2 {
    margin-top: 0.1rem;
    margin-bottom: 0.5rem; } }
.-works .worksList {
  display: flex;
  flex-wrap: wrap; }
  @media screen and (min-width: 768px), print {
    .-works .worksList {
      margin-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    .-works .worksList {
      margin-bottom: 0.2rem; } }
  .-works .worksList a {
    display: block; }
    @media screen and (min-width: 768px), print {
      .-works .worksList a {
        width: 30%;
        margin-right: 4.5%;
        margin-bottom: 0.9rem; }
        .-works .worksList a:nth-of-type(3n) {
          margin-right: 0; } }
    @media screen and (max-width: 767px) {
      .-works .worksList a {
        width: 47.5%;
        margin-right: 5%;
        margin-bottom: 0.3rem; }
        .-works .worksList a:nth-of-type(3n) {
          margin-right: 5%; }
        .-works .worksList a:nth-of-type(2n) {
          margin-right: 0; } }
    .-works .worksList a img {
      width: 100%;
      height: auto; }
    @media screen and (min-width: 768px), print {
      .-works .worksList a .works__textWrap {
        overflow-wrap: break-word; } }
    @media screen and (min-width: 768px), print {
      .-works .worksList a .works__title {
        font-size: 0.2rem;
        margin-top: 0.15rem;
        margin-bottom: 0.08rem; } }
    @media screen and (max-width: 767px) {
      .-works .worksList a .works__title {
        font-size: 0.13rem;
        margin-top: 0.1rem;
        margin-bottom: 0.05rem; } }
    @media screen and (min-width: 768px), print {
      .-works .worksList a .works__text {
        font-size: 0.15rem;
        line-height: 1.5; } }
    @media screen and (max-width: 767px) {
      .-works .worksList a .works__text {
        font-size: 0.11rem;
        line-height: 1.5; } }
@media screen and (min-width: 768px), print {
  .-works .portrait {
    background: url("../css/img/bg_portrait.jpg") no-repeat center right #f3f3f3;
    background-size: cover; }
    .-works .portrait.livepaint {
      background: url("../css/img/bg_livepaint.jpg") no-repeat center right #e9e9e9;
      background-size: cover; } }
@media screen and (max-width: 767px) {
  .-works .portrait {
    background: url("../css/img/bg_portrait_sp.jpg") no-repeat center right #f3f3f3;
    background-size: cover; }
    .-works .portrait.livepaint {
      background: url("../css/img/bg_livepaint_sp.jpg") no-repeat center right #e9e9e9;
      background-size: cover; } }
@media screen and (min-width: 768px), print {
  .-works .portrait {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem; } }
@media screen and (max-width: 767px) {
  .-works .portrait {
    padding-top: 0.5rem;
    padding-bottom: 0.4rem; } }
@media screen and (min-width: 768px), print {
  .-works .portrait .portrainBox {
    display: flex;
    flex-wrap: wrap; } }
.-works .portrait .portrainBox .portrainBox__image img {
  width: 100%;
  height: auto; }
@media screen and (min-width: 768px), print {
  .-works .portrait .portrainBox .portrainBox__image {
    width: 37%;
    margin-right: 7%; } }
@media screen and (max-width: 767px) {
  .-works .portrait .portrainBox .portrainBox__image {
    width: 90%; } }
@media screen and (min-width: 768px), print {
  .-works .portrait .portrainBox .portrainBox__image .portrainBox__imageSubttl {
    font-size: 0.23rem;
    margin-top: 0.4rem; } }
@media screen and (max-width: 767px) {
  .-works .portrait .portrainBox .portrainBox__image .portrainBox__imageSubttl {
    font-size: 0.14rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem; } }
@media screen and (min-width: 768px), print {
  .-works .portrait .portrainBox .portrainBox__text {
    width: 56%;
    font-size: 0.15rem;
    line-height: 1.75; } }
@media screen and (max-width: 767px) {
  .-works .portrait .portrainBox .portrainBox__text {
    line-height: 1.75; } }
.-works .portrait .portrainBox .portrainBox__text p img {
  width: 100%;
  height: auto; }
@media screen and (min-width: 768px), print {
  .-works .portrait .portrainBox .portrainBox__text p {
    margin-bottom: 0.2rem; }
    .-works .portrait .portrainBox .portrainBox__text p.img {
      margin-top: 0.3rem; } }
@media screen and (max-width: 767px) {
  .-works .portrait .portrainBox .portrainBox__text p {
    font-size: 0.12rem;
    margin-bottom: 0.1rem; }
    .-works .portrait .portrainBox .portrainBox__text p.img {
      margin-top: 0.2rem; } }
.-works .portrait .portrainBox .portrainBox__text a {
  color: #000; }
  .-works .portrait .portrainBox .portrainBox__text a:hover {
    opacity: 0.7; }

/* ==========================================================================
   gallery
   ========================================================================== */
@media screen and (min-width: 768px), print {
  .-gallery {
    padding-bottom: 0.9rem; } }
@media screen and (max-width: 767px) {
  .-gallery {
    padding-bottom: 0.5rem; } }
@media screen and (min-width: 768px), print {
  .-gallery h2 {
    margin-top: 0.6rem;
    margin-bottom: 0.7rem; } }
@media screen and (max-width: 767px) {
  .-gallery h2 {
    margin-top: 0.1rem;
    margin-bottom: 0.5rem; } }
@media screen and (min-width: 768px), print {
  .-gallery .-gallerypage .indexGallery__tab {
    margin-top: 0;
    margin-bottom: 0.6rem; } }
.-gallery .-gallerypage .indexGallery__contents__wrap {
  width: 100%; }
@media screen and (min-width: 768px), print {
  .-gallery .-gallerypage .indexGallery__contents.-life .indexGallery__contents__item {
    margin-bottom: 0.9rem;
    width: 21%;
    margin-right: 5.3%; }
    .-gallery .-gallerypage .indexGallery__contents.-life .indexGallery__contents__item img {
      width: 100%;
      height: auto; } }
@media screen and (min-width: 768px), print {
  .-gallery .-gallerypage .indexGallery__contents.-life .indexGallery__contents__item:nth-child(1) {
    width: 21%; } }
@media screen and (max-width: 767px) {
  .-gallery .-gallerypage .indexGallery__contents.-life .indexGallery__contents__item:nth-child(1) {
    width: 1.31rem; } }
@media screen and (min-width: 768px), print {
  .-gallery .-gallerypage .indexGallery__contents.-life .indexGallery__contents__item:nth-child(n + 4) {
    margin-top: 0;
    margin-right: 0; } }
@media screen and (max-width: 767px) {
  .-gallery .-gallerypage .indexGallery__contents.-life .indexGallery__contents__item:nth-child(n + 4) {
    margin-top: 0; } }
@media screen and (min-width: 768px), print {
  .-gallery .-gallerypage .indexGallery__contents a {
    margin-bottom: 0.8rem; } }
@media screen and (max-width: 767px) {
  .-gallery .-gallerypage .indexGallery__contents a {
    margin-bottom: 0.2rem; } }

@media screen and (min-width: 768px), print {
  .indexGallery__contents.-portrait .indexGallery__contents__item.movie-area {
    width: 3.73rem;
    height: 3.73rem; } }
@media screen and (max-width: 767px) {
  .indexGallery__contents.-portrait .indexGallery__contents__item.movie-area {
    width: 1.31rem;
    height: 1.31rem; } }
.indexGallery__contents.-portrait .indexGallery__contents__item.movie-area video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(1) rotate(0.01deg); }
.indexGallery__contents.-portrait .indexGallery__contents__item.movie-area img {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(1) rotate(0.01deg); }

/* ==========================================================================
   about
   ========================================================================== */
.-art .artTxt {
  text-align: center;
  line-height: 2; }
  @media screen and (min-width: 768px), print {
    .-art .artTxt {
      font-size: 0.18rem;
      margin-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    .-art .artTxt {
      font-size: 0.13rem;
      margin-bottom: 0.4rem; } }
@media screen and (min-width: 768px), print {
  .-art .btnArea {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 2rem; }
    .-art .btnArea p {
      padding: 0 0.5rem; } }
@media screen and (max-width: 767px) {
  .-art .btnArea {
    margin-bottom: 0.6rem; } }
@media screen and (min-width: 768px), print {
  .-art .viewmore {
    margin-top: 0; } }
@media screen and (max-width: 767px) {
  .-art .viewmore {
    margin-top: 0;
    margin-bottom: 0.4rem; } }