@charset "UTF-8";

/* layout */
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
html {
font-size: 62.5%;
min-height: 100vh;
}
body {
min-height: 100vh;
background-color: #ff9900;
margin:0;
padding:0;
font-size: 1.4em;
font-family: Roboto, "Droid Sans", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
line-height: 120%;
-webkit-text-size-adjust: none;
}
a:link {
color: #1558d6;
}
a:visited {
color: #681da8;
}
img { 
max-width: 100%; 
height:auto;
}
.contents_box_logo a {
overflow: hidden;
display:  block;
height: 30px;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
}

@media screen and (max-device-width: 735px) {
#mainbox {
background-color: #ff9900;
position:absolute;
left:0;
top:0;
margin: 50px 0 0 0;
height:auto;
width:auto;
min-height:100%;
padding:0;
z-index:1;
}
#mainin {
width:100vw;
margin:0;
}
#leftbox {
width:100vw;
background-color: #ff9900;
left:0;
top:0;
height:50px;
margin:0;
padding:5px 0 0 0;
overflow:hidden;
position:fixed;
z-index:2;
line-height: 180%;
}
#leftnavi {
width:100vw;
height:50px;
padding:20px 0 0 5px;
font-size: 1.6rem;
}
}

.con_head::before {
font-size: 1.4rem;
color: #333;
content: "このページには広告が含まれています";
left: 0px;
padding: 5px 10px 0;
position: absolute;
top: -24px;
height: 20px;
}

/* body */

#header {
width: 100%;
height: 0px;
padding: 0px;
}
#header h1, .head, .search, #today_is, #ticker {
display: none;
}
#top_img {
width: 100vw;
height: 80px;
background-image : url("/img/top/mfg_sp25.webp");
background-repeat: no-repeat;
background-size: contain;
}
#contents {
width: 100vw;
padding: 0px!important;
margin: 0px!important;
}
#contents_left, #contents_right {
width: 100%;
}
div.contents_box {
 width: 100%;
text-align: left;
margin-bottom: 5px;
}
.contents_box_logo a {
background-image: url(/logo/top/index/index_sp_2501.webp);
width: 100vw;
background-size: cover;
}
.logo_game_result a {background-position: 0px 0px;}
.logo_next_game a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 1);}
.logo_game_result_farm a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 2);}
.logo_game_result_farm3 a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 3);}
.logo_game_result_women a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 4);}
.logo_futures_result a {background-position: 0px -120px;}
.logo_japan_game_result a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 5);}
/*.up_twitter_logo a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 6);}*/
.logo_mfg_recommend a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 7);}
.logo_navi a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 8);}
.ticket_logo a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 9);}
.logo_npb_standings a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 10);}
.logo_goods a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 11);}
.up_twitter_logo a {background-position:calc(0px + 0px) calc(( 100vw / -10) * 12);}

div.contents_box_main {
line-height: 120%;
padding-bottom: 2px;
}
div.contents_box_main span {
letter-spacing: -1px;
}
div.result_card {
font-size: 1.6rem;
font-weight: bold;
line-height: 120%;
padding:2px 5px;
}
div.g_result {
background-color: #0066cc;
color: #ffffff;
}
div.result_g_com {
width: calc(100% - 8px);
background-color: #ccccff;
color: #202124;
font-weight: normal;
border: 2px solid #333333;
margin: 2px;
padding: 2px 5px;
}
#game_details {
width: calc(100% - 12px);
background-color: #ffffff;
border-collapse: collapse;
line-height: 120%;
margin: 4px;
}
#game_details td {
color: #202124;
font-weight: normal;
}
td.detail_team {
width: 40px;
vertical-align: top;
padding-left: 5px;
border-bottom: 1px #333333 solid;
}
span.team_flag {
display:inline-block;
width: 20px;
height: 15px;
background-image: url("/icon/team/npb.png");
background-repeat: no-repeat;
}
.team_g {background-position: 0px 0px;}
.team_s {background-position: -20px 0px;}
.team_db {background-position: -40px 0px;}
.team_d {background-position: -60px 0px;}
.team_t {background-position: -80px 0px;}
.team_c {background-position: -100px 0px;}
.team_f {background-position: 0px -15px;}
.team_e {background-position: -20px -15px;}
.team_l {background-position: -40px -15px;}
.team_m {background-position: -60px -15px;}
.team_bs {background-position: -80px -15px;}
.team_h {background-position: -100px -15px;}

