/* ==========================================================
   星のあしらい（ほしの＝星）。?star=1 のときだけ読み込む
   星は角を丸めた五芒星。色はユニフォームの黄色。
   PC：ゆっくりまたたく／スマホ：出てくるときだけ動く（ずっと動くものは出さない）
   ========================================================== */
.is-star {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.1l-5.1 2.8 1.1-5.7-4.3-4 5.8-.7z' fill='%23000' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-c: #ffd43b;
}
.is-star .st, .is-star .ttl__first::after, .is-star .logo__name::after,
.is-star .case__tab span::before, .is-star .case__tab span::after {
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
  background: var(--star-c);
}

/* ロゴ：「ほしの」の右上に小さな星 */
.is-star .logo__name { position: relative; }
.is-star .logo__name::after { content: ""; position: absolute; width: 16px; height: 16px; right: -20px; top: -2px; }

/* 見出し：最初の1文字の右上に星 */
.is-star .ttl__first { position: relative; display: inline-block; }
.is-star .ttl__first::after { content: ""; position: absolute; width: .42em; height: .42em; right: -.22em; top: -.05em; }

/* CASEの札：丸い穴を星に */
.is-star .case__tab span::before, .is-star .case__tab span::after { width: 14px; height: 14px; margin-top: -7px; border-radius: 0; background: var(--white); }

/* 番号の右上に星 */
.is-star .commit__item { position: relative; }
.is-star .commit__item::before { content: ""; position: absolute; width: 22px; height: 22px; left: 104px; top: -6px; }

/* 輪のあしらいを、大小3つの星に差し替え */
.is-star .trouble .wrap::before, .is-star .selfpay .sec__hd::before, .is-star .greeting .wrap::before, .is-star .reason .wrap::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110'%3E%3Cg fill='none' stroke='%23ffd43b' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M46 10l7.6 16 17.6 2.1-13 12 3.3 17.4L46 49l-15.5 8.5 3.3-17.4-13-12 17.6-2.1z'/%3E%3C/g%3E%3Cg fill='%23ffd43b' stroke='%23ffd43b' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M92 52l4 8.5 9.3 1.1-6.9 6.4 1.8 9.2L92 72.7l-8.2 4.5 1.8-9.2-6.9-6.4 9.3-1.1z'/%3E%3Cpath d='M30 80l2.4 5 5.5.7-4 3.8 1 5.4-4.9-2.7-4.8 2.7 1-5.4-4-3.8 5.5-.7z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 散らす星（star.js が入れる） */
.is-star .st { position: absolute; pointer-events: none; z-index: 2; width: var(--s, 14px); height: var(--s, 14px); }
.is-star .st--line { -webkit-mask: none; mask: none; background: none; }
.is-star .st--line::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.1l-5.1 2.8 1.1-5.7-4.3-4 5.8-.7z' fill='none' stroke='%23ffd43b' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.is-star .st--white { background: #fff; }
.is-star .arc, .is-star .news, .is-star .hero__photo { position: relative; }

