@charset "utf-8";

 @font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W0);
font-weight: 100;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W1);
font-weight: 200;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W2);
font-weight: 300;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W3);
font-weight: 400;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W4);
font-weight: 500;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W5);
font-weight: 600;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W6);
font-weight: 700;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W7);
font-weight: 800;
}
@font-face {
font-family: "Hiragino Sans";
src: local(HiraginoSans-W8);
font-weight: 900;
}
@font-face {
font-family: "Hiragino Sans W9";
src: local(HiraginoSans-W9);
font-weight: 900;
}
@font-face {
font-family: metropolis;
src: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/font/Metropolis-SemiBold.woff2) format("woff2");
font-display: swap;
}
@font-face {
font-family: metropolis;
src: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/font/Metropolis-SemiBold.woff) format("woff");
font-display: swap;
}
html, body, div, span, object, iframe, article, aside, canvas, details, pre, figcaption, figure,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, input, textarea, select, button, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
color: #333;
font-family: -apple-system, BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 1.75;
letter-spacing: .0375rem;
vertical-align: baseline;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
list-style: none;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media all and (-ms-high-contrast:none) {
html, body, div, span, object, iframe, article, aside, canvas, details, pre, figcaption, figure,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, input, textarea, select, button, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {font-family: "Noto Sans JP",sans-serif;}
}
html {overflow: auto; overflow-y: scroll;}
body {position: relative; background: #fff; min-width: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, input, textarea, select, button, legend,
table, caption, tbody, tfoot, thead, tr, th, td {font-size: 15px;}
nav ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content: none;}
p {margin: 0; padding: 0;}
b {font-weight: 700;}
address {text-decoration: none; font-style: normal;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; color: #0075c2; transition: .3s ease;}
a:hover {opacity: .8; cursor: pointer;}
a:focus, *:focus {outline: none;}
img {display: block; max-width: 100%; height: auto; transition: .3s ease;}
a:hover img {cursor: pointer; zoom: 1;}
svg,
img[src$=".svg"],
img[src$=".svgz"] {display: block; width: 100%; max-width: 100%; height: auto;}
ins {background: transparent; color: #333; text-decoration: none;}
mark {background: transparent; color: #333; font-style: italic; font-weight: bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ddd; margin: 1em 0; padding: 0;}
::selection {color: #fff; background: #0075c2;}
input {vertical-align: middle; position: relative; background: transparent;}
select {appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: #fff;}
button {background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
input[type="submit"],input[type="reset"],input[type="button"],button {cursor: pointer; -webkit-appearance: button; -ms-appearance: none; *overflow: visible;}
input[type="submit"] {border: none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset;}
select::-ms-expand {display: none;}
select:focus {outline: none;}
select: {outline: none;} input::-ms-clear {visibility: hidden;}
input:focus {outline: none;} input::-ms-reveal {visibility: hidden;}
.display-name {color: #fff;}.trim {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';} .clearfix:after {content: "";　display: block;　clear: both;　visibility: hidden;}
img {transition: opacity .3s;}
img.lazyload {opacity: 1;}
img.lazyloaded {opacity: 1;} .generic {text-align: center;}
.generic .row {display: block; position: relative; overflow: hidden;}
.generic .row span {position: relative; display: block; line-height: 1.4; transform: translateY(100%);}
.generic .row .en {font-family: metropolis, sans-serif; transition: all .7s ease;}
.generic .row .en:first-letter {color: #0075c2; cursor: text;}
.generic .row .jp {letter-spacing: 1.75px; transition: all .4s .3s ease;}
.generic.active .row span {transform: translateY(0%);}
@media all and (-ms-high-contrast:none) {
.generic .row span {opacity: 0; transform: none!important;}
.generic.active .row span {opacity: 1!important;}
} .text-cover {position: relative; display: inline-block; overflow: hidden;}
.text-cover:after,.text-cover:before{content: ''; position: absolute; top: 0; left: 0; width: 130%; height: 100%; transform: translate(-130%,0); z-index: 1;}
.text-cover.active:before {background:#0075c2; animation: tc_slide 1.5s 0s ease-in-out forwards;}
.text-cover.active:after {background:#2b8ccc; animation: tc_slide 1.5s .1s ease-in-out forwards;}
@keyframes tc_slide {0% {transform: translate(-130%,0);} 100%{transform: translate(100%,0);}}
.text-cover .char {display: block; visibility: hidden; opacity: 0; transform: rotateX(-90deg);}
.text-cover.active .char {animation: tc_char .75s .75s ease-in-out forwards;}
@keyframes tc_char {0% {visibility: hidden;} 100%{visibility: visible; opacity: 1; transform:rotateX(0deg);}} .flow-up {opacity: 0; transform: translate(0,4vh);}
.flow-up.active {animation: flow-up .5s ease forwards;}
@keyframes flow-up {0% {transform: translate(0,4vh); opacity: 0;} 100%{transform: translate(0,0); opacity: 1;}}
@media all and (-ms-high-contrast:none) {
.flow-up {opacity: 0; transform: none;}
.flow-up.active {animation: flow-up-ms .5s ease forwards;}
}
@keyframes flow-up-ms {0% {opacity: 0;} 100%{opacity: 1;}} .more {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid #0075c2;
transition: all .5s ease-in-out;
opacity: 0;
}
.more.active {opacity: 1;}
.more span {font-family: metropolis, sans-serif; line-height: 1; transition: all .2s ease-in-out;}
.more:after {
position: absolute;
content: '';
display: block;
bottom: 0;
left: auto;
right: 0;
width: 0;
height: 100%;
background: #0075c2;
z-index: -1;
transition: all .3s ease;
}
.more:hover:after {left: 0; right: auto; width: 100%; transition: all .3s ease;}
.more .arrow {
position: relative;
width: 24px;
height: 5px;
transition: all .4s ease;
overflow: hidden;
}
.more .arrow:before,.more .arrow:after {position: absolute; content: ''; display: block; bottom: 0;}
.more .arrow:before {right: 0; width: 24px; height: 1px; background: #0075c2;}
.more .arrow:after {
right: -1px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 0 8px;
border-color: transparent transparent transparent #0075c2;
}
.more:hover {opacity: 1;}
.more:hover span {color: #fff;}
.more:hover .arrow:before {background: #fff; animation: slide 2s ease-in-out infinite;}
.more:hover .arrow:after {border-color: transparent transparent transparent #fff; animation: slide 2s ease-in-out infinite;}
@keyframes slide {
0% {transform: translateX(-24px);}
50% {transform: translateX(0px);}
100% {transform: translateX(24px);}
}
.more.white {border: 1px solid #fff;}
.more.white span {color: #fff;}
.more.white:after {background: #fff;}
.more.white .arrow:before {background: #fff;}
.more.white .arrow:after {border-color: transparent transparent transparent #fff;}
.more.white:hover span {color: #333;}
.more.white:hover .arrow:before {background: #0075c2;}
.more.white:hover .arrow:after {border-color: transparent transparent transparent #0075c2;} .slider-arrow {
position: absolute;
content: "";
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 50%;
transform: translate(0,-50%);
width: 50px;
height: 50px;
border: 1px solid #fff;
border-radius: 50%;
z-index: 5;
cursor: pointer;
transition: all .3s ease;
}
.slider-arrow.prev {left: 12px; background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/svg/left.svg) center center no-repeat;}
.slider-arrow.next {right: 12px; background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/svg/right.svg) center center no-repeat;}
.slider-arrow:hover {opacity: .8;} .outline {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.outline .border {content: ''; display: block; position: absolute; z-index: 10; display: block; background: #0075c2;}
.outline .border.t {top: 0; left: 0;}
.outline .border.r {top: 0; right: 0;}
.outline .border.b {bottom: 0; right: 0;}
.outline .border.l {bottom: 0; left: 0;}
.outline .border.t, .outline .border.b {width: 0; height: 5px;}
.outline .border.r, .outline .border.l {width: 5px; height: 0;}
.active .outline .border.t {transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.active .outline .border.r {transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) .3s;}
.active .outline .border.b {transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) .6s;}
.active .outline .border.l {transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) .9s;}
.active .outline .border.t, .active .outline .border.b {width: 100%;}
.active .outline .border.r, .active .outline .border.l {height: 100%;}
.active .outline {animation: lineslide .5s ease 1s forwards;}
@keyframes lineslide {0%{top: 0; left: 0;} 100%{top: 25px; left: -25px;}} #loader {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
overflow: hidden;
z-index: 9999;
animation: logo-fade 2.2s ease-in-out forwards;
}
@keyframes logo-fade {0% {opacity: 0;} 35% {opacity: 1;} 65% {opacity: 1;} 100% {visibility: hidden; opacity: 0;}}
#loader img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; text-align: center;} #loader.fold-1 {background: #0075c2; z-index: 9998; animation: loader-slide 1s 1.3s ease-in-out forwards;}
#loader.fold-2 {background: #2b8ccc; z-index: 9997; animation: loader-slide 1s 1.4s ease-in-out forwards;}
@keyframes loader-slide {0% {transform: translate(0,0);} 100%{transform: translate(100%,0);}} #transition {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #fff;
opacity: 1;
z-index: 9999;
visibility: hidden;
transition: .5s ease-in-out;
}
#transition.fadeout {visibility: hidden; opacity: 0;} .scroll {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 0;
background: #2e2e2e;
border-top: 1px solid #666;
border-left: 1px solid #666;
transition: all .4s ease;
z-index: 2000;
opacity: 1;
}
.scroll:hover {background: #3e3e3e; opacity: 1;}
.scroll.active {bottom: 0;}
.scroll .arrow:before,.scroll .arrow:after {content: ""; position: absolute; display: block;}
.scroll .arrow {position: relative; transition: all .4s ease; overflow: hidden;}
.scroll .arrow:before {width: 1px; background: #d0d0d0; top: 0;}
.scroll .arrow:after {
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0px 10px 4px;
border-color: transparent transparent #d0d0d0 transparent;
}
.scroll:hover .arrow:before,.scroll:hover .arrow:after {animation: scrollslide 2s ease-in-out infinite;}
@keyframes scrollslide {
0% {opacity: 0; transform: translateY(32px);}
50% {opacity: 1; transform: translateY(0px);}
100% {opacity: 0; transform: translateY(-32px);}
}