@charset "UTF-8";
/* 読み上げ対策 */
.ec-featureRole .ec-featureRole__head {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* 商品紐付けで自動表示されるアンカーリンクを非表示*/
.ec-featureItems.buttons {
  display: none;
}

/* common
---------------------------------------------------- */
.hp_spOnly {
  display: none;
}

@media only screen and (max-width: 767px) {
  .hp_spOnly {
    display: block;
  }
  br.hp_spOnly {
    display: inline;
  }
}
/* el_mainVisual
---------------------------------------------------- */
.el_mainVisual {
  display: block;
}

.el_mainVisual > img {
  max-width: 100%;
}

/* page_menu
---------------------------------------------------- */
.page_menu {
  margin: 30px 0;
}
.page_menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.page_menu ul li {
  width: 25%;
}
.page_menu ul li a {
  display: block;
  text-align: center;
  font-size: min(1.46vw, 17px);
  font-weight: bold;
  background-color: #00612e;
  border-radius: 50px;
  line-height: 54px;
  color: #fff;
  height: 54px;
  position: relative;
  transition: opacity 0.4s;
}
.page_menu ul li a::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: min(2.586vw, 30px);
  top: 50%;
  width: min(0.775vw, 9px);
  height: min(0.775vw, 9px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(0, -75%) rotate(135deg);
}
.page_menu ul li a:hover {
  opacity: 0.8;
  transition: opacity 0.4s;
}
.page_menu ul li span.cs {
  display: block;
  text-align: center;
  font-size: min(1.46vw, 17px);
  font-weight: bold;
  background-color: #aaa;
  border-radius: 50px;
  line-height: 54px;
  color: #fff;
  height: 54px;
}

@media only screen and (max-width: 767px) {
  .page_menu {
    margin: 5.333vw 0;
  }
  .page_menu ul {
    flex-wrap: wrap;
    gap: 2vw 0;
    justify-content: space-between;
  }
  .page_menu ul li {
    width: 49%;
  }
  .page_menu ul li a {
    font-size: 2.95vw;
    line-height: 9.8vw;
    height: 9.8vw;
    transition: opacity 0s;
  }
  .page_menu ul li a::after {
    right: 2.5vw;
    width: 1.5vw;
    height: 1.5vw;
  }
  .page_menu ul li a:hover {
    opacity: 1;
    transition: opacity 0s;
  }
  .page_menu ul li span.cs {
    font-size: 3.2vw;
    line-height: 9.8vw;
    height: 9.8vw;
  }
}

/* readbox
---------------------------------------------------- */
.readbox {
  text-align: center;
}
.readbox p {
  margin: min(2.586vw, 30px) 0;
  line-height: 1.7;
  font-size: min(1.46vw, 17px);
}

@media only screen and (max-width: 767px) {
  .readbox {
    text-align: left;
  }
  .readbox p {
    margin: 5.33vw 0;
    font-size: 3.73vw;
  }
}
/* bnrbox
---------------------------------------------------- */
.bnrbox {
  padding: 30px 0;
  text-align: center;
}
.bnrbox p {
  font-size: 120%;
  margin-bottom: 10px;
}
.bnrbox img {
  width: auto;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .bnrbox {
    padding: 5.333vw 0;
  }
  .bnrbox p {
    font-size: 3.73vw;
    margin-bottom: 2.666vw;
  }
  .bnrbox img {
    width: 100%;
    height: auto;
  }
}
/* title_style1
---------------------------------------------------- */
.title_style1 {
  margin: min(5.172vw, 60px) 0;
  text-align: center;
  font-size: min(3.275vw, 38px);
  font-weight: bold;
  color: #00612e;
}

#wg-ranking.title_style1 {
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .title_style1 {
    margin: 8vw 0;
    font-size: 6.4vw;
  }
  #wg-ranking.title_style1 {
    margin: 10vw 0 0;
  }
}
/* cate_list_wrapper
---------------------------------------------------- */
.cate_list_wrapper {
  text-align: center;
}
.cate_list_wrapper h3 {
  font-weight: bold;
  font-size: min(2.241vw, 26px);
  margin: min(2.586vw, 30px) 0;
}
.cate_list_wrapper .txtLead {
  margin: 0 0 min(2.586vw, 30px);
  line-height: 1.7;
  font-size: min(1.46vw, 17px);
}
.cate_list_wrapper .cate_list {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}
.cate_list_wrapper .cate_list li {
  width: 32%;
  margin-bottom: 2%;
  background-color: #fff;
  box-shadow: 0px 0px min(0.862vw, 10px) 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
}
.cate_list_wrapper .cate_list li::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  bottom: 7px;
  right: 7px;
  border-left: min(0.862vw, 10px) solid transparent;
  border-bottom: min(0.862vw, 10px) solid #333;
}
.cate_list_wrapper .cate_list li a {
  color: #222;
  display: block;
  transition: opacity 0.4s;
  text-align: center;
  padding: 0 0 min(1.293vw, 15px);
}
.cate_list_wrapper .cate_list li a:hover {
  opacity: 0.8;
  transition: opacity 0.4s;
}
.cate_list_wrapper .cate_list li a .txtbox {
  margin: min(1.293vw, 15px) 0 0;
  font-size: min(1.379vw, 16px);
}
.cate_list_wrapper .cate_list li a img {
  border-radius: 4px 4px 0 0;
}

