﻿.btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #0068b7;
	border: 1px solid #0068b7;
	background: #fff;
	line-height: 1.2;
	padding: 10px 29.87px 10px 10px;
	position: relative;
	justify-content: center;
	padding: 10px 15px
}

.btn:after {
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	border-right: 1px solid #0068b7;
	border-top: 1px solid #0068b7;
	transform: rotate(45deg) translateY(-50%);
	height: 7px;
	width: 7px
}

@media(any-hover: hover) {
	.btn:after {
		transition: border-top-color .5s ease-out, border-right-color .5s ease-out
	}
}

@media(any-hover: hover) {
	.btn {
		transition: color .5s ease-out, border-top-color .5s ease-out, border-right-color .5s ease-out, border-bottom-color .5s ease-out, border-left-color .5s ease-out, background-color .5s ease-out
	}

	.btn:hover {
		background: #0068b7;
		color: #fff;
		border-color: #fff
	}

	.btn:hover:after {
		border-color: #fff
	}
}

.btn::after {
	position: absolute;
	display: inline-block;
	top: 50%;
	right: 8px;
	transform: translateY(-50%) rotate(45deg)
}

.link-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	border: 1px solid #aaa;
	background: #fff;
	line-height: 1.2;
	padding: 10px 29.87px 10px 10px
}

.link-btn:after {
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	transform: rotate(45deg) translateY(-50%);
	height: 7px;
	width: 7px
}

@media(any-hover: hover) {
	.link-btn:after {
		transition: border-top-color .5s ease-out, border-right-color .5s ease-out
	}
}

@media(any-hover: hover) {
	.link-btn {
		transition: color .5s ease-out, border-top-color .5s ease-out, border-right-color .5s ease-out, border-bottom-color .5s ease-out, border-left-color .5s ease-out, background-color .5s ease-out
	}

	.link-btn:hover {
		background: #0068b7;
		color: #fff;
		border-color: #fff
	}

	.link-btn:hover:after {
		border-color: #fff
	}
}

.related-link {
	background-color: #f5f5f5
}

.related-link__list {
	display: grid;
	grid-gap: 10px
}

.related-link__list+.related-link__list {
	margin-top: 60px
}

@media screen and (max-width:599px) {
	.related-link__list {
		grid-template-columns: repeat(1, 1fr)
	}
}

@media screen and (min-width:600px)and (max-width:1024px) {
	.related-link__list {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (min-width: 1025px) {
	.related-link__list {
		grid-template-columns: repeat(4, 1fr)
	}
}

.related-link__title {
	flex-basis: 100%;
	font-weight: 600
}

@media screen and (max-width:599px) {
	.related-link__title {
		font-size: 2rem;
		grid-column: 1/2
	}
}

@media screen and (min-width:600px)and (max-width:1024px) {
	.related-link__title {
		font-size: 2rem;
		grid-column: 1/3
	}
}

@media screen and (min-width: 1025px) {
	.related-link__title {
		font-size: 3rem;
		grid-column: 1/5
	}
}

.related-link__item {
	display: flex
}

.related-link__link-btn {
	width: 100%
}

@media screen and (min-width:600px) {
	.related-link__link-btn {
		min-height: 75px
	}
}

.link__text {
	color: #0068b7
}

.link__text:hover {
	text-decoration: underline
}

.link__text--r-arrow {
	display: flex;
	align-items: center;
	color: #0068b7
}

.link__text--r-arrow:hover {
	text-decoration: underline
}

.link__text--r-arrow::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 4px;
	border-right: 1px solid #0068b7;
	border-bottom: 1px solid #0068b7;
	transform: rotate(-45deg)
}

.chapter__title--alpha {
	font-size: 3rem;
	text-align: center
}

.chapter__link {
	width: 50%;
	margin: 60px auto 30px
}

@media screen and (max-width:599px) {
	.chapter__link {
		width: 100%;
		margin: 30px auto 30px
	}
}

.chapter__mb0 {
	margin-bottom: 0
}

.bnr {
	margin-top: 50px
}

@media(any-hover: hover) {
	.bnr__img {
		overflow: hidden
	}
}

.bnr__img--link {
	display: block
}

@media(any-hover: hover) {
	.bnr__img--link {
		transition: all .5s ease
	}

	.bnr__img--link:hover {
		opacity: .8
	}

	.bnr__img--link:hover .bnr__img--frame {
		outline: 2px solid #0068b7;
		border: 2px solid #0068b7
	}

	.bnr__img--link:hover .bnr__img--pc {
		transform: scale(1.1)
	}
}

.bnr__img--frame {
	overflow: hidden;
	border: 2px solid #ccc;
	outline: 2px solid #fff;
	box-sizing: border-box;
	transition: all .5s ease
}

.bnr__img--pc {
	aspect-ratio: 59/6;
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1);
	transition: all .5s ease
}

