/* ひぐらし4専用。以前のCSSは読み込まず、このファイルのみを使用します。 */
html {scroll-behavior:smooth;} body {margin:0;background:#222;}
#higurashi4 {--h4-yellow:#fff000;--h4-text:#fff;color:var(--h4-text);background:#242424;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;line-height:1.9;overflow-x:clip;font-size:16px;}
#higurashi4 *,#higurashi4 *::before,#higurashi4 *::after {box-sizing:border-box;}
#higurashi4 img {display:block;max-width:100%;height:auto;}
#higurashi4 a {color:inherit;} #higurashi4 button,#higurashi4 input {font:inherit;}
#higurashi4 button,#higurashi4 summary {cursor:pointer;}
#higurashi4 [hidden] {display:none!important;}
#higurashi4 :focus-visible {outline:3px solid #fff;outline-offset:5px;}
#higurashi4 .h4-kv {position:relative;width:100%;margin:0;}
#higurashi4 .h4-kv-base {width:100%;height:auto;}
#higurashi4 .h4-kv-title {position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:48%;max-width:760px;}
#higurashi4 .h4-page {background-image:url('/fw/public/images/event/2611higurashi4/bg.png');background-position:center top;background-size:100% auto;background-repeat:repeat-y;padding:1px 20px 0;}
#higurashi4 .h4-section {width:min(100%,960px);margin:0 auto;padding:32px 0 18px;}
#higurashi4 .h4-heading {margin:0 0 42px;line-height:1;}
#higurashi4 .h4-heading img {width:100%;height:auto;}
#higurashi4 .h4-content-image {width:100%;margin:0 auto;}
#higurashi4 .h4-ticket-row {display:flex;justify-content:center;margin:34px auto;}
#higurashi4 .h4-ticket-top {margin:36px auto 48px;}
#higurashi4 .h4-ticket {display:block;width:min(65%,280px);transition:filter .2s,transform .2s;}
#higurashi4 .h4-ticket img {width:100%;}
#higurashi4 .h4-ticket:hover {filter:brightness(1.1);transform:translateY(-2px);}
#higurashi4 .h4-story {text-align:center;font-size:clamp(16px,2.2vw,26px);font-weight:700;letter-spacing:.09em;line-height:2.25;text-shadow:0 2px 8px #000;}
#higurashi4 .h4-story p {margin:0 0 2.6em;}
#higurashi4 .h4-illust {width:min(32%,240px);max-height:190px;object-fit:contain;margin:45px auto 12px;}
#higurashi4 .h4-illust-story {max-height:240px;}
#higurashi4 .h4-information-notes {font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-size:clamp(13px,1.6vw,16px);max-width:820px;margin:28px auto;text-align:left;text-shadow:0 1px 4px #000;}
#higurashi4 .h4-information-notes p {margin:0 0 8px;}
#higurashi4 .h4-performance {max-width:800px;margin:0 auto;border:2px solid var(--h4-yellow);background:rgba(0,0,0,.86);border-radius:12px;overflow:hidden;}
#higurashi4 summary {list-style:none;}
#higurashi4 summary::-webkit-details-marker {display:none;}
#higurashi4 .h4-performance summary {padding:22px 16px;text-align:center;}
#higurashi4 .h4-region {display:table;margin:0 auto 12px;background:var(--h4-yellow);color:#111;padding:1px 28px;font-weight:bold;border-radius:3px;}
#higurashi4 .h4-venue {display:block;font-size:clamp(17px,2.2vw,23px);font-weight:700;line-height:1.6;}
#higurashi4 .h4-period {display:block;font-size:clamp(14px,2vw,20px);font-weight:bold;margin:14px 0;}
#higurashi4 .h4-hint {font-family:sans-serif;font-size:14px;color:var(--h4-yellow);}
#higurashi4 .h4-hint-open {display:none;}
#higurashi4 .h4-performance[open] .h4-hint-open {display:block;}
#higurashi4 .h4-performance[open] .h4-hint-closed {display:none;}
#higurashi4 .h4-performance-body {padding:28px;border-top:1px solid var(--h4-yellow);}
#higurashi4 .h4-performance h3 {text-align:center;font-size:22px;margin:28px 0 20px;}
#higurashi4 .h4-map {width:100%;aspect-ratio:2 / 1;min-height:230px;}
#higurashi4 .h4-map iframe {display:block;width:100%;height:100%;border:0;}
#higurashi4 .h4-practice-answer {text-align:center;margin:18px 0;color:#fff;font-size:16px;}
#higurashi4 .h4-access {font-family:sans-serif;font-size:15px;line-height:1.8;}
#higurashi4 .h4-access dt {color:var(--h4-yellow);font-weight:bold;margin-top:16px;}
#higurashi4 .h4-access dd {margin:6px 0;}
#higurashi4 .h4-primary {border:2px solid var(--h4-yellow);border-radius:8px;background:var(--h4-yellow);color:#111;display:inline-flex;justify-content:center;align-items:center;padding:13px 24px;font-family:"Yu Gothic",sans-serif;font-weight:bold;text-decoration:none;line-height:1.5;transition:filter .2s;}
#higurashi4 .h4-primary:hover {filter:brightness(.9);}
#higurashi4 .h4-nazo-section {text-align:center;}
#higurashi4 .h4-about-block {display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,25%);column-gap:28px;align-items:start;min-width:0;margin-bottom:32px;padding:0;text-align:left!important;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;text-shadow:0 1px 5px #000;}
#higurashi4 #about .h4-about-block h3 {grid-column:1;grid-row:1;width:auto!important;max-width:100%;min-width:0;margin:0 0 12px!important;color:#fff;font-size:clamp(20px,2.4vw,27px);font-weight:700;line-height:1.6;text-align:left!important;white-space:normal;overflow-wrap:anywhere;}
#higurashi4 #about .h4-about-block p {grid-column:1;grid-row:2;width:auto!important;max-width:100%;min-width:0;margin:0!important;font-size:clamp(14px,1.8vw,18px);line-height:2;text-align:left!important;white-space:normal;overflow-wrap:anywhere;}
#higurashi4 .h4-about-main {grid-column:2;grid-row:1 / 3;width:100%;min-width:0;margin:0;}
#higurashi4 .h4-about-posters {grid-column:2;grid-row:1 / 3;display:flex;justify-content:center;align-items:flex-start;gap:6px;width:100%;min-width:0;max-width:none;margin:0;}
#higurashi4 .h4-about-posters img {width:calc((100% - 6px)/2);min-width:0;max-width:none;}
#higurashi4 .h4-faq {background:rgba(0,0,0,.86);border:1px solid #a69c00;border-radius:5px;width:100%;max-width:800px;margin:0 auto 14px;font-family:"Yu Gothic",sans-serif;}
#higurashi4 .h4-faq summary {position:relative;padding:18px 50px 18px 20px;font-size:16px;line-height:1.8;font-weight:bold;}
#higurashi4 .h4-faq summary::after {content:'＋';position:absolute;right:18px;top:18px;color:var(--h4-yellow);font-size:22px;line-height:1.3;}
#higurashi4 .h4-faq[open] summary::after {content:'−';}
#higurashi4 .h4-answer {border-top:1px solid #777;padding:16px 20px;font-size:15px;line-height:1.9;}
#higurashi4 .h4-answer p {margin:0;}
#higurashi4 .h4-footer {text-align:center;padding:60px 0 44px;background:transparent!important;background-image:none;border:0;box-shadow:none;}
#higurashi4 .h4-footer img {width:160px;max-width:45%;margin:auto;}
#higurashi4 .h4-footer p {font-family:sans-serif;font-size:12px;line-height:1.9;margin:24px 0 0;}
#higurashi4 .h4-dialog {color:#fff;background:#000;border:2px solid var(--h4-yellow);border-radius:12px;padding:0;width:min(960px,calc(100% - 28px));max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;margin:auto;box-shadow:0 16px 70px #0009;}
#higurashi4 .h4-dialog::backdrop {background:rgba(0,0,0,.8);}
#higurashi4 .h4-dialog-content {padding:72px 28px 32px;position:relative;background:#000;color:#fff;}
#higurashi4 .h4-dialog h2 {text-align:center;font-size:24px;margin:0 0 24px;}
#higurashi4 .h4-close {position:sticky;float:right;top:8px;margin-top:-60px;margin-right:-16px;z-index:2;background:#111;color:#fff;border:0;border-radius:5px;font-family:sans-serif;padding:8px 12px;font-size:22px;line-height:1.4;}
#higurashi4 .h4-close span {font-size:14px;}
/* 通常ページに小さく表示する謎画像 */
#higurashi4 .h4-nazo-stage {position:relative;width:70%;max-width:420px;margin:0 auto 28px;}
#higurashi4 .h4-nazo-image {display:block;width:100%;max-width:100%;height:auto;max-height:none;margin:0;}
/* 画像の右下に置く、丸い拡大・縮小ボタン */
#higurashi4 .h4-nazo-zoom {position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;margin:0;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.88);color:#fff;font-family:Arial,sans-serif;font-size:30px;font-weight:normal;line-height:1;box-shadow:0 2px 8px #0008;cursor:pointer;}
#higurashi4 .h4-nazo-zoom:hover {background:#fff000;color:#000;}
#higurashi4 .h4-nazo-zoom span {display:block;line-height:1;}
/* 解答欄はポップアップ外、通常ページの画像の下 */
#higurashi4 .h4-nazo-section .h4-answer-form {display:block;max-width:640px;clear:both;margin:0 auto;}
/* 拡大ポップアップは画像と「−」だけ */
#higurashi4 .h4-image-dialog {width:fit-content;max-width:calc(100vw - 28px);max-height:90vh;max-height:90dvh;padding:10px;background:#000;color:#fff;}
#higurashi4 .h4-nazo-enlarged {position:relative;width:fit-content;max-width:100%;margin:0 auto;}
#higurashi4 .h4-nazo-full {display:block;width:auto;max-width:100%;height:auto;max-height:calc(90vh - 24px);max-height:calc(90dvh - 24px);object-fit:contain;margin:0;}
#higurashi4 .h4-answer-form {max-width:none;margin:0 auto;text-align:center;font-family:sans-serif;}
#higurashi4 .h4-answer-form label {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#higurashi4 .h4-input-row {display:block;text-align:center;}
#higurashi4 .h4-input-row input {display:block;width:80%;max-width:400px;min-width:0;margin:20px auto 0;padding:10px;border:1px solid #c6ae25;border-radius:10px;background:#000;color:#fff;font-size:15pt;}
#higurashi4 .h4-input-row button {display:inline-block;width:40vw;max-width:200px;height:50px;margin:10px auto 0;padding:0;border:1px solid #c6ae25;border-radius:50px;background:#ffd800;color:#000;font-family:serif;font-size:1em;font-weight:600;}
#higurashi4 .h4-answer-message {text-align:center;min-height:1.9em;font-size:20px;font-weight:bold;margin:22px 0 12px;font-family:sans-serif;}
#higurashi4 .h4-answer-message.is-correct {color:#fff000;font-size:30px;}
#higurashi4 .h4-answer-message.is-error {color:#ff6666;}
#higurashi4 .h4-post {display:flex;max-width:300px;margin:0 auto;}
#higurashi4 .h4-sp-break {display:none;}
/* ストーリーの補足説明 */
#higurashi4 .h4-story-note {max-width:820px;margin:32px auto 20px;padding:0 12px;color:#fff;font-size:clamp(14px,1.8vw,19px);line-height:2;text-align:center;}
/* スケジュール内のチケットだけさらに小さく */
#higurashi4 .h4-performance .h4-ticket {width:min(60%,200px);}
#higurashi4 .h4-about-block + .h4-about-block {grid-template-columns:minmax(0,1fr) 36%;}
#higurashi4 .h4-red-na {color:#ff0000;}
#higurashi4 .h4-input-row input::placeholder {color:#aaa;opacity:1;}
/* KVタイトルとスクロール表示 */
#higurashi4 .h4-kv-title {animation:h4-title-fade-in 2.5s ease-in both;}
@keyframes h4-title-fade-in {from {opacity:0;} to {opacity:1;}}
#higurashi4 .h4-scroll-fade {opacity:0;transition:opacity 1s ease;}
#higurashi4 .h4-scroll-fade.is-visible {opacity:1;}
@media(max-width:767px){
#higurashi4 .h4-kv-title {width:74%;top:49%;}
#higurashi4 .h4-page {padding:1px 14px 0;background-size:auto 1500px;}
#higurashi4 .h4-section {padding:24px 0 12px;}
#higurashi4 .h4-heading {margin-bottom:28px;}
#higurashi4 .h4-ticket-top {margin:25px auto 30px;}
#higurashi4 .h4-story {font-size:clamp(14px,3.6vw,21px);letter-spacing:.025em;line-height:2.15;}
#higurashi4 .h4-story p {margin-bottom:2.3em;}
#higurashi4 .h4-sp-break {display:initial;} #higurashi4 .h4-pc-break {display:none;}
#higurashi4 .h4-illust {width:38%;max-height:140px;margin-top:30px;}
#higurashi4 .h4-performance summary {padding:24px 12px;}
#higurashi4 .h4-performance-body {padding:20px 12px;}
#higurashi4 .h4-hint {font-size:12px;}
#higurashi4 .h4-access {font-size:13px;}
#higurashi4 .h4-faq summary {font-size:14px;padding-left:14px;}
#higurashi4 .h4-answer {font-size:13px;padding:14px;}
#higurashi4 .h4-dialog-content {padding:66px 14px 24px;}
#higurashi4 .h4-close {margin-right:0;}
#higurashi4 .h4-dialog h2 {font-size:20px;}
#higurashi4 .h4-about-block,#higurashi4 .h4-about-block + .h4-about-block {grid-template-columns:minmax(0,1fr);row-gap:0;}
#higurashi4 .h4-about-main,#higurashi4 .h4-about-posters {grid-column:1;grid-row:3;margin:24px auto 0;}
#higurashi4 .h4-about-main {width:min(75%,320px);}
#higurashi4 .h4-about-posters {width:min(100%,400px);}
}
@media(prefers-reduced-motion:reduce){
html {scroll-behavior:auto;}
#higurashi4 * {transition:none!important;}
#higurashi4 .h4-kv-title {animation:none;opacity:1;}
#higurashi4 .h4-scroll-fade {opacity:1;transition:none;}
}
/* ムービー */
#higurashi4 .h4-movie-video {
display: block;
width: 100%;
max-width: 800px;
height: auto;
margin: 0 auto;
background: #000;
}
/* スマホ：KVとタイトルの重なり・位置ずれを修正 */
@media (max-width: 767px) {
#higurashi4 .h4-kv {
display: grid;
grid-template-columns: minmax(0, 1fr);
position: relative;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#higurashi4 .h4-kv > picture {
grid-area: 1 / 1;
display: block;
width: 100%;
line-height: 0;
}
#higurashi4 .h4-kv-base {
display: block;
width: 100%;
height: auto;
margin: 0;
}
#higurashi4 .h4-kv-title {
grid-area: 1 / 1;
position: static;
inset: auto;
transform: none;
align-self: center;
justify-self: center;
width: 72%;
max-width: 540px;
height: auto;
margin: 0;
z-index: 1;
}
}
@media (max-width: 767px) {
/* チケット購入 */
#higurashi4 .h4-ticket {
width: 55%;
max-width: 200px;
}
#higurashi4 .h4-performance .h4-ticket {
width: 50%;
max-width: 160px;
}
/* 練習問題の記入欄 */
#higurashi4 .h4-input-row input {
width: 75%;
max-width: 260px;
padding: 7px 10px;
font-size: 16px;
border-radius: 8px;
}
/* 解答するボタン */
#higurashi4 .h4-input-row button {
width: 130px;
height: 38px;
font-size: 14px;
}
/* クリアしたことをポストするボタン */
#higurashi4 .h4-post {
width: 85%;
max-width: 260px;
padding: 10px 12px;
font-size: 13px;
}
/* 謎画像の＋・−ボタン */
#higurashi4 .h4-nazo-zoom {
width: 34px;
height: 34px;
min-width: 34px;
font-size: 24px;
right: 6px;
bottom: 6px;
}
}