@charset "UTF-8";
/*
* un-t graphic
* main.css
*
*/
/* ------------------------
  Foundation
------------------------ */
html,
body {
  height: 100%;
}

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

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

pre,
textarea {
  overflow: auto;
}

[hidden],
audio:not([controls]),
template {
  display: none;
}

details,
main,
summary {
  display: block;
}

input[type=number] {
  width: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

progress {
  display: inline-block;
}

small {
  font-size: 75%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

textarea {
  resize: vertical;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  border: 0; 
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  min-height: 1.5em;
  color: inherit;
  font-family: inherit; 
  font-weight: inherit;
  font-style: inherit;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; 

  -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0; 
  border: 0;
}

input {
  line-height: normal;
}

code,
kbd,
pre,
samp {
  font-family: monospace,monospace;
}

ol,
ul {
  list-style: none;
}

select {
     -moz-appearance: none;
  -webkit-appearance: none;
}

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

fieldset {
  border: 0;
}

/* ------------------------
  Base Settings
------------------------ */
html {
  font-size: 62.5%;
}

body {
  background-color: #fff;
  word-wrap: break-word; 
  color: #333;
  font-family: YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.6875;

  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  text-decoration: underline; 
  color: #00f;
}
a:visited {
  color: #000080;
}
a:hover {
  text-decoration: none; 
  color: #f00;
}
a:active {
  text-decoration: none; 
  color: #ff8000;
}
a[href^="tel:"] {
  cursor: text; 
  text-decoration: none;
}

::-moz-selection {
  background-color: #036eb8;
  color: #fff;
  text-shadow: none;
}

::selection {
  background-color: #036eb8;
  color: #fff;
  text-shadow: none;
}

/* ------------------------
  utilities Classes
------------------------ */
.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  overflow: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  width: 1px; 
  height: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  overflow: visible;
  clip: auto;
  position: static;
  margin: 0;
  width: auto; 
  height: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* ------------------------
  余白 調整用class
------------------------ */
.mt-0 {
  margin-top: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

/* ------------------------
  text-align 調整用class
------------------------ */
.align-center {
  text-align: center !important;
}

.align-left {
  text-align: left !important;
}

.align-right {
  text-align: right !important;
}

/* ------------------------
  show or hide
------------------------ */
.u-show-md {
  display: none !important;
}
@media screen and (min-width: 600px) {
  .u-show-md {
    display: block !important;
  }
}

.u-show-lg {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  .u-show-lg {
    display: block !important;
  }
}

br.u-show-md,
span.u-show-md {
  display: none !important;
}
@media screen and (min-width: 600px) {
  br.u-show-md,
  span.u-show-md {
    display: inline !important;
  }
}

br.u-show-lg,
span.u-show-lg {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  br.u-show-lg,
  span.u-show-lg {
    display: inline !important;
  }
}

.u-hide-md {
  display: block !important;
}
@media screen and (min-width: 600px) {
  .u-hide-md {
    display: none !important;
  }
}

.u-hide-lg {
  display: block !important;
}
@media screen and (min-width: 1024px) {
  .u-hide-lg {
    display: none !important;
  }
}

br.u-hide-md,
span.u-hide-md {
  display: inline !important;
}
@media screen and (min-width: 600px) {
  br.u-hide-md,
  span.u-hide-md {
    display: none !important;
  }
}

br.u-hide-lg,
span.u-hide-md {
  display: inline !important;
}
@media screen and (min-width: 1024px) {
  br.u-hide-lg,
  span.u-hide-md {
    display: none !important;
  }
}

/* ------------------------
  画像置換
------------------------ */
.u-image-replace {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%; 
  font-size: 0;
}

/* ------------------------
  Components
------------------------ */
.hoge {
  width: 100%;
}

/* 中コメント ------------ */
.hoge_medium {
  width: 100%;
}

/* 中コメント */
.hoge_small {
  width: 100%;
}

/* ------------------------
  Layout
------------------------ */
body {
  background-color: #101010;
}

.l-container {
  overflow: hidden;
  margin: 0 auto;
  max-width: 1920px;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .l-container {
    min-width: 1280px;
  }
}

.l-header {
  position: fixed;
  z-index: 3; 
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
}
@media screen and (min-width: 600px) {
  .l-header {
    height: 115px;
  }
}
@media screen and (min-width: 1024px) {
  .l-header {
    height: 81px;
  }
}
.l-header::after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: -6px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 6px;
  background: url(../img/header_shadow_sm.png) repeat-x;
  background-size: 1px 6px;
}
@media screen and (min-width: 600px) {
  .l-header::after {
    bottom: -14px;
    height: 14px;
    background: url(../img/header_shadow_md.png) repeat-x;
    background-size: 1px 6px;
  }
}

.l-header_title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  margin: auto;
  width: 137px;
  height: 35px;
  background: url(../img/header_logo.svg) no-repeat;
  background-size: 137px 35px;
}
@media screen and (min-width: 600px) {
  .l-header_title {
    left: 45px;
    width: 272px;
    height: 70px;
    background-size: 272px 70px;
  }
}
@media screen and (min-width: 1024px) {
  .l-header_title {
    left: 47px;
    width: 207px;
    height: 53px;
    background-size: 207px 53px;
  }
}

.l-header_btn {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  padding: 17px 0 0 20px;
  width: 72px;
  height: 100%;
  cursor: pointer; 
  background-color: #fff;
}
@media screen and (min-width: 600px) {
  .l-header_btn {
    padding: 31px 0 0 41px;
    width: 140px;
  }
}
@media screen and (min-width: 1024px) {
  .l-header_btn {
    padding: 26px 0 0 47px;
    width: 126px;
  }
}
@media screen and (min-width: 1450px) {
  .l-header_btn {
    display: none;
  }
}

.l-header_btn_inner {
  position: relative;
  z-index: 3; 
  width: 32px;
  height: 34px;
}
@media screen and (min-width: 600px) {
  .l-header_btn_inner {
    width: 60px;
    height: 64px;
  }
}
@media screen and (min-width: 1024px) {
  .l-header_btn_inner {
    width: 32px;
    height: 34px;
  }
}

.l-header_btn_line {
  position: absolute;
  top: 9px;
  left: 0;
  width: 32px;
  height: 3px;
  background-color: #297fbe;
}
.is-navigation-show .l-header_btn_line {
  background-color: transparent;
}
@media screen and (min-width: 600px) {
  .l-header_btn_line {
    top: 18px;
    width: 60px;
    height: 6px;
  }
}
@media screen and (min-width: 1024px) {
  .l-header_btn_line {
    top: 9px;
    left: 0;
    width: 32px;
    height: 3px;
  }
}
.l-header_btn_line::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  -webkit-transform: translateY(-9px);
          transform: translateY(-9px); 
  background-color: #297fbe;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;
}
.is-navigation-show .l-header_btn_line::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media screen and (min-width: 600px) {
  .l-header_btn_line::before {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
  }
}
@media screen and (min-width: 1024px) {
  .l-header_btn_line::before {
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
  }
}
.l-header_btn_line::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  -webkit-transform: translateY(9px);
          transform: translateY(9px); 
  background-color: #297fbe;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;
}
.is-navigation-show .l-header_btn_line::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media screen and (min-width: 600px) {
  .l-header_btn_line::after {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
}
@media screen and (min-width: 1024px) {
  .l-header_btn_line::after {
    -webkit-transform: translateY(9px);
            transform: translateY(9px);
  }
}

.l-header_btn_text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #297fbe;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.0rem;
  font-weight: bold;
  line-height: 1;
}
@media screen and (min-width: 600px) {
  .l-header_btn_text {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 1024px) {
  .l-header_btn_text {
    font-size: 1.0rem;
  }
}
.is-navigation-show .l-header_btn_text-menu {
  display: none;
}
.l-header_btn_text-close {
  display: none;
  letter-spacing: -1px;
}
.is-navigation-show .l-header_btn_text-close {
  display: block;
}

.l-navigation-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  padding-top: 60px;
  width: 100%;
  height: 100%;
  transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); 
  -webkit-transform: translateX(100%); 
          transform: translateX(100%);
  background-color: rgba(75, 147, 198, 0.95);
}
@media screen and (min-width: 600px) {
  .l-navigation-sm {
    padding-top: 115px;
  }
}
.is-navigation-show .l-navigation-sm {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.l-navigation-vlg {
  display: none;
}
@media screen and (min-width: 1450px) {
  .l-navigation-vlg {
    display: block;
    margin: 0 auto;
    width: 784px;
    height: 100%;
    background: url(../img/navigation_bg_vlg.png) no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 1450px) {
  .l-navigation_itemWrap {
    display: flex; 
    width: 100%;
    height: 100%;
  }
}

.l-navigation_item {
  margin: 0 auto;
  width: 151px;
  height: 33px;
}
@media screen and (min-width: 600px) {
  .l-navigation_item {
    width: 301px;
    height: 66px;
  }
}
@media screen and (min-width: 1024px) {
  .l-navigation_item {
    width: 205px;
    height: 45px;
  }
}
@media screen and (min-width: 1450px) {
  .l-navigation_item {
    opacity: 0; 
    margin: 0;
    width: 196px;
    height: 100%;
  }
  .l-navigation_item:hover {
    opacity: 1;
  }
}
.l-navigation_item a {
  display: block;
  width: 100%;
  height: 100%;
}
.l-navigation_item + .l-navigation_item {
  margin-top: 30px;
}
@media screen and (min-width: 600px) {
  .l-navigation_item + .l-navigation_item {
    margin-top: 60px;
  }
}
@media screen and (min-width: 1450px) {
  .l-navigation_item + .l-navigation_item {
    margin-top: 0;
  }
}
.l-navigation_item-01 {
  background: url(../img/header_nav_item_01_sm.png) no-repeat;
  background-size: auto 100%;
}
@media screen and (min-width: 1450px) {
  .l-navigation_item-01 {
    background: url(../img/navigation_bg_on_vlg.png) no-repeat;
    background-size: auto 100%;
  }
}
.l-navigation_item-02 {
  background: url(../img/header_nav_item_02_sm.png) no-repeat;
  background-size: auto 100%;
}
@media screen and (min-width: 1450px) {
  .l-navigation_item-02 {
    background: url(../img/navigation_bg_on_vlg.png) no-repeat;
    background-position: -196px 0; 
    background-size: auto 100%;
  }
}
.l-navigation_item-03 {
  background: url(../img/header_nav_item_03_sm.png) no-repeat;
  background-size: auto 100%;
}
@media screen and (min-width: 1450px) {
  .l-navigation_item-03 {
    background: url(../img/navigation_bg_on_vlg.png) no-repeat;
    background-position: -392px 0; 
    background-size: auto 100%;
  }
}
.l-navigation_item-04 {
  background: url(../img/header_nav_item_04_sm.png) no-repeat;
  background-size: auto 100%;
}
@media screen and (min-width: 1450px) {
  .l-navigation_item-04 {
    background: url(../img/navigation_bg_on_vlg.png) no-repeat;
    background-position: -588px 0; 
    background-size: auto 100%;
  }
}

.l-mask {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.8s cubic-bezier(0, 0, 0.58, 1); 
  background: url(data:image/gif;base64,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) center center no-repeat #fff;
  background-size: 88px 88px;
}
.l-mask.is-hide {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

/* --------------------------------
	main
-------------------------------- */
.l-main {
  position: relative;
  z-index: 1; 
  margin: 60px auto 0;
}
@media screen and (min-width: 600px) {
  .l-main {
    margin-top: 115px;
  }
}
@media screen and (min-width: 1024px) {
  .l-main {
    margin-top: 0;
  }
}

/* --------------------------------
	Site Footer
-------------------------------- */
.siteFooter {
  background: #232323;
  color: #999;
}

.siteFooter .ci {
  padding: 27px 0 39px;
}

.siteFooter .ci .logo {
  margin: 0 auto;
  width: 90px;
  height: 90px;
  background: url(/img/common/ftr_logo.png) no-repeat center center;
  background-size: cover;
  font-size: 0;
}
.siteFooter .ci .logo a {
  display: block;
  height: 100%;
}

.siteFooter .ci .philosophy {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3846;
}

.siteFooter .meta {
  overflow: hidden;
  background: #101010;
}

.siteFooter .meta > .container {
  margin: 0 auto; 
  max-width: 960px;
}

.siteFooter .meta .group {
  display: table;
  float: right;
}

.siteFooter .meta .group_item {
  display: table-cell;
}

.siteFooter .meta .group_item img {
  height: 50px;
}

.siteFooter .meta .copyright {
  line-height: 50px;
}

@media only screen and (max-width: 1020px) {
  .siteFooter .meta > .container {
    padding: 15px 30px 20px;
  }
  .siteFooter .meta .group {
    float: none;
    margin: 0 auto 6px;
    padding-left: 4px;
  }
  .siteFooter .meta .group_item {
    padding: 0 5px;
  }
  .siteFooter .meta .copyright {
    display: block;
    text-align: center;
    font-size: 10px;
    line-height: normal;
  }
}

/* ------------------------
  project
------------------------ */
.cover {
  position: relative;
  z-index: 12; 
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .cover {
    min-height: 760px;
  }
}

.cover_inner.is-opaciy {
  opacity: 0.7;
  cursor: pointer;
}

@media screen and (min-width: 1024px) {
  .cover_inner {
    margin-left: 50%;
    min-width: 1450px;
    height: 100%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@media screen and (min-width: 1450px) {
  .cover_inner {
    margin-left: 0;
    width: 100%;
    min-width: initial;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.cover_inner::after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: -6px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 6px;
  background: url(../img/cover_shadow_sm.png) repeat-x;
  background-size: 1px 6px;
}
@media screen and (min-width: 600px) {
  .cover_inner::after {
    background: url(../img/cover_shadow_md.png) repeat-x;
    background-size: 1px 6px;
  }
}
@media screen and (min-width: 1024px) {
  .cover_inner::after {
    bottom: -12px;
    height: 12px;
    background: url(../img/cover_shadow_lg.png) repeat-x;
    background-size: 1px 12px;
  }
}

.cover_inner video {
  width: 100%;
}

.cover_replay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/cover_replay_sm.png) center center no-repeat;
  background-size: 100% auto; 
  pointer-events: none;
}
@media screen and (min-width: 600px) {
  .cover_replay {
    background: url(../img/cover_replay_md.png) center center no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  .cover_replay {
    background: url(../img/cover_replay_lg.png) center center no-repeat;
    background-size: 100% auto;
  }
}
.cover_replay.is-show {
  display: block;
}

.cover_pause {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/cover_pause_sm.png) center center no-repeat;
  background-size: 100% auto; 
  pointer-events: none;
}
@media screen and (min-width: 600px) {
  .cover_pause {
    background: url(../img/cover_pause_md.png) center center no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  .cover_pause {
    background: url(../img/cover_pause_lg.png) center center no-repeat;
    background-size: 100% auto;
  }
}
.cover_pause.is-show {
  display: block;
}

.cover_scroll {
  visibility: hidden; 
  opacity: 0;
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: calc(40/640*100%);
  left: 0;
  margin: auto;
  width: 36px;
  height: 28px;
  background: url(../img/cover_scroll.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .cover_scroll {
    bottom: calc(32/768*100%); 
    width: 72px;
    height: 56px;
  }
}
@media screen and (min-width: 1024px) {
  .cover_scroll {
    bottom: calc(33/1920*100%); 
    width: 54px;
    height: 39px;
  }
}
.cover_scroll.is-show {
  visibility: visible; 
  opacity: 1;
}
.cover_scroll a {
  display: block;
  width: 100%;
  height: 100%;
}

.creative {
  position: relative;
  padding-top: 397.8125%;
  width: 100%;
  height: 0;
  background: url(../img/creative_bg_sm.jpg) center top no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .creative {
    padding-top: 332.03125%;
    background: url(../img/creative_bg_md.jpg) center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  .creative {
    padding-top: 0;
    height: 1734px;
    background: url(../img/creative_bg_04_lg.jpg) center top no-repeat;
  }
}

.creative_itemWrap {
  display: none;
}
@media screen and (min-width: 1024px) {
  .creative_itemWrap {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .creative_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .creative_item-01 {
    z-index: 3; 
    background: url(../img/creative_bg_01_lg.jpg) center top no-repeat;
    background-size: auto;
  }
  .creative_item-02 {
    z-index: 2; 
    background: url(../img/creative_bg_02_lg.jpg) center top no-repeat;
    background-size: auto;
  }
  .creative_item-03 {
    z-index: 1; 
    background: url(../img/creative_bg_03_lg.jpg) center top no-repeat;
    background-size: auto;
  }
}

.creative_objWrap {
  display: none;
}
@media screen and (min-width: 1024px) {
  .creative_objWrap {
    display: block;
    position: absolute;
    z-index: 4; 
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 1024px;
    height: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .creative_obj {
    overflow: hidden;
    opacity: 0; 
    position: absolute;
  }
  .creative_obj.is-show {
    opacity: 1;
  }
  .creative_obj-01 {
    opacity: 1; 
    top: 323px;
    left: 126px;
    width: 142px;
    height: 97px;
  }
  .creative_obj-02 {
    top: 622px;
    left: 777px;
    width: 177px;
    height: 167px;
  }
  .creative_obj-03 {
    top: 898px;
    left: 109px;
    width: 198px;
    height: 53px;
  }
  .creative_obj-04 {
    top: 1367px;
    left: 655px;
    width: 230px;
    height: 107px;
  }
  .creative_obj-05 {
    top: 1101px;
    left: 113px;
    width: 430px;
    height: 400px;
  }
  .creative_obj-05.is-anime {
    opacity: 1;
  }
  .creative_obj-05.is-anime .creative_obj_inner {
    -webkit-animation: crObj05 0.5s steps(1) forwards 0.2s;
            animation: crObj05 0.5s steps(1) forwards 0.2s;
  }
}

.creative_obj_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
}
.creative_obj-01 .creative_obj_inner {
  -webkit-animation: crObj01 2s steps(2) infinite;
          animation: crObj01 2s steps(2) infinite; 
  background: url(../img/creative_ill_01_01.png) center top no-repeat, url(../img/creative_ill_01_02.png) center bottom no-repeat;
}
.creative_obj-02 .creative_obj_inner {
  height: 200%;
  -webkit-animation: crObj02 2s steps(2) infinite;
          animation: crObj02 2s steps(2) infinite; 
  background: url(../img/creative_ill_02_01.png) center top no-repeat, url(../img/creative_ill_02_02.png) center bottom no-repeat;
}
.creative_obj-03 .creative_obj_inner {
  -webkit-animation: crObj03 2s steps(2) infinite;
          animation: crObj03 2s steps(2) infinite; 
  background: url(../img/creative_ill_03_01.png) center top no-repeat, url(../img/creative_ill_03_02.png) center bottom no-repeat;
}
.creative_obj-04 .creative_obj_inner {
  -webkit-animation: crObj04 2s steps(2) infinite;
          animation: crObj04 2s steps(2) infinite; 
  background: url(../img/creative_ill_04_01.png) center top no-repeat, url(../img/creative_ill_04_02.png) center bottom no-repeat;
}
.creative_obj-05 .creative_obj_inner {
  background: url(../img/creative_img_01.png) center top no-repeat, url(../img/creative_img_02.png) center bottom no-repeat;
}

@-webkit-keyframes crObj01 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes crObj01 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes crObj02 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes crObj02 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes crObj03 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes crObj03 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes crObj04 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes crObj04 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes crObj05 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@keyframes crObj05 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.works {
  position: relative;
  font-family: a-otf-gothic-bbb-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;

  -webkit-font-smoothing: subpixel-antialiased;
}
.works::before {
  content: "";
  display: block;
  position: absolute;
  top: -7px;
  bottom: auto;
  left: 0;
  margin: auto;
  width: 100%;
  height: 7px;
  background: url(../img/works_shadow_top_sm.png) top center;
  background-size: 1px 7px;
}
@media screen and (min-width: 600px) {
  .works::before {
    top: -18px;
    height: 18px;
    background: url(../img/works_shadow_top_md.png) top center;
    background-size: 1px 18px;
  }
}
@media screen and (min-width: 1024px) {
  .works::before {
    background: url(../img/works_shadow_top_lg.png) top center;
    background-size: 1px 18px;
  }
}
.works::after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: -10px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 10px;
  background: url(../img/works_shadow_bottom_sm.png) top center;
  background-size: 1px 10px;
}
@media screen and (min-width: 600px) {
  .works::after {
    bottom: -24px;
    height: 24px;
    background: url(../img/works_shadow_bottom_md.png) top center;
    background-size: 1px 24px;
  }
}
@media screen and (min-width: 1024px) {
  .works::after {
    bottom: -20px;
    height: 20px;
    background: url(../img/works_shadow_bottom_lg.png) top center;
    background-size: 1px 20px;
  }
}

.works_body {
  overflow: hidden;
  position: relative;
  padding-top: 550.15625%;
  background: url(../img/works_body_bg.jpg) repeat;
  background-size: 100px 100px;
}
@media screen and (min-width: 1024px) {
  .works_body {
    padding-top: 0;
    height: 1633px;
  }
}

.works_title {
  position: absolute;
  top: 21vw;
  left: 50%;
  width: 31.5vw;
  height: 7.96vw;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  background: url(../img/works_title_sp.png) top center no-repeat;
  background-size: contain;
}
@media screen and (min-width: 1024px) {
  .works_title {
    top: 80px;
    width: 147px;
    height: 38px;
    background: url(../img/works_title_pc.png) top center no-repeat;
  }
}

.works_inner {
  position: absolute;
  top: 41.5vw;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .works_inner {
    top: 230px;
  }
}

.works_itemWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 3.2vw;
}
@media screen and (min-width: 1024px) {
  .works_itemWrap {
    justify-content: flex-start;
    padding: 0;
    width: 1000px;
    -webkit-transform: translateX(-18px);
            transform: translateX(-18px);
  }
}

.works_item {
  overflow: hidden; 
  position: relative;
  margin-bottom: 3.2vw;
  width: 45.2vw;
  height: 45.2vw;
}
@media screen and (min-width: 1024px) {
  .works_item {
    margin-bottom: 38.4px;
    margin-left: 40.4px; 
    width: 208.6px;
    height: 208.6px;
  }
}
.works_item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.3s cubic-bezier(0.545, 0.08, 0.52, 0.975);
  transition: transform 0.3s cubic-bezier(0.545, 0.08, 0.52, 0.975);
  transition: transform 0.3s cubic-bezier(0.545, 0.08, 0.52, 0.975), -webkit-transform 0.3s cubic-bezier(0.545, 0.08, 0.52, 0.975);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;
}
.works_item:nth-child(1)::before {
  background-image: url(../img/works_thumb_1.jpg);
}
.works_item:nth-child(2)::before {
  background-image: url(../img/works_thumb_2.jpg);
}
.works_item:nth-child(3)::before {
  background-image: url(../img/works_thumb_3.jpg);
}
.works_item:nth-child(4)::before {
  background-image: url(../img/works_thumb_4.jpg);
}
.works_item:nth-child(5)::before {
  background-image: url(../img/works_thumb_5.jpg);
}
.works_item:nth-child(6)::before {
  background-image: url(../img/works_thumb_6.jpg);
}
.works_item:nth-child(7)::before {
  background-image: url(../img/works_thumb_7.jpg);
}
.works_item:nth-child(8)::before {
  background-image: url(../img/works_thumb_8.jpg);
}
.works_item:nth-child(9)::before {
  background-image: url(../img/works_thumb_9.jpg);
}
.works_item:nth-child(10)::before {
  background-image: url(../img/works_thumb_10.jpg);
}
.works_item:nth-child(11)::before {
  background-image: url(../img/works_thumb_11.jpg);
}
.works_item:nth-child(12)::before {
  background-image: url(../img/works_thumb_12.jpg);
}
.works_item:nth-child(13)::before {
  background-image: url(../img/works_thumb_13.jpg);
}
.works_item:nth-child(14)::before {
  background-image: url(../img/works_thumb_14.jpg);
}
.works_item:nth-child(15)::before {
  background-image: url(../img/works_thumb_15.jpg);
}
.works_item:nth-child(16)::before {
  background-image: url(../img/works_thumb_16.jpg);
}
.works_item:nth-child(17)::before {
  background-image: url(../img/works_thumb_17.jpg);
}
.works_item:nth-child(18)::before {
  background-image: url(../img/works_thumb_18.jpg);
}
.works_item:nth-child(19)::before {
  background-image: url(../img/works_thumb_19.jpg);
}
.works_item:nth-child(20)::before {
  background-image: url(../img/works_thumb_20.jpg);
}
.works_item:hover::before {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.modalBtn {
  display: block;
  position: relative;
  z-index: 10; 
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.545, 0.08, 0.52, 0.975);
  text-decoration: none;
  letter-spacing: 0.1vw;
  color: transparent;
  box-shadow: 0px 0px 1vw #cecbc4 inset;
  font-size: 3.3vw;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .modalBtn {
    font-size: 13.3px;
  }
}
.modalBtn span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); 
  text-align: center;
}
.works_item:hover .modalBtn {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  box-shadow: 0px 0px 1vw transparent inset;
}

.modal {
  visibility: hidden;
  overflow-y: scroll;
  opacity: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s, visibility 0s 0.3s;
  background: rgba(0, 0, 0, 0.8);
}
.modal.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0s 0s;
}

.modal_container _:-ms-lang(x)::-ms-backdrop,
.modal_container {
  min-height: 100vh;
}

.modal_container::after {
  content: "";
  min-height: inherit;
  font-size: 0;
}

.modal_inner {
  margin: 60px auto 0;
  width: 100%;
}
@media screen and (min-width: 600px) {
  .modal_inner {
    margin-top: 115px;
  }
}
@media screen and (min-width: 1024px) {
  .modal_inner {
    margin: 111px auto 30px;
    width: 75%;
    min-width: 964px;
    max-width: 1280px;
  }
}

.modal_content {
  display: none;
  padding-bottom: 10vw;
  width: 100%;
  height: auto;
  background: url(../img/modal_bg.jpg) repeat;
  background-size: cover;
  color: #005e95; 

  -webkit-font-feature-settings: "palt"; 

          font-feature-settings: "palt";
}
@media screen and (min-width: 1024px) {
  .modal_content {
    padding-bottom: 56px;
  }
}
.is-active .modal_content {
  display: block;
}

.modalClose_bar {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 14vw;
  background: url(../img/modal_bg.jpg) repeat;
  background-size: 100%;
  text-align: right;
  box-shadow: 0px 2px 1px #d0cfce;
}
@media screen and (min-width: 1024px) {
  .modalClose_bar {
    position: relative;
    height: 54px;
    background-image: none;
    box-shadow: none;
  }
}
.modalClose_bar .modalClose {
  display: inline-block;
  padding: 5.5vw 5vw 0 0;
  height: 14vw;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .modalClose_bar .modalClose {
    position: relative;
    padding: 31.3px 0 0 0; 
    height: 54px;
  }
}
.modalClose_bar .modalClose img {
  height: 4.66vw;
}
@media screen and (min-width: 1024px) {
  .modalClose_bar .modalClose img {
    height: 22.7px;
  }
}
.modalClose_bar .modalClose source {
  height: 22.7px;
}

.modal_cont_wrapper {
  display: flex;
  flex-direction: column;
}
.modal_cont_wrapper .modal_slide {
  order: 1; 
  margin: 14vw 0 17.3vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_slide {
    order: 3; 
    margin: 0;
    padding: 0 59.2px 0;
    height: initial;
  }
}
.modal__slideNum_1 .modal_cont_wrapper .modal_slide {
  margin-bottom: 9vw;
}
@media screen and (min-width: 1024px) {
  .modal__slideNum_1 .modal_cont_wrapper .modal_slide {
    margin: 0;
  }
}
.modal_cont_wrapper .modal_slide__movie .modal_slide_item {
  position: relative;
  height: auto;
  background: linear-gradient(to bottom, rgba(236, 235, 233, 0.7), #fff 1%, #fff 99%, rgba(236, 235, 233, 0.7));
  background-size: cover;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_slide__movie .modal_slide_item {
    background: #fff;
    box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1);
  }
}
.modal_cont_wrapper .modal_slide__movie .modal_slide_item::before {
  content: "";
  display: block;
  padding-top: 74.6vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_slide__movie .modal_slide_item::before {
    padding-top: calc((409.8 / 846) * 100%);
    min-height: 409.8px;
  }
}
.modal_cont_wrapper .modal_slide__movie iframe {
  display: block;
  position: absolute;
  top: 10vw;
  left: 0;
  width: 100%;
  height: calc(100% - 20vw);
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_slide__movie iframe {
    display: block;
    top: 0;
    left: 50px;
    width: calc(100% - 100px);
    height: 100%;
    box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1);
  }
}
.modal_cont_wrapper .modal_work_name {
  order: 2; 
  padding: 0 6.5vw 0;
  letter-spacing: 0.075em;
  font-size: 4.2vw;
  font-weight: bold;
  line-height: 1.3em;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_work_name {
    order: 1; 
    margin-bottom: 0;
    padding: 0 59.2px 0;
    font-size: 24.2px;
    line-height: 1em;
  }
}
.modal_cont_wrapper .modal_work_type {
  order: 3; 
  margin-bottom: 1.5vw;
  padding: 0 6.5vw 0;
  font-size: 3.8vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_work_type {
    order: 2; 
    margin-bottom: 8px;
    padding: 0 59.2px 0;
    font-size: 15.7px;
  }
}
.modal_cont_wrapper .modal_cont_col {
  display: flex;
  order: 4;
  padding: 0 6.5vw 0;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_cont_col {
    padding: 0 59.2px 0;
  }
}
.modal_cont_wrapper .modal_cont_col_discription {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_cont_col_discription {
    flex: 1 1 auto;
    margin-right: 20px;
  }
}
.modal_cont_wrapper .modal_work_copy {
  margin-bottom: 1.7vw;
  letter-spacing: 0.05em;
  font-size: 4.2vw;
  font-weight: bold; 
  line-height: 1.3em;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_work_copy {
    margin: 25px 0 0;
    font-size: 25px;
    line-height: 1.3em;
  }
}
.modal_cont_wrapper .modal_work_copy.modal_work_copy__mb {
  margin-bottom: 1.7vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_work_copy.modal_work_copy__mb {
    margin-bottom: 14.8px;
  }
}
.modal_cont_wrapper .modal_work_link {
  display: inline-block;
  margin-bottom: 1.7vw;
  text-decoration: none; 
  letter-spacing: 0.15em;
  color: #005e95;
  font-size: 3.0vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_work_link {
    margin-bottom: 14.8px;
    font-size: 11.3px;
    font-weight: bold;
  }
}
.modal_cont_wrapper .modal_lead_txt {
  margin-bottom: 6vw;
  letter-spacing: 0.1em; 
  font-size: 3.0vw;
  line-height: 1.55em;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_lead_txt {
    margin-bottom: 29px;
    font-size: 11.3px;
  }
}
.modal_cont_wrapper .modal_credit {
  display: flex;
}
.modal_cont_wrapper .modal_credit_type {
  display: block;
  font-size: 2.8vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_credit_type {
    font-size: 9.45px;
  }
}
.modal_cont_wrapper .modal_credit_client {
  margin-right: 1.0em;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_credit_client {
    margin-right: 1em;
  }
}
.modal_cont_wrapper .modal_credit_works {
  margin-right: 0.9em;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_credit_works {
    margin-right: 0.9em;
  }
}
.modal_cont_wrapper .modal_credit_cont {
  display: block;
  font-size: 2.8vw;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_credit_cont {
    font-size: 9.45px;
  }
}
.modal_cont_wrapper .modal_cont_col_thumb {
  display: none;
}
@media screen and (min-width: 1024px) {
  .modal_cont_wrapper .modal_cont_col_thumb {
    display: block;
    flex: 0 0 310px;
  }
}
.modal_cont_wrapper .modal_slide_thumb_item {
  position: relative;
  cursor: pointer;
}
.modal_cont_wrapper .modal_slide_thumb_item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 2px 1px rgba(206, 203, 196, 0.1);
}

