@charset "utf-8";

body { 
	margin: 0;
	padding: 0;
	color: #333;
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3",
                         "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}

/*****リンクフォント*****/
a { color: blue; }
a:visited { color: #a8a8a8; }
a:hover {
  color: #988564;
  font-weight: bold;
  text-decoration: none;
}
a:hover img {opacity: 0.5}
/*****リンクフォントend*****/

h1, h2, h3, h4, h5, h6 {margin-top: 0;}

p {
  margin-top: 0;
  line-height: 1.6;
}

img {vertical-align: bottom;}


#main h1 {
  background-image: url(../images/header_bg.jpg);
  padding: 10px 10px 10px 10px;
  font-size: 26px;
  border: solid 1px #8b7348;
}

#main h2 {
  font-size: 22px;
  border: 1px solid #b7a077;
  padding: 11px 22px;
  border-radius: 5px;
}

#main h3 {
  font-size: 18px;
  border-left: 3px solid #b7a077;
  padding: 4px 9px 4px 14px;
  
}


header {
  width: 980px;
  margin: 0 auto;
}

header h1 {
  width: 980px;
  margin: 5px 0 10px;
}


/* ナビゲーション */
#global_navi {
  width: 980px;
  clear: both;
  overflow: hidden;
  margin: 16px auto;
}

#global_navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#global_navi ul li {
  width: 195px;
  float: left;
  margin-right: 1px;
  text-align: center;
}

#global_navi ul li a {
  display: block;
  padding: 16px;
  background-color: #352b23;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s linear;
}

#global_navi ul li div {
  display: block;
  padding: 16px;
  background-color: #352b23;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s linear;
}

#global_navi ul li.current a { 
  background-color: #b7a077; 
}
#global_navi ul li a:hover { 
  background-color: #8c7a5b;
}

/* コンテンツ全体 */
#wrapper {
  width: 980px;
  margin: 0 auto;
  overflow: hidden;
}

/* メイン部分 */
#main {
  width: 730px;
  float: left;
}
/* サイドバー */
#sidebar {
  width: 220px;
  float: right;
}
#side_banner { margin-bottom: 30px; }
#side_banner h2 {
  background-color: #716961;
  color: #fff;
  padding: 7px;
  font-size: 14px;
  text-align: center;
}
#side_banner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#side_banner ul li {
	margin-bottom: 10px;
	background-color:dodgerblue;
	font-size: 40px;
	font-style: oblique;
	font-weight: 800;
	text-align: center;
	color: black;
}

#side_banner ul li a{
	display: block;
	padding: 10px;
}

#side_banner ul li a:hover{
	background-color:darkgrey;
	opacity: 0.5;
}

#side_contact { margin-bottom: 30px; }
#side_contact {
  border: 1px solid #b7a077;
  color: #7F7259;
  text-align: center;
}
#side_contact h2 {
  background-color: #b7a077;
  color: #fff;
  padding: 7px;
  font-size: 14px;
}
/* メールアドレス */
#side_contact address {
  font-weight: bold;
  font-size: 20px;
  font-style: normal;
}
/* メールアイコン */
#side_contact address img {
  vertical-align: baseline;
  margin-right: 5px;
}

/* フッター */
footer {
  background-color: #352b23;
  text-align: center;
}
footer #footer_nav {
  background-color: #efefef;
  padding: 10px 0;
}
footer #footer_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer #footer_nav li {
  display: inline;
  border-left: solid 1px #aaa;
  margin-left: 8px;
  padding-left: 8px;
  font-size: smaller;
}
footer #footer_nav li:last-child {
  border-right: solid 1px #aaa;
  padding: 0 8px;
}
footer small {
  display: block;
  padding: 8px 0;
  color: #fff;
}

/* パンくずリスト */
#breadcrumb { font-size: normal; }
#breadcrumb ol {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}
#breadcrumb ol li { display: inline; }
#breadcrumb ol li::after {
  content: ">";
  padding-left: 7px;
}
#breadcrumb ol li:last-child::after { content: none; }