@media screen and (max-width:599px) {
	.bnr__img--pc {
		display: none
	}
}

.bnr__img--sp {
	display: none
}

@media screen and (max-width:599px) {
	.bnr__img--sp {
		aspect-ratio: 375/211;
		display: block
	}
}

.relation__item {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 40px
}

@media screen and (min-width:600px)and (max-width:1024px) {
	.relation__item {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:599px) {
	.relation__item {
		grid-template-columns: 1fr
	}
}

.relation__list {
	display: flex;
	flex-wrap: wrap
}

.relation__list--youtube {
	aspect-ratio: 16/9
}

.relation__list--link {
	display: flex;
	flex-direction: column;
	width: 100%;
	outline: 2px solid rgba(0, 0, 0, 0)
}

.relation__list--link--active {
	pointer-events: none;
	border-color: #757575;
	outline-color: #757575;
	background: #757575
}

.relation__list--link--active>.relation__list--text {
	background: #757575
}

.relation__list--link--active>.relation__list--summary {
	background: #757575
}

@media(any-hover: hover) {
	.relation__list--link {
		transition: all .5s ease
	}

	.relation__list--link:hover {
		border-color: #0068b7;
		outline-color: #0068b7;
		background: #0068b7
	}

	.relation__list--link:hover .relation__list--img {
		transform: scale(1.1, 1.1)
	}

	.relation__list--link:hover .relation__list--img02 {
		transform: scale(1.1, 1.1)
	}

	.relation__list--link:hover .relation__list--text {
		background: #0068b7;
		color: #fff
	}

	.relation__list--link:hover .relation__list--text::after {
		border-color: #fff
	}

	.relation__list--link:hover .relation__list--summary {
		color: #fff
	}
}

.relation__list--frame {
	width: 100%;
	flex-shrink: 0
}

@media(any-hover: hover) {
	.relation__list--frame {
		overflow: hidden
	}
}

.relation__list--img {
	aspect-ratio: 1000/667;
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%
}

@media(any-hover: hover) {
	.relation__list--img {
		transition: all .5s ease
	}
}

.relation__list--img02 {
	aspect-ratio: 1000/478;
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%
}

@media(any-hover: hover) {
	.relation__list--img02 {
		transition: all .5s ease
	}
}

.relation__list--text {
	position: relative;
	width: 100%;
	background: #fff;
	padding: 10px 27px 10px 10px;
	display: flex;
	align-items: center;
	font-weight: 700
}

.relation__list--text::after {
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	height: 7px;
	width: 7px;
	border-right-width: 1px;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #333;
	transform: translateY(-50%) rotate(45deg)
}

@media(any-hover: hover) {
	.relation__list--text::after {
		transition: all .5s ease
	}
}

@media(any-hover: hover) {
	.relation__list--text {
		transition: all .5s ease
	}
}

.relation__list--summary {
	padding: 0 10px 10px;
	font-size: 1.4rem
}

.relation02__item {
	display: flex;
	justify-content: center
}

@media screen and (max-width:599px) {
	.relation02__item {
		grid-template-columns: 1fr
	}
}

.relation02__list {
	display: flex;
	flex-wrap: wrap;
	width: 50%
}

@media screen and (max-width:599px) {
	.relation02__list {
		width: 100%
	}
}

.relation02__list--text {
	position: relative;
	width: 100%;
	background: #fff;
	padding: 10px 27px 10px 10px;
	display: flex;
	align-items: center;
	font-weight: 700
}

.relation02__list--text::after {
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	height: 7px;
	width: 7px;
	border-right-width: 1px;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #333;
	transform: translateY(-50%) rotate(45deg)
}

@media(any-hover: hover) {
	.relation02__list--text::after {
		transition: all .5s ease
	}
}

@media(any-hover: hover) {
	.relation02__list--text {
		transition: all .5s ease
	}
}

.col1bnr-wrap {
	margin: 60px auto 80px;
	display: flex;
	flex-direction: column;
	gap: 30px
}

@media screen and (max-width:599px) {
	.col1bnr-wrap {
		margin: 40px auto 50px
	}
}

.col1bnr-wrap__link {
	display: block;
	transition: all .5s ease;
	border: 1px solid #ccc;
	outline: 2px solid #fff
}

@media(any-hover: hover) {
	.col1bnr-wrap__link {
		transition: all .5s ease
	}

	.col1bnr-wrap__link:hover {
		background-color: #0068b7;
		color: #fff;
		outline: 2px solid #0068b7;
		border-color: #0068b7
	}

	.col1bnr-wrap__link:hover .col1bnr-wrap__img--pic {
		transform: scale(1.1)
	}
}

.col1bnr-wrap__img {
	overflow: hidden;
	display: flex
}

.col1bnr-wrap__img--pic {
	display: block;
	width: 100%;
	height: auto
}

@media screen and (max-width:599px) {
	.col1bnr-wrap__img--pic {
		aspect-ratio: 20/11
	}
}

@media screen and (min-width:600px) {
	.col1bnr-wrap__img--pic {
		aspect-ratio: 40/7
	}
}

@media screen and (min-width:600px)and (any-hover: hover) {
	.col1bnr-wrap__img--pic {
		transition: all .5s ease;
		transform: scale(1)
	}
}

.plink-column {
	margin-top: 70px
}

.plink-column__wrap--heading {
	font-size: 2rem;
	font-weight: 900;
	width: 100%;
	border-bottom: 1px solid #333;
	text-align: left;
	line-height: 1.3;
	padding: 0 10px;
	margin-bottom: 20px
}

.plink-column__wrap--inner {
	padding: 10px 10px 0 10px
}

.plink-column__wrap--inner--link {
	display: flex;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px 20px 10px 10px;
	font-size: 1.6rem;
	line-height: 1.3;
	justify-content: space-between;
	align-items: center;
	color: #333;
	text-decoration: none;
	position: relative
}

@media(any-hover: hover) {
	.plink-column__wrap--inner--link {
		transition: all .5s ease
	}
}

.plink-column__wrap--inner--link::after {
	position: absolute;
	width: 7px;
	height: 7px;
	right: 16px;
	top: 50%;
	content: "";
	display: block;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	transform: translateY(-50%) rotate(45deg)
}

.plink-column__wrap--inner--link--icon {
	width: 34px;
	flex-shrink: 0
}

@media(any-hover: hover) {
	.plink-column__wrap--inner--link--icon {
		transition: all .5s ease
	}
}

.plink-column__wrap--inner--link--icon--img {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block
}

.plink-column__wrap--inner--link--txt {
	flex-grow: 1;
	padding: 5px 10px;
	text-align: left
}

.plink-column__wrap--inner--link:hover {
	color: #fff;
	background-color: #0068b7
}

.plink-column__wrap--inner--link:hover::after {
	border-right: 1px solid #fff;
	border-top: 1px solid #fff
}

.plink-column__wrap--inner--link:hover .plink-column__wrap--inner--link--icon--img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(220deg) brightness(104%) contrast(104%);
	aspect-ratio: 1/1
}

