@charset "utf-8"; /* ---------------------------------------------
navigation02 ※TOP、下層共通
--------------------------------------------- */
#contents #index .l-center {
    width: 140rem;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--s3);
    padding-left: var(--s3);
    box-sizing: content-box;
    max-width: 80vw;
}

.header-area-upper {
    padding: var(--s2) 9.5rem;
    text-align: right;
    line-height: 1.5;
    margin-bottom: -1rem;
}

.header-title, p.header-credit {
    font-size: 1.2rem;
    display: block;
    position: relative;
}

.header-title a {
    text-decoration: none;
}

.header-title a:hover {
    text-decoration: none;
    color: #007aff;
}

.gnavi-btn-close {
    display: none;
}

.toggle-content {
    display: none;
}

.gnavi-ctrl {
    transition: opacity 0.6s, visibility 0.6s;
    /* opacity: 0; */
    /* visibility: hidden; */
}

.gnavi-ctrl.is-show {
    opacity: 1;
    visibility: visible;
}

#low-header .gnavi-ctrl {
    opacity: 1;
    visibility: visible;
}

.gnavi-btn {
    width: var(--s7);
    height: var(--s6);
    background: #111827;
    display: block;
    position: fixed;
    top: var(--s1);
    right: 1.7rem;
    cursor: pointer;
    border-radius: 1rem;
    z-index: 9999;
}

.gnavi-btn span {
    width: var(--s4);
    height: 0.2rem;
    display: inline-block;
    background: #fff;
    position: absolute;
    left: 1.2rem;
    transform: translate(0, -50%);
    transition: transform 0.4s, opacity 0.4s;
    0: AUTO 100PX; 0: AUTO 100PX; padding: 0;
    0: AUTO 100PX; }

.gnavi-btn span:nth-of-type(1) {
    top: 1.7rem;
}

.gnavi-btn span:nth-of-type(2) {
    top: 2.4rem;
}

.gnavi-btn span:nth-of-type(3) {
    top: 3.1rem;
}

.gnavi-btn.is-active span:nth-of-type(1) {
    transform: translateY(0.7rem) rotate(-45deg);
}

.gnavi-btn.is-active span:nth-of-type(2) {
    opacity: 0;
}

.gnavi-btn.is-active span:nth-of-type(3) {
    transform: translateY(-0.7rem) rotate(45deg);
}

.gnavi-btn-close {
    width: 80%;
    margin: 0 auto 2rem;
    padding: var(--s2);
    background: #333;
    display: block;
    text-align: center;
    border-radius: 1rem;
}

.gnavi-btn-close__inner {
    padding: 0 0 0 var(--s3);
    display: inline-block;
    color: #fff;
    font-weight: 700;
    position: relative;
}

.gnavi-btn-close__inner::before {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(45deg);
}

.gnavi-btn-close__inner::after {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(135deg);
}

.gnavi-area {
    width: 100%;
    max-width: 37.5rem;
    height: 100vh;
    padding: var(--s3) var(--s2) var(--s10);
    display: block;
    /* background: #F5F5F5; */
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 38px;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    /* opacity: 0; */
}

.gnavi-title {
    display: none;
}

.gnavi-pc {
    display: none;
}

.gnavi-list {
    /* border-bottom: 1px solid #333; */
    position: relative;
    padding: 1rem 1rem 1rem;
}

.gnavi-list li {
    padding-left: 0;
}

.gnavi-list__item::before {
    display: none;
}

.gnavi-list__link {
    width: 100%;
    margin: 0 auto;
    padding: var(--s2) var(--s4) var(--s1) var(--s2);
    /* border-top: 1px solid #333; */
    display: block;
    font-weight: 700;
    line-height: 2;
    text-decoration: none;
    position: relative;
}

.gnavi-list__link::after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    background: url("img/arrow-01-black-right.svg") no-repeat center/61% auto;
    position: absolute;
    top: 50%;
    right: var(--s2);
    transform: translate(0, -50%) rotate(0);
    transition: transform 0.3s;
}

.gnavi-list__link--toggle::after {
    background-image: url("img/arrow-01-black-down.svg");
    background-size: 100% auto;
}

.gnavi-list__link--toggle.is-open::after {
    transform: translate(0, -50%) rotate(180deg);
}

.gnavi-list__sub {
    width: 100%;
    background: #fff;
}

.gnavi-list__sub a {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 0 var(--s4) var(--s1) var(--s4);
    color: #0f4c81;
}

.gnavi-list__low .gnavi-list__link {
    padding: var(--s1) var(--s4) var(--s2) var(--s4);
    margin-left: 2rem;
}

.gnavi-list__low .gnavi-list__link::after {
    content: "└";
    background: none;
    transform: translateY(-50%);
    position: absolute;
    top: 40%;
    left: 1rem;
}

.is-gnavi-open .gnavi-area {
    opacity: 1;
    transform: translateX(0);
}

/* ---------------------------------------------
index01(目次)
--------------------------------------------- */
.onb-index01-frame {
    width: 100%;
    background-color: var(--site-color09);
}

.onb-index01-wrap {
    margin: 0 auto;
    padding: var(--s1) var(--s3);
    border: solid 0.1rem #D0D3E0;
    background-color: transparent;
    position: relative;
}

.onb-index01-title {
    padding: var(--s2) var(--s2) var(--s2) var(--s6);
    color: #333;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1;
    background: url("./img/dummy-icon.png") no-repeat left center;
    background-size: 4rem auto;
    position: relative;
    cursor: pointer;
}

.onb-index01-title::before {
    content: "";
    width: 2rem;
    height: 0.3rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%);
}

.onb-index01-title::after {
    content: "";
    width: 0.3rem;
    height: 2rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2.9rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

.onb-index01-title.is-open::after {
    transform: translate(0, -50%) rotate(270deg);
}

.onb-index01-chapter {
    padding: var(--s2) var(--s2) var(--s2) var(--s4);
    font-weight: 700;
}

.onb-index01-chapter-h {
    margin: 0 0 0 var(--s2);
    font-size: 100%;
    line-height: 1.7;
    position: relative;
}

.onb-index01-chapter-h a {
    display: block;
    text-decoration: none;
}

.onb-index01-chapter-h a:hover {
    opacity: .6;
}

.onb-index01-chapter-h-two {
    margin-left: var(--s2);
    position: relative;
}

.onb-index01-chapter-h-three {
    margin-left: var(--s4);
    position: relative;
}

.onb-index01-chapter-h-two::before, .onb-index01-chapter-h-three::before {
    position: absolute;
    top: 0;
    left: -1.5em;
}

.onb-index01-chapter-h-two::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 2rem;
    background-color: var(--site-color02);
    transform: translateY(-50%);
    top: .8em;
}

.onb-index01-chapter-h-three::before {
    content: "└";
}

.more-content {
    display: none;
}

.onb-index01-content {
    background-color: #fff;
}

/* ---------------------------------------------
related-article01(関連記事)
--------------------------------------------- */
.related-article01-frame {
    border: 1px solid var(--site-color09);
    margin: var(--s6) auto;
    padding: var(--s1) var(--s3) var(--s4) var(--s3);
    background: #fff;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 1.5rem;
}

.related-article01-title {
    padding: var(--s2);
    color: #0f4c81;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    background-size: 5rem auto;
    position: relative;
    border-bottom: 1px solid #D0D3E0;
}

.related-article01-list {
    padding: var(--s2) 0 var(--s2) var(--s2);
    font-weight: 700;
}

.related-article01-list li {
    margin: 0;
    padding-left: 1.2em;
    font-size: 100%;
    line-height: 1.5;
    position: relative;
}

.related-article01-list li + li {
    margin-top: 10px;
}

.related-article01-list li::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #0085ff;
    position: absolute;
    top: .6rem;
    left: 0;
}

.related-article01-list a {
    display: block;
    text-decoration: none;
}

.related-article01-list a:hover {
    opacity: 0.6;
}

.relations-box.relations-box--column {
    display: flex;
    gap: 10px;
}

.relations-box__pic {
    flex: 0 0 150px;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .related-article01-list {
        padding: 0;
    }

    .related-article01-list li {
        margin-left: 0;
    }

    .relations-box__pic {
        flex: 0 0 100px;
    }

    #contents #index .l-center {
        padding-right: 0;
        padding-left: 0;
        box-sizing: border-box;
        max-width: fit-content;
        width: 95%;
    }
}

