@charset "UTF-8";

/* ==========================================================================
   freedom.php（人生も葬儀ももっと自由でいい）専用スタイル
   構造：リード文の下に 3 ストーリー（time / space / freedom）＋ 締めの文 ＋ WP事例
   body.freedom 配下にスコープ
   ========================================================================== */

/* === セクション全体 === */
.freedom .freedom-stories {
    padding: 60px 0 0;           /* 下余白を 0 にして締めセクションと密着 */
    background-color: #fff;
}

/* === ストーリーカードの基本枠（コンテンツ間余白なし／白カード） === */
.freedom .freedom-story {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 30px 60px;
    margin: 0 auto;
    max-width: 1000px;
    background-color: #fff;
    border-radius: 8px;
}
.freedom .freedom-story:last-of-type {
    margin-bottom: 0;
}

/* ==========================================================================
   style-time / style-freedom / style-space 共通：構造のみ
   方向依存プロパティ（grid-template-areas / 背景リボン / mask / 画像寄せ）は
   下の各 style ブロックに分散して定義する
   ========================================================================== */
.freedom .freedom-story[class*="--style-"] {
    position: relative;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 60px;
    row-gap: 8px;
    align-items: start;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    border-radius: 0;
    z-index: 1;                  /* time/freedom を前面に：space からはみ出したリボン上端を背景色で隠す */
}
/* space は背面に：上にはみ出したリボンの上端が上のtimeの背景色（ピンク）で覆い隠される */
.freedom .freedom-story--style-space {
    z-index: 0;
}
.freedom .freedom-story[class*="--style-"] .freedom-story__label {
    grid-area: label;
    position: relative;
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
    color: inherit;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    margin: 0;
    align-self: end;
    padding-top: 40px;
    z-index: 1;
}
.freedom .freedom-story[class*="--style-"] .freedom-story__label .prefix {
    color: #888;
    font-size: 17px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.05em;
}
.freedom .freedom-story[class*="--style-"] .freedom-story__label .word {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.freedom .freedom-story[class*="--style-"] .freedom-story__body {
    grid-area: body;
    position: relative;
    padding: 0 0 30px;
    z-index: 1;
}
.freedom .freedom-story[class*="--style-"] .freedom-story__ttl {
    font-size: 30px;
    margin: 0 0 22px;
    letter-spacing: 0.08em;
}
.freedom .freedom-story[class*="--style-"] .freedom-story__body p {
    font-size: 15px;
    line-height: 2;
}
/* 画像：縦横比そのまま、自然サイズで「元より少し小さく」表示 */
.freedom .freedom-story[class*="--style-"] .freedom-story__img {
    grid-area: img;
    align-self: center;
    /* width 100% を解除し、コンテナを画像幅に合わせる（grid内で寄せられるように） */
}
.freedom .freedom-story[class*="--style-"] .freedom-story__img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 520px;        /* 画像表示サイズの上限。元より少し小さく */
    margin: 0;
}

/* ==========================================================================
   style-time / style-freedom：左テキスト・右画像・左上リボン・左フェード
   ========================================================================== */
.freedom .freedom-story--style-time,
.freedom .freedom-story--style-freedom {
    grid-template-areas:
        "label img"
        "body  img";
    padding: 0 0 0 8%;
    background: url(../img/ribbon.png) no-repeat -30px -20px / 520px auto;
}
/* 画像コンテナを grid セル右端ぴったりに寄せる（画像右端＝画面右端） */
.freedom .freedom-story--style-time .freedom-story__img,
.freedom .freedom-story--style-freedom .freedom-story__img {
    justify-self: end;
}
.freedom .freedom-story--style-time .freedom-story__img img,
.freedom .freedom-story--style-freedom .freedom-story__img img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
}

/* style-time 固有：ピンク背景／オレンジ「時間」 */
.freedom .freedom-story--style-time {
    background-color: #F8EEE5;
}
.freedom .freedom-story--style-time .freedom-story__label .word {
    color: #C88547;
}

