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

date:2007/05/01
template-D
---------------------------------------- */

/* 
frame
---------------------------------------- */

#contents {
    max-width: 960px;
    margin: 0 auto;
}
/* 
mainArea
----------------------------------- */

#contents #topArea { width:960px; margin:5px 0 27px 0; }
#contents h1 { width: 100vw; margin: 5px 0 27px 0; max-width: 960px;}
#contents p.h1_text { padding:0 0 0 40px; font-size:140%; color:#ca417d; font-weight:bold; background:url(//img.e87.com/images/icon_01.gif) no-repeat left top; line-height:180%; }
#contents .lead01{ margin:10px 20px 25px 25px; }
#contents .lead02{ margin:15px 20px 25px 25px; }
#contents h2 { color: #ca417d;border-top: 1px solid #ca417d;border-bottom: 1px solid #ca417d;text-align: center;padding: 8px 0 6px;font-size: 16px;font-weight: bold;margin: 30px 0 20px;}


/* ----- topicArea ----- */

#contents .topicArea { margin: 0 auto; width: 960px;}
#contents .topicArea ul { margin: 5px 30px 5px; display: flex;}
#contents .topicArea ul li.bg01,
#contents .topicArea ul li.bg02,
#contents .topicArea ul li.bg03,
#contents .topicArea ul li.bg04,
#contents .topicArea ul li.bg05,
#contents .topicArea ul li.bg06,
#contents .topicArea ul li.bg07,
#contents .topicArea ul li.bg08,
#contents .topicArea ul li.bg09,
#contents .topicArea ul li.bg10,
#contents .topicArea ul li.bg11,
#contents .topicArea ul li.bg12 { width: 110px; height: 125px; margin: 0 20px 0;}
#contents .topicArea ul li.bg01 { background:url(//img.e87.com/word/images/book_bg_01.gif) no-repeat left top; }
#contents .topicArea ul li.bg02 { background:url(//img.e87.com/word/images/book_bg_02.gif) no-repeat left top; }
#contents .topicArea ul li.bg03 { background:url(//img.e87.com/word/images/book_bg_03.gif) no-repeat left top; }
#contents .topicArea ul li.bg04 { background:url(//img.e87.com/word/images/book_bg_04.gif) no-repeat left top; }
#contents .topicArea ul li.bg05 { background:url(//img.e87.com/word/images/book_bg_05.gif) no-repeat left top; }
#contents .topicArea ul li.bg06 { background:url(//img.e87.com/word/images/book_bg_06.gif) no-repeat left top; }
#contents .topicArea ul li.bg07 { background:url(//img.e87.com/word/images/book_bg_07.gif) no-repeat left top; }
#contents .topicArea ul li.bg08 { background:url(//img.e87.com/word/images/book_bg_08.gif) no-repeat left top; }
#contents .topicArea ul li.bg09 { background:url(//img.e87.com/word/images/book_bg_09.gif) no-repeat left top; }
#contents .topicArea ul li.bg10 { background:url(//img.e87.com/word/images/book_bg_10.gif) no-repeat left top; }
#contents .topicArea ul li.bg11 { background:url(//img.e87.com/word/images/book_bg_11.gif) no-repeat left top; }
#contents .topicArea ul li.bg12 { background:url(//img.e87.com/word/images/book_bg_12.gif) no-repeat left top; }

#contents .topicArea ul li a.linkBlock { width:90px; height:110px; display:block; text-decoration:none; }
#contents .topicArea ul li a:hover.linkBlock { width:90px; height:110px; display:block; color:#ca417d; cursor:pointer; }
/*#contents .topicArea ul li .innerLink { width:90px; height:75px; display:block; text-align:center; }
*/

#contents .topicArea ul li a.linkBlock img { margin:45px 0 0 23px; }
#contents .topicArea ul li span.linkText { display:block; width:70px; margin:9px 0 0 16px; font-size:85%; text-decoration:underline; }
/* ----- rightText ----- */

