﻿@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}



body{
width:100%;
margin:0;
background:#FAFAFA!important;
font-family: "Helvetica", "Arial", YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
line-height: 1.75;
color: #333;
counter-reset: number 0;
}

h1.logo{
text-align: center;
font-size:20px;
font-weight: bold;
width: 100%;
height:auto;
/*background: #148D54;*/
color: #fff;
padding:5px 0 0 0;
}
h1.logo a{
color: #fff;
text-decoration: none;
}
.serchBox{
background: #40A778;
padding:10px 0;
border-bottom:1px solid #fff;
margin:0 auto;
text-align: center;
}
#checkboxArea_box{
padding:5px 20px;
}
.checkboxArea{
float: left;
font-size:11px;
margin-right:10px;
padding:5px;

border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: #8DE5C6;
}
.clear{
clear: left;
}
.rank{
padding:5px 10px 10px 10px;
margin:10px 10px 20px 10px;
background: #fff;
border:1px solid #EBEBEB;
border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
-moz-border-radius:0 8px 0 8px;
position: relative;/*相対配置*/
}
.rank:before {

}
/* ラベル部分 左上に表示 */
.rank::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 2em solid transparent;
    border-left: 2em solid #2DBF60; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.rank::after {
  counter-increment: number 1;      /* number カウンタの増加数をセット */
  content: counter(number) " ";      /* 表示形式を指定 */
    display: block;
    top: 0;
    left: 0;
    color: #fff; /* 文字色はここで変更 */
    position: absolute;
    z-index: 101;
    padding-left:3px;
    font-size:13px;
}
h3.name{
text-align: center;
color: #010101;
padding:0 0 5px 0;
font-weight: bold;
}
.text_1{
text-align: center;
font-size:90%;
color: #148D54;
padding:10px 0 0 0;
font-weight: bold;
}

.infos{
padding:20px;
}
.infos p{
font-size:80%;
color:#666;
}
h2.infos{
background: #40A778;
color: #FFF;
margin:20px 0;
font-size:15px;
}
h3.infos{
background: #eee;
color: #333;
margin:20px 0 10px 0;
padding:10px;
font-size:14px;
}


/* 画像/左 テキスト/右 ++++++++++++++++++++++++++++++++++++++ */
#app_box{
margin:0;
}
#news1 ul li{
display:table;
}
#news1 ul li:not(:last-child){
/*border-top:1px solid #f8f8f8;*/

}
#news1 ul li{
display:block;
padding:2px 0 10px 0;
position:relative;
text-decoration:none;
border-bottom:1px dashed #8DE5C6;
}
#news1 ul li a{
display:block;
position:relative;
text-decoration:none;
}
#news1 ul li span{
font-size:10px;
color:#fff;
padding:2px 4px;
background: #8DE5C6;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
#news1 ul li p{
font-size:16px;
font-weight: bold;
color:#010101;
line-height: 1.2;
}
#news1 .news1_content{
}
#news1 ul li a:after{
}
#news1 ul li figure{
display:table-cell;
vertical-align:middle;
width:75px;
padding-right:10px;
line-height:0.1em;
}
#news1 ul li figure img{
width:75px;
height:auto;
}
#news1 ul li div{
display:table-cell;
vertical-align:middle;
}
#news1 img.news_kanren_img{
width: 75px!important;
height: 75px!important;
}

#news1 .teikyou{
color:#999;
font-size:80%;
}
#news1 .muryou{
position: absolute;
bottom:0;
right: 0;
margin:0;
color:#fff;
font-size:12px;
font-weight: bold;
background: #148D54;
color:#FFF;
padding:5px 10px;
margin-bottom:10px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #245F43), color-stop(0.00, #2DBF60));
background: -webkit-linear-gradient(top, #2DBF60 0%, #245F43 88%);
background: -moz-linear-gradient(top, #2DBF60 0%, #245F43 88%);
background: -o-linear-gradient(top, #2DBF60 0%, #245F43 88%);
background: -ms-linear-gradient(top, #2DBF60 0%, #245F43 88%);
background: linear-gradient(to bottom, #2DBF60 0%, #245F43 88%);
}
#news1 .muryou a{
color: #FFF;
}

.gaiyou{
font-size: 80%;
color:#333;
padding:5px 0;
text-align: justify;
text-justify: inter-ideograph;
}
.user_voice{
background: #e8f9f3;
color: #555;
padding:20px 10px 5px 10px;
margin:0 0 5px 0;
font-size:13px;
line-height: 1.4;
position: relative;/*相対配置*/
}
.user_voice::before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    z-index: 100;
    background: #aaa;
}
.user_voice::after {
  content: "ユーザー評価 ★★★★★";      /* 表示形式を指定 */
    display: block;
    top: 0;
    left: 0;
    color: #fff; /* 文字色はここで変更 */
    position: absolute;
    z-index: 101;
    padding:0px 5px;
    font-size:13px;
    background: #76dfba;
}
.user_voice2{
background: #e8f9f3;
color: #555;
padding:20px 10px 5px 10px;
margin:0 0 5px 0;
font-size:13px;
line-height: 1.4;
position: relative;/*相対配置*/
}
.user_voice2::before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    z-index: 100;
    background: #aaa;
}
.user_voice2::after {
  content: "ユーザー評価 ★★★★";      /* 表示形式を指定 */
    display: block;
    top: 0;
    left: 0;
    color: #fff; /* 文字色はここで変更 */
    position: absolute;
    z-index: 101;
    padding:0px 5px;
    font-size:13px;
    background: #76dfba;
}



.balloon1 {
 	position: relative;
	display: inline-block;
 	margin: 0 auto;
 	text-align: center;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #252525;
	font-size: 13px;
	background: #fff97a;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.balloon1:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #fff97a;
}

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

/* DLボタン ++++++++++++++++++++++++++++++++++++++ */
.wf-roundedmplus1c {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight:bold;
}
.yurabutton3 {
display: block;
width: 90%!important;
margin: 15px auto 10px auto;
border-bottom: 8px solid #254c8e;
border-radius: 10px;
background: #407FEA;
color: #ffffff;
padding: 10px 5px;
font-size:32px;
text-align: center;
text-decoration: none!important;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: yurabutton3;
animation-timing-function: ease;
transform: scale(1);
transform-origin: center bottom 0;
}
@keyframes yurabutton3 {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
88% { transform: scale(1.0, 1.0) translate(0%, 0%); }
90%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
92%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
94%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
96%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
98%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@media only screen and (max-width: 480px) {
.yurabutton3{
width: 90%;
font-size:18px;
}
}
.yurearrow1{
color:yellow!important;
display: inline-block;
padding-right:10px;
position: relative;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: yurearrow1;
animation-timing-function: ease;
transform: scale(1);
transform-origin: center bottom 0;
}
@keyframes yurearrow1{
0% { left: 0px;}
25% { left: 5px; }
50% { left: 0px; }
75% { left: 5px; }
100% { left: 0px;}
}/* /yurabutton3 */

















/* フッター */
.footer{
border-top:2px solid #40A778;
margin:30px 0 0 0;
padding:20px;
text-align: center;
font-size: 80%;
background: #40A778;
color:#8DE5C6;
}
.footer a{
text-decoration: none;
color: #8DE5C6;
}






/* フォームパーツ */
select{
    outline:none;
    text-indent: 0.01px;
    text-overflow: '';
    background: #f9f9f9;
    vertical-align: middle;
    font-size:12px;
    color:#2DBF60;
    padding:5px;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    border:2px solid #148D54;
}
select option{
  background-color: #fff;
  color: #2DBF60;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #2DBF60;
}

