* {
    transition: none;
}
body {
    font-family: 'YuGothic', sans-serif;
    margin: 0;
    background-color: #FFFFFF;
}

.swiper-container {
    padding-left: 32px !important;
    padding-right: 32px !important;
}
.kv-arrows {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0 32px 0 0;
    gap: 16px;
}
.kv-arrows img {
    width: 6px;
    height: 11px;
}
.kv-arrows > .arrow {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: rgba(218, 238, 238, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.home-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 16px 120px;
    gap: 56px;
}

.home-frame-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
    width: 100%;
}

.home-head h1 {
    font-weight: 700;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: #373D42;
    margin: 0;
}

.home-head p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #515F69;
    margin: 0;
}

.home-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 32px;
    background-color: #EEF7F7;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 32px;
}

.home-filter .row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 535px;
}

.home-search-field {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background-color: #FFFFFF;
    border: 1px solid #CBD3D6;
    border-radius: 4px;
    flex-grow: 1;
}

.home-search-field img {
    /* Add styles for search icon if provided in Figma */
}

.home-search-field span {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #707278;
}

.home-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    cursor: pointer;
    width: 325px;
}

.home-frame-2-inner .home-button:hover, .home-list .home-button:hover,
.home-button.home-story-button:hover,
.home-button.home-column-button:hover,
.home-button.home-calendar-button:hover,
.home-button.home-qa-button:hover,
.home-button.home-news-button:hover,
.home-button.home-about-button:hover {
    border-color: rgba(29, 139, 156, 1);
    color: rgba(29, 139, 156, 1);
    text-decoration: underline;
}

.home-filter .home-button {
    background-color: #4C90FE;
    border: 1px solid #3079ED;
    color: #FFFFFF;
    width: 108px;
    height: 38px;
    box-sizing: border-box;
}

.home-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px 12px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    background-color: #FFFFFF;
    border: 1px solid #62C7CD;
    color: #1D8B9C;
}

.home-tag-item {
    border-radius: 999px;
}

.home-frame-2-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    width: 100%;
}

.home-frame-2-inner h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.home-frame-2-inner .home-button,
.home-list .home-button {
    background-color: transparent;
    border: 1px solid #212529;
    color: #212529;
    width: 325px;
}

.home-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1100px;
    width: 100%;
}

.home-list .row {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.home-cassette-case {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background-color: #FFFFFF; /* Assuming white, adjust if different */
    border-radius: 4px; /* Assuming a slight border radius, adjust if different */
    width: calc(25% - 12px); /* Two items per row with 16px gap: (100% - 16px)/2 */
    box-sizing: border-box;
}
.home-cassette-case:hover {
    text-decoration: none;
    background-color: rgba(238, 247, 247, 1);
}
.home-cassette-case:hover .home-title {
    color: rgba(29, 139, 156, 1);
    text-decoration: underline;
}

.home-img-locked-aspect-ratio {
    width: 100%;
    height: 160px;
    position: relative;
    background-color: #D8D8D8; /* Placeholder color for image */
}
.home-img-locked-aspect-ratio .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}
.home-img-locked-aspect-ratio .home-img img {
    height: 100%;
}

.home-img {
    width: 100%;
    height: 100%;
    background-size: cover; /* Or contain, depending on Figma */
    background-position: center;
}

.home-text-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-text-content .home-tags {
    gap: 4px;
}

.home-tag.home-highlight {
    background-color: #DAEEEE;
    border: none;
    color: #1D8B9C;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.home-tag.home-closed {
    background-color: rgba(231, 235, 238, 1);
    border: none;
    color: rgba(122, 140, 150, 1);
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
}

.home-tag.home-new {
    background-color: #FFF0D3;
    border: none;
    color: #FF6701;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.home-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
    height: calc(1.4em * 3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;

}

.home-author {
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-author-icon {
    flex-shrink: 0;
}

.home-author-icon > img {
    width: 20px; /* Adjust based on Figma */
    height: 20px; /* Adjust based on Figma */
    border-radius: 999px;
}

.home-author p {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.home-gage {
    background-color: #E7EBEE;
    border-radius: 2px;
    height: 18px;
    width: 100%;

}

.home-gage-filled {
    background: linear-gradient(to right, #1D8B9C, #09A4BC);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 6px 1px;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
    width: 20%; /* This should be dynamic based on data */
    border-radius: 2px;
}

.home-gage-filled-empty {
    color: #1D8B9C;
    background: none;
}
.home-gage-filled-max {
    background: #FF6701;
}

.home-gage-filled-over {
    background: linear-gradient(90deg, #FF6701 38.03%, #FF4800 100%);
}

.home-stats {
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-stat {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.home-stat img {
    /* Add styles for icons if provided in Figma */
    width: 14px;
    height: 14px;
}

.home-stat span {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #515F69;
}

.home-divider {
    width: 1px;
    height: 16px; /* Adjust based on Figma */
    background-color: #CBD3D6;
}

.home-frame-3 .home-list .home-cassette-case:nth-child(1) .home-img { background-image: url('../images/new-case-image-1.png'); background-color: transparent; }
.home-frame-3 .home-list .home-cassette-case:nth-child(2) .home-img { background-image: url('../images/new-case-image-2.png'); background-color: transparent; }
.home-frame-3 .home-list .home-cassette-case:nth-child(3) .home-img { background-image: url('../images/new-case-image-1.png'); background-color: transparent; } /* Figmaでは0V9ZKW (new-case-image-1と同じ) */
.home-frame-3 .home-list .home-cassette-case:nth-child(4) .home-img { background-image: url('../images/new-case-image-3.png'); background-color: transparent; } /* FigmaではAUH2QQ (new-case-image-3と同じ) */

/* KV Section Styles */
.home-kv {
    display: block; /* This will likely be a carousel, so JS might be needed for full functionality */
    justify-content: center; /* Center items for now */
    align-items: center;
    padding: 40px 0; /* Adjust padding as needed */
    gap: 20px; /* Adjust gap as needed */
    position: relative; /* For arrow positioning */
    width: 100%;
    overflow: hidden; /* Hide parts of cards that are off-screen */
    margin: 0 auto; /* Center the KV section */
}


.home-kv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Add other styling like background, border-radius if needed from Figma */
}
.home-kv-card a {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-kv-img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.home-kv-img img {
    width: 100%;
}

.home-kv-img-1 {
    background-image: url('../images/kv-image-1.png');
}

.home-kv-img-2 {
    background-image: url('../images/kv-image-2.png');
}

.home-kv-img-3 {
    background-image: url('../images/kv-image-3.png');
}

.home-kv-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-tag.home-kv-tag {
    background-color: #DAEEEE;
    color: #1D8B9C;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 1px;
    width: fit-content;
    border: none;
}

.home-kv-text p {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.home-arrow {
    background-color: #DAEEEE;
    border-radius: 999px;
    width: 32px; /* Adjust size as needed */
    height: 32px; /* Adjust size as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* position: absolute; */
    /* top: 50%;
    transform: translateY(-50%); */
    z-index: 10;
}

.home-arrow-left {
    left: 20px; /* Adjust position as needed */
}

.home-arrow-right {
    right: 20px; /* Adjust position as needed */
}

.home-arrow img {
    width: 6px; /* Adjust icon size as needed */
    height: 24px; /* Adjust icon size as needed */
}

/* Story Section Styles */
.home-story-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1E7180; /* Figma: fill_LQ3GOE */
    padding: 120px 16px;
    gap: 56px;
    width: 100%;
}

.home-story-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px; /* Figma: dimensions width */
    width: 100%;
    color: #FFFFFF; /* Figma: fill_32U4NX */
}

.home-story-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_II8BF0 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    margin: 0;
}

.home-story-head p {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 16px; /* Figma: style_JFN47A */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    margin: 0;
}

.home-story-list {
    display: flex;
    flex-wrap: wrap; /* Figma: wrap: true */
    gap: 40px; /* Figma: gap: 40px */
    max-width: 1100px; /* Figma: dimensions width */
    width: 100%;
    justify-content: flex-start; /* Align items to the start */
}

.home-story-card {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Figma: cassette_story gap */
    width: calc(50% - 20px); /* Two cards per row with 40px gap: (100% - 40px)/2 */
    box-sizing: border-box;
    color: #FFFFFF; /* Figma: fill_32U4NX */
}
.home-story-card a {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Figma: cassette_story gap */
}

.home-story-card a {
    color: #FFFFFF; /* Figma: fill_32U4NX */
}

#story .home-quote-text {
    color: rgba(33, 37, 41, 1);
}

#story .home-story-title-small {
    color: rgba(81, 95, 105, 1);
}

/* Make the third story card full width */
.home-story-card:nth-child(3n) {
    width: 100%;
}

.home-story-img {
    width: 100%;
    height: 292px; /* Figma: img (Locked Aspect Ratio) height */
    background-size: cover;
    background-position: center;
}
.home-story-img img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.home-story-img-1 { background-image: url('../images/story-image-1.png'); }
.home-story-img-2 { background-image: url('../images/story-image-2.png'); }
.home-story-img-3 { background-image: url('../images/story-image-3.png'); }
.home-story-img-4 { background-image: url('../images/story-image-4.png'); }
.home-story-img-5 { background-image: url('../images/story-image-5.png'); }

/* Adjust height for the third story card's image */
.home-story-card:nth-child(3n) .home-story-img {
    height: 570px; /* Figma node 1855:23151 dimensions height */
}

.home-story-text {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Figma: text gap */
}

p.home-story-title-small {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 14px; /* Figma: style_PNU54X */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    margin: 0;
}

.home-story-quote {
    display: flex;
    align-items: baseline;
    gap: 4px; /* Figma: tit gap */
}

.home-quote-mark {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 24px; /* Figma: style_GKIZ63 */
    line-height: 1em;
    letter-spacing: 0.04em;
    color: #FF6701; /* Figma: fill_WGPZ0N */
}

p.home-quote-text {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 20px; /* Figma: style_PSLKEU & style_1T3DZ9 (font size 24px for one, 20px for others, taking 20px as base) */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    margin: 0;
    word-break: break-all;
}

/* Adjust font size for the third story card's quote text */
.home-story-card:nth-child(3n) .home-quote-text {
    font-size: 24px; /* Figma style_1T3DZ9 */
}

.home-button.home-story-button {
    background-color: transparent;
    border: 1px solid #FFFFFF; /* Figma: stroke_2SA51G */
    color: #FFFFFF; /* Figma: fill_32U4NX */
    width: 325px; /* Figma: dimensions width */
}

/* Column Section Styles */
.home-column-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF; /* Figma: fill_QSY6GV */
    padding: 120px 16px 0;
    gap: 56px; /* Figma: section layout_KXQAAT gap */
    width: 100%;
}

.home-column-head {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Figma: head layout_Q7SCE9 gap */
    max-width: 1100px; /* Figma: head dimensions width */
    width: 100%;
    text-align: left; /* Figma: description text align */
}

.home-column-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_0K9WH2 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_PUNTKO */
    margin: 0;
}

.home-column-head p {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 16px; /* Figma: style_H9TNOG */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_PUNTKO */
}

.home-column-list-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* Figma: list layout_LWTVSB gap */
    max-width: 1100px; /* Figma: list dimensions width */
    width: 100%;
}

.home-column-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Figma: list gap (between rows of cards) */
    width: 100%;
    justify-content: flex-start; /* Distribute items if they wrap to two lines */
    position: relative; /* For absolute positioning of pointing hand */
}

.home-column-card {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Figma: cassette_column layout_OJFI00 gap */
    padding: 12px; /* Figma: cassette_column padding for mobile (bottom only, top/sides from image) */
    width: calc(33.333% - 10.666px); /* Two cards per row with 16px gap */
    box-sizing: border-box;
}

