/* 自社向けナビゲーション */
@charset "UTF-8";

@import url(//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

body {
	margin: 0;
	padding: 0;
}
.fairsforce_recommand_wrap {
	height: 360px;
	overflow-y: auto;
}

.fairsforce_recommand_wrap .recommand_fair {
	margin-bottom: 5px;
	background-color: #fff;
	padding: 10px;
	margin-right: 5px;
}

.fairsforce_recommand_wrap .recommand_detail {
	display: flex;
	justify-content: space-between;
}

/* フェアブロック全体 */
#fairsforce {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
	line-height: 1;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}

.fairListArea .fair_article {
	padding: 18px 0;
	border-bottom: 1px solid #000;
	margin-right: 5px;
}

.fairListArea .fair_article:last-child {
	border-bottom: 0;
}

.fairListArea .fair_article[data-fairweekeng="Sat"] .fairContent {
	border-left: 5px solid #d3e6f6;
}

.fairListArea .fair_article[data-fairweekeng="Sun"] .fairContent {
	border-left: 5px solid #fad4c5;
}

.fair_contents {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.fairContent .fair_date {
	width: 20%;
	box-sizing: border-box;
	padding: 0 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fairContent .fair_date span {
	display: block;
	width: 100%;
}

.fairContent .fair_date span.month {
	font-size: 22px;
	text-align: left;
	position: relative;
	left: 10%;
}

.fairContent .fair_date span.month::after {
	content: "";
	width: 80%;
	height: 1px;
	background-color: #000;
	transform: translateX(-50%) rotate(-60deg);
	position: absolute;
	left: 40%;
	bottom: 0;
}

.fair_article[data-fairweekeng="Sat"] .fairContent .fair_date span.month::after {
	background-color: #d3e6f6;
}

.fair_article[data-fairweekeng="Sun"] .fairContent .fair_date span.month::after {
	background-color: #fad4c5;
}

.fairContent .fair_date span.day {
	font-size: 28px;
	text-align: center;
	padding-left: 10px;
}

.fairContent .fair_date span.week {
	font-size: 20px;
	text-align: center;
}

.fairContent .fair_date span.week::before {
	content: "（";
}

.fairContent .fair_date span.week::after {
	content: "）";
}

.fairsforce_wp {
	width: 35%;
	padding-left: 5%;
}

#fairsforce .title,
#fairsforce .lead,
#fairsforce .fair_navigation {
	width: 497px;
}

#fairsforce .title {
	margin-bottom: 12px;
}

#fairsforce .lead {
	margin: 0 0 30px;
	line-height: 1.3;
}

/* フェアブロック内のリンク */
#fairsforce a {
	text-decoration: none;
	color: inherit;
}

/* カレンダーブロック */
#fairsforce .fair_navigation {
	width: 42%;
	/* background-color: #fff; */
}

#fairsforce .fair_navigation::before {
	content: "日程からフェアを探す";
	display: block;
	text-align: left;
	font-size: 16px;
	padding-top: 5px;
	font-weight: bold;
}

/* カレンダー見出し枠 */
#fairsforce .fair_navi_header {
	overflow: hidden;
	margin-bottom: 25px;
	padding: 0 30px;
}

/* カレンダー見出し表示 */
#fairsforce .fair_navi_panel {
	width: 100%;
	overflow: hidden;
}

/* 範囲外の先月・翌月ボタン */
#fairsforce div.fair_month_disable {
	color: transparent;
	width: 100px;
	cursor: default;
}

/* 先月ボタン */
#fairsforce .fair_month_back {
	float: left;
	width: 100px;
	font-size: 13px;
	display: block;
	cursor: pointer;
	margin-top: 70px;
	color: #4d4d4d;
}

/* 先月ボタンに付加する記号 */
#fairsforce .fair_month_back::before {
	font-size: 13px;
	content: "\f0d9  BACK";
	font-family: "FontAwesome";
}

/* 翌月ボタン */
#fairsforce .fair_month_next {
	float: right;
	display: block;
	width: 100px;
	margin-top: 70px;
	font-size: 13px;
	text-align: right;
	cursor: pointer;
	color: #4d4d4d;
}

/* 翌月ボタンに付加する記号 */
#fairsforce .fair_month_next::after {
	font-size: 13px;
	content: "NEXT \f0da";
	font-family: "FontAwesome";
}

/* 年表示 */
#fairsforce .fair_calendar_year {
	display: none;
}

/* 当月表示 */
#fairsforce .fair_calendar_month {
	display: block;
	font-size: 50px;
	padding-top: 15px;
	line-height: 1;
	text-align: center;
	font-family: "Roboto", sans-serif;
}

