/* Consolidated from inline <style> blocks */

/* ===== index.html ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #00a9bc;
    --color-accent: #27b29c;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f7f8;
    --color-border: #e0e0e0;
    --font-base: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/*---br管理--*/
/*---スマホ時改行--*/
@media screen and (max-width: 480px) {
.pc-br{display:none;}
.tb-br{display:none;}
.sp-br{display:block;}
}
/*---タブレット時改行--*/
@media screen and (min-width:481px) and (max-width: 1020px) {
.pc-br{display:none;}
.tb-br{display:block;}
.sp-br{display:none;}
}
/*---PC時改行--*/
@media screen and (min-width:1021px){
.pc-br{display:block;}
.tb-br{display:none;}
.sp-br{display:none;}
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-pc {
    display: block;
}

.u-sp {
    display: none;
}

.u-mb20 {
    margin-bottom: 20px;
}

.u-mb40 {
    margin-bottom: 40px;
}

.u-mb60 {
    margin-bottom: 60px;
}

.u-mb80 {
    margin-bottom: 80px;
}

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

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

/* Animation Utility */
.u-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.u-fade-up.is-show {
    opacity: 1;
    transform: translateY(0);
}

.u-delay-100 {
    transition-delay: 0.1s;
}

.u-delay-200 {
    transition-delay: 0.2s;
}

.u-delay-300 {
    transition-delay: 0.3s;
}

@media screen and (max-width: 900px) {
    .u-pc {
        display: none;
    }

    .u-sp {
        display: block;
    }

    .u-mb40 {
        margin-bottom: 24px;
    }

    .u-mb60 {
        margin-bottom: 40px;
    }

    .u-mb80 {
        margin-bottom: 50px;
    }
}

/* -----------------------------------------------------------------
           LAYOUT
        ----------------------------------------------------------------- */
.l-container {
    /* ユーザー指定に基づく設定 */
    max-width: calc(100% - 4rem);
    margin: 0 4rem;
    padding: 0;
    /* 外部マージンを設定したので内部パディングをリセット */
    position: relative;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 96.8rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    position: relative;
    width: 100%;
}

/* スマートフォン/タブレット対応 (画面が狭いときの調整) */
@media screen and (max-width: 900px) {
    .l-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* 既存レイアウトに合わせて、モバイル時は左右余白を少し広めに */
    .inner {
        padding-left: 2vw;
        padding-right: 2vw;
        max-width: 100%;
    }

    .l-section {
        padding: 60px 0;
    }
}

/* -----------------------------------------------------------------
           HEADER
        ----------------------------------------------------------------- */
.l-header-new {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    justify-content: space-between;
}

/* スクロール後、ヘッダー全体に背景色と影を追加し、高さを統一 */
.l-header-new.is-scrolled {
    background-color: var(--color-bg-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    align-items: center;
    /* 垂直中央揃え */
    height: 70px;
    /* PCヘッダーの高さを固定 */
    transition: all 0.3s ease;
}

.l-header-new__logo-box {
    background-color: var(--color-primary);
    padding: 20px 20px;
    pointer-events: auto;
    border-bottom-right-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    /* スクロール後にロゴボックスがロゴアイコンサイズに縮小 */
    width: 300px;
}

/* スクロール後：ロゴボックスのサイズと形状を変更 */
.l-header-new.is-scrolled .l-header-new__logo-box {
    padding: 0;
    width: 70px;
    /* ロゴの高さに合わせて縮小 */
    height: 70px;
    border-bottom-right-radius: 4px;
    box-shadow: none;
    overflow: hidden;
}

.l-header-new__logo {
    font-size: 1.4vw;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: all 0.3s;
}

/* スクロール後：ロゴテキスト部分を非表示（幅を0に） */
.l-header-new.is-scrolled .l-header-new__logo {
    gap: 0;
    font-size: 0;
}

.l-header-new__logo-icon {
    width: 50px;
    height: 50px;
    /* background: #fff; */
    border-radius: 50%;
    transition: all 0.3s;
    aspect-ratio: 1/1;
}

.l-header-new__nav-box {
    /* 修正: スクロール前のメニューボックス位置を調整 */
    margin-top: 25px;
    margin-right: 40px;
    background-color: #fff;
    padding: 10px 30px;
    border-radius: 4px;
    pointer-events: auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    /* 修正: ナビアイテム間のギャップを広げて重なりを解消 */
    gap: 1rem;
    transition: all 0.3s;
}

/* スクロール後：ナビゲーションの位置を調整 */
.l-header-new.is-scrolled .l-header-new__nav-box {
    margin-top: 0;
    margin-right: 20px;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
    gap: 1rem;
    /* スクロール後はコンパクトに戻す */
}

.l-header-new.is-scrolled .l-header-new__menu {
    height: auto;
    line-height: 70px;
    /* ヘッダーの高さに合わせてメニュー項目の高さを調整 */
}

/* スクロール後、ナビゲーションアイテムを中央に配置 */
.l-header-new__menu a {
    padding: 0 10px;
    display: inline-block;
    height: 70px;
    line-height: 70px;
    vertical-align: top;
    /* font-size: 16px; */
}

.l-header-new__menu a::after {
    bottom: 20px;
}

.l-header-new__menu {
    display: flex;
    /* 修正: スクロール前のメニューアイテム間のギャップを調整 */
    gap: 1rem;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header-new__menu a {
    position: relative;
}

.l-header-new__menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s;
}

.l-header-new__menu a:hover::after {
    width: 100%;
}

.l-header-new__tel-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    padding-right: 15px;
    border-right: 1px solid #eee;
    margin-right: -10px;
    /* スクロール前の初期配置 */
    transition: all 0.3s;
}

/* スクロール後: 電話番号をコンパクトに、ヘッダーに統合 */
.l-header-new.is-scrolled .l-header-new__tel-info {
    /* スクロール後は非表示にせず、コンパクトな情報として残す */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 70px;
    /* ヘッダーの高さに合わせる */
    padding-right: 10px;
    border-right: 1px solid #eee;
    margin-right: 0;
    white-space: nowrap;
}

.l-header-new__tel-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.3s;
}

.l-header-new__tel-time {
    font-size: 10px;
    color: var(--color-text);
}

.l-header-new__menu-btn {
    background-color: var(--color-primary);
    color: #fff;
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    white-space: nowrap;
}

.l-header-new__menu-btn:hover {
    background-color: var(--color-accent);
    opacity: 1;
}

/* スクロール後、ボタンの見た目を調整 */
.l-header-new.is-scrolled .l-header-new__menu-btn {
    padding: 8px 10px;
    /* パディングを縮小 */
    margin-left: 0;
}


/* Responsive Header */
@media screen and (max-width: 1300px) {
    .l-header-new__logo-box {
        padding: 10px 10px;
        width: 200px;
    }

    .l-header-new__logo {
        font-size: 1.2rem;
        gap: 10px;
    }

    .l-header-new__logo-icon {
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
    }

    .l-header-new.is-scrolled .l-header-new__logo-box {
        width: 70px;
    }
}

@media screen and (max-width: 1200px) {
    .l-header-new__tel-time {
        display: none;
    }

    .l-header-new__nav-box {
        /* 修正：1200px以下でメニュー間のギャップをさらに調整 */
        gap: 15px;
        margin-right: 20px;
        padding: 10px 20px;
        margin-top: 1rem;
    }

    .l-header-new__menu {
        gap: 0;
        font-size: 13px;
    }

    .l-header-new.is-scrolled .l-header-new__nav-box {
        gap: 15px;
    }
}

/* 900px以下でPCヘッダーを非表示 */
@media screen and (max-width: 900px) {
    .l-header-new {
        display: none;
    }
}

/* SP Header (Default Hidden) */
.l-header-sp {
    display: none;
}

.l-header-sp__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

.l-header-sp__burger {
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
}

.l-header-sp__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header-sp__burger span:nth-of-type(1) {
    top: 0;
}

.l-header-sp__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header-sp__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header-sp__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header-sp__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header-sp__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav Content */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 999;
}

