/* Coding specifications and revised PSDs, October 2026. */
:root {
    --serif: "Noto Serif JP", "Yu Mincho", serif;
    --sans: "Noto Sans JP", "Yu Gothic", sans-serif;
    --header-height: 130px
}

body {
    padding-top: var(--header-height)
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-height);
    width: 100%
}

.admin-bar .site-header {
    top: 32px
}

.is-home .hero {
    margin-top: 100px
}
.hero-image {
    border-bottom-left-radius: 35px
}

.site-menu {
    width: min(633px, 100%);
    padding-right: 65px
}

.site-menu .menu-item-has-children>a {
    width: 344px
}

.site-menu .sub-menu {
    left: 354px;
    font-size: 16px
}

.site-menu a:hover,
.site-menu a:focus-visible {
    color: var(--pink)
}

.philosophy {
    min-height: 720px;
    padding-bottom: 100px
}

.philosophy-more {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0
}

.philosophy-more .button {
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px
}

.philosophy-image,
.floating-photo {
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0px), 0)
}

.floating-pictures {
    height: 240px;
    position: relative;
    margin-top: 15px;
    margin-bottom: 90px;
    pointer-events: none
}

.floating-photo {
    position: absolute;
    width: 165px;
    height: 165px;
    object-fit: cover;
    border-radius: 8px;
    top: 0;
    left: 0
}

.floating-photo.second {
    left: auto;
    right: 0;
    top: 55px;
    width: 140px;
    height: 140px
}

.hall-card-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 1.5
}

.hall-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

.hall-card:hover .hall-card-photo img,
.hall-card:focus-visible .hall-card-photo img {
    transform: scale(1.06)
}

.live-map {
    position: relative;
    background: #e9eee9
}

.live-map iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 600px
}

.company-map-block .live-map iframe {
    height: 500px
}

.live-map>a {
    position: absolute;
    right: 25px;
    bottom: 22px;
    background: white;
    padding: 8px 18px;
    font-size: 14px;
    box-shadow: 0 2px 9px #0002
}

.photo-button {
    position: relative
}

.photo-enlarge {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--pink);
    color: white;
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center
}

.partner-body>.photo-button {
    width: 100%;
    margin-bottom: 20px
}

.partner-body>.photo-button img {
    width: 100%;
    aspect-ratio: 1.8;
    object-fit: cover
}

.product-card .photo-button {
    width: 100%;
    aspect-ratio: 1
}

.product-card .photo-button img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.contact-title {
    background: var(--green);
    color: white
}

.contact-form .submit-button {
    background: var(--green);
    border-color: var(--green);
    color: white
}

.contact-form .submit-button:hover {
    background: #5f9472
}

.first-time-concept h1 {
    font-size: 28px
}

.first-time-concept .section-heading {
    margin-bottom: 45px
}

.first-time-concept .message {
    font-size: 25px;
    line-height: 2;
    margin-bottom: 100px
}

.first-time-concept img {
    height: auto;
    aspect-ratio: 2.4;
    object-fit: cover
}

.greeting h2 {
    margin-top: 55px;
    margin-bottom: 55px;
    position: relative
}

.greeting h2:first-child {
    margin-top: 0
}

.greeting h2:after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: var(--pink);
    margin: 18px auto 0
}

.greeting h3 {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 8px;
	font-weight: 700;
}

.greeting .greeting-closing {
    text-align: center;
    margin-top: 60px
}

.greeting .signature {
    margin: 35px 0 60px
}

.gallery-hero>.gallery-exterior {
    object-position: center
}

@media(max-width:1200px) {
    :root {
        --header-height: 110px
    }

    .philosophy-image.second {
        right: 0
    }
}

@media(max-width:900px) {
    .is-home .hero {
        margin-top: 60px
    }

    .philosophy {
        min-height: 620px
    }

    .philosophy-more {
        bottom: 60px
    }

    .live-map iframe {
        height: 450px
    }
}

@media(max-width:782px) {
    .admin-bar .site-header {
        top: 46px
    }
}

