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

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
#contents{ overflow: hidden;}
header{ background: #fff;}
header .logo-pioneer{ float: left;}
header .logo-gdo{ float: right;}
#main .mv .tit-box p{ font-weight: 700; text-shadow: 0 0 4px #fff , 0 0 4px #fff ,0 0 8px #fff ,0 0 8px #fff ;}
#main .detail .text-box{ position: relative; z-index: 10;}
#main .detail .text-box p.notes{ text-align: right; margin-bottom: 0;}
#sec01 nav .tit-box{ text-align: center;}
#sec01 nav .tit-box h2{ font-weight: 700; letter-spacing: 0.2em;}
#sec01 nav ol{ display: flex; flex-wrap: wrap;}
#sec01 nav ol li{ margin-right: auto;}
#sec01 #no01.scene-box{ background: #eff6f6;}
#sec01 #no02.scene-box{ background: #f2f8f2;}
#sec01 #no03.scene-box{ background: #f9f6ee;}
#sec01 #no04.scene-box{ background: #f5f0f0;}
#sec01 .scene-box .tit-box .en{ display: flex; align-items: center;}
#sec01 .scene-box .tit-box .en span{ 
    background: rgba(220,156,199,1);
    background: linear-gradient(90deg, rgba(122,199,136,1) 0%, rgba(153,196,108,1) 25%, rgba(232,156,150,1) 75%, rgba(220,156,199,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#sec01 .scene-box .tit-box .en::before,
#sec01 .scene-box .tit-box .en::after{ content: ''; flex-grow: 1; height: 1px;}
#sec01 .scene-box .tit-box .en::before{ background: rgba(220,156,199,1); background: linear-gradient(90deg, rgba(122,199,136,1) 0%, rgba(153,196,108,1) 100%);}
#sec01 .scene-box .tit-box .en::after{ background: rgba(220,156,199,1); background: linear-gradient(90deg, rgba(232,156,150,1) 0%, rgba(220,156,199,1) 100%);}
#sec01 .scene-box .tit-box h3{ font-weight: 700; letter-spacing: 0.1em;}
#sec01 .scene-box .product-box{ background: #fff; border: 1px solid #ccc; padding: 3px;}
#sec01 .scene-box .product-box .detail{ border: 1px solid #ccc;}
#sec01 .scene-box .product-box .detail h4{ font-weight: 700; text-align: center;}
#sec01 .scene-box .product-box .detail .t-link{ line-height: 1.2; text-align: right;}
#sec01 .scene-box .product-box .detail .t-link a{ background: url(../img/arrow-red.svg) right center no-repeat; color: #B31D36; display: inline-block;}
.movie-box{ background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.movie-box .movie{ width: 100%; aspect-ratio: 16 / 9;}
.movie-box .movie iframe{ width: 100%; height: 100%;}
#sec02 .tit-box{ text-align: center;}
#sec02 .tit-box h2{ font-weight: 700; letter-spacing: 0.2em;}
#sec02 .event-box{ 
    background: rgba(220,156,199,1);
    background: linear-gradient(90deg, rgba(122,199,136,1) 0%, rgba(153,196,108,1) 25%, rgba(232,156,150,1) 75%, rgba(220,156,199,1) 100%);
}
#sec02 .event-box h3{ font-weight: 700; text-align: center; line-height: 1.3; color: #fff;}
#sec02 .event-box .bg{ background: #fff;}
#sec02 .event-box .bg .event-list li span{ display: inline-block;}
#sec02 .btn a{ background: #B31D36 url(../img/arrow-wh.svg) right 20px center no-repeat; background-size: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border-radius: 6px; font-weight: 700; text-align: center; color: #fff; line-height: 1.3; text-decoration: none; display: block;}
#page-top{ position: fixed; z-index: 90; transition: .4s;}
#page-top.hide{ opacity: 0;}
#page-top a{ display: block;}
footer{ background: #1d1d1d; color: #fff; text-align: center;}
footer a{ color: #fff;}
footer .sns li{ display: inline-block; vertical-align: middle; margin: 0 5px;}
footer .sns li:nth-of-type(2){ vertical-align: top;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
a:hover,a:hover img{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
.inner{ width: 1046px; margin: 0 auto; position: relative}
header{ height: 60px; padding-top: 14px;}
header .logo-pioneer{ margin-top: 3px;}
#main{ padding-bottom: 80px;}
#main .mv{ background: #000 url(../img/main-bg_pc.jpg) center top no-repeat; background-size: cover;}
#main .mv .inner{ height: 590px;}
#main .mv .tit-box{ position: absolute; top: 147px; left: 0;}
#main .mv .tit-box p{ font-size: 18px; line-height: 2.0; margin-top: 20px;}
#main .detail h2{ position: absolute; top: -105px; left: 36px;}
#main .detail .text-box{ padding-top: 270px;}
#main .detail .text-box p{ font-size: 18px; line-height: 2.2; margin-bottom: 20px;}
#main .detail .text-box p.notes{ font-size: 12px;}
#sec01 .bg-img img{ width: 100%;}
#sec01 nav{ padding-bottom: 60px;}
#sec01 nav .tit-box{ text-align: center; margin: -79px 0 60px;}
#sec01 nav .tit-box h2{ font-size: 30px; margin-top: 30px;}
#sec01 nav ol li:last-of-type{ margin-right: 0;}
#sec01 .scene-box{ width: 1246px; padding: 60px 0 80px; margin: 0 auto 60px;}
#sec01 #no04.scene-box{ margin-bottom: 80px;}
#sec01 .scene-box .tit-box{ margin-bottom: 50px;}
#sec01 .scene-box .tit-box .en{ font-size: 32px; margin-bottom: 40px;}
#sec01 .scene-box .tit-box .en span{ padding: 0 25px;}
#sec01 .scene-box .tit-box h3{ font-size: 28px; text-align: center; margin-bottom: 30px;}
#sec01 .scene-box .tit-box .read{ font-size: 18px; line-height: 2.2; text-align: center;}
#sec01 .scene-box .scene-list li{ display: flex; align-items: center; margin-bottom: 60px;}
#sec01 .scene-box .scene-list li:nth-of-type(odd){ margin-left: -177px;}
#sec01 .scene-box .scene-list li:nth-of-type(odd) .img{ margin-right: 40px;}
#sec01 .scene-box .scene-list li:nth-of-type(even){ flex-flow: row-reverse; margin-right: -177px;}
#sec01 .scene-box .scene-list li:nth-of-type(even) .img{ margin-left: auto;}
#sec01 .scene-box .scene-list li p{ font-size: 18px; line-height: 2.2; width: 483px;}
#sec01 .scene-box .product-box .detail{ padding: 30px;}
#sec01 .scene-box .product-box .detail h4{ font-size: 18px; margin-bottom: 15px;}
#sec01 .scene-box .product-box .detail p{ font-size: 16px; line-height: 1.8;}
#sec01 .scene-box .product-box .detail .t-link{ margin-top: 15px;}
#sec01 .scene-box .product-box .detail .t-link a{ background-size: 8px; padding-right: 20px;}
#sec01 .scene-box .last-box p{ font-size: 18px; line-height: 2.2; margin-top: 30px;}
.movie-box{ padding: 10px; margin-bottom: 60px;}
#sec02{ padding-bottom: 80px;}
#sec02 .tit-box{ margin-bottom: 60px;}
#sec02 .tit-box h2{ font-size: 30px; margin-top: 30px;}
#sec02 .event-box{ padding: 20px 10px 10px; margin-bottom: 40px;}
#sec02 .event-box h3{ font-size: 24px; margin-bottom: 20px;}
#sec02 .event-box .bg{ padding: 30px 30px 20px;}
#sec02 .event-box .bg .event-list{ display: flex; flex-wrap: wrap;}
#sec02 .event-box .bg .event-list li{ font-size: 18px; width: 480px; margin-bottom: 10px;}
#sec02 .event-box .bg .event-list li span{ width: 110px;}
#sec02 .btn{ width: 390px; margin: 0 auto;}
#sec02 .btn a{ font-size: 22px; padding: 20px 0;}
#page-top{ right: 20px; bottom: 20px;}
footer{ padding: 60px 0;}
footer .sns{ margin-bottom: 40px;}
footer .cp{ margin-top: 20px;}
}

/* ==== その他 ===== */
@media screen and (max-width: 1060px){
    #sec01 .bg-img{ width: 1046px; margin: 0 auto;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
header .inner{ padding: 15px 20px 18px;}
header .logo-pioneer{ width: 88px; margin-top: 1px;}
header .logo-gdo{ width: 42px;}
#main{ padding-bottom: 40px;}
#main .mv{ position: relative;}
#main .mv .tit-box p{ font-size: 16px; line-height: 1.6; position: absolute; left: 20px; bottom: 45px;}
#main .detail{ padding: 0 20px;}
#main .detail h2{ position: relative; z-index: 10; margin: -38px 0 20px;}
#main .detail .text-box p{ font-size: 16px; line-height: 1.8; margin-bottom: 20px;}
#main .detail .text-box p.notes{ font-size: 12px;}
#sec01 .bg-img{ width: 100%;}
#sec01 nav{ padding-bottom: 20px;}
#sec01 nav .tit-box{ text-align: center; margin: -79px 0 30px;}
#sec01 nav .tit-box .n1-img{ width: 34%; margin: 0 auto;}
#sec01 nav .tit-box h2{ font-size: 22px; line-height: 1.3; margin-top: 15px;}
#sec01 nav ol{ padding: 0 10px;}
#sec01 nav ol li{ width: 49%; margin: 0 auto 2% 0;}
#sec01 nav ol li:nth-of-type(even){ margin-right: 0;}
#sec01 .scene-box{ padding: 30px 0; margin: 0 10px 30px;}
#sec01 #no04.scene-box{ margin-bottom: 40px;}
#sec01 .scene-box .inner{ padding: 0 15px;}
#sec01 .scene-box .tit-box{ margin-bottom: 20px;}
#sec01 .scene-box .tit-box .en{ font-size: 26px; margin-bottom: 20px;}
#sec01 .scene-box .tit-box .en span{ padding: 0 15px;}
#sec01 .scene-box .tit-box h3{ font-size: 22px; line-height: 1.3; text-align: center; margin-bottom: 15px;}
#sec01 .scene-box .tit-box .read{ font-size: 16px; line-height: 1.8;}
#sec01 .scene-box .scene-list li{ margin-bottom: 30px;}
#sec01 .scene-box .scene-list li .img{ margin-bottom: 20px;}
#sec01 .scene-box .scene-list li:nth-of-type(odd) .img{ margin-left: -30px;}
#sec01 .scene-box .scene-list li:nth-of-type(even) .img{ margin-right: -30px;}
#sec01 .scene-box .scene-list li p{ font-size: 16px; line-height: 1.8;}
#sec01 .scene-box .product-box .detail{ padding: 15px;}
#sec01 .scene-box .product-box .detail h4{ font-size: 16px; margin-bottom: 10px;}
#sec01 .scene-box .product-box .detail p{ font-size: 14px; line-height: 1.8;}
#sec01 .scene-box .product-box .detail .t-link{ margin-top: 10px;}
#sec01 .scene-box .product-box .detail .t-link a{ background-size: 6px; padding-right: 10px;}
#sec01 .scene-box .last-box .img{ margin: 0 -15px;}
#sec01 .scene-box .last-box p{ font-size: 16px; line-height: 1.8; margin-top: 20px;}
.movie-box{ padding: 5px; margin-bottom: 30px;}
#sec02{ padding-bottom: 40px;}
#sec02 .inner{ padding: 0 20px;}
#sec02 .tit-box{ margin-bottom: 20px;}
#sec02 .tit-box .logo{ width: 70%; margin: 0 auto;}
#sec02 .tit-box h2{ font-size: 22px; margin-top: 15px;}
#sec02 .event-box{ padding: 10px 5px 5px; margin-bottom: 20px;}
#sec02 .event-box h3{ font-size: 18px; margin-bottom: 10px;}
#sec02 .event-box .bg{ padding: 15px 15px 10px;}
#sec02 .event-box .bg .event-list li{ font-size: 14px; margin-bottom: 10px;}
#sec02 .event-box .bg .event-list li span{ width: 78px;}
#sec02 .btn a{ font-size: 20px; padding: 20px 0;}
#page-top{ right: 10px; bottom: 15px; width: 12%;}
footer{ font-size: 10px; padding: 30px 0;}
footer .sns{ margin-bottom: 20px;}
footer .cp{ margin-top: 10px;}
}