@charset "utf-8";

/**,*::before,*::after{box-sizing:border-box}*/html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}/*h1,h2,h3,h4{text-wrap:balance}*/a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;}picture{display:block}img{display:inline-block;}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	padding-top: 68px;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
/*	background: url("../imgs/trace.png") top center no-repeat;*/
	background: url("../imgs/trac-e.png") top center no-repeat, url("../imgs/common/bg.png") repeat;
}

#body, p {
	color: #2a2a2a;
	text-align: justify;
}

a {
	text-decoration: none;
}

input, textarea, button {
/*
	-webkit-appearance: none;
*/
	outline: none;
}

img {
	display: block;
	vertical-align: bottom;
	margin: 0;
	border: 0;
}






body > header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 22000;
	display: flex;
	width: 100%;
	height: 100%;
	max-height: 68px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body > header.float {
	box-shadow: 0 2px 20px rgba(0,0,0,0.18);
}

#sitetitle {
	width: 100%;
	max-width: 332px;
	margin: 0;
	padding: 0;
}

#sitetitle img {
	width: 100%;
	max-width: 332px;
	height: auto;
}

#sitephrase {
	width: 100%;
	max-width: 236px;
}

#sitephrase img {
	width: 100%;
	max-width: 236px;
	height: auto;
}

#mainNav {
	display: flex;
	width: 100%;
}

#mainNav ul {
	display: flex;
	margin: 0 0 0 80px;
	padding: 0;
	list-style: none;
	gap: 0 41px;
}

#mainNav a {
	display: inline-block;
	height: 68px;
	font-size: 1.5rem;
	line-height: 68px;
	white-space: nowrap;
	
	color: #999;
}

#mainNav a:before {
	font: var(--fa-font-solid);
	font-weight: 900;
	font-size: 2.0rem;
	display: inline-block;
	margin-right: 5px;
	transform: translateY(1px);
}

#mainNav a.home:before {
	content: "\f015";
}

#mainNav a.libs:before {
	content: url("../imgs/common/ic-libs.svg");
	width: 22px;
	height: 22px;
	margin-right: 8px;
	transform: translateY(5px);
}
#mainNav a.libs:hover:before {
	content: url("../imgs/common/ic-libs-on.svg");
}

#mainNav a.mail:before {
	content: "\f0e0";
	font-size: 2.2rem;
	transform: translateY(2px);
}
#mainNav a.about:before {
	content: "\f05a";
}

#mainNav a:hover {
	color: #09f;
}

#TSS {
	width: 100%;
	max-width: 158px;
	margin-left: auto;
}

#TSS img {
	width: 100%;
	max-width: 158px;
	height: auto;
}

#body {
	display: flex;
	justify-content: center;
	gap: 0 60px;
	margin: 0 15px;
}

#mailmag #body {
	display: block;
	padding-top: 48px;
}

#body-main {
	width: 100%;
	max-width: 920px;
}

#mailmag #body-main {
	margin: 0 auto;
}

#lead {
	width: 100%;
	max-width: 780px;
	margin: 32px 0 0 0;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.7;
}

#articles {
	position: relative;
	margin: 32px 0 0;
}

#mode {
	position: absolute;
	top: -54px;
	right: 0;
	display: flex;
}

#mode .radio-btn {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 27px;
	border: 1px solid #dee0e3;
	cursor: pointer;
}

#mode #imgN,
#mode #imgY {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 16px 15px;
}
#mode #imgN		{ background-image: url("../imgs/common/imgN.png"); }
#mode .on#imgN	{ background-image: url("../imgs/common/imgN-on.png"); margin-right: -1px; }
#mode #imgY		{ background-image: url("../imgs/common/imgY.png"); }
#mode .on#imgY	{ background-image: url("../imgs/common/imgY-on.png"); margin-left: -1px; }

#mode .radio-btn:first-child	{ border-radius: 4px 0 0 4px; }
#mode .radio-btn:last-child		{ border-radius: 0 4px 4px 0; }

#mode .radio-btn.on {
	background: #fff;
	border-color: #bec0c3;
	z-index: 10;
}

#mode .radio-btn.on:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 100%;
	height: 3px;
	background: #e6e6e6;
}

