body {
min-width: 100%;
min-height: 100%;
overflow: hidden;
scrollbar-face-color: #0075c2;
scrollbar-track-color: #fff;
scrollbar-arrow-color: #0075c2;
scrollbar-shadow-color: #fff;
}
main {display: block; padding-top: 85px; min-height: calc(100vh - 85px);}
main#front {padding-top: 0;}
main.list-item {min-height: auto;} ::-webkit-scrollbar {width: 10px; background: #fff; z-index: 3;}
::-webkit-scrollbar-thumb {background: #0075c2;} .sp {display: none!important;} .container {display: block; max-width: 1500px; margin: 0 auto; padding: 0 80px;}
@media screen and (max-width: 1024px) {.container {padding: 0 50px;}} .flex-box {display: flex; justify-content: space-between;} #breadcrumbs {padding: 16px 0 0; border-top: 1px solid #ddd; overflow: scroll; white-space: nowrap;}
#breadcrumbs ul {display: flex;}
#breadcrumbs ul li {display: inline-block; font-size: .9em; margin-right: 1em;}
#breadcrumbs ul li a {display: inline-block;}
#breadcrumbs ul li i {font-size: 1em;} .generic {margin: 100px auto;}
.generic .row .en {font-family: metropolis,sans-serif; font-size: 3.2em;}
.generic .row .jp {font-size: 1em;}
@media screen and (max-width: 1024px) {.generic {margin: 80px auto;}} .more {padding: 1.2em 2.4em;}
.more span {font-size: 1.2em;}
.more .arrow {margin: 2px 0 0 10px;} .page-description {width: 80%; text-align: center; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 40px 20px;}
.page-description h2 {font-size: 1.7em; font-weight: 700; margin-bottom: 30px;}
.page-description p {margin-bottom: 1.5em;}
.page-description p:last-child {margin-bottom: 0;}
@media screen and (max-width: 1024px) {.page-description {width: 86%;}} header {position: fixed; width: 100%; background: transparent; padding: 25px 0; transition: all .3s ease; z-index: 1000;}
header .container {max-width: 100%; padding: 0 20px;}
header .flex-box {align-items: center;}
header .logo {width: 180px;}
header #g-navi {
position: relative;
display: flex;
align-items: center;
margin: 0 80px 0 auto;
height: 20px;
padding-right: 20px;
border-right: 1px solid #fff;
}
header #g-navi div {margin: 0 16px;}
header #g-navi a {
position: relative;
display: block;
height: 20px;
font-family: metropolis, sans-serif;
color: #fff;
line-height: 20px;
text-align: center;
opacity: 1;
}
header #g-navi .back {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #fff;
transition: all .3s ease;
}
header #g-navi a:hover ~ .back {transition: all .3s ease;}
@media screen and (max-width: 1024px) {header #g-navi {display: none;}} header.conversion_01 {
background: #fff;
padding: 25px 0;
box-shadow: -4px 0 8px rgba(0,0,0, .3);
border: none;
overflow: hidden;
transition: all .3s ease;
}
header.conversion_01 .logo .desvg path {color: #0075c2; fill: currentColor; transition: color .3s ease;}
header.conversion_01 #g-navi {border-right: 1px solid #ccc;}
header.conversion_01 #g-navi a {color: #333;}
header.conversion_01 #g-navi .back {background: #0075c2;}
header.conversion_01 #g-navi a:after {background: #0075c2;} header.conversion_02 {
background: #fff;
padding: 5px 0;
box-shadow: -4px 0 8px rgba(0,0,0, .3);
border: none;
overflow: hidden;
transition: all .3s ease;
}
header.conversion_02 > .flex-box {height: 40px;}
header.conversion_02 .logo {width: 100px;}
header.conversion_02 .logo .desvg path {color: #0075c2; fill: currentColor; transition: color .3s ease;}
header.conversion_02 #g-navi {border-right: 1px solid #ccc;}
header.conversion_02 #g-navi a {color: #333;}
header.conversion_02 #g-navi .back {background: #0075c2;}
header.conversion_02 #g-navi a:after {background: #0075c2;}
header #nav-toggle {
display: block;
position: fixed;
top: 30px;
right: 36px;
width: 28px;
height: 28px;
z-index: 2001;
transition: top .3s ease;
}
header #nav-toggle span {
position: absolute;
display: block;
width: 28px;
height: 2px;
margin: 0 auto;
background: #fff;
transition: all .3s;
}
header #nav-toggle span:nth-child(1) {top: 6px;}
header #nav-toggle span:nth-child(2) {top: 12px; opacity: 1;}
header #nav-toggle span:nth-child(3) {top: 18px;}
header #nav-toggle:hover {cursor: pointer;}
header #nav-toggle:hover span:nth-child(1) {top: 4px;}
header #nav-toggle:hover span:nth-child(3) {top: 20px;}
.open header #nav-toggle {right: 52px;}
.open header #nav-toggle span {background: #fff!important;}
.open header #nav-toggle span:nth-child(1) {transform: rotate(45deg); top: 13px;}
.open header #nav-toggle span:nth-child(2) {opacity: 0;}
.open header #nav-toggle span:nth-child(3) {transform: rotate(-45deg); top: 13px;}
@media screen and (max-width: 1024px) {.open header #nav-toggle {right: 36px;}}
header.conversion_01 #nav-toggle span {background: #0075c2;}
header.conversion_02 #nav-toggle {top: 12px;}
header.conversion_02 #nav-toggle span {background: #0075c2;}
header.conversion_02 #nav-toggle span:nth-child(1) {top: 6px;}
header.conversion_02 #nav-toggle span:nth-child(2) {top: 12px;}
header.conversion_02 #nav-toggle span:nth-child(3) {top: 18px;}
header.conversion_02 #nav-toggle:hover span:nth-child(1) {top: 4px;}
header.conversion_02 #nav-toggle:hover span:nth-child(3) {top: 20px;}
.open header.conversion_02 #nav-toggle {top: 30px;}
.open header.conversion_02 #nav-toggle span:nth-child(1),
.open header.conversion_02 #nav-toggle span:nth-child(3) {top: 13px;} #full-navi {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #0075c2;
opacity: 0;
visibility: hidden;
transition: all .5s .3s ease;
}
#full-navi .container {
width: 90vw;
height: calc(100vh - 50px);
padding: 25px 5vw;
opacity: 0;
visibility: hidden;
transition: all .5s ease;
}
#full-navi .logo {display: inline-block; position: absolute; top: 25px; left: 20px; width: 180px; z-index: 2001;}
#full-navi .main {align-items: center; width: 100%; height: calc(100% - 34px);}
#full-navi nav {display: flex; flex-direction: column;  justify-content: center; align-items: center; width: calc(50% - 45px);}
#full-navi nav ul {display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: auto;}
#full-navi nav ul li {display: block; margin: 18px 0;}
#full-navi nav ul li .generic, #full-navi .works h2.generic {display: block; position: relative; overflow: hidden; margin: 0;}
#full-navi nav ul li .generic .row, #full-navi .works h2.generic .row {transform: translateY(100%); transition: all .5s .1s ease;}
#full-navi nav ul li .generic .row .en {font-size: 2.3em; color: #fff; line-height: 1;}
#full-navi nav ul li .generic .row .en:first-letter {color: #fff;}
.open #full-navi {opacity: 1; z-index: 2000; visibility: visible; transition: all .5s ease;}
.open #full-navi .container {opacity: 1; z-index: 2000; visibility: visible; transition: all .5s .3s ease;}
.open #full-navi nav ul li .generic .row, .open #full-navi .works h2.generic .row {transform: translateY(0%);}
@media all and (-ms-high-contrast:none) {#full-navi nav ul li, #full-navi .works h2 {opacity: 1;}}
#full-navi nav ul li a:after {
position: absolute;
content: '';
display: block;
bottom: 0;
left: auto;
right: 0;
width: 0;
height: 2px;
background: #fff;
transition: all .3s ease;
}
#full-navi nav ul li a:hover {opacity: 1;}
#full-navi nav ul li a:hover:after {left: 0; right: auto; width: 100%; transition: all .3s ease;}
#full-navi .works {width: 50%;}
#full-navi .works a {visibility: hidden; transition: visibility 0s;}
#full-navi .works .slider-head {width: 40vw; max-width: 640px; align-items: center; margin-bottom: 10px;}
#full-navi .works h2.generic .row .en {font-size: 1.75em; color: #fff; line-height: 1; margin: 3px 0 0;}
#full-navi .works h2.generic .row .en:first-letter {color: #fff;}
#full-navi .works .more {padding: 9px 20px 7px;}
#full-navi .works .more span {font-size: .9em;}
#full-navi .works .more .arrow {margin: -1px 0 0 10px;}
#full-navi .works #slider {position: relative; width: 40vw; max-width: 640px; visibility: hidden; opacity: 0; transition: all .3s ease;}
#full-navi .works #slider ul {overflow: hidden;}
#full-navi .works #slider li {float: left;}
#full-navi .works #slider a {display: block; opacity: 1; transition: all .3s ease;}
#full-navi .works #slider .img {width: 40vw; height: 25vw; max-width: 640px; max-height: 400px;}
#full-navi .works #slider .img img {opacity: 1;}
#full-navi .works #slider .cat {display: inline-block; color: #fff; font-size: 11px; line-height: 1; border: 1px solid #fff; margin: 20px 0 8px; padding: 4px 12px 3px;}
#full-navi .works #slider h3 {font-size: 1.2em; color: #fff; font-weight: 700;}
#slider .slider-arrow {position: absolute; top: calc(50% - 32px); transform: translate(0,-50%); width: 32px; height: 32px; border: none;}
#slider .slider-arrow.prev {left: -45px; background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/svg/left.svg) center center/32px 32px no-repeat;}
#slider .slider-arrow.next {right: -45px; background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/svg/right.svg) center center/32px 32px no-repeat;}
.open #full-navi .works a {visibility: visible;}
.open #full-navi .works #slider {visibility: visible; opacity: 1;}
#full-navi .sub {width: 100%; height: 34px; justify-content: space-between; align-items: flex-end;}
#full-navi .sub p, #full-navi .sub a {font-size: .8em; color: #fff; line-height: 1!important;}
#full-navi .sub a {position: relative;}
#full-navi .sub a:after {
position: absolute;
content: '';
display: block;
bottom: -1px;
left: auto;
right: 0;
width: 0;
height: 1px;
background: #fff;
transition: all .3s ease;
}
#full-navi .sub a {margin-left: 16px;}
#full-navi .sub a:hover {opacity: 1;} 
#full-navi .sub a:hover:after {left: 0; right: auto; width: 100%; transition: all .3s ease;}
#full-navi .sub p span {font-size: inherit;}
#full-navi .sub .left .company {font-weight: 700; margin-bottom: 12px;}
#full-navi .sub .left a i {color: #fff; font-size: .9em; margin-left: 8px;}
#full-navi .sub .right p {margin: 0 16px;}
@media screen and (max-width: 768px) {
#full-navi .main {height: 93%;}
#full-navi .sub {display: block; height: 7%;}
#full-navi .sub .left {margin-bottom: 16px;}
#full-navi .sub .left div {justify-content: flex-start;}
#full-navi .sub .right {justify-content: flex-start;}
#full-navi .sub .right p,#full-navi .sub .right a {margin: 0 16px 0 0;}
}  #front .top {
position: relative;
width: 100vw;
height: 100vh;
background: #999;
overflow: hidden;
transition: all 1s ease;
z-index: 2;
}
#front .top img {width: 100vw; height: 100vh;}
#front .top .fg {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
#front .top .fg .text-cover.active.st:before {animation: tc_slide 1s 2.3s ease forwards;}
#front .top .fg .text-cover.active.nd:before {animation: tc_slide 1s 2.8s ease forwards;}
#front .top .fg .text-cover.active.rd:before {animation: tc_slide 1s 3.3s ease forwards;}
#front .top .fg .text-cover.active.st:after {animation: tc_slide 1s 2.4s ease forwards;}
#front .top .fg .text-cover.active.nd:after {animation: tc_slide 1s 2.9s ease forwards;}
#front .top .fg .text-cover.active.rd:after {animation: tc_slide 1s 3.3s ease forwards;}
#front .top .fg .text-cover .char {
font-family: metropolis, sans-serif;
color: #fff;
font-size: 3em;
line-height: 1;
text-align: center;
margin: 10px 0;
}
#front .top .fg .text-cover.active.st .char {animation: tc_char 1s 2.8s ease forwards;}
#front .top .fg .text-cover.active.nd .char {animation: tc_char 1s 3.3s ease forwards;}
#front .top .fg .text-cover.active.rd .char {animation: tc_char 1s 3.8s ease forwards;}
#front .top .top_scroll {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
bottom: 40px;
left: 50%;
transform: translate(-50%,0);
opacity: 0;
animation: scroll-move .7s 4.3s ease forwards;
}
@keyframes scroll-move {0% {transform: translate(-50%,-15px); opacity: 0;} 100% {transform: translate(-50%,0); opacity: 1;}}
#front .top .top_scroll span {color: #fff; font-size: .8em; line-height: 1;}
#front .top .top_scroll .button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 54px;
height: 54px;
margin-top: 12px;
border: 1px solid #fff;
border-radius: 50%;
opacity: 1;
transition: all .3s ease;
}
#front .top .top_scroll .button:before,#front .top .top_scroll .button:after {
position: absolute;
content: "";
top: -27px;
left: -27px;
width: 108px;
height: 108px;
border-radius: 50%;
box-shadow: none;
}
#front .top .top_scroll .button:hover:before {animation: ripple 1.5s ease infinite;}
#front .top .top_scroll .button:hover:after {animation: ripple 1.5s ease .3s infinite;}
@keyframes ripple {
0%{opacity:1;transform:scale(1);box-shadow: 0 0 0 1px rgba(255,255,255,0);}
100%{opacity:0;transform:scale(2);box-shadow: 0 0 0 1px rgba(255,255,255,1);}
}
#front .top .top_scroll .button img {
width: 16px;
height: 16px;
transform: translateY(-24px);
opacity: 0;
animation: bound 2s ease-in-out infinite;
}
@keyframes bound {
0% {transform: translateY(-24px); opacity: 0;}
50% {transform: translateY(0px); opacity: 1;}
100% {transform: translateY(24px); opacity: 0;}
} #front .about {margin-top: -85px; padding-top: 85px;}
#front .about .flex-box {justify-content: center; align-items: center; width: 100%; height: 35vw; max-height: 700px; margin-bottom: -20px;}
#front .about .col_img {display: flex; align-items: center; height: 35vw; max-height: 700px;}
#front .about .col_img div {position: relative; width: 13vw; max-width: 250px; height: 30vw; max-height: 600px; overflow: hidden;}
#front .about .col_img div.img01 {margin: 2.5vw -2vw 0 0; z-index: 1;}
#front .about .col_img div.img02 {margin: -7.5vw -2vw 0 0; z-index: 2;}
#front .about .col_img div.img03 {margin: -2.5vw -2vw 0 0; z-index: 3;}
#front .about .col_img div img {width: 13vw; max-width: 250px; height: 30vw; max-height: 600px; transform: translate(0);}
#front .about .col_text {margin: 0 5% 0 0;}
#front .about .col_text h3 {
display: block;
font-size: 2.4em;
font-weight: 700;
line-height: 1.5;
letter-spacing: 4.2px;
margin-bottom: 30px;
}
#front .about .col_text h3:first-letter {color: #0075c2;}
#front .about .col_text p {line-height: 2; margin-bottom: 40px;}
@media screen and (max-width: 768px) {
#front .about .flex-box {display: block; width: 100%; height: auto; max-height: auto; margin: 0 auto;}
#front .about .col_img {flex-direction: column; justify-content: center; width: 100%; max-width: 100%; height: auto; max-height: auto; margin-bottom: -20px;}
#front .about .col_img div {width: 80%; max-width: 80%; min-width: 80%; height: 120px; max-height: auto;}
#front .about .col_img div.img01 {margin: 0 0 0 15%; z-index: 3;}
#front .about .col_img div.img02 {margin: -40px 0 0 35%; z-index: 2;}
#front .about .col_img div.img03 {margin: -40px 0 0 0; z-index: 1;}
#front .about .col_img div img {width: 80%; max-width: 80%; min-width: 80%; height: 100%;}
#front .about .col_text {margin: 0; text-align: center;}
#front .about .col_text h3 {
display: block;
font-size: 2.2em;
letter-spacing: 3.2px;
margin-bottom: 25px;
}
#front .about .col_text .more {margin: 0 auto 60px;}
} #front .services {text-align: center;}
#front .services > .more {margin: 60px auto 0;}
#front .services .flex-box {position: relative; flex-wrap: wrap; box-shadow: 0 0 0 2px #eee;}
#front .services .flex-box .more {position: relative; display: flex; flex-direction: column; width: calc(100% / 3); height: 25vw; margin: 0; padding: 0; border: none; box-shadow: 0 0 0 1px #eee; opacity: 1; z-index: 1;}
#front .services .flex-box .more:hover h3.generic .row .en:first-letter {color: inherit; transition: color .2s ease-in-out;}
#front .services .flex-box .more:after {display: none;}
#front .services .flex-box .more:hover:after {transition: all .5s ease;}
#front .services .flex-box .desvg {width: 10vw; max-width: 140px; min-width: 100px; margin: 40px 0 20px;}
#front .services .flex-box .desvg path {color: #0075c2; fill: currentColor; transition: color .2s ease-in-out;}
#front .services .flex-box .more:hover .desvg path {color: #fff;}
#front .services .flex-box .arrow {margin: 20px auto 30px;}
#front .services .flex-box h3.generic {margin: 0; opacity: 1;}
#front .services .flex-box h3.generic span {font-size: inherit; line-height: 1.3; transition: color .2s ease-in-out;}
#front .services .flex-box h3.generic .row .en {font-size: 2.25em;}
#front .services .flex-box h3.generic .row .jp {font-family: -apple-system, BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; font-size: .8em;}
#front .services .flex-box .back {
position: absolute;
top: 0;
left: 0;
transform: translate(0,0);
width: calc(100% / 3);
height: 25vw;
background: #0075c2;
transition: .3s ease;
opacity: 0;
z-index: -1;
}
#front .services .flex-box .more:hover ~ .back {opacity: 1;}
@media screen and (max-width: 768px) {
#front .services .flex-box .more {width: calc(100% / 2); height: 37.5vw;}
#front .services .flex-box .back {width: calc(100% / 2); height: 37.5vw;}
#front .services .flex-box h3.generic .row .en {font-size: 2em;}
}
@media screen and (min-width: 1920px) {
#front .services .container {max-width: 100%;}
#front .services .flex-box .more {width: calc(100% / 6); height: 12.5vw;}
#front .services .flex-box .back {width: calc(100% / 6); height: 12.5vw;}
} #front .works {text-align: center;}
#front .works .more {margin: 60px auto 0;}
.works-list {justify-content: flex-start; flex-wrap: wrap;}
.works-list > a {
display: block;
position: relative;
width: 25%;
height: 20vw;
margin: 0;
overflow: hidden;
}
.works-list a img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'; transition: all .3s ease;}
.works-list a .hover {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: auto;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .5);
transition: all .5s ease;
opacity: 0;
visibility: hidden;
}
.works-list a .hover h3 {
font-size: 1.3em;
color: #fff;
font-weight: 700;
padding: 0 25px;
}
.works-list a .hover .vd {
display: flex;
align-items: center;
margin-top: 10px;
padding: 11px 20px 9px;
border: 1px solid #fff;
}
.works-list a .hover .vd span {
position: relative;
font-family: metropolis, sans-serif;
color: #fff;
font-size: .9em;
line-height: 1;
}
.works-list a .hover .vd .arrow {
position: relative;
width: 16px;
height: 1px;
background: #fff;
transition: all .4s ease;
margin: 1px 10px 0 0;
}
.works-list a .hover .vd .arrow:after {
position: absolute;
content: '';
display: block;
bottom: 0;
right: -1px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 0 8px;
border-color: transparent transparent transparent #fff;
}
.works-list a:hover {opacity: 1;}
.works-list a:hover img {opacity: 1; transform: scale(1.1);}
.works-list a:hover .hover {left: 0; right: auto; width: 100%; opacity: 1; visibility: visible;}
.works-list a:hover .hover .vd .arrow {width: 36px;}
@media screen and (max-width: 768px) {
.works-list > a {width: calc(100% / 3); height: 30vw;}
.works-list a .hover h3 {font-size: 1.2em;}
}
@media screen and (min-width: 1920px) {
.works-list > a {width: calc(100% / 6); height: 15vw;}
.works-list a .hover h3 {font-size: 1.2em;}
} #front .news {text-align: center;}
#front .news > div {padding-top: 48px; padding-bottom: 48px; background: #eee;}
#front .news div a {
width: 100%;
justify-content: flex-start;
align-items: center;
background: #fff;
margin-bottom: 6px;
}
#front .news div a:last-child {margin-bottom: 0;}
#front .news div a:hover {opacity: 1;}
#front .news div a h3,#front .news div a .date {
font-size: 1em;
line-height: 1;
padding: 24px 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#front .news div a .date {color: #aaa; text-align:left; border-right: 2px solid #eee;}
#front .news div a:hover h3,#front .news div a:hover .date {opacity: .7;}
#front .news .more {margin: 60px auto 0;}
.news-list {flex-wrap: wrap; justify-content: flex-start;}
.news-list > a {
display: block;
position: relative;
width: 25%;
height: 20vw;
margin: 0;
overflow: hidden;
transition: all .4s ease;
}
.news-list a img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'; transition: all .3s ease;}
.news-list a .fliter {
position: absolute;
display: flex;
flex-direction: column;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0, 0) 50%,rgba(0,0,0, .2) 70%,rgba(0,0,0, .6) 90%,rgba(0,0,0, .8) 100%);
opacity: .5;
transition: all .4s ease;
}
.news-list a .text {
position: absolute;
display: flex;
flex-direction: column;
left: 0;
bottom: 0;
width: calc(100% - 2em);
padding: 1em;
transform: translateY(2.5em);
transition: all .3s ease;
}
.news-list a .text h3,
.news-list a .text .date,
.news-list a .text .cont {
color: #fff;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-list a .text h3 {font-size: 1.1em; font-weight: 700;}
.news-list a .text .date {font-family: metropolis, sans-serif; font-size: .8em;}
.news-list a .text .cont {height: 1.75em;}
.news-list a:hover {opacity: 1;}
.news-list a:hover .text {transform:translateY(0);}
.news-list a:hover img {opacity: 1; transform: scale(1.1);}
.news-list a:hover .fliter {opacity: 1;}
@media screen and (max-width: 768px) {.news-list > a {width: calc(100% / 3); height: 30vw;}}
@media screen and (min-width: 1920px) {.news-list > a {width: calc(100% / 6); height: 15vw;}} #front .member .flex-box {flex-wrap: wrap; justify-content: flex-start; width: 1100px; max-width: auto; padding: 0;}
#front .member .flip-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: stretch;
position: relative;
width: 160px;
margin: 0 10px 10px;
perspective: 1000;
}
#front .member .flip-box div {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
background: #0075c2;
border-radius: 10px;
transition: all .75s ease;
transform-style: preserve-3d;
}
#front .member .flip-box .front {box-shadow: -5px 5px 5px 0 rgba(0,0,0, .1); z-index: 10;}
#front .member .flip-box .back {position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; box-shadow: none; transform: rotateY(-180deg);}
#front .member .flip-box:hover {cursor: pointer;}
#front .member .flip-box:hover .front {transform: rotateY(180deg); box-shadow: none; z-index: -1;}
#front .member .flip-box:hover .back {transform: rotateY(0deg); box-shadow: -5px 5px 5px 0 rgba(0,0,0, .1); z-index: 10;}
#front .member .flip-box div img {width: 140px; height: 140px; background: #fff; border-radius: 7px; margin: 0 auto;}
#front .member .flip-box span {display: block; color: #fff; line-height: 1; transform: translateZ(50px);}
#front .member .flip-box span.position {font-family: metropolis, sans-serif; font-size: .95em; padding: 14px 0 10px 10px;}
#front .member .flip-box span.name {font-size: 1..1em; text-align: right; padding: 16px 10px 12px 0;}
@media screen and (min-width: 1580px) {
#front .member .flex-box {width: auto; max-width: 1500px;}
#front .member .flip-box {width: calc((1500px / 6) - 40px); margin: 0 20px 20px;}
#front .member .flip-box div img {width: calc((1500px / 6) - 80px); height: calc((1500px / 6) - 80px);}
#front .member .flip-box span.position {font-size: 1.05em; padding: 14px 0 10px 20px;}
#front .member .flip-box span.name {font-size: 1.2em; padding: 16px 20px 12px 0;}
}
@media screen and (max-width: 1024px) {#front .member .flex-box {width: auto; padding: 0 50px;}}
@media screen and (max-width: 768px) {#front .member .flex-box {width: 560px;}} #front .company {padding-bottom: 100px;}
#front .company .flex-box {justify-content: center; align-items: flex-start;}
#front .company .col_text {
position: relative;
width: 50vw;
min-width: 540px;
max-width: 580px;
margin-top: 100px;
padding: 45px;
background: #fff;
border: 1px solid #0075c2;
box-shadow: 20px 20px 0 0px #0075c2;
z-index: 5;
}
#front .company .col_text table {width: 100%;}
#front .company .col_text table tr {border-bottom: 1px solid #e4e4e4;}
#front .company .col_text table tr th,#front .company .col_text table tr td {padding: 8px; text-align: left;}
#front .company .col_text table tr td i {color: #0075c2; margin-left: 8px;}
#front .company .col_img {
position: relative;
max-width: 680px;
min-width: 480px;
margin-left: -60px;
z-index: 1;
}
@media screen and (max-width: 1024px) {
#front .company .flex-box {justify-content: center; align-items: center;}
#front .company .col_text {width: 100%; margin: 0 auto;}
#front .company .col_img {display: none;}
} #googlemap {height: 40vw; max-height: 700px; position: relative; overflow: hidden;}
#googlemap iframe,#googlemap object,#googlemap embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#googlemap img {max-height: none;} footer {background: #2e2e2e; margin-top: auto;}
footer a:hover {color: #0075c2!important; opacity: 1;}
footer .contact {flex-direction: column; justify-content: center; align-items: center; padding: 72px 0 0;}
footer .contact h2 {margin: 0 0 60px}
footer .contact h2 span {color: #fff;}
footer .contact p {color: #d0d0d0; text-align: center; margin-bottom: 20px;}
footer .contact a.tel {display: block; margin-bottom: 20px;}
footer .contact a.tel span,footer .contact a.tel i {color: #d0d0d0; font-size: 1.8em; line-height: 1.5; transition: all .3s ease;}
footer .contact a.tel span {font-weight: 700;}
footer .contact a.tel i {margin-right: 8px;}
footer .contact a.tel:hover span,footer .contact a.tel:hover i {color: #0075c2;}
footer .contact .flex-box {justify-content: center; margin: 20px auto 50px;}
footer .contact .flex-box a {
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
height: 120px;
border: 1px solid #666;
border-radius: 5px;
margin-right: 30px;
}
footer .contact .flex-box a:last-child {margin-right: 0;}
footer .contact .flex-box a i {color: #0075c2; font-size: 3em; margin: auto;}
footer .contact .flex-box a span {margin-bottom: .8em; color: #d0d0d0; line-height: 1; transition: all .3s ease;}
footer .contact .flex-box a:hover {border: 1px solid #0075c2;}
footer .contact .flex-box a:hover span {color: #0075c2;}
footer address {display: block; align-items: center;}
footer address .logo {display: block; width: 180px; margin: 0 auto 16px;}
footer address .logo img {width: 180px;}
footer address a,footer address p {color: #d0d0d0; text-align: center;}
footer .bnr {justify-content: center; margin-top: 40px;}
footer .copyright {
justify-content: space-between;
align-items: center;
height: 64px;
margin-top: 40px;
padding-right: 64px;
border-top: 1px solid #666;
}
footer .copyright span {color: #d0d0d0; font-size: .8em; text-align: center; padding-left: 20px;}
footer .copyright ul {margin: 0 20px 0 auto;}
footer .copyright ul li {display: inline-block; padding: 0 8px; border-right: 1px solid #666; line-height: 1;}
footer .copyright ul li:last-child {border: none;}
footer .copyright ul li a {color: #d0d0d0; font-size: .8em; line-height: 1;}  .page-visual .generic {margin: 200px auto;}
.page-visual .generic .row span {line-height: 1.3;}
.page-visual .generic .row .en {font-size: 3.8em;}
.page-visual .generic .row .jp {font-size: 1.05em;}
@media screen and (max-width: 1024px) {
.page-visual .generic {margin: 150px auto;}
.page-visual .generic .row .en {font-size: 3.4em;}
} h1.single {position: relative; font-size: 2.2em; font-weight: 700; line-height: 1.5; margin-bottom: 30px; padding: 0 5px 80px;}
h1.single:first-letter {color: #0075c2;}
h1.single:after {content: ""; display: block; position: absolute; bottom: -4px; left: 0; width: 150px; height: 4px; background: #0075c2;}
#state {padding: 105px 100px 0;}
#state .flex-box {justify-content: flex-start; align-items: center;}
#state span,#state ul li {font-size: .85em;}
#state span {margin-right: 16px;}
#state .tag {margin-top: 6px;}
#state ul {flex-wrap: wrap;}
#state ul li {margin-right: 10px;}
#state i {font-size: 12px; margin-right: 6px;}
#toc {position: relative; margin: 0; padding: 0 50px 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
#toc .contents {position: relative; top: -0.4375em; display: inline-block; font-family: metropolis, sans-serif; font-size: 1.75em; font-weight: 700; line-height: 1; background: #fff; padding: 0 8px;}
#toc .contents:first-letter {color: #0075c2;}
#toc ol {list-style-type: decimal;}
#toc > ol {margin: 20px 0!important;}
#toc ol li {margin: 0!important;}
#toc ol ol {list-style: disc; margin: 0 0 0 1.5em!important;}
#toc > ol > ol {margin-bottom: 16px!important;}
#toc ol li a:after {display: none;}
#single {margin: 60px auto; padding: 0 100px;}
#single .eyecatch {width: 90%; height: 70vh; margin: 0 auto 80px;}
#single .eyecatch img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';}
#single h2 {
position: relative;
font-size: 1.9em;
font-weight: 700;
line-height: 1.5;
margin: 60px 0 30px;
padding: 8px 5px;
border-bottom: 3px solid #ebecec;
}
#single h2:before {content: ""; display: block; position: absolute; bottom: -3px; left: 0; width: 100px; height: 3px; background: #0075c2;}
#single h3 {
position: relative;
font-size: 1.6em;
font-weight: 700;
line-height: 1.5;
margin: 50px 0 30px;
padding: 9px 20px 8px;
background: #f3f3f3;
border-radius: 5px;
}
#single h3:before {content: ""; display: block; position: absolute; bottom: -12px; left: 25px; width: 0; height: 0; border-style: solid; border-width: 12px 15px 0 15px; border-color: #f3f3f3 transparent transparent transparent;}
#single h4 {
font-size: 1.3em;
font-weight: 700;
line-height: 1.5;
margin: 40px 0 34px;
padding-left: 10px;
border-left: 5px solid #0075c2;
}
#single h5 {
position: relative;
font-size: 1.2em;
font-weight: 700;
line-height: 1.5;
margin: 30px 0;
padding-left: 1.2em;
}
#single h5:before {content: ""; display: block; position: absolute; top: 4px; left: 0; width: .75em; height: .75em; background: #0075c2;}
#single h6 {font-size: 1.1em; font-weight: 700; margin: 30px 0;}
#single img {margin: 30px 20px 30px 0;}
#single p {word-break: break-all; line-height: 2; margin: 30px 0;}
#single a * {color: #0075c2;}
#single a:after {font-family: "Font Awesome 5 Free"; content: "\f35d"; font-weight: 900; margin-left: 8px; color: #0075c2;}
#single em {font-style: italic;}
#single strong {font-weight: 700; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ffff7f 50%, #ffff7f 100%);}
#single blockquote {position: relative; margin: 30px 0; padding: 15px 30px; border: 1px solid #ddd;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 30px 0;}
#single ul, #single ol {margin: 30px 0;}
#single ul li, #single ol li {margin-left: 1.5em; line-height: 2.5;}
#single ul {list-style-type: disc;}
#single ul li {list-style-type: inherit;}
#single ol {list-style-type: decimal;}
#single ol li {list-style-type: inherit;}
#single ul ul, #single ol ol, #single ul ol, #single ol ul {margin: 0 0 0 1.75em;}
#single table {border-collapse: collapse; text-align: left; line-height: 1.5; margin: 30px 0; border: 1px solid #ddd;}
#single table thead th, #single table thead td,
#single table tfoot th, #single table tfoot td {background: #f3f3f3; font-weight: 700;}
#single table thead th, #single table thead td {padding: 0.75rem 0.5rem;}
#single table th, #single table td {padding: 0.5rem; border: 1px solid #ddd;}
#single table th {background: #fafafa;}
#single .aligncenter {display: block; margin: 0 auto;}
#single .alignright {float: right;}
#single .alignleft {float: left;} #single a.download {display: inline-block; background: #0075c2!important; padding: 18px 12px; border: 1px solid #0065bc; border-radius: 5px;}
#single a.download:after {display: none;}
#single a.download p, #single a.download small {color: #fff!important; line-height: 1!important; text-align: center!important;}
#single a.download p {font-size: 1.15em; font-weight: 700; margin: 0 0 12px;}
#single a.download span {display: flex; padding: 0!important;}
#single a.download small {font-size: .85em; margin: 0 6px;}
#postlink a {
position: fixed;
content: "";
display: block;
top: 50%;
transform: translateY(-50%);
width: 58px;
height: 50px;
z-index: 2;
cursor: pointer;
transition: all .3s ease;
}
#postlink a:before {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 5px;
background: #0075c2;
}
#postlink a.prev {left: -8px;}
#postlink a.next {right: -8px;}
#postlink a.prev:before {left: 0;}
#postlink a.next:before {right: 0;}
#postlink a:hover {opacity: 1;}
#postlink a.prev:hover {left: 0;}
#postlink a.next:hover {right: 0;}
#postlink span {position: absolute; top: 50%; transform: translateY(-50%); font-family: metropolis, sans-serif; font-size: 1.1em; color: #0075c2; line-height: 1; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#postlink a.prev span {left: 34px;}
#postlink a.next span {right: 36px;}
@media screen and (max-width: 1024px) {
#postlink a {width: 36px;}
#postlink a:before {width: 16px;}
#postlink a.prev {left: -6px;}
#postlink a.next {right: -6px;}
}
#more-posts {text-align: center;}
#more-posts .generic {margin: 80px auto;}
#more-posts .generic .en {font-size: 2.8em;}
#more-posts .more {margin: 90px auto 100px;}
#more-posts .news-list a,#more-posts .works-list a {height: 30vh;}
@media screen and (max-width: 1024px) {
#state {padding: 105px 50px 0;}
#single {padding: 0 50px;}
#single .eyecatch {width: 100%; height: 50vw; margin: 0 auto 80px;}
#more-posts .news-list a,#more-posts .works-list a {width: 50%;}
}
@media screen and (max-width: 768px) {#more-posts .news-list a,#more-posts .works-list a {width: 50%; height: 25vh;}} #state-works {padding: 105px 100px 0;}
#state-works h1 {margin-bottom: 20px;}
#state-works .flex-box {justify-content: flex-start; align-items: center;}
#state-works .date {font-size: .85em; line-height: 1; margin: 1px 16px 0 0;}
#state-works .cat {display: inline-block; color: #0075c2; font-size: 11px; line-height: 1; border: 1px solid #0075c2; margin: 0; padding: 4px 12px 3px;}
#state-works .more {margin: 0 0 0 auto; padding: 12px 30px;}
#state-works .more span {color: #0075c2; font-size: 1em;}
#state-works .more i {margin: 1px 0 0 10px; color: #0075c2;}
#state-works .more:hover span,#state-works .more:hover i {color: #fff;}
#single-works {margin: 60px auto; padding: 0 100px;}
#single-works .main_img,#single-works .youtube {display: block; width: 980px; height: 560px; margin: 0 auto; box-shadow: 20px 20px 0 0px #0075c2;}
#single-works .youtube iframe {width: 100%; height: 100%;}
#single-works.webmode .top_img {position: relative; width: 980px; height: 674px; margin: 0 auto;}
#single-works.webmode .top_img .main_img {
position: absolute;
bottom: 0;
left: 0;
width: 842px;
height: 675px;
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/pc_flame.png);
box-shadow: none;
z-index: 1;
}
#single-works.webmode .top_img .main_img img {
position: absolute;
top: 36px;
left: 37px;
width: 768px;
height: 432px;
}
#single-works.webmode .top_img .sp_main_img {
position: absolute;
bottom: 0;
right: 0;
width: 156px;
height: 325px;
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/sp_flame.png);
box-shadow: none;
z-index: 2;
}
#single-works.webmode .top_img .sp_main_img img {
position: absolute;
top: 51px;
left: 15px;
width: 128px;
height: 226px;
}
#single-works table {width: 880px; margin: 140px auto 100px;}
#single-works table tr th {width: 20%; font-family: metropolis, sans-serif; font-size: 1.05em; text-align: left; padding: 12px 0;}
#single-works table tr td {width: 80%; font-size: 1.05em; text-align: left; padding: 12px 0;}
#single-works .overview {width: 940px; margin: 0 auto; font-size: 1.05em; line-height: 2.5;}
#single-works .big_img {display: flex; justify-content: center; width: 980px; margin: 140px auto;}
#single-works .big_img a {width: 300px; height: 285px; margin: 0 30px; box-shadow: 5px 5px 20px rgba(0,0,0, .2);}
#single-works .big_img img {width: 300px; height: 285px;}
#single-works .small_img {display: flex; justify-content: center; width: 980px; margin: 120px auto 240px;}
#single-works .small_img a {width: 180px; margin: 0 30px; box-shadow: 5px 5px 20px rgba(0,0,0, .2);}
#single-works .small_img img {width: 180px; margin: 0 auto;}
@media screen and (max-width: 1024px) {
#state-works {padding: 105px 50px 0;}
#single-works {margin: 60px auto; padding: 0 50px;}
#single-works .main_img,#single-works .youtube {width: auto; height: auto;}
#single-works.webmode .top_img {width: calc(100vw - 100px); height: calc((100vw - 100px) * .80166);}
#single-works.webmode .top_img .main_img {
width: calc(100vw - 100px);
height: calc((100vw - 100px) * .80166);
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/pc_flame.png) 0/100%;
}
#single-works.webmode .top_img .main_img img {
top: calc((100vw - 100px) * .04576);
left: calc((100vw - 100px) * .04394);
width: calc((100vw - 100px) * .91211);
height: calc((100vw - 100px) * .51306);
}
#single-works.webmode .top_img .sp_main_img {
width: calc((100vw - 100px) * .18527);
height: calc((100vw - 100px) * .38599);
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/sp_flame.png) 0/100%;
}
#single-works.webmode .top_img .sp_main_img img {
top: calc((100vw - 100px) * .06057);
left: calc((100vw - 100px) * .01781);
width: calc((100vw - 100px) * .15202);
height: calc((100vw - 100px) * .26841);
}
#single-works table {width: 90%;}
#single-works .overview {width: 96%;}
#single-works .big_img {width: 100%;}
#single-works .big_img a {width: calc(88% / 3); height: calc(100vw / 3); margin: 0 3%;}
#single-works .small_img {width: 100%;  margin: 120px auto 180px;}
#single-works .small_img a {width: calc(64% / 3); height: calc(100vw / 3); margin: 0 3%;}
} #state-products {padding: 105px 100px 0;}
#state-products .eyecatch {position: relative; max-width: 980px; max-height: 600px; margin-bottom: -30px; box-shadow: 5px 5px 20px rgba(0,0,0, .2); z-index: 1;}
#state-products .eyecatch img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'; transform: none;}
#state-products .state {position: relative; width: 80%; background: #0075c2; margin-left: auto; padding: 16px 28px; z-index: 2;}
#state-products .state h1 {font-size: 1.8em; color: #fff; font-weight: 700; line-height: 1.5; margin-bottom: 10px;}
#state-products .state .flex-box {justify-content: flex-start; align-items: center;}
#state-products .state span {display: inline-block; font-size: .85em; color: #fff; margin-right: 16px;}
#state-products .state span:last-child {margin-right: 0;}
#state-products .state .cat {color: #fff; font-size: 11px; line-height: 1; border: 1px solid #fff; margin: 0 auto 0 0; padding: 4px 12px 3px;}
@media screen and (max-width: 1024px) {
#state-products {padding: 105px 50px 0;}
#state-products .eyecatch {max-width: auto; max-height: auto;}
}  #aboutus .img img {transform: none;}
#aboutus h2.generic.left,#aboutus .img.left {margin-right: auto;}
#aboutus h2.generic.right,#aboutus .img.right {margin-left: auto;}
#aboutus h2.generic {position: relative; width: 60%; background: #0075c2; margin: 0; padding: 18px 36px; text-align: right;}
#aboutus h2.generic.right {text-align: left;}
#aboutus h2 .row .en, #aboutus h2 .row .en:first-letter,#aboutus h2 .row .jp {color: #fff; line-height: 1.2;}
#aboutus h2 .row .en {font-size: 3em;}
#aboutus h2 .row .jp {font-size: 1em;}
#aboutus #message h2.generic {margin-top: -60px; z-index: 4;}
#aboutus #message .img {width: 90%; height: 550px;}
#aboutus #message .cont {position: relative; background: #fff;}
#aboutus #message .cont.sec01 {margin: 100px auto 80px; z-index: 2;}
#aboutus #message .cont.sec02 {width: 70%; margin: 120px 0 0; padding: 100px 20px 160px; background: #f0f0f0; z-index: 3;}
#aboutus #message .cont.sec03 {width: 70%; margin: -80px 0 180px auto; padding: 100px 20px; border: 1px solid #f0f0f0; z-index: 4;}
#aboutus #message .cont h3 {font-size: 3em; line-height: 1.5; font-weight: 700; margin-bottom: 40px;}
#aboutus #message .cont h3:first-letter {color: #0075c2;}
#aboutus #message .cont h4 {font-size: 1.75em; line-height: 1.5; font-weight: 700; margin-bottom: 20px;}
#aboutus #message .cont p {margin-bottom: 1em;}
#aboutus #message .cont p:last-child {margin-bottom: 0;}
#aboutus #message .cont a {margin-top: 40px;}
#aboutus #company h2.generic {margin-bottom: -150px;}
#aboutus #company .img {width: 55%; height: 500px;}
#aboutus #company .cont {
position: relative;
top: 20px;
left: 20px;
margin: -80px 0 160px 5%;
padding: 45px;
min-width: 40vw;
max-width: 55vw;
background: #fff;
border: 1px solid #0075c2;
box-shadow: 0 0 0 0 transparent;
z-index: 1;
transition: all .5s ease;
}
#aboutus #company .cont.active {top: 0; left: 0; box-shadow: 20px 20px 0 0px #0075c2;}
#aboutus #company table {width: 100%;}
#aboutus #company table tr {border-bottom: 1px solid #e4e4e4;}
#aboutus #company table tr th,#front .company .col_text table tr td {padding: 8px; text-align: left;}
#aboutus #company table tr td i {color: #0075c2; margin-left: 8px;}
#aboutus #access h2.generic {margin-top: -60px;}
#aboutus #access .text-cover {width: 100%; height: 700px;}
#aboutus #access #googlemap.char {height: 100%; transform: none;}
#aboutus #access .cont {
display: flex;
align-items: center;
height: 15vw;
max-height: 262px;
margin: -20px 80px 20px;
padding: 0 40px;
}
#aboutus #access .cont ul li {list-style-type: disc; margin: 8px 0 8px 1em;}
@media screen and (max-width: 1024px) {
#aboutus #access .text-cover {width: 100%; height: 500px;}
#aboutus #access .cont {margin: -20px 20px 20px; padding: 20px 16px;}
}
@media screen and (max-width: 768px) {
#aboutus #message .img {width: 90%; height: 480px;}
#aboutus #message .cont h3 {font-size: 2.4em;}
#aboutus #message .cont.sec02 {width: 90%; margin: 120px 0 0; padding: 80px 0 140px;}
#aboutus #message .cont.sec03 {width: 90%; margin: -80px 0 180px auto; padding: 80px 0;}
#aboutus #message .cont a {margin-top: 30px;}
#aboutus #company .cont {top: calc(50% + 60px); padding: 40px; min-width: 508px;}
#aboutus #access .cont {height: auto; margin: -20px 20px 20px; padding: 30px 16px 20px;}
} #services section {background: #333;}
#services .img {width: 50%; height: 80vh;}
#services .img img {transform: translate(0,0);}
#services .text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 80vh;
}
#services .text h2.generic {margin: 0 auto 50px;}
#services .text h2.generic span {color: #fff; line-height: 1.3;}
#services .text h2.generic .row .en {font-size: 3em;}
#services .text h2.generic .row .jp {font-size: .9em;}
#services .text h3 {color: #fff; font-size: 1.25em; font-weight: 700; text-align: center; margin: 0 auto 20px;}
#services .text p {color: #fff; font-size: .95em; text-align: center; line-height: 2; margin: 10px auto;}
#services .details {
position: relative;
display: block;
width: 100%;
height: 700px;
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/works.jpg) center/100% auto;
background-attachment: fixed;
overflow: hidden;
}
#services .details .filter {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 700px;
background: rgba(0,0,0, .6);
z-index: 1;
}
#services .details .back {
position: absolute;
display: block;
height: 13vw;
bottom: -5vw;
left: 7vw;
font-family: metropolis, sans-serif;
font-size: 13vw;
color: #f4f4f4;
line-height: 1;
opacity: .25;
z-index: -1;
-ms-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;
}
#services .details .back:first-letter {
-ms-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;
}
#services .details li {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
height: 350px;
border-bottom: 1px solid #fff;
overflow: hidden;
z-index: 2;
}
#services .details li h2 {width: 400px; margin: 0 auto;}
#services .details li h2.generic .row .en {font-family: inherit; color: #fff; font-size: 2.4em; font-weight: 700;}
#services .details li h2.generic .row .en:first-letter {color: #fff;}
#services .details li h2.generic .row .jp {color: #fff;  margin: 10px auto 0; letter-spacing: inherit;}
#services .details .more {width: 168px; padding: 1.2em 2.4em; z-index: 1;}
#services .details .more span {font-size: 1.2em;}
@media screen and (max-width: 1024px) {#services .text {width: calc(50% - 40px); padding: 0 20px;}}
@media screen and (max-width: 768px) {
#services section {flex-direction: column;}
#services section:nth-child(even) {flex-direction: column-reverse;}
#services .text h2.generic {margin: 60px auto;}
#services .img {width: 100%; height: 70vw;}
#services .text {width: 100%; padding: 0 16px 60px; height: auto;}
} #news .news-list {background: #3e3e3e; position: sticky;}
#news .more {margin: 60px auto;} #works .category {text-align: center; margin: -18px 0 30px;}
#works .category li {
position: relative;
display: inline-block;
font-family: metropolis, sans-serif;
font-size: 1.3em;
line-height: 50px;
margin: 0 12px;
cursor: pointer;
opacity: 1;
}
#works .category li:after {
position: absolute;
content: '';
display: block;
bottom: 0;
left: auto;
right: 0;
width: 0;
height: 2px;
background: #0075c2;
z-index: -1;
transition: all .3s ease;
}
#works .category li:hover:after {left: 0; right: auto; width: 100%; transition: all .3s ease;}
#works .works-list {background: #3e3e3e; position: sticky;}
#works .more {margin: 60px auto;}
#works .description {margin: 0 0 60px; text-align: center;}
#works .description span {font-size: .85em;} #recruit {padding-bottom: 60px;}
#recruit .job {width: calc(80% + 40px); padding: 0;}
#recruit .job .job-detail {background: #fff; margin-bottom: 40px;}
#recruit .job .job-detail h3.generic {text-align: left; margin: 0 0 40px; padding-bottom: 16px; border-bottom: 4px solid #0075c2;}
#recruit .job .job-detail h3.generic .en {font-size: 2.5em;}
#recruit .job .job-detail h3.generic .jp {font-size: .85em; margin-left: 3px;}
#recruit .job .job-detail .text {justify-content: space-between; width: 70%;}
#recruit .job .job-detail .text div {margin-bottom: 30px;}
#recruit .job .job-detail .text h4 {font-size: 1.1em; font-weight: 700;  border-left: 4px solid #0075c2; margin-bottom: 16px; padding: 2px 0 0 8px;}
#recruit .job .job-detail .img-list {width: 28%;}
#recruit .job .job-detail .img-list img {width: 100%; height: 200px;}
#recruit .info {width: calc(80% + 40px); margin-bottom: 60px;}
#recruit .info table {width: 100%;}
#recruit .info table tr {border-bottom: 1px solid #e4e4e4;}
#recruit .info table tr:first-child {border-top: 1px solid #e4e4e4;}
#recruit .info table tr th,#recruit .info table tr td {padding: 8px; text-align: left;}
#recruit .info table tr td i {color: #0075c2; margin-left: 8px;}
#recruit .info table tr td span {display: block;}
#recruit .process {padding: 0 40px;}
#recruit .process h3 {
display: flex;
align-items: center;
font-size: 1.4em;
line-height: 1.5;
border-bottom: 1px solid #0075c2;
margin-bottom: 20px;
}
#recruit .process h3 span {
display: inline-flex;
justify-content: center;
align-items: center;
font-family: metropolis, sans-serif;
font-size: 1.75em;
color: #fff;
width: 54px;
min-width: 54px;
height: 54px;
background: #0075c2;
margin: auto 20px 0 0;
padding: 6px 6px 2px;
}
#recruit .process > ul > li {margin-bottom: 30px;}
#recruit .process > ul > li > ul > li {text-indent: -1.25em; padding-left: 1.25em;}
#recruit .process > ul > li > ul > li:before {
content: "★";
color: #0075c2;
position: relative;
top: -1px;
left: 0;
margin-right: .25em;
}
#recruit .process ul li:last-child {margin-bottom: 0;} #contact .form {width: calc(80% + 40px); margin: 60px auto; padding: 0;}
#contact .form .tab_select {justify-content: center;}
#contact .form .tab_select > li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 220px;
background: #fff;
border: 1px solid #0075c2;
cursor: pointer;
transition: .3s ease;
}
#contact .form .tab_select > li i {color: #0075c2; font-size: 4.2em;}
#contact .form .tab_select > li span {color: #0075c2; font-size: 1.3em; line-height: 1; letter-spacing: 3px; margin-top: 30px;}
#contact .form .tab_select > li.select {background: #0075c2;}
#contact .form .tab_select > li.select i,#contact .form .tab_select li.select span {color: #fff;}
#contact .form .tab_content > li {padding: 50px; border: 1px solid #0075c2; border-top: none;}
#contact .form .tab_content > li p.center {text-align: center; margin-bottom: 50px;}
#contact .form .tab_content > li p.center em {color: #0075c2;}
#contact .form .tab_content .form {width: 85%; max-width: 920px; margin: 0 auto; text-align: center;}
#contact .form .tab_content .form ul {display: flex; padding: 20px 0; border-bottom: 1px solid #f0f0f0;}
#contact .form .tab_content .form ul:last-child {border-bottom: none;}
#contact .form .tab_content .form li:first-child {display: flex; align-items: center; width: 40%; padding-right: 4%; font-size: 1em; font-weight: 700;}
#contact .form .tab_content .form li:first-child span {color: #fff; font-size: .85em; line-height: 1; background: #0075c2; margin-left: auto; padding: 7px 8px 6px;}
#contact .form .tab_content .form li:last-child {width: 54%;}
#contact .form .tab_content .form input[type="text"],#contact .form .tab_content .form input[type="email"],#contact .form .tab_content .form input[type="tel"],
#contact .form .tab_content .form textarea {width: calc(100% - 6px); border: none; background: #f0f0f0!important; padding: 8px 12px; resize: vertical;}
#contact .form .tab_content .cheak {position: relative; display: inline-block; margin: 40px auto; cursor: pointer;}
#contact .form .tab_content .wpcf7-radio {display: flex; margin: 0 -35px 0 35px;}
#contact .form .tab_content .wpcf7-radio .wpcf7-list-item-label {display: block; margin-right: 35px; cursor: pointer;}
#contact .form .tab_content input[type="radio"],#contact .form .tab_content input[type="checkbox"] {display: none;}
#contact .form .tab_content span.wpcf7-list-item-label {display: block; position: relative;}
#contact .form .tab_content span.wpcf7-list-item-label:before {
content: '';
position: absolute;
left: -34px;
top: -2px;
width: 21px;
height: 21px;
border: 2px solid #d0d0d0;
}
#contact .form .tab_content span.wpcf7-list-item-label:after {
width: 12px;
height: 6px;
border: 3px solid #0075c2;
content: '';
position: absolute;
transform: rotate(-45deg);
left: -29px;
top: 4px;
border-top: none;
border-right: none;
transition: all 0.3s ease;
opacity: 0;
}
#contact .form .tab_content .cheak span.wpcf7-list-item-label:before {top: 0px;}
#contact .form .tab_content .cheak span.wpcf7-list-item-label:after {top: 6px;}
#contact .form .tab_content input[type="checkbox"]:checked + span.wpcf7-list-item-label:after,
#contact .form .tab_content input[type="radio"]:checked + span.wpcf7-list-item-label:after {opacity: 1;}
#contact .form .tab_content input[type="submit"] {
display: block;
color: #fff;
font-size: 1.1em;
letter-spacing: 1.5px;
background: #0075c2;
border: 1px solid #0075c2;
margin: 40px auto;
padding: 16px 48px;
transition: all 0.3s ease-in-out;
}
#contact .form .tab_content input[type="submit"]:hover {color: #0075c2; background: #fff;}
.wpcf7-response-output {border: 1px solid #0075c2!important; color: #0075c2!important; text-align: center!important; background: transparent!important; margin-top: 60px!important;}
@media screen and (max-width: 1024px) {
#contact .form {width: calc(86% + 40px);}
#contact .form .tab_content .form {width: 90%;}
#contact .form .tab_content > li {padding: 40px;}
#contact .form .tab_content .wpcf7-radio {flex-direction: column; text-align: left; margin: 0 -35px 0 35px;}
#contact .form .tab_content .wpcf7-radio .wpcf7-list-item-label {margin: 5px 35px 5px 0;}
}
@media screen and (max-width: 768px) {
#contact .form .tab_select > li {height: 200px;}
#contact .form .tab_content .form {width: 100%;}
#contact .form .tab_content > li p.center em {display: block;}
}  .scroll {bottom: -65px; width: 64px; height: 64px;}
.open .scroll {bottom: -65px!important;}
.scroll .arrow {width: 64px; height: 32px;}
.scroll .arrow:before {height: 32px; left: 32px;}
.scroll .arrow:after {left: 28px;}