/* ============================================
   ロココスペース メインスタイルシート (Figma Design)
   ============================================ */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    height: 100%;
}

body {
    font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: auto;
    color: #050505;
    background-color: #fff;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


a {
    text-decoration: none;
    color: inherit;
    display: flex;
}

/* Main content area - flex grow to push footer to bottom */
main,
.main {
    flex: 1;
}

.pc_display {
    display: block;
}

.sp_display {
    display: none;
}

/* ============================================
   Design Tokens - Colors
   ============================================ */
:root {
    /* Colors */
    --color-primary: #EA505C;
    --color-text-main: #050505;
    --color-text-highlight: var(--color-primary);
    --color-text-suggestion-highlight: var(--color-primary);
    --color-text-footer: #fff;
    --color-bg-headline-bars: #F92979;
    --color-bg-deco: #FEEAF2;
    --color-bg-training: #FFEDED;
    --color-bg-frames: #9B9492;
    --color-bg-steps: #F5F5F5;
    --color-bg-steps-accent: var(--color-primary);
    --color-bg-gray: #F5F5F5;
    --color-desc-underlines: #F6B5BB;
    --color-nav-border: #A10659;
    --color-check-red: #CF090C;
    --color-btn-bg: var(--color-primary);
    --color-btn-text: #fff;
    --color-circle-title-main: #fff;
    --color-circle-keypoint-1: #FF408C;
    --color-circle-keypoint-2: #FF6363;

    /* Button Variants */
    --btn-bg-primary: var(--color-primary);
    --btn-text-primary: var(--color-text-footer);
    --btn-bg-secondary: var(--color-text-footer);
    --btn-text-secondary: var(--color-primary);

    /* Button Hover States */
    --btn-hover-bg: var(--color-primary);
    --btn-hover-text: var(--color-text-footer);
    --btn-hover-border: var(--color-primary);

    /* Spacing */
    --space-section: 4.687rem;
    /* 75px */
    --gap-heading: 1.406rem;
    /* 22.5px */

    /* Font Sizes */
    --font-size-xs: 0.609rem;
    /* 9.744px */
    --font-size-sm: 0.625rem;
    /* 10px */
    --font-size-sm-md: 0.656rem;
    /* 10.496px */
    --font-size-base-sm: 0.75rem;
    /* 12px */
    --font-size-md-sm: 0.875rem;
    /* 14px */
    --font-size-md-base: 0.938rem;
    /* 15px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-base-md: 1.063rem;
    /* 17px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-xl-md: 1.375rem;
    /* 22px */
    --font-size-xl-lg: 1.406rem;
    /* 22.496px */
    --font-size-xl-xl: 1.438rem;
    /* 23.008px */
    --font-size-2xl-sm: 1.64rem;
    /* 26.24px */
    --font-size-2xl: 1.687rem;
    /* 26.992px */
    --font-size-2xl-md: 1.724rem;
    /* 27.584px */
    --font-size-2xl-lg: 1.781rem;
    /* 28.496px */
    --font-size-2xl-xl: 1.798rem;
    /* 28.768px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-3xl-md: 2rem;
    /* 32px */
    --font-size-3xl-lg: 2.675rem;
    /* 36px */
    --font-size-4xl: 2.875rem;
    /* 46px */
    --font-size-5xl: 6rem;
    /* 96px */

    /* Line Heights - Generic */
    --lh-heading: 1.2;
    --lh-tight: 1.035rem;
    --lh-normal: 1.275rem;
    --lh-relaxed: 2rem;
    --lh-loose: 2.5rem;
    --lh-xl-generic: 3.375rem;
    /* Generic large line-height */
    --lh-2xl-generic: 7.5rem;
    /* Generic extra large line-height */

    /* Line Heights - Font-size Specific */
    --lh-xs: 1.035rem;
    /* for --font-size-xs */
    --lh-sm: 0.937rem;
    /* for --font-size-base-sm */
    --lh-md-base: 0.975rem;
    /* for --font-size-md-base */
    --lh-base: 2rem;
    /* for --font-size-base */
    --lh-base-md: 2rem;
    /* for --font-size-base-md */
    --lh-lg: 2rem;
    /* for --font-size-lg */
    --lh-xl: 1.968rem;
    /* for --font-size-xl */
    --lh-xl-md: 3.375rem;
    /* for --font-size-xl-md */
    --lh-xl-lg: 2.231rem;
    /* for --font-size-xl-lg */
    --lh-xl-xl: 2.066rem;
    /* for --font-size-xl-xl */
    --lh-2xl: 2.231rem;
    /* for --font-size-2xl */
    --lh-2xl-sm: 2.377rem;
    /* for --font-size-2xl-sm */
    --lh-2xl-md: 2.908rem;
    /* for --font-size-2xl-md */
    --lh-2xl-lg: 3.375rem;
    /* for --font-size-2xl-lg */
    --lh-2xl-xl: 3.237rem;
    /* for --font-size-2xl-xl */
    --lh-3xl: 3.375rem;
    /* for --font-size-3xl */
    --lh-3xl-md: 2.875rem;
    /* for --font-size-3xl-md */
    --lh-3xl-lg: 1.2;
    /* for --font-size-3xl-lg */
    --lh-4xl: 6rem;
    /* for --font-size-4xl */
    --lh-5xl: 7.5rem;
    /* for --font-size-5xl */

    /* Letter Spacing - Generic */
    --ls-tight: 0.037rem;
    --ls-normal: 0.042rem;
    --ls-wide: 0.046rem;
    --ls-xl: 0.053rem;
    --ls-2xl: 0.1rem;
    --ls-3xl: 0.15rem;

    /* Letter Spacing - Font-size Specific */
    --ls-xs: 0.042rem;
    /* for --font-size-xs */
    --ls-sm: 0.037rem;
    /* for --font-size-base-sm */
    --ls-sm-md: 0.075rem;
    /* for --font-size-sm-md */
    --ls-md-base: 0.037rem;
    /* for --font-size-md-base */
    --ls-md-sm: 0.037rem;
    /* for --font-size-md-sm */
    --ls-base: 0.093rem;
    /* for --font-size-base */
    --ls-base-md: 0.15rem;
    /* for --font-size-base-md */
    --ls-lg: 0;
    /* for --font-size-lg */
    --ls-xl: 0.037rem;
    /* for --font-size-xl */
    --ls-xl-md: 0.045rem;
    /* for --font-size-xl-md */
    --ls-xl-lg: 0.046rem;
    /* for --font-size-xl-lg */
    --ls-xl-xl: 0.06rem;
    /* for --font-size-xl-xl */
    --ls-2xl: 0.037rem;
    /* for --font-size-2xl */
    --ls-2xl-sm: 0.046rem;
    /* for --font-size-2xl-sm */
    --ls-2xl-md: 0.043rem;
    /* for --font-size-2xl-md */
    --ls-2xl-lg: 0.037rem;
    /* for --font-size-2xl-lg */
    --ls-2xl-xl: 0.035rem;
    /* for --font-size-2xl-xl */
    --ls-3xl: 0.037rem;
    /* for --font-size-3xl */
    --ls-3xl-md: 0.037rem;
    /* for --font-size-3xl-md */
    --ls-4xl: 0.06rem;
    /* for --font-size-4xl */
}

/* ============================================
   Header Nav
   ============================================ */
.header-nav {
    position: relative;
    z-index: 1000;
    width: 100%;
    /* max-width: min(100vw, 1440px); */
    max-width: 82.828rem;
    margin: 0 auto;
    box-sizing: border-box;
    min-height: 4.312rem;
    /* 69px - logo height */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-nav .logo {
    display: flex;
    align-items: flex-start;
    gap: 0.468rem;
    /* 7.5px */
    padding: 1rem 0;
    flex-shrink: 0;
}

.header-nav .logo .emblem {
    width: 4.312rem;
    /* 69px */
    height: 4.312rem;
    /* 69px */
    overflow: hidden;
    flex-shrink: 0;
}

.header-nav .logo .emblem img {
    width: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.header-nav .logo .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: .281rem .468rem 0;
    position: relative;
    margin: auto auto 0;
}

.header-nav .logo h1.copy {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: var(--lh-sm);
    letter-spacing: var(--ls-tight);
    color: #050505;
    margin: 0;
    white-space: nowrap;
}


.header-nav .logo .logo-text {
    padding-top: 5px;
    width: 11.718rem;
    height: 2.109rem;
    position: relative;
}

.header-nav .logo .logo-text img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
}

.header-nav .hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 3.125rem;
    height: 3.125rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}


.header-nav .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #5e5959;
    border-radius: 3px;
    transition: all 0.3s ease;
    z-index: 102 !important;
}

.header-nav .hamburger[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.header-nav .hamburger[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.header-nav .hamburger[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.header-nav .right {
    display: flex;
    align-items: center;
    gap: 0.89rem;
    /* 14.25px between menu and button */
    padding: 0.421rem 0;
    /* 6.75px vertical padding */
    flex-shrink: 0;
}

.header-nav .menu {
    display: flex;
    align-items: center;
    gap: 0;
}

.header-nav .menu-item {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    min-width: 9rem;
    font-size: var(--font-size-base-md);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-3xl);
    color: var(--color-text-main);
    text-decoration: none;
    padding: 1.25rem 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
    position: relative;
}

.header-nav .menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25px;
    height: 60%;
    background-color: var(--color-nav-border);
    border-radius: 2.25px;
}

.header-nav .menu-item:first-child::before {
    display: none;
}

.header-nav .menu-item:hover {
    color: var(--color-text-highlight);
}

.header-nav .contact-button {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.187rem;
    border: 0.75px solid;
    cursor: pointer;
    padding: 1.25rem;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    letter-spacing: var(--ls-3xl);
    color: var(--btn-text-primary);
    background-color: var(--btn-bg-primary);
    border: 0.1rem solid var(--color-primary);
}

.header-nav .contact-button::after {
    content: '';
    width: 0.937rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.header-nav .contact-button:hover {
    background-color: var(--color-text-footer);
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
}

.header-nav .contact-button:hover::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}


/* ============================================
   Base Button Component
   ============================================ */
.btn-base {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.3s;
    border: 0.75px solid;
    cursor: pointer;
}

.btn-base::after {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Button Variant: Primary (Red bg, White text) */
.btn-primary {
    color: var(--btn-text-primary);
    background-color: var(--btn-bg-primary);
    border-color: var(--btn-bg-primary);
}

.btn-primary::after {
    background-image: url('assets/img/common/arrow-icon-wh.svg');
}

.btn-primary:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-text);
    opacity: 0.9;
}

.btn-primary:hover::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}

/* Button Variant: Secondary (White bg, Red text) */
.btn-secondary {
    color: var(--btn-text-secondary);
    background-color: var(--btn-bg-secondary);
    border-color: var(--btn-bg-secondary);
}

.btn-secondary::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}

.btn-secondary:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-text);
    opacity: 0.9;
}

.btn-secondary:hover::after {
    background-image: url('assets/img/common/arrow-icon-wh.svg');
}

/* ============================================
   First View (FV)
   ============================================ */
.fv {
    width: 100%;
    min-height: clamp(30rem, 66vh, 42.281rem);
    position: relative;
    margin-top: 0;
    overflow: hidden;
}

.fv .container {
    max-width: 82.828rem;
    /* 1325.25px */
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-top: 1.312rem;
}

.fv .copy {
    position: relative;
    z-index: 2;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    gap: 0.75rem;
}

.fv .copy-line {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-5xl);
    line-height: var(--lh-5xl);
    color: var(--color-text-main);
    white-space: nowrap;
}

.fv .copy-bg {
    background-color: rgba(255, 255, 255, 0.3);
    display: inline-block;
    max-width: fit-content;
    width: auto;
}

.fv .subcopy-bg {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1.125rem;
    display: inline-block;
    max-width: fit-content;
    width: auto;
}

.fv .subcopy {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-3xl);
    color: var(--color-text-main);
    /* 30px */
    letter-spacing: var(--ls-tight);
    width: 100%;
}

.fv .subcopy-bg {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1.125rem;
    display: inline-block;
    max-width: fit-content;
    width: auto;
}

.fv .subcopy-sp {
    display: none;
}

.fv .image {
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(20rem, 50vw, 41.625rem);
    max-width: 50%;
    aspect-ratio: 666 / 676.5;
    border-radius: 2.343rem;
    /* 37.5px */
    overflow: hidden;
    flex-shrink: 0;
}

.fv .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   Main Container
   ============================================ */
.wrapper {
    margin: 2.812rem 3.515rem 3.75rem;
    /* 45px / 56.25px / 60px */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 100rem;
    margin: 0 auto;
}

/* Global background logo for all pages - Desktop only */
@media screen and (min-width: 1025px) {
    main::before {
        content: '';
        position: absolute;
        top: clamp(25rem, 8vw, 8rem);
        right: 2%;
        width: clamp(9.75rem, 12.1875vw, 12.1875rem);
        height: clamp(60rem, 90vw, 90rem);
        min-height: 100vh;
        background-image: url(assets/img/common/bg-logo.webp);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        z-index: -1;
        pointer-events: none;
        opacity: 1;
    }

    .training-program-1::after {
        content: '';
        position: absolute;
        top: clamp(-14.3rem, 8vw, -34rem);
        right: 2%;
        width: clamp(9.75rem, 12.1875vw, 12.1875rem);
        height: clamp(60rem, 90vw, 90rem);
        min-height: 100vh;
        background-image: url(assets/img/training/bg-logo-t.webp);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        /*filter: invert(100%);*/
        z-index: 0;
        pointer-events: none;
        opacity: 1;
        clip-path: inset(clamp(14.3rem, -8vw, 34rem) 0 0 0);
    }

    .training-program-1::before {
        content: '';
        position: absolute;
        top: clamp(-14.3rem, 8vw, -34rem);
        right: 2%;
        width: clamp(9.75rem, 12.1875vw, 12.1875rem);
        height: clamp(60rem, 90vw, 90rem);
        min-height: 100vh;
        background-image: url(assets/img/common/bg-logo.webp);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        /*filter: invert(100%);*/
        z-index: 0;
        pointer-events: none;
        opacity: 1;
    }
}


