@charset "UTF-8";

/* ============================================
 *  共通設定
 * ============================================ */

:root {
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 20px;

    --icon-chevron-down-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/%3E%3C/svg%3E");

    --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M336 192C336 147.8 300.2 112 256 112C211.8 112 176 147.8 176 192C176 236.2 211.8 272 256 272C300.2 272 336 236.2 336 192zM128 192C128 121.3 185.3 64 256 64C326.7 64 384 121.3 384 192C384 262.7 326.7 320 256 320C185.3 320 128 262.7 128 192zM80 544L80 552C80 565.3 69.3 576 56 576C42.7 576 32 565.3 32 552L32 544C32 446.8 110.8 368 208 368L304 368C326.6 368 348.2 372.3 368 380L368 392.4C358.5 400.9 350.7 411.2 345.2 422.8C332.3 418.4 318.4 416 304 416L208 416C137.3 416 80 473.3 80 544zM528 368.1C528 350.4 513.7 336.1 496 336.1C478.3 336.1 464 350.4 464 368.1L464 416L528 416L528 368.1zM384 464C384 443.1 397.4 425.3 416 418.7L416 368.1C416 323.9 451.8 288.1 496 288.1C540.2 288.1 576 323.9 576 368.1L576 418.7C594.6 425.3 608 443.1 608 464L608 560C608 586.5 586.5 608 560 608L432 608C405.5 608 384 586.5 384 560L384 464z'/%3E%3C/svg%3E");

    --icon-biz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M128 112L384 112C392.8 112 400 119.2 400 128L400 283.3C413 268.5 429.4 256.8 448 249.3L448 128C448 92.7 419.3 64 384 64L128 64C92.7 64 64 92.7 64 128L64 512C64 547.3 92.7 576 128 576L337.3 576C336.4 570.8 336 565.4 336 559.9L336 528L304 528L304 448C304 430.3 289.7 416 272 416L240 416C222.3 416 208 430.3 208 448L208 528L128 528C119.2 528 112 520.8 112 512L112 128C112 119.2 119.2 112 128 112zM160 176L160 208C160 216.8 167.2 224 176 224L208 224C216.8 224 224 216.8 224 208L224 176C224 167.2 216.8 160 208 160L176 160C167.2 160 160 167.2 160 176zM304 160C295.2 160 288 167.2 288 176L288 208C288 216.8 295.2 224 304 224L336 224C344.8 224 352 216.8 352 208L352 176C352 167.2 344.8 160 336 160L304 160zM160 304L160 336C160 344.8 167.2 352 176 352L208 352C216.8 352 224 344.8 224 336L224 304C224 295.2 216.8 288 208 288L176 288C167.2 288 160 295.2 160 304zM304 288C295.2 288 288 295.2 288 304L288 336C288 344.8 295.2 352 304 352L336 352C344.8 352 352 344.8 352 336L352 304C352 295.2 344.8 288 336 288L304 288zM528 368.1L528 416L464 416L464 368.1C464 350.4 478.3 336.1 496 336.1C513.7 336.1 528 350.4 528 368.1zM384 464L384 560C384 586.5 405.5 608 432 608L560 608C586.5 608 608 586.5 608 560L608 464C608 443.1 594.6 425.3 576 418.7L576 368.1C576 323.9 540.2 288.1 496 288.1C451.8 288.1 416 323.9 416 368.1L416 418.7C397.4 425.3 384 443.1 384 464z'/%3E%3C/svg%3E");

    --icon-excl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320.5,64c14.7,0 28.2,8.1 35.2,21l216,400c6.7,12.4 6.4,27.4 -0.8,39.5c-7.2,12.1 -20.3,19.5 -34.4,19.5l-432,0c-14.1,0 -27.1,-7.4 -34.3,-19.5c-7.2,-12.1 -7.5,-27.1 -0.8,-39.5l216,-400l2.9,-4.6c7.4,-10.2 19.4,-16.4 32.2,-16.4Zm0,32c-2.4,0 -4.7,1.1 -6.2,2.9l-1.3,2.2l-215.5,399.1c-1.3,2.5 -1.3,5.5 0.2,7.9c1.4,2.4 4.1,3.9 6.9,3.9l432,0c2.8,0 5.4,-1.5 6.9,-3.9c1.4,-2.4 1.5,-5.4 0.2,-7.9l-216,-400c-1.1,-1.9 -2.8,-3.4 -4.9,-3.9l-2.1,-0.3l-0.2,0Zm0,368c-13.3,0 -24,-10.7 -24,-24c0,-13.3 10.7,-24 24,-24c13.3,0 24,10.7 24,24c0,13.3 -10.7,24 -24,24Zm0,-224c13.6,0 24.3,11.6 23.4,25.1l-7.4,104c-0.6,8.4 -7.6,14.9 -16,14.9c-8.4,0 -15.4,-6.5 -16,-14.9l-7.4,-104c-1,-13.6 9.8,-25.1 23.4,-25.1Z' fill='%23300a0a'/%3E%3Cpath d='M320.5,96c-2.4,0 -4.7,1.1 -6.2,2.9l-1.3,2.2l-215.5,399.1c-1.3,2.5 -1.3,5.5 0.2,7.9c1.4,2.4 4.1,3.9 6.9,3.9l432,0c2.8,0 5.4,-1.5 6.9,-3.9c1.4,-2.4 1.5,-5.4 0.2,-7.9l-216,-400c-1.1,-1.9 -2.8,-3.4 -4.9,-3.9l-2.1,-0.3l-0.2,0Zm0,368c-13.3,0 -24,-10.7 -24,-24c0,-13.3 10.7,-24 24,-24c13.3,0 24,10.7 24,24c0,13.3 -10.7,24 -24,24Zm0,-224c13.6,0 24.3,11.6 23.4,25.1l-7.4,104c-0.6,8.4 -7.6,14.9 -16,14.9c-8.4,0 -15.4,-6.5 -16,-14.9l-7.4,-104c-1,-13.6 9.8,-25.1 23.4,-25.1Z' fill='%23ffe394'/%3E%3C/svg%3E");

    --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");

    --icon-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M336 70.1C326.9 61.9 313.1 61.9 304 70.1L72 278.1C62.1 286.9 61.3 302.1 70.2 312C79.1 321.9 94.2 322.7 104.1 313.8L112.1 306.6L112.1 511.9C112.1 547.2 140.8 575.9 176.1 575.9L464.1 575.9C499.4 575.9 528.1 547.2 528.1 511.9L528.1 306.6L536.1 313.8C546 322.6 561.1 321.8 570 312C578.9 302.2 578 287 568.2 278.1L528.2 242.2L528.2 152C528.2 138.7 517.5 128 504.2 128C490.9 128 480.2 138.7 480.2 152L480.2 199.2L336.2 70.1zM480 263.7L480 512C480 520.8 472.8 528 464 528L416 528L416 424C416 384.2 383.8 352 344 352L296 352C256.2 352 224 384.2 224 424L224 528L176 528C167.2 528 160 520.8 160 512L160 263.7L320 120.2L480 263.7zM272 528L272 424C272 410.7 282.7 400 296 400L344 400C357.3 400 368 410.7 368 424L368 528L272 528z'/%3E%3C/svg%3E");

    --icon-tell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M176.8 74.9C204.1 65.8 233.8 78.8 245.7 104.9L285.4 192.2C296 215.6 289.4 243.2 269.4 259.3L245.2 278.6C270.7 328.6 310.7 370 359.6 397.4L380.8 370.8C396.9 350.7 424.5 344.1 447.9 354.8L535.2 394.5C561.4 406.4 574.3 436.1 565.2 463.4C544.5 525.7 481.5 579.6 404.3 566C230.6 535.4 104.7 409.5 74.1 235.8C60.5 158.6 114.5 95.7 176.7 74.9zM202 124.8C200.3 121 196 119.1 192 120.4C146.8 135.5 112.9 179 121.5 227.4C148.6 381.2 258.9 491.6 412.7 518.7C461.1 527.2 504.6 493.4 519.7 448.2C521 444.2 519.1 439.9 515.3 438.2L428 398.4C424.6 396.9 420.6 397.8 418.3 400.7L384.8 442.6C377.8 451.3 365.8 454.1 355.8 449.3C283.3 414.9 225.3 355 193.4 281.1C189.1 271.2 192 259.6 200.4 252.9L239.3 221.8C242.2 219.5 243.2 215.5 241.6 212.1L201.9 124.7z'/%3E%3C/svg%3E");

    --icon-chevron-down-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M308.7 427.3C314.9 433.5 325.1 433.5 331.3 427.3L491.3 267.3C497.5 261.1 497.5 250.9 491.3 244.7C485.1 238.5 474.9 238.5 468.7 244.7L320 393.4L171.3 244.7C165.1 238.5 154.9 238.5 148.7 244.7C142.5 250.9 142.5 261.1 148.7 267.3L308.7 427.3z'/%3E%3C/svg%3E");

    --icon-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M399.2 477C377.7 520.7 357.8 528 352 528C346.8 528 330 522 310.9 488.4L287.6 567.8C308.2 573.1 329.8 576 352.1 576C493.5 576 608.1 461.4 608.1 320C608.1 178.6 493.4 64 352 64C210.6 64 96 178.6 96 320C96 328.5 96.4 336.9 97.2 345.1L261.8 296.7C265.5 295.6 269.1 294.9 272.7 294.4C275.8 243.5 288 197 304.8 162.9C326.3 119.2 346.2 111.9 352 111.9C357.8 111.9 377.7 119.2 399.2 162.9C416.2 197.4 428.4 244.5 431.3 295.9L296.8 295.9C320 301.9 338.5 320.6 344.2 343.9L431.3 343.9C428.3 395.4 416.1 442.5 399.2 476.9zM479.4 344L558.6 344C550 418.6 501.9 481.3 435.8 510.4C459.8 467.6 476.1 408 479.4 344zM558.6 296L479.4 296C476.1 232 459.8 172.4 435.8 129.6C501.9 158.8 550 221.4 558.6 296zM224.6 296L145.4 296C154 221.4 202.1 158.7 268.2 129.6C244.2 172.4 227.9 232 224.6 296zM71 404.5C57.1 408.6 55.4 427.7 68.4 434.2L125.7 462.9C127 463.6 128.3 464.4 129.4 465.4L41.4 553.4C28.9 565.9 28.9 586.2 41.4 598.7C53.9 611.2 74.2 611.2 86.7 598.7L174.7 510.7C175.7 511.8 176.6 513 177.2 514.4L205.9 571.7C212.4 584.7 231.5 583 235.6 569.1L295.8 364.3C299.4 352.1 288.1 340.9 275.9 344.4L71 404.5z'/%3E%3C/svg%3E");
}