td.detail_team_pitch {
vertical-align: baseline;
padding: 2px;
border-bottom: 1px #333333 solid;
}
.detail_team_pitch img {
vertical-align: baseline;
margin: 1px 1px 0 1px;
}
td.detail_hr, td.detail_hr_player {
padding: 2px;
}
div.g_next {
background-color: #0066cc;
color: #ffffff;
}
.result_card.next {
font-weight: normal;
}
.random {
padding: 2px 10px;
}
span.pia {
padding-left: 3px;
font-size: 1.2rem;
}
.pia a:link, .pia a:visited { color: #1111cc; } 
div.starter {
width: 100%;
background-color: #ffffff;
color: #000000;
font-weight: normal;
border: 2px solid #333333;
margin: 2px 0;
padding: 1px 5px;
}
div.g_farm_result {
background-color: #99ccff;
color: #000000;
font-weight: normal;
}
div.g_women_result {
background-color: #ff99ff;
color: #000000;
font-weight: normal;
}
div.jpn_result {
background-color: #df1414;
color: #ffffff;
font-weight: normal;
}
div.index_pr {
text-align: center;
margin: 5px auto;
}
div.index_pr_pc {
display: none;
}
div.up_twitter {
background-color: #ffffff;
color: #202124;
font-weight: normal;
}
.up_twitter_logo {
background-color: #99cc00;
}
#timeline, div.twWTL {
width: calc(100% - 4px);
height: 250px;
}
.x_info {
height: 25px;
display: flex;
padding: 2.5px;
}
.x_info span {
width: 250px;
display: inline-block;
text-align: center;
padding-top: 2px;
}
.twitter-timeline {
width: calc(100% - 8px);
height: 250px;
font-size: 1.4rem;
}
div.recommend {
background-color: #ffccff;
color: #333333;
font-weight: normal;
}
.recommend_list ul {
margin: 0 5px 0 10px;
padding: 2px 0;
line-height: 250%;
}
.recommend_list ul li{
list-style-type: none;
}
li a:link, li a:visited { color: #1558d6; }
div.navi {
background-color: #ccffcc;
color: #202124;
font-weight: normal;
}
.contents_box_main a:link, .contents_box_main a:visited { color: #1558d6; }
div.attention0 {
background-color: #ee0101;
color: #ffffff;
font-weight: normal;
}
.attention0 a:link, .attention0 a:visited { color: #000000; }
div.ticket {
background-color: #ffffff;
color: #202124;
font-weight: normal;
}
.ticket_logo {

}
table#ticket_box {
width: 100%;
background-color: #ffffff;
padding: 5px 10px;
}
th.ticket_nos, td.ticket_nos, th.ticket_cs, td.ticket_cs {
font-size: 1.4rem;
padding: 1px 0;
text-align: left;
}
th.ticket_nos {
color: #202124;
font-weight: bold;
}
td.ticket_nos {
color: #006699;
padding-left: 5px;
}
td.ticket_nos.pia, td.ticket_cs.pia {
line-height: 250%;
}
.ticket_nos a:link, .ticket_nos a:visited { color: #1558d6; } 
th.ticket_cs {
color: #202124;
font-weight: bold;
}
.ticket_nos span, .ticket_cs span {
font-size: 1.2rem;
color: #333333;
font-weight : normal;
}
td.ticket_cs {
color: #202124;
padding-left: 5px;
}
.ticket_cs a:link, .ticket_cs a:visited { color: #1558d6; } 
td.ticket_pr {
font-size: 1.4rem;
color: #202124;
background-color: #ff9900;
text-align: center;
padding: 5px;
}
.ticket_pr a:link, .ticket_pr a:visited { color: #1558d6; } 
div.index_pr_center, div.index_pr_bottom{
clear: both;
text-align: center;
margin: 5px auto;
}
div.index_pr_center_pc {
display: none;
}
#contents2 {
 width: 100%;
padding: 0px!important;
margin: 0px!important;
}
#contents2_left, #contents2_right {
width: 100%;
}
div.standings {
background-color: #99cc00;
color: #202124;
font-weight: normal;
}
div.standings_cl {
width:100%;
height:180px;
overflow:auto;
-webkit-overflow-scrolling:touch;
display: inline-block;
margin: 0px;
}
.ifrm {
width:100%;
height:180px;
border:none;
display:block;
}
div.goods {
background-color: #cc99cc;
color: #202124;
font-weight: normal;
}
div.goods2 {
background-color: #e60012;
color: #202124;
font-weight: normal;
}
#goods_box, #goods_box2 {
width:99%;
}
#goods_box td, #goods_box2 td {
vertical-align:top;
}
div.update_days {
color: #202124;
line-height: 120%;
font-size: 1.2rem;
text-align: right;
white-space: nowrap;
font-family: Verdana, Arial, sans-serif;
border: none;
padding: 2px;
}
div.counter {
width: 100px;
height: 20px;
color: #ffffff;
font-family: Arial, Verdana, sans-serif;
font-size: 1.2rem;
letter-spacing: 5.5px;
text-align: right;
margin: 2px 0 2px 260px;
}
div.counter::before {
width: 100px;
height: 14px;
display: inline-block;
content: "";
background-image: url("/icon/sprite01.png");
background-size: 484px 64px;
background-repeat: no-repeat;
vertical-align: bottom;
background-position: -384px -50px;
}
#count {
margin-left: -105px;
}
div.info {
clear: both;
 width: 100%;
text-align: center;
color: #1a237e;
font-size: 1.2rem;
padding: 15px 0 5px 0;
}
div.index_pr_center_sp, .index_pr_center {
margin: 5px auto;
text-align: center;
}
div.mfg_logo, div.footer {
 width: 100%;
text-align: center;
padding: 2px 0;
}
div.main_footer_cr {
width: 100%;
text-align: center;
padding: 5px 0;
font-family: Verdana;
font-size: 1.2rem;
}
footer {
width: 100%;
text-align: center;
padding: 5px 0;
font-family: Verdana;
font-size: 1.2rem;
}