/* ============================================
   Why Us Section
   ============================================ */
.why-us {
    margin-bottom: var(--space-section);
    /* 75px */
}

.why-us .container {
    max-width: 74.39rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* gap: var(--gap-heading); */
}

.why-us .heading {
    position: relative;
    padding-top: 2.109rem;
    padding-bottom: 2rem;
    line-height: var(--lh-loose);
}

.why-us .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 2.438rem;
    /* 39.022px */
    top: 1.335rem;
    /* 21.375px */
}

.why-us .heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
}


.why-us .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
    font-feature-settings: "palt";*/
}

/* Shared heading style (circle + underline) without changing font sizes */
.hero-heading {
    position: relative;
    padding-top: 2.109rem;
}

.hero-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3.75rem;
    height: 3.75rem;
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
}

.hero-heading .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 2.438rem;
    top: 1.335rem;
}


.why-us .subheading {
    position: relative;
    padding-left: 4rem;
}

.why-us .highlight-bar {
    position: absolute;
    left: 0;
    top: 0.234rem;
    width: 1.593rem;
    height: 75%;
    background-color: var(--color-text-highlight);
}

.why-us h2 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl-xl);
    line-height: var(--lh-2xl-xl);
    color: var(--color-text-main);
    text-align: center;
    letter-spacing: var(--ls-2xl-xl);
    padding-bottom: 1rem;
}

.why-us .list-frame {
    position: relative;
    max-width: 59.592rem;
    /* 953.481px */
    margin: 0 auto;
    padding: 1.828rem 6.077rem;
    /* 29.25px / 97.237px */
}

.why-us .list-frame:before {
    content: '';
    position: absolute;
    top: -9%;
    left: -12%;
    max-width: 200px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    background-image: url(assets/img/top/logo-sq.webp);
}


.why-us .list-frame-start,
.why-us .list-frame-end {
    position: absolute;
    width: 2.013rem;
    /* 32.214px */
    height: 3.882rem;
    /* 62.122px */
    object-fit: contain;
    display: block;
}

.why-us .list-frame-start {
    left: 0;
    top: 0;
}

.why-us .list-frame-end {
    right: 0;
    bottom: 0;
}

.why-us .list {
    list-style: none;
    padding-left: 0;
    position: relative;
}

.why-us .list-item {
    padding-left: 2.203rem;
    /* 35.25px */
    position: relative;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl-md);
    line-height: var(--lh-xl-md);
    color: var(--color-text-main);
    letter-spacing: var(--ls-xl-md);
    margin-bottom: 0.375rem;
}

.why-us .list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.031rem;
    /* 16.5px */
    height: 1.031rem;
    /* 16.5px */
    background-image: url('assets/img/common/check-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================
   Why Us Closing
   ============================================ */
.why-us .closing {
    margin-top: var(--gap-heading);
}

.why-us .closing .container {
    background-color: var(--color-text-highlight);
    padding: 1.75rem;
    text-align: center;
}


.why-us .closing p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-3xl-md);
    line-height: var(--lh-3xl-md);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-tight);
    margin-bottom: 0.375rem;
}

/* ============================================
   Why Outsourcing Section
   ============================================ */
.why-out {
    margin-bottom: var(--space-section);
    /* 75px */
}

.why-out .container {
    max-width: 74.39rem;
    /* 1190.25px */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-heading);
    /* 22.5px */
}

.why-out .heading {
    position: relative;
    padding-top: 2.109rem;
    /* 33.75px */
    /* max-width: 55.735rem;*/
    margin: 0 auto;
    padding-bottom: 0.281rem;
    line-height: var(--lh-loose);
}

.why-out .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 2.438rem;
    /* 39.022px */
    top: 1.335rem;
    /* 21.375px */
}

.why-out .heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
    /* background-image: url('assets/img/arrow/arrow_circle_right_navy.svg'); */
    /* background-size: contain; */
}


.why-out .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
    font-feature-settings: "palt";*/
}

.why-out .desc {
    background-color: var(--color-bg-gray);
    padding: 0.75rem;
    max-width: 45.468rem;
    margin: 0 auto;
}

.why-out .desc p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
    text-align: center;
}

.why-out .list-frame {
    position: relative;
    max-width: 60rem;
    /* 921.981px */
    margin: 0 auto;
    padding: 1.2rem 10.5rem;
    /* 19.237px / 183.75px */
}

.why-out .list-frame-start,
.why-out .list-frame-end {
    position: absolute;
    width: 2.013rem;
    /* 32.214px */
    height: 3.882rem;
    /* 62.122px */
    object-fit: contain;
    display: block;
}

.why-out .list-frame-start {
    left: 0;
    top: 0;
}

.why-out .list-frame-end {
    right: 0;
    bottom: 0;
}

.why-out .list-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    font-style: italic;
    color: var(--color-bg-headline-bars);
    text-align: center;
    margin-bottom: 1.296rem;
    max-width: 60rem;
    margin-left: -40px;
    letter-spacing: var(--ls-tight);
}

.why-out .list {
    list-style: none;
}

.why-out .list-item {

    padding-left: 1rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    margin-bottom: 0.375rem;
    position: relative;
}

.why-out .list-item::before {
    content: '■';
    position: absolute;
    left: -1.312rem;
    /* -21px */
    color: var(--color-text-highlight);
    font-size: var(--font-size-md-base);
}

.why-out .note {
    position: relative;
    padding-left: 1.593rem;
    width: 100%;
    max-width: 980.25px;
    margin: 0 auto;
    margin-top: var(--gap-heading);
}

.why-out .highlight-bar {
    height: 100%;
    /* 77.25px */
    position: absolute;
    left: 0;
    top: 0.234rem;
    width: 1.593rem;
    background-color: var(--color-text-highlight);
}

.why-out .note p {
    position: relative;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    /*font-size: var(--font-size-xl);*/
    font-size: 18px;
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    margin-bottom: 0.375rem;
    max-width: 60rem;
    margin: 0 auto;
    width: 100%;
}


.why-out .note p::before {
    content: '';
    position: absolute;
    left: -4%;
    top: -20%;
    width: 4.5rem;
    height: 4.5rem;
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
}


/* ============================================
   Solution Section
   ============================================ */
.solution {
    margin-bottom: var(--space-section);
    /* padding: 0 3.046rem; */
}

.solution .container {
    max-width: 66.046rem;
    /* 1056.75px */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-heading);
    /* 22.5px */
}

.solution .heading {
    position: relative;
    padding-top: 2.109rem;
    /* 33.75px */
    /* 1013.269px */
    margin: 0 auto;
    padding-bottom: 0.281rem;
    line-height: var(--lh-loose);
}

.solution .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 2.438rem;
    /* 39.022px */
    top: 1.335rem;
    /* 21.375px */
}

.solution .heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
    /* background-image: url('assets/img/arrow/arrow_circle_right_navy.svg'); */
    /* background-size: contain; */
}


.solution .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
    font-feature-settings: "palt";*/
}

.solution .main {
    display: flex;
    gap: 3.187rem;
    /* 48.75px */
    align-items: stretch;
    max-width: 55.64rem;
    /* 890.25px */
    margin: 0 auto;
}

.solution .left {
    flex: 0 0 27.187rem;
    /* 435px */
    min-width: 0;
    border-radius: 0.468rem;
    /* 7.5px */
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: stretch;
}

.solution .left img {
    width: 100%;
    height: 100%;
    max-height: 370px;
    object-fit: cover;
    display: block;
}

.solution .right {
    /*flex: 1;*/
    /*flex: 0 0 24rem;*/
    display: flex;
    flex-direction: column;
    gap: var(--gap-heading);
}

.solution .subheading {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl-lg);
    line-height: var(--lh-2xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-wide);
}

.solution .desc {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
}

.solution .desc-list {
    list-style: none;
    padding-left: 0;
}

.solution .desc-list li {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    margin-bottom: 0.375rem;
}

.solution .desc-bottom {
    max-width: 55.5rem;
    /* 888px */
    margin: 0 auto;
    padding: 0.468rem;
    /* 7.5px */
}

.solution .desc-bottom p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
}

.underline {
    padding-bottom: 0.234rem;
    /* 3.75px */
    background-image: linear-gradient(to bottom, transparent 0%, transparent calc(100% - 0.3125rem), var(--color-desc-underlines) calc(100% - 0.3125rem), var(--color-desc-underlines) 100%);
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.solution .button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 55.64rem;
    margin: 0 auto;
}

.solution .button-left {
    flex: 1;
}

.solution .button-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.solution .button {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--btn-text-primary);
    background-color: var(--btn-bg-primary);
    border: 0.89px solid var(--btn-bg-primary);
    padding: 0.796rem 1.875rem;
    border-radius: 1.668rem;
    text-decoration: none;
    letter-spacing: var(--ls-md-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.187rem;
    transition: all 0.3s;
    cursor: pointer;
    border: 0.1rem solid var(--color-text-footer);
}

.solution .button::after {
    content: '';
    width: 0.89rem;
    height: 0.89rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.solution .button:hover {
    background-color: var(--color-text-footer);
    border-color: var(--btn-hover-border);
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
}

.solution .button:hover::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}

/* ============================================
   Steps Section
   ============================================ */
.steps {
    background-color: var(--color-bg-steps);
    border-radius: 0.937rem;
    /* 15px */
    box-shadow: 0 0.937rem 0.937rem rgba(161, 6, 89, 0.27);
    padding: 2.156rem 6.562rem;
    /* 22.5px / 105px */
    margin-bottom: var(--space-section);
    /* 75px */
    max-width: 63.468rem;
    /* 1015.5px */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

.steps::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14.203rem;
    /* 227.25px */
    background-color: var(--color-bg-steps-accent);
    opacity: 0.4;
}

.steps .container {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    /* 30px */
    align-items: center;
    position: relative;
    z-index: 1;
}

.steps .title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    text-align: center;
    letter-spacing: var(--ls-tight);
}

.steps .items {
    display: flex;
    gap: 5.39rem;
    /* 86.25px */
    justify-content: center;
}

.steps .step-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.5rem;
    position: relative;
    width: 12.701rem;
}

.steps .step-item img,
.training-steps .step-item img {
    width: 11.25rem;
    /* 180px */
    height: 11.25rem;
    /* 180px */
    object-fit: cover;
}

.steps .subtitle {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    text-align: left;
}

.steps .desc {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    text-align: left;
    letter-spacing: var(--ls-tight);
}

/* ============================================
   Customers Voice Section
   ============================================ */
.customers-voice {
    margin-bottom: var(--space-section);
    /* 75px */
    max-width: 62.718rem;
    /* 1003.5px */
    margin-left: auto;
    margin-right: auto;
}

.customers-voice .container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-heading);
    /* 22.5px */
}

.customers-voice .heading {
    position: relative;
    padding-top: 2.109rem;
    /* 33.75px */
    /*max-width: 59.531rem;*/
    /* 952.5px */
    margin: 0 auto;
    padding-bottom: 0.281rem;
    line-height: var(--lh-loose);
}


.customers-voice .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 3.609rem;
    /* 57.75px */
    top: .7rem;
    /* 21.375px */
}

.customers-voice .heading::before {
    content: '';
    position: absolute;
    left: 0.923rem;
    /* 1.97% */
    top: -0.3rem;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
    /* background-image: url('assets/img/arrow/arrow_circle_right_navy.svg'); */
    /* background-size: contain; */
}

.customers-voice .heading-text {
    /* border-bottom: 3.75px solid var(--color-text-highlight); */
    /* border-radius: 0.093rem; */
    /* display: inline; */
    /* box-decoration-break: clone; */
    /* -webkit-box-decoration-break: clone; */
    /* text-decoration: underline; */
    /* border-color: var(--btn-bg-primary); */

    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
        font-feature-settings: "palt";*/
}


.customers-voice .main {
    display: flex;
    gap: 3.187rem;
    margin: 0 auto;
    /* 51px */
    align-items: flex-start;
}

.customers-voice .desc {
    flex: 0 0 26rem;
}


.customers-voice h3 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl-sm);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-main);
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--gap-heading);
    /* 22.5px */
}

.customers-voice .desc-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
}

.customers-voice .desc-text strong {
    font-weight: 700;
}

.customers-voice .image {
    flex: 0 0 27.187rem;
    /* 435px */
    height: 19.546rem;
    /* 312.75px */
    border-radius: 0.468rem;
    /* 7.5px */
    overflow: hidden;
    background-color: #fff;
}

.customers-voice .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   Suggestion Section
   ============================================ */

.suggestion {
    background-color: var(--color-bg-gray);
    position: relative;
    margin-bottom: var(--space-section);
    padding: 37.5px;
    width: 100%;
    /* width: 90vw; */
    height: 100%;
    z-index: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.suggestion .container {
    width: 100%;
    max-width: 1050.25px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-heading);
}

/*
.suggestion .heading {
    position: relative;
    padding-left: 1.593rem;
 
padding-top: 0.281rem;

}
*/
.suggestion .highlight-bar {
    height: 90%;
    /* 99.75px */
    position: absolute;
    left: 0;
    top: 0.234rem;
    width: 1.593rem;
    background-color: var(--color-text-highlight);
}


.suggestion .heading-text {
    width: 100%;
    /* max-width: 840px; */
    margin: 0 auto;
    padding-left: 10px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-3xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);

}

.suggestion .heading {
    position: relative;
    padding-left: 1.593rem;
    padding-top: 0.281rem;
    max-width: 900px;
    padding: 0 60px;
    margin: 0 auto;
}

