@charset "UTF-8";

/* コンテンツブロック */

.overlay{
    display: none;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    position:fixed;
    z-index:1;
}
.btn_area{
    width:85%;
    height:auto;
    padding: 30px 30px 40px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
    background-color:#2d2323;
    z-index:2;
}
.btn_area p{
    color: snow;
    font-size: 1.1rem; font-weight: 300; line-height: 1.5
}
.btn_area button{
    display:block;
    padding: 15px;
    margin: 30px auto 0;
    color: snow;
    font-family: Montserrat;
    font-size: 1.2rem;
    background-color: #534141;
    border-radius: 25px;
}
.btn_area button:hover {
background-color: #937272;
} 


main {
margin: 0 auto;
}

footer {
color: snow;
background-color: #F2F2E4;
background-color: #2d2323; /* rgb 45,35,35 */
}

.nav-about-us a {
color: snow;
}
.nav-about-us a:hover {
color: snow;
}

/* Hero-image - indexページ */

.hero-image {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 0 3px 1px ivory inset;
box-shadow: none;
margin: 0 auto;
background: url(images-common/piemonte-blue.jpg) ;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 66vh;
position: relative;
}

.hero-message {
font-weight: 200;
color: snow;
font-size: 15px;
font-size: 1.5rem;
text-shadow: none;
text-align: center;
line-height: 1.9;
letter-spacing: 0.47em;
position: absolute;
top: 16.3%;
-webkit-transform: translateX(4px);
-ms-transform: translateX(4px);
transform: translateX(4px);
}

.hero-sub-wrap {
position: absolute;
bottom: 14.5%;
}

.hero-sub-wrap p {
font-size: 12px;
font-size: 1.2rem;
font-weight: 600;
color: snow;
text-shadow: 0 0 2px #444444;
text-shadow: none;
text-align: center;
line-height: 2;
letter-spacing: 0.25em;
}

.arrow::after {
content: '⇒';
padding-right: 5px;
font-size: 1.2em
}
#btn a {
color: snow;
font-size: 1.1em;
}
.lang {
font-size: 0.87em;
}
#btn a:hover {
text-decoration: underline;
color: snow;
}
#btn p {
line-height: 1.6
}
#btn {
margin-top: 15px;
}

.giovanni {
color: snow;
font-weight: 200;
font-size: 11px;
font-size: 1.1rem;
line-height: 1;
position: absolute;
bottom: 5%;
}


/* 画像内に入れたロゴマーク */

.logo-box {
text-align: center;
margin: 0 auto;
position: absolute;
top: 4%;
}
.site-name-logo {
background-color: rgba(255,255,240,0);
padding: 0;
margin: 0px auto;
font-size: 17px;
font-size: 1.7rem;
}
.logo-color {
color: ivory;
color: #ffffe3;
color: #F2F2E4;
text-shadow: 0 0 1px #F2F2E4;
}
.logo-jp {
font-size: 11px;
font-size: 1.1rem;
margin-top: 5px;
}
.logo-color-jp {
color: #40403c;
color: lightgrey;
}


/* グローバルナビ（カテゴリーメニュー）とピックアップ画像リスト */

.pickupAndNav-wrap {
background-color: black;
position: relative;
margin: 0 auto;
}
.pickup img {
opacity: 0.84;
opacity: 0.82;
}

.nav-cate {
position: absolute;
top: 60px;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}

.nav-cate li {
text-align: center;
height: 115px;
width: 100%;
background-color: #ECE8DF;
background-color: whitesmoke;
background-color: #fffffd;
opacity: 0.84;
}
.nav-cate li:not(:last-child) {
margin-bottom: 30px;
}

.nav-cate a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.nav-cate a:hover {
background-color: ivory;
background-color: #FFFFE3;
background-color: lemonchiffon;
}

