/**********************************************
***  親テーマ　スタイル設定
***********************************************/
/*
.l-header {
    background: url(../images/back01.jpg) repeat-x center center / contain;
}
.l-content {
    background: url(../images/back01.jpg) repeat-y center center / contain;
}
*/
.l-container {
    max-width: var(--max-width1);
}
.l-header {
    background: initial;
}
@media screen and (max-width: 768px) {
    .l-header {
        background: var(--color-accent1);
    }
}

.l-header__body.l-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    min-height: 4rem;
}
.l-content__body {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.l-header__center {
    grid-area: left;
    padding: 8px;
}
@media screen and (max-width: 768px) {
    .l-header__center {
        width: 14rem;
    }
}

.l-header__drawerBtn svg:not([fill]) {
    fill: var(--color-accent2);
}

/* ハンバーガーボタン */
.l-header__drawerBtn {
    position: absolute;
    right: .5rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

/* トップページ */
.home .l-content__body {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
}

/**********************************************
***  サイトコンテンツ　スタイル設定
***********************************************/

/*
***  共通設定
****************************************/
:root {
    --max-width1: 1200px;
    --max-width2: 1000px;
    --contents-pd: 3rem;
}
@media screen and (max-width: 768px) {
    :root {
        --contents-pd: 1.5rem;
    }
}

.inner {
    max-width: var(--max-width1);
    margin: 0 auto;
    padding: 6rem var(--contents-pd);
}
@media screen and (max-width: 768px) {
    .inner {
        padding: 3rem var(--contents-pd);
    }
}

:root {
    --h2-line-w: 4px;
    --h2-line-pd: 1rem;
}
h2 {
    position: relative;
    width: fit-content;
    height: fit-content;
    font-size: 1rem;
    font-family: var(--font-family-en);
    padding-left: var(--h2-line-pd);
    color: var(--color-accent1);
    margin-bottom: 2em;
}
h2 span {
    display: block;
    font-size: 200%;
    color: var(--color-accent1);
    opacity: .5;
    font-family: var(--font-family-en);
    line-height: 1;
    margin-bottom: .5em;
    font-weight: 600;
}
h2::before {
    position: absolute;
    content: "";
    width: var(--h2-line-w);
    height: 100%;
    background: var(--color-accent1);
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}
h2.color-w::before {
    background: white;
}
@media screen and (max-width: 768px) {
    h2 {
        margin-bottom: 1em;
    }
}

h3 {
    font-family: var(--font-family-main);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--color-accent2);
    font-weight: 600;
}

h4 {
    position: relative;
    width: 100%;
    font-family: var(--font-family-main);
    font-size: 1rem;
    font-weight: 600;
    padding-left: 1.3em;
    margin-bottom: .5em;
}
h4::before {
    position: absolute;
    content: "";
    width: 1em;
    height: 2px;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    background: var(--color-accent2);
}

.img-frame {
    background: white;
    padding: 5px;
    box-shadow: var(--box-shadow1);
}

/* 背景設定 */
.bg-gray {
    background: var(--color-light-gray);
}

/* パターン背景 */
.bk-pattern {
    position: relative;
    & > div {
        position: relative;
        z-index: 2;
    }
}
.bk-pattern::before, .bk-pattern::after {
    position: absolute;
    content: "";
    width: 30%;
    max-width: 30rem;
    height: 100%;
}
.bk-pattern.-pattern1::before {
    top: 0;
    right: 0;
    background: url(../images/pattern01.png) no-repeat right top / contain;
    opacity: .07;
}
.bk-pattern.-pattern1::after {
    bottom: 0;
    left: 0;
    background: url(../images/pattern02.png) no-repeat left bottom / contain;
}

.bk-pattern.-pattern2::before {
    top: 0;
    right: 0;
    background: url(../images/pattern01.png) no-repeat right top / contain;
    opacity: .07;
}
.bk-pattern.-pattern2::after {
    bottom: 0;
    left: -4%;
    background: url(../images/pattern01.png) no-repeat left top / contain;
    transform: scale(-1);
    opacity: .07;
}

.bk-pattern.-pattern3::before {
    top: 0;
    left: -4%;
    background: url(../images/pattern02.png) repeat-y left top / 100%;
}
.bk-pattern.-pattern3::after {
    display: none;
}
.bk-pattern.-pattern3 .inner {
    padding-left: 10%;
}

.bk-pattern.-pattern4::before {
    max-width: 15rem;
    top: 0;
    right: -4%;
    background: url(../images/pattern02.png) repeat-y right top / 100%;
}
.bk-pattern.-pattern4::after {
    display: none;
}

.bk-pattern.bg-gray .inner {
    background: var(--color-light-gray);
}

@media screen and (max-width: 768px) {
    .bk-pattern::before, .bk-pattern::after {
        width: 60%;
    }
    .bk-pattern.-pattern3 .inner {
        padding-left: var(--contents-pd);
    }
}



/* ボタン設定 */
:root {
    --more-btn-shift: .7em;
}
.more-btn {
    width: 100%;
    margin: auto auto 2rem;
    & a {
        position: relative;
        display: inline-block;
        width: fit-content;
        padding: .7em 1em;
        color: var(--color-accent2);
        font-size: 1.4rem;
        font-family: var(--font-family-en);
        line-height: 1;
    }
    & a.color-w {
        color: white;
    }
    & a::before, a::after {
        position: absolute;
        content: "";
        background: var(--color-accent2);
    }
    & a.color-w::before, a.color-w::after {
        background: white;
    }
    & a::before {
        width: 90%;
        height: 1px;
        bottom: 0;
        right: calc(var(--more-btn-shift) * -1);
    }
    & a::after {
        width: 1px;
        height: 90%;
        bottom: calc(var(--more-btn-shift) * -1);
        right: 0;
    }
}
@media screen and (max-width: 768px) {
    .more-btn {
        & a {
            font-size: 1rem;
        }
    }
}

/* コンテンツ共通設定 */
.contents-pd-l {
    padding-left: var(--contents-pd);
}
.contents-pd-r {
    padding-right: var(--contents-pd);
}
@media screen and (max-width: 768px) {
    .contents-pd-l {
        padding-left: 0;
    }
    .contents-pd-r {
        padding-right: 0;
    }
}
.contents-img {
    & img {
        box-shadow: var(--box-shadow1);
    }
}
@media screen and (max-width: 768px) {
    .contents-img {
        margin-bottom: 2rem;
    }
}

.contents-box {
    margin: 3rem auto;
}

/* column設定（point-box） */
:root {
    --point-box-image-w: 40%;
    --point-box-image-shift: 1rem;
    --point-box-contents-w: calc(100% - var(--point-box-image-w));
    --point-box-pd: 2rem;
}
.point-box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5rem;

    & .point-image {
        position: relative;
        width: var(--point-box-image-w);
        padding-right: var(--point-box-image-shift);
        padding-bottom: var(--point-box-image-shift);
    }
    & .point-image::before {
        position: absolute;
        content: "";
        width: calc(100% - var(--point-box-image-shift));
        height: calc(100% - var(--point-box-image-shift));
        right: 0;
        bottom: 0;
        background: var(--color-accent1);
        opacity: .15;
        z-index: -1;
    }

    & .point-contents {
        width: var(--point-box-contents-w);
        padding-left: var(--point-box-pd);
    }
    & .point-contents h3 {
        position: relative;
        font-size: 1.3rem;
        color: var(--color-accent1);
        font-family: var(--font-family-en);
        padding-left: 2em;
        padding-top: .5em;
    }
    & .point-contents h3 span {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        font-size: 2em;
        margin-right: .3em;
        opacity: .5;
        line-height: 1;
        font-family: var(--font-family-en);
    }
}
.point-box:nth-child(odd) {
    & .point-image {
        order: 2;
    }

    & .point-contents {
        order: 1;
        padding-left: 0;
        padding-right: var(--point-box-pd);
    }
}
@media screen and (max-width: 768px) {
    :root {
        --point-box-image-w: 100%;
        --point-box-contents-w: 100%;
        --point-box-pd: 0;
    }
    .point-box {
        margin-bottom: 2rem;
        & .point-contents {
            order: 1;
        }
        & .point-image {
            margin-bottom: 2rem;
            order: 2;
        }
    }
    .point-box:nth-child(odd) {
        & .point-contents {
            order: 1;
        }
        & .point-image {
            order: 2;
        }
    
    }
}

