/*
Theme Name: フェアリーズ・スペース・バレエ様
Author: 株式会社宝塚デザイン
Description: オリジナルテーマ
Version: 1.0.0
*/
@charset "UTF-8";
@import url("./css/reset.css");
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Serif+JP:wght@200..900&family=Tangerine:wght@400;700&display=swap');

/*
Noto Serif JP
reg 32

Rounded Mplus 1c
Reg 16

Tangerine
Bold 28

*/


/*
font-family: "Noto Serif JP", serif;
font-family: "M PLUS Rounded 1c", sans-serif;
font-family: "Tangerine", cursive;
font-weight: 400;
font-weight: 700;

*/


/********** カスタムプロパティ（変数） **********/
:root {
	--text-color: #464040;

	--keycolor: #fff;
	--keycolor-text: #fff;

	--keycolor-dark: #aaa;
	--keycolor-dark-text: #fff;

	--keycolor-light: #efefef;
	--keycolor-light-text: #111;

	--sidebar-width: 260px;
	/* サイドバーのwidthを固定幅とする */
}


/********** 共通タグ設定 **********/
html {
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	color: var(--text-color);
	word-break: break-all;
}

body.no-scroll {
	overflow: hidden;
}

body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
}

a {
	text-decoration: none;
	color: var(--text-color);
	transition: all 0.2s;
}

a:hover {
	opacity: 0.6;
	transition: all 0.2s;
}

img {
	vertical-align: bottom;
	max-width 100%;
	width: 100%;
}

p {
	letter-spacing: .04em;
	line-height: 200%;
}

@media screen and (max-width: 768px) {
	p {
		font-size: 14px;
	}
}


/* 改行 */

.sp390_show {
	display: none;
}

.pc768_show {
	display: none;
}

.sp768_show {
	display: none;
}

.sp500_show {
	display: none;

}




@media screen and (max-width: 500px) {
	.sp500_show {
		display: block;
	}
}

@media screen and (max-width: 391px) {
	.sp390_show {
		display: block;
	}
}

@media screen and (max-width: 768px) {
	.pc768_show {
		display: block;
	}

	.sp768_show {
		display: block;
	}
}

/********** 共通クラス **********/
.inner {
	position: relative;
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
}

.flex {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 1180px) {
	/* .inner {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	} */
}

@media screen and (max-width: 768px) {
	.inner {}


	.flex {
		flex-direction: column;
	}
}



#menu {
	position: fixed;
	top: 20px;
	right: 20px;
}







/********** ヘッダー（共通） **********/
header {
	background: var(--keycolor);
	color: var(--keycolor-text);
	padding: 20px 20px;
}

body.admin-bar header {
	top: 32px;
}

header h1 {
	width: 100%;
	max-width: 445px;
}

header h1 a {
	display: block;
}

@media screen and (max-width: 768px) {
	header {
		padding: 10px;
	}

	header h1 {
		max-width: 300px;
	}
}



/* スクロールダウンの位置 */
.scroll {
	position: absolute;
	right: 50%;
	right: 10px;
	/*top: 10%;*/
	bottom: 100px;
	writing-mode: vertical-rl;
	font-family: "Noto Serif JP", serif;
	letter-spacing: .04em;
}

/* 線のアニメーション部分 */
.scroll::before {
	animation: scroll 2s infinite;
	background-color: #464040;
	bottom: -115px;
	content: "";
	height: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 0.5px;
}

.scroll::after {
	content: "";
	display: block;
	height: 6px;
	width: 6px;
	background: #464040;
	border-radius: 50%;
	position: absolute;
	bottom: -20px;
	right: 5px;
}

/* 線のアニメーション */
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}

	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}

	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}

	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}


@media screen and (max-width: 1180px) {
	.scroll {
		right: 30px;
	}
}


@media screen and (max-width: 768px) {
	.scroll {
		font-size: 14px;
	}

	.scroll::before {
		left: -2px;
	}
}


@media screen and (max-width: 390px) {
	.scroll {
		font-size: 12px;
		right: 20px;
		bottom: 38px;
	}

	.scroll::before {
		left: -4px;
	}

}


/*** メインビジュアル ***/
#eye {
	position: relative;
	height: 670px;
	background: url(img/mv.webp) no-repeat center center;
	background-size: cover;
	padding: 0;

	font-family: "M PLUS Rounded 1c", sans-serif;
}

#eye .inner {
	position: relative;
	height: 100%;
}

#eye .catch {
	padding-top: 150px;
	font-size: 40px;
	line-height: 2.2em;
	letter-spacing: .1em;
}

#eye .btn_entry {
	margin-top: 60px;
	display: inline-block;
	text-align: center;
}

#eye .btn_entry .text {
	font-size: 18px;
}

#eye .btn_entry .text span {
	font-size: 14px;
}


#eye .btn_entry .btn_box .btn .btn_frame {
	/* padding: 30px 80px 30px 80px; */
	padding: 26px 74px 26px 74px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
}

@media screen and (max-width: 1180px) {
	#eye .inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}


@media screen and (max-width: 768px) {
	#eye {
		background-position: center right -290px;
		height: 500px;
	}

	#eye .catch {
		font-size: 26px;
		/* padding: 140px 10px 0 10px; */
		letter-spacing: .05em;

	}

	#eye .btn_entry .btn_box .btn .btn_frame {
		padding: 20px 60px 20px 60px;
	}

	#eye .btn_entry {
		width: 100%;
		margin-top: 40px;
	}

	#eye .btn_entry .text {
		margin-bottom: 8px;
		font-size: 14px;
	}

	#eye .btn_entry .text span {
		font-size: 12px;
	}



}


@media screen and (max-width: 390px) {
	#eye .btn_entry .btn_box .btn .btn_frame {
		padding: 20px 50px 20px 50px;
		letter-spacing: .1em;
	}
}


section {
	padding: 100px 0;
}