@media(max-width:600px) {
    :root {
        --header-height: 88px
    }

    .is-home .hero {
        margin-top: 35px
    }

    .hero-image {
        border-bottom-left-radius: 20px
    }

    .site-menu {
        width: 100%;
        padding-right: 25px
    }

    .site-menu .menu-item-has-children>a {
        width: calc(100% - 135px)
    }

    .site-menu .sub-menu {
        left: calc(100% - 123px);
        font-size: inherit
    }

    .philosophy {
        min-height: 0;
        padding-bottom: 60px
    }

    .philosophy-more {
        position: static;
        margin-top: 40px
    }

    .philosophy-more .button {
        min-width: 0;
        width: 100%;
        max-width: 340px;
        font-size: 13px
    }

    .floating-pictures {
        height: 180px;
        margin-bottom: 55px
    }

    .floating-photo {
        width: 110px;
        height: 110px
    }

    .floating-photo.second {
        width: 95px;
        height: 95px;
        top: 45px
    }

    .hall-card-photo {
        height: 100%;
        aspect-ratio: auto
    }

    .live-map iframe,
    .company-map-block .live-map iframe {
        height: 330px
    }

    .live-map>a {
        font-size: 11px;
        right: 15px;
        bottom: 15px;
        padding: 6px 12px
    }

    .first-time-concept .message {
        font-size: 17px;
        line-height: 2.3;
        margin-bottom: 65px
    }

    .greeting h2 {
        margin-bottom: 35px
    }

    .greeting h3 {
        font-size: 16px
    }

    .greeting .greeting-closing {
        text-align: left;
        margin-top: 35px
    }

    .greeting .signature {
        margin: 30px 0 45px
    }
}

@media(max-width:360px) {
    .site-menu {
        padding-left: 20px;
        padding-right: 20px
    }

    .site-menu .menu-item-has-children>a {
        width: calc(100% - 126px)
    }

    .site-menu .sub-menu {
        left: calc(100% - 115px)
    }

    .site-menu .menu-list a[href$="/first-time/"] {
        font-size: 15px;
        letter-spacing: -.035em
    }
}

@media(prefers-reduced-motion:reduce) {

    .philosophy-image,
    .floating-photo {
        transform: none !important;
        will-change: auto
    }

    .hall-card-photo img {
        transition: none
    }
}

.product-card .photo-button:after,
.partner-body .photo-button:after {
    content: none
}

@media(min-width:1201px) {
    .page-content {
        position: relative
    }

    .floating-pictures {
        position: absolute;
        top: 210px;
        left: 0;
        width: 100%;
        height: 0;
        margin: 0
    }

    .floating-photo {
        left: 25px;
        width: 120px;
        height: 120px
    }

    .floating-photo.second {
        right: 25px;
        top: 50px;
        width: 110px;
        height: 110px
    }
}

@media(max-width:600px) {
    .first-time-concept h1 {
        font-size: 23px
    }

    .first-time-concept .section-heading {
        margin-bottom: 40px
    }
}

html {
    scroll-padding-top: calc(var(--header-height) + 20px)
}

.gallery-item,
.gallery-unpictured,
.contact-form-wrap {
    scroll-margin-top: 0
}

.contact-intro .plain-phone {
    color: var(--pink)
}
/* ==========================================================================
   PSD alignment (October 2026): weights, families and sizes from the PSD
   text layers. Noto Serif JP Light/ExtraLight for copy, Noto Sans JP for
   buttons, labels and tables.
   ========================================================================== */
body {
    font-weight: 300
}

h1,
h2,
h3,
h4,
.eyebrow {
    font-weight: 300
}

.lead,
.intro .lead {
    font-weight: 200
}

/* Buttons */
.button {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400
}

.button.filled,
.button.green,
.partner-body .button {
    font-weight: 300
}

.small-note {
    font-family: var(--sans);
    font-weight: 300
}

