@charset "utf-8";

@font-face {
font-family:'NotoSansJP';
src:url(fonts/NotoSansJP-Medium.otf) format('opentype');
font-style:normal;
font-weight:normal;
font-display:swap;
}

@font-face {
font-family:'NotoSansJP';
src:url(fonts/NotoSansJP-Bold.otf) format('opentype');
font-style:normal;
font-weight:bold;
font-display:swap;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:15px;
}

body{
font-family:NotoSansJP, serif;
line-height:1.5;
font-weight:normal;
color:#231815;
background:#F8D9C2;
}

a{
text-decoration:none;
color:#231815;
}

ul{
list-style-type:none;
}

h1,h2,h3,h4,h5,h6{
font-weight:normal;
font-size:1rem;
}

img{
vertical-align:bottom;
}

section{
position:relative;
z-index:10;
width:90%;
max-width:2000px;
margin:200px auto 0;
padding:80px 10px 100px;
background:rgba(255,255,255,0.3);
}

.cta{
display:block;
margin:0 auto;
background:#CB221F;
color:#fff;
width:fit-content;
padding:5px 50px 15px;
border-radius:100px;
font-size:1.3rem;
font-weight:bold;
box-shadow:2px 2px 2px rgba(0,0,0,0.3);
position:relative;
}

.cta:hover{
top:-2px;
box-shadow:2px 4px 2px rgba(0,0,0,0.3);
}

.cta::before{
content:url(img/bird-w.svg);
display:inline-block;
width:1.8em;
position:relative;
top:0.5em;
margin-right:0.5em;
}

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

html{
font-size:13px;
}

section{
margin:50px auto 0;
padding:40px 10px 50px;
}

.cta{
font-size:1.2rem;
padding:5px 20px 15px;
}

}

/*--------------------------------------------------------
	background decoration
--------------------------------------------------------*/
body::before{
content:url(img/bgdeco1.svg);
position:fixed;
top:-25vw;
right:-23vw;
width:85vw;
z-index:-1;
}

body::after{
content:url(img/bgdeco2.svg);
position:fixed;
bottom:-5vw;
left:-23vw;
width:65vw;
z-index:-1;
}

#bubble::before{
content:url(img/ptn3.svg);
position:fixed;
bottom:10vh;
right:10vw;
width:30vw;
z-index:2;
}

#bubble::after{
content:url(img/ptn1.svg);
position:fixed;
top:10vh;
left:10vw;
width:8vw;
z-index:-1;
}

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

body::before{
top:-20vw;
right:-40vw;
width:130vw;
}

body::after{
bottom:-5vw;
left:-23vw;
width:100vw;
}

#bubble::before{
bottom:10vh;
right:10vw;
width:40vw;
}

#bubble::after{
top:10vh;
left:10vw;
width:15vw;
}

}

/*--------------------------------------------------------
	header
--------------------------------------------------------*/
header{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100vw;
max-width:2000px;
height:100vh;
height:100lvh;
margin:0 auto;
}

header h1{
background:url(img/tri.svg);
background-repeat:no-repeat;
background-position:50% 50%;
width:70%;
margin:0 auto;
}

header h1 img{
width:100%;
display:block;
position:relative;
z-index:3;
}

header div::before{
content:url(img/bird.svg);
position:absolute;
top:10vh;
right:7vw;
width:8vw;
}

header div::after{
content:url(img/walk.svg);
position:absolute;
bottom:10vh;
left:5vw;
width:13vw;
}

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

header h1{
width:90%;
}

header div::before{
top:10vh;
right:7vw;
width:17vw;
}

header div::after{
bottom:10vh;
left:5vw;
width:26vw;
}

}

/*--------------------------------------------------------
	date
--------------------------------------------------------*/
#date{
text-align:center;
}

#date time{
letter-spacing:-2px;
font-weight:bold;
font-size:6rem;
}

#date span{
font-size:0.7em;
}

.time{
padding-left:0.5em;
}