/* パンくずデザイン */
.p-breadcrumb {
    background: var(--color-black);
    & .p-breadcrumb__list {
        padding: 0 1rem;
    }
    & .p-breadcrumb__list li {
        color: white;
    }
    & .p-breadcrumb__list li span {
        color: white;
    }
}

/*
***  トップページ
****************************************/

/* ヘッダーのロゴまわり */
/*
.home .l-header__center {
    display: none;
}
*/
:root {
    --ark-header_height--fixed: 5.5rem;
}
.has-image>.c-headLogo {
    height: 4.5rem;
}
@media screen and (min-width: 768px) {
    .home .hidden-logo {
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }
    .home .visible-logo {
        opacity: 1;
        visibility: visible;
        transition: 0.3s;
        min-height: 2.5rem;
    }
}

/* FV */
:root {
    --top-fv-h: 95vh;
    --top-fv-menu-h: 10vh;
    --top-fv-img-h: calc(var(--top-fv-h) - var(--top-fv-menu-h));
    --top-fv-pd: 0;
}
.fv {
    background: var(--color-light-gray);
}
.fv-inner {
    position: relative;
    padding: var(--top-fv-pd);
}
.fv-area {
    width: 100%;
}
.fv-block {
    width: 50%;
}
.fv-menu {
    display: flex;
    width: 100%;
    height: 100%;
    background: white;
    & a.fv-logo {
        display: block;
    }
    & .fv-menu-inner {
        width: fit-content;
        margin-left: auto;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --top-fv-menu-h: 6vh;
        --top-fv-h: 40vh;
    }
    .fv {
        height: auto;
    }
    .fv-block {
        width: 100%;
    }
    .fv-menu-inner {
        display: none;
    }
}


