@charset "UTF-8";
/* freepage 共通css */
#tblLayout {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.feature {
  max-width: 900px;
  text-align: center;
  line-height: 1.4;
  font-size: 15px;
  padding: 0;
  margin: 0 auto;
  position: relative;
  /* 編集ここから */
  /*-- ランキング --*/
}

.feature * {
  font-style: normal;
  list-style: none;
  word-break: normal;
  padding: 0;
  margin: 0;	
}

.feature a {
  color: inherit;
  text-decoration: none;
}

.feature img {
  width: 100%;
  height: auto;
  margin: auto;
}

.feature .only-desktop {
  display: block !important;
}

.feature .only-mobile {
  display: none !important;
}

.feature .only-narrow {
  display: none !important;
}

@media screen and (max-width: 960px) {
  .feature {
    font-size: 12px;
  }
  .feature .only-desktop {
    display: none !important;
  }
  .feature .only-mobile {
    display: block !important;
  }
  .feature .only-narrow {
    display: block !important;
  }
}

.feature__mv {
  margin-bottom: calc(40 / 900 * 100%);
}

.feature__read {
  font-size: clamp(14px, calc(28 / 900 * 100vw), 28px);
  margin-bottom: calc(40 / 900 * 100%);
}

.feature__item {
  padding: calc(40 / 900 * 100%) calc(20 / 900 * 100%);
}

.feature__bg  {
  background-color: #FCF5E3;
}

.feature__item__inner {
  display: flex;
  align-items: center;
  gap: calc(45 / 900 * 100%);
  margin-bottom: calc(30 / 900 * 100%);
}

.feature__item__img {
  width: calc(420 / 900 * 100%);
  aspect-ratio: 420 / 374;
  flex-shrink: 0;
  overflow: hidden;
}

.feature__item__img img {
  object-fit: contain;
}

.feature__item__txt {
  flex: 1;
  min-width: 0;
}

.feature__item__logo {
  width: 25%;
  margin-bottom: calc(10 / 900 * 100%);
}

.feature__item__name {
  font-size: clamp(14px, calc(20 / 900 * 100vw), 20px);
  text-align: left;
  margin-bottom: calc(10 / 900 * 100%);
}

.feature__item__name__product {
  display: block;
  font-weight: bold;
  font-size: clamp(16px, calc(26 / 900 * 100vw), 26px);
}

.feature__item__name__detail {
  display: block;
  font-size: clamp(13px, calc(24 / 900 * 100vw), 24px);
  font-weight: bold;
  margin-bottom: calc(10 / 900 * 100%);
}

.feature__item__name__notes {
  font-size: clamp(11px, calc(18 / 900 * 100vw), 18px);
}

.feature__item__detail__price__main,
.feature__item__detail__price__tax {
  font-weight: bold;
  text-align: left;
}

.feature__item__detail__price__main {
  font-size: clamp(14px, calc(24 / 900 * 100vw), 24px);
}

.feature__item__detail__price__tax {
  font-size: clamp(11px, calc(18 / 900 * 100vw), 18px);
}

.feature__item__btn {
  width: calc(432 / 900 * 100%);
  margin: auto;
  border-radius: 50px;
  font-weight: 500;
  font-size: clamp(14px, calc(28 / 900 * 100vw), 28px);
  color: #fff;
  background-color: #FA782D;
  text-align: center;
  position: relative;
  padding: 15px 0
}