.l-pickup-contents03-l {
    width: 100%;
    background: url('./img/pickup-bg-l.svg') no-repeat left top var(--site-color10);
    color: #000000;
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "catch image" "content image";
    background-color: #F5F7FB;
    border-radius: 1.5rem;
    padding: 4rem 3rem 3rem;
    /* ←影を追加 */
}

.l-pickup-contents03-l-logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.l-pickup-contents03-l img {
    width: 27rem;
}

.l-pickup-contents03-l-img img {
    width: 100%;
}

.l-pickup-contents03-l-catch {
    padding: var(--s8) var(--s8) var(--s2) var(--s8);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    grid-area: catch;
}

.l-pickup-contents03-l-img {
    padding: var(--s2);
    grid-area: image;
}

.l-pickup-contents03-l-content {
    padding: 0;
    grid-area: content;
    position: relative;
    z-index: 5;
}

.btn-pickup-contents03 {
    margin: var(--s5) auto 0 auto;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-pickup-contents03-l {
        grid-template-columns: none;
        grid-template-areas: inherit;
        padding: 3rem 2rem;
    }

    .l-pickup-contents03-l::before {
        width: 6.8rem;
        height: 6.8rem;
        top: -3.4rem;
        left: 0;
    }

    .l-pickup-contents03-l-catch {
        padding: var(--s4) var(--s2) 0 var(--s2);
        font-size: 2.4rem;
    }

    .l-pickup-contents03-l-img {
        padding: 0;
    }

    .l-pickup-contents03-l-content {
        max-width: inherit;
        padding: 0 var(--s2) var(--s4) var(--s2);
    }

    .l-pickup-contents03-l-catch, .l-pickup-contents03-l-img, .l-pickup-contents03-l-content {
        grid-area: inherit;
        padding: 1rem 0;
    }

    .btn-pickup-contents03 {
        margin-right: var(--s1);
    }
}

.onb-2c-taglist-title span {
    width: 7em;
    height: 5.4rem;
    background: #111827;
    color: #fff;
    text-align: center;
    border-radius: 15rem;
    font-size: 3rem;
    font-weight: bold;
    padding: 10px 3px 4px;
    display: block;
    margin: -3.7rem auto 1rem;
}

.onb-2c-taglist-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

.tag-list-3c {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.tag-list-3c li {
    width: calc((100% - var(--s2))/ 3);
    text-align: center;
    line-height: 1.5;
    border-radius: 1rem;
}

section.sec02.secbg .tag-list-3c li a {
    position: relative;
}

section.sec02.secbg .tag-list-3c li .tag-name::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background: url(img/arrow-01-black-down.svg) no-repeat;
    background-size: 1.2rem auto;
    position: absolute;
    top: 60%;
    right: var(--s2);
    transform: translate(0, -50%) rotate(0);
    transition: transform 0.3s;
}

.tag-list-3c li::before {
    display: none;
}

.twb-tag-colored {
    background-color: var(--site-color14);
    color: #fff;
}

.twb-tag-white {
    border: 1px solid var(--site-color16);
    background-color: #fff;
    color: var(--site-color16);
}

.twb-tag-colored .tag-name, .twb-tag-white .tag-name {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.8rem;
    padding: .8rem;
    border-radius: 1rem;
}

.twb-tag-colored .tag-name a, .twb-tag-white .tag-name a {
    text-decoration: none;
    display: block;
}

.twb-tag-colored .tag-name:hover, .twb-tag-white .tag-name:hover {
    background-color: #f5f7fb;
}

.twb-tag-colored .tag-name a:hover, .twb-tag-white .tag-name a:hover {
    color: #0085ff;
    opacity: 1;
}

/*------------------------------------------
    1box column settings
*/
.column-medium {
    padding: 0 var(--s4) var(--s4);
    border: 1px solid #ccc;
    border-radius: 1.5rem;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.onb-box-full {
    width: calc(100% + var(--s8));
    margin-left: calc(var(--s4) * -1);
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .column-medium {
        padding: 0 var(--s2);
    }

    .onb-box-full {
        width: calc(100% + var(--s4));
        margin-left: calc(var(--s2) * -1);
    }
}

.onb-item-title-frame {
    padding: var(--s2);
    background-color: #0f4c81;
    position: relative;
    border-radius: 1.2rem 1.2rem 0 0;
    margin-bottom: 4rem;
}

.onb-item-title-icon {
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: -4rem;
    left: -2rem;
}

.onb-item-title-icon img {
    width: 100%;
}

.l-onb-item-title {
    /* color: #fff; */
    display: flex;
    align-items: center;
    /* gap: var(--s2); */
    flex-direction: column;
}

.l-onb-item-title__side, .l-onb-item-title__main {
    padding: var(--s2);
    text-align: center;
    line-height: 1.2;
}

.l-onb-item-title__side span {
    font-size: 1.4rem;
    padding: 0;
}

.l-onb-item-title__side {
    width: calc((100% - var(--s2))*.3);
    font-size: 2.8rem;
    color: #111827;
    text-align: center;
    border-radius: 15rem;
    border: solid 1px #111827;
    font-weight: bold;
    padding: 5px 5px 10px;
}

.l-onb-item-title__main {
    /* width: calc((100% - var(--s2))*.7); */
}

.onb-item-title-catch {
    margin-bottom: var(--s1);
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
}

.onb-item-title-catch--underline {
    padding-bottom: var(--s1);
    border-bottom: 5px solid var(--site-color15);
    display: inline-block;
}

.onb-item-title-title {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .onb-item-title-frame {
        padding: var(--s2);
    }

    .onb-item-title-icon {
        width: 6rem;
        height: 6rem;
        position: absolute;
        top: -2rem;
        left: -1rem;
    }

    .l-onb-item-title {
        flex-direction: column;
    }

    .l-onb-item-title__side, .l-onb-item-title__main {
        width: 100%;
        font-size: 2.4rem;
    }

    .l-onb-item-title__side span, .l-onb-item-title__main span {
        font-size: 1.2rem;
    }
}

.l-comparison {
    display: flex;
    gap: 0;
    flex-direction: column;
    border-radius: 1rem;
    border: solid 1px #0f4c81;
    border-radius: 1rem;
    background: #fff;
    margin-bottom: 5rem;
}

.comparison {
    width: calc(100% - 45px);
    padding: 0;
}

.comparison-content {
    /* padding-bottom: var(--s4); */
    position: relative;
    z-index: 5;
}

.comparison--left {
    /* padding-right: var(--s5); */
    background-color: var(--site-color07);
    border-radius: 1rem;
    /* border: solid 1px #0f4c81; */
    /* border-radius: 1rem; */
    background: #fff;
}

.comparison--right {
    /* padding-left: var(--s5); */
    background-color: #F5F7FB;
    border-radius: 1rem;
    border: solid 1px #0085ff;
    border-radius: 1rem;
}

.comparison-title {
    margin-bottom: var(--s6);
    padding: var(--s2);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    position: relative;
}

.comparison-title::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 1.5rem solid transparent;
    border-left: 1.5rem solid transparent;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    bottom: -1.4rem;
}

.comparison-title--light {
    /* background-color: #0f4c81; */
    border-radius: 0.7rem 0.7rem 0 0;
    color: #0f4c81;
    width: 206%;
    font-size: 3.5rem;
    margin-bottom: var(--s5);
}

.comparison-title--light::after {
    border-right: 0;
    border-bottom: 0;
}

.comparison-title--dark {
    width: 100%;
    background-color: #0085ff;
    border-radius: 0.7rem 0.7rem 0 0;
    margin-bottom: var(--s6);
}

.comparison-title--dark span {
    font-size: 2rem;
    padding: var(--s1) var(--s1 );
    color: #0085ff;
    border-radius: 1.2rem;
    background: #ffffff;
    display: block;
    width: 80%;
    margin: 0 auto 0.5rem;
}

.comparison-title--dark sup {
    top: 0;
    display: block;
    font-size: 1.3rem;
    padding: 0.8rem;
}

.comparison-title--dark::after {
    border-right: 1.5rem solid #0085ff;
    border-bottom: 1.5rem solid #0085ff;
}

.comparison-title--dark::before {
    content: "?";
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #ffffff;
    color: #0085ff;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
}

.comparison-content, .comparison-box, .comparison-pic {
    margin-left: var(--s4);
    margin-right: var(--s4);
}

