@charset "utf-8";
/*-----------------------------------------------
 * top.css
-------------------------------------------------*/

/*-----------------------------------------------
 * fvArea
-------------------------------------------------*/
.fvArea {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #000;
}
.fvArea__video {
	width: 100%;
	line-height: 0;
}
.fvArea__videoEl {
	display: block;
	width: 100%;
	height: auto; /* 縦横比を維持 */
	max-width: 100%;
	object-fit: contain;
}

/*-----------------------------------------------
 * section
-------------------------------------------------*/
.section {
	padding: min(calc(120 / var(--vw-min) * 100vw), 120px) 0;
}
@media screen and (max-width:768px){
	.section {
		padding: calc(80 / var(--vw-min) * 100vw) 0;
	}
}
.sectionTtl{
	color: var(--color-red);
	text-align: center;
	text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.50);
	font-family:var(--font-en);
	font-size: min(calc(118 / var(--vw-min) * 100vw), 118px);
	font-weight: 700;
}
@media screen and (max-width:768px){
	.sectionTtl{
		font-size: calc(118 / var(--vw-min) * 100vw);
		line-height:calc(110 / var(--vw-min) * 100vw);
	}
}

.moreBtn{
	display: flex;
	position: relative;
	margin: min(calc(80 / var(--vw-min) * 100vw), 80px) auto 0;
	width: min(calc(300 / var(--vw-min) * 100vw), 300px);
	height: min(calc(60 / var(--vw-min) * 100vw), 60px);
	padding: min(calc(11 / var(--vw-min) * 100vw), 11px) min(calc(20 / var(--vw-min) * 100vw), 20px);
	justify-content: center;
	align-items: center;
	border-radius: min(calc(6 / var(--vw-min) * 100vw), 6px);
	background: linear-gradient(90deg, #395471 0%, #22374D 100%);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
}
.moreBtn::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity .3s var(--easing-outquart);
	pointer-events: none;
}
.moreBtn:hover::before{
	opacity: 1;
}
.moreBtn__txt{
	position: relative;
	z-index: 1;
	color: var(--color-white);
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 900;
	line-height: min(calc(30 / var(--vw-min) * 100vw), 30px); /* 150% */
	letter-spacing: min(calc(0.2 / var(--vw-min) * 100vw), 0.2px);
}
.moreBtn__arrow{
	z-index: 1;
	width: min(calc(20 / var(--vw-min) * 100vw), 20px);
	height: min(calc(20 / var(--vw-min) * 100vw), 20px);
	mask: url(../img/odyssey/ic_arrow_r.svg) no-repeat center center / contain;
	background-size: contain;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--color-white);
	position: absolute;
	right: min(calc(15 / var(--vw-min) * 100vw), 15px);
	top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width:768px){
	.moreBtn{
		margin-top: calc(60 / var(--vw-min) * 100vw);
		width: calc(420 / var(--vw-min) * 100vw);
		height: calc(90 / var(--vw-min) * 100vw);
		padding: calc(8 / var(--vw-min) * 100vw) calc(15 / var(--vw-min) * 100vw);
		gap: calc(45 / var(--vw-min) * 100vw);
	}
	.moreBtn__txt{
		font-size: calc(26 / var(--vw-min) * 100vw);
		line-height: calc(38 / var(--vw-min) * 100vw);
	}
	.moreBtn__arrow{
		width: calc(15 / var(--vw-min) * 100vw);
		height: calc(25 / var(--vw-min) * 100vw);
		right: calc(15 / var(--vw-min) * 100vw);
	}
}

.bgWrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.bg__img{
	content: '';
	display: block;
	width: 100%;
	height: 100svh;
	position: sticky;
	top: 0;
	left: 0;
	margin: auto;
	pointer-events: none;
}
/*-----------------------------------------------
 * Introduction
-------------------------------------------------*/
.introduction {
	position: relative;
	width: 100%;
}
.introduction__bg {
	background: url(../img/odyssey/intro_bg.jpg) no-repeat center center / cover;
}
@media screen and (max-width:768px){
	.introduction {
		padding: calc(40 / var(--vw-min) * 100vw) 0 calc(80 / var(--vw-min) * 100vw) ;
	}
	.introduction__bg {
		background: url(../img/odyssey/intro_bg_sp.jpg) no-repeat center center / cover;
	}
}

