@charset 'UTF-8';

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

	トップページ

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



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

	レイアウト

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

/* 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;
	}

	/* 各セクションの余白 */
	.section {
		padding-top: 180px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.section.one {
		padding-top: 120px;
	}

	/* セクションタイトル */
	.section_title_text {
		font-size: 2.25em;
		display: inline-block;
		background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%); 
		background: -webkit-linear-gradient(270deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%);
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		margin: 0 auto;
		padding: 10px 50px;
		position: relative;
	}
	.section_title_text::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.section_title {
		position: relative;
		text-align: center;
	}
	.section_title::before {
		content: "";
		display: block;
		width: 100%;
		height: 0.5px;
		background-color: #E3CC63;
		position: absolute;
		top: 50%;
		left: 0;
		z-index: -1;
	}
	.section_title_text.en {
		font-family: 'EB Garamond', serif;
		letter-spacing: 0.2em;
		font-weight: 500;
	}
	.en {
		font-family: 'EB Garamond', serif;
		letter-spacing: 0.2em;
		font-weight: 500;
		line-height: 1;
	}

	/* 線なしセクションタイトル */
	.section_title2 {
		text-align: center;
	}
	.section_title_text2 {
		font-size: 2.25em;
		display: inline-block;
		background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%); 
		background: -webkit-linear-gradient(270deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%);
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		margin: 0 auto;
		padding: 10px 50px;
		position: relative;
	}

	/* ボタン */
	.more {
		margin-top: 25px;
		text-align: center;
	}
	.more_left {
		margin-top: 25px;
	}
	.more_btn {
		min-width: 260px;
		display: inline-block;
		position: relative;
	}
	.more_btn a{
		padding: 18px;
		display: inline-block;
		min-width: 260px;
		border: 0.5px solid #fff;
		color: #fff;
		text-align: center;
	}
	.more_btn a::before{
		content: '';
		/*絶対配置で下線の位置を決める*/
	  	position: absolute;
		bottom:50%;
		right: -40px;
		/*下線の形状*/    
		width: 90px;
		height: 0.5px;
	  	background:#fff;
		/*アニメーションの指定*/
		transition: all .3s;
	}
	
	.more_btn a::after{
		content: '';
		position: absolute;
		bottom: 50%;
		right: -40px;
		height: 8px;
		width: 17px;
		clip-path: polygon(0 0, 100% 100%, 0 100%);
		background: #fff;
		transition: all .3s;
	}
	
	
	/*hoverした際の移動*/
	.more_btn a:hover::before{
		right: -50px;
	}
	
	.more_btn a:hover::after{
		right: -50px;
	}

	/* 横並び */
	.mr_40 {
		margin-right: 40px;
	}
	.mr_60 {
		margin-right: 60px;
	}

	/* コンテンツの上余白 */
	.mt_50 {
		margin-top: 50px;
	}
	/* 上の余白 */
	.mt_30 {
		margin-top: 30px;
	}	
}



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

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

	.inner_wrap {
		position: relative;
	}

	/* 各セクションの余白 */
	.section {
		padding-top: 80px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.section.one {
		padding-top: 60px;
	}

	/* セクションタイトル */
	.section_title_text {
		font-size: 6.93vw;
		display: inline-block;
		background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%); 
		background: -webkit-linear-gradient(270deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%);
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		margin: 0 auto;
		padding: 10px;
		position: relative;
	}
	.section_title_text::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.section_title {
		position: relative;
		text-align: center;
	}
	.section_title::before {
		content: "";
		display: block;
		width: 100%;
		height: 0.5px;
		background-color: #E3CC63;
		position: absolute;
		top: 50%;
		left: 0;
		z-index: -1;
	}
	.section_title_text.en {
		font-family: 'EB Garamond', serif;
		letter-spacing: 0.2em;
		font-weight: 500;
	}
	.en {
		font-family: 'EB Garamond', serif;
		letter-spacing: 0.2em;
		font-weight: 500;
		line-height: 1;
	}

	/* 線なしセクションタイトル */
	.section_title2 {
		text-align: center;
	}
	.section_title_text2 {
		font-size: 6.93vw;
		display: inline-block;
		background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%); 
		background: -webkit-linear-gradient(270deg, #B67B03 0%, #DAAF08 45%, #FFF9E6 70%, #DAAF08 85%, #B67B03 90% 100%);
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		margin: 0 auto;
		padding: 10px;
		position: relative;
	}

	/* ボタン */
	.more {
		margin-top: 25px;
		text-align: center;
	}
	.more_left {
		margin-top: 25px;
		text-align: center;
	}
	.more_btn {
		min-width: 260px;
		display: inline-block;
		position: relative;
	}
	.more_btn a{
		padding: 18px;
		display: inline-block;
		min-width: 260px;
		border: 0.5px solid #fff;
		color: #fff;
		text-align: center;
	}
	.more_btn a::before{
		content: '';
		/*絶対配置で下線の位置を決める*/
	  	position: absolute;
		bottom:50%;
		right: -40px;
		/*下線の形状*/    
		width: 90px;
		height: 0.5px;
	  	background:#fff;
		/*アニメーションの指定*/
		transition: all .3s;
	}
	
	.more_btn a::after{
		content: '';
		position: absolute;
		bottom: 50%;
		right: -40px;
		height: 8px;
		width: 17px;
		clip-path: polygon(0 0, 100% 100%, 0 100%);
		background: #fff;
		transition: all .3s;
	}
	
	
	/*hoverした際の移動*/
	.more_btn a:hover::before{
		right: -50px;
	}
	
	.more_btn a:hover::after{
		right: -50px;
	}

	/* 横並び */
	.mr_40 {
		margin-bottom: 25px;
	}
	.mr_60 {
		margin-bottom: 25px;
	}

}





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

	メイン画像

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;
	}
	.main_top_in {
		position: relative;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
	}
	.main_top_in {
		position: relative;
	}
}





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

	ここからコンテンツ内容

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



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

	インフォメーション

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.top_flexbox ul{
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}
	.top_flexbox ul li{
		margin-right: 33px;
		max-width: 33%;
	}
	.top_flexbox ul li:last-child{
		margin-right: 0px;
	}

	.post_title {
		padding-top: 15px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_flexbox ul{
		display: flex;
		flex-direction: column;
	}
	.top_flexbox ul li{
		margin-bottom: 25px;
	}
	.top_flexbox ul li:last-child{
		margin-bottom: 0px;
	}
	.post_title {
		padding-top: 8px;
	}
}





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

	プロフィール

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.section_h3 {
		font-size: 2em;
		margin-bottom: 25px !important;
	}
	.section_h3 h3{
		font-weight: 500 !important;
		letter-spacing: 0.1em;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.section_h3 {
		font-size: 6vw;
		margin-bottom: 25px !important;
		text-align: center;
	}
	.section_h3 h3{
		font-weight: 500 !important;
		letter-spacing: 0.1em;
	}
}





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

	ディスコグラフィー

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.disc_subtitle p{
		margin-top: -25px;
    	font-size: 1.5em;
	}
	.disc_gold {
		background: linear-gradient(0deg, #D0A900, #FFF9E6);
		color: #5D4104;
		padding: 15px;
		min-width: 350px;
		max-width: 450px;
		text-align: center;
		font-size: 1.25em;
		font-weight: bold;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.disc_subtitle p{
		margin-top: -25px;
    	font-size: 4.8vw;
		text-align: center;
	}
	.disc_gold {
		background: linear-gradient(0deg, #D0A900, #FFF9E6);
		color: #5D4104;
		padding: 15px;
		max-width: 450px;
		text-align: center;
		font-size: 4vw;
		font-weight: bold;
	}
}





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

	レッスン

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.lesson_subtitle {
		font-size: 1.5em;
	}
	.bottom_title {
		margin-top: -20px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.lesson_subtitle {
		font-size: 4.8vw;
		text-align: center;
	}
	.bottom_title {
		margin-top: -20px;
	}
}





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

	動画

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.youtube {
		width: 100%;
		aspect-ratio: 16 / 9;
	  }
	.youtube iframe {
	width: 100%;
	height: 100%;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.youtube {
		width: 100%;
		aspect-ratio: 16 / 9;
	  }
	.youtube iframe {
	width: 100%;
	height: 100%;
	}
	.movie_content {
		margin-bottom: 25px;
	}

	.gaibu {
		margin-top: 40px;
	}
}





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

	コンタクト

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.contact_section {
		padding: 95px 20px;
		max-width: 800px;
		border: 0.5px solid #EBDB5C;
		margin: 0 auto;
		position: relative;
	}
	.contact_section::before {
		content: "";
		width: 230px;
		height: 240px;
		background: url(../img/contact-kazari1.png) center / 100% no-repeat;
		position: absolute;
		top: -50px;
		left: -30px;
	}
	.contact_section::after {
		content: "";
		width: 230px;
		height: 240px;
		background: url(../img/contact-kazari2.png) center / 100% no-repeat;
		position: absolute;
		bottom: -50px;
		right: -30px;
	}
		
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.contact_section {
		padding: 70px 20px;
		max-width: 800px;
		border: 0.5px solid #EBDB5C;
		margin: 0 auto;
		position: relative;
	}
	.contact_section::before {
		content: "";
		width: 160px;
		height: 140px;
		background: url(../img/contact-kazari1.png) center / 100% no-repeat;
		position: absolute;
		top: -30px;
		left: -30px;
	}
	.contact_section::after {
		content: "";
		width: 160px;
		height: 140px;
		background: url(../img/contact-kazari2.png) center / 100% no-repeat;
		position: absolute;
		bottom: -50px;
		right: -30px;
	}
}