@charset "UTF-8";
/*====================================================================
Reset　
====================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section, main { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

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

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

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

body { font: 13px/1.231 arial,helvetica,clean,sans-serif; *font-size: small; /* for IE */ *font: x-small; /* for IE in quirks mode */ font-family: "YakuHanJPs", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }

select, input, button, textarea { font: 99% arial, helvetica, clean, sans-serif; }

table { font-size: inherit; font: 100%; }

pre, code, kbd, samp, tt { font-family: monospace; *font-size: 108%; line-height: 100%; }

@font-face { font-family: 'YakuHanJPs'; font-style: normal; font-weight: 400; src: url(../fonts/YakuHanJPs/YakuHanJPs-Regular.woff2) format("woff2"), url(../fonts/YakuHanJPs/YakuHanJPs-Regular.woff) format("woff"), url(../fonts/YakuHanJPs/YakuHanJPs-Regular.eot); }
@font-face { font-family: 'YakuHanJPs'; font-style: normal; font-weight: 700; src: url(../fonts/YakuHanJPs/YakuHanJPs-Bold.woff2) format("woff2"), url(../fonts/YakuHanJPs/YakuHanJPs-Bold.woff) format("woff"), url(../fonts/YakuHanJPs/YakuHanJPs-Bold.eot); }
/*----------- icofont -----------*/
@font-face { font-family: 'icomoon'; src: url("../fonts/ico/icomoon.eot?ryfz78"); src: url("../fonts/ico/icomoon.eot?ryfz78#iefix") format("embedded-opentype"), url("../fonts/ico/icomoon.ttf?ryfz78") format("truetype"), url("../fonts/ico/icomoon.woff?ryfz78") format("woff"), url("../fonts/ico/icomoon.svg?ryfz78#icomoon") format("svg"); font-weight: normal; font-style: normal; }
/* default style
--------------------------------------------------------------------*/
a { color: #000; word-wrap: break-word; }
a img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

p, li { font-size: 1.4rem; line-height: 1.8; }
p del, li del { text-decoration: line-through; }
p strong, li strong { font-weight: bold; }
p em, li em { font-weight: bold; }
p sup, li sup { font-size: 0.7em; vertical-align: super; }
p sub, li sub { font-size: 0.7em; vertical-align: bottom; }
p small, li small { font-size: 85%; }

small { line-height: 1.8; }

/* base
--------------------------------------------------------------------*/
html { height: 100%; color: #000; background: #fff; }

body { height: 100%; text-align: left; color: #000; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 1px; }

.wrapper { min-width: 900px; height: 100%; margin: 0 0 0 40px; position: relative; overflow: hidden; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { .wrapper { -webkit-text-size-adjust: none; } }

/* header
--------------------------------------------------------------------*/
.header__ci { top: 16px; left: 63px; position: absolute; z-index: 101; -webkit-transition: linear background-color 0.1s, 0.35s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: linear background-color 0.1s, 0.35s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.35s cubic-bezier(0.86, 0, 0.07, 1) transform, linear background-color 0.1s; transition: 0.35s cubic-bezier(0.86, 0, 0.07, 1) transform, linear background-color 0.1s, 0.35s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; display: inline-block; overflow: hidden; }
.header__ci a { display: block; float: left; }
.header__ci img { height: auto; display: block; }
.header__ci .logo { width: 71px; height: 18px; }
.header__ci .txt { width: 172px; margin-left: 23px; }
.header__ci.is-start { -webkit-transform: translate3d(-52px, 0, 0) !important; transform: translate3d(-52px, 0, 0) !important; background: #fff100; -webkit-transition: none !important; transition: none !important; }
.header__ci.is-move { -webkit-transform: translate3d(111px, 0, 0); transform: translate3d(111px, 0, 0); }

/* global navigation
--------------------------------------------------------------------*/
.gnav { width: 153px; height: 100%; overflow: hidden; top: 0px; left: 0px; position: fixed; z-index: 100; background: #fff100; cursor: pointer; color: #5f5f5f; -webkit-transition: 0.35s cubic-bezier(0.86, 0, 0.07, 1) width, 0.35s ease-out background; transition: 0.35s cubic-bezier(0.86, 0, 0.07, 1) width, 0.35s ease-out background; }
.gnav__inner { width: 153px; padding: 0 0 0 15px; margin-top: 30vh; overflow: hidden; }
.gnav__menu-btn { top: 18px; left: 11px; position: absolute; z-index: auto; padding: 1px 0 0 32px; cursor: pointer; line-height: 1; font-size: 12px; font-weight: bold; color: inherit; }
.gnav__menu-btn .txt { -webkit-transition: .25s opacity ease-out; transition: .25s opacity ease-out; }
.gnav__menu-btn .bar { width: 18px; height: 2px; display: block; top: 0px; left: 0px; position: absolute; z-index: 100; background: #5f5f5f; -webkit-transform-origin: left top; transform-origin: left top; }
.gnav__menu-btn .bar:nth-child(2) { top: 6px; }
.gnav__menu-btn .bar:nth-child(3) { top: 12px; }
@-webkit-keyframes hover-open { 0% { -webkit-transform: translate(-2px, 0); transform: translate(-2px, 0); }
  45% { width: 0%; -webkit-transform: translate(23px, 0); transform: translate(23px, 0); }
  55% { width: 0%; -webkit-transform: translate(-2px, 0); transform: translate(-2px, 0); }
  100% { width: 18px; } }
@keyframes hover-open { 0% { -webkit-transform: translate(-2px, 0); transform: translate(-2px, 0); }
  45% { width: 0%; -webkit-transform: translate(23px, 0); transform: translate(23px, 0); }
  55% { width: 0%; -webkit-transform: translate(-2px, 0); transform: translate(-2px, 0); }
  100% { width: 18px; } }
.gnav__btn { cursor: pointer; }
.gnav__btn a { display: block; padding: 7px 0 7px 25px; position: relative; color: inherit; font-size: 12px; line-height: 1; font-weight: bold; text-decoration: none; }
.gnav__btn a .txt { display: inline-block; -webkit-transition: 0.25s opacity linear, 0.35s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.25s opacity linear, 0.35s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.25s opacity linear, 0.35s transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.25s opacity linear, 0.35s transform cubic-bezier(0.23, 1, 0.32, 1), 0.35s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); }
.gnav__btn a:before { content: ''; width: 8px; height: 8px; display: block; top: 50%; left: 0px; position: absolute; z-index: auto; margin-top: -4px; color: inherit; border: 1px solid; border-radius: 8px; box-sizing: border-box; -webkit-transition: .15s ease-out background,.15s ease-out transform; transition: .15s ease-out background,.15s ease-out transform; }
.gnav__btn a:hover:before { background: #5f5f5f; -webkit-transform: scale(1.5); transform: scale(1.5); }
.gnav__btn--workplace a { padding-left: 37px; font-weight: normal; }
.gnav__btn.is-current a:before { background: #5f5f5f; }
.gnav__btn:nth-child(1) a .txt { -webkit-transition-delay: 0.13s; transition-delay: 0.13s; }
.gnav__btn:nth-child(2) a .txt { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; }
.gnav__btn:nth-child(3) a .txt { -webkit-transition-delay: 0.19s; transition-delay: 0.19s; }
.gnav__btn:nth-child(4) a .txt { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; }
.gnav__btn:nth-child(5) a .txt { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }
.gnav__btn:nth-child(6) a .txt { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; }
.gnav__btn:nth-child(7) a .txt { -webkit-transition-delay: 0.31s; transition-delay: 0.31s; }
.gnav__btn:nth-child(8) a .txt { -webkit-transition-delay: 0.34s; transition-delay: 0.34s; }
.gnav__btn:nth-child(9) a .txt { -webkit-transition-delay: 0.37s; transition-delay: 0.37s; }
.gnav__btn:nth-child(10) a .txt { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.gnav--core, .gnav--home, .gnav--satellite, .gnav--share, .gnav--mobile { color: white; }
.gnav--core .gnav__menu-btn .bar, .gnav--home .gnav__menu-btn .bar, .gnav--satellite .gnav__menu-btn .bar, .gnav--share .gnav__menu-btn .bar, .gnav--mobile .gnav__menu-btn .bar { background: white; }
.gnav--core .gnav__btn a:hover:before, .gnav--core .gnav__btn.is-current a:before, .gnav--home .gnav__btn a:hover:before, .gnav--home .gnav__btn.is-current a:before, .gnav--satellite .gnav__btn a:hover:before, .gnav--satellite .gnav__btn.is-current a:before, .gnav--share .gnav__btn a:hover:before, .gnav--share .gnav__btn.is-current a:before, .gnav--mobile .gnav__btn a:hover:before, .gnav--mobile .gnav__btn.is-current a:before { background: white; }
.gnav--core .option-nav:before, .gnav--home .option-nav:before, .gnav--satellite .option-nav:before, .gnav--share .option-nav:before, .gnav--mobile .option-nav:before { background: rgba(255, 255, 255, 0.3); }
.gnav--core { background: #e4007f; }
.gnav--home { background: #ed6d00; }
.gnav--satellite { background: #009e96; }
.gnav--share { background: #920783; }
.gnav--mobile { background: #1eb9ee; }

.option-nav { width: 153px; padding: 30px 0 0 15px; margin-top: 20px; position: relative; }
.option-nav__btn a { display: block; padding: 0 0 0 25px; position: relative; color: inherit; font-size: 12px; line-height: 1; font-weight: bold; }
.option-nav__btn a:before { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; top: 50%; left: 3px; position: absolute; z-index: auto; margin-top: -5px; font-size: 10px; }
.option-nav__btn a .txt { display: inline-block; -webkit-transition: 0.3s opacity linear, 0.25s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s opacity linear, 0.25s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s opacity linear, 0.25s transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s opacity linear, 0.25s transform cubic-bezier(0.23, 1, 0.32, 1), 0.25s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); }
/*
.option-nav__btn:last-child .txt:after { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; margin-left: 5px; color: inherit; font-size: 10px; }
*/
.option-nav__btn:nth-child(2) .txt:after { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; margin-left: 5px; color: inherit; font-size: 10px; }
.option-nav__btn + .option-nav__btn { margin-top: 15px; }
.option-nav__btn:nth-child(1) a .txt { -webkit-transition-delay: 0.43s; transition-delay: 0.43s; }
.option-nav__btn:nth-child(2) a .txt { -webkit-transition-delay: 0.46s; transition-delay: 0.46s; }
.option-nav:before { content: ''; width: 127px; height: 3px; display: block; top: 0px; left: 15px; position: absolute; z-index: auto; background: rgba(0, 0, 0, 0.1); -webkit-transition: cubic-bezier(1, 0, 0, 1) 0.4s transform, linear 0.3s opacity; transition: cubic-bezier(1, 0, 0, 1) 0.4s transform, linear 0.3s opacity; -webkit-transform-origin: left top; transform-origin: left top; }

.is-close.gnav { width: 40px; }
.is-close .gnav__menu-btn .txt { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; }
.is-close .gnav__btn .txt { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); -webkit-transition: opacity .25s linear,-webkit-transform 0s linear .25s !important; transition: opacity .25s linear,-webkit-transform 0s linear .25s !important; transition: opacity .25s linear,transform 0s linear .25s !important; transition: opacity .25s linear,transform 0s linear .25s,-webkit-transform 0s linear .25s !important; }
.is-close .option-nav .txt { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); -webkit-transition: opacity .25s linear,-webkit-transform 0s linear .25s !important; transition: opacity .25s linear,-webkit-transform 0s linear .25s !important; transition: opacity .25s linear,transform 0s linear .25s !important; transition: opacity .25s linear,transform 0s linear .25s,-webkit-transform 0s linear .25s !important; }
.is-close .option-nav:before { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); }

.gnav:hover .bar { -webkit-animation: hover-open 0.45s cubic-bezier(0.23, 1, 0.32, 1); animation: hover-open 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
.gnav:hover .bar:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }
.gnav:hover .bar:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }

/* workplace navigation
--------------------------------------------------------------------*/
.workplace-nav { top: 0px; right: 0px; position: absolute; z-index: 100; }
.workplace-nav__inner { overflow: hidden; }
.workplace-nav__btn { float: left; line-height: 1; opacity: 0; visibility: hidden; -webkit-transition: .3s linear opacity,.3s linear visibility; transition: .3s linear opacity,.3s linear visibility; }
.workplace-nav__btn a { display: inline-block; padding: 15px 10px; color: #666; font-family: "Raleway"; font-size: 1.2rem; font-weight: 600; line-height: 1; text-decoration: none !important; -webkit-transition: .2s ease-out background; transition: .2s ease-out background; }
.workplace-nav__btn a:hover { background: #efefef; -webkit-transition-duration: 0s; transition-duration: 0s; }
/*
.workplace-nav__btn:last-child a { padding-right: 15px; }
.workplace-nav__btn:last-child a:after { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; margin-left: 3px; color: #5f5f5f; font-size: 10px; }
*/

.workplace-nav__btn:nth-last-child(3) a { padding-right: 15px; }
.workplace-nav__btn:nth-last-child(3) a:after { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; margin-left: 3px; color: #5f5f5f; font-size: 10px; }
.workplace-nav__btn.is-current a { background: #efefef; }

.is-nav-show .workplace-nav__btn { visibility: visible; opacity: 1; }
.is-nav-show .workplace-nav__btn:nth-child(1) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.is-nav-show .workplace-nav__btn:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.is-nav-show .workplace-nav__btn:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.is-nav-show .workplace-nav__btn:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
/* SNS */
.is-nav-show .workplace-nav__btn:nth-child(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.is-nav-show .workplace-nav__btn:nth-child(6) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

/*　contents block
--------------------------------------------------------------------*/
.contents { position: relative; height: 100vh; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.contents.message-category, .contents.work-category { width: 100%; height: 100%; display: block; top: 0px; left: 0px; position: absolute; z-index: 0; overflow: hidden; }

/*footer
--------------------------------------------------------------------*/
.footer { width: 100%; }

/* module
--------------------------------------------------------------------*/
.btn-scroll { width: 80px; height: 80px; display: block; margin: 0 auto; padding: 20px 0 0; position: relative; border: 3px solid #fff100; border-radius: 100%; text-decoration: none !important; cursor: pointer; background: white; }
.btn-scroll .txt { width: 100%; height: 0px; display: block; bottom: -20px; left: 0px; position: absolute; z-index: auto; font-size: 12px; color: #666; }
.btn-scroll:before { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; display: block; -webkit-transform: rotate(90deg); transform: rotate(90deg); color: #666; font-size: 4rem; }
.btn-scroll:hover:before { -webkit-animation: scroll-motion 1s ease-out infinite; animation: scroll-motion 1s ease-out infinite; }

@-webkit-keyframes scroll-motion { 0% { -webkit-transform: translate(0, -8px) rotate(90deg); transform: translate(0, -8px) rotate(90deg); opacity: 0; }
  100% { -webkit-transform: translate(0, 5px) rotate(90deg); transform: translate(0, 5px) rotate(90deg); opacity: 1; } }

@keyframes scroll-motion { 0% { -webkit-transform: translate(0, -8px) rotate(90deg); transform: translate(0, -8px) rotate(90deg); opacity: 0; }
  100% { -webkit-transform: translate(0, 5px) rotate(90deg); transform: translate(0, 5px) rotate(90deg); opacity: 1; } }
.contents.show-before { opacity: 0 !important; }

.anim-blc { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.anim-delay-1 { -webkit-animation-delay: 0.1s !important; animation-delay: 0.1s !important; }
.anim-delay-2 { -webkit-animation-delay: 0.2s !important; animation-delay: 0.2s !important; }
.anim-delay-3 { -webkit-animation-delay: 0.3s !important; animation-delay: 0.3s !important; }
.anim-delay-4 { -webkit-animation-delay: 0.4s !important; animation-delay: 0.4s !important; }
.anim-delay-5 { -webkit-animation-delay: 0.5s !important; animation-delay: 0.5s !important; }
.anim-delay-6 { -webkit-animation-delay: 0.6s !important; animation-delay: 0.6s !important; }
.anim-delay-7 { -webkit-animation-delay: 0.7s !important; animation-delay: 0.7s !important; }
.anim-delay-8 { -webkit-animation-delay: 0.8s !important; animation-delay: 0.8s !important; }
.anim-delay-9 { -webkit-animation-delay: 0.9s !important; animation-delay: 0.9s !important; }
.anim-delay-10 { -webkit-animation-delay: 1s !important; animation-delay: 1s !important; }

.do-show-up { -webkit-animation: show-up 1s cubic-bezier(0.23, 1, 0.32, 1); animation: show-up 1s cubic-bezier(0.23, 1, 0.32, 1); }
.do-show-up .anim-blc { opacity: 0; -webkit-animation: show-anim-up .6s ease-out .1s; animation: show-anim-up .6s ease-out .1s; }

.do-show-down { -webkit-animation: show-down 1s cubic-bezier(0.23, 1, 0.32, 1); animation: show-down 1s cubic-bezier(0.23, 1, 0.32, 1); }
.do-show-down .anim-blc { opacity: 0; -webkit-animation: show-anim-down .6s ease-out .1s; animation: show-anim-down .6s ease-out .1s; }

.do-hide-up { -webkit-animation: hide-up .35s ease-in forwards; animation: hide-up .35s ease-in forwards; pointer-events: none; }
.do-hide-up .anim-blc { -webkit-animation: hide-anim-up .35s ease-out forwards; animation: hide-anim-up .35s ease-out forwards; }

.do-hide-down { -webkit-animation: hide-down .35s ease-in forwards; animation: hide-down .35s ease-in forwards; pointer-events: none; }
.do-hide-down .anim-blc { -webkit-animation: hide-anim-down .35s ease-out forwards; animation: hide-anim-down .35s ease-out forwards; }

@-webkit-keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes show-up { 0% { top: 200px; }
  100% { -webkit-transform: none; transform: none; top: 0; } }
@keyframes show-up { 0% { top: 200px; }
  100% { -webkit-transform: none; transform: none; top: 0; } }
@-webkit-keyframes show-down { 0% { top: -200px; }
  100% { -webkit-transform: none; transform: none; top: 0; } }
@keyframes show-down { 0% { top: -200px; }
  100% { -webkit-transform: none; transform: none; top: 0; } }
@-webkit-keyframes hide-up { 0% { opacity: 1; -webkit-transform: none; transform: none; top: 0; }
  100% { opacity: 0; top: -200px; } }
@keyframes hide-up { 0% { opacity: 1; -webkit-transform: none; transform: none; top: 0; }
  100% { opacity: 0; top: -200px; } }
@-webkit-keyframes hide-down { 0% { opacity: 1; -webkit-transform: none; transform: none; top: 0; }
  100% { opacity: 0; top: 200px; } }
@keyframes hide-down { 0% { opacity: 1; -webkit-transform: none; transform: none; top: 0; }
  100% { opacity: 0; top: 200px; } }
@-webkit-keyframes show-anim-up { 0% { opacity: 0; -webkit-transform: 0, 50px, 0; transform: 0, 50px, 0; }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes show-anim-up { 0% { opacity: 0; -webkit-transform: 0, 50px, 0; transform: 0, 50px, 0; }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes show-anim-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes show-anim-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes hide-anim-up { 100% { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } }
@keyframes hide-anim-up { 100% { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } }
@-webkit-keyframes hide-anim-down { 100% { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } }
@keyframes hide-anim-down { 100% { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } }
/*トップページ：index.html
--------------------------------------------------------------------*/
#top { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

.top-overray { width: 100%; height: 100%; display: block; top: 0px; left: 0px; position: fixed; z-index: 100; background: #fff100; opacity: 0; }
.top-overray__img { width: 100%; height: 100%; display: block; top: 0px; left: 0px; position: absolute; z-index: auto; background: url("../../images/top/top_illust.svg") no-repeat center center #fff100; background-size: cover; opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
.top-overray.is-show { opacity: 1; visibility: visible; }
.top-overray.is-hide { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); -webkit-transition: 0.6s ease-out opacity, 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) -webkit-transform; transition: 0.6s ease-out opacity, 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) -webkit-transform; transition: 0.6s ease-out opacity, 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) transform; transition: 0.6s ease-out opacity, 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) transform, 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) -webkit-transform; pointer-events: none; }
.top-overray.is-none { visibility: hidden !important; pointer-events: none; }

.is-show .top-overray { -webkit-transition: .6s ease-out opacity,.6s ease-out visibility; transition: .6s ease-out opacity,.6s ease-out visibility; }
.is-show .top-overray__img { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) -webkit-transform; transition: 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) -webkit-transform; transition: 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) transform; transition: 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) transform, 0.7s cubic-bezier(0.01, 0.67, 0.25, 1) -webkit-transform; }

.top-section { padding: 0 0 0; position: relative; z-index: 1; text-align: center; }
.top-section__hd { overflow: hidden; position: relative; z-index: 10; font-size: 3.5rem; font-weight: bold; line-height: 1.5; letter-spacing: 2px; font-size: 4.4vh; margin: 0 0 8vh; }
@media (min-height: 800px) { .top-section__hd { font-size: 3.5rem; margin: 0 0 65px; } }
.top-section__txt { margin: 0 auto 10vh; overflow: hidden; position: relative; z-index: 10; font-size: 2.25vh; font-weight: bold; line-height: 2; letter-spacing: 2px; }
@media (min-height: 800px) { .top-section__txt { font-size: 1.8rem; margin-bottom: 80px; } }
.top-section__logo { width: 740px; height: 84px; display: block; top: 50%; left: 50%; position: absolute; z-index: 0; margin: 0px 0 0 -370px; }

/*メッセージ：message
--------------------------------------------------------------------*/
#message { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

.message-section { padding: 0 0 0; text-align: center; }
.message-section__hd { overflow: hidden; margin: 0 0 55px; font-size: 4.4rem; font-weight: bold; line-height: 1; letter-spacing: 2px; font-size: 5.5vh; margin: 0 0 6.8vh; }
@media (min-height: 800px) { .message-section__hd { font-size: 4.4rem; margin: 0 0 55px; } }
.message-section__txt { margin: 0 auto; overflow: hidden; font-size: 1.6rem; font-weight: bold; line-height: 2.2; letter-spacing: 2px; }
.message-section__txt + .message-section__txt { margin-top: 8.12vh; }
@media (min-height: 800px) { .message-section__txt + .message-section__txt { margin-top: 65px; } }

.copyright { bottom: 20px; right: 20px; position: absolute; z-index: auto; line-height: 1; font-size: 1rem; color: #999; }

/*IMAGINE：imagine
--------------------------------------------------------------------*/
#imagine { overflow: scroll; }

.imagine-list { padding: 34vh 20px 80px; overflow: hidden; position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; }
.imagine-list__item { width: 25%; padding: 20px 10px 0 20px; position: relative; z-index: 10; list-style: none; opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
.imagine-list__item img { width: 100%; height: auto; display: block; box-sizing: border-box; }
.imagine-list__item .caps { display: inline-block; padding: 3px 12px; margin: 10px 0 10px; line-height: 1; color: white; font-size: 11px; background: black; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); }
.imagine-list__item .hd { font-size: 2.4rem; font-weight: bold; line-height: 1; letter-spacing: 2px; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
.imagine-list__item .hd .bg { background: #fff100; padding: 5px 0; line-height: 1.6; }
.imagine-list__item .body { margin: 5px auto 0; font-size: 1.4rem; line-height: 1.75; font-weight: bold; letter-spacing: 2px; -webkit-transform: translate3d(0, 45px, 0); transform: translate3d(0, 45px, 0); }
.imagine-list__item--large { width: 50%; }
.imagine-list__item--large .hd { font-size: 4.8rem; }
.imagine-list__item--large .hd .bg { background: #fff100; line-height: 1.35; }
.imagine-list__item--large + .imagine-list__item--large { margin-top: -150px; }
.imagine-list__item.is-scroll-show { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: 0.6s linear opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.6s linear opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.6s linear opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) transform; transition: 0.6s linear opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; }
.imagine-list__item.is-scroll-show .caps, .imagine-list__item.is-scroll-show .hd, .imagine-list__item.is-scroll-show .body { -webkit-transform: none; transform: none; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1) transform; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.4s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; }
.imagine-list__item.is-scroll-show .caps { -webkit-transition-delay: .1s; transition-delay: .1s; }
.imagine-list__item.is-scroll-show .hd { -webkit-transition-delay: .12s; transition-delay: .12s; }
.imagine-list__item.is-scroll-show .body { -webkit-transition-delay: .14s; transition-delay: .14s; }
.imagine-list__bg { width: 100%; height: 100%; display: block; top: 34vh; left: 0px; position: absolute; z-index: auto; background: url("../../imagine/images/bg-repeat.png") left top; }
.imagine-list .copyright { width: 100%; height: auto; display: block; bottom: 0; left: 0; padding: 20px; background: white; text-align: right; }

/*worlplace.html
--------------------------------------------------------------------*/
.work-index-desc { bottom: 35px; left: 40px; position: absolute; z-index: 20; text-shadow: 0 0 10px white; }
.work-index-desc__hd { margin: 0 0 20px; font-size: 4.2rem; line-height: 1.4; font-weight: bold; letter-spacing: 1.5px; }
.work-index-desc__hd .line { display: block; position: relative; }
.work-index-desc__hd .line:before { content: ''; width: 92%; height: 2px; display: block; bottom: 0px; left: 0px; position: absolute; z-index: auto; background: black; }
.work-index-desc__txt { font-size: 1.4rem; line-height: 1.7; font-weight: bold; }

#workplace, #contents { width: 100%; min-height: 100%; position: absolute; -webkit-transform: none; transform: none; opacity: 1; -webkit-transition: 0.6s cubic-bezier(0.06, 0.65, 0.58, 1); transition: 0.6s cubic-bezier(0.06, 0.65, 0.58, 1); overflow: hidden; }

#visual-area { width: 870px; height: 600px; display: block; top: 50%; left: 50%; position: absolute; z-index: auto; margin: -240px 0 0 -435px; }
#visual-area.do-animation { opacity: 1; -webkit-transition: 0.4s opacity linear; transition: 0.4s opacity linear; }
@media (max-height: 700px) { #visual-area { margin-top: -290px; } }

.mark-imagine img, .other-mark img, .mark img { display: block; }
.mark-imagine .ico, .other-mark .ico, .mark .ico { width: 100%; height: auto; display: block; top: 0px; left: 0px; position: absolute; z-index: 1; }
.mark-imagine:after, .other-mark:after, .mark:after { content: ''; width: 100%; height: 100%; display: block; top: 0px; left: 0px; position: absolute; z-index: 0; background: url("../../workplace/images/gray_Hex.svg") no-repeat left top; background-size: 100%; opacity: 0; }

.mark-imagine { width: 400px; display: block; top: 50%; left: 50%; position: absolute; z-index: 30; opacity: 0; -webkit-transform: translate3d(0, 400px, 0); transform: translate3d(0, 400px, 0); margin: -290px 0 0 -200px; }
.mark-imagine .txt { top: 68px; left: 174px; position: absolute; z-index: 2; visibility: hidden; opacity: 0; }
.mark-imagine .txt img { width: 164px; height: auto; }
.mark-imagine .illust-human, .mark-imagine .illust-txt { top: 0px; left: 0px; position: absolute; z-index: 10; visibility: hidden; opacity: 0; }
.mark-imagine .illust-human { width: 56px; top: 24px; left: 90px; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0); }
.mark-imagine .illust-txt { width: 0; height: 43px; top: 16px; left: 36px; overflow: hidden; }
.mark-imagine .illust-txt img { width: 45px; height: auto; }

.mark { width: 50px; height: 58px; display: block; overflow: hidden; top: 0px; left: 0px; position: absolute; z-index: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform-origin: center center; transform-origin: center center; pointer-events: none; opacity: 0; -webkit-transition: .6s ease-out opacity; transition: .6s ease-out opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mark .ico { width: 100%; height: auto; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mark .txt { position: absolute; top: -5px; z-index: 10; visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mark .illust { position: absolute; visibility: hidden; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: white; }

#mark--core { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
#mark--core .txt { right: 55px; }
#mark--core .illust { width: 375px; top: -120px; left: -290px; }

#mark--home { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
#mark--home .txt { left: 55px; }
#mark--home .illust { width: 436px; top: -150px; left: -100px; }

#mark--sattelite { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
#mark--sattelite .txt { left: 55px; }
#mark--sattelite .illust { width: 420px; top: -100px; left: 70px; }

#mark--share { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
#mark--share .txt { right: 55px; }
#mark--share .illust { width: 423px; top: 10px; left: -100px; }

#mark--mobile { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
#mark--mobile .txt { right: 55px; }
#mark--mobile .illust { width: 308px; top: -110px; left: -270px; }

.border { display: block; position: absolute; z-index: 30; opacity: 0; -webkit-transition: .4s linear opacity; transition: .4s linear opacity; }
.border--core { width: 80px; height: 84px; top: 65px; left: 261px; }
.border--home { width: 114px; height: 63px; top: 102px; left: 487px; }
.border--satellite { width: 114px; height: 61px; top: 260px; left: 487px; }
.border--share { width: 5px; height: 116px; top: 312px; left: 403px; }
.border--mobile { width: 80px; height: 84px; top: 244px; left: 239px; }

.other-marks { top: 50px; left: 218px; position: absolute; z-index: 25; opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); }

.do-animation .mark-imagine { opacity: 1; pointer-events: none; -webkit-transform: none; transform: none; -webkit-transition: 0.7s opacity ease-out, 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); transition: 0.7s opacity ease-out, 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 0.7s opacity ease-out; transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 0.7s opacity ease-out, 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1); }
.do-animation .mark { opacity: 1; top: 0; left: 0; }

.do-menu-position { pointer-events: auto; }
.do-menu-position .mark-imagine { width: 158px; height: 182px; top: 120px; left: 323px; margin: 0; -webkit-transform: none !important; transform: none !important; opacity: 1; -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) !important; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) !important; overflow: visible; }
.do-menu-position .mark-imagine .ico-blc { position: relative; z-index: 10; }
.do-menu-position .mark-imagine .txt { visibility: visible; opacity: 1; -webkit-transition: .3s linear opacity,.3s linear visibility; transition: .3s linear opacity,.3s linear visibility; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
.do-menu-position .mark-imagine .illust-human, .do-menu-position .mark-imagine .illust-txt { visibility: visible; opacity: 1; -webkit-transition: .5s ease-out 1.9s; transition: .5s ease-out 1.9s; }
.do-menu-position .mark-imagine .illust-human { -webkit-transform: none; transform: none; }
.do-menu-position .mark-imagine .illust-txt { width: 45px; }
.do-menu-position .mark-imagine:after { opacity: 1; -webkit-transform: translate3d(7px, 4px, 0); transform: translate3d(7px, 4px, 0); -webkit-transition: .3s transform ease-out,.3s opacity ease-out; transition: .3s transform ease-out,.3s opacity ease-out; -webkit-transition-delay: 2s; transition-delay: 2s; }
.do-menu-position .mark { overflow: visible; -webkit-transform: none !important; transform: none !important; opacity: 1; -webkit-transition: top,left,opacity,-webkit-transform !important; transition: top,left,opacity,-webkit-transform !important; transition: transform,top,left,opacity !important; transition: transform,top,left,opacity,-webkit-transform !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important; cursor: pointer; }
.do-menu-position .mark .ico { opacity: 1 !important; -webkit-transition: .4s linear opacity .3s; transition: .4s linear opacity .3s; }
.do-menu-position .mark .txt { visibility: visible; opacity: 1; -webkit-transition: .3s linear opacity,.3s linear visibility; transition: .3s linear opacity,.3s linear visibility; }
.do-menu-position .mark .illust { visibility: visible; opacity: .3; -webkit-transition: .3s linear opacity,.3s linear visibility; transition: .3s linear opacity,.3s linear visibility; }
.do-menu-position .mark:after { opacity: 1; -webkit-transform: translate3d(5px, 4px, 0); transform: translate3d(5px, 4px, 0); -webkit-transition: .3s transform ease-out,.3s opacity ease-out; transition: .3s transform ease-out,.3s opacity ease-out; -webkit-transition-delay: 2s; transition-delay: 2s; }
.do-menu-position #mark--core { top: 8px; left: 216px; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
.do-menu-position #mark--core .txt { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
.do-menu-position #mark--core .illust { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
.do-menu-position #mark--home { top: 57px; left: 608px; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
.do-menu-position #mark--home .txt { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
.do-menu-position #mark--home .illust { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
.do-menu-position #mark--sattelite { top: 306px; left: 609px; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
.do-menu-position #mark--sattelite .txt { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }
.do-menu-position #mark--sattelite .illust { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }
.do-menu-position #mark--share { top: 436px; left: 385px; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
.do-menu-position #mark--share .txt { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }
.do-menu-position #mark--share .illust { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }
.do-menu-position #mark--mobile { top: 294px; left: 183px; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
.do-menu-position #mark--mobile .txt { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
.do-menu-position #mark--mobile .illust { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
.do-menu-position .border { opacity: 1; }
.do-menu-position .border--core { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
.do-menu-position .border--home { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
.do-menu-position .border--satellite { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }
.do-menu-position .border--share { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }
.do-menu-position .border--mobile { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
.do-menu-position .other-marks { opacity: 1; -webkit-transform: none; transform: none; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition: 0.6s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.6s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.6s ease-out opacity; transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.6s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

.do-menu-position2 .mark { pointer-events: auto; z-index: 20 !important; }
.do-menu-position2 .mark .illust { -webkit-transition: 0.6s opacity cubic-bezier(0.23, 1, 0.32, 1), 0.6s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) !important; transition: 0.6s opacity cubic-bezier(0.23, 1, 0.32, 1), 0.6s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) !important; transition: 0.6s opacity cubic-bezier(0.23, 1, 0.32, 1), 0.6s transform cubic-bezier(0.23, 1, 0.32, 1) !important; transition: 0.6s opacity cubic-bezier(0.23, 1, 0.32, 1), 0.6s transform cubic-bezier(0.23, 1, 0.32, 1), 0.6s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) !important; -webkit-transform-origin: center center; transform-origin: center center; }
.do-menu-position2 .mark:hover .ico { -webkit-animation: icoAttention .6s ease-out; animation: icoAttention .6s ease-out; }
.do-menu-position2 .mark:hover .illust { opacity: .7; -webkit-transform: scale(1.05); transform: scale(1.05); }
.do-menu-position2 .mark-imagine { pointer-events: auto; }
.do-menu-position2 .mark-imagine:hover .ico-blc { -webkit-animation: imagineAttention .6s ease-out; animation: imagineAttention .6s ease-out; -webkit-transform-origin: center; transform-origin: center; }

@-webkit-keyframes icoAttention { 0% { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  30% { -webkit-transform: none; transform: none; }
  45% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  60% { -webkit-transform: none; transform: none; }
  75% { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: none; transform: none; } }

@keyframes icoAttention { 0% { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  30% { -webkit-transform: none; transform: none; }
  45% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  60% { -webkit-transform: none; transform: none; }
  75% { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: none; transform: none; } }
@-webkit-keyframes imagineAttention { 0% { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: scale(1.05) translate3d(0, -6px, 0); transform: scale(1.05) translate3d(0, -6px, 0); }
  30% { -webkit-transform: none; transform: none; }
  45% { -webkit-transform: scale(1.02) translate3d(0, -3px, 0); transform: scale(1.02) translate3d(0, -3px, 0); }
  60% { -webkit-transform: none; transform: none; }
  75% { -webkit-transform: scale(1.01) translate3d(0, -1px, 0); transform: scale(1.01) translate3d(0, -1px, 0); }
  100% { -webkit-transform: none; transform: none; } }
@keyframes imagineAttention { 0% { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: scale(1.05) translate3d(0, -6px, 0); transform: scale(1.05) translate3d(0, -6px, 0); }
  30% { -webkit-transform: none; transform: none; }
  45% { -webkit-transform: scale(1.02) translate3d(0, -3px, 0); transform: scale(1.02) translate3d(0, -3px, 0); }
  60% { -webkit-transform: none; transform: none; }
  75% { -webkit-transform: scale(1.01) translate3d(0, -1px, 0); transform: scale(1.01) translate3d(0, -1px, 0); }
  100% { -webkit-transform: none; transform: none; } }
/*workplace詳細ページ index
--------------------------------------------------------------------*/
.detail-top { position: relative; z-index: 10; -webkit-transition: opacity 0.5s ease-out, 0.6s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; transition: opacity 0.5s ease-out, 0.6s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1) transform, opacity 0.5s ease-out; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1) transform, opacity 0.5s ease-out, 0.6s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; -webkit-transition-delay: .3s; transition-delay: .3s; }
.detail-top__logo { top: 12vh; left: 8vw; position: absolute; z-index: auto; overflow: hidden; }
.detail-top__logo img { display: block; }
.detail-top__txt-blc { top: 11.5vh; left: 48.3vw; position: absolute; z-index: auto; margin-top: -7px; }
.detail-top__hd { margin: 0 0 10px; font-size: 3rem; line-height: 1.35; letter-spacing: 2px; font-weight: bold; overflow: hidden; font-size: 3.7vh; }
@media (min-height: 800px) { .detail-top__hd { font-size: 3rem; } }
.detail-top__txt { font-size: 1.4rem; line-height: 1.75; font-weight: bold; overflow: hidden; }
.detail-top .anim-blc { -webkit-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1) transform; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1) transform, 0.6s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; -webkit-transition-delay: .3s; transition-delay: .3s; }

.is-hide.detail-top { opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); -webkit-transition-delay: 0s; transition-delay: 0s; }
.is-hide.detail-top .anim-blc { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition-delay: 0s; transition-delay: 0s; }

/*workplace詳細ページ scene
--------------------------------------------------------------------*/
.scene-container { width: 100%; height: 100%; display: block; min-height: 650px; top: 0px; left: 0px; position: absolute; z-index: 0; overflow: hidden; }

.scene-logo { bottom: 17px; left: 7.8%; position: absolute; z-index: 2; opacity: 0; visibility: hidden; cursor: pointer; }
.scene-logo img { display: block; }

.scene-nav { width: 100%; height: 28px; overflow: hidden; bottom: 10px; left: 0px; position: absolute; z-index: 1; text-align: center; opacity: 0; visibility: hidden; }
.scene-nav__btn { width: 8px; height: 8px; display: block; display: inline-block; border: 1px solid; border-radius: 8px; cursor: pointer; -webkit-transition: .2s linear background-color; transition: .2s linear background-color; }
.scene-nav__btn:before { content: ''; width: 28px; height: 28px; display: block; margin: -10px 0 0 -10px; }
.scene-nav__btn + .scene-nav__btn { margin-left: 12px; }

.scene-blc { width: 100%; height: 67%; display: block; overflow: hidden; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 33%; left: 0px; position: absolute; z-index: auto; background-position: center center; background-size: cover; background-repeat: no-repeat; border-left: 1px solid white; border-right: 1px solid white; }
.scene-blc:before { content: ''; width: 100%; height: 100%; display: block; top: 0px; left: 0px; position: absolute; z-index: 0; background: black; opacity: 0; -webkit-transition: .3s ease-out opacity; transition: .3s ease-out opacity; }
.scene-blc:after { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; color: white; font-size: 35px; line-height: 1; position: absolute; top: 50%; z-index: 20; opacity: 0; margin-top: -18px; }
.scene-blc:first-child { border-left: none; }
.scene-blc:last-of-type { border-right: none; }
.scene-blc.is-current { cursor: default; }
.scene-blc.is-current .scene-blc__content-hd { opacity: 1; -webkit-transition: .45s ease-out opacity 2.9s; transition: .45s ease-out opacity 2.9s; }
.scene-blc.is-current .scene-blc__content-body { opacity: 1; -webkit-transition: .45s ease-out opacity 2.95s; transition: .45s ease-out opacity 2.95s; }
.scene-blc.is-current .scene-blc__content-btn { opacity: 1; -webkit-transition: .45s ease-out opacity 3s; transition: .45s ease-out opacity 3s; }
.scene-blc__mask { width: 100%; height: 100%; display: block; top: 0px; left: 0px; position: absolute; z-index: 1; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.scene-blc__title { width: 100%; top: 42%; left: 0px; position: absolute; z-index: 10; color: white; }
.scene-blc__title .caps, .scene-blc__title .body { display: block; text-align: center; line-height: 1; font-family: "Raleway"; }
.scene-blc__title .caps { padding-bottom: 26px; position: relative; font-size: 1.4rem; }
.scene-blc__title .caps:before { content: ''; width: 48px; height: 2px; display: block; bottom: 11px; left: 50%; position: absolute; z-index: auto; margin-left: -24px; background: rgba(255, 255, 255, 0.8); }
.scene-blc__title .body { font-size: 2.4rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 2px; }
.scene-blc__content { width: 428px; padding: 20px 23px 20px; bottom: 0px; right: 0px; position: absolute; z-index: auto; background-color: rgba(0, 0, 0, 0.4); color: white; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0; -webkit-transition: .3s opacity ease-out,0s -webkit-transform linear .3s; transition: .3s opacity ease-out,0s -webkit-transform linear .3s; transition: .3s opacity ease-out,0s transform linear .3s; transition: .3s opacity ease-out,0s transform linear .3s,0s -webkit-transform linear .3s; }
.scene-blc__content-hd { margin: 0 0 18px; padding: 0 13px; display: inline-block; overflow: hidden; opacity: 0; }
.scene-blc__content-hd .caps, .scene-blc__content-hd .body { float: left; font-family: "Raleway"; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.scene-blc__content-hd .caps { padding: 15px 15px 0 0; font-size: 1.4rem; }
/* 2018/04/03 */
/*.scene-blc__content-hd .body { position: relative; padding: 6px 0 12px 15px; font-size: 2.6rem; }*/
.scene-blc__content-hd .body { position: relative; padding: 8px 0 12px 15px; font-size: 2.3rem; }
.scene-blc__content-hd .body:after { content: ''; width: 1px; height: 70%; display: block; top: 15%; left: 0px; position: absolute; z-index: auto; background: rgba(255, 255, 255, 0.8); }
.scene-blc__content-body { font-size: 1.4rem; line-height: 1.8; letter-spacing: 1.5px; opacity: 0; }
.scene-blc__content-btn { display: block; margin: 20px 0 0; padding: 12px 15px 12px 12px; font-size: 1.3rem; line-height: 1; font-family: "Raleway", "YakuHanJPs", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; border: 1px solid rgba(255, 255, 255, 0.5); vertical-align: middle; cursor: pointer; text-align: center; opacity: 0; }
.scene-blc__content-btn:before { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; display: inline-block; margin-right: 5px; }
.scene-blc__content-btn:hover { background: #60c75b; }
.scene-blc__content-btn + .scene-blc__content-btn { margin-top: 10px; }

.no-transition .scene-blc { -webkit-transition: none !important; transition: none !important; }

.is-top-mode .scene-blc { -webkit-transition: width,left; transition: width,left; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.is-top-mode .scene-blc__mask { -webkit-transition: .3s ease-out background-color; transition: .3s ease-out background-color; }
.is-top-mode .scene-blc:hover { -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition-duration: .48s; transition-duration: .48s; }

.is-slide-return .scene-blc { -webkit-transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s !important; transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s !important; transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s !important; transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s !important; }
.is-slide-return .scene-blc__mask { -webkit-transition: .3s ease-out background-color,.3s ease-out opacity !important; transition: .3s ease-out background-color,.3s ease-out opacity !important; }
.is-slide-return .scene-blc:nth-child(2) { -webkit-transition-delay: .05s !important; transition-delay: .05s !important; }
.is-slide-return .scene-blc:nth-child(3) { -webkit-transition-delay: .1s !important; transition-delay: .1s !important; }
.is-slide-return .scene-blc:nth-child(4) { -webkit-transition-delay: .15s !important; transition-delay: .15s !important; }
.is-slide-return .scene-blc:nth-child(5) { -webkit-transition-delay: .2s !important; transition-delay: .2s !important; }

.is-slide-change .scene-blc.is-next-out, .is-slide-change .scene-blc.is-prev-out, .do-slideshow .scene-blc.is-next-out, .do-slideshow .scene-blc.is-prev-out { pointer-events: none; }
.is-slide-change .scene-blc__mask:before, .is-slide-change .scene-blc__mask:after, .do-slideshow .scene-blc__mask:before, .do-slideshow .scene-blc__mask:after { opacity: 0; visibility: hidden; }

.is-slide-change .scene-blc { width: 83% !important; height: 86%; top: 6.875%; left: 7.9%; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); border: 0px solid rgba(255, 255, 255, 0); }
.is-slide-change .scene-blc.is-current { -webkit-transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, height cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, left cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.6s, top cubic-bezier(0.77, 0, 0.175, 1) 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; }
.is-slide-change .scene-blc.is-current .scene-blc__content { -webkit-transform: none; transform: none; opacity: 1; -webkit-transition: 0.4s ease-out opacity, 0.6s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.4s ease-out opacity, 0.6s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) transform, 0.4s ease-out opacity; transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) transform, 0.4s ease-out opacity, 0.6s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; -webkit-transition-delay: 2s; transition-delay: 2s; }
.is-slide-change .scene-blc.is-next, .is-slide-change .scene-blc.is-prev, .is-slide-change .scene-blc.is-next-out, .is-slide-change .scene-blc.is-prev-out { opacity: 0; -webkit-transform: scale(0) translate3d(0, 20px, 0); transform: scale(0) translate3d(0, 20px, 0); -webkit-transition: width linear 0s 0.6s, height linear 0s 0.6s, left linear 0s 0.6s, top linear 0s 0.6s, opacity ease 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width linear 0s 0.6s, height linear 0s 0.6s, left linear 0s 0.6s, top linear 0s 0.6s, opacity ease 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width linear 0s 0.6s, height linear 0s 0.6s, left linear 0s 0.6s, top linear 0s 0.6s, opacity ease 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width linear 0s 0.6s, height linear 0s 0.6s, left linear 0s 0.6s, top linear 0s 0.6s, opacity ease 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; }
.is-slide-change .scene-blc.is-anim.is-next { -webkit-animation: showNextScene 0.5s cubic-bezier(0.77, 0, 0.175, 1) 1.4s forwards !important; animation: showNextScene 0.5s cubic-bezier(0.77, 0, 0.175, 1) 1.4s forwards !important; -webkit-transition: none !important; transition: none !important; }
.is-slide-change .scene-blc.is-anim.is-prev { -webkit-animation: showPrevScene 0.5s cubic-bezier(0.77, 0, 0.175, 1) 1.4s forwards !important; animation: showPrevScene 0.5s cubic-bezier(0.77, 0, 0.175, 1) 1.4s forwards !important; -webkit-transition: none !important; transition: none !important; }
.is-slide-change .scene-blc.is-anim.is-next-out { opacity: 1; -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); -webkit-transition: none !important; transition: none !important; }
.is-slide-change .scene-blc.is-anim.is-prev-out { opacity: 1; -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); -webkit-transition: none !important; transition: none !important; }
.is-slide-change .scene-blc__title { opacity: 0; -webkit-transition: .5s linear opacity .5s; transition: .5s linear opacity .5s; }
.is-slide-change .scene-blc__mask { opacity: 0; -webkit-transition: .5s linear opacity 1.1s,.5s linear transform; transition: .5s linear opacity 1.1s,.5s linear transform; -webkit-transform: none !important; transform: none !important; }

@-webkit-keyframes showNextScene { 0% { opacity: 0; -webkit-transform: scale(0.87) translate3d(130%, 0, 0); transform: scale(0.87) translate3d(130%, 0, 0); }
  100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(114%, 0, 0); transform: scale(0.87) translate3d(114%, 0, 0); } }

@keyframes showNextScene { 0% { opacity: 0; -webkit-transform: scale(0.87) translate3d(130%, 0, 0); transform: scale(0.87) translate3d(130%, 0, 0); }
  100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(114%, 0, 0); transform: scale(0.87) translate3d(114%, 0, 0); } }
@-webkit-keyframes showPrevScene { 0% { opacity: 0; -webkit-transform: scale(0.87) translate3d(-130%, 0, 0); transform: scale(0.87) translate3d(-130%, 0, 0); }
  100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(-113%, 0, 0); transform: scale(0.87) translate3d(-113%, 0, 0); } }
@keyframes showPrevScene { 0% { opacity: 0; -webkit-transform: scale(0.87) translate3d(-130%, 0, 0); transform: scale(0.87) translate3d(-130%, 0, 0); }
  100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(-113%, 0, 0); transform: scale(0.87) translate3d(-113%, 0, 0); } }
@-webkit-keyframes showNextOutScene { 100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); } }
@keyframes showNextOutScene { 100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); } }
@-webkit-keyframes showPrevOutScene { 100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); } }
@keyframes showPrevOutScene { 100% { opacity: 1; -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); } }
.do-slideshow .scene-logo, .do-slideshow .scene-nav { opacity: 1; visibility: visible; -webkit-transition: .3s linear opacity,.3s linear visibility; transition: .3s linear opacity,.3s linear visibility; }
.do-slideshow .scene-blc { width: 83% !important; height: 86%; top: 6.875%; left: 7.9%; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); border: none; -webkit-transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1) transform; transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1) transform, 0.8s cubic-bezier(0.77, 0, 0.175, 1) -webkit-transform; }
.do-slideshow .scene-blc.is-current .scene-blc__content { -webkit-transform: none; transform: none; opacity: 1; -webkit-transition: 0.5s linear opacity, 0.6s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.5s linear opacity, 0.6s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) transform, 0.5s linear opacity; transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) transform, 0.5s linear opacity, 0.6s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; -webkit-transition-delay: .25s; transition-delay: .25s; }
.do-slideshow .scene-blc.is-current .scene-blc__content-hd { opacity: 1; -webkit-transition: .45s ease-out opacity .9s; transition: .45s ease-out opacity .9s; }
.do-slideshow .scene-blc.is-current .scene-blc__content-body { opacity: 1; -webkit-transition: .45s ease-out opacity .95s; transition: .45s ease-out opacity .95s; }
.do-slideshow .scene-blc.is-current .scene-blc__content-btn { opacity: 1; -webkit-transition: .2s ease-out background-color,.45s ease-out opacity 1s; transition: .2s ease-out background-color,.45s ease-out opacity 1s; }
.do-slideshow .scene-blc.is-next { -webkit-transform: scale(0.87) translate3d(114%, 0, 0); transform: scale(0.87) translate3d(114%, 0, 0); }
.do-slideshow .scene-blc.is-prev { -webkit-transform: scale(0.87) translate3d(-113%, 0, 0); transform: scale(0.87) translate3d(-113%, 0, 0); }
.do-slideshow .scene-blc.is-next:before, .do-slideshow .scene-blc.is-prev:before { opacity: .3; }
.do-slideshow .scene-blc.is-next:after, .do-slideshow .scene-blc.is-prev:after { opacity: 1; -webkit-transition: .2s linear opacity .5s; transition: .2s linear opacity .5s; }
.do-slideshow .scene-blc.is-next:hover:before, .do-slideshow .scene-blc.is-prev:hover:before { opacity: 0; }
.do-slideshow .scene-blc.is-next:after, .do-slideshow .scene-blc.is-next-out:after { left: 25px; }
.do-slideshow .scene-blc.is-prev:after, .do-slideshow .scene-blc.is-prev-out:after { right: 25px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.do-slideshow .scene-blc.is-next-out { -webkit-transform: scale(0.87) translate3d(150%, 0, 0); transform: scale(0.87) translate3d(150%, 0, 0); }
.do-slideshow .scene-blc.is-prev-out { -webkit-transform: scale(0.87) translate3d(-150%, 0, 0); transform: scale(0.87) translate3d(-150%, 0, 0); }
.do-slideshow .scene-blc__title { opacity: 0; visibility: hidden; }
.do-slideshow .scene-blc__mask { opacity: 0; visibility: hidden; }

@-webkit-keyframes showIcon { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes showIcon { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes attentionBtn { 0% { background: transparent; }
  50% { background: #60c75b; }
  100% { background: transparent; } }
@keyframes attentionBtn { 0% { background: transparent; }
  50% { background: #60c75b; }
  100% { background: transparent; } }
.is-top-mode .scene-blc .scene-blc__title { -webkit-transition: .3s linear opacity; transition: .3s linear opacity; }
.is-top-mode.do-over-scene_01 .scene-blc .scene-blc__title, .is-top-mode.do-over-scene_02 .scene-blc .scene-blc__title, .is-top-mode.do-over-scene_03 .scene-blc .scene-blc__title, .is-top-mode.do-over-scene_04 .scene-blc .scene-blc__title, .is-top-mode.do-over-scene_05 .scene-blc .scene-blc__title { opacity: 0; }
.is-top-mode.do-over-scene_01 .scene-blc:hover .scene-blc__title, .is-top-mode.do-over-scene_02 .scene-blc:hover .scene-blc__title, .is-top-mode.do-over-scene_03 .scene-blc:hover .scene-blc__title, .is-top-mode.do-over-scene_04 .scene-blc:hover .scene-blc__title, .is-top-mode.do-over-scene_05 .scene-blc:hover .scene-blc__title { opacity: 1; }

#core .scene-blc__content-hd { background-color: rgba(228, 0, 127, 0.4); }

#home .scene-blc__content-hd { background-color: rgba(237, 109, 0, 0.4); }

#satellite .scene-blc__content-hd { background-color: rgba(0, 158, 150, 0.4); }

#share .scene-blc__content-hd { background-color: rgba(146, 7, 131, 0.4); }

#mobile .scene-blc__content-hd { background-color: rgba(30, 185, 238, 0.4); }

#core .scene-nav__btn { color: #e63b9a; }
#core .scene-nav__btn:hover, #core .scene-nav__btn.is-current { background: #e63b9a; }
#core .scene-blc__mask { background-color: #e63b9a; }
#core .is-top-mode .scene-blc:hover .scene-blc__mask { background-color: #e4007f; }
#core .scene-blc { width: 20%; }
#core .scene-blc:nth-child(1) { background-image: url("../../core/images/picture_core1.jpg"); }
#core .scene-blc:nth-child(1) .scene-blc__mask { background-image: url("../../core/images/illust1.png"); background-position: left center; -webkit-transform: scale(1.1); transform: scale(1.1); }
#core .scene-blc:nth-child(2) { background-image: url("../../core/images/picture_core2.jpg"); }
#core .scene-blc:nth-child(2) .scene-blc__mask { background-image: url("../../core/images/illust2.png"); }
#core .scene-blc:nth-child(3) { background-image: url("../../core/images/picture_core3.jpg"); background-position: 12% center; }
#core .scene-blc:nth-child(3) .scene-blc__mask { background-image: url("../../core/images/illust3.png"); background-position: 12% center; }
#core .scene-blc:nth-child(4) { background-image: url("../../core/images/picture_core4.jpg"); }
#core .scene-blc:nth-child(4) .scene-blc__mask { background-image: url("../../core/images/illust4.png"); }
#core .scene-blc:nth-child(5) { background-image: url("../../core/images/picture_core5.jpg"); background-position: 32% center; }
#core .scene-blc:nth-child(5) .scene-blc__mask { background-image: url("../../core/images/illust5.png"); background-position: 32% center; }
#core .is-top-mode .scene-blc:nth-child(2) { left: 20%; }
#core .is-top-mode .scene-blc:nth-child(3) { left: 40%; }
#core .is-top-mode .scene-blc:nth-child(4) { left: 60%; }
#core .is-top-mode .scene-blc:nth-child(5) { left: 80%; }
#core .is-top-mode.do-over-scene_01 .scene-blc, #core .is-top-mode.do-over-scene_02 .scene-blc, #core .is-top-mode.do-over-scene_03 .scene-blc, #core .is-top-mode.do-over-scene_04 .scene-blc, #core .is-top-mode.do-over-scene_05 .scene-blc { width: 15% !important; }
#core .is-top-mode.do-over-scene_01 .scene-blc:nth-child(2), #core .is-top-mode.do-over-scene_02 .scene-blc:nth-child(2), #core .is-top-mode.do-over-scene_03 .scene-blc:nth-child(2), #core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(2), #core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(2) { left: 40%; }
#core .is-top-mode.do-over-scene_01 .scene-blc:nth-child(3), #core .is-top-mode.do-over-scene_02 .scene-blc:nth-child(3), #core .is-top-mode.do-over-scene_03 .scene-blc:nth-child(3), #core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(3), #core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(3) { left: 55%; }
#core .is-top-mode.do-over-scene_01 .scene-blc:nth-child(4), #core .is-top-mode.do-over-scene_02 .scene-blc:nth-child(4), #core .is-top-mode.do-over-scene_03 .scene-blc:nth-child(4), #core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(4), #core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(4) { left: 70%; }
#core .is-top-mode.do-over-scene_01 .scene-blc:nth-child(5), #core .is-top-mode.do-over-scene_02 .scene-blc:nth-child(5), #core .is-top-mode.do-over-scene_03 .scene-blc:nth-child(5), #core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(5), #core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(5) { left: 85%; }
#core .is-top-mode.do-over-scene_01 .scene-blc:nth-child(1) { width: 40% !important; z-index: 10; }
#core .is-top-mode.do-over-scene_02 .scene-blc:nth-child(2) { width: 40% !important; z-index: 10; left: 15%; }
#core .is-top-mode.do-over-scene_03 .scene-blc:nth-child(2) { left: 15%; }
#core .is-top-mode.do-over-scene_03 .scene-blc:nth-child(3) { width: 40% !important; z-index: 10; left: 30%; }
#core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(2) { left: 15%; }
#core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(3) { left: 30%; }
#core .is-top-mode.do-over-scene_04 .scene-blc:nth-child(4) { width: 40% !important; z-index: 10; left: 45%; }
#core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(2) { left: 15%; }
#core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(3) { left: 30%; }
#core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(4) { left: 45%; }
#core .is-top-mode.do-over-scene_05 .scene-blc:nth-child(5) { width: 40% !important; z-index: 10; left: 60%; }

#home .scene-nav__btn { color: #e87e24; }
#home .scene-nav__btn:hover, #home .scene-nav__btn.is-current { background: #e87e24; }
#home .scene-blc__mask { background-color: #e87e24; }
#home .is-top-mode .scene-blc:hover .scene-blc__mask { background-color: #ed6d00; }
#home .scene-blc:nth-child(1) { background-image: url("../../home/images/picture_home1.jpg"); }
#home .scene-blc:nth-child(1) .scene-blc__mask { background-image: url("../../home/images/illust1.png"); }
#home .scene-blc:nth-child(2) { background-image: url("../../home/images/picture_home2.jpg"); }
#home .scene-blc:nth-child(2) .scene-blc__mask { background-image: url("../../home/images/illust2.png"); }
#home .is-top-mode .scene-blc { width: 50%; }
#home .is-top-mode .scene-blc:nth-child(2) { left: 50%; }
#home .is-top-mode.do-over-scene_01 .scene-blc, #home .is-top-mode.do-over-scene_02 .scene-blc { width: 40% !important; }
#home .is-top-mode.do-over-scene_01 .scene-blc:nth-child(1) { width: 60% !important; z-index: 10; }
#home .is-top-mode.do-over-scene_01 .scene-blc:nth-child(2) { left: 60%; }
#home .is-top-mode.do-over-scene_02 .scene-blc:nth-child(2) { width: 60% !important; z-index: 10; left: 40%; }

#satellite .scene-nav__btn { color: #26aca5; }
#satellite .scene-nav__btn:hover, #satellite .scene-nav__btn.is-current { background: #26aca5; }
#satellite .scene-blc { background-image: url("../../satellite/images/picture_satellite1.jpg"); }
#satellite .scene-blc__mask { background-image: url("../../satellite/images/illust1.png"); }
#satellite .scene-blc__mask { background-color: #26aca5; }
#satellite .is-top-mode .scene-blc:hover .scene-blc__mask { background-color: #009e96; }

#share .scene-nav__btn { color: #af31a1; }
#share .scene-nav__btn:hover, #share .scene-nav__btn.is-current { background: #af31a1; }
#share .scene-blc__mask { background-color: #af31a1; }
#share .is-top-mode .scene-blc:hover .scene-blc__mask { background-color: #920783; }
#share .scene-blc:nth-child(1) { background-image: url("../../share/images/picture_share1.jpg"); }
#share .scene-blc:nth-child(1) .scene-blc__mask { background-image: url("../../share/images/illust1.png"); }
#share .scene-blc:nth-child(2) { background-image: url("../../share/images/picture_share2.jpg"); }
#share .scene-blc:nth-child(2) .scene-blc__mask { background-image: url("../../share/images/illust2.png"); }
#share .is-top-mode .scene-blc { width: 50%; }
#share .is-top-mode .scene-blc:nth-child(2) { left: 50%; }
#share .is-top-mode.do-over-scene_01 .scene-blc, #share .is-top-mode.do-over-scene_02 .scene-blc { width: 40% !important; }
#share .is-top-mode.do-over-scene_01 .scene-blc:nth-child(1) { width: 60% !important; z-index: 10; }
#share .is-top-mode.do-over-scene_01 .scene-blc:nth-child(2) { left: 60%; }
#share .is-top-mode.do-over-scene_02 .scene-blc:nth-child(2) { width: 60% !important; z-index: 10; left: 40%; }

#mobile .scene-nav__btn { color: #4ec5ed; }
#mobile .scene-nav__btn:hover, #mobile .scene-nav__btn.is-current { background: #4ec5ed; }
#mobile .scene-blc { background-image: url("../../mobile/images/picture_mobile1.jpg"); }
#mobile .scene-blc__mask { background-image: url("../../mobile/images/illust1.png"); }
#mobile .scene-blc__mask { background-color: #4ec5ed; }
#mobile .is-top-mode .scene-blc:hover .scene-blc__mask { background-color: #1eb9ee; }

.do-show-up .scene-blc { opacity: 0; -webkit-animation: show-scene-up 0.8s cubic-bezier(0.23, 1, 0.32, 1); animation: show-scene-up 0.8s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: none !important; transition: none !important; }
.do-show-up .scene-blc__title { opacity: 0; }

.do-show-down .scene-blc { opacity: 0; -webkit-animation: show-scene-down 0.8s cubic-bezier(0.23, 1, 0.32, 1); animation: show-scene-down 0.8s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: none !important; transition: none !important; }
.do-show-down .scene-blc__title { opacity: 0; }

.do-hide-up .scene-blc { opacity: 1; -webkit-animation: hide-scene 0.4s cubic-bezier(0.23, 1, 0.32, 1); animation: hide-scene 0.4s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: none !important; transition: none !important; }

.do-hide-down .scene-blc { opacity: 1; -webkit-animation: hide-scene 0.4s cubic-bezier(0.23, 1, 0.32, 1); animation: hide-scene 0.4s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: none !important; transition: none !important; }

.do-show-up .scene-blc, .do-show-down .scene-blc, .do-hide-up .scene-blc, .do-hide-down .scene-blc { pointer-events: none; }
.do-show-up .scene-blc:nth-child(1), .do-show-down .scene-blc:nth-child(1), .do-hide-up .scene-blc:nth-child(1), .do-hide-down .scene-blc:nth-child(1) { -webkit-animation-delay: 0.23s !important; animation-delay: 0.23s !important; }
.do-show-up .scene-blc:nth-child(2), .do-show-down .scene-blc:nth-child(2), .do-hide-up .scene-blc:nth-child(2), .do-hide-down .scene-blc:nth-child(2) { -webkit-animation-delay: 0.26s !important; animation-delay: 0.26s !important; }
.do-show-up .scene-blc:nth-child(3), .do-show-down .scene-blc:nth-child(3), .do-hide-up .scene-blc:nth-child(3), .do-hide-down .scene-blc:nth-child(3) { -webkit-animation-delay: 0.29s !important; animation-delay: 0.29s !important; }
.do-show-up .scene-blc:nth-child(4), .do-show-down .scene-blc:nth-child(4), .do-hide-up .scene-blc:nth-child(4), .do-hide-down .scene-blc:nth-child(4) { -webkit-animation-delay: 0.32s !important; animation-delay: 0.32s !important; }
.do-show-up .scene-blc:nth-child(5), .do-show-down .scene-blc:nth-child(5), .do-hide-up .scene-blc:nth-child(5), .do-hide-down .scene-blc:nth-child(5) { -webkit-animation-delay: 0.35s !important; animation-delay: 0.35s !important; }

@-webkit-keyframes show-scene-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 120px, 0); transform: translate3d(0, 120px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }

@keyframes show-scene-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 120px, 0); transform: translate3d(0, 120px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes show-scene-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -120px, 0); transform: translate3d(0, -120px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes show-scene-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -120px, 0); transform: translate3d(0, -120px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes hide-scene { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes hide-scene { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-webkit-keyframes hide-scene-up { 0% { opacity: 1; -webkit-transform: none; transform: none; }
  100% { opacity: 0; -webkit-transform: translate3d(0, 120px, 0); transform: translate3d(0, 120px, 0); } }
@keyframes hide-scene-up { 0% { opacity: 1; -webkit-transform: none; transform: none; }
  100% { opacity: 0; -webkit-transform: translate3d(0, 120px, 0); transform: translate3d(0, 120px, 0); } }
@-webkit-keyframes hide-scene-down { 0% { opacity: 1; -webkit-transform: none; transform: none; }
  100% { opacity: 0; -webkit-transform: translate3d(0, -120px, 0); transform: translate3d(0, -120px, 0); } }
@keyframes hide-scene-down { 0% { opacity: 1; -webkit-transform: none; transform: none; }
  100% { opacity: 0; -webkit-transform: translate3d(0, -120px, 0); transform: translate3d(0, -120px, 0); } }
@-webkit-keyframes show-title { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes show-title { 0% { opacity: 0; }
  100% { opacity: 1; } }
.imagine-mordal { width: 100%; height: 100%; display: -webkit-box; display: flex; top: 0px; left: 0px; position: fixed; z-index: 20; background: rgba(255, 255, 255, 0.9); -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; visibility: hidden; opacity: 0; -webkit-transition: opacity,visibility; transition: opacity,visibility; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; }
.imagine-mordal__inner { width: 87.5%; max-height: 88.375%; padding: 78px 0 0 0; left: 15px; position: relative; overflow: hidden; background: white; box-shadow: 0px 0px 27px rgba(4, 0, 0, 0.2); opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: 0.3s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.3s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; transition: 0.3s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) transform; transition: 0.3s ease-out opacity, 0.6s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.6s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform; -webkit-transition-delay: .3s; transition-delay: .3s; }
.imagine-mordal__logo { top: 19px; left: 22px; position: absolute; z-index: auto; }
.imagine-mordal__close { width: 44px; height: 78px; display: block; top: 0px; right: 0px; position: absolute; z-index: 20; background: #60c75b; cursor: pointer; -webkit-transition: .2s ease-out background-color; transition: .2s ease-out background-color; }
.imagine-mordal__close:before { content: ""; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; padding: 29px 0 0 11px; display: block; color: white; font-size: 2.2rem; }
.imagine-mordal__close:hover { background: #3d9b38; }
.imagine-mordal__bg { width: 100%; height: 100%; display: block; top: 78px; left: 0px; position: absolute; z-index: 0; background: url("../../imagine/images/bg-repeat.png") left top; }
.imagine-mordal__blc { height: 77vh; display: -webkit-box; display: flex; flex-wrap: wrap; padding: 0 20px; overflow: scroll; display: none; }
.imagine-mordal__blc.is-current { display: -webkit-box; display: flex; }
.imagine-mordal__item { width: 50%; padding: 20px 20px; position: relative; z-index: 10; list-style: none; }
.imagine-mordal__item img { display: block; width: 72%; height: auto; margin: 0 auto; }
.imagine-mordal__item .caps { display: inline-block; padding: 6px 12px; margin: 10px 0 7px; line-height: 1; color: white; font-size: 12px; background: black; }
.imagine-mordal__item .hd { font-size: 2.4rem; font-weight: bold; line-height: 1; letter-spacing: 2px; }
.imagine-mordal__item .hd .bg { background: #fff100; line-height: 1.6; }
.imagine-mordal__item .body { margin: 5px auto 0; font-size: 1.4rem; line-height: 1.75; font-weight: bold; letter-spacing: 2px; }
.imagine-mordal__blc--3blc .imagine-mordal__item { width: 33%; }
.imagine-mordal__movie { width: 100%; height: 100%; position: relative; z-index: 10; margin-top: -78px; padding: 0 0 120px; background: white; display: none; }
.imagine-mordal__movie .hd { padding: 28px 23px 110px; font-size: 3rem; color: #60c75b; line-height: 1; }
.imagine-mordal__movie .inner { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: center; align-items: center; padding: 0; -webkit-box-pack: center; justify-content: center; background: #f3f3f3; }
.imagine-mordal__movie .inner .txt { width: 220px; padding: 0 0 0 30px; font-size: 1.4rem; font-weight: bold; line-height: 1.8; letter-spacing: 2px; }
.imagine-mordal__movie .movie { height: 100%; position: relative; cursor: pointer; }
.imagine-mordal__movie .movie iframe { display: block; }
.imagine-mordal__movie.is-current { display: block; }

.is-mordal-show.imagine-mordal { visibility: visible; opacity: 1; }
.is-mordal-show .imagine-mordal__inner { opacity: 1; -webkit-transform: none; transform: none; }

/*　モジュール
--------------------------------------------------------------------*/
/*-------------------------------------//
// 汎用モジュール（接頭辞: `u`）
//-------------------------------------*/
@media screen and (max-width: 767px) { .u-spdn { display: none !important; } }
.u-pcdn { display: none !important; }
@media screen and (max-width: 767px) { .u-pcdn { display: block !important; } }

br.u-pcdn { display: none !important; }
@media screen and (max-width: 767px) { br.u-pcdn { display: inline !important; } }

.u-clear:before, .u-clear:after { content: ""; display: table !important; }
.u-clear:after { clear: both; }
.u-ofh { overflow: hidden !important; }
.u-w-0 { width: 0px !important; }
.u-mca { margin: 0 auto !important; }
.u-ma-0 { margin: 0px !important; }
.u-mt-0 { margin-top: 0px !important; }
.u-ml-0 { margin-left: 0px !important; }
.u-mb-0 { margin-bottom: 0px !important; }
.u-mr-0 { margin-right: 0px !important; }
.u-nmt-0 { margin-top: 0px !important; }
.u-nmb-0 { margin-bottom: 0px !important; }
.u-pa-0 { padding: 0px !important; }
.u-pt-0 { padding-top: 0px !important; }
.u-pl-0 { padding-left: 0px !important; }
.u-pb-0 { padding-bottom: 0px !important; }
.u-pr-0 { padding-right: 0px !important; }

/* SNS */

#sns-wrap li{
	float: left;
	margin:0 0px 0 0;
	overflow: hidden;
	display: inline;
}
#sns-wrap li.fb a { padding: 0 0 0 25px; }
#sns-wrap li.twitter a { padding: 0 0 0 10px; }
#sns-wrap a:before { content: "";}