@charset "utf-8";
/* CSS Document */

header {
	background:url(/images/sp/common/bg.png) repeat-x 0 0 #FFF;
	/* min-width:640px;  10-15削除 */
}

#login_name{
	height: 45px;
	line-height: 2.5em;
	padding-right: 30px;
	border-bottom: 1px solid;
	border-color: #815640;
	text-align: right;
	color: #ffffff;
}

h1 {
	float:left;
	padding:15px 0 0 19px;
	font-size:0;
}
h2 {
	line-height:0;
}


.outsearch {
    color: #B3B3B3; 
    width: 95%
}

.onsearch{
    color: #000;
    width: 95%
}

.hRight {
	float:right;
	width:331px;
	font-size:0;
}
.hRight li {
	float:left;
	line-height:0;
}
.muryo {
	clear:both;
	float:left;
	padding:22px 0 0 20px;
}
.catalogBtn {
	float: left;
	padding: 12px 5px 10px 15px;
}
.pointArea {
	clear:both;
	background:url(/images/sp/common/h_bg01.png);
	margin: 0px 20px 20px 20px;
	padding:9px;
}
.pointBox {
	background:#FFF;
	padding: 8px;
}
.pointImg {
	float:left;
	width:100px;
	height: 60px;
}
.pointTxt {
	height:26px;
	padding-right: 30px;
	line-height:1.7;/*10-15追記*/
}

.send_btn{
	margin:30px 0px 30px 0px;
	text-align: center;
}


#wrap {
	background:#FFF;
    height:auto;
    padding-top: 10px;
}
.tsa100 {
	text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
#recommendArea {
	background:#FFF;
}

#carousel_inner {
float:left; /* important for inline positioning */
width:80%; /* important (this width = width of list item(including margin) * items shown */ 
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
	padding:30px 0 50px 0;
}

#carousel_ul {
position:relative;
left:-14px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */                                    
width:150px;  /* fixed width, important */
/* just styling bellow*/
margin-left:14px; 
margin-right:14px; 
}
.img {
	width:148px;
	height:148px;
	line-height:0;
	border:1px solid #604136;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
}
#carousel_ul li p {
	color:#604136;
	padding:10px 0 0 0;
}
#carousel_ul li p span {
	color:#000;
}
#left_scroll, #right_scroll{
float:left;
width:10%;
text-align:center;
padding:82px 0 0 0;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}

/* for pleural carousel */
.recommendArea {
	background:#FFF;
}
.itemdetail_carousel {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%
}
.itemdetail_carousel .carousel_container {
	position: relative;
	display: flex;
}
.carousel_inner {
float:left; /* important for inline positioning */
width:80%; /* important (this width = width of list item(including margin) * items shown */ 
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
	padding:30px 0 50px 0;
}
.itemdetail_carousel .carousel_inner {
	width: 516px;
	padding: 30px 0 60px 0;
	margin: auto;
}

.carousel_ul {
position:relative;
left:-14px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

.carousel_ul li{
float: left; /* important for inline positioning of the list items */                                    
width:150px;  /* fixed width, important */
/* just styling bellow*/
margin-left:14px; 
margin-right:14px; 
}
.itemdetail_carousel .carousel_ul li {
	width: 150px;
	margin: 0 15px;
	overflow: hidden;
}
.itemdetail_carousel .carousel_img {
	width: 150px;
	height: 150px;
}
.img {
	width:148px;
	height:148px;
	line-height:0;
	border:1px solid #604136;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
.carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
}
.carousel_ul li p {
	color:#604136;
	padding:10px 0 0 0;
}
.itemdetail_carousel .carousel_ul li .product_name {
	color: #303030;
	font-size: 16px;
	line-height: 22px;
	padding: 10px 0 0 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	width: 100%;
}
.itemdetail_carousel .carousel_ul li .product_price {
	color: #303030;
	font-size: 16px;
	padding: 10px 0 0 0;
}
.itemdetail_carousel .carousel_ul li .product_price span {
	color: #303030;
	font-size: 20px;
	line-height: 24px;
	font-weight: bold;
}
.itemdetail_carousel .carousel_ul li .product_price span.yen {
	font-size: 16px;
}
.carousel_ul li p span {
	color:#000;
}
.left_scroll, .right_scroll{
float:left;
width:10%;
text-align:center;
padding:82px 0 0 0;
}
.left_scroll img, .right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}
.itemdetail_carousel .left_scroll img {
	transform: scale(-1, 1);
}
.itemdetail_carousel .left_scroll, .itemdetail_carousel .right_scroll {
	float: none;
	width: 60px;
	padding: 30px 0;
	position: absolute;
	top: 120px;
}
.itemdetail_carousel .left_scroll {
	left: 0;
}
.itemdetail_carousel .right_scroll {
	right: 0;
}
.itemdetail_carousel .left_scroll p, .itemdetail_carousel .right_scroll p {
	width: 32px;
	height: 32px;
	margin: auto;
}
.itemdetail_carousel .left_scroll p img, .itemdetail_carousel .right_scroll p img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