/* 出てくる動き（全端末）：少し回りながらふわっと */
.is-star.js .st { opacity: 0; transform: scale(.3) rotate(-60deg); transition: opacity .7s ease-out var(--d, 0s), transform .9s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
.is-star.js .st.is-in { opacity: var(--o, 1); transform: none; }

/* 流れ星（ヒーローで1回だけ） */
.is-star .shoot { position: absolute; z-index: 3; top: -1%; left: 50%; width: 160px; height: 2px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%, #fff6c9); border-radius: 2px; transform: rotate(24deg); }
.is-star .shoot::after { content: ""; position: absolute; right: -9px; top: -8px; width: 18px; height: 18px; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; background: #fff6c9; }

/* PCだけ：ゆっくりまたたく・流れ星 */
@media (min-width: 1024px) {
  .is-star.js .st.is-in { animation: twinkle var(--t, 3.6s) ease-in-out var(--dd, 1s) infinite; }
  .is-star .logo__name::after { animation: twinkle 3.2s ease-in-out .8s infinite; }
  .is-star .is-in .ttl__first::after { animation: spinIn 1.2s cubic-bezier(.34, 1.56, .64, 1) both; }
  .is-star .commit__item.is-in::before { animation: spinIn 1s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
  .is-star .shoot { animation: shoot 1.4s ease-out 1.4s 1 forwards; }
  .is-star .case:hover .case__tab span::before, .is-star .case:hover .case__tab span::after { animation: spinOnce .6s ease-out; }
}
@keyframes twinkle { 0%, 100% { opacity: var(--o, 1); transform: scale(1) rotate(0); } 50% { opacity: calc(var(--o, 1) * .35); transform: scale(.72) rotate(18deg); } }
@keyframes spinIn { from { transform: scale(0) rotate(-140deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spinOnce { to { transform: rotate(144deg); } }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(24deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(240px, 107px) rotate(24deg); } }

@media (max-width: 1023px) {
  .is-star .commit__item::before { width: 16px; height: 16px; left: 70px; top: -4px; }
  .commit--flow.commit .commit__item::before { left: 50px; }
  .is-star .logo__name::after { width: 13px; height: 13px; right: -16px; }
  .is-star .case__tab span::before, .is-star .case__tab span::after { width: 12px; height: 12px; margin-top: -6px; }
  .is-star .shoot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-star .st { opacity: var(--o, 1) !important; transform: none !important; animation: none !important; }
  .is-star .shoot { display: none; }
}

/* ==========================================================
   参考サイトと同じにならないための作り分け（品質は同等以上）
   ・見出しの下＝横線→「線・星・線」　・CASEの札→左上の丸い番号
   ・ヒーローの帯→白地に緑文字＋星　・受付時間の箱→丸い札
   ・番号＝写真の左上に重ねる丸　・院長あいさつ＝左右反転
   ・弧の背景＝上だけ弧　・メニューの区切り線→なし
   ========================================================== */

/* 見出しの下：線・星・線 */
.is-star .ttl::after { width: 132px; height: 16px; border-radius: 0; margin-top: 20px;
  background:
    linear-gradient(var(--main), var(--main)) left center / 52px 2px no-repeat,
    linear-gradient(var(--main), var(--main)) right center / 52px 2px no-repeat,
    var(--star-c);
  -webkit-mask: linear-gradient(#000 0 0) left center / 52px 2px no-repeat, linear-gradient(#000 0 0) right center / 52px 2px no-repeat, var(--star) center / 16px 16px no-repeat;
  mask: linear-gradient(#000 0 0) left center / 52px 2px no-repeat, linear-gradient(#000 0 0) right center / 52px 2px no-repeat, var(--star) center / 16px 16px no-repeat;
}

/* メニュー：区切り線をやめ、下線で現在地を示す */
.is-star .gnav li { border-right: 0; }
.is-star .gnav a { position: relative; padding: 8px 16px; }
.is-star .gnav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background: var(--main); transform: scaleX(0); transition: transform .3s ease-out; }
.is-star .gnav a:hover::after { transform: scaleX(1); }

/* ヒーロー：帯は白地＋緑文字、先頭に星 */
.is-star .hero__badges p { background: rgba(255, 255, 255, .94); color: var(--main-d); border-radius: 99px; padding: 8px 26px 8px 50px; position: relative; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); }
.is-star .hero__badges p::before { content: ""; position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; background: var(--star-c); }
.is-star .hero__badges p:last-child { background: var(--main); color: #fff; }
.is-star .hero__badges p:last-child::before { background: #fff6c9; }
/* 受付時間：四角い箱→丸い札 */
.is-star .hero__box { width: 170px; height: 170px; min-width: 0; border-radius: 50%; border: 0; background: var(--sub); display: flex; flex-direction: column; justify-content: center; padding: 0; bottom: -60px; box-shadow: 0 0 0 6px #fff; }
.is-star .hero__box-label { position: static; transform: none; background: none; color: var(--ink); padding: 0; font-size: 15px; margin-bottom: 4px; }
.is-star .hero__box-text { color: var(--ink); font-size: 17px; }

/* CASE：上中央の札→左上の丸い番号。枠は細く、影をずらす */
.is-star .case { border-width: 3px; box-shadow: 8px 8px 0 var(--tint-2); padding-top: 64px; }
.is-star .case__tab { left: 22px; transform: none; top: -26px; width: 56px; height: 56px; padding: 0; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 5px #fff; display: grid; place-items: center; }
.is-star .case__tab span { background: none; font-size: 20px; line-height: 1; border-radius: 0; }
.is-star .case__tab span::before, .is-star .case__tab span::after { display: none; }
.is-star .case__check { margin-left: 0; }
.is-star .case__title { text-align: left; font-size: 25px; font-weight: 700; }
.is-star .ttl__first::after { width: .38em; height: .38em; right: -.3em; top: .05em; }

/* 吹き出し見出し：角丸＋左寄りのしっぽ */
.is-star .balloon p { border-radius: 12px; border-width: 2px; }
.is-star .balloon p::before { left: 30%; }
.is-star .balloon p::after { left: 30%; }

/* 番号：写真の左上に重ねた丸 */
.is-star .commit__item { position: relative; }
.is-star .commit__num { position: absolute; z-index: 2; left: -10px; top: -22px; width: 72px; height: 72px; margin: 0; display: grid; place-items: center; border-radius: 50%; font-size: 26px; background: #fff; color: var(--main-d); -webkit-text-fill-color: var(--main-d); box-shadow: 0 0 0 3px var(--main); }
.is-star .commit__img { box-shadow: none; }
.is-star .commit__item::before { left: 50px; top: -30px; z-index: 3; }
.is-star .commit { row-gap: 72px; padding-top: 22px; }

/* 交通事故・保険のパネル：濃い枠をやめ、角丸の面で */
.is-star .panel { border: 0; border-radius: 24px; background: var(--tint); overflow: hidden; }
.is-star .panel__head { margin: 0 0 40px; border-radius: 0; }
.is-star .panel__tiles li { border: 0; border-radius: 10px; background: #fff; }

/* 院長あいさつ：写真とカードを左右反転 */
.is-star .wish { flex-direction: row-reverse; }
.is-star .wish__card { margin: 140px -55px 0 0; padding: 56px 92px 40px 36px; }

/* 弧の背景：上だけ弧、下はまっすぐ */
.is-star .arc::before { border-radius: 200vw 200vw 0 0 / 50vw 50vw 0 0; }

/* フッターの項目頭：ダッシュ→小さな星 */
.is-star .ft__nav a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: 0; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; background: var(--star-c); }

@media (max-width: 1023px) {
  .is-star .hero__badges p { font-size: 13px; padding: 4px 12px 4px 30px; }
  .is-star .hero__badges p:last-child { font-size: 15px; }
  .is-star .hero__badges p::before { left: 10px; width: 14px; height: 14px; margin-top: -7px; }
  .is-star .hero__box { width: 104px; height: 104px; right: 10px; bottom: -40px; box-shadow: 0 0 0 4px #fff; }
  .is-star .hero__box-label { font-size: 12px; }
  .is-star .hero__box-text { font-size: 11px; }
  .is-star .case { border-width: 3px; box-shadow: 6px 6px 0 var(--tint-2); padding-top: 52px; }
  .is-star .case__tab { width: 48px; height: 48px; top: -22px; left: 16px; }
  .is-star .case__tab span { font-size: 17px; }
  .is-star .case__title { text-align: left; font-size: 19px; }
  .is-star .commit__num { width: 56px; height: 56px; font-size: 20px; left: -6px; top: -18px; }
  .is-star .commit--flow .commit__num { width: 44px; height: 44px; font-size: 16px; font-size: 16px; }
  .is-star .commit__item::before { left: 38px; top: -24px; }
  .is-star .wish { flex-direction: column; }
  .is-star .wish__card { margin: 0; padding: 28px 20px 26px; }
  .is-star .arc::before { border-radius: 780px 780px 0 0 / 195px 195px 0 0; }
}

/* ==========================================================
   星の作り直し（2026-10-14 社長「星がダサい」）
   黄色のベタ塗りの星をばらまくのをやめ、細い線と点の「星座」に。
   色は落ち着いた金色、線は1px。ロゴの横の星と見出し1文字目の星は外す。
   ========================================================== */
.is-star { --gold: #ffc61a; --gold-l: #ffe58a; }
.is-star .logo__name::after, .is-star .ttl__first::after, .is-star .shoot { display: none !important; }

/* 見出し下：細い線＋小さな星（主張を弱める） */
.is-star .ttl::after { width: 112px; height: 12px;
  background: linear-gradient(var(--main), var(--main)) left center / 46px 1px no-repeat, linear-gradient(var(--main), var(--main)) right center / 46px 1px no-repeat, var(--gold);
  -webkit-mask: linear-gradient(#000 0 0) left center / 46px 1px no-repeat, linear-gradient(#000 0 0) right center / 46px 1px no-repeat, var(--star) center / 11px 11px no-repeat;
  mask: linear-gradient(#000 0 0) left center / 46px 1px no-repeat, linear-gradient(#000 0 0) right center / 46px 1px no-repeat, var(--star) center / 11px 11px no-repeat; }

/* 各セクションの角の飾り：3つ星の絵→星座の線画（star.js が描く） */
.is-star .trouble .wrap::before, .is-star .selfpay .sec__hd::before, .is-star .greeting .wrap::before, .is-star .reason .wrap::after { display: none; }
.is-star .selfpay .sec__hd::after { display: none; }

/* 星座 */
.is-star .cst { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.is-star .cst line { stroke: var(--gold); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.is-star .cst circle { fill: var(--gold); }
.is-star .cst .big { fill: var(--gold); }
.is-star .cst--light line { stroke: #fff; opacity: .7; }
.is-star .cst--light circle, .is-star .cst--light .big { fill: #fff; }
.is-star .hero { position: relative; }
.is-star .hero__photo { z-index: 1; }
.is-star .hero .cst { z-index: 2; }

/* 出てくる動き：線が引かれ、点が灯る（1回だけ） */
.is-star.js .cst line { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) var(--ld, 0s); }
.is-star.js .cst circle, .is-star.js .cst .big { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .6s ease-out var(--pd, 0s), transform .8s cubic-bezier(.34, 1.4, .64, 1) var(--pd, 0s); }
.is-star.js .cst.is-in line { stroke-dashoffset: 0; }
.is-star.js .cst.is-in circle, .is-star.js .cst.is-in .big { opacity: 1; transform: none; }
/* PCだけ：大きな星がゆっくり明滅（不透明度だけ・形は動かさない） */
@media (min-width: 1024px) {
  .is-star.js .cst.is-in .big { animation: glow 4.2s ease-in-out 2.4s infinite; }
}
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 1023px) { .is-star .cst--pc { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .is-star .cst line { stroke-dashoffset: 0 !important; transition: none !important; }
  .is-star .cst circle, .is-star .cst .big { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media (max-width: 1023px) {
  .is-star .hero__badges { max-width: none; }
  .is-star .hero__badges p { white-space: nowrap; }
  .is-star .hero__badges p:last-child { font-size: 14px; }
  .is-star .hero__box { width: 96px; height: 96px; bottom: -52px; }
}

/* ==========================================================
   星の作り直し2（社長「大きい星の図で薄く背景に」）
   星座の線画をやめ、大きな星を薄く背景に敷く
   ========================================================== */
.is-star .cst { display: none !important; }
.is-star .bgstar { position: absolute; z-index: 0; pointer-events: none; display: block;
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
  background: var(--main); opacity: 0; transform: rotate(calc(var(--r, 0deg) - 20deg)) scale(.9);
  transition: opacity 1.4s ease-out, transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.is-star .bgstar.is-in { opacity: .08; transform: rotate(var(--r, 0deg)); }
.is-star .arc .bgstar { background: var(--main); }
.is-star .arc.is-in .bgstar, .is-star .arc .bgstar.is-in { opacity: .1; }
.is-star .hero > .hero__photo { position: relative; z-index: 1; }
.is-star .sec > .wrap, .is-star .arc > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .is-star .bgstar { transition: none; opacity: .08; transform: rotate(var(--r, 0deg)); }
}

/* 受付時間：丸い札→大きな星（明るい黄色） */
.is-star .hero__box { width: 270px; height: 270px; right: 1%; bottom: -118px; background: none; border: 0; border-radius: 0; box-shadow: none; isolation: isolate; padding: 18px 0 0;
  filter: drop-shadow(0 8px 14px rgba(120, 90, 0, .22)); }
.is-star .hero__box::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; background: linear-gradient(160deg, #ffe066 0%, #ffd43b 55%, #ffc61a 100%); }
.is-star .hero__box-label { font-size: 15px; margin-bottom: 2px; letter-spacing: .08em; }
.is-star .hero__box-text { font-size: 15px; line-height: 1.5; }
@media (min-width: 1024px) {
  .is-star.js .hero__box { animation: heroIn .8s cubic-bezier(.2, .7, .2, 1) .7s forwards, starSway 6s ease-in-out 2s infinite; }
}
@keyframes starSway { 0%, 100% { rotate: 0deg; } 50% { rotate: 6deg; } }
@media (max-width: 1023px) {
  .is-star .hero__box { width: 124px; height: 124px; right: -4px; bottom: -64px; padding-top: 12px; }
  .is-star .hero__box-label { font-size: 11px; }
  .is-star .hero__box-text { font-size: 10px; line-height: 1.4; }
}

/* 受付時間の星：文字を上に寄せる／スマホは星から文字が出ない大きさに */
.is-star .hero__box { padding: 0 0 40px; justify-content: center; }
@media (max-width: 1023px) {
  .is-star .hero__box { width: 146px; height: 146px; right: 0; bottom: -74px; padding: 0 0 20px; }
  .is-star .hero__box-label { font-size: 11px; margin-bottom: 1px; }
  .is-star .hero__box-text { font-size: 10px; line-height: 1.45; white-space: nowrap; letter-spacing: 0; }
}
@media (max-width: 1023px) {
  .is-star .hero__box { bottom: -112px; }
  .is-star .info { margin-top: 128px; }
}
/* 受付時間の星：PCは文字を少し下へ／SPは文字を小さくして星の中に収める */
.is-star .hero__box { padding: 0 0 18px; }
@media (max-width: 1023px) {
  .is-star .hero__box { padding: 0 0 12px; }
  .is-star .hero__box-label { font-size: 10px; }
  .is-star .hero__box-text { font-size: 9px; line-height: 1.4; }
}

/* ==========================================================
   背景の星（黄色・大小）2026-10-14 社長「色を黄色で、小さい星も他の部分にも」
   ========================================================== */
.is-star .bgstar { background: linear-gradient(160deg, #ffe066, #ffd43b 60%, #ffc61a); opacity: 0;
  transform: translateY(var(--py, 0px)); rotate: calc(var(--r, 0deg) - 40deg); scale: .6;
  transition: opacity 1.2s ease-out, rotate 1.6s cubic-bezier(.2, .7, .2, 1), scale 1.6s cubic-bezier(.34, 1.3, .64, 1); }
.is-star .bgstar.is-in { opacity: var(--o, .3); rotate: var(--r, 0deg); scale: 1; }
.is-star .arc.is-in .bgstar, .is-star .arc .bgstar.is-in { opacity: var(--o, .3); }
.is-star .bgstar--s { filter: drop-shadow(0 4px 10px rgba(255, 196, 0, .25)); }
.is-star .sec > .wrap, .is-star .arc > .wrap, .is-star .news > .wrap, .is-star .info > .info__card { position: relative; z-index: 1; }
.is-star .info { position: relative; }
@media (min-width: 1024px) {
  .is-star .bgstar.is-in { animation: starFloat var(--fd, 8s) ease-in-out var(--fdl, 0s) infinite; }
}
@keyframes starFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
.is-star .bgstar--s.is-in { animation-name: starFloatS; }
@keyframes starFloatS {
  0%, 100% { translate: 0 0; rotate: var(--r, 0deg); }
  50% { translate: 0 -10px; rotate: calc(var(--r, 0deg) + 12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .is-star .bgstar { transition: none; opacity: var(--o, .3); rotate: var(--r, 0deg); scale: 1; transform: none; animation: none !important; }
}
.is-star .arc .bgstar, .is-star .news .bgstar { background: linear-gradient(160deg, #ffe066, #ffd43b 60%, #ffc61a); }