.comparison-box {
    margin-bottom: var(--s5);
    /* padding-bottom: var(--s4); */
}

.comparison--left .comparison-box {
    /* border-bottom: 1px solid var(--site-color05); */
}

.comparison--right .comparison-box {
    /* border-bottom: 1px solid #333; */
}

.comparison-box__ttl {
    margin-bottom: 1.6rem;
    font-size: 2rem;
    font-weight: 700;
    color: #0085ff;
    line-height: 1.5;
}

.comparison-box__txt {
    margin-bottom: 1.6rem;
    line-height: 1.5;
}

.comparison-pic {
    margin-bottom: var(--s2);
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

.comparison-pic img {
    border-radius: 1rem;
    text-align: center;
    margin: auto;
}

.comparison-circle-area {
    position: relative;
    /* border: solid 1px #0f4c81; */
    border-radius: 1rem;
    /* background: #fff; */
}

.comparison-circle p {
    line-height: 1.3;
    font-weight: 700;
}

.comparison-circle__img {
    width: 4rem;
    height: 9rem;
    transform: translateX(-267%);
    position: absolute;
    top: 6rem;
    left: 50%;
}

.comparison-first, .comparison-second, .comparison-third {
    position: absolute;
    right: -8.4rem;
    z-index: 10;
}

.comparison-first {
    top: 35%;
}

.comparison-second {
    top: 10%;
}

.comparison-third {
    top: 5%;
}

/*----------------------------------
Accordion settings
*/
.comparison-content .acc-more-btn {
    margin: var(--s5) auto;
    line-height: 1.4;
    position: relative;
}

.comparison-content .acc-more-btn span {
    width: 100%;
    margin: var(--s5) auto;
    padding: var(--s2) var(--s5);
    border: .2rem solid var(--site-color05);
    border-radius: 1rem;
    background: url('./img/acc-off.svg') no-repeat 95% center #fff;
    background-size: 1.4rem auto;
    display: block;
    font-weight: 700;
    text-align: center;
    transform: translate(0, 0);
    transition: transform 0.3s;
    cursor: pointer;
    z-index: 1;
}

.comparison-content .acc-more-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--site-color03);
    border-width: 0 1px 1px 0;
    transform: translate(.8rem, .8rem);
    border-radius: 1rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.comparison-content .acc-more-btn:hover span {
    transform: translate(.8rem, .8rem);
}

.comparison-content .acc-more-btn.is-open span {
    background: url('./img/acc-on.svg') no-repeat 95% center #fff;
}

.more-content {
    display: none;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-comparison {
        display: flex;
        gap: 22px;
    }

    .comparison {
        width: calc((100% - 22px) / 2);
    }

    .comparison--left {
        padding-right: 0;
        width: 100%;
    }

    .comparison--right {
        padding-left: var(--s2);
    }

    .comparison-title--light {
        width: calc(95% + var(--s2));
        margin-bottom: var(--s1);
        font-size: 6vw;
    }

    .comparison-title--dark {
        width: calc(100% + var(--s2));
        margin-left: calc(-1 * var(--s2));
        font-size: 2rem;
        margin-bottom: var(--s4);
        line-height: 1.2;
    }

    .comparison-box, .comparison-pic {
        margin-left: var(--s1);
        margin-right: var(--s1);
    }

    .comparison-content {
        margin: 0;
    }

    .comparison-circle {
        width: 9%;
        height: inherit;
        padding: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    .comparison-circle p {
        font-size: 1.4rem;
        line-height: 1;
        writing-mode: vertical-rl;
        text-orientation: upright;
    }

    .comparison-circle__img {
        display: none;
    }

    .comparison-arrow {
        margin-bottom: 8rem;
        position: relative;
    }

    .comparison-arrow::after {
        content: "";
        width: 8rem;
        height: calc(8rem / 2 * tan(45deg));
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background-color: #ccc;
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        bottom: -6rem;
    }

    .comparison-content .acc-more-btn {
        margin-right: var(--s2);
        padding: 0;
    }

    .comparison-content .acc-more-btn::before {
        right: 1rem;
    }

    .comparison-content .acc-more-btn::after {
        right: 1.9rem;
    }

    .comparison-content .acc-more-btn {
        margin: var(--s3) var(--s1) var(--s3) 0;
    }

    .comparison-content .acc-more-btn span {
        margin: var(--s3) var(--s1) var(--s3) 0;
        padding: 2rem 3rem 2rem 1rem;
    }

    .comparison-content .acc-more-btn:hover span {
        transform: none;
    }
}

.profile-area {
    margin-top: 2rem;
    padding: var(--s4);
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-areas: "img catch" "img text" "btn text";
    gap: var(--s1) var(--s4);
    background-color: var(--site-color07);
    position: relative;
    border-radius: 1rem;
}

.profile-img-area {
    grid-area: img;
}

.profile-text-area {
    grid-area: text;
}

.profile-text-area ul {
    margin-left: var(--s3);
}

.profile-caption {
    margin-top: var(--s1);
    text-align: center;
}

.profile-catch {
    padding-bottom: var(--s2);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--site-color03);
    line-height: 1.5;
    grid-area: catch;
}

.profile-catch span {
    font-size: 3.5rem;
    display: block;
    color: #ffffff;
}

.profile-detail {
    margin-bottom: var(--s4);
    padding: var(--s1) var(--s1) var(--s1) var(--s2);
    font-size: 1.8rem;
    font-weight: 700;
    border-left: 6px solid var(--site-color14);
    border-bottom: 1px solid var(--site-color14);
}

.profile-box {
    /* margin-top: var(--s6); */
    /* padding: var(--s2); */
    /* background-color: #fff; */
    /* border-radius: 1rem; */
}

.profile-box-ttl span {
    display: block;
    line-height: 1;
    font-size: 2.5rem;
}

.profile-box-ttl span span {
    display: contents;
    font-size: 3rem;
    color: #c62828;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .profile-area {
        padding: var(--s2);
        grid-template-columns: none;
        grid-template-areas: inherit;
        gap: var(--s2);
    }

    .profile-area::before {
        font-size: 1.4rem;
    }

    .profile-img-area, .profile-text-area, .profile-btn-area, .profile-catch {
        grid-area: inherit;
    }

    .profile-img-area {
        display: flex;
        align-items: center;
        gap: var(--s2)
    }

    .profile-img {
        width: calc((100% - var(--s2))*.3);
    }
}

.section-title08 {
    margin-top: 15rem;
    margin-bottom: 5rem;
    padding: var(--s3);
    font-size: 3.6rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--wp--preset--color--vivid-green-cyan);
    text-align: center;
    line-height: 1.5;
    border-radius: 1.5rem;
    position: relative;
    margin: 0 15% 8rem;
}

.section-title08::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 2rem solid transparent;
    border-left: 2rem solid transparent;
    border-right: 2rem solid var(--wp--preset--color--vivid-green-cyan);
    border-bottom: 2rem solid var(--wp--preset--color--vivid-green-cyan);
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    bottom: -1.9rem;
}

.choosing-reason .onb-iconbox03-frame {
    padding: var(--s4) var(--s2) var(--s2);
}

.slide-product-lineup {
    padding: var(--s2) var(--s4);
    margin-bottom: 2rem;
    background-color: #F5F7FB;
    text-align: center;
    font-weight: bold;
    font-size: 2.5rem;
    line-height: 1.3;
    border-radius: 1rem;
}

.slide-product-lineup span {
    display: block;
    font-size: 1.5rem;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .section-title08 {
        padding: var(--s2);
        font-size: 2.8rem;
        margin-top: 10rem;
        margin-bottom: 5rem;
    }

    .section-title08::after {
        bottom: -1.5rem;
    }
}

.onb-iconbox03-frame {
    margin-top: 1.5rem;
    padding: var(--s2);
    background-color: var(--site-color06);
}

.onb-iconbox03-frame p {
    font-size: 1.6rem;
}

.onb-iconbox03-sub {
    margin-top: -6.2rem;
    /* text-align: center; */
    margin-bottom: 1rem;
}

.onb-iconbox03-sub span {
    padding: var(--s1) var(--s4);
    /* display: inline-block; */
    background-color: #111827;
    color: #fff;
    border-radius: 15rem;
    /* border: solid 1px #111827; */
    font-size: 2.5rem;
    font-weight: bold;
    /* padding: 3px; */
}