@media screen and (max-width: 1180px) {
	section {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (max-width: 768px) {
	section {
		padding: 60px 20px;
	}
}

h2.sec_title {
	font-size: 32px;
	font-weight: 300;
	text-align: center;
	padding-bottom: 35px;
	background: url(img/icon_ttl.svg) no-repeat center bottom;
	background-size: 104px 20px;
	letter-spacing: .1em;
	line-height: 1.6;

}

h2.sec_title .en {
	display: block;
	font-family: "Tangerine", cursive;
	font-size: 28px;
	/* font-weight: bold; */
	color: #B7923E;
	letter-spacing: .12em;
}

@media screen and (max-width: 768px) {
	h2.sec_title {
		font-size: 24px;
		letter-spacing: .08em;
		background-size: 75px 20px;
		padding-bottom: 30px;
	}

	h2.sec_title .en {
		font-size: 20px;
	}
}




.bkwrap1 {
	background: linear-gradient(to bottom, #FFFFFF, #EFE5DF);
}

.bkwrap2 {
	background-image: url(img/circle_skin.webp), url(img/circle_pink.webp);
	background-repeat: no-repeat, no-repeat;
	background-position: top 400px right -10%, top 600px left -10%;
	background-size: 482px 482px, 504px 504px;
}

/*** アットホームなバレエ教室で心も体ものびのびと ***/
#concept {
	text-align: center;
}

#concept .inner {
	background-image: url(img/catch_line.webp), url(img/icon_concept.webp);
	background-repeat: no-repeat, no-repeat;
	background-position: top 50px center, top 130px center;
	background-size: contain, 99px 173px;
	padding: 200px 0 0;
}

#concept .text1 {
	font-size: 36px;
	margin-bottom: 40px;
	letter-spacing: .1em;
}

#concept .text2 {
	font-family: "M PLUS Rounded 1c", sans-serif;
	margin-bottom: 100px;
}

#concept .photo_layout {}

#concept .photo_layout li {
	width: 50%;
	text-align: center;
}

#concept .photo_layout li:nth-child(1) .photo {
	max-width: 316px;
	margin: 0 auto;
}

#concept .photo_layout li:nth-child(2) .photo {
	max-width: 470px;
	margin: 200px 0 0;
}

@media screen and (max-width: 768px) {
	#concept .inner {
		background-position: top 50px center, top 100px center;
		padding: 150px 0 0;
	}

	#concept .text1 {
		font-size: 24px;
	}

	#concept .text2 {
		text-align: left;
		margin-bottom: 50px;
	}

	#concept .photo_layout li {
		width: 100%;
	}

	#concept .photo_layout li:nth-child(1) .photo {
		margin: 0 auto 0 0;
		width: 60%;
	}

	#concept .photo_layout li:nth-child(2) .photo {
		margin: 50px 0 0 auto;
		width: 76%;
	}

	.bkwrap2 {
		background-position: top 390px right -100%, top 830px left -80%;
	}

}


@media screen and (max-width: 390px) {
	#concept .text1 {
		font-size: 22px;
	}

	#concept .photo_layout li:nth-child(1) .photo {
		width: 65%;
	}

	#concept .photo_layout li:nth-child(2) .photo {
		margin: 30px 0 0 auto;
	}

	.bkwrap2 {
		background-position: top 551px right -550%, top 840px left -290%;
		background-size: 340px 340px, 340px 340px;
	}


	#concept .inner {
		background-size: contain, 69px 123px;
	}

}





/*** フェアリーズ・スペース・バレエについて ***/
#about {
	padding-bottom: 170px;
	padding-top: 60px;
}

#about ul {}

#about ul li {
	position: relative;
	padding: 10px;
	background: #fff;
	margin-top: 180px;
}

#about ul li::before {
	content: "01";
	font-family: "Tangerine", cursive;
	font-size: 100px;
	color: #B7923E;
	letter-spacing: 0.05em;
	position: absolute;
	top: -110px;
	left: 265px;
	z-index: 10;
}

#about ul li:nth-child(2)::before {
	content: "02";
	left: initial;
	right: 265px;
}

#about ul li:nth-child(3)::before {
	content: "03";
}

#about ul li .line {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 30px;
	border: 1px solid #B7923E;
}

#about ul li:nth-child(2) .line {
	flex-direction: row-reverse;
}

#about ul li .line::before {
	content: "";
	display: block;
	width: 290px;
	height: 126px;
	background: url(img/point.webp) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: -121px;
	left: 150px;
}

#about ul li:nth-child(2) .line::before {
	left: initial;
	right: 150px;
}

#about ul li .line::after {
	content: "Point";
	font-family: "Tangerine", cursive;
	font-size: 28px;
	color: #B7923E;
	letter-spacing: 0.1em;
	position: absolute;
	top: -90px;
	left: 260px;
}

#about ul li:nth-child(2) .line::after {
	left: initial;
	right: 260px;
}

#about ul li .text_box {
	width: 47%;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 30px;
}

#about ul li .text_box h3 {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.05em;
	background: url(img/circle_about.webp) no-repeat center center;
	background-size: 260px 260px;
	padding: 50px 0 50px;
	text-align: center;
	line-height: 200%;
	letter-spacing: .1em;

}

#about ul li .text_box p {
	font-family: "M PLUS Rounded 1c", sans-serif;
}

#about ul li .photo_box {
	width: 50%;
	max-width: 540px;
}

@media screen and (max-width: 768px) {
	#about {
		padding-bottom: 80px;
	}


	#about ul li .line::before {
		width: 240px;
		height: 145px;
		left: calc(50% - 120px);
	}



	#about ul li:nth-child(2) .line::before {
		right: initial;
		left: calc(50% - 120px);
	}

	#about ul li::before,
	#about ul li .line::after,
	#about ul li:nth-child(2)::before,
	#about ul li:nth-child(2) .line::after {
		left: calc(50% - 28px);
		right: initial;
	}

	#about ul li .line,
	#about ul li:nth-child(2) .line {
		flex-direction: column;
		padding: 20px 20px;
	}

	#about ul li .text_box {
		width: 100%;
		padding-bottom: 20px;
		padding-left: 0px;
		padding-right: 0px;
	}

	#about ul li .text_box h3 {
		font-size: 20px;
		background-size: 230px 230px;
		padding: 40px 0 40px;

	}

	#about ul li .photo_box {
		width: 100%;
		max-width: 100%;
	}

	#about ul li::before {
		font-size: 80px;
		top: -91px;
		letter-spacing: .08em;
	}

	#about ul li .line::after {
		top: -80px;
		font-size: 26px;
	}
}




