/* ===================================================================
CSS information
 file name  :  top.css
 style info :  top styles
=================================================================== */
/* line 234, ../sass/_base.scss */
#mainslider .slides, #new .box-wrap, .ban-area ul, #main, #topics .article-list, #topics .column .columnist, #info .box-info .info-list a .shop-data, #popular .popular-box, #popular .popular-box .item .head .title-type, #popular .popular-box .item .box-article a {
  *zoom: 1;
}
/* line 238, ../sass/_base.scss */
#mainslider .slides:after, #new .box-wrap:after, .ban-area ul:after, #main:after, #topics .article-list:after, #topics .column .columnist:after, #info .box-info .info-list a .shop-data:after, #popular .popular-box:after, #popular .popular-box .item .head .title-type:after, #popular .popular-box .item .box-article a:after {
  content: "";
  display: table;
  clear: both;
}

/* line 251, ../sass/_base.scss */
#mainslider .slide-nav a, #mainslider .control-nav li a, #popular .popular-box .item .box-article a .cat {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* line 5, ../sass/_sprite.scss */
.cat {
  background-image: url('../img/sprites/pin-s00bc06820f.png');
  background-repeat: no-repeat;
  display: block;
}
/* line 83, ../sass/_base.scss */
.cat.art {
  height: 69px;
  width: 53px;
  background-position: 0 -2407px;
}
/* line 83, ../sass/_base.scss */
.cat.art_ex {
  height: 156px;
  width: 114px;
  background-position: 0 -931px;
}
/* line 83, ../sass/_base.scss */
.cat.art_l {
  height: 128px;
  width: 81px;
  background-position: 0 -1953px;
}
/* line 83, ../sass/_base.scss */
.cat.beauty {
  height: 69px;
  width: 53px;
  background-position: 0 -2486px;
}
/* line 83, ../sass/_base.scss */
.cat.beauty_ex {
  height: 156px;
  width: 114px;
  background-position: 0 -1097px;
}
/* line 83, ../sass/_base.scss */
.cat.beauty_l {
  height: 128px;
  width: 81px;
  background-position: 0 -1263px;
}
/* line 83, ../sass/_base.scss */
.cat.fashion {
  height: 69px;
  width: 53px;
  background-position: 0 -2249px;
}
/* line 83, ../sass/_base.scss */
.cat.fashion_ex {
  height: 156px;
  width: 114px;
  background-position: 0 -311px;
}
/* line 83, ../sass/_base.scss */
.cat.fashion_l {
  height: 128px;
  width: 81px;
  background-position: 0 -1539px;
}
/* line 83, ../sass/_base.scss */
.cat.food {
  height: 69px;
  width: 53px;
  background-position: 0 -2091px;
}
/* line 83, ../sass/_base.scss */
.cat.food_ex {
  height: 156px;
  width: 114px;
  background-position: 0 -643px;
}
/* line 83, ../sass/_base.scss */
.cat.food_l {
  height: 128px;
  width: 81px;
  background-position: 0 -1677px;
}
/* line 83, ../sass/_base.scss */
.cat.live {
  height: 69px;
  width: 53px;
  background-position: 0 -2328px;
}
/* line 83, ../sass/_base.scss */
.cat.live_ex {
  height: 156px;
  width: 114px;
  background-position: 0 -477px;
}
/* line 83, ../sass/_base.scss */
.cat.live_l {
  height: 128px;
  width: 81px;
  background-position: 0 -1815px;
}
/* line 83, ../sass/_base.scss */
.cat.noimage_l {
  height: 135px;
  width: 102px;
  background-position: 0 0;
}
/* line 83, ../sass/_base.scss */
.cat.noimage_s {
  height: 112px;
  width: 85px;
  background-position: 0 -809px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_art {
  height: 28px;
  width: 30px;
  background-position: 0 -2639px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_art_s {
  height: 18px;
  width: 20px;
  background-position: 0 -2876px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_beauty {
  height: 30px;
  width: 14px;
  background-position: 0 -2783px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_beauty_s {
  height: 22px;
  width: 10px;
  background-position: 0 -2934px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_fashion {
  height: 24px;
  width: 25px;
  background-position: 0 -2605px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_fashion_s {
  height: 16px;
  width: 17px;
  background-position: 0 -2823px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_food {
  height: 29px;
  width: 15px;
  background-position: 0 -2744px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_food_s {
  height: 20px;
  width: 10px;
  background-position: 0 -2904px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_live {
  height: 23px;
  width: 27px;
  background-position: 0 -2677px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_live_s {
  height: 17px;
  width: 20px;
  background-position: 0 -2849px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_play {
  height: 30px;
  width: 28px;
  background-position: 0 -2565px;
}
/* line 83, ../sass/_base.scss */
.cat.pict_play_s {
  height: 24px;
  width: 22px;
  background-position: 0 -2710px;
}
/* line 83, ../sass/_base.scss */
.cat.play {
  height: 69px;
  width: 53px;
  background-position: 0 -2170px;
}
/* line 83, ../sass/_base.scss */
.cat.play_ex {
  height: 156px;
  width: 114px;
  background-position: 0 -145px;
}
/* line 83, ../sass/_base.scss */
.cat.play_l {
  height: 128px;
  width: 81px;
  background-position: 0 -1401px;
}
/* line 8, ../sass/_sprite.scss */
.cat.food {
  color: #df6559;
}
/* line 11, ../sass/_sprite.scss */
.cat.beauty {
  color: #d45dd5;
}
/* line 14, ../sass/_sprite.scss */
.cat.play {
  color: #54c893;
}
/* line 17, ../sass/_sprite.scss */
.cat.fashion {
  color: #8171f3;
}
/* line 20, ../sass/_sprite.scss */
.cat.live {
  color: #77a6ed;
}
/* line 23, ../sass/_sprite.scss */
.cat.art {
  color: #f08e1a;
}

/* line 30, ../sass/_sprite.scss */
.icon {
  background-image: url('../img/sprites/icon-sc21ef756fc.png');
  background-repeat: no-repeat;
  display: block;
}
/* line 83, ../sass/_base.scss */
.icon.arrow_gr_13 {
  height: 14px;
  width: 14px;
  background-position: 0 -971px;
}
/* line 83, ../sass/_base.scss */
.icon.arrow_gr_18 {
  height: 17px;
  width: 17px;
  background-position: 0 -918px;
}
/* line 83, ../sass/_base.scss */
.icon.arrow_gr_down {
  height: 17px;
  width: 17px;
  background-position: 0 -891px;
}
/* line 83, ../sass/_base.scss */
.icon.arrow_wh_18 {
  height: 18px;
  width: 18px;
  background-position: 0 -995px;
}
/* line 83, ../sass/_base.scss */
.icon.arrow_wh_l18 {
  height: 18px;
  width: 18px;
  background-position: 0 -1085px;
}
/* line 83, ../sass/_base.scss */
.icon.bijintokei {
  height: 16px;
  width: 17px;
  background-position: 0 -945px;
}
/* line 83, ../sass/_base.scss */
.icon.book {
  height: 33px;
  width: 33px;
  background-position: 0 -212px;
}
/* line 83, ../sass/_base.scss */
.icon.circle_gr {
  height: 17px;
  width: 16px;
  background-position: 0 -1058px;
}
/* line 83, ../sass/_base.scss */
.icon.circle_wh {
  height: 18px;
  width: 19px;
  background-position: 0 -1113px;
}
/* line 83, ../sass/_base.scss */
.icon.close {
  height: 11px;
  width: 10px;
  background-position: 0 -1168px;
}
/* line 83, ../sass/_base.scss */
.icon.coupon {
  height: 33px;
  width: 33px;
  background-position: 0 -255px;
}
/* line 83, ../sass/_base.scss */
.icon.facebook {
  height: 17px;
  width: 8px;
  background-position: 0 -1141px;
}
/* line 83, ../sass/_base.scss */
.icon.h4 {
  height: 33px;
  width: 4px;
  background-position: 0 -1322px;
}
/* line 83, ../sass/_base.scss */
.icon.line_intervew {
  height: 1px;
  width: 59px;
  background-position: 0 -1365px;
}
/* line 83, ../sass/_base.scss */
.icon.link {
  height: 15px;
  width: 14px;
  background-position: 0 -1279px;
}
/* line 83, ../sass/_base.scss */
.icon.list_disc {
  height: 8px;
  width: 8px;
  background-position: 0 -1304px;
}
/* line 83, ../sass/_base.scss */
.icon.memo {
  height: 59px;
  width: 59px;
  background-position: 0 -100px;
}
/* line 83, ../sass/_base.scss */
.icon.newtopic {
  height: 33px;
  width: 33px;
  background-position: 0 -169px;
}
/* line 83, ../sass/_base.scss */
.icon.next {
  height: 47px;
  width: 30px;
  background-position: 0 -384px;
}
/* line 83, ../sass/_base.scss */
.icon.pickup {
  height: 33px;
  width: 33px;
  background-position: 0 -341px;
}
/* line 83, ../sass/_base.scss */
.icon.prev {
  height: 47px;
  width: 30px;
  background-position: 0 -527px;
}
/* line 83, ../sass/_base.scss */
.icon.profile {
  height: 33px;
  width: 33px;
  background-position: 0 -298px;
}
/* line 83, ../sass/_base.scss */
.icon.ranking {
  height: 23px;
  width: 27px;
  background-position: 0 -801px;
}
/* line 83, ../sass/_base.scss */
.icon.rss {
  height: 15px;
  width: 17px;
  background-position: 0 -834px;
}
/* line 83, ../sass/_base.scss */
.icon.search {
  height: 22px;
  width: 22px;
  background-position: 0 -859px;
}
/* line 83, ../sass/_base.scss */
.icon.search_l {
  height: 31px;
  width: 30px;
  background-position: 0 -584px;
}
/* line 83, ../sass/_base.scss */
.icon.search_m {
  height: 26px;
  width: 25px;
  background-position: 0 -765px;
}
/* line 83, ../sass/_base.scss */
.icon.shop {
  height: 33px;
  width: 33px;
  background-position: 0 -441px;
}
/* line 83, ../sass/_base.scss */
.icon.shop2 {
  height: 25px;
  width: 23px;
  background-position: 0 -1023px;
}
/* line 83, ../sass/_base.scss */
.icon.slider_arrow_n {
  height: 60px;
  width: 60px;
  background-position: 0 -695px;
}
/* line 83, ../sass/_base.scss */
.icon.slider_arrow_p {
  height: 60px;
  width: 60px;
  background-position: 0 -625px;
}
/* line 83, ../sass/_base.scss */
.icon.sp {
  height: 90px;
  width: 90px;
  background-position: 0 0;
}
/* line 83, ../sass/_base.scss */
.icon.tabs_arrow_art {
  height: 5px;
  width: 11px;
  background-position: 0 -1189px;
}
/* line 83, ../sass/_base.scss */
.icon.tabs_arrow_beauty {
  height: 5px;
  width: 11px;
  background-position: 0 -1204px;
}
/* line 83, ../sass/_base.scss */
.icon.tabs_arrow_fashion {
  height: 5px;
  width: 11px;
  background-position: 0 -1219px;
}
/* line 83, ../sass/_base.scss */
.icon.tabs_arrow_food {
  height: 5px;
  width: 11px;
  background-position: 0 -1234px;
}
/* line 83, ../sass/_base.scss */
.icon.tabs_arrow_live {
  height: 5px;
  width: 11px;
  background-position: 0 -1249px;
}
/* line 83, ../sass/_base.scss */
.icon.tabs_arrow_play {
  height: 5px;
  width: 11px;
  background-position: 0 -1264px;
}
/* line 83, ../sass/_base.scss */
.icon.topics {
  height: 33px;
  width: 33px;
  background-position: 0 -484px;
}

/* line 37, ../sass/_sprite.scss */
.logo {
  background-image: url('../img/sprites/logo-sc015afbd0c.png');
  background-repeat: no-repeat;
  display: block;
}
/* line 83, ../sass/_base.scss */
.logo.charthouse {
  height: 40px;
  width: 72px;
  background-position: 0 -50px;
}
/* line 83, ../sass/_base.scss */
.logo.ezogikuk {
  height: 40px;
  width: 41px;
  background-position: 0 -200px;
}
/* line 83, ../sass/_base.scss */
.logo.jcb {
  height: 40px;
  width: 53px;
  background-position: 0 -100px;
}
/* line 83, ../sass/_base.scss */
.logo.kahalamall {
  height: 40px;
  width: 80px;
  background-position: 0 -400px;
}
/* line 83, ../sass/_base.scss */
.logo.kogohira {
  height: 40px;
  width: 228px;
  background-position: 0 0;
}
/* line 83, ../sass/_base.scss */
.logo.naillabo {
  height: 42px;
  width: 46px;
  background-position: 0 -450px;
}
/* line 83, ../sass/_base.scss */
.logo.nakamura {
  height: 40px;
  width: 40px;
  background-position: 0 -300px;
}
/* line 83, ../sass/_base.scss */
.logo.orakino {
  height: 40px;
  width: 87px;
  background-position: 0 -250px;
}
/* line 83, ../sass/_base.scss */
.logo.pfchang {
  height: 40px;
  width: 65px;
  background-position: 0 -350px;
}
/* line 83, ../sass/_base.scss */
.logo.rhc {
  height: 40px;
  width: 133px;
  background-position: 0 -150px;
}

/* ------------------------------------------------------------------
	1-1. Slider
-------------------------------------------------------------------*/
/* line 15, ../sass/top.scss */
#mainslider {
  position: relative;
}
/* line 19, ../sass/top.scss */
#mainslider .slides li {
  display: block;
  float: left;
  width: 100%;
  height: 470px;
  position: relative;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  /**background-image: url(../img/sample/slide01.jpg);*/
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
}
@media (min-width: 1024px) {
  /* line 19, ../sass/top.scss */
  #mainslider .slides li {
    height: 550px;
  }
}
/* line 33, ../sass/top.scss */
#mainslider .slides li article {
  height: 470px;
  position: relative;
  width: 1160px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  /* line 33, ../sass/top.scss */
  #mainslider .slides li article {
    height: 550px;
  }
}
/* line 40, ../sass/top.scss */
#mainslider .slides li article .title-area {
  width: 593px;
  height: 100px;
  background: url(../img/top/bg_slider_title.png) repeat left top;
  position: absolute;
  bottom: 80px;
  left: 10px;
}
/* line 45, ../sass/top.scss */
#mainslider .slides li article .title-area .cat {
  position: absolute;
  top: -75px;
  left: 35px;
}
/* line 47, ../sass/top.scss */
#mainslider .slides li article .title-area .cat span {
  width: 81px;
  color: #fff;
  position: absolute;
  top: 32px;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  font-family: 'Cardo', serif;
}
/* line 57, ../sass/top.scss */
#mainslider .slides li article .title-area .title-text-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}
/* line 65, ../sass/top.scss */
#mainslider .slides li article .title-area h1 {
  position: absolute;
  left: 173px;
  /**float: right;*/
  padding: 18px 30px 0 0;
  width: 430px;
  font-weight: bold;
  line-height: 32px;
  font-size: 18px;
  font-size: 1.8rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 76, ../sass/top.scss */
#mainslider .slides li article .title-area .update {
  font-family: 'Cardo', serif;
  font-size: 20px;
  font-size: 2rem;
  position: absolute;
  bottom: 25px;
  left: 25px;
}
/* line 86, ../sass/top.scss */
#mainslider .slide-nav {
  width: 100%;
  position: absolute;
  top: 210px;
}
@media (min-width: 1024px) {
  /* line 86, ../sass/top.scss */
  #mainslider .slide-nav {
    top: 250px;
  }
}
/* line 93, ../sass/top.scss */
#mainslider .slide-nav a {
  display: block;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* line 98, ../sass/top.scss */
