@charset "utf-8";

:root {
    --accent-color: #c49ea4;
    --font-color: #898989;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.08em;
    color: #222;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.animation {
    opacity: 0;
    visibility: hidden;
    transition: 2s;
    transform: translateY(70px);
}

/*アニメーション要素までスクロールした時のスタイル*/

.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fadeIn {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 500ms;
}

.fadeIn.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}


/* --------------------------------
/* --------------------------------
 * ヘッダー
 * --------------------------------
 * -------------------------------- */

header {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    height: 100px;
    display: flex;
    align-items: center;
    z-index: 999;
    padding-left: 30px;
    padding-right: 30px;
    box-shadow: 0 7px 5px rgb(0 0 0 / 5%);
}

@media screen and (max-width: 1024px) {
    header {
        width: 100%;
    }
}

@media screen and (max-width: 900px) {
    header {
        height: 80px;
        position: fixed;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-shadow: 0 7px 5px rgb(0 0 0 / 5%);
    }
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    opacity: 0.7;
}

nav {
    margin: 0 0 0 auto;
}

.pc-nav {
    display: flex;
}

ul {
    list-style: none;
    margin: 0;
    display: flex;
}

li {
    margin: 0 0 0 50px;
    font-size: 14px;
}

header h1 {
    margin: 0;
}

header h1 img {
    max-width: 200px;
}

.m0 {
    margin-left: 0;
}

.nav-contact {
    background-color: var(--accent-color);
    padding: 15px 35px 15px 35px;
    font-size: 1.2em;
}

h1 a {
    color: #333;
}

ul li a {
    color: #FFF;
}

.sp-nav {
    display: none;
}

.pc-nav li {
    font-size: 1.2em;
    letter-spacing: 0.01em;
}

.pc-nav .height-adjust {
    color: #FFF;
    font-weight: bold;
}

.menu {
    height: 20px;
    position: absolute;
    right: 5%;
    top: 37%;
    width: 30px;
    z-index: 99;
}

.menu__line {
    background: #FFF;
    display: block;
    height: 3px;
    position: absolute;
    transition: transform .3s;
    width: 100%;
}

.menu__line--center {
    top: 10px;
}

.menu__line--bottom {
    bottom: -3px;
}

.menu__line--top.active {
    top: 8px;
    transform: rotate(45deg);
}

.menu__line--center.active {
    transform: scaleX(0);
}

.menu__line--bottom.active {
    bottom: 10px;
    transform: rotate(135deg);
}

.gnav {
    background: rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
    top: 0;
    left: 0;
}

.gnav__wrap {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}

.gnav__menu__item {
    margin: 30px 0;
}

.gnav__menu__item a {
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    padding: 20px;
    text-decoration: none;
    transition: .5s;
}

.gnav__menu__item a:hover {
    color: #666;
}

.gnav ul {
    flex-direction: column;
    margin-left: -7%;
}

.active {
    background: #FFF !important;
}


@media screen and (max-width: 900px) {
    .pc-nav {
        display: none;
    }

    h2 {
        line-height: 0.4;
    }

    .sp-nav {
        display: block;
    }

    .sp-nav a {
        color: #FFF;
    }

    header h1 img {
        width: 35vw;
        margin-left: 10px;
        margin-bottom: 7px;
        margin: 0;
        margin-bottom: -10px;
    }

    .gnav__wrap {
        flex-direction: column;
    }

    .gnav ul {
        padding-bottom: 45px;
    }

    .nav-contact {
        margin: 0;
        font-size: 1.6em;
    }
}


/* --------------------------------
/* --------------------------------
 * KV
 * --------------------------------
 * -------------------------------- */

