:root {
    --main-color: #0f7350;
    --sub-color: #f07332;
    --gothic:
      "Hiragino Kaku Gothic ProN",
      "ヒラギノ角ゴ ProN",
      "Hiragino Sans",
      "ヒラギノ角ゴシック",
      "Yu Gothic",
      "Meiryo",
      sans-serif;
    --mincho:
      "Hiragino Mincho ProN", "ヒラギノ明朝 ProN",
      "Hiragino Mincho Pro", "ヒラギノ明朝 Pro",
      "Hiragino Mincho", "ヒラギノ明朝",
      serif;
    ;
    --section-margin: 50px;
    --fontSize-xl: 32px;
    --fontSize-lg: 24px;
    --fontSize-md: 20px;
    --fontSize-sm: 16px;
    --fontSize-xs: 14px;
    --fontSize-xxs: 11px;
  }

  /* reset */
  .vegeota * {
    margin: 0;
    padding: 0;
  }

  .vegeota ul {
    list-style-type: none;
  }

  .vegeota img {
    display: block;
    width: 100%;
  }

  /* ---------------------- */
  .vegeota {
    padding-bottom: var(--section-margin);
    font-family: var(--gothic);
    background-image: url(/external/category/template/vegeota/common/imgs/bg.jpg);
  }

  @media (max-width: 500px) {
    .vegeota {
      width: calc(100% + 30px);
      transform: translateX(-15px);
    }
  }

  /* fv */

  /* moniter */
  .vegeota .moniter{
    margin-top: var(--section-margin);
    padding: 0 20px;
    font-size: var(--fontSize-sm);
  }
  .vegeota .moniter-title{
    background-color: var(--main-color);
    font-size: var(--fontSize-xl);
    font-weight: bold;
    color: #fff;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .vegeota .moniter-title span{
    font-size: var(--fontSize-md);
  }
  .vegeota .moniter-contents{
    padding: 20px;
    background-color: #fff;
  }
  .vegeota .moniter-contents > p{
    color: var(--main-color);
    text-align: center;
  }
  .vegeota .moniter-steps{
    margin-top: 20px;
  }
  .vegeota .moniter-steps > ul{
    display: flex;
    gap: 20px;
  }

  .vegeota .moniter-steps > ul > li{
    flex: 0 0 calc(50% - 10px);
  }
  .vegeota .moniter-steps > ul > li img{
    max-width: 350px;
    margin: 0 auto 5px;
  }

  .vegeota .moniter-steps > ul > li p span{
    font-weight: bold;
  }
  .vegeota .moniter-note{
    margin: 20px auto 0;
    max-width: 650px;
  }
  .vegeota .moniter-note a{
    display: flex;
    align-items: center;
    background-color: #fff!important;
    border: solid 1px #000;
  }
  .vegeota .moniter-note a span,
  .vegeota .moniter-note a::after{
    display: block;
    text-align: center;
    flex-grow: 1;
    font-size: var(--fontSize-sm);
  }
  .vegeota .moniter-note ul{
    padding-top: 10px;
    padding-left: 20px;
  }
  .vegeota .moniter-note li{
    list-style-type: disc;
  }
    @media (max-width: 768px){
    .vegeota .moniter-title{
      flex-direction: column;
    }
    .vegeota .moniter-steps > ul{
      flex-direction: column;
    }
  }

  /* lead */
  .vegeota .lead {
    margin-top: var(--section-margin);
  }

  .vegeota .lead p{
    color: var(--main-color);
    font-family: var(--mincho);
    text-align: center;
    font-size: var(--fontSize-lg);
    font-weight: bold;

  }

  @media (max-width: 500px) {
    .vegeota .lead p{
      font-size: var(--fontSize-xs);
    }
  }

  .vegeota .lead p span {
    background-color: #fff;
    display: inline-block;
    margin-top: 8px;
    padding: 1px 4px;
  }
  .vegeota .lead p span:first-child{
    margin-top: 0;
  }

  /* howto */
  .vegeota .howto {
    margin-top: var(--section-margin);
    width: 80%;
    max-width: 600px;
    margin: var(--section-margin) auto 0;
  }

  .vegeota .howto-title {
    border-top: solid 1px var(--main-color);
    border-bottom: solid 1px var(--main-color);
    padding: 20px 0;
  }

  .vegeota .howto-title img {
    width: 80%;
    margin: 0 auto;
  }

  .vegeota .anchor-links {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }

  .vegeota .anchor-links li {
    flex: 0 0 calc(33% - 30px);
    background-color: var(--main-color);
    padding: 20px 0;
    box-sizing: border-box;
    border-radius: 12px;
    justify-content: center;
  }

  .vegeota .anchor-links li img {
    max-height: 150px;
    object-fit: contain;
  }

  @media (max-width: 500px) {
    .vegeota .anchor-links {
      gap: 16px;
    }

    .vegeota .anchor-links li {
      flex: 0 0 calc(33% - 16px);
    }

    .vegeota .anchor-links li img {
      max-height: 86px;
    }
  }

  /* vegeota-item-section */
  .vegeota-item-section {
    margin-top: var(--section-margin);
  }

  .vegeota .section-title {
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  .vegeota .section-title img {
    max-width: 258px;
    max-height: 58px;
    object-fit: contain;
  }

  @media (max-width: 500px) {
    .vegeota .section-title img {
      max-height: 34px;
    }
  }

  .vegeota .items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px;
    padding: 0 16px;
  }

  @media (max-width: 500px) {
    .vegeota .items-wrapper {
      padding: 0;
    }
  }

  .vegeota .items-wrapper .vegeota-item {
    width: calc(50% - 8px);
    /* flex: 1 1 calc(50% - 8px); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  @media (max-width: 768px) {
    .vegeota .items-wrapper .vegeota-item {
      width: 100%;
    }
  }

  /* item-thumbnail */
  .vegeota .swiper-button-next,
  .vegeota .swiper-button-prev {
    background: none;
    width: auto;
    height: auto;
  }

  @media screen and (max-width: 767px) {
    .vegeota .swiper-button-next,
    .vegeota .swiper-button-prev {
      display: block;
    }
  }

  .vegeota .swiper-button-next::after,
  .vegeota .swiper-button-prev::after {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .vegeota .swiper-button-disabled {
    display: none;
  }

  .vegeota .swiper-button-next {
    right: 10px;
    background-image: url(/external/category/template/vegeota/common/imgs/next_btn.png);
  }

  .vegeota .swiper-button-prev {
    left: 10px;
    background-image: url(/external/category/template/vegeota/common/imgs/prev_btn.png);
  }

  .vegeota .slide-inner {
    position: relative;
  }

  .vegeota .slide-inner p {
    padding: 8px;
    font-size: var(--fontSize-xs);
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    width: 90%;
  }

  .vegeota .slide-inner p.vertical-text{
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    left: unset;
    bottom: unset;
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: auto;
    height: 90%;
  }
  /* @media (max-width: 500px) {
    .vegeota .slide-inner p{
      font-size: var(--fontSize-xxs);
    }
  } */
  .vegeota .thumbnail {
    padding: 16px 16px 0 16px;
  }

  /* .vegeota .thumbnail .swiper-wrapper {
    opacity: 0.7;
    max-width: calc(20% - 5px);
  } */

  .vegeota .thumbnail .swiper-slide {
    opacity: 0.7;
    max-width: calc(20% - 10px);
  }
  .vegeota .thumbnail .swiper-slide:last-child {
    margin: 0!important;
  }

  .vegeota .thumbnail .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
  }
  .vegeota .item-thumbnail-text{
    margin-top: 32px;
    padding: 0 16px;
  }
  .vegeota .item-name:not(.--small) {
    font-size: var(--fontSize-lg);
    font-family: var(--mincho);
    text-align: center;
  }

  @media(max-width:500px){
    .vegeota .item-name:not(.--small){
      font-size: var(--fontSize-md);
    }
  }

  .vegeota .item-name a {
    text-decoration: none;
  }

  .vegeota .item-description {
    font-size: 1.1rem;
    margin-top: 32px;
  }
  @media(max-width:500px){
    .vegeota .item-description{
      font-size: 1rem;
    }
  }
  .vegeota .item-description span{
    font-size: var(--fontSize-xs);
    display: block;
    margin-top: 8px;
  }

  /* item-info */
  .vegeota .item-info {
    padding: 0 16px;
    box-sizing: border-box;
  }

  .vegeota .item-detail {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 4px;
  }

  .vegeota .item-point {
    color: #fff;
    background-color: #e52e2e;
    font-weight: bold;
    border-radius: 3px;
    padding: 3px 3px 1px 4px;
  }

  .vegeota .item-price > div{
    display: flex;
    align-items: end;
    gap: 4px;
  }

  .vegeota .item-price p {
    font-size: var(--fontSize-md);
    font-weight: bold;
  }

  .vegeota .item-price p.taxin {
    font-size: var(--fontSize-xs);
    font-weight: normal;
  }
  .vegeota .item-price p.teiki-price{
    font-size: var(--fontSize-xs);
    font-weight: normal;
  }
  .vegeota .item-price p.teiki-price a{
    color: var(--main-color);
  }

  .vegeota .item-price span {
    font-size: var(--fontSize-sm);
  }

  .vegeota .item-val {
    font-size: var(--fontSize-xs);
  }

  /* cart */
  .vegeota .cart .add-to-cart fieldset {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
  }

  .vegeota .cart .add-to-cart fieldset button.button-cart {
    max-width: 137px;
    width: 100%;
    flex: 1;
    background-image: none;
    background-color: #e87435;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 8px 0;
    border-radius: 4px;
  }

  .vegeota .cart .add-to-cart fieldset button.button-cart span {
    position: relative;
    padding-left: 23px;
    font-size: var(--fontSize-sm);
  }

  .vegeota .cart .add-to-cart fieldset button.button-cart span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 19px;
    height: 17px;
    background: url(/assets/img/icon_cart_02-renewal.svg) 0 0 no-repeat;
  }

  /* recomend */
  .vegeota .recomend-items {
    margin-top: 32px;
  }

  .vegeota .recomend-title {
    text-align: center;
    font-size: var(--fontSize-md);
  }

  .recomend-list {
    display: flex;
    overflow: scroll;
    gap: 16px;
    padding: 16px;
    padding-bottom: 24px;
  }

  .recomend-list.is-single {
    justify-content: center;
  }

  .vegeota .recomend-item {
    flex: 0 0 80%;
    display: flex;
    align-items: center;
    border: solid 1px #333;
    padding: 12px;
    gap: 8px;
    box-sizing: border-box;
    background-color: #fff;
    max-width: 400px;
    min-width: 260px;
    min-height: 246px;
   }

  .item-thumbnail.--small {
    flex: 0 0 40%;
  }

  .item-info.--small {
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .item-name.--small {
    margin: 0;
    font-size: var(--fontSize-sm);
    text-align: left;
  }

  .item-name.--small a {
    text-decoration: underline;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: calc(1.5em * 2);
    height: 50px;
  }
  @media (max-width: 500px) {
    .item-name.--small {
      font-size: var(--fontSize-xs);
    }
  }

  .vegeota .item-price.--small {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 0;
  }

  .vegeota .item-price.--small p{
    font-size: var(--fontSize-sm);
  }
  .vegeota .item-price.--small p span{
    font-size: var(--fontSize-xs);
  }

  @media (max-width: 500px){
    .vegeota .item-price.--small p.taxin,
    .vegeota .item-price.--small p.teiki-price{
      font-size: var(--fontSize-xxs);
    }
    .vegeota .item-price.--small p span{
      font-size: var(--fontSize-xxs);
    }
  }

  .vegeota .cv-area.--small {
    margin-top: 8px;
  }

  .vegeota .cv-area.--small .cart .add-to-cart fieldset button.button-cart span {
    font-size: var(--fontSize-xs);
  }