@charset "UTF-8";

/* ------------------------------------------------
COMMON
◼︎ 共通パーツ
◼︎ 共通レイアウト設定
    HEADER
    FOOTER
------------------------------------------------ */

html {
    /* 基準フォントサイズ (1rem = 10px) */
    font-size: 62.5%;
    /* スムーズスクロール */
    scroll-behavior: smooth;
    /* スクロールバー用のスペースを常に確保 */
    scrollbar-gutter: stable;

    /* レイアウト設定 */
    overflow-x: clip;
}

body {
    /* フォントサイズの可変設定 */
    font-size: var(--clamp-size);

    /* レイアウト設定 */
    overflow-x: clip;

    /* フォント関連の設定 */
    font-family: var(--fontFamily-base);
    /* font-feature-settings: "palt"; */
    font-weight: var(--fontWeight-regular);
    line-height: var(--lineHeight-125);
    /* letter-spacing: var(--letterSpacing-4); */

    /* カラー設定 */
    color: var(--color-base);
    background-color: var(--color-bg);

    /* フォントレンダリングの最適化 */
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;

    /* 文字サイズの自動調整を防止 */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-optical-sizing: auto;
}

/* ヘッダー分下げる */
main {
    margin-top: var(--height-header);
}

/* スクロールマージン */
*[id] {
    scroll-margin-top: var(--height-header);
}

/* リンクの基本スタイル */
a {
    color: inherit;
    text-decoration: none;
    word-break: break-all;
}

picture {
    display: block;
    height: 100%;
}


/* buttonの基本スタイル */
button {
    color: var(--font-color);
}

a[target=_blank] {
    text-decoration: none;
}

/* telリンクのスタイル */
a[href^="tel:"] {
    text-decoration: none;
}

