/*
Theme Name: AL-Theme
Theme URI:
Author: Tk
Author URI:
Description: アジアリーグアイスホッケー – Asia League Ice Hockey
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ice-hockey-theme
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
font-family: 'Freshman';
src: url('fonts/Freshman.ttf') format('truetype');
}
.quantico-regular {
font-family: "Quantico", sans-serif;
font-weight: 400;
font-style: normal;
}
.quantico-bold {
font-family: "Quantico", sans-serif;
font-weight: 700;
font-style: normal;
}
.quantico-regular-italic {
font-family: "Quantico", sans-serif;
font-weight: 400;
font-style: italic;
}
.quantico-bold-italic {
font-family: "Quantico", sans-serif;
font-weight: 700;
font-style: italic;
}
.noto-sans-jp {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.pc {
display: block;
}
.sp {
display: none;
}
.spsp {
display: none;
}
body {
background-color: #000000;
color: #ffffff;
font-family: 'Noto Sans JP', sans-serif;
margin: 0;
padding: 0;
letter-spacing: 0.02em;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.no-img {
background: #eee;
width: 100%;
height: 100%;
}
.container {
max-width: 1800px;
margin: 0 auto;
padding: 10px 40px 0px 40px;
}
.two-column-layout {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 350px;
}
.main-column {
width: 68%;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
}
.sidebar-column {
width: 29%;
}
.header-score-ticker {
background-color: #f8f8f8;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.ticker-inner {
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.ticker-arrow {
background: none;
border: 1px solid #002b5c;
color: #002b5c;
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
cursor: pointer;
flex-shrink: 0;
transition: all 0.3s;
margin: 0 10px;
}
.ticker-arrow:hover {
background: #002b5c;
color: #fff;
}
.ticker-slider-wrap {
flex-grow: 1;
overflow-x: hidden;
scroll-behavior: smooth;
margin: 0 10px;
}
.ticker-slider-track {
display: flex;
gap: 40px;
}
.ticker-day-group {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.ticker-date-col {
display: flex;
flex-direction: column;
}
.ticker-date-col .label {
font-size: 0.75rem;
color: #000000;
margin-bottom: 2px;
}
.ticker-date-col .date {
font-family: "Quantico", sans-serif;
font-size: 1.5rem;
font-weight: 400;
color: #111;
display: flex;
align-items: baseline;
gap: 5px;
}
.ticker-date-col .day {
font-size: 1.2rem;
font-weight: 400;
}
.ticker-games-row {
display: flex;
gap: 15px;
}
.ticker-game-card {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.ticker-game-card .team-col {
display: flex;
flex-direction: column;
align-items: center;
width: 60px;
}
.ticker-game-card .team-col img {
height: 35px;
width: auto;
object-fit: contain;
margin-bottom: 8px;
}
.ticker-game-card .badge {
font-family: "Quantico", sans-serif;
font-size: 0.65rem;
color: #fff;
padding: 3px 12px;
border-radius: 3px;
font-weight: 900;
letter-spacing: 0.05em;
}
.ticker-game-card .badge.home {
background-color: #b0000f;
}
.ticker-game-card .badge.away {
background-color: #3b6b9e;
}
.ticker-game-card .score-col {
font-family: "Quantico", sans-serif;
font-size: 2rem;
font-weight: 900;
color: #111;
white-space: nowrap;
}
.site-header {
background-color: #000000;
}
.header-inner {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.site-logo img {
height: 40px;
}
.global-nav ul {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.global-nav li {
text-align: center;
line-height: 0.25;
}
.global-nav a {
font-family: "Quantico", sans-serif;
font-size: 0.8rem;
font-weight: 900;
color: #ffffff;
line-height: 1.2;
}
.global-nav p {
font-weight: 400;
font-size: 0.75rem;
}
.header-login-box {
display: flex;
}
.header-login {
margin-left: 20px;
flex-shrink: 0;
}
.header-login-sp {
display: none;
}
.btn-login {
background-color: #D0B970;
font-family: "Noto Sans JP", sans-serif;
color: #fefdfd;
padding: 8px 12px;
font-size: 0.8rem;
font-weight: 400;
text-align: center;
display: block;
line-height: 1.2;
clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%);
}
.hero-section {
position: relative;
height: auto;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url('http://al-website.local/wp-content/themes/ice-hockey-theme/images/5a1df7f3118cae4c997d78ea9a91178c245cc08c.jpg');
}
.hero-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
margin-bottom: -350px;
}
.hero-copy {
text-align: left;
padding: 5%;
}
.hero-copy h2 {
font-family: "Quantico", sans-serif;
font-size: 7.5rem;
color: #b70b1a;
margin: 0 0 10px;
line-height: 0.8;
font-weight: 900;
}
.hero-copy p {
font-size: 1.75rem;
font-weight: 600;
color: #000;
margin: 0;
width: fit-content;
}
.hero-copy span {
height: 4px;
display: block;
}
.hero-upcoming-games {
width: 100%;
padding: 2.5% 5% 5% 5%;
box-sizing: border-box;
max-width: 1800px;
margin: auto;
}
.hero-slider-track {
display: flex;
gap: 30px;
justify-content: space-around;
}
.card-shadow-wrapper {
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}
.hero-game-card {
background-color: #fff;
width: 280px;
height: 340px;
padding: 30px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
display: flex;
flex-direction: column;
}
.hero-game-card .date {
font-family: "Quantico", sans-serif;
font-size: 2rem;
font-weight: 900;
margin: 0;
color: #111;
text-align: center;
font-style: italic;
}
.hero-game-card .day {
font-size: 1.1rem;
color: #B50606;
}
.hero-game-card .arena-name {
font-size: 0.8rem;
font-weight: 700;
color: #666;
text-align: center;
margin: 5px 0 15px;
}
.hero-game-card .matchup-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
flex-grow: 1;
}
.hero-game-card .team-logo {
width: 75px;
}
.hero-game-card .vs {
font-family: "Quantico", sans-serif;
font-weight: 900;
color: #ccc;
font-size: 1.4rem;
font-style: italic;
}
.btn-ticket {
display: inline-block;
background-color: #00479d;
color: #fff;
padding: 12px 0;
width: 100%;
text-align: center;
transform: skewX(-15deg);
font-weight: 900;
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
margin-top: auto;
}
.btn-ticket .inner {
display: block;
transform: skewX(15deg);
}
main.main-column section {
margin-bottom: 60px;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
background: #fff;
padding: 20px;
}
.sec-title {
font-family: "Quantico", sans-serif;
font-size: 2.4rem;
font-weight: 900;
color: #111;
margin: 0 0 10px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.sec-title .arrow {
color: #B50606;
font-style: normal;
font-size: 2.5rem;
margin-left: 10px;
font-weight: 200;
padding-bottom: 5px;
}
.sec-sub {
font-size: 1rem;
font-weight: 400;
color: #111;
margin: 0 0 30px;
}
.list-item {
display: flex;
gap: 25px;
margin-bottom: 25px;
}
.list-item:last-child {
margin-bottom: 0;
}
.list-item .thumb {
width: 220px;
height: 120px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
}
.list-item .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.list-item .text {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.list-item .meta-row {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.list-item .meta-row .date {
color: #B50606;
font-size: 1rem;
font-weight: 600;
line-height: 1;
}
.list-item .meta-row .category {
background-color: #cce0f5;
color: #111;
font-size: 0.75rem;
font-weight: 700;
padding: 3px 12px;
line-height: 1.2;
}
.list-item .text h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.6;
color: #111;
}
.grid-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px 20px;
}
.video-card {
display: flex;
flex-direction: column;
}
.video-card .thumb {
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
aspect-ratio: 16 / 9;
background-color: #eee;
}
.video-card .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.video-card .thumb:hover img {
transform: scale(1.05);
}
.video-card .date {
color: #b0000f;
font-family: "Quantico", sans-serif;
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
}
.video-card h3 {
font-size: 0.9rem;
font-weight: 700;
color: #111;
margin: 0;
line-height: 1.5;
}
.video-card h3 a {
color: inherit;
text-decoration: none;
}
.yt-item iframe,
.ig-item iframe {
width: 100%;
height: 200px;
}
.partner-banners {
display: flex;
justify-content: flex-start;
gap: 40px;
}
.partner-banner-link {
display: block;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.partner-banner-link img {
width: 100%;
height: auto;
display: block;
}
.partner-banner-link .btn-detail {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #d4ba75, #bd9f52);
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.85rem;
font-weight: 700;
padding: 12px 40px;
display: flex;
justify-content: center;
align-items: center;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: filter 0.3s ease;
}
.partner-banner-link:hover .btn-detail {
filter: brightness(1.1);
}
.yt-card {
display: flex;
flex-direction: column;
}
.yt-card .yt-thumb {
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 9 / 16;
background-color: #eee;
}
.yt-card .yt-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.yt-card .yt-thumb:hover img {
transform: scale(1.05);
}
.ig-card {
display: flex;
flex-direction: column;
}
.ig-card .ig-thumb {
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 1 / 1;
background-color: #eee;
}
.ig-card .ig-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.ig-card .ig-thumb:hover img {
transform: scale(1.05);
}
.promo-area {
text-align: center;
margin-top: 40px;
}
.promo-text {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.6;
margin-bottom: 20px;
color: #111;
}
.btn-promo-gold {
display: inline-flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #d4ba75, #bd9f52);
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
font-weight: 700;
padding: 15px 40px;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
transition: filter 0.3s ease;
}
.btn-promo-gold:hover {
filter: brightness(1.1);
}
.more-btn-center {
text-align: center;
margin-top: 20px;
}
.btn-premium {
display: inline-block;
background: #cda434;
color: #fff;
padding: 12px 30px;
font-weight: 900;
}
.side-schedule {
background: #fff;
margin-bottom: 30px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);
}
.sec-title-red {
background-color: #b0000f;
color: #fff;
font-family: "Quantico", sans-serif;
font-size: 2rem;
font-weight: 600;
padding: 35px 20px 15px 40px;
margin: 0;
display: flex;
justify-content: flex-start;
align-items: center;
/* gap: 20px; */
}
.sec-title-red .arrow {
font-style: normal;
font-weight: 200;
padding-bottom: 5px;
margin-left: 10px;
font-size: 2.5rem;
}
.side-date-group {
padding: 30px 20px 10px;
border-bottom: 1px solid #eee;
}
.side-date-group:last-child {
border-bottom: none;
}
.side-date-header {
font-size: 2.2rem;
font-weight: 600;
text-align: center;
display: block;
margin-bottom: 25px;
color: #111;
line-height: 1;
}
.side-date-header span {
font-size: 1.2rem;
margin-left: 5px;
}
.side-match-row {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 25px;
}
.side-team {
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
}
.side-team img {
height: 120px;
width: auto;
object-fit: contain;
margin-bottom: 8px;
}
.side-team .badge {
font-family: "Quantico", sans-serif;
font-size: 0.65rem;
color: #fff;
padding: 3px 10px;
border-radius: 2px;
font-weight: 900;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.side-team .badge.home {
background-color: #b0000f;
}
.side-team .badge.away {
background-color: #3b6b9e;
}
.side-time-event {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 60px;
}
.side-time-event .time {
font-size: 1.2rem;
font-weight: 600;
color: #111;
line-height: 1;
}
.event-icon-box {
position: relative;
width: 36px;
margin-top: 5px;
display: flex;
justify-content: center;
}
.event-icon-box img {
width: 100%;
height: auto;
display: block;
}
.event-icon-box .event-text {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
font-family: "Quantico", sans-serif;
font-size: 0.6rem;
font-weight: 900;
color: #a18741;
letter-spacing: 0.02em;
line-height: 1;
}
.side-ranking {
background: #fff;
position: relative;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 0px) 100%, 0 100%, 0 40px);
}
.ranking-inner {
padding: 40px 60px;
}
.ranking-table {
width: 100%;
border-collapse: collapse;
}
.ranking-table th {
font-size: 0.75rem;
font-weight: 700;
color: #111;
padding: 20px 5px 10px;
border-bottom: 1px solid #ddd;
}
.ranking-table td {
padding: 12px 5px;
border-bottom: 1px solid #ddd;
text-align: center;
vertical-align: middle;
}
.ranking-table tr.border-red td {
border-bottom: 2px solid #b0000f;
}
.ranking-table .rank-num {
font-weight: 900;
font-size: 1.8rem;
color: #111;
width: 15%;
}
.ranking-table .team-logo {
width: 35%;
}
.ranking-table .team-logo img {
height: 35px;
width: auto;
object-fit: contain;
margin: 0 auto;
}
.ranking-table .points-num,
.ranking-table .stats-num {
font-weight: 600;
font-size: 1.1rem;
color: #111;
}
.ranking-bottom-dec {
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #b0000f;
z-index: 1;
}
.side-mvp {
background-color: #cca950;
padding: 35px 25px;
margin-bottom: 30px;
text-align: center;
clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.mvp-title-img {
width: 160px;
margin: 0 auto 25px;
display: block;
}
.mvp-card {
background: transparent;
padding: 0;
}
.mvp-photo-wrap {
position: relative;
width: 100%;
background-color: #fff;
margin-bottom: 15px;
}
.mvp-photo-wrap .mvp-player-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.mvp-team-logo {
position: absolute;
bottom: 0;
left: 0;
width: 75px;
height: 75px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.mvp-team-logo img {
width: 100%;
height: auto;
object-fit: contain;
}
.mvp-info {
text-align: left;
color: #fff;
}
.mvp-info .mvp-position {
font-size: 1rem;
font-weight: 400;
margin: 0 0 5px;
letter-spacing: 0.05em;
}
.mvp-info .mvp-name {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
letter-spacing: 0.05em;
}
.side-banner-guide {
margin-bottom: 30px;
}
.guide-bg {
display: block;
background-size: cover;
background-position: center;
text-align: center;
color: #fff;
text-decoration: none;
clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.guide-overlay {
background: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
min-height: 420px;
}
.guide-overlay h3 {
font-size: 1.6rem;
font-weight: 700;
margin: 0 0 15px;
line-height: 1.3;
letter-spacing: 0.05em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.guide-overlay p {
font-size: 0.95rem;
font-weight: 700;
margin: 0;
letter-spacing: 0.05em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.site-footer {
background: #fff;
color: #111;
width: 100%;
margin-top: 5%;
}
.footer-sponsors {
padding: 60px 20px;
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
.sponsor-block {
margin-bottom: 50px;
}
.sponsor-block:last-child {
margin-bottom: 0;
}
.sponsor-title {
font-size: 1.2rem;
font-weight: 900;
margin: 0 0 25px;
}
.sponsor-logos {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.sponsor-logos img {
height: auto;
max-height: 50px;
object-fit: contain;
padding: 5px;
}
.sponsor-logos.center img {
max-height: 80px;
}
.footer-social {
border-top: 1px solid #ddd;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
position: relative;
}
.social-icon img {
width: 35px;
height: 35px;
object-fit: contain;
transition: opacity 0.3s ease;
}
.social-icon:hover img {
opacity: 0.7;
}
.footer-bottom {
background-color: #000;
color: #fff;
padding: 30px 20px;
}
.footer-bottom-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-logo img {
height: 60px;
width: auto;
}
.footer-nav {
display: flex;
gap: 30px;
list-style: none;
margin: 0 0 0 40px;
padding: 0;
flex-grow: 1;
}
.footer-nav a {
color: #fff;
font-size: 0.85rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
transition: color 0.3s ease;
}
.footer-nav a span {
color: #B50606;
font-weight: 700;
font-size: 1rem;
}
.footer-nav a:hover {
color: #ddd;
}
.footer-copyright {
font-size: 0.7rem;
color: #999;
font-family: Arial, sans-serif;
}
@media screen and (max-width: 991px) {
.footer-bottom-inner {
flex-direction: column;
align-items: flex-start;
align-items: center;
}
.footer-nav {
margin-left: 0;
flex-direction: column;
gap: 15px;
}
.footer-copyright {
margin-top: 20px;
}
.sponsor-logos {
flex-direction: column;
}
.footer-social {
padding: 5px 0;
}
.footer-nav a {
justify-content: center;
}
.partner-banner-link .btn-detail {
padding: 10px 20px;
}
}
.game-card-wrapper {
width: 270px;
background: #fff;
padding: 6px;
clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.4));
}
.game-card-border {
background: #111;
padding: 1px;
height: 100%;
clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px);
}
.game-card-content {
background: #fff;
height: 100%;
display: flex;
flex-direction: column;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
font-family: 'Noto Sans JP', sans-serif;
position: relative;
}
.gc-info {
text-align: center;
padding: 10px;
border-bottom: 1px solid #ddd;
margin: 0;
position: relative;
z-index: 2;
}
.gc-date {
font-family: "Quantico", sans-serif;
font-weight: 900;
font-size: 2.2rem;
color: #111;
display: flex;
align-items: baseline;
justify-content: center;
margin: 0 0 10px;
padding-right: 5px;
}
.gc-date .day-time {
font-size: 1rem;
}
.gc-arena {
font-size: 1rem;
color: #111;
font-weight: 700;
margin: 0;
}
.gc-teams {
position: relative;
padding: 25px 20px 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 75px;
z-index: 2;
}
.gc-bg-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
height: auto;
z-index: 0;
pointer-events: none;
}
.gc-team {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.gc-logo {
margin-bottom: 5px;
object-fit: contain;
width: 100%;
padding: 5%;
}
.gc-team-name-sub {
font-family: "Quantico", sans-serif;
font-size: 0.65rem;
font-weight: 900;
color: #111;
margin: 0;
line-height: 1;
}
.gc-team-name-main {
font-family: "Quantico", sans-serif;
font-size: 1.4rem;
font-weight: 900;
color: #111;
margin: 0 0 10px;
line-height: 1;
}
.gc-badge {
font-family: "Quantico", sans-serif;
font-weight: 400;
font-size: 0.85rem;
color: #fff;
padding: 4px 25px;
border-radius: 2px;
letter-spacing: 0.05em;
}
.gc-badge.home {
background-color: #B50606;
}
.gc-badge.away {
background-color: #2b5a9b;
}
.gc-footer {
background-color: #222;
color: #fff;
text-align: center;
padding: 12px 10px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-top: auto;
z-index: 2;
}
@media screen and (max-width: 1300px) {
.header-login-box {
flex-direction: column;
}
.hero-copy h2 {
font-size: 6.5rem;
}
}
@media screen and (max-width: 991px) {
.pc {
display: none;
}
.sp {
display: block;
}
.sp span {
height: 200px;
display: block;
}
.partner-banners {
flex-direction: column;
}
.hero-copy h2 {
font-size: 5.5rem;
line-height: 1;
}
.hero-copy p {
font-size: 1.25rem;
}
.site-header {
position: relative;
z-index: 999;
}
.global-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #ba0c18;
padding-top: 80px;
padding-bottom: 150px;
overflow-y: auto;
transition: opacity 0.3s ease, visibility 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 9998;
display: flex;
flex-direction: column;
align-items: center;
}
.global-nav.is-open {
opacity: 1;
visibility: visible;
}
.global-nav ul {
flex-direction: column;
gap: 30px;
width: 100%;
margin-top: 30px;
}
.global-nav li {
line-height: 1;
}
.global-nav a {
font-size: 1.8rem;
display: block;
text-align: center;
letter-spacing: 0.05em;
}
.global-nav p {
font-size: 0.75rem;
margin-top: 5px;
font-weight: 700;
letter-spacing: 0;
}
.header-login-box {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 85%;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
flex-direction: column;
gap: 15px;
}
.header-login-box.is-open {
opacity: 1;
visibility: visible;
}
.header-login {
margin: 0;
width: 100%;
display: none;
}
.header-login-sp {
display: block;
background-color: #D0B970;
font-family: "Noto Sans JP", sans-serif;
color: #fefdfd;
padding: 8px 12px;
font-size: 0.8rem;
font-weight: 400;
text-align: center;
display: block;
line-height: 1.2;
clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%);
}
.header-login.is-open {
opacity: 1;
visibility: visible;
}
.btn-login {
background: linear-gradient(135deg, #d4ba75, #bd9f52);
color: #fff;
border: none;
padding: 18px 25px;
font-size: 0.95rem;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.btn-login br {
display: none;
}
.hamburger-btn {
background: none;
border: none;
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
z-index: 10000;
position: relative;
padding: 5px;
margin-left: auto;
}
.hamburger-btn .menu-text {
font-family: 'Quantico', sans-serif;
font-size: 0.9rem;
font-weight: 700;
margin-right: 12px;
letter-spacing: 0.05em;
}
.hamburger-lines {
width: 26px;
height: 18px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-lines span {
display: block;
width: 100%;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger-btn.is-active .menu-text {
display: none;
}
.hamburger-btn.is-active .hamburger-lines span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-active .hamburger-lines span:nth-child(2) {
opacity: 0;
}
.hamburger-btn.is-active .hamburger-lines span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
body.menu-open-body {
overflow: hidden;
}
.gc-teams {
gap: 0;
}
.gc-info {
padding: 10px;
}
.gc-logo {
max-width: 200px;
padding: 0;
}
}
@media screen and (max-width: 768px) {
.spsp {
display: block;
}
.list-item {
flex-direction: column;
}
.list-item .thumb {
width: 100%;
height: auto;
}
.sidebar-column {
display: none;
}
.two-column-layout {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.grid-3col {
display: block;
}
.video-card {
padding-bottom: 20px;
}
.yt-card {
padding-bottom: 20px;
}
.main-column {
width: 80%;
}
.side-mvp {
width: 70%;
margin: auto;
}
.hero-copy h2 {
font-size: 3.25rem;
line-height: 1.05;
}
.hero-copy p {
font-size: 1.15rem;
}
.hero-section {
background-size: 300% auto !important;
background-position: top center !important;
background-repeat: no-repeat !important;
background-color: #000000 !important;
}
.hero-upcoming-games {
padding-left: 0;
padding-right: 0;
overflow: hidden;
width: 100%;
}
.hero-slider-track {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 15px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Firefox用 */
padding: 0 5% 20px;
cursor: grab;
}
.hero-slider-track::-webkit-scrollbar {
display: none;
/* Chrome/Safari用 */
}
.hero-slider-track.active {
cursor: grabbing;
}
.game-card-wrapper {
width: auto;
flex: 0 0 85%;
scroll-snap-align: center;
}
.ticker-game-card {
padding: 5px;
}
.ticker-game-card .badge {
padding: 2px;
}
.ticker-game-card .score-col {
font-size: 1.5rem;
}
.sec-title {
font-size: 2rem;
}
}
@media screen and (min-width: 992px) {
.hamburger-btn {
display: none;
}
}
body {
background-color: #000;
}
.page-hero.schedule-hero {
background-size: cover;
background-position: bottom;
text-align: center;
padding: 80px 20px;
position: relative;
border-bottom: 2px solid #000;
}
.page-hero-inner {
position: relative;
z-index: 1;
}
.page-hero-title {
font-family: "Quantico", sans-serif;
font-size: 3.5rem;
font-weight: 900;
color: #B50606;
margin: 0 0 5px;
letter-spacing: 0.05em;
}
.page-hero-sub {
font-size: 1rem;
font-weight: 700;
color: #111;
margin: 0;
}
.breadcrumb-wrap {
background: #000;
}
.breadcrumb {
font-size: 0.75rem;
color: #aaa;
}
.breadcrumb a {
color: #B50606;
text-decoration: none;
}
.page-schedule-main {
background-color: #000;
padding-bottom: 80px;
}
.schedule-header-area {
padding: 40px;
}
.schedule-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
width: 100%;
}
.schedule-filters select {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 40px;
padding: 12px 40px 12px 25px;
font-size: 1rem;
appearance: none;
outline: none;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 15px center;
width: 200px;
margin: 15px;
}
.schedule-filters select option {
background-color: #111;
color: #fff;
}
.schedule-notice {
color: #fff;
padding-top: 20px;
}
.notice-main {
font-size: 1.1rem;
font-weight: 900;
margin: 0 0 5px;
}
.notice-sub {
font-size: 0.85rem;
color: #ccc;
margin: 0;
}
.schedule-date-slider-wrap {
background: #fff;
padding: 15px 0;
margin-bottom: 40px;
margin: 40px;
}
.schedule-date-slider-wrap .container {
display: flex;
align-items: center;
}
.slider-arrow {
background: transparent;
border: 1px solid #002b5c;
color: #002b5c;
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 1.2rem;
position: absolute;
z-index: 10;
transition: all 0.3s;
}
.slider-arrow.prev {
left: 20px;
}
.slider-arrow.next {
right: 20px;
}
.slider-arrow:hover {
background: #002b5c;
color: #fff;
}
.slider-dates {
display: flex;
overflow-x: auto;
scrollbar-width: none;
margin: 0 50px;
flex-grow: 1;
align-items: center;
}
.slider-dates::-webkit-scrollbar {
display: none;
}
.date-item {
display: flex;
align-items: baseline;
gap: 5px;
color: #aaa;
padding: 10px 25px;
text-decoration: none;
border-bottom: 4px solid transparent;
flex-shrink: 0;
transition: color 0.3s;
position: relative;
}
.date-item .md {
font-family: "Quantico", sans-serif;
font-size: 2rem;
font-weight: 900;
}
.date-item .day {
font-size: 1rem;
font-weight: 700;
}
.date-item.is-active {
color: #111;
border-bottom-color: #B50606;
}
.date-item.is-active .md {
font-size: 2.8rem;
}
.date-item.has-game::after {
content: '';
display: block;
width: 6px;
height: 6px;
background-color: #B50606;
border-radius: 50%;
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
}
.schedule-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.schedule-card {
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 50px;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.sc-team {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
}
.sc-team img {
height: 200px;
width: auto;
object-fit: contain;
margin-bottom: 15px;
}
.sc-badge {
font-family: "Quantico", sans-serif;
font-size: 0.9rem;
color: #fff;
padding: 5px 30px;
font-weight: 900;
letter-spacing: 0.05em;
}
.sc-badge.home {
background-color: #B50606;
}
.sc-badge.away {
background-color: #2b5a9b;
}
.sc-info {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 0 20px;
}
.sc-arena {
font-size: 0.95rem;
font-weight: 700;
color: #111;
margin: 0 0 10px;
}
.sc-time-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 5px;
}
.sc-time,
.sc-score {
font-family: "Quantico", sans-serif;
font-size: 3.5rem;
font-weight: 900;
color: #111;
line-height: 1;
position: relative;
z-index: 2;
}
.sc-score {
letter-spacing: 0.1em;
}
.sc-status-label {
font-family: "Quantico", sans-serif;
font-size: 1rem;
font-weight: 700;
color: #B50606;
margin-top: 5px;
z-index: 2;
}
.sc-sticks-icon {
width: 60px;
height: auto;
display: block;
object-fit: contain;
margin-top: 5px;
}
.event-icon-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 5px;
}
.event-icon-box img {
width: 45px;
height: auto;
display: block;
object-fit: contain;
}
.event-text {
font-family: "Quantico", sans-serif;
font-size: 0.75rem;
font-weight: 900;
color: #a88b43;
letter-spacing: 0.05em;
}
.sc-action {
width: 250px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.sc-action a {
margin: 5px;
}
.btn-ticket-gold {
display: inline-flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #d4ba75, #bd9f52);
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.1rem;
font-weight: 700;
padding: 18px 40px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 0px) 100%, 0 100%, 0 20px);
transition: filter 0.3s ease;
text-decoration: none;
}
.btn-ticket-gold:hover {
filter: brightness(1.1);
}
.btn-ticket-gold.is-finished {
background: #444;
}
.btn-ticket-gold.is-finished:hover {
filter: brightness(1.2);
}
.no-game-msg {
color: #fff;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
margin: 40px 0;
}
@media screen and (max-width: 991px) {
.schedule-card {
flex-direction: column;
gap: 30px;
padding: 40px 20px;
}
.sc-action {
width: 100%;
justify-content: center;
}
.schedule-filters select {
width: 40%;
box-sizing: border-box;
}
.page-hero.schedule-hero {
padding: 40px 20px;
}
.schedule-date-slider-wrap {
margin: 10px;
}
.schedule-header-area {
padding: 10px;
}
}
/*2026-4-27*/
ul {
list-style-type: none;
padding: 0;
}
.site-header {
background: #000;
position: relative;
z-index: 1000;
width: 100%;
}
.site-header ul {
list-style: none;
margin: 0;
padding: 0;
}
.pc-header-layout {
display: flex !important;
}
.sp-header-layout {
display: none !important;
}
.sp-menu-overlay {
display: none;
}
.pc-header-layout {
justify-content: space-between;
align-items: stretch;
height: 80px;
}
.header-left {
display: flex;
align-items: center;
padding-left: 20px;
}
.site-logo img {
height: 45px;
width: auto;
}
.header-center {
flex-grow: 1;
display: flex;
}
.nav-list-pc {
display: flex;
height: 100%;
}
.nav-list-pc>li {
position: relative;
height: 100%;
}
.nav-list-pc>li>a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 15px;
color: #fff;
text-decoration: none;
font-family: "Quantico", sans-serif;
font-size: 1.1rem;
font-weight: bold;
}
.nav-list-pc>li>a .sub {
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.65rem;
color: #888;
margin-top: 2px;
font-weight: normal;
}
.has-mega-menu .mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #e5e5e5;
width: 550px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
pointer-events: none;
}
.has-mega-menu:hover .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mega-menu-inner {
display: flex;
gap: 30px;
}
.mega-left {
flex: 1.5;
padding-right: 20px;
}
.mega-right {
flex: 1;
padding-top: 35px;
border-left: 1px solid #ccc;
padding-left: 20px;
}
.mega-title {
font-weight: bold;
color: #111;
margin: 0 0 15px;
font-size: 1.1rem;
}
.mega-menu ul li a {
display: flex;
justify-content: space-between;
color: #333;
text-decoration: none;
font-size: 0.85rem;
padding: 10px 0;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.mega-menu ul li a:hover {
color: #B50606;
}
.mega-menu .arr {
color: #888;
}
.header-right {
display: flex;
flex-direction: column;
width: 380px;
}
.header-right-top {
display: flex;
background: #fff;
height: 30px;
}
.header-right-top a {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
color: #111;
font-size: 0.75rem;
text-decoration: none;
padding: 0 15px;
border-left: 1px solid #ccc;
font-weight: bold;
}
.header-right-bottom {
display: flex;
height: 50px;
}
.header-right-bottom a {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: #fff;
font-size: 0.75rem;
font-weight: bold;
padding: 0 15px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
line-height: 1.3;
text-align: center;
}
.btn-top-red {
background: #B50606;
}
.btn-top-dark {
background: #B50606;
}
.login-wrap {
display: flex;
align-items: center;
gap: 5px;
text-align: center;
}
.user-icon {
width: 14px;
height: auto;
}
@media screen and (max-width: 991px) {
.pc-header-layout {
display: none !important;
}
.sp-header-layout {
display: flex !important;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
height: 60px;
}
.header-sp-right {
display: flex;
align-items: center;
gap: 10px;
}
.menu-label {
color: #fff;
font-family: "Quantico", sans-serif;
font-size: 1.2rem;
font-weight: bold;
}
.hamburger-btn {
background: none;
border: none;
width: 35px;
height: 25px;
position: relative;
cursor: pointer;
padding: 0;
}
.hamburger-btn span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: #fff;
border-radius: 2px;
}
.hamburger-btn span:nth-child(1) {
top: 0;
}
.hamburger-btn span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.hamburger-btn span:nth-child(3) {
bottom: 0;
}
.sp-menu-overlay {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #767575;
z-index: 9999;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
overflow-y: auto;
}
.sp-menu-overlay.is-active {
opacity: 1;
visibility: visible;
}
.sp-menu-header {
display: flex;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #555;
align-items: center;
}
.sp-menu-logo {
height: 30px;
width: auto;
}
.close-btn {
background: none;
border: none;
color: #fff;
font-size: 2rem;
cursor: pointer;
line-height: 1;
}
.sp-menu-body {
padding: 0 20px;
flex-grow: 1;
}
.sp-nav-list li {
border-bottom: 0px solid #555;
}
.sp-nav-list li a,
.sp-nav-toggle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
color: #fff;
text-decoration: none;
font-family: "Quantico", sans-serif;
font-size: 1.95rem;
font-weight: bold;
cursor: pointer;
}
.nav-text-wrap {
display: flex;
align-items: baseline;
flex-direction: column;
}
.sp-nav-list .sub {
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.2rem;
color: #ccc;
margin-left: 10px;
font-weight: normal;
}
.sp-nav-list .arr,
.toggle-mark {
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.8rem;
font-weight: normal;
color: #fff;
}
.blbl {
color: #000 !important;
}
.sp-sub-menu {
display: none;
background: #ddd;
padding: 20px;
margin: 0 -20px;
}
.has-child-sp.is-open .sp-sub-menu {
display: block;
}
.sp-sub-title {
font-weight: bold;
font-size: 1.1rem;
color: #111;
margin-bottom: 15px;
}
.sp-sub-links-main li a,
.sp-sub-links-other li a {
display: flex;
justify-content: space-between;
color: #111;
padding: 12px 0;
border-bottom: 0px solid #bbb;
text-decoration: none;
font-size: 1rem;
font-weight: bold;
}
.sp-sub-links-other {
margin-top: 10px;
}
.sp-sub-links-other li {
border-bottom: none !important;
}
.sp-sub-links-other li a {
border-top: 0px solid #bbb;
}
.sp-menu-bottom {
width: 100%;
margin-top: 20px;
}
.sp-btn-row-white {
display: flex;
background: #fff;
}
.sp-btn-row-white a {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
color: #111;
font-weight: bold;
padding: 15px 20px;
border-right: 1px solid #ccc;
text-decoration: none;
font-size: 0.9rem;
text-align: center;
}
.sp-btn-col-red {
display: flex;
flex-direction: column;
}
.sp-btn-col-red a {
background: #B50606;
color: #fff;
display: flex;
justify-content: space-between;
padding: 20px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
font-size: 1.1rem;
}
.ticker-inner {
padding: 0;
}
}
.side-grades {
background: #fff;
position: relative;
margin-bottom: 40px;
clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.grades-header-box {
background: #d4ba75;
color: #fff;
font-family: "Quantico", sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 15px 20px;
}
.grades-header-box .arr {
font-weight: normal;
margin-left: 5px;
}
.side-grades::after {
content: '';
display: block;
width: 100%;
height: 25px;
background: #d4ba75;
margin-top: 10px;
}
.grades-inner {
padding: 40px 60px;
}
.grade-item {
border-bottom: 4px solid #d4ba75;
padding: 20px 0;
}
.grade-item:last-child {
border-bottom: none;
}
.g-label {
text-align: center;
font-weight: 700;
font-size: 0.85rem;
margin: 0 0 15px;
color: #111;
}
.g-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.g-photo {
width: 80px;
height: 90px;
flex-shrink: 0;
background: #eee;
}
.g-photo img,
.g-photo .no-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.g-details {
flex-grow: 1;
padding: 0 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
.g-team {
height: 25px;
width: auto;
object-fit: contain;
margin-bottom: 5px;
display: block;
}
.g-name {
font-weight: 700;
font-size: 1.2rem;
margin: 0 0 2px;
color: #111;
}
.g-pos {
font-size: 1.2rem;
color: #111;
margin: 0;
font-weight: 700;
}
.g-number {
font-family: "Quantico", sans-serif;
font-size: 2.5rem;
font-weight: 400;
color: #111;
line-height: 1;
}
@media screen and (max-width: 1280px) {
.ranking-inner {
padding: 20px;
}
.sec-title-red {
padding-left: 10px;
}
.grades-inner {
padding: 20px;
}
.g-photo {
width: 50px;
height: 55px;
}
.g-name {
font-size: 1rem;
}
.g-pos {
font-size: 1rem;
}
}
@media screen and (max-width: 768px) {
.side-grades.spsp {
width: 85%;
margin: auto;
}
.g-photo {
width: 80px;
height: 90px;
}
.g-name {
font-size: 1.2rem;
}
.g-pos {
font-size: 1.2rem;
}
.container {
padding: 10px 5px;
}
}
.page-grades-main {
background-color: #000;
padding-bottom: 80px;
}
/* .grades-hero-section {
padding: 0px 0 40px;
} */
.grades-hero-title {
font-size: 2.2rem;
font-weight: 900;
line-height: 1.4;
margin: 0 0 20px;
color: #111;
}
.grades-hero-title .hl {
background: #fff;
padding: 2px 10px;
display: inline-block;
margin-bottom: 5px;
}
.grades-hero-sub {
color: #fff;
font-size: 0.95rem;
font-weight: bold;
margin: 0 0 40px;
}
.grades-season-wrap {
display: flex;
justify-content: center;
text-align: center;
}
.grades-season-select {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 40px;
padding: 10px 40px 10px 25px;
font-size: 0.9rem;
appearance: none;
outline: none;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 15px center;
min-width: 150px;
text-align: center;
}
.grades-season-select option {
background-color: #111;
color: #fff;
}
.grades-tab-bar {
background: #ffffff;
margin-bottom: 40px;
margin: 40px;
}
.grades-tab-list {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.grades-tab-list::-webkit-scrollbar {
display: none;
}
.grades-tab-list li {
flex-grow: 1;
text-align: center;
}
.grades-tab-link {
display: block;
color: #888;
font-weight: bold;
font-size: 0.95rem;
padding: 20px 15px;
text-decoration: none;
border-bottom: 4px solid transparent;
transition: all 0.3s;
}
.grades-tab-link.is-active {
color: #111;
border-bottom-color: #B50606;
}
.grades-tab-pane {
display: none;
animation: fadeIn 0.4s ease;
}
.grades-tab-pane.is-active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.grades-ranking-box {
background: #fff;
padding: 40px;
margin-bottom: 50px;
clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.ranking-box-title {
text-align: center;
font-size: 1.2rem;
font-weight: 900;
margin: 0 0 30px;
color: #111;
}
.title-sub {
font-size: 0.8rem;
font-weight: normal;
color: #555;
margin-left: 8px;
}
.ranking-row {
display: flex;
align-items: center;
padding: 20px 50px 20px 10px;
border-bottom: 1px solid #ddd;
gap: 20px;
}
.ranking-row:last-child {
border-bottom: none;
}
.r-rank {
font-family: "Quantico", sans-serif;
font-size: 1.5rem;
font-weight: 900;
width: 30px;
text-align: center;
flex-shrink: 0;
color: #000;
}
.r-score {
margin-left: auto;
font-family: "Quantico", sans-serif;
font-size: 2rem;
font-weight: 900;
color: #111;
display: flex;
align-items: baseline;
gap: 5px;
}
.r-score .unit {
font-size: 1.2rem;
}
.personal-list .r-photo {
width: 140px;
height: 140px;
background: #eee;
flex-shrink: 0;
}
.personal-list .r-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.personal-list .r-team {
width: 140px;
flex-shrink: 0;
}
.personal-list .r-team img {
width: 100%;
height: auto;
object-fit: contain;
}
.personal-list .r-info {
display: flex;
flex-direction: column;
}
.personal-list .r-name {
font-weight: 900;
font-size: 1.2rem;
color: #111;
}
.personal-list .r-pos {
font-weight: bold;
font-size: 1.2rem;
color: #111;
}
.team-list .r-team-logo {
width: 100px;
flex-shrink: 0;
text-align: center;
}
.team-list .r-team-logo img {
height: 180px;
width: auto;
object-fit: contain;
margin: 0 auto;
}
.team-list .r-team-name {
font-weight: 900;
font-size: 1.2rem;
color: #111;
}
.ranking-box-footer {
text-align: center;
margin-top: 30px;
}
.btn-schedule-gold {
display: inline-flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #d4ba75, #bd9f52);
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
font-weight: 700;
padding: 15px 40px;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: filter 0.3s ease;
text-decoration: none;
}
.btn-schedule-gold:hover {
filter: brightness(1.1);
}
@media screen and (max-width: 768px) {
.grades-hero-title {
font-size: 1.8rem;
}
.grades-ranking-box {
padding: 20px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.ranking-row {
gap: 10px;
padding: 15px 5px;
}
.personal-list .r-team {
width: 50px;
}
.personal-list .r-photo {
width: 50px;
height: 50px;
}
.r-score {
font-size: 1.5rem;
}
.r-score .unit {
font-size: 1rem;
}
.team-list .r-team-logo {
width: 60px;
}
.team-list .r-team-name {
font-size: 0.85rem;
}
.grades-tab-bar {
margin: 20px;
}
}
.grades-tab-container {
display: flex;
align-items: center;
}
.grades-tab-scroll {
display: flex;
overflow-x: auto;
scrollbar-width: none;
flex-grow: 1;
}
.grades-tab-scroll::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 992px) {
.grades-tab-container .slider-arrow {
display: none !important;
}
.grades-tab-list {
justify-content: center;
width: 100%;
}
}
@media screen and (max-width: 991px) {
.grades-tab-scroll {
margin: 0 40px;
}
.grades-tab-list {
justify-content: flex-start;
}
.grades-tab-link {
padding: 20px 25px;
}
}
.page-ranking-main {
background-color: #000;
padding-bottom: 80px;
color: #fff;
}
.ranking-season-section {
padding: 30px 0;
display: flex;
justify-content: center;
}
.ranking-season-section .grades-season-select {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 40px;
padding: 10px 40px 10px 25px;
font-size: 0.9rem;
appearance: none;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 15px center;
min-width: 180px;
text-align: center;
}
.ranking-box {
background: #fff;
color: #111;
margin-bottom: 50px;
padding: 60px 40px;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.ranking-table-title {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 50px;
font-family: "Noto Sans JP", sans-serif;
}
.ranking-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ranking-main-table {
width: 100%;
min-width: 850px;
border-collapse: collapse;
border-top: 0.01px solid #f2f2f2
}
.ranking-main-table th {
font-size: 0.8rem;
color: #000;
padding: 15px 10px;
border-bottom: 1px solid #eee;
font-weight: normal;
}
.ranking-main-table td {
padding: 20px 10px;
border-bottom: 1px solid #eee;
text-align: center;
vertical-align: middle;
}
.col-rank span {
font-family: "Quantico", sans-serif;
font-size: 2.2rem;
font-weight: 700;
color: #111;
}
.col-team {
text-align: left !important;
width: 280px;
}
.team-info {
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
}
.team-logo {
width: 60px;
height: auto;
flex-shrink: 0;
}
.team-logo img {
width: 100%;
height: auto;
object-fit: contain;
}
.team-name {
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
}
.ranking-main-table td:not(.col-team) {
font-family: "Quantico", sans-serif;
font-size: 1.2rem;
}
/* .col-points {
font-weight: 700;
} */
@media screen and (max-width: 768px) {
.ranking-box {
padding: 40px 15px;
clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.ranking-table-title {
font-size: 1.8rem;
margin-bottom: 30px;
}
.col-rank span {
font-size: 1.8rem;
}
.col-team {
width: 75px;
}
.team-logo {
width: 45px;
}
.team-name {
font-size: 0.9rem;
}
}
.schedule-card {
background: #fff;
margin-bottom: 20px;
display: flex;
align-items: center;
padding: 20px 30px;
position: relative;
clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.sc-content-inner {
flex: 1;
display: flex;
align-items: center;
}
.sc-header {
width: 220px;
text-align: center;
}
.sc-arena {
font-size: 12px;
margin-bottom: 5px;
color: #333;
}
.sc-time-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.sc-time {
font-family: 'Quantico', sans-serif;
font-size: 28px;
font-weight: bold;
color: #000;
}
.sc-event-badge {
display: flex;
align-items: center;
border: 1px solid #d4ba75;
padding: 2px 5px;
border-radius: 3px;
color: #d4ba75;
font-size: 10px;
font-weight: bold;
}
.sc-event-badge img {
width: 12px;
margin-right: 3px;
}
.sc-match-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
}
.sc-match-team {
text-align: center;
width: 120px;
}
.team-logo-wrap {
width: 80px;
height: 80px;
margin: 0 auto 10px;
}
.team-logo-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
.sc-badge {
display: block;
width: 70px;
margin: 0 auto;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 2px 0;
}
.sc-badge.home {
background-color: #B50606;
}
.sc-badge.away {
background-color: #3C82F6;
}
.sc-divider {
width: 60px;
text-align: center;
}
.sc-vs-sticks {
width: 100%;
opacity: 0.3;
}
.sc-actions {
display: flex;
flex-direction: column;
gap: 10px;
width: 200px;
}
.btn-action {
display: block;
text-align: center;
padding: 12px 0;
font-weight: bold;
text-decoration: none;
font-size: 14px;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-action.gold {
background: #d4ba75;
color: #fff;
}
.btn-action.gray {
background: #999;
color: #fff;
}
@media screen and (max-width: 768px) {
.schedule-card {
flex-direction: column;
padding: 30px 15px;
}
.sc-content-inner {
flex-direction: column;
width: 100%;
}
.sc-header {
width: 100%;
margin-bottom: 20px;
}
.sc-match-area {
width: 100%;
gap: 10px;
position: relative;
margin-bottom: 25px;
}
.sc-divider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 120px;
}
.sc-match-team {
position: relative;
z-index: 2;
}
.sc-actions {
width: 100%;
}
}
.schedule-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.schedule-card {
background: #fff;
position: relative;
clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
padding: 0;
}
.sc-layout-pc {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 40px;
width: 100%;
}
.sc-pc-main {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 0.5;
gap: 60px;
}
.sc-sticks-pc {
width: 80px;
height: auto;
margin-top: 10px;
display: block;
}
.sc-layout-sp {
display: none;
flex-direction: column;
align-items: center;
padding: 35px 20px;
width: 100%;
}
.sc-sp-teams {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 320px;
margin: 35px 0;
position: relative;
}
.sc-sticks-sp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
height: auto;
z-index: 0;
pointer-events: none;
}
.sc-team {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
position: relative;
z-index: 2;
}
.sc-logo {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
width: 100%;
}
.sc-logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.sc-badge {
font-family: "Quantico", sans-serif;
font-size: 0.8rem;
color: #fff;
padding: 4px 0;
font-weight: bold;
text-align: center;
display: block;
width: 100%;
max-width: 90px;
}
.sc-badge.home {
background-color: #B50606;
}
.sc-badge.away {
background-color: #2b5a9b;
}
.sc-info {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.sc-arena {
font-size: 0.8rem;
font-weight: 700;
color: #111;
margin: 0 0 5px;
text-align: center;
}
.sc-time-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.sc-time-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 8px;
}
.sc-time {
font-family: "Quantico", sans-serif;
font-size: 3.5rem;
font-weight: 900;
color: #111;
line-height: 1;
}
.sc-score {
font-family: "Quantico", sans-serif;
font-size: 3.5rem;
font-weight: 900;
color: #111;
line-height: 1;
letter-spacing: 0.05em;
}
.sc-status-label {
font-family: "Quantico", sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #B50606;
margin-top: 5px;
}
.event-icon-box {
position: relative;
width: 40px;
margin-top: 6px;
margin-left: 10px;
}
.event-icon-box img {
width: 100%;
height: auto;
display: block;
}
.event-icon-box .event-text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
font-family: "Quantico", sans-serif;
font-size: 0.55rem;
font-weight: 900;
color: #a18741;
letter-spacing: 0.02em;
line-height: 1;
}
.sc-action {
display: flex;
flex-direction: column;
gap: 10px;
width: 200px;
flex-shrink: 0;
}
.btn-action {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: filter 0.3s ease;
}
.btn-action .arrow {
font-family: "Quantico", sans-serif;
font-weight: 400;
font-size: 1.1rem;
}
.btn-action.gold {
background-color: #d0b970;
color: #fff;
}
.btn-action.gray {
background-color: #a3a3a3;
color: #fff;
}
.btn-action:hover {
filter: brightness(1.1);
}
@media screen and (max-width: 991px) {
.sc-layout-pc {
display: none;
}
.sc-layout-sp {
display: flex;
}
.sc-action {
width: 100%;
max-width: 300px;
}
}
.page-report-main {
padding-bottom: 80px;
margin-top: 40px;
}
.report-box {
background: #fff;
padding: 50px 50px;
margin-bottom: 30px;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.report-box:last-child {
margin-bottom: 0;
}
.report-main-title {
text-align: center;
font-size: 1.8rem;
font-weight: bold;
color: #111;
margin-bottom: 40px;
}
.report-sec-title {
text-align: center;
font-size: 1.3rem;
font-weight: bold;
color: #111;
margin-bottom: 25px;
}
.report-scoreboard {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
}
.rs-team {
width: 250px;
text-align: center;
}
.rs-logo {
height: 120px;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.rs-logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.rs-name {
font-size: 1.1rem;
font-weight: bold;
color: #111;
line-height: 1.4;
}
.rs-center {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.rs-date-badge {
background: #111;
color: #fff;
font-family: "Quantico", sans-serif;
font-size: 1rem;
padding: 5px 25px;
border-radius: 30px;
margin-bottom: 15px;
}
.rs-score-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 10px;
}
.rs-score-row .score {
font-family: "Quantico", sans-serif;
font-size: 6rem;
font-weight: bold;
line-height: 1;
}
.rs-score-row .home-score {
color: #B50606;
}
.rs-score-row .away-score {
color: #111;
}
.rs-score-row .hyphen {
font-size: 4rem;
color: #111;
}
.rs-arena,
.rs-time {
font-family: "Quantico", sans-serif;
font-weight: bold;
color: #111;
}
.rs-arena {
font-size: 0.9rem;
}
.rs-time {
font-size: 2.5rem;
line-height: 1.2;
}
.rs-status {
color: #999;
font-size: 0.85rem;
margin-top: 5px;
}
.report-table-wrap {
width: 100%;
overflow-x: auto;
margin-bottom: 20px;
}
.report-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
}
.report-table th {
background: #f0f0f0;
color: #555;
font-size: 0.9rem;
font-weight: bold;
padding: 15px 10px;
text-align: center;
}
.report-table td {
padding: 15px 10px;
text-align: center;
border-bottom: 1px solid #ddd;
color: #555;
font-family: "Quantico", sans-serif;
font-size: 1.1rem;
}
.report-table .col-total {
font-weight: bold;
color: #111;
}
.report-table .home-color {
color: #B50606;
}
.badge {
display: inline-block;
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.85rem;
font-weight: bold;
padding: 4px 15px;
min-width: 50px;
text-align: center;
}
.home-bg {
background-color: #b0000f;
}
.away-bg {
background-color: #111;
}
.report-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 30px;
}
.btn-report {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
padding: 15px 25px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.btn-report span {
font-family: "Quantico", sans-serif;
}
.btn-report.gold {
background: linear-gradient(135deg, #d4ba75, #bd9f52);
color: #fff;
}
.btn-report.gray {
background: #a0a0a0;
color: #fff;
}
.scoring-table td {
font-size: 0.95rem;
}
.scoring-table .col-time {
font-weight: bold;
color: #555;
}
.scoring-table .col-player {
font-family: "Noto Sans JP", sans-serif;
color: #555;
}
.scoring-table .col-player.bold {
font-weight: bold;
color: #111;
}
.scoring-table .col-gs {
color: #B50606;
font-weight: bold;
}
.table-note {
font-size: 0.75rem;
color: #111;
margin-top: 5px;
font-weight: bold;
}
.roster-grid {
display: flex;
gap: 40px;
}
.roster-col {
flex: 1;
}
.roster-team-name {
font-size: 1rem;
font-weight: bold;
color: #111;
margin-bottom: 15px;
padding-bottom: 5px;
}
.roster-team-name.home-line {
border-bottom: 1px solid #B50606;
}
.roster-team-name.away-line {
border-bottom: 1px solid #111;
}
.roster-table {
width: 100%;
border-collapse: collapse;
}
.roster-table th {
background: #f0f0f0;
color: #555;
font-size: 0.8rem;
font-weight: normal;
padding: 10px 5px;
text-align: center;
}
.roster-table td {
padding: 10px 5px;
border-bottom: 1px solid #eee;
color: #555;
font-size: 0.9rem;
text-align: center;
}
.roster-table .roster-name {
text-align: left;
font-weight: bold;
color: #111;
padding-left: 15px;
}
.number-badge {
background: #a0a0a0;
color: #fff;
font-family: "Quantico", sans-serif;
padding: 2px 6px;
border-radius: 2px;
font-size: 0.8rem;
}
@media screen and (max-width: 991px) {
.report-box {
padding: 30px 15px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
position: relative;
}
.report-scoreboard {
gap: 30px;
}
.rs-score-row .score {
font-size: 4rem;
}
.rs-score-row .hyphen {
font-size: 3rem;
}
.roster-grid {
flex-direction: column;
gap: 40px;
}
.rs-center {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
}
.rs-team {
padding-top: 200px;
}
.rs-status {
display: none;
}
}
.btn-interview {
display: inline-block;
background: #d4ba75;
color: #fff;
padding: 10px 30px;
font-size: 0.9rem;
font-weight: bold;
text-decoration: none;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: filter 0.3s;
}
.btn-interview:hover {
filter: brightness(1.1);
}
.page-news-main {
padding-bottom: 80px;
}
.news-box {
background: #fff;
padding: 0;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
overflow: hidden;
}
.news-pickup {
display: flex;
padding: 0 50px 0 50px;
gap: 40px;
}
.pickup-thumb {
width: 50%;
flex-shrink: 0;
}
.pickup-thumb img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
}
.pickup-info {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
}
.pickup-title {
font-size: 1.8rem;
font-weight: bold;
color: #111;
line-height: 1.4;
margin: 0 0 20px;
}
.pickup-title a {
text-decoration: none;
color: inherit;
transition: color 0.3s;
}
.pickup-title a:hover {
color: #B50606;
}
.pickup-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.pickup-meta .date {
font-family: "Quantico", sans-serif;
color: #B50606;
font-weight: bold;
font-size: 1.1rem;
}
.pickup-meta .cat {
background: #d0e0f0;
color: #333;
padding: 3px 12px;
font-size: 0.8rem;
font-weight: bold;
}
.pickup-excerpt {
font-size: 1rem;
color: #000;
line-height: 1.6;
}
.news-tabs {
display: flex;
margin: 50px 50px 0;
border-bottom: 2px solid #eee;
}
.tab-item {
flex: 1;
text-align: center;
padding: 20px;
font-size: 1.3rem;
font-weight: bold;
background: #f8f8f8;
color: #999;
text-decoration: none;
transition: all 0.3s ease;
}
.tab-item.is-active {
background: #fff;
color: #111;
border-bottom: 4px solid #B50606;
}
.tab-item:not(.is-active):hover {
background: #f0f0f0;
}
.news-filter {
text-align: center;
margin: 40px 0;
}
.news-filter select {
border: 1px solid #ccc;
border-radius: 30px;
padding: 10px 40px 10px 20px;
font-size: 0.95rem;
font-weight: bold;
color: #111;
appearance: none;
outline: none;
cursor: pointer;
background-color: #fff;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 15px center;
min-width: 250px;
}
.news-list {
padding: 0 50px;
display: flex;
flex-direction: column;
gap: 30px;
}
.news-list-item {
display: flex;
gap: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.list-thumb {
width: 280px;
flex-shrink: 0;
}
.list-thumb img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.list-info {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.list-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
}
.list-meta .date {
font-family: "Quantico", sans-serif;
color: #B50606;
font-weight: bold;
font-size: 1rem;
}
.list-meta .cat {
background: #d0e0f0;
color: #333;
padding: 3px 12px;
font-size: 0.8rem;
font-weight: bold;
}
.list-title {
font-size: 1.1rem;
font-weight: bold;
color: #111;
line-height: 1.6;
margin: 0;
}
.list-title a {
text-decoration: none;
color: inherit;
}
.list-title a:hover {
text-decoration: underline;
}
.news-pagination {
text-align: center;
margin: 50px 0;
}
.news-pagination .page-numbers {
display: inline-block;
padding: 8px 14px;
margin: 0 3px;
background: #eee;
color: #333;
text-decoration: none;
font-family: "Quantico", sans-serif;
font-weight: bold;
border-radius: 2px;
transition: all 0.3s;
}
.news-pagination .page-numbers:hover {
background: #ddd;
}
.news-pagination .page-numbers.current {
background: #B50606;
color: #fff;
}
@media screen and (max-width: 991px) {
.news-box {
padding: 0;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.news-pickup {
flex-direction: column;
padding: 20px 20px 20px 20px;
gap: 20px;
}
.pickup-thumb,
.pickup-info {
width: 100%;
}
.pickup-title {
font-size: 1.4rem;
}
.news-tabs {
margin: 30px 20px 0;
}
.tab-item {
padding: 15px;
font-size: 1.1rem;
}
.news-list {
padding: 0 20px;
}
.news-list-item {
flex-direction: column;
gap: 15px;
}
.list-thumb {
width: 100%;
}
}
.news-box {
margin-bottom: 25px;
}
.news-box.box-tabs-only {
clip-path: none;
}
.box-tabs-only .news-tabs {
margin: 0;
border-bottom: none;
max-width: 40%;
margin: auto;
}
.news-box.box-list-only {
padding-top: 50px;
}
@media screen and (max-width: 991px) {
.news-box.box-list-only {
padding-top: 30px;
}
.box-tabs-only .news-tabs {
max-width: 100%;
}
}
.nonclip {
clip-path: none;
}
.label-en {
font-family: "Quantico", sans-serif;
}
.playoff-line-row td {
padding: 0 !important;
border: none !important;
}
.playoff-line {
display: flex;
align-items: center;
width: 100%;
margin: 10px 0;
}
.playoff-line::before,
.playoff-line::after {
content: "";
flex: 1;
border-bottom: 1px solid #B50606;
}
.playoff-line span {
padding: 0 15px;
color: #B50606;
font-weight: bold;
font-size: 13px;
white-space: nowrap;
}
.about-common-nav {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
margin-bottom: 60px;
}
.about-common-nav .nav-container {
overflow: hidden;
}
.about-nav-list {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
gap: 40px;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
/* cursor: grab; */
}
.about-nav-list::-webkit-scrollbar {
display: none;
}
.about-nav-list:active {
cursor: grabbing;
}
.about-nav-list li {
flex-shrink: 0;
}
.about-nav-list li a {
display: block;
padding: 20px 0;
font-size: 1.15rem;
font-weight: bold;
color: #333;
text-decoration: none;
position: relative;
user-select: none;
}
.about-nav-list li a.is-active {
color: #000;
}
.about-nav-list li a.is-active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 12px;
background-color: #B50606;
}
@media screen and (max-width: 768px) {
.about-nav-list {
justify-content: flex-start;
gap: 20px;
padding: 0 20px;
}
}
.mission-policies-wrap {
max-width: 1800px;
margin: 0 auto;
font-family: "Noto Sans JP", sans-serif;
}
.policy-integrated-block {
background-color: #ffffff;
padding: 60px 50px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
position: relative;
clip-path: polygon(0 40px, 40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.policy-accent-red {
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #B50606;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 10;
}
.policy-col-left {
display: flex;
flex-direction: column;
gap: 50px;
}
.policy-col-right {
display: flex;
flex-direction: column;
}
.policy-num {
font-size: 2rem;
font-weight: bold;
color: #B50606;
margin-bottom: 15px;
font-family: "Quantico", sans-serif;
line-height: 1;
}
.policy-title {
font-size: 1.25rem;
font-weight: bold;
color: #000;
margin: 0 0 15px;
border-bottom: 1px solid #333;
}
.policy-desc {
font-size: 1rem;
line-height: 1.8;
color: #000;
margin: 0;
}
.policy-list {
list-style: none;
padding: 0;
margin: 0;
}
.policy-list li {
font-size: 1rem;
line-height: 1.8;
color: #000;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
}
.policy-list li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
color: #B50606;
font-weight: bold;
}
@media screen and (max-width: 991px) {
.policy-integrated-block {
grid-template-columns: 1fr;
gap: 50px;
padding: 40px 30px;
clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.policy-accent-red {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 767px) {
.policy-num {
font-size: 20px;
}
.policy-title {
font-size: 18px;
}
.policy-desc,
.policy-list li {
font-size: 14px;
}
}
.l-concept-section {
padding: 20px 0px 0px 0px;
}
.l-concept-card {
background-color: #fff;
padding: 50px 100px 50px 50px;
box-sizing: border-box;
color: #000;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.l-concept-main-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 40px;
color: #000;
}
.l-concept-flex-body {
display: flex;
align-items: flex-start;
gap: 40px;
margin-bottom: 40px;
}
.l-concept-logo-area {
flex: 1;
display: flex;
justify-content: center;
}
.l-concept-logo-area img {
max-width: 280px;
height: auto;
}
.l-concept-text-area {
flex: 1.5;
}
.l-concept-lead {
font-size: 16px;
line-height: 1.8;
margin-bottom: 25px;
text-align: justify;
}
.l-concept-red-bold {
color: #B50606;
font-weight: bold;
}
.l-concept-color-intro {
font-weight: bold;
font-size: 16px;
}
.l-concept-color-grid {
display: flex;
gap: 20px;
margin-left: auto;
width: 58%;
}
.l-concept-color-item {
flex: 1;
background-color: #f2f2f2;
padding: 25px;
}
.l-concept-color-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.l-concept-dot {
width: 44px;
height: 44px;
border-radius: 50%;
display: block;
}
.l-concept-dot-red {
background-color: #B50606;
}
.l-concept-dot-black {
background-color: #000;
}
.l-concept-dot-label {
font-weight: bold;
font-size: 16px;
}
.l-concept-dot-desc {
font-size: 14px;
line-height: 1.6;
margin: 0;
}
@media screen and (max-width: 991px) {
.l-concept-color-grid {
width: 100%;
}
}
@media (max-width: 768px) {
.l-concept-card {
padding: 30px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-concept-main-title {
font-size: 18px;
margin-bottom: 30px;
order: 1;
}
.l-concept-flex-body {
flex-direction: column;
gap: 30px;
}
.l-concept-logo-area {
order: 2;
width: 100%;
}
.l-concept-logo-area img {
max-width: 220px;
}
.l-concept-text-area {
order: 3;
}
.l-concept-color-grid {
flex-direction: column;
}
.l-concept-color-item {
padding: 20px;
}
}
.l-concept-card {
background-color: #fff;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-concept-main-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 40px;
color: #000;
}
.l-concept-lead {
font-size: 16px;
line-height: 1.8;
margin-bottom: 40px;
}
.l-concept-info-list {
border-top: 1px solid #ddd;
max-width: 800px;
margin: auto;
}
.l-concept-info-item {
display: flex;
margin: 0;
padding: 18px 0;
border-bottom: 1px solid #ddd;
font-size: 16px;
align-items: flex-start;
}
.l-concept-info-label {
width: 120px;
color: #B50606;
;
font-weight: bold;
flex-shrink: 0;
font-size: 1.15rem;
}
.l-concept-info-content {
margin: 0;
flex-grow: 1;
color: #000;
line-height: 1.6;
}
.l-concept-sub-list {
list-style: none;
padding: 0;
margin: 0;
}
.l-concept-sub-list li {
position: relative;
padding-left: 1.2em;
}
.l-concept-info-content p {
margin: 0 0 8px 0;
}
.l-concept-info-content p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.l-concept-card {
padding: 30px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-concept-main-title {
font-size: 18px;
margin-bottom: 25px;
}
.l-concept-info-item {
flex-direction: column;
padding: 15px 0;
}
.l-concept-info-label {
width: 100%;
margin-bottom: 8px;
}
.l-concept-info-content {
font-size: 14px;
}
}
/* .l-team-section {
padding: 20px 0;
} */
.l-team-main-card {
background-color: #fff;
padding: 50px 25px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
max-width: 1720px;
}
.l-team-title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 40px;
color: #000;
}
.l-team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.l-team-item {
position: relative;
background-color: #fff;
display: flex;
flex-direction: column;
min-height: 720px;
overflow: hidden;
}
.l-team-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.35;
z-index: 1;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.l-team-header-bar {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 38px;
background-color: #B50606;
clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
}
.l-team-content {
position: relative;
z-index: 2;
padding: 70px 18px 40px;
display: flex;
flex-direction: column;
flex-grow: 1;
box-sizing: border-box;
justify-content: end;
}
.l-team-logo {
width: 100%;
max-width: 260px;
height: 260px;
object-fit: contain;
margin: 0 auto 40px;
display: block;
}
.l-team-name {
font-size: 24px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
line-height: 1.4;
text-align: left;
}
.l-team-detail {
font-size: 13px;
line-height: 1.7;
color: #333;
margin: 0;
text-align: left;
font-weight: bold;
}
@media (max-width: 992px) {
.l-team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.l-team-main-card {
padding: 30px 15px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-team-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.l-team-item {
min-height: auto;
}
.l-team-logo {
height: 110px;
margin-bottom: 30px;
}
}
.l-concept-card {
background-color: #fff;
padding: 75px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto 40px;
}
.l-concept-card:last-child {
margin-bottom: 0;
}
.l-concept-main-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 40px;
color: #000;
}
.l-concept-content-group {
margin-bottom: 30px;
}
.l-concept-content-group:last-child {
margin-bottom: 0;
}
.l-concept-sub-label {
color: #B50606;
font-size: 1rem;
font-weight: bold;
margin-bottom: 10px;
}
.l-concept-text {
font-size: 16px;
line-height: 1.8;
margin: 0 0 10px 0;
color: #000;
}
.l-concept-sub-list {
list-style: none;
padding: 0;
margin: 0;
}
.l-concept-sub-list li {
position: relative;
padding-left: 1.5em;
font-size: 16px;
line-height: 1.8;
margin-bottom: 5px;
color: #000;
}
@media (max-width: 768px) {
.l-concept-card {
padding: 30px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-concept-main-title {
font-size: 18px;
margin-bottom: 30px;
}
.l-concept-sub-label {
font-size: 16px;
}
.l-concept-text,
.l-concept-sub-list li {
font-size: 14px;
}
}
.l-concept-card {
background-color: #fff;
padding: 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto 40px;
max-width: 1720px;
}
.l-concept-main-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 40px;
color: #000;
}
.l-concept-lead {
font-size: 16px;
margin-bottom: 20px;
}
.l-concept-table-wrapper {
margin-bottom: 20px;
}
.l-concept-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: fixed;
}
.l-concept-table th,
.l-concept-table td {
border: 1px solid #999;
padding: 10px;
text-align: center;
}
.l-concept-table th {
background-color: #eee;
font-weight: normal;
height: 30px;
}
.u-text-red {
color: #B50606;
font-weight: bold;
}
.l-concept-note {
font-size: 14px;
margin-bottom: 40px;
}
.l-concept-priority-wrap {
font-size: 14px;
line-height: 1.8;
}
.l-concept-priority-title {
font-weight: bold;
margin-bottom: 15px;
}
.l-concept-ordered-list {
padding-left: 2em;
margin: 0;
}
.l-concept-ordered-list li {
margin-bottom: 8px;
}
@media (max-width: 768px) {
.l-concept-card {
padding: 30px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-concept-main-title {
font-size: 18px;
}
.l-concept-table {
font-size: 12px;
}
.l-concept-table th,
.l-concept-table td {
padding: 8px 4px;
}
.l-concept-ordered-list {
padding-left: 1.5em;
}
}
.l-future-card {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-future-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 45px;
color: #000;
}
.l-future-flex-wrap {
display: flex;
align-items: center;
gap: 40px;
}
.l-future-text-box {
flex: 1;
}
.l-future-main-text {
font-size: 16px;
line-height: 2;
margin: 0;
text-align: justify;
color: #000;
}
.l-future-image-box {
flex: 1;
}
.l-future-image-box img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
@media (max-width: 768px) {
.l-future-card {
padding: 40px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-future-title {
font-size: 18px;
margin-bottom: 30px;
}
.l-future-flex-wrap {
flex-direction: column;
gap: 25px;
}
.l-future-image-box {
order: 1;
width: 100%;
}
.l-future-text-box {
order: 2;
width: 100%;
}
.l-future-main-text {
font-size: 14px;
line-height: 1.8;
}
}
.l-partner-card {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-partner-main-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 50px;
color: #000;
}
.l-partner-group {
margin-bottom: 60px;
}
.l-partner-group:last-child {
margin-bottom: 0;
}
.l-partner-cat-title {
color: #B50606;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 25px;
}
.l-partner-list {
display: grid;
gap: 20px;
}
.l-partner-list-grid {
grid-template-columns: repeat(2, 1fr);
}
.l-partner-item {
position: relative;
background-color: #f2f2f2;
padding: 25px;
display: flex;
box-sizing: border-box;
min-height: 180px;
}
.l-partner-red-corner {
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 35px;
background-color: #B50606;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.l-partner-item-inner {
display: flex;
gap: 20px;
width: 100%;
align-items: center;
}
.l-partner-logo {
background-color: #fff;
width: 40%;
height: auto;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
}
.l-partner-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.l-partner-info {
flex-grow: 1;
}
.l-partner-name {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #000;
}
.l-partner-desc {
font-size: 13px;
line-height: 1.6;
color: #333;
margin: 0;
}
.l-partner-link-icon {
position: absolute;
bottom: 15px;
right: 15px;
width: 18px;
height: 18px;
border: 1px solid #999;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
.l-partner-section {
padding: 20px 0px 0px 0px;
}
@media (max-width: 900px) {
.l-partner-list-grid {
grid-template-columns: 1fr;
}
.l-partner-item {
min-height: auto;
}
}
@media (max-width: 768px) {
.l-partner-card {
padding: 40px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-partner-item-inner {
flex-direction: column;
}
.l-partner-logo {
width: 100%;
height: 120px;
}
}
.l-recruit-section {
max-width: 1800px;
padding: 40px;
margin: auto;
}
.recruit-container {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
text-align: center;
}
.recruit-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 60px;
color: #000;
}
.recruit-sections {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
position: relative;
}
.recruit-sections::before {
content: '';
position: absolute;
top: 0;
left: 33.333%;
width: 0.5px;
height: 100%;
background-color: #000000;
transform: translateX(-50%);
}
.recruit-sections::after {
content: '';
position: absolute;
top: 0;
left: 66.666%;
width: 0.5px;
height: 100%;
background-color: #000000;
transform: translateX(-50%);
}
.recruit-item {
width: 30%;
flex-direction: column;
align-items: baseline;
position: relative;
z-index: 1;
}
.recruit-num {
font-size: 48px;
color: #B50606;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
font-family: "Quantico", sans-serif;
}
.recruit-icon {
height: 180px;
width: auto;
margin-bottom: 30px;
margin: auto;
padding: 20px;
}
.recruit-header {
background-color: #B50606;
color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
width: 100%;
box-sizing: border-box;
margin-bottom: 30px;
}
.recruit-text {
font-size: 13px;
line-height: 1.8;
text-align: left;
margin: 0;
color: #000;
}
.recruit-button {
display: inline-block;
background-color: #c9b369;
color: #ffffff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
padding: 15px 40px;
position: relative;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.recruit-button::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #ffffff;
margin-left: 10px;
position: relative;
top: -1px;
}
@media (max-width: 768px) {
.recruit-container {
padding: 40px 20px;
}
.recruit-title {
font-size: 20px;
margin-bottom: 40px;
}
.recruit-sections {
flex-direction: column;
margin-bottom: 40px;
}
.recruit-sections::before,
.recruit-sections::after {
display: none;
}
.recruit-item {
width: 100%;
margin-bottom: 40px;
}
.recruit-item:last-child {
margin-bottom: 0;
}
.recruit-num {
font-size: 40px;
}
.recruit-icon {
height: 160px;
margin-bottom: 20px;
}
.recruit-header {
margin-bottom: 20px;
}
.recruit-button {
width: 100%;
box-sizing: border-box;
}
}
.l-contact-section {
padding: 60px 0;
}
.l-contact-card {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-contact-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
color: #000;
}
.l-contact-note {
font-size: 13px;
line-height: 1.8;
color: #1a1a1a;
margin-bottom: 50px;
}
.l-form-row {
display: flex;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #e0e0e0;
}
.l-form-row.is-top {
align-items: flex-start;
border-bottom: none;
}
/* .l-form-label {
width: 35%;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
color: #000;
}
.l-form-req {
background-color: #B50606;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 2px;
margin-left: 20px;
font-weight: normal;
} */
.l-form-label {
width: 35%;
position: relative;
padding-right: 80px;
box-sizing: border-box;
display: flex;
align-items: center;
color: #000;
}
.l-form-label p {
margin: 0 !important;
width: 100%;
}
.l-form-label br {
display: none !important;
}
.l-form-name {
font-weight: bold;
font-size: 16px;
}
.l-form-req {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
background-color: #B50606;
color: #fff;
font-size: 12px;
padding: 3px 8px;
border-radius: 2px;
font-weight: normal;
line-height: 1;
}
.l-form-input {
width: 65%;
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea {
width: 100%;
background-color: #f2f2f2;
border: none;
padding: 15px;
box-sizing: border-box;
font-size: 16px;
font-family: inherit;
color: #333;
outline: none;
}
.wpcf7-form-control.wpcf7-textarea {
height: 200px;
resize: vertical;
}
.wpcf7-form-control.wpcf7-select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 16px;
}
.l-form-submit-wrap {
text-align: center;
margin-top: 40px;
}
.wpcf7-submit {
background-color: #d2b773;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
padding: 15px 80px;
cursor: pointer;
transition: opacity 0.3s ease;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.wpcf7-submit:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.l-contact-card {
padding: 40px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-form-row {
flex-direction: column;
align-items: flex-start;
border-bottom: none;
padding: 15px 0;
}
.l-form-label {
width: 100%;
margin-bottom: 10px;
}
.l-form-req {
margin-left: 10px;
}
.l-form-input {
width: 100%;
}
.wpcf7-submit {
width: 100%;
padding: 15px;
}
}
.wpcf7-response-output {
color: #000;
}
.l-penalty-section {
padding: 20px 0;
}
.l-penalty-card {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto 40px;
}
.l-penalty-card:last-child {
margin-bottom: 0;
}
.l-penalty-main-title {
text-align: center;
font-size: 22px;
font-weight: bold;
margin-bottom: 40px;
color: #000;
}
.l-penalty-intro {
font-size: 16px;
line-height: 1.8;
color: #333;
margin-bottom: 30px;
}
.l-penalty-intro p {
margin: 0 0 15px 0;
}
.l-penalty-intro p:last-child {
margin-bottom: 0;
}
.l-penalty-table-wrapper {
width: 100%;
overflow-x: auto;
margin-top: 20px;
color: #000;
}
.l-penalty-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 700px;
}
.l-penalty-table th,
.l-penalty-table td {
border: 1px solid #ddd;
padding: 12px 10px;
vertical-align: middle;
line-height: 1.6;
}
.l-penalty-table th {
background-color: #f2f2f2;
font-weight: bold;
text-align: center;
color: #000;
white-space: nowrap;
}
.l-penalty-table td strong {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.col-no {
width: 50px;
}
.col-rule {
width: 90px;
}
.col-name {
width: auto;
}
.col-point {
width: 140px;
}
.u-text-center {
text-align: center;
}
.l-penalty-rule-block {
margin-bottom: 35px;
}
.l-penalty-rule-block:last-child {
margin-bottom: 0;
}
.l-penalty-rule-title {
color: #B50606;
font-size: 16px;
font-weight: bold;
margin: 0 0 10px 0;
}
.l-penalty-rule-text {
font-size: 14px;
line-height: 1.8;
color: #1a1a1a;
margin: 0;
padding-left: 1.2em;
}
@media (max-width: 768px) {
.l-penalty-card {
padding: 30px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-penalty-main-title {
font-size: 18px;
margin-bottom: 30px;
}
.l-penalty-intro {
font-size: 14px;
}
.l-penalty-table {
font-size: 12px;
}
.l-penalty-table th,
.l-penalty-table td {
padding: 8px;
}
.l-penalty-rule-title {
font-size: 16px;
}
.l-penalty-rule-text {
font-size: 13px;
padding-left: 0;
}
}
.l-faq-wrapper {
background-color: #000;
padding: 20px 0;
}
.l-faq-nav {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0 0 50px 0;
}
.l-faq-nav a {
display: block;
color: #fff;
text-decoration: none;
border: 1px solid #fff;
border-radius: 30px;
padding: 10px 25px;
font-size: 13px;
transition: all 0.3s;
}
.l-faq-nav a:hover {
background-color: #fff;
color: #000;
}
.l-faq-card {
background-color: #fff;
padding: 60px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-faq-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 50px;
color: #000;
}
.l-faq-item {
border-bottom: 1px solid #ddd;
}
.l-faq-item:last-child {
border-bottom: none;
}
.l-faq-q {
width: 100%;
display: flex;
align-items: center;
background: none;
border: none;
padding: 30px 0;
cursor: pointer;
text-align: left;
outline: none;
}
.l-faq-q-mark {
color: #B50606;
font-size: 24px;
font-weight: normal;
margin-right: 15px;
font-family: Arial, sans-serif;
}
.l-faq-q-text {
flex-grow: 1;
font-size: 16px;
font-weight: bold;
color: #000;
line-height: 1.5;
padding-right: 20px;
}
.l-faq-icon {
position: relative;
width: 32px;
height: 32px;
background-color: #B50606;
border-radius: 50%;
flex-shrink: 0;
}
.l-faq-icon::before,
.l-faq-icon::after {
content: "";
position: absolute;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
.l-faq-icon::before {
width: 14px;
height: 2px;
}
.l-faq-icon::after {
width: 2px;
height: 14px;
}
.l-faq-item.is-open .l-faq-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.l-faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out;
}
.l-faq-a>div {
overflow: hidden;
}
.l-faq-item.is-open .l-faq-a {
grid-template-rows: 1fr;
}
.l-faq-a-inner {
background-color: #f4f4f4;
padding: 30px;
display: flex;
margin-bottom: 30px;
}
.l-faq-a-mark {
color: #B50606;
font-size: 24px;
font-weight: normal;
margin-right: 15px;
font-family: Arial, sans-serif;
}
.l-faq-a-content {
flex-grow: 1;
padding-top: 5px;
}
.l-faq-a-content p {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #1a1a1a;
line-height: 1.8;
}
.l-faq-btn-wrap {
text-align: center;
margin-top: 30px;
}
.l-faq-btn {
display: inline-block;
background-color: #d1b870;
color: #fff;
padding: 15px 80px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: opacity 0.3s;
}
.l-faq-btn:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.l-faq-card {
padding: 30px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 0px) 100%, 0 100%, 0 20px);
}
.l-faq-q {
padding: 20px 0;
}
.l-faq-q-text {
font-size: 16px;
}
.l-faq-a-inner {
padding: 20px;
flex-direction: column;
}
.l-faq-a-mark {
margin-bottom: 10px;
}
.l-faq-btn {
width: 100%;
box-sizing: border-box;
padding: 15px 20px;
}
}
.l-media-section {
padding: 20px 0;
}
.l-media-card {
background-color: #ffffff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto 40px;
}
.l-media-card:last-child {
margin-bottom: 0;
}
.l-media-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 35px;
color: #000;
}
.l-media-intro {
text-align: center;
color: #000;
}
.l-media-intro p {
font-size: 16px;
line-height: 1.8;
margin: 0 0 25px 0;
}
.l-media-target-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.l-media-target-badge {
background-color: #d9e8fa;
color: #000;
font-size: 13px;
font-weight: bold;
padding: 4px 12px;
border-radius: 2px;
}
.l-media-target-text {
font-size: 16px;
font-weight: bold;
}
.l-media-dl {
margin: 0;
padding: 0;
}
.l-media-row {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
line-height: 1.8;
}
.l-media-row:last-child {
margin-bottom: 0;
}
.l-media-row dt {
width: 200px;
flex-shrink: 0;
color: #B50606;
font-weight: bold;
font-size: 16px;
}
.l-media-row dd {
flex-grow: 1;
margin: 0;
font-size: 16px;
color: #000;
font-weight: bold;
}
.l-media-dl {
width: 80%;
margin: auto;
}
@media (max-width: 768px) {
.l-media-card {
padding: 40px 20px;
clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-media-title {
font-size: 20px;
}
.l-media-intro p,
.l-media-target-text,
.l-media-row dt,
.l-media-row dd {
font-size: 14px;
}
.l-media-target-wrap {
flex-direction: column;
gap: 10px;
}
.l-media-row {
flex-direction: column;
gap: 5px;
margin-bottom: 25px;
}
.l-media-row dt {
width: 100%;
}
.l-media-dl {
width: 100%;
margin: auto;
}
}
.l-flow-grid {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.l-flow-step {
flex: 1;
padding: 0 20px;
position: relative;
}
.l-flow-step:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 10px;
bottom: 10px;
width: 0.5px;
background-color: #000;
}
.l-flow-num {
color: #B50606;
font-size: 48px;
font-weight: bold;
line-height: 1;
margin-bottom: 15px;
font-family: "Quantico", sans-serif;
}
.l-flow-icon {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.l-flow-icon img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.l-flow-label {
background-color: #B50606;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: bold;
padding: 6px 0;
margin-bottom: 15px;
}
.l-flow-desc {
font-size: 13px;
line-height: 1.6;
color: #000;
margin: 0;
}
.l-flow-btn-area {
display: flex;
justify-content: center;
gap: 30px;
}
.l-flow-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #d1b870;
color: #fff;
padding: 15px 40px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: opacity 0.3s;
position: relative;
min-width: 250px;
box-sizing: border-box;
}
.l-flow-btn:hover {
opacity: 0.8;
}
.l-flow-btn::after {
content: ">";
position: absolute;
right: 20px;
font-size: 20px;
}
@media (max-width: 768px) {
.l-flow-grid {
flex-direction: column;
gap: 40px;
}
.l-flow-step {
padding: 0;
}
.l-flow-step:not(:last-child)::after {
display: none;
}
.l-flow-btn-area {
flex-direction: column;
gap: 15px;
}
.l-flow-btn {
width: 100%;
}
.l-flow-icon {
height: 160px;
}
}
.l-partner-reason-section {
padding: 20px 0;
}
.l-partner-page-nav {
display: flex;
justify-content: center;
gap: 30px;
list-style: none;
padding: 0;
margin: 0 0 50px 0;
}
.l-partner-page-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: #B50606;
font-size: 16px;
font-weight: bold;
text-decoration: none;
padding: 15px 40px;
min-width: 280px;
box-sizing: border-box;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: all 0.3s;
}
.l-partner-page-nav a::after {
content: "∨";
margin-left: 10px;
font-size: 12px;
}
.l-partner-page-nav a:hover {
background-color: #B50606;
color: #fff;
}
.l-partner-reason-card {
background-color: #fff;
padding: 60px;
box-sizing: border-box;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
margin: 0 auto;
}
.l-partner-reason-title {
text-align: center;
font-size: 26px;
font-weight: bold;
color: #000;
margin-bottom: 60px;
}
.l-partner-features {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
.l-partner-feature {
flex: 1;
padding: 0 25px;
position: relative;
text-align: center;
}
.l-partner-feature:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1px;
background-color: #ccc;
}
.l-feature-num {
color: #B50606;
font-size: 36px;
font-weight: bold;
line-height: 1;
margin-bottom: 20px;
font-family: "Quantico", sans-serif;
text-align: left;
}
.l-feature-icon {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.l-feature-icon img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.l-feature-label {
background-color: #B50606;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 8px 0;
margin-bottom: 20px;
}
.l-feature-desc {
font-size: 13px;
line-height: 1.8;
color: #1a1a1a;
text-align: left;
margin: 0;
}
.l-partner-stats {
display: flex;
justify-content: space-between;
gap: 30px;
}
.l-partner-stat {
flex: 1;
background-color: #f2f2f2;
padding: 30px 20px;
text-align: center;
position: relative;
}
.l-partner-stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 30px solid #B50606;
border-right: 30px solid transparent;
}
.l-stat-title {
font-size: 16px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.l-stat-value {
color: #B50606;
font-weight: bold;
display: flex;
align-items: baseline;
justify-content: center;
}
.l-stat-number {
font-size: 60px;
line-height: 1;
font-family: Arial, sans-serif;
}
.l-stat-unit {
font-size: 16px;
color: #000;
margin-left: 5px;
}
.l-stat-value.is-text {
font-size: 32px;
padding-top: 15px;
}
.l-stat-amp {
font-size: 20px;
margin: 0 5px;
color: #333;
}
@media (max-width: 768px) {
.l-partner-page-nav {
flex-direction: column;
gap: 15px;
align-items: center;
}
.l-partner-page-nav a {
width: 100%;
max-width: 320px;
}
.l-partner-reason-card {
padding: 40px 20px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}
.l-partner-reason-title {
font-size: 20px;
margin-bottom: 40px;
}
.l-partner-features {
flex-direction: column;
gap: 40px;
}
.l-partner-feature {
padding: 0;
}
.l-partner-feature:not(:last-child)::after {
display: none;
}
.l-partner-stats {
flex-direction: column;
gap: 20px;
}
.l-feature-icon {
height: 160px;
}
}
.l-corporate-section {
padding: 0 0 20px 0;
}
.l-corporate-card {
background-color: #fff;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
margin: 0 auto;
}
.l-corporate-hero {
position: relative;
height: 500px;
background-image: url('images/partnership.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.l-corporate-hero-2 {
position: relative;
height: 500px;
background-image: url('images/partnership-2.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.l-corporate-hero::after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.l-corporate-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 60px solid #B50606;
border-right: 60px solid transparent;
z-index: 2;
}
.l-corporate-hero-2::after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.l-corporate-hero-2::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 60px solid #B50606;
border-right: 60px solid transparent;
z-index: 2;
}
.l-corporate-title {
position: relative;
z-index: 2;
color: #fff;
font-size: 32px;
font-weight: bold;
letter-spacing: 0.1em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
margin: 0;
}
.l-corporate-body {
padding: 60px 80px;
}
.l-corporate-catch {
color: #B50606;
font-size: 20px;
font-weight: bold;
margin-bottom: 25px;
}
.l-corporate-text {
font-size: 16px;
line-height: 2;
color: #1a1a1a;
margin: 0 0 40px 0;
}
.l-corporate-menu {
background-color: #ffffff;
padding: 40px 50px;
margin-bottom: 50px;
}
.l-corporate-menu-title {
font-size: 18px;
font-weight: bold;
color: #000;
margin: 0 0 20px 0;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.l-corporate-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.l-corporate-menu-list li {
position: relative;
padding-left: 20px;
margin-bottom: 15px;
font-size: 16px;
font-weight: bold;
color: #000;
}
.l-corporate-menu-list li:last-child {
margin-bottom: 0;
}
.l-corporate-menu-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background-color: #B50606;
;
border-radius: 50%;
}
.l-corporate-btn-wrap {
text-align: center;
}
.l-corporate-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #d1b870;
color: #fff;
padding: 15px 50px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: opacity 0.3s;
position: relative;
}
.l-corporate-btn:hover {
opacity: 0.8;
}
.l-corporate-btn::after {
content: ">";
position: absolute;
right: 20px;
font-size: 20px;
}
@media (max-width: 768px) {
.l-corporate-hero {
height: 300px;
}
.l-corporate-hero::before {
border-top: 40px solid #B50606;
border-right: 40px solid transparent;
}
.l-corporate-hero-2 {
height: 300px;
}
.l-corporate-hero-2::before {
border-top: 40px solid #B50606;
border-right: 40px solid transparent;
}
.l-corporate-title {
font-size: 22px;
}
.l-corporate-body {
padding: 40px 20px;
}
.l-corporate-catch {
font-size: 18px;
}
.l-corporate-text {
font-size: 14px;
}
.l-corporate-menu {
padding: 30px 20px;
}
.l-corporate-menu-title {
font-size: 16px;
}
.l-corporate-menu-list li {
font-size: 14px;
}
.l-corporate-btn {
width: 100%;
box-sizing: border-box;
}
}
.l-corporate-catch-2 {
color: #B50606;
font-size: 24px;
font-weight: bold;
margin-bottom: 25px;
text-align: center;
}
.l-corporate-text-2 {
font-size: 16px;
line-height: 2;
color: #1a1a1a;
margin: 0 0 40px 0;
text-align: center;
}
.l-ticket-step-section {
padding: 20px 0;
}
.l-ticket-step-card {
background-color: #ffffff;
padding: 60px 50px;
box-sizing: border-box;
margin: 0 auto;
}
.l-ticket-step-title {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #000;
margin-bottom: 50px;
}
.l-ticket-step-grid {
display: flex;
justify-content: space-between;
gap: 40px;
}
.l-ticket-step-item {
flex: 1;
display: flex;
flex-direction: column;
}
.l-ticket-step-num {
color: #B50606;
font-size: 32px;
font-weight: bold;
line-height: 1;
margin-bottom: 20px;
font-family: "Quantico", sans-serif;
text-align: left;
}
.l-ticket-step-icon {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.l-ticket-step-icon img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.l-ticket-step-label {
background-color: #B50606;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: bold;
padding: 8px 0;
margin-bottom: 15px;
}
.l-ticket-step-desc {
font-size: 16px;
line-height: 1.6;
color: #1a1a1a;
margin: 0;
font-weight: bold;
}
@media (max-width: 768px) {
.l-ticket-step-card {
padding: 40px 20px;
}
.l-ticket-step-title {
font-size: 20px;
margin-bottom: 40px;
}
.l-ticket-step-grid {
flex-direction: column;
gap: 50px;
}
.l-ticket-step-icon {
height: 160px;
}
}
.l-comingsoon-wrapper {
padding: 100px 0;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.l-comingsoon-card {
background-color: #fff;
padding: 80px 50px;
text-align: center;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.l-comingsoon-title {
font-size: 40px;
font-weight: bold;
color: #B50606;
margin-bottom: 30px;
letter-spacing: 0.05em;
font-family: "Quantico", sans-serif;
}
.l-comingsoon-text {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
margin-bottom: 50px;
font-weight: bold;
}
.l-comingsoon-btn-wrap {
text-align: center;
}
.l-comingsoon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #d1b870;
color: #fff;
padding: 15px 50px;
font-size: 15px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: opacity 0.3s;
position: relative;
}
.l-comingsoon-btn:hover {
opacity: 0.8;
}
.l-comingsoon-btn::after {
content: ">";
position: absolute;
right: 20px;
font-size: 20px;
}
@media (max-width: 768px) {
.l-comingsoon-wrapper {
padding: 60px 15px;
min-height: 50vh;
}
.l-comingsoon-card {
padding: 50px 20px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-comingsoon-title {
font-size: 28px;
margin-bottom: 20px;
}
.l-comingsoon-text {
font-size: 14px;
margin-bottom: 40px;
}
.l-comingsoon-btn {
width: 100%;
box-sizing: border-box;
}
}
.l-archive-wrapper {
padding: 60px 0 100px;
background-color: #fcfcfc;
}
.l-archive-main-title {
background-color: #B50606;
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 15px 20px;
margin: 0 0 10px 0;
}
.l-archive-link-right {
text-align: right;
margin-bottom: 40px;
}
.l-archive-link-right a {
color: #333;
font-size: 13px;
text-decoration: none;
transition: opacity 0.3s;
}
.l-archive-link-right a:hover {
opacity: 0.7;
text-decoration: underline;
}
.l-archive-block {
margin-bottom: 60px;
}
.l-archive-block-title {
font-size: 22px;
font-weight: bold;
color: #333;
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 1px solid #B50606;
}
.l-archive-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 10px;
}
.l-archive-card {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #fff;
color: #333;
font-size: 15px;
font-weight: bold;
text-decoration: none;
padding: 40px 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid transparent;
}
a.l-archive-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-color: #B50606;
color: #B50606;
transform: translateY(-2px);
}
.l-archive-card.is-disabled {
color: #999;
background-color: #f9f9f9;
box-shadow: none;
border: 1px solid #eee;
}
.l-archive-card.is-disabled small {
font-weight: normal;
font-size: 12px;
margin-top: 5px;
display: block;
}
@media (max-width: 992px) {
.l-archive-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.l-archive-cards {
grid-template-columns: 1fr;
}
.l-archive-card {
padding: 25px 15px;
}
}
.l-archive-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 50px;
}
.l-archive-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
background-color: #fff;
color: #333;
text-decoration: none;
border: 1px solid #ddd;
font-weight: bold;
font-size: 16px;
transition: all 0.3s ease;
}
.l-archive-pagination .page-numbers:hover {
background-color: #f4f4f4;
}
.l-archive-pagination .page-numbers.current {
background-color: #B50606;
color: #fff;
border-color: #B50606;
pointer-events: none;
}
.l-archive-pagination .prev,
.l-archive-pagination .next {
padding: 0 15px;
}
.l-highlight-section {
padding: 60px 0;
background-color: #000;
}
.l-highlight-card {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-highlight-title {
text-align: center;
font-size: 26px;
font-weight: bold;
color: #000;
margin-bottom: 40px;
}
.l-highlight-date {
color: #B50606;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
margin-bottom: 10px;
}
.l-highlight-main {
margin-bottom: 40px;
}
.l-highlight-main-link {
display: flex;
align-items: center;
gap: 40px;
text-decoration: none;
color: #000;
transition: opacity 0.3s ease;
}
.l-highlight-main-link:hover {
opacity: 0.8;
}
.l-highlight-main-img {
width: 55%;
}
.l-highlight-main-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.l-highlight-main-info {
width: 45%;
}
.l-highlight-main-title-text {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
margin: 0;
}
.l-highlight-sub-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-bottom: 50px;
}
.l-highlight-sub-item {
text-decoration: none;
color: #000;
display: flex;
flex-direction: column;
transition: opacity 0.3s ease;
}
.l-highlight-sub-item:hover {
opacity: 0.8;
}
.l-highlight-sub-img {
margin-bottom: 12px;
}
.l-highlight-sub-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.l-highlight-sub-info .l-highlight-date {
font-size: 13px;
margin-bottom: 5px;
}
.l-highlight-sub-title-text {
font-size: 13px;
font-weight: bold;
line-height: 1.4;
margin: 0;
}
.l-highlight-btn-wrap {
text-align: center;
}
.l-highlight-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #d1b870;
color: #fff;
padding: 5px 50px;
font-size: 21px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: opacity 0.3s;
position: relative;
min-width: 280px;
box-sizing: border-box;
}
.l-highlight-btn:hover {
opacity: 0.8;
}
.l-highlight-btn::after {
content: ">";
position: absolute;
right: 20px;
font-size: 20px;
}
@media (max-width: 992px) {
.l-highlight-sub-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.l-highlight-card {
padding: 40px 20px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-highlight-main-link {
flex-direction: column;
gap: 20px;
}
.l-highlight-main-img,
.l-highlight-main-info {
width: 100%;
}
.l-highlight-main-title-text {
font-size: 18px;
}
.l-highlight-sub-list {
grid-template-columns: repeat(2, 1fr);
gap: 20px 15px;
}
.l-highlight-btn {
width: 100%;
}
}
.l-video-section {
padding: 60px 0;
background-color: #000;
}
.l-video-card {
background-color: #fff;
padding: 60px 50px;
box-sizing: border-box;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-video-title {
text-align: center;
font-size: 26px;
font-weight: bold;
color: #000;
margin-bottom: 40px;
}
.l-video-date {
color: #B50606;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
margin-bottom: 10px;
}
.l-video-main {
margin-bottom: 40px;
}
.l-video-main-link {
display: flex;
align-items: center;
gap: 40px;
text-decoration: none;
color: #000;
transition: opacity 0.3s ease;
}
.l-video-main-link:hover {
opacity: 0.8;
}
.l-video-main-img {
width: 55%;
position: relative;
display: block;
}
.l-video-main-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.l-video-main-info {
width: 45%;
}
.l-video-main-title-text {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
margin: 0;
}
.l-video-sub-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-bottom: 50px;
}
.l-video-sub-item {
text-decoration: none;
color: #000;
display: flex;
flex-direction: column;
transition: opacity 0.3s ease;
}
.l-video-sub-item:hover {
opacity: 0.8;
}
.l-video-sub-img {
margin-bottom: 12px;
position: relative;
display: block;
}
.l-video-sub-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.l-video-sub-info .l-video-date {
font-size: 13px;
margin-bottom: 5px;
}
.l-video-sub-title-text {
font-size: 13px;
font-weight: bold;
line-height: 1.4;
margin: 0;
}
.l-video-btn-wrap {
text-align: center;
}
.l-video-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #d1b870;
color: #fff;
padding: 15px 50px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 0px) 100%, 0 100%, 0 15px);
transition: opacity 0.3s;
position: relative;
min-width: 280px;
box-sizing: border-box;
}
.l-video-btn:hover {
opacity: 0.8;
}
.l-video-btn::after {
content: ">";
position: absolute;
right: 20px;
font-size: 20px;
}
.l-video-main-img::after,
.l-video-sub-img::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
background-image: url("images/key.png");
background-repeat: no-repeat;
background-position: center;
z-index: 2;
transition: background-color 0.3s ease;
}
.l-video-main-img::after {
background-size: 20%;
}
.l-video-sub-img::after {
background-size: 25%;
}
.l-video-main-link:hover .l-video-main-img::after,
.l-video-sub-item:hover .l-video-sub-img::after {
background-color: rgba(0, 0, 0, 0.2);
}
@media (max-width: 992px) {
.l-video-sub-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.l-video-card {
padding: 40px 20px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-video-main-link {
flex-direction: column;
gap: 20px;
}
.l-video-main-img,
.l-video-main-info {
width: 100%;
}
.l-video-main-title-text {
font-size: 18px;
}
.l-video-sub-list {
grid-template-columns: repeat(2, 1fr);
gap: 20px 15px;
}
.l-video-btn {
width: 100%;
}
}
/* ---------------------------
* GUIDE
* --------------------------- */
.l-guide-nav-wrap {
background-color: #000;
padding: 20px 0;
border-bottom: 1px solid #333;
}
.l-guide-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px 40px;
list-style: none;
padding: 0;
margin: 0;
}
.l-guide-nav a {
color: #d1b870;
font-size: 16px;
font-weight: bold;
text-decoration: none;
transition: opacity 0.3s;
}
.l-guide-nav a:hover {
opacity: 0.7;
text-decoration: underline;
}
.l-guide-section {
padding: 60px 0;
background-color: #000;
}
.l-guide-card {
background-color: #fff;
padding: 80px 60px;
box-sizing: border-box;
clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
margin: 0 auto;
}
.l-guide-main-title {
text-align: center;
font-size: 28px;
font-weight: bold;
color: #d1b870;
margin-bottom: 60px;
font-family: "Quantico", sans-serif;
}
.l-guide-steps {
display: flex;
justify-content: space-between;
gap: 40px;
margin-bottom: 80px;
}
.l-guide-step {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
}
.l-step-num {
color: #B50606;
font-size: 36px;
font-weight: bold;
font-family: "Quantico", sans-serif;
text-align: left;
margin-bottom: 15px;
}
.l-step-icon {
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.l-step-icon img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.l-step-label {
background-color: #B50606;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 8px 0;
margin-bottom: 20px;
}
.l-step-desc {
font-size: 16px;
line-height: 1.6;
color: #1a1a1a;
font-weight: bold;
text-align: left;
flex-grow: 1;
margin-bottom: 25px;
}
.l-step-btn {
display: inline-block;
background-color: #d1b870;
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
padding: 12px 0;
width: 100%;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 0px) 100%, 0 100%, 0 10px);
transition: opacity 0.3s;
position: relative;
}
.l-step-btn:hover {
opacity: 0.8;
}
.l-step-btn::after {
content: ">";
position: absolute;
right: 15px;
font-size: 16px;
}
.l-guide-timeline-box {
background-color: #f5f4ed;
padding: 50px 60px;
}
.l-timeline-header {
text-align: center;
margin-bottom: 50px;
}
.l-timeline-title {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.l-timeline-sub {
font-size: 16px;
color: #333;
font-weight: bold;
}
.l-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.l-timeline::before {
content: '';
position: absolute;
left: 7px;
top: 10px;
bottom: 0;
width: 1px;
background-color: #999;
}
.l-timeline-item {
position: relative;
padding-left: 60px;
margin-bottom: 60px;
}
.l-timeline-item:last-child {
margin-bottom: 0;
}
.l-timeline-dot {
position: absolute;
left: 0;
top: 5px;
width: 15px;
height: 15px;
background-color: #333;
border-radius: 50%;
border: 3px solid #f5f4ed;
box-shadow: 0 0 0 1px #333;
z-index: 2;
transition: all 0.4s ease;
}
.l-timeline-item.is-active .l-timeline-dot {
background-color: #B50606;
box-shadow: 0 0 0 1px #B50606;
}
.l-timeline-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.l-timeline-text {
width: 50%;
}
.l-timeline-time {
color: #B50606;
font-weight: bold;
font-size: 18px;
margin-bottom: 8px;
}
.l-timeline-time.is-red {
font-family: Arial, sans-serif;
letter-spacing: 0.05em;
}
.l-timeline-head {
font-size: 21px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.l-timeline-desc {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
font-weight: bold;
}
.l-timeline-img {
width: 45%;
}
.l-timeline-img img {
width: 100%;
height: auto;
display: block;
}
.l-guide-play-grid2 {
display: flex;
justify-content: space-between;
gap: 30px;
margin-bottom: 20px;
}
.l-play-item2.is-large {
width: 48%;
display: flex;
flex-direction: column;
}
.l-play-item2.is-large {
width: 48%;
display: flex;
flex-direction: column;
}
.l-play-sub-group2 {
width: 48%;
display: flex;
flex-direction: column;
gap: 30px;
}
@media (max-width: 1200px) {
.l-play-item2.is-large {
width: 100%;
}
.l-play-sub-group2 {
width: 100%;
}
.l-guide-play-grid2 {
flex-direction: column;
}
}
@media (max-width: 768px) {
.l-guide-card {
padding: 40px 20px;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.l-guide-steps {
flex-direction: column;
gap: 50px;
}
.l-guide-timeline-box {
padding: 40px 20px;
}
.l-timeline::before,
.l-timeline-dot {
display: none;
}
.l-timeline-item {
padding-left: 0;
margin-bottom: 50px;
}
.l-timeline-content {
flex-direction: column;
gap: 20px;
}
.l-timeline-text,
.l-timeline-img {
width: 100%;
}
.l-step-icon {
height: 180px;
}
}
.l-guide-rules {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 20px;
}
.l-guide-rule {
flex: 1;
display: flex;
flex-direction: column;
}
.l-rule-img {
border: 1px solid #ccc;
background-color: #fff;
border-bottom: none;
}
.l-rule-img img {
width: 100%;
height: auto;
display: block;
}
.l-rule-body {
background-color: #f2f2f2;
padding: 30px 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.l-rule-title {
color: #B50606;
font-size: 18px;
font-weight: bold;
text-align: center;
margin-bottom: 25px;
}
.l-rule-text {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
font-weight: bold;
}
.l-rule-text p {
margin: 0 0 20px 0;
}
.l-rule-text p:last-child {
margin-bottom: 0;
}
.l-rule-text .is-red {
color: #B50606;
}
@media (max-width: 768px) {
.l-guide-rules {
flex-direction: column;
gap: 40px;
}
.l-rule-img {
border-bottom: 1px solid #ccc;
}
}
.l-guide-cold-flex {
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
}
.l-guide-cold-text {
width: 55%;
}
.l-cold-item {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 40px;
}
.l-cold-item:last-child {
margin-bottom: 0;
}
.l-cold-icon {
width: 30px;
height: auto;
flex-shrink: 0;
}
.l-cold-icon img {
width: 100%;
height: auto;
}
.l-cold-head {
display: flex;
align-items: center;
gap: 10px;
font-size: 21px;
font-weight: bold;
color: #000;
margin-bottom: 10px;
}
.l-cold-desc {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
font-weight: bold;
}
.l-guide-cold-img-wrap {
width: 40%;
position: relative;
}
.l-cold-main-img img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.l-cold-label {
position: absolute;
right: -20px;
bottom: 20px;
background-color: #fff;
color: #000;
font-size: 16px;
font-weight: bold;
padding: 15px 20px;
border-left: 4px solid #B50606;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
white-space: nowrap;
clip-path: none;
}
@media (max-width: 768px) {
.l-guide-cold-flex {
flex-direction: column;
gap: 40px;
}
.l-guide-cold-text,
.l-guide-cold-img-wrap {
width: 100%;
}
.l-cold-head {
font-size: 18px;
}
.l-cold-desc {
font-size: 14px;
}
.l-cold-label {
right: 0;
bottom: 10px;
font-size: 13px;
padding: 10px 15px;
}
}
.l-guide-play-grid {
display: flex;
justify-content: space-between;
gap: 30px;
margin-bottom: 20px;
}
.l-play-body {
background-color: #fcfbf5;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.l-play-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.l-play-head {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
font-size: 21px;
font-weight: bold;
color: #000;
margin-bottom: 20px;
}
.l-play-icon {
width: 30px;
height: auto;
}
.l-play-text {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
font-weight: bold;
margin: 0;
}
.l-play-item.is-large {
width: 48%;
display: flex;
flex-direction: column;
}
/* .l-play-item.is-large .l-play-img {
height: 250px;
} */
.l-play-item.is-large .l-play-body {
flex-grow: 1;
}
.l-play-sub-group {
width: 48%;
display: flex;
flex-direction: column;
gap: 30px;
}
.l-play-item.is-row {
display: flex;
flex-grow: 1;
}
.l-play-item.is-row .l-play-body {
width: 65%;
}
/* .l-play-item.is-row .l-play-img {
width: 35%;
} */
.l-guide-play-note {
font-size: 14px;
color: #666;
margin-bottom: 50px;
}
.l-guide-mascot-box {
background-color: #f2f2f2;
padding: 50px;
}
.l-mascot-header {
text-align: center;
margin-bottom: 40px;
}
.l-mascot-title {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.l-mascot-sub {
font-size: 16px;
color: #333;
font-weight: bold;
line-height: 1.6;
}
.l-mascot-list {
display: flex;
justify-content: space-between;
gap: 20px;
}
.l-mascot-item {
flex: 1;
text-align: center;
}
.l-mascot-img {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
margin-bottom: 20px;
background-color: #fff;
border: 3px solid #ccc;
box-sizing: border-box;
}
.l-mascot-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.l-mascot-name {
font-size: 18px;
font-weight: bold;
color: #000;
margin-bottom: 10px;
}
.l-mascot-team {
font-size: 16px;
font-weight: bold;
color: #B50606;
margin: 0;
}
@media (max-width: 768px) {
.l-guide-play-grid {
flex-direction: column;
}
.l-play-item.is-large,
.l-play-sub-group {
width: 100%;
}
.l-play-item.is-row {
flex-direction: column-reverse;
}
.l-play-item.is-row .l-play-body,
.l-play-item.is-row .l-play-img {
width: 100%;
}
/* .l-play-item.is-row .l-play-img {
height: 200px;
} */
.l-guide-mascot-box {
padding: 40px 20px;
}
.l-mascot-list {
flex-wrap: wrap;
gap: 30px 15px;
}
.l-mascot-item {
flex: 0 0 calc(50% - 7.5px);
}
}
.l-guide-voices {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 30px;
}
.l-voice-card {
background-color: #f2f2f2;
padding: 40px 30px 30px;
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
box-sizing: border-box;
}
.l-voice-icon {
height: 140px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.l-voice-icon img {
max-height: 100%;
width: auto;
object-fit: contain;
}
.l-voice-label {
display: inline-block;
background-color: #f8d7da;
color: #B50606;
font-size: 13px;
font-weight: bold;
padding: 6px 30px;
margin: 0 auto 30px;
}
.l-voice-title {
font-size: 18px;
font-weight: bold;
color: #000;
margin-bottom: 20px;
line-height: 1.4;
}
.l-voice-text {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
font-weight: bold;
text-align: left;
flex-grow: 1;
margin: 0 0 20px 0;
}
.l-voice-attr {
text-align: right;
color: #888;
font-size: 12px;
font-weight: bold;
margin: 0;
}
@media (max-width: 768px) {
.l-guide-voices {
flex-direction: column;
gap: 30px;
}
.l-voice-card {
padding: 30px 20px;
}
}
.l-guide-manners {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.l-manner-item {
flex: 1;
padding: 0 20px;
border-right: 1px solid #000;
display: flex;
flex-direction: column;
text-align: center;
}
.l-manner-item:first-child {
padding-left: 0;
}
.l-manner-item:last-child {
padding-right: 0;
border-right: none;
}
.l-manner-icon {
height: 120px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.l-manner-icon img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.l-manner-head {
background-color: #B50606;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 8px 10px;
margin-bottom: 20px;
}
.l-manner-text {
font-size: 16px;
line-height: 1.8;
color: #1a1a1a;
font-weight: bold;
text-align: left;
margin: 0;
}
@media (max-width: 992px) {
.l-guide-manners {
flex-wrap: wrap;
gap: 40px 0;
}
.l-manner-icon {
height: 180px;
}
.l-manner-item {
flex: 0 0 50%;
padding: 0 20px !important;
}
.l-manner-item:nth-child(even) {
border-right: none;
}
.l-guide-manners {
display: block;
}
.l-manner-item {
border-right: 0px solid #000;
}
}
@media (max-width: 768px) {
.l-manner-item {
flex: 0 0 100%;
padding: 0 0 40px 0 !important;
border-right: none !important;
}
.l-manner-item:last-child {
padding-bottom: 0 !important;
border-bottom: none;
}
}