@charset "utf-8";
/*.contents01ここから*/
.contents01{
	width: 100%;
	height: auto;
	display: block;
}
.contents01 .contents01_01{
	width: 118.0rem;
	height: auto;
	min-height: calc(100vh - 9.0rem - 3.5rem);
	min-height: calc((var(--vh, 1vh) * 100) - 9.0rem - 3.5rem);
	padding: 10.0rem 0 10.0rem;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01{
		width: 32.0rem;
		min-height: calc(100vh - 6.0rem - 3.2rem);
		min-height: calc((var(--vh, 1vh) * 100) - 6.0rem - 3.2rem);
		padding: 8.0rem 0 8.0rem;
	}
}
.contents01 .contents01_01 .contents01_01_01{
	width: 118.0rem;
	height: auto;
	margin: 0 0 6.8rem;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_01{
		width: 100%;
		margin: 0 0 3.8rem;
	}
}
.contents01 .contents01_01 .contents01_01_01 > .text01{
	width: auto;
	height: auto;
	margin: 0 0 1.0rem;
	font-size: 4.5rem;
	line-height: 4.5rem;
	display: block;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_01 > .text01{
		font-size: 3.0rem;
		line-height: 3.0rem;
	}
}
.contents01 .contents01_01 .contents01_01_01 > .text02{
	width: auto;
	height: auto;
	margin: 0;
	font-size: 2.2rem;
	line-height: 2.2rem;
	display: block;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_01 > .text02{
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
}
.contents01 .contents01_01 .contents01_01_02{
	width: 100%;
	height: auto;
	margin: 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01{
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01{
	width: 100%;
	height: auto;
	margin: 8.0rem 0 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01{
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 > .contents01_01_02_01_01:nth-of-type(1){
	margin-top: 0;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .text01{
	width: auto;
	height: auto;
	font-size: 3.2rem;
	line-height: 3.6rem;
	margin: 0 0 2.0rem;
	display: block;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .text01{
		font-size: 2.8rem;
		line-height: 3.2rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul{
	width: 100%;
	height: auto;
	margin: 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li{
	width: calc((100% - 4.0rem * 3) / 4);
	height: auto;
	margin: 5.4rem 4.0rem 0 0;
	font-size: 1.5rem;
	line-height: 2.1rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	position: relative;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li{
		width: calc((100% - 2.0rem * 1) / 2);
		margin: 3.0rem 2.0rem 0 0;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li:nth-of-type(-n+4){
	margin-top: 0;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li:nth-of-type(-n+4){
		margin-top: 3.0rem;
	}
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li:nth-of-type(-n+2){
		margin-top: 0;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li:nth-of-type(4n){
	margin-right: 0;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li:nth-of-type(4n){
		margin-right: 2.0rem;
	}
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li:nth-of-type(2n){
		margin-right: 0;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a{
	width: 100%;
	height: auto;
	margin: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a:hover{
	opacity: 1;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a::before{
	content: '詳しくみる';
	width: auto;
	height: auto;
	font-size: 1.5rem;
	line-height: 2.5rem;
	color: #ffffff;
	background-color: rgba(0, 0, 0, .8);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	opacity: 0;
	transition: all .5s;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a:hover::before{
	opacity: 1;
	transition: all .5s;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01{
	width: 100%;
	aspect-ratio: 2024 / 1350;/* フリークロップ画像でも一覧カードを3:2に統一（CSSクロップ） */
	height: auto;
	margin: 0 0 1.2rem;
	overflow: hidden;
	display: block;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li.sold > a > .photo01{
	opacity: .5;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > img{
	width: 100%;
	height: 100%;/* 3:2ボックスに合わせてクロップ表示 */
	object-fit: cover;
	margin: 0;
	display: block;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > .img{
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #B7B7B7;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > .img::before{
	content: '';
	width: 50%;
	height: 50%;
	background-image: url(../img/common/logo01.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > .img > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	display: block;
	opacity: 0;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .text01{
	width: auto;
	height: auto;
	margin: 0;
	font-size: 2.0rem;
	line-height: 3.0rem;
	display: block;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .text01{
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .link01{
	min-width: 20.0rem;
	min-height: 5.0rem;
	padding: .5rem;
	margin: 5.6rem auto 0;
	font-size: 1.5rem;
	line-height: 1.9rem;
	color: #B7B7B7;
	border: 1px solid #B7B7B7;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .link01{
		width: 100%;
		margin: 3.6rem auto 0;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .link01:hover{
	color: #ffffff;
	background-color: #B7B7B7;
	opacity: 1;
}

/* 一覧＋ご相談 横並びボタン（single-example /example/ 踏襲） */
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns{
	width: auto;
	height: auto;
	margin: 5.6rem 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center; /* 親がalign-items:flex-startのため中央寄せに上書き */
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns{
		width: 100%;
		margin: 3.6rem 0 0;
		flex-direction: column;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns > .link01{
	min-width: 20.0rem;
	min-height: 5.0rem;
	margin: 0 0 0 8.0rem;
	padding: .5rem;
	font-size: 1.5rem;
	line-height: 1.9rem;
	color: #B7B7B7;
	border: 1px solid #B7B7B7;
	display: flex;
	justify-content: center;
	align-items: center;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns > .link01:nth-of-type(1){
	margin-left: 0;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns > .link01{
		width: 100%;
		margin: 0;
	}
	.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns > .link01:nth-of-type(1){
		margin-bottom: 2.0rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > .ex_btns > .link01:hover{
	color: #ffffff;
	background-color: #B7B7B7;
	opacity: 1;
}

.contents01 .contents01_01 .contents01_01_03{
	width: 100%;
	height: auto;
	margin: 8.0rem 0 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/*アーカイブ：画面が高い時、見出し(.contents01_01_01)とパンくずの間でボタン群を縦中央に配置*/
.contents01.example .contents01_01 .contents01_01_02{
	flex: 1 1 auto;
	justify-content: center;
}

/*アーカイブ：タームリンクボタン横並び（親→子の順にフラット配置／PC4列・センター寄せ）*/
.contents01 .contents01_01 .contents01_01_02 .term-btns{
	width: 100%;
	height: auto;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 5.4rem 4.0rem;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .term-btns{
		gap: 3.0rem 2.0rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li{
	width: calc((100% - 4.0rem * 2) / 3);
	height: auto;
	margin: 0;
	display: flex;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .term-btns > li{
		width: 100%;
	}
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a{
	width: 100%;
	min-height: 12.0rem;
	padding: 1.4rem 2.0rem;
	margin: 0;
	color: #000000;
	border: 1px solid #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1.0rem;
	text-align: left;
	transition: all .4s;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a{
		min-height: 8.0rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a > .en{
	font-size: 2.5rem;
	line-height: 1.35;
	letter-spacing: .12em;
	padding: .8rem 0;
	position: relative;
	width: fit-content;
	max-width: 100%;
	word-break: break-all;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a > .en{
		font-size: 1.8rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a > .en::after{
	content: '';
	width: 0;
	height: 1px;
	margin: auto;
	background-color: currentColor;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	transition: width .45s;
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a > .jp{
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: .35em;
	width: fit-content;
	max-width: 100%;
}
@media only screen and (max-width: 767px) {
	.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a > .jp{
		font-size: 1.0rem;
	}
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a:hover{
	color: #ffffff;
	background-color: #000000;
	border-color: #000000;
	opacity: 1;
}
.contents01 .contents01_01 .contents01_01_02 .term-btns > li > a:hover > .en::after{
	width: 100%;
}
/* A案：カードの動画サムネ（画像なし動画行）。imgと同じ＋画像クロップ比(2024:1350≒3:2) */
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	display: block;
	background-color: #1a1a1a;/* フォールバック：フレーム未描画でも濃色枠（空白防止） */
}
/* 動画サムネの▶アイコン（フレーム有無に関わらず動画と分かる見た目に） */
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01{
	position: relative;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > .item01{
	width: 5.0rem;
	height: 5.0rem;
	border: .2rem solid #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	pointer-events: none;
}
.contents01 .contents01_01 .contents01_01_02 .contents01_01_02_01 .contents01_01_02_01_01 > ul > li > a > .photo01 > .item01::before{
	content: '';
	width: 30%;
	height: 40%;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	margin: 0;
	background-color: #ffffff;
	display: block;
}
/*.contents01ここまで*/