body{margin:0;background:#FFFFFF}
a{color:#C92D19}a:hover{color:#C42A17}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.sec{padding:96px 0}
.cream{background:#FFF7EE}
.eyebrow{display:block;text-align:center;font-size:13px;font-weight:700;letter-spacing:.18em;color:#C92D19;margin-bottom:10px}
.h2{margin:0;text-align:center;font-size:34px;line-height:1.4;font-weight:700;color:#333333}
.bar{width:48px;height:4px;border-radius:2px;background:#FFA02F;margin:18px auto 20px}
.lead{margin:0 auto 48px;max-width:720px;text-align:center;font-size:16px;line-height:1.9;color:#5C5048}
.ph{background:#FFFFFF;border:2px solid #F2C494;border-radius:8px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;color:#9A6A3A;font-size:13px;text-align:center;line-height:1.6;padding:12px}
.shot{box-shadow:14px 14px 0 #FFA02F}
.card{background:#FFFFFF;border:1px solid #F2C494;border-radius:10px;padding:28px;box-sizing:border-box}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:6px;font-weight:700;font-size:16px;text-decoration:none;box-sizing:border-box}
.btn-main{background:#D93220;color:#FFFFFF;box-shadow:0 4px 0 #A82412}
.btn-main:hover{color:#FFFFFF;background:#C92D19}
.btn-sub{background:#FFFFFF;color:#C92D19;border:2px solid #F13B24}
.navl{display:flex;gap:28px;align-items:center}
.menu{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center}
.h1{margin:0;font-size:clamp(28px,3.1vw,42px);line-height:1.45;font-weight:700;color:#333333}
.h1 span{display:inline-block}
.circle{position:relative;width:180px;height:180px;border-radius:50%;background:#FFFFFF;border:10px solid #FFD6A5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;box-sizing:border-box;margin:0 auto;padding:16px}
.num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#D93220;color:#FFFFFF;font-weight:700;font-size:16px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;background:#FFFFFF;border:1px solid #F2C494;border-radius:10px;overflow:hidden}
.cmp th,.cmp td{border-bottom:1px solid #F7DCBE;padding:16px 18px;text-align:left;font-size:14px;line-height:1.7;vertical-align:top;color:#333333}
.cmp thead th{background:#FFF7EE;font-size:14px}
.cmp .us{background:#FFF1E2}
.cmp thead .us{background:#D93220;color:#FFFFFF}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.8;color:#333333}
.qa{background:#FFFFFF;border:1px solid #F2C494;border-radius:10px;padding:20px 24px}
.qa summary{font-weight:700;cursor:pointer;color:#333333;list-style:none;display:flex;gap:12px;align-items:flex-start}
.qa summary::-webkit-details-marker{display:none}
.q{flex:none;color:#F13B24;font-weight:700}
@media (max-width:860px){
.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero{grid-template-columns:minmax(0,1fr);gap:40px}
.navl{display:none}
.menu{display:inline-flex}
}
@media (max-width:560px){
.g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
.sec{padding:64px 0}
.h2{font-size:25px}
.h1{font-size:26px}
.wrap{padding:0 16px}
.circle{width:160px;height:160px}
}
.nav-open .navl{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#FFFFFF;padding:8px 16px 16px;box-shadow:0 8px 0 #FFE2C0}
.nav-open .navl a{padding:14px 4px;border-bottom:1px solid #FFE2C0}
.nav-open .navl a.btn{margin-top:12px;border-bottom:0}


/* templetta.jp に寄せる。赤は2つ：線・アイコン・大きな見出しは #F13B24、白い字を乗せる地は #D93220（白い字との差 4.7。#F13B24 だと 3.9 で小さな字が読みにくい） */
body>div{overflow-x:clip}
.h1{color:#FFFFFF;text-shadow:0 2px 0 #D96A00,0 0 14px rgba(150,60,0,.3)}
/* 説明の文は小さいので、白にせず濃い色にする（オレンジの上の白は読みにくい） */
.hero-lead{font-weight:700}
.circle{margin-top:24px}
.circle-icon{position:absolute;top:-38px;left:50%;transform:translateX(-50%)}
/* 見出しの帯：オレンジの帯の真ん中に、赤い方眼の平行四辺形 */
.band{margin:0 calc(50% - 50vw) 28px;background:#FFA02F;display:flex;justify-content:center}
.band-title{position:relative;z-index:0;margin:0;padding:16px 72px;color:#FFFFFF;font-size:32px;line-height:1.4;font-weight:700;text-align:center}
.band-title::before{content:"";position:absolute;z-index:-1;inset:0 -12px;background-color:#F13B24;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:8px 8px;transform:skewX(-28deg)}
.band+.lead{margin-top:0}
@media (max-width:560px){
.band-title{font-size:22px;padding:14px 32px}
.band-title::before{inset:0 -4px;transform:skewX(-18deg)}
}
/* 見出しは句読点・かっこを詰める（本文は読みやすさのため詰めない） */
.h1,.h2,.band-title,h3,.circle strong,.card strong{font-feature-settings:"palt";letter-spacing:.02em}
/* ほかの作り方とのちがい：表ではなく3つのカード（スマホでは縦に並ぶ） */
.cmp-cards{align-items:stretch}
.cmp-card{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #F2C494;border-radius:10px;overflow:hidden}
.cmp-card.us{border:3px solid #D93220}
.cmp-head{display:flex;flex-direction:column;gap:4px;padding:18px 22px;background:#FFF7EE;text-align:center}
.cmp-head strong{font-size:19px;color:#333333}
.cmp-head span{font-size:13px;color:#5C5048}
.cmp-head.us{background:#D93220}
.cmp-head.us strong,.cmp-head.us span{color:#FFFFFF}
.cmp-body{display:flex;flex-direction:column;flex:1;padding:6px 22px 22px}
.cmp-row,.cmp-fit{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid #F7DCBE}
.cmp-fit{margin-top:auto;border-bottom:0;border-top:2px solid #FFE2C0;padding-bottom:0}
.cmp-k{font-size:13px;font-weight:700;color:#C92D19}
.cmp-v{font-size:15px;line-height:1.7;color:#333333}
.cmp-card.us .cmp-v{font-weight:700}
.cmp-row:has(+ .cmp-fit){border-bottom:0}
/* 3枚のカードの行（見出し・作る人…向いている方）を横にそろえる。カードの行の高さを、3枚で分け合う（subgrid） */
.cmp-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
.cmp-cards{row-gap:28px}
.cmp-body{display:contents}
.cmp-row,.cmp-fit{margin:0 22px}
.cmp-head+.cmp-body .cmp-row:first-child{padding-top:20px}
.cmp-fit{margin-top:0;padding-bottom:22px}
/* 帯の見出しのすぐ下に説明の文がないとき（制作の流れ）は、帯と中身のあいだを空ける */
.band+:not(.lead){margin-top:48px}
/* お問い合わせのページ */
.contact-page{padding-top:56px}
.contact-form{display:flex;flex-direction:column;gap:18px}
.contact-field{display:flex;flex-direction:column;gap:6px}
.contact-label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#333333}
.contact-req{font-size:12px;font-weight:700;color:#FFFFFF;background:#D93220;border-radius:3px;padding:1px 6px}
.contact-field input,.contact-field textarea{font:inherit;font-size:16px;color:#333333;border:1px solid #F2C494;border-radius:6px;padding:12px 14px;background:#FFFFFF;box-sizing:border-box;width:100%}
.contact-field input:focus,.contact-field textarea:focus{outline:2px solid #FFA02F;outline-offset:1px}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-note{margin:0;font-size:14px;color:#5C5048}
.contact-submit{text-align:center}
.contact-submit .btn{min-width:240px;border:0;cursor:pointer;font-family:inherit}
.contact-done{background:#FFFFFF;border:2px solid #FFA02F;border-radius:10px;padding:28px;text-align:center}
.contact-done-title{font-size:20px;font-weight:700;color:#333333}
.contact-error{color:#C92D19;font-weight:700}