@charset "UTF-8";

/*-----------------------------
全般
------------------------------*/
body{
     font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
/*    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";*/
    max-width:750px;
    height:auto;
    font-size:90%;
    line-height:1.2;
    margin:0 auto;
}

#container{
    position: relative;
    top:0
    left:0;
    background:#dbcb8a;
}

img{
    max-width:100%;
}
a{
    text-decoration:none;
    color:#000;
}
ul{list-style:none;}

.sp{display:block;}
.pc{display:none;}
.hidden{display:none;}

/*-----------------------------
コンテンツ
------------------------------*/
/* header */
header h1{
    padding:10px 0;
}
/* Key Image */
header #key{
    max-width:750px;
    background:#ba9648;
    text-align:center;
}
header #key .spmenu{
    display:flex;    
    flex-wrap:wrap;
    justify-content:space-between;
}
/*header #key img.keyimage{*/
header #key img.keyimage{
    width:70%;
    height:auto;
}
header #key img.menubar{
    width:auto;
    height:25%;
    margin-top:40px;
}

/* Shop Point */
#contents .sp .shopillust{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-top:5px;
}
#contents .sp .shopillust img{
    width:20%;
    height:20%;
}
#contents .sp .shopillust h2{
    text-align:center;
    margin:20px;
}
#contents #shoppoint .sp li{
    font-size:130%;
    margin-left:50px;
}
#contents #shoppoint .sp ul{
    margin-bottom:30px;
}

/* Oshirase */
#oshirase{
    background:#acb130;
}
#oshirase h2{
    margin:0 20px 10px 20px;
}
#oshirase li{
    font-size:120%;
    margin:0 0 7px 20px;;
}
#oshirase li a:hover{
/*    color:#dacb8a;*/
    color:#eee;
}

/* Osusume / Profile SP:SNS */
#osuleft h2{
    margin:20px;
}
#osuleft ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin:10px;
}
#osuleft img{
    width:170px;
}
#osuleft li.book3{
    text-align:center;
    margin:10px 0 5px 85px;
}
#osuleft #snssp,
#proleft #snssp{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin:10px 60px;
}
#osuleft #snssp img,
#proleft #snssp img{
    width:50px;
    height:auto;
}
#osuleft #snssp .ameba,
#proleft #snssp .ameba{
    width:50px;
    height:50px;
    display:block;
    border-radius:10px;
    background:#2c883a;
    color:#000;
    text-align:center;
    padding-top:15px;
}

/* footer */
#contents footer{
    height:50px;
    color:#313131;
    background:#ba9648;
    text-align:center;
    padding-top:15px;
}

/*-----------------------------
 タブレット -959
------------------------------*/
@media screen and (min-width:640px){
/* TAB:header */
    header h1{
        font-size:280%;
    }
/* TAB:Key Image */
    header #key img.keyimage{
        width:60%;
        height:auto;
        margin-left:100px
    }
    header #key img.menubar{
/*
        width:auto;
        height:100%;
*/
        margin-top:90px;
        margin-right:50px;
    }
/* TAB:Shop Point */
    #shoppoint{
        font-size:150%;
    }
    #shoppoint .sp .shopillust h2{
        padding-top:30px;
    }
    #shoppoint .sp ul{
        margin-left:120px
    }
    
/* TAB:Oshirase */
    #oshirase{
        font-size:150%;
        padding-left:50px;
    }
    #oshirase .sp img{
        margin-left:200px;
    }
    
/* TAB:Osusume / Profile SP:SNS */
    #osuleft h2{
        font-size:200%;
    }
    #osuleft ul{
        font-size:160%;
        margin:20px 80px;
    }
    #osuleft img{
        height:350px;
        width:auto;
    }
    #osuleft li.book3{
        margin-left:160px;
    }
    #osuleft #snssp,
    #profile #snssp{
        margin:10px 150px;
    }
/* SNS */
    #osuleft #snssp,
    #proleft #snssp{
        padding:5px;
        margin:10px 200px;
    }
}

/*-----------------------------
 PCサイト
------------------------------*/
@media screen and (min-width:960px){
/* PC 全般 */
    body{
        width:960px;
        max-width:1000px;
/*        margin: 0 auto;*/
    }

    .sp{display:none;}
    .pc{display:block;}
    .hidden{display:block;}
    
/* PC:header */
    header h1{
        font-size:200%;
    }
    header #key{
        display:flex;
        max-width:1000px;
        height:200px;
    }
    header #key img.keyimage{
        width:334px;
        height:200px;
        margin-left:0;
    }
    header #key h1.pc{
        text-align:left;
        margin:60px 50px;
    }
    header #key p{
        text-align:left;
        font-size:105%;
        line-height:1.5;
        margin:20px 40px;
        font-weight:600;
    }
/* PC:Menu */
    header .pc ul{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        padding:10px 150px;
        background:#87643e;
        margin-top:10px;
        font-size:120%;
    }
    header .pc li{
        font-weight:800;
    }
    header .pc li a:hover{
/*        color:#ba9648;*/
        color:#eee;
    }
    
/* PC: コンテンツ*/
/* PC:Shop Point */
    #shoppoint{
        font-size:110%;
    }
    #shoppoint .pc h2{
        text-align:center;
        margin:20px;
    }
    #shoppoint .pc li{
        font-size:90%;
        margin:0 15px;;
        text-align:center;
    }
    #shoppoint .pc li img{
        height:100px;
        width:auto;
    }
    #shoppoint .pc ul{
        display:flex;
        max-width:960px;
        margin-left:100px;
        margin-bottom:15px;
    }

/* PC:Oshirase */
    #oshirase{
        font-size:100%;
    }
    #oshirase img{
        padding-right: 30px;
    }
        
/* PC:Osusume */
/* PC:Osusume Left */
    #osuleft h2{
        font-size:130%;
    }
    #osuleft{
        margin-left:40px;
        margin-bottom:35px;
    }
    #osuleft ul{
        font-size:110%;
        margin:0;
        display:flex;
    }
    #osuleft img{
        height:280px;
        width:auto;
        margin:0 12px;
    }
    #osuleft li.book3{
        margin:0; /*SP margin Off*/
    }

/* PC:Osusume Right SNS / Profile Right SNS */
    #snspc{
        margin-top:85px;
        margin-right:35px;
    }
    #snspc a{
        width:150px;
        height:60px;
        display:block;
        font-size:130%;
        text-align:center;
        line-height:2.7;
    }
    #snspc a:hover{
        color:#eee;
    }
    #snspc a .facebook{
        display:block;
        border-radius:5px;
        background:#1877f2;
    }
    #snspc a .twitter{
        display:block;
        border-radius:5px;
        background:#1da1f3;
    }
    #snspc a .ameba{
        display:block;
        border-radius:5px;
        background:#2c883a;
    }
    #snspc a .insta{
        display:block;
        border-radius:5px;
        background:#cd2f7d;
    }
    #osusume ,
    #profile {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }
}