.onb-iconbox03-img {
    padding-left: var(--s4);
    padding-right: var(--s4);
    text-align: center;
}

.onb-iconbox03-img iframe {
    width: 70%;
    height: 30vw;
    /* border-radius: 1.5rem; */
}

.choosing-reason .onb-iconbox03-catch {
    color: #0f4c81;
    /* text-align: center; */
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.onb-iconbox03-catch {
    padding-bottom: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--site-color03);
    line-height: 1.5;
    border-bottom: 2px solid var(--site-color17);
}

.onb-iconbox03-caption {
    text-align-last: left;
}

.onb-five-slider-container {
    position: relative;
    padding: 0 12rem;
}

.onb-five-slider.swiper-thumbs .swiper-slide {
    width: 20%;
}

.onb-five-slider .swiper-slide-thumb-active {
    outline: 4px solid var(--site-color17);
    outline-offset: -4px;
}

.onb-five-slider2 {
    margin-bottom: var(--s3);
}

.onb-five-slider-container .swiper-button-next, .onb-five-slider-container .swiper-button-prev {
    top: calc(40% - 100px);
    width: 5rem;
    height: 5rem;
}

.onb-five-slider-container .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset,5.5rem);
}

.onb-five-slider-container .swiper-button-next {
    right: var(--swiper-navigation-sides-offset,5.5rem);
}

.onb-five-slider-container .swiper-button-next:hover, .onb-five-slider-container .swiper-button-prev:hover {
    opacity: .6;
}

.onb-five-slider-container .swiper-button-next:after, .onb-five-slider-container .swiper-rtl .swiper-button-prev:after {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url("./img/slider-arrow-right.svg") no-repeat center center;
    background-size: contain;
}

.onb-five-slider-container .swiper-button-prev:after, .onb-five-slider-container .swiper-rtl .swiper-button-next:after {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url("./img/slider-arrow-left.svg") no-repeat center center;
    background-size: contain;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .onb-five-slider-container .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset,-1.5rem);
    }

    .onb-five-slider-container .swiper-button-next {
        right: var(--swiper-navigation-sides-offset,-1.5rem);
    }

    .onb-five-slider-container .swiper-button-next, .onb-five-slider-container .swiper-button-prev {
        width: 3rem;
        height: 3rem;
        top: 35%;
    }
}

.section-title02-frame {
    margin-top: 5rem;
    text-align: center;
    position: relative;
    margin-bottom: 5rem;
}

.section-title02 {
    font-size: 4rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

.section-title02-sub {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #0F4C81;
    text-align: center;
    position: absolute;
    top: -1.5em;
    left: 0;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .section-title02 {
        font-size: 7vw;
        line-height: 1.5;
    }
}

/*------------------------------------------
    3box column settings
*/
.column-small {
    padding: 0 var(--s2) var(--s2);
    border: 1px solid #ccc;
    border-radius: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.thb-box-full {
    width: calc(100% + var(--s4));
    margin-left: calc(var(--s2) * -1);
    margin-bottom: 1rem;
}

.arrow-title {
    margin-bottom: 2.3rem;
    padding: var(--s2);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--site-color03);
    text-align: center;
    line-height: 1.5;
    position: relative;
    border-radius: 1.2rem 1.2rem 0 0;
}

.arrow-title::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 1.5rem solid transparent;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid var(--site-color03);
    border-bottom: 1.5rem solid var(--site-color03);
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    bottom: -1.3rem;
}

.arrow-title-sub {
    padding: var(--s1);
    margin-bottom: .8rem;
    background-color: #fff;
    font-size: 1.4rem;
    color: var(--site-color03);
    line-height: 1;
    display: inline-block;
}

.arrow-title-small {
    font-size: 1.4rem;
}

.l-pickup-contents01-box {
    flex: 1;
}

.l-pickup-contents01-box img {
    /* min-height: 52rem; */
    display: block;
    /* object-fit: cover; */
}

.l-pickup-contents01-content {
    max-width: 50rem;
    padding: 0 var(--s8);
    position: relative;
    z-index: 5;
}

.pickup-contents01-catch {
    margin-bottom: 1rem;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--site-color03);
    line-height: 1.5;
}

.btn-pickup-contents01 {
    margin: var(--s5) auto 0 auto;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-pickup-contents01 {
        min-height: inherit;
        flex-direction: column;
    }

    .l-pickup-contents01-content {
        max-width: inherit;
        padding: var(--s4) var(--s2);
    }

    .l-pickup-contents01-box img {
        min-height: inherit;
        object-fit: inherit;
    }

    .pickup-contents01-catch {
        font-size: 2.4rem;
    }

    .btn-pickup-contents01 {
        margin-right: var(--s1);
    }
}

.l-pickup-contents01 {
    width: 100%;
    /* min-height: 50rem; */
    display: flex;
    align-items: flex-start;
    background-color: #f5f7fb;
    position: relative;
}

.l-pickup-contents01--reverse {
    min-height: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    padding: 7rem 0 3rem;
    /* background-color: #e1ebff; */
    background: #e1ebff url(img/sec_bg.png) no-repeat top left;
    background-size: 50% auto;
}

.l-pickup-contents01--reverse .l-pickup-contents01-box {
    display: grid;
}

.l-pickup-contents01-box {
}

.l-pickup-contents01-box img {
    /* min-height: 55rem; */
    display: block;
    /* object-fit: cover; */
    width: 100%;
}

section.sec04.pr .pickup-contents01-catch img {
    width: 30rem;
}

.pickup-contents01-catch span {
    display: block;
    font-size: 4rem;
    color: #333333;
    padding: 0;
}

.l-pickup-contents01-content {
    max-width: 60rem;
    padding: 40px var(--s4);
    position: relative;
    z-index: 5;
}

.l-pickup-contents01-content .btn-link {
    margin-top: 2rem;
}

.l-pickup-contents01-content--reverse {
    margin-left: auto;
}

.l-pickup-contents01-content--reverse .pickup-contents01-catch {
    text-align: right;
}

.pickup-contents01-catch {
    margin-bottom: 3rem;
    font-size: 4rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.l-pickup-contents01--reverse .l-pickup-contents01-box p, .btn-pickup-contents01.btn-link {
    max-width: 60rem;
    padding: 0 var(--s4);
}

.l-pickup-contents01--reverse .btn-pickup-contents01 {
    margin: 0;
    margin-top: 2rem;
}

section.sec04.pr .l-pickup-contents01-box {
    position: relative;
}

section.sec04.pr .l-pickup-contents01-box.textbox::before {
    content: "PR・監修";
    width: 6em;
    height: 3rem;
    background: #333;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -25px;
    left: 30px;
    border-radius: 15rem;
    /* border: solid 1px #333; */
    font-size: 2rem;
    font-weight: bold;
    padding: 10px 3px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
}

.pickup-contents01-catch span {
    display: block;
    font-size: 2rem;
    color: #333333;
    padding: 0;
    margin-left: -1rem;
    padding-top: 1rem;
}

.pickup-contents01-catch span span {
    display: contents;
    font-size: 2rem;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-pickup-contents01 {
        min-height: inherit;
        flex-direction: column-reverse;
        padding-bottom: 4rem;
    }

    .l-pickup-contents01-content {
        max-width: inherit;
        padding: var(--s2) var(--s3);
    }

    .l-pickup-contents01-box img {
        min-height: inherit;
        object-fit: inherit;
    }

    .l-pickup-contents01-box img {
        position: absolute;
        top: 29vw;
        left: 0;
        right: 0;
        margin: auto;
    }

    .pickup-contents01-catch {
        font-size: 2.4rem;
        margin-bottom: 60vw;
        display: flex;
        flex-direction: column;
    }

    .btn-pickup-contents01 {
        margin-right: var(--s1);
    }
}

.section-title04 {
    margin-top: 5rem;
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--site-color03);
    text-align: center;
    position: relative;
}

.section-title04::after {
    content: "";
    width: 10rem;
    height: 6px;
    background-color: var(--site-color05);
    transform: translateX(-50%);
    position: absolute;
    bottom: -3.2rem;
    left: 50%;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .section-title04 {
        font-size: 2.8rem;
        line-height: 1.5;
    }
}

