@charset "utf-8";

/*------------------------------------------------------------
  01.reset
------------------------------------------------------------ */

h1,h2,h3,h4,h5,h6,p,br,ul,ol,li,dl,dt,dd,from,table,th,td,input {
  margin: 0;
  padding: 0;
  color:#000;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
}

ul {
list-style-type:none;
}

img{
border:0;
}
html,
body {
    height: 100vh;
}

body {
margin: 0;
padding: 0;
text-align:center;
}


a:link { color: #9c1e31;text-decoration:none;}
a:visited { color: #9c1e31;text-decoration:none;}
a:hover { color: #9c1e31;text-decoration:underline;}
a:active { color: #9c1e31;text-decoration:underline;}

/*------------------------------------------------------------
  02.popup
------------------------------------------------------------ */
#container {
margin:30px auto;
width:600px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
.btn_back_large {
    display: none;
}

#title {
margin-bottom:10px;
}
#title .btn_back {
    display: none;
}

#section01 {
width:600px;
margin-bottom:20px;
padding-bottom:20px;
}
#section01 { /zoom : 1; }
#section01:after { content : ''; display : block; clear : both; }

.section {
width:600px;
margin-bottom:20px;
padding-top:20px;
background:url(../img/line.gif) repeat-x 0 top;
}

.section { /zoom : 1; }
.section:after { content : ''; display : block; clear : both; }

.section .main {
width:360px;
float:left;
padding-top:45px;
}

#section01 .main {
padding-top:45px;
}



.main p {
font-size:.875em;
line-height:1.8;
text-align:left;
margin-bottom:1em;
}



.aside {
width:200px;
float:right;
}

#section01 .aside {
margin:0 0 0 40px;
width:200px;
float:right;
padding-bottom:30px;
}


.aside p.note {
font-size:.875em;
line-height:1.8;
text-align:left;
}


#ranking01 {
margin:0 0 5px;
width:200px;
background:url(../img/bg_match_wine_1st.gif) repeat-y 0 0;
}
#ranking01 #ranking {
width:200px;
background:url(../img/bg_match_wine_1st_bottom.gif) no-repeat 0 bottom;
padding-bottom:15px;
}
#ranking02 {
margin:0 0 5px;
width:200px;
background:url(../img/bg_match_wine_2nd.gif) repeat-y 0 0;
}
#ranking02 #ranking {
width:200px;
background:url(../img/bg_match_wine_2nd_bottom.gif) no-repeat 0 bottom;
padding-bottom:15px;
}
#ranking03 {
margin:0 0 5px;
width:200px;
background:url(../img/bg_match_wine_3rd.gif) repeat-y 0 0;
}
#ranking03 #ranking {
width:200px;
background:url(../img/bg_match_wine_3rd_bottom.gif) no-repeat 0 bottom;
padding-bottom:15px;
}


#ranking .wineImg {
text-align:center;
}
#ranking h4 {
font-size:.875em;
font-weight:bold;
line-height:1.8;
text-align:center;
padding:10px 10px 5px;
color:#9c1e31;
}
#ranking h4 span {
font-size:.875em;
font-weight:normal;
line-height:1.5;
color:#9c1e31;
}



#container .wineData {
width:200px;
border-collapse:collapse;
}
#container .wineData table {
width:200px;
}
#container .wineData tr {
width:200px;
background:url(/wine/selection/img/line.gif) repeat-x 0 bottom;
}
#container .wineData th {
font-size:.75em;
line-height:1.5;
white-space:nowrap;
padding:5px 10px 5px 0;
}
#container .wineData th {
color:#661430;
}
#container .wineData th {
color:#6a8040;
}
#container .wineData th {
color:#cc5252;
}
#container .wineData th {
color:#8c774d;
}

#container .wineData td {
font-size:.75em;
line-height:1.5;
padding:5px 5px 5px 0;
}

#container .wineData .chart {
margin:10px 0 10px;
}