#mode .radio-btn:not(.on):hover {
	border-color: #09f;
	box-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
	z-index: 15;
}

.article {
	position: relative;
	min-height: 186px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	box-shadow: 0 6px 12px rgba(0,0,0,0.06);
	padding: 19px 85px;
	background: #fff;
/*
	border: 1px solid #fff;
*/
}

.article:hover {
/*
	border-color: rgba(0, 153, 255, 0.36);
*/
/*
	box-shadow: 0 2px 24px rgba(0, 153, 255, 0.40);
*/
}

.imgY .article {
	padding: 19px 30px 19px 385px;
}

.article + .article {
	margin-top: 30px;
}


.article .img {
	display: none;
}

.imgY .article .img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 362px;
	height: 100%;
	min-height: 224px;
}

.imgY .article .img:after {
	content: "";
	width: 1px;
	height: 100%;
	background: rgba(0,0,0,0.08);

	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;

}

.article .img img {
	width: auto;
	min-width: 362px;
	height: 100%;
	min-height: 224px;
	object-fit: cover;
}

.article.ss:before {
	content: "";
	position: absolute;
	top: 0;
	left: -1px;
	display: inline-block;
	width: 1px;
	height: 100%;
	border-right: 8px solid #9c0003;
	z-index: 100;
}

.imgY .article.ss:before {
	left: 361px;
}


.article .pubdate {
	position: absolute;
	top: 20px;
	right: 30px;
	text-align: right;
	font-size: 1.2rem;
	color: #8a8a8a;
}

.article .series {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.5rem;
	line-height: 1.3;
}

.article.ss .series {
	color: #9c0003;
}

.article .series:before {
	display: inline-block;
	width: 32px;
	height: 32px;

	position: absolute;
	top: -8px;
	left: -45px;
}

.article .series:before {
	content: url("../imgs/common/ic-column.svg");
}

.article.ss .series:before {
	width: 33px;
	content: url("../imgs/common/ic-ss.svg");
}

.imgY .article .series:before {
	display: none;
}

.article .volume {
	display: inline-block;
	margin-left: 0.8em;
	font-size: 1.5rem;
	line-height: 1.3;
}

.article .title {
	margin: 6px 0 0;
	padding: 0;
	font-size: 2.0rem;
	line-height: 1.3;
}

.article .author {
	display: inline-block;
	margin: 7px 0 0;
	font-size: 1.5rem;
}

.article .author-org {
	display: inline-block;
	margin-left: 0.9em;
	font-size: 1.3rem;
	color: #8a8a8a;
}

.article .lead {
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.75;
	overflow: hidden;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;

/*
	margin: 8px 0 0;
	-webkit-line-clamp: 2;
	max-height: calc(1.5rem * 1.75 * 2);
*/

	margin: 18px 0 0;
	-webkit-line-clamp: 3;
	max-height: calc(1.5rem * 1.75 * 3);
}

.article .tags {
	display: flex;
	min-height: 21px;
	margin: 9px 0 7px;
	gap: 0 6px;
}

.tag {
	display: inline-block;
	min-width: 36px;
	padding: 0 6px;
	text-align: center;
	font-size: 1.2rem;
	line-height: 21px;
	white-space: nowrap;
	border-radius: 4px;
	background: #d3eff4;
	background: rgba(0,0,0,0.3);
}

.article .tags {
	display: none;
}


.article a.linkto {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: right;
	color: #dadada;

/*
	top: -4px;
	left: -4px;
*/
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border-radius: 8px;
	border: 6px solid rgba(0, 153, 255, 0.0);

}

.article a.linkto .fat {
	font-size: 72px;

	position: absolute;
	top: 50%;
	right: -5px;
	transform: translateY(-50%) scaleX(50%);

}

.article a.linkto:hover {
	color: #09f;
	border-color: rgba(0, 153, 255, 0.5)
}





#body-sub {
	width: 100%;
	max-width: 280px;
	padding-top: 32px;
	text-align: center;
}

#body-sub #siteSrc {
	width: 262px;
	height: 28px;
	overflow: hidden;
	margin: 0;
	padding: 2px 8px;
	text-align: center;

	color: #a2a2a2;

	border: 1px solid #dee0e3;
	border-radius: 5px;
	background: #fcfeff;

	white-space: nowrap;
}

