@charset "UTF-8";

/* CSS Document */

/* style */

.content {

  width: 100%;

}

.fllbox_white {

  display: inline-block;

		background: #fff;

  width: 100%;

		color:#363636;

}

.fllbox_main {

  display: inline-block;

		background: url(/floor/diy/img/bg_main.jpg) repeat top left;

  width: 100%;

		color:#f2efe6;

}

.fllbox_subcol1 {

  display: inline-block;

		background: #352f29;

  width: 100%;

		color:#f2efe6;

}

.fllbox_subcol2 {

  display: inline-block;

		background: #496481;

  width: 100%;

		color:#f0f0f0;

}

.fllbox_subcol3 {

  display: inline-block;

		background: #f2efe6;

  width: 100%;

		color:#363636;

}

.fllbox_diy {

  background: #fff;

  width: 100%;

		color:#363636;

}



.inbox_kitchen {

  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);

  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);

		padding-bottom: 3em;

  background: url(../../img/bg_cafe.jpg) repeat top left;

		color:#f0f0f0;

}

.inbox_shabby {

  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);

  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);

  background: url(../../img/bg_shabby.png) repeat top left;

		padding-bottom: 3em;

		color:#f0f0f0;

}

.inbox_vintage {

  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);

  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);

		padding-bottom: 3em;

  background: url(../../img/bg_vintage.jpg) repeat top left;

		color:#f0f0f0;

}

.inboxr_westcoast {

  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);

  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);

		padding-top: 3em;

  background: url(../../img/bg_westcoast.jpg) repeat top left;

		color:#f0f0f0;

}



.inboxr_kids {

  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);

  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);

		padding-top: 3em;

  background: url(../../img/bg_kids_sp.jpg) repeat top left;

		color:#363636;

}

/* style */

/* header */

.bg-video-wrap {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: 100vh;

  background: url(/floor/diy/img/img_main_sp.jpg) no-repeat center center/cover;

}

video {

  min-width: 100%;

  min-height: 100vh;

  z-index: 1;

}

.overlay {

  width: 100%;

  height: 100vh;

  position: absolute;

  top: 0;

  left: 0;

  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);

  background-size: 3px 3px;

  z-index: 2;

}

h1 {

  text-align: center;

  color: #fff;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  z-index: 3;

  max-width: 400px;

  width: 100%;

  height: 50px;

}



/* main */

.main-contents {

width: 100%;

}

.collabo_logo {

  display: block;

  width: 70%;

		margin:3em auto 1em auto;

}

.toptext {

  display: block;

  width: 86%;

		margin: 1.5em auto 3em auto;

		line-height: 180%;

		font-size: 1.125em;

		color: #f2efe6;

		word-break: break-all;

}



.textbox {

  width: 86%;

		margin: 5em auto;

}



.textbox h2 br {

  display: none;

}



.textbox h2 {

		font-family: Noto+Sans+JP;

		line-height: 180%;

		font-size: 1.25em;

		font-weight: 600;

		margin-bottom: 2em;

		text-align: center;

}



.textbox p {

		line-height: 190%;

		font-size: 1.015em;

		word-break: break-all;

}

.interior{

	width: 100%;

	justify-content: space-between;

	margin: 2em auto 1em auto;

}

 

.interiorMain{

	width: 100%;

}

 

.interiorSide{

	width: 100%;

	text-align: center;

}



.interiorsvgt{

	width: 30%;

	height: auto;

	margin: 1em auto 0 auto;

}

.interiorsvgb{

	width: 30%;

	height: auto;

	margin: 0 auto 1em auto;

}



.interiortxtR {

  display: block;

  width: 86%;

		margin: 1.5em auto 1.5em auto;

		line-height: 190%;

		font-size: 1.015em;

		word-break: break-all;

}



.interiortxtL {

  display: block;

  width: 86%;

		margin: 1.5em auto 1.5em auto;

		line-height: 190%;

		font-size: 1.015em;

		word-break: break-all;

}

.fllbox_slider {

		width: 100%;

		margin:0 auto 6em auto;

}

.fade {

  box-sizing: content-box;

  width: 100%;

		

}

.btn-border {

  display: block;

		margin: 0 auto 8em auto;

  max-width: 300px;

  text-align: center;

  border: 1px solid #496481;

  font-size: 16px;

  color: #496481;

  text-decoration: none;

  font-weight: bold;

  padding: 8px 16px;

  border-radius: 4px;

  transition: .4s;

}



.btn-border:hover {

  background-color: #496481;

  border-color: #496481;

  color: #FFF;

}



#page_top{

  width: 40px;

  height: 40px;

  position: fixed;

  right: 20px;

  bottom: 20px;

  background: #363636;

  opacity: 0.6;

  border-radius: 50%;

}

#page_top a{

  position: relative;

  display: block;

  width: 40px;

  height: 40px;

  text-decoration: none;

}

#page_top a::before{

  font-family: FontAwesome;

  content: '\f106';

  font-size: 20px;

  color: #fff;

  position: absolute;

  width: 20px;

  height: 20px;

  top: 0;

  bottom: 3px;

  right: 0;

  left: 0;

  margin: auto;

  text-align: center;

}