.feature__item__btn::after {
  display: inline-block;
  content: "";
  border-left: clamp(7px, calc(11 / 900 * 100vw), 11px) solid #fff;
  border-top: clamp(6px, calc(9 / 900 * 100vw), 9px) solid transparent;
  border-bottom: clamp(6px, calc(9 / 900 * 100vw), 9px) solid transparent;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.feature__contents,
.feature__item {
  margin-bottom: calc(80 / 900 * 100%);
}

.feature__ttl--style01 {
  padding: 20px;
  color: #fff;
  font-size: clamp(18px, calc(36 / 900 * 100vw), 36px);
  font-weight: bold;
  background-color: #E06427;
  margin-bottom: calc(30 / 900 * 100%);
}

.feature__list--weight .feature__list__item:last-child {
  margin-bottom: 0;
}

.feature__list__item {
  display: flex;
  align-items: center;
  gap: calc(25 / 900 * 100%);
  margin-bottom: calc(20 / 900 * 100%);
  text-align: left;
}

.feature__list__item__img,
.feature__recipe__layout__img{
  width: calc(460 / 900 * 100%);
  flex-shrink: 0;
}

.feature__list__item__txt,
.feature__list__item__title {
  flex: 1;
  min-width: 0;
  font-size: clamp(14px, calc(28 / 900 * 100vw), 28px);
  font-weight: bold;
  color: #315976;
}

.feature__txt {
  font-size: clamp(14px, calc(20 / 900 * 100vw), 20px);
}

.feature__coordinate {
  padding: calc(20 / 900 * 100%) calc(20 / 900 * 100%) calc(40 / 900 * 100%);
}

.feature__coordinate__ttl {
  font-size: clamp(14px, calc(28 / 900 * 100vw), 28px);
  font-weight: bold;
  color: #315976;
  margin-bottom: calc(20 / 900 * 100%);
}

.feature__coordinate__img {
  margin-bottom: calc(20 / 900 * 100%);
}

.feature__coordinate__item {
  text-align: left;
}

.feature__coordinate__item > li {
  text-decoration: underline;
  margin-bottom: calc(5 / 900 * 100%);
}

.feature__coordinate__item > li::before {
  content: "・";
}

.feature__recipe__title,
.feature__recipe__title--sub {
  font-size: clamp(15px, calc(30 / 900 * 100vw), 30px);
}

.feature__recipe__title {
  background-color: #74291F;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  padding: 20px;
}

.feature__recipe__layout {
  display: flex;
  justify-content: space-between;
  gap: calc(20 / 900 * 100%);
  margin: calc(30 / 900 * 100%) 0;
}

.feature__recipe__layout__txt,
.feature__recipe__txt,
.feature__recipe__txt-indent,
.feature__recipe__section__txt {
  font-size: clamp(14px, calc(24 / 900 * 100vw), 24px);
}

.feature__recipe__layout__txt {
  text-align: left;
}

.feature__recipe__title--sub {
  font-weight: bold;
  background-color: #F6D1AF;
  border-radius: 0;
  color: #000;
  padding: 10px 0;
}

.feature__recipe__txt {
  text-align: left;
  margin: calc(10 / 900 * 100%) 0;
}

.feature__recipe__space {
  margin-top: 10px;
}

.feature__recipe__A-recipe {
  display: flex;
  align-items: center;
  position: relative;
  border-left: clamp(1.5px, calc(2 / 900 * 100vw), 2px) solid #C72D18;
  margin-left: 10px;
}

.feature__recipe__A-txt {
  font-size: 20px;
  font-weight: 700;
}

.feature__recipe__A-txt > span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #C72D18;
  color: #fff;
  border-radius: 50%;
  line-height: 1.1;
  text-align: center;
}

.feature__recipe__A-txt--left {
  position: absolute;
  left: -13px;
}

.feature__recipe__A-recipe__dd {
  padding-left: 15px;
}

.feature__recipe__txt-indent {
  padding: 10px 0;
  text-align: left;
}

.feature__recipe__txt-indent > li + li {
  margin-top: 10px;
}

.feature__recipe__txt-indent > li:nth-child(n+2) {
  margin-top: 2px;
}

.feature__recipe__txt-indent--number > li:nth-child(1)::before {
  content: "\02460";
}

.feature__recipe__txt-indent--number > li:nth-child(2)::before {
  content: "\02461";
}

.feature__recipe__txt-indent--number > li:nth-child(3)::before {
  content: "\02462";
}

.feature__recipe__txt-indent--number > li:nth-child(4)::before {
  content: "\02463";
}

.feature__recipe__txt-indent--number > li:nth-child(5)::before {
  content: "\02464";
}

.feature__recipe__txt-indent--number > li:nth-child(6)::before {
  content: "\02465";
}

.feature__recipe__txt-indent--number > li:nth-child(7)::before {
  content: "\02466";
}

.feature__recipe__txt-indent--number > li:nth-child(8)::before {
  content: "\02467";
}

.feature__recipe__txt-indent--number > li:nth-child(9)::before {
  content: "\02468";
}

.feature__recipe__txt-indent--number > li::before {
  margin-right: 5px;
}

.feature__recipe__section__txt {
  text-align: left;
  margin-top: calc(10 / 900 * 100%) ;
}

.feature__list--use {
  padding: 0 calc(20 / 900 * 100%) calc(40 / 900 * 100%);
}

