@charset "utf-8";

/*------------------------------------------------------------------------------
　Top Page
-------------------------------------------------------------------------------*/

/* Background Image
---------------------------------------------------------------------- */
body#home { background:#FFF url(../images/bg.jpg) no-repeat center top;}

@media only screen and (max-width:768px) {
body#home { background:#FFF url(../images/bg_sp.jpg) no-repeat center top;}
}

/* Visual
---------------------------------------------------------------------- */
#visual { background-color:rgba(0,0,0,0.3);}
#visual .visualInner .logo {
 width:305px; height:520px; margin:auto; padding:0; position:absolute; top:0; left:0; bottom:0;}
#visual .visualInner .text {
 width:274px; height:235px; margin:auto; padding:0; position:absolute; top:0; right:0; bottom:0; left:0;}

#visual .visualInner .scroll a {
 clear:both; margin:auto; padding-top:60px; text-align:center;
 position:absolute; right:0; bottom:10px; left:0; z-index:2; display:inline-block;
 color:#FFF; font-size:14px; text-decoration:none;
 -webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
#visual .visualInner .scroll a span {
 width:30px; height:50px; margin-left:-15px;
 position:absolute; top:0; left:50%; display:block; box-sizing:border-box;
 border:2px solid #FFF; border-radius:50px;}
#visual .visualInner .scroll a span::before {
 width:6px; height:6px; margin-left:-3px;
 position:absolute; top:10px; left:50%; content:'';
 box-sizing:border-box; border-radius:100%; background-color:#FFF;
 -webkit-animation:sdb 2s infinite; animation:sdb 2s infinite;}

@-webkit-keyframes sdb {
0% { -webkit-transform:translate(0, 0); opacity:0;}
40% { opacity:1;}
80% { -webkit-transform:translate(0, 20px); opacity:0;}
100% { opacity:0;}
}

@keyframes sdb {
0% { transform:translate(0, 0); opacity:0;}
40% { opacity:1;}
80% { transform:translate(0, 20px); opacity:0;}
100% { opacity:0;}
}

@media only screen and (max-width:1000px) {
#visual .visualInner .logo { width:200px; height:auto; top:130px; left:2%;}
}

@media only screen and (max-width:768px) {
#visual .visualInner { height:auto; padding:25px 0 65px 0;}
#visual .visualInner .logo { width:27%; height:auto; margin-bottom:25px; position:static;}
#visual .visualInner .text { width:40%; height:auto; margin-bottom:50px; position:static;}
#visual .visualInner .scroll a { padding-top:55px; bottom:-25px; font-size:13px;}
}

/* 注目の商品
---------------------------------------------------------------------- */
#productTop {
 clear:both; width:100%; margin:0; padding:0;
 background:#FFF url(../images/top/product_bg.jpg) repeat-y center top;}
#productTop:after { clear:both; display:block; content:" ";}

@-webkit-keyframes modify{
 0% { padding-top:80px; margin-top:-80px;}
 100% { padding-top:0; margin-top:0;}
}

@keyframes  modify{
 0% { padding-top:80px; margin-top:-80px;}
 100% { padding-top:0; margin-top:0;}
}

#productTop:target { -webkit-animation:modify 0.1s; animation:modify 0.1s;}

#productTop .innerBlock {
 clear:both; width:100%; max-width:1200px; margin:0 auto; padding:80px 0 60px 0; text-align:center;}
#productTop .innerBlock:after { clear:both; display:block; content:" ";}

#productTop .innerBlock h2 {
 clear:both; width:100%; margin:0 0 30px 0; padding:0; font-size:36px;}
#productTop .innerBlock h2:before {
 width:54px; height:55px; margin:-4px 30px 0 0; padding:0;
 display:inline-block; content:""; vertical-align:middle;
 background:url(../images/top/h2_bg_l.png) no-repeat left top;}
#productTop .innerBlock h2:after {
 width:54px; height:55px; margin:-4px 0 0 30px; padding:0;
 display:inline-block; content:""; vertical-align:middle;
 background:url(../images/top/h2_bg_r.png) no-repeat left top;}
#productTop .innerBlock p {
 clear:both; width:100%; margin:0 0 60px 0; padding:0; font-size:18px;}

#productTop .innerBlock .productList {
 clear:both; width:100%; margin:0; padding:0; text-align:center;
 display:-webkit-box; display:-ms-flexbox; display:flex;
 -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
 -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}

