@charset "utf-8";

/*---------------------------------
 common
---------------------------------*/
:root {
	--sp: 7.5;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

a {
	transition: 0.3s ease-in-out;
}

a:hover {
	opacity: 0.5;
	transition: 0.3s ease-in-out;
}

img {
	display: block;
}

body {
	overflow-x: hidden;
	background: #ffffff;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: 0.02em;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	body {
		width: 750px;
		padding-top: 120px;
	}
}

@media screen and (max-width: 767px) {
	body {
		width: 100%;
		padding-top: calc(120vw / var(--sp));
	}
}


/*---------------------------------
 header
---------------------------------*/
@media screen and (min-width: 768px) {
	header {
		position: fixed;
		z-index: 999;
		display: flex;
		align-items: center;
		background: #a69b8c;
		width: 750px;
		height: 120px;
		padding-left: 30px;
		top: 0;
	}
	
	header h1 {
		width: 353px;
	}
	
	header h1 img {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	header {
		position: fixed;
		z-index: 999;
		display: flex;
		align-items: center;
		background: #a69b8c;
		width: 100%;
		height: calc(120vw / var(--sp));
		padding-left: calc(30vw / var(--sp));
		top: 0;
	}
	
	header h1 {
		width: calc(353vw / var(--sp));
	}
	
	header h1 img {
		width: 100%;
	}
}


/*---------------------------------
 main
---------------------------------*/
@media screen and (min-width: 768px) {
	main {
		width: 100%;
		padding-bottom: 115px;
	}
	
	main>img {
		width: 100%;
		margin-bottom: 35px;
	}
	
	main h2 {
		display: block;
		color: #83745f;
		font-size: 34px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto 30px;
	}
	
	main p {
		display: block;
		color: #4d4d4d;
		font-size: 25px;
		line-height: 43px;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin: 0 auto 40px;
	}
	
	main a {
		display: block;
		width: 627px;
		margin: 0 auto;
	}
	
	main a img {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	main {
		width: 100%;
		padding-bottom: calc(115vw / var(--sp));
	}
	
	main>img {
		width: 100%;
		margin-bottom: calc(35vw / var(--sp));
	}
	
	main h2 {
		display: block;
		color: #83745f;
		font-size: calc(34vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto calc(30vw / var(--sp));
	}
	
	main p {
		display: block;
		color: #4d4d4d;
		font-size: calc(25vw / var(--sp));
		line-height: calc(43vw / var(--sp));
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin: 0 auto calc(40vw / var(--sp));
	}
	
	main a {
		display: block;
		width: calc(627vw / var(--sp));
		margin: 0 auto;
	}
	
	main a img {
		width: 100%;
	}
}


/*---------------------------------
 #program
---------------------------------*/
@media screen and (min-width: 768px) {
	#program {
		position: relative;
		background-color: #ffffff;
		background-image: repeating-linear-gradient(-17.2deg, #fff7eb, #fff7eb 680px, transparent 0, transparent 1360px);
		width: 100%;
		padding: 70px 0 35px;
	}
	
	#program .en {
		position: absolute;
		mix-blend-mode: multiply;
		width: 544px;
		top: -39px;
		left: 0;
	}
	
	#program h2 {
		width: 382px;
		margin: 0 auto 50px;
	}
	
	#program h2 img {
		width: 100%;
	}
	
	#program .point {
		width: 100%;
		margin-bottom: 50px;
	}
	
	#program .point:last-child {
		margin-bottom: 85px;
	}
	
	#program .point>img {
		width: 630px;
		margin: 0 auto 35px;
	}
	
	#program .point h3 {
		color: #538dd7;
		font-size: 38px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto 25px;
	}
	
	#program .point p {
		color: #4d4d4d;
		font-size: 26px;
		line-height: 40px;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	
	#program .point a {
		display: block;
		width: 380px;
		margin: 20px auto 0;
	}
	
	#program .point a img {
		width: 100%;
	}
	
	#program .taikenkai {
		width: 627px;
		margin: 0 auto;
	}
	
	#program .taikenkai h3 {
		position: relative;
		color: #f07a90;
		font-size: 33px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto 28px;
	}
	
	#program .taikenkai h3::before {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: 1px;
		width: 2px;
		height: 50px;
		transform: rotate(-36deg);
		transform-origin: top left;
		top: 0;
		left: 0;
	}
	
	#program .taikenkai h3::after {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: 1px;
		width: 2px;
		height: 50px;
		transform: rotate(36deg);
		transform-origin: top right;
		top: 0;
		right: 0;
	}
	
	#program .taikenkai a {
		display: block;
		width: 100%;
	}
	
	#program .taikenkai a img {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#program {
		position: relative;
		background-color: #ffffff;
		background-image: repeating-linear-gradient(-17.2deg, #fff7eb, #fff7eb calc(680vw / var(--sp)), transparent 0, transparent calc(1360vw / var(--sp)));
		width: 100%;
		padding: calc(70vw / var(--sp)) 0 calc(35vw / var(--sp));
	}
	
	#program .en {
		position: absolute;
		mix-blend-mode: multiply;
		width: calc(544vw / var(--sp));
		top: calc(-39vw / var(--sp));
		left: 0;
	}
	
	#program h2 {
		width: calc(382vw / var(--sp));
		margin: 0 auto calc(50vw / var(--sp));
	}
	
	#program h2 img {
		width: 100%;
	}
	
	#program .point {
		width: 100%;
		margin-bottom: calc(50vw / var(--sp));
	}
	
	#program .point:last-child {
		margin-bottom: calc(85vw / var(--sp));
	}
	
	#program .point>img {
		width: calc(630vw / var(--sp));
		margin: 0 auto calc(35vw / var(--sp));
	}
	
	#program .point h3 {
		color: #538dd7;
		font-size: calc(38vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto calc(25vw / var(--sp));
	}
	
	#program .point p {
		color: #4d4d4d;
		font-size: calc(26vw / var(--sp));
		line-height: calc(40vw / var(--sp));
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	
	#program .point a {
		display: block;
		width: calc(380vw / var(--sp));
		margin: calc(20vw / var(--sp)) auto 0;
	}
	
	#program .point a img {
		width: 100%;
	}
	
	#program .taikenkai {
		width: calc(627vw / var(--sp));
		margin: 0 auto;
	}
	
	#program .taikenkai h3 {
		position: relative;
		color: #f07a90;
		font-size: calc(33vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto calc(28vw / var(--sp));
	}
	
	#program .taikenkai h3::before {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: calc(1vw / var(--sp));
		width: calc(2vw / var(--sp));
		height: calc(50vw / var(--sp));
		transform: rotate(-36deg);
		transform-origin: top left;
		top: 0;
		left: 0;
	}
	
	#program .taikenkai h3::after {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: calc(1vw / var(--sp));
		width: calc(2vw / var(--sp));
		height: calc(50vw / var(--sp));
		transform: rotate(36deg);
		transform-origin: top right;
		top: 0;
		right: 0;
	}
	
	#program .taikenkai a {
		display: block;
		width: 100%;
	}
	
	#program .taikenkai a img {
		width: 100%;
	}
}


