@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@600;700&Noto+Sans+JP:wght@400;500;600;700;900&display=swap');

/* ===============================================
# 共通
=============================================== */

:root {
    --wh: #fff;
    --bg: #2B2F38;
    --txt: #20222C;
    --gy: #EDF0F5;
    --gy2: #99A6AF;
    --main: #EE7800;
    --error: #EE2B00;
    --border: #ABB8C3;
    --gradation: linear-gradient(135deg, #EE7800 0%, #EE4E00 100%);
    --underline: #f3cfb1;

    --sans: 'Noto Sans JP', sans-serif;
    --serif: 'Noto Serif JP', serif;
    --akshar: 'Akshar', sans-serif;
}

html {
    font-size: calc(1 / 1440 * 100vw);
}
@media screen and (max-width: 768px) {
    html {
        font-size: calc(1 / 768 * 100vw);
    }
}

body {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14rem;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--txt);
}
@media screen and (max-width: 768px) {
    body {
        font-size: 29rem;
    }
}

* {
    box-sizing: border-box;
}

a {
    display: block;
    transition: ease .5s;
}

@media(hover: hover) {
    a:hover {
        color: var(--main);
    }
}

img {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

span {
    display: inline-block;
}

.sp {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .sp {
        display: block !important;
    }
    .pc {
        display: none !important;
    } 
}

/* :target::before {
    content:"";
    display: block;
    height: 80rem;
    margin: -80rem 0 0;
} */

section {
    position: relative;
    overflow: hidden;
    padding-block: 160rem;
}

.container {
    width: 90%;
    max-width: 1200rem;
    margin-inline: auto;
    padding: 0;
}
@media screen and (max-width: 768px) {
    section {
        /* padding-top: 246rem; */
        padding-top: 260rem;
        padding-bottom: 164rem;
    }

    .container {
        width: 100%;
        padding-inline: 57rem;
    }
}

/* ===============================================
# セクションタイトル
=============================================== */

.section__title {
    position: relative;
    padding-top: 120rem;
    font-size: 16rem;
    line-height: 1;
    letter-spacing: 0.12em;
    z-index: 2;
}

.section__title.center {
    text-align: center;
}

.section__title::before {
    content: attr(data-sub);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: var(--akshar);
    font-size: 120rem;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 600;
}

.section__title.large {
    padding-top: 160rem;
}

.section__title.large::before {
    font-size: 160rem;
}

.section__title.small {
    padding-top: 96rem;
}

.section__title.small::before {
    font-size: 96rem;
}

.section__title.center::before {
    left: 50%;
    transform: translateX(-50%);
}

.spray {
    position: absolute;
    top: -12%;
    left: 0;
    width: 100%;
    height: 800rem;
    z-index: 1;
    clip-path: inset(0 100% 0 0);
}

@media screen and (max-width: 768px) {
    .section__title {
        font-size: 29rem;
        padding-top: 106rem;
        text-align: center;
    }

    .section__title::before {
        width: 100%;
        font-size: 98rem;
    }

    .section__title.large {
        padding-top: 139rem;
    }

    .section__title.large::before {
        font-size: 131rem;
    }

    .spray {
        width: 100%;
        height: 768rem;
        /* top: -20%; */
        top: -30rem;
    }
}

/* ===============================================
# ボタン
=============================================== */
.btn__text {
    display: inline-block;
    font-size: 22rem;
    margin-bottom: 20rem;
    text-align: left;
}

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 208rem;
    padding: 17.5rem 32rem;
    border-radius: 100rem;
    font-size: 12rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    transition: .3s ease-out;
}

.btn.wh {
    background: var(--wh);
    color: var(--txt);
}

@media(hover: hover) {
    .btn.wh:hover {
        background: var(--main);
        color: var(--wh);
    }
}

.btn.wh::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16rem;
    transform: translateY(-50%);
    width: 32rem;
    height: 32rem;
    background: url(../img/arrow-bk.svg) no-repeat center / contain;
    transition: .3s ease-out;
    pointer-events: none;
}

@media(hover: hover) {
    .btn.wh:hover::after {
        background: url(../img/arrow-wh-og.svg) no-repeat center / contain;
    }
}

.btn.wh-o {
    background: var(--wh);
    color: var(--main);
    border: 1px solid var(--main);
}

@media(hover: hover) {
    .btn.wh-o:hover {
        background: var(--main);
        color: var(--wh);
    }
}

.btn.og {
    background: var(--main);
    color: var(--wh);
}

.btn.og::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16rem;
    transform: translateY(-50%);
    width: 32rem;
    height: 32rem;
    background: url(../img/arrow-wh-og.svg) no-repeat center / contain;
    transition: .3s ease-out;
    pointer-events: none;
}