@media (max-width: 1099px) {
    :root {
        --fs-h1: 26px;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --fs-h4: 17px;
    }
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-sb);

    display: flex;
    gap: 12px;

    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-spacer);
}

h2::before {
    content: "";
    display: inline-block;
    width: 6px;
    background: linear-gradient(to bottom, #e61d25 0%, #ed5a55 40%, #f6a390 100%);

    border-radius: 1px;
    flex-shrink: 0;

    margin: 4px 0;
}

h2.no-marker {
    font-weight: var(--fw-m);
    padding-bottom: unset;
    border-bottom: unset;
    gap: 0.2em;
}

h2.no-marker::before {
    display: none;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-m);
    color: var(--c-accent);

    display: inline-flex;
    align-items: flex-start;
    gap: 0.2em;
}

h3::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.35em;
    aspect-ratio: 1;
    border: 3px solid var(--c-accent);
    border-radius: 50%;

    margin-top: 0.34em;
    display: block;
    flex-shrink: 0;
}

h3.no-marker::before {
    display: none;
}

.flex-text,
.flex-texts > p {
    display: flex;
    gap: 0.4em;
}

h2.no-marker > span:first-of-type,
h3.no-marker > span:first-of-type,
.flex-text > span:first-of-type,
.flex-texts > p > span:first-of-type {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

h2.no-marker > span:first-of-type > span,
h3.no-marker > span:first-of-type > span,
.flex-text > span:first-of-type > span,
.flex-texts > p > span:first-of-type > span {
    display: inline-block;
    min-width: 1em;
    text-align: center;
    font-variant-numeric: normal;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-m);
}

img {
    border-radius: 4px;
}

img.border {
    border: 1px solid var(--c-spacer);
}

.contents section,
.contents .wrapper-h3,
.contents .wrapper-h4,
.contents .content-body,
.contents .wrapper-p,
.contents .wrapper-p-l {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.contents .wrapper-h3 {
    gap: 52px;
}

.contents .content-body {
    gap: var(--s-3);
}

.contents .content-body:has(> h4) {
    gap: var(--s-2);
}

.contents .wrapper-p {
    gap: var(--s-1);
}

.contents .wrapper-p-l {
    gap: 14px;
}

.badge,
.pdf::after,
.news-page > ul.column-list > li[data-tab="important"] > :is(a, div) > p:first-of-type::after,
.news-page > ul.column-list > li[data-tab="news"] > :is(a, div) > p:first-of-type::after {
    color: var(--c-accent);
    display: inline-block;
    font-weight: var(--fw-m);
    line-height: 1.2;
    padding: 1px var(--s-1);
    border-radius: 2px;
}

.badge,
.news-page > ul.column-list > li[data-tab="important"] > :is(a, div) > p:first-of-type::after,
.news-page > ul.column-list > li[data-tab="news"] > :is(a, div) > p:first-of-type::after {
    color: var(--c-accent);
    font-size: var(--fs-s);
    background-color: color-mix(in srgb, var(--c-accent) 20%, transparent);
    margin-block: 6px;
}

.badge {
    color: var(--c-accent) !important;
}

.pdf::after {
    content: "PDF";
    border: 1px solid currentColor;
    transform: scale(0.7);
}

.external::after {
    height: 1em;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-external);
    mask-image: var(--icon-external);
    display: inline-block;
    margin-left: 4px;
    background-color: currentColor;
    padding-block: 0.1em;
    vertical-align: text-top;
}

.contents ul:is(:not([class]), .spaced, .spaced-l):not(.page-index > ul, .page-list ul),
.contents ol:is(:not([class]), .spaced, .spaced-l) {
    list-style-position: outside;
    padding-left: 1.5em;
}

.contents ul:is(:not([class]), .spaced, .spaced-l):not(.page-index > ul, .page-list ul) > li + li,
.contents ol:is(:not([class]), .spaced, .spaced-l) > li + li {
    margin-top: 4px;
}

.contents ul.spaced > li + li,
.contents ol.spaced > li + li {
    margin-top: 12px !important;
}

.contents ul.spaced-l > li + li,
.contents ol.spaced-l > li + li {
    margin-top: 18px !important;
}

