@charset "utf-8";

/* トップページ - メインビジュアル
--------------------------------------------------------------- */

@keyframes fadein {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.top-main-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1/.589;
    /*height: 100svh;*/
    overflow: hidden;
    animation: fadein 1s ease;
}

.top-main-visual .cs-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.top-main-visual .cs-menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    margin: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-main-visual .cs-menu li {
    position: relative;
    width: 19.64vw;
    aspect-ratio: 1/1;
    padding: 0;
    margin: 0;
}

.top-main-visual .cs-menu li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #e50012;
    margin: auto;
    z-index: 0;
    mix-blend-mode: multiply;
}

.top-main-visual .cs-menu li a {
    position: relative;
    display: grid;
    place-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 2.12vw;
    font-weight: 700;
    line-height: 1.18;
}

.top-main-visual .cs-menu li:nth-of-type(2)::before,
.top-main-visual .cs-menu li:nth-of-type(3)::before,
.top-main-visual .cs-menu li:nth-of-type(6)::before {
    mix-blend-mode: normal;
    background: rgba(255, 255, 255, .7);
}


.top-main-visual .cs-menu li:nth-of-type(2) a,
.top-main-visual .cs-menu li:nth-of-type(3) a,
.top-main-visual .cs-menu li:nth-of-type(6) a {
    color: #000;
    mix-blend-mode: normal;
    background: rgba(255, 255, 255, .7);
}

.top-main-visual .cs-menu li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.31vw;
    width: 1.32vw;
    aspect-ratio: 1/1;
    background: url(../img/common/ico_arrow_white.svg) center center / contain no-repeat;
    transform: rotate(90deg);
    margin: auto;
}

.top-main-visual .cs-menu li:nth-of-type(2) a::after,
.top-main-visual .cs-menu li:nth-of-type(3) a::after,
.top-main-visual .cs-menu li:nth-of-type(6) a::after {
    background-image: url(../img/common/ico_arrow.svg);
}

.top-main-visual .cs-copy {
    color: #000;
    font-size: 2.38vw;
    font-weight: 700;
    writing-mode: vertical-rl;
}

.top-main-visual .cs-text-position {
    position: absolute;
    top: 3.17vw;
    right: 44.05vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 19vw;
}

.top-main-visual .cs-copy.is-text {
    order: 1;
}

.top-main-visual .cs-copy.is-strong {
    font-size: 3.9vw;
    margin-right: .1em;

    color: transparent;
    background: var(--color-main);
    background: linear-gradient(to bottom, #b30012 0%, #e50012 30%, #f17a29 85%);
    -webkit-background-clip: text;
    background-clip: text;
}

.top-main-visual .cs-copy.is-strong a {
    color: transparent;
}

.top-main-visual .cs-copy a:hover{
	opacity:1;
}
.cs-text-position:hover,
.cs-image-link:hover+.cs-text-position{
	opacity:0.7;
}

.cs-image-link:has(+.cs-text-position:hover){
	opacity:0.6;
}



@media print,
screen and (min-width:1537px) and (max-width:1920px) and (min-height:857px) and (max-height:1200px) {

    .top-main-visual {
        aspect-ratio: auto;
        height: 100svh;
    }

    .top-main-visual .cs-menu li {
        width: 33.33svh;
        aspect-ratio: 1/1;
    }

}


/* トップページ - ビジュアルスライダー
--------------------------------------------------------------- */

.top-visual-slider {
    position: relative;
    height: var(--slide-height);
    line-height: 1;
    --slide-height: 770px;
    z-index: 1;
}

.top-visual-slider .cs-slide {
    display: block;
}

.top-visual-slider .cs-slide {
    position: relative;
    display: block;
    width: 1510px;
    height: var(--slide-height);
}

.top-visual-slider .cs-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.top-visual-slider .cs-text-wrapper {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-content: center;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 42.38%;
    font-weight: 500;
    line-height: 1.52;
    padding: min(4.47vw, 85px);
    margin: auto;
}

.top-visual-slider .cs-heading {
    width: fit-content;
    color: transparent;
    font-feature-settings: "palt";
    font-size: min(2.63vw, 50px);
    background: #003686;
    background: linear-gradient(to right, #00999b 0%, #008837 100%);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 1em;
}

.top-visual-slider .cs-text {
    font-size: min(1.16vw, 22px);
}

.top-visual-slider .cs-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .41em;
    color: var(--color-main);
    font-weight: 700;
    line-height: 1;
    margin-top: 1em;
}

.top-visual-slider .cs-more::after {
    content: "";
    position: relative;
    top: .1em;
    display: block;
    width: 9px;
    aspect-ratio: 1/1.44;
    background: url(../img/common/ico_arrow.svg) center center / contain no-repeat;
}

.top-visual-slider .slick-dots {
    right: min(2.1vw, 40px);
    bottom: min(2.1vw, 40px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: min(1.47vw, 28px);
    line-height: 1;
}

.top-visual-slider .slick-dots li {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}

.top-visual-slider .slick-dots li button {
    width: 14px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #b3b3b3;
}

.top-visual-slider .slick-dots li.slick-active button {
    opacity: 1;
    background: var(--color-main);
}


/* -- 教室一覧 */

.top-visual-slider .cs-school {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    min-width: 720px;
    color: #fff;
    padding: 20px 40px 20px 30px;
    background: var(--color-main);
    border-radius: 0 15px 0 0;
    z-index: 1;
}

.top-visual-slider .cs-school h2 {
    font-size: 18px;
    line-height: 1.38;
}

.top-visual-slider .cs-school ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.top-visual-slider .cs-school ul li:not(:last-child) a::after {
    content: "│";
    margin: 0 .5em;
}

.top-visual-slider .cs-school a {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}


/* トップページ - 生徒一人ひとりの想いを尊重
--------------------------------------------------------------- */

.top-policy-section {
    position: relative;
    text-align: center;
    padding: 70px 2em;
    background: var(--color-back-gray);
}

.top-policy-section .cmn-title-1 {
    font-weight: 500;
    line-height: 1.38;
    margin: 0 auto .71em;
}

.top-policy-section p {
    font-weight: 500;
    line-height: 1.91;
}


/* トップページ - まるがくについて
--------------------------------------------------------------- */

.top-about-section {
    position: relative;
    padding: 120px 0 50px;
    background: #fff url(../img/top/bg_about.png) center center no-repeat;
}

.top-about-section .cs-promise {
    font-weight: 500;
    text-align: center;
    margin-bottom: 2.91em;
    line-height: 2.29;
}

.top-about-section .cs-promise h2 {
    font-size: 1.75em;
    font-weight: 700;
    margin-bottom: .3em;
}

.top-about-section .cs-promise strong {
    font-size: 1.58em;
    line-height: 1.4;
}

.top-about-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
}

.top-about-list li {
    position: relative;
}

.top-about-list img {
    display: block;
    width: 100%;
}

.top-about-list .is-1 {
    max-width: 600px;
    width: calc(600 / 1250 * 100%);
    transform: translate(20px, 0);
}

.top-about-list .is-2 {
    max-width: 560px;
    width: calc(560 / 1250 * 100%);
    transform: translate(-30px, 120px);
}

.top-about-list .is-3 {
    max-width: 666px;
    width: calc(666 / 1250 * 100%);
    transform: translate(15px, -65px);
}

.top-about-list .is-4 {
    max-width: 548px;
    width: calc(548 / 1250 * 100%);
    transform: translate(-30px, 175px);
}

.top-about-list .is-5 {
    max-width: 1160px;
    width: calc(1160 / 1250 * 100%);
    transform: translate(20px, 0);
}


/* カスタム投稿 - 生徒の声
--------------------------------------------------------------- */

/* -- single */

.voice-section {
    display: grid;
    grid-template-columns: calc(33% - 1em) calc(66% - 1em);
    justify-content: space-between;
    gap: 2em;
    padding-block: var(--module-margin);
    border-image: linear-gradient(#fff3f5, #fff3f5) fill 0 //0 100vw 0 100vw;
        margin-bottom: 130px;
}

.voice-section > .cs-image figure img {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
}

.voice-section > .cs-image figcaption {
    margin-top: .5em;
}

.voice-section .cs-title {
    color: var(--color-main);
    font-size: 1.58em;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: .3em;
}


/* -- taxonomy list */

.voice-tag-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2em;
    width: fit-content;
    font-size: .75em;
    padding: 1.11em 1.94em;
    line-height: 1;
    background: #f0faf6;
    margin: 0 0 2.77em auto;
}

.voice-tag-list li.current-cat a {
    color: var(--color-main);
}

.voice-tag-list > li:not(:first-child) a::before {
    content: '#';
}


/* -- archive */

.voice-thumbnail-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.41vw;
}