.suggestion .text-highlight {
    color: var(--color-text-highlight);
}

.suggestion .text {
    max-width: 54.046rem;
    /* 864.75px */
    margin: 0 auto;
    position: relative;
}

.suggestion .text::before {
    content: '';
    position: absolute;
    top: 0;
    right: -5%;
    width: 180px;
    height: 100%;
    min-height: 180px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    background-image: url(assets/img/top/logo-sq.webp);
    z-index: 0;
    pointer-events: none;
}

.suggestion .text p {
    position: relative;
    z-index: 1;
}

.suggestion .text p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl);
    line-height: var(--lh-xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-wide);
    margin-bottom: 1.125rem;
    position: relative;
    z-index: 1;
}

/* ============================================
   Closing Banner
   ============================================ */

.closing-banner {
    position: relative;
    width: 100%;
    min-height: 26.015rem;
    /* margin-bottom: var(--space-section); */
    overflow: hidden;
}

/*
.closing-banner .bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #c3f4ff 0%, #dcd5de 28.511%, #ffa3ac 109.82%);
    opacity: 1;

}

.closing-banner .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/img/top/closing-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
}*/


.closing-banner .container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: block;
}

.closing-banner-image {
    width: 100%;
    max-width: 90vw;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

/*
.closing-banner .copy {
    flex: 1;
}

.closing-banner .heading {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-4xl);
    line-height: var(--lh-4xl);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-4xl);
    margin-bottom: 1.125rem;
    background-color: var(--color-primary);
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    text-overflow: ellipsis;
    padding: 0.375rem 0.75rem;
}

.closing-banner .bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 2rem;
    gap: 1rem;
}

.closing-banner .desc {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl-md);
    line-height: var(--lh-2xl-md);
    color: var(--color-text-main);
    letter-spacing: var(--ls-2xl-md);
    display: inline;

}

.closing-banner .desc span {
    margin-left: 0.1rem;
    margin-bottom: 1.125rem;
    border-bottom: 3.75px solid var(--color-text-highlight);
    border-radius: 0.093rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-bottom: 0rem;
  
}



.closing-banner .button {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-3xl-md);
    letter-spacing: var(--ls-3xl-md);
    color: var(--btn-text-primary);
    background-color: var(--btn-bg-primary);
    border: 0.234rem solid var(--color-text-footer);
    padding: 1.125rem 2.25rem;
    border-radius: 3.14rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.3s;
    white-space: nowrap;
    cursor: pointer;
}

.closing-banner .button::after {
    content: '';
    width: 1.518rem;
    height: 1.518rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.closing-banner .button:hover {
    background-color: var(--color-text-footer);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.closing-banner .button:hover::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}
*/
.closing-banner .image {
    flex: 0 0 17.906rem;
    height: 100%;
    overflow: hidden;
}

.closing-banner .image img {
    position: absolute;
    min-width: 262.5px;
    right: 10%;
    top: 0%;
    z-index: -1;
    object-fit: cover;
}

/* ============================================
   News Section
   ============================================ */
.news {
    margin-bottom: var(--space-section);
    /* 75px */
    max-width: 68.25rem;
    /* 1092px */
    margin-left: auto;
    margin-right: auto;
}

.news .container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news .heading {
    position: relative;
    padding-top: 2.109rem;
    /* 33.75px */
    margin-bottom: 1.875rem;
    /* 30px */
}

.news .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 0.125rem;
    /* -28.244px */
    top: 1rem;
    /* 7.875px */
}

.news .heading::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
    /* background-image: url('assets/img/arrow/arrow_circle_right_navy.svg'); */
    /* background-size: contain; */
}

.news .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
}

.news .list {
    list-style: none;
}

.news .list-item {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.406rem 0;
    /* 22.5px */
    border-bottom: 0.75px solid #cccccc;
    position: relative;
}

.news .list-date {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-sm);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-main);
    min-width: 3.796rem;
    /* 60.75px */
}

.news .list-new-icon {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-relaxed);
    color: var(--color-btn-text);
    background-color: var(--color-btn-bg);
    border: 0.75px solid var(--color-btn-bg);
    padding: 0.125rem 1rem;
    border-radius: 1.25rem;
    margin-left: 0.5rem;
}


.news .list-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    text-decoration: none;
}

.news .list-icon {
    width: 1.25rem;
    /* 18.75px */
    height: 1.25rem;
    /* 18.397px */
    margin-left: auto;
}

/* ============================================
   Column Banners
   ============================================ */
.column-banners {
    margin-bottom: var(--space-section);
    /* 75px */
}

.column-banners .container {
    display: flex;
    gap: 6rem;
    /* 110.25px */
    justify-content: center;
    max-width: 68.39rem;
    /* 1094.25px */
    margin: 0 auto;
}

.column-banners .banner {
    position: relative;
    width: 28.737rem;
    /* 459.807px */
    width: 100%;
    height: 100%;
    border-radius: 0.836rem;
    /* 13.383px */
    overflow: hidden;
    box-shadow: 0 0 0.937rem rgba(161, 6, 89, 0.5);
}


.column-banners .banner-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.87);
    border-radius: 0.836rem;
    /* 13.383px */
    z-index: 1;
}

.column-banners .banner:first-child .banner-overlay {
    display: none;
}

.column-banners .banner-image {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.column-banners .banner:first-child .banner-image {
    top: -5.765rem;
    /* -92.25px */
}

.column-banners .banner:last-child .banner-image {
    left: -1.35rem;
    /* -21px */
    top: -7.734rem;
    /* -123.75px */
    width: 30.609rem;
    /* 489.75px */
    height: 100%;
}

.column-banners .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.column-banners .banner-content {
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.937rem 0.937rem;
    /* 13.5px / 15px */
    display: flex;
    flex-direction: column;
    gap: 0.609rem;
    /* 9.75px */
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
}


.column-banners .banner-heading {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    letter-spacing: var(--ls-2xl);
    align-self: center;
}

.column-banners .button {
    font-family: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-relaxed);
    color: var(--btn-text-primary);
    background-color: var(--btn-bg-primary);
    border: 0.75px solid var(--btn-bg-primary);
    padding: 0.093rem 0.937rem;
    border-radius: 1.137rem;
    text-decoration: none;
    letter-spacing: var(--ls-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.3s;
    cursor: pointer;
}

.column-banners .button::after {
    content: '';
    width: 0.953rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.column-banners .button:hover {
    background-color: var(--color-text-footer);
    border-color: var(--btn-hover-border);
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
}

.column-banners .button:hover::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background-color: var(--color-text-highlight);
    padding: 1.968rem 11.109rem;
    /* 31.5px / 177.75px */
    width: 100%;
}

.footer .container {
    max-width: 90rem;
    /* 1440px */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.968rem;
    /* 31.5px */
}

.footer .links {
    display: flex;
    gap: 4.64rem;
    /* 74.25px */
    justify-content: center;
}

.footer .links-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 18.234rem;
    /* 291.75px */
}

.footer .menu-container {
    display: flex;
    gap: 3rem;
}

.footer .links-column-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer .links-column-inner.sp_display {
    display: flex;
}

.footer .menu {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-footer);
    text-decoration: none;
    letter-spacing: var(--ls-tight);
    transition: opacity 0.3s;
    text-wrap: nowrap;
}

.footer .menu:hover {
    opacity: 0.8;
}

.footer .logo {
    margin-top: 1.5rem;
}

.footer .logo img {
    width: 16rem;
    height: auto;
    display: flex;
    margin-top: 2rem;
}

.footer .address {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-xl);
    line-height: var(--lh-xl);
    color: var(--color-text-footer);
    margin-top: 1.5rem;
    min-width: 200px;
    text-wrap: nowrap;
}

.footer .contact-container {
    display: flex;
    flex-direction: column;
}

.footer .contact-text {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base-md);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-xl);
    margin-bottom: 1rem;
    min-width: 18rem;
}

.footer .contact-button {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl-xl);
    line-height: var(--lh-xl-xl);
    color: var(--btn-text-secondary);
    background-color: var(--btn-bg-secondary);
    border: 0.234rem solid var(--color-text-footer);
    padding: 1.125rem 1.5rem;
    border-radius: 2.279rem;
    text-decoration: none;
    letter-spacing: var(--ls-4xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    transition: all 0.3s;
    cursor: pointer;
}

.footer .contact-button::after {
    content: '';
    width: 1.537rem;
    height: 1.537rem;
    background-image: url('assets/img/common/arrow-icon-red.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.footer .contact-button:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-text);
    border: 0.234rem solid var(--color-text-footer);

}

.footer .contact-button:hover::after {
    background-image: url('assets/img/common/arrow-icon-wh.svg');
}

.footer .phone-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer .phone {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.footer .phone img {
    width: 1.223rem;
    /* 19.569px */
    height: 1.223rem;
    /* 19.569px */
}

.footer .numbers {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-xl);
}

.footer .hours {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl);
    line-height: var(--lh-loose);
    color: var(--color-text-footer);
    justify-content: center;
    display: flex;
}

.footer .copy {
    border-top: 0.75px solid rgba(255, 255, 255, 0.3);
    padding-top: 1.401rem;
    /* 22.41px */
    text-align: center;
}

.footer .copy p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-footer);
}

.footer .copy br {
    display: none;
}


/* ============================================
   Training Page Styles (&common)
   ============================================ */

/* Training FV */
.training-fv,
.column-list-fv,
.column-fv,
.company-info-fv,
.contact-fv,
.privacy-policy-fv {
    width: 100%;
    margin-bottom: var(--space-section);
}

.training-fv .container,
.column-list-fv .container,
.column-fv .container,
.company-info-fv .container,
.contact-fv .container,
.privacy-policy-fv .container {
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.813rem clamp(1rem, 3vw, 3.046rem) 0;
}

.training-fv .title-section,
.column-list-fv .title-section,
.column-fv .title-section,
.company-info-fv .title-section,
.contact-fv .title-section,
.privacy-policy-fv .title-section {
    flex: 1;
    position: relative;
    margin-bottom: 0.75rem;
    width: 100%;
}


.training-fv .title-texts,
.column-list-fv .title-texts,
.column-fv .title-texts,
.company-info-fv .title-texts,
.contact-fv .title-texts,
.privacy-policy-fv .title-texts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.5rem;
    padding-left: 2rem;
}

.column-list-fv .title-section,
.column-fv .title-section {
    flex: 1;
    position: relative;
    margin-bottom: 0.75rem;
    width: 100%;
    margin-left: -30px;
}

.title-texts::before {
    content: '';
    position: absolute;
    left: 0rem;
    top: -1rem;
    width: 3.75rem;
    height: 3.75rem;
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;
}

.training-fv .title-deco,
.column-list-fv .title-deco,
.column-fv .title-deco,
.company-info-fv .title-deco,
.contact-fv .title-deco,
.privacy-policy-fv .title-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: var(--ls-xs);
    color: var(--color-text-main);
}

.training-fv .title-main,
.column-list-fv .title-main,
.column-fv .title-main,
.company-info-fv .title-main,
.contact-fv .title-main,
.privacy-policy-fv .title-main {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 2.9rem;
    /*font-size: var(--font-size-3xl-lg);*/
    line-height: var(--lh-3xl-lg);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl-lg);
}

.training-fv .title-vector,
.column-list-fv .title-vector,
.column-fv .title-vector,
.company-info-fv .title-vector,
.contact-fv .title-vector,
.privacy-policy-fv .title-vector {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 37.5%;
    right: 85.07%;
}

.training-fv .fv-image,
.column-list-fv .fv-image,
.column-fv .fv-image,
.company-info-fv .fv-image,
.contact-fv .fv-image {
    width: 41.297rem;
    height: 16.828rem;
    border-radius: 2.343rem;
    overflow: hidden;
    flex-shrink: 0;
}

.training-fv .fv-image img,
.column-list-fv .fv-image img,
.column-fv .fv-image img,
.company-info-fv .fv-image img,
.contact-fv .fv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.contact-fv .fv-image img {
    object-position: center 70%;
}

.column-list-fv .fv-image img,
.column-fv .fv-image img {
    object-position: center 55%;

}

/* Training Intro */
.training-intro {
    margin-bottom: var(--space-section);
}

.training-intro .container {
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.training-intro .heading {
    position: relative;
    /* max-width: 56.25rem; */
    margin: 0 auto;
    margin-bottom: 0.75rem;
}

.training-intro .heading-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: var(--ls-xs);
    color: var(--color-text-main);
    margin-bottom: 0.563rem;
    padding-left: 2rem;
}

.training-intro .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
    font-feature-settings: "palt";*/
}

.training-intro .heading::before {
    content: '';
    position: absolute;
    left: 0rem;
    top: -2rem;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: #FEEAF2;
    border-radius: 50%;
    z-index: -1;

}


.training-intro .intro-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    max-width: 60em;
    margin: 0 auto;
}

.training-intro .intro-text {
    flex: 1;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-lg);
    color: var(--color-text-main);
    letter-spacing: var(--ls-lg);
}

.training-intro .intro-text p {
    margin-bottom: 0;
}

.training-intro .intro-image {
    width: 18.75rem;
    height: 18.75rem;
    border-radius: 0.468rem;
    overflow: hidden;
    flex-shrink: 0;
}

.training-intro .intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Training Checklist */
.training-checklist {
    margin-bottom: var(--space-section);
}

.training-checklist .container {
    max-width: 66rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.313rem;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.training-checklist .list-frame {
    position: relative;
    min-height: 17.499rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 2rem 11.5em;
}

.training-checklist .list-frame-start {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.013rem;
    height: 3.883rem;
}

.training-checklist .list-frame-end {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.013rem;
    height: 3.883rem;
}

.training-checklist .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    list-style: none;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: var(--lh-2xl);
    letter-spacing: var(--ls-2x);
    color: var(--color-text-main);
}