/* Arrows drawn to match the PSD's thin arrow */
.arrow-icon {
    display: block;
    width: 36px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.arrow {
    font-size: 0;
    line-height: 0
}

.news-row .arrow {
    color: #8cc0a0
}

.news-row .arrow-icon {
    width: 24px;
    height: 15px
}

/* Header */
.site-header .brand-tagline {
    color: #282728
}

.site-header .phone-number {
    font-size: 30px
}

/* Top: hero */
.hero-copy h1 {
    color: #000;
    font-size: 30px
}

.hero-copy p {
    color: #000;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 200
}

.funeral-link {
    background: #fff url('images/funeral-link-flower.jpg') left center/auto 100% no-repeat;
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 300;
    color: #323232;
    min-height: 93px;
    padding: 15px 50px 15px 58px;
    gap: 24px
}

.funeral-link:hover {
    color: var(--pink)
}

.funeral-link span {
    font-size: 0
}

/* Top: philosophy */
.philosophy h2 {
    font-size: 30px
}

.philosophy-text p:not(.eyebrow) {
    font-size: 18px
}

/* News list (top + news page) */
.news-row time {
    font-family: var(--serif);
    font-size: 14px
}

.news-row .category,
.article-meta .category {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 300
}

.news-title {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500
}

/* Hall cards */
.hall-card h3 {
    font-size: 30px
}

.hall-card p {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

.hall-card .arrow {
    color: #fff
}

/* Top: membership */
.home-membership h2 {
    font-size: 24px
}

.home-membership h2 .large {
    font-size: 36px
}

.home-membership .membership-emphasis {
    font-size: 24px;
    color: #ff0000
}

.home-membership .membership-description {
    font-size: 18px
}

/* Top: memorial gallery promo */
.gallery-promo .eyebrow {
    font-size: 18px
}

.gallery-promo h2 {
    font-size: 36px;
    color: #323232
}

.gallery-promo p:not(.eyebrow) {
    font-size: 18px;
    color: #323232
}

/* Footer */
.footer-nav>a,
.footer-nav li {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 100;
    padding: 0 20px;
    border-left-color: #fff
}

.footer-nav>a:last-child,
.footer-nav li:last-child {
    border-right: 1px solid #fff
}

.footer-tagline {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    color: #fff
}

.footer-brand img {
    width: 335px;
    height: auto;
    margin-bottom: 0
}

.footer-brand {
    margin: 0 0 32px
}

.footer-phone {
    font-size: 36px;
    font-weight: 300;
    min-width: 392px;
    line-height: 60px;
    border-color: #fff;
    border-radius: 2px
}

.footer-address {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400
}

.privacy-link {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 100
}

.copyright {
    font-size: 12px
}

/* Facility / hall pages: spec tables */
.spec dt,
.spec dd {
    font-family: var(--sans);
    font-weight: 300;
    color: #323232
}

/* Offerings */
.offering-section .decorated-heading,
.delivery-section .decorated-heading {
    color: var(--green)
}

.product-card h3 {
    font-family: var(--sans);
    font-weight: 300;
    color: #323232
}

.product-price span {
    font-weight: 300
}

.delivery-section p {
    font-size: 18px;
    font-weight: 200
}

/* Company */
.company-concept h1 {
    font-size: 36px;
    font-weight: 200
}

.company-concept p {
    font-size: 24px;
    font-weight: 200
}

.company-concept h1 {
    margin-bottom: 20px
}

.company-table {
    font-size: 18px
}

.company-table th,
.company-table td {
    font-family: var(--sans);
    font-weight: 300;
    line-height: 30px;
    color: #323232
}

.company-table th {
    text-align: center
}

.company-table td span {
    font-weight: 500
}

.company-map-block h3 {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 400;
    color: #323232
}

/* Membership page */
.membership-about .note {
    font-family: var(--sans);
    font-weight: 400
}

.benefit-body h3 {
    font-family: var(--sans)
}

.benefit-body strong,
.benefit-body>div>span {
    font-weight: 500
}

.join-icon {
    font-size: 18px;
    font-weight: 200
}

/* Preplanning */
.checklist li,
.flow-step h4,
.flow-step p {
    font-weight: 200
}

.flow-group>h3 {
    font-size: 36px
}

.phone-panel small {
    font-family: var(--sans);
    font-weight: 300
}

/* Contact */
.contact-title h1 {
    font-family: var(--sans);
    font-weight: 500
}

.form-note {
    font-size: 14px;
    font-weight: 500;
    color: #ff0000
}

.contact-form .button {
    font-size: 16px
}

/* News article */
.article-pagination a {
    font-family: var(--sans);
    font-size: 16px;
    color: #646464
}

/* Partners */
.partner-card>h2 {
    font-weight: 500
}

.partner-benefit h3 {
    font-weight: 700
}

.partner-body small {
    font-family: var(--sans);
    font-weight: 300;
    color: #d07ba7
}

.partner-benefit p {
    color: #d07ba7;
    font-weight: 400
}

.partner-body dt,
.partner-body dd {
    font-size: 14px
}

.partner-body dt {
    font-weight: 400
}

.partner-body dd {
    font-weight: 300
}

.partner-body .button {
    font-size: 16px
}

/* First time */
.first-time-concept h1 {
    font-size: 36px;
    font-weight: 200
}

.first-time-concept .message,
.greeting h2,
.reasons h2,
.greeting p,
.greeting .signature {
    font-weight: 200
}

.greeting h2,
.reasons h2 {
    font-size: 24px
}

.greeting p {
    font-size: 18px
}

.greeting .greeting-closing {
    font-size: 24px
}

.greeting h3 {
    font-weight: 500
}

.consultation-promo p {
    font-weight: 200
}

.philosophy-more .button {
    font-size: 16px
}

.home-halls .lead {
    font-weight: 300
}

.copyright {
    font-weight: 400
}

.news-filter a,
.category-filter a {
    font-family: var(--sans);
    font-weight: 300
}

.offering-section .decorated-heading,
.delivery-section .decorated-heading,
.member-description,
.benefit-number,
.benefit-body h3,
.join-fee,
.step-number,
.contact-form label,
.plain-phone,
.article-pagination a,
.contact-form .button {
    font-weight: 400
}

.company-map-block h3 {
    font-size: 24px
}

.plain-phone {
    font-size: 50px
}

.form-note {
    font-size: 16px
}

.contact-form .button {
    font-size: 18px
}

.article-pagination a {
    font-size: 18px;
    color: #969696
}

.phone-panel span {
    font-size: 60px
}

/* Top: membership block positions from the PSD (1400px artboard) */
.home-membership .membership-description {
    max-width: 600px;
    font-feature-settings: "palt"
}

@media(min-width:1201px) {
    .home-membership .season {
        width: 254px;
        top: 149px
    }

    .home-membership .card {
        width: 307px;
        top: 385px;
        bottom: auto
    }
}

@media(min-width:1201px) and (max-width:1599px) {
    .home-membership .season {
        left: 48px
    }

    .home-membership .card {
        right: calc(50% - 605px)
    }
}

/* Sub-page intro: gap between the page title and the lead copy (PSD: ~38px) */
.intro .section-heading {
    margin-bottom: 38px
}

/* Facility: the first hall heading sits ~220px below the lead in the PSD */
.facility-item:first-child {
    margin-top: 145px
}

/* Offerings: grid width, price box and enlarge icon from 05_offerings_pc.psd */
.product-grid {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    gap: 70px 40px
}

.product-price {
    background: #d07ba7;
    padding: 9px 5px;
    line-height: 1.55
}

.product-price span:last-child {
    font-weight: 700
}

.photo-enlarge {
    width: 22px;
    height: 22px;
    font-size: 0;
    background: rgb(255 255 255 / 45%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23b4aab0' stroke-width='1.2'%3E%3Cpath d='M12.5 5.5h4v4M16.5 5.5l-5 5M9.5 16.5h-4v-4M5.5 16.5l5-5'/%3E%3C/svg%3E") center/100% no-repeat
}

.wide-width>.small-note:first-child {
    max-width: 1000px;
    margin-top: -40px;
    margin-bottom: 120px
}

.small-note a {
    color: #1d3fe0;
    text-decoration: underline
}

.small-note a:hover {
    color: var(--pink)
}

.intro .section-heading:last-child {
    margin-bottom: 0
}

/* Membership page: card position and benefit card proportions from 06_menbership_pc.psd */
@media(min-width:1201px) {
    .membership-about .card {
        width: 376px;
        top: 231px;
        right: calc(50% - 621px)
    }

    .benefit-body {
        min-height: 240px;
        padding: 10px 22px 10px 39px
    }

    .benefit-body img {
        flex: none;
        width: 220px
    }
}

/* Membership: join icons in a 992px ruled row, ornament under the fee */
.join-icons {
    max-width: 992px;
    margin: 50px auto 40px
}

.join-icon {
    border-left: 1px solid var(--line);
    border-right: 0;
    padding: 0 10px;
    min-height: 202px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    white-space: nowrap
}

.join-icon:last-child {
    border-right: 1px solid var(--line)
}

.join-icon img {
    margin: 0
}

.join-section .join-fee::after {
    content: "";
    display: block;
    width: 304px;
    height: 51px;
    margin: 14px auto 0;
    background: url('images/join-ornament.png') center/contain no-repeat
}

@media(max-width:900px) {
    .join-icon {
        min-height: 0;
        padding: 10px;
        white-space: normal
    }
}

/* Preplanning / first time: checklist rows (60px) and phone panel (170px, #d07ba7) */
.checklist li {
    padding: 10px 30px
}

.phone-panel {
    background: #d07ba7;
    padding: 22px 40px
}

.phone-panel span {
    line-height: 1.3
}

/* Contact: rows ruled at 150px with borderless fields (09_Contact_pc.psd) */
.plain-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.plain-phone svg {
    width: .62em;
    height: .7em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1
}

.contact-form .form-row {
    align-items: center;
    min-height: 150px;
    padding: 20px
}

.contact-form .form-row:first-of-type {
    border-top-color: #9a9a96
}

.form-row>label {
    padding-top: 0
}

.contact-form input:not([type=checkbox]),
.contact-form textarea {
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-size: 16px
}

.contact-form input:not([type=checkbox]):focus,
.contact-form textarea:focus {
    background: #fff;
    outline: 1px solid var(--line);
    outline-offset: 4px
}

.contact-form .form-row:has(textarea) {
    align-items: start;
    padding-top: 40px;
    border-bottom-color: #9a9a96
}

.contact-form .form-row:has(textarea)>label {
    padding-top: 10px
}

.contact-form textarea {
    min-height: 230px
}

.contact-form fieldset.form-row {
    min-height: 150px;
    padding-top: 30px;
    padding-bottom: 30px
}

.contact-form legend {
    top: 50%;
    transform: translateY(-50%)
}

.checkbox-grid {
    gap: 4px 25px
}

@media(max-width:600px) {
    .contact-form .form-row,
    .contact-form fieldset.form-row {
        min-height: 0
    }

    .contact-form .form-row {
        padding: 24px 0
    }

    .contact-form fieldset.form-row {
        padding-top: 58px
    }

    .contact-form .form-row:has(textarea) {
        padding-top: 24px
    }

    .contact-form legend {
        top: 21px;
        transform: none
    }
}

/* News article (10_Post_pc.psd) */
.article-heading {
    min-height: 350px
}

.article-heading h1 {
    font-size: 36px;
    font-weight: 400
}

.article-body>p:not(.draft-note) {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 2
}

.article-pagination a {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.nav-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3.5 9 7l-4 3.5z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat
}

.nav-icon.prev {
    transform: scaleX(-1)
}

@media(max-width:600px) {
    .article-heading {
        min-height: 0
    }

    .article-heading h1 {
        font-size: 25px
    }

    .article-body>p:not(.draft-note) {
        font-size: 14px
    }
}

/* First time (15_First-Time_pc.psd) */
.first-time-concept h1 {
    font-feature-settings: "palt"
}

.first-time-concept .section-heading {
    margin-bottom: 16px
}

.first-time-concept .message {
    font-size: 24px;
    line-height: 2
}

.greeting h2::after {
    background: #646464;
    height: 1px
}

.footer-phone .tel-label {
    font-size: 24px
}

@media(max-width:600px) {
    .footer-nav>a,
    .footer-nav li {
        font-size: 11px;
        padding: 0 9px
    }

    .footer-tagline {
        font-size: 18px
    }

    .footer-brand img {
        width: 240px;
        height: auto
    }

    .footer-phone {
        min-width: 280px;
        max-width: 100%;
        font-size: 25px;
        line-height: 48px
    }

    .footer-phone .tel-label {
        font-size: 17px
    }

    .footer-address {
        font-size: 12px
    }

    .funeral-link {
        font-size: 12px;
        min-height: 52px;
        padding: 10px 20px 10px 40px
    }

    .philosophy h2 {
        font-size: 23px
    }

    .hero-copy h1 {
        font-size: 24px
    }

    .home-membership .membership-emphasis {
        font-size: 17px
    }

    .home-membership .membership-description,
    .gallery-promo p:not(.eyebrow) {
        font-size: 14px
    }

    .gallery-promo h2 {
        font-size: 23px
    }

    .home-membership h2 .large {
        font-size: 26px
    }

    .hall-card h3 {
        font-size: 20px
    }

    .company-concept h1 {
        font-size: 24px
    }

    .company-concept p {
        font-size: 18px
    }

    .company-table {
        font-size: 14px
    }

    .company-map-block h3 {
        font-size: 19px
    }

    .first-time-concept h1 {
        font-size: 24px
    }

    .first-time-concept .message,
    .greeting .greeting-closing {
        font-size: 17px
    }

    .greeting p,
    .delivery-section p,
    .philosophy-text p:not(.eyebrow) {
        font-size: 14px
    }

    .phone-panel span {
        font-size: 35px
    }

    .plain-phone {
        font-size: 32px
    }

    .flow-group>h3 {
        font-size: 25px
    }

    .join-icon {
        font-size: 12px
    }
}

@media(max-width:600px) {
    .funeral-link .arrow-icon,
    .hall-card .arrow-icon {
        width: 26px;
        height: 16px
    }
}

/* Contact Form 7: keep the theme's form layout around CF7's wrapper spans */
.contact-form .hidden-fields-container {
    display: none
}

.contact-form .form-row>.wpcf7-form-control-wrap {
    display: block;
    min-width: 0
}

.contact-form .checkbox-grid>.wpcf7-form-control-wrap,
.contact-form .checkbox-grid .wpcf7-checkbox {
    display: contents
}

.contact-form .wpcf7-list-item {
    margin: 0
}

.contact-form .checkbox-grid label,
.contact-form .consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer
}

.contact-form .checkbox-grid label {
    font-size: 15px;
    line-height: 1.8
}

.contact-form .consent {
    display: flex;
    justify-content: center
}

.contact-form .consent a {
    color: #a65a84;
    text-decoration: underline
}

.contact-form input.submit-button {
    display: flex;
    margin: 0 auto;
    min-width: 400px;
    cursor: pointer
}

.contact-form .wpcf7-spinner {
    display: block;
    margin: 16px auto 0
}

.contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #e0201f;
    font-family: var(--sans);
    font-size: 14px
}

.contact-form .wpcf7-not-valid {
    background: #fff
}

.contact-form .wpcf7-response-output {
    margin: 40px 0 0;
    padding: 18px 24px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.8;
    text-align: center
}

.contact-form .wpcf7-response-output:empty {
    display: none
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--green)
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-color: #e0201f;
    color: #c0201f
}

