@charset "utf-8";
/*================
index/result共通
=============== */
.tab-content {display: none;}
.tab-content.active {display: block;}
/* =========================================
main
============================================*/
/*縦配置*/
#termsTop{
  width: 1200px;
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
#termsTop > h1{
  width: 100%;
  font-weight: normal;
  font-size: 3em;
  margin-bottom: 20px;
}

/*左右配置*/
#termsTop > div{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  overflow: visible;/*追従用*/
}
@media screen and (max-width: 1199px) {
  #termsTop{
    width: inherit;
    max-width: 100%;
  }
  #termsTop > h1{
    font-size: 2.5em;
    position: relative;
  }
  #termsTop > div{
    display: block;
    overflow: inherit;
  }
}
/* =========================================
タブ中身
============================================*/
.tab-content{
  border: #aaa 1px solid;
  padding: 15px 1vw;
  margin-bottom: 10px;
}
.tab-content h2{
  padding-bottom: 10px;
  border-bottom: #aaa 1px solid;
  margin-bottom: 20px;
  font-weight: normal;
}
.tab-content form{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
}
.tab-content form button{
  width: calc(96%/2);
  font-size: 0.9rem;
  text-align: left;
  margin-bottom: 10px;
}
.tab-content form.imageContents button{width: calc(96%/5);}
.tab-content form button:hover{text-decoration: underline;}
@media screen and (max-width: 1199px) {
.tab-content{
  padding: 15px 2vw;
}
}

@media screen and (max-width: 500px) {
  .tab-content{
    padding: 15px 4vw;
  }
  .tab-content form{
  /*  flex-flow: column nowrap;*/
  }
  .tab-content form button{
    width: 100%;
  }
  .tab-content form.imageContents button{width: calc(96%/4);}
}

/* =========================================
#termsMenu 左メニュー
============================================*/
#termsMenu{
  /* 幅を固定しておくと右側がずれにくい */
  width: 300px;
}
#termsMenu > section{
  margin-bottom: 20px;
}
#termsMenu h3{
  margin-bottom: 10px;
  font-weight: normal;
}
#termsMenu li a,
#termsMenu p a{
  display: block;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  margin-bottom:5px;
  padding: 5px 0;
  background-color: #ddd;
  color: #000;
  text-decoration: none;
}
#termsMenu li a:hover,
#termsMenu p a:hover{
  text-decoration: underline;
  filter: opacity(0.7);
}
#alphabet_area ul,
#category_area ul{
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}
#alphabet_area ul li{
  width:calc(94%/4);
  margin-right: 0.3vw;
}
#alphabet_area ul li:nth-of-type(4n){
  margin-right: 0;
}
#category_area ul li{
  width:calc(96%/2);
  margin-right: 0.3vw;
}
#category_area ul li:nth-of-type(2n){
  margin-right: 0;
}
#simbol_area button,
#imgs_area button,
#structure_area button{width: 100%;}
@media screen and (max-width: 1199px) {

}

/*--------------
#contentsBox
----------------*/
#contentsBox{
  flex: 1; /* 残りのスペースを使って伸縮させる */
  height:auto;
  margin-left: 2vw;
}
#contentsBox .contents_list{
  border-top: #000 1px solid;
  padding: 15px 0px 15px 30px;
  text-align: left;
}
#contentsBox .contents_list ul{text-align: left;}
#contentsBox .contents_list ul li{
  font-size: 1.5em;
  line-height:2.5;
  text-align: left;
  vertical-align: top;
}
#contentsBox .contents_list ul li a{color:#000;}
/*--------------------------図記号から選ぶ*/
#contentsBox .contents_list ul.marks > li{
	display: inline-block;
	vertical-align: top;
	width:12%;
	height:auto;
	margin-left:1.5%;
	margin-bottom:10px;
}
/*--------------------------画像から選ぶ*/
#contentsBox .contents_list ul.images li{
	display: inline-block;
	vertical-align: top;
	width:22%;
	height:auto;
	margin-left:1.5%;
	margin-bottom:10px;
}
/*--------------------------内部構造から選ぶ*/
#contentsBox .contents_list ul.structures li{
	display: inline-block;
	vertical-align: top;
	width:17%;
	height:auto;
	margin-left:1.5%;
	margin-bottom:10px;
}
/*-----------------#contentsBox内の左右分割---------*/
#contentsBox > .contents_list > .left_area{width:48%;}
#contentsBox > .contents_list > .left_area ul li{
	display: block;
	width: 99%;
	height:auto;
	text-align: left;
	line-height:1.4;
	padding-right:0;
	border-radius: 0 0 0 0;
	white-space: nowrap;
}
#contentsBox > .contents_list > .left_area ul li a{background: none;}
#contentsBox > .contents_list > .right_area{
	width: 48%;
	margin-right:1%;
	border: none;
}
@media screen and (max-width: 1199px) {
#contentsBox{
  margin-left:0;
}
}
/*================
result.php
=============== */
#ans{
  border: #aaa 1px solid;
  padding: 15px 1vw;
}
#ans .headline{padding: 10px;}
#names {
  display: flex;
  justify-content: space-between;
  border-bottom: #aaa 1px solid;
  align-items: center;
  padding-bottom:10px;
  margin-bottom: 20px;
}
#names dl {flex: 1; }
#names dl dt {
  text-align: left;
  font-size: 2em;
  margin-bottom: 5px;
  width: 100%; }
