@charset "utf-8";

/* body */
body {
	color:#1a1a1a;
	margin:0px auto;
	padding:180px 0px 0px 0px;      /* ヘッダー固定部分 */
	background:#fff url(../../img/bg1.gif) repeat;
	background-position:center;
	font-family: "Helvetica Neue", Arial, Meiryo, "Meiryo UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
	max-width:1080px;
	min-width:800px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: none;
}


/* コンテンツ */
h1 { color:deeppink; font-size:26px; margin:0px 0px;}
h2 { color:orangered; font-size:26px; font-weight:bold; text-align:center; text-decoration:underline double; margin:10px 10px 0 10px; }
h3 { color:black; font-size:20px; font-weight:bold; text-align:center; }
h4 { color:black; font-size:20px; font-weight:bold; }
p  { font-family:meiryo; font-weight:bold; margin:5px 5px; }
ol { font-family:meiryo; font-weight:bold; color:blue; }
main { margin:20px 10px 40px; }
header, footer { max-width:1080px; z-index:99; }
span { font-size:24px; }

.header_fix { width: 100%; min-width:300px; position: fixed; top: 0px; }
.title_bar1 { width: 100%; height:120px; text-align:center; border:0px; background:#fff url(../../img/title_bg1_sp.gif) repeat;}
.title_bar2 { width: 100%; height:60px; text-align:center; border:0px; background:#fff url(../../img/title_bg2_sp.gif) repeat;}
.title_logo { margin: 30px 0 0 0; }
.back { margin:5px 0px 5px 20px; text-align:left; float:left; }
.back a { font-size:28px; font-weight:bold; text-decoration: none; color:white; }
.back img {width:50px; height:50px; vertical-align:middle; }
.back span { vertical-align:middle; }

.page_title {
	font-size:34px; 
	width: 100%;
	color:black;
	text-align:center;
	line-height:1.5;
}
.frame {
    font-size:28px; 
	padding: 20px 5px;
    margin: 0 10px;
	text-align:center;	
    background: lavender;
    border: solid 3px pink;
    border-radius: 10px;
}

.ensou { display:flex; margin:0px auto; text-align:center; flex-direction:row; }
.ensou_1 ,
.ensou_2 { min-width:220px; margin:0px auto; padding:10px 0px; background-color:#ccc; border-radius: 10px; }
.ensou_1 .utube { border: ridge 4px #0cf; background-color:#49f; }
.ensou_2 .utube { border: ridge 4px #99c; background-color:#f9c; }
.ensou section { width:50%; margin:5px; }


.ensou .play { margin:0px auto; text-align:center; line-height:1.5; }
.ensou .play a { font-size:28px; font-weight:bold; color:#fff; }
.ensou .play a:hover { color:#444; background-color:#fc9; }
.stop { margin:10px auto 20px; text-align:center; line-height:1.5; }
.stop a { font-size:28px; font-weight:bold; color:#fff; }
.stop a:hover { color:#444; background-color:#fc9; }

.footer { 
	height:50px;
	font-size:28px;
	font-weight:bold;
	color:white;
	padding:18px;
	text-align:center;
	line-height:40px;
	background-color:#f89;
}

/**************************************************
　　　　曲名ボタンのデザイン
**************************************************/
.utube
{
	display: block;
	border: ridge 4px #8cf;
	width: 420px;
	margin: 20px auto;
	padding: 2px 0px;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	background-color: #09f;
	text-align: center;
	text-decoration: none;
}


/********************************************************
          　　　 　　　　　　　　　文字点滅
　　　　　　　<span class="blinking">点滅させたい文字</span>
*********************************************************/

.blinking{
	font-size: 24px;
	font-weight: bold;
	color: red;
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 0.7s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}