/* column_article.css */
@charset "UTF-8";

.column .subpageMV{
	background-image:url(../images/mv.png);
}

.dateArea{
	display:flex;
	justify-content:space-between;
	margin-bottom:20px;
}
.dateArea p.volumeNum{
	display:flex;
	align-items:center;
	justify-content:center;
	width:fit-content;
	padding:1px 10px;
	font-family:"Oswald", sans-serif;
	font-size:14px;
	font-weight:bold;
	border:solid 1px #999999;
	background-color:#ffffff;
}
.dateArea p.releaseDate{
	font-size:14px;
	font-weight:normal;
}

h2{/* ARTICLE TITLE */
	font-size:2.0em;
	letter-spacing:0.02em;
	line-height:1.75em;
	padding-bottom:0.5em;
	border-bottom:solid 2px #33a7ff;
}
ul.tagList{
	display:flex;
	justify-content:flex-start;
	flex-wrap: wrap;
	gap:10px;
	margin-top: 1.0em;
	margin-bottom:7.0em;
}
ul.tagList li{
	display: block;
	width: fit-content;
	height: fit-content;
	margin: 0px;
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5em;
	background-color: #ffffff;
	color: #005cca;
	border: solid 1px #0072c4;
}

h3{/* HEADINGS IN THE MAIN TEXT */
	padding:0.5em 0;
	font-size:1.2em;
	font-weight:bold;
	line-height:1.75em;
	border-top:dotted 1px #000000;
	border-bottom:dotted 1px #000000;
	margin-bottom:1.0em;
}

h4{
	font-size:1.1em;
	display:block;
	margin:2em 0 1em 0;
	padding:0 0 0 8px;
	border-left:solid 18px #cccccc;
}
h5{
	font-size:1em;
	display:block;
	margin:2em 0 1em 0;
	padding:4px 0 4px 8px;
	border-left:double 10px #cccccc;
}

.normalTextBlock{
	margin-bottom:3.5em;
}
.normalTextBlock > p + p,
.textBlockWithImage > p + p{
	margin-top:1.25em;
}

.attentionTextBlock{
	margin-bottom:3.5em;
}
.attentionTextBlock p{
	color:#555555;
	padding-left:2.0em;
	text-indent:-1.0em;
	font-size:0.9em;
}
.attentionTextBlock p > span.attentionMark{
	display:inline-block;
	width:1.0em;
}

.normalTextBlock > ul,
.textBlockWithImage > ul,
.normalTextBlock > ol,
.textBlockWithImage > ol{
	margin-left:2.0em;
	line-height:1.75em!important;
}
.normalTextBlock > ul > li,
.textBlockWithImage > ul > li{
	list-style:disc!important;
	margin-bottom:1em;
}
.normalTextBlock > ol > li,
.textBlockWithImage > ol > li{
	list-style:decimal!important;
	margin-bottom:1em;
}


/* IMAGE BLOCK */
.textBlockWithImage{
	max-width:1400px;
	margin:0 auto 3.5em auto;
	overflow:hidden;
	position:relative;
}
.imageRight{
	float:right;
	width:clamp(350px, 35%, 500px);
	margin-left:1.5em;
	margin-bottom:1.0em;
}
.imageLeft{
	float:left;
	width:clamp(350px, 35%, 500px);
	margin-right:1.5em;
	margin-bottom:1.0em;
}
.imageCenter{
	max-width:80%;
	width:fit-content;
	margin:3.5em auto;
}
.flexColumn{
	display:flex;
	box-sizing:border-box;
	justify-content:space-between;
	gap:50px;
	margin:3.5em auto;
}
.flexColumn figure{
	max-width:50%;
	width:fit-content;
}
.imageRight img,
.imageLeft img{
	display:block;
	width:100%;
	height:auto;
}
.imageCenter img,
.flex2col figure img{
	display:block;
	width:initial;
}

figcaption{
	text-align:left;
	font-size:0.9em;
	color:#666666;
	margin-top:0.6em;
	line-height:1.5em;
}
figcaption.capCenter{
	text-align:center;
}