.btn-more-column {
	margin-top: 30px;
	text-align: center
}

.btn-more-column__link {
	display: inline-block;
	text-decoration: underline;
	color: #0068b7;
	position: relative;
	cursor: pointer
}

.btn-more-column__link:after {
	content: "表示する▼";
	text-decoration: underline
}

.btn-more-column .accordion--processed:after {
	content: "閉じる▲";
	text-decoration: underline
}

.column-more {
	display: none
}

.catalog-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    gap: 20px
}

.catalog-lists__wrap {
    width: calc(25% - 15px);
    max-width: 280px;
    border: solid 2px #ccc;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 600px)and (max-width:1024px) {
    .catalog-lists__wrap {
        width:calc(50% - 10px)
    }
}

@media screen and (max-width: 599px) {
    .catalog-lists__wrap {
        width:100%
    }
}

.catalog-lists__ttl {
    font-size: 1.8rem;
    padding: 16px 10px;
    background: #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    flex-grow: 1
}

.catalog-lists__visual {
    padding: 30px 0;
    min-height: 250px;
    display: flex;
    align-items: center
}

.catalog-lists__visual--cataimg {
    margin: 0 auto;
    width: 126px;
    max-width: 100%;
    border: solid 1px #ccc;
    aspect-ratio: 53/75;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover
}

