@charset "utf-8";

.contents-area {
    background-image: url(./img/lower_bg.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------------------------------------------
navigation03 ※TOP、下層共通
--------------------------------------------- */

.header-area {
    width: 26rem;
    height: 100vh;
    padding: var(--s1);
    background: #fff;
    border-right: 1px solid var(--site-color09);
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.header-logo {
    width: 80%;
    margin: var(--s4) auto var(--s2);
    text-align: center;
}

.header-logo a:hover {
    opacity: .7;
}

.header-logo__img {
    width: 100%;
    max-width: inherit;
}

.header-logo__link {
    display: block;
}

.header-logo__link:hover {
    opacity: 0.6;
}

.header-title {
    margin-bottom: var(--s2);
    margin-left: 2.4rem;
    font-size: 1rem;
    position: relative;
}

.header-title::before {
    content: "PR";
    padding: .2rem;
    color: #fff;
    background-color: #333;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: -2.4rem;
}

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

.header-title a:hover {
    text-decoration: underline;
}

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

.gnavi-area {
    display: none;
}

.toggle-content {
    display: none;
}

.gnavi-pc-list {
    position: relative;
}

.gnavi-pc-list__item {
    padding-left: 0;
}

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

.gnavi-pc-list__link {
    width: 100%;
    margin: 0 auto;
    padding: var(--s2) var(--s1) var(--s2) var(--s2);
    border-left: 2px solid #bb9953;
    display: block;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    font-family: var(--sub-font);
    font-size: 1.8rem;
    background: #f4f4f4;
    border-bottom: 1px solid #fff;
}

.gnavi-pc-list__link:hover {
    opacity: 0.6;
}

/*------------------------------------------
 Global menu settings
*/
.navigation01-menu-area {
    background-color: var(--site-color09);
}

.navigation01-menu {
    display: flex;
    background-color: #fff;
}

.navigation01-menu li::before {
    display: none;
}

.navigation01-menu li a {
    padding: var(--s2) var(--s1);
    display: block;
    text-decoration: none;
}

.navigation01-menu li a:hover {
    opacity: .6;
}

/* ナビゲーション分の余白設定 */
.contents-area,
.footer-area {
    margin-left: 26rem;
}

/*
---------------------------------------------
		sp settings
*/
@media screen and (max-width: 767px) {
    .gnavi-pc {
        display: none;
    }

    .header-area {
        width: 100%;
        height: auto;
        padding: var(--s1);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        background-color: transparent;
        border: none;
        overflow-x: visible;
        overflow-y: visible;
        position: static;
        background: var(--sec-dark);
        margin-bottom: 1rem;
    }

    .header-logo {
        display: none;
    }

    .header-title {
        display: inline-block;
        margin-bottom: 0;
        color: #fff;
    }

    .gnavi-ctrl {
        display: block;
        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(--s7);
        background: var(--pri-dark);
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 200;
        cursor: pointer;
    }

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

    .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;
    }

    .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;
        padding: var(--s2);
        background: var(--pri-dark);
        display: block;
        text-align: center;
        border-radius: 51px;
        /* font-family: var(--sub-font); */
    }

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

    .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%;
        height: 100vh;
        padding: var(--s3) var(--s1) var(--s10);
        display: block;
        background: #F5F5F5;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 102;
        transform: translateX(100%);
        transition: transform 0.8s ease, opacity 0.8s ease;
        opacity: 0;
    }

    .gnavi-title {
        min-height: var(--s6);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        font-weight: 700;
        text-align: center;
        line-height: 1.5;
        width: 50%;
    }

    .gnavi-pc {
        display: none;
    }

    .gnavi-list {
        border-bottom: 1px solid #d7d7d7;
        position: relative;
    }

    .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(--s2) var(--s2);
        border-top: 1px solid #d7d7d7;
        display: block;
        font-weight: 700;
        line-height: 2;
        text-decoration: none;
        position: relative;
        font-family: var(--sub-font);
    }

    .gnavi-list__link::after {
        content: "";
        width: 1.4rem;
        height: 1.4rem;
        background: url("./img/arrow-01-blk-right.svg") no-repeat center/100% 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-blk-right.svg");
        transform: translate(0, -50%) rotate(90deg);
    }

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

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

    .gnavi-list__sub li .gnavi-list__link,
    .toggle-content li .gnavi-list__link {
        padding-left: calc(var(--s2) + 1em);
    }

    .gnavi-list__low .gnavi-list__link {
        padding: var(--s2) var(--s4) var(--s2) var(--s4);
    }

    .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);
    }

    /*------------------------------------------
	Global menu settings
	*/
    .navigation01-menu-area {
        display: none;
    }

    /* ナビゲーション分の余白設定 */
    .contents-area,
    .footer-area {
        margin-left: 0;
    }
}

/* ---------------------------------------------
bannertop
--------------------------------------------- */
.pc-fix-banner04-wrap {
    position: fixed;
    right: 0;
    bottom: 10rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease;
}

.pc-fix-banner04-wrap.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pc-fix-banner04 {
    width: 19rem;
    position: relative;
}

.pc-fix-banner04-text {
    padding: var(--s2);
    color: #000000;
    position: relative;
    font-family: var(--sub-font);
    font-weight: 700;
    background: #bb9953a8;
}

.pc-fix-banner04-text .ttl {
    padding-bottom: 1rem;
    text-align: center;
}

.pc-fix-banner04-links {
    display: grid;
    gap: var(--s1);
    font-family: var(--sub-font);
    font-weight: 700;
}

.pc-fix-banner04-link {
    color: #fff;
    text-decoration: none;
    display: block;
    position: relative;
    padding: var(--s1);
}

.pc-fix-banner04-link::after {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    border-top: .5rem solid transparent;
    border-left: .5rem solid transparent;
    border-right: .5rem solid #81333c;
    border-bottom: .5rem solid #81333c;
    position: absolute;
    right: .5rem;
    bottom: .5rem;
}

.pc-fix-banner04-link:hover {
    opacity: .7;
}

.pc-fix-banner04-color1,
.pc-fix-banner04-color2,
.pc-fix-banner04-color3 {
    background-color: var(--sec-dark);
}

.pc-fix-banner04-text p {
    margin: 0;
    font-size: 1.8rem;
    text-align: center;
    line-height: 1;
}

.pc-fix-banner04-close {
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    background: transparent;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    cursor: pointer;
}