.voice-thumbnail-list a {
    display: block;
}

.voice-thumbnail-list figure {
    aspect-ratio: 1/1;
    overflow: hidden;
}

.voice-thumbnail-list figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.voice-thumbnail-list .cs-title {
    font-weight: 700;
    line-height: 1.41;
    margin-block: .5em;
}

.voice-thumbnail-list .cs-title::after {
    content: "";
    position: relative;
    top: 0.08em;
    display: inline-block;
    width: 13px;
    aspect-ratio: 1/1.44;
    background: url(../img/common/ico_arrow.svg) center center / contain no-repeat;
    margin-left: .3em;
}

.voice-thumbnail-list .cs-caption {
    font-size: .83em;
    line-height: 1.5;
}


/* 下層ページ - スペシャルコンテンツ
--------------------------------------------------------------- */

/* -- ページ見出し */

.special-header {
    position: relative;
    height: 400px;
    background: url(../img/special/header_img.jpg) right center no-repeat;
}

.special-header .cs-inner {
    box-sizing: border-box;
    position: relative;
    display: grid;
    place-content: end start;
    max-width: 690px;
    height: 100%;
    padding-bottom: 1.5em;
    z-index: 1;
}

.special-header .cs-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    margin: auto;
    z-index: -1;
}

.special-header .cs-inner > div {
    text-shadow:
        0px 0px 6px rgba(255, 255, 255, 1),
        0px 0px 6px rgba(255, 255, 255, 1),
        0px 0px 6px rgba(255, 255, 255, 1);

}

.special-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.66;
}

.special-header .cs-cap-text {
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: .3em;
}

.special-header .cs-author {
    text-align: right;
    font-size: .83em;
    margin-top: 1em;
}

/* -- メインコンテナ */

.special-wrapper {
    background: url(../img/special/bg_img.webp) center center / cover no-repeat;
    overflow: hidden;
}

.special-content-inner {
    position: relative;
    max-width: var(--container-width);
    height: 100%;
    padding-inline: var(--container-padding);
    margin: auto;
    z-index: 1;
}

.special-content-inner::before,
.special-content-inner::after {
    content: "";
    display: block;
    width: calc(952 / 1250 * 100%);
    aspect-ratio: 1/.239;
}

.special-content-inner::before {
    margin-bottom: 25px;
    background: url(../img/special/bg_logo_border.png) center top / contain no-repeat;
}

.special-content-inner::after {
    margin-left: auto;
    background: url(../img/special/bg_logo.png) center bottom / contain no-repeat;
}

.special-content-inner img {
    width: 100%;
}


/* -- モーダルリスト */

@keyframes pop-balloon {
    0% {
        opacity: 0;
        transform: translate(-30px, 0);
    }

    33% {
        opacity: 0;
        transform: translate(-30px, 0);
    }

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

.special-faq-wrapper {
    position: relative;
}

.cs-manager-image {
    width: min(28.51vw, 426px);
    margin-left: min(-2.68vw, -40px);
}

.cs-faq-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: pop-balloon 1.5s;
}

.cs-faq-list .cs-balloon {
    position: absolute;
}

.cs-faq-list .cs-balloon a {
    display: block;
    transition: transform .3s;
}

.cs-faq-list .is-1 {
    top: max(-4.69vw, -70px);
    left: min(15.39vw, 230px);
    width: min(58.1vw, 868px);
    transform: rotate(-10deg);
}

.cs-faq-list .is-2 {
    top: min(8.03vw, 120px);
    left: min(26.1vw, 390px);
    width: min(56.89vw, 850px);
    transform: rotate(-5deg);
}

.cs-faq-list .is-3 {
    top: min(22.76vw, 340px);
    left: min(20.75vw, 310px);
    width: min(56.22vw, 840px);
    transform: rotate(0);
}

