@charset "UTF-8";

/* ========================================
   開閉表示
======================================== */

.trigger {
	cursor: pointer;
	position: relative;
}

.target {
	display: none;
}

/* ========================================
   Swiper共通
======================================== */

#case .case-swiper {
	width: 100%;
	box-sizing: border-box;
}

#case .case-swiper .swiper-wrapper {
	box-sizing: border-box;
}

#case .case-swiper .swiper-slide {
	box-sizing: border-box;
}

#case .case-pagination {
	display: none;
}


/* ========================================
   PC：641px以上
======================================== */

@media screen and (min-width: 641px),
print {

	#case {
		width: 1200px;
		margin: 70px auto 0;
	}

	#case h4 {
		font-size: 28px;
		line-height: 1.5em;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;
	}

	#case h5 {
		color: #fff;
		font-size: 18px;
		line-height: 1.5em;
		text-align: center;
		padding: 1em 0 0.8em;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	#case h5 b {
		font-size: 28px;
	}

	#case .type1 {
		margin-top: 40px;
	}

	/* ========================================
	   カテゴリーごとのカラー
	======================================== */

	#case .type1 h4,
	#case .type4 h4 {
		color: var(--colorFL01);
	}

	#case .type1 h5,
	#case .type4 h5 {
		background-color: var(--colorFL01);
	}

	#case .type2 h4,
	#case .type5 h4 {
		color: #294b79;
	}

	#case .type2 h5,
	#case .type5 h5 {
		background-color: #294b79;
	}

	#case .type3 h4,
	#case .type6 h4 {
		color: var(--colorB);
	}

	#case .type3 h5,
	#case .type6 h5 {
		background-color: var(--colorB);
	}

	/* ========================================
	   PCではSwiperを解除して2列表示
	======================================== */

	#case .case-swiper {
		overflow: visible;
	}

	#case .case-swiper > .swiper-wrapper {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: stretch;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 70px;
		padding: 0;
		transform: none !important;
		transition-duration: 0ms !important;
	}

	#case .case-swiper > .swiper-wrapper > .swiper-slide {
		flex: 0 0 48%;
		width: 48% !important;
		height: auto !important;
		margin: 0 0 40px !important;
		border-radius: 10px;
		box-sizing: border-box;
	}

	#case .case-swiper .swiper-slide-duplicate {
		display: none;
	}

	#case .case-pagination {
		display: none;
	}

	/* ========================================
	   平置き/loan
	======================================== */

	#case .case-grid dl {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		height: auto;
		margin: 0 0 70px;
		padding: 0;
	}
	#case .case-grid dl dd{
		width: 48%;
		margin: 0 0 40px;
		border-radius: 10px;
		box-sizing: border-box;
	}

	/* ========================================
	   ボックス背景
	======================================== */

	#case .type1 dd .box {
		background-color: var(--colorL);
	}

	#case .type1 dd .target,
	#case .type4 dd .target {
		background-color: var(--colorL);
	}

	#case .type2 dd .target,
	#case .type5 dd .target {
		background-color: #d3dde5;
	}

	#case .type3 dd .target,
	#case .type6 dd .target {
		background-color: var(--colorL);
	}

	/* ========================================
	   本文
	======================================== */

	#case dd p {
		font-size: 18px;
		line-height: 1.5em;
		padding: 0.8em 0;
		border-bottom: 1px solid #fff;
	}

	/* ========================================
	   テーブル
	======================================== */

	#case dd table {
		width: 100%;
		text-align: left;
		font-size: 18px;
		line-height: 1.5em;
		border-collapse: collapse;
	}

	#case dd th {
		width: 15%;
		font-weight: bold;
		padding: 0.5em 0 0.5em 0.8em;
	}

	#case dd.wide th {
		width: 30%;
	}

	#case dd td {
		padding: 0.8em;
	}

	/* ========================================
	   テーブル行背景
	======================================== */

	#case .type1 table tr:nth-child(2),
	#case .type1 table tr:nth-child(4),
	#case .type4 table tr:nth-child(2),
	#case .type4 table tr:nth-child(4) {
		background-color: var(--color05);
	}

	#case .type2 table tr:nth-child(2),
	#case .type2 table tr:nth-child(4),
	#case .type5 table tr:nth-child(2),
	#case .type5 table tr:nth-child(4) {
		background-color: var(--colorL);
	}

	#case .type3 table tr:nth-child(2),
	#case .type3 table tr:nth-child(4),
	#case .type6 table tr:nth-child(2),
	#case .type6 table tr:nth-child(4) {
		background-color: var(--color05);
	}
}


/* ========================================
   スマホ：640px以下
======================================== */

