/* #region ヘッダー */
header{
    background-color: #FFA82F;
    padding: 14px 0;
}

.header-inner{
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 30px;
}

.header-inner-subtitle{
    font-size: clamp(20px,3vw,24px);
}

/* #endregion ヘッダー */

/* #region メイン */

.menu_ul{
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.btn-nav{
    list-style: none;
    width: 170px;
    height: 60px;
    margin: 60px 0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-nav:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    opacity: 0.9;
    filter: brightness(1.1);
}

.btn-nav-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    height: 100%;

    font-size: 20px;
    font-weight: 600;
    text-decoration: none;

    color: #000;
}

#btn-ramen{ background-color: #F5E100; }
#btn-setmeal{ background-color: #2E7D32; }
#btn-french{ background-color: #D84315; }
#btn-bread{ background-color: #E6B36A; }
#btn-cafe{ background-color: #6D4C41; }
#btn-others{ background-color: #607D8B; }

.back-to-top{
  position: fixed;
  z-index: 999;

  right: 50px;
  bottom: 20px;

  width: 50px;
  height: 50px;
  border-radius: 50%;

  background: #FFA82F;
  color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  text-decoration: none;
  font-size: 20px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.maptitle{
    max-width: 1280px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 39px;
}

.color-ramen{ background-color: rgba(245, 225, 0, 0.4); }
.color-teishoku{ background-color: rgba(46, 125, 50, 0.4); }
.color-french{ background-color: rgba(216, 67, 21, 0.4); }
.color-bread{ background-color: rgba(230, 179, 106, 0.4); }
.color-cafe{ background-color: rgba(109, 76, 65, 0.4); }
.color-others{ background-color: rgba(96, 125, 139, 0.4); }

.maptitle-name{
    font-size: 48px; font-weight: 700;
}

.map{
    max-width: 1280px;
    margin: 50px auto;
    width: 100%;
    aspect-ratio: 16 / 7 ;
}

.map iframe{
    width: 100%;
    height: 100%;
}

.shop{
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 200px;

    display: flex;
    flex-direction: column;
    gap: 121px;
}

.shop .shop-title{
    height: 90px;
    display: flex;
    align-items: center;
}

.shop .shop-title.color-ramen{ border-bottom: 4px solid #FBCE4C ; }
.shop .shop-title.color-teishoku{ border-bottom: 4px solid #66BB6A; }
.shop .shop-title.color-french{ border-bottom: 4px solid #FF7043; }
.shop .shop-title.color-bread{ border-bottom: 4px solid #F2C078; }
.shop .shop-title.color-cafe{ border-bottom: 4px solid #8D6E63; }
.shop .shop-title.color-others{ border-bottom: 4px solid #90A4AE; }

.shop .shop-title .shop-title-inner{
    height: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-left: 20px;
}

.shop .shop-title .shop-title-inner .shop-title-inner-number{
    display: flex;
    align-items: baseline; 
    /* transform: translateY(-10px); */
    padding-bottom: 20px;
}

.shop .shop-title .shop-no{ font-size: 32px; font-weight: 500; }
.shop .shop-title .shop-number{ font-family: "Cormorant Infant"; font-size: 110px; font-weight: 500; line-height: 1;}
.shop .shop-title .shop-name{ font-size: 36px; font-weight: 700; }

.shop-body{
    max-width: 1086px;
    margin: 70px auto 0;

    display: flex;
    justify-content: center;
    gap: 90px;
}

.foodPhoto{
    width: 520px;
}

.shop-body .shop-catchcopy{
    height: 44px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #A1A1A1;
}

.shop-body .shop-catchcopy .rectangle{
    width: 4px;
    height: 30px;
    background-color: #848484;
}

.shop-body .shop-sentence{
    /* font-size: 14px; */
    font-size: clamp(12px, 1vw, 14px);
    /* white-space: nowrap; */
    line-height: 1.6;
    margin: 39px 0;
}

.shop-body .shop-grid{
    display: grid;
    grid-template-columns: 120px 1fr; /* 左固定・右可変 */
    font-size: 14px;
    /* place-items: center; */
    /* row-gap: 10px; */
}

.shop-body .shop-grid .datacolum{
   background-color: #DADADA;
   border-top: 1px solid #757575;
   padding: 10px 0;
   
   display: flex;
   align-items: center;
   justify-content: center;

}

.shop-body .shop-grid .dataitem{
    background-color: #FFFFFF;
    border-top: 1px solid #757575;
    padding: 10px 0 10px 10px;

    display: flex;
    align-items: center;
}

.shop-body .shop-grid .datacolum-end,
.shop-body .shop-grid .dataitem-end{
    border-bottom: 1px solid #757575;
}

/* #region カルーセルUI(ラーメンNo3　のみ) */

.shop-images{
    /* width: 520px; */
    overflow: hidden;

    width: 100%;
    max-width: 520px;
}

.shop-images-ul{
    display: flex;
    transition: transform 0.4s ease;
    padding: 0;
    margin: 0;
}

.shop-images-ul .item{
    list-style: none;
    /* min-width: 520px; */
    min-width: 100%;
}

.carousel-no3{
    position: relative;
    /* width: 520px; */
    width: 100%;
    max-width: 520px;
    height: 36px;
    margin: 0 auto;
}

/* ボタン */
.prev, .next{
    position: absolute;
    
    top: -50%;

    width: 36px;
    height: 36px; 
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #DFD9D9;
    color: #000;
    border: none;
    cursor: pointer;

    font-size: 24px;
}

.prev{ left: 150px; }
.next{ right: 150px; }

/* ドット */
.carousel-no3 .dots{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 52px;
}

.carousel-no3 .dots span{
    width: 8px;
    height: 8px;
    background: #D9D9D9;
    border-radius: 50%;
    cursor: pointer;
}

.carousel-no3 .dots .active{
    background: #000;
}

/* #endregion カルーセルUI */

#teishoku,#yoshoku,#bread,#cafe,#other{
    display: none;
}

/* #endregion メイン */

@media screen and (max-width: 1200px){
    .menu_ul{
        flex-wrap: wrap;          /* ← 折り返し */
        justify-content: center;  /* ← 中央寄せ */
        gap: 20px;                /* ← 間隔 */
        margin: 50px 0;
    }

    .btn-nav{
        width: calc(33.333% - 20px); /* ← 3つずつ並ぶ */
        /* max-width: 170px; */
        margin: 0;
    }
}

@media screen and (max-width: 1100px){
    .shop-body{
        flex-direction: column;          
        justify-content: flex-start;  
        /* align-items: center; */
        margin: 70px 50px 0;
    }

}

@media screen and (max-width: 768px){

    .header-inner{
        flex-direction: column;
        align-items: flex-start;
    }

    .menu_ul{
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .btn-nav{
        width: calc(50% - 16px); /* ← 2列 */
        margin: 0;
    }
}

@media screen and (max-width: 600px){

    .foodPhoto{
        width: 100%;
    }
}