.home-column-card a {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-column-card:hover {
    background-color: #EEF7F7; /* Figma: cassette_column fill_EBI5EV */
}

.home-column-card:hover .home-column-title {
    color: #1D8B9C; /* Figma: fill_E9WQMQ */
}

.home-column-card a:hover {
    text-decoration: none;
}
.home-column-card a:hover .home-column-title {
    text-decoration: underline;
}

.home-column-card-large {
    width: calc(33.333% - 10.666px); /* Same width as other cards */
    background-color: #FFFFFF; /* Figma: pointinghand 4 fill_QSY6GV (white) */
    align-items: center; /* Center the image */
    justify-content: center; /* Center the image */
    min-height: 350px; /* Approximate height of other cards, adjust as needed */
    padding: 0; /* Remove padding for the image card */
}

.home-pointing-hand-img {
    /* Position was absolute in Figma, here we try to fit it in flow */
    /* If absolute positioning is critical, uncomment and adjust position below */
    /* position: absolute; */
    /* top: 214px; */
    /* left: 312px; */
    width: auto; /* Let the SVG determine its size or set fixed size */
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 150px; /* Limit height to prevent it from being too large */
}

.home-column-img {
    width: 100%;
    position: relative;
}

.home-column-text-content {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Figma: text layout_DX2O1I gap */
}

.home-column-date {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 12px; /* Figma: style_09M23M */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #515F69; /* Figma: fill_HPDZN8 */
}

.home-column-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* Figma: tags layout_RF8FSH gap */
}

.home-tag.home-column-tag {
    background-color: #DAEEEE; /* Figma: fill_KCP339 */
    color: #1D8B9C; /* Figma: fill_E9WQMQ */
    font-weight: 700;
    font-size: 12px; /* Figma: style_09M23M */
    line-height: 1.4em;
    padding: 2px 8px;
    border-radius: 1px;
}

.home-tag.home-column-tag-alt {
    background-color: #FFF0D3; /* Figma: fill_HVFM7G */
    color: #FF6701; /* Figma: fill_AKI0C3 */
    font-weight: 700;
    font-size: 12px; /* Figma: style_09M23M */
    line-height: 1.4em;
    padding: 2px 8px;
    border-radius: 1px;
}

p.home-column-title {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 16px; /* Figma: style_5R6CDS */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_PUNTKO / fill_E9WQMQ - using PUNTKO for title consistency */
    margin: 0;
}

p.home-column-subtitle {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 12px; /* Figma: style_10L44A */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #515F69; /* Figma: fill_HPDZN8 */
    margin: 0;
}

.home-button.home-column-button {
    background-color: transparent;
    border: 1px solid #212529; /* Figma: stroke_PVYK5F */
    color: #212529; /* Figma: fill_PUNTKO */
    width: 325px; /* Figma: dimensions width */
}

.home-column-bottom-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Figma: tags layout_4TDEAA gap */
    padding: 24px 32px; /* Figma: tags layout_4TDEAA padding */
    max-width: 1100px; /* Figma: tags dimensions width */
    width: 100%;
    background-color: #EEF7F7; /* Figma: tags fill_EBI5EV */
    box-sizing: border-box;
}

.home-column-bottom-tags .home-tag {
    background-color: #FFFFFF; /* Figma: tag fill_QSY6GV */
    border: 1px solid #62C7CD; /* Figma: stroke_3JLOWJ */
    color: #1D8B9C; /* Figma: fill_E9WQMQ (assuming this color from other similar tags) */
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 14px; /* Figma: style_ONLR89 */
    line-height: 1.7em;
    padding: 1px 12px; /* Figma: tag layout_TTS2WR padding */
}

/* About Section Styles */
.home-about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #EEF7F7; /* Figma: fill_LF57WO */
    padding: 120px 16px; /* Figma: layout_NYFFKB padding */
    gap: 56px; /* Figma: layout_NYFFKB gap - though only one child here */
    width: 100%;
}

.home-about-row {
    display: flex;
    align-items: center;
    gap: 40px; /* Figma: layout_H22WLH gap */
    max-width: 1100px; /* Figma: layout_H22WLH dimensions width */
    width: 100%;
}

.home-about-content {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Figma: layout_WSRSFO gap */
    flex: 1; /* Allow content to take available space */
}

.home-about-head {
    /* Figma: layout_B2YV1Z - only contains title */
}

.home-about-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_V8MASW */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_9EXY13 */
    margin: 0;
}

.home-about-content p {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 16px; /* Figma: style_IFK9ZU */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_9EXY13 */
    margin: 0;
}

.home-button.home-about-button {
    background-color: transparent;
    border: 1px solid #212529; /* Figma: stroke_3AO4R7 */
    color: #212529; /* Figma: fill_9EXY13 */
    width: 325px; /* Figma: layout_FXQFCA dimensions width */
    /* font-family, weight, size already in .button from style_HNL920 */
}

.home-about-img {
    width: 532px; /* Figma: layout_XW61GC dimensions width */
    height: 332px; /* Figma: layout_XW61GC dimensions height */
    background-image: url('/common/img/about-call4-image.png');
    background-size: cover; /* Figma: fill_05NMK2 scaleMode FILL */
    background-position: center;
    /* padding: 24px 40px; Figma: layout_XW61GC padding - handled by image size */
}

.home-about-content > .home-about-img {
    display: none;
}

/* Calendar Section Styles */
.home-calendar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF; /* Figma: fill_EIJO2Y */
    padding: 120px 16px; /* Figma: layout_SUC7G9 padding */
    gap: 56px; /* Figma: layout_SUC7G9 gap */
    width: 100%;
    position: relative; /* For pointing hand */
}

.home-calendar-head {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Figma: layout_5CB5KX gap */
    max-width: 1100px; /* Figma: head dimensions width */
    width: 100%;
}

.home-calendar-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_IJKCS7 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_FO8U34 */
    margin: 0;
}

.home-calendar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Figma: layout_OA95GJ gap */
    max-width: 1100px; /* Figma: list dimensions width */
    width: 100%;
    justify-content: space-between; /* Distribute items to fill the space */
}

.home-calendar-list .home-calendar-item {
    width: calc(33.333% - 11px); /* (100% - 2 * 16px) / 3 */
}

.home-calendar-item a {
    display: flex;
    gap: 12px; /* Figma: layout_5XIANQ gap */
    padding: 12px; /* Figma: layout_5XIANQ padding */
    width: 100%; /* (100% - 2 * 16px) / 3 */
    box-sizing: border-box;
}

.home-calendar-item a:hover {
    text-decoration: none;
    background-color: #EEF7F7; /* Figma: fill_O7MTS7 */
}

.home-calendar-item.home-highlight {
    background-color: #EEF7F7; /* Figma: fill_O7MTS7 */
}

.home-calendar-date {
    display: flex;
    flex-direction: column; /* Stack month and day */
    align-items: center; /* Center month and day */
    gap: 4px; /* Figma: layout_IDBG3T and layout_GEF469 gap */
    width: 66px; /* Figma: layout_GEF469 dimensions width OR layout_843MH6 dimensions width */
    position: relative;
}
.home-calendar-date-content {
    position: relative;
    height: 40px;
    width: 100%;
}

.home-calendar-date .month {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 20px; /* Figma: style_TSLWQW */
    line-height: 1.2em;
    color: #1D8B9C; /* Figma: fill_CDC1O5 */
    position: absolute;
    top: 0;
    left: 0;
}

.home-calendar-date .month_slash {
    width: 30px;
    transform: rotate(-71deg);
    position: absolute;
    top: 15px;
    left: 12px;
    border: 0.5px solid #1D8B9C;
}

.home-calendar-date .day {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 32px; /* Figma: style_7PADYY */
    line-height: 1em;
    color: #1D8B9C; /* Figma: fill_CDC1O5 */
    position: absolute;
    top: 8px;
    right: 0;
    /* Line 6 SVG is not directly translated, date parts are stacked */
}

.home-tag.home-calendar-tag {
    background-color: #FFF0D3; /* Figma: fill_V96W6R */
    color: #FF6701; /* Figma: fill_FWXMZR */
    font-weight: 700;
    font-size: 12px; /* Figma: style_2GJQQ5 */
    line-height: 1.4em;
    padding: 2px 8px;
    border-radius: 1px;
    margin-top: 4px; /* Add some space above the tag */
    border: none;
}

.home-calendar-details {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Figma: layout_FBQJ3X gap */
    flex-grow: 1; /* Take remaining space */
    flex: 1;
}

.home-calendar-details .title {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 16px; /* Figma: style_Q20H63 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #000000; /* Figma: fill_INSM7Y */
    margin: 0;
    display: -webkit-box;             
    -webkit-box-orient: vertical;      /* 垂直方向に配置 */
    overflow: hidden;                  /* 溢れた部分を隠す */
    text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
    -webkit-line-clamp: 2;             /* 最大行数を2行に設定 */
}
.home-calendar-details:hover .title {
    color: #1D8B9C; /* Figma: fill_CDC1O5 for highlighted text */
    text-decoration: underline;
}

.home-calendar-item.home-highlight .home-calendar-details .title {
    color: #1D8B9C; /* Figma: fill_CDC1O5 for highlighted text */
}


.home-calendar-details .info {
    display: flex;
    align-items: center;
    gap: 4px; /* Figma: layout_1H8J8F gap */
}

.home-calendar-details .info img {
    width: 24px; /* Figma icon size (common) */
    height: 24px; /* Figma icon size (common) */
}

.home-calendar-details .info span {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 14px; /* Figma: style_GLTU63 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #000000; /* Figma: fill_INSM7Y */
}

.home-button.home-calendar-button {
    background-color: transparent;
    border: 1px solid #212529; /* Figma: stroke_7FLFER */
    color: #212529; /* Figma: fill_FO8U34 */
    width: 325px; /* Figma: dimensions width */
}

.home-calendar-pointing-hand {
    position: absolute;
    /* Figma: locationRelativeToParent x: 1297, y: 338.68359375 */
    /* This needs careful adjustment based on the final layout */
    right: -80px; /* Adjust as needed for 3-column layout */
    top: 220px;  /* Adjust as needed for 3-column layout */
    width: 80px; /* Approximate size, adjust from SVG if needed */
}

.home-calendar-pointing-hand img {
    width: 100%;
    height: auto;
}

/* SNS Section Styles */
.home-sns-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 0px 120px; /* Figma: layout_R0G75F padding */
    gap: 56px; /* Figma: layout_R0G75F gap */
    width: 100%;
}

.home-sns-head {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Figma: layout_TNXNKP gap */
    max-width: 1100px; /* Figma: head dimensions width */
    width: 100%;
}

.home-sns-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_45ANZ5 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_L1M4SM */
    margin: 0;
}

.home-sns-head p {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 16px; /* Figma: style_9FGA00 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_L1M4SM */
    margin: 0;
}

.home-sns-list {
    display: flex;
    gap: 24px; /* Figma: layout_6TRBFN gap */
    max-width: 1100px; /* Figma: list dimensions width */
    width: 100%;
}

.home-sns-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px; /* Figma: layout_OQI0CS / layout_6SNSLF gap */
    border-radius: 8px; /* Figma: borderRadius */
    color: #FFFFFF; /* Figma: fill_59T3RG */
    flex: 1; /* Distribute space equally */
    text-align: center;
}

.home-sns-item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px; /* Figma: layout_OQI0CS / layout_6SNSLF gap */
    padding: 24px; /* Figma: layout_OQI0CS / layout_6SNSLF padding */
    color: #FFFFFF; /* Figma: fill_59T3RG */
    width: 100%;
}

.home-sns-item a:hover img {
    opacity: 1;
}

.home-sns-item img {
    width: 32px; /* Adjust as needed, original Figma containers are 24x24 or 32x32 */
    height: 32px; /* Adjust as needed */
}

.home-sns-item span {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 14px; /* Figma: style_KZT2AI */
    line-height: 1.4em;
    letter-spacing: 0.04em;
}

