/* Reset and Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

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

a img {
    transition: 0.3s;
}

a img:hover {
    opacity: 0.7;
}

ul,
ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

body {
    font-family: "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* フッター位置を保ったままメインコンテンツ領域を伸ばすためのレイアウト */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(129deg, #E6F7FD 0%, #EDFFF5 36.06%, #FFFEF6 72.6%, #FEF4E9 100%);
    word-break: break-word;
}

body.general {
    background: #ffffff;
}

/*----------------------------------------------------------
	Base
--------------------------------------------------------- */
:root {
    --main-blue: #01B2EC;
    --main-orange: #E9890E;
    --bg-color: #F3F3F3;
    --bg-color-blue: #DBF0F2;
    --text-color: #333333;
    --main-width: 1240px;
    --sub-width: 1140px;
}

/* -------------------- margin -------------------- */
.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-35 {
    margin-top: 35px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mt-70 {
    margin-top: 70px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mb-00 {
    margin-bottom: 0 !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mv-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.mv-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

.mb-n10 {
    margin-bottom: -10px !important;
}

.nmt-20 {
    margin-top: -20px !important;
}

/* -------------------- padding -------------------- */
.p-0 {
    padding: 0 !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.px-30 {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.py-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pb-00 {
    padding-bottom: 0 !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pb-80 {
    padding-bottom: 80px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-40 {
    padding-left: 40px !important;
}

@media only screen and (max-width: 768px) {
    .mt-0sp {
        margin-top: 0px !important;
    }

    .mt-10sp {
        margin-top: 10px !important;
    }

    .mb-n10sp {
        margin-bottom: -10px !important;
    }
}

/* -------------------- adjust -------------------- */
.align-c {
    text-align: center !important;
}

.align-l {
    text-align: left !important;
}

.align-r {
    text-align: right !important;
}

.fw-b {
    font-weight: bold;
}

.f-sizeS {
    font-size: 14px;
}

.f-sizeL {
    font-size: 24px;
}


/* Header */
.header {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #E5E5E5;
    position: relative;
    z-index: 10;
}

.header-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    height: 100%;
}

.header-container.before-login {
    justify-content: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-image {
    width: auto;
    max-width: 300px;
    height: auto;
}

/* Header Navigation */
.header-nav {
    display: flex;
    justify-content: center;
}

.header-nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.header-nav-list li a {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s;
    position: relative;
}

.header-nav-list li a::before {
    background-color: var(--main-blue);
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 3px;
    content: '';
    display: block;
    transform: scale(0, 1);
    transition: .3s;
}

.header-nav-list li a:hover::before {
    transform: scale(1, 1);
}

/* グロナビ現在地（PC・SP共通） */
.header-nav-list li a.is-current,
.header-nav-list li a.is-current-section {
    color: #01B2EC;
    position: relative;
}

.header-nav-list li a.is-current::before,
.header-nav-list li a.is-current-section::before {
    transform: scale(1, 1);
}


/* グロナビ内の丸矢印アイコン（PCでは非表示） */
.header-nav-list li a .icon-circle-arrow {
    display: none;
}

.header-nav-list li a:hover {
    color: var(--main-blue);
}

.has-dropdown {
    position: relative;
    padding-right: 10px;
}

.has-dropdown .dropdown-trigger {
    position: relative;
}

.has-dropdown .dropdown-trigger::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: -10px;
    top: 9px;
    width: 16px;
    height: 16px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg);
}

.has-dropdown .dropdown-trigger .icon-circle-arrow::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--main-blue);
}

.has-dropdown .dropdown-trigger .icon-circle-arrow::before {
    transform: rotate(45deg);
}

.has-dropdown .dropdown-trigger .icon-circle-arrow::after {
    transform: rotate(-45deg);
}

/* ドロップダウンメニュー */
.dropdown-menu {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100vw;
    background: linear-gradient(129deg, #E6F7FD 0%, #EDFFF5 36.06%, #FFFEF6 72.6%, #FEF4E9 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    display: block;
    padding: 40px 0 60px;
    z-index: 999;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.header-nav-list li a.more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s;
    position: relative;
    margin-bottom: 20px;
}

.header-nav-list li a.more-link:hover {
    color: var(--main-blue);
}

.header-nav-list li a.more-link:hover::before {
    transform: scale(0, 1);
}

.header-nav-list li a.more-link .icon-circle-arrow {
    display: block;
}

.has-dropdown.is-open .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-menu-container {
    max-width: var(--main-width);
    margin: 0 auto;
    padding: 0 40px;
}

.dropdown-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    transform-style: preserve-3d;
}

.header-nav-list li a.dropdown-menu-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px 20px;
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header-nav-list li a.dropdown-menu-card::before {
    display: none;
}

.header-nav-list li a.dropdown-menu-card:hover {
    box-shadow: inset 0 0 0 3px var(--main-blue);
}

.dropdown-menu-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dropdown-menu-text {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 20px;
}

.dropdown-menu-text::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 組織運営カード・サービスカード等で使う共通コンテンツカード */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.content-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px 20px;
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 3px var(--main-blue);
}

.content-card-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-card-text {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: relative;
    padding-left: 20px;
}

.content-card-text::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.feature-grid-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.feature-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px;
}

.feature-card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
}

.feature-card-title span {
    color: var(--main-blue);
}

