@charset "utf-8";
/* ワンピース */
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;
}
a{color: #FFF; text-decoration: none;}
a:hover{text-decoration: underline;}
input,
textarea,
button{font-family:'helvetica neue','hiragino sans gb','tahoma','microsoft yahei ui','microsoft yahei','simsun','sans-serif';}

body{background: url("../img/bg.jpg") #2eb5e8 center top no-repeat; background-size: cover; color: #FFF; font-size: 14px; font-family:'helvetica neue','hiragino sans gb','tahoma','microsoft yahei ui','microsoft yahei','simsun','sans-serif'; -webkit-font-smoothing:antialiased;}
.toolbar{height: 42px; background-color: #353535; overflow: hidden;}
.toolbar .right{float: right; padding-top: 13px; padding-right: 25px;}
.toolbar .right a{margin-left: 30px;}

.main{ max-width: 800px; margin: 0 auto; padding-top: 90px;}
.main h1{background-image: url("../img/logo.png"); width: 243px; height: 36px; margin: 0 auto; font-size: 1px; line-height: 99; overflow: hidden;}
.main .search-bar{max-width: 800px; margin: 49px auto 0; overflow: hidden; position: relative;}
.main .search-bar .search-sort{float: left; width: 7.5%; min-width: 3em; height: 42px; background-color: #D1ECF6; text-align: center; line-height: 42px; color: #434343;}
.main .search-bar .search-ipt{float: left; width: 68.75%; height: 42px; background-color: #FFF; font-size: 14px; border-width: 0; border-left: #CACACA solid 1px; line-height: 42px; color: #434343; padding: 0 0 0 9px;}
.main .search-bar .search-go{position: absolute; top: 0; right: 0; width: 19.75%;  min-width: 5em; height: 42px; background-color: #20B5E8; font-size: 14px; border: #FFF solid 1px; color: #FFF; cursor: pointer;}

.main .links{overflow: hidden; max-width: 800px; margin: 97px auto;}
.main .links .list{overflow: hidden; width: 860px;}
.main .links .list .item{float: left; width: 368px; height: 168px; border: #FFF solid 1px; margin: 0 60px 60px 0; text-align: center;}
.main .links .list .item h2{font-size: 24px; margin: 60px 0 8px;}

.foot{height: 50px; line-height: 50px; background-color: #353535; color: #7C7C7C; text-align: center; position: fixed; bottom: 0; width: 100%;}

@media (max-device-width: 800px) {
    .main .search-bar{ margin: 49px 3% 0;}
    .main .search-bar .search-go{right: 0.95%;}
    .main .links .list{width: auto; margin: 0 2%;}
    .main .links .list .item{width: 47%; margin: 0 1% 1%;}
    .foot{position: static;}
}
@media (max-device-width: 640px) {
    .main{padding-top: 20px;}
    .main .search-bar{margin-top: 20px;}
    .main .links .list .item h2{margin-top: 47px;}
    .main .links .list .item p{line-height: 1.6; padding: 0 10px;}
    .main .links{margin-top: 20px; margin-bottom: 20px;}
}