/* style-freedom 固有：薄グリーン背景／グリーン「自由」 */
.freedom .freedom-story--style-freedom {
    background-color: #ECEFE0;
}
.freedom .freedom-story--style-freedom .freedom-story__label .word {
    color: #88A66C;
}

/* ==========================================================================
   style-space：左画像・右テキスト・右上反転リボン・右フェード
   ========================================================================== */
.freedom .freedom-story--style-space {
    background-color: #E5EDEE;
    grid-template-areas:
        "img label"
        "img body";
    padding: 0 8% 0 0;
}
.freedom .freedom-story--style-space .freedom-story__label,
.freedom .freedom-story--style-space .freedom-story__body {
    padding-left: 50px;
}
/* 画像コンテナを grid セル左端ぴったりに寄せる（画像左端＝画面左端） */
.freedom .freedom-story--style-space .freedom-story__img {
    justify-self: start;
}
.freedom .freedom-story--style-space .freedom-story__img img {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
}
.freedom .freedom-story--style-space .freedom-story__label .word {
    color: #8BB8C4;
}
/* リボン：HTML要素として実装、右上に配置（ribbon2.png は反転済み画像） */
.freedom .freedom-story--style-space .freedom-story__ribbon {
    position: absolute;
    top: -63px;
    right: 0;
    width: 520px;
    height: 270px;
    background: url(../img/ribbon2.png) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   締め＋事例の共通ラッパー（同一背景で囲む）
   ========================================================================== */
.freedom .freedom-outro {
    background-image: url(../img/plan_section_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/* ==========================================================================
   YUISO HALL 事例紹介（WP動的取得）
   ========================================================================== */
.freedom .freedom-jirei {
    padding: 0 0 80px;       /* 上はwrapper内で連続するので 0、下のみ余白 */
    background-color: transparent;
}
/* 2グループ（稲沢＋甚目寺）を1つの白カードに収める */
.freedom .freedom-jirei > .inner {
    background-color: #fff;
    padding: 60px 50px;
    border-radius: 8px;
}
/* 大見出し：YUISO HALL（小） / 事例紹介（大）の2行構成 */
.freedom .freedom-jirei__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 50px;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.4;
}
.freedom .freedom-jirei__heading-sub {
    font-size: 18px;
    color: #333;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
}
.freedom .freedom-jirei__heading-main {
    font-size: 36px;
    color: #222;
    font-weight: 500;
}
.freedom .freedom-jirei__group {
    margin-bottom: 60px;
}
.freedom .freedom-jirei__group:last-child {
    margin-bottom: 0;
}
.freedom .freedom-jirei__sub {
    font-size: 22px;
    font-weight: 500;
    color: #4DA9AB;
    margin: 0 0 24px;
    padding-left: 14px;
    border-left: 4px solid #68C3C5;
    letter-spacing: 0.05em;
}
.freedom .freedom-jirei__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
/* === Swiperスライダー（左右矢印つき） === */
.freedom .freedom-jirei__slider {
    position: relative;
    padding: 0 50px;
}
.freedom .freedom-jirei__slider .swiper-wrapper {
    align-items: stretch;
}
.freedom .freedom-jirei__slider .freedom-jirei__item {
    height: auto;
}
.freedom .freedom-jirei__slider .swiper-button-prev,
.freedom .freedom-jirei__slider .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #68C3C5;
    color: #68C3C5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin-top: -20px;
    transition: background-color .2s, color .2s;
}
.freedom .freedom-jirei__slider .swiper-button-prev { left: 0; }
.freedom .freedom-jirei__slider .swiper-button-next { right: 0; }
.freedom .freedom-jirei__slider .swiper-button-prev::after,
.freedom .freedom-jirei__slider .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}
.freedom .freedom-jirei__slider .swiper-button-prev:hover,
.freedom .freedom-jirei__slider .swiper-button-next:hover {
    background-color: #68C3C5;
    color: #fff;
}
.freedom .freedom-jirei__slider .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.freedom .freedom-jirei__item {
    background-color: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.freedom .freedom-jirei__item .thum {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.freedom .freedom-jirei__item .text_wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.freedom .freedom-jirei__item .ttl {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0 0 10px;
    line-height: 1.5;
}
.freedom .freedom-jirei__item .post_txt {
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    margin: 0 0 16px;
    flex: 1;
}
.freedom .freedom-jirei__item .btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #68C3C5;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    align-self: flex-start;
    transition: background-color 0.2s;
}
.freedom .freedom-jirei__item .btn:hover {
    background-color: #4DA9AB;
}
/* 投稿者情報（人型アイコン＋名前） */
.freedom .freedom-jirei__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 14px;
    background-color: #F2F0EA;
    border-radius: 999px;
    font-size: 13px;
    color: #666;
    align-self: flex-start;
}
.freedom .freedom-jirei__author-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #C9C9C9;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ==========================================================================
   締めのメッセージ（背景はwrapper側のplan_section_bg.pngに任せる）
   ========================================================================== */
