@import url(https://fonts.googleapis.com/css?family=Gabriela|Sacramento|Homemade+Apple);


#all, x:-moz-broken, x:last-of-type{ font-size:8.7pt; line-height:1.6;}

body
{
        color: #444; 
        background-color: #fff;
        font-family: 'Gabriela', sans-serif;
	font-size: 11px;
	letter-spacing: 2.2px;
	line-height: 1.8;
	margin: 0;
	overflow: scroll;
	padding: 0;
}
a {
        font-size:10px;
	color: #000;
	background: #fff;
	text-decoration: none;
	padding:10px;
}
a:hover {
	color: #000;
}

.text a{
  /*リンクテキストのスタイルです*/
  font-size: 14px;
  color: #000;
  background: #fff;
  text-decoration: none;
  padding:5px;
  position: relative;
}

.s-balloon {
  /*バルーンのスタイルです*/

  /*表示位置を指定します*/
  position: absolute;
  top: 0px;
  left: -35px;

  /*非表示にしておきます*/
  display: none;
  opacity: 0;

  /*表示スタイルを指定します*/
  font-size:11px;
  padding: 5px;
  border-radius: 60px;
  color: #e3328d;
  background-color: #f3ed70;
  width: 200px;
    text-align: center;
}

.text a:hover .s-balloon {
  /*マウスホバー時のバルーンのスタイルです*/
  z-index: 100;
  /*表示するようにします*/
  display: inline-block;
  opacity: 1;
  top: 40px;
}

.s-balloon::before {
  /*吹き出し部分の三角形を表示します*/
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 20px;
  top: -15px;
  border-left: 20px solid #f3ed70;
  border-top: 20px solid #f3ed70;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* 白い半円 */
.s-balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 35px;
  top: -20px;
  border-left: 20px solid #ffffff;
  border-top: 20px solid #ffffff;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}


hr{
border: none;
    height: 85px;
    background:url(images/cat2.gif) 50% 0  no-repeat;
    color: #FFFFFF;
margin:80px 0px;
}

.text {margin-top:15px; margin-bottom:15px;}

.main{text-align:left; font-size:10.5pt;font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";}


strong {
    -webkit-text-emphasis: filled dot #606060;
   text-emphasis: filled dot #606060;
	font-weight: normal;
}

#all
{
	margin: 0 auto;
	max-width: 550px;
	padding: 50px 20px 0px 20px;
	text-align: center;
}
#title
{
	font-family: Homemade Apple;
	font-size: 24px;
}

* {
	box-sizing: border-box;
}

.wrapper {
	position: static;
} 

 .box {
	position: relative;
	background: #f3ed70;
        color: #e3328d;
	font-family: Homemade Apple;
	height: 110px;
	width: 380px;
	padding: .8em 1em;
	margin-bottom: 3px;
	border-radius: 60px;
}

.box a{	font-size: 11px; color:#e3328d; text-shadow:2px 2px #bbb; background-color:transparent;}

.box:after {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #fff;
	bottom: -25px;
	left: 85px;
	}
	
.box:before {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #f3ed70;
	bottom: -20px;
	left: 70px;
	}



 .box2 {
	position: relative;
	background: #f3ed70;
        color: #e3328d;
	font-family: Homemade Apple;
	height: 40px;
	width: 380px;
	padding: 1em 1em .8em 1em;
	margin-bottom: 3px;
	border-radius: 60px;
}

.box2:after {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #fff;
	top: -25px;
	left: 85px;
	}
	
.box2:before {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #f3ed70;
	top: -20px;
	left: 70px;
	}

 .info {
	position: relative;
	background: #f3ed70;
        color: #e3328d;
	font-family: Homemade Apple;
	height: 270px;
	width: 380px;
	padding: 1em 1em .8em 1em;
	margin-bottom: 3px;
	border-radius: 60px;
}

@-moz-document url-prefix() {
  .info {
    font-size:11px;
  }
}

.info:after {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #fff;
	top: -25px;
	left: 85px;
	}
	
.info:before {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #f3ed70;
	top: -20px;
	left: 70px;
	}

 .foot {
	position: relative;
	background: #f3ed70;
        color: #e3328d;
	font-family: Homemade Apple;
	height: 40px;
	width: 350px;
	padding: 1em 1em .8em 1em;
	margin-top: 80px;
	margin-bottom: 3px;
	border-radius: 60px;
}

.foot:after {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #fff;
	bottom: -25px;
	left: 85px;
	}
	
.foot:before {
	content: '';
	position: absolute;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	z-index: -1;
	background: #f3ed70;
	bottom: -20px;
	left: 70px;
	}



select,input[type],textarea{
font-family: 'Josefin Sans',"メイリオ", sans-serif;
font-size:11px;
margin:10px 0;
padding:5px;
width:50%;
height:27px;
color:#434343;
background:#f3ed70;
border:none;
border-radius:30px;
letter-spacing:2.2px;
line-height:1.8;
box-shadow:none;
text-shadow:none;
outline:none;
vertical-align:middle;
}

input[type="submit"]{
cursor:pointer;
width:60px;
}

input[type="submit"]:hover{color:#aaa;}

select{width:auto;}

#formWrap {
	width:100%;
	margin:9em auto 0;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}



/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:100%;
	margin:10em auto 0;

}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:auto;
	height:27px;
	padding:5px;
	font-size:90%;
	display:inline;
}
select{width:30%;}

 input[type="submit"], input[type="reset"], input[type="button"] {
	width:auto;
	height:27px;
}
}


@media screen and (max-width:480px){ body{font-size:11px;}}