@charset "utf-8";
/* CSS Document */

body {
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}


.adjust-box {
    position: relative;
    width: 100%;
    height: auto;
    background: #EEE;
}

.box-1x1:before {
    content: "";
    display: block;
    padding-top: 30%;
}

.inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}


.twitterembed
{
	width:100%;
	height:500px;
	-webkit-overflow-scrolling: touch; /*-- これが重要っぽい --*/
  overflow-scrolling: touch; /*-- これも重要そう --*/
	overflow: scroll;
	margin-bottom:20px;
}

.pagelink p
{
	font-size:1rem;
	margin:0;
}

.pagelink
{
	margin-bottom:30px;
}

.logo
{
}

.navbar-brand
{
}

.pcxlimg
{
	display:none;
}

.pcimg
{
	display:none;
}

.spimg
{
	width:100%;
}

.newsarea
{
	background:#F9C7C8;
	padding:5px;
	font-size:0.8rem
}
.newsarea span
{
	background:#000000;
	color:#fff;
}

.newsarea2
{
	padding:5px;
	border:dashed 2px #FADBA7;
	font-size:0.8rem;
	margin-top:5px;
}

dl.train_car dt
{
	font-weight: bold;
	float: left;
	width:6rem;
}

dl.train_car dd
{
	margin-left:6rem;
}

/*　ContactForm7のテーブル化レスポンシブ調整　*/

/*テーブルを親要素の幅いっぱいに伸ばす*/
.table-res-form {
    width: 100%;
}
/*一行ごとに上ボーダー*/
.table-res-form tr {
    border-top: 1px #DDD solid;
}
/*一番上の行だけボーダーなし*/
.table-res-form tr:first-child {
    border-top: none;
}
/*奇数行だけ背景色つける*/
.table-res-form tr:nth-child(2n+1) {
    background: #fff;
}
/*thとtd内の余白指定*/
.table-res-form th, .table-res-form td {
    padding: 1.5em;
}
/*th（項目欄）は30%幅、テキストを右寄せ*/
.table-res-form th {
    width: 30%;
    text-align: right;
}
/*「必須」部分のスタイリング*/
.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
}

/*ここから768px以下の指定*/

@media only screen and (max-width: 768px) {
　　　　　/*thとtdをブロック化して幅100％にして、縦積み*/
    .table-res-form th, .table-res-form td {
        width: 100%;
        display: block;
    }
　　　　　/*th（項目名）欄の不要な余白削除・テキスト左寄せ*/
    .table-res-form th {
        padding-bottom: 0;
        text-align: left;
    }
　　　　　/*不要な最終行の左のthを非表示にする*/
    .table-res-form .empty {
        display: none;
    }
	
	.twitterembed
	{
		width:100%;
		height:340px;
	}
	
}

/*ここまで768px以下の指定---終わり*/

/*ここから入力欄のスタイル指定*/

/*各入力フォームスタイリング*/
input[type="text"], input[type="email"], textarea {
    border: 1px #89BDDE solid;
    padding: 0.5em;
    border-radius: 5px;
    margin-bottom: 0.5em;
    width: 100%;
}
/*入力欄にフォーカスしたら変化*/
input[type="text"]:focus,input[type="email"]:focus, textarea:focus {
    background: #EEFFFF;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
}
/*送信ボタンスタイリング*/
input[type="submit"] {
    border: 1px #89BDDE solid;
    padding: 0.5em 4em;
    border-radius: 5px;
    background: #4C9ED9;
    color: #fff;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
    font-weight: bold;
}
/*送信ボタン・マウスオーバー時スタイリング*/
input[type="submit"]:hover {
    background: #006599;
    box-shadow: none;
}






 
h2 {
	font-size:1.4rem;
	font-weight:bold;
	position: relative;
	padding: 0.6em;
}

h2.vocaltitle
{
	background:#FFBFA4;
}

h2.pianotitle
{
	background:#CCEEED;
}

h2.insttitle
{
	background:#FADBA7;
}

h2.schooltitle
{
	background:#BFFFDC;
}

h2.contacttitle
{
	background:#FF9;
}


