/* ----------------------------------------
e87.com いいはなドットコム　CSS

date:2013/12/11
express
---------------------------------------- */

/* 
font-family: 'Ballet', cursive;
font-family: 'M PLUS 1p', sans-serif;
font-family: 'Noto Serif JP', serif;
----------------------------------- */

#contents { width:960px; margin:0 auto; }
.clearfix::after{content: "";display: block;clear: both;}
/* 
topArea
----------------------------------- */
#contents #topArea { width:960px; height:290px; background:url(//img.e87.com/express/2021images/main.jpg) no-repeat left top;position: relative;}
#contents #topArea h1 {font-size: 115%;color: #443c3c;padding: 130px 0 5px 35px;font-weight: bold;}
.h1_text {color: #443c3c;padding: 0 0 7px 35px;line-height: 1.4;font-size: 13px;}
#contents #topArea .exp_info_box {position: absolute;width: 940px;bottom: 0;left: 0;background: rgb(255 255 255 / 65%);padding: 10px 40px;}
.exp_info_box .exp_info, .exp_info_box .exp_info a{color: #ba0927;line-height: 1.5;font-size: 13px;}
#contents #topArea .exp_info_box:after {content: "\f05a";font-family: "Font Awesome 5 Free";font-weight: bold;color: #ba0927;position: absolute;bottom: 44px;left: 10px;font-size: 26px;}

/* 
mainArea
----------------------------------- */
#mainArea {width: 960px;color: #443c3c;}
#mainArea a:hover{text-decoration: none!important;color: #655b5b;opacity: 0.85;}

/* 
h2
----------------------------------- */
.h2_box {background: linear-gradient(transparent 50%, #f7c6ce 0%);padding: 3px 15px;margin: 30px 0 25px;}
.h2_box h2 {font-family: 'M PLUS 1p', sans-serif;font-size: 25px;font-weight: bold;transform: rotate(0.03deg);color: #443c3c;}
.h2_box h2 span.h2_span{font-size: 16px;padding: 7px;font-weight: bold;}

/* 
用途で選ぶ
----------------------------------- */
.use_btn {display: flex;margin: 0 5px 15px;}
.use_btn_box {width: 470px;background: #ececec;}
.use_btn_left {float: left;width: 305px;position: relative;}
.btn_box_01,.btn_box_03,.btn_box_05,.btn_box_06 {margin-right: 15px;}
p.use_btn_eng {font-family: 'Ballet', serif;text-align: center;font-size: 34px;padding: 20px 0 0;}
p.use_btn_ttl {font-family: 'Noto Serif JP', serif;font-size: 34px;text-align: center;font-weight: 600;color: #443c3c;}
p.use_btn_txt {text-align: center;padding-top: 7px;line-height: 1.4;color: #443c3c;}
.pink {color: #e76f91;}
.purple {color: #a45fac;}
.btn_innner02 p.use_btn_ttl {padding-top: 30px;}
.use_btn_right {float: right;}
.use_btn_link {text-align: center;padding-top: 15px;position: absolute;left: 50%;transform: translateX(-50%);width: 100%;z-index: 2;}
.use_btn_link p {display: inline-block;font-size: 14px;line-height: 1.5;}
.use_btn_link_outer{width: 470px;height: 160px;display: block;position: absolute;z-index: 1;}
#mainArea .use_btn_link a:hover {text-decoration: underline!important;}
.use_btn_box:hover {opacity: 0.85;}
.use_btn.btn_innner03 .use_btn_left {width: 176px;}
.use_btn.btn_innner03 .use_btn_ttl {font-size: 27px;}
.use_btn.btn_innner03 .use_btn_left {width: 176px;padding-top: 25px;}

/*
 style
 ----------------------------------- */
ul.style_exp { display: flex; margin: 15px 5px;}
li.style_exp_box:first-child { margin-left: 0;}
li.style_exp_box { margin-left: 15px; position: relative;}
.style_exp_txt {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 32px;white-space: nowrap;font-family: 'Noto Serif JP', serif;background: rgb(255 255 255 / 80%);padding: 3px 8px 5px;line-height: 1;z-index: 2;color: #443f37;font-weight: 600;}
.style_exp_box3 .style_exp_txt {font-size: 28px;padding: 3px 5px 5px;}
ul.style_exp img { width: 100%; height: auto;}
/* 
price
----------------------------------- */
ul.price_exp {display: flex;}
.price_exp_box a {color: #443c3c!important;display: block;text-align: center;padding: 5px;width: 172px;margin: 5px;background: #ccc;font-size: 20px;}
.price_exp_box {position: relative;}
.price_exp_box:after {content: "\f0da";font-family: "Font Awesome 5 Free";font-weight: bold;color: #443f37;position: absolute;top: 50%;transform: translate(0, -50%);right: 15px;font-size: 18px;}
.price_exp_box a:hover {opacity: 0.8;text-decoration: none;color: #443c3c;}

/* 
pickup
----------------------------------- */
section.pickup a{color: #443c3c!important;}
section.pickup a:hover {text-decoration: none!important;color: #443c3c!important;opacity: 0.8;}
.pickup h3 {background: linear-gradient(transparent 50%, #c3ecdc 0%);display: inline-block;margin: 10px 0 15px;font-size: 20px;font-family: 'M PLUS 1p', sans-serif;transform: rotate(0.03deg);padding:3px 7px;color: #443c3c;font-weight: 500;}
span.h3_eng {color: #b8b8b8;font-family: 'Ballet', serif;font-size: 30px;margin: 0 10px 0 5px;letter-spacing: 2px;}
.pickup_item {display: flex;padding: 10px 0;}
.pickup_item a {width: 210px;margin: 0 15px;}
.pickup_item_comment {font-size: 12px;padding: 4px 0 2px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: #776b6d;border-bottom: 2px dotted #ccc;margin: 0 0 4px;}
.pickup_item_name {font-size: 14px;font-weight: bold;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.pickup_link_more {background: #615757;color: #fff;padding: 10px 50px 8px 80px;font-size: 15px;font-weight: bold;margin: 20px 220px 30px;position: relative;}
.pickup_link_more:after {content: "\f0da";font-family: "Font Awesome 5 Free";font-weight: bold;color: #fff;position: absolute;top: 49%;transform: translate(0, -50%);right: 30px;font-size: 16px;}
.pickup h3.product {background: linear-gradient(transparent 50%, #f7c6ce 0%);font-size: 20px;font-weight: bold;margin-bottom: 5px;margin-left: 10px;}
.topicArea {background: #eaeaea;padding: 10px;}
p.aboutText01 {font-size: 14px;}
p.aboutText01 a {color: #ab285f!important;text-decoration: underline;}
p.aboutText01 a:hover {color: #ab285f!important;text-decoration: underline!important;}

/*　new_columnArea
-----------------------------*/
#n_columnArea>h4.summer:before {content: "\025cf";font-size: 38px;top: 5px;left: -15px;position: absolute;color: #cfdbfd;z-index: -1;}
#n_columnArea>h4.summer {font-weight: bold;color: #333333;font-size: 15px;position: relative;margin-left: 15px;border-bottom: 2px solid #cfdbfd;display: inline-block;padding: 3px 2px 1px!important;margin-top: 10px;background: rgba(255, 255, 255, 0);border-top: none;border-left: none;border-right: none;z-index: 1;}

#n_columnArea .columnArea {margin: 10px 0 20px;}
#n_columnArea .c_box {display: flex; width: 25%; float: left;min-height: 86px;}
#n_columnArea .c_box p {padding: 5px 8px 5px 5px;}
#n_columnArea .c_box p img {width: 65px;height: auto;}
#n_columnArea .c_box dt span {font-weight: bold;background: linear-gradient(transparent 40%, #ffccdf 0%);color: #333333;font-size: 13.5px;padding: 0 2px;}
#n_columnArea .c_box dd {font-size: 11px;color: #565656;padding-top: 5px;line-height: 1.4;display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
#n_columnArea .columnArea dl {padding: 0 5px 0 0;width: 157px;}
#n_columnArea a:hover {text-decoration: none!important;opacity: 0.8;color: #707070;}
#n_columnArea .c_box dt {line-height: 1.4;}
p.n_column_btn:hover {background: #af5071;}
p.n_column_btn a {color: #fff!important;}
p.n_column_btn { background: #761238;padding: 13px;margin: 50px auto 35px;width: 60%;text-align: center;font-weight: bold;font-size: 140%;border-radius: 3px;}
.contents div.pagetop { clear:both; color:#CA417D; font-size:85%; margin:15px 2px 20px 0; text-align:right; }
.sort_area_ { padding: 3px 0!important;}
.clearfix::after{content: "";display: block;clear: both;}
#n_columnArea h3 {background: #fff;color: #e74f83;border-bottom: 3px double #e74f83;border-top: 3px double #e74f83;padding: 8px 0!important;text-align: center;font-size: 16px!important;font-weight: bold!important;margin: 30px auto 20px!important;line-height: 1.2;border-left: none;border-right: none;border-radius: 0;}

.etc_bnr { display: flex; margin: 10px 5px 0;}
.etc_bnr a:first-child { margin-right: 30px;}

/* 
bannerArea
----------------------------------- */
#contents .topicArea .banner { float:left; padding:7px 0 7px 0; width:750px; }
/* 
bottomArea
----------------------------------- */

#contents .pagetop { width:945px; text-align:right; margin:25px 0; }
#contents .pagetop p { font-size:85%; margin:0 5px 0 0; float: right;}
#contents .allow { color:#ca417d; font-size:85%; }

/* 
attention
----------------------------------- */
#orderstop {
    padding-top: 100px;
    margin-top: -100px;
}
.attention140217 { width:930px; border: solid #C00 3px; float:left; margin:10px; }
.attention140217 dt { background:url(//img.e87.com/images/excla_01.jpg) no-repeat left top; height:20px; padding-left:23px; text-align:left; color:#C00; font-weight:bold; margin:15px 0 0 15px; }
.attention140217 dd { padding-left:23px; margin:0 0 15px 0; font:1.1em; color:#666; text-align:left; }
.attention140217 dd span { font-weight:bold; color:#C00; }
.attention140217{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
/* 贈り物に関するお役立ちコラム
----------------------------------------------- */
#usefulClmBlockList li { width:225px; float:left; height: 100px!important;}
#usefulClmBlockList li a { display:block; }
#usefulClmBlockList li.pcL { padding:5px 5px 5px 0; border-bottom: 1px dotted #751038; }
#usefulClmBlockList li.pcM { padding:5px; border-left: 1px dotted #751038; border-bottom: 1px dotted #751038; }
#usefulClmBlockList li.pcR { padding:5px 0 5px 5px; border-left: 1px dotted #751038; border-bottom: 1px dotted #751038; }
#usefulClmBlockList li.pcBottom { border-bottom: none; }
#usefulClmBlockList li span { display:block; line-height:1.4em; }
#usefulClmBlockList li span.txt { color:#CA417D; font-size:77%; text-decoration:underline; padding-left:5px; float:left; width:140px; }
#usefulClmBlockList li span.txt:hover { text-decoration:none; }
#usefulClmBlockList li span.txt02 { color:#696851; font-size:77%; padding:5px 0 0 5px; float:left; width:140px; }
#usefulClmBlockList li span.img { float:left; line-height:1.0em; }
#usefulClmBlockList li span.img img { width:80px; height:80px; }
#usefulClmBlockList li span.continueDot { display:none; }
#usefulClmBlockList li span.nonDisplay { display:inline; }
#usefulClmBlockList li span br { display:none; }
#mothersDayBnr_l { clear:both; margin:10px 0; }
#mothersDayBnr_l_sp { display:none; }
.hiddenAreaWrap { display:none; }