@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.en{ font-family: "Roboto", sans-serif; font-weight: 900;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
.btn-shop a{ background: #0071be; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; position: relative; cursor: pointer; border-radius: 40px;}
.btn-shop a::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
.btn-official a{ background: #e60214; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; position: relative; cursor: pointer; border-radius: 40px;}
.btn-official a::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
#main{ background: #000;}
#main .mv{ position: relative;}
#main .mv header{ width: 100%; display: flex; align-items: center; position: absolute; top: 0px; left: 0px; z-index: 1;}
#main .mv header .logo-GDO{ margin-right: auto;}
#main .mv header .logo-Bridgestone{ position: relative;}
#main .mv p{ font-weight: 700; line-height: 1.8; color: #fff;}
#main .box .movie-box .tit-box{ text-align: center;}
#main .box .movie-box .tit-box p{ font-weight: 100; line-height: 1.0; color: #fff; letter-spacing: -0.04em;}
#main .box .movie-box .tit-box p strong{ font-weight: 900;}
#main .box .movie-box .tit-box h2{ font-weight: 900; line-height: 1.2; color: #e60214; letter-spacing: -0.04em;}
#main .box .movie-box .movie{ position: relative; width: 100%; padding-top: 56.25%;}
#main .box .movie-box .movie video,
#main .box .movie-box .movie iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
#main .box .profile-list li{ background: #101010;}
#main .box .profile-list li p{ line-height: 1.8; color: #fff;}
.bg-black01{ background: #101010 url(../img/bg-black01.jpg) left top repeat;}
.bg-black02{ background: #000000 url(../img/bg-black02.jpg) left top repeat;}
.bg-white{ background: #ffffff url(../img/bg-white.jpg) left top repeat;}
.bg-gray{ background: #f5f5f5 url(../img/bg-gray.jpg) left top repeat;}
section .tit-box .h2-box p{ font-weight: 900; line-height: 1.0; color: #fff;}
section .tit-box .h2-box h2{ font-weight: 900; color: #e60214; letter-spacing: -0.04em;}
section .tit-box .h2-box h2 span{ font-weight: 100;}
section .tit-box .h3-box h3{ font-weight: 900; color: #fff;}
section .detail-box .row .img{ box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);}
section .detail-box .row p{ color: #fff; line-height: 1.8;}
section .detail-box .row p strong{ font-weight: 700;}
#sec02 .tit-box .h2-box p{ color: #000;}
#sec02 .box01 .bg-box p,
#sec02 .box02 .bg-box p{ background: #000; border-left: 1px solid #e60214; line-height: 1.8; color: #fff;}
#sec02 .detail-box .row p{ color: #000;}
#sec03 .box01 .detail-box p{ line-height: 1.8; color: #fff;}
#sec03 .box01 .detail-box p strong{ font-weight: 700;}
#sec03 .box01 .detail-box p:last-of-type{ margin-bottom: 0;}
#sec03 .box02 .lineup-list{ display: flex; align-items: center;}
#sec03 .box02 .lineup-list li a{ background: #101010; color: #fff; line-height: 1.0; text-decoration: none; display: block;}
#sec03 .box02 .lineup-list li a .name{ position: relative;}
#sec03 .box02 .lineup-list li a .name::after{
    content: "\f105";
    font-family: FontAwesome;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
#sec03 .box02 .lineup-list li a .name h3{ font-weight: 700;}
#sec03 .box02 .sponsor{ text-align: center; color: #fff;}
#sec03 .box02 .sponsor a{ color: #fff;}
#page-top{ position: fixed; z-index: 90; display: none;}
#page-top a{ display: block;}
footer{ background: #fff; color: #000; text-align: center;}
footer a{ color: #000;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
#contents{ min-width: 1046px; overflow: hidden;}
a:hover,a:hover img{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
.btn-shop{ width: 520px; margin: 0 auto;}
.btn-shop a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 20px; padding: 25px 0;}
.btn-shop a::after{ font-size: 20px; right: 15px;}
.btn-shop a:hover{ box-shadow: none; transition: .4s;}
.btn-official{ width: 520px; margin: 0 auto;}
.btn-official a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 20px; padding: 25px 0;}
.btn-official a::after{ font-size: 20px; right: 15px;}
.btn-official a:hover{ box-shadow: none; transition: .4s;}
.inner{ width: 1046px; margin: 0 auto; position: relative}
#main .mv header{ padding: 25px 0 0;}
#main .mv{ background: #000 url(../img/mv-bg_pc.jpg) center top no-repeat;}
#main .mv .inner{ height: 820px;}
#main .mv h1{ position: absolute; left: 398px; top: 333px;}
#main .mv p{ font-size: 22px; position: absolute; bottom: 0;}
#main .box{ background: #000 url(../img/mv-box-bg_pc.jpg) center top no-repeat; padding: 70px 0 100px;}
#main .box .movie-box{ margin-bottom: 80px;}
#main .box .movie-box .tit-box{ margin-bottom: 40px;}
#main .box .movie-box .tit-box p{ font-size: 28px; margin-bottom: 15px;}
#main .box .movie-box .tit-box h2{ font-size: 50px;}
#main .box .profile-list{ display: flex; align-items: center; margin-bottom: 60px;}
#main .box .profile-list li{ width: 490px;}
#main .box .profile-list li:first-of-type{ margin-right: auto;}
#main .box .profile-list li p{ font-size: 16px; padding: 15px 20px;}
section{ border-top: 10px solid #e60214;}
section .tit-box{ margin-bottom: 40px;}
section .tit-box .h2-box{ border-left: 2px solid #e60214; padding: 80px 0 15px 18px;}
section .tit-box .h2-box p{ font-size: 24px; margin-bottom: 12px;}
section .tit-box .h2-box h2{ font-size: 50px; line-height: 1.3;}
section .tit-box .h3-box{ border-left: 2px solid #fff; padding: 80px 0 15px 18px;}
section .tit-box .h2-box + .h3-box{ padding-top: 10px;}
section .tit-box .h3-box h3{ font-size: 38px; line-height: 1.3;}
section .detail-box{ padding-bottom: 100px;}
section .detail-box .row{ display: flex; align-items: center; margin-bottom: 40px;}
section .detail-box .row:nth-of-type(odd){ flex-direction: row-reverse;}
section .detail-box .row .img{ margin: 0 auto 0 -176px;}
section .detail-box .row:nth-of-type(odd) .img{ margin: 0 -176px 0 auto;}
section .detail-box .row p{ font-size: 18px; width: 490px;}
section .detail-box .row + .btn-shop{ margin-top: 60px;}
#sec02 .box01 .tit-box .h2-box{ background: url(../img/sec02-box01-ico.png) left 18px top 85px no-repeat; padding-left: 118px;}
#sec02 .box02 .tit-box .h2-box{ background: url(../img/sec02-box02-ico.png) left 18px top 85px no-repeat; padding-left: 118px;}
#sec02 .box01 .tit-box .h2-box h2,
#sec02 .box02 .tit-box .h2-box h2{ text-indent: -30px;}
#sec02 .box01 .bg-box,
#sec02 .box02 .bg-box{ margin-bottom: 60px;}
#sec02 .box01 .bg-box{ background: #242d2a url(../img/sec02-box01-bg_pc.jpg) center center no-repeat;}
#sec02 .box02 .bg-box{ background: #9ebbd9 url(../img/sec02-box02-bg_pc.jpg) center center no-repeat;}
#sec02 .box01 .bg-box .inner,
#sec02 .box02 .bg-box .inner{ height: 500px;}
#sec02 .box01 .bg-box p,
#sec02 .box02 .bg-box p{ font-size: 18px; position: absolute; top: 50%; transform: translateY(-50%); width: 524px; padding: 25px 30px;}
#sec02 .box01 .bg-box p{ right: 0;}
#sec02 .box02 .detail-box .row{ flex-direction: row-reverse;}
#sec02 .box02 .detail-box .row .img{ margin: 0 -176px 0 auto;}
#sec02 .box02 .detail-box .row:nth-of-type(odd){ flex-direction: row;}
#sec02 .box02 .detail-box .row:nth-of-type(odd) .img{ margin: 0 auto 0 -176px;}
#sec03 .box01 .bg-box{ background: #000 url(../img/sec03-box01-bg_pc.jpg?250828-2) center center no-repeat; height: 500px; margin-bottom: 55px;}
#sec03 .box01 .detail-box p{ font-size: 18px; margin-bottom: 15px;}
#sec03 .box02 .lineup-list{ margin-bottom: 40px;}
#sec03 .box02 .lineup-list li{ margin-right: 22px;}
#sec03 .box02 .lineup-list li:nth-of-type(3n){ margin-right: 0;}
#sec03 .box02 .lineup-list li a .name{ border-left: 2px solid #e60214; padding: 18px 20px;}
#sec03 .box02 .lineup-list li a .name::after{ font-size: 18px; right: 10px;}
#sec03 .box02 .lineup-list li a .name h3{ font-size: 18px; margin-bottom: 10px;}
#sec03 .box02 .lineup-list li a .name p{ font-size: 14px;}
#sec03 .box02 .btn-list{ display: flex; align-items: center; margin-top: 60px;}
#sec03 .box02 .btn-list li{ width: 510px; margin: 0;}
#sec03 .box02 .btn-list li:first-of-type{ margin-right: auto;}
#sec03 .box02 .sponsor{ font-size: 16px; margin-top: 60px;}
#page-top{ right: 20px; bottom: 20px;}
footer{ padding: 60px 0;}
footer .cp{ margin-top: 20px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
.btn-shop a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 16px; padding: 18px 0;}
.btn-shop a::after{ font-size: 16px; right: 10px;}
.btn-official a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 16px; padding: 18px 0;}
.btn-official a::after{ font-size: 16px; right: 10px;}
.inner{ position: relative}
#main .mv header{ padding: 12px 20px 0;}
#main .mv header .logo-GDO{ width: 73px;}
#main .mv header .logo-Bridgestone{ width: 100px;}
#main .mv{ margin-bottom: 40px;}
#main .mv p{ font-size: 19px; padding: 0 20px;}
#main .box{ background: #000 url(../img/mv-box-bg_sp.jpg) center top 10px no-repeat; background-size: 100%; padding: 0 0 50px;}
#main .box .inner{ padding: 0 20px;}
#main .box .movie-box{ margin-bottom: 40px;}
#main .box .movie-box .tit-box{ margin-bottom: 18px;}
#main .box .movie-box .tit-box p{ font-size: 18px; margin-bottom: 10px;}
#main .box .movie-box .tit-box h2{ font-size: 32px;}
#main .box .profile-list{ margin-bottom: 30px;}
#main .box .profile-list li:first-of-type{ margin-bottom: 20px;}
#main .box .profile-list li p{ font-size: 15px; padding: 10px 15px;}
.bg-black01,
.bg-black02,
.bg-white,
.bg-gray{ background-size: 30px;}
section{ border-top: 7px solid #e60214;}
section .tit-box{ margin-bottom: 20px;}
section .tit-box .inner{ padding: 0 20px;}
section .tit-box .h2-box{ border-left: 1px solid #e60214; padding: 40px 0 5px 10px;}
section .tit-box .h2-box p{ font-size: 16px; margin-bottom: 8px;}
section .tit-box .h2-box h2{ font-size: 32px; line-height: 1.2;}
section .tit-box .h3-box{ border-left: 1px solid #fff; padding: 40px 0 5px 10px;}
section .tit-box .h2-box + .h3-box{ padding-top: 5px;}
section .tit-box .h3-box h3{ font-size: 24px; line-height: 1.2;}
section .detail-box{ padding-bottom: 50px;}
section .detail-box .inner{ padding: 0 20px;}
section .detail-box .row{ margin-bottom: 30px;}
section .detail-box .row .img{ margin: 0 -20px 15px 0;}
section .detail-box .row:nth-of-type(even) .img{ margin: 0 0 15px -20px;}
section .detail-box .row p{ font-size: 17px;}
section .detail-box .row + .btn-shop{ margin-top: 30px;}
#sec02 .box01 .tit-box .h2-box p{ background: url(../img/sec02-box01-ico.png) left center no-repeat; background-size: 40px; padding: 12px 0 12px 46px; margin-bottom: 5px;}
#sec02 .box02 .tit-box .h2-box p{ background: url(../img/sec02-box02-ico.png) left center no-repeat; background-size: 40px; padding: 12px 0 12px 46px; margin-bottom: 5px;}
#sec02 .box01 .tit-box .h2-box h2,
#sec02 .box02 .tit-box .h2-box h2{ text-indent: -30px; padding-left: 10px;}
#sec02 .box01 .bg-box,
#sec02 .box02 .bg-box{ margin-bottom: 30px;}
#sec02 .box01 .bg-box{ background: #a3a762 url(../img/sec02-box01-bg_sp.jpg) center top no-repeat; background-size: 100%; padding: 250px 20px 30px;}
#sec02 .box02 .bg-box{ background: #9db9dd url(../img/sec02-box02-bg_sp.jpg) center top no-repeat; background-size: 100%; padding: 250px 20px 30px;}
#sec02 .box01 .bg-box p,
#sec02 .box02 .bg-box p{ font-size: 17px; padding: 15px;}
#sec03 .box01 .bg-box{ margin-bottom: 25px;}
#sec03 .box01 .detail-box p{ font-size: 18px; margin-bottom: 10px;}
#sec03 .box02 .lineup-list{ flex-wrap: wrap;}
#sec03 .box02 .lineup-list li{ width: 48%; margin: 0 auto 20px 0;}
#sec03 .box02 .lineup-list li:nth-of-type(2n){ margin-right: 0;}
#sec03 .box02 .lineup-list li a .name{ border-left: 1px solid #e60214; padding: 12px 10px;}
#sec03 .box02 .lineup-list li a .name::after{ font-size: 14px; right: 5px;}
#sec03 .box02 .lineup-list li a .name h3{ font-size: 14px; line-height: 1.2; margin-bottom: 8px;}
#sec03 .box02 .lineup-list li a .name p{ font-size: 10px;line-height: 1.2;}
#sec03 .box02 .btn-list{ margin-top: 10px;}
#sec03 .box02 .btn-list li:first-of-type{ margin-bottom: 20px;}
#sec03 .box02 .sponsor{ font-size: 14px; margin-top: 30px;}
#page-top{ right: 10px; bottom: 20px; width: 12%;}
footer{ font-size: 10px; padding: 30px 0;}
footer .cp{ margin-top: 10px;}
}