/* ===== index.html inline styles ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #3F9877;
    /* 指定アクセントカラー */
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-bg-gray: #F9F9F9;
    /* 親しみやすい・カラフルなサブカラー（トリス/レトロポップ風） */
    --color-sub-yellow: #F2EBBF;
    --color-sub-blue: #D3E0EA;
    --color-sub-coral: #F8B195;
    --font-main: 'Rubik', 'Noto Sans JP', sans-serif;
}

html {
    scroll-padding-top: 90px;
    /* ヘッダー固定分のスクロール位置調整 */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/*---スマホ時改行--*/
@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;}
}


/* -----------------------------------------------------------------
           ANIMATION UTILITY
        ----------------------------------------------------------------- */
/* Scroll Fade In Animation */
.js-fade-in {
    opacity: 1;
    transform: none;
}

html.has-js .js-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease-out, transform .8s ease-out;
    will-change: opacity, transform;
}

html.has-js .js-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html.has-js .js-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Stagger delays for list items if needed */
.js-fade-in-delay-1 {
    transition-delay: 0.1s;
}

.js-fade-in-delay-2 {
    transition-delay: 0.2s;
}

.js-fade-in-delay-3 {
    transition-delay: 0.3s;
}

/* Floating Animation */
@keyframes floating {
    0% {
        transform: translateY(0);
    }

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

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

/* Infinite Horizontal Scroll Animation (Maker logos) */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Infinite Vertical Scroll Animations (Solution BG) */
/* 左（p-solution-side--left）は上に動く：要素を移動させる */
@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }

    /* 要素全体の半分（1セット分）動かす */
}

/* 右（p-solution-side--right）は下に動く：要素を移動させる */
@keyframes scroll-down {
    0% {
        transform: translateY(-50%);
    }

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

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-center {
    text-align: center;
}

.u-mb10 {
    margin-bottom: 10px;
}

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

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

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

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

.u-mt20 {
    margin-top: 20px;
}

.u-mt40 {
    margin-top: 40px;
}

.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block;
    }

    .u-pc-only {
        display: none;
    }
}

/* Utility for Header Menu (1100px breakpoint for layout) */
.u-hidden-pc-nav {
    display: none;
}

@media (max-width: 1100px) {
    .u-hidden-pc-nav {
        display: block;
    }

    .u-visible-pc-nav {
        display: none;
    }
}

/* -----------------------------------------------------------------
           COMPONENT
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    cursor: pointer;
}

.c-btn--line {
    background-color: #06C755;
}

.c-btn--outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Headings (Stylishly Simple - Central Alignment fix) */
.c-heading01 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 auto 1rem;
    /* 中央揃えを強化 */
    text-align: center;
    position: relative;
    display: block;
    /* 中央寄せのためにブロックレベルに設定 */
    z-index: 1;

    /* スタイリッシュで控えめなデザイン */
    background: transparent;
    padding: 0;
    letter-spacing: 0.05em;

    /* 枠線、シャドウをリセット */
    border: none;
    box-shadow: none;
    max-width: fit-content;
    /* テキスト幅に合わせる */
}

/* 見出し下線装飾: モダンなアクセントライン */
.c-heading01::after {
    content: '';
    position: absolute;
    bottom: -15px;
    /* テキストからの距離 */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    /* 長さ */
    height: 2px;
    /* 細さ */
    background-color: var(--color-primary);
    /* デフォルトはプライマリカラー */
    border-radius: 1px;
    z-index: 0;
}

.c-heading01::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 5px;
    z-index: 0;
}

/* フッターボタン用の見出しスタイル調整 */
.c-heading01--cta {
    color: var(--color-text);
    font-size: 2rem;
    margin-bottom: 60px;
    /* 40pxから60pxに変更して余白を確保 */
}

.c-heading01--cta::before,
.c-heading01--cta::after {
    background-color: var(--color-primary);
}

/* 問題解決セクションの見出し調整 */
.c-heading01--problem {
    color: var(--color-sub-coral);
    /* 問題を強調する色 */
}

.c-heading01--problem::before,
.c-heading01--problem::after {
    background-color: var(--color-sub-coral);
}

/* 解決セクションの見出し調整 */
.c-heading01--solution {
    color: #fff;
    /* 背景がプライマリカラーなので白文字に */
}

.c-heading01--solution::before,
.c-heading01--solution::after {
    background-color: #fff;
}

@media (max-width: 768px) {
    .c-heading01 {
        font-size: 1.8rem;
    }

    .c-heading01::before,
    .c-heading01::after {
        width: 80px;
    }
}


.c-heading02 {
    font-size: 1.6rem;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
    background-color: rgba(63, 152, 119, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 10px 10px 0;
}

.c-heading03 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}

/* Illustration placeholder style */
.c-img-frame {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 4px 0px var(--color-sub-yellow);
    border: 2px solid var(--color-text);
    background-color: #fff;
}

/* Form Badge */
.c-label-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}

.c-label-badge--required {
    background-color: #e53935;
}

.c-label-badge--optional {
    background-color: #757575;
}

/* Check List Style */
.c-check-list {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid var(--color-sub-blue);
}

.c-check-list__title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-text);
}

.c-check-list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.c-check-list li {
    position: relative;
    padding-left: 30px;
    font-weight: 700;
}

.c-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    /* 初期状態：透過 */
    background-color: transparent;
    box-shadow: none;
    transition: all 0.3s ease-out;
}

/* スクロール後、またはMVを通り過ぎた後のヘッダーデザイン */
.l-header--scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    /* すりガラス効果 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2%;
    height: 90px;
    max-width: 1400px;
    margin: 0 auto;
}

.l-header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 20px;
    transition: color 0.3s;
}

.l-header__logo span {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: normal;
    display: block;
    line-height: 1;
    transition: color 0.3s;
}

/* Nav (Right Aligned) */
.l-nav {
    flex: 1;
    padding: 0 10px;
    /* 右寄せに変更 */
    display: flex;
    justify-content: flex-end;
}

.l-nav__list {
    display: flex;
    gap: 20px;
    /* ナビゲーションのアイテム自体は左揃えにするため、justify-contentは不要 */
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.l-nav__item a {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s;
    white-space: nowrap;
}

/* 透過ヘッダー時の文字色（白） */
.l-header--transparent .l-header__logo,
.l-header--transparent .l-header__logo span,
.l-header--transparent .l-nav__item a,
.l-header--transparent .l-header__info,
.l-header--transparent .l-header__tel,
.l-header--transparent .l-header__time {
    color: #fff;
    opacity: 1;
}

/* スクロール時の文字色（デフォルトに戻す） */
.l-header--scrolled .l-header__logo,
.l-header--scrolled .l-header__info,
.l-header--scrolled .l-header__tel {
    color: var(--color-text);
}

.l-header--scrolled .l-header__logo span {
    color: var(--color-primary);
}

.l-nav__item a:hover,
.l-nav__item a.is-active {
    color: var(--color-primary);
    /* ホバー時はプライマリカラーを維持 */
}

.l-header--transparent .l-nav__item a:hover,
.l-header--transparent .l-nav__item a.is-active {
    color: var(--color-sub-yellow);
    /* 透過時ホバーは黄色で強調 */
}

/* マーカー風の下線 */
.l-nav__item a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--color-sub-yellow);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: scaleX(0);
    transform-origin: center;
    z-index: -1;
    border-radius: 4px;
}

.l-nav__item a:hover::after,
.l-nav__item a.is-active::after {
    opacity: 0.6;
    transform: scaleX(1);
}

/* Header Right (Actions) */
.l-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.l-header__info {
    text-align: right;
    line-height: 1.3;
    color: #333;
    transition: color 0.3s;
}

.l-header__tel {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text);
    line-height: 1;
    font-family: 'Rubik', sans-serif;
    transition: color 0.3s;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
    color: #666;
    transition: color 0.3s;
}

/* Contact Button (Capsule Style) */
.c-btn-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    padding: 0 25px;
    height: 50px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    background-color: #ffe082;
}

.l-main {
    padding-top: 0;
    min-height: 80vh;
}

/* Responsive Header */
@media (max-width: 1100px) {
    .l-header__info {
        display: none;
    }

    .l-nav {
        display: none;
    }

    .l-header__inner {
        height: 70px;
        padding: 0 15px;
    }

    .l-header__actions {
        margin-right: 45px;
    }

    /* SP Contact Button */
    .c-btn-header {
        height: 40px;
        padding: 0 15px;
        font-size: 0.85rem;
    }

    /* モバイルメニューオーバーレイ */
    .l-nav.is-open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        padding: 40px 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .l-nav__item a {
        font-size: 1.1rem;
        padding: 15px;
        width: 100%;
        text-align: center;
        background-color: var(--color-bg-gray);
        border-radius: 8px;
        color: var(--color-text) !important;
    }
}

/* PC画面ではモバイルメニューを常に非表示にする（初期状態の制御） */
.l-nav.u-hidden-pc-nav {
    display: none;
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

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

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

/* --- Google Map Section (New Position) --- */
.l-map-section {
    padding: 80px 0;
    background-color: transparent;
    /* フッターボタンエリアの黄色背景に合わせる */
}

.l-footer-map {
    height: 400px;
    width: 100%;
    /* コンテンツ幅に合わせるため、max-widthとmarginで中央寄せ */
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ddd;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.l-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.2);
    /* マップの角丸を親要素で制御するため、iframeの角丸は不要 */
    border-radius: 0;
}

/* -----------------------------------------------------------------
           NEW FOOTER STYLES
        ----------------------------------------------------------------- */


.l-footer-custom {
    background-color: var(--color-sub-yellow);
    color: var(--color-text);
    position: relative;
    padding-bottom: 20px;
}

.l-footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
    margin-top: -1px;
}

.l-footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.l-footer-wave path {
    fill: var(--color-sub-yellow);
}

.l-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
}

.l-footer-left {
    flex: 1;
    min-width: 300px;
}

.l-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.l-footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
}

.l-footer-tel {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0;
    display: block;
}

.l-footer-right {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.l-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    position: relative;
    z-index: 2;
}

.l-footer-nav-item a {
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-left: 15px;
    display: block;
    transition: color 0.3s;
}

.l-footer-nav-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.l-footer-nav-item a::before {
    content: '●';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

.p-footer-char {
    position: absolute;
    bottom: -20px;
    right: 0px;
    width: 120px;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.5));
    pointer-events: none;
    z-index: 1;
}

.l-footer-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.l-footer-btn-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.l-footer-btn-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.l-footer-btn-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    fill: var(--color-primary);
    transition: fill 0.3s;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg {
    fill: var(--color-sub-yellow);
}

.l-footer-btn-icon-svg--line {
    fill: #06C755;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg--line {
    fill: #05b54b;
}

.c-flat-icon {
    width: 80px;
    height: 80px;
    fill: var(--color-primary);
    transition: transform 0.3s, fill 0.3s;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.05));
}

.c-flat-icon:hover {
    transform: scale(1.1);
    fill: #e65100;
}

.c-flat-icon--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--abs-top-right {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    fill: var(--color-primary);
    z-index: 2;
}

@media (max-width: 768px) {
    .c-flat-icon--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
        background: transparent;
        box-shadow: none;
        padding: 0;
        width: 60px;
        height: 60px;
    }

    .c-flat-icon--right,
    .c-flat-icon--left {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }
}

.l-footer-btn-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.l-footer-btn-sub {
    font-size: 0.85rem;
    color: #666;
}

.l-footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

@media (max-width: 768px) {
    .l-footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .l-footer-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .p-footer-char {
        position: relative;
        bottom: auto;
        right: auto;
        float: right;
        margin-top: -60px;
        width: 100px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------------
           PAGES (Block: p-)
        ----------------------------------------------------------------- */

/* Guide Character (General) */
.p-guide-char {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
}

.p-guide-char:hover {
    transform: scale(1.1) rotate(-5deg);
}

/* --- TOP PAGE (Redesigned MV) --- */
.p-top__mv {
    /* 画面の高さに合わせる */
    height: 100vh;
    min-height: 500px;

    position: relative;
    overflow: hidden;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: none;
    margin-bottom: 0;

    /* カーブをより滑らかに調整 */
    border-radius: 0 0 50% 50% / 0 0 8% 8%;

    margin-top: 0;
}

.l-main {
    padding-top: 0;
    min-height: 80vh;
}

/* SPでの高さ調整 */
@media (max-width: 768px) {
    .p-top__mv {
        height: 100vh;
        border-radius: 0 0 50% 50% / 0 0 5% 5%;
        /* SP用の緩やかなカーブ */
        margin-top: 0;
    }
}

/* 背景スライダー（フェードイン・アウト） */
.p-top__mv-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ドットパターンオーバーレイ（参照画像のネットワーク感を演出） */
.p-top__mv-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px); */
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
}

/* さらに薄いグラデーションを重ねて文字を見やすく */
.p-top__mv-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, rgba(63, 152, 119, 0.1), rgba(63, 152, 119, 0.1)); */
    z-index: 1;
    pointer-events: none;
}

.p-top__mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* フェードアニメーション（クロスフェード） */
    animation: slideFade 18s infinite;
}

.p-top__mv-slide:nth-child(1) {
    background-image: url('/assets/images/top_mv_slide_01.jpg');
    animation-delay: 0s;
}

.p-top__mv-slide:nth-child(2) {
    background-image: url('/assets/images/top_mv_slide_02.jpg');
    animation-delay: 6s;
}

.p-top__mv-slide:nth-child(3) {
    background-image: url('/assets/images/top_mv_slide_03.jpg');
    animation-delay: 12s;
}

/* 単純なフェードイン・アウトのアニメーション */
@keyframes slideFade {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }

    5% {
        opacity: 1;
        transform: scale(1);
    }

    33% {
        opacity: 1;
        transform: scale(1);
    }

    38% {
        opacity: 0;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

.p-top__mv-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 中央揃え */
    padding-top: 90px;
    /* ヘッダー分 */
    padding-bottom: 100px;
    /* キャラクター分 */
    height: 100%;
    text-align: center;
    color: #fff;
}

@media (max-width: 768px) {
    .p-top__mv-content {
        padding-top: 70px;
    }
}

/* コピーボックス（背景なし、文字色白でシンプルに） */
.p-top__copy-box {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 800px;
    animation: fadeInUpBox 1s ease-out forwards;
}

@keyframes fadeInUpBox {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* 英語のタグライン */
.p-top__copy-en {
    display: block;
    font-size: 1.2rem;
    color: #ffb300;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0px;
    font-family: 'Rubik', sans-serif;
    text-transform: uppercase;
    opacity: 0.9;
    text-align: center;
}

/* メインコピー */
.p-top__copy {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 30px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.p-top__sub {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* Character at Bottom Center (円形背景を削除) */
.p-top__mv-char-wrapper {
    position: relative;
    bottom: auto;
    top: auto;
    left: auto;
    right: auto;
    z-index: 10;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-top__mv-char {
    width: 100px;
    /* キャラクターサイズ */
    height: auto;
    animation: floating 3s ease-in-out infinite;
}

/* SP時の調整 */
@media (max-width: 768px) {
    .p-top__copy {
        font-size: 2.2rem;
    }

    .p-top__copy-en {
        font-size: 1rem;
        margin-bottom: 0px;
        letter-spacing: 0;
    }

    .p-top__mv-char-wrapper {
        width: 10rem;
        bottom: 0px;
        top: 110%;
    }

    .p-top__mv-char {
        width: 70px;
    }
}

/* Service Links Grid */
.p-top__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

@media (max-width: 600px) {
    .p-top__services {
        grid-template-columns: 1fr;
    }
}

.p-top__service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
    cursor: pointer;
    text-align: center;
    padding-bottom: 30px;
    display: block;
    color: inherit;
    height: 100%;
}

.p-top__service-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-top__service-img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background-color: var(--color-bg-gray);
    padding: 30px;
}

.p-top__service-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 20px 0 20px;
    /* 下の余白を10pxから20pxに広げて読みやすく */
    color: var(--color-primary);
}

/* IT Support Pickup Section */
.p-top__pickup-it {
    background-color: var(--color-sub-blue);
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* News (Brushed Up) */
.p-top__news-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.p-top__news-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: box-shadow 0.3s, transform 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.p-top__news-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.p-top__news-date {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 100px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.p-news-tag {
    background-color: var(--color-sub-coral);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.p-top__news-text {
    flex-grow: 1;
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    .p-top__news-item {
        flex-wrap: wrap;
    }

    .p-top__news-date {
        width: 100%;
        margin-bottom: 5px;
    }
}


/* Maker List Styles */
.p-maker-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.p-maker-item {
    width: 200px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
}

.p-maker-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-maker-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-maker-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* --- Infinite Scroll Section --- */
.p-scroll-slide {
    padding: 40px 0;
    overflow: hidden;
    /* スクロール境界を隠す */
    white-space: nowrap;
    /* 要素が折り返さないようにする */
    background-color: var(--color-sub-blue);
}

.p-scroll-slide__track {
    display: inline-block;
    animation: scroll 30s linear infinite;
    /* アニメーション適用 */
}

.p-scroll-slide__item {
    display: inline-block;
    width: 180px;
    /* 各アイテムの幅 */
    padding: 0 30px;
    text-align: center;
    vertical-align: middle;
}

.p-scroll-slide__item img {
    max-height: 50px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: opacity 0.3s, filter 0.3s;
}

.p-scroll-slide__item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* トラックを複製して無限ループを担保 */
.p-scroll-slide__track:after {
    content: attr(data-content);
    display: inline-block;
    padding-left: inherit;
}

/* --- Problem/Solution Sections --- */
.p-problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.p-problem-card {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--color-sub-coral);
    position: relative;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p-problem-card__icon {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.p-problem-card__text {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-text);
}

/* 私たちが解決します (Solution Section) */
.p-solution {
    /* Flexコンテナとして動作 */
    display: flex;
    align-items: stretch;
    /* 高さを揃える */
    position: relative;
    background-color: var(--color-primary);
    color: #fff;
    height: 500px;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

/* 左右の背景画像エリア */
.p-solution-side {
    width: 15%;
    /* 左右の幅を固定 */
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.p-solution-side-image-wrapper {
    /* フレックスボックスで画像を縦に並べる */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    /* 高さは自動調整 */

    /* ドットパターンオーバーレイ（画像の前面にかける） */
    position: relative;
}

/* .p-solution-side-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px), linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
    background-size: 50px 50px, cover;
    background-repeat: repeat, no-repeat;
    pointer-events: none;
    z-index: 2;
} */

/* 画像アイテムのスタイル */
.p-solution-img-item {
    width: 100%;
    height: 4rem;
    object-fit: contain;
    margin: 2rem;
}
/* アニメーション設定 */
.p-solution-side--left .p-solution-side-image-wrapper {
    /* 左は上へ */
    animation: scroll-up 40s linear infinite;
}

.p-solution-side--right .p-solution-side-image-wrapper {
    /* 右は下へ */
    animation: scroll-down 40s linear infinite;
}

.p-solution-main {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 60%;
    padding: 40px;
    z-index: 20;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 4rem 0;
    gap: 1rem;
}

.p-solution-main p {
    margin: 0 auto;
}
.p-solution-feature-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 0;
}

.p-solution-feature {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
}

.p-solution-feature__icon {
    width: 40px;
    height: 40px;
    fill: var(--color-primary);
    margin-bottom: 5px;
}

@media (max-width: 1100px) {
    .p-solution-side {
        width: 10%;
    }
}

@media (max-width: 768px) {
    .p-solution {
        height: auto;
        padding: 60px 0;
        display: block;
    }

    .p-solution-side {
        display: none;
        /* スマホでは背景スクロールを非表示 */
    }

    .p-solution-main {
        padding: 0 20px;
        min-width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .p-solution-feature-list {
        gap: 15px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .p-solution-feature {
        width: 200px;
        height: 200px;
        font-size: 22px;
        margin: 0 auto;
    }

    .p-solution-feature__icon {
        width: 30px;
        height: 30px;
    }
}


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .c-menu-toggle {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .c-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        position: absolute;
        transition: 0.3s;
    }

    .c-menu-toggle span:nth-child(1) {
        top: 0;
    }

    .c-menu-toggle span:nth-child(2) {
        top: 9px;
    }

    .c-menu-toggle span:nth-child(3) {
        bottom: 0;
    }
}

@media (min-width: 769px) {
    .c-menu-toggle {
        display: none;
    }
}


/* ===== it-support.html inline styles ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #3F9877;
    /* 指定アクセントカラー */
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-bg-gray: #F9F9F9;
    /* 親しみやすい・カラフルなサブカラー（トリス/レトロポップ風） */
    --color-sub-yellow: #F2EBBF;
    --color-sub-blue: #D3E0EA;
    --color-sub-coral: #F8B195;
    --font-main: 'Rubik', 'Noto Sans JP', sans-serif;
}

html {
    scroll-padding-top: 100px;
    /* ヘッダー固定分のスクロール位置調整 */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-center {
    text-align: center;
}

.u-mb10 {
    margin-bottom: 10px;
}

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

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

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

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

.u-mt20 {
    margin-top: 20px;
}

.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block;
    }

    .u-pc-only {
        display: none;
    }
}

/* Utility for Header Menu (900px breakpoint) */
.u-hidden-pc {
    display: none;
}

@media (max-width: 900px) {
    .u-hidden-pc {
        display: block;
    }
}

/* -----------------------------------------------------------------
           COMPONENT
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    cursor: pointer;
}

.c-btn--line {
    background-color: #06C755;
}

.c-btn--outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Small Buttons */
.c-btn-sm {
    padding: 8px 0;
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

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

.c-btn-sm--outline {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: #fff;
}

/* Headings */
.c-heading01 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    display: inline-block;
}

.c-heading01::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-sub-yellow);
    margin: 10px auto 0;
    border-radius: 2px;
}

.c-heading02 {
    font-size: 1.6rem;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
    background-color: rgba(63, 152, 119, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 10px 10px 0;
}

.c-heading03 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}

/* Illustration placeholder style */
.c-img-frame {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 4px 0px var(--color-sub-yellow);
    border: 2px solid var(--color-text);
    background-color: #fff;
}

/* Form Badge */
.c-label-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}

.c-label-badge--required {
    background-color: #e53935;
}

.c-label-badge--optional {
    background-color: #757575;
}

/* Check List Style */
.c-check-list {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid var(--color-sub-blue);
}

.c-check-list__title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-text);
}