/* PCはtelリンク無効 */
@media (width >=768px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

iframe {
    vertical-align: baseline;
    width: 100%
}

/*  discのクラス名がついていたら付与 */
ul.disc {
    padding-left: 0.4em;
    
    li {
        padding-left: 0.2em;
        list-style-type: "\30FB"; /* 直接指定 */
    }
}



/* 機能
-----------------------------------------*/

/* PCサイズ以上に表示 */
@media (width >=768px) {
    .pc {
        display: block;
    }

    .sp {
        display: none !important;
    }
}

/* PC以外に表示 */
@media (width < 768px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

.nowrap {
    white-space: nowrap;
}

/* flexboxの設定 */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-rev {
    flex-direction: row-reverse;
}

.flex-col-rev {
    flex-direction: column-reverse;
}

@media (width < 768px) {
    .flex {
        flex-direction: column !important;
        align-items: center;
    }

    .flex>div {
        width: 100%;
    }
}

/* gap */
.gap-xs {
    gap: var(--space-xs);
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

.gap-xl {
    gap: var(--space-xl);
}



/* コンテナサイズ/セクションのインナー幅の指定
-----------------------------------------*/

.container {
    padding: var(--space-4xl) var(--padding-container);
    position: relative;
    /* セクション間の余白（各パーツでその他調整） */
}

/* セクションのインナー幅の統一 */
.inner-xsmall {
    margin-inline: auto;
    max-width: var(--width-inner-xsmall);
}

.inner-small {
    margin-inline: auto;
    max-width: var(--width-inner-small);
}

.inner-medium {
    margin-inline: auto;
    max-width: var(--width-inner-medium);
}

.inner-large {
    margin-inline: auto;
    max-width: var(--width-inner-large);
}

.inner-xlarge {
    margin-inline: auto;
    max-width: var(--width-inner-xlarge);
}

.whiteBox {
    background-color: var(--color-white);
    padding: 3em clamp(1em, 5.55vw, 80px);
}

.button-selected {
    background-color: var(--color-gray-dark) !important;
    color: var(--color-white) !important;
}

/* 見出し 
-----------------------------------------*/

/* 下層ページ用見出し -------- */
.heading1 {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: var(--fontWeight-bold);
    line-height: 1.5;
    text-align: center;
    padding-top: clamp(40px, 5.5vw, 80px);
    margin-bottom: clamp(20px, 2.77vw, 40px);
}

/* 水色の見出し */
.heading-sky {
    font-size: var(--fontSize-xl);
    font-weight: var(--fontWeight-semi-bold);
    color: var(--color-sky);
    margin-bottom: 1em;
}

/* グラデーションの見出し */
.heading-gradient {
    background-image: linear-gradient(-2deg, var(--color-sky), var(--color-blue));
    ;
    color: white;
    padding: 10px 20px;
    font-size: var(--fontSize-xl);
    font-weight: var(--fontWeight-bold);
    margin-bottom: var(--space-2xl);
}

/* ボタン
---------------------------------------- */

.btn {
    display: block;
    width: clamp(200px, 70vw, 287px);
    background: var(--gradient-reverse);
    color: var(--color-white);
    font-weight: var(--fontWeight-bold);
    text-align: center;
    padding: 1em 2em;
    margin-inline: auto;
    position: relative;
}

.btn-orange {
    background: var(--gradient-orange);
}

.btn::after {
    content: "";
    background: url(../img/common/btn_arrow.svg) no-repeat center center;
    color: white;
    width: 12px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translate(0, -50%);
    z-index: 1;
}

/* 共通リンクおよびボタン用ホバーアクション */
/* focusが当たった時のスタイル */
.link-hover:focus,
.btn-hover:focus {
    filter: brightness(1.05);
    transition: all 0.2s ease-in-out;
}

/* ホバー機能があるものとポイントデバイスを持つデバイス限定のためスマホやタブレットは適用外 */
@media (hover: hover) and (pointer: fine) {

    .link-hover:hover,
    .btn-hover:hover {
        filter: brightness(1.05);
        transition: all 0.2s ease-in-out;
    }
}

/* 丸に矢印が入ったボタン */
.btn-arrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1em;
    transition: all 0.2s ease-in-out;

}

.arrow {
    display: inline-block;
    aspect-ratio: 1/1;
    background: #909494;
    border-radius: 999px;
    width: 42px;
    height: 100%;
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* 同じ丸を重ねておく */
.arrow::after {
    content: "";
    display: inline-block;
    background: var(--gradient-reverse);
    aspect-ratio: 1/1;
    border-radius: 999px;
    width: 42px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.arrow::before {
    content: "";
    width: 12px;
    height: 5px;
    background-color: white;
    /* 白色を指定 */
    mask: url("../img/common/btn_arrow.svg") no-repeat center;
    -webkit-mask: url("../img/common/btn_arrow.svg") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* ホバー機能があるものとポイントデバイスを持つデバイス限定のためスマホやタブレットは適用外 */
@media (hover: hover) and (pointer: fine) {
    .btn-arrow:hover {
        color: #909494;

        transition: all 0.3s ease-in-out;
    }

    .btn-arrow:hover .arrow::after {
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
}

/* ------------------------------------------------
HEADER
------------------------------------------------ */
.header {
    z-index: var(--zindex-nav);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--height-header);
    background-color: var(--color-white);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0 0 0 clamp(14px, 3vw, 36px);
    height: var(--height-header);
    max-width: 100%;
    box-sizing: border-box;
}

.header__logo {
    width: clamp(200px, 25vw, 216px);
}

.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--height-header);
}

.header-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: clamp(8px, 2.5vw, 36px);
    list-style: none;
}

.header-nav__item:last-of-type {
    display: grid;
    place-items: center;
    background: var(--gradient);
    color: var(--color-white);
    padding: 0 clamp(14px, 3vw, 36px);
    height: var(--height-header);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 日本語メニュー */
.header-nav__link {
    --min-size: 8;
    --max-size: 15;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    font-family: var(--fontFamily-base);
    line-height: var(--lineHeight-185);
    letter-spacing: var(--tracking-120);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 英語メニュー */
.header-nav__link-en {
    --min-size: 6;
    --max-size: 14;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    color: var(--color-sky);
    line-height: var(--lineHeight-1);
    list-style: none;
    letter-spacing: -0.001em;
}

/* Contact */
.header-nav__item:last-of-type .header-nav__link {
    --min-size: 10;
    --max-size: 17;
    font-size: var(--clamp-size);
    letter-spacing: var(--tracking-100);
}

.header-nav__item:last-of-type .header-nav__link-en {
    --min-size: 7;
    --max-size: 16;
    font-size: var(--clamp-size);
    mix-blend-mode: multiply;
    font-family: var(--fontFamily-en);
}

.header-nav__link.-active::after {
    transform: translateY(-50%) rotate(-90deg);
}

.hamburger {
    display: none;
}

@media (width < 768px) {
    .header__inner {
        padding: 0 1rem;
    }

    .header-nav__list {
        flex-direction: column;
    }

    .header-nav__item:last-of-type {
        height: unset;
    }

    /* ドロワー */
    body:has(.hamburger.-active) {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .header-nav {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 9;
        width: 100%;
        height: 100vh;
        height: 100svh;
        visibility: hidden;
        padding-top: 60px;
        background-color: var(--color-gray-dark);
        transition: 0.4s;
    }

    .header-nav.-active {
        left: 0;
        visibility: visible;
    }

    .header-nav__inner {
        width: 100%;
        padding: 0 var(--padding-container);
    }

    .header-nav__list {
        width: clamp(150px, 80vw, 400px);
        margin-inline: auto;
        gap: 2em;
    }

    .header-nav__item {
        color: var(--color-white);
        width: 100%;
    }

    .header-nav__link {
        width: 100%;
        font-size: clamp(16px, 4vw, 24px);
        color: var(--color-white);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
        transition: color 0.4s;
    }

    .header-nav__link-en {
        font-size: clamp(12px, 3vw, 18px);
        flex: 4;
        text-align: right;
    }

    .header-nav__link-ja {
        flex: 6;
    }

    /* Contact */
    .header-nav__item:last-of-type {
        margin-top: 2em;
        padding: 1em 2em;
        width: 100%;
    }

    .header-nav__item:last-of-type .header-nav__link {
        font-size: clamp(16px, 4vw, 24px);
    }

    .header-nav__item:last-of-type .header-nav__link-en {
        font-size: unset;
    }

    /* ハンバーガーメニュー */
    .hamburger {
        display: block;
        height: 46px;
        margin-left: auto;
        position: fixed;
        z-index: 10;
        width: 46px;
        border: none;
        right: 9.5px;
        top: calc((65px - 46px)/2);
        background: var(--gradient);
    }

    .hamburger.-active .hamburger__line {
        background-color: transparent;
    }

    .hamburger.-active .hamburger__line::before {
        top: 0;
        transform: rotate(45deg);
    }

    .hamburger.-active .hamburger__line::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .hamburger__line {
        display: block;
        height: 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        background-color: var(--color-white);
        transition: 0.4s;
    }

    .hamburger__line:before,
    .hamburger__line:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        background-color: var(--color-white);
        transition: inherit;
    }

    .hamburger__line:before {
        top: -8px;
    }

    .hamburger__line:after {
        top: 8px;
    }
}

/* スクロールダウン
-----------------------------------------*/

/* スクロールダウンの位置 */
.scroll {
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-regular);
    color: var(--color-white);
    line-height: var(--lineHeight-1);
    letter-spacing: var(--tracking-140);
    position: absolute;
    left: 2rem;
    bottom: calc(80px + 1em);
    writing-mode: vertical-lr;
    rotate: 180deg;
    z-index: var(--zindex-scroll);
}

/* 線のアニメーション部分 */
.scroll::after {
    animation: scroll 1.5s infinite;
    background-color: var(--color-white);
    content: "";
    height: 60px;
    top: 0px;
    left: 0;
    right: 0;
    margin: -1em auto 0;
    position: absolute;
    width: 1px;
}

/* 線のアニメーション - 上から下へ */
@keyframes scroll {
    0% {
        height: 0;
        top: 0px;
    }


    100% {
        height: 60px;
        top: -60px;
    }
}

/* ------------------------------------------------
FOOTER
------------------------------------------------ */
.footer {
    background-color: var(--color-base);
    padding: 0 var(--padding-container);
    line-height: var(--lineHeight-160);
    font-weight: var(--fontWeight-bold);
}

.footer__inner {
    padding: clamp(42px, 4.84vw, 66px) 0 54px;
}

.footer__columns {
    display: flex;
    justify-content: space-between;
}

.footer-info {
    font-size: var(--fontSize-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-white);
    font-weight: var(--fontWeight-medium);
    letter-spacing: 0.12em;
}

.footer__name {
    --min-size: 18;
    --max-size: 20;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    margin-bottom: 1em;
}

.footer__address {
    display: block;
}

.footer__fax {
    margin-bottom: 2em;
}

.footer-sns {
    display: flex;
    gap: 1em;
}

.footer-sns__link {
    display: inline-block;
    --min-size: 48;
    --max-size: 54;
    width: var(--clamp-size);
    aspect-ratio: 1/1;
}

.footer-sns__link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-nav__columns {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1em;
    row-gap: 1em;
    justify-content: space-between;
    color: var(--color-white);
}

.footer-nav__list--left {
    justify-self: flex-start;
}

.footer-nav__list--right {
    justify-self: flex-end;
}

.footer-nav__list--left,
.footer-nav__list--right {
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.footer-nav__link {
    --min-size: 13;
    --max-size: 15;
    font-size: var(--clamp-size);
}

.footer-nav__link::before {
    content: attr(data-en);
    display: inline-block;
    color: var(--color-sky);
    letter-spacing: var(--tracking-60);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    width: 5em;
    padding-right: 0.5em;
    text-align: right;
}

/* 問い合わせボタン */
.footer-btn {
    width: 100%;
    margin-top: 46px;
}

.footer-btn__link {
    --min-size: 16;
    --max-size: 17;
    font-size: var(--clamp-size);
    letter-spacing: var(--tracking-100);
    color: var(--color-white);
    padding: 1em 2em;
    display: block;
    text-align: center;
    background: #fff;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.footer-btn__link::before {
    content: attr(data-en);
    display: inline-block;
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    color: var(--color-sky);
    letter-spacing: var(--tracking-60);
    mix-blend-mode: multiply;
    padding-right: 0.5em;
    z-index: 3;
    transition: all 0.3s ease;
}

/* 背景にグラデーションを乗せてホバー時は非表示にする（グラデーションはtransitionが効かないため） */
.footer-btn__link::after {
    content: "";
    background: var(--gradient);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.3s ease;
}

/* HOVER */
@media (hover: hover) and (pointer: fine) {
    .footer-btn__link:hover {
        color: var(--color-sky);
        transition: all 0.3s ease;
        outline: 1px solid #308AC4;
    }

    .footer-btn__link:hover::before {
        color: #1497A8;
        transition: all 0.3s ease;
    }

    .footer-btn__link:hover::after {
        background: transparent;
        transition: all 0.3s ease;
    }
}

.footer__copyright {
    --min-size: 8;
    --max-size: 10;
    font-size: var(--clamp-size);
    color: var(--color-white);
    text-align: center;
    font-weight: var(--fontWeight-medium);
    padding-bottom: clamp(20px, 2.6vw, 36px);
}

/* フッターのモバイル対応 (767px以下) */
@media (width < 768px) {
    .footer__columns {
        flex-direction: column;
        width: fit-content;
        margin-inline: auto;
        gap: 2em;
    }

    .footer-sns {
        justify-content: center;
    }

    .footer-nav__columns {
        justify-content: center;
    }
}

/* ----------------------------------------
404/プライバシーポリシーページ
---------------------------------------- */
.page404__text {
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-medium);
    line-height: var(--lineHeight-2);
}

.page404__link {
    text-decoration: underline;
    color: var(--color-sky)
}


.error404:not(.mailform, .page-recruit-thanks)::before,
.page-privacy::before {
    content: "";
    display: block;
    background: url(../img/common/bg_blur.png) no-repeat center/contain;
    position: absolute;
    top: 0;
    left: 0;
    translate: -23% -25%;
    --min-size: 300;
    --max-size: 600;
    width: var(--clamp-size);
    height: var(--clamp-size);
    z-index: -1;
}

/* ----------------------------------------
WPのスタイル利用時のテンプレート(クラス名wp-contentの中)
---------------------------------------- */

/* 見出し */
h1.wp-block-heading {
    font-size: var(--fontSize-xl);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-150);
    margin: var(--space-3xl) 0 var(--space-lg);
}

h2.wp-block-heading {
    font-size: var(--fontSize-lg);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-150);
    margin: 2em 0 0.5em;
}

h3.wp-block-heading {
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-bold);
    color: #004B79;
    line-height: var(--lineHeight-150);
    margin: 1em 0 0.5em;
}

