@charset "UTF-8";
/* CSS Document */
/* Hero Section */
.hero-section {
    background-color: #fbfbfe;
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 52px;
    align-items: center;
    justify-content: flex-start;
}

.hero-image {
    height: 300px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #e0e0e0;
    /* TODO: メイン画像の背景 */
}

/* Intro Block */
.intro-block {
    background-color: #fbfbfe;
    height: 550px;
    width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.intro-background {
    position: absolute;
    inset: 0;
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../img/funeral/main.jpg");
    /* TODO: 庭園の背景画像 */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    gap: 54px;
    align-items: center;
    justify-content: flex-start;
    padding: 71px 0;
}

.intro-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 250, 237,0) 20%, rgba(255, 250, 237,1) 100%);
  pointer-events: none;
}

.intro-title {
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    font-size: 48px;
    color: white;
    text-align: center;
    line-height: 52px;
    letter-spacing: -0.96px;
    max-width: 900px;
    width: max-content;
}

.intro-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    width: 80%;
    padding: 0 96px;
}

.intro-text {
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    font-size: 20px;
    color: white;
    text-align: center;
    line-height: 35px;
    letter-spacing: -0.1px;
    width: 1200px;
}

.fadeout {
    position: absolute;
    bottom: 0;
    left: -112px;
    right: -80px;
    height: 160px;
    background-size: cover;
    background-position: center;
    /* TODO: フェードアウト画像 */
}

/* Service Carousel */
.service-carousel {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: flex-start;
    padding: 50px 0;
    width: 100%;
}

.main-container {
    display: flex;
    flex-direction: column;
    gap: 69px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 1200px;
}

.main-container h2 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 48px;
    color: #1e1b28;
    text-align: center;
    line-height: 40px;
    letter-spacing: -0.96px;
    width: 100%;
}

@media(max-width:798px){
    .main-container h2{
        font-size:24px;
    }
}

.service-cards {
    display: flex;
/*    flex-direction: column;*/
    gap: 50px;
    width: 100%;
}

.service-item {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.service-image {
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    height: 543px;
    width: 1229px;
    /* TODO: 各サービス画像 */
    background-color: #e0e0e0;
}

/* Comparison Table */
.comparison-table {
    display: flex;
    flex-direction: column;
    gap: 50px;
    height: 1193px;
    align-items: center;
    justify-content: flex-start;
    padding: 44px 0;
    width: 100%;
    position: relative;
}

.service-list-image {
    height: 1001px;
    width: 1200px;
    background-size: cover;
    background-position: center;
}

.general-service-button {
    width: 50%;
    border-radius: 37px;
    border: 2px solid gray;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #5c5c5c;
    text-align: center;
    line-height: 24px;
}

@media(max-width:798px){
    .general-service-button{
        width:80%;
        font-size:13px;
    }
}

/* Hall Description */
.hall-description {
    background-color: #fcfbfe;
    height: 747px;
    max-width: 1200px;
    widows: 80%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
}

.hall-image {
    height: auto;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
}

.hall-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    text-align: center;
    color: #1e1b28;
    padding-bottom: 20px;
}

@media(max-width:768px){
    .hall-text{padding: 20px;}
}

.hall-text h2 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 68px;
    letter-spacing: -0.64px;
    width: 100%;
}

@media(max-width:798px){
    .hall-text h2{
        font-size:20px;
        line-height: normal;
    }
}

.hall-text p {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    width: 100%;
}

/* Event Lineup Grid */
.event-lineup {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
}

.event-lineup h2 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 40px;
    color: #1e1b28;
    text-align: center;
    line-height: 52px;
    letter-spacing: -0.8px;
    width: 100%;
}

@media(max-width:798px){
    .event-lineup h2{
        font-size:24px;
    }
}

.facility-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 8px;
    padding-top: 0;
    width: 100%;
}

.facility-row-large {
    display: flex;
    gap: 28px;
    height: 350px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.facility-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 1px;
    min-width: 1px;
}

.facility-card-large {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 1px;
    min-width: 1px;
}

.facility-image {
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    /* TODO: 各施設画像 */
    background-color: #e0e0e0;
}