.catalog-lists__btn {
    text-align: center;
    border-top: dotted 2px #ccc;
    padding: 20px 0;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px
}
.catalog-lists__btn.catalog-lists__btn--oneonly{
    grid-template-rows: 1fr;
}

.catalog-lists__btn .com_cata_btn {
    border: solid 2px #0068b7;
    color: #0068b7;
    font-size: 1.4rem;
    width: 80%;
    margin: 0 auto;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: all .5s ease
}

.catalog-lists__btn .com_cata_btn:hover {
    opacity: .5
}

.catalog-lists__btn .com_cata_btn .cata_icon01 {
    width: 20px;
    margin-right: 5px;
    height: auto;
    aspect-ratio: 1/1
}

.catalog-lists__btn .com_cata_btn .cata_icon02 {
    width: 20px;
    margin-right: 5px;
    height: auto;
    aspect-ratio: 1/1
}

.catalog-lists__btn .cata_icon02_wrap {
    background-color: #0068b7;
    color: #fff
}

.section-faq {
	margin: 30px 0
}

.section-faq__maintitle {
	font-weight: 900;
	width: 100%;
	border-bottom: 1px solid #333;
	text-align: left;
	line-height: 1.3;
	padding: 0 10px;
	font-size: 2rem;
	margin-bottom: 20px
}

.section-faq__wrap--list {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 10px
}

.section-faq__wrap--list--inner {
	width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 10px;
	border: 1px solid #ccc;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	transition: all .5s ease;
	margin-bottom: 10px
}

.section-faq__wrap--list--inner--title {
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 1.6rem;
	margin: 0;
	padding: 10px 15px;
	border-radius: 10px;
	background-color: #fff;
	transition: all .5s ease;
	cursor: pointer;
	line-height: 1.5
}

.section-faq__wrap--list--inner--title:hover {
	background-color: #0068b7;
	color: #fff
}

.section-faq__wrap--list--inner--title:hover .section-faq__wrap--list--inner--title--iconq {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(220deg) brightness(104%) contrast(104%)
}

.section-faq__wrap--list--inner--title--iconq {
	display: block;
	margin-top: 2px;
	width: 32px;
	flex-shrink: 0
}

@media(any-hover: hover) {
	.section-faq__wrap--list--inner--title--iconq {
		transition: all .5s ease
	}
}

.section-faq__wrap--list--inner--title--iconq-img {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block
}

.section-faq__wrap--list--inner--title--txt {
	padding-left: 1em;
	text-align: left
}

.section-faq__wrap--list--inner--contents {
	width: 100%;
	display: none;
	padding: 10px 15px;
	line-height: 1.3
}

.section-faq__wrap--list--inner--contents--anser {
	display: flex;
	width: 100%;
	margin-bottom: 10px
}

.section-faq__wrap--list--inner--contents--anser--icona {
	display: block;
	margin-top: 2px;
	width: 32px;
	flex-shrink: 0
}

@media(any-hover: hover) {
	.section-faq__wrap--list--inner--contents--anser--icona {
		transition: all .5s ease
	}
}

.section-faq__wrap--list--inner--contents--anser--icona-img {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block
}

.section-faq__wrap--list--inner--contents--anser--txt {
	padding-left: 16px;
	text-align: left;
	display: flex;
	align-items: center
}

.section-faq__wrap--list dt.accordion--processed {
	background-color: #0068b7;
	color: #fff
}

.section-faq__wrap--list dt.accordion--processed .section-faq__wrap--list--inner--title--iconq {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(220deg) brightness(104%) contrast(104%)
}

.section-faq .chapter__link .btn__link01 {
	padding: 20px 15px;
	font-weight: bold
}