.training-checklist .list li {
    position: relative;
    margin-bottom: 0;
    padding-left: 1rem;
}

.training-checklist .list li::before {
    content: '■';
    position: absolute;
    left: -1.312rem;
    color: var(--color-text-highlight);
    font-size: var(--font-size-md-base);
}

.training-checklist .closing-banner {
    background-color: var(--color-primary);
    padding: 0.313rem 3.125rem;
    text-align: center;
}

.training-checklist .training-banner {
    z-index: 1;
    background-color: var(--color-primary);
    padding: .5em 3.125rem;
    text-align: left;
    margin-top: 2.5rem;
    margin-left: calc(-1 * clamp(1rem, 3vw, 3.046rem));
    margin-right: calc(-1 * clamp(1rem, 3vw, 3.046rem));
    width: calc(100% + 2 * clamp(1rem, 3vw, 3.046rem));
}

.training-checklist .training-banner-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl-lg);
    line-height: var(--lh-xl-lg);
    color: #fff;
    letter-spacing: 0.094rem;
    white-space: pre-wrap;
    margin: 0;
}

/* Training program Title */


.training-program .title-wrapper {
    position: relative;
    width: 100%;
    /* min-height: 6.75rem; */
    max-width: 62rem;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
}

.training-program .title-vector-circle {
    position: absolute;
    left: 0;
    top: 1.718rem;
    width: 3.75rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-program .vector-circle {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
}

.training-program .title-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.609rem;
    line-height: 1.036rem;
    color: #050505;
    letter-spacing: 0.043rem;
    white-space: nowrap;
}

.training-program .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
    font-feature-settings: "palt";*/
}

.training-program .title-vector-line {
    width: 47.156rem;
    height: 0.234rem;
    flex-shrink: 0;
    max-width: 100%;
}

.training-program .vector-line {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
}

.training-checklist .closing-banner p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl-sm);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-2xl-sm);
}

/* Training Program */
.training-program {
    /*margin-bottom: var(--space-section);*/
    padding: 2rem clamp(1rem, 3vw, 13.938rem);
}

.training-program-1 {
    background-color: var(--color-bg-training);
    position: relative;
    overflow: visible;
}


.training-program-2 {
    background-color: #fff;
}

.training-program .container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.125rem;
    position: relative;
    z-index: 1;
}

.training-program .title-content,
.training-program-1 .keypoint-title,
.training-program-2 .keypoint-title,
.training-schedule .schedule-title {
    position: relative;
    flex-direction: column;
    display: flex;
    z-index: 2;
}

.training-program .title-content::before,
.training-schedule .schedule-title::before {
    content: '';
    position: absolute;
    left: -13%;
    top: -13%;
    width: 3.75rem;
    height: 3.75rem;
    background-color: var(--color-bg-deco);
    border-radius: 50%;
    z-index: -1;
}

.training-program .title-content:before {
    background-color: var(--color-circle-title-main);
    left: -5%;
    top: 10%;
}

.training-program-1 .keypoint-title::before {
    background-color: var(--color-circle-keypoint-1);
}

.training-program-2 .keypoint-title::before {
    background-color: var(--color-circle-keypoint-2);
}

.training-schedule .schedule-title::before {
    background-color: var(--color-bg-deco);
}

.training-program .program-keypoint {
    display: flex;
    justify-content: center;
    align-items: center;
}

.training-program .keypoint-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    letter-spacing: var(--ls-normal);
    position: absolute;
    left: 2.438rem;
    top: 1.335rem;
    z-index: 1;
    text-shadow:
        -0.1rem -0.1rem 0 #fff,
        0.1rem -0.1rem 0 #fff,
        -0.1rem 0.1rem 0 #fff,
        0.1rem 0.1rem 0 #fff,
        -0.1rem 0 0 #fff,
        0.1rem 0 0 #fff,
        0 -0.1rem 0 #fff,
        0 0.1rem 0 #fff;
}

.training-program-1 .keypoint-deco::before {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 3.75rem;
    height: 3.75rem;
    background-color: var(--color-circle-keypoint-1);
    border-radius: 50%;
    z-index: -1;
}

.training-program-2 .keypoint-deco::before {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 3.75rem;
    height: 3.75rem;
    background-color: var(--color-circle-keypoint-2);
    border-radius: 50%;
    z-index: -1;
}

.training-program .keypoint {
    position: relative;
    width: 39.609rem;
    min-height: 14.859rem;
    padding: 1.875rem 3.5rem;
    z-index: 2;
}


.training-program .keypoint-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-3xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl);
    margin-bottom: 2rem;
    text-wrap: nowrap;
    position: relative;
    z-index: 2;
}

.training-program .keypoint-list {
    list-style: none;
    gap: 1rem;
    flex-direction: column;
    display: flex;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    gap: 1rem;
    font-size: var(--font-size-2xl-sm);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-main);
    letter-spacing: var(--ls-2xl-sm);
    text-wrap: nowrap;
    padding-left: 2rem;
}

.training-program .keypoint-list li::before {
    content: '■';
    position: absolute;
    left: 3rem;
    color: var(--color-text-main);
    font-size: var(--font-size-md-base);
}


.training-program .keypoint-list li {
    margin-bottom: 0;
}

.training-program .program-details {
    display: flex;
    flex-direction: column;
    gap: 0.813rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.training-program .program-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-3xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl);
    text-align: center;
}

.training-program .day-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 62rem;
    margin-bottom: 1rem;
}

.training-program .day-tab {
    background-color: #fff;
    height: 1.828rem;
    border-radius: 0.938rem;
    padding: 0 1rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: 1.828rem;
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
}


.training-program-1 .day-tab {
    background-color: #fff;
}

.training-program-2 .day-tab {
    background-color: var(--color-bg-training);
}

.training-program .day-connector {
    position: absolute;
    width: 24rem;
    top: 10%;
    transform: translateY(-50%);
    border-top: 0.25rem solid #fff;
    align-self: center;
    flex-shrink: 0;
    z-index: -1;
}

.training-program .day-connector::before,
.training-program .day-connector::after {
    content: '';
    position: absolute;
    top: 60%;
    transform: translateY(-60%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: #fff;
    border-radius: 50%;
}

.training-program .day-connector::before {
    left: 0;
}

.training-program .day-connector::after {
    right: 0;
}

.training-program .program-cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
}

.training-program .program-cards-wrapper {
    display: flex;
    gap: 0rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.training-program .program-card {
    background-color: #fff;
    padding: 1rem 1.562rem;
    width: 100%;
    border: 15px solid var(--color-bg-training);
    border-radius: 2rem;
}

.training-program .program-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.training-program .program-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.training-program .step-number {
    width: 1.828rem;
    height: 2.563rem;
    position: relative;
    flex-shrink: 0;
}

.training-program .step-number::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.422rem;
    width: 1.828rem;
    height: 1.828rem;
    background-color: var(--color-bg-training);
    border-radius: 50%;
    z-index: -1;
}

.training-program .step-number {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: 2.563rem;
    color: var(--color-text-main);
    text-align: center;
    position: relative;
    z-index: 1;
}

.training-program .step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0.313rem;
}

.training-program .step-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
    margin-bottom: 0;
}

.training-program .step-desc {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
    margin-bottom: 0;
}

.training-program .program-info {
    background-color: #fff;
    border-radius: 0.938rem;
    box-shadow: 0 0.938rem 0.938rem 0 rgba(161, 6, 89, 0.27);
    padding: 2.5rem 3.25rem;
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    gap: 1.875rem;
    max-width: 62rem;
    align-items: center;
    text-align: left;
    width: 100%;
    margin: 0 auto;
}

.training-program-2 .program-info {
    box-shadow: 0 0.938rem 0.938rem 0.5rem rgba(161, 6, 89, 0.27)
}

.training-program .program-info-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.training-program .program-number {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    font-size: 1.58rem;
    line-height: 1.744rem;
    color: var(--color-text-main);
    letter-spacing: 0.07rem;
    transform: skewX(-17.172deg);
    display: inline-block;
    padding-top: 0.1rem;
    padding-bottom: 0.15rem;
}


.training-program .program-name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-2xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-2xl);
}

.training-program .program-description {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl-sm);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-main);
    letter-spacing: var(--ls-2xl-sm);
}

.training-program .program-divider {
    height: 0.234rem;
    background-color: #FF408C;
    border-radius: 1.406rem;
    width: 100%;
}

.training-program .program-divider-2 {
    background-color: #FF6363;
}

.training-program .program-price {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    position: relative;
}

.training-program .program-price img {
    width: 1.127rem;
    height: 3.846rem;
    position: absolute;
    left: 0;
    top: 15%;
}

.training-program .price-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-3xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl);
    padding-left: 2rem;
    display: flex;
    gap: 0.2rem;
    flex-direction: column;
    justify-content: flex-start;
}

.training-program .price-text p {
    margin-bottom: 0;
    position: relative;
}

.training-program-1 .price-text p::before {
    max-height: 100%;
    width: 1.127rem;
    height: 1.127rem;
    position: absolute;
    left: -1.85rem;
    top: 40%;
    /* transform: translateY(-50%); */
    background-image: url(assets/img/training/price-icon-1.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
}

.training-program-2 .price-text p::before {
    max-height: 100%;
    width: 1.127rem;
    height: 1.127rem;
    position: absolute;
    left: -1.85rem;
    top: 40%;
    /* transform: translateY(-50%); */
    background-image: url(assets/img/training/price-icon-2.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
}

/* Training Steps */
.training-steps {
    background-color: #fff;
    box-shadow: 0 0 1.875rem 0 rgba(161, 6, 89, 0.3);
    margin-bottom: var(--space-section);
    padding: 2.344rem 0;
    position: relative;
    overflow: hidden;
}

.training-steps::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 13.641rem;
    background-color: #F6B5BB;
    z-index: 0;
}

.training-steps .container {
    max-width: 74.698rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    align-items: center;
    padding: 0 clamp(1rem, 3vw, 7.078rem);
    position: relative;
    z-index: 1;
}

.training-steps .title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl-md);
    line-height: var(--lh-3xl-md);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl-md);
    text-align: center;
}

.training-steps .items {
    display: flex;
    gap: 2.813rem;
    align-items: flex-start;
    justify-content: center;
}

.training-steps .step-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
    width: 100%;
}

.training-steps .step-item .subtitle {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-lg);
    color: var(--color-text-main);
    letter-spacing: var(--ls-lg);
    text-align: left;
}

.training-steps .step-item .desc {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    text-align: left;
}

/* Training Schedule */
.training-schedule {
    margin: 0 2rem;
    margin-bottom: var(--space-section);
}

.training-schedule .container {
    max-width: 68.188rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    background-color: #fff;
    border-radius: 0.938rem;
    box-shadow: 0 0.938rem 0.938rem 0.5rem rgba(161, 6, 89, 0.27);
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem clamp(1rem, 3vw, 3.046rem);
}



.training-schedule .schedule-title {
    margin: 0 auto;
    position: relative;
    min-height: 5.438rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    max-width: 300px;
    flex-direction: column;
}

.training-schedule .schedule-title .title-deco {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: var(--ls-xs);
    color: var(--color-text-main);
    margin-bottom: 0.063rem;
}

.training-schedule .schedule-title .title-main {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl-md);
    line-height: var(--lh-3xl-md);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl-md);
}

.training-schedule .heading-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-loose);
    color: var(--color-text-main);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-decoration-color: var(--btn-bg-primary);
    text-decoration-thickness: 3px;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-underline-offset: 0.325rem;
    /*word-wrap: break-word;*
    font-feature-settings: "palt";*/
}

.training-schedule .schedule-table {
    width: 100%;
}

.training-schedule table {
    width: 100%;
    border-collapse: collapse;
}

.training-schedule thead th {
    background-color: #F6B5BB;
    border: 0.047rem solid #B3B3B3;
    padding: 0.633rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-lg);
    color: var(--color-text-main);
    text-align: center;
}

.training-schedule tbody td {
    background-color: #fff;
    border: 0.047rem solid #B3B3B3;
    padding: 0.633rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text-main);
    text-align: center;
}

.training-schedule tbody td:last-child {
    align-items: flex-start;
}

.training-schedule .badge {
    display: inline-block;
    padding: 0.328rem 0.938rem;
    border-radius: 1.406rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text-footer);
}

.training-schedule .badge-primary {
    background-color: #FF408C;
}

.training-schedule .badge-success {
    background-color: #12A468;
}

.training-schedule .schedule-note {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}

/* Training Closing Banner */
.training-closing {
    height: 100%;
    position: relative;
    margin-bottom: var(--space-section);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.training-closing .bg {
    position: absolute;
    background-color: #F5F5F5;
    height: 100%;
    width: 100%;
    inset: 0;
    z-index: 0;
}

.training-closing-image {
    width: 100%;
    max-width: 90vw;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

.training-closing .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/img/banners/training-closing.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
}

.training-closing .container {
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    align-items: center;
    max-width: 100%;
    gap: 2rem;
}

/* ============================================
   Column List Page Styles
   ============================================ */

.column-list-main {
    margin-bottom: var(--space-section);
}

.column-list-main .container {
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.column-list-content {
    flex: 1;
    display: flex;
    gap: 4.813rem;
}

.column-list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.813rem;
}

.column-list-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--lh-3xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl);
    /* padding: 0 1.875rem; */
}

.column-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    min-height: 35.14rem;
    /* Minimum height for 10 items (10 * (1.563rem * 2 + 4.688rem)) */
}

.column-item {
    border-bottom: 0.047rem solid #CCCCCC;
    padding: 1.563rem 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    min-height: 4.688rem;
}

.column-item-empty {
    border-bottom: 0.047rem solid #CCCCCC;
    padding: 1.563rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.688rem;
}