.contents ul:is(:not([class]), .spaced, .spaced-l):not(.page-index > ul, .page-list ul) > li *,
.contents ol:is(:not([class]), .spaced, .spaced-l) > li * {
    margin-top: 4px;
}

.contents select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 36px 6px 14px;
    font-weight: var(--fw-m);
    cursor: pointer;
    transition:
        border-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
}

.contents div:has(> select) {
    position: relative;
}

.contents div:has(> select)::after {
    width: 1em;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-chevron-down-f);
    mask-image: var(--icon-chevron-down-f);
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background-color: var(--c-text);
    pointer-events: none;
}

.contents .note {
    display: flex;
    gap: 0.4em;
}

.contents .note::before {
    content: "※";
    flex-shrink: 0;
}

.contents .note > span > span {
    display: block;
    margin-top: 4px;
}

.contents .note-ref {
    display: inline-block;
    scale: 0.8;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.contents .emphasis,
.contents .emphasis > span > strong {
    color: var(--c-accent);
}

.contents .text-right {
    text-align: right;
}

.contents strong {
    color: inherit;
    font-weight: var(--fw-m);
}

.contents .tabular {
    font-variant-numeric: tabular-num;
}

@media (max-width: 849px) {
    h2 {
        padding-bottom: 12px;
    }

    h2::before {
        margin: 2px 0;
    }

    .contents section,
    .contents .wrapper-h3,
    .contents .wrapper-h4,
    .contents .content-body {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .contents .wrapper-h3 {
        gap: var(--s-5);
    }

    .contents .content-body {
        gap: 20px;
    }

    .contents .content-body:has(> h4) {
        gap: 12px;
    }
}

/* ============================================
 *  特定のセクションへのスクロール
 * ============================================ */

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 120px;
}

/* ============================================
 *  ヒーロー部
 * ============================================ */

.hero {
    height: 271px;
    background: linear-gradient(#fff7f5, #fdf1ef);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    left: 57%;
    top: 25%;
    transform: translateY(-50%) rotate(-33deg);
    width: 700px;
    aspect-ratio: 350 / 267;
    background: url("../img/page-hero-bg.svg") no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.hero > h1 {
    position: relative;
    z-index: 1;
    font-size: var(--fs-h1);
    font-weight: var(--fw-sb);
}

@media (max-width: 1099px) {
    .hero::after {
        left: 40%;
    }
}

@media (max-width: 849px) {
    .hero {
        height: 208px;
    }

    .hero::after {
        width: 300px;
        top: 47%;
        left: unset;
        right: -13%;
    }

    .hero > h1 {
        padding-inline: var(--s-5);
    }
}

/* ============================================
 *  パンくずリスト
 * ============================================ */

.breadcrumb {
    margin-top: 36px;
    margin-bottom: 48px;
}

.breadcrumb ol {
    list-style: none;
    line-height: 2;
}

.breadcrumb ol > li {
    display: inline;
}

.breadcrumb ol > li + li::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline: 0.1em;
    vertical-align: -0.15em;
    background-color: color-mix(in srgb, var(--c-text) 60%, transparent);
    -webkit-mask-image: var(--icon-chevron-right-l);
    mask-image: var(--icon-chevron-right-l);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.breadcrumb ol > li > a > span {
    color: inherit;
    text-decoration: inherit;
}

.breadcrumb ol > li:first-child > a::before {
    content: "";
    display: inline-block;
    width: 1.2em;
    aspect-ratio: 1;
    margin-right: 0.2em;
    vertical-align: -0.3em;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-top);
    mask-image: var(--icon-top);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media (max-width: 849px) {
    .breadcrumb {
        margin-top: 20px;
        margin-bottom: 40px;
    }
}

/* ============================================
 *  コンテンツ部
 * ============================================ */

.contents {
    display: flex;
    flex-direction: column;
    gap: var(--s-10);
    margin-bottom: 256px;
}

.wrapper,
.tell,
.philosophy-guide > li {
    background-color: var(--c-bg-section);
    border-radius: var(--r-m);
    padding: var(--s-4);
}

.wrapper.border {
    background-color: unset;
    border: 1px solid var(--c-spacer);
    padding-inline: var(--s-3);
}

.tell,
.card-list > div > div,
.philosophy-guide > li {
    padding: 20px var(--s-3);
}

.wrapper.apply {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.wrapper.apply > p:first-child {
    font-size: var(--fs-l);
    font-weight: var(--fw-sb);
    text-align: center;
    line-height: 1.3;
}

.wrapper.apply a.btn-icon {
    background-color: var(--c-accent);
}

.wrapper.apply > .flex {
    flex-wrap: wrap;
    row-gap: 12px;
}

.wrapper.apply > .flex > a > span {
    width: 100%;
    text-align: center;
}

.flex,
.wrapper.flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wrapper.flex.qr > img {
    height: 120px;
}

@media (max-width: 1099px) {
    .wrapper.flex.qr > img {
        height: 88px;
    }
}

@media (max-width: 849px) {
    .contents {
        gap: var(--s-9);
    }

    .wrapper,
    .tell {
        padding: var(--s-3);
    }

    .wrapper.border {
        padding-inline: var(--s-2);
    }

    .philosophy-guide > li {
        padding: var(--s-2);
    }
}

@media (max-width: 429px) {
    .wrapper.apply > .flex > a {
        width: 100%;
        padding-left: var(--s-6);
    }
}

/* ============================================
 *  クリッカブル要素
 * ============================================ */

.ib-menu > div:nth-child(3) > .btn-icon::before {
    width: var(--s-4);
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-user);
    mask-image: var(--icon-user);
    background-color: var(--c-text-white);
}

.ib-menu.biz > div:nth-child(3) > .btn-icon::before {
    -webkit-mask-image: var(--icon-biz);
    mask-image: var(--icon-biz);
}

.contents .btn::after,
.contents .btns a::after,
.grid-list > li > a::after {
    width: 28px;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-chevron-right-l);
    mask-image: var(--icon-chevron-right-l);
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--c-text) 40%, transparent);
}

.contents .btn.accent::after,
.contents .btns a.accent::after {
    background-color: var(--c-text-white);
}

.contents .btn,
.contents .btns a,
.contents .btn-icon {
    position: relative;
    padding: var(--s-2) var(--s-3);
}

.contents .btn.mini {
    padding: 2px var(--s-2);
    flex-shrink: 0;
    font-size: calc(var(--fs-base) - 1px);
}

.contents .btn.mini::after {
    display: none;
}

.contents .btn-icon,
.contents .btn.accent,
.contents .btns a.accent {
    color: var(--c-text-white);
    font-weight: var(--fw-sb);
    gap: var(--s-1);
}

.contents .btn.accent,
.contents .btns a.accent {
    background-color: var(--c-accent);
}

.contents .btn {
    width: fit-content;
}

.contents .btn,
.contents .btns a {
    color: var(--c-accent);
    transition: background-color var(--dur) var(--ease);
    padding-right: var(--s-6);
}

.contents .btn:not(.accent):hover,
.contents .btns:not(.page-index) a:not(.accent):hover,
summary:hover {
    opacity: 1 !important;
    background-color: #ffeeee;
}

@media (max-width: 849px) {
    .contents .btn::after,
    .contents .btns a::after,
    .grid-list > li > a::after {
        width: 24px;
    }
}

@media (max-width: 499px) {
    .contents .btn:not(.mini) {
        width: 100%;
    }
}

