@charset "UTF-8";

/* ================================================
COMMON
================================================ */

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

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

body {
    /* フォントサイズの可変設定 */
    font-size: clamp(15px, 1.36vw, 17px);
    /* レイアウト設定 */
    overflow-x: clip;

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

    /* カラー設定 */
    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;
}

/* ········ loading ········ */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* iPhone向けに実寸vhを取得（js参照） */
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    /* 高さを完全固定してズレを防止 */
    max-height: calc(var(--vh, 1vh) * 100);
    background-color: var(--color-bg-l-pink);
    z-index: 9999;
    transition: opacity 0.6s ease;
    overflow: hidden;
    /* ローディング中スクロール防止 */
    touch-action: none;
}

/* bodyに.is-loadingを付与した場合のスクロール禁止 */
body.is-loading {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100vw;
    overscroll-behavior: none;
    touch-action: none;
}

.loading__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    /* 子要素を中央配置 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* copyを画面中央に配置 */
body.home #loading .loading__copy {
    position: absolute;
    top: calc(50% + 1em);
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    font-size: clamp(24px, 2.88vw, 38px);
    font-weight: var(--fontWeight-medium);
    letter-spacing: 0.5em;
    height: max-content;
}

/* 初期状態 */
body.home #loading .loading__copy,
body.home #loading .loading__illust {
    opacity: 0;
    filter: blur(0.2rem);
}

/* .home以外はcopyとillustは非表示 */
body:not(.home) #loading .loading__copy,
body:not(.home) #loading .loading__illust {
    display: none;
}

/* かもめイラストをコピーの下に配置（位置微調整） */
body.home #loading .loading__illust {
    position: absolute;
}

/* かもめイラストの位置 */
body.home #loading .loading__illust1 {
    top: 50%;
    left: 50%;
    translate: calc(-50% + -70%) calc(-50% + -160%);
    width: clamp(110px, 13vw, 190px);
    aspect-ratio: 160/97;
    height: auto;
}

/* 常夜灯イラストの位置 */
body.home #loading .loading__illust2 {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: 90% 58%;
    width: clamp(60px, 7vw, 100px);
    aspect-ratio: 495/916;
    height: auto;
}

/* アニメーション開始時 */
/* イラスト１（かもめ） */
body.home #loading.show .loading__illust1 {
    animation: loadingFade 4s ease-in-out forwards;
}

body.home #loading.show .loading__copy {
    animation: loadingFade 4s ease-in-out 0.0s forwards;
}

/* イラスト２（常夜灯）固定ふわふわは無し */
body.home #loading.show .loading__illust2 {
    animation: loadingFade 4s ease-in-out 0.1s forwards;
}

/* 1秒フェードイン → 2秒停止 → 1秒フェードアウト */
@keyframes loadingFade {
    0% {
        opacity: 0;
        filter: blur(0.2rem);
    }

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

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

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

/* かもめのふわふわ */
body.home #loading .loading__illust1 img {
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(4px, -8px) rotate(0.5deg);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* SP対応 */
@media (width < 768px) {
    body.home #loading .loading__copy {
        /* font-size: var(--fontSize-xl); */
        /* top: 50%; */
    }

    /* かもめのイラスト（上に配置） */
    body.home #loading.show .loading__illust1 {
        /* width: clamp(100px, 27vw, 160px); */
        translate: calc(-50% + -70%) calc(-50% + -170%);
    }
}

/* ヘッダー分下げる */
main {
    position: relative;
}

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

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

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


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

a[target=_blank]:not(.top-office__link, .top-note__card) {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

a[target=_blank]:not(.top-note__card):not(.btn-small)::after {
    content: "";
    background: url(../img/common/icon_blank.svg) no-repeat center center/contain;
    width: 1em;
    height: 1em;
    transition: all 0.3s ease-in-out;
}

a[target=_blank]:not(.footer__link):not(.header-nav__link):not(.top-note__card):not(.btn-small):hover::after {
    background: url(../img/common/icon_blank-white.svg) no-repeat center center/contain;
    width: 1em;
    height: 1em;
    transition: all 0.3s ease-in-out;
}

/* 除外 */
a[target="_blank"].btn-small::after {
    display: none !important;
}

/* hover */
a[target=_blank]:hover:not(.footer__link, .header-nav__link, .top-note__card)::after {
    opacity: 0.7;
}

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

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

/* aタグhoverの全体変化 */
a {
    transition: filter 0.2s ease;
}

/* .btnクラスがついていないaタグのみ */
a:not(.btn):hover,
a:not(.btn):focus {
    color: #222222b6;
    transition: all 0.3s ease-in-out;
}

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;
    }

    li::marker {
        content: "・";
    }
}



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

