@charset "UTF-8";
/*!
 * Bootstrap Reboot v4.3.0 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.05px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (max-width: 640px) {
  html {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.25px;
  }
}

body {
  margin: 0;
}

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

body:not(.custom-background-image):before {
  height: 0 !important;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.75em;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0;
  margin-bottom: 0.5em;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
  word-wrap: break-word;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5em;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1em;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #0083D7;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1em;
  overflow: auto;
}

figure {
  margin: 0 0 1em;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5em;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

select {
  word-wrap: normal;
}

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

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

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

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5em;
  font-size: 1.5em;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

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

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

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

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

/*# sourceMappingURL=bootstrap-reboot.css.map */
.l-page {
  min-width: 1180px;
  width: 100vw;
  overflow: hidden;
}

@media (max-width: 640px) {
  .l-page {
    min-width: 100%;
  }
}

.l-header {
  letter-spacing: 0.25px;
  opacity: 0;
  position: fixed;
  top: 0;
  transform: translateY(-16px);
  width: 100%;
  z-index: 9999;
}

@media (max-width: 640px) {
  .l-header {
    height: 48px;
  }
}

main {
  position: relative;
  z-index: 100;
}

.l-section {
  overflow: hidden;
  padding: 120px 0;
  position: relative;
}

@media (max-width: 640px) {
  .l-section {
    padding: 64px 0;
    width: 100%;
  }
}

.l-container {
  margin: 0 auto;
  min-width: 960px;
  max-width: 1160px;
  padding: 0 16px;
  position: relative;
  z-index: 10;
}

@media (max-width: 640px) {
  .l-container {
    min-width: 100%;
    width: 100%;
    padding: 0 16px;
  }
}

.box {
  display: flex;
  justify-content: space-between;
  position: relative;
}

@media (max-width: 640px) {
  .box {
    flex-wrap: wrap;
  }
}

.block_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .block_grid {
    flex-wrap: wrap;
  }
}

.grid_2 {
  width: calc(50% - 16px);
}

@media (max-width: 640px) {
  .grid_2 {
    width: 100%;
  }
}

.grid_3 {
  width: calc(33% - 16px);
}

@media (max-width: 640px) {
  .grid_3 {
    width: 100%;
  }
}

.grid_4 {
  width: calc(25% - 8px);
}

@media (max-width: 640px) {
  .grid_4 {
    width: calc(50% - 8px);
  }
}

.l-footer {
  align-items: center;
  display: flex;
  color: #999;
  justify-content: center;
  padding: 32px 0;
}

.c-hlineWrap {
  margin-bottom: 104px;
  position: relative;
  text-align: center;
  z-index: 100;
}

@media (max-width: 640px) {
  .c-hlineWrap {
    margin-bottom: 80px;
  }
}

.c-hline {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1em;
  margin-bottom: 0.2em;
  position: relative;
}

.c-hline-lead {
  font-size: 0.8rem;
}

.c-hline::before {
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: hline;
  animation-timing-function: linear;
  content: "";
  height: 48px;
  left: 50%;
  position: absolute;
  top: -120px;
  width: 4px;
  z-index: 1000;
}

@media (max-width: 640px) {
  .c-hline::before {
    top: -80px;
  }
}

@keyframes hline {
  0% {
    transform: scale(1, 0);
    transform-origin: top;
  }
  60% {
    transform: scale(1, 1);
    transform-origin: top;
  }
  68% {
    transform: scale(1, 1);
    transform-origin: bottom;
  }
  75% {
    transform: scale(1, 0);
    transform-origin: bottom;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: top;
  }
}

.c-fixCta-wrap {
  align-items: center;
  background-color: #111;
  bottom: 10%;
  display: flex;
  flex-wrap: wrap;
  height: 80px;
  justify-content: center;
  position: fixed;
  right: 0;
  transition: 0.5s;
  width: 104px;
  z-index: 1000;
}

@media (max-width: 640px) {
  .c-fixCta-wrap {
    height: 72px;
    left: 0;
    right: auto;
    width: 64px;
  }
}

.c-fixCta-wrap span {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.c-fixCta-wrap .far {
  font-size: 2rem;
}

.c-fixCta {
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  flex-wrap: wrap;
  line-height: 1;
  text-align: center;
  width: 100%;
}

@media (max-width: 640px) {
  .c-fixCta {
    font-size: 0.8rem;
  }
}

.u-cover_black::after {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7);
}

