@charset "utf-8";

/* ===================================================================
 style info :リセットスタイル
=================================================================== */
/*--- reset */
html { overflow-y: scroll; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; vertical-align: top; }
object, embed { vertical-align: top; }
hr, legend { display: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
img, abbr, acronym, fieldset { border: 0; }
ul li { list-style-type: none; list-style-position: outside; }
ol li { list-style-position: outside; margin-left: 20px; }
table{	width:100%;}
.w10{ width:10%;}.w15{ width:15%;}.w20{ width:20%;}.w25{ width:25%;}.w30{ width:30%;}.w35{ width:35%;}.w40{ width:40%;}
.w100px{ width:100px;}.w150px{ width:150px;}.w200px{ width:200px;}.w250px{ width:250px;}

html,body{height:100%;}
body *{box-sizing: border-box}

/* ===================================================================
 style info :レイアウト
=================================================================== */

body {
    font-family:"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 16px;
	line-height:2;
    color: #FFF;
    background:#F1536C;
    background: -webkit-linear-gradient(top right, #F69D23, #F1536C);
    background: linear-gradient(to bottom left, #F69D23, #F1536C);}

#wrap{
    width: 1024px;
    margin: 0 auto;
    height: auto;
    min-height: 100%;
    /*背景の指定*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;}

a:link,a:visited {color: #ccc;text-decoration: none; outline: none;}
a:hover {color: #FFF; -webkit-transition: all .4s; transition: all .4s; text-decoration: none; }
a:active {color: #000; text-decoration: none;}

i { vertical-align: middle;}


/* ===================================================================
 style info : header
=================================================================== */

aside{
padding: 0 20px 0;}

aside img{
    width:424px;
}

main{
    width: 560px;
    padding-left: 20px;
}

main h1 img{
width: 340px;}

main h2{
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 10px;}

main .detail{
    font-size: 15px;
    margin: 20px 0 80px;}

main .info{
    font-size: 12px;
    }



@media screen and (max-width: 769px) {
    #wrap  {
        width:100%;
        margin: 0;
        display: block;
        background:#F1536C;
        background: -webkit-linear-gradient(top right, #F69D23, #F1536C);
        background: linear-gradient(to bottom left, #F69D23, #F1536C);
    }
    main{
        width: 100%;
        padding-left: 0px;}
    
    main *{
        text-align: center;
        padding: 0 10px;
        }
    
    main h1 img{
        width: 200px;}
    
    main h2{
        font-size: 20px;
        margin-bottom: 15px;
    line-height: 1.6;}

    main .detail{
        font-size: 14px;
        margin: 20px 0 80px;}

    main .info{
        font-size: 11px;
        letter-spacing: 0.1rem;
        padding: 0 10px 30px;
        text-align: center;
        letter-spacing: 0;}

    aside{
        width: 100%;
        padding: 20px 0 10px;
        text-align: center;
    }

    aside img{
        width: 280px;
    }
}