@charset "UTF-8";

/* Table Of Contents
----------------------------------------

#01 layout
#02 link
#03 header
#04 footer
#05 content
#06 font

----------------------------------------*/

/* 01 layout  */
html { font-size: 10px; }
body {
	background-color: #FFF;
	font-family: sans-serif;
	color: #000000;
	line-height: 1;
	text-align: center;
}
* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
header,
footer { width: 100%; font-size: 1.4rem; }
main, aside { width: 100%; font-size: 1.6rem; }
.wrapper {
	width: 96%;
	margin: 0 2%;
	overflow: hidden;
}
@media (min-width: 951px) {
	header .wrapper,
	footer .wrapper { width: 950px; }
}
@media (max-width: 950px) {
	header .wrapper,
	footer .wrapper { width: 96%; margin: 0 2%; }
}
@media (min-width: 769px) {
	.sp { display: none; }
	.wrapper { width: 620px; margin: 0 auto;}
	aside .wrapper { width: 820px; }
}
@media (max-width: 768px) {
	.sp2 { display: none; }
	.sp { display: block; }
}
@media (min-width: 601px) {
	.sp2 { display: block; }
}
@media (max-width: 600px) {
	.sp2 { display: none; }
}



/* 02 link */
a { color:#333333; }
a:hover { color:#333333; text-decoration: none; }
.linkBtn { margin-bottom: 0; text-align: center; }
.linkBtn a {
  background-color: rgb(237, 83, 94);
	border-radius: 20px;
	color: #fff;
	display: inline-block;
	font-size: 1.6rem;
	width: 240px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
}
.linkBtn a:hover,
a:hover img { opacity: 0.8; }
@media (max-width: 768px) {
	.linkBtn a { margin-bottom: 1em; }
}



/* 03 header */ 
header { height: 80px; text-align: left; background-color: #fff; }
header .wrapper { padding-top: 2rem; }
.piano header .wrapper { padding-top: 3rem; }
header #logo { line-height: 1; }
header #logo a {
	text-decoration: none;
	font-size: 2.5rem;
	font-weight: bold;
	letter-spacing: -0.1em;
}
header #logo a img {
	vertical-align: middle;
	margin-right: 6px;
}
header #logo small {
	font-size: 1.5rem;
	margin-right: 0.25em;
	letter-spacing: 0;
}
header nav li { margin-left: 0.5em; }
header nav li a {
	display: block;
	padding: 0.5em 0;
	border-bottom: #fff solid 3px;
	text-decoration: none;
}

@media (min-width: 901px) {
	header nav li a:hover,
	#home header nav li:first-child a,
	#about header nav li:nth-child(2) a,
	#jiman header nav li:nth-child(3) a,
	#report header nav li:nth-child(4) a,
	#lesson header nav li:nth-child(5) a,
	#report.piano header nav li:first-child a {
		border-bottom: #000 solid 3px;
		text-decoration: none;
	}
}
@media (max-width: 900px) {
	header { height: 60px; }
	header .wrapper { padding-top: 12px; }
	.piano header .wrapper { padding-top: 18px; }
	header #logo small { font-size: 1.25rem; }
	header #logo a { font-size: 2rem; }
	header #logo a img { height: 36px; width: auto; }
	header nav li { margin-left: 0; }
	header nav li a { text-align: center; }
}
@media (max-width: 400px) {
	header #logo small { font-size: 1rem; }
	header #logo a { font-size: 1.75rem; }
}