.freedom .freedom-closing {
    background-color: transparent;
    padding: 100px 0 80px;
    text-align: center;
    color: #333;
}
.freedom .freedom-closing__text {
    color: #333;
    font-size: 22px;
    line-height: 2.4;
    margin: 0;
    letter-spacing: 0.05em;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
}
.freedom .freedom-closing__accent {
    color: #68C3C5;
}

/* ==========================================================================
   SP（max-width: 768px）
   ========================================================================== */
@media (max-width: 768px) {
    .freedom .freedom-stories {
        padding: 50px 0 0;       /* 下余白なし（締めの言葉と密着） */
    }
    .freedom .freedom-story {
        grid-template-columns: 1fr;
        padding: 70px 20px 30px;
        margin-bottom: 0;        /* SP：3コンテンツ間の余白なくす */
        gap: 20px;
    }
    /* SP：共通の縦並びレイアウト */
    .freedom .freedom-story[class*="--style-"] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "img"
            "body";
        padding: 24px;
        gap: 10px;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__label {
        padding-top: 90px;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__body {
        padding-bottom: 0;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__img img {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__label .prefix {
        font-size: 14px;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__label .word {
        font-size: 24px;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__ttl {
        font-size: 22px;
    }
    .freedom .freedom-story[class*="--style-"] .freedom-story__body p {
        font-size: 14px;
    }
    /* SP：time/freedom のリボン縮小 */
    .freedom .freedom-story--style-time,
    .freedom .freedom-story--style-freedom {
        background-size: 320px auto;
        background-position: -20px -15px;
    }
    /* SP：space のリボン要素縮小・本文padding解除 */
    .freedom .freedom-story--style-space .freedom-story__ribbon {
        top: -35px;              /* SP：上方向に10pxアップ */
        right: -10px;
        width: 320px;
        height: 166px;
    }
    .freedom .freedom-story--style-space .freedom-story__label,
    .freedom .freedom-story--style-space .freedom-story__body {
        padding-left: 0;
    }

    /* === 事例セクション SP === */
    .freedom .freedom-jirei {
        padding: 50px 0;
    }
    .freedom .freedom-jirei__heading {
        margin-bottom: 30px;
    }
    .freedom .freedom-jirei__heading-sub {
        font-size: 14px;
    }
    .freedom .freedom-jirei__heading-main {
        font-size: 22px;          /* SP：YUISO HALL 稲沢(18px)より少し大きい程度に縮小 */
    }
    .freedom .freedom-jirei__group {
        margin-bottom: 25px;     /* SP：稲沢/甚目寺の間隔縮小 */
    }
    .freedom .freedom-jirei__sub {
        font-size: 18px;
    }
    .freedom .freedom-jirei__list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* === 締めセクション SP === */
    .freedom .freedom-closing {
        padding: 40px 20px 0;    /* 下余白を0にして事例紹介と密着 */
    }
    .freedom .freedom-closing__text {
        font-size: 14px;
        line-height: 2;
    }
    /* === 事例セクション SP（締めの言葉と同等の上余白） === */
    .freedom .freedom-jirei {
        padding: 40px 0 50px;
    }
    .freedom .freedom-jirei > .inner {
        padding: 24px 20px;
    }
}