@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

body{
font-size:16px;
line-height:1.6;
font-family: 'Noto Serif JP' , 'Times New Roman', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
margin:0;
padding:0;
background: #f3f4f6;
}

@media (max-width: 480px){
body{font-size:14px;}
}



a {
  text-decoration: none;
  color: #221770; transition: all 300ms 0s ease;
}

a:hover, a img:hover{position:relative;
top:1px;
}

#contents{margin:0 auto; padding:0; width:100%; height:100%; max-width:480px;
}

*{box-sizing: border-box; }

h1,h2,h3,h4{text-align: center; margin:1rem auto; }
h1{font-size:2.4rem; font-weight:700; 
    background: linear-gradient(0deg, rgba(26, 0, 165, 1), rgba(255, 102, 0, 1));	
    -webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}

h1 span{font-size:1.6rem;
background:#000;
    -webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}

h1 rt{color:rgb(255 102 0 / 1); font-size:10px;}

h2{color:#221770; font-size:1.4em; font-weight:700;}
h2 span{font-size:0.8em; color:#333;}
h4{font-weight:700; color:rgba(255, 102, 0, 1); font-size:1.4em;}

section{display:block; margin:0 auto; padding:0; }


.play{border-radius: 1em; margin:2em auto;  background: #fff; width:90%; padding:.5em;}

.play p{text-align: center; color:#221770; font-size:1.2em;}

.cover{width:75%; max-width:180px; height:auto; display: block; margin:1.5em auto;}

.banner{width:calc(100% - 2em); max-width:480px; height:auto; display: block; margin:1.5em auto;}

.attention{width:90%; max-width: 640px; margin:1em auto;}
.attention h3{background: #221770; border-radius: 30px; color:#fff; padding:10px 20px; text-align: center; font-size:1.2em}
.attention p{padding:0 1em; font-size:.8em;}

.copyright{font-size:12px; text-align: center;}

audio{display: block; margin:1em auto;}

#footer{text-align: center; 
  position: sticky; top: 100vh;
width: 100%; padding:3em 0 1em 0;}
#footer .copyright{font-size:10px; color:#666;}