.c-check-list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.c-check-list li {
    position: relative;
    padding-left: 30px;
    font-weight: 700;
}

.c-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    /* SVGのドロップシャドウが見切れないように調整 */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.l-header__inner {
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2%;
    /* 左右の余白を少し詰める */
    height: 90px;
    /* box-shadowは親のfilterで代用するため削除 */
}

/* Header Wave */
.l-header__wave {
    width: 100%;
    line-height: 0;
    background-color: transparent;
    margin-top: -1px;
    /* 隙間防止 */
}

.l-header__wave svg {
    display: block;
    width: 100%;
    height: 15px;
    /* 波の高さを控えめに */
}

.l-header__wave path {
    fill: rgba(255, 255, 255, 0.98);
}

.l-header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 20px;
}

.l-header__logo span {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: normal;
    display: block;
    line-height: 1;
}

/* Nav (Center) - Style updated to match reference "pop" style */
.l-nav {
    flex: 1;
    padding: 0 10px;
}

.l-nav__list {
    display: flex;
    gap: 10px;
    /* 間隔を狭めてカプセル型にしやすく */
    justify-content: center;
    flex-wrap: wrap;
    /* 画面幅によっては折り返し */
}

.l-nav__item a {
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    color: var(--color-text);
    padding: 8px 15px;
    /* カプセル用の余白 */
    border-radius: 30px;
    /* 丸み */
    transition: all 0.3s;
    display: inline-block;
}

/* ホバー時のデザイン変更（下線ではなく背景色） */
.l-nav__item a:hover,
.l-nav__item a.is-active {
    background-color: var(--color-sub-blue);
    /* 親しみやすい水色 */
    color: var(--color-primary);
}

.l-nav__item a::after {
    display: none;
    /* 下線を削除 */
}

/* Header Right (Actions) */
.l-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.l-header__info {
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #666;
}

.l-header__tel {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Contact Button (Updated to look like a tag/sticker) */
.c-btn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    /* 茶色文字で柔らかく */
    padding: 5px 20px;
    width: 140px;
    height: 70px;
    border-radius: 10px 10px 10px 10px;
    /* 少し角丸 */
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: 2px solid #fff;
    /* 白枠でポップに */
    line-height: 1.2;
    position: relative;
}

.c-btn-header span {
    font-size: 0.7rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
    opacity: 0.8;
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    opacity: 1;
    background-color: #ffe082;
}

.c-btn-header::before {
    display: none;
    /* アイコン削除 */
}

/* ボタンの上に「WEB受付」のようなバッジをつける */
.c-btn-header::after {
    content: 'WEB受付';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.l-main {
    padding-top: 110px;
    /* Header height (90 + 20) */
    min-height: 80vh;
}

/* Responsive Header */
@media (max-width: 1100px) {

    /* 画面幅が狭いときは電話番号を非表示にしてスッキリさせる */
    .l-header__info {
        display: none;
    }
}

@media (max-width: 900px) {
    .l-nav {
        display: none;
    }

    /* PCメニュー非表示 */
    .l-header__info {
        display: none;
    }

    /* 電話番号非表示 */

    .l-header__inner {
        height: 70px;
        padding: 10px 15px;
    }

    .l-header__actions {
        margin-right: 45px;
        /* ハンバーガーメニュー分の余白 */
        /* スマホ・タブレット時はヘッダー上のボタンを非表示にするため display: none を追加してもよいが、
                   .c-btn-header クラス側で制御する */
    }

    /* SP用のお問い合わせボタン制御 */
    .c-btn-header {
        display: none;
        /* ヘッダー上では非表示にする */
    }

    /* Mobile Nav Overlay */
    .l-nav.is-open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        padding: 40px 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .l-nav__item a {
        font-size: 1.1rem;
        padding: 15px;
        width: 100%;
        text-align: center;
        background-color: var(--color-bg-gray);
    }
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

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

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

/* -----------------------------------------------------------------
           NEW FOOTER STYLES (WAVE DESIGN)
        ----------------------------------------------------------------- */
/* Map Section (Placed above footer) */
.l-footer-map {
    height: 400px;
    width: 100%;
    background-color: #ddd;
    margin-bottom: -5px;
    /* adjust for gap */
}

.l-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.2);
}

/* Footer Container */
.l-footer-custom {
    background-color: var(--color-sub-yellow);
    /* 親しみやすい黄色背景 */
    color: var(--color-text);
    position: relative;
    padding-bottom: 20px;
}

/* Wave SVG */
.l-footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
    /* 波を上向きに */
    margin-top: -1px;
}

.l-footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.l-footer-wave path {
    fill: var(--color-sub-yellow);
}

/* Footer Main Content */
.l-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
}

/* Left Side: Logo & Info */
.l-footer-left {
    flex: 1;
    min-width: 300px;
}

.l-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.l-footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
}

.l-footer-tel {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0;
    display: block;
}

/* Right Side: Nav Links */
.l-footer-right {
    flex: 1;
    min-width: 300px;
    position: relative;
    /* キャラクター配置の基準 */
}

.l-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    position: relative;
    z-index: 2;
}

.l-footer-nav-item a {
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-left: 15px;
    display: block;
    transition: color 0.3s;
}

.l-footer-nav-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.l-footer-nav-item a::before {
    content: '●';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

/* Footer Character */
.p-footer-char {
    position: absolute;
    bottom: -20px;
    right: 0px;
    width: 120px;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.5));
    pointer-events: none;
    /* リンクの邪魔にならないように */
    z-index: 1;
}

/* Bottom Buttons (CTA) - Adjusted for Top Position */
.l-footer-buttons {
    display: grid;
    /* タブレットまでは絶対3カラムを維持 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    /* 下線に変更 */
}

.l-footer-btn-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.l-footer-btn-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Icon Style for Flat Design (New) */
.l-footer-btn-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    fill: var(--color-primary);
    /* テーマカラーで統一 */
    transition: fill 0.3s;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg {
    fill: var(--color-sub-yellow);
    /* ホバー時にアクセントカラーへ */
}

/* LINE Icon Color Override */
.l-footer-btn-icon-svg--line {
    fill: #06C755;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg--line {
    fill: #05b54b;
}

/* -----------------------------------------------------------------
           FLAT ICON STYLES (New Section Icons)
        ----------------------------------------------------------------- */
.c-flat-icon {
    width: 80px;
    height: 80px;
    fill: var(--color-primary);
    transition: transform 0.3s, fill 0.3s;
    /* 少し立体感を出す場合 */
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.05));
}

.c-flat-icon:hover {
    transform: scale(1.1);
    fill: #e65100;
    /* ホバーでアクセント色（オレンジ）に */
}

/* 配置バリエーション */
.c-flat-icon--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* 絶対配置（カード右上など）用 */
.c-flat-icon--abs-top-right {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    fill: var(--color-primary);
    z-index: 2;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .c-flat-icon--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
        background: transparent;
        box-shadow: none;
        padding: 0;
        width: 60px;
        height: 60px;
    }

    .c-flat-icon--right,
    .c-flat-icon--left {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }
}

.l-footer-btn-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.l-footer-btn-sub {
    font-size: 0.85rem;
    color: #666;
}

/* Copyright */
.l-footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

/* Group Links removed */

@media (max-width: 768px) {
    .l-footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .l-footer-nav-list {
        grid-template-columns: 1fr;
        /* スマホは1列 */
    }

    /* スマホで1カラムに変更 */
    .l-footer-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .p-footer-char {
        position: relative;
        bottom: auto;
        right: auto;
        float: right;
        margin-top: -60px;
        /* ナビの下から少し上に重ねる */
        width: 100px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------------
           PAGES (Block: p-)
        ----------------------------------------------------------------- */

/* Guide Character (General) */
.p-guide-char {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
}

.p-guide-char:hover {
    transform: scale(1.1) rotate(-5deg);
}

.p-guide-char--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.p-guide-char--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.p-guide-char--abs-top-right {
    position: absolute;
    top: -40px;
    right: 20px;
    width: 100px;
}

/* FAQ Accordion Styles (Updated to Green Theme) */
.p-faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-faq-item {
    margin-bottom: 15px;
}

.p-faq-header {
    background-color: #f1f8f5;
    /* 薄い緑色 */
    padding: 20px 50px 20px 20px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    color: var(--color-primary);
    /* 緑文字 */
    transition: background-color 0.3s;
    line-height: 1.5;
}

.p-faq-header:hover {
    background-color: #e0f2f1;
    /* ホバー時の少し濃い緑 */
}

/* Icon (+/-) */
.p-faq-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    /* アイコンも緑 */
}

.p-faq-item.is-open .p-faq-header::after {
    content: '−';
    /* マイナス */
}

/* Open State Style */
.p-faq-item.is-open .p-faq-header {
    border-radius: 10px 10px 0 0;
    background-color: #e0f2f1;
    /* オープン時の緑 */
}

.p-faq-body {
    display: none;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #f1f8f5;
    /* 枠線も薄い緑 */
    border-top: none;
    border-radius: 0 0 10px 10px;
    line-height: 1.6;
}

.p-faq-item.is-open .p-faq-body {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --- TOP PAGE (Redesigned MV) --- */
.p-top__mv {
    height: 600px;
    /* 高さを確保 */
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    /* 垂直中央 */
    justify-content: flex-start;
    /* 左寄せ基準 */
}

/* Slider Background */
.p-top__mv-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

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

/* スライド画像の設定（3枚） */
.p-top__mv-slide:nth-child(1) {
    background-image: url('/assets/images/top_mv_slide_01.jpg');
    animation-delay: 0s;
}

.p-top__mv-slide:nth-child(2) {
    background-image: url('/assets/images/top_mv_slide_02.jpg');
    animation-delay: 5s;
}

.p-top__mv-slide:nth-child(3) {
    background-image: url('/assets/images/top_mv_slide_03.jpg');
    animation-delay: 10s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    5% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* MV Content (Copy & Text) */
.p-top__mv-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    pointer-events: none;
    /* 下の画像をクリック可能にする場合 */
}

/* Copy Style (Balloon-like) */
.p-top__copy-box {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 40px;
    border-radius: 30px;
    /* 丸みを強く */
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 var(--color-sub-yellow);
    max-width: 600px;
    pointer-events: auto;
    position: relative;
}

/* 吹き出しのしっぽ */
/* .p-top__copy-box::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 0;
    border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
} */

.p-top__copy {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 10px;
}

.p-top__sub {
    font-size: 1.1rem;
    color: var(--color-text);
    font-weight: bold;
}

/* Character at Bottom Right */
.p-top__mv-char {
    width: 120px;
    right: 10px;
}


/* --- SUB PAGE HERO (Redesigned with Parallax & Animation) --- */
.p-page-fv {
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center 0;
    /* JSで制御するために初期値を設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    /* パララックス効果のための準備 */
    will-change: background-position;
}

/* オーバーレイ（緑のグラデーション） */
.p-page-fv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 152, 119, 0.85), rgba(30, 90, 50, 0.7));
    z-index: 1;
}

/* 背景パターン（ドット） */
.p-page-fv::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 1;
}

.p-page-fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

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

.p-page-fv__en {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 英語ラベルの両サイドに線を引く */
.p-page-fv__en::before,
.p-page-fv__en::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}

.p-page-fv__en::before {
    right: 100%;
    margin-right: 15px;
}

.p-page-fv__en::after {
    left: 100%;
    margin-left: 15px;
}

.p-page-fv__jp {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 下部の波型 */
.p-page-fv__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.p-page-fv__wave svg {
    display: block;
    width: 100%;
    height: 30px;
}

.p-page-fv__wave path {
    fill: #fff;
}

/* Breadcrumbs */
.c-breadcrumbs {
    padding: 15px 20px;
    font-size: 0.85rem;
    color: #888;
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

.c-breadcrumbs a {
    color: #555;
    text-decoration: underline;
}

.c-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

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

@media (max-width: 768px) {
    .p-page-fv {
        height: 250px;
    }

    .p-page-fv__jp {
        font-size: 2rem;
    }

    .c-breadcrumbs {
        text-align: left;
        font-size: 0.75rem;
    }

    /* スマホでは線消す */
    .p-page-fv__en::before,
    .p-page-fv__en::after {
        display: none;
    }
}

/* Service Links Grid */
.p-top__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* PC: 2カラム */
    gap: 30px;
}

@media (max-width: 600px) {
    .p-top__services {
        grid-template-columns: 1fr;
        /* SP: 1カラム */
    }
}

.p-top__service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
    cursor: pointer;
    text-align: center;
    padding-bottom: 30px;
    display: block;
    color: inherit;
    height: 100%;
    /* 高さ揃え */
}

.p-top__service-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-top__service-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background-color: transparent;
    padding: 30px;
    aspect-ratio: 3 / 2;
}

.p-top__service-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: var(--color-primary);
}

/* Used Copier Section */
.p-top__used {
    background-color: var(--color-sub-yellow);
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* IT Support Pickup Section (New Style based on p-top__used) */
.p-top__pickup-it {
    background-color: var(--color-sub-blue);
    /* ITイメージの青系に変更 */
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* News */
.p-top__news-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-top__news-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: baseline;
}

.p-top__news-date {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 100px;
}

/* --- SUB PAGES (Common) --- */
.p-page-fv {
    height: 300px;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
}

.p-page-fv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.p-page-fv__title {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    font-weight: 700;
}

.p-page-fv__sub {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    margin-top: 10px;
    opacity: 0.9;
}

.p-content-block {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

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

.p-content-block__txt {
    flex: 1;
}

.p-content-block__img {
    flex: 1;
}

.p-content-block__img img {
    border-radius: 20px;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0 var(--color-sub-coral);
    border: 2px solid #333;
}

/* Product Grid & Card Styles */
.p-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.p-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.p-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.p-product-card__img-area {
    width: 100%;
    height: 220px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    position: relative;
}

.p-product-card__img-area img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
}

.p-product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-sub-yellow);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.p-product-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.p-product-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.p-product-card__price {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.p-product-card__price-main {
    font-size: 1.4rem;
    font-weight: bold;
    color: #d32f2f;
}

.p-product-card__price-sub {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

.p-product-specs {
    margin-bottom: 20px;
    font-size: 0.9rem;
    flex: 1;
}

.p-product-specs dt {
    float: left;
    clear: left;
    font-weight: bold;
    margin-right: 0.5em;
    color: #555;
}

.p-product-specs dt::after {
    content: ":";
}

.p-product-specs dd {
    margin-left: 0;
    margin-bottom: 5px;
    color: #333;
}

.p-product-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Feature Box Style */
.p-feature-box {
    background-color: var(--color-sub-yellow);
    padding: 40px;
    border-radius: 20px;
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-feature-box__content {
    flex: 1;
}

.p-feature-box__img {
    flex: 0 0 350px;
    position: relative;
}

.p-feature-img-main {
    width: 100%;
    border-radius: 10px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.p-feature-img-sub {
    width: 55%;
    position: absolute;
    bottom: -20px;
    left: -20px;
    z-index: 2;
    border-radius: 10px;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(-3deg);
}

/* Case Studies */
.p-case-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-case-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.p-case-icon {
    flex: 0 0 100px;
    text-align: center;
}

.p-case-icon img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-sub-blue);
    object-fit: cover;
    background-color: #fff;
}

.p-case-content {
    flex: 1;
}

.p-case-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.p-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    align-items: center;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
}

.p-case-label {
    background-color: var(--color-sub-blue);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 5px;
}

.p-case-text {
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Maker List Styles */
.p-maker-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.p-maker-item {
    width: 200px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
}

.p-maker-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-maker-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-maker-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* License & History */
.p-license-box {
    border: 2px solid var(--color-sub-yellow);
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
}

.p-history-list {
    border-left: 4px solid var(--color-sub-blue);
    padding-left: 30px;
    margin-left: 10px;
}

.p-history-item {
    position: relative;
    margin-bottom: 30px;
}

.p-history-item::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-sub-blue);
}

.p-history-year {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: block;
}

.p-history-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Product Detail (Security) */
.p-product-detail {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-bottom: 40px;
}

.p-product-detail__header {
    border-bottom: 2px solid var(--color-sub-blue);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.p-product-detail__title {
    font-size: 1.6rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 10px;
}

.p-product-detail__sub {
    font-size: 1rem;
    color: #666;
}

.p-product-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: start;
}

.p-feature-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.p-feature-item {
    background: var(--color-bg-gray);
    padding: 15px;
    border-radius: 8px;
}

.p-feature-item__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.p-feature-item__title::before {
    content: '●';
    color: var(--color-sub-yellow);
    margin-right: 8px;
    font-size: 1.2rem;
}

.p-feature-item__text {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Attention Box */
.p-attention-box {
    background-color: #fffcf0;
    border: 3px solid #ffb300;
    border-radius: 15px;
    padding: 40px;
    margin-top: 50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(255, 179, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.p-attention-box::before {
    content: 'POINT';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffb300;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    z-index: 1;
}

.p-attention-char {
    flex: 0 0 150px;
    text-align: center;
}

.p-attention-char img {
    width: 100%;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.1));
}

.p-attention-content {
    flex: 1;
}

.p-attention-title {
    color: #e65100;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
}

.p-attention-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5d4037;
}

/* Feature Card Grid (Small icons for Phone/Solar features) */
.p-feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.p-feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s;
}

.p-feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Feature Card Icon (Updated for SVG) */
.p-feature-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: block;
    fill: var(--color-primary);
    transition: fill 0.3s, transform 0.3s;
}

.p-feature-card:hover .p-feature-card__icon {
    fill: #e65100;
    /* アクセントカラー（オレンジ） */
    transform: scale(1.1);
}

.p-feature-card__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1rem;
}

.p-feature-card__text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
}

/* Strong Point Box */
.p-strong-point {
    background-color: var(--color-sub-blue);
    padding: 40px;
    border-radius: 15px;
    position: relative;
    margin-bottom: 60px;
}

.p-strong-point__title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 30px;
    background: #fff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

/* Maintenance List (Copier) */
.p-maintenance-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.p-maintenance-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
    font-weight: bold;
    color: var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
}

/* Company Contact */
.p-company__contact {
    background-color: var(--color-bg-gray);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.p-company__methods {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.p-contact-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 250px;
    border: 2px solid var(--color-primary);
}

.c-form-group {
    margin-bottom: 20px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.c-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.c-form-input,
.c-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
}

.c-form-textarea {
    height: 150px;
}

/* Other Service Grid */
.p-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .p-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .l-header {
        padding: 0 20px;
    }

    .l-nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .l-nav.is-open {
        display: block;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .p-top__mv {
        height: auto;
        padding: 100px 0 60px;
    }

    .p-top__copy {
        font-size: 1.8rem;
    }

    .p-content-block {
        flex-direction: column !important;
        gap: 20px;
    }

    .c-heading01 {
        font-size: 1.8rem;
    }

    .c-menu-toggle {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .c-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        position: absolute;
        transition: 0.3s;
    }

    .c-menu-toggle span:nth-child(1) {
        top: 0;
    }

    .c-menu-toggle span:nth-child(2) {
        top: 9px;
    }

    .c-menu-toggle span:nth-child(3) {
        bottom: 0;
    }

    .p-feature-box {
        flex-direction: column;
        padding: 30px;
    }

    .p-feature-box__img {
        flex: auto;
        width: 100%;
        margin-top: 20px;
        padding-left: 20px;
    }

    .p-attention-box {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .p-attention-char {
        flex: 0 0 auto;
        width: 120px;
        margin-bottom: 10px;
    }

    .p-case-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .p-case-meta {
        justify-content: center;
    }

    .p-license-box {
        flex-direction: column;
        text-align: center;
    }

    .p-guide-char--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
    }
}

@media (max-width: 600px) {
    .p-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .c-menu-toggle {
        display: none;
    }
}

/* -----------------------------------------------------------------
           ANIMATION & JS CLASSES
        ----------------------------------------------------------------- */
.is-page-hidden {
    display: none;
    animation: fadeIn 0.5s ease;
}

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

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

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


/* ===== copier.html inline styles ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #3F9877;
    /* 指定アクセントカラー */
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-bg-gray: #F9F9F9;
    /* 親しみやすい・カラフルなサブカラー（トリス/レトロポップ風） */
    --color-sub-yellow: #F2EBBF;
    --color-sub-blue: #D3E0EA;
    --color-sub-coral: #F8B195;
    --font-main: 'Rubik', 'Noto Sans JP', sans-serif;
}

html {
    scroll-padding-top: 100px;
    /* ヘッダー固定分のスクロール位置調整 */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-center {
    text-align: center;
}

.u-mb10 {
    margin-bottom: 10px;
}

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

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

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

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

.u-mt20 {
    margin-top: 20px;
}

.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block;
    }

    .u-pc-only {
        display: none;
    }
}