.u-txt-s {
  font-size: 0.8rem;
}

.is-hidden {
  display: none;
  visibility: hidden;
}

body {
  background-color: #111;
}

.header-logo {
  align-items: center;
  color: #999;
  display: flex;
  font-size: 0.8rem;
  font-weight: 400;
  height: 64px;
  margin-left: auto;
  justify-content: flex-end;
  padding-right: 16px;
}

.hero {
  align-items: center;
  display: flex;
  height: calc(90vh - 64px);
  overflow: hidden;
  padding: 0 96px;
  position: relative;
}

@media (max-width: 640px) {
  .hero {
    height: calc(88vh - 64px);
    padding: 0  0 0 16px;
  }
}

.marqueeWrap {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-70%);
  -webkit-transform: translateY(-70%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .marqueeWrap {
    transform: translateY(-80%);
    -webkit-transform: translateY(-80%);
  }
}

.marquee {
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: marquee;
  animation-timing-function: linear;
}

.marquee p {
  color: #111;
  display: inline-block;
  font-family: 'Cabin', sans-serif;
  font-size: 200px;
  letter-spacing: 8px;
  line-height: 1;
  margin-bottom: 0;
  margin-right: 80px;
  text-stroke: 2px #333;
  -webkit-text-stroke: 2px #333;
}