@media screen and (max-width: 640px) {

	#case {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 0;
	}

	#case h4 {
		font-size: 18px;
		line-height: 1.3em;
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 20px;
		text-align: center;
	}

	#case h5 {
		color: #fff;
		font-size: 16px;
		line-height: 1.3em;
		padding: 0.7em 0 0.5em;
		text-align: center;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	#case h5 b {
		font-size: 20px;
	}

	#case .type1 {
		margin-top: 40px;
	}

	/* ========================================
	   カテゴリーごとのカラー
	======================================== */

	#case .type1 h4,
	#case .type4 h4 {
		color: var(--colorFL01);
	}

	#case .type1 h5,
	#case .type4 h5 {
		background-color: var(--colorFL01);
	}

	#case .type2 h4,
	#case .type5 h4 {
		color: #294b79;
	}

	#case .type2 h5,
	#case .type5 h5 {
		background-color: #294b79;
	}

	#case .type3 h4,
	#case .type6 h4 {
		color: var(--colorB);
	}

	#case .type3 h5,
	#case .type6 h5 {
		background-color: var(--colorB);
	}

	/* ========================================
	   Swiper
	======================================== */

	#case .case-swiper {
		width: 100%;
		overflow: hidden;
	}

	#case .case-swiper > .swiper-wrapper {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	#case .case-swiper > .swiper-wrapper > .swiper-slide {
		flex-shrink: 0;
		width: 100%;
		height: auto;
		margin: 0;
		border-radius: 10px;
		box-sizing: border-box;
	}

	/* 通常ページ：SPでは .pc-disp をSwiper対象外・非表示 */
	#case:not(.case-static) .case-swiper > .swiper-wrapper > .pc-disp {
		display: none !important;
		visibility: hidden;
	}

	/* ========================================
	   ボックス背景
	======================================== */

	#case .type1 dd,
	#case .type4 dd {
		background-color: var(--colorL);
	}

	#case .type2 dd,
	#case .type5 dd {
		background-color: #d3dde5;
	}

	#case .type3 dd,
	#case .type6 dd {
		background-color: var(--colorL);
	}

	/* ========================================
	   本文
	======================================== */

	#case dd p {
		font-size: 15px;
		line-height: 1.3em;
		padding: 0.6em 1em;
		border-bottom: 1px solid #fff;
	}

	/* ========================================
	   テーブル
	======================================== */

	#case dd table {
		width: 100%;
		text-align: left;
		font-size: 14px;
		line-height: 1.3em;
		border-collapse: collapse;
	}

	#case dd th {
		width: 15%;
		font-size: 14px;
		font-weight: bold;
		padding: 0.5em 0 0.5em 0.5em;
	}

	#case dd.wide th {
		width: 25%;
	}

	#case dd td {
		padding: 0.5em;
	}

	/* ========================================
	   テーブル行背景
	======================================== */

	#case .type1 table tr:nth-child(2),
	#case .type1 table tr:nth-child(4),
	#case .type4 table tr:nth-child(2),
	#case .type4 table tr:nth-child(4) {
		background-color: var(--color05);
	}

	#case .type2 table tr:nth-child(2),
	#case .type2 table tr:nth-child(4),
	#case .type5 table tr:nth-child(2),
	#case .type5 table tr:nth-child(4) {
		background-color: var(--colorL);
	}

	#case .type3 table tr:nth-child(2),
	#case .type3 table tr:nth-child(4),
	#case .type6 table tr:nth-child(2),
	#case .type6 table tr:nth-child(4) {
		background-color: var(--color05);
	}

	/* ========================================
	   ページネーション
	======================================== */

	#case .case-pagination {
		position: static;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 20px 0 30px;
	}

	#case .case-pagination .swiper-pagination-bullet {
		display: block;
		width: 8px;
		height: 8px;
		margin: 0;
		background-color: #ccc;
		opacity: 1;
		border-radius: 50%;
	}

	#case .case-pagination .swiper-pagination-bullet-active {
		background-color: var(--colorFL01);
	}

	/* ========================================
	   loanページ：SPも平置き・全件表示
	======================================== */

	#case.case-static .case-swiper {
		overflow: visible;
	}

	#case.case-static .case-swiper > .swiper-wrapper {
		display: flex;
		flex-flow: row wrap;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 30px;
		transform: none !important;
		transition-duration: 0ms !important;
	}

	#case.case-static .case-swiper > .swiper-wrapper > .swiper-slide {
		flex: 0 0 100%;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 20px !important;
	}

	#case.case-static .case-swiper > .swiper-wrapper > .pc-disp {
		display: block !important;
		visibility: visible;
	}

	#case.case-static .case-pagination {
		display: none !important;
	}
}


/* ========================================
   開閉矢印：PC
======================================== */

@media screen and (min-width: 641px),
print {

	.trigger::after {
		content: "";
		box-sizing: border-box;
		display: inline-block;
		position: absolute;
		top: 35%;
		right: 2%;
		width: 16px;
		height: 16px;
		border-style: solid;
		border-width: 2px 2px 0 0;
		border-color: #919191;
		transform: rotate(135deg);
	}

	#case .trigger::after {
		right: 5%;
		border-color: #fff;
	}
}


/* ========================================
   開閉矢印：スマホ
======================================== */

@media screen and (max-width: 640px) {

    .trigger {
        cursor: default;
    }

    .trigger::after {
        display: none;
    }

}