.nav-text-wrap {
padding: 0 10px;
}
.nav-jp {
color: #491a00;
font-weight: 600;
font-size: 15px;
font-size: 1.5rem;
letter-spacing: 0.17em;
line-height: 1.6;
text-shadow: 0px 0px 2px silver;
margin-bottom: 5px;
}
.nav-it {
color: grey;
font-size: 13px;
font-size: 1.3rem;
font-weight: 300;
line-height: 1;
letter-spacing: 0.3em;
border-bottom: dotted 1px silver;
border-top: dotted 1px silver;
padding: 5px 2px;
}


/* ===== 幅750以上 ===== */

@media  (min-width: 750px) {

.btn_area{
width: 650px;
text-align: center;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-55%);
    background-color:#2d2323;
}
.btn_area p{
    color: snow;
    font-size: 1.2rem; font-weight: 300; line-height: 1.8
}

footer {
column-count: 2;
}

.pickup-wrap {
column-count: 2;
column-gap: 0;
}

.nav-cate {
position: absolute;
top: 53%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
}
.nav-cate li {
width: 50%
}
.nav-cate li:not(:last-child) {
margin-bottom: 12%;
}

.nav-cate li:nth-child(even) {
transform: translateX(35%)
}
.nav-cate li:nth-child(odd) {
transform: translateX(-35%)
}

.logo-box {
position: absolute;
top: 7%;
}
.site-name-logo {
font-size: 20px;
font-size: 2rem;
}
.logo-jp {
font-size: 12px;
font-size: 1.2rem;
margin-top: 5px;
}

.hero-message {
letter-spacing: 0.8em;
font-size: 20px;
font-size: 2rem;
position: absolute;
top: 18%;
}
  
.hero-sub-wrap p {
font-size: 14px;
font-size: 1.4rem;
letter-spacing: 0.19em;
line-height: 2.3;
}
.hero-sub-wrap {
position: absolute;
bottom: 17%;
}

.giovanni {
font-size: 12px;
font-size: 1.2rem;
}

}


/* ===== width 1100以上 ===== */

@media (min-width: 1100px) {

.logo-box {
position: absolute;
top: 7.2%;
}

.hero-image {
background-position: top;
}

.hero-message {
position: absolute;
top: 21.7%;
letter-spacing: 0.9em;
font-size: 21px;
font-size: 2.1rem;
}

.hero-sub-wrap p {
line-height: 1.6;
letter-spacing: 0.3em;
text-shadow: 0 0 3px #000;
}
.hero-sub-wrap {
position: absolute;
bottom: 13.6%;
}
  
.giovanni {
position: absolute;
bottom: 5%;
}

.pickup-wrap {
column-count: 4;
column-gap: 0;
}

.nav-cate {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.nav-cate li:not(:last-child) {
margin-bottom: 0px;
margin-right: 5px;
}
.nav-cate li {
flex-grow: 1;
} 
.nav-cate li:nth-child(even) {
transform: translateX(0%)
}
.nav-cate li:nth-child(odd) {
transform: translateX(-0%)
}
.nav-jp {
font-size: 16px;
font-size: 1.6rem;
}

}


/* ===== ★★height 620以下★★ or 幅320px以下===== */

@media (max-height: 620px), (max-width: 320px) {

.hero-image {
height: 400px;
position: relative;
}
.logo-box {
position: absolute;
top: 14px;
}
.hero-message {
position: absolute;
top: 65px;
letter-spacing: 0.45em;
}
.hero-sub-wrap p {
font-size: 12px;
font-size: 1.2rem;
line-height: 1.85;
letter-spacing: 0.15em;
}
.hero-sub-wrap {
position: absolute;
bottom: 50px
}
.giovanni {
position: absolute;
bottom: 15px;
}

.nav-cate-jp {
font-size: 14px;
font-size: 1.4rem;
}
.nav-cate-italian {
font-size: 11px;
font-size: 1.1rem;
}

.site-name-logo {
font-size: 15px;
font-size: 1.5rem;
}
.logo-jp {
font-size: 10px;
font-size: 1rem
}


@media (max-width: 320px) {

.btn_area p{
    color: snow;
    font-size: 1rem; font-weight: 300; line-height: 1.1
}


}