@charset "utf-8";

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.main-box h3:not(.sub-title) {
    background: url(/gasconro/img/main_box_h3.gif);
    height: 25px;
    width: 558px;
    padding: 9px 0 0 22px;
    font-size: 12px;
}
.list-info {
    font-size: x-small;
    text-align: right;
    padding-bottom: 10px;
}
.main-box table {
    width: 580px;
    margin: 0;
    padding: 0;
    border-left: 1px solid #ababab;
    margin-bottom: 10px;
    border-top: 1px solid #ababab;
}
.main-box th {
    border-right: 1px solid #ababab;
    border-bottom: 1px solid #ababab;
    text-align: center;
    padding: 5px 0 5px 0;
    font-size: x-small;
    background-color: #e3e3e3;
}
.main-box td {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ababab;
    padding: 10px;
}
.main-box-w {
    border-bottom: 1px solid #ababab;
    padding: 10px;
    border-right: 1px dotted #ababab;
}
.main-box-w-sale {
    border-bottom: 1px solid #ababab;
    border-right: 1px dotted #ababab;
    background-color: #CFF700;
}
.main-box-td-2 {
    border-bottom: 1px solid #ababab;
    padding: 10px;
    background-color: #efefef;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #ababab;
    width: 101px;
}
.main-box-td-2-sale {
    border-bottom: 1px solid #ababab;
    padding: 10px;
    background-color: #efefef;
    border-right: 1px dotted #ababab;
    width: 101px;
    background-color: #CFF700;
}
.sale-bg {
    color: #CFF700;
}
a.list-btn-red {
    background: url(/gasconro/img/list_btn_red.gif);
    width: 121px;
    height: 25px;
    display: block;
    text-indent: -9999px;
    text-decoration: none;
}
a.list-btn-red:hover {
    background-position: left bottom;
}
a.list-btn-green {
    background: url(/gasconro/img/list_btn_green.gif);
    width: 121px;
    height: 39px;
    display: block;
    text-indent: -9999px;
    text-decoration: none;
}
a.list-btn-green:hover {
    background-position: left bottom;
}
.b15 {
    margin-bottom: 15px;
    clear: both;
}

.font-s {
    font-size: x-small;
    line-height: 110%;
}

.r50 {
    margin-right: 50px;
}

.clear {
    clear: both;
}
.page-top {
    clear: both;
    padding-bottom: 20px;
}

