.layout_table {
    width: 1000px;
    margin: 0 auto;
}

/****************************************
top+
****************************************/
/* ショップ紹介 */
.proshop-bg {
    background: url(http://www.nippon-olive.co.jp/oliveoil/images/proshop-bg.png) no-repeat center top 84px;
	margin-bottom: 50px;
}
.proshop-content {
	margin-bottom: 30px;
	padding-top: 90px;
}
.proshop-txt {
    width: 365px;
    text-align: left;
    font-size: 15px;
    margin: 0 0 0 auto;
}

.proshop img {
    max-width: 100%;
}


/****************************************
common
****************************************/

.feeling_ttl {
    background: url(https://secure1.future-shop.jp/~ushimado/images/item-detail/feeling_ttl_bg.png);
    width: 370px;
    height: 56px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 2.8;
    font-weight: bold;
    color: #fff;
}

.col5-layout {
    width: 100%;
    display: table;
    table-layout: fixed;
    list-style: none;
    border-collapse: separate;
    /* セルの間隔を空ける */
    border-spacing: 15px 0;
    /* 左右 上下で記述 */
}

.col5-layout li {
    display: table-cell;
    width: 20%;
    padding: 10px 0;
}

.col-a23a5e {
    color: #a23a5e;
}

.col5-layout dt, .col5-layout dd {
    max-width: 180px;
}

.tell_oil:before {
    content: "";
    background: url(https://secure1.future-shop.jp/~ushimado/images/common/icon_tel_oil.png) top left no-repeat;
    background-size: contain;
    display: inline-block;
    position: relative;
    top: 2px;
    left: -5px;
    width: 34px;
    height: 20px;
}

/****************************************
tab
****************************************/

#tab-menu {
    width: 100%;
    display: table;
    table-layout: fixed;
    list-style: none;
    border-collapse: separate;
    /* セルの間隔を空ける */
    border-spacing: 15px 0;
    /* 左右 上下で記述 */
}

#tab-menu li {
    display: table-cell;
    width: 20%;
    padding: 11px 0 7px;
    background: #cecebe;
    color: #fff;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    font-size: 16px;
}

#tab-menu li.active,
#tab-menu li:hover {
    background: #6c9a35;
    color: #fff;
}


/* タブの中身 */

#tab-box {}

#tab-box div {
    display: none;
    position: relative;
    width: 1000px;
    height: 713px;
    background: url(https://secure1.future-shop.jp/~ushimado/images/item-detail/use-step_bg.jpg);
}


/*************************************
step-item
*************************************/

span.step-box {
    position: absolute;
    padding: 12px;
    text-align: center;
}

span.step-box.bg-b {
    background: #fbfaf5;
}

span.step-box a {
    font-size: 11px;
    color: #333;
    text-decoration: underline;
}

span.step-box a:hover {
    text-decoration: none;
    cursor: pointer;
}


/*************************************
保湿
*************************************/


/* step_01 */

span.step-box.step01-01 {
    left: 20px;
}

span.step-box.step01-02 {
    top: 260px;
    left: 20px;
}

span.step-box.step01-03 {
    top: 540px;
    left: 20px;
}


/* step_01 エイジング */

span.step-box.step01-01-aging {
    top: 130px;
    left: 20px;
}

span.step-box.step01-02-aging {
    top: 410px;
    left: 20px;
}


/* step_01 敏感肌 */

span.step-box.step01-02-sensitive {
    top: 410px;
    left: 5px;
}


/* step_01 くすみ */

span.step-box.step01-01-somberness {
    top: 130px;
    left: 20px;
}

span.step-box.step01-02-somberness {
    top: 410px;
    left: 20px;
}


/* step_02 */

span.step-box.step02-01 {
    top: 130px;
    left: 156px;
}

span.step-box.step02-02 {
    top: 410px;
    left: 156px;
}


/* step_02 エイジング */

span.step-box.step02-02-aging {
    top: 410px;
    left: 174px;
}


/* step_02 敏感肌 */

span.step-box.step02-02-sensitive {
    top: 410px;
    left: 150px;
}


/* step_03 */

span.step-box.step03-01 {
    top: 0px;
    left: 300px;
}

span.step-box.step03-02 {
    top: 210px;
    left: 294px;
}

span.step-box.step03-02 span.double-item {
    position: relative;
    display: block;
    height: 93px;
}

span.step-box.step03-02 img.item-left {
    position: absolute;
    top: 2px;
    left: 2px;
}

span.step-box.step03-02 img.item-right {
    position: absolute;
    top: 0;
    left: 67px;
}

span.step-box.step03-03 {
    top: 475px;
    left: 290px;
}

span.step-box.step03-03 span.double-item {
    position: relative;
    display: block;
    height: 97px;
}

span.step-box.step03-03 img.item-left {
    position: absolute;
    top: 3px;
    left: 2px;
}

span.step-box.step03-03 img.item-right {
    position: absolute;
    top: 2px;
    left: 68px;
}


/* step_03 エイジング */

span.step-box.step03-01-aging {
    top: 130px;
    left: 305px;
}

