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

/*-----------------------------------------------------------------
共通　ページ全体の基本設定
-------------------------------------------------------------------*/
@media screen and (max-width: 959px) {
	body {
	    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	}
	#event.sub #subContainer .subTitleBox {
		margin-bottom: 30px;
	}
	#event.sub #subContainer .subTitleBox .homeHead_center {
		text-align: center;
	}
	#event.sub #subContainer .subTitleBox .homeHead_mainText,
	#event.sub #subContainer .subTitleBox .homeHead_subText {
	    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-weight: 700;
		text-align: center;
		letter-spacing: 3px;
	}
	#event.sub #subContainer .subTitleBox .homeHead h2 {
		font-size: 25px;
		line-height: 2em;
	}
	#event.sub #subContainer .subTitleBox .homeHead h3 {
		font-size: 16px;
	}

	#event.sub section#subContainer div.main_box h4 {
		font-weight: bold;
		font-size: 120%;
		padding: 0 0 5px 0;
		margin: 20px auto 10px auto;
		position: relative;
		width:96%;
		border-bottom: 1px solid #aaa;
	}
	
	#event.sub #subContainer .subTitleBox .homeHead_subText.maintitle_sub{
		letter-spacing:0.1em;
	}

}
@media screen and (max-width: 479px) {
	#event.sub #subContainer .subTitleBox .homeHead h2 {
		font-size: 130%;
		font-feature-settings : "palt";
		line-height: 1.6em;
		letter-spacing:0.1em;
	}
	#event.sub #subContainer .subTitleBox .homeHead h3 {
		font-size: 90%;
	}
}


/* ---------------------------------------------
 イベント　一覧ページ
--------------------------------------------- */