.facility-image-large {
    height: 350px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 9px;
    /* TODO: 各施設画像 */
    background-color: #e0e0e0;
}

.facility-title {
    background-color: white;
    height: 28px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    color: #1e1b28;
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.4px;
    line-height: 24px;
}

/* Banner Section */
.banner-section {
    display: flex;
    flex-direction: column;
    gap: 52px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 0;
    width: 1200px;
    margin: 0 auto;
}

.banner-image {
    border-radius: 8px;
    width: 1200px;
    background-size: cover;
    background-position: center;
}

.kumotsu-banner {
    height: 243px;
}

.member-banner {
    height: 386px;
}

/* Offering Section */
.offering-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #1e1b28;
    text-align: center;
    padding: 32px 0;
    width: 1200px;
    margin: 0 auto;
    background-image: url("../img/funeral/section_bg.png");
    background-position: top left;
    border: 7px solid #e3dabd;
    height: 273px;
}

.offering-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
    justify-content: flex-start;
    height: 273px;
    min-height: 1px;
    min-width: 1px;
    padding: 30px 0;
}

.offering-container h2 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 48px;
    color: #1e1b28;
    text-align: center;
    line-height: 52px;
    letter-spacing: -0.96px;
    width: 100%;
}

@media(max-width:798px){
    .offering-container h2{
        font-size:24px;
    }
}

.offering-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 0;
    padding-top: 8px;
    width: 100%;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #1e1b28;
    text-align: center;
    line-height: 32px;
}

/* Food and Gift Section */
.food-gift-section {
    display: flex;
    gap: 50px;
    height: 562px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 28px 0;
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.food-gift-container {
    display: flex;
    gap: 50px;
    width: 100%;
}

.food-gift-card {
min-height: 1px;
    min-width: 1px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex
;
    flex-direction: column;
    align-items: center;
}

.details-button {
    position: absolute;
    top: 449px;
    background-color: #a293d4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    border-radius: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: white;
    white-space: pre;
    line-height: 24px;
}

.food-gift-card:first-child .details-button {
    left: 156px;
}

.food-gift-card:last-child .details-button {
    left: 107px;
}

/* Access Section */
.access-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
}

.access-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #1e1b28;
    text-align: center;
    width: 100%;
}

.access-title h2 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 68px;
    letter-spacing: -0.96px;
    max-width: 900px;
    width: 100%;
}

@media(max-width:798px){
    .access-title h2{
        font-size:24px;
        line-height:30px;
    }
}

.access-title p {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    width: 100%;
}

@media(max-width:798px){
    .access-title p{
        font-size:16px;
    }
}

.access-content {
    display: flex;
    gap: 52px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.access-image-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 52px;
    height: 555px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    width: 683px;
}

.access-image {
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.access-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.access-info h3 {
    font-family: 'Noto Sans JP', serif;
    font-weight: 700;
    font-size: 17px;
    color: #221c26;
    line-height: 24px;
    width: 100%;
}

.access-info p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #221c26;
    line-height: 24px;
}

.access-methods {
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 555px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.access-method {
    background-color: white;
    height: auto;
    width: 100%;
    border-left: 9px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
}

.access-method h4 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2e2e15;
    line-height: 24px;
    margin-bottom: 0;
}

.access-method p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #2e2e15;
    line-height: 24px;
}

/* ===== Funeral responsive overrides ===== */

/* イントロ（横幅固定→流動） */
.intro-block{
  width: 100%;
}
.intro-background{
  padding: clamp(40px, 6vw, 71px) 0;
}
.intro-info{
  max-width: 1200px;
  width: 100%;
  padding: 0 clamp(16px, 6vw, 96px);
}
.intro-text{
  width: auto;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.8;
}

/* サービス “プランのご紹介” */
.service-carousel{ padding: clamp(32px, 6vw, 50px) 0; }
.main-container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  gap: clamp(28px, 6vw, 48px);
}

@media(max-width:768px){
    .main-container{
        padding: 0 5%;
    }
}
.main-container h2{ font-size: var(--fs-h1); line-height: 1.1; }