.watch-catalog {
	background-color: #f6f6f6;
	padding: 30px 20px;
	margin: 70px 0 40px
}

.watch-catalog--txt {
	font-weight: bold;
	margin-bottom: 24px
}

.watch-catalog--link {
	margin: 10px auto
}

.watch-catalog--link--wrap--box {
	display: block;
	width: 34px;
	flex-shrink: 0;
	padding-right: 6px
}

.watch-catalog--link--wrap--box--icon {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	filter: invert(33%) sepia(100%) saturate(1066%) hue-rotate(176deg) brightness(93%) contrast(101%)
}

.watch-catalog--link--wrap:hover .watch-catalog--link--wrap--box--icon {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(220deg) brightness(104%) contrast(104%)
}

.watch-catalog--link--wrap--txt {
	width: 70%;
	text-align: center
}

.inquiry-btn .link {
	font-size: 1.4rem;
	margin-top: 10px;
	font-weight: bold;
	text-align: center
}

.inquiry-btn__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

.inquiry-btn__list--wrap {
	width: 50%
}

@media screen and (max-width: 1024px) {
	.inquiry-btn__list--wrap {
		width: 100%;
		margin-bottom: 30px
	}
}

.inquiry-btn__list--wrap--link {
	display: flex;
	border: 4px double #0068b7;
	padding: 10px;
	color: #0068b7;
	position: relative;
	transition: all .5s ease
}

.inquiry-btn__list--wrap--link:hover {
	background-color: #0068b7;
	color: #fff
}

.inquiry-btn__list--wrap--link:hover::after {
	border-color: #fff
}

.inquiry-btn__list--wrap--link:hover .inquiry-btn__list--wrap--link--icon01--img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(220deg) brightness(104%) contrast(104%)
}

.inquiry-btn__list--wrap--link:hover .inquiry-btn__list--wrap--link--inner {
	width: 88%
}

.inquiry-btn__list--wrap--link:hover .inquiry-btn__list--wrap--link--inner .inquiry-btn__list--wrap--link--inner--icon02--img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(220deg) brightness(104%) contrast(104%)
}

.inquiry-btn__list--wrap--link::after {
	transition: all .5s ease;
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	height: 7px;
	width: 7px;
	border-right-width: 1px;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #0068b7;
	transform: translateY(-50%) rotate(45deg)
}

.inquiry-btn__list--wrap--link--icon01 {
	display: block;
	margin-top: 30px;
	width: 40px;
	flex-shrink: 0
}

.inquiry-btn__list--wrap--link--icon01--img {
	aspect-ratio: 1/1;
	width: 100%;
	object-fit: cover;
	display: block;
	filter: invert(33%) sepia(100%) saturate(1066%) hue-rotate(176deg) brightness(93%) contrast(101%)
}

@media(any-hover: hover) {
	.inquiry-btn__list--wrap--link--icon01--img {
		transition: all .5s ease
	}
}

.inquiry-btn__list--wrap--link--inner {
	width: 88%;
	text-align: center
}

@media screen and (max-width:599px) {
	.inquiry-btn__list--wrap--link--inner {
		width: 75%
	}
}

.inquiry-btn__list--wrap--link--inner--icon02 {
	display: block;
	flex-shrink: 0;
	width: 60px;
	margin: 10px auto 7px
}

.inquiry-btn__list--wrap--link--inner--icon02--img {
	aspect-ratio: 1/1;
	width: 100%;
	object-fit: cover;
	filter: invert(33%) sepia(100%) saturate(1066%) hue-rotate(176deg) brightness(93%) contrast(101%)
}

@media(any-hover: hover) {
	.inquiry-btn__list--wrap--link--inner--icon02--img {
		transition: all .5s ease
	}
}

.inquiry-btn__list--wrap--link--inner--txt {
	font-size: 1.4rem
}

.inquiry-btn__list--wrap--subtxt {
	font-size: 1.4rem
}

.col02__item {
	display: grid;
	grid-gap: 20px 30px;
	margin: 70px auto 0;
	grid-template-columns: repeat(1, 1fr);
	width: 50%
}

@media screen and (min-width:600px)and (max-width:1024px) {
	.col02__item {
		width: 68%
	}
}

@media screen and (max-width:599px) {
	.col02__item {
		grid-template-columns: 1fr;
		width: 100%
	}
}