.pc-fix-banner04-close::before,
.pc-fix-banner04-close::after,
.pc-fix-banner01-close::before,
.pc-fix-banner01-close::after {
    content: "";
    width: 1.6rem;
    height: 0.2rem;
    background: #81333c;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.pc-fix-banner04-close::after,
.pc-fix-banner01-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pc-fix-banner01 {
    position: relative;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease;
}

.pc-fix-banner01.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pc-fix-banner01-close {
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    background: transparent;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    cursor: pointer;
}

.pc-fix-banner04-text .text-small {
    font-size: 1.2rem;
    line-height: 1.5;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .pc-fix-banner04-wrap {
        display: none;
    }
}

/* ---------------------------------------------
banner lower
--------------------------------------------- */
.pc-fix-banner01 {
    width: 24rem;
    background-color: #000;
    position: fixed;
    right: 0;
    bottom: 11rem;
    z-index: 50;
    font-family: var(--sub-font);
}

.pc-fix-banner01 a {
    color: #fff;
    text-decoration: none;
    display: block;
}

.pc-fix-banner01 a:hover {
    opacity: .7;
}

.pc-fix-banner01-img {
    position: relative;
}

.pc-fix-banner01-text {
    padding: var(--s2);
    color: #fff;
    position: relative;
    font-weight: 700;
}

.pc-fix-banner01-text::after {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    border-top: .5rem solid transparent;
    border-left: .5rem solid transparent;
    border-right: .5rem solid #81333c;
    border-bottom: .5rem solid #81333c;
    position: absolute;
    right: .5rem;
    bottom: .5rem;
}

.pc-fix-banner01-text p {
    margin: 0;
    font-size: 2rem;
    text-align: center;
    line-height: 1.2;
}

.pc-fix-banner01-text p.text-small {
    font-size: 1.8rem;
    line-height: 1;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .pc-fix-banner01 {
        display: none;
    }
}

/* ---------------------------------------------
index02(目次)
--------------------------------------------- */
.onb-index02-frame {
    width: 100%;
    margin-bottom: 4rem;
}

.onb-index02-wrap {
    margin: 0 auto;
    padding: var(--s4) var(--s3) var(--s4);
    background: var(--bg-sub);
    position: relative;
}

.onb-index02-title {
    padding: var(--s3) var(--s2) var(--s3);
    color: #333;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1;
    background: url(./img/dummy-icon.png) no-repeat left center;
    border-bottom: 1px solid var(--sec-dark);
    background-size: 3rem auto;
    position: relative;
    cursor: pointer;
    font-family: var(--sub-font);
}

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

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

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

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

.onb-index02-chapter-h-two {
    margin-left: var(--s2);
    position: relative;
    counter-increment: number-counter;
}

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

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

.onb-index02-chapter-h-two::before {
    content: counter(number-counter, decimal-leading-zero);
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%);
    top: .6em;
    color: var(--pri-dark);
    font-family: var(--sub-font);
}

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

/*----------------------------------------------
	more content settings
*/
.more-content-gradation {
    position: relative;
    height: auto;
    max-height: 12rem;
    overflow: hidden;
    transition: max-height 1s;
}

.more-content-gradation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}

.more-content-gradation.is-open::after {
    display: none;
}

.onb-index02-btn {
    max-width: 32rem;
    margin: 2rem auto 0 auto;
    padding: 2rem 6rem;
    border: .1rem solid var(--sec-dark);
    text-align: center;
    position: relative;
    transition: opacity 0.3s;
    cursor: pointer;
    background: var(--txt-white);
    border-radius: 50px;
    font-family: var(--sub-font);
    font-weight: 700;
    color: var(--sec-dark);
}

.onb-index02-btn::before {
    content: "";
    width: 2rem;
    height: .1rem;
    background: #141414;
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translate(0, -50%);
}