#siteSrc:before {
	content: "\f002";
	font-family: "Font Awesome 6 Pro";
	font-size: 2.0rem;
	font-weight: 900;
	line-height: 26px;
	display: inline-block;
	width: 28px;
}

#siteSrc #txt {
	width: 230px;
	height: 28px;
	font-size: 1.5rem;
	line-height: 28px;
	border: none;
	transform: translateY(-1px);
}

#siteSrc #txt::placeholder {
	font-size: 1.3rem;
	color: #b6b6b6;
	transform: translateY(-2px);
}

#siteSrc #btn {
	width: 1px;
	height: 28px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
}

#body-sub #siteSrc.selected {
	border-color: rgba(0, 153, 255, 0.68);
	box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
}

#body-sub .sub-links {
	margin-top: 22px;
	padding-top: 18px;
	text-align: justify;
	border-top: 1px solid #c4c4c4;
}

.sub-links h2 {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	line-height: 24px;
	color: #062c80;
}

.sub-links#list-tags h2:before {
	content: "\f02c";
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 24px;
	margin-right: 6px;
	transform: translateY(4px);
}
.sub-links#list-series h2:before {
	content: url("../imgs/common/ic-series.svg");
	display: inline-block;
	width: 36px;
	height: 24px;
	overflow: hidden;
	margin-right: 6px;
	transform: translateY(4px);
}

.sub-links#list-authors h2:before {
	content: url("../imgs/common/ic-authors.svg");
	display: inline-block;
	width: 46px;
	height: 24px;
	overflow: hidden;
	margin-right: 6px;
	transform: translateY(4px);
}


.sub-links ul {
	margin: 14px 0 0 0;
	padding: 0 0 0 1.3em;
	list-style: none;
	font-size: 1.4rem;
	line-height: 1.29;
}

.sub-links li {
	position: relative;
}

.sub-links li:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	overflow: hidden;
	background: #7a7a7a;
	border-radius: 50%;

	position: absolute;
	top: 8px;
	left: -1.0em;
}

.sub-links li + li {
	margin-top: 8px;
}

.sub-links .to-list {
	margin-top: 18px;
	text-align: center;
}

.sub-links .to-list a:before {
	content: "\f0ca";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 1.4rem;

	display: inline-block;
	margin-right: 5px;
}

.sub-links a {
	color: #7a7a7a;
}

.sub-links .to-list a {
	display: inline-block;
	padding: 0 10px;
	font-size: 1.3rem;
	line-height: 20px;
	color: #c2c2c2;
	border: 1px solid #c2c2c2;
	border-radius: 10px;
}

.sub-links a:hover, 
.sub-links .to-list a:hover {
	color: #09f;
	border-color: #09f;
}

#list-tags,
#list-authors {
	display: none;
}


.list-decimal {
	list-style-type: decimal;
}

.list-nomark {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-closingBracket {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;
}

.list-closingBracket > li {
	padding-left: 1.5em;
	counter-increment: cnt;
}

.list-closingBracket > li:before {
	content: counter(cnt) ") ";
	display: block;
	float: left;
	margin-left: -1.5em;
}




.toTop {
/*
	display: none;
*/
	position: fixed;
	left: 0;
	right: 0;
	bottom: 10px;
	width: calc(100% - 30px);
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 15px;
	z-index: 1000;
}

.toTop > span,
.toTop a {
	float: right;
	width: 48px;
	height: 48px;
	overflow: hidden;
	text-align: center;
	font-size: 2.8rem;
	border-radius: 4px;
	color: #fff;
	background: rgba(0, 92, 153, 0.3);
}

.toTop > span {
	cursor: pointer;
}

.toTop > span:before {
	display: inline-block;
	content: "\f062";
	font-family: "Font Awesome 6 Pro";
	cursor: pointer;
}

.toTop > span:hover,
.toTop a:hover {
	background: #09f;
}

.toTop > span:hover:before, 
.toTop a:hover .fas {
	transform: translateY(-8px);
}

.toTop a .fas {
	display: inline-block;
}

#mainNav a,
#mode .radio-btn, 
.article,
.article a.linkto, 
#siteSrc, 
.sub-links a,
.toTop > span, 
.toTop > span:before, 
.toTop a, 
.toTop a .fas {
	transition: all .2s linear 0s;
}

footer {
	width: calc(100% - 30px);
	margin: 40px 0 0;
	padding: 0 15px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

footer p {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 20px 0;
}

footer small {
	font-size: 1.1rem;
	color: #5a5a5a;
}



/***
 ***	Menu for Mobile
 ***/

#mm {
	position: fixed;
	top: 0;
	right: 0;
	width: 68px;
	height: 68px;
	overflow: hidden;
	text-align: center;
	line-height: 1.0;
	z-index: 20000;
	cursor: pointer;
	transition: all .35s ease-in-out 0s;
}

#mm > span {
	position: relative;
	display: inline-block;
	margin: 34px 0 0;
}

