body {
max-width: 640px;
min-width: 320px;
min-height: 100%;
overflow: hidden;
scrollbar-face-color: #0075c2;
scrollbar-track-color: #fff;
scrollbar-arrow-color: #0075c2;
scrollbar-shadow-color: #fff;
}
main {padding-top: 48px; min-height: calc(100vh - 48px);}
main#front {padding-top: 0;}
main.list-item {min-height: auto;} .pc {display: none!important;} .container {display: block; padding: 0 16px;} .flex-box {display: flex; justify-content: space-between;} #breadcrumbs {padding: 16px 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: 80px auto;}
.generic .row .en {font-size: 2.75em}
.generic .row .jp {font-size: .9em;}
.generic.active .row span {transform: translateY(0%);} .more {padding: 1em 2em;}
.more span {font-size: 1.1em;}
.more .arrow {margin: 2px 0 0 8px;} .slider-arrow.prev {left: 10px; background-size: 14px 14px;}
.slider-arrow.next {right: 10px; background-size: 14px 14px;} .page-description {width: calc(100% - 32px); text-align: center; border-top: 1px solid #333; border-bottom: 1px solid #333; margin: 0 auto; padding: 30px 0;}
.page-description h2 {font-size: 1.7em; font-weight: 700; margin-bottom: 20px;}
.page-description p {margin-bottom: 1.5em;}
.page-description p:last-child {margin-bottom: 0;} header {position: fixed; width: 100%; background: #fff; padding: 16px 0; box-shadow: -4px 0 8px rgba(0,0,0, .3); overflow: hidden; z-index: 1000;}
header .flex-box {align-items: center;}
header .logo {width: 120px;}
header .logo .desvg path {color: #0075c2; fill: currentColor; transition: color .3s ease;}
header #g-navi {display: none;} header #nav-toggle {
display: block;
position: fixed;
top: 12px;
right: 16px;
width: 32px;
height: 32px;
z-index: 2001;
transition: top .3s ease;
}
header #nav-toggle span {
position: absolute;
display: block;
width: 32px;
height: 2px;
margin: 0 auto;
background: #0075c2;
transition: all .3s;
}
header #nav-toggle span:nth-child(1) {top: 9px;}
header #nav-toggle span:nth-child(2) {top: 15px; opacity: 1;}
header #nav-toggle span:nth-child(3) {top: 21px;}
header #nav-toggle:hover {cursor: pointer;}
header #nav-toggle:hover span:nth-child(1) {top: 7px;}
header #nav-toggle:hover span:nth-child(3) {top: 23px;}
.open header #nav-toggle span {background: #fff!important;}
.open header #nav-toggle span:nth-child(1) {transform: rotate(45deg); top: 15px;}
.open header #nav-toggle span:nth-child(2) {opacity: 0;}
.open header #nav-toggle span:nth-child(3) {transform: rotate(-45deg); top: 15px;} #full-navi {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0075c2;
opacity: 0;
visibility: hidden;
transition: all .5s .3s ease;
}
#full-navi .container {height: calc(100% - 50px); padding: 25px 0; opacity: 0; visibility: hidden; transition: all .5s ease;}
#full-navi .logo {display: inline-block; position: absolute; top: 16px; left: 16px; width: 120px; z-index: 2001;}
#full-navi .main {align-items: center; width: 100%; height: 95%;}
#full-navi nav {display: flex; flex-direction: column;  justify-content: center; align-items: center; margin: 0 auto;}
#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: 12px 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.1em; 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: 0; transform: none;}
.open #full-navi nav ul li span, .open #full-navi .works h2 span  {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 {display: none;}
#full-navi .sub {width: calc(100%); height: 5%; 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:hover {opacity: 1;}
#full-navi .sub a:hover:after {left: 0; right: auto; width: 100%; transition: all .3s ease;}
#full-navi .sub .right {display: flex; justify-content: center; width: 100%;}
#full-navi .sub .right a {margin: 0 8px;}  #front .top {
position: relative;
width: 100vw;
height: 100%;
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: 2em;
line-height: 1;
text-align: center;
white-space: nowrap;
margin: 8px 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: 30px;
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: 48px;
height: 48px;
margin-top: 10px;
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: -25px;
left: -25px;
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: -48px; padding-top: 48px;}
#front .about .flex-box {display: block; height: auto; margin: 0 auto; padding: 0 16px;}
#front .about .col_img {display: block; height: auto; margin-bottom: -20px;}
#front .about .col_img div {display: none;}
#front .about .col_text {margin: 0; text-align: center;}
#front .about .col_text h3 {
display: block;
font-size: 1.75em;
font-weight: 700;
line-height: 1;
letter-spacing: 3.2px;
margin-bottom: 30px;
}
#front .about .col_text h3:first-letter {color: #0075c2;}
#front .about .col_text p {line-height: 2; text-align: left; margin-bottom: 50px;}
#front .about .col_text .more {margin: 0 auto;} #front .services {text-align: center;}
#front .services > .more {margin: 60px auto 0;}
#front .services .flex-box {display: block;}
#front .services .flex-box .more {display: flex; justify-content: space-between; align-items: center; margin-bottom: -1px; padding: 24px 16px; border-color: #eee; opacity: 1;}
#front .services .flex-box .desvg {width: 40px;}
#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 .more:hover:after {transition: all .5s ease;}
#front .services .flex-box .arrow {margin: 0;}
#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: 1.7em;}
#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 .more:hover h3.generic .row .en:first-letter {color: inherit;} #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: 50%;
height: 50vw;
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: .95em;
color: #fff;
font-weight: 700;
padding: 0 25px;
}
.works-list a .hover .vd {
display: flex;
align-items: center;
margin-top: 10px;
padding: 11px 16px 9px;
border: 1px solid #fff;
}
.works-list a .hover .vd span {
position: relative;
font-family: metropolis, sans-serif;
color: #fff;
font-size: .75em;
line-height: 1;
}
.works-list a .hover .vd .arrow {
position: relative;
width: 12px;
height: 1px;
background: #fff;
transition: all .4s ease;
margin: 1px 8px 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: 24px;} #front .news {text-align: center;}
#front .news > div {padding-top: 48px; padding-bottom: 48px; background: #eee;}
#front .news div a {
display: block;
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 {
display: block;
line-height: 1;
text-align:left;
padding: 12px 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#front .news div a .date {color: #aaa; border-bottom: 1px 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: 50%;
height: 50vw;
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% - 1em);
padding: 0.5em;
transform: translateY(2em);
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: 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;} #front .member {}
#front .member .flex-box {flex-wrap: wrap; justify-content: flex-start;}
#front .member .flip-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: stretch;
position: relative;
width: calc((100% - 16px) / 2);
margin: 0 16px 10px 0;
perspective: 1000;
}
#front .member .flip-box:nth-child(even){margin: 0 0 10px 0;}
#front .member .flip-box div {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
background: #0075c2;
border-radius: 10px;
transition: all .5s 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: calc(100% - 20px); height: calc(((100vw - 16px) / 2 ) - 36px); 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;} #front .company {margin-bottom: 60px;}
#front .company .flex-box {padding: 0 32px 0 24px;}
#front .company .col_text {
width: 100%;
padding: 20px;
background: #fff;
border: 1px solid #0075c2;
box-shadow: 16px 16px 0 0px #0075c2;
z-index: 5;
}
#front .company .col_text table {width: 100%;}
#front .company .col_text table tr {display: block; border-bottom: 1px solid #e4e4e4;}
#front .company .col_text table tr th,#front .company .col_text table tr td {display: block; padding: 8px; text-align: left;}
#front .company .col_text table tr th {padding-bottom: 0;}
#front .company .col_text table tr td {padding-top: 2px!important;}
#front .company .col_text table tr td i {color: #0075c2; margin-left: 8px;}
#front .company .col_img {display: none;} #googlemap {height: 300px; 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 16px 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 {display: block; margin: 20px auto 50px;}
footer .contact .flex-box a {
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
height: 100px;
border: 1px solid #666;
border-radius: 5px;
margin: 0 auto 20px;
}
footer .contact .flex-box a:last-child {margin-bottom: 0;}
footer .contact .flex-box a i {color: #0075c2; font-size: 2.75em; 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;}
footer address .logo {display: block; width: 160px; margin: 0 auto 16px;}
footer address .logo img {width: 160px;}
footer address a,footer address p {color: #d0d0d0; text-align: center;}
footer .bnr {justify-content: center; margin-top: 40px; padding: 0 16px;}
footer .copyright {
justify-content: space-between;
align-items: center;
height: 56px;
margin-top: 40px;
padding-right: 48px;
border-top: 1px solid #666;
}
footer .copyright span {color: #d0d0d0; text-align: center; padding-left: 16px;}
footer .copyright ul {display: none;}  .page-visual {margin: 0; padding: 0;}
.page-visual .generic {margin: 100px auto;}
.page-visual .generic .row span {line-height: 1.3;}
.page-visual .generic .row .en {font-size: 3em;}
.page-visual .generic .row .jp {font-size: 1em;} h1.single {position: relative; font-size: 1.7em; font-weight: 700; line-height: 1.5; margin-bottom: 20px; padding: 0 5px 45px;}
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: 65px 16px 0;}
#state .flex-box {justify-content: flex-start; flex-wrap: wrap; align-items: center;}
#state span,#state ul li {font-size: .85em;}
#state span {margin-right: 16px;}
#state .tag {margin-top: 6px;}
#state ul li {margin-right: 10px;}
#state i {font-size: 12px; margin-right: 6px;}
#toc {position: relative; margin: 0; padding: 0 20px 10px; 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: 10px 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: 30px auto; padding: 0 16px;}
#single .eyecatch {width: 100%; height: 35vh; margin: 0 auto 40px;}
#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.6em;
font-weight: 700;
line-height: 1.5;
margin: 40px 0 20px;
padding: 6px 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.4em;
font-weight: 700;
line-height: 1.5;
margin: 30px 0 20px;
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.25em;
font-weight: 700;
line-height: 1.5;
margin: 20px 0 24px;
padding-left: 10px;
border-left: 5px solid #0075c2;
}
#single h5 {
position: relative;
font-size: 1.15em;
font-weight: 700;
line-height: 1.5;
margin: 20px 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.05em; font-weight: 700; margin: 20px 0;}
#single img {margin: 20px 20px 20px 0;}
#single p {word-break: break-all; line-height: 2; margin: 20px 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: 20px 0; padding: 10px 20px; border: 1px solid #ddd;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 20px 0;}
#single ul, #single ol {margin: 20px 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 .scroll-table {overflow: auto; white-space: nowrap; margin: 30px 0;}
#single table {border-collapse: collapse; text-align: left; line-height: 1.5; 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; margin: 0 auto; 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 {margin-bottom: 40px; padding: 0 16px;}
#postlink a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 10px auto;
padding: 8px;
border: 1px solid #0075c2;
border-radius: 5px;
cursor: pointer;
transition: all .3s ease;
}
#postlink a.prev {background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/svg/left_blue.svg) 2% center/12px 12px no-repeat;}
#postlink a.next {background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/svg/right_blue.svg) 98% center/12px 12px no-repeat;}
#postlink a:hover {opacity: .8;}
#postlink a span {color: #0075c2;}
#more-posts {text-align: center;}
#more-posts .generic {margin: 80px auto;}
#more-posts .generic .en {font-size: 2.25em;}
#more-posts .more {margin: 50px auto;}
#more-posts .more span {line-height: 1.5;} #state-works {padding: 65px 16px 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: 8px 20px;}
#state-works .more span {color: #0075c2; font-size: .9em;}
#state-works .more i {margin: 1px 0 0 10px; color: #0075c2; font-size: .9em;}
#state-works .more:hover span,#state-works .more:hover i {color: #fff;}
#single-works {margin: 40px auto; padding: 0 16px;}
#single-works .main_img,#single-works .youtube {display: block; margin: 0 8px 0 auto; box-shadow: 12px 12px 0 0px #0075c2;}
#single-works .main_img img,#single-works .youtube iframe {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#single-works.webmode .top_img {position: relative; width: calc(100vw - 32px); height: calc((100vw - 32px) * .80166); margin: 0 auto;}
#single-works.webmode .top_img .main_img {
position: absolute;
bottom: 0;
left: 0;
width: calc(100vw - 32px);
height: calc((100vw - 32px) * .80166);
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/pc_flame.png) 0/100%;
box-shadow: none;
z-index: 1;
}
#single-works.webmode .top_img .main_img img {
position: absolute;
top: calc((100vw - 32px) * .04576);
left: calc((100vw - 32px) * .04394);
width: calc((100vw - 32px) * .91211);
height: calc((100vw - 32px) * .51306);
}
#single-works.webmode .top_img .sp_main_img {
position: absolute;
bottom: 0;
right: 0;
width: calc((100vw - 32px) * .18527);
height: calc((100vw - 32px) * .38599);
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/sp_flame.png) 0/100%;
box-shadow: none;
z-index: 2;
}
#single-works.webmode .top_img .sp_main_img img {
position: absolute;
top: calc((100vw - 32px) * .06057);
left: calc((100vw - 32px) * .01781);
width: calc((100vw - 32px) * .15202);
height: calc((100vw - 32px) * .26841);
}
#single-works table {width: 100%; margin: 60px auto 50px;}
#single-works table tr th {display: block; font-family: metropolis, sans-serif; text-align: center; padding: 6px 0;}
#single-works table tr td {display: block; text-align: center; padding: 6px 0;}
#single-works .overview {margin: 0 auto; line-height: 2;}
#single-works .big_img {display: flex; justify-content: center; margin: 70px auto 30px;}
#single-works .big_img a {width: calc(94% / 3); height: calc(100vw / 3); margin: 0 1%; box-shadow: 3px 3px 12px rgba(0,0,0, .2);}
#single-works .big_img img,#single-works .small_img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; font-family: 'object-fit: cover; object-position: 50% 0;';}
#single-works .small_img {display: flex; justify-content: center; margin: 0 0 80px;}
#single-works .small_img a {width: calc(70% / 3); height: calc(100vw / 3); margin: 0 1%; box-shadow: 3px 3px 12px rgba(0,0,0, .2);} #state-products {padding: 55px 16px 0;}
#state-products .eyecatch {position: relative; 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 {background: #0075c2; padding: 14px 18px;}
#state-products .state h1 {font-size: 1.5em; 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 .flex-box div {margin-left: 14px;}
#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: 10px; line-height: 1; border: 1px solid #fff; margin: 0 auto 0 0; padding: 4px 12px 3px;}  #news .news-list {background: #3e3e3e;}
#news .more {margin: 60px auto;} #aboutus .img img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'; 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: 12px 24px; 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: 2.5em;}
#aboutus h2 .row .jp {font-size: 1em;}
#aboutus #message h2.generic {margin-top: -60px; z-index: 4;}
#aboutus #message .img {width: 90%; height: 250px;}
#aboutus #message .container {width: calc(100% - 32px);}
#aboutus #message .cont {position: relative; margin: 0; background: #fff;}
#aboutus #message .cont.sec01 {margin: 50px auto 40px; padding: 0 16px; z-index: 2;}
#aboutus #message .cont.sec02 {margin: 60px 0 0; padding: 50px 32px 80px; background: #f0f0f0; z-index: 3;}
#aboutus #message .cont.sec03 {margin: -40px 0 90px auto; padding: 50px 32px; z-index: 4;}
#aboutus #message .cont h3 {font-size:2em; line-height: 1.75; font-weight: 700; margin-bottom: 40px;}
#aboutus #message .cont h3:first-letter {color: #0075c2;}
#aboutus #message .cont h4 {font-size: 1.25em; line-height: 1.5; font-weight: 700; margin-bottom: 20px;}
#aboutus #message .cont p:last-child {margin-bottom: 0;}
#aboutus #message .cont .text {padding: 0;}
#aboutus #message .cont a {margin-top: 40px;}
#aboutus #company h2.generic {margin-bottom: -120px;}
#aboutus #company .img {width: 75%; height: 300px;}
#aboutus #company .cont {
position: relative;
top: 20px;
left: 20px;
margin: -60px 5% 80px;
padding: 20px;
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: 16px 16px 0 0px #0075c2;}
#aboutus #company table {width: 100%;}
#aboutus #company table tr {display: block; border-bottom: 1px solid #e4e4e4;}
#aboutus #company table tr th,#aboutus #company table tr td {display: block; padding: 8px; text-align: left;}
#aboutus #company table tr th {padding-bottom: 0;}
#aboutus #company table tr td {padding-top: 2px!important;}
#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: 500px;}
#aboutus #access #googlemap.char {height: 100%; transform: none;}
#aboutus #access .cont {margin: -20px 0 0; padding: 40px 16px;}
#aboutus #access .cont ul li {list-style-type: disc; margin: 8px 0 8px 1em;} #services section {flex-direction: column; background: #333;}
#services section:nth-child(even) {flex-direction: column-reverse;}
#services .img {width: 100%; height: 75vw;}
#services .img img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'; transform: none;}
#services .text {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 16px 50px;}
#services .text h2.generic {margin: 40px auto;}
#services .text h2.generic span {color: #fff; line-height: 1.3;}
#services .text h2.generic .row .en {font-size: 2.8em;}
#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; line-height: 2; margin: 10px auto 0;}
#services .details {
position: relative;
display: block;
width: 100%;
background: url(//mobinc.staging-env.dev/cms-604918/wp-content/themes/mobinc/img/works.jpg) center/auto 150% no-repeat;
overflow: hidden;
}
#services .details .filter {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .6);
z-index: 1;
}
#services .details .back {
position: absolute;
display: block;
height: 14vw;
bottom: -6vw;
left: 4vw;
font-family: metropolis, sans-serif;
font-size: 14vw;
color: #f4f4f4;
line-height: 1;
opacity: .25;
z-index: 1;
}
#services .details li {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 60px 0;
border-bottom: 1px solid #fff;
overflow: hidden;
z-index: 2;
}
#services .details li h2 {margin: 0 auto;}
#services .details li h2.generic .row .en {font-family: inherit; color: #fff; font-size: 2.1em; 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: 158px; margin-top: 30px; padding: 1em 2em; z-index: 1;}
#services .details .more span {font-size: 1.1em;} #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;}
#works .more {margin: 60px auto;}
#works .description {margin: 0 0 60px; text-align: center;}
#works .description span {font-size: .85em;} #recruit {padding-bottom: 40px;}
#recruit .job {padding: 0;}
#recruit .job .job-detail {margin-bottom: 40px; padding: 0 16px;}
#recruit .job .job-detail .flex-box {display: block;}
#recruit .job .job-detail h3.generic {text-align: left; margin: 0 0 30px; padding-bottom: 12px; border-bottom: 4px solid #0075c2;}
#recruit .job .job-detail h3.generic .en {font-size: 2.4em; line-height: 1.25;}
#recruit .job .job-detail h3.generic .jp {font-size: .85em; margin-left: 3px;}
#recruit .job .job-detail .text {justify-content: space-between;}
#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 {display: flex; justify-content: space-between;}
#recruit .job .job-detail .img-list img {width: 50%; height: 50vw; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';}
#recruit .info {width: auto; margin-bottom: 20px; padding: 0 16px;}
#recruit .info table {width: 100%;}
#recruit .info table tr {display: block; 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 {display: block; text-align: left;}
#recruit .info table tr th {padding: 8px 8px 2px;}
#recruit .info table tr td {padding: 2px 8px 8px;}
#recruit .info table tr td i {color: #0075c2; margin-left: 8px;}
#recruit .info table tr td span {display: block;} #contact .form {margin: 60px auto;}
#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: 150px;
background: #fff;
border: 1px solid #0075c2;
cursor: pointer;
transition: .3s ease;
}
#contact .form .tab_select li i {color: #0075c2; font-size: 3.25em; line-height: 1; margin: 6px 0 12px;}
#contact .form .tab_select li span {color: #0075c2; font-size: 1.2em; line-height: 1.5; text-align: center; letter-spacing: 3px;}
#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: 20px; border: 1px solid #0075c2; border-top: none;}
#contact .form .tab_content > li p.center {text-align: center; margin-bottom: 10px;}
#contact .form .tab_content > li p.center em {display: block; color: #0075c2;}
#contact .form .tab_content .form {margin: 0 auto; text-align: center;}
#contact .form .tab_content .form ul {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; font-size: 1em; font-weight: 700; margin-bottom: 12px;}
#contact .form .tab_content .form li:first-child span {color: #fff; font-size: .85em; line-height: 1; background: #0075c2; margin-left: 20px; padding: 7px 8px 6px;}
#contact .form .tab_content .form li:last-child {}
#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% - 26px); border: none; background: #f0f0f0!important; padding: 8px 12px; resize: vertical;}
#contact .form .tab_content .cheak {position: relative; display: inline-block; margin: 60px auto 0; cursor: pointer;}
#contact .form .tab_content .wpcf7-radio {display: flex; flex-direction: column; text-align: left; margin: 0 -35px 0 35px;}
#contact .form .tab_content .wpcf7-radio .wpcf7-list-item-label {display: block; margin: 5px 35px 5px 0; 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: -32px; left: 50%; transform: translate(-50%,0);}
#contact .form .tab_content .cheak span.wpcf7-list-item-label:after {top: -26px; left: calc(50% - 8px); transform: translate(-50%,0),rotate(-45deg);}
#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;
width: 100%;
color: #fff;
font-size: 1.1em;
letter-spacing: 1.5px;
background: #0075c2;
border: 1px solid #0075c2;
margin: 40px auto 20px;
padding: 16px 0;
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;}  .scroll {bottom: -57px; width: 56px; height: 56px;}
.open .scroll {bottom: -57px!important;}
.scroll .arrow {width: 48px; height: 24px;}
.scroll .arrow:before {height: 24px; left: 24px;}
.scroll .arrow:after {left: 20px;}