/* FV ロゴ */
.-fv-accent-bk {
    position: relative;
    width: fit-content;
    height: var(--top-fv-menu-h);
    padding: .5rem 2.5rem .5rem 1rem;
    & img {
        position: relative;
        width: auto;
        height: 100%;
        z-index: 2;
    }
}
.-fv-accent-bk::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent1);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

/* オリジナルメニュー */
:root {
    --original-menu-icon-w: .7em;
    --original-menu-icon-pd: calc(var(--original-menu-icon-w) + .5em);
}
.original-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: right;
    height: var(--top-fv-menu-h);
    & a {
        display: flex;
        align-items: center;
    }
    & a span {
        position: relative;
        display: block;
        font-family: var(--font-family-en);
        color: var(--color-accent1);
        padding: .5em 1em;
        padding-left: var(--original-menu-icon-pd);
        text-align: right;
        font-size: 1.1rem;
        font-weight: 600;
        margin-left: 1em;
    }
    & a span::before {
        position: absolute;
        content: "";
        width: var(--original-menu-icon-w);
        height: var(--original-menu-icon-w);
        background: var(--color-accent2);
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
        mask: url(../images/menu-arrow01.svg) no-repeat center center / contain;
        -webkit-mask: url(../images/menu-arrow01.svg) no-repeat center center / contain;
    }
    & .-fv-accent-bk {
        padding: .5rem 8.5rem .5rem 1rem;
    }
    & .-fv-accent-bk span {
        color: white !important;
        z-index: 2;
    }
    & .-fv-accent-bk::after {
        padding: .5rem 1rem .5rem 2.5rem;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
    }
}

