@charset "UTF-8";
/*
Theme Name: loom
Version: 1.0
*/
/* -----------------------------------------------------------
    初期設定
----------------------------------------------------------- */
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, contact-form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-style: normal;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


h1, h2, h3, h4, h5 {
  font-weight: 400;
}

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

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

a, a:active, a:hover, a:link, a:visited {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

ins {
  text-decoration: none;
}

ins, mark {
  background-color: #ff9;
  color: #000;
}

mark {
  font-style: italic;
  font-weight: 700;
}

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;
}

button, input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

:focus:not(:focus-visible) {
  outline: 0;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.slick-slider {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.slick-list, .slick-slider {
  position: relative;
  display: block;
}

.slick-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: 0;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-list, .slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:after, .slick-track:before {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* -----------------------------------------------------------
    変数
----------------------------------------------------------- */
:root {
  --base-color: #000;
  --white-color-primary: #fff;
  --gray-color: #717071;
  --lightgray-color: #e0e1e1;
  --btn-gray-color: #dbdcdc;
  --btn-lightgray-color: #eeeeef;
  --ings-orange-color: #f18a00;
}

/* ----------------------------------------------------------- 
    breakpoint
----------------------------------------------------------- */
/* ----------------------------------------------------------- 
    Font
----------------------------------------------------------- */
html {
  font-size: 62.5%;
  font-size: calc(100vw / 37.5);
}

html body {
  font-size: min(1.5rem, 15px);
}

@media screen and (min-width: 768px) {
  html {
    font-size: calc(100vw / 128);
  }
  html body {
    font-size: min(1.5rem, 15px);
  }
}

html {
  visibility: hidden;
}

html.wf-active, html.loading-delay {
  visibility: visible;
}

/* -----------------------------------------------------------
    汎用
----------------------------------------------------------- */
.br--pc {
  display: none;
}

.br--sp {
  display: block;
}

@media screen and (min-width: 768px) {
  .br--pc {
    display: block;
  }
  .br--sp {
    display: none;
  }
}

.plus-btn {
  display: inline-block;
  margin-left: 2vw;
  vertical-align: middle;
  color: var(--base-color);
  line-height: 1;
  width: 0.4em;
  height: 1px;
  background: currentColor;
  position: relative;
  -webkit-transition: all .5s;
  transition: all .5s;
}

@media screen and (min-width: 768px) {
  .plus-btn {
    margin-left: 0.5vw;
  }
}

.plus-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: all .1s;
  transition: all .1s;
}

.clicked .plus-btn {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  width: 0.3em;
}

.clicked .plus-btn::before {
  width: 0;
}

.pending {
  margin-top: 40px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 300;
  font-size: min(3rem, 30px);
  text-align: center;
}

.no-post {
  width: 100%;
  margin-top: 40px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 300;
  font-size: min(3rem, 30px);
  text-align: center;
}

/* ----------------------------------------------------------- 
    Opening Animation
----------------------------------------------------------- */
.opening {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  background-color: var(--white-color-primary);
}

.svg-text path {
  fill: transparent;
  stroke: var(--ings-orange-color);
  stroke-width: 1;
  stroke-dasharray: 1500;
  stroke-dashoffset: 0;
  -webkit-animation: path 3s ease-in forwards;
          animation: path 3s ease-in forwards;
}

@-webkit-keyframes path {
  0% {
    fill: transparent;
    stroke-dashoffset: 1500;
  }
  90% {
    fill: transparent;
    stroke-width: 1;
  }
  100% {
    fill: var(--ings-orange-color);
    stroke-width: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes path {
  0% {
    fill: transparent;
    stroke-dashoffset: 1500;
  }
  90% {
    fill: transparent;
    stroke-width: 1;
  }
  100% {
    fill: var(--ings-orange-color);
    stroke-width: 0;
    stroke-dashoffset: 0;
  }
}

/* -----------------------------------------------------------
    ANIMATION 汎用
----------------------------------------------------------- */
/* 下からふわっと */
.fadein-up {
  opacity: 0;
  -webkit-transform: translateY(1.5rem);
          transform: translateY(1.5rem);
}

.fadein-up[data-emergence="visible"] {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-duration: .4s;
          transition-duration: .4s;
  -webkit-transition-delay: .4s;
          transition-delay: .4s;
  -webkit-transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.fadein-up.--delay:nth-of-type(1) {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

.fadein-up.--delay:nth-of-type(2) {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.fadein-up.--delay:nth-of-type(3) {
  -webkit-transition-delay: .4s;
          transition-delay: .4s;
}

/* ふわっと */
.fadein {
  opacity: 0;
}

.fadein[data-emergence="visible"] {
  opacity: 1;
  -webkit-transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.5s;
}

/* 順番にふわっと */
.fadein-lag {
  opacity: 0;
}

.fadein-lag[data-emergence="visible"] {
  -webkit-animation-name: fadeInLag;
          animation-name: fadeInLag;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-lag:nth-of-type(2) {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

.fadein-lag:nth-of-type(3) {
  -webkit-animation-delay: .6s;
          animation-delay: .6s;
}

.fadein-lag:nth-of-type(4) {
  -webkit-animation-delay: .9s;
          animation-delay: .9s;
}

.fadein-lag:nth-of-type(5) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.fadein-lag:nth-of-type(6) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes fadeInLag {
  from {
    opacity: 0;
    -webkit-transform: translateY(1.5rem);
            transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInLag {
  from {
    opacity: 0;
    -webkit-transform: translateY(1.5rem);
            transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* 左から右 */
.slide-left {
  opacity: 0;
  -webkit-transform: translateX(-2rem);
          transform: translateX(-2rem);
}

.slide-left[data-emergence="visible"] {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-duration: .4s;
          transition-duration: .4s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

/* 右から左 */
.slide-right {
  opacity: 0;
  -webkit-transform: translateX(2rem);
          transform: translateX(2rem);
}

.slide-right[data-emergence="visible"] {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.slide-left-box {
  opacity: 0;
  position: relative;
  left: -2%;
  width: 100%;
  max-width: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.slide-left-box[data-emergence="visible"] {
  opacity: 1;
  left: 0;
  -webkit-transform-origin: 50%,50%;
          transform-origin: 50%,50%;
  -webkit-transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mask-bg {
  overflow: hidden;
  opacity: 0;
  position: relative;
}

.mask-bg::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--lightgray-color);
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.mask-bg[data-emergence="visible"] {
  opacity: 1;
  -webkit-transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
}

.mask-bg[data-emergence="visible"]::after {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
  -webkit-animation: mask-bg 1.6s cubic-bezier(0.8, 0, 0.17, 1);
          animation: mask-bg 1.6s cubic-bezier(0.8, 0, 0.17, 1);
}

@-webkit-keyframes mask-bg {
  0% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
  40%, 60% {
    -webkit-transform: translate(0%, 0);
            transform: translate(0%, 0);
  }
  100% {
    -webkit-transform: translate(101%, 0);
            transform: translate(101%, 0);
  }
}

@keyframes mask-bg {
  0% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
  40%, 60% {
    -webkit-transform: translate(0%, 0);
            transform: translate(0%, 0);
  }
  100% {
    -webkit-transform: translate(101%, 0);
            transform: translate(101%, 0);
  }
}

/* ----------------------------------------------------------- 
    body
----------------------------------------------------------- */
html, body {
  position: relative;
  height: 100%;
}

body {
  background-color: var(--white-color-primary);
  font-family: YakuHanJP, 'RodinPro-M', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--base-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.body__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.body__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
  min-height: 100vh;
}

.body__inner .main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* -----------------------------------------------------------
    Header
----------------------------------------------------------- */
.header {
  position: relative;
  padding: 15px 30px 5px;
}

@media screen and (min-width: 768px) {
  .header {
    height: 122px;
    padding: 32px 50px 0;
  }
}

.header-top__logo {
  width: 100px;
}

.header-top__logo a {
  display: inline-block;
  -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .header-top__logo a:hover {
    opacity: .4;
  }
}

@media screen and (min-width: 768px) {
  .header-top__logo {
    width: 120px;
  }
}

.header-top__caption {
  color: var(--gray-color);
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: min(1.3rem, 13px);
  letter-spacing: 2px;
  line-height: 1.7;
}

@media screen and (min-width: 768px) {
  .header-top__caption {
    font-size: min(1.5rem, 15px);
    letter-spacing: 2.5px;
  }
}

.header-gnav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  width: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  z-index: 800;
  padding: 10vw 30px 20px 30px;
  background-color: #eeeeef;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.header-gnav.js-burger-open {
  right: 0;
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 768px) {
  .header-gnav {
    width: 63%;
    right: -63%;
    padding: min( calc( (115 * 100vw) / 1280), 115px) min( calc( (108 * 100vw) / 1280), 108px) min( calc( (62 * 100vw) / 1280), 62px);
  }
}

.header-gnav__cover {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.header-gnav__cover.js-burger-open {
  opacity: 1;
  visibility: visible;
}

.header-gnav__nav {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 300;
  font-size: min(2.8rem, 28px);
  line-height: 1;
}

.header-gnav__item a, .header-gnav__item .js-acc-btn {
  display: inline-block;
  -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .header-gnav__item a:hover, .header-gnav__item .js-acc-btn:hover {
    color: var(--ings-orange-color);
  }
}

.header-gnav__item:not(:first-child) {
  margin-top: 5vw;
}

@media screen and (min-width: 768px) {
  .header-gnav__item:not(:first-child) {
    margin-top: min( calc( (28 * 100vw) / 1280), 28px);
  }
}

.header-gnav__lower-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  margin-top: 3vw;
}

@media screen and (min-width: 768px) {
  .header-gnav__lower-box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 0.5vw;
  }
}

.header-gnav__lower-list {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .header-gnav__lower-list {
    width: 33.333%;
  }
}

.header-gnav__lower-item {
  margin-left: 1.3vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
  padding-left: 5vw;
  font-family: YakuHanJP, 'RodinPro-M', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  border-left: 1px solid;
}

.header-gnav__lower-item a {
  display: block;
}

.header-gnav__lower-item span {
  display: inline-block;
  font-size: min(1.5rem, 15px);
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

@media screen and (min-width: 768px) {
  .header-gnav__lower-item {
    margin-left: 0.3vw;
    padding-top: 0.2vw;
    padding-bottom: 0.2vw;
    padding-left: 0.7vw;
  }
}

.header-gnav__card {
  margin-top: 10vw;
  margin-right: 50px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 300;
}

@media screen and (min-width: 768px) {
  .header-gnav__card {
    margin-top: 4.84vw;
    margin-right: 0;
  }
}

.header-gnav__sns-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5vw;
  color: var(--ings-orange-color);
}

@media screen and (min-width: 768px) {
  .header-gnav__sns-list {
    display: none;
  }
}

.header-gnav__sns-item {
  margin-right: 1.6vw;
  font-size: 1.6em;
}

.header-gnav__company-name {
  width: 70%;
}

@media screen and (min-width: 768px) {
  .header-gnav__company-name {
    width: 14.3vw;
  }
}

.header-gnav__company-address {
  margin-top: 5px;
}

.header-side {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 900;
  width: 60px;
  height: 60px;
  margin: 10px;
}

@media screen and (min-width: 768px) {
  .header-side {
    top: 0;
    bottom: auto;
    width: 130px;
    height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    padding: 0 45px;
  }
}

.header-side__list {
  display: none;
}

@media screen and (min-width: 768px) {
  .header-side__list {
    display: block;
    position: absolute;
    top: 18.5%;
    z-index: 900;
    color: var(--lightgray-color);
  }
}

.header-side__item {
  text-align: center;
  line-height: 1;
}

.header-side__item:not(:first-child) {
  margin-top: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .header-side__item:hover {
    color: var(--ings-orange-color);
  }
}

@media screen and (min-width: 768px) {
  .header-side__item {
    -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }
}

.header-side__item--facebook {
  font-size: 2em;
}

.header-side__item--instagram {
  font-size: 2em;
}

.header-side__item--twitter {
  font-size: 1.7em;
}

.header-side__item--youtube {
  font-size: 1.7em;
}

.header-side__drawer-btn {
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2000;
  width: 22px;
  height: 15px;
  padding: 9px;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all .5s;
  transition: all .5s;
}

@media screen and (min-width: 768px) {
  .header-side__drawer-btn {
    bottom: 47.5%;
  }
}

.header-side__drawer-btn::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -22px 0 0 -22px;
  background-color: var(--white-color-primary);
  border-radius: 50%;
  border: 2px solid var(--btn-gray-color);
  -webkit-transition: all .75s;
  transition: all .75s;
}

.header-side__drawer-btn .bar-btn {
  display: inline-block;
  position: absolute;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 2px;
  background-color: var(--btn-gray-color);
  -webkit-transition: all .5s;
  transition: all .5s;
}

.header-side__drawer-btn .bar-btn:nth-last-of-type(1) {
  top: 0;
}

.header-side__drawer-btn .bar-btn:nth-last-of-type(2) {
  top: 8px;
}

.header-side__drawer-btn .bar-btn:nth-last-of-type(3) {
  bottom: 0;
}

.header-side__drawer-btn.js-burger-open {
  width: 30px;
}

.header-side__drawer-btn.js-burger-open::after {
  background-color: var(--btn-gray-color);
}

.header-side__drawer-btn.js-burger-open .bar-btn {
  background-color: var(--btn-lightgray-color);
}

.header-side__drawer-btn.js-burger-open .bar-btn:nth-of-type(1) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
          transform: translateY(-8px) rotate(-45deg);
}

.header-side__drawer-btn.js-burger-open .bar-btn:nth-of-type(2) {
  left: 60%;
  opacity: 0;
  -webkit-animation: drawer-btn-open .8s forwards;
          animation: drawer-btn-open .8s forwards;
}

.header-side__drawer-btn.js-burger-open .bar-btn:nth-of-type(3) {
  -webkit-transform: translateY(8px) rotate(45deg);
          transform: translateY(8px) rotate(45deg);
}

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .header-side__drawer-btn:hover::after {
    background-color: var(--btn-gray-color);
  }
  .header-side__drawer-btn:hover .bar-btn {
    background-color: var(--white-color-primary);
  }
}

@-webkit-keyframes drawer-btn-open {
  100% {
    height: 0;
  }
}

@keyframes drawer-btn-open {
  100% {
    height: 0;
  }
}

.js-burger-open .header-side__list {
  color: var(--ings-orange-color);
}

/* -----------------------------------------------------------
    Footer
----------------------------------------------------------- */
.footer {
  padding: 20px 15px;
}

@media screen and (min-width: 768px) {
  .footer {
    padding: 40px 50px;
  }
}

.footer__copyright {
  font-family: YakuHanJP, 'futura-pt', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  display: block;
  color: var(--ings-orange-color);
  font-size: min(1.2rem, 12px);
  letter-spacing: 0;
}

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

/* -----------------------------------------------------------
    Main 共通
----------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .main {
    padding: 0 130px 0 50px;
  }
}

@media screen and (min-width: 1400px) {
  .main {
    padding: 0 50px;
  }
}

.main--service {
  padding-bottom: 60px;
}

.main--page, .main--archive {
  padding: 0 30px 60px;
}

@media screen and (min-width: 768px) {
  .main--page, .main--archive {
    padding: 0 130px 100px 50px;
  }
}

@media screen and (min-width: 1400px) {
  .main--page, .main--archive {
    padding: 0 50px 100px 50px;
  }
}

.main--single {
  padding: 20px 30px 60px;
}

@media screen and (min-width: 768px) {
  .main--single {
    padding: 20px 130px 100px 50px;
  }
}

@media screen and (min-width: 1400px) {
  .main--single {
    padding: 20px 50px 100px 50px;
  }
}

/* -----------------------------------------------------------
    デフォルト固定ページ 共通
----------------------------------------------------------- */
.page__title {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: min(6rem, 60px);
  letter-spacing: 0.05em;
}

.page__body {
  margin-top: 20px;
}

.page__box:not(:first-child) {
  margin-top: 35px;
}

.page__title-h2 {
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  font-size: min(2.2rem, 22px);
}

.page__title-h3 {
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  font-size: min(1.8rem, 18px);
}

.page__caption:not(:first-child) {
  margin-top: 8px;
}

.page__simple-list {
  list-style: disc;
  margin-left: 1.4em;
}

.page__simple-list:not(:first-child) {
  margin-top: 8px;
}

/* -----------------------------------------------------------
    アーカイブページ 共通
----------------------------------------------------------- */
.archive__title {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: min(6rem, 60px);
  letter-spacing: 0.05em;
}

.archive__body {
  margin-top: 20px;
}

/* -----------------------------------------------------------
    TOPページ：section-hero
----------------------------------------------------------- */
.section-hero__body {
  padding: 35px 0;
  -webkit-transform: scale(0.8, 1);
          transform: scale(0.8, 1);
  letter-spacing: 0.18em;
}

@media screen and (min-width: 768px) {
  .section-hero__body {
    text-align: center;
  }
}

.section-hero__copy:not(:first-child) {
  margin-top: 30px;
}

.hero-slide {
  width: 100%;
}

.hero-slide__item {
  height: 100%;
}

@media screen and (min-width: 768px) {
  .hero-slide__item {
    height: 100%;
  }
}

.hero-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  vertical-align: baseline;
}

/* -----------------------------------------------------------
    TOPページ：section-services
----------------------------------------------------------- */
.card-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.card-container:not(:first-child) {
  margin-top: 30px;
}

.card {
  position: relative;
  overflow: hidden;
  height: 250px;
  color: var(--white-color-primary);
}

@media screen and (min-width: 768px) {
  .card {
    height: 27.34375vw;
    max-height: 350px;
    color: var(--base-color);
  }
}

.card__after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--white-color-primary);
  -webkit-transition: all 1s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  transition: all 1s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.card__after--design {
  background-position: left -35vw center;
}

@media screen and (min-width: 768px) {
  .card__after--design {
    background-position: center top;
  }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__after {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.card--big {
  width: 100%;
}

.card--small {
  width: 100%;
}

.card--small:nth-child(n+2) {
  margin-top: 30px;
}

@media screen and (min-width: 768px) {
  .card--small {
    width: 48.5%;
  }
  .card--small:nth-child(n+2) {
    margin-top: 0;
  }
  .card--small:nth-child(n+3) {
    margin-top: 30px;
  }
}

.card--white {
  color: var(--white-color-primary);
}

.card__link {
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 768px) {
  .card__link {
    height: 27.34375vw;
    max-height: 350px;
    background-color: transparent;
  }
}

.card__link--design {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.card__link--web {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.card__body {
  width: 100%;
}

.card__body--design {
  padding: 20px;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .card__body--design {
    padding: 0 5.86vw 0 0;
  }
}

.card__body--operation {
  padding: 20px;
}

@media screen and (min-width: 768px) {
  .card__body--operation {
    padding: 30px 50px;
  }
}

.card__body--studio {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .card__body--studio {
    padding: 30px 0 85px 0;
  }
}

.card__body--print {
  padding: 20px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .card__body--print {
    padding: 20px 0 0 0;
  }
}

.card__body--video {
  padding: 20px;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .card__body--video {
    padding: 20px 30px;
  }
}

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

.card__body--product {
  padding: 20px 20px 20px 0;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .card__body--product {
    padding: 45px 7vw 0 0;
  }
}

.card__body--university {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .card__body--university {
    padding: 15px 0 25px 0;
  }
}

.card__body--streamer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px 0 10px;
}

@media screen and (min-width: 768px) {
  .card__body--streamer {
    padding: 15px 30px 20px 30px;
  }
}

.card__body--comic {
  padding: 20px 0;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .card__body--comic {
    padding: 5px 0 0 0;
  }
}

.card__title-en {
  display: block;
  font-size: min(4.8rem, 48px);
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  .card__title-en {
    font-size: min(6rem, 60px);
  }
}

.card__title-jp {
  display: inline-block;
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  font-size: min(2rem, 20px);
}

.card__title-jp--design {
  margin-top: 5px;
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.card__title-jp--operation {
  margin-top: 5px;
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.card__title-jp--print {
  margin-top: 5px;
}

.card__title-jp--video {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.card__title-jp--product {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.card__title--streamer {
  margin-right: 10px;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .card__title--streamer {
    margin-right: 0;
  }
}

.card__copy {
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  letter-spacing: 0;
}

.card__copy--design {
  margin-top: 50px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.card__copy--operation {
  margin-top: 50px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

@media screen and (min-width: 768px) {
  .card__copy--operation {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  .card__copy--studio {
    margin-top: 7.8125vw;
  }
}

.card__copy--print {
  margin-top: 10px;
/*   font-size: min(1.2rem, 12px); */
}

.card__copy--video {
  margin-top: 7vw;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

@media screen and (min-width: 768px) {
  .card__copy--video {
    margin-top: 3vw;
  }
}

.card__copy--web {
  margin-top: 30px;
}

.card__copy--product {
  margin-top: 3.5vw;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.card__copy--streamer {
  margin-left: 10px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

@media screen and (min-width: 768px) {
  .card__copy--streamer {
    margin-left: 0;
  }
}

/* -----------------------------------------------------------
    About us
----------------------------------------------------------- */
.about-outline {
  border-top: 1px solid var(--gray-color);
  border-bottom: 1px solid var(--gray-color);
  font-size: min(1.6rem, 16px);
}

@media screen and (min-width: 768px) {
  .about-outline {
    font-size: min(1.8rem, 18px);
  }
}

.about-outline__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  padding: 20px;
}

@media screen and (min-width: 768px) {
  .about-outline__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 30px 50px;
  }
}

.about-outline__item:not(:first-child) {
  border-top: 1px solid var(--gray-color);
}

@media screen and (min-width: 768px) {
  .about-outline__title {
    width: 10%;
    min-width: 100px;
  }
}

.about-outline__body {
  margin-top: 15px;
}

@media screen and (min-width: 768px) {
  .about-outline__body {
    width: 85%;
    margin-top: 0;
  }
}

.about-outline__body > p:not([class]):not(:first-child) {
  margin-top: 15px;
}

.about-access {
  margin-top: 60px;
}

@media screen and (min-width: 768px) {
  .about-access {
    margin-top: 100px;
  }
}

.about-access__head-title {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: min(6rem, 60px);
  letter-spacing: 0.05em;
}

.about-access__item-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
}

@media screen and (min-width: 992px) {
  .about-access__item-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.about-access__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 300px;
}

@media screen and (min-width: 992px) {
  .about-access__item {
    padding: 0 min( calc( (70 * 100vw) / 1280), 70px);
    max-width: 100%;
  }
}

.about-access__item:not(:first-child) {
  margin-top: 40px;
}

@media screen and (min-width: 992px) {
  .about-access__item:not(:first-child) {
    margin-top: 0;
  }
}

.about-access__item-title {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(3rem, 30px);
}

@media screen and (min-width: 992px) {
  .about-access__item-title--wakayama {
    margin-left: -60px;
  }
}

@media screen and (min-width: 992px) {
  .about-access__item-title--ebisu {
    margin-left: -40px;
  }
}

.about-access__item-body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.about-access__item-map {
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.about-access__item-map iframe {
  overflow: hidden;
  width: 100%;
  height: 100%;
  height: 600px;
  margin-top: -150px;
  border-radius: 50%;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.about-access__item-link-wrapper {
  width: 100%;
  margin-top: -5px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(2rem, 20px);
  text-align: right;
}

@media screen and (min-width: 992px) {
  .about-access__item-link-wrapper {
    margin-top: -15px;
    margin-right: -40px;
  }
}

.about-access__item-link::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 0.6em;
  margin-left: 5px;
  background-image: url(./assets/img/ico/ico_arrow-more-link.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  -webkit-transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
}

@media (hover: hover) and (pointer: fine) {
  .about-access__item-link:hover::after {
    margin-left: 8px;
    margin-right: -3px;
  }
}

.about-staff {
  margin-top: 60px;
}

@media screen and (min-width: 768px) {
  .about-staff {
    margin-top: 100px;
  }
}

.about-staff__head-title {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: min(6rem, 60px);
  letter-spacing: 0.05em;
}

.about-staff__slide-wrapper {
  margin-top: 20px;
}

.staff-slide {
  position: relative;
}

.staff-slide__item {
  position: relative;
  cursor: pointer;
}

.staff-slide__item:hover .staff-slide__text, .staff-slide__item:active .staff-slide__text {
  opacity: 1;
}

.staff-slide__img {
  width: 100%;
}

.staff-slide__text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 85%;
  height: 80%;
  padding: 16px;
  color: var(--white-color-primary);
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

@media screen and (min-width: 768px) {
  .staff-slide__text {
    width: 100%;
    padding: 24px;
  }
}

.staff-slide__profile {
  width: 100%;
  margin-top: 10px;
  font-size: min(1rem, 10px);
}

.staff-slide__profile > p:not([class]):not(:first-child) {
  margin-top: 10px;
}

.staff-slide__nav {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 20px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  cursor: pointer;
}

.staff-slide__nav--prev {
  left: 0;
  background-image: url(./assets/img/ico/ico_nav-prev.svg);
}

.staff-slide__nav--next {
  right: 0;
  background-image: url(./assets/img/ico/ico_nav-next.svg);
}

/* 右から左へ
----------------------------*/
@-webkit-keyframes infinity-scroll-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.about-howtomake {
  margin-top: 60px;
}

@media screen and (min-width: 768px) {
  .about-howtomake {
    margin-top: 100px;
  }
}

.about-howtomake__head-title {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: min(6rem, 60px);
  letter-spacing: 0.05em;
}

.about-howtomake__body {
  margin-top: 20px;
}

.about-howtomake__caption {
  line-height: 1.8;
  font-size: min(1.6rem, 16px);
}

@media screen and (min-width: 768px) {
  .about-howtomake__caption {
    font-size: min(1.8rem, 18px);
  }
}

.cartoon-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 40px;
}

@media screen and (min-width: 768px) {
  .cartoon-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.cartoon-list__item:not(:first-child) {
  margin-top: 50px;
}

@media screen and (min-width: 768px) {
  .cartoon-list__item:not(:first-child) {
    margin-top: 0;
  }
}

.cartoon-list__read-more {
  width: 80%;
  margin: 10px auto;
  padding: 8px 0;
  background-color: var(--base-color);
  border: 2px solid var(--base-color);
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  color: var(--white-color-primary);
  font-size: min(2.4rem, 24px);
  text-align: center;
  -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}

.cartoon-list__read-more.clicked {
  font-size: 0;
}

.cartoon-list__read-more.clicked::before {
  font-size: min(2.4rem, 24px);
  content: 'Close';
}

@media (hover: hover) and (pointer: fine) {
  .cartoon-list__read-more:hover {
    background-color: var(--white-color-primary);
    color: var(--base-color);
  }
}

/* -----------------------------------------------------------
    Contact
----------------------------------------------------------- */
.tel-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 20px;
  border-top: 1px solid var(--gray-color);
  border-bottom: 1px solid var(--gray-color);
}

@media screen and (min-width: 768px) {
  .tel-section {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 30px 50px;
  }
}

.tel-section__title {
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  font-size: min(2rem, 20px);
}

@media screen and (min-width: 768px) {
  .tel-section__title {
    width: 25%;
    min-width: 220px;
  }
}

.tel-section__number {
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(4rem, 40px);
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  .tel-section__number {
    padding: 0 20px 0 0;
  }
}

.mail-section {
  padding: 20px 20px 0;
}

@media screen and (min-width: 768px) {
  .mail-section {
    padding: 50px 50px 0;
  }
}

.mail-section__title {
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  font-size: min(2rem, 20px);
}

.mail-section__form {
  margin-top: 30px;
}

@media screen and (min-width: 768px) {
  .mail-section__form {
    margin-top: 60px;
  }
}

.form-box {
  width: 111%;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  font-size: min(1.8rem, 18px);
}

.form-box__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 768px) {
  .form-box__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.form-box__item:not(:first-child) {
  margin-top: 25px;
}

@media screen and (min-width: 768px) {
  .form-box__item:not(:first-child) {
    margin-top: 50px;
  }
}

.form-box__item--textarea {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.form-box__item--pp {
  font-size: min(1.6rem, 16px);
}

.form-box__item-label {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .form-box__item-label {
    width: 25%;
    min-width: 220px;
  }
}

.form-box__item-input {
  width: 100%;
  margin-top: 5px;
}

@media screen and (min-width: 768px) {
  .form-box__item-input {
    width: 75%;
    margin-top: 0;
  }
}

.form-box__item-input--pp {
  margin-top: 20px;
}

.form-box__item-input--pp a {
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 2px;
  border-bottom: 1px solid;
  -webkit-transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
}

@media (hover: hover) and (pointer: fine) {
  .form-box__item-input--pp a:hover {
    color: var(--gray-color);
  }
}

.form-box__item-input--btn {
  margin-top: 20px;
}

.form-box__item-input input[type=text], .form-box__item-input textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 5px 15px;
  border: 1px solid var(--gray-color);
  border-radius: 0;
}

.form-box__item-input input[type=text]:focus, .form-box__item-input textarea:focus {
  outline: none;
  border: 1px solid var(--base-color);
}

.form-box__item-input input[type=radio],
.form-box__item-input input[type=checkbox] {
  display: none;
}

.form-box__item-input input[type=submit] {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  margin: 0 0 20px 0;
  padding: 10px 20px;
  background-color: var(--base-color);
  border: 2px solid var(--base-color);
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  color: var(--white-color-primary);
  -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .form-box__item-input input[type=submit]:hover {
    background-color: var(--white-color-primary);
    color: var(--base-color);
  }
}

@media screen and (min-width: 768px) {
  .form-box__item-input input[type=submit] {
    width: 300px;
    margin: 0 20px 20px 0;
  }
}

.mwform-radio-field > label,
.mwform-checkbox-field > label {
  cursor: pointer;
}

.mwform-radio-field-text,
.mwform-checkbox-field-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.mwform-radio-field-text::before,
.mwform-checkbox-field-text::before {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  width: 1em;
  height: 1em;
  margin-right: 1em;
  border: 1px solid var(--base-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: var(--white-color-primary);
}

.mwform-radio-field-text::before {
  border-radius: 100%;
}

.mwform-radio-field > label input:checked + .mwform-radio-field-text::before,
.mwform-checkbox-field > label input:checked + .mwform-checkbox-field-text::before {
  background-color: var(--base-color);
}

.mw_wp_form_confirm .form-box__item-input--pp p {
  display: none;
}

.mw_wp_form_complete p {
  margin-top: 20px;
}

/* -----------------------------------------------------------
    service紹介ページ
----------------------------------------------------------- */
.service-head {
  width: 100%;
}

.service-head__heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: calc((var(--vh, 1vh) * 100) - 87.7px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .service-head__heading {
    height: 36.5625vw;
    max-height: 468px;
  }
}

.service-head__heading--design {
  background-position: left -50vw bottom;
  background-size: 130%;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .service-head__heading--design {
    max-height: 550px;
    background-position: left center;
    background-size: contain;
  }
}

.service-head__heading--studio {
  background-position: center center;
  text-align: center;
}

.service-head__heading--print {
  background-position: center center;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .service-head__heading--print {
    background-position: center center;
  }
}

.service-head__heading--video {
  background-position: 40% bottom;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .service-head__heading--video {
    background-position: left center;
  }
}

.service-head__heading--web {
  background-position: left bottom;
  background-position: center center;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .service-head__heading--web {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.service-head__heading--product {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-position: 20% center;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .service-head__heading--product {
    background-position: center center;
  }
}

.service-head__heading--university {
  text-align: center;
}

.service-head__heading--streamer {
  background-position: center center;
  background-size: contain;
  background-color: #F7F7F7;
}

@media screen and (min-width: 768px) {
  .service-head__heading--streamer {
    background-size: cover;
  }
}

.service-head__heading-inner {
  padding: 20px;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner {
    padding: 0 20px;
    background-color: transparent;
    color: var(--base-color);
  }
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--design {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--operation {
    padding: 30px;
  }
}

.service-head__heading-inner--studio {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--white-color-primary);
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--studio {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100%;
    padding: 30px;
  }
}

.service-head__heading-inner--print {
  color: var(--white-color-primary);
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--print {
    padding: 30px;
  }
}

.service-head__heading-inner--video {
  color: var(--white-color-primary);
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--video {
    padding: 30px;
  }
}

.service-head__heading-inner--web {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--white-color-primary);
}

.service-head__heading-inner--product {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--product {
    padding: 50px;
  }
}

.service-head__heading-inner--university {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  padding: 30px;
}

.service-head__heading-inner--streamer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .service-head__heading-inner--streamer {
    padding: 30px;
  }
}

.service-head__title--streamer {
  text-align: right;
}

@media screen and (min-width: 768px) {
  .service-head__title--streamer {
    text-align: right;
  }
}

.service-head__title-en {
  display: block;
  font-size: min(4.8rem, 48px);
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  .service-head__title-en {
    font-size: min(6rem, 60px);
  }
}

.service-head__title-jp {
  display: inline-block;
  margin-top: 8px;
  font-size: min(2rem, 20px);
  font-family: YakuHanJP, 'RodinPro-DB', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.service-head__title-jp--design {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.service-head__title-jp--studio {
  -webkit-transform-origin: center;
          transform-origin: center;
}

.service-head__title-jp--print {
  -webkit-transform-origin: center;
          transform-origin: center;
}

.service-head__title-jp--video {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.service-head__title-jp--web {
  -webkit-transform-origin: center;
          transform-origin: center;
}

.service-head__title-jp--product {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.service-head__title-jp--university {
  -webkit-transform-origin: center;
          transform-origin: center;
}

@media screen and (min-width: 768px) {
  .service-head__title-jp--streamer {
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

.service-head__copy {
  width: 110%;
  margin-top: min( calc( (60 * 100vw) / 1280), 60px);
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  font-size: min(1.4rem, 14px);
  letter-spacing: 0;
  line-height: 2;
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

@media screen and (min-width: 768px) {
  .service-head__copy {
    width: 100%;
    font-size: min(1.6rem, 16px);
  }
}

.service-head__copy--design {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .service-head__copy--design {
    margin-top: min( calc( (60 * 100vw) / 1280), 60px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

.service-head__copy--operation {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .service-head__copy--studio {
    margin-top: 0;
    padding-bottom: 60px;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}

@media screen and (min-width: 768px) {
  .service-head__copy--print {
    margin-top: 20px;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}

@media screen and (min-width: 768px) {
  .service-head__copy--video {
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

@media screen and (min-width: 768px) {
  .service-head__copy--web {
    margin-top: 30px;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}

@media screen and (min-width: 768px) {
  .service-head__copy--product {
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

@media screen and (min-width: 768px) {
  .service-head__copy--university {
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}

.service-head__lead {
  width: 111%;
  padding: 60px 30px;
  font-size: min(1.8rem, 18px);
  line-height: 2.3;
  text-align: left;
  -webkit-transform: scale(0.9, 1);
          transform: scale(0.9, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

@media screen and (min-width: 768px) {
  .service-head__lead {
    padding: 60px 0;
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .service-head__lead--design {
    padding: 20px 0 60px;
    text-align: center;
  }
}

.service-content {
  position: relative;
}

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

.service-content__title img {
  width: auto;
}

/* -----------------------------------------------------------
    Works アーカイブページ
----------------------------------------------------------- */
.works-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .works-list {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.works-list__item {
  position: relative;
  width: 84%;
}

@media screen and (min-width: 768px) {
  .works-list__item {
    width: 32%;
    margin-left: 2%;
  }
  .works-list__item:nth-child(3n+1) {
    margin-left: 0;
  }
}

.works-list__item:not(:first-child) {
  margin-top: 30px;
}

@media screen and (min-width: 768px) {
  .works-list__item:not(:first-child) {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .works-list__item:nth-child(3n+1) {
    margin-left: 0;
  }
}

@media screen and (min-width: 768px) {
  .works-list__item:nth-child(n+4) {
    margin-top: 2%;
  }
}

.works-list__item-title {
  opacity: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(2rem, 20px);
  color: var(--white-color-primary);
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}

.works-list__item-title span {
  display: inline-block;
}

.works-list__more-link-wrapper {
  margin-top: 30px;
  margin-right: 8%;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(3rem, 30px);
  text-align: right;
}

@media screen and (min-width: 768px) {
  .works-list__more-link-wrapper {
    margin-right: 0;
  }
}

.works-list__more-link {
  display: inline-block;
}

.works-list__more-link::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 0.6em;
  margin-left: 5px;
  background-image: url(./assets/img/ico/ico_arrow-more-link.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  -webkit-transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
}

@media (hover: hover) and (pointer: fine) {
  .works-list__more-link:hover::after {
    margin-right: -3px;
    margin-left: 8px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .works-list__item:hover .works-list__item-title {
    opacity: 1;
  }
}

.works-catnavi {
  padding-bottom: 40px;
}

.works-catnavi ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(2rem, 20px);
}

@media screen and (min-width: 768px) {
  .works-catnavi ul {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.works-catnavi li:not(.current-cat) a {
  color: var(--gray-color);
}

.works-catnavi li a {
  display: block;
  position: relative;
  margin-top: 10px;
  padding-right: 32px;
  line-height: 1;
  -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.works-catnavi li a::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--gray-color);
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

@media (hover: hover) and (pointer: fine) {
  .works-catnavi li a:hover {
    color: var(--base-color);
  }
}

.works-pagenavi {
  margin-top: 50px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  font-size: min(2.4rem, 24px);
}

.works-pagenavi .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.works-pagenavi .nav-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px) {
  .works-pagenavi .nav-links {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.works-pagenavi .page-numbers {
  display: inline-block;
  margin: 0 0.4em;
  -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

@media screen and (min-width: 576px) {
  .works-pagenavi .page-numbers {
    margin: 0 0.8em 0 0;
  }
}

.works-pagenavi .page-numbers:not(.current) {
  color: var(--gray-color);
}

@media (hover: hover) and (pointer: fine) {
  .works-pagenavi .page-numbers:hover {
    color: var(--base-color);
  }
}

.works-pagenavi .prev, .works-pagenavi .next {
  display: none;
}

/* -----------------------------------------------------------
    Works シングルページ
----------------------------------------------------------- */
.work-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .work-slide {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 85%;
  }
}

@media screen and (min-width: 768px) {
  .work-slide__main {
    width: 85%;
  }
}

.work-slide__thumb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5%;
}

@media screen and (min-width: 768px) {
  .work-slide__thumb {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 12%;
    margin-top: 0;
  }
}

.work-slide__thumb-item {
  max-width: 30%;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .work-slide__thumb-item {
    max-width: inherit;
  }
}

.work-slide__thumb-item:not(:first-child) {
  margin-left: 5%;
}

@media screen and (min-width: 768px) {
  .work-slide__thumb-item:not(:first-child) {
    margin-left: 0;
    margin-top: 20%;
  }
}

.work-info {
  margin-top: 40px;
  font-family: YakuHanJP, 'korolev-compressed', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .work-info {
    margin-top: 60px;
  }
}

.work-info__body {
  font-size: min(2rem, 20px);
}

.work-info__navi {
  margin-top: 30px;
  font-size: min(3rem, 30px);
}

@media screen and (min-width: 768px) {
  .work-info__navi {
    width: 72.2%;
    margin-top: 40px;
  }
}

.single-navi__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: var(--gray-color);
}

.single-navi__link--prev::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 0.6em;
  margin-right: 4px;
  background-image: url(./assets/img/ico/ico_arrow-prev-link.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  -webkit-transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
}

.single-navi__link--next::after {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 0.6em;
  margin-left: 4px;
  background-image: url(./assets/img/ico/ico_arrow-next-link.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  -webkit-transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
  transition: 0.2s cubic-bezier(0.05, 0.6, 0.16, 1.03);
}

@media (hover: hover) and (pointer: fine) {
  .single-navi__link:hover::before {
    margin-left: -3px;
    margin-right: 7px;
  }
  .single-navi__link:hover::after {
    margin-right: -3px;
    margin-left: 7px;
  }
}

.container {
  max-height: 100vh;
  overflow-y: scroll;
  position: relative;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.headline {
  align-items: center;
  background-color: var(--color);
  display: flex;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 700;
  font-size: calc(1rem + 15vmin);
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  scroll-snap-align: start;
  width: 100vw;
}
.headline:nth-child(1) {
  --color: #f9ca24;
}
.headline:nth-child(2) {
  --color: #3498db;
}
.headline:nth-child(3) {
  --color: #ff7979;
}
.headline:nth-child(4) {
  --color: #1abc9c;
}
.headline:nth-child(5) {
  --color: #e74c3c;
}
.headline:nth-child(6) {
  --color: #f8c291;
}

.word,
.char {
  -webkit-animation-delay: var(--del);
          animation-delay: var(--del);
  -webkit-animation-direction: var(--dir, normal);
          animation-direction: var(--dir, normal);
  -webkit-animation-duration: var(--dur);
          animation-duration: var(--dur);
  -webkit-animation-iteration-count: var(--it, infinite);
          animation-iteration-count: var(--it, infinite);
  -webkit-animation-name: var(--name);
          animation-name: var(--name);
  -webkit-animation-timing-function: var(--tf);
          animation-timing-function: var(--tf);
  -webkit-animation-fill-mode: var(--fill, forwards);
          animation-fill-mode: var(--fill, forwards);
  display: inline-block;
  position: relative;
  transform-origin: 50% 100%;
  z-index: 1;
}

.headline--fall .char {
  --name: fall;
  --dur: 600ms;
  --del: calc(var(--char-index) * -0.05s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes fall {
  0% {
    transform: rotateY(-25deg);
  }
  25% {
    transform: translateY(2%) rotateY(25deg);
  }
  50% {
    transform: rotateY(-25deg);
  }
  75% {
    transform: translateY(4%) rotateY(25deg);
  }
  100% {
    transform: rotateY(-25deg);
  }
}
@keyframes fall {
  0% {
    transform: rotateY(-25deg);
  }
  25% {
    transform: translateY(2%) rotateY(25deg);
  }
  50% {
    transform: rotateY(-25deg);
  }
  75% {
    transform: translateY(4%) rotateY(25deg);
  }
  100% {
    transform: rotateY(-25deg);
  }
}

.headline--flip .char {
  --name: flip;
  --dur: 4000ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: linear;
}
@-webkit-keyframes flip {
  5% {
    transform: rotateX(1turn);
  }
  10% {
    transform: rotateX(2turn);
  }
  20% {
    transform: rotateX(3turn);
  }
  40% {
    transform: rotateX(4turn);
  }
  70%, 100% {
    transform: rotateX(5turn);
  }
}
@keyframes flip {
  5% {
    transform: rotateX(1turn);
  }
  10% {
    transform: rotateX(2turn);
  }
  20% {
    transform: rotateX(3turn);
  }
  40% {
    transform: rotateX(4turn);
  }
  70%, 100% {
    transform: rotateX(5turn);
  }
}

.headline--float .char {
  --name: float;
  --dur: 2200ms;
  --del: calc(var(--char-index) * -0.5s);
  --tf: ease-in-out;
  --dir: alternate;
}
.headline--float .char:nth-child(2n) {
  --name: float-alt;
}
@-webkit-keyframes float {
  from {
    transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    transform: translate(-2%, 5%) rotate(3deg);
  }
}
@keyframes float {
  from {
    transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    transform: translate(-2%, 5%) rotate(3deg);
  }
}
@-webkit-keyframes float-alt {
  from {
    transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    transform: translate(2%, 10%) rotate(3deg);
  }
}
@keyframes float-alt {
  from {
    transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    transform: translate(2%, 10%) rotate(3deg);
  }
}

.headline--jog .char {
  --name: jog;
  --dur: 500ms;
  --del: calc(var(--char-index) * -0.025s);
  --tf: linear;
}
@-webkit-keyframes jog {
  0% {
    transform: translate(0, 0) rotate(5deg);
  }
  25% {
    transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
}
@keyframes jog {
  0% {
    transform: translate(0, 0) rotate(5deg);
  }
  25% {
    transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
}

.headline--jump .char {
  --name: jump;
  --dur: 800ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes jump {
  20% {
    transform: translateY(2%) scaleY(0.9);
  }
  40% {
    transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    transform: translateY(10%) scaleY(0.8);
  }
  70% {
    transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes jump {
  20% {
    transform: translateY(2%) scaleY(0.9);
  }
  40% {
    transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    transform: translateY(10%) scaleY(0.8);
  }
  70% {
    transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    transform: translateY(0) scaleY(1);
  }
}

.headline--twirl .char {
  --name: twirl;
  --dur: 6000ms;
  --del: calc(var(--char-index) * 0.025s);
  --tf: linear;
}
@-webkit-keyframes twirl {
  2.5% {
    transform: rotateY(1turn);
  }
  5% {
    transform: rotateY(2turn);
  }
  10% {
    transform: rotateY(3turn);
  }
  20% {
    transform: rotateY(4turn);
  }
  40% {
    transform: rotateY(5turn);
  }
  70%, 100% {
    transform: rotateY(6turn);
  }
}
@keyframes twirl {
  2.5% {
    transform: rotateY(1turn);
  }
  5% {
    transform: rotateY(2turn);
  }
  10% {
    transform: rotateY(3turn);
  }
  20% {
    transform: rotateY(4turn);
  }
  40% {
    transform: rotateY(5turn);
  }
  70%, 100% {
    transform: rotateY(6turn);
  }
}

.headline:nth-child(1) {
  --color: #fad390;
}
.headline:nth-child(2) {
  --color: #38ada9;
}
.headline:nth-child(3) {
  --color: #f7f1e3;
}
.headline:nth-child(4) {
  --color: #ff5252;
}
.headline:nth-child(5) {
  --color: #d1ccc0;
}
.headline:nth-child(6) {
  --color: #34ace0;
}

.headline--blink .char {
  --dur: 0.8s;
  --del: calc(var(--char-index) * 0.0125s);
  --name: blink;
  --tf: steps(1, start);
  opacity: 0;
}
@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}

.headline--break .char {
  --dur: 2s;
  --name: break-drop;
  --td: ease;
  color: transparent;
  overflow: visible;
}
.headline--break .char:before, .headline--break .char:after {
  color: black;
  visibility: visible;
}
.headline--break .char:before {
  -webkit-animation: break-left var(--dur) linear infinite;
          animation: break-left var(--dur) linear infinite;
  -webkit-clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
          clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
  transform-origin: 0 100%;
}
.headline--break .char:after {
  -webkit-animation: break-right var(--dur) linear infinite;
          animation: break-right var(--dur) linear infinite;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
          clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
  transform-origin: 100% 100%;
}
@-webkit-keyframes break-drop {
  20% {
    transform: translateY(-100%);
  }
  22% {
    transform: translateY(10%);
  }
  25% {
    transform: translateY(-5%);
  }
  30% {
    transform: translateY(0);
  }
}
@keyframes break-drop {
  20% {
    transform: translateY(-100%);
  }
  22% {
    transform: translateY(10%);
  }
  25% {
    transform: translateY(-5%);
  }
  30% {
    transform: translateY(0);
  }
}
@-webkit-keyframes break-left {
  22% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg);
  }
  28% {
    transform: rotate(-10deg);
  }
  30%, 100% {
    transform: rotate(-5deg);
  }
}
@keyframes break-left {
  22% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg);
  }
  28% {
    transform: rotate(-10deg);
  }
  30%, 100% {
    transform: rotate(-5deg);
  }
}
@-webkit-keyframes break-right {
  22% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(5deg);
  }
  28% {
    transform: rotate(10deg) translateY(10%);
  }
  30%, 100% {
    transform: rotate(4deg) translateY(5%);
  }
}
@keyframes break-right {
  22% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(5deg);
  }
  28% {
    transform: rotate(10deg) translateY(10%);
  }
  30%, 100% {
    transform: rotate(4deg) translateY(5%);
  }
}

.headline--hide {
  --dur: 4s;
}
.headline--hide .word:after {
  -webkit-animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
          animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
  border-top: 1vmin solid black;
  background-color: var(--color);
  content: "";
  height: 150%;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 2;
}
.headline--hide .char {
  --name: hide-jump;
  --del: calc(var(--char-index) * 0.04s);
  --td: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dir: alternate;
  transform-origin: 50% 100%;
}
.headline--hide .char[data-char=i]:after {
  --name: hide-peek;
  --dir: alternate;
  -webkit-animation: var(--name) var(--dur) var(--td) infinite var(--dir);
          animation: var(--name) var(--dur) var(--td) infinite var(--dir);
  content: attr(data-char);
  visibility: visible;
}
@-webkit-keyframes hide-jump {
  0%, 10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-25%);
  }
  20%, 100% {
    transform: translateY(100%);
  }
}
@keyframes hide-jump {
  0%, 10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-25%);
  }
  20%, 100% {
    transform: translateY(100%);
  }
}
@-webkit-keyframes hide-peek {
  0%, 35% {
    transform: translateY(0);
  }
  40%, 60% {
    transform: translateY(-40%);
  }
  70%, 90% {
    transform: translateY(-45%) skewY(10deg);
  }
  95%, 100% {
    transform: translateY(-46%) skewY(-10deg);
  }
}
@keyframes hide-peek {
  0%, 35% {
    transform: translateY(0);
  }
  40%, 60% {
    transform: translateY(-40%);
  }
  70%, 90% {
    transform: translateY(-45%) skewY(10deg);
  }
  95%, 100% {
    transform: translateY(-46%) skewY(-10deg);
  }
}
@-webkit-keyframes hide-cover {
  0%, 7% {
    transform: scaleX(0);
  }
  8%, 95% {
    transform: scaleX(1);
  }
  98%, 100% {
    transform: scaleX(0);
  }
}
@keyframes hide-cover {
  0%, 7% {
    transform: scaleX(0);
  }
  8%, 95% {
    transform: scaleX(1);
  }
  98%, 100% {
    transform: scaleX(0);
  }
}

.headline--retreat .word {
  -webkit-animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
          animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
  transform-origin: 50% 100%;
}
.headline--retreat .char {
  --name: retreat-stretch;
  --dur: 2s;
  --td: ease-out;
  transform-origin: 50% 100%;
}
@-webkit-keyframes retreat-shrink {
  15% {
    transform: scale(1.001);
  }
  30%, 80% {
    transform: scale(0.25);
  }
  100% {
    transform: scale(1.001);
  }
}
@keyframes retreat-shrink {
  15% {
    transform: scale(1.001);
  }
  30%, 80% {
    transform: scale(0.25);
  }
  100% {
    transform: scale(1.001);
  }
}
@-webkit-keyframes retreat-stretch {
  0%, 10% {
    transform: scaleY(1);
  }
  15% {
    transform: scaleY(0.5);
  }
  25% {
    transform: scaleY(4) rotate(calc(var(--distance-sine) * 65deg));
  }
  35% {
    transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
  }
  40% {
    transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
  }
  44% {
    transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
  }
  48% {
    transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes retreat-stretch {
  0%, 10% {
    transform: scaleY(1);
  }
  15% {
    transform: scaleY(0.5);
  }
  25% {
    transform: scaleY(4) rotate(calc(var(--distance-sine) * 65deg));
  }
  35% {
    transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
  }
  40% {
    transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
  }
  44% {
    transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
  }
  48% {
    transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
  }
  50% {
    transform: scaleY(1);
  }
}

.headline--sway .char {
  --dur: 1s;
  --del: calc(var(--char-index) * -0.0125s);
  --name: sway;
  --td: linear;
  --dir: alternate;
}
@-webkit-keyframes sway {
  from {
    transform: skew(-15deg) rotateX(10deg);
  }
  to {
    transform: skew(15deg) rotateX(-10deg);
  }
}
@keyframes sway {
  from {
    transform: skew(-15deg) rotateX(10deg);
  }
  to {
    transform: skew(15deg) rotateX(-10deg);
  }
}

.headline--tumble .char {
  --dur: 0.8s;
  --name: bounce;
  --del: calc(var(--char-index) * -0.125s);
  --td: ease;
  color: transparent;
  overflow: visible;
}
.headline--tumble .char:after {
  -webkit-animation: tumble var(--dur) linear infinite;
          animation: tumble var(--dur) linear infinite;
  color: black;
  visibility: visible;
  z-index: 2;
}
@-webkit-keyframes bounce {
  25% {
    transform: translateY(-25%);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-35%);
  }
}
@keyframes bounce {
  25% {
    transform: translateY(-25%);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-35%);
  }
}
@-webkit-keyframes tumble {
  60% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes tumble {
  60% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*# sourceMappingURL=style.css.map */