@charset "UTF-8";

/* ==================================================
ルーツは津軽。
================================================== */
.about-roots-section01 {
	margin-bottom: 55px;
}

.about-roots-section01 .roots-title {
	margin: 0 0 20px;
}

.about-roots-section01 .roots-content {
	display: flex;
	flex-wrap: wrao;
	justify-content: space-between;
}

.about-roots-section01 .roots-texts {
	width: 580px;
}

.about-roots-section01 .roots-thumb {
	width: 657px;
	margin-top: -50px;
}

@media screen and (max-width: 768px) {
	.about-roots-section01 .roots-content {
		display: block;
	}

	.about-roots-section01 .roots-texts,
	.about-roots-section01 .roots-thumb {
		width: auto;
		margin: 0 0 16px;
	}

	.about-roots-section01 .roots-thumb img {
		max-width: 80%;
		margin: 0 auto;
		display: block;
	}
}

/* ==================================================
その土地土地に根付いた
================================================== */
.about-roots-section02 {
	display: flex;
	justify-content: space-between;
}

.about-roots-section02 .texts-column {
	width: 570px;
	margin-right: 25px;
	order: 2;
}

.about-roots-section02 .thumb-column {
	width: 560px;
	margin-top: -185px;
	order: 1;
}

.about-roots-section02 .roots-title {
	margin: 0 0 30px;
	line-height: 1.6;
	color: #365f68;
	font-size: 30px;
	font-family: "Hannari", "Yu Mincho", "YuMincho", "NotoSerifCJKjp", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}

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

	.about-roots-section02 .texts-column,
	.about-roots-section02 .thumb-column {
		width: auto;
		margin: 0 0 16px;
	}

	.about-roots-section02 .thumb-column img {
		max-width: 80%;
		margin: 0 auto;
		display: block;
	}
}

/* ==================================================
動画
================================================== */
.about-movie-area {
	padding: 40px 0 150px;
	background: url(../images/about/movie_bg.png) bottom repeat-x;
}

.about-movie-area .area-inner {
	width: 854px;
}

@media screen and (max-width: 768px) {
	.about-movie-area {
		padding: 16px 0 40px;
	}
}

/* セクション
-------------------------------------------------- */
.about-movie-section .movie-title {
	margin: 0 0 47px;
	text-align: center;
}

.about-movie-section .movie-content {
	text-align: center;
	font-size: 17px;
}

.about-movie-section .movie-wrap {
	margin: 0 0 75px;
	padding: 56.2% 0 0;
	position: relative;
}

.about-movie-section .movie-wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.about-movie-section .movie-title {
		margin: 0 0 20px;
	}

	.about-movie-section .movie-title img {
		max-width: 40%;
	}

	.about-movie-section .movie-content {
		text-align: left;
		font-size: inherit;
	}

	.about-movie-section .movie-wrap {
		margin: 0 0 2em;
	}
}

/* ==================================================
当会のルーツ
================================================== */
.about-origin-area {
	padding: 115px 0 185px;
	background: url(../images/about/origin_bg.jpg);
}

@media screen and (max-width: 768px) {
	.about-origin-area {
		padding: 32px 8px;
	}
}

/* セクション
-------------------------------------------------- */
.about-origin-section .origin-title {
	margin: 0 0 75px;
	line-height: 1.4;
	color: #365f68;
	font-size: 45px;
	text-align: center;

	text-shadow:
		4px 0 4px rgba(255,255,255,.3),
		-4px 0 4px rgba(255,255,255,.3),
		0 4px 4px rgba(255,255,255,.3),
		0 -4px 4px rgba(255,255,255,.3),

		4px 4px 4px rgba(255,255,255,.3),
		-4px 4px 4px rgba(255,255,255,.3),
		-4px -4px 4px rgba(255,255,255,.3),
		4px -4px 4px rgba(255,255,255,.3),

		5px 0 5px rgba(255,255,255,.3),
		-5px 0 5px rgba(255,255,255,.3),
		0 5px 5px rgba(255,255,255,.3),
		0 -5px 5px rgba(255,255,255,.3),

		5px 5px 5px rgba(255,255,255,.3),
		-5px 5px 5px rgba(255,255,255,.3),
		-5px -5px 5px rgba(255,255,255,.3),
		5px -5px 5px rgba(255,255,255,.3)
	;
}

@media screen and (max-width: 768px) {
	.about-origin-section .origin-title {
		margin: 0 0 24px;
		font-size: 25px;
	}
}

