@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
.inner{ position: relative;}
#contents{
    background: url(../img/contents-bg.png) center bottom repeat-x;
    -webkit-animation: bgroop 35s linear infinite;
    animation: bgroop 35s linear infinite;
}
@-webkit-keyframes bgroop {
    from { background-position: 0 bottom;} 
    to { background-position: -1400px bottom;}
}
@keyframes bgroop {
    from { background-position: 0 bottom;} 
    to { background-position: -1400px bottom;}
}
/* main */
#main .box02{ background: #222 url(../img/bg-drid.jpg) top center repeat; position: relative;}
#main .box02::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;
}
#main .box02 .read{ font-weight: 600; color: #fff;}
#main .box02 .profile-box{ background: #000; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); border-radius: 6px; position: relative;}
#main .box02 .profile-box .img{ position: absolute; left: 0; bottom: 0;}
#main .box02 .profile-box .detail h2{ font-weight: 700; color: #fff; display: flex; align-items: center;}
#main .box02 .profile-box .detail h2 span{ color: #009944;}
#main .box02 .profile-box .detail p{ color: #fff;}
/* sec01 */
#sec01 .tit-box h2{ font-weight: 900; color: #fff; text-align: center; line-height: 1.2;}
#sec01 .tit-box h2 strong{ font-weight: 900; color: #009944;}
#sec01 .tit-box p{ font-weight: 600; color: #fff;}
#sec01 .img-list li:last-of-type{ margin-bottom: 0;}
#sec01 .img-list li .detail h3{ font-weight: 900; color: #fff; line-height: 1.2;}
#sec01 .img-list li .detail h3 strong{ font-weight: 900; color: #009944;}
#sec01 .img-list li .detail p{ color: #fff;}
/* sec02 */
#sec02 .tit-box h2{ font-weight: 900; color: #000; text-align: center; line-height: 1.2;}
#sec02 .tit-box h2 strong{ font-weight: 900; color: #009944;}
#sec02 .tit-box p{ font-weight: 600; color: #000;}
#sec02 .img-list li:last-of-type{ margin-bottom: 0;}
#sec02 .img-list li .detail h3{ font-weight: 900; color: #000; line-height: 1.2;}
#sec02 .img-list li .detail h3 strong{ font-weight: 900; color: #009944;}
#sec02 .img-list li .detail p{ color: #000;}
#sec02 .trackman-box{ background: #000; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); border-radius: 6px; position: relative;}
#sec02 .trackman-box .img{ position: absolute; left: 0; bottom: 0;}
#sec02 .trackman-box .detail h2{ font-weight: 700; color: #fff; display: flex; align-items: center;}
#sec02 .trackman-box .detail h2 span{ color: #009944;}
#sec02 .trackman-box .detail p{ color: #fff;}
/* sec03 */
#sec03 .tit-box h2{ font-weight: 900; color: #000; text-align: center; line-height: 1.2;}
#sec03 .tit-box h2 strong{ font-weight: 900; color: #009944;}
#sec03 .tit-box p{ font-weight: 600; color: #000;}
#sec03 .box h3{ background: #009944; font-weight: 900; color: #fff; text-align: center; position: relative;}
#sec03 .box h3 span{ position: absolute; right: 10px; bottom: 10px;}
#sec03 .scroll-box table{ width: 100%;}
#sec03 .scroll-box table th{ background: #eee; border: 1px solid #444; font-weight: 900; text-align: center; line-height: 1.4; vertical-align: top;}
#sec03 .scroll-box table td{ color: #fff; text-align: center; vertical-align: top;}
#sec03 .scroll-box table td.graph{ padding: 0;}
#sec03 .scroll-box table td.no01,
#sec03 .scroll-box table td.no03{ background: #222; border: 1px solid #444; text-align: center;}
#sec03 .scroll-box table td.no02,
#sec03 .scroll-box table td.no04{ background: #333; border: 1px solid #444; text-align: center;}
#sec03 .scroll-box table td.no01 h4,
#sec03 .scroll-box table td.no01 .tit{ font-weight: 900; color: #009944;}
#sec03 .scroll-box table td.no02 h4,
#sec03 .scroll-box table td.no02 .tit{ font-weight: 900; color: #009944;}
#sec03 .scroll-box table td.no03 h4,
#sec03 .scroll-box table td.no03 .tit{ font-weight: 900; color: #c3aa6f;}
#sec03 .scroll-box table td.no04 h4,
#sec03 .scroll-box table td.no04 .tit{ font-weight: 900; color: #427ee1;}
#sec03 .scroll-box table td table td{ border-top: 1px solid #444; border-right: 1px solid #444;}
#sec03 .scroll-box table td table td:last-of-type{ border-right: none;}
#sec03 .scroll-box table td table td h5{ color: #fca307;}
#sec03 .scroll-box table td table td strong{ font-weight: 900; display: block;}
#sec03 .scroll-box table td .tit{ text-align: left;}
#sec03 .scroll-box table td .comment{ text-align: left;}
/* sec04 */
#sec04 .tit-box h2{ font-weight: 900; color: #fff; text-align: center; line-height: 1.2;}
#sec04 .tit-box h2 strong{ font-weight: 900; color: #009944;}
#sec04 .box h3{ font-weight: 900; color: #fff; text-align: center;}
#sec04 .box p{ color: #fff;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
.inner{ width: 1080px; margin: 0 auto;}
section{ padding: 70px 0 100px;}
#contents{
    background-size: 1400px;
    padding-bottom: 180px;
}
/* main */
#main .box01{ background: url(../img/main-bg_pc.jpg) center top no-repeat; background-size: cover;}
#main .box01 .inner{ height: 420px;}
#main .box01 h1{ position: absolute; top: 70px; left: 265px;}
#main .box02{ padding: 40px 0 60px;}
#main .box02 .read{ font-size: 18px; line-height: 2.0; text-align: center; margin-bottom: 35px;}
#main .box02 .profile-box{ height: 150px;}
#main .box02 .profile-box .detail{ padding: 25px 30px 0 288px;}
#main .box02 .profile-box .detail h2{ font-size: 24px; margin-bottom: 15px; }
#main .box02 .profile-box .detail h2 span{ font-size: 14px; margin-right: 10px;}
#main .box02 .profile-box .detail p{ line-height: 1.8;}
/* sec01 */
#sec01{ background: url(../img/sec01-bg01_pc.jpg) center top no-repeat;}
#sec01 .tit-box{ margin-bottom: 55px;}
#sec01 .tit-box h2{ font-size: 50px; margin-bottom: 30px;}
#sec01 .tit-box p{ font-size: 18px; text-align: center; line-height: 2.0;}
#sec01 .img-list li{ display: flex; align-items: center; margin-bottom: 60px;}
#sec01 .img-list li:nth-of-type(odd){ flex-direction: row-reverse;}
#sec01 .img-list li .img{ margin-right: auto;}
#sec01 .img-list li:nth-of-type(odd) .img{ margin-right: 0; margin-left: auto;}
#sec01 .img-list li .detail{ width: 510px;}
#sec01 .img-list li .detail h3{ font-size: 28px; margin-bottom: 15px;}
#sec01 .img-list li .detail p{ font-size: 18px; line-height: 1.8;}
/* sec02 */
#sec02{ background: #fff url(../img/sec02-bg02.png) center top 65px no-repeat; border-top: 10px solid #009944;}
#sec02 .tit-box{ margin-bottom: 55px;}
#sec02 .tit-box h2{ font-size: 50px; margin-bottom: 30px;}
#sec02 .tit-box p{ font-size: 18px; text-align: center; line-height: 2.0;}
#sec02 .img-list{ margin-bottom: 60px;}
#sec02 .img-list li{ display: flex; align-items: center; margin-bottom: 60px;}
#sec02 .img-list li:nth-of-type(odd){ flex-direction: row-reverse;}
#sec02 .img-list li .img{ margin-right: auto;}
#sec02 .img-list li:nth-of-type(odd) .img{ margin-right: 0; margin-left: auto;}
#sec02 .img-list li .detail{ width: 510px;}
#sec02 .img-list li .detail h3{ font-size: 28px; margin-bottom: 15px;}
#sec02 .img-list li .detail p{ font-size: 18px; line-height: 1.8;}
#sec02 .trackman-box{ height: 178px;}
#sec02 .trackman-box .detail{ padding: 25px 30px 0 288px;}
#sec02 .trackman-box .detail h2{ font-size: 24px; margin-bottom: 15px; }
#sec02 .trackman-box .detail h2 span{ font-size: 14px; margin-left: 10px;}
#sec02 .trackman-box .detail p{ line-height: 1.8;}
/* sec03 */
#sec03{ background: #f6f6f6 url(../img/sec03-bg02.png) center top 65px no-repeat;}
#sec03 .tit-box{ margin-bottom: 55px;}
#sec03 .tit-box h2{ font-size: 50px; margin-bottom: 30px;}
#sec03 .tit-box p{ font-size: 18px; text-align: center; line-height: 2.0;}
#sec03 .box h3{ font-size: 28px; padding: 20px 0 22px;}
#sec03 .box h3 span{ font-size: 12px;}
#sec03 .scroll-box table th{ font-size: 16px; width: 164px; padding: 15px;}
#sec03 .scroll-box table th .ico{ margin-bottom: 5px;}
#sec03 .scroll-box table td{ padding: 15px;}
#sec03 .scroll-box table td.graph table td{ padding: 5px 0 10px;}
#sec03 .scroll-box table td.graph .img{ padding: 20px;}
#sec03 .scroll-box table td.graph table td h5{ font-size: 12px; margin-bottom: 4px;}
#sec03 .scroll-box table td.graph table td p{ font-size: 12px; line-height: 1.1;}
#sec03 .scroll-box table td.graph table td p strong{ font-size: 28px;}
#sec03 .scroll-box table td h4{ margin-bottom: 10px;}
#sec03 .scroll-box table td .tit{ font-size: 16px; line-height: 1.4; margin-bottom: 5px;}
#sec03 .scroll-box table td .comment{ font-size: 14px; line-height: 1.8;}
#sec03 .box.last{ margin-top: 60px;}
/* sec04 */
#sec04{ 
    background-image: url(../img/sec04-bg02.png),url(../img/sec04-bg01_pc.jpg);
    background-repeat: no-repeat,no-repeat;
    background-position: center top 65px, center top;
}
#sec04 .tit-box{ margin-bottom: 48px;}
#sec04 .tit-box h2{ font-size: 50px;}
#sec04 .box h3{ font-size: 28px; margin-bottom: 30px;}
#sec04 .box p{ font-size: 18px; line-height: 1.8;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
section{ padding: 40px 0 50px;}
#contents{
    background-size: 700px;
    padding-bottom: 90px;
}
/* main */
#main .box02{ padding: 20px 0 30px;}
#main .box02 .inner{ padding: 0 20px;}
#main .box02 .read{ font-size: 18px; line-height: 1.8; margin-bottom: 20px;}
#main .box02 .profile-box .img{ width: 90px; top: -13px; bottom: auto;}
#main .box02 .profile-box .detail{ padding: 15px 10px 15px 100px;}
#main .box02 .profile-box .detail h2{ font-size: 18px; margin-bottom: 8px;}
#main .box02 .profile-box .detail h2 span{ font-size: 12px; margin-right: 10px;}
#main .box02 .profile-box .detail p{ font-size: 14px; line-height: 1.6;}
/* sec01 */
#sec01{ background: url(../img/sec01-bg01_sp.jpg) center top no-repeat; background-size: 100%;}
#sec01 .inner{ padding: 0 20px;}
#sec01 .tit-box{ margin-bottom: 40px;}
#sec01 .tit-box h2{ font-size: 26px; margin-bottom: 20px;}
#sec01 .tit-box p{ font-size: 18px; line-height: 1.8;}
#sec01 .img-list li{ margin-bottom: 30px;}
#sec01 .img-list li .img{ margin-bottom: 15px;}
#sec01 .img-list li .detail h3{ font-size: 22px; margin-bottom: 8px;}
#sec01 .img-list li .detail p{ font-size: 18px; line-height: 1.8;}
/* sec02 */
#sec02{ background: #fff url(../img/sec02-bg02.png) center top no-repeat; background-size: 100%; border-top: 10px solid #009944;}
#sec02 .inner{ padding: 0 20px;}
#sec02 .tit-box{ margin-bottom: 40px;}
#sec02 .tit-box h2{ font-size: 26px; margin-bottom: 10px;}
#sec02 .tit-box p{ font-size: 18px; line-height: 1.8;}
#sec02 .img-list{ margin-bottom: 30px;}
#sec02 .img-list li{ margin-bottom: 30px;}
#sec02 .img-list li .img{ margin-bottom: 15px;}
#sec02 .img-list li .detail h3{ font-size: 22px; margin-bottom: 8px;}
#sec02 .img-list li .detail p{ font-size: 18px; line-height: 1.8;}
#sec02 .trackman-box .img{ width: 90px; top: 0; bottom: auto;}
#sec02 .trackman-box .detail{ padding: 15px 10px 15px 100px;}
#sec02 .trackman-box .detail h2{ font-size: 18px; margin-bottom: 8px;}
#sec02 .trackman-box .detail h2 span{ font-size: 12px; margin-right: 10px;}
#sec02 .trackman-box .detail p{ font-size: 14px; line-height: 1.6;}
/* sec03 */
#sec03{ background: #f6f6f6 url(../img/sec03-bg02.png) center top no-repeat; background-size: 100%;}
#sec03 .tit-box{ margin-bottom: 40px;}
#sec03 .tit-box h2{ font-size: 26px; margin-bottom: 10px; padding: 0 20px;}
#sec03 .tit-box p{ font-size: 18px; line-height: 1.8; padding: 0 20px;}
#sec03 .box h3{ font-size: 22px; padding: 20px 0 22px; margin: 0 20px;}
#sec03 .box h3 span{ font-size: 10px; right: 5px; bottom: 5px;}
#sec03 .box .sp{ background: #444; color: #fff; text-align: center; padding: 10px; margin: 0 20px;}
#sec03 .box .sp p{ background: url(../img/ico-swipe.png) left center no-repeat; background-size: 30px; display: inline-block; padding: 5px 0 5px 35px;}
#sec03 .scroll-box{ overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;}
#sec03 .scroll-box > table{ width: 800px; margin: 0 20px;}
#sec03 .scroll-box table th{ font-size: 16px; text-align: left; padding: 15px 10px; position: relative; min-height: 3.6em; min-width: 45px;}
#sec03 .scroll-box table th span{ writing-mode: vertical-lr; display: block; white-space: nowrap;}
#sec03 .scroll-box table th.ico-th{ padding-top: 50px;}
#sec03 .scroll-box table th .ico{ width: 32px; position: absolute; top: 10px; left: 5px;}
#sec03 .scroll-box table td{ padding: 10px;}
#sec03 .scroll-box table td.graph table td{ padding: 5px 5px 10px;}
#sec03 .scroll-box table td.graph .img{ padding: 10px; width: 190px;}
#sec03 .scroll-box table td.graph table td h5{ font-size: 12px; margin-bottom: 4px;}
#sec03 .scroll-box table td.graph table td p{ font-size: 12px; line-height: 1.1;}
#sec03 .scroll-box table td.graph table td p strong{ font-size: 22px;}
#sec03 .scroll-box table td h4{ margin-bottom: 10px;}
#sec03 .scroll-box table td .tit{ font-size: 14px; line-height: 1.4; margin-bottom: 4px;}
#sec03 .scroll-box table td .comment{ font-size: 12px; line-height: 1.8;}
#sec03 .box.last{ margin-top: 30px;}
#sec03 .box.last .distribution-map{ padding: 0 20px;}
/* sec04 */
#sec04{ 
    background-image: url(../img/sec04-bg02.png),url(../img/sec04-bg01_sp.jpg);
    background-repeat: no-repeat,no-repeat;
    background-position: center top, center top;
    background-size: 100%,100%;
}
#sec04 .inner{ padding: 0 20px;}
#sec04 .tit-box{ margin-bottom: 40px;}
#sec04 .tit-box h2{ font-size: 26px;}
#sec04 .box h3{ font-size: 20px; line-height: 1.2; margin-bottom: 15px;}
#sec04 .box p{ font-size: 18px; line-height: 1.8;}
}