/*パンくず*/
.breadcrumb {
  margin:0;
  padding: 1em;
  list-style: none;
  background: #fef2d6;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #8e8270;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #feaa23;
}

.breadcrumb li:first-child a:before {
  /*家アイコンに*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}
/*パンくず終わり*/
/*topcss*/
.pccut{
        display: none;
      }
      .whiteP{
        color:white;
      }
     .Verticalwriting {
     -webkit-writing-mode: vertical-rl; /* Safari用 */
     writing-mode: vertical-rl;        /* 基本の縦書き指定 */
     white-space: nowrap;
     }
     .centerimg{
        text-align:center;
     }
     .centermargin{
      margin-left:auto;
      margin-right:auto;
     }
     .button a{
     display: block;
     width: 100%;
     max-width: 150px;
     max-height:120px;
     margin: 0 auto;
     padding: 1rem 0;
     background-color: rgba(0, 0, 255, 0);
     color: #fff;
     text-decoration: none;
     text-align: center;
     transition: .2s;
     box-shadow: 1px 2px 2px #444;
     transform:translateY(0px);
     }

     span.button a:hover{
     background-color: red;
     box-shadow: 0px 1px 1px #444;
     transform:translateY(5px);
     }

     .tophero{
     position:relative;   
     margin-bottom: 3rem;
     img{
      max-width:800px ;
     }

        & span:nth-child(2){
          position:absolute;
            right:25%;
            top:5%;
            img{
              width:9rem;
              height: auto;

            }
            
        }
        & span:nth-child(3){
            position:absolute;
            left: 25%;
            top:0%;
            img{
              width:9rem;
              height:auto;
            }
        }
      }
     .BIGVerticalwriting{
        font-size:3.2rem
     }
     .top_introduction-block{
        font-size:2rem;
        display:block;
        margin-bottom: 4rem;
     }
     .top-pot{
        position:relative;
     
      img{
       width:700px;
      }
      p{
        background-color: #ffffff57;
        position:absolute;
        bottom:-7%;
        left:50%;
        margin:0;
        -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
        -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
        transform: translate(-50%,-50%);/*センター寄せの修正*/
        font-size:2rem;
      }
     }
     .soupintro-back{
      width:calc(100vw - 50px);
      display: block;
      margin-bottom:2rem;
      margin-top: 2rem;
     }
     .soupintro{
      padding-top:1.5rem ;
      padding-bottom: 1.5rem;
      font-size:2rem;
      list-style-type: none;
      color:white;
    
      & :nth-child(1) {
        position: relative;
        display: block;
        font-size:3rem;
        margin:auto;
        z-index: 60;
      }
      & :nth-child(1)::before{
        position: absolute;
        display: block;
        content: "スープのこだわり";
        color: #00000000;
        background-color:#c9a267;
        width:4rem;
        height:24rem;
        z-index: -14;
        right: -1.5rem;
        top:3rem;
        }
     }
    
.container {
       --item-width: 800px;
       --item-height: 400px;
       width: var(--item-width);
       position: relative;
       margin-bottom: 40px;
      /* 各パーツ配置をグリッドでレイアウト */
      display: grid;
      grid-template-areas: "item item item" "left markers right";
      grid-template-columns: 1fr 2fr 1fr;
      row-gap: 16px;
      margin-left: auto;
      margin-right: auto;
     }

     /* ----------------------*
     * カルーセル
     * ----------------------*/
     .carousel {
      width: 100%;
      display: grid;
      /* アイテムを横並びにする */
      grid-auto-flow: column;
      grid-area: item;
      /* 次のスライドとの間隔 */
      gap: 120px;
      overflow-x: auto;
      /* X方向にスナップ */
      scroll-snap-type: x mandatory;
      /* 1度に1枚ずつ移動 */
      scroll-snap-stop: always;
      /* スムーズにスクロールさせる */
      scroll-behavior: smooth;
      /* インジケーターの表示 */
      scroll-marker-group: after;
     /* スクロールバー非表示 */
      scrollbar-width: none;


     /* 前へ・次へボタン */
     &::scroll-button(*) {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      background-color: #fff;
      padding: 0;
      color: orangered;
      border: 1px solid orangered;
      transition: background-color 0.2s, color 0.2s;
     }

     /* ホバー時スタイル */
     @media (any-hover: hover) {
      &::scroll-button(*):not(:disabled):hover {
      background-color: orangered;
      color: #fff;
      cursor: pointer;
      }
     }


      /* 非活性時スタイル */
     &::scroll-button(*):disabled {
      color: darkgray;
      border: 1px solid lightgray;
     }

      /* 前へボタン */
     &::scroll-button(left) {
       /* コンテンツ / 代替テキスト */
      content: "◀" / "前へ";
      grid-area: left;
      justify-self: end;
     }

     /* 次へボタン */
     &::scroll-button(right) {
      /* コンテンツ / 代替テキスト */
      content: "▶" / "次へ";
      grid-area: right;
     }

      /* インジケーター（コンテナー） */
     &::scroll-marker-group {
      display: flex;
      justify-content: center;
      gap: 16px;
      grid-area: markers;
      align-items: center;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      }
     }
     /* ----------------------
     * カルーセルの画像アイテム
     * ----------------------*/
    .item {
     width: var(--item-width);
     min-width: var(--item-width);
     height: var(--item-height);
     scroll-snap-align: center;

     /* インジケーター */
     &::scroll-marker {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      background-color: lightgray;
      border-radius: 50%;
      transition: background-color 0.2s;
      flex-shrink: 0;
     }

      /* インジケーターのカレントスタイル */
     &::scroll-marker:target-current {
      background-color: orangered;
     }

     img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      }       

    }
     @media (width < 600px) {
      .pccut{
        display:block;
      }
      .container {
      --item-width: calc(100vw - 60px);
      width: var(--item-width);
      grid-template-columns: 1fr 3fr 1fr;
      padding:0;
        }
        .head__logo_menu .head-char{
      display:none;
      }
        #topheroimg{
         width:400px;
         height:auto;
        }
        .tophero{
        & span:nth-child(2){
        right:5%;
        bottom:10%;
          img{
          width:5rem;

          }
        }
        & span:nth-child(3){
            left:5%;
        bottom:10%;
        font-size:2.3rem;
         img{
          width:5rem;
          
          }
        }
      }
        .BIGVerticalwriting{
          font-size:2.5rem
        }
        top_introduction-block{
          font-size:1.5rem;
          display:block;
        }
        .top-pot{
          img{
            max-width:calc(100vw - 60px) ;
            width:100%!important;
            margin:0 auto;
          }
        
          a{
            font-size:1.5rem;
            width:80vw;
            margin-bottom: 5px;
            bottom:-15%;
            color: #ffd17b;
         }
        }
     .soupintro-back{
      width:calc(98vw );
     
     }
     .soupintro{
      margin-top:5px;
      font-size:1.5rem;
     }
     #soupintroBIG{
      font-size:2.5rem;
      margin:auto;
     }
     
    }

