@charset "UTF-8";

@import url("./wp.css");



/* ========================================================
  
  Component

======================================================== */

/*-----------------------------------------------
 Component - case-cat
-----------------------------------------------*/
.case-cat {
	width: 100%;
	display: flex;
    align-items: center;
	justify-content: center;
    flex-wrap: wrap;
	gap: .4em;
	font-size: 88%;
 	line-height: 1.2;
	letter-spacing: .1em;
	margin-top: 1.2em;

	> li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		gap: .5em;
		
		&::after {
			display: inline-block;
			content: "／";
		}
		&:last-of-type {
			&::after {
				display: none;
			}
		}
	}
}
.case-cat__p {
	font-size: 94%;

	> a {
		display: block;
		color: #FFF;
		font-weight: var(--fw-bold);
		background-color: var(--color-brw);
		padding: .4em .8em;
		border-radius: .4em;
		white-space: nowrap;
		&:hover {
			background: var(--color-base);
		}
	}
}
.case-cat__c {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
	gap: .4em;
	font: var(--font-min);

	> li {
		&::after {
			display: inline-block;
			content: "、";
		}
		&:last-child::after {
			display: none;
		}
	}
	& a {
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-cat {
	margin-top: 4%;
	font-size: 80%;
	letter-spacing: .05em;
}
}


/*-----------------------------------------------
 Component - case-title
-----------------------------------------------*/
.case-title {
	position: relative;
	font: var(--font-min);
	font-size: min(2.6vw,205%);
	letter-spacing: .12em;
	line-height: 1.5;
}

.case-list {
	.case-title {
		font-size: min(1.8vw,129%);
		padding-bottom: 1em;
		border-bottom: var(--bdr-solid);
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-title {
	text-align: center;
	font-size: 120%;
	letter-spacing: .1em;
}

.case-list {
	.case-title {
		font-size: 110%;
	}
}
}


/*-----------------------------------------------
 Component - case-ba
-----------------------------------------------*/
.case-ba {
	position: relative;
	width: 100%;
	display: grid;
	justify-content: space-between;
	grid-template-columns: 49% 49%;
	margin-inline: auto;

	.u-font-en {
		position: relative;
		text-align: center;
		color: #999;
		font-size: min(1.6vw,117%);
		letter-spacing: .12em;
		margin-top: .5em;
	}
	> div {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		align-items: center;
	}
	> div:nth-of-type(2) {
		.u-font-en {
			color: #ccb500;
		}
	}
	&:nth-child(n+2) {
		margin-top: 5%;
	}
}
.case-ba__img {
	position: relative;
	display: block;
	/* aspect-ratio: 250/190; */
	> img {
		width: 100%;
		object-fit: cover;
	}
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.page-single {
	.case-ba {
		.u-font-en {
			font-size: min(2vw,152%);
			margin-top: .8em;
		}
	}
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-ba {
	width: 100%;

	.u-font-en {
		font-size: 90%;
	}
}

.page-single {
	.case-ba:nth-of-type(n+2) {
		margin-top: 6%;
	}
}
}

/* Component - child-cat-list
-----------------------------------------------*/
.child-cat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	font-size: min(100%);
	letter-spacing: .1em;
	line-height: 1.3;
	margin-inline: auto;
	margin-bottom: 6.6%;

	> li {
		width: 23.4%;
	}
	& a {
		position: relative;
		display: block;
		text-align: center;
		padding: .5em;
		border-radius: .9em;
		border: 1px solid var(--color-brw);
		transform: translateZ(0);
		transition: box-shadow .5s, background .5s;
	}
	& a:hover,
	.is-active > a {
		color: #FFF;
		background-color: var(--color-brw);
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.child-cat-list {
	gap: .5em 2%;
	font-size: 3.2vw;
	letter-spacing: .05em;
	> li {
		width: 49%;
	}
}
}


/* ========================================================
  
  List page

======================================================== */

.c_cat_title {
	position: relative;
	font-size: min(2.2vw,166%);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: .12em;
	margin-bottom: 2em;
	padding-bottom: .3em;
	border-bottom: 1px solid #ebeced;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c_cat_title {
	font-size: 105%;
	margin-bottom: 1.2em;
}
}

/*-----------------------------------------------
 List page - case-list
-----------------------------------------------*/
.case-list {
	display: grid;
	row-gap: 10px;

	.c-btn-radi {
		text-align: center;
	}
}
.case-list__item {
	background-color: var(--color-bei);
	padding: 6.5% 6.5% 8%;
}
.case-list__txt {
	color: var(--color-gry);
	font-size: 88%;
	line-height: 1.6;

	> a:hover {
		text-decoration: underline;
	}
}

.case-list {
	.case-title {
		text-align: center;
	}
	.case-ba {
		margin-bottom: 5%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.case-list {
	max-width: 1200px;
	justify-content: space-between;
	grid-template-columns: repeat(2,49.2%);
	row-gap: 20px;
	margin-inline: auto;

	.case-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
.case-list__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	gap: 0;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}



/* ========================================================
  
  Single

======================================================== */
.page-single {
	.c-hdg--bdr {
		> span {
			&::after {
				content: "／";
			}
			&:last-child::after {
				display: none;
			}
		}
	}
	.c-btn-radi {
		text-align: center;
		margin-top: 4%;

		> a {
			color: #FFF;
			background-color: var(--color-brw);

			&:hover {
				background-color: var(--color-och);
			}
		}
		.c-icon {
			background-color: #FFF;
		}
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.page-single {
	.c-btn-radi {
		margin-top: 8%;
	}
}
}

/*-----------------------------------------------
 Single - case-title-wrap
-----------------------------------------------*/
.case-title-wrap {
	width: 94%;
	max-width: 1200px;
	text-align: left;
	padding: 0 3% 3em;
	margin: 0 auto 3em;
	border-bottom: 1px solid #777;

	> * {
		max-width: 1100px;
		margin-inline: auto;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.case-title-wrap {
	.case-cat {
		justify-content: flex-start;
		margin-top: 2em;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-title-wrap {
	width: 100%;
	padding-bottom: 6%;
	margin-bottom: 6%;
}
}

/*-----------------------------------------------
 Single - case-detail
-----------------------------------------------*/
.case-img-area {
	width: 90%;
	max-width: 900px;
	margin-inline: auto;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.case-detail {
	width: 94%;
	max-width: 1200px;
	margin-inline: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-img-area {
	width: 100%;
}
}

/* Single - case-tbl
-----------------------------------------------*/
.case-tbl {
	margin-top: 40px;
	width: 100%; 
	
	& tr {
		&:nth-child(odd) {
			background-color: var(--color-bei);
		}
	}
	& th,
	& td {
		text-align: left;
		padding: 1.4em 2%;
	}
	& th {
		width: 28%;
		vertical-align: top;
		font: var(--font-min);
		font-size: 106%;
		letter-spacing: .12em;
		line-height: 1.4;
		padding-left: 5%;
	}
	& td {
		width: 72%;
		padding-left: 0;

		& p:nth-child(n+2) {
			margin-top: 1em;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-tbl {
	font-size: 90%;
	margin-top: 6%;

	& th,
	& td {
		/* display: block;
		width: 100%; */
		padding: 1em;
	}
	& th {
		width: 32%;
		font-size: 100%;
	}
	& td {
		width: 68%;
		line-height: 1.6;
		padding-left: 0;
	}
}
}

/* Single - case-sub
-----------------------------------------------*/
.case-sub {
	display: grid;
    justify-content: space-between;
	grid-template-columns: repeat(3,30%);
	row-gap: 2em;
	margin: 6.5% auto 0;

	&.fl_center {
		justify-content: center;
	}
	& p {
		font-size: 94%;
		line-height: 1.5;
		margin-top: 1em;
	}
}
.case-sub__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 260/178;

	> a {
		display: block;
		width: 100%;
		height: 100%;
	}
	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-sub {
	width: 100%;
	grid-template-columns: repeat(2,48%);
	margin-top: 8%;

	& p {
		font-size: 80%;
	}
}
}

/* Single - case-detail - case-risk
-----------------------------------------------*/
.case-risk {
	padding: 5% 4%;
    margin-top: 2.3em;
	border: 1px solid #b4b4b5;

	> dt {
		text-align: center;
		font: var(--font-min);
		font-size: min(2vw,105%);
		letter-spacing: .15em;
		line-height: 1.5;
		border-bottom: 1px solid #b4b4b5;
		padding-bottom: 1.5em;
		margin-bottom: 2.2em;
	}
	> dd {
		padding: 0 3%;
	}
	.scl-area {
		max-width: 1000px;
		max-height: 150px;
		overflow-y: scroll;
		padding-right: 5%;
		margin-inline: auto;
	}
	.u-font-min {
		font-size: 105%;
		margin-top: 2em;
		margin-bottom: .5em;

		&:first-child {
			margin-top: 0;
		}
	}
	& ul {
		font-size: 88%;
		> li {
			position: relative;
			text-indent: -1em;
			padding-left: 1em;
			
			&::before {
				content: "・";
			}
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.case-risk {
	padding: 6% 5% 7%;
    margin-top: 8vw;

	> dt {
		font-size: 105%;
		letter-spacing: .1em;
		padding-bottom: 1.2em;
		margin-bottom: 1.5em;
	}
	> dd{
		font-size: 90%;
	}
}
}

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

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}