/* 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;
}

/* ------------------------------------------------
共通パーツ
------------------------------------------------ */
.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);
}



/* ------------------------------------------------
root
------------------------------------------------ */

:root {
    /* containerサイズ -------- */
    --container: min(100% - 2rem, 640px);
}

/* ------------------------------------------------
共通パーツ
------------------------------------------------ */


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

    @media (width < 768px) {}
}

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

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

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

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

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

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

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

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

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

.inner-xs,
.inner-s,
.inner-ms,
.inner-m,
.inner-l,
.inner-xl,
.inner-2xl,
.inner-3xl,
.inner-4xl {
    container-type: inline-size;
    container-name: section-inner;
}

.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;
}

/* ================================================
下層ページ用
================================================ */

/* ········ 見出し ········ */


.page-header {
    padding: var(--space-lg) var(--padding-container) var(--space-xl);
}

.page-history .page-header,
.page-privacy .page-header,
.error404 .page-header,
.page-contact .page-header,
.page-contact-thanks .page-header,
.single-news .page-header,
.single-job .page-header,
.post-type-archive-news .page-header {
    margin-top: calc(16px + var(--height-header));
}

.heading01 {
    font-size: var(--fontSize-3xl);
    font-weight: var(--fontWeight-medium);
    line-height: 1.5;
    letter-spacing: 0.16em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.heading01-center {
    align-items: center;
}

.heading01::after {
    content: attr(data-en);
    display: block;
    --min-size: 12;
    --max-size: 15;
    font-size: var(--clamp-size);
    color: var(--color-main);
    letter-spacing: 0.05em;
}

.heading02 {
    font-size: var(--fontSize-xl);
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
    margin-bottom: var(--space-5xl);
    letter-spacing: 0.06em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    width: fit-content;
    margin-inline: auto;
    /* font-feature-settings: normal; */
}

.heading02::after {
    content: "";
    display: block;
    width: auto;
    height: 3px;
    background-color: currentColor;
}


.heading03 {
    font-size: var(--fontSize-lg);
    font-weight: var(--fontWeight-medium);
    line-height: 1.5;
    margin-bottom: 0.75em;
    letter-spacing: 0.06em;
    font-feature-settings: normal;
}


/* 縦文字の見出し */
.vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;

    @media (width < 768px) {
        writing-mode: unset;
        text-orientation: unset;
    }
}


/* ------------------------------------------------
ボタン
------------------------------------------------ */
/* ボタン */
.btn-wrap {
    margin-top: var(--space-lg);
}