.introduction__inner {
	text-align: center;
}

.introduction__ttlWrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.introduction__ttl{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.introduction__ttl__txt1{
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 700;
	letter-spacing: min(calc(0.16 / var(--vw-min) * 100vw), 0.16px);
}
.introduction__ttl__txt2{
	color: var(--color-blue);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 900;
	letter-spacing: min(calc(0.16 / var(--vw-min) * 100vw), 0.16px);
}
.introduction__ttl__txt3{
	color: var(--color-blue);
	font-size: min(calc(60 / var(--vw-min) * 100vw), 60px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
.introduction__ttl__txt4{
	text-align: center;
	font-feature-settings: 'hwid' on;
	font-family: var(--font-serif);
	font-size: min(calc(80 / var(--vw-min) * 100vw), 80px);
	font-weight: 900;
	line-height: min(calc(96 / var(--vw-min) * 100vw), 96px);
	letter-spacing: min(calc(6 / var(--vw-min) * 100vw), 6px);
	background: linear-gradient(180deg, #E6B369 0%, #977647 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
	padding: min(calc(8 / var(--vw-min) * 100vw), 8px) 0;
}

@media screen and (max-width:768px){
	.introduction__ttl__txt1{
		font-size: calc(20 / var(--vw-min) * 100vw);
		letter-spacing: calc(0.2 / var(--vw-min) * 100vw);
		margin-bottom: calc(10 / var(--vw-min) * 100vw);
	}
	.introduction__ttl__txt2{
		font-size: calc(20 / var(--vw-min) * 100vw);
		line-height: 1;
		letter-spacing: calc(0.2 / var(--vw-min) * 100vw);
	}
	.introduction__ttl__txt3{
		font-size: calc(70 / var(--vw-min) * 100vw);
		line-height: 1;
		letter-spacing: calc(0.7 / var(--vw-min) * 100vw);
	}

	.introduction__ttl__txt4{
		font-size: calc(65 / var(--vw-min) * 100vw);
		line-height: calc(78 / var(--vw-min) * 100vw);
		letter-spacing:calc(6 / var(--vw-min) * 100vw);
		margin-top:calc(22 / var(--vw-min) * 100vw);
		padding: calc(6 / var(--vw-min) * 100vw) 0;
	}
}

.introduction__txtWrap{
	text-align: center;
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.introduction__txt{
	color: var(--color-white);
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	font-weight: 900;
	line-height: min(calc(34 / var(--vw-min) * 100vw), 34px); 
	letter-spacing: min(calc(0.18 / var(--vw-min) * 100vw), 0.18px);
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);

}
.introduction__phLists{
	margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (max-width:768px){
	.introduction__phLists{
		margin-top: calc(58 / var(--vw-min) * 100vw);
	}
}

/*---------------
 * phLists
----------------*/
.phLists {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	overflow: hidden;
}
.phLists__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: inherit;
	width: max-content;
	animation: phLists-marquee 40s linear infinite;
}
.phLists:has(.phItem__btn:hover) .phLists__track {
	animation-play-state: paused;
}
.phItem {
	flex-shrink: 0;
	width: min(calc(400 / var(--vw-min) * 100vw), 400px);
	height: min(calc(225 / var(--vw-min) * 100vw), 225px);
	overflow: hidden;
}
.phItem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes phLists-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media screen and (max-width:768px){
	.phLists__track {
		animation-duration: 28s;
	}
}
.phItem__btn{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.phItem__btn img {
	transition: transform .4s var(--easing-outquart);
}
.phItem__btn:hover img {
	transform: scale(1.08);
}
.phItem__btn::after{
	position: absolute;
	right: -1px;
	bottom: -1px;
	z-index: 1;
	pointer-events: none;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/odyssey/ic_zoom.png) no-repeat right bottom / min(calc(74 / var(--vw-min) * 100vw), 74px) auto;
}

.bnrLists{
	margin-top: min(calc(60 / var(--vw-min) * 100vw), 60px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: min(calc(15 / var(--vw-min) * 100vw), 15px);
	width: 100%;
	overflow: hidden;
}
.bnrItem {
	width: min(calc(350 / var(--vw-min) * 100vw), 350px);
	height: min(calc(120 / var(--vw-min) * 100vw), 120px);
}
.bnrItem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width:768px){
	.bnrLists{
		margin-top: calc(50 / var(--vw-min) * 100vw);
		padding: 0 calc(45 / var(--vw-min) * 100vw);
		flex-direction: column;
		align-items: center;
		gap: calc(20 / var(--vw-min) * 100vw);
	}
	.bnrItem {
		width: 100%;
		height: auto;
	}
	.bnrItem img {
		height: auto;
		object-fit: contain;
	}
}
/*-----------------------------------------------
 * About
-------------------------------------------------*/
.about {
	position: relative;
	width: 100%;
}
.about__bg {
	background: url(../img/odyssey/about_bg.jpg) no-repeat center center / cover;
}
.about__inner {
	text-align: center;
}

.about__txtWrap{
	text-align: center;
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	padding: 0 calc(45 / var(--vw-min) * 100vw);
}
.about__txt{
	color: var(--color-white);
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.50);
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	font-weight: 900;
	line-height: min(calc(38 / var(--vw-min) * 100vw), 38px); /* 172.727% */
	letter-spacing: min(calc(0.22 / var(--vw-min) * 100vw), 0.22px);
}
.about__txt:not(:first-child){
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
@media screen and (max-width:768px){
	.about__txtWrap{
		margin-top: calc(60 / var(--vw-min) * 100vw);
	}
	.about__txt{
		font-size: calc(26 / var(--vw-min) * 100vw);
		line-height: calc(44 / var(--vw-min) * 100vw);
	}
}
.about__phLists{
	margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (max-width:768px){
	.about__phLists{
		margin-top: calc(60 / var(--vw-min) * 100vw);
		padding: 0 calc(45 / var(--vw-min) * 100vw);
	}
	/* スマホでは流さない（縦並び・複製非表示） */
	.about__phLists .phLists__track {
		animation: none;
		flex-direction: column;
		align-items: center;
		width: 100%;
		transform: none;
	}
	.about__phLists .phItem--clone {
		display: none;
	}
	.about__phLists .phItem {
		width: 100%;
		height: calc(370 / var(--vw-min) * 100vw);
	}

}
/*------------------------------
Character
-------------------------------*/
.character {
	position: relative;
	width: 100%;
}
.character__bg {
	background: url(../img/odyssey/character_bg.jpg) no-repeat center center / cover;
}
.character__inner {
	text-align: center;
}

.character__ttl{
	line-height: 1;
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:768px){
	.character__ttl{
		margin-bottom: calc(40 / var(--vw-min) * 100vw);
	}
}

.character__diagram{
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.character__diagram img{
	width: 100%;
	height: auto;
}
.character__txt{
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	font-weight: 900;
	line-height: min(calc(38 / var(--vw-min) * 100vw), 38px); /* 172.727% */
	letter-spacing: min(calc(0.22 / var(--vw-min) * 100vw), 0.22px);
}

@media (hover: hover) and (pointer: fine){
	.character__diagram button{
		transition: opacity .3s ease;
	}
	.character__diagram button:hover{
		opacity: .7;
	}
}
@media screen and (max-width:768px){
	.character__diagram button:hover{
		opacity: 1;
	}
}
@media screen and (max-width:768px){
	.character__btnTxt{
		display: flex;
		align-items: center;
		justify-content: center;
		gap:calc(10 / var(--vw-min) * 100vw);
		margin-top: calc(30 / var(--vw-min) * 100vw);
	}
	.character__btnTxt__ic_plus{
		display: block;
		width: calc(58 / var(--vw-min) * 100vw);
		height: calc(58 / var(--vw-min) * 100vw);
		background-color: var(--color-blue);
		border: 1px solid var(--color-white);
		border-radius: 50%;
		position: relative;
	}
	.character__btnTxt__ic_plus::before{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		width: calc(24 / var(--vw-min) * 100vw);
		height: calc(24 / var(--vw-min) * 100vw);
		mask: url(../img/odyssey/ic_plus.svg) no-repeat center center / 100% 100%;
		background-color: var(--color-white);
		background-size: 100% 100%;
	}
	.character__btnTxt__txt{
		font-size: calc(24 / var(--vw-min) * 100vw);
		font-weight: 900;
		line-height: calc(38 / var(--vw-min) * 100vw); /* 158.333% */
		letter-spacing: calc(0.24 / var(--vw-min) * 100vw);
		color: var(--color-white);
	}
}

/* characterLists (Swiper) */
.characterListsWrap {
	position: relative;
	margin-top: min(calc(60 / var(--vw-min) * 100vw), 60px);
	width: 100%;
	overflow: hidden;
	padding-bottom: min(calc(60 / var(--vw-min) * 100vw), 60px);
}
@media screen and (max-width:768px){
	.characterListsWrap {
		padding-left: calc(45 / var(--vw-min) * 100vw);
		padding-bottom: calc(120 / var(--vw-min) * 100vw);
	}
}
.characterListsWrap .characterLists.swiper {
	position: relative;
	left: calc(100% / 6); /* 今のカード幅のまま2枚を中央寄りに配置 */
	width: calc(100% * 2 / 3);
	max-width: none;
	margin: 0;
	transform: none;
	overflow: visible;
}
.characterLists .swiper-wrapper {
	align-items: stretch;
}
.characterItem {
	height: min(calc(440 / var(--vw-min) * 100vw), 440px);
	background: url(../img/odyssey/chara_card_bg.jpg) no-repeat center center / cover;
	box-sizing: border-box;
}
.characterItem__card {
	padding: min(calc(30 / var(--vw-min) * 100vw), 30px);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: min(calc(24 / var(--vw-min) * 100vw), 24px);
	cursor: pointer;
}
.characterItem__card:before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-shadow: 0 0 40px 0 #87754B inset;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
}
.characterItem__card::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image:
		url(../img/odyssey/chara_frame_lt.svg),
		url(../img/odyssey/chara_frame_rt.svg),
		url(../img/odyssey/chara_frame_lb.svg),
		url(../img/odyssey/chara_frame_rb.svg);
	background-repeat: no-repeat;
	background-position: top min(calc(4 / var(--vw-min) * 100vw), 4px) left min(calc(4 / var(--vw-min) * 100vw), 4px), top min(calc(4 / var(--vw-min) * 100vw), 4px) right min(calc(4 / var(--vw-min) * 100vw), 4px), bottom min(calc(4 / var(--vw-min) * 100vw), 4px) left min(calc(4 / var(--vw-min) * 100vw), 4px), bottom min(calc(4 / var(--vw-min) * 100vw), 4px) right min(calc(4 / var(--vw-min) * 100vw), 4px);
	background-size: min(calc(50 / var(--vw-min) * 100vw), 50px);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
	z-index: 2;
}
.characterItem__img {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-color: #8A8A8A;
	border: 1px solid var(--color-gold);
}
.characterItem__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--easing-outquart);
}
.characterItem__card:hover .characterItem__img img {
	transform: scale(1.08);
}
.characterItem__txt {
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
	padding-bottom: min(calc(8 / var(--vw-min) * 100vw), 8px);
	text-align: center;
	z-index: 2;
	position: relative;
}
.characterItem__name {
	color: var(--color-gold);
	text-shadow: 1px 1px 0 #FFF;
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 900;
	line-height: min(calc(30 / var(--vw-min) * 100vw), 30px); /* 150% */
	letter-spacing: min(calc(0.2 / var(--vw-min) * 100vw), 0.2px);
}
.characterItem__cast {
	margin-top: min(calc(4 / var(--vw-min) * 100vw), 4px);
	color: var(--color-blue);
	font-family: var(--font-ja);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 900;
	line-height: min(calc(30 / var(--vw-min) * 100vw), 30px); /* 187.5% */	
	letter-spacing: min(calc(0.16 / var(--vw-min) * 100vw), 0.16px);
	text-shadow: 1px 1px 0 #FFF;
}

/* nav */
.characterLists__prev,
.characterLists__next {
	position: absolute;
	z-index: 11;
	width: min(calc(64 / var(--vw-min) * 100vw), 64px);
	height: min(calc(64 / var(--vw-min) * 100vw), 64px);
	margin-top: 0;
	top: 42%;
	background-color: var(--color-blue);
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(calc(14 / var(--vw-min) * 100vw), 14px) auto;
	fill: linear-gradient(0deg, #395471 0%, #22374D 100%);
	border: 1px solid var(--color-gold);
	filter: drop-shadow(0 0 min(calc(10 / var(--vw-min) * 100vw), 10px) rgba(0, 0, 0, 0.40));
	border-radius: 50%;
	cursor: pointer;
}
@media screen and (max-width:768px){
	.characterLists__prev,
	.characterLists__next {
		width: calc(74 / var(--vw-min) * 100vw);
		height: calc(74 / var(--vw-min) * 100vw);
		background-size: calc(17 / var(--vw-min) * 100vw) auto;
		bottom: calc(0 / var(--vw-min) * 100vw);
		top: unset;
	}
}
.characterLists__prev {
	left: calc(100% / 6); 
	transform: translate(-50%, -50%);
	background-image: url(../img/odyssey/ic_arrow_l.svg);
}
.characterLists__next {
	right: calc(100% / 6); 
	left: auto;
	transform: translate(50%, -50%);
	background-image: url(../img/odyssey/ic_arrow_r.svg);
}
@media screen and (min-width: 769px) {
	.characterLists__prev,
	.characterLists__next {
		transition: transform .3s var(--easing-outquart);
	}
	.characterLists__prev:hover {
		transform: translate(-50%, -50%) scale(1.15);
	}
	.characterLists__next:hover {
		transform: translate(50%, -50%) scale(1.15);
	}
}
@media screen and (max-width:768px){
	.characterLists__prev {
		left: calc(45 / var(--vw-min) * 100vw);
		transform: unset;
	}
	.characterLists__next {
		right: calc(45 / var(--vw-min) * 100vw);
		left: unset;
		transform: unset;
	}
}
.characterLists__prev.swiper-button-disabled,
.characterLists__next.swiper-button-disabled {
	opacity: .35;
	pointer-events: none;
}

/* pagination */
.characterLists__pagination {
	bottom: 0 !important;
	position: absolute;
}
.characterLists__pagination .swiper-pagination-bullet {
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	height: min(calc(10 / var(--vw-min) * 100vw), 10px);
	margin: 0 min(calc(5 / var(--vw-min) * 100vw), 5px) !important;
	background: transparent;
	border: 1px solid var(--color-gold);
	opacity: 1;
	border-radius: 50%;
}
.characterLists__pagination .swiper-pagination-bullet-active {
	background: var(--color-blue);
}
@media screen and (max-width:768px){
	.characterLists__pagination {
		top: unset;
		bottom: calc(20 / var(--vw-min) * 100vw) !important;
	}
	.characterLists__pagination .swiper-pagination-bullet {
		width: calc(16 / var(--vw-min) * 100vw);
		height: calc(16 / var(--vw-min) * 100vw);
		margin: 0 calc(7 / var(--vw-min) * 100vw) !important;
	}
	.characterListsWrap .characterLists.swiper {
		left: 0;
		/* 旧 1.5表示時と同じカード幅（枠の 2/3）で1枚表示 */
		width: calc(100% * 2 / 3);
	}

	.characterItem__name {
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
	.characterItem__cast {
		font-size: calc(22 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * News
-------------------------------------------------*/
.news {
	position: relative;
	width: 100%;
	min-height: 100svh;
	padding: min(calc(120 / var(--vw-min) * 100vw), 120px) 0;
}
@media screen and (max-width:768px){
	.news {
		padding: calc(80 / var(--vw-min) * 100vw) 0;
	}
}
.news::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
	width: 100%;
	height: min(calc(400 / var(--vw-min) * 100vw), 400px);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}
@media screen and (max-width:768px){
	.news::after{
		background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, #000 100%);
		height:100%;
	}
}
.news__bg {
	background: url(../img/odyssey/news_bg.jpg) no-repeat center top / cover;
}
.news__inner {
	text-align: center;
}
.news__cont{
	margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	position: relative;
    z-index: 1;
}
.news__ttl{
	line-height: 1;
	margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
}
@media screen and (max-width:768px){
	.news__cont{
		margin-top: unset;
	}
	.news__ttl{
		margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	}
}

.newsLists{
	display: flex;
	width: min(calc(1080 / var(--vw-min) * 100vw), 1080px);
	margin: 0 auto;
	gap: min(calc(45 / var(--vw-min) * 100vw), 45px);
	flex-wrap: wrap;
}
.newsLists li{
	width: calc((100% - (min(calc(45 / var(--vw-min) * 100vw), 45px) * 2)) / 3);
}
.newsLists li a{
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
	text-decoration: none;
}
.newsLists li picture{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #8A8A8A;
	border-radius: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.newsLists li img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.newsLists li a > div{
	display: flex;
	flex-direction: column;
	gap: min(calc(8 / var(--vw-min) * 100vw), 8px);
	flex: 1;
}
.newsLists li p{
	text-align: left;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 700;
	line-height: min(calc(28 / var(--vw-min) * 100vw), 28px); /* 175% */
	text-shadow: 4px 4px 20px #000;
}
.newsLists li a > div > div{
	display: flex;
	align-items: center;
	gap: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
.newsLists li span{
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
	font-weight: 700;
	line-height: 1.4;
	color: #D21224;
	text-shadow: 4px 4px 20px #000;
	line-height: min(calc(20 / var(--vw-min) * 100vw), 20px); 
}
.newsLists li time{
	color: var(--color-white);
	text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.50);
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
	font-weight: 700;
	line-height: min(calc(20 / var(--vw-min) * 100vw), 20px); 
}
@media screen and (max-width:768px){
	.newsLists{
		width: 100%;
		gap: unset;
		flex-direction: column;
		padding: 0 calc(45 / var(--vw-min) * 100vw);
	}
	.newsLists li{
		width: 100%;
	}
	.newsLists li a{
		flex-direction: row;
		align-items: flex-start;
		gap: calc(20 / var(--vw-min) * 100vw);
		padding: calc(20 / var(--vw-min) * 100vw) 0;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
	.newsLists li:last-child a{
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.newsLists li picture{
		flex-shrink: 0;
		width: calc(200 / var(--vw-min) * 100vw);
		aspect-ratio: 16 / 9;
		border-radius: calc(10 / var(--vw-min) * 100vw);
	}
	.newsLists li img{
		width: 100%;
	}
	.newsLists li a > div{
		gap: calc(8 / var(--vw-min) * 100vw);
		min-width: 0;
	}
	.newsLists li p{
		font-size: calc(22 / var(--vw-min) * 100vw);
		line-height: calc(32 / var(--vw-min) * 100vw);
	}
	.newsLists li span{
		font-size: calc(18 / var(--vw-min) * 100vw);
		line-height: calc(20 / var(--vw-min) * 100vw);
	}
	.newsLists li time{
		font-size: calc(18 / var(--vw-min) * 100vw);
		line-height: calc(20 / var(--vw-min) * 100vw);
	}
}

.news__btn{
	width: min(calc(345 / var(--vw-min) * 100vw), 345px);
	height: min(calc(45 / var(--vw-min) * 100vw), 45px);
	background: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: min(calc(4 / var(--vw-min) * 100vw), 4px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.news__btn::before{
	content: none;
}
.news__btn::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #E6E6E6 0%, #BDBDBD 100%);
	opacity: 0;
	transition: opacity .3s var(--easing-outquart);
	pointer-events: none;
}
.news__btn:hover::after{
	opacity: 1;
}
.news__btn .moreBtn__txt{
	color: var(--color-black);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 700;
	line-height: min(calc(28 / var(--vw-min) * 100vw), 28px); /* 150% */
}
.moreBtn__plus{
	position: absolute;
	z-index: 1;
	right: min(calc(15 / var(--vw-min) * 100vw), 15px);
	top: 50%;
	transform: translateY(-50%);
	width: min(calc(15 / var(--vw-min) * 100vw), 15px);
	height: min(calc(15 / var(--vw-min) * 100vw), 15px);
	background: url(../img/odyssey/ic_plus.svg) no-repeat center center / contain;
}
@media screen and (max-width:768px){
	.news__btn{
		width:calc(420 / var(--vw-min) * 100vw);
		height: calc(70 / var(--vw-min) * 100vw);
	}
	.news__btn .moreBtn__txt{
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: calc(28 / var(--vw-min) * 100vw);
	}
	.moreBtn__plus{
		width: calc(26 / var(--vw-min) * 100vw);
		height: calc(26 / var(--vw-min) * 100vw);
		right: calc(24 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * Character Modal
-------------------------------------------------*/
#characterCont {
	position: relative;
	width: min(calc(1080 / var(--vw-min) * 100vw), 1080px);
	padding: min(calc(40 / var(--vw-min) * 100vw), 40px) 0;
	margin: 0 auto;
}
.characterContIn {
	width: 100%;
	padding: min(calc(70 / var(--vw-min) * 100vw), 70px);
	position: relative;
	background: url(../img/odyssey/chara_card_bg.jpg) no-repeat center center / cover;
}
.characterContIn::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-shadow: 0 0 40px 0 #87754B inset;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
}
.characterContIn::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image:
		url(../img/odyssey/chara_frame_lt.svg),
		url(../img/odyssey/chara_frame_rt.svg),
		url(../img/odyssey/chara_frame_lb.svg),
		url(../img/odyssey/chara_frame_rb.svg);
	background-repeat: no-repeat;
	background-position: top min(calc(4 / var(--vw-min) * 100vw), 4px) left min(calc(4 / var(--vw-min) * 100vw), 4px), top min(calc(4 / var(--vw-min) * 100vw), 4px) right min(calc(4 / var(--vw-min) * 100vw), 4px), bottom min(calc(4 / var(--vw-min) * 100vw), 4px) left min(calc(4 / var(--vw-min) * 100vw), 4px), bottom min(calc(4 / var(--vw-min) * 100vw), 4px) right min(calc(4 / var(--vw-min) * 100vw), 4px);
	background-size: min(calc(50 / var(--vw-min) * 100vw), 50px);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
	z-index: 2;
}
#js-characterModalCont {
	width: 100%;
	position: relative;
	display: flex;
	z-index: 3;
}
.character__img {
	width: min(calc(420 / var(--vw-min) * 100vw), 420px);
	margin-right: min(calc(50 / var(--vw-min) * 100vw), 50px);
	flex-shrink: 0;
	border: 1px solid var(--color-gold);
}
.character__img img {
	display: block;
	width: 100%;
	height: auto;
}
.character__detail {
	width: 100%;
}
.characterCont_ttl {
	color: var(--color-blue);
	font-weight: 800;
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
}
.characterCont_ttl--job {
	display: block;
	font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);
	color: var(--color-gold);
}
.characterCont_ttl--name {
	display: block;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	line-height: 1.5;
}
.character__detailIn {
	padding-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
.character__text {
	color: var(--color-black);
	font-weight: 700;
	line-height: 1.75;
	text-align: left;
}
@media screen and (max-width:768px){
	#characterCont {
		width: calc(670 / var(--vw-min) * 100vw);
		padding: calc(24 / var(--vw-min) * 100vw) 0;
	}
	.characterContIn {
		padding: calc(70 / var(--vw-min) * 100vw);
	}
	#js-characterModalCont {
		flex-direction: column;
	}
	.character__img {
		width: 100%;
		margin: 0 auto calc(24 / var(--vw-min) * 100vw);
	}
	.characterCont_ttl{
		text-align: center;
	}
	.characterCont_ttl--job {
		display: inline-block;
		color: var(--color-gold);
		text-shadow: 1px 1px 0 #FFF;
		line-height: calc(30 / var(--vw-min) * 100vw); /* 83.333% */
		letter-spacing: calc(0.36 / var(--vw-min) * 100vw);
		font-size: calc(36 / var(--vw-min) * 100vw);
		margin-bottom: calc(8 / var(--vw-min) * 100vw);
	}
	.characterCont_ttl--name {
		color: var(--color-blue);
		text-align: center;
		text-shadow: 1px 1px 0 #FFF;
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: calc(30 / var(--vw-min) * 100vw); /* 125% */
		letter-spacing: calc(0.24 / var(--vw-min) * 100vw);
	}
	.character__detailIn {
		padding-top: calc(16 / var(--vw-min) * 100vw);
	}
}

.footer{
	padding-bottom: min(calc(120 / var(--vw-min) * 100vw), 120px);
}


.footer__copy{
	text-align: center;
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
	margin-top: min(calc(56 / var(--vw-min) * 100vw), 56px);
	letter-spacing: 0;
}
@media screen and (max-width:768px){
	.footer__copy{
		margin-top: calc(40 / var(--vw-min) * 100vw);
		font-size: calc(18 / var(--vw-min) * 100vw);
	}
}