@media screen and (max-width:599px) {
	.col02__list {
		width: 100%
	}
}

.col02__list--link {
	position: relative;
	display: flex;
	border: 3px double #0068b7;
	padding: 10px 15px;
	gap: 10px;
	align-items: center;
	font-size: 1.4rem;
	font-weight: 600;
	background: #fff;
	color: #0068b7
}

.col02__list--link::after {
	position: absolute;
	width: 7px;
	height: 7px;
	right: 5px;
	top: 50%;
	content: "";
	display: block;
	border-right: 1px solid #0068b7;
	border-top: 1px solid #0068b7;
	transform: translateY(-50%) rotate(45deg)
}

@media(any-hover: hover) {
	.col02__list--link {
		transition: all .5s ease
	}

	.col02__list--link::after {
		transition: all .5s ease
	}

	.col02__list--link:hover {
		border-color: #0068b7;
		color: #fff;
		background-color: #0068b7
	}

	.col02__list--link:hover::after {
		border-color: #fff
	}

	.col02__list--link:hover .col02__list--image-obj {
		fill: #0068b7;
		stroke: #fff
	}

	.col02__list--link:hover .col02__list--image-obj02 {
		stroke: #fff
	}

	.col02__list--link:hover .col02__list--image-obj03 {
		fill: none
	}

	.col02__list--link:hover .col02__list--image-obj04 {
		fill: #fff
	}
}

.col02__list--image {
	aspect-ratio: 1/1;
	width: 50px
}

.col02__list--image-obj {
	fill: #fff;
	stroke: #0068b7;
	stroke-miterlimit: 10
}

@media(any-hover: hover) {
	.col02__list--image-obj {
		transition: all .5s ease
	}
}

.col02__list--image-obj01 {
	fill: none
}

.col02__list--image-obj02 {
	fill: none;
	stroke: #333;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.09px
}

.col02__list--image-obj03 {
	fill: #fff
}

.col02__list--image-obj04 {
	fill: #333
}

.col02__list--note {
	font-size: 1.4rem;
	margin-top: 10px
}

.col02__list--text {
	font-size: 1.4rem
}

.housingcase-item {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 30px
}

@media screen and (min-width:600px)and (max-width:1024px) {
	.housingcase-item {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:599px) {
	.housingcase-item {
		grid-template-columns: 1fr
	}
}

.housingcase-item__list {
	display: flex;
	flex-wrap: wrap
}

.housingcase-item__list--link {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: all .5s ease;
	outline: 4px solid #fff
}

@media(any-hover: hover) {
	.housingcase-item__list--link {
		transition: all .5s ease
	}

	.housingcase-item__list--link:hover {
		border-color: #0068b7;
		outline-color: #0068b7;
		background: #0068b7
	}

	.housingcase-item__list--link:hover .housingcase-item__list--link--img--pic {
		transform: scale(1.1, 1.1)
	}

	.housingcase-item__list--link:hover .housingcase-item__list--link--title {
		color: #fff
	}

	.housingcase-item__list--link:hover .housingcase-item__list--link--title::after {
		border-color: #fff
	}
}

.housingcase-item__list--link--img {
	width: 100%;
	flex-shrink: 0
}

@media(any-hover: hover) {
	.housingcase-item__list--link--img {
		overflow: hidden
	}
}

.housingcase-item__list--link--img--pic {
	aspect-ratio: 4/3;
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%
}

@media(any-hover: hover) {
	.housingcase-item__list--link--img--pic {
		transition: all .5s ease
	}
}

.housingcase-item__list--link--title {
	position: relative;
	width: 100%;
	padding: 10px 27px 10px 10px;
	display: flex;
	align-items: center;
	font-weight: 700
}

@media(any-hover: hover) {
	.housingcase-item__list--link--title {
		transition: all .5s ease
	}
}

.housingcase-item__list--link--title::after {
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	height: 7px;
	width: 7px;
	border-right-width: 1px;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #333;
	transform: translateY(-50%) rotate(45deg)
}

@media(any-hover: hover) {
	.housingcase-item__list--link--title::after {
		transition: all .5s ease
	}
}

.housingcase-item__biko {
	text-align: center;
	font-size: 1.4rem;
	margin-top: 10px
}