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

html {scroll-behavior:smooth;}

body,header,footer,section,div,img,p,ul,li,h1,h2,h3 {
    margin: 0;
    padding: 0;
}


p {font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt" 1;}
/* font-weight: 400,500,700; */


img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    line-height:0;
	margin:0 auto;}

#contents {
    width: auto;
    /*overflow: hidden;*/
    padding: 0;}

.clearfix:after {
    display: block;
    clear: both;
    content: "";}

.pc{display: block;}
.sp{display: none !important;}
@media screen and (max-width: 750px){
    .pc{display: none !important;}
    .sp{display: block !important;}
}

ul {list-style: none;
    margin-left: 0;
    padding-left: 0;}
li {list-style: none;}

a {text-decoration:none;color:inherit;}



/* ローディング画面*/
#loading_skd {
    z-index:999;position:fixed;
	width:100%;height:100vh;
	background-color:rgba(26,26,26,1);
	display:flex;
	/* 水平方向中央寄せ */
	justify-content: center;
	/* 垂直方向中央寄せ */
	align-items: center;
}
.spinner {
	width:20px;height:20px;
	border:2px solid #fff;
	border-top:2px solid transparent;
	border-radius:50%;
	animation:spin 0.3s linear 0s infinite;
}
@keyframes spin {
	from {transform: rotate(0);}
	to{transform: rotate(359deg);}
}


/*画面遷移アニメーション*/
.splashbg{display:none;}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display:block;
    content:"";
    position:fixed;
	z-index:999;
    width:100%;
    height:100vh;
    top:0;
	left:0;
    transform:scaleY(0);
    background:#fff;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:0.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}
@keyframes PageAnime{
	0% {transform-origin:bottom;transform:scaleY(1);}
	100% {transform-origin:bottom;transform:scaleY(0);}
}


/* メインコンテンツ出現 */
/* はじめは透過0に */
.wrap {opacity:0;}
/* bodyにappearクラスがついたら出現 */
body.appear .wrap {opacity:1;}
/* メインコンテンツ出現 */





/* script用 */
.para {
	opacity: 0;
    -webkit-transform: translateY(2em);
	transform: translateY(2em);
	transition: 1s ease-out;
}
.para.on {
	opacity: 1;
    -webkit-transform: translateY(0);
	transform: translateY(0);
}




.totop {width:50px;position:fixed;
	z-index:-1;opacity:0;transition:0.2s;
	right:20px;bottom:60px;}
.totop a {display:inline-block;
	transition: all 0.3s ease;}
.totop a:hover {opacity:0.3;}
@media screen and (max-width: 750px){
	.totop {width:8vw;right:2.66vw;bottom:35.5vw;}
	.totop a:hover {opacity:1;}
}



/* ヘッダー */
header {background:url("../img/title_bg_pc.jpg") no-repeat;
	background-size:cover;
    background-position:center;}
header div {max-width:1000px;margin:0 auto;}
@media screen and (max-width: 750px){
	header {background:none;}
	header div {width:100%;margin:0 auto;}
}



/* リード */
.sec_A {padding:250px 0;}
@media screen and (max-width: 1000px){
	.sec_A {padding:25vw 0;}
}
@media screen and (max-width: 750px){
	.sec_A {padding:29.33vw 0;}
}


.lead {max-width:1000px;margin:0 auto;text-align:center;}
.lead_title {max-width:640px;margin:0 auto 100px;}
@media screen and (max-width: 1000px){
	.lead_title {margin:0 auto 10vw;}
}
@media screen and (max-width: 750px){
	.lead {width:100%;}
	.lead_title {width:100%;margin:0 auto 13.33vw;}
}


.lead_txt {color:#000;
	font-weight:400;font-size:20px;
	line-height:2.8;letter-spacing:0.02em;}
