/*
<ul id="main-layout">
<li class="contents-area">

     <!-- メインコンテンツ --> 
			<div id="contents-main">
<!-- InstanceBeginEditable name="main" -->

    <div class="v-contents-in">
			<h3 class="v-title">製品映像</h3>
			<h4 class="v-subtitle">段ボール製品</h4>
      <ul class="v-contents-block">
        <li>
					<div class="v-inner">
						<div class="v-movie"><a href="gallery/environment/environment01.mp4" data-lity="data-lity"><img src="gallery/environment/environment01.jpg" alt="Iパッケージで地球環境を守れ #1 挑む段ボールのプレビュー" width="1920" height="1080" border="0" /></a></div>
						<h4 class="v-name">パッケージで地球環境を守れ<br>#1 挑む段ボール<span>3：23</span></h4>
					</div>
        </li>
*/

#main-layout {
width: auto;
}
.guide.one-column #contents-main {
padding-right: 0px;
padding-left: 0px;
max-width: none;
max-width: initial;
padding-bottom: 40px;
}
.v-contents-in {
padding: 6% 15px;
}
.bule-back {
background-color: rgba(233,243,246,1.00);
}
.v-title {
max-width: 1100px;
margin: 0px auto;
font-size: 18px;
line-height: 1.5em;
text-align: left;
font-weight: bold;
padding: 0px 0px 6%;
}
.v-subtitle {
max-width: 1000px;
margin: 0px auto;
font-size: 16px;
line-height: 1.5em;
font-weight: bold;
padding: 0px 0px 3%;
}
.v-subtitle-pad {
padding-top: 6%;
}

.v-contents-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
max-width: 1000px;
margin: 0px auto;
}
.v-contents-block li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding: 0px 0px 6%;
}
.v-contents-block li:last-child {
padding: 0px;
}
.v-contents-block .v-inner {
}

.v-contents-block .v-movie {
}
.v-contents-block .v-movie a {
position: relative;
overflow: hidden;
display: block;
}
.v-contents-block .v-movie img {
	height: auto;
	width: 100%;
	display: block;
}
.v-contents-block .v-movie a::after {
content: "";
position: absolute;
/*
top: calc(50% - 20px);
left: calc(50% - 20px);
width: 40px;
height: 40px;
*/
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image: url(../imgs/start.svg);
background-position: center center;
background-size: 55px auto;
background-repeat: no-repeat;
}
.v-contents-block .v-name {
font-size: 15px;
line-height: 1.5em;
text-align: center;
padding: 1.5% 0px 0px;
}
.v-contents-block .v-name span {
display: block;
}
.v-contents-block .v-name strong {
padding: 0px 0.4em 0px 0px;
color: rgba(255,0,0,1.00);
font-weight: normal;
}





@media print, screen and (min-width: 768px) {
.guide.one-column #contents-main {
padding-bottom: 60px;
}
.v-contents-in {
padding: 5% 25px;
}
.v-title {
font-size: 20px;
line-height: 1.5em;
padding: 0px 0px 5%;
}
.v-subtitle {
font-size: 17px;
line-height: 1.5em;
padding: 0px 0px 2.5%;
}
.v-subtitle-pad {
padding-top: 5%;
}

.v-contents-block li {
	-ms-flex-preferred-size: calc(50% - 13px);
	flex-basis: calc(50% - 13px);
padding: 0px 0px 5%;
}
.v-contents-block li:last-child,
.v-contents-block li:nth-last-child(2) {
padding: 0px;
}

.v-contents-block .v-name {
font-size: 15px;
line-height: 1.5em;
padding: 1.5% 0px 0px;
}
.v-contents-block .v-name span {
display: block;
}
.v-contents-block .v-name strong {
padding: 0px 0.4em 0px 0px;
color: rgba(255,0,0,1.00);
font-weight: normal;
}

}


@media print, screen and (min-width: 1024px) {
.guide.one-column #contents-main {
padding-bottom: 70px;
}

.v-contents-in {
padding: 30px 30px;
}
.v-title {
font-size: 24px;
line-height: 1.5em;
padding: 0px 0px 30px;
}
.v-subtitle {
font-size: 19px;
line-height: 1.5em;
padding: 0px 0px 15px;
}
.v-subtitle-pad {
padding-top: 30px !important;
}

.v-contents-block li {
	-ms-flex-preferred-size: calc(50% - 15px);
	flex-basis: calc(50% - 15px);
padding: 0px 0px 30px;
}
.v-contents-block li:last-child,
.v-contents-block li:nth-last-child(2),
.v-contents-block li:nth-last-child(3) {
padding: 0px;
}
.v-contents-block::after{
  content:"";
  display: block;
  width: calc(50% - 15px);
}
.v-contents-block .v-name {
font-size: 15px;
line-height: 1.5em;
padding: 1.5% 0px 0px;
}
.v-contents-block .v-name span {
display: block;
}
.v-contents-block .v-name strong {
padding: 0px 0.4em 0px 0px;
color: rgba(255,0,0,1.00);
font-weight: normal;
}

}


@media print, screen and (min-width: 1400px) {
.guide.one-column #contents-main {
padding-bottom: 80px;
}
.v-contents-in {
padding: 40px 0px;
}
.v-title {
font-size: 23px;
line-height: 1.5em;
padding: 0px 0px 30px;
}
.v-subtitle {
font-size: 19px;
line-height: 1.5em;
padding: 0px 0px 15px;
}
.v-subtitle-pad {
padding-top: 40px !important;
}

.v-contents-block li {
	-ms-flex-preferred-size: calc(50% - 25px);
	flex-basis: calc(50% - 25px);
padding: 0px 0px 35px;
}
.v-contents-block li:last-child,
.v-contents-block li:nth-last-child(2),
.v-contents-block li:nth-last-child(3) {
padding: 0px;
}
.v-contents-block::after{
  content:"";
  display: block;
  width: calc(50% - 25px);
}
.v-contents-block .v-name {
font-size: 15px;
line-height: 1.5em;
padding: 1.5% 0px 0px;
}
.v-contents-block .v-name span {
display: block;
}
.v-contents-block .v-name strong {
padding: 0px 0.4em 0px 0px;
color: rgba(255,0,0,1.00);
font-weight: normal;
}

}




.pmovie {
	padding: 0px 0px 15px;
}
.pmovie video {
	height: auto;
	width: 100%;
}
.pmovie.size475 video {
	max-width: 475px;
}
.pmovie.size480 video {
	max-width: 480px;
}
.pmovie.size640 video {
	max-width: 640px;
}


.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}