/* ======================================================================
   archive.css — お知らせ一覧・詳細ページ専用
   旧 page.css の一覧部分 + single.css
   ====================================================================== */

/* --- お知らせ一覧（旧 page.css） --- */
/* ==========================================================================
   お知らせ（一覧 / 詳細）
   ========================================================================== */

.p-newsArchive,
.p-newsSingle {
	--news-ink: #0b191c;
	--news-muted: #6f7477;
	--news-rule: rgba(11, 25, 28, 0.14);
	--news-cream: #f8f5ee;

	padding-bottom: clamp(5rem, 9vw, 8.75rem);
	background: #fff;
	color: var(--news-ink);
	font-family: "Noto Sans JP", sans-serif;
}

/* 明るい背景のページなので、共通ヘッダー（白ロゴ）は出さず
   ドロワーとフッターに寄せる。concept ページと同じ考え方。 */
.p-newsArchive ~ * .l-headerAsahido,
body:has(.p-newsArchive) .l-headerAsahido,
body:has(.p-newsSingle) .l-headerAsahido {
	display: none;
}

/* 白背景ではドロワーの白いハンバーガーが見えないため反転させる */
body:has(.p-newsArchive) .c-menuOpen__wrap,
body:has(.p-newsSingle) .c-menuOpen__wrap {
	border-right-color: var(--news-rule, rgba(11, 25, 28, 0.14));
}

/* 濃色にするのは閉じている間だけ。開くと濃色のドロワーに重なり
   × が見えなくなるため、共通 CSS の白へ戻す（:not(.is-nav-open)）。 */
body:not(.is-nav-open):has(.p-newsArchive) .c-menuOpen--pc .c-menuOpen__bar,
body:not(.is-nav-open):has(.p-newsSingle) .c-menuOpen--pc .c-menuOpen__bar {
	background: rgba(11, 25, 28, 0.72);
}

body:not(.is-nav-open):has(.p-newsArchive) .c-menuOpen--pc:hover .c-menuOpen__bar,
body:not(.is-nav-open):has(.p-newsSingle) .c-menuOpen--pc:hover .c-menuOpen__bar {
	background: #0b191c;
}

/* 「Language」の文字色。開いた一覧は濃色の箱なので白のままでよい。 */
body:has(.p-newsArchive) .c-langSwitchFixed .c-langSwitch,
body:has(.p-newsSingle) .c-langSwitchFixed .c-langSwitch {
	color: rgba(11, 25, 28, 0.72);
}

/* --- 共通の内側幅 --- */
.p-newsArchive__inner,
.p-newsSingle__article,
.p-newsSingle__foot {
	width: min(88vw, 56.25rem);
	margin-inline: auto;
}

/* --- ページ見出し --- */
.p-newsArchive__head,
.p-newsSingle__head {
	padding-block: clamp(6rem, 11vw, 9.375rem) clamp(2.5rem, 4vw, 3.75rem);
	text-align: center;
}

.p-newsArchive__en {
	margin: 0 0 0.875rem;
	color: var(--news-muted);
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: 0.8125rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.p-newsArchive__title {
	position: relative;
	margin: 0;
	padding-bottom: 1.5rem;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 400;
	letter-spacing: 0.22em;
}

.p-newsArchive__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 2.5rem;
	height: 1px;
	background: rgba(11, 25, 28, 0.4);
	transform: translateX(-50%);
}

/* --- カテゴリー絞り込み --- */
.p-newsFilter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.p-newsFilter__item {
	position: relative;
	padding-bottom: 0.5rem;
	color: var(--news-muted);
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	transition: color 0.2s ease;
}

.p-newsFilter__item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.p-newsFilter__item:hover {
	color: var(--news-ink);
}

.p-newsFilter__item:hover::after,
.p-newsFilter__item.is-current::after {
	transform: scaleX(1);
}

.p-newsFilter__item.is-current {
	color: var(--news-ink);
}

/* --- 一覧 --- */
.p-newsList {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--news-rule);
}

.p-newsList__item {
	border-bottom: 1px solid var(--news-rule);
}

