@charset "utf-8";

/* ============================================================
      ショッピングコンテンツ
============================================================ */
.grayBase{background-color: #f5f5f5;}
#main{width: 1000px;margin:auto;height: auto; padding: 50px 0;}
.shoppingTtl{font-size: 20px;color: #333;margin-bottom: 18px;}
.productNum{font-size: 20px;color: #999;margin-left: 12px;}
.products{display: table;margin-bottom: 40px;padding: 16px;width: 1000px;height: auto;background-color: white;border-bottom: 2px solid #e7e7e7;border-radius: 4px;}
/* .products左側 */
.produstImg{display: table-cell;width: 500px;vertical-align: top;padding-right: 16px;}
.produstImg img{border-radius: 4px;}
/* .products右側 */
.productDetail{display: table-cell;position: relative;}
.produstName{min-height: 50px;font-size: 18px;color: #333;margin: 15px 0;line-height: 1.4;}
.produstName-link{color: #333333;}
.produstName-link:hover{text-decoration: none;}
.productPriceWrap{margin-bottom: 15px;}
.productPrice{font-size: 30px;color: #333;letter-spacing: 1px;}
.taxSpan{font-size: 14px;margin-left: -3px;}
.abstractSpan{margin-right: 5px;font-size: 14px;color: #939393;}
.stock{font-size: 14px;color: #fb2a79;}
.productDelivery{color: #939393;font-size: 14px;margin-bottom: 18px;}
.icon_delivery{display: inline-block;position: relative;top: 2px;width: 17px;height: 17px;background: url("../../img/shopping/icon_delivery02.png") no-repeat 0 0;}
/*  以下コメントアウトは取りあえず入れないlike */
/*
.likeHeartIcon{font-size: 20px;color: #979797;}
*/
.buyBtn,.outStockBtn{display: block;margin-bottom: 20px;width: 168px;height: 48px;border-radius: 2px;line-height: 46px;text-align: center;float: right;}

.productText{position: relative;display: flex;display: -webkit-flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;align-content: space-between;clear: right;padding: 15px;background-color: #f9f9f9;border-radius: 2px;}
.detailText{width: 375px;height: 100%!important;font-size: 12px;color: #9b9b9b;line-height: 1.6;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.paragraph{display: inline-block;margin-bottom: 18px;}

/* 説明文表示の三角ボタン */
.circle{width: 30px;height: 30px;border: 1px solid #c7c7c7;border-radius: 100%;background: white;cursor: pointer;}
.hoverCircle{background: #f7c600;border: 1px solid #f7c600;}
.closeReturnArrow{float: right;width: 0;height: 0;border: 6px solid transparent;border-top: 9px solid #c7c7c7;margin-right: 8px;margin-top: 2px;transform-origin: center center;-webkit-transform-origin: center center;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.hoverArrow{border-top: 9px solid white!important;}

/* js */
.deployment{margin-right: 8px;margin-top: 10px;-webkit-transform: rotate(0deg);transform: rotate(0deg);}
.textOn{height: 295px;overflow: hidden;padding: 10px!important;}
.textInOn{position: relative;padding: 5px;overflow-y: hidden;overflow-x: hidden;width: 380px;height: 295px;text-overflow: initial;display: inline-block;-webkit-box-orient: initial;-webkit-line-clamp: initial;}
.top{position: absolute;top: 18px;right: 15px;}

/* ============================================================
 perfect scroll bar
============================================================ */
.ps-container .ps-scrollbar-y {right: 0!important;width: 4px!important;margin-top: 10px!important;background-color: #9b9b9b!important;}
.ps-scrollbar-x{display: none;}

/* ============================================================
 商品の下部分
============================================================ */
.mailIcon{display: inline-block;margin-right: 8px;width: 18px;height: 13px;background: url("../../img/shopping/icon_mail.png") no-repeat 0 0;}
.contact{float: left;margin-top: 14px;font-size: 14px;color: #333;}
.contact:hover{text-decoration: none;opacity: 0.8;}

/* ============================================================
 sns
============================================================ */
.embedded{float: right;display: flex;display: -webkit-flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;align-content: space-between; width: 268px;}
.embedded a:hover{opacity: 0.8;}
.shopping-share{width: 29px;height: 29px;border-radius: 29px;}
.shopping-share-icons{width: 15px;height: 15px;fill: #fff;margin-left:7px;margin-top:7px;}
.facebook{background-color: #3b5998}
.twitter{background-color: #55acee;}
.twitter-icon{width: 16px;height: 16px;}
.hatena{background-color: #00a4de;}
.ameba{background-color: #2d8c3c;}
.ameba-icon{position:relative;width: 17px;height: 17px;top: -1px;left: -1px;}
.google{background-color: #dd4b39;}
.google-icon{margin-left: 8px;}
.widget{margin-left: 10px;background-color: #FF8909;}
.embedded span{font-size: 11px;color: #a7a7a7;}

/* ============================================================
 特商法
============================================================ */
.tradingCertificate{margin-top: 45px;border-top: 1px solid #e6e6e6;}
.tradingCertificateTtl{margin: 40px 0 20px;font-size: 20px;color: #333;}
/* テーブル */
fieldset{background-color: white;padding: 20px;border-radius: 4px;}
.actTable{border-spacing: 0;font-size: 12px;margin-bottom: 19px;}
.actTable a{color: #919191;}
.actTable th{width: 199px;color: #626262;padding: 10px;background: #fcfcfc;border: 1px solid #E8EDEF;vertical-align: middle;text-align: left;}
.actTable tr td{width: 280px;padding: 10px;border: 1px solid #E8EDEF;line-height: 1.5em;color: #919191;}
.actTable tr{background: #fff;}

.actTableUnder{width: 100%;border-spacing: 0;font-size: 12px;}
.actTableUnder th{color: #626262;padding: 10px;background: #fcfcfc;border: 1px solid #E8EDEF;vertical-align: middle;text-align: left;}
.actTableUnder tr td{padding: 10px;border: 1px solid #E8EDEF;line-height: 1.5em;color: #919191;}
.actTableUnder tr{background: #fff;}

/* ============================================================
 お問い合わせ
============================================================ */
#contact_me{cursor: pointer;}
#contact_me_box{position: absolute;top: 70px;background: #fff;border-radius: 4px;z-index: 10000;width: 560px;height: 540px;padding: 35px;left: 50%;margin: 0 0 0 -280px;}
#contact_me_box_confirm{position: absolute;background: #f4f4f4;border-radius: 4px;z-index: 10000;width: 560px;height: 214px;padding: 35px;top: 50%;left: 50%;margin: -107px 0 0 -280px;}
#contact_me_overlay{position: fixed;z-index: 9999;top: 0px;left: 0px;height: 100%;width: 100%;background: #000;display: none;opacity: 0.8;}
.contact_me_ttl{font-size: 30px;margin: 25px auto 30px auto;color: rgb(75, 75, 75);text-align: center;}
.contact_me_ttl02{width: 440px;margin: auto;font-size: 16px;margin-bottom: 10px;}
#message_content{width: 440px;height: 200px;border: 1px solid #d8d8d8;border-radius: 4px;background: #fcfcfc;margin: auto;display: block;font-size: 15px;color: #333333;padding: 10px;resize: none;}
.contact_me_count{width: 440px;margin: auto;font-size: 14px;text-align: right;margin-top: 12px;}
#message_post,#url_confirm{display: block;border: none;cursor: pointer;outline: none;right: 0px;color: white;font-size: 20px;border-radius: 2px;line-height: 59px;height: 59px;width: 440px;background: #f7c600;position: relative;margin: 20px auto 29px auto;text-align: center;}
#message_post:hover,#url_confirm:hover{opacity: 0.7;text-decoration: none;}
.contact_me_modal_close{position: absolute;top: -32px;right: 0px;display: block;z-index: 2;cursor: pointer;z-index: 9999;overflow: visible;}
.contact_me_modal_close_btn{width: 16px;height: 16px;fill: #ffffff;}
.contact_me_modal_close:hover{opacity: 0.8;}
#message_error{display: block;background: #ed5565;padding: 6px 10px;color: white;font-size: 11px;border-radius: 4px;width: 440px;margin: -17px auto 14px auto;}
.contact_me_loadingBase{}
.contact_me_loadingBase:after{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url("../../img/common_loading.gif") no-repeat center center rgba(0, 0, 0, 0.8);z-index: 10000;border-radius: 4px;}

/* ============================================================
   ウィジェットのベース
============================================================ */
.modal_text{margin-top: 20px;margin-bottom: 20px;}
 #iframeBase{width: 1100px;padding: 20px;display: none;background: #FFF;border-radius: 4px;box-shadow: 0 3px 0px #e3e4e8;background: #f5f5f5;}
#lean_overlay{position: fixed;z-index: 10000;top: 0px;left: 0px;height: 100%;width: 100%;background: #000;display: none;}
.modal_close{position: absolute;top: -40px;right: 0px;display: block;width: 20px;height: 20px;z-index: 2;cursor: pointer;z-index: 9999;overflow: visible;fill: #fff;}
.modal_close:hover{opacity: 0.8;}

/* ============================================================
  ウィジェットリスト切り替え
============================================================ */
.boxcDiplay{}
.boxcDiplay > div: not(.typeA){display: none;}
.boxcDiplay > div{background: white;padding: 20px;border-radius: 2px;-webkit-border-radius: 2px;-o-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;}
.tabs{width: 100%;border-radius: 2px;}
.tabs li{display: inline-block;width: 150px;padding: 13px;text-align: center;font-size: 14px;font-size: 1.4rem;background: #4fc1e9;cursor: pointer;position: relative;border-right: 1px solid #EAEEF0;border-radius: 4px 4px 0 0;margin-right: 10px;color: white;}
.tabs li:hover{background: #1ad4ff;}
.tabs li:hover:after{position: absolute;left: 50%;top: 100%;border: 8px solid transparent;border-top: 8px solid #4fc1e9;margin-left: -8px;width: 13px;}
.tabs li:first-child{}
.tabs li: last-child{border: none;}
.baGray{background: white !important;color: #333333 !important;}
.baGray:after{position: absolute;left: 50%;top: 100%;border: 8px solid transparent;border-top: 8px solid #4fc1e9;margin-left: -8px;width: 13px;}

/* ============================================================
  ウィジェットリスト
============================================================ */
.bnnerArea{}
.mb{margin-bottom: 20px;}
.bnnerAreaIn div{}
.bnnerAreaInL{margin-right: 20px;}
.bnnerAreaInL,.bnnerAreaInR{float: left;}
.wighetText310{border: solid 1px #DBDBDB;border-radius: 3px;font-size: 14px;height: 106px;outline: none;padding: 15px;line-height: 1.8;width: 683px;margin-top: 127px;}
.wighetText160{border: solid 1px #DBDBDB;border-radius: 3px;font-size: 14px;height: 106px;outline: none;padding: 15px;line-height: 1.8;width: 831px;margin-top: 130px;}
.wighetText460{border: solid 1px #DBDBDB;border-radius: 3px;font-size: 14px;height: 106px;outline: none;padding: 15px;line-height: 1.8;width: 533px;margin-top: 46px;}
.wighetText160_02{border: solid 1px #DBDBDB;border-radius: 3px;font-size: 14px;height: 106px;outline: none;padding: 15px;line-height: 1.8;width: 831px;margin-top: 28px;}
.wighetText1000{border: solid 1px #DBDBDB;padding: 6px;font-size: 12px;border-radius: 3px;width: 100%;font-size: 14px;height: auto;outline: none;padding: 15px;line-height: 1.8;}