/* ==========================================================================
   AUTUMN 2026
   Figma: https://www.figma.com/design/JrxSd0ENoqwkTGIXKpnCJm/%E9%80%9A%E5%B8%B8%E3%82%BF%E3%82%B9%E3%82%AF_2026?node-id=9438-4461&m=dev（PC）
   Figma: https://www.figma.com/design/JrxSd0ENoqwkTGIXKpnCJm/%E9%80%9A%E5%B8%B8%E3%82%BF%E3%82%B9%E3%82%AF_2026?node-id=9438-4565&m=dev（SP）
   ========================================================================== */

/* MV
   ========================================================================== */
   .p-autumn-2026-mv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.p-autumn-2026-mv__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.p-autumn-2026-mv__logo {
    width: 300px;
    height: auto;
}

.p-autumn-2026-mv__lead {
    text-align: center;
}

@media screen and (min-width: 1024px) {
    .p-autumn-2026-mv__visual {
        height: 540px;
    }

    .p-autumn-2026-mv__logo {
        width: 500px;
    }

    .p-autumn-2026-mv__lead {
        max-width: 648px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Campaign（プレゼントキャンペーン）
   ========================================================================== */
.p-autumn-2026-campaign {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.p-autumn-2026-campaign__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.p-autumn-2026-campaign__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.p-autumn-2026-campaign__visual picture {
    display: block;
    width: 100%;
    height: 100%;
}

.p-autumn-2026-campaign__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-autumn-2026-campaign__visual-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.p-autumn-2026-campaign__visual-img.is-active {
    opacity: 1;
}

.p-autumn-2026-campaign__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.p-autumn-2026-campaign__title {
    text-align: center;
}

.p-autumn-2026-campaign__note {
    font-size: 0.65em;
    vertical-align: text-top;
}

@media screen and (max-width: 1023px) {
    .p-autumn-2026-campaign__body {
        display: contents;
    }

    .p-autumn-2026-campaign__title {
        order: 1;
        width: 100%;
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .p-autumn-2026-campaign__visual {
        order: 2;
    }

    .p-autumn-2026-campaign__text {
        order: 3;
        width: 100%;
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .p-autumn-2026-campaign__body > .c-btn {
        order: 4;
        margin-right: 5vw;
        margin-left: 5vw;
    }
}

@media screen and (min-width: 1024px) {
    .p-autumn-2026-campaign {
        gap: 120px;
    }

    .p-autumn-2026-campaign__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }

    .p-autumn-2026-campaign__item--reverse {
        flex-direction: row-reverse;
    }

    .p-autumn-2026-campaign__visual {
        width: 600px;
        aspect-ratio: 600 / 450;
        flex-shrink: 0;
    }

    .p-autumn-2026-campaign__body {
        flex: 1 0 0;
        align-items: flex-start;
        gap: 24px;
    }

    .p-autumn-2026-campaign__title {
        text-align: left;
    }
}

/* 催事情報
   ========================================================================== */
.p-autumn-2026-events {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.p-autumn-2026-events__title {
    text-align: center;
}

.p-autumn-2026-events__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-autumn-2026-events__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-autumn-2026-events__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.p-autumn-2026-events__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-autumn-2026-events__text {
    display: flex;
    flex-direction: column;
}

.p-autumn-2026-events__date {
    margin: 0;
}

.p-autumn-2026-events__link {
    display: block;
    margin: 0;
    color: #212121;
    font-size: 16px;
    line-height: 2;
    text-decoration: none;
}

a.p-autumn-2026-events__link:hover {
    text-decoration: underline;
}

@media screen and (min-width: 1024px) {
    .p-autumn-2026-events__list {
        flex-direction: row;
        gap: 24px;
    }

    .p-autumn-2026-events__item {
        flex: 1 0 0;
    }
}

/* 和光ウェブマガジン WAKO INDEX
   ========================================================================== */
.p-autumn-2026-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.p-autumn-2026-index__title {
    text-align: center;
}

/* WAKO INDEXカード一覧
   実サイト（https://www.wako.co.jp/）の `.main-contents__index` を参考に実装
   （`.fs-body-top` スコープの元スタイルを、本ページの `.p-autumn-2026-index` スコープへ移植） */
.p-autumn-2026-index .index-wrap {
    width: 100%;
}

.p-autumn-2026-index .index-item {
    height: 100%;
}

.p-autumn-2026-index .index-item + .index-item {
    margin-top: 26px;
}

.p-autumn-2026-index .index-item > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.p-autumn-2026-index .index-item__img img {
    width: 100%;
}

.p-autumn-2026-index .index-item__description .description-number {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 13px;
}

.p-autumn-2026-index .index-item__description .description-number .new {
    color: #ad9841;
    display: inline-block;
    font-family: WAKOROMAN, serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: underline;
}

.p-autumn-2026-index .index-item__description .description-number .number {
    font-family: WAKOROMAN, serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.25;
    text-indent: 0.2em;
}

.p-autumn-2026-index .index-item__description .description-title {
    margin-top: 8px;
}

.p-autumn-2026-index .index-item__more {
    align-items: center;
    border-bottom: 1px solid #000;
    display: flex;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-size: 12px;
    font-weight: 600;
    gap: 10px;
    letter-spacing: 0.08em;
    margin-top: auto;
    padding-bottom: 8px;
    padding-top: 20px;
}

.p-autumn-2026-index .index-item__more::after {
    background: url(https://dolvbt8sp2m5f.cloudfront.net/files/assets/img/top/icon_arrow.svg) no-repeat 50%/contain;
    content: "";
    display: inline-block;
    height: 8px;
    transition: all 0.4s ease;
    width: 21px;
}

.p-autumn-2026-index .index-button {
    margin: 40px auto 0;
    width: fit-content;
}

@media screen and (min-width: 992px) {
    .p-autumn-2026-index .index-list {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(3, 1fr);
    }

    .p-autumn-2026-index .index-item + .index-item {
        margin-top: 0;
    }

    .p-autumn-2026-index .index-item > a:hover .index-item__more::after {
        transform: translateX(8px);
    }

    .p-autumn-2026-index .index-item__description .description-number {
        margin-top: 16px;
    }

    .p-autumn-2026-index .index-item__description .description-number .new {
        font-size: 13px;
    }

    .p-autumn-2026-index .index-item__description .description-title {
        margin-top: 16px;
    }

    .p-autumn-2026-index .index-item__more {
        font-size: 11px;
        gap: 13px;
        padding-top: 24px;
    }
}

/* おすすめの特集を見る（PICKUP特集）
   ========================================================================== */
.p-autumn-2026-pickup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.p-autumn-2026-pickup__title {
    text-align: center;
}

.p-autumn-2026-pickup__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.p-autumn-2026-pickup__visual {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.p-autumn-2026-pickup__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-autumn-2026-pickup__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 32px 0 0;
    text-align: center;
}

.p-autumn-2026-pickup__eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.p-autumn-2026-pickup__heading {
    margin: 0;
    font-size: 16px;
}

@media screen and (min-width: 1024px) {
    .p-autumn-2026-pickup__item {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 48px;
    }

    .p-autumn-2026-pickup__visual {
        width: 50%;
        max-width: 720px;
        flex-shrink: 0;
    }

    .p-autumn-2026-pickup__body {
        flex: 1 0 0;
        align-items: flex-start;
        padding: 0;
        text-align: left;
        max-width: 526px;
    }

    .p-autumn-2026-pickup__eyebrow {
        font-size: 16px;
    }
}

/* 特集画像ギャラリー
   ========================================================================== */
.p-autumn-2026-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-autumn-2026-gallery__item {
    position: relative;
    height: 537px;
    overflow: hidden;
}

.p-autumn-2026-gallery__visual {
    display: block;
    width: 100%;
    height: 100%;
}

.p-autumn-2026-gallery__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-autumn-2026-gallery__caption {
    position: absolute;
    right: 24px;
    bottom: 40px;
    left: 24px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
}

@media screen and (min-width: 1024px) {
    .p-autumn-2026-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 特集画像ギャラリー：キャプション視認性向上のグラデーション
   Figma: https://www.figma.com/design/JrxSd0ENoqwkTGIXKpnCJm/%E9%80%9A%E5%B8%B8%E3%82%BF%E3%82%B9%E3%82%AF_2026?node-id=10048-514&m=dev
   既存のHTML・CSSに手を加えず追加するため、`::before` の疑似要素で重ねている
   ========================================================================== */
.p-autumn-2026-gallery__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

/* ⚠ DUMMY-CSS START ==========================================================
   ダミー画像用の背景色（画像読み込み前のプレースホルダー表示用）
   実画像実装後、ターミナルで「Re」を実行すると本セクションが一括削除される
   ⚠ このセクション内には、ダミー画像用の background-color 以外の記述を追加しないこと
   ========================================================================== */
.p-autumn-2026-mv__visual {
    background-color: #ead6b8;
}

.p-autumn-2026-campaign__visual {
    background-color: #b3b3b3;
}

.p-autumn-2026-events__thumb {
    background-color: #d9d9d9;
}

.p-autumn-2026-index .index-item__img {
    background-color: #d9d9d9;
}

.p-autumn-2026-pickup__visual {
    background-color: #d9d9d9;
}

.p-autumn-2026-gallery__item {
    background-color: #d9d9d9;
}
/* ⚠ DUMMY-CSS END ============================================================ */

/* マニュアル改修 ============================================================ */
body#fs_CustomPage {
    color: #212121;
}
.fs-l-page {
    padding-top: 108px;
}
.p-autumn-2026-pickup {
    gap: 48px;
}
.p-autumn-2026-pickup__body {
    gap: initial;
}
p.p-autumn-2026-pickup__desc.u-text {
    margin-top: 32px;
}
.p-autumn-2026-pickup__body .c-btn {
    margin-top: 32px;
}
h3.p-autumn-2026-gallery__caption.u-font--M {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}
section.p-section.l-inner:nth-last-of-type(1) {
    margin-bottom: 100px;
}
.p-autumn-2026-gallery__item {
    height: initial;
}
.index-item__description .description-number .number>span+span {
    margin-left: .2em;
}
.index-item__description .description-number .number>span {
    border-color: transparent #d4d5d5 #bdbebf transparent;
    border-style: solid;
    border-width: 1.5px;
    display: inline-block;
    letter-spacing: .15em;
    text-indent: .15em;
}
a.c-btn {
    height: 42px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0;
}
@media screen and (min-width: 1441px) {
    .p-autumn-2026-campaign__visual {
        width: calc((100vw - ((72px * 2) + 48px)) - 648px) !important;
    }
    .p-autumn-2026-campaign__body.l-inner {
        width: 648px;
    }
}
@media screen and (min-width: 1024px) {
    .p-autumn-2026-mv__logo {
        width: 34.7vw;
    }
    .p-autumn-2026-mv__visual {
        height: 37.5vw;
    }
    .p-section.first {
        padding-top: 0;
    }
    .c-btn {
        width: 338px;
        text-align: center;
    }
    .p-autumn-2026-campaign__visual {
        width: 41.7vw;
    }
    .p-autumn-2026-campaign__body.l-inner, .p-autumn-2026-pickup__body.l-inner {
        padding-right: 0;
        padding-left: 0;
    }
    .p-autumn-2026-pickup__item a {
        width: 50%;
    }
    .p-autumn-2026-pickup__visual {
        width: 100%;
        max-width: initial;
    }
    .p-autumn-2026-gallery__item {
        transition-duration: .4s;
    }
    .p-autumn-2026-gallery__item:hover {
        opacity: .6;
    }
    .p-autumn-2026-gallery__item a:hover {
        opacity: 1;
    }
}
@media screen and (max-width: 767px) {
    .l-inner-re {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .fs-l-page {
        padding-top: 86px;
    }
    .p-section.first {
        padding-top: 0;
    }
    a.c-btn {
        width: 266px;
    }
}
/* ======================================================================== */