@font-face {
    font-family: aosagi;
    src: url(../font/YDWaosagi.otf);
}
@font-face {
    font-family: price;
    src: url(../font/GenJyuuGothicL-Monospace-Bold.ttf);
}

:root {
            --h2font: 24pt;/*変数定義*/
            --linecolor: #fdfbe4; /*h2, h3　ラインカラー*/
            --pricebk: #c8161d; /* price tag color */
            

        }
        body {
            font-family: "Zen Maru Gothic", serif;
            font-weight: 500;
            font-style: normal;
        }
        body, div, figure, img, p, span {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h2 {
            font-family: aosagi;
            color: #fff;
        }
        h3 {
            font-family: aosagi;
            color :#f6e9ab;
        }
        h4 {
            color: #f6e9ab;
        }
        ul {
            list-style: none; 
            padding-left: 0;
        }

        section {
            margin-bottom: 3rem;
        }

        .wrapper {
            margin: 0 auto;
        }

        /***************************************************************
        *
        * 各ページのヘッダ　と　フッター
        *
        *****************************************************************/
        header {
            background: #fcf1d4;
            padding: 2rem 0;
        }
        header figure img {
            width: 100%;
        }
        footer {
            background: #ccb498;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }
        footer figure {
            width: 50%;
        }
        footer figure img {
            width: 100%;
        }
        a {
            text-decoration: none;
        }
        a:hover {
            cursor: pointer;
            opacity: 0.5;
        }


       footer .download {width: 50%; display: inline-flex; justify-content: center; align-items: center; margin-right: 20px;}
       footer .download a {display: inline-flex; justify-content: center; align-items: center; text-decoration: none}
       footer .download img {width: 10%;}



        /***************************************************************************
        *
        * Table of Contents
        *
        *************************************************************************/
        #toc_bar {
            background: url("../images/top/main_bk.png");
            padding: 2rem 0;
        }
        #toc {
            background: #fff;
            padding: 1rem 2rem;
        }
        #toc p#toc_btn {
            display: block;
            text-align: center;
            background: #5b834a;
            color: #fff;
            font-weight: bold;
            width: 50%;
            margin: 0 auto;
            padding: 0.5rem;
        }
        #toc p#toc_btn:hover {
            cursor: pointer;
            opacity: 0.5;
        }
        #toc_list {
            width: 20rem;
            margin: 1rem auto;
            line-height: 1.8;
        }
        .toc_close {
            display: none;
        }
        .toc_open {
            display: block;
        }


        /*******************************************************************************
        *
        * H2 ボックス
        *
        **********************************************************************************/


        .h2_bk {
            width: calc(100% - var(--h2font) - 24px);
            margin-left: var(--h2font);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: var(--pagecolor);
            position: relative;
            padding: 4px;
            border-radius: 8px;
            z-index: 1;
        }
        .h2_bk::before{
            content: "";
            width: calc(var(--h2font) + 24px);
            height: calc(var(--h2font) + 24px);
            background: var(--pagecolor);
            clip-path: circle(50% at 50% 50%);
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        .h2_bk::after{
            content: "";
            width: calc(var(--h2font) + 24px);
            height: calc(var(--h2font) + 24px);
            background: var(--pagecolor);
            clip-path: circle(50% at 50% 50%);
            position: initial;
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .h2_border {
            padding: 2px;
            background: var(--linecolor);
            width: 100%;
            position: relative;
            border-radius: 4px;
            z-index: 11;
        }
        .h2_border::before {
            content: "";
            width: calc(var(--h2font) + 18px);
            height: calc(var(--h2font) + 18px);
            background: var(--linecolor);
            clip-path: circle(50% at 50% 50%);
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            z-index: 11;
        }
        .h2_border::after {
            content: "";
            width: calc(var(--h2font) + 18px);
            height: calc(var(--h2font) + 18px);
            background: var(--linecolor);
            clip-path: circle(50% at 50% 50%);
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
            z-index: 11;
        }
        .h2_inner {
            padding: 2px;
            background: var(--pagecolor);
            position: relative;
            z-index: 21;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .h2_inner::before {
            content:"";
            width: calc(var(--h2font) + 12px);
            height: calc(var(--h2font) + 12px);
            background: var(--pagecolor);
            clip-path: circle(50% at 50% 50%);
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            z-index: 21;
        }
        .h2_inner::after {
            content:"";
            width: calc(var(--h2font) + 12px);
            height: calc(var(--h2font) + 12px);
            background: var(--pagecolor);
            clip-path: circle(50% at 50% 50%);
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
            z-index: 21;
        }
        .h2_txt {
            margin: 4px;
            background: var(--pagecolor);
            font-size: var(--h2font);
            padding: 4px 0;
            border-top: solid 2px var(--linecolor);
            border-bottom: solid 2px var(--linecolor);
            z-index: 31;
            padding-left: var(--h2font);
            width: 100%;
            position: relative;
        }
        .h2_txt > span {
            vertical-align: baseline;
            font-size: 1.2rem;
        }

        .corp_logo {
            position: absolute;
            height: calc(var(--h2font) + 16px);
            top: 8px;
            right: 2rem;
            z-index: 41;
        }
        .corp_logo > img {
            height: 100%;
        }
        .h2_icon_left {
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            width: 1.5rem;
            height: auto;
            z-index: 41;
        }
        .h2_icon_left > img {
            width: 100%;
        }
        .h2_icon_right {
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
            width: 1.5rem;
            height: auto;
            z-index: 41;
        }
        .h2_icon_right > img {
            width: 100%;
        }


        /************************************************************
        *
        * H3 ボックス
        *
        *************************************************************/

        .h3_bk {
            background: var(--linecolor);
            border: solid 4px var(--pagecolor);
            padding: 4px;
            margin-bottom: 1rem;
        }
        .h3_inner {
            background: var(--pagecolor);
            padding: 4px;
            position: relative;
        }
        .h3_txt {
            margin: 0.5rem 2rem;
        }
        .h3_icon {
            position: absolute;
            width: 1rem;
            height: 1rem;
        }
        .h3_icon_LT {
            top: 4px;
            left: 4px;
        }
        .h3_icon_RT {
            top: 4px;
            right: 4px;
        }
        .h3_icon_LB {
            bottom: 4px;
            left: 4px;
        }
        .h3_icon_RB {
            bottom: 4px;
            right: 4px;
        }

        /**************************************************************
        *
        * 価格表示
        *
        *****************************************************************/
        .price_area {
            border-left: solid 5px var(--pagecolor);
            padding-left: 1rem;
            margin-bottom: 1rem;
        }
        .model_txt {
            font-family: aosagi;
            color: var(--pagecolor);
        }

        .price_box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 1rem;
        }
        .price_box_bk {
            background: var(--pricebk);
            margin-right: 2rem;
            padding: 4px;
            z-index: 11;
            position: relative;
        }
        .price_box_bk::before {
            content: "";
            width: calc(1rem + 12px);
            height: calc(2rem + 12px);
            background: var(--pricebk);
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
        }
        .price_box_bk::after {
            content: "";
            width: calc(1rem + 12px);
            height: calc(2rem + 12px);
            background: var(--pricebk);
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
        }
        .price_box_border {
            background: var(--linecolor);
            padding: 4px;
            z-index: 21;
            position: relative;
        }
        .price_box_border::before {
            content: "";
            width: calc(1rem + 4px);
            height: calc(2rem + 4px);
            background: var(--linecolor);
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
        }
        .price_box_border::after {
            content: "";
            width: calc(1rem + 4px);
            height: calc(2rem + 4px);
            background: var(--linecolor);
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
        }
        .price_box_inner {
            background: var(--pricebk);
            padding: 4px;
            z-index: 31;
            position: relative;
        }
        .price_box_inner::before {
            content: "";
            width: 1rem;
            height: 2rem;
            background: var(--pricebk);
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
        }
        .price_box_inner::after {
            content: "";
            width: 1rem;
            height: 2rem;
            background: var(--pricebk);
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
        }
        .h4_txt {
            font-family: aosagi;
            text-align: center;
            z-index: 41;
            margin: 0 2rem;
        }
        .price_txt {
            font-family: price;
            color: var(--pricebk);
            font-size: 2rem;
            font-weight: bold;
        }

        /**************************************
        *
        * 製品名部分
        *
        ****************************************/
        .item_cnts {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: wrap;
        }
        .item_cnts_left {
            width: 48%;
        }
        .item_cnts_right {
            width: 48%;
        }
    
        .item_title {
            font-family: aosagi;
            color: var(--pagecolor);
            font-size: 1.5rem;
            font-weight: bold;
            border-bottom: dotted 2px #576144;
            margin-bottom: 2rem;
            padding-bottom: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
/*        .item_title figure {
            width: 25%;
        }
        .item_title figure img {
            width: 100%;
        }*/
        .item_title img {
            height: 2rem;
            width: auto;
        }


    /******************************************
    *
    * キャンペーン対象外
    *
    ********************************************/
    .price_wo_sale {
        color: #956F29;
    }
    .price_wo_sale span {
        font-family: aosagi;
        font-size: 1rem;
        margin-left: 0.5rem;
        margin-right: 2rem;
        display: inline-block;
        background: #F6E9AB;
        color: #910000;
        padding: 0.5rem;
        position: relative;
    }
    .price_wo_sale p {
        font-family: price;
        color: #956f29;
        font-size: 2rem;
    }
    .price_wo_sale span::before {
        content: "";
        background: #F6E9AB;
        width: 0.5rem;
        height: 100%;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        position: absolute;
        top: 0;
        left: -0.5rem;
    }
    .price_wo_sale span::after {
        content: "";
        background: #F6E9AB;
        width: 0.5rem;
        height: 100%;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        position: absolute;
        top: 0;
        right: -0.5rem;
    }
    .price_wo_sale p.catalog_no {
        font-size: 1rem;
        color: #000;
    }
    .price_wo_sale p.price_comment {
        font-size: 0.8rem;
        color: #000;
    }


        /********************************************
        * 
        * Table
        *
        **********************************************/
        .table_scroll {
            width: 100%;
            overflow: scroll;
            -ms-overflow-style: none;
             scrollbar-width: none;
        }
        /* Chrome, Safari 対応 */
        .table_scroll::-webkit-scrollbar {
            display:none;
        }

        table {
            border-spacing: 0;
            width: 100%;
        }
        th, td {
            padding: 0.5rem;
            text-align: center;
        }
        th {
            background: var(--pagecolor); 
            color: #fff;
            border: solid 1px #666464;
            font-weight: bold;
        }
        td {
            border: solid 1px #666464;
        }
        tr:nth-child(2n+1) td {
            background: #dcdddd;
        }
        tr:nth-child(2n) td {
            background: linear-gradient(to bottom, #fff 83%, #dcdddd);
        }
        tr.camp_price th, tr.camp_price td {
            background: #f6e9ab;
            color: #e60012;
            font-size: 1.5rem;
            font-weight: bold;
        }
        th.camp_price, td.camp_price {
            background: linear-gradient(to bottom, #fff 60%, #fff100 100%)!important;
            color: #e60012;
            font-size: 1.5rem;
            font-weight: bold;
        }




        /**************************
        *
        * 製品画像
        *
        *****************************/

        .item_image {
            position: relative;
        }
        .off_img {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .img_comment {
            display: block;
            font-size: 0.8rem;
        }
        
        .feat_icon {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fce5bf;
            font-weight: bold;
            width: 6rem;
            height: 6rem;
            clip-path: polygon(0 33.33%, 33.33% 0, 66.66% 0, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%); 
/*            position: absolute;*/
            bottom: 0;
            left: 8rem;
        }
        .feat_icon span {
            text-align: center;
        }
        
        .sub_title {
            font-size: 1.1rem;
        }











/*        @media screen and ( min-width:100px) {
            :root {--h2font: 18px;}
            .wrapper {width: 96%;}
            .item_cnts_left {width: 100%;}
            .item_cnts_right {width: 100%;}
            .price_box {flex-wrap: wrap;}
            .price_box_bk {width: 100%;}
            .price_txt {width: 100%;}
            .h2_txt > span {font-size: 0.8rem;}
            .corp_logo {top: 3rem; box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);}
        }*/
        @media screen and ( max-width:750px) {
            :root {--h2font: 18px;}
            body {font-size: 14px;}
            figure img {width: 100%;}
            .wrapper {width: 96%;}
            .item_cnts_left {width: 100%;}
            .item_cnts_right {width: 100%;}
            .price_box {flex-wrap: wrap;}
            .price_box_bk {width: 100%;}
            .price_txt {width: 100%;}
            .h2_txt > span {font-size: 0.8rem;}
            .corp_logo {top: 3rem; box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);}
            .item_title {flex-wrap: wrap;}
            .item_title figure {width: 50%;}
            .model_txt {font-size: 1.1rem;}
        }
        @media screen and ( max-width:960px) {
            :root {--h2font: 18px;}
            .wrapper {width: 98%;}
            .item_cnts_left {width: 100%;}
            .item_cnts_right {width: 100%;}
            .price_box {flex-wrap: wrap;}
            .price_box_bk {width: 100%;}
            .price_txt {width: 100%;}
            .h2_txt > span {font-size: 0.8rem;}
/*            .corp_logo {top: 3rem; box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);}*/
        }
        @media screen and ( max-width:1119px) {
            :root {--h2font: 18px;}
            .wrapper {width: 98%;}
        }
        @media screen and ( min-width:1200px) {
            .wrapper {width: 1200px;}    
        }