/* --------------------------------------------------------------------------
  Common Update
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .main-sec .l-page-block + .l-page-block {
        margin-top: calc(60 / var(--font-size) * 1rem);
    }
    .main-sec .l-page-sec__content + .l-page-sec__content {
        margin-top: calc(80 / var(--font-size) * 1rem);
    }
    .pager-card-heading-category {
        display: none;
    }
}
@media all and (max-width: 767px) {
    .main-sec .l-page-block + .l-page-block {
        margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .main-sec .l-page-sec__content + .l-page-sec__content {
        margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .pager-card-heading-category {
        display: none;
    }
}

/* --------------------------------------------------------------------------
  Page Update
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    [data-page="sonae-house"] .intro-read__in {
        padding-inline: calc(46 / var(--font-size) * 1rem);
    }
}


/* --------------------------------------------------------------------------
  Hero
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .column-hero {
        background: url("/assets/img/column/detail/bg_hero.png") no-repeat center / calc(2560 / var(--font-size) * 1rem);
        overflow: hidden;
        min-height: calc(391 / var(--font-size) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .column-hero__in {
        max-width: calc(1064 / var(--font-size) * 1rem);
        width: 100%;
        margin: auto;
        padding: 0 calc(20 / var(--font-size) * 1rem);
        display: block;
        padding-block: calc(50 / var(--font-size) * 1rem) calc(142 / var(--font-size) * 1rem);
    }
    .column-hero__header {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: calc(20 / var(--font-size) * 1rem);
    }
    .column-hero-ttl {
        font-size: calc(37 / var(--font-size) * 1rem);
    }
    .column-hero-ttl__label {
        color: var(--white-color);
        font-family: var(--font-noto);
        font-weight: bold;
    }
    .column-hero-sub {
        flex-shrink: 0;
        margin-top: calc(5 / var(--font-size) * 1rem);
    }
    .column-hero-sub__in {
        display: flex;
        align-items: center;
        gap: calc(49 / var(--font-size) * 1rem);
    }
    .column-hero-date {
        font-size: calc(18 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .column-hero-date__label {
        color: var(--white-color);
        font-weight: 500;
    }
    .column-hero-cat {
        background: var(--lightblue-color-80);
        border-radius: 9999px;
        padding: calc(4 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
        min-width: calc(81 / var(--font-size) * 1rem);
        min-height: calc(30 / var(--font-size) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .column-hero-cat__label {
        color: var(--white-color);
        font-size: calc(14 / var(--font-size) * 1rem);
        font-weight: bold;
    }
}
@media all and (max-width: 767px) {
    .column-hero {
        background: url("/assets/img/column/detail/bg_hero_sp.png") no-repeat center / cover;
        overflow: hidden;
        min-height: calc(243 / var(--font-size) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .column-hero__in {
        padding: 0 calc(20 / var(--font-size) * 1rem);
        display: block;
        padding-block: calc(43 / var(--font-size) * 1rem) calc(101 / var(--font-size) * 1rem);
    }
    .column-hero__header {
        display: flex;
        flex-direction: column-reverse;
        gap: calc(8 / var(--font-size) * 1rem);
    }
    .column-hero-ttl {
        font-size: calc(24 / var(--font-size) * 1rem);
        line-height: calc(35/24);
        text-align: center;
    }
    .column-hero-ttl__label {
        color: var(--white-color);
        font-family: var(--font-noto);
        font-weight: bold;
    }
    .column-hero-sub {
        flex-shrink: 0;
        margin-top: calc(5 / var(--font-size) * 1rem);
        width: calc(240 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
    .column-hero-sub__in {
        display: flex;
        align-items: center;
        gap: calc(7 / var(--font-size) * 1rem);
    }
    .column-hero-date {
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .column-hero-date__label {
        color: var(--white-color);
        font-weight: 500;
    }
    .column-hero-cat {
        background: var(--lightblue-color-80);
        border-radius: 9999px;
        padding: calc(4 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
        min-width: calc(50 / var(--font-size) * 1rem);
        min-height: calc(16 / var(--font-size) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .column-hero-cat__label {
        color: var(--white-color);
        font-size: calc(10 / var(--font-size) * 1rem);
        font-weight: bold;
    }
}

/* --------------------------------------------------------------------------
  Intro
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .intro-sec {
    }
    .intro-sec:has(.intro-mv) {
        margin-top: calc(-142 / var(--font-size) * 1rem);
    }
    .intro-sec__in {
    }
    .intro-sec__body {
    }
    .intro-mv {
    }
    .intro-mv-thumb {
    }
    .intro-mv-thumb-img {
        border-radius: calc(20 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .intro-read {
        background: var(--yellow-color-10);
        margin-top: calc(40 / var(--font-size) * 1rem);
        border-radius: calc(20 / var(--font-size) * 1rem);
    }
    .intro-read__in {
        padding: calc(51 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
    }
    .intro-read-txt {
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .intro-read-txt__label {
        color: var(--main-color-100);
        font-weight: bold;
    }
    .intro-read-txt__label + .intro-read-txt__label {
        margin-top: 1em;
    }
}
@media all and (max-width: 767px) {
    .intro-sec {
    }
    .intro-sec:has(.intro-mv) {
        margin-top: calc(-71 / var(--font-size) * 1rem);
    }
    .intro-sec__in {
    }
    .intro-sec__body {
        padding-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .intro-mv {
    }
    .intro-mv-thumb {
    }
    .intro-mv-thumb-img {
        border-radius: calc(10 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .intro-read {
        background: var(--yellow-color-10);
        margin-top: calc(20 / var(--font-size) * 1rem);
        border-radius: calc(20 / var(--font-size) * 1rem);
        margin-inline: calc(5 / var(--font-size) * 1rem);
    }
    .intro-read__in {
        padding: calc(32 / var(--font-size) * 1rem);
    }
    .intro-read-txt {
        text-align: center;
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .intro-read-txt__label {
        color: var(--main-color-100);
        font-weight: bold;
        letter-spacing: calc(5 / 100 * 1em);
    }
    .intro-read-txt__label + .intro-read-txt__label {
        margin-top: 1em;
    }
}

/* --------------------------------------------------------------------------
  Main
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .main-sec,
    .main-sec.sec-bg__wavy::before {
        background: var(--blightblue-color);
    }
    .main-sec__in {
        max-width: calc(892 / var(--font-size) * 1rem);
    }
    .main-sec__body {
    }
    .column-header {
        margin-bottom: calc(36 / var(--font-size) * 1rem);
    }
    .column-header__in {
        background: var(--white-color);
        color: var(--main-color-100);
        border-radius: calc(8 / var(--font-size) * 1rem);
        padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
        display: flex;
        justify-content: start;
        align-items: start;
    }
    .column-header__num {
        font-family: var(--font-family-josefin);
        font-size: calc(40 / var(--font-size) * 1rem);
        font-weight: 600;
        line-height: 1;
        display: block;
        margin-right: calc(12 / var(--font-size) * 1rem);
        margin-top: calc(2 / var(--font-size) * 1rem);
        letter-spacing: calc(6 / 100 * 1em);
        flex-shrink: 0;
    }
    .column-header__label {
        font-family: var(--font-family-zen-antique);
        font-size: calc(26 / var(--font-size) * 1rem);
        line-height: 1.5;
        display: block;
    }

    .main-content-item + .main-content-item {
        margin-top: calc(20 / var(--font-size) * 1rem);
    }
    .main-content-item:has(.main-content-thumb-note) + .main-content-item {
        margin-top: calc(11 / var(--font-size) * 1rem);
    }
    .main-content-item--read {
    }
    .main-content-item--read > * + *:not(.c-note) {
        margin-top: 1em;
    }
    .main-content-thumb {
    }
    .main-content-thumb-img {
        border-radius: calc(10 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .main-content-thumb--border .main-content-thumb-img {
        border: solid calc(3 / var(--font-size) * 1rem) var(--main-color-100);
    }
    .main-content-thumb__container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(10 / var(--font-size) * 1rem);
    }
    .main-content-item--thumb {
    }
    .main-content-item--thumb:not(:has(.main-content-thumb:nth-child(2),.main-content-thumb--l)) {
        max-width: calc((492 + (55 * 2)) / var(--font-size) * 1rem);
        padding-inline: calc(55 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
    .main-content-item--thumb:has(.main-content-thumb:nth-child(2)) .main-content-thumb {
        width: calc((100% - (10 / var(--font-size) * 1rem)) / 2);
    }
    .main-content-item--thumb:has(.main-content-thumb--l) {
        padding-inline: calc(55 / var(--font-size) * 1rem);
    }
    .main-content-thumb--l {
        max-width: 100%;
    }
    .main-content-thumb-note {
        text-align: end;
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.8;
        margin-top: calc(8 / var(--font-size) * 1rem);
    }
    .main-content-thumb-note__label {
        color: var(--gray-color-80);
        font-weight: 500;
    }
}
@media all and (max-width: 767px) {
    .main-sec,
    .main-sec.sec-bg__wavy::before {
        background: var(--blightblue-color);
    }
    .main-sec__in {
        max-width: calc(892 / var(--font-size) * 1rem);
    }
    .main-sec__body {
    }
    .column-header {
        margin-bottom: calc(20 / var(--font-size) * 1rem);
    }
    .column-header__in {
        background: var(--white-color);
        color: var(--main-color-100);
        border-radius: calc(8 / var(--font-size) * 1rem);
        padding: calc(14 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
        display: flex;
        justify-content: start;
        align-items: start;
    }
    .column-header__num {
        font-family: var(--font-family-josefin);
        font-size: calc(32 / var(--font-size) * 1rem);
        font-weight: 600;
        line-height: 1;
        display: block;
        margin-right: calc(8 / var(--font-size) * 1rem);
        margin-top: calc(2 / var(--font-size) * 1rem);
        letter-spacing: calc(6 / 100 * 1em);
        flex-shrink: 0;
    }
    .column-header__label {
        font-family: var(--font-family-zen-antique);
        font-size: calc(20 / var(--font-size) * 1rem);
        line-height: 1.5;
        display: block;
    }

    .main-content-item + .main-content-item {
        margin-top: calc(20 / var(--font-size) * 1rem);
    }
    .main-content-item:has(.main-content-thumb-note) + .main-content-item {
        margin-top: calc(11 / var(--font-size) * 1rem);
    }
    .main-content-item--read {
    }
    .main-content-item--read > * + *:not(.c-note) {
        margin-top: 1em;
    }
    .main-content-thumb {
    }
    .main-content-thumb-img {
        border-radius: calc(10 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .main-content-thumb--border .main-content-thumb-img {
        border: solid calc(2 / var(--font-size) * 1rem) var(--main-color-100);
    }
    .main-content-thumb__container {
        display: flex;
        flex-direction: column;
        gap: calc(10 / var(--font-size) * 1rem);
    }
    .main-content-item--thumb {
    }
    .main-content-thumb-note {
        text-align: end;
        font-size: calc(12 / var(--font-size) * 1rem);
        line-height: 1.8;
        margin-top: calc(4 / var(--font-size) * 1rem);
    }
    .main-content-thumb-note__label {
        color: var(--gray-color-80);
        font-weight: 500;
    }
}

/* --------------------------------------------------------------------------
  Other
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .other-sec__in {
        max-width: calc(1200 / var(--font-size) * 1rem);
    }
    .application-btn {
        width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
    .other-heading {
        font-size: calc(26 / var(--font-size) * 1rem);
        line-height: calc(48 / 26);
        margin-bottom: calc(19 / var(--font-size) * 1rem);

        max-width: calc(1024 / var(--font-size) * 1rem);
        padding-inline: calc(70 / var(--font-size) * 1rem);
    }
    .other-heading__in {
    }
    .other-heading__label {
        color: var(--main-color-100);
        font-family: var(--font-family-zen-antique);
        font-weight: bold;
        letter-spacing: calc(3.2 / 26 * 1em);
    }
    .top-btn {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
        margin-top: calc(90 / var(--font-size) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .application-btn {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
    .top-btn {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
        margin-top: calc(70 / var(--font-size) * 1rem);
    }
    .other-heading {
        font-size: calc(20 / var(--font-size) * 1rem);
        line-height: calc(29 / 20);
        margin-bottom: calc(20 / var(--font-size) * 1rem);
        max-width: calc(270 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
    .other-heading__in {
    }
    .other-heading__label {
        color: var(--main-color-100);
        font-family: var(--font-family-zen-antique);
        font-weight: bold;
        letter-spacing: calc(5 / 100 * 1em);
    }
}

@media all and (min-width: 768px), print {
    .column-pager-list__container {
        padding-inline: calc(70 / var(--font-size) * 1rem);
        position: relative;
        margin-left: calc(-15 / var(--font-size) * 1rem);
    }
    .column-pager-list-item {
        width: calc(319 / var(--font-size) * 1rem);
        transition: all .3s ease;
        margin-inline: calc(15 / var(--font-size) * 1rem);
    }
    .column-pager-list:not(:has(.column-pager-list-item:nth-child(4))) .column-pager-list-item {
        margin-inline: 0;
    }
    .column-pager-slide-controller .swiper-button-next,
    .column-pager-slide-controller .swiper-button-prev {
        width: calc(40 / var(--font-size) * 1rem);
        aspect-ratio: 1 / 1;
        transition: all .3s ease;
    }
    .column-pager-slide-controller .swiper-button-next:hover {
        transform: translateX(6px);
    }
    .column-pager-slide-controller .swiper-button-prev:hover {
        transform: translateX(-6px);
    }
    .column-pager-slide-controller .swiper-button-prev:after,
    .column-pager-slide-controller .swiper-button-next:after {
        content: "";
        background: url(/assets/img/common/ico_slide_arrow.svg) no-repeat center / contain;
        width: 100%;
        height: 100%;
    }
    .column-pager-slide-controller .swiper-button-prev:after {
        transform: rotate(180deg);
    }
}
@media all and (max-width: 767px) {
    .column-pager-list__container {
        position: relative;
    }
    .column-pager-list-content {
        margin-inline: calc(-50vw + 50%);
        padding-inline: calc(50vw - 50%);
    }
    .column-pager-list-item {
        width: calc(319 / var(--font-size) * 1rem);
        transition: all .3s ease;
        margin-inline: calc(15 / var(--font-size) * 1rem);
    }
    .column-pager-slide-controller .swiper-button-prev {
        left: 0;
    }
    .column-pager-slide-controller .swiper-button-next {
        right: 0;
    }
    .column-pager-slide-controller .swiper-button-next,
    .column-pager-slide-controller .swiper-button-prev {
        width: calc(40 / var(--font-size) * 1rem);
        aspect-ratio: 1 / 1;
    }
    .column-pager-slide-controller .swiper-button-prev:after,
    .column-pager-slide-controller .swiper-button-next:after {
        content: "";
        background: url(/assets/img/common/ico_slide_arrow.svg) no-repeat center / contain;
        width: 100%;
        height: 100%;
    }
    .column-pager-slide-controller .swiper-button-prev:after {
        transform: rotate(180deg);
    }
    .column-pager-list:not(:has(.column-pager-list-item:nth-child(4))) {
        justify-content: center;
    }
}
.column-pager-list__container {
}
.column-pager-list-content {
}
.column-pager-list {
    display: flex;
}
.column-pager-list-item {
    container-type: inline-size;
    --column-pager-list-item-w: 319;
    height: auto;
}
.column-pager-list:not(:has(.column-pager-list-item:nth-child(4))) {
    gap: calc(30 / var(--font-size) * 1rem);
}
.column-pager-list-item:hover {
    opacity: 0.7;
    transition: all .3s ease;
}
.column-pager-card {
    display: block;
    height: 100%;
}
.column-pager-card__in {
    background: var(--main-color-10);
    border-radius: calc(10 / var(--column-pager-list-item-w) * 100cqi);
    padding: 0 calc(12 / var(--column-pager-list-item-w) * 100cqi);
    height: 100%;
}
.column-pager-card__body {
    padding: calc(12 / var(--column-pager-list-item-w) * 100cqi) 0 calc(24 / var(--column-pager-list-item-w) * 100cqi);
    height: 100%;
}
.column-pager-card-heading {
    position: relative;
    border-radius: calc(10 / var(--column-pager-list-item-w) * 100cqi);
    overflow: hidden;
}

.column-pager-card-heading-date {
    position: absolute;
    bottom: 0;
    left: 0;
}
.column-pager-card-heading-date__in {
    display: inline-flex;
    align-items: center;
    background: var(--white-color);
    border-radius: 0 calc(10 / var(--column-pager-list-item-w) * 100cqi) 0 0;
    padding: calc(4 / var(--column-pager-list-item-w) * 100cqi) calc(8 / var(--column-pager-list-item-w) * 100cqi);
    min-height: calc(30 / var(--column-pager-list-item-w) * 100cqi);
}
.column-pager-card-heading-date__label {
    color: var(--main-color-100);
    font-size: calc(12 / var(--column-pager-list-item-w) * 100cqi);
    font-weight: bold;
    display: block;
    line-height: 1;
}
.column-pager-card-heading-category {
    position: absolute;
    z-index: 2;
    bottom: calc(6 / var(--column-pager-list-item-w) * 100cqi);
    right: calc(6 / var(--column-pager-list-item-w) * 100cqi);
}
.column-pager-card-heading-category__in {
    border-radius: calc(20 / var(--column-pager-list-item-w) * 100cqi);
    padding: calc(4 / var(--column-pager-list-item-w) * 100cqi) calc(16 / var(--column-pager-list-item-w) * 100cqi);
    min-height: calc(25 / var(--column-pager-list-item-w) * 100cqi);
    display: flex;
    justify-content: center;
    align-items: center;
}
.column-pager-card-heading-category__label {
    color: var(--white-color);
    font-size: calc(12 / var(--column-pager-list-item-w) * 100cqi);
    font-weight: bold;
    line-height: 1;
}
.column-pager-card-read {
    margin-top: calc(22 / var(--column-pager-list-item-w) * 100cqi);
}
.column-pager-card-read:has(.column-pager-card-name) {
    margin-top: calc(12 / var(--column-pager-list-item-w) * 100cqi);
}
.column-pager-card-name__label {
    font-size: calc(18 / var(--column-pager-list-item-w) * 100cqi);
    font-weight: bold;
    font-family: var(--font-family-zen-new);
    line-height: 1.3;
}
.column-pager-card-name + .column-pager-card-txt {
    margin-top: calc(8 / var(--column-pager-list-item-w) * 100cqi);
}
.column-pager-card-txt {
}
.column-pager-card-txt__label {
    font-size: calc(14 / var(--column-pager-list-item-w) * 100cqi);
    font-weight: bold;
    font-family: var(--font-family-zen-new);
    line-height: 1.3;
}
@media all and (max-width: 767px) {
    .column-pager-list-item {
    width: calc(270 / var(--font-size) * 1rem);
}
}