@charset "UTF-8";
/* 共通パーツ */
html {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #382710;
  background-color: #fcfaf2;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* ここから記述します。 */
/*# sourceMappingURL=style.css.map */

.u-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 100px;
}
@media screen and (max-width: 768px) {
  .u-wrapper {
    padding: 0 15px;
  }
}

.u-sectionheading {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media screen and (max-width: 768px) {
  .u-sectionheading {
    gap: 10px;
  }
}

.u-sectiontitle {
  font-weight: 500;
  font-size: 32px;
}
@media screen and (max-width: 768px) {
  .u-sectiontitle {
    font-size: 24px;
  }
}

/* ヘッダー */
.header {
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .header {
    height: 100px;
    padding: 0;
    max-width: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .header_logo {
    width: 120px;
    margin: 11px 30px;
  }
}

@media screen and (max-width: 768px) {
  .header_nav {
    width: 100%;
    background-color: #f4eed8;
  }
}

.header_list {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .header_list {
    padding: 8px 20px;
    justify-content: center;
  }
}

.header_menulink {
  font-size: 16px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .header_menulink {
    font-size: 14px;
  }
}

/*ファーストビュー*/
.firstview {
  position: relative;
}

.firstview_img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .firstview_img {
    height: 240px;
  }
}

.firstview_title {
  top: 50%;
  left: 50%;
  width: 580px;
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 40px;
  text-align: center;
  background-color: rgba(255, 253, 247, 0.9);
  padding: 8px 32px;
}
@media screen and (max-width: 768px) {
  .firstview_title {
    font-size: 22px;
    width: 302px;
    padding: 3px 10px;
  }
}
.firstview_title .firstview_text {
  display: block;
  font-weight: 500;
}

/*メイン部分*/
.container {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 1024px) {
  .container {
    flex-direction: column;
  }
}
@media screen and (max-width: 480px) {
  .container {
    gap: 50px;
  }
}

.main {
  padding: 64px 0;
  width: 70%;
}
@media screen and (max-width: 1024px) {
  .main {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .main {
    padding: 50px 0;
  }
}

.leftside {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media screen and (max-width: 480px) {
  .leftside {
    gap: 40px;
  }
}

/*最近のお知らせ*/
.news {
  display: flex;
  flex-direction: column;
  gap: 42px;
}
@media screen and (max-width: 480px) {
  .news {
    gap: 30px;
  }
}

.news_top {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.news_text {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .news__text {
    font-size: 14px;
  }
}

.news_first {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

.news_img {
  width: 100%;
}

.news_pickup {
  max-width: 640px;
  width: 100%;
}
@media screen and (max-width: 480px) {
  .news__pickup {
    width: 100%;
  }
}

.news_about {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media screen and (max-width: 480px) {
  .news_about {
    gap: 8px;
  }
}

.news_date {
  font-size: 14px;
  font-weight: 500;
}

.news_abouttitle {
  font-size: 15px;
  font-weight: 700;
}

.news_abouttext {
  font-size: 14px;
  letter-spacing: 0.06em;
}

.news_bottom {
  display: flex;
  gap: 24px;
  padding-bottom: 24px;
}
@media screen and (max-width: 480px) {
  .news_bottom {
    flex-direction: column;
    gap: 30px;
  }
}

.news_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}


/*おすすめの記事*/
.recommend {
  display: flex;
  flex-direction: column;
  gap: 42px;
}
@media screen and (max-width: 480px) {
  .recommend {
    gap: 30px;
  }
}

.recommend_top {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.recommend_text {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .recommend__text {
    font-size: 14px;
  }
}

.recommend_first {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

.recommend_img {
  width: 100%;
}

.recommend_pickup {
  max-width: 640px;
  width: 100%;
}
@media screen and (max-width: 480px) {
  .recommend_pickup {
    width: 100%;
  }
}

.recommend_about {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recommend_date {
  font-size: 14px;
  font-weight: 500;
}

.recommend_abouttitle {
  font-size: 15px;
  font-weight: 700;
}

.recommend_abouttext {
  font-size: 14px;
  letter-spacing: 0.06em;
}

.recommend_bottom {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 480px) {
  .recommend_bottom {
    flex-direction: column;
    gap: 30px;
  }
}

.recommend_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.recommend_othertext {
  display: flex;
  align-items: center;
  font-size: 14px;
  width: fit-content;
  margin-left: auto;
}

/*右側部分*/
.rightside {
  display: flex;
  flex-direction: column;
  gap: 33px;
  padding: 64px 0;
  width: 28%;
}
@media screen and (max-width: 1024px) {
  .rightside {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .rightside {
    padding: 0 0 50px;
    gap: 41px;
  }
}

/*商品カテゴリ*/
.category {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.category_contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category_top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 480px) {
  .category_top {
    gap: 20px;
  }
}

.category_text {
  font-size: 14px;
}

.category_alltext {
  display: flex;
  align-items: center;
  font-size: 16px;
  width: fit-content;
  margin-left: auto;
}

.category_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.category_btn {
  border: 0.5px solid #d4cdb3;
  border-radius: 5px;
}

.category_btnlink {
  display: block;
  padding: 11px 6px;
}

.category_btnimg {
  width: 100%;
}
@media screen and (max-width: 480px) {
  .category_btnimg {
    margin-bottom: 16px;
  }
}

.category_btntext {
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
}

.category_search {
  display: flex;
  border: 1px solid #d4cdb3;
  border-radius: 3px;
  height: 43px;
}

.category_searchinput {
  background-color: #fff;
  width: calc(100% - 53px);
  padding: 8px;
}

.category_searchbtn {
  background-color: #fff2bf;
  padding: 0 10px;
  width: 53px;
}

.category_img {
  width: 100%;
}

/*人気記事*/
.popular_linktext {
  display: flex;
  align-items: center;
  font-size: 16px;
  width: fit-content;
  margin-left: auto;
}
@media screen and (max-width: 480px) {
  .popular_linktext {
    margin-bottom: 20px;
  }
}

.popular_item {
  border-top: 1px solid #e8e3d2;
}
.popular_item:last-child {
  border-bottom: 1px solid #e8e3d2;
}

.popular_link {
  display: flex;
  gap: 20px;
  padding: 14px 0;
}

.popular_date {
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .popular_date {
    font-size: 16px;
  }
}

.popular_text {
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .popular_text {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .post_allimg {
    width: 30px;
  }
}



/*投稿記事*/
.post {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (max-width: 480px) {
  .post {
    gap: 20px;
  }
}

.post_linktext {
  display: flex;
  align-items: center;
  font-size: 16px;
  width: fit-content;
  margin-left: auto;
}

iframe {    /*別にあるWEBページを埋め込みたい時に使用する*/
  width: 100%;
}

/*フッター*/
.footer {
  background-color: #fff;
  padding: 42px;
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 48px 30px 14px;
  }
}

.footer_contents {
  display: flex;
  max-width: 985px;
  margin: 0 auto;
  gap: 160px;
}
@media screen and (max-width: 1024px) {
  .footer_contents {
    gap: 80px;
  }
}
@media screen and (max-width: 768px) {
  .footer_contents {
    flex-direction: column-reverse;
    gap: 40px;
  }
}

.footer_left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer_text {
  font-size: 14px;
}

.footer_menu {
  display: flex;
  gap: 160px;
}
@media screen and (max-width: 1024px) {
  .footer_menu {
    gap: 80px;
  }
}
@media screen and (max-width: 768px) {
  .footer_menu {
    flex-direction: column;
    gap: 40px;
  }
}

.footer_center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer_title {
  display: inline;
  border-bottom: 0.5px solid #b2572f;
  padding-bottom: 4px;
}

.footer_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer_item {
  font-size: 16px;
}

.footer_right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}