.feature-card-text {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

@media (max-width: 768px) {
    .feature-grid-two {
        grid-template-columns: 1fr;
    }
}

/* ヘッダーログインエリア */
.header-login {
    display: flex;
    align-items: center;
}

/* モバイルヘッダー（ハンバーガー） */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #E5E5E5;
    background-color: #ffffff;
    cursor: pointer;
    text-align: center;
    padding: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.mobile-menu-icon {
    width: 22px;
    height: 12px;
    position: relative;
}

.mobile-menu-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #00a9e8;
    border-radius: 999px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.mobile-menu-line-top {
    top: 6px;
}

.mobile-menu-line-bottom {
    bottom: -4px;
}

.mobile-menu-label {
    margin-top: 6px;
    font-size: 10px;
    font-weight: bold;
    color: #666;
}

.mobile-menu-toggle.is-open {
    background-color: #ffffff;
    transform: scale(0.96);
}

.mobile-menu-toggle.is-open .mobile-menu-line-top {
    top: 80%;
    transform: translateY(-80%) rotate(45deg);
}

.mobile-menu-toggle.is-open .mobile-menu-line-bottom {
    bottom: auto;
    top: 80%;
    transform: translateY(-80%) rotate(-45deg);
}

.logout-button {
    border: 2px solid var(--main-orange);
    background-color: var(--main-orange);
    color: #ffffff;
    padding: 10px 30px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 0 6px 2px rgba(233, 137, 14, 0.7);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
    white-space: nowrap;
}

.logout-button:hover {
    background-color: #ffffff;
    color: var(--main-orange);
    box-shadow: none;
}

.login-status {
    font-size: 12px;
    white-space: nowrap;
}


/* Hero Section */
.hero {
    position: relative;
    min-height: 500px;
    padding: 40px;
    overflow: visible;
}

.hero-bg-blue {
    position: absolute;
    top: -360px;
    right: -100px;
    width: 860px;
    height: 600px;
    background-image: url('../img/bg01.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(15deg);
    opacity: 0.7;
    z-index: 1;
}

.hero-container {
    max-width: var(--main-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 50px;
}

.hero-content {
    flex: 1 1 auto;
    z-index: 3;
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #333;
    letter-spacing: 12px;
}

.highlight-orange {
    background-color: var(--main-orange);
    color: #ffffff;
    line-height: 1.2;
    padding: 3px 4px 3px 18px;
    border-radius: 20px;
    display: inline-block;
}

.highlight-blue {
    background-color: var(--main-blue);
    color: #ffffff;
    line-height: 1.2;
    padding: 3px 4px 3px 18px;
    border-radius: 20px;
    display: inline-block;
}

.hero-description {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    color: #333;
    letter-spacing: 2.24px;
}

.text-orange {
    color: var(--main-orange);
}

.text-blue {
    color: var(--main-blue);
}

.hero-image {
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
}

.trucks-image {
    width: 100%;
    max-width: 730px;
    height: auto;
}

.kv-image {
    width: 100%;
    height: 600px;
    background-image: url('../img/member/kv_member01.jpg');
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
    margin-bottom: 60px;
}

.hero-content.member {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.hero-content.member .hero-description {
    text-align: center;
}



/* Login Section */
.login-section {
    position: relative;
    min-height: 300px;
    padding: 60px 40px;
    overflow: visible;
}

.login-bg-orange {
    position: absolute;
    bottom: -100px;
    left: -50px;
    width: 500px;
    height: 400px;
    background-image: url('../img/bg02.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(167deg);
    z-index: 1;
    opacity: 0.7;
}

.login-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    background-color: #ffffff;
    border: 3px solid var(--main-orange);
    border-radius: 15px;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.login-message {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.login-button,
.login-submit-button {
    background-color: var(--main-orange);
    box-shadow: 0 0 6px 2px rgba(233, 137, 14, 0.70);
    color: #ffffff;
    border: 2px solid var(--main-orange);
    border-radius: 100px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.login-button {
    padding: 15px 40px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    min-width: 250px;
    text-align: center;
}

.login-button:hover,
.login-submit-button:hover {
    background-color: #FFF;
    box-shadow: none;
    color: var(--main-orange);
}

/* Common Section */
.common-section {
    margin-bottom: 60px;
}

/* News Section */
.news-section {
    position: relative;
    padding: 60px 40px;
    margin-bottom: 80px;
    overflow: visible;
}

.news-bg-blue {
    position: absolute;
    top: 80px;
    right: -120px;
    width: 630px;
    height: 420px;
    background-size: contain;
    background-image: url('../img/bg01.png');
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-170deg);
    z-index: 1;
    opacity: 0.7;
}

.news-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.news-header {
    text-align: center;
    margin-bottom: 50px;
}

.heading-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.heading-title-en {
    font-size: 48px;
    font-weight: bold;
    color: var(--main-blue);
}

.heading-title-en-letter {
    font-size: 48px;
    font-weight: bold;
    color: var(--main-orange);
}

.heading-title-ja {
    font-size: 20px;
    color: #333;
}

.heading-intro {
    font-size: 16px;
    font-weight: bold;
}

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

.news-grid-empty {
    text-align: center;
    margin-top: 40px;
}

.news-grid-empty-text {
    font-weight: bold;
}

/* News Pagination */
.pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}

.pagination-item {
    display: inline-flex;
}

.pagination-link {
    min-width: 36px;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background-color: transparent;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap;
}

.pagination-link.is-current {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--main-blue);
    background-color: var(--main-blue);
    color: #ffffff;
    font-weight: bold;
}

.pagination-link:not(.is-current):hover {
    color: #FFF;
    background-color: var(--main-blue);
}

/* 前後の小さい丸ボタン：.icon-circle-arrow と同系統デザイン */
.pagination-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--main-blue);
    background-color: #ffffff;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
}

.pagination-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 48%;
    width: 10px;
    height: 10px;
    border-right: 3px solid var(--main-blue);
    border-bottom: 3px solid var(--main-blue);
    transform: translate(-50%, -50%) rotate(-45deg);
    box-sizing: border-box;
}

.pagination-arrow.is-disabled,
.pagination-large-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination-arrow:hover,
.pagination-large-btn:hover {
    background-color: var(--main-blue);
    border-color: var(--main-blue);
}

.pagination-arrow:hover::before,
.pagination-large-btn:hover::before,
.pagination-large-btn:hover::after {
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

/* 左向き矢印のhover時：白い矢印にする */
.pagination-large-prev:hover::before,
.pagination-large-prev:hover::after {
    border-left-color: #ffffff;
    border-top-color: #ffffff;
}

/* 左向き矢印（前ページ用） */
.pagination-arrow.pagination-prev {
    transform: scaleX(-1);
}

.pagination-large-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid var(--main-blue);
    background-color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
}

.pagination-large-btn::before,
.pagination-large-btn::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-right: 3px solid var(--main-blue);
    border-bottom: 3px solid var(--main-blue);
    box-sizing: border-box;
}

