@charset "utf-8";

/* 用語用　デザインver*/
/*タイトル*/
	table,tr,td{
		table-layout: fixed;
	}
#xenohead {
	width: 100%;
	height: 40%;
	max-width: 1000px;
	max-height: 500px;
	margin: 0 auto;
	z-index: 1;
	}
.xenohead-ue { /*タイトル上下枠と背景色*/
	height: 13%;
	background-color: rgba(0,0,0,0.5);
	}
.xenohead-ue img{/*タイトル上下枠画像設定*/
	width: 100%;
	max-width: 1000px;
	max-height: 130px;
	}
.head-t {
	height: 200px;
	max-width: 1000px;
	text-align: center;
	padding: 0;
	margin: 0;
	background-color: rgba(48,40,51,0.85);/*#302833 黒紅*/
	}

/*-----------------------------
		スマホ用設定
--------------------*/
@media screen and (max-width :960px){
	#xenohead {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		}
	.xenohead-ue{
		margin: 0;
		padding: 0;
		}
	.xenohead-ue img{
		margin: 0;
		padding: 0;
		}
	.head-t {
		min-height: 150px;
		padding: 0;
		margin: 0;
		}
	}
/*===========================
	タイトル文字設定
=================*/
.yogotitle {
	vertical-align: middle;
	}
.yogotitle > div {
	margin: 0 auto;
	width: 100%;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 10px;
	line-height: 1.5;
	font-size: xx-large;/*文字サイズ*/
	font-weight: bold;/*文字太さ*/
	font-family: 'Meiryo UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Arial',serif;/*フォント指定*/
	color: #ffe0b3;
	text-shadow: 0 0 6px #eb6101, 0 0 12px #eb6101, 0 0 20px #eb6101; 
	white-space: nowrap;
	overflow: hidden;/*飛び出た分は隠す*/
	}

/*　小さな説明
-----------------*/
.head-t span{
	font-size: x-small;
	}
/*　用語アイコン枠設定
-------------------*/
.cross {
	position: absolute;
	top: 200px;
	right: 200px;
	margin: 0;
	padding: 0;
	max-height: 200px;
	max-width: 200px;
	background-color: rgba(70,14,68,0.6);/*#460e44 紫紺*/
	 border-radius: 30%;/*角丸*/
    -webkit-mask-image: radial-gradient(rgb(48,40,51) 0%, rgba(48,40,51, 0) 70%);/*画像ふちぼかし*/
    mask-image: radial-gradient(rgb(48,40,51) 0%, rgba(48,40,51, 0) 70%);/*画像フチぼかし*/
	z-index: 3;
}
#container h2 span .srieslogo {
	max-height: 30px;
	max-width: 30px;
	margin-right: 0;
	margin-left: 1em;
	margin-bottom: 1em;
	}
#container h2 span .srieslogo img{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/*--------------------
	スマホ用設定
---------------------*/
@media screen and (max-width :960px){
		.yogotitle > div{
			padding-top: 5%;
			padding-left: 10px;
			padding-bottom: 4px;
			width: 90%;
			}
		.cross{
			position: absolute;
			top: 180px;
			right: 5%;
			}
		.head-t span{
			width: 80%;
			height: 50px;
			margin: 0;
			line-height: 1.5;
			padding-bottom: 5px;
			}
	}

/* 	↑タイトルここまで
=================================*/
/*↓カテゴリーとアイコン
===============================*/
#category{			/*大枠設定*/
		width: 100%;
		margin-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
		padding: 5px;
		z-index: 1;
	}
.category-text{
	float: left;
	width: 80%;
	margin: 0;
	padding-right: 10px;
	}
#category::after{
	clear: both;
}
#main-xeno h4+p{
	background-image: none;
	}

