@charset "UTF-8";
/* 大阪弁 */
@keyframes shake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 6px); }/* -4px, 4px */
    55% { transform: translate(1px, -1px); }/* 3px, -3px */
    70% { transform: translate(0px, 0px); }/* -2px, 2px */
    85% { transform: translate(-1px, 1px); }/* 1px, -1px */
    100% { transform: translate(-2px, 2px); }
}
body,h1,form,textarea,p { margin:0;padding:0;}
body { -webkit-text-size-adjust: 100%; background-color:#EEE; font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; }
h1 {height:64px; line-height:54px; text-align:center; font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; transform: rotate(0.028deg);}
h1 a { color:#111; text-decoration: none;}
form {padding:10px; padding-bottom:160px;}
a {color:#4970B3;}
textarea,form p {
	box-sizing: border-box;
	width:100%;
	font-size:16px;
	padding:10px;
	border-radius:5px;
	background-color:#FFF;
	line-height:1.5;
}
textarea,#translation { border:5px solid #333; }
#info {  border:5px solid #777; }
textarea {height:240px;margin-bottom:40px;}
button {
	position:absolute;
	left:50%;
	top:265px;/* 240-(73+31/2)+64 */
	width:96px;
	height:108px;
	margin-left:-90px; /* 5+71/2 -50 */
	border:0 none;
	z-index:1;
	background:url(button3.png) no-repeat;
	background-size: 192px 216px;
	background-position:0 0;
	overflow:hidden;
	text-indent:200%;
	white-space: nowrap;
	cursor:pointer;
}
button.negipon {
	background-position:0 -108px;
	margin-left: 10px;
}
button.sauce:hover {
	background-position: -96px 0;
	animation: shake 0.2s linear;
	-webkit-animation: shake 0.2s linear;
}
button.negipon:hover {
	background-position: -96px -108px;
	animation: shake 0.2s linear;
	-webkit-animation: shake 0.2s linear;
}
#backbtn {
	text-align: center;
	margin-top: 15px;
}
#backbtn a {
	display: inline-block;
	text-decoration: none;
	padding: 5px 15px;
	background: #111;
	color: #fff;
	transition: 0.3s;
}
#backbtn a:hover{
	background: #333;
}
#translation {
	margin-bottom: 25px;
	position: relative;
}
#translation::after {
	position: absolute;
	right: -5px;
	bottom: -23px;
	background-color: #333;
	border-radius: 5px;
	height: 23px;
	line-height: 23px;
	font-size: 14px;
	padding: 0 5px;
	color:#FFF;
}
#translation.sauce::after {
	content: "こてこて";
}
#translation.negipon::after {
	content: "あっさり";
}
#translation span {cursor:pointer; color:#C00;}

#nendbn {
	margin-top: 15px;
}
#shirasubn {
	margin-top: 15px;
	text-align: center;
}
#shirasubn a {
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #333;
}
#shirasubn a img {
	vertical-align: bottom;
}

footer {
	position:fixed;
	padding-top:100px;
	height:80px;
	width:100%;
	bottom:0px;
	background:url(fotter_bg.png) center top;
	z-index:1;
}
footer p {
	color:#FFF;
	padding:0 20px;
	font-size:14px;
	line-height:1.1;
}
footer p#copyright {
	text-align:center;
	padding-top:1em;
	font-size:12px;
}
footer p a {
	color:#FFF;
}

/* SNS share button */
.nsnsbutttonlist { font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , Meiryo , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; margin: 0; padding: 0; list-style: none; text-align: center; }
.nsnsbutttonlist li { display: inline-block; margin: 0; padding: 0; width: auto; line-height: 32px; height: 42px; box-sizing: border-box; }
.nsnsbutttonlist li:not(:last-child) { padding-right: 5px; }
.nsnsbutttonlist li figcaption { display: none; }
.nsnsbutttonlist figure { color: #FFFFFF; font-size: 12px; display: block; padding: 5px; margin: 0; border-radius: 5px; text-decoration: none; cursor: pointer; }
.nsnsbutttonlist figure:hover { background-color: rgba(255, 255, 255, 0.2); }
.nsnsbutttonlist svg { width: auto; margin: 0; height: 32px; vertical-align: middle; }

.nsnsbutttonlist {margin-top: 15px;}