.main-visual {
    position: relative;
    background-image: url(../img/fv_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

.main-visual h2 {
    position: absolute;
    font-size: 60px;
    font-weight: bold;
    color: #FFF;
    line-height: 1.3;
    z-index: 10;
    bottom: 5%;
    left: 3%;
}

.main-visual span {
    display: block;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 35px;
}

@media screen and (max-width: 768px) {
    .main-visual .kv-text {
        font-size: 30px;
        background-color: #0f2540;
        line-height: 1.6;
    }

    .kv-subtext {
        font-size: 18px;
        line-height: 0.2;
    }
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
}

.field {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding-bottom: 30px;
}

.field p {
    color: #FFF;
}

.mouse {
    width: 26px;
    height: 50px;
    border: 1px solid #FFF;
    border-radius: 60px;
    position: relative;
}

.mouse::before {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFF;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 2s infinite;
    -webkit-animation: wheel 2s infinite;
}

@keyframes wheel {
    to {
        opacity: 0;
        top: 40px;
    }
}

@-webkit-keyframes wheel {
    to {
        opacity: 0;
        top: 40px;
    }
}

@media screen and (max-width: 900px) {
    .main-visual {
        height: 100vh;
    }

    .main-visual h2 {
        margin: 0;
        font-size: 9vw;
        bottom: 20%;
    }
}


/* --------------------------------
/* --------------------------------
 * CONCEPT
 * --------------------------------
 * -------------------------------- */

.wrapper {
    max-width: 1240px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.contents-box {
    padding-top: 5em;
    padding-bottom: 5em;
}

.top-category-title {
    text-align: center;
}

.top-category-title h2 {
    font-size: 56px;
    color: var(--font-color);
    margin: 0;
    margin-bottom: 20px;
}

.top-category-title span {
    color: var(--font-color);
}

.concept-flex {
    display: flex;
    justify-content: space-between;
    padding-top: 3em;
}

.concept-flex-left {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.concept-flex-left img {
    max-width: 503px;
    width: 100%;
}

.concept-flex-right {
    width: 45%;
}

.concept-flex-right h3 {
    color: var(--font-color);
    font-size: 22px;
    line-height: 1.8;
    margin-bottom: 2em;
}

.concept-flex-right h3 span {
    color: var(--accent-color);
}

.concept-flex-right p {
    font-size: 14px;
    color: var(--font-color);
    line-height: 2.2;
    margin-bottom: 50px;
}

.more-link {
    text-align: right;
}

.more-link a {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

@media screen and (max-width: 768px) {
    .concept-flex {
        flex-direction: column;
        align-items: center;
    }

    .concept-flex-left {
        width: 100%;
        max-width: 300px;
    }

    .concept-flex-right {
        width: 100%;
        margin-top: 40px;
    }
}

@media screen and (max-width: 450px) {
    .top-category-title h2 {
        font-size: 13vw;
    }
}


/* --------------------------------
/* --------------------------------
 * WORKS
 * --------------------------------
 * -------------------------------- */

.bg-gray {
    background-color: #f8f8f8;
}

.works-flex {
    display: flex;
    justify-content: space-between;
    padding-top: 3em;
}

.works-box {
    width: 24%;
    margin-bottom: 4em;
}

.works-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.works-box p {
    font-size: 20px;
    color: var(--font-color);
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 10px;
}

.works-box span {
    font-size: 12px;
    color: var(--accent-color);
}

.works-tag {
    line-height: 1.6;
}

.works-tag a::before {
    content: "/";
    color: var(--accent-color);
    font-size: 10px;
    font-weight: normal;
    margin-right: 13px;
    margin-left: 5px;
}

.works-tag a:first-child::before {
    display: none;
}

.btn-box {
    text-align: center;
    margin-top: 5em;
}

.btn-box a {
    background-color: var(--accent-color);
    padding: 20px 70px 20px 70px;
}

@media screen and (max-width: 768px) {
    .works-flex {
        flex-wrap: wrap;
    }

    .works-box {
        width: 49%;
    }
}

@media screen and (max-width: 450px) {
    .works-box {
        width: 100%;
        margin-bottom: 2em;
    }
}



/* --------------------------------
/* --------------------------------
 * SERVICE
 * --------------------------------
 * -------------------------------- */

.service-flex {
    position: relative;
    display: flex;
    justify-content: end;
    padding-top: 5em;
    padding-bottom: 5em;
}

.service-flex-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 55%;
    position: absolute;
    left: 0;
}

.service-flex-left a {
    width: 48%;
}

.service-flex-left a img {
    width: 100%;
    margin-bottom: 4%;
}

.service-flex-right {
    width: 55%;
    background-color: #FFF;
    padding: 5em 1.5em 6em 10.5em;
    margin-top: 4em;
}

.service-flex-right h2 {
    font-size: 56px;
    color: var(--font-color);
    margin: 0;
    margin-bottom: 20px;
}

.service-flex-right span {
    display: inline-block;
    color: var(--font-color);
    font-size: 14px;
    margin-bottom: 15px;
}

.service-flex-right p {
    color: var(--font-color);
    font-size: 18px;
    line-height: 1.6;
}

.left {
    text-align: left !important;
}

.faq-wrapper {
    text-align: center;
    padding-top: 5em;
    padding-bottom: 5em;
}

@media screen and (max-width: 1200px) {
    .service-flex-right {
        padding: 5em 1.5em 6em 13vw;
    }
}

@media screen and (max-width: 768px) {
    .sp-bg-white {
        background-color: #FFF;
    }

    .service-flex {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column-reverse;
        padding-top: 2em;
    }

    .service-flex-left {
        position: initial;
        width: 100%;
    }

    .service-flex-left a {
        width: 100%;
    }

    .service-flex-right {
        margin: 0;
        width: 100%;
        padding: 70px;
    }

    .service-flex-right h2 {
        text-align: center;
    }

    .service-flex-right span {
        display: block;
        text-align: center;
    }

    .service-flex-right p {
        margin-top: 3em;
    }

    .service-flex-right .btn-box {
        text-align: center !important;
    }

    .service-flex-left a {
        width: 49%;
    }

    .service-flex-left a img {
        width: 100%;
    }

    .faq-wrapper img {
        width: 100%;
        max-width: 500px;
    }
}

@media screen and (max-width: 450px) {
    .service-flex-right {
        padding: 70px 0px 70px 0px;
    }

    .service-flex-left a {
        width: 100%;
    }
}


/* --------------------------------
/* --------------------------------
 * LOCATION
 * --------------------------------
 * -------------------------------- */

.location-title {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 2em;
}

.location-title h3 {
    text-align: center;
    font-size: 30px;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.location-title span {
    color: var(--font-color);
    font-weight: bold;
    padding-top: 3em;
    padding-bottom: 2em;
}

.arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #FFF;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}

.arrow::before,
.arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 4%;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow-01::before {
    width: 15px;
    height: 15px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

iframe {
    display: block;
}

.contact-center {
    text-align: center;
    padding-top: 3em;
    padding-bottom: 3em;
}

.contact-bg {
    background-color: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-right: 4em;
    padding-left: 4em;
}

.contact-bg h3 {
    font-size: 20px;
}

.line {
    width: 1px;
    height: 30px;
    background-color: #FFF;
    margin-left: 30px;
    margin-right: 30px;
}

.contact-bg p {
    text-align: left;
    line-height: 1.8;
}

@media screen and (max-width: 768px) {
    .contact-center {
        padding: 0;
    }

    .contact-bg {
        flex-direction: column;
    }

    .line {
        height: 1px;
        width: 30px;
    }

    .arrow::before,
    .arrow::after {
        bottom: -80%;
    }
}



/* --------------------------------
/* --------------------------------
 * FOOTER
 * --------------------------------
 * -------------------------------- */

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    padding-top: 5em;
}

.footer-box {
    width: 19%;
}

.footer-box img {
    width: 60%;
}

.footer-box a {
    color: var(--font-color);
}

.ft-link a {
    display: table;
    margin-bottom: 25px;
}

.ft-img {
    display: inline !important;
    width: 30%;
}

.sns-icon-box img {
    margin-top: 10px;
    max-width: 34px;
    margin-right: 20px;
}

.ft-title {
    color: var(--accent-color) !important;
}

.copyright {
    color: var(--font-color);
    text-align: right;
    padding-bottom: 2em;
}

.pc-view-flex {
    display: flex;
}

.pc-view {
    display: block;
}

.sp-view {
    display: none;
}

.accordion-box {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--font-color);
}

.accordion-txt {
    margin-top: 5px;
    color: var(--accent-color);
}

.accordion-txt a {
    color: var(--accent-color);
}

.ac-q {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #FFF;
    border-radius: 30px;
    padding: 0px 7px 0px 8px;
    font-size: 22px !important;
    margin-right: 7px;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color);
}

.ac-a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #F6B870;
    border-radius: 30px;
    padding: 0px 12px 0px 11px;
    font-size: 22px !important;
    margin-right: 7px;
    margin-top: 9px;
    color: #FFF !important;
}

.acd-check {
    display: none !important;
}

.acd-label {
    display: flex;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
    border-bottom: 3px solid var(--main-color);
    color: var(--main-color);
    font-size: 18px;
    font-weight: bold !important;
    align-items: start;
    padding-right: 35px;
    justify-content: center;
}

.acd-label:after {
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    height: 52px;
    padding: 14px 20px;
    position: absolute;
    right: 0;
    top: 0px;
    font-weight: 900;
    color: var(--font-color);
}

.add-footer {
    display: flex;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
    border-bottom: 3px solid var(--main-color);
    color: var(--main-color);
    font-size: 18px;
    font-weight: bold !important;
    align-items: start;
    padding-right: 35px;
    justify-content: center;
}

.acd-content {
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
    text-align: left;
    padding-left: 55px !important;
}

.q-flex {
    display: inline-block;
    padding-right: 25px;
}

.q-flex p {
    text-align: left;
    color: var(--font-color);
}

.q-flex a {
    color: var(--font-color);
}

.acd-check:checked+.acd-label:after {
    content: '\f068';
}

.acd-check:checked+.acd-label+.acd-content {
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

.sp-ft-title {
    text-align: center;
    padding-right: 20px;
    font-size: 18px;
    padding-top: 25px;
}

.pd13 {
    padding-top: 13px !important;
}

.sp-ft-title a {
    color: var(--accent-color);
}

@media screen and (max-width: 768px) {
    .pc-view-flex {
        display: none;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: block;
    }

    .copyright {
        margin-top: 30px;
        padding-bottom: 1em;
    }

    .ft-img {
        display: block !important;
        width: 100%;
        text-align: center;
        padding-top: 40px;
    }
}

/* ------ 下層ページ ------ */
.sub-page-top {
    padding-top: 10em;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.company-profile {
    padding-bottom: 7em;
}

.company-title {
    width: 33%;
}

.company-title h3 {
    color: var(--accent-color);
    font-size: 30px;
    margin-bottom: 10px;
}

.company-title span {
    color: var(--font-color);
}

.company-img {
    width: 65%;
}

.company-img img {
    width: 100%;
}

.company-profile-box {
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--font-color);
}

.company-profile-box .title {
    width: 20%;
    color: var(--font-color);
}

.company-profile-box .text {
    width: 75%;
    color: var(--font-color);
}

@media screen and (max-width: 768px) {
    .concept-flex-right p {
        margin-bottom: 0;
    }

    .contents-box {
        flex-direction: column;
        padding-bottom: 2em;
    }

    .company-title {
        width: 100%;
    }

    .company-img {
        width: 100%;
    }

    .company-profile-box {
        flex-direction: column;
    }

    .company-profile-box .title {
        width: 100%;
        margin-bottom: 10px;
    }

    .company-profile-box .text {
        width: 100%;
    }
}

.breadcrumb-wrapper a {
    color: var(--font-color);
}

.breadcrumb-wrapper span {
    color: var(--font-color);
}

.service-box p {
    color: var(--font-color);
    text-align: center;
    padding-top: 2em;
    padding-bottom: 2em;
    line-height: 2.2;
    font-weight: bold;
}

.service-box img {
    width: 100%;
}

.next-arrow {
    padding-left: 10px;
    padding-right: 10px;
}

.effect-blur {
    overflow: hidden;
    position: relative;
}

.service-detail-img {
    background-image: url(../img/srv_01.jpg);
    height: 200px;
    background-position: top center;
    background-size: cover;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.service-detail-img::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    opacity: 0;
    transition: .4s ease-in-out;
}

.service-detail-img:hover::before {
    opacity: 1;
}

.service-detail-img .hover-text {
    position: absolute;
    top: 95px;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: .4s ease-in-out;
    color: #FFF;
}

.service-detail-img:hover .hover-text {
    opacity: 1;
}

.service-detail-box {
    display: flex;
    justify-content: space-between;
    margin-top: 3em;
}

.service-detail {
    width: 24%;
}

.pd5em {
    padding-top: 5em;
    padding-bottom: 5em;
}

.pdt5em {
    padding-top: 5em;
}

.sub-page-title h3 {
    color: var(--accent-color);
    font-size: 30px;
    text-align: center;
    margin-bottom: 10px;
}

.sub-page-title span {
    display: block;
    color: var(--font-color);
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

.flow-img {
    max-width: 1062px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .flow-img {
        max-width: 500px;
    }

    .service-detail-box {
        flex-wrap: wrap;
    }

    .service-detail {
        width: 49%;
        margin-bottom: 2%;
    }
}

@media screen and (max-width: 500px) {
    .service-detail {
        width: 100%;
        margin-bottom: 2%;
    }
}

.service-detail-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-detail-flex-box {
    width: 49%;
}

.service-detail-flex-box h3 {
    font-size: 30px;
    color: var(--accent-color);
    margin-bottom: 10px;
    margin-top: 10px;
}

.service-detail-flex-box span {
    display: block;
    font-size: 14px;
    color: var(--font-color);
    margin-bottom: 3em;
}

.service-detail-flex-box p {
    color: var(--font-color);
    line-height: 1.8;
}

.service-detail-flex-box img {
    width: 100%;
}

.add-service-btn {
    display: inline-block;
    text-align: left;
    margin-top: 1em;
    padding: 20px 0px 20px 0px;
}

.add-service-btn .arrow-01::before {
    width: 5px;
    height: 5px;
    bottom: 0%;
}

.works-btn .arrow-01::before {
    bottom: 0%;
}

.add-sub-page-flex {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.add-sub-page-flex .work-title {
    font-size: 20px;
    color: var(--font-color);
    width: 100%;
    padding-bottom: 2em;
    padding-top: 3em;
}

.add-sub-page-flex .works-box {
    width: 49%;
}

.works-wrapper {
    padding-bottom: 5em;
}

.works-btn {
    margin-top: 0;
}

.works-btn .arrow-01::before {
    width: 5px;
    height: 5px;
}

.bg-gray .service-detail-flex {
    padding-top: 5em;
}

.pdl30 {
    padding-left: 30px;
}

.sub-page-bg {
    background-color: #f0f0f0;
}

.breadcrumb-wrapper {
    padding-top: 3em;
    padding-bottom: 1em;
    color: var(--font-color);
}

@media screen and (max-width: 768px) {
    .service-detail-flex {
        flex-direction: column-reverse;
    }

    .bg-gray .service-detail-flex {
        flex-direction: column;
    }

    .service-detail-flex-box {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .add-sub-page-flex .works-box {
        width: 100%;
    }
}

.works-bg {
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 4em;
    padding-right: 4em;
}

.works-bg h3 {
    color: #FFF;
    font-size: 20px;
    width: 20%;
}

.add-work-list {
    display: inline-block;
    list-style: disc;
    text-align: left;
    width: 80%;
    line-height: 2;
    padding-left: 15px;
}

.add-work-list li::marker {
    color: #FFF;
}

.add-work-list li {
    margin: 0;
}

.work-line {
    width: 1px;
    height: 30px;
    background-color: #FFF;
    margin-left: 50px;
    margin-right: 50px;
}

@media screen and (max-width: 768px) {
    .works-bg {
        flex-direction: column;
        padding-left: 2em;
        padding-right: 2em;
    }

    .works-bg h3 {
        width: 100%;
    }

    .add-work-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 1em;
    }

    .add-work-list li {
        margin-right: 3em;
    }

    .work-line {
        width: 30px;
        height: 1px;
        margin-bottom: 1em;
    }
}

.works-page-box {
    max-width: 800px;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.works-page-box .works-box img {
    height: 300px;
}

.add-faq .acd-label {
    justify-content: left;
}

.plus {
    position: absolute;
    right: -25px;
    top: 2px;
    width: 1em;
    height: 1em;
    pointer-events: none;
}

.plus::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 2px;
    background-color: #FFF;
}

.plus::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 60%;
    background-color: #FFF;
}

.relative {
    position: relative;
}

.ml60 {
    margin-left: 60px;
}

.service-more-box {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    padding-top: 40px;
}

.relative:hover .service-more-box {
    opacity: 1;
    pointer-events: auto;
}

.service-more-box p {
    padding: 30px;
    background-color: #FFF;
    margin: 0;
}

.service-more-box p a {
    color: var(--font-color);
}

.service-more-box::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 67%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #fff transparent;
}

.add-mb {
    margin-bottom: 9%;
}

.service-flex-left a {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .add-mb {
        margin-bottom: 4%;
    }
}

.img-01 {
    background-image: url(../img/srv_01.jpg);
}

.img-02 {
    background-image: url(../img/srv_02.jpg);
}

.img-03 {
    background-image: url(../img/srv_03.jpg);
}

.img-04 {
    background-image: url(../img/srv_04.jpg);
}

.container {
    align-items: flex-end !important;
}

.contact-form-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.contact-form-flex p {
    margin: 0;
}

.contact-title {
    width: 15%;
    color: var(--font-color);
    font-weight: bold;
}

.hissu {
    color: #FFF;
    background-color: #d50000;
    font-size: 0.8em;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    min-width: 49px;
}

.ninni {
    color: #FFF;
    background-color: var(--font-color);
    font-size: 0.8em;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    min-width: 49px;
}

.wpcf7-form-control-wrap {
    width: 100%;
    padding-left: 40px;
}

.wpcf7-form-control {
    width: 100%;
    border: 1px solid var(--font-color);
    height: 45px;
    padding-left: 20px;
    padding-right: 20px;
    width: 500px;
}

textarea {
    height: auto !important;
    width: 500px;
}

.textarea-box {
    align-items: flex-start;
}

.add-mr {
    margin-right: 5px;
}

.privacy-link {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 5px;
}

.contact-btn {
    text-align: center;
}

.screen-reader-response ul {
    display: none !important;
}

.screen-reader-response p {
    text-align: center;
}

.wpcf7-not-valid-tip {
    display: none !important;
}

.wpcf7-response-output {
    text-align: center;
    color: var(--font-color);
    background-color: #e9e9e9;
}

.wpcf7-submit {
    border: none;
    background-color: var(--accent-color);
    color: #FFF;
    cursor: pointer;
    font-weight: bold;
}

.wpcf7-submit:hover {
    opacity: 0.7;
}

.screen-reader-response {
    color: var(--font-color);
    background-color: #e9e9e9;
}

@media screen and (max-width: 768px) {
    .contact-form-flex {
        flex-wrap: wrap;
        justify-content: left;
    }

    .contact-title {
        width: auto;
    }

    .hissu,
    .ninni {
        margin-left: 10px;
    }

    .wpcf7-form-control-wrap {
        padding: 0;
        padding-top: 1em;
    }

    .wpcf7-form-control {
        padding: 10px;
        font-size: 1em;
        width: 100%;
    }

    .contact-form-flex p {
        margin: 0;
        margin-top: 10px;
        width: 100%;
    }
}

.logo-change-after {
    display: none;
}

.add-head {
    background-color: #FFF;
}

.add-none {
    display: none;
}

.add-show {
    display: block;
}

.add-color {
    background: var(--font-color);
}

input,
textarea {
    -webkit-appearance: none;
}

input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
}

button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]:checked+label {
    background: #ff0000;
}

input {
    white-space: normal;
}

input[type="submit"] {
    height: auto!important;
    padding: 20px;
}

.bg-gray-gray {
    background-color: #c2c2c2;
    padding-top: 3em;
    padding-bottom: 3em;
}

.bg-gray-gray a img {
    max-width: 156px;
    width: 100%;
}

.center {
    text-align: center;
}

/* workが追加され次第削除予定*/
#con-01,
#con-02,
#con-03,
#con-04 {
    padding-bottom: 4em;
}

.privacy-wrapper h2 {
    font-size: 2em;
    color: var(--font-color);
    line-height: 1.2!important;
}

.privacy-wrapper h3 {
    font-size: 1.6em;
    margin-top: 2em;
    color: var(--font-color);
}

.privacy-wrapper a {
    color: var(--font-color);
    border-bottom: 1px solid var(--font-color);
    padding-bottom: 2px;
    margin-left: 5px;
    padding-right: 5px;
}

.privacy-wrapper .text {
    color: var(--font-color);
    line-height: 1.8;
}

.privacy-wrapper .sub-text {
    font-size: 14px;
    color: var(--font-color);
    line-height: 1.8;
}

.adjust-lh {
    line-height: 1!important;
}