/* --- 変数定義 (すみれ色基調) --- */
:root {
    --funeral-violet: #f59600;       /* ★ロゴのメインオレンジへ変更 */
    --funeral-violet-dark: #d67e00;  /* ★濃いめのオレンジ（ホバーや濃いテキスト用） */
    --funeral-violet-light: #faf9f6; /* ★温かみのある超極薄アイボリー（背景用） */
    --hr-dark: #1a1a1a;
    --transition: all 0.3s ease;
}

/* --- レイアウトの基本（全セクション共通） --- */
.container {
    max-width: 1280px;   /* ★重要：1200pxより少し絞ることで、テキストが読みやすくなります */
    margin: 0 auto;      /* 左右中央寄せ */
    padding: 0 4%;       /* 画面端のセーフティエリア */
}

/* --- フェードイン演出の基本設定 --- */



/* --- Funeral Main Visual (全画面背景レイアウト) --- */
.funeral-main-visual {
    position: relative;
    min-height: 85vh; /* ナビの高さ(80px)+余白を考慮 */
    padding-top: 105px; /* top: 25px + height: 80px */
    display: flex;
    align-items: center;
    overflow: hidden;
    
    /* セクション全体に新しい背景画像を横いっぱいに設定 */
    background-image: url('./image/funeral/funeral-visual-img.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* マスクレイヤー（擬似要素）:
   左半分は文字が読めるように白を強め（透明度15%）、右側へ向かって写真をクリアに見せる設定
*/
.funeral-main-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* 左端から45%付近までは不透明度0.88、そこから右へ向けて透過 */
    background: linear-gradient(
        to right,
        rgba(252, 250, 245, 0.92) 0%,
        rgba(252, 250, 245, 0.88) 45%,
        rgba(252, 250, 245, 0.4) 60%,
        rgba(252, 250, 245, 0) 75%
    );
    z-index: 1;
    pointer-events: none;
}

/* 左側のコンテンツエリア（背景より手前に配置） */
.funeral-content-left {
    position: relative;
    z-index: 2; /* マスクレイヤーより上に配置 */
    width: 50%;  /* 左半分に収める */
    min-width: 550px;
    padding: 80px 5% 80px 10%;
    box-sizing: border-box;
}

.brand-category-group {
    margin-bottom: 30px;
    display: table; /* ★ポイント：枠の横幅を、中にあるロゴの幅（一番長い要素）に自動でピタッと合わせます */
}

.brand-tag {
    font-family: 'Montserrat', sans-serif;
    color: var(--funeral-violet);
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.2em;

    /* 3行をきれいに縦並びにする設定 */
    display: flex;
    flex-direction: column;
    gap: 10px; /* 行同士の上下のすき間 */
    width: 100%;
}

/* 1行目（FUNERAL）：左寄せ */
/* HTMLのテキストがそのまま入っているため、デフォルトで左に寄ります */

/* 2行目（ロゴ画像）：左寄せ（元のサイズを完全に維持） */
.brand-tag img {
    display: block;
    margin: 0;
}

/* 3行目（Since 2007）：ロゴの右端（枠の右端）にピッタリ合わせる */
.brand-tag .since-text {
    display: block;
    text-align: right; /* ★ロゴの幅に合わせて右寄せにします */
    white-space: nowrap;
}


.sub-category {
    display: block;
    font-size: 0.9rem;
    color: #666; /* 背景が少し透けるので、視認性のため少し濃いめに変更 */
    margin-top: 5px;
}

.funeral-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.4;
    color: var(--hr-dark);
    margin-bottom: 30px;
}

.funeral-title .phrase {
    display: block;
}

.highlight-violet {
    color: var(--funeral-violet);
}

.funeral-lead {
    font-size: 1.05rem;
    line-height: 2;
    color: #333; /* 背景が少し透けるので、視認性のため少し濃いめに変更 */
    max-width: 600px;
}

/* レスポンシブ対応（スマホ画面では全体に白を敷いて文字落ちを防ぐ） */
@media screen and (max-width: 992px) {
    .funeral-main-visual::before {
        background: rgba(252, 250, 245, 0.92); /* ★全体を温かみのあるフィルターに */
    }
    .funeral-content-left {
        width: 100%;
        min-width: 100%;
        padding: 60px 5%;
    }
}

/* Funeral Mission & Vision スタイル */
.funeral-m-v-container {
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.6); /* 柔らかな透過白 */
    border-left: 4px solid var(--funeral-violet); /* ★変数のオレンジに変更 */
    text-align: left;
}

.m-v-row {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 20px;
}

.m-v-row:last-child {
    margin-bottom: 0;
}