@media(max-width:600px) {
    .contact-form input.submit-button {
        min-width: 0;
        width: 100%
    }

    .contact-form .checkbox-grid label {
        font-size: 13px
    }
}

.contact-form input[type=submit].submit-button {
    width: auto;
    min-height: 62px;
    padding: 12px 30px;
    border: 1px solid var(--green);
    border-radius: 36px;
    background: var(--green);
    color: #fff;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none
}

.contact-form input[type=submit].submit-button:hover {
    background: #5f9472;
    border-color: #5f9472
}

.contact-form input[type=submit].submit-button:focus {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    background: var(--green)
}

@media(max-width:600px) {
    .contact-form input[type=submit].submit-button {
        width: 100%;
        font-size: 15px
    }
}

/* Top: recruitment banner (01_TOP-rec_pc.psd) */
.recruitment-banner {
    min-height: 238px;
    padding: 26px 40px 24px
}

.recruitment-banner {
    background: #fff
}

.recruitment-banner>img {
    left: auto;
    width: auto;
    max-width: none;
    height: 100%;
    aspect-ratio: 857/480
}

.recruitment-banner:before {
    background: linear-gradient(90deg, #fff 0%, #fff 39%, #ffffff00 50%)
}

.recruitment-banner h2 {
    font-family: var(--sans);
    font-size: 36px;
    font-weight: 300;
    color: #ff0000;
    line-height: 1.3;
    margin: 0 0 16px -40px;
    padding: 0 0 8px 40px;
    border-bottom: 1px solid #646464;
    width: max-content;
    padding-right: 120px
}

.recruitment-banner p {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    color: #000;
    width: 330px;
    max-width: 56%;
    font-feature-settings: "palt"
}

.recruitment-banner:hover h2 {
    color: var(--pink)
}

@media(min-width:601px) and (max-width:900px) {
    .funeral-link {
        font-size: 15px;
        min-height: 70px;
        padding: 12px 25px 12px 50px
    }
}

@media(max-width:1200px) {
    .recruitment-banner h2 {
        font-size: 27px
    }

    .recruitment-banner p {
        font-size: 15px
    }
}

@media(max-width:600px) {
    .recruitment-banner {
        min-height: 178px;
        padding: 16px 20px
    }

    .recruitment-banner:before {
        background: linear-gradient(90deg, #fffffff2 0%, #ffffffe8 52%, #ffffff11 100%)
    }

    .recruitment-banner>img {
        width: 100%;
        aspect-ratio: auto
    }

    .recruitment-banner h2 {
        font-size: 22px;
        margin-left: -20px;
        padding-left: 20px;
        padding-right: 40px
    }

    .recruitment-banner p {
        font-size: 12px;
        width: 60%
    }
}

/* ==========================================================================
   Mini photos (October 2026 memo): 大150px / 小110px, PC only, never over text
   ========================================================================== */
.floating-pictures {
    display: none
}

.mini-photos {
    display: none
}

@media(min-width:601px) {
    .page-content {
        position: relative
    }

    .mini-photos {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none
    }

    .mini-photo {
        position: absolute;
        top: var(--y, 0px);
        left: clamp(8px, calc(50% + var(--x)), calc(100% - var(--w) - 8px));
        width: var(--w);
        height: var(--w);
        object-fit: cover;
        border-radius: 8px;
        will-change: transform;
        transform: translate3d(0, var(--parallax-y, 0px), 0)
    }
}

/* Scroll animations: content rises softly, mini photos zoom-fade in.
   Hidden states apply only when JavaScript has marked the page (.js). */
.js .reveal {
    transition: opacity .9s ease, translate .9s cubic-bezier(.22, .61, .36, 1)
}

.js .reveal:not(.is-visible) {
    opacity: 0;
    translate: 0 40px
}

.js .zoom-in {
    transition: opacity .8s ease, scale .8s cubic-bezier(.34, 1.2, .64, 1)
}

.js .zoom-in:not(.is-visible) {
    opacity: 0;
    scale: .6
}

@media(prefers-reduced-motion:reduce) {
    .js .reveal,
    .js .zoom-in {
        opacity: 1;
        translate: none;
        scale: none;
        transition: none
    }

    .mini-photo {
        transform: none !important
    }
}

/* Privacy policy */
.privacy-policy h2 {
    font-size: 22px;
    margin: 50px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line)
}

.privacy-policy h2:first-child {
    margin-top: 0
}

.privacy-policy p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 0
}

