@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */
.grecaptcha-badge { visibility: hidden; }
/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}





/* ================================================================================

	メイン画像

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		height: 39.895vw;
	}
	
	.main_copy {
		position: absolute;
		right: 0;
		z-index: 1;
		margin-top: 3.7vw;
		width: 43.958vw;
	}
	.main_copy img {
		width: 100%;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
	}
	.main_copy {
		position: absolute;
		z-index: 1;
		width: 55vw;
		right: 6vw;
		top: 50vw;
	}
	.main_copy img {
		width: 100%;
	}
	
	
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	お知らせ・ブログ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row01 {
		padding: 56px 0 120px;
		background: url(../img/row01_bg.jpg) center top / cover no-repeat;
	}
	
	.row01_title {
		width: 236px !important;
		margin: 0 auto;
	}
	.row01_title h2 img {
		width: 100%;
	}
	
	.row01_content {
		margin-top: 35px;
	}
	
	.post_wrap ul {
		font-size: 0;
		text-align: center;
	}
	.post_wrap ul li {
		width: 220px;
		display: inline-block;
		margin-right: 40px;
		font-size: 16px;
		font-weight: 900;
		color: #323232;
	}
	.post_wrap ul li:last-of-type {
		margin-right: 0;
	}
	.post_wrap ul li .post_thumb img {
		border-radius: 20px;
		height: 240px;
		object-fit: cover;
		border: solid 5px #ed80af;
	}
	
	.post_wrap ul li .post_date {
		margin-top: 16px;
		text-align: left;
	}
	.post_wrap ul li .post_title {
		text-align: left;
	}
	.post_wrap ul li .post_title a {
		color: #323232;
		font-weight: 900;
	}
	
	.link_btn {
		text-align: center;
	}
	.link_btn a {
		width: 300px;
		background-color: #f5c727;
		text-align: center;
		border-radius: 20px;
		display: inline-block;
		color: #ffffff;
		font-weight: 700;
		font-size: 20px;
		padding: 18px 0;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row01 {
		padding: 12vw 0 20vw;
		background: url(../img/row01_bg_sp.jpg) center bottom / contain no-repeat;
		background-color: #fff;
	}
	
	.row01_title {
		width: 40vw !important;
		margin: 0 auto;
	}
	.row01_title h2 img {
		width: 100%;
	}
	
	.row01_content {
		margin-top: 6vw;
	}
	
	.post_wrap ul {
		font-size: 0;
		text-align: center;
	}
	.post_wrap ul li {
		width: 40vw;
		display: inline-block;
		font-size: 3.5vw;
		font-weight: 900;
		color: #323232;
	}
	.post_wrap ul li:nth-child(odd) {
		margin-right: 6vw;
	}
	.post_wrap ul li:nth-child(3),
	.post_wrap ul li:nth-child(4) {
		margin-top: 4vw;
	}
	.post_wrap ul li:last-of-type {
		margin-right: 0;
	}
	.post_wrap ul li .post_thumb img {
		border-radius: 4vw;
		height: 40vw;
		object-fit: cover;
		border: solid 1vw #ed80af;
	}
	
	.post_wrap ul li .post_date {
		margin-top: 2vw;
		text-align: left;
	}
	.post_wrap ul li .post_title {
		text-align: left;
	}
	.post_wrap ul li .post_title a {
		color: #323232;
		font-weight: 900;
	}
	
	.link_btn {
		text-align: center;
		z-index: 1;
	}
	.link_btn a {
		width: 60vw;
		background-color: #f5c727;
		text-align: center;
		border-radius: 4vw;
		display: inline-block;
		color: #ffffff;
		font-weight: 700;
		font-size: 4vw;
		padding: 4vw 0;
	}
	
	
}





/* ================================================================================

	新型コロナウイルス対策について

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.covid_row {
		text-align: center;
		padding: 120px 0;
	}
	
	.covid_content {
		border: 10px solid #f5c727;
		border-radius: 20px;
		background-color: #ffffff;
		padding: 42px 0;
	}
	
	.covid_title h2 {
		color: #ed80af;
		font-weight: 900;
		font-size: 30px;
		line-height: 1.4;
	}
	
	.covid_text {
		font-weight: 700;
		margin-top: 19px;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.covid_row {
		text-align: center;
		padding: 14vw 6vw;
	}
	
	.covid_content {
		border: 2vw solid #f5c727;
		border-radius: 4vw;
		background-color: #ffffff;
		padding: 8vw 5vw;
	}
	
	.covid_title h2 {
		color: #ed80af;
		font-weight: 900;
		font-size: 4.5vw;
		line-height: 1.4;
	}
	
	.covid_text {
		font-weight: 700;
		margin-top: 4vw;
	}
}





/* ================================================================================

	音楽って実はもっと「自由」

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row02 {
		padding: 60px 0 160px;
		background: url(../img/bg01.jpg) center top / auto repeat;
	}
	
	.row02_content {
		margin-top: 35px;
	}
	
	.row02_title {
		width: 380px !important;
		margin: 0 auto;
	}
	.row02_title h2 img {
		width: 100%;
	}
	
	.row02_text {
		font-weight: 700;
	}
	
	.row02 .link_btn {
		text-align: left;
	}
	
	.row02_img img {
		border-radius: 20px;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row02 {
		padding: 12vw 0 20vw;
		background: url(../img/bg01.jpg) center top / 65% repeat;
	}
	
	.row02_content {
		margin-top: 35px;
	}
	
	.row02_title {
		width: 63vw !important;
		margin: 0 auto;
	}
	.row02_title h2 img {
		width: 100%;
	}
	
	.row02_text {
		font-weight: 700;
		margin: 6vw 6vw 0;
	}
	
	.row02 .link_btn {
		text-align: center;
	}
	
	.row02_img {
		margin: 0 6vw;
	}
	.row02_img img {
		border-radius: 4vw;
		object-fit: cover;
		height: 70vw;
		object-position: 0 -5vw;
	}
	
	
}





/* ================================================================================

	さおりピアノ教室3つのポイント

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row03 {
		padding: 60px 0 120px;
	}
	
	.row03_title {
		width: 398px !important;
		margin: 0 auto;
	}
	.row03_title h2 img {
		width: 100%;
	}
	
	.row03_box {
		background-color: #ffffff;
		border-radius: 20px;
		padding: 40px;
	}
	
	.box01:before {
		content: '';
		position: absolute;
		background: url(../img/note01.png) center top / contain no-repeat;
		width: 132px;
		height: 90px;
		right: 43px;
		top: 51px;
	}
	.box02:before {
		content: '';
		position: absolute;
		background: url(../img/note02.png) center top / contain no-repeat;
		width: 74px;
		height: 74px;
		left: 50%;
		top: 53px;
		margin-left: -80px;
	}
	.box03:before {
		content: '';
		position: absolute;
		background: url(../img/note03.png) center top / contain no-repeat;
		width: 72px;
		height: 63px;
		left: 50%;
		top: 29px;
		margin-left: -70px;
	}
	.box03:after {
		content: '';
		position: absolute;
		background: url(../img/note04.png) center top / contain no-repeat;
		width: 81px;
		height: 73px;
		right: 50px;
		bottom: 35px;
	}
	
	.row03_img img {
		border-radius: 230px;
		z-index: 10;
		position: relative;
	}
	.row03_img:before {
		content: '';
		background-color: #ed80af;
		border-radius: 230px;
		width: 455px;
		height: 455px;
		top: 10px;
		left: 10px;
		position: absolute;
		display: block;
	}
	
	.row03_h3 {
		margin-top: 20px;
	}
	.row03_h3 h3 {
		color: #ed80af;
		font-size: 30px;
		font-weight: 900;
		line-height: 1.35;
	}
	
	.row03_text {
		margin-top: 20px;
	}
	
	.point01 img {
		width: 111px;
	}
	.point02 img {
		width: 116px;
	}
	.point03 img {
		width: 116px;
	}
	
	.point03_text {
		text-indent: -1em;
		padding-left: 1em;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row03 {
		padding: 12vw 0 20vw;
	}
	
	.row03_title {
		width: 68vw !important;
		margin: 0 auto;
	}
	.row03_title h2 img {
		width: 100%;
	}
	
	.row03_box {
		background-color: #ffffff;
		border-radius: 4vw;
		padding: 10vw 6vw;
		margin: 0 6vw;
	}
	
	.box01:before {
		content: '';
		position: absolute;
		background: url(../img/note01.png) center top / contain no-repeat;
		width: 18vw;
		height: 12vw;
		right: 6vw;
		top: 88vw;
		z-index: 11;
	}
	.box02:before {
		content: '';
		position: absolute;
		background: url(../img/note02.png) center top / contain no-repeat;
		width: 12vw;
		height: 12vw;
		top: 84vw;
		right: 7vw;
	}
	.box03:before {
		content: '';
		position: absolute;
		background: url(../img/note03.png) center top / contain no-repeat;
		width: 14vw;
		height: 13vw;
		top: 81vw;
		right: 5vw;
	}
	.box03:after {
		content: '';
		position: absolute;
		background: url(../img/note04.png) center top / contain no-repeat;
		width: 13vw;
		height: 13vw;
		right: 6vw;
		bottom: 7vw;
	}
	
	.row03_img img {
		border-radius: 38vw;
		z-index: 10;
		position: relative;
	}
	.row03_img:before {
		content: '';
		background-color: #ed80af;
		border-radius: 38vw;
		width: 76vw;
		height: 76vw;
		top: 2vw;
		left: 2vw;
		position: absolute;
		display: block;
	}
	
	.row03_h3 {
		margin-top: 2vw;
	}
	.row03_h3 h3 {
		color: #ed80af;
		font-size: 5vw;
		font-weight: 900;
		line-height: 1.35;
	}
	
	.row03_text {
		margin-top: 4vw;
	}
	
	.point01,
	.point02,
	.point03 {
		margin-top: 4vw;
	}
	.point01 img,
	.point02 img,
	.point03 img {
		width: 20vw;
	}
	
	.point03_text {
		text-indent: -1em;
		padding-left: 1em;
	}
	
	
}





/* ================================================================================

	レッスンコース

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row04 {
		background: url(../img/row04_bg.jpg) center top / cover no-repeat;
		padding: 68px 0 160px;
	}
	
	.row04_title {
		width: 214px !important;
		margin: 0 auto;
	}
	.row04_title h2 img {
		width: 100%;
	}
	
	.row04_box {
		background-color: #ffffff;
		border-radius: 20px;
		text-align: center;
	}
	
	.row04_img img {
		border-radius: 20px 0 0 20px;
	}
	
	.row04_h3 h3 {
		font-weight: 900;
		font-size: 31.59px;
		color: #ed80af;
	}
	.row04_h3 h3:first-letter {
		color: #f5c727;
	}
	
	.row04_price {
		color: #ed80af;
		font-size: 36.87px;
		font-weight: 900;
	}
	.row04_price span {
		font-size: 31.59px;
	}
	
	.row04_text {
		font-size: 18px;
		font-weight: 500;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row04 {
		background: url(../img/row04_bg_sp.jpg) center top / cover no-repeat;
		padding: 12vw 0 20vw;
	}
	
	.row04_title {
		width: 37vw !important;
		margin: 0 auto;
	}
	.row04_title h2 img {
		width: 100%;
	}
	
	.row04_box {
		background-color: #ffffff;
		border-radius: 4vw;
		text-align: center;
		margin: 0 6vw;
	}
	
	.row04_img img {
		border-radius: 4vw 4vw 0 0;
	}
	
	.row04_content {
		padding: 6vw;
	}
	
	.row04_h3 h3 {
		font-weight: 900;
		font-size: 6vw;
		color: #ed80af;
	}
	.row04_h3 h3:first-letter {
		color: #f5c727;
	}
	
	.row04_price {
		color: #ed80af;
		font-size: 7vw;
		font-weight: 900;
	}
	.row04_price span {
		font-size: 6vw;
	}
	
	.row04_text {
		font-size: 4vw;
		font-weight: 500;
	}
	
	
}





/* ================================================================================

	生徒さんからの声

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row05 {
		padding: 60px 0 160px;
		background: url(../img/bg01.jpg) center top / auto repeat;
	}
	
	.row05_title {
		width: 249px !important;
		margin: 0 auto;
	}
	.row05_title h2 img {
		width: 100%;
	}
	
	.voice_wrap ul {
		text-align: center;
		font-size: 0;
	}
	.voice_wrap ul li {
		display: inline-block;
		width: 300px;
		margin-right: 33px;
	}
	.voice_wrap ul li:last-of-type {
		margin: 0;
	}
	
	.voice_wrap ul li .voice_thumb img {
		height: 230px;
		object-fit: cover;
		border-radius: 20px;
	}
	
	
	.voice_wrap ul li .voice_title {
		margin-top: 15px;
	}
	.voice_wrap ul li .voice_title a {
		font-size: 25px;
		font-weight: 900;
		color: #ed80af;
		position: relative;
		margin-left: 25px;
	}
	.voice_wrap ul li .voice_title a:before {
		content: '';
		background: url(../img/voice_note.png) center top / contain no-repeat;
		width: 14px;
		height: 28px;
		top: 5px;
		left: -25px;
		position: absolute;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row05 {
		padding: 12vw 0 20vw;
		background: url(../img/bg01.jpg) center top / auto repeat;
	}
	
	.row05_title {
		width: 44vw !important;
		margin: 0 auto;
	}
	.row05_title h2 img {
		width: 100%;
	}
	
	.voice_wrap {
		margin: 0 12vw;
	}
	
	.voice_wrap ul {
		text-align: center;
		font-size: 0;
	}
	.voice_wrap ul li:last-of-type {
		margin: 0;
	}
	
	.voice_wrap ul li:nth-of-type(2) {
		margin: 6vw 0;
	}
	
	.voice_wrap ul li .voice_thumb img {
		height: 50vw;
		object-fit: cover;
		border-radius: 4vw;
	}
	
	
	.voice_wrap ul li .voice_title {
		margin-top: 4vw;
	}
	.voice_wrap ul li .voice_title a {
		font-size: 4vw;
		font-weight: 900;
		color: #ed80af;
		position: relative;
		margin-left: 5vw;
	}
	.voice_wrap ul li .voice_title a:before {
		content: '';
		background: url(../img/voice_note.png) center top / contain no-repeat;
		width: 3vw;
		height: 6vw;
		top: 0.2vw;
		left: -5vw;
		position: absolute;
	}
	
	
}





/* ================================================================================

	お問い合わせ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row06 {
		padding: 120px 0;
	}
	
	.row06_box {
		border: 10px solid #ed80af;
		border-radius: 20px;
		background-color: #ffffff;
		text-align: center;
		color: #ed80af;
		padding: 82px 0;
	}
	
	.row06_title h2 {
		font-size: 30px;
		font-weight: 500;
	}
	.row06_title h2 span {
		font-size: 50px;
		font-weight: 900;
		display: block;
		margin-top: 18px;
	}
	
	.row06_tel {
		margin-top: 3px;
	}
	.row06_tel a {
		font-size: 72.93px;
		font-weight: 900;
		position: relative;
		color: #ed80af;
		pointer-events: none;
	}
	.row06_tel a:before {
		content: 'tel:';
		position: absolute;
		font-size: 40px;
		font-weight: 900;
		top: 33px;
		left: -67px;
		color: #ed80af;
	}
	
	.row06_time {
		font-size: 30px;
		font-weight: 500;
		margin-top: -20px;
	}
	.row06_attention {
		font-size: 20px;
		font-weight: 500;
	}
	
	.row06_btn {
		text-align: center;
		margin-top: 32px;
	}
	.row06_btn ul {
		font-size: 0;
		text-align: center;
	}
	.row06_btn ul li {
		display: inline-block;
	}
	.row06_btn ul li:first-of-type {
		margin-right: 40px;
	}
	.row06_btn a {
		width: 300px;
		background-color: #f5c727;
		text-align: center;
		border-radius: 20px;
		display: inline-block;
		color: #ffffff;
		font-weight: 900;
		font-size: 25px;
		padding: 29px 0;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row06 {
		padding: 14vw 6vw;
	}
	
	.row06_box {
		border: 2vw solid #ed80af;
		border-radius: 4vw;
		background-color: #ffffff;
		text-align: center;
		color: #ed80af;
		padding: 8vw 6vw;
	}
	
	.row06_title h2 {
		font-size: 5vw;
		font-weight: 500;
	}
	.row06_title h2 span {
		font-size: 8vw;
		font-weight: 900;
		display: block;
		margin-top: 3vw;
	}
	
	.row06_tel {
		
	}
	.row06_tel a {
		font-size: 9vw;
		font-weight: 900;
		position: relative;
		color: #ed80af;
		margin-left: 8vw;
	}
	.row06_tel a:before {
		content: 'tel:';
		position: absolute;
		font-size: 5vw;
		font-weight: 900;
		top: 3.8vw;
		left: -8.5vw;
		color: #ed80af;
	}
	
	.row06_time {
		font-size: 4vw;
		font-weight: 500;
		margin-top: -2vw;
	}
	.row06_attention {
		font-size: 3.5vw;
		font-weight: 500;
	}
	
	.row06_btn {
		text-align: center;
		margin-top: 6vw;
	}
	.row06_btn ul {
		font-size: 0;
		text-align: center;
	}
	.row06_btn ul li {
		display: inline-block;
	}
	.row06_btn ul li:first-of-type {
		margin-bottom: 4vw;
	}
	.row06_btn a {
		width: 72vw;
		background-color: #f5c727;
		text-align: center;
		border-radius: 4vw;
		display: inline-block;
		color: #ffffff;
		font-weight: 900;
		font-size: 4vw;
		padding: 4vw 0;
	}
	
	
}





/* ================================================================================

	インスタグラム

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row07 {
		background-color: #ffffff;
		padding: 69px 0 160px;
	}
	
	.row07:before {
		content: '';
		position: absolute;
		background: url(../img/row07_note01.png) center top / contain no-repeat;
		width: 276px;
		height: 229px;
		top: 81px;
		left: 50%;
		margin-left: 364px;
	}
	.row07:after {
		content: '';
		position: absolute;
		background: url(../img/row07_note02.png) center top / contain no-repeat;
		width: 391px;
		height: 164px;
		bottom: 68px;
		left: 50%;
		margin-left: -643px;
	}
	
	.row07_title {
		width: 214px !important;
		margin: 0 auto;
	}
	.row07_title h2 img {
		width: 100%;
	}
	
	.row07_img img {
		width: 310px;
		height: 310px;
		object-fit: cover;
		border-radius: 20px;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row07 {
		background-color: #ffffff;
		padding: 12vw 0 20vw;
	}
	
	.row07:before {
		content: '';
		position: absolute;
		background: url(../img/row07_note01.png) center top / contain no-repeat;
		width: 22vw;
		height: 23vw;
		top: 31vw;
		right: 4vw;
	}
	.row07:after {
		content: '';
		position: absolute;
		background: url(../img/row07_note02.png) center top / contain no-repeat;
		width: 39vw;
		height: 17vw;
		bottom: 3vw;
		left: 2vw;
		z-index: 0;
	}
	
	.row07_title {
		width: 38vw !important;
		margin: 0 auto;
	}
	.row07_title h2 img {
		width: 100%;
	}
	
	.row07_img img {
		width: 70vw;
		height: 70vw;
		object-fit: cover;
		border-radius: 4vw;
	}
	
	
}





/* ================================================================================

	〇〇

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
}