:root {
    --accent-teal: #2BC6A2;
    --accent-pink: #FBA0A0;
    --muted-gray: #514E4E;
    --neutral-gray: #CECECE;
    --accent-pink-soft: #FFBABB;
    --color-text: #1C1C1C;
    --color-cream: #FFF6C5;
    --color-light-green: #D2FBE2;
    --color-light-pink: #FFEBEB;
    --link-default-color: #4b8ddf;
    --container-max: 960px;
    --container-padding: clamp(0.9375rem, 2.5vw, 3rem);
    --main-nav-top: 0px;
}

/* utility classes
  - small, reusable helpers for layout and visibility
  - keep low specificity so they can be combined across components
*/
.pcOnly {
    display: none;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.alignItemsCenter {
    align-items: center;
}

.justifyBetween {
    justify-content: space-between;
}

.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mtMedium {
    margin-top: 20px;
}

.mtLarge {
    margin-top: 30px;
}

.visually-hidden{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}

@media print, screen and (min-width: 768px) {
    .pcOnly {
        display: block;
    }

    .spOnly {
        display: none;
    }

    .cluster {
        gap: 10px;
    }

    .mtMedium {
        margin-top: 30px;
    }

    .mtLarge {
        margin-top: 40px;
    }
}

/* elements
  - smallest, indivisible styles (e.g. buttons, form elements)
  - prefer component-scoped classes (e.g. .btnPrimary, .inputSearch)
*/

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 277px;
    margin: 30px auto 0 auto;
    padding: 10px 0;
    border-radius: 999px;
    cursor: pointer;
    background: #FAB725;
    box-shadow: 0px 5px 2px 0px rgba(127,133,111,0.30);
}

.buttonText {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.57;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.30);
}

