/*--------------------------------------------------------------------------------------------------- 　#header ---------------------------------------------------------------------------------------------------*/ #header, #header:after, #header .subArea, #header .title_dateArea, #header .snsArea, #header .navArea, #header .logoArea, #header h1.logo, #header h1.logo a:before, #header .navAreaSp, #header .navLiveSp{ -webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease; } /* ======== #header ======== */ #header { position: fixed; top:0; left:0; z-index:999999; width:100vw; height:35px; margin:0; -moz-box-sizing:border-box;box-sizing:border-box; } /*#header:after { position: absolute; top:0; right:0; bottom:0; left:0; z-index:-1; content:""; background:#000; -moz-box-sizing:border-box;box-sizing:border-box;background:#000; opacity:0.9; }*/ /* .fixed */ #header.fixed { height:65px; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2); } #header.fixed:after { opacity:1; } @media only screen and (max-width: 738px) { #header { height:30px; } #header:after { opacity:1; } #header.fixed { height:60px; } #header.fixed:after { opacity:0.95; } } /* -------------------------------------- #header .logoArea -------------------------------------- */ #header .logoArea { position: absolute; bottom:9px; left:5%; z-index:3; } #header h1.logo { position: relative; z-index:1; display: block; width:436px; height:70px; font-size:0; } #header h1.logo a { display: block; } #header h1.logo a:before { position: absolute; top:0; right:0; bottom:0; left:0; content:""; background:url(/static/home/images/JUNSPORTS-logo.webp) center center no-repeat; background-size:436px; } /* .fixed .logoArea */ #header.fixed .logoArea { bottom:6px; } #header.fixed h1.logo { width:250px; height:55px; } #header.fixed h1.logo a:before { position: absolute; top:0; right:0; bottom:0; left:0; content:""; background:url(/static/home/images/JUNSPORTS-logo.webp) center center no-repeat; background-size:250px; } @media only screen and (max-width: 900px) { #header .logoArea { bottom:12px; left:0; right:0; } #header h1.logo { width:297px; height:65px; margin:0 auto; } #header h1.logo a:before { position: absolute; top:0; right:0; bottom:0; left:0; content:""; background:url(/static/home/images/JUNSPORTS-logo.webp) center center no-repeat; background-size:297px; } } @media only screen and (max-width: 738px) { #header .logoArea { bottom:10px; } #header h1.logo { width:250px; height:55px; } #header.fixed h1.logo { width:229px; height:50px; } #header h1.logo a:before { position: absolute; top:0; right:0; bottom:0; left:0; content:""; background:url(/static/home/images/JUNSPORTS-logo.webp) center center no-repeat; background-size:250px; } #header.fixed h1.logo a:before { position: absolute; top:0; right:0; bottom:0; left:0; content:""; background:url(/static/home/images/JUNSPORTS-logo.webp) center center no-repeat; background-size:229px; } } /* -------------------------------------- #header .subArea -------------------------------------- */ #header .subArea { position: absolute; top:0; right:0; left:0; z-index:2; height:35px; overflow: hidden; } #header .subArea:after { position: absolute; top:0; right:-100%; bottom:0; left:50%; z-index:-1; content:""; background:#000/*#001741*/; -webkit-transform:skew(-30deg, 0); } #header .subArea:before { position: absolute; top:0; right:5%; left:0; z-index:-2; height:35px; content:""; background:#24292e/*#0d274c*/; } /* .fixed .subArea */ #header.fixed .subArea { top:-36px; } @media only screen and (max-width: 738px) { #header .subArea { height:30px; } #header .subArea:after { right:0; left:0; -webkit-transform:skew(0, 0); } } /* ======== .title_dateArea ======== */ #header .title_dateArea { position: absolute; top:0; right:5%; left:5%; z-index:2; font-size:0; height:35px; text-align: right; padding-right:100px; } /* .titleArea */ #header .titleArea { position: absolute; top:0; left:0; } #header .titleArea h1 { position: relative; z-index:1; font-size:13px; font-family:'Noto Sans JP', sans-serif; font-weight:400; line-height:35px; letter-spacing:0.05em; color:#fff; padding-left:30px; } #header .titleArea h1 span.flag { position: absolute; top:10px; left:0; z-index:0; width:22px; height:16px; background:#fff; } #header .titleArea h1 span.flag:before { position: absolute; top:0; right:0; bottom:0; left:0; z-index:1; width:10px; height:10px; content:""; background:#ca214c; margin:auto; -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; } @media only screen and (max-width: 900px) { #header .titleArea h1 { font-size:11px; } } @media only screen and (max-width: 738px) { #header .title_dateArea { height:30px; } #header .titleArea { right:0; text-align: center; } #header .titleArea h1 { display: inline-block; line-height:30px; } #header .titleArea h1 span.flag { top:7px; } } @media only screen and (max-width: 320px) { #header .titleArea h1 { font-size:12px; } } /* -------------------------------------- #header .snsArea -------------------------------------- */ #header .snsArea { position: absolute; top:0; right:5%; z-index:3; height:35px; } /* ul */ #header .snsArea ul { position: relative; list-style: none; font-size:0; text-align: right; margin:5px 0 0 0; padding:0; } #header .snsArea ul li { display: inline-block; margin:0 0 0 8px; } #header .snsArea ul li a { position: relative; z-index:1; display: block; width:25px; height:25px; text-align: center; color:#fff; -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; } #header .snsArea ul li a:hover { -webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);transform:scale(1.1,1.1); } #header .snsArea ul li a.x-twitter { background:#fff; } #header .snsArea ul li a.facebook { background:#41569e; } #header .snsArea ul li a.instagram { background:#427eff; background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; } #header .snsArea ul li a.youtube { background:#FF0000; } #header .snsArea ul li a.livescore { background:#f9cc46; } #header .snsArea ul li a.pinterest { background:#E60023; } #header .snsArea ul li a:before { position: absolute; top:0; right:0; bottom:0; left:0; z-index:0; font-size:14px; font-family:'FontAwesome'; line-height:26px; text-align: center; } #header .snsArea ul li a.x-twitter:before { content:"\e61b"; color:#000; } #header .snsArea ul li a.facebook:before { content:"\f09a"; } #header .snsArea ul li a.instagram:before { content:"\f16d"; } #header .snsArea ul li a.youtube:before { content:"\f167"; } #header .snsArea ul li a.pinterest:before { content:"\f231"; color:#fff; } #header .snsArea ul li a.livescore:before { content:"\f0e7"; } /* .fixed .snsArea */ #header.fixed .snsArea { top:-36px; } @media only screen and (max-width: 900px) { #header .snsArea ul li a:hover { -webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1); } } @media only screen and (max-width: 738px) { #header .snsArea { top:auto; right:auto; bottom:20px; left:2.5%; z-index:4; display: none; } #header.fixed .snsArea { top:auto; bottom:12px; } #header .snsArea ul li { margin:0 7px 0 0; } } /* -------------------------------------- .copyrightArea -------------------------------------- */ footer .copyrightArea { position: relative; z-index:1; text-align: center; background:#000; padding:0; } footer .copyrightArea:before { position: absolute; top:0; right:5%; left:5%; z-index:1; height:0; content:""; } /* p.copy */ footer .copyrightArea p.copy { font-size:15px; font-family:'Barlow Condensed', sans-serif; font-weight:400; line-height:100px; letter-spacing:1px; color:#cacfd3; } @media screen and (max-width: 900px) { footer .copyrightArea { padding:35px 0; } footer .copyrightArea:before { right:0; left:0; } footer .copyrightArea p.copy { font-size:14px; line-height:1; margin-top:15px; } } @media screen and (max-width: 738px) { footer .copyrightArea { padding:25px 0 35px;z-index: 99999; } } /* -------------------------------------- .snsArea -------------------------------------- */ footer .snsArea { position: absolute; top:30px; left:5%; z-index:3; } footer .snsArea ul { list-style: none; position: relative; font-size:0; text-align: left; margin:0; padding:0; } footer .snsArea ul li { display: inline-block; margin:0 10px 0 0; } footer .snsArea ul li a { position: relative; z-index:1; display: block; width:35px; height:35px; text-align: center; color:#fff; -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; } footer .snsArea ul li a:hover { -webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);transform:scale(1.1,1.1); } footer .snsArea ul li a.x-twitter { background:#fff; } footer .snsArea ul li a.facebook { background:#41569e; } footer .snsArea ul li a.instagram { background:#427eff; background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; } footer .snsArea ul li a.youtube { background:#FF0000; } footer .snsArea ul li a.pinterest { background:#E60023; } footer .snsArea ul li a:before { position: absolute; top:0; right:0; bottom:0; left:0; z-index:0; font-size:18px; font-family:'FontAwesome'; line-height:36px; text-align: center; } footer .snsArea ul li a.x-twitter:before { content:"\e61b"; color:#000; } footer .snsArea ul li a.facebook:before { content:"\f09a"; } footer .snsArea ul li a.instagram:before { content:"\f16d"; } footer .snsArea ul li a.youtube:before { content:"\f167"; } footer .snsArea ul li a.pinterest:before { content:"\f231"; } @media screen and (max-width: 900px) { footer .snsArea { position: static; } footer .snsArea ul { text-align: center; } footer .snsArea ul li { display: inline-block; margin:0 5px; } footer .snsArea ul li a:hover { -webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform: scale(1,1); } } /* -------------------------------------- .snsArea -------------------------------------- */ .news-share .snsArea { margin-top: 10px ; } .news-share .snsArea ul { list-style: none; position: relative; font-size:0; text-align: right; margin:0; padding:0; } .news-share .snsArea ul li { display: inline-block; margin:0 10px 0 0; } .news-share .snsArea ul li a { position: relative; z-index:1; display: block; width:35px; height:35px; text-align: center; color:#fff; -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; } .news-share .snsArea ul li a:hover { -webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);transform:scale(1.1,1.1); } .news-share .snsArea ul li a.x-twitter { background:#000; } .news-share .snsArea ul li a.facebook { background:#41569e; } .news-share .snsArea ul li a.instagram { background:#427eff; background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; } .news-share .snsArea ul li a.line { background:#00B900; } .news-share .snsArea ul li a.pinterest { background:#E60023; } .news-share .snsArea ul li a:before { position: absolute; top:0; right:0; bottom:0; left:0; z-index:0; font-size:18px; font-family:'FontAwesome'; line-height:36px; text-align: center; } .news-share .snsArea ul li a.x-twitter:before { content:"\e61b"; color:#fff; } .news-share .snsArea ul li a.facebook:before { content:"\f09a"; } .news-share .snsArea ul li a.instagram:before { content:"\f16d"; } .news-share .snsArea ul li a.line:before { content:"\f3c0"; } .news-share .snsArea ul li a.pinterest:before { content:"\f231"; } @media screen and (max-width: 900px) { .news-share .snsArea { position: static; } .news-share .snsArea ul { text-align: center; } .news-share .snsArea ul li { display: inline-block; margin:0 5px; } .news-share .snsArea ul li a:hover { -webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform: scale(1,1); } } /* -------------------------------------- page-header -------------------------------------- */ .page-header {margin-top:35px;} .no-gutters { margin:0; padding:0;} .no-gutters　> .col, .no-gutters　> [class*="col-"] { margin:0; padding:0;} .page-header-image { width: 100%; height: calc(100vh - 35px); object-fit: cover; z-index: -1;} .overlay-content { width: 100%; height: calc(100vh - 35px);} @media only screen and (max-width: 738px) { .page-header { margin-top:30px;} .page-header-image { height: calc(100vh - 30px);} .overlay-content { height: calc(100vh - 30px);} } .br-20 { border-radius: 20px; } @media (min-width: 768px) { .nav-list li { position: relative; } .nav-list li:not(:last-child):after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; width: 2px; height: 16px; background-color: #d1d1d1; } } .palt { font-feature-settings: "palt"; } .mb025 > p { margin-bottom: 0.25rem; } .mw30 { min-width: 30%; } .fa { margin-right: 0.25rem; } .ml1 { margin-left: 1rem; } @media (max-width: 767px) { .compe-sp { display: block !important; /* 必要に応じて!importantを使用して既存のスタイルを上書き */ } .compe-sp > p { margin-top: 0; margin-bottom: 0.5rem!important; } .carousel-item img { height: 100%; object-fit: cover; } .mt-4 { margin-top: 0rem !important; } } .js-font {font-family: 'Ethnocentric Rg', sans-serif;} .rsv {width: 25px;} { position: relative; display: block; height: 100%; margin-right: 10px; background-color: #fff; border-radius: 11px 11px 10px 10px; } .result_detail { position: relative; padding: 0 10px; height: 35px; color: /*#F9CC46*/ #FFF; background-color: #24292e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; line-height: 1.1; border-radius: 10px 10px 0 0; } .result_detail .date-label { display: block; margin-right: 10px; border: 1px solid #FFF; padding: 0 5px; font-size: 10px; line-height: 16px; color: #fff; } .first_contents { height: calc(30vw); overflow-y: scroll; padding-left: 10px; } ul.first_contents>li.select { display: block; } ul.list>li { list-style-type: none; } .teaminf p { margin-bottom: 0px; } @media print, screen and (max-width: 768px) { .result_detail { border-radius: 0; } .first_contents { height: calc(100vw - (10px + 8px + 34px + 32px + 55px)); overflow-y: scroll; max-height: 100vh; } { border-radius: 0; } .first_contents { padding-left: 0px; } } /*@media print, screen and (min-width: 961px) {*/ @media print, screen and (min-width: 768px) { .gameresult_wrap .date { margin: 10px 10px 0px; font-size: 1rem; font-weight: 700; text-align: center; padding-bottom: 6px; border-bottom: 1px solid #fff; color: #fff; } .gameresult_wrap ul.list { margin: 0 10px 12px; min-height: 95%; } .gameresult_wrap ul.list .item { padding: 10px 10px; } .gameresult_wrap ul.list .item:nth-child(even) { background-color: #696969; } .gameresult_wrap ul.list .item .teaminf .event { position: relative; text-align: left; width: 78px; } .gameresult_wrap ul.list .item .teaminf .technique { position: relative; text-align: left; width: 50%; } .gameresult_wrap ul.list .item .teaminf .name { position: relative; text-align: left; width: 90px; } .gameresult_wrap ul.list .item_detail { margin: 0 auto; /*width: 94.6666%;*/ max-width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; font-weight: 700; color: #30373F; } .gameresult_wrap ul.list .item_detail .teaminf, .gameresult_wrap ul.list .item_detail .hifun, .gameresult_wrap ul.list .item_detail .score_state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .gameresult_wrap ul.list .item_detail .teaminf { width: 86%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /*.gameresult_wrap ul.list .item_detail .teaminf.leftteaminf { padding-left: 3%; }*/ .gameresult_wrap ul.list .item_detail .teaminf.rightteaminf { padding-right: 3%; /*border-right: 1px solid #D7D7D7;*/ margin-right: 8px; } .gameresult_wrap ul.list .item_detail .teaminf.leftteaminf, .gameresult_wrap ul.list .item_detail .teaminf.rightteaminf { padding-left: 0; padding-right: 0; text-align: left; } .gameresult_wrap ul.list .item_detail .teaminf .point { font-size: 19px } .gameresult_wrap ul.list .item_detail .teaminf .dscore { font-size: 19px; color: #C6C6C6; } .gameresult_wrap ul.list .item_detail .teaminf .escore { font-size: 19px; color: #C6C6C6; } -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; .gameresult_wrap ul.list .item_detail .teaminf .point { font-size: 20px; color: #C6C6C6; } .gameresult_wrap ul.list .item_detail .teaminf .point._ts { color: #30373F; } .gameresult_wrap ul.list .item_detail .teaminf .name { font-size: 14px; text-align: left; } .gameresult_wrap ul.list .item_detail .teaminf img { width: 34px; } .gameresult_wrap ul.list .item_detail .hifun { width: 5%; font-size: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*.gameresult_wrap ul.list .item_detail .score_state { width: 13%; }*/ .gameresult_wrap ul.list .item_detail .score_state a { display: block; } .gameresult_wrap ul.list .item_detail .score_state a img { width: 100%; } .scorestate_link-notice { background: #f9cc46; border: 2px solid #f9cc46; color: #001741; padding: 4px 0; box-sizing: border-box; border-radius: 11px; font-size: 10px; padding: 2px 10px 2px 10px; } .scorestate_link-notice:hover { background: #ffffff; border-color: #f9cc46; color: #001741 } .gameresult_wrap .bib-label { display: block; margin-right: 10px; border: 1px solid #fff; padding: 0 5px; font-size: 10px; line-height: 16px; width: 30px; text-align: center; } } @media screen and (max-width: 640px) { .result_detail .date-label { width: 21vw; text-align: center; } .result_detail { border-radius: 10px 10px 0 0; } { border-radius: 10px; } .first_contents { height: calc(130vw - (10px + 8px + 34px + 32px + 55px))!important; overflow-y: scroll; } .gameresult_wrap .date { margin: 5px 10px 0px; font-size: 12px; font-weight: 700; text-align: center; padding-bottom: 6px; border-bottom: 1px solid #fff; color: #000; } .gameresult_wrap ul.list .item .teaminf .event { position: relative; text-align: left; width: 78px; } .gameresult_wrap ul.list .item .teaminf .technique { position: relative; text-align: left; width: 50%; } .gameresult_wrap ul.list .item_detail .teaminf .name { pointer-events: none; text-align: left; width: 78px; } .gameresult_wrap ul.list { margin: 0 10px 12px; } .gameresult_wrap ul.list .item { padding: 10px 10px; } .gameresult_wrap ul.list .item:nth-child(even) { background-color: #696969; } .gameresult_wrap ul.list .item .teaminf .event { position: relative; text-align: left; width: 78px; } .gameresult_wrap ul.list .item .teaminf .technique { position: relative; text-align: left; width: 50%; } .gameresult_wrap ul.list .item .teaminf .name { position: relative; text-align: left; width: 90px; } .gameresult_wrap ul.list .item_detail { margin: 0 auto; /*width: 94.6666%;*/ max-width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; font-weight: 700; color: #30373F; } .gameresult_wrap ul.list .item_detail .teaminf, .gameresult_wrap ul.list .item_detail .hifun, .gameresult_wrap ul.list .item_detail .score_state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .gameresult_wrap ul.list .item_detail .teaminf { width: 86%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /*.gameresult_wrap ul.list .item_detail .teaminf.leftteaminf { padding-left: 3%; }*/ .gameresult_wrap ul.list .item_detail .teaminf.rightteaminf { padding-right: 3%; /*border-right: 1px solid #D7D7D7;*/ margin-right: 8px; } .gameresult_wrap ul.list .item_detail .teaminf.leftteaminf, .gameresult_wrap ul.list .item_detail .teaminf.rightteaminf { padding-left: 0; padding-right: 0; text-align: left; } .gameresult_wrap ul.list .item_detail .teaminf .point { font-size: 19px } .gameresult_wrap ul.list .item_detail .teaminf .dscore { font-size: 19px; color: #C6C6C6; } .gameresult_wrap ul.list .item_detail .teaminf .escore { font-size: 19px; color: #C6C6C6; } .live-card-f13 { font-size: 13px!important; } .gameresult_wrap ul.list .item_detail .teaminf .point { font-size: 20px; color: #C6C6C6; } .gameresult_wrap ul.list .item_detail .teaminf .point._ts { color: #30373F; padding-right: 10px; } .gameresult_wrap ul.list .item_detail .teaminf .name { font-size: 14px; text-align: left; } .gameresult_wrap ul.list .item_detail .teaminf img { width: 34px; } .gameresult_wrap ul.list .item_detail .hifun { width: 5%; font-size: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .gameresult_wrap ul.list .item_detail .score_state { margin-top: -5px; } .gameresult_wrap ul.list .item_detail .score_state a { display: block; } .gameresult_wrap ul.list .item_detail .score_state a img { width: 100%; } .scorestate_link-notice { background: #f9cc46; border: 2px solid #f9cc46; color: #001741; padding: 4px 0; box-sizing: border-box; border-radius: 11px; font-size: 10px; padding: 2px 10px 2px 10px; } .scorestate_link-notice:hover { background: #ffffff; border-color: #f9cc46; color: #001741 } .gameresult_wrap .bib-label { display: block; margin-right: 10px; border: 1px solid #fff; padding: 0 5px; font-size: 10px; line-height: 16px; width: 30px; text-align: center; } } .slider { padding: 30px 0 0 0; } .slick-slide { margin: 8px; } .slick-slide img { width: 768px; border-radius: 10px; } .text-below { display: block; width: 100%; padding: 15px 10px 5px; border-radius: 0 0 10px 10px; color: #fff; font-weight: 700; font-size: 1.25rem; /* テキストが折り返しを行わないようにする */ white-space: nowrap; /* テキストが領域を超えた場合に非表示にする */ overflow: hidden; /* 領域を超えた場合に省略記号(...)を表示 */ text-overflow: ellipsis; /* オプション: 最大のテキストの長さを設定 */ max-width: 100%; /* もしくは任意の幅 */ /* オプション: 行数を制限 */ /* テキストが1行で表示されるようにする */ display: block; } .br-10 { border-radius: 10px; } /* スライダーのスタイル */ .slick-slider { width: 100%; margin: 0 auto; } /* 矢印のスタイル */ .prev-arrow, .next-arrow { font-size: 20px; background-color: #fff; border-radius: 20px; z-index: 1; } /* 左矢印 */ .prev-arrow { left: 1px; } /* 右矢印 */ .next-arrow { right: 0; } /* 矢印のアイコンのスタイル */ .slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } @media screen and (max-width: 767px) { .slider { padding: 10px 0 0 0; } .slick-slide img { width: 300px; } .text-below { font-size: 1rem; width: 300px; } } .bg-deepblue { background-color: #003670; } .news-item { margin-bottom: 16px; border: 1px solid rgba(0, 0, 0, 0.125)!important; } .news-thumb { border-radius: 10px; } .scores-thumb { border-radius: 10px; } ul.list-group>li { list-style-type: none; } @media screen and (max-width: 767px) { .ls-dp { padding-left: 0px; } } .player-img { width: 150px!important; } .player_number { top: 0; position: absolute; font-size: 2rem; } .h7 { font-size: 0.75rem; } .text-deeppink { color: #e83e8c!important; } .rounded-3 { border-radius: 10px; } .goods-thumb { border-radius: 10px; } .goods { font-size: 0.9rem; line-height: 1rem; } .goods-price { font-size: 0.9rem; } .tax { font-size: 0.5rem; } @media screen and (max-width: 767px) { .e-shop { margin-top: 15px; } } .ranking-img { width: 150px!important; } .score-ranking { position: absolute; top: 0; font-size: 1.5rem; } .ranking-number { position: absolute; top: 30px; font-size: 1.25rem; color: #343a40 !important; } .ranking-player { position: absolute; top: 55px; font-size: 1.2rem; } .ranking-score { position: absolute; padding-left: 1rem; top: 170px; font-size: 2rem; /*color: #003670;*/ color: #F9CC46; -webkit-text-stroke-width: 0.1rem; -webkit-text-stroke-color: #fff; } .ranking-compe { position: absolute; top: 200px; font-size: 0.75rem; padding-left: 1.25rem; padding-top: 0.2rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; } .h8 { font-size: 0.5rem; color: #6c757d; } .schedule-body { border-bottom: 0.5px solid #dee2e6; } @media screen and (max-width: 767px) { .schedule { font-size: 0.8rem; } } .pt-2rem { padding-top: 2rem!important; } .text-nav { font-size: 1.25rem; font-weight: 700; padding-right: 1rem!important; padding-left: 1rem!important; } @media screen and (max-width: 961px) { .global-nav { display: block; } } .global-nav-list { display: flex; height: 66px; background-color: #6F7E90; } .global-nav-list > li { width: 20%; background-color: #F2F2F2; border-left: 1px solid #fff; color: #6F7E90; font-weight: bold; } .global-nav-list > li:first-child { border: none; } .global-nav-list > li.is-active { background-color: #fff; color: #F9CC46; } .global-nav-list .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 66px; padding: 9px 0 10px 0; color: #6F7E90; } .global-nav-list .nav-item-icon { height: 27px; } .global-nav-list .nav-item-text { flex-grow: 1; display: inline-flex; align-items: center; font-size: 10px; text-align: center; word-break: break-all; margin-top: 5px; } .global-tab-content { display: block; } .nav-pills .nav-link.active { background-color: #fff; } .global-nav-list .nav-link { padding: 0!important; } @media screen and (max-width: 767px) { .fixed-top { position: fixed; top: 0; width: 100vw; z-index: 1000; height: 60px; background-color: #6F7E90; /* 他の必要なスタイルを追加 */ } .fixed-top2 { position: fixed; top: 81px; width: 100%; z-index: 1; /*height: 60px;*/ background-color: #6F7E90; /* 他の必要なスタイルを追加 */ } .text-xs-right { text-align: right !important; } .ps-sm-0 { padding-left: 0!important; padding-right: 0!important; } } .w-100 { width: 100%!important; } iframe.youtube-16-9 { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* 点滅 */ .blink { animation: blinking 1s ease-in-out infinite alternate; } @keyframes blinking { 0% {opacity: 0;} 100% {opacity: 1;} } .breadcrumb-bg-dark { background-color: #24292E!important; /* bg-dark の背景色 */ width: 100%; /* 横幅いっぱい */ padding: 10px; /* 適切な余白を設定してください */ color: #fff; /* テキストの色 */ border-top: 0.5px solid; } .breadcrumb { background-color: #24292E!important; /* bg-dark の背景色 */ } .breadcrumb-item a { color: #fff!important; } @media screen and (max-width: 767px) { .news .h2 { font-size: 1.25rem!important; } } .breadcrumb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; display: block; } .news_content { font-size: larger; } .clubDetail { display: flex; width: 100%; height: auto; } @media screen and (max-width: 1700px) { .clubDetail { height: 350px; } } @media screen and (max-width: 961px) { .clubDetail { height: 250px; } } @media screen and (max-width: 641px) { .clubDetail { display: block; height: auto; } } .clubDetail-media { width: 50%; height: 100%; min-height: 350px; overflow: hidden; position: relative; } @media screen and (max-width: 961px) { .clubDetail-media { min-height: 250px; } } @media screen and (max-width: 641px) { .clubDetail-media { min-height: 51.2820512821vw; } } .clubDetail-media-contents { left: 50%; min-height: 100%; min-width: 100%; position: absolute; top: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 961px) { .clubDetail-media-contents { min-height: initial; min-width: initial; width: auto; height: 100%; top: 0; transform: translate(-50%, 0); } } @media screen and (max-width: 641px) { .clubDetail-media { width: 100%; } } @media screen and (max-width: 641px) { .clubDetail-media video.clubDetail-media-contents { height: auto; top: 50%; transform: translate(-50%, -50%); } } @media screen and (max-width: 641px) { .clubDetail-media img.clubDetail-media-contents { /*left: 43%;*/ } } .clubDetail-main { display: flex; align-items: center; width: 50%; } @media screen and (max-width: 641px) { .clubDetail-main { display: block; width: 100%; } } .clubDetail-main-inner { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 50px 30px 40px 98px; border-bottom: 10px solid #ccc; background: #24292E!important; position: relative; } @media screen and (max-width: 961px) { .clubDetail-main-inner { padding: 30px 20px 30px 70px; } } @media screen and (max-width: 641px) { .clubDetail-main-inner { display: block; padding: 40px 20px 30px; } } .chibajets .clubDetail-main-inner { border-color: #F0001E; } .clubDetail .clubDetail-logo { display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 50%; background: #24292E!important; position: absolute; left: 0; top: calc(50% - 84px); transform: translatex(-50%); } @media screen and (max-width: 961px) { .clubDetail .clubDetail-logo { width: 100px; height: 100px; top: calc(50% - 50px); } } .clubDetail .clubDetail-logo > img { width: 100px; height: auto; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-logo > img { width: 70px; } } @media screen and (max-width: 641px) { .clubDetail .clubDetail-logo { transform: translate(0, -40px); width: 80px; height: 80px; left: calc(50% - 40px); top: 0; } .clubDetail .clubDetail-logo > img { width: 60px; } } .clubDetail .clubDetail-name { margin-bottom: 5px; font-size: 31px; text-align: left; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-name { font-size: 22px; } } .clubDetail .clubDetail-name-alphabet { display: block; font-size: 1.25rem; color: #f9cc46; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-name-alphabet { font-size: 18px; } } .chibajets .clubDetail .clubDetail-name-alphabet { color: #F0001E; } .clubDetail .clubDetail-slogan { margin-bottom: 5px; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-slogan { font-size: 12px; } } .clubDetail .clubDetail-grades { display: flex; align-items: center; } .clubDetail .clubDetail-grades-winOrLose { display: flex; align-items: center; font-size: 24px; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-grades-winOrLose { font-size: 19px; } } .clubDetail .clubDetail-grades-num { font-size: 25px; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-grades-num { font-size: 25px; } } .clubDetail .clubDetail-grades-hifun { margin: 0 5px; display: inline-block; width: 16px; height: 4px; background: #27313C; } .clubDetail .clubDetail-grades-info { margin-left: 20px; } @media screen and (max-width: 800px) { .clubDetail .clubDetail-grades-info { margin-left: 10px; } } @media screen and (max-width: 641px) { .clubDetail .clubDetail-grades-info { margin-left: 20px; } } .clubDetail .clubDetail-grades-rank { font-size: 16px; } .clubDetail .clubDetail-grades-rank-bold { font-weight: bold; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-grades-rank { font-size: 10px; } } @media screen and (max-width: 961px) { .clubDetail .clubDetail-grades-headCoach { font-size: 12px; } } .clubDetail .clubDetail-achievement-item { display: flex; } .clubDetail .clubDetail-achievement-name { display: inline-block; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-achievement-name { font-size: 10px; } } @media screen and (max-width: 961px) { .clubDetail .clubDetail-achievement-colon { font-size: 10px; } } .clubDetail .clubDetail-achievement-win { display: inline-block; min-width: 2em; text-align: right; } @media screen and (max-width: 961px) { .clubDetail .clubDetail-achievement-win { font-size: 10px; } } .club_flag { z-index: 0; position: absolute; padding: 2rem !important; top: 0; left: 0; opacity: 0.1; z-index: -1; } @media screen and (max-width: 961px) { .club_flag { padding: 1rem !important; } .club_player::after { bottom: 1rem!important; } } .club_player { position: relative; } .club_player::after { content: ""; position: absolute; bottom: 1.49rem!important; left: 0; width: 100%; height: 30%; background: linear-gradient(to top, rgba(33, 37, 41, 0.8), rgba(33, 37, 41, 0)); /* 暗い背景に対応 */ pointer-events: none; } .club_player .player_name { position: absolute; z-index: 99; } .main { margin-top:120px; } @media only screen and (max-width: 738px) { .main { margin-top:105px; } } .archive { width: 360px!important; } .archive img { width: 360px!important; height: 201.98px!important; object-fit: cover; } .schedule_nav { width: 80px; height: 60px; text-align: center; } .fixed { position: fixed; width: 100vw; top: 0; z-index: 1000; } /* SNS */ .twitterArea { background-color: #1E4591; border-bottom: 3px solid #fff; } .twitterArea .inner { position: relative; padding: 80px 0 70px;} .twitterArea h2 { position: absolute; top: calc(50% - 29px); left: -100px!important; -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform: rotate(-90deg); margin: 0 !important; color: #fff; } .twitterArea h2 .ttl-en { border-left: 4px solid #fff !important; border-right: 4px solid #fff !important; } .twitterArea .twitter-feed { padding-left: 11%; } .twitterArea .twitter-feed .tweet-wrapper { position: relative; width: 24%; margin-bottom: 12px; } .twitterArea .twitter-feed .tweet-wrapper .feed { height: calc((1160px - 128px) * 0.24); background-color: #fff; webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .twitterArea .twitter-feed .tweet-wrapper .feed a { display: block; height: 100%; color: #000; } .twitterArea .twitter-feed .tweet-wrapper .feed a:hover:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; } .twitterArea .twitter-feed .tweet-wrapper .feed span { color: #1DA1F2; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed { padding: 10px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-header .avatar { float: left; width: 40px; height: 40px; border-radius: 20px; /*border: 1px solid #707070;*/ } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-header .nameArea { height: 40px; margin-bottom: 16px; padding-left: 48px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-header .nameArea .name { padding-top: 4px; line-height: 1.2; font-weight: bold; font-size: 13px; font-feature-settings: "palt"; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-header .nameArea .username { font-size: 12px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { position: relative; max-height: calc(13 * 1.5 * 6 * 1px); line-height: 1.5; font-size: 13px; word-break: break-all; overflow: hidden; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before, .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:after { position: absolute; background: #fff; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { content: "..."; top: calc(13 * 1.5 * (6 - 1) * 1px); right: 0; width: 1.2em; text-align: center; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:after { content: ""; width: 100%; height: 100%; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-footer { position: absolute; bottom: 8px; right: 4px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-footer span.date { font-size: 13px; } .twitterArea .twitter-feed .tweet-wrapper .feed.img-feed { padding: 4px; } .twitterArea .twitter-feed .tweet-wrapper .feed.img-feed img { height: calc(((1160px - 200px) * 0.24) - 8px); -o-object-fit: cover; object-fit: cover; } /*.twitterArea .twitter-feed .tweet-wrapper .feed.img-feed:before,*/ /*.twitterArea .twitter-feed .tweet-wrapper .feed.movie-feed:before {*/ /* content: "";*/ /* position: absolute;*/ /* top: 9px;*/ /* right: 9px;*/ /* width: 32px;*/ /* height: 32px;*/ /* background-color: rgba(0, 0, 0, 0.2);*/ /* background-image: url(../img/common/Twitter_Logo_WhiteOnImage.png);*/ /* background-position: center center;*/ /* background-size: 90% 90%;*/ /* z-index: 1; }*/ @media screen and (max-width: 1160px) { .twitterArea .twitter-feed { padding-left: 12vw; } .twitterArea .twitter-feed .tweet-wrapper { height: calc((100vw - 40px - 12vw) * 0.24); } .twitterArea .twitter-feed .tweet-wrapper .feed { height: inherit; } .twitterArea .twitter-feed .tweet-wrapper .feed.img-feed img { height: calc(((100vw - 40px -8vw) * 0.24) - 8px); } } @media screen and (max-width: 991px) { .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(13 * 1.5 * 3 * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(13 * 1.5 * (3 - 1) * 1px); } } @media screen and (max-width: 768px) { .twitterArea .inner { position: relative; padding: 40px 0 30px;} .twitterArea h2 { position: static; -ms-transform: 0; transform: 0; -webkit-transform: rotate(0); margin-bottom: 18px !important; } .twitterArea .twitter-feed { padding: 0; } .twitterArea .twitter-feed .tweet-wrapper { width: 49%; height: calc((100vw - 40px) * 0.49); } .twitterArea .twitter-feed .tweet-wrapper .feed { height: inherit; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(13 * 1.5 * 5 * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(13 * 1.5 * (5 - 1) * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.img-feed img { height: calc(((100vw - 40px) * 0.49) - 8px); } } @media screen and (max-width: 480px) { /* .twitterArea{ margin-bottom: 1px; } */ .twitterArea h2 .ttl-en { letter-spacing: 0.05em; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(13 * 1.5 * 3 * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(13 * 1.5 * (3 - 1) * 1px); } } @media screen and (max-width: 320px) { .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed { padding: 10px 10px 8px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-header .nameArea { margin-bottom: 6px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(11 * 1.5 * 3 * 1px); font-size: 11px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(11 * 1.5 * (3 - 1) * 1px); width: 1em; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-footer { bottom: 4px; } } @media screen and (max-width: 768px) { /* .twitterArea .twitter-feed .tweet-wrapper { width: 49%; height: calc((100vw - 40px) * 0.49); } .twitterArea .twitter-feed .tweet-wrapper .feed { height: inherit; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(13 * 1.5 * 5 * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(13 * 1.5 * (5 - 1) * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.img-feed img, .twitterArea .twitter-feed .tweet-wrapper .feed.movie-feed img { height: calc(((100vw - 40px) * 0.49) - 8px); } } */ } @media screen and (max-width: 480px) { /* .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(13 * 1.5 * 3 * 1px); } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(13 * 1.5 * (3 - 1) * 1px); } */ } @media screen and (max-width: 320px) { /* .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed { padding: 10px 10px 8px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-header .nameArea { margin-bottom: 6px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p { max-height: calc(11 * 1.5 * 3 * 1px); font-size: 11px; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-content p:before { top: calc(11 * 1.5 * (3 - 1) * 1px); width: 1em; } .twitterArea .twitter-feed .tweet-wrapper .feed.text-feed .feed-footer { bottom: 4px; } */ } h2 { margin-bottom: 40px; font-weight: normal; line-height: 1.7; } /* h2 */ .home h2 { margin: 0 auto 60px; text-align: center; } .home h2 .ttl-en { line-height: 1; margin-bottom: 16px; padding: 0 40px; display: inline-block; border-left: 4px solid #2D2F33; border-right: 4px solid #2D2F33; font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 700; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .home h2 { margin: 0 auto 24px; } .home h2 .ttl-en { margin-bottom: 10px; padding: 0 16px; border-left: 3px solid #2D2F33; border-right: 3px solid #2D2F33; font-size: 1.8rem; } } @media screen and (max-width: 320px) { .home h2 .ttl-en { padding: 0 20px; font-size: 1.6rem; } } /* button */ @media screen and (max-width: 768px) { html { font-size: 14px; } } /* link */ /* float */ /* smartphone */ @media screen and (min-width: 768px) { .pc-only { display: block; } } @media screen and (max-width: 768px) { .pc-only { display: none!important; } } /* layout */ img { width: 100%; vertical-align: middle; } .flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contentsArea-fill { max-width: 100vw; } .contentsArea-fill > .inner { max-width: 1160px; margin: 0 auto; padding: 70px 0; } @media screen and (max-width: 1160px) { .contentsArea-fill > .inner { max-width: calc(100vw - 40px); } } @media screen and (max-width: 768px) { .contentsArea-fill > .inner { margin: 0 20px; padding: 28px 0; } } /* open */ @media screen and (max-width: 768px) { /* #global-nav OPEN */ /* #nav-toggle 切り替えアニメーション */ } .obj-cover { -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover'; } .search-nav-box input::placeholder-shown { color: #afafaf; } /* Animation */ /* img effect ------- top-dowm */ .imgEffectAnime { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.0s; animation-duration: 1.0s; -webkit-animation-name: imgEffectAnime; animation-name: imgEffectAnime; visibility: visible !important; } @-webkit-keyframes imgEffectAnime { 0% { opacity: 0; -webkit-transform: translateY(-55px); -ms-transform: translateY(-55px); transform: translateY(-55px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes imgEffectAnime { 0% { opacity: 0; -webkit-transform: translateY(-55px); -ms-transform: translateY(-55px); transform: translateY(-55px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* img effect ------- left-right */ /* img effect ------- right - left */ /* img effect ------- _bottom_top */ /* FOOTER NAVI */ @media (max-width: 768px) { .scrollableNavigationBar { position: fixed; /* 画面下部に固定 */ bottom: 0; /* 下端に配置 */ left: 0; right: 0; display: block; overflow-x: auto; /* 横スクロール有効 */ overflow-y: hidden; /* 縦スクロール無効 */ background: #24292e; /* 背景色 */ scrollbar-width: none; /* Firefoxでスクロールバー非表示 */ z-index: 9999; /* 他要素より前面に表示 */ } .scrollableNavigationBar ul { display: flex; justify-content: space-between; /* 均等配置 */ list-style: none; /* リストマーカー非表示 */ padding: 0; /* デフォルトの余白を削除 */ margin: 0; /* デフォルトの余白を削除 */ width: calc(25% + 20rem); /* 画面幅に合わせる */ } .scrollableNavigationBar ul>li { flex: 0 0 20%; /* 各アイテムを幅20%で固定 (横に5個配置) */ text-align: center; /* テキストを中央揃え */ box-sizing: border-box; /* パディングやボーダーを含めた幅調整 */ border: 1px solid #8477a0; } .scrollableNavigationBar ul>li+li { border-left: none; } .scrollableNavigationBar ul>li>a, .scrollableNavigationBar ul>li>a>img { display: block; width: 100%; /* アイテム内で全幅に */ height: auto; /* アスペクト比を保つ */ } /* Webkit系ブラウザのスクロールバーを非表示 */ .scrollableNavigationBar::-webkit-scrollbar { display: none; } } /* FOOTER NAVI */ .newsList > li { position: relative; } .newsList > li:after { background: #d6d6d6; /* ボーダーの色 */ bottom: 0; content: ""; display: block; height: 1px; /* ボーダーの高さ */ left: 0; margin-left: 15px; position: absolute; width: calc(100% - 30px); /* 横幅をリストアイテムの幅に合わせる */ } /* ベーススタイル */ .news-link { text-decoration: none; display: inline-flex; align-items: center; /* 垂直方向に中央揃え */ gap: 8px; /* NEWSとアイコンの間のスペース */ } /* アイコンのネオン風エフェクト */ .neon-icon_primary { font-size: 20px; /* アイコンのサイズ */ color: #007bff; /* 濃い青 */ text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 20px #00f, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 100px #0ff; } .neon-icon_white { color: #fff; /* ベースの色は白 */ text-shadow: 0 0 2.5px #fff, /* 小さな白い光 */ 0 0 5px #fff, /* 少し広がった白い光 */ 0 0 10px #ccc, /* 明るいグレーの光 */ 0 0 20px #ccc, /* より広がったグレーの光 */ 0 0 40px #bbb; /* 一番外側の薄い光 */ }