/* 04 footer */ 
footer {
  background-color: #333333;
	color: #fff;
	line-height: 1.4;
	padding: 20px 0;
}
footer .wrapper { display: flex; justify-content: space-between; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: #fff; }
footer nav { text-align: left; width: 30em;}
footer nav li { display: inline-block; }
footer nav a { display: block; padding: 0.5em 2em 0.5em 0; }
footer nav p { margin: 20px 0 0; }
footer nav p a { padding: 0; }
footer dl { text-align: right; width: calc(100% 20em); }
.piano footer dl { display: block; text-align: center; }
footer dt {
	font-size: 2rem;
	margin-bottom: 0.5em;
	font-weight: bold;
}
footer dt a img {
	vertical-align: middle;
	margin-right: 6px;
}
footer dd {
	font-size: 1.2rem;
	margin-bottom: 1em;
}
footer .copy {
	font-size: 1.2rem; 
	height: 35px;
	line-height: 35px;
}
.pageTop {
	position: fixed;
	bottom: 40px;
	right: 10px;
	z-index: 105;
	width: 30px;
	height: 30px;
}
@media (max-width: 680px) {
	footer .wrapper { display: block; }
	footer nav {
		text-align: center;
		width: 100%;
		margin-bottom: 3em;
	}
	footer dl { text-align: center; }
	footer dt a img { height: 30px; }
	footer .copy { font-size: 1rem; }
}
@media (max-width: 380px) {
	footer dt a img { display: block; margin: auto; }
}



/* 05 content */
main { padding-bottom: 100px; }
main h1 {
	background: url("../images/bg_h1_2.jpg") no-repeat center top;
	background-size: cover;
	color: #fff;
	font-size: 3.0rem;
	line-height: 120px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	height: 130px;
	width: 100%;
	font-family: serif;
	margin-bottom: 80px;
	border-top: 1px solid #333333;
	border-bottom: 10px solid #333333;
	position: relative;
}
main h1 span {
	display: block;
	z-index: 1;
}
main section { margin-top: 80px; }
main h2,
aside h2 {
	color: #2a305a;
	font-size: 2.4rem;
	line-height: 1.4;
	margin-bottom: 0.5em;
}
article h2.title {
	text-align: left;
}
main p,
aside p{
	font-size: 1.6rem;
	line-height: 2.6rem;
	margin-bottom: 1em;
}
aside { padding-bottom: 100px; }
.lineBox {
  border: #2a305a 4px solid;
	font-size: 1.4rem;
	width: 100%;
	padding: 0 10px 10px;
	display: inline-block;
	margin: auto;
}
aside#piano .lineBox { padding: 20px; }
aside#piano .lineBox h2,
aside#piano .lineBox p.txt { text-align: left; }
aside#piano .lineBox p.txt { font-size: 1.4rem; }
aside#piano .lineBox .linkBtn a { width: 280px; }

aside#piano .bnr img { width: 100%; max-width: 395px; margin-bottom: 20px; }
@media (min-width: 680px) {
	aside#piano .bnr img { max-width: 820px; }
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto;
	line-height: 1.6;
	border-top: #2a305a 3px solid;
}
table th,
table td {
	padding: 1em 0;
	text-align: left;
	vertical-align: top;
	border-bottom: #2a305a 1px solid;
}
table th { white-space: nowrap; }
@media (max-width: 768px) {
	main h1 { margin-bottom: 40px; }
	table th,
	table td {
		display: block;
		width: 100%;
		padding: 1em 0.25em;
	}
}
img.line { border: #cccccc solid 1px; }


/* #home */
#home #mainimg {
	margin-bottom: 22px;
	border-bottom: 10px solid #333333;
	background: url("../images/img_top.jpg") no-repeat center center;
	background-size: cover;
}
#home #mainimg #bgimg {
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#home #mainimg h1 { margin: 0 auto; letter-spacing: -0.05em; }
#home main h1 {
	background: none;
	height: auto;
	border: none;
}
#home #mainimg p {
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: 2em;
}
#home main #news ul {
	width: 100%;
	text-align: left;
	overflow: hidden;
	list-style: none;
	margin: 60px 0 20px;
}
#home main #news li time {
	display: block;
	line-height: 1.4;
	float: none;
	width: 100%;
}
#home main #news li p {
	float: none;
	width: 100%;
	line-height: 1.4;
	margin-bottom: 1em;
}
#home main #news .link { text-align: right; }
#home main #news .link::after { content: '>'; margin-left: 0.5em; }
@media (min-width: 769px) {
	#home main .wrapper { width: 820px; }
	#home main #news li time { float: left; width: 10em; }
	#home main #news li p { float: left; width: calc( 100% - 10em); }
}

#home main #instagram a.snapwidget {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
#home main #instagram iframe {
	margin: 1em auto 30px;
}
#home main #instagram a.snapwidget::after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}


/* #about */
#about main h1 { letter-spacing: -0.1em; }
@media (min-width: 769px) {
	#about table th { width: 10em; }
}
@media (max-width: 768px) {
	#about table th { border-bottom: #9497ac 1px dashed; }
}
@media (max-width: 620px) {
	#about main .lead { text-align: left; }
}




