/* 希望の火 Flame of Hope 共通の見た目（全ページで使います） */
:root{--beige:#ede5da;--purple:#a26eda;--gold:#d29f68;--warm:#cf9d66;--text:#555;--head:#333;--dark:#222;--hd:rgba(40,40,40,.92)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:#fff;color:var(--text);font:16px/1.85 "Open Sans","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;overflow-wrap:anywhere}
img,video,iframe{max-width:100%}
img{height:auto}
a{color:var(--purple)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.serif{font-family:Lora,"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.prev-note{background:#fff6d6;color:#4a3b00;font-size:14px;text-align:center;padding:6px 12px}
/* 上の帯とメニュー */
.hd{position:sticky;top:0;z-index:50;background:var(--hd);backdrop-filter:blur(6px)}
.bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;flex-wrap:wrap}
.logo img{height:54px;width:auto;display:block}
.mbtn{display:none;background:none;border:1px solid rgba(255,255,255,.6);color:#fff;font:inherit;font-size:15px;padding:6px 14px;border-radius:4px;cursor:pointer}
#gnav ul{list-style:none;margin:0;padding:0}
#gnav .nav{display:flex;flex-wrap:wrap;gap:2px}
#gnav .nav>li{position:relative}
#gnav a{display:block;color:rgba(255,255,255,.88);text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;white-space:nowrap}
#gnav a:hover{color:#fff}
#gnav .has>a::after{content:" ▾";font-size:11px}
#gnav .sub{display:none;position:absolute;left:0;top:100%;min-width:230px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:6px 0;border-top:3px solid var(--purple)}
#gnav .sub a{color:#444;font-weight:400;white-space:normal;padding:7px 16px}
#gnav .sub a:hover{color:var(--purple);background:#f7f2ec}
#gnav .sub .sub{left:100%;top:-6px}
#gnav li:hover>.sub,#gnav li:focus-within>.sub{display:block}
@media(max-width:960px){
 .logo img{height:44px}
 .mbtn{display:block}
 #gnav{display:none;width:100%;max-height:75vh;overflow:auto;padding-bottom:10px}
 .hd.open #gnav{display:block}
 #gnav .nav{display:block}
 #gnav .sub,#gnav .sub .sub{display:block;position:static;box-shadow:none;background:none;border:0;padding:0 0 0 16px;min-width:0}
 #gnav .sub a{color:rgba(255,255,255,.78);padding:6px 10px}
 #gnav .sub a:hover{background:none;color:#fff}
 #gnav .has>a::after{content:""}
}
/* 共通の部品 */
.s{padding:clamp(44px,6vw,80px) 20px}.beige{background:var(--beige)}.white{background:#fff}
.w{max-width:1080px;margin:0 auto}.w.narrow{max-width:760px}
h1,h2,h3,h4{color:var(--head);line-height:1.5}
h2{font-family:Lora,"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:clamp(22px,3vw,30px)}
.video{position:relative;aspect-ratio:16/9;margin:1.4em 0}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
video.mv{width:100%;margin:1.2em 0}
.btn{display:inline-block;background:var(--warm);color:#fff;text-decoration:none;padding:12px 36px;border:2px solid #fff;font-size:17px;margin-top:.6em}.btn:hover{background:#b9874f}
.pill{display:inline-block;font-family:Oswald,sans-serif;letter-spacing:3px;font-size:16px;color:#fff;text-decoration:none;background:var(--gold);border-radius:100px;padding:13px 32px;margin:.4em .2em}.pill:hover{background:#cc8d66}
/* 固定ページ・記事の本文 */
.pg .sec{padding:clamp(28px,4vw,54px) 20px}
.pg .sec:nth-of-type(even){background:var(--beige)}
.sec .w{max-width:1080px}
.row1,.cols{margin:0 0 1.6em}
.pg .row1,.pg .cols{max-width:860px;margin-left:auto;margin-right:auto}
.cols{display:grid;grid-template-columns:var(--cols);gap:24px 30px;align-items:start}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.t>:first-child{margin-top:0}.t p{margin:0 0 .9em}
.t img,.body img{max-width:100%;height:auto}
.t .aligncenter{display:block;margin-left:auto;margin-right:auto}
.t .alignleft{float:left;margin:0 1.2em .8em 0}.t .alignright{float:right;margin:0 0 .8em 1.2em}
@media(max-width:600px){.t .alignleft,.t .alignright{float:none;margin:0 0 .8em}}
figure{margin:0}
figure.img{margin:1em 0}figure.img img{display:block;width:auto;max-width:100%}
figure.img.center img{margin:0 auto}
.gallery{list-style:none;padding:0;margin:1.2em 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#ddd}
.vids{display:grid;gap:14px}
.blurb{margin:0 0 1.2em}.blurb img{display:block;margin:0 auto .6em}.blurb h3{margin:.2em 0 .4em;font-size:19px}
.hero{position:relative;text-align:center;padding:clamp(50px,9vw,110px) 20px;background:#333 center/cover no-repeat;color:#fff}
.hero.hasbg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero:not(.hasbg){background:var(--beige);color:var(--head)}
.hero .in{position:relative;max-width:760px;margin:0 auto}
.hero .ht{color:inherit;font-size:clamp(26px,4.4vw,46px);margin:0 0 .3em}.hero .hs{font-size:18px}
.code{overflow-x:auto}
.code table,.t table{border-collapse:collapse;width:100%;margin:1em 0;background:#fff}
.code th,.code td,.t th,.t td{border:1px solid #d9cfc2;padding:8px 12px;vertical-align:top;text-align:left}
.code th,.t th{background:#f4ede4;white-space:nowrap;color:var(--head)}
hr{border:0;border-top:1px solid #d8cdbf;margin:2em 0}.sp{height:1.5em}
details.tg{border:1px solid #ddd;background:#fff;margin:.8em 0;padding:.6em 1em}details.tg summary{cursor:pointer;font-weight:600;color:var(--head)}
blockquote{margin:1.2em 0;padding:.8em 1.2em;border-left:4px solid var(--gold);background:#faf6f0}
blockquote.tm footer{font-size:14px;margin-top:.4em}
.formnote{background:#fff;border:2px dashed #cdbfae;padding:1em 1.4em;margin:1em 0}
.btnwrap{margin:1.2em 0}
/* 記事 */
.art{max-width:800px;margin:0 auto;padding:clamp(36px,6vw,64px) 20px}
.art h1{font-size:clamp(23px,3.2vw,32px);margin:0 0 .3em}
.art .meta{font-size:14px;margin:0 0 2em;color:#777}
.art .body .sec{padding:0;background:none!important}
.art .body .sec .w{max-width:none}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.6em 0 1em;font-size:15px}
.pn a{display:block;border:1px solid #ddd;padding:10px 14px;text-decoration:none;color:var(--head)}.pn a:hover{border-color:var(--purple);color:var(--purple)}
.pn .nx{text-align:right;grid-column:2}.pn small{display:block;color:#888}
.back{text-align:center}
/* 記事の一覧 */
.ph1{text-align:center;font-family:Lora,"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:clamp(26px,3.6vw,36px);margin:0 0 .2em}
.lead2{text-align:center;margin:0 0 1.6em}
.chips{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips a{display:block;background:#fff;border:1px solid #d3c6b6;border-radius:100px;padding:4px 14px;font-size:14px;text-decoration:none;color:var(--head)}
.chips a.on{background:var(--purple);border-color:var(--purple);color:#fff}
.cnt{text-align:center;font-size:14px;margin:0 0 1.4em}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none;padding:0;margin:0}
@media(max-width:900px){.blog{grid-template-columns:1fr 1fr}}@media(max-width:560px){.blog{grid-template-columns:1fr}}
.blog li{border:1px solid #ddd;background:#fff}.blog li[hidden]{display:none}
.blog a{text-decoration:none;color:inherit;display:block;height:100%}
.blog img,.blog .noimg{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#eee}
.blog .noimg{background:#e9e1d6 url(https://flameofhope.jp/wp-content/uploads/2019/08/FoH_logo_1000_600.png) center/50% no-repeat}
.blog div{padding:14px 16px 18px;font-size:13px;color:#777}
.blog h3{font-size:17px;line-height:1.5;margin:0 0 6px}.blog p{margin:.4em 0 0;font-size:14px;color:var(--text)}
.blog a:hover h3{color:var(--purple)}
.postlist{margin:1.4em 0}.postlist .more{text-align:center;margin-top:1.4em}
/* ホーム */
.box{background:rgba(255,255,255,.52);padding:clamp(26px,5vw,50px);text-align:center;font-size:18px;line-height:2}.box p{margin:0}
.box .lead{font-size:clamp(20px,2.4vw,26px);color:var(--head);margin-bottom:.5em}
.fh{position:relative;background:#000;color:#fff;text-align:center;overflow:hidden;min-height:clamp(420px,62vw,640px);display:flex;align-items:center;justify-content:center;padding:60px 20px 120px}
.fh video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.fh .in{position:relative;max-width:640px;text-shadow:0 .08em .3em rgba(0,0,0,.6)}
.fh .t1{font-family:Ledger,"Hiragino Mincho ProN","Yu Mincho",serif;font-size:24px;letter-spacing:3px;margin:0}
.fh .sub{font-family:Lora,"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.35;margin:.3em 0 .8em}
.fh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:80px;background:var(--beige);clip-path:polygon(0 100%,100% 0,100% 100%)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
.tile{position:relative;display:block;aspect-ratio:3/4;background:#000 center/cover no-repeat;color:#fff;text-decoration:none;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 43%,rgba(0,0,0,.55) 70%)}
.tile span{position:absolute;left:15px;right:15px;bottom:16px}.tile b{display:block;font-size:clamp(20px,2.4vw,28px);line-height:1.3}.tile small{font-family:Oswald,sans-serif;letter-spacing:2px;font-size:13px;opacity:.9}
.tile:hover b{text-decoration:underline}
.home h2{text-align:center;margin:0 0 1.2em}
.lines{text-align:center;font-size:18px;line-height:2.2;color:var(--head)}.lines p{margin:0 0 1.2em}
.count{text-align:center;font-size:17px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;list-style:none;padding:0;margin:0}
.gal img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#ddd}.gal figcaption{font-size:13px;line-height:1.5;margin-top:6px;text-align:center;color:var(--head)}
.rfp{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;margin:2em 0}.rfp img{width:100%;background:#fff;padding:10px}
@media(max-width:600px){.rfp{grid-template-columns:1fr;justify-items:center;text-align:center}.rfp img{width:180px}}
.off{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 28px;margin:1.6em 0 0}.off dt{font-weight:600;color:var(--head)}.off dd{margin:0;font-size:14px;line-height:1.8}
.lv{display:grid;grid-template-columns:1fr 1fr;gap:20px}.cam .video{margin:0}.cam figcaption{margin-top:8px;font-size:15px}.cam figcaption b{margin-right:.8em;font-size:17px;color:var(--head)}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.55);border:2px dashed #cdbfae}
@media(max-width:700px){.lv{grid-template-columns:1fr}.soon .video{aspect-ratio:32/9}}
.cta{position:relative;background:#000 center/cover no-repeat;color:#fff;text-align:center;padding:clamp(160px,20vw,257px) 20px 50px}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#cf9d66 5%,rgba(224,153,0,.16) 50%)}
.cta .in{position:relative;max-width:700px;margin:0 auto}
/* 下の帯 */
.ft{background:var(--dark);color:#bbb;font-size:14px;padding:26px 20px;text-align:center}.ft p{margin:.2em 0}.ft a{color:#fff}.ft .cp{font-size:12px;color:#888;margin-top:.6em}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}