@charset "utf-8";

#main {
    padding: calc(150 * (100vw / 750)) 0 0 0;
}
@media screen and (min-width: 1024px) {
    #main {
        padding: 0;
    }
}

/* -------------------------------------------- *
 * common
 * -------------------------------------------- */
/* cta */
.cta {
    width: calc(650*(100vw/750));
    margin: auto;
}
.cta img {
    animation: ctaPulse 1.8s ease-in-out infinite;
    transform-origin: center;
    position: relative;
    z-index: 5;
}
.cta a {
    position: relative;
    transition: opacity 1s;
}
.cta a::after {
    content: "";
    position: absolute;
    width: calc(560 * (100vw / 750));
    border-radius: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    left: 49%;
    top: calc(-180 * (100vw / 750));
    translate: -50% 0;
    animation: ctaPulse 1.8s ease-in-out infinite;
    transform-origin: center;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 0 calc(30*(100vw/750)) 0 rgba(0, 0, 0, 0.5);
    aspect-ratio: 560 / 140;
}
.cta a:hover {
    opacity: 0.5;
}
@keyframes ctaPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}
@media screen and (min-width: 1024px) {
    .cta {
        width: 325px;
    }
    .cta .cta__attention {
        font-size: 12px;
        bottom: 15px;
    }
    .cta a::after {
        width: 285px;
        height: 72.5px;
        left: 49%;
        top: -90px;
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    }
}

/* -------------------------------------------- *
 * studio
 * -------------------------------------------- */
#studio {
    background-image: url(../img/common/bg_net.png);
    background-position: center top;
    background-repeat: repeat;
    background-size: 20px 9px;
    border: 5px solid #d61a18;
}
#studio .titleWrap .title {
    width: calc(350*(100vw/750));
    margin: auto;
    padding: calc(14*(100vw/750)) 0 calc(32*(100vw/750)) 0;
}
#studio .information {
    width: calc(650*(100vw/750));
    background-image: url(../img/common/bg_tile.jpg);
    background-size: 100% auto;
    background-repeat: repeat-y;
    margin: auto;
    border: 4px solid #d61a18;
    border-radius: 26px;
}
#studio .information .block {
    width: calc(550*(100vw/750));
    margin: auto;
    padding: 0 0 calc(60 * (100vw / 750)) 0;
}
#studio .information .title {
    width: calc(380*(100vw/550));
    color: #d61a18;
    text-align: center;
    margin: auto;
    padding: calc(64*(100vw/750)) 0 calc(31*(100vw/750)) 0;
}
#studio .information .title .ja {
    display: block;
    font-size: calc(24*(100vw/750));
    line-height: 1;
}
#studio .information .title .en {
    display: block;
    font-family: serifa, serif;
    font-size: calc(48*(100vw/750));
    line-height: 1.2;
}
#studio .information .map {
    margin: 0 0 calc(8*(100vw/750)) 0;
}
#studio .information .map iframe {
    border: 4px solid #d61a18 !important;
    border-radius: 26px;
    box-sizing: border-box;
    aspect-ratio: 550 / 350;
}
#studio .information .address {
    color: #666666;
    font-size: calc(24*(100vw/750));
    line-height: 1.75;
    font-weight: bold;
    margin: 0 0 calc(19*(100vw/750)) 0;
    padding: 0 calc(40*(100vw/750));
}
#studio .information .week {
    margin: 0 0 calc(55*(100vw/750)) 0;
}
#studio .information .week .table {
    overflow: hidden;
    color: #cc0000;
    background-color: #ffffff;
    border: 3px solid #d61a18;
    border-radius: 8px;
    box-sizing: border-box;
}
#studio .information .week .table .cell {
    display: flex;
    border-bottom: 2px solid #d61a18;
}
#studio .information .week .table .cell:last-child {
    border-bottom: 0;
}
#studio .information .week .table .cell .day {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: calc(70/540*100%);
    font-size: calc(24*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    background-color: #fae5e5;
    border-right: 2px solid #d61a18;
    box-sizing: border-box;
    white-space: nowrap;
}
#studio .information .week .table .cell .day.space {
    background-color: transparent;
}
#studio .information .week .table .cell .time {
    flex-basis: calc(470/540*100%);
    font-size: calc(24*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    padding: 0.4em 0.7em;
}
#studio .information .week .table .cell .time.closed {
    background-color: #fae5e5;
}
#studio .information .week .table .cell .time sup {
    font-size: 0.6em;
    vertical-align: super;
}
#studio .information .week .note {
    color: #cc0000;
    font-size: calc(24*(100vw/750));
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.01em;
    padding: calc(24*(100vw/750)) 0 0 0;
}
#studio .information .more {
    display: block;
    width: calc(130*(100vw/750));
    margin: auto;
}
#studio .cta {
    position: relative;
    width: calc(650*(100vw/750));
    margin: calc(7*(100vw/750)) auto calc(98*(100vw/750)) auto;
}
#studio .cta .attention {
    position: absolute;
    font-size: calc(24*(100vw/750));
    letter-spacing: 0.025em;
    color: #fff;
    font-weight: bold;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
}
@media screen and (min-width: 1024px) {
    #studio {
        padding: 20px 0 0 0;
    }
    #studio .titleWrap .title {
        width: 175px;
        padding: 7px 0 16px 0;
    }
    #studio .information {
        width: 325px;
        border: 4px solid #d61a18;
        border-radius: 26px;
    }
    #studio .information .block {
        width: 275px;
        padding: 0 0 30px 0;
    }
    #studio .information .title {
        width: 190px;
        padding: 32px 0 18.5px 0;
    }
    #studio .information .title .ja {
        font-size: 12px;
    }
    #studio .information .title .en {
        font-size: 24px;
    }
    #studio .information .map {
        margin: 0 0 4px 0;
    }
    #studio .information .map iframe {
        border: 4px solid #d61a18 !important;
        border-radius: 26px;
    }
    #studio .information .address {
        font-size: 12px;
        margin: 0 0 9.5px 0;
        padding: 0 20px;
    }
    #studio .information .week {
        margin: 0 0 27.5px 0;
    }
    #studio .information .week .table .cell .day {
        flex-basis: 35px;
        font-size: 12px;
    }
    #studio .information .week .table .cell .day.space {
    }
    #studio .information .week .table .cell .time {
        flex-basis: 235px;
        font-size: 12px;
    }
    #studio .information .week .note {
        font-size: 12px;
        padding: 11.5px 0 0 0;
    }
    #studio .information .more {
        width: 65px;
    }
    #studio .cta {
        width: 325px;
        margin: 3.5px auto 49px auto;
    }
    #studio .cta .attention {
        font-size: 12px;
        bottom: 15.5px;
    }
}

