@charset "utf-8";
/* CSS Document */

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   -1024   - デスクトップ（デフォルトのグリッド）
   1024-768    - タブレット大
   768-480     - タブレット小・スマホ大
   480-less    - スマホ小
--------------------------------------------*/


/*------------------------------------------
  共通項目
--------------------------------------------*/

/*--- 新サイト ---------*/
/* 左カラム（絞り込み）を隠す */
.pane-left-menu, .page-genre .pane-left-menu {
  display: none; 
}

/* ジャンルタイトルの画像を中央配置 */
.block-genre-page--header-img img {
  display: block;
  margin: 0 auto;
}

/*リセット*/
/*
.block-ecfair h1, .block-ecfair h2, .block-ecfair h3, .block-ecfair h4, .block-ecfair h5, .block-ecfair p {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
}
*/
/*.block-ecfair ul {
  list-style: none;
}*/

/*余白*/
.mt0 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}

.mb0 {margin-bottom: 0 !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}

.pt0 {padding-top: 0 !important;}
.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}

.pb0 {padding-bottom: 0 !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb60 {padding-bottom: 60px !important;}

/*文字サイズ*/
.txtSS {
	font-size: 12px !important;
}
.txtS {
	font-size: 14px !important;
}
.txtM {
	font-size: 16px !important;
}
.txtL {
	font-size: 18px !important;
}
.txtLL {
	font-size: 20px !important;
}
.txt22 {
	font-size: 22px !important;
}
.txt28 {
	font-size: 28px !important;
}

/*行高さ*/
.lineh16 {
    line-height: 1.6;
}


/*------------------------------------------
  スマホ用
--------------------------------------------*/

/*コンテンツラッパー*/
.block-ecfair {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	padding: 0 5px;
	display: block;
}

/* コンテンツ上部マージン */
.block-ecfair {
  margin-top: 20px; 
}

/*アンカー位置調整*/
.anchor{
  margin-top: -50px;
  padding-top: 50px;
}

/* 各イベントタイトルのマージン設定 */
.block-top-event--header {
  margin-top: 20px;
}

/* 棚下マージン */
.tana_mt { margin-top: 40px;}

/* ナビボタン領域の拡大 */
a.btn_style {
	display: block;
}


/*表示の制御*/
.pc_none {
  display: block;
}
.sp_none {
  display: none;
}

@media only screen and (max-width: 767px) {
  .spmt0 {margin-top: 0 !important;}
  .spmt05 {margin-top: 5px !important;}
  .spmt10 {margin-top: 10px !important;}
  .spmt20 {margin-top: 20px !important;}
  .spmt30 {margin-top: 30px !important;}
  .spmt40 {margin-top: 40px !important;}
  .spmt50 {margin-top: 50px !important;}
  .spmt60 {margin-top: 60px !important;}

  .spmb20 {margin-bottom: 20px !important;}
  .spmb40 {margin-bottom: 40px !important;}
  .spmb60 {margin-bottom: 60px !important;}
}

/*------------------------------------------
  PC用
--------------------------------------------*/
@media only screen and (min-width: 768px) {

/*コンテンツラッパー*/
.block-ecfair {
	max-width: 1200px;
	padding: 0;
}

/* コンテンツ上部マージン */
.block-ecfair {
  margin-top: 40px; 
}

/*アンカー位置調整*/
.anchor{
  margin-top: -130px;
  padding-top: 130px;
}

/* 各イベントタイトルのマージン設定 */
.block-top-event--header {
  margin-top: 60px;
}

/* 棚下マージン */
.tana_mt { margin-top: 40px;}

/* ナビボタン領域の拡大 */
a.btn_style {
	display: block;
}

.pcmt0 {margin-top: 0 !important;}
.pcmt05 {margin-top: 5px !important;}
.pcmt10 {margin-top: 10px !important;}
.pcmt20 {margin-top: 20px !important;}
.pcmt30 {margin-top: 30px !important;}
.pcmt40 {margin-top: 40px !important;}
.pcmt50 {margin-top: 50px !important;}
.pcmt60 {margin-top: 60px !important;}

/*表示の制御*/
.pc_none {
  display: none;
}
.sp_none {
  display: block;
}

}/* @media end */


/*-- 看板 ----------------------------*/
.title01 {
  position: static !important;
  line-height: 1.2;
  border-bottom: none !important;
  font-weight: bold;
}

.title_guide{
  margin-top: 20px;
  font-size: 16px;
}

/* タイトル用---------------------------------- */
.icon_img {
  width: 60% !important;
  display: block !important;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .icon_img {
    width: 30% !important;
  }
}

.title02 {
  display: block;
  margin: 20px auto 0;
  padding: 5px;
  width: 980px;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 18px;
  text-align: center;
}
.title03 {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 980px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
}
.title03_l {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 980px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px;
}
.title03_l span,
.title03 span {
  border-bottom: 2px solid;
}
.title04 {
	display: block;
	padding: 5px;
	box-sizing: border-box;
  text-align: center;
	color: #FFF;
}

.para01 {
  font-weight: bold;
}

/*リストスタイル*/
.space,
.kome,
.maru,
.sikaku,
.daia,
.sankaku {
  text-indent: -1.4em;
  padding-left: 1.4em;
}
.nakakuro,
.nakaguro {
  text-indent: -1em;
  padding-left: 1em;
}
.kome:before {
    content: "※ ";
}
.maru:before {
    content: "● ";
}
.nakakuro:before,
.nakaguro:before {
    content: "・";
}

/* 1カラムボックス-------------------------------- */
.col1_box {
  overflow: hidden;
  padding: 0;
}
.col1_box_plr5p {
  padding: 20px 5% 40px;
}
 
/* フレックスボックス---------------------------------- */

.flex_box {
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.flex_box_center {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}
.flex_box_left {
	display: flex;
	flex-wrap:wrap;
}
.flex_middle {
	align-items: center;
}

.reverse{
  flex-direction: row-reverse;
}

.flex_item21_11,
.flex_item31_11,
.flex_item32_11,
.flex_item41_11,
.flex_item42_11,
.flex_item43_11,
.flex_item51 {
  width: 100%;
}

.flex_item11 {
  width: 100%;
}
.flex_item21,
.flex_item42,
.flex_item84,
.flex_item31_21,
.flex_item41_21 {
	width: 49%;
}
.flex_item31 {
	width: calc(100% / 3 - 1%);
}
.flex_item32 {
	width: calc(100% / 3 * 2 - 1%);
}
.flex_item41,
.flex_item82 {
	width: 24%;
}
.flex_item42 {
	width: 49%;
}
.flex_item43 {
	width: 74%;
}
.flex_item51 {
	width: 19%;
}
.flex_item52 {
	width: 39%;
}
.flex_item53 {
	width: 59%;
}
.flex_item54 {
	width: 79%;
}
.flex_item61 {
	width: calc(100% / 6 * 1 - 1%);
}
.flex_item62 {
	width: calc(100% / 6 * 2 - 1%);
}
.flex_item63 {
	width: calc(100% / 6 * 3 - 1%);
}
.flex_item64 {
	width: calc(100% / 6 * 4 - 1%);
}
.flex_item65 {
	width: calc(100% / 6 * 5 - 1%);
}
.flex_item81 {
	width: 19%;
}

.item_inner {
  padding: 10px;
  box-sizing: border-box
}

img.flex_img {
	width: 100%;
}

@media only screen and (min-width: 768px) {
.flex_item21_11 {
	width: 49%;
}
.flex_item31_11,
.flex_item31_21 {
	width: calc(100% / 3 - 1%);
}
.flex_item32_11 {
	width: calc(100% / 3 * 2 - 1%);
}
.flex_item41_11,
.flex_item41_21 {
	width: 24%;
}
.flex_item42_11 {
	width: 49%;
}
.flex_item43_11 {
	width: 74%;
}

.flex_order01 {order: 0;}
.flex_order02 {order: 2;}
.flex_order03 {order: 1;}
.flex_order04 {order: 3;}

}/* @media end */


/* ナビボタン・リンクボタン */
a.navi_btn, a.link_btn, a.rank_btn {
	display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 5px;
  text-decoration: none;
}
a.navi_btn {
  padding: 0.5em 2em 0.5em 1em;
}
a.rank_btn {
  padding: 0.5em;
  border-color: #666 !important;
  text-align: center;
  font-size: 14px;
}
a.link_btn {
  justify-content: center;
  margin: 20px 5% 0;
  padding: 0.5em 2em 0.5em 0.5em;
  text-align: center;
}
a.navi_btn img.navi_btn, 
a.link_btn img.link_btn {
	width: 100%;
  max-width: 48px;
	display: block;
  margin: 0 10px 0 0 ;
}
a.navi_btn span, 
a.link_btn span {
  margin-right: 0.5em;
  font-weight: bold;
}
a.navi_btn:after, 
a.link_btn:after {
  content: ">";
  position: absolute;
  top: calc(50% - .8em);
  right: 1em;
}

.bottom_btn {
  margin-top: auto;
}
.bottom_btn_box {
  display: flex;
  flex-direction: column;
}

.rank_icon1,
.rank_icon2,
.rank_icon3,
.rank_icon4,
.rank_icon5,
.rank_icon6,
.rank_icon3s {
background: url(./img/page/yakudach/BlifeRankIcon2.png) no-repeat;
  background-position: 0px 0px;
  margin-right: 0.5em;
  display: block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}
.rank_icon1 {
  background-position: 0px 0px;
}
.rank_icon2 {
  background-position: 0px 50%;
}
.rank_icon3 {
  background-position: 0px 100%;
}
.rank_icon4 {
  background-position: 0px 0px;
}
.rank_icon5 {
  background-position: 0px 0px;
}
.rank_icon6 {
  background-position: 0px 0px;
}
.rank_icon3s {
  background-position: 75% 105%;
  background-size: 80%;
}
@media only screen and (max-width: 768px) {
  a.rank_btn {
    flex-direction: column;
    font-size: 12px;
  }
.rank_icon1,
.rank_icon2,
.rank_icon3,
.rank_icon4,
.rank_icon5,
.rank_icon6,
  .rank_icon3s {
    margin-right: 0;
  }
}

/*ボタン内テキストの改行*/
br.btn01,
br.btn02,
br.btn03 {
  display: block;
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
  br.btn01 {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  br.btn02 {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  br.btn03 {
    display: none;
  }
}