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

article{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-top:100px;
}

article a{
	transition:0.7s;
}
article a:hover{
	opacity:0.5;
	transition:0.3s;
}
article p{
	line-height:2.2em;
	font-weight:400;
}



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 var(--firstBlack);
	border-bottom:dotted 1px var(--firstBlack);
	margin-bottom:1.0em;
}

h4{
	font-size:1.2em;
	display:block;
	margin:2em 0 1em 0;
	padding:0 0 0 8px;
	border-left:solid 11px var(--ctcBlue);
}
h5{
	font-size:1em;
	display:block;
	margin:2em 0 1em 0;
	padding:2px 0 2px 8px;
	border-left:double 10px var(--ctcBlue);
}

.normalTextBlock{
	margin-bottom:3.5em;
}
.normalTextBlock.__extended{
	box-sizing:border-box;
	border:solid 1px var(--ctcDeepBlue);
	background-color:var(--firstWhite);
	margin-bottom:3.5em;
	padding:25px 30px;
}
.normalTextBlock.__extended p{
	font-size:0.9em;
}
.normalTextBlock.__extended02{
	box-sizing:border-box;
	border:solid 1px var(--lightGray);
	background-color:var(--firstWhite);
	margin-bottom:3.5em;
	padding:25px 30px;
}
.normalTextBlock.__extended02 p{
	font-size:0.65em;
}
.normalTextBlock p.textLead{
	font-weight:600;
	color:var(--thirdBlack);
}
.normalTextBlock > p + p,
.textBlockWithImage > p + p{
	margin-top:1.25em;
}

.attentionTextBlock{
	margin-bottom:3.5em;
}
.attentionTextBlock p{
	color:var(--thirdBlack);
	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-top:1em;
	margin-bottom:1em;
	margin-left:2.0em;
	line-height:1.75em!important;
}
.normalTextBlock > ul > li,
.textBlockWithImage > ul > li{
	list-style:disc!important;
	margin-bottom:1em;
}
.normalTextBlock > ul > li::marker,
.textBlockWithImage > ul > li::marker{
	color:var(--theGray);
}
.normalTextBlock > ol > li,
.textBlockWithImage > ol > li{
	list-style:decimal!important;
	margin-bottom:1em;
}


/* Figure */
figcaption.upperSide{
	caption-side:top;
	margin-bottom:0.5em;
	font-weight:bold;
	text-align:left;
}
figcaption.lowerSide{
	caption-side:bottom;
	text-align:left;
	font-size:0.9em;
	color:var(--darkGray);
	margin-top:0.6em;
	line-height:1.5em;
}
figcaption._textCenter{
	text-align:center;
}

/* IMAGE BLOCK */
.textBlockWithImage{
	/* max-width:1400px; 案件により適宜調整*/
	margin:0 auto 3.5em auto;
}
.imageRight{
	float:right;
	width:clamp(350px, 35%, 500px);
	margin-left:1.5em;
}
.imageLeft{
	float:left;
	width:clamp(350px, 35%, 500px);
	margin-right:1.5em;
}
.imageRight img,
.imageLeft img{
	display:block;
	width:100%;
	height:auto;
}
.textBlockWithImage::after{
	content:"";
	display:block;
	clear:both;
}
.textBlockWithImage figure img{
	display:block;
	width:100%;
	height:auto;
}
.imageCenter{
	max-width:1000px;
	width: fit-content;
	margin:3.5em auto;
}
.imageCenter img{
	/*width:100%;*/
	max-width: 1000px;
}
.flexColumn{
	display:flex;
	box-sizing:border-box;
	justify-content:space-between;
	gap:30px;
	margin:3.5em auto;
}
.flexColumn figure{
	flex:1;                  /* 均等に横幅を取る */
	margin:0;
	max-width:50%;           /* 横2カラム維持 */
}
.flexColumn figure img{
	display:block;
	width:100%;              /* 枠にフィット */
	height:auto;             /* 比率維持 */
	max-width:1200px;        /* 画像の想定最大サイズ */
}
/* テキスト整形 */
figcaption{
	text-align:left;
	font-size:0.9em;
	color:var(--darkGray);
	margin-top:0.6em;
	margin-bottom: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:24px;
	display:block;
	padding:3px 6px;
	background-color:var(--ctcDeepBlue);
	text-decoration:none;
	color:var(--pureWhite);
	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 var(--lightLightGray);
}
table th,
table td{
	box-sizing:border-box;
	padding:1.0em;
	border:solid 1px var(--lightLightGray);
}
th{
	background-color:var(--secondWhite);
	color:var(--secondBlack);
}


