@charset "UTF-8";

/* フォント */
.serif {
	font-family: serif;
}
.sans-serif {
	font-family: sans-serif;
}

/* ドットの左右 */
.dot {
	display: inline-block !important;
	margin: 0 -12px;
}
@media screen and (max-width: 560px) {
	.dot {
		margin: 0 -9px;
	}
}

/* ルビ */
ruby rt {
	font-size: .7em;
}

@media screen and (max-width: 560px) {
	ruby rt {
		font-size: .53em;
	}
}

/* 画像 */
.image {
	margin: 120px auto 0;
}

@media screen and (max-width: 834px) {
	.image {
		margin: 90px auto 0;
	}
}
@media screen and (max-width: 560px) {
	.image {
		margin: 75px auto 0;
	}
}
@media screen and (max-width: 430px) {
	.image {
		margin: 60px auto 0;
	}
}
@media screen and (max-width: 320px) {
	.image {
		margin: 45px auto 0;
	}
}


/* ボックス */
.center {
	text-align: center;
}
.commonBox {
	margin-top: 90px;
}
.textBox {
    width: 960px;
	margin: 90px auto 0;
}
.textBox100 {
	width: 100%;
	margin: 90px auto 0;
}

.stacBox { /*画像・動画重ねるボックス*/
	width: 100%;
	margin: 90px auto 0;
	position: relative;
	z-index: 0;
}
.stacBox .stacBox___textbox {
	width: 480px;
	height: auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #c4bcaa;
	text-align: center;
	padding: 45px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	box-shadow: 0 0 14px rgb(102 102 102 / 15%);
	z-index: 10;
}
.stacBox .stacBox___textboxR { /* 右に画像 */
	width: 480px;
	height: auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #c4bcaa;
	text-align: center;
	padding: 45px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	box-shadow: 0 0 14px rgb(102 102 102 / 15%);
	z-index: 10;
}
.stacBox .stacBox___textboxL {/* 左に画像 */
	width: 480px;
	height: auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #c4bcaa;
	text-align: center;
	padding: 45px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	box-shadow: 0 0 14px rgb(102 102 102 / 15%);
	z-index: 10;
}
.stacBox .stacBox___imageL {
	width: 100%;
	max-width: 820px;
	height: 100%; /*画像と合わせる*/
	margin-right: auto;
}
.stacBox .stacBox___imageR {
	width: 100%;
	max-width: 820px;
	height: 100%; /*画像と合わせる*/
	margin-left: auto;
}

.stacBox .stacBox___youtube {
	width: 100%;
	max-width: 820px;
	/*height: 540px;  youtube埋め込みと合わせる*/
	margin-right: auto;
}
.stacBox .stacBox___youtube .youtube {
	width: 100%;
    aspect-ratio: 16 / 9;
	margin: 0 !important;
}
.stacBox .stacBox_title {
	font-size: 1.78rem;
	font-weight: bold;
	font-family: serif;
	line-height: 1.6;
	color: #BA9847;
}