/*** クラス紹介 ***/
#class {}

#class ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 60px;
}

#class ul li {
	margin-top: 50px;
	max-width: 370px;
	width: 32%;
}

#class ul li .text_box {
	margin-top: -40px;
	text-align: center;
}

#class ul li .text_box h3 {
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0.1em;
	padding: 10px 40px 40px;
	text-align: center;
	background: #fff;
	border-radius: 45px 45px 0 0;
	display: inline-block;
	position: relative;
}

#class ul li .text_box h3::after {
	content: "";
	display: block;
	width: 42px;
	height: 0px;
	border-top: 1px solid #B7923E;
	position: absolute;
	bottom: 19px;
	left: calc(50% - 21px);
}

#class ul li .text_box p {
	font-family: "M PLUS Rounded 1c", sans-serif;
	text-align: left;
}

@media screen and (max-width: 768px) {
	#class ul {
		flex-direction: column;
		margin-top: 0px;
	}

	#class ul li {
		margin-top: 50px;
		max-width: 100%;
		width: 100%;
	}

	#class .inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	#class ul li .text_box h3 {
		font-size: 20px;
		padding-bottom: 30px;
	}

	#class ul li .text_box h3::after {
		bottom: 14px;
	}
}


@media screen and (max-width: 390px) {

	#class ul li .text_box h3 {
		font-size: 18px;
	}
}



/*** 生徒様・保護者様の声 ***/
#voice {
	padding-top: 0px;
}

#voice ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 50px;
}

#voice ul li {
	position: relative;
	margin-top: 50px;
	max-width: 540px;
	width: 48%;
	border: 1px solid #B7923E;
	text-align: center;
}

#voice ul li .corner {
	position: relative;
	padding: 50px 20px;
}

#voice ul li::before,
#voice ul li::after,
#voice ul li .corner::before,
#voice ul li .corner::after {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	background: url(img/voice_frame_lu.jpg) no-repeat center center;
	background-size: contain;
	position: absolute;
	z-index: 1;
}

#voice ul li::before {
	left: -1px;
	top: -1px;
	background-image: url(img/voice_frame_lu.jpg);
}

#voice ul li::after {
	right: -1px;
	top: -1px;
	background-image: url(img/voice_frame_ru.jpg);
}

#voice ul li .corner::before {
	left: -1px;
	bottom: -1px;
	background-image: url(img/voice_frame_lb.jpg);
}

#voice ul li .corner::after {
	right: -1px;
	bottom: -1px;
	background-image: url(img/voice_frame_rb.jpg);
}

#voice .more_contents {
	display: none;

	border-top: 2px dashed #DAC6BB;
	margin-top: 30px;
	padding-bottom: 20px;
	text-align: left;
}

#voice .more_contents dt {
	position: relative;
	margin-top: 20px;
	font-size: 20px;
	display: inline-block;
	font-weight: 600;
	letter-spacing: .1em;

}


#voice .more_contents dt span {
	background: linear-gradient(transparent 60%, #FFEBEB 60%);
	padding-left: 30px;
}


#voice .more_contents dt::before {
	content: "Q.";
	position: absolute;
	top: -1px;
	left: 0;
}

#voice .more_contents dd {
	margin-top: 10px;
	font-family: "M PLUS Rounded 1c", sans-serif;
}


#voice ul li .photo_box {
	max-width: 260px;
	margin: 0 auto 30px;
}

#voice ul li .text_box .year {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 18px;
	position: relative;
}

#voice ul li .text_box .year::before {
	content: "";
	display: block;

}



#voice ul li .text_box .year .frame {
	display: inline-block;
	/*border: 1px solid #B7923E;*/
	padding: 5px 40px;

	background: url(img/voice_frame_01.png) no-repeat center center;
	background-size: contain;
}

#voice ul li .text_box h3 {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 18px 0;
	text-align: center;
}

#voice ul li .text_box .btn_more_box {
	text-align: right;
}

#voice ul li .text_box .btn_more_box .btn_more {
	position: relative;
	display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	background: #B7923E;
	color: #fff;
	padding: 5px 40px 5px 20px;
	border-radius: 6px;
	border: 1px solid #B7923E;
	transition: all 0.5s ease 0s;
	letter-spacing: .04em;
}

#voice ul li .text_box .btn_more_box .btn_more:hover {
	cursor: pointer;
	background: #fff;
	color: #B7923E;
}

#voice ul li .text_box .btn_more_box .btn_more::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 12px;
	right: 16px;
}

#voice ul li .text_box .btn_more_box .btn_more:hover::before {
	border-color: #B7923E;
}

@media screen and (max-width: 768px) {
	#voice {
		padding-top: 50px;
	}

	#voice .inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	#voice ul {
		flex-direction: column;
		margin-top: 0px;
	}

	#voice ul li {
		max-width: 100%;
		width: 100%;
	}

	#voice ul li .text_box h3 {
		/* text-align: left; */
		line-height: 180%;
	}

	#voice ul li .corner {}

	#voice ul li .photo_box {
		margin-bottom: 20px;
	}

	#voice ul li .text_box h3 {
		font-size: 18px;
	}

	#voice ul li .text_box .year {
		font-size: 14px;
	}

	#voice ul li .text_box .btn_more_box .btn_more {
		font-size: 14px;
	}

	#voice ul li .text_box .btn_more_box .btn_more::before {
		width: 9px;
		height: 9px;
		top: 11px;
	}

	#voice .more_contents dt {
		font-size: 18px;
	}

	#voice .more_contents dd {
		font-size: 14px;
	}
}