#main-xeno h4{/*アコーディオンメニュー前の項目タイトル*/
	clear: both;
	width: 80%;
	font-weight: 800;
	padding-right: 20px;
	padding-bottom: 10px;
	background: url("../images/boder4.png") no-repeat left 10px bottom 3px /90%;
  }

#main-xeno .category-text h2{/*カテゴリー用画像スペース*/
	margin-bottom: 10px;
	background-image: none;
	}
#main-xeno .category-text h2 img{
	width: 30%;
	max-width: 150px;
	height: auto;
	margin-right: 5px;
}
#main-xeno .category-text h3{
	font-size: 1em;
		}		
.category-text h2,h3{
	width: 100%;
	}
.marksimbole{
	float: right;
	width: 20%;
	margin: 0;
	}	
#category img{
	width: 100%;
	max-width: 150px;
	max-height: 150px;
	}
#category p{
	min-width: 80%;
	}
#category + p{
	clear: both;
	background-image: none;
	}
/*スマホ設定
-----------------*/
@media screen and (max-width: 960px){
		.category-text{
		width: 80%;
		float: left;
		margin: 0;
		}
		.yougomark{
		float: right;
		width: 20%;
		}
	#main-xeno .category-text h2{
		text-align: center;
		}
	#main-xeno .category-text h2 img{
		width: 30%;
		height: auto;
		margin-right: 5px;
		}
	#main-xeno .category-text h3{
		}	
	}
/*↑カテゴリーとアイコンここまで
================================*/
/*	↓関連語句枠
--------------------------------*/
#main-xeno .velda {
	border: 1px solid #f4da9c;
    box-shadow: 0 0 14px #ffc841;/*ボックス影*/
    margin: 15px 13px 15px 0px;
	width: clack(100% - 10px);
	border-radius: 15px;
	}
#main-xeno .veldaTitle {
	min-width: 100%;
	height: 100px;
	font-size: 1.5em;/*文字サイズ*/
	text-align: center;
	padding-top: 5%;
	line-height: 1.5;
	color: #fff;
	text-shadow: 0 0 6px #eb6101, 0 0 12px #eb6101, 0 0 20px #eb6101; 
	background: #170c0a url("../images/kanren-back.png") no-repeat right top;
	 border-top-left-radius: 15px;
  border-top-right-radius: 15px;
	}
#main-xeno .velda td{
	padding-left: 30px;
	}
#main-xeno .veldalink{
	vertical-align: middle;
	height: 100px;
	width: 100%;
	}
#main-xeno .veldalink a{
	width: 100%;
	text-align: center;
	margin: 0 10px;
	display: flex;
}

/*====================================*/
.setumei {
	margin-top: 10px;
	margin-bottom: 1em;
	min-height: 100px;
	width: 100%;
	}
span.setumei_img{
	float: left;
	max-width: 250px;
	height: auto;
	margin-right: 20px;
	margin-bottom: 15px;
	}
span.setumei_img img{
	width: 100%;
	}

#main-xeno .setumei p{
	padding-right: 20px;
	max-width: 800px;
	}
.setumei img+p::after{
	clear: both;
}
.setumei img >span .side-banner {
	width: 30%;
	max-width: 200px;
	margin-bottom: 20px;
	}
#container .setumei >p {
	background-image: none;
	}
#container .setumei > p+p{
		background: url("../images/boder4-2.png") no-repeat top center /50%;
	}
#container .setumei h4{
		font-weight: bold;
		width: 100%;
		
	}
#container .netabare {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 600px;
	padding: 0;
	min-height: 200px;
	text-align: center;
	}
#container .netabare img{
	clear: both;
	border: none;
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin: 0 auto;
	object-fit: contain;
	}
#container .netabare h4{
	background: none;
	min-height: 30px;
 }
/*-----------------------
	スマホ用設定
--------------------------*/
@media screen and (max-width :960px){
	.velda {
		margin: 15px 0 10px;
		}
	#container .netabare img{
		margin-left: 0;
		margin-right: 0;
		}
	}