a{
  transition:0.3s;
}

a:hover{
  opacity:0.7;
}
.introduce{
  display:flex;
  align-items:flex-start;
  gap:80px;
  background-color: #FDFBF0;
  margin:0px 0px;
}

.introduce h1{
  width:480px;
  flex-shrink:0;
  margin-left:20px;
  margin-top:20px;
  font-size:48px;
}

.introduce p{
  margin-top:33px;
  margin-bottom: 35px;
  font-size: 20px;
  flex:1;
  line-height:1.5;
}
/* ======================
   SIDE NAV
====================== */
.column{
  display:flex;
}

/* ======================
   SIDE NAV
====================== */

.side-nav{
  width: 480px;
  height: 1080px;;

  position:sticky;
  top:0;
background: linear-gradient( rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
url(../img/SV1.jpg); background-size:cover;
  background-position:center;
}

.side-nav1{
  padding-top:20px;
  padding-left:14px;
}

.side-nav div img {
  width: 200px;
}
.side-nav ul{
  margin-top:40px;
}

.side-nav li{
  margin-bottom:18px;
}

.side-nav a{
  font-size:20px;
  letter-spacing:.08em;
  margin-left: 10px;
}

/* ======================
   CONTENT
====================== */

.content{
width:1440px;

  margin-left:auto;
  background-color: #Fff;

}

/* ======================
   SECTION
====================== */

.food,
.art,
.discover{
  margin-bottom:0px;
}

.food h1,
.art h1,
.discover h1{
  font-size:100px;
  background-color: #000;
  padding-left: 10px;
  color: #FDFBF0;
}
.art h1,
.discover h1{
  padding-top:0px;
}

/* メイン画像 */

.food-fv,
.art-fv,
.discover-fv{
  width:1440px;
  height:420px;

  object-fit:cover;

  display:block;
}

/* 説明エリア */

.ex{
  margin-top:40px;
}

.ex-text{
  max-width:900px;
}

.ex-text p{
  font-size:16px;
  line-height:1.5;
  margin-left: 20px;
  margin-bottom: 40px;
}
.food-intro{
  display:flex;
  gap:80px;
  align-items:flex-start;
}

.food-link,
.art-link,
.discover-link {
  width:350px;
  flex-shrink:0;
margin-left: 50px;
}

.food-link{
  margin-top: 60px;
}

.art-link{
   margin-top: 85px;
}

.discover-link {
     margin-top: 60px;
}
/* ======================
   SIDE NAV
====================== */
.ex-text{
  flex:1;
}

.section-title{
  position:relative;
}

.section-title::before{
  content:"";
  position:absolute;

  width:70px;
  height:70px;

  border:1px solid #000;
  border-radius:50%;

  left:0;
  top:0;
}

.section-title::after{
  content:"";
  position:absolute;

  width:260px;
  height:1px;

  background:#000;

  left:30px;
  top:60px;
}

.section-title span{
  position:absolute;

  left:70px;
  top:15px;

  font-size:40px;
  z-index:1;

  padding:0 10px;
}
/* ======================
   SIDE NAV
====================== */
/* ギャラリー */

.food-gallary,
.art-gallary,
.discover-gallary{
  display:flex;
  gap:12px;
}


.food-gallary img,
.art-gallary img,
.discover-gallary img{
  width:calc(25% - 9px);
  height:150px;

  object-fit:cover;
}

.italia-map{
  display:flex;
  margin-top:35px;
  align-items:center;
}
.map {
  margin-left:50px ;
  margin-right: 50px;
}
.italia h2 {
  font-size: 50px;
  margin-left: 0px;
}
.italia p {
  font-size: 20px;
margin: 20px 0 40px 10px;
}

.italia p:last-child {
  margin-bottom: 35px;
}
@media screen and (max-width: 799px) {

    /* introduce */
    .introduce {
        flex-direction: column;
        gap: 0;
        padding: 20px;
    }

    .introduce h1 {
        width: 100%;
        font-size: 32px;
        margin-left: 0;
        margin-top: 0;
    }

    .introduce p {
        font-size: 15px;
        margin-top: 16px;
        margin-bottom: 0px;
    }

    /* column */
    .column {
        flex-direction: column;
    }

    /* side-nav */
    .side-nav {
        width: 100%;
        height: auto;
        position: static;
    }

    .side-nav1 {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px;
    }

    .side-nav ul {
        display: flex;
        gap: 20px;
        margin-top: 0;
    }

    .side-nav li {
        margin-bottom: 0;
    }

    /* content */
    .content {
        width: 100%;
    }

    .food h1,
    .art h1,
    .discover h1 {
        font-size: 48px;
    }

    .food-fv,
    .art-fv,
    .discover-fv {
        width: 100%;
        height: 250px;
    }

    .side-nav {
        display: none;
    }

    /* 説明エリア */
    .food-intro {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }

    .ex-text {
        max-width: 100%;
        padding-bottom: 0px;
    }

    .ex-text p {
        font-size: 14px;
        margin-left: 0;
    }

    .food-link,
    .art-link,
    .discover-link {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }


    
    .section-title {
        height: 70px;
        display: flex;
        justify-content: flex-end; /* 右寄せ */
        padding-bottom: 0px;
    }

    .section-title::before {
        width: 40px;
        height: 40px;
        left: auto;
        right: 125px;
    }

    .section-title::after {
        width: 135px;
        left: auto;
        right: 0;
        top: 35px;
    }

    .section-title span {
        font-size: 20px;
        left: auto;
        right: 0;
        top: 10px;
    }

    /* ギャラリー */
    .food-gallary,
    .art-gallary,
    .discover-gallary {
        flex-wrap: wrap;
        padding: 0 15px;
    }

    .food-gallary img,
    .art-gallary img,
    .discover-gallary img {
        width: calc(50% - 6px);
        height: 120px;
    }

    /* map */
    .italia-map {
        flex-direction: column;
        padding: 20px 15px;
    }

    .map {
        margin: 0 0 20px 0;
        width: 100%;
        text-align: center;
    }

    .map img {
        width: 60%;
    }

    .italia h2 {
        font-size: 32px;
    }

    .italia p {
        font-size: 15px;
    }
}