@charset "UTF-8";
/* CSS Document */

#main {
	height: 100vh;
	padding-top: 160px;
}
#main > .inner{
	width: 100%;
	height: 100%;
	position: relative;
}
#main .splide{
	height: 100%;
}
#main .splide .splide__track {
  height: 100%;
}
#main .splide .splide__list .splide__slide {
  width: 100%;
  height: 100%;
}

#main .txtArea {
  width: fit-content;
	padding: 50px 40px 50px 50px;
	isolation: isolate;
	border-radius: 25px;
	backdrop-filter: blur(5px);
	background: rgba(255,255,255,0.8);
	position: absolute;
	top:50%;
	left:calc((150/var(--vw))*100%);
	transform: translateY(-50%);
}
#main .txtArea .copy01{
  font-size: calc(18/14 * 1em);
	line-height: calc(27/18);
	letter-spacing: 0.15em;
	color: var(--bace);
}
#main .txtArea .copy02{
  font-size: calc(27/14 * 1em);
	line-height: calc(55/26);
	letter-spacing: 0.15em;
	color: var(--cc);
}
#main .txtArea .exArea{
	width: calc(100% - 10px);
	column-gap: 15px;
	margin-top: 15px;
}
#main .txtArea .exArea li{
	color: #FFF;
	background: var(--cc);
  font-size: calc(15/14 * 1em);
	line-height: calc(18/15);
	letter-spacing: 0.15em;
	text-align: center;
	padding: 0.5em 0;
	flex: 1;
}
#main .txtArea .access{
	width: calc(100% - 10px);
	position: relative;
  font-size: calc(15/14 * 1em);
	line-height: calc(18/15);
	color: var(--cc);
	padding: 5px 45px;
	margin-top: 20px;
}
#main .txtArea .access::before,
#main .txtArea .access::after{
	content:'';
	display: block;
	width: 8px;
	height: 100%;
	border: 1px solid var(--cc);
	position: absolute;
	top:0;
}
#main .txtArea .access::before{
	border-right: none;
	left:0;
}
#main .txtArea .access::after{
	border-left: none;
	right:0;
}
#main .txtArea .access p{
  text-align: justify;      /* 全体の両端揃え */
  text-align-last: justify; /* 最終行（1行のみの場合）の両端揃え */
}

#main .txtArea .access p + p{
  margin-top: 0.25em;
}