/* ===== Global / Utilities ===== */
:root {
    --ink: #111827;
    /* 本文色 */
    --blue: #0F4C81;
    /* Denim Blue（基調色） */
    --surface: #F5F7FB;
    /* 面の塗り */
    --bg: #FFFFFF;
    /* 背景 */
    --signal: #C62828;
    /* アクセント（控えめに使用） */
    --radius-xl: 1.25rem;
    /* 20px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
    --shadow-soft: 0 4px 16px rgba(0,0,0,.08);
    --container: 1200px;
}

/* ===== MV (Hero) ===== */
.mv {
    position: relative;
    isolation: isolate;
    padding: 7rem 0;
    overflow: hidden;
    background: url("/wp/wp-content/uploads/mv.png") no-repeat center right 6vw;
    background-size: auto 63rem;
    /* 画面幅に合わせて拡大縮小 */
}

.mv-area-logo {
    width: 25%;
    padding-bottom: 2rem;
}

.mv .mv__title {
    font-size: 3.5rem;
    color: #111827;
    font-weight: bold;
}

.mv span.mv__title-accent {
    display: block;
    font-size: 4.5rem;
    font-weight: bold;
    color: #0f4c81;
    line-height: 1.2;
    margin-bottom: 1rem;
    padding: 0;
}

.mv .mv__lead {
    color: #111827;
    margin-top: 4rem;
    font-weight: bold;
}

.mv .credit {
    font-size: 1.3rem;
    color: #111827;
}

.mv__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(1200px 600px at 85% -10%, rgba(15,76,129,.28), transparent 60%), radial-gradient(900px 480px at -10% 20%, rgba(15,76,129,.18), transparent 60%), linear-gradient(to bottom, #fff 0%, var(--surface) 100%);
}

.mv__inner {
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    max-width: 70rem;
    margin-right: 44.5vw;
    margin-left: auto;
    padding-right: var(--s3);
    padding-left: var(--s3);
    box-sizing: content-box;
    background-color: rgb(245 247 251 / 0.6);
    border-radius: 1.5rem;
    padding: 3rem 3rem;
    border: solid 4px #f5f7fb;
}

.mv__copy {
    min-width: 0;
    /* padding-right: 48%; */
    line-height: 1.3;
}

.mv__eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
    background: rgba(15,76,129,.08);
    border: 1px solid
}

h2.mv__title {
    font-size: 6rem;
    color: #111827;
}

span.mv__title-accent {
    display: block;
    font-size: 3rem;
}

p.mv__lead {
    color: #111827;
    margin-top: 4rem;
}

.l-pickup-contents03-l h2 {
    font-size: 2rem;
    font-weight: bold;
    /* padding: 15px 0 30px; */
    position: relative;
    text-align: left;
}

section.sec01 .l-center {
    position: relative;
}

.l-pickup-contents03-l::before {
    content: "PR・監修";
    width: 6em;
    height: 3rem;
    background: #111827;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -18px;
    left: 23px;
    border-radius: 15rem;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px 3px 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* ←影を追加 */
}

.l-pickup-contents03-l-content-text {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    line-height: 1.4;
    color: #0085ff;
}

section.sec01 {
    margin: 5rem auto;
}

section.sec03 {
    margin: 15rem auto 25rem;
}

section.sec03 .arrow-title {
    background: #111827 url(img/sec_bg.png) no-repeat top left;
    background-size: 120% auto;
}

section.sec03 .arrow-title a {
    color: #fff;
    background: url(./img/arrow-01-wht-right.svg) no-repeat center right / auto 0.7em;
}

section.sec03 .arrow-title a:hover {
    color: #006aff;
}

section.sec03 .arrow-title::after {
    border-right: 1.5rem solid #4c5060;
    border-bottom: 1.5rem solid #4c5060;
}

section.sec02 {
    margin: 10rem auto 15rem;
    padding: 10rem 0;
}

section.sec02.secbg {
    background: #F5F7FB url(img/sec_bg.png) no-repeat top left;
    background-size: 60% auto;
}

section.sec06 {
    margin: 15rem auto;
}

section.sec07 {
    /* margin: 15rem auto; */
    /* background-color: #F5F7FB; */
    padding: 10rem 0;
    background: #F5F7FB url(img/sec07bg.png) no-repeat top left;
    background-size: auto 100%;
    background-attachment: fixed;
}

section.sec07 .section-title02-sub {
    width: 25rem;
    margin-bottom: 1rem;
    font-size: 3rem;
    position: relative;
    top: 0;
    color: #111827;
    border-radius: 15rem;
    border: solid 1px #111827;
    padding: 10px 0 10px;
    margin: 0 auto;
}

section.sec08 {
    margin: 15rem auto;
}

section.sec09 {
    margin: 10rem auto 10rem;
    /* background-color: #F5F7FB; */
}

section.sec09 .profile-catch span {
    display: contents;
}

section.sec10 {
    margin: 0 auto;
    /* padding: 5rem 0 0; */
}

.l-grid-two-large {
}

section.sec02 .l-grid-two-large {
    margin: 4rem auto 1.5rem;
}

section.sec02 .column-tag {
    text-align: center;
}

section.sec02 .l-grid-two-large .l-stack-small {
    padding: 1rem 2rem 2rem;
    gap: var(--s2);
}

section.sec02 .column-medium.location {
    margin: 4rem auto;
}

section.sec02 .column-medium.location .comparison-wrapper {
    display: flex;
}

section.sec02 .column-medium .l-onb-item-title__side {
    width: calc((100% - var(--s2)) * .3);
    font-size: 2.8rem;
    color: #ffffff;
    text-align: center;
    border-radius: 15rem;
    border: solid 1px #ffffff;
    font-weight: bold;
    padding: 5px 5px 10px;
}