/* Utility for Header Menu (900px breakpoint) */
.u-hidden-pc {
    display: none;
}

@media (max-width: 900px) {
    .u-hidden-pc {
        display: block;
    }
}

/* -----------------------------------------------------------------
           COMPONENT
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    cursor: pointer;
}

.c-btn--line {
    background-color: #06C755;
}

.c-btn--outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Small Buttons */
.c-btn-sm {
    padding: 8px 0;
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

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

.c-btn-sm--outline {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: #fff;
}

/* Headings */
.c-heading01 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    display: inline-block;
}

.c-heading01::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-sub-yellow);
    margin: 10px auto 0;
    border-radius: 2px;
}

.c-heading02 {
    font-size: 1.6rem;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
    background-color: rgba(63, 152, 119, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 10px 10px 0;
}

.c-heading03 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}

/* Illustration placeholder style */
.c-img-frame {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 4px 0px var(--color-sub-yellow);
    border: 2px solid var(--color-text);
    background-color: #fff;
}

/* Form Badge */
.c-label-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}

.c-label-badge--required {
    background-color: #e53935;
}

.c-label-badge--optional {
    background-color: #757575;
}

/* Check List Style */
.c-check-list {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid var(--color-sub-blue);
}

.c-check-list__title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-text);
}

.c-check-list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.c-check-list li {
    position: relative;
    padding-left: 30px;
    font-weight: 700;
}

.c-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    /* SVGのドロップシャドウが見切れないように調整 */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.l-header__inner {
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2%;
    /* 左右の余白を少し詰める */
    height: 90px;
    /* box-shadowは親のfilterで代用するため削除 */
}

/* Header Wave */
.l-header__wave {
    width: 100%;
    line-height: 0;
    background-color: transparent;
    margin-top: -1px;
    /* 隙間防止 */
}

.l-header__wave svg {
    display: block;
    width: 100%;
    height: 15px;
    /* 波の高さを控えめに */
}

.l-header__wave path {
    fill: rgba(255, 255, 255, 0.98);
}

.l-header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 20px;
}

.l-header__logo span {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: normal;
    display: block;
    line-height: 1;
}

/* Nav (Center) - Style updated to match reference "pop" style */
.l-nav {
    flex: 1;
    padding: 0 10px;
}

.l-nav__list {
    display: flex;
    gap: 10px;
    /* 間隔を狭めてカプセル型にしやすく */
    justify-content: center;
    flex-wrap: wrap;
    /* 画面幅によっては折り返し */
}

.l-nav__item a {
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    color: var(--color-text);
    padding: 8px 15px;
    /* カプセル用の余白 */
    border-radius: 30px;
    /* 丸み */
    transition: all 0.3s;
    display: inline-block;
}

/* ホバー時のデザイン変更（下線ではなく背景色） */
.l-nav__item a:hover,
.l-nav__item a.is-active {
    background-color: var(--color-sub-blue);
    /* 親しみやすい水色 */
    color: var(--color-primary);
}

.l-nav__item a::after {
    display: none;
    /* 下線を削除 */
}

/* Header Right (Actions) */
.l-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.l-header__info {
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #666;
}

.l-header__tel {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Contact Button (Updated to look like a tag/sticker) */
.c-btn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    /* 茶色文字で柔らかく */
    padding: 5px 20px;
    width: 140px;
    height: 70px;
    border-radius: 10px 10px 10px 10px;
    /* 少し角丸 */
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: 2px solid #fff;
    /* 白枠でポップに */
    line-height: 1.2;
    position: relative;
}

.c-btn-header span {
    font-size: 0.7rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
    opacity: 0.8;
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    opacity: 1;
    background-color: #ffe082;
}

.c-btn-header::before {
    display: none;
    /* アイコン削除 */
}

/* ボタンの上に「WEB受付」のようなバッジをつける */
.c-btn-header::after {
    content: 'WEB受付';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.l-main {
    padding-top: 110px;
    /* Header height (90 + 20) */
    min-height: 80vh;
}

/* Responsive Header */
@media (max-width: 1100px) {

    /* 画面幅が狭いときは電話番号を非表示にしてスッキリさせる */
    .l-header__info {
        display: none;
    }
}

@media (max-width: 900px) {
    .l-nav {
        display: none;
    }

    /* PCメニュー非表示 */
    .l-header__info {
        display: none;
    }

    /* 電話番号非表示 */

    .l-header__inner {
        height: 70px;
        padding: 10px 15px;
    }

    .l-header__actions {
        margin-right: 45px;
        /* ハンバーガーメニュー分の余白 */
        /* スマホ・タブレット時はヘッダー上のボタンを非表示にするため display: none を追加してもよいが、
                   .c-btn-header クラス側で制御する */
    }

    /* SP用のお問い合わせボタン制御 */
    .c-btn-header {
        display: none;
        /* ヘッダー上では非表示にする */
    }

    /* Mobile Nav Overlay */
    .l-nav.is-open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        padding: 40px 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .l-nav__item a {
        font-size: 1.1rem;
        padding: 15px;
        width: 100%;
        text-align: center;
        background-color: var(--color-bg-gray);
    }
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

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

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

/* -----------------------------------------------------------------
           NEW FOOTER STYLES (WAVE DESIGN)
        ----------------------------------------------------------------- */
/* Map Section (Placed above footer) */
.l-footer-map {
    height: 400px;
    width: 100%;
    background-color: #ddd;
    margin-bottom: -5px;
    /* adjust for gap */
}

.l-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.2);
}

/* Footer Container */
.l-footer-custom {
    background-color: var(--color-sub-yellow);
    /* 親しみやすい黄色背景 */
    color: var(--color-text);
    position: relative;
    padding-bottom: 20px;
}

/* Wave SVG */
.l-footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
    /* 波を上向きに */
    margin-top: -1px;
}

.l-footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.l-footer-wave path {
    fill: var(--color-sub-yellow);
}

/* Footer Main Content */
.l-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
}

/* Left Side: Logo & Info */
.l-footer-left {
    flex: 1;
    min-width: 300px;
}

.l-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.l-footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
}

.l-footer-tel {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0;
    display: block;
}

/* Right Side: Nav Links */
.l-footer-right {
    flex: 1;
    min-width: 300px;
    position: relative;
    /* キャラクター配置の基準 */
}

.l-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    position: relative;
    z-index: 2;
}

.l-footer-nav-item a {
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-left: 15px;
    display: block;
    transition: color 0.3s;
}

.l-footer-nav-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.l-footer-nav-item a::before {
    content: '●';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

/* Footer Character */
.p-footer-char {
    position: absolute;
    bottom: -20px;
    right: 0px;
    width: 120px;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.5));
    pointer-events: none;
    /* リンクの邪魔にならないように */
    z-index: 1;
}

/* Bottom Buttons (CTA) - Adjusted for Top Position */
.l-footer-buttons {
    display: grid;
    /* タブレットまでは絶対3カラムを維持 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    /* 下線に変更 */
}

.l-footer-btn-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.l-footer-btn-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Icon Style for Flat Design (New) */
.l-footer-btn-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    fill: var(--color-primary);
    /* テーマカラーで統一 */
    transition: fill 0.3s;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg {
    fill: var(--color-sub-yellow);
    /* ホバー時にアクセントカラーへ */
}

/* LINE Icon Color Override */
.l-footer-btn-icon-svg--line {
    fill: #06C755;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg--line {
    fill: #05b54b;
}

/* -----------------------------------------------------------------
           FLAT ICON STYLES (New Section Icons)
        ----------------------------------------------------------------- */
.c-flat-icon {
    width: 80px;
    height: 80px;
    fill: var(--color-primary);
    transition: transform 0.3s, fill 0.3s;
    /* 少し立体感を出す場合 */
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.05));
}

.c-flat-icon:hover {
    transform: scale(1.1);
    fill: #e65100;
    /* ホバーでアクセント色（オレンジ）に */
}

/* 配置バリエーション */
.c-flat-icon--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* 絶対配置（カード右上など）用 */
.c-flat-icon--abs-top-right {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    fill: var(--color-primary);
    z-index: 2;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .c-flat-icon--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
        background: transparent;
        box-shadow: none;
        padding: 0;
        width: 60px;
        height: 60px;
    }

    .c-flat-icon--right,
    .c-flat-icon--left {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }
}

.l-footer-btn-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.l-footer-btn-sub {
    font-size: 0.85rem;
    color: #666;
}

/* Copyright */
.l-footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

/* Group Links removed */

@media (max-width: 768px) {
    .l-footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .l-footer-nav-list {
        grid-template-columns: 1fr;
        /* スマホは1列 */
    }

    /* スマホで1カラムに変更 */
    .l-footer-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .p-footer-char {
        position: relative;
        bottom: auto;
        right: auto;
        float: right;
        margin-top: -60px;
        /* ナビの下から少し上に重ねる */
        width: 100px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------------
           PAGES (Block: p-)
        ----------------------------------------------------------------- */

/* Guide Character (General) */
.p-guide-char {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
}

.p-guide-char:hover {
    transform: scale(1.1) rotate(-5deg);
}

.p-guide-char--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.p-guide-char--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.p-guide-char--abs-top-right {
    position: absolute;
    top: -40px;
    right: 20px;
    width: 100px;
}

/* FAQ Accordion Styles (Updated to Green Theme) */
.p-faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-faq-item {
    margin-bottom: 15px;
}

.p-faq-header {
    background-color: #f1f8f5;
    /* 薄い緑色 */
    padding: 20px 50px 20px 20px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    color: var(--color-primary);
    /* 緑文字 */
    transition: background-color 0.3s;
    line-height: 1.5;
}

.p-faq-header:hover {
    background-color: #e0f2f1;
    /* ホバー時の少し濃い緑 */
}

/* Icon (+/-) */
.p-faq-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    /* アイコンも緑 */
}

.p-faq-item.is-open .p-faq-header::after {
    content: '−';
    /* マイナス */
}

/* Open State Style */
.p-faq-item.is-open .p-faq-header {
    border-radius: 10px 10px 0 0;
    background-color: #e0f2f1;
    /* オープン時の緑 */
}

.p-faq-body {
    display: none;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #f1f8f5;
    /* 枠線も薄い緑 */
    border-top: none;
    border-radius: 0 0 10px 10px;
    line-height: 1.6;
}

.p-faq-item.is-open .p-faq-body {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --- TOP PAGE (Redesigned MV) --- */
.p-top__mv {
    height: 600px;
    /* 高さを確保 */
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    /* 垂直中央 */
    justify-content: flex-start;
    /* 左寄せ基準 */
}

/* Slider Background */
.p-top__mv-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

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

/* スライド画像の設定（3枚） */
.p-top__mv-slide:nth-child(1) {
    background-image: url('/assets/images/top_mv_slide_01.jpg');
    animation-delay: 0s;
}

.p-top__mv-slide:nth-child(2) {
    background-image: url('/assets/images/top_mv_slide_02.jpg');
    animation-delay: 5s;
}

.p-top__mv-slide:nth-child(3) {
    background-image: url('/assets/images/top_mv_slide_03.jpg');
    animation-delay: 10s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    5% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* MV Content (Copy & Text) */
.p-top__mv-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    pointer-events: none;
    /* 下の画像をクリック可能にする場合 */
}

/* Copy Style (Balloon-like) */
.p-top__copy-box {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 40px;
    border-radius: 30px;
    /* 丸みを強く */
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 var(--color-sub-yellow);
    max-width: 600px;
    pointer-events: auto;
    position: relative;
}

.p-top__copy {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 10px;
}

.p-top__sub {
    font-size: 1.1rem;
    color: var(--color-text);
    font-weight: bold;
}

/* Character at Bottom Right */
.p-top__mv-char {
    width: 120px;
    right: 10px;
}


/* --- SUB PAGE HERO (Redesigned with Parallax & Animation) --- */
.p-page-fv {
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center 0;
    /* JSで制御するために初期値を設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    /* パララックス効果のための準備 */
    will-change: background-position;
}

/* オーバーレイ（緑のグラデーション） */
.p-page-fv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 152, 119, 0.85), rgba(30, 90, 50, 0.7));
    z-index: 1;
}

/* 背景パターン（ドット） */
.p-page-fv::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 1;
}

.p-page-fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

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

.p-page-fv__en {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 英語ラベルの両サイドに線を引く */
.p-page-fv__en::before,
.p-page-fv__en::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}

.p-page-fv__en::before {
    right: 100%;
    margin-right: 15px;
}

.p-page-fv__en::after {
    left: 100%;
    margin-left: 15px;
}

.p-page-fv__jp {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 下部の波型 */
.p-page-fv__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.p-page-fv__wave svg {
    display: block;
    width: 100%;
    height: 30px;
}

.p-page-fv__wave path {
    fill: #fff;
}

/* Breadcrumbs */
.c-breadcrumbs {
    padding: 15px 20px;
    font-size: 0.85rem;
    color: #888;
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

.c-breadcrumbs a {
    color: #555;
    text-decoration: underline;
}

.c-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

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

@media (max-width: 768px) {
    .p-page-fv {
        height: 250px;
    }

    .p-page-fv__jp {
        font-size: 2rem;
    }

    .c-breadcrumbs {
        text-align: left;
        font-size: 0.75rem;
    }

    /* スマホでは線消す */
    .p-page-fv__en::before,
    .p-page-fv__en::after {
        display: none;
    }
}

/* Service Links Grid */
.p-top__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* PC: 2カラム */
    gap: 30px;
}

@media (max-width: 600px) {
    .p-top__services {
        grid-template-columns: 1fr;
        /* SP: 1カラム */
    }
}

.p-top__service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
    cursor: pointer;
    text-align: center;
    padding-bottom: 30px;
    display: block;
    color: inherit;
    height: 100%;
    /* 高さ揃え */
}

.p-top__service-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-top__service-img {
    width: 100%;
    height: 160px;
    /* アイコン用の高さ */
    object-fit: contain;
    /* 画像全体を表示 */
    background-color: var(--color-bg-gray);
    /* 背景色を薄いグレーに */
    padding: 30px;
    /* 余白 */
}

.p-top__service-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: var(--color-primary);
}

/* Used Copier Section */
.p-top__used {
    background-color: var(--color-sub-yellow);
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* IT Support Pickup Section (New Style based on p-top__used) */
.p-top__pickup-it {
    background-color: var(--color-sub-blue);
    /* ITイメージの青系に変更 */
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* News */
.p-top__news-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-top__news-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: baseline;
}

.p-top__news-date {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 100px;
}

/* --- SUB PAGES (Common) --- */
.p-page-fv {
    height: 300px;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
}

.p-page-fv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.p-page-fv__title {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    font-weight: 700;
}

.p-page-fv__sub {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    margin-top: 10px;
    opacity: 0.9;
}

.p-content-block {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

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

.p-content-block__txt {
    flex: 1;
}

.p-content-block__img {
    flex: 1;
}

.p-content-block__img img {
    border-radius: 20px;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0 var(--color-sub-coral);
    border: 2px solid #333;
}

/* Product Grid & Card Styles */
.p-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.p-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.p-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.p-product-card__img-area {
    width: 100%;
    height: 220px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    position: relative;
}

.p-product-card__img-area img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
}

.p-product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-sub-yellow);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.p-product-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.p-product-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.p-product-card__price {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.p-product-card__price-main {
    font-size: 1.4rem;
    font-weight: bold;
    color: #d32f2f;
}

.p-product-card__price-sub {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

.p-product-specs {
    margin-bottom: 20px;
    font-size: 0.9rem;
    flex: 1;
}

.p-product-specs dt {
    float: left;
    clear: left;
    font-weight: bold;
    margin-right: 0.5em;
    color: #555;
}

.p-product-specs dt::after {
    content: ":";
}

.p-product-specs dd {
    margin-left: 0;
    margin-bottom: 5px;
    color: #333;
}

.p-product-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Feature Box Style */
.p-feature-box {
    background-color: var(--color-sub-yellow);
    padding: 40px;
    border-radius: 20px;
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-feature-box__content {
    flex: 1;
}

.p-feature-box__img {
    flex: 0 0 350px;
    position: relative;
}

.p-feature-img-main {
    width: 100%;
    border-radius: 10px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.p-feature-img-sub {
    width: 55%;
    position: absolute;
    bottom: -20px;
    left: -20px;
    z-index: 2;
    border-radius: 10px;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(-3deg);
}

/* Case Studies */
.p-case-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-case-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.p-case-icon {
    flex: 0 0 100px;
    text-align: center;
}

.p-case-icon img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-sub-blue);
    object-fit: cover;
    background-color: #fff;
}

.p-case-content {
    flex: 1;
}

.p-case-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.p-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    align-items: center;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
}

.p-case-label {
    background-color: var(--color-sub-blue);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 5px;
}

.p-case-text {
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Maker List Styles */
.p-maker-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.p-maker-item {
    width: 200px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
}

.p-maker-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-maker-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-maker-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* License & History */
.p-license-box {
    border: 2px solid var(--color-sub-yellow);
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
}

.p-history-list {
    border-left: 4px solid var(--color-sub-blue);
    padding-left: 30px;
    margin-left: 10px;
}

.p-history-item {
    position: relative;
    margin-bottom: 30px;
}

.p-history-item::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-sub-blue);
}

.p-history-year {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: block;
}

.p-history-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Product Detail (Security) */
.p-product-detail {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-bottom: 40px;
}

.p-product-detail__header {
    border-bottom: 2px solid var(--color-sub-blue);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.p-product-detail__title {
    font-size: 1.6rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 10px;
}

.p-product-detail__sub {
    font-size: 1rem;
    color: #666;
}

.p-product-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: start;
}

.p-feature-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.p-feature-item {
    background: var(--color-bg-gray);
    padding: 15px;
    border-radius: 8px;
}

.p-feature-item__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.p-feature-item__title::before {
    content: '●';
    color: var(--color-sub-yellow);
    margin-right: 8px;
    font-size: 1.2rem;
}

.p-feature-item__text {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Attention Box */
.p-attention-box {
    background-color: #fffcf0;
    border: 3px solid #ffb300;
    border-radius: 15px;
    padding: 40px;
    margin-top: 50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(255, 179, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.p-attention-box::before {
    content: 'POINT';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffb300;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    z-index: 1;
}

.p-attention-char {
    flex: 0 0 150px;
    text-align: center;
}

.p-attention-char img {
    width: 100%;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.1));
}

.p-attention-content {
    flex: 1;
}

.p-attention-title {
    color: #e65100;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
}

.p-attention-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5d4037;
}

/* Feature Card Grid (Small icons for Phone/Solar features) */
.p-feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.p-feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s;
}

.p-feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Feature Card Icon (Updated for SVG) */
.p-feature-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: block;
    fill: var(--color-primary);
    transition: fill 0.3s, transform 0.3s;
}

.p-feature-card:hover .p-feature-card__icon {
    fill: #e65100;
    /* アクセントカラー（オレンジ） */
    transform: scale(1.1);
}

.p-feature-card__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1rem;
}

.p-feature-card__text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
}

/* Strong Point Box */
.p-strong-point {
    background-color: var(--color-sub-blue);
    padding: 40px;
    border-radius: 15px;
    position: relative;
    margin-bottom: 60px;
}

.p-strong-point__title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 30px;
    background: #fff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

/* Maintenance List (Copier) - Updated for Icons */
.p-maintenance-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.p-maintenance-item {
    background: #fff;
    padding: 25px 15px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
    font-weight: bold;
    color: var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
    /* Icon Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 0.95rem;
}

.p-maintenance-icon {
    width: 54px;
    height: 54px;
    fill: var(--color-primary);
    background-color: #f1f8f5;
    /* 薄い緑背景 */
    padding: 12px;
    border-radius: 50%;
}

/* Company Contact */
.p-company__contact {
    background-color: var(--color-bg-gray);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.p-company__methods {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.p-contact-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 250px;
    border: 2px solid var(--color-primary);
}

.c-form-group {
    margin-bottom: 20px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.c-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.c-form-input,
.c-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
}

.c-form-textarea {
    height: 150px;
}

/* Other Service Grid */
.p-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .p-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .l-header {
        padding: 0 20px;
    }

    .l-nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .l-nav.is-open {
        display: block;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .p-top__mv {
        height: auto;
        padding: 100px 0 60px;
    }

    .p-top__copy {
        font-size: 1.8rem;
    }

    .p-content-block {
        flex-direction: column !important;
        gap: 20px;
    }

    .c-heading01 {
        font-size: 1.8rem;
    }

    .c-menu-toggle {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .c-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        position: absolute;
        transition: 0.3s;
    }

    .c-menu-toggle span:nth-child(1) {
        top: 0;
    }

    .c-menu-toggle span:nth-child(2) {
        top: 9px;
    }

    .c-menu-toggle span:nth-child(3) {
        bottom: 0;
    }

    .p-feature-box {
        flex-direction: column;
        padding: 30px;
    }

    .p-feature-box__img {
        flex: auto;
        width: 100%;
        margin-top: 20px;
        padding-left: 20px;
    }

    .p-attention-box {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .p-attention-char {
        flex: 0 0 auto;
        width: 120px;
        margin-bottom: 10px;
    }

    .p-case-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .p-case-meta {
        justify-content: center;
    }

    .p-license-box {
        flex-direction: column;
        text-align: center;
    }

    .p-guide-char--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
    }
}

@media (max-width: 600px) {
    .p-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .c-menu-toggle {
        display: none;
    }
}

/* -----------------------------------------------------------------
           ANIMATION & JS CLASSES
        ----------------------------------------------------------------- */
.is-page-hidden {
    display: none;
    animation: fadeIn 0.5s ease;
}

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

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

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


/* ===== security.html inline styles ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #3F9877;
    /* 指定アクセントカラー */
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-bg-gray: #F9F9F9;
    /* 親しみやすい・カラフルなサブカラー（トリス/レトロポップ風） */
    --color-sub-yellow: #F2EBBF;
    --color-sub-blue: #D3E0EA;
    --color-sub-coral: #F8B195;
    --font-main: 'Rubik', 'Noto Sans JP', sans-serif;
}