.fv-img {
    height: var(--top-fv-img-h);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.-fv-l {
    & .fv-img {
        background-image: url(../images/top_fv001.jpg);
    }
}
.-fv-r {
    & .fv-img {
        background-image: url(../images/top_fv002.jpg);
    }
}

:root {
    --fv-tx-w: calc(var(--top-fv-h) * .5);
}
.fv-tx {
    position: absolute;
    width: var(--fv-tx-w);
    height: var(--fv-tx-w);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../images/fv-tx-back01.png) no-repeat center center / contain;
    & p {
        height: 100%;
        font-family: var(--font-family-en);
        color: var(--color-accent1);
        font-weight: 900;
        writing-mode: vertical-rl;
        margin: auto;
        text-align: center;
        letter-spacing: 4px;
        font-size: 1.5rem;
    }
    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --fv-tx-w: calc(var(--top-fv-h) * .8);
    }
    .fv-tx {
        margin: 35% auto auto;
        & p {
            letter-spacing: 2px;
            font-size: 1.2rem;
        }
    }
}


/* concept */
.concept-catch {
    width: 85%;
    margin: 2rem auto 2rem 0;
    & p {
        font-size: 1.5rem;
        font-weight: 600;
        font-family: var(--font-family-en);
        color: var(--color-accent1);
        margin-bottom: 0;
    }
}
.concept-catch.mgl_0 {
    margin: .5rem auto 1.5rem 0;
}

@media screen and (max-width: 768px) {
    .concept-catch {
        width: 90%;
        & p {
            font-size: 4.3vw;
        }
    }
}

.contents-tx {
    & img {
        width: 95%;
        margin: 2rem auto;
    }
    & p span {
        display: inline-block;
    }
     p span.-name {
        width: 5.5em;
    }
    & p.-en span.-name {
        width: 11.5em;
    }
}


/* about */
.about-inner {
    max-width: 800px;
}
.about-table {
    margin: 2rem auto;
    & dl {
        margin-bottom: 1rem;
    }
    & dl dt {
        position: relative;
        width: 100%;
        padding: .5em .5em .5em 1.2em;
        font-family: var(--font-family-en);
        color: var(--color-accent1);
        font-weight: 900;
        border-bottom: 1px var(--color-accent1) dashed;
        font-size: 1.1rem;
    }
    & dl dt::before {
        position: absolute;
        content: "";
        width: .7em;
        height: .7em;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
        background: var(--color-accent2);
        mask: url(../images/menu-arrow01.svg) no-repeat center center / contain;
    }
    & dl dd {
        padding: .5em 1.5em;
    }
    & dd span {
        display: inline-block;
        width: 5em;
    }
    & dd.-en span {
        width: 10em;
    }
}

/*
***  事業概要
****************************************/
.project-head {
    margin-top: 0;
}
@media screen and (max-width: 768px) {
    .project-head {
        margin-top: 2rem;
    }
}


/*
***  お問い合わせ
****************************************/
.contact-inner {
    max-width: 800px;
}
.contact-form-box {
    margin: 3rem auto;
}

/* forminator */
.forminator-col {
    padding-left: 1em;
}
@media screen and (max-width: 768px) {
    .forminator-col {
        width: 100%;
        padding-left: 0;
    }
}

.forminator-field {
    display: flex;
    flex-wrap: wrap;
}

.forminator-row {
    display: flex !important;
    flex-wrap: wrap;
}