#mainslider .slide-nav a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* line 101, ../sass/top.scss */
#mainslider .slide-nav a.slider_arrow_p {
  position: absolute;
  top: 0px;
  left: 0px;
}
/* line 104, ../sass/top.scss */
#mainslider .slide-nav a.slider_arrow_n {
  position: absolute;
  top: 0px;
  right: 0px;
}
/* line 109, ../sass/top.scss */
#mainslider .control-nav {
  position: absolute;
  left: 52.5%;
  bottom: 78px;
}
/* line 113, ../sass/top.scss */
#mainslider .control-nav li {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
/* line 115, ../sass/top.scss */
#mainslider .control-nav li a {
  display: block;
  width: 13px;
  height: 13px;
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* line 123, ../sass/top.scss */
#mainslider .control-nav li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* line 126, ../sass/top.scss */
#mainslider .control-nav li a.current {
  background: #fff;
}

/* ------------------------------------------------------------------
	1-2. WHAT'S NEW
-------------------------------------------------------------------*/
/* line 139, ../sass/top.scss */
#new {
  width: 100%;
  height: 65px;
  position: relative;
  background: #fff;
  z-index: 9;
  -webkit-box-shadow: 0 0 6px 0 #908f8c;
  -moz-box-shadow: 0 0 6px 0 #908f8c;
  box-shadow: 0 0 6px 0 #908f8c;
  behavior: url("http://www.hawaiist.net/wp-content/themes/hawaii/css/js/PIE.htc");
}
/* line 147, ../sass/top.scss */
#new .box-wrap {
  margin: 0 auto;
  width: 1160px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 151, ../sass/top.scss */