/*------------------------------------------------------------
  SP
------------------------------------------------------------ */
 @media screen and (max-width:767px){
     
     body {
     background: url(../../../common2015/img/bg.gif) repeat 0 0;
        background-size: auto auto;
     }
     
    /*------------------------------------------------------------
      popup
    ------------------------------------------------------------ */
    #container {
        margin:12px 10px;
        width:auto;
        display: block;
        box-sizing: border-box;
        padding-bottom: 100px;
    }
    #container .btn_back_large {
         display: block;
         width: 100%;
         height: 0;
         padding-top: 13.4666666666667%;
         background: url(../img/sp_btn_back_large.png) no-repeat 0 0;
         background-size: 100% auto;
         text-indent: -9999px;
         position: fixed;
         bottom:0;
         left: 0;
    }
    #title {
        margin-bottom:10px;
        background: none;
        position: relative;
    }
     #title h1 {
        width: 83.7333333333333vw;
        height: 0;
        padding-top: 11.6242038216561%;
        background: url(../img/sp_tl_match_wine.png) no-repeat 0 0;
        background-size: 100% auto;
        text-indent: -9999px;
     }
    #title .btn_back {
    display: block;
    width: 35.8666666666667vw;
    height: 8.9333333333333vw;
    background: url(../img/sp_btn_back.png) no-repeat 0 0;
    background-size: 100% auto;
    text-indent: -9999px;
    position: absolute;
        top: -.5333333333333vw;
        right: 0;
    }
    #section01 {
        width:auto;
        margin-bottom:20px;
        padding-bottom:20px;
    }
    #section01 { /zoom : 1; }
    #section01:after { content : ''; display : block; clear : both; }

    .section {
        width:auto;
        margin-bottom:20px;
        padding-top:20px;
        background:url(../img/line.gif) repeat-x 0 top;
    }
    .section .main {
        width:auto;
        float:none;
        padding-top:0;
    }
    #section01 .main {
        padding-top:0;
    }
     .section {
         display: flex;
         flex-direction: column;
     }
     .section .main {
         order: 2;
     }
     .section .aside {
         order: 1;
     }
    .main p {
        font-size:14px;
        font-size: 3.7333333333333vw;
        line-height:1.8;
        text-align:left;
        margin: 0 0 1em;
    }

    .aside {
        width:auto;
        margin: 0 auto;
        float:none;
        text-align: center;
        padding-bottom:30px;
    }

    #section01 .aside {
        margin:0 auto;
        width:auto;
        float:none; 
    }


    .aside p.note {
        font-size: 10px;
        font-size:2.6666666666667vw;
        line-height:1.8;
        text-align:left;
    }

    #ranking01 {
        margin:8.2666666666667vw auto 20px;
        padding: 25px 0;
        width:49.4666666666667vw;
        background: url(../../img/sp_wine_rank01_frame.png) no-repeat 0 0;
        background-size:100% 100%;
        position: relative;
    }
    #ranking01:before {
        content: '';
         width: 16.6666666666667vw;
         height: 16.6666666666667vw;
         background: url(../../img/sp_wine_rank01_label.png) no-repeat 0 0;
         background-size:100% auto;
         position: absolute;
         top: -8.2666666666667vw;
         left: 2.8vw;
    }
    #ranking01 #ranking {
        width:auto;
        background:none;
        padding-bottom:0;
    }
    #ranking02 {
        margin:8.2666666666667vw auto 20px;
        padding: 25px 0;
        width:49.4666666666667vw;
        background: url(../../img/sp_wine_rank02_frame.png) no-repeat 0 0;
        background-size:100% 100%;
        position: relative;
    }
    #ranking02:before {
        content: '';
         width: 16.6666666666667vw;
         height: 16.6666666666667vw;
         background: url(../../img/sp_wine_rank02_label.png) no-repeat 0 0;
         background-size:100% auto;
         position: absolute;
         top: -8.2666666666667vw;
         left: 2.8vw;
    } 
    #ranking02 #ranking {
        width:auto;
        background:none;
        padding-bottom:0;
    }
    #ranking03 {
        margin:8.2666666666667vw auto 20px;
        padding: 25px 0;
        width:49.4666666666667vw;
        background: url(../../img/sp_wine_rank03_frame.png) no-repeat 0 0;
        background-size:100% 100%;
        position: relative;
    }
    #ranking03:before {
        content: '';
         width: 16.6666666666667vw;
         height: 16.6666666666667vw;
         background: url(../../img/sp_wine_rank03_label.png) no-repeat 0 0;
         background-size:100% auto;
         position: absolute;
         top: -8.2666666666667vw;
         left: 2.8vw;
    } 
    #ranking03 #ranking {
        width:auto;
        background:none;
        padding-bottom:0;
    }
     
     #ranking01 .rankingNum,
     #ranking02 .rankingNum,
     #ranking03 .rankingNum {
         display: none;
     }
     
    #ranking .wineImg {
        text-align:center;
    }
    #ranking h4 {
        font-size:14px;
        font-size: 3.7333333333333vw;
        font-weight:bold;
        line-height:1.8;
        text-align:center;
        padding:10px 10px 5px;
        color:#9c1e31;
    }
    #ranking h4 span {
        font-size: 10px;
        font-size:2.6666666666667vw;
        font-weight:normal;
        line-height:1.5;
        color:#9c1e31;
    }

    #container .wineData {
        width:auto;
        border-collapse:collapse;
        text-align: center;
    }
    #container .wineData table {
        width:66.9333333333333vw;
        margin:0 auto;
    }
    #container .wineData tr {
        width:auto;
        background:url(/wine/selection/img/line.gif) repeat-x 0 bottom;
    }
    #container .wineData th {
        font-size:.75em;
        line-height:1.5;
        white-space:nowrap;
        padding:5px 0 5px 0;
    }
    #container .wineData th {
        color:#661430;
    }
    #container .wineData th {
        color:#6a8040;
    }
    #container .wineData th {
        color:#cc5252;
    }
    #container .wineData th {
        color:#8c774d;
    }

    #container .wineData td {
        font-size:.75em;
        line-height:1.5;
        padding:5px 5px 5px 10px;
        text-align: left;
    }

    #container .wineData .chart {
        margin:10px 0 20px;
        mix-blend-mode:multiply;
    }
     #container .wineData .buybutton {
         margin: 0 auto;
     }

}