@charset "utf-8";

/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

*:focus {outline:0;}

/* padding,border内側設定 */
*,::before,::after{box-sizing:border-box;}

/* HTML5 */
article, aside, figure, figcaption, footer, header, nav, section{display: block;}

/*------------------------------------------------------------
	Base
------------------------------------------------------------*/


:root {
	--black: #000;
	--white: #fff;
	--grey: #efefef;
	--border: #adadad;
	--box: #423e2f;
	--bg: #ffffffcc;
	--ja: 'Noto Serif JP', serif;
	--en: 'Cinzel', serif;
	--headerHeight: 80px;
	--px: 40px;
	--pbox: 17px;
	--cw: 1020px;
}

@media screen and (max-width: 800px) {
	:root {
		--headerHeight: 50px;
		--px: 20px;
	}
}


html {margin:0px;padding:0px;height: 100%;width:100%;-webkit-text-size-adjust:none;}

a:link {color:inherit;text-decoration:none;}
a:hover {color:inherit;text-decoration:none;}
a:active {color:inherit;text-decoration:none;}
a:visited {color:inherit;text-decoration:none;}


/* clearfix */
.clearfix:after {visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
/* clearfix for ie7 */
.clearfix {display:inline-block;}
.clearfix {display:block;}

img {max-width: 100%;height: auto;vertical-align: bottom;}
iframe {
	max-width: 100%;
	vertical-align: bottom;
}

body {
	font-family: var(--ja);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--black);
	background: var(--black);
	position: relative;
	height: auto;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pcb {display: block;}
.spb {display: none;}
.pcib {display: inline-block;}
.spib {display: none;}
.pcf {display: flex;}
.spf {display: none;}
.pcg {display: grid;}
.spg {display: none;}


.inview {
	opacity: 0;
	transition: opacity 1s .5s;
}
.inview.visible {
	opacity: 1;
}
.inviewelm > * {
	opacity: 0;
	transition: opacity 1s .5s;
}
.inviewelm > *.visible {
	opacity: 1;
}


@media screen and (max-width: 800px) {
	body {
		font-size: 14px;
		line-height: 1.6;
	}
	
	.pcb {display: none;}
	.spb {display: block;}
	.pcib {display: none;}
	.spib {display: inline-block;}
	.pcf {display: none;}
	.spf {display: flex;}
	.pcg {display: none;}
	.spg {display: grid;}
}

/*------------------------------------------------------------
	Header
------------------------------------------------------------*/

#header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: 0;
	z-index: 100;
	transition: 0.5s;
}
#header .header-wrap {
	width: 100%;
	height: var(--headerHeight);
	position: relative;
	z-index: 101;
	background-color: var(--black);
	color: var(--white);
	transition: .5s;
}
.moved #header .header-wrap {
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.2)
}
.moved.hiddenHeader #header .header-wrap {
	transform: translate(0, -110%);
}

#header .logo {
	position: absolute;
	top: 50%;
	left: var(--px);
	z-index: 100;
	display: flex;
	transform: translate(0,-50%);
	transition: 0.3s;
	line-height: 1;
}
#header .logo:hover {
	opacity: 0.6;
}
#header .logo img {
	width: 154px;
	height: auto;
}

@media screen and (max-width: 800px) {
	#header .logo img {
		width: 84px;
	}

}

.menu {
	width: 100%;
	height: 100%;
}
.menu .menu-wrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	padding: 0 var(--px);
}
.menu .main-nav {
	display: flex;
	align-items: center;
	line-height: 1;
	font-size: 16px;
	font-weight: 700;
	height: auto;
	gap: 30px;
}
.menu .main-nav li {
	height: 100%;
	display: flex;
	align-items: center;
}

