@charset "utf-8";
/*------------------------------------------------------------
	TOPページ(PC)
------------------------------------------------------------*/
.sec01 {
	position: relative;
}
.sec01:after{
	position:absolute;
	display:block;
	width:1377px ;
	height:1730px;
	content:"";
	background: url(../img/index/layer_sec01.png) no-repeat center bottom;
	background-size: cover;
	left:-26px;
	top:-300px;
	z-index: 11;
}

.sec01 .content{
	position: relative;
	height: 1430px;
	color: #FFF;
}

.sec01 .title {
  font-size : 30px;
  line-height : 53px;
  letter-spacing : 7.2px;
	margin: 0 0 30px;
}

.sec01 .txt {
	font-size : 18px;
  line-height : 44px;
  letter-spacing : 2.16px;
	margin-bottom: 40px;
}

.sec01 .snsBox .snsList {
	display: flex;
	gap:20px;
}

.sec01 .snsBox .snsList li {
	width: 27px;
}

.sec01 .snsBox .snsList li a {
	display: inline-block;
	position: relative;
}

.sec01 .snsBox .snsList li a:before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}

@media all and (min-width: 768px) {
	.sec01 .snsBox .snsList li a:hover {
		opacity: 0.7;
	}
}

.sec01 .snsBox .snsList li embed {
	width: 27px;
	height: 27px;
}

.sec01 .snsBox .snsList .twitter {
	width: 27px;
}

.sec01 .snsBox .snsList .twitter embed {
	width: 27px;
	height: 27px;
}

.sec01 .snsBox .snsList .line {
	margin: 0;
	width: 27px;
	height: 27px;
}

.sec01 .snsBox .snsList .line embed {
	width: 27px;
	height: 27px;
}

.sec01 .snsBox p {
	padding-top: 4px;
	float: left;
	font-size: 12px;
	letter-spacing : 1.32px;
}

.sec02 {
	position: relative;
	background:#15637d;
	color:#FFF;
	z-index: 21;
}

.sec02::after{
	position: absolute;
	display: block;
	width: 1340px;
	height: 550px;
	content: "";
	background: url(../img/index/layer_sec02.png) no-repeat center top;
	background-size: cover;
	left: -35px;
	bottom:-550px;
}

.sec02 .movieBox {
	margin-bottom: 43px;
	position: relative;
	background-color: #000;
}

.sec02 .movieBox iframe {
	vertical-align: top;
}

.sec02 .movieBox #movieCover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/index/movie_cover.jpg") no-repeat center / cover;
}

.sec02 .movieBox #movieCoverIcon {
	background: url("../img/index/play.svg") no-repeat center / 96px;
	width: 96px;
	height: 96px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0);
}

.sec02 .movieBox #movieBody {
	height: 510px;
}

.sec02 .btn a {
	padding: 20px 0;
	display: block;
	width: 296px;
	margin: 0 auto 70px;
  font-size : 18px;
  letter-spacing : 3.78px;
	text-align: center;
	border: 1px solid #FFF;
	position: relative;
	color:#FFF;
}

@media all and (min-width: 768px) {
	.sec02 .btn a:hover {
		opacity: 0.7
	}
}

.sec02 .btn .en {
	display: block;
}

.sec02 .btn .info {
	display: block;
  font-size : 14px;
  letter-spacing : 1.54px;
}

.sec02 .btn a:before {
	margin-top: -8px;
	width: 15px;
	height: 15px;
	background: url(../img/common/icon01.svg) no-repeat left top;
	background-size: 15px 15px;
	position: absolute;
	top: 50%;
	right: 15px;
	content: "";
	filter: brightness(0) invert(1);
}

.sec02 .title {
	font-size: 28px;
	line-height: 1;
  letter-spacing : 7.84px;
	margin:0 auto 70px;
	text-align: center;
}

.sec02 .boxWrap{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:50px;
	margin-bottom: 70px;
}

.sec02 .txtDl dt {
	padding: 6px 0;
	width: 65px;
	float: left;
	clear: left;
	font-size : 14px;
  letter-spacing : 1.54px;
  color : #DFB967;
	text-align:justify;
	text-align-last:justify;
}

.sec02 .txtDl dd {
	padding: 6px 0 10px 100px;
  font-size : 14px;
  line-height : 1.5;
  letter-spacing : 1.54px;
}

.sec02 .txtUl {
	font-size : 14px;
  line-height : 1.5;
  letter-spacing : 1.54px;
}

