@charset "utf-8";

@import url("../../style/variables.css");/*変数定義*/
	
:root{
}

#ticket{
  > h3{
    font-size: 1.2rem;
    text-align: left;
    font-weight: 500;
  }
  > p{
    margin:.5em auto 0 auto;
    text-align: left;
  }
  > ul{
    --_column: 2;
    --_gap: clamp(8px, 2cqi, 16px);
  
    display: block grid;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column)));
    gap: var(--_gap);
    justify-content: center;
  
    @container (640px <= inline-size) {
      --_column: 3;
    }
    margin:20px auto 0 auto;
    li{
      figure{
        span{
          display:block;
          aspect-ratio: 3 / 2;
          background:#f2f2f2;
          border-radius: 10px;
          overflow: hidden;
        }
        figcaption{
          margin:.5em auto 0 auto;
        }
      }
    }
  }
}

#riten3{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:20px;
  margin:50px auto 0 auto;
  section{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap:10px;
    h3{
      text-align: left;
      font-weight: 600;
      font-size: 1.1rem;;
      margin:.3em auto 0 auto;
      color:#ff6a4a;
    }
    p{
      text-align: left;
    }
  }
}

#welsapo{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:20px;
  margin:30px auto 0 auto;
  padding:30px 0;
  border-top:1px dotted silver;
  border-bottom:1px dotted silver;
  align-items: start;
  figure{
    a{
      display:inline-block;
      border:1px solid silver;
      border-radius: 5px;
      overflow: hidden;
      padding:3px;
      img{
        width:auto;
      }
      &:hover{
        img{
          opacity: .75;
        }
      }
    }
  }
  > div{
    h3{
      text-align: left;
      font-weight: 600;
      font-size: 1.1rem;;
      color:#ff6a4a;
    }
    p{
      margin:.5em auto 0 auto;
      text-align: left;
    }
  }
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

#hanbai{
  > p{
    text-align: left;
  }
  > div{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(min(250px,100%),1fr));
    gap:20px;
    margin:20px auto 0 auto;
    figure{
      span{
        display:block;
        aspect-ratio: 3 / 2;
        background:#f2f2f2;
        border-radius: 10px;
        overflow: hidden;
      }
      figcaption{
        margin:.5em auto 0 auto;
      }
    }
  }
}