.btn {
    display: block;
    width: clamp(200px, 20.18vw, 240px);
    padding: 1em;
    text-align: center;
    line-height: 1.25;
    border: 1px solid currentColor;
    border-radius: 999px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.btn-bg-brown {
    --currentColor: var(--color-brown);
    background-color: var(--currentColor);
    color: #fff;
    border: 1px solid var(--currentColor);
}

.btn-bg-pink {
    --currentColor: var(--color-main);

    background-color: var(--currentColor);
    color: #fff;
    border: 1px solid var(--currentColor);
}

.btn-bg-dkpink {
    --currentColor: var(--color-pink-dark);

    background-color: var(--currentColor);
    color: #fff;
    border: 1px solid var(--currentColor);
}

.btn-bg-green {
    --currentColor: var(--color-green);
    background-color: var(--currentColor);
    color: #fff;
    border: 1px solid var(--currentColor);
}

.btn-brown {
    --currentColor: var(--color-brown);
    color: var(--color-brown);
}

.btn.btn-brown:hover,
.btn.btn-green:hover,
.btn.btn-pink:hover,
.btn.btn-dkpink:hover {
    border: 1px solid var(--currentColor);
    background-color: var(--currentColor);
    color: #fff;
}


/* target:_blankがついているとき */
.btn[target="_blank"] {
    display: flex;
    gap: 0.75em;
    align-items: center;
    justify-content: center;
}

.btn[target="_blank"]::after {
    content: "";
    background: url(../img/common/icon_blank.svg) no-repeat center center;
    color: currentColor;
    width: 1em;
    height: 1em;
}

.btn[target="_blank"]::after:hover {
    filter: brightness(1.1);
}

.btn-small {
    font-size: var(--fontSize-base);
    line-height: 1.25;
    width: fit-content;
    padding: 0.5em 1.5em;
}

.btn-large {
    width: 280px;
    font-size: 15px;
    line-height: 1.25;
    padding: 2em;
}

/* すべてのタッチイベントでの色変化を防ぐ */
.btn:hover,
.btn:focus,
.btn:active {
    color: #fff;
    background-color: var(--color-main);
    border-color: var(--color-main);
    transition: 0.3s ease-in-out;
    /* 元の色を維持 */
}

.btn-bg-orange:hover,
.btn-bg-orange:focus,
.btn-bg-orange:active,
.btn-bg-green:hover,
.btn-bg-green:focus,
.btn-bg-green:active,
.btn-bg-brown:hover,
.btn-bg-brown:focus,
.btn-bg-brown:active,
.btn-bg-pink:hover,
.btn-bg-pink:focus,
.btn-bg-pink:active {
    color: var(--currentColor) !important;
    background-color: #fff;
    border-color: var(--currentColor);
    transition: 0.3s ease-in-out;
}

/* ----------------------------------------
スクロールダウンの矢印
---------------------------------------- */
/* スクロールダウンの位置 */
.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;
    }
}



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


/* ········ フェード ········ */

.fade {
    opacity: 0;
}

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

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

/* ================================================
WordPress記事本文用の見出しスタイル
================================================ */

