@charset "UTF-8";

/* =========================================
   Base Styles
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    line-height: 1.6;
    font-size: 16px;
    background-color: #fff;
    overflow-x: hidden; 
}

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

a:hover {
    opacity: 0.7;
}

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

li {
    list-style: none;
}

/* Colors */
:root {
    --primary-blue: #1e3a8a; /* 濃紺 */
    --accent-yellow: #f1c40f; /* ゴールド/黄色 */
    --bg-gray: #f9f9f9;
    --text-white: #fff;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: 5px;
}

.section-title.white {
    color: var(--text-white);
}

.section-title .accent {
    color: var(--accent-yellow);
}

.ja-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 30px;
    display: inline-block;
}

.ja-title.white {
    color: var(--text-white);
}

.sp-only { display: none; }
.pc-only { display: block; }

/* =========================================
   Header
   ========================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: 70px;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    font-size: 1.25rem;
    color: var(--primary-blue);
    font-weight: 700;
    display: flex;
    align-items: center;
}

/* PC Nav */
.pc-nav ul {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pc-nav a {
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-contact-header {
    background-color: var(--primary-blue);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 2px;
}

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 2000;
}

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

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.active span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) {
    bottom: 11px;
    transform: rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu ul {
    text-align: center;
}

.mobile-menu li {
    margin-bottom: 20px;
}

.mobile-menu a {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

/* =========================================
   Hero
   ========================================= */
.hero {
    height: 600px;
    background-color: #ddd;
    background-image: url('https://placehold.co/1200x800/888/333?text=Hero+Image');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 1000px;
    width: 100%;
    padding: 0 20px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.hero-text {
    font-size: 1.1rem;
}

/* =========================================
   Content Sections (Common)
   ========================================= */
.flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

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

.text-area { flex: 1; }
.img-area { flex: 1; }

.placeholder-img {
    width: 100%;
    height: 300px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.desc {
    margin-bottom: 30px;
    text-align: justify;
}

/* =========================================
   Buttons
   ========================================= */

/* Navy Button */
.btn-arrow {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 50px; 
    font-weight: 700;
    margin-top: 30px;
    transition: opacity 0.3s;
    
    border-left: 3px solid var(--accent-yellow);
}

.btn-arrow:hover {
    opacity: 0.8;
}

.btn-arrow::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: 15px; 
    margin-top: -2px; 
}

/* White Button */
.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    background-color: #fff;
    color: var(--primary-blue);
    padding: 15px 50px;
    font-weight: 700;
    transition: opacity 0.3s;
    
    border-left: 3px solid var(--accent-yellow);
}

.btn-white:hover {
    opacity: 0.8;
}

.btn-white::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--primary-blue);
    border-right: 2px solid var(--primary-blue);
    transform: rotate(45deg);
    margin-left: 15px;
    margin-top: -2px;
}

/* Page Top Button */
.page-top-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    background-color: #16336F;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}

.page-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-top-button .page-top-icon {
    display: block;
    width: 12px;
    height: 12px;
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-top: 4px;
}

.page-top-button:hover {
    opacity: 0.85;
}

/* =========================================
   About Us (Image Right, Text Bottom-Left, Navy Shadow Top-Right)
   ========================================= */
.about-overlap {
    position: relative;
    margin-top: 150px;
    padding-top: 130px; 
    padding-bottom: 0;
    background-color: transparent;
}

/* 紺色の影（右上へずらす） */
.about-bg-shadow {
    position: absolute;
    top: 0; 
    right: 30px; 
    bottom: 0;
    width: 60%; 
    background-color: var(--primary-blue);
    z-index: -1; 
    transform: translate(30px, -30px);
}

/* 画像背景 */
.about-bg-image {
    position: absolute;
    top: 0; 
    right: 30px; 
    bottom: 0; 
    width: 60%; 
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.about-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end; 
    min-height: 500px; 
    padding-bottom: 0; 
}

