@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: "zen-kaku-gothic-new", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 400;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}
.en{ font-family: "Rubik", sans-serif; font-weight: 600; font-style: normal;}

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
.inner{ position: relative;}
#mv{ position: relative;}
#mv .logo-gdo{ position: absolute; z-index: 10;}
#mv .logo-dunlop{ position: absolute; z-index: 10;}
#art01 .read{ text-align: center;}
#art01 .read p{ font-weight: 900; line-height: 1.3;}
#art01 .read p:nth-of-type(1) strong{ color: #DA291C;}
#art01 .campaign-list li{ position: relative;}
#art01 .campaign-list li:last-child p{ font-weight: 400; line-height: 1.4; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}
#art01 .campaign-list li:last-child p a{ font-weight: 900; text-decoration: underline; color: #00ACFF;}
#art01 .campaign-list li .btn{ position: absolute; left: 50%; transform: translateX(-50%);}
#art01 .campaign-tb h2{ background: #000; font-weight: 900; color: #fff;}
#art01 .campaign-tb table{ width: 100%;}
#art01 .campaign-tb table th,
#art01 .campaign-tb table td{ line-height: 1.6; border: 1px solid #bbb; vertical-align: middle;}
#art01 .campaign-tb table th{ background: #eee; text-align: left;}
#art01 .campaign-tb table td{ background: #fff;}
#art01 .campaign-tb table td strong{ font-weight: 900; color: #DA291C;}
#art01 .campaign-tb table td a{ color: #00ACFF; text-decoration: underline;}

#art02{ background: #DA291C;}
#art02 .read .left h2{ font-weight: 600; color: #fff;}
#art02 .read .left p{ font-weight: 900; color: #fff;}
#art02 .read .right p{ font-weight: 900; line-height: 1.44; color: #fff;}
footer{ background: #000; color: #fff; text-align: center;}
footer a{ color: #fff;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
#contents{ min-width: 1174px; overflow: hidden;}
a:hover{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
.inner{ width: 1174px; margin: 0 auto;}

#mv{ background: url(../img/mv-bg_pc.jpg) center top no-repeat; background-size: cover; height: 710px;}
#mv .logo-gdo{ top: 23px; left: 24px; width: 91px;}
#mv .logo-gdo img{ width: 100%;}
#mv .logo-dunlop{ top: 16px; right: 24px; width: 171px;}
#mv .logo-dunlop img{ width: 100%;}
#mv .bg{ position: absolute; top: 0; left: 0; width: 100%;}
#mv .bg .inner{ height: 710px;}
#mv .bg .inner::after{ content: ""; background: url(../img/mv-object_pc.png) top center no-repeat; width: 1548px; height: 603px; position: absolute; top: 0; left: -198px;}
#mv .bg .inner h1{ position: absolute; top: 77px; left: -132px; z-index: 1;}

#art01{ background: #fafafa url(../img/art01-bg_pc.jpg) center top no-repeat; background-size: cover; padding: 95px 0 115px;}
#art01 .read{ margin-bottom: 60px;}
#art01 .read p:nth-of-type(1){ font-size: 36px; margin-bottom: 40px;}
#art01 .read p:nth-of-type(1) strong{ font-size: 40px;}
#art01 .read p:nth-of-type(1) span{ font-size: 28px;}
#art01 .read p:nth-of-type(2){ font-size: 28px; margin-bottom: 40px;}
#art01 .read p:nth-of-type(2) strong{ font-size: 38px;}
#art01 .read p:nth-of-type(2) span{ font-size: 20px;}
#art01 .read p:nth-of-type(3){ font-size: 28px;}
#art01 .campaign-list{ display: flex; margin-bottom: 40px;}
#art01 .campaign-list li:first-child{ margin-right: auto;}
#art01 .campaign-list li:last-child p{ font-size: 20px; bottom: 125px;}
#art01 .campaign-list li:last-child p a:hover{ text-decoration: none;}
#art01 .campaign-list li .btn{ bottom: 50px;}
#art01 .campaign-tb h2{ font-size: 18px; padding: 15px;}
#art01 .campaign-tb table th,
#art01 .campaign-tb table td{ font-size: 15px; padding: 15px;}
#art01 .campaign-tb table th{ width: 180px;}

#art02{ padding: 110px 0 95px;}
#art02 .read{ display: flex; align-items: center; margin-bottom: 60px;}
#art02 .read .left{ margin-right: 165px;}
#art02 .read .left h2{ font-size: 80px; margin-bottom: 10px;}
#art02 .read .left p{ font-size: 40px;}
#art02 .read .right p{ font-size: 18px;}
#art02 .info-list{ display: flex;}
#art02 .info-list li:first-child{ margin-right: auto;}

#art03{ background: #232323 url(../img/art03-bg_pc.jpg) center top no-repeat; background-size: cover;}
#art03 .inner{ height: 450px;}
#art03 .inner::after{ content: ""; background: url(../img/art03-object_pc.png) top center no-repeat; width: 1362px; height: 438px; position: absolute; top: 6px; left: -124px;}
#art03 p{ position: absolute; top: 84px; left: 247px;}

footer{ padding: 20px 0 25px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}

#mv .logo-gdo{ top: 14px; left: 17px; width: 80px;}
#mv .logo-dunlop{ top: 14px; right: 17px; width: 160px;}

#art01{ background: #f6f6f6 url(../img/art01-bg_sp.jpg) center top no-repeat; background-size: 100%; padding: 45px 0;}
#art01 .inner{ padding: 0 13px;}
#art01 .read{ margin-bottom: 40px;}
#art01 .read p:nth-of-type(1){ font-size: 20px; margin-bottom: 20px;}
#art01 .read p:nth-of-type(1) strong{ font-size: 24px;}
#art01 .read p:nth-of-type(1) span{ font-size: 14px;}
#art01 .read p:nth-of-type(2){ font-size: 14px; margin-bottom: 20px;}
#art01 .read p:nth-of-type(2) strong{ font-size: 22px;}
#art01 .read p:nth-of-type(2) span{ font-size: 12px;}
#art01 .read p:nth-of-type(3){ font-size: 14px;}
#art01 .campaign-list{ margin-bottom: 20px;}
#art01 .campaign-list li:first-child{ margin-bottom: 28px;}
#art01 .campaign-list li:last-child p{ font-size:14px; bottom: 60px;}
#art01 .campaign-list li .btn{ width: 230px; bottom: 14px;}
#art01 .campaign-tb h2{ font-size: 15px; padding: 10px;}
#art01 .campaign-tb table th,
#art01 .campaign-tb table td{ font-size: 12px; padding: 10px;}
#art01 .campaign-tb table th{ width: 70px;}

#art02{ padding: 45px 0 48px;}
#art02 .inner{ padding: 0 13px;}
#art02 .read{ margin-bottom: 30px;}
#art02 .read .left{ margin-bottom: 20px;}
#art02 .read .left h2{ font-size: 54px; margin-bottom: 10px;}
#art02 .read .left p{ font-size: 24px;}
#art02 .read .right p{ font-size: 14px;}
#art02 .info-list li:first-child{ margin-bottom: 16px;}

#art03{ background: #232323;}

footer{ font-size: 10px; padding: 20px 0;}
}