@charset "utf-8";

/* =========================================
   お葬式相談会 モーダルウィンドウ専用スタイル
========================================= */
.soudankai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 50px 15px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.soudankai-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.soudankai-modal-content {
   background: #fff;
    width: 800px;
    max-width: 100%;
    border-radius: 15px;
    position: relative;
    padding: 0px 0px 40px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin: auto;
    border-radius: 10px;
}

.soudankai-modal-close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 44px;
    height: 44px;
    background: var(--base-color);
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    padding: 0;
}


.soudankai-modal-inner {
    position: relative;
    z-index: 2;
}

.modal-date-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    font-size: 0.8em;
    margin-left: 10px;
    vertical-align: text-bottom;
    line-height: 1;
}

.soudankai-modal-header img{
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}

/* ★修正: PC・スマホ共通で縦並びに変更 */
.soudankai-modal-info { 
    display: flex; 
    flex-direction: column; /* 縦並び */
    gap: 15px; 
    border: 2px solid #cccccc; 
    border-radius: 10px; 
    padding: 20px; 
    background: #fffde5; 
    margin:0 20px 20px; 
}

/* ★修正: 各ブロックの区切り線を下側に変更 */
.info-block { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 0 10px 15px; /* 下側に余白を追加 */
    border-bottom: 1px dashed #cccccc; /* 下に点線を追加 */
}
.info-block:last-child { 
    border-bottom: none; /* 最後は線を消す */
    padding-bottom: 0;
}

.icon-color {
width: 50px;
    color: white;
    font-size: 30px;
    background: var(--base-color);
    padding: 5px 10px;
    display: block;
    height: 50px;
    text-align: center;
    align-content: center;
    border-radius: 5px;
}
.info-text { display: flex; justify-content: flex-start; text-align: center; }
.info-label {font-weight: bold;  margin-top:5px; }
.info-label::after { content: ":";margin-right: 1em;
    margin-left: 0.5em;
    font-weight: bold; }
.info-value { font-size: 24px; font-weight: bold;  }
.red-text { color: red; }
.access-btn { display: inline-block; border: 1px solid var(--base-color); color: var(--base-color); font-size: 11px; padding: 5px 10px; border-radius: 5px; text-align: center; background: #fff; text-decoration: none; line-height: 1.2; margin-left: 10px; font-weight: bold; }
.soudankai-modal-lead {  font-weight: bold; line-height: 1.6; margin: 0 20px 20px; }
.soudankai-modal-gifts { display: flex; background: #fffde5; border: 1px solid #cccccc; border-radius: 10px; padding: 15px 20px; margin: 0 20px 20px; gap: 20px; }
.gift-box { display: flex; align-items: center; flex: 1; gap: 15px; }
.gift-box:first-child { border-right: 1px dashed #cccccc; padding-right: 20px; }
.gift-icon { width: 60px; height: auto; }
.gift-details { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gift-target { font-size: 16px;  position: relative; font-weight: bold; }
.gift-target::before, .gift-target::after { content: "ー"; margin: 0 5px; color:var(--base-color); }
.gift-desc { color: red; font-weight: bold; line-height: 1.4; }
.action-catch { font-weight: bold; font-size: clamp(1.125rem, 0.375rem + 3.75vw, 1.5rem); color: var(--base-color);  margin: 0 20px 20px; text-align: center; }
.action-btns { display: flex; gap: 15px; justify-content: center;  margin: 0 20px 20px;}
.action-btns a { display: flex; align-items: center; justify-content: center; flex: 1; padding: 15px; border-radius: 10px; font-weight: bold; font-size: 21px; text-decoration: none; position: relative; transition: transform 0.2s; }
.action-btns a:hover { transform: translateY(3px); }
.btn-tel { background: red; color: #fff !important; box-shadow: 0 5px 0 #ca1c30; }
.btn-tel i.fa-phone-alt { margin-right: 10px; }
.btn-contact { background: #fff; color: #333 !important; border: 2px solid var(--base-color); box-shadow: 0 5px 0 #cccccc; }
.btn-arrow { position: absolute; right: 20px; }
.mordal-br{
display: none;
}

/* =========================================
   レスポンシブ (タブレット 768px 〜 1199px)
========================================= */
@media screen and (min-width: 701px) and (max-width: 1199px) {
    .soudankai-modal-content { width: 70%; padding-bottom: 25px; }
    .soudankai-modal-title { font-size: 40px; }
    .soudankai-modal-gifts { flex-direction: column; gap: 15px; }
    .gift-box:first-child { border-right: none; border-bottom: 1px dashed #cccccc; padding-right: 0; padding-bottom: 15px; }
    .action-btns { flex-direction: column; }
	.mordal-br{
display: block;
}
}

/* =========================================
   レスポンシブ (スマホ 700px 以下)
========================================= */
@media screen and (max-width: 700px) {
    .soudankai-modal-close { top: -10px; right: -5px; } 
    .soudankai-consultant-img { width: 45%; top: -20px; }
    .soudankai-modal-title { font-size: 32px; margin-bottom: 15px; }
    
    /* スマホ用に余白を少し調整 */
    .soudankai-modal-info { padding: 15px; gap: 10px; }
    .info-block { padding: 0 5px 15px; }
    
    .soudankai-modal-gifts { flex-direction: column; }
    .gift-box:first-child { border-right: none; border-bottom: 1px dashed #cccccc; padding-right: 0; padding-bottom: 15px; }
    .action-btns { flex-direction: column; }
    .btn-tel { font-size: 20px; padding: 12px; }
    .btn-contact { font-size: 16px !important; padding: 12px; }
		.mordal-br{
display: block;
}
info-text {
    display: flex;
	flex-direction: column;
	justify-content: center;
}
}

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

.info-block {
flex-direction: column;
}
}

@media screen and (max-width: 399px) {
.info-label::after {
display: none;}
.info-text { flex-direction: column; }
.gift-box { flex-direction: column; }
}