@charset "UTF-8";
/*
*
* product_module_addition.css
* 商品ページ共通モジュールを個別に上書き・追加するCSS
* 初期値はデフォルトのスタイルを当てていますので、値を変更してご使用下さい
*
*/
:root {
    --base-color: #DA291C;
    --hover-color: #E56960;
    --bg-color: #FDF4F3;
    --heading-color: #DA291C;
}

/* --------------------------------
配下ページのメインビジュアル
-------------------------------- */
.hs-main-visual {
    background-image: url("/fortinet/asset/images/common/kv_img_lower_sm.jpg");
}
@media (min-width: 768px) {
    .hs-main-visual {
        background-image: url("/fortinet/asset/images/common/kv_img_lower_lg.jpg");
    }
}

.util-max-width {
	max-width: 100px;
}

/* --------------------------------
  ブランドカラーを使用
　使用するときはコメント削除してください
-------------------------------- */
/*
.hs-c-overview{
 // とは
    background-color: var(--bg-color) !important;
}
//３つのポイント、他商品と組み合わせ
.hs-pointcard__image,
.hs-alignment-box__icon{
    background-color: var(--base-color);
}
*/

/*ローカルナビにメガメニューを設置する場合
    /asset/css/localheader.html 内のクラスhs-navigation-mega--default 削除
    <div id="hs-navigation-nav01" class="hs-navigation-mega hs-navigation-mega--default" aria-hidden="true">
    →<div id="hs-navigation-nav01" class="hs-navigation-mega"  aria-hidden="true">
*/

/* --------------------------------
もっと知る　基本は--bg-color
-------------------------------- */
/*
.hs-content-footer {
    background-color: var(--base-color);
}
*/

/* --------------------------------
  背景の指定がある場所でベースの背景カラーを使用したい場合は
  .u-background--type-brand（ブランドカラー）
　.u-background--type-brand-bg（ブランド背景カラー）
　クラスを使用
-------------------------------- */

/* --------------------------------
  追加パーツ
-------------------------------- */
/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  /* ----- lineup-spec-box ----- */
    .lineup-spec-box {
        background-color: #f2f2f2;
        margin-top: 22px;
        padding: 22px 48px 18px;
    }
  /* ----- lineup-spec-checkbox-wrap ----- */
    .lineup-spec-checkbox-wrap {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        max-width: 924px;
        margin: 0 auto;
    }
    .lineup-spec-checkbox-field {
        display: flex;
        align-items: center;
        width: calc(((100% - (30px)) / 2) - .1px);
        margin-left: 30px;
        margin-top: 5px;
    }
    .lineup-spec-checkbox-field:nth-child(2n+1) {
        margin-left: 0!important;
    }
    .lineup-spec-checkbox-field:nth-child(-n+2) {
        margin-top: 0!important;
    }
    .lineup-spec-checkbox-field > input[type="checkbox"] {
        clip: rect(0, 0, 0, 0);
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
    }
    .lineup-spec-checkbox-field__label {
        display: inline-block;
        position: relative;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.9;
        padding: 2px 0 0 24px;
    }
    .lineup-spec-checkbox-field__label:before {
        position: absolute;
        content: "";
        top: 5px;
        left: 0;
        width: 18px;
        height: 18px;
        border: 1px solid #bcbcbc;
        background-color: #fff;
    }
    .lineup-spec-checkbox-field__label:after {
        position: absolute;
        top: 7px;
        left: 8px;
        width: 9px;
        height: 11px;
        margin-left: -4px;
        transform: rotate(45deg);
        border-right: 3px solid #bcbcbc;
        border-bottom: 3px solid #bcbcbc;
        content: "";
        opacity: 0;
    }
    input:checked + [class*="lineup-spec-checkbox-field__label"]:after {
        opacity: 1;
    }
  /* ----- lineup-spec-table ----- */
    .lineup-spec-table {
        margin: 24px 0 0;
    }
    .lineup-spec-table__body {
        overflow-x: auto;
    }
    .lineup-spec-table__body:first-child {
        margin-top: 0!important;
    }
    .lineup-spec-table__body:last-child {
        margin-bottom: 0!important;
    }
    .lineup-spec-table__matrix {
        width: 100%;
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .lineup-spec-table__cell {
        min-width: min(calc(212 / 1100 * 100vw), 212px);
        font-size: 15px;
        text-align: center;
    }
    .lineup-spec-table__cell--lv1 {
        min-width: min(calc(212 / 1100 * 100vw), 212px);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        padding: 10px 15px;
    }
    .lineup-spec-table__cell--lv2 {
        width: 20%;
        min-width: min(calc(211 / 1100 * 100vw), 211px);
        font-size: 15px;
        font-weight: 700;
        padding: 11px 15px;
    }
    .lineup-spec-table__cell--lv3 {
        width: 20%;
        min-width: min(calc(211 / 1100 * 100vw), 211px);
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        padding: 11px 15px;
    }
}


/* ======================================================
 * SP
====================================================== */
@media (max-width: 767.98px) {
  /* ----- lineup-spec-checkbox-wrap ----- */
    .lineup-spec-checkbox-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: #f2f2f2;
        margin-top: 22px;
        padding: 17px 23px;
    }
    .lineup-spec-checkbox-field {
        display: flex;
        align-items: center;
        margin: 8px 0 0 0;
    }
    .lineup-spec-checkbox-field:first-child {
        margin-top: 0!important;
    }
    .lineup-spec-checkbox-field > input[type="checkbox"] {
        clip: rect(0, 0, 0, 0);
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
    }
    .lineup-spec-checkbox-field__label {
        display: inline-block;
        position: relative;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.7;
        padding: 2px 0 0 24px;
    }
    .lineup-spec-checkbox-field__label:before {
        position: absolute;
        content: "";
        top: 5px;
        left: 0;
        width: 18px;
        height: 18px;
        border: 1px solid #bcbcbc;
        background-color: #fff;
    }
    .lineup-spec-checkbox-field__label:after {
        position: absolute;
        top: 7px;
        left: 8px;
        width: 9px;
        height: 11px;
        margin-left: -4px;
        transform: rotate(45deg);
        border-right: 3px solid #bcbcbc;
        border-bottom: 3px solid #bcbcbc;
        content: "";
        opacity: 0;
    }
    input:checked + [class*="lineup-spec-checkbox-field__label"]:after {
        opacity: 1;
    }
  /* ----- lineup-spec-table ----- */
    .lineup-spec-table {
        margin: 25px 0 0;
    }
    .lineup-spec-table__body {
        overflow-x: scroll;
    }
    .lineup-spec-table__body:first-child {
        margin-top: 0!important;
    }
    .lineup-spec-table__body:last-child {
        margin-bottom: 0!important;
    }
    .lineup-spec-table__matrix {
        width: 100%;
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .lineup-spec-table .lineup-spec-table__cell {
        max-width: 132px;
        font-size: 12px;
        text-align: center;
    }
    .lineup-spec-table .lineup-spec-table__cell--lv1 {
        min-width: 132px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.7;
        text-align: center;
        padding: 10px 15px;
    }
    .lineup-spec-table .lineup-spec-table__cell--lv2 {
        width: 18%;
        max-width: 68px;
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        padding: 10px 15px;
    }
    .lineup-spec-table .lineup-spec-table__cell--lv3 {
        width: 18%;
        max-width: 68px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        padding: 11px 15px;
    }
}