/* 当月表示に付加する記号 */
#fairsforce .fair_month_decorate {
	display: none;
}

#fairsforce .fair_calendar_month::after {
	font-size: 17px;
	font-weight: bold;
	display: block;
	text-align: center;
	font-family: "Roboto", sans-serif;
	letter-spacing: 2px;
}

#fairsforce .fair_calendar_month.month1::after {
	content: "JANUARY";
}

#fairsforce .fair_calendar_month.month2::after {
	content: "FEBRUARY";
}

#fairsforce .fair_calendar_month.month3::after {
	content: "MARCH";
}

#fairsforce .fair_calendar_month.month4::after {
	content: "APRIL";
}

#fairsforce .fair_calendar_month.month5::after {
	content: "MAY";
}

#fairsforce .fair_calendar_month.month6::after {
	content: "JUNE";
}

#fairsforce .fair_calendar_month.month7::after {
	content: "JULY";
}

#fairsforce .fair_calendar_month.month8::after {
	content: "AUGUST";
}

#fairsforce .fair_calendar_month.month9::after {
	content: "SEPTEMBER";
}

#fairsforce .fair_calendar_month.month10::after {
	content: "OCTOBER";
}

#fairsforce .fair_calendar_month.month11::after {
	content: "NOVEMBER";
}

#fairsforce .fair_calendar_month.month12::after {
	content: "DECEMBER";
}

/* カレンダー枠 */
#fairsforce .fair_navi_window {
	height: 240px; /* カレンダー1ヵ月分の高さ */
	overflow: hidden;
	padding: 0 30px;
}

/* カレンダー表示 */
#fairsforce .fair_calendar_list {
	position: relative; /* スクロール位置指定可能に */
	transition-property: top;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

/* カレンダー1ヵ月分のテーブル */
#fairsforce .fair_calendar {
	width: 100%;
	margin-bottom: 40px; /* 次月のカレンダーが隠れる値に調整 */
	border-collapse: collapse;
	border-spacing: 0px;
}

/* カレンダーの曜日セル */
#fairsforce .fair_calendar th {
	font-size: 11px;
	color: #a39277;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
	font-weight: bold;
	width: 14.7%;
}

/* カレンダーの曜日文字 */
#fairsforce .fair_calendar th::before {
	font-size: 14;
	display: block;
	width: 100%;
	font-weight: normal;
	margin-bottom: 4px;
	padding: 2px 0;
	text-align: center;
}

/* カレンダーの日付セル */
#fairsforce .fair_calendar td {
	font-size: 14px;
	font-weight: bold;
	height: 35px;
	text-align: center;
	vertical-align: middle;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}

/* カレンダーの過去日付 */
#fairsforce .fair_calendar td.past {
	color: lightgray;
}

/* カレンダーの日曜日付 */
#fairsforce .fair_calendar td.week0 a {
	background-color: #fad4c5;
	width: 30px;
	height: 30px;
	border-radius: 15px;
}
#fairsforce .fair_calendar td a.type00 {
	background-color: #fad4c5;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}

/* カレンダーの土曜日付 */
#fairsforce .fair_calendar td.week6 a {
	background-color: moccasin;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}

/* カレンダーの文字 */
#fairsforce .fair_calendar a {
	line-height: 30px;
	display: inline-block;
	height: 29px;

	cursor: pointer;
}
#fairsforce .fair_calendar a.weekday {
	background-color: lightblue;
	width: 30px;
	height: 30px;
}

#fairsforce .fair_calendar a.type01 {
	background-color: #eaccd6;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}

#fairsforce .fair_calendar a.type02 {
	background-color: #b4ccda;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}

#fairsforce .fair_calendar a.type03 {
	width: 30px;
	height: 30px;
}

#fairsforce .fair_calendar a.type04 {
	background-color: orange !important;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}

#fairsforce .fair_calendar a.type05 {
	background-color: #dfcf9f;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}

#fairsforce .fair_calendar a.type06 {
	background-color: lightblue;
	border-radius: 15px;
	width: 30px;
	height: 30px;
}
#fairsforce .fair_calendar a:not([class*="type"]) {
	pointer-events: none !important;
	color: lightgray !important;
	background-color: inherit !important;
}
/* カレンダーの日付の色（６色分） */
/*
#fairsforce .fair_calendar a.type00 {
	border-bottom: 1px solid #a6781d;

}

#fairsforce .fair_calendar a.type07 {
	border-bottom: 1px solid #a6781d;
}

#fairsforce .fair_calendar a.type08 {
	border-bottom: 1px solid #a6781d;
}*/

