@charset "UTF-8";

/* common
---------------------------------------------------*/
#wrapper {
    background-color: #FEFEFE;
}
.footerGlobal {
    background-color: #F7FAFD;
}

/* article
---------------------------------------------------*/
#article {
    position: relative;
    background-color: #F7FAFD;
    border-radius: 12.0rem 12.0rem 0 0;
    padding-top: 0.5rem;
    z-index: 1;
}
#article .articles-inner {
    position: relative;
    padding: 0.5rem 0 9.0rem;
}
/* page-title */
#article .page-title {
    text-align: center;
    margin-bottom: 4.7rem;
}
#article .page-title .number {
    margin-bottom: 4.6rem;
}
#article .page-title .number p {
    position: relative;
    display: inline-block;
    color: var(--key-color);
    font-size: 2.6rem;
    font-weight: 700;
}
#article .page-title .number p::before,
#article .page-title .number p::after {
    content: '';
    position: absolute;
    left: 0;
    height: 2px;
    background-color: var(--key-color);
}
#article .page-title .number p::before {
    bottom: 0;
    width: 100%;
}
#article .page-title .number p::after {
    bottom: -0.8rem;
    width: 45%;
}
#article .page-title .number .num {
    font-size: 3.4rem;
    font-weight: 600;
    vertical-align: text-bottom;
    margin-left: 0.6rem;
}
#article .page-title .title {
    line-height: 1.4;
    color: var(--key-color);
    font-size: 4.4rem;
    font-weight: 700;
}
#article .page-title .title-sub {
    line-height: 1.4;
    color: var(--key-color);
    font-size: 2.8rem;
    font-weight: 700;
}
/* figure-wrap */
#article .figure-wrap {
    position: relative;
    width: 100%;
    max-width: min(900px, calc(900 / var(--pc-size) * 100vw));
    margin: 0 auto 8.0rem;
}
#article .figure-wrap .figure {
    position: relative;
    width: 100%;
    text-align: center;
}
#article .figure-wrap .figure img {
    width: 100%;
}
#article .figure-wrap .figure .caption {
    text-align: left;
    line-height: 1.6em;
    font-size: 2.0rem;
    margin-top: 1.4rem;
}
#article .figure-wrap .icon {
    position: absolute;
    top: max(-59px, calc(-59 / var(--pc-size) * 100vw));
    right: max(-146px, calc(-146 / var(--pc-size) * 100vw));
    width: min(325px, calc(325 / var(--pc-size) * 100vw));
}
#article .figure-wrap .icon.-circle {
    width: min(325px, calc(325 / var(--pc-size) * 100vw));
    aspect-ratio: 1 / 1;
    background-color: var(--white-color);
    border: 2px solid var(--key-color);
    border-radius: 50%;
    padding: 1.3rem;
    overflow: hidden;
}
#article .figure-wrap .icon.-bottom {
    top: auto;
    bottom: max(-80px, calc(-80 / var(--pc-size) * 100vw));
    right: max(-210px, calc(-210 / var(--pc-size) * 100vw));
    width: min(370px, calc(370 / var(--pc-size) * 100vw));
}
#article .figure-wrap .icon img {
    width: 100%;
}
#article .figure-wrap .figure + p {
    margin-top: 6.0rem;
}
#article .figure-wrap > p {
    max-width: min(900px, calc(900 / var(--pc-size) * 100vw));
    line-height: 2em;
    font-size: 2.0rem;
    margin: 0 auto;
}

/* section */
#article .section {}
#article .section + .section {
    margin-top: 9.0rem;
}
#article .section .section-title {
    position: relative;
    text-align: center;
    line-height: 1.4;
    color: var(--key-color);
    font-size: 4.0rem;
    font-weight: 700;
    margin-bottom: 2.0rem;
}
#article .section .section-title.-border {
    margin-bottom: 6.0rem;
}
#article .section .section-title.-border::before,
#article .section .section-title.-border::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    width: min(265px, calc(280 / var(--pc-size) * 100vw));
    height: min(12px, calc(12 / var(--pc-size) * 100vw));
    border-top: 2px solid var(--key-color);
}
#article .section .section-title.-border::before {
    right: calc(50% - 2px);
    border-right: 3px solid var(--key-color);
    transform: skewX(50deg);
    transform-origin: right bottom;
}
#article .section .section-title.-border::after {
    left: calc(50% - 2px);
    border-left: 3px solid var(--key-color);
    transform: skewX(-50deg);
    transform-origin: left bottom;
}
#article .section > p {
    max-width: min(900px, calc(900 / var(--pc-size) * 100vw));
    line-height: 2em;
    font-size: 2.0rem;
    margin: 0 auto;
}
#article .section > p + p {
    margin-top: 2em;
}
#article .section .figure {
    max-width: min(900px, calc(900 / var(--pc-size) * 100vw));
    text-align: center;
    margin: 0 auto;
}
#article .section .figure .caption {
    text-align: center;
    line-height: 2.0;
    font-size: 2.0rem;
    margin-top: 1em;
}
#article .section .figure + p {
    margin-top: 4.0rem;
}
#article .section .figure + .figure {
    margin-top: 3.0rem;
}
#article .section p + .figure {
    margin-top: 3.0rem;
}
#article .section .figure .figure-flex {
    display: flex;
    justify-content: center;
    gap: 4.0rem;
    max-width: 100%;
}
#article .section + .bg-blue {
    margin-top: 7.0rem;
}
#article .bg-blue + .section {
    margin-top: 10.0rem;
}
#article .bg-blue {
    position: relative;
    background-color: #DFEEFD;
    padding: 8.0rem 0 7.0rem;
    z-index: 1;
}
#article .bg-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 100vw;
    height: 100%;
    background-color: #DFEEFD;
    pointer-events: none;
    z-index: -1;
}
#article .bg-blue .section .section-title {
    color: var(--praimary-color);
}
#article .bg-blue .section .section-title.-border::before,
#article .bg-blue .section .section-title.-border::after {
    border-color: var(--praimary-color);
}