.column-empty-message {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    color: var(--color-text-main);
    text-align: center;
    opacity: 0.7;
    font-style: italic;
}

.column-date {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-sm);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-main);
    min-width: 3.796rem;

}

.column-badge {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-relaxed);
    color: var(--color-btn-text);
    background-color: var(--color-btn-bg);
    border: 0.75px solid var(--color-btn-bg);
    padding: 0.125rem 1rem;
    border-radius: 1.25rem;
    margin-left: 0.5rem;
}

.column-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 0.844rem;
    line-height: var(--lh-sm);
    color: var(--color-text-main);
    letter-spacing: var(--ls-sm);
    flex: 1;
}

.column-list-main .column-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    color: var(--color-text-main);
    flex: 1;
    font-size: var(--font-size-base);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-sm);
    text-decoration: none;
}

.column-link {
    width: 1.172rem;
    height: 1.15rem;
    flex-shrink: 0;
}

/* Column list link wrapper */
.column-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 1;
    text-decoration: none;
    color: var(--color-text-main);
}

.column-link-row:hover {
    color: var(--color-text-main);
}

.column-link-icon {
    width: 1.172rem;
    height: 1.15rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.column-link-icon img {
    width: 100%;
    height: 100%;
}

.column-link img {
    width: 100%;
    height: 100%;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.109rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-main);
    gap: 3rem;
}

.pagination-link {
    color: var(--color-text-main);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    max-width: 1rem;
    text-align: center;
}

.pagination-link:hover {
    color: var(--color-primary);
}

.pagination-link.active {
    color: var(--color-primary);
    border-bottom: solid 2px #EA505C;
    padding-left: 0.2rem;
}

/* Column Aside */
.column-aside {
    width: 17.859rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2.438rem;
}

.aside-category,
.aside-archive {
    background-color: #fff;
    border-radius: 1.875rem;
    border-top-right-radius: 0;
    box-shadow: 0 0.188rem 0.188rem 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
    min-height: 15rem;
    max-height: 15rem;
    overflow-y: scroll;
}

.aside-title {
    background-color: var(--color-primary);
    padding: 0.5rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl-sm);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-2xl-sm);
    text-align: center;
}

.category-list {
    list-style: none;
    padding: 0 1.25rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    min-height: 15rem;
    max-height: 15rem;
    overflow-y: scroll;
}

.category-list li {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: 2.813rem;
    color: var(--color-text-main);
    letter-spacing: var(--ls-lg);
}

.category-list a {
    color: var(--color-text-main);
    text-decoration: none;
}

.category-list .category-empty {
    color: var(--color-text-main);
    opacity: 0.6;
    font-style: italic;
    font-weight: 400;
}


.archive-content {
    padding: 0 1.25rem 0.625rem;
    overflow: hidden;
    min-height: 15rem;
    max-height: 15rem;
    overflow-y: scroll;
}

.archive-content .archive-empty {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-lg);
    line-height: 2.813rem;
    color: var(--color-text-main);
    opacity: 0.6;
    font-style: italic;
    margin: 0;
}

.archive-years {
    display: flex;
    flex-direction: column;
    gap: 0.188rem;
}

.archive-year {
    display: flex;
    flex-direction: column;
}

.archive-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.438rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: 2.813rem;
    color: var(--color-text-main);
    letter-spacing: var(--ls-lg);
    text-align: left;
}

.archive-year-text {
    flex: 1;
}

.archive-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.archive-months {
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 0;
    padding-left: 1.25rem;
    margin-top: 0.188rem;
    margin-bottom: 0.188rem;
}

.archive-year[data-expanded="true"] .archive-months {
    display: flex;
}

.archive-months li {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: 2.813rem;
    color: var(--color-text-main);
    letter-spacing: var(--ls-lg);
    cursor: pointer;
    transition: color 0.2s ease;
}

.archive-months li a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.archive-months li:hover,
.archive-months li a:hover {
    color: var(--color-primary);
}

/* ============================================
   Column Detail Page Styles
   ============================================ */

.column-main {
    margin-bottom: var(--space-section);
}

.column-main .container {
    max-width: 67.906rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.063rem;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.column-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl-md);
    line-height: var(--lh-3xl-md);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl-md);
}

.column-content {
    display: flex;
    gap: 4.813rem;
}

.column-article {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.063rem;
    margin-bottom: 3rem;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.938rem;
}

.article-date {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}

.article-tag {
    background-color: var(--color-primary);
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base-sm);
    line-height: var(--lh-base-sm);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-base-sm);
    white-space: nowrap;
}

.article-image {
    width: 100%;
    height: 26.306rem;
    border-radius: 1.315rem;
    overflow: hidden;
    box-shadow: 0 0.188rem 0.188rem 0 rgba(0, 0, 0, 0.25);
    position: relative;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.315rem;
}

.article-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.article-section {
    display: flex;
    flex-direction: column;
    gap: 1.313rem;
    padding: 0.375rem 0;
}

.article-heading {
    display: flex;
    gap: 1.813rem;
    align-items: center;
}

.article-heading h2,
h2.article-heading {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl);
    margin: 0;
}

.heading-bar {
    width: 0.844rem;
    /* height: 4.5rem; */
    /* height: 100%; */
    align-self: stretch;
    background-color: var(--color-bg-headline-bars);
    flex-shrink: 0;
}

.article-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
    margin: 0;
    /* Spacing controlled by .article-section gap */
}

/* Gutenberg block styles to match original design */
.article-body .wp-block-heading h2,
.article-body h2.wp-block-heading,
.article-body>h2 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-2xl-sm);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl);
    margin: 0;
}

/* Gutenberg block styles - these apply when content is NOT wrapped in article-section */
.article-body .wp-block-paragraph,
.article-body>p:not(.article-text) {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
}

.article-body .wp-block-image,
.article-body>figure {
    margin: 0;
}

.article-navigation {
    display: flex;
    gap: 9rem;
    align-items: center;
    justify-content: center;
}

.nav-button {
    background-color: var(--color-primary);
    border: 0.059rem solid var(--color-primary);
    border-radius: 1.758rem;
    padding: 0.625rem 1.313rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-footer);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.438rem;
    white-space: nowrap;
    position: relative;
}

.nav-button.nav-prev::before {
    content: '';
    width: 0.937rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transform: rotate(180deg);
}

.nav-button.nav-next::after {
    content: '';
    width: 0.937rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.nav-link {
    border-bottom: 0.094rem solid var(--color-text-main);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    text-decoration: none;
    padding-bottom: 0.188rem;
    text-wrap: nowrap;
}


/* ============================================
   Company Info Page Styles
   ============================================ */

.company-info-main {
    margin-bottom: var(--space-section);
}

.company-info-main .container {
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.063rem;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.page-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-3xl-md);
    line-height: var(--lh-3xl-md);
    color: var(--color-text-main);
    letter-spacing: var(--ls-3xl-md);
    text-align: center;
    margin-bottom: 1.063rem;
}

.company-info-table {
    display: flex;
    flex-direction: column;
    /* gap: 0.625rem; */
    /* max-width: 60.188rem; */
    /* margin: 0 auto; */
}

.info-row {
    display: flex;
    justify-content: center;
    border-top: 0.059rem solid #CCCCCC;
}

.info-row:last-child {
    border-bottom: 0.059rem solid #CCCCCC;
}

.info-label {
    width: 13.125rem;
    padding: 1.75rem 1.758rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    flex-shrink: 0;
}

.info-value {
    flex: 1;
    padding: 1.75rem 1.758rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: #383838;
    letter-spacing: var(--ls-md-base);
}

.info-value p {
    margin-bottom: 0;
}

.info-row-map {
    flex-direction: column;
}

.info-map {
    padding-bottom: 1.75rem;
    padding-left: clamp(1rem, 3vw, 2.85rem);
    width: 52.25rem;
    height: 17.25rem;
    border-radius: 0;
    overflow: hidden;
    margin-left: auto;
}

.info-row.info-row-map {
    display: flex;
    justify-content: center;
    border: none;
}


.info-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================
   Contact Page Styles
   ============================================ */

.contact-main {
    margin-bottom: var(--space-section);
}

.contact-main .container {
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.contact-intro {
    display: flex;
    flex-direction: column;
    gap: 1.063rem;
    align-items: center;
}

.contact-desc {
    padding-bottom: 1.25rem;
    border-bottom: 0.059rem solid #CCCCCC;
    text-align: center;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
}

.contact-desc p {
    margin-bottom: 0;
}

.contact-desc p br {
    display: block;
}

.contact-desc br {
    display: block;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.938rem;
    align-items: center;
    max-width: 40.875rem;
}

.contact-info-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-2xl);
    color: var(--color-text-main);
    letter-spacing: var(--ls-2xl);
}

.contact-info-phone {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-2xl);
    color: var(--color-text-main);
    letter-spacing: 0.117rem;
    text-decoration: underline;
    text-underline-position: from-font;
}

.contact-info-phone a {
    color: var(--color-text-main);
    text-decoration: underline;
}

.contact-info-hours {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.289rem;
    line-height: var(--lh-xl);
    color: var(--color-text-main);
    letter-spacing: 0.117rem;
    text-align: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
    gap: 0;
}

.form-row {
    display: flex;
    gap: 1.125rem;
    /*align-items: flex-start;*/
    align-items: normal !important;
    /* Override any cached flex-start */
    padding-bottom: 0.1rem;
}

.form-label {
    width: 16.601rem;
    background-color: #FEEAF2;
    padding: 1.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.form-label span:first-child {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}


.form-row:has(+ .form-consent) .form-label {
    padding: 1.75rem 1rem 8rem;
}

.required {
    color: var(--color-check-red);
    border-radius: 1.172rem;
    padding: 0.803rem 0;
    width: 3.117rem;
    text-align: center;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: 1.125rem;
    letter-spacing: var(--ls-md-base);
}

div.form-row div.form-input-group {
    flex: 1;
    display: flex;
    gap: .938rem;
    padding: 30px 10px !important;
}


.form-checkbox {
    display: flex;
    align-items: center;
    gap: 1.055rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    cursor: pointer;
}

.form-checkbox input[type="radio"],
.form-checkbox input[type="checkbox"] {
    width: 1.055rem;
    height: 1.055rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0.118rem solid #CCCCCC;
    border-radius: 0.188rem;
    position: relative;
    flex-shrink: 0;
    background-color: #fff;
    transition: all 0.3s;
    padding-bottom: 0.281rem;
}

.form-checkbox input[type="radio"] {
    border-radius: 50%;
}

.form-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-check-red);
    border-color: var(--color-check-red);
}

.form-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.313rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 0.118rem 0.118rem 0;
}

.form-checkbox input[type="radio"]:checked {
    background-color: var(--color-check-red);
    border-color: var(--color-check-red);
}

.form-checkbox input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.469rem;
    height: 0.469rem;
    background-color: #fff;
    border-radius: 50%;
}

.form-input {
    flex: 1;
    padding: 1.75rem 0;
    width: 100%;
}

.form-input input {
    width: 100%;
    height: 2.882rem;
    border: 0.059rem solid #CCCCCC;
    border-radius: 0;
    padding: 0.644rem 0.586rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}

.form-input input::placeholder {
    color: #DDDDDD;
}

.form-textarea {
    flex: 1;
    padding: 1.75rem 0;
    width: 100%;
}

.form-textarea textarea {
    width: 100%;
    height: 10.781rem;
    border: 0.059rem solid #CCCCCC;
    border-radius: 0;
    padding: 0.644rem 0.586rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    resize: vertical;
}

.form-consent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 0rem;
}

.consent-label {
    display: flex;
    gap: 0.438rem;
    align-items: center;
}

.consent-link {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    text-decoration: underline;
    text-underline-position: from-font;
}

.form-submit {
    margin-top: 2.25rem;
    display: flex;
    justify-content: center;
}

.form-submit .button {
    background-color: var(--color-primary);
    border: 0.059rem solid var(--color-primary);
    border-radius: 1.758rem;
    padding: 1rem 1.125rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-footer);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    border: none;
}

.form-submit .button::after {
    content: '';
    width: 0.937rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.form-submit .button:hover {
    background-color: var(--color-text-footer);
    border-color: var(--color-primary);
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary) !important;
}

.form-submit .button:hover::after {
    content: '';
    width: 0.937rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-red.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* ============================================
   Privacy Policy Page Styles
   ============================================ */

.privacy-policy-main {
    margin-bottom: var(--space-section);
}

.privacy-policy-main .container {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 0 clamp(1rem, 3vw, 3.046rem);
}

.privacy-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-header {
    background-color: var(--color-primary);
    /* padding: 0.563rem 20.125rem; */
    text-align: center;
    /* max-width: 300px; */
    width: 100%;
    justify-content: center;
    display: flex;
    padding: 0.5rem;
}

.section-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-2xl);
    line-height: var(--lh-2xl);
    color: var(--color-text-footer);
    letter-spacing: 0.043rem;
}

.section-content {
    background-color: #fff;
    padding: 2.813rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.406rem;
    margin: 0 auto;
}

.section-intro {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    max-width: 49.828rem;
    margin: 0 auto;
}

.policy-item {
    border-top: 0.094rem solid var(--color-primary);
    padding: 1.031rem 0.516rem;
    display: flex;
    flex-direction: column;
    gap: 1.031rem;
    max-width: 49.266rem;
}

.policy-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-lg);
    color: var(--color-text-main);
    letter-spacing: var(--ls-lg);
}

.policy-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}


.policy-title.contact,
.policy-text.contact a {
    color: #CF090C;
}

.policy-text.contact a {
    text-decoration: underline;
}

.policy-list {
    list-style: none;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    padding-left: 0;
}

.policy-list li {
    margin-bottom: 0;
}