#new .box-wrap h1 {
  float: left;
  width: 186px;
  height: 65px;
  color: #fff;
  text-align: center;
  line-height: 70px;
  background: #908f8c;
  font-size: 14px;
  font-size: 1.4rem;
}
/* line 161, ../sass/top.scss */
#new .box-wrap .box-new {
  position: relative;
  float: left;
  width: 954px;
  padding: 22px 0 0 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 167, ../sass/top.scss */
#new .box-wrap .box-new .arrow {
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-right-color: white;
  position: absolute;
  top: 26px;
  left: -14px;
}
/* line 171, ../sass/top.scss */
#new .box-wrap .box-new .new-ticker {
  height: 23px;
  overflow: hidden;
  font-size: 14px;
  font-size: 1.4rem;
}
/* line 176, ../sass/top.scss */
#new .box-wrap .box-new span {
  padding-right: 23px;
}
/* line 179, ../sass/top.scss */
#new .box-wrap .box-new .title {
  width: 690px;
  letter-spacing: 0.05em;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  /**@extend %ellipsis;*/
}
/* line 185, ../sass/top.scss */
#new .box-wrap .box-new .title a {
  color: #1e82b1;
}
/* line 187, ../sass/top.scss */
#new .box-wrap .box-new .title a:hover {
  text-decoration: underline;
}
/* line 192, ../sass/top.scss */
#new .box-wrap .box-new .more-btn {
  padding-right: 30px;
  position: absolute;
  top: 22px;
  right: 0px;
  font-size: 14px;
  font-size: 1.4rem;
}
/* line 196, ../sass/top.scss */
#new .box-wrap .box-new .more-btn a {
  color: #000;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
