@charset "utf-8"; /* CSS Document */ /******************** * * 全体トップ用CSS * 地域インデックス用CSS * *********************/ html#index { min-width: 980px; } #container { border: medium none !important; font-size: 12px !important; font-size: inherit !important; padding: 0 !important; /* width: 815px !important; */ width: 960px !important; font-feature-settings: "palt" on; } #container.main { margin: 0 auto; width: 800px; } /******************************* * * インデックス ロゴバナー * *******************************/ #indexLogoBnr { margin: 40px auto 0px; position: relative; max-width: 980px; width: 100%; } #indexLogoBnr .indexLogoBnrInner { margin: 0 auto; width: 100%; } html.oversea #indexLogoBnr .indexLogoBnrInner::after { color: #FFF; content: "\47\6C\6F\62\61\6C\20\56\65\72\73\69\6F\6E"; /* Global Version */ font-size: 20px; height: 26px; left: -webkit-calc(50% + 150px); left: calc(50% + 75px); line-height: 25px; position: absolute; top: 59px; width: 150px; } #logo { height: 200px; width: 453px; } img#logo.overares_logo { height: 82px; } .indexLog_balloon { position: relative; display: inline-block; margin: 1.5em 0; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #555; font-size: 16px; background: #e0edff; border-radius: 15px; } .indexLog_balloon:before { content: ""; position: absolute; top: 75%; left: -15px; margin-top: -15px; border: 7px solid transparent; border-right: 10px solid #e0edff; } .indexLog_balloon p { margin: 0; padding: 0; } /* 地域インデックスから検索窓までコンテナ */ .areaIndex_top_container{ width: 815px !important; margin:0px auto; } /* 地域インデックス 爆サイロゴ */ div.areaIndexBnr[class*="areaCode"] { margin: 10px 0 5px; text-align: center; } div.areaIndexBnr[class*="areaCode"] a { display: block; margin: 0 auto; position: relative; width: 434px; } div.areaIndexBnr[class*="areaCode"] a:hover { text-decoration: none; } div.areaIndexBnr[class*="areaCode"] a::after { color: #FFF; content: ""; font-size: 15px; line-height: 24px; height: 24px; left: -webkit-calc(50% + 75px); left: calc(50% + 48px); position: absolute; top: 49px; width: 97px; } .areaIndexBnr img { display: block; width: 88%; float: left; margin-bottom: 8px; } div.areaIndexBnr.areaCode13 a::after { /* 海外版 */ content: "\6D77\5916\7248"; } /* over area */ #chooseCountry { margin: 0 auto; text-align: left; width: 100%; max-width: -webkit-calc(100% - 20px); max-width: calc(100% - 20px); font-size: 0; max-width: 1000px; display: flex; flex-wrap: wrap; padding: 0; position: relative; } #chooseCountry div { display: inline-block; margin: 6px 5px; padding: 0; vertical-align: top; width: calc((100% / 6) - 10px); } #chooseCountry div.JPN { width: calc((100% / 3) - 10px) !important; } #chooseCountry a { background-color: #EEE; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid #EEE; background-size: cover; display: block; padding: 0; text-decoration: none; height: 120px; position: relative; } #chooseCountry .UKR a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/UKR.jpg);} #chooseCountry .RUS a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/RUS.jpg);} #chooseCountry .CHN a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/CHN.jpg);} #chooseCountry .TWN a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/TWN.jpg);} #chooseCountry .KOR a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/KOR.jpg);} #chooseCountry .THA a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/THA.jpg);} #chooseCountry .IDN a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/IDN.jpg);} #chooseCountry .PHL a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/PHL.jpg);} #chooseCountry .VNM a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/VNM.jpg);} #chooseCountry .USA a { background: center/cover url(https://img.bakusai.com/p/img/clock/back/pc/USA.jpg);} #chooseCountry .JPN a { background: bottom/cover url(https://img.bakusai.com/p/img/clock/back/pc/JPN.jpg);} #chooseCountry a:hover { background-color: #7FA9F7; } #chooseCountry a:hover span { color: #080856; } #chooseCountry a span { color: #000; display: block; font-size: 14px; font-weight: bold; padding: 2px 4px; text-align: center; } #index.overSea #menu li.RUS a em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Russia.svg") no-repeat scroll left center transparent; background-size: 15px auto; } #index.overSea #menu li.UKR a em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Ukraine.svg") no-repeat scroll left center transparent; background-size: 15px auto; } #index.overSea #menu li.JPN a em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Japan.gif") no-repeat scroll left center transparent; background-size: 15px auto; border: 1px solid #E7E4E4; display: block; height: 15px; margin: auto 2px auto 2px; padding: 0; width: 15px; } #chooseCountry div.flag_wrap { display: flex; align-items: center; line-height: 15px; margin:5px auto auto 5px; width: max-content; background: rgba(255,255,255,0.9); } #chooseCountry .CHN em { background: url("https://img.bakusai.com/p/img/clock/flag_of_China.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .KOR em { background: url("https://img.bakusai.com/p/img/clock/flag_of_South_Korea.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .PHL em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Philippines.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .PHL a span { font-size: 13px; } #chooseCountry .VNM em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Vietnam.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .THA em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Thailand.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .USA em { background: url("https://img.bakusai.com/p/img/clock/flag_of_USA.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .JPN em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Japan.gif") no-repeat scroll center center/ 15px transparent; } #chooseCountry .IDN em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Indonesia.svg") no-repeat scroll center center/ 15px transparent; } #chooseCountry .UKR em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Ukraine.svg") no-repeat scroll center center/ 15px transparent; } #chooseCountry .RUS em { background: url("https://img.bakusai.com/p/img/clock/flag_of_Russia.svg") no-repeat scroll center center/ 15px transparent; } #chooseCountry div.clock_txt { position: absolute; background: rgba(255,255,255,0.9); width: 80px; height: 18px; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #000; margin: auto 5px 5px auto; bottom: 0; right: 0; } .mac { #chooseCountry div.clock_txt { width: fit-content; } } #chooseCountry a .clock_txt span{ display: block; font-size: 10px; font-weight: normal; padding: 0 0 0 4px; text-align: center; } /******************** * * アクセスランキング * *********************/ ul#mainNav { margin: 0; padding: 0; text-decoration: none !important; } ul#mainNav > li { cursor: pointer; text-align: center; display: flex; width: max-content; align-items: center; height: 30px; } ul#mainNav li a { display: inline; width: 100%; height: 100%; text-decoration: none; margin-left: 8px; } ul#mainNav li .access_rank, ul#mainNav li .access_detail { margin-left: 12px; } ul#mainNav li .access_rank{ line-height: 30px; } ul#mainNav li .access_detail { display: block; } ul#mainNav li a:hover { text-decoration: underline; } ul.subNav { display: none; font-weight: bold; position: absolute; right: 5px; top: 31px; } ul.subNav li { background-color: #f5f5f5; border-radius: 0 0 5px 5px; line-height: 32px; list-style: none outside none; padding: 0 26px 0 2px; position: relative; float: right; width: 115px; } ul.subNav li a { background: url("/img/iphone/arrow.png") no-repeat scroll right center / 10px auto transparent; width: 115px !important; } ul.subNav li ul.subNav { position: absolute; top: 0; left: 10em; } .alexaIcon{ background: url("https://img.bakusai.com/p/img/alexaIcon.gif") no-repeat scroll 0 0 transparent; float: left; height: 20px; margin: -2px 0 0; width: 65px; } /******************** * * 地域版総投稿 * *********************/ #postRankWrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; letter-spacing: -0.5px; text-align: center; white-space: normal; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; } .areaIndexBnrWrap { width: calc(100% - 440px); display: inline-block; vertical-align: middle; text-align: left; float: left; } #postRankWrap { font-family:"Meiryo mod 12pt AA","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Verdana,"MS Pゴシック",sans-serif; width: 100%; height: 54px; border-radius: 5px; padding: 8px 0 10px; margin: 0 auto; text-align: center; } #postRankWrap.overarea { padding: 0; } #areaPosts { text-align: center; margin: 0 auto 5px; font-size: 15px; width: max-content !important; vertical-align: middle; display: flex; align-items: baseline; justify-content: center; word-break: keep-all; } #areaPosts span.areaPosts2 { color: #E36162; margin: 0 2px; letter-spacing: 0; font-size: 1.6rem; position: relative; } span.areaPosts2:after { border-bottom: dotted 2px #8f8f8f; content: ""; height: 4px; left: 0; right: 0; bottom: 6px; width: 100%; display: block; position: absolute; } .areaPost_sub { color: #E36162; font-size: 1rem; margin: auto 2px 2px -1px; } #areaPosts span.areaPosts3{ font-weight: normal; } #postsRank { width: 380px; display: flex; justify-content: space-between; margin: 0 auto; vertical-align: middle; line-height: 16px; } .thx_balloon { position: relative; transform-style: preserve-3d; width: 50px; min-height: 16px; margin: 0; padding: 0px 2px; border-radius: 16px; font-size: 11px; } .thx_balloon::before, .thx_balloon::after { content: ''; position: absolute; width: 8px; height: 8px; } .thx_balloon, .thx_balloon::before { background: #fff; box-shadow: 0 0 10px 0 rgba(163,163,163,0.50); /* ぼかし距離(第3引数),拡散距離(第4引数),色(第5引数) */ } .thx_balloon::after { background: linear-gradient(-135deg, #fff 51%, transparent 51%); } .thx_balloon::before,.thx_balloon::after { right: -1px; top: 50%; /* 位置 */ transform: translateY(-50%) rotate(45deg) skew(-20deg,-20deg) translateZ(-1px); /* 傾斜角(skew) */ } .thx_balloon::after { transform: translateY(-50%) rotate(45deg) skew(-20deg,-20deg) translateZ(1px); /* 傾斜角(skew) */ } .thx_balloon p { margin: 0; position: absolute; right: 0; left: 0; } /* 1億投稿突破後の平時用 2013/02/26設置 */ #totalPosts,.accessRank a{ font-size: 0.8rem; text-align: center; vertical-align: middle; margin: 0 0 3px; line-height: inherit; display: flex; } .totalPosts_wrap { display: grid; margin-right: 3px; } #totalPosts .ichioku, .accessRank .rankCount { color: var(--bakusai_blue); font-size: 40px; font-weight: bold; letter-spacing: -1px; margin: auto 2px 5px; line-height: 34px; --line-height-width: calc(1.5); /* add CSS Variables */ z-index: 2; position: relative; top: 4px; } .oku_wrap { display: flex; position: relative; } .oku_wrap.oku_spacer { top: 6px; } .oku_wrap:before { content: ''; position: absolute; bottom: 5px; left: 6px; width: 90%; height: 7px; background-color: var(--bakusai_l_blue); z-index: 0; } #totalPosts .ichioku::before { display: block; width: 0; height: 0; margin-top: calc((1 - var(--line-height-width)) * 0.5em); /* add negative margin */ content: '' } /* #totalPosts .ichioku::after{ display: block; width: 0; height: 0; margin-bottom: calc((1 - var(--line-height-width)) * 0.5em); content: ''; } */ span.ichioku_over { margin: auto auto 4px; } span.ichioku_sub { color: var(--bakusai_blue); margin: auto 2px 6px -2px; font-size: 18px; z-index: 2; } .countryposts { color: #fff; padding: 1px 8px 2px; border-radius: 510px; margin: 2em 0; background: #174a70; margin: 0 2px; } .a-ranking { color: #fff; padding: 1px 8px 2px; border-radius: 510px; margin: 2em 0; background: #174a70; margin: 0 2px 0 0; } .accessRank { text-align: center; } .accessRank_wrap { display: grid; text-align: right; margin: auto 4px auto auto; font-size: 0.8rem; line-height: 1.1; } .accessRankTitle { color: var(--bakusai_blue); } .accessRankArea { color: #000; font-weight: normal; } .accessRank_sub { color: var(--bakusai_blue); margin: auto auto 3px; z-index: 2; } /******************** * * 検索生中継 * *********************/ /* 検索キーワード生中継 */ dl.liveSchWrap { background: #F6F6F6; border-radius: 1px; box-shadow: 0 1px 0 #EAEAEA; margin: 5px auto; text-align: center; padding: 0 0 1px; position: relative; } dl.liveSchWrap dt { border-bottom: 3px solid #0d507e; font-size: 14px; height: 30px; line-height: 30px; /* background: #EEE; */ text-align: left; padding: 0 0 0 5px; margin: 15px 0 0; } dl.liveSchWrap dt i { background: #FFB46B; border-radius: 2px; color: #fff; font-size: 14px; height: 20px; line-height: 19px; margin-right: 2px; text-align: center; vertical-align: middle; width: 20px; } dl.liveSchWrap dt span { font-size: 15px; height: 30px; line-height: 30px; vertical-align: middle; display: inline-block; } dd.liveWordsWrap { letter-spacing: 0; line-height: normal; margin: 8px auto 2px !important; width: 100%; } dd.liveWordsWrap .liveWordsList { display: inline-block; vertical-align: top; width: calc(100% - 3px); text-align: left; flex-wrap: wrap; padding: 0 3px; overflow: hidden; min-height: 78px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } dd.liveWordsWrap .liveSchUpdate { display: inline-block; vertical-align: middle; text-align: right; width: 140px; min-height: 105px; } dd.liveWordsWrap .liveSchUpdate form { margin: 0; padding: 0; text-align: center; } dd.liveWordsWrap .liveSchUpdate input[type="submit"] { margin:0; height:30px; } .liveSchLink { margin: 3px auto; width: 450px; text-align: center; } /* 更新ボタン */ .liveSchUpdate { display: inline-block; width: max-content; text-align: right; position: absolute; top: 4px; right: 4px; } form.searchForm button[type="submit"].refresh { padding: 0 7px; text-decoration: none; background: #dbdbdb; border-right: solid 27px var(--bakusai_blue); font-weight: bold; box-shadow: 0px 2px 2px rgb(0 0 0 / 29%); z-index: 1; border-top: none; border-bottom: none; border-left: none; height: 23px; cursor: pointer; } form.searchForm button[type="submit"].refresh:hover { background-color: rgba(255, 255, 255, .2); } form.searchForm button[type="submit"].refresh:active { -webkit-transform: translate(0,2px); -moz-transform: translate(0,2px); transform: translate(0,2px); border-bottom:none; } form.searchForm button[type="submit"].refresh i { color: #fff; font-size: 20px; margin: 0 auto; width: 0px; position: absolute; top: 3px; right: 22px; } /*form.searchForm button[type="submit"].refresh:hover i { transform: rotate(360deg); transition: 1s; }*/ form.searchForm button[type="submit"].refresh > div { color: var(--bakusai_blue); width: 120px; font-size: 13px; height: 20px; margin: 0 auto; display: contents; line-height: 1.5rem; } form.searchForm button[type="submit"].refresh + div { text-align: center; color: #314353; width: 100px; font-size: 11px; height: 25px; line-height: 15px; margin: 0 auto; position: relative; overflow: hidden; top: -7px; } /* firefox */ @-moz-document url-prefix() { /* 検索ワード生中継 ボタン */ .liveSchUpdate { bottom: 29px; } } /* 弧線字 検索ワードを更新 */ form.searchForm button[type="submit"].refresh + div span { bottom: -15px; font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック","Helvetica Neue","Helvetica","Arial",sans-serif; font-size: 12px; height: 100px; left: 0px; line-height: 160px; margin: 0px auto; position: absolute; transform-origin: top center; right: 0px; width: 20px; } .char1 {transform: rotate(28deg);} .char2 {transform: rotate(20deg);} .char3 {transform: rotate(12deg);} .char4 {transform: rotate(4deg);} .char5 {transform: rotate(-4deg);} .char6 {transform: rotate(-12deg);} .char7 {transform: rotate(-20deg);} .char8 {transform: rotate(-28deg);} /* 人気キーワード! */ .trendWords { display: inline-block; margin: 0 3px 3px 0px; vertical-align: bottom; font-size: 13px; } .trendWords a { border: 1px solid #d4dade; padding: 3px 7px; background: #ececed; border-radius: 3px; min-height: 15px; display: block; color: #0e3250; max-width: 250px; } .trendWords a:hover { border: 2px solid #0d507e; padding: 2px 6px; } .trendWords a:visited { color: #390e50; } .fontWeightnormal {font-weight: normal;} .fontWeightbold {font-weight: bold;} .fontSize11 {font-size: 11px;} .fontSize12 {font-size: 12px;} .fontSize13 {font-size: 13px;} .fontSize14 {font-size: 14px;} .fontSize15 {font-size: 15px;} .fontSize16 {font-size: 16px;} .fontSize17 {font-size: 17px;} .fontSize18 {font-size: 18px;} .fontSize19 {font-size: 19px;} /* TV実況中継 固定中スレッド(ON AIR) */ .onAirIcon img { position: absolute; top: 0; right: 0; width: 50px; margin: 8px 5px; pointer-events: none; } /* IE10 */ @media all and (-ms-high-contrast:none) { .onAirIcon { top: 6.5px; } } /* IE11 */ @media all and (-ms-high-contrast:none) { *::-ms-backdrop, .onAirIcon { top: 7px; } } .onAirIcon i { background: #d20000; border-radius: 1px 0 0 1px; color: #FFF; display: inline-table; height: 13px; line-height: 12px; padding: 0 2px; vertical-align: top; } .onAirIcon span { background: #fff; color: #d20000; display: inline-block; font-family: "MS PGothic","MS Pゴシック"; font-size: 11px; height: 14px; letter-spacing: -0.4px; line-height: 14px; padding: 0 2px; text-align: center; vertical-align: middle; } #newsContainer li.body a > .fa.fa-microphone, #newsContainer li.body a > .fa.fa-arrow-right { color: #94a3ae; font-size: 10px; width: 10px; text-align: center; height: 1em; vertical-align: middle; } #newsContainer li.body a:hover > .fa.fa-microphone, #newsContainer li.body a:hover > .fa.fa-arrow-right { color: #0d507e; } /******************** * * 最新書き込み/ピックアップニュース/ニュース速報 * *********************/ /*** 最新書き込み/ピックアップニュース/ニュース速報 ***/ #newsContainer { width: 100%; margin: 0 auto; text-align: center; font-size: 0; } #newsContainer > div:nth-child(2n+1) { float: left; font-size: inherit; } #newsContainer > div:nth-child(2n+2) { float: right; font-size: inherit; } div.newsContainer_jp > div:nth-child(2n+2) { float: left !important; } div.newsContainer_jp > div:nth-child(2n+1) { float: right !important; } /* 最新書き込み/ニュース速報 */ .tvLive, .latestWriting, .newsFlash, .pickupNews, .areamain-thr-list-block { background: #F6F6F6; box-shadow: 0 1px 0 #EAEAEA; display: inline-block; min-height: 264px; margin: 0 0 5px; width: -webkit-calc(50% - 2px); width: calc(50% - 2px); } .pickupNews_jp { width:100% !important; } #newsContainer .verticalSection { height: 210px; } .tvLive .title, .latestWriting .title, .newsFlash .title, .pickupNews .title, .areamain-thr-list-block .title { background: #F6F6F6; height: 33px; line-height: 30px; padding: 0 0 0 0px; text-align: left; } .latestWriting .title::after, .newsFlash .title::after, .pickupNews .title::after, .areamain-thr-list-block .title::after { content: ""; border-bottom: 3px solid #0d507e; display: block; width: 100%; } .areamain-thr-list-block .title:has(.ctgIcon img)::after, .areamain-thr-list-block .title:has(.area-tab-list)::after, .pickupNews .title:has(.area-tab-list)::after { border-bottom:none; display: none; } .tvLive .title, .pickupNews_jp .title { border-bottom: none; } .tvLive .title span, .latestWriting .title span, .newsFlash .title span, .pickupNews .title span, .areamain-thr-list-block .title span { color: #000; font-size: 14px; } #newsContainer .title i, #newsContainer .title img { background: #c8c8c8; border-radius: 2px; color: #fff; font-size: 14px; height: 20px; line-height: 19px; margin-right: 2px; text-align: center; vertical-align: middle; width: 20px; } .latestWriting .title i.fa.fa-comment { background: #62c66e !important; } .pickupNews .title i.fa.fa-star { background: #ead056 !important; } .newsFlash .title i.fa.fa-bolt { background: #dc8686 !important; } .newsFlash .title i.fa-globe { background: #639bc4 !important; } .areamain-thr-list-block .title:has(.ctgIcon img), .areamain-thr-list-block .title:has(.area-tab-list) { display: flex; box-sizing: border-box; border-bottom: 3px solid #0d507e; } .tvLive ul, .latestWriting ul, .newsFlash ul, .pickupNews ul, .areamain-thr-list-block ul { background: #F6F6F6; margin: 0; padding: 0; font-size: 12.5px; font-feature-settings: "palt" on; } #newsContainer + #newsContainer ul { min-height: 165px; } .tvLive .body:first-child, .latestWriting .body:first-child, .newsFlash .body:first-child, .areamain-thr-list-block .body:first-child { border-top: medium none; } .tvLive .body, .latestWriting .body, .newsFlash .body, .areamain-thr-list-block .body { text-align:left; height:1em; list-style: none outside none; } /* TV実況中継追加後のリスト表示修正 2013/06/04 */ .nfBody { border-top: 1px solid #d9d9d9; clear: both; height: 2em; line-height: 2em; list-style: outside none none; position: relative; } #newsContainer .body { border-top: 1px solid #d9d9d9; min-height: 39px; list-style: outside none none; text-align: left; } #newsContainer .latestWriting.overseaArea .body { height: 28.8px; line-height: 28.8px; } #newsContainer .verticalSection .body { height: 2.3em; } #newsContainer .body:first-child { border-top: 0 none; } #newsContainer .body a { display: block; font-family: "MS PGothic","MS Pゴシック",sans-serif; font-size: 14px; line-height: 38px; padding: 0 2px 0 5px; position: relative; white-space: nowrap; width: -webkit-calc(100% - 7px); width: calc(100% - 7px); } #newsContainer .body a:hover { background: #ededed; } #newsContainer .pickupNews .boardName a { background: #FFFFFF; } #newsContainer .pickupNews .body a:hover { background: rgba(0,0,0,0); } #newsContainer .body a .thrTitle { display: inline-block; vertical-align: middle; margin: 1px 4px 0 2px; } #newsContainer .body a .thrTitle:has(p.new_thrTitle), #newsContainer .body a .thrTitle:has(p.areamain-thr-list-block--text) { max-width: calc(100% - 65px); } .thrTitle:has(p.sports_broadcasting-thrTitle) { max-width: calc(100% - 75px) !important; } .body a div.thrTitle p.new_thrTitle, p.areamain-thr-list-block--text { max-width: 100%; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1; overflow: hidden; white-space: nowrap; margin: 0px; } p.areamain-thr-list-block--text { height: 18px; line-height: 18px; margin-top: 2px; } /* safari css hack */ @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root #newsContainer .body a .thrTitle { letter-spacing: -0.5px; } } #newsContainer .body a .lastUpdate, span.pnLastUpdate { display: inline-block; vertical-align: middle; background: #FFF; /* border: 1px solid #E4E4E4; */ line-height: 18px; padding: 0 3px; border-radius: 3px; font-size: 11px; height: 18px; box-shadow: 1px 1px 0px 0 #ECECEC,0px 0px 1px 0 #AAA; color: #242424; } span.pnLastUpdate { position: absolute; text-align: right; right: 0; bottom: 1px; } .timeCount { font-size: 12px; margin-right: 1px; display: inline-block; text-align: right; vertical-align: middle; } .timeUnit { font-size: 9px; display: inline-block; vertical-align: 1px; vertical-align: middle; } #newsContainer .newsFlash .newsFlashList a { /* min-height: 31px; */ /* line-height: 31px; */ } .latestWriting .title .ctgIcon, .newsFlash .title .ctgIcon, .pickupNews .title .ctgIcon, .latestWriting .title .ctgTitle, .newsFlash .title .ctgTitle, .pickupNews .title .ctgTitle, .areamain-thr-list-block .title .ctgTitle, .areamain-thr-list-block .title .ctgIcon, .weather_title { display: inline-block; font-size: 15px; margin-right: 5px; vertical-align: middle; } .latestWriting .title .ctgIcon, .newsFlash .title .ctgIcon, .pickupNews .title .ctgIcon, .tvLive .title .ctgIcon, .areamain-thr-list-block .title .ctgIcon { padding-left :5px; } .tvLive .title .ctgTitle, .tvLive .title .ctgIcon, .pickupNews_jp .title .ctgIcon, .pickupNews_jp .title , .areamain-thr-list-block .title .ctgIcon:has(img), .areamain-thr-list-block .title:has(.area-tab-list) { display: flex; font-size: 15px; vertical-align: middle; } .tvLive .title .ctgTitle { margin-top: 1px; } .tvLive .title .ctgIcon, .areamain-thr-list-block .title .ctgIcon:has(img), .pickupNews_jp .title .ctgIcon { margin: 6px 5px 0 0; } .areamain-thr-list-block p.areamain-thr-list-block--text img.team-logo{ max-width: 18px; height: 18px; margin: 0px; object-fit: contain; vertical-align: -3px !important; } #newsContainer .body a { text-decoration: none; } #newsContainer .body a:hover { text-decoration: none; } .tvLive .title, .pickupNews_jp .title { display: flex; position: relative; background: #cae3f7; height: 33px; } .tvLivetabarea, .area-tab-list { position: absolute; right: 0; display: flex; height: 32px; line-height: 30px; } .area-tab-list { height: 33px; } .tvLive .title img { border-radius: 2px; height: 20px; vertical-align: middle; width: 20px; } .tvLive .body a, .stWriting .body a, .newsFlash .body a, .areamain-thr-list-block .body a { width: 100%; } /* TV実況中継追加後の絵文字位置修正 2013/06/04 */ #newsContainer .body img {vertical-align:-2px;} /* 最新書き込みの絵文字位置修正 2013/04/30 */ .latestWriting .body a img { vertical-align:top; } .latestWritingList, .newsFlashList { border-top: 1px solid #bfbfbf; list-style: outside none none; text-align: right; } .latestWritingList a, .newsFlashList a { display: block; padding: 0px 5px; height: 28px; line-height: 28px; } /* ピックアップニュース */ .pickupNews ul { display: inline-block; vertical-align: top; width: -webkit-calc(100% - 172px); width: calc(100% - 172px); } .pickupNews .body { clear: both; height: 56px !important; line-height: 16px !important; padding: 0; vertical-align: middle; width: 100%; } .pickupNews .body > a { display: block; height: 42px; padding: 1px 1px 1px 3px !important; text-overflow: inherit !important; white-space: inherit !important; width: 100%; } .pickupNews .body > a:hover { text-decoration: none; } .pickupNews .pnImg { display: inline-block; height: 46px; margin-right: -2px; width: 46px; } .pickupNews .pnImg .pnImgInner { display: table-cell; height: 50px; vertical-align: bottom; } .pickupNews .pnImg .pnImgInner > img { display: inline-block; font-size: 10px; height: 37px; line-height: 35px; max-height: 37px; max-width: 37px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 37px; } .pickupNews .body p { display: inline-block; line-height: 16px; margin: 8px 0; vertical-align: top; word-break: break-all; word-wrap: break-word; width: -webkit-calc(100% - 43px); width: calc(100% - 43px); letter-spacing: -0.1px; } .pickupNews .body > a:hover p { text-decoration: underline; } .pnSquareImg { position:relative; height:100%; width:100%; } .pnImgInner > .pnSquareImg { position:relative; width:44px; height:44px; } .pnSquareImg img { border: none; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; } @media all and (-ms-high-contrast:none) { /* IE10 */ .pickupNews .pnImg .pnImgInner { height: 36px; } .pickupNews .body p { margin: 4px 0 0; line-height: 16px; } /* IE11 */ *::-ms-backdrop, .pickupNews .pnImg .pnImgInner { height: 36px; } *::-ms-backdrop, .pickupNews .body p { margin: 4px 0 0; line-height: 16px; } } .pickupNews li.body:hover { background: #EDEDED !important; } .pickupNews li.body:first-child { border-top: medium none; } /*.pickupNews .body:first-child::after { color: #94a3ae; content: "\0f105"; font-family: fontawesome; font-size: 16px; position: absolute; right: -3px; top: 6px; }*/ .pickupNews li { position: relative; } .pickupNews .boardName { bottom: 3px; position: absolute; right: 1px; } .pickupNews .boardName > a { background: #fff; border-radius: 2px; box-shadow: 1px 1px 0px 0 #ECECEC,0px 0px 1px 0 #AAA; display: block; font-size: 10px !important; line-height: 1.7em !important; min-width: 30px !important; padding: 0 3px !important; text-align: center; width: auto !important; } .pickupNews .boardName > a[title*="\7DCF\5408"] { /* 総合 */ color: #7f8c8d; } .pickupNews .boardName > a[title*="\653F\6CBB\30FB\7D4C\6E08"] { /* 政治・経済 */ color: #d7ad02; } .pickupNews .boardName > a[title*="\4E8B\4EF6\30FB\4E8B\6545"] { /* 事件・事故 */ color: #e74c3c; } .pickupNews .boardName > a[title*="\82B8\80FD"] { /* 芸能 */ color: #e28b00; } .pickupNews .boardName > a[title*="\30B9\30DD\30FC\30C4"] { /* スポーツ */ color: #1abc9c; } .pickupNews .boardName > a[title*="\56FD\969B"] { /* 国際 */ color: #3498db; } .pickupNews .boardName > a[title*="\30B0\30E9\30D3\30A2"] { /* グラビア */ color: #FF66CC; } .pickupNews .pnPhoto { background: #f6f6f6; display: inline-block; height: fit-content; max-height: 210px; margin: 5px; vertical-align: top; width: 162px; } .pickupNews .pnPhoto .pnPhotoInner { display: table-cell; text-align: center; vertical-align: middle; } .pickupNews .pnPhoto .pnPhotoInner > a { display: inline; margin: 1px auto 0; width: 162px; } .pickupNews .pnPhoto .pnPhotoImg { background: #d8d8d8; display: table-cell; font-size: 10px; height: 162px; position: relative; right: 0; text-align: center; vertical-align: middle; width: 162px; } .pickupNews .pnPhoto .pnPhotoImg > img { max-height: 140px; max-width: 140px; } .pickupNews .pnPhoto p { font-size: 12px; line-height: 13px; margin: 6px auto; text-align: left; width: 160px; word-wrap: break-word; word-break: break-all; } /* 総投稿数 */ #total_posts { font-size:18px; font-weight:bold; height: 30px; line-height: 30px; text-align:center; margin:7px 0 3px 0; } /******************** * * 検索 * *********************/ /* 検索 */ #search_while { margin: 0 auto 3px; padding: 1px 3px; width: 783px; } #search_while .search_form { text-align:center; margin: -5px 0 0; } #search_while .search_form input[type="text"] { border: 1px solid #ABABAB; width:326px; height:19px; padding:2px; font-size:14px; } #search_while .search_form input[type="text"]:active, #search_while .search_form input[type="text"]:focus { border: 1px solid #F86B9A; -webkit-box-shadow: 1px 2px 1px #CBCBCB inset, 0 0 1px #FF00DC; box-shadow: 1px 2px 1px #CBCBCB inset, 0 0 1px #FF00DC; } #search_while .search_form input[type="submit"] { padding:2px 0; } #search_while .live_search_result { line-height: 19px; margin: 0 auto; padding: 3px; width: 100%; } #search_while .live_search_submit { text-align:center; height:30px; margin-top:5px; } #search_while .live_search_submit input[type="submit"] { margin:0; height:30px; } #search_while #here { /* 検索キーワード生中継はこちらから! */ margin:5px auto; height:50px; width:800px; text-align:right; } /* ピックアップ */ #pickup_while { width:782px; margin:0 auto; border:0px solid #00CC33; font-size: 14px; } #pickup_main, #breaking_news_while, /* 新着ニュース */ #areatop_row /* エリアトップ横一列のボックス枠 */ { border: 0px solid transparent; margin: 0px auto; width: 810px; } #areatop_row { border: 1px solid #CCC !important; margin: 0 auto 5px !important; width: 780px !important; } #areatop_row ul.noimg li.more { /* エリアトップ横一列のボックス枠 */ background-color: #FFF; display: inline-block; border-bottom: none; height: 15px; padding: 3px 5px; text-align: right; width: 765px; } #pickup_main ul, #breaking_news_while ul, #latest_writing ul, #areatop_row ul { list-style: none; margin: 0; padding: 0; } .pickup_titlebar { background-color: #FE6F6F; text-align: center; padding: 2px 0px; border: 1px solid #CCC; color:#FFF; font-size:14px; font-weight: bold; } .pickup_article { background: #FFFFE0; border: 1px solid #CCC; display: inline-block; height: 140px; vertical-align: top; width: 255px; } .pickup_article:last-child { margin: 0 !important; } .pickup_article .padding5{ padding: 5px; } .pickup_article .img_frame { background: #FFF; border: 1px solid #BBB; color: #FFF; width: 130px !important; display: table-cell; vertical-align: middle !important; height: 130px !important; } .pickup_article .img_frame img { display: block; margin: 0 auto; text-align: center; border: none; } .pickup_title { display: table-cell; vertical-align: top; padding: 0px 3px; font-size: medium; } a .pickup_title { font-size:medium; font-weight: bold; } /*ニュースタイトル長さ調整*/ .pickupNews .boardName { position:relative; } #newsContainer .pickupNews li.body > a { position:absolute !important; top:0; left:0; } #newsContainer .pickupNews .body div.contentBlock { display: inline-block; line-height: 16px; vertical-align: top; word-break: break-all; word-wrap: break-word; width: -webkit-calc(100% - 49px); width: calc(100% - 49px); letter-spacing: -0.1px; } #newsContainer .pickupNews a { background-color:rgba(0,0,0,0); } #newsContainer .pickupNews li.body p { width:100%; height: 32px; overflow: hidden; display: -webkit-box !important; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2; } #newsContainer .pickupNews_jp li.body p { height: 32px; text-align: justify; position: relative; } #newsContainer .pickupNews .pnPhoto p { width: 162px; height: fit-content; max-height: 42px; overflow: hidden; display: -webkit-box !important; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3; } #newsContainer .pickupNews li.body p > a { display:inline !important; line-height:16px; width:auto; white-space:normal; position: static; } #newsContainer .pickupNews li.body p span > a { display:inline !important; width:auto; bottom:auto; right:auto; top:2px; padding:3px 5px !important; } /* ① 国内版はデフォルトで boardName を消す */ .pickupNews_jp .boardName { display: none; } /* ② 主要タブ=1つ目の .pickupContents が表示状態のときだけ復活 */ .pickupNews_jp:has(.area-tab:first-child.tabSelected) .boardName { display: inline; /* 必要なら inline-block に */ } .newsFlash .nfBody .lastUpdate { position:absolute; right:3px; top:10px; } #newsContainer .newsFlash .body a .thrTitle{ max-width: calc(100% - 50px); height:38px; } #newsContainer .newsFlash .body a .thrTitleText{ max-width: 100%; height:29px; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1; margin: 1px 0; overflow:hidden; white-space:nowrap; } /* ===== BAKUSAI-5592 エリアTOP「ニュース速報/国際ニュース速報」サムネイル ===== ニュース速報/国際ニュース速報の各行に、既存の画像データ(dir/imgid)でサムネイルを表示する。 サムネ(img.areaNewsThumb)のある行だけ矢印を隠し、幅44×高さ34のサムネを li 左端に開き無し (ピックアップニュースと同じ inline 流し込み)で置き、タイトルはその右へ・1行のまま。 行高・時刻位置は既存のまま(サムネ高さ34px は行高<約40px>に収まり縦中央)。 画像の無い行は :has() で対象外=従来どおり矢印+文字のみ。周辺カード(最新書込み/TV実況/スポーツ実況)には波及しない。 */ #newsContainer .newsFlash .body a:has(> img.areaNewsThumb) { box-sizing: border-box; width: 100%; padding-left: 0; } #newsContainer .newsFlash .body a:has(> img.areaNewsThumb) > i.fa-arrow-right { display: none; } #newsContainer .newsFlash .body a > img.areaNewsThumb { display: inline-block; vertical-align: middle; width: 44px; height: 34px; margin-right: 6px; object-fit: cover; } #newsContainer .newsFlash .body a:has(> img.areaNewsThumb) .thrTitle { max-width: calc(100% - 100px); } .newsFlash .nfBody .lastUpdate, .latestWriting .lastUpdate , .newsFlash .lastUpdate , .tvLive .lastUpdate, .areamain-thr-list-block .lastUpdate { position:absolute; right:3px; top:10px; } a.areamain-thr-list-block--link { display: inline-flex !important; align-items: center; gap: 6px !important; } a.areamain-thr-list-block--link:has(div.areamain-thr-list-block--link--latestResList) i.fa.fa-arrow-right { flex-shrink: 0; } div.areamain-thr-list-block--link--latestResList { display: inline-flex; flex-direction: column; gap: 1px; width: calc(100% - 14px); height: 39px; font-feature-settings: "palt" on; } div.areamain-thr-list-block--link--latestResList div.thrTitle { line-height: 1px; margin: 0px !important; } div.areamain-thr-list-block--link--latestResList-LatetRes { line-height: 0px; font-size: 12px; color: #333; margin: 0 7px 0 3px; } div.areamain-thr-list-block--link--latestResList-LatetRes:has(div.lastUpdate3) { display: inline-flex; margin: 0px 3px 0px 3px; gap: 4px; } div.lastUpdate3 { position: relative !important; top: 0px !important; right: 0px !important; height: 15px !important; line-height: 15px !important; flex: 0 1 auto; } div.areamain-thr-list-block--link--latestResList-LatetRes .latestResDisplayPc { margin: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: nowrap; display: inline-block; color: #333; } div.areamain-thr-list-block--link--latestResList-LatetRes .latestResDisplayPc i.fa.fa-comment-o { font-size: 14px; } .areamain-thr-list-latestResText { font-size: 12px; color: #333; } div.Today-Match { position: absolute; top: 3px; right: 3px; display: inline-block; vertical-align: middle; background: #FFF; border: 1px solid #B40014; line-height: 15px; padding: 0 3px; border-radius: 3px; font-size: 11px; height: 15px; box-sizing: border-box; color: #B40014; } .mac { div.Today-Match { line-height: 14px; } } div.Today-Match i.fa.fa-video-camera { vertical-align: 1px; } /* 各カテゴリピックアップ */ #breaking_news_while ul li#breaking_news_main{ display: inline-block; vertical-align: top; border: 1px solid #CCC; width: 255px; margin: 3px 1px 3px 5px; } #breaking_news_while ul li#breaking_news_main div.breaking_news_titlebar { background-color: #F99; } #breaking_news_while ul li#breaking_news_main:nth-child(3n+1) div.breaking_news_titlebar { background-color: #F99; } #breaking_news_while ul li#breaking_news_main:nth-child(3n+2) div.breaking_news_titlebar { background-color: #F99; } #breaking_news_while ul li#breaking_news_main:nth-child(3n) div.breaking_news_titlebar { background-color: #F99; } #breaking_news_main li { padding:3px 5px 2px 5px; text-align:left; } #breaking_news_main li:nth-child(3n+1), #breaking_news_main li:nth-child(3n) { background:#FFF; } #breaking_news_main li:nth-child(3n+2) { background:#FFE2E2; } #breaking_news_main ul li img { float: left; margin: 0px 2px; border: 1px solid #CCC; } #breaking_news_main ul li img.thumb { width:45px; height:45px; } #breaking_news_main ul a li div.title { display: inline; width: 200px; font-size: 13px; } #breaking_news_main ul.latest li { background-color: #FFF; padding: 5px; height: 15.5px; line-height: 15.5px; text-align: left; border-bottom: 1px dotted #999; } #breaking_news_main ul.latest li.more { border-bottom: none; text-align: right; } .breaking_news_titlebar, .areatop_row_titlebar { text-align: center; border-bottom: 1px solid #CCC; padding: 2px 0px; color:#FFF; font-size:14px; font-weight: bold; } /* 最新書込み一覧 */ .latest_writing_titlebar { text-align: center; padding: 2px 0px; border-bottom: 1px solid #CCC; background-color: #F6C; color:#FFF; font-weight: bold; font-size:14px; } #latest_writing ul li { color:#F60; font-size:14px; border-bottom: 1px solid #CCC; display:inline-block; height: 20px; } #latest_writing ul li .boardname { display: inline-block; border-left: 1px dotted #CCC; height: 25px; line-height: 25px; padding: 0 0 0 8px; width: 145px; } #latest_writing ul li .boardname a, #latest_writing ul li.more a, #latest_writing ul li .titlename a { display: inline-block; width: 100%; } #latest_writing ul li .count { font-weight: bold; background: #FB67B1; color: #FFF; display: inline-block; height: 20px; line-height: 24px; padding: 0 0 0 8px; width: 20px; } #latest_writing ul li .titlename { padding: 3px 5px; text-align: left; background-color: #FFF; display: inline-block; height: 11px; width: 575px; } body#menu-body div#ctgmenu ul li a i { color: #0d507e; } body#menu-body div#ctgmenu ul li a:hover i { color: #031421; } /* 掲示板メニュー 都道府県雑談と市町村雑談を差別化 */ /* body#menu-body div#ctgmenu ul li a[title$="種子島雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="奄美大島雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="徳之島雑談掲示板"], */ body#menu-body div#ctgmenu ul li a[title$="市雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="区雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="町雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="村雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="郡雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="局雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="地方雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="西東京雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="島雑談掲示板"]:not([title$="福島雑談掲示板"]):not([title$="広島雑談掲示板"]):not([title$="徳島雑談掲示板"]):not([title$="鹿児島雑談掲示板"]) { padding: 0px 0 0px 11px; } /* 掲示板メニュー 都道府県雑談と市町村雑談を差別化 */ body#menu-body div#ctgmenu ul li a[title$="市雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="区雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="町雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="村雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="郡雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="局雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="地方雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="西東京雑談掲示板"] i, body#menu-body div#ctgmenu ul li a[title$="島雑談掲示板"]:not([title$="福島雑談掲示板"]):not([title$="広島雑談掲示板"]):not([title$="徳島雑談掲示板"]):not([title$="鹿児島雑談掲示板"]) i { color: #94a3ae; } body#menu-body div#ctgmenu ul li a[title$="市雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="区雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="町雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="村雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="郡雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="局雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="地方雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="西東京雑談掲示板"] i::before, body#menu-body div#ctgmenu ul li a[title$="島雑談掲示板"]:not([title$="福島雑談掲示板"]):not([title$="広島雑談掲示板"]):not([title$="徳島雑談掲示板"]):not([title$="鹿児島雑談掲示板"]) i::before { /* content: "\0f105";*/ font-family: fontawesome; } body#menu-body div#ctgmenu ul li a[title$="雑談総合掲示板"] i::before { /* content: "\0f041";*/ font-family: fontawesome; } .dead_areamenu { background-color:#E1E1E1; } .ken_areamenu{ background-color: var(--bakusai_l_blue); } body#menu-body div#ctgmenu ul li a[title$="雑談総合掲示板"] { padding: 0px 0 0px 3px; } /* 掲示板メニュー 雑談といじめ掲示板を差別化 */ body#menu-body div#ctgmenu ul li a[title$="西成区雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="チェンマイ雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="パタヤ雑談掲示板"], body#menu-body div#ctgmenu ul li a[title$="バンコク雑談掲示板"] { padding: 0px 0 0px 20px; justify-content: space-between; } body#menu-body div#ctgmenu ul li a[title$="旭川市いじめ総合掲示板"], body#menu-body div#ctgmenu ul li a[title$="酒田市いじめ総合掲示板"] { padding: 0px 0 0px 20px; justify-content: left; } /* 西成区雑談掲示板に画像がある場合だけ幅124pxに */ body#menu-body div#ctgmenu ul li a[title$="西成区雑談掲示板"]:has(div.ctg_menu_list_img) .ctg_menu_list_container, body#menu-body div#ctgmenu ul li a[title$="チェンマイ雑談掲示板"]:has(div.ctg_menu_list_img) .ctg_menu_list_container, body#menu-body div#ctgmenu ul li a[title$="パタヤ雑談掲示板"]:has(div.ctg_menu_list_img) .ctg_menu_list_container, body#menu-body div#ctgmenu ul li a[title$="バンコク雑談掲示板"]:has(div.ctg_menu_list_img) .ctg_menu_list_container { width: 124px; } body#menu-body div#ctgmenu ul li a[title$="旭川市いじめ総合掲示板"]:has(.fa-caret-right) .fa-caret-right, body#menu-body div#ctgmenu ul li a[title$="酒田市いじめ総合掲示板"]:has(.fa-caret-right) .fa-caret-right, body#menu-body div#ctgmenu ul li a[title$="西成区雑談掲示板"]:has(.fa-caret-right) .fa-caret-right, body#menu-body div#ctgmenu ul li a[title$="チェンマイ雑談掲示板"]:has(.fa-caret-right) .fa-caret-right, body#menu-body div#ctgmenu ul li a[title$="パタヤ雑談掲示板"]:has(.fa-caret-right) .fa-caret-right, body#menu-body div#ctgmenu ul li a[title$="バンコク雑談掲示板"]:has(.fa-caret-right) .fa-caret-right { display: none; } body#menu-body div#ctgmenu ul li a[title$="旭川市いじめ総合掲示板"]::before, body#menu-body div#ctgmenu ul li a[title$="酒田市いじめ総合掲示板"]::before, body#menu-body div#ctgmenu ul li a[title$="西成区雑談掲示板"]::before, body#menu-body div#ctgmenu ul li a[title$="チェンマイ雑談掲示板"]::before, body#menu-body div#ctgmenu ul li a[title$="パタヤ雑談掲示板"]::before, body#menu-body div#ctgmenu ul li a[title$="バンコク雑談掲示板"]::before { content: "└"; margin-right: 2px; text-decoration: none; color: #94a3ae; text-decoration-line: none; display: inline-block; } /* /掲示板メニュー 雑談といじめ掲示板を差別化 */ /* 全国共通カテにアイコン追加 ※甲子園pickupには全国アイコン非表示*/ body#menu-body div#ctgmenu ul:not(#pickup_match_list) li a::after { background-color: #ffffff; border: 1px solid #93bb77; color: #4a7a2a; border-radius: 2px; float: right; font-size: 11px; height: 14px; line-height: 15px; margin: auto 2px; padding: 0px 1px; transition: all 0.1s ease-in-out 0s; } body#menu-body div#ctgmenu ul:not(#pickup_match_list) li a:hover::after { background-color: #4a7a2a; color: #ffffff; transition: all 0.1s ease-in-out 0s; } /* 最新書き込み、海外エリアの掲示板について 全国アイコン非表示。 */ body#menu-body div#ctgmenu div.border_new ul li a[title$="最新書込み一覧"]::after, body#menu-body div#ctgmenu div.border_guide ul li a::after { content: ""; display: none; } /* 全国アイコン非表示 ※全国アイコンを付けたくない物を:not([title$="〇〇掲示板"])と追加 */ body#menu-body div#ctgmenu ul li a:not([title$=" 掲示板"]):not([title$=" 掲示板"]):not([title$="特集カテ掲示板"]):not([title$="天気・災害掲示板"]):not([title$="災害掲示板"]):not([title$="生命保険・損害保険掲示板"]):not([title$="自衛隊・軍事掲示板"]):not([title$="高校野球掲示板"]):not([title$="野球総合掲示板"]):not([title$="サッカー総合掲示板"]):not([title$="スポーツ・施設掲示板"]):not([title$="雑談掲示板"]):not([title$="首都圏雑談掲示板"]):not([title$="雑談総合掲示板"]):not([title$="区雑談掲示板"]):not([title$="島雑談掲示板"]):not([title$="地方雑談掲示板"]):not([title$="市雑談掲示板"]):not([title$="町雑談掲示板"]):not([title$="村雑談掲示板"]):not([title$="郡雑談掲示板"]):not([title$="いじめ総合掲示板"]):not([title$="同窓会掲示板"]):not([title$="お水掲示板"]):not([title$="コンカフェ・ガルバ掲示板"]):not([title$="外国人パブ・クラブ掲示板"]):not([title$="外国人パブ・クラブ 掲示板"]):not([title$="ゲイバー掲示板"]):not([title$="ホスト掲示板"]):not([title$="新地総合掲示板"]):not([title$="新地個人掲示板"]):not([title$="社交街掲示板"]):not([title$="風俗・出張ホスト掲示板"]):not([title$="ウリ専・出張ホスト・マッサージ掲示板"]):not([title$="ウリ専・出張ホスト・マッサージ総合掲示板"]):not([title$="マッサージ掲示板"]):not([title$="マッサージ総合掲示板"]):not([title$="出会い系総合掲示板"]):not([title$="パパ活・出会い系総合掲示板"]):not([title$="ハッテン場掲示板"]):not([title$="レズビアン掲示板"]):not([title$="ゲイ総合掲示板"]):not([title$="マッチング掲示板"]):not([title$="女装子・ニューハーフ総合掲示板"]):not([title$="LGBT総合掲示板"]):not([title$="グルメ・飲食総合掲示板"]):not([title$="ラーメン掲示板"]):not([title$="一般求人掲示板"]):not([title$="風俗求人掲示板"]):not([title$="お水・ホスト求人掲示板"]):not([title$="会社・就活掲示板"]):not([title$="サークル掲示板"]):not([title$="釣り・漁・漁協雑談掲示板"]):not([title$="釣り・漁・漁協画像掲示板"]):not([title$="釣り・漁・漁協掲示板"]):not([title$="クラブ・ディスコ・フェス掲示板"]):not([title$="お祭り・イベント掲示板"]):not([title$="遊園地・レジャー施設掲示板"]):not([title$="遊園地・レジャー施設掲示板"]):not([title$="不良・族掲示板"]):not([title$="不良・刑務所掲示板"]):not([title$="ヘアーサロン・エステ掲示板"]):not([title$="ヘアーサロン・エステ掲示板"]):not([title$="ママ・育児掲示板"]):not([title$="ママ・育児掲示板"]):not([title$="不倫・略奪愛掲示板"]):not([title$="TV実況中継掲示板"]):not([title$="テレビ・ラジオ番組掲示板"]):not([title$="パチンコ・スロット店掲示板"]):not([title$="パチンコ・スロット総合掲示板"]):not([title$="パチンコイベント総合掲示板"]):not([title$="コロナ・感染症掲示板"]):not([title$="病院・医師掲示板"]):not([title$="福祉・介護掲示板"]):not([title$="運輸・交通掲示板"]):not([title$="土木・建設掲示板"]):not([title$="沖縄情報掲示板"]):not([title$="岐阜ボーイ掲示板"]):not([title$="岐阜情報掲示板"]):not([title$="中国雑談掲示板"]):not([title$="上海雑談掲示板"]):not([title$="北京雑談掲示板"]):not([title$="大連雑談掲示板"]):not([title$="香港雑談掲示板"]):not([title$="台湾雑談掲示板"]):not([title$="韓国雑談掲示板"]):not([title$="バンコク雑談掲示板"]):not([title$="タイ南部総合掲示板"]):not([title$="タイ雑談総合掲示板"]):not([title$="タイ北部総合掲示板"]):not([title$="パタヤ雑談掲示板"]):not([title$="タイ中部総合掲示板"]):not([title$="チェンマイ雑談掲示板"]):not([title$="タイ東北部総合掲示板"]):not([title$="タイ東部総合掲示板"]):not([title$="タイビザ情報掲示板"]):not([title$="インドネシア雑談掲示板"]):not([title$="バリ雑談掲示板"]):not([title$="マニラ雑談掲示板"]):not([title$="ベトナム雑談掲示板"]):not([title$="アメリカ雑談掲示板"]):not([title$="(雑談) 掲示板"]):not([title$="(雑談) 総合掲示板"]):not([title$="アメリカ料理・レシピ掲示板"]):not([title$="アメリカお悩み相談・愚痴掲示板"]):not([title$="ロシア雑談掲示板"]):not([title$="ウクライナ雑談掲示板"]):not([title$="インドネシアビジネス掲示板"]):not([title$="医療掲示板"]):not([title$="マーケット掲示板"]):not([title$="グルメ・飲食掲示板"]):not([title$="美しい風景掲示板"]):not([title$="ウォンテッド掲示板掲示板"]):not([title$="中国画像掲示板"]):not([title$="台湾画像掲示板"]):not([title$="タイ画像掲示板"]):not([title$="海外画像総合掲示板"]):not([title$="ナイトライフ掲示板"]):not([title$="ナイトライフ総合掲示板"]):not([title$="お店掲示板"]):not([title$="・個人掲示板"]):not([title$="・個人掲示板"]):not([title$="・総合掲示板"]):not([title$="・総合掲示板"])::after { content: "全国"; } /* 全国アイコン表示 ※:notで除外されているが、全国アイコンを付けたいカテ */ body#menu-body div#ctgmenu ul li a[title$="全国掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="なれあい雑談掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国雑談総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国パパ活・出会い系総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国LGBT総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国メンエス・リフレ・癒し・総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国高校野球総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国プロ野球総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国野球総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国サッカー総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国グルメ・飲食総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="ニュース雑談総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="チョットHな雑談掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="ネタ雑談掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="Hなサークル掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="鉄道・電車 掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="AKB48・個人掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="AKB48・総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="SKE48・個人掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="HKT48・個人掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="坂道シリーズ・個人掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="全国ウリ専・マッサージ総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="ハプニングバー・総合掲示板"]::after, body#menu-body div#ctgmenu ul li a[title$="ハプニングバー・お店掲示板"]::after { content: "全国" !important; } a.ctg_menu_list_link { display: flex !important; align-items: center; justify-content: space-between; text-decoration: none; min-width:0; } a.ctg_menu_list_link:hover .ctg_menu_list_title { text-decoration: underline; } div.ctg_menu_list_img { width: 28px; height: 21px; opacity: 0.6; transition: all 0.1s ease-in-out 0s; } div.ctg_menu_list_img img { vertical-align: top; width: 100%; height: 100%; object-fit: cover; } .ctg_box li a:hover div.ctg_menu_list_img{ opacity: 1; transition: all 0.1s ease-in-out 0s; } p.ctg_menu_list_container { display: inline-flex; align-items: center; gap:4px; box-sizing: border-box; margin: 0px !important; font-feature-settings: "palt" on; min-width:0; } p.ctg_menu_list_container .ctg_menu_list_title { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; overflow-wrap: normal; max-width: 168px; width: 100%; word-break: normal; } /* BAKUSAI-5786 表示モック: 愛知外国人メンエス親子ツリー表示(新規クラスのみ・既存に影響なし) */ /* 親見出し(非リンク・

