@charset "utf-8";

/* __________ 改行 __________ */
.line1{
  display: none;
}

.line2{
  display: none;
}

@media (max-width: 768px) {
  .line1{
    display: block;
  }
}

@media (max-width: 500px) {
  .line2{
    display: block;
  } 
}

/* ================================================
goods.html
=================================================*/
/* __________ top_img __________ */

.top_visual{
  position: relative;
  width: 100%;
  height: 370px;
  margin-top: 74px;
  overflow: hidden;
}

.top_text{
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
}

.kamome_images {
  position: absolute;
  bottom: -10%;
  right: -4%;
  z-index: 2;
  height: auto;
  width:30%;
}

.goods_title_contents{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }

.goods_title{   /*h2 ページタイトル*/
  font-family: 'Zen Maru Gothic', serif;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 4px #14274C;
  font-size: 3rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  text-align: center;
}

.goods_title_contents p{
  color: #fff;
  text-shadow: 0 0 4px #14274C;
  letter-spacing: 0.1em;
}



@media (max-width: 768px) {
  .wrapper {
    width: calc(100% - 10%);
    margin: 0 auto;
  }
  .goods_title_contents{
    top: 0%;
    left: 0%;
    transform: translate(0%,0%);
    margin:10%;
    padding:0;
  } 
  .goods_title{   /*h2 ページタイトル*/
    font-size: 28px;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
  }
  .goods_title_contents p{
    color: #fff;
    text-shadow: 0 0 4px #14274C;
    letter-spacing: 0;
  }
  .kamome_images {
    position: absolute;
    /* bottom: -20%; */
    right: -5%;
    z-index: 2;
    height: auto;
    width:200px
  }

}


/* __________h2 フェードイン __________ */

.title_fade{
    animation-name:fadeInAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

/* __________ 商品一覧 __________ */

.shop_introduction{
  text-align: center;
  margin-bottom: 4rem;
}


.shop_name{ /*にしき堂 亀屋 天光堂 山豊*/
  font-family: 'Zen Maru Gothic', serif;
  font-size: 2.5rem;
  font-weight: 500;
  color: #14274c;
  margin: 88px 0 16px 0;
  padding: 0 40px;
  position: relative;
  display: inline-block;
  border-bottom: dashed 2px #14274c; /* タイトル下に破線 */
}

.goods1,.goods2,.goods3{
  margin-bottom: 4rem;
}

/* 両端に30度のライン */
/* .shop_name::before, .shop_name::after {
  position: absolute;
  content: '';
  top: calc(50% - 25px);
	height: 50px;
  border-left: #14274c solid 3px;
}
.shop_name::before {
  left:-50px;
  transform: rotate(-30deg);
}
.shop_name::after {
  right: -50px;
  transform: rotate(30deg);
} */

@media (max-width: 768px) {
  .shop_name{ /*にしき堂 亀屋 天光堂 山豊*/
    font-size: 1.5rem;
  }

  .shop_introduction p {
    text-align: left;
  }

  .shop_introduction br {
    display: none;
  }
}

/* __________ 商品メイン __________ */

.goods_main{
  display: flex;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
}

.goods_main_img{
  display: flex;
  justify-content: center;
  align-items: center; /* 上辺合わせにしたい場合はflex-startに変更 */
  width: 40%; /* 画像の横幅専有パーセンテージ */
  margin: 0 auto;
  /* padding: 16px; */
}

.goods_main_img img{
  border-radius: 20px 0 0 20px;
}

.goods_main_text{
  flex: 1;
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
}

.main_item{
  font-family: 'Zen Maru Gothic', serif;
  font-size: 24px;
  color: #14274c;
  margin: 0 0 24px 0;
  font-weight: 500;
}

.set_item{
  margin-top: 2rem;
  font-weight: 400;
}

@media (max-width: 768px) {
  .goods_main{
    display: block;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .goods_main_img{
    width: 100%; /* 画像の横幅専有パーセンテージ */
  }
  .goods_main_img img{
    border-radius: 20px 20px 0 0;
  }
  .goods_main_text{
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .goods_main_text p {
    text-align: left;
  }
  .item_otona{
    font-size: 23px;
  }
}


/* __________ 商品サブ __________ */
.goods_sub{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 20px;
  margin-bottom: 20px;
}

.goods_sub_img img{
  border-radius: 20px 20px 0 0;
}

.goods_sub_list{
  max-width: 380px;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 20px;
}


.sub_item h5{
  font-family: 'Zen Maru Gothic', serif;
  color: #14274C;
  font-size: 20px;
  font-weight: 500;
}


.goods_sub_text{
  vertical-align: text-top;
  border-radius: 0 0 20px 20px;
  padding: 16px;
}

.sub_box {
  font-size: 16px;
  font-weight: 400;
  color: #14274C;
}

span.goods_small {
  display: inline;
}

@media (max-width: 768px) {
  .goods_sub{
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin: 0 auto;
  }

  .goods_sub_list{
    margin: 0 auto;
  }

}


@media (max-width: 600px) {
  .goods_sub{
    grid-template-columns: repeat(1, 1fr);
    max-width: 600px;
    margin: 0 auto;
  }

  .goods_sub_list{
    margin: 0 auto;
  }

  /* アコーディオンタイトル */
  .sub_name {
    position: relative;/*+マークの位置基準relative指定*/
  }
    
  .sub_name:after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background:url(../images/goods/open_btn.svg) no-repeat right top;
    position:absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    transition: 0.2s;
  }
  .sub_name.selected:after {
    transform: translateY(-50%) rotate(180deg);
    transition: 0.2s;
  }
  .sub_box {
    display: none;
  }

}


/* __________ 山豊 __________ */

.yamatoyo_pasta{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 20px;
  column-gap: 48px;
}

@media (max-width: 768px) {
  .yamatoyo_pasta{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .yamatoyo_pasta{
    grid-template-columns: repeat(1, 1fr);

  }

  .yamatoyo_pasta .sub_box{
    max-width: 240px;
  }
}