@charset "UTF-8";
/* エフェクト用 */
.universal-glow {
  position: relative;
  display: inline-block;
  color: #000;

  /* --- マスクの基本設定 --- */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 150% 0;
  mask-position: 150% 0;
  
  /* 初期状態：完全に透明なマスク */
  -webkit-mask-image: linear-gradient(120deg, transparent, transparent);
  mask-image: linear-gradient(120deg, transparent, transparent);
}

.universal-glow img {
  display: block;
  height: auto;
  pointer-events: none; /* マスクの干渉避け */
}

/* 1周目 */
.is-shining {
  -webkit-mask-image: linear-gradient(120deg, transparent 40%, #000 50%, transparent 60%) !important;
  mask-image: linear-gradient(120deg, transparent 40%, #000 50%, transparent 60%) !important;
  animation: phase1 0.4s linear forwards;
}

/* 2周目 */
.is-filling {
  -webkit-mask-image: linear-gradient(120deg, #000 40%, #000 60%, transparent 70%) !important;
  mask-image: linear-gradient(120deg, #000 40%, #000 60%, transparent 70%) !important;
  animation: phase2 0.5s linear forwards;
}

/* 完了：マスク除去 */
.is-completed {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

@keyframes phase1 {
  0%   { -webkit-mask-position: 150% 0; }
  100% { -webkit-mask-position: -50% 0; }
}

@keyframes phase2 {
  0%   { -webkit-mask-position: 150% 0; }
  100% { -webkit-mask-position: 50% 0; } /* 300%サイズなら50%位置で全表示になる */
}


.campus_gourmet_wrap{
  padding: 30px 0 80px;
  background: #fff;
  & section.gourmet_wrap2026 {
    width: 90%;
    max-width: 1200px;
    margin: auto;

    /* 全コンテナ共通設定 */
    & .gourmet_container {
      display: grid;
      gap: 20px;
      margin-bottom: 30px;
      grid-template-columns: 1fr; /* スマホは1列 */

      & figure {
        position: relative; /* menu_nameの基準 */
        margin: 0;
      }
      & img {
        width: 100%;
        height: auto;
        display: block;
      }

      & .menu_name {
        position: absolute;
        z-index: 1;
        top: 10px;
        left: 10px;
        padding: 10px 15px 10px 45px;
        background-color: #fff;
        border: #000 0.5px solid;
        border-radius: 0 9999px 9999px 0;
        line-height: 1.5;
        font-weight: bold;
        -webkit-mask-image: radial-gradient(circle at 23px 50%, transparent 8px, black 8.5px);
        mask-image: radial-gradient(circle at 23px 50%, transparent 8px, black 8.5px);
        display: flex;
				flex-direction: row;
				align-items: center;
        &::before {
          content: "";
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          height: 19px;
          background: transparent;
          border: 2px solid #000; /* 3pxだと太すぎるかもなので2pxで調整 */
          border-radius: 50%;
          box-sizing: border-box;
        }
        & span {
          font-size: 0.8em;
          &::before{
            content: '¥';
            margin: 0 2px 0 8px;
          }
        }
      }

      &.tama01{
        & .area01 {
          max-width: 100%;
          & img{
            width: 200px;
            margin-bottom: 30px;
          }
          & p{
            & span{
              display: block;
              font-size: 1.4em;
              font-weight: bold;
              margin-bottom: 30px;
            }
          }
        }
      }

      &.tama02{
        & img{
          max-height: 400px;
          height: 100%;
          object-fit: cover;
          object-position: 50% 16%;
        }
      }

      & .menu_description{
        padding: 20px;
        & span{
          display: block;
          font-size: 1.2em;
          font-weight: 600;
          padding: 5px;
          &.campus_name{
            background: #231815;
            color: #fff;
          }
          &.campus_title{
            margin-left: -5px;
          }
        }
      }
    }

    & .caption {
      text-align: right;
      font-size: 0.8em;
      display: block; /* grid解除 */
    }
  }
}



  /* --- PC版のレイアウト切り替え --- */
  @media (min-width: 800px) {
  .campus_gourmet_wrap{
    padding: 80px 0;
    & section.gourmet_wrap2026 {
        & .gourmet_container {
          grid-template-columns: repeat(3, minmax(200px, 1fr));

          /* 多摩：7要素パズル */
          &.tama01 {
            grid-template-areas:
              "area01 area02 area02"
              "area01 area03 area04"
              "area05 area06 area07";
            & .area01 {
              grid-area: area01;
              max-width: 70%;
              & img{
                width: 100%;
              }
            }
            & .area02 { grid-area: area02; }
            & .area03 { grid-area: area03; }
            & .area04 { grid-area: area04; }
            & .area05 { grid-area: area05; }
            & .area06 { grid-area: area06; }
            & .area07 { grid-area: area07; }
          }

          /* 後楽園・茗荷谷：3要素用レイアウト */
          &.kourakuen, &.myougadani {
            grid-template-areas:
              "area01 area02 area02"
              "area03 area02 area02";      
            & .area01 { grid-area: area01; }
            & .area02 { grid-area: area02; }
            & .area03 { grid-area: area03; }
          }

          /* 1枚だけの画像 */
          &.tama02 {
            grid-template-columns: 1fr;
          }
        }
      }

    }
  }