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

article{
	width:100%;
	min-width:var(--section-min-width);
	padding-top:var(--header-height);
	background-color:var(--firstBlack);
	color:var(--secondWhite);
}
section, aside{
	width:100%;
	min-width:var(--section-min-width);
	padding-top:75px;
	padding-bottom:125px;
	padding-left:calc(calc(100% - var(--section-min-width)) / 2);
	padding-right:calc(calc(100% - var(--section-min-width)) / 2);

}

/* --- キービジュアルセクション ------------------------------------------------------ */
#hero_section {
	width: 100%;
	margin: 0;
	padding: 0;
}
.heroFigure {
	margin: 0;
	width: 100%;
}
.heroFigure img {
	display: block;
	width: 100%;
	height: auto;
}


/* 見出し装飾 ------------------------------------------------------ */
section > h2{
	/*font-family:"Noto Serif JP", serif;*/
	font-size:2.5rem;
	margin-bottom:75px;
	border-bottom:6px solid var(--ctcBlue);
	display:inline-block;
}
section > h2 span{
	display:inline-block;
	margin-left:80px;
	font-size:0.9rem;
	color:var(--lightGray);
}


/* --- コラムセクション ------------------------------------------------------ */

/* カードのレイアウト */
section#sectionColumn ul{
	width:auto !important;
	overflow:visible;
}

section#sectionColumn ul li.nameCard{
	display:block;
	list-style:none;
	width:450px!important;
	overflow:hidden;
	margin-right:45px;
	/*background-color:var(--ctcDeepBlue);*/
	background-color:var(--ctcDeepDeepBlue);
}
/* 全体クリック */
section#sectionColumn ul li.nameCard > a{
	display:block;
	height:100%;
}
section#sectionColumn ul li.nameCard > a:hover{
	color:var(--ctcDeepBlue);
}
section#sectionColumn ul li a .areaPhoto{
	display:inline-flex;
	align-items:flex-start; /* 画像とテキストの位置関係 */
	gap:3.2rem;         /* 画像と文字の隙間（可変） */
}
section#sectionColumn ul li a .areaPhoto img{
	display:block;
	height:auto;
	width:auto;
	max-width:100%; /* 必要なら縮小 */
}
section#sectionColumn ul li.nameCard > a .areaPhoto p{
	margin:0;
	white-space:nowrap;
	transform:rotate(90deg);
	transform-origin:left top;
	margin-top:2px;
	color:var(--firstBlack);
	color:var(--ctcBlue);
	font-size:50px;
	font-family:"Special Gothic Condensed One", system-ui;
	font-weight:400;
	font-style:normal;
/*	  text-shadow:0px 3px 0px var(--ctcBlue);*/
}
section#sectionColumn ul li.nameCard > a .areaText{
	padding:0.5rem 1rem 1rem 1rem;
}
section#sectionColumn ul li.nameCard > a:hover .areaText p{
	color:var(--ctcDeepBlue)!important;
}
section#sectionColumn ul li.nameCard > a .areaText .authorName{
	font-family:"New Tegomin", serif;
	font-family:"Noto Serif JP", serif;
	font-weight:400;
	font-style:normal;
	margin-bottom:8px;
	font-size:2.2rem;
	color:var(--secondWhite);
}
section#sectionColumn ul li.nameCard > a .areaText .columnTitle{
	font-size:1.2rem;
	font-weight:bold;
	line-height:1.4;
	margin-bottom:8px;
	color:var(--secondWhite);
}
section#sectionColumn ul li.nameCard > a .areaText .columnDate{
	font-size:0.85rem;
	color:var(--secondWhite);
	margin-bottom:6px;
}


/* --- ニュースセクション ------------------------------------------------------ */
section#sectionNewsRelease{
	background-color:var(--secondBlack)!important;
}
section#sectionNewsRelease ul li{
	list-style:none;
	border-bottom:dotted 1px var(--pureWhite);
}
section#sectionNewsRelease ul li a{
	display:flex;
	padding:2.5rem 1rem;
	align-items:center;
	justify-content:flex-start;
	gap:1rem;
	color:var(--secondWhite);
	text-decoration:none;
}
section#sectionNewsRelease ul li a:hover{
	color:var(--firstBlack);
}
section#sectionNewsRelease ul li a time{
	display:block;
	width:10rem;
}


/* --- CTC総研とはセクション ------------------------------------------------------ */

section#sectionAbout > div{
	display:flex;
	gap:50px;
	width:calc(var(--section-min-width) - 7rem);
	margin-left:auto;
	margin-right:0;
}
section#sectionAbout > div > p{
	line-height:2.0;
}


/* --- aside（バナーエリア） ------------------------------------------------------ */

aside{
	background-color:var(--lightGray);
	padding-bottom:75px;
}
aside a{
	display:block;
	margin:50px auto;
	width:fit-content;
	height:fit-content;
}
aside a img{
	display: block;
	vertical-align: bottom;
}


/* FOR SMART PHONE ===================================================================== */
@media screen and (max-width:768px){
	html{
		font-size:4vw;
	}
	header{
		width:100%;
	}
	article{
		width:100%;
		min-width:100%;
		padding-top: var(--header-height-sp)
	}
	section, aside{
		width:100%;
		min-width:100%;
		padding-left:5vw;
		padding-right:5vw;
	}
	aside{
		padding-top:5vw;
		padding-bottom:5vw;
	}
	aside a{
		margin-top:5vw;
		margin-bottom:5vw;
	}
	img{
		max-width:100%;
	}
	section#sectionAbout > div{
		display:block;
		width:100%;
	}
	section#sectionAbout > div img{
	display:block;
	width:80vw;
	margin:1rem auto;
	}
	section > h2 {
		display: block;
		margin-left: 0;
		padding-bottom: 0.5rem;
		margin-bottom:2.0rem;
		font-size:2.0rem;
	}
	section > h2 span {
		display: block;
		margin-left: 0;
	}
	section#sectionColumn ul li a .areaPhoto img {
		width: 65vw;
		margin-right:2vw;
	}
	section#sectionNewsRelease ul li a{
		display:block;
	}
	section#sectionNewsRelease ul li a time {
		margin-bottom:0.7em;
	}
}

/*記事が3つの間はスライドしない*/
section#sectionColumn ul._forNowUsingFlex{
	display:flex;
	min-width: var(--section-min-width);
}
section#sectionColumn ul._forNowUsingFlex li{
	height: auto !important;
}
/* クリックを禁止 */
.disabled_link {
	pointer-events: none; /* クリックを無効化 */
	cursor: default; /* カーソルを指マークにしない */
}
/* FOR SMART PHONE */
@media screen and (max-width:768px){
	section#sectionColumn ul._forNowUsingFlex{
		display:block;
		min-width:100%;
	}
	section#sectionColumn ul._forNowUsingFlex li{
		width:auto!important;
		margin-bottom:2em;
		margin-right:0;
	}
}