@charset "utf-8";

/*YUI CSS3のバグ対策---*/
html {
  background-color: transparent;
  background-image: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　Stracture
 - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body{
margin:0;
font-size:14px;
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
max-width:750px;
}

.pr {
	text-align: right;
}


ul,li{
list-style:none;
padding:0;
margin:0
}

#wrap{
	margin:0 auto;
	position:absolute;
	width:100%;
}

.top {
	margin:0 auto;
	position: absolute;
	width:100%;
}

.cvr{
	position:relative
}

.cvr img {
	margin:20px auto;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　Details
- - - - - - - - - - - - - - - - - - - - - - - - - - - */


header {
	height:auto;
	background-color:#fff;
}
header img {
	width: 100%;
}

header h1 {
	color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding:10px 10px 0 20px;
	font-size:230%;
}

.title h2 {
	padding:20px 0 10px 0;
	font-size:150%;
	margin:0 auto;
	width:90%;
	font-weight:bold;
	line-height:150%;color: rgba(21,21,21,1.00);
	border-bottom: rgba(58,173,208,1.00) 3px solid;
	border-top: rgba(58,173,208,1.00) 3px solid;
}

.photo {
	position:relative;
	margin:20px auto;
}

.photo img {
	width:90%;
	padding:0 5%;
}

.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 50px;
  margin-left:20px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #ffe7cf;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 90%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #ffe7cf;
  line-height:200%;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #ffe7cf;
}

.says p {
  margin: 0;
  padding: 0;
}



.balloon {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon .faceicon {
  float: left;
  margin-right: -90px;
  width: 50px;
  margin-left:20px;
}

.balloon .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #ecd7ff;
  border-radius: 50%;
}

.balloon .chatting {
  width: 90%;
}

.says2 {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #ecd7ff;
  line-height:200%;
}

.says2:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #ecd7ff;
}

.says2 p {
  margin: 0;
  padding: 0;
}




.text {
	width:90%;
	margin:30px auto;
	line-height:230%;
}

p {
	font-size:120%;
}

.sub h3 {
	position: relative;
	padding: 10px;
	background: #a6d3c8;
	color: white;
	width:85%;
	margin:20px auto;
	font-size:120%;
	font-weight:bold;
}

.sub h3::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px rgb(149, 158, 155);
}

.info {
	margin:30px auto 10px auto;
	text-align:center;
}

.info a {
	text-decoration:none;
	color:#999;
}


.btn {
	width:90%;
}

.btnLine{
	position:absolute;
	top:3%;
}

.btnLine2{
	position:absolute;
	bottom:5%	
}

.btnLine3{
	position:absolute;
	bottom:3.5%	
}


.bold {
	font-weight:bold;
}

.red {
	color:#F33;
}

.red2 {
	color: rgba(255,68,97,1.00);
}

.pink {
	color: rgba(255,96,175,1.00);
}

.green {
	color: rgba(37,116,36,1.00);
}

.blue {
	color: rgba(39,99,155,1.00);
}

.brown {
	color: rgba(81,69,10,1.00);
}
.bgyellow {
	background-color:#FF9;
}

.bdred {
	border-bottom: rgba(255,67,137,1.00) solid 2.5px;
}

.big {
	font-size: 120%;
}

.big2 {
	font-size: 150%;
}

.nodeco {
	text-decoration: none;
}

.mini {
	font-size:90%;
	color: rgba(112,112,112,1.00);
}


.center {
	text-align:center;
	margin:0 auto;
}



/*---アニメーションボタン---*/

.animationBtn img{

/*アニメーション*/
animation: animScale 3s infinite ease-out;
transform-origin: 50% 50%;
animation-play-state:running;
margin-top: 20px;

}
@keyframes animScale {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}