/* frame */

.con_head {
color: #202124;
width: 100%;
font-size: 1.6rem;
padding: 0;
position:relative;
z-index:2;
}
.con_head a:link, .con_head a:visited {
color: #202124;
}
div.nav_home, div.nav_menu, div.nav_search, div.nav_return {
padding:2px 0 0 2px;
background-position: left center;
display:inline;
}
span.head_home {
letter-spacing:-1.5px;
}
span.head_menu, span.head_search {
letter-spacing:-1.0px;
}
span.head_home::before, span.head_menu::before, span.head_search::before, span.head_return::before {
width: 16px;
height: 16px;
display: inline-block;
content: "";
background-image : url(/icon/sprite02.png);
background-size: 98px 16px;
background-repeat: no-repeat;
vertical-align: middle;
}
span.head_home::before {
background-position: 0 0;
}
span.head_menu::before {
background-position: -16px 0;
}
span.head_search::before {
background-position: -32px 0;
}
span.head_return::before {
background-position: -48px 0;
}
div.nav_return {
display: none;
}
#frame_menubox {
width: 100%;
display: none;
}
div.link_sp, div.link_ip, div.link_spip {
display: inline;
}
div.counter {
margin-left: calc( 100vw - 100px);
}

@media screen and (max-device-width: 450px) {
.contents_box_logo a {
height:calc(((100vw - 35px) / 450) * 45)!important;
}
.twitter-timeline {
width: calc(100% - 4px)!important;
}
.sp_none {
display: none;
}
}

@media screen  and (min-device-width: 360px) {
.index_pr_center, .index_pr_bottom {
margin: 5px auto;
}
#goods_box2 td a img {
width:111px;
height:167px;
}
}

@media screen and (min-device-width: 375px) {

}

@media screen and (min-device-width: 414px) {

}

@media screen and (max-device-width: 359px) {
span.sp_none_32 {
display: none;
}
.g-plusone {
display: none;
}
.ticket_nos span, .ticket_cs span {
letter-spacing: -1px;
}
td.ticket_pr_bar img{
width: 290px!important;
height: 50px!important;
}
#goods_box2 td a img {
width:99px;
height:149px;
}
}

