/* FamShare のアプリ説明のページ(ys.css のあとに読む)。色はアプリの標準の配色に合わせる。 */
.lp2 { background:#FFFBF8; --c:#C8452D; --c-soft:#FEECE6; --c-mid:#FBD9CE; --ink2:#26211D; --mut:#5F5550; --line2:#EADFD9; color:var(--ink2); font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP','Noto Sans KR','Noto Sans TC',sans-serif; }
.lp2 h1,.lp2 h2,.lp2 h3 { font-family:inherit; color:var(--ink2); }
.lp2 img { display:block; }
.wrap2 { max-width:1040px; margin:0 auto; padding:0 20px; }
.crumb2 { font-size:13px; color:var(--mut); margin:0; padding:14px 0 0; } .crumb2 a { color:var(--mut); }
.hero2 { background:var(--c-soft); overflow:hidden; }
.hero2 .wrap2 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:center; padding-top:8px; padding-bottom:0; }
.hero2 .kick { margin:20px 0 8px; font-size:15px; font-weight:700; color:var(--c); }
.hero2 h1 { margin:0 0 16px; font-size:clamp(28px,3.7vw,40px); line-height:1.35; font-weight:700; letter-spacing:.01em; overflow-wrap:anywhere; }
.hero2 .lead2 { margin:0 0 22px; font-size:17px; line-height:1.85; }
.store2 { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.btn2 { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 24px; border-radius:12px; background:var(--c); color:#fff; font-weight:700; text-decoration:none; }
a.btn2:hover { background:#A83821; color:#fff; }
.btn2.alt { background:#fff; color:#8E3423; box-shadow:inset 0 0 0 1.5px #E7B5A6; } a.btn2.alt:hover { background:#FFF6F2; color:#8E3423; }
.note2 { margin:0 0 28px; font-size:14px; color:var(--mut); }
.phones { display:flex; justify-content:center; gap:16px; padding-top:24px; max-height:470px; overflow:hidden; }
.phones img { width:min(46%,230px); height:auto; border-radius:22px; box-shadow:0 18px 40px -18px rgba(120,60,40,.55); background:#fff; }
.phones img:nth-child(2) { margin-top:36px; }
.sec { padding:64px 0 0; } .sec > .wrap2 > h2,.h2c { font-size:clamp(24px,3.4vw,32px); font-weight:700; line-height:1.4; margin:0 0 20px; }

.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card2 { background:#fff; border:1px solid var(--line2); border-radius:16px; padding:20px; }
.card2 h3 { margin:0 0 8px; font-size:17px; line-height:1.5; font-weight:700; }
.card2 p { margin:0; font-size:15px; line-height:1.75; color:var(--mut); }
.share2 { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); gap:32px; align-items:center; background:var(--c-soft); border-radius:24px; padding:32px; }
.share2 h2 { margin-top:0; } .share2 > div > p { line-height:1.85; }
.ab { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.ab > div { border-radius:14px; padding:16px; background:#fff; }
.ab h3 { margin:0 0 6px; font-size:16px; font-weight:700; color:#8E3423; }
.ab > div + div { background:#E9E8F8; } .ab > div + div h3 { color:#3F3A7A; }
.ab p { margin:0; font-size:14.5px; line-height:1.7; }
.share2 img { width:100%; max-width:260px; height:auto; margin:0 auto; border-radius:20px; box-shadow:0 14px 30px -16px rgba(120,60,40,.5); }
.feats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.feat { background:#fff; border:1px solid var(--line2); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.feat .pic { background:var(--c-soft); height:300px; overflow:hidden; padding:20px 28px 0; }
.feat .pic img { width:100%; height:auto; border-radius:14px 14px 0 0; }
.feat div.t { padding:16px 18px 18px; } .feat h3 { margin:0 0 6px; font-size:17px; font-weight:700; } .feat p { margin:0; font-size:14.5px; line-height:1.7; color:var(--mut); }
.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.grid4 a { color:var(--c); font-size:14px; font-weight:700; display:inline-block; margin-top:8px; }
.two2 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.check { list-style:none; margin:0; padding:0; } .check li { padding:0 0 12px 1.6em; position:relative; line-height:1.75; font-size:15.5px; }
.check li::before { content:""; position:absolute; left:2px; top:.55em; width:12px; height:7px; border-left:2.5px solid var(--c); border-bottom:2.5px solid var(--c); transform:rotate(-45deg); }
.steps2 { list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:12px; }
.steps2 li { counter-increment:s; position:relative; padding:4px 0 4px 48px; line-height:1.75; min-height:36px; }
.steps2 li::before { content:counter(s); position:absolute; left:0; top:2px; width:34px; height:34px; border-radius:50%; background:var(--c); color:#fff; font-weight:700; text-align:center; line-height:34px; }
.faq2 details { background:#fff; border:1px solid var(--line2); border-radius:12px; margin:0 0 8px; }
.faq2 summary { list-style:none; cursor:pointer; display:flex; gap:12px; align-items:center; min-height:48px; padding:10px 16px; font-weight:700; line-height:1.5; }
.faq2 summary::-webkit-details-marker { display:none; }
.faq2 summary::after { content:""; flex:none; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--mut); border-bottom:2px solid var(--mut); transform:rotate(45deg); }
.faq2 details[open] summary::after { transform:rotate(-135deg); }
.faq2 p { margin:0; padding:0 16px 14px; line-height:1.75; }
.links2 { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; } .links2 a { color:#8E3423; }
.cta2 { margin-top:64px; background:var(--c-soft); padding:48px 0; }
.cta2 .wrap2 { display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cta2 h2 { margin:0 0 8px; font-size:clamp(24px,3.4vw,32px); font-weight:700; } .cta2 p { margin:0 0 16px; }
.qr2 { display:none; text-align:center; font-size:13px; color:var(--mut); max-width:170px; line-height:1.5; }
.qr2 svg { width:132px; height:132px; display:block; margin:0 auto 8px; padding:8px; background:#fff; border-radius:10px; fill:#000; }
.sample2 { font-size:12.5px; color:var(--mut); margin:12px 0 0; }
@media (min-width:900px) and (hover:hover) { .qr2 { display:block; } }
@media (max-width:820px) {
  .hero2 .wrap2,.share2,.two2 { grid-template-columns:minmax(0,1fr); } .grid3,.feats { grid-template-columns:minmax(0,1fr); }
  .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .links2 { grid-template-columns:minmax(0,1fr); }
  .phones { max-height:360px; } .sec { padding-top:48px; } .share2 { padding:20px; }
  .feat .pic { height:260px; padding:16px 60px 0; }
}
@media (max-width:420px) { .ab { grid-template-columns:minmax(0,1fr); } .btn2 { width:100%; } .feat .pic { padding:16px 36px 0; } }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
.lp2 > section:last-child { margin-bottom:0; }
.coffee2 p { line-height:1.8; max-width:640px; }
.coffee2 .h2c { font-size:22px; margin-bottom:8px; }