@media screen and (max-width: 390px) {
	#voice ul li .text_box .year .frame {
		padding: 5px 25px;
	}

	#voice ul li .text_box .btn_more_box .btn_more::before {
		top: 9px;
		right: 14px;

	}

	#voice ul li .text_box .btn_more_box .btn_more {
		padding: 3px 32px 3px 12px;
	}

	#voice ul li .text_box h3 {
		padding-top: 14px;
	}

	#voice ul li .photo_box {
		width: 82%;
		margin-bottom: 15px;
	}

	#voice .more_contents dt {
		font-size: 16px;
	}
}






/*** レッスンスケジュール ***/
#schedule {
	padding-top: 50px;
	padding-bottom: 50px;
}

#schedule .calendar {
	margin: 50px 0 0;
}

#schedule .biko {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 18px;
	margin-top: 10px;
	color: #B93943;
	line-height: 100%;
}


#schedule .biko.click {
	color: #464040;
}

@media screen and (max-width: 768px) {
	#schedule .biko {
		font-size: 14px;
	}
}

@media screen and (max-width: 390px) {
	#schedule .biko {
		font-size: 12px;
	}

	;
}


/*** レッスン料金 ***/
#price {
	background: #EFE5DF url(img/price_bg.webp) no-repeat top center;
	background-size: contain;
	padding-top: 200px;
	padding-bottom: 180px;
}


#price .price_img {
	width: 100%;
	max-width: 1160px;
	padding-top: 100px;
}


#price .biko {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 16px;
	margin-top: 10px;
}

/* #price .tb {
	width: 100%;
	min-width: 1200px;
}

#price .tb th,
#price .tb td {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.1em;
	background: #fff;
	vertical-align: middle;
	line-height: 1.6em;
}

#price .tb th {
	width: 25%;
}

#price .tb.style01 {
	margin-top: 100px;
}

#price .tb.style01 th,
#price .tb.style01 td {
	padding: 20px 50px;
}

#price .tb.style01 th {
	background: #E4C683;
	color: #fff;

}

#price .tb.style01 td {
	text-align: left;
}


#price .tb.style02 {
	margin-top: 50px;
}

#price .tb.style02 th {
	padding: 20px 20px;
	background: #E2A9A9;
	color: #fff;
}

#price .tb.style02 td.tt {
	background: #FFEBEB;
	padding: 10px 20px;
	border-right: 2px solid #fff;
}

#price .tb.style02 td.tt:last-child {
	border: none;
}

#price .tb.style02 td {
	text-align: center;
	padding: 15px 20px;
	border-right: 2px solid #EFE5DF;
}

#price .tb.style02 td small {
	font-size: 16px;
}

#price .tb.style02 td:last-child {
	border: none;
} */

@media screen and (max-width: 768px) {
	#price {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	#price .price_img {
		padding-top: 60px;
	}

	#price .biko {
		font-size: 14px;

	}
}

@media screen and (max-width: 390px) {
	#price .biko {
		font-size: 12px;

	}
}

/* #price .price_scroll {
	overflow: auto;
} */








/*** 無料体験はこちら ***/
.traial {
	background: url(img/cta_bg.webp) no-repeat center center;
	background-size: cover;
	padding: 20px;
	text-align: center;
}

.traial .frame {
	border: 1px solid #B7923E;
	padding: 120px 20px;
}

.btn_entry p,
.traial p {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 20px;
	font-weight: 400;
}

.traial p {
	line-height: 180%;
}

.btn_entry .btn_box,
.traial .btn_box {
	margin-top: 6px;
}

.btn_entry .btn_box .btn,
.traial .btn_box .btn {
	display: inline-block;
	position: relative;
	/*font-size: 45px;*/
	font-size: 34px;
	border-radius: 80px;
	padding: 10px;
	background: #FFEBEB;
	box-shadow: 3px 3px 6px #ccc;

	/* background: linear-gradient(to bottom right, #FFFDFB, #FFEBEB, #FFEBEB); */
	background: linear-gradient(150deg, #ffffff 10%, #FFF9F4 48%, #FFEBEB 80%);
}

.btn_entry .btn_box .btn:hover,
.traial .btn_box .btn:hover {
	opacity: 1;
	background: #fff;
}

.btn_entry .btn_box .btn .btn_frame,
.traial .btn_box .btn .btn_frame {
	position: relative;
	display: block;
	border: 1px solid #B7923E;
	border-radius: 80px;
	padding: 40px 150px 40px 150px;
	letter-spacing: 0.2em;
}

.btn_entry .btn_box .btn::before,
.traial .btn_box .btn::before {
	content: "";
	display: block;
	width: 168px;
	height: 110px;
	background: url(img/btn_illust.webp) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: -28px;
	left: -35px;
	z-index: 10;
}

.btn_entry .btn_box .btn::after,
.traial .btn_box .btn::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-right: 2px solid #464040;
	border-bottom: 2px solid #464040;
	transform: rotate(-45deg);
	position: absolute;
	top: calc(50% - 10px);
	right: 80px;
}

.traial .btn_box .btn .btn_frame {
	font-size: 45px;
	/* font-weight: 500; */
	letter-spacing: .16em;
	padding: 37px 145px 37px 146px;

}

.btn_entry .btn_box .btn::after {
	right: 50px;
	width: 18px;
	height: 18px;
}


.traial .btn_box .btn::before {
	width: 240px;
	background-size: cover;
}


@media screen and (max-width: 768px) {

	.btn_entry .btn_box .btn .btn_frame,
	.traial .btn_box .btn .btn_frame {
		padding: 10px 30px 10px 20px;
		font-size: 20px;
		letter-spacing: .15em;
	}

	.btn_entry .btn_box .btn::after,
	.traial .btn_box .btn::after {
		width: 10px;
		height: 10px;
		right: 30px;
		top: calc(50% - 4px);
	}

	.btn_entry .btn_box .btn::before,
	.traial .btn_box .btn::before {
		width: 138px;
		height: 80px;
		top: -24px;
		left: -30px;
	}

	.traial .btn_box .btn::before {
		width: 144px;
	}

	.traial .btn_box .btn .btn_frame {
		padding: 20px 85px 20px 85px;
		font-size: 26px;
	}

	.btn_entry .btn_box .btn,
	.traial .btn_box .btn {
		padding: 5px;
	}

	.traial p {
		font-size: 14px;
	}

	.traial {
		padding: 10px;
	}

	.traial .frame {
		padding: 50px 20px;
	}
}


