@charset "utf-8";
/* CSS Document */

/*-------------------------------
 overwrite to video container
---------------------------------*/
.videoWrap {
padding: calc(var(--rs) * 2) 0 calc(var(--fs) * 4);
background:
  repeating-linear-gradient(-45deg, transparent 0, transparent calc(var(--rs) * 1), rgb(255 255 255 / 80%) calc(var(--rs) * 1), rgb(255 255 255 / 80%) calc(var(--rs) * 1.3)),
  rgb(255 235 240 / 80%)
;
}
.video-container {
width: min(94%, 68rem);
background: none;
gap: 2%;
}
.video-container > dt {
margin-bottom: 0.5em;
color: #216fdc;
font-size: calc(var(--fs) * 2.8);
font-weight: bold;
text-shadow: 0 0 0px #fff, 0 0 2px #fff;
filter: drop-shadow(1px 1px 0px #fff) drop-shadow(2px 2px 1px rgb(212 149 184 / 80%));
}
.video-container > *:not(dt):not(.video-container__title) {
width: min(46%, 33rem);  
margin: 2% 0;
background: #fff;
box-shadow: var(--bs-cmn);
}
/*9:16のアスペクト比（縦横比）*/
.video-containerB {
  position: relative;
  width: 100%;
  /*padding-top: 56.25%;  16:9のアスペクト比（縦横比） */
  padding-top: 177.78%; /* 9:16のアスペクト比（縦横比） */
  overflow: hidden;
}
.video-containerB video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-header {
color: #333;
font-size: calc(var(--fs) * 1.6);
text-align: left;
position: relative;
}
.video-header::before {
content: "●";
margin-right: 0.25em;
}
/*アイテム情報*/
.item-info {
width: min(94%, 68rem);
padding: 0;
margin: calc(var(--rs) * 2) auto calc(var(--fs) * 2);
background: #fff;
border: 1px solid #fad4da;
box-shadow: 0 2px 5px -2px #fad4da;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.item-info img {
width: 25%;
margin: calc(var(--rs) * 1);
display: block;
flex: 0 1 25%;
}
.item-info-spec {
width: 100%;
padding: 0.5em 0;
flex: 1 1 auto;
align-self: center;
}
.spec-table {
width: 100%;
border-collapse: separate;
border-spacing: 0.5em;
font-size: calc(var(--fs) * 1.4)
}
.spec-table caption {
padding: 0.25em 0.5em;
font-size: calc(var(--fs) * 1.5);
font-weight: bold;
text-align: left;
}
.spec-table th,
.spec-table td {
padding: 0.125em 0.5em 0;
}
.spec-table th {
min-width: 5em;
background: #777;
border-radius: 3px;
color: #fff;
font-size: 87.5%;
font-weight: normal;
vertical-align: middle;
}
.link-btn {
width: min(90%, 64rem);
padding: calc(var(--fs) * 1) calc(var(--rs) * 3);
margin: 1em auto;
display: block;
}
/*アイテム使用例*/
.usage-example {
width: min(94%, 68rem);
padding: calc(var(--rs) * 2) 0;
margin: 0 auto;
background: #fff;
box-shadow: var(--bs-cmn);
display: flex;
flex-flow: row nowrap;
justify-content: center;
}