h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
width: 0;
height: 0;
}

h2.vocaltitle:after
{
	border-top: 15px solid #FFBFA4;
}

h2.pianotitle:after
{
	border-top: 15px solid #CCEEED;
}

h2.insttitle:after
{
	border-top: 15px solid #FADBA7;
}

h2.schooltitle:after
{
	border-top: 15px solid #BFFFDC;
}

h2.contacttitle:after
{
	border-top: 15px solid #ff9;
}

h3
{
	font-size:1.2rem;
	font-weight:bold;
}

h3.vocalh3
{
	background: linear-gradient(transparent 70%, #FFBFA4 70%);
}

h3.pianoh3
{
	background: linear-gradient(transparent 70%, #CCEEED 70%);
}

h3.insth3
{
	background: linear-gradient(transparent 70%, #FADBA7 70%);
}

h3.schoolh3
{
	background: linear-gradient(transparent 70%, #BFFFDC 70%);
}

h3.contacth3
{
	background: linear-gradient(transparent 70%, #ff9 70%);
}

.adjust-box p {
    text-align:center;
}

.logo1 img
{
	width:200px;
}

.logo2 img
{
	width:300px;
}

/**クラス紹介**/

section
{
	padding:20px 0;
}

section#price
{
	background:#eee;
	text-align:center;
}

.price1
{
	font-size:1.5rem;
	font-weight:bold;
}

.price2
{
	font-size:1.5rem;
	font-weight:bold;
	color:#f00;
}


/**ナビゲーション**/
.navbar
{
	width:100%;
}

.navbar,.navbar-expand-lg,.navbar-light,.bg-light
{
	background-color:rgba(255,255,255,0.95)
}

.navbar-brand img
{
	height:30px;
}

.navbar-nav a
{
	margin-right:5px;
}

.navbar-nav a:hover
{
	border-bottom:3px solid #ccc;
}

.nav_top
{
	border-bottom:3px solid #C69;
}

.nav_vocalpiano
{
	border-bottom:3px solid #FFBFA4;
}

.nav_instructor
{
	border-bottom:3px solid #FADBA7;
}

.nav_access
{
	border-bottom:3px solid #BFFFDC;
}

.nav_contact
{
	border-bottom:3px solid #FF9;
}

.nav_twitter
{
	border-bottom:3px solid #1DA1F2;
}


.largefont
{
	font-size:1.4rem
}


.course_img
{
	position:relative;
}

.course_img h3
{
	text-align:center;
	font-size:0.9rem;
	font-weight:bold;
	color: #FFF;
    text-shadow: 2px 2px 1px #000,-2px 2px 1px #000,2px -2px 1px #000,-2px -2px 1px #000;
	position:absolute;
	top: 50%;
	left: 50%;
	width:80%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.gmap{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#photo p
{
	font-size:0.8rem;
}

.padding60
{
	padding-top:0;
}

@media (min-width: 768px)
{

.course_img h3
{
	font-size:1.2rem;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
	.pcxlimg
	{
		display:none
	}
	.pcimg
	{
		display:inherit
	}

	.spimg
	{
		display:none;
	}
}

@media (min-width: 1169px)
{
	.pcxlimg
	{
		display:inherit
	}
	.pcimg
	{
		display:none
	}

	.spimg
	{
		display:none;
	}
}

#contact_banner
{
	text-align:center;
	position:absolute;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	font-size:1.2rem;
	font-weight:bold;
	z-index:999999;
}

#contact_banner a
{
	transition:all 0.4s;
}

#contact_banner a:link,#contact_banner a:visited
{
	background:#36C;
	color:#fff;
	width:100%;
	display:block;
	padding:10px 0;
}

#contact_banner a:active,#contact_banner a:hover
{
	background:#09C;
	color:#fff;
	width:100%;
	display:block;
	padding:10px 0;
	text-decoration:none;
}


/**footer**/

footer
{
	background:#F60;
	color:#fff;
	padding:10px 0 60px;
}

footer ul
{
	font-size:0.6rem;
}

footer a
{
	color:#fff;
}

footer a:hover,footer a:active
{
	color:#CCC;
}