@media screen and (max-width: 500px) {
	.traial .btn_box .btn .btn_frame {
		padding: 20px 54px 20px 54px;
		font-size: 24px;
	}

	.traial {
		padding: 7px;
	}

	.traial .btn_box .btn::before {
		width: 120px;
	}

	.traial .btn_box .btn .btn_frame {
		padding: 17px 50px 17px 50px;
		font-size: 22px;
		letter-spacing: .03em;
	}

	.traial p {
		font-size: 13px;
	}

	.traial .frame {
		padding: 40px 20px;
	}

	.traial .btn_box .btn::after {
		width: 9px;
		height: 9px;
	}

}





/*** 代表紹介 ***/
#greeting {
	background: linear-gradient(to top, #FFFFFF, #EFE5DF);
}

#greeting .inner {
	width: 1000px;
	max-width: 100%;
}

#greeting .profile {
	margin-top: 50px;
	margin-bottom: 50px;
}

#greeting .photo_box {
	width: 30%;
}

#greeting .text_box {
	width: 64%;
	background: #fff;
	border-radius: 22px;
	padding: 20px 30px;
}

#greeting .text_box .title {
	font-family: "Tangerine", cursive;
	font-size: 28px;
	position: relative;
	letter-spacing: .12em;
}

#greeting .border::before {
	content: "";
	display: block;
	width: 38px;
	height: 0px;
	border-top: 2px solid #B7923E;
	position: absolute;
	bottom: 0px;
	left: 0;
}

#greeting .text_box .text {
	margin-top: 20px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	line-height: 2.0em;
}

#greeting .text_box .name {
	font-size: 26px;
	letter-spacing: 0.2em;
	margin-top: 20px;
	text-align: right;
}

#greeting .text_box .en {
	font-family: "Tangerine", cursive;
	font-size: 26px;
	margin-left: 20px;
	letter-spacing: .12em;
}

#greeting .profile2 {}

#greeting .profile2 .career {
	width: 48%;
}

#greeting .profile2 .career h3,
#greeting .profile2 .qualification h3 {
	position: relative;
	font-size: 20px;
	letter-spacing: 0.26em;
	font-weight: 600;

}

#greeting .profile2 .career ul {
	margin-top: 30px;
}

#greeting .profile2 .career ul li {
	line-height: 2.0em;
	font-family: "M PLUS Rounded 1c", sans-serif;
	letter-spacing: .04em;
}

#greeting .profile2 .qualification {
	width: 48%;
}

#greeting .profile2 .qualification h3 {}

#greeting .profile2 .career h3.border::before,
#greeting .profile2 .qualification h3.border::before {
	bottom: -10px;
}

#greeting .profile2 .qualification ul {
	margin-top: 30px;
	font-family: "M PLUS Rounded 1c", sans-serif;

}

#greeting .profile2 .qualification ul li {
	line-height: 2.0em;
	padding-left: 1.0em;
	position: relative;
}

#greeting .profile2 .qualification ul li::before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 768px) {
	#greeting {
		padding-top: 70px;
	}

	#greeting .inner {
		width: 100%;
	}

	#greeting .photo_box {
		width: 40%;
		margin: 0 auto 40px;
	}

	#greeting .text_box {
		width: 100%;
	}

	#greeting .profile2 .career {
		width: 100%;
		margin-bottom: 40px;
	}

	#greeting .profile2 .qualification {
		width: 100%;
	}

	#greeting .text_box .title {
		font-size: 22px;
	}

	#greeting .text_box .name {
		font-size: 20px;
	}

	#greeting .text_box .en {
		font-size: 22px;
	}

	#greeting .profile2 .career ul,
	#greeting .profile2 .qualification ul {
		font-size: 14px;
	}

	#greeting .profile2 .career h3,
	#greeting .profile2 .qualification h3 {
		font-size: 18px;
	}


}


@media screen and (max-width: 390px) {
	#greeting .text_box .title {
		font-size: 20px;
	}

	#greeting .text_box .en {
		font-size: 18px;
	}

	#greeting .text_box .name {
		font-size: 18px;


	}

	#greeting .text_box {
		padding: 20px;
	}

	#greeting .text_box .en {
		margin-left: 16px;
	}

	#greeting .profile {
		margin-bottom: 40px;
	}

	#greeting .profile2 .career ul,
	#greeting .profile2 .qualification ul {
		margin-top: 25px;
	}


	#greeting .photo_box {
		width: 65%;
		margin: 0 auto 30px;
	}

	#greeting .profile {
		margin-top: 40px;
	}
}





/*** よくあるご質問 ***/
#faq {
	padding-top: 60px;
	padding-bottom: 180px;
}

#faq .sec_title {
	margin-bottom: 80px;
}

#faq dl.faq {
	border: 1px solid #464040;
	border-radius: 10px;
	box-shadow: 5px 5px 0px #FFEBEB;
	padding: 30px;
	margin-bottom: 20px;
	letter-spacing: .04em;
}

#faq dl.faq dt {
	position: relative;
	padding: 0 0 20px;
	font-size: 18px;
	padding-left: 40px;
	line-height: 1.8em;
}

#faq dl.faq dt::before {
	content: "Q";
	font-size: 30px;
	color: #B7923E;
	position: absolute;
	top: -5px;
	left: 0px;
}

#faq dl.faq dd {
	position: relative;
	padding: 20px 0 0;
	border-top: 2px dashed #DAC6BB;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 16px;
	padding-left: 40px;
	line-height: 1.8em;
}

