/* =========================================================
   本日の訃報 個別ページ
   fuhou-single.css
========================================================= */


/* =========================================================
   基本レイアウト
========================================================= */

.fuhou-single {
    --fuhou-accent: #829bb8;
    --fuhou-pale: #f3f6f9;
    --fuhou-border: #dce3e9;

    width: 100%;
    padding: 58px 20px 75px;

    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1600px auto;

    color: #333;
    box-sizing: border-box;
	position: relative;
overflow: hidden;
}


/* 女性 */

.fuhou-single--female {
    --fuhou-accent: #c995aa;
    --fuhou-pale: #fbf5f7;
    --fuhou-border: #ead8df;


}


/* 男性 */

.fuhou-single--male {
    --fuhou-accent: #829bb8;
    --fuhou-pale: #f3f6f9;
    --fuhou-border: #dce3e9;


}

.fuhou-single__inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}


/* =========================================================
   上部
========================================================= */

.fuhou-single__header {
    position: relative;
    margin: 0 0 34px;
    text-align: center;
}


.fuhou-single__eyebrow {
    margin: 0 0 13px;
    color: #69657a;

    font-family:
        "Yu Mincho",
        YuMincho,
        "Hiragino Mincho ProN",
        serif;

    font-size: 16px;
    letter-spacing: .12em;
}


.fuhou-single__ornament {
    display: block;
    position: relative;

    width: 46px;
    height: 1px;

    margin: 0 auto 24px;

    background: var(--fuhou-accent);
}


.fuhou-single__ornament:after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    background: var(--fuhou-accent);

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.fuhou-single__name {
    margin: 0;

    color: #34304f;

    font-family:
        "Yu Mincho",
        YuMincho,
        "Hiragino Mincho ProN",
        serif;

    font-size: 33px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
}


.fuhou-single__name span {
    margin-left: 7px;

    font-size: .72em;
    font-weight: 400;
}


/* =========================================================
   逝去のご通知
========================================================= */

.fuhou-single__message {
    margin: 0 auto 48px;
    padding: 27px 25px;

    background: var(--fuhou-pale);

    border-top: 1px solid var(--fuhou-border);
    border-bottom: 1px solid var(--fuhou-border);

    text-align: left;
}


.fuhou-single__message p {
    margin: 0 0 7px;

    color: #3f3d46;

    font-family:
        "Meiryo",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;

    font-size: 16px;
    line-height: 1.9;
}


.fuhou-single__message p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   葬儀日程
========================================================= */

.fuhou-single__section {
    margin: 0 0 45px;
}


.fuhou-single__section-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin: 0 0 9px;
}


.fuhou-single__heading-mark {
    display: block;

    width: 8px;
    height: 8px;

    background: var(--fuhou-accent);

    transform: rotate(45deg);
}


.fuhou-single__section-heading h2 {
    margin: 0;
    padding: 0;

    border: 0;
    background: none;

    color: #34304f;

    font-family:
        "Yu Mincho",
        YuMincho,
        "Hiragino Mincho ProN",
        serif;

    font-size: 23px;
    font-weight: 500;
    line-height: 1.5;
}


.fuhou-single__section-lead {
    margin: 0 0 25px;

    color: #666;

    font-size: 15px;
    text-align: center;
}


/* =========================================================
   葬儀情報カード
========================================================= */

.fuhou-single__details {
    overflow: hidden;

    border: 1px solid var(--fuhou-border);
    border-radius: 7px;

    background: #fff;
}


.fuhou-single__detail {
    display: grid;

    grid-template-columns: 145px 1fr;

    min-height: 58px;

    border-bottom: 1px solid #e7e7e7;
}


.fuhou-single__detail:last-child {
    border-bottom: 0;
}


.fuhou-single__label {
    display: flex;
    align-items: center;

    padding: 15px 20px;

    background: #f8f7fa;

    color: #555269;

    font-size: 15px;
    font-weight: 600;
}


.fuhou-single__value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 14px;

    padding: 15px 22px;

    color: #333;

    font-size: 16px;
    line-height: 1.75;
}


.fuhou-single__value a {
    color: #333;
    text-decoration: none;
}


.fuhou-single__detail--important
.fuhou-single__label {
    background: var(--fuhou-pale);
    color: #39354e;
}


.fuhou-single__detail--important
.fuhou-single__value {
    color: #34304f;
}


.fuhou-single__date {
    font-weight: 600;
}


.fuhou-single__time {
    color: #34304f;

    font-size: 17px;
    font-weight: 600;
}


/* =========================================================
   一般焼香
========================================================= */

.fuhou-single__incense {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 20px 0 0;
    padding: 17px 20px;

    background: var(--fuhou-pale);

    border: 1px solid var(--fuhou-border);
    border-radius: 7px;
}


.fuhou-single__incense-label {
    color: #59556a;

    font-size: 14px;
}