/* ============================================
 *  インデックス
 * ============================================ */

.toc {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 12px;
    flex-wrap: wrap;
}

.contents .toc > li > a {
    font-size: var(--fs-s);
    padding: var(--s-1) var(--s-5) var(--s-1) var(--s-2);
    min-height: 4em;
}

.contents .toc > li > a::after {
    -webkit-mask-image: var(--icon-chevron-down-l);
    mask-image: var(--icon-chevron-down-l);
}

.contents .toc > li,
.contents .toc > li > a {
    width: 100%;
    height: 100%;
}

@media (max-width: 849px) {
    .toc {
        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    }
}

@media (max-width: 499px) {
    .toc {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 359px) {
    .toc {
        grid-template-columns: 1fr;
    }

    .contents .toc > li > a {
        min-height: unset;
        padding-block: 12px;
    }
}

/* ============================================
 *  ページ下部インデックス
 * ============================================ */

.contents .page-index {
    margin-top: 160px;
    gap: var(--s-6);
}

.page-index > h2 {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    font-size: calc(var(--fs-xl) + 2px);
    border-bottom: unset;
    border-top: 1px solid var(--c-spacer);
    padding-block: var(--s-6) 0;
}

.page-index > h2::before {
    display: none;
}

.page-index > ul {
    padding-inline: var(--s-3);
    border-radius: var(--r-m);
}

.contents .page-index > ul > li > a {
    height: 100%;
    padding-right: var(--s-2);
    color: var(--c-text);
    transition: opacity var(--dur) var(--ease);
}

.page-index > ul > li > a[aria-current="page"] {
    pointer-events: none;
    color: var(--c-accent);
    background-color: color-mix(in srgb, var(--c-accent) 20%, transparent);
    outline: unset;
}

.contents .page-index > ul > li > a:hover {
    background-color: var(--c-text-white) !important;
    opacity: 0.7 !important;
}

.page-index > ul > li > a::after {
    display: none;
}

@media (max-width: 1099px) {
    .contents .page-index {
        margin-top: 120px;
        gap: var(--s-4);
    }

    .page-index > h2 {
        padding-block: var(--s-4) 0;
    }
}

/* ============================================
 *  縦のリンク表示
 * ============================================ */

.column-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-inline: var(--s-3);
}

.column-list > li {
    width: 100%;
}

.column-list > li + li {
    border-top: 1px solid var(--c-spacer);
}

.column-list > li > :is(a, div) {
    position: relative;
    display: flex;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4) var(--s-2) 0;
}

.column-list > li > a::after {
    width: 28px;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-chevron-right-l);
    mask-image: var(--icon-chevron-right-l);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--c-text) 40%, transparent);
}

.column-list > li > :is(a, div) > p:first-of-type {
    font-weight: var(--fw-m);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    flex-shrink: 0;
}

.column-list > li > a:hover > p:nth-of-type(2) {
    text-decoration: underline;
}

@media (max-width: 849px) {
    .column-list {
        padding-inline: var(--s-2);
    }

    .column-list > li > :is(a, div) {
        flex-direction: column;
        gap: 4px;
    }

    .column-list > li > a::after {
        width: var(--s-3);
    }
}

/* ============================================
 *  グリッドのリンク表示
 * ============================================ */

.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(352px, 100%), 1fr));
    gap: var(--s-3);
    width: 100%;

    list-style: none;
}

.mini {
    grid-template-columns: repeat(auto-fill, minmax(min(264px, 100%), 1fr));
}

.grid-list > li {
    display: flex;
}

.grid-list > li > a {
    width: 100%;
}

@media (max-width: 849px) {
    .grid-list {
        gap: var(--s-2);
    }
}

/* ============================================
 *  テーブル
 * ============================================ */

section table {
    table-layout: fixed;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border-spacing: 0;
    border: none;
    border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
}

section table > caption {
    caption-side: bottom;
    text-align: right;
    margin-top: var(--s-2);
}

section table th,
section table td {
    text-align: center;
}

section table td {
    font-size: calc(var(--fs-base) + 1px);
}

section table.th-left tr:not(:first-of-type) th {
    text-align: left;
}

section table > thead > tr > th {
    background-color: color-mix(in srgb, var(--c-accent) 6%, transparent);
    font-weight: var(--fw-m);
}

section table tr > * {
    padding: 12px 16px;
    border: none;
}

section table > thead > tr > *:not(:last-child),
section table > tbody > tr > th,
section table > tbody > tr > *:not(:last-child) {
    border-right: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
}

section table > thead:not(:first-of-type) > tr:first-of-type > *,
section table > tbody:not(:first-of-type) > tr:first-of-type > * {
    border-top: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
}

section table > thead > tr > *,
section table > tbody > tr:not(:last-child) > *:not(.reaches-bottom) {
    border-bottom: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
}

section table tbody tr > th:first-of-type {
    background-color: color-mix(in srgb, var(--c-text) 3%, transparent);
    font-weight: var(--fw-m);
}

table.text-left-all > tbody > tr > * {
    text-align: left;
}

table.text-left-th > tbody > tr > th {
    text-align: left;
}

table.text-left-td > tbody > tr > td {
    text-align: left;
}

@media (max-width: 849px) {
    section table tr > * {
        padding: 12px 12px;
    }
}

/* ============================================
 *  項目
 * ============================================ */

.content-body > dl,
.dl-date > dl {
    display: grid;
    grid-template-columns: auto 1fr;
}

.content-body > dl * + ul,
.content-body > dl * + ol {
    margin-top: var(--s-1);
}

.content-body > dl > dt,
.content-body > dl > dd,
.dl-date > dl > dt,
.dl-date > dl > dd {
    padding: var(--s-2);
    border-top: 1px solid #00000016;
}

.content-body > dl > dt,
.dl-date > dl > dt {
    padding-right: var(--s-5);
}

.content-body > dl > dt:last-of-type,
.content-body > dl > dd:last-of-type,
.dl-date > dl > dt:last-of-type,
.dl-date > dl > dd:last-of-type {
    border-bottom: 1px solid #00000016;
}

.content-body > dl > dt,
.dl-date > dl > dt {
    font-weight: var(--weight-m);
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--c-accent) 6%, transparent);
    font-weight: var(--fw-m);
}

.content-body > dl > dd,
.dl-date > dl > dd {
    margin-left: 0;
}

.content-body > dl > dd > * + p,
.dl-date > dl > dd > * + p {
    margin-top: 4px;
}

.dl-date {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.dl-date > p:first-of-type {
    text-align: right;
}

@media (max-width: 849px) {
    .content-body > dl > dt,
    .dl-date > dl > dt {
        padding-right: var(--s-3);
    }
}

@media (max-width: 549px) {
    .content-body > dl.col-sp,
    .dl-date > dl.col-sp {
        grid-template-columns: 1fr;
    }

    .content-body > dl.col-sp > dt,
    .dl-date > dl.col-sp > dt {
        border-bottom: unset !important;
        padding-block: var(--s-1);
    }

    .content-body > dl.col-sp > dt br,
    .dl-date > dl.col-sp > dt br {
        display: none;
    }

    .content-body > dl.col-sp > dd,
    .dl-date > dl.col-sp > dd {
        border-top: unset;
    }
}

/* ============================================
 *  カード表示
 * ============================================ */

.card-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.card-list > div {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    border-radius: var(--r-m);
    padding: unset;
}

.card-list > div > div:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}

.card-list > div > div:first-of-type > a:not(.btn) {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-m);
    font-weight: var(--fw-m);
}

