@charset "UTF-8";
/* CSS Document */

/* ========================================
    リセットcss
========================================= */
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-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{overflow-y: scroll;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea,{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
a:focus {outline:none;}

/* ========================================
    全体設定
========================================= */
body{
    width: 100%;
    height: auto;
        background-image: url("../images/background.png"),linear-gradient(-225deg, #182848 0%, #4b6cb7 56%, #fdeff9 100%);
    background-size: cover;
    display: block;
    margin: 0 auto;
/*    z-index: -999;*/
/*
    background: #4b6cb7;
background: -moz-linear-gradient(to top, #182848, #4b6cb7);
background: linear-gradient(to top,#fdeff9 0%, #4b6cb7 10%, #182848 100%);
*/

}

/* ========================================
    メイン
========================================= */

div#main img{
    width: 100%;
    height: auto;
    margin: 0 auto;
}

div#main{
    position: relative;
}

/* ========================================
    ボタン
========================================= */
div#button {
    width: 100%;
    height: auto;
    display: flex;
/*
    position: absolute;
    top: 1598px;
    left: 0;
    right: 0;
*/
}

button {
    width: 588px;
    height: 218px;
    position:relative;
    padding:8px 25px 8px 25px;
    border:3px solid #4a2f79;
    background:none;
/*
    text-transform:uppercase;
    letter-spacing:1px;
*/
    cursor:pointer;
    display: block;
    margin: 0 auto;
}

button:after {
  position: absolute;
  top:10px;
  left:-10px;
  content:"";
  height:100%;
  width:100%;
  z-index:-1;
/*
  -webkit-transform: rotate(-1deg);
     -moz-transform: rotate(0deg);
*/
}

.tenpo:after {
    background:#8ec9d5;
}
.kyujin:after {
    background:#f562a7;
}

button.tenpo{
    margin-bottom: 85px;
}

button.kyujin{
    margin-bottom: 120px;
}

div#town img{
    width: 100%;
    height: auto;
    margin-top: 10px;
}
/* ========================================
    フッター
========================================= */

footer p{
    font-family: Andale Mono,Verdana, Geneva, "sans-serif";
    color: #fff;
    font-size: 20px;
    text-align: center;
}

div#copy{
    width: 100%;
    height: auto;
    margin: 20px auto;
}

/* ========================================
    @media
========================================= */
@media screen and (max-width: 1024px) {
        button{
        width: 424px;
        height: 157px;
        position:relative;
        padding:15px 20px 10px 20px;;
        border: 2px solid #4a2f79;
    }
    button:after {
        position: absolute;
        top:4px;
        left:-5px;
        content:"";
        height:100%;
        width:100%;
        z-index:-1;
    }
    button.tenpo img {
        width: 300px;
        height: auto;
        }
    button.kyujin{
        margin-bottom: 0px;
    }
    button.kyujin img {
        width: 300px;
        height: auto;
    }
    button.tenpo{
        margin-bottom: 0px;
    }
}
@media screen and (max-width: 896px) {
    button{
        width: 353px;
        height: 131px;
        position:relative;
        padding:15px 20px 10px 20px;;
        border: 2px solid #4a2f79;
    }
    button:after {
        position: absolute;
        top:4px;
        left:-5px;
        content:"";
        height:100%;
        width:100%;
        z-index:-1;
    }

    button.tenpo img {
        width: 230px;
        height: auto;
    }
    button.kyujin img {
        width: 230px;
        height: auto;
    }
    button.tenpo{
    margin-bottom: 30px;
    }
}
@media screen and (max-width: 480px) {
    button{
        width: 176px;
        height: 65px;
        position:relative;
        padding:15px 20px 10px 20px;;
        border: 2px solid #4a2f79;
    }
    button:after {
        position: absolute;
        top:4px;
        left:-5px;
        content:"";
        height:100%;
        width:100%;
        z-index:-1;
    }
    button.tenpo img {
        width: 110px;
        height: auto;
    }
    button.kyujin img {
        width: 110px;
        height: auto;
    }
    button.tenpo{
    margin-bottom: 30px;
    }
    footer div#copy{
        width: auto;
        height: 10px;
        margin: 5px auto;
    }
    div#copy p{
        font-size: 10px;
    }
}