.menu .main-nav > li > a {
	line-height: 2;
	display: block;
	position: relative;
}
.menu .main-nav > li > a::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 1px;
	background: currentcolor;
	transition: .5s;
	transform: translate(-50%,0);
}
.menu .main-nav > li > a:hover::after {
	width: 100%;
}
@media screen and (max-width: 800px) {

	.menu.spb {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100%;
		background: var(--black) url(https://www.ticketport.co.jp/lp/nier_15th_ex/images/menu-bg.png) center center/cover no-repeat;
		color: var(--white);
		z-index: 100;
		max-height: 100%;
		overflow-y: scroll;
		opacity: 0;
		visibility: hidden;
		padding: 150px var(--px);
		display: flex;
		align-items: flex-start;
		transition: .2s ease-in .1s;
	}
	.opened .menu {
		opacity: 1;
		visibility: visible;
		transition: .3s ease-out .3s;
	}
	.menu .menu-wrap {
		display: block;
		width: 100%;
		padding: 0;
		height: auto;
	}
	.menu .main-nav {
		width: 200px;
		display: grid;
		gap: 39px;
		height: auto;
		margin: auto;
		text-align: center;
		font-size: 24px;
		line-height: 34px;
	}
	.menu .main-nav > li {
		display: block;
	}
	.menu .main-nav > li > a {
		display: inline-block;
		line-height: 34px;
		width: auto;
		border-bottom: none;
	}
	.menu .main-nav > li > a:hover {
		border: none;
	}
	.menu .menu-footer {
		position: absolute;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-bottom: 40px;
		align-items: center;
		text-align: center;
		bottom: 0;
		left: 0;
	}
	.menu .menu-footer .sns img {
		width: 26px;
	}
	.menu .menu-footer .copy {
		font-size: 12px;
		line-height: 14px;
		font-weight: 500;
	}
}

/*------------------------------------------------------------
	MENU - BUTTON
------------------------------------------------------------*/

.menu-trigger {
	display: none;
}
@media screen and (max-width: 800px) {
	.menu-close {
		width: 40px;
		height: 30px;
		position: fixed;
		top: 10px;
		right: var(--px);
		z-index: 2001;
		opacity: 0;
		visibility: hidden;
	}
	.opened .menu-close {
		visibility: visible;
		opacity: 1;
	}
	.menu-trigger {
		width: 40px;
		height: 30px;
		position: fixed;
		top: 10px;
		right: var(--px);
		z-index: 2000;
		display: block;
	}
	.menu-trigger span {
		display: block;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 1px;
		border-radius: 100px;
		opacity: 1;
		background-color: var(--white);
		transition: .3s;
	}
	.opened .menu-trigger span {
		background-color: var(--white);
	}
	.menu-trigger span:nth-of-type(1),
	.menu-trigger span:nth-of-type(3) {
		transition: background-color .2s ease 0s, margin .2s ease .63s, transform .2s ease 0s;
	}
	.menu-trigger span:nth-of-type(1) {
		margin-top: -5px;
	}
	.menu-trigger span:nth-of-type(2) {
		display: none;
		transition: background-color .2s ease 0s, opacity .2s ease 0s;
	}
	.menu-trigger span:nth-of-type(3) {
		margin-top: 5px;
	}
	.opened .menu-trigger span:nth-of-type(1),
	.opened .menu-trigger span:nth-of-type(3) {
		transition: background-color .2s ease 0s, margin .1s ease 0s, transform .1s ease .15s;
	}
	.opened .menu-trigger span:nth-of-type(1) {
		margin-top: 0;
		transform: rotate(-45deg);
	}
	.opened .menu-trigger span:nth-of-type(2) {
		opacity: 0;
	}
	.opened .menu-trigger span:nth-of-type(3) {
		margin-top: 0;
		transform: rotate(45deg);
	}
}


/*------------------------------------------------------------
	MV
------------------------------------------------------------*/
#mv {
	position: relative;
	z-index: 1;
	padding-top: var(--headerHeight);
}
#mv::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	z-index: -1;
}
#mv h1 {
	position: relative;
	width: 100%;
	height: auto;
}
#mv img.mv-img {
	position: relative;
	top: 0;
	left: calc(100vw * 81 / 1280);
	width: calc(100vw * 751 / 1280);
}
#mv img.mv-logo {
	transition-delay: 1.2s;
	transition-duration: 2s;
	width: calc(100vw * 420 / 1280);
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: calc(100vw * 102 / 1280);
	transform: translate(0,-50%);
	height: auto;
}
@media screen and (max-width: 800px) {
	#mv h1 {
		overflow: hidden;
		aspect-ratio: 390 / 650;
	}
	#mv img.mv-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		max-width: 100vw;
	}
	#mv img.mv-logo {
		width: calc(100vw * 290 / 390);
		margin-left: 0;
		position: absolute;
		left: 50%;
		top: calc(100vw * 528 / 390);
		transform: translate(-50%,0);
		height: auto;
	}
}