.home-sns-item.x {
    background-color: #000000; /* Figma: fill_M64RVT */
}

.home-sns-item.bluesky {
    background-color: #3B82F6; /* Figma: fill_30L9OU */
}

.home-sns-item.instagram {
    /* Figma has an image fill, using a common Instagram gradient as fallback */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.home-sns-item.mail {
    background-color: #1D8B9C; /* Figma: fill_VKGNW0 */
}

/* Q&A Section Styles */
.home-qa-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #EEF7F7; /* Figma: fill_4JC7QV */
    padding: 120px 16px; /* Figma: layout_FAMAPJ padding */
    gap: 56px; /* Figma: layout_FAMAPJ gap */
    width: 100%;
    background-size: cover; /* Adjust as needed */
    background-position: center; /* Adjust as needed */
    position: relative; /* For absolute positioned illustrations */
    overflow: hidden; /* To contain illustrations if they overflow */
}

.home-qa-head {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Figma: layout_J65CD3 gap */
    max-width: 1100px; /* Figma: head dimensions width */
    width: 100%;
    z-index: 1; /* Ensure head is above background elements */
}

.home-qa-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_ZYP9R0 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_8QOQL6 */
    margin: 0;
}

.home-qa-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* Figma: layout_UH5LFX gap */
    width: 690px; /* Figma: list dimensions width */
    z-index: 1; /* Ensure list is above background elements */
    margin: 0 auto;
}

.home-qa-item {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Figma: layout_NBTMOJ gap */
    width: 100%;
}

.home-qa-question,
.home-qa-answer {
    display: flex;
    align-items: flex-start; /* Align icon with the start of the text block */
    gap: 12px; /* Figma: layout_MB5M7L/layout_TYLOJ7 gap */
}

.home-qa-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Figma: layout_BBYLUT dimensions */
    height: 40px; /* Figma: layout_BBYLUT dimensions */
    border-radius: 999px; /* Figma: borderRadius */
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 20px; /* Figma: style_Z586O0 */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.home-q-icon {
    /* background-color, color already set */
    background-color: rgba(29, 139, 156, 1);
    color: #fff;
}

.home-a-icon {
    /* background-color, color already set */
    background-color: #fff;
    color: rgba(255, 103, 1, 1);
}

.home-qa-bottom {
    max-width: 1100px;
    width: 100%;
}
.home-qa-bottom img {
    width: 100%;
}

.q-icon {
    background-color: #1D8B9C; /* Figma: fill_EE84DP */
    color: #FFFFFF; /* Figma: fill_5FSKFK */
}

.a-icon {
    background-color: #FFFFFF; /* Figma: fill_5FSKFK */
    color: #FF6701; /* Figma: fill_GLTGU6 */
}

.home-qa-question p {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 16px; /* Figma: style_0GR1GD */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_8QOQL6 */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.home-qa-answer p {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 14px; /* Figma: style_VWQYJE */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_8QOQL6 */
    margin: 0;
}

.home-qa-divider {
    width: calc(100% - 52px); /* 1100px (list width) - 40px (icon) - 12px (gap) = 1048. Then 100% of that for the line container */
    margin-left: 52px; /* Align with text: 40px icon + 12px gap */
    height: 1px;
    background-color: #CBD3D6; /* Figma: stroke_833DJS */
}

.home-button.home-qa-button {
    background-color: transparent;
    border: 1px solid #212529; /* Figma: stroke_I4D6U2 */
    color: #212529; /* Figma: fill_8QOQL6 */
    width: 325px; /* Figma: dimensions width */
}

.home-qa-contents {
    /* display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around; */
    /* gap: 24px; */
    max-width: 1100px;
    width: 100%;
    position: relative;
}

.home-qa-illustration-1 {
    width: 40px; /* Adjust based on SVG content or Figma */
    height: auto;
    z-index: 0; /* Behind content */
    position: absolute;    
    left: 49px;
    top: -2px 
}

.home-qa-illustration-2 {
    width: 33px; /* Adjust based on SVG content or Figma */
    height: auto;
    z-index: 0; /* Behind content */
    position: absolute;   
    right: 54px;
    bottom: 35px;
}

/* News Section Styles */
.home-news-section {
    display: flex;
    justify-content: center; /* Horizontally center news-container */
    padding: 80px 16px; /* Figma: layout_G7H8R6 padding */
    width: 100%;
    background-color: #FFFFFF; /* Assuming white background, adjust if needed based on overall page design */
}

.home-news-container {
    display: flex;
    gap: 40px; /* Figma: layout_7RN5SL gap */
    max-width: 1100px; /* Figma: layout_7RN5SL dimensions width */
    width: 100%;
}

.home-news-head {
    /* Figma: layout_TMAY3I. Part of news-container flex */
    width: auto; /* Adjust as needed, or remove if title is simple */
    flex-shrink: 0; /* Prevent head from shrinking */
    width: 370px;
}

.home-news-head h2 {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 40px; /* Figma: style_4E1DFV */
    line-height: 1.4em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_VLO18K */
    margin: 0;
    white-space: nowrap; /* Prevent title from wrapping if space is tight */
}

.home-news-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align button to the left */
    gap: 24px; /* Figma: layout_W51EEE gap */
    width: 690px; /* Figma: layout_W51EEE dimensions width */
}

.home-news-item {
    display: flex;
    align-items: baseline; /* Align date and title nicely */
    gap: 24px; /* Figma: layout_GLIN13 gap */
    width: 100%;
}

.home-news-date {
    font-family: 'YuGothic';
    font-weight: 700;
    font-size: 14px; /* Figma: style_NI4FLA */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    color: #1D8B9C; /* Figma: fill_UHRE26 */
    white-space: nowrap; /* Prevent date from wrapping */
}

p.home-news-title {
    font-family: 'YuGothic';
    font-weight: 500;
    font-size: 14px; /* Figma: style_X45FT5 */
    line-height: 1.7em;
    letter-spacing: 0.04em;
    color: #212529; /* Figma: fill_VLO18K */
    margin: 0;
}
.home-news-title a {
    color: #212529; /* Figma: fill_VLO18K */
}

.home-button.home-news-button {
    background-color: transparent;
    border: 1px solid #212529; /* Figma: stroke_GILS0V */
    color: #212529; /* Figma: fill_VLO18K */
    width: 325px; /* Figma: dimensions width */
    align-self: flex-end; /* Align button to the right of the list */
}

.home-search-section {
    padding: 80px 0 0;
    gap: 80px;
}

.gsc-input-box {
    border-radius: 4px;
}
/* .home-row table.gsc-search-box td.gsc-input {
    padding-right: 8px;
} */
.home-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-search-box input {
    width: 100%;
    max-width: 419px;
    
    height: 39px;
    gap: 4px;
    opacity: 1;
    padding-top: 6px;
    padding-right: 12px;
    padding-bottom: 6px;
    padding-left: 12px;
    border-radius: 4px;
    border-width: 1px;
    border: 1px solid var(--Grey-Grey200, rgba(203, 211, 214, 1))
}
.home-search-box button {
    border-radius: 4px;
    background-color: rgba(29, 139, 156, 1);
    width: 108px;
    height: 38px;
    justify-content: space-between;
    opacity: 1;
    padding-top: 10px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    border-radius: 4px;
    border: none;
}
.home-search-box button img {
    height: 17px;
    display: block;
}
.gsc-search-button-v2 {
    height: 35px;
    border-radius: 4px;
}

.kv {
    display: none;
}

@media (max-width: 1100px) {
    .kv {
        display: block;
        padding: 0;
    }
    .kv-arrows {
        margin: 0 16px;
    }
}