.about-text-box {
    background-color: #ffffff;
    background: #ffffff;
    padding: 60px;
    width: 50%;
    margin-bottom: 0; 
    margin-top: 50px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* =========================================
   Business (Image Left, Text Top-Right, Navy Shadow Bottom-Left)
   ========================================= */
.business-overlap {
    position: relative;
    margin-top: 150px;
    padding-top: 0;
    padding-bottom: 100px; 
    margin-bottom: 100px;
    overflow: visible;
    background-color: transparent;
}

/* 紺色の影（左下へずらす） */
.business-bg-shadow {
    position: absolute;
    top: 0; 
    left: 30px; 
    bottom: 0;
    width: 60%; 
    background-color: var(--primary-blue);
    z-index: -1; 
    transform: translate(-30px, 30px);
}

/* 画像背景 */
.business-bg-image {
    position: absolute;
    top: 0;
    left: 30px;
    bottom: 0; 
    width: 60%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.business-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 500px;
    padding-top: 0;
}

.business-text-box {
    background-color: #ffffff;
    padding: 60px;
    width: 50%;
    margin-top: 0; 
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* =========================================
   Other Sections
   ========================================= */
/* Construction */
.construction {
    background-color: var(--primary-blue);
    color: #fff;
    margin-top: 0; 
}

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

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.work-img {
    height: 180px;
    background-color: #ccc;
    margin-bottom: 15px;
}

.work-desc {
    font-size: 0.9rem;
    line-height: 1.5;
}

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

/* Recruit */
.recruit-full {
    padding: 0;
    width: 100%;
    margin-top: 100px;
}

.recruit-wrapper {
    display: flex;
    width: 100%;
}

.recruit-img {
    width: 50%;
}

.full-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-color: #ccc;
    background-image: url('https://placehold.co/800x600/ccc/333?text=Recruit+Image');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.recruit-text {
    width: 50%;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%; 
}

.text-content {
    max-width: 460px;
    width: 100%;
    padding: 60px 20px 60px 0;
}

/* News */
.news-container {
    display: flex;
    gap: 40px;
}

.news-head {
    width: 250px;
    flex-shrink: 0;
}

/* News Section Specific Adjustments */
.news-head .section-title {
    font-size: 3rem;
    margin-bottom: 10px;
}

.news-head .ja-title {
    font-size: 1rem;
}

.link-arrow {
    font-size: 0.9rem;
    color: #333;
    font-weight: bold;
}

.news-list {
    flex-grow: 1;
    border-top: 1px solid #ddd;
}

.news-list dl {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.news-list dt {
    width: 120px;
    font-weight: bold;
    flex-shrink: 0;
}

.news-list dd {
    flex-grow: 1;
}

/* Contact */
.contact {
    background: transparent;
    padding: 0; 
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: -150px; 
    position: relative;
    z-index: 10;
}

.contact-box {
    padding: 30px 20px;
    background: #f4f4f4;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.contact-lead {
    text-align: center;
    margin-bottom: 40px;
}

.contact-inner {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
}

/* White Cards */
.contact-info, .contact-form-btn {
    flex: 1;
    text-align: center;
    background: #fff;
    padding: 30px;
}

.contact-label {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

/* Phone Icon */
.tel-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: 5px;
}

.tel-number::before {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%231e3a8a%22%3E%3Cpath%20d%3D%22M6.62%2010.79c1.44%202.83%203.76%205.14%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201-9.39%200-17-7.61-17-17%200-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.contact-hours {
    font-size: 0.8rem;
    color: #666;
}

/* Mail Icon */
.btn-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px;
    font-weight: bold;
    width: 100%;
    max-width: 100%;
    margin: 10px auto 0;
    
    border-left: 3px solid var(--accent-yellow);
}

.btn-mail::before {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M20%204H4c-1.1%200-1.99.9-1.99%202L2%2018c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Footer */
.footer {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 200px 0 20px;
    position: relative;
}

.footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.footer-left {
    max-width: 400px;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.footer-logo-icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 4px;
}

.footer-logo-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}

.footer-company-name {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 15px;
}

.footer-address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 20px;
}

.footer-social {
    margin-top: 15px;
}

.footer-instagram {
    display: inline-block;
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.footer-instagram:hover {
    opacity: 1;
}

.footer-instagram svg {
    width: 24px;
    height: 24px;
}

.footer-right {
    max-width: 600px;
}

.footer-nav-columns {
    display: flex;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-col {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav a {
    color: #fff;
    font-size: 0.9rem;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    text-decoration: underline;
    opacity: 1;
}

.copyright {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    text-align: center;
}

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    opacity: 0.9;
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
}

/* =========================================
   Responsive (Smartphone - max 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    .sp-only { display: block; }
    .pc-only { display: none; }

    /* Header */
    .pc-nav { display: none; }
    .hamburger { display: block; }

    /* Hero */
    .hero {
        height: 400px;
        align-items: center;
        background-position: right;
    }
    
    .hero-title {
        font-size: 2rem;
    }

    .section {
        padding: 50px 0;
    }

    .section-heading-en{
        line-height: 120%;
    }

    /* Common Layout Reset */
    .flex-row, .flex-row.reverse {
        flex-direction: column;
        gap: 30px;
    }

    /* --- About Us Section (スマホ用カスタム) --- */
    .about-overlap {
        /* 画像の高さ(300px) + 影のずれ(20px) + 余白 を確保 */
        padding-top: 340px;
        padding-bottom: 50px;
        margin-top: 50px;
        overflow: visible;
        position: relative;
    }

    /* 画像と影を右寄せに配置 (幅85%に変更) */
    .about-bg-image,
    .about-bg-shadow {
        display: block;
        position: absolute;
        top: 0;
        right: 20px; /* 右寄せ */
        width: 85%;  /* 画像の幅 */
        height: 300px; /* 画像の高さ */
        z-index: 0;
    }

    .about-bg-shadow {
        background-color: var(--primary-blue);
        z-index: -1;
        /* 右上へずらす */
        transform: translate(20px, -20px);
    }

    /* テキストボックス: 画像の下に単純に配置（重ねない） */
    .about-container {
        display: block;
        padding: 0 20px;
    }

    .about-text-box {
        width: 100%;
        margin: 0;
        padding: 30px 20px; /* 画像との間に少し余白 */
        background-color: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        position: static;
    }

    /* --- Business Section (スマホ用カスタム) --- */
    .business-overlap {
        /* 画像の高さ(300px) + 影のずれ(20px) + 余白 を確保 */
        padding-top: 340px; 
        padding-bottom: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
        overflow: visible;
        position: relative;
    }
    
    /* 画像と影を左寄せに配置 (幅85%に変更) */
    .business-bg-image,
    .business-bg-shadow {
        display: block;
        position: absolute;
        top: 0;
        left: 20px; /* 左寄せ */
        width: 85%; /* 画像の幅 */
        height: 300px; /* 画像の高さ */
        z-index: 0;
        /* PC版の配置をリセット */
        right: auto; bottom: auto;
    }
    
    .business-bg-shadow {
        background-color: var(--primary-blue);
        z-index: -1;
        /* 左下へずらす */
        transform: translate(-20px, 20px);
    }

    /* テキストボックス: 画像の下に単純に配置（重ねない） */
    .business-container {
        display: block;
        min-height: auto;
        padding: 0 20px;
    }
    .business-text-box {
        width: 100%;
        margin: 0;
        padding: 30px 0 0 0;
        background: transparent;
        box-shadow: none;
        position: static;
    }
    
    /* Construction */
    .construction {
        margin-top: 0;
    }

    .placeholder-img {
        height: 200px;
    }

    .works-grid {
        grid-template-columns: 1fr;
    }

    /* Recruit */
    .recruit-wrapper {
        flex-direction: column;
    }
    .recruit-img, .recruit-text {
        width: 100%;
    }
    .recruit-text {
        padding-left: 0;
        justify-content: center;
    }
    .text-content {
        padding: 40px 20px;
        max-width: 100%;
    }
    .sp-order-1 { order: 1; }
    .sp-order-2 { order: 2; }


    /* News */
    .news-container {
        flex-direction: column;
        gap: 20px;
    }
    .news-list dl {
        flex-direction: column;
    }
    .text-right {
        text-align: right;
        margin-top: 10px;
    }

    /* Contact Responsive */
    .contact {
        margin-bottom: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }

    .contact-box {
        padding: 30px 20px;
    }

    .contact-inner {
        flex-direction: column;
        gap: 20px;
    }
    
    .contact-info, .contact-form-btn {
        width: 100%;
        padding: 20px;
        border: none; 
    }
    
    .tel-number {
        font-size: 1.8rem;
    }

    /* 問い合わせページ：電話番号を1行で表示 */
    .contact-phone-box .tel-number {
        white-space: nowrap;
        font-size: 1.5rem;
    }

    /* エントリーページ：紹介文を幅いっぱいに */
    .entry-intro {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 問い合わせフォーム（スマホ）：見出しと入力欄を上下配置 */
    .contact-form-wrapper,
    .contact-form-wrapper .wpcf7,
    .contact-form-wrapper .wpcf7 form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .contact-form-wrapper .wpcf7 form p,
    .entry-form-wrapper .wpcf7 form p {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        margin-bottom: 1.2em;
        box-sizing: border-box;
    }
    .contact-form-wrapper .wpcf7 form label,
    .entry-form-wrapper .wpcf7 form label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        margin-bottom: 8px;
        order: 0;
    }
    
    .contact-form-wrapper .wpcf7 form label .required {
        margin-left: 0;
    }
    /* 入力欄はラベルの下に表示（CF7は label の次に span や input が来る） */
    .contact-form-wrapper .wpcf7 form p .wpcf7-form-control-wrap,
    .contact-form-wrapper .wpcf7 form p input,
    .contact-form-wrapper .wpcf7 form p select,
    .contact-form-wrapper .wpcf7 form p textarea {
        order: 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .contact-form-wrapper .wpcf7 form input[type="text"],
    .contact-form-wrapper .wpcf7 form input[type="email"],
    .contact-form-wrapper .wpcf7 form input[type="tel"],
    .contact-form-wrapper .wpcf7 form select,
    .contact-form-wrapper .wpcf7 form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* 姓・名、住所など横並びをスマホでは縦並びに */
    .contact-form-wrapper .name-row,
    .contact-form-wrapper .address-row {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        gap: 10px;
    }
    .contact-form-wrapper .name-row input,
    .contact-form-wrapper .address-row input:not(#postal) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .contact-form-wrapper .form-submit {
        margin-top: 28px;
    }
    .contact-form-wrapper .btn-submit,
    .contact-form-wrapper .btn-submit-entry {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    /* エントリーフォーム（スマホ）：幅を確保。padding 0 で問い合わせフォームには影響なし */
    .entry-form-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
    }
    .entry-form-wrapper .wpcf7,
    .entry-form-wrapper .wpcf7 form,
    .entry-form-wrapper .entry-form {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .entry-form-wrapper .entry-form .entry-row,
    .entry-form-wrapper .form-group.entry-row,
    .contact-form-wrapper .entry-form .entry-row,
    .contact-form-wrapper .form-group.entry-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0;
    }
    .entry-form-wrapper .entry-label,
    .contact-form-wrapper .entry-label {
        width: 100% !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        min-width: 0;
    }
    .entry-form-wrapper .entry-fields,
    .contact-form-wrapper .entry-fields {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0;
    }
    .entry-form-wrapper .entry-fields input:not(#postal),
    .entry-form-wrapper .entry-fields select,
    .entry-form-wrapper .entry-fields textarea,
    .entry-form-wrapper .name-row input,
    .entry-form-wrapper .address-row input:not(#postal),
    .contact-form-wrapper .entry-fields input:not(#postal),
    .contact-form-wrapper .entry-fields select,
    .contact-form-wrapper .entry-fields textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0;
    }
    .entry-form-wrapper .name-row,
    .entry-form-wrapper .address-row,
    .contact-form-wrapper .name-row,
    .contact-form-wrapper .address-row {
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0;
    }

    .contact-form-wrapper .address-line .address-inputs,
    .entry-form-wrapper .address-line .address-inputs {
        min-width: 0;
    }

    /* 〒行：右カラムが親幅を超えないように */
    .contact-form-wrapper .address-block > .address-line:first-child,
    .entry-form-wrapper .address-block > .address-line:first-child {
        max-width: 100%;
    }

    .contact-form-wrapper .address-block > .address-line:first-child .address-inputs,
    .entry-form-wrapper .address-block > .address-line:first-child .address-inputs {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }

    .contact-form-wrapper .address-block > .address-line:first-child .address-inline-label,
    .entry-form-wrapper .address-block > .address-line:first-child .address-inline-label {
        width: auto;
        min-width: 1.75em;
        flex-shrink: 0;
    }

    /* 郵便番号＋住所検索：グリッドで右端はみ出しを防ぐ（入力狭め・ボタンは残り列） */
    .contact-form-wrapper .address-block > .address-line:first-child .address-row,
    .entry-form-wrapper .address-block > .address-line:first-child .address-row,
    .contact-form-wrapper .address-row-postal,
    .entry-form-wrapper .address-row-postal {
        display: grid !important;
        grid-template-columns: minmax(0, 5.75rem) minmax(0, 1fr);
        align-items: center;
        column-gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .contact-form-wrapper .address-block > .address-line:first-child .address-row .wpcf7-form-control-wrap,
    .entry-form-wrapper .address-block > .address-line:first-child .address-row .wpcf7-form-control-wrap,
    .contact-form-wrapper .address-row-postal .wpcf7-form-control-wrap,
    .entry-form-wrapper .address-row-postal .wpcf7-form-control-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .contact-form-wrapper .address-block > .address-line:first-child #postal,
    .entry-form-wrapper .address-block > .address-line:first-child #postal,
    .contact-form-wrapper .address-row-postal #postal,
    .entry-form-wrapper .address-row-postal #postal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-form-wrapper .address-block > .address-line:first-child .btn-postal,
    .entry-form-wrapper .address-block > .address-line:first-child .btn-postal,
    .contact-form-wrapper .address-row-postal .btn-postal,
    .entry-form-wrapper .address-row-postal .btn-postal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 6px;
        font-size: 0.78rem;
        white-space: nowrap;
        margin: 0 !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* Footer Responsive */
    .footer {
        padding: 50px 0 20px;
    }
    
    .footer-flex {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-left, .footer-right {
        max-width: 100%;
        text-align: left;
    }
    
    .footer-nav-columns {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-nav-col ul {
        gap: 10px;
    }

    .copyright {
        text-align: center;
    }
    
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* =========================================
   Page Styles (共通ページスタイル)
   ========================================= */
.page-main {
    margin-top: 0px;
    background-color: #fff;
}

.page-hero {
    background-color: #fff;
    padding: 40px 0 20px;
    border-bottom: none;
}

.page-title-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title-block .page-title-en .accent {
    color: var(--accent-yellow);
}

.page-title-separator {
    color: var(--accent-yellow);
    font-weight: 400;
}

.page-title-block .page-title-ja {
    color: #333;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* About Page Title */
.page-title-about {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: sans-serif;
}

.page-title-en {
    font-size: 3.5rem;
    color: var(--primary-blue);
}

.title-separator-vertical {
    color: var(--accent-yellow);
    font-weight: 400;
    font-size: 3.5rem;
    line-height: 1;
}

.page-title-ja {
    font-size: 1.2rem;
    color: var(--primary-blue);
}

.title-separator {
    color: var(--accent-yellow);
    font-weight: 400;
}

.breadcrumb {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-below-image {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page-section {
    padding: 30px 0 0;
    background-color: #fff;
}

.contact-section {
    background-color: #f9f9f9;
    padding: 80px 0;
}

.section-title-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title-large .accent {
    color: var(--accent-yellow);
}

.section-desc {
    margin-bottom: 30px;
    margin-top: 30px;
    line-height: 1.8;
}

.section-heading {
    text-align: center;
    margin-bottom: 24px;
}

.section-heading-en {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
    text-align: center;
}

.section-heading-en .accent {
    color: var(--accent-yellow);
}

.section-heading-ja {
    font-size: 1rem;
    color: #333;
    text-align: center;
}

/* Page hero image section */
.page-hero-image-section {
    padding: 0;
    margin: 0;
}

.page-hero-image-wrap {
    width: calc(100% - 120px);
    height: 500px;
    margin: 0 0 40px 120px;
    overflow: hidden;
}

.page-hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.philosophy-section {
    padding-top: 0px;
}

.about-text-box-full {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
    text-align: center;
}


.philosophy-subtitle-main {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

.philosophy-content {
    margin-top: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-item {
    margin-bottom: 40px;
}

.philosophy-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    display: inline-block;
    width: 100%;
}

.philosophy-subtitle::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-yellow) 50%, var(--primary-blue) 50%);
    margin: 10px auto 0;
}

.philosophy-text {
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 10px;
    font-family: serif;
    font-style: italic;
}

.philosophy-image {
    text-align: center;
    margin: 20px 0;
}

.philosophy-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.philosophy-list {
    list-style: none;
    padding: 20px 30px;
    background-color: #F2F5F8;
    border-radius: 0;
    width: fit-content;
    margin: 0 auto;
    text-align: left;
}

.philosophy-list li {
    padding-left: 0;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.8;
    color: #333;
}

.overview-section {
    text-align: center;
}

.overview-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffa500;
    margin-bottom: 10px;
    text-align: center;
    font-family: sans-serif;
    letter-spacing: 0.1em;
}

.overview-subtitle {
    font-size: 1.2rem;
    color: var(--primary-blue);
    margin-bottom: 40px;
    text-align: center;
    font-weight: 700;
}

.overview-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.overview-info-section {
    max-width: 900px;
    margin: 30px auto 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    text-align: left;
}

.overview-info-section:last-of-type {
    border-bottom: none;
}

.overview-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.overview-info-label {
    font-weight: 700;
    color: #333;
    width: 200px;
    flex-shrink: 0;
    padding: 15px;
    text-align: left;
}

.overview-info-content {
    flex: 1;
    padding: 15px 15px 15px 0;
}

.overview-info-item {
    margin-bottom: 8px;
    line-height: 1.8;
    color: #333;
}

.overview-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.overview-table th,
.overview-table td {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    line-height: 1.8;
}

.overview-table th {
    background-color: transparent;
    font-weight: 700;
    width: 200px;
    color: #333;
    vertical-align: top;
}

.overview-table td {
    color: #333;
}

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

.map-container {
    margin-top: 30px;
}

.map-placeholder {
    width: 100%;
    height: 400px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    position: relative;
    overflow: hidden;
}

.map-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.history-list {
    margin-top: 30px;
}

.history-item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.history-year {
    font-weight: 700;
    width: 120px;
    flex-shrink: 0;
}

.history-text {
    flex-grow: 1;
}

/* Business Page */
.business-hero-image {
    width: calc(100% - 120px);
    height: 500px;
    margin: 0 0 40px 120px;
    overflow: hidden;
}

.business-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-intro-box {
    background-color: transparent;
    padding: 0 0 60px;
    box-shadow: none;
    position: relative;
    z-index: 1;
    margin-top: 0px;
    text-align: center;
    max-width: 100%;
}

.business-intro-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.6;
}

.business-intro-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 40px;
}

.business-logo {
    margin: 50px 0;
}

.interior-logo-title {
    font-size: 4rem;
    font-weight: 700;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    line-height: 1;
}

.interior-logo-i,
.interior-logo-o {
    color: #ffa500;
}

.interior-logo-middle {
    color: var(--primary-blue);
}

.interior-logo-subtitle {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}

.business-intro-text-2 {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
    margin: 40px 0 30px;
    text-align: left;
}

.business-service-list {
    list-style: none;
    padding-left: 0;
    margin: 30px -20px 0;
    text-align: left;
    background-color: #f5f7fb;
    padding: 25px 50px;
    border-radius: 6px;
    width: calc(100% + 40px);
    max-width: none;
    box-sizing: border-box;
}

.business-service-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: #333;
}

.business-service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background-color: #ffa500;
    border-radius: 50%;
}

.service-list {
    list-style: none;
    padding-left: 0;
    margin: 30px -20px 0;
    background-color: #f5f7fb;
    padding: 25px 50px;
    border-radius: 6px;
    width: calc(100% + 40px);
    max-width: none;
    box-sizing: border-box;
}

.service-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: #333;
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background-color: #ffa500;
    border-radius: 50%;
}

.interior-section-title {
    font-size: 4rem;
    font-weight: 700;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    line-height: 1;
}

.interior-title-int {
    color: var(--accent-yellow);
}

.interior-title-erior {
    color: var(--primary-blue);
}

.interior-section-subtitle {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 30px;
}

.structural-section-title {
    font-size: 4rem;
    font-weight: 700;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    line-height: 1;
    text-align: center;
}

.structural-title-s {
    color: var(--accent-yellow);
}

.structural-title-rest {
    color: var(--primary-blue);
}

.structural-section-subtitle {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: center;
}

.interior-content-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    margin-left: -20px;
    align-items: flex-start;
    width: calc(100% + 40px);
}

.service-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 40px;
    width: 100%;
}

.service-image {
    width: 100%;
    height: auto;
    background-color: #ddd;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.service-note {
    background-color: transparent;
    color: #ff0000;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 220px;
    flex-shrink: 0;
}

.service-note p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* Construction Page */
.construction-hero {
    padding: 40px 0 20px;
    background-color: #fff;
    border-bottom: none;
}

.construction-main-image {
    width: calc(100% - 120px);
    height: 400px;
    margin: 0 0 40px 120px;
    overflow: hidden;
}

.construction-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-filter {
    text-align: right;
    color: #ff6b6b;
    margin-bottom: 40px;
    font-weight: 700;
}

.construction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.construction-item {
    background-color: #fff;
}

.construction-image {
    width: 100%;
    height: 240px;
    background-color: #ddd;
    background-image: url('https://placehold.co/400x300/ccc/333?text=Construction');
    background-size: cover;
    background-position: center;
    margin-bottom: 15px;
}

.construction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.construction-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.construction-title {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.page-number,
.page-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
}

.page-number.active {
    background-color: var(--accent-yellow);
    color: #fff;
}

.page-number:hover,
.page-next:hover {
    background-color: var(--primary-blue);
    color: #fff;
}

/* Construction Detail */
.construction-detail-header {
    margin-bottom: 40px;
}

.construction-detail-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.construction-detail-date {
    color: #666;
    font-size: 0.9rem;
}

.construction-gallery {
    margin-bottom: 40px;
}

.gallery-date {
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.gallery-main {
    position: relative;
    margin-bottom: 20px;
}

.gallery-main-image {
    width: 100%;
    height: 640px;
    background-color: #ddd;
    overflow: hidden;
}

.gallery-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-prev,
.gallery-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    background-color: rgba(30, 58, 138, 0.8);
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.gallery-prev:hover,
.gallery-next:hover {
    opacity: 0.9;
}

.gallery-prev {
    left: 0;
}

.gallery-next {
    right: 0;
}

.construction-gallery.gallery-single .gallery-prev,
.construction-gallery.gallery-single .gallery-next {
    display: none;
}

.gallery-thumbnails-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
	overflow: hidden;
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    flex: 1;
	flex-wrap: wrap; 
	overflow-y: auto;
	max-height: 220px; 
}

.gallery-thumb {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    border: 3px solid transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    display: block;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-thumb.is-active {
    border-color: #1e3a8a;
}

.gallery-note {
    color: #ff0000;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.construction-info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 20px;
    background-color: transparent;
}

.construction-info-table th,
.construction-info-table td {
    padding: 15px;
    border: none;
    text-align: left;
    background-color: #f5f5f5;
}

.construction-info-table th {
    font-weight: 700;
    width: 200px;
}

.construction-content {
    margin: 40px 0;
    line-height: 1.8;
}

.construction-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 30px 0 15px;
    color: #333;
}

.construction-content h3 {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 20px;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 30px -20px 15px;
    width: calc(100% + 40px);
    box-sizing: border-box;
}

.construction-content h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: #333;
    padding-left: 15px;
    border-left: 4px solid var(--accent-yellow);
}

.construction-content h5 {
    font-size: 1rem;
    font-weight: 700;
    margin: 15px 0 10px;
    color: #333;
}

.construction-content ul {
    list-style: none;
    padding: 20px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.construction-content ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.construction-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-yellow);
    font-weight: bold;
    font-size: 1.2rem;
}

.construction-content ol {
    padding: 20px 20px 20px 30px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.construction-content ol li {
    margin-bottom: 10px;
}

.construction-content table,
.construction-content figure.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.construction-content th,
.construction-content td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    background-color: #fff;
}

.construction-content thead th {
    background-color: #fff;
    font-weight: normal;
}

.construction-content a {
    color: #1B2C70;
    text-decoration: underline;
}

.construction-content a:hover {
    opacity: 0.8;
}

.construction-content p {
	margin-bottom:20px;
}

.construction-navigation,
.news-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding: 30px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

/* お知らせナビ：左・中央・右を等幅にし「お知らせ一覧へ戻る」を常に中央に固定 */
.news-navigation {
    display: flex;
    justify-content: space-between;
}
.news-nav-slot {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.news-nav-slot-left {
    justify-content: flex-start;
}
.news-nav-slot-center {
    justify-content: center;
}
.news-nav-slot-right {
    justify-content: flex-end;
}

.construction-nav-link,
.news-nav-link {
    color: #333;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.construction-nav-link:hover,
.news-nav-link:hover {
    opacity: 0.7;
}

.construction-nav-prev {
    flex-direction: row;
}

.construction-nav-center {
    flex-direction: column;
    gap: 8px;
}

.construction-nav-next {
    flex-direction: row;
}

.construction-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent-yellow);
    color: #333;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.construction-nav-icon-grid {
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: var(--accent-yellow);
    color: #333;
}

.construction-nav-icon-grid svg {
    width: 24px;
    height: 24px;
}

.construction-nav-text {
    color: #333;
}

.news-nav-prev {
    flex-direction: row;
}

.news-nav-center {
    flex-direction: column;
    gap: 8px;
}

.news-nav-next {
    flex-direction: row;
}

.news-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent-yellow);
    color: #333;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.news-nav-icon-grid {
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: var(--accent-yellow);
    color: #333;
}

