@charset "utf-8";

/* RESPONSIVE */
/* -------------------------------------------------- */
@media screen and (min-width: 1024px) {

	/* 980px以上用（PC用）の記述 */
	/* メインビジュアル */
	#fv::after{
		background: url(../../img/mv/mv_history.jpg) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}

	/* 歴史一覧ページ */
	#historyWrap {
		padding-bottom: 100px;
	}

	#historyList {
		letter-spacing: -.4em;
	}

	.historyItem {
		display: inline-block;
		width: 310px;
		padding: 0 35px 40px 0;
		letter-spacing: 0;
		vertical-align: top;
	}

	.historyItem:nth-child(3n) {
		padding-right: 0;
	}

	.historyItem:nth-last-child(-n+3) {
		padding-bottom: 0;
	}

	.historyItem a {
		display: block;
		transition: all 0.3s ease-in-out 0s;
	}

	.historyItem a:hover {
		color: #333;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	}

	.historySumb {
		width: 100%;
		height: 219px;
		overflow: hidden;
	}

	.historySumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}

	.historyInfo {
		padding: 20px 10px 0;
	}

	.historyName {
		font-weight: bold;
		padding-bottom: 10px;
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.historyIntro {
		padding-bottom: 5px;
		font-size: 1.3rem;
	}

	.historyperiod {
		padding: 8px 5px;
		font-size: 1.3rem;
		line-height: 1;
		text-align: right;
		border-top: 1px solid #fee303;
		color: #000;
		font-weight: bold;
	}

	/* 福岡JC年表 */
	.chronologyWrrap {
		padding-bottom: 60px;

	}

	.chronologyArea.off {
		height: 471px;
		overflow: hidden;
		transition: all 0.3s ease-in-out 0s;
	}

	.chronologyArea.on {
		height: 100%;
	}

	.historyTable {}

		#historyTable {
			width: 100%;
			font-size: 1.6rem;
		}

		#historyTable th {
			padding: 20px;
			text-align: left;
			vertical-align: top;
			border: 1px #DDDDDD solid;
			vertical-align: middle;
			white-space: nowrap;
		}

		#historyTable td {
			padding: 20px;
			border: 1px #DDDDDD solid;
		}

		#historyTable li {
			line-height: 1.3;
			padding: 0.5em 0;
		}

		.month {
			display: inline-block;
			width: 10%;
			vertical-align: top;
		}

		.strong {
			font-weight: bold;
		}

		.ib {
			display: inline-block;
			vertical-align: top;
		}

		.long {
			width: 90%;
			display: inline-block;
			vertical-align: top;
		}

		/* 位置調整 */
		.monthSame {
			margin-left: 10%;
		}

		.chronologyMore {
			font-size: 1.8rem;
			text-align: center;
			line-height: 1;
			padding: 30px 0;
			border: 1px #DDDDDD solid;
			border-top: none;
			font-weight: bold;
			cursor: pointer;
			transition: all 0.3s ease-in-out 0s;
		}

		.chronologyMore:hover {
			opacity: 0.7;
		}

		.chronologyMore.off {
			background: url(../../img/common/icon3.svg) no-repeat right 20px center #fee303;
			margin-bottom: 60px;
		}

		.chronologyMore.on {
			background: url(../../img/common/icon4.svg) no-repeat right 20px center #fee303;
			margin-bottom: 60px;
		}


		/* 歴史詳細ページ */
		#historyDetail {
			padding: 100px 0;
			text-align: center;
		}

		#projectIntro {
			display: inline-block;
			padding: 12px 40px;
			margin-bottom: 40px;
			letter-spacing: 0;
			font-size: 1.9rem;
			line-height: 1;
			font-weight: bold;
			color: #a79451;
			border: 1px solid #a79451;
		}

		#projectTit {
			font-size: 3rem;
			font-weight: bold;
			padding-bottom: 30px;
			letter-spacing: 0;
			line-height: 1.2;
		}

		#projectCopy {
			padding: 30px;
			margin-bottom: 50px;
			font-size: 2.8rem;
			letter-spacing: 0;
			text-align: center;
			color: #a79451;
			border-top: 1px solid #a79451;
			border-bottom: 1px solid #a79451;
		}

		#projectContent {
			width: 900px;
			margin: 0 auto;
			padding-bottom: 60px;
		}

		#projectContent img {
			max-width: 100%;
			height: auto;
			padding-bottom: 20px;
		}

		#projectContent p {
			padding-bottom: 1em;
			text-align: left;
			font-size: 1.6rem;
			letter-spacing: 0;
		}

		#projecturlArea {
			padding-bottom: 65px;
			border-bottom: 1px solid #c9c9c9;
			margin-bottom: 40px;
		}

		#projecturl {
			display: inline-block;
			letter-spacing: 0;
		}

		#projecturl a {
			display: block;
			padding: 10px 58px;
			font-size: 1.8rem;
			color: #a79451;
			border: 1px solid #a79451;
			background: url(../../img/history/out_link_icon_white.png) no-repeat right 20px center #fff;
			transition: all 0.3s ease-in-out 0s;
		}

		#projecturl a:hover {
			color: #fff;
			background: url(../../img/history/out_link_icon_gold.png) no-repeat right 20px center #a79451;
		}

		#historyDetail .commonBtn1 a {
			letter-spacing: 0;
		}

		#historyDetail .commonBtn1 {
			padding-bottom: 60px;
		}

	}

	@media screen and (min-width: 768px) and (max-width: 1023px) {

		/* 768px - 979px用（タブレット用）の記述 */
		/* メインビジュアル */
		#fv::after {
			background: url(../../img/mv/mv_history.jpg) center center no-repeat;
			-webkit-background-size: cover;
			background-size: cover;
		}

		/* 歴史一覧ページ */
		#historyWrap {
			padding-bottom: 60px;
		}

		#historyList {
			letter-spacing: -.4em;
		}

		.historyItem {
			display: inline-block;
			width: 48%;
			padding: 0 4% 40px 0;
			letter-spacing: 0;
			vertical-align: top;
		}

		.historyItem:nth-child(2n) {
			padding-right: 0;
		}

		.historyItem:nth-last-child(-n+2) {
			padding-bottom: 0;
		}

		.historyItem a {
			display: block;
			transition: all 0.3s ease-in-out 0s;
		}

		.historySumb {
			width: 100%;
			height: 219px;
			overflow: hidden;
		}

		.historySumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			font-family: 'object-fit: cover;';
		}

		.historyInfo {
			border: 1px #f1f1f1 solid;
			padding: 10px;
		}

		.historyName {
			font-size: 1.6rem;
			line-height: 1.2;
			font-weight: bold;
			padding-bottom: 10px;
		}

		.historyIntro {
			padding-bottom: 5px;
			font-size: 1.3rem;
		}

		.historyperiod {
			padding: 8px 5px;
			font-size: 1.3rem;
			line-height: 1;
			text-align: right;
			border-top: 1px solid #fee303;
			color: #000;
			font-weight: bold;
		}

		/* 福岡JC年表 */
		.chronologyWrrap {
			padding-bottom: 60px;
		}

		.chronologyArea.off {
			height: 520px;
			overflow: hidden;
			transition: all 0.3s ease-in-out 0s;
		}

		.chronologyArea.on {
			height: 100%;
			transition: all 0.3s ease-in-out 0s;
		}

		.jci {
			padding-bottom: 1em;
		}

		#historyTable {
			width: 100%;
			font-size: 1.4rem;
		}

		#historyTable th {
			text-align: left;
			display: block;
			font-weight: bold;
			font-size: 2rem;
		}

		#historyTable td {
			display: block;
			padding: 10px;
			margin-bottom: 20px;
			border: 1px #DDDDDD solid;
		}

		#historyTable tr:last-child td {
			margin-bottom: 0;
		}

		#historyTable li {
			line-height: 1.3;
			padding: 0.5em 0;
		}

		.month {
			display: inline-block;
			vertical-align: top;
		}

		.strong {
			font-weight: bold;
		}

		.ib {
			display: inline-block;
			vertical-align: top;
		}

		.long {
			width: 90%;
			display: inline-block;
			vertical-align: top;
		}

		.chronologyMore {
			font-size: 1.8rem;
			text-align: center;
			line-height: 1;
			padding: 30px 0;
			margin-top: 20px;
			border: 1px #DDDDDD solid;
			cursor: pointer;
		}

		.chronologyMore.off {
			background: url(../../img/common/icon3.svg) no-repeat right 20px center #fee303;
			background-size: 20px;
			transition: all 0.3s ease-in-out 0s;
			margin-bottom: 40px;
		}

		.chronologyMore.on {
			background: url(../../img/common/icon4.svg) no-repeat right 20px center #fee303;
			background-size: 20px;
			transition: all 0.3s ease-in-out 0s;
			margin-bottom: 40px;
		}


		/* 歴史詳細ページ */
		#historyDetail {
			text-align: center;
			letter-spacing: -.4em;
		}

		#projectIntro {
			display: inline-block;
			padding: 12px 40px;
			margin-bottom: 40px;
			letter-spacing: 0;
			font-size: 1.9rem;
			line-height: 1;
			font-weight: bold;
			color: #a79451;
			border: 1px solid #a79451;
		}

		#projectTit {
			font-size: 3rem;
			font-weight: bold;
			padding-bottom: 30px;
			letter-spacing: 0;
			line-height: 1.2;
		}

		#projectCopy {
			padding: 30px;
			margin-bottom: 50px;
			font-size: 2.8rem;
			letter-spacing: 0;
			text-align: center;
			color: #a79451;
			border-top: 1px solid #a79451;
			border-bottom: 1px solid #a79451;
		}

		#projectContent {
			width: 90%;
			margin: 0 auto;
			padding-bottom: 60px;
		}

		#projectContent img {
			width: 100%;
			padding-bottom: 20px;
			max-width: 100%;
			height: auto;
		}

		#projectContent p {
			padding-bottom: 1em;
			text-align: left;
			font-size: 1.6rem;
			letter-spacing: 0;
		}

		#projecturlArea {
			padding-bottom: 65px;
			border-bottom: 1px solid #c9c9c9;
			margin-bottom: 40px;
		}

		#projecturl {
			display: block;
			letter-spacing: 0;
		}

		#projecturl a {
			display: block;
			padding: 10px 0;
			font-size: 1.8rem;
			color: #a79451;
			border: 1px solid #a79451;
			background: url(../../img/history/sp/out_link_icon_white.png) no-repeat right 20px center #fff;
			background-size: 13px;
		}

		#historyDetail .commonBtn1 a {
			letter-spacing: 0;
			background-color: #a79451;
		}

		#historyDetail .commonBtn1 {
			padding-bottom: 60px;
		}

	}

	@media screen and (max-width: 767px) {

		/* 479px以下用（スマートフォン用）の記述 */
		/* メインビジュアル */
		#fv::after {
			background: url(../../img/mv/mv_history.jpg) center center no-repeat;
			-webkit-background-size: cover;
			background-size: cover;
		}

		/* 歴史一覧ページ */
		#historyWrap {}

			#historyList {
				letter-spacing: -.4em;
			}

			.historyItem {
				display: inline-block;
				width: 100%;
				padding: 0 0 30px 0;
				letter-spacing: 0;
				vertical-align: top;
			}

			.historyItem a {
				display: block;
				transition: all 0.3s ease-in-out 0s;
			}

			.historySumb {
				width: 100%;
				height: 219px;
				overflow: hidden;
			}

			.historySumb img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				font-family: 'object-fit: cover;';
			}

			.historyInfo {
				border: 1px #f1f1f1 solid;
				padding: 10px;
			}

			.historyName {
				font-size: 1.6rem;
				font-weight: bold;
				padding-bottom: 5px;
				line-height: 1.2;
			}

			.historyIntro {
				padding-bottom: 5px;
				font-size: 1.3rem;
			}

			.historyperiod {
				padding: 5px;
				font-size: 1.3rem;
				line-height: 1;
				border-top: 1px solid #fee303;
				color: #000;
				font-weight: bold;
			}

			/* 福岡JC年表 */
			.chronologyWrrap {
				padding-bottom: 40px;
			}

			.chronologyArea.off {
				height: 538px;
				overflow: hidden;
				transition: all 0.3s ease-in-out 0s;
			}

			.chronologyArea.on {
				height: 100%;
				transition: all 0.3s ease-in-out 0s;
			}

			.jci {
				padding-bottom: 1em;
			}

			#historyTable {
				width: 100%;
				font-size: 1.4rem;
			}

			#historyTable th {
				text-align: left;
				display: block;
				font-weight: bold;
				font-size: 2rem;
			}

			#historyTable td {
				display: block;
				padding: 10px;
				margin-bottom: 20px;
				border: 1px #DDDDDD solid;
			}

			#historyTable tr:last-child td {
				margin-bottom: 0;
			}

			#historyTable li {
				line-height: 1.3;
				padding: 0.5em 0;
			}

			.month {
				display: inline-block;
				vertical-align: top;
			}

			.strong {
				font-weight: bold;
			}

			.ib {
				display: inline-block;
				vertical-align: top;
			}

			.long {
				width: 90%;
				display: inline-block;
				vertical-align: top;
			}

			/* 位置調整 */
			.monthSame {
				display: inline-block;
				padding-top: 5px;
				line-height: 1.2;
			}

			.chronologyMore {
				font-size: 1.8rem;
				text-align: center;
				line-height: 1;
				margin-top: 20px;
				padding: 10px 0;
				cursor: pointer;
			}

			.chronologyMore.off {
				background: url(../../img/common/icon3.svg) no-repeat right 20px center #fee303;
				background-size: 20px;
				transition: all 0.3s ease-in-out 0s;
				margin-bottom: 40px;
			}

			.chronologyMore.on {
				background: url(../../img/common/icon4.svg) no-repeat right 20px center #fee303;
				background-size: 20px;
				transition: all 0.3s ease-in-out 0s;
				margin-bottom: 40px;
			}

			/* 歴史詳細ページ */
			#historyDetail {
				text-align: center;
				letter-spacing: -.4em;
			}

			#projectIntro {
				display: inline-block;
				padding: 10px 20px;
				margin-bottom: 20px;
				letter-spacing: 0;
				font-size: 1.8rem;
				line-height: 1;
				font-weight: bold;
				color: #a79451;
				border: 1px solid #a79451;
			}

			#projectTit {
				font-size: 2.4rem;
				font-weight: bold;
				padding-bottom: 20px;
				letter-spacing: 0;
				line-height: 1.2;
			}

			#projectCopy {
				padding: 20px 3%;
				margin-bottom: 40px;
				font-size: 2.2rem;
				letter-spacing: 0;
				line-height: 1.4;
				text-align: center;
				color: #a79451;
				border-top: 1px solid #a79451;
				border-bottom: 1px solid #a79451;
			}

			#projectContent {
				width: 90%;
				margin: 0 auto;
				padding-bottom: 30px;
			}

			#projectContent img {
				width: 100%;
				padding-bottom: 10px;
				max-width: 100%;
				height: auto;
			}

			#projectContent p {
				padding-bottom: 1em;
				text-align: left;
				font-size: 1.6rem;
				letter-spacing: 0;
			}

			#projecturlArea {
				padding-bottom: 40px;
				border-bottom: 1px solid #c9c9c9;
				margin-bottom: 40px;
			}

			#projecturl {
				display: block;
				letter-spacing: 0;
			}

			#projecturl a {
				display: block;
				padding: 10px 0;
				font-size: 1.6rem;
				color: #a79451;
				border: 1px solid #a79451;
				background: url(../../img/history/sp/out_link_icon_white.png) no-repeat right 20px center #fff;
				background-size: 13px;
				transition: all 0.3s ease-in-out 0s;
			}

			#historyDetail .commonBtn1 a {
				letter-spacing: 0;
				background-color: #a79451;
			}

			#historyDetail .commonBtn1 {
				padding-bottom: 40px;
			}

		}