#mm > span, 
#mm > span:before, 
#mm > span:after {
	display: inline-block;
	width: 40px;
	height: 3px;
	border-radius: 1px;
	background: #3a3a3a;
	transition: all 0.35s ease-in-out 0s;
}

#mm > span:before, 
#mm > span:after {
	content: "";
	position: absolute;
	left: 0;
}

#mm > span:before	{ top: -10px; }
#mm > span:after	{ top: 10px; }

#mm:hover, 
#mm.selected {
	background: #09f;
}

#mm:hover > span:before, 
#mm:hover > span, 
#mm:hover > span:after, 
#mm.selected > span:before, 
#mm.selected > span:after {
	background: #fff;
}

#mm.selected > span {
	background: rgba(102, 102, 102, 0);
}


#mm.selected > span:before {
	top: 0;
	transform: rotate(405deg);
}
#mm.selected > span:after {
	top: 0;
	transform: rotate(-405deg);
}

#mm {
	display: none;
}



/**/





#mailmag h1 {
	margin: 0 0 48px;
	padding: 0;
	font-size: 3.2rem;
	color: #1d3d7a;
}

#mailmag h1:before {
	content: "\f0e0";
	font-family: "Font Awesome 6 Pro";
	font-size: 4.0rem;
	margin-right: 0.3em;
	display: inline-block;
	transform: rotate(-18deg) translateY(4px);
	
}

#mailmagBox {
	padding: 48px 0;
	background: #ebeff7;
	border-radius: 12px;
}

#mailmagBox > p {
	max-width: 612px;
	margin: 1.0em auto 1.6em;
	padding: 0;
	text-align: justify;
	font-size: 1.5rem;
	line-height: 1.5;
}

#mailmagBox > form {
	display: block;
	width: 100%;
	max-width: 612px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

#mailmagBox button,
#mailmagBox input {
	margin: 0 8px;
	padding: 12px 16px;
	font-size: 1.6rem;
	line-height: 1.2;
	border: 1px solid #7297de;
	border-radius: 6px;
}

#mailmagBox input.inp_name {
	width: 12.0em;
}

#mailmagBox input.inp_mail {
	width: calc(12.0em * 2 + 32px + 2px + 16px);
}

#mailmagBox input::placeholder {
	color: #7297de;
}

#mailmagBox button.inp_sbmt,
#mailmagBox input.inp_sbmt {
	width: 16.0em;
	padding: 14px 16px;
	color: #fff;
	font-weight: bold;
	border: none;
	background: #1d3d7a;
	transition: all .2s ease-out 0s;
	cursor: pointer;
	position: relative;
}

#mailmagBox button.inp_sbmt > span:after,
#mailmagBox input.inp_sbmt > span:after {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
/*
	content: "";
	display: inline-block;
	width: 6px;
	height: 0px;
	margin: 0 8px 0 0;
	border: 6px solid transparent;
	border-left: 10px solid #fff;
	border-right: none;
	transition: all .2s ease-out 0s;
*/

	content: "\f0da";
	font-family: "Font Awesome 6 Pro";
	font-size: 2.0rem;
	transition: all .2s ease-out 0s;
	
}