/* RELATED LINKS */
.listRelatedLinks{
	width:100%;
	margin-bottom:3.5em;
}
.listRelatedLinks li{
	list-style:none;
	/*padding-left:1.7em;*/
	margin-bottom:1.0em;
	font-weight:bold;
}
.listRelatedLinks li a{
	/*display:inline-block;*/
	color:var(--ctcBlue)!important;
	text-decoration:underline !important;
	font-weight:normal!important;
	word-break:break-all;
	position:relative;
}
.listRelatedLinks li a[target="_blank"]::after{
	font-family:'Material Symbols Outlined';
	content:"open_in_new";
	display:block;
	position:absolute;
	bottom:3px;
	right:-20px;
}


/* AUTHOR INFORMATION BLOCK (Upper Side) */
.dateArea{
	display:block;
	margin-bottom:0;
	font-size:0.8rem;
	font-weight:normal;
	text-align:right;
}

#titleArea{
	display:block;
	box-sizing:border-box;
	width:1000px;
	height:300px;
	margin-bottom:50px;
}
#titleArea .gridID{
	display:grid;
	grid-template-areas:
		"photo title"
		"photo text";
	grid-template-columns:345px 655px;
	grid-template-rows:auto auto;
	gap:0;
}
.areaPhoto{ grid-area:photo; }
.areaColumnTitle{ grid-area:title; }
.areaPerson{ grid-area:text; }

#titleArea .gridID > .areaPhoto{
	width:345px;
	height:300px;
	position:relative;
}
#titleArea .gridID > .areaPhoto .romanName{
	display:block;
	margin:0;
	padding:0.3rem;
	width:300px;
	height:45px;
	white-space:nowrap;
	transform:rotate(90deg);
	transform-origin:left top;
	background-color:var(--firstBlack);
	color:var(--theGray);
	font-size:2.25rem;
	font-family:"Special Gothic Condensed One", system-ui;
	font-weight:400;
	font-style:normal;
	line-height:0.9;
	position:absolute;
	top:0px;
	left:45px;
}
#titleArea .gridID > .areaPhoto img{
	display:block;
	width:300px;
	height:300px;
	position:absolute;
	top:0;
	right:0;
}
#titleArea .gridID > .areaColumnTitle{
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	justify-content:flex-end;
	width:655px;
	height:170px;
	padding-left:15px;
	padding-bottom:10px;
	background-color:var(--ctcDeepBlue);
	color:var(--pureWhite);
}
#titleArea .gridID > .areaColumnTitle .columnTitle{
	font-size:40px;
	letter-spacing:0.02em;
	font-weight:bold;
	line-height:1.2em;
	border:none;
}
#titleArea .gridID > .areaColumnTitle .seriesTitle{
	font-size:26px;
	letter-spacing:0.02em;
	font-weight:bold;
	line-height:1.2em;
	margin-bottom:0.4em;
	border:none;
}
#titleArea .gridID > .areaColumnTitle .columnSubTitle{
	font-size:20px;
	letter-spacing:0.02em;
	font-weight:bold;
	line-height:1.2em;
	margin-top:0.4em;
	border:none;
}
#titleArea .gridID > .areaColumnTitle .size22{ font-size:22px!important; }
#titleArea .gridID > .areaColumnTitle .size24{ font-size:24px!important; }
#titleArea .gridID > .areaColumnTitle .size26{ font-size:26px!important; }
#titleArea .gridID > .areaColumnTitle .size28{ font-size:28px!important; }
#titleArea .gridID > .areaColumnTitle .size30{ font-size:30px!important; }
#titleArea .gridID > .areaColumnTitle .size32{ font-size:32px!important; }
#titleArea .gridID > .areaColumnTitle .size34{ font-size:34px!important; }

#titleArea .gridID > .areaPerson{
	height:130px;
}
#titleArea .gridID > .areaPerson .personName{
	margin-left:15px;
	margin-top:8px;
	font-family:"Noto Serif JP", serif;
	font-weight:600;
	font-style:normal;
	font-size:2.0rem;
	color:var(--firstBlack);
	line-height:1;
}
#titleArea .gridID > .areaPerson .personPosition{
	margin-top:11px;
	margin-left:15px;
	line-height:1.75em;
	font-size:15px;
}
#titleArea .gridID > .areaPerson .personPosition span{
	font-size:18px;
}