/*
一覧ページ共通　flexレイアウト
------------------------*/
@media screen and (max-width: 959px) {
	#event.sub #subContainer .flex3 {
		width: 96%;
		display: flex;
		display:-webkit-flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0;
		margin: 50px auto 0;
	}

	#event.sub #subContainer .flex3 li {
		width: 49%;
		box-sizing: border-box;
		margin-bottom: 40px;
		margin-left: 0;
		position: relative;
	}
	#event.sub #subContainer .flex3 li:nth-child(3n+1) {
		margin-left: 0;
	}
	#event.sub #subContainer .flex3 li dl {
		height: 100%;
		box-sizing: border-box;
	}
	#event.sub #subContainer .flex3 li dt img {
		width: 100%;
		height: auto;
	}
	#event.sub #subContainer .flex3 li dd h5 {
		font-size: 18px;
		font-weight: 700;
		margin: 10px 0;
	}
		/* typeA （メデイア・イベント・小冊子）*/
	#event.sub #subContainer .flex3.typeA li {
		border: 1px solid #999999;
		transition: 0.3s;
	}
	#event.sub #subContainer .flex3.typeA li:hover {
		transform: translate(-7px, -7px);
		box-shadow: 7px 7px 0px 0px #000000;
	}
	#event.sub #subContainer .flex3.typeA li a:hover {
		text-decoration: none;
	}
	#event.sub #subContainer .flex3.typeA li dl {
		padding: 20px 20px 43px;
	}
	#event.sub #subContainer .flex3.typeA li .more {
		width: 100%;
		box-sizing: border-box;
		font-size: 11px;
		font-weight: 700;
		line-height: 32px;
		border-top: 1px dotted #cccccc;
		padding: 0 20px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#event.sub #subContainer .flex3.typeA li .more .fa {
		line-height: inherit;
		position: absolute;
		top: 0;
		right: 20px;
	}
		/* event一覧ローカル設定 */
	#event.sub #subContainer .flex3.typeA.event li .cat {
		position: absolute;
		top: 25px;
		left: 25px;
		margin: 0;
	}

	#event.sub #subContainer .flex3.event li dt {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	#event.sub #subContainer .flex3.event li dt:before {
		content: '';
		display: block;
		padding-top: 75%;
	}
	#event.sub #subContainer .flex3.event li dt img.ofi {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		object-position: 50% 50%;
		font-family: 'object-fit: cover; object-position: 50% 50%;'
	}

	#event.sub #subContainer .flex3.event li span.update {
		color: #999999;
		font-size: 90%;
		margin: 5px 0 0;
		display: block;
	}
	#event.sub #subContainer  .flex3.event li dd .day {
		font-size: 13px;
		font-weight:bold;
		line-height: 2.2em;
	    margin: 5px 0 7px;
	    padding: 5px 0 3px;
	    border-bottom: 1px solid #ccc;
		font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

	}
	#event.sub #subContainer .flex3.event li dd .day span{
		font-size: 12px;
		border:1px solid #000;
		padding:1px 3px;
		margin-right: 5px;
	}
	#event.sub #subContainer .flex3.event li dd .day em{
		color:#fff;
		font-size: 10px;
		font-weight:bold;
		padding:2px;
		margin: 0;
		background:#000;
		vertical-align:0.1em;
	}
	#event.sub #subContainer  .flex3.event li dd .day em#red{
		background:#d23737 !important;
	}
	
	#event.sub #subContainer  .flex3.event li dd .day em#blue{
		background:#46579a !important;
	}
	#event.sub #subContainer .flex3.event li dd h5 {
		margin-top: 0;
	}
	#event.sub #subContainer .flex3.event li .cat a {
		color: #ffffff;
		font-size: 75%;
		font-weight:bold;
		background: #000000;
		padding: 2px 5px;
		display: inline-block;
		position: relative;
	}
	#event.sub #subContainer .flex3.event li .cat.inspection a {
		background: #379c93;
	}
	#event.sub #subContainer .flex3.event li .cat.event a {
		background: #b34523;
	}
	#event.sub #subContainer .flex3.event li .cat.seminar a {
		background: #f40002;
	}
	#event.sub #subContainer .flex3.event li .cat.information a {
		background: #000000;
	}
	#event.sub #subContainer .flex3.event li .cat.public_relations a {
		background: #002477;
	}
	#event.sub #subContainer .flex3.event li .cat a:hover {
		text-decoration: none;
	}
	#event.sub #subContainer .flex3.event li .cat a:before {
		content: '';
		display: block;
		width: 0;
		height: calc(100%);
		background-color: rgba(255,255,255,0.8);
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
	}
	#event.sub #subContainer .flex3.event li .cat.inspection a:before {
		background-color: rgba(119,62,0,0.6);
	}
	#event.sub #subContainer .flex3.event li .cat.event a:before {
		background-color: rgba(252,158,42,0.6);
	}
	#event.sub #subContainer .flex3.event li .cat.seminar a:before {
		background-color: rgba(244,0,2,0.6);
	}
	#event.sub #subContainer .flex3.event li .cat.information a:before {
		background-color: rgba(0,0,0,0.6);
	}
	#event.sub #subContainer .flex3.event li .cat.public_relations a:before {
		background-color: rgba(0,36,119,0.6);
	}
	#event.sub #subContainer .flex3.event li .cat a:hover:before {
		animation: 
			wipeCat_01 0.15s ease-in 0s,
			wipeCat_02 0.15s ease-out 0.15s;
	}
	@keyframes wipeCat_01 {
		0% {
			width: 0;
		}
		100% {
			width: 100%;
		}
	}
	@keyframes wipeCat_02 {
		0% {
			width: 100%;
			right: 0;
			left: 0;
		}
		100% {
			width: 0;
			left: 100%;
		}
	}
	#event.sub #subContainer .flex3.event li .cat span {
		color: #999999;
		font-size: 11px;
		margin-left: 10px;
	}
	#event.sub #subContainer .flex3.event li .labelBox {
		width: 180px;
		height: 180px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.flex3.event li .labelBox .label {
	    color: #000;
	    font-size: 14px;
	    font-weight: bold;
	    text-align: center;
	    position: absolute;
	    right: -10px;
	    top: -10px;
	    width: 180px;
	    height: 180px;
	    overflow: hidden;
	}



	ul.flex3 li a {
	    display: block;
	    position: relative;
	    height: 100%;
	    box-sizing: border-box;
	}

	ul.flex3.event li .labelBox .label span {
	    background: #f9f755;
	    line-height: 30px;
	    display: block;
	    transform: rotate(45deg);
	    right: -50px;
	    top: 25px;
	    position: relative;
	}

	.flex3.event li .labelBox .label span:before, .flex3.event li .labelBox .label span:after {
	    position: absolute;
	    content: "";
	    border-top: 6px solid #bdbb41;
	    border-left: 6px solid transparent;
	    border-right: 6px solid transparent;
	    bottom: 0px;
	}

	.flex3.event li .labelBox .label span:before {
	    left: 20px;
	    top: 30px;
	}

	.flex3.event li .labelBox .label span:after {
	    right: 20px;
	    top: 30px;
	}


}
@media screen and (max-width: 768px) {
	#event.sub #subContainer .flex3 li {
		width: 49%;
		margin-bottom: 20px;
	}
	#event.sub #subContainer .flex3 li dd h5 {
		font-size: 15px;
	}
		/* typeA （メデイア・イベント・小冊子）*/
	#event.sub #subContainer .flex3.typeA li dl {
		padding: 15px 15px 33px;
	}
	#event.sub #subContainer .flex3.typeA.event li .cat {
		top: 20px;
		left: 20px;
	}
}
@media screen and (max-width: 599px) {
	#event.sub #subContainer .flex3.event li .labelBox {
		width: 160px;
		height: 160px;
	}
	#event.sub #subContainer .flex3.event li .labelBox .label {
		font-size: 12px;
		line-height: 25px;
	}
	@media screen and (max-width: 499px) {
		#event.sub #subContainer .flex3.event li dd .day span{
			line-height: 100%;
			display:table;
		}
		#event.sub #subContainer .flex3.event li dd h5 {
			line-height: 1.8em;
		}
	}
}
@media screen and (max-width: 479px) {
	#event.sub #subContainer .flex3.typeA li dl {
		padding: 10px 10px 33px;
	}
	#event.sub #subContainer .flex3.typeA.event li .cat {
		top: 15px;
		left: 15px;
	}
	#event.sub #subContainer .flex3.event li span.update {
		font-size: 80%;
		margin: 5px 0 -8px;
	}
	#event.sub #subContainer .flex3.event li span.update + h5 {
		padding-top: 5px;
	}
	#event.sub #subContainer .flex3.event li dd .day {
		font-size: 12.5px;
	}
	#event.sub #subContainer .flex3.event li dd .day span{
		font-size: 11px;
		/*display: block;
		text-align: center;*/
	}
	#event.sub #subContainer .flex3.event li dd .day em{
		font-size: 10px;
	}
	#event.sub #subContainer .flex3.event li dd h5 {
		font-size: 13.5px;
	}
	#event.sub #subContainer .flex3.typeA li .more {
		font-size: 10px;
		padding: 0 12px;
	}
	#event.sub #subContainer .flex3.typeA li .more .fa {
		right: 12px;
	}

	#event.sub #subContainer .flex3.event li .labelBox .label {
	    color: #000;
	    font-size: 14px;
	    font-weight: bold;
	    text-align: center;
	    position: absolute;
	    right: -7px;
	    top: -7px;
	    width: 180px;
	    height: 180px;
	    overflow: hidden;
	}

	.flex3.event li .labelBox .label span:before, .flex3.event li .labelBox .label span:after {
	    position: absolute;
	    content: "";
	    border-top: 3px solid #bdbb41;
	    border-left: 3px solid transparent;
	    border-right: 3px solid transparent;
	    bottom: 0px;
	}

}
@media screen and (max-width: 414px) {
	#event.sub #subContainer .flex3 li {
		width: 100%;
		margin-left: 0;
	}
	#event.sub #subContainer .flex3.event li dd .day {
		font-size: 13px;
	}
	#event.sub #subContainer .flex3.event li dd .day span{
		font-size: 11px;
		display: inline;
	}
	#event.sub #subContainer .flex3.event li dd .day em {
		font-size: 8px;
		padding: 1px 1px;
		/*vertical-align: middle;*/
	}
	#event.sub #subContainer .flex3.event li dd h5 {
		font-size: 15px;
		line-height: 166%;
	}
	#event.sub #subContainer .flex3.event li .cat a {
		font-size: 8px;
		padding: 1px 3px;
	}
	/*#event.sub #subContainer .flex3.event li dd {
		padding-top: 30px;
	}*/
}/**/
/*
ここまで　flexレイアウト
------------------------*/