.cs-faq-list .is-4 {
    bottom: min(20.08vw, 300px);
    left: min(18.07vw, 270px);
    width: min(56.63vw, 846px);
    transform: rotate(-5deg);
}

.cs-faq-list .is-5 {
    bottom: min(7.36vw, 110px);
    left: min(22.09vw, 330px);
    width: min(56.63vw, 846px);
    transform: rotate(-5deg);
}

.cs-faq-list .is-6 {
    bottom: max(-8.7vw, -130px);
    left: min(15.8vw, 236px);
    width: min(57.3vw, 856px);
    transform: rotate(5deg);
}

@media (hover: hover) {

    .special-faq-wrapper .cs-balloon:hover a {
        transform: scale(1.1);
    }

    .special-faq-wrapper a:hover {
        opacity: 1;
    }

}

/* -- モーダル Wrapper */

.mfp-bg.mfp-ready.mfp-special {
    opacity: 1;
}

.mfp-bg.mfp-special {
    background: #fff url(../img/special/bg_img.webp) center center / cover no-repeat;
}

.mfp-special .mfp-container {
    padding: 0;
}

.special-modal button.mfp-close {
    width: 50px;
    height: auto;
    aspect-ratio: 1/1;
    line-height: 1;
    position: fixed;
    top: 50px;
    right: 50px;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    padding: 0;
    background: url(../img/common/ico_banner_close_white.svg) center center / contain no-repeat;
}

.mfp-wrap.mfp-special::before,
.mfp-wrap.mfp-special::after {
    content: "";
    position: fixed;
    display: block;
    width: 952px;
    aspect-ratio: 1/.239;
}

.mfp-wrap.mfp-special::before {
    top: 0;
    left: 0;
    background: url(../img/special/bg_logo_border.png) center top / contain no-repeat;
}

.mfp-wrap.mfp-special::after {
    bottom: 0;
    right: 0;
    background: url(../img/special/bg_logo.png) center bottom / contain no-repeat;
}


/* -- モーダル POP */

.special-modal {
    max-width: var(--container-width);
    padding: calc(228px + 20px) var(--container-padding);
    margin: auto;
}

.special-modal .cs-container {
    position: relative;
    padding-left: 350px;
    z-index: 1;
}

.special-modal.is-1 .cs-container {
    min-height: 1122px;
    background: url(../img/special/bg_manager_2.png) left top / 376px auto no-repeat;
}

.special-modal.is-2 .cs-container {
    min-height: 1066px;
    background: url(../img/special/bg_manager_3.png) left top / 394px auto no-repeat;
}

.special-modal.is-3 .cs-container {
    min-height: 1074px;
    background: url(../img/special/bg_manager_4.png) left top / 348px auto no-repeat;
}

.special-modal .cs-pop-balloon {
    position: relative;
    box-sizing: border-box;
    border: 4px solid var(--color-main);
    border-radius: 30px;
    background: #fff;
    margin-inline: auto;
    box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, .3);
}

.special-modal .cs-pop-balloon.is-q {
    padding: 1.58em 1.87em;
    margin-bottom: 2.7em;
}

.special-modal .cs-pop-balloon.is-a {
    width: 90%;
    padding: .79em .93em 1.58em;
    border-width: 8px;
}

.special-modal .cs-pop-balloon.is-a .cs-anser-inner {
    padding: 0 .93em;
}

.special-modal .cs-pop-balloon .cs-anser-inner p:not(:last-child) {
    margin-bottom: 1em;
}

.special-modal .cs-pop-balloon h3 {
    display: grid;
    grid-template-columns: 70px auto;
    align-items: center;
    gap: 20px;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
}

.special-modal .cs-pop-balloon h3::before {
    content: "";
    display: block;
    width: 70px;
    aspect-ratio: 1/1;
    background: center center / contain no-repeat;
}

.special-modal .cs-pop-balloon.is-q h3::before {
    background-image: url(../img/special/ico_q.svg);
}

.special-modal .cs-pop-balloon.is-a h3::before {
    background-image: url(../img/special/ico_a.svg);
}

.special-modal .cs-pop-balloon.is-q h3 {
    color: var(--color-default);
}

.special-modal .cs-pop-balloon.is-a h3.is-center {
    align-items: center;
}

.special-modal .cs-pop-balloon.is-a h3 {
    align-items: flex-start;
    color: var(--color-main);
    font-size: 1.58em;
    padding: .73em;
    background: #f0e3ce;
    border-radius: 24px;
    line-height: 1.36;
}

/* -- 吹き出し */

.special-modal .cs-balloon-arrow {
    position: absolute;
    top: 0;
    left: -90px;
    bottom: 0;
    width: 90px;
    aspect-ratio: 1/1;
    margin: auto;
    overflow: hidden;
}

.special-modal .cs-balloon-arrow::before,
.special-modal .cs-balloon-arrow::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    margin: auto;
    background: var(--color-main);
    clip-path: polygon(0 0, 100% 100%, 100% 37%);
}

.special-modal .cs-balloon-arrow::after {
    position: absolute;
    top: 7px;
    right: -2px;
    bottom: 0;
    width: 76%;
    background: #fff;
}


/* 下層ページ - 合格実績
--------------------------------------------------------------- */

.performance-list {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5em 0;
    padding: 1.5em 2em 1.5em 3em;
    list-style: disc;
    border-radius: 10px;
    background: #f0faf6;
    margin: 1em auto 0;
}

.performance-list li {
    box-sizing: border-box;
    width: 25%;
    padding-right: 1em;
    margin: 0;
}


/* 下層ページ - よくある質問
--------------------------------------------------------------- */

.faq-dl dt {
    position: relative;
    color: var(--color-main);
    font-size: 1.16em;
    font-weight: 700;
    border-top: 1px solid var(--color-main);
    background: url(../img/common/ico_dl_open.svg) right 45px center / 46px auto no-repeat;
    padding: 1em 135px 1em 120px;
    cursor: pointer;
}

.faq-dl dt::before {
    content: "Q";
    position: absolute;
    top: -.1em;
    left: 45px;
    bottom: 0;
    height: 1em;
    font-size: 1.57em;
    margin: auto;
    line-height: 1;
}

.faq-dl dt.on {
    background-image: url(../img/common/ico_dl_close.svg);
}