.m-title01 {
    padding: var(--s2) var(--s1) var(--s2)var(--s1);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.l-pickup-contents02-box {
    flex: 1;
}

.l-pickup-contents02-content {
    max-width: 50rem;
    padding: var(--s8);
    position: relative;
    z-index: 5;
}

.pickup-contents02-catch {
    margin-bottom: 1rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
}

.btn-pickup-contents02 {
    margin: var(--s5) auto 0 auto;
}

section.sec02.top_banner.is-show {
    opacity: 1;
    z-index: 99;
}

section.sec02.top_banner {
    position: fixed;
    right: 0;
    top: 0;
    background: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    margin: 7rem auto 0;
    padding: 0;
}

section.sec02.top_banner .l-grid-two-large {
    display: flex;
    flex-direction: column;
    width: 15rem;
}

section.sec02.top_banner .tag-list-3c {
    flex-direction: column;
}

section.sec02.top_banner .tag-list-3c li {
    width: 100%;
    border-radius: 1rem 0 0 1rem;
}

section.sec02.top_banner .onb-2c-taglist-title {
    font-size: 1.5rem;
    text-align: left;
    padding-left: 0.5rem;
}

section.sec02.top_banner .onb-2c-taglist-title span {
    width: auto;
    height: auto;
    background: none;
    =: #fff; text-align: left;
    border-radius: 0;
    font-size: 2.5rem;
    padding: 10px 0 3px;
    margin: 0 auto 0.4rem;
}

section.sec02.top_banner .twb-tag-colored .tag-name, section.sec02.top_banner .twb-tag-white .tag-name {
    justify-content: flex-start;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0.8rem 0 0.8rem 1rem;
    border-radius: 1rem 0 0 1rem;
}

section.sec02.top_banner .l-grid-two-large .l-stack-small {
    padding: 1rem 0 1.5rem 1rem;
    border-radius: 1rem 0 0 1rem;
    gap: var(--s2);
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-pickup-contents02 {
        min-height: inherit;
        flex-direction: column;
    }

    .l-pickup-contents02::before {
        width: 6.8rem;
        height: 6.8rem;
        top: -3.4rem;
        left: -.8rem;
    }

    .l-pickup-contents02-content {
        max-width: inherit;
        padding: var(--s4) var(--s2);
    }

    .pickup-contents02-img {
        min-height: 24rem;
    }

    .pickup-contents02-catch {
        font-size: 2.4rem;
    }
}

.l-pickup-contents02 {
    width: 100%;
    min-height: 52rem;
    display: flex;
    /* background-color: #e2e2e2; */
    position: relative;
}

.l-pickup-contents02--reverse {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.l-pickup-contents02-box {
    flex: 1;
    background: rgb(245 247 251 / 0.7);
}

.pickup-contents02-img01 {
    min-height: 52rem;
    background: url("img/sec07-img01.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 1.5rem;
}

/* 2つ目 */
.pickup-contents02-img02 {
    min-height: 52rem;
    background: url(img/sec07-img02.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 1.5rem;
}

/* 3つ目 */
.pickup-contents02-img03 {
    min-height: 52rem;
    background: url(img/sec07-img03.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 1.5rem;
}

/* 4つ目 */
.pickup-contents02-img04 {
    min-height: 52rem;
    background: url(img/sec07-img04.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 1.5rem;
}

/* 4つ目 */
.pickup-contents02-img05 {
    min-height: 52rem;
    background: url(img/sec07-img05.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 1.5rem;
}

/* 4つ目 */
.pickup-contents02-img06 {
    min-height: 52rem;
    background: url(img/sec07-img06.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 1.5rem;
}

.l-pickup-contents02-content {
    max-width: 55rem;
    padding: var(--s6) var(--s4) var(--s4);
    position: relative;
    z-index: 5;
}

.pickup-contents02-catch a {
    margin-bottom: 1rem;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
    color: #111827;
    background: url(./img/arrow-01-blue-right.svg) no-repeat center right 1.5rem / auto 0.5em;
}

.btn-pickup-contents02 {
    margin: var(--s5) auto 0 auto;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-pickup-contents02 {
        min-height: inherit;
        flex-direction: column;
        margin-bottom: 10rem;
    }

    .l-pickup-contents02::before {
        width: 6.8rem;
        height: 6.8rem;
        top: -3.4rem;
        left: -.8rem;
    }

    .l-pickup-contents02-content {
        max-width: inherit;
        padding: var(--s1) var(--s2) var(--s4);
    }

    .pickup-contents02-img {
        min-height: 24rem;
    }

    .pickup-contents02-catch {
        font-size: 2.4rem;
    }
}

.swiper-slide .caption {
    color: #9e9e9e;
    line-height: 1.1;
}

.column-medium.industry .l-onb-flex-table {
    margin-top: 1rem;
}

.column-medium.industry .l-onb-flex-table .onb-flex-table td {
    font-size: 1.4rem;
}

.column-medium.industry .l-onb-flex-table .onb-flex-table th {
    font-size: 1.5rem;
    width: 30%;
    background-color: #DCDFE0;
    vertical-align: middle;
    font-weight: bold;
}

.profile-area {
    padding: var(--s4) var(--s4);
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-template-areas: "img catch" "img text" "btn text";
    gap: var(--s4);
    background-color: #F5F7FB;
    position: relative;
}

.profile-img-area {
    grid-area: img;
}

section.low-supervision .profile-img img {
    border-radius: 1.5rem;
    /* object-fit: cover; */
    /* height: revert-layer; */
    object-position: left;
}

.profile-img img {
    border-radius: 1.5rem;
}

.profile-text-area {
    grid-area: text;
}

.profile-text-area .btn-link {
    margin-top: 1rem;
}

.profile-btn-area {
    grid-area: btn;
    position: relative;
    z-index: 5;
}

.profile-btn-area .btn-web {
    margin: 0 auto var(--s2);
}

.profile-caption {
    margin-top: var(--s1);
    text-align: center;
}

section.low-supervision .profile-catch::before {
    content: "sponsored by";
    color: #ffffff;
    position: relative;
    font-size: 2.5rem;
    display: block;
}

section.low-supervision .profile-catch span {
    display: none;
}

.profile-catch {
    padding: var(--s2) var(--s3);
    /* border-bottom: 1px solid #707070; */
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    grid-area: catch;
    color: #ffffff;
    border-radius: 1.2rem;
    background: #0f4c81 url(img/sec_bg.png) no-repeat top left;
    background-size: 120% auto;
}

.profile-catch img {
    display: block;
    width: 35rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.profile-catch span {
    font-size: 2.5rem;
    display: block;
    padding: 0;
}

.profile-detail {
    padding: var(--s1) var(--s1) var(--s1) var(--s3);
    font-size: 1.8rem;
    border-left: 6px solid #818181;
}

.profile-box {
    /* padding: var(--s3); */
    /* background-color: #fff; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.profile-box-ttl {
    margin-bottom: var(--s3);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .profile-area {
        padding: 0;
        grid-template-columns: none;
        grid-template-areas: inherit;
        gap: var(--s2);
        background-color: inherit;
        margin-top: 4rem;
    }

    .profile-area::before {
        font-size: 1.4rem;
    }

    .profile-img-area, .profile-text-area, .profile-btn-area, .profile-catch {
        grid-area: inherit;
    }

    .profile-img-area {
        display: flex;
        align-items: center;
        gap: var(--s2);
        flex-direction: column;
    }

    .profile-img {
        width: 100%;
    }

    section.low-supervision .profile-img img {
        border-radius: 1.5rem;
        height: auto;
    }
}

.l-onb-flex-table {
    display: flex;
    flex-direction: column;
}

.onb-flex-table {
    border-collapse: collapse;
}

.onb-flex-table th, .onb-flex-table td {
    padding: var(--s2);
    border: 1px solid #fff;
}

.onb-flex-table th {
    width: 34%;
    background-color: #DCDFE0;
    vertical-align: middle;
    font-weight: normal;
}

.onb-flex-table td {
    background-color: #FAFAFA;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-onb-flex-table {
        flex-direction: column;
    }

    .onb-flex-table + table {
        margin-top: -1px;
    }
}

.l-stack-small.installation {
    background: #0F4C81;
}

.l-stack-small.industry {
    background: var(--wp--preset--color--vivid-green-cyan);
}

.column-medium.industry .onb-item-title-frame {
    background-color: #00c77b;
}

.choosing-reason .l-grid-three {
    --minimum: calc((100% - var(--s2) * 2) / 2);
    margin-bottom: 4rem;
}

section.sec02.secreason {
    margin: 5rem auto 10rem;
    padding: 0;
    width: 140rem;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--s3);
    padding-left: var(--s3);
    box-sizing: content-box;
    max-width: 80vw;
}

.choosing-reason .section-title08 {
    margin-top: 0;
}

.l-grid-three.full-width .onb-iconbox03-frame p {
    width: 65%;
    margin: auto;
}

.choosing-reason .onb-iconbox03-frame {
    padding: var(--s6) var(--s3) var(--s4);
}

/* ポップアップの親要素（基準点） */
.comparison--right {
    position: relative;
    margin: 12.4rem 2rem 2rem;
}

/* ポップアップ本体 */
.popup {
    display: none;
    /* 初期状態は非表示 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -4%);
    /* 中央寄せ */
    width: 69vw;
    min-height: 440px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 10;
    overflow: hidden;
    padding: 1rem 2rem 1rem;
    width: 70rem;
    max-width: 36.4vw;
}

.popup-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    background: #0085ff;
    padding: 1rem 1rem;
    border-radius: 1rem;
    word-break: break-all;
    line-height: 1.2;
}

.popup-content {
    display: flex;
    margin-bottom: 0rem;
    flex-direction: column;
}

/* --- 機能用CSS --- */
.popup {
    /* position: relative; */
    overflow: hidden;
    /* 枠外は隠す */
    /* 親の幅に合わせる */
}

.popup-inner {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
    width: 100%;
}

.popup-content {
    flex: 0 0 100%;
    /* 横幅100%分を1枚に */
    box-sizing: border-box;
    /* margin-right: 4rem; */
    flex: 0 0 100%;
    /* 1スライドは必ず枠いっぱい */
    max-width: 100%;
    /* 枠を超えない */
    padding: 2rem;
}

.popup-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    padding: 0.1rem 1.8rem 1.1rem 1.9rem;
}

.popup-arrow.prev {
    left: -10px;
}

.popup-arrow.next {
    right: -10px;
}

.popup-arrow:before {
    content: "";
    width: 4rem;
    height: 4rem;
    background: url("./img/slider-arrow-right.svg") no-repeat center center;
    background-size: contain;
    display: block;
}

.popup-arrow.prev:before {
    content: "";
    width: 4rem;
    height: 4rem;
    background: url("./img/slider-arrow-left.svg") no-repeat center center;
    background-size: contain;
    display: block;
}

.popup-arrow.disabled {
    display: none;
}

/* SPでは縦並びにする */
@media (max-width: 767px) {
    .popup-content {
        flex-direction: column;
        padding: 1rem;
    }

    .popup-arrow.prev {
        left: -15px;
    }

    .popup-arrow.next {
        right: -15px;
    }

    .popup-arrow:before {
        content: "";
        width: 3rem;
        height: 3rem;
        background: url("./img/slider-arrow-right.svg") no-repeat center center;
        background-size: contain;
        display: block;
    }

    .popup-arrow.prev:before {
        content: "";
        width: 3rem;
        height: 3rem;
        background: url("./img/slider-arrow-left.svg") no-repeat center center;
        background-size: contain;
        display: block;
    }
}

.popup-img {
    width: 100%;
    flex-shrink: 0;
}

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

.popup-text {
    padding: 10px 5px 5px 20px;
    width: 100%;
}

/* SPでの画像とテキストの幅調整 */
@media (max-width: 767px) {
    .popup-img, .popup-text {
        width: 100%;
    }
}

.popup-text h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.popup-text p {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 1.6;
}

/* スペックテーブル */
.popup-spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.popup-spec th, .popup-spec td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.popup-spec th {
    background-color: #f5f7fb;
    width: 30%;
}

/* 閉じるボタン */
.popup-close {
    display: none;
    /* PCでは非表示 */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    z-index: 11;
}

.product-lineup {
    margin-top: 15rem;
}

/* 全体のコンテナ */
.slider-container {
    width: 90%;
    margin: 0 auto;
    padding: 40px 0;
}

/* スライダーの各アイテム */
.slider-item {
    padding: 0 5px;
    /* アイテム間の余白 */
}

.slider-item__inner {
    /* background-color: #f7f7f7; */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.slider-item__inner .btn-web {
    width: 85%;
    margin: 2rem auto 3rem;
}

.slider-item__type {
    background-color: #289168;
    padding: 15px 15px 10px;
    text-align: center;
    color: #fff;
}

.slider-item__type span {
    font-size: 12px;
    border-radius: 15rem;
    border: solid 1px #ffffff;
    padding: 5px 10px;
    margin: 0 auto;
    color: #ffffff;
}

.slider-item__type {
    font-size: 25px;
    font-weight: bold;
    margin: 0;
}

.slider-item__img {
    /* background-color: #ccc; */
    text-align: center;
}

.slider-item__img img {
    width: 100%;
    height: auto;
    display: block;
}

.slider-item__text {
    padding: 13px;
    font-size: 16px;
    color: #555;
    /* border-bottom: 1px solid #ddd; */
}

.slider-item__spec {
    padding: 15px 10px;
    margin: 10px;
    font-size: 14px;
    background-color: #f5f7fb;
    border-radius: 1rem;
}

.slider-item__spec dt {
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding-top: 1.5rem;
    font-size: 1.5rem;
}

.slider-item__spec span {
    color: #333;
    font-size: 1.3rem;
}

.slider-item__spec dt:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.slider-item__spec dd {
    margin: 0;
    color: #555;
    word-break: break-all;
}

.slider-item__button {
    display: block;
    background-color: #0055ff;
    color: #fff;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 8px 8px;
    transition: background-color 0.3s;
}

.slider-item__button:hover {
    background-color: #003ccf;
}

/* Slickの矢印のカスタマイズ */
.slick-prev, .slick-next {
    width: 40px;
    height: 40px;
    z-index: 1;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

.slick-next:before {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url("./img/slider-arrow-right.svg") no-repeat center center;
    background-size: contain;
    display: block;
}

.slick-prev:before {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url("./img/slider-arrow-left.svg") no-repeat center center;
    background-size: contain;
    display: block;
}

/* Popup text scroll styles */
.popup-text {
    max-height: 240px;
    overflow-y: auto;
}

/* Custom scrollbar styling for popup-text */
.popup-text::-webkit-scrollbar {
    width: 8px;
}

.popup-text::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.popup-text::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.popup-text::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar styling for popup-text */
.popup-text {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

sup.sp_only {
    display: none;
}

/* SPの時だけ閉じるボタンを表示 */
@media (max-width: 767px) {
    .popup-close {
        display: block;
        top: 5px;
        right: 5px;
    }

    section.sec02.top_banner {
        display: none;
    }

    .header-area-upper {
        padding: var(--s2) 8rem var(--s2) 1rem;
    }

    .header-title, p.header-credit {
        font-size: 2.6vw;
    }

    .mv__inner {
        max-width: 100%;
        width: 100%;
        grid-template-columns: 1.05fr .95fr;
        gap: 48px;
        align-items: center;
        max-width: 84%;
        margin-right: auto;
        margin-left: 0;
        padding: 2rem 2rem;
        border-radius: 0 1.5rem 1.5rem 0;
    }

    .mv {
        padding: 2rem 0 11rem;
        background: url(/wp/wp-content/uploads/mv-low.png) no-repeat bottom 2vw center;
        background-size: auto 24.8vw;
    }

    .mv-area-logo {
        width: 50%;
    }

    .mv span.mv__title-accent {
        font-size: 6.8vw;
    }

    .mv .mv__title {
        font-size: 6vw;
    }

    .mv .credit {
        font-size: 1.3rem;
    }

    .l-pickup-contents03-l h2 {
        font-size: 5.5vw;
        text-align: left;
        margin-left: -1.1rem;
        padding-top: 0.7rem;
    }

    .l-pickup-contents03-l-content-text {
        font-size: 4vw;
    }

    p.l-pickup-contents03-l-content-text-sub {
        font-size: 4vw;
    }

    .onb-2c-taglist-title span {
        font-size: 2rem;
        height: 4.3rem;
    }

    .onb-2c-taglist-title {
        font-size: 1.5rem;
    }

    .twb-tag-colored .tag-name, .twb-tag-white .tag-name {
        padding: 1rem 0.5rem 1.5rem;
        font-size: 4vw;
        line-height: 1.1;
    }

    section.sec02.secbg .tag-list-3c li .tag-name::before {
        top: auto;
        bottom: -0.6rem;
        right: 11.8vw;
        margin: auto;
    }

    section.sec02 .column-tag {
        font-size: 3.5vw;
    }

    section.sec02 .column-medium.location {
        padding: 0 var(--s2);
    }

    section.sec02 .column-medium.location .l-comparison {
        gap: 0;
    }

    section.sec02 {
        margin: 5rem auto 5rem;
        padding: 5rem 0;
    }

    section.sec02 .column-medium .l-onb-item-title__side {
        font-size: 7vw;
        width: 60%;
    }

    .onb-item-title-title {
        font-size: 5vw;
    }

    section.sec02 .column-medium.location .comparison-wrapper {
        display: flex;
        flex-direction: column;
    }

    .comparison-box__txt {
        font-size: 1.5rem;
    }

    .comparison.comparison--right {
        margin: auto;
        width: 90%;
        padding-left: var(--s2);
    }

    .comparison--left .comparison-box {
        margin-bottom: 2rem;
        margin-left: var(--s3);
        margin-right: var(--s3);
    }

    .comparison-title--dark sup {
        font-size: 2vw;
        top: 5px;
    }

    .link-area .caption {
    }

    .link-area {
        margin: 0 1rem;
    }

    .slick-next:before {
        content: "";
        width: 2.5rem;
        height: 2.5rem;
    }

    .slick-prev:before {
        content: "";
        width: 2.5rem;
        height: 2.5rem;
    }

    .slider-container {
        width: 100%;
    }

    .slick-next {
        right: -25px;
    }

    .slick-prev {
        left: -25px;
    }

    .l-grid-three.full-width .onb-iconbox03-frame p {
        width: 100%;
        font-size: 1.5rem;
    }

    .onb-iconbox03-img {
        padding: 0;
    }

    .onb-iconbox03-img iframe {
        width: 100%;
        height: 38vw;
    }

    .choosing-reason .onb-iconbox03-catch {
        font-size: 4.5vw;
    }

    .choosing-reason .section-title08 {
        font-size: 6vw;
        line-height: 1.3;
    }

    .profile-box-ttl {
        font-size: 5vw;
        line-height: 1.7;
        margin-bottom: var(--s1);
        margin-top: var(--s3);
    }

    .column-medium.industry .profile-box-ttl {
        margin-top: var(--s1);
    }

    .column-medium.industry .profile-text-area .btn-link {
        margin-top: 2rem;
    }

    .profile-box-ttl span {
        font-size: 5vw;
        line-height: 7vw;
    }

    .profile-catch span {
        font-size: 5vw;
    }

    .profile-box-ttl span span {
        font-size: 7vw;
        display: block;
    }

    p:not([class]) {
        font-size: 1.5rem;
    }

    .profile-text-area .btn-link a {
        padding: 0px 25px 4px 0;
        border: none;
        background: url(./img/arrow-01-black-right.svg) no-repeat 100% center / auto 0.9em;
        text-decoration: none;
        margin: 0;
        width: 100%;
        text-align: right;
    }

    .profile-text-area .btn-link {
        float: right;
    }

    .comparison--right .comparison-box {
        margin: auto;
    }

    .comparison--right .comparison-box .comparison-pic {
        margin-left: 0;
        margin-right: 1.5rem;
    }

    .comparison-title--dark span {
        font-size: 3.9vw;
        line-height: 1.3;
    }

    .comparison-title--dark::before {
        width: 2rem;
        height: 2rem;
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .link-area .btn-link a {
        padding: 0 2rem 0 0;
        border: none;
        background: url(./img/arrow-01-black-right.svg) no-repeat 99% center / auto 1em;
        text-align: right;
        font-size: 3.5vw;
        margin: 0 0 1rem;
    }

    .profile-box {
        padding: 0;
        background-color: inherit;
        box-shadow: none;
    }

    .slick-next:before {
        width: 4rem;
        height: 4rem;
    }

    .slick-prev:before {
        width: 4rem;
        height: 4rem;
    }

    section.sec02.secreason {
        padding: 0;
        padding-right: 0;
        padding-left: 0;
        width: 90%;
        max-width: fit-content;
        margin: 5rem auto 5rem;
    }

    .product-lineup {
        margin-top: 5rem;
    }

    section.sec02.secreason .section-title08 {
        margin: 0;
        margin-bottom: 5rem;
    }

    section.sec03 {
        margin: 7rem auto 10rem;
    }

    .slider-item__type {
        font-size: 5.5vw;
    }

    .slider-container {
        width: 100%;
        padding: 0 0 20px;
    }

    .slick-prev {
        left: 0;
    }

    .slick-next {
        right: 0;
    }

    .section-title02-sub {
        font-size: 1.8rem;
    }

    h2.section-title02 a {
        line-height: 1.2;
        padding: var(--s2) var(--s3);
    }

    section.sec03 .arrow-title a {
    }

    section.sec03 .arrow-title {
        font-size: 5vw;
    }

    .pickup-contents01-catch span span {
        display: block;
    }

    section.sec04.pr {
    }

    .l-pickup-contents03-l-logo {
        flex-direction: column;
        display: flex;
        padding-top: 1rem;
    }

    section.sec04.pr .pickup-contents01-catch img {
        position: static;
        margin: initial;
        width: 25rem;
    }

    section.sec04.pr .l-pickup-contents01-box .pickup-contents01-catch {
        font-size: 2.4rem;
        margin-bottom: 3rem;
        display: flex;
        flex-direction: column;
    }

    section.sec04.pr .l-pickup-contents01-content {
        padding: var(--s5) var(--s3);
    }

    section.sec04.pr .l-pickup-contents01-box.textbox::before {
        top: -27px;
    }

    section.sec10 .btn-link a, section.sec04.pr .btn-link a, section.sec05.media .btn-link a {
        padding: 0px 25px 4px 0;
        border: none;
        /* background: url(./img/arrow-01-black-right.svg) no-repeat 100% center / auto 0.9em; */
        text-decoration: none;
        margin: 0;
        width: 100%;
        text-align: right;
    }

    section.sec10 .btn-link, section.sec04.pr .btn-link, section.sec05.media .btn-link {
        float: right;
    }

    section.sec05.media {
    }

    section.sec05.media .pickup-contents01-catch {
        font-size: 2.4rem;
        margin-bottom: 0;
    }

    section.sec05.media .l-pickup-contents01 {
        padding-top: 4rem;
    }

    section.sec07 .section-title02-sub {
        font-size: 1.5rem;
        width: 15rem;
    }

    .pickup-contents02-img01, .pickup-contents02-img02, .pickup-contents02-img03, .pickup-contents02-img04, .pickup-contents02-img05, .pickup-contents02-img06, .pickup-contents02-img07 {
        min-height: 55vw;
    }

    section.sec07 {
        margin: 0 auto 0;
        padding: 10rem 0 1rem;
    }

    .profile-catch img {
        width: 25rem;
    }

    .profile-catch {
        font-size: 4.2vw;
        padding: var(--s2) 0 var(--s2) var(--s2);
    }

    section.low-supervision .profile-catch::before {
        font-size: 2rem;
        margin-top: -0.5rem;
    }

    .pickup-contents02-catch a, .profile-catch a, .profile-box-ttl a {
        /* background: url(./img/arrow-01-wht-right.svg) no-repeat center right 1.5rem / auto 0.9em; */
        padding: 0 var(--s4) 0 0;
        font-size: 6vw;
    }

    section.sec10 {
    }

    .popup {
        top: -1rem;
        left: -10%;
        right: 0px;
        margin: auto;
        transform: none;
        min-height: 75%;
        z-index: 50;
        padding: 1rem 1rem 1rem;
        width: 92vw;
        max-width: none;
        position: absolute;
    }

    .popup-title {
        font-size: 5vw;
    }

    .caption {
        margin-top: 0.8em;
        color: #9e9e9e;
        font-size: 1rem;
        line-height: 1.1;
        text-align: center;
        word-break: break-all;
    }

    .popup-text {
        padding: 25px 0 0 0;
    }

    sup.pc_only {
        display: none;
    }

    sup.sp_only {
        display: block;
    }

    section.sec04.pr .pickup-contents01-catch::before {
        top: -30px;
        font-size: 1.8rem;
        padding: 10px 3px 0;
    }

    .l-pickup-contents01--reverse .l-pickup-contents01-box p, .btn-pickup-contents01.btn-link {
        padding: 0 var(--s3);
    }

    .mv.mv-low {
        background-size: 50% auto;
        margin-top: 1rem;
        padding: 1.5vw 1.5vw;
        background-position: center right 0.5rem;
    }

    .mv.mv-low .mv-area-logo {
        width: 35%;
    }

    .slider-item .btn-web a {
        padding: var(--s1) var(--s3);
        background: var(--site-color02) url(./img/icon-web.svg) no-repeat center left 0.6rem / auto 0.7em;
        line-height: 1.2;
        font-size: 1.6rem;
    }

    .slider-item__spec dt span {
        font-size: 1.3rem;
    }

    .footer-bottom {
        padding: var(--s1) 0 var(--s1);
    }
}

@media (min-width: 768px) and (max-width: 1300px) {
    /* ---------------------------------------------
NAV用
--------------------------------------------- */section.sec02.top_banner.is-show {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    section.sec02.top_banner {
        position: fixed;
        right: 0;
        top: 0;
        background: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        margin: 7rem auto 0;
        padding: 0;
    }

    section.sec02.top_banner .l-grid-two-large {
        display: flex;
        flex-direction: row;
        width: 95%;
        justify-content: center;
        margin: 0 auto 1rem;
    }

    section.sec02.top_banner .tag-list-3c {
        flex-direction: row;
    }

    section.sec02.top_banner .tag-list-3c li {
        width: 100%;
        border-radius: 1rem;
        width: calc((100% - var(--s2)) / 3);
        text-align: center;
        line-height: 1.5;
        border-radius: 0.7rem;
    }

    section.sec02.top_banner .onb-2c-taglist-title {
        font-size: 1.5rem;
        text-align: left;
        padding-left: 0.5rem;
        width: 14rem;
    }

    section.sec02.top_banner .onb-2c-taglist-title span {
        width: auto;
        height: auto;
        background: none;
        text-align: left;
        border-radius: 0;
        font-size: 1.9vw;
        padding: 0 0 3px;
        margin: 0 auto 0.4rem;
    }

    section.sec02.top_banner .twb-tag-colored .tag-name, section.sec02.top_banner .twb-tag-white .tag-name {
        justify-content: center;
        font-weight: bold;
        font-size: 1vw;
        padding: 0.3rem;
        border-radius: 1rem;
    }

    section.sec02.top_banner .l-grid-two-large .l-stack-small {
        padding: 1rem;
        border-radius: 1rem;
        gap: var(--s2);
        width: 43%;
        display: flex;
        flex-direction: row;
    }
}