/* Smartphone Styles */
@media (max-width: 767px) { /* Adjust breakpoint as needed */
    .home-section {
        padding: 48px 0px 80px;
        gap: 24px;
    }

    .home-section.home-search-section {
        padding: 48px 0px 0;
    }

    .home-frame-2 {
        gap: 16px;
        padding: 0 16px; /* Add horizontal padding for mobile */
        width: 100%; /* Make frame-2 full width */
        box-sizing: border-box;
    }

    .home-head {
        gap: 16px; /* Figma: head gap for mobile */
        width: 100%; /* Make head full width */
    }

    .home-head h1 {
        font-size: 24px; /* Figma: style_12E8N2 */
        /* line-height, letter-spacing, color already set */
    }

    .home-head p {
        font-size: 14px; /* Figma: style_1DBA85 */
        /* line-height, letter-spacing, color already set */
    }

    .home-filter {
        padding: 12px 16px; /* Figma: filter padding for mobile */
        gap: 16px; /* Figma: filter gap for mobile */
        width: 100%; /* Make filter full width */
    }

    .home-filter .row {
        width: 100%; /* Make row full width */
        gap: 8px; /* Figma: row gap for mobile */
    }

    .home-search-field {
        /* gap, padding, background, border, border-radius already set */
        /* flex-grow already set */
    }

    .home-search-field img {
        /* Styles for search icon - using the black version for mobile */
        /* content: url('../images/search-icon-black.svg'); */ /* This is not standard for img src */
        /* Consider replacing the src in HTML for mobile or using CSS background */
    }

    .home-search-field span {
        font-size: 16px; /* Figma: style_JP9NWA */
        /* color, etc. already set */
    }

    .home-filter .home-button {
        width: 56px; /* Figma: Button dimensions for mobile */
        height: 38px; /* Figma: Button dimensions for mobile */
        padding: 12px 16px; /* Figma: Button padding for mobile */
        /* background-color, border, color, etc. already set */
    }
    .home-filter .home-button span {
        display: none; /* Hide text, show only icon */
    }

    .home-filter .home-button::before { /* Add icon using pseudo-element */
        content: url('../images/search-icon-black.svg'); /* Black search icon for mobile */
        display: inline-block;
        width: 24px; /* Adjust if needed */
        height: 24px; /* Adjust if needed */
    }

    .home-tags {
        gap: 8px; /* Figma: tags gap for mobile */
    }

    .home-tag {
        font-size: 14px; /* Figma: style_IEZNOF */
        /* padding, border-radius, background, border, color already set */
    }

    .home-frame-2-inner {
        gap: 16px; /* Adjust gap for mobile */
        width: 100%; /* Make inner frame full width */
        padding: 16px 0px 0px; /* Figma frame_2 padding-top + inner title gap */
        box-sizing: border-box;
        flex-direction: column; /* Stack title and button */
        align-items: flex-start; /* Align items to start */
    }

    .home-frame-2-inner h2 {
        font-size: 20px; /* Figma: style_6S42SO */
        /* line-height, letter-spacing, color already set */
    }

    .home-frame-2-inner .home-button,
    .home-list .home-button {
        width: 100%; /* Make button full width */
        max-width: 320px;
        padding: 12px 16px; /* Figma: button padding for mobile */
        height: 48px; /* Figma: button height for mobile */
        box-sizing: border-box;
        /* border, color, background already set */
    }

    .home-list {
        gap: 16px; /* Figma list items gap for mobile */
        width: 100%; /* Make list full width */
    }

    .home-list .row {
        gap: 16px; /* Figma: row gap for mobile, cassette_case items */
        /* width is 100% from .list so items will wrap */
        justify-content: space-between; /* Distribute items evenly */
    }

    .home-cassette-case {
        gap: 8px; /* Figma: cassette_case gap for mobile */
        width: calc(50% - 8px); /* Two items per row with 16px gap: (100% - 16px)/2 */
        /* padding, background, border, border-radius, box-sizing already set */
        padding: 0;
    }

    .home-img-locked-aspect-ratio {
        /* width, padding-top (aspect ratio), position, background-color already set */
        height: auto;
    }

    .home-img {
        aspect-ratio: 168 / 112;
        /* position, top, left, width, height, background-size, background-position already set */
    }

    /* Image URLs are set per-item, no change here */

    .home-text-content {
        gap: 6px; /* Figma: text content gap for mobile */
    }

    .home-tag.home-highlight,
    .home-tag.home-new,
    .home-tag.home-closed {
        font-size: 11px; /* Figma: style_VYD904 */
        line-height: 1.4;
        /* padding, background, border-radius, color, font-weight, line-height already set */
    }

    .home-title {
        font-size: 14px; /* Figma: style_4VCOF3 */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-author {
        gap: 4px; /* Figma: author gap for mobile */
        /* align-items already set */
    }

    .home-author-icon {
        width: 16px; /* Adjust based on Figma mobile */
        height: 16px; /* Adjust based on Figma mobile */
        display: flex;
        /* border-radius, background-color, background-image, background-size, background-position already set */
    }

    .home-author p {
        font-size: 11px; /* Figma: style_IVVLZ9 */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-gage {
        height: 14px; /* Figma: gage height for mobile */
        /* background-color, border-radius, width already set */
    }

    .home-gage-filled {
        font-size: 10px; /* Figma: style_PIBOHN */
        /* background, height, display, align-items, padding, box-sizing, color, font-weight, line-height, letter-spacing, width already set */
    }

    .home-stats {
        gap: 4px; /* Figma: stats gap for mobile */
        /* align-items already set */
    }

    .home-stat {
        gap: 0px; /* Figma: stat gap for mobile */
        /* align-items, flex-grow already set */
        display: flex;
        flex-direction: column;
    }

    .home-stat img {
        /* Using accent color icons for mobile */
        /* content: url('../images/volunteer_activism_accent.svg'); */ /* Not standard for img src */
        /* content: url('../images/group_accent.svg'); */ /* Not standard for img src */
        width: 16px; /* Adjust if needed */
        height: 16px; /* Adjust if needed */
    }
    
    .home-stat span {
        font-size: 13px; /* Figma: style_4VCOF3 (same as title for mobile stats value) */
        font-weight: 500;
        /* font-weight, line-height, letter-spacing, color already set */
    }

    .home-divider {
        /* width, height, background-color already set */
    }

    /* Ensure specific case images are still applied */
    .home-frame-2 .home-list .home-cassette-case:nth-child(1) .home-author-icon { background-image: url('../images/author-icon-case-1.png'); }
    .home-frame-2 .home-list .home-cassette-case:nth-child(2) .home-author-icon { background-image: url('../images/author-icon-case-2.png'); }
    .home-frame-2 .home-list .home-cassette-case:nth-child(3) .home-author-icon { background-image: url('../images/author-icon-case-3.png'); }
    .home-frame-2 .home-list .home-cassette-case:nth-child(4) .home-author-icon { background-image: url('../images/author-icon-case-4.png'); }

    .home-frame-3 .home-list .home-cassette-case:nth-child(1) .home-author-icon { background-image: url('../images/author-icon-new-case-1.png'); }
    .home-frame-3 .home-list .home-cassette-case:nth-child(2) .home-author-icon { background-image: url('../images/author-icon-new-case-2.png'); }
    .home-frame-3 .home-list .home-cassette-case:nth-child(3) .home-author-icon { background-image: url('../images/author-icon-new-case-3.png'); }
    .home-frame-3 .home-list .home-cassette-case:nth-child(4) .home-author-icon { background-image: url('../images/author-icon-new-case-4.png'); }

    /* Update stat icons for mobile using ::before pseudo-elements */
    .home-stat img {
        
    }
    /* .home-stat:nth-of-type(1)::before {
        content: url('../images/volunteer_activism_accent.svg');
        display: inline-block;
        width: 16px; 
        height: 16px;
        margin-right: 2px;
    }
    .home-stat:nth-of-type(2)::before {
        content: url('../images/group_accent.svg');
        display: inline-block;
        width: 16px; 
        height: 16px;
        margin-right: 2px;
    } */

    /* Story Section for Mobile */
    .home-story-section {
        padding: 80px 16px;
        gap: 24px;
        box-sizing: border-box;
    }

    .home-story-head {
        width: auto; /* Full width for mobile */
        gap: 16px; /* Figma: head gap */
    }

    .home-story-head h2 {
        font-size: 28px; /* Figma: style_N5RDG8 */
        /* line-height, letter-spacing, color already set */
    }

    .home-story-head p {
        font-size: 16px; /* Figma: style_FQZMIP */
        /* line-height, letter-spacing, color already set */
    }

    .home-story-list {
        width: auto; /* Full width for mobile */
        gap: 40px; /* Figma: list gap */
        justify-content: space-between; /* Distribute items if they wrap to two lines */
    }

    .home-story-card {
        width: 100%; /* Full width for mobile by default */
        gap: 12px; /* Figma: card gap */
        /* color is already white from desktop */
    }
    .home-story-card a {
        gap: 12px;
    }
    
    /* For mobile, make all story cards full width (override desktop's :nth-child(3) ) */
    .home-story-card:nth-child(3n) {
        width: 100%; 
    }

    .home-story-img {
        height: 201px; /* Figma: Default image height for mobile (e.g. 1971:18970) */
        /* width, background-size, background-position already set */
    }
    
    /* If specific cards have different image heights on mobile, they would need specific rules */
    /* Example for a card that might be taller (like desktop's third card, if it had a mobile equivalent) */
    /* .story-card:nth-child(X) .story-img { height: YYYpx; } */
    .home-story-card:nth-child(3n) .home-story-img {
        height: 208px; /* Figma: node 1971:18990, if this were the equivalent special card */
        /* Or keep it same as others if design is uniform: height: 201px; */
    }

    .home-story-text {
        gap: 4px; /* Figma: text gap */
    }

    .home-story-title-small {
        font-size: 14px; /* Figma: style_ODYL37 */
        /* font-weight, line-height, letter-spacing, margin already set */
    }

    .home-story-quote {
        gap: 4px; /* Figma: quote gap */
        /* align-items already set */
    }

    .home-quote-mark {
        font-size: 24px; /* Figma: style_9BACS3 */
        /* font-weight, line-height, letter-spacing, color already set */
    }

    .home-quote-text {
        font-size: 16px; /* Figma: style_YV1D3J */
        /* font-weight, line-height, letter-spacing, margin, flex-grow already set */
    }
    
    /* Override for the third card's quote text if it was different on mobile */
    .home-story-card:nth-child(3n) .home-quote-text {
        font-size: 16px; /* Keep consistent with other mobile quotes, or adjust if Figma differs */
    }

    .home-button.home-story-button {
        width: 100%; /* Full width for mobile */
        max-width: 320px;
        height: 48px; /* Figma: button height for mobile */
        box-sizing: border-box;
        /* background, border, color already set */
    }

    /* Column Section for Mobile */
    .home-column-section {
        padding: 80px 16px 0; /* Figma: section padding */
        gap: 24px; /* Figma: section gap */
        box-sizing: border-box;
    }

    .home-column-head {
        width: 100%; /* Full width for mobile */
        gap: 16px; /* Figma: head gap */
        text-align: left;
        /* text-align already center from desktop */
    }

    .home-column-head h2 {
        font-size: 28px; /* Figma: style_4TQ8W3 */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-column-head p {
        font-size: 16px; /* Figma: style_J8OXXF */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-column-list-wrapper {
        width: 100%; /* Full width for mobile */
        gap: 24px; /* Figma: list wrapper gap */
    }

    .home-column-list {
        gap: 16px; /* Figma: list gap (between rows of cards) */
        justify-content: space-between; /* Distribute items if they wrap to two lines */
        /* width 100% from wrapper, position relative already set */
    }

    .home-column-card {
        width: 100%; /* Two cards per row with 16px gap */
        padding: 0 0 12px; /* Figma: cassette_column padding for mobile (bottom only, top/sides from image) */
        /* gap, background-color, box-sizing already set */
    }
    
    /* Hide the pointing hand card on mobile */
    .home-column-card-large {
        display: none;
    }

    .home-column-img {
        /* width, padding-top (aspect ratio), position, background-size, background-position already set */
         padding-top: 0; /* Override aspect ratio if fixed height is given */
    }

    /* Image URLs are set per-item, no change here */

    .home-column-text-content {
        gap: 8px; /* Figma: text content gap */
        padding: 0 12px; /* Add horizontal padding for text content that was part of the card padding */
    }

    .home-column-date {
        font-size: 12px; /* Figma: style_694AUU */
        /* font-weight, line-height, letter-spacing, color already set */
    }

    .home-column-tags {
        gap: 4px; /* Figma: tags gap */
    }

    .home-tag.home-column-tag,
    .home-tag.home-column-tag-alt {
        font-size: 12px; /* Figma: style_694AUU (text style for tags) */
        /* background-color, color, font-weight, line-height, padding, border-radius already set */
    }

    .home-column-title {
        font-size: 16px; /* Figma: style_D39NPB */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-column-subtitle {
        font-size: 12px; /* Figma: style_T69WGI */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-button.home-column-button {
        width: 100%; /* Full width for mobile */
        max-width: 320px;
        height: 48px; /* Figma: button height for mobile */
        box-sizing: border-box;
        /* background, border, color already set */
    }

    .home-column-bottom-tags {
        width: 100%; /* Full width for mobile */
        padding: 24px 16px; /* Figma: tags padding */
        gap: 8px; /* Figma: tags gap */
        /* background-color, box-sizing already set */
    }

    .home-column-bottom-tags .home-tag {
        font-size: 14px; /* Figma: style_DO1PIT */
        /* background-color, border, color, font-family, font-weight, line-height, padding already set */
    }

    /* About Section for Mobile */
    .home-about-section {
        padding: 80px 16px; /* Figma: section padding */
        gap: 24px; /* Figma: section gap */
        box-sizing: border-box;
    }

    .home-about-row {
        flex-direction: column; /* Stack image and content vertically */
        width: 100%; /* Full width for mobile */
        gap: 24px; /* Figma: gap between image and content block */
    }

    .home-about-img {
        width: 100%; /* Full width for mobile */
        height: 223px; /* Figma: img height */
        background-size: cover; /* Ensure image covers the area */
        background-position: center;
        /* order: 1; */ /* If you want image below text, set text to order: 2 or vice-versa */
        display: none;
    }
    .home-about-content > .home-about-img {
        display: block;
    }

    .home-about-content {
        width: 100%; /* Full width for mobile */
        gap: 24px; /* Figma: content gap */
        /* order: 2; */ /* To place below image if image is order:1 */
        align-items: flex-start; /* Align content to the start */
    }

    .home-about-head {
        /* No specific changes, already part of about-content flex */
    }

    .home-about-head h2 {
        font-size: 28px; /* Figma: style_KPAX0P */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-about-content p {
        font-size: 16px; /* Figma: style_XZYL6C */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-button.home-about-button {
        width: 100%; /* Full width for mobile */
        max-width: 320px;
        height: 48px; /* Figma: button height for mobile */
        box-sizing: border-box;
        margin: auto;
        /* background, border, color already set */
    }

    /* Calendar Section for Mobile */
    .home-calendar-section {
        padding: 80px 16px; /* Figma: section padding */
        gap: 24px; /* Figma: section gap */
        position: relative; /* Keep for potential future elements, though pointing hand is hidden */
        box-sizing: border-box;
    }

    .home-calendar-head {
        width: 100%; /* Full width for mobile */
        gap: 16px; /* Figma: head gap (assuming from other sections, not explicitly defined) */
    }

    .home-calendar-head h2 {
        font-size: 28px; /* Figma: style_L4V7QS */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-calendar-list {
        width: 100%; /* Full width for mobile */
        gap: 16px; /* Figma: list gap */
        /* flex-wrap, justify-content already set for wrapping if needed, though now single column */
    }

    .home-calendar-list .home-calendar-item {
        width: 100%; /* Full width for mobile, single column */
        gap: 12px; /* Figma: item gap */
        /* background-color, box-sizing already set */
    }

    .home-calendar-item.home-highlight {
        /* background-color already set */
    }

    .home-calendar-date {
        gap: 4px; /* Figma: date parts gap */
        width: 64px; /* Allow date to take its content width */
        align-items: baseline; /* Align text nicely */
    }

    .home-calendar-date .month {
        font-size: 20px; /* Figma: style_7PMXBK */
        /* font-weight, line-height, color already set */
        letter-spacing: -2px;
    }
    .home-calendar-date .month_slash {
        left: 10px;
    }

    .home-calendar-date .day {
        font-size: 32px; /* Figma: style_KP16PL */
        /* font-weight, line-height, color already set */
    }

    .home-tag.home-calendar-tag {
        font-size: 12px; /* Figma: style_0K76IP */
        margin-top: 0; /* Remove top margin, date is now horizontal */
        margin-left: 8px; /* Add some space if tag is next to date */
        /* background-color, color, font-weight, line-height, padding, border-radius already set */
    }

    .home-calendar-details {
        gap: 8px; /* Figma: details gap */
        /* flex-grow already set */
    }

    .home-calendar-details .title {
        font-size: 16px; /* Figma: style_763LBJ */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-calendar-item.home-highlight .home-calendar-details .title {
        /* color already set */
    }

    .home-calendar-details .info {
        gap: 4px; /* Figma: info gap */
        /* align-items already set */
    }

    .home-calendar-details .info img {
        width: 20px; /* Adjust icon size for mobile if needed, Figma shows 24px but can be smaller */
        height: 20px;
    }

    .home-calendar-details .info span {
        font-size: 14px; /* Figma: style_0L83Y4 */
        /* font-weight, line-height, letter-spacing, color already set */
    }

    .home-button.home-calendar-button {
        width: 100%; /* Full width for mobile */
        max-width: 320px;
        height: 48px; /* Figma: button height for mobile */
        box-sizing: border-box;
        /* background, border, color already set */
    }

    .home-calendar-pointing-hand {
        display: none; /* Hide pointing hand on mobile */
    }

    /* Q&A Section for Mobile */
    .home-qa-section {
        padding: 80px 16px; /* Figma: section padding */
        gap: 24px; /* Figma: section gap */
        background-image: none; /* Remove background image for mobile */
        overflow: visible; /* Reset overflow if it was set for illustrations */
        box-sizing: border-box;
    }

    .home-qa-head {
        width: 100%; /* Full width for mobile */
        gap: 16px; /* Figma: head gap (assuming, not explicit) */
        /* z-index not needed as illustrations are hidden */
    }

    .home-qa-head h2 {
        font-size: 28px; /* Figma: style_IMNYWB */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-qa-contents {
        width: 100%;
    }

    .home-qa-list {
        width: 100%; /* Full width for mobile */
        gap: 24px; /* Figma: list gap */
        /* z-index not needed */
    }

    .home-qa-item {
        gap: 12px; /* Figma: qaItem gap */
        /* width 100% already from .qa-list */
    }

    .home-qa-bottom {
        width: 100%;
    }

    .home-qa-question,
    .home-qa-answer {
        gap: 12px; /* Figma: q/a inner gap */
        /* align-items already set */
    }

    .home-qa-icon {
        width: 40px; /* Figma: icon dimensions */
        height: 40px; /* Figma: icon dimensions */
        font-size: 20px; /* Figma: style_PVND5C */
        /* border-radius, font-family, font-weight, line-height, letter-spacing, flex-shrink already set */
    }

    .home-qa-question p {
        font-size: 14px; /* Figma: style_581ATO */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-qa-answer p {
        font-size: 14px; /* Figma: style_CY2FMV */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-qa-divider {
        width: calc(100% - 52px); /* Adjust to new icon size and gap: 100% - (40px icon + 12px gap) */
        margin-left: 52px; /* Align with text: 40px icon + 12px gap */
        /* height, background-color already set */
    }

    .home-button.home-qa-button {
        width: 100%; /* Full width for mobile */
        max-width: 320px;
        height: 48px; /* Figma: button height */
        box-sizing: border-box;
        /* background, border, color already set */
    }

    .home-qa-illustration-1,
    .home-qa-illustration-2 {
        display: none; /* Hide illustrations on mobile */
    }

    /* News Section for Mobile */
    .home-news-section {
        padding: 80px 16px; /* Figma: section padding */
        box-sizing: border-box;
        /* justify-content already center */
    }

    .home-news-container {
        flex-direction: column; /* Stack head and list vertically */
        width: 100%; /* Full width for mobile */
        gap: 24px; /* Figma: section gap (applied between head and list here) */
    }

    .home-news-head {
        width: 100%; /* Full width for mobile */
        /* flex-shrink already 0, white-space nowrap might not be needed if text wraps */
    }

    .home-news-head h2 {
        font-size: 28px; /* Figma: style_8SIQFB */
        white-space: normal; /* Allow title to wrap on mobile */
        /* line-height, letter-spacing, color, margin already set */
    }

    .home-news-list {
        width: 100%; /* Full width for mobile */
        gap: 24px; /* Figma: list gap (between items and button) */
        align-items: center; /* Center the button */
    }

    .home-news-item {
        flex-direction: column; /* Stack date and title vertically */
        gap: 8px; /* Figma: item gap (between date and title) */
        align-items: flex-start; /* Align date and title to the start */
        /* width 100% already from .news-list */
    }

    .home-news-date {
        font-size: 14px; /* Figma: style_O2Q6ZK */
        /* font-weight, line-height, letter-spacing, color, white-space already set */
    }

    .home-news-title {
        font-size: 14px; /* Figma: style_XSFE9S */
        /* font-weight, line-height, letter-spacing, color, margin already set */
    }

    .home-button.home-news-button {
        width: 100%; /* Full width for mobile */
        max-width: 320px; /* Max width from Figma button instance */
        height: 48px; /* Figma: button height */
        box-sizing: border-box;
        align-self: center; /* Ensure button is centered in the list flex container */
        /* background, border, color already set */
    }

    .home-sns-head {
        width: 100%;
        gap: 16px;
    }
    .home-sns-list {
        width: 100%;
        flex-wrap: wrap;
        gap: 12px;
    }
    .home-sns-section {
        padding: 0 16px 80px;
    }
    .home-author-icon > img {
        width: 16px;
        height: 16px;
    }
} 


/* =====================
ヘッダー（PC）
===================== */
.c4-header {
width: 100%;
background: #fff;
font-family: 'YuGothic', sans-serif;
box-sizing: border-box;
}
.c4-header.pc {
display: block;
}
.c4-header.sp {
display: none;
}
.c4-header-top {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 6px 56px;
background: #1D8B9C;
color: #fff;
font-size: 14px;
gap: 16px;
line-height: 20px;
}
.c4-header-login {
color: #fff;
text-decoration: none;
margin-right: 24px;
font-weight: 500;
}
.c4-header-login:hover {
color: #fff;
text-decoration: underline;
}
.c4-header-lang {
display: flex;
align-items: center;
gap: 4px;
color: #fff;
}
.c4-header-lang-icon {
width: 12px;
height: 12px;
}
.c4-header-lang-arrow {
width: 16px;
height: 16px;
}
.c4-header-main {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 56px;
border-bottom: 1px solid #E7EBEE;
}
.c4-header-logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.c4-header-logo-img {
height: 43px;
}
.c4-header-logo-img2 {
height: 18px;
}
.c4-header-nav {
display: flex;
gap: 8px;
}
.c4-header-nav-right {
display: flex;
gap: 24px;
}
.c4-header-nav-item {
color: #212529;
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 16px 16px;
transition: color 0.2s;
line-height: 140%;
}
.c4-header-nav-item:hover {
color: #1D8B9C;
}
.c4-header-nav-buttons {
    display: flex;
    gap: 8px;
}
.c4-header-donate {
background: #FF6701;
color: #fff;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
padding: 14px 24px;
text-decoration: none;
transition: background 0.2s;
line-height: 140%;
}
.c4-header-kihon {
    background: #fff;
    color: #212529;
    border: 1px solid #212529;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 14px 24px;
    text-decoration: none;
    transition: background 0.2s;
    line-height: 140%;
}
.c4-header-kihon:hover {
    border: 1px solid #1D8B9C;
}
.c4-header-donate:hover {
background: rgba(204, 73, 2, 1);
color: #fff;
}

/* =====================
    ヘッダー（SP）
    ===================== */
@media (max-width: 767px) {
.c4-header.pc {
    display: none;
}
.c4-header.sp {
    display: block;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border-top: 2px solid #1d8b9c;
}
.c4-header-main {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #E7EBEE;
}
.c4-header-logo {
    margin-right: auto;
}
.c4-header-logo-img {
    height: 43px;
}
.c4-header-logo-img2 {
    height: 14px;
}
.c4-header-menu-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.c4-header-menu-btn img {
    width: 28px;
    height: 28px;
}

}

/* =====================
    パンくずリスト（PC）
    ===================== */
.c4-breadcrumb.pc {
width: 100%;
padding: 12px 0;
margin: auto;
max-width: 1100px;
width: 100%;
box-sizing: border-box;
background: #fff;
}
.c4-breadcrumb ol {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.c4-breadcrumb ol li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.c4-breadcrumb ol li:last-child {
    flex-shrink: 1;
}
.c4-breadcrumb-link {
color: #1D8B9C;
text-decoration: none;
font-family: 'YuGothic', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.4em;
}
.c4-breadcrumb-chevron {
width: 4px;
height: 16px;
vertical-align: middle;
}
.c4-breadcrumb-current {
color: #212529;
font-family: 'YuGothic', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.4em;
letter-spacing: 0.04em;
}

@media (max-width: 767px) {
    .c4-breadcrumb.pc {
        padding: 6px 16px;
    }
}

/* =====================
    フッター（PC）
    ===================== */
.c4-footer {
width: 100%;
background: #1D8B9C;
color: #fff;
font-family: 'YuGothic', sans-serif;
box-sizing: border-box;
}
.c4-footer.pc {
display: block;
}
.c4-footer.sp {
display: none;
}
.c4-footer-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 56px 16px;
max-width: 1100px;
width: 100%;
margin: auto;
gap: 16px;
}
.c4-footer-logo-area {
display: flex;
flex-direction: column;
gap: 14px;
width: 240px;
}
.c4-footer-logo {
display: flex;
flex-direction: column;
color: white;
gap: 12px;
text-decoration: none;
margin-bottom: 18px;
}
.c4-footer-logo-img {
width: 190px;
}
.c4-footer-sns {
display: flex;
justify-content: flex-start;
gap: 14px;
}
.c4-footer-sns-item {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
text-decoration: none;
}
.c4-footer-sns-item img {
width: 24px;
height: 24px;
}
.c4-footer-sitemap {
display: flex;
justify-content: flex-end;
gap: 32px;
flex-grow: 1;
}
.c4-footer-column {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 200px;
flex-basis: 200px;
}
.c4-footer-nav-item {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 16px;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
transition: opacity 0.2s;
}
.c4-footer-nav-item:hover {
    color: #fff;
    text-decoration: underline;
}
.c4-footer-nav-item:hover img {
    opacity: 1;
}
.c4-footer-nav-arrow {
width: 4px;
height: 16px;
}
.c4-footer-btn-area {
display: flex;
flex-direction: column;
gap: 12px;
}
.c4-footer-donate {
background: #FF6701;
color: #fff;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
padding: 14px 32px;
text-decoration: none;
text-align: center;
width: 190px;
box-sizing: border-box;
transition: background 0.2s;
}
.c4-footer-donate:hover {
background: rgba(204, 73, 2, 1);
color: #fff;
}
.c4-footer-white-button {
background: #fff;
color: #212529;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
padding: 14px 16px;
text-decoration: none;
text-align: center;
width: 190px;
box-sizing: border-box;
transition: background 0.2s;
}
.c4-footer-white-button:hover {
background: rgba(218, 238, 238, 1);
color: #1D8B9C;
}
.c4-footer-login {
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
    width: 190px;
    box-sizing: border-box;
}
.c4-footer-login:hover {
    color: white;
    text-decoration: underline;
}
.c4-footer-foot-area {
    background: #1E7180;
    width: 100%;
}
.c4-footer-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
margin: auto;
max-width: 1100px;
width: 100%;
gap: 16px;
padding: 0 16px;
}
.c4-footer-links {
display: flex;
align-items: center;
gap: 16px;
}
.c4-footer-lang {
display: flex;
align-items: center;
gap: 4px;
color: #fff;
}
.c4-footer-lang-icon {
width: 20px;
height: 20px;
}
.c4-footer-lang-arrow {
width: 7px;
height: 16px;
}
.c4-footer-link {
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 500;
line-height: 1.4em;
transition: opacity 0.2s;
}
.c4-footer-link:hover {
opacity: 0.8;
}
.c4-footer-copyright {
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.4em;
letter-spacing: 0.04em;
margin: 0;
}

/* =====================
    フッター（SP）
    ===================== */
@media (max-width: 767px) {
.c4-footer.pc {
    display: none;
}
.c4-footer.sp {
    display: block;
}
.c4-footer-head {
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    gap: 24px;
}
.c4-footer-logo-area {
    align-items: center;
    width: 240px;
    gap: 16px;
}
.c4-footer-sitemap {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 12px;
}
.c4-footer-column {
    width: 100%;
    gap: 4px;
}
.c4-footer-nav-item {
    padding: 8px 0;
}
.c4-footer-btn-area {
    width: 100%;
    gap: 8px;
}
.c4-footer-donate,
.c4-footer-white-button {
    width: 100%;
}
.c4-footer-foot {
    flex-direction: column;
    padding: 12px 16px;
    gap: 16px;
    background: #1E7180;
}
.c4-footer-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.c4-footer-copyright {
    text-align: center;
}
.c4-footer-back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #CBD3D6;
    gap: 4px;
    background: #fff;
    color: #212529;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.c4-footer-back-to-top-icon {
    width: 7px;
    height: 16px;
}
.c4-footer-login {
    width: 100%;
    box-sizing: border-box;
}
}

/* =====================
    ヘッダー言語プルダウン
    ===================== */
.c4-header-lang {
position: relative;
cursor: pointer;
}
.c4-header-lang-dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
color: #212529;
border: 1px solid #CBD3D6;
border-radius: 4px;
min-width: 56px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin: 4px 0 0 0;
padding: 0;
z-index: 1000;
list-style: none;
}
.c4-header-lang-dropdown li {
padding: 8px 16px;
font-size: 14px;
font-family: 'YuGothic', sans-serif;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.c4-header-lang-dropdown li:hover,
.c4-header-lang-dropdown li.selected {
background: #EEF7F7;
color: #1D8B9C;
}

/* =====================
    フッター言語プルダウン
    ===================== */
.c4-footer-lang {
position: relative;
cursor: pointer;
}
.c4-footer-lang-dropdown {
position: absolute;
bottom: 100%;
left: 0;
background: #fff;
color: #212529;
border: 1px solid #CBD3D6;
border-radius: 4px;
min-width: 56px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin: 0 0 4px 0;
padding: 0;
z-index: 1000;
list-style: none;
}
.c4-footer-lang-dropdown li {
padding: 8px 16px;
font-size: 14px;
font-family: 'YuGothic', sans-serif;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.c4-footer-lang-dropdown li:hover,
.c4-footer-lang-dropdown li.selected {
background: #EEF7F7;
color: #1D8B9C;
}


/* =====================
ログインユーザー用ヘッダー
===================== */
.c4-header-user-info {
display: flex;
align-items: center;
gap: 16px;
}
.c4-header-profile {
display: flex;
align-items: center;
gap: 8px;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: opacity 0.2s;
}
.c4-header-profile:hover {
opacity: 0.8;
color: #fff;
text-decoration: none;
}
.c4-header-profile img {
width: 32px;
height: 32px;
border-radius: 50%;
}
.c4-header-logout {
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 6px 12px;
border: 1px solid #fff;
border-radius: 4px;
transition: all 0.2s;
}
.c4-header-logout:hover {
background: #fff;
color: #1D8B9C;
text-decoration: none;
}
.c4-header-sp-user {
display: flex;
align-items: center;
}
.c4-header-sp-user .c4-header-profile {
color: #212529;
font-size: 12px;
}
.c4-header-sp-user .c4-header-profile:hover {
color: #1D8B9C;
}
.c4-header-sp-user .c4-header-profile img {
width: 24px;
height: 24px;
}

.kv-new {
    position: relative;
    width: 100%;
    height: 664px;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.kv-new-text-wrapper {
    position: absolute;
    left: 56px;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kv-new-heading {
    font-family: 'Noto Sans JP', 'A-OTF A1Gothic Std', 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #373D42;
    margin: 0;
    white-space: nowrap;
}

.kv-new-heading-accent {
    color: #1D8B9C;
}

.kv-heading-break {
    display: none;
}

.kv-new-description {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #515F69;
}

.kv-new-description p {
    margin: 0;
    white-space: pre-wrap;
}

.kv-new-cards {
    position: absolute;
    left: 56px;
    top: 317px;
    display: flex;
    gap: 12px;
    width: 1488px;
    height: 347px;
}

.kv-new-card {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
}

.kv-new-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kv-new-card-large {
    flex: 1 1 0;
    min-width: 0;
    height: 347px;
}

.kv-new-card-small {
    width: 200px;
    height: 347px;
    flex-shrink: 0;
}

.kv-new-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 69.885%, rgba(0,0,0,0.4) 94.524%);
}

.kv-new-card-tag {
    background-color: #DAEEEE;
    border: none;
    color: #1D8B9C;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 1px;
    width: fit-content;
}

.kv-new-card-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kv-carousel {
    position: absolute;
    left: 56px;
    right: 56px;
    top: 317px;
    display: flex;
    gap: 12px;
    height: 347px;
}

.kv-carousel-item {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    flex: 1 0;
    height: 347px;
    transition: all 0.5s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.kv-carousel-item.active {
    flex: 2 0 200px;
    max-width: 640px;
}

.kv-carousel-item.inactive {
    flex: 1 1;
}

.kv-carousel-item:hover {
    text-decoration: none;
}

.kv-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kv-carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 69.885%, rgba(0,0,0,0.4) 94.524%);
    opacity: 0;
    transition: opacity 0.2s ease 0s;
    pointer-events: none;
}

.kv-carousel-item.active .kv-carousel-overlay {
    opacity: 1;
    transition: opacity 0.3s ease 0.3s;
}

.kv-carousel-tag {
    background-color: #DAEEEE;
    border: none;
    color: #1D8B9C;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 1px;
    width: fit-content;
}

.kv-carousel-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
}


/* スマートフォン対応 */
@media (max-width: 1100px) {
    .kv-new {
        height: auto;
        padding: 32px 16px;
    }
    
    .kv-new-text-wrapper {
        position: static;
        left: auto;
        top: auto;
        margin-bottom: 24px;
    }
    
    .kv-new-heading {
        font-size: 28px;
        white-space: normal;
    }

    .kv-heading-break {
        display: block;
    }

    .kv-description-break {
        display: none;
    }
    
    .kv-new-description {
        font-size: 16px;
    }
    
    .kv-new-cards {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 16px;
    }
    
    .kv-new-card-large,
    .kv-new-card-small {
        width: 100%;
        height: 200px;
        flex: none;
    }
    .kv-carousel {
        display: none;
    }
}

.home-sns-section-new {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
    padding: 0px;
    gap: 56px;
    width: 100%;
    background-color: #FFFFFF;
}

.home-sns-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 60px 140px;
    max-width: 1100px;
    width: 100%;
    background-color: #1D8B9C;
    box-sizing: border-box;
}

.home-sns-head-new {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.home-sns-head-new h2 {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    margin: 0;
}

.home-sns-list-new {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.home-sns-item-new {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.home-sns-item-new:hover {
    opacity: 0.8;
}

.home-sns-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.home-sns-item-new span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    white-space: nowrap;
}

.home-sns-item-new:first-child span {
    font-size: 16px;
}

.home-mailmagazine {
    border: 1px solid #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

.home-mailmagazine-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 16px;
}

.home-mailmagazine-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-mail-icon {
    width: 37.5px;
    height: 27px;
    flex-shrink: 0;
}

.home-mailmagazine-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

.home-mailmagazine-text p {
    margin: 0;
    white-space: nowrap;
}

.home-mailmagazine-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background-color: #FFFFFF;
    color: #212529;
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
    width: 167px;
    box-sizing: border-box;
}

.home-mailmagazine-button:hover {
    background-color: #EEF7F7;
    color: #1D8B9C;
}

/* スマートフォン対応 */
@media (max-width: 767px) {
    .home-sns-section-new {
        margin-top: 80px;
        padding: 0 12px;
    }
    .home-sns-container {
        padding: 40px 20px;
        width: 100%;
    }
    
    .home-sns-head-new h2 {
        font-size: 24px;
    }
    
    .home-sns-list-new {
        gap: 24px;
    }
    
    .home-mailmagazine-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }
    
    .home-mailmagazine-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .home-mailmagazine-text p {
        white-space: normal;
    }
    
    .home-mailmagazine-button {
        width: 100%;
        padding: 14px 16px;
    }
}

/* =====================
   CALL4が目指すものセクション（Figmaデザイン）
   ===================== */
.home-about-mission-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0px;
    background-color: #FFF0D3;
    width: 100%;
}

.home-about-mission-content {
    position: relative;
    max-width: 1100px;
    width: 100%;
    height: 1319px;
}

.home-about-mission-head {
    width: 100%;
}

.home-about-mission-subtitle {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FF6701;
    text-align: center;
    margin: 0;
}

.home-about-mission-title {
    font-family: 'Noto Sans JP', 'A-OTF A1Gothic Std', 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: #212529;
    margin-top: 24px;
    white-space: nowrap;
}

.home-about-mission-image-wrapper {
    margin-top: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.home-about-mission-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 951px;
    height: 465px;
    overflow: hidden;
}

.home-about-mission-image img {
    width: auto;
    height: 100%;
}

.home-about-mission-text-box {
    position: absolute;
    top: 393px;
    left: 298px;
    background-color: #FFFFFF;
    padding: 56px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 690px;
    box-sizing: border-box;
}

.home-about-mission-text-box p {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: #212529;
    margin: 0;
}

.home-about-mission-button {
    padding: 12px 16px;
    border: 1px solid #212529;
    width: 100%;
    max-width: 320px;
    height: 48px;
    align-self: center;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 0.2s;
    text-align: center;
}

.home-about-mission-button:hover {
    background-color: #EEF7F7;
    border-color: #1D8B9C;
}

.home-about-mission-button:hover span {
    color: #1D8B9C;
}

.home-chevron-icon {
    width: 24px;
    height: 24px;
}

.home-about-mission-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
}

/* スマートフォン対応 */
@media (max-width: 1100px) {
    .home-about-mission-section {
        padding: 120px 16px;
    }
    
    .home-about-mission-content {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .home-about-mission-head {
        position: static;
        width: 100%;
        margin-bottom: 24px;
    }
    
    .home-about-mission-subtitle {
        font-size: 28px;
    }
    
    .home-about-mission-title {
        position: static;
        transform: none;
        font-size: 48px;
        white-space: normal;
        margin-bottom: 24px;
    }
    
    .home-about-mission-image {
        position: static;
        width: calc(100% + 32px);
        height: 197px;
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: 0;
    }
    
    .home-about-mission-image img {
        width: 100%;
        height: 100%;
        margin-top: 0;
        object-fit: cover;
    }
    
    .home-about-mission-text-box {
        position: static;
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
        padding: 24px 16px;
        gap: 24px;
    }
    
    .home-about-mission-text-box p {
        font-size: 16px;
    }
    
    .home-about-mission-button {
        width: 100%;
        max-width: 325px;
    }
    .home-about-mission-image-wrapper {
        position: relative;
        display: block;
    }
}

/* =====================
   バナーセクション（お問い合わせ・訴訟掲載）
   ===================== */
.home-banners-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 16px;
    margin: auto;
    max-width: 1100px;
    width: 100%;
    gap: 24px;
    box-sizing: border-box;
}

.home-banner-box {
    display: flex;
    padding: 32px 0;
    justify-content: center;
    align-items: center;
    gap: 59px;
    align-self: stretch;
    background: var(--Teal-Teal100, #DAEEEE);
}

.home-banner-content-wrapper {
    display: flex;
    width: 690px;
    align-items: center;
    gap: 40px;
}

.home-banner-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
}

.home-banner-icon-wrapper {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.home-banner-icon {
    width: 100%;
    height: 100%;
}

.home-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.home-banner-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: #000000;
    margin: 0;
}

.home-banner-description {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.home-banner-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    width: 148px;
    box-sizing: border-box;
    margin-right: 59px;
    transition: all 0.2s;
}

.home-banner-button-primary {
    background-color: #1D8B9C;
    color: #FFFFFF;
    border: none;
}

.home-banner-button-primary:hover {
    background-color: #156D7A;
}

.home-banner-button-secondary {
    background-color: transparent;
    color: #212529;
    border: 1px solid #212529;
}

.home-banner-button-secondary:hover {
    border-color: #1D8B9C;
    color: #1D8B9C;
}

.home-monthly-supporter-banner {
    width: 100%;
}

.home-monthly-supporter-banner a {
    display: block;
    width: 100%;
}

.home-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

.home-banner-image-sp {
    display: none;
}

/* スマートフォン対応 */
@media (max-width: 767px) {
    .home-banners-section {
        padding: 80px 16px;
        gap: 16px;
    }
    
    .home-banner-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .home-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0;
    }
    
    .home-banner-text {
        width: 100%;
    }
    
    .home-banner-button {
        width: 100%;
        margin-right: 0;
    }
    
    .home-banner-image-pc {
        display: none;
    }
    
    .home-banner-image-sp {
        display: block;
    }

    .home-banner-content-wrapper {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }
}
/* =====================
   ストーリーヘッドセクション
   ===================== */
.home-story-head-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 16px;
    gap: 24px;
    width: 100%;
    background-color: #FFFFFF;
}

.home-story-head-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
    width: 100%;
}

.home-story-head-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: #373D42;
    margin: 0;
    white-space: nowrap;
}

.home-story-head-description {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #515F69;
    margin: 0;
}

.home-story-head-description p {
    margin: 0;
}

/* スマートフォン対応 */
@media (max-width: 767px) {
    .home-story-head-section {
        padding: 48px 16px;
        gap: 16px;
    }
    
    .home-story-head-title {
        font-size: 28px;
        white-space: normal;
    }
    
    .home-story-head-description {
        font-size: 14px;
    }
}

/* =====================
   検索結果なしセクション
   ===================== */
   .home-no-results-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 72px 0;
    background-color: #F4F6F7;
    width: 100%;
    max-width: 1100px;
}

.home-no-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.home-no-results-message {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
    text-align: center;
}

.home-no-results-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #212529;
    background-color: transparent;
    width: 325px;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 0.2s;
}

.home-no-results-button:hover {
    background-color: #FFFFFF;
    border-color: #1D8B9C;
}

.home-no-results-button:hover span {
    color: #1D8B9C;
}

.home-no-results-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
}

