@charset "utf-8";

/* メイン（ヘッダーとの余白や左右余白設定 */
.news_main{
  margin: 18rem auto 0;
  padding: 0 16rem;
  max-width: 1280px
}

/* タイトル */
.main_title{
  font-size: 3.5rem;
  font-weight: 600;
  font-family: var(--NotoSerif);
  line-height: calc(50 / 35);
  text-align: center;
  margin-bottom: 9.3rem;
}

/* タグ */
.tag_name{
  width: 100%;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* タグの文字設定 */
.news_tag{
  font-size: 1.9rem;
  font-weight: 500;
  font-family: var(--NotoSerif);
}

.post_left_content{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* 店舗名タグの文字設定 */
.shop_name_cats{
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--NotoSans);
}

.news_container{
 padding-top: 6.1rem;
}

/* 投稿内容 */
.news_section{
  display: flex;
  justify-content: center;
  gap:8.2rem;
}

/* 投稿日 */
.post_date{
  font-size: 1.4rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  margin-bottom: 0.8rem;
}

/* タイトル */
.post_title{
  font-size: 2.1rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  margin-bottom: 9.5rem;
}

/* 内容 */
.post_content{
  width: 38.8rem;
  height: fit-content;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(39 / 15);
}

/* サムネイル*/
.post_thumbnail{
  width: 49rem;
  height: 32rem;
}

.post_img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 戻るボタン */
.back_btn_box{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 13.1rem 0 9.9rem;
}

.back_btn{
  position: relative;
  width: 10rem;
  height: 3.05rem;
}

/* ボタン下部の矢印 */
.back_btn::before{
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.05rem;
  background-color: #393636;
}

.back_btn::after{
  content: "";
  position: absolute;
  bottom: 0.3rem;
  right: 0;
  width: 1rem;
  height: 0.05rem;
  background-color: #393636;
  transform: rotate(35deg);
}

/* ボタンの文字設定 */
.back_btn_txt{
  font-size: 1.55rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(22 / 15);
  color: #393636;
}



@media screen and (max-width: 699.98px) {

  .main_title{
    margin-bottom: 3rem;
  }

  .news_main{
    margin: 3.1rem auto 0;
    padding: 0 2.5rem;
  }
  
  .news_section{
    flex-direction: column-reverse;
    gap: 2.5rem;
  }

  .news_container{
    padding: 0;
  }

  .post_title{
    margin-bottom: 5rem;
  }

  .post_content{
    width: 100%;
  }

  .post_left_content{
    flex-direction: column-reverse;
    gap: .9rem;
  }
  .shop_name_cats,.news_tag{
    text-align: right;
  }
  .post_thumbnail{
    width: 32.5rem;
    height: 21.2rem;
  }
  

  .back_btn_box{
    margin: 6.1rem 0 7rem;
  }
}