@media (min-device-width: 451px) and (max-device-width: 735px) {
#leftnavi, #mainin {
width: 450px;
margin-left: calc( (100vw - 450px) / 2);
}
#mainin {
padding: 3px!important;
}
.contents_box_logo a {
height:45px!important;
width: 450px;
}
#contents {
width: 450px;
}
.logo_game_result a {background-position: 0px 0px;}
.logo_next_game a {background-position: 0px -45px;}
.logo_game_result_farm a {background-position: 0px -90px;}
.logo_game_result_farm3 a {background-position: 0px -135px;}
.logo_game_result_women a {background-position: 0px -180px;}
.logo_japan_game_result a {background-position: 0px -225px;}
/*.up_twitter_logo a {background-position: 0px -270px;}*/
.logo_mfg_recommend a {background-position: 0px -315px;}
.logo_navi a {background-position: 0px -360px;}
.ticket_logo a {background-position: 0px -405px;}
.logo_npb_standings a {background-position: 0px -450px;}
.logo_goods a {background-position: 0px -495px;}
.up_twitter_logo a {background-position: 0px -540px;}

.sp_none {
display: none;
}
}


@media screen and (min-device-width: 736px) {
#mainbox {
background-color: #ff9900;
position:absolute;
left:0;
top:0;
margin: 0 0 0 260px!important;
height:auto;
width:auto;
min-height:100%;
padding:0;
border-left: thin solid #000000;
page-break-before: always;
}
#mainin {
width:100%;
margin:0 10px;
padding:0 5px 5px 5px;
}
#leftbox {
background-color: #ff9900;
left:0;
top:0;
width:270px;
height:100%;
margin:0!important;
padding:0;
overflow-x:hidden;
overflow-y:auto;
scrollbar-base-color: #ff9900;
scrollbar-highlight-color: #ffcc00;
position:fixed;
_position:absolute;
}
#leftnavi {
width:250px;
margin:0 0 0 5px;
padding:15px 0 0 5px;
}
#mainin {
width: 320px;
padding: 30px 2px 2px 2px!important;
}
.contents_box_logo a {
background-image: url("/logo/top/index/index_ip_2407.webp");
width: 312px;
}
div.counter {
margin: 0 0 0 213px;
}
.g-plusone {
display: none;
}
.ticket_nos span, .ticket_cs span {
letter-spacing: -1px;
}
td.ticket_pr_bar img{
width: 290px!important;
height: 50px!important;
}
#goods_box2 td a img {
width:99px;
height:149px;
}
#frame_menubox {
width: 100%;
display: inline;
}

/* frame */