/*------------------------------------------------------------
	Common
------------------------------------------------------------*/
.btn {
	display: flex;
	width: 300px;
	height: 50px;
	font-size: 18px;
	line-height: 1.8;
	font-weight: 700;
	align-items: center;
	text-align: center;
	justify-content: center;
	border-radius: 100px;
}
.btn.black {
	color: var(--white);
	background: var(--black);
}
#main {
	position: relative;
	overflow: hidden;
}

#main .section-wrap {
	padding: 200px var(--px) 290px;
	margin-top: -150px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 15px, rgba(0, 0, 0, 0.2) 37.5px, rgba(0, 0, 0, 0.5) 75px, rgb(0, 0, 0) 150px, rgb(0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 15px, rgba(0, 0, 0, 0.2) 37.5px, rgba(0, 0, 0, 0.5) 75px, rgb(0, 0, 0) 150px, rgb(0, 0, 0) 100%);
}
#main .section-wrap > img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .section-title {
	position: relative;
	max-width: var(--cw);
	margin: auto;
	width: 100%;
	margin-bottom: 50px;
	color: var(--white);
}
#main .section-title h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
#main .section-title h2 .en {
	width: 100%;
	text-align: center;
	font-family: var(--en);
	font-weight: 400;
	font-size: 20px;
	line-height: 27px;
}
#main .section-title h2 .ja {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
#main .section-title h2 .txt img {
	height: 40px;
	width: auto;
}
#main .section-title h2 .lines {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 4px;
}
#main .section-title h2 .lines span {
	width: 10px;
	height: 40px;
	background: currentcolor;
}
#main .section-title h2 .lines:first-child span:last-child {
	width: 4px;
}
#main .section-title h2 .lines:last-child span:first-child {
	width: 4px;
}
#main .section-content {
	position: relative;
	max-width: var(--cw);
	margin: auto;
	width: 100%;
}
#main .section-content:has(.box) {
	padding: var(--pbox);
	background: var(--bg);
}
#main .section-content .box {
	position: relative;
	width: 100%;
	border: 1px solid var(--box);
	padding: var(--px);
}
#main .section-content .box > .square {
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	background: var(--box);
}
#main .section-content .box > .square:nth-child(1) {
	bottom: 100%;
	right: 100%;
}
#main .section-content .box > .square:nth-child(2) {
	bottom: 100%;
	left: 100%;
}
#main .section-content .box > .square:nth-child(3) {
	top: 100%;
	left: 100%;
}
#main .section-content .box > .square:nth-child(4) {
	top: 100%;
	right: 100%;
}

#main .section-content dl {
	display: grid;
	grid-template-columns: 112px auto;
	margin-bottom: -20px;
}
#main .section-content dl dt {
	font-size: 18px;
	font-weight: 700;
	line-height: 29px;
	padding: 20px 0;
	border-top: 1px solid var(--border);
}
#main .section-content dl dd {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	padding: 20px 0;
	border-top: 1px solid var(--border);
}
#main .section-content dl dt:nth-child(1),
#main .section-content dl dd:nth-child(2) {
	padding-top: 0;
	border-top: none;
}
#main .section-content dl dd ul {
	padding-left: 1.5em;
	list-style-type: disc;
}
::marker {
	font-size: 80%;
}

