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

date:2015/1/19
birthday
---------------------------------------- */
#birth_ex{margin:25px 20px 5px;}
#birth_ex img:hover{opacity:0.8;}

#mainArea {width:960px; margin:0 auto; font-size: 13px; line-height:1.3; }

#mainArea a{text-decoration: none; }
/* 
frame
----------------------------------- */

h1,h2,h3,h4,h5,h6{ margin:0; padding:0; }
ul,dl { line-height:1.3; }
#contents .pagetop p {
    margin: 20px 0;
    float: right;
    font-size: 13px;
}
#contents .allow { color: #ca417d; font-size: 85%; }
p.title_comment {font-family: 'Noto Serif', serif;text-align: center;color: #bf4e79;font-size:17px;font-weight: 500;padding-left: 32px;}
div#topArea { width: 960px; margin: 0 auto;}

/* 
birth_nav
----------------------------------- */
section#birth_nav ul {display: flex;}
section#birth_nav ul li a {display: block;width: 161px;text-align: center;height: 20px;background: #ba1462;color: #fff;border-left: 1px solid #fff;padding: 12px 15px 14px;line-height: 25px;}
section#birth_nav ul li a img {padding: 0 10px 3px 0;vertical-align: bottom;}
section#birth_nav ul li a:hover {background: #d672a1;text-decoration: none!important;}

/* 
birth
----------------------------------- */
ul.nav_month {width: 366px;display: flex;float: right;margin-top: 24px;}
ul.nav_month li {width: 122px;height: 13px;background: #67c4de;padding: 15px 0;text-align: center;color: #fff;border-right: 1px solid #9be1f4;cursor: pointer;}
ul.nav_month li.active {width: 122px;height: 24px;padding: 15px 0;text-align: center;color: #fff;border: none;position:relative;background:#00abdb;}
li.active::before {
    content: "";
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top: 16px solid #00abdb;
    z-index: 1;
}
div#item { min-height: 430px;}
#item > div {display: none;}
#item > div.show {  display: block;  background: #e3f5fa;  margin-top: -11px;  position: absolute; width: 936px; padding: 20px 12px; min-height: 360px;}
div.show h3 {width: 960px;text-align: center;font-size: 18px;font-style: italic;color: #605e5f;}
div.show h3 span { color: #ef3d90; font-style: italic; font-weight: bold;}
.box_flex { display: flex; margin: 0 10px;}
div.show dl {  max-width: 270px; margin: 0 auto;}
div.show dl dt{ padding: 20px 10px 5px;text-align: center;}
div.show dl dt img {width: 208px;height: auto;}
div.show dl dt p img {max-width: 69px;margin: -20px 0 0;}

div.show dl dd {font-size:94%;padding: 0 10px 5px;}
div.show dl dd.price{font-size:85%;}
div.show dl dt {transition:0.3s;}
div.show dl dt:hover {opacity: 0.7;}
section#birth a {color: #5f5d5e!important;}
div.show dl dd.ex {background: #d03c81;width: 80%;margin: 8px 5%;text-align: center;padding: 7px 10px 5px!important;color: #fff;font-weight: bold;border-radius: 3px;font-size: 110%;}
div.show dl dd.btn {background: #00abdb;width: 80%;margin: 5px 5%;text-align: center;padding: 7px 10px 5px!important;color: #fff;font-weight: bold;border-radius: 3px;font-size: 110%;transform: rotate(0.03deg);-moz-transform: rotate(0.03deg);-ms-transform: rotate(0.03deg);-o-transform: rotate(0.03deg);-webkit-transform: rotate(0.03deg);}
div.show dl dd.ex:hover,div.show dl dd.btn:hover{opacity:0.7;}
div.show dl a:hover{text-decoration: none!important;}

.box4 dl {width: 230px;}

/* --------	box_3 	-------- */

div.show .box_3 dl {
    max-width: 26%;
    padding: 0 2%;
}
.box_3 dl dt {
    text-align: center;
}
div.show .box_3 dl dt img {
    width: 100%;
    height: auto;
    transition:0.3s;
}
div.show .box_3 dl dd.btn { font-size: 120%;}



div.show .box_2 dl dt img {
    width: 260px;
}
.box_flex.box_2 {
    margin: 0 50px;
}

/* --------	rank	-------- */
/* ranking
------------------------------ */
.area_rank{margin-bottom: 56px;position:relative;margin-bottom: 32px;}
section#ranking {clear:both;position:relative;}
.rank_box { display: flex; padding-top: 16px;justify-content: center;}
.rank_box dl {padding:0 9px;width:160px;font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;}
.rank_box dl div {font-size: 18px;color: #401f1f;line-height: 42px;z-index: 1;position:static;margin-bottom: 1px;background:none;width:unset;height:unset;text-align: left;}
.rank_box dl div._gold::before {
  content: '';
  background: url(//img.e87.com/img/icon/icon_rank_no1.gif) no-repeat;
    width: 26px;
    height: 24px;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: -6px;
}
.rank_box dl div._silver::before {
  content: '';
  background: url(//img.e87.com/img/icon/icon_rank_no2.gif) no-repeat;
    width: 26px;
    height: 24px;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: -6px;
}
.rank_box dl div._bronze::before {
  content: '';
  background: url(//img.e87.com/img/icon/icon_rank_no3.gif) no-repeat;
    width: 26px;
    height: 24px;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: -6px;
}
.rank_box dl div._gold {padding-left:1.55em;background:none;padding-left: 1.55em;
  background: none;
  width: unset;
  height: unset;
  border-radius: unset;
  text-align: left;}
.rank_box dl div._gold span{color:#401f1f;font-size:21px;}
.rank_box dl div._silver {padding-left:1.55em;padding-left: 1.55em;
    background: none;
    width: unset;
    height: unset;
    border-radius: unset;
    text-align: left;
  }
.rank_box dl div._silver span{color:#401f1f;font-size:21px;}
.rank_box dl div._bronze {padding-left:1.55em;padding-left: 1.55em;
    background: none;
    width: unset;
    height: unset;
    border-radius: unset;
    text-align: left;}
.rank_box dl div._bronze span{color:#401f1f;font-size:21px;}
.rank_box._bottom dl {padding:0 17px;}
.rank_box._bottom dl div {font-size:28px;background: none;width: unset;height: unset;text-align: left;}
.rank_box dl div span{font-family: 'Noto Serif JP', serif;line-height: 1;font-size: 21px;color:#3c3c3c;position: static;}
.rank_box .item_img{position:relative;}
.rank_box .item_img img{box-sizing: border-box;width: 100%;height: auto;border-top: 4px solid #cebd6c;border-bottom: 4px solid #cebd6c;}
.rank_box._bottom{padding-top:0;}
.rank_box._bottom dl dd.item_img {margin: 24px 0 0;}
.rank_box dl dd.item_name {color: #3c3c3c;margin-top: 8px;margin-bottom: 6px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 13px;line-height: 1.3;}
.rank_box dl dd.price {color: #3c3c3c;font-size: 11px;text-decoration: line-through;}
dl dd.price._hide {text-decoration: line-through;}
.rank_box dl dd:hover {color:#797979;}
.rank_box a:hover {text-decoration:none;}
.rank_box a img:hover {opacity:0.8;}
/* --------
オリジナルギフト
-------- */
section#original h3 {
    color:#fff;
    text-align: center;
    background: #67c4de;
    padding: 10px 0 5px;
    font-size: 20px;
    /* font-style: italic; */
    margin-top: 20px;
    position: relative;
    width: 680px;
    height: 40px;
    margin: 10px auto 0;
    box-sizing: border-box;
    line-height: 1;
    top: 20px;
}
section#original h3:before, section#original h3:after {
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color: #67c4de transparent;
    border-style: solid;
    content: '';
  }
  
  section#original h3:before {
    left: -9px;
    border-width: 20px 0px 20px 9px;
  }
  
  section#original h3:after {
    right: -9px;
    border-width: 20px 9px 20px 0px;
  }
section#original h3 span {color: #ba1462;font-size: 24px;font-style: italic;padding: 0 3px;font-weight: bold;}
section#original dl {width: 480px;float: left;}
section#original div.letter{  overflow: hidden;}
.mask_ani {	width:480px;	height:330px;	overflow:hidden;	position:relative;}
.mask_ani .caption {font-size: 15px;color: #3e2727;padding: 10px 5px;font-style: italic;}
.mask_ani .mask {	width: 85%;height: 23%;position: absolute;top: 230px;left: 0;opacity: 0;background-color: rgba(255, 255, 255, 0.8);}
.mask_ani_r {	width:480px;	height:330px;	overflow:hidden;	position:relative;}
.mask_ani_r .caption {	font-size: 15px;color: #3e2727;padding: 10px;font-style: italic;}
.mask_ani_r .mask {	width: 85%;height: 23.5%;position: absolute;top: 20px;right: 0;opacity: 0;background-color: rgba(255, 255, 255, 0.8);}
section#original dl dd {padding: 5px 5px 0;font-size: 106%;}

.mask_ani:hover,.mask_ani_r:hover,#original .box dl dd img:hover{opacity:0.7;}

#original .box_wrap{
    padding: 52px 20px 30px;
    background: #e3f5fa;
    border-radius: 10px;
}
#original .box dl dd img {width: 100%;height: auto;}
#original .box dl {width: 435px;
    padding: 40px 0px 20px 20px;
    box-sizing: border-box;
}
#original .box { display: flex;}
#original .box:not(:first-child) { margin-top:32px}
#original .box  .box_left a{ transition:0.3s}
#original .box  .box_left a:hover{ opacity:0.8;}
#original p.icon_ {
    display: inline-block;
    padding: 6px 16px;
    background: #c34d7b;
    color: #fff;
    border-radius: 20px;
    position:absolute;
    left: 0;
    bottom: 0;
    margin:10px;
}
#original .box dl dd { padding: 8px 0 0; line-height: 1.5;}
#original .box dl dd.name { font-size:16px;padding: 12px 12px 4px!important; background: #fff; margin: 12px auto 0; width: 100%;color:#297d94;border-radius: 8px 8px 0 0;box-sizing: border-box;}
#original .box dl dd.name span{ transition:0.3s;    font-weight: bold;}
#original .box dl dd.name:hover span{ opacity:0.8;}
#original .box dl dd.price { background: #fff; padding: 0 12px 12px!important; width: 100%; margin: 0 auto;border-radius: 0 0 8px 8px;box-sizing: border-box;}
#original .box dl dt {color: #00abdb;font-size: 18px;font-weight: bold;padding: 0 0 8px;text-align: center;    border-bottom: 2px solid #00abdb;position:relative;}
#original .box dl dt::before{
    content: '';
    background: url(https://img.e87.com/birthday/2023images/icon_box.png) center top no-repeat;
    width: 26px;
    height: 33px;
    background-size: 100%;
    position: absolute;
    top: -43px;
    left: 50%;
    transform: translateX(-50%);

}
#original p.link {
    margin: -26px 0 5px 715px;
    position: relative;
    text-align: center;
    font-size: 14px;
    /* background: #fdd3c5; */
    width: 242px;
    border-bottom: 3px #ce5f92 double;
}
#original .box dl dd.other{text-align: center;}
#original .box dl dd.other a.adjust{font-size:smaller;}
#original .box .original_contents_left{
    position:relative;
}
#original .box .original_contents_right{
    margin-left:10px;
}
#original .box a{
    display:flex;
    text-decoration: none;
}
#original .box a .original_contents_right p:first-child{
    margin-bottom:10px;
}

#original p.link a:hover{ text-decoration: none;}
#original p.link a{color: #ce5f92;}

/* --------
contents_common
-------- */
.contents_common .box dl dt img {width: 100%;height: auto;}
.contents_common .box dl dd {
    padding: 5px 0 0;
    color: #333;
    font-size: 14px;
    line-height: 1.3;
}
.contents_common .box dl {
    width: 220px;
    padding: 10px;
}
.contents_common .box dl:hover { opacity:0.8;}
.contents_common .box dl a{text-decoration: none; transition:0.3s;}
.contents_common .box {display: flex;padding:10px 15px 15px;}
.contents_common .box dl dd {padding: 5px 0 0;color:#333;}
.contents_common .box dl dd.price {font-size: 12px;color:#333;}
.contents_common .box_bg {margin: 10px 0 0;}
.contents_common .box dl dt a:hover{opacity: 0.8;}


/* --------
style	
-------- */
#style ul{ margin-top: 10px;display:flex;justify-content: space-evenly;}
#style ul li{margin: 20px 0;transition:0.3s;width: 260px;}
#style ul li a{    display: block;
    text-align: center;
    text-decoration: none;
}

#style li div {width: 100%;text-align: center;margin-top: 6px;}
#style li div span { font-size: 24px;font-weight: bold;color: #c43063;}
#style ul li:hover{opacity:0.7;}
#style ul li img{border-radius:50%;width: 160px;height: 160px;}

div#style ul li { float:left; width:300px; }

/*bnr_area
-----------------------------*/
.etc_bnr {display: flex;justify-content: center;align-items: center;}
.etc_bnr p {padding: 10px 15px;transition:0.3s;}
.etc_bnr p:hover {opacity:0.8;}

span.anchor {
    display: block;
    padding-top: 40px;
    margin-top: -40px;
}
.clearfix {
    clear: both;
    overflow: hidden;
}

/* animation
----------------------------------------------- */
.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}
.fadein_r {
  opacity : 0;
  transform : translate(-90px, 0);
  transition : all 2s;
}
 
.fadein_r.active{
  opacity : 1;
  transform : translate(0, 0);
}
.fadein_l {
  opacity : 0;
  transform : translate(60px, 0);
  transition : all 1s;
}
 
.fadein_l.active{
  opacity : 1;
  transform : translate(0, 0);
}

/* 2023 renewal additioni
----------------------------------------------- */
.h2_outer {
    background: #eff0d5;
    padding: 18px 16px 12px;
    display: flex;
    align-items: center;
    margin: 80px 0 20px;
    position: relative;
}
.h2_outer .heading_en{
    position:absolute;
    top:-65px;
    font-size: 63px;
    font-family: 'Fleur De Leah',serif;
    color:#d1d2b7;
}

.h2_outer .heading_en.font_top{
    font-size: 60px; top: -70px;}
.h2_outer .heading_en.font_bottom{
    font-size: 67px; top: -63px;}
.h2_outer h2{
    font-family: 'Noto Serif', serif;
    font-size: 26px;
    color: #6f4140;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 500;
}

/* パンくず */
.navitopicpath_{
    width:960px;
    margin: 0 auto 10px;
}

/* topArea */
.area_main_visual{
    text-align: center;
    background:#fac2d8;
    position:relative;
}
.area_main_visual span{
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120px;
    color: #fff;
    display: block;
    width: 100%;
    text-align: center;
}
.area_main_heading{
    background:#dc8aaa;
    padding-top: 50px;
    padding-bottom: 25px;
}
.area_main_heading_wrapper {
    width: 960px;
    margin: 0 auto;
    padding: 13px 25px 0;
    display: flex;
    box-sizing: border-box;
    justify-content: space-evenly;
    align-items: center;
}
.area_main_heading_wrapper h1 {
    font-size: 23px;
    color: #432313;
    font-family: 'Noto Serif', serif;
    line-height: 1;
    width: 430px;
    font-weight: 500;
}
.area_main_heading_wrapper .area_main_lead p {
    font-size: 15px;
    color: #fff;
    font-family: 'Noto Serif', serif;
    line-height: 1.8;
}

/* ランキング */
#rank .item{
    border-top: 4px solid #cebd6c;
    border-bottom: 4px solid #cebd6c;
    position:relative;
}

/* 誕生日のお花を探す 価格　共通
----------------------------------------------- */
.btn_common .area_btn_list_wrap{
    margin:10px 0 20px;
}

.btn_common .btn_list{
    display: flex;
    justify-content: space-evenly;
    padding: 0 20px;
}

.btn_common ._btn{
    min-width: 200px;
    width: 30%;
    margin-top: 20px;
    box-sizing: border-box;
    position: relative;
    margin-right: 40px;
}

.btn_common ._btn:last-child{
    margin-right: 0px;
}

.btn_common ._btn::before{
    content:'';
    transition:0.3s;
    top:0;
    left:0;
}

.btn_common ._btn:hover::before{
    background: #d0f0f9;
    content: "";
    position: absolute;
    width: 100%;
    height: 45px;
    z-index: -1;
    top: 5px;
    left: 5px;
    border-radius: 8px;
}

.btn_common ._btn a{
    display:block;
    padding: 16px 0 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #2ab3da;
    line-height: 1;
    box-sizing: border-box;
    position:relative;
}

.btn_common ._btn a:hover{
    text-decoration: none;
}

/* バナーエリア
----------------------------------------------- */

.bnr_area p{
    width:700px;
    margin: 10px auto 0;
}

.bnr_area p a{
    transition:0.3s;
}
.bnr_area p a:hover{
    opacity:0.8;
}

/* バルーン
----------------------------------------------- */
#baroon .area_baroon_wrap{
    display: flex;
    justify-content: center;
    padding: 0 20px;
    margin-top:10px;
    transition:0.3s;
}

#baroon ._baroon {
    display:flex;
    text-decoration: none;
    padding: 20px 10px;
    transition:0.3s;
}

#baroon ._baroon:hover {
    opacity:0.8;
}

#baroon ._baroon a{
    display:flex;
    text-decoration: none;
}

#baroon ._baroon a .baroon_right{
    width:220px;
    margin: 0 10px;
}

#baroon ._baroon a .baroon_right dt{
    color: #00abdb;
    font-size: 15px;
    border-bottom: 2px solid #00abdb;
    padding: 8px 0 4px;
    margin-bottom: 8px;
    font-weight: 600;
}

#baroon ._baroon a .baroon_right dd{
    color: #333;
}
#baroon ._baroon a .baroon_right dd.name {
    font-size: 14px;
    padding-bottom: 5px;
}
#baroon ._baroon a .baroon_right dd.price {
    font-size: 13px;
}
.price span {
    font-size: 100%!important;
}
/* rose
----------------------------------------------- */
#rose .area_rose_wrap{
    margin-bottom:30px;
}