.fuhou-single__incense strong {
    color: #34304f;

    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   ご遺族・安置場所
========================================================= */

.fuhou-single__family {
    margin: 42px 0 0;
    padding: 25px 34px;

    border: 1px solid var(--fuhou-border);
    border-radius: 7px;

    background: #fff;

    text-align: left;
}


/* ご住所 */

.fuhou-single__family-address {
    position: relative;

    margin: 0;
    padding: 12px 0 12px 95px;

    border-bottom: 1px dotted #ddd;

    color: #333;

    font-size: 15px;
    line-height: 1.7;
}


.fuhou-single__family-address:before {
    content: "ご住所";

    position: absolute;
    left: 0;
    top: 12px;

    width: 80px;

    color: #6a6870;

    font-size: 14px;
}


/* 喪主 */

.fuhou-single__chief {
    display: grid;

    grid-template-columns: 95px 1fr;

    align-items: center;

    gap: 0;

    margin: 0;
    padding: 12px 0;

    border-bottom: 1px dotted #ddd;

    color: #3d3b43;
}


.fuhou-single__chief span {
    color: #6a6870;

    font-size: 14px;
}


.fuhou-single__chief strong {
    color: #2f2b46;

    font-family:
        "Yu Mincho",
        YuMincho,
        "Hiragino Mincho ProN",
        serif;

    font-size: 19px;
    font-weight: 600;
    letter-spacing: .04em;
}


/* 安置場所・連絡先 */

.fuhou-single__rest,
.fuhou-single__contact {
    display: grid;

    grid-template-columns: 95px 1fr;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px dotted #ddd;
}


.fuhou-single__contact {
    border-bottom: 0;
}


.fuhou-single__rest span,
.fuhou-single__contact span {
    color: #6a6870;

    font-size: 14px;
}


.fuhou-single__rest strong {
    color: #34304f;

    font-size: 15px;
    font-weight: 600;
}


.fuhou-single__contact a {
    color: #34304f;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   一覧へ戻る
========================================================= */

.fuhou-single__back {
    margin: 38px 0 0;

    text-align: center;
}


.fuhou-single__back a {
    display: inline-block;

    min-width: 180px;

    padding: 11px 25px;

    border: 1px solid #8174aa;
    border-radius: 4px;

    background: #fff;

    color: #51457e;

    font-size: 14px;
    text-decoration: none;

    transition: .2s ease;
}


.fuhou-single__back a:hover {
    background: #51457e;

    color: #fff;
}


/* =========================================================
   スマートフォン
========================================================= */

@media screen and (max-width: 767px) {

.fuhou-single {
    padding: 38px 15px 55px;
    background-size: 1050px auto;
    background-position: center top;
}


    .fuhou-single__header {
        margin-bottom: 27px;
    }


    .fuhou-single__eyebrow {
        font-size: 14px;
    }


    .fuhou-single__ornament {
        margin-bottom: 20px;
    }


    .fuhou-single__name {
        font-size: 26px;
    }


    .fuhou-single__message {
        margin-bottom: 38px;
        padding: 22px 15px;
    }


    .fuhou-single__message p {
        font-size: 14px;
        line-height: 1.85;
    }


    .fuhou-pc {
        display: none;
    }


    .fuhou-single__section-heading h2 {
        font-size: 21px;
    }


    .fuhou-single__section-lead {
        margin-bottom: 20px;
    }


    /* 葬儀情報 */

    .fuhou-single__detail {
        display: block;

        min-height: 0;
    }


    .fuhou-single__label {
        display: block;

        padding: 9px 15px;

        font-size: 13px;
    }


    .fuhou-single__value {
        display: block;

        padding: 12px 15px 15px;

        font-size: 14px;
    }


    .fuhou-single__date,
    .fuhou-single__time {
        display: block;
    }


    .fuhou-single__time {
        margin-top: 3px;

        font-size: 16px;
    }


    /* 一般焼香 */

    .fuhou-single__incense {
        display: block;

        padding: 15px;

        text-align: center;
    }


    .fuhou-single__incense-label {
        display: block;

        margin-bottom: 5px;
    }


    .fuhou-single__incense strong {
        font-size: 15px;
    }


    /* ご遺族情報 */

    .fuhou-single__family {
        margin-top: 32px;
        padding: 18px 15px;
    }


    .fuhou-single__family-address {
        padding: 11px 0;
    }


    .fuhou-single__family-address:before {
        position: static;

        display: block;

        width: auto;

        margin-bottom: 4px;

        font-size: 13px;
    }


    .fuhou-single__chief,
    .fuhou-single__rest,
    .fuhou-single__contact {
        grid-template-columns: 80px 1fr;

        padding: 11px 0;
    }


    .fuhou-single__chief span,
    .fuhou-single__rest span,
    .fuhou-single__contact span {
        font-size: 13px;
    }


    .fuhou-single__chief strong {
        font-size: 17px;
    }


    .fuhou-single__rest strong {
        font-size: 14px;
    }


    .fuhou-single__contact a {
        font-size: 15px;
    }


    /* 戻る */

    .fuhou-single__back {
        margin-top: 35px;
    }

}

/* =========================================================
   訃報ページ 花背景
========================================================= */

.fuhou-single:before {
    content: "";
    position: absolute;
    z-index: 0;

    top: 0;

    /*
     * Attitude側の左右余白より外へ出す
     */
    left: -40px;
    right: -40px;

    height: 1100px;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    opacity: .30;

    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 55%,
        rgba(0, 0, 0, .7) 70%,
        rgba(0, 0, 0, .25) 85%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 55%,
        rgba(0, 0, 0, .7) 70%,
        rgba(0, 0, 0, .25) 85%,
        transparent 100%
    );

    pointer-events: none;
}


/* 女性 */

.fuhou-single--female:before {
    background-image:
        url("https://www.ceremony-takahata.com/gif/fuhou-bg-female.png");
}


/* 男性 */

.fuhou-single--male:before {
    background-image:
        url("https://www.ceremony-takahata.com/gif/fuhou-bg-male.png");
}


/* 本文を花背景より前面へ */

.fuhou-single__inner {
    position: relative;
    z-index: 1;
}