.l-container.is-locked {
  position: fixed;
  width: 100%;
}

.making {
  position: relative;
  z-index: -1; 
  padding-top: 162.1875%;
  height: 0;
  background: url(../img/main_bg.jpg) top center;
  background-size: 60px;
}
@media screen and (min-width: 600px) {
  .making {
    padding-top: 145.44271%;
    background-size: 120px;
  }
}
@media screen and (min-width: 1024px) {
  .making {
    padding-top: 0;
    height: 432px;
  }
}

@media screen and (min-width: 1024px) {
  .making_inner {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    width: 1280px;
    height: 100%;
    background: url(../img/make_bg_pc.png) -358px 0px no-repeat;
    background-size: 1920px 436px;
  }
}

@media screen and (min-width: 1024px) {
  .making_inner::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 12; 
    top: 0;
    bottom: 0;
    left: -16px;
    margin: auto;
    width: 27px;
    height: 372px;
    background: url(../img/making_shadow_lg.png) no-repeat;
  }
}

.making_itemWrap {
  position: absolute;
  top: calc(45/640*100%);
  left: 0;
  padding-top: 142.1875%;
  width: 100%;
}
@media screen and (min-width: 600px) {
  .making_itemWrap {
    top: calc(56/768*100%);
    padding-top: 119.01042%;
  }
}
@media screen and (min-width: 1024px) {
  .making_itemWrap {
    top: 54px;
    left: -170px;
    padding-top: 0;
    width: 852px;
    height: 328px;
  }
}

