@charset "utf-8";
.page-contents{
    font-family: 'Nespresso',sans-serif;
    line-height: 1.3;
    font-size: 15px;
    max-width: 996px;
    margin: 0 auto;
}

.page-contents *{
    box-sizing: border-box;
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;  
}


.page-contents .line-p p{
    margin: 0;
    padding: 0;
    display: inline-block;
}

.disp_sp{
    display: none;
}

.wrap{
    max-width: 996px;
    margin: 0 auto;
}

.ttl-1{
    color: #634207;
    font-size: 35px;
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.27);
}

.ttl-2{
    margin-top: 1.265%;
    color: #634207;
    font-size: 17px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.27);
}

.ttl-3{
    margin-top: 1.786%;
    color: #ad833d;
    font-size: 14px;
}

.ttl-4{
    font-size: 30px;
    text-indent: -0.5em;
    color: inherit;
    margin: 0 0 30px 0;
}

.cf:before,
.cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

/*top*/

#cs-top{
    padding: 3.314% 4.32% 2.536%;
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/mainVisual_image-en.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}


/*nav*/

#cs-menu{
    background-color: #58392c;
}

#cs-menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#cs-menu ul li{
    width: 20%;
    text-align: center;
    float: left;
    position: relative;
    padding: 0;
}

#cs-menu ul li:after{
    content: "";
    height: 60%;
    width: 1px;
    background-color: #896c60;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

#cs-menu ul li:last-child:after{
    content: none;
}

#cs-menu ul li a:after {
    display: block;
    content: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/anchorArrow-en.png);
    width: 22px;
    height: 22px;
    position: absolute;
    bottom: 5px;
    margin: auto;
    left: 0;
    right: 0;
}

#cs-menu ul li a{
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    padding: 0;
    display: block;
    text-decoration: none;
    padding: 5px 0 32px 0;
    cursor: pointer;
}

#cs-menu ul li a span{
    display: block;
    margin: 0 0 15px 0;
}


.nav-line{
    width: 50%;
    height: 1px;
    margin: 0 auto;
}

#cs-nav-morning .nav-line{
    background-color: #e2932c;
}

#cs-nav-after-lunch .nav-line{
    background-color: #e15f58;
}

#cs-nav-afternoon .nav-line{
    background-color: #a1239c;
}

#cs-nav-evening .nav-line{
    background-color: #577db1;
}

#cs-nav-weekend .nav-line{
    background-color: #05796d;
}

/*col*/
.cs-col{
    padding: 60px 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#fff));
    background: #f0f0f0;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 );
}

.cs-col .wrap{
    max-width: 83.73%;
}

.fl-left{
    float: left;
    vertical-align: top;
}

.fl-right{
    float: right;
    vertical-align: top;
}

.cs-ov-img{
    width: 40%;
}

.cs-ov-img img{
    width: 100%;
    display: block;
}

.cs-ov-detail{
    width: 60%;
}

.cs-ov-detail.fl-right{
    padding: 18px 0 0 30px;
}

.cs-ov-detail.fl-left{
    padding: 18px 30px 0 0;
}

.cs-ov-title{
    color: #fff;
    padding: 7px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 18px;
    text-align: center;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    -khtml-border-radius: 17px;
    border-radius: 17px;
    margin: 0 0 40px 0;
    position: relative;
}

.cs-ov-copy-wrap{
    margin-left: 1em;
}

.cs-ov-copy{
    color: #424242;
    line-height: 1.6;
}

.cs-ov-title:after{
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    top: -25px;
    box-shadow: 7px 6px 17px 3px rgba(0, 0, 0, 0.6);
    border-radius: 41px;
    right: 0;
    background-size: 100% auto;
}

.fl-left .cs-ov-title:after{
    right: auto;
    left: 0;
}

.cs-col-title{
    font-size: 22px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    background-color: inherit;
    color: inherit;
    padding: 20px 0;
    text-align: center;
    margin: 15px 0 0 0;
}

