@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

/************************************
** メニュー（menu）★フォントのみ変更　20170515
************************************/
#navi ul{
  position: relative;
  clear: both;
  margin-bottom: 0;
  border: 1px solid #ddd;
  background-color:#F7F7F7;
  border-radius:3px;
  margin:0;
  padding:0;
  width:100%;
  box-sizing: border-box;
}
 
#navi ul ul{
  box-sizing: content-box;
}
 
#navi ul > li{
  float: left;
  list-style:none;
  position: relative;
}
 
#navi ul li a{
  font-size:17px;
  font-weight:bolder;
  display: block;
  padding: .3em 1.3em;　/*ボックス内側の余白*/
  
  color:#111;
  text-decoration:none;
  z-index:99;
}
#navi ul li a:hover{
  background-color:#ddd;
}
 
#navi ul.sub-menu,
#navi ul.children{
  position: absolute;
  display: none;
  margin-left: 0;
  min-width:200px;
  border: 1px solid #ddd;
  list-style:none;
  padding-left:0;
  z-index:99;
}
#navi .sub-menu li,
#navi .children li{
  position: relative;
  border: none;
  float:none;
  height:31px;
}
 
#navi ul.sub-menu ul,
#navi ul.children ul {
  top:-31px;
  left:200px;
  position:relative;
}
#navi ul li:hover > ul{
  display: block;
}


/************************************
**吹き出し会話用
************************************/
.balloon p {
	margin:0;
	padding:0;
}
.balloon {
	margin-bottom:20px;
	position:relative;
}
.balloon.right-box {
	padding-right:150px;
}
.balloon.left-box {
	padding-left:110px;
}
	.balloon .balloonbox {
		width:100%;
	}
		.balloon .balloonbox .txt {
			font-size:15px;
			line-height:1.8em;
			padding:10px 0;
		}

		.balloon .balloonbox #balloon-right,
		.balloon .balloonbox #balloon-left {
			position: relative;
			display: inline-block;
			padding: 0 15px;
			width: 100%;
			color: #000;
			text-align: center;
			background: #fff;
			z-index: 0;
			box-shadow: 3px 1px 3px rgba(255, 255, 255, 0.2) inset, 3px 1px 2px rgba(0, 0, 0, 0.05);
			border:1px solid #D8D8D8;
			text-align:left;
			border-radius:10px;
			min-height:100px;
		}
		.balloon .balloonbox #balloon-left {
			width:90%;
		}
		.balloon .balloonbox #balloon-right:before {
			content: "";
			position: absolute;
			top: 50px;
			right: -8px;
			margin-top: -9px;
			display: block;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 9px 0 9px 9px;
			border-color: transparent transparent transparent #fff;
			z-index: 0;
		}
		.balloon .balloonbox #balloon-right:after {
			content: "";
			position: absolute;
			top: 50px;
			right: -9px;
			margin-top: -10px;
			display: block;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 10px 0 9px 9px;
			border-color: transparent transparent transparent #D8D8D8;
			z-index: -1;
		}

		.balloon .balloonbox #balloon-left:before {
			content: "";
			position: absolute;
			top: 40px; left: -8px;
			margin-top: -9px;
			display: block;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 9px 9px 9px 0;
			border-color: transparent #fff transparent transparent;
			z-index: 0;
		}
		.balloon .balloonbox #balloon-left:after {
			content: "";
			position: absolute;
			top: 40px; left: -9px;
			margin-top: -10px;
			display: block;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 10px 9px 9px 0;
			border-color: transparent #D8D8D8 transparent transparent;
			z-index: -1;
		}
/*アイコン*/
	.balloon.right-box .img {
			width:90px;
			top:0px;
			right:0;
			position:absolute;
		}
	.balloon.left-box .img {
			width:90px;
			top:0px;
			left:0;
			position:absolute;
		}
		.balloon .img img {
			border-radius:10%; /*囲みの形*/
			box-shadow: 3px 1px 3px rgba(255, 255, 255, 0.2) inset, 3px 1px 2px rgba(0, 0, 0, 0.05);
			border:1px solid #D8D8D8;
			width:100%;
		}