.lead_txt span {font-size:16px;}
@media screen and (max-width: 1000px){
	.lead_txt {font-size:2vw;}
	.lead_txt span {font-size:1.6vw;}
}
@media screen and (max-width: 750px){
	.lead_txt {font-size:3.59vw;line-height:2.1;}
	.lead_txt span {font-size:2.66vw;}
}



/* イメージ画像 */
.img_bg {max-width:1000px;height:780px;margin:0 auto;}
@media screen and (max-width: 1000px){
	.img_bg {height:78vw;}
}
@media screen and (max-width: 750px){
	.img_bg {width:100%;height:auto;}
}
.img_bg_01 {
	background:url("../img/img_bg_01_pc.jpg") no-repeat;
	background-size:cover;
    background-position:center;}
.img_bg_02 {
	background:url("../img/img_bg_02_pc.jpg") no-repeat;
	background-size:cover;
    background-position:center;}
@media screen and (max-width: 750px){
	.img_bg_01 {background:none;}
	.img_bg_02 {background:none;}
}



/* 特徴 */
.sec_bg {background:#000;}

.frm_A {max-width:1100px;margin:0 auto;}
.frm_A_inner {width:90.9%;margin:0 auto;}
@media screen and (max-width: 750px){
	.frm_A {width:100%;}
	.frm_A_inner {width:86.66%;margin:0 auto;}
}


.usp_top_01 {width:414px;margin-left:0;}
.usp_top_02 {width:536px;margin-left:0;}
.usp_top_03 {width:531px;margin-left:0;}
.usp_txt {color:#fff;
	font-weight:400;font-size:16px;line-height:2;}
@media screen and (max-width: 1000px){
	.usp_txt {font-size:1.6vw;}
}
@media screen and (max-width: 750px){
	.usp_top_01 {width:100%;}
	.usp_top_02 {width:100%;}
	.usp_top_03 {width:100%;}
	.usp_txt {font-size:2.93vw;line-height:1.8;}
}


.usp_inner {width:100%;margin:0 auto;
	display:flex;justify-content:space-between;}
.usp_inner li {width:45%;}
@media screen and (max-width: 750px){
	.usp_inner {width:100%;margin:0 auto;display:block;}
	.usp_inner li {width:100%;}
}


.pd_bottom_A {padding-bottom:250px;}
.pd_bottom_B {padding-bottom:50px;}
.pd_bottom_C {padding-bottom:80px;}
.pd_bottom_D {padding-bottom:150px;}
.pd_bottom_E {padding-bottom:120px;}
@media screen and (max-width: 1000px){
	.pd_bottom_A {padding-bottom:25vw;}
	.pd_bottom_B {padding-bottom:5vw;}
	.pd_bottom_C {padding-bottom:8vw;}
	.pd_bottom_D {padding-bottom:15vw;}
	.pd_bottom_E {padding-bottom:12vw;}
}
@media screen and (max-width: 750px){
	.pd_bottom_A {padding-bottom:29.33vw;}
	.pd_bottom_B {padding-bottom:5.33vw;}
	.pd_bottom_C {padding-bottom:8vw;}
	.pd_bottom_D {padding-bottom:26.66vw;}
	.pd_bottom_E {padding-bottom:20vw;}
}


/* カタログ */
.catalog_top {max-width:856px;margin-left:0;}
.catalog_txt {color:#000;
	font-weight:400;font-size:16px;line-height:2;}
@media screen and (max-width: 1000px){
	.catalog_txt {font-size:1.6vw;}
}
@media screen and (max-width: 750px){
	.catalog_top {width:100%;}
	.catalog_txt {font-size:2.93vw;line-height:1.8;}
}


.catalog_inner {width:655px;margin:0 auto;
	display:flex;justify-content:space-between;}
.catalog_inner li {width:42.3%;display:block;}
.btn_catalog {width:57.7%;margin-left:0;}
.btn_catalog a {display:block;
	transition: all 0.2s ease;}
.btn_catalog a:hover {opacity:0.3;}
@media screen and (max-width: 750px){
	.catalog_inner {width:56%;margin:0 auto;display:block;}
	.catalog_inner li {width:100%;}
	.btn_catalog {width:100%;}
	.btn_catalog a:hover {opacity:1;}
}




/* 素材-特徴 */
.frm_B {max-width:1440px;margin:0 auto;}
.frm_B {
	background:url("../img/sozai_img_pc.jpg") no-repeat;
	background-size:46.52%;
    background-position:top right;}
@media screen and (max-width: 750px){
	.frm_B {width:100%;margin:0 auto;}
	.frm_B {background:none;}
}

.sozai {width:100%;margin:0 auto;
	display:flex;justify-content:space-between;}
.sozai li {width:45%;}
@media screen and (max-width: 750px){
	.sozai {width:100%;display:block;}
.sozai li {width:100%;}
}


.sozai_li_A {margin-top:236px;}
.sozai_li_B {margin-top:735px;}
@media screen and (max-width: 1440px){
	.sozai_li_A {margin-top:16.38vw;}
	.sozai_li_B {margin-top:51.04vw;}
}
@media screen and (max-width: 750px){
	.sozai_li_A {margin-top:0;}
	.sozai_li_B {margin-top:0;}
}


.sozai_top {width:92.45%;}
@media screen and (max-width: 750px){
	.sozai_top {width:100%;}
}

.sozai_txt_cap {color:#000;
	font-weight:400;font-size:13px;
	line-height:1.6;letter-spacing:-0.05em;}
@media screen and (max-width: 1100px){
	.sozai_txt_cap {font-size:1.18vw;}
}
@media screen and (max-width: 750px){
	.sozai_txt_cap {font-size:2.66vw;
		line-height:1.75;letter-spacing:0.05em;}
}




/* TEXTURE DESIGN */
.txtr_top {width:632px;margin:0 auto;}
@media screen and (max-width: 750px){
	.txtr_top {width:100%;}
}


.txtr_spec_list {width:100%;margin:0 auto;
	display:flex;justify-content:space-between;
	color:#fff;}
.txtr_spec_list li {width:27.4%;}
@media screen and (max-width: 750px){
	.txtr_spec_list {width:80%;margin:0 auto;
		display:block;}
	.txtr_spec_list li {width:100%;}
	.txtr_spec_list li:not(:last-child) {
		margin-bottom:20vw;}
}


.txtr_no {width:26px;margin-left:0;margin-bottom:20px;}
@media screen and (max-width: 1000px){
	.txtr_no {margin-bottom:2vw;}
}
@media screen and (max-width: 750px){
	.txtr_no {width:8%;margin-bottom:4vw;}
}


.txtr_code {font-weight:700;font-size:27px;
	margin:20px 0;}
@media screen and (max-width: 1100px){
	.txtr_code {font-size:2.45vw;margin:1.81vw 0;}
}
@media screen and (max-width: 750px){
	.txtr_code {font-size:6vw;margin:4vw 0;}
}


.txtr_spec {width:100%;
	display:flex;justify-content:space-between;
	font-weight:400;font-size:12px;line-height:1.6;
	text-align:left;}
.txtr_spec_A {width:51.2%;border-right:1px solid #fff;}
.txtr_spec_B {width:48.8%;}
.txtr_spec_B p {margin-left:8px;}
.txtr_spec_price {font-weight:700;}
@media screen and (max-width: 1100px){
	.txtr_spec {font-size:1.09vw;}
	.txtr_spec_B p {margin-left:0.72vw;}
}
@media screen and (max-width: 750px){
	.txtr_spec {font-size:3.06vw;line-height:1.8;}
	.txtr_spec_A {width:54%;}
	.txtr_spec_B {width:46%;}
	.txtr_spec_B p {margin-left:4vw;}
}


.txtr_spec_txt_A {color:#fff;
	font-weight:400;font-size:16px;
	line-height:1.7;}
.txtr_spec_txt_A p {width:100%;
	margin:0 auto 150px;padding:20px 0 20px 30px;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;}
@media screen and (max-width: 1100px){
	.txtr_spec_txt_A {margin:0 auto 13.63vw;
		font-size:1.45vw;}
	.txtr_spec_txt_A p {padding:1.81vw 0 1.81vw 2.72vw;}
}
@media screen and (max-width: 750px){
	.txtr_spec_txt_A {font-size:3.33vw;line-height:1.8;}
	.txtr_spec_txt_A p {margin:0 auto 20vw;
		padding:5.33vw 0;}
}



.txtr_shiyou {width:100%;margin:0 auto;display:block;}
.txtr_shiyou_top {background:#fff;
	display:flex;justify-content:space-between;
	padding:20px 30px;}
.txtr_spec_txt_B {color:#000;
	font-size:18px;font-weight:500;}
@media screen and (max-width: 1100px){
	.txtr_shiyou_top {padding:1.81vw 2.72vw;}
	.txtr_spec_txt_B {font-size:1.63vw;}
}
@media screen and (max-width: 750px){
	.txtr_shiyou_top {background:#fff;display:block;
	padding:3.06vw 4vw;}
	.txtr_shiyou_top ul {display:flex;
		justify-content:space-between;}
	.txtr_spec_txt_B {font-size:4vw;}
	.txtr_spec_txt_E {color:#000;text-align:left;
		font-size:3.06vw;font-weight:400;}
}



.txtr_spec_cap_box {border:1px solid #fff;padding:20px 30px;}
.txtr_spec_txt_C {color:#fff;
	font-size:18px;font-weight:400;line-height:1.9;}
@media screen and (max-width: 1100px){
	.txtr_spec_cap_box {padding:1.81vw 2.72vw;}
	.txtr_spec_txt_C {font-size:1.63vw;}
}
@media screen and (max-width: 750px){
	.txtr_spec_cap_box {padding:5.33vw 4vw;}
	.txtr_spec_txt_C {font-size:3.33vw;line-height:1.8;}
}


.txtr_spec_cap_A {width:100%;margin:65px auto 0;}
.txtr_spec_txt_D {color:#fff;
	font-size:13px;font-weight:400;line-height:2;}
@media screen and (max-width: 750px){
	.txtr_spec_cap_A {margin:20vw auto 0;}
	.txtr_spec_txt_D {font-size:3.33vw;line-height:1.8;}
}



.line_A {width:170px;margin:0 auto;border:1px solid #fff;}
@media screen and (max-width: 750px){
	.line_A {width:22.66vw;}
}


/* 施工・採用 */
.sekou_top {width:353px;margin-left:0;}
.txtr_spec_cap_B {width:100%;margin:25px auto 0;}
@media screen and (max-width: 750px){
	.sekou_top {width:100%;}
	.txtr_spec_cap_B {margin:6.66vw auto 8vw;}
}

/* 仕様表 */
.table_top {width:100%;margin:0 auto;}


/* 仕様表 pc */
.fixed-table-col {
	max-width:1000px;
	overflow:scroll;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
	color:#fff;}
.fixed-table-col * {box-sizing: border-box;}

.fixed-table-col > table {border-spacing: 0;width:1000px;}

.fixed-table-col table th, .fixed-table-col table td {background:#222;}

.fixed-table-col table tr:not(:last-child) th, .fixed-table-col table tr:not(:last-child) td {
	border-bottom:1px solid #fff;}

.fixed-table-col table th, .fixed-table-col table td:not(:last-child) {
	border-right:1px solid #fff;}

.fixed-table-col table tr:not(:first-child) td:not(:last-child) {
	text-align:right;}
.fixed-table-col table tr:not(:first-child) td:last-child {
	text-align:center;}

.fixed-table-col table th {width:120px;}
.td-A {width:120px;}
.fixed-table-col table tr:not(:first-child) .td-A p {margin-right:10px;}
.td-B {width:90px;}
.fixed-table-col table tr:not(:first-child) .td-B p {margin-right:10px;}
.td-C {width:120px;}
 .fixed-table-col table tr:not(:first-child) .td-C p {margin-right:10px;}
.td-D {width:70px;}

.fixed-table-col table th:nth-child(1) {
	background-color:#000;
	position:sticky;left:0;}

 .fixed-table-col table tr:first-child {
	font-weight:500;font-size:12px;line-height:1.3;
	height:50px;text-align:center;}

 .fixed-table-col table tr:not(:first-child) {
	font-weight:400;font-size:14px;line-height:1.3;
	height:40px;}


/* 仕様表 sp */
@media screen and (max-width: 750px){
	.table_box_sp {width:100%;margin:0 auto 7.33vw;}
	.table_top_sp {width:100%;margin:0 auto;
		background:#fff;color:#000;
		font-weight:500;font-size:4vw;
		padding:2vw 0 2vw 3.33vw;
	}
	.table_sp {width:100%;margin:0 auto;
		color:#fff;font-weight:400;
		font-size:2.93vw;
		border-collapse: collapse;}
	.table_sp td {width:50%;}
	.table_sp td p {margin-left:3.33vw;padding:1.86vw 0;}
	.table_sp td p span {font-size:2.53vw;}
	.table_sp tr {border-bottom: 1px solid #fff;}
	.table_sp tr:last-child {border-bottom: 2px solid #fff;}
	.table_sp .td_1 {border-right: 1px solid #fff;}
	
}




/* サンプル・資料請求 */
.sec_B {padding:250px 0 120px;}
@media screen and (max-width: 1000px){
	.sec_B {padding:25vw 0 12vw;}
}
@media screen and (max-width: 750px){
	.sec_B {padding:29.33vw 0 12.66vw;}
}

.sample_top {width:690px;margin-left:0;margin-bottom:200px;}
@media screen and (max-width: 750px){
	.sample_top {width:100%;margin-bottom:24.66vw;}
}

.sample_list {width:410px;margin:0 auto 250px;}
.sample_list ul {width:100%;margin:80px auto 0;
	display:flex;justify-content:space-between;}
.sample_list ul li:first-child {with:65.5%;}
.sample_list ul li:last-child {with:34.5%;}
.sample_list ul li a {display:block;
	transition: all 0.2s ease;}
.sample_list ul li a:hover {opacity:0.3;}
@media screen and (max-width: 750px){
	.sample_list {width:56.5%;margin:0 auto 23.33vw;}
	.sample_list ul {margin:0 auto;display:block;}
	.sample_list ul li:first-child {with:100%;}
	.sample_list ul li:last-child {with:53.2%;
		margin-left:0;margin-right:46.8%;}
	.sample_list ul li a:hover {opacity:1;}
}



.line_B {width:100%;margin:0 auto;border:1px solid #000;}



/* フッター */
footer {margin-bottom:50px;}
@media screen and (max-width: 750px){
	footer {margin-bottom:6.66vw;}
}

.ft_btn {width:500px;margin:0 auto;
	display:flex;justify-content:space-between;}
.ft_btn li:first-child {width:131px;}
.ft_btn li:last-child {width:319px;}
.ft_btn li a {display:block;
	transition: all 0.2s ease;}
.ft_btn li a:hover {opacity:0.3;}
@media screen and (max-width: 750px){
	.ft_btn {width:86.66%;margin:0 auto;}
	.ft_btn li:first-child {width:25.8%;}
	.ft_btn li:last-child {width:63.0%;}
	.ft_btn li a:hover {opacity:1;}
}

.copyright {margin:50px auto 0;color:#000;
	font-weight:400;font-size:12px;
	text-align: center;}
@media screen and (max-width: 750px){
	.copyright {margin:6.66vw auto 0;font-size:2.66vw;}
}