.card-list > div > div:first-of-type > a::before {
    height: 1.2em;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-tell);
    mask-image: var(--icon-tell);
    display: inline-block;
    background-color: var(--c-text);
}

.card-list > div > div:first-of-type > div:first-of-type {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--c-spacer);
}

.card-list > div > div:first-of-type > div:first-of-type > div > span,
.card-list > div > div:first-of-type > div:last-of-type > p:nth-of-type(2) {
    font-size: var(--fs-s);
    color: var(--c-text-muted);
}

.card-list > div > div:first-of-type > div:first-of-type > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--s-1);
}

.card-list > div > div:first-of-type > div:first-of-type > div > h3 {
    display: unset;
}

.card-list > div > div:first-of-type > div:first-of-type > div > h3::before {
    display: none;
}

.card-list > div > div:first-of-type > div:last-of-type {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-list > div > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    width: 100%;
    max-width: 13em;
    background-color: #fff2f0;
}

.card-list dl {
    display: grid;
    grid-template-columns: max-content 1fr;
}

.card-list dl > dt,
.card-list dl > dd {
    padding-block: var(--s-1);
    border-bottom: 1px solid var(--c-spacer);
}

.card-list dl > dt:first-of-type,
.card-list dl > dd:first-of-type {
    padding-top: 0;
}

.card-list dl > dt:last-of-type,
.card-list dl > dd:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.card-list dl > dt {
    color: var(--c-text-muted);
    padding-right: var(--s-3);
    text-align-last: justify;
}

.shop-cash-card table {
    max-width: 848px;
}

@media (max-width: 1099px) {
    .card-list > div {
        gap: 3px;
    }

    .card-list > div > div:first-of-type > div:first-of-type > div > h3 {
        font-size: calc(var(--fs-h3) + 1px);
    }
}

@media (max-width: 699px) {
    .card-list > div {
        flex-direction: column;
    }

    .card-list > div > div:first-of-type {
        border-bottom-left-radius: unset;
        border-top-right-radius: var(--r-m);
    }

    .card-list > div > div:nth-of-type(2) {
        max-width: unset !important;
        border-top-right-radius: unset;
        border-bottom-left-radius: var(--r-m);
        border-left: unset;
    }
}

/* ============================================
 *  アコーディオンメニュー
 * ============================================ */

details.btn-static {
    flex-direction: column;
    overflow: hidden;
    align-items: unset;
}

summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    padding: 20px var(--s-3);
    cursor: pointer;
    width: 100%;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

summary::-webkit-details-marker {
    display: none;
}

summary h3 {
    margin-right: auto;
}

summary .toggle-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}

summary .toggle-label::after {
    width: 28px;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-chevron-down-r);
    mask-image: var(--icon-chevron-down-r);
    background-color: var(--c-accent);
    transition: transform var(--dur) var(--ease);
}

details.open summary {
    border-color: var(--c-spacer);
}

details.open summary .toggle-label::after {
    transform: rotate(180deg);
}

details:not(.open) summary .toggle-label::before {
    content: "内容を開く";
}

details.open summary .toggle-label::before {
    content: "内容を閉じる";
}

details > div {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
}

details.open > div {
    grid-template-rows: 1fr;
}

details > div > div {
    overflow: hidden;
    padding-inline: var(--s-3);
    transition: padding var(--dur) var(--ease);
}

details.open > div > div {
    padding-block: var(--s-4);
}

@media (max-width: 849px) {
    summary {
        padding: var(--s-2);
    }

    summary .toggle-label {
        gap: 4px;
    }

    summary .toggle-label::after {
        width: 22px;
    }

    details > div > div {
        padding-inline: var(--s-2);
    }

    details.open > div > div {
        padding-block: var(--s-3);
    }
}

/* ============================================
 *  連絡先表示
 * ============================================ */

.tell {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.tell > div:first-of-type {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    color: var(--c-accent);
    font-size: var(--fs-s);
    font-weight: var(--fw-m);
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
}

.tell > div:first-of-type::before {
    content: "";
    display: block;
    width: var(--s-6);
    aspect-ratio: 1;
    background-image: url(../img/page-icon-phone.svg);
}

.tell > div:last-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-left: 1px solid var(--c-spacer);
    padding: 0 0 0 var(--s-3);
    align-self: stretch;
    justify-content: center;
}

.tell > div:last-of-type > a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-l);
    font-weight: var(--fw-m);
}

.tell > div:last-of-type > dl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: baseline;
    width: 100%;
}

.tell > div:last-of-type > dl.row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--s-1);
}

.tell > div:last-of-type > dl > dt {
    flex-shrink: 0;
    font-weight: var(--fw-m);
}

.tell > div:last-of-type > dl > dd {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--s-1);
}

.tell > div:last-of-type > dl > dd > p {
    margin-top: 2px;
    width: 100%;
}

.tell.free > div:last-of-type > a::before,
a.free::before {
    content: "";
    display: block;
    flex-shrink: 0;
    height: 20px;
    aspect-ratio: 34 / 20;
    background-image: url(../img/page-icon-freedial.svg);
    background-repeat: no-repeat;
}

a.free {
    position: relative;
    padding-left: 2em;
}

a.free::before {
    height: 1em;
    position: absolute;
    top: 0.25em;
    left: 0;
}

@media (max-width: 1099px) {
    .tell > div:first-of-type::before {
        width: var(--s-4);
    }
}

@media (max-width: 699px) {
    .tell {
        flex-direction: column;
        gap: var(--s-2);
    }

    .tell > div:first-of-type {
        flex-direction: unset;
        text-align: unset;
        gap: 6px;
    }

    .tell > div:last-of-type {
        align-items: center;
        border-left: unset;
        gap: 12px;
        border-top: 1px solid var(--c-spacer);
        padding: var(--s-2) 0 0 0;
        width: 100%;
    }
}

/* ============================================
 *  アプリのリンク
 * ============================================ */

.app {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(336px, 100%), 1fr));
    gap: var(--s-2);
}

.app > div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.app > div > h3 {
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
}

.app > div > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.app > div > div > img {
    background-color: var(--c-text-white);
    border: 1px solid var(--c-spacer);
    width: 120px;
}

.app > div > div > a {
    display: block;
    height: 56px;
    background-size: contain;
    background-repeat: no-repeat;
}

.app > div:nth-child(1) > div > a {
    background-image: url(../img/page-badge-app.svg);
    aspect-ratio: 108.85157 / 40;
}

.app > div:nth-child(2) > div > a {
    background-image: url(../img/page-badge-play.svg);
    aspect-ratio: 33 / 10;
}

@media (max-width: 1099px) {
    .app > div > div > img {
        width: 88px;
    }

    .app > div > div > a {
        height: 40px;
    }
}

@media (max-width: 849px) {
    .app > div > h3 {
        top: var(--s-3);
        left: var(--s-3);
    }
}

/* ============================================
 *  フロー・流れ
 * ============================================ */

.flow {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(208px, 100%), 1fr));
    gap: var(--s-5) var(--s-2);
}

.flow > div {
    position: relative;
    padding-top: 144px;
}