#faq dl.faq dd::before {
	content: "A";
	font-size: 30px;
	color: #B93943;
	position: absolute;
	top: 16px;
	left: 0px;
	font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 768px) {
	#faq {
		padding-bottom: 100px;
	}

	#faq dl.faq {
		padding: 20px 20px;
		font-size: 16px;
	}

	#faq .sec_title {
		margin-bottom: 50px;
	}

	#faq dl.faq dd {
		font-size: 14px;
		padding-top: 14px;
	}

	#faq dl.faq dt::before,
	#faq dl.faq dd::before {
		font-size: 24px;
	}

	#faq dl.faq dt {
		font-size: 16px;
		padding-bottom: 14px;
	}

	#faq dl.faq dd::before {
		top: 13px;
	}

	#faq dl.faq dt::before {
		top: -3px;
	}

	#faq dl.faq dt,
	#faq dl.faq dd {
		padding-left: 30px;
	}
}


@media screen and (max-width: 390px) {


	#faq {
		padding-top: 40px;
		padding-bottom: 60px;
	}
}






/*** レッスンや発表会の様子 ***/
#gallery {
	background-color: #FFF5F5;
}

.gallery_bxslider {
	max-width: 900px;
	margin: 50px auto 0;
}

.gallery_bxslider .bx-wrapper {
	box-shadow: none;
	border: none;
}

.bxslider_thumbnail {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 30px;
	list-style: none;
	column-gap: 20px;
}

.bxslider_thumbnail>li {
	width: calc((100% / 5) - 5%);
}

.bxslider_thumbnail>li>a {
	display: block;
	position: relative;
	padding-top: 75%;
}

.bxslider_thumbnail>li>a>img {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 100%;
	max-height: 100%;
}

.bx-wrapper {
	background-color: transparent;
	margin: 0px auto;
	border: none;
	box-shadow: none;
}

.bx-wrapper img {
	display: block;
	width: 100%;
}


.bx-wrapper .bx-controls-direction a {
	color: #B7923E;
}

@media screen and (max-width: 1000px) {
	.bx-wrapper .bx-controls-direction a {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	#gallery {
		padding-top: 80px;
	}

	.bxslider_thumbnail {
		margin-top: 20px;
		column-gap: 5px;
	}

	.gallery_bxslider .bx-wrapper {
		margin-bottom: 0;
	}

	.bxslider_thumbnail>li {
		width: calc((100% / 5) - 2%);
	}
}


@media screen and (max-width: 390px) {
	#gallery {
		padding-top: 60px;
	}
}



/*** お知らせ ***/
#blog {}

#blog .info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 50px;
}

#blog .info li {
	margin-bottom: 40px;
	width: 48%;
}

#blog .info li a {
	display: flex;
	justify-content: space-between;
}

#blog .info li .photo_box {
	width: 40%;
	max-width: 200px;
	border-radius: 10px;
}

#blog .info li .photo_box img {
	height: auto;
	height: initial;
}

#blog .info li .text_box {
	width: 56%;
}

#blog .info li .text_box .date {
	display: block;
	position: relative;
	font-family: "M PLUS Rounded 1c", sans-serif;
	padding-left: 10px;
}

#blog .info li .text_box .date::before {
	content: "";
	display: block;
	width: 0px;
	height: 24px;
	border-left: 2px solid #B7923E;
	position: absolute;
	top: 2px;
	left: 0;
}

#blog .info li .text_box .title {
	display: block;
	font-size: 18px;
	margin-top: 20px;
}


#blog .sec_title::before,
#blog .sec_title::after,
#access .sec_title::before,
#access .sec_title::after {
	content: "";
	display: block;
	width: 38%;
	height: 20px;
	background-image: url(img/dot_line.webp);
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
	position: absolute;
	/* z-index: 80; */
	top: 62px;
}

#blog .sec_title::after,
#access .sec_title::after {
	right: 0px;
}

#blog .com_btn_box .btn .btn_frame {
	padding: 15px 80px 15px 80px;
	width: 320px;
}


@media screen and (max-width: 768px) {
	#blog .info {
		flex-direction: column;
	}

	#blog .info li {
		width: 100%;
	}

	#blog .info li .text_box .date {
		font-size: 12px;
	}

	#blog .info li .text_box .title {
		font-size: 14px;
		margin-top: 10px;
	}

	#blog .sec_title::before,
	#blog .sec_title::after,
	#access .sec_title::before,
	#access .sec_title::after {
		top: 42px;
		width: 35%;
	}


}

@media screen and (max-width: 390px) {

	#blog .sec_title::before,
	#blog .sec_title::after,
	#access .sec_title::before,
	#access .sec_title::after {
		width: 30%;
	}

}





.com_btn_box {
	margin-top: 50px;
	text-align: center;
}

.com_btn_box .btn {
	display: inline-block;
	position: relative;
	font-size: 20px;
	border-radius: 80px;
	padding: 3px;
	background: #FFEBEB;
	/* box-shadow: 3px 3px 6px #ccc; */

	/* background: linear-gradient(to bottom right, #FFFDFB, #FFEBEB); */
	background: linear-gradient(90deg, #FFFFFF 0%, #FFEBEB 50%);
	transition: all 0.2s;


}

.com_btn_box .btn:hover {
	opacity: 1;
	background: #fff;
}

.com_btn_box .btn .btn_frame {
	position: relative;
	display: block;
	border: 1px solid #B7923E;
	border-radius: 80px;
	padding: 15px 60px 15px 80px;
	letter-spacing: .16em;
	width: 350px;
}

.com_btn_box .btn::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: url(img/icon_tell.svg) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: calc(50% - 10px);
	left: 56px;
}

.mail .com_btn_box .btn::before {
	background-image: url(img/icon_mail.svg);
}

.tel .com_btn_box .btn::before {
	background-image: url(img/icon_tell.svg);
}

.instagram .com_btn_box .btn::before {
	background-image: url(img/icon_insta.svg);
}

.com_btn_box .btn::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-right: 1px solid #464040;
	border-bottom: 1px solid #464040;
	transform: rotate(-45deg);
	position: absolute;
	top: calc(50% - 5px);
	right: 30px;
}


.com_btn_box.blog .btn::before {
	display: none;
}

@media screen and (max-width: 1180px) {
	footer .com_btn_box {
		margin-top: 20px;
	}
}