/* フェア一覧ブロック */
#fairsforce .fair_section {
	width: 490px;
	display: block;
}

#fairsforce .fair_section:before {
	content: "おすすめフェア";
	display: block;
	padding-bottom: 8px;
	padding-top: 5px;
	/* text-align: center; */
	font-size: 16px;
	font-weight: bold;
}

/* フェア表示枠（3フェア分） */
#fairsforce .fair_info_window {
	display: block;
	width: 490px;
	height: 350px;
	overflow: auto;
}

/* 各フェアの情報枠 */

#fairsforce .fair_article td {
	padding: 1px 0;
	border-bottom: 1px solid #ccc;
}

#fairsforce .fair_article td a {
	margin-top: -180px;
	padding-top: 180px;
	display: block;
}

#fairsforce .fair_article * {
	vertical-align: top;
}
#fairsforce .fair_header {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* フェア開催日 */
#fairsforce .fair_date {
	padding: 10px 0;
	text-align: center;
	font-size: 18px;
}

/* フェア開催日（年） */
#fairsforce .fair_year {
	display: none; /* 使わない */
}

/* フェア開催日（月の最後を利用して"／"表示）*/
#fairsforce .fair_month::after {
	content: "/";
}

/* フェア開催日（曜日） */
#fairsforce .fair_week {
	font-size: 14px;
	line-height: 1;
	text-align: center;
	display: block;
	margin-top: 8px;
}

#fairsforce .fair_week.week0::before {
	color: #da4214;
	content: "[日]";
}

#fairsforce .fair_week.week1::before {
	content: "[月]";
}

#fairsforce .fair_week.week2::before {
	content: "[火]";
}

#fairsforce .fair_week.week3::before {
	content: "[水]";
}

#fairsforce .fair_week.week4::before {
	content: "[木]";
}

#fairsforce .fair_week.week5::before {
	content: "[金]";
}

#fairsforce .fair_week.week6::before {
	color: #00a1e9;
	content: "[土]";
}

/* フェア名 */
#fairsforce .fair_name {
	margin: 5px 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: bold;
}

/* 掲載画像サムネイル */
#fairsforce .fair_photo {
	width: 105px;
	height: 105px;
	overflow: hidden;
}

#fairsforce .fair_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* フェア内容ブロック */
.txt_wrap {
	width: 270px;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}
#fairsforce .fair_summary {
	margin-bottom: 8px;
}

/* フェア詳細 */
#fairsforce .fair_description {
	padding-left: 5px;
	font-size: 11px;
	line-height: 1.4;
	overflow: hidden;
	color: #666;
}

/* 詳細表示ボタン */
#fairsforce .fair_detail {
	margin-top: 6px !important;
	float: right;
	font-weight: bold;
	padding-top: 0;
}

/* 詳細表示ボタン */
#fairsforce .fair_detail::before {
	content: "More≫≫";
	font-size: 12px;
	font-weight: normal;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}