を直下に置く) */ li.areatag_parent_mock { background-color: #E1E1E1; } .ctg_box li.areatag_parent_mock p.ctg_menu_list_container { display: flex; padding: 0 0 0 2px; line-height: 23px; min-height: 23px; } /* 子(ツリー枝線付きリンク) */ .ctg_box li.areatag_child_li_mock { position: relative; } .ctg_box li.areatag_child_li_mock > a.areatag_child_mock { padding-left: 22px; } /* 縦のレール */ .ctg_box li.areatag_child_li_mock::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; border-left: 1px solid #888; } /* 横の枝(中央) */ .ctg_box li.areatag_child_li_mock::after { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; border-top: 1px solid #888; } /* 最後の子は縦レールを中央で止めて └ 字にする */ .ctg_box li.areatag_child_li_mock--last::before { bottom: 50%; } /* /BAKUSAI-5786 表示モック */ /* /全国共通カテにアイコン追加 */ /* PC左メニュー 掲示板導線にNEW表示 */ .new_bulletin_board_title { background-color: #ffcb00; border-radius: 2px; color: #000; font-family: monospace; font-size: 12px; position: relative; top: -1px; display: inline-flex; justify-content: center; align-items: center; line-height: 16px; padding: 0 5px; vertical-align: middle; width: 16px; height: 16px; letter-spacing: normal !important; } /* PC左メニュー 掲示板導線にNEW表示 */ span.zatsudan_subtitle { line-height: 24px; display: flex; align-items: center; padding: 3px 0px 0px; font-size: 14px; } span.zatsudan_subtitle img { margin: 2px 4px; object-fit: contain; height: 20px; width: 20px; } /*loading*/ .access_loading { position: fixed; width: 100vw; height: 100vh; background: #fff; z-index: 11; min-width: 600px; min-height: 600px; } .access_loading_wrap { width: 600px; height: 400px; inset: 50%; position: absolute; transform: translate(-50%, -50%); } .loading_text { font-size: 1.4rem; color: var(--bakusai_blue); text-align: center; position: absolute; margin: auto auto 10vh; height: 2rem; display: block; inset: 0; } #load_img img { position: absolute; inset: 50%; transform: translate(-50%,-50%); } img#load_chara { position: absolute; width: 200px; height: 200px; z-index: 2; } img#load_ring { position: absolute; width: 400px; height: 400px; z-index: 1; } .loader, .loader:after { border-radius: 50%; width: 60vw; height: 60vw; max-width: 400px; max-height: 400px; } .loader { font-size: 10px; text-indent: -9999em; border-top: 1rem solid rgba(13,80,126, 0.2); border-right: 1rem solid rgba(13,80,126, 0.2); border-bottom: 1rem solid rgba(13,80,126, 0.2); border-left: 1rem solid var(--bakusai_blue); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; text-align: center; position: absolute; margin: auto; inset: 0; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loading { perspective: 1000px; } .loading span { display: inline-block; margin: 0 -.05em; transform-origin: 50% 50% -5px; transform-style: preserve-3d; animation: loading 1.6s infinite; } .loading span:nth-child(2) { animation-delay: .1s; } .loading span:nth-child(3) { animation-delay: .2s; } .loading span:nth-child(4) { animation-delay: .3s; } .loading span:nth-child(5) { animation-delay: .4s; } .loading span:nth-child(6) { animation-delay: .5s; } .loading span:nth-child(7) { animation-delay: .6s; } @keyframes loading { 0% { transform: rotateX(-360deg); } 70% { transform: rotateX(0); } } /* 天気予報 */ .forecast_map_wrap { width: 425px; height: 160px; display: flex; position: relative; top: 3px; left: 5px; } .forecast.areaCode img { width: 425px; } .forecast_update { font-size: 11px; position: relative; top: -5px; text-align: right; height: 5px; margin-bottom: 20px; } /* 共通 */ .forecast_icon img { width: 45px; position: absolute; top: -1px; right: 25px; z-index: 1; } .forecast_left, .forecast_right { width: 90px; height: 30px; } .forecast_left { position: absolute; left: 13px; } .forecast_right { position: absolute; left: 63px; } .forecast_datetime { transform: scale(0.7); writing-mode: vertical-rl; position: absolute; top: -3px; height: 30px; z-index: 2; } .forecast_temp { position: absolute; top: 22px; left: 16px; font-weight: bold; display: flex; } span.max-temp { color: #fd3102; } span.min-temp { color: #0a38e4; } span.temperature{ display: inline-block; transform: scale(0.75); position: relative; bottom: -1px; } .forecast_area_left_2m, .forecast_area_left_3m, .forecast_area_left_4m { writing-mode: vertical-rl; position: absolute; } .forecast_area_left_2m { top: 9px; } .forecast_area_left_3m { top: 4px; } .forecast_area_left_4m { top: -1px; } .forecast_area_right_2m, .forecast_area_right_3m, .forecast_area_right_4m { writing-mode: vertical-rl; position: absolute; left: 118px; } .forecast_area_right_2m { top: 9px; } .forecast_area_right_3m { top: 4px; } .forecast_area_right_4m { top: -1px; } /* 海外版 */ .forecast_icon2 img { width: 27px; height: 25px; position: absolute; top: 9px; left: 30px; z-index: 1; } .forecast_left_w, .forecast_right_ws { width: 90px; } .forecast_left_w { position: absolute; } .forecast_right_w { position: absolute; left: 57px; } .forecast_overseas { width: 134px; text-align: center; position: absolute; bottom: 5px; font-size: 11px; z-index: 5; } .forecast_datetime_w { transform: scale(0.7); writing-mode: vertical-rl; position: absolute; top: 5px; height: 30px; z-index: 2; } /* 天気予報20%拡大版 */ .forecast_icon_b img { width: 52px; position: absolute; left: 18px; } .forecast_left_b { position: absolute; left: 10px; } .forecast_right_b { position: absolute; left: 72px; } .forecast_datetime_b { writing-mode: vertical-rl; position: absolute; top: 9px; height: 30px; font-size: 10px; z-index: 2; } .forecast_temp_b { position: absolute; font-size: 16px; top: 35px; left: 9px; font-weight: bold; letter-spacing: -0.05em; display: flex; } .forecast_area_left_2m_b, .forecast_area_left_3m_b, .forecast_area_left_4m_b, .forecast_area_right_2m_b, .forecast_area_right_3m_b, .forecast_area_right_4m_b { font-size: 15px; position: absolute; } .forecast_area_right_2m_b, .forecast_area_right_3m_b, .forecast_area_right_4m_b { left: 141px; } .forecast_area_left_2m_b, .forecast_area_right_2m_b { top: 8px; } /* firefox */ @-moz-document url-prefix(){ .forecast_overseas { bottom: 3px; } } /* IE */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .forecast_area_left_2m { top: 0px; left: 11px; } .forecast_area_right_2m { top: 0px; left: 130px; } .forecast_datetime { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; top: -15px; left: 10px; } .forecast_left, .forecast_right { height: 45px; } .forecast_icon img { top: 1px; } .forecast_icon_b img { height: 52px; } .forecast_area_left_3m { top: -7px; left: 10px; } .forecast_area_right_3m { top: -7px; left: 130px; } .forecast_area_left_4m { top: -12px; left: 10px; } .forecast_area_right_4m { top: -12px; left: 130px; } .forecast_datetime_b { top: 3px; left: 10px; } /* IE海外版 */ .forecast_icon2 img { height: 30px; } .forecast_datetime_w { transform: scale(0.7); writing-mode: vertical-rl; position: absolute; top: -5px; left: 15px; height: 30px; z-index: 2; width: 10px; } } /* 北海道 */ .forecast_map1_1 { top: 5px; right: 408px; } .forecast_map1_2 { top: 56px; right: 420px; } .forecast_map1_3 { top: 108px; right: 429px; } .forecast_map1_4 { top: 4px; right: 272px; } .forecast_map1_5 { top: 8px; right: 147px; } .forecast_map1_6 { top: 59px; right: 156px; } .forecast_map1_7 { top: 111px; right: 235px; } .forecast_map1_1, .forecast_map1_2, .forecast_map1_3, .forecast_map1_4, .forecast_map1_5, .forecast_map1_6, .forecast_map1_7 { text-align: center; position: relative; display: flex; } /* 東北 */ .forecast_map2_1 { top: 57px; right: 394px; } .forecast_map2_2 { top: 4px; right: 173px; } .forecast_map2_3 { top: 109px; right: 191px; } .forecast_map2_4 { top: 4px; right: 386px; } .forecast_map2_5 { top: 57px; right: 181px; } .forecast_map2_6 { top: 109px; right: 403px; } .forecast_map2_1, .forecast_map2_2, .forecast_map2_3, .forecast_map2_4, .forecast_map2_5, .forecast_map2_6 { text-align: center; position: relative; display: flex; } /* 甲信越 */ .forecast_map4_1 { top: 58px; right: 392px; } .forecast_map4_2 { top: 4px; right: 180px; } .forecast_map4_3 { top: 57px; right: 194px; } .forecast_map4_4 { top: 4px; right: 376px; } .forecast_map4_5 { top: 109px; right: 400px; } .forecast_map4_6 { top: 110px; right: 185px; } .forecast_map4_1, .forecast_map4_2, .forecast_map4_3, .forecast_map4_4, .forecast_map4_5, .forecast_map4_6 { text-align: center; position: relative; display: flex; } /* 東海 */ .forecast_map5_1 { top: 4px; right: 395px; } .forecast_map5_2 { top: 56px; right: 404px; } .forecast_map5_3 { top: 57px; right: 165px; } .forecast_map5_4 { top: 109px; right: 411px; } .forecast_map5_5 { top: 4px; right: 189px; } .forecast_map5_6 { top: 109px; right: 203px; } .forecast_map5_1, .forecast_map5_2, .forecast_map5_3, .forecast_map5_4, .forecast_map5_5, .forecast_map5_6 { text-align: center; position: relative; display: flex; } /* 北陸 */ .forecast_map6_1 { top: 5px; right: 375px; } .forecast_map6_2 { top: 58px; right: 390px; } .forecast_map6_3 { top: 109px; right: 406px; } .forecast_map6_4 { top: 5px; right: 174px; } .forecast_map6_5 { top: 58px; right: 166px; } .forecast_map6_6 { top: 109px; right: 200px; } .forecast_map6_1, .forecast_map6_2, .forecast_map6_3, .forecast_map6_4, .forecast_map6_5, .forecast_map6_6 { text-align: center; position: relative; display: flex; } /* 山陽 */ .forecast_map8_1 { top: 5px; right: 375px; } .forecast_map8_2 { top: 57px; right: 419px; } .forecast_map8_3 { top: 109px; right: 419px; } .forecast_map8_4 { top: 5px; right: 155px; } .forecast_map8_5 { top: 57px; right: 155px; } .forecast_map8_6 { top: 109px; right: 234px; } .forecast_map8_1, .forecast_map8_2, .forecast_map8_3, .forecast_map8_4, .forecast_map8_5, .forecast_map8_6 { text-align: center; position: relative; display: flex; } /* 四国 */ .forecast_map9_1 { top: 5px; right: 380px; } .forecast_map9_2 { top: 57px; right: 414px; } .forecast_map9_3 { top: 109px; right: 397px; } .forecast_map9_4 { top: 5px; right: 163px; } .forecast_map9_5 { top: 58px; right: 162px; } .forecast_map9_6 { top: 109px; right: 202px; } .forecast_map9_1, .forecast_map9_2, .forecast_map9_3, .forecast_map9_4, .forecast_map9_5, .forecast_map9_6 { text-align: center; position: relative; display: flex; } /* 九州 */ .forecast_map10_1 { top: 4px; right: 381px; } .forecast_map10_2 { top: 109px; right: 402px; } .forecast_map10_3 { top: 58px; right: 410px; } .forecast_map10_4 { top: 4px; right: 195px; } .forecast_map10_5 { top: 57px; right: 167px; } .forecast_map10_6 { top: 109px; right: 167px; } .forecast_map10_1, .forecast_map10_2, .forecast_map10_3, .forecast_map10_4, .forecast_map10_5, .forecast_map10_6 { text-align: center; position: relative; display: flex; } /* 沖縄 */ .forecast_map11_1 { top: 6px; right: 407px; } .forecast_map11_2 { top: 57px; right: 424px; } .forecast_map11_3 { top: 109px; right: 428px; } .forecast_map11_4 { top: 5px; right: 278px; } .forecast_map11_5 { top: 5px; right: 163px; } .forecast_map11_6 { top: 57px; right: 153px; } .forecast_map11_7 { top: 109px; right: 146px; } .forecast_map11_1, .forecast_map11_2, .forecast_map11_3, .forecast_map11_4, .forecast_map11_5, .forecast_map11_6, .forecast_map11_7 { text-align: center; position: relative; display: flex; } /* 山陰 */ .forecast_map12_1 { top: 8px; right: 394px; } .forecast_map12_2 { top: 67px; right: 411px; } .forecast_map12_3 { top: 108px; right: 292px; } .forecast_map12_4 { top: 7px; right: 169px; } .forecast_map12_5 { top: 67px; right: 161px; } .forecast_map12_1, .forecast_map12_2, .forecast_map12_3, .forecast_map12_4, .forecast_map12_5 { text-align: center; position: relative; display: flex; } /* 中国 */ .forecast_map13-1_1 { top: 11px; right: 412px; } .forecast_map13-1_2 { top: 111px; right: 398px; } .forecast_map13-1_3 { top: 7px; right: 148px; } .forecast_map13-1_4 { top: 60px; right: 161px; } .forecast_map13-1_5 { top: 112px; right: 175px; } .forecast_map13-1_1, .forecast_map13-1_2, .forecast_map13-1_3, .forecast_map13-1_4, .forecast_map13-1_5 { text-align: center; position: relative; height: 25px; } /* タイ */ .forecast_map13-2_1 { top: 21px; right: 401px; } .forecast_map13-2_2 { top: 99px; right: 392px; } .forecast_map13-2_3 { top: 8px; right: 156px; } .forecast_map13-2_4 { top: 60px; right: 158px; } .forecast_map13-2_5 { top: 112px; right: 183px; } .forecast_map13-2_1, .forecast_map13-2_2, .forecast_map13-2_3, .forecast_map13-2_4, .forecast_map13-2_5 { text-align: center; position: relative; height: 25px; } /* 韓国 */ .forecast_map13-3_1 { top: 23px; right: 397px; } .forecast_map13-3_2 { top: 99px; right: 408px; } .forecast_map13-3_3 { top: 7px; right: 171px; } .forecast_map13-3_4 { top: 60px; right: 153px; } .forecast_map13-3_5 { top: 112px; right: 163px; } .forecast_map13-3_1, .forecast_map13-3_2, .forecast_map13-3_3, .forecast_map13-3_4, .forecast_map13-3_5 { text-align: center; position: relative; height: 25px; } /* フィリピン */ .forecast_map13-4_1 { top: 23px; right: 398px; } .forecast_map13-4_2 { top: 99px; right: 408px; } .forecast_map13-4_3 { top: 7px; right: 185px; } .forecast_map13-4_4 { top: 60px; right: 170px; } .forecast_map13-4_5 { top: 112px; right: 154px; } .forecast_map13-4_1, .forecast_map13-4_2, .forecast_map13-4_3, .forecast_map13-4_4, .forecast_map13-4_5 { text-align: center; position: relative; height: 25px; } /* ベトナム */ .forecast_map13-5_1 { top: 24px; right: 403px; } .forecast_map13-5_2 { top: 93px; right: 387px; } .forecast_map13-5_3 { top: 7px; right: 185px; } .forecast_map13-5_4 { top: 60px; right: 170px; } .forecast_map13-5_5 { top: 112px; right: 154px; } .forecast_map13-5_1, .forecast_map13-5_2, .forecast_map13-5_3, .forecast_map13-5_4, .forecast_map13-5_5 { text-align: center; position: relative; height: 25px; } /* アメリカ */ .forecast_map13-6_1 { top: 7px; right: 418px; } .forecast_map13-6_2 { top: 60px; right: 409px; } .forecast_map13-6_3 { top: 111px; right: 395px; } .forecast_map13-6_4 { top: 18px; right: 141px; } .forecast_map13-6_5 { top: 97px; right: 158px; } .forecast_map13-6_1, .forecast_map13-6_2, .forecast_map13-6_3, .forecast_map13-6_4, .forecast_map13-6_5 { text-align: center; position: relative; height: 25px; } /* インドネシア */ .forecast_map13-7_1 { top: 18px; right: 429px; } .forecast_map13-7_2 { top: 99px; right: 413px; } .forecast_map13-7_3 { top: 7px; right: 213px; } .forecast_map13-7_4 { top: 59px; right: 129px; } .forecast_map13-7_5 { top: 112px; right: 187px; } .forecast_map13-7_1, .forecast_map13-7_2, .forecast_map13-7_3, .forecast_map13-7_4, .forecast_map13-7_5 { text-align: center; position: relative; height: 25px; } /* ロシア */ .forecast_map13-8_1 { top: 12px; right: 413px; } .forecast_map13-8_2 { top: 91px; right: 418px; } .forecast_map13-8_3 { top: 108px; right: 288px; } .forecast_map13-8_4 { top: 15px; right: 153px; } .forecast_map13-8_5 { top: 89px; right: 157px; } .forecast_map13-8_1, .forecast_map13-8_2, .forecast_map13-8_3, .forecast_map13-8_4, .forecast_map13-8_5 { text-align: center; position: relative; height: 25px; } /* ウクライナ */ .forecast_map13-9_1 { top: 17px; right: 410px; } .forecast_map13-9_2 { top: 98px; right: 384px; } .forecast_map13-9_3 { top: 8px; right: 195px; } .forecast_map13-9_4 { top: 59px; right: 156px; } .forecast_map13-9_5 { top: 111px; right: 184px; } .forecast_map13-9_1, .forecast_map13-9_2, .forecast_map13-9_3, .forecast_map13-9_4, .forecast_map13-9_5 { text-align: center; position: relative; height: 25px; } /* 北東北 */ .forecast_map14_1 { top: 4px; right: 396px; } .forecast_map14_2 { top: 109px; right: 395px; } .forecast_map14_3 { top: 57px; right: 177px; } .forecast_map14_4 { top: 4px; right: 184px; } .forecast_map14_5 { top: 57px; right: 400px; } .forecast_map14_6 { top: 109px; right: 171px; } .forecast_map14_1, .forecast_map14_2, .forecast_map14_3, .forecast_map14_4, .forecast_map14_5, .forecast_map14_6 { text-align: center; position: relative; display: flex; } /* 北関東 */ .forecast_map15_1 { top: 5px; right: 172px; } .forecast_map15_2 { top: 110px; right: 172px; } .forecast_map15_3 { top: 58px; right: 412px; } .forecast_map15_4 { top: 4px; right: 399px; } .forecast_map15_5 { top: 57px; right: 162px; } .forecast_map15_6 { top: 109px; right: 400px; } .forecast_map15_1, .forecast_map15_2, .forecast_map15_3, .forecast_map15_4, .forecast_map15_5, .forecast_map15_6 { text-align: center; position: relative; display: flex; } /* 南部九州 */ .forecast_map16_1 { top: 5px; right: 171px; } .forecast_map16_2 { top: 110px; right: 189px; } .forecast_map16_3 { top: 57px; right: 403px; } .forecast_map16_4 { top: 4px; right: 389px; } .forecast_map16_5 { top: 58px; right: 180px; } .forecast_map16_6 { top: 108px; right: 395px; } .forecast_map16_1, .forecast_map16_2, .forecast_map16_3, .forecast_map16_4, .forecast_map16_5, .forecast_map16_6 { text-align: center; position: relative; display: flex; } /* index banner */ .index_banner { position: absolute; top: 60px; left: 38px; z-index: 2; } .index_banner img { width: 540px; } /* world map */ img#world_map, img.map_hover { z-index: 1; width: 1000px; height: 500px; object-fit: contain; inset: 0; } /* 各国のハイライト画像を常時表示(以前はホバー時のみ)。 通常は薄く透過させて画面をうるさくせず、ホバー/アクティブ時に不透明にする。 吹き出し(z-index:2)より下(z-index:1)に重ねる。 */ img.map_hover { display: block; position: absolute; z-index: 1; /* mix-blend-mode: luminosity; */ /* filter: grayscale(100%); */ opacity: 0; transition: filter 0.2s ease, opacity 0.2s ease; } img.map_hover.is-active, .UKR a:hover ~ img#map_ukr, .RUS a:hover ~ img#map_rus, .CHN a:hover ~ img#map_chn, .TWN a:hover ~ img#map_twn, .KOR a:hover ~ img#map_kor, .VNM a:hover ~ img#map_vnm, .THA a:hover ~ img#map_tha, .PHL a:hover ~ img#map_phl, .IDN a:hover ~ img#map_idn, .USA a:hover ~ img#map_usa, .JPN a:hover ~ img#map_jpn { filter: none; opacity: 1; mix-blend-mode:normal; } img#world_map { position:relative; } img#map_ukr, img#map_rus, img#map_chn, img#map_twn, img#map_kor, img#map_vnm, img#map_tha, img#map_phl, img#map_idn, img#map_usa, img#map_jpn { pointer-events: none; } p.img_cap { color: #5e5e5e; font-size: 10px; margin: 0 2px; } /* 海外エリア選択時に吹き出し */ div.area_speech_bubble { margin: 0px !important; padding: 4px 4px !important; font-size: 12px; font-weight: bold; text-align: center; z-index: 2; /* 常時表示のハイライト画像(map_hover)より上に表示する */ pointer-events: none; /* 装飾ラベルなので地図のクリック判定を妨げない */ width: fit-content !important; border-radius: 3px; /* 通常時:各国カラー(--c)を薄めた背景+各国カラーの1px枠+#333文字。 ホバー/アクティブ時にマップのハイライトと連動して各国カラーへ反転する */ position: relative; /* しっぽ(::before/::after)の配置基準 */ --bubble-bg: color-mix(in srgb, var(--c) 10%, #fff); background-color: #fff; /* color-mix 非対応ブラウザ向けフォールバック */ background-color: var(--bubble-bg); color: #333; border: 1px solid var(--c); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* 吹き出しのしっぽ(下向き)=ピンを指す。 枠線色(::before)+背景色(::after)の二重三角でボーダー付き吹き出しを再現し、 本体がピンに被らないよう下方向に伸ばす */ div.area_speech_bubble::before, div.area_speech_bubble::after { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border-style: solid; pointer-events: none; } div.area_speech_bubble::before { border-width: 8px 7px 0 7px; border-color: var(--c) transparent transparent transparent; transform: translateX(-50%); } div.area_speech_bubble::after { border-width: 7px 6px 0 6px; border-color: var(--bubble-bg) transparent transparent transparent; transform: translateX(-50%); } /* 吹き出し(国名)は常時表示する。以前はホバー時のみ表示していた */ div#ukr_speech_bubble, div#rus_speech_bubble, div#chn_speech_bubble, div#twn_speech_bubble, div#kor_speech_bubble, div#vnm_speech_bubble, div#tha_speech_bubble, div#phl_speech_bubble, div#idn_speech_bubble, div#usa_speech_bubble, div#jpn_speech_bubble { display: block; } div.area_speech_bubble p{ margin: 0px auto; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; } div.area_speech_bubble p::before { content: ""; display: inline-block; background-size: 14px auto !important; margin-right: 4px; height: 16px; width: 16px; vertical-align: middle; background-color: #FFF !important; } :root { --ukr_speech-color_01: #0097e6; --ukr_speech-color_02: #fbc531; --rus_speech-color:#40739e; --chn_speech-color:#ff3838; --twn_speech-color:#ff6491; --kor_speech-color:#dd2644; --vnm_speech-color:#ffd32a; --tha_speech-color:#303952; --phl_speech-color:#0038A8; --idn_speech-color:#e84118; --usa_speech-color:#c0392b; --jpn_speech-color:#ea2027; --pnPhoto_medium_block_widht: 136px; --pnPhoto_large_block_widht: 319px; } /* 各エリアのラッパー:吹き出し+ピン(area_ping)を縦に並べ、 ピン先端が地図(map_04)の青丸(該当エリア)に重なるように配置する。 transform:translate(-50%,-100%) で「ラッパー下端中央=青丸位置」に合わせる。 */ /* #chooseCountry div の既定(inline-block/幅指定/margin)を上書きするため #chooseCountry 配下にスコープして詳細度を上げる */ #chooseCountry .UKR_wapper, #chooseCountry .RUS_wapper, #chooseCountry .CHN_wapper, #chooseCountry .TWN_wapper, #chooseCountry .KOR_wapper, #chooseCountry .VNM_wapper, #chooseCountry .THA_wapper, #chooseCountry .PHL_wapper, #chooseCountry .IDN_wapper, #chooseCountry .USA_wapper, #chooseCountry .JPN_wapper { position: absolute; display: flex; flex-direction: column; align-items: center; width: max-content; margin: 0; padding: 0; transform: translate(-50%, -100%); z-index: 2; pointer-events: none; } #chooseCountry .JPN_wapper, #chooseCountry .PHL_wapper { flex-direction: row-reverse; } #chooseCountry .UKR_wapper, #chooseCountry .CHN_wapper, #chooseCountry .THA_wapper, #chooseCountry .VNM_wapper, #chooseCountry .TWN_wapper { flex-direction: row; } #chooseCountry .IDN_wapper { flex-direction: column-reverse; } /* 各エリアの青丸(ピン先端)位置 */ .UKR_wapper { left: 142px; top: 179px; } .RUS_wapper { left: 215px; top: 149px; } .CHN_wapper { left: 369px; top: 209px; } .KOR_wapper { left: 435px; top: 216px; } .JPN_wapper { left: 505px; top: 226px; } .TWN_wapper { left: 407px; top: 253px; } .VNM_wapper { left: 352px; top: 270px; } .THA_wapper { left: 339px; top: 300px; } .PHL_wapper { left: 480px; top: 287px; } .IDN_wapper { left: 396px; top: 355px; } .USA_wapper { left: 846px; top: 217px; } /* 吹き出しの下に付くピン画像(先端が青丸を指す)。 吹き出しのしっぽ(約8px)の分だけ余白を空け、吹き出し本体がピンに被らないようにする */ .area_ping { display: block; width: 15px; height: auto; margin: 9px; } /* 各エリアの吹き出し(位置はラッパーが管理)。 --c に各国カラーを持たせ、通常時の枠線色とアクティブ時の背景色に使う。 ベトナムのみアクティブ時の文字色を濃色(--ac)にする(黄背景に白だと読めないため)。 */ #ukr_speech_bubble { --c: var(--ukr_speech-color_01); } #ukr_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Ukraine.svg") no-repeat scroll center center transparent; } #rus_speech_bubble { --c: var(--rus_speech-color); } #rus_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Russia.svg") no-repeat scroll center center transparent; } #chn_speech_bubble { --c: var(--chn_speech-color); } #chn_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_China.gif") no-repeat scroll center center transparent; } #twn_speech_bubble { position: relative; top:-13px; --c: var(--twn_speech-color); } #twn_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Taiwan.gif") no-repeat scroll center center transparent; } #kor_speech_bubble { --c: var(--kor_speech-color); } #kor_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_South_Korea.gif") no-repeat scroll center center transparent; } #vnm_speech_bubble { --c: var(--vnm_speech-color); --ac: #333; } #vnm_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Vietnam.gif") no-repeat scroll center center transparent; } #tha_speech_bubble { position: relative; top: 10px; left: 5px; --c: var(--tha_speech-color); } #tha_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Thailand.gif") no-repeat scroll center center transparent; } #phl_speech_bubble { --c: var(--phl_speech-color); } #phl_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Philippines.gif") no-repeat scroll center center transparent; } #idn_speech_bubble { --c: var(--idn_speech-color); } #idn_speech_bubble + img.area_ping {margin: 14px;} #idn_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Indonesia.gif") no-repeat scroll center center transparent; } #usa_speech_bubble { --c: var(--usa_speech-color); } #usa_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_USA.gif") no-repeat scroll center center transparent; } #jpn_speech_bubble { --c: var(--jpn_speech-color); } #jpn_speech_bubble p::before { content: ""; background: url("https://img2.bakusai.com/p/img/clock/flag_of_Japan.gif") no-repeat scroll center center transparent; } /* マップのハイライト(ホバー/アクティブ)に連動して吹き出しを反転: 背景=各国カラー・文字=白(ベトナムのみ濃色)。 地図エリアのホバー(JSで map_hover に is-active 付与) と 国カードのホバー(.XXX a:hover) の両方に対応(いずれも吹き出しは同じ .XXX 内の兄弟ラッパー内)。 */ #chooseCountry img.map_hover.is-active ~ [class$="_wapper"] .area_speech_bubble, #chooseCountry a:hover ~ [class$="_wapper"] .area_speech_bubble { --bubble-bg: var(--c); /* しっぽ(::after)も連動して各国カラーに */ background-color: var(--c); color: var(--ac, #fff); border-color: var(--c); } /* 吹き出しをリンク化。 ※ #chooseCountry .XXX a(国カードの写真背景・height:120px 等)が新リンクにも当たるため、 詳細度を上げて打ち消す([class$="_wapper"] を噛ませて (1,2,0) にし、(1,1,1) のカード規則に勝つ)。 ラッパーが pointer-events:none でもリンクだけは操作可能にする。 */ #chooseCountry [class$="_wapper"] .area_bubble_link { display: block; width: auto; height: auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; text-decoration: none; color: inherit; position: static; pointer-events: auto; } #chooseCountry [class$="_wapper"] .area_bubble_link:hover { background: none; /* カードの a:hover 背景色を無効化 */ } #chooseCountry [class$="_wapper"] .area_bubble_link .area_speech_bubble { pointer-events: auto; cursor: pointer; } /* 吹き出しホバー時:その国のハイライト画像を点灯(カード/エリアのホバーと同じ挙動)。 ハイライト画像は吹き出しより前(DOM上)にあるため兄弟結合子では届かず :has() で親側から指定する */ #chooseCountry > div:has(.area_bubble_link:hover) > .map_hover { filter: none; opacity: 1; } /* 吹き出しホバー時:吹き出しを各国カラーに反転 */ #chooseCountry .area_bubble_link:hover .area_speech_bubble { --bubble-bg: var(--c); background-color: var(--c); color: var(--ac, #fff); border-color: var(--c); } /* 吹き出しの尻尾(::before/::after)の向きを個別指定(ピンの方向へ向ける)。 既定は下向き。枠線色(::before)+背景色(::after)の二重三角を方向ごとに作り直す。 */ /* 右向き(ウクライナ・中国・タイ・ベトナム・台湾)=吹き出しの右辺から右へ */ #ukr_speech_bubble::before, #ukr_speech_bubble::after, #chn_speech_bubble::before, #chn_speech_bubble::after, #tha_speech_bubble::before, #tha_speech_bubble::after, #vnm_speech_bubble::before, #vnm_speech_bubble::after, #twn_speech_bubble::before, #twn_speech_bubble::after { top: 50%; left: 100%; right: auto; bottom: auto; transform: translateY(-50%); } #ukr_speech_bubble::before, #chn_speech_bubble::before, #tha_speech_bubble::before, #vnm_speech_bubble::before { border-width: 7px 0 7px 8px; border-color: transparent transparent transparent var(--c); } #twn_speech_bubble::before { border-width: 17px 0 0px 8px; border-color: transparent transparent transparent var(--c); } #ukr_speech_bubble::after, #chn_speech_bubble::after, #tha_speech_bubble::after, #vnm_speech_bubble::after { border-width: 6px 0 6px 7px; border-color: transparent transparent transparent var(--bubble-bg); } #twn_speech_bubble::after { border-width: 16px 0px 0px 7px; border-color: transparent transparent transparent var(--bubble-bg); } /* 左向き(日本・フィリピン)=吹き出しの左辺から左へ */ #jpn_speech_bubble::before, #jpn_speech_bubble::after, #phl_speech_bubble::before, #phl_speech_bubble::after { top: 50%; left: auto; right: 100%; bottom: auto; transform: translateY(-50%); } #jpn_speech_bubble::before, #phl_speech_bubble::before { border-width: 7px 8px 7px 0; border-color: transparent var(--c) transparent transparent; } #jpn_speech_bubble::after, #phl_speech_bubble::after { border-width: 6px 7px 6px 0; border-color: transparent var(--bubble-bg) transparent transparent; } /* 上向き(インドネシア)=吹き出しの上辺から上へ */ #idn_speech_bubble::before, #idn_speech_bubble::after { top: auto; bottom: 100%; left: 50%; right: auto; transform: translateX(-50%); } #idn_speech_bubble::before { border-width: 0 7px 8px 7px; border-color: transparent transparent var(--c) transparent; } #idn_speech_bubble::after { border-width: 0 6px 7px 6px; border-color: transparent transparent var(--bubble-bg) transparent; } /* mac:フォント差で国旗が下にずれる分だけ縦位置を補正する */ .mac { div.area_speech_bubble p::before { position: relative; } } /* 海外の時間表示 */ #Overseas_time{ position: absolute; right: 170px; font-size: 11px; } .Overseas_time_margin{ margin-left: 2px; } /* TV実況中継 */ .channelNo { color: #000; font-size: 17px; font-weight: bold; margin: 0 -1px; } .channelTx { color: #000; font-size: 11px; margin-left: 1px; } .channelName { font-size: 12px; color: #333; margin-left: 1px; } .tvProgTitle { line-height: 12px; margin-top: 0px; width: 100%; } .thrTvspacer { line-height: 1px; } #newsContainer .body a .thrTitle.tvProgTitle.thrTvspacer { margin: 0 0 0 10px; padding-top: 8px; } #newsContainer .body a .channelfa { vertical-align: 3px; } .notSelect { display: none !important; } .tvLivetab, .area-tab { border-top: solid 1px #cae3f7; padding: 0 9px; background: #cae3f7; color: #0d507e !important; cursor: pointer; position: relative; display: inline-block; } .tvtabStyle, .area-tab-list-Style { padding: 0 9px; background: #F6F6F6; font-weight: bold; cursor: pointer; cursor: default; line-height: 24px; margin-top: 3px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .tvLivetab:last-child, .area-tab:last-child { padding: 0 11px; height: 26px; } .tvtabStyle:last-child, .area-tab-list-Style:last-child { border-bottom: solid 3px #F6F6F6; padding: 0 11px; background: #F6F6F6; height: 28px; line-height: 24px; border-right: 2px solid #cae3f7; } .area-tab-list-Style:last-child { height: 29px; } .tvLivetab_r-corners_left, .tvLivetab_r-corners_right, .area-tab_r-corners_left, .area-tab_r-corners_right { display: none; } .tvLivetab.tabSelected .tvLivetab_r-corners_left, .tvLivetab.tabSelected .tvLivetab_r-corners_right, .area-tab.tabSelected .area-tab_r-corners_left, .area-tab.tabSelected .area-tab_r-corners_right { display: block; background: #F6F6F6; width: 10px; height: 9px; position: absolute; bottom: 0; z-index: 1; } .tvLivetab.tabSelected .tvLivetab_r-corners_left, .area-tab.tabSelected .area-tab_r-corners_left { left: -10px; } .tvLivetab.tabSelected .tvLivetab_r-corners_right, .area-tab.tabSelected .area-tab_r-corners_right { right: -10px; } .tvLivetab.tabSelected .tvLivetab_r-corners_left::before, .tvLivetab.tabSelected .tvLivetab_r-corners_right::before, .area-tab.tabSelected .area-tab_r-corners_left::before, .area-tab.tabSelected .area-tab_r-corners_right::before { content: ""; width: 10px; height: 9px; position: absolute; bottom: 0px; left: 0px; } .tvLivetab.tabSelected .tvLivetab_r-corners_left::before, .area-tab.tabSelected .area-tab_r-corners_left::before { border-bottom-right-radius: 8px; } .tvLivetab.tabSelected .tvLivetab_r-corners_right::before, .area-tab.tabSelected .area-tab_r-corners_right::before { border-bottom-left-radius: 8px; } .tvLivetab.tabSelected .tvLivetab_r-corners_left::before, .tvLivetab.tabSelected .tvLivetab_r-corners_right::before, .area-tab.tabSelected .area-tab_r-corners_left::before, .area-tab.tabSelected .area-tab_r-corners_right::before { background: #cae3f7; } .tabSelected { display: block; } .tvLivetab_line, .area-tab-list_line { display: none; width: 1px; height: 18px; background-color: #fff; position: absolute; top: 8px; } .tvLivetab:last-child .tvLivetab_r-corners_right, .area-tab:last-child .area-tab_r-corners_right { display: none; } /* 20250421_スポーツ実況中継追加に伴うピックアップニュースの改修 */ div.pickupContents_tab { display: inline-flex; align-items: flex-start; gap: 10px; padding: 0px 5px 0px 0px; font-feature-settings: "palt" 1; } div.pickupContents_tab ul { width: calc(100% - 478px); flex-shrink: 0; } div.pnPhoto_large_block { display: inline-block; position: relative; } div.pickupContents_tab div.pnPhoto_medium_block { margin: 5px 0px 5px 3px; display: inline-flex; width: var(--pnPhoto_medium_block_widht); gap: 8px; flex-wrap: wrap; position: relative; } div.pickupContents_tab div.pnPhoto_medium_block div.pnPhoto { width: var(--pnPhoto_medium_block_widht); margin: 0px; max-height: 190px; } div.pnPhoto_medium_block div.pnPhoto div.pnPhotoInner { height: 120px; } div.pickupContents_tab div.pnPhoto_medium_block .pnPhoto .pnPhotoInner a p { width: var(--pnPhoto_medium_block_widht) !important; padding-right: 8px; box-sizing: border-box; } div.pickupContents_tab div.pnPhoto_medium_block .pnPhoto .pnPhotoImg{ width: var(--pnPhoto_medium_block_widht); height: 130px; } div.pickupContents_tab div.pnPhoto_large_block { display: inline-flex; margin: 5px 0px; display: inline-flex; width: var(--pnPhoto_large_block_widht); } div.pickupContents_tab div.pnPhoto_large_block div.pnPhoto { width: var(--pnPhoto_large_block_widht); margin: 0px; max-height: 335px; } div.pickupContents_tab div.pnPhoto_large_block .pnPhoto .pnPhotoInner a p { width: var(--pnPhoto_large_block_widht) !important; } div.pickupContents_tab div.pnPhoto_large_block .pnPhoto .pnPhotoImg{ width: var(--pnPhoto_large_block_widht); height: calc(var(--pnPhoto_large_block_widht) - 4px); } div.pickupContents_tab div.pnPhoto_medium_block .pnPhoto .pnPhotoInner a p, div.pickupContents_tab div.pnPhoto_large_block .pnPhoto .pnPhotoInner a p { text-align: justify; margin: 6px auto 0px; position: relative; overflow: hidden; display: -webkit-box !important; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; height: 36px !important; line-height: 18px; } /* TV実況中継の各局ファビコン表示 */ div.TV_favicon_wapper { display: inline-flex; align-items: center; width: 70px; height: 100%; flex-shrink: 0; padding: 0px 0px 0px 0px !important; } .mac { div.TV_favicon_wapper { width: 75px; } } ul#TV_favicon_ul div.TV_favicon_wapper a.TV_favicon { height: 39px; width: 100% !important; box-sizing: border-box; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; visibility: visible; line-height: 17px; font-feature-settings: "palt" on; } div.TV_favicon_box img { width: 20px; height: 20px; vertical-align: top !important; } .channelName_f { font-size: 11px; color: #333; line-height: 13px; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .channelName_f::after { content:"\f08e" ; font-family:fontawesome; display: inline; font-size: 9px; margin-left: 2px; } div.TV_favicon_wapper a { padding: 0px 0px 0px 5px !important; } a.TV_favicon .channelNo { padding-left: 4px; } div#tvLive_wapper ul.tvLivecont li.body { width: 100%; display: inline-flex; align-items: center; } .TV_favicon_li { position: relative; } ul#TV_favicon_ul li.TV_favicon_li a.TV_thrTitle, ul#TV_favicon_ul li.TV_favicon_li div.NoTV_favicon_wapper + a.TV_thrTitle { padding: 0px; align-items: center ; display: inline-flex !important; height: 41px; margin: 0px 4px 0px 4px; width: 100%; overflow: hidden; } ul#TV_favicon_ul a.TV_thrTitle .tvProgTitle { margin: 0px 0px 0px 1px !important; } ul#TV_favicon_ul li.TV_favicon_li a.TV_thrTitle { width: 100%; overflow: hidden; } /* ul#TV_favicon_ul li.TV_favicon_li div.NoTV_favicon_wapper + a { width: calc(100% - 36px); } */ div.tvCannelLatetOn { width: 100%; display: inline-flex; align-items: baseline; max-width: 444px; } /* ABテスト レスあり */ img.latestResImg { width: 16px; } .latestResDisplayPc { margin: 0 0 0 21px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: nowrap; display: inline-block; color: #333; } .latestResONair { margin: 0 0 0 10px; position: relative; } .latestResText { font-size: 12px; color: #333; margin: 0 7px 0 3px; } .latestResList { width: 95%; line-height: 28px; } .onAirIcon2 img { top: -4px; } #newsContainer .body a .lastUpdate2 { position: absolute; top: 3px; height: 15px; line-height: 15px; } span.channelfa { position: relative; top: 13px; left: 5px; } .tvProgTitleName { line-height: 14px; height: 14px; width: calc(100% - 65px); overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; overflow-wrap: normal; white-space: normal; font-feature-settings: "palt" 1; margin-bottom: 3px; } #newsContainer .body a .thrTitle.tvProgTitle.thrTvspacer.thrTitle2 { margin-top: 7px; } /* キャンペーンバナー */ .campaign_link_wrap img { width: 100%; margin: 10px auto; } /* 美しい風景掲示板エリアトップ */ img.beautifulph_img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .beautifulph_wrapper { text-align: right; background: #F6F6F6; } div#postRankInlineWrap { font-family: "Meiryo mod 12pt AA","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Verdana,"MS Pゴシック",sans-serif; width: 100%; height: 54px; border-radius: 5px; padding: 8px 0 10px; margin: 0 auto; text-align: center; } div#postRankInlineWrap { display: flex; letter-spacing: -0.5px; text-align: center; white-space: normal; -webkit-align-items: center; align-items: baseline; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: row; padding: 12px 0 0; } div#totalPosts { align-items: center; } .totalPosts_wrap.totalPosts_inline_wrap { align-items: end; } span.ichioku_over.ichioku_over_inline { margin: 0px; } div#postsRank_inline { width: max-content; display: flex; justify-content: space-between; margin: 0 0 0 28px; vertical-align: middle; line-height: 16px; white-space: nowrap; } div#totalPosts.totalPosts_inline { margin: 0 25px 13px 0px; } div#areaPosts.areaPostsInline { margin: 0 0 0 2px; } .accessRank_wrap.accessRank_wrap_inline { margin-top: 7px; } .oku_wrap.rankCount_wrap_inline { position: relative; top: -12px; } .oku_wrap.oku_wrap_inline { position: relative; top: -1px; } .forecast_update.forecast_update_inline { margin-bottom: 10px; } .areaIndex_top_container.areaIndex_top_container_inline { width: 100% !IMPORTANT; } /* New地域インデックス 爆サイホワイトロゴ */ .areaIndexlogoWh_back_lower { width: inherit; position: absolute; left: 0; z-index: 1; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5)); bottom: -1px; height: 77px; } div.areaIndexlogoCh[class*="areaCode"] { text-align: center; position: absolute; top: 8px; left: 6px; } .areaIndexlogoCh[class*="areaCode"] img { position: absolute; width: 100px; top:0px; left: 0px; z-index: 2; } div.areaIndexlogoCh[class*="areaCode"] a { } div.areaIndexlogoCh[class*="areaCode"] a:hover { text-decoration: none; } div.areaIndexlogoCh[class*="areaCode"] a::after { color: #FFF; content: ""; font-size: 11px; line-height: 24px; height: 24px; left: 3px; position: absolute; top: 33px; width: 97px; z-index: 100; } .areaIndexlogoCh img { display: block; float: left; margin-bottom: 8px; } div.areaIndexlogoCh.areaCode1 a::after { /* 北海道版 */ content: "\5317\6D77\9053\7248"; } div.areaIndexlogoCh.areaCode2 a::after { /* 南東北版 */ content: "\5357\6771\5317\7248"; } div.areaIndexlogoCh.areaCode3 a::after { /* 東京版 */ content: "\6771\4eac\7248"; } div.areaIndexlogoCh.areaCode4 a::after { /* 甲信越版 */ content: "\7532\4FE1\8D8A\7248"; } div.areaIndexlogoCh.areaCode5 a::after { /* 愛知版 */ content: "\611B\77E5\7248"; } div.areaIndexlogoCh.areaCode6 a::after { /* 北陸版 */ content: "\5317\9678\7248"; } div.areaIndexlogoCh.areaCode7 a::after { /* 大阪版 */ content: "\5927\962a\7248"; } div.areaIndexlogoCh.areaCode8 a::after { /* 山陽版 */ content: "\5C71\967D\7248"; } div.areaIndexlogoCh.areaCode9 a::after { /* 四国版 */ content: "\56DB\56FD\7248"; } div.areaIndexlogoCh.areaCode10 a::after { /* 福岡版 */ content: "\798F\5CA1\7248"; } div.areaIndexlogoCh.areaCode11 a::after { /* 沖縄版 */ content: "\6C96\7E04\7248"; } div.areaIndexlogoCh.areaCode12 a::after { /* 山陰版 */ content: "\5C71\9670\7248"; } div.areaIndexlogoCh.areaCode14 a::after { /* 北東北版 */ content: "\5317\6771\5317\7248"; } div.areaIndexlogoCh.areaCode15 a::after { /* 北関東版 */ content: "\5317\95A2\6771\7248"; } div.areaIndexlogoCh.areaCode16 a::after { /* 南部九州版 */ content: "\5357\90E8\4E5D\5DDE\7248"; } div.areaIndexlogoCh.areaCode17 a::after { /* 南関東版 */ content: "\5357\95A2\6771\7248"; } div.areaIndexlogoCh.areaCode18 a::after { /* 関西版 */ content: "\95A2\897F\7248"; } div.areaIndexlogoCh.areaCode19 a::after { /* 東海版 */ content: "\6771\6D77\7248"; } div.areaIndexlogoCh.areaCode20 a::after { /* 北部九州版 */ content: "\5317\90E8\4E5D\5DDE\7248"; } div.areaIndexlogoCh.areaCode13_1 a::after { /* China Ver. */ content: "\43\68\69\6E\61\20\56\65\72"; } div.areaIndexlogoCh.areaCode13_10 a::after { /* Taiwan Ver. */ content: "Taiwan Ver"; } div.areaIndexlogoCh.areaCode13_2 a::after { /* Thai Ver. */ content: "\54\68\61\69\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_3 a::after { /* Korea Ver. */ content: "\4B\6F\72\65\61\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_4 a::after { /* Philippines Ver. */ content: "\50\68\69\6C\69\70\70\69\6E\65\73\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_5 a::after { /* Vietnam Ver. */ content: "\56\69\65\74\6E\61\6D\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_6 a::after { /* America Ver. */ content: "\41\6D\65\72\69\63\61\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_7 a::after { /* Indonesia Ver. */ content: "\49\6E\64\6F\6E\61\73\69\61\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_8 a::after { /* Russia Ver. */ content: "\52\75\73\73\69\61\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_9 a::after { /* Ukraine Ver. */ content: "\55\6B\72\61\69\6E\65\20\56\65\72\2E"; } div.areaIndexlogoCh.areaCode13_8 a::after, div.areaIndexlogoCh.areaCode13_9 a::after { /* Russia Ver. Ukraine Ver. */ top: -3px; } .areaIndexlogoCh { position: relative; } #areatop_main_fv { margin: 10px auto 0px; display: flex; gap:16px; justify-content: center; } .areaIndex_thrname { position: absolute; color: #fff; left: 15px; bottom: 13px; text-shadow: 0 0 5px #000; font-size: 13px; letter-spacing: 0.5px; font-feature-settings: "palt" on; } .areaIndex_thrname .location_name { display: inline; } .areaIndex_thrname .location_name::before { content:"/"; margin: 0px 4px; } a.areaIndex_landscape_btn { position: absolute; color: #fff; right: 9px; bottom: 9px; text-align: left; background-color: rgba(0,0,0,0.2); border: 1px solid #ccc; border-radius: 6px; cursor: pointer; font-size: 11px; padding: 5px 7px; } a.areaIndex_landscape_btn:hover{ color: #000 !important; background-color: #FFF; border: 1px solid #FFF; text-decoration: none !important; cursor: pointer; } a.areaIndex_landscape_btn i.fa.fa-angle-right{ margin-left: 4px; vertical-align: 0.5px; } /***** ** エリアTOP 風景画像下の画像リスト A案 *****/ div.beautifulph_box_over_area { display: inline-flex; gap: 16px; justify-content: center; align-items: center; } .beautifulph_img_main { position: relative; background-color: #dbdbdb; width: 576px; height: 432px; } div.list-of-images_from_same-area_over_area { height: 100%; } ul.list-of-images_wapper_jp, ul.list-of-images_wapper_over_area { width: 100%; height: 100%; display: flex; align-items: center; list-style-type: none; padding: 0px; } ul.list-of-images_wapper_jp { margin: 4px auto 0px; justify-content: space-between; } ul.list-of-images_wapper_over_area { flex-direction: column; margin: 0px auto; justify-content: center; gap: 4px; } ul.list-of-images_wapper_jp li, ul.list-of-images_wapper_over_area li { overflow: hidden; display: block; } ul.list-of-images_wapper_jp li { width: 112px; height: 84px; } ul.list-of-images_wapper_over_area li.list-of-images_box { width: 108px; height: 81px; } ul.list-of-images_wapper_jp li img, ul.list-of-images_wapper_over_area li img { width: 100%; height: 100%; vertical-align: top; object-fit: cover; object-position: center; transform: scale(1); transition: all ease-out .3s; } li.list-of-images_box { display: block; height: inherit; width: inherit; position: relative; transition: all ease-out .3s; cursor: pointer; } li.list-of-images_box:hover::after { content: ""; background-color: rgba(255, 255, 255, 0.25); width: 100%; height: 100%; position: absolute; inset: 0; transition: all ease-out .3s; } li.list-of-images_box:hover>img { transform: scale(1.1); } /***** ** エリアTOP 天気予報動画改修 A案 *****/ div.weather_partner_content_wapper_A { display: flex; flex-direction: column; width: 274px; height: 520px; } div.weather_partner_content_wapper_A div.weather_partner_content_wapper { display: flex; border-radius: 1px; flex-direction: column; border: 1px solid #d9d9d9; background-color: #FFF; box-shadow: 0 1px 0 #EAEAEA; box-sizing: border-box; width: 274px; height: 260px; text-align: left; } div.weather_partner_content_wapper_A div.weather_mov_wapper { padding: 8px 8px 0px; display: inline-flex; justify-content: center; flex-direction: column; height: 100%; } div.weather_partner_content_wapper_A p.weather_thr_headline { max-height: 32px; -webkit-line-clamp: 2; margin: 3px 0px 2px; } div.weather_partner_content_wapper_A div.main_weather_info_wrapper > span { overflow: hidden; display: -webkit-box !important; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; max-height: 20px; -webkit-line-clamp: 1; } /* new 天気予報 */ .new_forecast_map_wrap { background: #F6F6F6; display: flex; justify-content: center; margin: 0 auto 30px; padding: 12px 0 15px; align-items: center; } .new_forecast[class*="areaCode"] img { height: 95px; max-width: 143px; } .new_forecast[class*="areaCode"] { align-items: center; display: grid; margin: 0 6px 0 0; } .new_forecast_place_wrap { display: flex; gap: 6px; margin:0px 3px; } .new_forecast_date_wrap { display: flex; justify-content: center; padding: 3px 0 0; } .new_forecast_map { text-align: center; background: #fff; border: solid 1px #e1e1e1; width: 106px; margin: 0 3px; border-radius: 6px; height: 82px; } .new_forecast_map_overseas{ text-align: center; background: #fff; border: solid 1px #e1e1e1; width: 116px; margin: 0 3px; border-radius: 6px; height: 82px; } .new_forecast_date_outer { width: 100%; padding: 0 3px; } div.new_forecast_area_place { background: #D9F0FB; } p.new_forecast_area { padding: 2px 0; margin: 0; font-weight: normal; font-size: 11.5px; line-height: 12px; } p.forecast_area_over_text { transform: scale(0.9, 1); letter-spacing: -1px; } p.new_forecast_datetime { margin: 0; font-size: 10px; } p.new_forecast_icon { margin: 1px 0 0; } p.new_forecast_temp { margin: 3px 0 0; white-space: nowrap; letter-spacing: -0.2px; display: inline-block; } .new_forecast_date_outer:first-child { border-right: solid 0.5px #e1e1e1; } .forecast_dateandtime_wrapper { display: flex; background: #F6F6F6; justify-content: space-between; border-bottom: 3px solid #0d507e; font-size: 14px; padding:0px 6px 4px; } .forecast_Today_dateandtime { display: flex; align-items: center; gap: 6px; } p.forecast_update_dateandtime { margin: 0px; font-size: 14px; } span.forecast_icon_calendar { color: #fff; font-size: 14px; position: relative; background: #0d507e; padding: 4px; width: 22px; height: 22px; box-sizing: border-box; } span.forecast_icon_calendar img { width: 100%; height: 100%; object-fit: contain; vertical-align: top; } p.new_forecast_icon img { height: 34px; width: auto; } .mac { /* Mac OSのみ */ p.new_forecast_datetime { margin: -2px 0 0; } p.new_forecast_icon { margin: -2px 0 -5px; } p.new_forecast_temp { margin: 0; } } /* safari */ _:lang(x)+_:-webkit-full-screen-document,p.new_forecast_datetime { margin: -2px 0 0; } _:lang(x)+_:-webkit-full-screen-document,p.new_forecast_icon { margin: -2px 0 -5px; } _:lang(x)+_:-webkit-full-screen-document,p.new_forecast_temp { margin: 0; } /* firefox */ _:lang(x)::-moz-placeholder,p.new_forecast_temp { margin: 0px 0 0; } /* お知らせoshirase.htmlが表示されたとき、.new_forecast_map_wrapのmargin変更 */ .new_forecast_map_wrap:has(+.center #infoAlert) { margin: 0 auto 1px; } /* WANTED(沖縄のみ・inc_forecast.html) */ /* 天気予報(左)とWANTED(右)の横並び */ .forecast_wanted_row { display: flex; gap: 20px; margin: 0 auto 30px; background: #F6F6F6; /* 元: .new_forecast_map_wrap / .forecast_dateandtime_wrapper と同色 */ } /* 左は見出し1行分の幅、右(WANTED)は残り幅 */ .forecast_wanted_col { flex: 0 0 auto; } .forecast_wanted_row .forecast_dateandtime_wrapper { gap: 12px; white-space: nowrap; } .wanted_wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; contain: size; /* 行の高さは天気予報側で決め、WANTEDはその高さに合わせる */ } .forecast_wanted_row .new_forecast_map_wrap { margin: 0; } /* 天気ボックスをカラム幅いっぱいに広げる */ .forecast_wanted_row .new_forecast_place_wrap, .forecast_wanted_row div.forecast_prefecture_wrap { flex: 1; } .forecast_wanted_row div.forecast_prefecture { flex: 1; width: auto; } span.forecast_icon_calendar--fa { display: flex; align-items: center; justify-content: center; padding: 0; font-size: 13px; } .wanted_content { position: relative; /* .wanted_link の当たり判定の基準 */ flex: 1; min-height: 0; display: flex; flex-direction: row-reverse; /* 左にタイトル+本文、右に画像 */ gap: 12px; padding: 12px 6px 15px; /* .new_forecast_map_wrap の上下余白に揃える */ } /* 画像は天気ボックスの高さいっぱいに表示 */ .wanted_figure { flex: 0 0 80px; /* 画像比率 282:400 で高さ約113px(天気ボックスの高さ)になる幅 */ display: flex; margin: 0; } .wanted_figure img { display: block; width: 100%; height: 100%; object-fit: cover; } /* タイトル+本文は行単位で収まる分だけ表示し、はみ出した分は隠す(3点リーダーは出さない)。 行の高さを 20px に揃え、6行分(20px × 6)から6行目の下の余白 2px を削った 118px を上限にしている(7行目は見せない)。 */ .wanted_article { flex: 1; min-width: 0; } .wanted_article_inner { max-height: 118px; overflow: hidden; line-height: 20px; color: #000; } p.wanted_title { margin: 0; font-size: 15px; font-weight: normal; } /* 行方不明などのテキストアイコン */ span.wanted_label { display: inline-block; margin: 0 6px 0 0; padding: 0 4px; border: 1px solid #F60; color: #F60; font-size: 11px; font-weight: 400; line-height: 16px; vertical-align: 2px; } /* 懸賞金のテキストアイコン(指名手配などとは別扱い)。文字は 10px、金額の数字(.wanted_label_num)だけ 13px で目立たせる */ span.wanted_label.wanted_label--reward { font-size: 10px; } span.wanted_label_num { font-size: 13px; } p.wanted_text { margin: 0; font-size: 13px; } /* タイトルのリンクを画像・タイトル・本文の枠全体に広げる(本文内のtelリンクと入れ子にできないため) */ a.wanted_link { color: inherit; text-decoration: none; } a.wanted_link::after { content: ""; position: absolute; inset: 0; } /* telリンクは枠全体リンクより前面に出して押せるようにする */ p.wanted_text a { position: relative; z-index: 1; } /* ピックアップニュースに海外アイコン */ .world_news_areamain { display: inline; width: auto; padding: 2px 0; background: #FFFFFF; border-radius: 2px; box-shadow: 1px 1px 0px 0 #ececec, 0px 0px 1px 0 #aaa; font-size: 10px; font-weight: normal; color: red; margin-right: 1px; vertical-align: 1px; } img.emoji_flags_areamain { width: 10px; margin: 0 2px 0 0; vertical-align: -4px; } /* 国旗は最大3つまで表示(4つ目以降は非表示)。国旗タグは RxbdUtilModel::getFlagTag が国ごとに span.world_news_tag を並べて出力する */ .world_news_areamain .world_news_tag:nth-child(n+4) { display: none; } /* エリアTOPに天気動画追加 ※日本国内のみ */ div#weather_partner_content_wapper { display: flex; border-radius: 1px; flex-direction: column; border: 1px solid #d9d9d9; background-color: #FFF; box-shadow: 0 1px 0 #EAEAEA; box-sizing: border-box; width: 274px; height: 359px; text-align: left; } div.weather_partner_content_box { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; } div.weather_title_box { display: flex; align-items: center; height: 32px; width: 100%; padding-left: 3px; padding-right: 3px; box-sizing: border-box; background-color: #dbdbdb; flex-shrink: 0; position: relative; font-feature-settings: "palt" 1; } div.weather_title_box .weather_title { flex-shrink: 0; margin-right: 2px; display: flex; align-items: center; gap: 4px; } div.weather_title_icon { width: 19px; height: 19px; } div.weather_title_icon img{ width: 100%; height: 100%; vertical-align: top; object-fit: contain; } div.weather_title_box:has(img#Morning_icon) { background-image: linear-gradient(120deg, #27da8a 20%, #0d86ff); } div.weather_title_box:has(img#Night_icon) { background-image: linear-gradient(120deg, #6b6bd6 20%, #8b39be); } .weather_title_logo { color: #fff; } .weather_title_eight { font-size: 23px; position: relative; bottom: -2px; margin-left: 2px; } .shootspot { font-size: 12px; line-height: 18px; color: #666; font-family: "MS Pゴシック", "ヒラギノ角ゴ ProN W3", sans-serif; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; overflow-wrap: normal; font-feature-settings: "palt" 1; width: 100%; display: -webkit-box; position: relative; top: 2px; text-align: right; } div.weather_mov_wapper { padding: 8px; margin: auto; width: 100%; box-sizing: border-box; } /* エリアTOP 天気動画表示テスト */ div.weather_mov_box { max-width: 256px; height: 144px; position: relative; background-color: #dbdbdb; } video.weather_mov { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ライトボックスのスタイル */ .weather_mov_litebox { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; /* ウィンドウ幅の80% */ height: 80vh; /* ウィンドウ高さの80% */ background-color: rgba(0, 0, 0, 0.9); z-index: 10001; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .weather_mov_litebox video { width: 100%; height: 100%; object-fit: contain; } .open-litebox { position: absolute; right: 5px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; padding: 5px 10px; cursor: pointer; } /* ボタンの初期状態でフェードアウトさせる */ .open-litebox { opacity: 1; /* 初期状態は完全に表示 */ transition: opacity 1s ease; } /* フェードアウトするためにクラスを追加 */ .fade-out { opacity: 0; } /* .weather_mov_boxにマウスオーバーしたときにボタンを表示する */ .weather_mov_box:hover .open-litebox { opacity: 1; /* マウスオーバー時は完全に表示 */ } .js-weather-play-button { position: absolute; top: 50%; left: 50%; font-size: 10px; color: #FFF; -webkit-transform: translate(-50%, -50%); cursor: pointer; z-index: 1; width: 34px; height: 34px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50px; border: 0.06666em solid rgb(255, 255, 255); background-color: rgba(115, 133, 159, 0.5); transition: 0.4s; } .js-weather-play-button:hover { background-color: rgba(43, 51, 63, 0.7); transition: all 0s; } .js-weather-play-button::after { content: ""; background-color: rgba(0, 0, 0, 0); width: 256px; height: 144px; position: absolute; } .js-weather-play-button i { position: relative; left: 1px; } .close-litebox { position: absolute; top: 10px; right: 10px; background-color: red; color: white; border: none; padding: 5px 10px; cursor: pointer; z-index: 10002; } /* オーバーレイのスタイル */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; z-index: 10000; } .weather_News { display: none; width: 100%; max-height: 46px; overflow: hidden; /* display: -webkit-box !important; */ text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1; line-height: 16px; white-space: normal; font-family: "MS PGothic", "MS Pゴシック", sans-serif; font-size: 13px; margin: 8px 0px 4px; letter-spacing: -0.3px; } p.weather_thr_headline { width: 100%; max-height: 48px; overflow: hidden; display: -webkit-box !important; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3; line-height: 16px; white-space: normal; font-family: "MS PGothic", "MS Pゴシック", sans-serif; font-size: 13px; margin: 6px 0px 2px; letter-spacing: -0.3px; text-align: justify; } /* エリアTOP 天気予報 */ div.forecast_prefecture_wrap { text-align: center; background: #fff; border: solid 1px #e1e1e1; border-radius: 6px; } div.forecast_prefecture_box { display: flex; } div.forecast_prefecture { width: 112px; height: 82px; border-right: solid 0.5px #e1e1e1; } div.forecast_prefecture_box div.forecast_prefecture:last-child { border-right: none; } p.forecast_prefecture_link { margin: 0px; background: #ececed; border-top: 1px solid #d9d9d9; padding: 6px 4px; font-size: 11px; font-feature-settings: "palt" 1; letter-spacing: -1px; } p.forecast_prefecture_link i.fa.fa-comment-o { margin-left: 2px; } /* インプ数、レス数バルーン */ .thrListContent { gap: 8px; display: inline-flex; font-weight: normal; font-size: 13px; color: #666; padding: 0px 3px; flex: 0 1 auto; } .thrlis_chart_space, .thrlis_comment_space { position: relative; } .comment_balloon { position: absolute; bottom: 16px; right: -5px; white-space: nowrap; } .chart_balloon { position: absolute; bottom: 16px; right: -7px; white-space: nowrap; } .chart_balloon, .comment_balloon { background: #666; color: #fff; padding: 2px 1px 0px 3px; font-size: 11px; height: 13px; display: none; } .chart_count_area:hover .chart_balloon, .comment_count_area:hover .comment_balloon { display: inline; z-index: 1; } .chart_balloon.newslis_count, .comment_balloon.newslis_count { padding: 0 1px 3px 3px; line-height: 17px; } .chart_balloon:before, .comment_balloon:before { content: ""; position: absolute; border-width: 3px; border-style: solid; border-color: #666 transparent transparent transparent; top: 15px; left: 15px; } .main_weather_info_data { font-size: 13px; line-height: 18px; color: #666; letter-spacing: -0.3px; } .mac { .main_weather_info_data { font-size: 12px; } .main_weather_logo img { width: 85px; } } span.main_weather_info_update { font-size: 11px; } .main_weather_logo img { width: 90px; } .main_weather_info_wrapper { display: flex; align-items: center; justify-content: space-between; font-feature-settings: "palt" 1; color: #666; } span.main_weather_offer { color: #666; font-size: 11px; } .main_weekly_weather_announcementTime { font-size: 12px; font-weight: normal; color: #666; text-align: right; margin: 0 5px 8px 0; } .main_weekly_weather_refresh_icon { margin-right: 3px; } a.main_weather_link { text-decoration: none !important; } /****** ** PC版右メニュー 地域マップ追加 ** ******/ div#menu_local_MAP { min-width: 190px; padding: 8px 10px; width: 100%; box-sizing: border-box; } .menu_local_link { text-decoration: none; text-decoration-line: none; text-decoration-color: none; display: flex; flex-direction: column; gap: 8px 0px; } .menu_local_link:hover { text-decoration: none; text-decoration-line: none; text-decoration-color: none; } .menu_local_link:hover h1#bakusai_area_menu_name { background-color: var(--bakusai_blue); color: #FFF; transition: all 0.2s ease-in-out 0s; } div.menu_local_img { width: 100%; height: 100%; } div.menu_local_img img { width: 100%; height: auto; vertical-align: top; object-fit: contain; } h1#bakusai_area_menu_name { border: 1px solid var(--bakusai_blue); width: 100%; text-align: center; box-sizing: border-box; margin: 0px auto 0px; height: auto; background-color: #FFF; color: var(--bakusai_blue); line-height: 16px; padding: 2px !important; transition: all 0.2s ease-in-out 0s; } div.menu_local_MAP_img { display: flex; align-items: center; justify-content: center; position: relative; flex-direction: column; margin: 20px auto; } div.menu_local_MAP_img img { width: auto; height: 110px; object-fit: contain; object-position: center; vertical-align: top; } div.menu_local_MAP_img[class*="areaCode13_7"] { margin: 20px auto 0px; } .menu_local_MAP_link { position: absolute; font-size: 10px; text-align: center; line-height: 16px; text-decoration-line: underline; text-decoration-color: inherit; } .menu_local_MAP_link[title*="南東北から北東北版へ"], .menu_local_MAP_link[title*="東京版から北関東版へ"], .menu_local_MAP_link[title*="東京版から南関東版へ"], .menu_local_MAP_link[title*="北陸版から甲信越版へ"], .menu_local_MAP_link[title*="愛知版から東海版へ"], .menu_local_MAP_link[title*="愛知版から甲信越版へ"], .menu_local_MAP_link[title*="東海版から北陸版へ"], .menu_local_MAP_link[title*="東海版から甲信越版へ"], .menu_local_MAP_link[title*="甲信越版から南東北版へ"], .menu_local_MAP_link[title*="甲信越版から北関東版へ"], .menu_local_MAP_link[title*="山陰版へ"], .menu_local_MAP_link[title*="北部九州版から福岡版へ"], .menu_local_MAP_link[title*="南部九州版から北部九州版へ"], .menu_local_MAP_link[title*="沖縄版から北部九州版へ"], .menu_local_MAP_link[title*="沖縄版から南部九州版へ"], .menu_local_MAP_link[title*="中国版へ"], .menu_local_MAP_link[title*="ロシア版へ"] { top: -18px; } .menu_local_MAP_link[title*="北海道から北東北版へ"], .menu_local_MAP_link[title*="北海道から南東北版へ"], .menu_local_MAP_link[title*="北東北から南東北版へ"], .menu_local_MAP_link[title*="北関東版から東京版へ"], .menu_local_MAP_link[title*="北関東版から南関東版へ"], .menu_local_MAP_link[title*="甲信越版から東海版へ"], .menu_local_MAP_link[title*="甲信越版から北陸版へ"], .menu_local_MAP_link[title*="東海版から関西版へ"], .menu_local_MAP_link[title*="東海版から南関東版へ"], .menu_local_MAP_link[title*="関西版へ"], .menu_local_MAP_link[title*="愛知版へ"], .menu_local_MAP_link[title*="大阪版へ"], .menu_local_MAP_link[title*="北部九州版から沖縄版へ"], .menu_local_MAP_link[title*="福岡版から北部九州版へ"], .menu_local_MAP_link[title*="北部九州版から南部九州版へ"], .menu_local_MAP_link[title*="福岡版から南部九州版へ"], .menu_local_MAP_link[title*="南部九州版から沖縄版へ"], .menu_local_MAP_link[title*="台湾版へ"], .menu_local_MAP_link[title*="インドネシア版へ"], .menu_local_MAP_link[title*="ウクライナ版へ"] { bottom: -18px; } .menu_local_MAP_link[title*="北海道から南東北版へ"], .menu_local_MAP_link[title*="東京版から北関東版へ"], .menu_local_MAP_link[title*="北関東版から東京版へ"], .menu_local_MAP_link[title*="北陸版から甲信越版へ"], .menu_local_MAP_link[title*="甲信越版から南東北版へ"], .menu_local_MAP_link[title*="甲信越版から東海版へ"], .menu_local_MAP_link[title*="愛知版から甲信越版"], .menu_local_MAP_link[title*="東海版から甲信越版へ"], .menu_local_MAP_link[title*="東海版から南関東版へ"], .menu_local_MAP_link[title*="北部九州版から南部九州版へ"], .menu_local_MAP_link[title*="福岡版から南部九州版へ"], .menu_local_MAP_link[title*="沖縄版から南部九州版へ"], .menu_local_MAP_link[title*="台湾版へ"], .menu_local_MAP_link[title*="ロシア版へ"] { right: 0px; } .menu_local_MAP_link[title*="北海道から北東北版へ"], .menu_local_MAP_link[title*="東京版から南関東版へ"], .menu_local_MAP_link[title*="北関東版から南関東版へ"], .menu_local_MAP_link[title*="甲信越版から北関東版へ"], .menu_local_MAP_link[title*="甲信越版から北陸版へ"], .menu_local_MAP_link[title*="愛知版から東海版へ"], .menu_local_MAP_link[title*="東海版から北陸版へ"], .menu_local_MAP_link[title*="東海版から関西版へ"], .menu_local_MAP_link[title*="南関東版から東京版へ"], .menu_local_MAP_link[title*="北部九州版から沖縄版へ"], .menu_local_MAP_link[title*="福岡版から北部九州版へ"], .menu_local_MAP_link[title*="沖縄版から北部九州版へ"], .menu_local_MAP_link[title*="ウクライナ版へ"] { left: 0px; } .menu_local_MAP_link[title*="南関東版から北関東版へ"] { top: -5px; right: 30px; } .menu_local_MAP_link[title*="南関東版から東京版へ"] { top: 43px; } .menu_local_MAP_link[title*="北陸版から東海版へ"] { right: 10px; bottom: -5px; } .menu_local_MAP_link[title*="山陽版へ"] { bottom: -5px; } .menu_local_MAP_link[title*="中国版へ"] { left: 20px; } .menu_local_MAP_link[title*="韓国版へ"], .menu_local_MAP_link[title*="台湾版へ"] { right: -7px; } .menu_local_MAP_link[title*="フィリピン版へ"] { top: -5px; } .menu_local_MAP_link[title*="ベトナム版へ"] { right: 0px; bottom: 40px; } .menu_local_MAP_link[title*="タイ版へ"] { left: 10px; } /***** ***** エリア TOP 棒人間アニメーション *****/ #Stick-Figure-Animation_container { width: 100%; overflow-x: hidden; } .Stick-Figure-Animation_list { display: block; height: 100%; width: 100%; font-feature-settings: "palt" 1; color: #333333; position: relative; padding: 0px; margin: 0px; white-space: nowrap; font-size: 8px; overflow: hidden; transform: none; } .Stick-Figure-Animation_list li { display: inline-flex; gap: 8px; align-items: end; animation: stick-figure-list-marquee 42s linear infinite; animation-fill-mode: both; width: max-content; position: absolute; left: 100%; top: 0; height: 100%; } .Stick-Figure-Animation_comment { display: inline-block; font-size:8px; } .Stick-Figure-Animation_img { width: 48px; height:15px; } .Stick-Figure-Animation_img img { width: 100%; height: 100%; vertical-align: top; object-fit: contain; } @keyframes stick-figure-list-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - 100vw)); } } /* ============================================================ * 実況中インジケーター(見出し右横の赤い点滅ドット) * - TV実況中継: 常時実況のため常時表示 * - スポーツ実況中継: 本日の試合(.Today-Match)が1件以上ある時のみ表示 * * 元: .bks-livescore-cardf__livedot(pc/bks_livescore.css:220)と * @keyframes bks-livescore-blink(pc/bks_livescore.css:137-148)、 * 色は --bks-live-red(同ファイル :11 / .bks-livescore-bar スコープ)。 * bks_livescore.css は $bksLiveGames がある時だけ読み込まれる条件付きCSSで、 * 常時表示が必要な見出しからは参照できないためここに複製している(design.md §11.7 手順3)。 * 本家の色・点滅カーブを変更した際は要追従。 * keyframes 名は bks_livescore.css と同居しても読み込み順に左右されないよう別名にしてある。 * SP版(sp/ctgtop.css 末尾)と同一クラス名。値は margin-left のみ意図的に異なる * (PC=6px / SP=3px)。それ以外は両版を揃えること。 * ============================================================ */ .ctgLiveDot { display: inline-block; flex: 0 0 auto; align-self: center; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #d4202a; /* 元: --bks-live-red(pc/bks_livescore.css:11) */ vertical-align: middle; animation: ctgLiveDot-blink 5s infinite; } /* 周期 5s: 完全表示3.2s → fadeout 0.8s(段階) → 非表示0.2s → fadein 0.8s(段階) */ @keyframes ctgLiveDot-blink { 0%, 64% { opacity: 1; } 68% { opacity: .7; } 72% { opacity: .4; } 76% { opacity: .15; } 80%, 84% { opacity: 0; } 88% { opacity: .15; } 92% { opacity: .4; } 96% { opacity: .7; } 100% { opacity: 1; } }