@charset "utf-8";

/* 
INDIVIDUAL STYLING
=======================  */
main .container#products-contents {
  padding-top:100px;
}
main .container#products-contents .content-wrap {
  padding-top:0;
}

@media screen and (min-width: 321px) and (max-width: 540px) {
  main .container#products-contents {
    padding-top:80px;
  }
}
@media screen and (max-width: 320px) {
  main .container#products-contents {
    padding-top:80px;
  }
}

.content-wrap_header .breadcrumb p {
  font-size: var(--base-size_12p);
}
.content-wrap_header .breadcrumb p a {
  color: var(--XRD_blandkeycolor);
}

.content-wrap_header h1{
  text-align: center;
  font-size: var(--base-size_2h);
  font-weight: 600;
  margin-bottom: 53px;
}
.content-wrap_header h1 span{
  display: var(--dsp-block);
  font-size: var(--base-size_14p);
  color: var(--XRD_blandkeycolor);
}
.content-wrap_header p.blog-data {
  font-size: var(--base-size_1);
  line-height: 1.0;
}

/* メインセクション　タイトル */
.container.products-detail #products.content-wrap .content-wrap_inner h1 {
  font-size: var(--base-size_1h);
  margin-bottom: 30px;
}
/* メインセクション　タイトル */

/* サブセクション */
.content-wrap.feature .content-wrap_header {
  margin-bottom: 30px;
}
.content-wrap.feature .content-wrap_header::after {
  content: "";
  display: block;
  height: 2px; /* 線の太さ */
  background-image: linear-gradient(to right, var(--XRD_blandkeycolor) 0%,  var(--XRD_blandkeycolor) 5%,  var(--com_color_f) 5%, var(--com_color_f) 5.2%, var(--com_color_8) 5.2%, var(--com_color_8) 100%);
}
.content-wrap.feature .content-wrap_header h2 {
  font-size: var(--base-size_1h);
  font-weight: 400;
  margin-bottom: var(--base-size_10p);
}


/* content-wrap_inner */
.content-wrap.feature .content-wrap_inner {
  margin-bottom: var(--mt45);
  display: var(--dsp-flex);
  justify-content: space-between;
}
.content-wrap.feature .content-wrap_inner.col3,
.content-wrap.feature .content-wrap_inner.col2 {
  padding: 0 20px;
}

/* col3 */
.content-wrap.feature .content-wrap_inner.col3 .col {
  width: 27.2727%;
}
.content-wrap.feature .content-wrap_inner.col3 .col figure {
  width: 100%;
}
.content-wrap.feature .content-wrap_inner.col3 .col figure img {
  width: 100%;
  margin-bottom: var(--mb15);
}
.content-wrap.feature .content-wrap_inner.col3 .col figure figcaption h2 {
  font-weight: 500;
  margin-bottom: var(--mb10);
}
.content-wrap.feature .content-wrap_inner.col3 .col figure figcaption h2 .num {
  font-size: var(--base-size_2);
  color: var(--XRD_blandkeycolor);
  margin-right: 10px;
}
.content-wrap.feature .content-wrap_inner.col3 .col figure figcaption h2 .ttl {
  font-size: 22px;
}
.content-wrap.feature .content-wrap_inner.col3 .col figure figcaption ul {
  min-height: 116px;
  padding: 15px;
  border: 1px solid var(--com_color_18);
  border-radius: 6px;
  background: var(--com_color_f);
}
.content-wrap.feature .content-wrap_inner.col3 .col figure figcaption li {
  font-size: var(--base-size_14p);
  line-height: 1.5;
  position: relative;
  padding-left: 1em;
}
.content-wrap.feature .content-wrap_inner.col3 .col figure figcaption li::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--com_color_b_333);
  content: "";
  position: absolute;
  top: .75em;
  left: .5em;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 820px) {
  .content-wrap.feature .content-wrap_inner.col3 .col {
    width: 30%;
  }
}
@media screen and (max-width: 819px) {
  .content-wrap.feature .content-wrap_inner {
    margin-bottom: var(--mb45);
    display: var(--dsp-block);
  }
  .content-wrap.feature .content-wrap_inner.col3 .col {
    width: 100%;
    margin-bottom: var(--mb40);
  }
  .content-wrap.feature .content-wrap_inner.col3 .col:last-child {
    margin-bottom: 0;
  }
  .content-wrap.feature .content-wrap_inner.col3 .col figure figcaption ul {
    height: auto;
    min-height: auto;
  }
}
/* col3 */