.feature__list__item--use {
  display: flex;
  align-items: center;
  gap: calc(20 / 900 * 100%);
  margin-bottom: calc(40 / 900 * 100%);
  text-align: left;
}

.feature__list__item__img--use {
  width: calc(520 / 900 * 100%);
  flex-shrink: 0;
}

.feature__list__item__products {
  font-size: clamp(13px, calc(24 / 900 * 100vw), 24px);
}

.feature__list__item__products a {
  color: inherit;
  text-decoration: underline;
}

.feature__list__item__products__item::before {
  content: "・";
}

.feature__list__item--use:last-child {
  margin-bottom: 0;
}

.feature__btn {
  display: block;
  width: calc(600 / 900 * 100%);
  border-radius: clamp(10px, calc(20 / 900 * 100vw), 20px);
  font-weight: bold;
  font-size: clamp(14px, calc(26 / 900 * 100vw), 26px);
  color: #fff !important;
  background-color: #315976;
  text-align: center;
  position: relative;
  padding: 15px 0;
  margin: calc(100% * 80 / 900) auto;
}

.feature__btn::after {
  content: "";
  display: block;
  width: clamp(16px, calc(26 / 900 * 100vw), 26px);
  height: clamp(16px, calc(26 / 900 * 100vw), 26px);
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.feature__btn::before {
  content: "";
  position: absolute;
  z-index: 1;
  border-left: clamp(6px, calc(10 / 900 * 100vw), 10px) solid #315976;
  border-top: clamp(5px, calc(8 / 900 * 100vw), 8px) solid transparent;
  border-bottom: clamp(5px, calc(8 / 900 * 100vw), 8px) solid transparent;
  top: 50%;
  right: calc(5% + clamp(4px, calc(6 / 900 * 100vw), 6px));
  transform: translateY(-50%);
}

.feature__ttl--style04 {
  position: relative;
  padding: 0.5em 0;
  color: #305b79;
  font-size: 30px;
  font-weight: bold;
  border: solid 2px #305b79;
  box-sizing: border-box;
  margin-bottom: calc(40 / 900 * 100%);
}

.feature__ttl--style04::before, .feature__ttl--style04::after {
  content: "";
  position: absolute;
  left: 50%;
}

.feature__ttl--style04::before {
  margin-left: -15px;
  border: 13px solid transparent;
  border-top: 13px solid #FFF;
  bottom: -25px;
  z-index: 2;
}

.feature__ttl--style04::after {
  margin-left: -17px;
  border: 15px solid transparent;
  border-top: 15px solid #305b79;
  bottom: -30px;
  z-index: 1;
}

.feature__bnr-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.feature__bnr-list > li {
  width: 49%;
  margin-bottom: calc(10 / 900 * 100%);
}

@media screen and (max-width: 960px) {
  .feature__inner {
    width: 95%;
    margin: 0 auto;
  }
	
  .feature__item__inner {
    gap: 3%;
  }

  .feature__item__img {
    width: 46%;
  }
	
  .feature__item__btn,
  .feature__btn{
    padding: 10px 0;
  }
	
  .feature__item__name__detail {
  overflow-wrap: anywhere;
  }

  .feature__ttl--style01,
  .feature__recipe__title {
    padding: 12px 0;
  }
	
  .feature__list__item__img,
  .feature__recipe__layout__img {
    width: 47%;
  }
	
  .feature__recipe__title--sub {
	padding: 6px 0;	
  }
	
  .feature__recipe__A-txt--left {
    left: -10px;
  }
	
  .feature__recipe__A-txt {
    font-size: 18px;
  }
	
  .feature__recipe__A-txt > span {
    width: 20px;
    height: 20px;
  }
	
  .feature__list__item__img--use {
    width: 52%;
  }
	
  .feature__ttl--style04 {
    font-size: 16px;
  }	
	
  .feature__ttl--style04::before {
    margin-left: -9px;
    border: 9px solid transparent;
    border-top: 9px solid #FFF;
    bottom: -18px;
  }
	
  .feature__ttl--style04::after {
    margin-left: -11px;
    border: 11px solid transparent;
    border-top: 11px solid #305b79;
    bottom: -23px;
  }
}

@media screen and (max-width: 760px) {
  .feature__recipe__A-txt {
    font-size: 14px;
  }
	
  .feature__recipe__A-txt > span {
    width: 16px;
    height: 16px;
  }
	
  .feature__recipe__A-txt--left {
    left: -8px;
  }
}