#contents .rightTextWrap{ width:160px; float: right; }
#contents .rightText { width:152px; margin:0 15px 25px 0; font-size:85%; float:right; }
#contents .rightText dt { display:block; width:39px; float:left; color:#ca417d; }
#contents .rightText dd { width:104px; float:left; }
#contents .rightText span.textBy { display:block; padding:20px 0 0 0; color:#979685; }
/* ----- bannerArea ----- */

#contents .bannerArea { margin:0 0 5px 20px; }
#contents .bannerAreaBtm { margin:0 0 0 20px; }
#contents .banner01 { width:225px; float:left; }
#contents .banner02 { width:225px; _width:250px; padding:0 0 0 24px; background:url(//img.e87.com/word/images/dot_line.gif) repeat-y left; float:left; }
.bannerText { width:225px; margin:5px 0; text-align:center; font-size:85%; }


/* ----- recobnr ----- */

#contents .recobnr { padding: 10px 0 10px 0; }
#contents .lead02 p { font-size: 15px; line-height: 1.5;}

/*bnr_area
-----------------------------*/
.bnr_area ul { display: flex; padding: 0 20px;}
.bnr_area ul li {  padding: 10px;}
.bnr_area ul li img:hover {opacity: 0.7;}
.bnr_area h2.h2_ttl {color: #305b48;border-top: 1px solid #305b48;border-bottom: 1px solid #305b48;text-align: center;padding: 8px 0 6px;font-size: 16px;font-weight: bold;margin: 30px 0 20px;}

div#contents_0903new .bnr_area img { width: 100%; height: auto;}
#contents div.pagetop {
    clear: both;
    color: #CA417D;
    font-size: 85%;
    margin: 15px 2px 20px 0;
    text-align: right;
}
.sp_navi {
    display: none;
}

/* 
 スマホ
----------------------------------- */
@media screen and (max-width: 680px) { 
.sp_navi {display: block;}
.sp_navi ul {display: flex;}
.sp_navi ul a {width: 25%;background: #000;padding: 10px 0;border-right: 1px solid #fff;color: #fff;margin-bottom: 10px;}
.sp_navi ul a li {text-align: center;font-size: 11px;}
#e87service .contents_ {padding: 5px 0!important;}
#contents .topicArea {margin: 2% auto;width: 96%;}
#contents #topArea {width: 100%;height: auto;}
#contents .topicArea ul {margin:0 10px;display: block;}
#contents .topicArea ul li {float: left;width: 40%!important;margin: 5%!important;}
.bnr_area ul {display: block;padding: 0 20px;}


#header {width: 100%;}
#header .contents_:first-of-type {height: 0;}
.contents_ div#logo_area {width: 100%;margin: 0 5px;}
.contents_ div#logo_area p#sitelogo img {width: 90%;height: auto;}
.contents_ div#logo_area p#sitelogo {width: 100%;display: flex;padding-bottom: 10px;}
#mainArea p {padding: 0;line-height: 1.3;font-size: 100%;}
#headline_nav,div#global_content,div#globalnav_box {display: none;}
#header .contents_:first-of-type {width: 100%;height: 0!important;background: #fbf7f7;}
div#gift_content, #youre_home_content {display: none;}
div#globalnav_box {display: none;}
div#global_content {display: none;}
#contents {width: 100%;margin: 0 auto;}
div#topArea img {width: 100%;height: auto;}

.columnListArea {margin: 3%;width: calc(94% - 2px);}
div#gift_content, #youre_home_content {display: none;}
.columnList ul {width: 100%;}
.columnList ul li {width: 90%;}
div.contents_, div.col1_ {margin: 0 auto;width: 960px;text-align: left;}
.contents_ {width: 100%!important;}
#e87service #service_link_box_r {width: 96%!important;height: auto;padding: 2%!important;background: #fff;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;}
#e87service #service_link_box_r ul:first-of-type #qr {width: 100%;height: 72px;border-right: #efe8e6 1px solid;padding-top: 10px;}
#e87service #service_link_box_l {width: 96%!important;padding: 2%!important;}
#e87service #service_link_box_r ul:first-of-type li {float: none;}
#e87service #service_link_box_r ul:first-of-type #verisign ul {width: 100%;height: auto;}
#footernav li { white-space: nowrap;}




}