@charset "utf-8";

/*-------------------------------------------------------------------------
NOSANS読み込み
-------------------------------------------------------------------------*/

@font-face {
    font-family: 'NotoSansJP';
    src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansJP';
    src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansJP';
    src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansJP';
    src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansJP';
    src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

/*-------------------------------------------------------------------------
UI（装飾背景・文字色・ボタン）
-------------------------------------------------------------------------*/

.ui-top-section {
    padding-block: 60px;
}
.ui-bg-text {
    background: #F8F8F8 url("/images/index/bg_text.webp") repeat center;
}
.ui-centering {
    width: var(--screen-size);
    margin-inline: auto;
}
.ui-hgroup {
    margin-block: 0 20px;
    display        : flex;
    gap            : 20px;
    flex-direction : row-reverse;
    justify-content: flex-end;
    align-items: center;
}
.is-dark .ui-title,
.is-dark .ui-en-title {
    color: #fff;
}
.l-main .ui-title {
    border-bottom: 3px solid currentColor;
    padding: 0 0 3px;
    position: relative;
    bottom  : -11px;
    font-size  : 20px;
    font-weight: 700;
}
.l-main .ui-en-title {
    font-family: var(--archivo);
    font-size  : 80px;
    font-weight: 900;
    text-transform: uppercase;
    speak: none;
}
[class*="ui-btn-arw--"]{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition: 0.4s;
}
[class*="ui-btn-arw--"] svg {
    width: 5px;
    height: 8px;
    transition: 0.4s;
}
.ui-btn-arw--dark {
    background-color: var(--dark-color);
}
    .ui-btn-arw--dark svg {
        stroke: #fff;
    }
.ui-btn-arw--light {
    background-color: #fff;
}
    .ui-btn-arw--light svg {
        stroke: var(--dark-color);
    }

[class*="searech__btn--"]{
    width: 117px;
    height: 48px;
    display        : flex;
    gap            : 5px;
    align-items    : center;
    justify-content: center;
    font-size  : 16px;
    font-weight: 500;
    color      : #fff;
    letter-spacing: .1em;
    padding: 0 0 0 7px;
    transition: 0.4s;
}
.searech__btn--dark {
    background-color: var(--dark-color);
    border: 2px solid var(--dark-color);
}
.searech__btn--main {
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
}
.searech__btn--dark:hover {
    background-color: #fff;
    color: var(--dark-color);
}
.searech__btn--main:hover {
    background-color: #fff;
    color: var(--main-color);
}
    [class*="searech__btn--"] svg {
        width: 17px;
        height: 17px;
        transition: filter 0.4s;
    }
    /* 外部SVGスプライトはCSSのfillが効かないため、filterで色を変える */
    .searech__btn--dark:hover svg {
        filter: brightness(0);
    }
    .searech__btn--main:hover svg {
        filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(1604%) hue-rotate(181deg) brightness(93%) contrast(101%);
    }