@charset "UTF-8"; /* 都道府県別ページ（PC） */ /* このページは左ナビ(leftnavi)も右の広告枠(rightArea)も置かない1カラムレイアウトのため、 wrap01・mainAreaともにコンテナ全幅まで拡大する。広告は今後ページ内に自由に配置していく */ body#pref_page div#wrap01{ width:995px; } body#pref_page div#mainArea{ width:995px; } /* 方言コーナーの上の300x250広告2枚（ad_foot_300x250x2.php）。共通CSSのkoukoku_footx2はfloat:leftで左に寄るため、 995px幅の中央に並べる。空のdiv.clearはflexの子になっても幅が無いので影響しない */ body#pref_page div.pref_ad_foot{ display:flex; justify-content:center; margin:0 0 10px; } /* 728x90バナー（ad_belowh1_728x90.php）を中央寄せで最上部に置き、その下にパンくずを置く行。 共通CSSはパンくずをfloat:left;width:100%にしているため、この行の中だけ打ち消してバナーの下に回り込ませない */ body#pref_page div.pref_top_row div#header2{ width:728px; margin:0 auto 10px; } body#pref_page div.pref_top_row ul.breadcrumb{ float:none; display:block; width:auto; } /* 都道府県ページの見出しバナー。common/img/pref/banner/{都道府県コード}_pc.jpgを用意した県だけ写真付きになり、 無い県は青系グラデーションにフォールバックする（Html_Pref::outHtmlPrefBanner） */ div.pref_banner{ position:relative; width:100%; height:90px; margin:0 0 0.4em; overflow:hidden; box-sizing:border-box; background-color:#2c6b9e; background-image:linear-gradient(120deg, #1c4f7a 0%, #3d8bc4 100%); background-size:cover; background-position:center; } div.pref_banner_has_photo{ background-color:#333333; margin-top:9px;} /* 写真の左側に文字を読みやすくする暗いグラデーションを重ねる（写真が無い時は出さない） */ div.pref_banner_overlay{ position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.18) 25%, rgba(0,0,0,0) 55%); } /* 都道府県のシルエット（inc/data/pref_shapes.php）。文字の右側に半透明で重ねる装飾なので スクリーンリーダーには読ませない（aria-hidden、Html_Pref::outHtmlPrefBanner側で付与） */ /* SVGはreplaced要素のためheight:autoがtop/bottom指定を無視し意図しない巨大サイズになる。 高さを明示指定し、widthはviewBoxのアスペクト比から自動計算させる */ svg.pref_banner_shape{position: absolute; top: 57%;left: 122px; height: 54px;transform: translateY(-50%); z-index: 1; opacity: 0.5;} /* fill-rule:evenoddは、琵琶湖など県境データ内に残る水域の輪郭を正しく穴として抜くために必要 （無いと同じ色で重ね塗りされ、境界に薄い線が入って見える） */ svg.pref_banner_shape path{ fill:rgba(120,180,230,0.55); fill-rule:evenodd; stroke:rgba(255,255,255,0.85); vector-effect:non-scaling-stroke; stroke-width:1.5; } /* 沖縄県だけの囲み枠（宮古・八重山諸島の引き出し枠、Html_Pref::outHtmlPrefShapePaths参照）。 本島と同じ塗りだと出っ張りに見えるため、枠線だけの薄い表示にする */ svg.pref_banner_shape path.pref_banner_inset{ fill:none; stroke-width:0.75; } /* common/css/basic_new.cssのグローバルなh1{background:url(titlebg_others2.png)...}を打ち消す */ h1.pref_banner_title{position:relative; z-index:2; height:100%; margin:0; margin-top:10px; padding:0 0 0 24px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:none; color:#FFFFFF; text-shadow:0 1px 4px rgba(0,0,0,0.6); line-height:normal; } /* MacはHelvetica実体、Windowsは互換フォントのArialで表示される（Windowsに本物のHelveticaは無い）。 サイズはデザイン案のバナー(995x90px)をピクセル単位で実測して合わせた値（Niigata実測cap-height≒10px、 新潟県実測≒25px。フォントサイズはそこから逆算） */ span.pref_banner_en{ display:block; padding-left:2px;font-weight:normal;font-size:14px; font-family:Helvetica, Arial, sans-serif; letter-spacing:0.01em; opacity:0.9; } span.pref_banner_ja{ display:block; margin-top:6px; font-size:26px; font-weight:bold; line-height:1.15em; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } /* 方言（呼び名）一覧。方言1件＝1リンクをinline-blockの点線ボックスで並べる（あいうえお順）。 標準和名は表示せず、リンクのtitle属性でマウスオン時のtooltipとしてのみ示す */ div.pref_hougen_list{ margin:0.8em 0; } a.hougenItem{ display: inline-block; vertical-align: top; margin: 1px 4px 4px 0; padding: 2px 5px 2px; background-color: #e6f4ff; border: 1px dotted #b7b7b7; border-radius: 22px; line-height: 1.2em; color: #0053BF; text-decoration: none;} a.hougenItem strong{ color:#dd2c0d; } /* ぼうずコンニャクのおすすめコラム一覧。コラム一覧(pref_photo_list)と同じマークアップで写真・タイトルのみのカードを 1列で表示する（他の情報は出さない） */ div.pref_recommend_articles_group{ width:330px; box-sizing:border-box; } div.pref_recommend_articles div.pref_photo_box{ width:100%; } /* コラム一覧(outHtmlArticleList、article_single_box等)用。この一覧はpref_photo_listとはマークアップを分離しているが、 article_thumbnailに横幅が明示されておらず画像の縦横比でバラバラになるため155pxに固定する */ .article_list .article_thumbnail{display:flex; justify-content:center; align-items:center; width:155px; height:100px; overflow:hidden; margin-bottom:2px;} .article_list img.thumbnail_art{width:100%;} /* 加工品・名産品／好んで食べる地域一覧。コラム一覧とは別に、mainArea幅(825px)に3列並ぶカード型レイアウトで表示する */ div.pref_photo_list{ display:flex; flex-wrap:wrap; gap:10px 10px; margin:0.8em 5px 1.5em; } /* flex-growで、最後の行に列数分そろわず余ったスペースを各カードが均等に埋めて横幅いっぱいになるようにする */ div.pref_photo_list div.pref_photo_box{ box-sizing:border-box; width:calc((100% - 28px) / 3); flex-grow:1; border:1px solid #dddddd; border-radius:4px; overflow:hidden; background-color:#FFFFFF; } /* 加工品・名産品／好んで食べる地域だけは、コーナー全体を2列分の幅に制限する（コラム一覧pref_article_groupは pref_photo_listを共有しているが、pref_photo_groupスコープなので対象外） */ div.pref_photo_group{ width:660px; box-sizing:border-box; } div.pref_photo_group div.pref_photo_list div.pref_photo_box{ width:calc((100% - 14px) / 2); } /* オススメのコーナーから2列に分ける（PCのみ）。左列はオススメ→コラム一覧、 右列は好んで食べる地域→加工品・名産品（2列幅）の順に縦積みする */ div.pref_two_col_row{ display:flex; gap:0 10px; align-items:flex-start; } div.pref_two_col_left{ flex:1; min-width:0; box-sizing:border-box; } div.pref_two_col_right{ width:550px; box-sizing:border-box; } /* 左列内では、オススメの幅(330px固定)を列幅いっぱいの可変幅にする */ div.pref_two_col_left div.pref_recommend_articles_group{ width:100%; } /* 左列内のコラムは、オススメと同じく3列ではなく2列で表示する */ div.pref_two_col_left div.pref_article_group div.pref_photo_list div.pref_photo_box{ width:calc((100% - 14px) / 2); } /* 右列内では、加工品・好んで食べるのコーナー全体幅(660px固定)を列幅いっぱいの可変幅にする */ div.pref_two_col_right div.pref_photo_group{ width:100%; } /* オススメ＋コラムが少ない県は2列にせず、各コーナーを全幅で縦に並べてカードを3列で表示する（Html_Pref::useTwoColumnLayout） */ div.pref_one_col div.pref_recommend_articles_group, div.pref_one_col div.pref_photo_group{ width:100%; } /* gap(10px)×2を引いた正確な1/3にする。(100% - 28px)だとflex-growが無いオススメ・コラムのカードだけ数px狭くなり、下の写真と縦の線がずれる */ div.pref_one_col div.pref_photo_list div.pref_photo_box{ width:calc((100% - 20px) / 3); } /* オススメ・コラムは3件以下なので、flex-growで1〜2枚のカードが全幅に引き伸ばされないよう1/3幅のままにする */ div.pref_one_col div.pref_recommend_articles_group div.pref_photo_box, div.pref_one_col div.pref_article_group div.pref_photo_box{ flex-grow:0; } div.pref_photo_list a.pref_photo_thumb{ display:flex; justify-content:center; align-items:center; width:100%; height:160px; overflow:hidden; background-color:#f4f4f4; } div.pref_photo_list a.pref_photo_thumb img{ width:100%; height:100%; object-fit:cover; } /* 好んで食べる地域・加工品一覧の写真はではなく