@import url("cssreset.css");
@import url("base.css");
@import url("header.css");
@import url("footer.css");


/* contents.css */
#wrapper {
    padding-top: 170px;
}
@media only screen and (max-width: 750px) {
    #wrapper {
        padding-top: 24vw;
    }
}

section.contents .inner {
    width: 94%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
section.contents {
    font-size: 14px;
}
@media only screen and (max-width: 750px) {
    section.contents {
        font-size: 3.6vw;
    }
}
section.contents ul.normal {
    padding-left: 1.5em;
    list-style: disc;
}


/* H1 */
section.contents h1 {
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px solid #008cce;
    line-height: 1.2;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 44px;
    color: #1A1A1A;
}
section.contents h1 em {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #D9D9D9;
}
@media only screen and (max-width: 750px) {
    section.contents h1 {
        font-size: 6.8vw;
    }
    section.contents h1 em {
        font-size: 4.8vw;
    }
}

section.contents p {
    margin-bottom: 1em;
}
section.contents ul.normal {
    margin-bottom: 1em;
}


/* normal contents */
section.normal h2 {
    margin-bottom: 0.5em;
    border-bottom: 1px solid #008cce;
    font-size: 18px;
    font-weight: 700;
}


/* service */
section.contents.service h1 {
    margin-bottom: 2em;
}
section.service .block {
    position: relative;
    margin-bottom: 120px;
    padding-top: 70px;
    padding-bottom: calc(70px - 1em);
    color: #ffffff;
}
section.service .block:nth-of-type(odd) {
    padding-left: 5%;
    border-top-left-radius: 20px;
}
section.service .block:nth-of-type(even) {
    padding-right: 5%;
    border-top-right-radius: 20px;
}
section.service .block:after {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    content: "";
}
section.service .block.block-a,
section.service .block.block-a:after {background-color: #008CCE;}
section.service .block.block-b,
section.service .block.block-b:after {background-color: #46B8ED;}
section.service .block.block-c,
section.service .block.block-c:after {background-color: #00557E;}
section.service .block.block-d,
section.service .block.block-d:after {background-color: #00ADFF;}
section.service .block.block-e,
section.service .block.block-e:after {background-color: #1F86B6;}

section.service .block.block-a:after,
section.service .block.block-c:after,
section.service .block.block-e:after {
    left: 99%;
}
section.service .block.block-b:after,
section.service .block.block-d:after {
    right: 99%;
}

section.service .block .text {
    position: relative;
    width: 460px;
    z-index: 1;
}
section.service .block:nth-of-type(even) .text {
    margin-left: auto;
}
section.service .block .text h2 {
    line-height: 1.2;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 30px;
    margin-bottom: 0.5em;
}
section.service .block .text h2 span {
    font-size: 0.7em;
}
section.service .block .text h3 {
    font-size: 18px;
}

section.service .block figure img {
    border-radius: 100%;
}
section.service .block figure {
    position: absolute;
    top: -50px;
    width: 385px;
    z-index: 1;
}
section.service .block figure.small {
    width: 260px;
}

section.service .block figure.a01 {
    right: -8%;
}
section.service .block figure.a02 {
    top: 32%;
    right: 12%;
}

section.service .block figure.b01 {
    left: -8%;
}
section.service .block figure.b02 {
    top: 28%;
    left: 10%;
}

section.service .block figure.c01 {
    right: -3%;
}

section.service .block figure.d01 {
    left: -3%;
}
section.service .block figure.d02 {
    top: 50%;
    left: -8%;
}

section.service .block figure.e01 {
    right: -3%;
}

@media only screen and (max-width: 1000px) {
    section.service .block .text {
        width: 60%;
    }
    section.service .block figure {
        width: 45%;
    }
    section.service .block figure.small {
        width: 30%;
    }
    section.service .block figure.a02 {
        right: 8%;
    }
    section.service .block figure.b01 {
        left: -11%;
    }
    section.service .block figure.b02 {
        left: 5%;
    }
    section.service .block figure.c01 {
        right: -8%;
    }
    section.service .block figure.d01 {
        left: -11%;
    }
    section.service .block figure.d02 {
        left: 5%;
    }
    section.service .block figure.e01 {
        right: -8%;
    }
}

@media only screen and (max-width: 750px) {
    section.service .block {
        margin-bottom: 36vw;
        padding-top: 8vw;
        padding-bottom: calc(24vw - 1em);
    }
    section.service .block .text {
        width: 100%;
    }
    section.service .block .text h2 {
        font-size: 5.8vw;
    }
    section.service .block .text h3 {
        font-size: 4.2vw;
    }
    section.service .block figure {
        top: inherit;
        bottom: -32vw;
        width: 48vw;
    }
    section.service .block figure.small {
        width: 34vw;
    }
    section.service .block figure.a01 {
        right: -6%;
    }
    section.service .block figure.a02 {
        top: inherit;
        right: 28%;
        bottom: -12vw;
    }
    section.service .block figure.b01 {
        left: -6%;
    }
    section.service .block figure.b02 {
        top: inherit;
        left: 30%;
        bottom: -12vw;
    }
    section.service .block figure.c01 {
        right: -6%;
        bottom: -24vw;
    }
    section.service .block figure.d01 {
        left: -6%;
        bottom: -26vw;
    }
    section.service .block figure.d02 {
        top: inherit;
        left: 35%;
        bottom: -10vw;
    }
    section.service .block figure.e01 {
        top: inherit;
        right: -6%;
        bottom: -26vw;
    }
}


/* message */
section.message {
    padding-bottom: 100px;
}
section.message p {
    margin-bottom: 1.5em;
    font-size: 1.2em;
}

@media only screen and (max-width: 750px) {
    section.message {
        padding-bottom: 16vw;
    }
    section.message p {
        font-size: 1.0em;
    }
}


/* company */
section.company {
    padding-bottom: 100px;
}

section.company dl {
}
section.company dl div {
    display: flex;
    justify-content: space-between;
}
section.company dl dt {
    width: 9em;
    background-color: #F0F0F0;
    margin-right: 2px;
    padding: 1em 2em;
}
section.company dl dd {
    width: calc(100% - 9em - 2px);
    background-color: #F0F0F0;
    padding: 1em 1em;
}

section.company dl div:nth-child(even) dt,
section.company dl div:nth-child(even) dd {
    background-color: #FCFCFC;
}

@media only screen and (max-width: 750px) {
    section.company {
        padding-bottom: 16vw;
    }
    section.company dl div {
        display: block;
        margin-bottom: 2px;
    }
    section.company dl dt {
        width: 100%;
        margin-right: 0;
        padding: 1em 1em 0;
    }
    section.company dl dd {
        width: 100%;
        padding: 0 1em 1em;
    }
}


section.contents h2.normal {
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
    font-family: "M PLUS Rounded 1c", sans-serif;
    text-align: center;
    line-height: 1.2;
    font-size: 22px;
}
section.contents h2.normal em {
    display: block;
    font-size: 40px;
}
section.contents h2.normal:before,
section.contents h2.normal:after {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    transform: translateY(1em);
    content: "";
}
section.contents h2.normal:before {
    margin-right: 1.5em;
}
section.contents h2.normal:after {
    margin-left: 1.5em;
}
section.contents.map h2.normal {
    color: #1A1A1A;
}
section.contents.map h2.normal:before,
section.contents.map h2.normal:after {
    background-color: #008CCE;
}

@media only screen and (max-width: 750px) {
    section.company {
        padding-bottom: 16vw;
    }
    section.contents h2.normal {
        font-size: 4.6vw;
    }
    section.contents h2.normal em {
        font-size: 7.2vw;
    }
}



/* history */
section.history {
    background-color: #00ADFF;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #ffffff;
}
section.history .wrap { 
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 2em;
}
section.history a {
    color: #ffffff;
    text-decoration: underline;
}
section.history h3 {
    position: relative;
    line-height: 1.2;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 29px;
}
section.history dl {
    width: calc(100% - 10em);
    font-size: 16px;
}
section.history dl div {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 0.5em;
}
section.history dl dt {
    width: 5em;
}
section.history dl dd {
    width: calc(100% - 5em);
}

section.history h3:after {
    position: absolute;
    top: 0.375em;
    right: -1.65em;
    width: 0.475em;
    height: 0.475em;
    background-color: #00557E;
    border-radius: 100%;
    content: "";
}
section.history .wrap:before {
    position: absolute;
    top: 1em;
    left: 8.05em;
    width: 1px;
    height: calc(100% + 1em);
    background-color: #00557E;
    content: "";
}
section.history .wrap:last-of-type:before {
    display: none;
}

@media only screen and (max-width: 750px) {
    section.history {
        padding-top: 10vw;
        padding-bottom: 10vw;
    }
    section.history h3 {
        font-size: 5.2vw;
    }
    section.history dl {
        width: calc(100% - 8em);
    }
    section.history dl div {
        display: block;
    }
    section.history dl dt,
    section.history dl dd {
        width: 100%;
    }
    section.history h3:after {
        right: -1.25em;
    }
    section.history .wrap:before {
        left: 5.075em;
    }
}


/* map */
section.map {
    padding-top: 100px;
    padding-bottom: 100px;
}
section.map .gmap {
    position: relative;
    width: 100%;
    height: 420px;
    margin-bottom: 0.5em;
}
section.map .gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 750px) {
    section.map {
        padding-top: 16vw;
        padding-bottom: 16vw;
    }
    section.map .gmap {
        height: 84vw;
    }
}


/* vehicles */
section.vehicles .flex-wrap {
    margin-bottom: 60px;
}
section.vehicles .flex-wrap:nth-of-type(odd) dl {
    order: 1;
}

section.vehicles figure {
    width: 380px;
}
section.vehicles figure img {
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
section.vehicles dl {
    width: calc(100% - 420px);
}
section.vehicles dl div {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 0;
    border-bottom: 1px dotted #008cce;
}
section.vehicles dl div:first-of-type {
    border-top: 1px dotted #008cce;
}
section.vehicles dl dt {
    width: 10em;
}
section.vehicles dl dd {
    width: calc(100% - 10em);
}
@media only screen and (max-width: 750px) {
    section.vehicles .flex-wrap {
        margin-bottom: 10vw;
    }
    section.vehicles figure {
        width: 100%;
    }
    section.vehicles dl {
        width: 100%;
        margin-bottom: 1em;
    }
}



/* recruit */
#recruit section h3 {
    margin-bottom: 0.5em;
    font-size: 16px;
    font-weight: 700;
}
#recruit section h4 {
    font-weight: 700;
}


/* news top */
section.news-top .news-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 2.5em;
}
section.news-top .news-wrap:after {
    display: block;
    width: 31.5%;
    content: "";
}
section.news-top article {
    position: relative;
    width: 31.5%;
    margin-bottom: 3%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.4);
}
section.news-top article a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
section.news-top article a:hover ~ figure img {
    transform: scale(1.2);
}
section.news-top article figure {
    overflow: hidden;
    width: 100%;
    height: 160px;
    border-top-left-radius: 20px;
}
section.news-top article figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}
section.news-top article .text {
    padding: 0 5% 8%;
}
section.news-top article p {
    margin-bottom: 0.5em;
    text-align: right;
}
section.news-top article h2 {
    line-height: 1.2;
    font-size: 18px;
    font-weight: 500;
}
section.news-top article span {
    display: block;
    position: absolute;
    top: 3%;
    right: 3%;
    width: 8em;
    border: 1px solid #ffffff;
    border-radius: 9999px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}
section.news-top article span.topics {
    background-color: #0068B5;
    color: #ffffff;
}
section.news-top article span.case {
    background-color: #FFE100;
    color: #4D4D4D;
}
@media only screen and (max-width: 750px) {
    section.news-top .news-wrap {
        flex-direction: column;
        width: 84%;
        margin-left: auto;
        margin-right: auto;
    }
    section.news-top .news-wrap:after {
        width: 100%;
    }
    section.news-top article {
        width: 100%;
        margin-bottom: 6vw;
    }
    section.news-top article figure {
        height: 32vw;
    }
    section.news-top article a:hover ~ figure img {
        transform: none;
    }
    section.news-top article p {
        margin-bottom: 0.25em;
        font-size: 2.8vw;
    }
    section.news-top article h2 {
        font-size: 3.6vw;
    }
    section.news-top article span {
        font-size: 2.8vw;
    }
}


/* news single */
section.news-title {
    margin-bottom: 40px;
}
section.news-title h1 {
    padding-bottom: 0.25em;
    line-height: 1.4;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 22px;
    font-weight: 500;
}
section.news-title ul {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
section.news-title ul li.date {
    margin-right: 1em;
    font-size: 16px;
}
section.news-title ul li.cat span {
    display: inline-block;
    width: 8em;
    border-radius: 9999px;
    text-align: center;
    font-weight: 500;
}
section.news-title ul li.cat span.topics {
    background-color: #0068B5;
    color: #ffffff;
}
section.news-title ul li.cat span.case {
    background-color: #FFE100;
    color: #4D4D4D;
}
@media only screen and (max-width: 750px) {
    section.news-title {
        margin-bottom: 10vw;
    }
    section.news-title h1 {
        font-size: 5.4vw;
    }
    section.news-title ul li.date {
        font-size: 3.4vw;
    }
    section.news-title ul li.cat {
        font-size: 3.2vw;
    }
}

.video-wrap {
    position: relative;
    width: 94%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* single */
section.news dl.ex_detail {
    margin-bottom: 3em;
}
section.news dl.ex_detail div {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 0;
    border-bottom: 1px dotted #008cce;
}
section.news dl.ex_detail div:first-of-type {
    border-top: 1px dotted #008cce;
}
section.news dl.ex_detail dt {
    width: 8em;
}
section.news dl.ex_detail dd {
    width: calc(100% - 9em);
}

section.news h3 {
    margin-bottom: 1em;
    border-bottom: 1px solid #008cce;
    font-size: 20px;
    font-weight: 500;
}

section.news ul.example {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
section.news ul.example:after {
    display: block;
    width: 31.5%;
    content: "";
}
section.news ul.example li {
    width: 31.5%;
    margin-bottom: 2%;
}



/* pagenation */
.nav-links {
    display: flex;
    justify-content: center;
}
.nav-links a, 
.nav-links span {
    display: block;
    margin: 0 0.5em;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.nav-links a, 
.nav-links span:not(.dots) {
    width: 2em;
    height: 2em;
    border-radius: 100%;
}
.nav-links span.current {
    border: 2px solid #008CCE;
    color: #008CCE;
}
.nav-links a {
    background-color: #008CCE;
    border: 2px solid #008CCE;
    color: #ffffff !important;
}
.nav-links a:hover {
    background-color: #0068B5;
    border: 2px solid #0068B5;
    color: #ffffff;
    text-decoration: none;
}
.nav-links a.prev,
.nav-links a.next {
    position: relative;
    text-indent: -9999px;
}
.nav-links a.prev:after,
.nav-links a.next:after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.6em;
    height: 0.8em;
    background-color: #ffffff;
    margin: auto;
    content: "";
}
.nav-links a.prev:after {
    left: 0.45em;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.nav-links a.next:after {
    right: 0.45em;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}
@media only screen and (max-width: 750px) {
    .nav-links a, 
    .nav-links span {
        font-size: 3.6vw;
    }
}


/* for WP-PageNavi */
.wp-pagenavi {
    display: flex;
    justify-content: center;
}
.wp-pagenavi a, 
.wp-pagenavi span {
    display: block;
    margin: 0 0.5em;
    text-align: center;
    line-height: 1.7;
    font-size: 16px;
    font-weight: 500;
}
.wp-pagenavi a, 
.wp-pagenavi span:not(.extend) {
    width: 2em;
    height: 2em;
    border-radius: 100%;
}
.wp-pagenavi span.current {
    border: 2px solid #008CCE;
    color: #008CCE;
}
.wp-pagenavi a {
    background-color: #008CCE;
    border: 2px solid #008CCE;
    color: #ffffff !important;
}
.wp-pagenavi a:hover {
    background-color: #0068B5;
    border: 2px solid #0068B5;
    color: #ffffff;
    text-decoration: none;
}
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.first,
.wp-pagenavi a.last {
    position: relative;
    text-indent: -9999px;
}
.wp-pagenavi a.previouspostslink:after,
.wp-pagenavi a.nextpostslink:after,
.wp-pagenavi a.first:after,
.wp-pagenavi a.last:after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.6em;
    height: 0.8em;
    background-color: #ffffff;
    margin: auto;
    content: "";
}
.wp-pagenavi a.previouspostslink:after,
.wp-pagenavi a.first:after {
    left: 0.5em;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.wp-pagenavi a.nextpostslink:after,
.wp-pagenavi a.last:after {
    right: 0.45em;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.wp-pagenavi a.first:before,
.wp-pagenavi a.last:before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    height: 0.9em;
    background-color: #ffffff;
    margin: auto;
    content: "";
}
.wp-pagenavi a.first:after {
    left: 0.55em;
}
.wp-pagenavi a.last:after {
    right: 0.55em;
}
.wp-pagenavi a.first:before {
    left: 0.4em;
}
.wp-pagenavi a.last:before {
    right: 0.4em;
}
@media only screen and (max-width: 750px) {
    .wp-pagenavi a, 
    .wp-pagenavi span {
        margin: 0 0.25em;
        font-size: 3.6vw;
    }
}


/* single pagenation */
ul.pager {
    display: flex;
    justify-content: center;
    margin-top: 3em;
}
ul.pager li {
    margin: 0 0.5em;
}
ul.pager li a {
    display: inline-block;
    position: relative;
    border: 2px solid #008CCE;
    border-radius: 9999px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 16px;
    font-weight: 500;
}
@media only screen and (max-width: 750px) {
    ul.pager li {
        margin: 0 0.25em;
    }
    ul.pager li a {
        font-size: 3.0vw;
    }
}
ul.pager li a:hover {
    text-decoration: none;
    opacity: 0.7;
}
ul.pager li.list a {
    background-color: #ffffff;
    padding: 0.25em 1em;
    color: #008CCE;
}
ul.pager li.prev a,
ul.pager li.next a {
    background-color: #008CCE;
    color: #ffffff;
}
ul.pager li.prev a {
    padding: 0.25em 1em 0.25em 2em;
}
ul.pager li.next a {
    padding: 0.25em 2em 0.25em 1em;
}
ul.pager li.prev a:before,
ul.pager li.next a:before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.6em;
    height: 0.8em;
    background-color: #ffffff;
    margin: auto;
    content: "";
}
ul.pager li.prev a:before {
    left: 0.75em;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
ul.pager li.next a:before {
    right: 0.75em;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}


/* not found */
section.notfound {
    padding-bottom: 160px;
}