#productTop .innerBlock .productList .productBox {
 width:calc(calc(100% - calc(15px * 5)) / 4); max-width:260px; margin:0 0 20px 0; padding:0; position:relative;}
#productTop .innerBlock .productList .productBox h3 { clear:both; margin:0 auto 40px auto; padding:0;}
#productTop .innerBlock .productList .productBox .photo { margin:0 0 15px 0; padding:0;}
#productTop .innerBlock .productList .productBox p {
 clear:both; width:100%; margin:0 0 60px 0; padding:0; text-align:left; font-size:16px;}
#productTop .innerBlock .productList .productBox .btDetail {
 clear:both; margin:0; padding:0; position:absolute; right:0; bottom:0; left:0;}
#productTop .innerBlock .productList .productBox .btDetail a {
 clear:both; width:100%; height:39px; margin:0; padding:12px 12px 0 0;
 display:block; box-sizing:border-box; text-align:center;
 color:#FFF; font-size:16px; line-height:1; text-decoration:none;
 background:#2D352E url(../images/icon_arrow.png) no-repeat right 12px center;}
#productTop .innerBlock .productList .productBox .btDetail a:hover { background-color:#6C716C;}

@media only screen and (min-width:1921px) {
#productTop { background-size:100%!important;}
}

@media only screen and (max-width:1920px) {
#productTop { background-size:auto!important;}
}

@media only screen and (max-width:1200px) {
#productTop .innerBlock { width:calc( 100% - 30px );}
}

@media only screen and (max-width:768px) {
#productTop { background-size:100%!important;}
#productTop .innerBlock { padding:70px 0 40px 0;}
#productTop .innerBlock h2 { margin-bottom:25px; font-size:26px;}
#productTop .innerBlock h2:before {
 width:36px; height:36px; margin:-10px 20px 0 0; background-size:36px 36px;}
#productTop .innerBlock h2:after {
 width:36px; height:36px; margin:-10px 0 0 20px; background-size:36px 36px;}
#productTop .innerBlock p { margin-bottom:40px; font-size:16px; text-align:left;}
#productTop .innerBlock .productList { width:calc( 100% - 100px ); margin:0 auto;}
#productTop .innerBlock .productList .productBox {
 width:calc(calc(100% - calc(15px * 3)) / 2); margin-bottom:40px;}
#productTop .innerBlock .productList .productBox h3 { margin:0 auto 40px auto;}
}

@media only screen and (max-width:568px) {
#productTop .innerBlock .productList {
 width:100%; margin:0; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
#productTop .innerBlock .productList .productBox { width:100%; margin-bottom:40px;}
}

/* 施工実績
---------------------------------------------------------------------- */
#sekouTop {
 clear:both; width:100%; margin:0; padding:0;
 background:#FFF url(../images/top/sekou_bg.jpg) no-repeat center top;}
#sekouTop:after { clear:both; display:block; content:" ";}

#sekouTop .innerBlock {
 clear:both; width:100%; max-width:1200px; height:620px; margin:0 auto; padding:110px 0;
 box-sizing:border-box; color:#FFF;}

#sekouTop .innerBlock .blockL { margin:0; padding:0;}
#sekouTop .innerBlock .blockL h2 { float:left;
 min-height:400px; margin:0 60px 0 0; padding:0 30px; text-align:center;
 color:#FFF; font-size:36px; font-weight:normal; line-height:1.4;
 border-right:1px solid #FFF; border-left:1px solid #FFF;
 -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl;}

#sekouTop .innerBlock .blockC { margin:0; padding:0; width:380px; float:left;}
#sekouTop .innerBlock .blockC p { margin:40px 0; padding:0; color:#FFF; font-size:20px; font-weight:normal;}
#sekouTop .innerBlock .blockC .btDetail a { width:245px; height:45px; margin:0; padding:12px 12px 0 0;
 display:block; box-sizing:border-box; text-align:center;
 color:#FFF; font-size:19px; line-height:1; text-decoration:none; border:1px solid #FFF;
 background:url(../images/icon_arrow.png) no-repeat right 12px center;}
#sekouTop .innerBlock .blockC .btDetail a:hover { background-color:rgba(255, 255, 255, 0.2);}

#sekouTop .innerBlock .blockR { float:right; width:552px; margin:0; padding:60px 0 0 0;}
#sekouTop .innerBlock .blockR ul { margin:0; padding:0;}
#sekouTop .innerBlock .blockR ul li { float:left; margin-right:30px;}
#sekouTop .innerBlock .blockR ul li:last-of-type { margin-right:0;}