/*---------------------------------
 #merit
---------------------------------*/
@media screen and (min-width: 768px) {
	#merit {
		background: #ffffff;
		width: 100%;
		padding: 70px 0 110px;
	}
	
	#merit .en {
		width: 411px;
		margin-bottom: 50px;
	}
	
	#merit h2 {
		width: 421px;
		margin: 0 auto 30px;
	}
	
	#merit h2 img {
		width: 100%;
	}
	
	#merit>img {
		width: 646px;
		margin-left: 73px;
	}
	
	#merit p {
		background: #dde8f7;
		color: #4d4d4d;
		font-size: 25px;
		line-height: 43px;
		font-weight: 400;
		text-align: center;
		border-radius: 20px;
		width: 650px;
		padding: 35px 0;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	#merit {
		background: #ffffff;
		width: 100%;
		padding: calc(70vw / var(--sp)) 0 calc(110vw / var(--sp));
	}
	
	#merit .en {
		width: calc(411vw / var(--sp));
		margin-bottom: calc(50vw / var(--sp));
	}
	
	#merit h2 {
		width: calc(420vw / var(--sp));
		margin: 0 auto calc(30vw / var(--sp));
	}
	
	#merit h2 img {
		width: 100%;
	}
	
	#merit>img {
		width: calc(646vw / var(--sp));
		margin-left: calc(73vw / var(--sp));
	}
	
	#merit p {
		background: #dde8f7;
		color: #4d4d4d;
		font-size: calc(25vw / var(--sp));
		line-height: calc(43vw / var(--sp));
		font-weight: 400;
		text-align: center;
		border-radius: calc(20vw / var(--sp));
		width: calc(650vw / var(--sp));
		padding: calc(35vw / var(--sp)) 0;
		margin: 0 auto;
	}
}