@media(hover: hover) {
.btn.og:hover {
        background: var(--wh);
        color: var(--main);
    }

    .btn.og:hover::after {
        background: url(../img/arrow-og.svg) no-repeat center / contain;
    }
}

.btn.work {
    font-size: 16rem;
}

.btn.map {
    font-family: var(--akshar);
    font-size: 16rem;
    letter-spacing: -0.02em;
}

.btn.work::after,
.btn.map::after {
    transform: translateY(-50%) rotate(-45deg);
}

.btn.back {
    justify-content: flex-end;
    text-align: right;
}

.btn.form {
    width: 272rem;
    padding: 25rem 36rem;
    font-size: 16rem;
}

.btn__form {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    cursor: pointer;
}

.btn__form::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16rem;
    transform: translateY(-50%);
    width: 48rem;
    height: 48rem;
    background: url(../img/arrow-wh-og.svg) no-repeat center / contain;
    transition: .3s ease-out;
    pointer-events: none;
}

@media(hover: hover) {
    .btn__form:hover .btn {
        background: var(--wh);
        color: var(--main);
    }

    .btn__form:hover::after {
        background: url(../img/arrow-og.svg) no-repeat center / contain;
    }
}

.btn__form.back.wh .btn {
    border: 1px solid var(--gy);
}

.btn__form.back.wh::after {
    left: 16rem;
    right: auto;
    background: url(../img/arrow-back.svg) no-repeat center / contain;
}

@media(hover: hover) {
    .btn__form.back.wh:hover .btn {
        background: transparent;
        color: var(--txt);
        border: 1px solid var(--txt);
    }

    .btn__form.back.wh:hover::after {
        background: url(../img/arrow-back-hover.svg) no-repeat center / contain;
    }
}

.btn__form.back.wh-o::after {
    left: 16rem;
    right: auto;
    background: url(../img/arrow-back-og.svg) no-repeat center / contain;
}

@media(hover: hover) {
    .btn__form.back.wh-o:hover .btn {
        background: var(--main);
        color: var(--wh);
        border: 1px solid var(--main);
    }

    .btn__form.back.wh-o:hover::after {
        background: url(../img/arrow-back-og-hover.svg) no-repeat center / contain;
    }
}

@media screen and (max-width: 768px) {
    .btn {
        width: 426rem;
        padding: 36rem 66rem;
        border-radius: 205rem;
        font-size: 25rem;
    }

    .btn.wh::after {
        right: 33rem;
        width: 66rem;
        height: 66rem;
    }

    .btn.work {
        font-size: 25rem;
    }

    .btn.map {
        font-size: 33rem;
        margin-inline: auto;
    }

    .btn.form {
        width: 426rem;
        padding: 36rem 66rem;
        font-size: 25rem;
    }

    .btn__form::after {
        right: 33rem;
        width: 66rem;
        height: 66rem;
    }

    .btn__form.back.wh::after {
        left: 33rem;
    }

    .btn__form.back.wh-o::after {
        left: 33rem;
    }
}

/* ===============================================
# 外部リンク
=============================================== */

.external {
    padding-right: 18px;
}

.external::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%2320222C" d="M7.5 0C7.08516 0 6.75 0.335156 6.75 0.75C6.75 1.16484 7.08516 1.5 7.5 1.5H9.43828L4.72031 6.22031C4.42734 6.51328 4.42734 6.98906 4.72031 7.28203C5.01328 7.575 5.48906 7.575 5.78203 7.28203L10.5 2.56172V4.5C10.5 4.91484 10.8352 5.25 11.25 5.25C11.6648 5.25 12 4.91484 12 4.5V0.75C12 0.335156 11.6648 0 11.25 0H7.5ZM1.875 0.75C0.839062 0.75 0 1.58906 0 2.625V10.125C0 11.1609 0.839062 12 1.875 12H9.375C10.4109 12 11.25 11.1609 11.25 10.125V7.5C11.25 7.08516 10.9148 6.75 10.5 6.75C10.0852 6.75 9.75 7.08516 9.75 7.5V10.125C9.75 10.3313 9.58125 10.5 9.375 10.5H1.875C1.66875 10.5 1.5 10.3313 1.5 10.125V2.625C1.5 2.41875 1.66875 2.25 1.875 2.25H4.5C4.91484 2.25 5.25 1.91484 5.25 1.5C5.25 1.08516 4.91484 0.75 4.5 0.75H1.875Z" /></svg>') no-repeat center / contain;
    transition: ease .5s;
}