#newsArea {
	background: #FFF;
	padding: 0 0 60px 0;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
#newsArea dl {
    background:#FFF;
	padding:0 20px 0 20px;
}
#newsArea dt {
	font-size:100%;
    background:#FFF;
	color:#000;
	border-bottom:1px dashed #231815;
	padding:20px 0 0 0;
}
#newsArea.bbnone dt  {
    border-bottom:none;
}
#newsArea dd {
	font-size: 100%;
	background: #FFF;
	padding: 5px 0 15px 0;
	line-height: 1.6em;
}
#newsArea dd a{
    text-decoration: underline;
}
.rightBtn {
	float:right;
	margin:0 20px 0 0;
	line-height:0;
}




#campaignArea {
	background:#FFF;
	padding:0 0 60px 0;
}
#campaignArea dl {
    background:#FFF;
	padding:20px 0 5px 0;
}
#campaignArea dt {
    background:#FFF;
	float:left;
	width:148px;
	border:1px solid #231815;
	margin:0 0 0 20px;
	line-height:0;
}
#campaignArea dd {
	background: #FFF;
	float: left;
	width: 430px;
	padding: 0 20px 0 20px;
}
#campaignArea .camTtl {
    background:#FFF;
	color:#000;
	border-bottom:1px dashed #231815;
}
#campaignArea .camTxt {
    background:#FFF;
	padding:5px 0 0 0;
}

#serviceArea {
	background:#FFF;
}
#serviceArea ul {
	padding:18px 0;
	border-bottom:1px dashed #604136;
}
#serviceArea li {
	float:left;
	line-height:0;
}


#underMenu {
	background:#FFF;
}

#underMenu li {
	line-height:0;
}
#underMenu li.left {
	clear:both;
	float:left;
}
#underMenu li.right {
	float:right;
}

.pagetop {
	background:#FFF;
	text-align:right;
	padding:30px 20px;
}

.pc {
	background:#FFF;
	text-align:center;
	padding:24px 0 21px 0;
}

footer {
	color:#FFF;
	text-align:center;
	padding:25px 0;
}


.red {
	color:#BE0000;
}

/*アンドロイド改行対策*/
.adb_back_white{
  background:#fff;
}

.adb_back_fef6e1{
  background:#fef6e1;
}

.adb_back_fbf8f1{
  background:#fbf8f1;
}

.adb_back_ebe4de{
  background:#ebe4de;
}
.adb_back_f0ebe7{
  background:#f0ebe7;
}
/*11/06以降追記*/

.contBox {
  display:block;
	padding:0 20px;
  height:auto;
}


/* Radio Validation*/
.radio-validation-error {
    background-color:#FFAAAA;
}

/* validator */
.field-validation-error {
    color: #b94a48;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

select.input-validation-error {
    border: 1px solid #b94a48;
    background-color:#FFAAAA;
}

input.input-validation-error {
    border: 1px solid #b94a48;
    background-color:#FFAAAA;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

#complete_p{
	padding:20px 20px 150px 20px;
	background-color: #FFFFFF;
}

#f_dial{
	margin: 20px;
}



/* カートアイコンに表示する数量 */
#cart_number {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #AE2124;
	font-weight: bold;
	line-height: 11px;
	text-align: center;
	position: absolute;
	color: #fff;
	padding: 3px 5px;
	z-index: 999999;
	border-radius: 15px;
	opacity: 0.9;
	top: 55px;
	right: 20px;
	font-size: 16px;
	line-height: 1.2em;
	text-decoration: none!important;
	padding-top: 5px;
    box-sizing:content-box;
}


.jump_area{
	padding: 20px;
	line-height: 1.6em;
}

p.attention_cpn {
    font-size:150%;
    color:#d2000a;
    font-weight:bold;
    margin: 10px 20px;
    background:url('/images/common/icon_attention.png') no-repeat left;
    padding-left:30px
}

input[type=tel]{
    font-size: 115%;
}

.w40 {
    width: 40px;
}

.w100 {
    width: 100px;
}

.w150 {
    width: 150px;
}

.w300 {
    width: 300px;
}