@media(max-width:600px) {
    .privacy-policy h2 {
        font-size: 18px;
        margin-top: 36px
    }

    .privacy-policy p {
        font-size: 14px
    }
}

/* ==========================================================================
   SP (≤600px) from the October 2026 SP PSDs
   ========================================================================== */
@media(max-width:600px) {
    /* Header: tagline above the logo, no phone icon (the number is in the menu) */
    .brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .brand-tagline {
        display: block;
        font-size: 12px;
        line-height: 1.2;
        color: #282728
    }

    .brand img {
        width: 167px
    }

    .header-phone {
        display: none
    }

    /* Top: main visual full width (01_TOP_sp.psd) */
    .is-home .hero {
        margin: 0;
        width: 100%;
        height: 125vw;
        min-height: 0;
        max-height: 640px;
        border-radius: 0
    }

    .hero-image {
        border-radius: 0
    }

    .hero-copy {
        left: 20px;
        right: 20px;
        top: 72px
    }

    .hero-copy h1 {
        font-size: 28px;
        line-height: 1.45;
        max-width: 290px
    }

    .hero-copy p {
        font-size: 15px;
        line-height: 1.5;
        max-width: 200px;
        margin-top: 14px
    }

    .funeral-link {
        top: calc(100% + 142px);
        left: 30px;
        right: 30px;
        min-height: 52px;
        padding: 10px 20px;
        border: 1px solid #9a9a8f;
        border-radius: 26px;
        background-size: auto 100%;
        font-size: 16px;
        justify-content: center
    }

    .funeral-link>span {
        display: none
    }

    .philosophy-image {
        top: -56px;
        right: 10px;
        width: 135px;
        height: 135px
    }

    .philosophy-text {
        padding-top: 185px
    }

    /* Offerings: text first, map below (05_offerings_sp.psd) */
    .delivery-section {
        min-height: 199vw;
        padding-top: 55px
    }

    .delivery-section .content-width {
        position: static
    }

    .delivery-section img {
        position: absolute;
        width: 236vw;
        max-width: none;
        left: -81.5vw;
        top: 0;
        margin: 0;
        opacity: 1
    }

    .delivery-section .decorated-heading,
    .delivery-section p {
        position: relative;
        z-index: 1
    }

    .delivery-section p {
        font-size: 15px;
        line-height: 2
    }

    /* Footer: no link list on SP */
    .footer-nav {
        display: none
    }
}