html {
    scroll-padding-top: 100px;
    /* ヘッダー固定分のスクロール位置調整 */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-center {
    text-align: center;
}

.u-mb10 {
    margin-bottom: 10px;
}

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

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

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

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

.u-mt20 {
    margin-top: 20px;
}

.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block;
    }

    .u-pc-only {
        display: none;
    }
}

/* Utility for Header Menu (900px breakpoint) */
.u-hidden-pc {
    display: none;
}

@media (max-width: 900px) {
    .u-hidden-pc {
        display: block;
    }
}

/* -----------------------------------------------------------------
           COMPONENT
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    cursor: pointer;
}

.c-btn--line {
    background-color: #06C755;
}

.c-btn--outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Small Buttons */
.c-btn-sm {
    padding: 8px 0;
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

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

.c-btn-sm--outline {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: #fff;
}

/* Headings */
.c-heading01 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    display: inline-block;
}

.c-heading01::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-sub-yellow);
    margin: 10px auto 0;
    border-radius: 2px;
}

.c-heading02 {
    font-size: 1.6rem;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
    background-color: rgba(63, 152, 119, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 10px 10px 0;
}

.c-heading03 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}

/* Illustration placeholder style */
.c-img-frame {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 4px 0px var(--color-sub-yellow);
    border: 2px solid var(--color-text);
    background-color: #fff;
}

/* Form Badge */
.c-label-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}

.c-label-badge--required {
    background-color: #e53935;
}

.c-label-badge--optional {
    background-color: #757575;
}

/* Check List Style */
.c-check-list {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid var(--color-sub-blue);
}

.c-check-list__title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-text);
}

.c-check-list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.c-check-list li {
    position: relative;
    padding-left: 30px;
    font-weight: 700;
}

.c-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    /* SVGのドロップシャドウが見切れないように調整 */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.l-header__inner {
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2%;
    /* 左右の余白を少し詰める */
    height: 90px;
    /* box-shadowは親のfilterで代用するため削除 */
}

/* Header Wave */
.l-header__wave {
    width: 100%;
    line-height: 0;
    background-color: transparent;
    margin-top: -1px;
    /* 隙間防止 */
}

.l-header__wave svg {
    display: block;
    width: 100%;
    height: 15px;
    /* 波の高さを控えめに */
}

.l-header__wave path {
    fill: rgba(255, 255, 255, 0.98);
}

.l-header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 20px;
}

.l-header__logo span {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: normal;
    display: block;
    line-height: 1;
}

/* Nav (Center) - Style updated to match reference "pop" style */
.l-nav {
    flex: 1;
    padding: 0 10px;
}

.l-nav__list {
    display: flex;
    gap: 10px;
    /* 間隔を狭めてカプセル型にしやすく */
    justify-content: center;
    flex-wrap: wrap;
    /* 画面幅によっては折り返し */
}

.l-nav__item a {
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    color: var(--color-text);
    padding: 8px 15px;
    /* カプセル用の余白 */
    border-radius: 30px;
    /* 丸み */
    transition: all 0.3s;
    display: inline-block;
}

/* ホバー時のデザイン変更（下線ではなく背景色） */
.l-nav__item a:hover,
.l-nav__item a.is-active {
    background-color: var(--color-sub-blue);
    /* 親しみやすい水色 */
    color: var(--color-primary);
}

.l-nav__item a::after {
    display: none;
    /* 下線を削除 */
}

/* Header Right (Actions) */
.l-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.l-header__info {
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #666;
}

.l-header__tel {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Contact Button (Updated to look like a tag/sticker) */
.c-btn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    /* 茶色文字で柔らかく */
    padding: 5px 20px;
    width: 140px;
    height: 70px;
    border-radius: 10px 10px 10px 10px;
    /* 少し角丸 */
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: 2px solid #fff;
    /* 白枠でポップに */
    line-height: 1.2;
    position: relative;
}

.c-btn-header span {
    font-size: 0.7rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
    opacity: 0.8;
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    opacity: 1;
    background-color: #ffe082;
}

.c-btn-header::before {
    display: none;
    /* アイコン削除 */
}

/* ボタンの上に「WEB受付」のようなバッジをつける */
.c-btn-header::after {
    content: 'WEB受付';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.l-main {
    padding-top: 110px;
    /* Header height (90 + 20) */
    min-height: 80vh;
}

/* Responsive Header */
@media (max-width: 1100px) {

    /* 画面幅が狭いときは電話番号を非表示にしてスッキリさせる */
    .l-header__info {
        display: none;
    }
}

@media (max-width: 900px) {
    .l-nav {
        display: none;
    }

    /* PCメニュー非表示 */
    .l-header__info {
        display: none;
    }

    /* 電話番号非表示 */

    .l-header__inner {
        height: 70px;
        padding: 10px 15px;
    }

    .l-header__actions {
        margin-right: 45px;
        /* ハンバーガーメニュー分の余白 */
        /* スマホ・タブレット時はヘッダー上のボタンを非表示にするため display: none を追加してもよいが、
                   .c-btn-header クラス側で制御する */
    }

    /* SP用のお問い合わせボタン制御 */
    .c-btn-header {
        display: none;
        /* ヘッダー上では非表示にする */
    }

    /* Mobile Nav Overlay */
    .l-nav.is-open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        padding: 40px 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .l-nav__item a {
        font-size: 1.1rem;
        padding: 15px;
        width: 100%;
        text-align: center;
        background-color: var(--color-bg-gray);
    }
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

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

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

/* -----------------------------------------------------------------
           NEW FOOTER STYLES (WAVE DESIGN)
        ----------------------------------------------------------------- */
/* Map Section (Placed above footer) */
.l-footer-map {
    height: 400px;
    width: 100%;
    background-color: #ddd;
    margin-bottom: -5px;
    /* adjust for gap */
}

.l-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.2);
}

/* Footer Container */
.l-footer-custom {
    background-color: var(--color-sub-yellow);
    /* 親しみやすい黄色背景 */
    color: var(--color-text);
    position: relative;
    padding-bottom: 20px;
}

/* Wave SVG */
.l-footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
    /* 波を上向きに */
    margin-top: -1px;
}

.l-footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.l-footer-wave path {
    fill: var(--color-sub-yellow);
}

/* Footer Main Content */
.l-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
}

/* Left Side: Logo & Info */
.l-footer-left {
    flex: 1;
    min-width: 300px;
}

.l-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.l-footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
}

.l-footer-tel {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0;
    display: block;
}

/* Right Side: Nav Links */
.l-footer-right {
    flex: 1;
    min-width: 300px;
    position: relative;
    /* キャラクター配置の基準 */
}

.l-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    position: relative;
    z-index: 2;
}

.l-footer-nav-item a {
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-left: 15px;
    display: block;
    transition: color 0.3s;
}

.l-footer-nav-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.l-footer-nav-item a::before {
    content: '●';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

/* Footer Character */
.p-footer-char {
    position: absolute;
    bottom: -20px;
    right: 0px;
    width: 120px;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.5));
    pointer-events: none;
    /* リンクの邪魔にならないように */
    z-index: 1;
}

/* Bottom Buttons (CTA) - Adjusted for Top Position */
.l-footer-buttons {
    display: grid;
    /* タブレットまでは絶対3カラムを維持 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    /* 下線に変更 */
}

.l-footer-btn-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.l-footer-btn-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Icon Style for Flat Design (New) */
.l-footer-btn-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    fill: var(--color-primary);
    /* テーマカラーで統一 */
    transition: fill 0.3s;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg {
    fill: var(--color-sub-yellow);
    /* ホバー時にアクセントカラーへ */
}

/* LINE Icon Color Override */
.l-footer-btn-icon-svg--line {
    fill: #06C755;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg--line {
    fill: #05b54b;
}

/* -----------------------------------------------------------------
           FLAT ICON STYLES (New Section Icons)
        ----------------------------------------------------------------- */
.c-flat-icon {
    width: 80px;
    height: 80px;
    fill: var(--color-primary);
    transition: transform 0.3s, fill 0.3s;
    /* 少し立体感を出す場合 */
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.05));
}

.c-flat-icon:hover {
    transform: scale(1.1);
    fill: #e65100;
    /* ホバーでアクセント色（オレンジ）に */
}

/* 配置バリエーション */
.c-flat-icon--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* 絶対配置（カード右上など）用 */
.c-flat-icon--abs-top-right {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    fill: var(--color-primary);
    z-index: 2;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .c-flat-icon--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
        background: transparent;
        box-shadow: none;
        padding: 0;
        width: 60px;
        height: 60px;
    }

    .c-flat-icon--right,
    .c-flat-icon--left {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }
}

.l-footer-btn-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.l-footer-btn-sub {
    font-size: 0.85rem;
    color: #666;
}

/* Copyright */
.l-footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

/* Group Links removed */

@media (max-width: 768px) {
    .l-footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .l-footer-nav-list {
        grid-template-columns: 1fr;
        /* スマホは1列 */
    }

    /* スマホで1カラムに変更 */
    .l-footer-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .p-footer-char {
        position: relative;
        bottom: auto;
        right: auto;
        float: right;
        margin-top: -60px;
        /* ナビの下から少し上に重ねる */
        width: 100px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------------
           PAGES (Block: p-)
        ----------------------------------------------------------------- */

/* Guide Character (General) */
.p-guide-char {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
}

.p-guide-char:hover {
    transform: scale(1.1) rotate(-5deg);
}

.p-guide-char--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.p-guide-char--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.p-guide-char--abs-top-right {
    position: absolute;
    top: -40px;
    right: 20px;
    width: 100px;
}

/* FAQ Accordion Styles (Updated to Green Theme) */
.p-faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-faq-item {
    margin-bottom: 15px;
}

.p-faq-header {
    background-color: #f1f8f5;
    /* 薄い緑色 */
    padding: 20px 50px 20px 20px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    color: var(--color-primary);
    /* 緑文字 */
    transition: background-color 0.3s;
    line-height: 1.5;
}

.p-faq-header:hover {
    background-color: #e0f2f1;
    /* ホバー時の少し濃い緑 */
}

/* Icon (+/-) */
.p-faq-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    /* アイコンも緑 */
}

.p-faq-item.is-open .p-faq-header::after {
    content: '−';
    /* マイナス */
}

/* Open State Style */
.p-faq-item.is-open .p-faq-header {
    border-radius: 10px 10px 0 0;
    background-color: #e0f2f1;
    /* オープン時の緑 */
}

.p-faq-body {
    display: none;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #f1f8f5;
    /* 枠線も薄い緑 */
    border-top: none;
    border-radius: 0 0 10px 10px;
    line-height: 1.6;
}

.p-faq-item.is-open .p-faq-body {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --- TOP PAGE (Redesigned MV) --- */
.p-top__mv {
    height: 600px;
    /* 高さを確保 */
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    /* 垂直中央 */
    justify-content: flex-start;
    /* 左寄せ基準 */
}

/* Slider Background */
.p-top__mv-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

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

/* スライド画像の設定（3枚） */
.p-top__mv-slide:nth-child(1) {
    background-image: url('/assets/images/top_mv_slide_01.jpg');
    animation-delay: 0s;
}

.p-top__mv-slide:nth-child(2) {
    background-image: url('/assets/images/top_mv_slide_02.jpg');
    animation-delay: 5s;
}

.p-top__mv-slide:nth-child(3) {
    background-image: url('/assets/images/top_mv_slide_03.jpg');
    animation-delay: 10s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    5% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* MV Content (Copy & Text) */
.p-top__mv-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    pointer-events: none;
    /* 下の画像をクリック可能にする場合 */
}

/* Copy Style (Balloon-like) */
.p-top__copy-box {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 40px;
    border-radius: 30px;
    /* 丸みを強く */
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 var(--color-sub-yellow);
    max-width: 600px;
    pointer-events: auto;
    position: relative;
}


.p-top__copy {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 10px;
}

.p-top__sub {
    font-size: 1.1rem;
    color: var(--color-text);
    font-weight: bold;
}

/* Character at Bottom Right */
.p-top__mv-char {
    width: 120px;
    right: 10px;
}


/* --- SUB PAGE HERO (Redesigned with Parallax & Animation) --- */
.p-page-fv {
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center 0;
    /* JSで制御するために初期値を設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    /* パララックス効果のための準備 */
    will-change: background-position;
}

/* オーバーレイ（緑のグラデーション） */
.p-page-fv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 152, 119, 0.85), rgba(30, 90, 50, 0.7));
    z-index: 1;
}

/* 背景パターン（ドット） */
.p-page-fv::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 1;
}

.p-page-fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

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

.p-page-fv__en {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 英語ラベルの両サイドに線を引く */
.p-page-fv__en::before,
.p-page-fv__en::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}

.p-page-fv__en::before {
    right: 100%;
    margin-right: 15px;
}

.p-page-fv__en::after {
    left: 100%;
    margin-left: 15px;
}

.p-page-fv__jp {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 下部の波型 */
.p-page-fv__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.p-page-fv__wave svg {
    display: block;
    width: 100%;
    height: 30px;
}

.p-page-fv__wave path {
    fill: #fff;
}

/* Breadcrumbs */
.c-breadcrumbs {
    padding: 15px 20px;
    font-size: 0.85rem;
    color: #888;
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

.c-breadcrumbs a {
    color: #555;
    text-decoration: underline;
}

.c-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

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

@media (max-width: 768px) {
    .p-page-fv {
        height: 250px;
    }

    .p-page-fv__jp {
        font-size: 2rem;
    }

    .c-breadcrumbs {
        text-align: left;
        font-size: 0.75rem;
    }

    /* スマホでは線消す */
    .p-page-fv__en::before,
    .p-page-fv__en::after {
        display: none;
    }
}

/* Service Links Grid */
.p-top__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* PC: 2カラム */
    gap: 30px;
}

@media (max-width: 600px) {
    .p-top__services {
        grid-template-columns: 1fr;
        /* SP: 1カラム */
    }
}

.p-top__service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
    cursor: pointer;
    text-align: center;
    padding-bottom: 30px;
    display: block;
    color: inherit;
    height: 100%;
    /* 高さ揃え */
}

.p-top__service-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-top__service-img {
    width: 100%;
    height: 160px;
    /* アイコン用の高さ */
    object-fit: contain;
    /* 画像全体を表示 */
    background-color: var(--color-bg-gray);
    /* 背景色を薄いグレーに */
    padding: 30px;
    /* 余白 */
}

.p-top__service-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: var(--color-primary);
}

/* Used Copier Section */
.p-top__used {
    background-color: var(--color-sub-yellow);
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* IT Support Pickup Section (New Style based on p-top__used) */
.p-top__pickup-it {
    background-color: var(--color-sub-blue);
    /* ITイメージの青系に変更 */
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* News */
.p-top__news-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-top__news-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: baseline;
}

.p-top__news-date {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 100px;
}

/* --- SUB PAGES (Common) --- */
.p-page-fv {
    height: 300px;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
}

.p-page-fv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.p-page-fv__title {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    font-weight: 700;
}

.p-page-fv__sub {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    margin-top: 10px;
    opacity: 0.9;
}

.p-content-block {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

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

.p-content-block__txt {
    flex: 1;
}

.p-content-block__img {
    flex: 1;
}

.p-content-block__img img {
    border-radius: 20px;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0 var(--color-sub-coral);
    border: 2px solid #333;
}

/* Product Grid & Card Styles */
.p-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.p-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.p-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.p-product-card__img-area {
    width: 100%;
    height: 220px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    position: relative;
}

.p-product-card__img-area img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
}

.p-product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-sub-yellow);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.p-product-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.p-product-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.p-product-card__price {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.p-product-card__price-main {
    font-size: 1.4rem;
    font-weight: bold;
    color: #d32f2f;
}

.p-product-card__price-sub {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

.p-product-specs {
    margin-bottom: 20px;
    font-size: 0.9rem;
    flex: 1;
}

.p-product-specs dt {
    float: left;
    clear: left;
    font-weight: bold;
    margin-right: 0.5em;
    color: #555;
}

.p-product-specs dt::after {
    content: ":";
}

.p-product-specs dd {
    margin-left: 0;
    margin-bottom: 5px;
    color: #333;
}

.p-product-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Feature Box Style */
.p-feature-box {
    background-color: var(--color-sub-yellow);
    padding: 40px;
    border-radius: 20px;
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.p-feature-box__content {
    flex: 1;
}

.p-feature-box__img {
    flex: 0 0 350px;
    position: relative;
}

.p-feature-img-main {
    width: 100%;
    border-radius: 10px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.p-feature-img-sub {
    width: 55%;
    position: absolute;
    bottom: -20px;
    left: -20px;
    z-index: 2;
    border-radius: 10px;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(-3deg);
}

/* Case Studies */
.p-case-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-case-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.p-case-icon {
    flex: 0 0 100px;
    text-align: center;
}

.p-case-icon img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-sub-blue);
    object-fit: cover;
    background-color: #fff;
}

.p-case-content {
    flex: 1;
}

.p-case-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.p-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    align-items: center;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
}

.p-case-label {
    background-color: var(--color-sub-blue);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 5px;
}

.p-case-text {
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Maker List Styles */
.p-maker-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.p-maker-item {
    width: 200px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
}

.p-maker-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-maker-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-maker-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* License & History */
.p-license-box {
    border: 2px solid var(--color-sub-yellow);
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
}

.p-history-list {
    border-left: 4px solid var(--color-sub-blue);
    padding-left: 30px;
    margin-left: 10px;
}

.p-history-item {
    position: relative;
    margin-bottom: 30px;
}

.p-history-item::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-sub-blue);
}

.p-history-year {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: block;
}

.p-history-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Product Detail (Security) */
.p-product-detail {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-bottom: 40px;
}

.p-product-detail__header {
    border-bottom: 2px solid var(--color-sub-blue);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.p-product-detail__title {
    font-size: 1.6rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 10px;
}

.p-product-detail__sub {
    font-size: 1rem;
    color: #666;
}

.p-product-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: start;
}

.p-feature-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.p-feature-item {
    background: var(--color-bg-gray);
    padding: 15px;
    border-radius: 8px;
}

.p-feature-item__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.p-feature-item__title::before {
    content: '●';
    color: var(--color-sub-yellow);
    margin-right: 8px;
    font-size: 1.2rem;
}

.p-feature-item__text {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Attention Box */
.p-attention-box {
    background-color: #fffcf0;
    border: 3px solid #ffb300;
    border-radius: 15px;
    padding: 40px;
    margin-top: 50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(255, 179, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.p-attention-box::before {
    content: 'POINT';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffb300;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    z-index: 1;
}

.p-attention-char {
    flex: 0 0 150px;
    text-align: center;
}

.p-attention-char img {
    width: 100%;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.1));
}

.p-attention-content {
    flex: 1;
}

.p-attention-title {
    color: #e65100;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
}

.p-attention-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5d4037;
}

/* Feature Card Grid (Small icons for Phone/Solar features) */
.p-feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.p-feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s;
}

.p-feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Feature Card Icon (Updated for SVG) */
.p-feature-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: block;
    fill: var(--color-primary);
    transition: fill 0.3s, transform 0.3s;
}

.p-feature-card:hover .p-feature-card__icon {
    fill: #e65100;
    /* アクセントカラー（オレンジ） */
    transform: scale(1.1);
}

.p-feature-card__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1rem;
}

.p-feature-card__text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
}

/* Strong Point Box */
.p-strong-point {
    background-color: var(--color-sub-blue);
    padding: 40px;
    border-radius: 15px;
    position: relative;
    margin-bottom: 60px;
}

.p-strong-point__title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 30px;
    background: #fff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

/* Maintenance List (Copier) */
.p-maintenance-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.p-maintenance-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
    font-weight: bold;
    color: var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
}

/* Company Contact */
.p-company__contact {
    background-color: var(--color-bg-gray);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.p-company__methods {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.p-contact-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 250px;
    border: 2px solid var(--color-primary);
}

.c-form-group {
    margin-bottom: 20px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.c-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.c-form-input,
.c-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
}

.c-form-textarea {
    height: 150px;
}

/* Other Service Grid */
.p-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .p-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .l-header {
        padding: 0 20px;
    }

    .l-nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .l-nav.is-open {
        display: block;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .p-top__mv {
        height: auto;
        padding: 100px 0 60px;
    }

    .p-top__copy {
        font-size: 1.8rem;
    }

    .p-content-block {
        flex-direction: column !important;
        gap: 20px;
    }

    .c-heading01 {
        font-size: 1.8rem;
    }

    .c-menu-toggle {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .c-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        position: absolute;
        transition: 0.3s;
    }

    .c-menu-toggle span:nth-child(1) {
        top: 0;
    }

    .c-menu-toggle span:nth-child(2) {
        top: 9px;
    }

    .c-menu-toggle span:nth-child(3) {
        bottom: 0;
    }

    .p-feature-box {
        flex-direction: column;
        padding: 30px;
    }

    .p-feature-box__img {
        flex: auto;
        width: 100%;
        margin-top: 20px;
        padding-left: 20px;
    }

    .p-attention-box {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .p-attention-char {
        flex: 0 0 auto;
        width: 120px;
        margin-bottom: 10px;
    }

    .p-case-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .p-case-meta {
        justify-content: center;
    }

    .p-license-box {
        flex-direction: column;
        text-align: center;
    }

    .p-guide-char--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
    }
}

@media (max-width: 600px) {
    .p-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .c-menu-toggle {
        display: none;
    }
}

/* -----------------------------------------------------------------
           ANIMATION & JS CLASSES
        ----------------------------------------------------------------- */
.is-page-hidden {
    display: none;
    animation: fadeIn 0.5s ease;
}

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

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

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


/* ===== company.html inline styles ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #3F9877;
    /* 指定アクセントカラー */
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-bg-gray: #F9F9F9;
    /* 親しみやすい・カラフルなサブカラー（トリス/レトロポップ風） */
    --color-sub-yellow: #F2EBBF;
    --color-sub-blue: #D3E0EA;
    --color-sub-coral: #F8B195;
    --font-main: 'Rubik', 'Noto Sans JP', sans-serif;
}