.faq-dl dt + dd {
    display: none;
    background: var(--color-back-gray);
    border-top: 1px solid var(--color-main);
    padding: 1.16em 135px 2.5em 120px;
}

.faq-dl dd {
    position: relative;
}

.faq-dl dd::before {
    content: "A";
    position: absolute;
    top: .7em;
    left: 50px;
    height: 1em;
    color: #ff7f00;
    font-size: 1.83em;
    font-weight: 700;
    margin: auto;
    line-height: 1;
}

.editor-wrapper .faq-dl:last-child dt,
.news-section .faq-dl:last-child dt {
    border-bottom: 1px solid var(--color-main);
}

.editor-wrapper .faq-dl:last-child dt + dd,
.news-section .faq-dl:last-child dt + dd {
    border-top: 0;
}

.wp-block-group .faq-dl dt,
.wp-block-group .faq-dl dd {
    border: 0;
}

.wp-block-group .faq-dl dt.on + dd {
    border-bottom: 1px solid var(--color-main);
}

.wp-block-spacer + .wp-block-group .faq-dl dt {
    border-top: 1px solid var(--color-main);
}


/* 下層ページ - お問い合わせ
--------------------------------------------------------------- */

.contact-button-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2em;
}


/* モジュール - お知らせ
--------------------------------------------------------------- */

.tpl-front .news-section {
    padding: 100px 0 120px;
}

.news-section {
    position: relative;
    padding: 150px 0 200px;
    background: #fff;
}

.news-section .cs-columns {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(auto, 850px);
    justify-content: space-between;
    gap: 30px;
    max-width: var(--container-width);
    font-size: 18px;
    padding-inline: var(--container-padding);
    margin: auto;
}

.news-section .cs-list {
    border-top: 1px solid var(--color-default);
}

.news-section .cs-list li {
    border-bottom: 1px solid var(--color-default);
}

.news-section .cs-list a {
    display: flex;
    flex-wrap: wrap;
    padding: min(2.36vw, 45px) min(2.63vw, 50px);
    line-height: 1;
    background: url(../img/common/ico_arrow.svg) right min(1.84vw, 35px) center / 15px auto no-repeat;
}

.news-section .cs-list a > span {
    box-sizing: border-box;
    display: block;
}

.news-section .cs-list .cs-date {
    width: 22%;
    padding-right: 1em;
}

.news-section .cs-list .cs-tag {
    width: 24%;
    padding-right: 1em;
}

.news-section .cs-list .cs-title {
    width: calc(100% - 22% - 24%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-section .cs-list .cs-date + .cs-title {
    width: calc(100% - 22%);
}

/* -- タグ一覧ブロック */

.tag-block {
    font-size: 18px;
    padding: 1.66em 1.66em 1.66em 3.33em;
    background: var(--color-back-green);
}

.tag-block > ul > li:not(:first-child) a::before {
    content: "#";
}

.tag-block li.current-cat a {
    color: var(--color-main);
}


/* -- もっと見るテキスト */

.tag-block + .cmn-link-text-more {
    margin-top: 15px;
}

.tag-block + .cmn-link-text-more a {
    justify-content: flex-end;
    margin-left: auto;
}

/* -- 投稿用コンテンツエリア */

.news-section .cs-column-content {
    font-size: var(--font-base-size);
    line-height: 1.8;
}

.news-section .cs-column-content .post-header {
    margin-bottom: 2em;
}


/* モジュール - 生徒の声
--------------------------------------------------------------- */

.voice-module-section {
    position: relative;
    padding: 140px 0;
    background: #fff url(../img/common/bg_voice.jpg) center bottom / 100% auto no-repeat;
}

.voice-module-section .cmn-module-title-1 {
    margin-bottom: 75px;
}

.voice-pickup-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11.46%;
    justify-content: center;
    max-width: 1090px;
    font-size: 24px;
    padding-inline: var(--container-padding);
    margin: auto;
}

.voice-pickup-list a {
    position: relative;
    display: block;
    z-index: 1;
}

.voice-pickup-list h3 {
    box-sizing: border-box;
    max-width: 76.76%;
    min-height: 130px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    padding: .83em;
    line-height: 1.25;
    background: var(--color-main);
    z-index: -1
}

.voice-pickup-list figure {
    position: relative;
    width: 83.33%;
    aspect-ratio: 1/.725;
    margin: -1.73em 0 0 auto;
    z-index: 1;
}

.voice-pickup-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50px;
    overflow: hidden;
}

.voice-pickup-list figcaption {
    font-weight: 500;
    text-align: right;
    margin-top: .5em;
}

.voice-pickup-list figcaption::after {
    content: "";
    position: relative;
    top: -.05em;
    display: inline-block;
    width: 10px;
    aspect-ratio: 1/1.44;
    background: url(../img/common/ico_arrow.svg) center center / contain no-repeat;
    margin: 0 0 0 .3em;
}


/* モジュール - ブログ
--------------------------------------------------------------- */

.blog-module-section {
    position: relative;
    padding: 130px 0;
    background: #fff;
}

.tpl-front .blog-module-section{
    padding-bottom: var(--module-margin);
}

.blog-module-section .cs-columns {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(auto, 850px);
    justify-content: space-between;
    gap: 30px;
    max-width: var(--container-width);
    font-size: 18px;
    padding-inline: var(--container-padding);
    margin: auto;
}

.blog-module-section .tag-block {
    background-color: var(--color-back-gray);
}


/* - 投稿サムネイルリスト */

.post-thumbnail-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.68vw 3.6%;
}

.post-thumbnail-list figure {
    aspect-ratio: 1/1;
    overflow: hidden;
}

.post-thumbnail-list figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.post-thumbnail-list p {
    font-size: 20px;
    margin: 0;
}

.post-thumbnail-list .cs-date {
    margin-top: .5em;
}


/* モジュール - コース
--------------------------------------------------------------- */

.course-module-section {
    position: relative;
    padding: var(--module-margin) 0;
    background: #fff;
}

.course-module-section .cs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4%;
    max-width: var(--container-width);
    font-size: 18px;
    padding-inline: var(--container-padding);
    margin: auto;
}

.course-module-section .cs-course-box {
    font-size: 16px;
}

.course-module-section .cs-course-box a {
    display: block;
}

.course-module-section .cs-course-box figure {
    margin-bottom: 1.62em;
}