:root {
    --forminator-label-w: 12em;
    --input-bk: #F0F6FF;
}
.forminator-label {
    position: relative;
    display: block;
    width: var(--forminator-label-w);
    margin-bottom: .5em;
    font-weight: 600;
    color: var(--color-accent1);
    padding-left: 1.2em;
}
@media screen and (max-width: 768px) {
    .forminator-label {
        width: 100%;
    }
}
.forminator-label::before {
    position: absolute;
    content: "";
    width: .7em;
    height: .7em;
    top: .4em;
    left: 0;
    margin: 0;
    background: var(--color-accent2);
    mask: url(../images/menu-arrow01.svg) no-repeat center center / contain;
}
.forminator-input, .forminator-textarea {
    width: calc(100% - var(--forminator-label-w));
    background: var(--input-bk);
    border-radius: 5px;
}
@media screen and (max-width: 768px) {
    .forminator-input, .forminator-textarea {
        width: 100%;
    }
}
.forminator-radio {
    margin-right: 1em;
    & input {
        accent-color: var(--color-accent1);
        inline-size: 1.2rem;
        block-size: 1.2rem;
    }
}
span.forminator-radio-label {
    padding-left: .3em;
}
.forminator-select2 {
    background: var(--input-bk);
    border-radius: 5px;
}
span.forminator-error-message {
    color: var(--color-accent2);
}
.forminator-timepicker .forminator-col {
    padding-left: 0;
    border-left: 0;
}

span.forminator-required {
    color: var(--color-accent3);
}
.forminator-row-last .forminator-col {
    border: none;
}
.forminator-button-submit {
    display: block;
    background: var(--color-accent1);
    color: white;
    margin: 0 0 0 auto;
    padding: .5em 3em;
    border: none;
    font-weight: 600;
}


/*
***  フッター
****************************************/
.custom-footer {
    background-color: var(--color-light-gray);
}
.custom-footer__inner {
    padding: 4rem var(--contents-pd) 2rem;
}
.footer-info {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    & .footer-logo {
        width: 70%;
        max-width: 10rem;
        margin: 0 auto 3rem;
    }
    & .footer-menu {
        margin-bottom: 3rem;
        & a {
            position: relative;
            padding-left: 1.2em;
        }
        & a:not(:last-child) {
            margin-right: 2em;
        }
        & a span {
            color: white;
            font-weight: 600;
            font-family: var(--font-family-en);
        }
        & a::before {
            position: absolute;
            content: "";
            width: .7em;
            height: .7em;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto 0;
            background: var(--color-accent2);
            mask: url(../images/menu-arrow01.svg) no-repeat center center / contain;
        }
        & a.-fv-accent-bk::after {
            display: none;
        }
    }
    & .footer-address p {
        color: white;
        font-size: .9rem;
        font-weight: 200;
    }
}

@media screen and (max-width: 768px) {
    .footer-info {
        & .footer-menu {
            & a:not(:last-child) {
                margin-right: 1em;
            }
        }
    }
}


.custom-footer-copy {
    background: var(--color-black);
    & p {
        color: white;
        font-family: var(--font-family-en);
        margin-bottom: 0;
        padding: 1em 2em;
        font-size: .7rem;
    }
}

@media screen and (max-width: 768px) {
    .custom-footer__inner {
        padding-top: 3rem;
        padding-bottom: 3rem;
        & > .flex-c-c {
            align-items: flex-start;
        }
    }
    .footer-info {
        width: 100%;
        & p {
            font-size: 90%;
        }
    }

}


/**********************************************
***  固定（下層）ページ　スタイル設定
***********************************************/
.p-topArea.-noimg {
    background: var(--color-accent1);
    min-height: 20vh;
}
.c-pageTitle__main {
    font-family: var(--font-family-en);
    color: white;
    font-weight: 600;
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
    .p-topArea {
        min-height: 16vh;
    }
}


/**********************************************
***  ドロワーメニュー　スタイル設定
***********************************************/
.p-drawer {
    background: rgba(255,255,255,.97);
}
.c-drawerNav {
    & span {
        color: var(--color-accent1);
        font-family: var(--font-family-en);
        font-size: 1.2rem;
        font-weight: 600;
    }
    & .menu-item {
        width: 100%;
    }
    & a {
        text-align: center;
    }
}

/**********************************************
***  翻訳スイッチャー　スタイル設定
***********************************************/
.tr-switcher {
    position: absolute;
    height: fit-content;
    right: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 99;
    & select, option {
        cursor: pointer;
    }
}
@media screen and (max-width: 1000px) {
    .tr-switcher {
        right: 3rem;
    }
}
@media screen and (max-width: 768px) {
    .tr-switcher {
        right: 4rem;
    }
}