@charset "UTF-8";

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

#base {
  width: 100%;
}

div#cont {
  margin: 0;
  color: #333;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

.l_wrap_inr {
  width: 1000px;
  margin: auto;
}

@media (max-width: 768px) {
  .l_wrap {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
  }

  .l_wrap_inr {
    width: 90%;
  }
}

/* Utility
--------------------------------------------------------- */
.u_hide {
  display: none;
}

@media screen and (max-width: 768px) {
  .u_resMdHide {
    display: none;
  }

  .u_resMdBlock {
    display: block;
  }

  .u_resMdInline {
    display: Inline;
  }

  .u_resMdFlex {
    display: flex;
  }
}

@media screen and (max-width: 599px) {
  .u_resSmHide {
    display: none;
  }

  .u_resSmBlock {
    display: block;
  }

  .u_resSmInline {
    display: Inline;
  }
}

/* Common
--------------------------------------------------------- */
/* Background */
.m_sec {
  padding-top: 100px;
  padding-bottom: 100px;
}
.m_sec__bg {
  background-color: #f5eddc;
}

@media (max-width: 768px) {
  .m_sec {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Title */
.m_sec_ttl {
  color: #9c7f2a;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
}
.m_sec_ttl__sm{
  font-size: 24px;
  font-weight: 500;
}
.m_sec_ttl__circle {
  position: relative;
  padding-left: 1em;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}
.m_sec_ttl__circle::before {
  content: "";
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  top: 0.6em;
  left: 0;
  background-color: #333;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .m_sec_ttl {
    font-size: 28px;
  }
  .m_sec_ttl__circle {
    font-size: 18px;
  }
  .m_sec_ttl__circle::before {
    top: 0.55em;
  }
}

/* Image */
.m_img {
  display: block;
  line-height: 0;
}
.m_img img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.m_imgDef{
  text-align: center;
  line-height: 0;
}
.m_imgDef img{
  max-width: 100%;
  height: auto;
}

/* Slider */
.m_slider {
  position: relative;
}
.m_slider_itm {
  margin-left: 30px;
  border-radius: 8%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .m_slider_itm {
    margin-left: 20px;
  }
}

/* Lead
--------------------------------------------------------- */
.m_lead_head_ttl {
  color: #9c7f2a;
  font-size: 30px;
  font-weight: 700;
}
.m_lead_head_ttl__en {
  font-size: 60px;
  line-height: 1;
}

.m_lead_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
  margin-top: 100px;
  margin-bottom: 100px;
}
.m_lead_box_txt {
  flex: 0 0 510px;
}
.m_lead_box_sec + .m_lead_box_sec {
  margin-top: 60px;
}
.m_lead_box_ttl {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.85;
}
.m_lead_box_img {
  width: 100vw;
  min-width: 572px;
  margin-right: calc(50% - 50vw);
  line-height: 0;
  max-height: 100%;
  border-radius: 30px 0 0 30px;
  overflow: hidden;
}
.m_lead_box_img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (max-width: 768px) {
  .m_lead_head_ttl {
    font-size: 24px;
  }
  .m_lead_head_ttl__en {
    display: block;
    font-size: 45px;
  }

  .m_lead_box {
    flex-direction: column-reverse;
    align-items: start;
    gap: 50px;
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .m_lead_box_txt {
    flex: 1 1 auto;
  }
  .m_lead_box_sec + .m_lead_box_sec {
    margin-top: 40px;
  }
  .m_lead_box_ttl {
    font-size: 22px;
  }
  .m_lead_box_img {
    min-width: 0;
    margin-right: 0;
  }
}

/* Products
--------------------------------------------------------- */
.m_products_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
}
.m_products_item {
  display: contents;
}
.m_products_item_link {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0;
  color: #333;
  transition: color 0.3s;
}
.m_products_item_link--hasGutter{
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
.m_products_item_img {
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
}
.m_products_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.m_products_item_cont{
  display: contents;
}
.m_products_item_heading{
  margin-top: 20px;
}
.m_products_item_tag {
  width: fit-content;
  padding: .5em 1em;
  border: 1px solid;
  border-radius: 100px;
  line-height: 1;
  font-size: 14px;
}
.m_products_item_tag + .m_products_item_ttl{
  margin-top: 5px;
} 
.m_products_item_ttl {
  font-size: 16px;
  font-weight: 700;
}
.m_products_item_txt {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.7;
}
.m_products_item_price {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.m_products_item_price__num {
  font-size: 20px;
  line-height: 1.2;
}

.m_products_list__brand {
  margin-top: 60px;
}
.m_products_list__brand .m_products_item_link {
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
}

@media (any-hover: hover) {
  .m_products_item_link:hover {
    color: #9c7f2a;
  }
  .m_products_item_link:hover .m_products_item_img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {
  .m_products_list {
    gap: 20px;
    margin-top: 40px;
  }
}
@media (max-width: 599px) {
  .m_products_list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }
}

/* Topics
--------------------------------------------------------- */
.m_topics_box {
  padding: 50px;
  background-color: #fff;
  border-radius: 30px;
}
.m_topics + .m_slider::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 50%;
  background: linear-gradient(#f5eddc 0%, #fff 100%);
}

@media (max-width: 599px) {
  .m_topics_box {
    padding: 30px;
  }
}

/* SNS
--------------------------------------------------------- */
.m_sns_inr {
  display: flex;
  align-items: start;
  gap: 70px;
}
.m_sns_inr .m_sec_ttl {
  width: 22.5%;
}
.m_sns_list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 40px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  width: 70.5%;
}
.m_sns_item a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding-bottom: 10px;
  color: #333;
  transition: color 0.3s;
}
.m_sns_item a::before,
.m_sns_item a::after {
  content: "";
  position: absolute;
  display: block;
  margin: auto;
}
.m_sns_item a::before {
  width: 50px;
  height: 50px;
  right: 0;
  background-color: #9c7f2a;
  background-image: url(/resource/img/buppan/icon_tab_wh.svg);
  background-size: 30% auto;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #9c7f2a;
  border-radius: 50%;
  transition: background-color 0.3s;
}
.m_sns_item a::after {
  width: 85%;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: #f5eddc;
}