/* LIGHT BOX ICON */
/* @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'); */
a[data-lightbox]{
	display:block;
	width:fit-content;
	height:fit-content;
	position:relative;
}
a[data-lightbox]::after{
	font-family:'Material Symbols Outlined';
	content:"zoom_in"; /* Specify the icon name defined by Google as text. */
	font-size:30px;
	display:block;
	padding:4px;
	background:linear-gradient(to right, #0072c4 0%, #33a7ff 100%);
	color:#ffffff;
	position:absolute;
	bottom:2px;
	right:2px;
}


/* TABLE */
.table-scroll{
	overflow-x:auto;
	margin:3.5em auto;
}
table{
	max-width:100%;
	border-spacing:0;
	border-collapse:collapse;
	width:100%;
	min-width:800px;/* Trial and error is necessary to find the optimal solution. */
	border:solid 1px #dee4e8;
}
table th,
table td{
	box-sizing:border-box;
	padding:1.0em;
	border:solid 1px #dee4e8;
}
th{
	background-color:#eef3f6;
	color:#333333;
}
table > caption.upperSide{
	caption-side:top;
	margin-bottom:0.5em;
	font-size:1.2em;
	font-weight:bold;
	text-align:left;
}
table > caption.upperSide::before{
	content:"■";
	color:#429aef;
}
table > caption.underSide{
	caption-side:bottom;
	text-align:left;
	font-size:0.9em;
	color:#666666;
	margin-top:0.6em;
	line-height:1.5em;
}

/* RELATED LINKS */
.listRelatedLinks{
	width:100%;
	margin-bottom:3.5em;
}
.listRelatedLinks li{
	list-style:disc!important;
	width:100%;
	margin-left:1.7em;
	margin-bottom:1.0em;
	font-weight:bold;
}
.listRelatedLinks li a{
	display:inline-block;
	margin-left:1.0em;
	color:#3388ee !important;
	text-decoration:underline !important;
	font-weight:normal!important;
}
.listRelatedLinks li a[target="_blank"]::after{
	content:'';
	display:inline-block;
	background-image:url(/common/img/ic_blank.png);
	background-size:contain;
	background-repeat:no-repeat;
	vertical-align:middle;
	width:15px;
	height:16px;
	margin-left:8px;
}

/* AUTHOR INFORMATION BLOCK */
.authorInformationBlock{
	display:block;
	box-sizing:border-box;
	width:100%;
	border:solid 1px #cccccc;
	padding:2.0em;
}
.authorInformationBlock .gridID{
	display:grid;
	grid-template-areas:
		"photo title"
		"photo text";
	grid-template-columns:200px calc(100% - 200px - 20px);
	grid-template-rows:auto auto;
	gap:0 20px;
}
.authorPhoto{ grid-area:photo; }
.titleTag{ grid-area:title; }
.authorText{ grid-area:text; }

.authorInformationBlock .gridID > .authorPhoto{
/*	width:fit-content;
	height:fit-content;*/
}
.authorInformationBlock .gridID > .authorPhoto img{
	display:block;
	width:200px;
	height:250px;
}
.authorInformationBlock .gridID > .titleTag{
	width:fit-content;
	height:fit-content;
}
.authorInformationBlock .gridID > .titleTag .authorTitle{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:0.9em;
	letter-spacing:0.1em;
	padding:0px 2em;
	color:#ffffff;
	background-color:#000000;
}
.authorInformationBlock .gridID > .authorText .personName{
	font-size:1.4em;
	font-weight:bold;
}
.authorInformationBlock .gridID > .authorText .personBbelongsAndPosition{
	line-height:2.0em;
}
.authorInformationBlock .gridID > .authorText .profile{
	padding-top:1em;
	margin-top:1em;
	border-top:dotted 1px #000000;
}

/* OPTION BLOCK */
#optionBlock{
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: stretch; /* 子要素の高さを揃える */
}
#optionBlock > div{
	display: flex;
	flex-direction: column; /* 縦に積む */
	margin-top:50px;
	padding: 30px 0px;
	width: 48%;
	border:solid 1px #cccccc;
}
#optionBlock > div > p {
	margin:0 auto;
	text-align:center;
	font-weight:bold;
	flex: 1; /* 余白を埋める */
}
#optionBlock > div > .btnArea .btnArrow{
	/*width:3.0rem;*/
	font-size:0.2rem;
	margin:10px auto 0 auto;
}
#optionBlock > div > .btnArea{
	text-align:center;
}

/* PAGER BLOCK */
#pagerBlock .pagerList{
	display:flex;
	justify-content:center;
	gap:10px;
	margin:3.5em auto;
}
#pagerBlock .pagerList li{
	display:block;
}
#pagerBlock .pagerList li a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:3em;
	height:3em;
	text-decoration:none;
	font-weight:bold;
	border:solid 1px #0072c4;
	color:#0072c4;
}
#pagerBlock .pagerList li.current a{
	background-color:#cccccc;
	cursor:default;
	pointer-events:none;
	color:#999999;
	border:solid 1px #666666;
}


#backToIndexBlock{
	display:flex;
	justify-content:flex-end;
	margin-top:3.0em;
}


/* FOR SMART PHONE ===================================================================== */
@media screen and (max-width:979px){
	ul.tagList{
		margin-bottom:3.0em;
	}
	.textBlockWithImage .image-block{
		float:none;
		width:100%;
		max-width:500px;
		margin:20px auto 10px;
	}
	.imageCenter{
		max-width:95vw;
	}
	.authorInformationBlock .gridID{
		display:grid;
		grid-template-areas:
			"title"
			"photo"
			"text";
		grid-template-columns:100%;
		grid-template-rows:auto auto auto;
		gap:1em 0;
	}
	.authorInformationBlock .gridID > .authorPhoto img{
		margin:0 auto;
	}
	.authorInformationBlock .gridID > .authorText .personName,
	.authorInformationBlock .gridID > .authorText .personBbelongsAndPosition{
		text-align:center;
	}
	.col2 .sideArea{
		width:100%;
	}
	#optionBlock{
		display: block;
		width:100%;
	}
	#optionBlock > div{
		display:block;
		margin-top:2em;
		width:100%;
	}
	#optionBlock > div > .btnArea .btnArrow{
		font-size:0.15rem;
	}

}