@media only screen and (max-width: 767px) {
  .cate_list_wrapper h3 {
    font-size: 5.33vw;
    margin: 5.33vw 0;
  }
  .cate_list_wrapper .txtLead {
    margin: 0 0 5.333vw;
    font-size: 3.733vw;
    text-align: left;
  }
  .cate_list_wrapper .cate_list {
    gap: 4%;
  }
  .cate_list_wrapper .cate_list li {
    width: 48%;
    margin-bottom: 4%;
  }
  .cate_list_wrapper .cate_list li::after {
    bottom: 6px;
    right: 6px;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #333;
  }
  .cate_list_wrapper .cate_list li a {
    transition: opacity 0s;
    padding: 0 0 2.666vw;
  }
  .cate_list_wrapper .cate_list li a:hover {
    opacity: 1;
    transition: opacity 0s;
  }
  .cate_list_wrapper .cate_list li a .txtbox {
    margin: 2.666vw 0 0;
    font-size: 3.466vw;
  }
}
/* btn-all
---------------------------------------------------- */
.btn-all {
  margin: 30px 0 min(6.89vw, 80px);
}
.btn-all a {
  display: block;
  width: 300px;
  border: #00612e 2px solid;
  box-sizing: border-box;
  border-radius: 50px;
  padding: 0;
  height: 50px;
  text-decoration: none;
  text-align: center;
  margin: auto;
  line-height: 1;
  color: #00612e;
  transition: opacity 0.4s;
}
.btn-all a:hover {
  opacity: 0.8;
  transition: opacity 0.4s;
}
.btn-all a span {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  padding-left: 23px;
  font-weight: bold;
  font-size: 110%;
}
.btn-all a span::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: -1px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background-color: #00612e;
  vertical-align: -0.2em;
}
.btn-all a span::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

@media only screen and (max-width: 767px) {
  .btn-all {
    margin: 5vw 0 13.333vw;
  }
  .btn-all a {
    width: 64vw;
    border: #00612e 0.533vw solid;
    border-radius: 13.333vw;
    height: 10.666vw;
    transition: opacity 0s;
  }
  .btn-all a:hover {
    opacity: 1;
    transition: opacity 0s;
  }
  .btn-all a span {
    margin-top: 2.9vw;
    padding-left: 5vw;
    font-size: 3.733vw;
  }
  .btn-all a span::before {
    top: 0;
    width: 3.733vw;
    height: 3.733vw;
    vertical-align: middle;
  }
  .btn-all a span::after {
    left: 0.9vw;
    top: 1.12vw;
    width: 1.5vw;
    height: 1.5vw;
    border-top: 0.4vw solid #fff;
    border-right: 0.4vw solid #fff;
    transform: rotate(45deg);
  }
}
/* bl_featurebnr
---------------------------------------------------- */
.bl_featurebnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bl_featurebnr li {
  width: 48.5%;
  margin: 0 0 2.5%;
  transition: opacity 0.4s;
}
.bl_featurebnr li a {
  color: #222;
}
.bl_featurebnr li a:hover {
  opacity: 0.8;
  transition: opacity 0.4s;
}
.bl_featurebnr li a p {
  font-size: min(1.293vw, 15px);
  text-align: center;
  margin: min(0.431vw, 5px) 0 0;
  line-height: 1;
}