.news-nav-icon-grid svg {
    width: 24px;
    height: 24px;
}

.news-nav-text {
    color: #333;
    font-weight: 700;
}

/* News Page */
.news-list-page {
    border-top: 1px solid #ddd;
}

.news-item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.news-item dt {
    width: 120px;
    font-weight: 700;
    flex-shrink: 0;
}

.news-item dd {
    flex-grow: 1;
}

/* News Detail */
.news-detail {
    max-width: 800px;
    margin: 0 auto;
}

.news-date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.news-detail-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 30px;
    line-height: 1.4;
}

.news-image-placeholder {
    width: 100%;
    height: 400px;
    background-color: #ddd;
    margin-bottom: 30px;
}

.news-content {
    line-height: 1.8;
}

.news-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 30px 0 15px;
    color: #333;
}

.news-content h3 {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 20px;
    font-size: 1.4rem;
    font-weight: 700;
    /*margin: 30px -20px 15px;*/
    width: calc(100% + 40px);
    box-sizing: border-box;
}

.heading-blue {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 20px;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 30px -20px 15px;
    width: calc(100% + 40px);
    box-sizing: border-box;
}

.news-content h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: #333;
    padding-left: 15px;
    border-left: 4px solid var(--accent-yellow);
}

.news-content h5 {
    font-size: 1rem;
    font-weight: 700;
    margin: 15px 0 10px;
    color: #333;
}