.onb-index02-btn::after {
    content: "";
    width: .1rem;
    height: 2rem;
    background: #141414;
    position: absolute;
    top: 50%;
    right: 3.9rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

.onb-index02-btn:hover {
    opacity: 0.6;
}

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

@media screen and (max-width: 767px) {
    .onb-index02-title {
        font-size: 1.8rem;
    }

    .onb-index02-btn {
        max-width: 65%;
        padding: 1.6rem 6rem;
    }
}

/* ---------------------------------------------
related-article01
--------------------------------------------- */
.related-article01-frame {
    position: relative;
    margin: var(--s6) auto;
    padding: var(--s2) var(--s3) var(--s4) var(--s3);
    background: var(--white);
    border: 1px solid var(--sec-dark);
}

.related-article01-title {
    position: relative;
    padding: var(--s3) var(--s2) var(--s3) var(--s8);
    border-bottom: 1px solid var(--sec-dark);
    background: url(./img/related-article.svg) no-repeat left center / 4.5rem auto;
    color: #333;
    font-weight: bold;
    font-size: 2.4rem;
    font-family: var(--sub-font);
    line-height: 1;
}

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

.related-article01-list li {
    position: relative;
    margin: 0 0 0 var(--s2);
    padding-left: 1.5em;
    font-weight: normal;
    line-height: 1.7;
}

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

.related-article01-list li::before {
    position: absolute;
    top: .8rem;
    left: 0;
    width: 1.5rem;
    height: 1rem;
    background: url("./img/arrow-02-right.svg") no-repeat 0 / contain;
    content: "";
}

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

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

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

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

/*---------------------------------------------
    sp base settings
*/
@media screen and (max-width: 767px) {
    .related-article01-frame {
        margin: var(--s3) auto;
        padding: var(--s2) var(--s2) var(--s4);
    }

    .related-article01-list {
        margin: 0;
        padding: 0;
    }

    .related-article01-list li {
        margin: 0 0 0 var(--s1);
    }

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

/* ---------------------------------------------
メインビジュアル（左右の画像は画面でクリップ）
--------------------------------------------- */
.mainvisual {
    /* 画像列＆テキスト列の基本寸法を変数化 */
    /*--col-w: 360px; */
    /* 画像カード列の見せ幅 */
    --content-w: 650px;
    /* テキストブロックの幅（固定） */
    --gap: 20px;
    /* 列間の余白 */

    background: url("./img/mv_bg.png") repeat top center;
    background-size: cover;
    padding: 0;
    /* テキストの余白は content 側で管理 */
    overflow: hidden;
    /* ここで左右をクリップ */
}

/* ★ポイント：
   コンテナはビューポートより広い “レイアウト幅” を常に維持。
   画面が狭くなってもこの幅は縮まらないので、左右の画像が切れて見える。 */
.mainvisual-container {
    display: flex;
    align-items: center;
    justify-content: center;

    /* レイアウト全幅： 左列 + 右列 + テキスト + ギャップ×2 */
    width: calc(var(--content-w) + 2 * (var(--col-w) + var(--gap)));
    max-width: none;
    min-width: auto;

    /* センタリング（親で overflow:hidden なので、はみ出た分は切れる） */
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    margin: 0 auto;
    padding: 0 20px;
    /* 内側のちょい余白はお好みで */
    gap: var(--gap);
}

/* 各列の幅を固定して “テキストが縮まない” ようにする */
.mainvisual-images {
    flex: 0 0 var(--col-w);
    width: var(--col-w);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mainvisual-content {
    flex: 0 0 var(--content-w);
    width: var(--content-w);
    max-width: none;
    /* ここを固定に */
    padding: 60px 30px;
    /* 旧 .mainvisual の上下余白をこちらに移植 */
}

/* --- 縦ループ（従来どおり） -------------------- */
.is-loop {
    position: relative;
    overflow: hidden;
}

.is-loop .loop {
    display: flex;
    flex-direction: column;
    animation: mv-loop var(--mv-speed, 30s) linear infinite;
    will-change: transform;
}

.mainvisual-images.is-loop {
    height: 770px;
}

/* 表示窓の高さはここで管理 */
@keyframes mv-loop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

.mainvisual-images.left.is-loop {
    --mv-speed: 36s;
}

.mainvisual-images.right.is-loop {
    --mv-speed: 28s;
}

.mainvisual-images.right2.is-loop {
    --mv-speed: 22s;
}

/* カード見た目（そのまま） */
.mainvisual-image {
    width: 100%;
    /* ←列幅に追従するよう変更 */
    height: 280px;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding-bottom: 1.4rem;
}

.mainvisual-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* タイポ等（そのまま） */
.mainvisual-logo {
    margin-bottom: 20px;
}

.mainvisual-logo img {
    max-width: 100px;
    height: auto;
}

.mainvisual-catchcopy {
    font-size: 6.8rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 40px;
    color: var(--sec-dark);
    font-family: var(--sub-font);
    border-left: double 10px var(--acc-dark);
    padding-left: 2rem;
}

.mainvisual-subcopy {
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    margin: 0 auto 30px;
    display: inline-block;
    font-family: var(--sub-font);
    color: var(--pri-dark);
}

.mainvisual-description {
    font-size: 1.6rem;
}

.mainvisual-description p {
    margin-top: 10px;
}

/* 動き控えめ */
@media (prefers-reduced-motion: reduce) {
    .is-loop .loop {
        animation: none !important;
        transform: none !important;
    }
}

/* ---------------------------------------------
レスポンシブ（PC幅が十分にある間は上の“固定レイアウト幅”を維持）
--------------------------------------------- */
@media screen and (max-width: 1024px) {

    /* テキストサイズなどは従来どおり調整 */
    .mainvisual-catchcopy {
        font-size: 2.8rem;
    }

    .mainvisual-subcopy {
        font-size: 1.3rem;
        /* padding: 12px 25px; */
    }

    .mainvisual-images.is-loop {
        height: 600px;
    }

    /* 見える窓を少し低く */
}

/* スマホは従来の縦積みへスイッチ（ここで “固定幅レイアウト” を解除） */
@media screen and (max-width: 768px) {
    .mainvisual {
        padding: 10px 0 32px;
    }

    .mainvisual-container {
        left: auto;
        transform: none;
        /* 解除 */
        width: auto;
        max-width: none;
        min-width: auto;
        flex-direction: column;
        gap: 30px;
        padding: 0 15px;
    }

    .mainvisual-images {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
        flex: 0 0 auto;
    }

    .mainvisual-content {
        width: 100%;
        flex: 1;
        padding: 0;
    }

    /* モバイルは上下余白も控えめに */
    .mainvisual-catchcopy {
        font-size: 3.2rem;
    }

    .mainvisual-subcopy {
        font-size: 1.6rem;
        /* padding: 10px 20px; */
        margin: 0 auto 20px;
    }

    .mainvisual-description {
        font-size: 1.5rem;
    }

    .mainvisual-image {
        width: 100%;
        height: 80px;
    }

    .mainvisual-logo img {
        max-width: 90px;
    }
}

@media screen and (max-width: 767px) {
    .mainvisual-images.left {
        display: none;
    }

    /* ===== SP：画像2列をテキストの上に配置（right と right2 を横並び） ===== */
    @media screen and (max-width: 768px) {

        /* 1) コンテナをグリッド化して並び替え */
        .mainvisual-container {
            display: grid;
            /* ← flex から grid に */
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "right  right2"
                /* 上段：画像2列 */
                "content content";
            /* 下段：テキスト */
            gap: 20px;
            left: auto;
            transform: none;
            width: auto;
            max-width: none;
            min-width: auto;
            padding: 0 15px;
        }

        /* 2) 左列は非表示（現状の指定をそのまま活かす） */
        .mainvisual-images.left {
            display: none;
        }

        /* 3) エリア割り当て */
        .mainvisual-images.right {
            grid-area: right;
        }

        .mainvisual-images.right2 {
            grid-area: right2;
        }

        .mainvisual-content {
            grid-area: content;
        }

        /* 4) 画像列は縦スクロール（縦ループ）を維持して“列”として見せる */
        /*    既存の `.mainvisual-images { flex-direction: row; }` を打ち消す上書き */
        .mainvisual-images.right,
        .mainvisual-images.right2 {
            display: flex;
            flex-direction: column;
            /* ← 縦カラムに戻す */
            justify-content: flex-start;
            align-items: stretch;
            width: 100%;
            flex: 0 0 auto;
            gap: 15px;
        }

        /* 5) 見せ窓の高さ（お好みで調整） */
        .mainvisual-images.right.is-loop,
        .mainvisual-images.right2.is-loop {
            height: 174px;
            /* 例：SPで2列が収まるくらい */
        }

        /* 6) テキスト側は横幅100%でOK */
        .mainvisual-content {
            width: 100%;
            padding: 0;
            /* 既存どおりでもOK */
        }

        /* 7) カードのサイズ微調整（任意） */
        .mainvisual-image {
            height: 120px;
        }

        /* 画像の縦サイズ（任意で調整） */

        /* タイポ調整（既存どおりでOK・参考） */
        .mainvisual-catchcopy {
            font-size: 3.2rem;
            margin-bottom: 20px;
        }

        .mainvisual-subcopy {
            font-size: 2rem;
            /* padding: 10px 20px; */
            margin: 0 auto 20px;
        }

        .mainvisual-description {
            font-size: 1.5rem;
        }

        .mainvisual-logo img {
            max-width: 150px;
        }
    }

    /* SP：横ループ（右→左） */
    .mainvisual-images.is-loop {
        height: auto;
    }

    .is-loop .loop {
        flex-direction: row;
        animation: mv-loop-x var(--mv-speed, 30s) linear infinite;
    }

    .is-loop .loop__group {
        display: flex;
        flex-direction: row;
    }

    @keyframes mv-loop-x {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    /* SP：横ループの幅/カード幅を安定化 */
    .is-loop .loop {
        width: max-content;
    }

    .is-loop .loop__group {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: max-content;
    }

    .is-loop .mainvisual-image {
        width: 120px;
        flex: 0 0 auto;
    }

    .mainvisual-images.right,
    .mainvisual-images.right2 {
        flex-direction: row;
        align-items: center;
    }

    /* SP：画像列を100%幅で表示 */
    .mainvisual-images {
        width: 100%;
        flex: 0 0 100%;
    }

    .mainvisual-container {
        display: flex;
        flex-direction: column;
    }

    .mainvisual-images {
        order: 1;
    }

    .mainvisual-content {
        order: 2;
    }

    .mainvisual-images.right {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .mainvisual-image {
        width: 40vw;
        max-width: 190px;
        height: 190px;
    }
}

/* 2.3.5 section-title05 */
.section-title02 {
    width: 100%;
    margin-top: 5rem;
    padding: var(--s4) var(--s12);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    position: relative;
    font-family: var(--sub-font);
    color: var(--txt-white);
    background: var(--sec-dark);
    background-image: url('./img/sec-title02-bg.png');
    background-repeat: no-repeat;
    background-position: top right;
}

@media screen and (max-width: 767px) {
    .section-title02 {
        margin-top: 2rem;
        padding: var(--s2);
        font-size: 2.4rem;
        background-size: 6rem;
    }
}

/* 1.4 list-dl */
.dl-style dt {
    font-weight: 700;
    color: var(--pri-dark);
    margin-bottom: 0.5rem;
}

.dl-style dd {
    margin-bottom: var(--s1);
    font-size: 1.4rem;
    line-height: 1.4;
}

/* 3.0.1 m-title01 (box専用見出し/中央揃えテキストのみ) */
.m-title01 {
    padding: var(--s4) var(--s2);
    font-family: var(--sub-font);
    font-size: 3.4rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    line-height: 0.7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -2rem;
    z-index: 100;
    position: relative;
    margin-bottom: 1.4rem;
}

span.mini {
    font-size: 1.7rem;
}

/* m-title01 background variants */
.yakiniku {
    background-image: url('./img/yakiniku.jpg');
}

.curry {
    background-image: url('./img/curry.jpg');
}

.udon {
    background-image: url('./img/udon.jpg');
}

/* 3.0.7 arrow-title (box専用見出し/吹き出しタイプ) */
.arrow-title {
    padding: var(--s2) var(--s2) var(--s4);
    font-size: 1.8rem;
    font-weight: 700;
    background-color: var(--pri-dark);
    color: #fff;
    font-family: var(--sub-font);
    text-align: center;
    line-height: 1.5;
    position: relative;
}

.arrow-title-sub {
    padding: 0 var(--s1);
    margin-bottom: 1rem;
    background-color: var(--black);
    font-size: 1.4rem;
    line-height: 1.5;
    display: inline-block;
}

.arrow-title-small {
    font-size: 2.2rem;
    color: var(--black);
    line-height: 1.2;
    font-weight: 700;
}

span.underline {
    border-bottom: 1px solid var(--sec-dark);
}

span.small {
    font-size: 1.8rem;
    padding-left: 1rem;
}

#sec03 .arrow-title-small {
    font-size: 3.6rem;
    line-height: 1.5;
    font-weight: 700;
}

#sec03 #gyukaku-detail .arrow-title {
    background-image: url('./img/head_yakiniku.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

#sec03 #cocoichibanya-detail .arrow-title {
    background-image: url('./img/head_curry.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

#sec03 #marugame-detail .arrow-title {
    background-image: url('./img/head_udon.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 4.31 l-grid-three (3カラム) */
/*------------------------------------------
    3box column settings
*/
.column-small {
    padding: 0 var(--s2);
    border: 1px solid var(--sec-dark);
    background: #fff;
}

#sec04 .l-grid-three a,
#sec05 .l-grid-three a,
#sec06 .l-grid-three a,
#sec09 .l-grid-three a,
#sec11 .l-grid-three a {
    text-decoration: none;
    color: inherit;
}

#sec04 .l-grid-three a,
#sec05 .l-grid-three a,
#sec06 .l-grid-three a,
#sec07 .l-grid-three a,
#sec08 .l-grid-three a,
#sec09 .l-grid-three a,
#sec10 .l-grid-three a,
#sec11 .l-grid-three a,
#sec12 .l-grid-three a,
#sec13 .l-grid-three a,
#sec14 .l-grid-three a {
    display: block;
    background-image: url("./img/arrow-01-blk-right.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 2.2rem auto;
    padding-right: 3rem;
}

#sec04 .section-title06 a,
#sec05 .section-title06 a,
#sec06 .section-title06 a,
#sec07 .section-title06 a,
#sec08 .section-title06 a,
#sec09 .section-title06 a,
#sec10 .section-title06 a,
#sec11 .section-title06 a,
#sec12 .section-title06 a,
#sec13 .section-title06 a,
#sec14 .section-title06 a,
#sec15 .section-title01 a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    background-image: url("./img/arrow-01-blk-right.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 2.2rem auto;
    padding-right: 3rem;
}

#sec04 .section-title06 a:hover,
#sec05 .section-title06 a:hover,
#sec06 .section-title06 a:hover,
#sec07 .section-title06 a:hover,
#sec08 .section-title06 a:hover,
#sec09 .section-title06 a:hover,
#sec10 .section-title06 a:hover,
#sec11 .section-title06 a:hover,
#sec12 .section-title06 a:hover,
#sec13 .section-title06 a:hover,
#sec14 .section-title06 a:hover,
#sec15 .section-title01 a:hover {
    opacity: 0.6;
}

.m-title05 .twb-m-title05__right {
    align-self: center;
    display: flex;
    align-items: center;
}

/* lower header */
.lower-header {
    background-image: url("./img/lower_header_l.jpg"), url("/wp/wp-content/uploads/lower_header_r.jpg");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain;
    padding: 0;
}

.lower-header__inner {
    display: flex;
    align-items: center;
    padding: var(--s4);
    width: 300px;
    margin: auto;
}

@media screen and (max-width: 767px) {
    .lower-header {
        background-image: url("/wp/wp-content/uploads/header_lower_img.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-size: contain;
        height: 150px;
    }

    .lower-header__inner {
        width: 180px;
    }
}

#sec04 .acc-more-btn,
#sec05 .acc-more-btn,
#sec06 .acc-more-btn,
#sec07 .acc-more-btn,
#sec08 .acc-more-btn,
#sec09 .acc-more-btn,
#sec10 .acc-more-btn,
#sec11 .acc-more-btn,
#sec12 .acc-more-btn,
#sec13 .acc-more-btn,
#sec14 .acc-more-btn {
    margin: var(--s2) auto;
}

#sec09 .l-grid-three,
#sec11 .l-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 767px) {
    #sec03 .arrow-title-small {
        font-size: 3rem;
    }

    span.underline {
        border-bottom: 1px solid var(--sec-dark);
        font-size: 2.4rem;
    }

    #sec09 .l-grid-three,
    #sec11 .l-grid-three {
        grid-template-columns: 100%;
    }
}

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

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

@media screen and (max-width: 767px) {

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

    #sec03 #gyukaku-detail .arrow-title,
    #sec03 #cocoichibanya-detail .arrow-title,
    #sec03 #marugame-detail .arrow-title {
        background-size: cover;
    }
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {

    .section-title05 {
        padding: var(--s2);
        font-size: 2.4rem;
    }

    .section-title05::before {
        top: 1rem;
        width: 6rem;
        left: -2rem;
    }

    .section-title05::after {
        bottom: 1rem;
        width: 6rem;
        right: -2rem;
    }
}

/* sec02 caption左寄せ */
#sec02 .caption {
    text-align: left;
}