/*
ページネーション　イベント・お客様の声　共通
------------------------*/
@media screen and (max-width: 959px) {
		/* ページネーション　イベント・お客様の声　共通 */
	.pagination {
		text-align: center;
		margin-top: 30px;
	}
	.pagination a,
	.pagination span {
		width: 28px;
		line-height: 28px;
		border: 1px solid #333333;
		border-radius: 3px;
		display: inline-block;
		margin: 0 2px;
	}
	.pagination .current {
		color: #ffffff;
		font-weight: 700;
		background: #333333;
	}

/*
	イベントフッタ　カテゴリ＆Search
------------------------*/
	#event.sub section#subContainer .eventFooter_cont {
		background: #f5f5f5;
		padding: 40px 20px;
		margin: 50px 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
	}
	#event.sub section#subContainer .eventFooter_cont ul li {
		width: 19%;
		margin-right: 0;
		position: relative;
	}
	#event.sub section#subContainer .eventFooter_cont ul li:last-child {
		margin-right: 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul li dt {
		text-align: center;
	}
	#event.sub section#subContainer .eventFooter_cont ul li dt a {
		padding: 20px;
		display: block;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .Search {
		padding: 15px;
		border: 1px solid #ddd;
		background: #eee;
		text-align: center;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .Search #searchform {
		/*display: flex;
		flex-wrap: nowrap;*/
		position: relative;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .Search #leftSearchBox {
		/*width: 90%;
		float: left;
		margin-right: 3%;*/
		width: auto;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .Search #leftSearchBox input.field {
		width: 100%;
		height: 31px;
		padding: 0;
		margin: 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .Search #leftSearchBtn {
		position: absolute;
		top: 0;
		right: 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .Search #leftSearchBtn #searchsubmit {
		width: 35px;
		height: 33px;
		background: url('/img/common/leftSearchSubmit.gif') no-repeat 0 0;
		background-size: cover;
		border: none;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .eventFooter_btn {
		width: 100%;
		background: #fff;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .eventFooter_btn a.animated-button.thar-three {
		line-height: 62px;
		padding: 0;
		margin: 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .eventFooter_btn a.animated-button.thar-three .fa {
		line-height: 62px;
		position: absolute;
		right: 5%;
	}
}
@media screen and (max-width: 768px) {
	#event.sub section#subContainer .eventFooter_cont {
		padding: 20px 10%;
		margin: 30px 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul {
		/*flex-wrap: wrap;*/
	}
	#event.sub section#subContainer .eventFooter_cont ul li {
		width: 100%;
		margin-right: 0%;
		margin-top: 10px
	}
	#event.sub section#subContainer .eventFooter_cont ul li:first-child {
		margin-top: 0;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .eventFooter_btn a.animated-button.thar-three {
		line-height: 42px;
	}
	#event.sub section#subContainer .eventFooter_cont ul li .eventFooter_btn a.animated-button.thar-three .fa {
		line-height: 42px;
	}
	/*#event.sub section#subContainer .eventFooter_cont ul li .Search #leftSearchBox {
		width: 80%;
	}*/
}
@media screen and (max-width: 479px) {
}