/* AUTHOR INFORMATION BLOCK (lower Side) */
.authorInformationBlock{
	display:block;
	box-sizing:border-box;
	width:100%;
	border:solid 1px var(--lightGray);
	background-color:var(--secondWhite);
	padding:2.0em;
	margin-bottom:100px;
}
.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.9rem;
	letter-spacing:0.1em;
	padding:0px 2em;
	color:var(--pureWhite);
	background-color:var(--firstBlack);
}
.authorInformationBlock .gridID > .authorText .authorName{
	font-family:"Noto Serif JP", serif;
	font-weight:600;
	font-size:1.4rem;
	font-weight:500;
}
.authorInformationBlock .gridID > .authorText .authorName span{
	font-family:"Special Gothic Condensed One", system-ui;
	display:inline-block;
	margin-left:10px;
	font-size:0.9rem;
	font-weight:normal;
}
.authorInformationBlock .gridID > .authorText .authorPosition{
	line-height:1.75em;
	font-size:0.75rem;
}
.authorInformationBlock .gridID > .authorText .authorPosition span{
	font-size:0.9rem;
}
.authorInformationBlock .gridID > .authorText p.authorProfile{
	padding-top:1em;
	margin-top:1em;
	border-top:dotted 1px var(--firstBlack);
}
.authorInformationBlock .gridID > .authorText ul.authorProfileList{
	margin-top:1em;
	padding-left:1.5em;
}
.authorInformationBlock .gridID > .authorText ul.authorProfileList li{
	font-size:15px;
	margin-bottom:0.5em;
}

/* 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 var(--lightGray);
}
#optionBlock > div > p{
	margin:0 auto;
	text-align:center;
	font-weight:bold;
	flex:1; /* 余白を埋める */
}
#optionBlock > div > a.btn{
	display:block;
	color:var(--pureWhite);
	background-color:var(--theGray);
	margin:10px auto 0 auto;
	padding:4px 20px;
	border-radius:16px;
}

/* SOLUTION BLOCk */
#solutionBlock{
}
#solutionBlock ul{
	display:flex;
	justify-content:space-between;
	flex-wrap:nowrap;
	margin:50px 0 80px 0;
	width:100%;
	list-style:none;
}
#solutionBlock ul li{
	display:block;
	width:220px;
}
#solutionBlock ul li a{
	display:block;
	width:220px;
}
#solutionBlock ul li a img{
	display:block;
	width:220px;
	height:140px;
	border:solid 1px var(--ctcBlue);
}
#solutionBlock ul li a p.solutionName{
	font-size:18px;
	font-weight:bold;
	color:var(--ctcBlue);
	text-decoration:underline;
}
#solutionBlock ul li a p.nText{
	font-size:14px;
	font-weight:normal;
	color:var(--firstBlack);
	text-decoration:none;
}


/* 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 var(--ctcDeepBlue);
	color:var(--ctcDeepBlue);
}
#pagerBlock .pagerList li.current a{
	background-color:var(--lightGray);
	cursor:default;
	pointer-events:none;
	color:var(--theGray);
	border:solid 1px var(--darkGray);
}

/* BUTTON PARTS*/
#contactRegardingThisArticle a{
	display:block;
	margin:100px auto 60px auto;
	padding:10px 70px;
	padding:10px 50px;
	width:fit-content;
	border:solid 1px var(--theGray);
	font-size:0.85rem;
	text-align:center;
	color:var(--darkGray);
}
#contactRegardingThisArticle a.blueBt{/* Blue version */
	background-color:var(--ctcBlue);
	color:var(--pureWhite);
}
#backToIndexBlock{
	display:flex;
	justify-content:center;
	margin-top:0;
	margin-bottom:0;
}
#backToIndexBlock a{
	display:block;
	margin:0 30px;
	padding:10px 50px;
	width:fit-content;
	border:solid 1px var(--theGray);
	font-size:0.85rem;
	text-align:center;
	color:var(--darkGray);
}

/* DISCLAIMER BLOCK */
#disclaimerBlock{
	margin:40px auto 40px auto;
	padding:20px 30px;
	background-color:var(--firstWhite);
	border:solid 1px var(--lightGray);
}
#disclaimerBlock > p{
	font-size:12px;
	line-height:2.2em;
	color:var(--darkGray);
}


/* UTILITY */
._mt00{margin-top:0px;}
._mt10{margin-top:10px;}
._mt20{margin-top:20px;}
._mt30{margin-top:30px;}
._mt40{margin-top:40px;}
._mt50{margin-top:50px;}