.course-module-section .cs-course-box img {
    width: 100%;
    height: auto;
    border-radius: 50px;
    overflow: hidden;
}

.course-module-section .cs-course-box h3 {
    position: relative;
    color: var(--color-main);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.course-module-section .cs-course-box a h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3em;
}

.course-module-section .cs-course-box a h3::after {
    content: "";
    position: relative;
    top: 0.08em;
    display: block;
    width: 13px;
    aspect-ratio: 1/1.44;
    background: url(../img/common/ico_arrow.svg) center center / contain no-repeat;
}

.course-module-section .cs-course-box p {
    margin-top: .5em;
}


/* モジュール - 2カラムモジュール
--------------------------------------------------------------- */

.columns-module-section {
    position: relative;
    padding: var(--module-margin) 0;
    background: #fff;
}

.columns-module-section .cs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4%;
    max-width: var(--container-width);
    font-size: 18px;
    padding-inline: var(--container-padding);
    margin: auto;
}

/* -- 1カラム */
.columns-module-section.is-1col .cs-columns {
    grid-template-columns: 100%;
}

/* -- 3カラム */

.columns-module-section.is-3col .cs-columns {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4%;
}


/* モジュール - スペシャルコンテンツ
--------------------------------------------------------------- */

.special-module-section {
    position: relative;
    height: 450px;
    color: #fff;
    background: url(../img/top/bg_special.webp) center center / 100% 100% no-repeat;
    margin-top: var(--module-margin);
}

.special-module-section .cs-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: var(--container-width);
    height: 100%;
    font-size: 26px;
    padding-inline: var(--container-padding);
    margin: auto;
    background: url(../img/top/special_img.png) right bottom no-repeat;
}

.special-module-section .cs-text {
    display: block;
    color: #fff;
    line-height: 1.3;
    margin-top: -1em;
}

.special-module-section h2 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .5em;
}

.special-module-section .cmn-link-text-more .is-more-text {
    color: #fff;
}

.special-module-section .cmn-link-text-more .is-more-text::after {
    background-image: url(../img/common/ico_arrow_white.svg);
}


/* モジュール - 教室案内
--------------------------------------------------------------- */

.schoolhouse-module-section {
    position: relative;
    padding: var(--module-margin) 0;
    background: #fff;
}

.schoolhouse-module-section .cs-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 7.2%;
    max-width: var(--container-width);
    font-size: 1.25em;
    padding-inline: var(--container-padding);
    margin: auto;
}

.schoolhouse-module-section .cs-column-image figure {
    aspect-ratio: 1/.466;
    overflow: hidden;
}

.schoolhouse-module-section .cs-column-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50px;
    overflow: hidden;
}

.schoolhouse-module-section .cs-school-list {
    display: grid;
    gap: 2.33em;
    line-height: 1;
}

.schoolhouse-module-section .cs-school-list a {
    color: var(--color-main);
    font-weight: 500;
}


/* モジュール - 教室案内(旧お問い合わせ)
--------------------------------------------------------------- */

.contact-module-section {
    position: relative;
    padding: 50px 0;
    /*margin-top: var(--module-margin);*/
    background: var(--color-back-gray);
}

.columns-module-section + .contact-module-section {
    margin-top: var(--module-margin);
}

.contact-module-section .cs-column-text {
    padding-top: 1em;
}

.contact-module-section .cs-columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5em;
    max-width: var(--container-width);
    font-size: 20px;
    padding-inline: var(--container-padding);
    margin: auto;
}

.contact-module-section .cmn-link-image a {
    width: auto;
}

.contact-module-section .cmn-link-image a img {
    width: 100%;
}


/* モジュール - リンクカード
--------------------------------------------------------------- */

.module-card {
    font-size: 16px;
}

.module-card a {
    display: block;
}

.module-card figure {
    margin-bottom: 1.62em;
}

.module-card img {
    width: 100%;
    height: auto;
    border-radius: 50px;
    overflow: hidden;
}

.module-card h3 {
    position: relative;
    color: var(--color-main);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.module-card a h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3em;
}

.module-card a h3::after {
    content: "";
    position: relative;
    top: 0.08em;
    display: block;
    width: 13px;
    aspect-ratio: 1/1.44;
    background: url(../img/common/ico_arrow.svg) center center / contain no-repeat;
}

.module-card p {
    margin-top: .5em;
}


/* モジュール - GoogleMap
--------------------------------------------------------------- */

.gmap {
    line-height: 1;
}

.gmap iframe {
    display: block;
    width: 100%;
    aspect-ratio: 1/.683;
    margin: .5em 0;
}

.gmap-link {
    text-align: right;
}

.gmap-link a {
    display: block;
}

.gmap-link a::after {
    content: "";
    position: relative;
    top: 1px;
    display: inline-block;
    width: 38px;
    aspect-ratio: 1/.7;
    background: url(../img/common/ico_blank.svg) center center / contain no-repeat;
    margin-left: .2em;
}


/* モジュール - ページナビ
--------------------------------------------------------------- */

.cmn-pagenav .wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    padding-inline: var(--container-padding);
    margin-top: 3em;
}

.cmn-pagenav .wp-pagenavi > span,
.cmn-pagenav .wp-pagenavi > a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    min-height: 40px;
    text-decoration: none;
    border: 1px solid #bbb;
}

.cmn-pagenav .wp-pagenavi .current {
    border-color: #ddd;
    background-color: #ddd;
}

@media (hover: hover) {

    .cmn-pagenav .wp-pagenavi > a {
        transition: .2s background-color, border-color;
    }

    .cmn-pagenav .wp-pagenavi > a:hover {
        opacity: 1;
        color: #fff;
        background-color: var(--color-main);
        border-color: var(--color-main);
    }
}


/* モジュール - テキストコンテナ
--------------------------------------------------------------- */

.cmn-module-introduction {
    text-align: center;
    margin-bottom: 140px;
}


/* モジュール調整 - 特定のページのみ既存スタイルを調整
--------------------------------------------------------------- */

/* -- 固定ページ - コース */
body.course .course-module-section {
    padding-bottom: 0;
}


/* -- 投稿 一覧・詳細 */
body.archive-post .news-section,
body.single .news-section {
    padding-block: var(--module-margin);
}

body.archive-post .contact-module-section,
body.single .contact-module-section {
    margin-top: 0;
}