.con_head {
color: #202124;
width: 235px!important;
font-size: 1.3rem;
padding: 5px 0 10px 0;
white-space: nowrap;
}
div.link_sp, div.link_ip, div.link_spip, div.attention_mp {
display: none;
}
div.attention {
width: 235px;
margin: 1px 0;
padding: 1px 0;
font-size: 1.3rem;
font-weight: normal;
}
span.link::before {
margin-left : 1px;
width: 32px;
height: 12px;
display: inline-block;
content: "";
background-image: url(/icon/sprite01.png);
background-size: 484px 64px;
background-repeat: no-repeat;
vertical-align: middle;
background-position: -384px 0;
}
div#con_info {
width: 235px;
height : 30px;
background-image : url("/logo/top/frame/information.png");
background-repeat: no-repeat;
background-color: #cc0066;
margin: 5px 0 2px 0;
}
h3.con_infomenu {
color: #202124;
width: 235px;
margin: 1px 0;
padding: 1px 0;
font-size: 1.3rem;
font-weight: normal;
}
div#con_contents {
width: 235px;
height : 30px;
background-image : url("/logo/top/frame/contents.png");
background-repeat: no-repeat;
background-color: #cc0066;
margin: 5px 0 2px 0;
}
div#con_giants {
color: #ffffff; 
font-weight: bold;
width: 235px;
height : 30px;
background-color: #003366;  
background-image : url("/logo/top/frame/contents_g.png");
background-repeat: no-repeat;
padding: 5px 0 0 0;
}
.con_guide a:link, .con_guide a:visited { color: #ffffff; }
[id^="title"]::before, .con_title::before, .con_gmenu::before, div.list.guide ul li::before, div.con_nmenu::before, h2.con_nmenu::before {
width: 16px;
height: 16px;
display: inline-block;
content: "";
background-image: url(/icon/sprite01.png);
background-size: 121px 16px;
background-repeat: no-repeat;
vertical-align: text-top;
margin-top: 1px;
}
[id^="title"]::before, .con_title::before, div.list.guide ul li::before {
background-position: -32px 0;
}
[id^="title"] {
width: 235px;
margin: 2px;
padding : 1px 0 0 6px;
font-size: 1.3rem;
font-weight: normal;
cursor: pointer;
text-decoration: underline;
line-height: 120%;
}
#title000.con_guide::before, .con_gmenu::before {
background-position: -64px 0;
}
#title000.con_guide {
padding : 3px 0 0 2px;
background-size: 16px;
}
[id^="title"] img {
vertical-align: baseline;
margin: 1px 1px 0 1px;
}
[id^="title"] span {
letter-spacing: -1px;
}
#title000 {
color: #ffffff; 
font-weight: bold;
margin: 5px 0 2px 0;
padding : 0 0 0 15px;
font-style: italic;
}
.con_gmenu {
color: #ffffff;
font-weight: bold;
font-size: 1.3rem;
margin: 5px 0 2px 0;
padding : 3px 0 3px 2px;
background-repeat: no-repeat;
background-size: 16px;
font-style: italic;
}
.con_title {
width: 235px;
margin: 2px;
color: #202124;
padding : 1px 0 0 6px;
}
.con_title img {
vertical-align: baseline;
margin: 1px 1px 0 1px;
}
.con_title span {
letter-spacing: -1px;
}
.con_title a:link, .con_title a:visited { color: #202124; }
div.list{
font-size: 1.3rem;
line-height: 200%;
margin : 0 0 5px 0;
}
div.list a:link, div.list a:visited { color: #202124; }
.con_head a:link, .con_head a:visited { color: #202124; }
h3 a:link, h3 a:visited { color: #202124; }
div.list span {
letter-spacing: -1px;
}
div.list.guide ul {
list-style-type: none;
margin: 0 0 0 2px;
padding: 0;
}
div.list.guide ul li {
padding: 0 0 0 1px;
}
div.con_att {
width: 235px;
height: 30px;
padding: 5px 0 2px 0;
}
div#con_npb {
width: 235px;
height: 30px;
background-color: #ff0033;
background-image : url("/logo/top/frame/contents_npb.png");
background-repeat: no-repeat;
margin: 5px 0 0 0;
}
div.con_nmenu, h2.con_nmenu {
color: #ffffff;
font-weight: bold;
font-size: 1.3rem;
margin: 5px 0 2px 0;
padding : 3px 0 3px 2px;
font-style: italic;
}
div.con_nmenu::before, h2.con_nmenu::before {
background-position: -80px 0;
}
div#con_mlb {
width: 235px;
height: 30px;
background-color: #ffffff;
background-image : url("/logo/top/frame/contents_mlb.png");
background-repeat: no-repeat;
margin: 5px 0 0 0;
}
div.con_mmenu, h2.con_mmenu {
color: #ffffff;
font-weight: bold;
font-size: 1.3rem;
margin: 5px 0 2px 0;
padding : 3px 0 3px 2px;
font-style: italic;
}
div.con_mmenu::before, h2.con_mmenu::before {
background-position: -80px 0;
}
div#con_jpn {
width: 235px;
height : 30px;
background-color: #ffffff;
background-image : url("/logo/top/frame/contents_jpn.png");
background-repeat: no-repeat;
margin: 5px 0 0 0;
}
div#con_etc {
width: 235px;
height : 30px;
background-color: #00cc33;
background-image : url("/logo/top/frame/contents_others.png");
background-repeat: no-repeat;
margin: 5px 0 0 0;
}
div.con_others {
font-size: 1.3rem;
padding: 5px 0 2px 10px;
line-height: 200%;
}
.con_others a:link, .con_others a:visited { color: #202124; } 
div.con_footer {
margin-left: auto;
margin-right: auto;
padding: 5px 0 10px 0;
}
.list img, .con_title img {
vertical-align: middle;
margin: 0 1px;	
}
div.contents_pr {
padding: 5px 0 2px 0;
}
div.contents_pr_pc {
width: 235px;
padding: 5px 0 2px 0;
}
div.contents_pr_sp, div.contents_pr_ip, div.contents_pr_spip, span.spip_info {
display: none;
}
div.contents_pr_link {
font-size: 1.3rem!important;
padding: 5px 0 2px 0;
}
.contents_pr_link a {
font-size: 1.3rem!important;
}

/* pr調整 */

.adj {
height:205px;
}
.admax-banner iframe, .adj div{
transform: scale(0.78,0.78);
transform-origin:0 0;
}
}

