@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*
作成日: 2018/02/22
テーマ:新宿発・デリヘルナチュラルビューティー認証ページ
作成者:Garalia
*/
html{
    font-family: 'Noto Sans Japanese', sans-serif;
}

@media screen and (min-width: 769px){
    html{
        height: 1080px;
    }
    body{
        margin: 0;
        background: url(../../img/bg-snb-pc01.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    #indexWrap{
        width: 100%;
        margin: 0 auto;
    }
    .indexName{
        width: 100%;
        margin:0;
    }
    .indexName h1{
        font-size: 9px;
        margin: 0;
        color: #eee;
        font-weight: 300;
        text-align: left;
    }
    .mainImage{
        width: 100%;
        height: 1080px;
        background: url(../../img/index_pc.jpg);
        background-repeat: no-repeat;
        margin: -15px auto 0;
    }
    .mainImage .entryButton{
        width: 60%;
        margin: 0 auto;
        padding: 40% 0 0;
        display: flex;
        justify-content: space-between;         
    }
    .mainImage .entryButton .box{
        width: 45%;
        margin: 0 auto;
        text-align: center;
    }
    .mainImage .entryButton img{
        margin: 0 auto;
    }
    .entry02{
        margin: 20px auto;
        width: 20%;
    }
    .entry02 img{
        width: 100%;
        margin: 0 auto;
    }
    .caption{
        width: 100%;
        margin: 0 auto;
    }
    .caption .indexText{
        width: 1200px;
        margin: 40px auto 20px;
        text-align:center;
        border: 1px solid #e3e5e2;
        padding: 20px 5px;
    }
    .caption .indexText h1{
        font-size: 10px;
        color: #e3e5e2;
        margin: 0 auto;
        font-weight: 250;
    }
    .caption .indexText h2{
        font-size: 10px;
        margin: 0 auto;
        color: #e3e5e2;
        font-weight: 250;
    }
    .caption .indexText h3{
        font-size: 10px;
        margin: 0 auto;
        color: #e3e5e2;
        font-weight: 250;
    }
    .caption .indexText h4{
        font-size: 10px;
        margin: 0 auto;
        color: #e3e5e2;
        font-weight: 250;
    }
    .caption .indexText h5{
        font-size: 10px;
        margin: 0 auto;
        color: #e3e5e2;
        font-weight: 250;
    }
    .caption .indexText p{
        font-size: 10px;
        margin: 0 auto;
        color: #e3e5e2;
        font-weight: 250;
        line-height: 15px;
    }
    .caption .indexText a{
        color: #e3e5e2;
        text-decoration: none;
    }
    .index_shame_flex{
        width: 1200px;
        margin: 0 auto;
        background: rgba(255,255,255,0.8);
        border-radius: 5px;
        padding: 20px 0;
    }
    .index_shame_flex ul{
        display: flex;
        width: 95%;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
    }
    .index_shame_flex li{
        width: 32%;
        margin: 0 2px 10px;
    }
    .shame-inner{
        width: 100%;
        height: 500px;
        border: 1px #eee solid;
    }
    .index_shame_flex{
        margin: 0 auto;
        background: rgba(255,255,255,0.8);
        border-radius: 5px;
        padding: 20px 0;
    }
    .index_shame_flex ul{
        display: flex;
        width: 95%;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
    }
    .index_shame_flex li{
        width: 32%;
        margin: 0 2px 10px;
    }
    .shame-inner{
        width: 100%;
        height: 500px;
        border: 1px #eee solid;
    }
}

@media screen and (max-width: 768px){
    html{
        height: 100%;
    }
    body{
        margin: 0;
        background: url(../../img/index_sp.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    #indexWrap{
        width: 100%;
        margin: 0 auto;
    }
    .indexName{
        width: 100%;
        margin:0;
    }
    .indexName h1{
        font-size: 9px;
        margin: 0;
        color: #eee;
        font-weight: 200;
        text-align: center;
    }
    .mainImage{
        width: 100%;
        background-repeat: no-repeat;
        margin: -15px auto 0;
        background-size: 100%;
    }
    .mainImage .entryButton{
        width: 95%;
        margin: 0 auto;
        padding: 103% 0 0;
        display: flex;
        justify-content: space-between;         
    }
    .mainImage .entryButton .box{
        width: 45%;
        margin: 0 auto;
        text-align: center;
    }
    .mainImage .entryButton img{
        margin: 0 auto;
        width: 100%;
    }
    .entry02{
        margin: 5px auto 20px;
        width: 50%;
    }
    .entry02 img{
        width: 100%;
        margin: 0 auto;
    }
    .caption{
        width: 100%;
        margin: 0 auto;
    }
    .caption .indexText{
        width: 90%;
        margin: 40px auto 20px;
        text-align:center;
        border: 1px solid #91989F;
        padding: 20px 5px;
    }
    .caption .indexText h1{
        font-size: 10px;
        color: #91989F;
        margin: 0 auto;
        font-weight: 250;
    }
    .caption .indexText h2{
        font-size: 10px;
        margin: 0 auto;
        color: #91989F;
        font-weight: 250;
    }
    .caption .indexText h3{
        font-size: 10px;
        margin: 0 auto;
        color: #91989F;
        font-weight: 250;
    }
    .caption .indexText h4{
        font-size: 10px;
        margin: 0 auto;
        color: #91989F;
        font-weight: 250;
    }
    .caption .indexText h5{
        font-size: 10px;
        margin: 0 auto;
        color: #91989F;
        font-weight: 250;
    }
    .caption .indexText p{
        font-size: 10px;
        margin: 0 auto;
        color: #91989F;
        font-weight: 250;
        line-height: 15px;
    }
    .caption .indexText a{
        color: #91989F;
        text-decoration: none;
    }
    .index_shame_flex{
        width: 98%;
        margin: 0 auto;
        background: rgba(255,255,255,0.8);
        border-radius: 5px;
        padding: 20px 0;
    }
    .index_shame_flex ul{
        display: flex;
        width: 99%;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
    }
    .index_shame_flex li{
        width: 48%;
        margin: 0 0 10px;
    }
    .shame-inner{
        width: 100%;
        height: 500px;
        border: 1px #eee solid;
    }
}