/*
====>> 再利用可能なパーツのデフォルトスタイリング <<====

・このファイルはベースのスタイルになるので、原則オーバーライド(上書き)はしない事
・タグに依存しないベースのコンポーネントパーツ
・単体、あるいはパーツ単位で独立した仕様のスタイル

*/

/*		見出し
-----------------------------------------------------*/

.c-title_l{
	font-size: 3.6rem;
}

.c-title_m{
	font-size: 2.8rem;
}

.c-title_s{
	font-size: 2rem;
}

@media (max-width: 600px){
	.c-title_l{
		font-size: 2rem;
	}
	
	.c-title_m{
		font-size: 1.8rem;
	}
	
	.c-title_s{
		font-size: 1.6rem;
	}
	
}

/*		相対幅ボックス
-----------------------------------------------------*/

.c-block{
	width: var(--w-liquid);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;

	&.c-block_2{
		& > *{
			width: 48%;
		}

	}/*  END .c-block_2 */

	&.c-block_3{ 
		& > *{
			width: calc(100% / 3);
		}

	}/*  END &.c-block_3 */

	&.c-block_4{
		& > *{
			width: 25%;
		}

	}/*  END &.c-block_4 */

	&.c-block_5{
		& > *{
			width: 20%;
		}

	}/*  END &.c-block_5 */
	
	&.c-block_6{
		& > *{
			width: calc(100% / 6);
		}

	}/*  END &.c-block_6 */
	
	&.c-block_7{
		& > *{
			width: calc(100% / 7);
		}

	}/*  END &.c-block_7 */
	
	&.c-block_8{
		& > *{
			width: 12.5%;
		}

	}/*  END &.c-block_8 */

}/*  END .c-block */



/*		GLIDカード
-----------------------------------------------------*/

.c-card-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px 2%;

	.c-card-grid_item{
		display: grid;
		grid-row: span 4;
		gap: 0.65rem;
		grid-template-rows: subgrid;

		.c-card-grid_image{
			width: 100%;
			text-align: center;
		}
		
		.c-card-grid_title{
			font-size: 2.4rem;
		}
		
		.c-card-grid_title,
		.c-card-grid_text{
			margin-top: 20px;
			text-align: justify;
		}

	}/* END .c-card-grid_item */

	&.c-card_2 {
		grid-template-columns: repeat(2, minmax(435px, 1fr));
	}

	&.c-card_3 {
		grid-template-columns: repeat(3, minmax(280px, 1fr));
	}

	&.c-card_4 {
		grid-template-columns: repeat(4, minmax(200px, 1fr));
	}

	&.c-card_5 {
		grid-template-columns: repeat(5, minmax(156px, 1fr));
	}

	&.c-card_6 {
		grid-template-columns: repeat(6, minmax(125px, 1fr));
	}

	&.c-card_7 {
		grid-template-columns: repeat(7, minmax(100px, 1fr));
	}

	&.c-card_8 {
		grid-template-columns: repeat(8, minmax(85px, 1fr));
	}

}/* END .c-card-grid */



/*		FLEXカード
-----------------------------------------------------*/

.c-card_flex{
	width: var(--w-liquid);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 30px;

	&.c-card_2{
		.c-card-flex_item{
			width: calc(96% / 2);
		}

	}/* END c-card_2 */

	&.c-card_3{
		.c-card-flex_item{
			width: calc(92% / 3);
			box-sizing: border-box;	
		}

	}/* END c-card_3 */

	&.c-card_4{
		.c-card-flex_item{
			width: calc(88% / 4);
			box-sizing: border-box;	
		}

	}/* END c-card_4 */

	&.c-card_5{
		.c-card-flex_item{
			width: calc(86% / 5);
			box-sizing: border-box;
		}

	}/* END c-card_5 */

	&.c-card_6{
		.c-card-flex_item{
			width: calc(84% / 6);
			box-sizing: border-box;
		}

	}/* END c-card_6 */

	&.c-card_7{
		.c-card-flex_item{
			width: calc(82% / 7);
			box-sizing: border-box;
		}

	}/* END c-card_7 */

	&.c-card_8{
		.c-card-flex_item{
			width: calc(82.5% / 8);
			box-sizing: border-box;
		}

	}/* END c-card_8 */

	.c-card-flex_image{
		width: 100%;
		text-align: center;
	}
	
	.c-card-flex_title{
		font-size: 2.4rem;
	}
	
	.c-card-flex_title,
	.c-card-flex_text{
		margin-top: 20px;
		text-align: justify;
	}

}/* END .c-card_flex */


