@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title02{
	letter-spacing : .05em;
	&::after{
		display : block;
		width : calc( 120 * var( --remBase ) );
		height : calc( 2 * var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : #c1ab05;
	}
}
.title03{
	font-family : Roboto , sans-serif;
	letter-spacing : .05em;
	&::after{
		display : block;
		width : calc( 120 * var( --remBase ) );
		height : calc( 2 * var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : #c1ab05;
	}
}
:where( .title04 , .title05 , .title06 ){
	letter-spacing : .05em;
	&::after{
		display : block;
		width : calc( 240 * var( --remBase ) );
		height : calc( 4 * var( --remBase ) );
		margin-top : calc( 16 * var( --remBase ) );
		font-size : 0;
		content : "";
	}
	&.text-center{
		text-indent : .05em;
		&::after{
			margin-inline : auto;
		}
	}
	&.after-120{
		&::after{
			width : calc( 120 * var( --remBase ) );
			height : calc( 2 * var( --remBase ) );
			margin-top : calc( 8 * var( --remBase ) );
		}
	}
	&.after-60{
		&::after{
			width : calc( 60 * var( --remBase ) );
			height : calc( 4 * var( --remBase ) );
			margin-top : calc( 8 * var( --remBase ) );
		}
	}
	&.after-240{
		&::after{
			width : calc( 240 * var( --remBase ) );
			height : calc( 4 * var( --remBase ) );
			margin-top : calc( 16 * var( --remBase ) );
		}
	}
	&.after-yellow{
		&::after{
			background-color : #c1ab05;
		}
	}
	&.after-fjca{
		&::after{
			background-color : var( --fjca-blue );
		}
	}
}



/* --------------------------------------------
   ページタイトル（headline-title）
--------------------------------------------- */
   .section-header  {
    /* margins（SP） */
    margin-top: 3rem ! important;  
    margin-bottom: 4rem ! important;   
   }
	.headline-title {
		position: relative;

		/* text styles */
		font-size: 24px;      /* fz-24 */
		line-height: 29px;    /* lh-29 */
		color: #333;          /* text-body */
		font-weight: 700;     /* fw-bold */
		text-align: center;   /* text-center */

	}

	/* 下線（after-240 + after-yellow 相当） */
	.headline-title::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: calc(240 * var(--remBase));
		height: calc(4 * var(--remBase));
		background-color: #c1ab05; /* after-yellow */
		bottom: -20px; /* 下線の位置、必要に応じて調整可 */
	}

	/* PC（md以上）用調整 */
	@media (min-width: 768px) {
		.headline-title {
			font-size: 32px;    /* fz-md-32 */
			list-style: 1.3;
		}
	}
	@media (max-width: 768px) {
		.headline-title {
			font-size: 32px;    /* fz-md-32 */
		}
	}

/*--大見出しタイトル----*/
.title-L1 {
	line-height: 1.3;
	font-weight: 700 ! important;
	margin-bottom: 1.5rem ! important;
}
	@media (min-width: 768px) {
		.title-L1 {
			font-size: 30px;
		}
	}
	@media (max-width: 768px) {
		.title-L1 {
			font-size: 30px;
		}
	}
.title-L1.center {
	text-align: center;
}

/*--中見出しタイトル----*/
.title-m1 {
	line-height: 1.3;
	font-weight: 700 ! important;
	margin-bottom: 1.5rem ! important;
}
	@media (min-width: 768px) {
		.title-m1 {
			font-size: 24px;
		}
	}
	@media (max-width: 768px) {
		.title-m1 {
			font-size: 24px;
		}
	}
.title-L1.center {
	text-align: center;
}

/*--s小見出しタイトル----*/

/*--子見出しタイトル----*/
.title-s1 {
	color: var(--fjca-blue);
	font-weight: 600;
}
	.title-s1::before {
		content: "ー ";
	}
	.title-s1::after {
		content: " ー";
	}

.title-s2 {
	line-height: 1.3;
	font-weight: 700 ! important;
	margin-bottom: 1.5rem ! important;
}
	@media (min-width: 768px) {
		.title-m2 {
			font-size: 22px;
		}
	}
	@media (max-width: 768px) {
		.title-m2 {
			font-size: 22px;
		}
	}


/* ======
	
/* --------------------------------------------
DETAILS
--------------------------------------------- */
details{
	> div{
		display : grid;
		grid-template-columns : 1fr;
		overflow : hidden;
	}
	&.is-open{
		summary svg{
			rotate : -180deg;
		}
		> div{
			grid-template-rows : 1fr;
		}
	}
	&:not( .is-open ){
		summary svg{
			rotate : 0;
		}
		> div{
			grid-template-rows : 0fr;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	details{
		summary svg{
			transition : rotate .3s ease-in;
		}
		> div{
			transition : grid-template-rows .3s ease-in , padding-top .3s ease-in , padding-bottom .3s ease-in;
		}
	}
}
.details01{
	&.is-open{
		> div{
			padding-top : calc( 24 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FILTER
--------------------------------------------- */
.filter{
	button{
		&[aria-pressed="true"]{
			color : white;
			background-color : color-mix( in srgb , #a8a9a9 100% , transparent );
		}
		&[aria-pressed="false"]{
			color : var( --bs-body-color );
			background-color : color-mix( in srgb , #a8a9a9 40% , transparent );
		}
	}
}
@media ( hover : hover ){
	.filter button:hover{
		color : white;
		background-color : #a8a9a9;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.filter button{
		transition : background-color .3s ease-in , color .3s ease-in;
	}
}
.filterable{
	> li{
		opacity : 1;
		scale : 1;
		&.is-hidden{
			pointer-events : none;
			opacity : 0;
			scale : .95;
			@starting-style{
				opacity : 1;
				scale : 1;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.filterable > li{
		transition : opacity .3s ease , scale .3s ease;
	}
}

/* --------------------------------------------
RANK
--------------------------------------------- */
.rank01{
	> li{
		> img{
			width : auto;
		}
	}
	@media screen and ( width <= 767px ){
		> li{
			img{
				height : calc( 40 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 767px ){
		> li{
			img{
				height : calc( 60 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
DATALIST
--------------------------------------------- */
.detalist01{
	grid-template-columns : calc( 80 * var( --remBase ) ) 1fr;
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
.pagination01{
	a{
		width : calc( 50 * var( --remBase ) );
		height : calc( 50 * var( --remBase ) );
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.more01{
	width : fit-content;
	border-bottom-color : var( --bs-body-color ) ! important;
}


@media ( min-width : 768px ){
	ul.list {
		display: flex;
		gap: 1.5rem ! important;
		padding-left: 0;
		list-style: none;
	}
	a.link-pdf {
		padding: 1em 5em 1em 1em;
		min-width: 16em;
		display: inline-block;
		background: #EEEEEE;
		background-image: url(../images/ui/icon/icon_pdf.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right 1em top 1em;
	}
}
@media ( max-width : 768px ){
	ul.list {
		display: flex;
		gap: 1em ! important;
		padding-left: 0;
		list-style: none;
		flex-wrap: wrap !important;
	}
	a.link-pdf {
		padding: 1em 55px 1em 1em;
		min-width: 10em;
		display: inline-block;
		background: #EEEEEE;
		background-image: url(../images/ui/icon/icon_pdf.svg);
		background-size: 40px auto;
		background-repeat: no-repeat;
		background-position: right 5px top 1em;
	}
}