@charset "utf-8";
/* ============================================================
エリアナビ テキストボタン化 areanav.css v2
basic.css の後に読み込むこと。basic.css 自体は書き換えない。
戻すときは の1行を消すだけで元に戻る。
v7 の変更点
・金津園を他エリアと同じ文字サイズにした（横方向のみ圧縮）
・スマホでロゴを外し、テレビ枠を全幅に広げた
・テレビ枠を tv00.png の実測値どおりに CSS で描き直した
（全画面幅で適用。画像は使わなくなる）
・現在地ボタンの表示を強めた（ロゴが無くなるぶんの代替）
・縦列3つ（すすきの・沖縄・中洲）の文字サイズを横列と連動させた
・文字サイズを --ab-ratio の1つで全ボタンまとめて調整できるようにした
・文字をやや小さく（40%→36% / 上限31px→28px）、縦列を 46px→54px に拡幅
・PC の中央ロゴを logo_main.png から logo_main1.png に差し替え
・コンテナクエリ(1cqw)をやめて vw に統一。
対応環境が 2022年秋以降 → 2020年以前まで広がる。見た目は同じ
・--ab-rail-size を --ab-size に改名し、横列と縦列で共用
============================================================ */
/* ------------------------------------------------------------
[1] 調整用の設定値 ※色や太さを変えるときはここだけ触る
------------------------------------------------------------ */
:root{
--ab-color: #ffffff; /* 文字色（実画像と同値） */
--ab-stroke-color: #ff1e00; /* フチの色（実画像と同値） */
--ab-stroke: 0.13em; /* フチの太さ。文字サイズに連動 */
--ab-shadow: rgba(87,13,0,.85); /* 外側の影（実画像と同値） */
--ab-dim: 0.65; /* 通常時の濃さ。既存画像の opacity:0.6 相当 */
--ab-ratio: 36; /* マス幅に対する文字の割合(%)。全ボタン共通 */
--ab-max: 28px; /* 文字の最大サイズ。PC でこの値で止まる */
--ab-squeeze: 0.75; /* 3文字（金津園）の横圧縮率。1 で圧縮なし */
/* 実際の文字サイズ。横列も縦列もこの1つを使う。
マス幅は画面幅の約6分の1なので、割合に 0.1667 を掛ければ
「マス幅の36%」と同じ値になる。
ここは触らなくてよい。大きさを変えるときは --ab-ratio を動かす。 */
--ab-size: min(var(--ab-max), calc(var(--ab-ratio) * 0.1667vw));
--rail-w: 58px; /* 縦列の幅。44px 未満にしない（タップ領域） */
/* PC の中央ロゴ（テレビの左）の大きさと位置。詳しくは末尾の [7] */
--logo-pc-h: 150px; /* 高さ。163px を超えるとキャッチコピーに重なる */
--logo-pc-x: calc(50% - 10px); /* 横位置 left / center / right / 30px など */
--logo-pc-y: 13px; /* 縦位置 上からの距離。10px で少し下がる */
--tv-bezel: #000000; /* テレビの枠の色（実画像と同値） */
--tv-rim: rgba(255,255,255,.85); /* 枠の外周の細い光 */
--tv-line: rgba(255,255,255,.30); /* 画面のふちの細い線 */
--tv-glare: 1; /* 画面の映り込みの強さ。0 で消える */
--tv-pad-t: 15px; /* 枠の太さ 上（実画像と同値） */
--tv-pad-x: 16px; /* 枠の太さ 左右 */
--tv-pad-b: 15px; /* 枠の太さ 下。実画像は下だけ薄い */
/* 縦列の背景。現在地のときに重ねられるよう変数にしておく */
--rail-bg-l: linear-gradient(to right, rgba(0,0,0,1.0), rgba(0,0,0,0.35));
--rail-bg-r: linear-gradient(to left, rgba(0,0,0,1.0), rgba(0,0,0,0.35));
--ab-current-bg: linear-gradient(rgba(255,140,20,.30), rgba(255,60,0,0) 75%);
}
/* ------------------------------------------------------------
[2] 上下段のマスをテキスト用に切り替える
------------------------------------------------------------ */
.area-nav .area-top-nav div a,
.area-nav .area-bottom-nav div a{
height:100%;
padding:0;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
text-decoration:none;
overflow:hidden; /* 圧縮前の文字が隣にはみ出すのを防ぐ */
}
/* ------------------------------------------------------------
[3] ボタンの文字
------------------------------------------------------------ */
.area-nav .ab{
display:block;
white-space:nowrap;
font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',
'Yu Gothic Medium','游ゴシック Medium',YuGothic,
Meiryo,メイリオ,sans-serif;
font-weight:700;
letter-spacing:.02em;
color:var(--ab-color);
-webkit-text-stroke:var(--ab-stroke) var(--ab-stroke-color);
paint-order:stroke fill; /* フチを外側だけに描く。無いと文字が痩せる */
text-shadow:0 0 3px var(--ab-shadow),
0 2px 3px var(--ab-shadow);
opacity:var(--ab-dim);
transition:opacity .15s;
}
/* 文字数にかかわらず同じサイズ。
画面が狭くなれば比例して小さくなり、min() の上限で PC では止まる。
※ 以前はコンテナクエリ（1cqw）で「マス幅の何%」と書いていたが、
対応が 2022年秋以降の環境に限られるため vw に置き換えた。
マス幅は画面幅の6分の1なので計算結果は同じ。
これで 2020年以前の端末でも同じ見た目になる。 */
.area-nav .ab-2,
.area-nav .ab-3{
font-size:28px; /* min() 非対応の古い環境用の控え */
font-size:var(--ab-size);
}
/* 3文字は横に入りきらないので、高さは保ったまま横だけ潰す。
マス幅が 103px を下回ると溢れ始めるため、
その境目（画面幅620px前後）から圧縮をかける。 */
@media all and (max-width: 620px){
.area-nav .ab-3{ transform:scaleX(var(--ab-squeeze)); }
}
/* ホバーと現在地 */
.area-nav .area-top-nav div a:hover .ab,
.area-nav .area-bottom-nav div a:hover .ab,
.area-nav .area-rail:hover .ab{
opacity:1;
}
.area-nav .ab-current{
opacity:1;
text-shadow:0 0 7px #ffc46a,
0 0 3px var(--ab-shadow),
0 2px 3px var(--ab-shadow);
}
/* 現在地のマスに淡い光を敷く。
:has() 非対応の古い環境では光らないだけで、崩れはしない。 */
.area-nav .area-top-nav div a:has(.ab-current),
.area-nav .area-bottom-nav div a:has(.ab-current){
background-image:var(--ab-current-bg);
}
/* ------------------------------------------------------------
[4] 中央の左右に縦列を作る
※縦列は ではなく
で書くこと。
basic.css が div:first-of-type / div:last-of-type で
テレビ枠とロゴを指定しているため、div を足すと崩れる。
------------------------------------------------------------ */
.area-nav .area-center-nav{
position:relative;
box-sizing:border-box;
padding:0 var(--rail-w);
}
/* 中央のキャッチコピーは幅が固定値なので、縮んだぶんに合わせる */
.area-nav .area-center-nav div:last-of-type h2 a{
width:100%;
}
.area-nav .area-rail{
position:absolute;
top:0;
width:var(--rail-w);
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
z-index:3;
}
.area-nav .area-rail .ab{
writing-mode:vertical-rl;
text-orientation:upright;
font-size:28px; /* 同上 */
font-size:var(--ab-size);
letter-spacing:.06em;
}
.area-nav .area-rail-l{
left:0;
height:188px;
border-right:1px solid #72542d;
background-image:var(--rail-bg-l);
}
.area-nav .area-rail-l:has(.ab-current){
background-image:var(--ab-current-bg), var(--rail-bg-l);
}
.area-nav .area-rail-r1,
.area-nav .area-rail-r2{
right:0;
height:94px;
border-left:1px solid #72542d;
background-image:var(--rail-bg-r);
}
.area-nav .area-rail-r1:has(.ab-current),
.area-nav .area-rail-r2:has(.ab-current){
background-image:var(--ab-current-bg), var(--rail-bg-r);
}
.area-nav .area-rail-r1{ top:0; border-bottom:1px solid #b09494; }
.area-nav .area-rail-r2{ top:94px; }
/* ------------------------------------------------------------
[5] テレビ枠を tv00.png から CSS 描画に置き換える
画像をやめる理由は2つ。
・tv00.png は 289px の等倍画像で、高解像度画面ではぼやけている
・background-size 指定が無いため、枠を広げても画像は広がらない
（左上に原寸で貼りついたままになる）
寸法・色はすべて tv00.png の実測値に合わせてある。
------------------------------------------------------------ */
.area-nav .area-center-nav div:first-of-type{
box-sizing:border-box;
width:289px; /* PC では従来と同じ占有幅を保つ */
height:188px;
padding:var(--tv-pad-t) var(--tv-pad-x) var(--tv-pad-b);
background:var(--tv-bezel);
border-radius:2px;
box-shadow:inset 0 0 0 1px var(--tv-rim),
0 2px 8px rgba(0,0,0,.8);
}
.area-nav .area-center-nav div:first-of-type iframe{
height:100%;
background-color:#000;
}
/* 画面のふちの細い線 */
.area-nav .area-center-nav div:first-of-type::before{
content:"";
position:absolute;
top:var(--tv-pad-t);
bottom:var(--tv-pad-b);
left:var(--tv-pad-x);
right:var(--tv-pad-x);
border:1px solid var(--tv-line);
pointer-events:none;
z-index:1;
}
/* 映り込み。左上の広い帯と、左下の細い帯の2本。
pointer-events:none が無いとリンクが押せなくなるので必ず付ける。 */
.area-nav .area-center-nav div:first-of-type::after{
content:"";
position:absolute;
inset:0;
border-radius:2px;
pointer-events:none;
z-index:2;
opacity:var(--tv-glare);
background:linear-gradient(128deg,
rgba(255,255,255,.60) 0%,
rgba(255,255,255,.34) 9%,
rgba(255,255,255,.16) 22%,
rgba(255,255,255,.04) 30%,
rgba(255,255,255,0) 34%,
rgba(255,255,255,0) 62%,
rgba(255,255,255,.13) 70%,
rgba(255,255,255,.04) 75%,
rgba(255,255,255,0) 79%);
}
/* ------------------------------------------------------------
[5-2] スマホ：ロゴを外してテレビを全幅にする
※ PC ではロゴが十分な大きさで表示できるので残している。
全画面幅でロゴを外したい場合は、下の @media の行と
対応する閉じ括弧を削除すれば、そのまま全幅になる。
------------------------------------------------------------ */
@media all and (max-width: 775px){
/* ロゴ側を畳む。
中の h2 リンクは basic.css が既に opacity:0 にしており、
スマホでは元々見えていない要素なので、表示上の損失はない。 */
.area-nav .area-center-nav div:last-of-type{
display:none;
}
.area-nav .area-center-nav div:first-of-type{
float:none;
width:auto;
}
}
/* ------------------------------------------------------------
[6] 狭い画面での微調整
------------------------------------------------------------ */
@media all and (max-width: 430px){
:root{
--rail-w:50px;
--ab-stroke:0.10em; /* 小さい文字に太いフチは潰れる */
--tv-pad-t:11px;
--tv-pad-x:12px;
--tv-pad-b:11px;
}
}
/* ------------------------------------------------------------
[7] PC の中央ロゴを logo_main1.png に差し替える
basic.css の既定は logo_main.png（471×188）。
縦列を足したことで枠が 471px → 363px に狭まり、
contain で横に合わせると高さが 145px になって上に寄る。
logo_main1.png（300×188）なら縦横比が枠に近く、
同じ高さでも横幅 231px に収まって左右に均等な余白が出る。
高さを 145px で止めているのは、その下 163px 以降に
キャッチコピーの帯（logo_midashi.png）が入るため。
■ 調整するときは [1] の3つの変数だけを触ればよい
--logo-pc-h 大きさ（高さ）
大きくすると横幅も比例して広がる。
163px を超えるとキャッチコピーの帯に重なる。
--logo-pc-x 横位置。left / center / right のほか
30px のような数値も入る（左端からの距離）
--logo-pc-y 縦位置。0 が枠の上端。10px で10px下がる
別のロゴ画像に替えたいときは、下の background-image の
ファイル名を書き換える。
------------------------------------------------------------ */
@media all and (min-width: 776px){
/* PC だけ縦列を広げる。431〜775px は :root の 58px、
430px 以下は [6] の 50px が効く */
:root{ --rail-w: 64px; }
.area-nav .area-center-nav div:last-of-type h2{
background-image:url(../image/logo_main1.png);
background-position:var(--logo-pc-x) var(--logo-pc-y);
background-size:auto var(--logo-pc-h);
}
}