/* -------------------------------------------- *
 * studioDetail
 * -------------------------------------------- */
/* firstContent */
#studioDetail .firstContent {
    width: calc(650*(100vw/750));
    margin: auto;
}
#studioDetail .firstContent .title {
    color: #d61a18;
    text-align: center;
    padding: calc(36 * (100vw / 750)) 0 calc(49 * (100vw / 750)) 0;
}
#studioDetail .firstContent .title .ja {
    display: block;
    font-size: calc(24*(100vw/750));
    line-height: 1;
}
#studioDetail .firstContent .title .en {
    display: block;
    font-family: serifa, serif;
    font-size: calc(60*(100vw/750));
    line-height: 1;
}
#studioDetail .firstContent .mv {
    margin: 0 0 calc(13*(100vw/750)) 0;
}
#studioDetail .firstContent .campaign {
}
#studioDetail .firstContent .image {
    margin: 0 0 calc(20*(100vw/750)) 0;
}
#studioDetail .firstContent .noteWrap {
}
#studioDetail .firstContent .noteWrap .note {
    font-size: calc(18*(100vw/750));
    line-height: 2;
    font-weight: bold;
}
#studioDetail .fimargin: 0 0 calc(47 * (100vw / 750)) 0;rstContent .noteWrap .note {
    font-size: calc(18*(100vw/750));
    line-height: 2;
    font-weight: bold;
}
#studioDetail .cta {
    position: relative;
    margin: calc(-24*(100vw/750)) auto calc(-146*(100vw/750)) auto;
}
#studioDetail .cta.cta2 {
    margin: calc(-17 * (100vw / 750)) auto calc(36 * (100vw / 750)) auto;
}
#studioDetail .cta.cta3 {
    margin: calc(16 * (100vw / 750)) auto calc(-85 * (100vw / 750)) auto;
}
#studioDetail .cta .attention {
    position: absolute;
    font-size: calc(24*(100vw/750));
    letter-spacing: 0.025em;
    font-weight: bold;
    bottom: calc(27*(100vw/750));
    left: 50%;
    translate: -50% 0;
}
#studioDetail .cta.cta3 .attention {
    color: #ffffff;
}

/* bg */
#studioDetail .bg {
    position: relative;
    background-image: url(../img/common/bg_net.png);
    background-position: center top;
    background-repeat: repeat;
    background-size: 20px 9px;
    border: 5px solid #d61a18;
}