/* 2.3.8 section-title08 */
.section-title08 {
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--sec-dark);
    text-align: center;
    line-height: 1.5;
    border-radius: .5rem;
    position: relative;
    font-family: var(--sub-font);
}

.section-title08 span.smallttl {
    font-size: 3rem;
    background: var(--sec-dark);
    color: var(--white);
    padding: 0 1rem;
    position: relative;
}

.section-title08 span.smallttl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: var(--acc-dark);
}

.sourcebox .caption {
    margin-top: 0.5rem;
}

/* 4.0 column-medium (1カラム) */
#sec03 .column-medium {
    padding: 0 var(--s4) var(--s4);
    border: 1px solid var(--sec-dark);
    background: #fff;
}

#sec03 .support-area .column-medium {
    padding: var(--s4) var(--s2);
    border-top: 1px solid var(--sec-dark);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    position: relative;
}

#sec03 .support-area .column-medium::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: var(--pri-dark);
}

/* 4.1.1 onb-icon-title (1カラムbox専用見出し/小アイコン左上) */
.onb-icon-title-frame {
    padding: var(--s4);
    position: relative;
}

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

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

.onb-icon-title {
    text-align: center;
    font-weight: 700;
    font-family: var(--sub-font);
    font-size: 4rem;
    color: var(--sec-dark);
}