@media(hover: hover) {
    .external:hover::after {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23EE7800" d="M7.5 0C7.08516 0 6.75 0.335156 6.75 0.75C6.75 1.16484 7.08516 1.5 7.5 1.5H9.43828L4.72031 6.22031C4.42734 6.51328 4.42734 6.98906 4.72031 7.28203C5.01328 7.575 5.48906 7.575 5.78203 7.28203L10.5 2.56172V4.5C10.5 4.91484 10.8352 5.25 11.25 5.25C11.6648 5.25 12 4.91484 12 4.5V0.75C12 0.335156 11.6648 0 11.25 0H7.5ZM1.875 0.75C0.839062 0.75 0 1.58906 0 2.625V10.125C0 11.1609 0.839062 12 1.875 12H9.375C10.4109 12 11.25 11.1609 11.25 10.125V7.5C11.25 7.08516 10.9148 6.75 10.5 6.75C10.0852 6.75 9.75 7.08516 9.75 7.5V10.125C9.75 10.3313 9.58125 10.5 9.375 10.5H1.875C1.66875 10.5 1.5 10.3313 1.5 10.125V2.625C1.5 2.41875 1.66875 2.25 1.875 2.25H4.5C4.91484 2.25 5.25 1.91484 5.25 1.5C5.25 1.08516 4.91484 0.75 4.5 0.75H1.875Z" /></svg>') no-repeat center / contain;
    }
}

@media screen and (max-width: 768px) {
    .external {
        padding-right: 37rem;
    }
    
    .external::after {
        width: 25rem;
        height: 25rem;
    }
}


/* ===============================================
# ヘッダー
=============================================== */

.header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10rem;
    padding: 10rem 116rem;
    width: 100%;
    background: rgba(255,255,255,0.8);
    box-sizing: border-box;
    z-index: 9999;
}

.header__logo {
    width: 312rem;
}

.top .header__logo {
    width: 446rem;
}

@media screen and (min-width: 769px) {
    .h-navigationPc {
        flex-shrink: 0;
    }

    .h-navigation__listPc {
        display: flex;
        align-items: center;
    }

    .h-navigation__itemPc:not(:first-child) {
        margin-left: 40rem;
    }

    .h-navigation__linkPc {
        position: relative;
        font-size: 14rem;
        line-height: 1.4;
        font-weight: 600;
        transition: ease .5s;
    }

    .h-navigation__linkPc:hover {
        color: var(--main);
    }

    .h-navigation__itemPc.h-contact {
        background: var(--gradation);
        border-radius: 21rem;
        padding: 1px;
    }

    .h-navigation__linkPc.h-contact {
        position: relative;
        padding: 10rem 28rem 12rem;
        background: var(--gradation);
        border-radius: 21rem;
    }

    .h-navigation__linkPc.h-contact::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--wh);
        border-radius: 21rem;
        transition: ease .5s;
    }

    .h-navigation__linkPc.h-contact:hover::before {
        opacity: 0;
    }

    .h-navigation__linkPc.h-contact span {
        position: relative;
        background: var(--gradation);
        color: var(--main);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: ease .5s;
    }

    .h-navigation__linkPc.h-contact:hover span {
        background: none;
        color: var(--wh);
        -webkit-text-fill-color: var(--wh);
    }
}

