@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
body{ background: #fff; width: 100vw; overflow-x: clip;}
.en{ font-family: "Roboto Condensed", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif; font-weight: 700;}
.btn-black a{ background: #000; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; position: relative; cursor: pointer; border-radius: 60px;}
.btn-black a::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
.inner{ position: relative;}
header .bg{ background: rgba(241, 241, 241, 0.8); display: block;}
header .bg.ac{ opacity: 1;}
header .g-nav ul li a{ color: #000;}
header .g-nav ul li a .en{ background: #d81e19; color: #fff; border-radius: 3px; display: inline-block; position: relative;}
/* main */
#main p{ font-weight: 700; line-height: 1.8;}
/* section */
/* sec01 */
#sec01 .tit-box .en{ line-height: 1.0; color: #d81e19; text-align: center;}
#sec01 .tit-box h2{ font-weight: 900; line-height: 1.3; color: #d81e19; text-align: center;}
#sec01 .product-list li:last-of-type{ margin-bottom: 0;}
#sec01 .product-list li .detail .tit-box{ display: flex;}
#sec01 .product-list li .detail .tit-box .ico{ flex-shrink: 0;}
#sec01 .product-list li .detail .tit-box h3{ font-weight: 900; line-height: 1.4; color: #d81e19;}
#sec01 .product-list li .detail p{ line-height: 1.8;}
#sec01 .product-list li .detail p strong{ color: #d81e19;}
#sec01 .colorvari-box{ background: #f1f1f1;}
#sec01 .colorvari-box p{ line-height: 1.8;}
#sec01 .spec-box h3{ background: rgb(216,30,25); background: linear-gradient(90deg, rgba(216,30,25,1) 0%, rgba(124,147,154,1) 33%, rgba(0,105,159,1) 67%, rgba(0,151,76,1) 100%); font-weight: 900; line-height: 1.3; color: #fff; text-align: center;}
#sec01 .spec-box table{ width: 100%;}
#sec01 .spec-box table th,
#sec01 .spec-box table td{ line-height: 1.3; text-align: center; vertical-align: middle; border: 1px solid #000;}
#sec01 .spec-box table th{ background: #f1f1f1;}
#sec01 .spec-box table td{ background: #fff;}
/* sec02 */
#sec02{ background: #f1f1f1;}
#sec02 .tit-box .en{ line-height: 1.0; color: #d81e19; text-align: center;}
#sec02 .tit-box h2{ font-weight: 900; line-height: 1.3; color: #d81e19; text-align: center;}
#sec02 .tit-box .read{ font-weight: 700; line-height: 1.8;}
#sec02 .profile-list{ display: flex; text-align: center;}
#sec02 .profile-list > li .name a,
#sec02 .profile-list > li .name span{ font-weight: 700; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center;}
#sec02 .profile-list > li .name a .ico{ width: 30px;}
#sec02 .profile-list > li .name a .ico img{ width: 100%;}
#sec02 .profile-list > li .btn-list{ text-align: center;}
#sec02 .profile-list > li .btn-list li{ display: inline-block;}
#sec02 .profile-list > li .btn-list li a{ background: #fff; font-weight: 700; line-height: 1.3; color: #000; text-align: center; text-decoration: none; display: block; cursor: pointer; border-radius: 60px;}
#sec02 .profile-list{ text-align: center;}
#sec02 .profile-list > li{ display: inline-block; text-align: center; vertical-align: top;}
.profile .detail .job{ font-weight: 700; line-height: 1.3;}
.profile .detail .name a .ico{ width: 38px;}
.profile .detail .name a .ico img{ width: 100%;}
.profile .detail .name a{ font-weight: 700; color: #000; text-decoration: none; display: flex; align-items: center;}
.profile .detail .data{ line-height: 1.6;}
.profile .detail .text{ line-height: 1.8;}
.profile .detail .t-link{ line-height: 1.8; text-align: right;}
.profile .detail .t-link a{ color: #000;}
/* sec03 */
#sec03{ background: #f1f1f1;}
#sec03 .tit-box .en{ line-height: 1.0; text-align: center;}
#sec03 .tit-box h2{ font-weight: 900; line-height: 1.3; text-align: center;}
footer .bottom{ background: #000;}
footer .bottom p,
footer .bottom p a{ color: #fff;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
.inner{ width: 1080px; margin: 0 auto;}
.btn-black{ width: 500px;}
.btn-black a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 24px; padding: 18px 0;}
.btn-black a::after{ font-size: 20px; right: 15px;}
.btn-black a:hover{ box-shadow: none; transition: .4s;}
header .logo-gdo{ margin-right: auto;}
header .logo-ns{ margin-right: 0;}
header .g-nav ul li{ margin-right: 40px;}
header .g-nav ul li a .en{ font-size: 12px; padding: 3px 4px; margin-right: 4px; top: -2px;}
#contents{ background: url(../img/mv-bg_pc.jpg) center top 110px no-repeat; background-size: 100%;}
/* main */
#main{ padding: 28vw 0 75px;}
#main h1{ text-align: right; margin-bottom: 35px;}
#main p{ font-size: 18px; text-align: right;}
/* sec01 */
#sec01{ background: url(../img/sec01-bg_pc.jpg) center bottom no-repeat; background-size: 100%; padding: 80px 0 100px;}
#sec01 .tit-box{ margin-bottom: 55px;}
#sec01 .tit-box .en{ font-size: 70px;}
#sec01 .tit-box h2{ font-size: 24px;}
#sec01 .product-list{ margin-bottom: 80px;}
#sec01 .product-list li{ display: flex; align-items: center; margin-bottom: 60px;}
#sec01 .product-list li:nth-of-type(even){ flex-flow: row-reverse;}
#sec01 .product-list li .img{ margin-right: auto; flex-shrink: 0;}
#sec01 .product-list li:nth-of-type(even) .img{ margin-right: 0; margin-left: auto;}
#sec01 .product-list li .detail{ width: 520px;}
#sec01 .product-list li .detail .tit-box{ margin-bottom: 15px;}
#sec01 .product-list li .detail .tit-box h3{ font-size: 28px; margin: 5px 0 0 10px;}
#sec01 .product-list li .detail p{ font-size: 18px;}
#sec01 .colorvari-box{ margin-bottom: 80px;}
#sec01 .colorvari-box h3{ margin-bottom: 10px;}
#sec01 .colorvari-box p{ font-size: 18px; text-align: center; padding-bottom: 40px;}
#sec01 .spec-box{ margin-bottom: 80px;}
#sec01 .spec-box h3{ font-size: 28px; padding: 10px 0;}
#sec01 .spec-box table th,
#sec01 .spec-box table td{ font-size: 16px; padding: 10px 0;}
#sec01 .btn-black{ margin: 0 auto;}
/* sec02 */
#sec02{ padding: 75px 0 100px;}
#sec02 .tit-box{ margin-bottom: 55px;}
#sec02 .tit-box .en{ font-size: 70px;}
#sec02 .tit-box h2{ font-size: 24px; margin-bottom: 35px;}
#sec02 .tit-box .read{ font-size: 18px; text-align: center;}
#sec02 .profile-list{ margin-bottom: 80px;}
#sec02 .profile-list > li{ margin-right: auto;}
#sec02 .profile-list > li:last-of-type{ margin-right: 0;}
#sec02 .profile-list > li .img{ margin-bottom: 20px;}
#sec02 .profile-list > li .name{ margin-bottom: 20px;}
#sec02 .profile-list > li .name a,
#sec02 .profile-list > li .name span{ font-size: 20px;}
#sec02 .profile-list > li .name a .ico{ margin-right: 10px;}
#sec02 .profile-list > li .btn-list{ text-align: center;}
#sec02 .profile-list > li .btn-list li{ width: 115px; margin: 0 2px;}
#sec02 .profile-list > li .btn-list li a{ font-size: 18px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); padding: 8px 0;}
#sec02 .profile-list > li .btn-list li a:hover{ box-shadow: none;}
.profile{ display: flex; align-items: center; padding: 10px;}
.profile .img{ flex-shrink: 0; margin-right: 30px;}
.profile .detail .name{ margin-bottom: 20px;}
.profile .detail .name a .ico{ margin-right: 10px;}
.profile .detail .name a{ font-size: 34px;}
.profile .detail .data{ font-size: 14px; margin-bottom: 15px;}
.profile .detail .text{ font-size: 15px;}
.profile .detail .t-link{ font-size: 14px; margin-top: 10px;}
#sec02 .bnr a{ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); display: block;}
#sec02 .bnr a:hover{ box-shadow: none;}
/* sec03 */
#sec03{ padding: 75px 0 100px;}
#sec03 .tit-box{ margin-bottom: 55px;}
#sec03 .tit-box .en{ font-size: 70px;}
#sec03 .tit-box h2{ font-size: 24px;}
#sec03 .contents-list{ display: flex;}
#sec03 .contents-list li:first-of-type{ margin-right: auto;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
.btn-black a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 16px; padding: 15px 0;}
.btn-black a::after{ font-size: 16px; right: 20px;}
header .logo-gdo{ margin-right: auto;}
header .logo-ns{ margin-right: 20px;}
header .g-nav{ background: rgba(241, 241, 241, 0.8); height: 100vh;}
header .open-btn span{ background: #000;}
header .g-nav ul li.ico-blank::before{ top: 32px; right: -18px;}
header .g-nav ul li.ico-blank::after{ top: 30px; right: -20px;}
header .g-nav ul li a .en{ font-size: 12px; padding: 3px 4px; margin-right: 4px; top: -2px;}
/* main */
#main{ padding-bottom: 40px;}
#main p{ font-size: 17px; padding: 0 20px;}
/* section */
section .inner{ padding: 0 20px;}
/* sec01 */
#sec01{ background: url(../img/sec01-bg_sp.jpg) center bottom no-repeat; background-size: 100%; padding: 40px 0 50px;}
#sec01 .tit-box{ margin-bottom: 35px;}
#sec01 .tit-box .en{ font-size: 44px; margin-bottom: 10px;}
#sec01 .tit-box h2{ font-size: 17px;}
#sec01 .product-list{ margin-bottom: 35px;}
#sec01 .product-list li{ margin-bottom: 30px;}
#sec01 .product-list li .img{ margin-bottom: 10px;}
#sec01 .product-list li .detail .tit-box{ align-items: center; margin-bottom: 5px;}
#sec01 .product-list li .detail .tit-box h3{ font-size: 22px; margin-left: 10px;}
#sec01 .product-list li .detail p{ font-size: 17px;}
#sec01 .colorvari-box{ margin-bottom: 40px;}
#sec01 .colorvari-box h3{ margin-bottom: 10px;}
#sec01 .colorvari-box p{ font-size: 16px; padding: 0 20px 20px;}
#sec01 .spec-box{ margin-bottom: 40px;}
#sec01 .spec-box h3{ font-size: 20px; padding: 8px 0;}
#sec01 .spec-box .scroll{ overflow-x: scroll; margin: 0 -20px;}
#sec01 .spec-box table{ width: 860px; margin: 0 20px;}
#sec01 .spec-box table th,
#sec01 .spec-box table td{ font-size: 14px; padding: 8px 0;}
#sec01 .spec-box p{ text-align: center; margin-top: 10px;}
/* sec02 */
#sec02{ padding: 35px 0 50px;}
#sec02 .tit-box{ margin-bottom: 35px;}
#sec02 .tit-box .en{ font-size: 44px; margin-bottom: 10px;}
#sec02 .tit-box h2{ font-size: 17px; margin-bottom: 15px;}
#sec02 .tit-box .read{ font-size: 17px;}
#sec02 .profile-list{ flex-wrap: wrap; margin: 0 0 20px;}
#sec02 .profile-list > li{ width: 48%; margin: 0 auto 20px 0;}
#sec02 .profile-list > li:nth-of-type(2n){ margin-right: 0;}
#sec02 .profile-list > li .img{ margin-bottom: 10px;}
#sec02 .profile-list > li .name{ margin-bottom: 10px;}
#sec02 .profile-list > li .name a,
#sec02 .profile-list > li .name span{ font-size: 12px;}
#sec02 .profile-list > li .name a .ico{ width: 20px; flex-shrink: 0; margin-right: 5px;}
#sec02 .profile-list > li .btn-list{ text-align: center;}
#sec02 .profile-list > li .btn-list li{ margin: 0 2px;}
#sec02 .profile-list > li .btn-list li a{ font-size: 12px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); padding: 6px 20px;}
.profile{ margin: -10px;}
.profile .img{ width: 120px; margin: 0 auto 10px;}
.profile .detail .name{ margin-bottom: 12px;}
.profile .detail .name a .ico{ width: 30px; margin-right: 10px;}
.profile .detail .name a{ font-size: 22px; justify-content: center;}
.profile .detail .data{ font-size: 12px; text-align: center; margin-bottom: 10px;}
.profile .detail .text{ font-size: 14px;}
.profile .detail .t-link{ font-size: 12px; margin-top: 10px;}
#sec02 .bnr a{ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); display: block;}
/* sec03 */
#sec03{ padding: 35px 0 50px;}
#sec03 .tit-box{ margin-bottom: 35px;}
#sec03 .tit-box .en{ font-size: 44px; margin-bottom: 10px;}
#sec03 .tit-box h2{ font-size: 17px;}
#sec03 .contents-list li:first-of-type{ margin-bottom: 30px;}
footer .bottom{ padding-bottom: 30px;}
}