/* line 199, ../sass/top.scss */
#new .box-wrap .box-new .more-btn a:hover {
  color: #ad903e;
}
/* line 202, ../sass/top.scss */
#new .box-wrap .box-new .more-btn a:after {
  content: '';
  position: absolute;
  top: 1px;
  right: 0px;
  background-image: url('../img/sprites/icon-sc21ef756fc.png');
  background-repeat: no-repeat;
  display: block;
  height: 17px;
  width: 17px;
  background-position: 0 -918px;
}

/* ------------------------------------------------------------------
	1-3. Banner
-------------------------------------------------------------------*/
/* line 218, ../sass/top.scss */
.ban-area {
  width: 1160px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 220, ../sass/top.scss */
.ban-area ul {
  padding: 20px 0;
}
/* line 223, ../sass/top.scss */
.ban-area ul li {
  float: left;
  margin-right: 8px;
}
/* line 226, ../sass/top.scss */
.ban-area ul li:last-child {
  margin-right: 0;
}
/* line 229, ../sass/top.scss */
.ban-area ul li a {
  display: block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-box-shadow: 0 0 3px 1px #dededd;
  -moz-box-shadow: 0 0 3px 1px #dededd;
  box-shadow: 0 0 3px 1px #dededd;
}
/* line 155, ../sass/_base.scss */
.ban-area ul li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

/* ------------------------------------------------------------------
	1-4. Main Styles
-------------------------------------------------------------------*/
/* line 242, ../sass/top.scss */
#main {
  background: #f6f5f5 url(../img/top/bg_main_pict.png) no-repeat right top;
}
/* line 245, ../sass/top.scss */
#main #contents {
  padding-top: 50px;
  padding-bottom: 70px;
  width: 1160px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 249, ../sass/top.scss */
