html{
	font-size: 62.5%;
	height: 100%;
}
body{
	font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	position: relative;
	z-index: 1;
	color: #333;
    background: #192744;
/*	background-image: url("../img/bg_dummy.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;*/
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	line-height: 1.2;
}
header{
	z-index: 888;
	z-index: 1;
}
/*header, section, footer*/
main, section, footer{
	z-index: 1;
	position: relative;
}

ul, ol{
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}

h4,h5{
	padding: 0;
	margin: 0;
}
p{
	font-size: 1.6rem;
	line-height: 1.4;
}
img{
	vertical-align:top;
/*	user-drag: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;*/
}
.img-border{
	border: 1px solid #ccc;
}
hr {
	height: 1px;
	border: none;
}
.hr-navy60 {
	background-color: #19274460;
	color: #19274460;
	margin-block: 2.4rem;
}
/* --------------------------------------------------------
* a
* -------------------------------------------------------*/
a{
	opacity: 1;
	transition: opacity .2s;
	text-decoration: underline;
	color: #333;
}
@media (hover: hover) {/*pc*/
	a:hover {
		opacity: .5;
		transition: opacity .5s;
		text-decoration: none;
	}
}
@media (hover: none) {/*sp*/
	a:hover {
		opacity: 1;
	}
}
a.text-link{
	color: #fff;
	text-decoration: underline;
}
a.text-link:hover {
	text-decoration: none;
}
a.externallink {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	padding-right: 18px;
}
a.externallink::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -18px;
	margin: auto;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	margin-right: 18px;
	background-image: url("../img/icon_open_navy.svg");
	background-repeat: no-repeat;
	background-size: 16px;
	content: '';
}
/* --------------------------------------------------------
* font
* -------------------------------------------------------*/
.eb-garamond-bold700 {
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.eb-garamond-bold400 {
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

/* --------------------------------------------------------
* width
* -------------------------------------------------------*/
.max-w-480 {
	position: relative;
	width: min(480px, 100%);
}
.max-w-600 {
	position: relative;
	width: min(600px, 100%);
	margin-inline: auto;
}
.max-w-960 {
	position: relative;
	width: min(960px, 100%);
	margin-inline: auto;
}
.max-w-1232 {
	position: relative;
	width: min(1232px, 100%);
	margin-inline: auto;
	padding-inline: 1.6rem;
}
.max-w-1260 {
	position: relative;
	width: min(1260px, 100%);
	margin-inline: auto;
}

/* --------------------------------------------------------
* color
* -------------------------------------------------------*/
.c-navy {color: #192744;}
.c-navy20 {color: #19274420;}
.c-red {color: #c80000;}
.c-yellow {color: #ff0;}
.c-white {color: #fff;}
.c-gray {color: #b0b0b0;}
.c-black {color: #333;}

/* --------------------------------------------------------
* bgcolor
* -------------------------------------------------------*/
.bg-navy {background-color: #192744;}
.bg-navy60 {background-color: #19274460;}
.bg-navy20 {background-color: #19274420;}
.bg-lightnavy {background-color: #576074;}
.bg-red {background-color: #c80000;}
.bg-white {background-color: #fff;}
.bg-white50 {background-color: #ffffff50;}
.bg-white20 {background-color: #ffffff20;}
.bg-darkgray {background-color: #333;}
.bg-gray {background-color: #434343;}

/* --------------------------------------------------------
* bg-border
* -------------------------------------------------------*/
.bg-border-navy {border: 1px solid #192744;}
.bg-border-navy50 {border: 1px solid #19274450;}
.bg-border-navy20 {border: 1px solid #19274420;}
.bg-border-white {border: 1px solid #fff;}

/* --------------------------------------------------------
* bold
* -------------------------------------------------------*/
.bold-900 {font-weight: 900;}
.bold-800 {font-weight: 800;}
.bold-700 {font-weight: 700;}
.bold-500 {font-weight: 500;}

/* --------------------------------------------------------
* font-size
* -------------------------------------------------------*/
.f-big {font-size: 120%;}
.f-small {font-size: 80%;}
.f-xsmall {font-size: 60%;}
.f-14 {font-size: 1.4rem;}
.f-12 {font-size: 1.2rem;}
.f-11 {font-size: 1.1rem;}

/*960-767*/
.f-32to24{font-size: clamp(2.4rem, -0.7793rem + 6.6321vw, 3.2rem);}
.f-32to22{font-size: clamp(2.2rem, -1.7741rem + 8.2902vw, 3.2rem);}
.f-28to24{font-size: clamp(2.4rem, 0.8104rem + 3.3161vw, 2.8rem);}
.f-24to18{font-size: clamp(1.8rem, -0.5845rem + 4.9741vw, 2.4rem);}
.f-24to16{font-size: clamp(1.6rem, -1.5793rem + 6.6321vw, 2.4rem);}
.f-22to18{font-size: clamp(1.8rem, 0.2104rem + 3.3161vw, 2.2rem);}
.f-22to16{font-size: clamp(1.6rem, -0.7845rem + 4.9741vw, 2.2rem);}
.f-18to16{font-size: clamp(1.6rem, 0.8052rem + 1.658vw, 1.8rem);}
.f-18to14{font-size: clamp(1.4rem, -0.1896rem + 3.3161vw, 1.8rem);}
.f-16to14{font-size: clamp(1.4rem, 0.6052rem + 1.658vw, 1.6rem);}
.f-16to12{font-size: clamp(1.2rem, -0.3896rem + 3.3161vw, 1.6rem);}
.f-14to12{font-size: clamp(1.2rem, 0.4052rem + 1.658vw, 1.4rem);}

/* --------------------------------------------------------
* text-align/decoration
* -------------------------------------------------------*/
.text-underline {text-decoration: underline;}
.text-center {text-align: center;}
.text-rightToLeft {
	text-align: right;
	@media (width < 960px) {
		text-align: left;
	}
}

/* --------------------------------------------------------
* line-height
* -------------------------------------------------------*/
.lineh-100 {line-height: 1.0;}

/* --------------------------------------------------------
* margin/padding
* -------------------------------------------------------*/
/*margin*/
.m-t00{margin-top: 0;}
.m-t05{margin-top: 0.5rem;}
.m-t10{margin-top: 1rem;}
.m-t20{margin-top: 2rem;}
.m-t30{margin-top: 3rem;}
.m-b00{margin-bottom: 0;}
.m-b05{margin-bottom: 0.5rem;}
.m-b10{margin-bottom: 1rem;}
.m-b16{margin-bottom: 1.6rem;}
.m-b20{margin-bottom: 2rem;}
.m-b24{margin-bottom: 2.4rem;}
.m-b30{margin-bottom: 3rem;}
.m-b40{margin-bottom: 4rem;}
.m-r05{margin-right: 0.5rem;}
.m-block24to16 {
	margin-block: 2.4rem;
	@media (width < 960px) {
		margin-block: 1.6rem;
	}
}
/*padding*/
.p-t20{padding-top: 2rem;}
.p-t24{padding-top: min(9.6vw, 2.4rem);}
.p-b24{padding-bottom: min(9.6vw, 2.4rem);}
.p-b160{padding-bottom: min(9.6vw, 16rem);}
.p-r24{padding-right: min(9.6vw, 2.4rem);}
.p-l10{padding-left: 1rem;}
.p-l16{padding-left: 1.6rem;}
.p-l24{padding-left: min(9.6vw, 2.4rem);}
.p-block32-16 {
	padding-block: 3.2rem;
	@media (width < 960px) {
		padding-block: 1.6rem;
	}
}
.p-block24to16 {
	padding-block: 2.4rem;
	@media (width < 960px) {
		padding-block: 1.6rem;
	}
}
.p-inline24to16 {
	padding-inline: 2.4rem;
	@media (width < 960px) {
		padding-inline: 1.6rem;
	}
}
.p-all24to16 {
	padding: 2.4rem;
	@media (width < 960px) {
		padding: 1.6rem;
	}
}
.p-all16{padding: 1.6rem;}
.p-all10{padding: 1.0rem;}

/* --------------------------------------------------------
* br
* -------------------------------------------------------*/
@media only screen and (min-width: 960px){
	.br-pc960 { display:block; }
	.br-sp960 { display:none; }
}
@media only screen and (max-width: 960px){
	.br-pc960 { display:none; }
	.br-sp960 { display:block; }
}
@media only screen and (min-width: 768px){
	.br-pc768 { display:block; }
	.br-sp768 { display:none; }
}
@media only screen and (max-width: 768px){
	.br-pc768 { display:none; }
	.br-sp768 { display:block; }
}
@media only screen and (min-width: 640px){
	.br-pc640 { display:block; }
	.br-sp640 { display:none; }
}
@media only screen and (max-width: 640px){
	.br-pc640 { display:none; }
	.br-sp640 { display:block; }
}
@media only screen and (min-width: 440px){
	.br-pc440 { display:block; }
	.br-sp440 { display:none; }
}
@media only screen and (max-width: 440px){
	.br-pc440 { display:none; }
	.br-sp440 { display:block; }
}

/* --------------------------------------------------------
* loading
* -------------------------------------------------------*/
#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #192744;
	z-index: 9999999;
	text-align: center;
	color:#fff;
	margin-top: -9.0rem;
	@media (width < 960px) {
		margin-top: -6.4rem;
	}
}
#loading-logo {
	width: 70%;
	max-width: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
body.appear{
	background-image: url("../img/bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-color: #fff;
	@media (width < 960px) {
		background-size: 100% auto;
		background-repeat: repeat-y;
		background-position: left top;
		background-image: url("../img/bg_sp_repeat.png");
		background-attachment: scroll;
	}
}
.loadingbg1,
.loadingbg2{
	display: none;
}
body.appear .loadingbg1,
body.appear .loadingbg2{
	display: block;
}
body.appear .loadingbg1{
	animation-name: LoadingAnime;
	animation-duration: 1.4s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	content: "";
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	bottom: 50%;
	left: 0;
	transform: scaleY(1);
	background-color: #192744;
}

@keyframes LoadingAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}
body.appear .loadingbg2{
	animation-name: LoadingAnime2;
	animation-duration: 1.4s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	content: "";
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 50%;
	left:0;
	transform: scaleY(1);
	background-color: #192744;
}
@keyframes LoadingAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
/*#container{*/
header, main, footer {
	opacity: 0;
}
/*body.appear #container{*/
body.appear header,
body.appear main,
body.appear footer {
	animation-name:LoadingAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes LoadingAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* --------------------------------------------------------
* header/drawer
* -------------------------------------------------------*/
.drawer-menu{
	height: auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.drawer-menu li{
	padding-right: 2.8rem;
	text-align: left;
	@media (width < 1200px) {
		padding-right: 1.8rem;
	}
	@media (width < 960px) {
		text-align: center;
		padding-right: 0;
	}
}
.drawer-menu li a{
	color: #242424;
	font-size: 1.6rem;
	font-weight: 700;
	@media (width < 960px) {
		padding: 1.8rem 1.0rem;
	}
}
.drawer-menu li a:hover{
	color: #d61518;
	@media (width < 960px) {
		color: #fff;
	}
}
.drawer-menu li.current a{
	color: #d61518;
}
@media not screen and (min-width: 960px){
	.drawer-nav {
		background-color: rgb(25, 39, 68 ,0.95);
	}
	.drawer-menu{
		display: flex;
		flex-wrap: wrap;
	}
	.drawer-menu li{
		width: 100%;
	}
	.drawer-menu li a,
	.drawer-menu li.current a{
		color: #fff;
		padding: 1.6rem 0;
	}
}
.drawer-hamburger {
	padding-top: 20px;
	padding-right: 2.2rem;
	padding-bottom: 32px;
	padding-left: 2.2rem;
}

/* --------------------------------------------------------
* magnific-popup
* -------------------------------------------------------*/
.mfp-inline-holder .mfp-content {
	background-color: #fff;
	max-width: 960px; 
	max-height: calc(100vh - 200px); 
	overflow-y: auto;
}
.mfp-inline-holder .mfp-content .modal {
	padding: 2.0rem;
}
.mfp-inline-holder .modal__img {
	width: 38%;
	@media (width < 880px) {
		width: 100%;
	}
}
.mfp-inline-holder .modal__img img {
	max-width: 380px;
	width: 100%;	
	@media (width < 880px) {
		max-width: 270px;
	}
}
.mfp-inline-holder .modal__detail {
	width: 60%;
	padding-top: 2.0rem;
	@media (width < 880px) {
		width: 100%;
	}
}
.mfp-inline-holder .modal__detail-name {
	text-align: left;
	@media (width < 880px) {
		text-align: center;
	}	
}
.mfp-inline-holder .popup-modal-dismiss {
	border-top: 1px solid #ccc;
	text-align: center;
	padding-block: 2.4rem;
	display: none;
	@media (width < 880px) {
		display: block;
	}	
}
.mfp-inline-holder .popup-modal-dismiss a {
	color: #333;
}
img.mfp-img {
	max-height: 80vh !important;
}

/* --------------------------------------------------------
* btn
* -------------------------------------------------------*/
.btn-white {
	border: 1px solid #192744;
	color: #192744;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-decoration: none;
	padding-block: 2.4rem;
	padding-inline: 1.6rem;
	font-weight: 700;
	transition : 0.5s;
	@media (width < 880px) {
		padding-block: min(9.6vw, 2.0rem);
	}	
}
.btn-white.newopen::after {
	width: 1.2em;
	height: 1.2em;
	margin-left: 8px;
	background-image: url("../img/icon_open_navy.svg");
	background-repeat: no-repeat;
	background-size: 1.2em;
	content: '';
}
@media (hover: hover) {
	.btn-white:hover {
		opacity: 1.0;
		transition : 0.5s;
		color: #fff;
		background-color: #192744;
	}
	.btn-white.newopen:hover::after {
		transition : 0.5s;
		background-image: url("../img/icon_open_white.svg");
	}
}
.btn-line {
	width: 100%;
	border: 1px solid #192744;
	text-align: center;
	color: #192744;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;
	padding-block: 2.4rem;
	padding-inline: 1.6rem;
	font-weight: 700;
	transition : 0.5s;
	@media (width < 880px) {
		padding-block: min(9.6vw, 2.0rem);
	}	
}
.btn-line.plus::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 12px;
	margin: auto;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
	background-image: url("../img/icon_plus_navy.svg");
	background-repeat: no-repeat;
	background-size: 1.2em;
	content: '';
}
@media (hover: hover) {
	.btn-line:hover {
		opacity: 1.0;
		transition : 0.5s;
		color: #fff;
		background-color: #192744;
	}
	.btn-line.plus:hover::after {
		transition : 0.5s;
		background-image: url("../img/icon_plus_white.svg");
	}
}
.starring-list .btn-line {
	font-size: clamp(1.3rem, 0.1078rem + 2.487vw, 1.6rem);
	padding-block: min(12vw, 2.0rem);
	@media (width < 880px) {
		padding-block: min(9.6vw, 1.6rem);
	}
}

/* --------------------------------------------------------
* col
* -------------------------------------------------------*/
.col,
.col-2,
.col-3 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.col-2 li{
	width: 49%;
	@media (width < 960px) {
		width: 100%;
		margin-bottom: 3.0rem;
	}
}
.col-2 li:last-child{
	margin-bottom: 0;
}
.col-3 li{
	width: 32%;
	@media (width < 960px) {
		width: 49%;
	}
	@media (width < 767px) {
		width: 100%;
	}
}
/* --------------------------------------------------------
* title
* -------------------------------------------------------*/
.title-lineLeft01 {
	position: relative;
	font-size: clamp(2.4rem, 0.8104rem + 3.3161vw, 2.8rem);
	font-weight: 700;
	color: #192744;
}
.title-lineLeft01 span::before{
	content: "";
	display: inline-block;
	width: 3rem;
	border-top: 5px solid #192744;
	vertical-align: middle;
	margin-right: 1rem;
}
.title-lineLeft02 {
	color: #192744;
	font-weight: 700;
	border-left: 5px solid #192744;
	padding-left: min(4.8vw, 1.5rem);
}
.title-borderBlank01 {
	border: 1px solid #fff;
	text-align: center;
}
.title-borderBottom {
	border-bottom: 1px solid #c80000;
}
.title-band01 {
	padding: 1.2rem 1.6rem;
	color: #fff;
	font-weight: 700;
	background-color: #192744;	
}
.title-block01 {
	display: block;
	padding-block: 0.6rem;
	font-weight: 700;
	max-width: 120px;
	text-align: center;
	margin-bottom: 5px;
}
.title-number {
	position: relative;
	padding-top: 1.5em;
	font-size: clamp(1.8rem, -0.5845rem + 4.9741vw, 2.4rem);
}
.title-number01 {
	font-size: clamp(1.8rem, -0.5845rem + 4.9741vw, 2.4rem);
	line-height: 1.4;
}
.title-number01 span{
	display: inline-block;
	@media (width < 640px) {
		display: block;
	}
}
.title-triangleBottom {
	position: relative;
	display: inline-block;
	margin: 1.6em 0;
	padding: 1.6em;
	width: 100%;
	color: #192744;
	border-bottom: 1px solid #192744;
}
.title-triangleBottom:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	border: 12px solid transparent;
	border-top: 12px solid #192744;
}
.title-triangleBottom__text {
	text-align: center;
}
.title-underline {
	border-bottom: 1px solid #192744;
	color: #192744;
	font-weight: 700;
	padding-bottom: 0.8rem;
	margin-bottom: 0.8rem;
}

/* --------------------------------------------------------
* section
* -------------------------------------------------------*/
.section-title {
	text-align: center;
	display: block;
	margin-inline: auto;
	margin-bottom: min(9.6vw, 2.4rem);
	max-width: 1020px;
	width: 100%;
}
.section-title-sub {
	max-width: 240px;
	margin-inline: auto;
	text-align: center;
	font-weight: 700;
	padding-block: 0.8rem;
	font-size: clamp(2.4rem, -3.9585rem + 13.2642vw, 4rem);
	color: #fff;
	background-color: #192744;
	@media (width < 880px) {
		max-width: clamp(160px, 40%, 240px);
	}
}
.section-bottom {
/*	padding-bottom: min(9.6vw, 20rem);*/
	padding-bottom: clamp(8rem, 22%, 16rem);
}
/* --------------------------------------------------------
* section-container
* -------------------------------------------------------*/
.section-container01 {
	background-color: #19274420;
}
.section-container01__head {
	padding-top:  clamp(2.2rem, 10%, 3.2rem);
	padding-right: clamp(2.2rem, 10%, 3.2rem);
	padding-bottom:  clamp(2.2rem, 10%, 3.2rem);
	border-bottom: 1px solid #192744;
	@media (width < 960px) {
/*		padding-top: min(9.6vw, 1.6rem);*/
		padding-right: min(9.6vw, 1.6rem);
/*		padding-bottom: min(9.6vw, 1.6rem);*/
	}
}
.section-container01__head-inner {
	display: table;
	width: 100%;
}
.section-container01__head-item {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	@media (width < 960px) {
		display: block;
		width: 100%;
	}
}
.section-container01__head-item:last-child {
	@media (width < 960px) {
		margin-top: 1.0rem;
	}
}
.section-container01__body {
	padding: 2.4rem;
	@media (width < 960px) {
		padding-block: 2.4rem;
		padding-inline: 1.6rem;
	}
}

/* --------------------------------------------------------
* table
* -------------------------------------------------------*/
/* table-type01 */
.table-type01 {
	border-top: 1px solid #19274440;
}
.table-type01__item {
	display: table;
	width: 100%;
	border-bottom: 1px solid #19274440;
	padding: 2.4rem;
	@media (width < 960px) {
		padding: 2.4rem 1.6rem;
	}
}
.table-type01__item-head {
	width: 40%;
	display: table-cell;
	vertical-align: top;
	padding-right: 2.4rem;
	@media (width < 960px) {
		width: 100%;
		display: block;
		padding-right: 0;
		margin-bottom: 1.6rem;
	}
}
.table-type01__title {
	font-weight: 700;
	font-size: clamp(1.6rem, 0.8052rem + 1.658vw, 1.8rem);
	border-left: 5px solid #192744;
	padding-left: min(4.8vw, 1.5rem);
	color: #192744;
	@media (width < 960px) {

	}
}
.table-type01__item-body {
	width: 60%;
	display: table-cell;
	vertical-align: top;
	font-size: clamp(1.4rem, 0.6052rem + 1.658vw, 1.6rem);
	@media (width < 960px) {
		width: 100%;
		display: block;
	}
}
/* table-type02 */
.table-type02 {
	align-items: stretch;
}
.table-type02__head {
	width: 18%;
	padding: 1.0rem;
	display: flex;
	justify-content:center;
	align-items: center;
	@media (width < 960px) {
		width: 100%;
		display: block;
		margin-bottom: 0.8rem;
	}
}
.table-type02__body {
	width: 80%;
	@media (width < 960px) {
		width: 100%;
		display: block;
	}
}

/* --------------------------------------------------------
* c-attention
* -------------------------------------------------------*/
.c-attention__list li{
	line-height: 1.4;
	margin-bottom: 1.6rem;
	font-size: clamp(1.2rem, 0.4052rem + 1.658vw, 1.4rem);
}
.c-attention__list li:last-child{
	margin-bottom: 0;
}
.c-attention__list li a{
	color: #fff;
	text-decoration: underline;
}
.c-attention__list li a:hover {
	text-decoration: none;
}
.c-attention__list .icon {
	display: block;
	padding-left: 1.5em;
}
.c-attention__list .icon::before {
	content: "";
	display: block;
	float: left;
	margin-left: -1.5em;
	width: 1em; text-align: center;
}
.c-attention__list .icon.type_kome::before {
	content: "※";
}
.c-attention__list .icon.type_disc::before {
	content: "・";
}

/* --------------------------------------------------------
* frame
* -------------------------------------------------------*/
.frame-border-outside {
	border: 4px solid #192744;
	position: relative;
	padding: 0.3rem;
}
.frame-border-inside {
	border: 2px solid #192744;
}
.frame_triangle {
	position: absolute;
	width: 34px;
	height: 34px;
	@media (width < 880px) {
		width: 24px;
		height: 24px;
	}
}
.frame_triangle.leftTop {
	left: 0;
	top: 0;
}
.frame_triangle.leftbottom {
	left: 0;
	bottom: 0;
}
.frame_triangle.rightTop {
	right: 0;
	top: 0;
}
.frame_triangle.rightbottom {
	right: 0;
	bottom: 0;
}

/* --------------------------------------------------------
* kv
* -------------------------------------------------------*/
.kv {
	padding-bottom: 8rem;
	@media (width < 960px) {
		padding-bottom: 4rem;
	}
}

/* --------------------------------------------------------
* intro
* -------------------------------------------------------*/
.intro {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.intro__head{
	background-color: #192744;
	width: 30%;
	padding-block: 4.0rem;
	padding-inline: 4.0rem;
	text-align: right;
	@media (width < 960px) {
		padding-inline: clamp(2.4rem, 1.6%, 3.6rem);
/*		padding-inline: 1.6rem;*/
		width: 10%;
		text-align: center;
	}
	@media (width < 640px) {
		padding-block: 2.4rem;
		padding-inline: clamp(1.2rem, 1%, 2.4rem);
	}
}
.intro__title img {
	width: 36%;
	@media (width < 1200px) {
		width: 60%;
	}
	@media (width < 960px) {
		width: 100%;
	}
}
.intro__body {
	width: 70%;
	padding-inline: 4.0rem;
	padding-block: 4.0rem;
	@media (width < 960px) {
		width: 90%;
	}
	@media (width < 767px) {
		padding-inline: 2.4rem;
		padding-block: 2.4rem;
	}
}
.intro__text-b {
	width: 96%;
	max-width: 800px;
	@media (width < 1200px) {
		width: 100%;
	}
}

/* --------------------------------------------------------
* starring
* -------------------------------------------------------*/
.starring-list {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.starring-list__item {
	width: 33.33%;
	padding-block: 3.0rem;
	padding-inline: 3.0rem;
	@media (width < 880px) {
		padding-block: min(9.6vw, 3.0rem);
		padding-inline: 1.6rem;
		width: 50%;
	}
}
.starring-img {
	margin-bottom: min(9.6vw, 1.6rem);
}
.starring-part {
	color: #192744;
	text-align: center;
	font-size: clamp(1.6rem, -1.5793rem + 6.6321vw, 2.4rem);
	line-height: 1.2;
}
.starring-line {
	width: min(9.6vw, 4rem);
	margin-inline: auto;
	margin-top: min(9.6vw, 0.8em);
	margin-bottom: min(9.6vw, 1.2rem);
	color: #192744;
	background-color: #192744;
}
.starring-name {
	color: #333;
	font-weight: 700;
	text-align: center;
	font-size: clamp(1.8rem, -2.1741rem + 8.2902vw, 2.8rem);
	margin-bottom: min(9.6vw, 1.6rem);
}
.starring-more {
	padding-bottom: min(9.6vw, 7rem);
}
.starring-voice__head {
	border-bottom: 4px double #192744;
	text-align: center;
	padding-block: min(9.6vw, 2.4rem);
	@media (width < 960px) {
		padding-block: min(9.6vw, 1.6rem);
	}
}
.starring-voice__head img {
	max-width: 700px;
	width: 92%;
}
.starring-voice__body {
	padding-block: min(9.6vw, 2.4rem);
	@media (width < 960px) {
		padding-block: min(9.6vw, 1.6rem);
	}
}

/* --------------------------------------------------------
* overview
* -------------------------------------------------------*/
.overview__title-sub {
	max-width: 400px;
	width: 64%;
	margin-inline: auto;
	margin-bottom: min(9.6vw, 3.2rem);
}
.overview-list__item {
	background-color: #19274420;
	margin-bottom: 2.0rem;
}
.overview-list__item-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
	padding: 2.4rem;
	@media (width < 960px) {
		padding: 2.4rem 1.6rem;
	}
}
.overview-list__head {
	width: 24%;
	display: flex;
	align-items: center;
	@media (width < 960px) {
		display: block;
		width: 100%;
		
	}
}
.overview-list__body {
	width: 74%;
	@media (width < 960px) {
		width: 100%;
	}
}
.overview-list__title {
	color: #192744;
	font-size: clamp(3.6rem, -1.1689rem + 9.9482vw, 4.8rem);
	line-height: 1.2;
	@media (width < 960px) {
		text-align: center;
		border-bottom: 1px solid #19274460;
		padding-bottom: 1.6rem;
		margin-bottom: 2.4rem;
	}
}
.overview-list__title-en {
	display: block;
	color: #19274480;
	line-height: 1.0;
	margin-top: 0.8rem;
	font-size: clamp(2.4rem, -0.7793rem + 6.6321vw, 3.2rem);
}
.overview-stage__title {
	width: 22%;
	padding: 2.0rem;
	@media (width < 880px) {
		width: 100%;
		padding: min(9.6vw, 1.6rem);
	}
}
.overview-stage__detail {
	width: 78%;
	padding: 2.0rem;
	@media (width < 880px) {
		width: 100%;
		padding: min(9.6vw, 1.6rem);
	}
}
.overview-place {
	align-items: stretch;
}
.overview-place__title {
	display: flex;
	justify-content:center;
	align-items: center;
	width: 22%;
	font-weight: 700;
}
.overview-place__detail {
	width: 78%;
	padding-left: 1.0rem;
}


/* --------------------------------------------------------
* ticket
* -------------------------------------------------------*/
/* schedule */
.ticket-schedule__detail {
	width: 72%;
	@media (width < 880px) {
		width: 100%;
	}
}
.ticket-schedule__caption {
	width: 22%;
	background-color: #19274490;
	padding: 1.6rem;
	@media (width < 880px) {
		width: 100%;
	}
}
.ticket-schedule__caption-title {
	background-color: #fff;
	padding: 0.8rem 1.0rem;
	color: #192744;
	font-size: 1.4rem;
	margin-bottom: 0.8rem;
}
.ticket-schedule__caption-text {
	color: #fff;
	font-size: 1.4rem;
	padding-left: 1.0rem;
}
.ticket-list__item {
	width: 32%;
	@media (width < 960px) {
		width: 100%;
	}
}
/* zoning */
.ticket-zoning__item {
	width: 50%;
	padding-inline: 1.6rem;
	@media (width < 960px) {
		width: 100%;
	}
}
.ticket-zoning__item:last-child {
	border-left: 1px solid #19274460;
	@media (width < 960px) {
		border-left: 0;
		border-top: 1px solid #19274460;
		padding-top: 2.4rem;
		margin-top: 2.4rem;
	}
}
/* tokuten */
.ticket-tokuten {
	justify-content: stretch;
}
.ticket-tokuten__detail {
	width: 68%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	@media (width < 960px) {
		width: 100%;
		display: block;
		margin-bottom: 1.6rem;
	}
}
.ticket-tokuten__img {
	width: 30%;
	text-align: center;
	@media (width < 960px) {
		width: 100%;
		display: block;
	}
}
.ticket-tokuten__img .noimage {
	@media (width < 960px) {
		width: 60%;
	}
}
.ticket-tokuten__attention {
	width: 400px;
	padding: 1.6rem;
	background-color: #ffffff70;
	@media (width < 960px) {
		width: 100%;
	}
}


/* --------------------------------------------------------
* PV
* -------------------------------------------------------*/
.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------
* footer
* -------------------------------------------------------*/
footer{
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: #192744;
	@media (width < 767px) {
		padding-top: 3rem;
		padding-bottom: 6rem;
	}
}
.footer__copyright{
	color: #fff;
	font-size: 1.1rem;
	text-align: center;
}

/* --------------------------------------------------------
* slide animation
* -------------------------------------------------------*/
/* blur */
.blur{
	animation-name: blurAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime{
	from{
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	to{
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
.blurTrigger{
	opacity: 0;
}
/* bgextend */
.bgextend{
	animation-name: bgextendAnimeBase;
	animation-duration: 2s;
	animation-fill-mode:forwards;
	overflow: hidden;
	opacity: 0;
	position: relative;
}
@keyframes bgextendAnimeBase{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	}
}
.bgappear{
	animation-name: bgextendAnimeSecond;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
	animation-fill-mode: forwards;
	opacity: 0;
	padding: 0 1.6rem;
	background-color: #c8a27c;
}
@media not screen and (min-width: 960px){/* 960px↓ */
	.bgappear{
		padding: 0 0.8rem;
	}
}
@keyframes bgextendAnimeSecond{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

/* left→right */
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #c8a27c;
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}
.bgappearTrigger,
.bgLRextendTrigger{
	opacity: 0;
}

/* --------------------------------------------------------
* page-top
* -------------------------------------------------------*/
#page-top{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #c8a27c;
	display: inline-block;
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 5;
	opacity: 0;
	transform: translateY(100px);
}
#page-top a{
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.2;
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width :70px;
	text-align:center;
	text-decoration: none;
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
@media not screen and (min-width: 640px) {
	#page-top{
		width: 50px;
		height: 50px;
	}
	#page-top a{width: 50px;font-size: 1.1rem;}
}

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(100px);
	}
}
/* fadeUp */
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime{
	from{
		opacity: 0;
		transform: translateY(100px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* fadeLeft */
.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
	from {
		opacity: 0;
		transform: translateX(-100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* flipLeft */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}
@keyframes flipLeftAnime{
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}
	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}
.flipLeftTrigger,
.fadeLeftTrigger,
.fadeUpTrigger{
	opacity: 0;
}
.delay-time05{
	animation-delay: 0.5s;
}