@charset "UTF-8";

/*#contents::before {
	content: "";
	position: absolute;
	z-index: -10;
	top: 380px;
	left: -10%;
	width: 50vw;
	height: 70vh;
	background: hsl(0,0%,90%);
	transform: rotate(45deg);
}*/

/*＝＝メイン*/
/*H１アアニメーション　画像ソース・色など以外は commonCSSに*/
#secTop {
	background: url(../img/main/shinkosai_miyairi.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

#secTop > .topTitle h1{
	color: #fff;
	font-size: 4vw;
	font-weight: 100;
}

.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
	background-color: #fff;
}

.container {
	padding-top: 6vw;
}

h2 {
	text-align: center;
	margin-bottom: 2vw;
	font-feature-settings: 'palt';
 }

/* 22px @ 390px increasing to 40px @ 1080px */
h2 {
  font-size: min(max(22px, calc(1.375rem + ((1vw - 3.9px) * 2.6087))), 40px);
  /* Note: The calc base value (1.375rem) MUST be stated in REM to maintain accessibility */
  /* Where: 2.6087 = 100 * font-size_difference / viewport_width_difference */

  /* Safari resize fix */
  min-height: 0vw;
}

h2 .subTitle{
	font-size: 22px;
}

/* 22px @ 390px increasing to 30px @ 1080px */
.ec_h2_Sub {
  font-size: min(max(22px, calc(1.375rem + ((1vw - 3.9px) * 1.1594))), 30px);
  /* Note: The calc base value (1.375rem) MUST be stated in REM to maintain accessibility */
  /* Where: 1.1594 = 100 * font-size_difference / viewport_width_difference */

  /* Safari resize fix */
  min-height: 0vw;
}

h3 {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
}

/* 18px @ 390px increasing to 20px @ 1080px */
h3 {
  font-size: min(max(18px, calc(1.125rem + ((1vw - 3.9px) * 0.2899))), 20px);
  min-height: 0vw;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝ここからスタート*/

.inner {
	padding: 0 2.5vw
}

#contents .textSection .title{
	display: none;
}

.skewBox {
	position: relative;
	padding: 0px 0px 0px;
	color: #000;
}

/*.skewBox:after{
	content: "";
	width: 100%;
	height: 20%;
	padding: 100px 300px;
	padding: 80px 500px 55px;
	background: hsl(0,0%,90%);
	position: absolute;
	top: 1000px;
	left: -100px;
	z-index: -10;
	transform: rotate(-45deg) skew(0deg);
}

.skewBox::before {
	content: "";
	position: absolute;
	z-index: -10;
	top: 500px;
	left: 18.5%;
	width: 30vw;
	height: 50vh;
	background-color: hsl(0,0%,90%);
	opacity: 0.3;
	transform-origin: 100% 0;
	transform: rotate(45deg);
}*/

	.skewBoxBody{
		box-sizing: border-box;
		width: 96%;
		max-width: 1080px;
		padding: 0px 0px 100px;
		padding-left: 0px;
		margin: 2% auto;
		line-height: 1.5;
		box-sizing: border-box;
	}

	.redTitle {
		text-align: center;
		font-weight: normal;
		color: #e60012;
		font-size: 1.2em;
		line-height: 2.25;
		padding-bottom: 1.5em;
		border-bottom: 1px solid black;
		margin: 0px auto 1.5em;
	}

	.ec_h3Desc {
		width: 100%;
		margin: 0px auto 60px;	
	}

	.back_event_btn {
		position: relative;
		display: block;
		width: 80px;
		height: 80px;
		margin: 40px auto 80px;
		text-align: center;
		color: #fff;
		font-size: 0.9rem;
		line-height: 1.5;
		z-index: 1;
		transition: transform .5s ease-out;
	}

	.back_event_btn::after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #003f77;
		z-index: -1;
		transform-origin: 50% 50%;
		transform: rotate(45deg);
	}

	.back_event_btn:hover {
		transform: translateY(-10%);
		transition: transform .5s ease-out;
	}

	.back_event_btn a {
		color: #fff;
		content: "";
		display: block;
		width: 100%;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 12.5%);
	}

	.back_event_btn a .num {
		display: inline-block;
		font-size: 1.2rem;
		font-weight: 400;
		transition: transform .5s .125s ease-out;
	}

	.back_event_btn a:hover .num {
		transform: rotate(180deg);
		transition: transform .5s .125s ease-out;
	}

	.back_event_btn a span {
		font-size: 130%;
	}


