@charset "utf-8";

/* body */
body {
	color:#1a1a1a;
	margin:0px auto;
	padding:320px 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:500px;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}



/* コンテンツ */
h1 { color:deeppink; font-size:40px; text-align:center;}
h2 { color:deeppink; font-size:38px; text-align:center;}
/* h2 { color:black; font-size:40px; font-weight:bold; margin:0px 0px;} */
h3 { color:deeppink; font-size:14px; margin:0px 0px;}
td { font-size:12px; line-height:300%; }
p  { margin:5px 5px; }
img { max-width:90% }
figure { margin:0px; }
header, footer { max-width:1080px; z-index:99; }
div { margin-right:auto; margin-left:auto; }
span { font-size:24px; }

p.img_center {text-align: center;}

.header_fix { width: 100%; position: fixed; top: 0px; }
.title_bar { width:100%; height:130px; text-align:center; border:0px; background:#fff url(../img/title_bg_sp.gif) repeat; }
.title_bar img { margin:30px auto 0px; padding:0px; }

.note img { width:500px; }

.contents_bar {
	width:100%; 
	background-color:white; 
	text-align:center; 
}
.contents_bar td {
	width:16.6%;
	margin: 0px ;
	border-collapse: collapse;
	background: url(../img/contents-bar_sp.png) repeat-y;
	border-bottom: solid 5px #A12f;
	border-top: solid 5px #A12f;
}
.td_2 {	
	border-left: solid 3px #fff;
	border-right: solid 3px #fff;
}
.contents_bar a {
	display:block;
	padding:24px 0px;
	font-size:30px;
	font-weight:bold;
	text-decoration:underline;
	color:#00f;
}
.contents_bar a:hover {
	background: url(../img/contents-bar1_sp.png) repeat-y;
	color:#fff;}

.top {
	width:90%;
    padding: 20px 30px 30px 30px;
    margin: 30px auto 20px auto;
	font-family:Meiryo UI;
	font-size:32px;
	font-weight: bold;
	text-align:justify;
    color: black;
    background: lightcyan;
    border: solid 4px blue;
    border-radius: 20px;
	box-shadow: 0px 0px 15px #00b;
	line-height:1.4;
}	

table.waku {
	width: 500px;
	margin: 0 auto;
	border: 3px solid black;
}

.waku a {
	font-size:32px;
}

.waku tr, td {
	border: 1px solid black;
	text-align: center;
	line-height:1.4;
}

tr.doubleline {
	border-bottom: double;
}

.update {
	width:90%;
    padding: 20px 30px 30px 30px;
    margin: 30px auto 20px auto;
	font-family:Meiryo UI;
	font-size:32px;
	font-weight: bold;
	text-align:justify;
    color: black;
    background: lavenderblush;
    border: solid 4px blue;
    border-radius: 20px;
	box-shadow: 0px 0px 15px #00b;
	line-height:1.4;
}

.title {width:500px;}

.date { text-align:center; }

.date_h1 { text-align:center; }

.ff {
	font-family: Times New Roman;
	font-weight: bold;
	font-style: italic;
}

.mainframe { 
	width: 90%;
	margin:0px auto;
	padding:20px 0px;
	background-color:#fee;
    border:solid 4px blue;
    border-radius:20px;
	box-shadow: 0px 0px 15px #00b;
	text-align:center;
	line-height:1.5
}

.mailto a { color:blue; text-decoration:underline; }

.introduction {
	width: 90%;
	margin:0px auto;
	padding:20px;
	font-size:32px;
	font-weight:bold;
	text-align:justify;
	line-height:1.4
	
}

.shidou { margin: 5px 0px; background-color:#fff; }
.teaching { text-align:center; }

.main_rem {
	width: 90%;
	margin:0px auto;
	padding:30px;
	background-color:#eee;
    border:solid 4px black;
    border-radius:10px;
	font-size:36px;
	font-weight:bold;
	text-align:justify;
	line-height:1.2
}
.main_rem a { color:blue; text-decoration:none; }
.main_rem a:hover { color:magenta; text-decoration:underline; }

.shidou { 
	width:90%;
	margin:0px auto;
	padding:10px 0px 10px 20px;
	background-color:lavenderblush;
    border:solid 5px pink;
    border-radius:20px;
	box-shadow: 0px 0px 20px pink;
	font-size:28px;
	font-weight:bold;
	text-align:justify;
	line-height:1.5
}

.play { margin:0px auto; text-align:center; }
.play a { font-size:36px; font-weight:bold; color:#fff; }
.play a:hover { color:#444; background-color:#fc9; }
.play span { font-size:32px; }
.play h2 { margin:0px auto; }
.play p { font-size:36px; font-weight:bold; padding:0 10px 0 40px;}

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


/* 横並び */

.yokonarabi {
	display: flex;
}

.yokonarabi .yoko-img {
	margin: 0 0 0 60px;
	padding: 0;
	overflow: hidden;
	position: relative;
}

.yokonarabi .yoko-text {
	maegin: 0;
	padding: 0;
}

/**************************************************
  角丸枠を作る ＋ 枠の縁を立体的にする
**************************************************/
.radius
{
	font-size:36px;
	font-weight: bold;
	color:white;
	border: ridge 4px #ffc6bf;
	background-color: #ff4ca5;
	border-radius: 20px;
	margin: 20px auto;
	width: 530px;
	height: 140px;
	padding: 7px 10px;
	text-align: center;
}
.radius p {font-weight:bold; color:white; }

/**************************************************
  曲名ボタンのデザイン
**************************************************/
.utube ,
.sounds ,
.stop-button
{
	display: block ;
	border: ridge 4px #8cf;
	width: 100% ;
	width: 560px ;
	margin: 25px auto;
	padding: 10px 0 ;
	border-radius: 20px ;
	color: #fff ;
	font-weight: 700 ;
	background-color: #09f ;
	text-align: center ;
	text-decoration: none ;
}

.utube2
{
	display: block ;
	border: ridge 4px #8cf;
	width: 100% ;
	width: 500px ;
	margin: 25px auto;
	padding: 10px 0 ;
	border-radius: 20px ;
	color: #fff ;
	font-weight: 700 ;
	background-color: #09f ;
	text-align: center ;
	text-decoration: none ;
}


.stop-button
{
	background-color: #777 ;
}

.sounds2 ,
.stop-button2
{
	display: block ;
	border: ridge 4px #8cf;
	width: 100% ;
	width: 450px ;
	margin: 25px auto 20px auto;
	padding: 10px 0 ;
	border-radius: 20px ;
	color: #fff ;
	font-weight: 700 ;
	background-color: #09f ;
	text-align: center ;
	text-decoration: none ;
}

.stop-button2
{
	background-color: #777 ;
}


/********************************************************
          文字点滅
  <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;
}

.blinking2{
	/** font-size: 12px;
	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;
}

.blinking_h1{
	font-size: 40px;
	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;}
}