.sec02 .txtUl li {
	padding-top:6px;
	padding-bottom:6px;
	padding-left: 1.3em;
	text-indent: -1.3em;
}

.sec02 .txtUl li .icon {
	color: #9a8751;
	width: 10px;
	height: 10px;
}

.sec02 .contactBox{
	position: relative;
}

.sec02 .contactBox a,
.sec02 .contactBox div.close,
#gFooter .contactBox div.close {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width:325px;
	height:60px;
	margin:0 auto;
  background : rgba(0, 32, 68,1);
  border-radius : 30px;
	cursor: pointer;
}
#gFooter .contactBox div.close{
	margin-bottom: 25px;
}

.sec02 .contactBox div.close,
#gFooter .contactBox div.close {
  background : rgb(137, 139, 142);
	cursor: default;
}

.sec02 .contactBox a:after {
	margin-top: -8px;
	width: 15px;
	height: 15px;
	background: url(../img/common/icon01.svg) no-repeat left top;
	background-size: 15px 15px;
	position: absolute;
	top: 50%;
	right: 20px;
	content: "";
	filter: brightness(0) invert(1);
}

@media all and (min-width: 768px) {
	.sec02 .contactBox a:hover{
		background : rgba(0, 32, 68,.8);
	}
}

.sec02 .contactBox a span,
.sec02 .contactBox div.close span,
#gFooter .contactBox div.close span{
	font-size : 14px;
  line-height: 1;
  letter-spacing : 1.4px;
  color : #FFFFFF;
}
.sec02 .contactBox div.close span,
#gFooter .contactBox div.close span{
	line-height:1.3;
	text-align: center;
}

.sec02 .contactBox .pree {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	right: 140px;
	top: 0;
	width: 113px;
	height: 113px;
	padding: 7px;
	color: #fff;
	background: #D398B7;
	border-radius: 50%;
	text-align: center;
	margin-top: -36px;
}

.sec02 .contactBox .pree .top {
	padding-bottom: 7px;
	margin-bottom: 7px;
	font-size : 20px;
  line-height : 26.32px;
  letter-spacing : 3.4px;
	border-bottom:solid 1px #FFF;
}

.sec02 .contactBox .pree .txt {
	font-size : 12px;
  line-height : 14.6px;
  letter-spacing : 0.84px;
}

.sec02 .comBtn a {
	margin-left: 70px;
	border: 1px solid #FFF;
	color: #FFF;
}

.sec02 .comBtn embed {
	width: 10px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin: -4px 0 0 4px;
	filter: brightness(0) invert(1);
}

.sec03 {
	position: relative;
	padding-top:570px;
	height: 3215px;
	color:#FFF;
	background:rgba(255, 255, 255,.1);
}

.sec03::after{
	position: absolute;
	display: block;
	width: 1341px;
	height: 750px;
	content: "";
	background: url(../img/index/layer_sec03.png) no-repeat center bottom;
	background-size: cover;
	left: -26px;
	bottom:-750px;
}

.sec03 .headLine01 {
	margin-bottom: 56px;
}

.sec03 .inner {
	display: flex;
	gap:30px;
	margin-bottom: 80px;
	flex-direction: row-reverse;
}

.sec03 .inner:nth-child(odd){
	flex-direction: row;
}

.sec03 .inner .photoBox {
	width: 414px;
}

.sec03 .inner .textBox {
	flex:1;
	padding-top: 26px;
}

.sec03 .inner .textBox .ttl {
	font-size : 22px;
  line-height : 36px;
  letter-spacing : 3.52px;
	margin-bottom: 17px;
}

.sec03 .inner .textBox .txt {
	font-size : 14px;
  line-height : 30px;
  letter-spacing : 1.7px;
  color : #DCDDDD;
	margin-bottom: 20px;
}

.sec03 .inner .textBox .small {
  font-size : 12px;
  line-height : 20px;
  letter-spacing : 2.04px;
}

.sec03 .inner .textBox .small a {
	display: inline-block;
	padding-right: 15px;
	text-decoration: underline;
	color:#FFF;
}
.sec03 .inner .textBox .small a embed{
	filter: brightness(0) invert(1);
	margin-left: 10px;
}

@media all and (min-width: 768px) {
	.sec03 .inner .textBox .small a:hover {
		text-decoration: none;
	}
}

.sec03 .inner .textBox .small embed {
	width: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
}