/* #lesson */
#lesson main h1 {
	background: url("../../lesson/images/bg_lesson.jpg") no-repeat center top;
	background-size: cover;
	border-top: 1px solid #e1959d;
	border-bottom: 10px solid #e1959d;
}
#lesson main strong { color: #ab3a63; }
#lesson main table { margin-bottom: 20px; }
#lesson main table td .price { float: right; }
#lesson main dl {
	width: 100%;
	line-height: 1.4;
	text-align: left;
	margin-top: 2em;
}
#lesson main dt { font-size: 2rem; clear: both; }
#lesson main dt small { font-size: 60%; }
#lesson main dd {
	margin: 1em 0 2em;
	padding-bottom: 1em;
	border-bottom: 4px dotted #e1959d;
}
/*#lesson main dt img {
	float: left;
	margin: -1em 2em 2em 0;
	max-width: 160px;
	height:auto;
}*/
@media (max-width: 768px) {
	#lesson main h1 { font-size: 2.5rem;}
}
@media (max-width: 620px) {
	#lesson main .lead { text-align: left; }
	#lesson main dt { font-size: 1.8rem; }
	#lesson main dd { margin: 0.5em　0 2em; }
/*	#lesson main dt img { margin: 0 0.5em 1.5em 0; width: 30%;  }*/
}

	



/* #report */
#report.index .wrapper ul.list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
}
#report.index .wrapper .list li { width: 252px; margin: 0 10px 2em; }
#report.index .wrapper .list li img {
	width: 100%;
	height: auto;
	border: #cccccc solid 1px;
	margin-bottom: 0.5em;
}
#report.index .wrapper .list li h2 { font-size: 1.6rem; margin-bottom: 0; text-align: left; }
#report.index .wrapper .list li p { margin-bottom: 0; }
#report.index .wrapper h2.title { text-align: center; margin-bottom: 2em; }
@media (min-width: 769px) {
	#report.index main .wrapper { width: 820px; }
}
@media (max-width: 540px) {
	#report.index .wrapper .list li { width: 48%; margin-right: 1%; margin-left: 1%; }
}

#report .meta { color: #666666; font-size: 1.2rem; text-align: right; }
#report.index .meta { text-align: left; }
#report p.date { text-align: right; }
#report .date { font-size: 1.2rem; margin-left: 1em; }
#report .meta span {
  background-color: rgb(237, 83, 94);
	border-radius: 12px;
	color: #fff;
	display: inline-block;
	width: auto;
	line-height: 1;
	padding: 0.5em 1em;
	text-decoration: none;
	margin-right: 0.5em;
}
#report .meta .piano { background-color: rgb(237, 83, 94); }
#report article figure { text-align: center; margin-bottom: 3em; }
#report article figure figcaption { margin-bottom: 0.5em; }
#report article figure img { margin: auto; max-width: 600px; height: auto; }
#report article p { margin-bottom: 2em; }
#report article div p { text-align: left; }
@media (max-width: 768px) {
	#report article figure img { width: 100%; }
	#report article p:not(.sns) img { width: 100%; height: auto; }
}

#report .wrapper .pager { text-align: center; margin: 4em auto; }
#report .wrapper .pager span { display: inline-block; width: auto; }
#report .wrapper .pager a {
  background-color: rgb(237, 83, 94);
	border: #ed535e solid 1px;
	border-radius: 3px;
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 1;
	padding: 0.5em;
	text-decoration: none;
}
#report .wrapper .pager a.current_page_number,
#report .wrapper .pager a:hover {
  background-color: #fff;
	border: #ed535e solid 1px;
	color: #000000;
}

#report.index main .wrapper nav {
	display: flex;
	justify-content: center;
	overflow: hidden;
	margin: auto;
	text-align: center;
}
#report.index main .wrapper nav div {
	width: 15em;
	margin: 0 0.5em;
	padding: 0;
}
#report.index main .wrapper nav a {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: #000000;
	line-height: 1;
}
#report.index main .wrapper nav label {
	display: block;
	position: relative;
	margin: 0;
	padding: 12px;
	line-height: 1;
	border-right: 1px solid #bbbbbb;
	border-left: 1px solid #bbbbbb;
	border-top: 1px solid #bbbbbb;
	cursor: pointer;
	text-align: left;
}
#report.index main .wrapper nav label::before {
	position: absolute;
	top: 1em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