.onb-icon-title h4 {
    font-weight: 700;
}

.onb-icon-title .big {
    border-bottom: 1px solid var(--pri-dark);
    width: fit-content;
    margin: 0 auto;
}

.onb-icon-title small {
    font-size: 20px;
    border: none;
}

.onb-icon-title-catch {
    margin-bottom: .8rem;
    font-size: 2rem;
    display: block;
    line-height: 1.5;
    font-family: var(--sub-font);
    color: var(--pri-dark);
}

/* 4.8 1box_5-slider (1カラムbox専用/スライダー/サムネイル5) */
.onb-five-slider-container {
    position: relative;
}

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

.onb-five-slider .swiper-slide-thumb-active {
    outline: 4px solid var(--site-color08);
    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: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 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) {
    #sec03 .column-medium {
        padding: 0 var(--s2) var(--s4);
        border: 1px solid var(--sec-dark);
        background: #fff;
    }

    .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%;
    }
}

/* 2.10.0 conclusion-area */
.conclusion-area {
    padding: var(--s6) var(--s3);
    background-color: var(--pri);
    margin-top: 4rem;
}

.conclusion-area .caption {
    text-align: left;
}

.conclusion-area__wrapper {
    max-width: 77rem;
    margin: 0 auto;
}

.conclusion-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--txt-emp);
    text-align: center;
}

.conclusion-title-deco {
    position: relative;
    color: var(--txt-emp);
    font-family: var(--sub-font);
}


.conclusion-box__wht {
    line-height: 1.8;
}

.conclusion-catch {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pri-dark);
    text-align: center;
    border-bottom: 1px solid var(--pri-dark);
    margin: 0 auto;
    font-family: var(--sub-font);
    padding-bottom: 1rem;
}

.conclusion-btn-area {
    z-index: 5;
}

.btn-conclusion {
    margin: 0 auto;
}

.value-area h5,
.support-area h5,
.customer-area h5,
.cost-area h5,
.territories-area h5,
.info-area h5 {
    background: var(--sec-dark);
    padding: 2rem;
    font-size: 2.4rem;
    color: var(--white);
    font-family: var(--sub-font);
    font-weight: 700;
    position: relative;
    background-image: url(./img/sec-title02-bg.png);
    background-repeat: no-repeat;
    background-position: top right;
}

.value-area h5::before,
.support-area h5::before,
.customer-area h5::before,
.cost-area h5::before,
.territories-area h5::before,
.info-area h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: var(--acc-dark);
}

.cost-area table th,
.info-area table th {
    width: 30%;
}