.flow > div > p {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 64px;
    aspect-ratio: 1;
    border-radius: var(--r-m);
    background-color: color-mix(in srgb, var(--c-accent) 20%, transparent);

    font-weight: var(--fw-sb);
    color: var(--c-accent);
    line-height: 1;

    font-size: var(--fs-xl);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.flow > div > p > span {
    color: inherit;
    font-weight: inherit;
    line-height: inherit;

    font-size: var(--fs-xs);
}

.flow > div > div {
    position: relative;
    padding: var(--s-6) var(--s-3);
    height: 100%;
}

.flow > div > div > img {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 120px;
}

@media (max-width: 1099px) {
    .flow > div {
        padding-top: 80px;
    }

    .flow > div > p {
        width: 56px;
        font-size: 24px;
    }

    .flow > div > div {
        padding-block: var(--s-5);
    }

    .flow > div > div > img {
        top: 28px;
        width: 104px;
    }
}

@media (max-width: 849px) {
    .flow > div > div > img {
        left: unset;
        right: var(--s-4);
        transform: translateY(-100%);
    }
}

@media (max-width: 549px) {
    .flow {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 499px) {
    .flow {
        grid-template-columns: 1fr;
    }

    .flow > div {
        padding-top: 72px;
    }

    .flow > div > div {
        padding-block: var(--s-4);
    }
}

/* ============================================
 *  インターネットバンキング
 * ============================================ */

.contents section.ib-menu {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

.ib-important {
    background-color: color-mix(in srgb, var(--c-accent) 4%, transparent);
    border: 3px solid color-mix(in srgb, var(--c-accent) 48%, transparent);
    border-radius: 10px;
    list-style: none;
    padding-inline: var(--s-4);
}

.ib-important > li {
    position: relative;
}

.ib-important > li::after {
    width: 28px;
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-chevron-right-l);
    mask-image: var(--icon-chevron-right-l);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--c-text) 40%, transparent);
}

.ib-important > li + li {
    border-top: 1px solid var(--c-spacer);
}

.ib-important > li > a {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4) var(--s-2) 0;
}

.ib-important > li > a::before {
    display: inline-block;
    width: 28px;
    aspect-ratio: 1;
    background-image: var(--icon-excl);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    text-decoration: none;
}

.ib-important > li > a > span {
    font-weight: var(--fw-m);
}

.ib-important > li > a:hover > span {
    text-decoration: underline;
}

.ib-menu > div:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--s-4);
    width: 100%;
}

.ib-menu > div:nth-child(2) > a {
    flex-direction: column;
    justify-content: center;
    gap: var(--s-1);
    padding-left: var(--s-6);
}

.ib-menu > div:nth-child(2) > a > p {
    text-align: center;
}

.ib-menu > div:nth-child(2) > a > p:last-of-type {
    white-space: nowrap;
}

.ib-menu > div:nth-child(2) > a:nth-of-type(1) {
    gap: 12px;
}

.ib-menu > div:nth-child(2) > a:nth-of-type(1) > img {
    border-radius: unset;
}

.ib-menu > div:nth-child(2) > a:nth-of-type(2) > p:first-of-type {
    color: var(--c-accent);
    font-weight: var(--fw-m);
}

.ib-menu > div:nth-child(3) > a.btn-icon {
    background-color: var(--c-ib);
}

.ib-menu.biz > div:nth-child(3) > a {
    background-color: var(--c-ib-biz);
}

@media (max-width: 849px) {
    .contents section.ib-menu {
        gap: var(--s-4);
    }

    .ib-important {
        padding-inline: var(--s-3);
    }

    .ib-important > li::after {
        width: 24px;
    }

    .ib-important > li > a {
        padding-right: var(--s-3);
    }

    .ib-important > li > a::before {
        width: var(--s-3);
    }

    .ib-menu > div:nth-child(2) > a:first-of-type {
        display: none;
    }
}

.ib-news {
    max-height: 260px;
}

.ib-news .simplebar-track.simplebar-vertical {
    top: 6px;
    bottom: 6px;
    width: 10px;
    z-index: 0;
}

@media (max-width: 899px) {
    .ib-news {
        max-height: 332px;
    }
}

@media (max-width: 849px) {
    .ib-menu > div:nth-child(2) > a > p:last-of-type {
        white-space: unset;
    }
}

.ib-onetime {
    max-width: 832px;
}

.ib-onetime colgroup > col:nth-child(n + 2) {
    width: 224px;
}

@media (max-width: 749px) {
    .ib-onetime colgroup > col:nth-child(n + 2) {
        width: 140px;
    }
}

@media (max-width: 599px) {
    .ib-onetime colgroup > col:nth-child(n + 2) {
        width: 100px;
    }
}

.ib-tesuryo table {
    max-width: 656px;
}

@media (max-width: 1099px) {
    .ib-tesuryo table {
        max-width: 540px;
    }
}

.ib-kigen table {
    max-width: 760px;
}

/* ============================================
 *  手数料一覧
 * ============================================ */

.fee-furikomi-atm dl,
.fee-shomeisho-ib-biz dl {
    max-width: 320px;
}

.fee-other dl {
    max-width: 400px;
}

.fee-atm table,
.fee-toritate table,
.fee-furikomi-madoguchi table {
    max-width: 784px;
}

.fee-furikomi-ib,
.fee-toza table,
.fee-shomeisho table,
.fee-jutaku table {
    max-width: 880px;
}

.fee-furikomi-ib colgroup > col:nth-child(n + 2) {
    width: 248px;
}

@media (max-width: 1099px) {
    .fee-furikomi-atm dl,
    .fee-shomeisho-ib-biz dl {
        max-width: 248px;
    }

    .fee-other dl {
        max-width: 336px;
    }

    .fee-furikomi-ib colgroup > col:nth-child(n + 2) {
        width: 200px;
    }
}

@media (max-width: 849px) {
    .fee-furikomi-ib colgroup > col:nth-child(n + 2) {
        width: 160px;
    }
}

@media (max-width: 599px) {
    .fee-furikomi-ib colgroup > col:nth-child(n + 2) {
        width: 96px;
    }
}

@media (max-width: 399px) {
    .fee-atm table colgroup > col:nth-child(1),
    .fee-atm table colgroup > col:nth-child(3) {
        width: 88px;
    }
}

/* ============================================
 *  金利情報
 * ============================================ */

.rate-yokin table,
.rate-tsumikin table,
.rate-loan table {
    max-width: 800px;
}

.rate-yokin table:nth-of-type(3) {
    max-width: 608px;
}

.rate-yokin table > colgroup > col:first-of-type,
.rate-tsumikin table > colgroup > col:first-of-type {
    width: 160px;
}

.rate-tsumikin table > colgroup > col:nth-of-type(2) {
    width: 240px;
}

.rate-loan table > colgroup > col:nth-of-type(2) {
    width: 208px;
}

@media (max-width: 599px) {
    .rate-yokin table > colgroup > col:first-of-type,
    .rate-tsumikin table > colgroup > col:first-of-type {
        width: 80px;
    }

    .rate-tsumikin table > colgroup > col:nth-of-type(2) {
        width: 104px;
    }

    .rate-loan table > colgroup > col:nth-of-type(2) {
        width: 116px;
    }

    .rate-loan table > colgroup > col:nth-of-type(3) {
        width: 100px;
    }

    .rate-loan table > tbody > tr > td:last-of-type > span {
        display: block;
        transform: rotate(90deg);
        line-height: 1;
    }
}

@media (max-width: 399px) {
    .rate-yokin table > colgroup > col:first-of-type,
    .rate-tsumikin table > colgroup > col:first-of-type {
        width: 70px;
    }

    .rate-tsumikin table > colgroup > col:nth-of-type(2) {
        width: 96px;
    }
}