/* Pager: PC ◀ 1 2 3 … ▶ / SP «« ◀ Page 1/10 ▶ »» */
.sz-pager {
    align-items: center;
    gap: 10px;
    font-family: var(--sans)
}

.sz-pager .pager-numbers {
    display: flex;
    gap: 10px
}

.sz-pager .page-numbers {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    background: #fff;
    font-size: 14px;
    color: #646464
}

.sz-pager .dots {
    background: none
}

.sz-pager .prev,
.sz-pager .next,
.sz-pager .first,
.sz-pager .last {
    font-size: 11px
}

.sz-pager .prev {
    margin-right: 24px
}

.sz-pager .next {
    margin-left: 24px
}

.sz-pager .is-disabled {
    opacity: .45
}

.sz-pager .sp-only {
    display: none
}

/* Partner name is a button so the card can fold on SP; on PC it reads as a heading */
.partner-toggle {
    all: unset;
    display: block;
    width: 100%;
    cursor: default
}

@media(max-width:600px) {
    .sz-pager {
        justify-content: space-between;
        gap: 0
    }

    .sz-pager .sp-only {
        display: grid
    }

    .sz-pager .pc-only {
        display: none
    }

    .sz-pager {
        width: auto;
        margin: 70px 20px
    }

    .sz-pager .first,
    .sz-pager .last {
        letter-spacing: -3px;
        font-size: 9px
    }

    .partner-toggle {
        word-break: keep-all;
        overflow-wrap: anywhere
    }

    .sz-pager .pager-count {
        flex: 1;
        text-align: center;
        font-size: 13px;
        color: #646464
    }

    .sz-pager .prev,
    .sz-pager .next {
        margin: 0 0 0 18px
    }

    .sz-pager .prev {
        margin: 0 0 0 18px
    }

    .sz-pager .next {
        margin: 0 18px 0 0
    }

    /* Partners accordion (14_teikei_sp.psd) */
    .partner-card {
        background: none;
        box-shadow: none
    }

    .partner-card>h2 {
        position: relative;
        margin: 0;
        border-radius: 6px;
        padding: 0
    }

    .partner-toggle {
        box-sizing: border-box;
        min-height: 71px;
        padding: 16px 52px;
        cursor: pointer;
        text-align: center;
        line-height: 1.4
    }

    .partner-toggle:focus-visible {
        outline: 2px solid var(--pink);
        outline-offset: 3px
    }

    .partner-toggle::after {
        content: "";
        position: absolute;
        right: 22px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-75%) rotate(45deg)
    }

    .partner-toggle[aria-expanded=false]::after {
        transform: translateY(-25%) rotate(-135deg)
    }

    .partner-card.is-open>h2 {
        border-radius: 6px 6px 0 0
    }

    .partner-card:not(.is-open) .partner-body {
        display: none
    }

    .partner-card.is-open .partner-body {
        background: #fff;
        border-radius: 0 0 6px 6px
    }
}

