@charset "UTF-8";
/* ========================================================================================================
	全ページ共通
======================================================================================================== */
/* HTML用CSS
-------------------------------------------------------------------------------------------------------- */
html {font-size: 62.5%;}

body {
	font-family: "Noto Sans CJK JP", sans-serif;
	font-weight: 400;
	color: #333;
	font-size:1.6rem;
}

/* PC SP時表示・非表示切り替え */
.el_pc-display {display:block;}
.el_sp-display {display:none;}

/* font
-------------------------------------------------------------------------------------------------------- */
@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 100;
	src: url('../../font/NotoSansCJKjp-Thin.ttf') format('truetype'); /* Modern Browsers */
}

@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 200;
	src: url('../../font/NotoSansCJKjp-Light.ttf') format('truetype'); /* Modern Browsers */
}

@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 350;
	src: url('../../font/NotoSansCJKjp-DemiLight.ttf') format('truetype'); /* Modern Browsers */
}

@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 400;
	src: url('../../font/NotoSansCJKjp-Regular.ttf') format('truetype'); /* Modern Browsers */
}

@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 500;
	src: url('../../font/NotoSansCJKjp-Medium.ttf') format('truetype'); /* Modern Browsers */
}

@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 700;
	src: url('../../font/NotoSansCJKjp-Bold.ttf') format('truetype'); /* Modern Browsers */
}

@font-face {
	font-family: 'Noto Sans CJK JP';
	font-style: normal;
	font-weight: 900;
	src: url('../../font/NotoSansCJKjp-Black.ttf') format('truetype'); /* Modern Browsers */
}

img {
	width: 100%;
	height: auto;
	display: block;
}

a img:hover {opacity: 0.7;}