/* flow */
#studioDetail .flow {
    height: calc(1069*4*(100vw/750)); /* 918+151 */
    margin: 0 0 calc(20*(100vw/750)) 0;
    padding: 1px 0 0 0;
}
#studioDetail .flowBox {
    height: calc(1069*(100vw/750)); /* 918+151 */
    padding-top: calc(151*(100vw/750));

    position: sticky;
    top: 0;
}
#studioDetail .flow .inner {
    width: calc(650*(100vw/750));
    height: calc(918*(100vw/750));
    background-image: url(../img/studio/detail/bg_flow.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
}
#studioDetail .flow .title {
    padding-top: calc(65*(100vw/750));
    margin-inline: auto;
    margin-bottom: calc(50*(100vw/750));
}
#studioDetail .flow .stepImageWrap {
    width: calc(550*(100vw/750));
    margin-inline: auto;
    margin-bottom: calc(20*(100vw/750));
}
#studioDetail .flow .stepImageWrap img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
}
#studioDetail .flow .stepImageWrap li,
#studioDetail .flow .textWrap li {
    display: none;
}
#studioDetail .flow .stepImageWrap li.active,
#studioDetail .flow .textWrap li.active {
    display: block;
}
#studioDetail .flow .stepButtonWrap {
    display: flex;
    justify-content: center;
    gap: calc(80*(100vw/750));
}
#studioDetail .flow .stepButtonWrap li {
    width: calc(80*(100vw/750));
    height: calc(80*(100vw/750));
}
/* ボタンの見た目切り替え */
#studioDetail .flow .stepButtonWrap li img.on {
    display: none;
}
#studioDetail .flow .stepButtonWrap li.active img.on {
    display: inline;
}
#studioDetail .flow .stepButtonWrap li.active img.off {
    display: none;
}
#studioDetail .flow .textWrap .step01Text .head {
    margin-top: calc(30*(100vw/750));
}
#studioDetail .flow .textWrap .head {
    font-size: calc(32*(100vw/750));
    font-weight: bold;
    color: #d61a18;
    text-align: center;
    margin-top: calc(10*(100vw/750));
    line-height: 1.5;
}
#studioDetail .flow .textWrap .head span {
    font-size: calc(20*(100vw/750));
    position: absolute;
}
#studioDetail .flow .textWrap .attention {
    font-size: calc(18*(100vw/750));
    text-align: center;
    font-weight: bold;
    color: #666;
    margin-top: calc(5*(100vw/750));
}
#studioDetail .flow .textWrap .text {
    font-size: calc(24*(100vw/750));
    font-weight: bold;
    color: #666666;
    text-align: center;
    line-height: 1.75;
    margin-top: calc(20*(100vw/750));
}

/* view */
#studioDetail .view {
}
#studioDetail .view .view__swiper {
    margin: calc(171*(100vw/750)) 0 calc(100*(100vw/750)) 0;
    overflow: hidden;
}
#studioDetail .view .swiper-wrapper {
    transition-timing-function: linear !important;
}
#studioDetail .view .swiper-slide img {
    height: auto;
    width: 100%;
    padding-right: calc(25*(100vw/750));
}

/* information */
#studioDetail .information {
    width: calc(650*(100vw/750));
    background-image: url(../img/common/bg_tile.jpg);
    background-size: 100% auto;
    background-repeat: repeat-y;
    margin: calc(640*(100vw/750)) auto 0 auto;
    border: 4px solid #d61a18;
    border-radius: 26px;
}
#studioDetail .information .block {
    width: calc(550*(100vw/750));
    margin: auto;
}
#studioDetail .information .title {
    padding: calc(54*(100vw/750)) 0 calc(55*(100vw/750)) 0;
}
#studioDetail .information .map {
    margin: 0 0 calc(28*(100vw/750)) 0;
}
#studioDetail .information .map iframe {
    border: 4px solid #d61a18 !important;
    border-radius: 26px;
    box-sizing: border-box;
    aspect-ratio: 550 / 350;
}
#studioDetail .information .address {
    color: #666666;
    font-size: calc(24*(100vw/750));
    line-height: 1.75;
    font-weight: bold;
    margin: 0 0 calc(33*(100vw/750)) 0;
    padding: 0 calc(27*(100vw/750));
}
#studioDetail .information .week {
    margin: 0 0 calc(48*(100vw/750)) 0;
}
#studioDetail .information .week .table {
    overflow: hidden;
    color: #cc0000;
    background-color: #ffffff;
    border: 3px solid #d61a18;
    border-radius: 8px;
    box-sizing: border-box;
}
#studioDetail .information .week .table .cell {
    display: flex;
    border-bottom: 2px solid #d61a18;
}
#studioDetail .information .week .table .cell:last-child {
    border-bottom: 0;
}
#studioDetail .information .week .table .cell .day {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: calc(70/540*100%);
    font-size: calc(24*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    background-color: #fae5e5;
    border-right: 2px solid #d61a18;
    box-sizing: border-box;
    white-space: nowrap;
}
#studioDetail .information .week .table .cell .day.space {
    background-color: transparent;
}
#studioDetail .information .week .table .cell .time {
    flex-basis: calc(470/540*100%);
    font-size: calc(24*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    padding: 0.4em 0.7em;
}
#studioDetail .information .week .table .cell .time sup {
    font-size: 0.6em;
    vertical-align: super;
}
#studioDetail .information .week .table .cell .time.closed {
    background-color: #fae5e5;
}
#studioDetail .information .week .note {
    color: #cc0000;
    font-size: calc(24*(100vw/750));
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.01em;
    padding: calc(23*(100vw/750)) calc(24*(100vw/750)) 0 calc(24*(100vw/750));
}
#studioDetail .information .more {
    display: block;
    width: calc(130*(100vw/750));
    margin: auto;
    padding: 0 0 calc(48*(100vw/750)) 0
}