.buttonIcon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.newWindowLink {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 10px;
    font-size: 0.938rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.newWindowLink::after {
    content: "";
    width: 14px;
    height: 11px;
    background: url("/column/common_2026/img/icon/icon_new_window_blue.svg") no-repeat right
        center;
    background-size: contain;
}

.backToTop {
    position: fixed;
    width: 50px;
    height: 50px;
    right: 12px;
    bottom: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.backToTop.show{
    opacity: 1;
    transform: none;
}

.imgWithBadge {
    position: relative;
    flex: 1 1 37.39%;
}

.numberBadge {
    position: absolute;
    left: 0;
    top: -12px;
}

.numberBadgeText {
    position: relative;
    padding: 0 15px;
    background: #fff6d9;
    color: #111;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    z-index: 0;
}

.numberBadgeText::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 16px;
    width: 26px;
    height: 15px;
    background: url("/column/common_2026/img/icon/icon_bubble_tail.svg") no-repeat;
    z-index: -1;
}

.readingTime {
    position: absolute;
    right: 0;
}

.readingTimeInner {
    display: grid;
    place-items: center;
}

.readingTimeIcon,
.readingTimeText {
    grid-column: 1/2;
    grid-row: 1/2;
}

.readingTimeIcon {
    width: 60px;
    height: 70px;
}

.readingTimeText {
    margin-top: 25px;
    text-align: center;
    font-size: 1.289rem;
    font-weight: 700;
    color: var(--color-text);
}

.mvImageWrap .readingTime {
    top: -28px;
}

.featuredLink .readingTime {
    bottom: -26px;
}

.featuredMetaCol .readingTime {
    position: static;
}

.featuredMetaCol .readingTimeIcon {
    width: 87px;
    height: 102px;
}

@media print, screen and (min-width: 768px) {
    .button {
        max-width: 400px;
        padding: 16px 0;
    }

    .buttonIcon {
        width: 10px;
    }

    .newWindowLink {
        padding: 5px;
    }

    .backToTop {
        right: 45px;
    }

    .imgWithBadge {
        padding: 12px 0 0 0;
    }

    .numberBadge {
        position: absolute;
        left: 0;
        top: 0;
    }

    .splide__slide .numberBadgeText {
        padding: 2px 24px;;
        border-radius: 10px;
        font-size: 1.5rem;
    }

    .splide__slide .numberBadgeText::after {
        bottom: -10px;
        right: 16px;
    }

    .readingTimeIcon {
        width: 76px;
        height: 89px;
    }

    .readingTimeText {
        margin-top: 30px;
        font-size: 1.875rem;
    }

    .mvImageWrap .readingTimeText {
        margin-top: 25px;
        font-size: 1.625rem;
    }
}

/* blocks modules / components
  - styles for individual UI modules and components
  - prefer component-scoped classes (e.g. .headerTop, .navBtn)
*/

/* layout
----------------------------------------------------------- */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.flexContainer {
    display: flex;
    flex-direction: column;
}

@media print, screen and (min-width: 768px) {
    .twoColumnNarrow {
        display: flex;
        gap: 30px;
    }

    .twoColumnNarrow > * {
        flex-basis: 100%;
    }
}

@media print, screen and (min-width: 960px) {
    .flexContainer {
        flex-direction: row;
    }

    .twoColumn {
        display: flex;
        gap: 60px;
    }

    .twoColumn .col {
        flex: 1 1 0;
        min-width: 0;
    }

    .twoColumn.gapSmall {
        gap: 30px;
    }
}

@media print, screen and (min-width: 1024px) {
    .container {
        padding: 0;
    }
}

/* header
----------------------------------------------------------- */
.header{ padding-top: var(--header-top-height, 75px); }

.headerTop {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9997;
    padding: 12px 16px;
    background-color: #78f0c8;
}

.headerTopInner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.logoArea {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logoLink {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.logoTagline {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    max-width: 180px;
    padding: 2px 10px;
    border-radius: 2px;
}

.logoTaglineSp {
    width: 162px;
    height: auto;
}

.logoTaglinePc {
    display: none;
}

.menuList {
    display: none;
}

.navBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #757575;
    background-color: #ffffff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 9998;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.navBtn .hamburger,
.navBtn .hamburger .bar {
    -webkit-transform-box: fill-box;
    transform-box: fill-box;
}

.navBtn .hamburger .bar {
    transform-origin: center;
    transform: translateY(0) rotate(0);
    transition: transform 320ms cubic-bezier(.22,.9,.33,1), opacity 200ms ease;
    will-change: transform, opacity;
}

.navBtn.open .hamburger .top {
    transform: translateY(20px) rotate(45deg);
}

.navBtn.open .hamburger .middle {
    opacity: 0;
    transition-delay: 0ms;
    transform: translateY(0) rotate(0);
}

.navBtn.open .hamburger .bottom {
    transform: translateY(-20px) rotate(-45deg);
}

.headerBottom {
    background-color: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(120, 139, 141, 0.15);
    padding: 10px 0;
}

.subMenuList {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.subMenuLink {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.subMenuLinkText {
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: #000000;
}

.headerBottomFormWrap {
    display: none;
}

.headerBottomForm {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    flex: 1 1 285px;
    max-width: 285px;
    border: 2px solid var(--accent-teal);
    border-radius: 10px;
    background: #FFFFFF;
}

.headerSearch {
    padding: 8px 12px 8px 12px;
    width: 100%;
    border-radius: 10px 0 0 10px;
}

.headerSearch::-webkit-input-placeholder {
    color: var(--neutral-gray);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 1;
}
.headerSearch::-moz-placeholder {
    color: var(--neutral-gray);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 1;
}
.headerSearch:-ms-input-placeholder {
    color: var(--neutral-gray);
    font-size: 0.875rem;
    font-weight: 500;
}
.headerSearch::-ms-input-placeholder {
    color: var(--neutral-gray);
    font-size: 0.875rem;
    font-weight: 500;
}
.headerSearch::placeholder {
    color: var(--neutral-gray);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 1;
}

.headerBottomForm .headerSearch.has-value {
    background:#FFFFFF;
    color:var(--color-text);
}
.headerBottomForm .headerSearch.submitted-empty::placeholder {
    color: var(--accent-pink);
}

.searchBtn{
    width: 36px; 
    height: auto;
    display:inline-block;
    background-image:url('/column/common_2026/img/icon/icon_search.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px 18px;
    border:0;
    background-color:transparent;
    cursor:pointer;
}

.searchBtn.has-value{
    background-color:#FFFFFF;
    background-image:url('/column/common_2026/img/icon/icon_search.svg');
}

.headerBottomForm.submitted-empty {
    border-color: var(--accent-pink);
}

.headerBottomForm .headerSearch.submitted-empty {
    background: var(--color-light-pink);
    color: var(--accent-pink);
}

.searchBtn.submitted-empty {
    background-color: var(--color-light-pink);
    background-image: url('/column/common_2026/img/icon/icon_search_pink.svg');
}

.headerBottomForm.fullWidth {
    max-width: 100%;
}

.closeWrap {
    margin-top: 16px;
    padding: 10px 0 0 0;
    border-top: 1px solid var(--neutral-gray);
}

.navCloseBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.938rem;
    font-weight: 700;
    color: #333333;
    cursor: pointer;
}

@media print, screen and (min-width: 375px) {
    .logoImage {
        max-width: 280px;
        height: auto;
    }

    .subMenuList {
        gap: 30px;
    }
}

@media print, screen and (min-width: 768px) {
    .header{ padding-top: var(--header-top-height, 79px); }

    .headerTop {
        box-shadow: 0px 3px 3px 0px rgba(120, 139, 141, 0.15);
    }

    .headerTopInner {
        justify-content: space-between;
        max-width: 1350px;
        width: 100%;
        margin: 0 auto;
    }

    .menuArea {
        display: flex;
        align-items: center;
        gap: 46px;
    }

    .menuArea {
        display: flex;
        align-items: center;
        gap: 46px;
    }

    .navBtn {
        width: 55px;
        height: 55px;
    }

    .navBtnBar {
        width: 30px;
        height: 6px;
    }

    .navBtn.open .navBtnBar:nth-child(1),
    .navBtn.open .navBtnBar:nth-child(3) {
        transform: rotate(45deg) translate(8px, 8px) scale(1.35);
    }
    .navBtn.open .navBtnBar:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px) scale(1.35);
    }

    .subMenuLink {
        flex-direction: row;
        gap: 8px;
    }

    .subMenuLinkText {
        margin-top: 0;
        font-size: 0.938rem;
    }

    .subMenuList {
        gap: 60px;
    }
}

@media print, screen and (min-width: 960px) {
    .logoImage {
        max-width: 400px;
        height: auto;
    }

    .logoLink {
        flex-direction: row;
        gap: 12px;
    }

    .logoTagline {
        max-width: 98px;
        height: auto;
        padding: 4px 8px;
    }

    .logoTaglineSp {
        display: none;
    }

    .logoTaglinePc {
        display: block;
        width: 98px;
        height: auto;
    }

    .headerBottomInner {
        max-width: 1115px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 128px;
    }

    .headerBottomFormWrap {
        display: block;
    }

    .subMenuLink {
        flex-direction: column;
    }
}

@media print, screen and (min-width: 1124px) {
    .subMenuLink {
        flex-direction: row;
    }
}

@media print, screen and (min-width: 1162px) {
    .menuList {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .menuLink {
        position: relative;
        padding-right: 20px;
        font-size: 0.875rem;
        color: var(--color-text);
        line-height: 1.7;
        letter-spacing: 0.04em;
    }

    .menuLink::after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        content: "";
        width: 15px;
        height: 12px;
        background: url("/column/common_2026/img/icon/icon_new_window.svg") no-repeat center;
    }
}

/* off-canvas main navigation
----------------------------------------------------------- */
.mainNav {
    position: fixed;
    top: var(--main-nav-top);
    left: 0;
    right: 0;
    /* height: calc(100vh - var(--main-nav-top));*/
    height: auto;
    max-height: calc(100vh - var(--main-nav-top));
    background: #ffffff;
    transform: translateY(-100%);
    transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 220ms ease;
    opacity: 0;
    z-index: 9996;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mainNav.open {
    transform: translateY(0);
    opacity: 1;
}

.mainNavInner {
    max-width: 960px;
    margin: 0 auto;
    padding: 15px;
}

.mainNavTtl {
    padding-left: 17px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.333;
    color: var(--color-text);
    border-left: 9px solid #4bccbe;
}

.categories {
    margin: 14px 0;
    padding: 0 15px 0 9px;
}

.categoryLink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.categoryLink::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: url("/column/common_2026/img/arrow/arrow_chevron_teal_r.svg") no-repeat right
        center;
}

.category {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--neutral-gray);
}

.categoryLinkText {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.pillsList {
    margin-top: 14px;
    padding: 0 10px;
}

.pill {
    display: block;
    padding: 8px 14px;
    background-color: #ffffff;
    border: 1px solid var(--color-text);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.newArticlesLink {
    display: block;
    margin-top: 16px;
    padding: 0 10px;
    border-top: 1px solid var(--neutral-gray);
    border-bottom: 1px solid var(--neutral-gray);
}

.newArticlesLinkTxt {
    position: relative;
    display: block;
    padding: 10px 40px 10px 0;
    font-size: 0.938rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--color-text);
}

.newArticlesLinkTxt::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: url("/column/common_2026/img/arrow/arrow_chevron_teal_r.svg") no-repeat right center;
}

.mainNavBottom {
    margin-top: 20px;
    border-top: 1px solid var(--neutral-gray);
}

.mainNavBottomList {
    display: flex;
    flex-wrap: wrap;
}

.mainNavBottomItem:first-child {
    flex: 1 1 100%;
    min-width: 0;
}

.mainNavBottomItem {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mainNavBottomItem:nth-child(1) {
    border-bottom: 1px solid var(--neutral-gray);
}

.mainNavBottomItem:nth-child(2) {
    position: relative;
    border-bottom: 1px solid var(--neutral-gray);
}

.mainNavBottomItem:nth-child(3) {
    border-bottom: 1px solid var(--neutral-gray);
}

.mainNavBottomItem:nth-child(2)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    border-right: 1px solid var(--neutral-gray);
    pointer-events: none;
}

.mainNavBottomLink {
    flex-grow: 1;
    position: relative;
    display: block;
    padding: 10px;
    font-size: 0.938rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.mainNavBottomLink::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    content: "";
    width: 20px;
    height: 16px;
    background: url("/column/common_2026/img/icon/icon_new_window_blue.svg") no-repeat right center;
    background-size: contain;
}

.mainNavBottomItem:nth-child(2) .mainNavBottomLink::after,
.mainNavBottomItem:nth-child(3) .mainNavBottomLink::after {
    width: 15px;
    height: 12px;
}

.mainNavBottomItem:nth-child(1) .mainNavBottomLink {
    font-weight: 700;
}

.social {
    margin-top: 14px;
}

.socialContent {
    margin-top: 10px;
}

.socialList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.socialTtl {
    color: #7dcdf4;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

.socialLink {
    display: block;
}

@media print, screen and (min-width: 960px) {
    .categories {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 28px 0;
    }

    .category {
        border-bottom: none;
    }

    .categoryLink::after,
    .mainNavBottomItem:nth-child(2)::after {
        display: none;
    }

    .mainNavBottom {
        margin-top: 30px;
    }

    .mainNavBottomItem {
        flex: 0 1 auto;
    }

    .mainNavBottomItem:nth-child(1),
    .mainNavBottomItem:nth-child(2),
    .mainNavBottomItem:nth-child(3) {
        border: none;
    }

    .mainNavBottomLink {
        flex-grow: 0;
        padding-right: 30px;
    }

    .mainNavBottomItem:nth-child(1) .mainNavBottomLink::after {
        width: 15px;
        height: 12px;
    }

    .social {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .socialContent {
        margin-top: 0;
    }

    .newArticlesLinkTxt {
        display: inline-block;
    }
}

/* overlay behind the main nav */
.navOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0ms linear 220ms;
  z-index: 9995;
  pointer-events: none;
}
.navOverlay.show {
  opacity: 1;
  visibility: visible;
  transition-delay: 0ms;
  pointer-events: auto;
}

/* featured article
----------------------------------------------------------- */
.featured {
    margin: 30px 0;
}

.featuredLink {
    display: block;
    position: relative;
}

.featuredIcon {
    position: absolute;
    bottom: -22px;
    right: 0;
    width: 60px;
    height: 70px;
}

.metaSection {
    margin: 10px;
}

.postMeta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.postCategory {
    padding: 2px 4px;
    background-color: var(--accent-teal);
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
}

.postDate {
    font-size: .75rem;
    color: var(--muted-gray);
    line-height: 1.5;
}

.featuredTitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1667;
}

.featuredTags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}

.featuredTagsDelta {
    margin-right: 60px;
}

.featuredTag {
    margin-right: 12px;
}

.featuredTag:last-child {
    margin-right: 0;
}

.featureTagLink {
    font-size: 0.75rem;
    font-weight: 500;
    color: #575757;
}

.featuredImg{
    position: relative;
    padding-left: 8px;
}

.featuredMv {
    aspect-ratio: 1.3 / 1;
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
}

.featuredImg .newIcon {
    position: absolute;
    top: 12px;
    left: 0;
    width: 57px;
    height: 32px;
}

.featuredMeta {
    margin: 5px 0 0 0;
}

.featuredMetaCol:nth-child(1) {
    flex: 1 1 340px;
}

.featuredMetaCol:nth-child(2) {
    flex: 1 1 88px;
}

.featuredPreview {
    display: none;
}

@media print, screen and (min-width: 768px) {
    .featured {
        margin: 53px 0 58px 0;
    }

    .featuredImg {
        width: 100%;
        padding-left: 20px;
    }

    .featuredMv {
        border-radius: 17px;
        height: auto;
    }

    .featuredImg .newIcon {
        width: 90px;
        height: 40px;
    }

    .metaSection {
        margin: 0
    }

    .postCategory {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: .875rem;
    }

    .postDate {
        font-size: .875rem;
        line-height: 1.125;
    }

    .featuredMeta {
        display: flex;
        align-items: center;
        margin: 10px 0 0 0;
    }

    .featuredIcon {
        position: static;
        width: 87px;
        height: 101px;
    }

    .featuredTitle {
        font-size: 1.625rem;
        line-height: 1.5;
    }

    .featuredTagsDelta {
        margin-right: 76px;
    }

    .featureTagLink {
        font-size: 0.875rem;
    }
}

@media print, screen and (min-width: 960px) {
    .featuredImg {
        max-width: 460px;
    }

    .featuredPreview {
        display: block;
        margin-top: 12px;
        padding: 22px;
        border: 2px solid var(--accent-teal);
        border-radius: 10px;
        background-color: #FFFFFF;
    }

    .featuredPreviewTitle {
        position: relative;
        padding-left: 26px;
        font-size: 1rem;
        font-weight: 700;
        color: var(--accent-teal);
    }

    .featuredPreviewTitle::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 20px;
        content: "";
        background: url("/column/common_2026/img/icon/icon_file.svg") no-repeat left center;
        background-size: contain;
    }

    .featuredPreviewText {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        margin-top: 8px;
        font-size: 1rem;
        color: var(--color-text);
    }
}