.sec03 .program{
	position: relative;
	padding:84px;
	background:#15637D;
	z-index: 19;
}
.sec03 .program .timetable{
	display: grid;
	grid-template-columns: 5em 13em;
	margin: 0 auto;
	max-width: 18em;
	gap:10px;
}
.sec03 .program .timetable.first{
	margin: 0 auto 30px;
}
.sec03 .program .timetable.second{
	margin: 0 auto 15px;
}
.sec03 .program .programTitle{
	width: 100%;
	max-width: 360px;
	margin:0 auto;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: solid 1px #FFF;
	font-size : 19px;
  letter-spacing : 2.85px;
	text-align: center;
}
.sec03 .program .time{
	font-size : 16px;
  letter-spacing : 3.36px;
}
.sec03 .program .spot{
	font-size : 14px;
  letter-spacing : 1.8px;
}
.sec03 .program .note{
	font-size : 12px;
  line-height : 24px;
  letter-spacing : 1.8px;
	text-align: center;
}
/*------------------------------------------------------------
	TOPページ(SP)
------------------------------------------------------------*/
@media all and (max-width: 767.98px) {

	.sec01:after{
		width:100vw;
		height:calc(1460 / 750 * 100vw);
		background: url(../img/index/layer_sec01-sp.png) no-repeat center bottom;
		background-size: cover;
		left:0;
		top:calc(190 / 750 * 100vw);
	}

	.sec01 .content {
    height: calc(1650 / 750* 100vw);
	}

	.sec01 .title {
		margin: 0 0 calc(45 / 750 * 100vw);
		font-size: calc(38 / 750 * 100vw);
		line-height: calc(64 / 750 * 100vw);
		letter-spacing: calc(6 / 750 * 100vw);
	}

	.sec01 .txt {
		margin: 0 0 calc(60 / 750 * 100vw);
		font-size: calc(24 / 750 * 100vw);
		line-height: calc(56 / 750 * 100vw);
		letter-spacing: calc(2.88 / 750 * 100vw);
		
	}

	.sec01 .snsBox p {
		font-size: calc(24 / 750 * 100vw);
		letter-spacing: calc(2.64 / 750 * 100vw);
	}

	.sec02 {
		padding-bottom: calc(140 / 750* 100vw);
	}

	.sec02::after{
		width:100vw;
		height:calc(540 / 750 * 100vw);
		background: url(../img/index/layer_sec02-sp.png) no-repeat center top;
		background-size: cover;
		left: 0;
		bottom: calc(-540 / 750* 100vw);
	}

	.sec02 .movieBox {
		margin-bottom: calc(40 / 750 * 100vw);
	}

	.sec02 .movieBox #movieBody {
		height: 0;
		padding-bottom: 56%;
	}

	.sec02 .movieBox #movieContainer {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.sec02 .movieBox #movieCover {
		z-index: 10;
	}

	.sec02 .movieBox #movieCoverIcon {
		background: url("../img/index/play.svg") no-repeat center / 45px;
		width: 46px;
		height: 46px;
	}

	.sec02 .btn a {
		padding: 10px 0;
		width: auto;
		margin: 0 auto calc(70 / 750 * 100vw);;
		font-size: calc(28 / 750 * 100vw);
		letter-spacing: calc(5.88 / 750 * 100vw);
	}

	.sec02 .btn .info {
		display: block;
		font-size: calc(22 / 750 * 100vw);
		letter-spacing: calc(2.42 / 750 * 100vw);
	}

	.sec02 .title {
		margin:0 auto calc(60 / 750 * 100vw);
		font-size: calc(31 / 750 * 100vw);
		letter-spacing: calc(8.68 / 750 * 100vw);
	}

	.sec02 .boxWrap{
		grid-template-columns: 1fr;
		gap:calc(25 / 750 * 100vw);
		margin-bottom: calc(45 / 750 * 100vw);
	}

	.sec02 .txtDl dt {
		width: 5em;
		font-size: calc(24 / 750 * 100vw);
		letter-spacing: calc(2.64 / 750 * 100vw);
	}

	.sec02 .txtDl dd {
		padding: 6px 0 6px 7em;
		font-size: calc(24 / 750 * 100vw);
		letter-spacing: calc(2.64 / 750 * 100vw);
	}

	.sec02 .comBtn a {
    margin-left: 1em;
	}
	.sec02 .comBtn embed {
    height: calc(28 / 750 * 100vw);
	}

	.sec02 .txtUl {
		font-size: calc(22 / 750 * 100vw);
		letter-spacing: calc(2.42 / 750 * 100vw);
	}

	.sec02 .contactBox a {
		width:calc(646 / 750 * 100vw);
		height:calc(118 / 750 * 100vw);
		border-radius : calc(59 / 750 * 100vw);
	}

	.sec02 .contactBox a span{
		font-size: calc(26 / 750 * 100vw);
		letter-spacing: calc(2.6 / 750 * 100vw);
	}

	.sec02 .contactBox .pree {
		right: calc(-30 / 750* 100vw);
		top: calc(165 / 750* 100vw);
		width: calc(191 / 750 * 100vw);
		height: calc(191 / 750 * 100vw);
	}

	.sec02 .contactBox .pree .top {
		padding-bottom: calc(10 / 750 * 100vw);
		margin-bottom: calc(15 / 750 * 100vw);
		font-size: calc(32 / 750 * 100vw);
		line-height: calc(41.03 / 750 * 100vw);
		letter-spacing: calc(5.44 / 750 * 100vw);
	}

	.sec02 .contactBox .pree .txt {
		font-size: calc(20 / 750 * 100vw);
		line-height: calc(25.87 / 750 * 100vw);
		letter-spacing: calc(3.4 / 750 * 100vw);
	}

	.sec03::after{
		width:100vw;
		height:calc(705 / 750 * 100vw);
		background: url(../img/index/layer_sec03-sp.png) no-repeat center top;
		background-size: cover;
		left: 0;
		bottom: calc(-705 / 750* 100vw);
	}

	.sec03 {
		padding-top: calc(600 / 750* 100vw);
		padding-bottom: calc(680 / 750* 100vw);
		height: calc(5970 / 750* 100vw);
	}

	.sec03 .headLine01 {
		margin-bottom: calc(130 / 750* 100vw);
	}

	.sec03 .inner {
		display: block;
		margin-bottom: calc(150 / 750* 100vw);
	}

	.sec03 .inner .photoBox {
		width: 100%;
	}

	.sec03 .inner .photoBox img {
		width: 100%;
	}

	.sec03 .inner .textBox {
		float: none;
		width: auto;
		padding-top: 23px;
	}

	.sec03 .inner .textBox .ttl {
		font-size: calc(31 / 750 * 100vw);
		line-height: calc(50 / 750 * 100vw);
		letter-spacing: calc(4.96 / 750 * 100vw);
		margin-bottom: calc(45 / 750 * 100vw);
	}

	.sec03 .inner .textBox .txt {
		font-size: calc(22 / 750 * 100vw);
		line-height: calc(44 / 750 * 100vw);
		letter-spacing: calc(6.5 / 750 * 100vw);
	}

	.sec03 .inner .textBox .small {
		font-size: calc(22 / 750 * 100vw);
		line-height: calc(40 / 750 * 100vw);
		letter-spacing: calc(3.6 / 750 * 100vw);
	}

	.sec03 .inner .textBox .small a {
		text-decoration: underline;
		position: relative;
		font-weight: 300;
	}

	.sec03 .inner .textBox .small a:before {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		content: "";
	}

	.sec03 .inner .textBox .small embed {
		width: 16px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 4px;
	}
	.sec03 .program{
		padding:calc(100 / 750 * 100vw) calc(40 / 750 * 100vw);
	}
	.sec03 .program .headLine01 {
		margin-bottom: calc(70 / 750* 100vw);
	}
	.sec03 .program .timetable{
		grid-template-columns: 6em 15em;
		max-width: 21em;
		gap: calc(15 / 750* 100vw);
	}
	.sec03 .program .timetable.first{
		margin: 0 auto calc(100 / 750 * 100vw);
	}
	.sec03 .program .timetable.second{
		margin: 0 auto calc(40 / 750 * 100vw);
	}
	.sec03 .program .programTitle{
		max-width: initial;
		padding-bottom: calc(10 / 750 * 100vw);
		margin-bottom: calc(42 / 750 * 100vw);
		font-size : calc(30 / 750 * 100vw);
		letter-spacing : calc(4.5 / 750 * 100vw);
	}
	.sec03 .program .time{
		font-size : calc(28 / 750 * 100vw);
		letter-spacing : calc(5.88 / 750 * 100vw);
	}
	.sec03 .program .spot{
		font-size : calc(24 / 750 * 100vw);
		letter-spacing : calc(3.3 / 750 * 100vw);
	}
	.sec03 .program .note{
		font-size : calc(22 / 750 * 100vw);
		line-height : calc(36.05 / 750 * 100vw);
		letter-spacing : calc(2.0 / 750 * 100vw);
	}
}