@use "../global" as * ;

.p-news__title{
  margin-bottom: 60px;
}

/*** product ***/

.p-original__gallary{
  --columns: repeat( 1, 1fr);
  max-width: var(--max-width);
  margin-inline: auto;
  margin-bottom: 55px;
  display: grid;
  grid-template-columns: var(--columns);
  gap: 40px;
}

.p-original__gallay-item img{
  display: block;
  width: 100%;
  height: auto;
  background-color: aliceblue;
}

.p-original__title-en{
  font-size: var(--font-size-40);
  font-family: var(--font-family-en2);
  letter-spacing: .1em;
  text-transform: capitalize;
}

.p-original__title-ja{
  font-size: 14px;
  letter-spacing: .1em;
  font-weight: 400;
}

.p-original__title,
.p-original__p1{
  margin-bottom: 35px;
}

.p-original__p1{
  --text-align: left;
  text-align: var(--text-align);
}

.p-original__p1,
.p-original__p2{
  margin-inline: auto;
  width: fit-content;
}

.p-original__p2{
  margin-bottom: 30px;
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: 500;
  letter-spacing: .05em;
}

.p-original__heading3{
  margin-bottom: 30px;
  font-size: var(--font-size-30);
  text-align: center;
  font-weight: 500;
  letter-spacing: .05em;
}

.p-original__figure img{
  display: block;
  width: 100%;
  height: auto;
}

/*** box ***/

.p-original__box{
  --margin-bottom: 60px;
  --columns: 1fr;
  --padding: 30px 25px;
  --radius: 20px;
  border-radius: var(--radius);
  background-color: var(--color-beige);
  margin-bottom: var(--margin-bottom);
  padding: var(--padding);
  display: grid;
  gap: 50px;
  grid-template-columns: var(--columns);
}

.p-original__box-text h3{
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .05em;
  margin-bottom: .5em;
}

.p-original__box-images{
  --gap: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  text-align: center;
  font-size: var(--font-size-16);
  line-height: 2;
}

.p-original__box-images img{
  display: block;
  width: min(100%, 200px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 10px;
  background-color: #D9D9D9;
  border-radius: 50%;
  margin-inline: auto;
}


/*** 2col ***/

.p-original__2col{
  --columns: 1fr;
  --gap: 50px;

  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--gap);
}

.p-original__2col-figure{
  width: var(--max-width);
  margin-inline: auto;
}

.p-original__2col-figure img{
  display: block;
  width: 100%;
  height: auto;
  background-color: aliceblue;
}

.p-original__2col-text h4{
  font-size: var(--font-size-20);
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 1em;
}

.p-original__2col-text-div > *:not(:first-child){
  margin-top: 2em;
}

.p-original__2col-text-div > ul{
  list-style-position: outside;
  margin-left: 1em;
  line-height: 2;
  list-style: disc;
}

.p-original__2col--pattern1{
  --margin-bottom: 50px;
  margin-bottom: var(--margin-bottom);
}

/*** item ***/

.p-original__items{
  display: grid;
  gap: 50px;
  grid-template-columns: 1fr;
}

.p-original__item{
  --columns: 1fr;
  --gap: 40px;
  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--gap);
  align-items: center;
}

.p-original__item-figure{
  width: var(--max-width);
  margin-inline: auto;
}

.p-original__item-figure img{
  display: block;
  border-radius: 50%;
  background-color: #D9D9D9;
  display: block;
  width: min(100%, 200px);
  height: auto;
  margin-inline: auto;
}

.p-original__item h3{
  margin-bottom: 15px;
  font-weight: 500;
  font-size: 16px;
}



@media screen and (min-width: 768px) {
  
  .p-original__gallary{
    --columns: repeat( 3, 1fr);
    margin-bottom: 95px;
  }

  .p-original__title,
  .p-original__p1{
    margin-bottom: 65px;
  }
  .p-original__p2{
    margin-bottom: 50px;
    font-size: 28px;
  }

  .p-original__p1{
    --text-align: center;
  }

  .p-original__heading3{
    margin-bottom: 50px;
  }

  .p-original__box{
    --margin-bottom: 100px;
    --columns: calc( 520 / 900 * 100%) 1fr;
    --padding: min(50 / 1200 * 100vw, 50px) min(70 / 1200 * 100vw, 70px);
    --radius: 40px;
  }

  .p-original__box-images{
    --gap: 30px;
  }

  .p-original__2col.p-original__2col--pattern1{
    --columns: calc(630 / 1100 * 100%) 1fr;
    --gap: 90px;
    --margin-bottom: 80px;
  }
  
  .p-original__2col.p-original__2col--pattern2{
    --columns: calc(550 / 1100 * 100%) 1fr;
    --gap: 50px;
  }

  .p-original__item{
    --columns: calc(230 / 1100 * 100%) 1fr;
    --gap: 60px;
  }
}

