@charset "utf-8";

b,
.tit,
.colorsample .labelTxt,
.colorsample .labelTxt2{ font-weight: 500; font-family: 'Noto Sans JP',"MS PGothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "MS Pゴシック", serif;}
sup { vertical-align: baseline;}
.fc01{ color: #004F93;}
.fc02{ color: #E72B33;}
.fc03{ color: #00AAC8;}
.fc04{ color: #F7B118;}
.fc05{ color: #EFB389;}
.fc06{ color: #A1A0A0;}
.fc07{ color: #cc33ff;}

.lowerpage .mv{ background-image: url(../img/product/mv_product.png);}
.row .tit{ /*font-size: 21px;*/ font-size: 23px; margin-bottom: 10px; vertical-align: baseline; line-height: 1.4em;}
.row >div{ align-items: center;}
.row .tit .fs-s{ /*font-size: 14px;*/ font-size: 16px; font-weight: inherit;}
.row .tit .ls-n{ letter-spacing: -0.1em;}
.row .tit img{ max-height: 22px;}
.row:nth-child(n+2){ margin-top: 40px; padding-top: 40px; border-top: 1px solid #B5B5B6;}
.row .txtBox:nth-child(n+2){ margin-top: 40px; padding-top: 40px; border-top: 1px solid #B5B5B6;}
.row .colL{ flex-basis: 55%; order: 1;}
.row .colR{ flex-basis: calc(45% - 40px); order: 2;}
.row .txtBox p:nth-of-type(n+2){ margin-top: 1em;}
.movieBox{ text-align: center;}
.movieBox .thumbBox img{ /*max-width: 180px;*/ width: 90%}

.bdBu{ border: 1px solid #00A9C8; padding: 20px; border-radius: 20px; position: relative;}
.colorsample{ margin-top: 20px;}
.colorsample .labelTxt,
.colorsample .labelTxt2{ /*font-size: 16px;*/ font-size: 18px; line-height: 1em;}
.colorsample div,
.colorsample .bdBu,
.colorsample .bdBu div{ /*align-items: flex-end;*/ flex-basis: calc((100% - 20px)/2);}
.colorsample .thumbBox{ flex-basis: calc(45% - 10px);}
.colorsample .linkBox{ flex-basis: 55%; align-self: flex-end;}
.colorsample .linkBox p{ /*font-size: 12px;*/ font-size: 14px; font-family: 'Noto Sans JP',"MS PGothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "MS Pゴシック", serif;}
.colorsample .linkBtn{ margin-top: 5px; line-height: 1em;}
.colorsample .linkBtn a{ display: inline-block; line-height: 1em;}
/* .colorsample .linkBtn a{ display: block; line-height: 1em; border: 1px solid #000; padding: 5px 20px 5px 5px; font-size: 12px; background: url(../img/common/arrow-right.svg) no-repeat right 5px bottom 7px / 20px;} */
.newTit{ position: relative; padding-left: 50px;}
.newTit .new{ position: absolute; top: 0; left: 0; color: #fff; background: #00A9C8; line-height: 1em; display: inline-block; padding: 3px 5px; font-size: 12px;}


.modalBtn:hover{ opacity: 0.7; cursor: pointer;}
.modalContent{ visibility: hidden; opacity: 0; transition: all ease-in-out 0.3s; position: fixed; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; padding: 30px; box-sizing: border-box; z-index: 10;}
.modalContent.open{ visibility: visible; opacity: 1;}
.modalContent::after{ content: '×'; color: #fff; display: inline-block; line-height: 1em; font-size: 40px; position: fixed; top: 10px; right: 10px;}
.modalInner{ display: flex; justify-content: center; align-items: center!important; height: 100%;}
.modalInner img{ max-height: calc(100vh - 60px); max-width: calc(100vw - 60px); /*height: 100%; width: 100%;*/}

.colorsample .bdBu div.modalInner,
.colorsample .bdBu div.modalInner>div{ flex-basis: 80%; width: 100%;}
/* .movieWrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movieWrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
} */
.movieBox .linkBtn img {
  max-height: 20px;
}

.row-09 .txt .fs-s{ font-size: calc(1em - 2px);}


@media only screen and (min-width: 768px) {
  /* .colorsample{ position: relative;} */
  .colorsample .labelTxt,
  .colorsample .labelTxt2{ position: absolute; top: 20px;}
  .colorsample .labelTxt{ left: calc(20% + 20px);}
  .colorsample .labelTxt2{ left: calc(43% + 20px);}
}

@media only screen and (max-width: 768px) {
  .lowerpage .mv{ background-image: url(../img/product/mv_product_sp.png);}
  .row:nth-child(n+2){ margin-top: 20px; padding-top: 20px;}
  .row .tit { font-size: 18px;}
  .row .tit img { max-height: 18px;}
  .bdBu{ padding: 10px; border-radius: 10px;}
  .colorsample div,
  .colorsample .bdBu,
  .colorsample .bdBu div { flex-basis: calc((100% - 5px)/2);}
  .colorsample .bdBu div.modalInner,
  .colorsample .bdBu div.modalInner>div{ flex-basis: 100%; width: 100%;}
  .colorsample .labelTxt,
  .colorsample .labelTxt2 { /*font-size: 13px;*/ font-size: 15px; margin-bottom: 10px;}
  .row-05 .flexbox.bdBu .thumbBox{    padding-top: 15%;}
  .row-09 .colorsample div{ flex-wrap: wrap;}
  .row-09 .colorsample .txtBox{ flex-basis: 100%; margin-bottom: 15px;}
  .row .colR { padding: 0 40px;}
}