/* 2.13.3.1 l-com-box04-frame */
.com-box04-frame {
    padding: var(--s4);
    background-image: url('./img/triangle_gray.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 22%;
    position: relative;
}

.com-box04-frame:nth-of-type(2) {
    padding: var(--s4);
    background-image: url('./img/triangle_gray02.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 22%;
    position: relative;
}



.com-box04-title {
    margin-bottom: var(--s4);
    padding: var(--s1) var(--s1) .5rem;
    background-color: var(--bg-sec);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--txt-main);
    font-family: var(--sub-font);
}

.com-box04-area {
    display: flex;
    gap: var(--s4);
}

.com-box04-area--reverse {
    flex-direction: row-reverse;
}

.com-box04-text {
    width: calc((100% - var(--s4))*.8);
}

.com-box04-img {
    width: 30%;
    text-align: center;
}

.com-box04-img span {
    margin-top: var(--s1);
    display: block;
    font-size: 1.4rem;
    text-align: center;
}

.com-box04-catch {
    margin-bottom: var(--s2);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pri-dark);
    font-family: var(--sub-font);
}

/*------------------------------------------------------------
    SP settings (sec03)
*/
@media screen and (max-width: 767px) {
    .section-title08 {
        font-size: 2.4rem;
    }

    .section-title08 span.smallttl {
        font-size: 2rem;
    }

    .conclusion-catch {
        font-size: 2rem;
    }

    .value-area h5,
    .support-area h5,
    .customer-area h5,
    .cost-area h5,
    .territories-area h5,
    .info-area h5 {
        font-size: 1.8rem;
        line-height: 1.5;
        background-size: 3rem;
        padding: 1rem 2rem;
    }

    .column-medium {
        padding: var(--s2);
    }

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

    .onb-icon-title-frame {
        padding: var(--s4);
    }

    .onb-icon-title {
        font-size: 2.8rem;
    }

    .onb-icon-title small {
        font-size: 1.6rem;
    }

    .onb-icon-title-catch {
        padding-left: var(--s3);
        font-size: 1.4rem;
    }

    .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%;
    }

    .conclusion-area {
        padding: var(--s4);
    }

    .conclusion-title {
        font-size: 2.4rem;
        margin-bottom: 1rem;
    }

    .conclusion-title-deco::before,
    .conclusion-title-deco::after {
        content: "";
        width: 10%;
    }

    .conclusion-title-deco::before {
        left: -20%;
    }

    .conclusion-title-deco::after {
        right: -20%;
    }

    .com-box04-frame {
        padding: var(--s2);
    }

    .com-box04-frame:nth-of-type(2) {
        padding: var(--s2);
    }

    .com-box04-area {
        flex-direction: column;
        gap: var(--s2);
    }

    .com-box04-title {
        margin-bottom: var(--s2);
        font-size: 1.8rem;
    }

    .com-box04-img {
        width: 100%;
        margin: 0 auto;
    }

    .com-box04-text {
        width: 100%;
    }

    .com-box04-catch {
        font-size: 1.8rem;
    }
}

/* 2.13.1.1 com-box02-r */

.com-box02-arrow-l {
    position: relative;
}



.l-com-box02 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
}

.l-com-box02__side {
    width: 20%;
    text-align: center;
}

.acc-list-frame {
    width: 74%;
}

.l-com-box02__side img {
    max-width: 100%;
    width: 40%;
}

.com-box02-imgcap {
    margin-bottom: 2rem;
    text-align: center;
    font-size: 2rem;
    font-family: var(--sub-font);
    font-weight: 700;
    color: var(--sec-dark);
}

.com-box02-caption {
    text-align: left;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .l-com-box02 {
        display: flow-root;
    }

    .com-box02-frame {
        background-color: transparent;
        border: none;
    }

    .com-box02-frame::before {
        display: none;
    }

    .l-com-box02__side {
        width: calc((100% - var(--s5))*.3);
    }

    .l-com-box02__side-left {
        margin-right: var(--s2);
        margin-bottom: var(--s2);
        float: left;
    }

    .l-com-box02__main {
        width: 100%;
        padding: 0;
        border-radius: inherit;
    }

    .com-box02-caption {
        text-align: right;
    }

    .acc-list-frame {
        width: 100%;
    }

    .acc-list-more-btn {
        width: 86%;
    }
}

/* 2.4 iconbox02-frame */
.iconbox02-frame {
    padding: var(--s4);
    border: 1px solid var(--sec-dark);
}

.iconbox02-catch {
    padding: var(--s2);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    background-size: 4.8rem auto;
    font-family: var(--sub-font);
    color: var(--sec-dark);
    text-align: center;
    background: var(--pri);
    margin-bottom: 2rem;
}

.iconbox02-caption {
    text-align-last: left;
}

@media screen and (max-width: 767px) {
    .iconbox02-catch {
        font-size: 2rem;
    }
}

/* 2.10.2 summary-box-r */
.text-area {
    line-height: 1.8;
    word-break: break-word;
}

.summary-box-r {
    display: grid;
    grid-auto-rows: minmax(10px, auto) 1fr;
    grid-template-areas: "img catch" "img content";
    gap: 0 3rem;
    margin-top: 2rem;
}

.summary-box-r .caption {
    text-align: left;
}

.summary-box-r-catch {
    padding: 0 0 1rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pri-dark);
    grid-area: catch;
    font-family: var(--sub-font);
    border-bottom: 1px solid var(--pri-dark);
    margin-bottom: 1rem;
}

.summary-box-r-img {
    padding: var(--s4);
    grid-area: img;
    border: 1px solid var(--sec-dark);
    width: 290px;
    text-align: center;
    position: relative;
    height: 275px;
}

.summary-box-r-img::before {
    content: "Brand Power";
    position: absolute;
    top: -1.2rem;
    left: -0.5rem;
    padding: 0.8rem 0.8rem 0.8rem 2.5rem;
    background-color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sec-dark);
    background-image: url(./img/icon_trophy.png);
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    background-size: 1.5rem auto;
    white-space: nowrap;
    z-index: 10;
    font-family: var(--sub-font);
    border: 1px solid #000;
}

.number {
    font-family: var(--sub-font);
    font-weight: bold;
    font-size: 5rem;
    color: var(--sec-dark);
    text-align: center;
}

.number span.smalttl {
    font-size: 2.2rem;
}

.rating-img {
    margin: 2rem auto;
}

