@charset "utf-8";
/* CSS Document */
*{
	box-sizing:border-box;
}

/*Reset*/
h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, caption, th, td, img, form {
	border:none;
	border-collapse:collapse;
	font-style:normal;
	font-weight:normal;
	font-size:100%;
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:left;
	vertical-align:top;
}

/*全体*/
html{
	font-size:62.5%;
}
body{
	background:#F7F7F8;
	font:16px/400 -apple-system, BlinkMacSystemFont,Hiragino Sans,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic ProN,YuGothic,'Yu Gothic','メイリオ', meiryo, sans-serif;
	width:100%;
	max-width:640px;
	margin:0 auto;
	padding:0;
}
a{
	color:#0005dc;
	font-weight:bold;
	text-decoration:underline;
}
img{
	width:100%;
	height:auto;
}


/*文字の装飾*/
.bold{
	font-weight:bold;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.red{
	color:#f00;
	font-weight:bold;
}


/**/
article{
	background:#fff;
	margin:0 auto;
	padding:0 0 50px;
	width:100%;
	max-width:640px;
}
section{
	margin:0 10px;
	padding-top:10px;
}


/*h1*/
h1{
    background:#00b901 url("../img/ver37/h1.png") no-repeat;
    background-size:35% auto;
    background-position:3px 3px;
    color:#fff;
    font-size:25px;
    font-size:2.5rem;
    font-weight:bold;
    line-height:1.4;
    margin:0 auto;
    padding:15px 5px 30px 36%;
    position:relative;
    width:100%;
    max-width:640px;
}
h1 span.h1_em{
    background:#fff;
    border-radius:4px;
    color:#00a501;
    display:inline-block;
    font-size:12px;
    font-size:1.2rem;
    line-height:1;
    margin:0 0 8px;
    padding:7px 10px 5px;
    text-align:center;
}
h1 span.yellow{
    color:#fffc33;
    font-size:25px;
    font-size:2.5rem;
    font-weight:bold;
}
h1 img{
    position:absolute;
    width:80%;
    height:auto;
    bottom:5px;
    left:10px;
}
@media screen and (min-width:640px){
h1{
padding:20px 5px 40px 36%;
}
h1 span.h1_em{
font-size:20px;
font-size:2.0rem;
}
h1,
h1 span.yellow{
font-size:35px;
font-size:3.5rem;
}
h1 img{
position:absolute;
width:60%;
height:auto;
}
}
@media screen and (max-width:370px){
h1 span.h1_em{
font-size:10px;
font-size:1.0rem;
}
h1,
h1 span.yellow{
font-size:20px;
font-size:2.0rem;
}
}


/*p*/
p{
	color:#333;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.9;
	margin:20px 0 0;
}
/*PR*/
p.pr_text{
	color:#797979;
	font-size:12px;
	margin:5px 10px 0;
	text-align:right;
}


/*div.balloon*/
div.balloon{
	line-height:1;
	text-align:center;
	padding:3px 10px 13px;
}
div.balloon p{
	background:#00b901;
	border-radius:15px;
	color:#fff;
	display:inline-block;
	font-size:15px;
	font-weight:bold;
	letter-spacing:0.05em;
	line-height:1;
	margin:0;
	overflow:visible;
	padding:8px 20px 7px;
	position:relative;
    animation:pyokopyoko 2s ease-in-out infinite;
}
div.balloon p span{
	color:#ffff00;
	letter-spacing:0.05em;
	font-size:15px;
	font-weight:bold;
}
div.balloon p:before{
	border-right:10px solid transparent;
	border-top:10px solid #00b901;
	border-left:10px solid transparent; 
	content:"";	
	width:0;
	height:0;
	position:absolute;
	bottom:-10px;
	left:50%;
	margin-left:-10px;
}
@media screen and (min-width:640px) {
div.balloon p{
border-radius:17px;
font-size:20px;
}
div.balloon p span{
font-size:18px;
}
}
@media screen and (max-width:380px) {
div.balloon p{
border-radius:14px;
font-size:13px;
}
div.balloon p span{
font-size:13px;
}
}
@keyframes pyokopyoko {
0%{transform: translateY(0);}
70%{transform: translateY(0);}
75%{transform: translateY(-3px);}
80%{transform: translateY(0);}
85%{transform: translateY(-3px);}
90%{transform: translateY(0);}
}


/*h2.line*/
h2.line{
	background:#f2fce9;
	border:3px solid #00b901;
	border-radius:8px;
	color:#00b901;
	font-size:19px;
	font-weight:bold;
	line-height:1;
	margin-top:0;
	padding:15px 8px;
	text-align:center;
}
h2.line span{
	background:#ffff00;
	color:#00b901;
	font-size:20px;
	font-weight:bold;
	margin:0 3px;
	padding:3px 2px 0;
}
@media screen and (min-width:640px){
h2.line,
h2.line span{
font-size:30px;
}
}
@media screen and (max-width:380px){
h2.line,
h2.line span{
font-size:17px;
}
}


/*h2.voice*/
h2.voice{
	border-bottom:3px solid #b5b5b5;
	font-size:36px;
	font-size:4.6875vmin;
	font-weight:bold;
	line-height:1.4;
	letter-spacing:-0.1rem;
	margin:40px 0 20px;
	padding:.75em 8px .75em;
	position:relative;
}
h2.voice::after{
	border-bottom:solid 3px #00a501;
	bottom:-3px;
	content:'';
	display:block;
	left:0px;
	position:absolute;
	width:30%;
}
@media screen and (min-width:640px){
h2.voice{
font-size:22px;
}
}


/*.video*/
.video{
	margin-top:10px;
	text-align:center;
}
.video .video_small{
	width:74%;
}


/*.annotation*/
.annotation{
	font-size:13px;
	margin:3px 0 0;
}


/*フッター*/
footer{
	background:#00b901;
	display:flex;
	justify-content:center;
	padding:15px 0 30px;
}
footer p{
	display:inline-block;
	margin:0;
}
footer a{
	color:#fff;
	text-decoration:none;
	font-size:13px;
	font-size:1.3rem;
	line-height:1;
	padding:0 10px;
}