@media (any-hover: hover) {
  .m_sns_item a:hover {
    color: #9c7f2a;
  }
  .m_sns_item a:hover:before {
    background-color: #fff;
    background-image: url(/resource/img/buppan/icon_tab.svg);
  }
}

@media (max-width: 768px) {
  .m_sns_inr {
    flex-direction: column;
    align-items: start;
    gap: 40px;
  }
  .m_sns_inr .m_sec_ttl,
  .m_sns_list {
    width: 100%;
  }
}
@media (max-width: 599px) {
  .m_sns_list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .m_sns_item a {
    height: 40px;
  }
  .m_sns_item a::before {
    width: 40px;
    height: 40px;
  }
}


/* =======================================================
  Products
======================================================= */
.m_products_head_nav_lst {
  display: flex;
  justify-content: end;
  gap: 20px;
  flex-wrap: wrap;
}
.m_products_head_nav_itm{
  text-align: center;
}
.m_products_head_nav_itm a {
  display: block;
  color: #333;
  text-decoration: underline;
}
@media (any-hover: hover) {
  .m_products_head_nav_itm a:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 599px) {
  .m_products_head_nav_lst {
    gap: 10px;
  }
  .m_products_head_nav_itm{
    letter-spacing: -1px;
    font-size: 13px;
  }
}
/* ボタン */
.m_btn{
  display: flex;
}
.m_btn::after{
  content: "";
  display: block;
  width: 0;
}
.m_btn__target{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
}
.m_btn--center{
  justify-content: center;
}
.m_btn--main{
  font-size: 14px;
}
.m_btn--main::after{
  height: 4em;
}
.m_btn--main .m_btn__target{
  width: 100%;
  max-width: 264px;
  border: 2px solid #9c7f2a;
  border-radius: 100px;
  color: #fff;
  background: #9c7f2a;
  transition: .3s background, .3s color;
}
.m_btn--main .m_btn__target:hover{
  color: #9c7f2a;
  background: #fff;  
}
.m_btn--anotherLink .m_btn__target{
  position: relative;
}
.m_btn--anotherLink .m_btn__target::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;  
  right: 20px;
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  background: url(/resource/img/buppan/icon_tab_wh.svg) no-repeat center center / contain;
}
.m_btn--anotherLink .m_btn__target:hover::before{
  background-image: url(/resource/img/buppan/icon_tab.svg);
}
/* アイコン */
.m_hasIco{
  position: relative;
  display: block;
}
.m_hasIco::before{
  content: "";
  position: absolute;
  left: 0;
  display: block;
}
.m_hasIco--dot{
  padding-left: 1em;
}
.m_hasIco--dot::before{
  content: "・";
}
/* リンク */
.m_link{}
.m_link_target{
  position: relative;
  display: block;
  width: fit-content;
  padding-left: 16px;
  color: #9c7f2a;
  text-decoration: underline;
}
.m_link_target::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc((1lh - 1em) / 2 + 4px);
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
}

/* 読み物へのリンク */
.m_contentsLink{}
.m_contentsLink_ttl {
  position: relative;
  padding-left: 1em;
  color: #9c7f2a;
  font-size: 20px;
  line-height: 1.4;
}
.m_contentsLink_ttl::before {
  content: "";
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  top: 0.6em;
  left: 0;
  background-color: #9c7f2a;
  border-radius: 50%;
}
.m_contentsLink_subTtl{
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 16px;
}
.m_contentsLink_body{
  display: flex;
  margin: -15px -50px;
}
.m_contentsLink_cont{
  flex: 1 1 auto;
  padding: 15px 50px;
}
.m_contentsLink_img{
  flex: 0 0 326px;
  padding: 15px 50px;
  text-align: center;
}
.m_contentsLink_img img{
  max-width: 100%;
  height: auto;
}
.m_contentsLink_msg + .m_contentsLink_msg{
  margin-top: 1em;
}
@media screen and (max-width: 768px){
  .m_contentsLink_body{
    display: block;
  }
}

/* =======================================================
  追加utility
======================================================= */
.u_fs20{
  font-size: 20px;
}

/* =======================================================
  State
======================================================= */
.js_tab{}
.js_tab__target{
  display: none;
  opacity: 0;
  transform: translateY(50px);
  transition: 1s opacity, 1s transform;
}
.js_tab__target.is_show{
  display: block;
  opacity: 1;
  transform: translateY(0px);
}
.js_tab__btn.is_active{
  color: #9c7f2a;
  font-weight: bold;
}