/* col2 */
.content-wrap.feature .content-wrap_inner.col2 {
  flex-wrap: wrap;
}
.content-wrap.feature .content-wrap_inner.col2 .col {
  width: 47%;
  display: var(--dsp-flex);
  justify-content: space-between;
}
.content-wrap.feature .content-wrap_inner.col2 .col:nth-child(1),
.content-wrap.feature .content-wrap_inner.col2 .col:nth-child(2) {
  margin-bottom: 50px;
}
.content-wrap.feature .content-wrap_inner.col2 .col .cap,
.content-wrap.feature .content-wrap_inner.col2 .col figure {
  width: 48%;
}
.content-wrap.feature .content-wrap_inner.col2 .col .cap h2 { 
  font-weight: 500;
  margin-bottom: var(--base-size_12p);
}
.content-wrap.feature .content-wrap_inner.col2 .col .cap h2 .num {
  font-size: var(--base-size_2);
  color: var(--XRD_blandkeycolor);
  margin-right: 10px;
}
.content-wrap.feature .content-wrap_inner.col2 .col .cap h2 .ttl {
  font-size: 22px;
}
.content-wrap.feature .content-wrap_inner.col2 .col .cap p {
  font-size: var(--base-size_14p);
  line-height: 1.7;
}
.content-wrap.feature .content-wrap_inner.col2 .col figure img {
  width: 100%;
}

@media screen and (max-width: 820px) {
  .content-wrap.feature .content-wrap_inner.col2 .col {
    width: 48%;
  }
}
@media screen and (max-width: 819px) {
  .content-wrap.feature .content-wrap_inner.col2 .col {
    width: 100%;
    display: var(--dsp-block);
    margin-bottom: var(--mb50);
  }
  .content-wrap.feature .content-wrap_inner.col2 .col .cap,
  .content-wrap.feature .content-wrap_inner.col2 .col figure {
    width: 100%;
  }
  .content-wrap.feature .content-wrap_inner.col2 .col figure {
    margin-top: var(--mt15);
  }
}
/* col2 */

.content-wrap.feature .btn-centor {
  text-align: center;
}
.content-wrap.feature .btn-centor p {
  font-size: .8rem;
  line-height: 1.0;
  margin-bottom: 7px;
}
.content-wrap.feature .btn-centor .btn-wrap {
  justify-content: center;
}

.content-wrap.feature .content-wrap_inner.specification {
  padding: 0 10px;
}

.content-wrap.feature .content-wrap_inner.specification figure {
  width: 34.5454%;
}
.content-wrap.feature .content-wrap_inner.specification figure img {
  width: 100%;
}
.content-wrap.feature .content-wrap_inner.specification div {
  width: 61.1818%;
}
.content-wrap.feature .content-wrap_inner.specification table {
  width: 100%;
  word-break: break-all; 
}
.content-wrap.feature .content-wrap_inner.specification table thead th {
  padding-bottom: 15px;
  font-size: var(--base-size_1q);
  text-align: center;
}
.content-wrap.feature .content-wrap_inner.specification table tbody {
  font-size: var(--base-size_14p);
  line-height: 1.5;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.content-wrap.feature .content-wrap_inner.specification table tbody th {
  position: relative;
  padding: 15px 20px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
  background-color: var(--com_color_9);
  font-weight: normal;
}
.content-wrap.feature .content-wrap_inner.specification table tbody th::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid white;
  pointer-events: none;
}
.content-wrap.feature .content-wrap_inner.specification table tbody td {
  padding: 15px 20px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: var(--base-size_14p);
  color: var(--com_color_b_333);
}
.content-wrap.feature .content-wrap_inner.specification table tbody td {
  background-color: var(--com_color_10);
}
.content-wrap.feature .content-wrap_inner.specification table tbody td span.detail {
  display: var(--dsp-block);
  margin-left: 1em;
}

@media screen and (min-width: 821px) {
  td .sp-only {
    display: var(--dsp-none);
  }
}
@media screen and (max-width: 820px) {
  .content-wrap.feature .content-wrap_inner.specification figure {
    width: 25%;
  }
  .content-wrap.feature .content-wrap_inner.specification div {
    width: 70%;
  }
  .content-wrap.feature .content-wrap_inner.specification table tbody th,
  .content-wrap.feature .content-wrap_inner.specification table tbody td {
    padding: 10px;
    font-size: var(--base-size_12p);
  }
  .content-wrap.feature .content-wrap_inner.specification table tbody td span.detail {
    margin-left: .5em;
  }
  td .sp-only {
    display: var(--dsp-block);
  }
}
@media screen and (max-width: 819px) {
  .content-wrap.feature .content-wrap_inner.specification figure {
    width: 100%;
    margin-bottom: var(--mb15);
  }
  .content-wrap.feature .content-wrap_inner.specification div {
    width: 100%;
  }
  .content-wrap.feature .content-wrap_inner.specification table thead th {
    font-size: var(--base-size_tq);
  }
}
/* content-wrap_inner */

/* 
INDIVIDUAL STYLING
=======================  */