#main #contents .top-title {
  border-bottom: solid 1px #c7c6c6;
  margin-bottom: 40px;
  padding-bottom: 20px;
}
/* line 253, ../sass/top.scss */
#main #contents .top-title .en {
  font-family: 'Cardo', serif;
  font-size: 30px;
  font-size: 3rem;
}
/* line 257, ../sass/top.scss */
#main #contents .top-title .jan {
  font-size: 11px;
  font-size: 1.1rem;
  padding-left: 13px;
}
/* line 260, ../sass/top.scss */
#main #contents .top-title .jan:before {
  content: '/';
  padding-right: 13px;
}

/* Topics
-------------------------------------------------------------------*/
/* line 273, ../sass/top.scss */
#topics {
  float: left;
  width: 873px;
}
/* line 276, ../sass/top.scss */
#topics .article-list {
  margin-right: -12px;
  margin-bottom: 0px;
}
/* line 280, ../sass/top.scss */
#topics .article-list .box-article {
  float: left;
  width: 283px;
  height: 320px;
  margin: 0 12px 12px 0;
  background: #fff;
  overflow: hidden;
  -webkit-transition: box-shadow 0.2s linear;
  -moz-transition: box-shadow 0.2s linear;
  -o-transition: box-shadow 0.2s linear;
  transition: box-shadow 0.2s linear;
  background: #fff;
  -webkit-box-shadow: 0 1px 2px 1px #dededd;
  -moz-box-shadow: 0 1px 2px 1px #dededd;
  box-shadow: 0 1px 2px 1px #dededd;
}
/* line 289, ../sass/top.scss */
#topics .article-list .box-article:hover {
  -webkit-box-shadow: 0 0 10px 3px #cbcbc9;
  -moz-box-shadow: 0 0 10px 3px #cbcbc9;
  box-shadow: 0 0 10px 3px #cbcbc9;
}
/* line 292, ../sass/top.scss */
#topics .article-list .box-article a {
  display: block;
  width: 283px;
  height: 320px;
  position: relative;
}
/* line 297, ../sass/top.scss */
#topics .article-list .box-article a .title-area {
  position: relative;
}
/* line 299, ../sass/top.scss */
#topics .article-list .box-article a .title-area .round {
  width: 80px;
  height: 80px;
  background: #fff;
  position: absolute;
  top: -23px;
  left: -6px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  behavior: url("http://www.hawaiist.net/wp-content/themes/hawaii/css/js/PIE.htc");
}
/* line 307, ../sass/top.scss */
#topics .article-list .box-article a .title-area .cat {
  width: 53px;
  position: absolute;
  top: -15px;
  left: 7px;
  font-size: 11px;
  font-size: 1.1rem;
  font-family: 'Cardo', serif;
}
/* line 312, ../sass/top.scss */
#topics .article-list .box-article a .title-area .cat span {
  width: 53px;
  text-align: center;
  letter-spacing: 0;
  position: absolute;
  bottom: -25px;
}
/* line 320, ../sass/top.scss */
#topics .article-list .box-article a .title-area h1 {
  width: 202px;
  font-weight: bold;
  line-height: 23px;
  word-break: break-all;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  font-size: 1.4rem;
}
/* line 329, ../sass/top.scss */
#topics .article-list .box-article a .spec {
  width: 100%;
  padding: 4px 7px;
  text-align: right;
  border-top: solid 1px #dededd;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