/* Editor's Pick Up section
----------------------------------------------------------- */
.editorsPick {
    padding: 0 0 36px 0;
}

.splideHeader {
    margin-bottom: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--accent-teal);
}

.splideHeaderTtl {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.sectionTitle {
    font-size: 1.438rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--accent-teal);
}

.sectionSubtitle {
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted-gray);
    line-height: 1.75;
    letter-spacing: 0.1em;
}

.highlightColor {
    color: #FAB725;
}

.slide {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 16px;
}

.figureWrap,
.slideImg {
    flex: 1 1 37.39%;
}

.slideImgMedia {
    aspect-ratio: 1.3 / 1;
    border-radius: 10px;
    border: 1px solid #757575;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.slideContent {
    flex: 1 1 62.61%;
}

.sidebarRanking .slideContent {
    padding: 12px 0 0 0;
}

.slideTitle {
    margin-top: 5px;
    font-size: 0.813rem;
    font-weight: 700;
    color: var(--color-text);
}

.slideTitleLink {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    max-height: calc(1.25em * 2);
}

.tagSection {
    padding: 6px 0 0 0;
    margin-top: 6px;
    border-top: 1px dashed var(--neutral-gray);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}

.tag {
    line-height: 1.125;
}

.tagLink {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-gray);
}