.summary-box-r-content {
    grid-area: content;
}

.btn-link a {
    font-size: 1.4rem;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .summary-box-r {
        display: block;
    }

    .summary-box-r-catch {
        margin-bottom: var(--s2);
        font-size: 2rem;
        border-bottom: 1px solid var(--gray);
        line-height: 1.3;
    }

    .summary-box-r-img {
        padding-bottom: 4rem;
        margin: 4rem auto var(--s4);
        height: auto;
    }

    .cost-area table th,
    .info-area table th {
        width: 100%;
    }
}

/* 2.2.2 left-img-box */
.left-img-box {
    display: flow-root;
}

.left-img {
    width: 40%;
    margin-right: var(--s4);
    padding-bottom: var(--s1);
    float: left;
}

.left-img-catch {
    margin-bottom: 1.6rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pri-dark);
    font-family: var(--sub-font);
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .left-img {
        width: 100%;
        margin-right: 0;
        padding-bottom: var(--s2);
        float: inherit;
        text-align: center;
    }
}

/* chart-text-box (左画像・右テキスト) */
.chart-text-box {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
}

.chart-text-box__img {
    flex: 0 0 calc((111% - var(--s5)) * 0.4);
}

.chart-text-box__img img {
    width: 100%;
    height: auto;
    display: block;
}

.chart-text-box__content {
    flex: 0 0 calc((100% - var(--s5)) * 0.6);
}

/* sec01 chart-text-box__content background */
#sec01 .l-center {
    position: relative;
}

#sec01 .chart-text-box {
    position: relative;
}

#sec01 .chart-text-box__content {
    padding: var(--s8) var(--s4) var(--s9);
    position: relative;
    z-index: 1;
}

#sec01 .chart-text-box__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: calc(50% - 50dvw);
    bottom: 0;
    background-color: #fff;
    z-index: -1;
}

#sec01 .chart-text-box__img {
    position: relative;
    z-index: 2;
}

.chart-text-box__content .caption {
    text-align: left;
}

.chart-text-box__catch {
    margin-bottom: var(--s3);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pri-dark);
    font-family: var(--sub-font);
}

.chart-text-box__content p {
    margin-bottom: var(--s2);
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .chart-text-box {
        flex-direction: column;
        gap: var(--s3);
    }

    .chart-text-box__img {
        flex: 0 0 100%;
        width: 100%;
    }

    .chart-text-box__content {
        flex: 0 0 100%;
        width: 100%;
    }

    .chart-text-box__catch {
        font-size: 1.8rem;
    }

    /* sec01 chart-text-box__content SP */
    #sec01 .chart-text-box__content {
        margin-left: 0;
    }
}

/* sec01, sec02 padding */
#sec01 {
    padding-top: 8rem;
    overflow-x: hidden;
}

#sec02 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

#sec03 {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

#sec04,
#sec05,
#sec06,
#sec07,
#sec08,
#sec09,
#sec10,
#sec11,
#sec12,
#sec13,
#sec14 {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

#sec15 {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

@media screen and (max-width: 767px) {
    #sec03 {
        padding-top: 6rem;
        padding-bottom: 12rem;
    }

    #sec04,
    #sec05,
    #sec06,
    #sec07,
    #sec08,
    #sec09,
    #sec10,
    #sec11,
    #sec12,
    #sec13,
    #sec14 {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    #sec15 {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }
}

/* sec01 section-title05 custom deco */
#sec01 .section-title01,
#sec15 .section-title01 {
    text-align: center;
    padding: var(--s2) var(--s2) var(--s2) calc(var(--s4) + 2rem);
    position: relative;
    color: var(--txt-emp);
    padding: var(--s4) var(--s12);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.5;
    font-family: var(--sub-font);
}

#sec01 .section-title01::before,
#sec15 .section-title01::before {
    content: "";
    position: absolute;
    left: 19%;
    width: 20px;
    aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: var(--acc-dark);
}

#sec01 .section-title01::after,
#sec15 .section-title01::after {
    content: none;
}

.bg01 {
    background: var(--pri);
    background-image: url('./img/bg01-square.jpg');
    background-repeat: no-repeat;
    background-position: top right;
}

@media screen and (max-width: 767px) {
    .bg01 {
        background-size: 26%;
    }
}