/*---------------------------------
 #class
---------------------------------*/
@media screen and (min-width: 768px) {
	#class {
		position: relative;
		background: #f1f7e2;
		width: 100%;
		padding: 95px 0 50px;
	}
	
	#class .en {
		position: absolute;
		mix-blend-mode: multiply;
		width: 406px;
		top: -44px;
		left: 0;
	}
	
	#class h2 {
		width: 302px;
		margin: 0 auto 30px;
	}
	
	#class h2 img {
		width: 100%;
	}
	
	#class>p {
		color: #4d4d4d;
		font-size: 26px;
		line-height: 1em;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin-bottom: 45px;
	}
	
	#class .lesson {
		width: 630px;
		margin: 0 auto 50px;
	}
	
	#class .lesson:last-child {
		margin-bottom: 0;
	}
	
	#class .lesson h3 {
		align-content: center;
		color: #ffffff;
		font-size: 37px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		border-radius: 10px;
		width: 100%;
		height: 75px;
		margin-bottom: 25px;
	}
	
	#class .lesson.start h3 {
		background: #60cfc4;
	}
	
	#class .lesson.basic h3 {
		background: #ffad5b;
	}
	
	#class .lesson.box h3 {
		background: #6dc9f2;
	}
	
	#class .lesson.jump h3 {
		background: #fa8d9e;
	}
	
	#class .lesson h3 span {
		display: inline-block;
		align-content: center;
		background: #ffffff;
		font-size: 28px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		border-radius: 7.2px;
		width: 160px;
		height: 45px;
		margin-left: 30px;
	}
	
	#class .lesson.box h3 span {
		color: #6dc9f2;
	}
	
	#class .lesson.jump h3 span {
		color: #fa8d9e;
	}
	
	#class .lesson .info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 445px;
		margin: 0 auto 25px;
	}
	
	#class .lesson .info h4 {
		color: #4d4d4d;
		font-size: 30px;
		line-height: 1em;
		font-weight: 600;
	}
	
	#class .lesson .info h4.time {
		text-align: left;
	}
	
	#class .lesson .info h4.level {
		text-align: right;
	}
	
	#class .lesson img {
		width: 100%;
		margin-bottom: 30px;
	}
	
	#class .lesson p {
		color: #4d4d4d;
		font-size: 26px;
		line-height: 40px;
		font-weight: 400;
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#class {
		position: relative;
		background: #f1f7e2;
		width: 100%;
		padding: calc(95vw / var(--sp)) 0 calc(50vw / var(--sp));
	}
	
	#class .en {
		position: absolute;
		mix-blend-mode: multiply;
		width: calc(406vw / var(--sp));
		top: calc(-44vw / var(--sp));
		left: 0;
	}
	
	#class h2 {
		width: calc(302vw / var(--sp));
		margin: 0 auto calc(30vw / var(--sp));
	}
	
	#class h2 img {
		width: 100%;
	}
	
	#class>p {
		color: #4d4d4d;
		font-size: calc(26vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin-bottom: calc(45vw / var(--sp));
	}
	
	#class .lesson {
		width: calc(630vw / var(--sp));
		margin: 0 auto calc(50vw / var(--sp));
	}
	
	#class .lesson:last-child {
		margin-bottom: 0;
	}
	
	#class .lesson h3 {
		align-content: center;
		color: #ffffff;
		font-size: calc(37vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		border-radius: calc(10vw / var(--sp));
		width: 100%;
		height: calc(75vw / var(--sp));
		margin-bottom: calc(25vw / var(--sp));
	}
	
	#class .lesson.start h3 {
		background: #60cfc4;
	}
	
	#class .lesson.basic h3 {
		background: #ffad5b;
	}
	
	#class .lesson.box h3 {
		background: #6dc9f2;
	}
	
	#class .lesson.jump h3 {
		background: #fa8d9e;
	}
	
	#class .lesson h3 span {
		display: inline-block;
		align-content: center;
		background: #ffffff;
		font-size: calc(28vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		border-radius: calc(7.2vw / var(--sp));
		width: calc(160vw / var(--sp));
		height: calc(45vw / var(--sp));
		margin-left: calc(30vw / var(--sp));
	}
	
	#class .lesson.box h3 span {
		color: #6dc9f2;
	}
	
	#class .lesson.jump h3 span {
		color: #fa8d9e;
	}
	
	#class .lesson .info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(445vw / var(--sp));
		margin: 0 auto calc(25vw / var(--sp));
	}
	
	#class .lesson .info h4 {
		color: #4d4d4d;
		font-size: calc(30vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
	}
	
	#class .lesson .info h4.time {
		text-align: left;
	}
	
	#class .lesson .info h4.level {
		text-align: right;
	}
	
	#class .lesson img {
		width: 100%;
		margin-bottom: calc(30vw / var(--sp));
	}
	
	#class .lesson p {
		color: #4d4d4d;
		font-size: calc(26vw / var(--sp));
		line-height: calc(40vw / var(--sp));
		font-weight: 400;
		text-align: center;
		width: 100%;
	}
}