#rose .area_rose_wrap ul {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 33px 0;
}
#rose .area_rose_wrap ul li {
    margin: 15px 10px;
}

#rose .area_rose_wrap ul li:hover{
    opacity:0.8;
}

#rose .area_rose_wrap ul li:last-child{
    margin-right: 0;
}

#rose .area_rose_wrap ul li a .m_font {
    color: #c43063;
    font-size: 19px;
    text-align: center;
    padding: 3px 0;
    line-height: 1.2;
}

#rose .area_rose_wrap ul li a .m_font span{
    font-weight: 600;
}

/* 
lineup
-----------------------------*/
section.area_obsession{overflow: unset;}
.area_obsession .area_obsession_inner{padding: 20px 0 0;font-family: 'Noto Serif JP', serif;font-weight: 500;position:relative;width: 100%;margin: 10px auto 0;box-sizing: border-box;}
.area_obsession .area_obsession_inner h2{color: #e66784;font-size: 24px;text-align: center;margin-bottom: 12px;border-bottom: 1px solid #e66784;padding-bottom: 20px;font-weight: 700;}
.area_obsession .area_obsession_inner label._heading{color: #fff;font-size: 18px;position:relative;font-weight: 600;padding-left:20px;padding-bottom:12px;margin: 0 20px 8px;border-bottom: 1px dotted;background: #67c4de;line-height: 1.4;}
.area_obsession .area_obsession_inner label._heading:hover{cursor:pointer;}

.area_obsession .area_obsession_inner .toggle {display: none;}
.area_obsession .area_obsession_inner ._heading {padding:10px 0 0;display: block;color: #fff;}
.area_obsession .area_obsession_inner ._heading::after{content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: calc( 50% - 5px );
    right: 20px;
    transform: rotate(135deg);}
.area_obsession .area_obsession_inner ._heading,
.area_obsession .area_obsession_inner .txt_wrap {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
.area_obsession .area_obsession_inner .txt_wrap {height: 0;margin-bottom:8px;padding: 0 40px;overflow: hidden;}
.toggle:checked + ._heading + .txt_wrap {	/*開閉時*/height: auto;transition: all .3s;}
.toggle:checked + ._heading::after {transform: rotate(-45deg) !important;}

.area_obsession .area_obsession_inner p.obsession_txt{font-size:15px;line-height: 1.6;margin-bottom: 18px;font-family: 'Noto Sans JP', sans-serif;font-weight: 400;color:#333;padding-left: 2em;text-indent: -2em;}
.area_obsession .area_obsession_inner p.obsession_txt._lead{margin-bottom: 24px;padding:0 8px 0;}
.area_obsession .area_obsession_inner p.ja_txt{width:74%;color: #487c0c;font-weight: 500;}
.area_obsession .area_obsession_inner p.ja_img{width:23%;margin: 0 auto;}
.area_obsession .area_obsession_inner p.ja_img img{width:100%;}
.area_obsession .area_obsession_inner .wrap_ja{display:flex;}

._question,._answer{font-size:24px;margin-right:6px;}
._answer{font-family: 'Noto Serif JP', serif;color:#67c4de;}

/* SEO対応改修
----------------------------------------------- */
.area_main_heading_wrapper {
    display:block;
}

.area_main_heading_wrapper .area_main_catch{
    font-size: 50px;
    color: #fff;
    line-height: 1;
    font-family: 'Noto Serif', serif;
    font-weight: bold;
    text-align: center;
    padding: 16px 0 24px;
    letter-spacing: -1px;
}

.area_main_heading_wrapper h1{
    width:100%;
    text-align: center;
}

.area_main_heading_wrapper .area_main_lead p{
    text-align: center;
    margin-top: 8px;
}

.area_main_heading_wrapper .area_main_lead p{
    font-size: 16px;
    line-height: 1.6;
}