/* price */
#studioDetail .price {
    padding-top: calc(165*(100vw/750));
}
#studioDetail .price .title {
    width: calc(190*(100vw/750));
    margin-inline: auto;
    margin-bottom: calc(3*(100vw/750));
}
#studioDetail .price .slideWrap {
    overflow-x: scroll;
}
#studioDetail .price .slide {
    width: fit-content;
    display: flex;
    padding-left: calc(12*(100vw/750));
}
#studioDetail .price .slide li {
    display: grid;
    align-items: flex-end;
    width: calc(302*(100vw/750));
}
#studioDetail .price .slide li .recommend {
    width: calc(170*(100vw/750));
    margin-inline: auto;
}
#studioDetail .price .attention {
    width: calc(640*(100vw/750));
    margin-inline: auto;
    font-size: calc(18*(100vw/750));
    font-weight: bold;
    color: #666;
    margin-top: calc(-12 * (100vw / 750));
}

/* topics */
#studioDetail .topics {
    width: calc(650*(100vw/750));
    height: calc(1048*(100vw/750));
    margin-inline: auto;
    margin-top: calc(130*(100vw/750));
    margin-bottom: calc(104 * (100vw / 750));
    padding-top: calc(70*(100vw/750));
    background-image: url(../img/top/topics__bg.png);
    background-size: contain;
}
#studioDetail .topics .title {
    width: calc(230*(100vw/750));
    margin-inline: auto;
    margin-bottom: calc(35*(100vw/750));
}
#studioDetail .topics__list {
    width: calc(550*(100vw/750));
    margin-inline: auto;
    display: grid;
    gap: calc(45*(100vw/750));
    margin-bottom: calc(50*(100vw/750));
}
#studioDetail .topics__list--content a {
    display: flex;
    gap: calc(10*(100vw/750));
    background-color: #d61a18;
    padding: calc(35*(100vw/750)) calc(15*(100vw/750)) calc(35*(100vw/750)) calc(10*(100vw/750));
    border-radius: calc(30*(100vw/750));
    box-shadow: 0 0 calc(30*(100vw/750)) 0 rgba(0, 0, 0, 0.4);
}
#studioDetail .topics__list--content .date {
    width: calc(180*(100vw/750));
    height: calc(40*(100vw/750));
    background-color: #fff;
    border-radius: 100vh;
    display: grid;
    place-content: center;
    font-family: serifa, serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc(20*(100vw/750));
    font-weight: bold;
    line-height: 1;
    color: #d61a18;
}
#studioDetail .topics__list--content .text {
    width: calc(330*(100vw/750));
    font-size: calc(24*(100vw/750));
    text-decoration: underline;
    line-height: 1.75;
    color: white;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}
#studioDetail .topics .more {
    display: block;
    width: calc(130*(100vw/750));
    margin-inline: auto;
}

/* bannerArea */
#studioDetail .bannerArea {
    width: calc(650*(100vw/750));
    margin: 0 auto calc(100*(100vw/750)) auto;
}
#studioDetail .bannerArea .banner {
    margin: 0 0 calc(50*(100vw/750)) 0;
}

