/* すみだ五彩の芸術祭✕すみだトリフォニーホール　特設サイト トップページ　*/
@charset "utf-8";

body{
	background:url(../img/bg.png) no-repeat center bottom / cover;
}

/* class */
.pc{
	display:block;
}

/* header */
header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	z-index:1000;
	position:relative;
	padding:16px 2vw;
}
#logo{
	width:40%;
	max-width:210px;
}
nav{
	display:none;
}

/* top */
#top{
	overflow-x:clip;
	overflow-y:visible;
	position:relative;
}
/* crossFade */
#crossFade{
	text-align:left;
	margin:12px;
}
#crossFade > div{

}
#crossFade img{
	width:100%;
	position:absolute;
	opacity:0;
	border-radius:5.55% / 10%; /* 720 x 400 (40px) */ 
}
#crossFade div > img:first-child{
	opacity:1;
}
#crossFadePC > div{
	aspect-ratio:1440/800;
	position:relative;
}
#crossFadeSP > div{
	aspect-ratio:1/1;
	position:relative;
}
#crossFadePC{
	display:grid;
	gap:12px;
	grid-template-columns:1fr 1fr;
}
#crossFadeSP{
	display:none;
}

/* curve-text */
#curveText{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
.curve-text {
	z-index:10;
  position:relative;
  width:40%;
  height:40%;
  max-width:100%;
  max-height:100%;
  svg {
    width:100%;
    height:100%;
    overflow:visible;
  }  
  path {
    fill:transparent;
    stroke-width:0;
  }
  circle {
    fill:transparent;
    stroke:#fff;
		stroke-opacity:0.1;
    stroke-width:17px;
  }
  text {
    fill:#fff;
		font-size:50%;
  }  
  .rotating-text {
    transform-origin:50px 50px;
    animation:rotate 20s linear infinite;
    animation-direction:normal;
  }
	figure{
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		left:0;
		display:flex;
		justify-content:center;
		align-items:center;
		width:50%;
		margin:auto;
		aspect-ratio:1/1;
		border-radius:50%;
		background-color:rgba(255,255,255,0.9);
	}
	figure img{
		width:80%;
	}
}
@keyframes rotate{
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(-360deg);
  }
}

/* slashLine */
#slashLine{
	margin:0;
	padding:0;
	position:absolute;
	width:100%;
	top:0;
	bottom:0;
	z-index:1;
}
#slashLine > div{
	transform-origin:top;
	width:3px;
	height:10px;
	border-radius:300px;
	position:absolute;
	z-index:2;
	overflow:hidden;
}
#slashLine > div > div {
	transform:translateY(-100%);
}

/* scrollText */
#scrollText{
	display:flex;
	gap:1.4em;
	white-space:nowrap;
	line-height:1;
	font-size:10vw;
	color:#dfa9a4;
	overflow:hidden;
	height:1.4em;
	font-family: "Google Sans Flex", sans-serif;
	font-weight:100;
}
#scrollText p{
	animation:scroll 60s linear infinite;
}
@keyframes scroll{
	0%{
		translate:0;
	}
	100%{
		translate:calc(-100% - 1em);
	}
}

/* main */
main{
	padding:0 30px 24px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:24px;
	h1{
		font-size:max(min(4vw, 2.5em), 1em);
		font-weight:bold;
	}
	p{
		font-size:max(min(3.5vw, 1.25em), 1em);
		line-height:2;
		font-weight:bold;
	}
	div{
		font-size:max(min(4vw, 1em), 2.6em);
	}
	p.happening{
		font-size:max(min(2vw, 1.75em), 1em);
		font-family: "Google Sans Flex", sans-serif;
		font-weight:500;
	}
}

/* linkBanner */
#linkBanner ul{
	display:flex;
	gap:24px;
	width:80%;
	max-width:584px;
	margin:0 auto;
}
#linkBanner ul li{
	aspect-ratio:28/10;
	flex:1;
	position:relative;
}
#linkBanner ul li a{
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:20px;
	box-shadow:0 2px 7px #ddd;
	color:#fff;
	transition:0.3s;
	background-color:#7a3ba0;
	width:100%;
	height:100%;
	line-height:1;
	font-size:1.5em;
}
#linkBanner ul li a:hover{
	opacity:0.75;
}
#linkBanner ul li:nth-of-type(2) a{
	background-color:#a1170a;
}
#linkBanner .arrow{
	width:5%;
	aspect-ratio:1/1;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	position:absolute;
	right:10%;
	transform:rotate(45deg);
}
#linkBanner ul li p{
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:20px;
	box-shadow:0 2px 7px #ddd;
	color:#fff;
	transition:0.3s;
	background-color:#969696;
	width:100%;
	height:100%;
	line-height:1;
	font-size:1.5em;
}

/* **************************************** sp ******************************************* */

@media screen and (max-width: 740px) {

body{
	background:url(../img/sp_bg.png) no-repeat left bottom / cover;
}

/* class */
.pc{
	display:none;
}

header{
	padding:10px 20px;
}
#logo{

}

/* top */
#top{
	aspect-ratio:1/1;
}
/* crossFade */
#crossFadePC{
	display:none;
}
#crossFadeSP{
	display:grid;
	gap:12px;
	grid-template-columns:1fr 1fr;
}
#crossFade img{
	border-radius:11%; /* 360 x 360 (40px) */ 
}

.curve-text{
	figure{
		width:90%;
	}
  circle {
    stroke-width:22px;
		r:80%;		
  }
}

/* main */
main{
	padding:24px 16px;
}

/* scrollText */
#scrollText p{
	animation:scroll 30s linear infinite;
}

/* linkBanner */
#linkBanner ul li a{
	border-radius:10px;
	font-size:1em;
}
#linkBanner ul li p{
	border-radius:10px;
	font-size:1em;
}

}