._mb00{margin-bottom:0px;}
._mb10{margin-bottom:10px;}
._mb20{margin-bottom:20px;}
._mb30{margin-bottom:30px;}
._mb40{margin-bottom:40px;}
._mb50{margin-bottom:50px;}

._textSmall{
	font-size:0.9em;
}


/* FOR SMART PHONE ===================================================================== */
@media screen and (max-width:768px){
	html{
		font-size:clamp(15px, 4vw, 18px);
	}
	header{
		width:100%;
	}
	section, aside, article{
		width:100%;
		padding-left:5vw;
		padding-right:5vw;
	}
	article {
		padding-top: 65px;
	}
	ul.tagList{
		margin-bottom:3.0em;
	}

	.textBlockWithImage .image-block{
		width:100%;
		max-width:500px;
		margin:20px auto 10px;
	}
	.imageRight,
	.imageLeft{
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
	.imageCenter{
		max-width:100%;
	}
	.imageCenter img{
		max-width:100%;
	}
	.flexColumn{
		flex-direction:column;
	}
	.flexColumn figure{
		max-width:100%;
	}

	#titleArea {
		display:block;
		width:100%;
		height:fit-content;
		margin-bottom:5rem;
	}
	#titleArea .gridID {
		display:block;
	}
	#titleArea .gridID > .areaColumnTitle {
		display:flex;
		align-items:flex-start;
		flex-direction:column;
		justify-content:flex-end;
		width:100%;
		height:fit-content;
		padding:1.0rem;
	}
	#titleArea .gridID > .areaColumnTitle .columnTitle {
		font-size:1.7rem!important;
	}
	#titleArea .gridID > .areaPhoto {
		width:100%;
		height:fit-content;
		display:flex;
		flex-direction:column-reverse;
		padding:1.0rem 0 0.25rem 0;
		background-color:var(--pureWhite);
		border-bottom:solid 1px var(--theGray);
	}
	#titleArea .gridID > .areaPhoto .romanName {
		display:block;
		padding:0.75rem 0.5rem 0.5rem 0.5rem;
		height:auto;
		white-space:nowrap;
		transform:none;
		background-color:var(--pureWhite);
		color:var(--ctcBlue);
		font-size:1.6rem;
		font-family:"Special Gothic Condensed One", system-ui;
		font-weight:400;
		font-style:normal;
		line-height:0.9;
		position:relative;
		text-align:center;
		width:100%;
		top:0;
		left:0;
	}
	#titleArea .gridID > .areaPhoto img {
    display:block;
    width:60vw;
    height:auto;
    margin:0 auto;
    position:relative;
	}
	#titleArea .gridID > .areaPerson {
		height:auto;
		padding:1.0rem;
		background-color:var(--firstBlack);
	}
	#titleArea .gridID > .areaPerson .personName {
		font-size:2.0rem;
		text-align:center;
		margin:0 auto 1.0rem auto;
		color:var(--pureWhite);
	}
	#titleArea .gridID > .areaPerson .personPosition {
		margin:0;
		font-size:0.8rem;
		color:var(--pureWhite);
	}
	#titleArea *{
		position:relative!important;
	}

	.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 > .titleTag {
		width:50vw;
		margin:0 auto;
	}
	.authorInformationBlock .gridID > .authorPhoto img{
		margin:0 auto;
		width:50vw;
		height:auto;
	}
	.authorInformationBlock .gridID > .authorText .authorName{
		margin:0;
		line-height:1.25rem;
		text-align:center;
		font-size:1.6rem;
	}
	.authorInformationBlock .gridID > .authorText .authorName span{
		display:block;
		margin:0.5rem 0 1.0rem 0;
		font-size:1.2rem;
	}
	.authorInformationBlock .gridID > .authorText .authorPosition{
		margin:0;
		font-size:0.9rem;
	}
	.col2 .sideArea{
		width:100%;
	}
	.listRelatedLinks li {
		font-size:0.9rem;
	}
	.listRelatedLinks li a {
		font-size:0.9rem;
		display:inline-block;
	}
	#solutionBlock ul{
		display:block;
		margin:0 auto,
	}
	#solutionBlock ul li{
		display:block;
		margin:2.0rem auto;
	}
	#optionBlock{
		display:block;
		width:100%;
	}
	#optionBlock > div{
		margin-top:2em;
		width:100%;
	}
	#optionBlock > div > a.btn{
	}
	#backToIndexBlock{
		display:block;
	}
	#backToIndexBlock a{
		display:block;
		width:50vw;
		margin:2.0rem auto;
		padding:10px 40px;
	}
}