@charset "UTF-8";

/* ============================== */
/*  MATERIAL PAGE*/
/* ============================== */
.material-page .hero-image{
	 background: none;
}
.material-page .page-title h1{
	padding:0;
	background: none;
}
.material-page .global-footer{
	margin-top:0;
}
.material-page main{
	position:relative;
	display: block;
	margin-left:auto;
	margin-right:auto;
	max-width: 1400px;
}
.material-page.wall main,
.material-page.floor main{
    margin-top: 0;
}
.material-page.wall .local-nav,
.material-page.floor .local-nav{
	padding-top:70px;
}
.material-page.wall .local-nav ul,
.material-page.floor .local-nav ul{
	display: flex;
	justify-content: space-between;
	width:90%;
	max-width:300px;
	margin:0 auto 20px;
}
.material-page.wall .local-nav ul li,
.material-page.floor .local-nav ul li{
	width:47%;
}
.material-page.wall .local-nav ul li img,
.material-page.floor .local-nav ul li img{
	width: 100%;
}
.material-page.wall .local-nav ul a,
.material-page.floor .local-nav ul a,
.material-page.wall .local-nav ul span,
.material-page.floor .local-nav ul span{
	background:#231815;
	display: block;
	text-align: center;
	padding: 8% 14%;
}
.material-page.wall .local-nav ul a,
.material-page.floor .local-nav ul a{
	background:#a6a3a1;
	transition: 300ms;
}
.material-page.wall .local-nav ul a:hover,
.material-page.floor .local-nav ul a:hover{
	background:#231815;
}
@media screen and (min-width: 768px), print {
.material-page .breadcrumb{
	margin-top:0;
}	
.material-page.wall .local-nav,
.material-page.floor .local-nav{
	padding-top:0;
}
.material-page.wall .local-nav ul,
.material-page.floor .local-nav ul{
	max-width:none;
	width:300px;
	margin:-26px 10px 15px auto;
	padding:0;
}
}
@media screen and (min-width: 992px), print {
.material-page.wall .local-nav,
.material-page.floor .local-nav{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
.material-page.wall .local-nav ul,
.material-page.floor .local-nav ul{
	width:320px;
	margin:-30px 0 20px auto;
}
}
.material-page .maj,
.material-page .maj-s{
	width:100%;
	padding-left:35px;
	padding-right:10px;
	padding-top:3em;
	padding-bottom: 6em;
	border-top:5px solid #231815;
}
.material-page .section-wrapper1 .maj-s{
	display: flex;
	position: relative;
}

@media screen and (min-width: 768px), print {
.material-page .maj,
.material-page .section-wrapper1{
	width:100%;
	padding-left:45px;
	padding-right:10px;
	padding-top:4em;
	padding-bottom: 7em;
	border-top:1.230769230769231em solid #231815;
}
.material-page .section-wrapper1{
	display: flex;
	padding-top:0;
	padding-bottom:0;
	border-top:1.230769230769231em solid #231815;
}
.material-page .section-wrapper1 .maj-s{
	border-top:none;
	padding-top:4em;
	padding-bottom: 7em;
}
.material-page .section-wrapper1 .maj-s{
	width: calc(50% + 1px);
	border-left:2px solid #231815;
	padding-left:5%;
	padding-left: 4.583333333333333%;
	padding-right:0;
	position: relative;
}
.material-page .section-wrapper1 .maj-s:first-child{
	width: calc(50% - 1px);
	border-left:none;
	padding-left:0;
	padding-right:5%;
	padding-right: 4.583333333333333%;
}
}
@media screen and (min-width: 992px), print {
.material-page .maj,
.material-page .section-wrapper1{
	width:100%;
	padding-left:calc(50% - 430px);
	padding-right:calc(50% - 480px);
}
}
@media screen and (min-width: 1200px), print {
.material-page .maj,
.material-page .section-wrapper1{
	padding-left:calc(50% - 480px);
	padding-right:calc(50% - 480px);
}
}

/* FLOOR,WALL side-copy */
.material-page .side-copy{
	display: block;
	width: 25px;
	position: absolute;
	top:0;
	left:0;
	height:100%;
	z-index: 3;
}
.material-page.wall .side-copy{
	background: linear-gradient(rgba(6,3,0,0.9) 0%, rgba(6,3,0,0.65) 70%, rgba(6,3,0,0.2) 100%), url("./imgs/bg_mat-w_side.jpg") repeat-y;
	background-size:100%;
}
.material-page.floor .side-copy{
	background: linear-gradient(rgba(6,3,0,0.9) 0%, rgba(6,3,0,0.65) 70%, rgba(6,3,0,0.2) 100%), url("./imgs/bg_mat-f_side.jpg") repeat-y;
	background-size:100%;
}
.material-page .side-copy p{
	width:50%;
	margin:3.5em auto 0;
}
.material-page .side-copy + .pagetop-image{
	margin-left:25px;
	width:calc(100% - 25px);
}
@media screen and (min-width: 768px), print {
.material-page .side-copy{
	width: 35px;
}
.material-page .side-copy p{
	width:44%;
	max-width:21px;
}
.material-page .side-copy + .pagetop-image{
	margin-left:35px;
	width:calc(100% - 35px);
}
}
@media screen and (min-width: 992px), print {
.material-page .side-copy{
	width: 50px;
}
.material-page .side-copy + .pagetop-image{
	margin-left:50px;
	width:calc(100% - 50px);
}
}
@media screen and (min-width: 1200px), print {
.material-page .side-copy{
	width: 100px;
}
.material-page .side-copy + .pagetop-image{
	margin-left:100px;
	width:calc(100% - 100px);
}
}
/* FLOOR,WALL pagetop-image */
.material-page .pagetop-image{
	display:flex;
}
.material-page .pagetop-image figure{
	width:50%;
	position: relative;
}
.material-page .pagetop-image figure figcaption{
	font-size: 1.1rem;
	color:#fff;
	position: absolute;
	bottom:0;
	right:0;
	padding:0.5em 0.5em;
}
.material-page .pagetop-image figure:first-child figcaption{
	right:auto;
	left:0;
}
@media screen and (min-width: 768px), print {
.material-page .pagetop-image figure figcaption{
	padding:1em 2em;
}
}
/* FLOOR,WALL page-title */
.material-page .page-title{
	font-size:1.3rem;
	margin:2.5em 10px 0 35px;
	text-align: center;
	position: relative;
	z-index: 2;
	padding-bottom:4em;
}
.material-page .page-title .en{
	width:38.5rem;
	display: block;
	font-size: 4.0rem;
	margin:0 auto;
}
.material-page .page-title .ja{
	width:11.6em;
	width:25.7rem;
	display: block;
	font-size: 2.2rem;
	margin:0.2em auto 0;
}
.material-page .page-title .lead{
	padding-left:1em;
	padding-right:1em;
}
@media screen and (min-width: 768px), print {
.material-page .page-title{
	margin:-2em 10px 0 45px;
}
}
@media screen and (min-width: 992px), print {
.material-page .page-title{
	margin:-2em 10px 0 55px;
}
}
@media screen and (min-width: 1200px), print {
.material-page .page-title{
	margin:-1.7em auto 0;
}
}
.material-page .maj h2{
	text-align: center;
	margin:0 0 0.85em;
}
.material-page .maj p.eng{
	text-align: center;
	margin:0 0 0.65em;
}
.material-page #flooring h2 img{
	width:57rem;
}
.material-page #floor-tile h2 img{
	width:35.9rem;
}
.material-page #floor-tile h2 img{
	width:35.9rem;
}
.material-page #bolon h2 img{
	width:100%;
}
.material-page #nendo h2 img{
	width:100%;
}
.material-page #ecocarat h2 img{
	width:32.0rem;
}
.material-page #ecocarat .eng img{
	width:28.4rem;
}
.material-page #tile h2 img{
	width:27.4rem;
}
.material-page #tile .eng img{
	width:11.3rem;
}
.material-page #thewall h2 img{
	width:35.2rem;
}
.material-page .maj .intro{
	text-align: center;
	font-size:1.5rem;
	margin:0 0 1.5em;
}
.material-page main .example{
	margin-top:3em;
}
.material-page main .example li{
	margin-top:2em;
}

