/* カスタマイズ用CSS */
/*.ec-productRole__description br + br + br + br + br + br + br{*/
/*  display: none;*/
/*}*/
.table-content {
  box-sizing: border-box;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  font-size: 12px;
}
.tablescroll {
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 100%;
  background: whitesmoke;
}
.tablescroll td,
th {
  white-space: nowrap;
  padding: 5px 8px;
}
.tablescroll td,
th,
tr {
  border: 1px solid darkgray;
}
.tablescroll th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gainsboro;
  z-index: -1;
}
.tablescroll th {
  position: sticky;
  top: 0;
  left: 0;
  background: gainsboro;
  border-left: none;
  border-right: none;
}
.youtube_short {
  width: 70%; /* 伸縮する横幅 */
  max-width: 400px; /* 最大の横幅 */
  margin: auto; /* 画面の中央に配置 */
}
.youtube_short iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: 100%;
}
.ec-borderedDefs dd {
  line-height: 1.7;
  margin-bottom: 0;
}
.ec-borderedDefs dl {
  padding: 8px 0 8px;
}
.ec-borderedDefs dt {
  padding: 0;
}
.ec-productRole {
  line-height: 2 !important ;
}
#page_help_guide .ec-role {
  line-height: 2 !important ;
}
@media screen and (max-width: 767px) {
  .sp-none {
    display: none!important;
  }

  .ec-layoutRole__header {
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.14));
  }
  .ec-layoutRole__header.hide {
    transform: translateY(0%)
    ;background: rgba(255,255,255,0);
    transition: all 0.5s 0s ease;
  }
  .ec-layoutRole__header.appear {
    transform: translateY(0%);
    ;background: rgba(255,255,255,1);
    transition: all 0.5s 0s ease;
  }
  .ec-layoutRole__header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    background-color: #fff;
  }
  .ec-layoutRole__contents {
    padding-top: 80px;
  }
  .ec-headerNaviRole.search{
    padding: 9px 20px!important;
  }

  /* .ec-headerNav .ec-headerNav__itemLink{
    display: block;
  } */
}
.ec-headerNaviRole .ec-headerNaviRole__right {
  width: 100%;
}
h1 .m-0 {
  margin: 0;
}
@media only screen and (min-width: 768px) {

  .pc-none {
    display: none!important;
  }
  .pb-0 {
    padding-bottom: 0px;
  }
  .pt-0 {
    padding-top: 0px;
  }
  .pl-0 {
    padding-left: 0px !important;
  }
  .pr-0 {
    padding-right: 0px !important;
  }
  .ec-layoutRole__header {
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.14));
  }
  .ec-layoutRole__header.hide {
    transform: translateY(-50%);
    transition: all 0.5s 0s ease;
  }
  .ec-layoutRole__header.appear {
    transform: translateY(0%);
    transition: all 0.5s 0s ease;
  }
  .ec-layoutRole__header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    background-color: #fff;
  }
  .ec-layoutRole__contents {
    padding-top: 160px;
  }
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.ec-headerNaviRole .ec-headerNaviRole__left {
  max-width: 200px;
}
.youtube {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.product-description{
    font-size: 13px;
    margin-bottom: 0.5rem;
}
.form-label{
    margin-bottom: 0.3rem;
}
.ec-productRole__actions .ec-input{
    margin-bottom: 16px;
}
a{
    word-break: break-all;
}

.bannerlabel {
  /* font-family: "M PLUS Rounded 1c", sans-serif; */
  text-align: center;
  font-size: 12px;
  display: block;
  margin: 0 auto;
  margin-bottom: 5px;
}
.bannerlabel .bannerlabel-item {
  display: inline-block;
  line-height: 2rem;
  padding: 9px 7px 7px 7px;
  margin-bottom: 10px;
  border-radius: 10px;
  vertical-align: -10px;
  color: #fff;
  width: 100%;
}
.bannerlabel .bannerlabel-item .font-large {
  font-weight: 900;
  font-size: 1.8rem;
}
.grd-red {
  background: red;
  background: linear-gradient(49deg, red 0%, #ff00e4 100%);
}
.grd-blue {
  background: #1500ff;
  background: linear-gradient(49deg, #1500ff 0%, #8c00ba 100%);
}
.grd-green {
  color: #333 !important;
  background: rgb(255, 193, 72);
  background: linear-gradient(
    49deg,
    rgba(255, 193, 72, 1) 0%,
    rgba(255, 217, 69, 1) 69%,
    rgba(234, 255, 97, 1) 100%
  );
}

.font-large-m{
    font-size: 1.8rem;
    font-weight: 900;
}


.ec-categoryRole .commingsoon{
 position: relative;
}
.ec-categoryRole .commingsoon::before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: gainsboro;
  opacity: 90%;
}
.ec-categoryRole .commingsoon::after{
  position: absolute;
  top: 5px;
  left: 12px;
  content: "comming soon";
  display: inline-block;
  width: 170px;
  height: 30px;
  color: #000;
  font-size: 1.3em;
}