/*menucss*/
 #menupage-H{
        background-color: #ff8838;
        font-size: 2.5rem;
        margin:2rem  auto 3rem auto;
        width: 14rem;
        border-radius:50%

      }
      .menu-bigbuttons{
        display: flex;
        flex-wrap: nowrap;
        padding:1rem 1rem;
        background-color: #ffa538;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
          @media (width < 810px){
             
            }
        li{
          text-align: center;
          list-style-type:none;
          width:80%
        }
        li p img{
          --big-buttons-size:300px;
          width:var(--big-buttons-size);
          border-radius:10px;
          @media (width < 1650px){
              width:calc(var(--big-buttons-size) *0.8);
            }

          @media (width < 1300px){
               width:calc(var(--big-buttons-size) *0.4);
            }
          @media (width < 810px){
               width:calc(var(--big-buttons-size) *0.3);
            }
          @media (width < 600px){
             width:calc(var(--big-buttons-size) *0.2);
            }
        }
        li:nth-child(3)::after{
         display: block;
          content: "*飯は中華そばのおまけになります。";
          --bigbutton-warning-font-size: 0.6rem;
          font-size:var(--bigbutton-warning-font-size) ;
          color: #c70000;
          padding: 0.3rem 0;
          width: 100%;
          margin: 0 ;
          @media (width < 1650px){
             font-size:calc(var(--bigbutton-warning-font-size) *0.8);
            }
        }
      }

      .menu-vendingmachine{

        & h2{
          margin:1rem 15% 2rem 15%;
          font-size:1rem;
          color: #c70000;

        }

        & p{
          margin:3rem auto;
         
           img{
           --menu-vendingmachine-imgmax:800px;
             
            max-width:var(--menu-vendingmachine-imgmax);
          @media (width < 1650px){
              max-width:calc(var(--menu-vendingmachine-imgmax) *0.8);
            }

          @media (width < 1300px){
               max-width:calc(var(--menu-vendingmachine-imgmax) *0.6);
            }
          @media (width < 810px){
               max-width:calc(var(--menu-vendingmachine-imgmax) *0.4);
            }
          @media (width < 600px){
             max-width:calc(var(--menu-vendingmachine-imgmax) *0.3);
            }
           }
        }
      }
      .menu-section{
        background-color: #fab566;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width:80%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

      }
      #menu-intro{
        margin-top: 10px;
        font-size: 2.5rem;
      }
      .menu-headlines{
        --menu-headline-margintop:2rem;
        margin-top: var(--menu-headline-margintop);
        margin-left: auto;
        margin-right: auto;
        --menu-headline-fontsize:2.3rem;
        font-size: var(--menu-headline-fontsize);
        background-color: #ff6363;
        border-radius:10px;
        width: 80%;
        @media (width < 1650px){
              margin-top:calc(var(--menu-headline-margintop)* 0.7);
              font-size:calc(var(--menu-headline-fontsize)* 0.7);
            }

        @media (width < 1300px){
               margin-top:calc(var(--menu-headline-margintop)* 0.5);
              font-size:calc(var(--menu-headline-fontsize)* 0.5);
            }
        @media (width < 810px){
              margin-top:calc(var(--menu-headline-margintop)* 0.4);
              font-size:calc(var(--menu-headline-fontsize)* 0.4);
            }
        @media (width < 600px){
              margin-top:calc(var(--menu-headline-margintop)* 0.3);
              font-size:calc(var(--menu-headline-fontsize)* 0.3);
            }

      }
      /* メニューレイアウト制御 */
      .menu-layout{
        position: relative;
        display: flex;
        margin:3rem  auto;
        background-color: #ff8838;
        --menu-layout-sizeH:300px;
        height: var(--menu-layout-sizeH);
        width: 80%;
        img{
          width:auto;
          height:var(--menu-layout-sizeH);
        }
        & .menu-layout__price{
          position: absolute;
          --price-right:0.7rem;
          right:var(--price-right);
          --price-bottom:0.7rem;
          bottom:var(--price-bottom);
          --menu-layout-price-topmargin:1.2rem;
          margin-top:var(--menu-layout-price-topmargin);
          --menu-layout-pricesize:2rem;
          font-size:var(--menu-layout-pricesize);
          background-color: none;

            @media (width < 1650px){
              font-size:calc(var(--menu-layout-pricesize)* 0.7);
              height:calc(var(--menu-layout-pricesize)* 0.7);
              margin-top:clac(var(--menu-layout-price-topmargin)* 0.7);
              right:var(--price-right);
              bottom:var(--price-bottom);
            }

            @media (width < 1300px){
              font-size:calc(var(--menu-layout-pricesize)* 0.5);  
              height:calc(var(--menu-layout-pricesize)* 0.5);
            }
            @media (width < 810px){
              font-size:calc(var(--menu-layout-pricesize)* 0.4);
              height:calc(var(--menu-layout-pricesize)* 0.4);
            }
            @media (width < 600px){
             font-size:calc(var(--menu-layout-pricesize)* 0.3);
             height:calc(var(--menu-layout-pricesize)* 0.3);
            }
        }


        @media (width < 1650px){
          height:calc(var(--menu-layout-sizeH)* 0.7);
          img{
            height:calc(var(--menu-layout-sizeH)* 0.7);
          }
        }

        @media (width < 1300px){
          height:calc(var(--menu-layout-sizeH)* 0.5);  
          img{
              height:calc(var(--menu-layout-sizeH)* 0.5);
          }
        }
        @media (width < 810px){
          height:calc(var(--menu-layout-sizeH)* 0.4);
          img{
            height:calc(var(--menu-layout-sizeH)* 0.4);
          }
        }
        @media (width < 600px){
          height:calc(var(--menu-layout-sizeH)* 0.3);
          img{
            height:calc(var(--menu-layout-sizeH)* 0.3);
          }
        }
        & div{
          display: block;
          height:var(--menu-layout-sizeH);
          margin: 0 15px;
           
            @media (width < 810px){
              margin:0;
            }
            

          div:nth-child(1){
            display: flex;
            --menu-layout-price-topmargin:1.1rem;
            margin-top:var(--menu-layout-price-topmargin);
            --menu-layout-pricesize:2rem;
            --menu-layout-marginleft:2rem;
            margin-left:var(--menu-layout-marginleft) ;
            font-size:var(--menu-layout-pricesize);
            height:calc(var(--menu-layout-pricesize)*1.7);

            @media (width < 1650px){
              font-size:calc(var(--menu-layout-pricesize)* 0.7);
              margin-top:clac(var(--menu-layout-price-topmargin)* 0.7);
              height:calc(var(--menu-layout-pricesize)*1.2);
            }

            @media (width < 1300px){
              font-size:calc(var(--menu-layout-pricesize)* 0.5);  
              height:calc(var(--menu-layout-pricesize)* 0.95);
              margin-top:clac(var(--menu-layout-price-topmargin)* 0.5);
            }
            @media (width < 810px){
              font-size:calc(var(--menu-layout-pricesize)* 0.4);
              height:calc(var(--menu-layout-pricesize)* 0.7);
             margin-top:clac(var(--menu-layout-price-topmargin)* 0.4);
            }
            @media (width < 600px){
             font-size:calc(var(--menu-layout-pricesize)* 0.3);
             height:calc(var(--menu-layout-pricesize)* 0.55);
             margin-top:calc(var(--menu-layout-price-topmargin)* 0);
             margin-left:calc(var(--menu-layout-marginleft)* 0.3);
            }
          }
          div:nth-child(2){
            display: block;
            text-align:left ;
            --menupage-margin-top: 2rem;
            margin-top: var(--menupage-margin-top);
            --menupage-topposition:2rem;
            top:var(--menupage-topposition);
            width:100%;
            height:20%;
            --menupage-fontsize:1rem;
            font-size:var(--menupage-fontsize) ;
            
            @media (width < 1650px){
              top:calc(var(--menupage-topposition)* 0.7);
              font-size:calc(var(--menupage-fontsize)* 0.9);
              margin-top: calc(var(--menupage-margin-top)* 0.7);
            }

            @media (width < 1300px){
              top:calc(var(--menupage-topposition)* 0.5);
              font-size:calc(var(--menupage-fontsize)* 0.5);
               margin-top: calc(var(--menupage-margin-top)* 0.5);
            }
            @media (width < 810px){
              top:calc(var(--menupage-topposition)* 0.4);
              font-size:calc(var(--menupage-fontsize)* 0.4);
               margin-top: calc(var(--menupage-margin-top)* 0.4);
            }
            @media (width < 600px){
              top:calc(var(--menupage-topposition)* 0.4);
              font-size:calc(var(--menupage-fontsize)* 0.4);
               margin-top: calc(var(--menupage-margin-top)* 0.3);
            }
          }
          
        }
      }


      /*食べ方のCSS*/
      .howto-hedline{
        font-size: 2rem;
        margin-top:0.5rem;
        color: #ffffff ;
        background-color: #ffd17b;
        border-color: #d6ac5e;

      }

      .border-shadow{
        border:2px solid;
        border-top-width:thin;
        border-right-width:medium;
        border-bottom-width:thick;
        border-left-width:3px;
      }
      .border-rounded{
         border:2px solid;
         border-radius:5px;
      }
      .warning{
        color:red;
        font-size: 0.7rem;
      }
     
      .margin-updown{
        margin-top:2rem ;
        margin-bottom: 2rem;
      }
      .table-condiments{
        background-color: rgb(238, 186, 109);
        width:80%;
        border-color: #d6ac5e;
      }
      .condiments-explanations-layout{
        display: flex;
        justify-content:space-around;
        align-content: center;
        flex-wrap: wrap;

      }
      .condiments-explanation{
        display: block;
        width: 40%;
        background-color: #ffd8ac;
        margin:0.5rem;
        h3{
          margin-top:0.3rem;
        }
        a{
          margin-top:1rem;
        }
      }

      .combiexample{
        margin:2rem auto;
        width:80%;
        background-color: rgb(255, 239, 166);
        h1{
          margin-top: 0.5rem;
        }
      }

      .combiexample-layout{
        display: flex;
        flex-direction: row;
        background-color: #ffd8ac;
        margin:12px auto;
        width: 80%;
        img{
          max-width:400px;
        }
        div h3{
          margin-top:0.7rem ;
          --combi-lmargin:8rem;
          @media (width < 810px){
            --combi-lmargin:0rem;
          }
          margin-left:var(--combi-lmargin);
        }
        div p{
          margin:0.8rem auto;
         --combi-lmargin:8rem;
          @media (width < 810px){
            --combi-lmargin:0rem;
          }
          margin-left:var(--combi-lmargin);
        }
      }

      .sec-mealdonset{
        background-color:rgb(255, 239, 166);
        text-align: center;
        width:80%;
      }

  .mealdonimgs{
        display: flex;
        flex-direction: column;
        }
  .mealdonimgs-layout{
    display:block;
    justify-content:space-between;
    margin:10px auto;
    background-color: #ffd8ac;
    --meallayout-size:75%;
    @media (width < 810px){
        --meallayout-size:90%;
      }
      width:var(--meallayout-size);
    .mealdon-img{
      
      --mealdon-imgsize:300px;
      @media (width < 1650px){
        --mealdon-imgsize:250px;
      }
      @media (width < 1300px){
        --mealdon-imgsize:2000px;
      }
      @media (width < 810px){
        --mealdon-imgsize:150px;
      }
      @media (width < 600px){
        --mealdon-imgsize:120px;
      }
        padding: 4rem 0;
        width:var(--mealdon-imgsize);
        margin: 0 auto;
        background-size:var(--mealdon-imgsize);
        background-repeat: no-repeat;
        background-position: cover;
        height:var(--mealdon-imgsize);

    }
    p{
      text-align:center;
    }
  }