.m-v-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--funeral-violet); /* ★変数のオレンジに変更 */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    min-width: 80px;
    border-right: 1px solid #ddd;
}

.m-v-desc {
    font-size: 1.05rem;
    font-weight: 500;
    color: #444;
    margin: 0;
    line-height: 1.6;
}

/* --- 理念セクション完成版CSS --- */

/* 1. セクション全体の横揺れ防止 */
.funeral-philosophy {
    padding: 100px 0;
    background: #fff;
    text-align: center;
    overflow-x: hidden; /* 画面端まで突き抜ける背景のための必須設定 */
}

/* 2. 理念ボックス（Mission/Visionなども含む全体の箱） */
.philosophy-box {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 3. ラベルと見出しの中央揃えを保証 */
.section-label {
    font-family: 'Montserrat', sans-serif;
    color: var(--funeral-violet);
    letter-spacing: 0.2em;
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.philosophy-box h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
}

/* 4. 背景画像を画面右端まで広げるラッパー */
.philosophy-text-wrapper {
    position: relative; /* 背景の基点 */
    padding: 60px 0;
    margin-top: 30px;
    text-align: center;
}

/* --- 5. 背景画像（bg01.jpg）：絶対配置で右側を大胆にカバー --- */
.philosophy-text-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    
    background-image: url('./image/funeral/bg01.jpg');
    background-repeat: no-repeat;
    background-position: right center; /* 常に画面の右端を基準にする */
    
    /* ★ここを変更：contain から cover、またはパーセント指定に変えて大きく見せます */
    background-size: cover; /* または「auto 100%」や「60vw auto」など、縦横どちらかを画面にフィットさせる */

    /* マスク：左側の文字が重なる領域を自然に消していくグラデーション */
    mask-image: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0) 45%, /* 文字エリアは完全に透明化 */
        rgba(0, 0, 0, 0.2) 65%, 
        rgba(0, 0, 0, 1) 100% /* 右端に向かってしっかり表示 */
    );
    -webkit-mask-image: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0) 45%, 
        rgba(0, 0, 0, 0.2) 65%, 
        rgba(0, 0, 0, 1) 100%
    );
    
    opacity: 0.65; /* ★少し写真が薄すぎた場合は、0.5 から 0.65〜0.8 あたりに上げると存在感が出ます */
    z-index: 0;
    pointer-events: none;
}
    

/* 6. ラッパー内のテキスト */
.philosophy-text-wrapper p {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    line-height: 2.2;
    font-size: 1.1rem;
    color: #333;
    text-align: left;
}

/* --- 業務内容 (Service Grid) --- */
.funeral-services {
    padding: 100px 0;
    background: var(--funeral-violet-light); /* ★薄いアイボリー背景に変更されます */
}

.section-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 60px;
    letter-spacing: 2px;
    color: var(--hr-dark);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

/* --- サービスカード本体のスタイル（余白を維持） --- */
.service-card {
    background: #fff;
    padding: 50px 40px; /* デザイン上の余白 */
    border: 1px solid #eee;
    transition: var(--transition);
    border-top: 4px solid var(--funeral-violet);
    border-radius: 12px;
    
    /* 背景画像をカード内に収めるための必須設定 */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* --- 背景画像の設定（カードごとに適用される） --- */
.service-card.funeral-service-bg-wrapper::before {
    content: "";
    position: absolute;
    /* カードの余白(padding)に関係なく、四隅ぴったりの位置に配置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    background-image: url('./image/funeral/bg02.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover; /* カード全体を埋める */
    
    /* マスク設定：左（見える）から右（消える）へ 
       文字が重なる中央から右にかけて透明度を上げます */
mask-image: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0.1) 60%, 
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0.1) 60%, 
        rgba(0, 0, 0, 0) 100%
    );

    opacity: 0.4; /* 画像の濃さを調整（文字を読みやすく） */
    z-index: -1;  /* テキストの背面に配置 */
    pointer-events: none; /* 画像がクリックの邪魔をしないように */
}

/* --- カード内の各パーツ --- */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.service-card h3 {
    position: relative; /* 背面画像より手前に出す */
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--hr-dark);
}

.service-card h3 .eng {
    display: block;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--funeral-violet);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.service-card p {
    position: relative; /* 背面画像より手前に出す */
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444; /* 背景に重なるので少し濃いめに調整 */
}

/* --- お問い合わせ誘導 (Closing) --- */
/* --- 葬儀セクション 追記/修正版 --- */
.funeral-closing {
    padding: 80px 0; /* セクション外側の余白 */
    background-color: #f9f9f9; /* 背景との馴染みを良くする */
}