/*---------------------------------
 #timetable
---------------------------------*/
@media screen and (min-width: 768px) {
	#timetable {
		background: #ffffff;
		width: 100%;
		padding: 65px 0 60px;
	}
	
	#timetable h2 {
		width: 317px;
		margin: 0 auto 20px;
	}
	
	#timetable h2 img {
		width: 100%;
	}
	
	#timetable p {
		font-size: 25px;
		line-height: 1em;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin-bottom: -30px;
	}
	
	#timetable>img {
		width: 631px;
		margin-left: 84px;
	}
}

@media screen and (max-width: 767px) {
	#timetable {
		background: #ffffff;
		width: 100%;
		padding: calc(65vw / var(--sp)) 0 calc(60vw / var(--sp));
	}
	
	#timetable h2 {
		width: calc(317vw / var(--sp));
		margin: 0 auto calc(20vw / var(--sp));
	}
	
	#timetable h2 img {
		width: 100%;
	}
	
	#timetable p {
		font-size: calc(25vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin-bottom: calc(-30vw / var(--sp));
	}
	
	#timetable>img {
		width: calc(631vw / var(--sp));
		margin-left: calc(84vw / var(--sp));
	}
}


/*---------------------------------
 #faq
---------------------------------*/
@media screen and (min-width: 768px) {
	#faq {
		background: #ffffff;
		width: 100%;
		padding-top: 60px;
	}
	
	#faq h2 {
		color: #83745f;
		font-size: 39px;
		line-height: 1em;
		letter-spacing: 0.15em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto 28px;
	}
	
	#faq ul {
		width: 100%;
		margin-bottom: 60px;
	}
	
	#faq ul li {
		border-top: 1px solid #a69b8c;
		width: 100%;
		list-style: none;
	}
	
	#faq ul li:last-child {
		border-bottom: 1px solid #a69b8c;
	}
	
	#faq ul li .question {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		padding: 40px 0 40px 130px;
		transition: 0.3s ease-in-out;
	}
	
	#faq ul li .question:hover {
		cursor: pointer;
		background: #f2f0ee;
		transition: 0.3s ease-in-out;
	}
	
	#faq ul li .question.open {
		background: #f2f0ee;
	}
	
	#faq ul li .question::before {
		position: absolute;
		display: block;
		content: "Q";
		color: #83745f;
		font-size: 52px;
		line-height: 1em;
		font-weight: 600;
		text-align: left;
		top: 28px;
		left: 65px;
	}
	
	#faq ul li .question h3 {
		color: #4d4d4d;
		font-size: 32px;
		line-height: 1em;
		font-weight: 400;
		text-align: left;
	}
	
	#faq ul li .answer {
		display: none;
		box-sizing: border-box;
		background: #ffffff;
		padding: 40px 0 40px 130px;
	}
	
	#faq ul li .answer::before {
		position: absolute;
		display: block;
		content: "A";
		color: #a9c6eb;
		font-size: 52px;
		line-height: 1em;
		font-weight: 600;
		text-align: left;
		top: 35px;
		left: 65px;
	}
	
	#faq ul li .answer p {
		position: relative;
		color: #4d4d4d;
		font-size: 29px;
		line-height: 46px;
		font-weight: 400;
		text-align: justify;
		width: 550px;
	}
	
	#faq ul li .answer p::before {
		position: absolute;
		display: block;
		content: "A";
		color: #a9c6eb;
		font-size: 52px;
		line-height: 1em;
		font-weight: 600;
		text-align: left;
		top: -5px;
		left: -60px;
	}
	
	#faq .taikenkai {
		width: 627px;
		margin: 0 auto -18px;
	}
	
	#faq .taikenkai h3 {
		position: relative;
		color: #f07a90;
		font-size: 35px;
		line-height: 47px;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto 28px;
	}
	
	#faq .taikenkai h3::before {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: 1px;
		width: 2px;
		height: 50px;
		transform: rotate(-36deg);
		transform-origin: top left;
		bottom: -10px;
		left: 0;
	}
	
	#faq .taikenkai h3::after {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: 1px;
		width: 2px;
		height: 50px;
		transform: rotate(36deg);
		transform-origin: top right;
		bottom: -10px;
		right: 0;
	}
	
	#faq .taikenkai a {
		display: block;
		width: 100%;
	}
	
	#faq .taikenkai a img {
		width: 100%;
	}
	
	#faq>img {
		position: relative;
		z-index: 99;
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#faq {
		background: #ffffff;
		width: 100%;
		padding-top: calc(60vw / var(--sp));
	}
	
	#faq h2 {
		color: #83745f;
		font-size: calc(39vw / var(--sp));
		line-height: 1em;
		letter-spacing: 0.15em;
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto calc(28vw / var(--sp));
	}
	
	#faq ul {
		width: 100%;
		margin-bottom: calc(60vw / var(--sp));
	}
	
	#faq ul li {
		border-top: calc(1vw / var(--sp)) solid #a69b8c;
		width: 100%;
		list-style: none;
	}
	
	#faq ul li:last-child {
		border-bottom: calc(1vw / var(--sp)) solid #a69b8c;
	}
	
	#faq ul li .question {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		padding: calc(40vw / var(--sp)) 0 calc(40vw / var(--sp)) calc(130vw / var(--sp));
		transition: 0.3s ease-in-out;
	}
	
	#faq ul li .question:hover {
		cursor: pointer;
		background: #f2f0ee;
		transition: 0.3s ease-in-out;
	}
	
	#faq ul li .question.open {
		background: #f2f0ee;
	}
	
	#faq ul li .question::before {
		position: absolute;
		display: block;
		content: "Q";
		color: #83745f;
		font-size: calc(52vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: left;
		top: calc(28vw / var(--sp));
		left: calc(65vw / var(--sp));
	}
	
	#faq ul li .question h3 {
		color: #4d4d4d;
		font-size: calc(32vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
		text-align: left;
	}
	
	#faq ul li .answer {
		display: none;
		box-sizing: border-box;
		background: #ffffff;
		padding: calc(40vw / var(--sp)) 0 calc(40vw / var(--sp)) calc(130vw / var(--sp));
	}
	
	#faq ul li .answer p {
		position: relative;
		color: #4d4d4d;
		font-size: calc(29vw / var(--sp));
		line-height: calc(46vw / var(--sp));
		font-weight: 400;
		text-align: justify;
		width: calc(550vw / var(--sp));
	}
	
	#faq ul li .answer p::before {
		position: absolute;
		display: block;
		content: "A";
		color: #a9c6eb;
		font-size: calc(52vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: left;
		top: calc(-5vw / var(--sp));
		left: calc(-60vw / var(--sp));
	}
	
	#faq .taikenkai {
		width: calc(627vw / var(--sp));
		margin: 0 auto calc(-18vw / var(--sp));
	}
	
	#faq .taikenkai h3 {
		position: relative;
		color: #f07a90;
		font-size: calc(35vw / var(--sp));
		line-height: calc(47vw / var(--sp));
		font-weight: 600;
		text-align: center;
		width: 100%;
		margin: 0 auto calc(28vw / var(--sp));
	}
	
	#faq .taikenkai h3::before {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: calc(1vw / var(--sp));
		width: calc(2vw / var(--sp));
		height: calc(50vw / var(--sp));
		transform: rotate(-36deg);
		transform-origin: top left;
		bottom: calc(-10vw / var(--sp));
		left: 0;
	}
	
	#faq .taikenkai h3::after {
		position: absolute;
		display: block;
		content: "";
		background: #f07a90;
		border-radius: calc(1vw / var(--sp));
		width: calc(2vw / var(--sp));
		height: calc(50vw / var(--sp));
		transform: rotate(36deg);
		transform-origin: top right;
		bottom: calc(-10vw / var(--sp));
		right: 0;
	}
	
	#faq .taikenkai a {
		display: block;
		width: 100%;
	}
	
	#faq .taikenkai a img {
		width: 100%;
	}
	
	#faq>img {
		position: relative;
		z-index: 99;
		width: 100%;
	}
}


