﻿/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffbecd !important;
}

.validation-summary-errors {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.soryoTrue {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #FFF;
    height: 100px;
    border-radius: 10px;
    font-size: 23px;
    text-align:center;
    background-color: #FF3333;
    border-color: #FF3333;
}

.validation-summary-valid {
    display: none;
}


ul.menu-category-list-ul {
    margin-bottom:6px;
}

li.menu-category-list-li {
    font-size:15px;
}


textarea {
    resize: none;
}

input,
select {
    vertical-align: middle;
}

input,
textarea {
    ime-mode: active;
    padding: 1px 2px;
}

input.typeCode,
textarea.typeCode {
	ime-mode:disabled;
}

input.typeNumeric,
textarea.typeNumeric {
    text-align: right;
    ime-mode: disabled;
}

.style--form_list .unit .title a.midoku-title{
    font-weight:bolder;
}

.style--form_list .unit .title a.kidoku-title{
    color: #6E6E6E;
}

.bdr-btm {
    border-bottom: 1px solid #EAEAEA;
    margin-bottom: 8px;
}
ul.sort {
    border-left: 1px solid #D7D7D7;
    padding-left: 15px;
    margin-bottom: 8px;
}
ul.sort li {
    float: left;
    border-right: 1px solid #D7D7D7;
    padding-right: 15px;
    margin-right: 15px;
}
.cf {
    display: block;
    overflow: hidden;
}
.mihasso-comment {
    display: inline-block;
    margin-top: 3px;
    padding: 3px 12px 8px 12px;
    background: #B71E1E;
    border-radius: 5px;
    font-size: 14px;
    color: #FFF;
    vertical-align: middle;
}

.mihasso-comment > .inner-comment {
    display: inline-block;
    padding: 0px 12px;
    background: #FFF;
    border-radius: 20px;
    font-size: 12px;
    color: #B71E1E;
    margin-left:5px;
    vertical-align: middle;
    text-decoration:none;
}
.mihasso-comment > .inner-comment > .material-icons{
    font-size: 20px;
    margin-right:5px;
    vertical-align: top;
}

.subtitle {
    font-weight: bold; 
    margin-top:1em; 
    margin-bottom:1em;
}

/* select修飾 */
.simpleDropdown {
	overflow: hidden;
	width: 40%;
	margin: 2em auto;
	text-align: center;
}
.simpleDropdown select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
}
.simpleDropdown select::-ms-expand {
    display: none;
}
.simpleDropdown.smplDrop01 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
}
.simpleDropdown.smplDrop01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.simpleDropdown.smplDrop01 select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}

/* おすすめ商品部、類似商品部などのブロック */
.shohinUnitBlock {
    width: 239px !important;
    height: 221px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
}
/* おすすめ商品部、類似商品部などのスクロール用左右矢印関連 */
.shohinBlockScrollArrow {
    position: relative;
    z-index: 1; 
}
.shohinBlockScrollArrow div {
    position: absolute; 
    top: 75px; 
    padding: 0; 
}
.shohinBlockScrollArrow .leftArrow {
    left: 0px; 
    float:left; 
}
.shohinBlockScrollArrow .rightArrow {
    right: 29px; 
    float:right; 
}
.shohinBlockScrollArrow span {
    position: absolute; 
    background: #ffffff; 
    padding-top: 30px; 
    padding-bottom:30px;
    padding-left: 5px;
    padding-right: 5px;
}
.shohinBlockScrollArrow .arrowSpanLeft {
    box-shadow: 2px 1px 2px gray;
}
.shohinBlockScrollArrow .arrowSpanRight {
    box-shadow: -1px 1px 2px gray;
}

/* 未発送履歴　発送済レコード背景色 */
tr.hassozumi {
	background-color: #f4f4f4;
}

/* カートの中身　クーポン用デザイン */
.style--cart_coupon {
    padding: 10px 5px 10px 15px;
    background: #EEEEEE;
    margin-top:15px;
}

.shared--tbl_2.coupon td{
    padding: 15px 2px;
}

.shared--btn_4.coupon{
    padding: 1px 5px;
    font-size:12px;
}

/* 履歴から探す sortBtn デザイン*/
.sortBtn.selectable {
    display: inline-block;
    padding: 3px 5px 7px;
    background: #FFF;
    border: 2px solid #CCC;
    border-radius: 4px 4px 4px 4px;
    font-size: 16px;
    font-weight: 500;
    color: #6c757d;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    -webkit-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease;
    cursor: pointer;
}
.sortBtn.selectable:hover {
  background: #FFF;
  border: 2px solid #87cefa;
  color: #87cefa;
}

.sortBtn {
    display: inline-block;
    padding: 3px 5px 7px;
    background: #0073BD;
    border: 5px solid #0073BD;
    border-radius: 4px 4px 4px 4px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    -webkit-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease;
}

/* 配送先設定のdatepickerカレンダー表示ボタンのレイアウト */
.ui-datepicker-trigger {
    display: inline-block;
    position: relative;
    top: -2px;
    padding: 3px 10px 4px;
    background: #B71E1E;
    border: 2px solid #B71E1E;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #FFF;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    -webkit-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease;
    vertical-align: middle; 
}
.ui-datepicker-trigger:hover {
    background: #FFF;
    color: #B71E1E; 
}
.ui-datepicker-trigger i {
    margin-right: 10px;
    vertical-align: middle; 
}

/* IEで商品一覧テーブルの縦線の長さが足りなくなる対応 */
.shohinTableColumnDl {
    height: 55px;
    display: inline-block;
}
.shohinTableColumnDl dt {
    margin-top: 15px;
}