@media screen and (min-width: 1024px) {
    #studioDetail {
        padding: 20px 0 0 0;
    }

    /* firstContent */
    #studioDetail .firstContent {
        width: 325px;
    }
    #studioDetail .firstContent .title {
        padding: 18px 0 24.5px 0;
    }
    #studioDetail .firstContent .title .ja {
        font-size: 12px;
    }
    #studioDetail .firstContent .title .en {
        font-size: 30px;
    }
    #studioDetail .firstContent .mv {
        margin: 0 0 6.5px 0;
    }
    #studioDetail .firstContent .image {
        margin: 0 0 10px 0;
    }
    #studioDetail .firstContent .noteWrap .note {
        font-size: 9px;
    }
    #studioDetail .cta {
        margin: -22px auto -83px auto;
    }
    #studioDetail .cta.cta2 {
        margin: -8.5px auto 18px auto;
    }
    #studioDetail .cta.cta3 {
        margin: 8px auto -42.5px auto;
    }
    #studioDetail .cta .attention {
        font-size: 12px;
        bottom: 17.5px;
    }

    /* bg */
    #studioDetail .bg {
        background-size: 20px 9px;
    }

    /* flow */
    #studioDetail .flow {
        height: calc(534.5px * 4);
        margin: 0 0 10px 0;
    }
    #studioDetail .flowBox {
        height: 534.5px;
        padding-top: 75.5px;
    }
    #studioDetail .flow .inner {
        width: 325px;
        height: 459px;
    }
    #studioDetail .flow .title {
        padding-top: 32.5px;
        margin-bottom: 25px;
    }
    #studioDetail .flow .stepImageWrap {
        width: 275px;
        margin-bottom: 10px;
    }
    #studioDetail .flow .stepButtonWrap {
        gap: 40px;
    }
    #studioDetail .flow .stepButtonWrap li {
        width: 40px;
        height: 40px;
    }
    /* ボタンの見た目切り替え */
    #studioDetail .flow .textWrap .step01Text .head {
        margin-top: 15px;
    }
    #studioDetail .flow .textWrap .head {
        font-size: 16px;
        margin-top: 5px;
    }
    #studioDetail .flow .textWrap .head span {
        font-size: 10px;
    }
    #studioDetail .flow .textWrap .attention {
        font-size: 9px;
        margin-top: 2.5px;
    }
    #studioDetail .flow .textWrap .text {
        font-size: 12px;
        margin-top: 10px;
    }

    /* view */
    #studioDetail .view .view__swiper {
        margin: 85.5px 0 50px 0;
    }
    #studioDetail .view .swiper-slide img {
        padding-right: 12.5px;
    }

    /* information */
    #studioDetail .information {
        width: 325px;
        margin: 320px auto 0 auto;
        border: 4px solid #d61a18;
        border-radius: 26px;
    }
    #studioDetail .information .block {
        width: 275px;
    }
    #studioDetail .information .title {
        padding: 27px 0 13px 0;
    }
    #studioDetail .information .map {
        margin: 0 0 14px 0;
    }
    #studioDetail .information .map iframe {
        border: 4px solid #d61a18 !important;
        border-radius: 26px;
    }
    #studioDetail .information .address {
        font-size: 12px;
        margin: 0 0 16.5px 0;
        padding: 0 13.5px;
    }
    #studioDetail .information .week {
        margin: 0 0 24px 0;
    }
    #studioDetail .information .week .table .cell .day {
        flex-basis: 35px;
        font-size: 12px;
    }
    #studioDetail .information .week .table .cell .time {
        flex-basis: 235px;
        font-size: 12px;
    }
    #studioDetail .information .week .note {
        font-size: 12px;
        padding: 11.5px 12px 0 12px;
    }

    /* price */
    #studioDetail .price {
        padding-top: 82.5px;
    }
    #studioDetail .price .title {
        width: 95px;
        margin-bottom: 10px;
    }
    #studioDetail .price .slide {
        padding-left: 20px;
    }
    #studioDetail .price .slide li {
        width: 151px;
    }
    #studioDetail .price .slide li .recommend {
        width: 85px;
    }
    #studioDetail .price .attention {
        width: 320px;
        font-size: 9px;
        margin-top: 0;
    }

    /* topics */
    #studioDetail .topics {
        width: 325px;
        height: 524px;
        margin-top: 65px;
        margin-bottom: 52px;
        padding-top: 35px;
    }
    #studioDetail .topics .title {
        width: 115px;
        margin-bottom: 17.5px;
    }
    #studioDetail .topics__list {
        width: 275px;
        gap: 22.5px;
        margin-bottom: 25px;
    }
    #studioDetail .topics__list--content a {
        gap: 5px;
        padding: 17.5px 7.5px 17.5px 5px;
        border-radius: 15px;
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    }
    #studioDetail .topics__list--content .date {
        width: 90px;
        height: 20px;
        font-size: 10px;
    }
    #studioDetail .topics__list--content .text {
        width: 165px;
        font-size: 12px;
    }
    #studioDetail .topics .more {
        width: 65px;
    }

    /* bannerArea */
    #studioDetail .bannerArea {
        width: 325px;
        margin: 0 auto 50px auto;
    }
    #studioDetail .bannerArea .banner {
        margin: 0 0 25px 0;
    }
}

/* -------------------------------------------- *
 * topics
 * -------------------------------------------- */
#topics .titleWrap .title {
    width: calc(231*(100vw/750));
    margin: auto;
    padding: calc(36*(100vw/750)) 0 calc(69*(100vw/750)) 0;
}
#topics .topics__list {
    width: calc(550*(100vw/750));
    margin-inline: auto;
    display: grid;
    gap: calc(45*(100vw/750));
    padding-bottom: calc(129*(100vw/750));
}
#topics .topics__list--content a {
    display: flex;
    gap: calc(10*(100vw/750));
    background-color: #d61a18;
    padding: calc(36*(100vw/750)) calc(15*(100vw/750)) calc(38*(100vw/750)) calc(15*(100vw/750));
    border-radius: calc(30*(100vw/750));
    box-shadow: 0 0 calc(30*(100vw/750)) 0 rgba(0, 0, 0, 0.4);
}
#topics .topics__list--content .date {
    width: calc(180*(100vw/750));
    height: calc(40*(100vw/750));
    background-color: #fff;
    border-radius: 100vh;
    display: grid;
    place-content: center;
    font-family: serifa, serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc(20*(100vw/750));
    font-weight: bold;
    line-height: 1;
    color: #d61a18;
}
#topics .topics__list--content .text {
    width: calc(330*(100vw/750));
    font-size: calc(24*(100vw/750));
    text-decoration: underline;
    line-height: 1.75;
    color: white;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}