@media screen and (max-width: 768px) {
	.com_btn_box {
		margin-top: 20px;
	}

	.com_btn_box .btn {
		font-size: 16px;
	}

	#blog .com_btn_box .btn .btn_frame {
		padding: 15px 0px;
		width: 240px;
	}

	.com_btn_box .btn::after {
		width: 10px;
		height: 10px;
	}
}


@media screen and (max-width: 390px) {
	#blog .com_btn_box .btn .btn_frame {
		width: 240px;
	}
}


/* gotop */
._top {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
}

._top .gotop {
	display: inline-block;
	max-width: 92px;
}

._top .gotop .text {
	font-size: 13px;
	letter-spacing: .06em;
	position: relative;
}

._top .gotop .text::after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-top: 1px solid #464040;
	border-right: 1px solid #464040;
	transform: rotate(-45deg);
	position: absolute;
	top: 8px;
	right: -16px;

}

._top .gotop:hover {
	opacity: .3;
	transition: .3s;
}

@media screen and (max-width: 768px) {
	._top .gotop {
		max-width: 48px;
	}


	._top .gotop .text {
		font-size: 12px;
	}

	._top {
		bottom: 70px;
	}

	._top .gotop .text::after {
		width: 7px;
		height: 7px;
		top: 24px;
		right: -13px;
	}

}





/*** アクセス ***/
#access {
	padding-top: 30px;
}

#access .access_box {
	margin-top: 80px;
}

#access .access_box .text_box {
	width: 46%;
}

#access .access_box .text_box h3 {
	font-size: 28px;
	font-weight: 300;
	margin-bottom: 40px;
	letter-spacing: .1em;
	line-height: 1.8;
}

#access .access_box .text_box .address,
#access .access_box .text_box .tel {
	display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	padding-left: 35px;
	margin-bottom: 8px;
	background: url(img/icon_map.svg) no-repeat top left;
	font-weight: bold;
	letter-spacing: .04em;
}

#access .access_box .text_box .tel {
	background: url(img/icon_tell.svg) no-repeat top left;
	line-height: 2.0em;
}

#access .access_box .text_box .biko {
	margin-bottom: 20px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	padding-left: 30px;
	letter-spacing: .04em;

}

#access .access_box .text_box .biko li {
	position: relative;
	padding-left: 16px;
	font-size: 14px;
}

#access .access_box .text_box .biko li::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}

#access .access_box .text_box .tel {}

#access .access_box .googlemap {
	width: 50%;
}

#access .access_box .googlemap iframe {
	width: 100%;
}

@media screen and (max-width: 768px) {
	#access {
		padding-top: 50px;
	}

	#access .access_box {
		margin-top: 50px;
	}

	#access .access_box .text_box {
		width: 100%;
	}

	#access .access_box .googlemap {
		width: 100%;
		margin-top: 20px;
	}

	#access .access_box .text_box h3 {
		font-size: 20px;
		margin-bottom: 20px;
		letter-spacing: .06em;
	}

	#access .access_box .text_box .address,
	#access .access_box .text_box .tel {
		font-size: 16px;
		background-size: 24px;
		background-position: top 5px left;
		padding-left: 30px;
	}

}







/*** 無料体験会・お申込み ***/
#entry {
	background: #FFF8F8;
	padding-bottom: 20px;
	padding-top: 80px;
}

#entry .msg {
	position: relative;
	margin-top: 50px;
	text-align: center;
	font-family: "M PLUS Rounded 1c", sans-serif;
}

#entry .msg::after {
	content: "";
	display: block;
	width: 42px;
	height: 0px;
	border-top: 1px solid #B7923E;
	position: absolute;
	bottom: -30px;
	left: calc(50% - 21px);
}

#entry .inner {
	background: url(img/concept_illust.webp) no-repeat left bottom;
	background-size: 214px 334px;
	background-position: 0px bottom;
	padding-bottom: 180px;
}


#entry .line {

	border-bottom: 4px solid #FFFFFF;
}


@media screen and (max-width: 768px) {
	#entry .msg {
		margin-top: 30px;
	}

	#entry .msg::after {
		bottom: -25px;
	}

	#entry .inner {
		background-size: 124px 214px;
		padding-bottom: 110px;
	}
}

@media screen and (max-width: 390px) {
	#entry .msg {
		text-align: left;
	}

	#entry .inner {
		background: none;
		padding-bottom: 40px;
	}
}


/*** インスタグラム ***/
#sns h2.sec_title {
	margin-bottom: 40px;

}


#sb_instagram .sbi_follow_btn a {
	font-family: "M PLUS Rounded 1c", sans-serif;
}

#sb_instagram .sbi_load_btn .sbi_btn_text,
#sb_instagram .sbi_load_btn .sbi_loader {
	font-family: "M PLUS Rounded 1c", sans-serif;
}

#sb_instagram #sbi_load {
	margin-top: 20px;
}

#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn a,
.et-db #et-boc .et-l .et_pb_module .sbi_follow_btn a {
	padding: 10px 20px;
}





footer {
	text-align: center;
	background: #FBF7F5;
	padding: 80px 0px 0;
	margin-bottom: 137px;
}

footer .ft_logo {
	width: 100%;
	max-width: 445px;
	margin: 0 auto 10px;
}

footer .ft_address {
	font-family: "M PLUS Rounded 1c", sans-serif;
}

footer .ft_nav_link {
	padding-bottom: 80px;
}

footer .ft_nav_link li {
	width: 100%;
}

footer .ft_nav_link li.tel .msg {
	display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 10px;
	width: 80%;
	margin-top: 10px;
	text-align: left;
	position: relative;
	padding-left: 10px;
	margin-left: 20px;
	margin-right: 20px;
	line-height: 180%;
}

footer .ft_nav_link li.tel .msg::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}

footer .ft_nav_link .com_btn_box .btn .btn_frame {
	padding: 15px 60px 15px 80px;
	letter-spacing: .1em;
	padding-left: 85px;

}

footer .ft_copy {
	background: #fff;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 12px;
	padding: 10px 10px;
}

footer .line {
	border-bottom: 2px solid #FFFFFF;
	margin-bottom: 10px;
}