.bg02 {
    background-image: url('./img/bg-02.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #F2F4F5;
}

.bg03 {
    background-image: url('./img/bg-03.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.bg04 {
    background-color: #EBE6DC;
    background-image: url('./img/bg04.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg05 {
    background-color: #fff;
    background-image: url('./img/bg05.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg06 {
    background-color: #EBE6DC;
    background-image: url('./img/bg06.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg07 {
    background-color: #fff;
    background-image: url('./img/bg07.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg08 {
    background-color: #EBE6DC;
    background-image: url('./img/bg08.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg09 {
    background-color: #fff;
    background-image: url('./img/bg09.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg10 {
    background-color: #EBE6DC;
    background-image: url('./img/bg10.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg11 {
    background-color: #fff;
    background-image: url('./img/bg11.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg12 {
    background-color: #EBE6DC;
    background-image: url('./img/bg12.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg13 {
    background-color: #fff;
    background-image: url('./img/bg13.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg14 {
    background-color: #EBE6DC;
    background-image: url('./img/bg14.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

.bg15 {
    background-image: url('./img/bg15.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;

}

.franchise-box {
    background-image: linear-gradient(180deg, rgb(187 153 83), rgb(255 255 255));
    width: calc(100% + var(--s4));
    margin-left: calc(var(--s2) * -1);
    padding: 0 var(--s2);
    margin-top: 5rem;
}

.franchise-box__brand {
    background: var(--sec-dark);
    padding: var(--s3) var(--s2);
    position: relative;
    top: -2rem;
}

.franchise-box__brand::before {
    content: "";
    width: 3rem;
    height: calc(3rem / 2);
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: -0.5rem;
}

.brand {
    font-family: var(--sub-font);
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.reccomend {
    border-bottom: 1px solid #fff;
    text-align: center;
}

.brand-name {
    font-size: 2.5rem;
    margin-top: 2rem;
    font-weight: 700;
}

.franchise-box__btn {
    width: 90%;
    margin: auto;
}

.franchise-box__btn .btn-web,
.franchise-box__btn .btn-anchor {
    margin: 2rem auto;
}

.franchise-box__btn .btn-anchor-rotate a {
    background-image: none;
    position: relative;
}

.franchise-box__btn .btn-anchor-rotate a::after {
    content: "";
    width: 1em;
    height: 1em;
    background: url("./img/arrow-01-wht-down.svg") no-repeat center / contain;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%) rotate(-90deg);
}

.info-box .sp-table-vertical {
    margin: 1rem 0;
}

.info-box .sp-table-vertical table th {
    background: var(--sec);
    font-size: 1.4rem;
    font-weight: bold;
}

.info-box .sp-table-vertical table td {
    background: var(--white);
    font-size: 1.4rem;
}

.acc-more-btn {
    width: 90%;
    margin: var(--s5) auto var(--s3);
    padding: 2rem 3rem 2rem 2rem;
    border: 1px solid var(--sec-dark);
    text-align: center;
    position: relative;
    transition: opacity 0.3s;
    cursor: pointer;
    font-family: var(--sub-font);
    color: var(--sec-dark);
    font-weight: bold;
    border-radius: 50px;
    background: #fff;
}

.acc-more-btn::before {
    content: "";
    width: 16px;
    height: .2rem;
    background: var(--pri-dark);
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translate(0, -50%);
}

.acc-more-btn::after {
    content: "";
    width: 0.2rem;
    height: 16px;
    background: var(--pri-dark);
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

.acc-more-btn:hover {
    opacity: 0.6;
}

.acc-more-btn.is-open::after {
    transform: translate(0, -50%) rotate(270deg);
}

.more-content {
    display: none;
}


.acc-list-title {
    padding: var(--s2);
    background-color: var(--site-color11);
    font-weight: 700;
    font-family: var(--sub-font);
    text-align: center;
    font-size: 2.4rem;
}

.acc-list-content {
    padding: var(--s2);
}

.acc-list div {
    padding-bottom: var(--s2);
    display: flex;
    border-bottom: 1px solid var(--site-color09);
}

.acc-list div:last-child {
    border: none;
}

.acc-list div dt,
.acc-list div dd {
    width: 50%;
    line-height: 1.2;
    font-weight: bold;
}

.acc-list div dd {
    color: var(--accent-color01);
    font-size: 2.2rem;
}

.acc-list div dd span {
    font-size: 1.4rem;
    color: #141414;
}

/*----------------------------------------------
	more content settings
*/
.more-content-gradation {
    position: relative;
    height: auto;
    max-height: 12rem;
    overflow: hidden;
    transition: max-height 1s;
}

.more-content-gradation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background: linear-gradient(to bottom, transparent 0%, #fff 100%);
}

.onb-index02-frame .more-content-gradation::after {
    background: linear-gradient(to bottom, transparent 0%, #faf7f2 100%);
}

.more-content-gradation.is-open::after {
    display: none;
}

.acc-list-more-btn {
    max-width: 31rem;
    margin: 2rem auto 0 auto;
    padding: 2rem 6rem 2rem 3rem;
    text-align: center;
    position: relative;
    transition: opacity 0.3s;
    cursor: pointer;
    font-family: var(--sub-font);
    color: var(--sec-dark);
    font-weight: bold;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--sec-dark);
}

.acc-list-more-btn::before {
    content: "";
    width: 2rem;
    height: .2rem;
    background: var(--pri-dark);
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translate(0, -50%);
}

.acc-list-more-btn::after {
    content: "";
    width: .2rem;
    height: 2rem;
    background: var(--pri-dark);
    position: absolute;
    top: 50%;
    right: 3.9rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

.acc-list-more-btn:hover {
    opacity: 0.6;
}

.acc-list-more-btn.is-open::after {
    transform: translate(0, -50%) rotate(270deg);
}


.section-title06-frame {
    margin-top: 5rem;
    position: relative;
}

.section-title06-frame::after {
    content: "";
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.section-title06 {
    width: 100%;
    /* padding: var(--s4) var(--s12); */
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    position: relative;
    color: var(--sec-dark);
    font-family: var(--sub-font);
    margin-bottom: 3rem;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .section-title06 {
        padding: var(--s2);
        font-size: 2.4rem;
        margin-bottom: 0;
    }

    .section-title06 a {
        text-decoration: none;
        display: block;
        background-image: url(./img/arrow-01-blk-right.svg);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 2.2rem auto;
        padding-right: 3rem;
    }

    .franchise-box__btn .btn-web,
    .franchise-box__btn .btn-anchor {
        width: 100%;
    }

    #sec01 .section-title01,
    #sec15 .section-title01 {
        padding: var(--s1) var(--s2);
        font-size: 2.4rem;
    }

    #sec01 .section-title01::before,
    #sec15 .section-title01::before {
        content: "";
        position: absolute;
        left: 3%;
        width: 22px;
    }
}

/* 2.9.1 pickup-contents01-l */
.l-pickup-contents01 {
    width: 100vw;
    min-height: 40rem;
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

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

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

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

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

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

.pickup-contents01-catch {
    position: relative;
    margin-bottom: 1rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--txt-main);
    font-family: var(--sub-font);
}

.pickup-contents01-catch::before {
    position: absolute;
    background: url(img/line.png);
    content: "";
    width: 115px;
    height: 2px;
    bottom: 0;
}

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

.swiper-slide img {
    object-fit: contain;
    height: 350px;
    background: #fff;
}

/*------------------------------------------------------------
    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.6rem;
    }

    .pickup-contents01-catch::before {
        content: none;
    }

    .swiper {
        width: 100%;
    }

    .swiper-slide img {
        height: 230px;
    }
}

#sec04 .column-small.l-stack-small,
#sec05 .column-small.l-stack-small,
#sec06 .column-small.l-stack-small,
#sec09 .column-small.l-stack-small,
#sec11 .column-small.l-stack-small {
    padding: 3rem 2rem;
}

/* 3.0.5 m-title05 (box専用見出し/大アイコン+下線) */
.m-title05 {
    padding-bottom: 1.6rem;
    display: grid;
    align-items: center;
    grid-gap: var(--s2);
    grid-template-columns: 4.6rem 1fr;
    border-bottom: 1px solid var(--pri-dark);
    font-family: var(--sub-font);
    color: var(--sec-dark);
    min-height: auto;
    height: auto;
}

.m-title05__right,
.twb-m-title05__right {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.m-title05 h3 a:hover {
    opacity: 0.6;
}