/* ===============================
   Module
   =============================== */

/* ============================================= link */
.link_type_01 {
	display: grid;
	align-items: center;
	width: 100%;
	text-align: center;
	border: 1px solid var(--color-secondary);
	text-decoration: none;
	color: var(--color-secondary);
	cursor: pointer;
	padding: 2rem 1rem;
	transition: 0.3s;
}

.link_type_01 span {
	display: block;
	margin: 0 auto;
	padding-right: 3.6rem;
	position: relative;
}
.link_type_01 span::before {
	content: "";
	display: block;
	position: absolute;
	width: 1.2rem;
	aspect-ratio: 1 / 1;
	right: 0;
	top: calc(50% - 0.7rem);
	border-right: 2px solid var(--color-secondary);
	border-top: 2px solid var(--color-secondary);
	transform: rotate(135deg);
	transition: 0.3s;
}

.link_type_02 {
	display: inline-block;
	text-align: center;
	padding: 1rem 3.6rem;
	background-color: var(--color-white);
	border: 1px solid #8C8C8C;
	color: #8C8C8C;
	border-radius: 0.7rem;
	transition: 0.3s;
}

.link_type_02 span {
	position: relative;
	font-size: 1.8rem;
	line-height: 1;
	display: inline-block;
	padding-right: 2rem;
	transition: 0.3s;
}

.link_type_02 span::before {
	content: "";
	display: block;
	position: absolute;
	width: 1.2rem;
	aspect-ratio: 1 / 1;
	right: 0;
	top: calc(50% - 0.5rem);
	border-right: 2px solid #8C8C8C;
	border-top: 2px solid #8C8C8C;
	transform: rotate(45deg);
	transition: 0.3s;
}

.link_type_03 {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0;
	position: relative;
	padding: 8px 48px 8px 66px;
	border: 1px solid var(--color-secondary);
	text-align: center;
	color: var(--color-secondary);
}

.link_type_03 .label {
	transition: transform .3s ease;
}

.link_type_03 .plus {
	opacity: 0;
	width: 1em;
	text-align: center;
	transition: opacity .3s ease;
}

.link_type_04 {
	display: inline-block;
	text-align: center;
	border: 1px solid var(--color-secondary);
	text-decoration: none;
	color: var(--color-secondary);
	cursor: pointer;
	padding: 8px 66px;
	transition: 0.3s;
}

.link_type_04 span {
	position: relative;
	transition: 0.3s;
	background:url(../imgs/common/icon_external_blue.svg) no-repeat right center;
	padding-right:2.2rem;
	background-size:1.2rem 1.2rem;
}


/* ------------------------------------- for pc */
@media ( min-width : 768px ) {
	
	.link_type_01:hover {
		background-color: var(--color-secondary);
		color: var(--color-white);
	}
	.link_type_01:hover span::before {
		border-color: var(--color-white);
	}
	.link_type_02:hover {
		background-color: var(--color-main);
		color: var(--color-white);
		border-color: var(--color-main);
	}
	.link_type_02:hover span {
		transform: translateX(0.5rem);
	}
	.link_type_02:hover span::before {
		border-color: var(--color-white);
	}
	.link_type_03:hover .label {
		transform: translateX(-6px); /* ← テキストだけ左に */
	}
	.link_type_03:hover .plus {
		opacity: 1;
	}
	.link_type_04:hover {
		background-color: var(--color-main);
		color: var(--color-white);
		border-color: var(--color-main);
	}
	.link_type_04:hover span {
		background:url(../imgs/common/icon_external_white.svg) no-repeat right center;
		padding-right:2.2rem;
		background-size:1.2rem 1.2rem;
	}
	
}