@media (max-width: 768px){
	
	.c-card_flex{
		flex-direction: row;

		&.c-card_2,&.c-card_3,&.c-card_4,&.c-card_5,
		&.c-card_6,&.c-card_7,&.c-card_8{
		
			.c-card-flex_item{
				width: 45%;
			}

		}
		
	}
	
}/*  END Break Point  */


@media (max-width: 600px){
	
	.c-card_flex{
		flex-direction: column;

		&.c-card_2,.c-card_3,.c-card_4,.c-card_5,
		.c-card_6,.c-card_7,.c-card_8{
			
			.c-card-flex_item{
				width: 100%;
			}

		}

	}

}/*  END Break Point  */



/*		ユニットコンテンツ
-----------------------------------------------------*/

.c-unit{
	margin-top: 30px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;

	& > *{
		width: calc(96% / 2);
	}	
}

@media (max-width: 600px){

	.c-unit > *{
		width: 100%;
	}

}/*  END Break Point  */


/*		リスト
-----------------------------------------------------*/

.c-list{
	
	li{
		padding: 20px;
		box-sizing: border-box;
	}
	
}


/*		ボタン
-----------------------------------------------------*/
.c-link_btn{
	position: relative;
	color: #fff;
	background: var(--color-black);
	border: 2px solid var(--color-black);
	padding: 10px 40px;
	display: inline-block;
	transition: all 0.2s ease-in-out;

	&::after{
	content: '▶';
	position: absolute;
	top: 50%;
	right: 5%;
    font-size: 1rem;
    line-height: 0;
	transition: all 0.2s ease-in-out;
	}
	
	&:hover{
		background-color:#fff;
		opacity: 1;
		color: var(--color-black);
		text-decoration: none;
		&::after{
			right: 4%;
		}
		&::after{
			color: currentColor;
		}
	}
	
}

.c-link_btn_arrow{
	position: relative;
	border: 1px solid var(--color-border-pale);
	padding: 10px 40px;
	display: inline-block;
	color: var(--theme-main);
	
	&:after{
		content: '\02192';
		position: absolute;
		top: auto;
		right: 5%;
		
		&:hover{
			right: -5%;
		}

	}
	
	&:hover{
		opacity: 1;
		color: var(--theme-main);
		text-decoration: none;
	}

}

/*		ページャー
-----------------------------------------------------*/

/*		一覧
---------------------------
--------------------------*/

.wp-pagenavi{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	
	& > a{
    padding: 3px 5px;
    margin: 2px;
		border: 1px solid var(--color-border-pale);
		box-sizing: border-box;
		text-decoration: none;
	}

}

.current{
	margin: 0 5px;
	background: #426b00;
	padding: 5px 10px;
	border: var(--color-border-pale);
	box-sizing: border-box;
	color: var(--theme-main);
}


/*		詳細
---------------------------
--------------------------*/

.pager_single{
	margin-top: 40px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	
	.navi-left{
		text-align: left;
	}
	
	.navi-center{
		text-align: center;
	}
	
	.navi-right{
		text-align: right;
	}

}


/*		テーブル
-----------------------------------------------------*/

.c-table_plane{
	width: 100%;

	& th{
		background: var( --color-gray-dark);
		width: 30%;
		padding: 20px;
		border-bottom: solid 1px var( --color-gray-dark);
		font-weight: 700;
		text-align: center;
		vertical-align: middle;
	}

	& td{
		width: 70%;
		padding: 20px 30px;
		border-bottom: solid 1px var( --color-gray-dark);
	}

}

@media (max-width: 600px){
	.table_plane {
		& thead,
		& tbody,
		& tfoot,
		& tr{
			display:block;
			width: 100%;
		}
		& th,
		& td{
		width: 100%;
		padding: 20px 0px;
		display: block;
		}
	}
}


.c-table_two_tone{
	width: 100%;
	
	th{
		width: 30%;
		padding: 20px;
		border-bottom: solid 1px var(--color-border-pale);
		font-weight: 700;
		text-align: center;
		vertical-align: middle;
	}

	tr:nth-child(2n) > th{
		background: var(--color-base);
		width: 30%;
		padding: 20px;
		border-bottom: solid 1px var(--color-border-pale);
		font-weight: 700;
		text-align: center;
		vertical-align: middle;
	}
	
	td{
		width: 70%;
		padding: 20px 30px;
		border-bottom: solid 1px var(--color-border-pale);
	}

	tr:nth-child(2n) > td{
		background: var(--color-base);
		width: 70%;
		padding: 20px 30px;
		border-bottom: solid 1px var(--color-border-pale);
	}
}

@media (max-width: 600px){
	
	.table_two_tone th,table.two_tone td{
		width: 100%;
		padding: 20px 0px;
		display: block;
	}

}