/* スマートフォン対応 */
@media (max-width: 767px) {
    .home-no-results-section {
        padding: 72px 24px;
    }
    
    .home-no-results-container {
        max-width: 100%;
        width: 100%;
    }
    
    .home-no-results-message {
        width: 100%;
    }
    
    .home-no-results-button {
        width: 100%;
    }
}

.story_title {
    margin-bottom: 24px;
}

/* =====================
   お問い合わせページ
   ===================== */

/* タイトル部 */
.contact-head-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 16px;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

.contact-head-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
    width: 100%;
}

.contact-head-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: #373D42;
    margin: 0;
}

.contact-head-description {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-head-description p {
    margin: 0;
}

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

.contact-link:hover {
    color: #156D7A;
}

/* お知らせボックス */
.contact-notice-section {
    display: flex;
    justify-content: center;
    padding: 0 16px 24px;
    width: 100%;
    box-sizing: border-box;
}

.contact-notice-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background-color: #EEF7F7;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
}

.contact-notice-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0 auto;
    max-width: 690px;
    width: 100%;
    text-align: left;
}

.contact-notice-description {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    max-width: 690px;
    margin: 0 auto;
}

.contact-notice-description p {
    margin: 0;
}

/* フォーム部 */
.contact-form-section {
    display: flex;
    justify-content: center;
    padding: 0 16px 0;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

.contact-form-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1100px;
    width: 100%;
}