.closing-card-violet {
    position: relative;
    padding: 80px 40px; /* カード内部のしっかりとした余白 */
    background-color: var(--funeral-violet); /* すみれ色のベース */
    border-radius: 20px;
    text-align: center;
    color: #fff;
    overflow: hidden; /* 角丸からはみ出る画像をカット */
    z-index: 1;
}

/* 背景画像（bg03.jpg）を白帯なしで配置 */
.closing-card-violet::before {
    content: "";
    position: absolute;
    /* 四隅を0に固定することで白帯を完全に消去 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    background-image: url('./image/funeral/bg03.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 隙間なく敷き詰める */
    
    /* ★文字の可読性を高めるためのオーバーレイをオレンジ・ブラウンに変更 */
    background-color: rgba(214, 126, 0, 0.55); 
    background-blend-mode: multiply; /* 深みを持たせる設定 */
    
    opacity: 0.85; /* 写真の主張を抑えて高級感を出す */
    z-index: -1;   /* 文字の背面に配置 */
}

.closing-card-violet h2 {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4); /* ★オレンジ背景用に影の視認性を強化 */
}

/* お問い合わせボタンの装飾 */
.btn-primary-violet {
    display: inline-block;
    padding: 18px 50px;
    background-color: #fff; /* 白ボタンで視認性を確保 */
    color: var(--funeral-violet-dark); /* ★文字を少し濃いオレンジにすることで視認性UP */
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.btn-primary-violet:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    background-color: #fcfaf5;
    color: var(--funeral-violet); /* ★ホバー時は明るい方のオレンジ */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .closing-card-violet {
        padding: 60px 20px;
    }
    .closing-card-violet h2 {
        font-size: 1.4rem;
    }
}

/* --- Footer 調整（ロゴ中央揃え） --- */
.footer-brand .logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

/* --- Responsive (991px以下) --- */
@media screen and (max-width: 991px) {

  /* ★追加：背景の白いマスクの右側をしっかり透過させ、写真を露出させる */
    .funeral-main-visual::before {
        background: linear-gradient(
            to right,
            rgba(252, 250, 245, 0.92) 0%,   /* 左側（文字の背景）はしっかり白を敷く */
            rgba(252, 250, 245, 0.75) 45%,  /* 中央付近はほんのり透けさせる */
            rgba(252, 250, 245, 0.45) 75%,  /* 右側はお皿の絵が上品に見える中間的な薄さに */
            rgba(252, 250, 245, 0.3) 100%   /* 右端も完全に透明にせず、薄い白のベールを残す*/
        ) !important; /* 他の指定に負けないよう強制適用 */
    }  
    .funeral-main-visual {
        flex-direction: column;
        padding-top: 80px;
    }
    .brand-tag img {
        max-width: 100%; /* 横幅が画面幅（親要素）を超えないように制限 */
        height: auto;    /* 縦横比を維持して綺麗に縮小 */
    }

    .funeral-content-left {
        padding: 60px 5%;
        order: 2;
    }

    .funeral-content-right {
        height: auto;
    }

    .funeral-visual-img {
        height: 250px;   /* ←これが安定 */
    }

    .funeral-title {
        font-size: 2rem;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .closing-card-violet {
        padding: 50px 30px;
    }

    .closing-card-violet h2 {
        font-size: 1.6rem;
    }

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

        .funeral-main-visual::before {
        background: linear-gradient(
            to right,
            rgba(252, 250, 245, 0.92) 0%,   /* 左側（文字の背景）はしっかり白を敷く */
            rgba(252, 250, 245, 0.75) 65%,  /* 中央付近はほんのり透けさせる */
            rgba(252, 250, 245, 0.45) 95%,  /* 右側はお皿の絵が上品に見える中間的な薄さに */
            rgba(252, 250, 245, 0.3) 100%   /* 右端も完全に透明にせず、薄い白のベールを残す*/
        ) !important; /* 他の指定に負けないよう強制適用 */
    }  

    /* メインタイトル */
    .funeral-title {
        font-size: 1.5rem;
        line-height: 1.7;
    }
    .funeral-title .phrase {
        display: block;
        margin-bottom: 5px;
    }

    /* リード文 */
    .funeral-lead {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* セクションタイトル */
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }

    /* 理念 */
    .philosophy-box h2 {
        font-size: 1.2rem;
    }

    .philosophy-box p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    /* Mission / Vision */
    .m-v-desc {
        font-size: 0.95rem;
    }

    /* サービス */
    .service-card {
        padding: 30px 20px;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    /* クロージング */
    .closing-card-violet h2 {
        font-size: 1.4rem;
    }

    .btn-primary-violet {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}
}