@charset "UTF-8"; /* GoogleFonts読み込み 下記のライセンス記述は削除禁止 */
/*
* "Noto Sans JP" licensed under the SIL Open Font License 1.1
* by https://fonts.google.com/specimen/Noto+Sans+JP
*/
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/NS-400.woff2") format("woff2"), url("fonts/NS-400.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/NS-700.woff2") format("woff2"), url("fonts/NS-700.woff") format("woff");
    font-display: swap;
}

/*
---------------------------------------------

    base settings

*/
:root {
    font-size: 62.5%;
    --s-2: calc(var(--s1) / 2);
    --s1: 0.8rem;
    --s2: calc(var(--s1) * 2);
    --s3: calc(var(--s1) * 3);
    --s4: calc(var(--s1) * 4);
    --s5: calc(var(--s1) * 5);
    --s6: calc(var(--s1) * 6);
    --s7: calc(var(--s1) * 7);
    --s8: calc(var(--s1) * 8);
    --s9: calc(var(--s1) * 9);
    --s10: calc(var(--s1) * 10);
}

@media screen and (max-width: 1200px) {
    :root {
        font-size: 0.8333333333vw;
    }
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    clear: both;
}

ul, ol, dl, p, img, form, dt, dd, figure {
    margin: 0;
    padding: 0;
    border: 0;
}

li {
    list-style: none;
}

input, button, textarea, select {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    font-size: 1.5rem;
    font-family: "Noto Sans JP", sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    color: #333;
    transition: opacity 0.6s ease, color 0.6s ease;
    outline: none;
}

a:active, a:hover {
    color: #333;
    text-decoration: none;
}

p {
    line-height: 2;
}

p + p {
    margin-top: 1em;
}

p img {
    width: 100%;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
    font-weight: normal;
}

small {
    font-size: 80%;
}

* {
    box-sizing: border-box;
}

.sp_br {
    display: none;
}

.pc_br {
    display: inline;
}

@media screen and (min-width: 768px) {
    .for-sp {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .for-pc {
        display: none;
    }
}

.type_movie iframe {
    width: 104rem;
}

.type_movie {
    text-align: center;
}

/*
---------------------------------------------

    animation

*/
@keyframes tabAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*
---------------------------------------------

    mainvisual

*/
@keyframes loop01 {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/*
---------------------------------------------

    layout center

*/
.l-center {
    max-width: 120rem;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--s3);
    padding-left: var(--s3);
    box-sizing: content-box;
}

.l-center--narrow {
    max-width: 100rem;
}

.l-center--narrow .caption.caption--left {
    text-align: center;
    margin-bottom: 2rem;
}

.l-center--narrow .caption.caption--left br {
    display: none;
}

/*
---------------------------------------------

    layout stack

*/
.l-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--s3);
}

.l-stack > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
---------------------------------------------

    layout cluster

*/
.l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

/*
---------------------------------------------

    layout grid

*/
.l-grid {
    --minmum: calc((100% - var(--s5)) / 2);
    display: grid;
    grid-gap: var(--s5);
}

.l-grid-three {
    --minmum: calc((100% - var(--s4) * 2) / 3);
    display: grid;
    grid-gap: var(--s4);
    margin-bottom: 8rem;
}

@supports (width: min(var(--minmum), 100%)) {
    .l-grid, .l-grid-three {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--minmum), 100%), 1fr));
    }
}

/*
---------------------------------------------

    layout sidebar

*/
.l-sidebar {
    display: flex;
    gap: var(--s5);
}

.l-sidebar__side {
    width: 24rem;
}

.l-sidebar__main {
    flex: 1;
}

/*
---------------------------------------------

    layout column

*/
.l-column {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
}

.l-column__side {
    width: 40rem;
}

.l-column__side02 {
    width: 67rem;
}

.l-column__side03 {
    width: 48rem;
}

.l-column__main {
    flex: 1;
}

.l-column__main p span {
  
    background: none;
    color: #333;
    font-weight: bold;
    font-size: 1.5rem;
}

.l-column--row-reverse {
    flex-direction: row-reverse;
}

.l-column--align-center {
    align-items: center;
}

/*
---------------------------------------------

    layout grid areas

*/
.l-grid-areas {
    display: grid;
    grid-template-areas:
        "img catch"
        "img text";
    grid-template-columns: 40rem 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: var(--s2) var(--s8);
}

.l-grid-areas__cell-01 {
    grid-area: catch;
    position: sticky;
    top: 0;
    padding-top: 0;
}

.l-grid-areas__cell-02 {
    grid-area: img;
    width: 83%;
}

.l-grid-areas__cell-03 {
    grid-area: text;
}

.l-grid-areas--row-reverse {
    grid-template-areas: "catch img" "text img";
    grid-template-columns: 1fr 40rem;
}

.l-grid-areas--align-center {
    grid-template-rows: auto auto;
}

.l-grid-areas--align-center .l-grid-areas__cell-01 {
    place-self: end start;
}

.l-grid-areas--align-center .l-grid-areas__cell-02 {
    place-self: center;
}

.l-grid-areas--align-center .l-grid-areas__cell-03 {
    place-self: start;
}

.l-grid-areas--large {
    grid-template-columns: 55rem 1fr;
    grid-gap: var(--s2) var(--s5);
}

.l-grid-areas--large-reverse {
    grid-template-areas: "catch img" "text img";
    grid-template-columns: 1fr 55rem;
    grid-gap: var(--s2) var(--s5);
}

/*
---------------------------------------------

    layout float

*/
.l-float {
    display: flow-root;
}

.l-float__left-pc {
    width: 40rem;
    margin-right: var(--s5);
    margin-bottom: var(--s2);
    float: left;
}

.l-float__right-pc {
    width: 40rem;
    margin-left: var(--s5);
    margin-bottom: var(--s2);
    float: right;
}

.l-float__center {
    width: 64rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--s2);
}

.l-float__left {
    width: 40rem;
    margin-right: var(--s5);
    margin-bottom: var(--s2);
    float: left;
}

.l-float__right {
    width: 40rem;
    margin-left: var(--s5);
    margin-bottom: var(--s2);
    float: right;
}

/*
---------------------------------------------

    layout scroll x

*/
.l-scroll-x {
    width: 100%;
    padding-bottom: var(--s1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: #ddd transparent;
    scrollbar-width: 0.6rem;
}

.l-scroll-x::-webkit-scrollbar {
    height: 0.6rem;
}

.l-scroll-x::-webkit-scrollbar-track {
    border-radius: 0.3rem;
    background: #eee;
}

.l-scroll-x::-webkit-scrollbar-thumb {
    border-radius: 0.3rem;
    background: #ddd;
}

.l-scroll {
    width: 100%;
    height: 100%;
    padding-right: var(--s1);
    overflow-y: auto;
    scrollbar-color: #ddd transparent;
    scrollbar-width: 0.6rem;
}

.l-scroll::-webkit-scrollbar {
    height: 0.6rem;
}

.l-scroll::-webkit-scrollbar-track {
    border-radius: 0.3rem;
    background: #eee;
}

.l-scroll::-webkit-scrollbar-thumb {
    border-radius: 0.3rem;
    background: #ddd;
}

/*
---------------------------------------------

    header

*/
.header-area {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
    padding-right: 9rem;
}

.header-area__inner {
    height: 9rem;
}

.header-area__logo {
    width: 7.5rem;
    position: absolute;
    left: 1rem;
    top: var(--s1);
}

.header-area__logo a {
    display: block;
}

.header-area__logo a:hover {
    opacity: 0.6;
}

.header-area__name {
    font-size: 1.3rem;
    text-align: right;
}

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

.header-area__name a:hover {
    opacity: 0.6;
}

/*
---------------------------------------------

    MainVisual

*/
.mainvisual {
    padding: var(--s2) 0 var(--s5);
    position: relative;
    z-index: -1;
    overflow: hidden;
    margin-top: -10rem;
    height: 100rem;
    margin-bottom: -31rem;
}

.mainvisual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 70vw;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    perspective: 650px;
    /* 奥行きを作る */
}

.mainvisual-bg:before {
    content: "";
    width: 90%;
    height: 100%;
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.mainvisual-bg__column {
    width: 1000rem;
    /* 画像の横幅に応じて調整 */
    height: 160rem;
    background: url(img/mv-pic.png) repeat-x right top/auto 100%;
    transform: translateZ(-200px) rotateY(-10deg);
    /* 奥行きと逆方向の回転を追加 */
    animation: slideAnimation 90s linear infinite;
    margin-top: -40rem;
    position: absolute;
    left: -150rem;
}

/* アニメーション */
@keyframes slideAnimation {
    0% {
        transform: translateZ(-200px) rotateY(-10deg) translateX(0);
    }

    100% {
        transform: translateZ(-200px) rotateY(-10deg) translateX(-50%);
    }
}

.mainvisual-logo {
    width: 7.5rem;
    margin-bottom: var(--s3);
}

.mainvisual-title {
    margin-bottom: var(--s4);
    font-size: 4.2rem;
    font-weight: 700;
}

.mainvisual-title span.st {
    color: #D82827;
}

.mainvisual-lead {
    max-width: 51.6rem;
    margin-top: auto;
    margin-bottom: var(--s6);
    font-size: 2rem;
    font-weight: 700;
}

.mainvisual-lead p {
    line-height: 1.5;
}

.mainvisual-low {
    position: relative;
    margin-top: -5rem;
}

.mainvisual-low:before {
    content: "";
    width: 100%;
    height: 37rem;
    background: url(img/mv-low.png) no-repeat right top/auto 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
}

.main-area {
    overflow: clip;
}

/*
---------------------------------------------

    list

*/
.main-area .subList, .main-area ul:not([class]) {
    margin: var(--s5) auto;
}

.main-area .subList li, .main-area ul:not([class]) li {
    padding: 0 0 0 1.2em;
    font-size: 100%;
    line-height: 1.5;
    position: relative;
}

.main-area .subList li::before, .main-area ul:not([class]) li::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    background: #D82827;
    position: absolute;
    top: 0.4em;
    left: 0;
}

.main-area .subList li + li, .main-area ul:not([class]) li + li {
    margin-top: 1em;
}

.main-area ol:not([class]) {
    counter-reset: number;
}

.main-area ol:not([class]) li {
    padding: 0 0 0 2em;
    font-size: 100%;
    line-height: 1.5;
    position: relative;
    counter-increment: number;
}

.main-area ol:not([class]) li::before {
    content: counter(number);
    width: 1.6em;
    height: 1.6em;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.main-area ol:not([class]) li + li {
    margin-top: 1em;
}

/*
---------------------------------------------

    btn

*/
.btn-internal {
    width: 37.5rem;
    margin: var(--s5) auto;
    position: relative;
}

.btn-internal a {
    width: 100%;
    min-height: var(--s9);
    margin: 0;
    padding: 1.6rem var(--s5);
    background: #2583D9 url(img/arrow-01-white-right.svg) no-repeat right var(--s2) center/2.1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transform: translate(0, 0);
    transition: transform 0.3s;
}

.btn-internal::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: translate(0.5rem, 0.5rem);
}

.btn-internal:hover a {
    transform: translate(0.5rem, 0.5rem);
    color: #fff;
}

.btn-web {
    width: 37.5rem;
    margin: var(--s5) auto;
    position: relative;
}

.btn-web a {
    width: 100%;
    min-height: var(--s9);
    margin: 0;
    padding: 1.6rem var(--s5);
    background: #D82827 url(img/arrow-btn-web.svg) no-repeat right var(--s2) center/2.8rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transform: translate(0, 0);
    transition: transform 0.3s;
}

.btn-web::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: translate(0.5rem, 0.5rem);
}

.btn-web:hover a {
    transform: translate(0.5rem, 0.5rem);
    color: #fff;
}

.btn-web--large {
    width: 46rem;
}

.btn-web--right {
    margin-left: auto;
    margin-right: 0;
}

.btn-web--right a {
    text-align: left;
}

.btn-link {
    margin: var(--s2) auto;
    text-align: right;
}

.btn-link a {
    margin: 0;
    padding: var(--s1) var(--s3) var(--s1) 0;
    background: url("img/arrow-01-black-right.svg") no-repeat center right/auto var(--s2);
    display: inline-block;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: underline;
}

.btn-link a:hover {
    text-decoration: none;
    opacity: 0.6;
}

.btn-tel {
    display: none;
}

/*
---------------------------------------------

    table

*/
table {
    width: 100%;
    margin: var(--s5) auto;
    border-collapse: collapse;
    border-top: 1px solid #C7C7C7;
    border-left: 1px solid #C7C7C7;
}

th, td {
    padding: var(--s2);
    border-right: solid 1px #C7C7C7;
    border-bottom: solid 1px #C7C7C7;
    line-height: 1.5;
    word-break: break-all;
}

th {
    background: #F7F7F5;
}

tbody th {
    background: #F7F7F5;
}

.l-scroll-x table {
    width: inherit;
}

.l-scroll-x table th, .l-scroll-x table td {
    min-width: 20rem;
}

/*
---------------------------------------------

    caption

*/
.caption {
    margin-top: 0.8em;
    display: block;
    color: #999;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    word-break: break-all;
}

.caption a {
    color: #999;
}

.caption--left {
    text-align: left;
    color: #333;
}

.caption-scroll {
    margin-top: 0.8em;
    color: #999;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    word-break: break-all;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: #ddd transparent;
    scrollbar-width: thin;
}

.caption-scroll a {
    color: #999;
}

.caption-scroll::-webkit-scrollbar {
    height: 0.6rem;
}

.caption-scroll::-webkit-scrollbar-track {
    border-radius: 0.3rem;
    background: #eee;
}

.caption-scroll::-webkit-scrollbar-thumb {
    border-radius: 0.3rem;
    background: #ddd;
}

/*
---------------------------------------------

	catch

*/
.catch-01 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #D82827;
}

.catch-02 {
    margin-bottom: var(--s2);
    padding-left: var(--s2);
    border-left: solid 1px #D82827;
    font-size: 1.8rem;
    font-weight: 700;
}

/*
---------------------------------------------

	text

*/
.marker {
    border-bottom: solid 0.3rem #ed4f4e;
    font-weight: 700;
}

.txt_bold {
    font-weight: 700;
    color: #D82827;
}

/*
---------------------------------------------

	subgrid card

*/
.subgrid-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    grid-gap: var(--s2);
}

/*
---------------------------------------------

    float wrap

*/
.float-wrap {
    display: flow-root;
    margin: var(--s6) auto;
}

.float-wrap .float-img.fr {
    width: 40rem;
    margin-left: var(--s5);
    margin-bottom: var(--s2);
    float: right;
}

.float-wrap .float-img.fl {
    width: 40rem;
    margin-right: var(--s5);
    margin-bottom: var(--s2);
    float: left;
}

.float-wrap .float-img.ct {
    width: 64rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--s2);
    text-align: center;
}

/*
---------------------------------------------

	pankuzu

*/
#pankuzu {
    width: 100%;
    margin: 0 auto var(--s5);
    padding: var(--s2) 0;
    color: #333;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#pankuzu > span {
    color: #333;
}

.pankuzu-wrap {
    background: rgb(243 240 241 / 0.5);
}

/*
---------------------------------------------

    footer

*/
.footer-area {
    padding: var(--s5) 0 0;
    background: #efefef;
    position: relative;
    z-index: 0;
}

.footer-main {
    max-width: 120rem;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--s3);
    padding-left: var(--s3);
    box-sizing: content-box;
    padding-bottom: var(--s8);
}

.noticeArea {
    padding: 2rem 10px;
    font-size: 1.4rem;
}

.footer-bottom {
    padding: var(--s1) 0;
    background: #333;
    color: #FFF;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    margin: var(--s3) auto;
    width: 10.5rem;
    text-align: center;
}

.footer-logo__link {
    display: block;
    text-decoration: none;
}

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

.footer-box + .footer-box {
    margin-top: var(--s5);
}

.footer-menu-title {
    margin-bottom: var(--s1);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 1px solid #333;
}

.footer-menu-title__link {
    padding: var(--s1);
    display: block;
    text-decoration: none;
}