@media screen and (max-width: 800px) {
	.btn {
		width: 100%;
	}
	
	#main .section-wrap {
		padding: 120px var(--px) 290px;
		margin-top: -150px;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.2) 30px, rgba(0, 0, 0, 0.5) 60px, rgb(0, 0, 0) 100px, rgb(0, 0, 0) 100%);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.2) 30px, rgba(0, 0, 0, 0.5) 60px, rgb(0, 0, 0) 100px, rgb(0, 0, 0) 100%);
	}
	#main .section-wrap > img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100lvh;
		object-fit: cover;
	}

	#main .section-title {
		margin-bottom: 40px;
	}
	#main .section-title h2 .en {
		font-size: 16px;
		line-height: 20px;
	}
	#main .section-title h2 .txt img {
		height: 30px;
		width: auto;
	}
	#main .section-title h2 .lines {
		gap: 3px;
	}
	#main .section-title h2 .lines span {
		height: 30px;
		width: 8px;
	}
	#main .section-title h2 .lines:first-child span:last-child,
	#main .section-title h2 .lines:last-child span:first-child {
		width: 3px;
	}
	#main .section-content .box {
		padding: 30px var(--px);
	}
	#main .section-content dl {
		grid-template-columns: 1fr;
		margin-bottom: -20px;
	}
	#main .section-content dl dt {
		font-size: 16px;
		line-height: 23px;
		padding: 20px 0 5px;
		border-top: 1px solid var(--border);
	}
	#main .section-content dl dd {
		font-size: 14px;
		padding: 5px 0 20px;
		border-top: none;
	}
	#main .section-content dl dd:nth-child(2) {
		padding-top: 5px;
		border-top: none;
	}
	#main .section-content dl dd ul {
		padding-left: 1.5em;
		list-style-type: disc;
	}
}

/*------------------------------------------------------------
	News
------------------------------------------------------------*/
#news .section-wrap {
	margin-top: 0;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 100%);
}
#news .section-content {
	position: relative;
}

#news .news-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#news .news-item {
	position: relative;
	width: 100%;
	background: var(--bg);
	padding: 24px 20px;
	display: grid;
	grid-template-columns: 32px 90px auto;
	align-items: center;
	gap: 30px;
	font-weight: 400;
	font-size: 16px;
	line-height: 23px;
}
#news .news-item::before {
	content: '';
	display: block;
	width: 100%;
	height: calc(100% - 16px);
	position: absolute;
	top: 8px;
	left: 0;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	pointer-events: none;
}
@media screen and (max-width: 800px) {
	#news .news-list {
		gap: 16px;
	}
	#news .news-item {
		padding: 16px;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
	}
	#news .news-item img {
		width: 19px;
	}
	#news .news-item .title {
		width: 100%;
		padding-left: 39px;
	}
}


/*------------------------------------------------------------
	About
------------------------------------------------------------*/
#about .section-content {
	position: relative;
}

@media screen and (max-width: 800px) {
	#about .section-content::before {
		width: 223px;
		height: 316px;
		top: -195px;
		left: -104px;
	}
}


/*------------------------------------------------------------
	News
------------------------------------------------------------*/

#ticket .section-content h3 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}
#ticket .price {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 14px 0 30px;
}
#ticket .price .price-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 40px;
	gap: 10px;
	color: var(--white);
	background: var(--black);
}
#ticket .price .price-box.white {
	color: var(--black);
	background: var(--white);
}
#ticket .price .price-box > img {
	position: absolute;
	width: 62px;
	height: 10px;
}
#ticket .price .price-box > img:nth-child(1) {
	top: 16px;
	right: 16px;
}
#ticket .price .price-box > img:nth-child(2) {
	bottom: 16px;
	left: 16px;
	transform: scale(-1,-1);
}
#ticket .price .price-box::after {
	content: '';
	display: block;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	position: absolute;
	top: 10px;
	left: 10px;
	border: 1px solid var(--white);
	pointer-events: none;
}
#ticket .price .price-box.white::after {
	border-color: var(--black);
}
#ticket .price .price-box h4 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}
#ticket .price .price-box h5 {
	font-weight: 700;
	font-size: 30px;
	line-height: 43px;
}
#ticket .price .price-box h5 small {
	font-size: 18px;
	line-height: 26px;
	margin-left: 8px;
}
#ticket .price .price-box p {
	margin-top: 10px;
	font-size: 16px;
	line-height: 23px;
}
#ticket .section-content dl {
	padding-top: 20px;
	border-top: 1px solid var(--border);
	grid-template-columns: 141px auto;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--border);
}
#ticket .section-content dl dt.aic {
	display: flex;
	align-items: center;
}
#ticket .section-content dl dd ul + p {
	margin-top: 1.8em;
}