h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
    font-size: var(--fontSize-base);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-150);
    margin: 1em 0 0.5em;
}

/* リスト */
ol.wp-block-list,
ul.wp-block-list {
    padding-left: 2em;
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

ol.wp-block-list li::marker {
    content: "(" counter(list-item) ") ";
}


ul.wp-block-list li::marker {
    content: "・ ";
    /* disc風の記号 */
}

/* 段落 */
.wp-content p {
    margin-bottom: 0.5em;
    line-height: 1.8;
}

.wp-content p>a {
    text-decoration: underline;
    cursor: pointer;
}

.wp-content p>a:hover {
    color: var(--color-sky);
}

/* 画像 */
.wp-block-image {
    margin-bottom: var(--space-md);
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* 引用 */
.wp-block-quote {
    border-left: 2px solid var(--color-navy);
    padding-left: 1em;
    margin: var(--space-lg) 0;
    font-style: italic;
    font-size: var(--fontSize-sm);
}

/* テーブル */
.wp-block-table {
    margin-bottom: var(--space-md);
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid #ddd;
    padding: var(--space-sm);
    text-align: left;
}

.wp-block-table th {
    background-color: var(--color-gray-light);
    font-weight: var(--fontWeight-bold);
}

/* ------------------------------------------------
アニメーション
------------------------------------------------ */

/* FADEIN初期状態（パフォーマンス最適化対応） */
.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* FADEIN表示状態（JavaScriptで制御） */
.fadein.show {
    opacity: 1;
    transform: translateY(0);
}

@keyframes BlurFadeIn {
    0% {
        opacity: 0;
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}