/* ============================================================ YSC ロビーサイネージ ／ スタイルシート 編集の目安 色・文字サイズ・余白を変えたいとき → 「01. 設定値」だけを編集 特定の部品の見た目を変えたいとき → 該当セクションを編集 文言・掲載内容を変えたいとき → style.css ではなく config.json 単位について cqw は「画面の横幅に対する割合」です。1cqw = 画面幅の1%。 iPad縦置き（820pt幅）では 1cqw ≒ 8.2px。 px ではなく cqw を使うことで、機種が変わっても比率が保たれます。 目次 01. 設定値（色・書体） 02. 画面全体・ビュー切替 03. トップ画面 04. 詳細画面（ヘッダー・拡大ボタン） 05. コンテンツエリア 06. 待機画面 07. 横置き（左帯・2列メニュー） ============================================================ */ /* ------------------------------------------------------------ 01. 設定値 ここを変えると画面全体に反映されます。 色はブランドガイド（Pantone）に準拠しています。変更は要確認。 ------------------------------------------------------------ */ :root{ --brand:#9DAF88; /* Pantone 7494 C ／ 採用色。上部の帯・罫線・英字表記 */ --leaf:#74AA50; /* Pantone 7489 C ／ 本日の枠の強調にのみ使用 */ --line:rgba(157,175,136,.38); /* ボタンや区切りの罫線 */ --ink:#1B2119; /* 画面の地色（濃い緑） */ --ivory:#F2F1EA; /* コンテンツエリアの地色・本文の白 */ --ivory-70:rgba(242,241,234,.70); /* 補助テキスト */ --ivory-45:rgba(242,241,234,.45); /* さらに薄い補助テキスト */ --ivory-22:rgba(242,241,234,.22); /* 未設定項目の点線 */ --oled-shift-x:0px; /* 有機EL保護：app.js が表示位置を微小移動 */ --oled-shift-y:0px; /* 書体。和文は明朝（--serif）＝見出し、ゴシック（--sans）＝本文・UI */ --serif:"Didot","Bodoni 72","Hiragino Mincho ProN","Yu Mincho",Baskerville,Georgia,serif; --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif; } /* ------------------------------------------------------------ 02. 画面全体・ビュー切替 .kiosk が画面の器。縦置き・横置きとも画面全体を使用します。 .view が各画面。.on が付いたものが表示されます。 ------------------------------------------------------------ */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} html,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--ink); overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;} .kiosk{position:fixed;inset:0;container-type:size;overflow:hidden;background:var(--ink);color:var(--ivory); width:100vw;height:100dvh;font-family:var(--sans);user-select:none;-webkit-user-select:none;touch-action:manipulation;} .view{position:absolute;inset:-2px;display:flex;flex-direction:column; background:linear-gradient(180deg,#212A1E 0%,var(--ink) 46%); opacity:0;pointer-events:none;transition:opacity .5s ease; transform:translate(var(--oled-shift-x),var(--oled-shift-y));} .view.on{opacity:1;pointer-events:auto;} /* ------------------------------------------------------------ 03. トップ画面 .home-top 上部のブランドカラー帯（ロゴ） .lead 案内文（文言は config.json の lead） .menu/.tile ボタン一覧。2列固定。.unset は未設定項目 .home-foot 時計と右下の一言 ------------------------------------------------------------ */ .home-top{flex:0 0 auto;background:var(--brand);padding:8cqw 6.5cqw;} .lockup{display:flex;flex-direction:column;align-items:center;} .lockup img{width:44cqw;height:auto;display:block;} .home-body{flex:1 1 auto;padding:0 6.5cqw;} .lead{text-align:center;font-family:var(--serif);font-size:2.7cqw;letter-spacing:.2em;color:var(--ivory-70);margin:5.4cqw 0 4cqw;text-indent:.2em;} .menu{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;} .tile{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4cqw; background:rgba(157,175,136,.07);border:1px solid var(--line);padding:3.4cqw 2.2cqw;min-height:15.6cqw; font-family:inherit;color:inherit;cursor:pointer;text-align:center;transition:background .3s ease,border-color .3s ease;} .tile:active{background:var(--brand);border-color:var(--brand);} .tile:active .ja{color:#1B2119;} .tile:active .en{color:rgba(27,33,25,.66);} .tile .en{font-size:1.6cqw;letter-spacing:.28em;color:var(--brand);text-indent:.28em;} .tile .ja{font-family:var(--serif);font-size:3.4cqw;letter-spacing:.1em;line-height:1.3;text-indent:.1em;} .tile.unset{border-style:dashed;border-color:var(--ivory-22);} .tile.unset .ja{color:var(--ivory-45);} .tile.unset .en{color:var(--ivory-22);} .home-foot{flex:0 0 auto;margin-top:auto;padding:3.4cqw 6.5cqw 4cqw;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);} .home-foot .t{font-family:var(--serif);font-size:4.2cqw;letter-spacing:.08em;line-height:1;font-variant-numeric:tabular-nums;} .home-foot .d{font-size:1.75cqw;letter-spacing:.17em;color:var(--ivory-45);margin-top:1.2cqw;} .home-foot .note{text-align:right;font-size:1.8cqw;letter-spacing:.12em;color:var(--ivory-45);} /* 11インチAndroid（16:10縦）の余白を均等化。iPad比率の表示は変更しません。 */ @media (orientation:portrait) and (max-aspect-ratio:2/3){ .home-body{display:flex;flex-direction:column;padding-bottom:3cqw;} /* ボタンが残りの高さを4等分します。中央寄せだと上下に余白が残るためです */ .menu{flex:1 1 auto;grid-auto-rows:1fr;} .tile{min-height:0;} .tile .en{font-size:1.75cqw;} .tile .ja{font-size:3.7cqw;} } /* ------------------------------------------------------------ 04. 詳細画面のヘッダー・拡大ボタン .dhead ブランドカラーの帯。文字は視認性のため濃色 .zoombtns 拡大縮小ボタン。拡大できる内容のときだけ .on が付く ------------------------------------------------------------ */ .dhead{flex:0 0 auto;display:flex;align-items:center;gap:2.4cqw;padding:3.4cqw 4.4cqw;background:var(--brand);color:#1B2119;} .back{display:inline-flex;align-items:center;gap:1.5cqw;background:transparent;color:#1B2119;border:1px solid rgba(27,33,25,.45); font-family:var(--sans);font-size:2.1cqw;letter-spacing:.2em;padding:2.1cqw 3.2cqw;cursor:pointer;flex:0 0 auto;} .back:active{background:rgba(27,33,25,.14);} .back svg{width:2.1cqw;height:2.1cqw;fill:none;stroke:#1B2119;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .dtitle{flex:1 1 auto;text-align:right;min-width:0;} .dtitle .ja{font-family:var(--serif);font-size:3.1cqw;letter-spacing:.12em;color:#1B2119;text-indent:.12em;} .dtitle .en{font-size:1.35cqw;letter-spacing:.3em;color:rgba(27,33,25,.62);margin-top:.9cqw;text-indent:.3em;} /* 拡大縮小ボタン */ .zoombtns{flex:0 0 auto;display:none;gap:1.2cqw;} .zoombtns.on{display:flex;} .zoombtns button{width:8.4cqw;height:8.4cqw;border:1px solid rgba(27,33,25,.45);background:rgba(255,255,255,.55); color:#1B2119;font-size:3.6cqw;font-family:var(--sans);line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;} .zoombtns button:active{background:#fff;} .zoombtns button[disabled]{opacity:.3;} /* ------------------------------------------------------------ 05. コンテンツエリア .stage スクロールと拡大の対象。ここだけが拡大されます .overlay 未設定表示・通信断時の案内 .zhint 「二本指で広げると拡大できます」の案内 ------------------------------------------------------------ */ .stage{flex:1 1 auto;position:relative;background:var(--ivory);overflow:auto;color:#2A3327; -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;} .stage iframe{display:block;border:0;width:100%;height:100%;} .stage.lock iframe{pointer-events:none;} .stage img.content{display:block;width:100%;height:auto;} .overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center; background:var(--ivory);text-align:center;padding:8cqw;gap:3cqw;z-index:3;} .overlay.on{display:flex;} .overlay img{width:26cqw;} .overlay .msg{font-family:var(--serif);font-size:3.2cqw;letter-spacing:.1em;line-height:1.9;} .overlay .sub{font-size:2.1cqw;letter-spacing:.1em;color:rgba(42,51,39,.6);line-height:1.9;} .overlay .box{border:1px dashed rgba(42,51,39,.32);padding:6cqw 5cqw;display:flex;flex-direction:column;gap:1.8cqw;} .overlay .big{font-family:var(--serif);font-size:2.8cqw;letter-spacing:.14em;} .overlay .small{font-size:1.9cqw;color:rgba(42,51,39,.6);line-height:1.8;} .loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.9cqw;letter-spacing:.3em;color:rgba(42,51,39,.4);transition:opacity .4s ease;z-index:2;} .loading.off{opacity:0;} /* 拡大操作の案内 */ .zhint{position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);z-index:4; background:rgba(27,33,25,.86);color:#EFEDE4;font-size:1.9cqw;letter-spacing:.1em; padding:1.5cqw 3.4cqw;pointer-events:none;transition:opacity .4s ease;white-space:nowrap;} .zhint.hide{opacity:0;} /* ------------------------------------------------------------ 06. 待機画面 無操作が続くと表示されます。秒数は config.json の attractIdleSeconds ------------------------------------------------------------ */ .attract{position:absolute;inset:-2px;z-index:30;background:var(--brand); display:flex;flex-direction:column;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .9s ease; transform:translate(var(--oled-shift-x),var(--oled-shift-y));} .attract.on{opacity:1;pointer-events:auto;} .attract .frame{position:absolute;inset:5cqw;border:1px solid rgba(255,255,255,.42);} .attract img{width:66cqw;height:auto;} .attract .rule{width:22%;height:1px;background:rgba(255,255,255,.55);margin:6cqw 0 4.6cqw;} .attract .jp{font-size:2.2cqw;letter-spacing:.44em;color:#fff;text-indent:.44em;opacity:.92;} .attract .tap{position:absolute;bottom:11cqw;font-size:2cqw;letter-spacing:.36em;color:rgba(255,255,255,.8);text-indent:.36em;} /* ------------------------------------------------------------ 07. 横置き（14.6インチ級・16:10） .side 左帯。ロゴ・時刻・受付案内。トップ画面と詳細画面の どちらでも出したままにするため .view の外に置いています。 #v-home 右側。案内文と2列×4行のボタン一覧 #v-detail 右側。ヘッダーは帯をやめ、コンテンツの上へ浮かせています 縦置きでは .side は非表示になり、従来どおりの上下構成に戻ります。 ------------------------------------------------------------ */ .side{display:none;} @media (orientation:landscape) and (min-aspect-ratio:4/3){ /* --- 左帯。幅は画面の23% --- */ .side{display:flex;flex-direction:column;align-items:center; position:absolute;left:-2px;top:-2px;bottom:-2px;width:calc(23% + 2px);z-index:5; background:var(--brand);color:#1B2119;padding:4.5cqh 1.7cqw; box-shadow:inset -1px 0 0 rgba(27,33,25,.18); transform:translate(var(--oled-shift-x),var(--oled-shift-y));} .side-logo{flex:1 1 0;display:flex;align-items:center;justify-content:center;width:100%;} .side-logo img{width:84%;max-width:100%;height:auto;display:block;} /* 時刻。細い罫で区切り、英字の小見出しと明朝の数字で構成します */ .side-clock{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center; width:100%;text-align:center;border-top:1px solid rgba(27,33,25,.24);} .side-clock .l{font-size:1.5cqh;letter-spacing:.42em;text-indent:.42em; color:rgba(27,33,25,.58);margin-bottom:1.8cqh;} .side-clock .t{font-family:var(--serif);font-size:8cqh;letter-spacing:.02em;line-height:1; font-variant-numeric:tabular-nums;color:#161C14;} .side-clock .d{font-size:1.6cqh;letter-spacing:.22em;text-indent:.22em; color:rgba(27,33,25,.56);margin-top:2cqh;} .side-note{flex:0 0 auto;width:100%;text-align:center;line-height:1.9; font-size:1.3cqh;letter-spacing:.06em;color:rgba(27,33,25,.62); border-top:1px solid rgba(27,33,25,.24);padding-top:2.6cqh;} /* --- 右側。左帯の幅ぶんだけ内側から始めます --- */ #v-home,#v-detail{left:23%;} .home-top,.home-foot{display:none;} #v-home{justify-content:center;} .home-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center; padding:3.6cqh 3cqw;min-width:0;} /* 案内文。地色がいちばん明るい位置に載るため、文字を白に寄せて字間を詰めます */ .lead{font-size:2.8cqh;letter-spacing:.14em;text-indent:.14em; color:rgba(242,241,234,.92);margin:0 0 3cqh;} /* ボタンは2列×4行。行の高さは残りを4等分します */ .menu{flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr; gap:2cqh 1.5cqw;} .tile{gap:1.4cqh;padding:2cqh 1cqw;min-height:0;} .tile .en{font-size:1.9cqh;} .tile .ja{font-size:4.2cqh;} /* --- 詳細画面 --- ヘッダーの帯をやめ、もどる・項目名・拡大ボタンだけをコンテンツの上へ浮かせます。 コンテンツエリアは画面の高さいっぱいを使います。 */ .dhead{position:absolute;top:0;left:0;right:0;z-index:6; background:none;color:var(--ivory);align-items:flex-start; padding:1.8cqh 1.4cqw;gap:1cqw;pointer-events:none;} .back{pointer-events:auto;background:rgba(22,28,20,.86);color:var(--ivory); border-color:rgba(242,241,234,.32);gap:.9cqw;font-size:2cqh;padding:1.6cqh 1.4cqw;} .back:active{background:rgba(22,28,20,.96);} .back svg{width:2.3cqh;height:2.3cqh;stroke:var(--ivory);} .dtitle{flex:0 1 auto;margin-left:auto;pointer-events:none; background:rgba(22,28,20,.86);border:1px solid rgba(242,241,234,.2); padding:1.3cqh 1.3cqw;} .dtitle .ja{font-size:2.6cqh;color:var(--ivory);} .dtitle .en{font-size:1.4cqh;color:rgba(242,241,234,.5);margin-top:.6cqh;} .zoombtns{gap:.7cqw;} .zoombtns button{pointer-events:auto;width:6cqh;height:6cqh;font-size:3cqh; background:rgba(22,28,20,.86);color:var(--ivory); border-color:rgba(242,241,234,.32);} .zoombtns button:active{background:rgba(22,28,20,.96);} /* 浮かせたヘッダーと重ならないよう、案内表示は下へ寄せます */ .overlay{padding:11cqh 7cqh 7cqh;gap:2.4cqh;} .overlay img{width:11cqw;} .overlay .msg{font-size:3.6cqh;} .overlay .sub{font-size:2.1cqh;} .zhint{bottom:2.4cqh;font-size:1.9cqh;padding:1.3cqh 2cqw;} /* --- 待機画面。左帯の上にも重ねて全画面で表示します --- */ .attract .frame{inset:5cqh 3cqw;} .attract img{width:42cqw;} .attract .rule{margin:4cqh 0 3cqh;} .attract .jp{font-size:2.4cqh;} .attract .tap{bottom:2cqh;font-size:2cqh;} } @media (prefers-reduced-motion:reduce){ .view,.attract,.tile,.back{transition:none!important;} }