@media screen and (min-width: 1024px) {
    #topics {
        padding: 20px 0 0 0;
    }
    #topics .titleWrap .title {
        width: 115px;
        padding: 7px 0 14.5px 0;
    }
    #topics .topics__list {
        width: 275px;
        gap: 22.5px;
        padding-bottom: 64.5px;
    }
    #topics .topics__list--content a {
        gap: 5px;
        padding: 17.5px 7.5px 17.5px 5px;
        border-radius: 15px;
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    }
    #topics .topics__list--content .date {
        width: 90px;
        height: 20px;
        font-size: 10px;
    }
    #topics .topics__list--content .text {
        width: 165px;
        font-size: 12px;
    }
}

/* -------------------------------------------- *
 * pagingArea
 * -------------------------------------------- */
.pagingArea {
    padding: 0 0 calc(104*(100vw/750)) 0;
}
.pagingArea .navigation {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagingArea .navigation .nav-links {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(19*(100vw/750));
}
.pagingArea .navigation .nav-links .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(60*(100vw/750));
    height: calc(60*(100vw/750));
    color: #ffffff;
    font-family: serifa, serif;
    font-size: calc(32*(100vw/750));
    line-height: 1;
    font-weight: 700;
    font-style: italic;
    background-color: #666666;
    padding: 0 0.2em 0 0;
    border-radius: 50%;
}
.pagingArea .navigation .nav-links .page-numbers.current {
    background-color: #d61a18;
}
.pagingArea .navigation .nav-links .page-numbers.dots {
    width: calc(40 * (100vw / 750));
    color: #666666;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    background-color: transparent;
    border: 0;
}
.pagingArea .navigation .nav-links .page-numbers.prev,
.pagingArea .navigation .nav-links .page-numbers.next {
    width: calc(50*(100vw/750));
    text-indent: -9999em;
    background-color: transparent;
    border: 0;
}
.pagingArea .navigation .nav-links .page-numbers.prev:after,
.pagingArea .navigation .nav-links .page-numbers.next:after {
    content: "";
    display: block;
    width: calc(12.5*(100vw/750));
    height: calc(12.5*(100vw/750));
    border-top: 2px solid #666666;
    border-right: 2px solid #666666;
    transform: translateX(3px) rotate(-135deg);
}
.pagingArea .navigation .nav-links .page-numbers.next:after {
    transform: translateX(-3px) rotate(45deg);
}
@media screen and (min-width: 1024px) {
    .pagingArea {
        padding: 0 0 52px 0;
    }
    .pagingArea .navigation .nav-links {
        gap: 9.5px;
    }
    .pagingArea .navigation .nav-links .page-numbers {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    .pagingArea .navigation .nav-links .page-numbers.dots {
        width: 20px;
    }
    .pagingArea .navigation .nav-links .page-numbers.prev,
    .pagingArea .navigation .nav-links .page-numbers.next {
        width: 25px;
    }
    .pagingArea .navigation .nav-links .page-numbers.prev:after,
    .pagingArea .navigation .nav-links .page-numbers.next:after {
        width: 6.25px;
        height: 6.25px;
    }
}

/* -------------------------------------------- *
 * topicsDetail
 * -------------------------------------------- */
#topicsDetail .breadcrumb {
    display: flex;
    width: calc(650*(100vw/750));
    margin: 0 auto calc(55*(100vw/750)) auto;
}
#topicsDetail .breadcrumb p {
    display: flex;
    color: #d61a18;
    font-size: calc(26*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    margin-right: calc(25 * (100vw / 750));
}
#topicsDetail .breadcrumb p:first-child {
    flex-shrink: 0;
    font-family: serifa, serif;
}
#topicsDetail .breadcrumb p:last-child {
    margin-right: 0;
}
#topicsDetail .breadcrumb p:after {
    content: "";
    display: block;
    width: calc(12.5*(100vw/750));
    height: calc(12.5*(100vw/750));
    margin: calc(12.5 * (100vw / 750));
    border-top: 2px solid #d61a18;
    border-right: 2px solid #d61a18;
    transform: translateX(3px) rotate(45deg);
}
#topicsDetail .breadcrumb p:last-child:after{
    display: none;
}
#topicsDetail .box {
    width: calc(650*(100vw/750));
    margin: auto;
    background-color: #ffffff;
    padding: calc(50*(100vw/750));
    border-radius: 15px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
}
#topicsDetail .articleHeader {
    margin: 0 0 calc(47*(100vw/750)) 0;
}
#topicsDetail .articleHeader .date {
    color: #d61a18;
    font-family: serifa, serif;
    font-size: calc(20*(100vw/750));
    line-height: 1;
    font-weight: bold;
    margin: 0 0 calc(30 * (100vw / 750)) 0;
}
#topicsDetail .articleHeader .headline {
    color: #666666;
    font-size: calc(32*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
}
#topicsDetail .articleBody {
    color: #666666;
    font-size: calc(24*(100vw/750));
    line-height: 1.75;
}
#topicsDetail .articleBody h2 {
    font-size: calc(28*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: calc(42*(100vw/750));
}
#topicsDetail .articleBody h3 {
    font-size: calc(26*(100vw/750));
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: calc(42*(100vw/750));
}
#topicsDetail .articleBody p {
    margin-bottom: calc(42*(100vw/750));
}
#topicsDetail .articleBody a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
#topicsDetail .articleBody ul{
    margin-bottom: calc(42*(100vw/750));
}
#topicsDetail .articleBody ul li {
    text-indent: -1em;
    padding: 0 0 0 1em;
}
#topicsDetail .articleBody ul li:before {
    content: "・";
    display: inline-block;
    width: 1em;
    text-indent: 0;
    padding: 0;
}
#topicsDetail .articleBody ol {
    counter-reset: item;
    margin-bottom: calc(42*(100vw/750));
}
#topicsDetail .articleBody ol li {
    text-indent: -1.5em;
    padding: 0 0 0 1.5em;
}
#topicsDetail .articleBody ol li:before {
    content: "";
    display: inline-block;
    width: 1.5em;
    text-indent: 0;
    padding: 0;
    counter-increment: item;
    content: counter(item) ".";
}
#topicsDetail .articleBody  {
}
#topicsDetail .articleBody .wp-block-image,
#topicsDetail .articleBody .wp-block-file {
    margin: calc(20*(100vw/750)) 0;
}
#topicsDetail .buttonArea {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(130*(100vw/750)) 0 calc(139*(100vw/750)) 0;
}
#topicsDetail .buttonArea .back {
    color: #d61a18;
    font-family: serifa, serif;
    font-size: calc(30*(100vw/750));
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 0 calc(102*(100vw/750));
}
#topicsDetail .buttonArea .prev a,
#topicsDetail .buttonArea .next a {
    display: block;
}
#topicsDetail .buttonArea .prev a:after,
#topicsDetail .buttonArea .next a:after {
    content: "";
    display: block;
    width: calc(15*(100vw/750));
    height: calc(15*(100vw/750));
    border-top: 2px solid #666666;
    border-right: 2px solid #666666;
    transform: translateX(3px) rotate(-135deg);
}
#topicsDetail .buttonArea .next a:after {
    transform: translateX(-3px) rotate(45deg);
}
@media screen and (min-width: 1024px) {
    #topicsDetail {
        padding: 20px 0 0 0;
    }
    #topicsDetail .breadcrumb {
        width: 325px;
        margin: 0 auto 27.5px auto;
    }
    #topicsDetail .breadcrumb p {
        font-size: 13px;
        margin-right: 12.5px;
    }
    #topicsDetail .breadcrumb p:last-child {
        margin-right: 0;
    }
    #topicsDetail .breadcrumb p:after {
        width: 6.25px;
        height: 6.25px;
        margin: 6.25px;
    }
    #topicsDetail .box {
        width: 325px;
        padding: 25px;
        border-radius: 15px;
    }
    #topicsDetail .articleHeader {
        margin: 0 0 23.5px 0;
    }
    #topicsDetail .articleHeader .date {
        font-size: 10px;
        margin: 0 0 15px 0;
    }
    #topicsDetail .articleHeader .headline {
        font-size: 16px;
    }
    #topicsDetail .articleBody {
        font-size: 12px;
    }
    #topicsDetail .articleBody h2 {
        font-size: 14px;
        margin-bottom: 21px;
    }
    #topicsDetail .articleBody h3 {
        font-size: 13px;
        margin-bottom: 21px;
    }
    #topicsDetail .articleBody p {
        margin-bottom: 21px;
    }
    #topicsDetail .articleBody ul,
    #topicsDetail .articleBody ol {
        margin-bottom: 21px;
    }
    #topicsDetail .articleBody .wp-block-image,
    #topicsDetail .articleBody .wp-block-file {
        margin: 10px 0;
    }
    #topicsDetail .buttonArea {
        padding: 65px 0 69.5px 0;
    }
    #topicsDetail .buttonArea .back {
        font-size: 15px;
        padding: 0 51px;
    }
    #topicsDetail .buttonArea .prev a:after,
    #topicsDetail .buttonArea .next a:after {
        width: 7.5px;
        height: 7.5px;
    }
}