/* line 336, ../sass/top.scss */
#topics .article-list .box-article a .spec time {
  color: #666;
  font-family: 'Cardo', serif;
  font-size: 12px;
  font-size: 1.2rem;
}
/* line 344, ../sass/top.scss */
#topics .article-list .ad {
  float: left;
  width: 283px;
  height: 320px;
  position: relative;
}

#topics .btn-more {
  margin-bottom: 40px;
  position: relative;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  background: #908f8c;
  cursor: pointer;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}
/* line 513, ../sass/top.scss */
#topics .btn-more:hover {
  background: #666666;
}
/* line 516, ../sass/top.scss */
#topics .btn-more a {
  display: block;
  height: 50px;
  color: #fff;
}
/* line 520, ../sass/top.scss */
#topics .btn-more a p {
  font-size: 15px;
  font-size: 1.5rem;
}
/* line 522, ../sass/top.scss */
#topics .btn-more a p:after {
  content: '';
  position: absolute;
  top: 16px;
  right: 15px;
  background-image: url('../img/sprites/icon-sc21ef756fc.png');
  background-repeat: no-repeat;
  display: block;
  height: 18px;
  width: 18px;
  background-position: 0 -995px;
}

/* line 389, ../sass/top.scss */
#topics .column .columnist {
  margin-top: 35px;
}
/* line 392, ../sass/top.scss */
#topics .column .columnist li {
  float: left;
  margin-left: 25px;
}
/* line 395, ../sass/top.scss */
#topics .column .columnist li a {
  display: block;
  width: 187px;
  height: 320px;
  text-align: center;
}
/* line 400, ../sass/top.scss */
#topics .column .columnist li a .round-column {
  border: solid 1px #fff;
  width: 187px;
  height: 187px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}
/* line 405, ../sass/top.scss */
#topics .column .columnist li a .round-column .pict {
  background: #fff;
  width: 170px;
  height: 170px;
  margin: 8px auto 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 2px 1px #dededd;
  -moz-box-shadow: 0 1px 2px 1px #dededd;
  box-shadow: 0 1px 2px 1px #dededd;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  -webkit-transition: box-shadow 0.2s linear;
  -moz-transition: box-shadow 0.2s linear;
  -o-transition: box-shadow 0.2s linear;
  transition: box-shadow 0.2s linear;
  behavior: url("http://www.hawaiist.net/wp-content/themes/hawaii/css/js/PIE.htc");
}
/* line 414, ../sass/top.scss */
#topics .column .columnist li a .round-column .pict img {
  width: 156px;
  height: 156px;
  padding-top: 7px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}