.recommended {
    width: 95.09%;
    padding-top: 68%;
    margin: 2.88% auto 3.11%;
    position: relative;
    list-style: none;
}

.recommended li{
    line-height: 1;
    position: absolute;
}

.recommended a{
    font-size: 11px;
    color: #000;
    -webkit-text-size-adjust: none;
}

/*---Morning---*/

#cs-morning{
    border-color: #eea32d;
    color: #eea32d;
}

#cs-morning .cs-ov-title{
    background-color: #eea32d;
}

#cs-morning .cs-ov-title:after{
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/morning_clock-en.png);
}

#cs-morning .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_morning-en.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

#cs-morning .capsule_kazaar {
    top: 10.09%;
    right: 10.5%;
}

#cs-morning .capsule_ristretto {
    top: 12.5%;
    right: 30%;
}

#cs-morning .capsule_arpeggio {
    top: 31%;
    right: 30%;
}

#cs-morning .capsule_envivo {
    top: 22%;
    right: 30%;
}

#cs-morning .capsule_linizio {
    top: 71%;
    left: 25.5%;
}

/*---Lunch---*/

#cs-lunch{
    border-color: #e15f58;
    color: #e15f58;
}

#cs-lunch .cs-ov-title{
    background-color: #e15f58;
}

#cs-lunch .cs-ov-title:after{
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/lunch_clock-en.png);
}

#cs-lunch .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_lunch-en.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

#cs-lunch .capsule_dharkan {
    top: 31%;
    right: 20.0%;
}

#cs-lunch .capsule_roma {
    top: 41%;
    right: 28.9%;
}

#cs-lunch .capsule_fortissio {
    text-align: center;
    top: 41%;
    right: 36.6%;
}


/*Afternoon*/
#cs-afternoon{
    border-color: #752771;
    color: #752771;
}

#cs-afternoon .cs-ov-title{
    background-color: #752771;
}

#cs-afternoon .cs-ov-title:after{
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/afternoon_clock-en.png);
}

#cs-afternoon .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_afternoon-en.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}


#cs-afternoon .capsule_capriccio {  
    top: 53%; 
    left: 39.1%; 
}
#cs-afternoon .capsule_volluto { 
    top: 53%; 
    left: 31.8%; 
}
#cs-afternoon .capsule_rosabaya { 
    top: 28.2%; 
    right: 34.3%;
    text-align: center;
}
#cs-afternoon .capsule_bukeela {     
    top: 85%;
    left: 19.2%;
    text-align: center;
}

#cs-afternoon .capsule_vivalto { 
    top: 27%; 
    left: 37.7%; 
}

#cs-afternoon .capsule_linizio { 
    top: 71%;
    left: 25.5%;
}

#cs-afternoon .capsule_caramelito {  
    top: 51%;
    right: 35%; 
}

#cs-afternoon .capsule_ciocattino { 
    top: 71%;
    right: 27.6%; 
}

#cs-afternoon .capsule_vanilio { 
    top: 59.5%;
    right: 20%;
}



/*evening*/
#cs-evening{
    border-color: #577db1;
    color: #577db1;
}

#cs-evening .cs-ov-title{
    background-color: #577db1;
}

#cs-evening .cs-ov-title:after{
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/evening_clock-en.png);
}

#cs-evening .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_evening-en.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

#cs-evening .capsule_arpeggio-decaffeinato { 
    top: 30%; 
    right: 12.5%;
}

#cs-evening .capsule_volluto-decaffeinato { 
    top: 54%; 
    left: 29.8%;
    text-align: center;
}

#cs-evening .capsule_vivalto-decaffeinato {
    top: 39%;
    left: 37.1%;
    text-align: center;
}

#cs-evening .capsule_decaffeinato-intenso { 
    top: 30%; 
    right: 38%; 
}

/*Holiday*/
#cs-weekend{
    border-color: #005c52;
    color: #005c52;
}