.l-header__sp-nav.is-active {
    right: 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (min-width:768px) and (max-width: 1080px) {
    .l-header-new__tel-number {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 600px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENTS
        ----------------------------------------------------------------- */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
    cursor: pointer;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

.c-btn--white {
    background: #fff;
    color: var(--color-primary);
    border: 2px solid #fff;
    font-weight: 700;
    padding: 15px 50px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.c-btn--white:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------
           H2 HEADING (c-heading01) - ブラッシュアップ
        ----------------------------------------------------------------- */
.c-heading01 {
    font-size: 36px;
    font-weight: 900;
    /* より太く */
    color: var(--color-text);
    /* メインは黒 */
    margin-bottom: 40px;
    /* 下のマージンを少し増やす */
    text-align: center;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 15px;
    /* 下線のためにパディングを追加 */
}

.c-heading01::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    /* 短い下線 */
    height: 6px;
    background: var(--color-primary);
    border-radius: 3px;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 10px;
    font-weight: 700;
    /* 太くする */
    letter-spacing: 0.1em;
}

/* -----------------------------------------------------------------
           H2 HEADING (c-heading02) - ブラッシュアップ
        ----------------------------------------------------------------- */
.c-heading02 {
    font-size: 26px;
    /* 少し大きく */
    font-weight: 700;
    color: var(--color-text);
    /* 従来のボーダーをリセット */
    border-left: none;
    padding-left: 30px;
    margin-bottom: 30px;
    position: relative;
    /* 統一された下線を引く */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

/* Primary カラーのメイン縦線 */
/* .c-heading02::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 100%;
            background: var(--color-primary); 
            border-radius: 3px;
        } */
/* Accent カラーのサブ縦線 (より内側) */
/* .c-heading02::after {
            content: '';
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 70%;
            background: var(--color-accent); 
            border-radius: 2px;
        } */


.c-heading03 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-bg-gray);
}

.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

.c-page-kv {
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards Grid */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* PC: 3列固定 */
    gap: 40px;
}

@media screen and (max-width: 900px) {
    .c-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tablet: 2列 */
}

@media screen and (max-width: 600px) {
    .c-card-grid {
        grid-template-columns: 1fr;
    }

    /* SP: 1列 */
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.c-card__body {
    padding: 20px;
    flex: 1;
}

.c-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-link-arrow {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: opacity 0.3s;
}

.c-link-arrow:hover {
    opacity: 0.7;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 600px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 60px;
        height: 60px;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* -----------------------------------------------------------------
           SECTION SPECIFIC DESIGNS
        ----------------------------------------------------------------- */
/* TOP: MAIN VISUAL */
.p-top-mv-new {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.p-top-mv-new__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    will-change: transform;
}

.p-top-mv-new__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slideFade 15s infinite;
}

.p-top-mv-new__slide:nth-child(1) {
    background-image: url('../img/home/mv-image-01.jpg');
    animation-delay: 0s;
}

.p-top-mv-new__slide:nth-child(2) {
    background-image: url('../img/home/mv-image-02.jpg');
    animation-delay: 5s;
}

.p-top-mv-new__slide:nth-child(3) {
    background-image: url('../img/home/mv-image-03.jpg');
    animation-delay: 10s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    43% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.p-top-mv-new__content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 50px 80px 50px 60px;
    border-radius: 0 60px 0 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}

.p-top-mv-new__heading {
    font-size: 42px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 10px;
}

.p-top-mv-new__eng {
    font-size: 16px;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

@media screen and (max-width: 900px) {
    .p-top-mv-new {
        height: 80vh;
        margin-top: 60px;
    }

    .p-top-mv-new__content {
        width: 90%;
        padding: 30px 40px;
        border-radius: 0 30px 0 0;
    }

    .p-top-mv-new__heading {
        font-size: 28px;
    }
}

/* TOP: REASON (Arch Cards - Grid Layout) */
.p-reason-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* PC: 3列固定 */
    gap: 40px;
    padding: 40px 0;
}

.p-reason-card {
    background: #fff;
    width: 100%;
    border-radius: 2rem;
    padding: 3rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
}

.p-reason-card:hover {
    transform: translateY(-5px);
}

.p-reason-card__title {
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
    text-align: center;
}

.p-reason-card__eng {
    font-size: 11px;
    color: var(--color-text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0;
    font-weight: 700;
}

.p-reason-card__img-box {
    /* width: 180px; */
    /* height: 180px; */
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 2rem;
}

.p-reason-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p-reason-card__text {
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    width: 100%;
    color: var(--color-text);
}

@media screen and (max-width: 768px) {

    /* スマホ画面では1カラム */
    .p-reason-list {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* TOP: SERVICE (Zigzag - 2 Col for PC/Tab, 1 for SP) */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-direction: row;
    /* PCは横並び */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.4;
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

/* Tablet Adjustment */
@media screen and (max-width: 900px) {
    .p-service-item {
        gap: 30px;
    }

    .p-service-item__title {
        font-size: 26px;
    }

    .p-service-item__num {
        font-size: 80px;
        top: -50px;
    }
}

/* SP Layout (600px以下で縦並び) */
@media screen and (max-width: 600px) {

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}

/* TOP: COMPANY TEASER */
.p-company-teaser {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.p-company-teaser__img {
    width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.p-company-teaser__img img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    position: absolute;
    top: -10%;
    left: 0;
    transition: transform 0.1s linear;
    will-change: transform;
}

.p-company-teaser__content {
    width: 50%;
    background-color: #008c9e;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-company-teaser__eng-2 {
    font-family: sans-serif;
    font-weight: 900;
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}

.p-company-teaser__heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.p-company-teaser__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

@media screen and (max-width: 900px) {
    .p-company-teaser {
        flex-direction: column;
    }

    .p-company-teaser__img,
    .p-company-teaser__content {
        width: 100%;
    }

    .p-company-teaser__img {
        height: 300px;
        min-height: auto;
    }

    .p-company-teaser__content {
        padding: 40px 20px;
    }

    .p-company-teaser__eng-2 {
        font-size: 50px;
    }
}

/* TOP: RECRUIT */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 350px;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 200px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 220px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@media screen and (max-width: 900px) {
    .p-recruit-upper {
        flex-direction: column;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }
}

/* --- INFINITE SLIDER (修正済み) --- */
.p-slider-infinite {
    padding: 60px 0;
    background-color: transparent;
    /* 修正: 背景色を削除 */
    overflow: hidden;
}

.p-slider-infinite__container {
    width: 100%;
}

.p-slider-infinite__list {
    display: flex;
    white-space: nowrap;
    /* アニメーション距離を20remに合わせて再計算 */
    animation: scroll-infinitely 30s linear infinite;
}

/* ホバーでアニメーション一時停止 */
/* .p-slider-infinite__list:hover {
            animation-play-state: paused;
        } */

.p-slider-infinite__item {
    display: inline-block;
    padding: 0;
    /* 修正: 余白を0に設定 */
    flex-shrink: 0;
}

.p-slider-infinite__item img {
    width: 26rem;
    height: 16.5rem;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s;
}

.p-slider-infinite__item img:hover {
    transform: scale(1.05);
}

/* 無限スクロールアニメーション */
@keyframes scroll-infinitely {
    from {
        transform: translateX(0);
    }

    to {
        /* アイテム幅(20rem) * リストの複製数(5) = 100remを移動 */
        transform: translateX(calc(-5 * 20rem));
    }
}

/* モバイルでの調整 */
@media screen and (max-width: 600px) {
    .p-slider-infinite {
        padding: 40px 0;
    }

    .p-slider-infinite__item img {
        width: 15rem;
        height: 9.375rem;
    }

    @keyframes scroll-infinitely {
        from {
            transform: translateX(0);
        }

        to {
            /* SP用の幅で再計算 (コンテンツ5つ分) */
            transform: translateX(calc(-5 * 15rem));
        }
    }
}

/* TOP: NEWS (New List Design) */
.p-news-header {
    text-align: center;
    margin-bottom: 60px;
}

.p-news-header__eng {
    font-family: sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary);
    /* トンマナ修正 */
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    display: block;
}

.p-news-header__jp {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.1em;
}

.p-news-list-new {
    border-top: 1px solid #eee;
    max-width: 900px;
    margin: 0 auto;
}

.p-news-item-new {
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    transition: background-color 0.3s;
}

.p-news-item-new:hover {
    background-color: #fafafa;
}

.p-news-item-new__meta {
    width: 120px;
    flex-shrink: 0;
    padding-top: 2px;
}

.p-news-item-new__date {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

.p-news-item-new__content {
    flex: 1;
}

.p-news-item-new__head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.p-news-item-new__cat {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: var(--color-primary);
    /* トンマナ修正 */
    padding: 3px 12px;
    border-radius: 2px;
    white-space: nowrap;
}

.p-news-item-new__cat--topic {
    background-color: var(--color-accent);
}

/* トンマナ修正 */
.p-news-item-new__cat--notice {
    background-color: #008c9e;
}

/* トンマナ修正 (Primaryの濃い色) */

.p-news-item-new__title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
    transition: color 0.3s;
}

.p-news-item-new__link {
    text-decoration: none;
    color: inherit;
}

.p-news-item-new__link:hover .p-news-item-new__title {
    color: var(--color-primary);
}

/* トンマナ修正 */

.p-news-item-new__excerpt {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.6;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-news-more {
    text-align: right;
    margin-top: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.p-news-more__link {
    font-size: 16px;
    font-weight: 700;
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

.p-news-more__link:hover {
    color: var(--color-primary);
}

/* トンマナ修正 */

@media screen and (max-width: 600px) {
    .p-news-header__eng {
        font-size: 36px;
    }

    .p-news-item-new {
        flex-direction: column;
        gap: 10px;
    }

    .p-news-item-new__meta {
        width: 100%;
    }

    .p-news-item-new__head {
        gap: 10px;
    }
}

/* -----------------------------------------------------------------
           CTA SECTION (W100%)
        ----------------------------------------------------------------- */
.p-cta-section {
    /* 修正: 背景をグラデーションに戻す */
    background: linear-gradient(135deg, #00a9bc, #27b29c);
    /* 青緑〜緑のグラデ */
    padding: 80px 0;
    width: 100%;
    color: #fff;
    /* グラデーション背景に合わせて白に統一 */
    text-align: center;
}

.p-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.p-cta-header {
    margin-bottom: 30px;
}

.p-cta-balloon {
    display: inline-block;
    background: #fff;
    /* 白のまま維持 */
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
    padding: 5px 20px;
    border-radius: 20px;
    margin-bottom: 15px;
    position: relative;
}

.p-cta-balloon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 6px solid #fff;
    /* 白のまま維持 */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.p-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    /* グラデーション背景に合わせて白に修正 */
}

.p-cta-box {
    /* 修正: 背景を不透明な白 (rgba(255, 255, 255, 1)) に変更し、透けないようにする */
    background: rgba(255, 255, 255, 1);
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* 背景が不透明になったため、テキストの色をPrimary系に戻す */
    color: var(--color-text);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    /* 影を強めにして目立たせる */
    backdrop-filter: none;
}

/* CTAボックス内のテキストカラー修正 */
.p-cta-box .p-cta-box__label {
    color: var(--color-text);
    /* 濃い色に戻す */
}

.p-cta-box .p-cta-box__tel {
    color: var(--color-primary);
    /* Primaryカラーに戻す */
}

.p-cta-box .p-cta-box__time {
    color: var(--color-text);
    /* 薄いグレーに戻す */
}

.p-cta-box__left {
    text-align: center;
}

.p-cta-box__label {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 700;
}

.p-cta-box__tel {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
    transition: opacity 0.3s;
}

.p-cta-box__tel:hover {
    opacity: 0.8;
}

.p-cta-box__time {
    font-size: 12px;
}

.c-btn--cta {
    background: #008c9e;
    /* ボタンの色は維持 */
    color: #fff;
    font-weight: 700;
    padding: 18px 50px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s;
    font-size: 18px;
    min-width: 320px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.c-btn--cta:hover {
    background: var(--color-accent);
    /* ボタンの色は維持 */
    transform: translateY(-2px);
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .p-cta-box {
        flex-direction: column;
        gap: 30px;
        padding: 30px 20px;
    }

    .p-cta-box__tel {
        font-size: 32px;
    }

    .p-cta-title {
        font-size: 24px;
    }

    .c-btn--cta {
        width: 100%;
        min-width: auto;
        font-size: 16px;
        padding: 15px 20px;
    }
}

/* OTHERS */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* VIRTUAL ROUTER STYLE */
.page-section {
    display: block;
    padding-top: 0;
    animation: fadeIn 0.5s ease;
}

.page-section.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------------------
           PAGE SPECIFIC STYLES (Subsidy, Service, etc.)
        ----------------------------------------------------------------- */
/* Service Details Styles */
.p-service-detail {
    margin-bottom: 100px;
}

.p-service-detail:last-child {
    margin-bottom: 0;
}

.p-service-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-service-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media screen and (max-width: 768px) {
    .p-service-col2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .p-service-box {
        padding: 20px;
    }
}

/* SUBSIDY BANNER */
.p-subsidy-banner {
    margin-top: 80px;
    padding: 0 20px;
}

.p-subsidy-banner__inner {
    text-align: center;
    color: #fff;
    box-shadow: rgba(0, 169, 188, 0.2) 0 10px 30px;
    background:
        linear-gradient(135deg,
            rgba(0, 169, 188, 0.85),
            rgba(39, 178, 156, 0.85)),
        url("../img/home/subsidy-banner-bg.jpg");
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    padding: 50px;
}


.p-subsidy-banner__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.p-subsidy-banner__icon {
    background: #fff;
    color: var(--color-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.p-subsidy-banner__text {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.8;
}

@media screen and (max-width: 600px) {
    .p-subsidy-banner__inner {
        padding: 30px 20px;
    }

    .p-subsidy-banner__title {
        font-size: 20px;
        flex-direction: column;
        gap: 10px;
    }

    .p-subsidy-banner__icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .p-subsidy-banner__text {
        font-size: 16px;
        text-align: left;
    }
}


/* ===== subsidy.html ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #00a9bc;
    --color-accent: #27b29c;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f7f8;
    --color-border: #e0e0e0;
    --font-base: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 横スクロール防止 */
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-pc {
    display: block;
}

.u-sp {
    display: none;
}

.u-mb20 {
    margin-bottom: 20px;
}

.u-mb40 {
    margin-bottom: 40px;
}

.u-mb60 {
    margin-bottom: 60px;
}

.u-mb80 {
    margin-bottom: 80px;
}

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

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

@media screen and (max-width: 768px) {
    .u-pc {
        display: none;
    }

    .u-sp {
        display: block;
    }

    .u-mb40 {
        margin-bottom: 24px;
    }

    .u-mb60 {
        margin-bottom: 40px;
    }

    .u-mb80 {
        margin-bottom: 50px;
    }
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.l-section {
    padding: 100px 0;
    position: relative;
    /* 背景装飾用 */
}

.l-section--gray {
    background-color: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 60px 0;
    }
}

/* Header */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.l-header__logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 実際はロゴ画像を使用 */
.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-header__menu {
    display: flex;
    gap: 30px;
    font-size: 16px;
    font-weight: 500;
}

.l-header__tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.l-header__tel-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header__tel-time {
    font-size: 11px;
    color: var(--color-text);
}

/* Hamburger */
.l-header__burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.l-header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header__burger span:nth-of-type(1) {
    top: 0;
}

.l-header__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 1000;
}

.l-header__sp-nav.is-active {
    right: 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .l-header {
        padding: 0 20px;
        height: 60px;
    }

    .l-header__nav {
        display: none;
    }

    .l-header__burger {
        display: block;
    }
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENT (Block: c-)
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

/* Headings */
.c-heading01 {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.05em;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 10px;
    font-weight: 500;
}

.c-heading02 {
    font-size: 24px;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
}

.c-heading03 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .c-heading01 {
        font-size: 28px;
    }

    .c-heading02 {
        font-size: 20px;
    }

    .c-heading03 {
        font-size: 18px;
    }
}

/* Breadcrumbs */
.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

/* Page KV (FV) */
.c-page-kv {
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Header height */
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards & Lists */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.c-card__body {
    padding: 20px;
}

.c-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

/* List Check (Strengths) */
.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert Box */
.p-alert-box {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
    padding: 30px;
    border-radius: 8px;
}

.p-alert-box__title {
    color: #d63031;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-alert-box__title i {
    font-size: 24px;
}

/* Recruitment Table */
.p-recruit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.p-recruit-table th,
.p-recruit-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
}

.p-recruit-table th {
    background-color: #f9f9f9;
    width: 30%;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 768px) {

    .p-recruit-table th,
    .p-recruit-table td {
        display: block;
        width: 100%;
    }

    .p-recruit-table th {
        background-color: #f0f0f0;
    }
}

/* Motto Grid */
.p-motto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.p-motto-item {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-motto-item:hover {
    transform: translateY(-5px);
}

.p-motto-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-motto-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.p-motto-text {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 60px;
        height: 60px;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* Contact Page Specific */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* -----------------------------------------------------------------
           REASON SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-reason-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 40px 0;
}

.p-reason-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除し、justify-contentで間隔を制御 */
    position: relative;
}

/* Zigzag Layout */
.p-reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-reason-item__content {
    width: 48%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

/* Big Number Styling */
.p-reason-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    position: absolute;
    top: -70px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    font-style: italic;
}

.p-reason-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-reason-item__desc {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 30px;
}

.p-reason-item__img-box {
    width: 48%;
    /* 幅を調整 */
    position: relative;
}

.p-reason-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Design 01: Loupe */
.p-reason-item__img-box--loupe {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 15px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.p-reason-item__img-box--loupe .p-reason-item__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Handle */
.p-reason-item__img-box--loupe::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 30px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    border-radius: 15px;
    z-index: -1;
}

/* Design 02: UI Badges */
.p-reason-item__img-box--ui {
    padding-left: 20px;
    padding-bottom: 20px;
}

.p-reason-item__img-box--ui .p-reason-item__img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Decorative Badges */
.p-reason-badge {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 2;
}

.p-reason-badge i {
    background: var(--color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.p-reason-badge--1 {
    top: 20%;
    left: -30px;
    animation: float 3s ease-in-out infinite;
}

.p-reason-badge--2 {
    bottom: 10%;
    left: -10px;
    animation: float 4s ease-in-out infinite 0.5s;
}

.p-reason-badge--3 {
    bottom: -20px;
    right: 20px;
    background: var(--color-accent);
    color: #fff;
    animation: float 3.5s ease-in-out infinite 1s;
}

.p-reason-badge--3 i {
    background: #fff;
    color: var(--color-accent);
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 768px) {
    .p-reason-list {
        gap: 80px;
    }

    .p-reason-item,
    .p-reason-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-reason-item__content,
    .p-reason-item__img-box {
        width: 100%;
    }

    .p-reason-item__img-box--loupe {
        width: 80%;
        margin: 0 auto;
    }

    .p-reason-badge--1 {
        left: -10px;
    }
}

/* -----------------------------------------------------------------
           SERVICE LIST SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* gapは削除 */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.4;
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    /* 幅を調整 */
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Shape Modifiers */
.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .p-service-list {
        gap: 60px;
    }

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPANY TEASER SECTION (New Design)
        ----------------------------------------------------------------- */
.p-company-teaser {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.p-company-teaser__img {
    width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.p-company-teaser__img img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    position: absolute;
    top: -10%;
    left: 0;
    display: block;
    transition: transform 0.1s linear;
    will-change: transform;
}

.p-company-teaser__content {
    width: 50%;
    background-color: #008c9e;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.p-company-teaser__eng {
    font-family: sans-serif;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.p-company-teaser__eng span {
    display: block;
}

.p-company-teaser__eng-1 {
    display: none;
}

.p-company-teaser__eng-2 {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}

.p-company-teaser__heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.p-company-teaser__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

.c-link-arrow {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: opacity 0.3s;
}

.c-link-arrow:hover {
    opacity: 0.7;
}

@media screen and (max-width: 768px) {
    .p-company-teaser {
        flex-direction: column;
    }

    .p-company-teaser__img,
    .p-company-teaser__content {
        width: 100%;
    }

    .p-company-teaser__img {
        height: 300px;
        min-height: auto;
    }

    .p-company-teaser__content {
        padding: 40px 20px;
    }

    .p-company-teaser__eng-2 {
        font-size: 50px;
    }
}

/* -----------------------------------------------------------------
           RECRUIT TOP SECTION (New)
        ----------------------------------------------------------------- */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 350px;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top right skew image */
.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 200px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Bottom left skew image */
.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 220px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-lower__title {
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.p-recruit-lower__heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.p-recruit-lower__text {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px;
}

.c-btn--recruit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.c-btn--recruit:hover {
    background: #fff;
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .p-recruit-upper {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-upper__images {
        height: 250px;
    }

    .p-recruit-skew-img--1 {
        width: 65%;
        height: 140px;
    }

    .p-recruit-skew-img--2 {
        width: 70%;
        height: 150px;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }

    .p-recruit-lower__content {
        padding: 40px 20px;
    }
}


/* -----------------------------------------------------------------
           PAGE SPECIFIC (Block: p-)
        ----------------------------------------------------------------- */

/* VIRTUAL PAGE ROUTING 
           (For file generation output purposes)
        */
.page-section {
    display: block;
    padding-top: 0;
    animation: fadeIn 0.5s ease;
}

.page-section.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TOP: Main Visual */
.p-top-mv {
    height: calc(100vh - 80px);
    margin-top: 80px;
    background-color: #eef;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-top-mv__video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.p-top-mv__content {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.p-top-mv__copy {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .p-top-mv {
        height: 60vh;
    }

    .p-top-mv__content {
        padding: 30px;
        width: 90%;
    }

    .p-top-mv__copy {
        font-size: 24px;
    }
}

/* TOP: News List */
.p-news-list__item {
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.p-news-list__date {
    font-family: monospace;
    color: var(--color-text);
    font-size: 16px;
}

.p-news-list__cat {
    font-size: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Subsidy (Strengths) */
.p-strength-item {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-strength-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-strength-item__img {
    width: 50%;
    border-radius: 10px;
    overflow: hidden;
}

.p-strength-item__body {
    width: 50%;
}

.p-strength-item__num {
    font-size: 60px;
    font-weight: 700;
    color: var(--color-bg-gray);
    -webkit-text-stroke: 1px var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.p-strength-item__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .p-strength-item {
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 40px;
    }

    .p-strength-item__img,
    .p-strength-item__body {
        width: 100%;
    }
}

/* Service Details Styles */
.p-service-detail {
    margin-bottom: 100px;
}

.p-service-detail:last-child {
    margin-bottom: 0;
}

.p-service-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-service-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Flow Steps with Icons */
.p-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    counter-reset: flow-counter;
    text-align: center;
    /* Center content for icon alignment */
}

.p-flow-step {
    background: #f9f9f9;
    padding: 30px 20px 20px;
    /* Increased top padding */
    border-radius: 8px;
    position: relative;
    border-top: 3px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-flow-step::before {
    counter-increment: flow-counter;
    content: "Step " counter(flow-counter);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.p-flow-step__icon {
    display: block;
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 15px;
    height: 40px;
    /* fixed height for alignment */
    line-height: 40px;
}

.p-flow-step h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-text);
}

.p-faq-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.p-faq-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.p-faq-item:last-child {
    border-bottom: none;
}

.p-faq-q {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    gap: 10px;
}

.p-faq-q::before {
    content: 'Q.';
}

.p-faq-a {
    padding-left: 25px;
    color: var(--color-text);
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .p-service-col2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .p-service-box {
        padding: 20px;
    }
}

/* Contact Form */
.p-form-row {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.p-form-label {
    width: 200px;
    font-weight: 700;
    padding-top: 10px;
}

.p-form-label span {
    background: #ff6b6b;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 5px;
    vertical-align: middle;
}

.p-form-input {
    flex: 1;
}

.p-form-input input,
.p-form-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

@media screen and (max-width: 768px) {
    .p-form-row {
        flex-direction: column;
    }

    .p-form-label {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* ===== service.html ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #00a9bc;
    --color-accent: #27b29c;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f7f8;
    --color-border: #e0e0e0;
    --font-base: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 横スクロール防止 */
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-pc {
    display: block;
}

.u-sp {
    display: none;
}

.u-mb20 {
    margin-bottom: 20px;
}

.u-mb40 {
    margin-bottom: 40px;
}

.u-mb60 {
    margin-bottom: 60px;
}

.u-mb80 {
    margin-bottom: 80px;
}

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

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

@media screen and (max-width: 768px) {
    .u-pc {
        display: none;
    }

    .u-sp {
        display: block;
    }

    .u-mb40 {
        margin-bottom: 24px;
    }

    .u-mb60 {
        margin-bottom: 40px;
    }

    .u-mb80 {
        margin-bottom: 50px;
    }
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.l-section {
    padding: 100px 0;
    position: relative;
    /* 背景装飾用 */
}

.l-section--gray {
    background-color: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 60px 0;
    }
}

/* Header */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.l-header__logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 実際はロゴ画像を使用 */
.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-header__menu {
    display: flex;
    gap: 30px;
    font-size: 16px;
    font-weight: 500;
}

.l-header__tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.l-header__tel-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header__tel-time {
    font-size: 11px;
    color: var(--color-text);
}

/* Hamburger */
.l-header__burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.l-header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header__burger span:nth-of-type(1) {
    top: 0;
}

.l-header__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 1000;
}

.l-header__sp-nav.is-active {
    right: 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .l-header {
        padding: 0 20px;
        height: 60px;
    }

    .l-header__nav {
        display: none;
    }

    .l-header__burger {
        display: block;
    }
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENT (Block: c-)
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

/* Headings */
.c-heading01 {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.05em;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 10px;
    font-weight: 500;
}

.c-heading02 {
    font-size: 24px;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
}

/* Updated H3 Style */
.c-heading03 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

/* .c-heading03::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 60px;
            height: 4px;
            background-color: var(--color-primary);
            border-radius: 2px;
        } */

@media screen and (max-width: 768px) {
    .c-heading01 {
        font-size: 28px;
    }

    .c-heading02 {
        font-size: 20px;
    }

    .c-heading03 {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
}

/* Breadcrumbs */
.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

/* Page KV (FV) */
.c-page-kv {
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Header height */
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards & Lists */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.c-card__body {
    padding: 20px;
}

.c-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

/* List Check (Strengths) */
.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert Box */
.p-alert-box {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
    padding: 30px;
    border-radius: 8px;
}

.p-alert-box__title {
    color: #d63031;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-alert-box__title i {
    font-size: 24px;
}

/* Recruitment Table */
.p-recruit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.p-recruit-table th,
.p-recruit-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
}

.p-recruit-table th {
    background-color: #f9f9f9;
    width: 30%;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 768px) {

    .p-recruit-table th,
    .p-recruit-table td {
        display: block;
        width: 100%;
    }

    .p-recruit-table th {
        background-color: #f0f0f0;
    }
}

/* =================================================================
           GENERIC TABLE STYLES (MODERN)
        ================================================================= */
.p-table-scroll {
    overflow-x: auto;
    margin-bottom: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.c-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 700px;
    /* 横スクロール発生ライン */
    font-size: 16px;
}

.c-table th,
.c-table td {
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    line-height: 1.7;
}

/* Table Header (THEAD) */
.c-table thead th {
    background-color: #ffffff;
    /* Very light primary */
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary);
    white-space: nowrap;
    text-align: center;
}

/* Table Body (TBODY) */
.c-table tbody tr {
    transition: background-color 0.2s;
}

.c-table tbody tr:hover {
    background-color: #fcfcfc;
}

.c-table tbody tr:last-child th,
.c-table tbody tr:last-child td {
    border-bottom: none;
}

/* Vertical Header in TBODY (for definition lists) */
.c-table tbody th {
    background-color: #f9f9f9;
    color: var(--color-primary);
    font-weight: 700;
    text-align: left;
    min-width: 200px;
    border-right: 1px solid #f0f0f0;
}

/* =================================================================
           TARGET & IMPROVEMENT STYLES (NEW)
        ================================================================= */
.p-service-box--center {
    text-align: center;
}

.p-icon-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.p-icon-header__icon {
    width: 60px;
    height: 60px;
    background-color: #eaf6f7;
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 15px;
}

/* アイコンヘッダー内の見出しは装飾をリセット */
.p-icon-header .c-heading03 {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.p-icon-header .c-heading03::after {
    display: none;
}

/* アイコン付きリスト */
.p-icon-list {
    list-style: none;
    text-align: left;
}

.p-icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.p-icon-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.p-icon-list li i {
    color: var(--color-accent);
    font-size: 20px;
    margin-top: 4px;
    flex-shrink: 0;
    width: 24px;
    /* アイコン幅を揃える */
    text-align: center;
}

/* Info Note */
.p-info-note {
    background-color: #fff8e1;
    /* 薄い黄色 */
    padding: 15px;
    border-radius: 8px;
    font-size: 13px;
    color: #856404;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    text-align: left;
}

.p-info-note i {
    color: #ffc107;
    font-size: 3rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.p-info-note span {
    font-size: 18px;
}

/* Small Icon Grid */
.p-icon-grid-small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.p-icon-item-small {
    background-color: #f9f9f9;
    padding: 20px 10px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    border: 1px solid transparent;
    justify-content: center;
    flex-wrap: wrap;
}

.p-icon-item-small:hover {
    background-color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 5px 15px rgba(0, 169, 188, 0.1);
    transform: translateY(-2px);
}

.p-icon-item-small i {
    font-size: 3rem;
    color: var(--color-primary);
    padding-right: 1rem;
}

.p-icon-item-small span {
    font-size: 1.6rem;
    font-weight: 700;
}

/* =================================================================
           STRENGTHS BOX STYLES (NEW)
        ================================================================= */
.p-strength-box {
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 16px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-strength-box::before {
    content: 'POINT';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    padding: 5px 20px;
    border-bottom-right-radius: 16px;
    font-size: 16px;
}

.p-strength-box__header {
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-primary);
}

.p-strength-box__title {
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
    position: relative;
}

.p-strength-box__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    margin: 10px auto 0;
    border-radius: 2px;
}

.p-strength-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.p-strength-card {
    background: #f0fbff;
    /* Very light primary tint */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s;
}

.p-strength-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-strength-card__icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.p-strength-card__text {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

@media screen and (max-width: 768px) {
    .p-strength-box {
        padding: 30px 20px;
    }

    .p-strength-grid {
        grid-template-columns: 1fr;
    }

    .p-strength-card {
        flex-direction: row;
        text-align: left;
        padding: 15px;
    }

    .p-strength-card__icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        flex-shrink: 0;
    }
}

/* =================================================================
           FLOW STEPS STYLES (VERTICAL UPDATE)
        ================================================================= */
.p-flow-vertical {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

/* 連結線 */
.p-flow-vertical::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    background-color: #ffe0b2;
    /* 薄いオレンジ */
    z-index: 0;
    border-radius: 4px;
}

.p-flow-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    padding: 25px 30px;
    border-radius: 16px;
    margin-bottom: 30px;
    /* カード間のスペース */
    position: relative;
    z-index: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.p-flow-card:last-child {
    margin-bottom: 0;
}

.p-flow-card__main {
    flex: 1;
    padding-right: 20px;
}

.p-flow-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.p-flow-card__num {
    font-size: 24px;
    font-weight: 700;
    margin-right: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.p-flow-card__num i {
    font-size: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-flow-card__title {
    font-size: 20px;
    font-weight: 700;
}

.p-flow-card__desc {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
}

.p-flow-card__icon {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.p-flow-card__icon i {
    font-size: 36px;
}

/* 最後のステップ（完了）用スタイル */
.p-flow-card--complete {
    background-color: #f39c12;
    /* オレンジ */
}

.p-flow-card--complete .p-flow-card__icon {
    color: #f39c12;
}

@media screen and (max-width: 768px) {
    .p-flow-vertical::before {
        left: 20px;
    }

    .p-flow-card {
        flex-direction: column-reverse;
        /* アイコンを上に */
        align-items: flex-start;
        padding: 20px;
        margin-left: 0;
    }

    .p-flow-card__main {
        padding-right: 0;
        width: 100%;
    }

    .p-flow-card__icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
        align-self: flex-end;
        /* 右上に配置 */
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .p-flow-card__icon i {
        font-size: 28px;
    }

    .p-flow-card__title {
        font-size: 18px;
    }
}

/* =================================================================
           PAGE NAVIGATION STYLES (NEW)
        ================================================================= */
.p-page-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.p-page-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 20px;
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    transition: all 0.3s;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.p-page-nav__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-3px);
}

.p-page-nav__link span {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.p-page-nav__link i {
    margin-top: 10px;
    font-size: 16px;
    color: var(--color-text);
}

@media screen and (max-width: 768px) {
    .p-page-nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Section Anchor Offset for Fixed Header */
#soundproofing,
#asbestos {
    scroll-margin-top: 100px;
}

/* Motto Grid */
.p-motto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.p-motto-item {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-motto-item:hover {
    transform: translateY(-5px);
}

.p-motto-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-motto-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.p-motto-text {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 60px;
        height: 60px;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* Contact Page Specific */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* -----------------------------------------------------------------
           REASON SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-reason-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 40px 0;
}

.p-reason-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除し、justify-contentで間隔を制御 */
    position: relative;
}

/* Zigzag Layout */
.p-reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-reason-item__content {
    width: 48%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

/* Big Number Styling */
.p-reason-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    position: absolute;
    top: -70px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    font-style: italic;
}

.p-reason-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-reason-item__desc {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 30px;
}

.p-reason-item__img-box {
    width: 48%;
    /* 幅を調整 */
    position: relative;
}

.p-reason-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Design 01: Loupe */
.p-reason-item__img-box--loupe {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 15px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.p-reason-item__img-box--loupe .p-reason-item__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Handle */
.p-reason-item__img-box--loupe::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 30px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    border-radius: 15px;
    z-index: -1;
}

/* Design 02: UI Badges */
.p-reason-item__img-box--ui {
    padding-left: 20px;
    padding-bottom: 20px;
}

.p-reason-item__img-box--ui .p-reason-item__img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Decorative Badges */
.p-reason-badge {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 2;
}

.p-reason-badge i {
    background: var(--color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 768px) {
    .p-reason-list {
        gap: 80px;
    }

    .p-reason-item,
    .p-reason-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-reason-item__content,
    .p-reason-item__img-box {
        width: 100%;
    }

    .p-reason-item__img-box--loupe {
        width: 80%;
        margin: 0 auto;
    }

    .p-reason-badge--1 {
        left: -10px;
    }
}

/* -----------------------------------------------------------------
           SERVICE LIST SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除 */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    /* 幅を調整 */
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Shape Modifiers */
.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .p-service-list {
        gap: 60px;
    }

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPANY TEASER SECTION (New Design)
        ----------------------------------------------------------------- */
.p-company-teaser {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.p-company-teaser__img {
    width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.p-company-teaser__img img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    position: absolute;
    top: -10%;
    left: 0;
    display: block;
    transition: transform 0.1s linear;
    will-change: transform;
}

.p-company-teaser__content {
    width: 50%;
    background-color: #008c9e;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.p-company-teaser__eng {
    font-family: sans-serif;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.p-company-teaser__eng span {
    display: block;
}

.p-company-teaser__eng-1 {
    display: none;
}

.p-company-teaser__eng-2 {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}

.p-company-teaser__heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.p-company-teaser__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

.c-link-arrow {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: opacity 0.3s;
}

.c-link-arrow:hover {
    opacity: 0.7;
}

@media screen and (max-width: 768px) {
    .p-company-teaser {
        flex-direction: column;
    }

    .p-company-teaser__img,
    .p-company-teaser__content {
        width: 100%;
    }

    .p-company-teaser__img {
        height: 300px;
        min-height: auto;
    }

    .p-company-teaser__content {
        padding: 40px 20px;
    }

    .p-company-teaser__eng-2 {
        font-size: 50px;
    }
}

/* -----------------------------------------------------------------
           RECRUIT TOP SECTION (New)
        ----------------------------------------------------------------- */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 350px;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top right skew image */
.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 200px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Bottom left skew image */
.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 220px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-lower__title {
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.p-recruit-lower__heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.p-recruit-lower__text {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px;
}

.c-btn--recruit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.c-btn--recruit:hover {
    background: #fff;
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .p-recruit-upper {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-upper__images {
        height: 250px;
    }

    .p-recruit-skew-img--1 {
        width: 65%;
        height: 140px;
    }

    .p-recruit-skew-img--2 {
        width: 70%;
        height: 150px;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }

    .p-recruit-lower__content {
        padding: 40px 20px;
    }
}


/* -----------------------------------------------------------------
           PAGE SPECIFIC (Block: p-)
        ----------------------------------------------------------------- */

/* VIRTUAL PAGE ROUTING 
           (For file generation output purposes)
        */
.page-section {
    display: block;
    padding-top: 0;
    animation: fadeIn 0.5s ease;
}

.page-section.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TOP: Main Visual */
.p-top-mv {
    height: calc(100vh - 80px);
    margin-top: 80px;
    background-color: #eef;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-top-mv__video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.p-top-mv__content {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.p-top-mv__copy {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .p-top-mv {
        height: 60vh;
    }

    .p-top-mv__content {
        padding: 30px;
        width: 90%;
    }

    .p-top-mv__copy {
        font-size: 24px;
    }
}

/* TOP: News List */
.p-news-list__item {
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.p-news-list__date {
    font-family: monospace;
    color: var(--color-text);
    font-size: 16px;
}

.p-news-list__cat {
    font-size: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Subsidy (Strengths) */
.p-strength-item {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-strength-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-strength-item__img {
    width: 50%;
    border-radius: 10px;
    overflow: hidden;
}

.p-strength-item__body {
    width: 50%;
}

.p-strength-item__num {
    font-size: 60px;
    font-weight: 700;
    color: var(--color-bg-gray);
    -webkit-text-stroke: 1px var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.p-strength-item__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

/* =========================
  Subsidy Page
========================= */

.p-subsidy-intro {
    align-items: center;
}

.p-subsidy-img {
    width: 100%;
    border-radius: 8px;
    position: relative;
}

.p-subsidy-highlight {
    color: var(--color-primary);
}

.p-subsidy-box {
    padding: 40px;
    border-radius: 8px;
}

.p-subsidy-checklist {
    list-style: none;
    padding: 0;
}

.p-subsidy-checklist li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 18px;
}

.p-subsidy-checklist li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.p-subsidy-note {
    margin-top: 15px;
    background: #fff;
    padding: 15px;
    border-left: 4px solid var(--color-accent);
    border-radius: 5px;
    font-size: 16px;
}

.p-subsidy-note i {
    color: var(--color-accent);
    margin-right: 6px;
}

.p-subsidy-map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

/* Icon grid */
.p-subsidy-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.p-subsidy-icon-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.p-subsidy-icon-card i {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-subsidy-icon-card h4 {
    font-weight: 700;
    font-size: 16px;
}

.p-subsidy-icon-card p {
    font-size: 12px;
    color: #666;
}

/* Repair */
.p-subsidy-repair {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.p-subsidy-repair-card {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    gap: 15px;
    flex: 1;
    min-width: 250px;
    align-items: center;
}

.p-subsidy-repair-card i {
    font-size: 24px;
    color: var(--color-accent);
    background: var(--color-bg-gray);
    padding: 15px;
    border-radius: 50%;
}

.p-subsidy-hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 40px 0;
}

@media screen and (max-width: 768px) {
    .p-strength-item {
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 40px;
    }

    .p-strength-item__img,
    .p-strength-item__body {
        width: 100%;
    }
}

/* Service Details Styles */
.p-service-detail {
    margin-bottom: 100px;
}

.p-service-detail:last-child {
    margin-bottom: 0;
}

.p-service-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-service-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Flow Steps with Icons */
.p-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    counter-reset: flow-counter;
    text-align: center;
    /* Center content for icon alignment */
}

.p-flow-step {
    background: #f9f9f9;
    padding: 30px 20px 20px;
    /* Increased top padding */
    border-radius: 8px;
    position: relative;
    border-top: 3px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-flow-step::before {
    counter-increment: flow-counter;
    content: "Step " counter(flow-counter);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.p-flow-step__icon {
    display: block;
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 15px;
    height: 40px;
    /* fixed height for alignment */
    line-height: 40px;
}

.p-flow-step h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-text);
}

/* FAQ (アコーディオン形式に修正) */
/* 既存の p-faq-box, p-faq-item, p-faq-q, p-faq-a のスタイルは削除し、
           p-accordion-* に置き換えます。 */

.p-accordion-list {
    margin-bottom: 60px;
    border-top: 0px;
}

.p-accordion-item {
    border-bottom: 0px;
    background: #fff;
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 1rem;
}
.-asbest .p-accordion-item {
    background: #fbf1e5;
}

.p-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.p-accordion-header:hover {
    background-color: #fcfcfc;
}

.p-accordion-item.is-open .p-accordion-header {
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 2rem;
}
.-asbest .p-accordion-item.is-open .p-accordion-header {
    background-color: transparent;
}
.p-accordion-q {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.p-accordion-q__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffc400;
    /* Qアイコンの黄色 */
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.p-accordion-toggle i {
    font-size: 16px;
    color: var(--color-primary);
    transition: transform 0.3s;
}

.p-accordion-item.is-open .p-accordion-toggle i {
    transform: rotate(180deg);
}

.p-accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
}

.p-accordion-content.is-open {
    max-height: 500px;
    /* 十分な高さ */
}

.p-accordion-a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0 30px 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text);
}

.p-accordion-a__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-primary);
    /* Aアイコンの青 */
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

@media screen and (max-width: 768px) {

    .p-accordion-q,
    .p-accordion-a {
        font-size: 16px;
    }
}

/* =================================================================
           PAGE NAVIGATION STYLES (NEW)
        ================================================================= */
.p-page-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.p-page-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 20px;
    width: 100%;
    max-width: 40%;
    border-radius: 8px;
    transition: all 0.3s;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-size: 1.8rem;
}

.p-page-nav__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-3px);
}

.p-page-nav__link span {
    font-size: 1.4rem;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.p-page-nav__link i {
    margin-top: 10px;
    font-size: 16px;
    color: var(--color-text);
}

@media screen and (max-width: 768px) {
    .p-page-nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Section Anchor Offset for Fixed Header */
#soundproofing,
#asbestos {
    scroll-margin-top: 100px;
}

/* =================================================================
           STRENGTHS BOX STYLES (NEW)
        ================================================================= */
.p-strength-box {
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 16px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-strength-box::before {
    content: 'POINT';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    padding: 5px 20px;
    border-bottom-right-radius: 16px;
    font-size: 16px;
}

.p-strength-box__header {
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-primary);
}

.p-strength-box__title {
    font-size: 2.4rem;
    font-weight: 700;
    display: inline-block;
    position: relative;
}

.p-strength-box__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    margin: 10px auto 0;
    border-radius: 2px;
}

.p-strength-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.p-strength-card {
    background: #f0fbff;
    /* Very light primary tint */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s;
}

.p-strength-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-strength-card__icon {
    width: 8rem;
    height: 8rem;
    padding: 2rem;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-primary);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.p-strength-card__text {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

@media screen and (max-width: 768px) {
    .p-strength-box {
        padding: 30px 20px;
    }

    .p-strength-grid {
        grid-template-columns: 1fr;
    }

    .p-strength-card {
        flex-direction: row;
        text-align: left;
        padding: 15px;
    }

    .p-strength-card__icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        flex-shrink: 0;
    }
}

/* テーブル全体の横幅制御 */
.p-table-scroll .c-table {
    margin: 0 auto;
}

.l-service-soundproofing {
    margin: 0 3rem;
    padding: 2rem;
    background: #ebf6f8;
    border-radius: 1rem;
}

@media screen and (max-width: 767px) {
    .l-service-soundproofing {
        margin: 0;
        padding: 4vw;
        background: #ebf6f8;
        border-radius: 1rem;
    }
}


/* Swiper Custom Styles */
.swiper {
    width: 100%;
    padding-bottom: 40px !important;
    /* Pagination space */
}

.swiper-slide {
    height: auto;
    /* Card height unification */
}

.swiper-slide .c-card {
    height: 100%;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-primary) !important;
}

/* Section Anchor Offset for Fixed Header */
#soundproofing,
#asbestos {
    scroll-margin-top: 100px;
}


/* ===== company.html ===== */

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-pc {
    display: block;
}

.u-sp {
    display: none;
}

.u-mb20 {
    margin-bottom: 20px;
}

.u-mb40 {
    margin-bottom: 40px;
}

.u-mb60 {
    margin-bottom: 60px;
}

.u-mb80 {
    margin-bottom: 80px;
}

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

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

@media screen and (max-width: 768px) {
    .u-pc {
        display: none;
    }

    .u-sp {
        display: block;
    }

    .u-mb40 {
        margin-bottom: 24px;
    }

    .u-mb60 {
        margin-bottom: 40px;
    }

    .u-mb80 {
        margin-bottom: 50px;
    }
}

.p-faq {
    margin: 0 auto;
    padding: 3rem;
    background: #fff;
    border-radius: 2rem;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.l-section {
    padding: 100px 0;
    position: relative;
    /* 背景装飾用 */
}

.l-section--gray {
    background-color: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 60px 0;
    }
}

/* Header */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.l-header__logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 実際はロゴ画像を使用 */
.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-header__menu {
    display: flex;
    gap: 30px;
    font-size: 16px;
    font-weight: 500;
}

.l-header__tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.l-header__tel-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header__tel-time {
    font-size: 11px;
    color: var(--color-text);
}

/* Hamburger */
.l-header__burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.l-header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header__burger span:nth-of-type(1) {
    top: 0;
}

.l-header__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 1000;
}

.l-header__sp-nav.is-active {
    right: 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .l-header {
        padding: 0 20px;
        height: 60px;
    }

    .l-header__nav {
        display: none;
    }

    .l-header__burger {
        display: block;
    }
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENT (Block: c-)
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

/* Headings */
.c-heading01 {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.05em;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 10px;
    font-weight: 500;
}

.c-heading02 {
    font-size: 24px;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
}

.c-heading03 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .c-heading01 {
        font-size: 28px;
    }

    .c-heading02 {
        font-size: 20px;
    }

    .c-heading03 {
        font-size: 18px;
    }
}

/* Breadcrumbs */
.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

/* Page KV (FV) */
.c-page-kv {
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Header height */
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards & Lists */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.c-card__body {
    padding: 20px;
}

.c-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

/* List Check (Strengths) */
.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert Box */
.p-alert-box {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
    padding: 30px;
    border-radius: 8px;
}

.p-alert-box__title {
    color: #d63031;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-alert-box__title i {
    font-size: 24px;
}

/* Recruitment Table */
.p-recruit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.p-recruit-table th,
.p-recruit-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
}

.p-recruit-table th {
    background-color: #f9f9f9;
    width: 30%;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 768px) {

    .p-recruit-table th,
    .p-recruit-table td {
        display: block;
        width: 100%;
    }

    .p-recruit-table th {
        background-color: #f0f0f0;
    }
}

/* Motto Grid */
.p-motto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.p-motto-item {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-motto-item:hover {
    transform: translateY(-5px);
}

.p-motto-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-motto-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.p-motto-text {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 60px;
        height: 60px;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* Contact Page Specific */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* -----------------------------------------------------------------
           REASON SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-reason-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 40px 0;
}

.p-reason-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除し、justify-contentで間隔を制御 */
    position: relative;
}

/* Zigzag Layout */
.p-reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-reason-item__content {
    width: 48%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

/* Big Number Styling */
.p-reason-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    position: absolute;
    top: -70px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    font-style: italic;
}

.p-reason-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-reason-item__desc {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 30px;
}

.p-reason-item__img-box {
    width: 48%;
    /* 幅を調整 */
    position: relative;
}

.p-reason-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Design 01: Loupe */
.p-reason-item__img-box--loupe {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 15px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.p-reason-item__img-box--loupe .p-reason-item__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Handle */
.p-reason-item__img-box--loupe::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 30px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    border-radius: 15px;
    z-index: -1;
}

/* Design 02: UI Badges */
.p-reason-item__img-box--ui {
    padding-left: 20px;
    padding-bottom: 20px;
}

.p-reason-item__img-box--ui .p-reason-item__img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Decorative Badges */
.p-reason-badge {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 2;
}

.p-reason-badge i {
    background: var(--color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.p-reason-badge--1 {
    top: 20%;
    left: -30px;
    animation: float 3s ease-in-out infinite;
}

.p-reason-badge--2 {
    bottom: 10%;
    left: -10px;
    animation: float 4s ease-in-out infinite 0.5s;
}

.p-reason-badge--3 {
    bottom: -20px;
    right: 20px;
    background: var(--color-accent);
    color: #fff;
    animation: float 3.5s ease-in-out infinite 1s;
}

.p-reason-badge--3 i {
    background: #fff;
    color: var(--color-accent);
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 768px) {
    .p-reason-list {
        gap: 80px;
    }

    .p-reason-item,
    .p-reason-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-reason-item__content,
    .p-reason-item__img-box {
        width: 100%;
    }

    .p-reason-item__img-box--loupe {
        width: 80%;
        margin: 0 auto;
    }

    .p-reason-badge--1 {
        left: -10px;
    }
}

/* -----------------------------------------------------------------
           SERVICE LIST SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* gapは削除 */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.4;
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    /* 幅を調整 */
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Shape Modifiers */
.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .p-service-list {
        gap: 60px;
    }

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPANY TEASER SECTION (New Design)
        ----------------------------------------------------------------- */
.p-company-teaser {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.p-company-teaser__img {
    width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.p-company-teaser__img img {
    width: 100%;
    height: 150%;
    object-fit: cover;
    position: absolute;
    top: -10%;
    left: 0;
    display: block;
    transition: transform 0.1s linear;
    will-change: transform;
}

.p-company-teaser__content {
    width: 50%;
    background-color: #008c9e;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.p-company-teaser__eng {
    font-family: sans-serif;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.p-company-teaser__eng span {
    display: block;
}

.p-company-teaser__eng-1 {
    display: none;
}

.p-company-teaser__eng-2 {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}

.p-company-teaser__heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.p-company-teaser__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

.c-link-arrow {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: opacity 0.3s;
}

.c-link-arrow:hover {
    opacity: 0.7;
}

/* =========================
  Subsidy – Working Scenes
========================= */

.p-subsidy-scenes__card {
    border: none;
    box-shadow: none;
    background: transparent;
    text-align: center;
}

.p-subsidy-scenes__img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.p-subsidy-scenes__caption {
    font-size: 16px;
    color: var(--color-text);
    text-align: center;
}

/* =========================
  Strength Section
========================= */

.p-strength-intro {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 60px;
}

.p-strength-intro__ttl {
    border: none;
    padding: 0;
    display: inline-block;
}

.p-strength-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-strength-card-title__icon {
    color: var(--color-accent);
}

/* Promise box */
.p-strength-promise {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    margin-top: 60px;
}

.p-strength-promise__ttl {
    text-align: center;
    border-bottom: none;
}

.p-strength-promise__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.p-strength-promise__item {
    text-align: center;
}

.p-strength-promise__icon {
    font-size: 4rem;
    color: #ff6b6b;
    margin: 1rem 0 2rem;
}

.p-strength-promise__label {
    font-weight: 700;
}

.p-strength-promise__text {
    font-size: 16px;
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .p-company-teaser {
        flex-direction: column;
    }

    .p-company-teaser__img,
    .p-company-teaser__content {
        width: 100%;
    }

    .p-company-teaser__img {
        height: 300px;
        min-height: auto;
    }

    .p-company-teaser__content {
        padding: 40px 20px;
    }

    .p-company-teaser__eng-2 {
        font-size: 50px;
    }
}

/* -----------------------------------------------------------------
           RECRUIT TOP SECTION (New)
        ----------------------------------------------------------------- */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 350px;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top right skew image */
.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 200px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Bottom left skew image */
.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 220px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-lower__title {
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.p-recruit-lower__heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.p-recruit-lower__text {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px;
}

.c-btn--recruit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.c-btn--recruit:hover {
    background: #fff;
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .p-recruit-upper {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-upper__images {
        height: 250px;
    }

    .p-recruit-skew-img--1 {
        width: 65%;
        height: 140px;
    }

    .p-recruit-skew-img--2 {
        width: 70%;
        height: 150px;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }

    .p-recruit-lower__content {
        padding: 40px 20px;
    }
}


/* -----------------------------------------------------------------
           PAGE SPECIFIC (Block: p-)
        ----------------------------------------------------------------- */

/* VIRTUAL PAGE ROUTING 
           (For file generation output purposes)
        */
.page-section {
    display: block;
    padding-top: 0;
    animation: fadeIn 0.5s ease;
}

.page-section.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TOP: Main Visual */
.p-top-mv {
    height: calc(100vh - 80px);
    margin-top: 80px;
    background-color: #eef;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-top-mv__video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.p-top-mv__content {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.p-top-mv__copy {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .p-top-mv {
        height: 60vh;
    }

    .p-top-mv__content {
        padding: 30px;
        width: 90%;
    }

    .p-top-mv__copy {
        font-size: 24px;
    }
}

/* TOP: News List */
.p-news-list__item {
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.p-news-list__date {
    font-family: monospace;
    color: var(--color-text);
    font-size: 16px;
}

.p-news-list__cat {
    font-size: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Subsidy (Strengths) */
.p-strength-item {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-strength-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-strength-item__img {
    width: 50%;
    border-radius: 10px;
    overflow: hidden;
}

.p-strength-item__body {
    width: 50%;
}

.p-strength-item__num {
    font-size: 60px;
    font-weight: 700;
    color: var(--color-bg-gray);
    -webkit-text-stroke: 1px var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.p-strength-item__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .p-strength-item {
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 40px;
    }

    .p-strength-item__img,
    .p-strength-item__body {
        width: 100%;
    }
}

/* Service Details Styles */
.p-service-detail {
    margin-bottom: 100px;
}

.p-service-detail:last-child {
    margin-bottom: 0;
}

.p-service-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-service-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Flow Steps with Icons */
.p-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    counter-reset: flow-counter;
    text-align: center;
    /* Center content for icon alignment */
}

.p-flow-step {
    background: #f9f9f9;
    padding: 30px 20px 20px;
    /* Increased top padding */
    border-radius: 8px;
    position: relative;
    border-top: 3px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-flow-step::before {
    counter-increment: flow-counter;
    content: "Step " counter(flow-counter);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.p-flow-step__icon {
    display: block;
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 15px;
    height: 40px;
    /* fixed height for alignment */
    line-height: 40px;
}

.p-flow-step h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-text);
}

.p-faq-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.p-faq-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.p-faq-item:last-child {
    border-bottom: none;
}

.p-faq-q {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    gap: 10px;
}

.p-faq-q::before {
    content: 'Q.';
}

.p-faq-a {
    padding-left: 25px;
    color: var(--color-text);
    font-size: 16px;
}

.p-service-detail .p-faq {
    background: #fbf0e4;
}

.p-faq.-asbest {
    background: #fff;
}
@media screen and (max-width: 768px) {
    .p-service-col2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .p-service-box {
        padding: 20px;
    }
}

/* Contact Form */
.p-form-row {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.p-form-label {
    width: 200px;
    font-weight: 700;
    padding-top: 10px;
}

.p-form-label span {
    background: #ff6b6b;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 5px;
    vertical-align: middle;
}

.p-form-input {
    flex: 1;
}

.p-form-input input,
.p-form-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

@media screen and (max-width: 768px) {
    .p-form-row {
        flex-direction: column;
    }

    .p-form-label {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* ===== works.html ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #00a9bc;
    --color-accent: #27b29c;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f7f8;
    --color-border: #e0e0e0;
    --font-base: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 横スクロール防止 */
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-pc {
    display: block;
}

.u-sp {
    display: none;
}

.u-mb20 {
    margin-bottom: 20px;
}

.u-mb40 {
    margin-bottom: 40px;
}

.u-mb60 {
    margin-bottom: 60px;
}

.u-mb80 {
    margin-bottom: 80px;
}

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

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

@media screen and (max-width: 768px) {
    .u-pc {
        display: none;
    }

    .u-sp {
        display: block;
    }

    .u-mb40 {
        margin-bottom: 24px;
    }

    .u-mb60 {
        margin-bottom: 40px;
    }

    .u-mb80 {
        margin-bottom: 50px;
    }
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.l-section {
    padding: 100px 0;
    position: relative;
    /* 背景装飾用 */
}

.l-section--gray {
    background-color: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 60px 0;
    }
}

/* Header */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.l-header__logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 実際はロゴ画像を使用 */
.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-header__menu {
    display: flex;
    gap: 30px;
    font-size: 16px;
    font-weight: 500;
}

.l-header__tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.l-header__tel-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header__tel-time {
    font-size: 11px;
    color: var(--color-text);
}

/* Hamburger */
.l-header__burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.l-header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header__burger span:nth-of-type(1) {
    top: 0;
}

.l-header__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 1000;
}

.l-header__sp-nav.is-active {
    right: 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .l-header {
        padding: 0 20px;
        height: 60px;
    }

    .l-header__nav {
        display: none;
    }

    .l-header__burger {
        display: block;
    }
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENT (Block: c-)
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

/* Headings */
.c-heading01 {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.05em;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 10px;
    font-weight: 500;
}

.c-heading02 {
    font-size: 24px;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
}

.c-heading03 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .c-heading01 {
        font-size: 28px;
    }

    .c-heading02 {
        font-size: 20px;
    }

    .c-heading03 {
        font-size: 18px;
    }
}

/* Breadcrumbs */
.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

/* Page KV (FV) */
.c-page-kv {
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Header height */
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards & Lists */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.c-card__body {
    padding: 20px;
}

.c-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

/* List Check (Strengths) */
.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert Box */
.p-alert-box {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
    padding: 30px;
    border-radius: 8px;
}

.p-alert-box__title {
    color: #d63031;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-alert-box__title i {
    font-size: 24px;
}

/* Recruitment Table */
.p-recruit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.p-recruit-table th,
.p-recruit-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
}

.p-recruit-table th {
    background-color: #f9f9f9;
    width: 30%;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 768px) {

    .p-recruit-table th,
    .p-recruit-table td {
        display: block;
        width: 100%;
    }

    .p-recruit-table th {
        background-color: #f0f0f0;
    }
}

/* Motto Grid */
.p-motto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.p-motto-item {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-motto-item:hover {
    transform: translateY(-5px);
}

.p-motto-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-motto-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.p-motto-text {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 60px;
        height: 60px;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* Contact Page Specific */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* -----------------------------------------------------------------
           REASON SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-reason-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 40px 0;
}

.p-reason-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除し、justify-contentで間隔を制御 */
    position: relative;
}

/* Zigzag Layout */
.p-reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-reason-item__content {
    width: 48%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

/* Big Number Styling */
.p-reason-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    position: absolute;
    top: -70px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    font-style: italic;
}

.p-reason-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-reason-item__desc {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 30px;
}

.p-reason-item__img-box {
    width: 48%;
    /* 幅を調整 */
    position: relative;
}

.p-reason-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Design 01: Loupe */
.p-reason-item__img-box--loupe {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 15px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.p-reason-item__img-box--loupe .p-reason-item__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Handle */
.p-reason-item__img-box--loupe::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 30px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    border-radius: 15px;
    z-index: -1;
}

/* Design 02: UI Badges */
.p-reason-item__img-box--ui {
    padding-left: 20px;
    padding-bottom: 20px;
}

.p-reason-item__img-box--ui .p-reason-item__img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Decorative Badges */
.p-reason-badge {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 2;
}

.p-reason-badge i {
    background: var(--color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.p-reason-badge--1 {
    top: 20%;
    left: -30px;
    animation: float 3s ease-in-out infinite;
}

.p-reason-badge--2 {
    bottom: 10%;
    left: -10px;
    animation: float 4s ease-in-out infinite 0.5s;
}

.p-reason-badge--3 {
    bottom: -20px;
    right: 20px;
    background: var(--color-accent);
    color: #fff;
    animation: float 3.5s ease-in-out infinite 1s;
}

.p-reason-badge--3 i {
    background: #fff;
    color: var(--color-accent);
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 768px) {
    .p-reason-list {
        gap: 80px;
    }

    .p-reason-item,
    .p-reason-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-reason-item__content,
    .p-reason-item__img-box {
        width: 100%;
    }

    .p-reason-item__img-box--loupe {
        width: 80%;
        margin: 0 auto;
    }

    .p-reason-badge--1 {
        left: -10px;
    }
}

/* -----------------------------------------------------------------
           SERVICE LIST SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* gapは削除 */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.4;
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    /* 幅を調整 */
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Shape Modifiers */
.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .p-service-list {
        gap: 60px;
    }

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}


/* -----------------------------------------------------------------
           RECRUIT TOP SECTION (New)
        ----------------------------------------------------------------- */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 350px;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top right skew image */
.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 200px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Bottom left skew image */
.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 220px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-lower__title {
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.p-recruit-lower__heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.p-recruit-lower__text {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px;
}

.c-btn--recruit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.c-btn--recruit:hover {
    background: #fff;
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .p-recruit-upper {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-upper__images {
        height: 250px;
    }

    .p-recruit-skew-img--1 {
        width: 65%;
        height: 140px;
    }

    .p-recruit-skew-img--2 {
        width: 70%;
        height: 150px;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }

    .p-recruit-lower__content {
        padding: 40px 20px;
    }
}


/* -----------------------------------------------------------------
           PAGE SPECIFIC (Block: p-)
        ----------------------------------------------------------------- */

/* VIRTUAL PAGE ROUTING 
           (For file generation output purposes)
        */
.page-section {
    display: block;
    padding-top: 0;
    animation: fadeIn 0.5s ease;
}

.page-section.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TOP: Main Visual */
.p-top-mv {
    height: calc(100vh - 80px);
    margin-top: 80px;
    background-color: #eef;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-top-mv__video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.p-top-mv__content {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.p-top-mv__copy {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .p-top-mv {
        height: 60vh;
    }

    .p-top-mv__content {
        padding: 30px;
        width: 90%;
    }

    .p-top-mv__copy {
        font-size: 24px;
    }
}

/* TOP: News List */
.p-news-list__item {
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.p-news-list__date {
    font-family: monospace;
    color: var(--color-text);
    font-size: 16px;
}

.p-news-list__cat {
    font-size: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Subsidy (Strengths) */
.p-strength-item {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-strength-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-strength-item__img {
    width: 50%;
    border-radius: 10px;
    overflow: hidden;
}

.p-strength-item__body {
    width: 50%;
}

.p-strength-item__num {
    font-size: 60px;
    font-weight: 700;
    color: var(--color-bg-gray);
    -webkit-text-stroke: 1px var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.p-strength-item__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .p-strength-item {
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 40px;
    }

    .p-strength-item__img,
    .p-strength-item__body {
        width: 100%;
    }
}

/* Service Details Styles */
.p-service-detail {
    margin-bottom: 100px;
}

.p-service-detail:last-child {
    margin-bottom: 0;
}

.p-service-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-service-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Flow Steps with Icons */
.p-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    counter-reset: flow-counter;
    text-align: center;
    /* Center content for icon alignment */
}

.p-flow-step {
    background: #f9f9f9;
    padding: 30px 20px 20px;
    /* Increased top padding */
    border-radius: 8px;
    position: relative;
    border-top: 3px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-flow-step::before {
    counter-increment: flow-counter;
    content: "Step " counter(flow-counter);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.p-flow-step__icon {
    display: block;
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 15px;
    height: 40px;
    /* fixed height for alignment */
    line-height: 40px;
}

.p-flow-step h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-text);
}

.p-faq-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.p-faq-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.p-faq-item:last-child {
    border-bottom: none;
}

.p-faq-q {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    gap: 10px;
}

.p-faq-q::before {
    content: 'Q.';
}

.p-faq-a {
    padding-left: 25px;
    color: var(--color-text);
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .p-service-col2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .p-service-box {
        padding: 20px;
    }
}

/* Contact Form */
.p-form-row {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.p-form-label {
    width: 200px;
    font-weight: 700;
    padding-top: 10px;
}

.p-form-label span {
    background: #ff6b6b;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 5px;
    vertical-align: middle;
}

.p-form-input {
    flex: 1;
}

.p-form-input input,
.p-form-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

@media screen and (max-width: 768px) {
    .p-form-row {
        flex-direction: column;
    }

    .p-form-label {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* ===== news.html ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #00a9bc;
    --color-accent: #27b29c;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f7f8;
    --color-border: #e0e0e0;
    --font-base: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 横スクロール防止 */
    width: 100%;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-pc {
    display: block;
}

.u-sp {
    display: none;
}

.u-mb20 {
    margin-bottom: 20px;
}

.u-mb40 {
    margin-bottom: 40px;
}

.u-mb60 {
    margin-bottom: 60px;
}

.u-mb80 {
    margin-bottom: 80px;
}

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

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

@media screen and (max-width: 768px) {
    .u-pc {
        display: none;
    }

    .u-sp {
        display: block;
    }

    .u-mb40 {
        margin-bottom: 24px;
    }

    .u-mb60 {
        margin-bottom: 40px;
    }

    .u-mb80 {
        margin-bottom: 50px;
    }
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.l-section {
    padding: 100px 0;
    position: relative;
    /* 背景装飾用 */
}

.l-section--gray {
    background-color: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 60px 0;
    }
}

/* Header */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.l-header__logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 実際はロゴ画像を使用 */
.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-header__menu {
    display: flex;
    gap: 30px;
    font-size: 16px;
    font-weight: 500;
}

.l-header__tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.l-header__tel-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header__tel-time {
    font-size: 11px;
    color: var(--color-text);
}

/* Hamburger */
.l-header__burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.l-header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header__burger span:nth-of-type(1) {
    top: 0;
}

.l-header__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 1000;
}

.l-header__sp-nav.is-active {
    right: 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .l-header {
        padding: 0 20px;
        height: 60px;
    }

    .l-header__nav {
        display: none;
    }

    .l-header__burger {
        display: block;
    }
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENT (Block: c-)
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

/* Headings */
.c-heading01 {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.05em;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 10px;
    font-weight: 500;
}

.c-heading02 {
    font-size: 24px;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
}

.c-heading03 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .c-heading01 {
        font-size: 28px;
    }

    .c-heading02 {
        font-size: 20px;
    }

    .c-heading03 {
        font-size: 18px;
    }
}

/* Breadcrumbs */
.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

/* Page KV (FV) */
.c-page-kv {
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Header height */
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards & Lists */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.c-card__body {
    padding: 20px;
}

.c-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

/* List Check (Strengths) */
.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert Box */
.p-alert-box {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
    padding: 30px;
    border-radius: 8px;
}

.p-alert-box__title {
    color: #d63031;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-alert-box__title i {
    font-size: 24px;
}

/* Recruitment Table */
.p-recruit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.p-recruit-table th,
.p-recruit-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
}

.p-recruit-table th {
    background-color: #f9f9f9;
    width: 30%;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 768px) {

    .p-recruit-table th,
    .p-recruit-table td {
        display: block;
        width: 100%;
    }

    .p-recruit-table th {
        background-color: #f0f0f0;
    }
}

/* Motto Grid */
.p-motto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.p-motto-item {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-motto-item:hover {
    transform: translateY(-5px);
}

.p-motto-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-motto-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.p-motto-text {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 60px;
        height: 60px;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* Contact Page Specific */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* -----------------------------------------------------------------
           REASON SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-reason-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 40px 0;
}

.p-reason-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除し、justify-contentで間隔を制御 */
    position: relative;
}

/* Zigzag Layout */
.p-reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-reason-item__content {
    width: 48%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

/* Big Number Styling */
.p-reason-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    position: absolute;
    top: -70px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    font-style: italic;
}

.p-reason-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-reason-item__desc {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 30px;
}

.p-reason-item__img-box {
    width: 48%;
    /* 幅を調整 */
    position: relative;
}

.p-reason-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Design 01: Loupe */
.p-reason-item__img-box--loupe {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 15px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.p-reason-item__img-box--loupe .p-reason-item__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Handle */
.p-reason-item__img-box--loupe::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 30px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    border-radius: 15px;
    z-index: -1;
}

/* Design 02: UI Badges */
.p-reason-item__img-box--ui {
    padding-left: 20px;
    padding-bottom: 20px;
}

.p-reason-item__img-box--ui .p-reason-item__img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Decorative Badges */
.p-reason-badge {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 2;
}

.p-reason-badge i {
    background: var(--color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.p-reason-badge--1 {
    top: 20%;
    left: -30px;
    animation: float 3s ease-in-out infinite;
}

.p-reason-badge--2 {
    bottom: 10%;
    left: -10px;
    animation: float 4s ease-in-out infinite 0.5s;
}

.p-reason-badge--3 {
    bottom: -20px;
    right: 20px;
    background: var(--color-accent);
    color: #fff;
    animation: float 3.5s ease-in-out infinite 1s;
}

.p-reason-badge--3 i {
    background: #fff;
    color: var(--color-accent);
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 768px) {
    .p-reason-list {
        gap: 80px;
    }

    .p-reason-item,
    .p-reason-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-reason-item__content,
    .p-reason-item__img-box {
        width: 100%;
    }

    .p-reason-item__img-box--loupe {
        width: 80%;
        margin: 0 auto;
    }

    .p-reason-badge--1 {
        left: -10px;
    }
}

/* -----------------------------------------------------------------
           SERVICE LIST SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* gapは削除 */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.4;
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    /* 幅を調整 */
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Shape Modifiers */
.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .p-service-list {
        gap: 60px;
    }

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPANY TEASER SECTION (New Design)
        ----------------------------------------------------------------- */
.p-company-teaser {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.p-company-teaser__content {
    width: 50%;
    background-color: #008c9e;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.p-company-teaser__eng {
    font-family: sans-serif;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.p-company-teaser__eng span {
    display: block;
}

.p-company-teaser__eng-1 {
    display: none;
}

.p-company-teaser__eng-2 {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}

.p-company-teaser__heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.p-company-teaser__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

.c-link-arrow {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: opacity 0.3s;
}

.c-link-arrow:hover {
    opacity: 0.7;
}

@media screen and (max-width: 768px) {
    .p-company-teaser {
        flex-direction: column;
    }

    .p-company-teaser__img,
    .p-company-teaser__content {
        width: 100%;
    }

    .p-company-teaser__img {
        height: 300px;
        min-height: auto;
    }

    .p-company-teaser__content {
        padding: 40px 20px;
    }

    .p-company-teaser__eng-2 {
        font-size: 50px;
    }
}

/* -----------------------------------------------------------------
           RECRUIT TOP SECTION (New)
        ----------------------------------------------------------------- */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 350px;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top right skew image */
.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 200px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Bottom left skew image */
.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 220px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-lower__title {
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.p-recruit-lower__heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.p-recruit-lower__text {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px;
}

.c-btn--recruit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.c-btn--recruit:hover {
    background: #fff;
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .p-recruit-upper {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-upper__images {
        height: 250px;
    }

    .p-recruit-skew-img--1 {
        width: 65%;
        height: 140px;
    }

    .p-recruit-skew-img--2 {
        width: 70%;
        height: 150px;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }

    .p-recruit-lower__content {
        padding: 40px 20px;
    }
}


/* -----------------------------------------------------------------
           PAGE SPECIFIC (Block: p-)
        ----------------------------------------------------------------- */

/* VIRTUAL PAGE ROUTING 
           (For file generation output purposes)
        */
.page-section {
    display: block;
    padding-top: 0;
    animation: fadeIn 0.5s ease;
}

.page-section.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TOP: Main Visual */
.p-top-mv {
    height: calc(100vh - 80px);
    margin-top: 80px;
    background-color: #eef;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-top-mv__video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.p-top-mv__content {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.p-top-mv__copy {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .p-top-mv {
        height: 60vh;
    }

    .p-top-mv__content {
        padding: 30px;
        width: 90%;
    }

    .p-top-mv__copy {
        font-size: 24px;
    }
}

/* TOP: News List */
.p-news-list__item {
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.p-news-list__date {
    font-family: monospace;
    color: var(--color-text);
    font-size: 16px;
}

.p-news-list__cat {
    font-size: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Subsidy (Strengths) */
.p-strength-item {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-strength-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-strength-item__img {
    width: 50%;
    border-radius: 10px;
    overflow: hidden;
}

.p-strength-item__body {
    width: 50%;
}

.p-strength-item__num {
    font-size: 60px;
    font-weight: 700;
    color: var(--color-bg-gray);
    -webkit-text-stroke: 1px var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.p-strength-item__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .p-strength-item {
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 40px;
    }

    .p-strength-item__img,
    .p-strength-item__body {
        width: 100%;
    }
}

/* Service Details Styles */
.p-service-detail {
    margin-bottom: 100px;
}

.p-service-detail:last-child {
    margin-bottom: 0;
}

.p-service-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-service-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 0 0 4rem;
}

.l-service-soundproofing .p-service-col2.u-mb40 {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    position: relative;
}
/* Flow Steps with Icons */
.p-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    counter-reset: flow-counter;
    text-align: center;
    /* Center content for icon alignment */
}

.p-flow-step {
    background: #f9f9f9;
    padding: 30px 20px 20px;
    /* Increased top padding */
    border-radius: 8px;
    position: relative;
    border-top: 3px solid var(--color-primary);
    transition: transform 0.3s;
}

.p-flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-flow-step::before {
    counter-increment: flow-counter;
    content: "Step " counter(flow-counter);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.p-flow-step__icon {
    display: block;
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 15px;
    height: 40px;
    /* fixed height for alignment */
    line-height: 40px;
}

.p-flow-step h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-text);
}

.p-faq-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.p-faq-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.p-faq-item:last-child {
    border-bottom: none;
}

.p-faq-q {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    gap: 10px;
}

.p-faq-q::before {
    content: 'Q.';
}

.p-faq-a {
    padding-left: 25px;
    color: var(--color-text);
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .p-service-col2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .p-service-box {
        padding: 20px;
    }
}

/* Contact Form */
.p-form-row {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.p-form-label {
    width: 200px;
    font-weight: 700;
    padding-top: 10px;
}

.p-form-label span {
    background: #ff6b6b;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 5px;
    vertical-align: middle;
}

.p-form-input {
    flex: 1;
}

.p-form-input input,
.p-form-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}
div#privacy {
    display: flex;
}
@media screen and (max-width: 768px) {
    .p-form-row {
        flex-direction: column;
    }

    .p-form-label {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* ===== contact.html ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #00a9bc;
    --color-accent: #27b29c;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f7f8;
    --color-border: #e0e0e0;
    --font-base: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-container {
    max-width: 112rem;
    margin: 0 2rem;
    padding: 0 2rem;
    position: relative;
    margin: 0 auto;
}

.l-section {
    padding: 100px 0;
    position: relative;
    /* 背景装飾用 */
    overflow: hidden;
}

.l-section--gray {
    background-color: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 4rem 0;
    }
}

/* Header */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.l-header__logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 実際はロゴ画像を使用 */
.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-header__menu {
    display: flex;
    gap: 30px;
    font-size: 16px;
    font-weight: 500;
}

.l-header__tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.l-header__tel-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.l-header__tel-time {
    font-size: 11px;
    color: var(--color-text);
}

/* Hamburger */
.l-header__burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.l-header__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

.l-header__burger span:nth-of-type(1) {
    top: 0;
}

.l-header__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.l-header__burger span:nth-of-type(3) {
    bottom: 0;
}

.l-header__burger.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
    top: 0;
}

.l-header__burger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.l-header__burger.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(-45deg);
    bottom: 0;
}

/* SP Nav */
.l-header__sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-white);
    padding: 100px 40px;
    transition: 0.4s;
    z-index: 1000;
}

.l-header__sp-nav.is-active {
    right: 0;
    padding: 2rem 0 0;
}

.l-header__sp-menu li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .l-header {
        padding: 0 20px;
        height: 60px;
    }

    .l-header__nav {
        display: none;
    }

    .l-header__burger {
        display: block;
    }
}

/* Footer */
.l-footer {
    background-color: #f8f8f8;
    padding: 60px 0 20px;
    border-top: 5px solid var(--color-primary);
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.l-footer__info {
    width: 40%;
}

.l-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.l-footer__address {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.l-footer__links {
    width: 50%;
    display: flex;
    gap: 40px;
}

.l-footer__link-col h4 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.l-footer__link-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    .l-footer__content {
        flex-direction: column;
        gap: 40px;
    }

    .l-footer__info,
    .l-footer__links {
        width: 100%;
    }

    .l-footer__links {
        flex-direction: column;
        gap: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPONENT (Block: c-)
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    font-size: 16px;
    min-width: 240px;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 169, 188, 0.2);
}

.c-btn--primary:hover {
    background-color: #fff;
    color: var(--color-primary);
    opacity: 1;
}

.c-btn--secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.c-btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
}

/* Headings */
.c-heading01 {
    font-size: 4.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.c-heading01 span {
    display: block;
    font-size: 16px;
    color: var(--color-accent);
    margin-top: 0.1rem;
    font-weight: 500;
}

.c-heading02 {
    font-size: 3.2rem;
    font-weight: 700;
    border-left: 0;
    padding-left: 15px;
    margin-bottom: 30px;
}

.c-heading03 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
    .c-heading01 {
        font-size: 28px;
    }

    .c-heading02 {
        font-size: 20px;
    }

    .c-heading03 {
        font-size: 18px;
        margin: 2rem 0 1rem;
    }
}

/* Breadcrumbs */
.c-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.c-breadcrumbs span {
    margin: 0 5px;
}

/* Page KV (FV) */
.c-page-kv {
    height: 25rem;
    background-color: #f0f0f0;
    display: flex;
    margin: 0 auto;
    margin-top: 80px;
    /* Header height */
    background-size: cover;
    background-position: center;
    position: relative;
}

.c-page-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 169, 188, 0.1);
}

.c-page-kv__title {
    position: relative;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
}

.c-page-kv__title span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: var(--color-text);
}

/* Cards & Lists */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.c-card {
    background: #fff;
    border: 1px solid var(--color-border);
    transition: 0.3s;
}

.c-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.c-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    background-color: #eee;
    aspect-ratio: 3/2;
}

.c-card__body {
    padding: 20px;
}

.c-card__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.c-card__text {
    font-size: 16px;
    color: var(--color-text);
}

/* List Check (Strengths) */
.c-list-check {
    list-style: none;
}

.c-list-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.c-list-check li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert Box */
.p-alert-box {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
    padding: 30px;
    border-radius: 8px;
}

.p-alert-box__title {
    color: #d63031;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-alert-box__title i {
    font-size: 24px;
}

/* Recruitment Table */
.p-recruit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    max-width: 70rem;
    margin: 0 auto;
}

.p-recruit-table th,
.p-recruit-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
}

.p-recruit-table th {
    background-color: #f9f9f9;
    width: 20%;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 768px) {

    .p-recruit-table th,
    .p-recruit-table td {
        display: block;
        width: 100%;
    }

    .p-recruit-table th {
        background-color: #f0f0f0;
    }
}

/* Motto Grid */
.p-motto-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
    align-content: center;
    flex-wrap: wrap;
    align-items: stretch;
}

.p-motto-item {
    display: flex;
    gap: 2rem;
    text-align: left;
}

.p-motto-item {
    background: #fff;
    padding: 4%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s;
    display: grid;
    grid-template-columns: 20% 80%;
    text-align: left;
    align-items: center;
    width: 30%;
}

.p-motto-item:hover {
    transform: translateY(-5px);
}

.p-motto-icon {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.p-motto-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.p-motto-text {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

/* Floating Banner */
.c-floating-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.c-floating-banner:hover {
    transform: translateY(-5px);
}

.c-floating-banner__bubble {
    background-color: var(--color-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.c-floating-banner__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--color-accent);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.c-floating-banner__char {
    width: 40%;
    height: 8rem;
    background-color: transparent;
    border: 0px solid var(--color-primary);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-floating-banner__char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-floating-banner__char img {
    width: 5rem;
    height: auto;
    object-fit: cover;
}
@media screen and (max-width: 768px) {
    .c-floating-banner {
        bottom: 20px;
        right: 15px;
    }

    .c-floating-banner__char {
        width: 3rem;
        height: auto;
    }

    .c-floating-banner__bubble {
        font-size: 12px;
        padding: 8px 15px;
    }

    .p-motto-body {
        text-align: center;
    }

    .p-motto-item {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

/* Contact Page Specific */
.p-contact-tel-box {
    background: #f0fbff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.p-contact-tel-box__text {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-contact-tel-box__number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-block;
    transition: opacity 0.3s;
}

.p-contact-tel-box__number:hover {
    opacity: 0.7;
}

.p-contact-tel-box__time {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
}

/* -----------------------------------------------------------------
           REASON SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-reason-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
    max-width: 80rem;
    margin: 0 auto;
}

.p-reason-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gapは削除し、justify-contentで間隔を制御 */
    position: relative;
}

/* Zigzag Layout */
.p-reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-reason-item__content {
    width: 48%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

/* Big Number Styling */
.p-reason-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    position: absolute;
    top: -70px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    font-style: italic;
}

.p-reason-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--color-text);
}

.p-reason-item__desc {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 30px;
}

.p-reason-item__img-box {
    width: 48%;
    /* 幅を調整 */
    position: relative;
}

.p-reason-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Design 01: Loupe */
.p-reason-item__img-box--loupe {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 15px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.p-reason-item__img-box--loupe .p-reason-item__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Handle */
.p-reason-item__img-box--loupe::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 30px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    border-radius: 15px;
    z-index: -1;
}

/* Design 02: UI Badges */
.p-reason-item__img-box--ui {
    padding-left: 20px;
    padding-bottom: 20px;
}

.p-reason-item__img-box--ui .p-reason-item__img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Decorative Badges */
.p-reason-badge {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 2;
}

.p-reason-badge i {
    background: var(--color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.p-reason-badge--1 {
    top: 20%;
    left: -30px;
    animation: float 3s ease-in-out infinite;
}

.p-reason-badge--2 {
    bottom: 10%;
    left: -10px;
    animation: float 4s ease-in-out infinite 0.5s;
}

.p-reason-badge--3 {
    bottom: -20px;
    right: 20px;
    background: var(--color-accent);
    color: #fff;
    animation: float 3.5s ease-in-out infinite 1s;
}

.p-reason-badge--3 i {
    background: #fff;
    color: var(--color-accent);
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 768px) {
    .p-reason-list {
        gap: 30px;
        grid-template-columns: 1fr;
    }

    .p-reason-item,
    .p-reason-item:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }

    .p-reason-item__content,
    .p-reason-item__img-box {
        width: 100%;
    }

    .p-reason-item__img-box--loupe {
        width: 80%;
        margin: 0 auto;
    }

    .p-reason-badge--1 {
        left: -10px;
    }

    .l-container {
        max-width: 100%;
        margin: 0 1rem;
        padding: 0;
        position: relative;
    }
}

/* -----------------------------------------------------------------
           SERVICE LIST SECTION (Corrected Layout)
        ----------------------------------------------------------------- */
.p-service-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 80rem;
    margin: 0 auto;
}

.p-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* gapは削除 */
}

.p-service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-service-item__content {
    width: 45%;
    /* 幅を調整 */
    position: relative;
    z-index: 2;
}

.p-service-item__num {
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #dceeff;
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

.p-service-item:nth-child(even) .p-service-item__num {
    left: auto;
    right: -20px;
}

.p-service-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.4;
    position: relative;
}

.p-service-item__desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text);
}

.p-service-item__img-box {
    width: 45%;
    /* 幅を調整 */
    position: relative;
}

.p-service-item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Shape Modifiers */
.p-service-item__img--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #fff;
    border: 0;
}

.p-service-item__img--rect {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    border: 10px solid #fff;
    border: 0;
}

.p-service-item__img-box--rect::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

.p-service-item__img-box--rect::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .p-service-list {
        gap: 60px;
    }

    .p-service-item,
    .p-service-item:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .p-service-item__content,
    .p-service-item__img-box {
        width: 100%;
    }

    .p-service-item__num {
        font-size: 70px;
        top: -40px;
        left: 0;
    }

    .p-service-item__title {
        font-size: 24px;
    }

    .p-service-item__img--circle {
        aspect-ratio: 16/9;
        border-radius: 20px;
    }
}

/* -----------------------------------------------------------------
           COMPANY TEASER SECTION (New Design)
        ----------------------------------------------------------------- */
.p-company-teaser {
    display: flex;
    width: 100%;
    overflow: hidden;
}


.p-company-teaser__content {
    width: 50%;
    background-color: #008c9e;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.p-company-teaser__eng {
    font-family: sans-serif;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.p-company-teaser__eng span {
    display: block;
}

.p-company-teaser__eng-1 {
    display: none;
}

.p-company-teaser__eng-2 {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}

.p-company-teaser__heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.p-company-teaser__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

.c-link-arrow {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: opacity 0.3s;
}

.c-link-arrow:hover {
    opacity: 0.7;
}

.l-container_map {
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 3rem;
    aspect-ratio: 3/1;
}

.l-container_map iframe {
    border-radius: 1rem;
}

.company-info {
    background: #fff;
    padding: 40px;
    max-width: 70rem;
    margin: 0 auto;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
    border-radius: 1rem;
    border: 1px solid #008c9e;
}

.company-info__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 20px;
    align-items: baseline;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.company-info__row:first-child {
    padding-top: 0;
}

.company-info__row--last {
    border-bottom: none;
    padding-bottom: 0;
}

.company-info__term {
    font-weight: 700;
    color: var(--color-primary);
}

.company-info__desc {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .p-company-teaser {
        flex-direction: column;
    }

    .p-company-teaser__img,
    .p-company-teaser__content {
        width: 100%;
    }

    .p-company-teaser__img {
        height: 300px;
        min-height: auto;
    }

    .p-company-teaser__content {
        padding: 40px 20px;
    }

    .p-company-teaser__eng-2 {
        font-size: 50px;
    }

    .company-info {
        padding: 24px;
    }

    .company-info__row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
}

/* -----------------------------------------------------------------
           RECRUIT TOP SECTION (New)
        ----------------------------------------------------------------- */
.p-recruit-area {
    overflow: hidden;
}

.p-recruit-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.p-recruit-upper__content {
    width: 45%;
}

.p-recruit-upper__content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

.p-recruit-upper__images {
    width: 50%;
    position: relative;
    height: 30rem;
}

.p-recruit-skew-img {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.p-recruit-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top right skew image */
.p-recruit-skew-img--1 {
    top: 0;
    right: 0;
    width: 70%;
    height: 20rem;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Bottom left skew image */
.p-recruit-skew-img--2 {
    bottom: 0;
    left: 0;
    width: 75%;
    height: 20rem;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 2;
}

.p-recruit-lower {
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.p-recruit-lower__img {
    width: 50%;
}

.p-recruit-lower__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1rem 1rem 0 0;
}

.p-recruit-lower__content {
    width: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 0 2rem 2rem 0;
}

.p-recruit-lower__content::before {
    content: 'AKIRA';
    position: absolute;
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-lower__title {
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.p-recruit-lower__heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.p-recruit-lower__text {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px;
}

.c-btn--recruit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.c-btn--recruit:hover {
    background: #fff;
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .p-recruit-upper {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .p-recruit-upper__content,
    .p-recruit-upper__images {
        width: 100%;
    }

    .p-recruit-upper__images {
        height: 250px;
    }

    .p-recruit-skew-img--1 {
        width: 65%;
        height: 140px;
    }

    .p-recruit-skew-img--2 {
        width: 70%;
        height: 150px;
    }

    .p-recruit-lower {
        flex-direction: column;
    }

    .p-recruit-lower__img,
    .p-recruit-lower__content {
        width: 100%;
    }

    .p-recruit-lower__img {
        height: 250px;
    }

    .p-recruit-lower__content {
        padding: 40px 20px;
        border-radius: 0 0 1rem 1rem;
    }


    /* -----------------------------------------------------------------
           PAGE SPECIFIC (Block: p-)
        ----------------------------------------------------------------- */

    /* VIRTUAL PAGE ROUTING 
           (For file generation output purposes)
        */
    .page-section {
        display: block;
        padding-top: 0;
        animation: fadeIn 0.5s ease;
    }

    .page-section.is-active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* TOP: Main Visual */
    .p-top-mv {
        height: calc(100vh - 80px);
        margin-top: 80px;
        background-color: #eef;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .p-top-mv__video-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .p-top-mv__content {
        position: relative;
        z-index: 2;
        text-align: center;
        background: rgba(255, 255, 255, 0.8);
        padding: 60px;
        border: 1px solid rgba(255, 255, 255, 0.9);
    }

    .p-top-mv__copy {
        font-size: 42px;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 30px;
        line-height: 1.4;
    }

    @media screen and (max-width: 768px) {
        .p-top-mv {
            height: 60vh;
        }

        .p-top-mv__content {
            padding: 30px;
            width: 90%;
        }

        .p-top-mv__copy {
            font-size: 24px;
        }
    }

    /* TOP: News List */
    .p-news-list__item {
        border-bottom: 1px solid var(--color-border);
        padding: 15px 0;
        display: flex;
        gap: 20px;
        align-items: baseline;
    }

    .p-news-list__date {
        font-family: monospace;
        color: var(--color-text);
        font-size: 16px;
    }

    .p-news-list__cat {
        font-size: 12px;
        background: var(--color-primary);
        color: #fff;
        padding: 2px 8px;
        border-radius: 4px;
    }

    /* Subsidy (Strengths) */
    .p-strength-item {
        display: flex;
        gap: 40px;
        align-items: center;
        margin-bottom: 60px;
    }

    .p-strength-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    .p-strength-item__img {
        width: 50%;
        border-radius: 10px;
        overflow: hidden;
    }

    .p-strength-item__body {
        width: 50%;
    }

    .p-strength-item__num {
        font-size: 60px;
        font-weight: 700;
        color: var(--color-bg-gray);
        -webkit-text-stroke: 1px var(--color-primary);
        line-height: 1;
        margin-bottom: 10px;
    }

    .p-strength-item__title {
        font-size: 22px;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 15px;
    }

    @media screen and (max-width: 768px) {
        .p-strength-item {
            flex-direction: column !important;
            gap: 20px;
            margin-bottom: 40px;
        }

        .p-strength-item__img,
        .p-strength-item__body {
            width: 100%;
        }
    }

    /* Service Details Styles */
    .p-service-detail {
        margin-bottom: 100px;
    }

    .p-service-detail:last-child {
        margin-bottom: 0;
    }

    .p-service-box {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 40px;
        margin-bottom: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    }

    .p-service-col2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Flow Steps with Icons */
    .p-flow-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
        counter-reset: flow-counter;
        text-align: center;
        /* Center content for icon alignment */
    }

    .p-flow-step {
        background: #f9f9f9;
        padding: 30px 20px 20px;
        /* Increased top padding */
        border-radius: 8px;
        position: relative;
        border-top: 3px solid var(--color-primary);
        transition: transform 0.3s;
    }

    .p-flow-step:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .p-flow-step::before {
        counter-increment: flow-counter;
        content: "Step " counter(flow-counter);
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .p-flow-step__icon {
        display: block;
        font-size: 32px;
        color: var(--color-primary);
        margin-bottom: 15px;
        height: 40px;
        /* fixed height for alignment */
        line-height: 40px;
    }

    .p-flow-step h4 {
        font-size: 16px;
        margin-bottom: 8px;
        color: var(--color-text);
    }

    .p-faq-box {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
    }

    .p-faq-item {
        border-bottom: 1px solid #eee;
        padding: 15px 0;
    }

    .p-faq-item:last-child {
        border-bottom: none;
    }

    .p-faq-q {
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 5px;
        display: flex;
        gap: 10px;
    }

    .p-faq-q::before {
        content: 'Q.';
    }

    .p-faq-a {
        padding-left: 25px;
        color: var(--color-text);
        font-size: 16px;
    }

    @media screen and (max-width: 768px) {
        .p-service-col2 {
            grid-template-columns: 1fr!important;
            gap: 20px;
        }

        .p-service-box {
            padding: 20px;
        }
        .c-card-grid {
            grid-template-columns: 1fr!important;
        }
    }

    /* Contact Form */
    .p-form-row {
        display: flex;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .p-form-label {
        width: 200px;
        font-weight: 700;
        padding-top: 10px;
    }

    .p-form-label span {
        background: #ff6b6b;
        color: #fff;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 2px;
        margin-left: 5px;
        vertical-align: middle;
    }

    .p-form-input {
        flex: 1;
    }

    .p-form-input input,
    .p-form-input textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: inherit;
    }

    @media screen and (max-width: 768px) {
        .p-form-row {
            flex-direction: column;
        }

        .p-form-label {
            width: 100%;
            margin-bottom: 10px;
        }
    }
}
}

/* ------------------------------------------------------------
   SERVICE: テーブルが横に広がりすぎる場合の調整
   - .p-table-scroll は全体共通だが、ここでは service 内だけ中央寄せ・最大幅を制限
------------------------------------------------------------ */
@media screen and (min-width: 901px) {
    .p-service-detail .p-table-scroll {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   Works Detail Page (works-detail.html)
   ========================================================= */

/* Header small helpers */
.l-header__logo-mark {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    flex: 0 0 40px;
}

.l-header__menu a.is-current {
    color: var(--color-primary);
}

/* Section utility */
.l-section--pt0 {
    padding-top: 0;
}

/* KV background */
.c-page-kv--works-detail {
    background-image: url('../img/works/works-kv.jpg');
}

.c-page-kv--news-detail {
    background-image: url('../img/news/news-kv.jpg');
}

/* News detail */
.p-news-detail {
    max-width: 800px;
    margin: 0 auto;
}

.p-news-detail__header {
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.p-news-detail__meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.p-news-detail__date {
    font-family: monospace;
    font-size: 16px;
    color: var(--color-text);
}

.p-news-detail__cat {
    font-size: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 700;
}

.p-news-detail__cat[data-cat="お知らせ"] {
    background-color: #008c9e;
}

.p-news-detail__cat[data-cat="施工事例"] {
    background-color: var(--color-accent);
}

.p-news-detail__cat[data-cat="採用情報"] {
    background-color: #f39c12;
}

.p-news-detail__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
}

.p-news-detail__body {
    margin-bottom: 60px;
}

.p-news-detail__body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-left: 15px;
    border-left: 5px solid var(--color-primary);
    color: var(--color-text);
}

.p-news-detail__body h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 15px;
    color: var(--color-primary);
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.p-news-detail__body p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.p-news-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-news-detail__body ul,
.p-news-detail__body ol {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 20px 20px 20px 40px;
    border-radius: 8px;
}

.p-news-detail__body ul li {
    list-style: disc;
    margin-bottom: 10px;
}

.p-news-detail__body ul li:last-child {
    margin-bottom: 0;
}

.p-news-detail__body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.p-news-detail__body a:hover {
    text-decoration: none;
}

.p-news-detail__figure {
    text-align: center;
    margin-top: 40px;
}

.p-news-detail__figure img {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .p-news-detail__title {
        font-size: 22px;
    }

    .p-news-detail__body h2 {
        font-size: 20px;
    }

    .p-news-detail__body h3 {
        font-size: 18px;
    }
}

/* CTA button variations */
.c-btn--header {
    min-width: auto;
    padding: 10px 20px;
    font-size: 16px;
}

.c-btn--cta-tel {
    background: #fff;
    color: var(--color-primary);
    min-width: 300px;
}

.c-btn--cta-mail {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    min-width: 300px;
}

.p-cta-buttons .c-btn i {
    margin-right: 10px;
}

/* Map */
.p-map {
    height: 400px;
    background: #eee;
}

/* Detail Header */
.p-work-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.p-work-header__cat {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Category Colors */
.p-work-header__cat[data-cat="soundproofing"] {
    background-color: var(--color-accent);
}

.p-work-header__cat[data-cat="asbestos"] {
    background-color: #f39c12;
}

.p-work-header__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--color-text);
}

.p-work-header__meta {
    display: flex;
    gap: 20px;
    color: var(--color-text);
    font-size: 16px;
}

.p-work-header__meta-item i {
    color: var(--color-primary);
    margin-right: 5px;
}

/* Gallery Area */
.p-work-gallery {
    margin-bottom: 60px;
}

.p-work-gallery__main {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-work-gallery__main img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.p-work-gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.p-work-gallery__thumb {
    width: 120px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    background: transparent;
}

.p-work-gallery__thumb:hover,
.p-work-gallery__thumb.is-active {
    opacity: 1;
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.p-work-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content Area */
.p-work-body {
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
}

.p-work-body__main {
    flex: 1;
}

.p-work-body__side {
    width: 300px;
    flex-shrink: 0;
}

.p-work-section {
    margin-bottom: 50px;
}

.p-work-section__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}

.p-work-section__text {
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 20px;
}

/* Before/After */
.p-work-ba {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.p-work-ba__item {
    flex: 1;
    position: relative;
}

.p-work-ba__label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
}

.p-work-ba__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* Spec Table (Sidebar) */
.p-work-spec {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.p-work-spec__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.p-work-spec__list {
    font-size: 16px;
}

.p-work-spec__row {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 15px;
}

.p-work-spec__row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.p-work-spec__th {
    width: 90px;
    font-weight: 700;
    color: var(--color-text);
    flex-shrink: 0;
}

.p-work-spec__td {
    flex: 1;
    color: var(--color-text);
}

/* Voice / Comment */
.p-work-voice {
    background-color: #f0fbff;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.p-work-voice__img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.p-work-voice__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-work-voice__content {
    flex: 1;
}

.p-work-voice__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.p-work-voice__text {
    font-size: 16px;
    line-height: 1.8;
}

/* Page Navigation */
.p-post-nav {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}

.p-post-nav__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    max-width: 30%;
}

.p-post-nav__btn:hover {
    color: var(--color-primary);
}

.p-post-nav__btn--next {
    text-align: right;
    justify-content: flex-end;
}

.p-post-nav__list-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: var(--color-text);
}

.p-post-nav__list-btn i {
    font-size: 18px;
    margin-bottom: 5px;
}

.p-post-nav__list-btn:hover {
    color: var(--color-primary);
}

/* Responsive */
@media screen and (max-width: 900px) {
    .p-work-body {
        flex-direction: column-reverse;
    }

    .p-work-body__side {
        width: 100%;
    }

    .p-work-header__title {
        font-size: 24px;
    }
}

@media screen and (max-width: 600px) {
    .p-work-gallery__thumb {
        width: 80px;
        height: 60px;
    }

    .p-work-ba {
        flex-direction: column;
    }

    .p-work-voice {
        flex-direction: column;
        gap: 15px;
    }

    .p-post-nav__btn span {
        display: none;
    }

    .p-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .c-btn--cta-tel,
    .c-btn--cta-mail {
        min-width: 100%;
    }
}


/* -----------------------------------------------------------------
   POLICY SECTION STYLES
   既存の style.css の .p-policy 関連の記述を以下に置き換えるか、追記してください。
----------------------------------------------------------------- */

/* コンテナ設定（Flexboxで横並び・中央配置） */
.p-policy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    margin: 0 auto;
    position: relative;
    max-width: 70rem;
}

/* 背景装飾：巨大な「POLICY」の文字 */
.p-policy::before {
    content: 'POLICY';
    position: absolute;
    top: -50px;
    left: 0;
    font-size: 140px;
    font-weight: 900;
    color: var(--color-primary);
    /* #00a9bc */
    opacity: 0.04;
    z-index: 4;
    pointer-events: none;
    font-family: sans-serif;
    line-height: 1;
}

/* --- テキストエリア（左側） --- */
.p-policy__text {
    flex: 1;
    background-color: #fff;
    padding: 50px;
    /* 特徴的な角丸（右上と左下のみ丸くする） */
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    /* 左側にアクセントライン */
    border-left: 10px solid var(--color-primary);
    margin-left: -2rem;
    margin-right: -2rem;
}

/* 見出しの調整（左寄せ・サイズ変更） */
.p-policy__text h2.c-heading01 {
    text-align: left;
    margin-bottom: 30px;
    font-size: 32px;
}

/* 見出しの下線位置調整 */
.p-policy__text h2.c-heading01::after {
    left: 0;
    transform: none;
    width: 60px;
}

/* リード文のデザイン */
.policy--lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 2.2;
    color: var(--color-text);
    /* #333333 */
    margin-bottom: 0;
}

.p-policy__img_group {
    position: relative;
}

.p-policy__illust {
    flex: 1;
    position: absolute;
    z-index: 2;
    max-width: 45%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    bottom: 0;
    left: 0;
}

.-motto .p-policy__illust {
    left: auto;
    right: 0;
}

.p-policy__illust img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    /* ずらした背景影（ドロップシャドウではないフラットな影） */
    /* box-shadow: 20px 20px 0 var(--color-bg-gray); */
    /* #f5f7f8 */
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 10rem;
    margin: 0 auto;
    display: flex;
}

/* ホバー時のアニメーション効果 */
.p-policy__illust:hover img {
    /* transform: translate(-5px, -5px); */
    /* ホバー時に影の色をアクセントカラーに変更 */
    /* box-shadow: 25px 25px 0 var(--color-accent); */
    /* #27b29c */
}

/* -----------------------------------------------------------------
   RESPONSIVE (スマートフォン・タブレット向け)
   style.css のメディアクエリ内（@media screen and (max-width: 768px) 等）に追加してください
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .p-policy {
        /* イラストを上に、テキストを下に配置 */
        flex-direction: column-reverse;
        gap: 30px;
        margin: 40px 0;
        display: flex;
    }

    .p-policy::before {
        font-size: 23vw;
        top: -11%;
        opacity: 0.1;
    }

    .p-policy__illust {
        width: 100%;
        height: auto;
        left: auto;
        top: 0;
        \: 1;
        right: 0;
        bottom: auto;
        max-width: 10rem;
        position: absolute;
    }

    .p-policy__img_group .p-policy__illust {
        bottom: -50%;
        top: auto;
        max-width: 8rem;
    }

    .-motto .p-policy__illust {
        top: 3rem;
        max-width: 8rem;
        right: 0%;
        overflow: hidden;
    }

    .p-policy__illust img {
        /* スマホでは影を少し小さく */
        box-shadow: 10px 10px 0 var(--color-bg-gray);
    }

    .p-policy__text {
        width: 100%;
        padding: 30px;
        /* スマホでは角丸を全体に適用 */
        border-radius: 20px;
    }

    .p-policy__text h2.c-heading01 {
        font-size: 24px;
    }

    .policy--lead {
        font-size: 16px;
    }

    .p-motto-grid {
        grid-template-columns: 1fr 1fr;
    }

    .p-policy__illust img {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        transition: transform 0.3s, box-shadow 0.3s;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
    }
}

@media screen and (max-width: 440px) {
    .-motto .p-policy__illust {
        top: 3rem;
        max-width: 5rem;
        right: 0;
        overflow: hidden;
    }

}

/* =========================
2カラム Flow（subsidy用）
========================= */
.p-flow-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.p-flow-group__col .c-heading03 {
    margin: 0 0 1rem;
    text-align: center;
}

/* 既存中央寄せ解除 */
.p-flow-group .p-flow-vertical {
    max-width: none;
    margin: 0;
    padding: 10px 0;
}

/* 注意書きは横断 */
.p-flow-group__note {
    grid-column: 1 / -1;
    font-size: 16px;
    margin-top: 10px;
    color: var(--color-text);
    text-align: right;
}

/* SP */
@media screen and (max-width:900px) {
    .p-flow-group {
        grid-template-columns: 1fr;
    }
}

/* =========================
Flow 共通デザイン
========================= */
.p-flow-group .p-flow-vertical::before {
    left: 34px;
    transform: none;
    width: 6px;
    border-radius: 999px;
}

.p-flow-group .p-flow-card {
    background: #ffffff;
    color: var(--color-text);
    border: 1px solid;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.p-flow-group .p-flow-card__title {
    color: var(--color-text);
}

.p-flow-group .p-flow-card__desc {
    color: var(--color-text);
}

.p-flow-card__num {
    font-weight: 700;
}

/* =========================
BLUE FLOW（既存 primary）
========================= */
.p-flow-group__col--blue .p-flow-vertical::before {
    background: #00A9BC;
}

.p-flow-group__col--blue .p-flow-card {
    border-color: #00A9BC;
}

.p-flow-group__col--blue .p-flow-card__num,
.p-flow-group__col--blue .p-flow-card__icon {
    color: #00A9BC;
}

/* 完了ステップ（薄青・不透明） */
.p-flow-group__col--blue .p-flow-card--complete {
    background: #E6F7F9;
    border-color: #00A9BC;
}

/* =========================
ORANGE FLOW（既存 accent）
========================= */
.p-flow-group__col--orange .p-flow-vertical::before {
    background: #ED6400;
}

.p-flow-group__col--orange .p-flow-card {
    border-color: #ED6400;
}

.p-flow-group__col--orange .p-flow-card__num,
.p-flow-group__col--orange .p-flow-card__icon {
    color: #ED6400;
}

/* 完了ステップ（薄オレンジ・不透明） */
.p-flow-group__col--orange .p-flow-card--complete {
    background: #FFF1E8;
    border-color: #ED6400;
}

/* BLUE */
.p-flow-group__col--blue .p-flow-card__num i {
    color: #ffffff;
    border: 2px solid #00A9BC;
}

/* ORANGE */
.p-flow-group__col--orange .p-flow-card__num i {
    color: #fff;
    border: 2px solid #ED6400;
}

/* コンテナ設定 */
.p-subsidy-hero {
    margin-bottom: 60px;
    padding: 0 20px;
}

.p-subsidy-hero__inner {
    /* 目立たせるための背景色（薄いオレンジ） */
    background-color: #fffaf0;
    border: 4px solid #ED6400;
    border-radius: 20px;
    padding: 50px 30px;

    /* 幅を狭く設定 & 中央配置 */
    max-width: 1100px;
    margin: 0 auto;

    /* フレックスボックスで縦並び・中央揃え */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 15px 30px rgba(237, 100, 0, 0.2);
    /* 影を強化 */

    /* 背景装飾（ストライプ） */
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5) 10px,
            transparent 10px,
            transparent 20px);
}

/* 左上の「注目」バッジ */
.p-subsidy-hero__badge {
    position: absolute;
    top: -4px;
    /* ボーダー幅分ずらす */
    left: -4px;
    background: #ED6400;
    color: #fff;
    font-weight: 700;
    padding: 8px 30px;
    border-radius: 16px 0 20px 0;
    /* 左上と右下の角を丸く */
    font-size: 16px;
    letter-spacing: 0.1em;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* アイコンボックス */
.p-subsidy-hero__icon-box {
    width: 100px;
    height: 100px;
    background: #fff;
    /* アイコン背景を白にして際立たせる */
    color: #ED6400;
    border: 3px solid #ED6400;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    margin-bottom: 25px;
    /* 下に余白 */
    flex-shrink: 0;
    animation: bounce 2s infinite;
    box-shadow: 0 5px 15px rgba(237, 100, 0, 0.1);
}

/* アニメーション */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.p-subsidy-hero__content {
    width: 100%;
}

/* サブタイトル装飾 */
.p-subsidy-hero__sub {
    color: #ED6400;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 中央揃え */
    gap: 15px;
}

/* 左右の装飾ライン */
.p-subsidy-hero__sub::before,
.p-subsidy-hero__sub::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #ED6400;
}

.p-subsidy-hero__title {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.4;
    color: #333;
    margin-bottom: 20px;
}

/* 「全額補助金」の強調マーカー */
.p-subsidy-hero__highlight {
    color: #ED6400;
    background: linear-gradient(transparent 65%, #ffdcb3 65%);
    padding: 0 5px;
    font-size: 1.1em;
    /* 少し大きく */
}

.p-subsidy-hero__text {
    font-size: 16px;
    font-weight: 700;
    color: #555;
    line-height: 1.8;
}

/* --- レスポンシブ対応 (スマホ) --- */
@media screen and (max-width: 768px) {
    .p-subsidy-hero__inner {
        padding: 40px 20px;
    }

    .p-subsidy-hero__icon-box {
        width: 80px;
        height: 80px;
        font-size: 40px;
        margin-bottom: 20px;
    }

    .p-subsidy-hero__sub {
        font-size: 16px;
        gap: 10px;
    }

    .p-subsidy-hero__sub::before,
    .p-subsidy-hero__sub::after {
        width: 20px;
    }

    .p-subsidy-hero__title {
        font-size: 28px;
    }

    .p-subsidy-hero__text {
        font-size: 16px;
    }
}

/* =========================
関連工事カード（画像対応）
========================= */

.p-related-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.p-related-card {
    background: #ffffff;
    border: 1px solid #e0f2f4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    transition: transform .3s, box-shadow .3s;
}

.p-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

/* 画像 */
.p-related-card__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 3/2;
}

/* 中身 */
.p-related-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #00A9BC;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: -28px 0 12px 20px;
    /* 画像に少し重ねる */
    position: relative;
    z-index: 1;
}

.p-related-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 20px 10px;
    color: #333333;
}

.p-related-card__text {
    font-size: 16px;
    line-height: 1.8;
    color: #666666;
    margin: 0 20px 24px;
}

/* responsive */
@media screen and (max-width:900px) {
    .p-related-service-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================
Flow 共通（全ページ・安全ベース）
================================================= */

.p-flow-card {
    background: #ffffff;
    color: #333333;
}

.p-flow-card__title {
    color: #333333;
}

.p-flow-card__desc {
    color: #666666;
}

/* 番号アイコン（矢印）共通 */
.p-flow-card__num i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    margin-right: 6px;
    color: #ffffff;
}


/* =================================================
subsidy：2カラム Flow レイアウト
================================================= */

.p-flow-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.p-subsidy-flow.u-mb60 {
    margin: 4rem 0 0;
}

@media screen and (max-width: 900px) {
    .p-flow-group {
        grid-template-columns: 1fr;
    }
}

/* 2カラム内では中央寄せを解除 */
.p-flow-group .p-flow-vertical {
    max-width: none;
    margin: 0;
    padding: 10px 0;
}

/* 縦ライン位置調整 */
.p-flow-group .p-flow-vertical::before {
    left: 34px;
    width: 6px;
    border-radius: 999px;
    transform: none;
}


/* =================================================
subsidy：BLUE（工事希望者）
================================================= */

.p-flow-group__col--blue .p-flow-vertical::before {
    background: #a8dde2;
}

.p-flow-group__col--blue .p-flow-card {
    border: 1px solid #7fcbd3;
}

.p-flow-group__col--blue .p-flow-card__num,
.p-flow-group__col--blue .p-flow-card__icon {
    color: #00a9bc;
}

.p-flow-group__col--blue .p-flow-card__num i {
    background: #00a9bc;
}

.p-flow-group__col--blue .p-flow-card--complete {
    background: #e6f7f9;
    border-color: #00a9bc;
}


/* =================================================
subsidy：ORANGE（防衛局・設計事務所・施工業者）
================================================= */

.p-flow-group__col--orange .p-flow-vertical::before {
    background: #f5c2a0;
}

.p-flow-group__col--orange .p-flow-card {
    border: 1px solid #f0b18a;
}

.p-flow-group__col--orange .p-flow-card__num,
.p-flow-group__col--orange .p-flow-card__icon {
    color: #ed6400;
}

.p-flow-group__col--orange .p-flow-card__num i {
    background: #ed6400;
}

.p-flow-group__col--orange .p-flow-card--complete {
    background: #fff1e6;
    border-color: #ed6400;
}


/* =================================================
service：住宅防音工事フロー
（通常は青・完了のみオレンジ）
================================================= */

/* service ページ限定 */
#page-service .p-flow-vertical::before {
    background: #00a9bc;
}

#page-service .p-flow-vertical .p-flow-card {
    border: 1px solid #00a9bc;
}

#page-service .p-flow-card__num,
#page-service .p-flow-card__icon {
    color: #00a9bc;
}

#page-service .p-flow-card__num i {
    background: #00a9bc;
}

/* 完了ステップだけオレンジ */
#page-service .p-flow-card--complete {
    background: #fff1e6;
    border-color: #ed6400 !important;
}

#page-service .p-flow-card--complete .p-flow-card__num,
#page-service .p-flow-card--complete .p-flow-card__icon {
    color: #ed6400;
}

#page-service .p-flow-card--complete .p-flow-card__num i {
    background: #ed6400;
}

section.l-section.-h-intro {
    padding: 50px 0 0;
}

.p-news-controls__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

i.fa-solid.fa-chevron-down {
    display: none;
}

label.p-news-controls__label {
    font-size: 80%;
    padding: 0 20px 0px 0;
}

/* =========================
  Contact: Privacy Policy
========================= */
.p-form-row--policy .p-form-label {
    align-self: flex-start;
    padding-top: 10px;
}

.p-privacy-card {
    border: 1px solid rgba(0, 169, 188, 0.18);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.p-privacy-card__head {
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(0, 169, 188, 0.10), rgba(39, 178, 156, 0.08));
    border-bottom: 1px solid rgba(0, 169, 188, 0.14);
}

.p-privacy-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text, #333);
}

.p-privacy-card__sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--color-text-light, #666);
}

.p-privacy-card__body {
    padding: 18px 20px;
}

.p-privacy-scroll {
    max-height: 220px;
    overflow: auto;
    padding: 14px 14px;
    border-radius: 10px;
    background: #f7fbfc;
    border: 1px solid rgba(0, 169, 188, 0.12);
    color: var(--color-text, #333);
    font-size: 16px;
    line-height: 1.9;
}

.p-privacy-scroll h4 {
    margin: 16px 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text, #333);
}

.p-privacy-scroll ul {
    margin: 6px 0 10px 1.2em;
    padding: 0;
}

.p-privacy-scroll li {
    margin: 4px 0;
}

.p-privacy-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text, #333);
}

.p-privacy-agree input {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #00A9BC);
}

.p-privacy-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-text-light, #666);
}

@media screen and (max-width: 600px) {
    .p-form-row--policy .p-form-label {
        padding-top: 0;
    }

    .p-privacy-card__head,
    .p-privacy-card__body {
        padding: 16px;
    }

    .p-privacy-scroll {
        max-height: 260px;
    }
}


.c-page-kv {
    --kv-dur: 1100ms;
    --kv-ease: cubic-bezier(.2, .9, .2, 1);
    justify-content: flex-start;
    padding-left: clamp(20px, 4vw, 56px);
    height: 300px;
    position: relative;
    overflow: hidden;
}

/* 背景画像を擬似要素に移す（Ken Burns用） */
.c-page-kv::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--kv-bg);
    background-size: cover;
    background-position: center;
    transform: scale(1.08) translateY(0);
    will-change: transform;
    z-index: 0;
}

/* overlay */
.c-page-kv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, .30) 55%, rgba(0, 0, 0, .12) 100%);
    opacity: 0;
    z-index: 1;
}

/* title */
.c-page-kv .c-page-kv__title {
    position: relative;
    z-index: 2;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    padding: 18px 28px;
    text-align: left;
    transform-origin: left center;
    opacity: 0;
    transform: translateY(18px) scale(.98);
    margin: 0 auto;
}

.c-page-kv .c-page-kv__title span {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .86);
    opacity: 0;
    transform: translateY(10px);
    text-align: center;
}

.c-page-kv .c-page-kv__title::after {
    content: "";
    display: flex;
    width: 60px;
    height: 3px;
    margin: 0 auto;
    margin-top: 14px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
}

/* animate */
.c-page-kv.is-animate::before {
    animation: kvOverlay var(--kv-dur) var(--kv-ease) both;
}

.c-page-kv.is-animate::after {
    animation: kvKenBurns 6.5s cubic-bezier(.2, .8, .2, 1) both;
}

.c-page-kv.is-animate .c-page-kv__title {
    animation: kvTitlePop var(--kv-dur) var(--kv-ease) both 120ms;
}

.c-page-kv.is-animate .c-page-kv__title span {
    animation: kvSub 750ms var(--kv-ease) both 320ms;
}

.c-page-kv.is-animate .c-page-kv__title::after {
    animation: kvLine 700ms cubic-bezier(.2, .9, .2, 1) both 520ms;
}

@keyframes kvOverlay {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes kvKenBurns {
    from {
        transform: scale(1.08) translateY(0)
    }

    to {
        transform: scale(1.0) translateY(-6px)
    }
}

@keyframes kvTitlePop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.98)
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.01)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes kvSub {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes kvLine {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

/* SP */
@media(max-width:600px) {
    .c-page-kv {
        height: 240px
    }

    .c-page-kv .c-page-kv__title {
        padding: 14px 18px;
        font-size: 2.4rem;
    }
}

/* motion off */
@media (prefers-reduced-motion: reduce) {

    .c-page-kv::before,
    .c-page-kv::after,
    .c-page-kv .c-page-kv__title,
    .c-page-kv .c-page-kv__title span,
    .c-page-kv .c-page-kv__title::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.c-page-kv::after {
    background-image: var(--kv-bg);
}

/* 
  .p-motto-item {
    display: grid;
    gap: 0rem;
    grid-template-columns: 1fr;
    text-align: left;
    width: 100%;
    align-items: center;
}
.p-motto-item {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media screen and (max-width: 767px) 

.p-motto-item {
    display: grid;
    gap: 0rem;
    grid-template-columns: 1fr;
    align-items: center;
}
} */

@media (max-width: 768px) {

    /* table構造を縦積みにする */
    .c-table.-sp-1col,
    .c-table.-sp-1col tbody,
    .c-table.-sp-1col tr {
      display: block;
      width: 100%;
    }
  
    .c-table.-sp-1col tr {
      margin-bottom: 0;
      padding-bottom: 0;
      /* border-bottom: 1px solid #e5e5e5; */
    }
  
    /* th / td 共通：横伸び完全防止 */
    .c-table.-sp-1col th,
    .c-table.-sp-1col td {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 0;
  
      /* ★ここが重要 */
      white-space: normal !important;
      word-break: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      padding: 3vw;
      border-bottom: 0;
    }
  
    /* 念のため table自体も固定 */
    .c-table.-sp-1col {
      table-layout: fixed;
    }

    .c-table.-sp-1col {
      min-width: 0 !important; 
      width: 100%;
    }
  
    .c-table.-sp-1col tbody th {
      min-width: 0 !important; 
    }
  
    .p-table-scroll .c-table.-sp-1col {
      max-width: 100%;
    }
  }
  
  @media (max-width: 768px) {

  /* ▼追加：-sp-1col のときは横スクロール要因を潰す */
  .c-table.-sp-1col {
    min-width: 0 !important; /* ← .c-table の min-width:700px を無効化 */
    width: 100%;
  }

  .c-table.-sp-1col tbody th {
    min-width: 0 !important; /* ← tbody th の min-width:200px も無効化 */
    padding: 3vw;
  }

  /* ▼念のため：親のスクロール枠も横に溢れないように */
  .p-table-scroll .c-table.-sp-1col {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
.p-faq {
    padding: 10vw 2vw;
    border-radius: 13px;
}
.p-faq .c-heading03 {
    padding: 0 1rem;
    margin: 0 0 1rem;
}
.p-accordion-header {
    padding: 4px 0;
}
.p-accordion-list {
    margin-bottom: 20px;
    border-top: 0px;
}
  }

  @media (max-width: 768px) {

    .p-page-nav {

    }
    .p-page-nav__link {max-width: 100%;font-size: 1.4rem;padding: 10px;}

    .p-icon-grid-small {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .p-icon-item-small span {
        font-size: 100%;
        font-weight: 700;
    }
    .p-icon-item-small i {
        font-size: 2rem;
        color: var(--color-primary);
        padding-right: 1rem;
    }
    .p-icon-item-small {
        display: flex;
        justify-content: flex-start;
    }
  }
  
  .p-flow-group__col .c-heading03 span {
    display: block;
    background: #e8e8e8;
    padding: 2%;
    border-radius: 10px;
}
  
  .p-flow-group__col.p-flow-group__col--blue .c-heading03 span {
    background: #00aabc;
    color: #fff;
}
  .p-flow-group__col.p-flow-group__col--orange .c-heading03 span {
    background: #ee6501;
    color: #fff;
}

.p-service-col2.p-subsidy-intro {
    grid-template-columns: 1.5fr 2fr;
}

:root{
    --color-primary:#00a9bc;
    --color-primary-2:#27b29c;
    --border:rgba(2, 6, 23, .14);
  }
  
  /* ====== News Controls ====== */
  .p-news-controls{
    margin-top:18px;
  }
  
  .p-news-controls__inner{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:12px;
    padding:14px 14px;
    /* background:linear-gradient(135deg, rgba(0,169,188,.08), rgba(39,178,156,.07)); */
    /* border:1px solid rgba(0,169,188,.18); */
    /* border-radius:14px; */
    /* box-shadow:0 10px 30px rgba(0,169,188,.12); */
    margin: 0 0 3rem;
  }
  
  .p-news-controls__label{
    font-size:13px;
    font-weight:600;
    color:rgba(2, 6, 23, .74);
    letter-spacing:.02em;
    white-space:nowrap;
  }
  
  .p-news-controls__select{
    position:relative;
    min-width:240px;
    max-width:360px;
    width:clamp(220px, 30vw, 360px);
  }
  
  /* native select styling */
  .p-news-controls__select select{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    padding:12px 44px 12px 18px; /* 左のアクセント分ちょい余白 */
    border-radius:12px;
    border:1px solid var(--border);
    background:linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    color:#1b1f23;
    font-weight:600;
    font-size:14px;
    line-height:1;
    outline:none;
    box-shadow:0 6px 16px rgba(2,6,23,.06);
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  
  .p-news-controls__select select:hover{
    border-color:rgba(0,169,188,.45);
    box-shadow:0 10px 22px rgba(0,169,188,.10);
  }
  
  .p-news-controls__select select:focus-visible{
    border-color:rgba(0,169,188,.70);
    box-shadow:0 0 0 4px rgba(0,169,188,.18), 0 12px 26px rgba(0,169,188,.14);
  }
  
  /* chevron */
  .p-news-controls__select .fa-chevron-down{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    color:rgba(2, 6, 23, .55);
    font-size:12px;
  }
  
  /* left accent bar */
  .p-news-controls__select::before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:16px;
    border-radius:99px;
    background:linear-gradient(180deg, var(--color-primary), var(--color-primary-2));
    opacity:.75;
  }
  
  /* ====== Responsive ====== */
  @media (max-width: 640px){
    .p-news-controls__inner{
      justify-content:space-between;
      padding:12px;
    }
    .p-news-controls__select{
      min-width:0;
      width:65%;
    }
  }
  

  .l-section.p-subsidy .banner {
    margin: 0 0 4rem;
}

@media screen and (max-width: 900px) {
    .l-header-sp{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      padding:12px 16px;
      background:#fff;
      z-index:1002;
      box-shadow:0 10px 30px rgba(2,6,23,.08);
    }
    .l-header-sp__logo{
      display:flex;
      align-items:center;
      gap:10px;
      max-width:calc(100% - 56px);
      font-size:16px;
      line-height:1.2;
      color:var(--color-primary);
      text-decoration:none;
    }
    .l-header-sp__logo img{
      display:block;
      height:28px;
      width:auto;
      max-width:100%;
      filter: brightness(0) saturate(100%) invert(54%) sepia(55%) saturate(6395%) hue-rotate(158deg) brightness(102%) contrast(101%);
    }
  }
  
  /* ===== SP Nav Brush Up ===== */
.l-header__sp-nav{
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
  padding: 0; /* 既存の 100px 40px をやめる */
  overflow: hidden;
}

.l-header__sp-nav__inner{
  height: 100vh;
  padding: 16px 16px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* top bar */
.l-header__sp-nav__top{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,169,188,.18);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,169,188,.10);
}

.l-header__sp-nav__logo{
  display: flex;
  align-items: center;
  max-width: calc(100% - 56px);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.2;
}

/* close button */
.l-header__sp-nav__close{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  position: relative;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}

.l-header__sp-nav__close span{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: rgba(2, 6, 23, .75);
  border-radius: 999px;
}

.l-header__sp-nav__close span:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}
.l-header__sp-nav__close span:nth-child(2){
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* menu list -> card-like */
.l-header__sp-menu{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.l-header__sp-menu li{
  margin: 0;                 /* 既存の余白は消す */
  padding: 0;
  border: none;              /* 既存の下線は消す */
}

.l-header__sp-menu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  text-decoration: none;
  color: var(--color-text, #1b1f23);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}

.l-header__sp-menu a::after{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(2,6,23,.45);
  border-bottom: 2px solid rgba(2,6,23,.45);
  transform: rotate(-45deg);
  margin-left: auto;
}

/* CTA */
.l-header__sp-nav__cta{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,169,188,.18);
  background: linear-gradient(135deg, rgba(0,169,188,.08), rgba(39,178,156,.06));
  box-shadow: 0 10px 30px rgba(0,169,188,.10);
}

.l-header__sp-nav__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(0,169,188,.22);
}

.l-header__sp-nav__tel{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  text-decoration: none;
  color: rgba(2, 6, 23, .85);
  font-weight: 800;
}

.l-header__sp-nav__note{
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: rgba(2, 6, 23, .60);
}
/* ===== News Controls 微調整 ===== */

/* コンパクト化 */
.p-news-controls__select select{
  padding:10px 40px 10px 16px;
  font-size:13.5px;
  box-shadow:0 4px 10px rgba(2,6,23,.05);
}

/* SP */
@media (max-width: 900px){
  .p-news-controls{
    margin-top:72px; /* fixed header 回避 */
    position:relative;
    z-index:1;
  }
}

@media (max-width: 640px){
  .p-news-controls__select select{
    padding:9px 38px 9px 14px;
    font-size:13px;
  }
}

.l-service-soundproofing .p-service-col2.u-mb40:before {
    content: "※一部対象外区域あり";
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    z-index: 10;
    font-size: 1rem;
    color: #fff;
    background: #ff6b6b;
    width: auto;
    height: auto;
    padding: 0.5rem;
}
.p-subsidy-img:before {
    content: "※一部対象外区域あり";
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 10;
    font-size: 1rem;
    color: #fff;
    background: #ff6b6b;
    width: auto;
    height: auto;
    padding: 0.5rem;
}

.p-thanks {
    text-align: center;
}
.l-section {
    padding: 3rem 0 8rem;
}
.p-thanks__btn {
    margin-top: 2rem;
}
.p-thanks__text {
    margin-top: 2rem;
}
.p-thanks__illust {
    width: 10rem;
    margin: 0 auto;
}

.c-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
  
  /* 共通：カード自体を中央基準に */
  .c-card-grid > * {
    justify-self: center;
  }
  
  /* 1枚のとき */
  .c-card-grid:has(> :nth-child(1):last-child) {
    justify-content: center;
  }
  
  /* 2枚のとき */
  .c-card-grid:has(> :nth-child(2):last-child) {
    justify-content: center;
  }
  
  /* 3枚のとき */
  .c-card-grid:has(> :nth-child(3):last-child) {
    justify-content: center;
  }
  

  @media screen and (max-width: 767px) {
    .p-top-mv-new {
        height: 60vh;
        margin-top: 0px;
    }
    .p-top-mv-new__content {
        width: 100%;
        padding: 30px 20px;
        border-radius: 0 20px 0 0;
        position: absolute;
        top: auto;
        bottom: 0;
    }
    a.c-btn.c-btn--primary.js-route {
        padding: 0.5rem;
    }
    a.c-btn.c-btn--primary.js-route {
        padding: 0.5rem;
        display: none;
    }
    .u-mb20 {
        margin-bottom: 0;
    }
    .p-top-mv-new__slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .p-top-mv-new__slide {
        aspect-ratio: 1;
        object-fit: cover;
    }
    .p-reason-card {
        border-radius: 1rem;
    }
    .p-subsidy-banner {
        padding: 0;
    }
    .c-card-grid.u-mb40 {
        grid-template-columns: 1fr;
    }
    .p-motto-icon {
        margin-top: 2rem;
    }
    .l-container_map {
        aspect-ratio: 3/2;
    }
  }

  
  .c-card-grid.p-strength-cards {
    grid-template-columns: repeat(3, 1fr);
}