@charset "UTF-8";

.list-label-color::after {
  display: block;
  clear: both;
  content: "";
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup .title {
  font-family: "Clarimo UD PE DemiBold", "UD Shin Go Conde90 DB", sans-serif;
  font-weight: bold;
}

select,
button {
  cursor: pointer;
}

.form-search-products {
  width: 100%;
}

.form-search-products .form-select-outer {
  background: #f6f6f6;
  padding: 10px;
}

.form-search-products .form-select {
  background-color: #fff;
  width: 100%;
  padding: 4px;
  border: 1px solid #d7d7d7;
}

.form-search-products .form-select:disabled {
  color: #d7d7d7;
  cursor: default;
}

.form-search-products .form-select option:disabled {
  color: #ccc;
}

.badge-required {
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #d92231;
  background-color: #fff;
  position: relative;
  top: -2px;
  margin: 0 0 0 9px;
  padding: 0 9px 1px;
  border: 1px solid #d92231;
}

.list-label-color > li {
  text-align: center;
  position: relative;
  float: left;
  width: 15.958%;
  margin: 0 0 .8504% .8504%;
}

.list-label-color > li:nth-child(6n+1) {
  margin-left: 0;
}

.list-label-color .hidden-radio {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.list-label-color .hidden-radio:focus + label {
  opacity: .6;
}

.list-label-color .hidden-radio:checked + label {
  color: #fff;
  background-color: #707070;
  opacity: 1;
}

.list-label-color .hidden-radio:checked + label .label-name {
  font-weight: bold;
}

.list-label-color label {
  background-color: #dcdcdc;
  display: block;
  height: 100%;
  padding: 23px 10px;
}

.list-label-color label .label-name {
  display: block;
}

.list-label-color label:hover {
  opacity: .6;
}

.list-label-color label::after {
  background-repeat: no-repeat;
  display: inline-block;
  width: 100%;
  max-width: 137px;
  height: 26px;
  margin-top: 10px;
  content: "";
}

.list-label-color label.label-type-01::after {
  background-color: #fff;
}

.list-label-color label.label-type-02::after {
  background-image: url("/contents/tepra/images/img-index-label-01.png");
}

.list-label-color label.label-type-03::after {
  background-image: url("/contents/tepra/images/img-index-label-02.png");
}

.list-label-color label.label-type-04::after {
  background-image: url("/contents/tepra/images/img-index-label-03.jpg");
}

.list-label-color label.label-type-05::after {
  background-image: url("/contents/tepra/images/img-index-label-04.jpg");
}

.list-label-color label.label-type-06::after {
  background-image: url("/contents/tepra/images/img-index-label-05.jpg");
}

.list-label-color label.label-type-07::after {
  background-image: url("/contents/tepra/images/img-index-label-06.jpg");
}

.list-label-color label.label-type-08::after {
  background-image: url("/contents/tepra/images/img-index-label-07.jpg");
}

.list-label-color label.label-type-09::after {
  background-image: url("/contents/tepra/images/img-index-label-08.jpg");
}

.list-label-color label.label-type-10::after {
  background-image: url("/contents/tepra/images/img-index-label-09.jpg");
}

.list-label-color label.label-color-01-01::after {
  background-color: #f15b66;
}

.list-label-color label.label-color-01-02::after {
  background-color: #ffdd02;
}

.list-label-color label.label-color-01-03::after {
  background-color: #5da9dd;
}

.list-label-color label.label-color-01-04::after {
  background-color: #f073ad;
}

.list-label-color label.label-color-01-05::after {
  background-color: #f6821f;
}

.list-label-color label.label-color-01-06::after {
  background-color: #38bb9c;
}

.list-label-color label.label-color-01-07::after {
  background-color: #9e76b4;
}

.list-label-color label.label-color-01-08::after {
  background-color: #d2d3d5;
}

.list-label-color label.label-color-01-09::after {
  background-color: #333;
}

.list-label-color label.label-color-02-01::after {
  background-color: #ed1846;
}

.list-label-color label.label-color-02-02::after {
  background-color: #00ae7b;
}

.list-label-color label.label-color-02-03::after {
  background-color: #026abf;
}

.list-label-color label.label-color-02-04::after {
  background-color: #000;
}

.list-label-color label.label-color-03-01::after {
  background-color: #ed1a47;
}

.list-label-color label.label-color-03-02::after {
  background-color: #ee3c88;
}

.list-label-color label.label-color-03-03::after {
  background-color: #f15941;
}

.list-label-color label.label-color-03-04::after {
  background-color: #e8f229;
}

.list-label-color label.label-color-03-05::after {
  background-color: #48c43f;
}

.list-label-color label.label-color-04-01::after {
  background-color: #e88280;
}

.list-label-color label.label-color-04-02::after {
  background-color: #a8cf42;
}

.list-label-color label.label-color-04-03::after {
  background-color: #57b1e3;
}

.list-label-color label.label-color-04-04::after {
  background-color: #fff;
}

.list-label-color label.label-color-04-05::after {
  background-color: #f6b92d;
}

.list-label-color label.label-color-05-01::after {
  background-image: url("/contents/tepra/images/img-index-label-color-01.jpg");
}

.list-label-color label.label-color-05-02::after {
  background-image: url("/contents/tepra/images/img-index-label-color-02.jpg");
}

.list-label-color label.label-color-05-03::after {
  background-image: url("/contents/tepra/images/img-index-label-color-03.jpg");
}

.list-label-color label.label-color-05-04::after {
  background-image: url("/contents/tepra/images/img-index-label-color-04.jpg");
}

.list-label-color label.label-color-06-01::after {
  background-color: #e6b85c;
}

.list-label-color label.label-color-06-02::after {
  background-color: #c9cfdd;
}

.list-label-color label.label-color-07-01::after {
  background-color: #fff;
}

.list-label-color label.label-color-07-02::after {
  background-color: #f15b66;
}

.list-label-color label.label-color-07-03::after {
  background-color: #ffdd02;
}

.list-label-color label.label-color-07-04::after {
  background-color: #38bb9c;
}

.list-label-color label.label-color-07-05::after {
  background-color: #5da9dd;
}

.list-label-color label.label-color-07-06::after {
  background-color: rgba(255, 255, 255, .6);
}

/* 利用シーン別おすすめテプラ */
.chart-area {
  position: relative;
  width: 100%;
}

.chart-area .chart-inner {
  background: url("/contents/tepra/images/grp-index-01.png") no-repeat;
  background-position: center center;
  background-size: contain;
  max-width: 940px;
  height: 0;
  margin: 0 auto;
  padding-top: 34.8275%;
}

.chart-area .chart-area-map {
  position: absolute;
  top: 0;
  left: 0;
}

.chart-area .chart-area-map.positon-map01 {
  top: 39.1%;
  left: 77.75%;
  width: 11.46%;
}

.chart-area .chart-area-map.positon-map02 {
  top: 23%;
  left: 58.36%;
  width: 12.67%;
}

.chart-area .chart-area-map.positon-map03 {
  top: 5.15%;
  left: 79.87%;
  width: 9.9%;
}

.chart-area .chart-area-map.positon-map04 {
  top: 46.42%;
  left: 40.34%;
  width: 12.8%;
}

.chart-area .chart-area-map.positon-map05 {
  top: 58.68%;
  left: 43.62%;
  width: 15.5%;
}

.chart-area .chart-area-map.positon-map06 {
  top: 80.78%;
  left: 43.01%;
  width: 11.37%;
}

.chart-area .chart-area-map.positon-map07 {
  top: 72.05%;
  left: 34.74%;
  width: 11.46%;
}

.chart-area .chart-area-map.positon-map08 {
  top: 66%;
  left: 24.22%;
  width: 10.17%;
}

.chart-area .chart-area-map.positon-map09 {
  top: 51.57%;
  left: 26.37%;
  width: 10.17%;
}

.chart-area .chart-area-map.positon-map10 {
  top: 44.05%;
  left: 15.25%;
  width: 10.17%;
}

.chart-area .chart-area-map.positon-map11 {
  top: 32.73%;
  left: 38.1%;
  width: 11.4%;
}

.chart-area .chart-area-map.positon-map12 {
  top: 24.52%;
  left: 73.36%;
  width: 11.4%;
}

.chart-area .chart-area-map.positon-map13 {
  top: 10%;
  left: 62.1%;
  width: 14.05%;
}

.chart-area .chart-area-map.positon-map14 {
  top: 52%;
  left: 59%;
  width: 18.05%;
}

.chart-area .chart-area-map .inner {
  position: relative;
}

.chart-area .chart-area-map .chart-area-text {
  position: relative;
  display: block;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer {
  position: absolute;
  z-index: 1;
  bottom: 100%;
  display: none;
  box-sizing: border-box;
  max-width: 200px;
  margin-bottom: 13px;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-01 {
  left: -66%;
  width: 150.3759%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-02 {
  left: -60%;
  width: 136.0544%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-03 {
  left: -80%;
  width: 183.4862%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-04 {
  left: -58%;
  width: 198.0198%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-05 {
  left: -48%;
  width: 160%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-06 {
  left: -66%;
  width: 151.5151%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-07 {
  left: -66%;
  width: 150.3759%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-08 {
  left: -75%;
  width: 172.4137%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-09 {
  left: 5%;
  width: 169.4915%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-10 {
  left: 5%;
  width: 169.4915%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-11 {
  left: -68%;
  width: 157.4803%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-12 {
  left: -70%;
  width: 157.4803%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer.map-14 {
  left: 30%;
  min-width: 105%;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup {
  background-color: #fff;
  position: relative;
  z-index: 2;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 5% 7.5%;
  border: 1px solid #01916d;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup::before {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -12px;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  content: "";
  border-width: 14px 6px 0 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -14px;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 13px;
  margin: 0 auto;
  content: "";
  border-width: 14px 6px 0 6px;
  border-style: solid;
  border-color: #01916d transparent transparent transparent;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup .title {
  font-size: 14px;
  color: #01916d;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup .title > em {
  font-family: inherit;
  font-weight: inherit;
}

.chart-area .chart-area-map .chart-area-text + .popup-outer .popup .sub {
  font-size: 12px;
}

.chart-area .chart-area-map .chart-area-text:hover + .popup-outer,
.chart-area .chart-area-map .chart-area-text:focus + .popup-outer {
  display: block;
}

.box-01.lp-blue {
  border-color: #20a7c9;
}

.box-01.lp-blue .hdg {
  color: #fff;
  background-color: #20a7c9;
}

.btn-wrapper.lp-btn-submit > .btn-01 .lp-btn-submit-img {
  vertical-align: middle;
}

/*
 * JSウィジェット
 */
.js-enable .js-form-search-products .js-show-search-target {
  display: none;
}

.js-enable .js-form-search-products .js-show-search-target.is-current {
  display: block;
}