/* ==================================================
主な演目
================================================== */
.about-piece-section {
	padding: 16px 66px 100px;
	background: url(../images/about/piece_bg.jpg) right center / auto 100% no-repeat #28170e;
	position: relative;
}

.about-piece-section:after {
	content: '';
	width: calc(100% - 80px);
	height: calc(100% - 80px);
	border: 1px solid #fff;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
}

.about-piece-section .piece-title {
	margin: 0 0 15px;
	padding: 0 11px;
	color: #fff;
	font-size: 30px;
	background: #28170e;
	text-shadow:
		4px 0 4px rgba(191,109,104,.3),
		-4px 0 4px rgba(191,109,104,.3),
		0 4px 4px rgba(191,109,104,.3),
		0 -4px 4px rgba(191,109,104,.3),

		4px 4px 4px rgba(191,109,104,.3),
		-4px 4px 4px rgba(191,109,104,.3),
		-4px -4px 4px rgba(191,109,104,.3),
		4px -4px 4px rgba(191,109,104,.3),

		5px 0 5px rgba(191,109,104,.3),
		-5px 0 5px rgba(191,109,104,.3),
		0 5px 5px rgba(191,109,104,.3),
		0 -5px 5px rgba(191,109,104,.3),

		5px 5px 5px rgba(191,109,104,.3),
		-5px 5px 5px rgba(191,109,104,.3),
		-5px -5px 5px rgba(191,109,104,.3),
		5px -5px 5px rgba(191,109,104,.3)
	;
	display: table;
	position: relative;
	z-index: 2;
}

.about-piece-section .piece-title span {
	font-size: 25px;
}

.about-piece-section .piece-list {
	width: 680px;
	padding: 0 0 0 40px;
	flex-wrap: wrap;
	display: flex;
}

.about-piece-section .piece-list li {
	width: 340px;
	line-height: 2.5;
	color: #fff;
	font-size: 20px;
}

@media screen and (max-width: 768px) {
	.about-piece-section {
		padding: 16px;
	}

	.about-piece-section:after {
		width: calc(100% - 8px);
		height: calc(100% - 8px);
	}

	.about-piece-section .piece-title {
		text-align: center;
		background: none;
		display: block;
	}

	.about-piece-section .piece-list {
		width: auto;
		padding: 0;
	}

	.about-piece-section .piece-list li {
		width: calc((100% - 8px) / 2);
		line-height: inherit;
		font-size: inherit;
	}
}

/* ==================================================
命が踊り出す
================================================== */
.about-dance-section .dance-title {
	margin: 0 0 9px;
	color: #fff;
	font-size: 52px;
	font-family: "Hannari", "Yu Mincho", "YuMincho", "NotoSerifCJKjp", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	text-shadow:
		4px 0 4px rgba(191,109,104,.1),
		-4px 0 4px rgba(191,109,104,.1),
		0 4px 4px rgba(191,109,104,.1),
		0 -4px 4px rgba(191,109,104,.1),

		4px 4px 4px rgba(191,109,104,.1),
		-4px 4px 4px rgba(191,109,104,.1),
		-4px -4px 4px rgba(191,109,104,.1),
		4px -4px 4px rgba(191,109,104,.1),

		5px 0 5px rgba(191,109,104,.1),
		-5px 0 5px rgba(191,109,104,.1),
		0 5px 5px rgba(191,109,104,.1),
		0 -5px 5px rgba(191,109,104,.1),

		5px 5px 5px rgba(191,109,104,.1),
		-5px 5px 5px rgba(191,109,104,.1),
		-5px -5px 5px rgba(191,109,104,.1),
		5px -5px 5px rgba(191,109,104,.1)
	;
}

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

.about-dance-section .dance-texts {
	width: 620px;
}

.about-dance-section .dance-thumb {
	width: 365px;
}

.about-dance-section .dance-catch {
	margin: 0 0 .8em;
	color: #4b4b4b;
	font-size: 30px;
	font-family: "Hannari", "Yu Mincho", "YuMincho", "NotoSerifCJKjp", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}

@media screen and (max-width: 768px) {
	.about-dance-section .dance-title {
		text-align: center;
	}

	.about-dance-section .dance-content {
		display: block;
	}

	.about-dance-section .dance-texts,
	.about-dance-section .dance-thumb {
		width: auto;
		margin: 0 0 16px;
	}

	.about-dance-section .dance-thumb img {
		max-width: 80%;
		margin: 0 auto;
		display: block;
	}
}