@media only screen and (max-width: 767px) {
  .bl_featurebnr {
    display: block;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 8vw !important;
  }
  .bl_featurebnr li {
    width: auto;
    margin: 0;
    transition: opacity 0s;
  }
  .bl_featurebnr li a:hover {
    opacity: 1;
    transition: opacity 0s;
  }
  .bl_featurebnr li a p {
    font-size: 3.733vw;
    margin: 1.33vw 0 0;
  }
  .bl_featurebnr li a img {
    width: 100%;
    height: auto;
  }
  .bl_featurebnr li + li {
    margin-top: 4vw;
  }
}
/* related_contents
---------------------------------------------------- */
.related_contents {
  margin: 0 0 min(5.172vw, 60px);
}
.related_contents ul {
  box-sizing: border-box;
  padding: min(0.431vw, 5px) 0 min(0.431vw, 5px) min(0.431vw, 5px);
  display: flex;
  overflow-x: scroll;
}
.related_contents ul li {
  width: min(17.24vw, 200px);
  height: auto;
  display: block;
  margin: 0 min(2.155vw, 25px) 0 0;
  box-sizing: border-box;
  text-align: left;
  flex-shrink: 0;
}
.related_contents ul li a {
  display: block;
  padding: 0 0 min(1.724vw, 20px);
  transition: opacity 0.4s;
  color: #222;
}
.related_contents ul li a:hover {
  transition: opacity 0.4s;
  opacity: 0.8;
}
.related_contents ul li p {
  font-size: min(1.379vw, 16px);
  line-height: 1.6;
  font-weight: bold;
  margin: min(0.862vw, 10px) 0 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.related_contents ul li p .blank_icon {
  vertical-align: min(0.172vw, 2px);
  margin-right: min(0.431vw, 5px);
}
.related_contents ul li p .blank_icon img {
  width: auto;
  height: auto;
}

.related_contents ul::-webkit-scrollbar {
  height: 12px;
}

.related_contents ul::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 6px;
}

.related_contents ul::-webkit-scrollbar-track {
  background: #e7e7e7;
  border-radius: 0px;
}

@media only screen and (max-width: 767px) {
  .related_contents ul {
    padding: 2.66vw 0 2.66vw 2.66vw;
  }
  .related_contents ul li {
    width: 40vw;
    height: 60vw;
    margin: 0 1.33vw 0 0;
  }
  .related_contents ul li a {
    padding: 2.66vw 1.33vw 0;
    box-sizing: border-box;
    min-height: 49.333vw;
  }
  .related_contents ul li p {
    font-size: 3.2vw;
    line-height: 1.4;
    margin: 2.66vw 0 0 0;
  }
  .related_contents ul li p .blank_icon {
    vertical-align: 0px;
  }
  .related_contents ul::-webkit-scrollbar {
    height: 10px;
  }
}
/* coupon
---------------------------------------------------- */
.coupon_container {
  background-color: #fff;
  box-shadow: 0px 0px min(0.862vw, 10px) 0px rgba(0, 0, 0, 0.1);
  border-radius: min(1.72vw, 20px);
  padding: min(6.896vw, 80px) 0;
  position: relative;
  margin: min(6.034vw, 70px) 0 0;
}
.coupon_container h2 {
  width: min(58.27vw, 676px);
  height: min(9.655vw, 112px);
  background: url(/html/upload/user_data/feature/newlifestyle/img/2025/titleribbon.png) no-repeat left top;
  background-size: contain;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: min(3.103vw, 36px);
  font-weight: bold;
  line-height: 1;
  letter-spacing: min(0.431vw, 5px);
  box-sizing: border-box;
  padding: min(2.155vw, 25px) 0 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -40%);
}
.coupon_container .coupon_lead {
  text-align: center;
  font-size: min(1.551vw, 18px);
  line-height: 1.6;
}
.coupon_container h3 {
  border-top: min(0.258vw, 3px) solid #e8780b;
  border-bottom: min(0.258vw, 3px) solid #e8780b;
  width: 80%;
  margin: min(3.448vw, 40px) auto min(2.586vw, 30px);
  text-align: center;
  font-size: min(2.068vw, 24px);
  font-weight: bold;
  padding: min(1.293vw, 15px) 0;
  line-height: 1;
  color: #e8780b;
}
.coupon_container .coupon_img {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto !important;
}
.coupon_container .coupon_img li {
  width: 47%;
}
.coupon_container dl {
  display: flex;
  border: 1px solid #ddd;
  border-bottom: none;
  padding: 0;
  width: 80%;
  margin: 0 auto;
}
.coupon_container dl:first-of-type {
  margin-top: min(3.448vw, 40px);
}
.coupon_container dl:last-of-type {
  border-bottom: 1px solid #ddd;
}
.coupon_container dl dt {
  width: 22%;
  font-size: min(1.379vw, 16px);
  line-height: 1.6;
  margin: 0;
  background-color: #fff5db;
  border-right: 1px solid #ddd;
  padding: min(1.293vw, 15px) min(1.72vw, 20px);
}
.coupon_container dl dd {
  font-size: min(1.379vw, 16px);
  line-height: 1.6;
  width: 78%;
  margin: 0;
  padding: min(1.293vw, 15px) min(1.72vw, 20px);
}