.making_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-position 0.1s cubic-bezier(0.4, 0.38, 0.89, 0.98), -webkit-transform 0.5s cubic-bezier(0.4, 0.38, 0.89, 0.98);
  transition: transform 0.5s cubic-bezier(0.4, 0.38, 0.89, 0.98), background-position 0.1s cubic-bezier(0.4, 0.38, 0.89, 0.98);
  transition: transform 0.5s cubic-bezier(0.4, 0.38, 0.89, 0.98), background-position 0.1s cubic-bezier(0.4, 0.38, 0.89, 0.98), -webkit-transform 0.5s cubic-bezier(0.4, 0.38, 0.89, 0.98); 
  -webkit-transform: translateX(-88%); 
          transform: translateX(-88%);
}
@media screen and (min-width: 1024px) {
  .making_item {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .making_item.is-hover {
    background-position: 5px 0 !important;
  }
}
.making_item:nth-child(1) {
  background: url(../img/making_img_01_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(1) {
    background: url(../img/making_img_01_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(2) {
  background: url(../img/making_img_02_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(2) {
    background: url(../img/making_img_02_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(3) {
  background: url(../img/making_img_03_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(3) {
    background: url(../img/making_img_03_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(4) {
  background: url(../img/making_img_04_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(4) {
    background: url(../img/making_img_04_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(5) {
  background: url(../img/making_img_05_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(5) {
    background: url(../img/making_img_05_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(6) {
  background: url(../img/making_img_06_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(6) {
    background: url(../img/making_img_06_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(7) {
  background: url(../img/making_img_07_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(7) {
    background: url(../img/making_img_07_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(8) {
  background: url(../img/making_img_08_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(8) {
    background: url(../img/making_img_08_md.png) no-repeat;
    background-size: 100% auto;
  }
}
.making_item:nth-child(9) {
  background: url(../img/making_img_09_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(9) {
    background: url(../img/making_img_09_md.png) no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(1) {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(2) {
    z-index: 10;
    left: 60px;
    background: url(../img/making_img_01_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(3) {
    z-index: 9;
    left: 120px;
    background: url(../img/making_img_02_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(4) {
    z-index: 8;
    left: 180px;
    background: url(../img/making_img_03_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(5) {
    z-index: 7;
    left: 240px;
    background: url(../img/making_img_04_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(6) {
    z-index: 6;
    left: 300px;
    background: url(../img/making_img_05_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(7) {
    z-index: 5;
    left: 360px;
    background: url(../img/making_img_06_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(8) {
    z-index: 4;
    left: 420px;
    background: url(../img/making_img_07_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(9) {
    z-index: 3;
    left: 480px;
    background: url(../img/making_img_08_lg.png) no-repeat;
  }
}
.making_item:nth-child(10) {
  background: url(../img/making_img_10_sm.png) no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .making_item:nth-child(10) {
    background: url(../img/making_img_10_md.png) no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(10) {
    z-index: 2; 
    left: 540px;
    background: url(../img/making_img_09_lg.png) no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .making_item:nth-child(11) {
    z-index: 1;
    left: 600px;
    background: url(../img/making_img_10_lg.png) no-repeat;
  }
}
.making_item:nth-child(11) .making_item_obj {
  overflow: hidden;
  position: absolute;
  top: 65px;
  right: 120px;
  width: 84px;
  height: 174px;
}
.making_item:nth-child(11) .making_item_obj_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  -webkit-animation: makeObj 2s steps(2) infinite;
          animation: makeObj 2s steps(2) infinite; 
  background: url(../img/making_img_10_ani_01.png) center top no-repeat, url(../img/making_img_10_ani_02.png) center bottom no-repeat;
}
.making_item.is-show {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media screen and (min-width: 1024px) {
  .making_item.is-show {
    -webkit-transform: translateX(-596px);
            transform: translateX(-596px);
  }
}

@-webkit-keyframes makeObj {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes makeObj {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.making_btnWrap {
  position: absolute;
  top: calc(45/640*100%);
  left: 0;
  padding-top: 142.1875%;
  width: 100%;
}
@media screen and (min-width: 600px) {
  .making_btnWrap {
    top: calc(56/768*100%);
    padding-top: 119.01042%;
  }
}
@media screen and (min-width: 1024px) {
  .making_btnWrap {
    z-index: 11; 
    top: 54px;
    left: -160px;
    padding-top: 0;
    width: 852px;
    height: 328px;
  }
}

.making_btn {
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  width: calc(80/640*100%);
  height: calc(60/640*100%);
  transition: all 0.5s cubic-bezier(0.4, 0.38, 0.89, 0.98);
}
@media screen and (min-width: 1024px) {
  .making_btn {
    top: 0 !important;
    right: 17px;
    width: 100%;
    height: 328px;
  }
}
.making_btn.is-show {
  right: 0;
  left: auto;
}
@media screen and (min-width: 1024px) {
  .making_btn.is-show {
    -webkit-transform: translateX(-596px);
            transform: translateX(-596px);
  }
}
.making_btn a.noscroll {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .making_btn a.noscroll {
    position: absolute;
    top: 0;
    right: 17px;
    width: 55px;
  }
}
.making_btn .making_link {
  position: absolute;
  top: 283px;
  right: 260px;
  width: 52px;
  height: 30px;
}

@media screen and (min-width: 1024px) {
  .making-typeA {
    display: none;
  }
}

.making-typeA .making_btn:nth-child(2) {
  top: calc(64/640*100%);
}

.making-typeA .making_btn:nth-child(3) {
  top: calc((64*2)/640*100%);
}

.making-typeA .making_btn:nth-child(4) {
  top: calc((64*3)/640*100%);
}

.making-typeA .making_btn:nth-child(5) {
  top: calc((64*4)/640*100%);
}

.making-typeA .making_btn:nth-child(6) {
  top: calc((64*5)/640*100%);
}

.making-typeA .making_btn:nth-child(7) {
  top: calc((64*6)/640*100%);
}

.making-typeA .making_btn:nth-child(8) {
  top: calc((64*7)/640*100%);
}

.making-typeA .making_btn:nth-child(9) {
  top: calc((64*8)/640*100%);
}

.making-typeA .making_btn:nth-child(10) {
  top: calc((64*9)/640*100%);
}

.making-typeB {
  display: none;
}
@media screen and (min-width: 1024px) {
  .making-typeB {
    display: block;
  }
}
.making-typeB .making_btn:nth-child(1) {
  display: none;
}
.making-typeB .making_btn:nth-child(2) {
  z-index: 9; 
  left: 60px;
}
.making-typeB .making_btn:nth-child(3) {
  z-index: 8; 
  left: 120px;
}
.making-typeB .making_btn:nth-child(4) {
  z-index: 7; 
  left: 180px;
}
.making-typeB .making_btn:nth-child(5) {
  z-index: 6; 
  left: 240px;
}
.making-typeB .making_btn:nth-child(6) {
  z-index: 5; 
  left: 300px;
}
.making-typeB .making_btn:nth-child(7) {
  z-index: 4; 
  left: 360px;
}
.making-typeB .making_btn:nth-child(8) {
  z-index: 3; 
  left: 420px;
}
.making-typeB .making_btn:nth-child(9) {
  z-index: 2; 
  left: 480px;
}
.making-typeB .making_btn:nth-child(10) {
  z-index: 1; 
  left: 540px;
}

.making_cont {
  position: absolute;
  z-index: 1; 
  top: calc(45/640*100%);
  left: 0;
  padding-top: 142.1875%;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.4, 0.38, 0.89, 0.98);
  -webkit-transform: translateX(-88%);
          transform: translateX(-88%);
}
@media screen and (min-width: 600px) {
  .making_cont {
    top: calc(56/768*100%);
    padding-top: 119.01042%;
  }
}
@media screen and (min-width: 1024px) {
  .making_cont {
    display: none;
  }
}
.making_cont.is-show {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.making_cont a {
  display: block;
  position: absolute;
  z-index: 1; 
  top: calc(660/914*100%);
  left: calc(290/640*100%);
  width: calc(88/640*100%);
  height: calc(44/640*100%);
}
@media screen and (min-width: 600px) {
  .making_cont a {
    top: calc(650/914*100%);
    left: calc(305/640*100%);
  }
}

.making_cont_movie {
  position: absolute;
  z-index: 1; 
  top: 38.8%;
  left: 21.4%;
  padding-top: 30%;
  width: 53.9%;
}
@media screen and (min-width: 600px) {
  .making_cont_movie {
    top: 37.4%;
    left: 28.5%;
    padding-top: 25%;
    width: 44.4%;
  }
}
@media screen and (min-width: 1024px) {
  .making_cont_movie {
    visibility: hidden;
    opacity: 0;
    top: 75px;
    left: 394px;
    padding-top: 155px;
    width: 284px;
    transition: opacity 0.1s cubic-bezier(0.4, 0.38, 0.89, 0.98);
  }
}
.making_cont_movie.is-show {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.4, 0.38, 0.89, 0.98) 0.4s;
}
.making_cont_movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact {
  overflow: hidden;
  position: relative;
  padding-top: 135.3125%;
  width: 100%;
  height: 0;
  background: url(../img/contact_bg_sm.jpg) center top no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 600px) {
  .contact {
    padding-top: 109.11458%;
    background: url(../img/contact_bg_md.jpg) center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  .contact {
    padding-top: 0;
    height: 853px;
    background: none;
  }
}
.contact img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s cubic-bezier(0.4, 0.38, 0.89, 0.98);
}
.contact img.is-hide {
  opacity: 0;
}

@media screen and (min-width: 1024px) {
  .contact_inner {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: 853px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

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

.contact_link {
  opacity: 0.5; 
  position: absolute;
  top: calc(290/640*100%);
  width: calc(110/640*100%);
  height: calc(80/640*100%);
}
@media screen and (min-width: 600px) {
  .contact_link {
    top: calc(356/768*100%);
    width: calc(110/768*100%);
    height: calc(105/768*100%);
  }
}
@media screen and (min-width: 1024px) {
  .contact_link {
    top: 440px;
    margin: auto;
    width: 125px;
    height: 125px;
  }
}
.contact_link:nth-child(1) {
  left: calc(113/640*100%);
}
@media screen and (min-width: 600px) {
  .contact_link:nth-child(1) {
    left: calc(178/768*100%);
  }
}
@media screen and (min-width: 1024px) {
  .contact_link:nth-child(1) {
    right: 344px; 
    left: 0;
  }
}
.contact_link:nth-child(2) {
  left: calc(266/640*100%);
}
@media screen and (min-width: 600px) {
  .contact_link:nth-child(2) {
    left: calc(331/768*100%);
  }
}
@media screen and (min-width: 1024px) {
  .contact_link:nth-child(2) {
    right: 0; 
    left: 0;
  }
}
.contact_link:nth-child(3) {
  left: calc(420/640*100%);
}
@media screen and (min-width: 600px) {
  .contact_link:nth-child(3) {
    left: calc(485/768*100%);
  }
}
@media screen and (min-width: 1024px) {
  .contact_link:nth-child(3) {
    right: 0; 
    left: 351px;
  }
}
.contact_link a {
  display: block;
  width: 100%;
  height: 100%;
}

.contact_bg_lg {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  .contact_bg_lg {
    display: block !important;
  }
}

/* ------------------------
  Print Styles
------------------------ */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* Slider */
.slick-slider {
  display: block;
  box-sizing: border-box;
  position: relative;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
}

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

.slick-track {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin-right: auto; 
  margin-left: auto;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.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;
  width: 100%;
}
.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;
  border: 1px solid transparent; 
  height: auto;
}

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

.modal_slide_thumb .slick-track {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 310px !important;
}

.modal_slide_thumb .slick-slide {
  flex: 0 0 100px;
  position: relative;
  margin: 25px 5px 0 0;
  outline: none;
}
.modal_slide_thumb .slick-slide > div {
  width: 100%;
  height: 100%;
}
.modal_slide_thumb .slick-slide::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  background: #c8c4b7;
}
.modal_slide_thumb .slick-slide:last-child {
  margin-right: 0;
}

.modal_slide_thumb .slick-slide.slick-current::before {
  background: #005e95;
}

.slick-dots {
  display: flex;
  justify-content: flex-end; 
  position: absolute;
  bottom: -8.5vw;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
}
.slick-dots > li {
  margin: 0 7.5px;
}
.slick-dots > li > button {
  display: block;
  border: none;
  border-radius: 50%;
  outline: none; 
  width: 1.33vw;
  height: 1.33vw;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset -1px 1px 0 1px rgba(231, 227, 199, 0.5);
  font-size: 0;
  line-height: 0;
}
.slick-dots > li.slick-active > button {
  background: #005e95;
  box-shadow: none;
}

.slide-arrow {
  display: block;
  position: absolute;
  bottom: -13vw;
  border: none;
  outline: none;
}
.modal__slideNum_1 .slide-arrow {
  display: none;
}
.slide-arrow.prev-arrow {
  left: 6vw;
  width: 22.4vw;
  height: 10.5vw;
  background: url(/graphic/img/slide_prev_arrow.png) no-repeat;
  background-size: contain;
}
.slide-arrow.next-arrow {
  right: 6vw;
  width: 22.1vw;
  height: 10.5vw;
  background: url(/graphic/img/slide_next_arrow.png) no-repeat;
  background-size: contain;
}