.service-cards{ display: grid;grid-template-columns: 1fr; gap: clamp(12px, 2vw, 24px);}
.service-item{ align-items: center; }
.service-image{
  width: 100%;
  max-width: 1200px;              /* 1x上限 */
  height: auto;
  aspect-ratio: 1200 / 543;       /* 1x比率を維持 */
}

/* 比較表（画像比率で自動伸長、ボタンは通常フローへ） */
.comparison-table{
  height: auto;
  padding: clamp(28px, 6vw, 44px) 0;
}
.service-list-image{
  width: 100%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 1200 / 1001;
  border-radius: 12px;
}

@media(max-width:768px){
    .service-list-image{padding: 0 5%;}
}


/* 式場説明 */
.hall-description{
  width: 100%;
  max-width: var(--container);
  height: auto;
}

@media(max-width:768px){
    .hall-description{width: 90%;}
}

.hall-image{ height: auto; aspect-ratio: 1200 / 480; }

/* ラインナップ（3→2→1段） */
.event-lineup{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

@media(max-width:768px){
    .event-lineup{padding: 20px;}
}

.facility-row,
.facility-row-large{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  height: auto;
}
.facility-image{ height: auto; aspect-ratio: 4 / 3; }
.facility-image-large{ height: auto; aspect-ratio: 16 / 9; }

.hole-large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px){
  .facility-row,
  .facility-row-large{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 798px){
  .facility-row,
  .facility-row-large{ grid-template-columns: 1fr; }
}

/* バナー（流動） */
.banner-section{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  gap: clamp(16px, 4vw, 52px);
}

@media(max-width:768px){
    .banner-section{padding: 0 5%;}
}

.banner-image{
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.kumotsu-banner{ aspect-ratio: 1200 / 243; }
.member-banner{ aspect-ratio: 1200 / 386; }

/* ご供花・ご供物（背景は維持して枠だけ流動） */
.offering-section{
  width: 100%;
  max-width: var(--container);
  height: auto;
  padding: clamp(20px, 4vw, 32px) 0;
}

@media(max-width:768px){
    .offering-section{margin: 20px auto;width: 90%;}
}
.offering-container{ height: auto; padding: clamp(16px, 3vw, 30px) 0; }
.offering-container h2{ font-size: var(--fs-h1); }
.offering-text{ line-height: 1.9;}

@media(max-width:768px){
    .offering-text{padding: 0 5%;}
}

/* 料理・返礼品（2→1段、カード比率維持） */
.food-gift-section{
  width: 100%;
  max-width: var(--container);
  height: auto;
  padding: clamp(20px, 4vw, 28px) 0;
}

@media(max-width:768px){
    .food-gift-section{padding: 0 5%;}
}
.food-gift-container{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 2vw, 24px);
}
.food-gift-card{
  height: auto;
  overflow: hidden;
}
.food-gift-image{ width: 100%; aspect-ratio: 1200 / 700; }
.details-button{
  position: static;               /* 絶対→通常フロー */
  margin-top: 12px;
  display: inline-flex;
}
@media (max-width: 900px){
  .food-gift-container{ grid-template-columns: 1fr; }
}

/* アクセス（2→1段） */
.access-section{
  width: 100%;
  max-width: var(--container);
  height: auto;
  padding: clamp(28px, 6vw, 50px) 5%;
}
.access-content{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(16px, 3vw, 52px);
  height: auto;
  align-items: start;
}
.access-image-container{
  width: 100%;
  height: auto;
  gap: clamp(12px, 2vw, 24px);
}
.access-image{ height: auto; aspect-ratio: 1200 / 391; }
@media (max-width: 900px){
  .access-content{ grid-template-columns: 1fr; }
}

.map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9の比率を確保 */
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Access：SPでの切れ対策（強制上書き） ===== */
@media (max-width: 900px){
  .access-content{
    display: grid !important;              /* flexを無効化 */
    grid-template-columns: 1fr !important; /* 1カラム */
    gap: clamp(12px, 4vw, 24px) !important;
    align-items: stretch !important;
  }
}

.access-image-container,
.access-methods{
  width: 100% !important;
  height: auto !important;         /* 555px固定を解除 */
  overflow: visible !important;    /* はみ出しを隠さない */
}

.access-methods{ gap: clamp(12px, 3vw, 22px) !important; }