.p-newsList__link {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0.5rem 2rem;
	padding: clamp(1.5rem, 2.4vw, 2rem) 0.25rem;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.p-newsList__link:hover {
	opacity: 0.6;
}

.p-newsList__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.p-newsList__date {
	color: var(--news-muted);
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.c-newsCat {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgba(11, 25, 28, 0.28);
	color: var(--news-ink);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	line-height: 1.5;
	white-space: nowrap;
}

.p-newsList__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.p-newsList__empty {
	padding: 4rem 0;
	color: var(--news-muted);
	text-align: center;
}

/* --- ページネーション --- */
.p-newsArchive .pagination {
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.p-newsArchive .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
    margin-top: 2rem;
}

.p-newsArchive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--news-rule);
	color: var(--news-muted);
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.p-newsArchive .page-numbers:hover {
	border-color: rgba(11, 25, 28, 0.4);
	color: var(--news-ink);
}

.p-newsArchive .page-numbers.current {
	background: var(--news-ink);
	border-color: var(--news-ink);
	color: #fff;
}

.p-newsArchive .page-numbers.dots {
	border-color: transparent;
}

.p-newsArchive .page-numbers.prev,
.p-newsArchive .page-numbers.next {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.8125rem;
}

/* --- 詳細 --- */
.p-newsSingle__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.p-newsSingle__date {
	color: var(--news-muted);
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
}

.p-newsSingle__title {
	margin: 0;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.1em;
}

.p-newsSingle__thumb {
	margin: 0 0 clamp(2.5rem, 4vw, 3.75rem);
}

.p-newsSingle__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.p-newsSingle__body {
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--news-rule);
	font-size: 0.9375rem;
	line-height: 2.1;
	letter-spacing: 0.04em;
}

.p-newsSingle__body > * + * {
	margin-top: 1.75rem;
}

.p-newsSingle__body h2,
.p-newsSingle__body h3 {
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.7;
}

.p-newsSingle__body h2 {
	margin-top: 3rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--news-rule);
	font-size: 1.25rem;
}

.p-newsSingle__body h3 {
	margin-top: 2.5rem;
	font-size: 1.0625rem;
}

.p-newsSingle__body img {
	max-width: 100%;
	height: auto;
}