html {
    scroll-padding-top: 100px;
    /* ヘッダー固定分のスクロール位置調整 */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-center {
    text-align: center;
}

.u-mb10 {
    margin-bottom: 10px;
}

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

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

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

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

.u-mt20 {
    margin-top: 20px;
}

.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block;
    }

    .u-pc-only {
        display: none;
    }
}

/* Utility for Header Menu (900px breakpoint) */
.u-hidden-pc {
    display: none;
}

@media (max-width: 900px) {
    .u-hidden-pc {
        display: block;
    }
}

/* -----------------------------------------------------------------
           COMPONENT
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    cursor: pointer;
}

.c-btn--line {
    background-color: #06C755;
}

.c-btn--outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Headings */
.c-heading01 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    display: inline-block;
}

.c-heading01::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-sub-yellow);
    margin: 10px auto 0;
    border-radius: 2px;
}

.c-heading02 {
    font-size: 1.6rem;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
    background-color: rgba(63, 152, 119, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 10px 10px 0;
}

.c-heading03 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}

/* Illustration placeholder style */
.c-img-frame {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 4px 0px var(--color-sub-yellow);
    border: 2px solid var(--color-text);
    background-color: #fff;
}

/* Form Badge */
.c-label-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}

.c-label-badge--required {
    background-color: #e53935;
}

.c-label-badge--optional {
    background-color: #757575;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.l-header__inner {
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2%;
    height: 90px;
}

/* Header Wave */
.l-header__wave {
    width: 100%;
    line-height: 0;
    background-color: transparent;
    margin-top: -1px;
}

.l-header__wave svg {
    display: block;
    width: 100%;
    height: 15px;
}

.l-header__wave path {
    fill: rgba(255, 255, 255, 0.98);
}

.l-header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 20px;
}

.l-header__logo span {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: normal;
    display: block;
    line-height: 1;
}

/* Nav (Center) */
.l-nav {
    flex: 1;
    padding: 0 10px;
}

.l-nav__list {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.l-nav__item a {
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    color: var(--color-text);
    padding: 8px 15px;
    border-radius: 30px;
    transition: all 0.3s;
    display: inline-block;
}

.l-nav__item a:hover,
.l-nav__item a.is-active {
    background-color: var(--color-sub-blue);
    color: var(--color-primary);
}

/* Header Right (Actions) */
.l-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.l-header__info {
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #666;
}

.l-header__tel {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Contact Button */
.c-btn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    padding: 5px 20px;
    width: 140px;
    height: 70px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: 2px solid #fff;
    line-height: 1.2;
    position: relative;
}

.c-btn-header span {
    font-size: 0.7rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
    opacity: 0.8;
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    opacity: 1;
    background-color: #ffe082;
}

.c-btn-header::after {
    content: 'WEB受付';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.l-main {
    padding-top: 110px;
    min-height: 80vh;
}

/* Responsive Header */
@media (max-width: 1100px) {
    .l-header__info {
        display: none;
    }
}

@media (max-width: 900px) {
    .l-nav {
        display: none;
    }

    .l-header__info {
        display: none;
    }

    .l-header__inner {
        height: 70px;
        padding: 10px 15px;
    }

    .l-header__actions {
        margin-right: 45px;
    }

    .c-btn-header {
        display: none;
    }

    .l-nav.is-open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        padding: 40px 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .l-nav__item a {
        font-size: 1.1rem;
        padding: 15px;
        width: 100%;
        text-align: center;
        background-color: var(--color-bg-gray);
    }
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

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

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

/* -----------------------------------------------------------------
           NEW FOOTER STYLES (WAVE DESIGN)
        ----------------------------------------------------------------- */
.l-footer-map {
    height: 400px;
    width: 100%;
    background-color: #ddd;
    margin-bottom: -5px;
}

.l-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.2);
}

.l-footer-custom {
    background-color: var(--color-sub-yellow);
    color: var(--color-text);
    position: relative;
    padding-bottom: 20px;
}

.l-footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
    margin-top: -1px;
}

.l-footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.l-footer-wave path {
    fill: var(--color-sub-yellow);
}

.l-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
}

.l-footer-left {
    flex: 1;
    min-width: 300px;
}

.l-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.l-footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
}

.l-footer-tel {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0;
    display: block;
}

.l-footer-right {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.l-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    position: relative;
    z-index: 2;
}

.l-footer-nav-item a {
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-left: 15px;
    display: block;
    transition: color 0.3s;
}

.l-footer-nav-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.l-footer-nav-item a::before {
    content: '●';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

.p-footer-char {
    position: absolute;
    bottom: -20px;
    right: 0px;
    width: 120px;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.5));
    pointer-events: none;
    z-index: 1;
}

.l-footer-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.l-footer-btn-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.l-footer-btn-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.l-footer-btn-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    fill: var(--color-primary);
    transition: fill 0.3s;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg {
    fill: var(--color-sub-yellow);
}

.l-footer-btn-icon-svg--line {
    fill: #06C755;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg--line {
    fill: #05b54b;
}

.l-footer-btn-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.l-footer-btn-sub {
    font-size: 0.85rem;
    color: #666;
}

.l-footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

@media (max-width: 768px) {
    .l-footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .l-footer-nav-list {
        grid-template-columns: 1fr;
    }

    .l-footer-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .p-footer-char {
        position: relative;
        bottom: auto;
        right: auto;
        float: right;
        margin-top: -60px;
        width: 100px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------------
           PAGES (Block: p-)
        ----------------------------------------------------------------- */

/* Guide Character */
.p-guide-char {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
}

.p-guide-char:hover {
    transform: scale(1.1) rotate(-5deg);
}

/* --- SUB PAGE HERO --- */
.p-page-fv {
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    will-change: background-position;
}

.p-page-fv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 152, 119, 0.85), rgba(30, 90, 50, 0.7));
    z-index: 1;
}

.p-page-fv::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 1;
}

.p-page-fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

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

.p-page-fv__en {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.p-page-fv__en::before,
.p-page-fv__en::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}

.p-page-fv__en::before {
    right: 100%;
    margin-right: 15px;
}

.p-page-fv__en::after {
    left: 100%;
    margin-left: 15px;
}

.p-page-fv__jp {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.p-page-fv__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.p-page-fv__wave svg {
    display: block;
    width: 100%;
    height: 30px;
}

.p-page-fv__wave path {
    fill: #fff;
}

/* Breadcrumbs */
.c-breadcrumbs {
    padding: 15px 20px;
    font-size: 0.85rem;
    color: #888;
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

.c-breadcrumbs a {
    color: #555;
    text-decoration: underline;
}

.c-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

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

@media (max-width: 768px) {
    .p-page-fv {
        height: 250px;
    }

    .p-page-fv__jp {
        font-size: 2rem;
    }

    .c-breadcrumbs {
        text-align: left;
        font-size: 0.75rem;
    }

    .p-page-fv__en::before,
    .p-page-fv__en::after {
        display: none;
    }
}

/* Common Page Elements */
.p-content-block {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

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

.p-content-block__txt {
    flex: 1;
}

.p-content-block__img {
    flex: 1;
}

.p-content-block__img img {
    border-radius: 20px;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0 var(--color-sub-coral);
    border: 2px solid #333;
}

/* Maker List */
.p-maker-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.p-maker-item {
    width: 200px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
}

.p-maker-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-maker-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-maker-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* License & History (Fixed & Unified) */
.p-license-box {
    border: 2px solid var(--color-sub-yellow);
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* History Timeline Animation Style */
.p-history-list {
    position: relative;
    padding-left: 30px;
    margin-left: 10px;
}

/* 親要素のフェードイン設定をリセット（中身の遅延表示に任せる） */
.p-history-list.js-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
}

/* History Item */
.p-history-item {
    position: relative;
    margin-bottom: 40px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 20px;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}

.p-history-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.p-history-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Timeline Dot (丸) */
.p-history-item::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 3px solid #fff;
    /* 線を隠すための白フチ */
    box-shadow: 0 0 0 1px var(--color-sub-blue);
    z-index: 2;
    /* 線より上に表示 */

    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Timeline Line (線) - 各アイテムから下に伸ばす */
.p-history-item::after {
    content: '';
    position: absolute;
    left: -33px;
    top: 22px;
    width: 4px;
    height: calc(100% + 20px);
    background-color: var(--color-sub-blue);
    border-radius: 2px;
    z-index: 1;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s linear 0.4s;
}

/* 最後のアイテムからは線を伸ばさない */
.p-history-item:last-child::after {
    display: none;
}

/* 表示されたら丸を拡大し、線を伸ばす */
.p-history-item.is-visible::before {
    transform: scale(1);
}

.p-history-item.is-visible::after {
    transform: scaleY(1);
}

/* Content & Image */
.p-history-content {
    flex: 1;
}

.p-history-year {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: block;
}

.p-history-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.p-history-img {
    flex: 0 0 160px;
    width: 160px;
}

.p-history-img img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    background-color: #f9f9f9;
}

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

@media (max-width: 768px) {
    .p-history-item {
        flex-direction: column;
    }

    .p-history-img {
        flex: auto;
        width: 100%;
        max-width: 240px;
        margin-top: 10px;
    }

    .p-history-img img {
        height: 150px;
    }
}

/* Stagger Delays */
.p-history-list.is-visible .p-history-item:nth-child(1) {
    transition-delay: 0s;
}

.p-history-list.is-visible .p-history-item:nth-child(2) {
    transition-delay: 0.3s;
}

.p-history-list.is-visible .p-history-item:nth-child(3) {
    transition-delay: 0.6s;
}

.p-history-list.is-visible .p-history-item:nth-child(4) {
    transition-delay: 0.9s;
}

.p-history-list.is-visible .p-history-item:nth-child(5) {
    transition-delay: 1.2s;
}

.p-history-list.is-visible .p-history-item:nth-child(6) {
    transition-delay: 1.5s;
}

.p-history-list.is-visible .p-history-item:nth-child(7) {
    transition-delay: 1.8s;
}

.p-history-list.is-visible .p-history-item:nth-child(8) {
    transition-delay: 2.1s;
}

.p-history-list.is-visible .p-history-item:nth-child(9) {
    transition-delay: 2.4s;
}

.p-history-list.is-visible .p-history-item:nth-child(10) {
    transition-delay: 2.7s;
}

.p-history-list.is-visible .p-history-item:nth-child(n+11) {
    transition-delay: 3.0s;
}

/* Company Contact */
.p-company__contact {
    background-color: var(--color-bg-gray);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.c-form-group {
    margin-bottom: 20px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.c-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.c-form-input,
.c-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
}

.c-form-textarea {
    height: 150px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .l-header {
        padding: 0 20px;
    }

    .p-content-block {
        flex-direction: column !important;
        gap: 20px;
    }

    .c-heading01 {
        font-size: 1.8rem;
        line-height: 1.5;
    }

    .c-menu-toggle {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .c-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        position: absolute;
        transition: 0.3s;
    }

    .c-menu-toggle span:nth-child(1) {
        top: 0;
    }

    .c-menu-toggle span:nth-child(2) {
        top: 9px;
    }

    .c-menu-toggle span:nth-child(3) {
        bottom: 0;
    }

    .p-license-box {
        flex-direction: column;
        text-align: center;
    }
}

@media (min-width: 769px) {
    .c-menu-toggle {
        display: none;
    }
}

/* -----------------------------------------------------------------
           ANIMATION & JS CLASSES
        ----------------------------------------------------------------- */
.is-page-hidden {
    display: none;
    animation: fadeIn 0.5s ease;
}

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

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

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

/* Smooth Scroll Fade In Animation */
.js-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.js-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for list items */
.js-fade-in-delay-1 {
    transition-delay: 0.1s;
}

.js-fade-in-delay-2 {
    transition-delay: 0.2s;
}

.js-fade-in-delay-3 {
    transition-delay: 0.3s;
}

/* Page Anchor Nav (Brushed Up) */
.p-page-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 80px;
    /* 余白を広げてゆとりを持たせる */
    padding: 0 10px;
}

.p-page-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: #fff;
    border: 1px solid var(--color-primary);
    /* 清潔感のある細いボーダー */
    color: var(--color-primary);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    min-width: 160px;
    /* 幅を統一して整列 */
    position: relative;
}

/* 下向き矢印アイコンを追加 */
.p-page-nav__link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 12px;
    margin-top: -3px;
    /* 視覚調整 */
    transition: transform 0.3s;
}

.p-page-nav__link:hover {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(63, 152, 119, 0.25);
}

/* ホバー時に矢印が少し動くアニメーション */
.p-page-nav__link:hover::after {
    transform: rotate(45deg) translate(2px, 2px);
    border-color: #fff;
}

/* お問い合わせボタン用バリエーション */
.p-page-nav__link--contact {
    background-color: #3f9877;
    border-color: #3f9877;
    color: #5d4037;
    color: #fff;
}

.p-page-nav__link--contact::after {
    border-color: #ffffff;
    /* 矢印の色調整 */
}

.p-page-nav__link--contact:hover {
    background-color: #97e0b5;
    border-color: #b8e9cc;
    color: #ffffff;
}

.p-page-nav__link--contact:hover::after {
    border-color: #ffffff;
}

/* Company Table Style (Refined) */
.p-company-table {
    width: 100%;
    border-collapse: separate;
    /* 角丸のためにseparateに変更 */
    border-spacing: 0;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
}

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

.p-company-table th {
    width: 30%;
    background-color: #f7fcfa;
    /* 薄いグリーンの背景 */
    font-weight: bold;
    color: var(--color-primary);
    border-right: 1px solid #eee;
}

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

/* アンカーリンク位置調整 */
section[id] {
    scroll-margin-top: 120px;
}

@media (max-width: 768px) {
    .p-page-nav {
        gap: 10px;
        margin-bottom: 60px;
    }

    .p-page-nav__link {
        padding: 10px 15px;
        font-size: 0.85rem;
        min-width: auto;
        flex: 1 1 45%;
        /* スマホでは2列配置 */
        text-align: center;
    }

    .p-company-table th,
    .p-company-table td {
        display: block;
        width: 100%;
        border-right: none;
    }

    .p-company-table th {
        background-color: #f0f0f0;
        padding: 7px 15px;
    }

    .p-company-table td {
        padding: 7px 15px;
    }
}


/* ===== others.html inline styles ===== */
/* -----------------------------------------------------------------
           RESET & BASE
        ----------------------------------------------------------------- */
:root {
    --color-primary: #3F9877;
    /* 指定アクセントカラー */
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-bg-gray: #F9F9F9;
    /* 親しみやすい・カラフルなサブカラー（トリス/レトロポップ風） */
    --color-sub-yellow: #F2EBBF;
    --color-sub-blue: #D3E0EA;
    --color-sub-coral: #F8B195;
    --font-main: 'Rubik', 'Noto Sans JP', sans-serif;
}

html {
    scroll-padding-top: 100px;
    /* ヘッダー固定分のスクロール位置調整 */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: var(--color-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

a:hover {
    opacity: 0.7;
}

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------------
           UTILITY
        ----------------------------------------------------------------- */
.u-center {
    text-align: center;
}

.u-mb10 {
    margin-bottom: 10px;
}

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

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

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

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

.u-mt20 {
    margin-top: 20px;
}

.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block;
    }

    .u-pc-only {
        display: none;
    }
}

/* Utility for Header Menu (900px breakpoint) */
.u-hidden-pc {
    display: none;
}

@media (max-width: 900px) {
    .u-hidden-pc {
        display: block;
    }
}

/* -----------------------------------------------------------------
           COMPONENT
        ----------------------------------------------------------------- */
/* Buttons */
.c-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    cursor: pointer;
}

.c-btn--line {
    background-color: #06C755;
}

.c-btn--outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Small Buttons */
.c-btn-sm {
    padding: 8px 0;
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

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

.c-btn-sm--outline {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: #fff;
}

/* Headings */
.c-heading01 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    position: relative;
    text-align: center;
    display: inline-block;
    display: flex;
    margin-bottom: 3rem;
}
.c-heading01::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-sub-yellow);
    margin: 10px auto 0;
    border-radius: 2px;
}

.l-footer-custom .c-heading01::after {
    background-color: #fff;
}
.c-heading02 {
    font-size: 1.6rem;
    font-weight: 700;
    border-left: 6px solid var(--color-primary);
    padding-left: 15px;
    margin-bottom: 30px;
    background-color: rgba(63, 152, 119, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 10px 10px 0;
}

.c-heading03 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}
/* Illustration placeholder style */
.c-img-frame {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 4px 0px var(--color-sub-yellow);
    border: 2px solid var(--color-text);
    background-color: #fff;
}

/* Form Badge */
.c-label-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}

.c-label-badge--required {
    background-color: #e53935;
}

.c-label-badge--optional {
    background-color: #757575;
}

/* Check List Style */
.c-check-list {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid var(--color-sub-blue);
}

.c-check-list__title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-text);
}

.c-check-list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.c-check-list li {
    position: relative;
    padding-left: 30px;
    font-weight: 700;
}

.c-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
           LAYOUT (Block: l-)
        ----------------------------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    /* SVGのドロップシャドウが見切れないように調整 */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.l-header__inner {
    background-color: #ffffff00;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2%;
    height: 90px;
    color: #333;
}
span.l-header__time {
    color: #333!important;
    text-align: center;
}
/* Header Wave */
.l-header__wave {
    width: 100%;
    line-height: 0;
    background-color: transparent;
    margin-top: -1px;
    /* 隙間防止 */
}

.l-header__wave svg {
    display: block;
    width: 100%;
    height: 15px;
    /* 波の高さを控えめに */
}

.l-header__wave path {
    fill: rgba(255, 255, 255, 0.98);
}

.l-header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 20px;
}

.l-header__logo span {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: normal;
    display: block;
    line-height: 1;
}

/* Nav (Center) - Style updated to match reference "pop" style */
.l-nav {
    flex: 1;
    padding: 0 10px;
}

.l-nav__list {
    display: flex;
    gap: 10px;
    /* 間隔を狭めてカプセル型にしやすく */
    justify-content: center;
    flex-wrap: wrap;
    /* 画面幅によっては折り返し */
}

.l-nav__item a {
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    color: var(--color-text);
    padding: 8px 15px;
    /* カプセル用の余白 */
    border-radius: 30px;
    /* 丸み */
    transition: all 0.3s;
    display: inline-block;
}

/* ホバー時のデザイン変更（下線ではなく背景色） */
.l-nav__item a:hover,
.l-nav__item a.is-active {
    background-color: var(--color-sub-blue);
    /* 親しみやすい水色 */
    color: var(--color-primary);
}

.l-nav__item a::after {
    display: none;
    /* 下線を削除 */
}

/* Header Right (Actions) */
.l-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.l-header__info {
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #666;
}

.l-header__tel {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Contact Button (Updated to look like a tag/sticker) */
.c-btn-header {
    /* display: none!important; */
    display: grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    /* 茶色文字で柔らかく */
    padding: 5px 20px;
    width: 140px;
    height: 70px;
    border-radius: 10px 10px 10px 10px;
    /* 少し角丸 */
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: 2px solid #fff;
    /* 白枠でポップに */
    line-height: 1.2;
    position: relative;
}

.c-btn-header span {
    font-size: 0.7rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
    opacity: 0.8;
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    opacity: 1;
    background-color: #ffe082;
}

.c-btn-header::before {
    display: none;
    /* アイコン削除 */
}

/* ボタンの上に「WEB受付」のようなバッジをつける */
.c-btn-header::after {
    display: none;
    content: 'WEB受付';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.l-main {
    padding-top: 0;
    min-height: 0;
}

/* Responsive Header */
@media (max-width: 1100px) {

    /* 画面幅が狭いときは電話番号を非表示にしてスッキリさせる */
    .l-header__info {
        display: none;
    }
}

@media (max-width: 900px) {
    .l-nav {
        display: none;
    }

    /* PCメニュー非表示 */
    .l-header__info {
        display: none;
    }

    /* 電話番号非表示 */

    .l-header__inner {
        height: 70px;
        padding: 10px 15px;
    }

    .l-header__actions {
        margin-right: 45px;
        /* ハンバーガーメニュー分の余白 */
        /* スマホ・タブレット時はヘッダー上のボタンを非表示にするため display: none を追加してもよいが、
                   .c-btn-header クラス側で制御する */
    }

    /* SP用のお問い合わせボタン制御 */
    .c-btn-header {
        display: none;
        /* ヘッダー上では非表示にする */
    }

    /* Mobile Nav Overlay */
    .l-nav.is-open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        padding: 40px 20px;
        overflow-y: auto;
        z-index: 999;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .l-nav__item a {
        font-size: 1.1rem;
        padding: 15px;
        width: 100%;
        text-align: center;
        background-color: var(--color-bg-gray);
        width: 300px;
    }
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.l-section {
    padding: 3rem 0 5rem;
}

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

/* -----------------------------------------------------------------
           NEW FOOTER STYLES (WAVE DESIGN)
        ----------------------------------------------------------------- */
/* Map Section (Placed above footer) */
.l-footer-map {
    height: 400px;
    width: 100%;
    background-color: #ddd;
    margin-bottom: -5px;
    /* adjust for gap */
}

.l-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.2);
}

/* Footer Container */
.l-footer-custom {
    background-color: var(--color-sub-yellow);
    /* 親しみやすい黄色背景 */
    color: var(--color-text);
    position: relative;
    padding-bottom: 0;
}

/* Wave SVG */
.l-footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
    /* 波を上向きに */
    margin-top: -1px;
}