.news-content ul {
    list-style: none;
    padding: 20px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.news-content ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.news-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-yellow);
    font-weight: bold;
    font-size: 1.2rem;
}

.news-content ol {
    padding: 20px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
    list-style: none;
    counter-reset: news-ol;
}

.news-content ol li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 25px;
    counter-increment: news-ol;
}

.news-content ol li::before {
    content: counter(news-ol);
    position: absolute;
    left: -7px;
    top: 0.15em;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.news-content table,
.news-content figure.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.news-content th,
.news-content td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    background-color: #fff;
}

.news-content thead th {
    background-color: #fff;
    font-weight: normal;
}

.news-content a {
    color: #1B2C70;
    text-decoration: underline;
}

.news-content a:hover {
    opacity: 0.8;
}

.news-content p {
	margin-bottom:20px;
}

.content-list {
    list-style: none;
    padding: 20px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.content-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.content-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-yellow);
    font-weight: bold;
    font-size: 1.2rem;
}

.content-list-numbered {
    list-style: none;
    padding: 20px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.content-list-numbered li {
    margin-bottom: 10px;
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.content-table th,
.content-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    background-color: #fff;
}

.content-table thead th {
    background-color: #fff;
    font-weight: normal;
}

.link-color {
    color: #1B2C70;
    text-decoration: underline;
}

/* Contact Form */
.contact-intro {
    margin-bottom: 40px;
}

.contact-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: center;
}