@media (max-width: 640px) {
  .marquee p {
    font-size: 140px;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(15%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.leadBlock {
  z-index: 100;
}

@media (max-width: 640px) {
  .leadBlock {
    padding-bottom: 32px;
  }
}

.lead {
  font-family: 'Bebas Neue', cursive;
  font-size: 110px;
  font-weight: 800;
  letter-spacing: 8px;
}

@media (max-width: 640px) {
  .lead {
    font-size: 80px;
  }
}

.lead-txtWrap {
  line-height: 1;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .lead-txtWrap {
    line-height: 1.2;
  }
}

.lead-txtWrap span {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  width: auto;
}

.js-scroll.lead .lead-txtWrap {
  -ms-filter: blur(6px);
  filter: blur(6px);
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.4s;
}

.js-scroll.lead .lead-txtWrap:nth-child(2) {
  transition-delay: 0.4s;
}

.js-scroll.lead .lead-txtWrap:nth-child(3) {
  transition-delay: 0.6s;
}

.is-in.lead .lead-txtWrap {
  -ms-filter: blur(0px);
  filter: blur(0px);
  opacity: 1;
}

.js-scroll.name {
  opacity: 0;
  transform: translate(-8px, 0px);
  transition-delay: 0.8s;
  transition-duration: 0.3s;
}

.is-in.name {
  opacity: 1;
  transform: translate(0px, 0px);
}

.serviceSec {
  background-image: url(../images/serviceBg.jpg);
  background-position: center;
  background-size: cover;
}

.hline_service::before {
  background-color: #FF00A7;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.service-item {
  background-color: rgba(255, 255, 255, 0.9);
  color: #111;
  margin-bottom: 2em;
  overflow: hidden;
  padding: 96px 40px 96px;
  position: relative;
  width: 32%;
}

@media (max-width: 640px) {
  .service-item {
    padding: 96px 24px 64px;
    width: 100%;
  }
}

.service-item::after {
  top: -32px;
  color: #f3f3f3;
  content: "01";
  font-size: 176px;
  line-height: 1.0;
  position: absolute;
  left: -16px;
}

.service-item:nth-child(2).service-item::after {
  content: "02";
}

.service-item:nth-child(3).service-item::after {
  content: "03";
}

.service-item:nth-child(4).service-item::after {
  content: "04";
}

.service-item:nth-child(5).service-item::after {
  content: "05";
}

.service-item:nth-child(6).service-item::after {
  content: "06";
}

.service-ttlBox {
  align-items: center;
  display: flex;
  margin-bottom: 1.6em;
}

.service-iconWrap {
  border-radius: 100px;
  height: calc(100% - 32px);
  margin-bottom: 0;
  opacity: 0.2;
  position: absolute;
  right: 16px;
  top: 16px;
}

.service-iconWrap svg {
  fill: #ccc;
  height: 100%;
}

.service-ttl {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 48px;
  position: relative;
  text-align: center;
}

.js-scroll .service-ttl {
  opacity: 0;
  transition-duration: 0.3s;
  transform: translate(0px, 8px);
  -webkit-transform: translate(0px, 8px);
}

.is-in .service-ttl {
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.service-ttl::after {
  background-color: #111;
  bottom: -20px;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 48px;
}

.js-scroll .service-ttl::after {
  transform: translate(-50%, -50%) scale(0, 1);
  -webkit-transform: translate(-50%, -50%) scale(0, 1);
  transition-duration: 0.2s;
}

.is-in .service-ttl::after {
  transform: translate(-50%, -50%) scale(1, 1);
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
}

.service-txtBox {
  position: relative;
  z-index: 100;
}

.service-txtBox p {
  margin-bottom: 0;
}

.service-summary {
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .service-summary {
    font-size: 1rem;
  }
}

.js-scroll .service-summary {
  opacity: 0;
  transform: translate(0px, -8px);
  -webkit-transform: translate(0px, -8px);
  transition-delay: 0.3s;
  transition-duration: 0.2s;
}

.is-in .service-summary {
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-duration: 0.2s;
}

.hline_about::before {
  background-color: #145CFF;
}

.about-block {
  display: flex;
  justify-content: center;
  position: relative;
}

.about-contentBox {
  background-color: #fff;
  color: #111;
  padding: 64px;
  width: 50%;
  z-index: 100;
}

@media (max-width: 640px) {
  .about-contentBox {
    padding: 32px;
    width: 100%;
  }
}

.js-scroll .about-contentBox {
  opacity: 0;
  transform: scale(0.8, 0.8);
  -webkit-transform: scale(0.8, 0.8);
  transition-delay: 0.3s;
  transition-duration: 0.6s;
}

.is-in .about-contentBox {
  opacity: 1;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transition-duration: 0.3s;
}

.about-imgWrap {
  border-radius: 1000px;
  margin: 0 auto 1em;
  overflow: hidden;
  width: 50%;
}

.about-name {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 auto 1em;
  text-align: center;
}

.about-name span {
  font-style: italic;
  font-weight: 400;
}

.about-block::after, .about-block::before {
  content: "";
  height: 65%;
  position: absolute;
  transform: translateY(-50%);
  width: 29%;
}

@media (max-width: 640px) {
  .about-block::after, .about-block::before {
    width: 100%;
  }
}

.about-block::before {
  background-image: url(../images/about01.jpg);
  background-size: cover;
  left: 0;
  top: 50%;
}

@media (max-width: 640px) {
  .about-block::before {
    left: -8px;
  }
}

.about-block::after {
  background-image: url(../images/about02.jpg);
  background-size: cover;
  right: 0;
  top: 50%;
}

@media (max-width: 640px) {
  .about-block::after {
    right: -8px;
  }
}

.js-scroll.about-block::after, .js-scroll.about-block::before {
  opacity: 0;
  transition-duration: 0.3s;
}

.is-in.about-block::after, .is-in.about-block::before {
  opacity: 1;
  transition-duration: 0.3s;
}

.js-scroll.about-block::before {
  transform: translateX(64px) translateY(-50%);
}

.is-in.about-block::before {
  transform: translateX(0px) translateY(-50%);
}

.js-scroll.about-block::after {
  transform: translateX(-64px) translateY(-50%);
}

.is-in.about-block::after {
  transform: translateX(0px) translateY(-50%);
}

.worksSec {
  background-color: #333;
}

.worksSec::before {
  color: #999;
  content: "Owned Service";
  font-size: 180px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.1;
  position: absolute;
  right: 16px;
  top: 32px;
  writing-mode: vertical-rl;
}

@media (max-width: 640px) {
  .worksSec::before {
    font-size: 120px;
    right: -24px;
    top: -8px;
  }
}

.hline_works::before {
  background-color: #39FF58;
}

.works-1stBlock {
  margin-bottom: 120px;
}

.works-contentBlock {
  align-items: flex-start;
  display: flex;
  margin-bottom: 80px;
  position: relative;
}

@media (max-width: 640px) {
  .works-contentBlock {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
}

.works-txtBox {
  padding: 112px 0;
  width: 40%;
}

@media (max-width: 640px) {
  .works-txtBox {
    order: 2;
    padding: 32px 0 0;
    width: 100%;
  }
}

.works-link {
  border: solid 1px #fff;
  color: #fff;
  display: inline-block;
  font-size: 0.8rem;
  margin-top: 1rem;
  padding: 8px 24px 8px 16px;
  position: relative;
}

.works-link::after {
  background-color: #fff;
  content: "";
  height: 1px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateX(50%);
  -webkit-transform: translateX(50%);
  transform-origin: left;
  transition: 0.3s;
  width: 24px;
}

.works-link:hover::after {
  transform: translateX(50%) scale(3, 1);
  -webkit-transform: translateX(50%) scale(3, 1);
  transform-origin: left;
  transition: 0.3s;
}

.works-service {
  font-size: 2rem;
  position: relative;
}

.works-imgBox {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 52%;
}

@media (max-width: 640px) {
  .works-imgBox {
    display: block;
    height: auto;
    order: 1;
    position: relative;
    width: 100%;
  }
}

.works-img01 {
  position: absolute;
  right: -32px;
  top: 0;
  width: 70%;
}

@media (max-width: 640px) {
  .works-img01 {
    top: -32px;
    width: 80%;
  }
}

.works-img02 {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 40%;
}

@media (max-width: 640px) {
  .works-img02 {
    height: auto;
    position: relative;
    width: 50%;
  }
}

.works-imgWrap {
  display: block;
  position: relative;
  width: 100%;
}

.works-imgWrap img {
  height: auto;
  width: 100%;
}

.js-scroll .works-imgWrap {
  opacity: 0;
  transition-delay: 0.3s;
  transition-duration: 0.1s;
}

.is-in .works-imgWrap {
  opacity: 1;
  transition-duration: 0.1s;
}

.js-scroll.works-img01::before, .js-scroll.works-img02::before {
  background-color: #39FF58;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleX(0);
  width: 100%;
  z-index: 100;
}

.is-in.works-img01::before {
  animation: coverOpen 0.6s ease 0s 1 none;
}

.is-in.works-img02::before {
  animation: coverOpen 0.6s ease 0.1s 1 none;
}

@keyframes coverOpen {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  60% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.works-movieBlock {
  align-items: center;
  background-color: #111;
  display: flex;
  padding: 32px;
  width: 100%;
}

@media (max-width: 640px) {
  .works-movieBlock {
    flex-wrap: wrap;
    padding: 16px;
  }
}

.works-movie-ttl {
  color: #111;
  font-size: 120px;
  order: 3;
  -webkit-order: 3;
  text-align: center;
  text-stroke: 2px #ccc;
  -webkit-text-stroke: 2px #ccc;
  width: 50%;
}

@media (max-width: 640px) {
  .works-movie-ttl {
    font-size: 96px;
    order: 0;
    -webkit-order: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .works-movieWrap {
    margin-bottom: 32px;
  }
}

.works-1stBlock .works-service::after {
  color: #111;
  content: attr(data-subttl);
  font-size: 72px;
  left: -16px;
  line-height: 1;
  opacity: 0.2;
  position: absolute;
  top: -32px;
  z-index: -1;
}

@media (max-width: 640px) {
  .works-1stBlock .works-service::after {
    font-size: 56px;
  }
}

.works-2ndBlock {
  margin-bottom: 96px;
}

.works-2ndBlock .works-contentBlock {
  justify-content: flex-end;
}

.works-2ndBlock .works-service::after {
  color: #111;
  content: attr(data-subttl);
  font-size: 72px;
  left: 32px;
  line-height: 1;
  opacity: 0.2;
  position: absolute;
  top: -32px;
  white-space: nowrap;
  z-index: -1;
}

@media (max-width: 640px) {
  .works-2ndBlock .works-service::after {
    font-size: 56px;
  }
}

.works-2ndBlock .works-imgBox {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 52%;
}

@media (max-width: 640px) {
  .works-2ndBlock .works-imgBox {
    display: block;
    height: auto;
    order: 1;
    position: relative;
    width: 100%;
  }
}

.works-2ndBlock .works-img01 {
  bottom: 0;
  left: -32px;
  top: auto;
  z-index: 10;
}

@media (max-width: 640px) {
  .works-2ndBlock .works-img01 {
    bottom: -24px;
    left: auto;
    right: 0;
  }
}

.works-2ndBlock .works-img02 {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}

@media (max-width: 640px) {
  .works-2ndBlock .works-img02 {
    position: relative;
  }
}

@media (max-width: 640px) {
  .works-2ndBlock .works-txtBox {
    padding: 64px 0 0;
  }
}

.works-2ndBlock .works-movie-ttl {
  order: 0;
  -webkit-order: 0;
}

.works-2ndBlock .works-movieWrap {
  display: flex;
  justify-content: center;
  width: 50%;
}

@media (max-width: 640px) {
  .works-2ndBlock .works-movieWrap {
    width: 100%;
  }
}

.works-site-ttl {
  font-size: 2rem;
}

.works-site-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.works-site-item {
  position: relative;
  width: 30%;
}

@media (max-width: 640px) {
  .works-site-item {
    margin: 0 auto;
    margin-bottom: 16px;
    width: 80%;
  }
}

.js-scroll.works-site-item {
  opacity: 0;
  transition-duration: 0.4s;
  transform: translate(0px, 16px);
}

.js-scroll.works-site-item:nth-child(2) {
  transition-delay: 0.2s;
}

.js-scroll.works-site-item:nth-child(3) {
  transition-delay: 0.4s;
}

.is-in.works-site-item {
  opacity: 1;
  transition-duration: 0.4s;
  transform: translate(0px, 0px);
}

.works-site-link {
  color: #fff;
  display: block;
}

.works-site-img {
  width: 100%;
}

.works-site-outline {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  padding: 16px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.works-site-name {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 0.2em;
}

.works-site-txt {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.photoSec {
  background-image: url(../images/newyork.png);
  background-position: top 100px center;
  background-size: cover;
}

.hline_photo::before {
  background-color: #F6FF14;
}

.photo-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.photo-item {
  width: 45%;
}

@media (max-width: 640px) {
  .photo-item {
    margin-bottom: 16px;
    width: 100%;
  }
}

.js-scroll.photo-item {
  -ms-filter: blur(8px);
  filter: blur(8px);
  opacity: 0.1;
  transition-duration: 1s;
}

.is-in.photo-item {
  -ms-filter: blur(0px);
  filter: blur(0px);
  opacity: 1;
}

.photo-wrap {
  padding-top: 100%;
  position: relative;
  width: 100%;
}

.photo-img {
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.contactSec {
  background-image: url(../images/contactBg.jpg);
  background-position: center;
  background-size: cover;
}

.hline_contact::before {
  background-color: #FF4500;
}

.contactSec .c-hlineWrap {
  margin-bottom: 64px;
}

.contact-mail {
  align-items: center;
  background-color: #fff;
  color: #111;
  display: flex;
  font-size: 2rem;
  font-weight: 600;
  height: 120px;
  justify-content: center;
  margin: 0 auto 32px;
  width: 640px;
}

@media (max-width: 640px) {
  .contact-mail {
    height: 96px;
    margin-bottom: 32px;
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
  }
}

.contact-mail .fa-envelope {
  margin-right: 8px;
}

.js-scroll .fa-envelope {
  opacity: 0;
  transition-duration: 0.4s;
}

.is-in .fa-envelope {
  opacity: 1;
  transform: rotate(360deg);
}

.js-scroll .contact-mail-txt {
  opacity: 0;
  transform: translateX(-16px);
  transition-delay: 0.2s;
  transition-duration: 0.4s;
}

.is-in .contact-mail-txt {
  opacity: 1;
  transform: translateX(0px);
}

.contact-snsList {
  display: flex;
  justify-content: center;
}

.contact-snsItem {
  font-size: 24px;
  text-align: center;
  width: 96px;
}

.js-scroll.contact-snsItem {
  opacity: 0;
  transform: scale(1.5, 1.5);
  transition-delay: 0.1s;
  transition-duration: 0.4s;
}

.is-in.contact-snsItem {
  opacity: 1;
  transform: scale(1, 1);
}

.contact-sns {
  align-items: center;
  border-radius: 200px;
  color: #fff;
  display: inline-flex;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.contact-sns_note {
  transform: scale(1.3, 1.3);
}

.loading {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2000;
}

.loading-switch {
  background-color: #111;
  height: 100vh;
  left: 0;
  position: fixed;
  opacity: 1;
  top: 0;
  transition: 2s;
  width: 100vw;
  z-index: 1000;
}

.loading-switch.is-in {
  animation: loadingSwitch 3s ease 0s 1 forwards;
}

@keyframes loadingSwitch {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}