/* -------------------------------------------- *
 * layoutType01
 * -------------------------------------------- */
.layoutType01 {
    overflow: hidden;
}
.layoutType01 .titleWrap .title {
    width: calc(530.5*(100vw/750));
    margin: auto;
    padding: calc(36*(100vw/750)) 0 calc(60*(100vw/750)) 0;
}
.layoutType01#term .titleWrap .title {
    width: calc(426.5*(100vw/750));
}
.layoutType01 .box {
    width: calc(650*(100vw/750));
    margin: 0 auto calc(126*(100vw/750)) auto;
    color: #666666;
    font-size: calc(24*(100vw/750));
    line-height: 1.75;
    background-color: #ffffff;
    padding: calc(50*(100vw/750));
    border-radius: 15px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
}
.layoutType01 .box h2,
.layoutType01 .box h3,
.layoutType01 .box h4 {
    font-weight: bold;
}
.layoutType01 .box h3 {
    margin-top: calc(42*(100vw/750));
}
.layoutType01 .box .date {
    margin-top: calc(42*(100vw/750));
    margin-bottom: calc(42*(100vw/750));
}
.layoutType01 .box .buttonArea {
    text-align: center;
    padding: calc(42*(100vw/750)) 0 0 0;
}
@media screen and (min-width: 1024px) {
    .layoutType01 {
        padding: 20px 0 0 0;
    }
    .layoutType01 .titleWrap .title {
        width: 265.25px;
        padding: 18px 0 30px 0;
    }
    .layoutType01#term .titleWrap .title {
        width: 213.25px;
    }
    .layoutType01 .box {
        width: 325px;
        margin: 0 auto 63px auto;
        font-size: 12px;
        padding: 25px;
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
    }
    .layoutType01 .box h3 {
        margin-top: 21px;
    }
    .layoutType01 .box .date {
        margin-top: 21px;
        margin-bottom: 21px;
    }
    .layoutType01 .box .buttonArea {
        padding: 21px 0 0 0;
    }
}