.contact-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.4;
    text-align: center;
}

.contact-desc {
    line-height: 1.8;
    margin-bottom: 30px;
    color: #333;
    text-align: center;
}

.contact-phone-box {
    background-color: #fff;
    border: 1px solid #b3d9ff;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.tel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.tel-icon {
    width: 32px;
    height: 32px;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.contact-phone-box .tel-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
    display: inline-flex;
}

.contact-phone-box .tel-number::before {
    display: none;
}

.contact-form-wrapper {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
    max-width: 800px;
    margin: 0 auto;
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.required {
    background-color: var(--accent-yellow);
    color: #fff;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 2px;
}

/* Contact Form 7 フォーム内のラベルと必須バッジのレイアウト */
.wpcf7 form label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wpcf7 form label .required {
    margin-left: auto; /* ラベルの右端に寄せる */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 1rem;
    font-family: "Noto Sans JP", sans-serif;
    background-color: #f5f5f5;
}

.form-group textarea {
    resize: vertical;
}

.name-row {
    display: flex;
    gap: 6px; /* お名前（姓・名）の間隔を少し詰める */
}

.name-row input {
    flex: 1;
}

.address-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.address-row input {
    flex: 1;
}

.btn-postal {
    background-color: #f5f5f5;
    color: #333;
    padding: 12px 20px;
    border: 1px solid #ddd;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
}

/* 郵便番号入力（Contact Form 7 等で id="postal" を付けたテキスト） */
#postal {
    max-width: 8em; /* 郵便番号7〜8桁が収まる程度の幅 */
    width: 100%;
}