@media screen and (min-width: 768px), print {
.material-page main .example li{
	margin-top:0;
}	
.material-page .example.ph-gl3 ul,
.material-page .example.ph-gl2 ul{
	display: flex;
	justify-content: space-between;
}
.material-page .example.ph-gl3 li{
	width:31.25%;
}
.material-page .example.ph-gl2 li{
	width:47.708333333333333%;
}
.material-page .example.ph-gl3-2{
	position: relative;
	width:100%;
}
.material-page .example.ph-gl3-2 li:first-child{
	width: 65.416666666666667%;
}
.material-page .example.ph-gl3-2 li:nth-child(2){
	width: 31.25%;
	position: absolute;
	top:0;
	right:0;
}
.material-page .example.ph-gl3-2 li:nth-child(3){
	width: 31.25%;
	position: absolute;
	bottom:0;
	right:0;
}
}
.material-page .example figure{
	position: relative;
}
.material-page .example figcaption{
	font-size: 1.1rem;
	margin-top:0.2em;
	text-align: right;
}
.material-page figcaption .brand{
	font-size: 1.35rem;
	padding:0  0 0 0.5em;
	font-weight: normal;
}
.material-page .example figcaption .overlay{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
}
.material-page #thewall .example figcaption .overlay{
	bottom:3em;
	left:auto;
	right:2em;
	width:29.166666666666667%;
}
.material-page #flooring .example figcaption .overlay{
	bottom:2em;
	left:50%;
	width:65.645514223194748%;
	transform: translateX(-50%);
}
.material-page #floor-tile .example figcaption .overlay{
	bottom:2.1em;
	left:1em;
	width:40.764331210191083%;
}
.material-page #bolon .example figcaption .overlay{
	bottom:3.5em;
	left:50%;
	width:81.967213114754098%;
	transform: translateX(-50%);
}
.material-page #nendo .example figcaption .overlay{
	bottom:2.6em;
	left:50%;
	width:65.983606557377049%;
	transform: translateX(-50%);
}
.material-page .example .text h3{
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	letter-spacing: -0.05em;
	font-size: 2.2rem;
	margin:0.1em 0 0.3em;
}
.material-page .example .text p{
	text-align: center;
	padding:0 3em 0;
}
.material-page main .maj-s .example{
	margin-top:0.5em;
	position: relative;
}
.material-page .side1{
	width:56.091954022988506%;
}
.material-page .side2{
	width:43.908045977011494%;
	padding-left:5.977011494252874%;
	padding-top:3em;
	padding-bottom: 1.672rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.material-page .manufacturer img{
	width:66.666666666666667%;
	display: block;
	margin-bottom:1em;
}
.material-page .manufacturer figcaption{
	font-size:1.2rem;
}

/* ============================== */
/*  MATERIAL TOP PAGE*/
/* ============================== */
.material-page.top main{
	margin-top:50px;
}
@media screen and (min-width: 768px), print {
.material-page.top main{
	margin-top:0;
}
}
.material-page.top .page-title{
	margin:0;
	position: absolute;
	top:5%;
	left:20%;
	width:60%;
	text-align: center;
}
.material-page.top .page-title .en{
	width:100%;
	display: block;
	font-size:1.0rem;
}
.material-page.top .page-title .ja{
	width:49.6341463414634%;
	display: block;
	font-size:1.0rem;
	margin:1.5vw auto 0;
}
.material-page.top .local-nav{
	position: absolute;
	top:16.5%;
	left:0;
	width:100%;
}
.material-page.top nav.local-nav ul{
	margin:0 30px;
	display: flex;
	justify-content: space-between;
}
.material-page.top .local-nav li{
	width:46%;
}
.material-page.top .local-nav li a{
	background: #231815;
	display: block;
	text-align: center;
	padding:8% 14%;
}
@media screen and (min-width: 768px), print {
.material-page.top .local-nav{
	top:19.5%;
}
.material-page.top nav.local-nav ul{
	width:52%;
	margin:0 auto;
}
}
@media screen and (min-width: 992px), print {
.material-page.top .local-nav li a{
	transition: 300ms;
}
.material-page.top .local-nav li a:hover{
	background-color: #453c39;
}	
}
.material-page.top .statement{
	position: absolute;
	top:35%;
	left:30px;
	width:calc(100% - 30px);
	background: rgba(255,255,255,0.5);
	padding:10px;
}
.material-page.top .statement h3{
	width:100%;
	padding-bottom:3px;
	border-bottom:1px solid #94252a;
	margin-bottom:0.25em;
}
.material-page.top .statement p.author{
	width:52.853598014888337%;
	margin-bottom:1em;
}
.material-page.top .statement p.p1{
	font-size:1.6rem;
	line-height: 1.7;
}
@media screen and (min-width: 768px), print {
.material-page.top .statement{
	top:38%;
	left:67%;
	width:29.4032152185352%;
	background: none;
	padding:0;
	}
.material-page.top .statement p.p1{
	font-size: 1.21vw;
}
}
@media screen and (max-width: 767px){
.material-page.top .hero-image{
	overflow-x: hidden;
}
.material-page.top .hero-image img{
	width:120%;
	max-width: none;
	position: relative;
	left:-20%;
}
}
.material-page.top .photo-caption{
	position: absolute;
	bottom:15px;
	right: 30px;
	color: #fff;
	font-size: 0.8rem;
}
.material-page.top .photo-caption strong{
	font-size: 1.35rem;
	padding:0 0.5em;
	font-weight: normal;
}