/* -------------------------------------------- *
 * price
 * -------------------------------------------- */
#price {
    padding: 0 0 calc(54*(100vw/750)) 0;
}
#price .titleWrap .title {
    padding: calc(36 * (100vw / 750)) 0 calc(96 * (100vw / 750)) 0;
}

/* block */
#price .block {
    margin-bottom: calc(89*(100vw/750));
}
#price .block .title {
    margin-bottom: calc(6*(100vw/750));
}
#price .block .note {
    width: calc(650*(100vw/750));
    color: #666666;
    font-size: calc(18*(100vw/750));
    font-weight: bold;
    margin: 0 auto calc(3*(100vw/750)) auto;
}

/* monthly */
#price .monthly {
    margin-bottom: calc(89*(100vw/750));
}
#price .monthly .title {
    margin-bottom: calc(29*(100vw/750));
}
#price .monthly .slideWrap {
    overflow-x: scroll;
}
#price .monthly .slide {
    width: fit-content;
    display: flex;
    padding-left: calc(12*(100vw/750));
}
#price .monthly .slide li {
    display: grid;
    align-items: flex-end;
    width: calc(302*(100vw/750));
}
#price .monthly .slide li .recommend {
    width: calc(170*(100vw/750));
    margin-inline: auto;
}
#price .monthly .attention {
    width: calc(640*(100vw/750));
    margin-inline: auto;
    font-size: calc(18*(100vw/750));
    font-weight: bold;
    color: #666;
}

/* other */
#price .other {
    margin-bottom: calc(6*(100vw/750));
}
#price .other .list {
    margin-bottom: calc(30*(100vw/750));
}
#price .other .list .item {
    margin-bottom: calc(-32*(100vw/750));
}
#price .other .noteWrap {
    width: calc(650*(100vw/750));
    margin: 0 auto;
}
#price .other .noteWrap .note {
    color: #666666;
    font-size: calc(18*(100vw/750));
    line-height: 2;
    font-weight: bold;
}

/* cta */
#price .cta {
    position: relative;
}
#price .cta .attention {
    position: absolute;
    color: #666666;
    font-size: calc(24*(100vw/750));
    letter-spacing: 0.025em;
    font-weight: bold;
    bottom: calc(29*(100vw/750));
    left: 50%;
    translate: -50% 0;
}
@media screen and (min-width: 1024px) {
    #price {
        padding: 20px 0 27px 0;
    }
    #price .titleWrap .title {
        padding: 18px 0 48px 0;
    }

    /* block */
    #price .block {
        margin-bottom: 44.5px;
    }
    #price .block .title {
        margin-bottom: 3px;
    }
    #price .block .note {
        width: 325px;
        font-size: 9px;
        margin: 0 auto 1.5px auto;
    }

    /* monthly */
    #price .monthly {
        margin-bottom: 44.5px;
    }
    #price .monthly .title {
        margin-bottom: 14.5px;
    }
    #price .monthly .slide {
        padding-left: 6px;
    }
    #price .monthly .slide li {
        width: 151px;
    }
    #price .monthly .slide li .recommend {
        width: 85px;
    }
    #price .monthly .attention {
        width: 320px;
        font-size: 9px;
    }

    /* other */
    #price .other {
        margin-bottom: 3px;
    }
    #price .other .list {
        margin-bottom: 15px;
    }
    #price .other .list .item {
        margin-bottom: -16px;
    }
    #price .other .noteWrap {
        width: 325px;
    }
    #price .other .noteWrap .note {
        font-size: 9px;
    }

    /* cta */
    #price .cta .attention {
        font-size: 12px;
        bottom: 14.5px;
    }
}