@charset "utf-8";
/*----------------------------------------------------
 top
----------------------------------------------------*/
/* --- topContents --- */
.topContents {
	width: 100%;
	padding: 40px 24px 48px;
	font-size: 0;
}

.topContents .about {
	display: inline-block;
	width: 43%;
	font-size: 14px;
	text-align: center;
	vertical-align: top;
}

.topContents .about h2.logo {
	width: 90%;
	margin: 0 auto 8px;
}

.topContents .about h2.logo img {
	width: 100%;
}

.topContents .about .title {
	padding-bottom: 8px;
	font-size: 18px;
	font-weight: 600;
	color: #47609b;
}

.topContents .about .listWrap {
	display: inline-block;
	padding-bottom: 8px;
	margin: 0 auto;
	text-align: left;
}

.topContents .about .comment {
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 16px;
}

.topContents .about .contact p {
	padding-bottom: 8px;
	font-size: 20px;
	font-weight: 500;
	color: #eb9233;
}

.topContents .about .contact button {
	width: 160px;
	padding: 4px;
}

.topContents .imagePicture {
	display: inline-block;
	width: 57%;
	padding: 0 0 0 16px;
	border-radius: 16px;
}

.topContents .imagePicture img {
	width: 100%;
}

.topContents br.sp {
	display: none;
}

@media (max-width: 768px) {

	.topContents {
		padding: 24px 16px 32px;
	}

	.topContents .about {
		display: block;
		width: 100%;
	}

	.topContents .imagePicture {
		display: block;
		width: 100%;
		padding: 24px 0 0 0;
	}

	.topContents br.sp {
		display: block;
	}

}


/* --- お知らせ --- */
section.info .infoWrap {
	width: 100%;
	padding: 8px;
	background-color: #FFF;
	border-radius: 12px;
}

section.info .infoWrap .scrollWrap {
	width: 100%;
	height: 200px;
	padding: 8px;
	overflow-y :auto;
}

section.info .infoWrap .infoData {
	padding: 0 0 8px;
	font-size: 0;
}

section.info .infoWrap .infoData .date {
	display: inline-block;
	width: 88px;
	font-size: 14px;
	vertical-align: top;
}

section.info .infoWrap .infoData .infoContent {
	display: inline-block;
	width: calc(100% - 88px);
	font-size: 14px;
}


/* --- 練習内容 --- */
section.practiceContent {}


/* --- 開催場所・開催日時 --- */
section.locationAndDate h4 {
	font-size: 16px;
	padding-bottom: 8px;
}

section.locationAndDate h5 {
	padding-bottom: 4px;
}

section.locationAndDate .textWrap {
	padding: 0 0 16px 16px;
}


/* --- 開催スケジュール --- */
section.schedule .calendarContainer {
	position: relative;
	padding-bottom: 60vh;
	margin-top: 16px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

section.schedule .calendarContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

section.schedule .scheduleNotes {
	padding: 8px 0;
}

/* --- 参加者募集 --- */
section.recruitment .title {
	padding: 0 0 16px;
	font-size: 18px;
	
}

section.recruitment h4 {
	font-size: 16px;
	padding-bottom: 8px;
}

section.recruitment .textWrap {
	padding: 0 0 16px 16px;
}

section.recruitment .textWrap .notes {
	padding: 16px 0 0;
}

section.recruitment .textWrap .mail {
	padding: 8px;
}

section.recruitment .textWrap .QRcode {
	width: 240px;
	margin-top: 8px;
	text-align: center;
}

section.recruitment .textWrap .QRcode img{
	width: 100%;
}

section.recruitment .textWrap a.lineGroupLink {
	font-size: 16px;
	color: #07b53a;
}

section.recruitment .textWrap .lineGroupLink i {
	margin-left: 4px;
	font-size: 14px;
	color: #4da0c1;
}

@media (max-width: 768px) {

	section.recruitment .textWrap .QRcode {
		margin: 16px auto 0;
	}

}

/* --- 動画 --- */
section.movie .wrap {
	width: 100%;
	padding: 0 0 24px;
}

section.movie .wrap.youtube img {
	width: 144px;
}

section.movie .wrap.googlePhoto img {
	width: 180px;
}

section.movie .wrap .title {
	padding: 4px 0;
	font-size: 16px;
	font-weight: 600;
}

section.movie .wrap .title i {
	margin-left: 4px;
	font-size: 14px;
	color: #4da0c1;
}

section.movie .wrap .comment {
	font-size: 13px;
	color: #666;
}


/* --- オリジナル商品 --- */
section.originalproduct .wrap {
	padding: 0 0 40px;
}

section.originalproduct .wrap label {
	font-size: 16px;
}

section.originalproduct .wrap.tshirt {
	width: 480px;
}
section.originalproduct .wrap.tshirt p {
	color: #666;
}

section.originalproduct .wrap.towe {
	width: 360px;
}

section.originalproduct .wrap img {
 width: 100%;
}

@media (max-width: 768px) {

	section.originalproduct .wrap.tshirt {
		width: 100%
	}

	section.originalproduct .wrap.towe {
		width: 100%;
	}

}