@media print, screen and (min-width: 768px) {
    .editorsPick {
        padding: 0 0 70px 0;
    }

    .splideHeader {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 22px;
        padding-bottom: 10px;
    }

    .splideHeaderTtl {
        gap: 28px;
    }

    .sectionTitle {
        font-size: 2.5rem;
    }

    .sectionSubtitle {
        font-size: 1.125rem;
    }

    .splideHeaderNav {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .splide__arrows {
        display: flex;
        gap: 14px;
    }

    .splide__arrow.splide__arrow--prev,
    .splide__arrow.splide__arrow--next {
        position: static;
        transform: translateY(0);
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        background: url("/column/common_2026/img/arrow/arrow_circle_teal.svg") no-repeat center/contain;
        background-color: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: transparent;
        text-indent: -9999px;
        overflow: hidden;
        white-space: nowrap;
    }

    .splide__arrow.splide__arrow--next {
        transform: rotate(180deg);
    }

    .editorsPick .splide__arrow.splide__arrow--prev,
    .editorsPick .splide__arrow.splide__arrow--next {
        background: url("/column/common_2026/img/arrow/arrow_circle_teal_tra.svg") no-repeat center/contain;
    }

    .splide__arrow.splide__arrow--prev[disabled],
    .splide__arrow.splide__arrow--next[disabled] {
        opacity: 0.3;
        cursor: default;
    }

    .slide.imgWithBadgeWrap {
        padding: 12px 0 0 0;
    }

    .slide {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 0;
    }

    .slideImgMedia {
        aspect-ratio: 1.3 / 1;
        border-radius: 17px;
        border: 1px solid #757575;
        object-fit: cover;
        width: 100%;
        height: auto;
    }

    .slide.sidebarRanking,
    .slide.sidebarNewArrival {
        flex-direction: row;
    }

    .slideTitle {
        margin-top: 10px;
        font-size: 1.125rem;
    }

    .tagSection {
        padding: 10px 0 0 0;
    }

    .tags {
        max-width: 212px;
        gap: 0 16px;
    }

    .tagLink {
        font-size: 0.875rem;
    }
}

/* Tab Switcher
----------------------------------------------------------- */
.tabs {
    padding: 14px var(--container-padding);
    background-color: var(--accent-teal);
    border-radius: 25px 0 0 0;
    transition: background-color .2s ease;
}

.tabs[data-active="popular"] { background-color: var(--accent-teal); }
.tabs[data-active="new"] { background-color: var(--accent-pink); }

.tab-header {
    display: flex;
    justify-content: space-between;;
    align-items: center;
    gap: 10px;
}

.tab {
    flex: 1 1 0;
    padding: 14px 0 11px 0;
    border-radius: 20px 20px 0 0;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0.938rem;
    line-height: 1.2667;
    letter-spacing: 0.25em;
}

.tabText {
    font-size: 0.938rem;
    line-height: 1.2667;
    letter-spacing: 0.25em;
    color: var(--color-text);
}

.tabs[data-active="popular"] .tab[aria-selected="true"] .tabText {
    border-bottom: 1px solid var(--accent-teal);
}

.tabs[data-active="new"] .tab[aria-selected="true"] .tabText {
    border-bottom: 1px solid var(--accent-pink);
}

.tab:focus {
    outline: none;
}

.tab[aria-selected="true"] {
    background-color: #FFFFFF;
}

.tabSurface{
    padding: 10px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}

.tabImage {
    aspect-ratio: 1.3 / 1;
    border-radius: 10px;
    border: 1px solid #757575;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.panelTtl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.panelTtl .rankingTtl,
.panelTtl .newArrivalTtl {
    font-size: 1.875rem;
}

.panelTtl .sectionSubtitle {
    font-size: .875rem;
}

/* Ranking section
----------------------------------------------------------- */
.ranking {
    padding: 12px;
    background-color: var(--accent-teal);
}

.rankingInner {
    padding: 28px 0 38px 0;
    background: url("/column/common_2026/img/img_grid_background.webp") no-repeat center top;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
}

.ranking .splideHeader {
    border-bottom: none;
}

.rankingTtl {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #E7BE07;
}

.rankingTtl::before,
.rankingTtl::after {
    content: "";
    display: inline-block;
    width: 34px;
    height: 21px;
    background: url("/column/common_2026/img/icon/icon_crown.svg") no-repeat left center;
    background-size: contain;
}

#splide02 .splide__track,
#splide03 .splide__track {
    max-width: 960px;
    margin: 0 auto;
    transform: translateX(29px);
}

/* new arrival section
----------------------------------------------------------- */
.newArrival {
    padding: 12px;
    background-color: var(--accent-pink);
}

.newArrival .splideHeader {
    border-bottom: none;
}

.newArrivalTtl {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #E15046;
}

.newArrivalTtl::before,
.newArrivalTtl::after {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url("/column/common_2026/img/icon/icon_sparkle.svg") no-repeat left center;
    background-size: contain;
}

.newArrival .splide__arrow.splide__arrow--prev,
.newArrival .splide__arrow.splide__arrow--next {
    position: static;
    transform: translateY(0);
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: url("/column/common_2026/img/arrow/arrow_circle_pink.svg") no-repeat center/contain;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

.newArrival .splide__arrow.splide__arrow--next {
    background: url("/column/common_2026/img/arrow/arrow_circle_pink.svg") no-repeat center/contain;
}

.newArrival .splide__arrow.splide__arrow--prev {
    transform: rotate(180deg);
}

/* Popular Tags & Form module 
----------------------------------------------------------- */
.tagFormWrap {
    gap: 30px;
    margin-top: 36px;
}

.popularTags {
    flex: 1 1 auto;
    padding: 28px 20px;
    background: #fff;
    border: 2px solid var(--accent-teal);
    border-radius: 18px;
    max-width: 980px;
    margin-top: 24px;
    position: relative;
    overflow: visible;
}

.tagTexts {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  margin: 0;
  padding: 0;
}

.tagText {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
    background: var(--accent-pink);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.tagText + .tagText {
  margin-left: -10px;
}

.tagText:nth-child(odd) {
    background: var(--accent-pink);
}

.tagText:nth-child(even) {
  background: var(--accent-teal);
}

.popularTagsLead {
    text-align: center;
    margin: 10px 0 18px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

.tagPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    transition: transform .12s ease, box-shadow .12s ease;
}

.tagSmall .tagPill {
    font-size: 0.75rem;
}

.formBlock {
    flex: 1 1 auto;
    padding: 11px 28px 20px 28px;
    border: 3px solid var(--accent-teal);
    border-radius: 10px;
    background-color: #FFF4D0;
}

.formBlockInner {
    flex: 1 1 100%;
}

.formBlockTitle {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.formBlockStrong {
    color: var(--accent-teal);
    font-size: 1.875rem;
    font-weight: 800;
}

.formBlockSubtitle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-gray);
}

@media print, screen and (min-width: 768px) {
    .tagFormWrap {
        margin-top: 114px;
        gap: 45px;
    }

    .tagText {
        width: 52px;
        height: 52px;
        font-size: 1.375rem;
    }

    .formBlockTitle {
        align-items: center;
        gap: 12px;
    }

    .formBlockStrong {
        font-size: 2.063rem;
    }

    .formBlockSubtitle {
        font-size: 1.25rem;
    }

    .formBlock {
        margin-top: 24px;
    }
}

@media print, screen and (min-width: 934px) {
    .formBlockTitle {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
}

@media print, screen and (min-width: 960px) {
    .popularTags {
        flex: 1 1 372px;
    }

    .formBlock {
        flex: 1 1 543px;
    }
}

/* Summary Column
----------------------------------------------------------- */
.summaryColumn {
    margin-top: 32px;
    margin-bottom: 30px;
}

.summaryColumnInner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--neutral-gray);
}

.summaryColumnContent {
    padding: 15px 0;
    border-top: 1px solid var(--neutral-gray);
}

.summaryColumnTitle {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}

.summaryColumnText,
.summaryColumnNote {
    font-size: 0.875rem;
}

.summaryColumnNote {
    margin-top: 8px;
}

@media print, screen and (min-width: 768px) {
    .summaryColumn {
        margin-top: 64px;
        margin-bottom: 40px;
    }

    .summaryColumnInner {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        padding: 0 40px;
        border-top: 1px solid var(--neutral-gray);
    }

    .summaryColumnContent {
        margin-top: 8px;
        padding: 15px 0;
        border-top: none;
    }
}

/* Article Page
----------------------------------------------------------- */
.articleHeading01,
.articleHeading02 {
    position: relative;
    margin-bottom: 8px;
    padding-left: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.333;
    color: var(--color-text);
}

.articleHeading01::before,
.articleHeading02::before {
    content: "";
    position:absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 22px;
    background-color: var(--accent-teal);
}

.articleHeading02 {
    margin-bottom: 16px;
    padding-left: 16px;
    font-size: 1.375rem;
    line-height: 1.36;
}

.articleHeading02::before {
    bottom: 0;
    width: 7px;
    height:auto;
}

.articleHeading03 {
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.contentSidebar {
    display: grid;
    grid-template-columns: 1fr;
    padding: 25px 0 30px 0;
}

.mvImageWrap {
    position: relative;
    margin: 10px 0 0 0;
}

.mvImage {
    overflow: hidden;
}

.articleSummary {
    padding: 22px;
    margin-top: 16px;
    border: 3px solid var(--accent-teal);
    border-radius: 10px 10px 0 0;
    background-color : #FFFFFF;
}

.articleSummaryTitleWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 0 10px 0;
    border-bottom: 1px dashed var(--accent-teal);
}

.articleSummaryTitleWrap::before {
    content: "";
    display: block;
    width: 30px;
    height: 35px;
    background: url("/column/common_2026/img/icon/icon_file.svg") no-repeat center;
    background-size: contain;
}

.articleSummaryTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.articleSummaryOverline {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-pink);
    text-align: center;
}

