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

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
.btn-blue a{ background: #0071be; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; cursor: pointer;}
.btn-blue a span{ display: inline-block; position: relative;}
.btn-blue a span::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
header{ background: #fff;}
header .inner{ display: flex; align-items: center;}
header .logo-GDO{ margin-right: auto;}
#main p{ color: #fff; line-height: 1.8;}
#main p a{ color: #fff;}
.bg-gray{ background: #111 url(../img/bg-gray.jpg) left top repeat;}
.bg-white{ background: #fff url(../img/bg-white.jpg) left top repeat;}
.info-text{ text-align: center;}
section .tit-box h2 span{ display: block; text-align: center;}
section .tit-box h2 span.tit{ font-weight: 700;}
section .tit-box p{ line-height: 1.8; text-align: center;}
#sec01 .tit-box h2 span.tit{ color: #fff;}
#sec01 .tit-box p{ color: #fff;}
#sec01 .product-list{ display: flex; flex-wrap: wrap;}
#sec01 .info-text{ line-height: 1.6; color: #fff;}
#sec01 .info-text a{ color: #fff;}
#sec02 .info-list li a{ color: #000; text-decoration: none;}
#sec02 .info-list li a .img{ margin-bottom: 10px;}
#sec02 .info-list li a .img img{ width: 100%;}
#sec02 .info-list li a p{ margin-bottom: 5px;}
#sec02 .info-list li a p span{ font-weight: 700; color: #a1101f; display: inline-block; margin-left: 10px;}
#sec02 .info-list li a h3{ line-height: 1.8;}
#sec02 .bnr{ text-align: center;}
#sec03 .movie-list li .movie{ margin-bottom: 10px;}
#sec03 .movie-list li .movie iframe{ aspect-ratio: 9 / 16; width: 100%; height: 100%;}
#sec03 .movie-list li p{ margin-bottom: 5px;}
#sec03 .movie-list li p span{ font-weight: 700; color: #a1101f; display: inline-block; margin-left: 10px;}
#sec03 .movie-list li h3{ line-height: 1.8;}
#sec03 .update-text{ text-align: center;}
#sec03 .update-text span{ font-weight: 700; color: #a1101f; border: 2px solid #a1101f; display: inline-block;}
#sec03 .info-text{ line-height: 1.6; color: #000;}
#sec03 .info-text a{ color: #000;}
#sec04{ background: #000;}
#sec04 .tit-box h2 span.tit{ color: #fff;}
#sec05 .tit-box h2 span.tit{ color: #fff;}
#sec05 .tit-box p{ color: #fff;}
#sec05 .product-box .box{ background: #333;}
#sec05 .product-box .box .stit-box{ text-align: center;}
#sec05 .product-box .box .stit-box h3{ font-weight: 700; color: #fff;}
#sec05 .product-box .box .stit-box p{ line-height: 1.8; color: #fff;}
#sec05 .product-box .box .product-list{ display: flex; flex-wrap: wrap;}
#sec05 .product-box .box .info-text{ line-height: 1.6; color: #fff;}
#sec05 .product-box .box .info-text a{ color: #fff;}
#page-top{ position: fixed; z-index: 90; display: none;}
#page-top a{ display: block;}
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: 1046px; overflow: hidden;}
a:hover{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
.btn-blue{ width: 520px; margin: 0 auto;}
.btn-blue a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 20px; border-radius: 41px; padding: 15px 0;}
.btn-blue a span::after{ font-size: 20px; right: -20px;}
.btn-blue a:hover{ box-shadow: none; transition: .4s;}
.inner{ width: 1046px; margin: 0 auto;}
header{ padding: 20px 0;}
header .logo-GDO{ margin-top: -4px;}
#main{ background: #000 url(../img/main-bg.jpg) center top no-repeat; padding: 415px 0 75px;}
#main h1{ text-align: center; margin-bottom: 35px;}
#main p{ font-size: 18px; text-align: center;}
section{ padding: 80px 0 100px;}
section .tit-box{ margin-bottom: 55px;}
section .tit-box h2 span.logo{ margin-bottom: 25px;}
section .tit-box h2 span.tit{ font-size: 32px;}
section .tit-box p{ font-size: 18px; margin-top: 35px;}
#sec01{ background-color: #111; background-image: url(../img/sec01-bg.png) , url(../img/bg-gray.jpg); background-repeat: no-repeat , repeat; background-position: center top , left top;}
#sec01 .product-list{ justify-content: center; margin: 0 -29px;}
#sec01 .product-list li{ width: 310px; margin: 0 29px 60px;}
#sec01 .product-list li img{ width: 100%;}
#sec01 .info-text{ font-size: 16px; margin-top: 40px;}
#sec02{ border-bottom: 1px solid #999; padding-bottom: 80px;}
#sec02 .info-list{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -9px 30px;}
#sec02 .info-list li{ width: 336px; margin: 0 9px 25px;}
#sec02 .info-list li a p{ font-size: 14px;}
#sec02 .info-list li a h3{ font-size: 16px;}
#sec03 .movie-list{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 60px;}
#sec03 .movie-list li{ width: 336px; margin: 0 9px;}
#sec03 .movie-list li img{ width: 100%;}
#sec03 .movie-list li p{ font-size: 14px;}
#sec03 .movie-list li h3{ font-size: 16px;}
#sec03 .info-text{ font-size: 16px; margin-top: 40px;}
#sec03 .update-text{ margin-top: 40px;}
#sec03 .update-text span{ font-size: 24px; width: 520px; padding: 18px 0;}
#sec05 .product-box{ display: flex; flex-wrap: wrap; margin-bottom: 40px;}
#sec05 .product-box .box{ padding: 30px 0; margin-bottom: 30px;}
#sec05 .product-box .box.no01{ width: 100%;}
#sec05 .product-box .box.no02{ width: 513px; margin-right: auto;}
#sec05 .product-box .box.no03{ width: 513px;}
#sec05 .product-box .box .stit-box{ margin-bottom: 25px;}
#sec05 .product-box .box .stit-box h3{ font-size: 28px;}
#sec05 .product-box .box .stit-box p{ font-size: 16px; margin-top: 15px;}
#sec05 .product-box .box .product-list{ justify-content: center; margin-bottom: 30px;}
#sec05 .product-box .box .product-list li{ width: 230px; margin: 0 7px;}
#sec05 .product-box .box .product-list li img{ width: 100%;}
#sec05 .product-box .box.no02 .btn-blue,
#sec05 .product-box .box.no03 .btn-blue{ width: 472px;}
#sec05 .info-text{ font-size: 16px; margin-top: 25px;}
#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-blue a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 17px; padding: 8px 0 10px; border-radius: 60px;}
.btn-blue a span::after{ font-size: 16px; right: -15px;}
header{ padding: 8px 20px 10px;}
header .logo-GDO{ width: 73px;}
header .logo-Callaway{ width: 62px;}
#main{ background: #000; padding-bottom: 50px;}
#main h1{ margin-bottom: 25px;}
#main p{ font-size: 17px; padding: 0 20px;}
section{ padding: 40px 0 50px;}
section .inner{ padding: 0 20px;}
section .tit-box{ margin-bottom: 30px;}
section .tit-box h2 span.logo{ margin: 0 auto 15px;}
section .tit-box h2 span.tit{ font-size: 20px;}
section .tit-box p{ font-size: 17px; margin-top: 20px;}
#sec01{ background-color: #111; background-image: url(../img/sec01-bg.png) , url(../img/bg-gray.jpg); background-repeat: no-repeat , repeat; background-position: center top , left top; background-size: 100% , 500px;}
#sec01 .tit-box h2 span.logo{ width: 288px;}
#sec01 .product-list{ margin-bottom: 20px;}
#sec01 .product-list li{ width: 48.5%; margin: 0 auto 10px 0;}
#sec01 .product-list li:nth-child(2n){ margin-right: 0;}
#sec01 .info-text{ font-size: 14px; margin-top: 20px;}
#sec02{ border-bottom: 1px solid #999; padding-bottom: 40px;}
#sec02 .tit-box h2 span.logo{ width: 288px;}
#sec02 .info-list li{ margin-bottom: 30px;}
#sec02 .info-list li a p{ font-size: 15px;}
#sec02 .info-list li a h3{ font-size: 17px;}
#sec03 .tit-box h2 span.logo{ width: 290px;}
#sec03 .movie-list li{ width: 100%; margin-bottom: 30px;}
#sec03 .movie-list li h3{ font-size: 17px;}
#sec03 .info-text{ font-size: 14px; margin-top: 20px;}
#sec03 .update-text{ margin-top: 30px;}
#sec03 .update-text span{ font-size: 17px; width: 100%; padding: 15px 0;}
#sec04 .tit-box h2 span.logo{ width: 289px;}
#sec04 .img{ margin: 0 -20px; overflow-x: auto;}
#sec04 .img img{ width: 700px; padding: 0 20px;}
#sec04 .img + p{ font-size: 15px; text-align: center; color: #fff; margin-top: 20px;}
#sec05 .product-box .box{ padding: 20px 15px; margin-bottom: 30px;}
#sec05 .product-box .box .stit-box{ margin-bottom: 15px;}
#sec05 .product-box .box .stit-box h3{ font-size: 22px;}
#sec05 .product-box .box .stit-box p{ font-size: 15px; margin-top: 10px;}
#sec05 .product-box .box .product-list{ margin-bottom: 10px;}
#sec05 .product-box .box .product-list li{ width: 48.5%; margin: 0 auto 10px 0;}
#sec05 .product-box .box .product-list li:nth-child(2n){ margin-right: 0;}
#sec05 .info-text{ font-size: 14px; margin-top: 15px;}

#page-top{ right: 10px; bottom: 20px; width: 12%;}
footer{ font-size: 10px; padding: 30px 0;}
footer .cp{ margin-top: 10px;}
}