/*** shop ***/

.p-shop__head{
  margin-bottom: 50px;
}

.p-shop__title{
  --margin-bottom: 50px;
  margin-bottom: var(--margin-bottom);
}

.p-shop__title-logo{
  margin-bottom: 40px;
  margin-inline: auto;
  width: min(100%, 246px);
  display: block;
}

.p-shop__p1{
  --margin-bottom: 70px;
  text-align: center;
  margin-bottom: var(--margin-bottom);
  font-size: var(--font-size-30);
  font-weight: 500;
  letter-spacing: .05em;
}

.p-shop__2col{
  --gap: 50px;
  --columns: 1fr; 
  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--gap);
}

.p-shop__2col-images{
  --gap: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.p-shop__2col-images figure{
  max-width: var(--max-width);
}

.p-shop__2col-images figure:nth-of-type(1){
  --max-width: 480px;
  transform: translateX(-15px);
}

.p-shop__2col-images figure:nth-of-type(2){
  --max-width: 445px;
  margin-left: auto;
}

.p-shop__2col-images img{
  display: block;
  width: 100%;
  height: auto;
}

.p-shop__bg-image{
  --margin-bottom: 50px;
  margin-bottom: var(--margin-bottom);
  display: block;
  width: 100%;
  aspect-ratio: 1399.39 / 600;
}

.p-shop__bg-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-shop__bottom-p{
  --margin-bottom: 100px;
  margin-bottom: var(--margin-bottom);
}

.p-shop__images{
  --flex-direction: column;
  display: flex;
  flex-direction: var(--flex-direction);
  gap: 50px;
}

.p-shop__images figure{
  width: var(--width)
}

.p-shop__images figure:nth-of-type(1){
  --width: min(100%, 550px);
  padding-left: 22px;

}

.p-shop__images figure:nth-of-type(2){
  --width: min(100%,462px);
  --padding-top: 0px;
  padding-right: 15px;
  padding-top: var(--padding-top);
  margin-inline-start: auto;
}

.p-shop__images img{
  display: block;
  width: 100%;
  height: auto;
  background-color: aliceblue;
}

.p-shop__info{
  --column: 1fr;
  --gap: 60px;
  display: grid;
  grid-template-columns: var(--column);
  gap: var(--gap);
}

.p-shop__info-map iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.p-shop__info-title{
  margin-bottom: 36px;
}

.p-shop__info-title-en{
  font-family: var(--font-family-en2);
  font-size: var(--font-size-20);
  margin-bottom: 18px;
}

.p-shop__info-title-ja{
  display: flex;
  gap: 16px;
}

.p-shop__info-address{
  margin-bottom: 50px;
}

.p-shop__info-address p{
  color: var(--color-black);
  line-height: 2.5;
}

.p-shop__info-button span{
  letter-spacing: .3em;
  font-family: var(--font-family-en1);
}

@media screen and (min-width: 768px) {
  .p-shop__title{
    --margin-bottom: 100px;
  }
  
  .p-shop__title-logo{
    margin-bottom: 60px;
  }

  .p-shop__p1{
    --margin-bottom: 120px;
  }

  .p-shop__2col{
    --gap: 90px;
    --columns: 400px 1fr; 
  }

  .p-shop__2col-images figure:nth-of-type(1){
    transform: translateX(-24px);
  }

  .p-shop__2col-images{
    --gap: 50px;
  }

  .p-shop__bg-image{
    --margin-bottom: 100px;
  }

  .p-shop__bottom-p{
    --margin-bottom: 150px;
  }

  .p-shop__images{
    --flex-direction: row;
  }

  .p-shop__images figure:nth-of-type(2){
    --padding-top: 100px;
  }


.p-shop__info{
  --column: 1fr calc(610 / 1100 * 100%);
  --gap: 90px;
}
}