@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho:wght@400;900&display=swap');
/* CSS Document */
html {
	scroll-behavior: smooth;
}
body {
	font-size: 16px;
	line-height: 2;
	font-family: "Zen Kaku Gothic New", sans-serif;
	margin: 0;
	overflow-x: hidden;
}
@media screen and (max-width: 768px) {
	body{
		line-height: 1.5;
	}
}
/* =======================================
    common
======================================= */
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}
a{
	transition: all 0.3s ease;
}
.mincho{
	font-family: "Zen Old Mincho", serif;
}
h2{
	font-family: "Zen Old Mincho", serif;
	font-size: 2.5rem;
	font-weight: normal;
	line-height: 2;
	text-align: center;
	margin: 2rem 0 4rem;
}
.pc,
.br-pc{
	display: block;
}
.sp,
.br-sp,
.br960{
	display: none;
}
.marker{
	background:linear-gradient(transparent 60%, #fff231 60%);
}
@media screen and (max-width: 960px) {
	.br960{
		display: block;
	}
}
@media screen and (max-width: 768px) {
	h2{
		font-size: 1.75rem;
		margin-bottom: 2rem;
	}
	.pc,
	.br-pc{
		display: none;
	}
	.sp,
	.br-sp{
		display: block;
	}
}
/* =======================================
    fadein
======================================= */

.advanced {
  opacity: 0;
  transform: translateY(13%);
  transition:
    opacity 1.8s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.advanced.isActive {
  opacity: 1;
  transform: translateY(0);
}

/* =======================================
    drawer
======================================= */
.contents {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	overflow: hidden;
}

/* :::::: toggle button :::::: */
#drawer {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
}
.open {
	z-index: 1002;
	top: 8px;
	right: 8px;
	width: 48px;
	height: 48px;
	border-radius: 48px;
	background: #a68952;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1001;
	inset: 0;
	pointer-events: none;
	transition: background .6s;
}
#drawer:checked + .open {
	transform: translateX(-280px);
}
#drawer:checked + .open span {
	transform: scaleX(0);
}
#drawer:checked + .open::before {
	transform: rotate(135deg) scaleX(1.2);
}
#drawer:checked + .open::after {
	transform: rotate(-135deg) scaleX(1.2);
}
#drawer:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 1001;
	position: fixed;
	overflow: auto;
	top: 0;
	right: 0;
	width: 280px;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(0,0,0,.8);
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	line-height: 1.4;
}
.menu li:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
	display: block;
	padding: 1em 2em;
	color: white;
	text-decoration: inherit;
	transition: background .6s;
}
.menu a:hover {
	background: black;
}
.header-phone{
	font-size: 1.25rem;
	text-align: center;
	color: #a68952;
	border: solid 1px #a68952;
	border-radius: 20rem;
	margin-top: 1rem;
	padding: .75rem !important;
}
.header-phone span{
	display: inline-block;
	font-size: 1rem;
	margin-right: .5rem;
}
#drawer:checked ~ .menu {
	transform: none;
}
/* :::::: nav :::::: */
#global-nav{
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 1rem;
	z-index: 1000;
}
.header-inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}
.logo{
	width: 240px;
}
header nav {
	margin: 0;
	padding: 0;
}
header nav ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	white-space: nowrap;
}
.btn-header{
	margin-left: 1rem;
}
header nav li a {
	position: relative;
	display: block;
	color: #fff;
	padding: 1rem 1.25rem;
	text-decoration: inherit;
	transition: background .3s;
}
header nav li.btn-header a{
	line-height: 1.4;
	background-image: linear-gradient(90deg, #967732, #97804d);
}
header nav li a:hover{
	color: #a68952;
}
header nav li.btn-header a:hover{
	color: #fff;
	background-image: linear-gradient(90deg, #b6913e, #b2975b);
}

/* :::::: change mechanism :::::: */
header nav {
	overflow: hidden;
	transition: height .6s cubic-bezier(0.215, 0.61, 0.355, 1), margin .6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .6s;
}
@media screen and (min-width: 961px) {
	.open {
		transform: translateY(calc(-100% - 20px));
	}
	header nav {
		transition-delay: 0s, 0s, .4s;
	}
}
@media screen and (max-width: 960px) {
	header nav {
		margin-top: 0;
		display: none;
		pointer-events: none;
		transition-delay: .4s, .4s, 0s;
	}
}
@media screen and (max-width: 768px) {
	.logo{
		width: 180px;
	}
}
/* =======================================
    header PC 固定
======================================= */
#global-nav.is-scrolled{
	background-color: rgba(0, 0, 0, .8);
}
/* =======================================
    main
======================================= */
.mainview{
	position: relative;
	width: 100%;
	color: #fff;
	background: url(../img/mainview.webp) center center / cover no-repeat;
	padding: 3rem 1rem 3rem 1rem;
}
.main01,
.main02,
.main03{
	text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 4px 10px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(0, 0, 0, 0.7);
}
.main01{
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	padding: 14rem 0 5rem;
}
.main-bottom{
	position: relative;
	max-width: 960px;
	margin: 0 auto;
}
.main02{
	font-size: 1.25rem;
}
.main03{
	font-size: 2.75rem;
	line-height: 1.2;
	letter-spacing: -0.25rem;
	margin-bottom: 1.75rem;
}
.main-btn{
	display: flex;
	justify-content: space-between;
	max-width: 640px;
}
.main-btn a{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	width: 48%;
	font-size: 1.25rem;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	color: #fff;
	background-image: linear-gradient(90deg, #967732, #97804d);
	padding: 1rem;
}
.main-btn a:last-child{
	color: #967732;
	background-image: none;
	background-color: #fff;
}
.main-btn a:hover{
	background-image: linear-gradient(90deg, #b6913e, #b2975b);
}
.main-btn a:last-child:hover{
	background-image: none;
	background-color: #ffeecb;
}
.main-btn a::after{
	content: "";
	display: block;
	width: 12px;
	height: 14px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background-color: #a00000;
}
@media screen and (max-width: 768px) {
	.mainview{
	}
	.main01{
		font-size: 2rem;
		padding:5.5rem 0 3rem;
	}
	.main02{
		text-align: right;
		font-size: 1.25rem;
		color: #fddc36;
	}
	.main03{
		font-size: 2.5rem;
		text-align: right;
		margin-top: 1rem;
		margin-bottom: 2rem;
	}
	.main-btn{
		flex-direction: column;
		gap: 1rem;
	}
	.main-btn a{
		width: 100%;
	}
}
/* =======================================
    東京藝大 geidai
======================================= */
.wrap-geidai{
	color: #fff;
	background-color: #534741;
}
.geidai{
	position: relative;
	display: flex;
	gap: 3rem;
	max-width: 1024px;
	margin: 0 auto;
	padding: 3rem 1rem 2rem;
}
.geidai-text{
	position: relative;
	z-index: 100;
}
.geidai h2{
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
}
.circle{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 12rem;
	height: 12rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: #6d5d43;
	background-color: #fff;
	border-radius: 50%;
}
.circle span{
	font-size: 2rem;
}
.geidai-name{
	font-size: 1.5rem;
	text-align: right;
	margin-top: 1rem;
}
.geidai img{
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 300px;
}
@media screen and (max-width: 960px) {
	.geidai{
		flex-direction: column;
		max-width: 768px;
		gap: 2rem;
	}
	.geidai h2{
		margin-top: 0;
		margin-bottom: 2rem;
	}
	.geidai-name{
		text-align: left;
	}
}
@media screen and (max-width: 640px) {
	.geidai{
		gap: 1rem;
		padding: 2rem 1rem;
	}
	.circle{
		width: 10rem;
		height: 10rem;
	}
	.geidai h2{
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}
	.geidai img{
		right: -3rem;
		max-width: 280px;
	}
	.geidai-name{
		font-size: 1.25rem;
		margin-top: .5rem;
	}
}
/* =======================================
    大人のための完全個別ピアノレッスン about
======================================= */
.bg-line{
	background: url(../img/bg-line.webp) left top repeat-y;
}
.wrap-about{
	padding: 3rem 1rem 0;
}
.wrap-about h2{
	font-size: 1.25rem;
}
.wrap-about h2 span{
	font-size: 1.75rem;
}
.about{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
	max-width: 840px;
	margin: 0 auto;
}
.about p{
	flex: 1;
	max-width: 24rem;
}
.about img{
	width: 35%;
	box-shadow: 15px -15px #eeeeee;
}
@media screen and (max-width: 768px) {
	.bg-line{
		background-size: 120px;
	}
	.wrap-about{
		padding: 2rem 1rem;
	}
	.wrap-about h2{
		font-size: 1.25rem;
		margin-bottom: 2rem;
	}
	.wrap-about h2 span{
		font-size: 1.5rem;
	}
	.about{
		flex-direction: column-reverse;
		gap: 1rem;
	}
}
/* =======================================
    このような方におすすめのレッスンです recommend
======================================= */
.recommend{
	background: url(../img/nanika.webp) left top / 400px no-repeat;
	padding: 8rem 1rem 3rem;
}
.recommend h2{
	font-size: 2rem;
	text-align: center;
}
.wrap-rec{
	display: flex;
	justify-content: space-between;
	max-width: 960px;
	margin: 0 auto;
}
.rec{
	max-width: 960px;
	border: solid 3px #967732;
	margin: 0 auto 5rem;
	padding: 2rem 1rem 1rem;
}
.wrap-rec .rec{
	width: 49%;
}
.rec h3{
	font-size: 1.5rem;
	text-align: center;
	margin-top: -4rem;
	margin-bottom: 1rem;
}
.wrap-rec h3{
	font-size: 1.25rem;
	margin: -3.5rem -1rem 1rem -1rem;
}
.rec h3 span{
	display: inline-block;
	background-color: #fff;
	padding: .25rem 1rem;
}
.rec02{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}
.rec02 p{
	width: calc(50% - 1rem);
}
.rec p{
	position: relative;
	font-size: 1.125rem;
	font-weight: 700;
	text-align: left;
	margin-bottom: 1rem;
	padding-left: 2.5rem;
}
.rec p::before{
	content: "";
	position: absolute;
	top: .25rem;
	left: 0;
	display: block;
	width: 2rem;
	height: 2rem;
	background: url(../img/icon-check.svg) center center / contain no-repeat;
}
@media screen and (max-width: 960px) {
	.wrap-rec h3{
		font-size: 1.125rem;
	}
	.rec p{
		font-size: 1rem;
		padding-left: 2rem;
	}
	.rec p::before{
		width: 1.5rem;
		height: 1.5rem;
	}
}
@media screen and (max-width: 768px) {
	.recommend{
		background-size: 200px;
		padding: 4rem 1rem 2rem;
	}
	.recommend h2{
		font-size: 1.5rem;
		line-height: 1.6;
		margin-bottom: 3rem;
	}
	.wrap-rec{
		flex-direction: column;
	}
	.rec{
		margin-bottom: 3rem;
	}
	.wrap-rec .rec{
		width: 100%;
	}
	.rec h3{
		font-size: 1.25rem;
	}
	.wrap-rec h3{
		font-size: 1.125rem;
	}
	.rec h3 span{
		padding: .25rem .5rem;
	}
	.rec02{
		flex-direction: column;
		gap: 0;
	}
	.rec p{
		line-height: 1.4;
	}
	.rec02 p{
		width: 100%;
	}
	.rec p::before{
		top: 0;
	}
}
/* =======================================
    ただ弾くのではなく、音を育てる sodateru
======================================= */
.sodateru{
	text-align: center;
	background: url(../img/bg-sodateru.webp) center center / cover no-repeat;
	padding: 5rem 1rem;
}
.sodateru h2{
	color: #4c130a;
}
.sodateru h2 + p{
	font-size: 1.375rem;
	margin-bottom: 4rem;
}
.sodate{
	font-weight: 700;
	line-height: 2.4;
}
@media screen and (max-width: 768px) {
	.sodateru{
		padding: 3rem 1rem;
	}
	.sodateru h2{
		line-height: 1.5;
		margin-bottom: 2rem;
	}
	.sodateru h2 + p{
		font-size: 1.25rem;
		text-align: left;
		margin-bottom: 2rem;
	}
	.sodateru h2 + p br{
		display: none;
	}
	.sodate{
		font-weight: normal;
		line-height: 2;
		text-align: left;
	}
}
/* =======================================
    レッスンの特徴 feature
======================================= */
#feature{
	padding: 3rem 1rem;
}
#feature h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	background-color: #591103;
	margin: .5rem auto 0;
}
.fea{
	display: flex;
	max-width: 960px;
	border: solid 1px #967732;
	margin: 0 auto 2rem;
}
.fea img{
	width: 33%;
	object-fit: cover;
}
.fea-text{
	flex: 1;
	padding: 2rem;
}
.fea h3{
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.fea p{
	line-height: 1.8;
}
@media screen and (max-width: 768px) {
	#feature{
		padding: 2rem 1rem;
	}
	#feature h2{
		margin-bottom: 2rem;
	}
	.fea{
		flex-direction: column;
	}
	.fea img{
		width: 100%;
	}
	.fea-text{
		padding: 1rem;
	}
	.fea h3{
		font-size: 1.25rem;
		margin-bottom: .5rem;
	}
}
/* =======================================
    お悩みや目的に合わせて、
レッスンの内容を組み立てます。 mokuteki
======================================= */
.mokuteki{
	text-align: center;
	background-color: #4b4036;
	padding: 5rem 1rem;
}
.mokuteki h2{
	font-size: 2rem;
	line-height: 1.5;
	color: #fff;
}
.mokuteki ul{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: 960px;
	list-style: none;
	margin: 0 auto;
}
.mokuteki li{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(20% - .8rem);
	font-weight: 700;
	line-height: 1.5;
	background-image: linear-gradient(90deg, #f0eeeb, #ffffff 75%, #bebca9);
	border: solid 1px #daab17;
	padding: 2rem 1rem;
}
@media screen and (max-width: 1024px) {
	.mokuteki ul{
		max-width: 640px;
	}
	.mokuteki li{
		width: calc(50% - .5rem);
		padding: 1rem;
	}
}
@media screen and (max-width: 768px) {
	.mokuteki{
		padding: 1rem 1rem 3rem;
	}
	.mokuteki h2{
		font-size: 1.25rem;
		margin-bottom: 2rem;
	}
}
@media screen and (max-width: 480px) {
	.mokuteki ul{
		gap: .5rem;
	}
	.mokuteki li{
		width: calc(50% - .25rem);
		padding: 1rem .25rem;
	}
}
/* =======================================
    ご希望に合わせて選べるレッスン形式 keisiki
======================================= */
.keisiki{
	padding: 3rem 1rem;
}
.keisiki h2{
	font-size: 1.75rem;
}
.keisiki h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	background-color: #591103;
	margin: 0.5rem auto 0;
}
.kei{
	display: flex;
	max-width: 960px;
	margin: 0 auto 3rem;
}
.kei h3{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20rem;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.5;
	text-align: center;
	background-image: linear-gradient(90deg, #cecab6, #fffffc 75%);
}
.kei-text{
	flex: 1;
	border-left: solid 2px #705800;
	padding: 2rem;
}
.kei-note{
	font-size: .875rem;
	margin-top: 1rem;
}
@media screen and (max-width: 768px) {
	.keisiki{
		padding-top: 1rem;
	}
	.keisiki h2{
		font-size: 1.5rem;
		line-height: 1.5;
	}
	.kei{
		flex-direction: column;
		margin-bottom: 1rem;
	}
	.kei h3{
		width: 100%;
		padding: 1rem;
	}
	.kei-text{
		border-top: solid 2px #705800;
		border-left: none;
		padding: .75rem .5rem;
	}
}
/* =======================================
    レッスン料金 price
======================================= */
#price{
	max-width: 960px;
	text-align: center;
	background-color: #cec7b3;
	margin: 0 auto 2rem;
	padding: 3rem;
}
#price h2 + p{
	margin-bottom: 2rem;
}
.pri-table{
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	border-bottom: solid 1px #967732;
	margin-bottom: 1rem;
}
.pri-table dt,
.pri-table dd{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 50%;
	font-size: 1.25rem;
	line-height: 1.4;
	border-top: solid 1px #967732;
	border-right: solid 1px #967732;
	padding: 1.5rem;
}
.pri-table dt{
	font-weight: normal;
	border-left: solid 1px #967732;
}
.price-note{
	font-size: .875rem;
	text-align: left;
}
@media screen and (max-width: 960px) {
	#price{
		padding: 2rem 1rem;
	}
}
@media screen and (max-width: 768px) {
	#price{
		padding-top: 1rem;
	}
	.pri-table dt, 
	.pri-table dd{
		font-size: 1rem;
		padding: 1rem .5rem;
	}
	.pri-table dt span{
		letter-spacing: -2px;
	}
}
/* =======================================
    ご希望や状況に応じて、
体験レッスンをご案内いたします。 guide
======================================= */
.guide{
	background-image: radial-gradient(#736357, #534741);
	padding: 3rem 1rem;
}
.guide h2{
	font-size: 2rem;
	line-height: 1.4;
	color: #fff;
}
.guide h2 + p{
	text-align: center;
	color: #fff;
	margin-bottom: 3rem;
}
.free{
	max-width: 960px;
	text-align: center;
	background-color: #fff;
	border-radius: 2rem;
	margin: 0 auto;
	padding: 2rem;
}
.free h3{
	font-size: 1.75rem;
	font-weight: normal;
	margin-bottom: 1rem;
}
.free h3 + p{
	font-size: 1.125rem;
	margin-bottom: 1rem;
}
.free-copy{
	display: inline-block;
	font-size: 1.5rem;
	text-align: left;
	padding: 2rem 0;
}
.free-copy p{
	position: relative;
	font-weight: 700;
	padding-left: 2rem;
}
.free-copy p::before{
	content: "";
	position: absolute;
	top: .5rem;
	left: 0;
	display: block;
	width: 2rem;
	height: 2rem;
	background: url(../img/icon-check.svg) center center / contain no-repeat;
}
.free-copy p:last-child{
	font-weight: normal;
	padding-left: 0;
	padding-top: 1rem;
}
.free-copy p:last-child::before{
	content: none;
}
.free .main-btn{
	max-width: 768px;
	margin: 0 auto;
}
.free .main-btn a{
	font-size: 1.25rem;
	line-height: 1.4;
	padding: 1rem .5rem;
}
.free .main-btn a:last-child{
	border: solid 1px #967732;
}
@media screen and (max-width: 768px) {
	.guide{
		padding-top: 1rem;
	}
	.guide h2{
		font-size: 1.5rem;
	}
	.guide h2 + p{
		text-align: left;
	}
	.free{
		text-align: left;
		border-radius: 1rem;
		padding: 1rem;
	}
	.free h3{
		font-size: 1.5rem;
		font-weight: 700;
		text-align: center;
	}
	.free h3 + p{
		font-size: 1rem;
	}
	.free-copy{
		font-size: 1.125rem;
		padding: 1rem 0;
	}
	.free-copy p{
		padding-left: 1.5rem;
	}
	.free-copy p::before{
		top: .125rem;
		width: 1.5rem;
		height: 1.5rem;
	}
}
/* =======================================
    レッスン開始までの流れ flow
======================================= */
#flow{
	padding: 3rem 1rem;
}
#flow ol{
	max-width: 960px;
	list-style: none;
	margin: 0 auto;
}
#flow li{
	margin-bottom: 2rem;
}
#flow section{
	display: flex;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
}
#flow h3{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 15rem;
	font-weight: normal;
	text-align: center;
	color: #fff;
	background-image: linear-gradient(90deg, #967732, #97804d);
	padding: 2rem 1rem;
}
#flow p{
	flex: 1;
	display: flex;
	align-items: center;
	padding: 2rem;
}
@media screen and (max-width: 768px) {
	#flow{
		padding-top: 1rem;
	}
	#flow section{
		flex-direction: column;
	}
	#flow h3{
		width: 100%;
		line-height: 1.5;
		padding: .75rem;
	}
	#flow p{
		padding: 1rem;
	}
}
/* =======================================
    講師プロフィール profile
======================================= */
#profile{
	background-image: linear-gradient(300deg, #736357 10% 90%);
	padding: 3rem 0 0;
}
#profile h2{
	font-size: 1.75rem;
	text-align: left;
	text-shadow: 0 0 5px black;
	color: #fff;
	background: url(../img/title-profile.webp) left center / contain no-repeat;
	margin-bottom: -1.25rem;
	padding: 3rem 1rem 4rem;
}
.pro{
	position: relative;
	max-width: 960px;
	color: #fff;
	margin: 0 auto;
	padding: 0 23rem 4rem 1rem;
}
.pro01{
	font-size: 1.25rem;
}
.pro02{
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}
.pro03{
	margin-bottom: 1rem;
}
.pro img{
	position: absolute;
	bottom: -5rem;
	right: -3rem;
	width: 340px;
	z-index: 1;
}
.youtube{
	position: relative;
	max-width: 960px;
	background-color: #231815;
	margin: 0 auto 1rem;
	padding: 1rem 2rem;
	z-index: 10;
}
.youtube-inner{
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe{
	width: 100%;
	height: 100%;
}
.pro-img{
	display: block;
	width: 100%;
	background-color: #231815;
	padding: 1rem 0;
}
@media screen and (max-width: 960px) {
	.pro{
		padding: 0 19rem 3rem 1rem;
	}
}
@media screen and (max-width: 768px) {
	#profile{
		padding: .25rem 0 0;
	}
	#profile h2{
		font-size: 1.5rem;
		padding: 2rem 1rem 3rem;
	}
	.pro{
		padding-right: 1rem;
	}
	.pro02 {
		font-size: 2rem;
	}
	.pro04{
		position: relative;
		z-index: 10;
	}
	.youtube{
		padding: 1rem;
	}
	.pro img{
		width: 290px;
	}
}
@media screen and (max-width: 480px) {
	#profile h2{
		margin-bottom: -2.5rem;
	}
	.pro{
		padding-bottom: 2rem;
	}
	.pro01{
		font-size: 1rem;
	}
	.pro02{
		font-size: 1.5rem;
	}
	.pro03{
		font-size: .875rem;
		margin-bottom: 2rem;
	}
	.pro04{
		line-height: 1.5;
	}
	.pro img{
		bottom: inherit;
		top: -3rem;
		right: -4rem;
		width: 240px;
	}
}
/* =======================================
    よくあるご質問 qa
======================================= */
#qa{
	background-color: #cec7b3;
	padding: 3rem 1rem;
}
details{
	max-width: 960px;
	background-color: #fff;
	margin: 0 auto 2rem;
}
summary {
  display: grid;  /* 初期値の display: list-item 以外を指定したので、デフォルトの三角形アイコンは非表示になる */
  grid-template-columns:  1fr 24px;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  padding: 16px 24px;
  font-weight: bold;
  color: #231815;
  /* Safariで表示されるデフォルトの三角形アイコンを消します */
  &::-webkit-details-marker {
    display: none;
  }
}
/* --------アイコンを作ります-------- */
.icon {
  display: block;
  position: relative;
  width: 24px;
  transform-origin: center 43%;
  transition: transform 0.4s;
  /* アイコンのバーのスタイル */
  &::before, &::after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 3px;
    background-color: #231815;
  }
  &::before {
    left: 0;
    transform: rotate(45deg);
  }
  &::after {
    right: 0;
    transform: rotate(-45deg);
  }
}
/* アコーディオンが開いた時のスタイル */
details[open] .icon {
  transform: rotate(180deg);
}
/* summaryタグの疑似要素でアイコンを作るパターン
（注意）疑似要素のトランジションはSafari 17.4以前でうまくいかない */
.pseudoElement {
  summary::after {
    content: "";
    display: block;
    width: 25px;
    height: 16px;
    margin-left: 6px;
    background-image: url("icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center 43%;
    transition: transform 0.4s;
  }
  details[open] summary::after {
    transform: rotate(180deg);
  }
}

/* --------アコーディオンの中身のスタイル-------- */
.content {
  background-color: #fbf7f3;
  padding: 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 768px) {
	#qa{
		padding-top: 1rem;
	}
	summary{
		grid-template-columns: 1fr 15px;
		padding: 10px 15px;
	}
	.icon{
		width: 16px;
	}
	.icon::before,
	.icon::after{
		width: 10px;
		height: 2px;
	}
	.content{
		padding: 10px 15px;
	}
}
/* =======================================
   cta
======================================= */
.cta{
	color: #fff;
	background-image: radial-gradient(#736357, #534741);
	padding: 3rem 1rem;
}
.cta h2 + p{
	text-align: center;
	margin-bottom: 2rem;
}
.cta01{
	max-width: 768px;
	margin: 0 auto 2rem;
}
.cta .main-btn{
	max-width: 768px;
	margin: 0 auto;
}
.cta .main-btn a{
	font-size: 1.25rem;
}
.cta .main-btn a:last-child{
	color: #fff;
	background-color: transparent;
	border: solid 1px #fff;
}
.cta .main-btn a:last-child:hover{
	background-color: rgba(255, 255, 255, .2);
}
@media screen and (max-width: 768px) {
	.cta{
		padding-top: 1rem;
	}
	.cta h2{
		font-size: 1.375rem;
		margin-bottom: 1rem;
	}
	.cta h2 + p{
		margin-bottom: 1rem;
	}
}
/* =======================================
    スタジオ案内　studio
======================================= */
#studio{
	background-color: #cec7b3;
	padding: 1rem 1rem 3rem;
}
.access{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	max-width: 960px;
	margin: 0 auto 2rem;
}
.access img{
	width: 50%;
}
.acc-text{
	flex: 1;
}
address{
	font-style: initial;
}
.access dl{
	margin: 2rem 0 0;
}
.access dd{
	margin-bottom: 1rem;
}
#studio iframe{
	display: block;
	max-width: 960px;
	margin: 0 auto 2rem;
}
@media screen and (max-width: 768px) {
	.access{
		flex-direction: column;
		gap: 1rem;
	}
	.access img{
		width: 100%;
	}
	.acc-text{
		width: 100%;
	}
}
/* =======================================
    無料オンライン相談　contact
======================================= */
#contact{
	background-color: #f5f5f5;
	padding: 3rem 1rem;
}
#contact h2{
	margin-bottom: 2rem;
}
#contact h2 + p{
	text-align: center;
}
#contact .btn-default{
	background-color: #a56515;
	border-color: #a56515;
}
#contact .btn-default:hover{
	background-color: #c47d25;
	border-color: #c47d25;
}
/* =======================================
    footer
======================================= */
footer{
	color: #fff;
	background-color: #231815;
	text-align: center;
	padding: 3rem 0 0;
}
.fixed-btn{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	z-index: 1000;
}
.fixed-btn a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	line-height: 1.3;
	text-decoration: none;
	color: #fff;
	background-image: linear-gradient(90deg, #967732, #97804d);
	padding: .625rem 0;
}
.fixed-btn a:last-child{
	color: #967732;
	background-image: none;
	background-color: #fff;
}
.logo-footer{
	display: block;
	width: 200px;
	margin: 0 auto 1rem;
}
.footer-name{
	margin-bottom: 1rem;
}
.footer-link{
	margin-bottom: 1rem;
}
.footer-link a{
	text-decoration: none;
	color: #fff;
}
.footer-link a:hover{
	text-decoration: underline;
}
.sns{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	list-style: none;
}
.sns li{
	width: 2rem;
}
.pagetop{
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	background-color: #000;
	z-index: 1000;
}
.arrow {
  position: relative;
  display: inline-block;
  width: 16.1px;
  height: 9.1px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 12px;
  border-radius: 9999px;
  background-color: #a68952;
  transform-origin: 50% 1px;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}
.copyright{
	text-align: center;
	background-color: #000;
	margin-top: 3rem;
	padding: .5rem;
}
@media screen and (max-width: 768px) {
	.fixed-btn{
		display: flex;
	}
	.pagetop{
		right: 1rem;
		bottom: 4rem;
	}
}