.contact-form-area {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background-color: #F4F6F7;
    align-items: center;
}

.contact-form-area form {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
}

.contact-form-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 690px;
    width: 100%;
    margin-bottom: 24px;
}

.contact-form-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.contact-form-subtitle {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 690px;
    width: 100%;
}

.contact-form-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.contact-form-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-form-label-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-form-required {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #E53E68;
}

.contact-form-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.contact-form-input {
    width: 100%;
    padding: 6px 12px;
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    background-color: #FFFFFF;
    border: 1px solid #CBD3D6;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.contact-form-input::placeholder {
    color: #A6B4BA;
}

.contact-form-input:focus {
    outline: none;
    border-color: #1D8B9C;
}

.contact-form-input.invalid {
    border-color: #E53E68;
}

.contact-form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 8px 16px;
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    background-color: #FFFFFF;
    border: 1px solid #CBD3D6;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s;
}

.contact-form-textarea::placeholder {
    color: #A6B4BA;
}

.contact-form-textarea:focus {
    outline: none;
    border-color: #1D8B9C;
}

.contact-form-textarea.invalid {
    border-color: #E53E68;
}

.contact-form-error {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #E53E68;
    font-style: normal;
    line-height: 170%;
    letter-spacing: 0.56px;
    display: none;
}