.rengo {
	width: 100%;
	max-width: 1080px;
	margin: 0px auto;
	position: relative;
}

/*.rengo:after {
	position: absolute;
	top: -5%;
	left: calc((1080px / 2) - 52.5vw);
	width: 100vw;
	height: 110%;
	content: '';
	display: block;
	background: linear-gradient(hsl(000, 0%, 100%), hsl(200, 80%, 95%) 15%,hsl(40, 80%, 90%) 40%, hsl(30, 75%, 80%) 60%,hsl(15, 70%, 75%) 80%,hsl(220, 45%, 55%) 90%, hsl(200, 45%, 17.5%) 95%);
	z-index: -1;
}*/

.day ~ .day {
	margin-top: clamp(60px,10vw,140px);
}

.day > .timeBlock ~ .timeBlock {
	margin-top: clamp(40px,7.5vw,120px);
}

.date {
		font-size: clamp(24px,5vw,36px);
		font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-feature-settings: 'palt';
		text-align: left;
		padding: 0;
	}

.time_line {
	font-weight: 400;
	font-size: clamp(24px,5vw,36px);
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	padding-bottom: 0em;
	color: #505050;
  border-bottom: 1px solid #808080;
  margin-bottom: 0.75em;
}

.time_line span {
	font-size: .925em;
}


h3{
	font-weight: normal;
	font-size: 28px;
	text-align: center;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

h3:before {
	content: '';
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.2em;
	background-image: url(../img/common/tomoe.png);
	background-size: cover;
	transform: translateY(18%);
}

.rengoWap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.rengoWap::before{
	content:"";
	display: block;
	width:23%;
	order:1;
}
.rengoWap::after{
	content:"";
	display: block;
	width:23%;
}

.itemBox {
	width: 23%;
	margin-bottom: 40px;
}

.chokai_Name {
	background-color: #eee;
	color: #000;
	text-align: center;
	padding: 10px 0px;
}

.rengoName {
	text-align: center;
	color: #e6002b;
	font-weight: bold;
	font-size: 110%;
	margin-top: 0.75em;
	font-feature-settings: 'palt';
}

.lead_Box {
	text-align: center;
	line-height: 1.3;
	margin-top: 0.2em;
}


/*
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　スマホ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*/


@media handheld, only screen and (max-width: 767px) {
	#secTop {
		background: url(../img/main/shinkosai_miyairi_sp.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}

	.skewBox {
		position: relative;
		padding: 0px 0px;
		color: #000;
		/*width: 100vw;*/
		margin-top: 0px;
	}

	/*.skewBox:after{
		content: "";
		width: 100%;
		height: 20%;
		padding: 100px 300px;
		background: hsl(0,0%,90%);
		position: absolute;
		top: 500px;
		left: -100px;
		z-index: -10;
		transform: rotate(-45deg) skew(0deg);
	}*/

	.skewBoxBody{
		box-sizing: border-box;
		width: 96%;
		max-width: 1080px;
		padding: 0px 0px 80px;
		padding-left: 0px;
		margin: 2% auto;
		line-height: 1.5;
		box-sizing: border-box;
	}

	.topCau {
		padding: 1vw 1vw;
		text-align: left;
	}

/*＝＝＝＝＝写真ひだり　SP*/

	
	.itemBox {
		width: 49%
	}


}


@media handheld, only screen and (max-width: 480px) {

	.skewBoxBody {
		padding-bottom: 40px;
	}

	.ec_h3Desc {
		margin-bottom: 0;
	}

	.rengoWap {
		flex-direction: column;
	}

	.itemBox {
		width: 100%;
		margin-bottom: 40px;
	}

	h3 {
		font-size: 24px;
	}

}