.policy-contact,
.policy-date {
    text-align: right;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}

.policy-link a {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-normal);
    color: #CF090C;
    letter-spacing: var(--ls-md-base);
    text-decoration: underline;
    text-underline-position: from-font;
}


/* ============================================
   Responsive Design
   ============================================ */
@media screen and (max-width: 1100px) {
    .closing-banner .heading {
        text-wrap: nowrap;
    }
}

/* Tablet: 1024px and below */
@media screen and (max-width: 1024px) {



    .pc_display {
        display: none;
    }

    .sp_display {
        display: block;
    }



    .header-nav .menu-item {
        width: auto;
        min-width: 6rem;
        padding: 0.468rem 1.125rem;
        font-size: var(--font-size-sm-md);
        letter-spacing: var(--ls-sm-md);
    }


    .header-nav .hamburger {
        display: flex;
        position: absolute;
        right: 3%;
        top: 20%;
    }

    .header-nav {
        padding: 1.25rem;
    }

    .header-nav .logo {
        align-items: flex-end;
    }

    .header-nav .logo .copy {
        display: none;
    }


    .header-nav .right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 30rem;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 1.875rem 1.875rem;
        /* 80px top, 30px sides/bottom */
        box-shadow: -0.25rem 0 0.625rem rgba(0, 0, 0, 0.1);
        /* -4px 0 10px */
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;

    }

    .header-nav .right.active {
        right: 0;
    }

    .header-nav .menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-bottom: 1.875rem;
        /* 30px */
    }

    .header-nav .menu-item {
        width: 100%;
        height: auto;
        padding: 0.9375rem 0;
        border-left: none;
        border-bottom: 1px solid var(--color-nav-border);
        justify-content: flex-start;
        font-size: var(--font-size-xl-xl);
        letter-spacing: var(--ls-3xl);
        line-height: var(--lh-2xl-lg);
    }


    .header-nav .menu-item::before {
        display: none;
    }

    .header-nav .menu-item:last-child {
        border-bottom: none;
    }

    .header-nav .contact-button {
        width: auto;
        min-width: 20rem;
        font-size: var(--font-size-xl-xl);
        letter-spacing: var(--ls-3xl);
        line-height: var(--lh-2xl-lg);
        padding: 1.2rem;
        gap: 1rem;
    }


    .header-nav .contact-button::after {
        width: 2rem;
        /* 16px */
        height: 2rem;
        /* 16px */
    }

    /* Overlay when menu is open */
    .header-nav::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
        pointer-events: none;
    }

    .header-nav.menu-open::after {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .header-nav {
        padding: 0.425rem 1.5rem;
    }

    .wrapper::before {
        display: none;
    }

    .wrapper {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .fv {
        padding: 1.785rem;
        min-height: auto;
    }

    .fv .container {
        /*padding-right: clamp(1rem, 2vw, 2rem);
        padding-left: clamp(1rem, 2vw, 2rem);*/
        flex-wrap: wrap;
    }

    .fv .image {
        top: auto;
        /*width: clamp(18rem, 45vw, 35rem);*/
        max-width: 100%;
        /**/
        height: clamp(22rem, 55vh, 35rem);
        margin-left: auto;
        margin-top: 1.5rem;
        flex-shrink: 0;
    }

    .why-us .list-frame::before {
        top: -10%;
        left: -3%;
        max-width: 100px;
    }

    .why-us .closing p {
        font-size: var(--font-size-2xl);
        line-height: var(--lh-2xl);
    }

    .why-out .note p {
        padding-left: 10px;
    }

    .why-out .note p::before {
        left: -0%;
        top: -32%;
    }

    .suggestion .heading-text {
        padding-left: 1rem;
        line-height: var(--lh-2xl-md);
        font-size: var(--font-size-2xl);
    }

    .closing-banner .bg::after {
        background-image: url(assets/img/top/closing-banner-person.webp);
        content: '';
        position: absolute;
        top: 20%;
        right: 5%;
        bottom: 0;
        left: auto;
        width: 50vw;
        max-width: 350px;
        /* width: 100%; */
        height: 100%;
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
        opacity: 1;
        z-index: 0;
        pointer-events: none;
    }

    .closing-banner .container {
        padding: 0;
    }

    .closing-banner .heading {
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 500;
        font-size: var(--font-size-3xl-lg);
        letter-spacing: var(--ls-3xl-lg);
        display: inline;
        margin-bottom: 1.125rem;
        background-color: var(--color-primary);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        padding: 0.375rem 0.75rem;
        text-wrap: wrap;
    }

    .closing-banner .heading br {
        display: none;
    }

    .closing-banner .desc {
        /* display: none; */
        max-width: 500px;
        width: 100%;
    }

    .closing-banner .desc br {
        display: none;
    }

    .column-banners .container {
        gap: 3rem;
        padding: 0 clamp(1rem, 3vw, 3.046rem);
    }

    .closing-banner .bottom-row {
        justify-content: center;
    }

    .footer {
        padding: 2rem 4rem;
    }

    .footer .contact-container {
        padding-top: 40px;
    }

    .footer .menu-container {
        min-height: 320px;
        justify-content: center;
        flex-direction: column;
        display: flex;
        gap: 3rem;
        align-items: flex-start;
    }

    .footer .links-column-inner.sp_display {
        display: flex;
    }

    .footer .address {
        min-width: 12.5rem;
        margin-top: 2rem;
    }

    .closing-banner-image,
    .training-closing-image {
        width: 100%;
        max-width: 100vw;
        padding-bottom: 20px;
    }

    .why-us .heading-text,
    .why-out .heading-text,
    .solution .heading-text,
    .customers-voice .heading-text,
    .training-intro .heading-text,
    .training-program .heading-text {
        white-space: wrap;
    }


}

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

    .fv .copy-line {
        Font-size: 4.5rem;
    }


    .solution .left img {
        max-height: 100%;
    }

    .closing-banner .heading {
        font-size: var(--lh-2xl);
    }

    .closing-banner .bottom-row {
        flex-direction: column;
        padding-bottom: 1rem;
        align-items: flex-start;
    }

    .closing-banner .desc {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
    }




}

/* Mobile: 640px and below */
@media screen and (max-width: 640px) {



    .header-nav {
        padding: 0.375rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        position: fixed;
        background: #fff;
        z-index: 10000;
    }

    .header-nav .logo .emblem {
        width: 3rem;
        height: 3rem;
    }

    .header-nav .logo .text {
        padding: 0.2rem;
    }

    .header-nav .logo .text {
        justify-content: flex-end;
    }

    .header-nav .logo .logo-text {
        width: 9rem;
        height: 1.5rem;
    }

    .header-nav .right {
        gap: 0.75rem;
    }

    .header-nav .right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 22rem;
        /* 300px */
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 4.5rem 1.5rem 1.5rem;
        /* 72px top, 24px sides/bottom */
        box-shadow: -0.25rem 0 0.625rem rgba(0, 0, 0, 0.1);
        /* -4px 0 10px */
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    .header-nav .menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-bottom: 1.5rem;
        /* 24px */
    }

    .header-nav .menu-item:last-child {
        border-bottom: none;
    }

    .header-nav .menu-item {
        width: 100%;
        height: auto;
        padding: 0.75rem 0;
        /* 12px */
        border-left: none;
        border-bottom: 1px solid var(--color-nav-border);
        /* 1px */
        justify-content: flex-start;
        font-size: var(--font-size-md-sm);
        letter-spacing: var(--ls-2xl);
    }

    .header-nav .menu-item::before {
        display: none;
    }

    .header-nav .menu-item:last-child {
        border-bottom: none;
    }

    .header-nav .contact-button {
        width: 100%;
        height: auto;
        padding: 0.562rem 0.75rem;
        font-size: var(--font-size-lg);
        min-width: 10rem;
    }

    .header-nav .hamburger {
        right: 5%;
        top: 35%;
        width: 2.125rem;
        height: 2.125rem;
    }

    /* Overlay when menu is open */
    .header-nav::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
        pointer-events: none;
    }


    .header-nav.menu-open::after {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .fv {
        padding: 0.785rem;
        margin-bottom: 20px;
        margin-top: 80px;
    }

    .fv .container {
        flex-direction: column;
        padding-top: 0;
    }

    .fv .image {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        height: clamp(20rem, 50vh, 30rem);
        margin-top: 1.5rem;
        margin-left: 0;
        border-radius: 1.5rem;
        flex-shrink: 0;
    }

    .fv .copy-line {
        font-size: var(--font-size-3xl-lg);
        line-height: var(--lh-heading);
    }

    .fv .subcopy {

        display: none;
    }

    .fv .subcopy-bg {
        background-color: rgba(255, 255, 255, 0.9);
        padding-bottom: 50px;

    }

    .fv .subcopy-sp {
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: var(--font-size-lg);
        line-height: var(--lh-lg);
        position: absolute;
        display: block;
        top: 80%;
        color: var(--color-text-main);
        letter-spacing: var(--ls-tight);
        width: 100%;
    }

    .fv .subcopy-sp br {
        display: none;
    }


    .wrapper {
        margin: 0;
    }

    .solution .main,
    .customers-voice .main {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .solution .left,
    .solution .right {
        flex: 1 1 100%;
        width: 100%;
    }

    .customers-voice .heading-text {
        padding-bottom: 0;
    }

    .customers-voice .desc,
    .customers-voice .image {
        flex: 1 1 100%;
        width: 100%;
    }

    .why-us,
    .why-out,
    .solution,
    .steps,
    .customers-voice,
    .news,
    .column-banners {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .customers-voice {
        margin-bottom: 2rem;
    }

    .why-us h2 {
        text-align: left;
        font-size: var(--font-size-xl-lg);
        line-height: var(--lh-xl-lg);
        letter-spacing: var(--ls-xl-lg);
    }

    .why-us .list-frame {
        padding: 2rem;
    }

    .why-us .list-item {
        font-size: var(--font-size-base-md);
        line-height: var(--lh-base-md);
        letter-spacing: var(--ls-xl-md);
        margin-bottom: 2rem;
    }

    .why-out .list-frame {
        padding: 2rem;
    }

    .why-out .list-title {
        padding-left: 40px;
    }

    .why-out .note p::before {
        left: -4%;
        top: -10%;
    }

    .why-us .list-frame::before {
        top: 0%;
        left: -50%;
        max-width: 300px;
        overflow: hidden;
        opacity: 0.7;
    }

    .solution {
        padding: 0;
    }

    .solution .button-row {
        flex-direction: column;
        padding-top: 20px;
    }

    .solution .button::after {
        width: 2rem;
        height: 2rem;
    }

    .suggestion {
        padding: 20px;
    }


    .suggestion .highlight-bar {
        height: 95%;
        top: 10px;
    }


    .suggestion .heading {
        max-width: 100%;
        padding: 0 20px;
    }


    .steps {
        padding: 30px;
    }

    .steps .desc {
        text-align: center;
    }

    .steps .items {
        flex-direction: column;
        gap: 1.5rem;
    }


    /* Closing Banner Mobile */
    .closing-banner {
        margin-bottom: 2rem;
        height: auto;
        min-height: 20rem;
    }


    .closing-banner .container {
        padding: 0;
    }


    .closing-banner .image {
        display: none;
    }


    .closing-banner .container {
        gap: 1.5rem;
    }


    .news .list-title {
        white-space: nowrap;
        /* Prevents text from wrapping to the next line */
        /*overflow: hidden;*/
        /* Hides any text that extends beyond the container */
        text-overflow: ellipsis;
        /* Displays an ellipsis where the text is truncated */

    }

    .news .list-new-icon {
        margin-left: 0rem;
        transform: scale(0.75);
    }


    /* Column Banners Mobile */

    .column-banners .container {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
        padding: 0;
    }

    .column-banners .banner {
        width: 100%;
        max-width: 28.737rem;
        height: auto;
    }

    .column-banners .banner-content {
        position: relative;
        top: auto;
        transform: none;
        padding: 1.5rem;
    }

    .column-banners .banner-heading {
        font-size: var(--font-size-xl-lg);
    }

    .column-banners .banner-content {
        padding: 1.25rem;
    }

    .column-banners .banner-heading {
        font-size: var(--font-size-xl);
        line-height: var(--lh-xl);
    }

    .column-banners .button {
        font-size: var(--font-size-base);
        padding: 0.5rem 1rem;
    }

    .footer .contact-container {
        padding-top: 20px;
    }

    .footer .menu-container {
        min-height: auto;
        flex-direction: row;
    }

    .footer .logo img {
        margin-top: 0rem;
        margin-bottom: .75rem;
    }

    .footer .links {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .footer .logo {
        margin-top: -0.6rem;
    }

    .footer .links-column {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        width: 18.234rem;
        /* justify-content: space-between; */
    }

    .footer .address {
        margin-top: -1.5rem;
        line-height: var(--lh-loose);
    }

    .footer .phone-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .3rem;
    }

    .footer .phone {
        margin-bottom: 0;
    }

    .header-nav {
        padding: 0.375rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        position: fixed;
        background: #fff;
    }


}

/* ============================================
   Responsive Styles for Lower Pages
   ============================================ */

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

    .training-fv .container,
    .column-list-fv .container,
    .column-fv .container,
    .company-info-fv .container,
    .contact-fv .container,
    .privacy-policy-fv .container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .training-fv .fv-image,
    .column-list-fv .fv-image,
    .column-fv .fv-image,
    .company-info-fv .fv-image,
    .contact-fv .fv-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 660.75 / 269.25;
    }

    .training-fv .title-section,
    .column-list-fv .title-section,
    .column-fv .title-section,
    .company-info-fv .title-section,
    .contact-fv .title-section,
    .privacy-policy-fv .title-section {
        max-width: unset;
    }

    .training-intro .heading {
        min-height: unset;
    }

    .training-intro .intro-content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .training-intro .intro-image {
        width: 100%;
        max-width: 85vw;
        margin: 0 auto;
    }

    .training-program {
        padding: 1.5rem clamp(1rem, 2vw, 2rem);
    }

    .training-program-1::before {
        display: none;
    }

    .training-program .title-main {
        white-space: normal;
        /* font-size: clamp(1.125rem, 3vw, 1.5rem);
        line-height: clamp(1.75rem, 4.5vw, 2.5rem);*/
    }

    .training-program .program-card {
        max-width: 100%;
    }

    .training-steps {
        padding: 1.875rem clamp(1rem, 3vw, 2rem);
    }

    .training-steps .items {
        gap: 1rem;
    }


    .training-schedule .schedule-table {
        overflow-x: auto;
    }

    .column-list-content {
        flex-direction: column;
        gap: 2rem;
    }

    .column-aside {
        width: 100%;
    }

    .column-content {
        flex-direction: column;
        gap: 2rem;
    }

    .article-navigation {
        gap: 1.5rem;
    }

    .article-section {
        margin: 10px;
    }

    .company-info-table {
        width: 100%;
    }

    .info-row {
        flex-direction: column;
    }

    .info-label {
        width: 100%;
        border-bottom: 0.059rem solid #CCCCCC;
    }

    .info-value {
        width: 100%;
    }

    .info-map {
        width: 100%;
        margin-left: 0;
    }

    .contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-label {
        width: 100%;
        padding: 1rem;
    }

    .form-row:has(+ .form-consent) .form-label {
        padding: 1rem;
    }

    .form-input {
        padding: 1rem 0;
    }

    .form-input input {
        padding: 1.75rem 1rem;
    }

    .form-textarea {
        padding: 1rem 0;
    }
}

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



    .training-fv .title-main,
    .column-list-fv .title-main,
    .column-fv .title-main,
    .company-info-fv .title-main,
    .contact-fv .title-main,
    .privacy-policy-fv .title-main {
        font-size: var(--font-size-4xl);
        line-height: var(--lh-2xl-lg);
    }


    .training-fv .title-section,
    .column-list-fv .title-section,
    .column-fv .title-section,
    .company-info-fv .title-section,
    .contact-fv .title-section,
    .privacy-policy-fv .title-section {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .training-fv,
    .column-list-fv,
    .column-fv,
    .company-info-fv,
    .contact-fv,
    .privacy-policy-fv {
        width: 100%;
        margin-bottom: 3rem;
        margin-top: 80px;
    }

    .training-program .title-content:before {
        background-color: var(--color-circle-title-main);
        left: -5%;
        top: -5%;
    }

    .training-program-1 .price-text p:before,
    .training-program-2 .price-text p:before {
        top: 15%;
    }

    .training-program .program-info-title {
        align-items: flex-start;
    }

    .training-schedule .schedule-title .title-main {
        text-align: center;
    }

    .training-schedule .schedule-title::before {
        display: none;
    }

    .training-schedule .schedule-title .title-deco {
        display: none;
    }

    .training-closing .container {
        gap: 0;
    }


    .title-texts::before {
        left: 20%;
        top: -10%;
    }

    .column-list-fv .title-texts::before {
        left: 17%;
        top: -10%;
    }

    .page-title {
        text-align: left;
        padding-left: 1.5rem;
    }

    .training-intro .heading-text {
        font-size: var(--font-size-xl-lg);
        line-height: var(--lh-xl-lg);
    }

    .training-intro .intro-text {
        padding: 0 0.5rem;
    }

    .training-checklist .list-frame {
        padding: 1.75rem;
    }

    .training-checklist .list {
        padding: 0 1.75rem 0 3rem;
        font-size: var(--font-size-lg);
    }

    .training-checklist .training-banner {
        margin: 1.5rem auto 0;
        width: 100%;
    }

    .training-checklist .training-banner-text {
        font-size: var(--font-size-lg);
    }

    .training-program {
        padding: 2rem;
    }

    .training-program .title-main {
        font-size: clamp(1rem, 4vw, var(--font-size-2xl-lg));
        line-height: clamp(1.5rem, 5vw, var(--lh-2xl-lg));
        letter-spacing: var(--ls-2xl-lg);
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: var(--font-size-2xl);
        line-height: var(--lh-2xl-md);
    }

    .training-program .title-content {
        width: 100%;
        max-width: 100%;
        left: 0;
        padding: 0 0.5rem;
    }

    .training-program .program-description {
        font-size: var(--font-size-lg);
    }

    .training-program .price-text {
        font-size: var(--font-size-base-md);
        line-height: 2rem;
    }


    .training-program .keypoint {
        width: 100%;
        padding-left: 3rem;
        padding: 1.875rem 3rem;
    }

    .training-program .keypoint-title {
        font-size: var(--font-size-lg);
    }

    .training-program .keypoint-list {
        text-wrap: wrap;
        font-size: var(--font-size-base-md);
        line-height: var(--lh-3xl-lg);
    }


    .training-program .day-tabs {
        display: none;
    }

    .training-program .day-connector {
        display: none;
    }

    .training-program .program-cards {
        flex-direction: column;
        gap: 1.5rem;
    }


    .training-steps .step-image,
    .training-steps .step-item {
        width: 100%;
    }


    .training-steps::after,
    .steps::after {
        display: none;
    }

    .training-steps .items {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .training-steps .step-item {
        width: 100%;
        max-width: 14rem;
        /* text-align: left; */
    }

    .steps .step-item img,
    .training-steps .step-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .training-schedule table {
        font-size: var(--font-size-base-sm);
    }


    .training-schedule .badge {
        padding: .8rem .5rem;
        font-size: 12px;
        line-height: var(--lh-base);
        line-height: var(--lh-normal);
        border-radius: 28px;
    }

    .column-item {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .column-list-main .column-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 12.5rem;
    }

    .column-badge {
        position: static;
        margin-left: 0rem;
        transform: scale(0.75);
    }

    .article-image {
        height: 15rem;
    }

    .article-heading {
        gap: 0.75rem;
    }

    .nav-button {
        font-size: var(--font-size-md-base);
        font-size: var(--font-size-md-sm);
        line-height: var(--lh-md-base);
        padding: 10px;
    }

    .nav-link {
        font-size: var(--font-size-md-sm);
    }

    .form-input,
    .form-textarea {
        padding: 1rem 0;
    }

    .section-header {
        padding: 0.563rem 1rem;
    }
}

/* ============================================
   Contact Form Confirmation Popup
   ============================================ */
.confirmation-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.confirmation-popup.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    z-index: 1;
}

.popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 1.875rem;
    padding: 3rem 2.5rem;
    max-width: 31.25rem;
    width: 90%;
    z-index: 2;
    box-shadow: 0 0.188rem 0.188rem 0 rgba(0, 0, 0, 0.25);
}

.popup-message {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-xl-lg);
    color: var(--color-text-main);
    letter-spacing: var(--ls-xl-lg);
    text-align: center;
    margin-bottom: 2.5rem;
}

.popup-buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
}

.popup-button {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: var(--lh-lg);
    color: var(--color-text-footer);
    letter-spacing: var(--ls-lg);
    padding: 0.938rem 2.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 8rem;
}

.popup-button-yes {
    background-color: var(--color-primary);
}

.popup-button-yes:hover {
    background-color: var(--btn-hover-bg);
    opacity: 0.9;
}

.popup-button-no {
    background-color: #999;
}

.popup-button-no:hover {
    background-color: #777;
}

@media (max-width: 640px) {
    .popup-content {
        padding: 2rem 1.5rem;
        max-width: 90%;
    }

    .popup-message {
        font-size: var(--font-size-lg);
        line-height: var(--lh-lg);
        margin-bottom: 2rem;
    }

    .popup-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .popup-button {
        width: 100%;
    }
}

/* Contact Form Success Message */
.contact-form-success {
    display: none;
    background-color: #f8f9fa;
    border: 2px solid var(--color-primary);
    border-radius: 1.875rem;
    padding: 3rem 2.5rem;
    margin: 2rem 0;
    text-align: center;
}

.contact-form-success .success-content {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form-success .success-message {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl);
    line-height: var(--lh-xl);
    color: var(--color-primary);
    letter-spacing: var(--ls-xl);
    margin-bottom: 1rem;
}

.contact-form-success .success-description {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-base);
}

.contact-form-success .success-link-wrapper {
    margin-top: 2rem;
    text-align: center;
}

.contact-form-success .success-link {
    display: inline-block;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: #000;
    text-decoration: underline;
    letter-spacing: var(--ls-base);
    transition: opacity .3s ease;
}

.contact-form-success .success-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* ============================================
   Contact Form Success - Responsive Styles
   ============================================ */

/* Tablet and below (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .contact-form-success {
        padding: 2.5rem 2rem;
        margin: 1.5rem 0;
    }

    .contact-form-success .success-content {
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* Mobile (max-width: 640px) */
@media screen and (max-width: 640px) {
    .contact-form-success {
        padding: 2rem 1.5rem;
        margin: 1rem 0;
        border-radius: 1.25rem;
    }

    .contact-form-success .success-content {
        max-width: 100%;
        padding: 0;
    }

    .contact-form-success .success-message {
        font-size: var(--font-size-lg, 1.25rem);
        line-height: var(--lh-lg, 1.5);
        margin-bottom: 0.75rem;
    }

    .contact-form-success .success-description {
        font-size: var(--font-size-sm, 0.875rem);
        line-height: var(--lh-sm, 1.5);
    }

    .contact-form-success .success-link-wrapper {
        margin-top: 1.5rem;
    }

    .contact-form-success .success-link {
        font-size: var(--font-size-sm, 0.875rem);
        line-height: var(--lh-sm, 1.5);
    }
}

/* ============================================
   Contact Form 7 - Original Design Application
   ============================================ */

/* Reset Contact Form 7 default styles */
/* Support both .contact-form (via html_class) and .wpcf7-form 
div.form-row div.form-input-group {
    flex: 1;
    display: flex;
    gap: .938rem;
}*/

div.form-input .wpcf7-form-control-wrap,
div.form-textarea .wpcf7-form-control-wrap,
div.form-input-group .wpcf7-form-control-wrap {
    padding: 0;
    width: 100%;
    margin: 0;
    padding-top: 1rem;
    display: block;
}

.contact-form p,
.wpcf7-form p {
    margin: 0;
    padding: 0;
}

/* Remove default Contact Form 7 list styling */
.contact-form ul,
.wpcf7-form ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Contact Form 7 wrapper - apply original .contact-form styles */
/* Use html_class="contact-form" in shortcode: [contact-form-7 id="60" html_class="contact-form"] */
.contact-form,
.wpcf7-form {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
    gap: 0;
}

/* Remove Contact Form 7 wrapper padding */
.wpcf7-form-control-wrap {
    padding: 0;
    margin: 0;
    width: 100%;
    display: block;
}

/* Form row structure - matches original .form-row */
/* Support <div> elements (recommended for Contact Form 7) */
div.form-row {
    display: flex;
    gap: 1.125rem;
    align-items: normal !important;
    /* Override any cached flex-start */
    padding-bottom: 0.1rem;
}

/* Fix for incorrect structure: form-row containing form-consent and form-submit */
div.form-row:has(div.form-consent),
div.form-row:has(div.form-submit) {
    flex-wrap: wrap;
}

/* Form label - matches original .form-label */
div.form-row div.form-label {
    width: 16.601rem;
    background-color: #FEEAF2;
    padding: 1.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* Fix for incorrect structure: form-label containing form-textarea */
div.form-row div.form-label:has(div.form-textarea) {
    flex-direction: column;
    align-items: flex-start;
    width: 16.601rem;
}

/* Label text (first span) - matches original */
div.form-row div.form-label span:first-child {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}

/* Special padding for textarea row label */
div.form-row:has(+ div.form-consent) div.form-label {
    padding: 1.75rem 1rem 8rem;
}

/* Form input group - matches original .form-input-group
div.form-row div.form-input-group {
    flex: 1;
    display: flex;
    gap: 0.938rem;
    padding: 1.75rem 0 !important;
} */

/* Form input - matches original .form-input */
div.form-row div.form-input {
    flex: 1;
    padding: 1.75rem 0;
    width: 100%;
    display: block;
}

/* Form textarea - matches original .form-textarea */
/* Handle both correct structure (sibling of form-label) and incorrect structure (inside form-label) */
div.form-row div.form-textarea,
div.form-row div.form-label div.form-textarea {
    flex: 1;
    padding: 1.75rem 0;
    width: 100%;
    display: block;
}

/* Fix for incorrect structure: form-textarea inside form-label */
div.form-row div.form-label div.form-textarea {
    margin-top: 1rem;
    width: 100%;
}

/* Remove default Contact Form 7 wrapper padding and styling */
div.form-input .wpcf7-form-control-wrap,
div.form-textarea .wpcf7-form-control-wrap,
div.form-input-group .wpcf7-form-control-wrap {
    padding: 0;
    width: 100%;
    margin: 0;
    display: block;
}

/* Form checkbox/radio styling - matches original .form-checkbox */
div.form-input-group .wpcf7-radio,
div.form-input-group .wpcf7-checkbox {
    display: flex;
    gap: 0.938rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

div.form-input-group .wpcf7-radio .wpcf7-list-item,
div.form-input-group .wpcf7-checkbox .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 1.055rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    cursor: pointer;
    margin: 0;
}

div.form-input-group .wpcf7-radio input[type="radio"],
div.form-input-group .wpcf7-checkbox input[type="checkbox"] {
    width: 1.055rem;
    height: 1.055rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0.118rem solid #CCCCCC;
    border-radius: 0.188rem;
    position: relative;
    flex-shrink: 0;
    background-color: #fff;
    transition: all 0.3s;
    padding-bottom: 0.281rem;
}

div.form-input-group .wpcf7-radio input[type="radio"] {
    border-radius: 50%;
}

div.form-input-group .wpcf7-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-check-red);
    border-color: var(--color-check-red);
}