#report.index main .wrapper nav input { display: none; }
#report.index main .wrapper nav ul {
	margin: 0;
	padding: 0;
	border: 1px solid #bbbbbb;
	list-style: none;
	text-align: left;
}
#report.index main .wrapper nav li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
}
#navYear:checked ~ #linkYear li,
#navCate:checked ~ #linkCate li { max-height: 46px; opacity: 1;
}


/* #contact */
#contact.piano main h1 {
	background: url("../images/bg_h1_piano.jpg") no-repeat center top;
	background-size: cover;
}
#contact table,
#contact table th,
#contact table td { border: none; }
#contact .lineBox { max-width: 420px; }
#contact .lineBox span {
	display: block;
	color: #2a305a;
	font-size: 3.0rem;
	font-weight: bold;
	margin-bottom: 0.5em;
}
#contact .lineBox span::before {
	content: url("../images/icn_fax.svg");
	position: relative;
	top: 10px;
	margin: 10px;
}
#contact .lineBox { display: block; color: #666666; }
#contact form { margin-top: 80px; }
#contact form th { padding-right: 1em; padding-top: 1.5em; }
#contact form td label, #contact form dd label { cursor: pointer; }
@media (max-width: 768px) {
	#contact form th { padding-bottom: 0; }
	#contact form td { border-bottom: 1px dotted #ccc; }
}
.radio-input { display: none; }
.radio-input + label{
  padding-left: 25px;
  position:relative;
  margin-right: 5px;
}
.radio-input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio-input:checked + label { color: #d01137; }
.radio-input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #d01137;
  border-radius: 50%;
}
.checkbox .checkbox-input,
.soy_iqnuiry_responsive .checkbox-input { display: none; }
.soy_iqnuiry_responsive dt:last-of-type { visibility: hidden; }
.checkbox span,
.soy_iqnuiry_responsive dd:last-of-type span { padding-left: 30px; position:relative; }
.checkbox a { margin-right: 5px; }
.checkbox span::before,
.soy_iqnuiry_responsive dd:last-of-type span::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: solid 1px #a0a0a0;
  border-radius: 4px;
}
.checkbox .checkbox-input:checked + span::after,
.soy_iqnuiry_responsive dd:last-of-type .checkbox-input:checked ~ span::after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 14px;
  height: 21px;
  transform: rotate(40deg);
  border-bottom: 4px solid #d01137;
  border-right: 4px solid #d01137;
}

#contact form input[type="text"],
#contact form input[type="email"]{
	font-size: 1.8rem;
	line-height: 1.5;
	width: 100%;
	padding: 0.5em;
	border-radius: 4px;
	border: solid 1px #a0a0a0;
}
#contact form .radio input[type="text"] {
	width: 17em;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}
#contact form textarea {
	font-size: 1.8rem;
	line-height: 1.5;
	width: 100%;
	height: 10em;
	padding: 0.5em;
	border-radius: 4px;
	border: solid 1px #a0a0a0;
}
input[type="button"], form input[type="reset"], form input[type="submit"] {
  background-color: rgb(237, 83, 94);
	border-radius: 20px;
	color: #fff;
	font-size: 1.6rem;
	width: 14em;
	height: 40px;
	line-height: 40px;
	margin: 40px 10px 0;
}
#contact .msg { margin: 60px auto; }
#contact table#form { border-top: solid 1px #a0a0a0; margin-top: 4em; }
#contact #form th, #contact #form td { border-bottom: solid 1px #a0a0a0; }


#contact form dl {
	display:flex;
  flex-wrap: wrap;
 }
#contact form dt {
  width: 30%;
  padding: 1.5em 1em 1em 0;
  box-sizing: border-box;
	text-align: left;
	font-weight: bold;
}
#contact form dd {
  width: 60%;
  padding: 1em 0;
  box-sizing: border-box;
	text-align: left;
	line-height: 1.5;
}
.error_message {
	color: red;
	display:flex;
  flex-wrap: wrap;
 }
@media (max-width: 768px) {
  dl{ flex-flow: column nowrap; }
  dt, dd { width: 100%; }
}
.grecaptcha-badge { visibility: hidden; }

#privacy main h2 { margin-top: 40px; }
#privacy main p { font-size: 1.4rem; text-align: left; }
#privacy main li { font-size: 1.4rem; text-align: left; margin-left: 2em; line-height: 2.6rem; }
#privacy main .lead, #privacy main .linkBtn { text-align: center; }
#privacy .contact { margin: 40px 0; }