@charset "UTF-8";

/*------------------------------
生乳のふるさと
--------------------------------*/
.article_wrapper{
  max-width: 90%;
  margin: 0 auto 3rem;
}
  h2.article_heading_h2{
  text-align: center;
  font-size: 1.125rem;
  padding: 1rem;
  border-top: 1px #999C9D solid;
  border-bottom: 1px #999C9D solid;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.05rem;
}
h2.article_heading_h2 span{
  display: inline-block;
  font-size: 80%;
    letter-spacing: -0.05rem;
}

.article_sub_title p{
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

h3.article_title{
  font-size: 1rem;
  text-align: center;
  padding: 1rem;
  letter-spacing: -0.05rem;
}
.article_text p{
  font-size: 0.875rem;
  margin-bottom: 1rem;
    line-break: strict;
  overflow-wrap: break-word;
  line-height: 1.7;
}

@media (min-width: 768px) {
  h2.article_heading_h2,
  h2.article_heading_h2 span,
  h3.article_title{
    letter-spacing: 0.05rem;;
  }
  .article_wrapper{
    width: 90%;
    max-width: 920px;
  }
  h2.article_heading_h2{
    font-size: 2.125rem;
  }
  h3.article_title{
    text-align: left;
    font-size: 1.75rem;
    padding: 0.75rem 1.5rem 1.5rem 0.5rem;
  }

.article_sub_title p{
  font-size: 1rem;

}
.article_text p{
  font-size: 1rem;

}
}
@media (min-width: 992px) {
    .article_wrapper{
      margin: 5rem auto 7rem;
  }
}

/* 横並び2列 */
.image_container_2columns {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 auto 1rem;
  justify-content: space-evenly;
}

.image_item_2columns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.image_container_2columns  {
  min-height: 200px;
  object-fit: cover;
}

.image_item_2columns figcaption {
  margin-top: 5px;
  text-align: left;
  font-size: 0.625rem; /* テキストサイズ */
}

/* 画像1枚 */
.image_container_1column{
  margin-bottom: 1rem;
}
.image_item_1column figcaption{
  margin-top: 5px;
  text-align: left;
  font-size: 0.625rem;
}

/* 基本：スマホ縦1列 */
.image_container_3columns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1rem;
}

.image_item_3columns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.image_item_3columns img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.image_item_3columns figcaption {
  margin-top: 5px;
  font-size: 0.625rem;
}

/* 右側ラッパーもスマホでは縦並び */
.right_column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .image_container_2columns {
  height: auto;
}
  .image_container_3columns {
    flex-direction: row;
    gap: 20px;
    align-items: stretch; /* 左右の高さを揃える */
  }

  .image_item_3columns:first-child {
    flex: 1.2;
  }

  .right_column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .right_column .image_item_3columns img {
    width: 100%;
    height: auto;
  }
}

/* 基本：SP 縦1列、右カラムは2列 */
.image_container_3columns02 {
  display: flex;
  flex-direction: column; /* 縦1列 */
  gap: 10px;

}

.image_item_3columns02 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.image_item_3columns02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.image_item_3columns02 figcaption {
  margin-top: 10px;
  text-align: left  ;
  font-size: 0.625rem;
}
.right_column02 {
  display: flex;
  flex-direction: column;}

  .right_column02 .image_item_3columns02{
    margin-bottom: 10px;
  }
/* 右カラムSP2列 */
@media (min-width: 380px) {.right_column02 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
  .right_column02 .image_item_3columns02{
    margin-bottom: 0;
  }}
/* 画像とテキストをまとめて高さを揃える */
.right_column02 .image_item_3columns02 {
  display: flex;
  flex-direction: column;
  height: 100%; /* Gridセルの高さに合わせる */
}

/* 画像は可変高さで表示 */
.right_column02 .image_item_3columns02 img {
  width: 100%;
  object-fit: cover;
  flex: 1 1 auto; /* 高さをflexで伸縮 */
}

/* テキストは下に固定 */
.right_column02 .image_item_3columns02 figcaption {
  margin-top: 5px;
  text-align: left;
  font-size: 0.625rem;
  flex-shrink: 0; /* テキストは縮まない */
}

/* 画像1を少し大きく */
.right_column02 .image_item_3columns02:nth-child(1) img {
  flex: 2 1 auto; /* 他より縦に大きく */
}

.image_container_2columns02{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1rem;
}
.image_item_2columns02 figcaption {
  margin-top: 5px;
  font-size: 0.625rem;
}

/* PC（768px以上） */
@media (min-width: 768px) {
  .image_container_3columns02 {
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
  }

  /* 左側に3枚目 */
  .image_item_3columns02:last-child {
    order: -1;
    flex: 2;
  }

  /* 右側ラッパー */
  .right_column02 {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
  }

  .right_column02 .image_item_3columns02 img {
    width: 100%;
    height: auto;
  }
  .image_container_2columns02{
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
}

.image_item_2columns figcaption,
.image_item_1column figcaption,
.image_item_3columns figcaption,
.image_item_3columns02 figcaption,
.image_item_2columns02 figcaption,
.right_column02 .image_item_3columns02 figcaption{
    font-size: 0.8125rem;
}
.image_container_2columns,
.image_container_1column,
.image_container_3columns,
.image_container_3columns02,
.image_container_2columns02{
  margin-bottom: 1.5rem;
}
}