/* 820 */
@media screen and (min-width:1px) and (max-width: 820px) {
    #article {
        border-radius: 4.0rem 4.0rem 0 0;
    }
    #article .articles-inner {
        padding: 3.2rem 0 7.0rem;
    }
    /* page-title */
    #article .page-title {
        margin-bottom: 3.1rem;
    }
    #article .page-title .title {
        font-size: 2.2rem;
    }
    #article .page-title .title-sub {
        font-size: 1.8rem;
    }
    /* figure-wrap */
    #article .figure-wrap {
        max-width: 100%;
        margin-bottom: 5.0rem;
    }
    #article .figure-wrap .figure .caption {
        width: calc(335 / var(--sp-size) * 100vw);
        line-height: 1.75em;
        font-size: 1.6rem;
        margin: 0.9rem auto 0;
    }
    #article .figure-wrap .icon {
        position: absolute;
        top: calc(-36 / var(--sp-size) * 100vw);
        right: calc(-23 / var(--sp-size) * 100vw);
        width: calc(200 / var(--sp-size) * 100vw);
    }
    #article .figure-wrap .icon.-circle {
        width: calc(200 / var(--sp-size) * 100vw);
        padding: 0.8rem;
    }
    #article .figure-wrap .icon.-bottom {
        bottom: calc(-36 / var(--sp-size) * 100vw);
        right: calc(-23 / var(--sp-size) * 100vw);
        width: calc(200 / var(--sp-size) * 100vw);
    }
    #article .figure-wrap .figure + p {
        margin-top: 7.6rem;
    }
    #article .figure-wrap > p {
        max-width: calc(335 / var(--sp-size) * 100vw);
        font-size: 1.6rem;
    }

    /* section */
    #article .section + .section {
        margin-top: 7.2rem;
    }
    #article .section .section-title {
        line-height: 1.6;
        font-size: 2.2rem;
        margin-bottom: 2.9rem;
    }
    #article .section .section-title.-border {
        margin-bottom: 6.0rem;
    }
    #article .section .section-title.-border::before,
    #article .section .section-title.-border::after {
        width: calc(150 / var(--sp-size) * 100vw);
        height: calc(12 / var(--sp-size) * 100vw);
        border-top: 2px solid var(--key-color);
    }
    #article .section .section-title.-border::before {
        right: calc(50% - 1px);
    }
    #article .section .section-title.-border::after {
        left: calc(50% - 1px);
    }
    #article .section > p {
        max-width: calc(335 / var(--sp-size) * 100vw);
        font-size: 1.6rem;
    }
    #article .section .figure {
        max-width: 100%;
    }
    #article .section .figure .caption {
        line-height: 1.6;
        font-size: 1.4rem;
        margin-top: 1.0rem;
    }
    #article .section .figure + .figure {
        margin-top: 1.4rem;
    }
    #article .section .figure .figure-flex {
        width: calc(300 / var(--sp-size) * 100vw);
        flex-direction: column;
        gap: 2.0rem;
        margin: 0 auto;
    }

    #article .section + .bg-blue {
        margin-top: 8.0rem;
    }
    #article .bg-blue + .section {
        margin-top: 6.0rem;
    }
    #article .bg-blue {
        padding: 6.0rem 0 5.0rem;
    }
}

/* links
---------------------------------------------------*/
#links {
    background-color: #F7FAFD;
}
#links .btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    column-gap: 6.0rem;
}

/* 820 */
@media screen and (min-width:1px) and (max-width: 820px) {
    #links .btn-wrap {
        flex-direction: column;
        row-gap: 2.0rem;
    }
}

