/* FAQ。色と書体は top-page.html、動きは yellowzebrasafaris.com の実測に合わせた。
tools/build-faq.py が書き出す。直接いじらない。
YZS の動きの実測:
・ホバーは 0.75s ease-out と長め
・変わるのは色だけ。枠の色も地の色も変えないし、浮かせも影も付けない
・写真のズームも scale(1) → scale(1.03) と、ごく浅い
ここでもそれに倣い、開閉の印は回転させず、＋の縦棒が消えて − になるだけにしてある。
*/
.jtf{
--f: "Noto Sans JP", sans-serif;
--ink:#1F1F1F; --sub:#6B6764;
--accent:#CE1433; --accent-h:#A80F29;
--gold:#F9A600; /* 二つめのアクセント。赤一色を避けるため */
--soft:#F8DBDD; --paper:#FDFDFD; --line:#EBD9DA;
--ease:.75s ease-out;
font-family:var(--f); color:var(--ink); background:var(--paper);
padding-inline:20px; padding-block:48px 80px;
}
@media (min-width:1024px){ .jtf{ padding-inline:calc(50% - 440px); padding-block:72px 112px } }
.jtf *{ box-sizing:border-box }
.jtf [hidden]{ display:none !important }
/* ---------- 見出し ---------- */
/* 見出しの上のラベル。のぼり旗の形＋桜。top-page.html の .eyebrow と同じ。 */
.jtf-eyebrow{
display:inline-flex; align-items:center; margin:0 0 20px; padding:5px 26px 5px 14px;
border-radius:0; background:var(--accent); color:var(--paper);
font-size:13px; font-weight:700; line-height:1.6; letter-spacing:.14em;
clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.jtf-eyebrow::before{
content:""; flex:0 0 13px; width:13px; height:13px; margin-right:8px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(0%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(72%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(144%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(216%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(288%2012%2012)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.5'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(0%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(72%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(144%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(216%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(288%2012%2012)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.5'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.jtf-h1{
margin:0 0 16px;
font-size:clamp(28px, 2.2vw + 13px, 40px); font-weight:700; line-height:1.4;
}
.jtf-accent{ color:var(--accent) }
.jtf-lead{ margin:0 0 36px; font-size:16px; line-height:1.9; color:var(--sub); max-width:60ch }
.jtf-head{ margin:0 0 56px }
/* ---------- 検索（YZS と同じ、枠のない1本線） ---------- */
.jtf-search{ margin:0 0 36px; max-width:560px }
.jtf-search__label{
display:block; margin:0 0 10px; font-size:13px; font-weight:700;
letter-spacing:.04em; color:var(--sub);
}
.jtf-search__row{
display:flex; align-items:center; gap:12px;
padding:0 0 12px; border-bottom:1px solid var(--ink);
transition:border-color var(--ease);
}
.jtf-search__row:focus-within{ border-bottom-color:var(--accent) }
.jtf-search__row i{ flex:0 0 auto; font-size:17px; color:var(--sub) }
.jtf-search input{
flex:1 1 auto; min-width:0;
border:0; background:none; padding:0; color:var(--ink);
font-family:var(--f); font-size:clamp(17px, .8vw + 14px, 22px); line-height:1.5;
}
.jtf-search input:focus{ outline:none }
.jtf-search input::placeholder{ color:var(--sub); opacity:.65 }
.jtf-search input::-webkit-search-cancel-button{ display:none }
.jtf-search__clear{
flex:0 0 auto; border:0; background:none; cursor:pointer; padding:4px;
color:var(--sub); font-size:15px; line-height:1; transition:color var(--ease);
}
.jtf-search__clear:hover{ color:var(--accent) }
.jtf-search__count{ margin:12px 0 0; font-size:13px; color:var(--sub); min-height:1.6em }
/* ---------- カテゴリへの飛び先 ---------- */
.jtf-jumps{ display:flex; flex-wrap:wrap; gap:10px 28px }
.jtf-jump{
display:inline-flex; align-items:center; gap:8px;
color:var(--sub); text-decoration:none; font-size:14px; font-weight:700; line-height:1.6;
transition:color var(--ease);
}
.jtf-jump i{ font-size:13px; color:var(--accent); transition:color var(--ease) }
.jtf-jump:hover{ color:var(--accent) }
/* ---------- カテゴリ ---------- */
/* 追従ヘッダー（77px）の下に隠れないよう、飛び先を下げる */
.jtf-sec{ margin-top:64px; scroll-margin-top:100px }
.jtf-h2{
display:flex; align-items:baseline; gap:12px;
margin:0 0 8px; padding-bottom:14px; border-bottom:1px solid var(--line);
font-size:clamp(22px, 1vw + 18px, 31.5px); font-weight:700; line-height:1.4;
}
.jtf-h2 i{ font-size:.72em; color:var(--accent) }
.jtf-h2 span{ font-size:13px; font-weight:400; color:var(--sub) }
/* ---------- 1問ずつ ----------
枠で囲ったカードにはしない。区切りは下の細い線1本だけ。 */
.jtf-item{ border-bottom:1px solid var(--line); scroll-margin-top:100px }
.jtf-item > summary{
display:flex; align-items:flex-start; gap:20px; cursor:pointer;
padding:22px 0; list-style:none;
transition:color var(--ease);
}
.jtf-item > summary::-webkit-details-marker{ display:none }
.jtf-item > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }
.jtf-q{
flex:1 1 auto; font-size:clamp(16px, .4vw + 15px, 18px); font-weight:700; line-height:1.7;
transition:color var(--ease);
}
.jtf-item > summary:hover .jtf-q{ color:var(--accent) }
/* 開閉の印。回さない。＋の縦棒が消えて − になるだけ */
.jtf-mark{
flex:0 0 14px; position:relative; width:14px; height:14px; margin-top:.45em;
}
.jtf-mark::before, .jtf-mark::after{
content:""; position:absolute; left:0; top:50%; width:14px; height:1px;
background:var(--ink); transition:background-color var(--ease), opacity var(--ease);
}
.jtf-mark::after{ transform:rotate(90deg) }
.jtf-item[open] .jtf-mark::after{ opacity:0 }
.jtf-item > summary:hover .jtf-mark::before,
.jtf-item > summary:hover .jtf-mark::after{ background:var(--accent) }
.jtf-item[open] > summary .jtf-q{ color:var(--accent) }
/* 答え。開閉は JS が高さを付けて動かす（JSが無ければそのまま開く） */
.jtf-wrap{ overflow:hidden }
.jtf-item.is-animating .jtf-wrap{ transition:height .5s ease-out }
.jtf-a{ padding:0 34px 26px 0; font-size:16px; line-height:1.9 }
.jtf-a > *:first-child{ margin-top:0 }
.jtf-a p{ margin:0 0 1em }
.jtf-a p:last-child{ margin-bottom:0 }
.jtf-a ul{ margin:0 0 1em; padding-left:1.4em; list-style:disc }
.jtf-a ol{ margin:0 0 1em; padding-left:1.4em; list-style:decimal }
.jtf-a li{ margin:0 0 .4em }
.jtf-a li::marker{ color:var(--gold) }
.jtf-a a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px;
transition:color var(--ease) }
.jtf-a a:hover{ color:var(--accent-h) }
.jtf-a strong{ font-weight:700 }
.jtf-empty{
margin:56px 0 0; padding-top:32px; border-top:1px solid var(--line);
font-size:16px; line-height:1.9; color:var(--sub);
}
.jtf-empty a{ color:var(--accent) }
/* ---------- 最後のCTA ---------- */
.jtf-cta{ margin-top:72px; padding-top:40px; border-top:1px solid var(--line) }
.jtf-cta h2{ margin:0 0 10px; font-size:clamp(22px, 1vw + 18px, 31.5px); font-weight:700 }
.jtf-cta p{ margin:0 0 24px; font-size:16px; line-height:1.9; color:var(--sub) }
.jtf-btn{
display:inline-block; padding:16px 40px; border-radius:200px;
background:var(--accent); color:var(--paper); text-decoration:none;
font-size:16px; font-weight:700; transition:background-color var(--ease);
}
.jtf-btn:hover{ background:var(--accent-h) }
@media (prefers-reduced-motion: reduce){
.jtf *{ transition:none !important }
}