.l-footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.l-footer-wave path {
    fill: var(--color-sub-yellow);
}

/* Footer Main Content */
.l-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
}

/* Left Side: Logo & Info */
.l-footer-left {
    flex: 1;
    min-width: 300px;
}

.l-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.l-footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
}

.l-footer-tel {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0;
    display: block;
}

/* Right Side: Nav Links */
.l-footer-right {
    flex: 1;
    min-width: 300px;
    position: relative;
    /* キャラクター配置の基準 */
}

.l-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    position: relative;
    z-index: 2;
}

.l-footer-nav-item a {
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-left: 20px;
    display: block;
    transition: color 0.3s;
}

.l-footer-nav-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.l-footer-nav-item a::before {
    content: '●';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

/* Footer Character */
.p-footer-char {
    position: relative;
    bottom: -20px;
    right: 0px;
    width: 10rem;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.5));
    pointer-events: none;
    z-index: 1;
}

/* Bottom Buttons (CTA) - Adjusted for Top Position */
.l-footer-buttons {
    display: grid;
    /* タブレットまでは絶対3カラムを維持 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 0;
    margin-bottom: 40px;
    padding-bottom: 0;
    border-bottom: 0px dashed rgba(0, 0, 0, 0.1);
    /* 下線に変更 */
}

.l-footer-btn-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.l-footer-btn-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Icon Style for Flat Design (New) */
.l-footer-btn-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    fill: var(--color-primary);
    /* テーマカラーで統一 */
    transition: fill 0.3s;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg {
    fill: var(--color-sub-yellow);
    /* ホバー時にアクセントカラーへ */
}

/* LINE Icon Color Override */
.l-footer-btn-icon-svg--line {
    fill: #06C755;
}

.l-footer-btn-card:hover .l-footer-btn-icon-svg--line {
    fill: #05b54b;
}

/* -----------------------------------------------------------------
           FLAT ICON STYLES (New Section Icons)
        ----------------------------------------------------------------- */
        .c-flat-icon {
            width: 5rem;
            height: 5rem;
            fill: var(--color-primary);
            transition: transform 0.3s, fill 0.3s;
            filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.05));
        }

.c-flat-icon:hover {
    transform: scale(1.1);
    fill: #e65100;
    /* ホバーでアクセント色（オレンジ）に */
}

/* 配置バリエーション */
.c-flat-icon--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.c-flat-icon--abs-top-right {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 6rem;
    height: 6rem;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    fill: var(--color-primary);
    z-index: 2;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .c-flat-icon--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
        background: transparent;
        box-shadow: none;
        padding: 0;
        width: 60px;
        height: 60px;
        display: none;
    }

    .c-flat-icon--right,
    .c-flat-icon--left {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }
}

.l-footer-btn-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.l-footer-btn-sub {
    font-size: 0.85rem;
    color: #666;
}

/* Copyright */
.l-footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

/* Group Links removed */

@media (max-width: 768px) {
    .l-footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .l-footer-nav-list {
        grid-template-columns: 1fr;
        /* スマホは1列 */
    }

    /* スマホで1カラムに変更 */
    .l-footer-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .p-footer-char {
        position: relative;
        bottom: auto;
        right: auto;
        float: right;
        margin-top: -60px;
        /* ナビの下から少し上に重ねる */
        width: 100px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------------
           PAGES (Block: p-)
        ----------------------------------------------------------------- */

/* Guide Character (General) */
.p-guide-char {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
}

.p-guide-char:hover {
    transform: scale(1.1) rotate(-5deg);
}

.p-guide-char--right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.p-guide-char--left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.p-guide-char--abs-top-right {
    position: absolute;
    top: -40px;
    right: 20px;
    width: 100px;
}

/* FAQ Accordion Styles (Updated to Green Theme) */
.p-faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.p-faq-item {
    margin-bottom: 15px;
}

.p-faq-header {
    background-color: #f1f8f5;
    /* 薄い緑色 */
    padding: 20px 50px 20px 20px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    color: var(--color-primary);
    /* 緑文字 */
    transition: background-color 0.3s;
    line-height: 1.5;
}

.p-faq-header:hover {
    background-color: #e0f2f1;
    /* ホバー時の少し濃い緑 */
}

/* Icon (+/-) */
.p-faq-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    /* アイコンも緑 */
}

.p-faq-item.is-open .p-faq-header::after {
    content: '−';
    /* マイナス */
}

/* Open State Style */
.p-faq-item.is-open .p-faq-header {
    border-radius: 10px 10px 0 0;
    background-color: #e0f2f1;
    /* オープン時の緑 */
}

.p-faq-body {
    display: none;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #f1f8f5;
    /* 枠線も薄い緑 */
    border-top: none;
    border-radius: 0 0 10px 10px;
    line-height: 1.6;
}

.p-faq-item.is-open .p-faq-body {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --- TOP PAGE (Redesigned MV) --- */
.p-top__mv {
    height: 50rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: rgb(240, 240, 240);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Slider Background */
.p-top__mv-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    color: #fff;
}

.p-top__mv-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-slide img {
    height: auto;
}
/* スライド画像の設定（3枚） */
.p-top__mv-slide:nth-child(1) {
    background-image: url('/assets/images/top_mv_slide_01.jpg');
    animation-delay: 0s;
}

.p-top__mv-slide:nth-child(2) {
    background-image: url('/assets/images/top_mv_slide_02.jpg');
    animation-delay: 5s;
}

.p-top__mv-slide:nth-child(3) {
    background-image: url('/assets/images/top_mv_slide_03.jpg');
    animation-delay: 10s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    5% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* MV Content (Copy & Text) */
.p-top__mv-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    pointer-events: none;
    /* 下の画像をクリック可能にする場合 */
}

/* Copy Style (Balloon-like) */
.p-top__copy-box {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 40px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 var(--color-sub-yellow);
    max-width: 600px;
    pointer-events: auto;
    position: relative;
    top: -5%;
}
.p-top__copy {
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--color-bg);
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: center;
}

.p-top__sub {
    font-size: 1.1rem;
    color: var(--color-bg);
    font-weight: bold;
}

/* Character at Bottom Right */
.p-top__mv-char {
    width: 280px;
    right: 10px;
}

/* --- SUB PAGE HERO (Redesigned with Parallax & Animation) --- */
.p-page-fv {
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center 0;
    /* JSで制御するために初期値を設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    /* パララックス効果のための準備 */
    will-change: background-position;
}

/* オーバーレイ（緑のグラデーション） */
.p-page-fv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 152, 119, 0.85), rgba(30, 90, 50, 0.7));
    z-index: 1;
}

/* 背景パターン（ドット） */
.p-page-fv::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 1;
}

.p-page-fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

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

.p-page-fv__en {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 英語ラベルの両サイドに線を引く */
.p-page-fv__en::before,
.p-page-fv__en::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}

.p-page-fv__en::before {
    right: 100%;
    margin-right: 15px;
}

.p-page-fv__en::after {
    left: 100%;
    margin-left: 15px;
}

.p-page-fv__jp {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 下部の波型 */
.p-page-fv__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.p-page-fv__wave svg {
    display: block;
    width: 100%;
    height: 30px;
}

.p-page-fv__wave path {
    fill: #fff;
}

/* Breadcrumbs */
.c-breadcrumbs {
    padding: 15px 20px;
    font-size: 0.85rem;
    color: #888;
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

.c-breadcrumbs a {
    color: #555;
    text-decoration: underline;
}

.c-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

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

@media (max-width: 768px) {
    .p-page-fv {
        height: 250px;
    }

    .p-page-fv__jp {
        font-size: 2rem;
    }

    .c-breadcrumbs {
        text-align: left;
        font-size: 0.75rem;
    }

    /* スマホでは線消す */
    .p-page-fv__en::before,
    .p-page-fv__en::after {
        display: none;
    }
}

/* Service Links Grid */
.p-top__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* PC: 2カラム */
    gap: 30px;
}

@media (max-width: 600px) {
    .p-top__services {
        grid-template-columns: 1fr;
        /* SP: 1カラム */
    }
}

.p-top__service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
    cursor: pointer;
    text-align: center;
    padding-bottom: 30px;
    display: block;
    color: inherit;
    height: 100%;
    /* 高さ揃え */
}

.p-top__service-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    opacity: 1;
}
.p-top__service-img {
    width: 40%;
    height: auto;
    object-fit: contain;
    background-color: transparent;
    padding: 0;
    aspect-ratio: 1;
    margin: 2rem 0 0;
}

.p-top__service-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: var(--color-primary);
}

/* Used Copier Section */
.p-top__used {
    background-color: var(--color-sub-yellow);
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* IT Support Pickup Section (New Style based on p-top__used) */
.p-top__pickup-it {
    background-color: #fefae0;
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* News */
.p-top__news-list {
    max-width: 1100px;
    margin: 0 auto;
}
.p-top__news-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: baseline;
    padding: 1rem 2rem;
}

.p-top__news-date {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 100px;
}

/* --- SUB PAGES (Common) --- */
.p-page-fv {
    height: 30rem;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 5% 0 0;
}

.p-page-fv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.p-page-fv__title {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    font-weight: 700;
}

.p-page-fv__sub {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    margin-top: 10px;
    opacity: 0.9;
}

.p-content-block {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

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

.p-content-block__txt {
    flex: 1;
}

.p-content-block__img {
    flex: 1;
}

.p-content-block__img img {
    border-radius: 20px;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0 var(--color-sub-coral);
    border: 2px solid #333;
}

/* Product Grid & Card Styles */
.p-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.p-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.p-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.p-product-card__img-area {
    width: 100%;
    height: 220px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    position: relative;
}

.p-product-card__img-area img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
}

.p-product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-sub-yellow);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.p-product-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.p-product-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.p-product-card__price {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

.p-product-card__price-main {
    font-size: 1.4rem;
    font-weight: bold;
    color: #d32f2f;
}

.p-product-card__price-sub {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

.p-product-specs {
    margin-bottom: 20px;
    font-size: 0.9rem;
    flex: 1;
}

.p-product-specs dt {
    float: left;
    clear: left;
    font-weight: bold;
    margin-right: 0.5em;
    color: #555;
}

.p-product-specs dt::after {
    content: ":";
}

.p-product-specs dd {
    margin-left: 0;
    margin-bottom: 5px;
    color: #333;
}

.p-product-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Feature Box Style */
.p-feature-box {
    background-color: var(--color-sub-yellow);
    padding: 40px;
    border-radius: 20px;
    /* display: grid; */
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    grid-template-columns: 1fr 1fr;
}

.p-feature-box__content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1000px;
    margin: 0 auto;
}

.p-feature-box__content_txt {
    /* max-width: 900px; */
    margin: 0 auto;
    margin-bottom: 2rem;
    
    
    
    
    
.p-feature-box__content_txt {
    /* max-width: 900px; */
    margin: 0 auto;
    margin-bottom: 2rem;
};
}
.p-feature-box__content-main {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    background: #fff;
    border-radius: 10px;
}

.p-feature-box__content-main-img {
    display: grid;
    grid-template-columns: 0.3fr 1fr;
    align-items: end;
}
.p-feature-box__content-main img.p-feature-char-icon {
    max-width: 18rem;
    padding: 2rem;
}
.p-feature-box__img {
    flex: 0 0 350px;
    position: relative;
}

.p-feature-img-main {
    width: 100%;
    border-radius: 10px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.p-feature-img-sub {
    width: 40%;
    position: absolute;
    bottom: -20px;
    left: -20px;
    z-index: 2;
    border-radius: 10px;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(-3deg);
}

/* Case Studies */
.p-case-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-case-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.p-case-icon {
    flex: 0 0 100px;
    text-align: center;
}

.p-case-icon img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-sub-blue);
    object-fit: cover;
    background-color: #fff;
}

.p-case-content {
    flex: 1;
}

.p-case-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.p-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    align-items: center;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
}

.p-case-label {
    background-color: var(--color-sub-blue);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 5px;
}

.p-case-text {
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Maker List Styles */
.p-maker-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    flex-wrap: wrap;
    margin: 3rem 0;
}

.p-maker-item {
    width: auto;
    height: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
    aspect-ratio: 3/2;
}

.p-maker-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    opacity: 1;
}

.p-maker-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-maker-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* License & History */
.p-license-box {
    border: 0px solid var(--color-sub-yellow);
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
    width: 70%;
    margin: 0 auto;
}

.p-history-list {
    border-left: 4px solid #ffffff;
    padding-left: 30px;
    margin-left: 10px;
}

.p-history-item {
    position: relative;
    margin-bottom: 30px;
}

.p-history-item::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-sub-blue);
}

.p-history-year {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: block;
}

.p-history-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Product Detail (Security) */
.p-product-detail {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-bottom: 40px;
}

.p-product-detail__header {
    border-bottom: 2px solid var(--color-sub-blue);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.p-product-detail__title {
    font-size: 1.6rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 10px;
}

.p-product-detail__sub {
    font-size: 1rem;
    color: #666;
}

.p-product-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: start;
}

.p-feature-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.p-feature-item {
    background: var(--color-bg-gray);
    padding: 15px;
    border-radius: 8px;
}

.p-feature-item__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.p-feature-item__title::before {
    content: '●';
    color: var(--color-sub-yellow);
    margin-right: 8px;
    font-size: 1.2rem;
}

.p-feature-item__text {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Attention Box */
.p-attention-box {
    background-color: #fffcf0;
    border: 3px solid #ffb300;
    border-radius: 15px;
    padding: 4rem;
    margin-top: 6rem;
    position: relative;
    box-shadow: 0 5px 15px rgba(255, 179, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 2rem;
    text-align: left;
}
.p-attention-box::before {
    content: 'POINT';
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffb300;
    color: #fff;
    padding: 5px 20px;
    border-radius: 70px;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 2.4rem;
    z-index: 1;
    text-align: center;
    width: 90%;
}

.p-attention-char {
    flex: 0 0 300px;
    text-align: center;
}
.p-attention-char img {
    width: 100%;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.1));
}

.p-attention-content {
    flex: 1;
}

.p-attention-title {
    color: #e65100;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
}

.p-attention-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5d4037;
}

/* Feature Card Grid (Small icons for Phone/Solar features) */
.p-feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.p-feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s;
}

.p-feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

/* Feature Card Icon (Updated for SVG) */
.p-feature-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: block;
    fill: var(--color-primary);
    transition: fill 0.3s, transform 0.3s;
}

.p-feature-card:hover .p-feature-card__icon {
    fill: #e65100;
    /* アクセントカラー（オレンジ） */
    transform: scale(1.1);
}

.p-feature-card__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1rem;
}

.p-feature-card__text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
}

/* Strong Point Box */
.p-strong-point {
    background-color: #fffcf0;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    margin-bottom: 60px;
    border: 3px solid #3f9877;
}

.p-strong-point__title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 30px;
    background: #409877;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 10px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* Maintenance List (Copier) */
.p-maintenance-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.p-maintenance-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
    font-weight: bold;
    color: var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
}

/* Company Contact */
.p-company__contact {
    background-color: var(--color-bg-gray);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.p-company__methods {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.p-contact-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 250px;
    border: 2px solid var(--color-primary);
}

.c-form-group {
    margin-bottom: 20px;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.c-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.c-form-input,
.c-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
}

.c-form-textarea {
    height: 150px;
}

/* Other Service Grid */
.p-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .p-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .p-top__pickup-it {
        background-color: #fefae0;
        padding: 40px 30px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .l-header {
        padding: 0 20px;
    }

    .l-nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .l-nav.is-open {
        display: block;
    }

    .l-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .p-top__mv {
        height: auto;
        padding: 100px 0 60px;
    }

    .p-top__copy {
        font-size: 8vw;
    }
    .p-top__sub {
        font-size: 3.5vw;
        font-weight: bold;
        margin-bottom: 1rem;
    }
    .p-content-block {
        flex-direction: column !important;
        gap: 20px;
    }

    .c-heading01 {
        font-size: 1.8rem;
    }

    .c-menu-toggle {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .c-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        position: absolute;
        transition: 0.3s;
    }

    .c-menu-toggle span:nth-child(1) {
        top: 0;
    }

    .c-menu-toggle span:nth-child(2) {
        top: 9px;
    }

    .c-menu-toggle span:nth-child(3) {
        bottom: 0;
    }

    .p-feature-box {
        flex-direction: column;
        padding: 3vw;
        grid-template-columns: 1fr;
    }

    .p-feature-box__img {
        flex: auto;
        width: 100%;
        margin-top: 20px;
        padding-left: 20px;
    }

    .p-attention-box {
        flex-direction: column-reverse;
        text-align: center;
        padding: 30px 20px;
        display: flex;
    }

    .p-attention-char {
        flex: 0 0 auto;
        width: 260px;
        margin-bottom: 10px;
    }

    .p-case-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .p-case-meta {
        justify-content: center;
    }

    .p-license-box {
        flex-direction: column;
        text-align: center;
        width: 100%;
        gap: 10px;
        padding: 0;
    }

    .p-guide-char--abs-top-right {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 10px;
    }
    .p-maker-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        flex-wrap: wrap;
        padding: 2vw;
    }
}

@media (max-width: 600px) {
    .p-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .c-menu-toggle {
        display: none;
    }
}

/* -----------------------------------------------------------------
           ANIMATION & JS CLASSES
        ----------------------------------------------------------------- */
.is-page-hidden {
    display: none;
    animation: fadeIn 0.5s ease;
}

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

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

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

/* ===== Scroll + Idle Reveal (safe) ===== */
html.has-js .js-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}

html.has-js .js-reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
}