@media screen and (max-device-width: 599px){
#main_pr_foot_only_npb, #main_pr_foot_only_jpn {
display: none;
}
}

/* linkcard 非表示 */
.linkcard {
display: none;
}

/* social -start- */
@font-face {
font-family: 'icomoon';
src:  url('/fonts/social/icomoon.eot?fsoi88');
src:  url('/fonts/social/icomoon.eot?fsoi88#iefix') format('embedded-opentype'),
    url('/fonts/social/icomoon.ttf?fsoi88') format('truetype'),
    url('/fonts/social/icomoon.woff?fsoi88') format('woff'),
    url('/fonts/social/icomoon.svg?fsoi88#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

div#social {
//width: 100%;
max-width: 728px;
text-align: right;
height:50px;
margin: 5px;
padding: 3px;
}

/* -- social button base setting -- */

ul.social-button {
list-style-type: none;
line-height: 1;
margin: 5px;
}
ul.social-button li {
display: inline-block;
margin: 0 20px 10px 0;
}
ul.social-button li a {
display: inline-block;
padding: 7px 10px 5px;
border-radius: 10px;
text-decoration: none;
color: #ffffff!important;
vertical-align: middle;
}
ul.social-button li a:before {
display: inline-block;
font-family: 'icomoon' !important;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 130%;
vertical-align: middle;
}
ul.social-button li a:hover {
opacity: 0.75;
}

/* -- twitter button -- */

ul.social-button li.twitter a {
background: #14171a;
}
ul.social-button li.twitter a:before {
content: "\e902";
}

/* -- facebook button -- */

ul.social-button li.facebook a {
background: #3a5795;
}
ul.social-button li.facebook a:before {
content: "\e900";
}

/* -- pocket button -- */

ul.social-button li.pocket a {
background: #ef3f56;
}
ul.social-button li.pocket a:before {
content: "\e903";
}

/* -- bluesky button -- */

ul.social-button li.bluesky a {
background: #0085ff;
}
ul.social-button li.bluesky a:before {
content: "\e905";
}

/* -- threads button -- */

ul.social-button li.threads a {
background: #000000;
}
ul.social-button li.threads a:before {
content: "\e904";
}

/* -- line button -- */

ul.social-button li.line a {
background: #00c300;
}
ul.social-button li.line a:before {
content: "\e901";
}

@media (max-width: 480px){
#social ul {
padding-inline-start: 5px;
}
ul.social-button li {
margin: 0 10px 0 0;
}
ul.social-button li a {
padding: 10px 12px 8px;
border-radius: 8px;
}
#social {
padding-right: 10px;
}
}

@media (max-width: 360px){
#social ul {
padding-inline-start: 25px;
}
li.pocket {
display: none!important;
}
}
/* social -end- */

#contents_right {
content-visibility: auto;
contain-intrinsic-size: 1080px;
}
#contents2 {
content-visibility: auto;
contain-intrinsic-size: 470px;
}

/* プログレス-start- */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: rgba(0, 0, 0, 0.08);
z-index: 9999;
overflow: hidden;
}

/* === ページ全体の進捗バー === */
.progress-bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, #00bfff, #1e90ff);
transform-origin: left center;
animation: scroll-progress linear;
animation-timeline: scroll(); /* ページ全体のスクロールに連動 */
}

/* === 表示中の範囲バー === */
.viewport-bar {
position: absolute;
top: 0;
height: 100%;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
transition: left 0.05s linear, width 0.1s;
border: 1px solid #000;
}

@keyframes scroll-progress {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}

body {
display: flex;
}
#mainbox {
flex: 1;
}
/* プログレス-end- */