#ticket .section-content .goods {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 12px;
}
#ticket .section-content .goods h4 {
	margin-top: 20px;
	font-size: 16px;
	font-weight: 400;
	line-height: 23px;
}
#ticket .section-content dl.last {
	grid-template-columns: 217px auto;
	gap: 60px;
	padding-top: 40px;
	border-bottom: none;
	margin-bottom: 0;
}
#ticket .section-content dl.last h3 {
	margin-bottom: 20px;
}
#ticket .section-content dl.last dt {
	padding-bottom: 0;
}
#ticket .section-content dl.last dd {
	padding-top: 46px;
	padding-bottom: 0;
}
#ticket .section-content dl.last dd h4 {
	margin-bottom: 30px;
}
#ticket .section-content .col-goods {
	margin-top: 20px;
	display: grid;
	grid-template-columns: 362px auto;
	gap: 0;
}
#ticket .section-content .col-goods + .col-goods {
	margin-top: 20px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
}
#ticket .section-content .col-goods > h3 {
	grid-area: 1 / 1 / 2 / 3;
	margin-bottom: 20px;
}
#ticket .section-content .col-goods .img img {
	width: 362px;
}
#ticket .section-content .col-goods .detail {
	padding-left: 45px;
}
#ticket .section-content .col-goods .detail h3 {
	margin-bottom: 20px;
}
#ticket .section-content .col-goods .detail p {
	font-size: 16px;
	line-height: 23px;
}
#ticket .section-content .col-goods .detail ul {
	font-size: 16px;
	line-height: 1.8;
	padding-left: 1.5em;
	list-style-type: disc;
	margin-top: 10px;
}
@media screen and (max-width: 800px) {
	#ticket .section-content h3 {
		font-size: 16px;
		line-height: 23px;
	}
	#ticket .price {
		margin: 20px 0 30px;
	}
	#ticket .price .price-box {
		padding: 38px 30px;
		gap: 10px;
	}
	#ticket .price .price-box > img {
		position: absolute;
		width: 56px;
		height: 9px;
	}
	#ticket .price .price-box::after {
		width: calc(100% - 16px);
		height: calc(100% - 16px);
		top: 8px;
		left: 8px;
	}
	#ticket .price .price-box h4 {
		font-size: 14px;
		line-height: 20px;
	}
	#ticket .price .price-box h5 {
		font-size: 24px;
		line-height: 34px;
	}
	#ticket .price .price-box p {
		margin-top: 0;
		font-size: 12px;
		line-height: 1.6;
	}
	#ticket .section-content dl {
		padding-top: 20px;
		border-top: 1px solid var(--border);
		grid-template-columns: 1fr;
		margin-bottom: 40px;
		border-bottom: 1px solid var(--border);
	}
	#ticket .section-content .goods {
		grid-template-columns: repeat(2,1fr);
		gap: 16px 10px;
	}
	#ticket .section-content .goods h4 {
		font-size: 14px;
		line-height: 20px;
		margin-top: 12px;
	}
	#ticket .section-content dl.last {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	#ticket .section-content dl.last h3 {
		margin-bottom: 20px;
	}
	#ticket .section-content dl.last dd {
		padding-top: 0;
	}
	#ticket .section-content dl.last dd h4 {
		margin-bottom: 20px;
	}
	#ticket .section-content .col-goods {
		margin-top: 20px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	#ticket .section-content .col-goods > h3 {
		grid-area: auto;
		margin-bottom: 0;
	}
	#ticket .section-content .col-goods .img {
		text-align: center;
	}
	#ticket .section-content .col-goods .detail {
		padding: 0;
	}
	#ticket .section-content .col-goods .detail h3 {
		margin-bottom: 20px;
	}
	#ticket .section-content .col-goods .detail p {
		font-size: 14px;
		line-height: 20px;
	}
	#ticket .section-content .col-goods .detail ul {
		font-size: 14px;
		line-height: 1.8;
		padding-left: 1.5em;
		list-style-type: disc;
		margin-top: 10px;
	}

}