@media only screen and (max-width: 767px) {
  .coupon_container {
    border-radius: 2.66vw;
    padding: 8vw 0;
    margin: 9vw 0 0;
  }
  .coupon_container h2 {
    width: 85.33vw;
    height: 14.13vw;
    font-size: 5vw;
    letter-spacing: 0.3vw;
    padding: 2.8vw 0 0;
  }
  .coupon_container .coupon_lead {
    margin-top: 2vw;
    font-size: 3.466vw;
  }
  .coupon_container h3 {
    border-top: 0.53vw solid #e8780b;
    border-bottom: 0.53vw solid #e8780b;
    width: 90%;
    margin: 5.33vw auto;
    font-size: 4vw;
    padding: 2.66vw 0;
  }
  .coupon_container .coupon_img {
    display: block;
    justify-content: flex-start;
    width: 85%;
    margin: 0 auto !important;
  }
  .coupon_container .coupon_img li {
    width: auto;
    text-align: center;
  }
  .coupon_container .coupon_img li + li {
    margin-top: 5vw;
  }
  .coupon_container dl {
    display: block;
    width: 90%;
  }
  .coupon_container dl:first-of-type {
    margin-top: 8vw;
  }
  .coupon_container dl dt {
    width: auto;
    font-size: 3.733vw;
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding: 1.5vw 2.666vw;
  }
  .coupon_container dl dd {
    font-size: 3.733vw;
    width: auto;
    padding: 2.666vw;
  }
}
/* accordion
---------------------------------------------------- */
.accordion {
  position: relative;
  transform: translateZ(0);
  margin: min(1.724vw, 20px) 0 min(0.862vw, 10px);
}
.accordion .acc-toggle {
  display: none;
}
.accordion .acc-toggle:checked + .acc-title::before {
  transform: rotate(90deg) !important;
}
.accordion .acc-toggle:checked + .acc-title + .acc-content {
  max-height: 1000px;
  transition: all 1s;
  margin-top: min(1.724vw, 20px);
}
.accordion .acc-title {
  display: block;
  margin-bottom: 0;
  cursor: pointer;
}
.accordion .acc-title .togglebtn {
  display: block;
  padding: min(1.1206vw, 13px);
  text-align: center;
  transition: 0.3s;
  font-size: min(1.379vw, 16px);
  font-weight: bold;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #fff6dd;
  color: #e8780b;
}
.accordion .acc-title .togglebtn:hover {
  background-color: #fffaeb;
}
.accordion .acc-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #333;
  transition: all 0.3s;
  z-index: 1;
  right: min(2.1875vw, 28px);
  width: min(0.258vw, 3px);
  height: min(1.551vw, 18px);
  transform: rotate(90deg);
}
.accordion .acc-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #333;
  transition: all 0.3s;
  z-index: 1;
  right: min(2.1875vw, 28px);
  width: min(0.258vw, 3px);
  height: min(1.551vw, 18px);
}

@media only screen and (max-width: 767px) {
  .accordion {
    margin: 5.33vw 0 2.66vw;
  }
  .accordion .acc-toggle:checked + .acc-title + .acc-content {
    margin-top: 5.33vw;
  }
  .accordion .acc-title .togglebtn {
    padding: 2.666vw;
    font-size: 3.733vw;
  }
  .accordion .acc-title .togglebtn:hover {
    background-color: #fff6dd;
  }
  .accordion .acc-title:after,
  .accordion .acc-title:before {
    right: 5.8666666667vw;
    width: 0.8vw;
    height: 3.7333333333vw;
  }
}
.accordion .acc-title {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.2s;
}
.accordion .acc-content {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.2s;
  overflow: hidden;
  max-height: 0;
}
.accordion .acc-content li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 90%;
  line-height: 1.4;
}
.accordion .acc-content li + li {
  margin-top: min(0.258vw, 3px);
}

@media only screen and (max-width: 767px) {
  .accordion .acc-content li {
    font-size: 3.46vw;
  }
  .accordion .acc-content li + li {
    margin-top: 0.8vw;
  }
}/*# sourceMappingURL=style2025.css.map */