/* 予約申し込みボタン */
#fairsforce .fair_reserve {
	display: none; /* 使わない */
}
.fairListArea.type01,
.fairListArea.type02 {
	width: 50%;
	margin-top: 0;
	position: relative;
	background: #fff;
}
.fairListArea.type01 dt,
.fairListArea.type02 dt {
	background: #e6e6e6;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 27px;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}
.fair_pulldown {
	display: none;
}
.fairListArea.type01 dd,
.fairListArea.type02 dd {
	height: 315px;
	overflow-y: scroll;
	margin: 0;
	padding: 0;
}
.fairListArea dd a {
	text-decoration: none;
	color: #000;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}

.fairContent {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.fairListArea dd figure {
	width: 30%;
	height: auto;
	margin: 0;
	background-size: cover;
	background-position: 50% 50%;
}

.fairContent .right {
	width: 50%;
	padding-left: 5px;
	text-align: left;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
}

.fairListArea dd .fair_date {
	font-size: 10px;
	color: #0071bc;
	text-decoration: none;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",
		sans-serif;
}

.fairListArea dd .fair_date.week0 {
	color: #c1272d;
}

.fairListArea dd h1 {
	font-size: 13px;
	margin: 0;
}
.fairListArea dd .faircaption {
	font-size: 12px;
	color: #666666;
	margin: 5px 0 0;
	padding-bottom: 20px;
	display: block;
	position: relative;
}
.fairListArea dd .faircaption span {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 13px;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	#fairsforce {
		width: 100%;
		flex-flow: column-reverse;
	}
	.fairsforce_recommand_wrap {
		height: 68vw;
	}
	.fairListArea .fair_article {
		padding: 2vw 0;
		margin-right: 0;
	}
	.fairListArea dd figure {
		width: 30%;
		height: auto;
		margin: 0;
		float: left;
		background-size: cover;
	}
	.fairListArea.type01 dd .right,
	.fairListArea.type02 dd .right {
		width: calc(100% - 82px);
	}
	.fairListArea.type01 dd,
	.fairListArea.type02 dd {
		height: 31vh;
		overflow-y: scroll;
		margin: 0;
		margin-bottom: 0px;
		padding: 0;
	}
	.fairListArea.type01,
	.fairListArea.type02 {
		margin-bottom: 30px;
	}
	#fairsforce .title,
	#fairsforce .lead,
	#fairsforce .fair_navigation {
		width: 100%;
	}
	#fairsforce .fair_navigation {
		margin-bottom: 0;
		float: none;
	}
	#fairsforce .fair_section:before {
		padding-top: 0;
	}
	#fairsforce .fair_navigation::before {
		padding: 0;
		margin-bottom: 2%;
		text-align: center;
	}
	#fairsforce .fair_navi_header {
		height: auto;
		margin-bottom: 25px;
		padding: 0 5%;
	}
	#fairsforce .fair_calendar_month {
		float: none;
		width: 100%;
		font-size: 45px;
	}
	#fairsforce .fair_navi_panel {
		width: 100%;
	}
	#fairsforce .fair_calendar {
		width: 99%;
	}
	#fairsforce .fair_calendar td {
		height: 36px;
	}
	#fairsforce .fair_section {
		width: 100%;
		margin-bottom: 10%;
		display: none;
	}
	#fairsforce .fair_info_window {
		width: 100%;
	}
	#fairsforce .fair_table {
		width: 100%;
	}
	#fairsforce .fair_article td:first-child {
		width: 20%;
	}
	.fairsforce_recommand_wrap .recommand_fair {
		margin-right: 0;
	}
	#fairsforce .fair_header {
		width: 18%;
	}
	#fairsforce .fair_photo {
		width: 22%;
		height: auto;
	}
	#fairsforce .fair_photo img {
		width: 100%;
		height: auto;
	}
	#fairsforce .txt_wrap {
		width: 54%;
	}
	#fairsforce .fair_article td:last-child {
		width: 50%;
	}
	#fairsforce .fair_name {
		width: 100%;
		font-size: 12px;
	}
	#fairsforce .fair_description {
		display: none;
	}
	#fairsforce .fair_navi_window {
		height: 205px;
		overflow: hidden;
		padding: 0 10px;
	}
	#fairsforce .fair_calendar {
		width: 100%;
		table-layout: fixed;
		word-break: break-all;
		word-wrap: break-all;
	}

	#fairsforce .fair_calendar td {
		font-size: 12px;
		height: 27px;
		text-align: center;
		vertical-align: middle;
		width: 14%;
	}
	.fairsforce_wp {
		width: 100%;
		float: none;
		margin-right: 0;
	}
	#fairsforce .fair_month_next {
		float: right;
		display: block;
		width: 100px;
		margin-top: 50px;
		font-size: 12px;
		text-align: right;
		cursor: pointer;
		text-decoration: underline;
		color: #3e3e3e;
	}
	#fairsforce .fair_month_back {
		float: left;
		width: 100px;
		font-size: 13px;
		display: block;
		cursor: pointer;
		margin-top: 50px;
		text-decoration: underline;
		color: #4d4d4d;
	}
	.fairListArea.type01 dt,
	.fairListArea.type02 dt {
		background: #e6e6e6;
		color: #000;
		margin-bottom: 10px;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3",
			"メイリオ", sans-serif;
	}

	.fairListArea.type01,
	.fairListArea.type02 {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 0px;
	}

	.fair_pulldown {
		display: block;
		background: #a39277;
		line-height: 40px;
		width: 100%;
		display: none;
	}
	.fair_pulldown:before {
		content: "もっと見る +";
		font-size: 13px;
		display: block;
		width: 100%;
		color: #fff;
		text-align: center;
	}
	.fair_pulldown.opened:before {
		content: "閉じる -";
		font-size: 13px;
		display: block;
		width: 100%;
		color: #fff;
		text-align: center;
	}
	.fair_navi_window table {
		width: 100%;
		box-sizing: border-box;
	}
	.fairListArea.type01 dd.openedcontents,
	.fairListArea.type02 dd.openedcontents {
		height: auto;
	}

	.fair_contents {
		flex-wrap: wrap;
		flex-direction: column;
	}

	.fairListArea dd .faircaption {
		font-size: 10px;
		color: #666666;
	}
}