.articleSummaryStrong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-teal);
    letter-spacing: 0.1em;
}

.articleTitle {
    margin-top: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
}

.articlePoints {
    margin-top: 12px;
}

.articlePoint {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.articlePoint + .articlePoint {
    margin-top: 12px;
}

.articlePointText {
    font-size: 0.938rem;
    color: var(--color-text);
}

.articlePoint .badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  text-align: center;
  line-height: 1;
  aspect-ratio: 1;
}

.articleSummaryMediaWrap {
    margin: 28px 0 0 0;
}

.articleSummaryAudio {
    padding: 2px 0;
    border: 1px solid var(--accent-teal);
    border-radius: 10px;
    font-size: .875rem;
    text-align: center;
}

.articleSummaryMedia {
    width: 80%;
    margin: 12px auto 0 auto;
}

.videoWrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.toc {
    position: relative;
    margin: 38px 0 16px 0;
    padding: 8px;
    background-color: var(--accent-teal);
    border-radius: 10px;
}

.tocInner {
    padding: 28px 14px 20px 14px;
    background: url("/column/common_2026/img/img_grid_background_sp.webp") top center;
    background-size: cover;
}

.tocTitle {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.tocItem + .tocItem {
    margin-top: 8px;
}

.tocTitleText01,
.tocTitleText02 {
    width: 42px;
    height: 42px;
    background-color: #FBA0A0;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 700;
}

.tocTitleText02 {
    margin-left: -10px;
    background-color: var(--accent-pink-soft);
}

.tocLink {
    font-size: 0.938rem;
    font-weight: 700;
    color: var(--muted-gray);
    cursor: pointer;
}

.articleBlock,
.articleBlockInner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.articleBlockInner {
    margin-bottom: 0
}

.articleBlock .articleHeading02,
.articleBlock .articleHeading03 {
    margin-bottom: 0;
}

.contentSidebarMain .articleBlock a:link,
.contentSidebarMain .articleBlock a:active {
    text-decoration: underline;
    color: var(--link-default-color);
}

.contentSidebarMain .articleBlock a:visited {
    color: #551A8B;
}

.contentSidebarMain .articleBlock a:hover {
    text-decoration: none;
    color: var(--link-default-color);
}

.contentSidebarMain .articleBlock a[target="_blank"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.contentSidebarMain .articleBlock a[target="_blank"]::after {
    content: "";
    width: 14px;
    height: 11px;
    background: url("/column/common_2026/img/icon/icon_new_window_dark_blue.svg") no-repeat center;
    background-size: contain;
}

.articleLead {
    padding: 12px 24px;
    border-radius: 14px;
}

.articleLead.cream {
    background: var(--color-cream);
}

.articleLead.green {
    background: var(--color-light-green);
}

.articleLead.pink {
    background: var(--color-light-pink);
}

.share {
    margin: 0 0 60px 0;
}

.shareTitle {
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.share .socialList {
    margin: 0 0 20px 0;
}

.shareText {
    font-size: 0.875rem;
    text-align: center;
}

.relatedNotes {
    position: relative;
    padding: 52px 16px 30px 16px;
    border: 1px solid var(--accent-teal);
    border-radius: 20px;
    background-color: #FFFFFF;
}

.relatedNotesLetters {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.relatedNotesLetter {
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    border-radius: 50%;
}

.relatedNotesLetter:nth-child(odd) {
    background: var(--accent-pink);
}

.relatedNotesLetter:nth-child(even) {
    background: var(--accent-pink-soft);
}

.relatedNotesLetter + .relatedNotesLetter {
    margin-left: -8px;
}

.relatedNotesListItem {
    padding: 0 0 8px 0;
    border-bottom: 1px dashed #D8D4D4;
}

.relatedNotesListItem + .relatedNotesListItem {
    margin-top: 12px;
}

.relatedNotesLink {
    display: flex;
    justify-content: space-between;
    gap: 1.0rem;
    align-items: center;
    font-size: .85rem;
    font-weight: 500;
}

.relatedNotesListItem:nth-child(odd) .relatedNotesLink::after,
.relatedNotesListItem:nth-child(even) .relatedNotesLink::after {
    content: "";
    display: block;
    width: 25px;
    min-width: 25px;
    height: 25px;
    background: url("/column/common_2026/img/icon/icon_chevron_circle_pink_right.svg") no-repeat center;
    background-size: contain;
}

.relatedNotesListItem:nth-child(even) .relatedNotesLink::after {
    background: url("/column/common_2026/img/icon/icon_chevron_circle_teal_right.svg") no-repeat center;
    background-size: contain;
}

.breadCrumbsWrap {
    margin: 0 0 40px 0;
    padding: 10px 0;
    border-top: 1px dashed var(--neutral-gray);
    border-bottom: 1px dashed var(--neutral-gray);
}

.breadCrumb {
    display: inline;
    font-size: 0.75rem;
    margin-right: 4px;
}

.breadCrumb::after {
    content: ">";
    margin-left: 4px;
}

.breadCrumb:last-child::after {
    display: none;
}

.bottomBannerArticle {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.bottomBannerImgSp {
    width: 100%;
    height: auto;
}

.navTrailWrap {
    margin: 40px 0 0 0;
    padding: 10px 0;
    border-top: 1px dashed var(--neutral-gray);
    border-bottom: 1px dashed var(--neutral-gray);
}

.navTrailCrumb {
    font-size: 0.75rem;
}

.navTrailCrumb::after {
    content: ">";
    margin-left: 8px;
}

/* sidebar */
.contentSidebarSub .panel {
    margin-bottom: 48px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--accent-teal);
}

.contentSidebarSub .sectionSubtitle {
    font-size:0.875rem;
}

.contentSidebarSub .slideTitle {
    margin-top: 3px;
    font-size: .813rem;
    font-weight: 700;
}

.contentSidebarSub .tabList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}

.contentSidebarSub .postMeta {
    line-height: 1;
}

.contentSidebarSub .postCategory {
    padding: 0 4px;
    font-size: 0.75rem;
}

.contentSidebarSub .postDate {
    font-size: 0.75rem;
}

.contentSidebarSub .tagSection {
    margin-top: 4px;
    padding: 0;
}

.contentSidebarSub .tagLink {
    font-size: 0.75rem;
}

.contentSidebarSub .tagFormWrap {
    margin-top: 0;
}

.contentSidebarSub .formBlockSubtitle {
    font-size: 0.875rem;
}

/* scroll margin for anchor links */
.articleBlock,
.tocAnchorTarget,
.articleHeading02,
.articleHeading01 {
  scroll-margin-top: calc(var(--header-top-height, 72px) + 12px);
}

@media print, screen and (min-width: 768px) {
    .articleHeading01 {
        margin-bottom: 26px;
        padding-left: 16px;
        font-size: 1.688rem;
        line-height: 1.4815;
    }

    .articleHeading01::before {
        bottom: 0;
        height:auto;
        width: 8px;
    }

    .contentSidebar {
        display: grid;
        grid-template-columns: minmax(0, 66%) minmax(0, 34%);
        gap: 80px;
    }

    .contentSidebarMain {
        min-width: 0;
        max-width: 554px;
    }

    .contentSidebarSub {
        min-width: 0;
        max-width: 327px;
    }

    .articleSummary {
        padding: 28px 46px;
    }

    .articleSummaryOverline {
        font-size: .875rem;
    }

    .articleSummaryStrong {
        font-size: 1.25rem;
    }

    .articleTitle {
        margin-top: 24px;
        font-size: 1.5rem;
    }

    .articlePoints {
        margin-top: 26px;
    }

    .articlePoint .badge {
        width: 68px;
        height: 68px;
        font-size: 1rem;
        line-height: 1.2;
    }

    .articlePoint + .articlePoint {
        margin-top: 28px;
    }

    .articlePointText {
        font-size: 1.125rem;
    }

    .articleSummaryAudio {
        font-size: 1rem;
    }

    .tocTitleText01,
    .tocTitleText02 {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .tocLink {
        font-size: 1rem;
    }

    .tocInner {
        padding: 30px 26px 20px 26px;
    }

    .articleBlock {
        gap: 20px;
        margin-bottom: 46px;
    }

    .articleBlockInner {
        gap: 20px;
    }

    .shareTitle {
        margin-bottom: 12px;
        font-size: 1.25rem;
    }

    .relatedNotesLetter {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .relatedNotesLink {
        font-size: 1rem;
    }

    .relatedNotesListItem:nth-child(odd) .relatedNotesLink::after,
    .relatedNotesListItem:nth-child(even) .relatedNotesLink::after {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .newArrivalTtl.sidebarNewArrivalTtl {
        font-size: 1.75rem;
    }

    .bottomBannerArticle {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media print, screen and (min-width: 960px) {
    .contentSidebarSub .slide {
        flex-direction: row;
        gap: 5px;
    }

    .newArrivalTtl.sidebarNewArrivalTtl {
        font-size: 1.875rem;
    }
}

/* Article List Page
----------------------------------------------------------- */
.heading01 {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    position: relative;
    margin: 0 0 10px 0;
    padding: 0 0 0 9px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.04em;
}

.heading01::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-45%);
    content: "";
    width: 4px;
    height: 25px;
    background-color: var(--accent-teal);
}

.heading01 .heading01Subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.04em;
}

.accordion {
    margin: 0 0 24px 0;
    border: 3px solid var(--accent-teal);
    border-radius: 10px;
    background-color: #FFFFFF;
}
 
.accordionBtn {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.04em;
    cursor: pointer;
}

.accordionBtn::before,
.accordionBtn::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.22,.9,.33,1);
  opacity: 0;
}

.accordionBtn::before {
  background-image: url("/column/common_2026/img/icon/icon_accordion_plus.svg");
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.accordionBtn::after {
  background-image: url("/column/common_2026/img/icon/icon_accordion_minus.svg");
  opacity: 0;
  transform: translateY(-50%) scale(.8) rotate(-15deg);
}

.accordionBtn[aria-expanded="true"]::before {
  opacity: 0;
  transform: translateY(-50%) scale(.8) rotate(15deg);
}

.accordionBtn[aria-expanded="true"]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(0);
}

.accordionPanel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 280ms ease;
}

.accordionContent {
    margin: 0 15px 20px 15px;
    padding: 10px 0 0 0;
    border-top: 2px solid var(--accent-teal);
}

.accordionTitle {
    margin: 0 0 15px 0;
    padding: 0 0 0 4px;
    font-size: 0.938rem;
    font-weight: 700;
    color: var(--color-text);
    border-left: 9px solid var(--accent-teal);
    line-height: 1;
}

.accordionGroup {
    margin: 0 0 12px 0;
    padding: 0 0 14px 0;
    border-bottom: 1px solid var(--neutral-gray);
}

.accordionGroup:last-child {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.accordionCategories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(143px, 1fr));
    gap: 14px 16px;
}

.accordionCategoryLink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    box-shadow: 1px 1px 3px 0px rgba(28, 28, 28, 0.4);
    background-color: #FFFFFF;
    border-radius: 10px;
}