/* -- 教室案内 - 親ページ */
/*body.schoolhouse .columns-module-section {
    padding-top: 0;
}*/

body.schoolhouse .cmn-module-title-header {
    margin-bottom: 0;
}


/* -- 教室ページ */
body.page .news-section,
body.page .blog-module-section {
    padding-block: 130px;
}

body.page .news-section + .blog-module-section {
    padding-top: 0;
}

.cmn-link-text-more a.is-right {
    justify-content: flex-end;
    margin-left: auto;
}


/* Gutenbergモジュール調整 - 親コンテナの幅を超えて背景色を付与
--------------------------------------------------------------- */

.is-container-fill {
    padding-block: calc(var(--module-margin) * 2);
    border-image: linear-gradient(#f9f9ff, #f9f9ff) fill 0 //0 100vw 0 100vw;
}



/* 以下、SP　vw 375px ベース
--------------------------------------------------------------- */

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

    /* SP トップページ - メインビジュアル
    --------------------------------------------------------------- */


    .top-main-visual .cs-menu li a {
        font-size: 2.67vw;
    }

    .top-main-visual .cs-copy {
        font-size: 2.38vw;
    }

    .top-main-visual .cs-copy.is-strong {
        font-size: 3.9vw;
    }

    .top-main-visual .cs-menu li a::after {
        width: 2.13vw;
    }


    /* SP トップページ - ビジュアルスライダー
    --------------------------------------------------------------- */

    .top-visual-slider {
        --slide-height: 122.66vw;
    }

    .top-visual-slider .cs-slide {
        width: auto;
        height: 109.18vw;
    }

    .top-visual-slider .cs-slide img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/.507;
        object-fit: cover;
        object-position: center center;
    }

    .top-visual-slider .cs-text-wrapper {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        display: block;
        background: none;
        width: auto;
        padding: 2.67vw var(--container-padding) 0;
    }

    .top-visual-slider .cs-heading {
        width: auto;
        font-size: 6.67vw;
        margin-bottom: 2.67vw;
    }

    .top-visual-slider .cs-heading br {
        display: none;
    }

    .top-visual-slider .cs-text {
        font-size: 3.47vw;
    }

    .top-visual-slider .cs-more {
        gap: .41em;
    }

    .top-visual-slider .cs-more::after {
        top: .1em;
        width: 2.13vw;
    }

    .top-visual-slider .slick-dots {
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        gap: 4vw;
    }

    .top-visual-slider .slick-dots li button {
        width: 2.67vw;
    }


    /* -- SP 教室一覧 */

    .top-visual-slider .cs-school {
        position: relative;
        left: auto;
        bottom: auto;
        min-width: 0;
        padding: 2.93vw var(--container-padding);
        border-radius: 0;
    }

    .top-visual-slider .cs-school h2 {
        font-size: 2.67vw;
    }

    .top-visual-slider .cs-school a {
        font-size: 3.2vw;
    }


    /* SP トップページ - 生徒一人ひとりの想いを尊重
    --------------------------------------------------------------- */

    .top-policy-section {
        text-align: left;
        padding: var(--module-margin) var(--container-padding);
    }


    /* SP トップページ - まるがくについて
    --------------------------------------------------------------- */

    .top-about-section {
        padding: var(--module-margin) 0;
        background: #fff url(../img/top/bg_about.png) center center / 231.88vw auto no-repeat;
    }

    .top-about-section .cs-promise {
        text-align: left;
        line-height: 1.91;
    }

    .top-about-section .cs-promise h2 {
        text-align: center;
    }

    .top-about-section .cs-promise strong {
        line-height: 1.8;
    }

    .top-about-list {
        margin-inline: calc(-1 * var(--container-padding));
    }

    .top-about-list .is-1 {
        max-width: none;
        width: 46.86vw;
        transform: translate(2.9vw, 0);
    }

    .top-about-list .is-2 {
        max-width: none;
        width: 43.96vw;
        transform: translate(-2.42vw, 9.18vw);
    }

    .top-about-list .is-3 {
        max-width: none;
        width: 51.93vw;
        transform: translate(2.9vw, -7.73vw);
    }

    .top-about-list .is-4 {
        max-width: none;
        width: 43vw;
        transform: translate(-2.17vw, 13.29vw);
    }

    .top-about-list .is-5 {
        max-width: none;
        width: 91.3vw;
        transform: translate(2.9vw, 0);
    }


    /* SP カスタム投稿 - 生徒の声
    --------------------------------------------------------------- */

    /* -- SP single */

    .voice-section {
        grid-template-columns: calc(33% - .5em) calc(66% - .5em);
        gap: 1em;
        margin-bottom: var(--module-margin);
    }

    .voice-section .cs-title {
        font-size: 1.58em;
    }


    /* -- SP taxonomy list */

    .voice-tag-list {
        justify-content: center;
        gap: 1.5em;
        width: auto;
        font-size: 1em;
        padding: 0;
        margin: 0 0 2.77em;
    }

    .voice-tag-list a {
        display: block;
        padding: 1em 0;
        line-height: 1.66;
    }


    /* -- SP archive */

    .voice-thumbnail-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8vw;
    }

    .voice-thumbnail-list .cs-title {
        font-size: 4vw;
        margin-block: .5em;
    }

    .voice-thumbnail-list .cs-title::after {
        width: 2.13vw;
    }

    .voice-thumbnail-list .cs-caption {
        font-size: .83em;
    }


    /* SP 下層ページ - スペシャルコンテンツ
    --------------------------------------------------------------- */

    /* -- SP ページ見出し */

    .special-header {
        height: 55.56vw;
        padding-inline: var(--container-padding);
        margin-inline: calc(-1 * var(--container-padding));
        background-size: auto 55.56vw;
        /*background-position: right -9.66vw top 0;*/
        background-position: right 0 top 0;
    }

    .special-header .cs-inner {
        place-content: center start;
        max-width: none;
        padding: 0;
    }

    .special-header .cs-inner::after {
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 80%);
        margin: auto calc(-1 * var(--container-padding));
    }

    .special-header .cs-inner > div {
        text-shadow:
            0px 0px 1.45vw rgba(255, 255, 255, 1),
            0px 0px 1.45vw rgba(255, 255, 255, 1),
            0px 0px 1.45vw rgba(255, 255, 255, 1);
    }

    .special-header h2 {
        font-size: 4.83vw;
        font-weight: 700;
        line-height: 1.66;
        font-feature-settings: "palt";
    }

    .special-header .cs-author {
        text-align: left;
        font-size: .83em;
        margin-top: 1em;
    }

    /* -- SP メインコンテナ */

    .special-content-inner::before,
    .special-content-inner::after {
        width: calc(550 / 750 * 100%);
    }

    .special-content-inner::before {
        margin: 0 0 .67vw 0;
    }


    /* -- SP モーダルリスト */

    @keyframes pop-balloon {
        0% {
            opacity: 0;
            transform: translate(0, 7.25vw);
        }

        33% {
            opacity: 0;
            transform: translate(0, 7.25vw);
        }

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

    .special-faq-wrapper {
        position: relative;
    }

    .cs-manager-image {
        width: 35.33vw;
        margin: auto;
    }

    .cs-faq-list {
        --container-width: 750;
        /* 親コンテナMAX幅 */
    }

    .cs-faq-list .is-1 {
        top: 0;
        left: auto;
        right: 0;
        width: calc(308 / var(--container-width) * 100%);
        transform: rotate(-5deg);
    }

    .cs-faq-list .is-2 {
        top: 0;
        left: 0;
        width: calc(320 / var(--container-width) * 100%);
        transform: rotate(-10deg);
    }

    .cs-faq-list .is-3 {
        top: 28.53vw;
        left: auto;
        right: 0;
        width: calc(306 / var(--container-width) * 100%);
        transform: rotate(5deg);
    }

    .cs-faq-list .is-4 {
        bottom: 28.67vw;
        left: 6.04vw;
        width: calc(292 / var(--container-width) * 100%);
        transform: rotate(0);
    }

    .cs-faq-list .is-5 {
        bottom: -1.33vw;
        left: 0;
        width: calc(310 / var(--container-width) * 100%);
        transform: rotate(10deg);
    }

    .cs-faq-list .is-6 {
        bottom: 0;
        left: auto;
        right: 0;
        width: calc(306 / var(--container-width) * 100%);
        transform: rotate(-5deg);
    }


    /* -- SP モーダル Wrapper */

    .special-modal button.mfp-close {
        width: 8vw;
        top: 4vw;
        right: 4vw;
        padding: 0;
    }

    .mfp-wrap.mfp-special::before,
    .mfp-wrap.mfp-special::after {
        width: 69.33vw;
    }


    /* -- SP モーダル POP */

    .special-modal {
        max-width: none;
        padding: calc(16.67vw + 2.67vw) var(--container-padding);
    }

    .special-modal.is-1 .cs-container,
    .special-modal.is-2 .cs-container,
    .special-modal.is-3 .cs-container {
        min-height: 105.33vw;
        padding-left: calc(28vw + 1.33vw);
        background-size: 28vw auto;
    }

    .special-modal .cs-pop-balloon {
        font-size: 2.67vw;
        border-width: .53vw;
        border-radius: 4vw;
        box-shadow: 1.33vw 1.33vw 1.33vw 0px rgba(0, 0, 0, .3);
    }

    .special-modal .cs-pop-balloon.is-a {
        width: 100%;
        border-width: 1.07vw;
    }

    .special-modal .cs-pop-balloon h3 {
        grid-template-columns: 6.67vw auto;
        gap: 1.33vw;
        font-size: 3.2vw;
        margin-bottom: 2.67vw;
        line-height: 1.16;
    }

    .special-modal .cs-pop-balloon h3::before {
        width: 6.67vw;
    }

    .special-modal .cs-pop-balloon.is-a h3 {
        font-size: 3.2vw;
        border-radius: 2.67vw;
    }


    /* -- SP 吹き出し */

    .special-modal .cs-balloon-arrow {
        top: 20%;
        bottom: auto;
    }

    .special-modal .cs-balloon-arrow {
        left: -9.33vw;
        width: 9.33vw;
    }

    .special-modal .cs-balloon-arrow::after {
        top: 1.21vw;
        right: -.48vw;
    }



    /* SP 下層ページ - 合格実績
    --------------------------------------------------------------- */

    .performance-list {
        gap: .5em 0;
        padding: 1.5em 2em 1.5em 3em;
        border-radius: 1.33vw;
    }

    .performance-list li {
        width: 50%;
    }


    /* SP 下層ページ - よくある質問
    --------------------------------------------------------------- */

    .faq-dl dt {
        font-size: 1.16em;
        background-position: right 15px center;
        background-size: 24px auto;
        padding: 1.5em calc(15px + 24px + 15px) 1.5em 50px;
    }

    .faq-dl dt::before {
        top: -.3em;
        left: 10px;
        font-size: 1.57em;
    }

    .faq-dl dt + dd {
        padding: 1.5em 1.5em 2.5em 50px;
    }

    .faq-dl dd::before {
        top: .8em;
        left: 14px;
        font-size: 1.83em;
    }


    /* SP モジュール - お知らせ
    --------------------------------------------------------------- */

    .tpl-front .news-section {
        padding: 9.33vw 0 13.33vw;
    }

    .news-section {
        padding: 13.33vw 0;
    }

    .news-section .cs-columns {
        display: block;
        font-size: var(--font-base-size);
        padding-inline: var(--container-padding);
        margin: 0;
    }

    .news-section .cs-list a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 1em 1.5em;
        line-height: 1.4;
        background-size: 2.13vw auto;
        background-position: center right 1em;
    }

    .news-section .cs-list a > span {
        box-sizing: border-box;
        display: block;
    }

    .news-section .cs-list .cs-date {
        width: auto;
        padding-right: 1em;
    }

    .news-section .cs-list .cs-tag {
        width: auto;
        padding-right: 0;
    }

    .news-section .cs-list .cs-title {
        width: 100%;
        margin-top: .3em;
    }

    .news-section .cs-list .cs-date + .cs-title {
        width: 100%;
    }

    /* -- SP 見出しブロック */

    .news-section .cs-column-heading {
        margin-bottom: 5.33vw;
    }

    /* -- SP タグ一覧ブロック */

    .tag-block {
        font-size: var(--font-base-size);
        padding: 0;
    }

    .tag-block ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5em;
    }

    .tag-block ul a {
        display: block;
        padding: 1em 0;
    }

    /* -- SP もっと見るテキスト */

    .tag-block + .cmn-link-text-more {
        margin-top: 1em;
    }


    /* SP モジュール - 生徒の声
    --------------------------------------------------------------- */

    .voice-module-section {
        padding: var(--module-margin) 0;
        background-size: auto 120vw;
    }

    .voice-module-section .cmn-module-title-1 {
        margin-bottom: 6.4vw;
    }

    .voice-pickup-list {
        grid-template-columns: 100%;
        gap: var(--module-margin);
        max-width: none;
        font-size: var(--font-base-size);
        margin: auto;
    }

    .voice-pickup-list a {}

    .voice-pickup-list h3 {
        max-width: 76.76%;
        min-height: 26.67vw;
        font-size: 4.8vw;
        padding: .63em .83em 1.4em;
        line-height: 1.4;
    }

    .voice-pickup-list figure {
        width: 83.33%;
        margin: -1.23em 0 0 auto;
    }

    .voice-pickup-list img {
        border-radius: 6.67vw;
    }

    .voice-pickup-list figcaption::after {
        top: 0;
        width: 2.13vw;
    }



    /* SP モジュール - ブログ
    --------------------------------------------------------------- */

    .blog-module-section {
        padding: 10.67vw 0;
    }

    .blog-module-section .cs-columns {
        display: block;
        font-size: var(--font-base-size);
    }

    .blog-module-section .tag-block {
        background-color: var(--color-back-gray);
    }


    /* -- SP 見出しブロック */

    .blog-module-section .cs-column-heading {
        margin-bottom: 5.33vw;
    }


    /* - 投稿サムネイルリスト */

    .post-thumbnail-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 4vw 8vw;
    }

    .post-thumbnail-list p {
        font-size: var(--font-base-size);
    }


    /* SP モジュール - コース
    --------------------------------------------------------------- */

    .course-module-section .cs-columns {
        grid-template-columns: 100%;
        gap: var(--module-margin);
        font-size: var(--font-base-size);
        padding-inline: calc(var(--container-padding) * 2);
    }

    .course-module-section .cs-course-box {
        font-size: var(--font-base-size);
    }

    .course-module-section .cs-course-box a {
        display: block;
    }

    .course-module-section .cs-course-box figure {
        margin-bottom: 1.62em;
    }

    .course-module-section .cs-course-box img {
        border-radius: 6.67vw;
    }

    .course-module-section .cs-course-box h3 {
        font-size: 4vw;
        justify-content: center;
    }

    .course-module-section .cs-course-box a h3::after {
        top: 0;
        width: 2.13vw;
    }


    /* SP モジュール - 2カラムモジュール
    --------------------------------------------------------------- */

    .columns-module-section {}

    .columns-module-section .cs-columns {
        grid-template-columns: 100%;
        gap: 10.67vw;
        font-size: var(--font-base-size);
    }

    /* -- SP 3カラム */

    .columns-module-section.is-3col .cs-columns {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4vw;
    }


    /* SP モジュール - スペシャルコンテンツ
    --------------------------------------------------------------- */

    .special-module-section {
        height: auto;
        padding: var(--module-margin) var(--module-margin) 0;
        margin: 0 0 var(--module-margin);
    }

    .special-module-section .cs-inner {
        display: block;
        max-width: none;
        height: auto;
        font-size: 4vw;
        padding: 0 0 50.72vw;
        background: url(../img/top/special_img.png) center bottom / auto 48.31vw no-repeat;
    }

    .special-module-section .cs-text {
        display: block;
        margin: 0;
    }

    .special-module-section h2 {
        font-size: 6.4vw;
        margin-bottom: .5em;
    }

    /*
    .special-module-section .cmn-link-text-more {
        font-size: var(--font-base-size);
    }
    */


    /* SP モジュー ル - 教室案内
    --------------------------------------------------------------- */

    .schoolhouse-module-section .cs-columns {
        grid-template-columns: 1fr 1fr;
        gap: 7.2%;
        font-size: 1.25em;
    }

    .schoolhouse-module-section .cs-column-image figure {
        aspect-ratio: 1/1;
    }

    .schoolhouse-module-section .cs-column-image img {
        border-radius: 6.67vw;
    }

    .schoolhouse-module-section .cs-school-list {
        gap: 2em;
    }


    /* SP モジュール - お問い合わせ
    --------------------------------------------------------------- */

    .contact-module-section {
        position: relative;
        padding: var(--module-margin) 0;
        margin-top: 4vw;
        background: var(--color-back-gray);
    }

    .contact-module-section .cs-column-text {
        padding-top: 0;
    }

    .contact-module-section .cs-columns {
        grid-template-columns: 100%;
        gap: 6.4vw;
        font-size: var(--font-base-size);
    }


    /* SP モジュール - リンクカード
    --------------------------------------------------------------- */

    .module-card {
        font-size: var(--font-base-size);
    }

    .module-card a {
        display: block;
    }

    .module-card figure {
        margin-bottom: 1.62em;
    }

    .module-card img {
        border-radius: 6.67vw;
    }

    .module-card h3 {
        font-size: 4vw;
    }

    .module-card a h3::after {
        top: 0;
        width: 2.13vw;
    }


    /* SP モジュール - ページナビ
    --------------------------------------------------------------- */

    .cmn-pagenav .wp-pagenavi {
        gap: 2.42vw;
        font-size: 3.38vw;
        margin-top: var(--module-margin);
    }

    .cmn-pagenav .wp-pagenavi > span,
    .cmn-pagenav .wp-pagenavi > a {
        min-width: 9.66vw;
        min-height: 9.66vw;
    }


    /* SP モジュール - テキストコンテナ
    --------------------------------------------------------------- */

    .cmn-module-introduction {
        text-align: left;
        margin-bottom: var(--module-margin);
    }


    /* SP モジュール調整 - 特定のページのみ既存スタイルを調整
    --------------------------------------------------------------- */

    /* -- SP 教室ページ */
    body.page .news-section,
    body.page .blog-module-section {
        padding-block: var(--module-margin);
    }

}

/*
WP調整
--------------------------------------------------------
*/

.aligncenter{
	margin-left:auto;
	margin-right:auto;
}

.alignright{
	margin-left:auto;
}