@charset "utf-8";

/* body */
body {
	color:#1a1a1a;
	margin:0px auto;
	padding:220px 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:46px; font-weight:bold; text-align:center; text-decoration:underline double; margin:10px 10px 0 10px; }
h2 { color:orangered; font-size:46px; font-weight:bold; text-align:center; text-decoration:underline double; margin:10px 10px 0 10px; }
h3 { color:black; font-size:32px; font-weight:bold; text-align:center; }
h4 { color:black; font-size:36px; font-weight:bold; }
p  { font-size:32px; font-weight:bold; margin:5px 5px; }
ol { font-family:meiryo; font-weight:bold; color:blue; }
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; }

.okotowari {
	width: 92%;
	margin:10px auto;
	padding:20px;
	background-color:lavenderblush;
    border:solid 4px blue;
    border-radius: 10px;
	font-size:32px;
	font-weight:bold;
	color:black;
	line-height:1.4
}

.upper ,
.lower {
	width: 95%;
    padding: 20px 5px;
    margin: 10px auto;
    background: lavender;
    border: solid 4px pink;
    border-radius: 10px;
}

.lower p { text-align:center; }
.music1, .music2 { display:flex; box-sizing:border-box; }

.list_left , .list_right {
	width:50%;
	min-width:380px;
	margin:0px auto;
	padding:0px 0px;
	text-align:center;
	line-height:1.2;
}
.list_left a, .list_right a {
	font-size:32px; 
	font-weight:bold;
	color:#fff;
}
.list_left a:hover, .list_right a:hover {
	color:#444;
	background-color:#fc9; 
}

.pause { margin:10px auto 0px auto; text-align:center; line-height:1.5; }
.pause a { font-size:32px; font-weight:bold; color:#fff; }
.pause a:hover { color:#444; background-color:#fc9; }
 
.ensou_1, .ensou_2, .ensou_3, .ensou_4 { min-width:370px; margin:30px 10px; padding:10px 0px; background-color:#ccc; } 
.ensou_1 .utube { border: ridge 4px #0cf; background-color:#49f; }
.ensou_2 .utube { border: ridge 4px #99c; background-color:#99c; }
.ensou_3 .utube { border: ridge 4px #6f6; background-color:#693; }
.ensou_4 .utube { border: ridge 4px #f9f; background-color:#f9c; }  

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

.radius1 {
	font-size:28px;
	font-weight:bold;
	color:white;
	border: ridge 4px #ffc6bf;
	background-color: #ff4ca5;
	border-radius: 10px;
	margin: 20px auto 10px auto;
	width: 300px;
	height: 140px;
	padding: 10px 5px;
	text-align: center;
}
.radius1 p {font-weight:bold; color:white; }

.lesson , 
.utube
{
	display: block ;
	border: ridge 4px #8cf;
	width: 400px ;
	margin: 20px auto;
	padding: 10px 0 ;
	border-radius: 10px ;
	font-size: 32px;
	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;}
}