#cs-weekend .cs-ov-title{
    background-color: #005c52;
}

#cs-weekend .cs-ov-title:after{
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/weekend_clock-en.png);
}

#cs-weekend .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_weekend-en.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

#cs-weekend .capsule_arpeggio {  
    top: 23%; 
    right: 22.5%; 
}

#cs-weekend .capsule_roma {
    top: 41%; 
    right: 29.7%; 
}

#cs-weekend .capsule_livanto {
    top: 53%; 
    right: 21.4%; 
}

#cs-weekend .capsule_cosi {
    top: 53%; 
    left: 33.5%; 
}

#cs-weekend .capsule_rosabaya {
    top: 29%; 
    right: 34.6%; 
    text-align: center;
}

#cs-weekend .capsule_dulsao { 
    top: 68.5%;
    left: 34.8%;
    text-align: center;
}

#cs-weekend .capsule_linizio { 
    top: 72%; 
    left: 25.5%; 
}

#cs-weekend .capsule_caramelito { 
    top: 58%; 
    right: 38.2%; 
}

#cs-weekend .capsule_ciocattino {
    top: 72%;
    right: 27.6%;
}

#cs-weekend .capsule_vanilio {
    top: 59.5%;
    right: 19%;
}



/*recipe*/
.recipe-col-wrap{
    margin: 25px 0 0 0;
}

.recipe-col{
    width: 33.333%;
    float: left;
}

.recipe-col img{
    width: 100%;
    max-width: 270px;
    margin: 0 auto;
    display: block;
}

.recipe-col a{
    text-decoration: none;
    font-size: 16px;
    display: block;
    color: #000;
}

.recipe-label{
    width: 87%;
    max-width: 250px;
    height: 130px;
    text-align: center;
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/recipe-bg-en.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: -60px auto 0 auto;
    position: relative;
    z-index: 1;
}


.recipe-label span{
    width: 70%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

.recipe-label span:after {
    display: block;
    content: "";
    width: 11px;
    height: 11px;
    background: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/arrow_right-en.png) no-repeat top left;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.recipe-col a:hover .recipe-label span:after {
    right: -19px;
}

#page-top{
    padding: 10px 0 30px 0;
    display: block;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
}

#page-top img{
    display: inline-block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
}

@media all and (max-width:980px){

#cs-top{
    padding: 8.58% 6.33% 7.66%;
    background: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/mainVisual_spimg-en.jpg) no-repeat top right;
    background-size: cover;
}

.cs-col .wrap{
    max-width: 100%;
    padding: 0 20px;
}

#cs-menu ul li a{
    font-size: 12px;
    padding: 15px 0 28px 0
}


#cs-menu ul li a span {
    margin: 0 0 6px 0;
}



}

@media all and (max-width:767px){
.disp_sp{
    display: block;
}

.disp_pc{
    display: none;
}

#cs-top{
    background-image: none;
    padding: 8.58% 6.33% 0;
    background-color: #fff;
}

.top-banner img{
    display: block;
    width: 100%;
}

.wrap{
    padding: 0 30px;
}

.cs-overview,
.cs-ov-img,
.cs-ov-detail {
    display: block;
    width: 100%;
    padding: 0;
}

.fl-right,
.fl-left{
    float: none;
}

.cs-ov-detail{
    margin: 0 0 30px 0;
}

.cs-ov-detail.fl-right,
.cs-ov-detail.fl-left{
    padding: 0;
}

.cs-ov-img{
    margin: 0 0 30px 0;
}

.fl-left .cs-ov-title:after{
    right: 0;
    left: auto;
}


.cs-ov-copy-wrap br{
    display: none;
}

.ttl-4{
    font-size: 25px;
}

.cs-col{
    padding: 30px 0;
}