.note{
  font-size: 0.625rem;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.note_mark {
  flex-shrink: 0;
}

.note_text {
  flex: 1;
}
@media (min-width: 768px) {
.note{
  font-size: 0.75rem;
}
}
/*------------------------------
商品の購入（通信販売・ふるさと納税）
--------------------------------*/
.shop_header{
  position: relative;
}
.shop_header_title{
  position: absolute;
  top: 40%;
  right: 3%;
  width: calc(100% - 70%);
  max-width: 220px;
}
@media (min-width: 768px) {
.shop_header_title{
  width: calc(100% - 80%);
  bottom: 0;
  right: auto;
  left: 45%;
   /* transform: translate(-50%, -50%); */
}
}

.shop_wrapper{
  width: 90%;
  margin: 0 auto;
}

.shop_bnr{
  margin: 0 auto;
  max-width: 900px;
}

/* ECサイトリスト */
.shop_list_wrapper{
  padding: 0.25rem;
  border-radius: 30px;
  width: 90%;
  margin: 0 auto;
}

.shop_list_inner{
    background: #FFF;
    border-radius: 25px;
    padding: 2rem 1rem;
}

.shop_list ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop_list li {
  margin-bottom: 0.5rem;
}

.shop_list a {
  position: relative;
  padding: 14px 20px;
  text-align: center;
  background-color: #F3FBFE;
  color: #0EA8DC;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  border: #86D5EF 5px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

}
.shop_list a .blank_icon{
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  background: url('../images/common/common_blank_icon_01.png') no-repeat center center;
  background-size: contain;
}
@media (min-width: 768px) {
.shop_list_wrapper{
  width: calc(100% - 20%);
}
}
@media (min-width: 992px) {
  .shop_list_wrapper{
    max-width: 900px;
    margin-bottom: 5rem;
  }
  .shop_list ul{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左寄せ */
    gap: 10px;
  }

  .shop_list li {
      flex: 0 1 48%;
  }

  .shop_list a {
    min-width: 160px;
  }
}

/* ふるさと納税 */
.furusato_wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 900px;
}

.furusato_ec_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP：2列 */
  gap: 10px;
  padding: 0;
  margin: 0 auto 2rem;
  list-style: none;
  justify-content: flex-start; /* 左寄せ */
}

/* リンクをブロック化 */
.furusato_ec_list a {
  display: block;
}

/* 画像ははみ出さないように */
.furusato_ec_list img {
  width: 100%;
  height: auto;
  display: block;
}
.furusato_bnr{
  margin: 0 auto;
  max-width: 900px;
}

/* PC（768px以上） */
@media (min-width: 768px) {
  .furusato_ec_list {
    grid-template-columns: repeat(4, 1fr); /* PC：4列 */
  }
}

@media (min-width: 992px) {
.furusato_wrapper{
  margin-bottom: 7rem;
}
}

/*------------------------------
お問い合わせ・プライバシーポリシー
--------------------------------*/

.form_wrapper{
  padding: 0.75rem;
  border-radius: 30px;
  background: #CCF2FF;
  width: 95%;
  max-width: 700px;
  margin: 0 auto 2rem;
}
.form_inner{
  text-align: center;
  background: #fff;
  border-radius: 25px;
  padding: 1rem;
}

.form_inner h2{
  padding: 1rem;
}
.form_sub_title{
  font-weight: 500;
  margin-top: 1rem;
}

.inquiry_wrapper{
  width: 95%;
  margin: 0 auto 2rem;
  max-width: 700px;
}
h2.inquiry_title{
  text-align: center;
  font-size: 1.25rem;
  padding: 1rem;
  border-top: 1px #999C9D solid;
  border-bottom: 1px #999C9D solid;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.inquiry_inner{
  padding: 0.75rem;
}
.inquiry_main_text{
  font-size: 0.875rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

h3.square_title{
  font-size: 1.0625rem;
  text-align: left;
  padding: 0.75rem 0;
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

.square_title::before {
  content: "■";
  flex-shrink: 0;
}

.inquiry_text{
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.inquiry_text ul li{
  display: flex;
  align-items: flex-start;
  gap: 3px;
}
.inquiry_text ul li::before {
  content: "・";
  flex-shrink: 0;
}

@media (min-width: 992px) {
.form_wrapper{
  width: 80%;
  max-width: 900px;
  margin-bottom: 5rem;
}
.form_inner{
  padding: 2rem;
}
.form_sub_title{
  font-size: 1.1875rem;
}
.inquiry_wrapper{
  width: 80%;
  max-width: 900px;
  margin-bottom: 5rem;
}
h2.inquiry_title{
  font-size: 2.125rem;
}
.inquiry_main_text,.inquiry_text{
  font-size: 1rem;
}
h3.square_title{
  font-size: 1.625rem;
}
}