@media screen and (max-width: 1180px) {
	footer .ft_nav_link {
		flex-direction: column;
		margin-top: 30px;
	}

	footer .ft_nav_link li.tel .msg {
		display: inline;
		/* text-align: center; */
	}

	footer .ft_nav_link li.tel .msg::before {
		top: -2px;
	}

	footer .ft_nav_link .com_btn_box .btn .btn_frame {}
}



@media screen and (max-width: 768px) {
	footer {
		margin-bottom: 65px;
	}


	footer .ft_nav_link li {
		width: 100%;
	}

	footer .ft_logo {
		padding: 0 10px;
		width: 90%;
	}

	footer .ft_nav_link li {
		line-height: 1.3;
	}

	footer .ft_nav_link .com_btn_box .btn .btn_frame {
		width: 280px;
		font-size: 16px;
		padding: 16px 0px 16px 20px;
	}



	footer .com_btn_box .btn::before {
		left: 39px;
	}

	footer .ft_nav_link {
		margin-top: 40px;
	}

	footer .ft_copy .copy {
		font-size: 12px;
	}
}







/* 固定ボタン */

#fixed_btn {
	background-color: #FBF7F5;
	padding: 15px;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99;
	display: none;
}

#fixed_btn .btn_box {}


#fixed_btn .btn_box a {
	display: block;
	width: 100%;
	max-width: 451px;
	margin: 0 auto;
}



#fixed_btn .btn_box .sp {
	display: none;
}

@media screen and (max-width: 768px) {
	#fixed_btn .btn_box .pc {
		display: none;
	}

	#fixed_btn .btn_box .sp {
		display: block;
	}

	#fixed_btn .btn_box a {
		width: 100%;
	}

	#fixed_btn {
		padding: 0px;
	}
}


@media screen and (max-width: 500px) {}





/* ハンバーガーメニュー */
#nav-open span,
#nav-open span:before,
#nav-open span:after {
	position: absolute;
	transition: all 0.4s;
	height: 1px;
	width: 48px;
	border-radius: 3px;
	background: #B7923E;
	display: block;
	content: "";
	cursor: pointer;
	z-index: 9999;
}

#nav-open {
	position: fixed;
	top: 20px;
	right: 3%;
	width: 74px;
	height: 64px;
	z-index: 9999;
	transition: 600ms ease all;
}

#nav-open:hover {
	/* opacity: 0.6; */
	transition: 600ms ease all;
	background: #B7923E;
}

#nav-open:hover span,
#nav-open:hover span:before,
#nav-open:hover span:after {
	background: #fff;
}

#nav-open span {
	position: absolute;
	top: 18px;
	right: 12px;
}

#nav-open span:before {
	top: 14px;
}

#nav-open span:after {
	top: 28px;
}

#nav-open:hover {
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	#nav-open {
		top: 5px;
		right: 2%;
	}

	#nav-open:hover {
		background: transparent;
	}

	#nav-open:hover span,
	#nav-open:hover span:before,
	#nav-open:hover span:after {
		background: #B7923E;

	}

	#nav-open span,
	#nav-open span:before,
	#nav-open span:after {
		width: 38px;
	}

	#nav-open span:before {
		top: 10px;
	}

	#nav-open span:after {
		top: 20px;
	}

	#nav-open span {
		top: 18px;
	}

	#nav-open {
		width: 60px;
		height: 50px;
	}

}




/*ハンバーガー開閉*/
#nav-open.active span {
	-webkit-transform: translateY(16px) rotate(-45deg);
	transform: translateY(16px) rotate(-45deg);
}

#nav-open.active span:before {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
	opacity: 0;
}

#nav-open.active span:after {
	-webkit-transform: translateY(-27px) rotate(90deg);
	transform: translateY(-27px) rotate(90deg);
}

/*
@media screen and (max-width: 500px) {
  #nav-open.active span {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
  }

  #nav-open.active span:after {
    -webkit-transform: translateY(-14px) rotate(90deg);
    transform: translateY(-14px) rotate(90deg);
  }
}
*/




/*ハンバーガー中身*/
#nav-content {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transition: 0.2s ease-in-out;
	overflow: auto;
	opacity: 1;
	z-index: 9998;
	/*background-color: rgba(229, 212, 213, 0.9);*/
	background: linear-gradient(to bottom left, #FBF7F5, #FFEBEB);

}

#nav-content.open {
	display: block;
}

#nav-content.open:before {
	content: "";
	overflow: hidden;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	z-index: -1;
}

.hamburger-top {
	height: 40px;
}

.nav-content .nav_box {
	/*  display: flex; */
	height: 100vh;
	/*  align-items: center; */
	/*  justify-content: center; */
	position: relative;

	text-align: center;
	padding-top: 100px;
	background: url(img/icon_ttl.svg) no-repeat center top 50px;
	background-size: 104px 20px;
}

.nav-content .nav_box .sp_navi {}

.nav-content .nav_box .sp_navi li {
	line-height: 3.2em;
}

.nav-content .nav_box .sp_navi li a {
	font-size: 18px;

}

.nav-content .nav_box .ft_nav_link li.instagram {
	margin-bottom: 100px;
}

.nav-content .nav_box .ft_nav_link li:first-child {
	margin-top: 40px;
}

.nav-content .com_btn_box {
	margin-top: 20px;
	margin-bottom: 3px;
}

.nav-content .com_btn_box .btn .btn_frame {
	/* padding: 10px 80px 10px 80px; */
	min-width: 340px;
}


@media screen and (max-height: 960px) {
	.nav-content .nav_box {
		height: auto;
		height: initial;
	}
}


@media screen and (max-width: 768px) {
	#nav-open.active span:after {
		transform: translateY(-21px) rotate(90deg);
	}

	.nav-content .com_btn_box .btn .btn_frame {
		padding: 14px 40px 14px 60px;
		width: 280px;
		min-width: unset;
	}

	.nav-content .com_btn_box .btn::before {
		left: 42px;
	}
}


@media screen and (max-width: 390px) {
	.nav-content .nav_box .sp_navi li a {
		font-size: 16px;
	}

	.nav-content .nav_box .sp_navi li {
		line-height: 2.8em;
	}
}