@charset "UTF-8";
/* ==========================================================================
   TOPページ（1920px基準）
   ========================================================================== */

/* プレースホルダー（写真待ち） */
.c-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:var(--ph);color:#8a8a8a;font-size:14px;letter-spacing:.06em;text-align:center}
.hall__stripitem.is-alt .c-ph{background:var(--ph-alt)}
.hall__sub .c-ph{color:#fff}

/* 金額の並び（総額 ／ 数値 ／ 税抜・円） */
.c-price{display:flex;align-items:center;gap:14px;white-space:nowrap;color:var(--brand)}
.c-price--onbrand{color:#fff}
.c-price__label{display:block}
.c-price__unit{display:flex;flex-direction:column;align-items:flex-end;gap:1px}

/* --- ヒーロー ----------------------------------------------------------- */
.hero{position:relative;height:997px;background:var(--mint);overflow:hidden}
.hero__visual{position:absolute;top:-82px;left:calc(50% - 307px);width:1184px;height:1115px;overflow:hidden}
.hero__visual img{position:absolute;left:65px;top:-26px;width:1170px;height:1114px;max-width:none;object-fit:cover}
.hero__card{position:absolute;top:58px;left:max(24px,calc(50% - 681px));width:683px;height:896px;background:#fff;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.16))}
.hero__panel{display:contents}
.hero__badge{position:absolute;left:348px;top:50px;width:287px;height:192px}
.hero__copy{position:absolute;left:46px;top:39px;display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.hero__plan{position:absolute;left:40px;top:280px;width:603px;height:364px;background:var(--panel);border-radius:32px}
.hero__planname{position:absolute;left:45px;top:33px;width:520px;height:59px;display:flex;align-items:center;justify-content:center;
  background:var(--offwhite);color:var(--brand)}
.hero__plan .c-price{position:absolute;left:122px;top:105px}
.hero__note{position:absolute;left:0;right:0;top:212px;color:var(--brand);font-weight:400;font-size:14px;line-height:20px;--ls:.18em;letter-spacing:var(--ls)}
.hero__chips{position:absolute;left:75px;top:271px;display:flex;gap:5px}
.hero__chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:222px;height:61px;background:#fff;color:var(--ink)}
.hero__tel{position:absolute;left:122px;top:659px;display:flex;align-items:center;gap:18px;color:var(--brand)}
.hero__tel .c-ico{width:60px}
.hero__btn{position:absolute;left:119px;top:745px}

/* --- 状況別ショートカット ----------------------------------------------- */
.quick{position:relative;display:flex;height:382px;background:#fff;border-top:7px solid var(--brand)}
.quick::after{content:"";position:absolute;left:calc(50% - 4px);top:-2px;width:8px;height:376px;background:var(--brand)}
.quick__panel{flex:1 1 50%;display:flex;justify-content:center;padding-top:65px}
.quick__panel--urgent{background:#fff}
.quick__panel--prepare{background:var(--cream)}
.quick__content{display:flex;flex-direction:column;align-items:center;gap:17px;width:444px}
.quick__panel--urgent .quick__content p:first-child{color:var(--brand)}
.quick__content .c-btn{margin-top:13px}

/* --- メッセージ --------------------------------------------------------- */
.message{height:305px;background:var(--mint);border-top:7px solid var(--brand);padding-top:106px;text-align:center}

/* --- お電話からの流れ --------------------------------------------------- */
.flow{position:relative;height:818px;background:#fff;padding-top:121px}
.flow::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:6px;background:var(--mint)}
.flow .c-sectionhead h2{color:var(--brand)}
.flow__steps{display:flex;justify-content:center;gap:31px;margin-top:42px}
.flow__step{display:flex;flex-direction:column;align-items:center;gap:27px;width:222px;height:264px;
  padding:32px 25px 20px;border:2px solid var(--brand);border-radius:18px;background:#fff;color:var(--brand)}
.flow__step p:last-child{width:100%;margin-top:-10px}
.flow__btn{display:flex;justify-content:center;margin-top:38px}

/* --- 葬儀プラン --------------------------------------------------------- */
.plans{position:relative;background:#fff;padding:313px 0 171px}
.plans__head{position:absolute;left:0;right:0;top:129px;gap:16px}
.plans__head h2{color:var(--brand)}
.plans__list{display:flex;flex-direction:column;align-items:center;gap:48px}
.plan{--pc:var(--brand);width:986px;display:flex;flex-direction:column;align-items:center}
.plan[data-plan="meeting"]{--pc:var(--plan-meeting)}
.plan[data-plan="oneday"]{--pc:var(--plan-oneday)}
.plan[data-plan="family"]{--pc:var(--plan-family)}
.plan__divider{width:982px;height:8px;border-radius:4px;background:var(--mint)}
.plan__header{position:relative;width:982px;height:266px;background:var(--pc);overflow:hidden}
.plan--two .plan__header{height:445px}
.plan__photo{position:absolute;left:2px;top:2px;width:395px;height:262px;overflow:hidden}
.plan__photo--tall{height:441px}
.plan__info{position:absolute;left:436px;top:0;right:22px;height:100%;color:#fff}
.plan__info > *{position:absolute;left:0}
.plan__tag{border:1px solid #fff;border-radius:12px;padding:4px 14px;top:44px}
.plan__title{top:77px;width:510px}
.plan__info .c-price{top:129px}
.plan__taxnote{top:215px;width:373px;text-align:right}
.plan--two .plan__tag{top:36px}
.plan--two .plan__title{top:69px}
.plan--two .plan__info > :nth-child(3){top:127px}
.plan--two .plan__info > :nth-child(4){top:150px}
.plan--two .plan__info > :nth-child(5){top:236px}
.plan--two .plan__info > :nth-child(6){top:282px}
.plan--two .plan__info > :nth-child(7){top:305px}
.plan--two .plan__info > :nth-child(8){top:391px}
.plan__stepswrap{width:100%;margin-top:17px}
.plan__steps{position:relative;width:100%;max-width:986px;aspect-ratio:986/163;container-type:inline-size}
.plan__btn{margin-top:33px}
.plan .c-btn--arrow{background:var(--pc)}
.plan__chips{display:flex;gap:2.2312cqw;height:100%}
.plan__chip{display:flex;align-items:center;justify-content:center;width:10.5477cqw;height:100%;background:#fff;border:0.2028cqw solid var(--pc)}
.plan__chip span{writing-mode:vertical-rl;text-orientation:upright;font-size:2.2312cqw;line-height:1;letter-spacing:.18em;margin-bottom:-.18em;color:var(--pc)}
.plan__chip.is-off{border-color:var(--disabled)}
.plan__chip.is-off span{color:var(--disabled)}
.plan__arrows{position:absolute;inset:0}
.plan__arrows i{position:absolute;top:42.945%;width:2.9412%;height:14.110%;display:flex;align-items:center}
.plan__arrows i::before{content:"";flex:1 1 auto;height:21.74%;background:var(--pc)}
.plan__arrows i::after{content:"";flex:0 0 auto;height:73.91%;aspect-ratio:12/17;background:var(--pc);
  clip-path:polygon(0 0,100% 50%,0 100%)}

/* --- プランCTA ---------------------------------------------------------- */
.plancta{display:flex;justify-content:center;gap:98px;height:305px;background:var(--mint);padding-top:104px}

/* --- お墓・永代供養 ----------------------------------------------------- */
.memorial{height:503px;background:var(--grey);padding-top:80px}
.memorial__card{position:relative;width:982px;height:343px;margin-inline:auto;background:#fff}
.memorial__photo{position:absolute;left:30px;top:30px;width:442px;height:283px;overflow:hidden}
.memorial__copy{position:absolute;left:511px;top:85px;width:425px;display:flex;flex-direction:column;gap:20px}
.memorial__btn{position:absolute;left:669px;top:234px;width:264px}

/* --- 式場・アクセス ----------------------------------------------------- */
.hall{position:relative;height:1510px;background:#fff;padding-top:121px}
.hall__title{color:var(--brand)}
.hall__main{position:relative;width:var(--content);margin:27px auto 0;height:461px}
.hall__map{position:absolute;left:0;top:0;width:602px;height:454px;overflow:hidden}
.hall__map iframe{display:block;width:100%;height:100%;border:0}
.hall__info{position:absolute;left:631px;top:14px;width:351px;display:flex;flex-direction:column;gap:15px}
.hall__row{display:flex;flex-direction:column;gap:3px}
.hall__row dd{margin:0}
.hall__divider{height:4px;background:var(--mint)}
.hall__buttons{display:flex;flex-direction:column;gap:11px;padding-top:13px}
.hall__subphotos{display:flex;justify-content:center;gap:7px;margin-top:7px}
.hall__sub{position:relative;width:324px;height:223px;overflow:hidden}
.hall__sub:nth-child(n+2){width:323px}
.hall__strip{margin-top:67px;overflow:hidden}
.hall__striprow{display:flex;width:max-content;animation:hallstrip 70s linear infinite}
.hall__strip:hover .hall__striprow{animation-play-state:paused}
.hall__stripitem{width:342px;height:223px;overflow:hidden;flex:0 0 auto}
@keyframes hallstrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hall__btn{display:flex;justify-content:center;margin-top:68px}

/* --- 静岡市民葬祭の安心 ------------------------------------------------- */
.reasons{height:952px;background:var(--mint);padding-top:89px}
.reasons__title{color:var(--brand)}
.reasons__grid{display:flex;justify-content:center;gap:68px;margin-top:92px}
.reason{position:relative;width:464px;height:590px;color:var(--brand)}
.reason__photo{width:464px;height:332px;border-radius:38px;overflow:hidden}
.reason__photo .c-ph{border-radius:38px}
.reason__no{position:absolute;left:20px;top:268px}
.reason__copy{position:absolute;left:1px;top:431px;display:flex;flex-direction:column;gap:19px;width:461px}

/* --- よくあるご質問 ----------------------------------------------------- */
.faq{height:1286px;background:#fff;padding-top:163px}
.faq__title{color:var(--brand)}
.faq__list{width:var(--content);margin:30px auto 0;border-bottom:2px solid var(--ink)}
.faq__btn{display:flex;justify-content:center;margin-top:67px}

/* --- コンセプト --------------------------------------------------------- */
.concept{position:relative;height:900px;background:var(--mint2);overflow:hidden}
.concept__visual{position:absolute;left:calc(50% + 290px);top:0;width:670px;height:902px;overflow:hidden}
.concept__visual img{position:absolute;left:-87px;top:135px;width:844px;height:870px;max-width:none;object-fit:cover}
.concept__copy .t-concept{white-space:nowrap}
.concept__copy{position:absolute;left:max(24px,calc(50% - 679px));top:234px;display:flex;flex-direction:column;gap:46px;width:672px}

/* ==========================================================================
   TOPページ SP（1023px以下）
   ========================================================================== */
@media screen and (max-width:1279px){
  .c-ph{font-size:1.1rem}

  /* ヒーロー：写真を全面に敷き、その上にバッジと見出しを直接のせる */
  .hero{position:relative;height:auto;padding-bottom:3.6rem;background:var(--mint);overflow:hidden}
  .hero__visual{position:absolute;left:0;right:auto;top:-5rem;width:132%;height:auto}
  .hero__visual img{position:static;width:100%;height:auto;max-width:none;object-fit:fill}
  /* 左側にごく薄い白をかけて、見出しが服に重なっても読めるようにする */
  .hero__visual::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(92deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 64%)}
  .hero__card{position:relative;z-index:1;left:auto;top:auto;width:auto;height:auto;margin:0;padding:0;
    background:none;border-radius:0;filter:none}
  .hero__badge{position:relative;left:auto;right:auto;top:auto;display:block;width:11rem;height:auto;margin:4rem 0 0 4.4rem}
  .hero__copy{position:static;gap:.9rem;margin:1.8rem 0 0 2rem}
  .hero__copy .t-hero{max-width:26rem}
  .hero__panel{display:block;margin:5.4rem 1.6rem 0;padding:1.8rem 1.4rem 2.4rem;background:#fff;border-radius:2rem;
    box-shadow:0 4px 16px rgba(0,0,0,.10)}
  .t-hero{font-size:2.05rem;line-height:3.4rem;--ls:.10em}
  .t-hero-sub{font-size:1rem;--ls:.14em}
  .hero__plan{position:static;width:auto;height:auto;border-radius:1.4rem;padding:1.8rem 1.4rem 1.6rem}
  .hero__planname{position:static;width:auto;height:4.4rem;font-size:1.6rem;--ls:.10em;line-height:1}
  .hero__plan .c-price{position:static;justify-content:center;gap:.8rem;margin-top:1.4rem}
  .hero__note{position:static;margin-top:1.2rem;font-size:1.1rem;line-height:1.8rem;--ls:.02em}
  .hero__chips{position:static;margin-top:1.6rem;gap:.6rem}
  .hero__chip{width:auto;flex:1 1 0;height:5.4rem;padding:0 .4rem}
  .t-chip,.t-chip-wrap{font-size:1.2rem;line-height:1.7rem;--ls:.02em}
  .t-chip-sub{font-size:.95rem;line-height:1.4rem;--ls:0}
  .hero__tel{position:static;justify-content:center;gap:1rem;margin-top:2.4rem}
  .hero__tel .c-ico{width:3.6rem}
  .t-tel-hero{font-size:3.2rem;line-height:1.2}
  .hero__btn{position:static;margin:1.6rem auto 0}

  .plan__info .t-price-value{font-size:4rem}
  .plan__info .t-price-label{font-size:1.5rem;line-height:2.2rem}
  .plan__info .t-price-unit{font-size:2rem}
  .plan__info .t-price-tax{font-size:.95rem}

  /* 金額 */
  .t-price-label{font-size:1.7rem;line-height:2.6rem;--ls:.10em}
  .t-price-value{font-size:4.6rem;line-height:1.1}
  .t-price-unit{font-size:2.2rem;line-height:2.2rem;--ls:.08em}
  .t-price-tax{font-size:1rem;line-height:1.2rem}
  .t-price-note{font-size:1.2rem;line-height:1.8rem;--ls:.04em}

  /* 状況別ショートカット */
  .quick{flex-direction:column;height:auto;border-top-width:4px}
  .quick::after{display:none}
  .quick__panel{padding:3.2rem 2rem}
  .quick__panel--prepare{border-top:4px solid var(--brand)}
  .quick__content{width:100%;max-width:33.5rem;gap:1.2rem}
  .quick__content .c-btn{margin-top:.8rem}

  /* メッセージ */
  .message{height:auto;padding:3.6rem 2rem;border-top-width:4px}

  /* 流れ */
  .flow{height:auto;padding:4rem 2rem 4.4rem}
  .flow::after{height:4px}
  .flow__steps{flex-wrap:wrap;gap:1.2rem;margin-top:2.8rem}
  .flow__step{width:calc(50% - .6rem);max-width:none;height:auto;min-height:19rem;gap:1.4rem;padding:1.8rem 1.4rem 1.6rem;border-radius:1.2rem}
  .flow__step p:last-child{margin-top:-.4rem}
  .t-step-no{font-size:2.8rem;line-height:3.2rem}
  .t-step-title{font-size:1.7rem;line-height:2.4rem;--ls:.06em}
  .t-step-body{font-size:1.15rem;line-height:1.8rem;--ls:.02em}
  .flow__btn{margin-top:2.8rem}

  /* 葬儀プラン */
  .plans{padding:4rem 2rem 4.4rem}
  .plans__head{position:static;gap:1rem;margin-bottom:2.8rem}
  .plans__list{gap:2.8rem}
  .plan{width:100%;gap:1.6rem}
  .plan__divider{width:100%;height:4px}
  .plan__header{width:100%;height:auto}
  .plan--two .plan__header{height:auto}
  .plan__photo,.plan__photo--tall{position:static;width:100%;height:auto;aspect-ratio:395/262;margin:2px 2px 0;width:calc(100% - 4px)}
  .plan__info{position:static;height:auto;padding:1.8rem 1.6rem 2rem}
  .plan__info > *{position:static;width:auto}
  .plan__tag{display:inline-block;font-size:1.05rem;padding:.3rem 1rem}
  .plan__title{width:auto;font-size:2.1rem;line-height:3.2rem;--ls:.02em;margin:1rem 0 .4rem}
  .plan__info .c-price{justify-content:flex-start;gap:.8rem}
  .plan__taxnote{width:auto;text-align:left;margin-top:.2rem}
  .plan__variant{margin-top:1.2rem}
  .plan--two .plan__info > *{top:auto}
  .c-swipe{margin-top:1.6rem}
  .plan__stepswrap{margin-top:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.6rem}
  .plan__steps{width:62rem;max-width:none;flex:0 0 auto}
  .plan__stepswrap::-webkit-scrollbar{height:.5rem}
  .plan__stepswrap::-webkit-scrollbar-thumb{background:#c9c8d2;border-radius:.25rem}
  .plan__btn{margin-top:.4rem}

  /* プランCTA */
  .plancta{flex-direction:column;align-items:center;gap:1.2rem;height:auto;padding:3.2rem 2rem}

  /* お墓・永代供養 */
  .memorial{height:auto;padding:3.2rem 2rem}
  .memorial__card{width:auto;height:auto;padding:2rem}
  .memorial__photo{position:static;width:100%;height:auto;aspect-ratio:442/283}
  .memorial__copy{position:static;width:auto;gap:1.2rem;margin-top:1.6rem}
  .t-heading-memorial{font-size:1.9rem;line-height:2.8rem;--ls:.08em}
  .memorial__btn{position:static;width:100%;max-width:33.5rem;margin:1.8rem auto 0}

  /* 式場・アクセス */
  .hall{height:auto;padding:4rem 0 4.4rem}
  .hall__title{padding:0 2rem}
  .hall__main{width:auto;height:auto;margin:2.4rem 0 0;padding:0 2rem}
  .hall__map{position:static;width:100%;height:auto;aspect-ratio:602/454}
  .hall__info{position:static;width:auto;margin-top:2rem;gap:1.2rem}
  .t-label-access,.t-body-access,.t-body-access-tight{font-size:1.35rem;line-height:2.2rem;--ls:.06em}
  .hall__buttons{align-items:center}
  .hall__subphotos{flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;padding:0 2rem}
  .hall__sub,.hall__sub:nth-child(n+2){width:calc(50% - .25rem);height:auto;aspect-ratio:324/223}
  .hall__sub:first-child{width:100%}
  .t-caption{font-size:1.3rem;line-height:1.8rem}
  .hall__strip{margin-top:1.6rem;overflow:hidden}
  .hall__striprow{animation-duration:46s}
  .hall__stripitem{width:24rem;height:15.6rem}
  .hall__btn{margin-top:2.8rem;padding:0 2rem}

  /* 安心 */
  .reasons{height:auto;padding:4rem 2rem 4.4rem}
  .reasons__grid{flex-direction:column;align-items:center;gap:3.2rem;margin-top:2.8rem}
  .reason{width:100%;max-width:40rem;height:auto}
  .reason__photo{width:100%;height:auto;aspect-ratio:464/332;border-radius:1.8rem}
  .reason__photo .c-ph{border-radius:1.8rem}
  .reason__no{position:absolute;left:.8rem;top:auto;bottom:auto;margin-top:-4.2rem}
  .t-number{font-size:6.4rem;line-height:6.4rem}
  .reason__copy{position:static;width:auto;gap:.8rem;margin-top:1.6rem}
  .reason__copy h3{font-size:2rem;line-height:3rem;--ls:.08em}
  .t-body-reason{font-size:1.35rem;line-height:2.4rem;--ls:.04em}

  /* よくあるご質問 */
  .faq{height:auto;padding:4rem 2rem 4.4rem}
  .faq__list{width:auto;margin-top:2.4rem}
  .t-faq-q{font-size:1.5rem;line-height:2.4rem;--ls:.06em}
  .t-faq-a{font-size:1.4rem;line-height:2.4rem;--ls:.04em}
  .t-faq-tel{font-size:1.5rem;--ls:.02em}
  .c-faq__body{gap:1rem;padding-top:.3rem}
  .c-faq__tel .c-ico{width:2.2rem}
  .faq__btn{margin-top:2.8rem}

  /* コンセプト */
  .concept{position:relative;height:auto;padding:0}
  .concept__visual{position:relative;left:auto;top:auto;width:auto;height:auto;margin-top:0;overflow:visible}
  .concept__visual img{position:static;display:block;width:78%;margin-left:22%;height:auto;max-width:none;object-fit:fill}
  .concept__copy{position:static;width:auto;gap:0;padding:3.2rem 2rem 4.4rem}
  .concept__copy .t-concept{position:absolute;left:2rem;top:7.4rem;z-index:1;white-space:normal;margin:0;max-width:17rem}
  .t-concept{font-size:2.3rem;line-height:3.8rem;--ls:.16em}
  .t-concept-body{font-size:1.5rem;line-height:3.2rem;--ls:.06em}
}

/* 地図の補助写真（道案内）の見出し 2026-10-05 追加 */
.hall__subcap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 12px 9px;
  background:linear-gradient(rgba(40,36,60,0),rgba(40,36,60,.72));color:#fff;
  font-size:14px;font-weight:700;line-height:20px;letter-spacing:.06em}
.hall__subcap span{display:block;font-size:11px;font-weight:400;line-height:16px;opacity:.9}
@media screen and (max-width:1279px){
  .hall__subcap{padding:2rem 1rem .7rem;font-size:1.25rem;line-height:1.8rem}
  .hall__subcap span{font-size:1rem;line-height:1.5rem}
  .hall__sub:not(:first-child) .hall__subcap{padding:1.6rem .7rem .6rem;font-size:1.05rem;line-height:1.5rem}
  .hall__sub:not(:first-child) .hall__subcap span{font-size:.9rem;line-height:1.3rem}
}

/* 補助写真：ボタン化 2026-10-05 */
.hall__sub{display:block;padding:0;border:0;background:var(--ph);text-align:left;font-family:inherit}
.hall__subcap{display:block}