.contact-form-error.visible {
    display: block;
}

/* ボタンエリア */
.contact-button-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
}

.contact-privacy-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.contact-privacy-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    max-width: 690px;
    width: 100%;
    margin: 0;
}

.contact-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.contact-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.contact-checkbox-input {
    display: none;
}

.contact-checkbox-box {
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border: 2px solid #CBD3D6;
    border-radius: 2px;
    position: relative;
    transition: all 0.2s;
}

.contact-checkbox-input:checked + .contact-checkbox-box {
    background-color: #1D8B9C;
    border-color: #1D8B9C;
}

.contact-checkbox-input:checked + .contact-checkbox-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.contact-checkbox-label {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-submit-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #1D8B9C;
    border: none;
    width: 400px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-submit-button:hover {
    background-color: #156D7A;
}

.contact-submit-button:disabled {
    background-color: #CBD3D6;
    cursor: not-allowed;
}

.contact-submit-icon-left {
    width: 24px;
    height: 24px;
}

.contact-submit-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

.contact-submit-icon-right {
    width: 24px;
    height: 24px;
}

/* スマートフォン対応 */
@media (max-width: 767px) {
    .contact-head-section {
        padding: 32px 16px;
    }

    .contact-head-wrapper {
        gap: 16px;
    }

    .contact-head-title {
        font-size: 24px;
        line-height: 1.4;
    }

    .contact-head-description {
        font-size: 14px;
    }

    .contact-notice-section {
        padding: 0 16px 32px;
    }

    .contact-notice-box {
        padding: 24px 16px;
    }

    .contact-form-section {
        padding: 0 0 0;
    }

    .contact-form-container {
        gap: 32px;
    }

    .contact-form-area {
        padding: 32px 16px;
    }

    .contact-form-title {
        font-size: 24px;
    }

    .contact-privacy-text {
        font-size: 12px;
    }

    .contact-submit-button {
        width: 100%;
    }

    .contact-submit-text {
        font-size: 16px;
    }
}

/* =====================
   お問い合わせ確認画面
   ===================== */
.contact-confirm-section {
    display: flex;
    justify-content: center;
    padding: 0 16px 80px;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

.contact-confirm-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1100px;
    width: 100%;
}

.contact-confirm-area {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background-color: #F4F6F7;
    align-items: center;
}

.contact-confirm-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 690px;
    width: 100%;
    margin-bottom: 24px;
}

.contact-confirm-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.contact-confirm-subtitle {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.contact-confirm-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 690px;
    width: 100%;
}

.contact-confirm-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid #CBD3D6;
}

.contact-confirm-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-confirm-label {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-confirm-value {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 確認画面ボタンエリア */
.contact-confirm-buttons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.contact-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: transparent;
    border: 1px solid #212529;
    width: 400px;
    cursor: pointer;
    transition: all 0.2s;
}

.contact-back-button:hover {
    border-color: #1D8B9C;
    color: #1D8B9C;
}

.contact-back-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-back-button:hover span {
    color: #1D8B9C;
}

@media (max-width: 767px) {
    .contact-confirm-section {
    }

    .contact-confirm-area {
        padding: 32px 16px;
    }

    .contact-confirm-title {
        font-size: 24px;
    }

    .contact-back-button {
        width: 100%;
    }

    .contact-submit-button {
        width: 100%;
    }
}

/* =====================
   お問い合わせ完了画面
   ===================== */
.contact-complete-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 16px 120px;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

.contact-complete-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    width: 100%;
}

.contact-complete-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
    max-width: 690px;
    width: 100%;
}

.contact-complete-icon {
    width: 80px;
    height: 80px;
}

.contact-complete-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.contact-complete-message {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.contact-complete-message p {
    margin: 0;
}

.contact-home-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background-color: transparent;
    border: 1px solid #212529;
    width: 325px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.contact-home-button:hover {
    border-color: #1D8B9C;
}

.contact-home-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-home-button:hover span {
    color: #1D8B9C;
}

@media (max-width: 767px) {
    .contact-complete-section {
        padding: 48px 16px 80px;
    }

    .contact-complete-title {
        font-size: 24px;
    }

    .contact-complete-message {
        font-size: 14px;
    }

    .contact-home-button {
        width: 100%;
        max-width: 320px;
    }
}

/* 確認画面 - タイトル部 */
.contact-confirm-head-section {
    padding-bottom: 0;
}

.contact-confirm-head-wrapper {
    align-items: center;
    text-align: center;
    max-width: 690px;
}

.contact-confirm-head-description p {
    margin: 0;
}

/* 確認画面 - テーブル形式レイアウト */
.contact-confirm-content {
    display: flex;
    flex-direction: column;
    max-width: 690px;
    width: 100%;
    margin: 0 auto;
}

.contact-confirm-row {
    display: flex;
    border-bottom: 1px solid #CBD3D6;
}

.contact-confirm-row-last {
    border-bottom: 1px solid #CBD3D6;
}

.contact-confirm-row-label {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    padding: 24px 16px;
    width: 200px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.contact-confirm-row-label-text {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-confirm-row-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px;
    flex: 1;
    min-width: 0;
}

.contact-confirm-row-value span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: #212529;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 確認画面ボタンエリア */
.contact-confirm-buttons {
    display: flex;
    gap: 24px;
    max-width: 690px;
    width: 100%;
    margin: 0 auto;
}

.contact-back-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: transparent;
    border: 1px solid #212529;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s;
}

.contact-back-button:hover {
    border-color: #1D8B9C;
}

.contact-back-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
}

.contact-back-button:hover span {
    color: #1D8B9C;
}