#date ul:nth-child(1) li:nth-child(2){
letter-spacing:-2px;
font-weight:bold;
font-size:3rem;
}

#date ul:nth-child(1) li:nth-child(2) span{
letter-spacing:normal;
}

#date ul:nth-child(1) li:nth-child(3){
font-weight:bold;
font-size:2rem;
padding:1em 0;
}

#date #free{
font-weight:bold;
font-size:2rem;
color:#CB221F;
border:1px solid #CB221F;
width:fit-content;
margin:20px auto 50px;
padding:30px 90px;
}

#date #free li{
letter-spacing:normal;
font-size:1.2rem;
padding:0.1em 0;
}

#date #free span{
font-size:1em;
display:block;
}

#date #free li:last-child{;
font-weight:normal;
font-size:1rem;
}

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

#date time{
line-height:1.1;
}

#date ul:nth-child(1) li:nth-child(2){
padding-top:1em;
}

.time{
padding-left:0;
}

.time,#date ul:nth-child(1) li:nth-child(2) span{
display:block;
}

}

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

#date time{
font-size:12vw;
}

#date ul:nth-child(1) li:nth-child(2){
font-size:6vw;
}

#date ul:nth-child(1) li:nth-child(3){
font-size:1.3rem;
}

#date #free{
font-weight:bold;
font-size:1.3rem;
color:#CB221F;
border:1px solid #CB221F;
width:100%;
max-width:500px;
margin:20px auto 40px;
padding:30px 10px;
}

#date #free li{;
font-size:1rem;
}

#date #free li:last-child{;
font-size:0.8rem;
}

}

/*--------------------------------------------------------
	about
--------------------------------------------------------*/
#about{
text-align:center;
}

#about h2{
font-weight:bold;
font-size:2rem;
margin-bottom:1.5em;
}

#about p{
font-size:1.2rem;
max-width:900px;
margin:0 auto 15px;
}

#about p span{
display:block;
}

#about ul{
margin:50px auto;
display:flex;
justify-content:center;
gap:30px;
}

#about li{
width:33%;
max-width:247px;
box-shadow:10px 10px 0 rgba(0,0,0,0.2);
}

#about img{
width:100%;
}

#about iframe{
display:block;
width:100%;
max-width:800px;
aspect-ratio:560 / 315;
box-shadow:10px 10px 0 rgba(0,0,0,0.2);
margin:30px auto 50px;
}

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

#about h2{
font-size:1.7rem;
margin-bottom:1em;
}

#about p{
text-align:left;
font-size:1rem;
line-height:1.7;
}

#about ul{
margin:40px auto 5px;
flex-direction:column;
align-items:center;
gap:40px;
}

#about li{
width:85%;
max-width:100%;
}

#about iframe{
width:85%;
margin:50px auto 70px;
}

}

/*--------------------------------------------------------
	program
--------------------------------------------------------*/
#program{
width:100%;
max-width:2500px;
margin:100px auto; 
padding:25px 5%;
border-radius:50px;
background:rgba(246,185,156,0.7);
}

#program h2{
font-weight:bold;
font-size:1.5rem;
text-align:center;
letter-spacing:3px;
color:#CB221F;
}

#program div{
max-width:800px;
margin:50px auto 80px;
padding:10px 20px 20px;
position:relative;
background:rgba(255,255,255,0.4);
box-shadow:7px 7px 0 rgba(0,0,0,0.2);
}

#program h3{
width:fit-content;
margin:0 auto;
font-weight:bold;
font-size:1.7rem;
text-align:center;
}

#program h3::before{
content:url(img/bird.svg);
display:inline-block;
width:2em;
margin-right:0.5em;
position:relative;
top:0.6em;
}

#program h3 span{
display:block;
font-size:0.7em;
text-align:right;
}

#live-title{
margin:30px auto 0;
font-weight:bold;
font-size:1.3rem;
text-align:center;
}

#live-title span{
display:block;
}

#live-title span:nth-child(1){
display:inline-block;
}