#mailmagBox button.inp_sbmt:disabled,
#mailmagBox input.inp_sbmt:disabled,
#mailmagBox button.inp_sbmt:disabled > span:after,
#mailmagBox input.inp_sbmt:disabled > span:after {
	color: #dadada;
}


#mailmagBox button.inp_sbmt:hover:not(:disabled),
#mailmagBox input.inp_sbmt:hover:not(:disabled) {
	background: #06f;
	box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}

#mailmagBox button.inp_sbmt:hover:not(:disabled) > span:after {
	opacity: 1.0;
	right: 8px;
}

#mailmagBox button.inp_sbmt:disabled,
#mailmagBox input.inp_sbmt:disabled {
	background: #8a8a8a;
}


#mailmagBox ul.mailmag-form {
	display: inline-block;
	margin: 0 auto 12px;
	padding: 0;
	list-style: none;
}

#mailmagBox .mailmag-form > li {
	display: flex;
	padding: 5px 0;
	text-align: left;
	align-items: center;
}

#mailmagBox .mailmag-form .h {
	display: inline-block;
	width: 100px;
	font-size: 1.4rem;
	color: #1d3d7a;
}

#mailmagBox .mailmag-form .h.hissu:after {
	content: "必須";

	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px 3px;
	font-size: 1.1rem;
	line-height: 1.00;
	color: #fff;
	background: #e00;
	border-radius: 3px;
	transform: translateY(-2px);

}

#kojinjoho {
	max-width: 642px;
	margin: 30px 0 24px;
	font-size: 1.4rem;
	line-height: 1.6;
}

.kj_outer {
	border: 1px solid #EDEDED;
	border-radius: 7px;
	background-color: #fff;
	margin: 8px 0 20px;
}

.kj_inner {
	height: 172px;
	height: 344px;
	padding: 16px 34px;
	overflow: auto;
	text-align: justify;
	text-justify: inter-ideograph !important;
	text-justify: inter-character !important;

}

label.chkbox {
	cursor: pointer;
}

#mailmagBox input#accept-chkbox {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 2px solid #5a5a5a;
	background: none;
	transform: translateY(3px);
}





/**/





@media screen and (max-width: 1024px) {

	body {
		padding-top: 48px;
	}

	#mm {
		display: block;
	}

	#mainNav {
		display: none;
		position: fixed;
		top: 68px;
		right: 0px;
		z-index: 10000;

		border: 1px solid #09f;
		background: #fff;
		box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

	#mainNav.selected {
		display: block;
	}

	#mainNav,
	#mainNav ul {
		flex-direction: column;
	}

	#mainNav,
	#mainNav ul, 
	#TSS {
		width: 158px;
		margin: 0;
	}

	#mainNav a {
		display: block;
		width: 158px;
		height: 48px;
		line-height: 48px;
		overflow: hidden;
		margin-top: 1px;
	}

	#TSS a {
		background-image: url("../imgs/common/SS.svg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 158px auto;
	}

	#TSS a:hover {
		background-image: url("../imgs/common/SS-on.svg");
	}
	#TSS a img {
		display: none;
	}




	#body {
		flex-direction: column;
		gap: 0;
	}
	
	#body-main {
		max-width: initial;
	}

	#body-sub {
		margin: 0 auto;
	}

	.imgY .article .img {
		display: none;
	}

	.imgY .article, 
	.imgN .article {
		padding: 38px 35px 19px 65px;
	}

	.imgY .article.ss:before {
		left: 0;
	}

	.imgY .article .series:before {
		display: inline-block;
	}

	.article .series,
	.article .volume {
		font-size: 1.4rem;
	}

}

@media screen and (max-width: 648px) {
	body > header {
		max-height: 48px;
	}
	#mainNav a {
		height: 48px;
		line-height: 48px;
	}
	#sitetitle {
		width: auto;

	}
	#sitetitle img, 
	#sitephrase img {
		width: auto;
		height: 40px;
		margin: 4px 0;
	}
	#mm {
		width: 48px;
		height: 48px;
	}
	#mm > span {
		margin: 24px 0 0;
	}
	#mm > span, 
	#mm > span:before, 
	#mm > span:after {
		width: 30px;
	}
	#mainNav {
		top: 48px;
	}
}