.no-reveal {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html.has-js .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   INLINE STYLES MIGRATED FROM HTML (auto)
   - 元の見た目を変えずに style="" をクラス化
   ========================================================= */
.u-inlinefix-001 {
    margin-left: 5px;
    font-size: 0.8rem;
}

.u-inlinefix-002 {
    background-image: url('/assets/images/top_mv_slide_01.jpg');
}

/* .u-inlinefix-003 {
    display: none;
} */

.u-inlinefix-004 {
    background-image: url('/assets/images/top_mv_slide_02.jpg');
}

.u-inlinefix-005 {
    background-image: url('/assets/images/top_mv_slide_03.jpg');
}

.u-inlinefix-006 {
    padding-top: 6rem;
}

.u-inlinefix-007 {
    width: 80px;
    height: 80px;
    margin-top: 10px;
}

.u-inlinefix-008 {
    font-size: 1.3rem;
    color: #d4663c;
    font-weight: 700;
}

.u-inlinefix-009 {
    padding: 0;
}

.u-inlinefix-010 {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.u-inlinefix-011 {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 50px;
}

.u-inlinefix-012 {
    flex: 1;
}

.u-inlinefix-013 {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.u-inlinefix-014 {
    background-color: var(--color-sub-coral);
}

.u-inlinefix-015 {
    background-color: var(--color-primary);
}

.u-inlinefix-016 {
    background-color: var(--color-sub-yellow);
    color: var(--color-text);
}

.u-inlinefix-017 {
    color: #06C755;
}

.u-inlinefix-018 {
    padding-top: 0;
    padding-bottom: 40px;
    background-color: transparent;
}

/* .u-inlinefix-019 {
    color: var(--color-text);
} */

.u-inlinefix-020 {
    font-size: 0.9rem;
    font-weight: normal;
}

.u-inlinefix-021 {
    width: 100%;
    margin-top: 10px;
}

.u-inlinefix-022 {
    background-color: var(--color-sub-yellow);
    color: #5d4037;
    border: 2px solid #fff;
    border-radius: 30px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

.u-inlinefix-023 {
    color: var(--color-primary);
    font-weight: bold;
    background: none;
}

.u-inlinefix-024 {
    background-image: url('/assets/images/kv_01.jpg');
}

.u-inlinefix-025 {
    position: relative;
}

.u-inlinefix-026 {
    position: absolute;
    top: -30px;
    right: -40px;
    fill: #e65100;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.u-inlinefix-027 {
    font-size: 1.5rem;
border-bottom: 2px solid #fff;
    padding-bottom: 10px;
    display: inline-block;
}

.u-inlinefix-028 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.u-inlinefix-029 {
    margin-bottom: 0;
}

.u-inlinefix-030 {
    width: 50px;
    height: 50px;
}

.u-inlinefix-031 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.u-inlinefix-032 {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.u-inlinefix-033 {
    border-bottom: 2px solid var(--color-sub-blue);
    padding-bottom: 10px;
}

.u-inlinefix-034 {
    background-image: url('/assets/images/kv_01.jpg');
}

.u-inlinefix-035 {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.u-inlinefix-036 {
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.u-inlinefix-037 {
    font-size: 0.95rem;
}

.u-inlinefix-038 {
    width: 60px;
    height: 60px;
}

.u-inlinefix-039 {
    fill: #e65100;
}

.u-inlinefix-040 {
    margin-top: 60px;
}

.u-inlinefix-041 {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.u-inlinefix-042 {
    margin-bottom: 0;
    color: var(--color-text);
}

.u-inlinefix-043 {
    font-size: 0.85rem;
    color: #666;
}

.u-inlinefix-044 {
    font-size: 0.8rem;
    font-weight: normal;
    color: #333;
}

.u-inlinefix-045 {
    text-align: center;
    margin-top: 20px;
}

.u-inlinefix-046 {
    font-size: 0.9rem;
    color: #666;
}

.u-inlinefix-047 {
    background-image: url('/assets/images/kv_01.jpg');
}

.u-inlinefix-048 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.u-inlinefix-049 {
    margin-bottom: 0;
    padding: 30px;
}

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

.u-inlinefix-051 {
    max-height: 150px;
}

.u-inlinefix-052 {
    width: 100%;
}

.u-inlinefix-053 {
    flex: 1.5;
}

.u-inlinefix-054 {
    grid-template-columns: repeat(3, 1fr);
}

.u-inlinefix-055 {
    background: #fff;
    border: 1px solid #eee;
    height: 100%;
}

.u-inlinefix-056 {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.u-inlinefix-057 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.u-inlinefix-058 {
    border: none;
    background: #f9f9f9;
    padding: 20px;
}

.u-inlinefix-059 {
    font-weight: bold;
    margin-bottom: 10px;
}

.u-inlinefix-060 {
    background-image: url('/assets/images/kv_01.jpg');
}

.u-inlinefix-061 {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif;
}

.u-inlinefix-062 {
    font-size: 1rem;
    font-weight: normal;
}

.u-inlinefix-063 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.u-inlinefix-064 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
}

.u-inlinefix-065 {
    max-width: 100%;
    border: 1px solid #ddd;
}

.u-inlinefix-066 {
    margin-top: 60px;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
}

.u-inlinefix-067 {
    display: none;
    text-align: center;
    padding: 20px;
    background-color: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 10px;
    color: #2e7d32;
}

.u-inlinefix-068 {
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.u-inlinefix-069 {
    background-image: url('/assets/images/kv_01.jpg');
}

.u-inlinefix-070 {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.u-inlinefix-071 {
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #555;
}

.u-inlinefix-072 {
    width: 100%;
    font-size: 0.9rem;
    border-collapse: collapse;
}

.u-inlinefix-073 {
    border-bottom: 1px solid #ddd;
}

.u-inlinefix-074 {
    padding: 8px 0;
    text-align: left;
    width: 30%;
}

.u-inlinefix-075 {
    padding: 8px 0;
}

.u-inlinefix-076 {
    padding: 8px 0;
    text-align: left;
}

.u-inlinefix-077 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.u-inlinefix-078 {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.u-inlinefix-079 {
    margin-bottom: 15px;
    text-align: center;
}

.u-inlinefix-080 {
    height: 120px;
    object-fit: contain;
}

.u-inlinefix-081 {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-sub-yellow);
    padding-bottom: 5px;
    display: inline-block;
}

.u-inlinefix-082 {
    list-style: disc;
    margin-left: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.u-inlinefix-083 {
    width: 100px;
    height: 100px;
    fill: #e65100;
    transform: rotate(-5deg);
}

.u-inlinefix-084 {
    margin-top: 20px;
    font-weight: bold;
    color: #e65100;
}

.u-inlinefix-085 {
    background-color: #e65100;
}

.u-inlinefix-086 {
    margin-top: 40px;
}

.u-inlinefix-087 {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.u-inlinefix-088 {
    border: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.u-inlinefix-089 {
    text-align: center;
    margin-bottom: 20px;
}

.u-inlinefix-090 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    justify-content: center;
    text-align: center;
}

.u-inlinefix-091 {
    background: #fff;
    padding: 15px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #555;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.u-inlinefix-092 {
    margin-bottom: 60px;
}

.u-inlinefix-093 {
    border-left: none;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
}

.u-inlinefix-094 {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
}

.u-inlinefix-095 {
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 15px;
}

.u-inlinefix-096 {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.u-inlinefix-097 {
    font-weight: bold;
}

.u-inlinefix-098 {
    width: 100px;
    height: 100px;
}

.u-inlinefix-099 {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.u-inlinefix-100 {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.u-inlinefix-101 {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.u-inlinefix-102 {
    padding: 25px;
}

.u-inlinefix-103 {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.u-inlinefix-104 {
    background: var(--color-sub-yellow);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 0.9rem;
}

.u-inlinefix-105 {
    list-style: disc;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
}
h2.c-heading01.u-center.u-mb60.c-heading01--solution {
    color: #fff;
}
@media screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    .example {
        .p-top__mv-slide img {
            height: 60vh;
        }
        .p-top__mv-char-wrapper {
            position: absolute;
            bottom: 0%;
            z-index: 10;
            display: flex;
        }
    }
  }
@media screen and (min-width:1024px) and (max-width: 1200px)  {
    .p-top__mv-char-wrapper {
        position: absolute;
        bottom: 10%;
        z-index: 10;
        display: flex;
        left: 60%;
    }
    .p-top__mv-slide img {
        height: 100%;
    }
}

@media screen and (min-width:768px) and (max-width: 1023px)  {
    .p-top__mv {
        height: 100vw;
        position: relative;
        overflow: hidden;
                background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    /* .p-top__mv-slide {
        height: 100vh;
    }
    .p-top__mv-slide img {
        height: 100vh;
    } */
    .p-top__mv-content {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4%;
        display: flex;
        flex-direction: column;
        height: 100%;
        pointer-events: none;
        justify-content: center;
        /* top: -5%; */
    }
    
    .p-top__mv-slide,
     .p-top__mv-slide img {
        height: 100%;
    }

}

@media screen and (max-width: 767px) {
    .p-top__mv-char {
        width: 240px;
    }
    .p-top__mv-slide img {
        height: 100%;
    }
    .u-inlinefix-077 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }
    .l-section {
        padding: 3rem 4vw 3rem;
    }
    .p-attention-box::before {
        top: -5%;
        font-size: 1.4rem;
    }
    .p-strong-point {
        padding: 4vw;
    }
    img.p-feature-char-icon {
        width: 140px;
        order: 2;
    }
    .p-feature-box__content {
        order: 1;
    }
    .u-inlinefix-025 {
        position: relative;
    }
    .u-inlinefix-026 {
        position: absolute;
        top: -40px;
        right: -10px;
        fill: #e65100;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px;
        width: 4rem;
        height: 4rem;
    }
}

/* FAQ Accordion */
.p-faq-body { display: none; }
.p-faq-item.is-open .p-faq-body { display: block; }

.p-faq-item.is-open .p-faq-body{
    display:block !important;
  }
  
  .p-solution-side-image-wrapper img.p-solution-img-item {
    height: 10rem;
}


/* ... existing code ... */
.l-header__info {
    text-align: right;
    line-height: 1.3;
    color: #333;
    transition: color 0.3s;
}

.l-header__tel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text);
    line-height: 1;
    font-family: 'Rubik', sans-serif;
    transition: color 0.3s;
}

.l-header__tel svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.l-header__time {
    display: block;
    font-size: 0.7rem;
}
/* ... existing code ... */
/* Contact Button (Capsule Style) */
.c-btn-header {
    display: flex;
    flex-direction: row; /* 横並びに変更 */
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background-color: #409877;
    color: #ffffff;
    padding: 0 25px;
    width: auto;
    height: 50px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.c-btn-header span {
    font-size: 0.7rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
    opacity: 0.8;
}

.c-btn-header svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    margin-right: 5px; /* アイコンと文字の間に少し余白を追加 */
}

.c-btn-header:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    background-color: #92b5a8;
}

.l-main {
    padding-top: 0;
}

.c-form-privacy-title{
    font-weight: 700;
    margin-bottom: 0.6em;
    color: var(--color-text);
  }
  
  .c-form-privacy-scroll{
    max-height: 220px;
    overflow: auto;
    padding: 1em 1.1em;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background: #f7f7f7;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #444;
  }
  
  .c-form-privacy-scroll p{
    margin: 0 0 0.9em;
  }
  
  .c-form-privacy-date{
    margin-bottom: 0;
    font-size: 0.8rem;
    opacity: 0.9;
  }
  
  .c-form-privacy-check{
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.9rem;
  }
  
  /* ===============================
MV 
=============================== */


.p-top__mv{
border-radius: 0 0 40% 40% / 0 0 10% 10%;
}


.p-top__mv-slide,
.p-top__mv-slide img{
width: 100%;
height: 100%;
}
.p-top__mv-slide img{
object-fit: cover;
transform: scale(1.05);
animation: mvZoom 18s linear infinite;
}
@keyframes mvZoom{
0%{transform: scale(1.07);}
50%{transform: scale(1.02);}
100%{transform: scale(1.07);}
}


.p-top__mv-overlay{position: absolute;inset: 0;z-index: 1;pointer-events: none;background: /* 上からの暗部（コピー可読性） */ radial-gradient(900px 500px at 30% 35%, rgba(0, 0, 0, .35), transparent 60%), linear-gradient(135deg, rgba(0, 0, 0, .55), rgb(98 98 98 / 55%)), /* グリッド */ linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);background-size:
auto,
auto,
44px 44px,
44px 44px;background-position:
center,
center,
center,
center;}


.p-top__mv-overlay::after{
content:"";
position:absolute;
inset:0;
opacity:.08;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}


.p-top__mv-content{z-index: 2;max-width: 1100px;text-align: left;display: flex;margin: 0 auto;}


.p-top__copy-card{/* width: min(720px, 92vw); */width: 100%;padding: 32px 34px;border-radius: 18px;background: rgba(255,255,255,.10);border: 1px solid rgba(255,255,255,.22);box-shadow: 0 18px 60px rgba(0,0,0,.18);backdrop-filter: blur(10px);display: flex;justify-content: space-evenly;align-items: center;flex-direction: column;}


.p-top__copy-en{
}

.p-top__copy-card-sub {
    display: flex;
    gap: 2rem;
}

/* ===============================
   Check Card 
   =============================== */

.c-check-card{
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 28px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
  position: relative;
  /* overflow: hidden; */
  height: 100%;
}

.c-check-card::before{
  content:"";
  position:absolute;
  inset: 0;
  /* background:
    radial-gradient(500px 260px at 10% 0%, rgba(6,174,188,.12), transparent 65%),
    radial-gradient(520px 280px at 90% 20%, rgba(39,178,156,.10), transparent 70%); */
  pointer-events:none;
}

.c-check-card__head{
  display:flex;
  gap: 14px;
  align-items:center;
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.c-check-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(6,174,188,.12);
  border: 1px solid rgba(6,174,188,.18);
}

.c-check-card__icon svg{
  width: 22px;
  height: 22px;
  fill: var(--color-primary);
}

.c-check-card__eyebrow{
  margin: 0 0 4px;
  font-size: .75rem;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

.c-check-card__title{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* リスト：チェック＋2カラム */
.c-check-card__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  position: relative;
  z-index: 1;
}

.c-check-card__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
  line-height: 1.5;
}

.c-check-card__list li::before{
  content:"";
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(6,174,188,.14);
  border: 1px solid rgba(6,174,188,.24);
  flex: 0 0 18px;
  /* -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
          mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E\") center/14px 14px no-repeat; */
  background-color: var(--color-primary);
}

/* SP：1カラムに */
@media (max-width: 768px){
  .c-check-card{
    padding: 22px 16px 18px;
    border-radius: 16px;
  }
  .c-check-card__list{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .c-check-card__title{
    font-size: 1.15rem;
  }
}

.c-check-card{
  position: relative;
  transform: translateY(-6px);
}

.c-check-card::after{
  content: "IT Support";
  position: absolute;
  top: -15%;
  left: 30%;
  padding: 4px 102px;
  font-size: 1.7rem;
  letter-spacing: .12em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #27b29c);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 70;
}
/* 目立たせ強化（崩れない帯） */
.c-check-card{
  position: relative;
  transform: translateY(-10px);
  box-shadow: 0 26px 70px rgba(0,0,0,.10);
  border: 1px solid rgba(6,174,188,.22);
}

/* 背景のアクセント復活（やりすぎない） */
.c-check-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(520px 280px at 15% 0%, rgba(6,174,188,.18), transparent 60%),
    radial-gradient(520px 280px at 90% 15%, rgba(39,178,156,.14), transparent 70%);
  opacity: .9;
}

/* 帯（上にのるラベル） */
.c-check-card::after{
  content: "IT SUPPORT";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  font-size: .85rem;
  letter-spacing: .18em;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #27b29c);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  z-index: 5;
  white-space: nowrap;
}
.c-check-card::after{
    text-shadow: 0 8px 18px rgba(0,0,0,.25);
    filter: drop-shadow(0 0 18px rgba(6,174,188,.35));
  }
  
  /* カードの縁に“光るライン” */
  .c-check-card{
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, rgba(6,174,188,.65), rgba(39,178,156,.55)) border-box;
    border: 1px solid transparent;
  }
  
  @media (max-width: 768px){
    .c-check-card::after{
      top: -25px;
      font-size: .78rem;
      padding: 7px 14px;
      letter-spacing: .14em;
    }
  }

  /* ===============================
   Service Cards（画像付き）
   =============================== */

.c-service-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 2rem 0;
}

.c-service-card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}

.c-service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 65px rgba(0,0,0,.10);
}

.c-service-card__img{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.c-service-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.c-service-card:hover img{
  transform: scale(1.06);
}

.c-service-card__body{
  padding: 18px 18px 22px;
}

.c-service-card__body p{
  font-size: .95rem;
  line-height: 1.7;
  color: #555;
}

/* タイトル少し強め */
.c-service-card__body .c-heading03{
  margin-bottom: 8px;
}

/* SP対応 */
@media (max-width: 1024px){
  .c-service-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .c-service-cards{
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Page FV Overlay（MVと統一）
   =============================== */

.p-page-fv{
  position: relative;
  overflow: hidden;
}

/* グラデ＋グリッド */
.p-page-fv::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: /* 上から暗めグラデ（文字可読性） */ linear-gradient(135deg, rgba(0, 0, 0, .45), rgb(0 0 0 / 35%)), /* グリッド */ linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size:
    auto,
    44px 44px,
    44px 44px;
}

.p-page-fv::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.p-page-fv__inner,
.p-page-fv__wave{
  position: relative;
  z-index: 3;
}

.p-page-fv{
    position: relative;
    overflow: hidden;
    padding-bottom: 30px; 
  }
  
  .p-page-fv__wave{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px; 
    width: 100%;
    line-height: 0;
    z-index: 4;
  }
  
  .p-page-fv__wave svg{
    display: block;
    width: 100%;
    height: 30px; 
  }
  
  .p-page-fv__inner{
    position: relative;
    z-index: 5;
  }
  
  /* ===============================
   Feature Cards（導入・運用サポート）
   =============================== */

.p-feature-card-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.p-feature-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,.06);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.p-feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(6,174,188,.14), transparent 60%),
    radial-gradient(420px 220px at 90% 20%, rgba(39,178,156,.10), transparent 70%);
  opacity: .9;
}

.p-feature-card__icon{
  width: 28px;
  height: 28px;
  fill: var(--color-primary);
  display: block;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.p-feature-card__title{
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}

.p-feature-card__text{
  margin: 0;
  color: #555;
  font-size: .92rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ふわっとホバー（PCだけ） */
@media (hover:hover){
  .p-feature-card{
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .p-feature-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 55px rgba(0,0,0,.10);
    border-color: rgba(6,174,188,.22);
  }
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 1024px){
  .p-feature-card-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .p-feature-card-grid{
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Business Phone Product
   =============================== */

.p-product-single{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 3rem;
}

.p-product-single__item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.p-product-single__title{
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.p-product-single__text{
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: #555;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .p-product-single{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .p-product-single{
    grid-template-columns: 1fr;
  }
}

.u-inlinefix-086 p.u-mb30 {
    text-align: center;
    margin-bottom: 2rem;
}

/* ===============================
   Business Phone Product（画像付き）
   =============================== */

.p-product-single{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-product-single__item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,.06);
}

.p-product-single__img{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #f3f4f5;
}

.p-product-single__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-product-single__title{
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.p-product-single__text{
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: #555;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .p-product-single{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .p-product-single{
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Flow（導入の流れ）- polished
   =============================== */

.p-flow{
  max-width: 920px;
  margin: 20px auto 0;
  position: relative;
  padding-left: 18px;
}

.p-flow::before{
  content:"";
  position:absolute;
  top: 6px;
  bottom: 6px;
  left: 4.5%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(6,174,188,.35),
    rgba(39,178,156,.22)
  );
  opacity: .9;
}

.p-flow-item{
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 18px;
  align-items: start;
  position: relative;
  padding: 0 0 18px;
}

.p-flow-item:last-child{
  padding-bottom: 0;
}

.p-flow-num{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #27b29c);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  position: relative;
  z-index: 1;
}

.p-flow-body{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 16px 46px rgba(0,0,0,.06);
  position: relative;
}

.p-flow-body::before{
  content:"";
  position:absolute;
  left: -8px;
  top: 22px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
}

.p-flow-body h4{
  margin: 0 0 8px;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--color-text);
}

.p-flow-body p{
  margin: 0;
  color: rgba(0,0,0,.68);
  line-height: 1.75;
  font-size: .95rem;
}

@media (hover:hover){
  .p-flow-body{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .p-flow-item:hover .p-flow-body{
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(0,0,0,.10);
    border-color: rgba(6,174,188,.20);
  }
}

/* SP */
@media (max-width: 640px){
  .p-flow{
    padding-left: 8px;
  }

  .p-flow::before{
    left: 26px;
  }

  .p-flow-item{
    grid-template-columns: 56px 1fr;
    gap: 14px;
  }

  .p-flow-num{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: .9rem;
  }

  .p-flow-body{
    border-radius: 16px;
    padding: 16px 14px 14px;
  }

  .p-flow-body::before{
    top: 18px;
  }
}

.p-maker-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin: 3rem 0;
    justify-items: center;
  }
  
  /* 2個のときだけ中央（2列目・3列目）に寄せる */
  .p-maker-list:has(> .p-maker-item:nth-child(2):last-child) > .p-maker-item:nth-child(1){
    grid-column: 2;
  }
  .p-maker-list:has(> .p-maker-item:nth-child(2):last-child) > .p-maker-item:nth-child(2){
    grid-column: 3;
  }
  

  /* =========================
   TOP: IT Support Pickup (BRUSH UP)
   ========================= */

/* 変数（既存カラーがあるなら合わせてOK） */
:root{
  --brand: #00A9BC;
  --brand2:#27B29C;
}

.p-top__pickup-it{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 46px);
  align-items: stretch;

  /* “セクションっぽさ”を作る */
  padding: clamp(20px, 3.2vw, 44px);
  border-radius: 22px;

  /* ちゃんとデザインしてる感の出る背景 */
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88)),
    radial-gradient(1200px 500px at 20% 0%, rgba(0,169,188,.16), transparent 60%),
    radial-gradient(900px 420px at 90% 100%, rgba(39,178,156,.14), transparent 55%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 24px 60px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

/* 斜めライン（ブランド感） */
.p-top__pickup-it::before{
  content:"";
  position:absolute;
  inset: -60px -120px auto auto;
  width: 520px;
  height: 220px;
  transform: rotate(12deg);
  background:
    linear-gradient(90deg, rgba(0,169,188,.0), rgba(0,169,188,.18), rgba(39,178,156,.18), rgba(39,178,156,.0));
  filter: blur(.2px);
  pointer-events:none;
}

/* 左側：コピーをカード化して“読み物感” */
.p-top__pickup-it > .u-inlinefix-012:first-child{
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.06);
  position: relative;
}

/* 左カードのアクセントバー */
.p-top__pickup-it > .u-inlinefix-012:first-child::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 18px;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* 見出し：太さ・字間・行間を調整して“ロゴっぽく” */
.p-top__pickup-it .c-heading02{
  margin-top: 14px;
  margin-bottom: 16px;
  line-height: 1.18;
  letter-spacing: .04em;
  font-weight: 800;
}

/* 本文の読みやすさ */
.p-top__pickup-it p{
  margin-bottom: 22px;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
}

/* ボタン：ピル＋グラデ＋矢印＋影で“主役感” */
.p-top__pickup-it .c-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 20px;
  border-radius: 999px;

  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border: 0;

  box-shadow:
    0 18px 34px rgba(0,169,188,.22),
    0 8px 16px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.p-top__pickup-it .c-btn::after{
  content:"→";
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}

.p-top__pickup-it .c-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow:
    0 22px 42px rgba(0,169,188,.26),
    0 10px 18px rgba(0,0,0,.10);
}

/* 右側：画像を“切り抜きカード”に */
.p-top__pickup-it > .u-inlinefix-012:last-child{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0,0,0,.12);
}

/* 画像マスク：少し変形して一気にデザイン感 */
.p-top__pickup-it .c-img-frame{
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 28vw, 320px);
  object-fit: cover;

  /* 角丸より“形”で魅せる */
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 92% 100%, 0 100%);
  transform: scale(1.02);
}

/* 右側の枠：グラデの細線を足す */
.p-top__pickup-it > .u-inlinefix-012:last-child::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.38);
  pointer-events:none;
}

/* SP：縦並び＋マスク弱め */
@media (max-width: 900px){
  .p-top__pickup-it{
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 18px;
  }

  .p-top__pickup-it::before{
    inset: -80px -140px auto auto;
    width: 460px;
    height: 200px;
  }

  .p-top__pickup-it > .u-inlinefix-012:first-child{
    padding: 16px;
    border-radius: 16px;
  }

  .p-top__pickup-it > .u-inlinefix-012:last-child{
    border-radius: 16px;
  }

  .p-top__pickup-it .c-img-frame{
    min-height: 220px;
    clip-path: inset(0 round 16px); /* SPは素直に */
    transform: none;
  }
}

/* =========================
   TOP services (2 columns)
   ========================= */
.p-top__services{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* card */
.p-top__service-card{
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}

.p-top__service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,.12);
}

/* media (image area) */
.p-top__service-media{
  position: relative;
  height: auto;
  overflow: hidden;
  aspect-ratio: 2/1;
}

/* photo */
.p-top__service-photo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform .45s ease;
  aspect-ratio: 3/2;
}