.recipe-label span:after {
    right: -25px;
    transform: translate(-13px,-50%);
    -webkit-transform: translate(-13px,-50%);
    -moz-transform: translate(-13px,-50%);
    -ms-transform: translate(-13px,-50%);
    -o-transform: translate(-13px,-50%);
}

.recipe-col a:hover .recipe-label span:after {
    right: -25px;
}
.cs-ov-title{
    font-size: 13px;
}

.cs-ov-title:after{
    width: 60px;
    height: 60px;
    top: -53%;
    right: -1%;
}

.cs-col-title{
    font-size: 17px;
}

.recommended {
    width: 100%;
    height: auto;
    margin: 9.49% auto 11.88%;
    padding-top: 86.07%;
}

.recommended li{
    transform: scale(0.833);
    line-height: 1.2;
}

#cs-morning .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_morning_sp-en.png);
}

#cs-morning .capsule_kazaar{
    top: 0%;
    right: 5.6%;
}

#cs-morning .capsule_ristretto {
    top: 9.5%;
    right: 22%;
}

#cs-morning .capsule_arpeggio {
    top: 20%;
    right: 22%;
}

#cs-morning .capsule_envivo {
    top: 30%;
    right: 21.5%;
}

#cs-morning .capsule_linizio {
    top: 74%;
    left: 18.8%;
}

#cs-lunch .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_lunch_sp-en.png);
}

#cs-lunch .capsule_dharkan {
    top: 30.5%;
    right: 10.1%;
}

#cs-lunch .capsule_roma {
    top: 40.7%;
    right: 21.8%;
}

#cs-lunch .capsule_fortissio {
    top: 40.7%;
    right: 32%;
}

#cs-afternoon .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_afternoon_sp-en.png);
}

#cs-afternoon .capsule_vivalto {
    top: 25.5%;
    left: 35.3%;
}

#cs-afternoon .capsule_rosabaya {
    top: 27.5%;
    right: 29%;
}

#cs-afternoon .capsule_bukeela {
    top: 89.5%;
    left: 10.5%;
}

#cs-afternoon .capsule_volluto {
    top: 55%;
    left: 27%;
}

#cs-afternoon .capsule_capriccio {
    top: 55%;
    left: 36.8%;
}

#cs-afternoon .capsule_linizio {
    top: 74.5%;
    left: 18.5%;
}

#cs-afternoon .capsule_caramelito {
    top: 53%;
    right: 23.8%;
}

#cs-afternoon .capsule_vanilio {
    top: 61%;
    right: 10%;
}

#cs-afternoon .capsule_ciocattino {
    top: 74%;
    right: 20%;
}


#cs-evening .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_evening_sp-en.png);
}

#cs-evening .capsule_decaffeinato-intenso {
    top: 29%;
    right: 32%;
}

#cs-evening .capsule_arpeggio-decaffeinato {
    top: 29%;
    right: 2%;
    text-align: left;
}

#cs-evening .capsule_volluto-decaffeinato {
    top: 55.5%;
    left: 24.5%;
    text-align: center;
}

#cs-evening .capsule_vivalto-decaffeinato {
    top: 38.5%;
    left: 34.5%;
    text-align: center;
}


#cs-weekend .recommended {
    background-image: url(https://www.nespresso.com/shared_res/mos/free_html/jp/coffee-selection-2/images/chart_weekend_sp-en.png);
}

#cs-weekend .capsule_arpeggio {
    top: 21.5%;
    right: 13.4%;
}

#cs-weekend .capsule_roma {
    top: 41%;
    right: 22.5%;
}

#cs-weekend .capsule_livanto {
    top: 53%;
    right: 29%;
}

#cs-weekend .capsule_cosi {
    top: 54%;
    left: 29.5%;
}

#cs-weekend .capsule_rosabaya {
    top: 28.5%;
    right: 29.3%;
}

#cs-weekend .capsule_dulsao {
    top: 71%;
    left: 30.8%;
}

#cs-weekend .capsule_linizio {
    top: 76%;
    left: 19%;
}

