/* topページのスタイル */

/* 霊園リストのスタイル */
.cemetery-list-box .p-postList__item {
    padding: 10px;
    text-decoration: none;
    display: block;
    box-shadow: 3px 5px 0 rgba(48, 9, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    top: 0;
    transition: 0.3s;
    flex: 0 0 calc((100% - 48px) / 3);
    box-sizing: border-box;
}
.c-tabList{
    justify-content: center;
    align-items: center;
}

.wp-block-group.is-row{
    display: block !important; /* flexを打ち消して通常のブロック要素に */
}

/* タブの基本スタイル */
.c-tabList .c-tabList__item {
    margin: 0 2px;
}

.c-tabList .c-tabList__button {
    background: #EFEFEF;
    color: #333;
    padding: 12px 24px;
    border-radius: 8px 8px 0 0;
    border: none;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

/* 選択されたタブのスタイル */
.c-tabList .c-tabList__button[aria-selected="true"] {
    background: var(--color_main);
    color: #fff;
    position: relative;
}

/* 選択されたタブの下向き矢印 */
.c-tabList .c-tabList__button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color_main);
}


.post_content h3{
    margin: 0 0 5px 0;
}

/* ホバー効果 */
.c-tabList .c-tabList__button:hover:not([aria-selected="true"]) {
    background: #D0D0D0;
    color: #333;
}
.p-postList.-type-card{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}
.price-amount{
    font-size: 26px;
    color: #d42a2a;
    font-weight: bold;
}

/* 施設タグのスタイル */
.cemetery-facilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.facility-label {
    background: #5B8032;
    color: #fff;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
}

/* 住所のスタイル（アイコン付き） */
.cemetery-address {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #333;
}

.cemetery-address::before {
    content: "📍";
    font-size: 16px;
    flex-shrink: 0;
}
/* SP版は１列表示（4枚まで） */
@media (max-width: 768px) {
    .p-postList.-type-card {
        gap: 5px;
    }
    .cemetery-list-box .p-postList__item {
        flex: 0 0 100%;
    }
    /* 4枚目以降は非表示 */
    .cemetery-list-box .p-postList__item:nth-child(n+5) {
        display: none;
    }
}

/* 霊園セクションの「もっと見るボタン」のスタイル */
.btn_text{
    border: 1px solid var(--color_main);
    color: #2c665a !important;
}
.btn_text:hover{
    color: #fff !important;
}

/* ++++++++++++++++++++++++++++++++++++++++ */

/* 都道府県を探すセクションのスタイル */
.region-list-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}

.region-card {
    width: calc(50% - 25px);
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.region-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #d42a2a;
	width:100%;
}
.region-title {
    width: 100%;
    position: relative; /* 擬似要素の基準点を作る */
	padding:0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between; /* テキストと矢印を左右配置 */
}

.region-title::after {
    content: "";
    display: inline-block; /* サイズ適用 */
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--color_main);
    border-right: 2px solid var(--color_main);
    transform: rotate(45deg);
    position: absolute;
    right: 0; /* 右端に配置 */
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* 矢印を中央配置 */
}
.region-title a {
    text-decoration: none;
    color: #333333;
}

.city-list {
    margin-top: 10px;
    padding-left: 20px;
    list-style: none;
	  display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
    gap: 10px; /* リスト間の間隔 */
    padding: 0;
}

.city-list li {
    margin-bottom: 5px;
}

.city-list a {
    text-decoration: none;
    color: #333333;
    position: relative; /* 擬似要素の基準点を作る */
    padding-left: 1.5rem; /* 矢印分の余白を確保 */
    display: flex;
    align-items: center;
}

.city-list a::before {
    content: "";
    display: inline-block; /* これを追加 */
    width: 0.4rem;
    height: 0.4rem;
    border-top: 2px solid var(--color_main);
    border-right: 2px solid var(--color_main);
    transform: rotate(45deg);
    position: absolute;
    left: 0;
}

.region-title a::before{
    color: var(--color_main);
    content: '\e55f';
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 16px;
    display: inline-block;
}