/* PC用 */
@media screen and (min-width: 561px) {
    .maxoff-base {
        position: relative;
    }

    #main .maxoff-base h2 {
        margin-bottom: 0;
    }

    .h2-maxoff {
        position: absolute;
        right: 5px;
        bottom: 5px;
    }

    .h2-maxoff img {
        width: 92%;
        position: relative;
    }

    .h2-maxoff .off-value {
        position: absolute;
        color: #fff;
        font-size: 2.2em;
        font-weight: bold;
        text-shadow: 1px 1px 2px #636363;
        bottom: 31px;
        right: 30px;
    }

    /* 各ページへのリンクのタイトル */
    .nav-head {
        background-color: #ededed;
        padding: 5px 5px 0 5px;
        border-radius: 5px 5px 0 0;
        margin-bottom: 10px;
    }

    .nav-head ul {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #d0d0d0;
        border-right: 1px solid #d0d0d0;
    }

    .nav-head ul li a {
        display: block;
        padding: 15px 0;
        font-weight: bold;
        border-left: 1px solid #d0d0d0;
        color: #333;
        text-decoration: none;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+1,dcdcdc+100 */
        background: #ededed;
        /* Old browsers */
        background: -moz-linear-gradient(top, #ededed 1%, #dcdcdc 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ededed 1%, #dcdcdc 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ededed 1%, #dcdcdc 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dcdcdc', GradientType=0);
        /* IE6-9 */
    }

    .nav-head ul li {
        width: 100%;
    }

    .nav-head ul li a {
        text-align: center;
    }

    .nav-head ul li a:hover {
        background: #ffffff;
    }

    .nav-head .on a {
        background: #ffffff !important;
    }

    .outline_orange:hover {
        outline: 5px solid #ff5600;
        outline-offset: -5px;
    }

    a.free-btn {
        background: url(/gasconro/img/gasconro/free_btn.gif);
        width: 400px;
        height: 91px;
        display: block;
        text-indent: -9999px;
        text-decoration: none;
        margin-bottom: 10px;
    }

    a.free-btn:hover {
        background-position: left bottom;
    }

    #main h3.type-title {
        color: #333;
        background-color: #e8e8e8;
        padding: 1.5% 2%;
        border-radius: 5px 5px 0 0;
        margin-bottom: 0;
    }

    h3.type-title strong {
        font-size: 1.2em;
    }

    .frame-gray-box {
        background-color: #fff;
        position: relative;
        width: 90%;
        padding: 2% 4%;
        margin: auto auto 40px;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        box-sizing: content-box;
    }

    .frame-gray-box::after {
        content: '';
        position: absolute;
        background-color: #e8e8e8;
        width: calc(100% + 2%);
        height: calc(100% + 3%);
        z-index: -2;
        top: -6px;
        left: -1%;
        display: inline-block;
        border-radius: 5px;
    }

    .frame-gray-box h4 {
        text-align: center;
        margin: auto;
        border-bottom: 1px solid #d0d0d0;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .frame-gray-box h4 a {
        color: #333;
        font-weight: bold;
        position: relative;
    }

    .frame-gray-box h4 a:hover {
        color: #ff5803;
        cursor: pointer;
    }

    .frame-gray-box h4 a::after {
        content: url(/gasconro/img/icon_file.gif);
        display: inline-block;
        padding-left: 1%;
        vertical-align: top;
    }

    .frame-gray-box h4 a:hover::after {
        content: url(/gasconro/img/icon_file_o.gif);
    }

    .frame-gray-box h4 ~ p {
        text-align: center;
        color: #333;
        font-weight: bold;
        background-color: #e8e8e8;
        line-height: 1.7em;
        padding: 0;
        width: 30%;
        margin: 10px auto 15px;
    }

    ul.series-list {
        width: 96%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 2%;
    }

    ul.series-list li {
        margin-bottom: 20px;
        display: inline-block;
    }

    ul.series-list li.colum {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }

    ul.series-list li a {
        display: inline-block;
    }

    ul.series-list a:hover {
        outline: solid #ff5803 5px;
        outline-offset: -5px;
    }

    .series-list li.colum a:first-of-type {
        margin-bottom: 5px;
    }

    .series-list li.colum a:not(:first-of-type):hover {
        outline: none;
    }

    .main-box-contents {
        display: inline-flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .main-box-contents li {
        width: 49%;
        display: inline-block;
        margin-bottom: 10px;
    }
    .main-box-contents strong {
        width: 100%;
        display: block;
        margin: 2% 0 1%;
    }
    .main-box-contents img {
        width: 100%;
    }
    .main-box-contents strong {
        width: 100%;
        display: block;
        margin: 2% 0 1%;
        color: #66992d;
    }

    .main-box-b-btn {
        display: inline-flex;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    a.btn-lineup,
    a.btn-estimate {
        width: 216px;
        height: 55px;
        display: block;
        text-indent: -9999px;
        text-decoration: none;
    }

    a.btn-lineup {
        background-image: url(/gasconro/img/item_lineup.gif);
    }

    a.btn-estimate {
        background-image: url(/gasconro/img/work_estimate.gif);
    }

    a.btn-lineup:hover,
    a.btn-estimate:hover {
        background-position: left bottom;
    }

    .series-list li.colum .btn-red,
    .series-list li.colum .btn-green {
        text-indent: -9999px;
        text-decoration: none;
        margin: 0 auto 10px;
        display: block;
    }

    .series-list li.colum .btn-red {
        background: url(/gasconro/img/list_btn_redlong.gif);
        width: 178px;
        height: 24px;
    }

    .series-list li.colum .btn-green {
        background: url(/gasconro/img/list_btn_greenlong.gif);
        width: 178px;
        height: 42px;
    }

    .series-list li.colum .btn-red:hover,
    .series-list li.colum .btn-green:hover {
        background-position: left bottom;
    }
    /*デリシア*/
    #main div.select-box {
        width: 100%;
        padding: 1% 2$;
        margin-bottom: 30px;
        border: 1px solid #2d62a3;
        box-sizing: border-box;
    }
    #main .select-box h3 {
        display: block;
        background-color: #2d62a3;
        padding: 2% 0;
        color: #fff;
        font-size: 18px;
        text-align: center;
        font-weight: normal;
        margin-bottom: 0;
        margin-bottom: 0;
    }
    .select-box .flex-wrap {
        width: 96%;
        padding: 2% 2% 1%;
        border-bottom: 1px dotted #2d62a3;
        justify-content: center;
    }
    .select-box .flex-wrap:last-of-type {
        padding-bottom: 3%;
        border-bottom: none;
    }
    .select-box .flex-wrap p {
        width: 25%;
        font-weight: bold;
    }
    .select-box .flex-wrap ul {
        width: 70%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div.select-box.select-box div {
        height: auto;
    }
    .select-box li input + label,
    ul.select4 li input + label {
        display: inline-block;
        width: 188px;
        height: 31px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin-top: 5px;
        cursor: pointer;
    }
    ul.select4 li input + label {
        width: 92px;
        height: 51px;
    }
    .select-box li {
        background-repeat: no-repeat;
        background-position: center center; 
    }
    .select-box .select1 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select1.jpg');
    }
    .select-box .select1 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select2.jpg');
    }
    .select-box .select2 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select3.jpg');
    }
    .select-box .select2 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select4.jpg');
    }
    .select-box .select3 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select5.jpg');
    }
    .select-box .select3 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select6.jpg');
    }

    .select-box .select4 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_color_aw.jpg')
    }
    .select-box .select4 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_color_as.jpg');
    }
    .select-box .select4 li:nth-of-type(3) {
        background-image:url('/gasconro/img/delicia_color_hd.jpg');
    }
    .select-box .select4 li:nth-of-type(4) {
        background-image:url('/gasconro/img/delicia_color_cb.jpg');
    }
    .select-box .select4 li:nth-of-type(5) {
        background-image:url('/gasconro/img/delicia_color_pm.jpg');
    }
    .select-box .select4 li:nth-of-type(6) {
        background-image:url('/gasconro/img/delicia_color_sc.jpg')
    }
    .select-box .select4 li:nth-of-type(7) {
        background-image:url('/gasconro/img/delicia_color_ts.jpg')
    }
    .select-box .select4 li:nth-of-type(8) {
        background-image:url('/gasconro/img/delicia_color_nb.jpg')
    }

    .select-box .select5 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select13.jpg');
    }
    .select-box .select5 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select14.jpg');
    }

    .type-name {
        display: block;
        font-size: 18px;
        color: #1254a4;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }
    .type-name span:not(.red) {
        font-size: .8em;
        color: #333;
    }
    .flex-wrap {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .flex-box.design {
        width: 50%;
        margin-bottom: 20px;
    }
    .flex-box.design ~ img {
        max-width: 50%;
        align-self: flex-start;
    }
    .flex-box.design p {
        padding: 0 .5em 0 0;
    }
    .flex-box.design h4,h4.rod {
        border-left: #ff0000 5px solid;
        padding-left: 7px;
        padding-top: 2px;
        font-size: 15px;
        margin: 8px auto 5px;
    }
    h4.rod {
        margin-bottom: 10px;
    }
    h4.rod > p {
        margin-bottom: 10px;
    }
    .dericia-flex-box {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .new-line-up .flex-box {
        padding-top: 2em;
        position: relative;
        width: 49%;
        margin: 2% 0 10px;
    }
    .new-line-up div a {
        display: inline-block;
        font-weight: bold;
        width: 100%;
    }
    .new-line-up div img {
        margin: 0 auto 10px;
        display: block;
    }
    .new-line-up div span {
        font-size: .9em;
    }
    .new-line-up a {
        padding: 2px 0 0;
    }
    .new-line-up a::before {
        content: '●';
        font-size: .8em;
        padding-right: 2px;
        color: #b0b0b0;
    }
    .new-line-up a:hover {
        background-color: #efefef;
    }
    .new-line-up a:hover::before {
        color: #ff5600;
    }
    .new-line-up a:hover {
        text-decoration: none;
    }
    .new-line-up div:not(:last-of-type)::after {
        color: #fff;
        content: 'NEW';
        font-size: 14px;
        padding: 2px 9px;
        background-color: #ea0015;
        top: 0;
        left: 0;
        position: absolute;
    }
    .function-flexbox {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px dotted #ababab;
    }
    .function-flexbox div {
        width: min-content;
        display: inline-flex;
        flex-direction: column;
        padding-top: 15px;
    }
    .function-flexbox div:nth-of-type(odd) {
        border-right: 1px dotted #ababab;
        padding-right: 10px;
    }

    .function-flexbox img {
        align-self: flex-start;
        margin-bottom: 5px;
    }
}

/* スマホ用 */
@media screen and (max-width: 560px) {
    .maxoff-base {
        position: relative;
    }

    #main .maxoff-base h2 {
        margin-bottom: 0;
    }

    .h2-maxoff {
        position: absolute;
        right: 5px;
        bottom: 2px;
        text-align: right;
    }

    #contents .h2-maxoff img {
        display: inline-block;
        position: relative;
        margin: 0 !important;
        width: 65%;
    }

    .h2-maxoff .off-value {
        position: absolute;
        color: #fff;
        font-size: 1.3em;
        font-weight: bold;
        text-shadow: 1px 1px 2px #636363;
        bottom: 18px;
        right: 17px;
    }

    .top-mt7plus {
        margin-top: -7rem;
        padding-top: 7rem;
        display: block;
    }
    /**
	 * ビルトインガスコンロ
	 * トップページ
	**/

    .sp-none {
        display: none;
    }

    .ns-bnr-frame {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 45vw !important;
        border: solid 5px #feb300 !important;
        position: relative !important;
        font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
        line-height: 1.28 !important;
    }

    .ns-bnr-sale {
        display: none !important;
    }

    .ns-bnr-img {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        width: 40% !important;
    }

    .ns-bnr-data1 {
        position: absolute !important;
        top: 4px !important;
        left: 151px !important;
        z-index: 1 !important;
        width: 57% !important;
    }

    .ns-bnr-data1 p {
        line-height: 1.1em !important;
    }

    .ns-bnr-balloon-percent {
        display: none !important;
    }

    .ns-bnr-triangle-r {
        display: none !important;
    }

    .ns-bnr-details {
        display: none !important;
    }

    .ns-bnr-box-details {
        position: absolute !important;
        top: 106px !important;
        left: 157px !important;
        z-index: 1 !important;
        width: 27% !important;
        height: 13vw !important;
        background: url(https://jyusetu.com/templates/model/makeBanner/img/bnr/nsbnr_data2_bg.gif) !important;
        font-weight: bold !important;
        color: #dc0c24 !important;
        font-family: Helvetica !important;
    }

    .font-b {
        font-size: 1.7em !important;
    }

    .ns-bnr-text1 {
        font-size: 0.65em !important;
        padding: 5px 0 0px 5px !important;
        text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff !important;
    }

    .font-s {
        font-size: 0.65em !important;
    }

    .ns-bnr-balloon-work {
        display: none !important;
    }

    .ns-bnr-triangle-g {
        display: none !important;
    }

    .ns-bnr-estimates {
        display: none !important;
    }

    .ns-bnr-box-work {
        position: absolute !important;
        top: 106px !important;
        left: 260px !important;
        z-index: 1 !important;
        width: 27% !important;
        height: 13vw !important;
        background: url(https://jyusetu.com/templates/model/makeBanner/img/bnr/nsbnr_data2_bg.gif) !important;
        font-weight: bold !important;
        color: #49a028 !important;
        font-family: Helvetica !important;
    }

    .ns-bnr-text2 {
        padding: 0 !important;
        text-align: center !important;
        text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff !important;
        letter-spacing: -1px !important;
    }

    .ns-bnr-text3 {
        padding: 0;
        text-align: center !important;
        text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff !important;
        letter-spacing: -1px !important;
    }

    /* FACEISバナー */
    .top-faceis-bnr {
        width: 100% !important;
        height: 14vw !important;
        background-size: cover !important;
        background-image: url(/gasconro/img/top-faceis-bnr.jpg) !important;
    }

    a.top-piatto-btn {
        display: none !important;
    }

    .faceis-bnr {
        margin: 2% 0;
    }

    .piatto-bnr {
        margin: 2% 0;
    }


    .contact-conro {
        width: 100% !important;
        height: 36vw !important;
        padding: 0 !important;
        margin: 0px 0px 10px 0px !important;
        background-size: cover !important;
        position: relative !important;
    }

    a.contact-conro-btn {
        width: 43% !important;
        height: 8.1vw !important;
        background-size: cover !important;
        position: absolute !important;
        bottom: 10px !important;
        right: 6px !important;
    }


    .gc-main-box-l {
        width: 100% !important;
        float: none !important;
        background-size: cover !important;
    }

    /**
	 * ビルトインガスコンロ
	 * ご注文の流れ
	**/

    div.gc-flow-box {
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    img.gc-img-r {
        float: none;
        padding: 0;
        width: 100%;
        ;
    }

    div#gc-flow div.b10 img {
        display: none;
    }

    div.gc-flow-box a img {
        width: 80%;
        margin: 3% auto;
        display: block;
    }

    /**
	 * ビルトインガスコンロ
	 * ガスコンロの基礎知識
	**/

    div#gc-basic h4 {
        width: 100%;
        background-image: none;
        color: #FFFFFF;
        margin: 0px 0px 2% 0px;
        padding: 2% 0;
        background-color: #2d62a3;
        font-size: 0.9em;
        text-align: center;
    }

    /**
	 * ビルトインガスコンロ
	 * メーカー・シリーズから選ぶ
	**/

    div.color-box2 {
        box-sizing: border-box;
        background-image: none;
        border-left: 4px solid #e8e8e8;
        border-right: 4px solid #e8e8e8;
        padding: 2%;
    }

    a.color-pg1-btn,
    a.color-pg2-btn,
    a.color-pg3-btn,
    a.color-g2-btn {
        display: block !important;
        margin: 0 auto !important;
    }

    div.color-box-c {
        box-sizing: border-box;
        width: 100%;
        margin-left: 0;
        float: none;
    }

    div.color-box-c div.b20 {
        display: none;
    }

    .r50 {
        margin-right: 0 !important;
    }

    div.color-box-c ul {
        display: flex !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        margin: 3% 0;
    }

    div.color-box-c ul li {
        width: 48% !important;
        background-size: cover !important;
    }

    div.color-box-c ul li a {
        width: 100% !important;
        height: 33.9vw !important;
        background-size: cover !important;
    }

    /* 各ページへのリンクのタイトル */
    .nav-head {
        border-radius: 5px 5px 0 0;
        margin-bottom: 3%;
    }

    .nav-head ul {
        display: flex;
    }

    .nav-head ul li {
        width: 33%;
        border-top: 1px solid #d0d0d0;
        border-right: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        background-color: #ededed;
    }

    .nav-head ul li:first-child {
        border-left: 1px solid #d0d0d0;
    }

    .nav-head ul li a {
        display: block;
        width: 100%;
        padding: 10% 0;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        font-size: 0.8em;
        text-align: center;
    }

    .nav-head li a:hover {
        background: #ffffff;
    }

    .nav-head .on a {
        background: #ffffff !important;
    }

    .main-box-item {
        background: none !important;
        border: none !important;
    }

    div.main-box-item-l {
        width: 96%;
        margin: 2%;
        float: none;
        padding: 0 0 10px 0;
    }

    div.main-box-item-r {
        width: 96%;
        margin: 2%;
        float: none;
        padding: 0 0 10px 0;
    }

    /* 商品ラインナップボタン */
    div.main-box-work-l {
        width: 80%;
        margin: 0 auto;
        float: none;
    }

    div.main-box-work-r {
        width: 80%;
        margin: 0 auto;
        float: none;
    }

    a.lineup-btn,
    a.estimate-btn {
        width: 100% !important;
        height: 20.4vw !important;
        background-size: cover !important;
    }

    div.main-box h3:not(.sub-title) {
        background: none;
        width: 96%;
        height: auto;
        padding: 2%;
        font-size: 0.9em;
        text-align: center;
        color: #ffffff;
        background-color: #2d62a3;
        margin: 30px 0 10px;
        font-weight: bold;
    }

    div.list-info {
        font-size: 0.9em;
        text-align: center;
        padding: 2%;
    }

    div.main-box {
        width: 100% !important;
    }

    div.main-box table {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    div.main-box table th {
        padding: 5% 0;
        font-size: 0.9em !important;
    }

    div.main-box table td.main-box-w:nth-child(1n) {
        width: 100px !important;
    }

    td.main-box-td-2 {
        background-color: #ffffff;
    }

    td.main-box-td-2 div {
        margin: 5% 0;
    }

    /* カラーから選ぶ */
    div.color-box-l a.color-p-btn {
        width: 84%;
        height: 4vw;
        margin: 3% auto 5%;
    }

    div.color-box-r a.color-g-btn {
        width: 62%;
        height: 4vw;
        margin: 0 auto;
    }

    a.color-g-btn,
    a.color-a-btn {
        margin: 3% auto 5% !important;
    }

    .sp-clear {
        font-size: 0.6em;
        margin-top: -10px;
    }

    /* ブラックリミテッド */
    div.item-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    div.item-list-box {
        width: 48%;
    }

    div.item-list-center {
        width: 100%;
    }

    div.item-list-center p {
        width: 50% !important;
        margin: 3% auto 0 !important;
    }

    div.item-list-left {
        width: 100%;
        margin: 5% 0;
        padding: 0;
    }

    div.item-list-right {
        width: 100%;
        margin: 5% 0;
        padding: 0;
    }

    td.main-box-w {
        width: 25% !important;
        font-size: 0.7em;
        padding: 1%;
    }

    td.main-box-w img {
        width: 90% !important;
    }

    td.main-box-td-2 {
        width: 30%;
        padding: 1%;
    }

    a.list-btn-red {
        width: 100%;
        height: 6vw;
        background-size: cover;
    }

    a.list-btn-green {
        width: 100%;
        height: 9vw;
        background-size: cover;
    }

    /*  ガスコンロ商品詳細 天板リンク*/
    div.color-box-l a.top-board-link,
    div.color-box-r a.top-board-link {
        background-repeat: no-repeat;
        background-position: top center;
        margin: 3% auto 5%;
    }

    .outline_orange:hover {
        outline: 5px solid #ff5600;
        outline-offset: -5px;
    }

    img.text-free-btn {
        width: 98%;
        padding: 0 1% 1%;
    }

    a.free-btn {
        background: url(/gasconro/img/gasconro/free_btn.gif);
        width: 81%;
        background-size: cover;
        background-repeat: no-repeat;
        height: 18.7vw;
        display: block;
        text-indent: -9999px;
        text-decoration: none;
        margin: 0 auto 3%;
    }

    a.free-btn:hover {
        background-position: left bottom;
    }

    #main h3.type-title {
        color: #333;
        background-color: #e8e8e8;
        padding: 1.5% 2%;
        border-radius: 5px 5px 0 0;
        margin-bottom: 0;
        font-size: 14px;
    }

    h3.type-title strong {
        font-size: 1.1em;
    }

    .frame-gray-box {
        background-color: #fff;
        position: relative;
        width: 90%;
        padding: 2% 4%;
        margin: auto auto 30px;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        box-sizing: content-box;
    }

    .frame-gray-box::after {
        content: '';
        position: absolute;
        background-color: #e8e8e8;
        width: calc(100% + 2%);
        height: calc(100% + 2%);
        z-index: -2;
        top: -6px;
        left: -1%;
        display: inline-block;
        border-radius: 5px;
    }

    .frame-gray-box h4 {
        text-align: center;
        position: relative;
        border-bottom: 1px solid #d0d0d0;
        padding-bottom: 5px;
        margin: 10px auto 15px;
        font-size: 15px;
    }

    .frame-gray-box h4:hover {
        color: #ff5803;
        cursor: pointer;
    }

    .frame-gray-box h4::after {
        content: url(/gasconro/img/icon_file.gif);
        display: inline-block;
        padding-left: 1%;
        vertical-align: top;
    }

    .frame-gray-box h4:hover::after {
        content: url(/gasconro/img/icon_file_o.gif);
    }

    #contents .frame-gray-box h4 ~ p {
        text-align: center;
        color: #333;
        font-weight: bold;
        background-color: #e8e8e8;
        line-height: 1.6em;
        padding: 0;
        margin: 10px auto 15px;
    }

    .series-list {
        width: 96%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 2%;
    }

    .series-list ~ span {
        font-size: 12px;
    }

    .series-list li {
        margin-bottom: 14px;
        display: inline-block;
        max-width: 48%;
    }

    .series-list li.colum {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }

    .series-list li a {
        display: inline-block;
    }

    .series-list a:hover {
        outline: solid #ff5803 5px;
        outline-offset: -5px;
    }

    .series-list li.colum a:first-of-type {
        margin-bottom: 5px;
    }

    .series-list li.colum a:not(:first-of-type):hover {
        outline: none;
    }

    #contents .series-list a img {
        width: 100%;
    }

    .main-box-contents {
        display: inline-flex;
        width: 96%;
        padding: 1% 2% 0;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-direction: column;
    }
    .main-box-contents li {
        width: 100%;
        display: inline-flex;
        flex-direction: column;
        margin-bottom: 2%;
        align-items: center;
    }
    #contents .main-box-contents img {
        width: 90%;
    }
    #contents .main-box-contents li p {
        width: 90%;
        margin: 2% 0;
        line-height: 1.5;
        font-size: .8em;
    }
    .main-box-contents strong {
        display: block;
        font-size: 15px;
        padding-bottom: 3px;
        color: #66992d;
    }
    .main-box-contents strong span {
        font-size: 13px;
        padding-left: 5px;
    }

    .main-box-contents-580 {
        width: 90%;
        padding: 1% 2% 0;
        margin: 0 auto;
        align-items: center;
    }
    #contents .main-box-contents-580 img {
        width: 100%;
    }
    
    .main-box-b-btn {
        display: inline-flex;
        width: 100%;
        justify-content: space-around;
    }

    a.btn-lineup,
    a.btn-estimate {
        text-indent: -9999px;
        text-decoration: none;
        background-size: cover;
        width: 47%;
        height: 12vw;
        margin-bottom: 20px;
    }

    a.btn-lineup {
        background-image: url(/gasconro/img/item_lineup.gif);
    }

    a.btn-estimate {
        background-image: url(/gasconro/img/work_estimate.gif);
    }

    .series-list li.colum .btn-red,
    .series-list li.colum .btn-green {
        width: 100%;
        height: auto;
        text-indent: -9999px;
        text-decoration: none;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto 10px;
    }

    .series-list li.colum .btn-red {
        background-image: url(/gasconro/img/list_btn_redlong.gif);
        height: auto;
    }

    .series-list li.colum .btn-green {
        background-image: url(/gasconro/img/list_btn_greenlong.gif);
        height: 9.8vw;
    }

    .series-list li.columa .btn-red:hover,
    .series-list li.columa .btn-green:hover {
        background-position: left bottom;
    }
    .thumbnail {
        width: 96%;
        text-align: center;
        padding: 0 2%;
    }
    .thumbnail a {
        display: inline-block;
    }
    #contents .thumbnail img {
        max-width: 100%;
    }
    /*デリシア*/
    #main div.select-box {
        width: 100%;
        padding: 0;
        margin-bottom: 30px;
        border: 1px solid #2d62a3;
        box-sizing: border-box;
    }
    #main .select-box h3 {
        display: block;
        background-color: #2d62a3;
        padding: 2% 0;
        color: #fff;
        font-size: 18px;
        text-align: center;
        font-weight: normal;
        margin-bottom: 0;
        margin-bottom: 0;
    }
    .select-box .flex-wrap {
        width: 100%;
        padding: 2% 0 3%;
        border-bottom: 1px dotted #2d62a3;
        justify-content: center;
    }
    .select-box .flex-wrap p {
        display: block;
        text-align: center;
        background-color: #eee;
        padding: 1% 0;
    }
    .select-box .flex-wrap:last-of-type {
        padding-bottom: 3%;
        border-bottom: none;
    }
    .select-box .flex-wrap p {
        width: 25%;
        font-weight: bold;
    }
    .select-box .flex-wrap ul {
        width: 96%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    div.select-box.select-box div {
        height: auto;
    }
    .select-box li input + label,
    ul.select4 li input + label {
        display: inline-block;
        width: 175px;
        height: 32px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin-top: 5px;
        cursor: pointer;
    }
    ul.select4 li input + label {
        width: 85px;
        height: 50px;
    }
    .select-box li {
        background-repeat: no-repeat;
        background-position: center center; 
    }
    .select-box .select1 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select1.jpg');
    }
    .select-box .select1 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select2.jpg');
    }
    .select-box .select2 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select3.jpg');
    }
    .select-box .select2 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select4.jpg');
    }
    .select-box .select3 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select5.jpg');
    }
    .select-box .select3 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select6.jpg');
    }

    .select-box .select4 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_color_aw.jpg')
    }
    .select-box .select4 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_color_as.jpg');
    }
    .select-box .select4 li:nth-of-type(3) {
        background-image:url('/gasconro/img/delicia_color_hd.jpg');
    }
    .select-box .select4 li:nth-of-type(4) {
        background-image:url('/gasconro/img/delicia_color_cb.jpg');
    }
    .select-box .select4 li:nth-of-type(5) {
        background-image:url('/gasconro/img/delicia_color_pm.jpg');
    }
    .select-box .select4 li:nth-of-type(6) {
        background-image:url('/gasconro/img/delicia_color_sc.jpg')
    }
    .select-box .select4 li:nth-of-type(7) {
        background-image:url('/gasconro/img/delicia_color_ts.jpg')
    }
    .select-box .select4 li:nth-of-type(8) {
        background-image:url('/gasconro/img/delicia_color_nb.jpg')
    }

    .select-box .select5 li:nth-of-type(1) {
        background-image:url('/gasconro/img/delicia_select13.jpg');
    }
    .select-box .select5 li:nth-of-type(2) {
        background-image:url('/gasconro/img/delicia_select14.jpg');
    }

    .type-name {
        display: block;
        font-size: 15px;
        color: #1254a4;
        font-weight: bold;
        text-align: center;
        margin-bottom: -10px;
    }
    .type-name .red {
        font-size: .85em;
    }
    .type-name span:not(.red) {
        font-size: .85em;
        color: #333;
    }
    .flex-wrap {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .flex-box.design {
        width: 96%;
        padding: 0 2%;
    }
    #contents .flex-box.design ~ img {
        max-width: 100%;
        align-self: center;
        margin: auto;
    }
    .flex-box.design h4,h4.rod {
        border-left: #ff0000 5px solid;
        padding-left: 7px;
        padding-top: 2px;
        font-size: 14px;
        margin:20px auto 5px;
    }
    h4.rod {
        margin: 10px 2% 5px;
    }
    h4.rod > p {
        margin-bottom: 10px;
    }
    .new-line-up .flex-box {
        padding-top: 1.5em;
        position: relative;
        width: 80%;
        margin: 10px auto;
    }
    .new-line-up div a {
        display: inline-block;
        font-weight: bold;
        font-size: .8em;
    }
    #contents .new-line-up img {
        margin: 0 auto 5px;
        display: block;
    }
    .new-line-up img:hover {
        opacity: .9;    
    }
    .new-line-up div span {
        display: block;
        font-size: .8em;
        line-height: 1.4;
        margin-bottom: 5px;
        text-align: center;
    }

    .new-line-up a::before {
        content: '●';
        font-size: .8em;
        padding-right: 5px;
        color: #b0b0b0;
    }
    .new-line-up a:hover {
        background-color: #efefef;
    }
    .new-line-up a:hover::before {
        color: #ff5600;
    }
    .new-line-up a:hover {
        text-decoration: none;
    }
    .new-line-up div:not(:last-of-type)::after {
        color: #fff;
        content: 'NEW';
        font-size: 13px;
        padding: 1px 6px;
        background-color: #ea0015;
        top: 0;
        left: 5px;
        position: absolute;
    }
    #contents .detail-box h4~img,
    #contents .detail-box h4~div img{
        max-width: 96%;
        margin: .3rem auto 1.5rem;
    }
}