/* fixed-menu
---------------------------------------------------*/
#fixed-menu {
    position: fixed;
    top: min(100px, calc(100 / var(--pc-size) * 100vw));
    left: 0;
    z-index: 999;
    pointer-events: none;
}
#fixed-menu .btn-fixed-menu {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: min(166px, calc(166 / var(--pc-size) * 100vw));
    height: min(40px, calc(40 / var(--pc-size) * 100vw));
    line-height: 1;
    text-align: center;
    color: var(--white-color);
    font-size: 2.0rem;
    font-weight: 600;
    background-color: var(--key-color);
    border: 1px solid var(--key-color);
    cursor: pointer;
    z-index: 99;
}
#fixed-menu .btn-fixed-menu .arrow {
    display: inline-block;
    width: min(15px, calc(15 / var(--pc-size) * 100vw));
    aspect-ratio: 15 / 9;
    background-image: url('../../img/common/icon_arrow.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 0.6rem;
}
#fixed-menu .btn-link.-back {
    text-align: right;
}
#fixed-menu .btn-link.-back a,
#fixed-menu .btn-link.-back > span {
    width: min(188px, calc(188 / var(--pc-size) * 100vw));
    height: min(40px, calc(40 / var(--pc-size) * 100vw));
    font-size: 2.0rem;
    border-width: 1px;
}
#fixed-menu .btn-link.-back .icon {
    width: min(26px, calc(26 / var(--pc-size) * 100vw));
    margin-left: 2.0rem;
}
#fixed-menu .fixed-menu-inner {
    position: relative;
    width: min(445px, calc(445 / var(--pc-size) * 100vw));
    max-height: 80vh;
    overflow-y: auto;
    background-color: var(--white-color);
    border: 2px solid var(--key-color);
    padding: 3.0rem 2.0rem 4.0rem;
    filter: drop-shadow(0.3rem 0.3rem 0.6rem rgba(0, 0, 0, 0.16));
}
#fixed-menu .fixed-menu-inner::-webkit-scrollbar {
    width: 4px;
}
#fixed-menu .fixed-menu-inner::-webkit-scrollbar-track {
    border-radius: 4px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
}
#fixed-menu .fixed-menu-inner::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 50, .5);
    border-radius: 4px;
    box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
#fixed-menu .contents-index-list {
    margin-top: 2.0rem;
}
/* contents-index01 */
#fixed-menu .contents-index-list li.contents-index01 {
    margin-bottom: 2.0rem;
}
/* contents-index02 */
#fixed-menu .contents-index-list li.contents-index02 {
    margin-bottom: 1.0rem;
}

/* open / close */
#fixed-menu .btn-fixed-menu {
    transform-origin: left bottom;
    rotate: 90deg;
    user-select: none;
}
#fixed-menu .btn-fixed-menu .arrow {
    rotate: 180deg;
}
#fixed-menu .fixed-menu-inner {
    left: -100%;
    transition: left 0s;
    transition-delay: 0s;
}
/* is-active */
#fixed-menu:has(.is-active) {
    pointer-events: auto;
}
#fixed-menu:has(.is-active) .btn-fixed-menu {
    rotate: 0deg;
    transition: rotate 0.2s;
}
#fixed-menu:has(.is-active) .btn-fixed-menu .arrow {
    rotate: 0deg;
}
#fixed-menu:has(.is-active) .fixed-menu-inner {
    display: block;
    left: 0;
    transition: left 0.5s;
    transition-delay: 0.2s;
}
/* is-show */
#fixed-menu .btn-fixed-menu {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}
#fixed-menu.is-show .btn-fixed-menu {
    opacity: 1;
    pointer-events: auto;
}

/* 820 */
@media screen and (min-width:1px) and (max-width: 820px) {
    #fixed-menu {
        top: calc(100 / var(--sp-size) * 100vw);
    }
    #fixed-menu .btn-fixed-menu {
        width: calc(166 / var(--sp-size) * 100vw);
        height: calc(40 / var(--sp-size) * 100vw);
    }
    #fixed-menu .btn-fixed-menu .arrow {
        width: calc(12 / var(--sp-size) * 100vw);
    }
    #fixed-menu .btn-link.-back {
        margin-right: 1.0rem;
    }
    #fixed-menu .btn-link.-back a,
    #fixed-menu .btn-link.-back > span {
        width: calc(158 / var(--sp-size) * 100vw);
        height: calc(38 / var(--sp-size) * 100vw);
        font-size: 1.8rem;
    }
    #fixed-menu .btn-link.-back .icon {
        width: calc(26 / var(--sp-size) * 100vw);
        margin-left: 1.8rem;
    }
    #fixed-menu .fixed-menu-inner {
        width: calc(365 / var(--sp-size) * 100vw);
        max-height: calc(100vh - calc(110 / var(--sp-size) * 100vw));
        padding: 4.0rem 0 3.0rem 1.0rem;
    }
    #fixed-menu .fixed-menu-contents {
        overflow: hidden;
    }
}