.contact-button-icon-left {
    width: 24px;
    height: 24px;
}

.contact-button-icon-right {
    width: 24px;
    height: 24px;
}

.contact-button-icon-left-placeholder,
.contact-button-icon-right-placeholder {
    width: 24px;
    height: 24px;
}

.contact-send-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #FF6701;
    border: none;
    width: 400px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-send-button:hover {
    background-color: #CC4902;
}

.contact-send-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

/* スマートフォン対応 - 確認画面 */
@media (max-width: 767px) {
    .contact-confirm-head-wrapper {
        text-align: left;
        align-items: flex-start;
    }

    .contact-confirm-row {
        flex-direction: column;
    }

    .contact-confirm-row-label {
        width: 100%;
        padding: 16px 0 8px;
    }

    .contact-confirm-row-value {
        padding: 0 0 16px;
    }

    .contact-confirm-buttons {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .contact-back-button {
        width: 100%;
        justify-content: center;
    }

    .contact-send-button {
        width: 100%;
    }
}

/* =====================================================
   共通スタイル
   ===================================================== */

/* 共通セクション - 中央揃えのコンテナ */
.c4-section {
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
}

/* 共通コンテンツラッパー */
.c4-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* 共通ページタイトル */
.c4-page-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

/* 共通リンクスタイル */
.c4-link {
    color: #1D8B9C;
    text-decoration: underline;
}

.c4-link:hover {
    text-decoration: none;
}

/* 共通ボタンエリア */
.c4-button-area {
    display: flex;
    justify-content: center;
}

/* スマートフォン対応 - 共通スタイル */
@media (max-width: 767px) {
    .c4-page-title {
        font-size: 28px;
    }
}

/* =====================================================
   利用規約・プライバシーポリシー共通スタイル
   ===================================================== */

/* タイトル部 */
.legal-head-section {
    display: flex;
    padding: 80px 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.legal-head-wrapper {
    display: flex;
    width: 1100px;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.legal-head-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
    text-align: center;
}

/* 本文部 */
.legal-content-section {
    display: flex;
    justify-content: center;
    padding: 0;
    background-color: #FFFFFF;
    padding-bottom: 80px;
}

.legal-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 690px;
    width: 100%;
}

.legal-article {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.legal-section-title {
    color: var(--Grey-Grey950, #212529);
    font-family: YuGothic;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 39.2px */
    letter-spacing: 1.12px;
    margin-bottom: 0;
}

.legal-paragraph {
    color: var(--Grey-Grey950, #212529);
    font-family: YuGothic;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 27.2px */
    letter-spacing: 0.64px;
}

.legal-paragraph strong {
    color: var(--Grey-Grey950, #212529);
    font-family: YuGothic;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    letter-spacing: 0.64px;
}
.legal-list-container {
    padding-left: 16px;
}

.legal-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    list-style-position: inside; 
    color: var(--Grey-Grey950, #212529);
    font-family: YuGothic;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 27.2px */
    letter-spacing: 0.64px;
}

ol.legal-list li{
    padding-left: 0;
}
ol.legal-list li .legal-paragraph {
    padding-left: 16px;
    padding-top: 16px;
}

.legal-list li {
    color: var(--Grey-Grey950, #212529);
    font-family: YuGothic;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 27.2px */
    letter-spacing: 0.64px;
}

.legal-omitted {
    text-align: center;
    color: #ADB5BD;
    font-style: italic;
}

/* .legal-button-area は .c4-button-area を使用 */

.legal-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 56px;
    background-color: #212529;
    text-decoration: none;
    transition: background-color 0.2s;
}

.legal-back-button:hover {
    background-color: #373D42;
}

.legal-back-button span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

/* スマートフォン対応 - 利用規約 */
@media (max-width: 767px) {
    .legal-head-section {
        padding: 32px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }

    .legal-head-title {
        font-size: 28px;
    }

    .legal-content-section {
        padding: 0 16px 80px;
    }

    .legal-content-wrapper {
        gap: 32px;
    }

    .legal-article {
        gap: 40px;
    }

    .legal-section {
        gap: 16px;
    }

    .legal-paragraph {
        font-size: 14px;
    }
    .legal-paragraph strong {
        font-size: 14px;
    }

    .legal-list li {
        font-size: 14px;
    }

    .legal-back-button {
        width: 100%;
    }
}

/* テーブル形式（特定商取引法に基づく表記等） */
.legal-table-section {
    display: flex;
    justify-content: center;
    padding: 0 16px 80px;
    background-color: #FFFFFF;
}

.legal-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1100px;
    width: 100%;
}

.legal-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.legal-table-row {
    display: flex;
    border-bottom: 1px solid #CBD3D6;
}

.legal-table-label {
    display: flex;
    align-items: flex-start;
    padding: 24px 16px;
    width: 200px;
    flex-shrink: 0;
}

.legal-table-label span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
}

.legal-table-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px;
    flex: 1;
    min-width: 0;
}

.legal-table-value span,
.legal-table-value a {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: #212529;
}

/* .legal-link は .c4-link を使用 */

/* アウトラインボタン（特定商取引法用） */
.legal-back-button-outline {
    background-color: transparent;
    border: 1px solid #212529;
    width: 325px;
}

.legal-back-button-outline:hover {
    background-color: #F7FBFB;
}

.legal-back-button-outline span {
    color: #212529;
}

.legal-button-icon-left,
.legal-button-icon-right {
    width: 24px;
    height: 24px;
}

/* スマートフォン対応 - テーブル形式 */
@media (max-width: 767px) {
    .legal-table-section {
        padding: 0 0 80px;
    }

    .legal-table-wrapper {
        gap: 32px;
        max-width: 690px;
    }

    .legal-table {
        padding: 0 16px;
    }

    .legal-table-row {
        flex-direction: column;
        gap: 8px;
    }

    .legal-table-label {
        width: 100%;
        padding: 24px 16px 0;
    }

    .legal-table-value {
        padding: 0 16px 24px;
    }

    .legal-back-button-outline {
        width: 100%;
        margin: 0 16px;
        box-sizing: border-box;
    }

    .legal-table-section .c4-button-area {
        padding: 0 16px;
    }
}

/* =====================================================
   お知らせ一覧スタイル
   ===================================================== */

.news-list-section {
    display: flex;
    justify-content: center;
    padding: 0 16px;
    background-color: #FFFFFF;
}

.news-list-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 690px;
    width: 100%;
}

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.news-item {
    display: flex;
}

.news-item-link {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    transition: opacity 0.2s;
}

.news-item-link:hover {
    opacity: 0.7;
}

.news-date {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #1D8B9C;
    width: 93px;
    flex-shrink: 0;
}

.news-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    flex: 1;
}

.news-count {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #465058;
    margin: 0;
}

/* ページネーション */
.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    background-color: transparent;
    border: 1px solid #212529;
    cursor: pointer;
    transition: all 0.2s;
    color: #212529;
}

.pagination-btn:hover:not(.disabled) {
    background-color: #F7FBFB;
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 8px;
    background-color: transparent;
    border: 1px solid #212529;
    cursor: pointer;
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #212529;
    transition: all 0.2s;
}

.pagination-num:hover:not(.active) {
    background-color: #F7FBFB;
}

.pagination-num.active {
    background-color: #212529;
    color: #FFFFFF;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #222222;
    letter-spacing: 0.1em;
}

/* スマートフォン対応 - お知らせ一覧 */
@media (max-width: 767px) {
    .news-list-section {
        padding: 0 16px;
    }

    .news-item-link {
        flex-direction: column;
        gap: 4px;
    }

    .news-date {
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: 0.04em;
        width: auto;
    }

    .news-title {
        font-size: 16px;
    }
}

/* =====================================================
   お知らせ詳細スタイル
   ===================================================== */

.news-detail-main {
    position: relative;
}

/* タイトル部（PC） */
.news-detail-head.pc {
    display: flex;
    justify-content: center;
    padding: 80px 16px 40px;
    background-color: #FFFFFF;
}

.news-detail-head-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 690px;
    width: 100%;
}

.news-detail-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.news-detail-date {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
}

/* タイトル部（SP） */
.news-detail-head.sp {
    display: none;
    padding: 32px 16px;
    background-color: #FFFFFF;
}

.news-detail-head.sp .news-detail-head-wrapper {
    gap: 8px;
}

.news-detail-head.sp .news-detail-title {
    font-size: 28px;
}

/* 本文部 */
.news-detail-content {
    display: flex;
    justify-content: center;
    padding: 0 16px;
    background-color: #FFFFFF;
}

.news-detail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 690px;
    width: 100%;
}

.news-detail-article {
    display: flex;
    flex-direction: column;
}

.news-detail-paragraph {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
    padding-top: 16px;
}

.news-detail-paragraph:first-child {
    padding-top: 0;
}

/* .news-detail-link は .c4-link を使用 */

/* 関連ケース */
.news-related-case {
    padding-top: 32px;
}

.news-related-case-inner {
    background-color: #EEF7F7;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-related-case-title {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
}

.news-case-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.news-case-card:hover {
    opacity: 0.8;
}

.news-case-image {
    width: 224px;
    height: 154px;
    flex-shrink: 0;
    overflow: hidden;
}

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

.news-case-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.news-case-tag {
    padding: 2px 8px;
    border-radius: 1px;
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.news-case-tag.tag-new {
    background-color: #FFF0D3;
    color: #FF6701;
}

.news-case-tag.tag-active {
    background-color: #DAEEEE;
    color: #1D8B9C;
}

.news-case-name {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-case-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.news-case-hashtags span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #515F69;
}

.news-case-author {
    display: flex;
    align-items: center;
    gap: 4px;
}

.news-case-avatar {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    object-fit: cover;
}

.news-case-author-name {
    font-family: 'YuGothic', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-case-progress {
    width: 100%;
    height: 18px;
    background-color: #E7EBEE;
    border-radius: 2px;
    overflow: hidden;
}

.news-case-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #1D8B9C, #09A4BC);
    display: flex;
    align-items: center;
    padding: 0 6px;
    min-width: 40px;
}

.news-case-progress-bar span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

.news-case-stats {
    display: flex;
    align-items: center;
    gap: 4px;
}

.news-case-stat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.news-case-stat span {
    font-family: 'YuGothic', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #515F69;
}

.news-case-stat small {
    font-size: 10px;
}

.news-case-stat-divider {
    width: 1px;
    height: 14px;
    background-color: #CBD3D6;
}

/* SNS共有ボタン（PC版固定表示） */
.news-sns-fixed.pc {
    position: fixed;
    top: 400px;
    right: calc(50% - 345px - 48px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
}

.sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

.sns-btn:hover {
    opacity: 0.7;
}

/* SNS共有ボタン（SP版横並び） */
.news-sns-row.sp {
    display: none;
    justify-content: center;
    gap: 8px;
}

/* .news-detail-button-area は .c4-button-area を使用 */

/* スマートフォン対応 - お知らせ詳細 */
@media (max-width: 767px) {
    .news-detail-head.pc {
        display: none;
    }

    .news-detail-head.sp {
        display: block;
    }

    .news-sns-fixed.pc {
        display: none;
    }

    .news-sns-row.sp {
        display: flex;
    }

    .news-detail-content {
        padding: 0 16px;
    }

    .news-detail-wrapper {
        gap: 32px;
    }

    .news-related-case-inner {
        padding: 12px 12px 24px;
    }

    .news-case-card {
        flex-direction: column;
    }

    .news-case-image {
        width: 100%;
        height: 196px;
    }

    .legal-back-button-outline {
        width: 100%;
    }

    .sns-btn {
        padding: 16px;
        box-sizing: content-box;
        width: auto;
        height: auto;
    }
}

/* 画面幅が狭い場合のSNSボタン位置調整 */
@media (max-width: 1300px) {
    .news-sns-fixed.pc {
        right: 20px;
    }
}