.footer-menu-title__link:hover {
    opacity: 0.6;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.footer-menu__item {
    width: calc((100% - var(--s2) * 3) / 4);
    font-size: 1.4rem;
    line-height: 1.5;
}

.footer-menu__link {
    padding: var(--s1);
    display: block;
    text-decoration: none;
}

.footer-menu__link:hover {
    opacity: 0.6;
}

.footer-menu-sub {
    margin-left: var(--s1);
}

.footer-menu-sub__item {
    font-size: 1.2rem;
    line-height: 1.5;
}

.footer-menu-sub__link {
    padding: var(--s-2) var(--s-2) var(--s-2) 1.2em;
    display: block;
    text-decoration: none;
    position: relative;
}

.footer-menu-sub__link::before {
    content: "-";
    position: absolute;
    top: var(--s-2);
    left: 0;
}

.footer-menu-sub__link:hover {
    opacity: 0.6;
}

.footer-disclaimer {
    width: 70rem;
    margin: var(--s5) auto;
    padding: var(--s2) var(--s4);
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

.footer-disclaimer__label {
    display: inline;
}

.footer-disclaimer__text {
    display: inline;
}

.footer-nocopy {
    margin: var(--s5) 0;
    font-size: 1.2rem;
    text-align: center;
}

.footer-copyright {
    font-size: 1.2rem;
}

.footer-copyright__link {
    color: #FFF;
    text-decoration: none;
}

.footer-copyright__link:hover {
    color: #FFF;
    text-decoration: underline;
}

.footer-sitemap {
    margin: 0;
    font-size: 1.2rem;
}

.footer-sitemap__link {
    color: #FFF;
    text-decoration: none;
}

.footer-sitemap__link:hover {
    color: #FFF;
    text-decoration: underline;
}

.footer-banner {
    width: 29rem;
    height: 7.2rem;
    padding: var(--s1) 0 0 12.5rem;
    background: url(img/arrow-banner.svg) no-repeat right var(--s1) bottom 0.4rem/1.8rem auto, url(img/character-3.png) no-repeat var(--s10) bottom/3.8rem auto, url(img/banner-icon.png) no-repeat var(--s2) center/4rem auto, linear-gradient(to right, #333 var(--s9), #FFEFEF var(--s9));
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    position: fixed;
    right: 0;
    bottom: 4rem;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
    text-decoration: none;
}

.footer-banner span {
    display: block;
    font-size: 1.2rem;
    color: #D82827;
}

.footer-banner:hover {
    right: 0;
}

.footer-banner.for-sp {
    display: none;
}

.footer-banner.is-show {
    opacity: 1;
    visibility: visible;
}

.footer-banner.is-show:hover {
       opacity: 0.7;
}



/*
---------------------------------------------

    gnavi

*/
.gnavi-btn {
    width: 7rem;
    height: 7rem;
    background: #333;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    cursor: pointer;
}

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

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

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

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

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

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

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

.gnavi-area {
    width: 36rem;
    height: 100vh;
    padding: 10rem 0;
    background: #333;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.gnavi-box__title {
    padding: 1.2rem var(--s6) 1.2rem var(--s2);
    border-bottom: 1px solid #fff;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    display: block;
    cursor: pointer;
    transition: opacity 0.5s;
    position: relative;
}

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

.gnavi-box__title:hover {
    opacity: 1;
}

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

.gnavi-box__content {
    background: rgba(255, 255, 255, 0.2);
}

.gnavi-box:first-child {
    border-top: 1px solid #fff;
}

.gnavi-menu__item, .gnavi-menu-sub__item {
    position: relative;
}

.gnavi-menu__item::before, .gnavi-menu-sub__item::before {
    content: "└";
    color: #fff;
    position: absolute;
    top: var(--s2);
    left: var(--s2);
}

.gnavi-menu__link, .gnavi-menu-sub__link {
    padding: 1.2rem var(--s2) 1.2rem var(--s5);
    display: block;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

.gnavi-menu__link:hover, .gnavi-menu-sub__link:hover {
    color: #fff;
    opacity: 0.6;
}

.gnavi-menu__item {
    border-bottom: 1px solid #fff;
}

.gnavi-menu-sub__item {
    border-top: 1px solid #fff;
}

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

.is-gnavi-open .gnavi-area::-webkit-scrollbar {
    display: none;
}

/*
---------------------------------------------

    page

*/
.page-top {
    width: var(--s9);
    height: var(--s9);
    position: fixed;
    right: 0;
    bottom: 12rem;);
    z-index: 10;
    overflow: hidden;
}

.page-top__link {
    width: 100%;
    height: 100%;
}

.page-top__link:hover {
    opacity: 0.6;
}

/*
---------------------------------------------

    toggle sp

*/
.toggle-sp-content {
    display: block;
}

/*
---------------------------------------------

    toggle

*/
.toggle-btn {
    position: relative;
    transition: opacity 0.3s;
}

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

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

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

.toggle-btn:hover {
    opacity: 0.7;
    cursor: pointer;
}

.toggle-content {
    display: none;
}

/*
---------------------------------------------

    more

*/
.more-btn {
    max-width: 38rem;
    margin: var(--s8) auto;
    padding: var(--s3) var(--s7);
    background: #fff;
    border: 0.2rem solid #333;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    transition: opacity 0.3s;
    cursor: pointer;
}

.more-btn::before {
    content: "";
    width: var(--s2);
    height: 0.2rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: var(--s3);
    transform: translate(0, -50%);
}

.more-btn::after {
    content: "";
    width: 0.2rem;
    height: var(--s2);
    background: #333;
    position: absolute;
    top: 50%;
    right: 3.1rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

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

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

.more-content {
    display: none;
}

/*
---------------------------------------------

    tab

*/
.tab-btn {
    padding: var(--s2) var(--s3) var(--s2) var(--s8);
    background: #fff url(img/txt-q.png) no-repeat center left var(--s2)/3.6rem auto;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color ease 0.6s;
    position: relative;
    z-index: 1;
}

.tab-btn:hover {
    color: #D82827;
}

.tab-btn.is-active {
    background-color: #F0F1F3;
    color: #D82827;
}

.tab-btn + .tab-btn {
    margin-top: 2rem;
}

.tab-content {
    padding: 14rem var(--s4) var(--s3) var(--s4);
    background: #F0F1F3 url(img/illust-a.png) no-repeat var(--s3) var(--s3)/13.8rem auto;
    display: none;
    opacity: 0;
    position: relative;
}

.tab-content:before {
    content: "";
    width: 50vw;
    height: 100%;
    background: #F0F1F3;
    position: absolute;
    left: 100%;
    top: 0;
}

.tab-content.is-active {
    display: block;
    animation: tabAnimation ease 0.6s forwards;
}

.tab-content .btn-internal {
    margin-right: 0;
}

/*
---------------------------------------------

    TOC

*/
.toc-wrap {
    margin: var(--s10) auto;
    max-width: 80rem;
    background: #F0F1F3;
    position: relative;
}

.toc-wrap__title {
    display: block;
    padding: var(--s3) var(--s5);
    background: #F0F1F3 url(img/txt-index.png) no-repeat left 10rem bottom 1.8rem/auto 2.5rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
    position: relative;
}

.toc-wrap__title.toggle-btn:before, .toc-wrap__title.toggle-btn:after {
    background-color: #D82827;
}

.toc-wrap--relations .toc-wrap__title {
    background: #F0F1F3 url(img/txt-links.png) no-repeat left 16rem bottom 1.8rem/auto 2.5rem;
}

.toc-wrap__main {
    padding: var(--s3) var(--s4) var(--s4);
    position: relative;
}

.toc-wrap ul {
    margin: 0;
    padding: 0;
}

.toc-wrap ul li {
    padding-left: 2.6em;
    font-weight: 700;
    position: relative;
}

.toc-wrap ul li:before {
    content: "";
    width: 1.3rem;
    height: 1.3rem;
    background: url(img/arrow-01-black-right.svg) no-repeat center/contain;
    position: absolute;
    top: 0.3em;
    left: var(--s1);
}

.toc-wrap ul li + li {
    margin-top: 1.1em;
}

.toc-wrap a {
    display: block;
    text-decoration: none;
}

.toc-wrap a:hover {
    text-decoration: underline;
}

.main-area h1, .main-area h2, .main-area h3, .main-area h4, .main-area h5, .main-area h6 {
    font-weight: 700;
}

.main-area--low {
    padding-top: var(--s3);
    padding-bottom: var(--s10);
}

.main-area--low .type_movie iframe {
    width: 100rem;
    height: 56rem;
}

.main-area--low p:not([class]) {
    max-width: 80rem;
    margin-right: auto;
    margin-left: auto;
}

.mainvisual-low h1 {
    min-height: 10rem;
    max-width: 100rem;
    margin: 0 auto var(--s4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.8rem;
    font-weight: 700;
    position: relative;
    z-index: 0;
    text-align: center;
}

.main-area--low h1, .main-area--low h2, .main-area--low h3, .main-area--low h4, .main-area--low h5, .main-area--low h6 {
    margin: var(--s5) auto var(--s3);
    font-weight: 700;
}

.main-area--low h1 a, .main-area--low h2 a, .main-area--low h3 a, .main-area--low h4 a, .main-area--low h5 a, .main-area--low h6 a {
    display: block;
    padding-right: var(--s4);
    text-decoration: none;
}

.main-area--low h1 a:hover, .main-area--low h2 a:hover, .main-area--low h3 a:hover, .main-area--low h4 a:hover, .main-area--low h5 a:hover, .main-area--low h6 a:hover {
    opacity: 0.6;
}

.main-area--low h2 {
    padding: 1.7rem 15rem 1.7rem var(--s5);
    font-size: 3.2rem;
    color: #fff;
    background: #333;
    position: relative;
}

.main-area--low h2:before {
    content: "";
    width: 15.7rem;
    height: 7.2rem;
    background: url(img/deco-h2.png) no-repeat center/contain;
    position: absolute;
    right: -1.2rem;
    bottom: -1.2rem;
    z-index: 0;
    opacity: 0.3;
}

.main-area--low h2 a {
    color: #fff;
}

.main-area--low h2 a:before {
    content: "";
    width: 2rem;
    height: 1.8rem;
    background: url(img/arrow-01-white-right.svg) no-repeat right center/contain;
    position: absolute;
    right: var(--s3);
    top: 50%;
    transform: translateY(-50%);
}

.main-area--low h3 {
    padding: 0 0 0.4rem var(--s2);
    border-bottom: solid 1px #333;
    border-left: solid 1px #333;
    font-size: 2.4rem;
    position: relative;
}

.main-area--low h3 a {
    background: url(img/arrow-01-black-right.svg) no-repeat right var(--s2) center;
    background-size: 1.6rem auto;
}

.main-area--low h4, .main-area--low h5 {
    padding: 0.2rem 0 0.2rem var(--s2);
    font-size: 2rem;
    position: relative;
}

.main-area--low h4:before, .main-area--low h5:before {
    content: "";
    width: 0.3rem;
    height: 100%;
    background: #D82827;
    border-radius: var(--s1);
    position: absolute;
    left: 0;
    top: 0;
}

.main-area--low h4 a, .main-area--low h5 a {
    background: url(img/arrow-01-black-right.svg) no-repeat right var(--s2) center;
    background-size: 1.6rem auto;
}

/*
---------------------------------------------

    TOP common

*/
section {
    padding: 10rem 0;
}

.common-title {
    margin-bottom: 12rem;
    font-size: 3.6rem;
    font-weight: 700;
}

.common-title span.st {
    font-size: 5.2rem;
    color: #D82827;
}

.common-title span.st2 {
    font-size: 4.8rem;
    color: #D82827;
    letter-spacing: -0.05em;
}

.common-title a {
    text-decoration: none;
    position: relative;
}

.common-title a:before {
    content: "";
    width: 3.3rem;
    height: 2.8rem;
    background: url(img/arrow-01-red-right.svg) no-repeat center/contain;
    position: absolute;
    right: -5rem;
    bottom: 0.5em;
}

.common-title a:hover {
    opacity: 0.6;
}

.common-title--02 {
    margin-left: calc(50% + var(--s4));
}

.common-title--03 {
    width: 55%;
    margin-bottom: 8rem;
    text-align: right;
}

.common-title--04 {
    width: 50%;
    padding-right: var(--s10);
    text-align: right;
}

.common-title--center {
    text-align: center;
}

.common-lead {
    width: 55%;
}

.common-lead--01 {
    margin-bottom: 12rem;
}

/*
---------------------------------------------

    TOP parts

*/
.sec01-box {
    max-width: 110rem;
    margin: -10rem auto 4rem;
    display: flex;
    gap: 2rem;
    align-items: flex-end;
}

.sec01-box__left {
    width: 42.6rem;
    height: 27rem;
}

.sec01-box__right {
    flex: 1;
}

.sec01-box__btn {
    margin-bottom: 2rem;
    padding: var(--s2);
    padding-left: 19rem;
    height: 11.3rem;
    background: #DEEBF7 url(img/banner-pic-01.jpg) no-repeat left center/17rem auto;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
}

.sec01-box__btn:before {
    content: "";
    width: 2.1rem;
    height: 1.8rem;
    background: url(img/arrow-01-black-right.svg) no-repeat center/contain;
    position: absolute;
    right: var(--s2);
    top: 50%;
    transform: translateY(-50%);
}

.sec01-box__btn:hover {
    opacity: 0.6;
}

.sec01-box__btn2 {
    height: 6.7rem;
    background: #F0F1F3 url(img/txt-open.png) no-repeat right 4.5rem center/auto 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
}

.sec01-box__btn2:before {
    content: "";
    width: 2rem;
    height: 1px;
    background: #D82827;
    position: absolute;
    right: var(--s2);
    top: 50%;
}

.sec01-box__btn2:after {
    content: "";
    width: 1px;
    height: 2rem;
    background: #D82827;
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}

.sec01-box__btn2.is-active {
    background-image: url(img/txt-close.png);
}

.sec01-box__btn2.is-active:after {
    transform: translate(0, -50%) rotate(270deg);
}

.sec01-box__btn2:hover {
    opacity: 0.7;
}

.sec01-box__cont {
    height: 27rem;
    padding: var(--s4);
    display: none;
    background: #F0F1F3;
}

.sec01-box__cont.is-open {
    display: block;
}

.sec01-box__cont .chapter-h-two {
    padding: 0 0 0 1.2em;
    font-size: 100%;
    position: relative;
}

.sec01-box__cont .chapter-h-two::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    background: #D82827;
    position: absolute;
    top: 0.4em;
    left: 0;
}

.sec01-box__cont .chapter-h-two a {
    text-decoration: none;
}

.sec01-box__cont .chapter-h-two a:hover {
    text-decoration: underline;
}

.sec01-box__cont li + li {
    margin-top: var(--s1);
}

.sec02 {
    padding-top: 20rem;
    background: url(img/pattern-repeat.png) repeat-x center top 7rem/auto 28rem;
    position: relative;
    animation: moveBg 70s linear infinite;
    /* 背景アニメーション */
}

.sec02:before {
    content: "";
    width: 50%;
    height: 62rem;
    background: url(img/triangle-bottom.png) no-repeat center bottom/100% 7.6rem, url(img/sec01-pic-01.jpg) no-repeat center/cover;
    position: absolute;
    left: 0;
    top: -90px;
}

.sec02 .l-grid-areas {
    display: flex;
}

.sec02 .common-title--02 {
    margin-bottom: 13rem;
}

.sec02-subtitle {
    margin-bottom: var(--s2);
    font-size: 2rem;
    font-weight: 700;
    padding-right: 6rem;
}

.sec02-subtitle.is-open {
    color: #D82827;
}

.box-sponsored {
    max-width: 100rem;
    margin-right: auto;
    margin-left: auto;
    padding: var(--s4) var(--s5);
    background: #F0F1F3;
    position: relative;
    z-index: 0;
}

.box-sponsored__title {
    max-width: 53.2rem;
    margin-bottom: var(--s5);
    font-size: 2.6rem;
    font-weight: 700;
}

.box-sponsored__sm {
    margin-bottom: var(--s1);
    font-size: 1.2rem;
}

.box-sponsored__logo {
    width: 27.5rem;
    margin-bottom: var(--s5);
}

.box-sponsored__illust {
    width: 10rem;
    height: 16rem;
    position: absolute;
    right: var(--s3);
    top: 14rem;
}

.box-sponsored__tag {
    margin-left: -4rem;
    margin-bottom: var(--s3);
    padding: var(--s1) var(--s5);
    width: fit-content;
    background: #333;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
}

.box-sponsored__catch {
    margin-bottom: var(--s4);
    max-width: 69.5rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #D82827;
}

.box-sponsored__catch02 {
    margin-bottom: var(--s4);
    font-size: 2.4rem;
    font-weight: 700;
    color: #D82827;
}

.box-sponsored .btn-web {
    margin-bottom: var(--s3);
}

.box-sponsored--02 {
    margin-top: 10rem;
}

.main-area--low .box-sponsored--02 p:not([class]) {
    max-width: 100rem;
}

.box-sponsored__illust02 {
    width: 12.5rem;
    height: 17rem;
    position: absolute;
    right: var(--s5);
    top: -3rem;
}

.with-btn-web {
    width: fit-content;
    margin: var(--s3) auto -3.2rem;
    padding: var(--s1) var(--s3);
    border: solid 1px #D82827;
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.with-btn-web:before {
    content: "";
    width: 1.8rem;
    height: 2rem;
    background: url(img/fkds-pin.png) no-repeat center top/contain;
    position: absolute;
    left: var(--s3);
    bottom: -2rem;
}

.sec03 {
    padding-top: 13rem;
    background: url(img/pattern-repeat.png) repeat-x center top 4rem/auto 28rem;
    position: relative;
    animation: moveBgLR 70s linear infinite;
}

.sec03:before {
    content: "";
    width: calc(40% + 6rem);
    height: 36.4rem;
    background: #F0F1F3;
    position: absolute;
    left: calc(60% - 6rem);
    top: 0;
    z-index: -1;
}

.sec03:after {
    content: "";
    width: 40%;
    height: 55rem;
    background: url(img/triangle-bottom-re.png) no-repeat center bottom/100% 6.2rem, url(img/sec02-pic-01.jpg) no-repeat center/cover;
    position: absolute;
    left: 60%;
    top: var(--s7);
}

.sec03-column {
    max-width: 100rem;
    margin: 12rem auto var(--s10);
    position: relative;
    z-index: 1;
}

.sec03-column:before {
    content: "";
    width: 100%;
    height: 7rem;
    background: url(img/triangle-bottom.png) no-repeat center/100% 100%;
    position: absolute;
    left: 1px;
    top: -1px;
    transform: scale(1, -1);
}

.sec03-column:after {
    content: "";
    width: 100%;
    height: 7rem;
    background: url(img/triangle-bottom-re.png) no-repeat center/100% 100%;
    position: absolute;
    left: 1px;
    bottom: -1px;
    transform: scale(-1, 1);
}

.card-list {
    padding: 9rem var(--s2);
}

.card-list:nth-of-type(1) {
    background: url(img/box-bg-01.jpg) no-repeat center/cover;
}

.card-list:nth-of-type(2) {
    background: url(img/box-bg-02.jpg) no-repeat center/cover;
}

.card-list:nth-of-type(3) {
    background: url(img/box-bg-03.jpg) no-repeat center/cover;
}

.card-list__title {
    margin-bottom: var(--s2);
    font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
    color: #D82827;
    position: relative;
}

.card-list__title:before {
    content: "";
    width: 1px;
    height: 10.5rem;
    background: #D82827;
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--s2));
}

.card-list__item li {
    padding: var(--s1);
    background: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}

.card-list__item li + li {
    margin-top: 1em;
}

.sec03-titleblock {
    max-width: 100rem;
    margin: 11rem auto var(--s5);
}
.sec03-titleblock .l-column__main p span {
    background: none;
    color: #000000;
    font-weight: bold;
    font-size: 2rem;
}
.sec03-subtitle {
    padding-right: var(--s2);
    font-size: 3rem;
    font-weight: 700;
    text-align: right;
}

.sec03-subtitle span.st {
    font-size: 3.8rem;
    color: #D82827;
    background: linear-gradient(transparent 75%, #FFEFEF 75%);
}

.sticky-container {
    position: relative;
}

.sticky-element {
    width: 34.7rem;
    position: absolute;
    top: 0;
    left: -8rem;
    z-index: -1;
}

.sticky-container2 {
    position: relative;
}

.sticky-element2 {
    width: 35.7rem;
    position: absolute;
    top: 0;
    right: 8rem;
    z-index: -1;
}

.sticky-element3 {
    width: 34.7rem;
    position: absolute;
    top: 0;
    left: -8rem;
    z-index: -1;
}

.box-about {
    max-width: 95rem;
    margin-left: 20rem;
    display: flex;
}

.box-about__title {
    width: 30rem;
    padding: var(--s4);
    padding-left: 5rem;
    background: #DEEBF7 url(img/character-1.png) no-repeat right bottom/8rem auto;
    font-size: 2.2rem;
    font-weight: 700;
    position: relative;
}

.box-about__title:before {
    content: "";
    width: 4rem;
    height: 1px;
    background: #D82827;
    position: absolute;
    left: 0;
    top: 4.8rem;
}

.box-about__body {
    padding: var(--s4) var(--s5);
    background: #F0F1F3;
    flex: 1;
    position: relative;
}

.box-about__body:before {
    content: "";
    width: 50vw;
    height: 100%;
    background: #F0F1F3;
    position: absolute;
    left: 100%;
    top: 0;
}

.box-about--white {
    margin-top: 10rem;
}

.box-about--white:before {
    background: #fff;
}

.box-about--white .box-about__body {
    background: #fff;
}

.sec04 {
    background: url(img/pattern-repeat.png) repeat-x center top 4rem/auto 28rem, linear-gradient(to right, #fff 50%, #F0F1F3 50%);
    position: relative;
    z-index: 0;
    animation: moveBgLR 70s linear infinite;
    margin-bottom: 10rem;
}

.sec04 .sticky-element2 {
    right: -10rem;
}

.sec04-subtitle {
    margin-top: 12rem;
    padding: var(--s2);
    background: #333;
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    position: relative;
}

.sec04-subtitle:before {
    content: "";
    width: 100vw;
    height: 100%;
    background: #333;
    position: absolute;
    right: 100%;
    top: 0;
}

.sec04-catch {
    margin-bottom: var(--s2);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #D82827;
}

.sec04-name {
    margin-bottom: var(--s4);
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
}

.sec04-name span {
    color: #D82827;
}

.sec04-inner {
    max-width: 90rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.sec04-inner__p {
    padding: var(--s2) var(--s6);
}

.box-white {
    padding: 5rem;
    background: #fff;
    position: relative;
    z-index: 0;
}

.title-line {
    margin: var(--s8) auto var(--s3);
    padding-bottom: var(--s2);
    border-bottom: solid 1px #333;
    font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
}

.sec05 {
    padding-top: 2rem;
    background: #ffffff00 url(img/pattern-repeat.png) repeat-x center top 16rem / auto 28rem;
    position: relative;
    z-index: 0;
    animation: moveBg 70s linear infinite;
}

.sec05:before {
    /* content: ""; */
    width: 50%;
    height: 55.5rem;
    background: #F0F1F3;
    position: absolute;
    left: 0;
    top: 0rem;
    z-index: -1;
}

.sec05 .l-grid-three:nth-child(3n) {
    display: none;
}

.card-photo__pic {
    height: 38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

.card-photo__pic:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(img/box-bg-04.jpg) no-repeat center/cover;
    z-index: -1;
    transition: filter 0.3s ease;
}

.card-photo__pic--02:before {
    background-image: url(img/box-bg-05.jpg);
}

.card-photo__pic--03:before {
    background-image: url(img/box-bg-06.jpg);
}

.card-photo__pic span {
    padding-bottom: var(--s4);
    background: url(img/arrow-01-white-right.svg) no-repeat center bottom/1.8rem auto;
    color: #fff;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.card-photo__pic:hover:before {
    filter: brightness(0.7);
}

.card-photo__pic:hover span {
    color: #fff;
    opacity: 1;
}

.card-photo__title {
    margin: var(--s2) 0;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

.sec06 {
    padding-top: 25rem;
    background: #F0F1F3 url(img/pattern-repeat-white.png) repeat-x center top 12rem/auto 28rem;
    position: relative;
    z-index: 0;
    animation: moveBg 70s linear infinite;
}

.sec06:before {
    content: "";
    width: 50%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.sec06-column {
    max-width: 100rem;
    margin: 0 auto var(--s6);
}

.card-knowledge__title {
    margin-bottom: var(--s2);
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
}

.card-knowledge__title a {
    display: block;
    padding: 0 0 var(--s3);
    background: url(img/arrow-01-red-right.svg) no-repeat center bottom/2.1rem auto;
    text-decoration: none;
}

.card-knowledge__title a:hover {
    color: #D82827;
}

.card-knowledge__pic {
    margin-bottom: var(--s2);
    display: none;
}

.sec07 {
    padding-top: 29rem;
    background: #fff url(img/pattern-repeat.png) repeat-x center top 10rem/auto 28rem;
    position: relative;
    z-index: 0;
    animation: moveBgLR 70s linear infinite;
    margin-top: 4rem;
}

.sec07:before {
    content: "";
    width: 50%;
    height: 62rem;
    background: url(img/triangle-bottom-re.png) no-repeat center bottom/100% 8rem, url(img/sec07-bg-01.jpg) no-repeat center/cover;
    position: absolute;
    left: 50%;
    top: -4rem;
}

.tab-column {
    max-width: 110rem;
    margin: 16rem auto 0 auto;
    display: flex;
}

.tab-column__side {
    width: 50%;
}

.tab-column__main {
    width: 50%;
    background: #F0F1F3;
    position: relative;
}

.tab-column__main:before {
    content: "";
    width: 50vw;
    height: 100%;
    background: #F0F1F3;
    position: absolute;
    left: 100%;
    top: 0;
}

.sec-sv {
    background: #EEF5FB;
    position: relative;
    z-index: 0;
}

.sticky-element3 {
    /* display: none; */
}

.sec-sv .l-grid-areas__cell-01 {
    grid-area: catch;
    position: relative;
    top: auto;
    padding-top: inherit;
}

.sec-sv__inner {
    padding-left: var(--s10);
}

.sec-sv__tag {
    margin-bottom: var(--s4);
    font-size: 1.3rem;
}

.sec-sv__tag span {
    margin-right: var(--s3);
    padding: var(--s1) var(--s2);
    background: #333;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
}

.sec-sv__tag span:before {
    content: "";
    width: 100vw;
    height: 100%;
    background: #333;
    position: absolute;
    right: 100%;
    top: 0;
}

.sec-sv__title {
    margin-bottom: var(--s4);
    font-size: 4rem;
    font-weight: 700;
}

.sec-sv__catch {
    margin-bottom: var(--s3);
    font-size: 3rem;
    font-weight: 700;
    color: #D82827;
}

.sec-sv__subtitle {
    margin-top: var(--s5);
    padding: var(--s8) 0 var(--s2) var(--s2);
    border-left: solid 1px #D82827;
    font-size: 3rem;
    font-weight: 700;
}

.sec-sv__btns {
    max-width: 94rem;
    margin: var(--s5) auto 0;
}

.sec-sv .l-grid-areas {
    margin-top: 8rem;
}

.bg-white {
    background: #fff;
    position: relative;
    z-index: 0;
}

.box-editor {
    max-width: 98rem;
    margin: 0 auto;
    padding-left: 24rem;
    background: url(img/logo-zenken.png) no-repeat left top/20.7rem auto;
}

.box-editor__title {
    margin-bottom: var(--s2);
    font-size: 3rem;
    font-weight: 700;
}

.number-catch {
    margin-bottom: var(--s2);
    padding: 0 0 0 var(--s2);
    border-left: solid 1px #D82827;
    font-size: 2rem;
    font-weight: 700;
}

.number-catch span {
    display: block;
    margin-bottom: var(--s1);
    font-size: 6.9rem;
    font-weight: 400;
    line-height: 1;
}

.parts-comment--lower {
    margin: var(--s10) auto;
}

.parts-comment__catch {
    margin-bottom: var(--s5);
    text-align: center;
    font-size: 3.2rem;
    font-weight: 700;
}

.parts-comment-wrap {
    display: flex;
    gap: var(--s4);
}

.parts-comment-wrap--reverse {
    flex-direction: row-reverse;
}

.parts-comment-wrap__side {
    width: 16rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

.parts-comment-wrap__side p {
    margin-top: var(--s1);
    line-height: 1.5;
}

.parts-comment-wrap__side p.text-right {
    text-align: right;
}

.parts-comment-wrap__side img {
    display: block;
    width: 16rem;
    height: auto;
}

.parts-comment-wrap__side img.monpi {
    margin-left: auto;
    width: 11rem;
}

.parts-comment-wrap__side span.st {
    font-size: 1.6rem;
    font-weight: 700;
}

.parts-comment-wrap__main {
    flex: 1;
}

.parts-comment-wrap + .parts-comment-wrap {
    margin-top: var(--s5);
}

.card-comment {
    padding: var(--s4);
    background: #F0F1F3;
    position: relative;
}

.card-comment:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.1rem 1.6rem 1.1rem 0;
    border-color: transparent #F0F1F3 transparent transparent;
    position: absolute;
    left: -1.4rem;
    top: var(--s5);
}

.card-comment--reverse:before {
    left: auto;
    right: -1.4rem;
    transform: rotate(180deg);
}

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

      sp base settings

  */:root {
        font-size: 2.6666666667vw;
    }

    body {
        font-size: 1.4rem;
    }

    .sp_br {
        display: inline;
    }

    .pc_br {
        display: none;
    }
}

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

      sp layout center

  */.l-center {
        padding-right: 1.2rem;
        padding-left: 1.2rem;
        box-sizing: border-box;
    }

    /*
  ---------------------------------------------

      sp layout stack

  */
    .l-stack {
        gap: var(--s4);
    }

    /*
  ---------------------------------------------

      sp layout cluster

  */
    .l-cluster {
        gap: var(--s1);
    }

    /*
  ---------------------------------------------

      sp layout grid

  */
    .l-grid {
        grid-gap: var(--s2);
        grid-template-columns: 100%;
    }
.sec-sv .l-grid-areas {
    margin-top: 2rem;
}
    .l-grid.sec-sv__btns {
        grid-gap: 0;
    }

       .l-grid.sec-sv__btns .btn-internal, .l-grid.sec-sv__btns .btn-web {
        width: 94%;
        margin: var(--s1) auto;
        z-index: 0;
    }
    
    .l-grid-three {
        grid-gap: var(--s4);
        grid-template-columns: 100%;
    }

    /*
  ---------------------------------------------

      sp layout sidebar

  */
    .l-sidebar__side {
        display: none;
    }

    .l-sidebar__main {
        width: 100%;
    }

    /*
  ---------------------------------------------

      sp layout column

  */
    .l-column {
        gap: var(--s2);
    }

    .l-column__side {
        width: 100%;
    }

    .l-column__main {
        width: 100%;
    }

    /*
  ---------------------------------------------

      sp layout grid areas

  */
    .l-grid-areas {
        grid-template-areas:
            "catch"
            "img"
            "text";
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        grid-gap: var(--s4);
        /* display: grid; */
        display: flex;
        flex-direction: column-reverse;
    }

    .l-grid-areas__cell-01 {
        grid-area: catch;
        position: relative;
        top: 0;
        padding-top: 1rem;
    }

    /*
  ---------------------------------------------

      sp layout float

  */
    .l-float__left-pc {
        width: 100%;
        margin-right: 0;
        float: none;
    }

    .l-float__right-pc {
        width: 100%;
        margin-left: 0;
        float: none;
    }

    .l-float__center {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .l-float__left {
        width: 45%;
        margin-right: var(--s2);
        margin-bottom: var(--s1);
    }

    .l-float__right {
        width: 45%;
        margin-left: var(--s2);
        margin-bottom: var(--s1);
    }

    /*
  ---------------------------------------------

      sp layout scroll

  */
    .l-scroll-x-sp {
        width: 100%;
        padding-bottom: 0.6rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .l-scroll-x-sp::-webkit-scrollbar {
        height: 0.6rem;
    }

    .l-scroll-x-sp::-webkit-scrollbar-track {
        border-radius: 0.3rem;
        background: #eee;
    }

    .l-scroll-x-sp::-webkit-scrollbar-thumb {
        border-radius: 0.3rem;
        background: #ddd;
    }
}

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

      header

  */.header-area {
        min-height: var(--s6);
        padding-right: 5.6rem;
    }

    .header-area__name {
        line-height: 1.2;
        font-size: 1rem;
        padding: 4px 6vw 0 15vw;
        text-align: left;
    }

    .header-area__logo {
        width: 4rem;
        left: 0.5rem;
        top: var(--s-52);
    }

    .header-area__inner {
        height: 9rem;
    }

    /*
  ---------------------------------------------

      mainvisual

  */
    .mainvisual {
        padding: 5rem 0 0;
    }

    .mainvisual-logo {
        margin-bottom: var(--s1);
        width: 4.6rem;
        margin-top: var(--s1);
    }

    .mainvisual-title {
        font-size: 2.6rem;
    }

    .mainvisual-lead {
        margin-bottom: var(--s2);
        font-size: 1.4rem;
    }

    .mainvisual-bg {
        /* margin-top: var(--s2); */
        position: absolute;
        height: 50rem;
        width: 100vw;
        height: 136vw;
        overflow: hidden;
        pointer-events: none;
        perspective: 155px;
        top: 80vw;
    }

    .mainvisual-bg:before {
        content: none;
    }

    .mainvisual-bg__column {
        animation: loop01 150s linear infinite;
    }

    .mainvisual-low {
        overflow: hidden;
    }

    .mainvisual-low:before {
        height: 15rem;
        right: -6.5rem;
        opacity: 0.3;
    }

    .main-area--low {
        padding-top: 0;
    }

    /*
  ---------------------------------------------

      sp btn

  */
    .btn-internal, .btn-web {
        width: 94%;
        margin: var(--s3) auto;
        z-index: 0;
    }

    .btn-internal a, .btn-web a {
        min-height: var(--s7);
        background-position: right var(--s2) center;
    }

    .btn-internal:hover a, .btn-web:hover a {
        transform: translate(0, 0);
    }

    .btn-internal a {
        background-size: 1.6rem auto;
    }

    .btn-web a {
        background-size: 2.2rem auto;
    }

    .btn-link {
        margin: var(--s1) auto;
    }

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

    .btn-link a:hover {
        text-decoration: underline;
        opacity: 1;
    }

    .btn-tel {
        width: 94%;
        margin: var(--s3) auto;
        display: block;
        position: relative;
    }

    .btn-tel a {
        width: 100%;
        min-height: var(--s7);
        margin: 0;
        padding: var(--s1) var(--s6);
        background: #06B194 url(img/icon-tel.png) no-repeat left var(--s3) center/2.6rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #fff;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        position: relative;
        z-index: 1;
        transform: translate(0, 0);
        transition: transform 0.3s;
    }

    .btn-tel::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translate(0.5rem, 0.5rem);
    }

    /*
  ---------------------------------------------

      sp table

  */
    thead, tbody, tr {
        display: block;
    }

    th, td {
        width: 100%;
        display: block;
    }

    .table-label thead {
        display: none;
    }

    .table-label tbody th {
        background: #F7F7F5;
    }

    .table-label td {
        padding: 0;
        display: flex;
        position: relative;
    }

    .table-label td::before {
        content: attr(data-label);
        width: 7em;
        background: #F7F7F5;
        border-right: solid 1px #C7C7C7;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-weight: 700;
        text-align: center;
    }

    .table-label__cell {
        padding: var(--s1) var(--s2);
    }

    .l-scroll-x table thead, .l-scroll-x-sp table thead {
        display: table-header-group;
    }

    .l-scroll-x table tbody, .l-scroll-x-sp table tbody {
        display: table-row-group;
    }

    .l-scroll-x table tr, .l-scroll-x-sp table tr {
        display: table-row;
    }

    .l-scroll-x table th, .l-scroll-x table td, .l-scroll-x-sp table th, .l-scroll-x-sp table td {
        width: inherit;
        min-width: 15rem;
        display: table-cell;
    }

    .l-scroll-x-sp table {
        width: inherit;
    }

    /*
  ---------------------------------------------

      sp caption

  */
    .caption {
        font-size: 0.9rem;
    }

    .caption-scroll {
        font-size: 0.9rem;
    }

    .caption-scroll::-webkit-scrollbar {
        height: 0.4rem;
    }

    .caption-scroll::-webkit-scrollbar-track {
        border-radius: 0.2rem;
    }

    .caption-scroll::-webkit-scrollbar-thumb {
        border-radius: 0.2rem;
    }

    /*
  ---------------------------------------------

  	sp catch

  */
    .catch-01, .catch-02 {
        font-size: 1.6rem;
    }

    /*
  ---------------------------------------------

      sp float wrap

  */
    .float-wrap .float-img.fr {
        width: 100%;
        margin-left: 0;
        float: none;
    }

    .float-wrap .float-img.fl {
        width: 100%;
        margin-right: 0;
        float: none;
    }

    .float-wrap .float-img.ct {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /*
  ---------------------------------------------

  	sp pankuzu

  */
    #pankuzu {
        margin-bottom: var(--s3);
    }

    /*
  ---------------------------------------------

      sp footer

  */
    .footer-area {
        padding: var(--s3) 0 0;
    }

    .footer-main {
        padding-right: 0;
        padding-left: 0;
        box-sizing: border-box;
    }

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

    .footer-logo {
        width: 7rem;
    }

    .footer-logo__link:hover {
        opacity: 1;
    }

    .footer-box + .footer-box {
        margin-top: var(--s2);
    }

    .footer-menu-title {
        margin-bottom: 0;
    }

    .footer-menu-title__link {
        padding: var(--s1) var(--s4) var(--s1) var(--s2);
        position: relative;
    }

    .footer-menu-title__link::after {
        content: "";
        width: var(--s1);
        height: var(--s1);
        background: url("img/arrow-01-black-down.svg") no-repeat center/contain;
        position: absolute;
        top: 50%;
        right: var(--s2);
        transform: translate(0, -50%) rotate(0);
        transition: transform 0.3s;
    }

    .footer-menu-title__link:hover {
        opacity: 1;
    }

    .footer-menu-title__link.is-open::after {
        transform: translate(0, -50%) rotate(180deg);
    }

    .footer-menu-title__link--not-toggle::after {
        background: url("img/arrow-01-black-right.svg") no-repeat center/contain;
    }

    .footer-menu {
        padding: var(--s1) 0;
        background: rgba(255, 255, 255, 0.8);
        gap: 0;
    }

    .footer-menu__item {
        width: 100%;
    }

    .footer-menu__link {
        padding: var(--s1) var(--s2);
    }

    .footer-menu__link:hover {
        opacity: 1;
    }

    .footer-menu-sub {
        margin-left: var(--s2);
    }

    .footer-menu-sub__link {
        padding: var(--s1) var(--s2) var(--s1) 1.1em;
    }

    .footer-menu-sub__link::before {
        top: var(--s1);
    }

    .footer-menu-sub__link:hover {
        opacity: 1;
    }

    .footer-disclaimer {
        width: calc(100% - var(--s2));
        margin: var(--s2) auto;
        padding: var(--s1) var(--s2);
    }

    .footer-nocopy {
        margin: var(--s2) var(--s1);
        font-size: 1rem;
    }

    .footer-copyright {
        width: 100%;
        text-align: center;
        font-size: 1.4rem;
    }

    .footer-sitemap {
        display: none;
    }

    .footer-banner {
        height: auto;
        padding: var(--s-2);
        padding-left: 11rem;
        background: url(img/arrow-banner.svg) no-repeat right var(--s2) bottom 0.4rem/1.8rem auto, url(img/character-3.png) no-repeat var(--s8) bottom/4.8rem auto, url(img/banner-icon.png) no-repeat 4% center/5.6rem auto, linear-gradient(to right, #333 var(--s8), #FFEFEF var(--s8));
        background-size: 1.8rem auto, 3.3rem auto, 4rem auto, auto;
        right: auto;
        left: 0;
        bottom: 0;
        font-size: 1.3rem;
        z-index: 100;
    }

    .footer-banner span {
        font-size: 1rem;
    }

    .footer-banner:hover {
        right: auto;
        left: 0;
        z-index: 999;
    }

    /*
  ---------------------------------------------

  	sp gnavi

  */
    .gnavi-btn {
        width: var(--s6);
        height: var(--s6);
    }

    .gnavi-btn span {
        width: var(--s3);
        left: 1.2rem;
    }

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

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

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

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

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

    .gnavi-area {
        width: 100%;
    }

    .gnavi-area__logo.for-sp {
        width: 8rem;
        padding-left: 1rem;
    }

    /*
  ---------------------------------------------

      sp page

  */
    .page-top {
        width: var(--s6);
        height: var(--s6);
        right: 0;
        bottom: 0;
    }

    .page-top__link:hover {
        opacity: 1;
    }

    /*
  ---------------------------------------------

       sp toggle sp

  */
    .toggle-btn:before {
        right: var(--s1);
    }

    .toggle-btn:after {
        right: 1.8rem;
    }

    .toggle-sp-content {
        display: none;
    }

    /*
  ---------------------------------------------

       more

  */
    .more-btn {
        width: 94%;
        margin: var(--s6) auto;
        padding: var(--s2) var(--s7);
        font-size: 1.5rem;
    }

    /*
  ---------------------------------------------

       tab

  */
    .tab-btn {
        padding-left: var(--s4);
        background-size: 2rem auto;
        background-position: left center;
        font-size: 1.8rem;
    }

    /*
  ---------------------------------------------

       TOC

  */
    .toc-wrap {
        margin: var(--s5) auto;
    }

    .toc-wrap__title {
        padding: 2rem var(--s3);
        background-size: auto 3rem;
        font-size: 1.8rem;
        background-position: left 6.8rem center;
    }

    .toc-wrap__main {
        padding: var(--s2) var(--s3) var(--s3);
    }

    .toc-wrap ul li:before {
        width: 1.5rem;
        height: 1.6rem;
        top: 0.15em;
    }

    .toc-wrap--relations .toc-wrap__title {
        background-size: auto 3rem;
        background-position: 14rem center;
    }

    .mainvisual-low h1 {
        min-height: 12rem;
        margin-bottom: var(--s1);
        padding: 0 var(--s2);
        font-size: 2.6rem;
        justify-content: flex-start;
    }

    .main-area--low h2, .main-area--low h3, .main-area--low h4, .main-area--low h5, .main-area--low h6 {
        margin: var(--s4) auto var(--s2);
    }

    .main-area--low h2 {
        padding: var(--s2);
        font-size: 2.2rem;
    }

    .main-area--low h2:before {
        width: 7.6rem;
        height: 4rem;
    }

    .main-area--low h2 a {
        background-size: 0.8rem auto;
        background-position: right center;
    }

    .main-area--low h2 a:before {
        width: 1.5rem;
    }

    .main-area--low h3 {
        padding-bottom: var(--s1);
        font-size: 1.9rem;
    }

    .main-area--low h3:before {
        width: 4.2rem;
        height: 4.2rem;
        left: -1.4rem;
        top: -1rem;
    }

    .main-area--low h3 a {
        background-size: 1.2rem auto;
        background-position: right center;
    }

    .main-area--low h4 {
        font-size: 1.7rem;
    }

    .main-area--low h4:before {
        width: 0.6rem;
    }

    .main-area--low h4 a {
        background-size: 1.2rem auto;
        background-position: right center;
    }

    .main-area--low h5 {
        font-size: 1.5rem;
    }

    .main-area--low h5 a {
        background-size: 0.8rem auto;
        background-position: right center;
    }
}

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

      TOP common

  */.common-title {
        margin-bottom: var(--s4);
        font-size: 2.2rem;
    }

    .common-title span.st, .common-title span.st2 {
        font-size: 2.6rem;
    }

    .common-title--02 {
        margin-left: 0;
    }

    .common-title--03 {
        width: 100%;
        text-align: left;
    }

    .common-title--04 {
        width: 100%;
        text-align: left;
    }

    .common-title a:before {
        width: 2rem;
        height: 1.8rem;
        right: -4rem;
        bottom: 0.4em;
    }

    .common-lead {
        margin: var(--s3) auto;
        width: 100%;
    }

    section {
        padding: var(--s7) 0;
    }

    /*
  ---------------------------------------------

      TOP 

  */
    .sec01-box {
        display: block;
        margin: -6rem auto -8rem;
    }

    .sec01-box__left {
        width: 100%;
        height: auto;
    }

    .sec01-box__btn {
        height: auto;
        padding-left: 15rem;
        font-size: 1.6rem;
        background-size: 13rem auto;
    }

    .sec01-box__cont {
        padding: var(--s3);
        height: 100%;
        margin-top: 0.5rem;
    }

    .sec02 {
        padding-top: 14rem;
        background-size: 13rem auto;
        background-position: 0 var(--s2);
    }

    .sec02:before {
        height: 13rem;
        background-size: auto 2.3rem, cover;
        top: 6rem;
        z-index: 0;
    }

    .sec02 .common-title--02 {
        margin-bottom: 6rem;
        margin-top: 5rem;
    }

    .box-sponsored {
        padding: var(--s3);
    }

    .l-grid-areas__cell-02 {
    grid-area: img;
    width: 100%;
}
    

    .box-sponsored__title {
        margin-bottom: var(--s2);
        padding-right: 0;
        font-size: 1.9rem;
    }

    .box-sponsored__illust {
        width: 5.2rem;
        height: auto;
        top: 15rem;
        right: var(--s1);
    }

    .box-sponsored__logo {
        margin-bottom: var(--s3);
        width: 20rem;
    }

    .box-sponsored__tag {
        margin-left: -2.4rem;
        padding: var(--s1) var(--s2);
        font-size: 1.4rem;
    }

    .box-sponsored__illust02 {
        width: 7rem;
        height: auto;
        right: 0;
        top: 1rem;
    }

    .box-sponsored__catch, .box-sponsored__catch02 {
        margin-bottom: var(--s2);
        font-size: 1.7rem;
        padding-right: 3rem;
    }

    .sec02-subtitle {
        margin-bottom: 0;
        font-size: 1.8rem;
    }

    .sec02-subtitle.is-open {
        margin-bottom: var(--s2);
    }

    .with-btn-web {
        margin-bottom: -1.8rem;
        font-size: 1.5rem;
        z-index: 1;
    }

    .sec03 {
        background-size: 13rem auto;
        background-position: left 2rem;
    }

    .sec03:after {
        height: 13rem;
        width: 45%;
        background-size: auto 3rem, cover;
        left: 55%;
        top: var(--s5);
    }

    .sec03:before {
        width: 50%;
        height: 10rem;
        left: 50%;
        top: 2.7rem;
        display: none;
    }

    .sec03-column {
        margin-top: 5rem;
    }

    .sec03-column:before, .sec03-column:after {
        height: 4rem;
    }

.sec03-titleblock {margin: 11rem auto var(--s3);}

    
    .card-list {
        padding: 6rem var(--s2);
    }

    .card-list__title:before {
        height: 5rem;
    }

    .sec03-subtitle {
        text-align: left;
        font-size: 6vw;
    }

    .sec03-subtitle span.st {
        font-size: 2.6rem;
        font-size: 8vw;
    }

    .box-about {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .box-about__title {
        width: 100%;
        background-size: auto 70%;
        background-position: left bottom;
        position: relative;
        padding: var(--s2) var(--s2) var(--s2) var(--s5);
    }

    .box-about__title:after {
        content: "";
        width: 50vw;
        height: 100%;
        background: #DEEBF7;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .box-about__title:before {
        content: "";
        width: 4rem;
        height: 1px;
        background: #D82827;
        position: absolute;
        left: 0;
        top: 4.8rem;
        display: none;
    }

    .box-about__body {
        padding: var(--s3);
    }

    .sec04 {
        background-size: 13rem auto, auto;
        margin-bottom: 0;
    }

    .sec04-subtitle {
        margin-top: var(--s6);
        font-size: 2rem;
    }

    .sec04-catch {
        font-size: 1.6rem;
    }

    .sec04-name {
        font-size: 1.8rem;
    }

    .sec04-inner__p {
        padding: var(--s2) 0;
    }

    .box-white {
        padding: var(--s2);
    }

    .title-line {
        padding-bottom: var(--s1);
        font-size: 1.9rem;
    }

    .sticky-element, .sticky-element2, .sticky-element3 {
        width: 18rem;
    }

    .sticky-element, .sticky-element3 {
        left: -5rem;
    }

    .sec05 {
        padding-top: 17rem;
        background-size: 13rem auto, auto;
    }

    .sec05:before {
        height: 23rem;
    }

    .card-photo__pic {
        height: 20rem;
    }

    .card-photo__pic:hover span {
        opacity: 0;
    }

    .card-photo__title {
        font-size: 2rem;
    }

    .sec06 {
        padding-top: 9rem;
        background-size: 13rem auto, auto;
        background-position: 0 var(--s8);
    }

    .sec06:before {
        height: 100%;
        top: var(--s5);
        left: -10rem;
    }

    .card-knowledge__title {
        font-size: 2.1rem;
    }

    .sec07 {
        padding-top: 11rem;
        background-size: 13rem auto;
        background-position: 0 10rem;
        margin-top: 3rem;
    }

    .sec07:before {
        height: 13rem;
        top: 0rem;
        background-size: auto 2rem, cover;
    }

    .sec-sv__inner {
        padding-left: var(--s1);
    }

    .type_movie iframe, .main-area--low .type_movie iframe {
        width: 100%;
        height: 70vw;
    }

    .sec-sv__tag span {
        margin-right: var(--s2);
        font-size: 1.6rem;
    }

    .sec-sv__title {
        font-size: 2rem;
    }

    .sec-sv__catch {
        font-size: 1.6rem;
    }

    .sec-sv__subtitle {
        padding-top: var(--s3);
        font-size: 1.8rem;
    }

    .number-catch {
        margin-bottom: 0;
        font-size: 1.8rem;
    }

    .number-catch span {
        font-size: 3.2rem;
    }

    .box-editor {
        padding: 6rem 0 0;
        background-size: auto 5.5rem;
    }

    .box-editor__title {
        font-size: 1.8rem;
    }

    .parts-comment__catch {
        margin-bottom: var(--s2);
        font-size: 2rem;
    }

    .parts-comment-wrap {
        gap: var(--s2);
    }

    .parts-comment-wrap__side {
        width: 8rem;
    }

    .parts-comment-wrap__side p {
        margin-top: var(--s-2);
        line-height: 1.5;
    }

    .parts-comment-wrap__side p span.st {
        font-size: 1.4rem;
    }

    .parts-comment-wrap__side img.monpi {
        width: 7rem;
        margin-left: auto;
    }

    .card-comment {
        padding: var(--s3);
    }
}

/* 背景アニメーションのキー */
@keyframes moveBg {
    0% {
        background-position: 100% 5%;
        /* 右から */
    }

    100% {
        background-position: 0 5%;
        /* 左へ */
    }
}

@keyframes moveBgLR {
    0% {
        background-position: 0 1%;
        /* 右から */
    }

    100% {
        background-position: 71% 1%;
        /* 左へ */
    }
}

/* アニメーションの基本スタイル */
.text-animate {
    display: inline-block;
    /* 各文字をブロック扱いに */
    opacity: 0;
    /* 初期は非表示 */
    transform: translateX(-10px);
    /* 初期位置を左にずらす */
    animation: textSlideIn 0.5s forwards;
}

.text-animate-delay {
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
}

/* アニメーションのキー */
@keyframes textSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ―――――――――――――― ▼アニメーション処理▼ ―――――――――――――― */
/* 初期状態のフィルター */
.img-effect {
    display: inline-block;
    position: relative;
    overflow: hidden;
    filter: grayscale(100%);
    /* 白黒 */
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* ホバー時のフィルター解除 */
.img-effect:hover {
    filter: grayscale(0%);
    /* カラー表示 */
    transform: scale(1.1);
    /* 拡大効果 */
}

/* カラー表示のアニメーション */
.img-effect img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

/* 初期状態: 非表示 */
.sec02, .sec03, .sec04, .sec05, .sec06, .sec07, .sec-sv, .bg-white {
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 左からフェードイン */
.fade-in-left {
    transform: translateX(-100px);
}

/* 右からフェードイン */
.fade-in-right {
    transform: translateX(100px);
}

/* 表示状態 */
.visible {
    opacity: 1;
    transform: translateX(0);
}

@keyframes slideIn {
    0% {
        transform: translateX(-180px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,100% {
        opacity: 1;
    }
}

@keyframes slideInR {
    0% {
        transform: translateX(180px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,100% {
        opacity: 1;
    }
}

section.sec03.fade-in-right.visible:after, section.sec07.fade-in-right.visible:before {
    animation: slideInR 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

section.sec02.fade-in-left.visible:before, section.sec04.fade-in-left.visible h3, section.sec04.fade-in-left.visible .box-white {
    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

section.sec02.fade-in-left.visible .common-title span, .mainvisual-title span.st, section.sec03.fade-in-right.visible .common-title span.st2, section.sec04.fade-in-left.visible .common-title span.st, section.sec05.fade-in-right.visible .common-title span.st, section.sec06.fade-in-left.visible .common-title span.st, section.sec07.fade-in-right.visible .common-title span.st {
    animation: slideInspan 0.5s cubic-bezier(0, 0, 0.2, 1);
    position: relative;
    display: inline-block;
    @charset "UTF-8"; /* GoogleFonts読み込み 下記のライセンス記述は削除禁止 */
    /*
* "Noto Sans JP" licensed under the SIL Open Font License 1.1
* by https: //fonts.google.com/specimen/Noto+Sans+JP
*/
    @font-face {
        font-family: "Noto Sans JP";
        font-style: normal;
        font-weight: 400;
        src: url("fonts/NS-400.woff2") format("woff2"), url("fonts/NS-400.woff") format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: "Noto Sans JP";
        font-style: normal;
        font-weight: 700;
        src: url("fonts/NS-700.woff2") format("woff2"), url("fonts/NS-700.woff") format("woff");
        font-display: swap;
    }

    /*
---------------------------------------------

    base settings

*/
    : root {
        font-size: 62.5%;
        --s-2: calc(var(--s1) / 2);
        --s1: 0.8rem;
        --s2: calc(var(--s1) * 2);
        --s3: calc(var(--s1) * 3);
        --s4: calc(var(--s1) * 4);
        --s5: calc(var(--s1) * 5);
        --s6: calc(var(--s1) * 6);
        --s7: calc(var(--s1) * 7);
        --s8: calc(var(--s1) * 8);
        --s9: calc(var(--s1) * 9);
        --s10: calc(var(--s1) * 10);
    }

    @media screen and (max-width: 1200px) {
        :root {
            font-size: 0.8333333333vw;
        }
    }

    body {
        margin: 0;
        padding: 0;
        background: #fff;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.5rem;
        font-weight: 400;
        -webkit-text-size-adjust: 100%;
        line-height: 1.5;
        color: #333;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
        font-weight: normal;
        clear: both;
    }

    ul, ol, dl, p, img, form, dt, dd, figure {
        margin: 0;
        padding: 0;
        border: 0;
    }

    li {
        list-style: none;
    }

    input, button, textarea, select {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        outline: none;
        font-size: 1.5rem;
        font-family: "Noto Sans JP", sans-serif;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    a {
        color: #333;
        transition: opacity 0.6s ease, color 0.6s ease;
        outline: none;
    }

    ; {
        color: #333;
        text-decoration: none;
    }

    p {
        line-height: 2;
    }

    p + p {
        margin-top: 1em;
    }

    strong {
        font-weight: 700;
    }

    em {
        font-style: italic;
        font-weight: normal;
    }

    small {
        font-size: 80%;
    }

    * {
        box-sizing: border-box;
    }

    .sp_br {
        display: none;
    }

    .pc_br {
        display: inline;
    }

    @media screen and (min-width: 768px) {
        .for-sp {
            display: none;
        }
    }

    @media screen and (max-width: 767px) {
        .for-pc {
            display: none;
        }
    }

    .type_movie iframe {
        width: 104rem;
    }

    .type_movie {
        text-align: center;
    }

    /*
---------------------------------------------

    animation

*/
    @keyframes tabAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /*
---------------------------------------------

    mainvisual

*/
    @keyframes loop01 {
        0% {
            background-position: 0% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /*
---------------------------------------------

    layout center

*/
    .l-center {
        max-width: 120rem;
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--s3);
        padding-left: var(--s3);
        box-sizing: content-box;
    }

    .l-center--narrow {
        max-width: 100rem;
    }

    .l-center--narrow .caption.caption--left {
        text-align: center;
        margin-bottom: 2rem;
    }

    .l-center--narrow .caption.caption--left br {
        display: none;
    }

    /*
---------------------------------------------

    layout stack

*/
    .l-stack {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--s3);
    }

    .l-stack > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /*
---------------------------------------------

    layout cluster

*/
    .l-cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
    }

    /*
---------------------------------------------

    layout grid

*/
    .l-grid {
        --minmum: calc((100% - var(--s5)) / 2);
        display: grid;
        grid-gap: var(--s5);
    }

    .l-grid-three {
        --minmum: calc((100% - var(--s4) * 2) / 3);
        display: grid;
        grid-gap: var(--s4);
        margin-bottom: 8rem;
    }

    @supports (width: min(var(--minmum), 100%)) {
        .l-grid, .l-grid-three {
            grid-template-columns: repeat(auto-fill, minmax(min(var(--minmum), 100%), 1fr));
        }
    }

    /*
---------------------------------------------

    layout sidebar

*/
    .l-sidebar {
        display: flex;
        gap: var(--s5);
    }

    .l-sidebar__side {
        width: 24rem;
    }

    .l-sidebar__main {
        flex: 1;
    }

    /*
---------------------------------------------

    layout column

*/
    .l-column {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s5);
    }

    .l-column__side {
        width: 40rem;
    }

    .l-column__side02 {
        width: 55rem;
    }

    .l-column__side03 {
        width: 48rem;
    }

    .l-column__main {
        flex: 1;
    }

    .l-column--row-reverse {
        flex-direction: row-reverse;
    }

    .l-column--align-center {
        align-items: center;
    }

    /*
---------------------------------------------

    layout grid areas

*/
    .l-grid-areas {
        display: grid;
        grid-template-areas: "img catch" "img text";
        grid-template-columns: 40rem 1fr;
        grid-template-rows: auto 1fr;
        grid-gap: var(--s2) var(--s8);
    }

    .l-grid-areas__cell-01 {
        grid-area: catch;
        position: sticky;
        top: 0;
        padding-top: 6rem;
    }

    .l-grid-areas__cell-02 {
        grid-area: img;
    }

    .l-grid-areas__cell-03 {
        grid-area: text;
    }

    .l-grid-areas--row-reverse {
        grid-template-areas: "catch img" "text img";
        grid-template-columns: 1fr 40rem;
    }

    .l-grid-areas--align-center {
        grid-template-rows: auto auto;
    }

    .l-grid-areas--align-center .l-grid-areas__cell-01 {
        place-self: end start;
    }

    .l-grid-areas--align-center .l-grid-areas__cell-02 {
        place-self: center;
    }

    .l-grid-areas--align-center .l-grid-areas__cell-03 {
        place-self: start;
    }

    .l-grid-areas--large {
        grid-template-columns: 55rem 1fr;
        grid-gap: var(--s2) var(--s5);
    }

    .l-grid-areas--large-reverse {
        grid-template-areas: "catch img" "text img";
        grid-template-columns: 1fr 55rem;
        grid-gap: var(--s2) var(--s5);
    }

    /*
---------------------------------------------

    layout float

*/
    .l-float {
        display: flow-root;
    }

    .l-float__left-pc {
        width: 40rem;
        margin-right: var(--s5);
        margin-bottom: var(--s2);
        float: left;
    }

    .l-float__right-pc {
        width: 40rem;
        margin-left: var(--s5);
        margin-bottom: var(--s2);
        float: right;
    }

    .l-float__center {
        width: 64rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--s2);
    }

    .l-float__left {
        width: 40rem;
        margin-right: var(--s5);
        margin-bottom: var(--s2);
        float: left;
    }

    .l-float__right {
        width: 40rem;
        margin-left: var(--s5);
        margin-bottom: var(--s2);
        float: right;
    }

    /*
---------------------------------------------

    layout scroll x

*/
    .l-scroll-x {
        width: 100%;
        padding-bottom: var(--s1);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-color: #ddd transparent;
        scrollbar-width: 0.6rem;
    }

    .l-scroll-x:: -webkit-scrollbar {
        height: 0.6rem;
    }

    .l-scroll-x:: -webkit-scrollbar-track {
        border-radius: 0.3rem;
        background: #eee;
    }

    .l-scroll-x:: -webkit-scrollbar-thumb {
        border-radius: 0.3rem;
        background: #ddd;
    }

    .l-scroll {
        width: 100%;
        height: 100%;
        padding-right: var(--s1);
        overflow-y: auto;
        scrollbar-color: #ddd transparent;
        scrollbar-width: 0.6rem;
    }

    .l-scroll:: -webkit-scrollbar {
        height: 0.6rem;
    }

    .l-scroll:: -webkit-scrollbar-track {
        border-radius: 0.3rem;
        background: #eee;
    }

    .l-scroll:: -webkit-scrollbar-thumb {
        border-radius: 0.3rem;
        background: #ddd;
    }

    /*
---------------------------------------------

    header

*/
    .header-area {
        padding-top: var(--s-2);
        padding-bottom: var(--s-2);
        padding-right: 9rem;
    }

    .header-area__inner {
        height: 9rem;
    }

    .header-area__logo {
        width: 7.5rem;
        position: absolute;
        left: 1rem;
        top: var(--s1);
    }

    .header-area__logo a {
        display: block;
    }

    .header-area__logo a: hover {
        opacity: 0.6;
    }

    .header-area__name {
        font-size: 1.3rem;
        text-align: right;
    }

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

    .header-area__name a: hover {
        opacity: 0.6;
    }

    /*
---------------------------------------------

    MainVisual

*/
    .mainvisual {
        padding: var(--s2) 0 var(--s5);
        position: relative;
        z-index: -1;
        overflow: hidden;
        margin-top: -10rem;
        height: 100rem;
        margin-bottom: -31rem;
    }

    .mainvisual-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 70vw;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
        perspective: 650px;
        /* 奥行きを作る */
    }

    .mainvisual-bg: before {
        content: "";
        width: 90%;
        height: 100%;
        background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .mainvisual-bg__column {
        width: 1000rem;
        /* 画像の横幅に応じて調整 */
        height: 160rem;
        background: url(img/mv-pic.png) repeat-x right top/auto 100%;
        transform: translateZ(-200px) rotateY(-10deg);
        /* 奥行きと逆方向の回転を追加 */
        animation: slideAnimation 90s linear infinite;
        margin-top: -40rem;
        position: absolute;
        left: -150rem;
    }

    /* アニメーション */
    @keyframes slideAnimation {
        0% {
            transform: translateZ(-200px) rotateY(-10deg) translateX(0);
        }

        100% {
            transform: translateZ(-200px) rotateY(-10deg) translateX(-50%);
        }
    }

    .mainvisual-logo {
        width: 10.5rem;
        margin-bottom: var(--s3);
    }

    .mainvisual-title {
        margin-bottom: var(--s4);
        font-size: 4.2rem;
        font-weight: 700;
    }

    .mainvisual-title span.st {
        color: #D82827;
    }

    .mainvisual-lead {
        max-width: 51.6rem;
        margin-top: auto;
        margin-bottom: var(--s6);
        font-size: 2rem;
        font-weight: 700;
    }

    .mainvisual-lead p {
        line-height: 1.5;
    }

    .mainvisual-low {
        position: relative;
        margin-top: -5rem;
    }

    .mainvisual-low: before {
        content: "";
        width: 100%;
        height: 37rem;
        background: url(img/mv-low.png) no-repeat right top/auto 100%;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

    .main-area {
        overflow: clip;
    }

    /*
---------------------------------------------

    list

*/
    .main-area .subList, .main-area ul: not([class]) {
        margin: var(--s5) auto;
    }

    .main-area .subList li, .main-area ul: not([class]) li {
        padding: 0 0 0 1.2em;
        font-size: 100%;
        line-height: 1.5;
        position: relative;
    }

    .main-area .subList li: :before, .main-area ul:not([class]) li::before {
        content: "";
        width: 0.8em;
        height: 0.8em;
        background: #D82827;
        position: absolute;
        top: 0.4em;
        left: 0;
    }

    .main-area .subList li + li, .main-area ul: not([class]) li + li {
        margin-top: 1em;
    }

    .main-area ol: not([class]) {
        counter-reset: number;
    }

    .main-area ol: not([class]) li {
        padding: 0 0 0 2em;
        font-size: 100%;
        line-height: 1.5;
        position: relative;
        counter-increment: number;
    }

    .main-area ol: not([class]) li::before {
        content: counter(number);
        width: 1.6em;
        height: 1.6em;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    .main-area ol: not([class]) li + li {
        margin-top: 1em;
    }

    /*
---------------------------------------------

    btn

*/
    .btn-internal {
        width: 37.5rem;
        margin: var(--s5) auto;
        position: relative;
    }

    .btn-internal a {
        width: 100%;
        min-height: var(--s9);
        margin: 0;
        padding: 1.6rem var(--s5);
        background: #2583D9 url(img/arrow-01-white-right.svg) no-repeat right var(--s2) center/2.1rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #fff;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        position: relative;
        z-index: 1;
        transform: translate(0, 0);
        transition: transform 0.3s;
    }

    .btn-internal:: after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translate(0.5rem, 0.5rem);
    }

    .btn-internal: hover a {
        transform: translate(0.5rem, 0.5rem);
        color: #fff;
    }

    .btn-web {
        width: 37.5rem;
        margin: var(--s5) auto;
        position: relative;
    }

    .btn-web a {
        width: 100%;
        min-height: var(--s9);
        margin: 0;
        padding: 1.6rem var(--s5);
        background: #D82827 url(img/arrow-btn-web.svg) no-repeat right var(--s2) center/2.8rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #fff;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        position: relative;
        z-index: 1;
        transform: translate(0, 0);
        transition: transform 0.3s;
    }

    .btn-web:: after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translate(0.5rem, 0.5rem);
    }

    .btn-web: hover a {
        transform: translate(0.5rem, 0.5rem);
        color: #fff;
    }

    .btn-web--large {
        width: 46rem;
    }

    .btn-web--right {
        margin-left: auto;
        margin-right: 0;
    }

    .btn-web--right a {
        text-align: left;
    }

    .btn-link {
        margin: var(--s2) auto;
        text-align: right;
    }

    .btn-link a {
        margin: 0;
        padding: var(--s1) var(--s3) var(--s1) 0;
        background: url("img/arrow-01-black-right.svg") no-repeat center right/auto var(--s2);
        display: inline-block;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: underline;
    }

    .btn-link a: hover {
        text-decoration: none;
        opacity: 0.6;
    }

    .btn-tel {
        display: none;
    }

    /*
---------------------------------------------

    table

*/
    table {
        width: 100%;
        margin: var(--s5) auto;
        border-collapse: collapse;
        border-top: 1px solid #C7C7C7;
        border-left: 1px solid #C7C7C7;
    }

    th, td {
        padding: var(--s2);
        border-right: solid 1px #C7C7C7;
        border-bottom: solid 1px #C7C7C7;
        line-height: 1.5;
        word-break: break-all;
    }

    th {
        background: #F7F7F5;
    }

    tbody th {
        background: #F7F7F5;
    }

    .l-scroll-x table {
        width: inherit;
    }

    .l-scroll-x table th, .l-scroll-x table td {
        min-width: 20rem;
    }

    /*
---------------------------------------------

    caption

*/
    .caption {
        margin-top: 0.8em;
        display: block;
        color: #999;
        font-size: 1.2rem;
        line-height: 1.5;
        text-align: center;
        word-break: break-all;
    }

    .caption a {
        color: #999;
    }

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

    .caption-scroll {
        margin-top: 0.8em;
        color: #999;
        font-size: 1.2rem;
        line-height: 1.5;
        text-align: center;
        word-break: break-all;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-color: #ddd transparent;
        scrollbar-width: thin;
    }

    .caption-scroll a {
        color: #999;
    }

    .caption-scroll:: -webkit-scrollbar {
        height: 0.6rem;
    }

    .caption-scroll:: -webkit-scrollbar-track {
        border-radius: 0.3rem;
        background: #eee;
    }

    .caption-scroll:: -webkit-scrollbar-thumb {
        border-radius: 0.3rem;
        background: #ddd;
    }

    /*
---------------------------------------------

 catch

*/
    .catch-01 {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.5;
        color: #D82827;
    }

    .catch-02 {
        margin-bottom: var(--s2);
        padding-left: var(--s2);
        border-left: solid 1px #D82827;
        font-size: 1.8rem;
        font-weight: 700;
    }

    /*
---------------------------------------------

 text

*/
    .marker {
        border-bottom: solid 0.3rem #D82827;
        font-weight: 700;
    }

    .txt_bold {
        font-weight: 700;
        color: #D82827;
    }

    /*
---------------------------------------------

 subgrid card

*/
    .subgrid-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
        grid-gap: var(--s2);
    }

    /*
---------------------------------------------

    float wrap

*/
    .float-wrap {
        display: flow-root;
        margin: var(--s6) auto;
    }

    .float-wrap .float-img.fr {
        width: 40rem;
        margin-left: var(--s5);
        margin-bottom: var(--s2);
        float: right;
    }

    .float-wrap .float-img.fl {
        width: 40rem;
        margin-right: var(--s5);
        margin-bottom: var(--s2);
        float: left;
    }

    .float-wrap .float-img.ct {
        width: 64rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--s2);
    }

    /*
---------------------------------------------

 pankuzu

*/
    #pankuzu {
        width: 100%;
        margin: 0 auto var(--s5);
        padding: var(--s2) 0;
        color: #333;
        font-size: 1.2rem;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #pankuzu > span {
        color: #333;
    }

    .pankuzu-wrap {
        background: rgb(243 240 241 / 0.5);
    }

    /*
---------------------------------------------

    footer

*/
    .footer-area {
        padding: var(--s5) 0 0;
        background: #efefef;
        position: relative;
        z-index: 0;
    }

    .footer-main {
        max-width: 120rem;
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--s3);
        padding-left: var(--s3);
        box-sizing: content-box;
        padding-bottom: var(--s8);
    }

    .noticeArea {
        padding: 2rem 10px;
        font-size: 1.2rem;
    }

    .footer-bottom {
        padding: var(--s1) 0;
        background: #333;
        color: #FFF;
    }

    .footer-bottom__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-logo {
        margin: var(--s3) auto;
        width: 10.5rem;
        text-align: center;
    }

    .footer-logo__link {
        display: block;
        text-decoration: none;
    }

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

    .footer-box + .footer-box {
        margin-top: var(--s5);
    }

    .footer-menu-title {
        margin-bottom: var(--s1);
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.5;
        border-bottom: 1px solid #333;
    }

    .footer-menu-title__link {
        padding: var(--s1);
        display: block;
        text-decoration: none;
    }

    .footer-menu-title__link: hover {
        opacity: 0.6;
    }

    .footer-menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .footer-menu__item {
        width: calc((100% - var(--s2) * 3) / 4);
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .footer-menu__link {
        padding: var(--s1);
        display: block;
        text-decoration: none;
    }

    .footer-menu__link: hover {
        opacity: 0.6;
    }

    .footer-menu-sub {
        margin-left: var(--s1);
    }

    .footer-menu-sub__item {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .footer-menu-sub__link {
        padding: var(--s-2) var(--s-2) var(--s-2) 1.2em;
        display: block;
        text-decoration: none;
        position: relative;
    }

    .footer-menu-sub__link:: before {
        content: "-";
        position: absolute;
        top: var(--s-2);
        left: 0;
    }

    .footer-menu-sub__link: hover {
        opacity: 0.6;
    }

    .footer-disclaimer {
        width: 70rem;
        margin: var(--s5) auto;
        padding: var(--s2) var(--s4);
        background: #fff;
        font-size: 1rem;
        line-height: 1.5;
    }

    .footer-disclaimer__label {
        display: inline;
    }

    .footer-disclaimer__text {
        display: inline;
    }

    .footer-nocopy {
        margin: var(--s5) 0;
        font-size: 1.2rem;
        text-align: center;
    }

    .footer-copyright {
        font-size: 1.2rem;
    }

    .footer-copyright__link {
        color: #FFF;
        text-decoration: none;
    }

    .footer-copyright__link: hover {
        color: #FFF;
        text-decoration: underline;
    }

    .footer-sitemap {
        margin: 0;
        font-size: 1.2rem;
    }

    .footer-sitemap__link {
        color: #FFF;
        text-decoration: none;
    }

    .footer-sitemap__link: hover {
        color: #FFF;
        text-decoration: underline;
    }

    .footer-banner {
        width: 29rem;
        height: 7.2rem;
        padding: var(--s1) 0 0 12.5rem;
        background: url(img/arrow-banner.svg) no-repeat right var(--s2) bottom 0.4rem/1.8rem auto, url(img/character-3.png) no-repeat var(--s9) bottom/3.8rem auto, url(img/banner-icon.png) no-repeat var(--s2) center/4rem auto, linear-gradient(to right, #333 var(--s9), #FFEFEF var(--s9));
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        position: fixed;
        right: -21.8rem;
        bottom: 12rem;
        z-index: 5;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;
        text-decoration: none;
    }

    .footer-banner span {
        display: block;
        font-size: 1.2rem;
        color: #D82827;
    }

    .footer-banner: hover {
        right: 0;
    }

    .footer-banner.for-sp {
        display: none;
    }

    .footer-banner.is-show {
        opacity: 1;
        visibility: visible;
    }

    /*
---------------------------------------------

    gnavi

*/
    .gnavi-btn {
        width: 7rem;
        height: 7rem;
        background: #333;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 200;
        cursor: pointer;
    }

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

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

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

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

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

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

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

    .gnavi-area {
        width: 36rem;
        height: 100vh;
        padding: 10rem 0;
        background: #333;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.8s ease, opacity 0.8s ease;
        opacity: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .gnavi-box__title {
        padding: 1.2rem var(--s6) 1.2rem var(--s2);
        border-bottom: 1px solid #fff;
        color: #fff;
        font-weight: 700;
        line-height: 1.5;
        display: block;
        cursor: pointer;
        transition: opacity 0.5s;
        position: relative;
    }

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

    .gnavi-box__title: hover {
        opacity: 1;
    }

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

    .gnavi-box__content {
        background: rgba(255, 255, 255, 0.2);
    }

    .gnavi-box: first-child {
        border-top: 1px solid #fff;
    }

    .gnavi-menu__item, .gnavi-menu-sub__item {
        position: relative;
    }

    .gnavi-menu__item:: before, .gnavi-menu-sub__item::before {
        content: "└";
        color: #fff;
        position: absolute;
        top: var(--s2);
        left: var(--s2);
    }

    .gnavi-menu__link, .gnavi-menu-sub__link {
        padding: 1.2rem var(--s2) 1.2rem var(--s5);
        display: block;
        color: #fff;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
    }

    .gnavi-menu__link: hover, .gnavi-menu-sub__link:hover {
        color: #fff;
        opacity: 0.6;
    }

    .gnavi-menu__item {
        border-bottom: 1px solid #fff;
    }

    .gnavi-menu-sub__item {
        border-top: 1px solid #fff;
    }

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

    .is-gnavi-open .gnavi-area:: -webkit-scrollbar {
        display: none;
    }

    /*
---------------------------------------------

    page

*/
    .page-top {
        width: var(--s9);
        height: var(--s9);
        position: fixed;
        right: 0;
        bottom: var(--s5);
        z-index: 10;
        overflow: hidden;
    }

    .page-top__link {
        width: 100%;
        height: 100%;
    }

    .page-top__link: hover {
        opacity: 0.6;
    }

    /*
---------------------------------------------

    toggle sp

*/
    .toggle-sp-content {
        display: block;
    }

    /*
---------------------------------------------

    toggle

*/
    .toggle-btn {
        position: relative;
        transition: opacity 0.3s;
    }

    .toggle-btn:: before {
        content: "";
        width: 2rem;
        height: 1px;
        background: #D82827;
        position: absolute;
        top: 50%;
        right: var(--s1);
        transform: translate(0, -50%);
    }

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

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

    .toggle-btn: hover {
        opacity: 0.7;
        cursor: pointer;
    }

    .toggle-content {
        display: none;
    }

    /*
---------------------------------------------

    more

*/
    .more-btn {
        max-width: 38rem;
        margin: var(--s8) auto;
        padding: var(--s3) var(--s7);
        background: #fff;
        border: 0.2rem solid #333;
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        position: relative;
        transition: opacity 0.3s;
        cursor: pointer;
    }

    .more-btn:: before {
        content: "";
        width: var(--s2);
        height: 0.2rem;
        background: #333;
        position: absolute;
        top: 50%;
        right: var(--s3);
        transform: translate(0, -50%);
    }

    .more-btn:: after {
        content: "";
        width: 0.2rem;
        height: var(--s2);
        background: #333;
        position: absolute;
        top: 50%;
        right: 3.1rem;
        transform: translate(0, -50%);
        transition: transform 0.3s;
    }

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

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

    .more-content {
        display: none;
    }

    /*
---------------------------------------------

    tab

*/
    .tab-btn {
        padding: var(--s2) var(--s3) var(--s2) var(--s8);
        background: #fff url(img/txt-q.png) no-repeat center left var(--s2)/3.6rem auto;
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 1.5;
        cursor: pointer;
        transition: background-color ease 0.6s;
        position: relative;
        z-index: 1;
    }

    .tab-btn: hover {
        color: #D82827;
    }

    .tab-btn.is-active {
        background-color: #F0F1F3;
        color: #D82827;
    }

    .tab-btn + .tab-btn {
        margin-top: 2rem;
    }

    .tab-content {
        padding: 14rem var(--s4) var(--s3) var(--s4);
        background: #F0F1F3 url(img/illust-a.png) no-repeat var(--s3) var(--s3)/13.8rem auto;
        display: none;
        opacity: 0;
        position: relative;
    }

    .tab-content: before {
        content: "";
        width: 50vw;
        height: 100%;
        background: #F0F1F3;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .tab-content.is-active {
        display: block;
        animation: tabAnimation ease 0.6s forwards;
    }

    .tab-content .btn-internal {
        margin-right: 0;
    }

    /*
---------------------------------------------

    TOC

*/
    .toc-wrap {
        margin: var(--s10) auto;
        max-width: 80rem;
        background: #F0F1F3;
        position: relative;
    }

    .toc-wrap__title {
        display: block;
        padding: var(--s3) var(--s5);
        background: #F0F1F3 url(img/txt-index.png) no-repeat left 10rem bottom 1.8rem/auto 2.5rem;
        font-size: 2.2rem;
        font-weight: 700;
        color: #333;
        line-height: 1;
        position: relative;
    }

    .toc-wrap__title.toggle-btn: before, .toc-wrap__title.toggle-btn:after {
        background-color: #D82827;
    }

    .toc-wrap--relations .toc-wrap__title {
        background: #F0F1F3 url(img/txt-links.png) no-repeat left 16rem bottom 1.8rem/auto 2.5rem;
    }

    .toc-wrap__main {
        padding: var(--s3) var(--s4) var(--s4);
        position: relative;
    }

    .toc-wrap ul {
        margin: 0;
        padding: 0;
    }

    .toc-wrap ul li {
        padding-left: 2.6em;
        font-weight: 700;
        position: relative;
    }

    .toc-wrap ul li: before {
        content: "";
        width: 1.3rem;
        height: 1.3rem;
        background: url(img/arrow-01-black-right.svg) no-repeat center/contain;
        position: absolute;
        top: 0.3em;
        left: var(--s1);
    }

    .toc-wrap ul li + li {
        margin-top: 1.1em;
    }

    .toc-wrap a {
        display: block;
        text-decoration: none;
    }

    .toc-wrap a: hover {
        text-decoration: underline;
    }

    .main-area h1, .main-area h2, .main-area h3, .main-area h4, .main-area h5, .main-area h6 {
        font-weight: 700;
    }

    .main-area--low {
        padding-top: var(--s3);
        padding-bottom: var(--s10);
    }

    .main-area--low p: not([class]) {
        max-width: 80rem;
        margin-right: auto;
        margin-left: auto;
    }

    .mainvisual-low h1 {
        min-height: 10rem;
        max-width: 100rem;
        margin: 0 auto var(--s4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.8rem;
        font-weight: 700;
        position: relative;
        z-index: 0;
        text-align: center;
    }

    .main-area--low h1, .main-area--low h2, .main-area--low h3, .main-area--low h4, .main-area--low h5, .main-area--low h6 {
        margin: var(--s5) auto var(--s3);
        font-weight: 700;
    }

    .main-area--low h1 a, .main-area--low h2 a, .main-area--low h3 a, .main-area--low h4 a, .main-area--low h5 a, .main-area--low h6 a {
        display: block;
        padding-right: var(--s4);
        text-decoration: none;
    }

    .main-area--low h1 a: hover, .main-area--low h2 a:hover, .main-area--low h3 a:hover, .main-area--low h4 a:hover, .main-area--low h5 a:hover, .main-area--low h6 a:hover {
        opacity: 0.6;
    }

    .main-area--low h2 {
        padding: 1.7rem 15rem 1.7rem var(--s5);
        font-size: 3.2rem;
        color: #fff;
        background: #333;
        position: relative;
    }

    .main-area--low h2: before {
        content: "";
        width: 15.7rem;
        height: 7.2rem;
        background: url(img/deco-h2.png) no-repeat center/contain;
        position: absolute;
        right: -1.2rem;
        bottom: -1.2rem;
        z-index: 0;
        opacity: 0.3;
    }

    .main-area--low h2 a {
        color: #fff;
    }

    .main-area--low h2 a: before {
        content: "";
        width: 2rem;
        height: 1.8rem;
        background: url(img/arrow-01-white-right.svg) no-repeat right center/contain;
        position: absolute;
        right: var(--s3);
        top: 50%;
        transform: translateY(-50%);
    }

    .main-area--low h3 {
        padding: 0 0 0.4rem var(--s2);
        border-bottom: solid 1px #333;
        border-left: solid 1px #333;
        font-size: 2.4rem;
        position: relative;
    }

    .main-area--low h3 a {
        background: url(img/arrow-01-black-right.svg) no-repeat right var(--s2) center;
        background-size: 1.6rem auto;
    }

    .main-area--low h4, .main-area--low h5 {
        padding: 0.2rem 0 0.2rem var(--s2);
        font-size: 2rem;
        position: relative;
    }

    .main-area--low h4: before, .main-area--low h5:before {
        content: "";
        width: 0.3rem;
        height: 100%;
        background: #D82827;
        border-radius: var(--s1);
        position: absolute;
        left: 0;
        top: 0;
    }

    .main-area--low h4 a, .main-area--low h5 a {
        background: url(img/arrow-01-black-right.svg) no-repeat right var(--s2) center;
        background-size: 1.6rem auto;
    }

    /*
---------------------------------------------

    TOP common

*/
    section {
        padding: 10rem 0;
    }

    .common-title {
        margin-bottom: 12rem;
        font-size: 3.6rem;
        font-weight: 700;
    }

    .common-title span.st {
        font-size: 5.2rem;
        color: #D82827;
    }

    .common-title span.st2 {
        font-size: 4.8rem;
        color: #D82827;
        letter-spacing: -0.05em;
    }

    .common-title a {
        text-decoration: none;
        position: relative;
    }

    .common-title a: before {
        content: "";
        width: 3.3rem;
        height: 2.8rem;
        background: url(img/arrow-01-red-right.svg) no-repeat center/contain;
        position: absolute;
        right: -5rem;
        bottom: 0.5em;
    }

    .common-title a: hover {
        opacity: 0.6;
    }

    .common-title--02 {
        margin-left: calc(50% + var(--s4));
    }

    .common-title--03 {
        width: 55%;
        margin-bottom: 8rem;
        text-align: right;
    }

    .common-title--04 {
        width: 50%;
        padding-right: var(--s10);
        text-align: right;
    }

    .common-title--center {
        text-align: center;
    }

    .common-lead {
        width: 55%;
    }

    .common-lead--01 {
        margin-bottom: 12rem;
    }

    /*
---------------------------------------------

    TOP parts

*/
    .sec01-box {
        max-width: 110rem;
        margin: -8rem auto 4rem;
        display: flex;
        gap: 2rem;
    }

    .sec01-box__left {
        width: 42.6rem;
    }

    .sec01-box__right {
        flex: 1;
    }

    .sec01-box__btn {
        margin-bottom: 2rem;
        padding: var(--s2);
        padding-left: 19rem;
        height: 11.3rem;
        background: #DEEBF7 url(img/banner-pic-01.jpg) no-repeat left center/17rem auto;
        font-size: 2rem;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        align-items: center;
        position: relative;
    }

    .sec01-box__btn: before {
        content: "";
        width: 2.1rem;
        height: 1.8rem;
        background: url(img/arrow-01-black-right.svg) no-repeat center/contain;
        position: absolute;
        right: var(--s2);
        top: 50%;
        transform: translateY(-50%);
    }

    .sec01-box__btn: hover {
        opacity: 0.6;
    }

    .sec01-box__btn2 {
        height: 6.7rem;
        background: #F0F1F3 url(img/txt-open.png) no-repeat right 4.5rem center/auto 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 700;
        position: relative;
    }

    .sec01-box__btn2: before {
        content: "";
        width: 2rem;
        height: 1px;
        background: #D82827;
        position: absolute;
        right: var(--s2);
        top: 50%;
    }

    .sec01-box__btn2: after {
        content: "";
        width: 1px;
        height: 2rem;
        background: #D82827;
        position: absolute;
        right: 2.5rem;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s;
    }

    .sec01-box__btn2.is-active {
        background-image: url(img/txt-close.png);
    }

    .sec01-box__btn2.is-active: after {
        transform: translate(0, -50%) rotate(270deg);
    }

    .sec01-box__btn2: hover {
        opacity: 0.7;
    }

    .sec01-box__cont {
        height: 20rem;
        padding: var(--s4);
        display: none;
        background: #F0F1F3;
    }

    .sec01-box__cont.is-open {
        display: block;
    }

    .sec01-box__cont .chapter-h-two {
        padding: 0 0 0 1.2em;
        font-size: 100%;
        position: relative;
    }

    .sec01-box__cont .chapter-h-two:: before {
        content: "";
        width: 0.8em;
        height: 0.8em;
        background: #D82827;
        position: absolute;
        top: 0.4em;
        left: 0;
    }

    .sec01-box__cont .chapter-h-two a {
        text-decoration: none;
    }

    .sec01-box__cont .chapter-h-two a: hover {
        text-decoration: underline;
    }

    .sec01-box__cont li + li {
        margin-top: var(--s1);
    }

    .sec02 {
        padding-top: 20rem;
        background: url(img/pattern-repeat.png) repeat-x center top 7rem/auto 28rem;
        position: relative;
        animation: moveBg 70s linear infinite;
        /* 背景アニメーション */
    }

    .sec02: before {
        content: "";
        width: 50%;
        height: 62rem;
        background: url(img/triangle-bottom.png) no-repeat center bottom/100% 7.6rem, url(img/sec01-pic-01.jpg) no-repeat center/cover;
        position: absolute;
        left: 0;
        top: -90px;
    }

    .sec02 .common-title--02 {
        margin-bottom: 13rem;
    }

    .sec02-subtitle {
        margin-bottom: var(--s2);
        font-size: 2rem;
        font-weight: 700;
        padding-right: 6rem;
    }

    .sec02-subtitle.is-open {
        color: #D82827;
    }

    .box-sponsored {
        max-width: 100rem;
        margin-right: auto;
        margin-left: auto;
        padding: var(--s4) var(--s5);
        background: #F0F1F3;
        position: relative;
        z-index: 0;
    }

    .box-sponsored__title {
        max-width: 53.2rem;
        margin-bottom: var(--s5);
        font-size: 2.6rem;
        font-weight: 700;
    }

    .box-sponsored__sm {
        margin-bottom: var(--s1);
        font-size: 1.2rem;
    }

    .box-sponsored__logo {
        width: 27.5rem;
        margin-bottom: var(--s5);
    }

    .box-sponsored__illust {
        width: 16.6rem;
        height: 21.7rem;
        position: absolute;
        right: var(--s3);
        top: -3rem;
    }

    .box-sponsored__tag {
        margin-left: -4rem;
        margin-bottom: var(--s3);
        padding: var(--s1) var(--s5);
        width: fit-content;
        background: #333;
        color: #fff;
        font-size: 1.8rem;
        font-weight: 700;
    }

    .box-sponsored__catch {
        margin-bottom: var(--s4);
        max-width: 69.5rem;
        font-size: 2.4rem;
        font-weight: 700;
        color: #D82827;
    }

    .box-sponsored__catch02 {
        margin-bottom: var(--s4);
        font-size: 2.4rem;
        font-weight: 700;
        color: #D82827;
    }

    .box-sponsored .btn-web {
        margin-bottom: var(--s3);
    }

    .box-sponsored--02 {
        margin-top: 10rem;
    }

    .main-area--low .box-sponsored--02 p: not([class]) {
        max-width: 100rem;
    }

    .box-sponsored__illust02 {
        width: 12.5rem;
        height: 17rem;
        position: absolute;
        right: var(--s5);
        top: -3rem;
    }

    .with-btn-web {
        width: fit-content;
        margin: var(--s3) auto -3.2rem;
        padding: var(--s1) var(--s3);
        border: solid 1px #D82827;
        font-size: 1.8rem;
        font-weight: 700;
        position: relative;
        z-index: 2;
    }

    .with-btn-web: before {
        content: "";
        width: 1.8rem;
        height: 2rem;
        background: url(img/fkds-pin.png) no-repeat center top/contain;
        position: absolute;
        left: var(--s3);
        bottom: -2rem;
    }

    .sec03 {
        padding-top: 13rem;
        background: url(img/pattern-repeat.png) repeat-x center top 4rem/auto 28rem;
        position: relative;
        animation: moveBgLR 70s linear infinite;
    }

    .sec03: before {
        content: "";
        width: calc(40% + 6rem);
        height: 36.4rem;
        background: #F0F1F3;
        position: absolute;
        left: calc(60% - 6rem);
        top: 0;
        z-index: -1;
    }

    .sec03: after {
        content: "";
        width: 40%;
        height: 55rem;
        background: url(img/triangle-bottom-re.png) no-repeat center bottom/100% 6.2rem, url(img/sec02-pic-01.jpg) no-repeat center/cover;
        position: absolute;
        left: 60%;
        top: var(--s7);
    }

    .sec03-column {
        max-width: 100rem;
        margin: 12rem auto var(--s10);
        position: relative;
        z-index: 1;
    }

    .sec03-column: before {
        content: "";
        width: 100%;
        height: 7rem;
        background: url(img/triangle-bottom.png) no-repeat center/100% 100%;
        position: absolute;
        left: 1px;
        top: -1px;
        transform: scale(1, -1);
    }

    .sec03-column: after {
        content: "";
        width: 100%;
        height: 7rem;
        background: url(img/triangle-bottom-re.png) no-repeat center/100% 100%;
        position: absolute;
        left: 1px;
        bottom: -1px;
        transform: scale(-1, 1);
    }

    .card-list {
        padding: 9rem var(--s2);
    }

    .card-list:nth-of-type(1) {
        background: url(img/box-bg-01.jpg) no-repeat center/cover;
    }

    .card-list:nth-of-type(2) {
        background: url(img/box-bg-02.jpg) no-repeat center/cover;
    }

    .card-list:nth-of-type(3) {
        background: url(img/box-bg-03.jpg) no-repeat center/cover;
    }

    .card-list__title {
        margin-bottom: var(--s2);
        font-size: 2.6rem;
        font-weight: 700;
        text-align: center;
        color: #D82827;
        position: relative;
    }

    .card-list__title: before {
        content: "";
        width: 1px;
        height: 10.5rem;
        background: #D82827;
        position: absolute;
        left: 50%;
        bottom: calc(100% + var(--s2));
    }

    .card-list__item li {
        padding: var(--s1);
        background: #fff;
        font-size: 1.8rem;
        font-weight: 700;
        text-align: center;
    }

    .card-list__item li + li {
        margin-top: 1em;
    }

    .sec03-titleblock {
        max-width: 100rem;
        margin: 11rem auto var(--s5);
    }

    .sec03-subtitle {
        padding-right: var(--s2);
        font-size: 3rem;
        font-weight: 700;
        text-align: right;
    }

    .sec03-subtitle span.st {
        font-size: 3.8rem;
        color: #D82827;
        background: linear-gradient(transparent 75%, #FFEFEF 75%);
    }

    .sticky-container {
        position: relative;
    }

    .sticky-element {
        width: 34.7rem;
        position: absolute;
        top: 0;
        left: -8rem;
        z-index: -1;
    }

    .sticky-container2 {
        position: relative;
    }

    .sticky-element2 {
        width: 35.7rem;
        position: absolute;
        top: 0;
        right: 8rem;
        z-index: -1;
    }

    .sticky-element3 {
        width: 34.7rem;
        position: absolute;
        top: 0;
        left: -8rem;
        z-index: -1;
    }

    .box-about {
        max-width: 95rem;
        margin-left: 20rem;
        display: flex;
    }

    .box-about__title {
        width: 30rem;
        padding: var(--s4);
        padding-left: 5rem;
        background: #DEEBF7 url(img/character-1.png) no-repeat center bottom/10rem auto;
        font-size: 2.2rem;
        font-weight: 700;
        position: relative;
    }

    .box-about__title: before {
        content: "";
        width: 4rem;
        height: 1px;
        background: #D82827;
        position: absolute;
        left: 0;
        top: 4.8rem;
    }

    .box-about__body {
        padding: var(--s4) var(--s5);
        background: #F0F1F3;
        flex: 1;
        position: relative;
    }

    .box-about__body: before {
        content: "";
        width: 50vw;
        height: 100%;
        background: #F0F1F3;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .box-about--white {
        margin-top: 10rem;
    }

    .box-about--white: before {
        background: #fff;
    }

    .box-about--white .box-about__body {
        background: #fff;
    }

    .sec04 {
        background: url(img/pattern-repeat.png) repeat-x center top 4rem/auto 28rem, linear-gradient(to right, #fff 50%, #F0F1F3 50%);
        position: relative;
        z-index: 0;
        animation: moveBgLR 70s linear infinite;
        margin-bottom: 10rem;
    }

    .sec04-subtitle {
        margin-top: 12rem;
        padding: var(--s2);
        background: #333;
        font-size: 3.2rem;
        font-weight: 700;
        text-align: center;
        color: #fff;
        position: relative;
    }

    .sec04-subtitle: before {
        content: "";
        width: 100vw;
        height: 100%;
        background: #333;
        position: absolute;
        right: 100%;
        top: 0;
    }

    .sec04-catch {
        margin-bottom: var(--s2);
        text-align: center;
        font-size: 1.8rem;
        font-weight: 700;
        color: #D82827;
    }

    .sec04-name {
        margin-bottom: var(--s4);
        text-align: center;
        font-size: 2.2rem;
        font-weight: 700;
    }

    .sec04-name span {
        color: #D82827;
    }

    .sec04-inner {
        max-width: 90rem;
        margin-right: auto;
        margin-left: auto;
    }

    .sec04-inner__p {
        padding: var(--s2) var(--s6);
    }

    .box-white {
        padding: 5rem;
        background: #fff;
        position: relative;
        z-index: 0;
    }

    .title-line {
        margin: var(--s8) auto var(--s3);
        padding-bottom: var(--s2);
        border-bottom: solid 1px #333;
        font-size: 2.6rem;
        font-weight: 700;
        text-align: center;
    }

    .sec05 {
        padding-top: 2rem;
        background: #ffffff00 url(img/pattern-repeat.png) repeat-x center top 16rem / auto 28rem;
        position: relative;
        z-index: 0;
        animation: moveBg 70s linear infinite;
    }

    .sec05: before {
        /* content: ""; */
        width: 50%;
        height: 55.5rem;
        background: #F0F1F3;
        position: absolute;
        left: 0;
        top: 0rem;
        z-index: -1;
    }

    .sec05 .l-grid-three:nth-child(3n) {
        display: none;
    }

    .card-photo__pic {
        height: 38rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        text-decoration: none;
        position: relative;
    }

    .card-photo__pic: before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(img/box-bg-04.jpg) no-repeat center/cover;
        z-index: -1;
        transition: filter 0.3s ease;
    }

    .card-photo__pic--02: before {
        background-image: url(img/box-bg-05.jpg);
    }

    .card-photo__pic--03: before {
        background-image: url(img/box-bg-06.jpg);
    }

    .card-photo__pic span {
        padding-bottom: var(--s4);
        background: url(img/arrow-01-white-right.svg) no-repeat center bottom/1.8rem auto;
        color: #fff;
        transition: opacity 0.3s ease;
        opacity: 0;
    }

    .card-photo__pic: hover:before {
        filter: brightness(0.7);
    }

    .card-photo__pic: hover span {
        color: #fff;
        opacity: 1;
    }

    .card-photo__title {
        margin: var(--s2) 0;
        font-size: 3rem;
        font-weight: 700;
        text-align: center;
    }

    .sec06 {
        padding-top: 20rem;
        background: #F0F1F3 url(img/pattern-repeat-white.png) repeat-x center top 12rem/auto 28rem;
        position: relative;
        z-index: 0;
        animation: moveBg 70s linear infinite;
    }

    .sec06: before {
        content: "";
        width: 50%;
        height: 100%;
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .sec06-column {
        max-width: 100rem;
        margin: 0 auto var(--s6);
    }

    .card-knowledge__title {
        margin-bottom: var(--s2);
        text-align: center;
        font-size: 2.4rem;
        font-weight: 700;
    }

    .card-knowledge__title a {
        display: block;
        padding: 0 0 var(--s3);
        background: url(img/arrow-01-red-right.svg) no-repeat center bottom/2.1rem auto;
        text-decoration: none;
    }

    .card-knowledge__title a: hover {
        color: #D82827;
    }

    .card-knowledge__pic {
        margin-bottom: var(--s2);
        display: none;
    }

    .sec07 {
        padding-top: 29rem;
        background: #fff url(img/pattern-repeat.png) repeat-x center top 10rem/auto 28rem;
        position: relative;
        z-index: 0;
        animation: moveBgLR 70s linear infinite;
        margin-top: 4rem;
    }

    .sec07: before {
        content: "";
        width: 50%;
        height: 62rem;
        background: url(img/triangle-bottom-re.png) no-repeat center bottom/100% 8rem, url(img/sec07-bg-01.jpg) no-repeat center/cover;
        position: absolute;
        left: 50%;
        top: -4rem;
    }

    .tab-column {
        max-width: 110rem;
        margin: 16rem auto 0 auto;
        display: flex;
    }

    .tab-column__side {
        width: 50%;
    }

    .tab-column__main {
        width: 50%;
        background: #F0F1F3;
        position: relative;
    }

    .tab-column__main: before {
        content: "";
        width: 50vw;
        height: 100%;
        background: #F0F1F3;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .sec-sv {
        background: #EEF5FB;
        position: relative;
        z-index: 0;
    }

    .sticky-element3 {
        /* display: none; */
    }

    .sec-sv .l-grid-areas__cell-01 {
        grid-area: catch;
        position: relative;
        top: auto;
        padding-top: inherit;
    }

    .sec-sv__inner {
        padding-left: var(--s10);
    }

    .sec-sv__tag {
        margin-bottom: var(--s4);
        font-size: 1.3rem;
    }

    .sec-sv__tag span {
        margin-right: var(--s3);
        padding: var(--s1) var(--s2);
        background: #333;
        color: #fff;
        font-size: 2.5rem;
        font-weight: 700;
        position: relative;
    }

    .sec-sv__tag span: before {
        content: "";
        width: 100vw;
        height: 100%;
        background: #333;
        position: absolute;
        right: 100%;
        top: 0;
    }

    .sec-sv__title {
        margin-bottom: var(--s4);
        font-size: 4rem;
        font-weight: 700;
    }

    .sec-sv__catch {
        margin-bottom: var(--s3);
        font-size: 3rem;
        font-weight: 700;
        color: #D82827;
    }

    .sec-sv__subtitle {
        margin-top: var(--s5);
        padding: var(--s8) 0 var(--s2) var(--s2);
        border-left: solid 1px #D82827;
        font-size: 3rem;
        font-weight: 700;
    }

    .sec-sv__btns {
        max-width: 94rem;
        margin: var(--s5) auto 0;
    }

    .sec-sv .l-grid-areas {
        margin-top: 8rem;
    }

    .bg-white {
        background: #fff;
        position: relative;
        z-index: 0;
    }

    .box-editor {
        max-width: 98rem;
        margin: 0 auto;
        padding-left: 24rem;
        background: url(img/logo-zenken.png) no-repeat left top/20.7rem auto;
    }

    .box-editor__title {
        margin-bottom: var(--s2);
        font-size: 3rem;
        font-weight: 700;
    }

    .number-catch {
        margin-bottom: var(--s2);
        padding: 0 0 0 var(--s2);
        border-left: solid 1px #D82827;
        font-size: 2rem;
        font-weight: 700;
    }

    .number-catch span {
        display: block;
        margin-bottom: var(--s1);
        font-size: 6.9rem;
        font-weight: 400;
        line-height: 1;
    }

    .parts-comment--lower {
        margin: var(--s10) auto;
    }

    .parts-comment__catch {
        margin-bottom: var(--s5);
        text-align: center;
        font-size: 3.2rem;
        font-weight: 700;
    }

    .parts-comment-wrap {
        display: flex;
        gap: var(--s4);
    }

    .parts-comment-wrap--reverse {
        flex-direction: row-reverse;
    }

    .parts-comment-wrap__side {
        width: 16rem;
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .parts-comment-wrap__side p {
        margin-top: var(--s1);
        line-height: 1.5;
    }

    .parts-comment-wrap__side p.text-right {
        text-align: right;
    }

    .parts-comment-wrap__side img {
        display: block;
        width: 16rem;
        height: auto;
    }

    .parts-comment-wrap__side img.monpi {
        margin-left: auto;
        width: 11rem;
    }

    .parts-comment-wrap__side span.st {
        font-size: 1.6rem;
        font-weight: 700;
    }

    .parts-comment-wrap__main {
        flex: 1;
    }

    .parts-comment-wrap + .parts-comment-wrap {
        margin-top: var(--s5);
    }

    .card-comment {
        padding: var(--s4);
        background: #F0F1F3;
        position: relative;
    }

    .card-comment: before {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 1.1rem 1.6rem 1.1rem 0;
        border-color: transparent #F0F1F3 transparent transparent;
        position: absolute;
        left: -1.4rem;
        top: var(--s5);
    }

    .card-comment--reverse: before {
        left: auto;
        right: -1.4rem;
        transform: rotate(180deg);
    }

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

      sp base settings

  */:root {
            font-size: 2.6666666667vw;
        }

        body {
            font-size: 1.4rem;
        }

        .sp_br {
            display: inline;
        }

        .pc_br {
            display: none;
        }
    }

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

      sp layout center

  */.l-center {
            padding-right: 1.2rem;
            padding-left: 1.2rem;
            box-sizing: border-box;
        }

        /*
  ---------------------------------------------

      sp layout stack

  */
        .l-stack {
            gap: var(--s4);
        }

        /*
  ---------------------------------------------

      sp layout cluster

  */
        .l-cluster {
            gap: var(--s1);
        }

        /*
  ---------------------------------------------

      sp layout grid

  */
        .l-grid {
            grid-gap: var(--s2);
            grid-template-columns: 100%;
        }

        .l-grid.sec-sv__btns {
            grid-gap: 0;
        }

        .l-grid-three {
            grid-gap: var(--s4);
            grid-template-columns: 100%;
        }

        /*
  ---------------------------------------------

      sp layout sidebar

  */
        .l-sidebar__side {
            display: none;
        }

        .l-sidebar__main {
            width: 100%;
        }

        /*
  ---------------------------------------------

      sp layout column

  */
        .l-column {
            gap: var(--s2);
        }

        .l-column__side {
            width: 100%;
        }

        .l-column__main {
            width: 100%;
        }

        /*
  ---------------------------------------------

      sp layout grid areas

  */
        .l-grid-areas {
            grid-template-areas: "catch" "img" "text";
            grid-template-columns: 100%;
            grid-template-rows: auto auto auto;
            grid-gap: var(--s4);
        }

        .l-grid-areas__cell-01 {
            grid-area: catch;
            position: relative;
            top: 0;
            padding-top: 1rem;
        }

        /*
  ---------------------------------------------

      sp layout float

  */
        .l-float__left-pc {
            width: 100%;
            margin-right: 0;
            float: none;
        }

        .l-float__right-pc {
            width: 100%;
            margin-left: 0;
            float: none;
        }

        .l-float__center {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        .l-float__left {
            width: 45%;
            margin-right: var(--s2);
            margin-bottom: var(--s1);
        }

        .l-float__right {
            width: 45%;
            margin-left: var(--s2);
            margin-bottom: var(--s1);
        }

        /*
  ---------------------------------------------

      sp layout scroll

  */
        .l-scroll-x-sp {
            width: 100%;
            padding-bottom: 0.6rem;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .l-scroll-x-sp:: -webkit-scrollbar {
            height: 0.6rem;
        }

        .l-scroll-x-sp:: -webkit-scrollbar-track {
            border-radius: 0.3rem;
            background: #eee;
        }

        .l-scroll-x-sp:: -webkit-scrollbar-thumb {
            border-radius: 0.3rem;
            background: #ddd;
        }
    }

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

      header

  */.header-area {
            min-height: var(--s6);
            padding-right: 5.6rem;
        }

        .header-area__name {
            font-size: 1rem;
            padding: 1rem 0;
        }

        .header-area__logo {
            width: 3.7rem;
            left: 0.2rem;
            top: var(--s-2);
        }

        .header-area__inner {
            height: 9rem;
        }

        /*
  ---------------------------------------------

      mainvisual

  */
        .mainvisual {
            padding: 0;
        }

        .mainvisual-logo {
            margin-bottom: var(--s1);
            width: 4.6rem;
            margin-top: var(--s1);
        }

        .mainvisual-title {
            font-size: 2.6rem;
        }

        .mainvisual-lead {
            margin-bottom: var(--s2);
            font-size: 1.4rem;
        }

        .mainvisual-bg {
            /* margin-top: var(--s2); */
            position: absolute;
            height: 50rem;
            width: 100vw;
            height: 101vw;
            overflow: hidden;
            pointer-events: none;
            perspective: 155px;
            top: 80vw;
        }

        .mainvisual-bg: before {
            content: none;
        }

        .mainvisual-bg__column {
            animation: loop01 300s linear infinite;
        }

        .mainvisual-low {
            overflow: hidden;
        }

        .mainvisual-low: before {
            height: 15rem;
            right: -6.5rem;
        }

        .main-area--low {
            padding-top: 0;
        }

        /*
  ---------------------------------------------

      sp btn

  */
        .btn-internal, .btn-web {
            width: 94%;
            margin: var(--s3) auto;
            z-index: 0;
        }

        .btn-internal a, .btn-web a {
            min-height: var(--s7);
            background-position: right var(--s2) center;
        }

        .btn-internal: hover a, .btn-web:hover a {
            transform: translate(0, 0);
        }

        .btn-internal a {
            background-size: 1.6rem auto;
        }

        .btn-web a {
            background-size: 2.2rem auto;
        }

        .btn-link {
            margin: var(--s1) auto;
        }

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

        .btn-link a: hover {
            text-decoration: underline;
            opacity: 1;
        }

        .btn-tel {
            width: 94%;
            margin: var(--s3) auto;
            display: block;
            position: relative;
        }

        .btn-tel a {
            width: 100%;
            min-height: var(--s7);
            margin: 0;
            padding: var(--s1) var(--s6);
            background: #06B194 url(img/icon-tel.png) no-repeat left var(--s3) center/2.6rem auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: #fff;
            line-height: 1.5;
            text-align: center;
            text-decoration: none;
            position: relative;
            z-index: 1;
            transform: translate(0, 0);
            transition: transform 0.3s;
        }

        .btn-tel:: after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background: #000;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
            transform: translate(0.5rem, 0.5rem);
        }

        /*
  ---------------------------------------------

      sp table

  */
        thead, tbody, tr {
            display: block;
        }

        th, td {
            width: 100%;
            display: block;
        }

        .table-label thead {
            display: none;
        }

        .table-label tbody th {
            background: #F7F7F5;
        }

        .table-label td {
            padding: 0;
            display: flex;
            position: relative;
        }

        .table-label td:: before {
            content: attr(data-label);
            width: 7em;
            background: #F7F7F5;
            border-right: solid 1px #C7C7C7;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 700;
            text-align: center;
        }

        .table-label__cell {
            padding: var(--s1) var(--s2);
        }

        .l-scroll-x table thead, .l-scroll-x-sp table thead {
            display: table-header-group;
        }

        .l-scroll-x table tbody, .l-scroll-x-sp table tbody {
            display: table-row-group;
        }

        .l-scroll-x table tr, .l-scroll-x-sp table tr {
            display: table-row;
        }

        .l-scroll-x table th, .l-scroll-x table td, .l-scroll-x-sp table th, .l-scroll-x-sp table td {
            width: inherit;
            min-width: 15rem;
            display: table-cell;
        }

        .l-scroll-x-sp table {
            width: inherit;
        }

        /*
  ---------------------------------------------

      sp caption

  */
        .caption {
            font-size: 0.9rem;
        }

        .caption-scroll {
            font-size: 0.9rem;
        }

        .caption-scroll:: -webkit-scrollbar {
            height: 0.4rem;
        }

        .caption-scroll:: -webkit-scrollbar-track {
            border-radius: 0.2rem;
        }

        .caption-scroll:: -webkit-scrollbar-thumb {
            border-radius: 0.2rem;
        }

        /*
  ---------------------------------------------

   sp catch

  */
        .catch-01, .catch-02 {
            font-size: 1.6rem;
        }

        /*
  ---------------------------------------------

      sp float wrap

  */
        .float-wrap .float-img.fr {
            width: 100%;
            margin-left: 0;
            float: none;
        }

        .float-wrap .float-img.fl {
            width: 100%;
            margin-right: 0;
            float: none;
        }

        .float-wrap .float-img.ct {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        /*
  ---------------------------------------------

   sp pankuzu

  */
        #pankuzu {
            margin-bottom: var(--s3);
        }

        /*
  ---------------------------------------------

      sp footer

  */
        .footer-area {
            padding: var(--s3) 0 0;
        }

        .footer-main {
            padding-right: 0;
            padding-left: 0;
            box-sizing: border-box;
        }

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

        .footer-logo {
            width: 7rem;
        }

        .footer-logo__link: hover {
            opacity: 1;
        }

        .footer-box + .footer-box {
            margin-top: var(--s2);
        }

        .footer-menu-title {
            margin-bottom: 0;
        }

        .footer-menu-title__link {
            padding: var(--s1) var(--s4) var(--s1) var(--s2);
            position: relative;
        }

        .footer-menu-title__link:: after {
            content: "";
            width: var(--s2);
            height: var(--s2);
            background: url("img/arrow-01-black-down.svg") no-repeat center/contain;
            position: absolute;
            top: 50%;
            right: var(--s2);
            transform: translate(0, -50%) rotate(0);
            transition: transform 0.3s;
        }

        .footer-menu-title__link: hover {
            opacity: 1;
        }

        .footer-menu-title__link.is-open:: after {
            transform: translate(0, -50%) rotate(180deg);
        }

        .footer-menu-title__link--not-toggle:: after {
            background: url("img/arrow-01-black-right.svg") no-repeat center/contain;
        }

        .footer-menu {
            padding: var(--s1) 0;
            background: rgba(255, 255, 255, 0.8);
            gap: 0;
        }

        .footer-menu__item {
            width: 100%;
        }

        .footer-menu__link {
            padding: var(--s1) var(--s2);
        }

        .footer-menu__link: hover {
            opacity: 1;
        }

        .footer-menu-sub {
            margin-left: var(--s2);
        }

        .footer-menu-sub__link {
            padding: var(--s1) var(--s2) var(--s1) 1.1em;
        }

        .footer-menu-sub__link:: before {
            top: var(--s1);
        }

        .footer-menu-sub__link: hover {
            opacity: 1;
        }

        .footer-disclaimer {
            width: calc(100% - var(--s2));
            margin: var(--s2) auto;
            padding: var(--s1) var(--s2);
        }

        .footer-nocopy {
            margin: var(--s2) var(--s1);
            font-size: 1rem;
        }

        .footer-copyright {
            width: 100%;
            text-align: center;
            font-size: 1rem;
        }

        .footer-sitemap {
            display: none;
        }

        .footer-banner {
            height: auto;
            padding: var(--s-2);
            padding-left: 11rem;
            background: url(img/arrow-banner.svg) no-repeat right var(--s2) bottom 0.4rem/1.8rem auto, url(img/character-3.png) no-repeat var(--s8) bottom/4.8rem auto, url(img/banner-icon.png) no-repeat 4% center/5.6rem auto, linear-gradient(to right, #333 var(--s8), #FFEFEF var(--s8));
            background-size: 1.8rem auto, 3.3rem auto, 4rem auto, auto;
            right: auto;
            left: 0;
            bottom: 0;
            font-size: 1.3rem;
            z-index: 100;
        }

        .footer-banner span {
            font-size: 1rem;
        }

        .footer-banner: hover {
            right: auto;
            left: 0;
            z-index: 999;
        }

        /*
  ---------------------------------------------

   sp gnavi

  */
        .gnavi-btn {
            width: var(--s6);
            height: var(--s6);
        }

        .gnavi-btn span {
            width: var(--s3);
            left: 1.2rem;
        }

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

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

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

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

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

        .gnavi-area {
            width: 100%;
        }

        .gnavi-area__logo.for-sp {
            width: 8rem;
            padding-left: 1rem;
        }

        /*
  ---------------------------------------------

      sp page

  */
        .page-top {
            width: var(--s6);
            height: var(--s6);
            right: 0;
            bottom: 0;
        }

        .page-top__link: hover {
            opacity: 1;
        }

        /*
  ---------------------------------------------

       sp toggle sp

  */
        .toggle-btn: before {
            right: var(--s1);
        }

        .toggle-btn: after {
            right: 1.8rem;
        }

        .toggle-sp-content {
            display: none;
        }

        /*
  ---------------------------------------------

       more

  */
        .more-btn {
            width: 94%;
            margin: var(--s6) auto;
            padding: var(--s2) var(--s7);
            font-size: 1.5rem;
        }

        /*
  ---------------------------------------------

       tab

  */
        .tab-btn {
            padding-left: var(--s4);
            background-size: 2rem auto;
            background-position: left center;
            font-size: 1.8rem;
        }

        /*
  ---------------------------------------------

       TOC

  */
        .toc-wrap {
            margin: var(--s5) auto;
        }

        .toc-wrap__title {
            padding: 2rem var(--s3);
            background-size: auto 3rem;
            font-size: 1.8rem;
        }

        .toc-wrap__main {
            padding: var(--s2) var(--s3) var(--s3);
        }

        .toc-wrap ul li: before {
            width: 1.5rem;
            height: 1.6rem;
            top: 0.15em;
        }

        .toc-wrap--relations .toc-wrap__title {
            background-size: auto 3rem;
            background-position: 14rem center;
        }

        .mainvisual-low h1 {
            min-height: 12rem;
            margin-bottom: var(--s1);
            padding: 0 var(--s2);
            font-size: 2.6rem;
            justify-content: flex-start;
        }

        .main-area--low h2, .main-area--low h3, .main-area--low h4, .main-area--low h5, .main-area--low h6 {
            margin: var(--s4) auto var(--s2);
        }

        .main-area--low h2 {
            padding: var(--s2);
            font-size: 2.2rem;
        }

        .main-area--low h2: before {
            width: 7.6rem;
            height: 4rem;
        }

        .main-area--low h2 a {
            background-size: 0.8rem auto;
            background-position: right center;
        }

        .main-area--low h2 a: before {
            width: 1.5rem;
        }

        .main-area--low h3 {
            padding-bottom: var(--s1);
            font-size: 1.9rem;
        }

        .main-area--low h3: before {
            width: 4.2rem;
            height: 4.2rem;
            left: -1.4rem;
            top: -1rem;
        }

        .main-area--low h3 a {
            background-size: 1.2rem auto;
            background-position: right center;
        }

        .main-area--low h4 {
            font-size: 1.7rem;
        }

        .main-area--low h4: before {
            width: 0.6rem;
        }

        .main-area--low h4 a {
            background-size: 1.2rem auto;
            background-position: right center;
        }

        .main-area--low h5 {
            font-size: 1.5rem;
        }

        .main-area--low h5 a {
            background-size: 0.8rem auto;
            background-position: right center;
        }
    }

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

      TOP common

  */.common-title {
            margin-bottom: var(--s4);
            font-size: 2.2rem;
        }

        .common-title span.st, .common-title span.st2 {
            font-size: 2.6rem;
        }

        .common-title--02 {
            margin-left: 0;
        }

        .common-title--03 {
            width: 100%;
            text-align: left;
        }

        .common-title--04 {
            width: 100%;
            text-align: left;
        }

        .common-title a: before {
            width: 2rem;
            height: 1.8rem;
            right: -4rem;
            bottom: 0.4em;
        }

        .common-lead {
            margin: var(--s3) auto;
            width: 100%;
        }

        section {
            padding: var(--s7) 0;
        }

        /*
  ---------------------------------------------

      TOP 

  */
        .sec01-box {
            display: block;
            margin: -6rem auto -8rem;
        }

        .sec01-box__left {
            width: 100%;
        }

        .sec01-box__btn {
            height: auto;
            padding-left: 15rem;
            font-size: 1.6rem;
            background-size: 13rem auto;
        }

        .sec01-box__cont {
            padding: var(--s3);
        }

        .sec02 {
            padding-top: 14rem;
            background-size: 10rem auto;
            background-position: 0 var(--s2);
        }

        .sec02: before {
            height: 13rem;
            background-size: auto 2rem, cover;
            top: 6rem;
            z-index: 0;
        }

        .sec02 .common-title--02 {
            margin-bottom: 6rem;
            margin-top: 5rem;
        }

        .box-sponsored {
            padding: var(--s3);
        }

        .box-sponsored__title {
            margin-bottom: var(--s2);
            padding-right: 0;
            font-size: 1.9rem;
        }

        .box-sponsored__illust {
            width: 5.2rem;
            height: auto;
            top: 15rem;
            right: var(--s1);
        }

        .box-sponsored__logo {
            margin-bottom: var(--s3);
            width: 20rem;
        }

        .box-sponsored__tag {
            margin-left: -2.4rem;
            padding: var(--s1) var(--s2);
            font-size: 1.4rem;
        }

        .box-sponsored__illust02 {
            width: 7rem;
            height: auto;
            right: 0;
            top: 1rem;
        }

        .box-sponsored__catch, .box-sponsored__catch02 {
            margin-bottom: var(--s2);
            font-size: 1.7rem;
            padding-right: 3rem;
        }

        .sec02-subtitle {
            margin-bottom: 0;
            font-size: 1.8rem;
        }

        .sec02-subtitle.is-open {
            margin-bottom: var(--s2);
        }

        .with-btn-web {
            margin-bottom: -1.8rem;
            font-size: 1.5rem;
            z-index: 1;
        }

        .sec03 {
            background-size: 10rem auto;
            background-position: left 2rem;
        }

        .sec03: after {
            height: 13rem;
            width: 45%;
            background-size: auto 2rem, cover;
            left: 55%;
            top: var(--s2);
        }

        .sec03: before {
            width: 50%;
            height: 10rem;
            left: 50%;
            top: 2.7rem;
            display: none;
        }

        .sec03-column {
            margin-top: 5rem;
        }

        .sec03-column: before, .sec03-column:after {
            height: 4rem;
        }

        .card-list {
            padding: 6rem var(--s2);
        }

        .card-list__title: before {
            height: 5rem;
        }

        .sec03-subtitle {
            text-align: left;
            font-size: 2.2rem;
        }

        .sec03-subtitle span.st {
            font-size: 2.6rem;
        }

        .box-about {
            margin-left: 0;
            flex-wrap: wrap;
        }

        .box-about__title {
            width: 100%;
            background-size: auto 70%;
            background-position: left bottom;
            position: relative;
            padding: var(--s2) var(--s2) var(--s2) var(--s5);
        }

        .box-about__title: after {
            content: "";
            width: 50vw;
            height: 100%;
            background: #DEEBF7;
            position: absolute;
            left: 100%;
            top: 0;
        }

        .box-about__title: before {
            content: "";
            width: 4rem;
            height: 1px;
            background: #D82827;
            position: absolute;
            left: 0;
            top: 4.8rem;
            display: none;
        }

        .box-about__body {
            padding: var(--s3);
        }

        .sec04 {
            background-size: 10rem auto, auto;
        }

        .sec04-subtitle {
            margin-top: var(--s6);
            font-size: 2rem;
        }

        .sec04-catch {
            font-size: 1.6rem;
        }

        .sec04-name {
            font-size: 1.8rem;
        }

        .sec04-inner__p {
            padding: var(--s2) 0;
        }

        .box-white {
            padding: var(--s2);
        }

        .title-line {
            padding-bottom: var(--s1);
            font-size: 1.9rem;
        }

        .sticky-element, .sticky-element2, .sticky-element3 {
            width: 18rem;
        }

        .sticky-element, .sticky-element3 {
            left: -5rem;
        }

        .sec05 {
            padding-top: 17rem;
            background-size: 10rem auto, auto;
        }

        .sec05: before {
            height: 23rem;
        }

        .card-photo__pic {
            height: 20rem;
        }

        .card-photo__pic: hover span {
            opacity: 0;
        }

        .card-photo__title {
            font-size: 2rem;
        }

        .sec06 {
            padding-top: 9rem;
            background-size: 10rem auto, auto;
            background-position: 0 var(--s8);
        }

        .sec06: before {
            height: 100%;
            top: var(--s5);
            left: -10rem;
        }

        .card-knowledge__title {
            font-size: 2.1rem;
        }

        .sec07 {
            padding-top: 10rem;
            background-size: 10rem auto;
            background-position: 0 10rem;
            margin-top: 3rem;
        }

        .sec07: before {
            height: 13rem;
            top: -1rem;
            background-size: auto 2rem, cover;
        }

        .sec-sv__inner {
            padding-left: var(--s1);
        }

        .type_movie iframe {
            width: 100%;
            height: 70vw;
        }

        .sec-sv__tag span {
            margin-right: var(--s2);
            font-size: 1.6rem;
        }

        .sec-sv__title {
            font-size: 2rem;
        }

        .sec-sv__catch {
            font-size: 1.6rem;
        }

        .sec-sv__subtitle {
            padding-top: var(--s3);
            font-size: 1.8rem;
        }

        .number-catch {
            margin-bottom: 0;
            font-size: 1.8rem;
        }

        .number-catch span {
            font-size: 3.2rem;
        }

        .box-editor {
            padding: 6rem 0 0;
            background-size: auto 5.5rem;
        }

        .box-editor__title {
            font-size: 1.8rem;
        }

        .parts-comment__catch {
            margin-bottom: var(--s2);
            font-size: 2rem;
        }

        .parts-comment-wrap {
            gap: var(--s2);
        }

        .parts-comment-wrap__side {
            width: 8rem;
        }

        .parts-comment-wrap__side p {
            margin-top: var(--s-2);
            line-height: 1.5;
        }

        .parts-comment-wrap__side p span.st {
            font-size: 1.4rem;
        }

        .parts-comment-wrap__side img.monpi {
            width: 7rem;
            margin-left: auto;
        }

        .card-comment {
            padding: var(--s3);
        }
    }

    /* 背景アニメーションのキー */
    @keyframes moveBg {
        0% {
            background-position: 100% 5%;
            /* 右から */
        }

        100% {
            background-position: 0 5%;
            /* 左へ */
        }
    }

    @keyframes moveBgLR {
        0% {
            background-position: 0 1%;
            /* 右から */
        }

        100% {
            background-position: 71% 1%;
            /* 左へ */
        }
    }

    /* アニメーションの基本スタイル */
    .text-animate {
        display: inline-block;
        /* 各文字をブロック扱いに */
        opacity: 0;
        /* 初期は非表示 */
        transform: translateX(-10px);
        /* 初期位置を左にずらす */
        animation: textSlideIn 0.5s forwards;
    }

    .text-animate-delay {
        display: inline-block;
        opacity: 0;
        transform: translateX(-10px);
    }

    /* アニメーションのキー */
    @keyframes textSlideIn {
        0% {
            opacity: 0;
            transform: translateX(-10px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* ―――――――――――――― ▼アニメーション処理▼ ―――――――――――――― */
    /* 初期状態のフィルター */
    .img-effect {
        display: inline-block;
        position: relative;
        overflow: hidden;
        filter: grayscale(100%);
        /* 白黒 */
        transition: filter 0.4s ease, transform 0.4s ease;
    }

    /* ホバー時のフィルター解除 */
    .img-effect: hover {
        filter: grayscale(0%);
        /* カラー表示 */
        transform: scale(1.1);
        /* 拡大効果 */
    }

    /* カラー表示のアニメーション */
    .img-effect img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.4s ease;
    }

    /* 初期状態: 非表示 */
    .sec02, .sec03, .sec04, .sec05, .sec06, .sec07, .sec-sv, .bg-white {
        opacity: 0;
        transform: translateX(0);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    /* 左からフェードイン */
    .fade-in-left {
        transform: translateX(-100px);
    }

    /* 右からフェードイン */
    .fade-in-right {
        transform: translateX(100px);
    }

    /* 表示状態 */
    .visible {
        opacity: 1;
        transform: translateX(0);
    }

    @keyframes slideIn {
        0% {
            transform: translateX(-180px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
        }

        40%,100% {
            opacity: 1;
        }
    }

    @keyframes slideInR {
        0% {
            transform: translateX(180px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
        }

        40%,100% {
            opacity: 1;
        }
    }

    section.sec03.fade-in-right.visible: after, section.sec07.fade-in-right.visible:before, .main-area--low h2:before {
        animation: slideInR 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    section.sec02.fade-in-left.visible: before, section.sec04.fade-in-left.visible h3, section.sec04.fade-in-left.visible .box-white {
        animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    section.sec02.fade-in-left.visible .common-title span, .mainvisual-title span.st, section.sec03.fade-in-right.visible .common-title span.st2, section.sec04.fade-in-left.visible .common-title span.st, section.sec05.fade-in-right.visible .common-title span.st, section.sec06.fade-in-left.visible .common-title span.st, section.sec07.fade-in-right.visible .common-title span.st {
        animation: slideInspan 1s ease-out;
    }

    section.sec03.fade-in-right.visible .card-list: nth-of-type(1), section.sec05.fade-in-right.visible .card-photo:nth-of-type(1) {
        animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    section.sec03.fade-in-right.visible .card-list: nth-of-type(2), section.sec05.fade-in-right.visible .card-photo:nth-of-type(2) {
        animation: zoomIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    section.sec03.fade-in-right.visible .card-list: nth-of-type(3), section.sec05.fade-in-right.visible .card-photo:nth-of-type(3) {
        animation: zoomIn 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    @keyframes zoomIn {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes slideInspan {
        0% {
            transform: translateX(-100%);
            /* opacity: 0; */
            background: #d82827;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    ; }

section.sec03.fade-in-right.visible .card-list:nth-of-type(1), section.sec05.fade-in-right.visible .card-photo:nth-of-type(1) {
    animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

section.sec03.fade-in-right.visible .card-list:nth-of-type(2), section.sec05.fade-in-right.visible .card-photo:nth-of-type(2) {
    animation: zoomIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

section.sec03.fade-in-right.visible .card-list:nth-of-type(3), section.sec05.fade-in-right.visible .card-photo:nth-of-type(3) {
    animation: zoomIn 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInspan {
    0% {
        transform: translateY(180%);
        opacity: 0;
        color: #fff;
    }

    100% {
        transform: translateY(0);
    }

    40%,100% {
        opacity: 1;
    }
}


.mainvisual-bg__column {
    transform: translateZ(-50px) rotateY(-5deg); /* 奥行きを調整 */
    animation: slideAnimation 90s ease-in-out infinite; /* タイミング関数を変更 */
}

.mainvisual-bg__column {
    will-change: transform;
}