/* 次ページ（右向きダブルくの字） */
.pagination-large-next::before {
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pagination-large-next::after {
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 前ページ（左向きダブルくの字） */
.pagination-large-prev::before,
.pagination-large-prev::after {
    border-right: none;
    border-bottom: none;
    border-left: 3px solid var(--main-blue);
    border-top: 3px solid var(--main-blue);
}

.pagination-large-prev::before {
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pagination-large-prev::after {
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(-45deg);
}


.news-card {
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 30px;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.news-card:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: inset 0 0 0 3px var(--main-blue);
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    min-height: 220px;
}

.service-card .news-content {
    width: 100%;
}

.service-card .news-card-title {
    padding-left: 0;
    display: inline-block;
}

.service-card .news-card-title::before {
    left: -24px;
    top: 2px;
}

.service-card-icon img {
    width: 110px;
    height: auto;
    display: block;
}

.news-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 20px;
}

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

/* ニュース詳細ページの画像ギャラリー（最大3×3） */
.news-image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.news-image-item {
    width: 100%;
    height: 220px;
    /* 高さを統一 */
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
}

.news-image-item img {
    width: auto;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 20px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.news-image-item img:hover {
    opacity: 0.8;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.lightbox-overlay.is-open {
    display: flex;
    opacity: 1;
}

.lightbox-image-wrapper {
    position: relative;
    max-width: min(90vw, 1200px);
    max-height: 90vh;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.lightbox-overlay.is-open .lightbox-image-wrapper {
    transform: scale(1);
    opacity: 1;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 36px;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    z-index: 10000;
}

.lightbox-close:hover {
    background-color: #ffffff;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.3s;
    z-index: 10000;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev .icon-circle-arrow-left,
.lightbox-next .icon-circle-arrow {
    width: 40px;
    height: 40px;
    border: 3px solid #01b2ec;
    background-color: #ffffff;
}

.lightbox-prev:hover .icon-circle-arrow-left,
.lightbox-next:hover .icon-circle-arrow {
    background-color: #01b2ec;
    border-color: #01b2ec;
}

.lightbox-prev:hover .icon-circle-arrow-left::before,
.lightbox-next:hover .icon-circle-arrow::before {
    border-left-color: #ffffff;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

.news-content {
    padding: 20px 0 10px;
}

.news-header-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.news-date {
    font-size: 16px;
    font-weight: bold;
    color: #6D6D6D;
}

.news-card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
    word-break: break-word;
}

.news-card-title::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.category-tag {
    /* カテゴリーラベル 　初期値は東京ロジスティクスエリア支部*/
    display: inline-block;
    background-color: #1063C2;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
}

.category-tag.area1 {
    background-color: #1063C2;
}

.category-tag.area2 {
    background-color: #EE2D80;
}

.category-tag.area3 {
    background-color: #21B54B;
}

.category-tag.area4 {
    background-color: #BB5F19;
}

.category-tag.area5 {
    background-color: #4984d3;
}

.category-tag.area6 {
    background-color: #d33933;
}

.category-tag.area7 {
    background-color: #382b83;
}

.news-article {
    margin-bottom: 40px;
}

.bg-white {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 20px;
}

.more-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s;
    position: relative;
}

.more-link:hover {
    color: var(--main-blue);
}

.icon-circle-arrow {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 3px solid #01b2ec;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transition: 0.3s;
}

/* 右向きのくの字矢印 */
.icon-circle-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 48%;
    width: 10px;
    height: 10px;
    border-right: 3px solid #01b2ec;
    border-bottom: 3px solid #01b2ec;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-sizing: border-box;
}

/* hover時：背景を青、矢印だけ白 */
.more-link:hover .icon-circle-arrow {
    background-color: #01b2ec;
    border-color: #01b2ec;
}

.more-link:hover .icon-circle-arrow::before {
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

/* 左向きの円形矢印アイコン */
.icon-circle-arrow-left {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 3px solid #01b2ec;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transition: 0.3s;
}

/* 左向きのくの字矢印 */
.icon-circle-arrow-left::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    width: 10px;
    height: 10px;
    border-left: 3px solid #01b2ec;
    border-top: 3px solid #01b2ec;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-sizing: border-box;
}

/* hover時：背景を青、矢印だけ白 */
.more-link:hover .icon-circle-arrow-left {
    background-color: #01b2ec;
    border-color: #01b2ec;
}

.more-link:hover .icon-circle-arrow-left::before {
    border-left-color: #ffffff;
    border-top-color: #ffffff;
}

/* Organization Section */
.organization-section {
    padding: 60px 40px;
    background-color: #ffffff;
}

.organization-container {
    max-width: 1200px;
    margin: 0 auto;
}

.organization-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.organization-card {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.organization-card:hover {
    border-color: var(--main-blue);
    box-shadow: 0 5px 20px rgba(1, 178, 236, 0.2);
    transform: translateY(-5px);
}

.organization-card-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.organization-card-text {
    font-size: 16px;
    font-weight: bold;
}

/* Group Photo Section */
.group-photo-section {
    padding: 0 40px 80px;
    background-color: #ffffff;
}

.group-photo-container {
    max-width: 1200px;
    margin: 0 auto;
}

.group-photo {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Local News Section */
.local-news-section {
    padding: 60px 40px;
    margin-bottom: 100px;
    background-color: #ffffff;
}

.local-news-container {
    max-width: 1200px;
    margin: 0 auto;
}

.local-news-header {
    text-align: center;
    margin-bottom: 50px;
}

.heading-title-en-blue {
    color: var(--main-blue);
}

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

.local-news-link {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px 26px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.local-news-link:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 3px var(--main-blue);
}

.local-news-link:hover .icon-circle-arrow {
    background-color: var(--main-blue);
    border-color: var(--main-blue);
}

.local-news-link:hover .icon-circle-arrow::before {
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

.local-news-more-link {
    text-align: center;
}

/* Footer */
.footer {
    position: relative;
    padding: 60px 40px 0;
    background-color: var(--bg-color);
    overflow: visible;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

.footer-bg-orange {
    position: absolute;
    top: -100px;
    left: -50px;
    width: 480px;
    height: 320px;
    background-image: url('../img/bg02.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-160deg);
    z-index: -1;
    opacity: 0.7;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.footer-container.footer-center {
    text-align: center;
}

.footer-container.footer-center .footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.footer-container.footer-center .footer-union-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.footer-container.footer-center .footer-address {
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-container.footer-center .footer-contact {
    font-size: 14px;
    margin-bottom: 30px;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.footer-left {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.footer-logo-icon {
    width: 50px;
    height: 50px;
}

.footer-logo-text {
    color: var(--main-blue);
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
}

.footer-union-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.footer-address {
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-contact {
    font-size: 14px;
    margin-bottom: 0;
}

.footer-center {
    display: flex;
    flex-direction: column;
}

.footer-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav-list li a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    display: inline;
    transition: 0.3s;
    line-height: 1.6;
}

/* フッター内のdocument-linkとexternal-linkを調整 */
.footer-nav-list li a.document-link,
.footer-nav-list li a.external-link {
    display: inline;
}

.footer-arrow-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    margin-right: 4px;
    flex-shrink: 0;
}

.footer-nav-list li a:hover {
    color: var(--main-blue);
}

.pdf-icon {
    background-color: #FF0000;
    color: #ffffff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    margin-left: 4px;
}

.footer-related-logos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-logo {
    height: auto;
    width: 100%;
    max-width: 200px;
}

.footer-copyright {
    font-size: 12px;
    color: #ffffff;
    background-color: var(--text-color);
    padding: 20px;
    margin: 30px 0 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    text-align: center;
}

/* Login Page (login.html) */
.login-main {
    position: relative;
    padding: 40px 40px 80px;
    min-height: 600px;
}

.login-page-section {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.login-page-frame {
    border: 4px solid var(--main-orange);
    border-radius: 20px;
    background-color: #ffffff;
    padding: 40px 60px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.login-page-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.login-title {
    color: var(--main-blue);
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.login-intro {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    margin-bottom: 30px;
}

.login-intro-emphasis {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.login-intro-emphasis-orange {
    color: var(--main-orange);
}

.login-intro-emphasis-blue {
    color: var(--main-blue);
}

.login-card {
    background-color: #f8f8f8;
    border-radius: 20px;
    padding: 40px 60px 50px;
}

.login-form {
    max-width: 540px;
    margin: 0 auto;
}

.login-form-row {
    margin-bottom: 25px;
}

.login-form-row-inline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-row-center {
    text-align: center;
    margin-top: 10px;
}

.login-error-message {
    color: #FF0000;
    margin-bottom: 20px;
}

.login-label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 6px;
    border: 2px solid #d5d5d5;
    background-color: #ffffff;
    font-size: 16px;
}

.login-input:focus {
    outline: none;
    border: 2px solid #01B2EC;
    background-color: #EFFBFF;
}

.login-checkbox-label {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
}

.login-checkbox-input {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border: 2px solid #d5d5d5;
    background-color: #FFFFFF;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
}

.login-checkbox-input:checked {
    border: 2px solid #01B2EC;
    background-color: #EFFBFF;
}

.login-checkbox-input:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #01B2EC;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.login-submit-button {
    display: inline-block;
    min-width: 260px;
    padding: 16px 40px;
    border-radius: 999px;
    border: 2px solid var(--main-orange);
    background-color: var(--main-orange);
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 0 6px 2px rgba(233, 137, 14, 0.7);
    cursor: pointer;
    transition: 0.3s;
}

.login-submit-button:hover {
    background-color: #ffffff;
    color: var(--main-orange);
    box-shadow: none;
}

.login-footer {
    margin-top: 40px;
}

/* Page Top Button */
.page-top-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--main-orange);
    color: #ffffff;
    border: 3px solid var(--main-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 28px;
    font-weight: bold;
    box-shadow: 0 0 6px 2px rgba(233, 137, 14, 0.7);
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.page-top-button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    border: 3px solid currentColor;
    border-right: none;
    border-bottom: none;
    transform: translate(-50%, -50%) rotate(45deg);
    margin-top: 4px;
}

.page-top-button.show {
    opacity: 1;
    visibility: visible;
}

/* PCなどポインタデバイスがある環境のみ hover を有効化 */
@media (hover: hover) and (pointer: fine) {
    .page-top-button:hover {
        border: 3px solid var(--main-orange);
        background-color: #FFFFFF;
        box-shadow: none;
    }

    .page-top-button:hover::before {
        color: var(--main-orange);
    }
}

/* Breadcrumbs */
.breadcrumbs {
    background-color: #fff;
    padding: 15px 0;
}

.breadcrumbs-container {
    max-width: var(--main-width);
    margin: 0 auto;
    padding: 0 40px;
    font-size: 14px;
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.breadcrumbs-list li {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
}

.breadcrumbs-list li:not(:last-child)::after {
    content: "";
    width: 12px;
    height: 12px;
    display: inline-block;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 8px;
}

.breadcrumbs-list a {
    color: #898989;
    text-decoration: underline;
    transition: 0.3s;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.breadcrumbs-list a:hover {
    text-decoration: none;
    opacity: .8;
}

.breadcrumbs-current {
    color: #333;
    font-weight: bold;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Main Content */
.main-content {
    padding: 60px 40px;
}

.content-container {
    max-width: var(--sub-width);
    margin: 0 auto;
}

/* 見出し関連 */
.page-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
    padding-bottom: 10px;
    position: relative;
}

.page-title::before {
    content: "";
    position: absolute;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,
            var(--main-orange) 0, var(--main-orange) 20px,
            var(--main-blue) 21px, var(--main-blue) 60px,
            #E5E5E5 61px, #E5E5E5 100%);
}

.page-title-sub {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
    padding-bottom: 10px;
    position: relative;
}

.heading-style {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 40px 0 20px;
    padding: 10px 16px;
    background-color: #DBF0F2;
    border-radius: 10px;
    position: relative;
}

.heading-style::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 30px;
    background-color: var(--main-blue);
}

.heading-style-404 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px;
    padding: 10px 16px;
    text-align: center;
}

.heading-style-blue {
    color: var(--main-blue);
    font-weight: bold;
}

/* Document List (各種申請書類) */
.document-item {
    padding: 10px 0;
}

.document-link,
.external-link {
    position: relative;
    display: inline-block;
    text-decoration: underline;
    padding-left: 18px;

    word-break: break-all;
}

.document-link::before,
.external-link::before {
    /* テキストリンクの先頭に表示する矢印 */
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
}

.document-link::after,
.external-link[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('../img/member/svg/svg_other.svg');
}

.external-link[target="_blank"]::after {
    background-image: url('../img/member/svg/svg_link.svg');
}

.document-link:hover,
.external-link:hover {
    text-decoration: none;
}

/* テキスト中の外部リンク用（「＞」なし） */
.external-link-inline {
    position: relative;
    display: inline;
    text-decoration: underline;
    padding-left: 0;
    word-break: break-word;
}

.external-link-inline::before {
    /* 「＞」を表示しない */
    display: none;
}

.external-link-inline[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('../img/member/svg/svg_link.svg');
}

.external-link-inline:hover {
    text-decoration: none;
}

.external-linkｰunderline {
    text-decoration: underline;
}

.external-linkｰunderline:hover {
    text-decoration: none;
}

/* 拡張子別アイコン */
.document-link[data-ext="pdf" i]::after {
    background-image: url('../img/member/svg/svg_pdf.svg');
}

.document-link[data-ext="doc" i]::after,
.document-link[data-ext="docx" i]::after {
    background-image: url('../img/member/svg/svg_word.svg');
}

.document-link[data-ext="xls" i]::after,
.document-link[data-ext="xlsx" i]::after {
    background-image: url('../img/member/svg/svg_xls.svg');
}

.document-link[data-ext="ppt" i]::after,
.document-link[data-ext="pptx" i]::after {
    background-image: url('../img/member/svg/svg_ppt.svg');
}

.page-title-sub::before {
    content: "";
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
            var(--main-orange) 0, var(--main-orange) 20px,
            var(--main-blue) 21px, var(--main-blue) 60px,
            #E5E5E5 61px, #E5E5E5 100%);
}

/* Officer Introduction Section */
.officer-intro-section {
    margin-bottom: 60px;
}

.greeting-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.greeting-section {
    margin-top: 40px;
}

.greeting-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.greeting-photo {
    flex-shrink: 0;
}

.greeting-photo img {
    border-radius: 20px;
}

.officer-photo {
    width: 250px;
    height: 250px;
    object-fit: cover;
}

.greeting-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}


/* Officer List Section */
.officer-list-section {
    margin-top: 60px;
}

/* 3カラムレイアウト */
.branch-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px;
    list-style: none;
}

.branch-list li {
    margin: 0;
    padding: 0;
}

.branch-link {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: normal;
    transition: 0.3s;
    padding-left: 26px;
    position: relative;
    text-decoration: underline;
}

.branch-link::before {
    position: absolute;
    left: 0;
    top: 50%;
    content: "";
    display: inline-block;
    color: var(--main-blue);
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right: none;
    border-bottom: none;
    transform: translateY(-50%) rotate(-135deg);
}

.branch-link:hover {
    color: var(--main-blue);
    text-decoration: none;
}

/* 4カラムレイアウト */
.branch-list.col4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 4カラム時は矢印の向きを逆向きにする */
.branch-list.col4 .branch-link::before {
    transform: translateY(-50%) rotate(135deg);
}

.branch-table-section {
    margin-top: 60px;
    margin-bottom: 60px;
    padding-top: 40px;
    scroll-margin-top: 20px;
}

.branch-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

/* 東京特定支部のみ1カラム表示 */
.branch-table-grid>.single-column-branch {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------
   Insurance (保険ページ用)
-------------------------------------------------------- */
.insurance-section {
    margin-bottom: 80px;
}

.insurance-lead {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.8;
}

.insurance-text {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* 団体生命共済内の小見出し「①基本加入」など */
.insurance-subheading {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    margin: 32px 0 12px;
    padding-left: 12px;
}

.insurance-subheading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 50%;
    background-color: var(--main-orange);
}

.insurance-subheading::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 50%;
    background-color: var(--main-blue);
}

/* コース見出し用：蛍光ペン風の下線 */
.insurance-course-heading {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    margin: 12px 0;
    padding: 0 6px;
    display: inline-block;
    background: linear-gradient(transparent 60%, rgba(233, 137, 14, 0.3) 60%);
}

.insurance-definition {
    display: grid;
    grid-template-columns: auto 2fr;
    gap: 10px 20px;
    margin-bottom: 24px;
}

.insurance-definition dt {
    font-weight: bold;
    margin-bottom: 0;
}

.insurance-definition dd {
    margin: 0;
}

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

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

.insurance-list li::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 8px;
    background-color: var(--main-orange);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.insurance-list li>ul {
    margin-top: 8px;
}

.insurance-list li>ul>li {
    margin-bottom: 10px;
    padding-left: 0;
}

.insurance-list li>ul>li::before {
    content: "※";
    position: static;
    display: inline;
    margin-right: 6px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
}

/* ※印のリスト */
.insurance-list-note li {
    padding-left: 20px;
    position: relative;
}

.insurance-list-note li::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    margin-right: 6px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--text-color);
    font-weight: bold;
}

/* 数字付きの場合：span.numberを※印の位置に配置 */
.insurance-list-note li:has(.number) {
    padding-left: 30px;
}

.insurance-list-note li:has(.number)::before {
    display: none;
}

.insurance-list-note li .number {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--text-color);
}

.insurance-list-note li .number::before {
    content: "※";
    margin-right: 0;
}

/* 数字付き※印のリスト */
.insurance-list-note.number li {
    counter-increment: note-counter;
}

.numbered-list {
    list-style: conic-gradient;
    text-align: left;
}

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

/* サイトマップ */
.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
}

.sitemap-list>li {
    margin-bottom: 20px;
    padding-left: 15px;
    font-size: 16px;
    position: relative;
    line-height: 1.8;
}

.sitemap-list>li::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 12px;
    height: 12px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-sizing: border-box;
}

.sitemap-list>li.sitemap-group {
    padding-left: 0;
}

.sitemap-list>li.sitemap-group::after {
    display: none;
}

.sitemap-list>li>a {
    color: var(--text-color);
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.2s ease;
}

.sitemap-list>li>a:hover {
    opacity: 0.7;
    text-decoration: none;
}

.sitemap-heading {
    color: #333;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

.sitemap-list>li>ul {
    margin-top: 8px;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.sitemap-list>li>ul>li {
    margin-bottom: 8px;
    padding-left: 15px;
    position: relative;
    font-size: 15px;
}

.sitemap-list>li>ul>li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 12px;
    height: 12px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-sizing: border-box;
}

.sitemap-list>li>ul>li>a {
    color: var(--text-color);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.sitemap-list>li>ul>li>a:hover {
    opacity: 0.7;
    text-decoration: none;
}

.sitemap-group {
    padding-left: 15px;
    position: relative;
    margin-bottom: 20px;
}

.sitemap-group-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-group-list>li {
    margin-bottom: 6px;
    padding-left: 15px;
    position: relative;
}

.sitemap-group-list>li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 12px;
    height: 12px;
    background-image: url('../img/member/svg/svg_arrow_right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-sizing: border-box;
}

.sitemap-group-list>li>a {
    color: var(--text-color);
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.2s ease;
}

.sitemap-group-list>li>a:hover {
    opacity: 0.7;
    text-decoration: none;
}


/* 汎用：横スクロールするテーブルラッパー */
.insurance-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 32px;
}

.insurance-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.insurance-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* 汎用：保険などで使う横長テーブル */
.insurance-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #ffffff;
    font-size: 13px;
    border-radius: 20px;
    overflow: hidden;
}

.insurance-table th,
.insurance-table td {
    border: 1px solid #e0e0e0;
    padding: 8px 6px;
    text-align: center;
    white-space: nowrap;
}

.insurance-table thead th {
    background-color: #DBF0F2;
    font-weight: bold;
}

.insurance-table tbody th {
    background-color: #F5F9FB;
    font-weight: bold;
}

/* 任意加入できる範囲など、縦積み対応テーブル */
.insurance-stack-wrapper {
    margin-bottom: 40px;
}

.insurance-stack-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

.insurance-stack-table th,
.insurance-stack-table td {
    border: 1px solid #e0e0e0;
    padding: 10px 8px;
    font-size: 14px;
    text-align: left;
}

.insurance-stack-table thead th {
    background-color: #F0F5FF;
    font-weight: bold;
}

/* 掛金表（officer-tableと同じスタイル） */
.insurance-premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 20px;
    /* 角丸はそのまま */
    overflow: hidden;
    border: 1px solid #6BB2B9;
    /* 外枠はテーブル本体が担当 */
}

.insurance-premium-table.info-table th {
    white-space: nowrap;
}

/* 任意加入セクションのテーブルのみ列幅を固定 */
.insurance-premium-table.optional-premium-table {
    table-layout: fixed;
    /* 列幅を固定して統一 */
}

.insurance-premium-table tbody tr:first-child th:first-child {
    border-top-left-radius: 20px;
}

.insurance-premium-table tbody tr:first-child th:last-child {
    border-top-right-radius: 20px;
}

.insurance-premium-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}

.insurance-premium-table tbody tr:first-child th:first-child[rowspan] {
    border-bottom-left-radius: 20px;
}

.insurance-premium-table tbody tr:first-child th:first-child[rowspan].no-bottom-left-radius {
    border-bottom-left-radius: 0;
}

/* 特定セルで左下の角丸をなくしたい場合 */
.insurance-premium-table td.no-bottom-left-radius {
    border-bottom-left-radius: 0 !important;
}

.insurance-premium-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
}

.insurance-premium-table tbody tr:last-child td.keep-right-border {
    border-bottom-right-radius: 0;
}

.insurance-premium-table th {
    background-color: #DBF0F2;
    padding: 16px;
    text-align: center;
    font-weight: bold;
    color: #333;
    border-right: 1px solid #6BB2B9;
    border-bottom: 1px solid #6BB2B9;
}

.insurance-premium-table td {
    text-align: center;
    border-right: 1px solid #6BB2B9;
    border-bottom: 1px solid #6BB2B9;
    /* 内側の罫線のみ */
}

/* 特定セルで下側の罫線を消して、外枠の1pxだけ見せたい場合（rowspanセルの最下部など） */
.insurance-premium-table th.no-bottom-border,
.insurance-premium-table td.no-bottom-border {
    border-bottom: none;
}

/* 特定セルで右側の罫線を強制的に表示したい場合（kyosai.html など） */
.insurance-premium-table td.keep-right-border {
    border-right: 1px solid #6BB2B9 !important;
}

/* 特定セルで左側の罫線を強制的に表示したい場合（insurance_kumiai.html など） */
.insurance-premium-table th.keep-left-border,
.insurance-premium-table td.keep-left-border {
    border-left: 1px solid #6BB2B9 !important;
}

/* 特定セルで右側の罫線を消して二重線を防ぎたい場合 */
.insurance-premium-table th.no-right-border,
.insurance-premium-table td.no-right-border {
    border-right: none !important;
}

/* rowspanがある行の2行目のtdにも右側の罫線を確実に表示 */
/* その行で唯一のtd要素で、実際には最後の列ではない場合 */
.insurance-premium-table tbody tr td:only-child {
    border-right: 1px solid #6BB2B9 !important;
}

/* 一番右端のセルは右側の線を消して、外枠の1pxだけ見せる */
/* ただし、その行で唯一のtd要素の場合は除外（上記のルールを優先） */
.insurance-premium-table th:last-child,
.insurance-premium-table td:last-child:not(:only-child) {
    border-right: none;
}

/* 一番下の行は下側の線を消して、外枠の1pxだけ見せる */
.insurance-premium-table tbody tr:last-child th,
.insurance-premium-table tbody tr:last-child td {
    border-bottom: none;
}

.pink {
    background-color: #F3EAEC !important;
}

.orange {
    background-color: #F4F3E7 !important;
}

/* 配偶者テーブルのth要素の背景色 */
.insurance-premium-table.spouse-table th {
    background-color: #F3EAEC !important;
}

/* 子どもテーブルのth要素の背景色 */
.insurance-premium-table.child-table th {
    background-color: #F4F3E7 !important;
}

/* プラン比較表（地方共済） */
.comparison-table th,
.comparison-table td {
    text-align: center;
    color: #333;
}

.comparison-table .row-course th {
    background-color: #DBF0F2;
    font-size: 14px;
    font-weight: 700;
    padding: 20px 12px;
}

.comparison-table .row-label {
    font-weight: 700;
}

.comparison-table .row-label.member {
    background-color: #d9eef1;
}

.comparison-table .row-label.spouse {
    background-color: #f3eaec;
}

.comparison-table .row-label.child {
    background-color: #f4f3e7;
}

/* 幅ユーティリティ（既存のwidth-xxを利用） */
.comparison-table .width-18 {
    width: 18%;
}

.comparison-table .width-16 {
    width: 16%;
}

.insurance-premium-table td {
    background-color: #FFFFFF;
    padding: 16px;
    color: #333;
}

/* insurance_tihou.htmlの11列テーブル（任意加入セクション）の列幅統一 */
.insurance-premium-table.optional-premium-table tbody tr th:nth-child(1),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(1),
.insurance-premium-table.optional-premium-table tr th:nth-child(1),
.insurance-premium-table.optional-premium-table tr td:nth-child(1) {
    width: 5%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(2),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(2),
.insurance-premium-table.optional-premium-table tr th:nth-child(2),
.insurance-premium-table.optional-premium-table tr td:nth-child(2) {
    width: 5%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(3),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(3),
.insurance-premium-table.optional-premium-table tr th:nth-child(3),
.insurance-premium-table.optional-premium-table tr td:nth-child(3) {
    width: 7%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(4),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(4),
.insurance-premium-table.optional-premium-table tr th:nth-child(4),
.insurance-premium-table.optional-premium-table tr td:nth-child(4) {
    width: 8%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(5),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(5),
.insurance-premium-table.optional-premium-table tr th:nth-child(5),
.insurance-premium-table.optional-premium-table tr td:nth-child(5) {
    width: 12%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(6),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(6),
.insurance-premium-table.optional-premium-table tr th:nth-child(6),
.insurance-premium-table.optional-premium-table tr td:nth-child(6) {
    width: 11%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(7),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(7),
.insurance-premium-table.optional-premium-table tr th:nth-child(7),
.insurance-premium-table.optional-premium-table tr td:nth-child(7) {
    width: 11%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(8),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(8),
.insurance-premium-table.optional-premium-table tr th:nth-child(8),
.insurance-premium-table.optional-premium-table tr td:nth-child(8) {
    width: 10%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(9),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(9),
.insurance-premium-table.optional-premium-table tr th:nth-child(9),
.insurance-premium-table.optional-premium-table tr td:nth-child(9) {
    width: 7%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(10),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(10),
.insurance-premium-table.optional-premium-table tr th:nth-child(10),
.insurance-premium-table.optional-premium-table tr td:nth-child(10) {
    width: 9%;
}

.insurance-premium-table.optional-premium-table tbody tr th:nth-child(11),
.insurance-premium-table.optional-premium-table tbody tr td:nth-child(11),
.insurance-premium-table.optional-premium-table tr th:nth-child(11),
.insurance-premium-table.optional-premium-table tr td:nth-child(11) {
    width: 7%;
}

/* tableの幅調整に利用するクラス */
.insurance-premium-table.table-definition {
    width: 100%;
    border-collapse: separate;
}

.insurance-premium-table.table-definition th {
    width: 30%;
    /* ここで見出し列を広げる */
    white-space: nowrap;
    /* 折り返したくない場合 */
}

.insurance-premium-table.table-definition td {
    width: 70%;
}

/* link.html専用：リンクテーブルのレスポンシブ対応 */
.link-table th {
    width: 30%;
}

.link-table td {
    width: 70%;
}

.link-table.soshiki-table th {
    width: 25%;
}

.link-table.soshiki-table td {
    width: 75%;
}

@media (max-width: 1024px) {
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive>table {
        min-width: 1000px;
        /* PC幅よりも少し狭め〜同じくらいの値で */
    }
}

/* テーブル横スクロールコンテナ（メッセージ付き） */
.table-scroll-container {
    width: 100%;
}

/* 横スクロールメッセージ：デフォルトは非表示 */
.table-scroll-hint {
    display: none;
    color: #666;
    font-size: 16px;
    align-items: center;
    gap: 6px;
}

.table-scroll-hint::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/member/svg/icon_swipe.svg) no-repeat center;
    background-size: contain;
    filter: invert(43%) sepia(6%) saturate(7%) hue-rotate(28deg) brightness(95%) contrast(87%);
}

/* 指アイコン（SVG） */
.table-scroll-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* 実際にスクロールさせる部分 */
.table-scroll-inner {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* テーブルは最小幅を確保して横スクロール可能にする */
.table-scroll-inner>table {
    min-width: 930px;
}

/* スクロール可能な場合のみメッセージを表示 */
@media (max-width: 1024px) {
    .table-scroll-container.is-scrollable .table-scroll-hint {
        display: flex;
        align-items: center;
    }
}

/* セル個別の幅指定クラス（汎用） */
/* パーセンテージ指定 */
.width-5 {
    width: 5%;
}

.width-6 {
    width: 6%;
}

.width-7 {
    width: 7%;
}

.width-8 {
    width: 8%;
}

.width-9 {
    width: 9%;
}

.width-10 {
    width: 10%;
}

.width-11 {
    width: 11%;
}


.width-12 {
    width: 12%;
}

.width-13 {
    width: 13%;
}

.width-14 {
    width: 14%;
}

.width-15 {
    width: 15%;
}

.width-16 {
    width: 16%;
}

.width-18 {
    width: 18%;
}

.width-20 {
    width: 20%;
}

.width-22 {
    width: 22%;
}

.width-24 {
    width: 24%;
}

.width-25 {
    width: 25%;
}

.width-26 {
    width: 26%;
}

.width-28 {
    width: 28%;
}

.width-30 {
    width: 30%;
}

.width-35 {
    width: 35%;
}

.width-40 {
    width: 40%;
}

.width-45 {
    width: 45%;
}

.width-50 {
    width: 50%;
}

.width-55 {
    width: 55%;
}

.width-60 {
    width: 60%;
}

.width-65 {
    width: 65%;
}

.width-70 {
    width: 70%;
}

.width-75 {
    width: 75%;
}

.width-80 {
    width: 80%;
}

.width-85 {
    width: 85%;
}

.width-90 {
    width: 90%;
}

.width-95 {
    width: 95%;
}

.width-100 {
    width: 100%;
}

/* 固定値指定（必要に応じて追加） */
.width-100px {
    width: 100px;
}

.width-150px {
    width: 150px;
}

.width-200px {
    width: 200px;
}

.width-250px {
    width: 250px;
}

.width-300px {
    width: 300px;
}

.width-350px {
    width: 350px;
}

.width-400px {
    width: 400px;
}

/* 最小幅指定（テキストが長い場合に便利） */
.min-width-100px {
    min-width: 100px;
}

.min-width-150px {
    min-width: 150px;
}

.min-width-200px {
    min-width: 200px;
}

.min-width-250px {
    min-width: 250px;
}

.min-width-300px {
    min-width: 300px;
}


/* Organizational Chart Section */
.org-chart-section {
    margin-bottom: 60px;
}

.org-chart-image {
    margin-top: 40px;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.org-chart-wrapper {
    margin-top: 30px;
    text-align: center;
}

.org-chart-img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: auto;
    border-radius: 10px;
}

/* Branch Structure Section */
.branch-structure-section {
    margin-top: 60px;
    margin-bottom: 60px;
}

.branch-structure-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 40px;
    border-radius: 20px;
    overflow: hidden;
}

.branch-structure-table tbody tr:first-child td:first-child,
.branch-structure-table tbody tr:first-child th:first-child {
    border-top-left-radius: 20px;
}

.branch-structure-table tbody tr:first-child td:last-child,
.branch-structure-table tbody tr:first-child th:last-child {
    border-top-right-radius: 20px;
}

.branch-structure-table tbody tr:last-child td:first-child,
.branch-structure-table tbody tr:last-child th:first-child {
    border-bottom-left-radius: 20px;
}

.branch-structure-table tbody tr:last-child th.no-bottom-radius,
.branch-structure-table tbody tr:last-child td.no-bottom-radius {
    border-bottom-left-radius: 0;
}

.branch-structure-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}

/* insurance_kumiaiページ用：rowspan見出しセルの左下角を丸める（PC時 20px） */
.branch-structure-table .branch-name-cell.round-bottom-left[rowspan] {
    border-bottom-left-radius: 20px;
}

.branch-name-cell {
    width: 32%;
    padding: 16px;
    background-color: #DBF0F2;
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #6BB2B9;
    border-bottom: 1px solid #6BB2B9;
}

.branch-structure-table tbody tr:first-child .branch-name-cell {
    border-top: 1px solid #6BB2B9;
}

.branch-structure-table tbody tr .branch-name-cell:first-child {
    border-left: 1px solid #6BB2B9;
}

/* moneyページ用：rowspanの右隣に来る見出しセルは左罫線を消して二重線を防ぐ */
.branch-structure-table .branch-name-cell.no-left-border,
.branch-structure-table tbody tr .branch-name-cell.no-left-border {
    border-left: none !important;
}

/* insurance_kumiaiページ用：rowspanの右隣に来る組合員区分セルの左罫線を消して二重線を防ぐ */
.branch-structure-table .branch-companies-cell.no-left-border,
.branch-structure-table tbody tr .branch-companies-cell.no-left-border {
    border-left: none !important;
}

/* moneyページ「種別」「商品名」用の個別幅調整 */
.branch-structure-table .branch-name-cell.width-20 {
    width: 20%;
}

.branch-structure-table .branch-name-cell.width-25 {
    width: 25%;
}

.branch-structure-table .branch-name-cell.width-30 {
    width: 30%;
}

.branch-structure-table .branch-name-cell.width-50 {
    width: 50%;
}

.branch-structure-table .branch-name-cell.width-60 {
    width: 60%;
}

.branch-structure-table tbody tr:last-child .branch-name-cell {
    border-bottom: none;
}

/* moneyページ用：一部の見出しセルは最下段でも下罫線を残す */
.branch-structure-table tbody tr:last-child .branch-name-cell.keep-bottom-border {
    border-bottom: 1px solid #6BB2B9;
}

/* moneyページ用：rowspanしている見出しセルの左下を角丸にする（無担保ローンなど） */
.branch-structure-table .branch-name-cell.keep-bottom-border[rowspan] {
    border-bottom-left-radius: 20px;
}

.branch-companies-cell {
    width: 32%;
    padding: 16px;
    background-color: #ffffff;
    vertical-align: top;
    border-right: 1px solid #6BB2B9;
    border-bottom: 1px solid #6BB2B9;
}

.branch-structure-table tbody tr:first-child .branch-companies-cell {
    border-top: 1px solid #6BB2B9;
}

.branch-structure-table tbody tr .branch-companies-cell:first-child {
    border-left: 1px solid #6BB2B9;
}

/* soshiki.html専用：組織図ページの幅調整 */
.branch-structure-table-soshiki .branch-name-cell.width-30 {
    width: 30%;
}

.branch-structure-table-soshiki .branch-companies-cell {
    width: 100%;
}

/* soshiki.html専用：最後の行にも下線を表示 */
.branch-structure-table-soshiki tbody tr:last-child .branch-name-cell {
    border-bottom: 1px solid #6BB2B9;
}

.branch-structure-table-soshiki tbody tr:last-child .branch-companies-cell {
    border-bottom: 1px solid #6BB2B9;
}

.branch-structure-companies>li {
    margin-bottom: 15px;
    padding-left: 15px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}

.branch-structure-companies>li:last-child {
    margin-bottom: 0;
}

.branch-structure-companies>li::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 8px;
    background-color: var(--main-orange);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.branch-structure-companies>li>ul {
    list-style: none;
    margin-top: 8px;
}

.branch-structure-companies>li>ul>li {
    font-weight: normal;
    margin-bottom: 5px;
}

.branch-structure-companies>li>ul>li:last-child {
    margin-bottom: 0;
}

@media (max-width: 1520px) {
    .header-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }
    
    /* ハンバーガー＋ログアウトを右側にまとめる */
    .mobile-menu-toggle {
        display: flex !important;
        margin-left: auto;
        /* ここから右側に寄せる */
        order: 2;
    }

    .header-login {
        order: 3;
    }

    .logout-button {
        font-size: 14px;
        padding: 5px 15px;
    }

    .login-status {
        font-size: 10px;
    }

    .header-nav {
        position: fixed;
        top: 93px;
        right: 0;
        bottom: 0;
        left: auto;
        width: 100%;
        background: linear-gradient(129deg, #E6F7FD 0%, #EDFFF5 36.06%, #FFFEF6 72.6%, #FEF4E9 100%);
        padding: 2px 10px 15px;
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    body.mobile-menu-open .header-nav {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* メニュー表示中は背面コンテンツをスクロールさせない */
    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden;
        height: 100%;
    }

    .header-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0;
    }

    .header-nav-list li {
        border-bottom: 1px solid #D1ECF5;
    }

    .header-nav-list li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 10px;
        font-size: 16px;
    }

    /* モバイル時のみ、グロナビの丸矢印アイコンを表示 */
    .header-nav-list li a .icon-circle-arrow {
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
    }

    .header-nav-list li a:hover .icon-circle-arrow {
        background-color: var(--main-blue);
        border-color: var(--main-blue);
    }

    .header-nav-list li a:hover .icon-circle-arrow::before {
        border-right-color: #ffffff;
        border-bottom-color: #ffffff;
    }

    .header-nav-list li a.dropdown-menu-card {
        justify-content: flex-start;
        box-shadow: none;
        padding: 15px;
        flex-direction: row;
        border-radius: 0;
        transition: .3s;
    }

    .header-nav-list li a.dropdown-menu-card:hover {
        box-shadow: none;
        background-color: rgba(151, 151, 151, 0.1);
    }

    .header-nav-list li a.more-link {
        width: 100%;
        margin-bottom: 0;
    }

    /* モバイル用の＋ / − アイコン */
    .mobile-dropdown-toggle {
        position: relative;
        width: 34px;
        height: 34px;
        margin-left: auto;
        border-radius: 50%;
        border: 3px solid var(--main-blue);
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: .3s;
    }

    .mobile-dropdown-toggle::before,
    .mobile-dropdown-toggle::after {
        content: "";
        position: absolute;
        width: 16px;
        height: 3px;
        background-color: var(--main-blue);
        border-radius: 999px;
        transition: transform 0.2s ease;
    }

    .mobile-dropdown-toggle::after {
        transform: rotate(90deg);
    }

    .has-dropdown {
        padding-right: 0;
    }

    .has-dropdown.is-open .mobile-dropdown-toggle::after {
        transform: rotate(0deg);
    }

    .has-dropdown .dropdown-trigger:hover .mobile-dropdown-toggle {
        background-color: var(--main-blue);
        border-color: var(--main-blue);
    }

    .has-dropdown .dropdown-trigger:hover .mobile-dropdown-toggle::before,
    .has-dropdown .dropdown-trigger:hover .mobile-dropdown-toggle::after {
        background-color: #ffffff;
    }

    /* モバイルではヘッダーメニューの矢印を消す */
    .has-dropdown .dropdown-trigger::after {
        content: none;
    }

    /* モバイル用にドロップダウンパネルを縦方向に開閉 */
    .dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0;
        padding: 0 0 20px;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        display: none;
    }

    .has-dropdown.is-open .dropdown-menu {
        display: block;
    }

    .dropdown-menu-container {
        max-width: 100%;
        padding: 0;
    }

    /* スマホ時の組織運営／サービスのカード一覧 */
    .dropdown-menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
        background-color: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        /* 4隅を20pxで丸める */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        margin: 0 10px;
    }

    .dropdown-menu-card {
        position: relative;
        box-shadow: none;
        padding: 16px 20px;
        align-items: flex-start;
        flex-direction: row;
        gap: 12px;
    }

    .dropdown-menu-card:hover {
        box-shadow: none;
    }

    .dropdown-menu-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        height: 1px;
        background-color: #D1ECF5;
        z-index: 1;
    }

    .dropdown-menu-card:first-child::before {
        display: none;
    }

    /* スマホのサービス／組織運営メニュー右端に「＞」アイコンを表示 */
    .dropdown-menu-card::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        width: 10px;
        height: 10px;
        border-right: 3px solid #01b2ec;
        border-bottom: 3px solid #01b2ec;
        transform: translate(-50%, -50%) rotate(-45deg);
        box-sizing: border-box;
    }

    /* 最後のカードだけ下線を消す（外枠の角丸をきれいに見せるため） */
    .dropdown-menu-card:last-child {
        border-bottom: none;
    }

    .dropdown-menu-icon {
        width: 40px;
        height: 40px;
    }

    .dropdown-menu-text {
        padding-left: 0;
        text-align: left;
    }

    .dropdown-menu-text::before {
        display: none;
    }

    .icon-circle-arrow {
        width: 34px;
        height: 34px;
    }

    .header-nav-list li a::before {
        display: none;
    }

    .branch-list.col4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    body.general .hero-container {
        flex-direction: column-reverse;
    }

    .hero-container {
        flex-direction: column;
    }

    .hero-description {
        text-align: center;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero {
        padding: 20px;
    }

    .hero-bg-blue {
        width: 800px;
        height: 530px;
        top: -28%;
        right: -150px;
        background-size: cover;
    }

    .login-box {
        padding: 20px;
    }

    .login-message {
        font-size: 16px;
    }

    .kv-image {
        height: 400px;
    }

    .hero-content.member {
        flex-direction: column;
        gap: 0;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-description {
        font-size: 18px;
    }

    .organization-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .local-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .branch-list,
    .branch-list.col4 {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
    }

    .news-section {
        padding: 40px;
    }

    .login-submit-button {
        padding: 10px 40px;
    }

    .heading-title-en {
        font-size: 36px;
    }

    .news-header {
        margin-bottom: 20px;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .content-card {
        padding: 20px 5px;
    }

    .content-card-icon {
        width: 50px;
        height: 50px;
    }

    .footer {
        border-radius: 50px;
    }

}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .login-section {
        padding: 60px 20px;
    }

    .header-nav {
        top: 73px;
    }

    .header {
        padding: 10px;
    }

    .header-container {
        padding: 0;
    }

    .logo-image {
        width: 100%;
    }

    .kv-image {
        height: 300px;
    }

    .hero-title {
        font-size: 26px;
    }

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

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

    .news-title-en {
        font-size: 30px;
    }

    .hero-bg-blue {
        width: 360px;
        height: 240px;
        top: -10%;
        right: -50px;
    }

    .login-bg-orange {
        width: 400px;
        height: 300px;
        bottom: -5%;
        left: -100px;
    }

    .news-bg-blue {
        width: 460px;
        height: 306px;
        top: 10%;
        right: -45%;
    }

    .footer-bg-orange {
        top: -30%;
        left: -12%;
        width: 300px;
    }

    .login-main {
        padding: 20px 20px 60px;
    }

    .login-page-frame {
        padding: 20px;
    }

    .login-card {
        padding: 20px;
    }

    /* Organization Section Responsive */
    .organization-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Local News Section Responsive */
    .local-news-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Footer Responsive */
    .footer {
        padding: 30px 20px 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        align-items: center;
    }

    /* フッターの表示順序を変更：center → right → left */
    .footer-center {
        order: 1;
    }

    .footer-right {
        order: 2;
    }

    .footer-left {
        order: 3;
    }

    .footer-nav-list {
        align-items: flex-start;
        text-align: left;
    }

    .footer-nav-list li {
        text-align: left;
    }

    .footer-nav-list li a {
        text-align: left;
    }

    .footer-related-logos {
        flex-direction: row;
        gap: 10px;
    }

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

    .footer-logo .logo-image {
        width: 100%;
    }

    .footer-union-name,
    .footer-address,
    .footer-contact {
        margin-bottom: 0;
    }

    .footer-copyright {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        padding: 15px 20px;
        box-sizing: border-box;
    }

    .page-top-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 20px;
        right: 20px;
    }

    .document-section {
        padding: 30px 20px 36px;
    }

    .document-link {
        flex-wrap: wrap;
    }

    .document-size {
        order: 10;
        margin-left: 18px;
        /* 矢印分 */
        margin-top: 4px;
    }

    .document-icon {
        margin-left: auto;
    }

    .news-section {
        padding: 40px 20px;
        margin-bottom: 20px;
    }

    .local-news-section {
        padding: 40px 20px;
        margin-bottom: 60px;
    }

    /* サイトマップ */
    .sitemap-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sitemap-list>li {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .sitemap-list>li>ul>li {
        font-size: 14px;
        margin-bottom: 6px;
    }

    /* 任意加入テーブルはSPで縦積み表示に */
    .insurance-stack-table thead {
        display: none;
    }

    .insurance-stack-table tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #e0e0e0;
    }

    .insurance-stack-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        font-size: 13px;
    }

    .insurance-stack-table td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 12px;
        white-space: nowrap;
    }

    /* link.html専用：リンクテーブルを1カラム表示に */
    .link-table {
        border-radius: 0;
    }

    .insurance-premium-table th,
    .insurance-premium-table td {
        font-size: 14px;
    }

    .insurance-premium-table tbody tr:first-child th:first-child {
        border-top-left-radius: 10px;
    }

    .insurance-premium-table tbody tr:first-child th:last-child {
        border-top-right-radius: 10px;
        font-size: 14px;
    }

    .insurance-premium-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

    .insurance-premium-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    .insurance-premium-table tbody tr:last-child td.keep-right-border {
        border-bottom-right-radius: 0;
    }

    .insurance-premium-table tbody tr:first-child th:first-child[rowspan] {
        border-bottom-left-radius: 10px;
    }

    .insurance-premium-table tbody tr:first-child th:first-child[rowspan].no-bottom-left-radius {
        border-bottom-left-radius: 0;
    }

    .insurance-premium-table.link-table tbody tr:first-child th:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .insurance-premium-table.link-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .link-table th {
        display: block;
        width: 100%;
        text-align: left;
        padding: 12px 16px;
        background-color: #DBF0F2;
        font-weight: bold;
        /* スマホ時：テーブル本体の枠線と二重にならないように、右側の線はセル側では描画しない */
        border-right: none;
    }

    .link-table td {
        display: block;
        width: 100%;
        padding: 12px 16px;
        text-align: left;
    }

    .link-table.soshiki-table th {
        width: 100%;
    }
    
    .link-table.soshiki-table td {
        width: 100%;
    }

    .breadcrumbs-container {
        padding: 0 20px;
        font-size: 12px;
    }

    .breadcrumbs-list {
        flex-wrap: wrap;
    }

    .breadcrumbs-list a {
        max-width: 120px;
    }

    .breadcrumbs-current {
        max-width: 300px;
    }

    .main-content {
        padding: 40px 20px;
    }

    .lightbox-close {
        width: 30px;
        height: 30px;
        font-size: 22px;
    }

    .lightbox-prev, .lightbox-next {
        width: 30px;
        height: 30px;
        font-size: 22px;
    }

    .lightbox-prev .icon-circle-arrow-left, .lightbox-next .icon-circle-arrow {
        width: 30px;
        height: 30px;
        border: 2px solid #01b2ec;
    }

    .lightbox-prev {
        left: 15px;
    }

    .lightbox-next {
        right: 15px;
    }

    /* ニュース画像ギャラリー：スマホでは2列表示 */
    .news-image-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .page-title {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .page-title-sub {
        font-size: 20px;
    }

    .section-title {
        font-size: 18px;
    }

    .heading-style,
    .insurance-course-heading,
    .insurance-subheading {
        font-size: 16px;
    }

    .greeting-content {
        flex-direction: column;
        gap: 20px;
    }

    .officer-photo {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    .branch-list,
    .branch-list.col4 {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px;
    }

    .branch-link {
        font-size: 14px;
    }

    .branch-link::before {
        font-size: 16px;
    }

    .branch-table-section {
        margin-top: 40px;
        padding-top: 30px;
    }

    .branch-table-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .branch-table-title {
        font-size: 18px;
    }

    .org-chart-img {
        border-radius: 5px;
    }

    /* テーブルの角丸を10pxに変更 */
    .insurance-table {
        border-radius: 10px;
    }

    .insurance-premium-table {
        border-radius: 10px;
    }

    .branch-structure-table {
        border-radius: 10px;
    }

    /* 角丸を10pxに統一（th/td両方） */
    .branch-structure-table tbody tr:first-child th:first-child,
    .branch-structure-table tbody tr:first-child td:first-child {
        border-top-left-radius: 10px;
    }

    .branch-structure-table tbody tr:first-child th:last-child,
    .branch-structure-table tbody tr:first-child td:last-child {
        border-top-right-radius: 10px;
    }

    .branch-structure-table tbody tr:last-child th:first-child,
    .branch-structure-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    /* 教育ローン・子ども行など（no-bottom-radius）はスマホ時も角丸を外す */
    .branch-structure-table tbody tr:last-child th.no-bottom-radius,
    .branch-structure-table tbody tr:last-child td.no-bottom-radius {
        border-bottom-left-radius: 0;
    }

    .branch-structure-table tbody tr:last-child th:last-child,
    .branch-structure-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

    /* moneyページ用：rowspanしている見出しセルの左下を角丸にする（SP時 10px） */
    .branch-structure-table .branch-name-cell.keep-bottom-border[rowspan] {
        border-bottom-left-radius: 10px;
    }

    /* insurance_kumiaiページ用：rowspan見出しセルの左下角を丸める（SP時 10px） */
    .branch-structure-table .branch-name-cell.round-bottom-left[rowspan] {
        border-bottom-left-radius: 10px;
    }

    .branch-name-cell {
        width: 35%!important;
        padding: 15px 20px;
        font-size: 14px;
    }

    /* 幅指定（width-*）を優先させる */
    .branch-structure-table .branch-name-cell.width-50 {
        width: 50%;
    }

    .branch-companies-cell {
        width: 35%;
        padding: 15px 20px;
    }

    /* soshiki.html専用：レスポンシブ時も幅を維持 */
    /* soshiki.html専用：スマホ時はリンクページと同様に縦並びレイアウトにする */
    .branch-structure-table-soshiki tbody tr {
        display: block;
    }

    .branch-structure-table-soshiki .branch-name-cell {
        display: block;
        box-sizing: border-box;
        border-right: none;
        border-left: 1px solid #6BB2B9;
        border-bottom: 1px solid #6BB2B9;
    }

    .branch-structure-table-soshiki .branch-companies-cell {
        display: block;
        box-sizing: border-box;
        border-left: 1px solid #6BB2B9;
    }

    .branch-structure-companies>li {
        font-size: 14px;
    }

    .branch-structure-companies>li>ul>li {
        font-size: 13px;
    }

    .card-grid {
        padding: 0;
    }

    .more-link {
        font-size: 16px;
    }

    /* ページネーション：スマホでサイズを縮小 */
    .pagination {
        margin-top: 40px;
    }

    .pagination-list {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-link {
        min-width: 28px;
        width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 4px 2px;
    }

    .pagination-link.is-current {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .pagination-arrow {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .pagination-arrow::before {
        width: 8px;
        height: 8px;
        border-width: 2px;
    }

    .pagination-large-btn {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .pagination-large-btn::before,
    .pagination-large-btn::after {
        width: 8px;
        height: 8px;
        border-width: 2px;
    }

    .pagination-large-next::before {
        left: 30%;
    }

    .pagination-large-next::after {
        left: 50%;
    }

    .pagination-large-prev::before {
        left: 70%;
    }

    .pagination-large-prev::after {
        left: 50%;
    }

    /* スマホ専用の幅指定クラス（-spサフィックス） */
    .width-5sp {
        width: 5%;
    }

    .width-10sp {
        width: 10%;
    }

    .width-15sp {
        width: 15%;
    }

    .width-20sp {
        width: 20%;
    }

    .width-25sp {
        width: 25%;
    }

    .width-30sp {
        width: 30%;
    }

    .width-35sp {
        width: 35%;
    }

    .width-40sp {
        width: 40%;
    }

    .width-45sp {
        width: 45%;
    }

    .width-50sp {
        width: 50%;
    }

    .width-55sp {
        width: 55%;
    }

    .width-60sp {
        width: 60%;
    }

    .width-65sp {
        width: 65%;
    }

    .width-70sp {
        width: 70%;
    }

    .width-75sp {
        width: 75%;
    }

    .width-80sp {
        width: 80%;
    }

    .width-85sp {
        width: 85%;
    }

    .width-90sp {
        width: 90%;
    }

    .width-95sp {
        width: 95%;
    }

    .width-100sp {
        width: 100%;
    }

}

@media (max-width: 480px) {
    .kv-image {
        height: 200px;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .content-card {
        padding: 5px;
        gap: 5px;
    }
}