@media screen and (max-width: 768px) {
    .header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12rem 49rem;
        height: 123rem;
        background: rgba(255,255,255,1);
        z-index: 9999;
    }
    
    .header__logo,
    .top .header__logo {
        width: 191rem;
        flex-shrink: 0;
    }

    .hamburger__menu {
        width: 66rem;
        height: 82rem;
        position: relative;
        border: none;
        background: transparent;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        padding: 0;
        cursor: pointer;
    }

    .hamburger__menu .menu__bar {
        position: absolute;
        left: 0;
        right: 0;
        margin-inline: auto;
        display: inline-block;
        width: 53rem;
        height: 2px;
        background: var(--main);
        transition: .5s;
    }

    .hamburger__menu .menu__bar:first-child {
        top: 22rem;
    }

    .hamburger__menu .menu__bar:nth-child(2) {
        top: 40rem;
    }

    .hamburger__menu .menu__copy {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--akshar);
        font-size: 21rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.08em;
        color: var(--main);
        text-align: center;
    }

    .hamburger__menu.open .menu__bar {
        top: 30%;
    }

    .hamburger__menu.open .menu__bar:first-child {
        transform: translateY(-50%) rotate(45deg);
    }

    .hamburger__menu.open .menu__bar:nth-child(2) {
        transform: translateY(-50%) rotate(-45deg);
    }

    .h-navigation {
        position: absolute;
        top: 123rem;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--wh);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: ease .5s;
    }

    .h-navigation.open {
        opacity: 1;
        visibility: visible;
    }

    .h-navigation__wrap {
        overflow-y: auto;
        height: 100%;
        padding: 164rem 119rem 164rem;
    }

    .h-navigation__list {
        text-align: center;
    }

    .h-navigation__item {
        position: relative;
        width: fit-content;
        margin-inline: auto;
    }

    .h-navigation__item:not(:last-child) {
        margin-bottom: 66rem;
    }

    .h-navigation__item.h-contact {
        background: var(--gradation);
        border-radius: 57rem;
        padding: 2rem;
    }

    .h-navigation__link.h-contact {
        position: relative;
        padding: 35rem 160rem 39rem;
        background: var(--gradation);
        border-radius: 57rem;
    }

    .h-navigation__link.h-contact::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--wh);
        border-radius: 57rem;
        transition: ease .5s;
    }

    /* .h-navigation__link.h-contact:hover::before {
        opacity: 0;
    } */

    .h-navigation__link.h-contact span {
        position: relative;
        background: var(--gradation);
        color: var(--main);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: ease .5s;
    }

    /* .h-navigation__link.h-contact:hover span {
        background: none;
        color: var(--wh);
        -webkit-text-fill-color: var(--wh);
    } */

    .h-navigation__link {
        display: block;
        line-height: 1.4;
        letter-spacing: 0.08em;
        transition: .5s;
    }

    /* .h-navigation__link:hover {
        color: var(--main);
    } */

    .hamburger__logo {
        margin-top: 164rem;
        text-align: right;
    }

    .hamburger__logo img {
        width: 359rem;
    }
}

/* ===============================================
# フッター
=============================================== */
.footer {
    background: var(--wh);
    padding-top: 32rem;
    padding-bottom: 16rem;
}

.footer__nav {
    display: flex;
    align-items: center;
}

.footer__nav.top {
    padding-bottom: 24rem;
    margin-bottom: 16rem;
    border-bottom: 1px solid var(--gy);
}

.footer__item:not(:first-child) {
    margin-left: 40rem;
}

.footer__link {
    position: relative;
    line-height: 1.4;
    letter-spacing: 0.08em;
    transition: ease .5s;
}

.footer__nav.bottom .footer__link {
    font-size: 12rem;
}


@media(hover: hover) {
    .footer__link:hover {
        color: var(--main);
    }
}

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

.footer__items {
    text-align: right;
}

.footer__logo {
    width: 100rem;
    margin-bottom: 8rem;
}

.footer__copy {
    display: block;
    font-size: 10rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: var(--gy2);
}

@media screen and (max-width: 768px) {
    .footer {
        padding-top: 82rem;
        padding-bottom: 49rem;
    }
    
    .footer__nav {
        display: block;
    }
    
    .footer__nav.top {
        padding-bottom: 82rem;
        margin-bottom: 66rem;
    }

    .footer__item {
        line-height: 1;
    }
    
    .footer__item:not(:first-child) {
        margin-left: 0;
        margin-top: 41rem;
    }

    .footer__nav.bottom .footer__item:not(:first-child) {
        margin-top: 16rem;
    }
    
    .footer__nav.bottom .footer__link {
        font-size: 21rem;
    }

    .footer__link {
        display: inline-block;
    }
    
    /* .footer__link:hover {
        color: var(--main);
    } */
    
    .footer__bottom {
        display: block;
    }
    
    .footer__items {
        margin-top: 41rem;
    }
    
    .footer__logo {
        width: 205rem;
        margin-bottom: 16rem;
    }
    
    .footer__copy {
        font-size: 21rem;
    }
}

/* ===============================================
# 下層ページ共通
=============================================== */
.lower__top {
    padding-block: 60rem;
}

.lower__top .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.pankuzu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pankuzu__arrowm {
    width: 3.5rem;
}

.pankuzu * {
    color: var(--gy2);
    font-size: 12rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.pankuzu *:not(:last-child) {
    margin-right: 12rem;
}

.section__title.page404 {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .lower__top {
        padding-block: 60rem;
    }
    
    .lower__top .container {
        flex-direction: column;
    }
    
    .pankuzu {
        order: 1;
        margin-bottom: 60rem;
        gap: 25rem 0;
    }

    .lower__top .section__title {
        order: 2;
    }
    
    .pankuzu__arrowm {
        width: 7rem;
    }
    
    .pankuzu * {
        font-size: 25rem;
    }
    
    .pankuzu *:not(:last-child) {
        margin-right: 25rem;
    }

    .section__title.page404::before {
        font-size: 75rem;
    }
}

p.has-text-align-center {
    overflow: hidden;
}