div.form-input-group .wpcf7-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.313rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 0.118rem 0.118rem 0;
}

div.form-input-group .wpcf7-radio input[type="radio"]:checked {
    background-color: var(--color-check-red);
    border-color: var(--color-check-red);
}

div.form-input-group .wpcf7-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.469rem;
    height: 0.469rem;
    background-color: #fff;
    border-radius: 50%;
}

/* Text inputs - when inside form-input */
div.form-input input,
div.form-input .wpcf7-form-control-wrap input {
    width: 100%;
    height: 2.882rem;
    border: 0.059rem solid #CCCCCC;
    border-radius: 0;
    padding: 0.644rem 0.586rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
}

div.form-input input::placeholder,
div.form-input .wpcf7-form-control-wrap input::placeholder {
    color: #DDDDDD;
}

/* Textarea - when inside form-textarea */
div.form-textarea textarea,
div.form-textarea .wpcf7-form-control-wrap textarea,
div.form-label div.form-textarea textarea,
div.form-label div.form-textarea .wpcf7-form-control-wrap textarea {
    width: 100%;
    height: 10.781rem;
    border: 0.059rem solid #CCCCCC;
    border-radius: 0;
    padding: 0.644rem 0.586rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    resize: vertical;
    box-sizing: border-box;
}

/* Reset p tag inside form-textarea */
div.form-textarea p,
div.form-label div.form-textarea p {
    margin: 0;
    padding: 0;
}

/* Submit button - matches original */
/* Handle both correct structure (outside form-row) and incorrect structure (inside form-row) */
div.form-submit,
div.form-row div.form-submit {
    margin-top: 2.25rem;
    display: flex;
    justify-content: center;
}

/* Fix for incorrect structure: form-submit inside form-row */
div.form-row div.form-submit {
    width: 100%;
    margin-top: 2.25rem;
}

div.form-submit .button,
div.form-submit .wpcf7-submit,
div.form-submit input[type="submit"],
div.form-row div.form-submit .button,
div.form-row div.form-submit .wpcf7-submit,
div.form-row div.form-submit input[type="submit"] {
    background-color: var(--color-primary);
    border: 0.059rem solid var(--color-primary);
    border-radius: 1.758rem;
    padding: 1rem 1.125rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-footer);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    border: none;
}

/* Reset p tag inside form-submit */
div.form-submit p,
div.form-row div.form-submit p {
    margin: 0;
    padding: 0;
}

div.form-submit .button::after,
div.form-submit .wpcf7-submit::after,
div.form-submit input[type="submit"]::after {
    content: '';
    width: 0.937rem;
    height: 0.937rem;
    background-image: url('assets/img/common/arrow-icon-wh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

div.form-submit .button:hover,
div.form-submit .wpcf7-submit:hover,
div.form-submit input[type="submit"]:hover {
    background-color: var(--color-text-footer);
    border-color: var(--color-primary);
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
}

div.form-submit .button:hover::after,
div.form-submit .wpcf7-submit:hover::after,
div.form-submit input[type="submit"]:hover::after {
    background-image: url('assets/img/common/arrow-icon-red.svg');
}


/* Consent section - matches original */
/* Handle both correct structure (outside form-row) and incorrect structure (inside form-row) */
div.form-consent,
div.form-row div.form-consent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 0rem;
}

/* Fix for incorrect structure: form-consent inside form-row */
div.form-row div.form-consent {
    width: 100%;
    margin-top: 0rem;
}

div.consent-label,
div.form-row div.form-consent div.consent-label {
    display: flex;
    gap: 0.438rem;
    align-items: center;
}

div.consent-label p,
div.form-row div.form-consent div.consent-label p {
    display: flex;
    gap: 0.438rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Reset p tag inside form-consent */
div.form-consent p,
div.form-row div.form-consent p {
    margin: 0;
    padding: 0;
}

/* Consent checkbox styling */
div.form-consent .wpcf7-list-item,
div.form-consent .wpcf7-list-item.form-checkbox {
    display: flex;
    align-items: center;
    gap: 1.055rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-md-base);
    line-height: var(--lh-md-base);
    color: var(--color-text-main);
    letter-spacing: var(--ls-md-base);
    cursor: pointer;
    margin: 0;
}

div.form-consent .wpcf7-list-item label,
div.form-consent .wpcf7-list-item.form-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    width: auto;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

div.form-consent .wpcf7-list-item input[type="checkbox"],
div.form-consent .wpcf7-list-item.form-checkbox input[type="checkbox"],
div.form-consent input.form-checkbox[type="checkbox"] {
    width: 1.055rem;
    height: 1.055rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0.118rem solid #CCCCCC;
    border-radius: 0.188rem;
    position: relative;
    flex-shrink: 0;
    background-color: #fff;
    transition: all 0.3s;
    padding-bottom: 0.281rem;
}

div.form-consent .wpcf7-list-item input[type="checkbox"]:checked,
div.form-consent .wpcf7-list-item.form-checkbox input[type="checkbox"]:checked,
div.form-consent input.form-checkbox[type="checkbox"]:checked {
    background-color: var(--color-check-red);
    border-color: var(--color-check-red);
}

div.form-consent .wpcf7-list-item input[type="checkbox"]:checked::after,
div.form-consent .wpcf7-list-item.form-checkbox input[type="checkbox"]:checked::after,
div.form-consent input.form-checkbox[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.313rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 0.118rem 0.118rem 0;
}

/* ============================================
   Contact Form 7 Responsive Styles
   ============================================ */

/* Tablet and below (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    div.form-row {
        flex-direction: column;
        gap: 0;
    }

    div.form-row div.form-label {
        width: 100%;
        padding: 1rem;
    }

    div.form-row:has(+ div.form-consent) div.form-label {
        padding: 1rem;
    }

    div.form-row div.form-input,
    div.form-row div.form-textarea {
        padding: 1rem 0;
    }
}

/* Mobile (max-width: 640px) */
@media screen and (max-width: 640px) {



    div.form-row {
        flex-direction: column;
        gap: 0;
    }

    div.form-row div.form-label {
        width: 100%;
        padding: 1rem;
    }

    div.form-row:has(+ div.form-consent) div.form-label {
        padding: 1rem;
    }

    div.form-row div.form-input,
    div.form-row div.form-textarea {
        padding: 1rem 0;
    }

    .why-us .closing p {
        text-align: left;
    }

    .why-out .desc p {
        text-align: left;
    }

    .why-out .list-title {
        text-align: left;
    }

    .contact-desc {
        padding-bottom: 1.25rem;
        text-align: left;
    }

    .contact-desc p br {
        display: none;
    }

    .contact-desc br {
        display: none;
    }

}

/* Hide Contact Form 7 default validation messages styling - use custom */
.contact-form .wpcf7-not-valid-tip,
.wpcf7-not-valid-tip {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--font-size-md-sm);
    color: var(--color-check-red);
    margin-top: 0.5rem;
}

.contact-form .wpcf7-validation-errors,
.contact-form .wpcf7-mail-sent-ng,
.contact-form .wpcf7-mail-sent-ok,
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-mail-sent-ok {
    display: none;
}

/* Error styling for invalid fields */
.contact-form .wpcf7-not-valid,
.wpcf7-not-valid {
    border-color: var(--color-check-red) !important;
}

/* Contact Form 7 スピナーの非表示 */
.wpcf7-spinner {
    display: none !important;
}

/* --- ボタンのスタイル修正 --- */

/* 1. ブラウザ標準のボタンスタイルをリセットし、元のデザインを適用 */
.form-submit .button {
    /* ブラウザのデフォルト（グレーの立体ボタン）を打ち消す */
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    border: none !important;
    /* 強制的に枠線を消す */
    background: none;

    /* 元のデザイン定義 */
    background-color: var(--color-primary);
    /* 変数が効かない場合は直接色コード(#00a0d2等)を指定 */
    border-radius: 1.758rem;
    padding: 1rem 1.125rem;

    /* フォント設定 */
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-md-base, 16px);
    /* 変数がない時のフォールバックを追加 */
    line-height: var(--lh-md-base, 1.5);
    color: var(--color-text-footer, #fff);
    text-decoration: none;

    /* レイアウト（Flexbox） */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 文字を中央寄せ */
    gap: 0.625rem;
    cursor: pointer;

    border: 0.1rem solid transparent !important;

}

/* 2. 矢印アイコンの表示（::after） */
.form-submit .button::after {
    content: '';
    display: block;
    width: 0.937rem;
    height: 0.937rem;

    /* 画像パスを絶対パスに変更（WordPressでは相対パスだとリンク切れしやすいため） */
    background-image: url(//rococo-shinjinkenshu.com/wp-content/themes/rococo-space/assets/img/common/arrow-icon-wh.svg);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* 3. ホバー時の挙動（必要であれば追加） */
.form-submit .button:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* ============================================
   reCAPTCHA Badge and Notice
   ============================================ */

/* Hide reCAPTCHA badge (use opacity instead of visibility to maintain functionality) */
.grecaptcha-badge {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* reCAPTCHA notice text (shown instead of badge) */
.recaptcha-notice {
    /*
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
    text-align: center;
    display: flex;
    margin-bottom: 0;
    padding: 0;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    */
    display: none;
}

.recaptcha-notice a {
    color: #666;
    text-decoration: underline;
}

.recaptcha-notice a:hover {
    color: var(--color-primary, #00a0d2);
    text-decoration: underline;
}

/* Responsive: Mobile */
@media screen and (max-width: 640px) {
    .recaptcha-notice {
        display: none;
    }
}

.wpcf7 form .wpcf7-response-output {
    margin: 2em .5em 1em !important;
    padding: .2em 1em !important;
    border: 2px solid #00a0d2;
    opacity: 0 !important;
}

/* WordPress管理バーが表示されているときのみ、ヘッダーに余白を追加 */
/* #wpadminbarが存在するときのみ適用（:has()セレクタ使用）
body:has(#wpadminbar) .header-nav,
body.admin-bar .header-nav {
    margin-top: 32px;
}


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

    body:has(#wpadminbar) .header-nav,
    body.admin-bar .header-nav {
        margin-top: 46px;
        /* モバイル管理バーの高さに合わせる */


/* モバイルでのタップ反応改善 */
input[type="submit"],
button[type="submit"],
.popup-button {
    cursor: pointer;
    -webkit-appearance: none;
    /* iOSのデフォルトスタイル解除 */
}



html {
    font-size: var(--font-size-md-sm);
    margin-top: 0px !important;

}

/* ============================================
   Privacy Policy Dropdown
   ============================================ */
.privacy-popup {
    display: none;
    position: absolute;
    z-index: 10000;
}

.privacy-popup.active {
    display: block;
}

.privacy-popup .popup-overlay {
    display: none;
    /* ドロップダウン方式では不要 */
}

.privacy-popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 31.25rem;
    width: calc(100vw - 2rem);
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
}

.privacy-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.privacy-popup-close:hover {
    color: var(--color-primary);
}

.privacy-popup-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    padding-right: 2rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.75rem;
}

.privacy-popup-body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--font-size-md-base);
    line-height: 1.8;
    color: var(--color-text-main);
}

.privacy-popup-body p {
    margin-bottom: 1.25rem;
}

.privacy-popup-body strong {
    color: var(--color-text-main);
    font-weight: 700;
}

.privacy-popup-body ul {
    margin: 0.75rem 0 1.25rem 1.5rem;
    padding: 0;
}

.privacy-popup-body ul li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
}

/* ドロップダウン表示時のスタイル */
.privacy-popup.active .privacy-popup-content {
    animation: slideDown 0.3s ease-out;
}

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

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

@media (max-width: 640px) {
    .privacy-popup-content {
        padding: 1.5rem;
        max-height: 60vh;
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        border-radius: 0.5rem;
    }

    .privacy-popup-title {
        font-size: var(--font-size-lg);
        margin-bottom: 1rem;
    }

    .privacy-popup-body {
        font-size: var(--font-size-xs);
        line-height: 1.7;
    }

    .privacy-popup-close {
        top: 0.75rem;
        right: 0.75rem;
        font-size: 1.75rem;
    }
}

/* ============================================
   Privacy Policy Dropdown for Contact Form 7
   ============================================ */
.privacy-popup-form {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 0.5rem;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.privacy-popup-form.active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

.privacy-popup-form-content {
    position: relative;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
    animation: slideDown 0.3s ease-out;
}

.privacy-popup-form-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
    z-index: 1001;
}

.privacy-popup-form-close:hover {
    color: var(--color-primary);
}

.privacy-popup-form-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    padding-right: 2rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.75rem;
}

.privacy-popup-form-body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--font-size-md-base);
    line-height: 1.8;
    color: var(--color-text-main);
}

.privacy-popup-form-body p {
    margin-bottom: 1.25rem;
}

.privacy-popup-form-body strong {
    color: var(--color-text-main);
    font-weight: 700;
}

.privacy-popup-form-body ul {
    margin: 0.75rem 0 1.25rem 1.5rem;
    padding: 0;
}

.privacy-popup-form-body ul li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
}

@media (max-width: 640px) {
    .privacy-popup-form-content {
        padding: 1rem;
        max-height: 60vh;
        border-radius: 0.5rem;
    }

    .privacy-popup-form-title {
        font-size: var(--font-size-lg);
        margin-bottom: 1rem;
        padding-right: 2.5rem;
    }

    .privacy-popup-form-body {
        font-size: var(--font-size-xs);
        line-height: 1.7;
    }

    .privacy-popup-form-close {
        top: 0.75rem;
        right: 0.75rem;
        font-size: 1.75rem;
    }
}