@media (max-width: 768px){
    .city-list{
        display:none;
    }
        .trivia .p-postList__item a{
            flex-direction: row;
            gap: 5px;
        }
        .region-list-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2カラム */
            gap: 10px;
        }
    
        .region-card {
            background: #fff;
            border-radius: 0;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            font-weight: bold;
            width: 100%;
            position: relative; /* これを追加 */
        }
    
        .region-card a {
            text-decoration: none;
            color: #333;
            display: flex;
            align-items: center;
            flex-grow: 1;
            padding-right: 1.5rem; /* 矢印分の余白を確保 */
        }
    
}

/* ++++++++++++++++++++++++++++++++++++++++ */
/* 墓タイプから探すセクションのスタイル */
.grave-type-search-section {
    padding: 10px 0;
    background: #fff;
    --clmn-w--pc: 25%;
}

.grave-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

/* 3つのカードの場合の特別なスタイル */
.grave-type-grid:has(.grave-type-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
}

/* 2つのカードの場合の特別なスタイル */
.grave-type-grid:has(.grave-type-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
}

/* 1つのカードの場合の特別なスタイル */
.grave-type-grid:has(.grave-type-card:nth-child(1):last-child) {
    grid-template-columns: 1fr;
    max-width: 300px;
}

.grave-type-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grave-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.card-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px;
}

.card-link {
    color: var(--color_main);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

.card-link:hover {
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .grave-type-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .grave-type-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .card-content {
        padding: 15px;
    }
}



/* top下CTA */
/* グループを横並び（flex）にする。テーマに上書きされても勝つように念のため !important */
.top_contact .wp-block-group.is-layout-flex {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-end;  /* 右寄せ。左寄せなら flex-start */
  align-items: baseline;      /* ベースラインで揃える */
  gap: .1em;
}

/* 子の段落が100%幅で広がらないようにする＆余白を消す */
.top_contact .wp-block-group.is-layout-flex > p {
  margin: 0;
  flex: 0 0 auto;
  width: auto !important;
}

/* tc-tel の1行目だけ大きく */
.top_contact .tc-tel {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  left: 100px;   /* ← 右に20px移動。値を増減して調整 */
}


/* 段落に直接 tc-div がついているケース */
.top_contact p.tc-div {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  margin: 0 auto;
  position: relative;
  top: -25px;   /* ← 上に10px移動。数値を増減して調整 */
  left: 110px;    /* 右に20px移動。数値を増やすともっと右へ */
}

/* 営業時間カラム */
.top_contact .tc-div {
  position: relative;      /* 棒の基準にする */
  padding-right: 20px;     /* テキストと棒の距離 */
  margin-right: 10px;      /* 棒とメールカラムの距離 */
}

/* 棒だけを描画 */
.top_contact .tc-div::after {
  content: "";
  position: absolute;
  top: 0;                  /* 上位置（ここを動かせる） */
  right: -15px;                /* 右位置（ここを動かせる） */
  width: 1px;
  height: 100%;            /* 高さを文字に合わせる */
  background: rgb(255, 255, 255);
}


/* =========================
   SP版（スマホ縦：～767px想定）
   ========================= */
@media (max-width: 767px){

  /* グループを縦並び・中央寄せに */
  .top_contact .wp-block-group.is-layout-flex{
    display: flex !important;
    flex-direction: column;   /* 縦積み */
    align-items: center;      /* 中央寄せ */
    justify-content: center;
    gap: 8px;                 /* 各要素の間隔 */
  }

  /* 子の段落は横幅いっぱいにしつつ中央揃え */
  .top_contact .wp-block-group.is-layout-flex > p{
    width: 100% !important;
    text-align: center;
    margin: 0;
    flex: 0 0 auto;
    position: relative;
    top: -10px;   /* ← 上に移動。数値は調整してOK */
  }

  /* 電話番号（tc-tel）：サイズ少し下げ、位置指定リセット */
  .top_contact .tc-tel{
    font-size: 22px;
    line-height: 1.25;
    left: 0;          /* 位置ずらし解除 */
    top: 0;           /* 念のため */
    text-align: center;
  }

  /* 営業時間（p.tc-div）：位置ずらし解除＆中央へ */
  .top_contact p.tc-div{
    font-size: 13px;
    line-height: 1.6;
    top: 0;           /* 位置ずらし解除 */
    left: 0;          /* 位置ずらし解除 */
    text-align: center;
    margin: 0 auto;
  }

 

  .top_contact .tc-div::after{
    display: none;
  }
}