:root{--tp-orange:#C0634C;--tp-orange-bg:#fdf0ec;--tp-orange-bd:#d4927f}
body{font-family:'Noto Sans JP',sans-serif;font-size:14px;background:var(--tp-cream);color:var(--tp-text);line-height:1.6}

.bc{background:var(--tp-dark);padding:0 2rem;font-size:13px;color:#888;display:flex;gap:10px;align-items:center;height:52px;position:sticky;top:0;z-index:100}
.bc span{color:#444}
.bc a{color:#aaa;text-decoration:none}
.bc a:hover{color:#fff}

.hero{background:linear-gradient(180deg,var(--tp-cream2) 0%,var(--tp-cream) 100%);padding:56px 0 46px;border-bottom:1px solid var(--tp-border);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--tp-orange) 0%,#e0a187 55%,transparent 100%)}
.hero::after{content:'';position:absolute;top:-50px;right:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(192,99,76,.10) 0%,transparent 70%);pointer-events:none}
.hero-eyebrow{font-size:11px;font-weight:700;color:var(--tp-orange);letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;position:relative;z-index:1}
.hero-inner{border-left:3px solid var(--tp-orange);padding-left:18px;position:relative;z-index:1}
.hero h1{font-size:2.1rem;font-weight:800;color:var(--tp-text);line-height:1.3;letter-spacing:-.01em;margin-bottom:14px}
.accent{color:var(--tp-orange)}
.hero-body{font-size:15px;color:var(--tp-text2);line-height:1.9;margin-bottom:8px}
.hero-body-note{font-size:15px;color:var(--tp-text);font-weight:700}

.intro-note{max-width:1040px;margin:0 auto;padding:20px 24px 4px;text-align:center}
.intro-note p{font-size:13px;line-height:1.9;color:var(--tp-text2);margin:0}
.intro-note b{color:var(--tp-text);font-weight:700;white-space:nowrap}

.marquee-wrap{overflow:hidden;padding:10px 0;background:var(--tp-cream2);border-bottom:1px solid var(--tp-border)}
.marquee{display:flex;gap:40px;animation:scroll 22s linear infinite;white-space:nowrap}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{font-size:12px;color:var(--tp-text3)}

.section{padding:52px 0;border-bottom:1px solid var(--tp-border);scroll-margin-top:52px}
.container{max-width:860px;margin:0 auto;padding:0 24px}
.section-header{margin-bottom:28px}
.section-num{font-size:11px;font-weight:700;color:var(--tp-orange);letter-spacing:.14em;display:block;margin-bottom:10px}
.section-title{font-size:1.5rem;font-weight:800;color:var(--tp-text);letter-spacing:-.01em;line-height:1.3;display:inline}
.section-sub{font-size:14px;color:var(--tp-text2);margin-top:0;display:inline;margin-left:10px}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tool-card{background:#fff;border:1px solid var(--tp-border);border-radius:12px;padding:20px;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:all .15s}
.tool-card:hover{border-color:var(--tp-orange-bd);box-shadow:0 2px 12px rgba(192,99,76,.08);transform:translateY(-2px)}
.tool-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tool-icon{width:38px;height:38px;border-radius:10px;background:var(--tp-cream2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.tool-name{font-size:14px;font-weight:700;color:var(--tp-text)}
.tool-desc{font-size:13px;color:var(--tp-text2);line-height:1.8;margin-bottom:14px;flex:1}
.tool-tag{font-size:11px;padding:5px 14px;border-radius:99px;display:inline-block;font-weight:700;align-self:flex-start}
.tool-tag.free{background:var(--tp-green-bg);color:var(--tp-green)}
.tool-tag.try{background:var(--tp-orange);color:#fff}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--tp-border);border-radius:12px;padding:20px}
.card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.card-icon{width:38px;height:38px;border-radius:10px;background:var(--tp-cream2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.card h3{font-size:14px;font-weight:700;color:var(--tp-text)}
.card p{font-size:13px;color:var(--tp-text2);line-height:1.8}

.site-description{padding:40px 24px 0;text-align:center;max-width:620px;margin:0 auto}
.site-description p{font-size:13px;color:var(--tp-text3);line-height:1.9;margin-bottom:6px}

.to-service{padding:32px 24px 56px;text-align:center}
.to-service p{font-size:14px;color:var(--tp-text2)}
.to-service a{color:var(--tp-orange);border-bottom:1px solid rgba(192,99,76,.3);padding-bottom:1px;transition:border-color .15s}
.to-service a:hover{border-color:var(--tp-orange)}

@media(max-width:600px){
  .hero h1{font-size:1.6rem}
  .hero{padding:40px 0 36px}
  .sp-br{display:block}
  .section-title{display:block}
  .section-sub{display:none}
  .tools-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}