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


#ginza_cosme{
    max-width: 1200px;
    margin: auto;
    margin-bottom: 10%;
    text-align: center;
}

#ginza_cosme p {
/*    color: #403b37;*/
    font-size: 1.4rem;
    margin: 2% auto 5%;
    color: #4D3123!important;
    line-height: 2.8rem;
}


#ginza_cosme h11,h22,h33,h44{
    font-family: classico-urw, sans-serif;
    font-weight: 700;
    font-style: normal;
/*    color: #403b37;*/
}

h11{
    font-size: 2.4rem;
    color: #fff!important;
}


h22{
    font-size: 3rem;
    display: table-row;
}

h33{
    font-size: 2.6rem;
    margin: 4% auto;
    color: #4D3123!important;
}



.slidearea{
    width: 100%;
    margin: 0 auto 5%;
}


.sp_none {
    display: block;
}

.sp_on {
    display: none;
}

.sp_blank_top {
    margin-top: 0;
}

.link_jamp {
    height: 10px;
    padding-bottom: 200px;
}

/*lineup-----------------------------------*/

.lineup{
    margin: auto;
    text-align: center;
    display: inline-table;
    position: relative;
}

.lineup ul {
    display: table-cell;
    padding: 1%;
    width: 25%;
    list-style: none;
}

.lineup li {
    margin: 2%;
}

.lineup li p {
    margin: 6% auto;
}




/*about_ginza-----------------------------------*/



#about_ginza {
    width: 100%;
    text-align: center;
    background-color: transparent;
    background-image: linear-gradient( 250deg, #FFF4DE 37%, #CEB2CA 59%);
    margin: 8% auto;
}

#about_ginza .gradation {
    margin: 8% auto 2%;
    padding-top: 2%;
    height: 60px;
    background-color: transparent;
    background-image: linear-gradient( 
90deg
 , #B48097D4 0%, #FFAFA5B5 100%);
}

    .our_philosophy {
        width: 90%;
        margin: auto;
        padding-top: 5%;
        border-bottom: dotted;
        border-color: #fff;
        border-width: thick;
    }

    .our_philosophy p{
        font-size: 1.4rem;
        margin-bottom: 8%;
    }


    .concept_img {
        display: block;
        margin: 5% auto;
        text-align: center;
    }


    .introduction {
        width: 80%;
        margin: auto;
        text-align: center;

    }

    .introduction p{
        margin: 5% auto!important;
    }

    .introduction img {
        width: 80%;
        margin: 0 auto 5%;
    }

    #about_ginza .logo {
        margin: 5% auto;
        width: 20%;
}



/*-----------------------------------

商品一覧ページ

-----------------------------------*/


.about_ginza {
    width: 100%;
    text-align: center;
}

.about_ginza h33 {
    display: block;
    margin: 5% auto;
    line-height: 3.3rem;
}






/*product_list-----------------------------------*/



#product_list {
    width: 100%;
    display: inline-table;
    text-align: left;
    margin: 5% auto;
}


#product_list ul {
    display: inline-table;
    width: 32%;
    margin: auto;
    list-style: none;
}

#product_list li {
    margin: 2%;
    text-align: center;
}
#product_list li img {
    width: 80%;
    margin: auto;
}
 

#product_list h22{
    font-size: 3rem;
    display: block!important;
    margin: 2%!important;
}

#product_list li h44 {
    display: block;
    text-align: center;
    margin: 5% auto 2%;
    color: #4D3123!important;
}

#product_list li p {
    display: block;
    text-align: center;
    font-size: 1.3rem;
    line-height: 2rem;
    margin: 3% auto 10%;
}

/*#product_list .base_make, .point_make, .speciality, .skin_care {
    margin: 4% auto;
}*/
#product_list .base_make, .point_make, .speciality, .skin_care {
    margin: -15% auto 4%;
}

/*======================================

	ボタン用ギミック

=======================================*/



button {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:1em;display:inline-block;padding:0.5em 1em;transition:all 0.3s ease-in-out;text-align:center;
font-family:comfortaa;font-weight:bold}
button:before, button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out}
button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;}
button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;}
button:hover:before, button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#fff}
button:hover {color:#353535;background-color:#fff;border-color:#fff}
.panel {max-width:960px;text-align:center;position:relative;margin:auto;}

button p {
    color: #4D3123;
    margin: 1% auto!important;
}
















@media screen and ( min-width:781px) and ( max-width:1024px) {
    

    
    
    
}

/*======================================

	スマホ用ギミック

=======================================*/
@media screen and (max-width:780px) {
    

#ginza_cosme p {
/*    color: #403b37;*/
    font-size: 1.4rem;
    margin: 5% auto 12%;
    line-height: 2.8rem;
    text-align: start;
}
    
    .sp_none {
        display: none;
    }
    
    .sp_on {
    display: block;
}
    
    .sp_blank_top {
    display: block;
    margin-top: 4%;
}
    
    
h11{
    font-size: 2.4rem;
    color: #fff;
}


h22 {
    display: table-caption;
    margin: 4%;
    font-size: 3rem;
}

h33{
    display: block;
    font-size: 2rem;
    margin: 5% auto;
}

    
.introduction div {
    margin: 15% auto;
    display: block;
}
    
    
#product_list li img {
    width: 100%;
    margin: 10% auto 4%;
}
    
#product_list li h44 {
    display: block;
    text-align: center;
    margin: 5% auto 2%;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #4D3123!important;
}
    
#product_list li p {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin: 3% auto 10%;
}
    
    
.introduction p {
    margin: 8% auto 12%!important;
}
    
    
}