@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
/* contents */
section .inner > h2{ font-weight: 600; color: #fff; line-height: 1.6; text-align: center;}
section .inner > h2 span{ display: block;}
#whatsnew,
#demodayinfo{ background: #222 url(/special/discover/nipponshaft/asset/img/bg-drid.jpg) top center repeat; position: relative;}
#movie{ background: #111;}
#whatsnew::before,
#demodayinfo::before{
    content: "";
    border-style: solid;
    border-width: 18px 11px 0 11px;
    border-color: #2c2c2c transparent transparent transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -12px;
}
#product{ position: relative;}
#product .bg{ position: absolute;  top: 0; left: 0; width: 100%; z-index: -1;}
#product .bg img{ width: 100%;}
#news{ background: #222 url(/special/discover/nipponshaft/asset/img/bg-paper.jpg) top center repeat;}
#cp{ position: relative;}
#cp .bg{ position: absolute;  top: 0; left: 0; width: 100%; z-index: -1;}
#cp .bg img{ width: 100%;}
.new-list .swiper-slide{ background: #000; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); border-radius: 6px; height: auto;}
#movie .new-list .swiper-slide{ background: #222;}
#sub-page .new-list .swiper-wrapper :nth-child(n+10){ display: none;}
.new-list .swiper-slide a{ color: #fff; text-decoration: none; display: block;}
.new-list .swiper-slide a .img{ border-radius: 6px 6px 0 0; overflow: hidden;}
.new-list .swiper-slide a .detail h3{ line-height: 1.8;}
.new-list .swiper-slide a .detail .data span{ display: inline-block; padding: 4px 6px; margin-right: 8px;}
.new-list .swiper-slide a .detail .data span.special{ background: #a68c44;}
.new-list .swiper-slide a .detail .data span.column{ background: #0071BE;}
.product-list .swiper-slide{ background: #222;box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); border-radius: 6px; height: auto;}
.product-list .swiper-slide a{ color: #fff; text-decoration: none; display: block;}
.product-list .swiper-slide a .img{ border-radius: 6px 6px 0 0; overflow: hidden;}
.product-list .swiper-slide a .detail{ height: 100%;}
.product-list .swiper-slide a .detail h3{ line-height: 1.8;}
.product-list .swiper-slide a .detail .price{ text-align: right;}
.swiper-slide-duplicate{ box-shadow: none !important;}
.swiper-button-next,.swiper-button-prev{ background: #009944; color: #fff;}
.swiper-pagination{ bottom: 0 !important;}
.swiper-pagination-bullet{ background: #444; opacity: 1;}
.swiper-pagination-bullet-active{ background: #009944;}
.news-list li a{ display: flex; align-items: center; color: #fff; text-decoration: none;}
.news-list li a .img img{ border-radius: 6px; border: 1px solid #ccc; width: 100%;}
.btn-arrow a{ background: #009944; font-weight: 700; color: #fff; text-align: center; text-decoration: none; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative;}
.btn-arrow a::after{ content: ""; border-top: 2px solid #fff; border-right: 2px solid #fff; width: 8px; height: 8px; transform: rotate(45deg); position: absolute; right: 30px; top: 50%; margin-top: -6px;}
.btn-open span{ background: #fff; font-weight: 700; color: #000; text-align: center; text-decoration: none; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative; cursor: pointer;}
.btn-open span::after{ content: ""; border-top: 2px solid #000; border-right: 2px solid #000; width: 8px; height: 8px; transform: rotate(135deg); position: absolute; right: 30px; top: 50%; margin-top: -6px;}
.btn-open.ac span::after{ transform: rotate(-45deg);}
.btn-blank a{ background: #009944; font-weight: 700; color: #fff; text-align: center; text-decoration: none; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative;}
.btn-blank a::before,
.btn-blank a::after{ content: ""; background: #009944; border: 1px solid #fff; width: 9px; height: 9px; position: absolute;}
.btn-blank a::before{ top: 5px; right: 32px;}
.btn-blank a::after{ top: 3px; right: 30px;}
/* #top-page */
#top-page #main{ position: relative;}
#top-page #main .box{ position: absolute; top: 0; left: 0; z-index: 10; width: 100%;}
#top-page #main .box .inner h1{ font-weight: 700; color: #fff; line-height: 1.2;}
#top-page #main .box .inner h1 span{
    color: transparent;
    background: #fff url(/special/discover/nipponshaft/asset/img/main-tit-bg.svg);
    background-position: left 0 top 70%;
    background-size: 128%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text; /* Google ChromeとSafariに対応するため */
}
#top-page #main .box .inner p{ font-weight: 400; color: #fff;}
/* #sub-page */
#sub-page.feature .new-list .swiper-wrapper{ display: flex; flex-wrap: wrap;}
#sub-page.demoday #main{ position: relative;}
#sub-page.demoday #main .bg{ position: absolute;  top: 0; left: 0; width: 100%; z-index: -1;}
#sub-page.demoday #main .box .inner h1{ font-weight: 700; color: #fff; line-height: 1.2; text-align: center;}
#sub-page.demoday #main .box .inner p{ font-weight: 400; color: #fff; text-align: center;}
#sub-page.demoday #demodayinfo .demoday-list li{ background: #000; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); border-radius: 6px; height: auto; position: relative;}
#sub-page.demoday #demodayinfo .demoday-list li.end a::before{ content: " "; background: rgba(0, 0, 0, 0.6); border-radius: 6px; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#sub-page.demoday #demodayinfo .demoday-list li.end a::after{ content: "終了しました"; background: #000; font-size: 24px; font-weight: 800; line-height: 1.2; display: block; border: 3px solid #9f0000; border-radius: 6px; padding: 10px 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg);}
#sub-page.demoday #demodayinfo .demoday-list li a{ color: #fff; text-decoration: none;}
#sub-page.demoday #demodayinfo .demoday-list li .img img{ border-radius: 6px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail{ text-align: left;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data{ display: flex;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data > span{ font-weight: 600; display: inline-block; padding: 5px 6px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data .no{ background: #9f0000; text-align: center;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data .day{ background: #009944;}
#sub-page.demoday #demodayinfo .demoday-list li .detail h2{ font-weight: 600;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .text{ line-height: 1.8;}
#sub-page.demoday #demoday-btn{ display: none;}

#shortmovie{ border-top: 1px solid #420000; position: relative; z-index: 10;}
#shortmovie .box01 .swiper-slide{ background: #222; height: auto;}
#shortmovie .box01 .swiper-slide .movie iframe{ 
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    display: block;
    margin: auto;
}
#shortmovie .box01 .swiper-slide .twitter-tweet{ margin: 0 !important;}
#shortmovie .box01 .swiper-slide .detail .data{ font-weight: 700; line-height: 1.3; color: #fff; text-align: center;}
#shortmovie .box01 .swiper-slide .detail .text{ line-height: 1.6; color: #fff;}
#shortmovie .box01 .swiper-slide .detail .btn a{ background: #000; font-weight: 700; line-height: 1.3; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50px; box-shadow: 0 0 8px rgba(255, 255, 255, 0.75);}
#shortmovie .box01 .swiper-slide.coming-soon .detail .btn a{ background: #ccc; pointer-events: none; box-shadow: none;}


/* ==== PC ===== */
@media screen and (min-width: 768px){
/* contents */
section{ padding: 55px 0 80px;}
section .inner{ width: 1080px; margin: 0 auto; position: relative;}
section .inner > h2{ font-size: 40px; margin-bottom: 35px;}
section .inner > h2 span{ font-size: 18px;}
.new-list .swiper-slide:hover{ box-shadow: none; opacity: 0.8;}
.new-list .swiper-slide a .img{ width: 340px; height: 210px;}
.new-list .swiper-slide a .img img{ width: 100%; margin-top: -8px;}
#movie .new-list .swiper-slide a .img{ width: 340px; height: 190px;}
#movie .new-list .swiper-slide a .img img{ width: 100%; margin-top: 0px;}
.new-list .swiper-slide a .detail{ padding: 15px 20px 20px;}
.new-list .swiper-slide a .detail .data{ font-size: 14px; margin-top: 10px;}
.product-list .swiper-slide:hover{ box-shadow: none; opacity: 0.8;}
.product-list .swiper-slide a .img{ width: 340px; height: 210px;}
.product-list .swiper-slide a .img img{ width: 100%; margin-top: -18%;}
.product-list .swiper-slide a .detail{ padding: 15px 20px 20px;}
.product-list .swiper-slide a .detail .price{ font-size: 14px; margin-top: 10px;}
.product-list .swiper-slide a .detail .price span{ font-size: 12px;}
.swiper.slider02{ padding: 0 26px 26px; margin: 0 -26px;}
.swiper-button-next,.swiper-button-prev{ width: 60px; height: 60px; border-radius: 30px; margin-top: -20px;}
#movie .swiper-button-next,#movie .swiper-button-prev{ margin-top: -15px;}
.swiper-button-next:after,.swiper-button-prev:after{ font-size: 28px;}
.swiper-button-next{ right: 0;}
.swiper-button-prev{ left: 0;}
.swiper-pagination-bullet{ width: 60px; height: 6px; border-radius: 3px;}
.news-list{ display: flex; flex-wrap: wrap;}
.news-list li{ width: 530px; margin-bottom: 20px;}
.news-list li:nth-of-type(odd){ margin-right: auto;}
.news-list li a .img{ width: 100px; margin-right: 20px;}
.news-list li a .detail{ line-height: 1.8; width: 410px;}
.news-list li a .detail .data{ font-size: 14px;}
#cp{ padding: 60px 0;}
#cp .inner{ width: 1080px; margin: 0 auto;}
.btn-arrow{ width: 400px; margin: 40px auto 0;}
.btn-arrow a{ font-size: 22px; padding: 20px 0 24px; border-radius: 35px;}
#movie .btn-arrow a{ font-size: 18px; line-height: 1.3; padding: 15px 0 19px; border-radius: 45px;}
.btn-arrow a:hover{ box-shadow: none;}
.btn-open{ width: 400px; margin: 40px auto 0;}
.btn-open span{ font-size: 22px; padding: 20px 0 24px; border-radius: 35px; transition: .4s;}
.btn-open span:hover{ opacity: 0.8; box-shadow: none;}
.btn-blank{ width: 520px; margin: 40px auto 0;}
.btn-blank a{ font-size: 22px; padding: 20px 0 24px; border-radius: 35px;}
.btn-blank a::before{ top: 25px;}
.btn-blank a::after{ top: 23px;}
.btn-blank a:hover{ box-shadow: none;}
#news .btn{ margin-top: 20px;}
/* #top-page */
#top-page #main .box .inner{ width: 1080px; margin: 0 auto; padding-top: 16%;}
#top-page #main .box .inner h1{ font-size: 66px; margin-bottom: 2.4%;}
#top-page #main .box .inner p{ font-size: 18px; line-height: 2.4;}
#top-page #main .swiper img{ width: 100%;}
/* #sub-page */
#sub-page.feature .new-list .swiper-wrapper .swiper-slide{ width: 340px; margin: 0 30px 30px 0;}
#sub-page.feature .new-list .swiper-wrapper .swiper-slide:nth-of-type(3n){ margin-right: 0;}
#sub-page.feature #whatsnew .btn{ margin-top: 10px;}
#sub-page.demoday #main .box .inner{ width: 1080px; margin: 0 auto; padding: 60px 0;}
#sub-page.demoday #main .box .inner h1{ font-size: 40px; margin-bottom: 2.4%;}
#sub-page.demoday #main .box .inner p{ line-height: 2.4;}
#sub-page.demoday #main .bg img{ width: 100%;}
#sub-page.demoday #demodayinfo .demoday-list li{ margin-bottom: 40px;}
#sub-page.demoday #demodayinfo .demoday-list li:hover{ box-shadow: none;}
#sub-page.demoday #demodayinfo .demoday-list li:last-of-type{ margin-bottom: 0;}
#sub-page.demoday #demodayinfo .demoday-list li a{ display: flex; align-items: center; padding: 10px;}
#sub-page.demoday #demodayinfo .demoday-list li .img{ width: 36%;}
#sub-page.demoday #demodayinfo .demoday-list li .img img{ width: 100%;}
#sub-page.demoday #demodayinfo .demoday-list li .detail{ width: 64%; padding: 10px 20px 10px 2%;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data{ font-size: 18px; margin-bottom: 15px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data .ssize{ font-size: 14px; line-height: 1.2;}
#sub-page.demoday #demodayinfo .demoday-list li .detail h2{ font-size: 30px; margin-bottom: 15px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail h2 span{ font-size: 20px;}

#shortmovie{ background: url(/special/discover/nipponshaft/img/pga2025/sec01-bg.jpg) left top repeat-x;}
#shortmovie .box01 .swiper-slide .detail{ padding: 15px 20px 25px;}
#shortmovie .box01 .swiper-slide .movie img{ width: 100%;}
#shortmovie .box01 .swiper-slide .detail .data{ font-size: 18px; margin-bottom: 10px;}
#shortmovie .box01 .swiper-slide .detail .text{ font-size: 15px; text-align: center; margin-bottom: 15px;}
#shortmovie .box01 .swiper-slide .detail .btn a{ font-size: 16px; padding: 4px 0;}
#shortmovie .box01 .swiper-slide .detail .btn a:hover{ box-shadow: none;}

}

/* ==== PCとSPの中間 ===== */
@media screen and (max-width: 1080px){
    /* #top-page */
    #top-page #main .box .inner h1{ font-size: 6vw;}
    #top-page #main .box .inner p{ font-size: 1.4vw;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
/* contents */
section{ padding: 30px 0 60px;}
section .inner{ position: relative;}
section .inner > h2{ font-size: 32px; margin-bottom: 25px;}
section .inner > h2 span{ font-size: 12px;}
#news .inner{ padding: 0 20px;}
.new-list .swiper-slide a .img img{ width: 100%;}
.new-list .swiper-slide a .detail{ padding: 15px 20px 20px;}
.new-list .swiper-slide a .detail .data{ font-size: 12px; margin-top: 10px;}
.product-list .swiper-slide a .img{ height: 210px;}
.product-list .swiper-slide a .img img{ width: 100%; margin-top: -10%;}
.product-list .swiper-slide a .detail{ padding: 15px 20px 20px;}
.product-list .swiper-slide a .detail .price{ font-size: 12px; margin-top: 10px;}
.product-list .swiper-slide a .detail .price span{ font-size: 10px;}
.swiper.slider02{ padding-bottom: 26px;}
.swiper-button-next,.swiper-button-prev{ width: 40px; height: 40px; border-radius: 20px; margin-top: -15px;}
.swiper-button-next:after,.swiper-button-prev:after{ font-size: 20px;}
.swiper-button-next{ right: 30px;}
.swiper-button-prev{ left: 30px;}
.news-list li{ margin-bottom: 20px;}
.news-list li:last-of-type{ margin-bottom: 0;}
.news-list li a .img{ width: 22%; margin-right: auto;}
.news-list li a .detail{ line-height: 1.6; width: 74%;}
.news-list li a .detail .data{ font-size: 12px;}
#cp{ padding: 30px 0;}
#cp .inner{ padding: 0 20px;}
.btn-arrow{ padding: 0 20px; margin-top: 30px;}
.btn-arrow a{ font-size: 18px; padding: 16px 0 22px; border-radius: 35px;}
#movie .btn-arrow a{ font-size: 16px; line-height: 1.3; padding: 10px 0 16px; border-radius: 45px;}
.btn-open{ padding: 0 20px; margin-top: 30px;}
.btn-open span{ font-size: 18px; padding: 16px 0 22px; border-radius: 35px;}
.btn-blank{ margin-top: 30px;}
.btn-blank a{ font-size: 18px; line-height: 1.4; padding: 12px 0 14px; border-radius: 60px;}
.btn-blank a::before{ top: 32px;}
.btn-blank a::after{ top: 30px;}
/* #top-page */
#top-page #main .box .inner{ padding-top: 26%;}
#top-page #main .box .inner h1{ font-size: 8.4vw; text-align: center; margin-bottom: 4%;}
#top-page #main .box .inner p{ font-size: 3.2vw; text-align: center; line-height: 2.0;}
#top-page #main .swiper img{ width: 100%;}
/* #sub-page */
#sub-page.feature #whatsnew .inner{ padding: 0 20px;}
#sub-page.feature .new-list .swiper-wrapper .swiper-slide{ margin-bottom: 30px;}
#sub-page.feature .new-list .swiper-wrapper .swiper-slide:last-of-type{ margin-bottom: 0;}
#sub-page.feature #whatsnew .btn{ padding: 0;}
#sub-page.demoday #main .box .inner{ padding: 30px 0;}
#sub-page.demoday #main .box .inner h1{ font-size: 8.4vw; text-align: center; margin-bottom: 4%;}
#sub-page.demoday #main .box .inner p{ font-size: 3.2vw; text-align: center; line-height: 2.0;}
#sub-page.demoday #main .bg img{ width: 100%;}
#sub-page.demoday #demodayinfo .inner{ padding: 0 20px;}
#sub-page.demoday #demodayinfo .demoday-list li{ margin-bottom: 30px;}
#sub-page.demoday #demodayinfo .demoday-list li:last-of-type{ margin-bottom: 0;}
#sub-page.demoday #demodayinfo .demoday-list li a{ display: block; padding: 10px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail{ padding: 10px 0 0;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data{ font-size: 16px; margin-bottom: 10px; display: table; width: 100%;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data > span{ line-height: 1.4; display: table-cell; vertical-align: middle;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data > span.no{ width: 65px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .data .ssize{ font-size: 12px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail h2{ font-size: 24px; line-height: 1.4; padding: 0 10px; margin-bottom: 10px;}
#sub-page.demoday #demodayinfo .demoday-list li .detail h2 span{ font-size: 14px; display: block;}
#sub-page.demoday #demodayinfo .demoday-list li .detail .text{ padding: 0 10px 10px;}
#sub-page.demoday #page-top a{ border-radius: 6px 0 0 0;}
#sub-page.demoday footer .copyright{ padding-bottom: 15px;}

#shortmovie{ background: url(/special/discover/nipponshaft/img/pga2025/sec01-bg.jpg) left top repeat-x; background-size: 10px 100px;}
#shortmovie .box01 .swiper-button-next{ right: 15px;}
#shortmovie .box01 .swiper-button-prev{ left: 15px;}
#shortmovie .box01 .swiper-pagination{ position: static; margin-top: 10px;}
#shortmovie .box01 .swiper-slide .detail{ padding: 10px 20px 20px;}
#shortmovie .box01 .swiper-slide .detail .data{ font-size: 17px; margin-bottom: 5px;}
#shortmovie .box01 .swiper-slide .detail .text{ font-size: 14px; margin-bottom: 15px;}
#shortmovie .box01 .swiper-slide .detail .btn a{ font-size: 15px; padding: 8px 0;}

}