@charset "utf-8";

html { scroll-behavior: smooth; }
#globalMain, #globalContents{ overflow: visible; }
#globalWrapper { box-sizing: border-box; }


/* Variables & Setup -------------------- */
:root {
  scroll-padding: 100px;
}


.pt-container {
  container-type: inline-size;
  container-name: pt-container;
}

.pt-wrapper {
  container-type: inline-size;
  container-name: pt-wrapper;
  font-size:16px;
  line-height:1.7;
}

.pt-wrapper > div:first-child {
  text-align:center;
}

.pt-wrapper > div:first-child img {
  width:100%;
}

.pt-wrapper * { box-sizing: border-box; }

.pt-wrapper h2{
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  font-family: arial;
  margin: 1.5em 0 0em;
  line-height: 1.4;
}

.pt-wrapper h2 + p {
  text-align:center;
  font-size: 18px;
  margin-bottom: 2em;
}

.pt-wrapper img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: bottom;
}


.pt-wrapper .navigation{
  margin: 25px 20px 23px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-weight: bold;
  flex-wrap: wrap;
  flex: 1;
  gap: 10px;
}

.pt-wrapper .navigation a {
  color:black;
}

.pt-main  {
  padding: 30px;
  background: #fcf6e3;
}

.pt-top .swiper-slide {
  display: grid;
  grid-template-areas:
    "product img"
    "comment  img";
  gap: 15px 16px;
  padding: 40px;
  border-radius: 20px;
  background: #ffe7b2;
  min-height: 310px;
}

.pt-top .pt-logo-product {
  grid-area: product;
  margin-top:    auto;
  display:    flex;
  align-items:    center;
  gap: 5px 20px;
  flex-wrap: wrap;
  font-weight: bold;
}

.pt-top .pt-product-comment {
  grid-area: comment;
  margin-bottom: auto;
}

.pt-top .pt-logo img {
  max-width: 210px;
  max-height: 90px;
}

.pt-top .pt-product a {
  display:block;
  font-size:20px;
  color:black;
  margin-top:.5em;
}

.pt-top figure {
  grid-area: img;
  display: grid;
  justify-items: center;
  align-items: center;
  background: white;
  padding: 15px;
  min-width: 260px;
}

.pt-top figure img {
  max-width: 560px;
  max-height: 200px;
  width: 100%;
}

.pt-pickup-slide {
    padding: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    background: white;
}

.pt-pickup-slide figure {
  height:200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
  background: white;
}

.pt-pickup-slide img {
    max-width: 100%;
    max-height: 200px;
}

.pt-category ul {
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px 15px;
  @container pt-container (max-width: 1000px) {
    grid-template-columns: repeat(4, 1fr);
  }
  @container pt-container (max-width: 720px) {
    grid-template-columns: repeat(3, 1fr);
  }
  @container pt-container (max-width: 560px) {
    grid-template-columns: repeat(2, 1fr);
  }
}


.pt-category ul li {
  text-align:center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  background: white;
  /* padding: 20px; */
  border-radius: 100vmax;
  aspect-ratio: 1;
  box-sizing: border-box;
}

.pt-category ul li img {
    max-height: 91px;
    max-width: 96px;
}

.pt-category ul li > a:first-child {
  height: 100px;
  display: block;
  display: grid;
  justify-items: center;
  align-items: center;
}

.pt-category ul li > a:last-child p {color: black;font-size: .9em;word-break: auto-phrase;line-height: 1.4;}

.pt-category ul li > a:last-child p span {display: inline-block;}

.pt-recommend ul {
  display: flex;
  justify-items: center;
  align-items: flex-start;
  padding: 0 1.5%;
}

.pt-recommend ul li {
    text-align:center;
    border-radius: 100vmax;
    aspect-ratio:1/1;
    box-sizing: border-box;
    padding: 10px;
    flex: 1;
    scale: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    background: #fffca6;
    /* max-width: 260px; */
      @container pt-container (max-width: 900px) {
        gap:5px;
      }
}

.pt-recommend ul li p {
  line-height:1.4;
      @container pt-container (max-width: 900px) {
        font-size:.9em;

      }
}

.pt-recommend ul li:nth-child(2n) {
  margin-top: 17%;
}

.pt-recommend ul li img {
  max-height: 150px;
  max-width: 70%;
    @container pt-container (max-width: 900px) {
      max-height:110px;
      max-width: 60%;
    }
}



/*========================= */


*:is(.pt-news, .pt-movie) .swiper {
    padding-bottom: 50px;
}

*:is(.pt-news, .pt-movie) .swiper-slide {
  width: 300px;
  height: auto;
}

.pt-wrapper *:is(.pt-news, .pt-movie) .swiper-slide a:link,
.pt-wrapper *:is(.pt-news, .pt-movie) .swiper-slide a:visited {
  color: black;
}

.pt-wrapper .carousel-news .news-text {
  margin-top: .5em;
}

.pt-wrapper .cta-news-list a {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  color: #FFF;
  background-color: var(--color-brown);
  text-decoration: none;
  font-weight: bold;
  border-radius: 3px;
}


.carousel-movie li a::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 68 48" width="100%" fill="%23ffffff"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="%23f00"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>') no-repeat center center;
  background-size: 25%;
}

.carousel-movie li a p{
  margin-top: .5em;
  text-align: center;
}

.pt-link a {
    color: #f96800;
    border: 2px solid #f96800;
    display: block;
    max-width: 500px;
    margin: 50px auto 30px;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    transition:.4s;
  &:hover {
    background:#f96800;
    color:white;
    text-decoration:none;
  }
}


@container pt-container (max-width: 700px){
  .pt-main {
      padding: 20px;
  }

  .pt-recommend ul li:nth-child(2n) {
      margin-top: 0;
  }

  .pt-recommend ul {
      justify-content: center;
      align-items: center;
      gap: 17px;
      flex-wrap: wrap;
      padding: 0;
  }

  .pt-recommend ul li {
      max-width: 210px;
      flex:  1 1 40%;
      scale: 1;
  }

  .pt-wrapper h2 {
      font-size: 24px;
  }

  .pt-wrapper h2 + p {
      margin-bottom: 1em;
  }
  
  .pt-top {
      background: #ffe7b2;
      border-radius: 20px;
  }
  .pt-top .swiper-slide {padding: 20px;grid-template-areas:
  "product"
  "img"
  "comment";
  }
  .pt-top .pt-logo-product {
      justify-content: center;
      gap: 0 10px;
      margin-top: 10px;
  }

  .pt-top .pt-product a {
      line-height: 1.5;
      font-size: 18px;
      text-align: center;
  }

  .pt-top .pt-logo img {
      max-width: 190px;
  }
}


@container pt-container (max-width: 400px){
  .pt-category ul li > a:first-child {
  height: 80px;
  }
  .pt-category ul li img {
    max-height: 60px;
    max-width: 60px;
  }
}