#names dl dd {
  text-align: left;
  font-size: 1.8em;
  height: auto;
  width: 100%; }
/*#names p span {
  display: inline-block;
  padding: 5px 1vw;
  text-align: center;
  color: #fff;
  border-radius: 3px;
}
*/
@media screen and (max-width: 1199px) {
  #ans{
    padding: 15px 2vw;
  }
  #names {
    flex-direction: column;
  }
  #names dl {
    margin-bottom: 10px;
  }
  #names dl dt {
    font-size: 1.2rem;
  }
  #names dl dd {
    font-size: 1rem;
  }

}
/*================
description
=============== */
#description{
  margin-top: 15px;
  margin-bottom: 20px;
}
#description p{
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 1.5px;
  line-height:1.6;
}
#description form{
	display: inline-block;
}
#description button.page_link{
	background-color: inherit;
	border: none;
}

#description .linkBtn{
	background-color: #FFFFFF;
	border: hidden;
	padding: 0;
	color: #009aff;
}

#spec{
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
#spec div{
  width: 48.5%;
  padding: 10px 1vw;
  margin-bottom: 20px;
  background-color: #eee;
}
#spec div dl{
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 1.5em;
	-webkit-align-self: stretch;
	align-self: stretch;
}
#spec div dl dt{
	padding: 5px 0 10px;
  margin-bottom: 10px;
  border-bottom: #aaa 1px solid;
}
#spec div dl dt dd{
  margin-bottom: 5px;
}
#spec div dl dt dd a{
  color: #000;
  text-decoration: none;
}
@media screen and (max-width: 1199px) {
  #description p{
    font-size: 0.9rem;
    letter-spacing: 1.1px;
    line-height:1.3;
  }
  #spec{
    flex-direction: column;
    flex-flow: column nowrap;
    align-items: center;
  }
  #spec div{
    width: 90%;
    padding: 10px 2vw;
  }
}
/*================
共通
=============== */
#similar .linkBtn,
#related .linkBtn,
#links a,
#columnlink a{
  background-color: inherit;
  border: hidden;
  padding: 0;
  color: #000;
  text-decoration: none;
}
#description .linkBtn:hover,
#similar .linkBtn:hover,
#related .linkBtn:hover,
#links a:hover,
#columnlink a:hover{
  text-decoration: underline;
  filter: opacity(0.7);
}
/*================
画像複数
=============== */
#simbol dl,
#imgs dl {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
#simbol dl dt,
#imgs dl dt { width: 100%; }
#simbol dl dd,
#imgs dl dd {
  width: calc(95%/3);
  margin-bottom: 5px;
}
#simbol dl dd + dd,
#imgs dl dd + dd {
  margin-left: 0.3vw;
}
#links dl dd{
  text-align: left;
}
/*================
backBtn
=============== */
#backBtn {
  display: block;
  width: 20%;
  margin: 20px auto;
  text-align: center;
  padding: 8px 0;
  background-color: #aaa;
}
#backBtn:hover {
  filter: opacity(0.7);
  cursor: pointer;
}