span.step-box.step03-02-aging {
    top: 410px;
    left: 290px;
}

span.step-box.step03-02-aging span.double-item {
    position: relative;
    display: block;
    height: 97px;
}

span.step-box.step03-02-aging img.item-left {
    position: absolute;
    top: 3px;
    left: 2px;
}

span.step-box.step03-02-aging img.item-right {
    position: absolute;
    top: 2px;
    left: 68px;
}



/* step_04 */

span.step-box.step04-01 {
    top: 130px;
    left: 440px;
}

span.step-box.step04-02 {
    top: 410px;
    left: 460px;
}


/* step_04 エイジング */

span.step-box.step04-01-aging {
    top: 280px;
    left: 460px;
}


/* step_04 敏感肌 */

span.step-box.step04-01-sensitive {
    left: 440px;
}

span.step-box.step04-02-sensitive {
    top: 260px;
    left: 440px;
}

span.step-box.step04-03-sensitive {
    top: 530px;
    left: 438px;
}


/* step_05 */

span.step-box.step05-01 {
    top: 130px;
    left: 580px;
}

span.step-box.step05-02 {
    top: 410px;
    left: 615px;
}


/* step_05 エイジング */

span.step-box.step05-01-aging {
    top: 130px;
    left: 610px;
}

span.step-box.step05-02-aging {
    top: 410px;
    left: 610px;
}


/* step_05 敏感肌 */

span.step-box.step05-01-sensitive {
    top: 130px;
    left: 595px;
}

span.step-box.step05-02-sensitive {
    top: 410px;
    left: 580px;
}


/* step_05 くすみ */

span.step-box.step05-01-somberness {
    top: 130px;
    left: 585px;
}


/* step_06 */

span.step-box.step06-01 {
    top: 130px;
    left: 720px;
}

span.step-box.step06-02 {
    top: 410px;
    left: 734px;
}


/* step_06 エイジング */

span.step-box.step06-01-aging {
    top: 330px;
    left: 740px;
}


/* step_06 敏感肌 */

span.step-box.step06-01-sensitive {
    top: 130px;
    left: 720px;
}

span.step-box.step06-02-sensitive {
    top: 420px;
    left: 734px;
}


/* step_06 くすみ */

span.step-box.step06-01-somberness {
    top: 160px;
    left: 732px;
}

span.step-box.step06-02-somberness {
    top: 465px;
    left: 738px;
}


/* step_07 */

span.step-box.step07-01 {
    top: 130px;
    left: 875px;
}

span.step-box.step07-02 {
    top: 410px;
    left: 890px;
}


/* step_07 エイジング */

span.step-box.step07-01-aging {
    top: 10px;
    left: 876px;
}

span.step-box.step07-02-aging {
    top: 282px;
    left: 890px;
}

span.step-box.step07-03-aging {
    top: 540px;
    left: 900px;
}


/* step_07 敏感肌 */

span.step-box.step07-01-sensitive {
    top: 130px;
    left: 875px;
}

span.step-box.step07-02-sensitive {
    top: 410px;
    left: 890px;
}


span.step-box.step02-01-simplecare {
    top: 177px;
    left: 166px;
}

span.step-box.step04-01-simplecare {
    top: 10px;
    left: 464px;
}

span.step-box.step04-02-simplecare {
    top: 280px;
    left: 441px;
}

span.step-box.step04-03-simplecare {
    top: 524px;
    left: 442px;
}

span.step-box.step05-01-simplecare {
    top: 10px;
    left: 585px;
}

span.step-box.step05-02-simplecare {
    top: 276px;
    left: 590px;
}

span.step-box.step05-03-simplecare {
    top: 524px;
    left: 596px;
}

span.step-box.step06-01-simplecare {
    top: 258px;
    left: 719px;
}

/*************************************

*************************************/

#tab-box div.active {
    display: block;
}