/*---------------------------------
 footer
---------------------------------*/
@media screen and (min-width: 768px) {
	footer {
		background: #a69b8c;
		width: 100%;
		padding: 70px 0 55px;
	}
	
	footer h2 {
		width: 244px;
		margin: 0 auto 35px;
	}
	
	footer h2 img {
		width: 100%;
	}
	
	footer a {
		display: block;
		color: #ffffff;
		font-size: 22px;
		line-height: 1em;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		width: fit-content;
		margin: 0 auto 95px;
	}
	
	footer small {
		display: block;
		color: #ffffff;
		font-size: 20px;
		line-height: 1em;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	footer {
		background: #a69b8c;
		width: 100%;
		padding: calc(70vw / var(--sp)) 0 calc(55vw / var(--sp));
	}
	
	footer h2 {
		width: calc(244vw / var(--sp));
		margin: 0 auto calc(35vw / var(--sp));
	}
	
	footer h2 img {
		width: 100%;
	}
	
	footer a {
		display: block;
		color: #ffffff;
		font-size: calc(22vw / var(--sp));
		line-height: 1em;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		width: fit-content;
		margin: 0 auto calc(95vw / var(--sp));
	}
	
	footer small {
		display: block;
		color: #ffffff;
		font-size: calc(20vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
}