@charset "UTF-8";
.mainArea01 .t_inner {
	height: 637px;
	margin: 0 auto;
	padding: 0 20px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	color: #FFF;
}
.mainArea01 {
	max-width: 1024px;
	margin: 0 auto;
	background-image: url(../img/concept/main_bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* 共通 */
.mainArea .t_inner h1 {
	font-size: 49px;
	color: #FFF;
	font-family: "Noto Serif JP", serif !important;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
  text-shadow: 2px 2px 4px #00000040;
	text-align: center;
	padding-bottom: 30px;
}
.mainArea .t_inner .txtArea {
	text-align: center;
}
.mainArea .t_inner .txtArea .txt {
	font-size: 16px;
	line-height: 2;
	text-align: center;
	font-family: "Noto Serif JP", serif !important;
}
.conceptArea01 {
	max-width: 1024px;
	margin: 0 auto;
	background-image: url(../img/concept/concept_bg01.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.conceptArea02 {
	max-width: 1024px;
	margin: 0 auto;
	background-image: url(../img/concept/concept_bg02.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.conceptArea01 .t_inner,
.conceptArea02 .t_inner {
	max-width: 1024px;
	width: 100%;
	height: 637px;
	margin: 0 auto;
	padding: 0 28px 0 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: left;
}
.conceptArea01 .t_inner h1,
.conceptArea02 .t_inner h1 {
	width: 100%;
	font-size: 30px;
	color: #FFF;
	font-family: "Noto Serif JP", serif !important;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	text-align: left;
	padding-bottom: 36px;
}
.conceptArea02 .t_inner h1 {
	padding-left: 50%;
}
.conceptArea01 .t_inner .txtArea,
.conceptArea02 .t_inner .txtArea {
	width: 100%;
	text-align: left;
}
.conceptArea01 .t_inner .txtArea .txt,
.conceptArea02 .t_inner .txtArea .txt {
	font-size: 16px;
	line-height: 2;
	text-align: left;
	color: #FFF;
	font-family: "Noto Serif JP", serif !important;
}
.conceptArea02 .t_inner .txtArea .txt {
	padding-left: 50%;
}
.conceptArea03 {
	padding: 70px 0 80px 50px;
}
.conceptArea03 .t_inner {
	width: 100%;
	background-image: url("../img/concept/concept_bg03.jpg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
}
.conceptArea03 .historyArea {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #808080;
	border-bottom: 1px solid #808080;
}
.conceptArea03 .historyArea .historyList {
	max-width: 593px;
}
.conceptArea03 .historyArea .historyList > li {
	border-bottom: 1px solid #4D4D4D;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
}
.conceptArea03 .historyArea .historyList > li:last-child {
	border-bottom: none!important;
}
.conceptArea03 .historyArea .historyList > li .txtBox {
	width: 100%;
	padding: 13px 10px;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl {
	display: flex;
	flex-wrap: wrap;
  align-items: center;
	color: #FFF;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl dt {
	width: 16%;
	font-size: 22px;
	font-family: "Noto Serif JP", serif !important;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	padding-right: 0.5em;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl dt span {
	display: block;
	font-size: 12px;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl dd {
	width: 84%;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl dd .historyTxt li {
	position: relative;
	font-size: 14px;
	font-family: "Noto Serif JP", serif !important;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	text-align: left;
	border-left: 1px solid #ccbb7a;
	margin: 9px auto;
	padding-left: 3.5em;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl dd .historyTxt li span {
	font-size: .8em;
	font-family: "Noto Serif JP", serif !important;
	font-weight: 400;
	padding-top: 5px;
	display: block;
	line-height: 1.3;
}
.conceptArea03 .historyArea .historyList > li .txtBox dl dd .historyTxt li:before {
	position: absolute;
	top: 0;
	left: .5em;
	display: inline-block;
	font-size: 14px;
}
li.month1:before {
	content: "1月";
}
li.month2:before {
	content: "2月";
}
li.month3:before {
	content: "3月";
}
li.month4:before {
	content: "4月";
}
li.month5:before {
	content: "5月";
}
li.month6:before {
	content: "6月";
}
li.month7:before {
	content: "7月";
}
li.month8:before {
	content: "8月";
}
li.month9:before {
	content: "9月";
}
li.month10:before {
	content: "10月";
}
li.month11:before {
	content: "11月";
}
li.month12:before {
	content: "12月";
}
li.month1to2:before {
	content: "1月～2月";
}
li.month1to3:before {
	content: "1月～3月";
}
li.month11to12:before {
	content: "11月～12月";
}
li.monthNone:before {
	content: "";
}
li.pl1 {
	padding-left: .5em!important;
}
li.pl4 {
	padding-left: 3.5em!important;
}
li.pl7 {
	padding-left: 6.5em!important;
}
/*改行調整*/
.pc_only04 {
  display:block !important;
}
.mobile_only04 {
	display:none !important;
}
@media screen and (max-width:600px){
  .pc_only04 {
    display:none !important;
  }
  .mobile_only04 {
    display:block !important;
  }
}


@media screen and (max-width: 1000px) {
	.mainArea01 {
		height: 637px!important;
	}
	.mainArea .t_inner h1 {
		font-size: 5vw;
	}
	.conceptArea02 .t_inner h1 {
		padding-left: 40%;
	}
	.conceptArea02 .t_inner .txtArea .txt {
		padding-left: 40%;
	}
}
@media screen and (max-width: 767px) {
	.conceptArea01 .t_inner h1, .conceptArea02 .t_inner h1 {
		font-size: 3.2vw;
	}
	.conceptArea02 .t_inner h1 {
		padding-left: 10%;
	}
	.conceptArea02 .t_inner .txtArea .txt {
		padding-left: 10%;
	}
	.conceptArea03 {
    padding: 20px 0;
	}
	.conceptArea03 .historyArea .historyList {
		padding: 0 5vw;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox {
    width: 60%;
    padding: 10px 3px;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dt {
    width: 30%;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dd {
    width: 70%;
	}
}
@media screen and (max-width: 600px) {
	.mainArea01 {
		height: 70vh!important;
		background-image: url("../img/concept/main_bg_sp.jpg");
	}
	.mainArea .t_inner {
		height: 70vh!important;
		padding: 0 20px 0;
	}
	.mainArea .t_inner h1 {
		font-size: 9.5vw;
		padding: 20px 0 40px;
	}
	.mainArea .t_inner .txtArea .txt {
		font-size: 3vw;
	}	
	.conceptArea01 {
		height: 75vh!important;
		background-image: url(../img/concept/concept_bg01_sp.jpg);
	}
	.conceptArea02 {
		height: 90vh!important;
		background-image: url(../img/concept/concept_bg02_sp.jpg);
	}
	.conceptArea01 .t_inner {
		padding: 30vh 4vw 20px;
	}
	.conceptArea02 .t_inner {
		padding: 50vh 4vw 20px;
	}
	.conceptArea01 .t_inner h1, .conceptArea02 .t_inner h1 {
    font-size: 5.5vw;
		padding: 0 0 20px;
	}
	.conceptArea02 .t_inner h1,
	.conceptArea02 .t_inner .txtArea .txt {
    padding-left: 0;
	}
	.conceptArea03 .imgBox img {
    width: 100%;
}
	.conceptArea03 .t_inner {
    width: 100%;
    background-image: none!important;
}
	.conceptArea03 .historyArea {
		border: none!important;
		padding: 30px 0 20px;
	}
}
@media screen and (max-width: 500px) {
	.mainArea01 {
		height: 508px!important;
	}
	.mainArea .t_inner {
		height: 508px!important;
		padding: 0;
	}
	.conceptArea01 {
		height: 529px!important;
	}
	.conceptArea02 {
		height: 589px!important;
	}
	.conceptArea01 .t_inner,
	.conceptArea02 .t_inner {
    align-content: flex-end;
		    padding: 0 4vw;
	}
	.conceptArea01 .t_inner {
		height: 529px!important;
		padding: 0 4vw;
	}
	.conceptArea02 .t_inner {
		height: 589px!important;
		padding: 0 4vw;
	}
	.conceptArea01 .t_inner h1,
	.conceptArea02 .t_inner h1 {
		text-shadow: 2px 2px 4px #00000040;
	}
	.conceptArea01 .t_inner .txtArea,
	.conceptArea02 .t_inner .txtArea {
		padding-bottom: 15px;
	}
	.conceptArea01 .t_inner .txtArea .txt,
	.conceptArea02 .t_inner .txtArea .txt {
		font-size: 3vw;
		padding-bottom: 15px;
		letter-spacing: -0.025em;
		text-shadow: 2px 2px 4px #00000040;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dt {
    width: 30%;
		font-size: 4vw;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dt span {
    font-size: 2vw;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dd {
    width: 70%;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dd .historyTxt li {
		font-size: 3vw;
		text-shadow: black 1px 1px 0, black -1px -1px 0, black -1px 1px 0, black 1px -1px 0, black 0px 1px 0, black  0-1px 0, black -1px 0 0, black 1px 0 0;
	}
	.conceptArea03 .historyArea .historyList > li .txtBox dl dd .historyTxt li:before {
		font-size: 3vw;
	}
}
@media screen and (max-width: 330px) {
	.mainArea .t_inner .txtArea .txt {
		letter-spacing: -0.05em;
	}	
}