/* ========================================================================================================
	レイアウト
======================================================================================================== */
.wrap {width: 100%;}
header {background: #f1f1f1;}

.bl_header-inner {
	width: 100%;
	max-width: 1200px;
	margin-inline:auto;
}

main {
	width: 100%;
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin-inline:auto;
	margin-top: 60px;
}

.bl_main-content {
	width: calc(100% - 360px);
	max-width: 840px;
}

.bl_side-content {
	width: 100%;
	max-width: 320px;
}

footer {
	background: #969696;
	margin-top:160px;
	padding:30px;
}

.footer-inner {
	width: 100%;
	max-width: 1200px;
	margin-inline:auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bl_footer-navi {display: flex;}
.el_footer-link {
	display: inline-block;
	padding: 5px 10px;
}

/* ========================================================================================================
	ヘッダー
======================================================================================================== */
.bl_header-top {
	background: #969696;
}
.bl_haeder-topInner {
	width: 100%;
	max-width: 1200px;
	margin-inline:auto;
	display: flex;
	align-items: center;
}

[class*="el_logo-"] {
	width: 100%;
	max-width: 200px;
}

[class*="el_logo-"] a:hover {
	background: rgb(255 255 255);
	display: block;
}


/* ========================================================================================================
	グローバルナビ
======================================================================================================== */
.bl_navi-area {
	width: 100%;
	padding: 5px 0;
}

.bl_gloval-navi {
	width: 100%;
	max-width: 1200px;
	margin-inline:auto;
	display: flex;
	justify-content: flex-end;
}

.el_navi-link {
	display: block;
	padding:5px 10px;
	font-size: 1.8rem;
}

.el_navi-link:hover {
	background: #f7f7f7;
	text-decoration: none;
}

/* ========================================================================================================
	ハンバーガーメニュー
======================================================================================================== */
.bl_hamburger-button {display: none;}

/* ========================================================================================================
	サイドナビ
======================================================================================================== */
.bl_side-content > .bl_col01-content:nth-of-type(1) {margin-top:0;}
.bl_side-content > .bl_col01-content:nth-of-type(2) {
	position: sticky;
    top: 20px;
}
.el_sideCat-item {border-bottom:1px solid #969696;}

.el_sideCat-link {
	display: block;
	position: relative;
	padding-left:20px;
	padding: 15px 10px 15px 30px;
}

.el_sideCat-link::before,.el_sideCat-link::after {
	display: block;
	position: absolute;
	content:"";
	top:50%;
}

.el_sideCat-link::before {
	background:#969696;
	width: 20px;
	height:20px;
	transform: translateY(-50%);
	border-radius:100%;
	left:0;
}

.el_sideCat-link::after {
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height:8px;
	left:4px;
}

/* サブカテゴリー
-------------------------------------------------------------------------------------------------------- */
.bl_subSideCat-menu {margin-left:2rem;}
.bl_subSideCat-menu > .bl_col01-content:nth-of-type(1) {margin-top:0;}
.bl_subSideCat-menu .el_sideCat-item {
	border-top:1px solid #969696;
	border-bottom:none;
}

.bl_subSideCat-menu .el_sideCat-link {
}

.bl_subSideCat-menu .el_sideCat-link::before,.el_sideCat-link::after {
}

.bl_subSideCat-menu .el_sideCat-link::before {
	display: none;
}

.bl_subSideCat-menu .el_sideCat-link::after {
	border-top:1px solid #333;
	border-right:1px solid #333;
}

/* 見出し
-------------------------------------------------------------------------------------------------------- */
/* h1
--------------------------------------------------- */
.bl_headline01-ver01 {
	color: #444;
	font-size: 24px;
	position: relative;
	padding: 10px 0 2px 28px;
	border-bottom: 2px solid #999;
}

.bl_headline01-ver01::before, .bl_headline01-ver01::after {
	content: "";
	position: absolute;
	margin: auto;
}
.bl_headline01-ver01::before{
	width: 12px;
	height: 12px;
	top: 0;
	left: 14px;
	background: #999;
	transform: rotate(50deg);
}
.bl_headline01-ver01::after{
	width: 8px;
	height: 8px;
	top: 18px;
	left: 6px;
	background: #999;
	transform: rotate(20deg);
}

  /* 見出しの下線 */
[class*="bl_headline02-ver0"] {position: relative;}
[class*="bl_headline02-ver0"]::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	height: 4px;
}

[class*="bl_headline02-ver0"] [class*="el_headline0"] {position: relative;}
[class*="bl_headline02-ver0"] [class*="el_headline0"] {
	display: inline-block;
    border-bottom: 4px solid #ccc;
	padding-bottom: 8px;
	position: relative;
    z-index: 2;
}

[class*="bl_headline02-ver0"]::after {
    width: 100%;
    background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
    background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}


/* ========================================================================================================
	モーダル
======================================================================================================== */
.bl_modal-area {
	width: 100%;
	min-block-size: 100svb;
	background: rgb(0 0 0 / .8);
	position: fixed;
	top:0;
	z-index: 100;
    display: block grid;
    place-items: center;
	display: none;
}

.bl_modal-area.bl_display-on {display: flex;}

.bl_modal-inner {
	width: 90%;
	max-width: 750px;
	max-height: calc(100svb - 40px);
	margin-inline:auto;
	background: rgb(255, 255, 255);
	padding:20px;
	overflow-y: auto;
}

.el_modal-headline {
	text-align: center;
	position: relative;
}

.el_close-btn {
	position: absolute;
	top: calc(50% - 15px);
	left: calc(100% - 30px);
}

.el_close-btn:hover {cursor: pointer;}

.el_close-inner {
	position: fixed;
	width: 30px;
	height: 30px;
	display: block;
	border: 1px solid rgb(51, 51, 51);
	border-radius: 4px;
	background: rgb(255, 255, 255);
}

.el_close-inner:before,
.el_close-inner:after {
	content:"";
	position: absolute;
	top:calc(50% - 10px);
	width: 1px;
	height:20px;
	background: rgb(51, 51, 51);
}

.el_close-inner:before {
	transform: rotate(45deg);
}

.el_close-inner:after {
	transform: rotate(-45deg);
}

.el_modal-lead {
	margin-top:30px;
}

.bl_modal-enu {

}

.el_modal-item {

}

.el_modal-link {
	margin-top:30px;
	display: block;
}

/* ========================================================================================================
	ページャー
======================================================================================================== */
.bl_pager-area {
	width: 100%;
	max-width: 750px;
	margin-top:30px;
	margin-inline:auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bl_pager-area li + li {margin-left:20px;}
.el_nth-box {
	margin-left:20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.el_nth-box > * {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 2px 5px;
	min-width: 30px;
	text-align: center;
}
.el_nth-box > * + * {
	margin-left:20px;
}
.el_nth-box .el_ellipses {border:none;}

.el_first-item a,
.el_first-item span,
.el_prev-item a,
.el_prev-item span,
.el_next-item a,
.el_next-item span,
.el_last-item a,
.el_last-item span {
	font-size: 0;
    height: 30px;
    display: block;
    width: 30px;
	position: relative;
}

.el_first-item a::before,
.el_first-item a::after,
.el_first-item span::before,
.el_first-item span::after,
.el_prev-item a::before,
.el_prev-item span::before,
.el_next-item a::before,
.el_next-item span::before,
.el_last-item a::before,
.el_last-item a::after,
.el_last-item span::before,
.el_last-item span::after {
	content:"";
	position: absolute;
	top:calc(50% - 7px);
    display: block;
    height: 14px;
    width: 14px;
	border-top:1px solid #333;
	border-right:1px solid #333;
}

.el_first-item a::before,
.el_first-item span::before {
	transform: rotate(-135deg);
	left:calc(50% - 8px);
}

.el_first-item a::after,
.el_first-item span::after {
	transform: rotate(-135deg);
	left:50%;
}

.el_prev-item a::before,
.el_prev-item span::before {
	transform: rotate(-135deg);
	left:calc(50% - 6px);
}

.el_last-item a::before,
.el_last-item span::before {
	transform: rotate(45deg);
	left:calc(50% - 8px);
}

.el_last-item a::after,
.el_last-item span::after {
	transform: rotate(45deg);
	left:50%;
}

.el_next-item a::before,
.el_next-item span::before {
	transform: rotate(45deg);
	left:calc(50% - 6px);
}

.el_first-item span::before,
.el_first-item span::after,
.el_prev-item span::before,
.el_prev-item span::after,
.el_next-item span::before,
.el_next-item span::after,
.el_last-item span::before,
.el_last-item span::after {border-color:#ccc;}

.el_current-item {
	background: #333;
	color:#fff;
}



/* ========================================================================================================
	記事ページ
======================================================================================================== */
.bl_main-content > .bl_item-container + .bl_related-articles {
	margin-top: 100px;
	padding: 20px;
    box-sizing: border-box;
    background: #e7e7e7;
}

.bl_main-content > .bl_item-container + .bl_related-articles .bl_item-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	column-gap: 10px;
}

/* ========================================================================================================
	大見出し
======================================================================================================== */

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

/* 小見出し */


/* ========================================================================================================
	SP用CSS
	------------------------------------------------------------------------------------------------------
	@media all and (max-width: 768px)
======================================================================================================== */
@media all and (max-width: 750px) {
/* ========================================================================================================
	PCレイアウト用からSPレイアウト用に上書き処理
======================================================================================================== */
	/* SP時表示・非表示切り替え */
	.el_pc-display {display:none;}
	.el_sp-display {display:block;}

/* ========================================================================================================
	レイアウト
======================================================================================================== */
	main {
		display: block;
		width: calc(690 / 733 * 100%);
		max-width: 690px;
	}

	.bl_main-content {
		width: 100%;
		max-width: 690px;
	}

	.bl_side-content {
		max-width: 100%;
		position: fixed;
		overflow-y: scroll;
		top:0;
		left: 0;
		background: #aaa;
		z-index: 4;
		padding: 10px;
		height: 100vh;
		height: 100dvh;
		-webkit-overflow-scrolling: touch;
		animation: slide-animation .5s forwards;
	}

	.el_menu-set {left: 100%;}

	@keyframes slide-animation {
		0% {
			transform: translateX(0);
		}
		100% {transform: translateX(100%);}
	}

	.bl_side-content.active {
		opacity: 1;
		animation: slide-animation-open .5s forwards;
	}

	@keyframes slide-animation-open {
		0% {
			transform: translateX(100%);
		}
		100% {transform: translateX(0);}
	}

	.footer-inner {
		display: block;
	}

	.bl_footer-navi {
		flex-wrap: wrap;
		margin-top:calc(60 / 630 * 100%);
	}

/* ========================================================================================================
	ハンバーガーメニュー
======================================================================================================== */
.bl_hamburger-button {
	display: inline-block;
	position: fixed;
	top:10px;
	right: 10px;
	z-index: 5;
}

/* .btn-trigger
-------------------------------------------------------------------------------------------------------- */
.btn-trigger {
	position: relative;
	width: 50px;
	height: 44px;
	cursor: pointer;
	display: inline-block;
}
.btn-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
}
.btn-trigger span {
	display: inline-block;
	transition: all .5s;
	box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {top: 0;}
.btn-trigger span:nth-of-type(2) {top: 20px;}
.btn-trigger span:nth-of-type(3) {bottom: 0;}

/*=============================
#btn18
=============================*/
#btn18 span:nth-of-type(1) {
	animation: btn18-bar01 .5s forwards;
}
@keyframes btn18-bar01 {
	0% {transform: translateY(20px) rotate(-45deg);}
	100% {transform: translateY(0) rotate(0);}
}
#btn18 span:nth-of-type(2) {animation: btn18-bar02 .5s forwards;}
@keyframes btn18-bar02 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#btn18 span:nth-of-type(3) {animation: btn18-bar03 .5s forwards;}
@keyframes btn18-bar03 {
	0% {transform: translateY(-20px) rotate(45deg);}
	100% {transform: translateY(0) rotate(0);}
}
#btn18::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	content: '';
	width: 30px;
	height: 30px;
	margin: -16px 0 0 -16px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.3);
	transition: all .1s;
	opacity: 0;
}
#btn18.active::after {animation: circle .5s;}
@-webkit-keyframes circle {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes circle {
	0% {
		transform: scale(.1);
		opacity: 0;
	}
	50% {opacity: 1;}
	100% {
		transform: scale(3.5);
		opacity: 0;
	}
}
#btn18.active span:nth-of-type(1) {animation: active-btn18-bar01 .5s .5s forwards;}
@keyframes active-btn18-bar01 {
	0% {transform: translateY(0) rotate(0);}
	100% {transform: translateY(20px) rotate(-45deg);}
}
@-webkit-keyframes active-btn18-bar02 {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
#btn18.active span:nth-of-type(2) {animation: active-btn18-bar02 .5s .5s forwards;}
@keyframes active-btn18-bar02 {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
#btn18.active span:nth-of-type(3) {
	-webkit-animation: active-btn18-bar03 .5s .5s forwards;
	animation: active-btn18-bar03 .5s .5s forwards;
}
@keyframes active-btn18-bar03 {
	0% {transform: translateY(0) rotate(0);}
	100% {transform: translateY(-20px) rotate(45deg);}
}

/* ========================================================================================================
	グローバルナビ
======================================================================================================== */
	.bl_navi-area {display: none;}

	.bl_gloval-navi {
		display: block;
	}

/* ========================================================================================================
	ページャー
======================================================================================================== */
	.bl_pager-area {
		flex-wrap: wrap;
		margin-top: 30px;
	}
	.el_first-item {order:2;}
	.el_prev-item {order:3;}
	.el_nth-box {
		width: 100%;
		order:1;
		margin-left: 0 !important;
        margin-bottom: 20px;
	}
	.el_next-item {order:4;}
	.el_last-item {order:5;}
}