/* line 422, ../sass/top.scss */
#topics .column .columnist li a .title-column {
  margin-top: 10px;
  color: #000;
  letter-spacing: 0;
  line-height: 1.7;
  font-size: 13px;
  font-size: 1.3rem;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
/* line 430, ../sass/top.scss */
#topics .column .columnist li a .name-columnist {
  margin-top: 24px;
  font-weight: bold;
  color: #000;
  padding-bottom: 10px;
  border-bottom: solid 1px #dededd;
  font-size: 12px;
  font-size: 1.2rem;
  -webkit-box-shadow: 0 1px 0 0 white;
  -moz-box-shadow: 0 1px 0 0 white;
  box-shadow: 0 1px 0 0 white;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
/* line 441, ../sass/top.scss */
#topics .column .columnist li a:hover .pict {
  -webkit-box-shadow: 0 0 10px 3px #cbcbc9;
  -moz-box-shadow: 0 0 10px 3px #cbcbc9;
  box-shadow: 0 0 10px 3px #cbcbc9;
}
/* line 444, ../sass/top.scss */
#topics .column .columnist li a:hover .title-column, #topics .column .columnist li a:hover .name-columnist {
  color: #ad903e;
}

/* Hawaiinfo
-------------------------------------------------------------------*/
/* line 458, ../sass/top.scss */
#info {
  float: right;
  width: 242px;
}
/* line 461, ../sass/top.scss */
#info .box-info {
  background: #fff;
  -webkit-box-shadow: 0 1px 2px 1px #dededd;
  -moz-box-shadow: 0 1px 2px 1px #dededd;
  box-shadow: 0 1px 2px 1px #dededd;
}
/* line 464, ../sass/top.scss */
#info .box-info .info-list a {
  display: block;
  padding: 28px 15px;
  border-bottom: solid 1px #dededd;
  -webkit-transition: box-shadow 0.2s linear;
  -moz-transition: box-shadow 0.2s linear;
  -o-transition: box-shadow 0.2s linear;
  transition: box-shadow 0.2s linear;
  -webkit-box-shadow: 0 0 0 0 #cbcbc9;
  -moz-box-shadow: 0 0 0 0 #cbcbc9;
  box-shadow: 0 0 0 0 #cbcbc9;
}
/* line 163, ../sass/_base.scss */
#info .box-info .info-list a:hover {
  -webkit-box-shadow: 0 0 10px 3px #cbcbc9;
  -moz-box-shadow: 0 0 10px 3px #cbcbc9;
  box-shadow: 0 0 10px 3px #cbcbc9;
}
/* line 469, ../sass/top.scss */
#info .box-info .info-list a .name {
  width: 202px;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 14px;
  font-size: 1.4rem;
  /**@extend %ellipsis;*/
}
/* line 478, ../sass/top.scss */
#info .box-info .info-list a .shop-data .figure-shop {
  float: left;
  width: 100px;
}
/* line 482, ../sass/top.scss */
#info .box-info .info-list a .shop-data ul {
  float: right;
  width: 105px;
}
/* line 485, ../sass/top.scss */
#info .box-info .info-list a .shop-data ul li {
  background: #f5f2f2;
  padding: 2px 2px 1px;
  text-align: center;
  border-bottom: solid 1px #fff;
  line-height: 1.9;
  letter-spacing: 0;
  font-size: 11px;
  font-size: 1.1rem;
}
/* line 493, ../sass/top.scss */
#info .box-info .info-list a .shop-data ul li:last-child {
  border-bottom: none;
}
/* line 498, ../sass/top.scss */
#info .box-info .info-list a .shop-data .coupon {
  clear: both;
}
/* line 504, ../sass/top.scss */
#info .box-info .btn-more {
  position: relative;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  background: #908f8c;
  cursor: pointer;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}
/* line 513, ../sass/top.scss */
#info .box-info .btn-more:hover {
  background: #666666;
}
/* line 516, ../sass/top.scss */
#info .box-info .btn-more a {
  display: block;
  height: 50px;
  color: #fff;
}
/* line 520, ../sass/top.scss */
#info .box-info .btn-more a p {
  font-size: 15px;
  font-size: 1.5rem;
}
/* line 522, ../sass/top.scss */
#info .box-info .btn-more a p:after {
  content: '';
  position: absolute;
  top: 16px;
  right: 15px;
  background-image: url('../img/sprites/icon-sc21ef756fc.png');
  background-repeat: no-repeat;
  display: block;
  height: 18px;
  width: 18px;
  background-position: 0 -995px;
}

/* Most Popular
-------------------------------------------------------------------*/
/* line 537, ../sass/top.scss */
#popular {
  clear: both;
  padding-top: 80px;
}
/* line 542, ../sass/top.scss */
#popular .popular-box .item {
  float: left;
  width: 360px;
  margin-right: 30px;
  background: #fff;
  -webkit-box-shadow: 0 1px 2px 1px #dededd;
  -moz-box-shadow: 0 1px 2px 1px #dededd;
  box-shadow: 0 1px 2px 1px #dededd;
}
/* line 547, ../sass/top.scss */
#popular .popular-box .item:last-child {
  margin-right: 0;
}
/* line 550, ../sass/top.scss */
#popular .popular-box .item .head {
  position: relative;
  background-image: url(../img/common/stroke.gif);
  background-repeat: repeat-x;
  background-position: left bottom;
}
/* line 553, ../sass/top.scss */
#popular .popular-box .item .head .title-type {
  font-weight: bold;
  padding: 20px;
  line-height: 1.6;
  font-size: 17px;
  font-size: 1.7rem;
}
/* line 559, ../sass/top.scss */
#popular .popular-box .item .head .title-type span {
  font-weight: normal;
  display: block;
  color: #666;
  font-size: 11px;
  font-size: 1.1rem;
}
/* line 566, ../sass/top.scss */
#popular .popular-box .item .head .more-btn {
  padding-right: 30px;
  position: absolute;
  top: 30px;
  right: 20px;
  font-size: 14px;
  font-size: 1.4rem;
}
/* line 570, ../sass/top.scss */
#popular .popular-box .item .head .more-btn a {
  color: #000;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
/* line 573, ../sass/top.scss */
#popular .popular-box .item .head .more-btn a:after {
  content: '';
  position: absolute;
  top: 1px;
  right: 0px;
  background-image: url('../img/sprites/icon-sc21ef756fc.png');
  background-repeat: no-repeat;
  display: block;
  height: 17px;
  width: 17px;
  background-position: 0 -918px;
}
/* line 578, ../sass/top.scss */
#popular .popular-box .item .head .more-btn a:hover {
  color: #ad903e;
}
/* line 584, ../sass/top.scss */
#popular .popular-box .item .box-article {
  border-bottom: solid 1px #dededd;
}
/* line 586, ../sass/top.scss */
#popular .popular-box .item .box-article a {
  display: block;
  position: relative;
  padding: 20px;
  -webkit-transition: box-shadow 0.2s linear;
  -moz-transition: box-shadow 0.2s linear;
  -o-transition: box-shadow 0.2s linear;
  transition: box-shadow 0.2s linear;
  -webkit-box-shadow: 0 0 0 0 #cbcbc9;
  -moz-box-shadow: 0 0 0 0 #cbcbc9;
  box-shadow: 0 0 0 0 #cbcbc9;
}
/* line 163, ../sass/_base.scss */
#popular .popular-box .item .box-article a:hover {
  -webkit-box-shadow: 0 0 10px 3px #cbcbc9;
  -moz-box-shadow: 0 0 10px 3px #cbcbc9;
  box-shadow: 0 0 10px 3px #cbcbc9;
}
/* line 592, ../sass/top.scss */
#popular .popular-box .item .box-article a figure {
  width: 124px;
  float: left;
}
/* line 596, ../sass/top.scss */
#popular .popular-box .item .box-article a .waku {
  width: 60px;
  height: 77px;
  position: absolute;
  top: 26px;
  left: 116px;
  background: url(../img/top/popular_cat_waku.png) no-repeat left top;
}
/* line 602, ../sass/top.scss */
#popular .popular-box .item .box-article a .cat {
  position: absolute;
  top: 30px;
  left: 120px;
}
/* line 606, ../sass/top.scss */
#popular .popular-box .item .box-article a .title-area {
  float: right;
  width: 160px;
}
/* line 609, ../sass/top.scss */
#popular .popular-box .item .box-article a .title-area h1 {
  font-weight: bold;
  line-height: 22px;
  letter-spacing: 0.05em;
  word-break: break-all;
  font-size: 14px;
  font-size: 1.4rem;
}