/* ============================================= margin-top */
.mt5,  .mt5-10,.mt5-20, .mt5-30, .mt5-40, .mt5-50, .mt5-60, .mt5-70, .mt5-80, .mt5-90, .mt5-100 { margin-top: 5px !important;}
.mt10, .mt10-5,.mt10-20,.mt10-30,.mt10-40,.mt10-50,.mt10-60,.mt10-70,.mt10-80,.mt10-90,.mt10-100{ margin-top: 10px !important;}
.mt20, .mt20-5,.mt20-10,.mt20-30,.mt20-40,.mt20-50,.mt20-60,.mt20-70,.mt20-80,.mt20-90,.mt20-100{ margin-top: 20px !important;}
.mt30, .mt30-5,.mt30-10,.mt30-20,.mt30-40,.mt30-50,.mt30-60,.mt30-70,.mt30-80,.mt30-90,.mt30-100{ margin-top: 30px !important;}
.mt40, .mt40-5,.mt40-10,.mt40-20,.mt40-30,.mt40-50,.mt40-60,.mt40-70,.mt40-80,.mt40-90,.mt40-100{ margin-top: 40px !important;}
.mt50, .mt50-5,.mt50-10,.mt50-20,.mt50-30,.mt50-40,.mt50-60,.mt50-70,.mt50-80,.mt50-90,.mt50-100{ margin-top: 50px !important;}
.mt60, .mt60-5,.mt60-10,.mt60-20,.mt60-30,.mt60-40,.mt60-50,.mt60-70,.mt60-80,.mt60-90,.mt60-100{ margin-top: 60px !important;}
.mt70, .mt70-5,.mt70-10,.mt70-20,.mt70-30,.mt70-40,.mt70-50,.mt70-60,.mt70-80,.mt70-90,.mt70-100{ margin-top: 70px !important;}
.mt80, .mt80-5,.mt80-10,.mt80-20,.mt80-30,.mt80-40,.mt80-50,.mt80-60,.mt80-70,.mt80-90,.mt80-100{ margin-top: 80px !important;}
.mt90, .mt90-5,.mt90-10,.mt90-20,.mt90-30,.mt90-40,.mt90-50,.mt90-60,.mt90-70,.mt90-80,.mt90-100{ margin-top: 90px !important;}
.mt100,.mt100-5,.mt100-10,.mt100-20,.mt100-30,.mt100-40,.mt100-50,.mt100-60,.mt100-70,.mt100-80,.mt100-90{ margin-top: 100px !important;}


/* ============================================= flexbox */
.flexbox { display: flex; }
.flex-wrap { flex-wrap: wrap; }	/*--- 横複数行(折り返し有り)の配置 ---*/
.flex-space-between{ justify-content: space-between; }	/*--- 最初と最後は端に、残りは等間隔 ---*/
.flex-center{ justify-content: center; }	/*--- 左右中央配置 ---*/
.flex-align-center{ align-items: center; }	/*--- 上下中央配置 ---*/


/* ============================================= contents */
.subpage.common .contents,
.subpage.products .contents,
.subpage.news .contents {
	max-width: var(--content-width);
	width: 90%;
	margin: 80px auto;
}

.auto {
	margin-left:auto;
	margin-right:auto;
}
.center {
	text-align:center;
}

.indent1em {
	padding-left:1em;
	text-indent:-1em;
}

.indent2em {
	padding-left:2em;
	text-indent:-2em;
}

/* ============================================= heading */
.heading_01 {
	text-align: center;
}

.heading_01 span {
	padding: 0 20px 10px;
	border-bottom: var(--color-secondary) 5px solid;
	font-size: 2.5rem;
	font-weight: 500;
	display:inline-block;
}