#program ul{
margin:40px auto 0;
text-align:justify;
}

#program li{
margin-bottom:20px;
}

#program h4{
font-weight:bold;
font-size:1.2rem;
}

#program h4::before{
content:'●';
color:#CB221F;
font-size:0.8em;
margin-right:0.2em;
position:relative;
bottom:0.1em;
}

#map{
display:block;
width:70%;
max-width:600px;
margin:30px auto 20px;
}

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

#program{
padding:35px 5%;
margin:50px auto 100px;
}

#program h2{
font-size:1.6rem;
}

#program div{
margin:30px auto;
padding:20px 15px 20px;
}

#live-title{
margin:30px auto 25px;
font-size:1.2rem;
text-align:center;
}

#map{
width:90%;
margin:15px auto 20px;
}

}

/*--------------------------------------------------------
	profile
--------------------------------------------------------*/
#pfp{
max-width:800px;
margin:0 auto 50px;
display:flex;
align-items:center;
}

#pfp div:nth-child(1){
width:55%;
order:1;
}

#pfp h2{
font-weight:bold;
font-size:1.3rem;
text-align:center;
line-height:2;
border-bottom:2px solid #CB221F;
padding-top:30px;
position:relative;
}

#pfp h2::after{
content:'';
position:absolute;
width:100px;
height:10px;
border-bottom:2px solid #CB221F;
bottom:-2px;
left:-80px;
}

#pfp h2 span{
font-size:2rem;
margin-left:1em;
}

#pfp p{
font-size:1.1rem;
text-align:center;
line-height:2.5;
}

#pfp div:nth-child(2){
width:45%;
aspect-ratio:401 / 271;
background:url(img/pfp-bg.svg);
position:relative;
}

#pfp img{
width:100%;
}

#profile h3{
font-weight:bold;
font-size:1.5rem;
text-align:center;
color:#CB221F;
}

#profile p{
text-align:center;
max-width:780px;
margin:15px auto;
}

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

#pfp{
margin:0 auto 20px;
flex-direction:column;
}

#pfp div:nth-child(1){
width:100%;
}

#pfp h2{
width:100%;
max-width:250px;
margin:0 auto;
font-size:1.2rem;
line-height:2.5;
padding-top:10px;
}

#pfp h2::after{
display:none;
}

#pfp h2 span{
font-size:1.5rem;
}

#pfp p{
font-size:1rem;
line-height:1;
}

#pfp div:nth-child(2){
width:80%;
max-width:300px;
}

#profile h3{
font-size:1.2rem;
}

}

/*--------------------------------------------------------
	footer
--------------------------------------------------------*/
footer{
position:relative;
z-index:10;
padding-top:300px;
padding-bottom:20px;
}

footer p{
font-weight:bold;
font-size:2rem;
text-align:center;
}

footer ul{
margin:100px auto;
display:flex;
justify-content:center;
gap:40px;
}

footer li{
width:80px;
}

footer li img{
width:100%;
background:#F8D9C2;
border-radius:100px;
}

footer img:nth-child(4){
display:block;
width:800px;
margin:100px auto 50px;
}

footer small{
display:block;
text-align:center;
color:#CB221F;
}

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

footer{
padding-top:200px;
}

footer img:nth-child(4){
width:500px;
margin:100px auto 30px;
}

}

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

footer{
padding-top:80px;
}

footer p{
font-size:1.5rem;
text-align:center;
}

footer ul{
margin:50px auto;
gap:15px;
}

footer li{
width:50px;
}

footer img:nth-child(4){
max-width:500px;
width:80%;
min-width:280px;
margin:100px auto 10px;
}

}





/*{
animation:h-logo 4s linear infinite;
}

@keyframes h-logo{
0%{transform:translate(0, 0);}
7%{transform:translate(0, 0);}
10%{transform:translate(8px, 0);}
13%{transform:translate(0, 0);}
16%{transform:translate(5px, 0);}
18%{transform:translate(0, 0);}
100%{transform:translate(0, 0);}
}

*/