@charset "utf-8";

/* ===================================================
	Yakumo CSS
====================================================== */
#breadcrumb_col {
	background: #000;
}
#breadcrumb {
	display: flex;
	padding: 0 0 20px;
	margin-top: 0;
}

@media screen and (max-width: 600px) {
	#breadcrumb_col {
		display: none;
	}
}

/* ---------------------------------------------------
contents
------------------------------------------------------ */
.contents {
	width: 1100px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 2.3;
	letter-spacing: 0.18em;
}
.contents .br_sp {
	display: none;
}
.contents img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}
.contents .tit {
	padding: 50px 0 5px;
	border-image-source: linear-gradient(#000, #000); /* 色 */
	border-image-slice: 0 fill; /* 変更しない */
	border-image-outset: 0 100vw; /* どれだけはみ出すか上下左右 */
}
.contents .tit img {
	position: relative;
	z-index: 10;
}
.contents .sub_tit {
	padding: 0 0 10px;
	font-size: 24px;
	letter-spacing: 0.18em;
	border-bottom: 2px solid #d49e64;
}
.contents .img {
	position: relative;
	z-index: 5;
}
.contents .img img + p {
	margin: 5px 0 0;
	font-size: 12px;
}
.contents .img .img_bd {
	border: 2px solid #d49e64;
}
.contents .txt p {
	text-indent: 1em;
}
.contents .flex_box {
	display: flex;
	gap: 0 20px;
	align-items: flex-start;
	justify-content: space-between;
}
.contents .flex_box .img {
	flex-shrink: 0;
}

/* box01 */
.contents .box01 {
	flex-direction: row-reverse;
}
.contents .box01 .img {
	margin: -100px 0 0;
}
.contents .box01 .txt {
	margin: 25px 0;
}

/* box02 */
.contents .box02 {
	margin: 0 0 40px;
}
.contents .box02 .txt {
	position: relative;
	z-index: 0;
	width: 600px;
	margin: 40px 0 25px;
}
.contents .box02 .sub_tit {
	margin: 0 0 10px;
	border-image-source: linear-gradient(0deg, rgba(212, 158, 100, 1) 2px, rgba(212, 158, 100, 0) 0); /* 色と太さ グラデーションで指定 */
	border-image-slice: 0 fill; /* 変更しない */
	border-image-outset: 0 0 0 calc(1100px - 600px); /* どれだけはみ出すか上下左右 */
}
.contents .box02 .txt p + p {
	margin: 30px 0 0;
}

/* box03 */
.contents .box03 {
	flex-direction: row-reverse;
	margin: 0 0 60px;
}
.contents .box03 .txt {
	position: relative;
	z-index: 0;
	width: 730px;
	margin: 0 0 25px;
}
.contents .box03 .sub_tit {
	margin: 0 0 10px;
	border-image-source: linear-gradient(0deg, rgba(212, 158, 100, 1) 2px, rgba(212, 158, 100, 0) 0); /* 色と太さ グラデーションで指定 */
	border-image-slice: 0 fill; /* 変更しない */
	border-image-outset: 0 calc(1100px - 730px) 0 0; /* どれだけはみ出すか上下左右 */
}

/* box04 */
.contents .box04 {
	margin: 0 0 25px;
}
.contents .box04 > div,
.contents .box04 > div img {
	width: 100%;
}

/* box05 */
.contents .box05 {
	margin: 0 0 50px;
}
.contents .box05 .sub_tit {
	margin: 0 0 30px;
	text-align: center;
}

/* after */
.contents .after {
	display: flex;
	justify-content: center;
	padding: 20px 0;
	color: #fff;
	border-image-source: linear-gradient(#000, #000); /* 色 */
	border-image-slice: 0 fill; /* 変更しない */
	border-image-outset: 0 100vw; /* どれだけはみ出すか上下左右 */
}

@media screen and (max-width: 600px) {
	.contents {
		width: 92%;
		font-size: 14px;
		letter-spacing: 0;
	}
	.contents .br_sp {
		display: inline;
	}
	.contents .tit {
		padding: 15px 0 5px;
	}
	.contents .tit img {
		width: 300px;
	}
	.contents .sub_tit {
		font-size: 20px;
		line-height: 1.6;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.contents .img {
		width: 100%;
	}
	.contents .img img {
		width: 100%;
	}
	.contents .flex_box {
		display: block;
	}

	/* box01 */
	.contents .box01 {
		margin: 30px 0;
	}
	.contents .box01 .img {
		margin: 0;
	}
	.contents .box01 .txt {
		margin: 15px 0 0;
	}

	/* box02 */
	.contents .box02 {
		margin-bottom: 30px;
	}
	.contents .box02 .txt {
		width: auto;
		margin: 15px 0 0;
	}
	.contents .box02 .sub_tit {
		border-image-outset: 0; /* どれだけはみ出すか上下左右 */
	}
	.contents .box02 .txt p + p {
		margin-top: 10px;
	}

	/* box03 */
	.contents .box03 {
		margin-bottom: 30px;
	}
	.contents .box03 .txt {
		width: auto;
		margin: 15px 0 0;
	}
	.contents .box03 .sub_tit {
		margin: 0 0 10px;
		border-image-outset: 0; /* どれだけはみ出すか上下左右 */
	}

	/* box04 */
	.contents .box04 {
		display: flex;
		gap: 0 5px;
		margin: 0 0 25px;
	}
	.contents .box04 > div,
	.contents .box04 > div img {
		width: 100%;
	}

	/* box05 */
	.contents .box05 {
		margin-bottom: 30px;
	}
	.contents .box05 .sub_tit {
		margin-bottom: 20px;
	}
	.contents .box05 .txt {
		width: auto;
		margin: 15px 0 0;
	}

	/* after */
	.contents .after {
		margin: 0 0 1px;
	}
}

/* ---------------------------------------------------
更新履歴
------------------------------------------------------

yymmdd_name_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。

------------------------------------------------------ */