.accordionCategoryLink::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    content: "";
    width: 100%;
    height: 100%;
    background: url(/column/common_2026/img/arrow/arrow_chevron_teal_r.svg) no-repeat right center;
}

.accordionTags {
    --pill-row-h: 30px;
    max-height: calc((var(--pill-row-h) + var(--gap, 10px)) * 4 - var(--gap, 10px));
    overflow-y: auto;
    padding-right: 6px;
}

/* fix for scrollbar in WebKit browsers (e.g. Safari) to prevent layout shift when scrollbar appears*/
.accordionTags {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.accordionTags::-webkit-scrollbar { display: none; }

.scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 6px;
  pointer-events: none;
  z-index: 20;
  will-change: transform, opacity;
}

.scrollbar .thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  transition: opacity .18s;
  opacity: 0.9;
  will-change: top, height, opacity;
}

.scrollbar.hidden .thumb { opacity: 0; }
/* end of scrollbar fix */

.resultWrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 60px;
}

.resultsCount {
    margin: 0 0 14px 0;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted-gray);
}

.resultWrap .resultsCount {
    margin: 0;
}

.resultsCount .count {
    font-size: 1.125rem;
}

.resultsCount .text {
    font-size: .875rem;
}

.noResultsMessage {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.04em;
}

.articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px 15px;
}

.articles .article {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.articleImgMedia {
    aspect-ratio: 1.3 / 1;
    border-radius: 10px;
    border: 1px solid #757575;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.articleTitleLink {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    max-height: calc(1.25em * 3);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 35px 0 0 0;
}

.paginationPrev,
.paginationNext,
.paginationNumber,
.paginationActive {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 1.125rem;
    font-weight: 500;
}

.paginationActive {
    border-radius: 50%;
    background-color: var(--accent-teal);
    color: #FFFFFF;
}

.paginationPrev {
    margin: 0 0 0 10px;
    transform: rotate(180deg);
}

.paginationNext {
    margin: 0 0 0 10px;
}

@media print, screen and (min-width: 768px) {
    .heading01 {
        padding: 0 0 0 14px;
        font-size: 2.25rem;
    }

    .heading01::before {
        height: 35px;
    }

    .accordion {
        margin: 0 0 30px 0;
    }

    .accordionTitle {
        font-size: 1.125rem;
    }

    .resultWrap {
        margin-bottom: 80px;
    }

    .articles {
        gap: 42px 20px;
    }

    .articles .article {
        gap: 10px;
    }

    .articleImgMedia {
        border-radius: 17px;
        border: 1px solid #757575;
    }

    .sidebarImgMedia {
        aspect-ratio: 1.3 / 1;
        border-radius: 10px;
        border: 1px solid #757575;
        object-fit: cover;
        width: 100%;
        height: auto;
    }

    .pagination {
        margin: 60px 0 0 0;
    }
}

/* Footer
----------------------------------------------------------- */
.siteFooter {
    background-color: #FFFFFF;
}

.footerTop {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.footerMenu {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--neutral-gray);
}

.footerMenuItem {
    flex: 1 1 50%;
}

.footerMenuItem:first-child {
    flex: 1 1 100%;
    border-top: 1px solid var(--neutral-gray);
    border-bottom: 1px solid var(--neutral-gray);
}

.siteInfoList {
    justify-content: center;
}

.siteInfoLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-left: 1px solid var(--neutral-gray);
    font-size: 0.625rem;
    color: var(--muted-gray);
}