/*------------------------------------------------------------
	hightlight
------------------------------------------------------------*/

#highlight .sp-only-br {
  display: none;
}

#highlight .sp-none-br2 {
  display: inline;
}

#highlight .section-wrap {
	margin-top: 0;
	padding: 200px var(--px) 0px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 100%);
}
#highlight .section-content {
	position: relative;
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 50px;
	
}

#highlight .news-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#highlight .news-item {
	position: relative;
	width: 100%;
	background: var(--bg);
	padding: 24px 20px;
	display: grid;
	grid-template-columns: 32px 90px auto;
	align-items: center;
	gap: 30px;
	font-weight: 400;
	font-size: 16px;
	line-height: 23px;
}
#highlight .news-item::before {
	content: '';
	display: block;
	width: 100%;
	height: calc(100% - 16px);
	position: absolute;
	top: 8px;
	left: 0;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	pointer-events: none;
}
@media screen and (max-width: 800px) {


#highlight .section-wrap {
	margin-top: 0;
	padding: 100px var(--px) 0px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 100%);
}

#highlight .sp-only-br {
    display: inline;
 }
 
#highlight .sp-none-br2 {
    display: none;
  }

#highlight .section-content {
    position: relative;
    text-align: center;
    color: white;
    font-size: 14px;
    line-height: 30px;
}

	#highlight .news-list {
		gap: 16px;
	}
	#highlight .news-item {
		padding: 16px;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
	}
	#highlight .news-item img {
		width: 19px;
	}
	#highlight .news-item .title {
		width: 100%;
		padding-left: 39px;
	}
}




/*------------------------------------------------------------
	Section Last
------------------------------------------------------------*/
#main .last-bg {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 15px, rgba(0, 0, 0, 0.2) 37.5px, rgba(0, 0, 0, 0.5) 75px, rgb(0, 0, 0) 150px, rgb(0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.05) 15px, rgba(0, 0, 0, 0.2) 37.5px, rgba(0, 0, 0, 0.5) 75px, rgb(0, 0, 0) 150px, rgb(0, 0, 0) 100%);
}
#main .last-bg img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main section:last-child .section-title,
#main section:last-child .section-content {
	z-index: 1;
}
#main section:last-child .last-bg {
	display: block;
}

/*------------------------------------------------------------
	Footer
------------------------------------------------------------*/

#footer .footer-wrap {
	padding: 50px var(--px) 50px;
	background: var(--black);
	color: var(--white);
	display: flex;
	flex-direction: column;
	gap: 30px;
}
#footer .sns {
	display: flex;
	justify-content: center;
	line-height: 1;
	gap: 12px;
	width: 100%;
	margin: auto;
}
#footer a {
	transition: 0.5s;
}
#footer a:hover {
	opacity: 0.5;
}
#footer a img {
	width: 36px;
}
#footer .logo {
	text-align: center;
}
#footer .logo img {
	width: 216px;
}
#footer .copy {
	color: var(--white);
	text-align: center;
	font-size: 14px;
	line-height: 17px;
	font-family: var(--ja);
	font-weight: 500;
}

@media screen and (max-width: 800px) {
	#footer .footer-wrap {
		padding: 40px var(--px) 20px;
		gap: 20px;
	}
	#footer a img {
		width: 26px;
	}
	#footer .logo img {
		width: 159px;
	}
	#footer .copy {
		font-size: 12px;
		line-height: 14px;
		margin-top: 0;
		white-space: nowrap;
	}
}