.youtubeFlex { /* 動画一覧 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
}
.youtubeFlex > div {
	width: calc(100%/3 - 30px);
	margin: 45px 0 0;
}
.youtubeFlex .youtube {
	margin: 0;
}

@media screen and (max-width: 1194px) {
	.textBox {
		width: 100%;
	}
	
	.stacBox .stacBox___textbox {
		width: 450px;
		padding: 30px;
	}
	.stacBox .stacBox___textboxL,
	.stacBox .stacBox___textboxR {
		width: 400px;
	}
}
@media screen and (max-width: 834px) {
	.stacBox {
		margin: 75px auto 0;
		display: flex;
		flex-direction: column;
	}
	.stacBox .stacBox___textbox {
		width: 100%;
		order: 2;
		position: static;
		transform: none;
		margin: 12px 0 0;
	}
	.stacBox .stacBox___youtube {
		width: 100%;
		order: 1;
	}
	.stacBox .stacBox___textboxL,
	.stacBox .stacBox___textboxR {
		width: 90%;
		margin: -90px auto 0;
		position: static;
		transform: none;
		order: 2;
	}

	.youtubeFlex > div { /* 動画一覧 */
		width: calc(100%/2 - 30px);
	}
}
@media screen and (max-width: 560px) {
	.commonBox,
	.textBox,
	.textBox100 {
		margin-top: 75px;
	}
	
	.stacBox {
		margin: 60px auto 0;
		display: flex;
		flex-direction: column;
	}
	.stacBox .stacBox___youtube {
		order: 1;
		height: auto;
	}
	.stacBox .stacBox___textbox {
		width: 100%;
		position: static;
		transform: none;
		padding: 30px;
		order: 2;
	}
	.stacBox .stacBox___textboxL,
	.stacBox .stacBox___textboxR {
		padding: 30px;
	}
	
	.youtubeFlex > div { /* 動画一覧 */
		width: calc(100%/2 - 18px);
	}
}
@media screen and (max-width: 430px) {
	.commonBox,
	.textBox,
	.textBox100 {
		margin-top: 60px;
	}
	
	.stacBox .stacBox___textbox {
		padding: 20px;
	}
	.stacBox .stacBox___textboxL,
	.stacBox .stacBox___textboxR {
		padding: 20px;
	}
	
	.youtubeFlex > div { /* 動画一覧 */
		width: 100%;
	}
}
@media screen and (max-width: 320px) {
	.commonBox,
	.textBox,
	.textBox100 {
		margin-top: 45px;
	}
	
	.stacBox {
		margin: 45px auto 0;
	}
	.stacBox .stacBox___textboxL,
	.stacBox .stacBox___textboxR {
		padding: 20px;
		margin: -45px auto 0;
	}
	.stacBox .stacBox_title {
		font-size: 1.52rem;
	}
}


/* 名前や職業 */
.name {
	margin: 12px 0 0;
}
.name span.nm {
	display: block;
	font-size: 1.6rem;
	line-height: 1.6;
}
.name span.st {
	display: block;
	font-size: .8em;
	line-height: 1.6;
}	



/* テキスト body 1.7rem */
.textS {
	font-size: 1.4rem;
}
.textL {
	font-size: 2rem;
}
.textO {
	font-size: 2.4rem;
}
.textXO {
	font-size: 2.8rem;
}
.textYO {
	font-size: 3.2rem;
}

@media screen and (max-width: 834px) {
	/* テキスト body 1.6rem */
	.textS {
		font-size: 1.4rem;
	}
	.textL {
		font-size: 2rem;
	}
	.textO {
		font-size: 2.4rem;
	}
	.textXO {
		font-size: 2.8rem;
	}
	.textYO {
		font-size: 3.2rem;
	}
}
@media screen and (max-width: 560px) {
	/* 名前や職業 */
	.name {
		margin: 3px 0 0;
	}
}
@media screen and (max-width: 430px) {
	/* テキスト body 1.5rem */
	.textS {
		font-size: 1.2rem;
	}
	.textL {
		font-size: 1.8rem;
	}
	.textO {
		font-size: 2rem;
	}
	.textXO {
		font-size: 2.2rem;
	}
	.textYO {
		font-size: 2.6rem;
	}
}
@media screen and (max-width: 380px) {
	/* テキスト body 1.5rem */
	.textS {
		font-size: 1.1rem;
	}
	.textL {
		font-size: 1.6rem;
	}
	.textO {
		font-size: 1.8rem;
	}
	.textXO {
		font-size: 2.2rem;
	}
	.textYO {
		font-size: 2.8rem;
	}
}
@media screen and (max-width: 320px) {
	/* テキスト body 1.4rem */
	.textS {
		font-size: 1rem;
	}
	.textL {
		font-size: 1.5rem;
	}
	.textO {
		font-size: 1.7rem;
	}
	.textXO {
		font-size: 2.1rem;
	}
	.textYO {
		font-size: 2.7rem;
	}
}