@charset "UTF-8";

/*---------- ページ全体の指定 ----------*/

body {
margin:0;
padding:0;
font-size:100%;
color:#111;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
@media screen and (min-width:769px){
body {background:#efefef;}
}

a:link {color:#333;text-decoration:underline;}
a:visited {color:#333;text-decoration:underline;}
a:hover {color:#666;text-decoration:none;}
a img {border-style:none;}
img {vertical-align:bottom;image-rendering: -webkit-optimize-contrast;}
a:hover img{filter: brightness(1.2);}
a img {border-style:none;-webkit-transition:all .3s;transition:all .3s;}

p {font-size:105%;line-height:160%;}
@media screen and (min-width:769px){p {font-size:18px;line-height:180%;letter-spacing:1px;}}

@media screen and (max-width:768px){.spnone{display:none;}}
@media screen and (min-width:769px){.pcnone{display:none;}}

#wrapper{margin:0;padding:0;}
#container{margin:0;padding:0;}
@media screen and (min-width:769px){
#wrapper{
width:748px;
margin:0 auto;
padding:0 15px;
border-left:1px solid #333;
border-right:1px solid #333;
background:#fff;
}
#container{
background:#fff;
border-left:1px solid #333;
border-right:1px solid #333;
}
}


@media only screen and (min-width:320px) and (max-width:768px){
#fv{
margin:0;
padding:0;
margin:0;
padding:0;
height:100vh;
background-image:url(img/fv.png);
background-position:top center;
background-repeat:no-repeat;
background-size:auto 100%;
display:flex;
align-items:flex-end;
}
.fv_btn{
margin:auto 1% 6% 1%;
padding:0;
text-align:center;
}
.fv_btn img{width:100%;}
}
@media screen and (min-width:769px) {
#fv{
margin:0;
padding:0;
margin:0;
padding:0 0 15px 0;
background-image:url(img/fv_pc.png);
background-position:top center;
background-repeat:no-repeat;
}
.fv_btn{
margin:0;
padding:625px 0 0 0;
text-align:center;
}
.fv_btn img{width:480px;}
}

.device_head{
margin:0;
padding:20px 0;
font-size:140%;
font-weight:bold;
line-height:140%;
text-align:center;
color:#fff;
background:linear-gradient(to right, #4ae95a, #1cb4fb);
}
.device_bg{
margin:0;
padding:30px 0 35px 0;
text-align:center;
background-color:#f4f6f9;
background-image:url(img/back.png);
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
}
.device_title{margin:0;padding:0 0 15px 0;}
.device_title img{width:80%;}
.device{margin:0;padding:0;}
.device img{width:100%;}
.yureru-j {animation: yureru-j 2s infinite;}
@keyframes yureru-j {
0% {transform: translate(0px, 2px);}
5% {transform: translate(0px, -2px);}
10% {transform: translate(0px, 2px);}
15% {transform: translate(0px, -2px);}
20% {transform: translate(0px, 2px);}
25% {transform: translate(0px, -2px);}
30% {transform: translate(0px, 0px);}
}
@media screen and (min-width:769px) {
.device_head{padding:25px 0;font-size:28px;}
.device_bg{margin:0;padding:30px 0 45px 0;}
.device_title{padding:0 0 25px 0;}
.device_title img{width:60%;}
.device img{width:90%;}
}

.good_top{
margin:0;
padding:30px 20px 40px 20px;
text-align:center;
background:#f8f8f8;
}
.good_top img{width:100%;}
.good_arrow{
margin:0 auto 30px auto;
padding:0;
text-align:center;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-top:25px solid #f8f8f8;
}
.good{
margin:0 30px 45px 30px;
padding:0 0 45px 0;
text-align:center;
border-bottom:1px solid #f2f2f2;
}
.good img{width:100%;}
.good_bootom{
margin:0 30px 75px 30px;
padding:0;
text-align:center;
}
.good_bootom img{width:100%;}
@media screen and (min-width:769px) {
.good_top img{width:80%;}
.good{margin:0 60px 45px 60px;}
.good_bootom{margin:0 60px 75px 60px;}
}

.voice_top{margin:0 0 40px 0;padding:0;}
.voice_top img{width:100%;}
.voice{
margin:0 20px 45px 20px;
padding:0 0 45px 0;
text-align:center;
border-bottom:1px dashed #eee;
}
.voice img{width:100%;}
.voice_bootom{
margin:0 20px 15px 20px;
padding:0 0 45px 0;
text-align:center;
border-bottom:1px dashed #eee;
}
.voice_bootom img{width:100%;}
.voice_caption{
margin:0 20px 45px 20px;
padding:0;
font-size:75%;
line-height:150%;
text-align:right;
color:#666;
}
@media screen and (min-width:769px) {
.voice{margin:0 60px 45px 60px;}
.voice_bootom{margin:0 60px 15px 60px;}
.voice_caption{margin:0 60px 60px 60px;font-size:12px;}
}



/*---------- 文字装飾 ----------*/

.bold{font-weight:bold;}
.red{font-weight:bold;color:#e61e58;}
.yellow{color:#fffb9a;}
.ul{text-decoration:underline;}
.ym{font-weight:bold;background:linear-gradient(transparent 75%, #fffb9a 75%);}
.caption{font-size:75%;color:#666666;font-weight:normal;line-height:150%;}

.center{text-align:center;}
.right{text-align:right;}

.mt{margin-top: 30px;}
@media screen and (min-width:769px) {.mt{margin-top:45px;}}


/*---------- フッター ----------*/


#footer{
margin:0;
padding:30px 0;
font-size:75%;
line-height:200%;
color:#fff;
background:#303032;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
#footer a:link {color:#fff;text-decoration:underline;}
#footer a:visited {color:#fff;text-decoration:underline;}
#footer a:hover {color:#fff;text-decoration:none;}
@media screen and (min-width:769px){#footer{font-size:12px;}}