@media screen and (max-width: 959px) {
	#subContainer .eventFooter_catMenu {
		background: #f5f5f5;
		padding: 40px 3%;
		margin: 50px auto;
	}
	#subContainer .eventFooter_catMenu ul {
		display: flex;
		flex-wrap: wrap;
	}
	#subContainer .eventFooter_catMenu ul li {
		width: 32%;
		margin-top: 20px;
		margin-right: 2%;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(-n+3) {
		margin-top: 0;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(3n) {
		margin-right: 0;
	}
	#subContainer .eventFooter_catMenu ul li a {
		display: block;
		line-height: 62px;
		background: #fff;
		padding: 0;
		margin: 0;
		position: relative;
	}
	#subContainer .eventFooter_catMenu ul li a .fa-angle-right {
		line-height: inherit;
		position: absolute;
		right: 5%;
	}
	#subContainer .eventFooter_catMenu ul li form {
		height: 100%;
		box-sizing: border-box;
		background: #eee;
		border: 1px solid #ddd;
		padding: 0 15px;
		position: relative;
		display: flex;
		align-items: center;
	}
	#subContainer .eventFooter_catMenu ul li form input[type="text"] {
		width: 100%;
		box-sizing: border-box;
		font-size: 13px;
		line-height: 30px;
		background: #fff;
		border: none;
		padding: 0 5px;
	}
	#subContainer .eventFooter_catMenu ul li form input[type="submit"]#searchsubmit {
		width: 30px;
		height: 30px;
		background: url(/img/common/leftSearchSubmit.gif) no-repeat 0 0;
		border: none;
		position: absolute;
		top: calc(50% - 15px);
		right: 15px;
	}
	#subContainer .eventFooter_catMenu ul li form input:focus {
		outline: none;
	}
}
@media screen and (max-width: 768px) {
	#subContainer .eventFooter_catMenu {
		padding: 30px 4%;
		margin: 30px auto;
	}
	#subContainer .eventFooter_catMenu ul li {
		width: 48%;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(3) {
		margin-top: 20px;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(odd) {
		margin-right: 4%;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(even) {
		margin-right: 0;
	}
}
@media screen and (max-width: 599px) {
	#subContainer .eventFooter_catMenu {
		padding: 20px 10%;
	}
	#subContainer .eventFooter_catMenu ul li {
		width: 100%;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(n+2) {
		margin-top: 10px;
	}
	#subContainer .eventFooter_catMenu ul li:nth-child(odd) {
		margin-right: 0;
	}
	#subContainer .eventFooter_catMenu ul li a {
		line-height: 42px;
	}
	#subContainer .eventFooter_catMenu ul li form {
		padding: 15px;
	}
}
/* ここまで イベントフッタ　カテゴリ＆Search
------------------------*/


