html,
    body {
      height: 100%;
    }
    
    body {
      margin: 0;
      min-height: 100vh;
      /* display: flex; */
      /* align-items: center;
      justify-content: center; */
      /* background: rgb(230, 214, 176) !important; */
      /* 余白が出る環境でレターボックス用 */
    }
    /* 9:16 枠（ビューポートに収まる最大サイズ） */
    
    .container_box {
      min-height: 2560px;
      width: 100vw;
      background: #fff;
    }
    
    .board-header {
      background: #6b3c1c;
      color: #f7e8d5;
      border-radius: 2rem 2rem 0 0;
    }
    /* バナー（メニューボード）表示用 */
    
    .banner-board {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      /* 画像の余白を黒でレターボックス */
    }
    
    .banner-board img {
      height: 100%;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      /* 画像全体を表示（トリミングしない） */
    }
    /* 見出しデザイン */
    
    .heading-6 {
      display: inline-block;
      position: relative;
      padding: 0 1.5em;
      color: #ffffff;
      font-size: 3rem;
    }
    
    .heading-6::before,
    .heading-6::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 50%;
      width: 45px;
      height: 2px;
      background-color: #ffffff;
      border-radius: 50%;
    }
    
    .heading-6::before {
      left: 0;
    }
    
    .heading-6::after {
      right: 0;
    }
    
    .main-title {
      font-size: 2.5rem;
    }
    
    .sub-title {
      font-size: 2rem;
    }
    
    .box2 {
      background-image: url('../img/p_new0023_l_new00230.png');
      background-size: auto;
      background-position: center;
      background-repeat: repeat;
    }
    
    .dessert-board {
      height: 100%;
      width: 100%;
      position: relative;
      color: #3b1f0b;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", "游明朝", "Noto Serif JP", serif;
    }
    
    .board-inner {
      position: relative;
      z-index: 1;
      height: 100%;
      box-sizing: border-box;
    }
    /* header */
    
    .item {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    .item .dots {
      border-bottom: 1px dotted rgba(99, 61, 31, .7);
      height: .8rem;
      width: 5rem;
      margin-left: 2rem;
      margin-right: 2rem;
    }
    
    .circle {
      position: absolute;
      left: -0.5rem;
      transform: translateX(-50%);
      width: 15rem;
      aspect-ratio: 1/1;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #f6e0b7, #d3a56f 60%, #9a6a3a 100%);
      box-shadow: 0 0 0 6px rgba(244, 232, 215, .8), 0 0 0 10px rgba(46, 17, 4, .25);
    }
    
    .circle::after {
      content: "";
      position: absolute;
      inset: 10%;
      border-radius: 50%;
      box-shadow: inset 0 0 30px rgba(0, 0, 0, .18);
    }
    
    .c1 {
      position: absolute;
      top: 10%;
      background-image: url('../img/top/2.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    .c2 {
      position: absolute;
      top: 40%;
      background-image: url('../img/top/5.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    .c3 {
      position: absolute;
      top: 70%;
      background-image: url('../img/top/3.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }