@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333; line-height: 1.3;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}
.js-clipboard textarea{ display: none;}
.js-clipboard button{ background: none; border: none; padding: 0; margin: 0; cursor: pointer;}
/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
#contents{ overflow: hidden;}
.bottom::before{ content:""; position: absolute; left: 0; width: 0; height: 0; z-index: 11;}
.bottom::after{ content:""; position: absolute; left: 0; width: 0; height: 0; z-index: 10;}
.bg-blue{ background: #006be0; position: relative;}
.bg-blue .bottom::before{ border-style: solid; border-color: transparent transparent transparent #006be0;}
.bg-wh{ background: #fff; position: relative;}
.bg-wh .bottom::before{ border-style: solid; border-color: transparent transparent transparent #fff;}
.bottom::after{ border-style: solid; border-color: #eee transparent transparent transparent ;}
header{ position: fixed; top: 0; left: 0; z-index: 20; width: 100%;}
header .bg{ background: #fff; display: flex; align-items: center; }
header .bg .logo-gdo{ margin-right: auto;}
header .bg .dl-btn{ background: #006be0 url(../img/ico-dl.png); background-repeat: no-repeat; color: #fff; font-weight: 900; cursor: pointer;}
header .dl{ background: rgba(2, 62, 129, 0.95); display: none;}
#main .read-box nav{ position: absolute; width: 100%; z-index: 12;}
#main .read-box nav ul{ display: flex;}
#main .read-box nav ul li{ margin-right: auto;}
#main .read-box nav ul li:last-of-type{ margin-right: 0;}
#main .read-box p{ color: #fff;}
.sec{ position: relative;}
#sec01 .play-list li:last-of-type{ margin-bottom: 0;}
#sec01 .play-list li .detail h3{ font-weight: 900;}
#sec01 .play-list li:nth-of-type(1) .detail h3{ color: #e8007a;}
#sec01 .play-list li:nth-of-type(2) .detail h3{ color: #f26700;}
#sec01 .play-list li:nth-of-type(3) .detail h3{ color: #59b509;}
#sec02 .step-box{ background: #0263ce; border: 1px solid #58a7fd;}
#sec02 .step-box .copy-box{ background: #fff;}
#sec02 .step-box .copy-box p{ font-weight: 900;}
#sec03 .comment-list li{ display: flex; align-items: center;}
#sec03 .comment-list li:nth-of-type(2){ flex-flow: row-reverse;}
#sec03 .comment-list li .img{ margin-right: -1px;}
#sec03 .comment-list li:nth-of-type(2) .img{ margin-right: 0px; margin-left: -1px;}
#sec03 .comment-list li .comment{ background: #eee;}
#sec03 .comment-list li .comment h3{ font-weight: 900; color: #fff;}
#sec03 .comment-list li .comment h3 span.stit{ background: #333;}
#sec03 .comment-list li:nth-of-type(1) .comment h3 span.bg{ background: #e8007a;}
#sec03 .comment-list li:nth-of-type(2) .comment h3 span.bg{ background: #f26700;}
#sec03 .comment-list li:nth-of-type(3) .comment h3 span.bg{ background: #59b509;}
#sec03 .comment-list li .comment .name{ font-weight: 900;}
#sec03 .comment-list li:nth-of-type(1) .comment .name{ color: #e8007a;}
#sec03 .comment-list li:nth-of-type(2) .comment .name{ color: #f26700;}
#sec03 .comment-list li:nth-of-type(3) .comment .name{ color: #59b509;}
#sec04{ background: #eee;}
.dl-box{ position: relative;}
.dl-box .btn-list{ position: absolute;}
#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;}

#cmpn-about table td a{ color: #006be0;}

/* ==== 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: 900px; margin: 0 auto; position: relative}
.bottom::before,
.bottom::after{ bottom: -100px;}
.bottom::before{ border-width: 0 0 100px 100vw;}
.bottom::before{ border-width: 0 0 100px 100vw;}
.bottom::after{ border-width: 100px 0 0 100vw;}
#contents{ padding-top: 78px;}
header .bg .logo-panasonic{ margin: 0 30px;}
header .bg .dl-btn{ background-position: right 30px center; font-size: 22px; padding: 25px 70px 25px 30px;}
header .dl{ padding: 80px 0; height: calc(100vh - 78px);}
#main .mv{ background: url(../img/grid.png),url(../img/main-bg_pc.jpg); background-size: 2px , cover; background-repeat: repeat , no-repeat; background-position: left top , center center;}
#main .mv .inner{ height: 520px;}
#main .mv h1{ position: absolute; top: 65px; left: 0;}
#main .read-box{ padding-bottom: 60px;}
#main .read-box nav{ top: -52px;}
#main .read-box p{ font-size: 18px; line-height: 2.0; text-align: center; padding-top: 75px;}
.sec{ padding: 180px 0 60px;}
.sec h2{ text-align: center;}
.btn{ text-align: center;}
#sec01 h2{ margin-bottom: 20px;}
#sec01 .play-list{ margin-bottom: 60px;}
#sec01 .play-list li{ display: flex; align-items: center; margin-bottom: 50px;}
#sec01 .play-list li:nth-of-type(odd){ flex-flow: row-reverse;}
#sec01 .play-list li .detail{ width: 510px; margin-left: auto;}
#sec01 .play-list li:nth-of-type(odd) .detail{ margin-left: 0; margin-right: auto;}
#sec01 .play-list li .detail h3{ font-size: 32px; margin-bottom: 10px;}
#sec01 .play-list li .detail p{ font-size: 18px; line-height: 2.0;}
#sec01 .play-list li .detail p.stext{ font-size: 14px; margin-top: 10px;}
#sec02 h2{ margin-bottom: 20px;}
#sec02 .pre-list{ display: flex; margin-bottom: 60px;}
#sec02 .pre-list li:first-of-type{ margin-right: auto;}
#sec02 .step-box{ border-radius: 10px; padding: 30px 30px 40px; margin-bottom: 60px;}
#sec02 .step-box h3{ text-align: center; margin-bottom: 30px;}
#sec02 .step-box .step-list{ display: flex; margin-bottom: 30px;}
#sec02 .step-box .copy-box{ display: flex; align-items: center; border-radius: 10px; padding: 6px 10px 10px;}
#sec02 .step-box .copy-box p{ font-size: 36px; margin: 0 auto 0 50px;}
#sec03{ padding-bottom: 60px;}
#sec03 h2{ margin-bottom: 60px;}
#sec03 .comment-list li{ margin-bottom: 60px;}
#sec03 .comment-list li .comment{ border-radius: 10px; padding: 30px;}
#sec03 .comment-list li .comment h3{ font-size: 24px; margin-bottom: 20px;}
#sec03 .comment-list li .comment h3 span{ padding: 5px 8px;}
#sec03 .comment-list li .name{ font-size: 28px; margin-bottom: 15px;}
#sec03 .comment-list li .text{ font-size: 18px; line-height: 2.0;}
#sec04{ padding: 60px 0 80px;}
.dl-box .btn-list{ top: 282px; left: 440px;}
.dl-box .btn-list li:first-of-type{ margin-bottom: 8px;}
#page-top{ right: 20px; bottom: 20px;}
footer{ padding: 60px 0;}
footer .bnr-list{ margin-bottom: 60px;}
footer .bnr-list li:first-of-type{ float: left;}
footer .bnr-list li:last-of-type{ float: right;}
footer .sns{ margin-bottom: 40px;}
footer .cp{ margin-top: 20px;}

/* ==============================================
#cmpn-about
============================================== */
#cmpn-about{
width: 100%;
margin: 60px auto 0 auto;
}
#cmpn-about h3{
background: #000000;
padding: 12px 0 16px 20px!important;
color: #FFF;
font-size: 18px;
font-weight: 600;
}
#cmpn-about table{
border-top:1px solid #DCDCDC;
border-left:1px solid #DCDCDC;
width: 100%;
}
#cmpn-about table th{
border-right:1px solid #DCDCDC;
border-bottom:1px solid #DCDCDC;
font-size: 16px;
line-height: 28px;
background: #F5F5F5;
text-align: center;
padding: 22px 30px 26px 30px;
}
#cmpn-about table td{
border-right:1px solid #DCDCDC;
border-bottom:1px solid #DCDCDC;
font-size: 16px;
line-height: 28px;
background: #fff;
padding: 22px 30px 26px 30px;
}

}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
.bottom::before,
.bottom::after{ bottom: -40px;}
.bottom::before{ border-width: 0 0 40px 100vw;}
.bottom::before{ border-width: 0 0 40px 100vw;}
.bottom::after{ border-width: 40px 0 0 100vw;}
#contents{ padding-top: 48px;}
header .bg .logo-panasonic{ width: 85px; margin: 0 20px;}
header .bg .logo-gdo{ width: 41px;}
header .bg .dl-btn{ background-position: right 10px center; background-size: 17px; font-size: 14px; padding: 15px 30px 15px 15px;}
header .dl{ padding: 40px 20px; height: calc(100vh - 48px);}
#main .read-box{ padding-bottom: 30px;}
#main .read-box nav{ top: -52px; padding: 0 10px;}
#main .read-box nav ul li{ margin-right: 8px;}
#main .read-box p{ font-size: 18px; line-height: 1.8; padding: 40px 20px 0;}
.sec{ padding: 80px 0 40px;}
.sec .inner{ padding: 0 20px;}
#sec01 h2{ margin-bottom: 20px;}
#sec01 .play-list{ margin-bottom: 30px;}
#sec01 .play-list li{ margin-bottom: 25px;}
#sec01 .play-list li .img{ padding: 0 20px; margin-bottom: 20px;}
#sec01 .play-list li .detail h3{ font-size: 24px; margin-bottom: 10px;}
#sec01 .play-list li .detail p{ font-size: 18px; line-height: 1.8;}
#sec01 .play-list li .detail p.stext{ font-size: 14px; margin-top: 10px;}
#sec02 h2{ margin-bottom: 20px;}
#sec02 .pre-list{ margin-bottom: 40px;}
#sec02 .pre-list li:first-of-type{ margin-bottom: 30px;}
#sec02 .step-box{ border-radius: 10px; padding: 20px 20px 30px; margin-bottom: 30px;}
#sec02 .step-box .copy-box{ border-radius: 10px; padding: 10px;}
#sec02 .step-box .copy-box p{ font-size: 22px; text-align: center; margin-bottom: 10px;}
#sec03{ padding-bottom: 30px;}
#sec03 h2{ margin-bottom: 30px;}
#sec03 .comment-list li{ margin-bottom: 20px;}
#sec03 .comment-list li .img{ width: 30%;}
#sec03 .comment-list li .comment{ width: 70%; border-radius: 10px; padding: 20px 15px;}
#sec03 .comment-list li .comment h3{ font-size: 14px; margin-bottom: 15px;}
#sec03 .comment-list li .comment h3 span{ padding: 4px 6px;}
#sec03 .comment-list li .name{ font-size: 18px; margin-bottom: 5px;}
#sec03 .comment-list li .text{ font-size: 14px; line-height: 1.8;}
#sec04{ padding: 20px 0 40px;}
#sec04 .dl-box{ margin: 0 20px;}
.dl-box .btn-list{ display: flex; top: 36.2%; left: 6%; right: 6%;}
.dl-box .btn-list li:first-of-type{ margin-right: 2%;}
#page-top{ right: 10px; bottom: 15px; width: 12%;}
footer .bnr-list{ padding: 0 15px; margin-bottom: 30px;}
footer .bnr-list li:first-of-type{ margin-bottom: 10px;}
footer{ font-size: 10px; padding: 30px 0 70px;}
footer .sns{ margin-bottom: 20px;}
footer .cp{ margin-top: 10px;}

/* ==============================================
#cmpn-about
============================================== */

#cmpn-about {
	margin: 30px 0 0 0;
}
#cmpn-about h3{
background: #000000;
padding: 10px 20px;
color: #FFF;
font-size: 20px;
font-weight: 600;
}
#cmpn-about table{
width: 100%;
}
#cmpn-about table th{
display: block;
border-top:1px solid #DCDCDC;
font-size: 16px;
line-height: 1.8;
background: #F5F5F5;
text-align: left;
padding: 10px 20px;
width: auto;
}
#cmpn-about table td{
display: block;
font-size: 16px;
line-height: 1.8;
padding: 10px 20px;
}
#cmpn-about ul{
padding: 0 0 10px 0;
}

}