
/*
font-family: 'Indie Flower', serif, cursive;
font-family: 'Kaisei Opti', serif;
font-family: 'Noto Serif JP', serif;*/

.contents{ width:960px; margin:0 auto; }

/*
pageTitel
-----------------------------*/

div#title_txt { background: #e5e5e5;}
div#title_txt p{padding:10px 20px;}

article#rank,article#theme,article#style,article#noshi{padding-top:60px;margin-top:-60px;}
article#theme,article#style { padding-bottom: 30px;}

/*
main_contents
-----------------------------*/
#main_contents { margin:0 auto; width:960px; text-align:left; padding-bottom: 30px; color:#333333;}
.contents img { max-width: 100%; height: auto;}

#main_contents a:hover{text-decoration: none!important;}
#main_contents a:hover img{opacity:0.8;}
#po, #pr, #set { padding-top: 25px;}

/*rank
-----------------------------*/
#rank {margin-bottom: 20px;}
#rank h2 {font-family: 'Noto Serif JP', serif;background: #ffd800;color: #fff;text-align: center;transform: rotate(0.03deg);font-weight: 500;font-size: 18px;padding: 5px 0 3px;letter-spacing: 0.02em;margin-top: 30px;}
#rank h2 .eng {font-family: 'Noto Serif JP', serif;font-size: 19px;padding: 5px;}
#rank h2 i {font-size: 16px;}
ul.rank_outer {display: flex;background: #f9f3d2;border: 1px solid #ffd800;padding: 5px 10px 10px;}
li.rank_outer_box {width: 172px;margin: 10px;position: relative;}
.rank_number {font-family: 'Noto Serif JP', serif;color: #ee8508; background: #fff;font-size: 15px;font-weight: 700;width: 53px;height: 53px;border-radius: 50%;display: flex;justify-content: center;align-items: baseline;position: absolute;z-index: 2;vertical-align: bottom;line-height: 53px;}
.font_28 {font-size: 28px;font-weight: 700;}
.rank_pic {margin-top: 10px;}
.rank_pic img {border-radius: 50%;}
.rank_name {padding: 8px 5px 0;color: #333;font-size: 13px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.rank_name:hover {color: #808080;}

/* navi */
.navi_summer {display: flex;margin: 20px;justify-content: center;}
.navi_summer a {position: relative;}
.navi_summer a::before {background: #ddf2fd;content: "";position: absolute;width: 204px;height: 54px;z-index: 1;top: 6px;left: 16px;transition: .3s;}
.navi_summer a:hover::before {background: #d2efff;top: 1px;left: 10px;}
.navi_summer_box {border: 2px solid #dddddd;width: 200px;height: 43px;margin: 0 10px;text-align: center;color: #2566bd;font-weight: bold;padding-top: 8px;font-size: 17px;position: relative;z-index: 3;}
span.navi_txt_eng {display: block;text-align: center;font-size: 12px;}

/* h2 */
.h2_outer {text-align: center;padding: 20px 0 15px;}
.h2_txt {color: #555555;font-family: 'Kaisei Opti', serif;font-size: 34px;position: relative;display: inline-block;padding: 0 100px;line-height: 36px;}
.h2_txt::before, h2.h2_txt::after {content: '';position: absolute;top: 50%;display: inline-block;width: 90px;height: 1px;background-color: #666;}
.h2_txt::after {right: 0;}
.h2_txt::before {left: 0;}

/* h3 */
.h3_outer {width: 960px;height: 120px;padding: 10px 0;}
#theme01 .h3_outer {background: url(https://img.e87.com/selection/summer/2022images/taste_ttl_bg01.jpg) no-repeat;}
#theme02 .h3_outer {background: url(https://img.e87.com/selection/summer/2022images/taste_ttl_bg02.jpg) no-repeat;}
#theme03 .h3_outer {background: url(https://img.e87.com/selection/summer/2022images/taste_ttl_bg03.jpg) no-repeat;}
#theme04 .h3_outer {background: url(https://img.e87.com/selection/summer/2022images/taste_ttl_bg04.jpg) no-repeat;}
#theme01 .h3_txt_sub,#theme03 .h3_txt_sub {color: #f9f3d2;}
.h3_eng {color: #fff;font-family: 'Indie Flower', serif, cursive;font-size: 28px;text-align: center;}
.h3_txt {font-family: 'Kaisei Opti', serif;font-size: 47px;text-align: center;line-height: 47px;}
#style .h3_outer {background: url(https://img.e87.com/selection/summer/2022images/style_ttl_bg.jpg) no-repeat;}
.h3_txt_blue {color:#2667bd;font-family: 'Kaisei Opti', serif;font-size: 45px;text-align: center;line-height: 45px;}
.h3_txt_sub {color: #333333;text-align: center;font-size: 13px;padding-top: 17px;font-weight: bold;}
section#theme02,section#theme03,section#theme04 {margin-top: 40px;}


/* item_box */
.item_box {padding: 10px 15px;}
.item_info {padding: 5px;}
.item_info .name {color: #014094;font-family: 'Noto Serif JP', serif;font-size: 16px;font-weight: 600;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.item_info .price {padding-top: 2px;}
.item_box .btn {background: #014094;color: #fff;font-weight: bold;text-align: center;font-size: 16px;padding: 10px 0 8px;}
.item_box .btn:hover { background:#195cb4;}
.item_info .name:hover{color: #195cb4;}

/* item_box4 */
.item_box4 {display: flex;justify-content: center;margin: 20px 0px;}
.item_box4 .item_box {width: 240px;}
.item_box4 .comment {color: #888888;font-size: 15px;line-height: 1.3;padding: 5px;text-align: center;}

/* item_box3 */
.item_box3 {display: flex;justify-content: left;margin: 20px 0px;}
.item_box3 .item_box {width: 290px;}
.item_box3 .comment {color: #888888;font-size: 16px;line-height: 1.3;padding: 5px;text-align: center;}

/* box1 */
.item_box1 {display: flex;padding: 10px 10px 30px;margin-bottom: 30px;border-bottom: 1px dotted #dddddd;justify-content: center;align-items: center;}
.itembox_pic3 {display: flex;width: 455px;}
.itembox_pic3_main {width: 300px;margin-right: 10px;position: relative;}
.itembox_pic3_sub {width: 145px;}
.itembox_pic3_sub1 {margin-bottom: 10px;}
.itembox_left {width: 455px;padding: 0 0 0 30px;}
.item_box1 h4 {font-size: 18px;color: #2566bd;font-weight: bold;position: relative;padding-bottom: 2px;margin-bottom: 12px;background: linear-gradient(transparent 60%, #feffd6 0%);text-align: center;line-height: 1.2;}
.itembox_left .comment {font-size: 14px;line-height: 1.4;padding: 0 10px;}
.itembox_left .item_box1_info {padding: 10px 20px 15px;border: 1px #d2d2d2 solid;margin-top: 12px;}
.item_box1_info .name {font-size: 18px;font-weight: 600;padding: 5px 0;color: #014094;font-family: 'Noto Serif JP', serif;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.item_box1_info .btn {text-align: center;background: #014094;color: #fff;padding: 10px 0 8px;font-size: 18px;margin: 10px 0 0;}
.item_box1_info .btn:hover {background: #195cb4;}
.item_box1_info .name:hover,.item_info .price:hover,.item_box a:hover {color:#195cb4!important;}
#style .item_box3 .comment,#style .item_box4 .comment {display: none;}
#style .item_box3 .item_box {padding: 10px 25px;width: 270px;}
.summer_all_btn {font-family: 'Kaisei Opti', serif;font-size: 34px;color: #fff;background: #2667bd;text-align: center;padding: 10px 0 13px;border: 3px solid #014094;border-radius: 5px;margin: 40px 0 30px;}
.summer_all_btn:hover { background: #4586db;}


/*style
-----------------------------*/
.style_navi_outer {display: flex;justify-content: center;margin: 20px 0 30px;}
.style_navi {width: 240px;text-align: center;}
.style_navi_pic {text-align: center;padding-bottom: 3px;}
.style_navi_pic img {border-radius: 50%;border: 4px solid #c7ecff;}
.style_navi_txt {font-family: 'Kaisei Opti', serif;font-size: 20px;font-weight: 600; line-height: 21px;}

.style_navi_outer a:hover,.style_navi_txt:hover{color:#2667bd;}

/*noshi
-----------------------------*/
h3.noshi_ttl {background: url(//img.e87.com/selection/summer/2022images/noshi_ttl.png)no-repeat;width: 591px;height: 46px;color: #fff;font-size: 17px;font-weight: bold;margin: 0 auto;text-align: center;line-height: 43px;position: relative;z-index: 2;}
.noshi_box {background: #ddeff4;display: flex;margin: -25px 20px 30px;padding: 30px 40px 15px;border: 4px solid #d8d8d8;border-radius: 10px;}
p.noshi_pic {padding: 0 50px;}
.noshi_info {width: 580px;margin-top: 15px;}
p.noshi_txt {font-size: 17px;font-weight: bold;text-align: center;}
p.noshi_txt .red {font-weight: bold;color: #b90017;}
.noshi_item {background: #fff;color: #024296;text-align: center;font-size: 20px;font-weight: bold;padding: 8px;margin: 10px 0 15px;}
p.noshi_kikan {color: #024296;text-align: center;font-size: 16px;font-weight: bold;padding: 0 0 20px;}
p.noshi_attention {font-size: 14px;line-height: 1.4;}
.noshi_item:hover { color: #5699f2;}

/*bnr_area
-----------------------------*/
.etc_bnr {display: flex;justify-content: center;align-items: center;}
.etc_bnr p {padding: 10px 15px;}

/*  FAQ  */
.e87-lower-layout {margin-top:40px;margin-bottom:60px;}
.e87-lower-section {margin-top:80px;}
.e87-lower-text {margin:0;line-height:1.8;font-size:1.1em;}
.e87-lower-text + .e87-lower-text {margin-top:2em;}
.e87-lower-anchor__item .e87-link-box--anchor {height:100%;display:flex;align-items:center;}
.e87-lower-anchor__item .e87-link-box--anchor::after {right:9px;top:calc(50% - 13px);transform:rotate(90deg) translateY(-50%);}
.e87-faq-lists {margin-top:60px;}
.e87-faq-accordion {border:1px solid #0064DB;border-radius:5px;margin-bottom:10px;overflow:hidden;}
.e87-faq-accordion:last-of-type {margin-bottom:0;}
.e87-faq-accordion__head {padding:20px 60px 20px 63px;background-image:url("https://img.e87.com/corp/faq/img/icon_q.png");background-repeat:no-repeat;background-position:left 18px top 15px;background-size:30px;cursor:pointer;transition:background-color .2s;}
.e87-faq-accordion__head:hover {background-color:#C9E3EE;}
.e87-js-toggle-accordion__trigger--active:hover {background-color:transparent;}
.e87-faq-accordion__body__inner {background-image:url(https://img.e87.com/corp/faq/img/icon_a.png);background-repeat:no-repeat;background-size:30px;padding:8px 60px 30px 63px;background-position:left 18px top 7px;}
.e87-faq-accordion__body[data-status="closed"] {display:none;}
.e87-js-toggle-accordion__trigger {position:relative;}
.e87-js-toggle-accordion__trigger::before, .e87-js-toggle-accordion__trigger::after {content:"";position:absolute;width:16px;height:1px;background:#000;right:20px;top:0;bottom:0;margin:auto;transition:transform .3s;}
.e87-js-toggle-accordion__trigger::after {transform:rotate(90deg);}
.e87-js-toggle-accordion__trigger--active::after {transform:rotate(0);}
.e87-faq-accordion__head__text {font-weight:bold;margin:0;font-size:1.3em;}
.e87-faq-accordion__text {margin:0;}
.e87-faq-accordion__btn__wrap {margin:30px auto 0;width:85%;}
@media all and (min-width:769px) {.e87-faq-accordion__btn__wrap {width:344px;} }


/*@new_columnArea
-----------------------------*/
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;}
#n_columnArea h3:before {content: "";font-size: 38px;top: 0px;left: -17px;position: absolute;color: #cfdbfd;z-index: -1;}
#n_columnArea h3 {font-weight: bold;color: #333333;font-size: 15px;position: relative;margin-left: 15px;border-bottom: 2px solid #cfdbfd;display: inline-block;padding-right: 10px;margin-top: 10px;}
#n_columnArea .columnArea {margin: 10px 0 20px;display: flex;}
#n_columnArea .c_box {display: flex;width: 240px;}
#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%, #d7f1f3 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;}
#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;}

.contents div.pagetop { clear:both; color:#CA417D; font-size:85%; margin:15px 2px 20px 0; text-align:right; }
.sort_area_ { padding: 3px 0!important;}