/* ---------------------------------------------
 イベント　個別ページ
--------------------------------------------- */
@media screen and (max-width: 959px) {
		/* ページ見出し */
	#event.sub #subContainer .subTitleBox .es_mainTitle dl {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 17px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
	}
	#event.sub #subContainer .subTitleBox .es_mainTitle dd {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		color: #000;
		margin-top:10px;
		font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

	}
	#event.sub .subTitleBox .es_mainTitle dd em{
		color:#fff;
		font-size:75%;
		font-weight:bold;
		background:#000000;
		margin:0 0.2em;
		padding:2px 2px;
		vertical-align:middle;

	}
	#event.sub .subTitleBox .es_mainTitle dd em#red{
		background:#d23737;
	}
	#event.sub .subTitleBox .es_mainTitle dd em#blue{
		background:#46579a;
	}

	#event.sub #subContainer .subTitleBox .es_mainTitle h2 {
		color: #333;
		font-size: 20px;
		letter-spacing: 0;
		text-align: center;
		font-weight: 700;
		position: relative;
		margin: 0 auto;
		line-height: 1.5em;
		width:90%;
	}
	#event.sub #subContainer .subTitleBox .es_mainTitle dt {
		font-size: 12px;
		text-align: center;
		margin-top: 10px;
	}
	#event.sub #subContainer .subTitleBox .es_mainTitle dt span {
		font-weight: bold;
		border: 1px solid #000;
		padding: 5px 10px;
	}
		/* 投稿本文 */
	.eventSingle .entry-content img.first_image { /* イベント投稿ページ 1枚目の画像中央寄せ */
		display: block;
		margin: auto;
	}
	#event.sub section#subContainer div.main_box h3,
	#event.sub section#subContainer div.main_box .es_map .title {
		width: 100%;
		font-weight: bold;
		font-size: 120%;
		padding: 0 0 5px 0;
		margin: 20px auto 10px;
		position: inherit;
	}
	#event.sub section#subContainer div.main_box .es_map ul {
		width: 96%;
		box-sizing: border-box;
		margin: 0 auto 20px;
	}
}
@media screen and (max-width: 599px) {
	form#mailformpro .formTable dl {
		box-sizing: border-box;
		padding: 0 2%;
	}
}
@media screen and (max-width: 479px) {
	#event.sub #subContainer .subTitleBox .es_mainTitle dl {
		font-size: 13px;
	}
	#event.sub #subContainer .subTitleBox .es_mainTitle dd {
		font-size: 14px;
	}
	#event.sub #subContainer .subTitleBox .es_mainTitle h2 {
		font-size: 18px;
		line-height: 1.6em;
	}
	#event.sub #subContainer .subTitleBox .es_mainTitle dt {
		font-size: 12px;
	}
}