/* ============================================
 *  ためる
 * ============================================ */

.deposit .card-list > div > div:last-of-type {
    max-width: 17em;
}

.deposit .card-list > div > div:first-of-type > div:first-of-type {
    flex-wrap: wrap;
    gap: 8px var(--s-2);
}

/* ============================================
 *  かりる
 * ============================================ */

.loan-list .card-list > div > div:first-of-type {
    max-width: 17em;
    justify-content: space-between;
    gap: var(--s-3);
}

.loan-list .card-list > div > div:first-of-type > div:first-of-type {
    border-bottom: unset;
    gap: var(--s-2);
    padding-bottom: 0;
    margin-bottom: 0;
}

.loan-list .card-list > div > div:first-of-type > div:first-of-type > div {
    gap: 0px var(--s-1);
}

.loan-list .card-list > div > div:first-of-type > a {
    padding-block: var(--s-1);
}

.loan-list .card-list > div > div:last-of-type {
    max-width: unset;
}

.loan-list .card-list > div > div:last-of-type > dl > * {
    padding-block: 20px;
}

.loan-list .card-list > div > div:last-of-type > dl > dt:first-of-type,
.loan-list .card-list > div > div:last-of-type > dl > dd:first-of-type {
    padding-top: 0;
}

.loan-list .card-list > div > div:last-of-type > dl > dt:last-of-type,
.loan-list .card-list > div > div:last-of-type > dl > dd:last-of-type {
    padding-bottom: 0;
}

.loan-kasai table {
    max-width: 800px;
}

@media (max-width: 699px) {
    .loan-list .card-list > div > div:first-of-type {
        max-width: unset;
        align-items: flex-end;
    }

    .loan-list .card-list > div > div:first-of-type > div:first-of-type {
        align-items: unset;
    }
}

@media (max-width: 499px) {
    .loan-list .card-list > div > div:last-of-type > dl {
        display: flex;
        flex-direction: column;
    }

    .loan-list .card-list > div > div:last-of-type > dl > * {
        padding: unset;
    }

    .loan-list .card-list > div > div:last-of-type > dl > dt {
        border-bottom: unset;
        padding-right: unset;
        text-align-last: unset;
    }

    .loan-list .card-list > div > div:last-of-type > dl > dt,
    .loan-list .card-list > div > div:last-of-type > dl > dt:last-of-type {
        padding-block: 20px 10px;
    }

    .loan-list .card-list > div > div:last-of-type > dl > dd {
        padding-bottom: 20px;
    }
}

/* ============================================
 *  かりる
 * ============================================ */

.loan-search > .btn-icon::before {
    width: var(--s-4);
    aspect-ratio: 1;
    -webkit-mask-image: var(--icon-web);
    mask-image: var(--icon-web);
    background-color: var(--c-text-white);
}

/* ============================================
 *  セレクト詳細
 * ============================================ */

.select-detail .content-body > dl > dt {
    padding-right: var(--s-2);
}

/* ============================================
 *  沿革
 * ============================================ */

.history dl {
    display: grid;
    grid-template-columns: auto 1fr;
}

.history dl > dt {
    width: 7em;
    color: var(--c-accent);
    font-size: var(--fs-h3);
    font-weight: var(--fw-m);
    padding: 4px 0 4px var(--s-2);
    border-left: 2px solid color-mix(in srgb, var(--c-accent) 70%, transparent);
}

.history dl > dd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-1);
    padding-block: 4px;
}

.history dl > dt > span,
.history dl > dd > p > span {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    width: 2.3em;
    text-align: right;
    letter-spacing: 0;

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.history dl > dd > p {
    display: flex;
}

.history dl > dd > p > span {
    margin-right: var(--s-2);
    opacity: 0.7;
    flex-shrink: 0;
}

.history dl > dd + dt,
.history dl > dt + dd:not(:first-of-type) {
    margin-top: var(--s-5);
}

@media (max-width: 849px) {
    .history dl > dt {
        width: 6em;
    }
}

/* ============================================
 *  経営理念
 * ============================================ */

.philosophy-guide {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(264px, 100%), 1fr));
    gap: var(--s-2);
    list-style: none;
    padding-left: 0;
    counter-reset: philosophy-counter;
}

.philosophy-guide > li {
    counter-increment: philosophy-counter;
    display: flex;
}

.philosophy-guide > li::before {
    content: counter(philosophy-counter) ".";
    display: block;
    font-weight: bold;
    color: var(--c-accent);
    margin-right: var(--s-1);
}

/* ============================================
 *  組織図
 * ============================================ */

.orgchart > p {
    display: none;
    text-align: center;
}

@media (max-width: 849px) {
    .orgchart > p {
        display: unset;
    }
}

/* ============================================
 *  地域密着型金融推進計画
 * ============================================ */

.region .column-list > li > a > span > span:first-of-type {
    display: inline-block;
    min-width: 6.5em;
}

/* ============================================
 *  採用情報
 * ============================================ */
.recruit-shinsotsu > div > .imgs {
    display: flex;
    gap: var(--s-2);
}

.recruit-shinsotsu > div > .imgs > a,
.recruit-shinsotsu > div > .imgs > img {
    display: block;
    width: 130px;
}

.recruit-shinsotsu > div > .imgs > a > img {
    width: 100%;
    border-radius: unset;
    display: block;
}

.recruit-shinsotsu > div > .imgs > img {
    border: 1px solid var(--c-spacer);
}

.recruit-club > div > .flex {
    display: flex;
    gap: var(--s-4);
}

.recruit-club > div > .flex > .img > img {
    width: 488px;
}

@media (max-width: 1099px) {
    .recruit-club > div > .flex > .img > img {
        width: 408px;
    }
}

@media (max-width: 849px) {
    .recruit-club > div > .flex > .img > img {
        width: 360px;
    }
}