.p-newsSingle__body a {
	color: var(--news-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.p-newsSingle__body a:hover {
	opacity: 0.6;
}

.p-newsSingle__body ul,
.p-newsSingle__body ol {
	padding-left: 1.5rem;
}

.p-newsSingle__body li + li {
	margin-top: 0.5rem;
}

/* --- 一覧に戻る --- */
.p-newsSingle__foot {
	margin-top: clamp(3rem, 5vw, 4.5rem);
	text-align: center;
}

@media (max-width: 768px) {
	.p-newsList__link {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.p-newsList__title {
		font-size: 0.9375rem;
	}

	.p-newsArchive .page-numbers {
		min-width: 2.25rem;
		height: 2.25rem;
		font-size: 0.875rem;
	}
}

/* --- お知らせ詳細（旧 single.css） --- */
.c-single{
    padding: 5.75rem 0 8.75rem;
    @media (max-width: 768px) {
        padding: 3.75rem 0 5.375rem;
    }
    .entry-content {
        position: relative;
        z-index: 2;
        padding: 0 0 5.625rem;
        h2 {
            margin: 2.5rem 0 1rem;
            @media (max-width: 768px) {
                margin: 2rem 0 .75rem;
            }
        }
        h3 {
            margin: 2rem 0 .75rem;
            @media (max-width: 768px) {
                margin: 1.5rem 0 .5rem;
            }
        }
        h4 {
            margin: 1.5rem 0 .5rem;
            @media (max-width: 768px) {
                margin: 1.25rem 0 .4375rem;
            }
        }
        p {
            margin: 0 0 1rem;
            line-height: calc(30/16);
            @media (max-width: 768px) {
                line-height: calc(28/15);
            }
        }
        td {
            line-height: calc(30/16);
        }
        .wp-block-media-text__content {
            padding: 0 8% 0 0;
            @media (max-width: 768px) {
                padding: 0;
            }
        }
    }
    & .nav-links {
        justify-content: center;
        margin-bottom: 5.625rem;
        padding: 4.375rem 0;
        border-top: 3px solid var(--color-bg02);
        border-bottom: 3px solid var(--color-bg02);
        @media (max-width: 768px) {
            gap: 3.125rem;
            margin-bottom: 2.125rem;
            padding: 1.875rem;
        }
        & .nav-previous {
            width: auto;
            padding: 0 5.625rem;
            flex: none;
            font-size: 1.25rem;
            @media (max-width: 768px) {
                padding: 0;
                font-size: 1rem;
            }
            & .nav-subtitle {
                position: relative;
                font-weight: 700;
                color: var(--color-main);
            }
            a {
                display: flex;
                align-items: center;
                gap: 1.25rem;
                font-weight: 700;
                color: var(--color-main);
                @media (max-width: 768px) {
                    flex-direction: column-reverse;
                    align-items: center;
                }
                span {
                    position: relative;
                    &::before {
                        position: absolute;
                        content: "";
                        bottom: -4px;
                        left: 0;
                        width: 0;
                        height: 1px;
                        background: var(--color-main);
                        transition: .3s ease;
                    }
                }
                img {
                    width: 54px;
                    @media (max-width: 768px) {
                        width: 44px;
                    }
                }
                &:hover {
                    span {
                        &::before {
                            width: 100%;
                        }
                    }
                    img {
                        width: 54px;
                        content: url("../images/icon-prev-hover.png");
                    }
                }
            }
            span.arrow {
                position: absolute;
                top: unset;
                content: "";
                top: 50%;
                left: -4rem;
                transform: translateY(-50%);
                width: 54px;
                height: 54px;
                border: 1.5px solid var(--color-main);
                border-radius: 50%;
                background: var(--color-wh);
                transition: .3s ease;
                &::after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 7px;
                    height: 12px;
                    background: url(../images/arrow-navy-prev.png), top center / contain no-repeat;

                }
            }
            &:hover {
                span.arrow {
                    background: var(--color-main);
                    &::after {
                        background: url(../images/arrow-navy-prev-white.png), top center / contain no-repeat;
                    }
                }

            }
        }
        & .nav-next {
            width: auto;
            padding: 0 5.625rem;
            flex: none;
            font-size: 1.25rem;
            @media (max-width: 768px) {
                padding: 0;
                font-size: 1rem;
            }
            & .nav-subtitle {
                position: relative;
                font-weight: 700;
                color: var(--color-main);
            }
            a {
                display: flex;
                align-items: center;
                gap: 1.25rem;
                font-weight: 700;
                color: var(--color-main);
                transition: .3s ease;
                @media (max-width: 768px) {
                    flex-direction: column;
                    align-items: center;
                }
                span {
                    position: relative;
                    &::before {
                        position: absolute;
                        content: "";
                        bottom: -4px;
                        left: 0;
                        width: 0;
                        height: 1px;
                        background: var(--color-main);
                        transition: .3s ease;
                    }
                }
                img {
                    width: 54px;
                    @media (max-width: 768px) {
                        width: 44px;
                    }
                }
                &:hover {
                    span {
                        &::before {
                            width: 100%;
                        }
                    }
                    img {
                        width: 54px;
                        content: url("../images/icon-next-hover.png");
                    }
                }
            }
            span.arrow {
                position: absolute;
                top: unset;
                content: "";
                top: 50%;
                right: -4rem;
                transform: translateY(-50%);
                width: 54px;
                height: 54px;
                border: 1.5px solid var(--color-main);
                border-radius: 50%;
                background: var(--color-wh);
                transition: .3s ease;
                &::after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 7px;
                    height: 12px;
                    background: url(../images/arrow-navy-next.png), top center / contain no-repeat;
                }
            }
            &:hover {
                span.arrow {
                    background: var(--color-main);
                    &::after {
                        background: url(../images/arrow-navy-next-white.png), top center / contain no-repeat;
                    }
                }

            }
        }
    }
    & .entry-title {
        margin-bottom: 2.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--color-bg03);
        font-size: 1.5625rem;
        color: var(--color-main);
        @media (max-width: 768px) {
            padding-bottom: .9375rem;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }
    }
    & .entry-meta {
        @media (max-width: 768px) {
            display: flex;
            align-items: center;
            gap: .75rem;
        }
    }
    & .entry-date {
        font-size: .9375rem;
        font-weight: 500;
        color: var(--color-main03);
        @media (max-width: 768px) {
            font-size: .875rem;
            white-space: nowrap;
        }
    }
    & .entry-categories {
        @media (max-width: 768px) {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }
        a {
            display: inline-block;
            padding: .125rem .375rem;
            border-radius: .1875rem;
            font-size: .875rem;
            font-weight: 500;
            color: var(--color-main03);
            word-break: keep-all;
            pointer-events: none;
            @media (max-width: 768px) {
                padding: .25rem .375rem;
                font-size: .8125rem;
            }
            &:not(:last-of-type) {
                margin-right: .5rem;
            }
        }
    }
    & .post, & .news, & .catalog, & .products {
        ul {
            list-style: disc;
            list-style-position: inside;
            li {
                &::marker {
                    line-height: 1;
                    color: var(--color-main);
                }
            }
        }
        h2 {
            position: relative;
            padding-left: 1.375rem;
            &::before {
                content: '';
                position: absolute;
                inset: -3px;
                border-radius: 50%;
                padding: 3px;
                background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                top: 48%;
                left: 0;
                transform: translateY(-50%);
                width: 14px;
                height: 14px;
            }
        }
        h3 {
            position: relative;
            margin-left: 3.125rem;
            &::before {
                position: absolute;
                content: "";
                top: 50%;
                left: -48px;
                transform: translateY(-50%);
                width: 36px;
                height: 3px;
                background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
            }
        }
    }
    & .c-single__nav {
        display: flex;
        justify-content: center;
        margin-top: 5.625rem;
        & .c-button--back {
            font-weight: 600;
            color: var(--color-main);
            span {
                transform: skewX(11deg);
            }
        }
    }
}