@media only screen and (min-width:1900px) {
#sekouTop { background-size:100%;}
}

@media only screen and (max-width:1200px) {
#sekouTop .innerBlock .blockL h2 { margin:0 30px 0 0; padding:0 20px; text-align:center;}
#sekouTop .innerBlock { width:calc( 100% - 30px );}
#sekouTop .innerBlock .blockR { width:30%; text-align:center; padding:0;}
#sekouTop .innerBlock .blockR ul { margin:0 auto; text-align:center;}
#sekouTop .innerBlock .blockR ul li { float:none; width:190px; margin:0 auto 15px auto; text-align:center;}
#sekouTop .innerBlock .blockR ul li img { width:100%;}
#sekouTop .innerBlock .blockR ul li:last-of-type { margin-right:auto;}
}

@media only screen and (max-width:768px) {
#sekouTop .innerBlock { height:auto; margin:0 auto; padding:40px 0;}
#sekouTop .innerBlock .blockL h2 { float:none; width:100%; height:auto; min-height:auto; min-height:initial; margin:0 0 30px 0; padding:20px 5px; font-size:30px; line-height:1.4;
 border-top:1px solid #FFF; border-right:none; border-bottom:1px solid #FFF; border-left:none;
 -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb;}
#sekouTop .innerBlock .blockC,
#sekouTop .innerBlock .blockR { float:none; clear:both; width:100%; text-align:center;}
#sekouTop .innerBlock .blockC p { margin:20px 0; font-size:16px;}
#sekouTop .innerBlock .blockC .btDetail a { width:245px; margin:0 auto;}
#sekouTop .innerBlock .blockR ul { width:70%; margin:0 auto;}
#sekouTop .innerBlock .blockR ul:after { clear:both; display:block; content:" ";}
#sekouTop .innerBlock .blockR ul li { float:left; width:calc(50% - 20px); margin:10px 10px 0 10px;}
#sekouTop .innerBlock .blockR ul li img { width:100%; max-width:180px;}
}

@media only screen and (max-width:468px) {
#sekouTop .innerBlock .blockR ul { width:100%;}
#sekouTop .innerBlock .blockR ul li img { }
}


/* 三百年前は、畳屋長兵衛と申しました。
---------------------------------------------------------------------- */
#aboutTop {
 clear:both; width:100%; margin:0; padding:0;
 background:#FFF url(../images/top/about_bg_pc.jpg) no-repeat center top;}
#aboutTop:after { clear:both; display:block; content:" ";}

#aboutTop .innerBlock {
 clear:both; width:100%; max-width:1200px; margin:0 auto; padding:0;}
#aboutTop .innerBlock:after { clear:both; display:block; content:" ";}

#aboutTop .innerBlock .box { width:100%; height:630px; box-sizing:border-box;}

#aboutTop .innerBlock .box h2 { float:right; width:145px; height:420px;
 margin:100px 0 0 50px; padding:5px 30px; color:#000; font-size:30px; line-height:1.4;
 border-right:1px solid #000; border-left:1px solid #000;
 -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl;}
#aboutTop .innerBlock .box p { float:right;
 margin:100px 0; padding:0; color:#000; font-size:18px;
 -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl;}

@media only screen and (min-width:1921px) {
#aboutTop { background-size:100%!important;}
}

@media only screen and (max-width:1920px) {
#aboutTop { background-size:auto!important;}
}

@media only screen and (max-width:1200px) {
#aboutTop .innerBlock { width:calc( 100% - 30px );}
#aboutTop .innerBlock .box h2 { margin-left:30px;}
}

@media only screen and (max-width:768px) {
#aboutTop {
 background:#FFF url(../images/top/about_bg_sp.jpg) repeat-y center top; background-size:100%!important;}
#aboutTop .innerBlock { width:100%;}
#aboutTop .innerBlock .box { width:calc( 100% - 30px ); height:auto; margin:0 auto; padding:40px 0 30px 0;}
#aboutTop .innerBlock .box h2 {
 width:100%; height:auto; margin:0 0 30px 0; padding:20px 5px; font-size:30px; line-height:1.4; text-align:center;
 border-top:1px solid #000; border-right:none; border-bottom:1px solid #000; border-left:none;
 -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb;}
#aboutTop .innerBlock .box p { margin:0 0 30px 0; font-size:16px;
 -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb;}
}

@media only screen and (max-width:568px) {
#aboutTop .innerBlock .box h2 { margin-bottom:20px; padding:15px 5px; font-size:20px;}
}