@media (max-width: 767px) {

/* ショップ紹介 */
.proshop-bg {
		background: url(http://www.nippon-olive.co.jp/oliveoil/images/sp_proshop-bg.png) no-repeat center top 79px;
		background-size: 100%;
		margin-bottom: 40px;
}
.proshop-content {
		margin-bottom: 10px;
		padding-top: 40px;
}

.proshop h2.ttl {
    display: block;
    padding: 5px 0 5px 30px;
    position: relative;
    border-bottom: 4px solid #888364;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    font-size: 15px;
}
.proshop h2.ttl:before {
    content: "";
    position: relative;
    top: 12px;
    background: url(https://secure1.future-shop.jp/~ushimado/images/top/icon_h2_ttl.png) top 10px left no-repeat;
    background-size: 25px 25px;
    padding: 10px 0;
    padding-left: 30px;
		margin-left: -30px;
}

.proshop-txt {
    width: 60%;
    text-align: left;
    font-size: 12px;
    float: right;
    line-height: 1.3;
}


*************************************/
/* ドロワーメニュー調整*/ 
    .drawerFixed {
      position: fixed;
    }

    .drawer--top .drawer-nav {
      overflow: scroll;
    }

   .row.row-center.img-sns img {
       width: 50%;
   }


document.write('<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>');
document.write('<script src="https://secure1.future-shop.jp/~ushimado/js/drawer.js"></script>');
document.write('<script src="https://secure1.future-shop.jp/~ushimado/js/iscroll.js"></script>');
document.write('<script src="https://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.5/dropdown.min.js"></script>');
document.write('<script src="https://secure1.future-shop.jp/~ushimado/js/scriptcode.js"></script>');

    $(function() {
        $('#tab-menu li').on('click', function() {
            if ($(this).not('active')) {
                // タブメニュー
                $(this).addClass('active').siblings('li').removeClass('active');
                // タブの中身
                var index = $('#tab-menu li').index(this);
                $('#tab-box div').eq(index).addClass('active').siblings('div').removeClass('active');
            }
        });
    });

　/* ドロワーメニュー調整*/ 

    $('.drawer-hamburger').on('click', function () {
      $('body').addClass('drawerFixed');
    });
    $('.btn-close').on('click', function () {
      $('body').removeClass('drawerFixed');
    });

    $(window).on("load orientationchange resize", function () {
      if (Math.abs(window.orientation) === 90) {
        $('body').removeClass('drawerFixed');
      } else {
        $('body').removeClass('drawerFixed');
      }
    });

*************************************/
/* ドロワーメニューアイコン*/ 

/*!------------------------------------*\
    追加css
\*!------------------------------------*/
@media (max-width: 767px) {

.drawer-menu li {
    background-color: #FBFAF5;
    position: relative;
}

.drawer-menu li a {
    display: block;
    width: 100%;
    padding: 10px 0 10px 50px;
    font-size: 13px;
}
.drawer-menu li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    display: inline-block;
}

.drawer-menu > li {
    background-color: #FBFAF5;
    position: relative;
		border-bottom: 1px solid #c0bba5;
}

.drawer-menu * li {
    border-top: 1px solid #c0bba5;
}

.drawer-menu .cat-ttl {
		background-color: #F8F5E6;
    padding: 10px 0 10px 50px;
}


.drawer-menu li.close a {
    display: block;
    width: 100%;
    padding: 0;
}

.drawer-menu li.close {
    padding: 20px 0;
}
.drawer-menu li.close a.btn-close {
    display: block;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    background: #66a03e;
		text-align: center;
    color: #fff;
}
.drawer-menu li.close a:before,
.drawer-menu li.close a:after {
		content: "";
		display: none;
}



/* 大カテゴリアイコン */
.allitem > a:before {
    background: url(../images/common/sp_icon_allitem.svg) no-repeat top 5px left 12px, #888365;
    background-size: 20px;
}

.skin-cate > a:before {
    background: url(../images/common/sp_icon_skin.svg) no-repeat top 5px left 8px, #888365;
    background-size: 23px;
}

.step-cate > a:before {
    background: url(../images/common/sp_icon_step.svg) no-repeat top 6px left 5px, #888365;
    background-size: 29px;
}

.bath > a:before {
    background: url(../images/common/sp_icon_bath.svg) no-repeat top 7px left 8px, #888365;
    background-size: 23px;
}

.olive01 > a:before {
    background: url(../images/common/sp_icon_olive01.svg) no-repeat top 5px left 15px, #888365;
    background-size: 9px;
}

.olive02 > a:before {
    background: url(../images/common/sp_icon_olive02.svg) no-repeat top 10px left 8px, #888365;
    background-size: 24px;
}

.gift > a:before {
    background: url(../images/common/sp_icon_gift.svg) no-repeat top 10px left 8px, #888365;
    background-size: 24px;
}

.itemlist > a:before {
    background: url(../images/common/sp_icon_itemlist.svg) no-repeat top 10px left 8px;
    background-size: 23px;
}
.mail > a:before {
    background: url(../images/common/sp_icon_mail.svg) no-repeat top 11px left 10px;
    background-size: 20px;
}
.guide > a:before {
    background: url(../images/common/sp_icon_guide.svg) no-repeat top 10px left 13px;
    background-size: 15px;
}

.contact > a:before {
    background: url(../images/common/sp_icon_contact.svg) no-repeat top 8px left 10px;
    background-size: 20px;
}

.qanda > a:before {
    background: url(../images/common/sp_icon_qanda.svg) no-repeat top 9px left 10px;
    background-size: 23px;
}

/* 子カテゴリアイコン */
.prooliveoil > a:before {
    background: url(../images/common/sp_icon_prooliveoil.png) no-repeat top left;
    background-size: 40px;
}
.mushroom > a:before {
    background: url(../images/common/sp_icon_mushroom.png) no-repeat top left;
    background-size: 40px;
}
.minoliveoil > a:before {
    background: url(../images/common/sp_icon_oliveoil.png) no-repeat top left;
    background-size: 40px;
}
.dressing > a:before {
    background: url(../images/common/sp_icon_dressing.png) no-repeat top left;
    background-size: 40px;
}
.progift > a:before {
    background: url(../images/common/sp_icon_olivegift.png) no-repeat top left;
    background-size: 40px;
}
}