/* 全体********************************************************************** */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    color: white;
    background-color: #212529;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 5.8vw;
    padding-right: 5.8vw;
}

@media screen and (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

section {
    /* 固定ヘッダーで隠れる部分に余白をあける */
    scroll-margin-top: 94px;
}

/* ここからスムーススクロール用 */
/* スムーススクロールは必要不可欠ではないので、無効化できるようにメディアクエリで条件をつける */
@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
    }
}

/* ページ内リンクの位置調整 */
.anchor {
    display: block;
    padding-top: 120px;
    margin-top: -120px;
}

/* font */
body {
    font-family: "Roboto", sans-serif;
    font-style: normal;
}

.oswald {
    font-family: "Oswald", sans-serif;
    font-style: normal;
}

h1 {
    font-weight: 400;
    font-size: 26px;
    letter-spacing: 0.2em;
    color: #49cc00;
    padding-bottom: 75px;
}

h2 {
    font-weight: 700;
    font-size: 14px;
}


/* PCの時だけ表示 */
.pc-only {
    display: block;
}

@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }
}

/* スマホの時だけ表示 */
.sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp-only {
        display: block;
    }
}

/* ヘッダー********************************************************************** */
/*========= 上部固定させるためのCSS ===============*/
.header {
    height: 94px;
    width: 100%;
    position: fixed;
    /*fixedを設定して固定*/
    z-index: 999;
    /*最前面へ*/
    top: 0;
    /*位置指定*/
    left: 0;
    /*位置指定*/
    background: black;
}

.header_inn {
    height: 94px;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

main {
    padding-top: 94px;
    padding-bottom: 140px;
}


.top-logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    z-index: 9999;
}

.top-logo-pc img {
    width: 100%;
}

@media screen and (max-width:768px) {
    .top-logo-sp img {
        width: 100%;
    }
}

.g-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pc-menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pc-nav .pc-menu {
    display: flex;
    flex-direction: row;
    column-gap: 30px;
}

.pc-nav .pc-menu li a {
    color: #828282;
    font-size: 12px;
    font-weight: 800;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    transition:all 0.3s;
}
.pc-nav .pc-menu li a:hover{
    color:#49cc00;
}

.pc-nav .pc-menu li a img {
    width: 25px;
}
.pc-nav .pc-menu li a svg {
    width: 25px;
}
.pc-nav .pc-menu li a:hover svg .cls-2 {
    fill:#49cc00;
}

.pc-nav .pc-menu li a::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -15px;
    width: 1px;
    height: 25px;
    background-color: #828282;
}

.pc-nav .pc-menu li:first-child a::after {
    display: none;
}

/* ハンバーガーメニュー */
@media screen and (max-width:768px) {
    .sp-nav {
        position: fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top: -94px;
        left: 0;
        width: 100%;
        height: 94px;
        background-color: #828282;
        /*動き*/
        transition: all 0.6s;
        opacity: 0;


        display: flex;
        justify-content: center;
        /* 横中央 */
        align-items: center;
        /* 縦中央 */

    }

    /*アクティブクラスがついたら位置を0に*/
    .sp-nav.panelactive {
        top: 94px;
        opacity: 1;
    }

    /*ナビゲーション*/
    .sp-nav .sp-menu {
        z-index: 999;
        display: flex;
        flex-direction: row;
        column-gap: 20px;
    }
}

/*========= ハンバーガーボタンのためのCSS ===============*/
@media screen and (max-width:768px) {
    .openbtn {
        position: fixed;
        z-index: 9999;
        /*ボタンを最前面に*/
        top: 22px;
        right: 20px;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }

    /*×に変化*/
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 27.5%;
        height: 3px;
        border-radius: 2px;
        background-color: #ffffff;
        width: 45%;
    }

    .openbtn span:nth-of-type(1) {
        top: 30%;
    }

    .openbtn span:nth-of-type(2) {
        top: 46%;
    }

    .openbtn span:nth-of-type(3) {
        top: 62%;
    }

    .openbtn.active span:nth-of-type(1) {
        top: 36%;
        transform: translateY(6px) rotate(-45deg);
        width: 50%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3) {
        top: 60%;
        transform: translateY(-6px) rotate(45deg);
        width: 50%;
    }
}

/* メイントップ********************************************************************** */
.main_sec {
    margin-top: 70px;
    position: relative;
}

.main_logo img {
    width: 100%;
}

.main_logo .main_logo_pc {
    width: 55vw;
    max-width: 700px;
    margin-bottom: 70px;
}

.main_txt {
    width: 41.25vw;
    max-width: 528px;
}

.main_txt h1 {
    padding-bottom: 30px;
}

.main_txt p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
}

.main_img img {
    width: 100%;
}

.main_img {
    position: absolute;
    top: 0;
    right: 0;
    width: 43vw;
    max-width: 550px;
}
@media screen and (max-width: 768px) {
    .main_txt {
        width: 100%;
        max-width:none;
        margin-top:45px;
    }
    .main_img{
        position:static;
        width:100%;
        max-width:none;
    }
}

/* 中身********************************************************************** */
.specifications_sec,
.price_sec {
    margin-top: 140px;
}
@media screen and (max-width: 768px) {
    .specifications_sec{
        margin-top:60px;
    }
}

/* SPECIFICATIONS */
/*アコーディオン全体*/
.accordion-area {
    list-style: none;
    margin: 0 auto;
}

.accordion-area .accordion-inn {
    border-top: 1px solid #E0E0E0;
}

/*アコーディオンタイトル*/
.title {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 1rem;
    font-weight: normal;
    transition: all .5s ease;
    padding-top: 35px;
    padding-bottom: 35px;
}

/*アイコンの＋と-*/
.title::before,
.title::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #49cc00;

}

.title::before {
    top: 48%;
    right: 0;
    transform: rotate(0deg);

}

.title::after {
    top: 48%;
    right: 0;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/
.title.close::before {
    transform: rotate(0deg);
}

.title.close::after {
    transform: rotate(-0deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    /*はじめは非表示*/
}

.spec_table_box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 75px;
}

/* テーブル */
.spec_table_box table {
    width: 40vw;
    max-width: 520px;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size:12px;
}

/* セル共通 */
.spec_table_box table td {
    height: 46px;
    line-height: 1.4;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #E0E0E0;
    padding: 0 10px;
}

.empty-row td {
    border-bottom: none !important;
}
.no_border_btm{
    border-bottom: none !important;
    vertical-align:bottom !important;
}
.no_border_btm_nxt{
    vertical-align:top !important;
}


.spec_table_box table td:first-child {
    width: 33.333%;
    font-family: "Oswald", sans-serif;
}

.spec_table_box table td:last-child {
    width: 66.666%;
}

@media screen and (max-width: 768px) {
    .spec_table_box {
        flex-direction:column;
    }
    .spec_table_box table td:first-child {
        width: 40%;
    }
    
    .spec_table_box table td:last-child {
        width: 60%;
    }
}