#cs-weekend .capsule_caramelito {
    top: 60%;
    right: 33%;
}

#cs-weekend .capsule_ciocattino {
    top: 75%;
    right: 20%;
}

#cs-weekend .capsule_vanilio {
    top: 62%;
    right: 9.5%;
}


.recipe-col a{
    font-size: 14px;
}
}



@media all and (max-width:600px){
.wrap{
    padding: 0 20px;
}

#cs-menu ul{
    text-align: center;
}

#cs-menu ul li{
    width: 32%;
    float: none;
    display: inline-block;
}

#cs-menu ul li:nth-child(3):after{
    content: none;
}

.ttl-4{
    font-size: 20px;
}

.cs-ov-copy-wrap .ttl-4 br{
    display: block;
}

.recipe-col{
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
}




}


@media all and (max-width:480px){
.ttl-1{
    font-size: 20px;
}

#cs-menu ul li a{
    font-size: 10px;
}

#cs-morning .capsule_kazaar {
    top: -2%;
    right: 2.3%;
}

#cs-morning .capsule_arpeggio {
    top: 28%;
}

#cs-morning .capsule_envivo {
    top: 19%;
}

#cs-morning .capsule_linizio {
    top: 74%;
    left: 13%;
}

#cs-lunch .capsule_dharkan {
    top: 13%;
    right: 6.5%;
}

#cs-lunch .capsule_roma {
    top: 41%;
    right: 19%;
}

#cs-lunch .capsule_fortissio {
    top: 40.5%;
    right: 29%;
}

#cs-afternoon .capsule_vivalto {
    top: 21%;
    left: 27.5%;
}

#cs-afternoon .capsule_volluto {
    top: 54%;
    left: 23%;
}

#cs-afternoon .capsule_capriccio {
    top: 54%;
    left: 35%;
}

#cs-afternoon .capsule_rosabaya {
    top: 23%;
    right: 24%;
}

#cs-afternoon .capsule_bukeela {
    top: 89%;
    left: 5.5%;
}

#cs-afternoon .capsule_vivalto {
    top: 23%;
    left: 28.5%;
}

#cs-afternoon .capsule_linizio {
    top: 73%;
    left: 14%;
}

#cs-afternoon .capsule_caramelito {
    top: 50.5%;
    right: 27%;
}

#cs-afternoon .capsule_ciocattino {
    top: 74%;
    right: 16%;
}

#cs-afternoon .capsule_vanilio {
    top: 60.5%;
    right: 5%;
}

#cs-evening .capsule_vivalto-decaffeinato {
    top: 28%;
    left: 14%;
    text-align: left;
}

#cs-evening .capsule_arpeggio-decaffeinato {
    top: 15%;
    right: 6%;
    text-align: center;
}

#cs-evening .capsule_volluto-decaffeinato {
    top: 55%;
    left: 19%;
}

#cs-evening .capsule_decaffeinato-intenso {
    top: 37%;
    right: 17.5%;
    text-align: center;
}

#cs-weekend .capsule_caramelito {
    top: 58.5%;
    right: 32%;
}

#cs-weekend .capsule_linizio {
    top: 75%;
    left: 8%;
}

#cs-weekend .capsule_dulsao {
    top: 71%;
    left: 30%;
    text-align: left;
}

#cs-weekend .capsule_cosi {
    top: 52%;
    left: 26%;
}

#cs-weekend .capsule_arpeggio {
    top: 18.5%;
    right: 9%;
}

#cs-weekend .capsule_roma {
    top: 41%;
    right: 19%;
}

#cs-weekend .capsule_rosabaya {
    top: 25%;
    right: 30%;
    text-align: left;
}

#cs-weekend .capsule_vanilio {
    top: 60%;
    right: 4%;
}

#cs-weekend .capsule_ciocattino {
    top: 75%;
    right: 16%;
}

#cs-weekend .capsule_livanto {
    top: 51%;
    right: 29%;
}

}