/* ==========================================================================
   Header (01_navi_pc_1029.psd): 2-line tagline, larger logo, phone label above
   the number. Same layout from PC down to 1001px.
   ========================================================================== */
.site-header .brand {
    gap: 29px
}

.site-header .brand-tagline {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: #282728
}

.site-header .brand img {
    width: 335px;
    height: auto
}

.header-phone {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px
}

.header-phone>span:first-child {
    font-size: 14px;
    line-height: 1.2
}

@media(min-width:1001px) and (max-width:1200px) {
    :root {
        --header-height: 130px
    }

    .site-header {
        height: 130px;
        padding-left: 40px
    }

    .site-header .brand-tagline,
    .header-phone>span:first-child {
        display: block
    }

    .menu-toggle {
        width: 72px;
        height: 72px
    }
}

@media(max-width:1000px) and (min-width:601px) {
    .site-header .brand img {
        width: 260px
    }
}

@media(max-width:600px) {
    .brand-break {
        display: none
    }

    .site-header .brand {
        gap: 4px
    }

    .site-header .brand-tagline {
        font-size: 12px;
        line-height: 1.2
    }

    .site-header .brand img {
        width: 167px
    }
}

/* Top: membership moved down, autumn photo + two mini photos above it (01_TOP_pc_1029.psd).
   Fixed sizes, positioned from the page centre. */