input.error {
    border: 1px solid #b94a48;
    background-color:#FFAAAA;
}

.headsUp
{
    background-color:#ffaaaa;
}











/* =========================================================
次回入荷予定
========================================================= */
.DueInBox{
    width: 408px;
    height: 88px;
    background-color: #fff;
    outline: 1px solid rgb(255, 0, 0);
    box-sizing: content-box;
    padding: 20px;
}
.DueInDate{
    font-size: 30px;
}

.DueInBtn{
    background-color: rgb(255, 0, 0);
    display: block;
    padding: 10px 0;
    margin-top: 10px;
}
.DueInBtn a{
    color: #fff;
    text-decoration: none;
}




/* =========================================================
ヨックモック個別対応
========================================================= */
.ykmkBox{
    width: 392px;
    background-color: #EFE9E4;
    outline: 1px solid #EFE9E4;
    box-sizing: content-box;
    padding: 28px;
}
.ykmkTxt{ 
    color: #f00f00;
    line-height: 32px;
    font-size: 24px;
    font-weight: normal;
    padding: 5px 0 15px 0;
}
.ykmkBtn{
    border: 2px solid #E7DFD6;
    border-radius: 5px;
    color: #6A3906;
    line-height: 1;
    background-color: #fff;
    padding: 20px 0 20px 0;
    text-decoration: none;
    font-size: 24px;
}
.ykmkBox a{
    text-decoration: none;
}





/* 「PayPay使えます」表示中レイアウト（2020.10.12）ここから */
#cashless_headbnr{
	float: right;
	padding: 22px 16px 11px 0;
}
.cashless_muryo{
	padding: 24px 0 2px 16px;
}
/* 「PayPay使えます」表示中レイアウト（2020.10.12）ここまで */

/* =========================================================
ソーシャルギフト
========================================================= */
/*モーダル*/
.modal_type_spgift, .modal_type_select_icon {
	display: none;
}
.modal_type_spgift.show, .modal_type_select_icon.show {
	display: block;
	width: 100vw;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
.modal_type_spgift .modal_bg, .modal_type_select_icon .modal_bg {
	width: 100%;
	height: 100%;
	background-color: rgba(35, 24, 21, 0.7);
	cursor: pointer;
}
.modal_type_spgift .modal_contents, .modal_type_select_icon .modal_contents {
	width: 560px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.modal_type_spgift .modal_contents .close_btn, .modal_type_select_icon .modal_contents .close_btn {
	text-align: right;
	margin-bottom: 10px;
    cursor: pointer;
}
.modal_type_spgift .modal_contents .modal_inner, .modal_type_select_icon .modal_contents .modal_inner {
	padding: 70px 50px;
	box-sizing: border-box;
	background-color: #ffffff;
}
.modal_type_spgift .modal_contents .modal_inner dt, .modal_type_select_icon .modal_contents .modal_inner dt {
	font-size: 23px;
	line-height: 40px;
	padding-bottom: 20px;
	text-align: center;
}
.modal_type_spgift .modal_contents .modal_inner dd, .modal_type_select_icon .modal_contents .modal_inner dd {
	font-size: 20px;
	line-height: 30px;
}
.modal_type_spgift .modal_contents .modal_inner dd ul.notes li span, .modal_type_select_icon .modal_contents .modal_inner dd ul.notes li span {
	color: #d2000a;
	font-weight: normal;
}
.modal_type_spgift .modal_contents .modal_inner dd .example, .modal_type_select_icon .modal_contents .modal_inner dd .example {
	margin-bottom: 40px;
}
/* =========================================================
カタログ表紙関係
========================================================= */
.catalog_wrapper .milp_covers {
    width: 240px;
    height: 330px;
    float: left;
    position: relative;
    margin-right: 10px;
}
.catalog_wrapper .milp_covers .this_year {
    /*width: 202px;
    height: auto;*/
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0;
    border: solid 1px #c0c0c0;
    box-sizing: border-box;
}
.catalog_wrapper .milp_covers .last_year {
    width: 110px;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 10px;
    transform: rotate(-5deg);
    line-height: 0;
    border: solid 1px #c0c0c0;
    box-sizing: border-box;
}
.catalog_wrapper .milp_covers .this_year img,.catalog_wrapper .milp_covers .last_year img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catalog_wrapper .catalogimg img {
	border: solid 1px #c0c0c0;
    box-sizing: border-box;
}
/* =========================================================
カタログ請求
========================================================= */
.request_catalogue_point_note {
	padding: 10px 20px;
	box-sizing: border-box;
}