/* Contact Form 7 での郵便番号＋住所検索ボタンの横並び（PC想定） */
@media (min-width: 768px) {
    .wpcf7 form #postal,
    .wpcf7 form .btn-postal {
        display: inline-block;
        vertical-align: middle;
    }
    .wpcf7 form #postal {
        width: auto;
    }
    .wpcf7 form .btn-postal {
        width: auto;
        margin-left: 10px;
    }
}

.address-select {
    margin-bottom: 10px;
}

.address-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.address-line {
    display: flex;
    align-items: center;
    gap: 15px;
}

.address-inline-label {
    width: 80px;
    font-size: 0.9rem;
    color: #333;
}

.address-inputs {
    flex: 1;
}

.address-line .address-row {
    margin-bottom: 0;
}

.birth-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Contact Form 7 側で「お名前」姓・名を横並びにする（id を name-sei / name-mei としている前提） */
@media (min-width: 768px) {
    .wpcf7 form #name-sei,
    .wpcf7 form #name-mei {
        flex: 1 1 0;
        width: 100%;
    }
}

.birth-row input[type="text"] {
    width: 80px;
}

.birth-label {
    font-size: 0.9rem;
    color: #333;
}

.form-privacy-notice {
    text-align: center;
    margin: 30px 0 20px;
    color: #333;
    font-size: 0.9rem;
}

.form-privacy-notice a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.form-privacy-notice a:hover {
    opacity: 0.8;
}

.form-checkbox-group {
    text-align: center;
    margin: 20px 0;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    justify-content: center;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
}

.form-submit {
    text-align: center;
    margin-top: 40px;
}

.btn-submit,
.btn-submit-entry {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 50px;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s;
    position: relative;
    padding-left: 60px;
}

.btn-submit-entry::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--accent-yellow);
}

.btn-submit:hover,
.btn-submit-entry:hover {
    opacity: 0.8;
}

.btn-submit::after {
    content: '→';
    font-size: 1.2rem;
}

.btn-submit-entry::after {
    content: '›';
    font-size: 1.2rem;
    margin-left: 5px;
}

/* Policy Pages */
.policy-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.policy-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 40px 0 20px;
}

.policy-content h3:first-child {
    margin-top: 0;
}

.policy-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 30px 0 15px;
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
}

.policy-content ul {
    margin: 20px 0;
    padding-left: 30px;
}

.policy-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.policy-content li {
    margin-bottom: 10px;
}

.site-policy-list {
    margin: 40px 0;
    padding: 30px 30px 30px 30px;
    list-style: none;
    counter-reset: policy-counter;
    background-color: #F6F6F6;
    border-radius: 4px;
}

.site-policy-list li {
    margin-bottom: 10px;
    padding-left: 35px;
    position: relative;
    counter-increment: policy-counter;
}