/* overlay for readability */
.p-top__service-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
  pointer-events: none;
}

.p-top__service-card:hover .p-top__service-photo{
  transform: scale(1.12);
}

/* icon -> bottom-right of the IMAGE (no white bg) */
.p-top__service-icon{
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 8rem;
  height: 8rem;

  /* 余計な白背景・枠が乗ってたら強制で消す */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* 画像の上に乗せる */
  z-index: 2;

  /* 見やすさだけ少し補助（白背景なしで浮かせる） */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
  pointer-events: none;
}

/* text area */
.p-top__service-content{
  padding: 18px 18px 20px;
}

.p-top__service-title{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
}

.p-top__service-content p{
  margin: 0;
  font-size: .95rem;
  color: rgba(0,0,0,.65);
}

/* responsive: SP 1 column */
@media (max-width: 720px){
  .p-top__services{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-top__service-media{
    height: 170px;
  }
}

/* =========================
   Pickup (IT Support) block
   ========================= */
.c-pickup {
  width: 100%;
  padding: 0 20px;
}

.c-pickup__inner {
  /* max-width: 1152px; */ /* max-w-6xl */
  margin: 0 auto;
  position: relative;
  background: #fff;
  border: 1px solid #f1f5f9; /* gray-100 */
  border-radius: 24px; /* rounded-3xl */
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  padding: 32px;
}

@media (min-width: 768px) {
  .c-pickup__inner {
    padding: 48px;
  }
}

/* subtle circle decor */
.c-pickup__decor {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 256px;
  height: 256px;
  background: #ecfeff; /* cyan-50 */
  border-radius: 9999px;
  opacity: 0.55;
  pointer-events: none;
}

/* layout */
.c-pickup__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}

@media (min-width: 768px) {
  .c-pickup__grid {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }
}

.c-pickup__media,
.c-pickup__content {
  width: 100%;
}

@media (min-width: 768px) {
  .c-pickup__media,
  .c-pickup__content {
    width: 50%;
  }
}

/* media block */
.c-pickup__media {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .c-pickup__media {
    justify-content: flex-start;
  }
}

.c-pickup__media-wrap {
  position: relative;
  width: 100%;
  /* max-width: 560px; */
}

/* back plate */
.c-pickup__media-back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  /* background: #cffafe; */ /* cyan-100 */
  border-radius: 18px;
  z-index: -1;
}

/* dotted decor */
.c-pickup__media-dots {
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 96px;
  height: 96px;
  background-image: radial-gradient(#cbd5e1 2px, transparent 2px);
  background-size: 12px 12px;
  z-index: -2;
  display: none;
}

/* main image */
.c-pickup__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid #f8fafc; /* gray-50 */
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

/* badge */
.c-pickup__badge {
  position: absolute;
  display: none!important;
  left: -16px;
  bottom: -16px;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  padding: 12px 14px;
  display: none;
  gap: 12px;
  align-items: center;
}

@media (min-width: 640px) {
  .c-pickup__badge {
    display: flex;
  }
}

.c-pickup__badge-ico {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: #dcfce7; /* green-100 */
  color: #16a34a; /* green-600 */
}

.c-pickup__badge-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.55);
  line-height: 1.2;
}

.c-pickup__badge-strong {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

/* tag */
.c-pickup__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #ecfeff;
  border: 1px solid #cffafe;
  color: #0e7490;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 18px;
}

.c-pickup__ping {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #06b6d4;
}

.c-pickup__ping::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(6, 182, 212, 0.45);
  animation: c-pickup-ping 1.2s ease-out infinite;
  transform: scale(1);
}

@keyframes c-pickup-ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* title */
.c-pickup__title {
  margin: 0 0 18px;
  font-weight: 800;
  color: #111827;
  line-height: 1.4;
  font-size: 28px;
}

@media (min-width: 768px) {
  .c-pickup__title {
    font-size: 36px;
  }
}

.c-pickup__title-accent {
  text-decoration: underline;
  text-decoration-thickness: 8px;
  text-underline-offset: 11px;
  text-decoration-color: #f3eabe; /* cyan-300 */
}

/* list */
.c-pickup__list {
  display: grid;
  gap: 10px;
  margin: 2rem 0 18px;
}

.c-pickup__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.c-pickup__item:hover {
  background: #fff;
  border-color: #cffafe;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.c-pickup__item-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transition: background-color .2s ease;
}

.c-pickup__item:hover .c-pickup__item-ico {
  background: #fee2e2; /* red-100 feel */
}

.c-pickup__item-ico--red {
  color: #ef4444;
}

.c-pickup__item-txt {
  font-weight: 700;
  color: rgba(17, 24, 39, 0.85);
}

/* lead */
.c-pickup__lead {
  margin: 0 0 22px;
  color: rgba(17, 24, 39, 0.65);
  line-height: 1.8;
}

.c-pickup__highlight {
  font-weight: 800;
  color: #111827;
  background: #fef9c3; /* yellow-100 */
  padding: 0 6px;
  border-radius: 4px;
}

/* button */
.c-pickup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 64px;
  background: #0255b2; /* cyan-600 */
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(8, 145, 178, 0.25);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  width: 100%;
}

@media (min-width: 768px) {
  .c-pickup__btn {
    width: auto;
  }
}

.c-pickup__btn:hover {
  background: #0e7490; /* cyan-700 */
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(8, 145, 178, 0.28);
}

.c-pickup__btn-ico {
  margin-left: 2px;
}

/* lucide size helper */
.c-pickup__lucide {
  width: 18px;
  height: 18px;
  display: inline-block;
}
/* 画像アイコン共通 */
.c-pickup__icon-img {
  width: 2rem;
  height: 2rem;
  display: block;
  object-fit: contain;
}

/* ボタン内の矢印だけ少し大きく */
.c-pickup__btn-icon-img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.h-maker {
    margin-top: 4rem;
}

/* =========================================================
box-shadow: 0 0 0 4px rgba(191,233,241,.14);
}


.p-footer-char{
position: absolute;
right: -6px;
bottom: -10px;
width: 140px;
max-width: 42%;
height: auto;
opacity: .95;
filter: drop-shadow(0 14px 22px rgba(0,0,0,.28));
pointer-events: none;
}


.l-footer-copyright{
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.08);
color: rgba(231,241,246,.65);
font-size: .85rem;
text-align: center;
}


/* Responsive */
@media (max-width: 1024px){
.l-footer-buttons{
grid-template-columns: 1fr;
}
.l-footer-btn-card{
grid-template-columns: 52px 1fr;
}
.l-footer-map iframe{
height: 320px;
}
.l-footer-content{
grid-template-columns: 1fr;
}
.p-footer-char{
position: static;
display: block;
margin: 18px 0 0 auto;
width: 150px;
max-width: 60%;
}
}


@media (max-width: 640px){
.l-footer-custom{
padding-bottom: 20px;
}
.l-footer-buttons{
gap: 14px;
margin-bottom: 28px;
}
.l-footer-btn-card{
padding: 16px;
border-radius: 16px;
}
.l-footer-btn-title{
font-size: 1rem;
}
.l-footer-btn-sub{
font-size: .9rem;
}
.l-footer-map{
border-radius: 18px;
}
.l-footer-map iframe{
height: 280px;
}
.l-footer-nav-list{
grid-template-columns: 1fr;
}
}/* ==========================================================================
Footer Scoped CSS
すべて .u-footer-scope 配下に限定（他ページ・他要素に影響しない）
========================================================================== */

.u-footer-scope {
/* 変数もフッター内限定 */
--footer-color-primary: #0056b3;
--footer-color-primary-light: #e6f0fa;
--footer-color-primary-dark: #004494;
--footer-color-accent: #f39c12;
--footer-color-line: #06c755;
--footer-color-line-light: #e6f9ed;

--footer-text-main: #333333;
--footer-text-sub: #666666;

--footer-bg-top: #f4f7fa;
--footer-bg-bottom: #ffffff;
--footer-white: #ffffff;

--footer-font-base: "Noto Sans JP", sans-serif;
--footer-font-en: "Montserrat", sans-serif;

--footer-radius: 12px;
--footer-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
--footer-shadow-hover: 0 15px 40px rgba(0, 50, 100, 0.1);

font-family: var(--footer-font-base);
color: var(--footer-text-main);
}

/* footer内だけの container（サイト共通の .l-container には触らない） */
.u-footer-scope .l-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 2;
}

/* footer内だけ中央寄せ */
.u-footer-scope .u-center {/* text-align: center; */}

/* 見出し（footer内の .c-heading01 だけ上書き） */
.u-footer-scope .c-heading01 {/* font-size: 2rem; *//* font-weight: 700; */color: #ffffff;/* margin-bottom: 50px; *//* position: relative; *//* display: flex; *//* flex-direction: column; *//* align-items: center; *//* letter-spacing: 0.05em; */}

.u-footer-scope .c-heading01::before {
content: attr(data-en);
font-family: var(--footer-font-en);
font-size: 0.9rem;
color: var(--footer-color-primary);
font-weight: 600;
letter-spacing: 0.1em;
margin-bottom: 10px;
display: block;
opacity: 0.8;
}

/* .u-footer-scope .c-heading01::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--footer-color-primary), var(--footer-color-accent));
border-radius: 2px;
margin-top: 20px;
} */

/* ==========================================================================
Layout
========================================================================== */
.u-footer-scope.l-footer-custom {margin-top: 120px;}

.u-footer-scope .l-footer-top-section {background-color: #0255b2;position: relative;padding-bottom: 80px;}

.u-footer-scope .l-footer-wave {
position: absolute;
top: -119px;
left: 0;
width: 100%;
line-height: 0;
z-index: 1;
transform: scaleY(1.01);
}

.u-footer-scope .l-footer-wave svg {
display: block;
width: 100%;
height: 120px;
}

.u-footer-scope .l-footer-wave svg path {fill: #0255b2;}

.u-footer-scope .l-footer-bottom-section {
background-color: var(--footer-bg-bottom);
padding-top: 60px;
padding-bottom: 40px;
}

.u-footer-scope .l-footer-copyright-area {background-color: #409877;color: rgba(255, 255, 255, 0.8);padding: 15px 0;font-size: 0.75rem;text-align: center;font-family: var(--footer-font-en);letter-spacing: 0.05em;}

/* ==========================================================================
CTA Buttons
========================================================================== */
.u-footer-scope .l-footer-buttons {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 60px;
flex-wrap: wrap;
position: relative;
z-index: 10;
}

.u-footer-scope .l-footer-btn-card {
           background: var(--footer-white);
           border-radius: var(--footer-radius);
           padding: 1rem 0.5rem;
           width: calc(33.333% - 24px);
           min-width: 280px;
           box-shadow: var(--footer-shadow);
           display: flex;
           flex-direction: column;
           align-items: center;
           text-align: center;
           box-sizing: border-box;
           position: relative;
           overflow: hidden;
           border: 1px solid rgba(255, 255, 255, 0.5);
           transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
           box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
           }

.u-footer-scope .l-footer-btn-card:hover {
transform: translateY(-8px);
box-shadow: var(--footer-shadow-hover);
}

.u-footer-scope .l-footer-btn-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--footer-color-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}

.u-footer-scope .l-footer-btn-card:hover::before { transform: scaleX(1); }
.u-footer-scope .l-footer-btn-card--line::before { background: var(--footer-color-line); }

.u-footer-scope .l-footer-btn-icon-wrapper {width: 80px;height: 80px;background-color: var(--footer-color-primary-light);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;transition: background-color 0.3s;}

.u-footer-scope .l-footer-btn-card--line .l-footer-btn-icon-wrapper {
background-color: var(--footer-color-line-light);
}

.u-footer-scope .l-footer-btn-icon-svg {width: 36px;height: 36px;fill: var(--footer-color-primary);transition: transform 0.3s;margin-bottom: 0;}

.u-footer-scope .l-footer-btn-card:hover .l-footer-btn-icon-svg { transform: scale(1.1); }
.u-footer-scope .l-footer-btn-icon-svg--line { fill: var(--footer-color-line); }

.u-footer-scope .l-footer-btn-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--footer-text-main);
}

.u-footer-scope .l-footer-btn-sub {
font-size: 0.9rem;
color: var(--footer-text-sub);
line-height: 1.5;
}

.u-footer-scope .l-footer-btn-arrow {margin-top: 0rem;color: var(--footer-color-primary);font-size: 1.2rem;opacity: 0.3;transform: translateX(-10px);transition: all 0.3s;}

.u-footer-scope .l-footer-btn-card--line .l-footer-btn-arrow { color: var(--footer-color-line); }

.u-footer-scope .l-footer-btn-card:hover .l-footer-btn-arrow {
opacity: 1;
transform: translateX(0);
}

/* ==========================================================================
Map
========================================================================== */
.u-footer-scope .l-map-section { margin: 0; }

.u-footer-scope .l-footer-map {
position: relative;
padding-bottom: 35%;
height: 0;
overflow: hidden;
border-radius: var(--footer-radius);
box-shadow: var(--footer-shadow);
background-color: #eee;
border: 4px solid var(--footer-white);
}

.u-footer-scope .l-footer-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}

/* ==========================================================================
Bottom content
========================================================================== */
.u-footer-scope .l-footer-content {display: flex;align-items: center;}

.u-footer-scope .l-footer-left { width: 40%; }
.u-footer-scope .l-footer-logo { margin-bottom: 25px; }

.u-footer-scope .dummy-logo {
font-family: var(--footer-font-en);
font-size: 1.8rem;
font-weight: 800;
color: var(--footer-color-primary);
letter-spacing: 0.05em;
display: inline-block;
}

.u-footer-scope .l-footer-address p {
margin: 0 0 12px;
font-size: 0.95rem;
color: var(--footer-text-main);
}

.u-footer-scope .l-footer-address .company-name {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 15px;
display: block;
}

.u-footer-scope .l-footer-tel {
display: inline-block;
font-family: var(--footer-font-en);
font-size: 1.8rem;
font-weight: 700;
color: var(--footer-text-main);
margin: 10px 0;
line-height: 1.2;
letter-spacing: 0.02em;
text-decoration: none;
}

.u-footer-scope .l-footer-tel:hover { color: var(--footer-color-primary); }

.u-footer-scope .l-footer-right {width: 55%;display: flex;align-items: flex-end;justify-content: space-around;}

.l-footer-right {}

.u-footer-scope .l-footer-nav-list {display: grid;grid-template-columns: repeat(3, auto);gap: 15px 40px;margin-right: 0;}

.u-footer-scope .l-footer-nav-item a {
font-size: 0.95rem;
position: relative;
color: var(--footer-text-main);
padding-bottom: 2px;
font-weight: 500;
text-decoration: none;
}

.u-footer-scope .l-footer-nav-item a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--footer-color-primary);
transition: width 0.3s;
}

.u-footer-scope .l-footer-nav-item a:hover {
color: var(--footer-color-primary);
}

.u-footer-scope .l-footer-nav-item a:hover::after { width: 100%; }

.u-footer-scope .p-footer-char-placeholder {width: 120px;height: 120px;/* background: #f0f0f0; */border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 0.7rem;/* color: #999; */flex-shrink: 0;}

/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 768px) {
.u-footer-scope .c-heading01 {
 font-size: 1.5rem;
 margin-bottom: 40px;
}

.u-footer-scope .l-footer-top-section { padding-bottom: 60px; }
.u-footer-scope .l-footer-bottom-section { padding-top: 40px; }

.u-footer-scope .l-footer-buttons {
 flex-direction: column;
 align-items: center;
 gap: 20px;
 margin-bottom: 40px;
}

.u-footer-scope .l-footer-btn-card {
 width: 100%;
 max-width: 400px;
 flex-direction: row;
 align-items: center;
 text-align: left;
 padding: 20px;
}

.u-footer-scope .l-footer-btn-icon-wrapper {
 width: 50px;
 height: 50px;
 margin-bottom: 0;
 margin-right: 15px;
}

.u-footer-scope .l-footer-btn-icon-svg {
 width: 24px;
 height: 24px;
}

.u-footer-scope .l-footer-btn-content { flex: 1; }

.u-footer-scope .l-footer-btn-title {
 font-size: 1rem;
 margin-bottom: 4px;
}

.u-footer-scope .l-footer-btn-sub { font-size: 0.8rem; }

.u-footer-scope .l-footer-btn-arrow {
 margin-top: 0;
 opacity: 1;
 transform: none;
 font-size: 1rem;
}

.u-footer-scope .l-footer-map { padding-bottom: 60%; }

.u-footer-scope .l-footer-content { flex-direction: column; }

.u-footer-scope .l-footer-left {
 width: 100%;
 margin-bottom: 50px;
 text-align: center;
}

.u-footer-scope .l-footer-right {
 width: 100%;
 flex-direction: column;
 align-items: center;
}

.u-footer-scope .l-footer-nav-list {
 grid-template-columns: repeat(2, 1fr);
 gap: 15px 20px;
 margin-right: 0;
 margin-bottom: 40px;
 text-align: left;
 width: 100%;
 max-width: 300px;
}
}

/* 電話リンク：アイコン付き（footerスコープ内のみ） */
.u-footer-scope .l-footer-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;              /* アイコンと文字の間隔 */
  line-height: 1.2;
}

/* アイコン枠 */
.u-footer-scope .l-footer-tel__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;            /* ←サイズ調整ポイント */
  height: 1.1em;           /* ←サイズ調整ポイント */
  color: var(--footer-color-primary); /* 好きなら var(--footer-text-main) に */
  flex: 0 0 auto;
}

/* SVG本体 */
.u-footer-scope .l-footer-tel__ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 数字部分（必要なら微調整） */
.u-footer-scope .l-footer-tel__num {
  display: inline-block;
}

.l-footer-btn-icon-img {
    width: 3rem;
}

.h-service-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 3rem;
}
.mv-wrap {
  position: relative;
}
.p-top__mv-contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  max-width: 780px;
}
@media (max-width: 768px) {
  .u-footer-scope .l-footer-tel__ico {
    width: 1em;
    height: 1em;
  }
  .p-solution-img-item {
    height: 3rem;
    margin: 0;
  }
  .c-btn-header {
    display: none;
  }
  .p-top__copy-card-sub {
    gap: 1rem;
  }
  .h-service-list {
    margin: 0;
  }
  .p-problem-card {
    min-height: auto;
  }
  .c-pickup__inner {
    padding: 1rem;
  }
  .c-pickup__grid {
    gap: 2rem;
  }
  .c-pickup__title {
    font-size: 24px;
  }
  .h-maker {
    margin-top: 2rem;
  }
  .p-maker-item {
    padding: 0;
  }
  .p-maker-list {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
  }
  .p-top__copy-card {
    padding: 1rem;
  }
  .c-service-card {
    padding: 1rem;
  }
  .c-service-card__body {
    padding: 1rem 0;
  }
  .p-feature-box__content-main-img {
    grid-template-columns: 1fr;
  }
  .u-inlinefix-035 {
    margin: 0;
  }
  .p-maintenance-list {
    margin: 0;
  }
  .p-maintenance-item {
    padding: 10px;
  }
  .p-maker-list--two {
    grid-template-columns: 1fr;
  }
  .p-product-detail {
    padding: 20px;
  }
  .p-product-detail__title {
    font-size: 20px;
  }
  .p-product-detail__grid {
    gap: 20px;
  }
  .u-inlinefix-054 {
    grid-template-columns: 1fr;
  }
  .p-page-fv {
    height: 20rem;
    padding: 18% 0 0;
  }
  .p-attention-title {
    font-size: 20px;
  }
  .c-heading03 {
    font-size: 20px;
  }
  .u-inlinefix-086 {
    margin-top: 20px;
  }
  .p-company__contact {
    padding: 3rem 1rem;
  }
  .u-inlinefix-066 {
    margin-top: 30px;
    padding: 15px;
  }
  .p-contact-box {
    padding: 10px;
  }
  .p-company__methods {
    margin: 10px 0 30px;
  }
  .c-btn {
    padding: 10px 40px;
  }
  .h-service-link {
    padding: 2rem 4vw;
  }
  .p-feature-box__content-main img.p-feature-char-icon {
    margin: 0 auto;
    width: 300px;
}
.p-content-block__txt img.p-solution-img-item {
    height: 7rem;
    margin-bottom: 2rem;
}
}


.p-top__service-media {
    height: auto;
}
.p-content-block__txt img.p-solution-img-item {
    height: 8rem;
}