@media (max-width: 699px) {
    .recruit-club > div > .flex {
        flex-direction: column;
    }

    .recruit-club > div > .flex > .img > img {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .recruit-shinsotsu > div > .imgs {
        justify-content: center;
    }
}

/* ============================================
 *  便利なサービス
 * ============================================ */

.contents .service-list > li > a {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-inline: var(--s-5);
}

.contents .service-list > li > a > img {
    height: 72px;
    margin-bottom: 4px;
}

.contents .service-list > li:nth-child(1) > a > img,
.contents .service-list > li:nth-child(4) > a > img {
    padding: 4px;
}

.contents .service-list > li > a > h3 {
    color: var(--c-text);
    font-size: var(--fs-base);
    text-align: center;
    margin-bottom: 4px;
}

.contents .service-list > li > a > h3::before {
    display: none;
}

@media (max-width: 1099px) {
    .contents .service-list > li > a > img {
        height: 56px;
    }
}

/* ============================================
 *  でんさい
 * ============================================ */

.densai-hoho img {
    max-width: 672px;
}

.densai-merit img {
    max-width: 800px;
}

@media (max-width: 1099px) {
    .densai-hoho img {
        max-width: 544px;
    }

    .densai-merit img {
        max-width: 688px;
    }
}

/* ============================================
 *  Creco
 * ============================================ */

.creco-kotei img {
    max-width: 656px;
}

@media (max-width: 1099px) {
    .creco-kotei img {
        max-width: 544px;
    }
}

/* ============================================
 *  ことら
 * ============================================ */

.kotora .tell > div:first-of-type {
    min-width: 12em;
}

/* ============================================
 *  ことら、BankPay、J-Coin
 * ============================================ */

.kotora dl,
.bankpay dl,
.jcoin dl {
    max-width: 400px;
}

/* ============================================
 *  個人情報ページ
 * ============================================ */

.privacy-credit h2 {
    font-size: calc(var(--fs-h2) - 4px);
}

.privacy-credit h3 {
    font-size: calc(var(--fs-h3) - 1px);
}

.privacy-credit .table-scroll {
    overflow-x: auto;
}

.privacy-credit table {
    min-width: 600px;
}

.privacy-credit table > colgroup > col:first-of-type {
    width: 360px;
}

.privacy-credit .card-list > div > div:nth-of-type(2) {
    max-width: 24em;
}

.privacy-credit .card-list > div > div:first-of-type > div:first-of-type > div {
    flex-direction: column;
}

.privacy-credit .card-list > div > div:first-of-type > div:first-of-type > div > p {
    font-size: var(--fs-m);
    font-weight: var(--fw-m);
}

.privacy-credit .card-list > div > div:first-of-type > div:first-of-type > div > a {
    color: var(--c-accent);
    text-decoration: underline;
    transition: opacity var(--dur) var(--ease);
}

.privacy-credit .card-list > div > div:first-of-type > div:first-of-type > div > a:hover {
    opacity: 0.6;
}

.privacy-disclosure dl {
    max-width: 400px;
}

@media (max-width: 1099px) {
    .privacy-credit table > colgroup > col:first-of-type {
        width: 320px;
    }
}

@media (max-width: 849px) {
    .privacy-credit table > colgroup > col:first-of-type {
        width: 200px;
    }
}

/* ============================================
 *  保険募集指針・マネロン
 * ============================================ */

.insurance h2,
.aml-cft-cpf h2 {
    color: var(--c-accent);
    font-size: calc(var(--fs-base) + 1px);
    line-height: 1.5;
}

.insurance h3,
.aml-cft-cpf h3 {
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1.5;
}

.insurance.contents,
.aml-cft-cpf.contents {
    gap: var(--s-6);
}

@media (max-width: 849px) {
    .insurance.contents,
    .aml-cft-cpf.contents {
        gap: var(--s-5);
    }
}

/* ============================================
 *  次世代育成・女性活躍
 * ============================================ */

.action-plan dl {
    max-width: 736px;
}

.action-plan dl > dt > span {
    display: inline-block;
}

.action-plan dl > dt > span:first-of-type {
    min-width: 4.5em;
}

.action-plan dl > dt > span:nth-of-type(2) {
    min-width: 2em;
}

/* ============================================
 *  サイトマップ
 * ============================================ */

.page-list {
    columns: 2;
    gap: 24px;
    list-style: none;
}

.page-list > li {
    margin-bottom: 24px;
    background-color: var(--c-bg-section);
    border-radius: var(--r-m);
    break-inside: avoid;
}

.page-list > li:nth-child(-n + 2) {
    grid-column: 1;
}
.page-list > li:nth-child(3),
.page-list > li:nth-child(4) {
    grid-column: 2;
}
.page-list > li:nth-child(n + 5) {
    grid-column: 3;
}

.contents .page-list > li > a,
.contents .page-list > li > p,
.contents .page-list > li > ul {
    padding-block: 16px;
    padding-left: 24px;
}

.contents .page-list > li > p,
.contents .page-list > li > ul {
    padding-right: 24px;
}

.contents .page-list > li > a,
.contents .page-list > li > p {
    font-weight: var(--fw-m);
    width: 100%;
}

.contents .page-list > li:has(> ul) > a,
.contents .page-list > li:has(> ul) > p {
    border-bottom-right-radius: unset;
    border-bottom-left-radius: unset;
}

.contents .page-list > li > p {
    border-bottom: 1px solid var(--c-spacer);
}

.page-list > li ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-list > li ul li a {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.2em;
}

.page-list > li ul li a::before {
    width: 16px;
    aspect-ratio: 1;
    margin-top: 0.23em;
    -webkit-mask-image: var(--icon-caret-right);
    mask-image: var(--icon-caret-right);
}

.page-list > li ul li a:hover {
    text-decoration: underline;
}

.page-list > li > ul > li > ul {
    margin-top: 12px;
    margin-bottom: 4px;
    padding-left: 0.6em;
    border-left: 1px solid var(--c-spacer);
    gap: var(--s-1);
}

@media (max-width: 499px) {
    .page-list {
        columns: 1;
    }
}

/* ============================================
 *  お知らせ一覧ページ
 * ============================================ */

.news-page {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.news-page > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.news-page > div:first-child > div {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.news-page > div:first-child p {
    font-weight: var(--fw-m);
    white-space: nowrap;
}

.news-page > div:first-child select {
    min-width: 120px;
    transition:
        outline-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
}

.news-page > div:first-child select:hover {
    background-color: color-mix(in srgb, var(--c-text) 2%, #ffffff);
}

.news-page > div:first-child select:focus-within {
    outline: 1px solid var(--c-accent) !important;
    outline-offset: 0 !important;
}

.news-page > div:first-child .tablist {
    width: 100%;
    min-width: 368px;
}

.news-page > div:first-child .tablist > button {
    padding-inline: var(--s-3);
    white-space: nowrap;
}

.news-page > ul.column-list > li[data-tab="important"] > :is(a, div) > p:first-of-type {
    display: flex;
    align-items: center;
}

.news-page > ul.column-list > li[data-tab="important"] > :is(a, div) > p:first-of-type::after {
    content: "重要";
    margin-block: unset;
    margin-left: var(--s-3);
}

.news-page > ul.column-list > li[data-tab="news"] > :is(a, div) > p:first-of-type::after {
    content: "お知らせ";
    margin-block: unset;
    margin-left: var(--s-3);
    color: #537297;
    background-color: color-mix(in srgb, #537297 20%, transparent);
}

.news-page > ul.column-list > li[data-tab="important"] > :is(a, div) > p:first-of-type::after,
.news-page > ul.column-list > li[data-tab="news"] > :is(a, div) > p:first-of-type::after {
    min-width: 4em;
    text-align: center;
}

.news-page > p {
    padding: var(--s-4);
    text-align: center;
    color: var(--c-text-muted);
}

.news-page > ul.column-list > li.is-hidden {
    display: none;
}

.news-page > ul.column-list > li.is-invalid * {
    color: var(--c-accent);
    font-weight: var(--fw-sb);
}

.news-page > ul.column-list > li {
    border-top: 0;
}

.news-page > ul.column-list > li:not(.is-hidden) ~ li:not(.is-hidden) {
    border-top: 1px solid var(--c-spacer);
}

@media (max-width: 1099px) {
    .news-page > div:first-child select {
        min-width: 96px;
    }

    .news-page > div:first-child .tablist {
        min-width: 320px;
    }

    .news-page > div:first-child {
        justify-content: flex-start;
    }

    .news-page > div:first-child > div {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--s-1);
    }
}

@media (max-width: 849px) {
    .news-page > ul.column-list > li > a > p.tag-important::before {
        margin-left: 0;
    }

    .news-page > ul.column-list > li[data-tab="important"] > a > p:first-of-type::after,
    .news-page > ul.column-list > li[data-tab="news"] > a > p:first-of-type::after {
        margin-left: 12px;
    }
}

@media (max-width: 549px) {
    .contents .news-page {
        gap: var(--s-6);
    }

    .news-page > div:first-child {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-3);
    }

    .news-page > div:first-child .tablist {
        min-width: unset;
    }
}