/* テーマ */
#teema {
  clear: both;
  overflow: hidden;
	margin: 5px auto;

}

#teema p{
	float: left;
	font-weight:bold;
	font-size: 20px;
	color: red;
}

#mokuji_link {
	float: right;
	font-size: 20px;
	color: crimson;
}


/*****メインのページ*****/
/* 登場人物紹介 */
#introduction  { margin-bottom: 30px; }
#introduction section {
  margin-bottom: 10px;
  overflow: hidden;
}
#introduction figure {
  float: left;
  margin: 0 20px 20px 0;
}

/* ニュース */
#news dl { overflow: hidden; }
#news dt {
  float: left;
  width: 8em;
  clear: both;
}
#news dd {
  margin-left: 8em;
}

#news .infobox{
	width: 90%;
	height: 200px;  /* 高さを制限(※) */
  overflow: scroll; /* スクロールバーを表示(※) */
  border: gray 1px solid;  /* 枠線を追加 */
	margin: 10px auto 30px;
}

/*****メインのページ　ここまで*****/

/*****ここから会話のCSS*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: no-repeat;
 background-size: 80%;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
 border: 3px solid #fff; /*左のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff; /*左の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 75%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 margin-top: -8px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius:50%;
 background: no-repeat;
 background-size: 80%;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
 border: 3px solid #FFF; /*右のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff; /*右の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 75%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -16px;
 top: 25%;
 margin-top: -8px;
}
.talk-end{
	clear:both;
}

.talk-wrap .img_question2{
	margin-top: 20px;
}

.talk-wrap .img_question3{
	margin-top: 20px;
}

.question{
	width: 80%;
	padding: 2%;
	margin: 10px auto;
	border: 1px dashed #0000ff;
	clear:both;
}

.kaisetu{
	width: 80%;
	padding: 2%;
	margin: 10px auto;
	border: 1px solid red;
	clear:both;
}

.nare-syon{
	clear:both;
}


.juuyouhosoku{
	width: 80%;
	padding: 2%;
	margin: 160px 20px 20px 0px;
	border: 6px groove #0000ff;
	clear:both;
}

.koushiki_joukenntuki{
	padding: 1%;
	margin: 10px auto;
	border: 8px double #0000ff;
	clear:both;
}

.joukenntuki_jukeizu, .joukenntuki3_monndai1{
	padding: 1%;
	margin: 10px auto;
	clear:both;
}

.setumei{
	padding: 1%;
	margin: 10px auto;
	clear:both;
	width: 100%;
}

.bennzu_joukenntuki1{
	padding: 2%;
	margin: 10px auto;
	clear:both;
	
}
.bennzu_joukenntuki2{
	padding: 2%;
	margin: 10px auto;
	clear:both;
	
}

.zahyou {
	width: 100%;
	height: 100%;
	margin: 15px 0px 15px 0px;
	padding: 3%;
	clear:both;
}


.next_page{
	text-align: center;
	margin: 0px 0px 10px 0px;
	font-size: 23px;
}

.pane_top{
	clear: both;
	margin: 0px 0px 10px 0px;
	font-size: 20px;
	font-weight: bold;
}

.MathJax_Display {
  text-align: left !important;
}

.suushiki p{
	line-height: 230%;
}

#Table_of_contents {
  margin-bottom: 10px;
  overflow: hidden;
	font-weight: bold;
}

#Table_of_contents .suugaku1A,.suugaku2B,.suugaku3 {
  margin-bottom: 20px;
  overflow: hidden;
}

#Table_of_contents .suugaku1,.suugaku2,.suugaku3{
	width: 50%;
  float: left;
}

#Table_of_contents .suugakuA,.suugakuB{
	width: 50%;
  float: right;
}

#Table_of_contents h3 {
	text-align: center;
  padding: 5px 5px 5px 5px;
  font-size: 18px;
  border: solid 1px #8b7348;
}

/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px;
 height: 80px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%; 
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%; 
 }
 }