.home-mini {
    display: none
}

@media(min-width:601px) {
    .home-membership {
        padding-top: 419px
    }

    .home-membership .season,
    .home-mini {
        position: absolute;
        display: block;
        object-fit: cover;
        border-radius: 8px
    }

    .home-membership .season {
        top: 78px;
        left: max(16px, calc(50% - 352px));
        width: 254px;
        height: 254px
    }

    .home-mini.small {
        top: 38px;
        left: calc(50% + 39px);
        width: 110px;
        height: 110px
    }

    .home-mini.large {
        top: 218px;
        left: calc(50% + 199px);
        width: 150px;
        height: 150px
    }

}

@media(min-width:1201px) {
    .home-membership .card {
        top: 604px;
        right: calc(50% - 581px);
        bottom: auto;
        width: 307px
    }
}

/* Memorial gallery: an item can be forced to "image left" regardless of its position (プリザーブドフラワー). */
@media(min-width:601px) {
    .gallery-item.image-left:nth-child(n) {
        grid-template-columns: 400px 1fr
    }

    .gallery-item.image-left:nth-child(n) .gallery-item-pictures {
        grid-column: 1;
        grid-row: 1
    }

    .gallery-item.image-left:nth-child(n) .gallery-item-copy {
        grid-column: 2;
        grid-row: 1
    }

    .gallery-item.image-left:nth-child(n) h2 {
        padding-left: 88px
    }

    .gallery-item.image-left:nth-child(n) h2:after {
        left: calc(var(--gallery-gap) * -1);
        right: 0;
        background:
            url('images/gallery-heading-wave.png') 39px 0/87px 30px no-repeat,
            linear-gradient(#d07ba7, #d07ba7) 0 2px/41px 2px no-repeat,
            linear-gradient(#d07ba7, #d07ba7) 125px 26px/100% 2px no-repeat
    }
}

@media(min-width:601px) and (max-width:1200px) {
    .gallery-item.image-left:nth-child(n) {
        grid-template-columns: 36% 1fr
    }
}

/* SP top: keep the funeral link (it sits below the hero) above the philosophy section so it can be tapped */
@media(max-width:600px) {
    .is-home .hero {
        z-index: 1
    }

    .philosophy-image {
        z-index: 2
    }
}

/* Offerings: map size and position from 05_offerings_pc_1031.psd */
@media(min-width:1201px) {
    .delivery-section {
        min-height: 654px
    }

    .delivery-section .decorated-heading {
        margin-bottom: 80px
    }

    .delivery-section img {
        width: 1207px;
        left: -480px;
        top: -400px
    }
}

/* Membership benefits: the number stays larger than 「％割引」 at every width */
.benefit-body strong span {
    font-size: .86em
}

@media(max-width:1200px) {
    .benefit-body>div>span {
        font-size: 30px
    }
}

@media(max-width:900px) {
    .benefit-body>div>span {
        font-size: 24px
    }
}

@media(max-width:1200px) {
    .benefit-body h3 span {
        font-size: inherit
    }
}

.privacy-policy .privacy-contact {
    margin-top: 40px
}

/* Longer hall names wrap between 「通夜会場」 and 「別館…」, never mid-word */
.hall-card h3 {
    word-break: keep-all
}

/* First time: 全葬連 安心度調査 AAA (first-time_1107.psd) */
.aaa-rating {
    margin-top: 100px;
    text-align: center
}

.aaa-rating p {
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.45;
    color: #000;
    margin: 0 0 36px
}

.aaa-rating img {
    width: 440px;
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

@media(max-width:600px) {
    .aaa-rating {
        margin-top: 60px
    }

    .aaa-rating p {
        font-size: 16px;
        margin-bottom: 24px
    }

    .aaa-rating img {
        width: 280px
    }
}