.siteInfoLink::after {
    display: block;
    content: "";
    width: 12px;
    height: 9px;
    background: url("/column/common_2026/img/icon/icon_new_window_gray.svg") no-repeat center;
    background-size: contain;
}

.siteInfoItem:nth-child(3) .siteInfoLink,
.siteInfoItem:last-child .siteInfoLink {
    border-right: 1px solid var(--neutral-gray);
}

.footerBottom {
    gap: 12px;
    align-items: center;
    padding: 10px;
}

.footerLogo {
    max-width: 107px;
    height: auto;
}

.copyright {
    padding: 10px 0;
    background: var(--muted-gray);
}

.copyrightText {
    font-size: 0.625rem;
    color: #FFFFFF;
    text-align: left;
}

@media print, screen and (min-width: 768px) {
    .siteFooter {
        margin-top: 40px;
        padding: 24px 0 0 0;
    }

    .footerTop {
        flex-direction: row;
        padding-bottom: 30px;
        justify-content: space-between;
        border-bottom: 1px solid var(--neutral-gray);
    }

    .footerTop .social {
        flex-direction: column;
        align-items: flex-start;
    }

    .footerMenu {
        border-bottom: none;
    }

    .footerMenu,
    .social {
        flex: 1 1 300px;
    }

    .footerMenuItem:first-child {
        flex: 1 1 100%;
        border-top: none;
        border-bottom: none;
    }

    .footerBottom {
        justify-content: space-between;
        padding: 24px 0;
    }

    .siteInfoItem:nth-child(3) .siteInfoLink {
        border-right: none;
    }

    .copyrightText {
        text-align: center;
    }
}