/*slick setting*/
.slick {
    margin: auto;
    width: 90%;
}
.slick img {
    max-width: 100%;
    height: auto;
}
.slick-prev:before {
    position: relative;
    color: #000 !important;
}
.slick-next:before {
    position: relative;
    color: #000 !important;
}

.slick-prev {
    left: 190px !important;
    z-index: 10;
}

.slick-next {
    right: 190px !important;
    z-index: 10;
}


/* トップ遷移
----------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
}

#page-top a {
    text-decoration: none;
    padding: 10px 5;
    display: block;
}

#page-top a:hover {
    text-decoration: none;
}


/*マテリアルアイコン
---------------------------------------------------------*/
.mevent_note::before {
 font-family: 'Material Icons';
 content: "event_note";
}
.marrow_back::before {
 font-family: 'Material Icons';
 content: "arrow_back";
}
.madd_shopping_cart::before {
 font-family: 'Material Icons';
 content: "add_shopping_cart";
}
.mclose::before {
 font-family: 'Material Icons';
 content: "close";
}
.mremove_shopping_cart::before {
 font-family: 'Material Icons';
 content: "remove_shopping_cart";
}
.mautorenew::before {
 font-family: 'Material Icons';
 content: "autorenew";
}
.mlocal_shipping::before {
 font-family: 'Material Icons';
 content: "local_shipping";
}
.madd_circle::before {
 font-family: 'Material Icons';
 content: "add_circle";
}
.mchevron_left::before {
 font-family: 'Material Icons';
 content: "chevron_left";
}
.mkeyboard_arrow_right::before {
 font-family: 'Material Icons';
 content: "keyboard_arrow_right";
}
.msearch::before {
 font-family: 'Material Icons';
 content: "search";
}
.mstar::before {
 font-family: 'Material Icons';
 content: "star";
}
.mstar_border::before {
 font-family: 'Material Icons';
 content: "star_border";
}
.mcheck::before {
 font-family: 'Material Icons';
 content: "check";
}
.mclear::before {
 font-family: 'Material Icons';
 content: "clear";
}
.msupervisor_account::before {
 font-family: 'Material Icons';
 content: "supervisor_account";
}
.mspeaker_notes::before {
 font-family: 'Material Icons';
 content: "speaker_notes";
}
.mlocal_shipping::before {
 font-family: 'Material Icons';
 content: "local_shipping";
}
.mupdate::before {
 font-family: 'Material Icons';
 content: "update";
}
.mlist_alt::before {
 font-family: 'Material Icons';
 content: "list_alt";
}
.mexit_to_app::before {
 font-family: 'Material Icons';
 content: "exit_to_app";
}
.massignment::before {
 font-family: 'Material Icons';
 content: "assignment";
}
.mkeyboard_arrow_down::before {
 font-family: 'Material Icons';
 content: "keyboard_arrow_down";
}
.maccount_circle::before {
 font-family: 'Material Icons';
 content: "account_circle";
}
.mkeyboard_arrow_left::before {
 font-family: 'Material Icons';
 content: "keyboard_arrow_left";
}
.mshopping_cart::before {
 font-family: 'Material Icons';
 content: "shopping_cart";
}
.mchat::before {
 font-family: 'Material Icons';
 content: "chat";
}
.msave_alt::before {
 font-family: 'Material Icons';
 content: "save_alt";
}
.mpublish::before {
 font-family: 'Material Icons';
 content: "publish";
}
.madd::before {
    font-family: 'Material Icons';
    content: "add";
}
.mpageview::before {
    font-family: 'Material Icons';
    content: "pageview";
}
.msettings_applications::before {
    font-family: 'Material Icons';
    content: "settings_applications";
}
.mdomain::before {
    font-family: 'Material Icons';
    content: "domain";
}
.mperson_add::before {
    font-family: 'Material Icons';
    content: "person_add";
}
.mseikyu::before {
    font-family: 'Material Icons';
    content: "description";
}
.mcreate::before {
    font-family: 'Material Icons';
    content: "create";
}
.mstore_mall_directory::before {
    font-family: 'Material Icons';
    content: "store_mall_directory";
}
.maccess_time::before {
    font-family: 'Material Icons';
    content: "access_time";
}
.mcancel::before {
    font-family: 'Material Icons';
    content: "cancel";
}
.mapps::before {
    font-family: 'Material Icons';
    content: "apps";
}
.mcredit_card::before {
    font-family: 'Material Icons';
    content: "credit_card";
}
.listAddDel {
    border-radius: 4px;
    background: #0073BD;
    color: #FFF;
    border:1px;
}
.sample-box {
    position: relative;
}

.logotest {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    width: auto !important;
}

.logomini {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    width: 130px;
}

.KakuninLink {
    font-size: 0.7em;
    background-color: #F9FFDB;
    margin-bottom: 5px;
}
.login-disp-left {
    margin: 2em 0;
    background: #FFF;
    border: solid 3px #3DA42B; /*線*/
    border-radius: 10px; /*角の丸み*/
}
.login-disp-left .title{
    background: #3DA42B;
    padding: 4px;
    text-align: center;
    color: #FFF;
    letter-spacing: 0.05em;
    margin-bottom:20px;
}
.login-disp-left .content{
    padding: 0.5em 1em;
}
.login-disp-right {
    margin: 2em 0;
    background: #FFF;
    border: solid 3px #0073BD; /*線*/
    border-radius: 10px; /*角の丸み*/
}
.login-disp-right .title{
    background: #0073BD;
    padding: 4px;
    text-align: center;
    color: #FFF;
    letter-spacing: 0.05em;
    margin-bottom:20px;
}
.login-disp-right .content{
    padding: 0.5em 1em;
}
.textDisabled[disabled] {
    background: #DCDCDC !important;
    cursor: not-allowed; /* 禁止カーソル */
}