.heading_02 {
	padding: 5px 15px;
	background: linear-gradient(90deg, #006EC8 0%, #40B7FF 100%);
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
}


/* ============================================= text */
.bold,
.bold-pc {
	font-weight: 700;
}
.bold-sp {
	font-weight: 400;
}
.f12 { font-size:1.2rem;}
.f14 { font-size:1.4rem;}
.f18 { font-size:1.8rem;}

.align_right { text-align:right;}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	/* ============================================= link */
	.link_type_02 {
		font-size: 1.44rem;
	}

	/* ============================================= margin-top */
	.mt5, .mt10-5,.mt20-5, .mt30-5, .mt40-5, .mt50-5, .mt60-5, .mt70-5, .mt80-5, .mt90-5, .mt100-5  { margin-top: 5px !important;}
	.mt10,.mt5-10,.mt20-10,.mt30-10,.mt40-10,.mt50-10,.mt60-10,.mt70-10,.mt80-10,.mt90-10,.mt100-10 { margin-top: 10px !important;}
	.mt20,.mt5-20,.mt10-20,.mt30-20,.mt40-20,.mt50-20,.mt60-20,.mt70-20,.mt80-20,.mt90-20,.mt100-20 { margin-top: 20px !important;}
	.mt30,.mt5-30,.mt10-30,.mt20-30,.mt40-30,.mt50-30,.mt60-30,.mt70-30,.mt80-30,.mt90-30,.mt100-30 { margin-top: 30px !important;}
	.mt40,.mt5-40,.mt10-40,.mt20-40,.mt30-40,.mt50-40,.mt60-40,.mt70-40,.mt80-40,.mt90-40,.mt100-40 { margin-top: 40px !important;}
	.mt50,.mt5-50,.mt10-50,.mt20-50,.mt30-50,.mt40-50,.mt60-50,.mt70-50,.mt80-50,.mt90-50,.mt100-50 { margin-top: 50px !important;}
	.mt60,.mt5-60,.mt10-60,.mt20-60,.mt30-60,.mt40-60,.mt50-60,.mt70-60,.mt80-60,.mt90-60,.mt100-60 { margin-top: 60px !important;}
	.mt70,.mt5-70,.mt10-70,.mt20-70,.mt30-70,.mt40-70,.mt50-70,.mt60-70,.mt80-70,.mt90-70,.mt100-70 { margin-top: 70px !important;}
	.mt80,.mt5-80,.mt10-80,.mt20-80,.mt30-80,.mt40-80,.mt50-80,.mt60-80,.mt70-80,.mt90-80,.mt100-80 { margin-top: 80px !important;}
	.mt90,.mt5-90,.mt10-90,.mt20-90,.mt30-90,.mt40-90,.mt50-90,.mt60-90,.mt70-90,.mt80-90,.mt100-90 { margin-top: 90px !important;}
	.mt100,.mt5-100,.mt10-100,.mt20-100,.mt30-100,.mt40-100,.mt50-100,.mt60-100,.mt70-100,.mt80-100,.mt90-100 { margin-top: 100px !important;}
	
	/* ============================================= flexbox */
	.flexbox-sp{ display: flex; }
	.flex-wrap-sp{ flex-wrap: wrap; }	/*--- 横複数行(折り返し有り)の配置 ---*/
	.flex-space-between-sp{ justify-content: space-between; }	/*--- 最初と最後は端に、残りは等間隔 ---*/
	.flex-center-sp{ justify-content: center; }	/*--- 左右中央配置 ---*/
	.flex-align-center-sp{ align-items: center; }	/*--- 上下中央配置 ---*/
	.flex-direction-column-sp{ flex-direction:column;}	/*--- スマホは縦並びにしたいとき ---*/

	/* ============================================= contents */
	.subpage.products .contents {
		margin: 48px auto;
	}

	/* ============================================= heading */
	.heading_01 span {
		font-size: 2rem;
	}

	/* ============================================= text */
	.bold-pc {
		font-weight: 400;
	}
	.bold-sp {
		font-weight: 700;
	}
}



/* ============================================= pager */
.wp-pagenavi {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin-top: 40px;
}

/* 数字リンクと矢印 */
.wp-pagenavi a,
.wp-pagenavi span {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	font-size: 1.6rem;
	color: #7a7a7a;
	transition: all 0.2s ease;
}

/* 現在ページ */
.wp-pagenavi .current {
	font-weight: 700;
	color: var(--color-secondary);
}

/* 数字・矢印のホバー */
.wp-pagenavi a:hover {
	color: var(--color-secondary);
}

/* 非アクティブな矢印（前/次が無いとき） */
.wp-pagenavi .pages,
.wp-pagenavi .extend {
	color: #999;
	pointer-events: none;
}

/* 「最後」や「最初」などのリンク */
.wp-pagenavi .first,
.wp-pagenavi .last {
	font-size: 14px;
	color: #888;
}

/* 小さめデバイス対応 */
@media (max-width: 480px) {
	.wp-pagenavi {
		gap: 4px;
		font-size: 14px;
	}
	.wp-pagenavi a,
	.wp-pagenavi span {
		min-width: 28px;
		height: 28px;
		line-height: 28px;
	}
}