/* 記事本文内の見出し共通スタイル */
.post__text h1,
.post__text h2,
.post__text h3,
.post__text h4,
.post__text h5,
.post__text h6 {
    font-weight: var(--fontWeight-medium);
    line-height: 1.4;
    color: inherit;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

/* 最初の見出しの上マージンを削除 */
.post__text h1:first-child,
.post__text h2:first-child,
.post__text h3:first-child,
.post__text h4:first-child,
.post__text h5:first-child,
.post__text h6:first-child {
    margin-top: 0;
}

/* 各見出しのサイズ設定 */
.post h1,
.post__text h1 {
    font-size: var(--fontSize-lg);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.post h2:not(.job__label, .post__title),
.post__text h2:not(.job__label, .post__title) {
    font-size: clamp(18px, 1.45vw, 21px);
}

.posts__text h3 {
    font-size: var(--fontSize-md);
    position: relative;
    padding-left: var(--space-md);
}

/* h3の装飾（左側のライン） */
.post h3::before,
.post__text h3::before {
    /* content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--category-color, var(--color-border-brown));
    border-radius: 2px; */
}

.post h4,
.post__text h4 {
    font-size: var(--fontSize-base);
    font-weight: var(--fontWeight-medium);
}

.post h5,
.post__text h5 {
    font-size: var(--fontSize-sm);
    font-weight: var(--fontWeight-medium);
}

.post h6,
.post__text h6 {
    font-size: var(--fontSize-xs);
    font-weight: var(--fontWeight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ================================================
画像スタイル
================================================ */

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

/* 画像内のキャプション */
.wp-block-image figcaption {
    font-size: var(--fontSize-xs);
    color: var(--color-text);
    margin-top: var(--space-xs);
}

/* ================================================
段落スタイル
================================================ */
.post__text p {
    margin-bottom: var(--space-md);
    text-align: justify;
    line-height: 1.86;
}

/* ================================================
リストスタイル
================================================ */

/* リスト */
.wp-block-list {
    padding-left: var(--space-lg);
}

ul.wp-block-list li {
    list-style-type: disc;
    line-height: 1.8;
}

ol.wp-block-list li {
    margin-bottom: var(--space-xs);
    list-style-type: decimal;
    line-height: 1.8;
}

.wp-block-list li:last-child {
    margin-bottom: 0;
}

/* ================================================
テーブルスタイル（修正版）
================================================ */

/* 全体のコンテナ幅制御を強化 */
.post__text,
.post {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* テーブルコンテナ */
.wp-block-table,
.post table,
.post__text table {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--fontSize-sm);
    line-height: 1.6;
    /* 問題のあったプロパティを削除/修正 */
    table-layout: auto;
    word-wrap: break-word;
}

/* テーブル本体 */
.wp-block-table table,
.post table table,
.post__text table table {
    width: 100%;
    table-layout: auto;
}

/* テーブルヘッダー */
.wp-block-table th,
.post table th,
.post__text table th,
.wp-block-table thead th,
.post table thead th,
.post__text table thead th {
    background-color: var(--color-bg-secondary, #f8f9fa);
    font-weight: var(--fontWeight-medium);
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border, #e9ecef);
    border-bottom: 2px solid var(--color-border-brown, #d4a574);
    color: var(--color-text-primary, #333);
    word-wrap: break-word;
    hyphens: auto;
}

/* テーブルセル */
.wp-block-table td,
.post table td,
.post__text table td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border, #e9ecef);
    vertical-align: top;
    word-wrap: break-word;
    hyphens: auto;
}

/* テーブルキャプション */
.wp-block-table figcaption,
.post table caption,
.post__text table caption {
    font-size: var(--fontSize-xs);
    color: var(--color-text-secondary, #666);
    margin-top: var(--space-xs);
    text-align: center;
    font-style: italic;
}

/* ストライプテーブル（WordPress Gutenbergのクラス） */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--color-bg-light, #f8f9fa);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: transparent;
}

/* レスポンシブテーブル用のラッパー */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-lg);
}

/* 横スクロールが必要な場合のスタイル */
.wp-block-table.is-style-scroll,
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    white-space: nowrap;
}

.wp-block-table.is-style-scroll table,
.table-scroll table {
    display: table;
    min-width: 100%;
    white-space: nowrap;
}

.wp-block-table.is-style-scroll td,
.wp-block-table.is-style-scroll th,
.table-scroll td,
.table-scroll th {
    white-space: nowrap;
    word-wrap: normal;
    hyphens: none;
}

/* タブレット・モバイル対応 */
@media (max-width: 768px) {

    .entry-content h3::before,
    .single-post .entry-content h3::before {
        width: 3px;
    }

    /* テーブルのモバイル対応 */
    .wp-block-table,
    .post table,
    .post__text table {
        font-size: var(--fontSize-xs);
    }

    /* 自動的に横スクロールを有効にする（必要な場合のみ） */
    .wp-block-table:not(.is-style-scroll),
    .post table:not(.table-scroll),
    .post__text table:not(.table-scroll) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wp-block-table th,
    .wp-block-table td,
    .post table th,
    .post table td,
    .post__text table th,
    .post__text table td {
        padding: var(--space-xs) var(--space-sm);
        min-width: 80px;
    }
}

/* 極小画面（480px以下）でのテーブル対応 */
@media (max-width: 480px) {

    /* コンテナの横幅を少し拡張 */
    .wp-block-table:not(.is-style-scroll),
    .post table:not(.table-scroll),
    .post__text table:not(.table-scroll) {
        margin-left: calc(-1 * var(--space-sm));
        margin-right: calc(-1 * var(--space-sm));
        width: calc(100% + 2 * var(--space-sm));
    }

    .wp-block-table th,
    .wp-block-table td,
    .post table th,
    .post table td,
    .post__text table th,
    .post__text table td {
        padding: var(--space-xs);
        min-width: 60px;
        font-size: var(--fontSize-xs);
    }
}

/* ================================================
エディター（Gutenberg）対応
================================================ */

.post__text .wp-block-heading:not(.job__label) {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.post__text .wp-block-heading:first-child {
    margin-top: 0;
}

/* Gutenbergテーブルブロックの追加対応 */
.post__text .wp-block-table {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.post__text .wp-block-table:first-child {
    margin-top: 0;
}