.site-policy-list li::before {
    content: counter(policy-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: var(--accent-yellow);
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.policy-list {
    list-style: none;
    padding: 20px;
    margin: 20px 0;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.policy-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.policy-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ff8c00;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Entry Form */
.entry-intro {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.entry-form-wrapper {
    background-color: #fff;
    padding: 0;
    box-shadow: none;
    border: none;
    max-width: 800px;
    margin: 0 auto;
}

/* CF7で誤って </div> が1つ多く entry-form が途中で閉じても、wrapper 内の行は横並びになる */
.entry-form-wrapper .form-group.entry-row,
.contact-form-wrapper .form-group.entry-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.entry-label {
    width: 250px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* ラベル左／必須右 に配置 */
    gap: 8px;
    flex-shrink: 0;
    line-height: 1.6;
}

.entry-label span {
    line-height: 1.6;
}

.entry-fields {
    flex: 1;
}

/* エントリー（CF7）：<p> だけの行も entry-row と同じ「ラベル左／入力右」（タブレット以上のみ） */
@media screen and (min-width: 769px) {
    .entry-form-wrapper .wpcf7 form > p {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 30px;
        box-sizing: border-box;
    }

    .entry-form-wrapper .wpcf7 form > p > label {
        width: 250px;
        flex-shrink: 0;
        margin-bottom: 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        font-weight: 700;
        color: #333;
        line-height: 1.6;
        box-sizing: border-box;
    }

    .entry-form-wrapper .wpcf7 form > p > .wpcf7-form-control-wrap {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* <p> で div.form-group だけを包んでいる場合（CF7の自動整形） */
    .entry-form-wrapper .wpcf7 form > p > .form-group {
        flex: 1;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .entry-form-wrapper .wpcf7 form > p input[type="text"],
    .entry-form-wrapper .wpcf7 form > p input[type="email"],
    .entry-form-wrapper .wpcf7 form > p input[type="tel"],
    .entry-form-wrapper .wpcf7 form > p input[type="url"],
    .entry-form-wrapper .wpcf7 form > p select,
    .entry-form-wrapper .wpcf7 form > p textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 送信・同意・注意文などは全幅（横並びにしない） */
    .entry-form-wrapper .wpcf7 form > p.form-submit,
    .entry-form-wrapper .wpcf7 form > p:has(.form-submit),
    .entry-form-wrapper .wpcf7 form > p:has(.form-checkbox-group),
    .entry-form-wrapper .wpcf7 form > p:has(.form-privacy-notice),
    .entry-form-wrapper .wpcf7 form > p:has(.email-disclaimer),
    .entry-form-wrapper .wpcf7 form > p:only-child:empty {
        display: block;
        flex-direction: unset;
        gap: 0;
    }

    .entry-form-wrapper .wpcf7 form > p.form-submit > *,
    .entry-form-wrapper .wpcf7 form > p:has(.form-checkbox-group) > * {
        width: 100%;
    }
}

/* エントリー：住所ブロック内のサブ行を右カラム内で揃える */
.entry-form-wrapper .entry-fields .address-block {
    width: 100%;
    max-width: 100%;
}

.entry-form-wrapper .entry-fields .address-line {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
}

.entry-form-wrapper .entry-fields .address-inputs {
    min-width: 0;
}

.entry-form-wrapper .entry-fields .address-inputs input,
.entry-form-wrapper .entry-fields .address-inputs select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.email-disclaimer {
    color: #ff0000;
    font-size: 0.9rem;
    margin-top: 10px;
    line-height: 1.6;
    text-align: center;
    display: block;
    width: 100%;
}

/* Responsive for Page Styles */
@media screen and (max-width: 768px) {
    .page-title-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .page-title-block .page-title-separator {
        display: none;
    }

    .page-title {
        font-size: 1.8rem;
    }
    
    .page-title-about {
        font-size: 2rem;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .page-title-en {
        font-size: 2rem;
    }
    
    .title-separator-vertical {
        font-size: 2rem;
    }
    
    .page-title-ja {
        font-size: 1rem;
    }
    
    .about-bg-image-full {
        height: 300px;
        width: 100%;
        margin-left: 0;
    }

    .page-hero-image-wrap {
        width: calc(100% - 60px);
        height: 300px;
        margin: 0 0 40px 60px;
        overflow: hidden;
    }

    .business-hero-image {
        height: 300px;
        width: 100%;
        margin: 0 0 40px 0;
    }
    
    .about-text-box-full {
        padding: 0;
    }
    
    .philosophy-list {
        padding: 10px;
    }
    
    .map-container {
        margin-top: 20px;
    }
    
    .map-placeholder {
        height: 280px;
    }
    
    .section-title-large {
        font-size: 1.8rem;
    }
    
    .business-intro-box {
        padding: 40px 0;
    }
    
    .business-intro-title {
        font-size: 1.3rem;
    }
    
    .business-intro-text,
    .business-intro-text-2 {
        font-size: 0.9rem;
    }
    
    .interior-logo-title {
        font-size: 2.5rem;
    }
    
    .interior-logo-subtitle {
        font-size: 1rem;
    }
    
    .business-service-list li {
        font-size: 0.9rem;
    }
    
    .overview-title {
        font-size: 2rem;
    }
    
    .overview-subtitle {
        font-size: 1rem;
    }
    
    .overview-table {
        font-size: 0.9rem;
        border-collapse: separate;
        border-spacing: 0;
    }
    
    .overview-table tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid #ddd;
    }
    
    .overview-table th,
    .overview-table td {
        display: block;
        width: 100%;
        padding: 4px 0;
        border: none;
    }
    
    .overview-table th {
        font-weight: 700;
        color: #555;
    }
    
    .overview-table td {
        padding-top: 4px;
    }

    .history-item {
        flex-direction: column;
        gap: 6px;
    }

    .history-year {
        width: auto;
    }

    .construction-info-table {
        border-spacing: 0;
    }

    .construction-info-table tr {
        display: block;
        margin-bottom: 10px;
    }

    .construction-info-table th,
    .construction-info-table td {
        display: block;
        width: 100%;
        padding: 12px 12px;
        border: none;
    }

    .construction-info-table th {
        font-weight: 700;
        margin-bottom: 0;
    }

    .gallery-main-image {
        height: 260px;
    }
    
    .overview-section-title {
        font-size: 1.1rem;
        margin-top: 40px;
    }
    
    .overview-info-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .overview-info-label {
        width: 100%;
        padding-top: 0;
    }
    
    .overview-info-content {
        width: 100%;
    }
    
    .construction-main-image {
        height: 250px;
        width: 100%;
        margin-left: 0;
    }

    .construction-grid {
        grid-template-columns: 1fr;
    }
    
    .interior-section-title {
        font-size: 2.5rem;
    }
    
    .structural-section-title {
        font-size: 2.5rem;
    }
    
    .structural-section-subtitle {
        font-size: 1rem;
    }
    
    .interior-content-wrapper {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
    }
    
    .service-note {
        margin-top: 20px;
        margin-left: 0;
        width: 100%;
    }
    
    .service-images {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        max-width: none;
        column-gap: 10px;
        row-gap: 10px;
    }
    
    .business-service-list {
        width: calc(100% + 40px);
        max-width: none;
    }
    
    .gallery-thumbnails-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .gallery-thumbnails {
        flex-wrap: wrap;
        max-height: 220px;
        overflow-y: auto;
    }
    
    .gallery-note {
        margin-top: 10px;
    }
    
    .gallery-prev,
    .gallery-next {
        width: 40px;
        font-size: 1.5rem;
    }
    
    .construction-navigation,
    .news-navigation {
        flex-direction: row;
        gap: 16px;
        justify-content: center;
        align-items: center;
    }

    .construction-nav-link,
    .news-nav-link {
        width: auto;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }

    .news-nav-slot {
        flex: none;
        width: auto;
        justify-content: center;
    }

    .construction-nav-text,
    .news-nav-text {
        display: none;
    }

    .construction-nav-icon,
    .news-nav-icon {
        margin: 0 auto;
    }
    
    .name-row {
        flex-direction: column;
    }
    
    /* 郵便番号行の横並びは上記（max-width:768px 先頭ブロック）の .address-block 用ルールに任せる */
    .address-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    /* Recruit Page Responsive */
    .recruit-main-image {
        height: 250px;
        width: 100%;
        margin-left: 0;
    }
    
    .recruit-intro-title {
        font-size: 1.5rem;
    }
    
    .recruit-intro-text {
        font-size: 0.9rem;
    }
    
    .interview-cards {
        grid-template-columns: 1fr;
    }
    
    .interview-qa-grid {
        grid-template-columns: 1fr;
    }
    
    .recruit-requirements-wrapper {
        flex-direction: column;
    }
    
    .recruit-contact-wrapper {
        flex-direction: column;
    }
    
    .recruit-contact-box {
        width: 100%;
    }
    
    .btn-recruit-entry {
        width: 100%;
    }
}

/* Recruit Page */
/* Recruit Page - Hero Section */
.recruit-hero {
    padding: 40px 0 20px;
    background-color: #fff;
    border-bottom: none;
}

.recruit-main-image {
    width: calc(100% - 120px);
    height: 400px;
    margin: 0 0 40px 120px;
    overflow: hidden;
}

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

.recruit-hero-section {
    padding: 40px 0 60px;
}

.recruit-intro-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.recruit-intro-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.6;
}

.recruit-intro-text {
    line-height: 2;
    color: #333;
    font-size: 1rem;
}

/* Recruit Page - Video Section */
.recruit-video-section {
    margin: 60px 0;
    text-align: center;
}

.video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.video-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Recruit Page - Interview Section */
.recruit-interview-section {
    padding: 60px 0;
}

.interview-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.interview-card {
    background-color: #F2F5F8;
    border: 1px solid #e8e8e8;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.interview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.interview-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: transparent;
    background-image: url('assets/img/icon_user.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    position: relative;
}

.interview-avatar::after {
    content: none;
}

.interview-avatar::before {
    content: none;
}

.interview-initials {
    font-weight: 700;
    font-size: 1.15rem;
    color: #333;
    letter-spacing: 0.02em;
}

.interview-job-tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--primary-blue);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    margin-left: auto;
}

.interview-qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.interview-qa {
    padding: 16px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
}


.interview-q {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.6;
}

.interview-q .qa-label {
    font-weight: 700;
    color: var(--primary-blue);
    margin-right: 4px;
}

.interview-a {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.8;
}

.interview-a .qa-label-a {
    font-weight: 700;
    color: var(--accent-yellow);
    margin-right: 4px;
}

/* Recruit Page - Requirements Section */
.recruit-requirements-section {
    padding: 60px 0;
}

.recruit-requirements-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.recruit-table {
    flex: 1;
}

.recruit-requirements-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    background-color: transparent;
}

.recruit-requirements-table th,
.recruit-requirements-table td {
    padding: 15px;
    border: none;
    text-align: left;
    background-color: #f5f5f5;
}

.recruit-requirements-table th {
    font-weight: 700;
    width: 200px;
    color: #333;
}

.recruit-requirements-table td {
    color: #333;
}

.recruit-entry-btn-wrap {
    text-align: center;
    margin-top: 40px;
}

.recruit-entry-btn-wrap .btn-entry-arrow {
    margin-left: 4px;
    font-size: 1.1em;
}

/* Recruit Page - Contact Section */
.recruit-contact-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.recruit-contact-lead {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.recruit-contact-wrapper {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.recruit-contact-box {
    background-color: #fff;
    border: 2px solid var(--primary-blue);
    padding: 40px;
    text-align: center;
    flex: 1;
}

.recruit-tel-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: 10px;
    text-decoration: none;
}

.recruit-tel-number::before {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%231e3a8a%22%3E%3Cpath%20d%3D%22M6.62%2010.79c1.44%202.83%203.76%205.14%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201-9.39%200-17-7.61-17-17%200-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.recruit-contact-hours {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

.btn-recruit-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--primary-blue);
    color: #fff;
    padding: 20px 40px;
    font-weight: 700;
    text-decoration: none;
    border-left: 3px solid var(--accent-yellow);
    transition: opacity 0.3s;
}

.btn-recruit-entry:hover {
    opacity: 0.8;
}

.btn-recruit-entry::before {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M20%204H4c-1.1%200-1.99.9-1.99%202L2%2018c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#entry .page-hero-image-section .page-hero-image-wrap , 
#contact .page-hero-image-section .page-hero-image-wrap ,
#privacy .page-hero-image-section .page-hero-image-wrap ,
#sitepolicy .page-hero-image-section .page-hero-image-wrap{
	display:none;
}

@media screen and (max-width: 768px) {
	.interview-qa-grid {
		grid-template-columns: 1fr;
	}

    .recruit-requirements-table {
        border-spacing: 0;
    }

    .recruit-requirements-table tr {
        display: block;
        margin-bottom: 10px;
    }

    .recruit-requirements-table th,
    .recruit-requirements-table td {
        display: block;
        width: 100%;
        padding: 12px 12px;
    }
}