@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* 共通 */
/*---------------------------------------*/
.areaInner{
width:90%;
max-width:980px;
margin:0 auto;
position:relative;
}
.areaBase{
margin:0 auto 90px;
overflow:hidden;
}
@media screen and (max-width:640px){
.areaBase{
margin:0 auto 40px;
}
}
/* 縦字 */
.tate{
position: relative;
width:1em;
line-height: 1.0;
float:right;
padding:0 2px;
margin:0 8px;
text-align:center;
}
@media screen and (max-width:980px){
.tate{
font-size:100%;
margin:0 5px;
}
}
#keyvisualArea .tate{
background:#d4bf1a;
color:#fff;
}
.tate .half{
display:block;
width:1em;
height:1em;
margin:0;
}
.tate .half.rote{
-webkit-transform: translateY(0) rotate(90deg) scale(1, -1);
transform: translateY(0) rotate(90deg) scale(1, -1);
line-height: 0.95;
}
.tate .half.ten{
height:0.85em;
line-height:0;
width: 1.6em;
text-align:right;
margin-top:-2px;
}
.tate .half.small{
height: 1em;
line-height:0.75;
width: 1.15em;
text-align:right;
}
.tate .half.space{
height:0.4em;
line-height:0.75;
width: 1.15em;
text-align:right;
}
/* ボタン */
.btn a{
width:290px;
margin:0 auto;
border:1px solid #d4bf1a;
background:#d4bf1a;
text-align:center;
height:30px;
line-height:30px;
font-size:114%;
display:block;
}
@media screen and (max-width:640px){
.btn a{
width:100%;
font-size:9pt;
}
}
.btn a:hover{
background:#fff;
}
.btn a .btn-inner{
position:relative;
}
.btn a .icon-arrow{
position:absolute;
top:50%;
right:-25px;
line-height:0;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin  0.3s ease;
}
.btn a:hover .icon-arrow{
right:-27px;
}
/* タイトル */
.areaTtl{
font-size:185.7%;
margin-bottom:45px;
line-height:1.3;
color:#5a4650;
letter-spacing:2px;
}
@media screen and (max-width:640px){
.areaTtl{
font-size:13pt;
margin-bottom:25px;
letter-spacing:-0.025em;
}
}
.areaTtl small{
display:block;
}
.areaTtl .line{
width:70px;
height:2px;
background:#d4bf1a;
margin:20px 0 0;
}
.areaTtl.txtCenter .line{
margin:20px auto 0;
}
/* fix-TopArea */
#TopArea{
width:100%;
height:500px;
margin:120px 0 0; 
}
@media screen and (max-width:980px){
#TopArea{
height:200px;
margin:65px 0 0; 
}
}
.bgtop{
width:100%;
background-position:top center;
height:100%;
background-repeat:no-repeat;
background-size:cover;
}
.bgslide {
background-attachment:fixed;
}
@media screen and (max-width:980px){
.bgslide {
background-attachment:scroll;
}
}

#bg-about{ 
background-image:url(../images/page/bg-about.jpg);
}
#bg-cleaning{ 
background-image:url(../images/page/bg-cleaning.jpg);
}
#bg-reform{ 
background-image:url(../images/page/bg-reform.jpg);
}
#bg-sb-cleaning{ 
background-image:url(../images/page/bg-sb-cleaning.jpg);
}
#bg-sb-repair{ 
background-image:url(../images/page/bg-sb-repair2.jpg);
}
#bg-key{ 
background-image:url(../images/page/bg-key.jpg);
}
#bg-embroidery{ 
background-image:url(../images/page/bg-embroidery.jpg);
}
#bg-recycle{ 
background-image:url(../images/page/bg-recycle.jpg);
}
#bg-contact{ 
background-image:url(../images/page/bg-contact.jpg);
}
#TopArea .areaTtl{
color:#fff;
padding-top:230px;	
}
@media screen and (max-width:980px){
#TopArea .areaTtl{
padding-top:85px;	
}
}
/* pageContent */
.pageContent{
position:relative;
}
.pageContent .ttlArea{
position:absolute;
top:0;
left:0;
width:290px;
}
@media screen and (max-width:980px){
.pageContent .ttlArea{
position:static;
width:100%;
}
.pageContent .ttlArea .areaTtl{
text-align:center;
}
.pageContent .ttlArea .areaTtl .line{
margin:20px auto 0;
}
}
.pageContent .mainArea{
margin-left:290px;
}
@media screen and (max-width:980px){
.pageContent .mainArea{
width:100%;
margin:0;
float:none;
}
}
/* menupage共通 */
.menupage{
margin-top:-148px;
}
.menupage .menuTtl{
margin: -120px auto 90px;
padding-top: 120px;
}
.menupage .menuTtl .areaTtl{
font-size:214%;
}
@media screen and (max-width:640px){
.menupage .menuTtl .areaTtl{
font-size:13pt;
}
}
.menupage .menuTtl .menuLogo{
font-size:146px;
color:#d4bf1a;
text-align:center;
line-height:1;
margin-bottom:30px;
}
@media screen and (max-width:640px){
.menupage .menuTtl .menuLogo{
font-size:120px;
}
}
.menupage .menuTtl .note{
font-size:143%;
text-align:center;
margin-bottom:20px;
}
@media screen and (max-width:640px){
.menupage .menuTtl .note{
font-size:11pt;
}
}
.menupage .menuTtl .note .color{
font-size:80%;
color:#be001a;
line-height:1.7;
margin-top:10px;
display:inline-block;
}
@media screen and (max-width:640px){
.menupage .menuTtl .note .color{
font-size:9pt;
}
}
.menupage .menuTtl .note .small{
font-size:70%;
}
@media screen and (max-width:640px){
.menupage .menuTtl .note .small{
font-size:9pt;
}
}
.menupage .menuTtl .note .astarisk{
font-size:50%;
vertical-align:top;
}
.menupage .contentSubTtl{
font-size: 143%;
margin-bottom:20px;
text-align: center;
color:#5a4650;
}
@media screen and (max-width:640px){
.menupage .contentSubTtl{
font-size:12pt;
}
}
.menupage .areaA{
padding:90px 0 1px;
background:#faf8e7;
}
@media screen and (max-width:640px){
.menupage .areaA{
padding:40px 0 1px;
}
}
.menupage .areaB{
padding:90px 0 1px;
background:#e8e6e7;
}
@media screen and (max-width:640px){
.menupage .areaB{
padding:40px 0 1px;
}
}
.menupage .contentNote{
font-size:114%;
margin-bottom:40px;
text-align:center;
}
@media screen and (max-width:640px){
.menupage .contentNote{
font-size:11pt;
}
}
.menupage .contentNote .color{
color:#be001a;
}
.menupage .contentNote small{
font-size:87.5%;
display:block;
}
/* PRICE table */
.priceTable{
padding:8px 0;
border-bottom:1px solid #ccc;
font-size:114%;
display:inline-block;
}
@media screen and (max-width:980px){
.priceTable{
width:100%;
}
}
@media screen and (max-width:640px){
.priceTable{
font-size:10pt;
}
}
.priceTable.none{
border:none;
padding:10px 0 0;
}
@media screen and (max-width:980px){
.priceTable dl.line{
border-bottom:1px dashed #ccc;
padding-bottom:8px;
}
}
.priceTable dt{
color:#d4bf1a;
}
.priceTable dt .color{
color:#fff;
}
.priceTable dt .astarisk{
font-size:50%;
vertical-align:top;
color:#4d4d4d;
}
@media screen and (max-width:980px){
.priceTable dt{
width:40% !important;
}
}
@media screen and (max-width:640px){
.priceTable dt{
width:100% !important;
}
}
.priceTable dd{
width:70px;
}
@media screen and (max-width:980px){
.priceTable dd{
width:30% !important;
}
}
@media screen and (max-width:640px){
.priceTable dd.price{
width:70% !important;
}
}
.priceTable .attention{
font-size:85.7%;
line-height:1.3;
margin-top:2px;
}
@media screen and (max-width:640px){
.priceTable .attention{
font-size:9pt;
}
}
.tableNote{
margin-left:1em;
line-height:1.5;
}
.tableNote.top{
margin-top:5px;
}
.tableNote span{
margin-left:-1em
}
.contentLine{
height:1px;
width:90%;
margin:0 auto 90px;
max-width:980px;
background:#ccc;
}
@media screen and (max-width:640px){
.contentLine{
margin:0 auto 40px;
}
}
/* staff */
.menupage .staff .clear{
position:relative;
min-height:200px;
margin-bottom:50px;
}
@media screen and (max-width:640px){
.menupage .staff .clear{
min-height:auto;
margin-bottom:30px;
}
}
.menupage .staff .clear .img{
width:170px;
position:absolute;
top:0;
left:0;
}
@media screen and (max-width:640px){
.menupage .staff .clear .img{
width:70%;
position:static;
margin-bottom:10px;
margin:0 auto 10px;
}
}
.menupage .staff .clear .img img{
width:100%;
height:auto;
max-width:510px;
margin:0 auto;
}
.menupage .staff .clear .blockLeft{
margin-left:190px;
}
@media screen and (max-width:640px){
.menupage .staff .clear .blockLeft{
margin-left:0px;
width:100%;
}
}
.menupage .staff .clear .ttl{
font-size:157%;
color:#5a4650;
margin-bottom:10px;
}
@media screen and (max-width:640px){
.menupage .staff .clear .ttl{
font-size:11pt;
}
}
.menupage .staff .clear .ttl .demibold{
font-size:73%;
vertical-align:middle;
}
@media screen and (max-width:640px){
.menupage .staff .clear .ttl .demibold{
font-size:9pt;
}
}
.menupage .staff .clear .note{
font-size:114%;
margin-bottom:20px;
}
@media screen and (max-width:640px){
.menupage .staff .clear .note{
font-size:9pt;
}
}
.menupage .staff .clear .box{
background:#faf8e7;
border-radius:5px;
padding:10px 20px;
line-height:1.4;
margin-bottom:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width:640px){
.menupage .staff .clear .box{
font-size:8pt;
}
}
.menupage .staff .clear .box span{
font-size:114%;
display:block;
margin-bottom:5px;
}
@media screen and (max-width:640px){
.menupage .staff .clear .box span{
font-size:10pt;
}
}
.menupage .staff .more{
margin-bottom:10px;
}
.menupage .staff .btn a{
margin:0;
}
/*---------------------------------------*/
/* about */
/*---------------------------------------*/
#about{
margin-top:65px;
}
@media screen and (max-width:640px){
#about{
margin-top:35px;
}
}
#about .message .areaTtl{
font-size:214%;
margin-bottom:15px;
}
@media screen and (max-width:640px){
#about .message .areaTtl{
font-size:13pt;
}
}
#about .message .areaTtl .color{
color:#d4bf1a;
}
#about .message .note{
font-size:143%;
text-align:center;
}
@media screen and (max-width:640px){
#about .message .note{
font-size:11pt;
}
}
#about .history table{
width:100%;
font-size:114%;
margin-bottom:30px;
}
@media screen and (max-width:640px){
#about .history table{
font-size:9pt;
}
}
#about .history table th{
color:#d4bf1a;
padding-right:20px;
white-space:nowrap;
border-right:1px solid #ccc;
}
#about .history table td{
padding-left:20px;
}
#about .history .img{
width:100%;
max-width:460px;
position:relative;
padding-bottom:15px;
}
#about .history .img:before{
content:"";
width:100%;
height:100%;
position:absolute;
left:15px;
top:15px;
background:#faf8e7;
}
@media screen and (max-width:640px){
#about .history .img:before{
display:none;
}
}
#about .history .img img{
width:100%;
height:auto;
position:relative;
}
#about .space .clear{
position:relative;
min-height:200px;
margin-bottom:50px;
}
@media screen and (max-width:640px){
#about .space .clear{
min-height:auto;
margin-bottom:30px;
}
}
#about .space .clear .img{
width:300px;
position:absolute;
top:0;
left:0;
}
@media screen and (max-width:640px){
#about .space .clear .img{
width:100%;
position:static;
margin-bottom:10px;
}
}
#about .space .clear .img img{
width:100%;
height:auto;
}
#about .space .clear .blockLeft{
margin-left:320px;
}
@media screen and (max-width:640px){
#about .space .clear .blockLeft{
margin-left:0px;
}
}
#about .space .clear .ttl{
font-size:157%;
color:#5a4650;
}
@media screen and (max-width:640px){
#about .space .clear .ttl{
font-size:11pt;
}
}
#about .space .clear .note{
font-size:114%;
}
@media screen and (max-width:640px){
#about .space .clear .note{
font-size:9pt;
}
}
#about .staff .clear{
position:relative;
min-height:200px;
margin-bottom:50px;
padding-top:120px;
margin-top:-120px;
}
@media screen and (max-width:640px){
#about .staff .clear{
min-height:auto;
margin-bottom:30px;
}
}
#about .staff .clear .img{
width:170px;
position:absolute;
top:120px;
left:0;
}
@media screen and (max-width:640px){
#about .staff .clear .img{
width:70%;
position:static;
margin-bottom:10px;
margin:0 auto;
}
}
#about .staff .clear .img img{
width:100%;
height:auto;
max-width:510px;
margin:0 auto;
}
#about .staff .clear .img .comment{
text-align:center;
font-size:85.7%;
margin-bottom:5px;
color:#5a4650;
}
@media screen and (max-width:640px){
#about .staff .clear .img .comment{
font-size:9pt;
}
}
#about .staff .clear .img .comment span{
position:relative;
}
#about .staff .clear .img .comment span:before,
#about .staff .clear .img .comment span:after{
content:"";
position:absolute;
height:1.5em;
width:1px;
background:#d4bf1a;
display:block;
top:0;
}
#about .staff .clear .img .comment span:before{
left:-8px;
-webkit-transform: translateY(0) rotate(-15deg);
transform: translateY(0) rotate(-15deg);
}
#about .staff .clear .img .comment span:after{
right:-8px;
-webkit-transform: translateY(0) rotate(15deg);
transform: translateY(0) rotate(15deg);
}
#about .staff .clear .blockLeft{
margin-left:190px;
}
@media screen and (max-width:640px){
#about .staff .clear .blockLeft{
margin-left:0px;
}
}
#about .staff .clear .ttl{
font-size:157%;
color:#5a4650;
margin-bottom:10px;
}
@media screen and (max-width:640px){
#about .staff .clear .ttl{
font-size:11pt;
}
}
#about .staff .clear .ttl .demibold{
font-size:73%;
vertical-align:middle;
}
@media screen and (max-width:640px){
#about .staff .clear .ttl .demibold{
font-size:9pt;
}
}
#about .staff .clear .note{
font-size:114%;
margin-bottom:20px;
}
@media screen and (max-width:640px){
#about .staff .clear .note{
font-size:9pt;
}
}
#about .staff .clear .box{
background:#faf8e7;
border-radius:5px;
padding:10px 20px;
line-height:1.4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width:640px){
#about .staff .clear .box{
font-size:8pt;
}
}
#about .staff .clear .box span{
font-size:114%;
display:block;
margin-bottom:5px;
}
@media screen and (max-width:640px){
#about .staff .clear .box span{
font-size:10pt;
}
}
/*---------------------------------------*/
/* cleanig */
/*---------------------------------------*/
#cleaning .content01 .areaBase{
overflow:visible;
}
#cleaning .content01 .clear{
margin-bottom:50px;
}
@media screen and (max-width:640px){
#cleaning .content01 .clear{
margin-bottom:30px;
}
}
#cleaning .content01 .blockLeft,
#cleaning .content01 .blockRight{
width:40%;
position:relative;
}
@media screen and (max-width:640px){
#cleaning .content01 .blockLeft,
#cleaning .content01 .blockRight{
width:50%;
}
}
#cleaning .content01 .img{
width:100%;
position:relative;
}
#cleaning .content01 .img:before{
content:"";
width:100%;
height:100%;
position:absolute;
left:15px;
top:15px;
background:#fff;
}
@media screen and (max-width:640px){
#cleaning .content01 .img:before{
display:none;
}
}
#cleaning .content01 .img img{
width:100%;
height:auto;
position:relative;
}
#cleaning .content01 .ttl{
position:absolute;
top:-20px;
left:-20px;
width:120px;
z-index:10;
text-align:center;
color:#fff;
background:rgba(212,191,26,0.9);
border-radius:50%;
font-size:114%;
line-height:1.4;
}
@media screen and (max-width:980px){
#cleaning .content01 .ttl{
width:80px;
font-size:85.7%;
}
}
@media screen and (max-width:640px){
#cleaning .content01 .ttl{
position:static;
background:none;
color:#5a4650;
width:100%;
font-size:11pt;
margin-bottom:5px;
}
}
#cleaning .content01 .ttl.l1{
padding-top:45px;
height:75px;
}
@media screen and (max-width:980px){
#cleaning .content01 .ttl.l1{
padding-top:30px;
height:50px;
}
}
#cleaning .content01 .ttl.l2{
padding-top:40px;
height:80px;
}
@media screen and (max-width:980px){
#cleaning .content01 .ttl.l2{
padding-top:20px;
height:60px;
}
}
#cleaning .content01 .ttl.l3{
padding-top:25px;
height:95px;
}
@media screen and (max-width:980px){
#cleaning .content01 .ttl.l3{
padding-top:13px;
height:67px;
}
}
#cleaning .content01 .arrow{
position:absolute;
top:50%;
left:-30%;
font-size:56px;
line-height:1;
color:#d4bf1a;
margin-top:-55px;
}
@media screen and (max-width:640px){
#cleaning .content01 .arrow{
position:absolute;
top:50%;
left:-9%;
font-size:23px;
margin-top:-25px;
z-index:10;
}
}
#cleaning .content01 .lato{
margin-top:15px;
font-size:157%;
}
@media screen and (max-width:640px){
#cleaning .content01 .lato{
margin-top:0;
font-size:11pt;
}
}
#cleaning .content01 .blockRight .lato{
color:#d4bf1a;
}
#cleaning .content02 ul{
background:#fff;
width:100%;
max-width:835px;
padding:20px;
margin:0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#cleaning .content02 ul li{
display:inline;
float:left;
margin:0 1% 30px;
width:48%;
}
@media screen and (max-width:640px){
#cleaning .content02 ul li{
width:100%;
margin:0 0 20px;
}
}
#cleaning .content02 ul li img{
width:100%;
height:auto;
}
#cleaning .content02 ul li .ttl{
color:#5a4650;
font-size:128.5%;
margin:8px 0 3px;
}
#cleaning .content03{
margin-top:90px;
}
@media screen and (max-width:640px){
#cleaning .content03{
margin-top:40px;
}
}
#cleaning .content03 dt{
width:200px;
}
#cleaning .content03 dd.price{
width:235px;
}
#cleaning .content04 dt{
width:200px;
}
#cleaning .content04 dd.price{
width:105px;
}
#cleaning .content05{
margin-top:90px;
}
@media screen and (max-width:640px){
#cleaning .content05{
margin-top:40px;
}
}
#cleaning .content05 dt{
width:200px;
}
#cleaning .content05 dd.price{
width:105px;
}
#cleaning .content06 dt{
width:260px;
}
#cleaning .content06 dd.price{
width:130px;
}
/*---------------------------------------*/
/* reform */
/*---------------------------------------*/
#reform .bef-aft{
position:relative;
min-height:290px;
}
@media screen and (max-width:640px){
#reform .bef-aft{
min-height:auto;
}
}
#reform .bef-aft .img{
position:absolute;
right:0;
top:0;
width:480px;
}
@media screen and (max-width:980px){
#reform .bef-aft .img{
width:350px;
}
}
@media screen and (max-width:640px){
#reform .bef-aft .img{
width:100%;
position:static;
margin-bottom:20px;
}
}
#reform .bef-aft .img img{
width:100%;
height:auto;
}
#reform .bef-aft .blockRight{
margin-right:500px;
font-size:114%;
}
@media screen and (max-width:980px){
#reform .bef-aft .blockRight{
margin-right:370px;
}
}
@media screen and (max-width:640px){
#reform .bef-aft .blockRight{
font-size:9pt;
width:100%;
position:static;
margin-right:0;
}
}
#reform .content01{
margin-top:90px;
}
@media screen and (max-width:640px){
#reform .content01{
margin-top:40px;
}
}
#reform .content01 .areaTtl{
margin-bottom:20px;
}
#reform .img-price{
position:relative;
margin-bottom:20px;
}
#reform .img-price .img{
position:absolute;
left:0;
top:0;
width:122px;
}
@media screen and (max-width:640px){
#reform .img-price .img{
width:80%;
margin:0 auto;
position:static;
margin-bottom:20px;
}
}
#reform .img-price .img img{
width:100%;
height:auto;
}
#reform .img-price .blockLeft.table{
margin-left:140px;
}
@media screen and (max-width:640px){
#reform .img-price .blockLeft.table{
width:100%;
position:static;
margin-left:0;
}
}
#reform .content01 dt{
width:200px;
}
#reform .content01 dd.price{
width:115px;
}
#reform .content02 .note{
margin-bottom:10px;
max-width:450px;
}
@media screen and (max-width:980px){
#reform .content02 .note{
max-width:none;
}
}
#reform .content02 .note .color{
color:#be001a;
}
#reform .content02 dt{
width:260px;
}
#reform .content02 dd.price{
width:120px;
}
#reform .staff .lesson{
position:relative;
min-height:180px;
}
@media screen and (max-width:640px){
#reform .staff .lesson{
min-height:auto;
}
}
#reform .staff .lesson .img{
position:absolute;
top:0;
left:0;
width:300px;
}
@media screen and (max-width:640px){
#reform .staff .lesson .img{
position:static;
width:100%;
}
}
#reform .staff .lesson .img img{
width:100%;
height:auto;
}
#reform .staff .lesson .blockLeft{
margin-left:320px;
line-height:1.5;
}
@media screen and (max-width:640px){
#reform .staff .lesson .blockLeft{
margin-left:0;
}
}
#reform .staff .lesson .blockLeft .note{
font-size:114%;
}
@media screen and (max-width:640px){
#reform .staff .lesson .blockLeft .note{
font-size:11pt;
}
}

/*---------------------------------------*/
/* sb-repair */
/*---------------------------------------*/
#sb-repair .areaA .areaBase,
#sb-repair .areaB .areaBase{
overflow:visible;
}
#sb-repair .bef-aft{
position:relative;
min-height:290px;
}
@media screen and (max-width:640px){
#sb-repair .bef-aft{
min-height:auto;
}
}
#sb-repair .bef-aft .img{
position:absolute;
right:0;
top:0;
width:480px;
}
@media screen and (max-width:980px){
#sb-repair .bef-aft .img{
width:350px;
}
}
@media screen and (max-width:640px){
#sb-repair .bef-aft .img{
width:100%;
position:static;
margin-bottom:20px;
}
}
#sb-repair .bef-aft .img img{
width:100%;
height:auto;
}
#sb-repair .bef-aft .blockRight{
margin-right:500px;
font-size:114%;
}
@media screen and (max-width:980px){
#sb-repair .bef-aft .blockRight{
margin-right:370px;
}
}
@media screen and (max-width:640px){
#sb-repair .bef-aft .blockRight{
font-size:9pt;
width:100%;
position:static;
margin-right:0;
}
}
#sb-repair .bef-aft .comment{
position:absolute;
top:-20px;
right:-20px;
width:120px;
z-index:10;
text-align:center;
color:#fff;
background:rgba(190,0,16,0.9);
border-radius:50%;
font-size:114%;
line-height:1.3;
}
@media screen and (max-width:980px){
#sb-repair .bef-aft .comment{
width:80px;
font-size:85.7%;
}
}
@media screen and (max-width:640px){
#sb-repair .bef-aft .comment{
position:static;
background:none;
color:rgba(190,0,16,1);
width:100%;
height:auto !important;
font-size:10pt;
}
}
#sb-repair .bef-aft .comment.l2{
padding-top:35px;
height:85px;
}
@media screen and (max-width:980px){
#sb-repair .bef-aft .comment.l2{
padding-top:20px;
height:60px;
letter-spacing:-0.025em;
}
}
#sb-repair .bef-aft .comment.l3{
padding-top:30px;
height:90px;
}
@media screen and (max-width:980px){
#sb-repair .bef-aft .comment.l3{
padding-top:17px;
height:63px;
letter-spacing:-0.025em;
}
}
#sb-repair .bef-aft .comment.l4{
padding-top:25px;
height:95px;
line-height:1.2;
}
@media screen and (max-width:980px){
#sb-repair .bef-aft .comment.l4{
padding-top:15px;
height:65px;
letter-spacing:-0.025em;
}
}
#sb-repair .content01{
margin-top:90px;
margin-bottom:40px;
}
@media screen and (max-width:640px){
#sb-repair .content01{
margin-top:40px;
}
}
#sb-repair .content01 dt{
width:200px;
}
@media screen and (max-width:1070px){
#sb-repair .content01 dt{
width:180px;
}
}
#sb-repair .content01 dd.price{
width:240px;
}
@media screen and (max-width:1070px){
#sb-repair .content01 dd.price{
width:200px;
}
}
@media screen and (max-width:640px){
#sb-repair .content01 dd.price{
width:49% !important;
margin-right:1%;
}
}
#sb-repair .content01 dd{
line-height:1.3;
}
#sb-repair .content01 dd img{
width:100%;
height:auto;
max-width:115px;
}
#sb-repair .content02 dt{
width:190px;
}
#sb-repair .content02 dd.price{
width:190px;
}
#sb-repair .content03{
margin-top:90px;
}
@media screen and (max-width:640px){
#sb-repair .content03{
margin-top:40px;
}
}
#sb-repair .content03 dt{
width:160px;
}
#sb-repair .content03 dd.price{
width:155px;
}
/*---------------------------------------*/
/* sb-cleaning */
/*---------------------------------------*/
#sb-cleaning .content01 .areaBase{
overflow:visible;
}
#sb-cleaning .content01 .flow{
background:#fff;
}
#sb-cleaning .content01 .flow.left{
padding:20px 0 0;
}
#sb-cleaning .content01 .flow.right{
margin-bottom:50px;
}
@media screen and (max-width:640px){
#sb-cleaning .content01 .flow.right{
padding:20px 0 0;
}
}
#sb-cleaning .content01 .flow li{
width:20%;
padding:0 2.5% 40px;
display:inline;
position:relative;
}
@media screen and (max-width:640px){
#sb-cleaning .content01 .flow li{
width:90%;
padding:0 5% 40px;
}
}
#sb-cleaning .content01 .flow.left li{
float:left;
}
#sb-cleaning .content01 .flow.right li{
float:right;
}
#sb-cleaning .content01 .flow li img{
width:100%;
height:auto;
margin-bottom:10px;
}
#sb-cleaning .content01 .flow li .step{
color:#5a4650;
font-size:114%;
}
@media screen and (max-width:640px){
#sb-cleaning .content01 .flow li .step{
font-size:11pt;
}
}
#sb-cleaning .content01 .flow li .note{
line-height:1.4;
}
#sb-cleaning .content01 .flow li .arrow{
position:absolute;
top:34%;
font-size:25px;
width:30px;
height:25px;
color:#d4bf1a;
}
#sb-cleaning .content01 .flow.left li .arrow{
top:34%;
right:-15px;
}
#sb-cleaning .content01 .flow.right li .arrow{
top:39%;
left:-15px;
-webkit-transform: translateY(0) rotate(-180deg);
transform: translateY(0) rotate(-180deg);
}
#sb-cleaning .content01 .flow.left li:nth-child(4) .arrow{
top:auto;
bottom:-9px;
left:50%;
margin-left:-15px;
-webkit-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
@media screen and (max-width:640px){
#sb-cleaning .content01 .flow.left li .arrow,
#sb-cleaning .content01 .flow.right li .arrow{
top:auto;
right:auto;
bottom:-9px;
left:50%;
margin-left:-15px;
-webkit-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
}
#sb-cleaning .content02 .blockLeft,
#sb-cleaning .content02 .blockRight{
width:40%;
position:relative;
}
@media screen and (max-width:640px){
#sb-cleaning .content02 .blockLeft,
#sb-cleaning .content02 .blockRight{
width:50%;
}
}
#sb-cleaning .content02 .img{
width:100%;
position:relative;
}
#sb-cleaning .content02 .img:before{
content:"";
width:100%;
height:100%;
position:absolute;
left:15px;
top:15px;
background:#fff;
}
@media screen and (max-width:640px){
#sb-cleaning .content02 .img:before{
display:none;
}
}
#sb-cleaning .content02 .img img{
width:100%;
height:auto;
position:relative;
}
#sb-cleaning .content02 .arrow{
position:absolute;
top:50%;
left:-30%;
font-size:43px;
line-height:1;
color:#d4bf1a;
margin-top:-55px;
}
@media screen and (max-width:640px){
#sb-cleaning .content02 .arrow{
position:absolute;
top:50%;
left:-9%;
font-size:23px;
margin-top:-25px;
z-index:10;
}
}
#sb-cleaning .content02 .lato{
margin-top:15px;
font-size:157%;
}
@media screen and (max-width:640px){
#sb-cleaning .content02 .lato{
margin-top:0;
font-size:11pt;
}
}
#sb-cleaning .content02 .blockRight .lato{
color:#d4bf1a;
}
#sb-cleaning .content03{
margin-top:90px;
}
@media screen and (max-width:640px){
#sb-cleaning .content03{
margin-top:40px;
}
}
#sb-cleaning .content03 .clear .price01{
width:50%;
padding-right:5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .clear .price01{
width:100%;
padding-right:0;
margin-bottom:40px;
float:none;
}
}
#sb-cleaning .content03 .clear .price02{
width:50%;
padding-left:5%;
position:relative;
border-left:1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .clear .price02{
width:100%;
padding-left:0;
border-left:none;
float:none;
}
}
#sb-cleaning .content03 .for{
font-size: 114%;
text-align:center;
background: #5a4650;
color: #fff;
margin-bottom: 10px;
position:relative;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .for{
font-size: 9pt;
}
}
#sb-cleaning .content03 .for:after{
content:"";
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #5a4650;
display:block;
position:absolute;
top:25px;
left:50%;
margin-left:-16px;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .for:after{
top:18px;
}
}
#sb-cleaning .content03 .ttl{
font-size:143%;
color:#5a4650;
margin-bottom:10px;
line-height:1.4;
position:relative;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .ttl{
font-size:11pt;
}
}
#sb-cleaning .content03 .ttl span{
display:block;
font-size:80%;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .ttl span{
font-size: 9pt;
}
}

#sb-cleaning .content03 .note{
padding-bottom:20px;
}
#sb-cleaning .content03 img{
width:100%;
height:auto;
}
#sb-cleaning .content03 .comment{
position:absolute;
top:0;
right:0;
z-index:10;
text-align:center;
color:#fff;
background:rgba(190,0,16,0.9);
border-radius:15px;
font-size:60%;
line-height:27px;
padding:0 10px;
height:27px;
letter-spacing:-0.025em;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .comment{
font-size: 9pt;
right:auto;
left:120px;
}
}
#sb-cleaning .content03 .flow{
margin:20px 0;
}
#sb-cleaning .content03 .flow li{
width:100%;
height:40px;
line-height:40px;
margin-bottom:10px;
position:relative;
color:#fff;
background:#5a4650;
text-align:center;
border-radius:20px;
}
#sb-cleaning .content03 .flow li.none{
width:5px;
border-radius:0;
margin:-2px auto;
padding-bottom:12px;
}
@media screen and (max-width:640px){
#sb-cleaning .content03 .flow li.none{
height:10px;
}
}
#sb-cleaning .content03 .flow li:after{
content:"";
position:absolute;
display:block;
bottom:-10px;
left:50%;
margin-left:-2.5px;
height:10px;
width:5px;
background:#5a4650;
}
#sb-cleaning .content03 .flow li:last-child:after{
display:none;
}
#sb-cleaning .content03 dd{
width:60px;
}
#sb-cleaning .content03 dt{
width:164px;
}
#sb-cleaning .content03 dd.price{
width:85px;
}
#sb-cleaning .price-info .ttl{
font-size:143%;
color:#5a4650;
margin-bottom:10px;
position:relative;
}
@media screen and (max-width:640px){
#sb-cleaning .price-info .ttl{
font-size:11pt;
}
}
#sb-cleaning .price-info .ttl .comment{
position:absolute;
top:7px;
left:160px;
z-index:10;
text-align:center;
color:#fff;
background:rgba(190,0,16,0.9);
border-radius:15px;
font-size:60%;
line-height:27px;
padding:0 10px;
height:27px;
letter-spacing:-0.025em;
}
@media screen and (max-width:640px){
#sb-cleaning .price-info .ttl .comment{
font-size:9pt;
left:120px;
top:2px;
}
}
#sb-cleaning .price-info .clear{
position:relative;
min-height:140px;
margin-bottom:10px;
}
@media screen and (max-width:640px){
#sb-cleaning .price-info .clear{
min-height:auto;
}
}
#sb-cleaning .price-info .clear .img{
position:absolute;
top:0;
left:0;
width:235px;
}
@media screen and (max-width:640px){
#sb-cleaning .price-info .clear .img{
position:static;
margin-bottom:10px;
width:100%;
}
}
#sb-cleaning .price-info .clear .img img{
width:100%;
height:auto;
}
#sb-cleaning .price-info .clear .blockLeft{
margin-left:255px;
}
@media screen and (max-width:640px){
#sb-cleaning .price-info .clear .blockLeft{
margin-left:0;
}
}
#sb-cleaning .content04 dt{
width:210px;
}
#sb-cleaning .content04 dd.price{
width:110px;
}
#sb-cleaning .content05 dt{
width:180px;
}
#sb-cleaning .content05 dd.price{
width:106px;
}
#sb-cleaning .content06 dt{
width:210px;
}
#sb-cleaning .content06 dd.price{
width:100px;
}
#sb-cleaning .content07 dt{
width:240px;
}
#sb-cleaning .content07 dd.price{
width:106px;
}
/*---------------------------------------*/
/* key */
/*---------------------------------------*/
#key .content01 dt.ttl{
width:200px;
color:#5a4650;
}
@media screen and (max-width:980px){
#key .content01 dt.ttl{
width:100% !important;
}
}
#key .content01 dt{
width:190px;
}
#key .content01 dd{
width:106px;
}
#key .content01 .img{
margin:20px 0;
}
#key .content01 .img img{
width:100%;
height:auto;
max-width:520px;
}
#key .bn img{
width: 100%;
height: auto;
max-width: 700px;
margin: 0 auto;
display: block;
}
#key .qaContent{
border-bottom:1px solid #ccc;
margin-bottom:20px;
}
#key .qaContent .clear{
position:relative;
min-height:26px;
margin-bottom:20px;
}
#key .qaContent .clear .icon{
position:absolute;
top:0;
left:0;
width:40px;
font-size:185.7%;
line-height:1;
color:#5a4650;
}
@media screen and (max-width:640px){
#key .qaContent .clear .icon{
width:25px;
}
}
#key .qaContent .clear.answer .icon{
color:#d4bf1a;
}
#key .qaContent .clear .blockLeft{
margin-left:40px;
}
@media screen and (max-width:640px){
#key .qaContent .clear .blockLeft{
margin-left:25px;
}
}
#key .qaContent .clear.question .note{
font-size:128.5%;
}
#key .content03 .img{
margin:20px 0;
}
#key .content03 .img img{
width:100%;
height:auto;
max-width:400px;
}
#key .content03 dt{
width:255px;
}
#key .content03 dd.price{
width:106px;
}
/*---------------------------------------*/
/* blog */
/*---------------------------------------*/
/*breadcrumbs*/
.breadcrumbs{
width:100%;
margin-bottom:25px;
}
.breadcrumbs ul{
list-style:none;
}
.breadcrumbs li{
display:inline;
float:left;
margin:0 5px 0 0;
font-size:85.7%;
}
.breadcrumbs li .icon-arrow{
color:#d4bf1a;
margin-right:5px;
}
#blog{
margin-top:190px;
overflow:visible;
}
@media screen and (max-width:980px){
#blog{
margin-top:135px;
}
}
@media screen and (max-width:640px){
#blog{
margin-top:105px;
}
}
#blog .categoryName{
text-align:center;
font-size:143%;
color:#5a4650;
margin-bottom:40px;
}
@media screen and (max-width:640px){
#blog .categoryName{
font-size:13pt;
margin-bottom:30px;
}
}
#blog .categoryName span{
color:#d4bf1a;
font-size:80%;
vertical-align:middle;
margin-right:10px;
}
@media screen and (max-width:640px){
#blog .categoryName span{
font-size:9pt;
}
}
#blog .blogContent{
position:relative;
}
#blog .blogContent .sidebar{
position:absolute;
top:0;
left:0;
width:250px;
}
#blog .blogContent .sidebar-inner{
background:#faf8e7;
border-radius:5px;
width:210px;
padding:20px;
overflow:visible;
}
@media screen and (max-width:980px){
#blog .blogContent .sidebar{
position: fixed !important;
top:0 !important;
left:-260px;
width:220px;
height:100%;
z-index:100;
padding:0 20px 0 20px;
background:#faf8e7;
overflow:auto;
min-height:100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
}
.side-open #blog .blogContent .sidebar{
left:0;
}
#blog .blogContent .sidebar .sidebar-inner{
padding:140px 0 100px;
}
}
@media screen and (max-width:640px){
#blog .blogContent .sidebar .sidebar-inner{
padding:80px 0 50px;
width:auto;
}
}
#blog .blogContent .sidebar .ttl{
font-size:128.5%;
line-height:1;
}
@media screen and (max-width:640px){
#blog .blogContent .sidebar .ttl{
font-size:13pt;
}
}
#blog .blogContent .sidebar .ttl .line{
display:block;
height:1px;
width:70px;
background:#d4bf1a;
margin:20px 0 20px;
}
#blog .blogContent .sidebar ul.demibold{
font-size:114%;
margin-bottom:40px;
}
@media screen and (max-width:640px){
#blog .blogContent .sidebar ul.demibold{
font-size:11pt;
}
}
#blog .blogContent .sidebar ul.newer li{
padding-bottom:10px;
margin-bottom:10px;
border-bottom:1px dotted #ccc;
line-height:1.4;
}
#blog .blogContent .sidebar ul.archive{
margin-bottom:40px;
}
#blog .blogContent .sidebar ul.archive>li{
position:relative;
width:100%;
background:#fff;
text-indent:15px;
height:24px;
line-height:24px;
border-radius:3px;
cursor:pointer;
}
@media screen and (max-width:980px){
#blog .blogContent .sidebar ul.archive>li{
background:none;
text-indent:0;
}
}
@media screen and (max-width:980px){
#blog .blogContent .sidebar ul.archive>li{
font-size:11pt;
}
}
#blog .blogContent .sidebar ul.archive>li ul{
position:absolute;
top:24px;
width:100%;
background:#fff;
}
#blog .blogContent .sidebar ul.archive>li ul li a{
width:100%;
display:block;
height:24px;
line-height:24px;
}
#blog .blogContent .maincontent{
margin-left:280px;
}
@media screen and (max-width:980px){
#blog .blogContent .maincontent{
margin-left:0;
}
}
/* TAB/SP用インフォメーション */
.side-menu-btn {
display:none;
}
@media screen and (max-width:980px){
.side-open .wrapper,
.side-open .overlay {
-webkit-transform: translate3d(260px, 0, 0);
transform: translate3d(260px, 0, 0);
}
.overlay {
content: '';
visibility: hidden;
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
z-index:100;
}
.overlay::after {
content: " ";
visibility: hidden;
position: fixed;
top: 40%;
left: 0;
display: block;
width: 100%;
height: 50px;
color: rgba(255,255,255,0);
font-size: 40px;
font-weight: bold;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
}
.side-open .overlay {
visibility: visible;
cursor: pointer;
background: rgba(0,0,0,0.7);
}
.side-open .overlay::after {
visibility: visible;
color: rgba(255,255,255,0.8);
}
.side-menu-btn {
display:block;
position: fixed;
bottom:60px;
height:40px;
left:0;
width:100%;
cursor: pointer;
text-align:center;
line-height:40px;
background:#faf8e7;
z-index:99;
}
.side-menu-btn .icon-arrow{
display:inline-block;
-webkit-transform: translateY(0) rotate(-180deg);
transform: translateY(0) rotate(-180deg);
color:#d4bf1a;
margin-right:5px;
}
}
#blog .blogContent .maincontent .blogList li{
width:30.333%;
margin:0 1.5% 30px;
display:inline;
float:left;
}
@media screen and (max-width:640px){
#blog .blogContent .maincontent .blogList li{
width:80%;
margin:0 10% 30px;
}
}
#blog .blogContent .maincontent .blogList li img{
width:100%;
height:auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#blog .blogContent .maincontent .blogList li a:hover img{
opacity:0.7;
}
#blog .blogContent .maincontent .blogList li .info{
font-size:85.7%;
margin:5px 0;
display:inline-block;
}
@media screen and (max-width:640px){
#blog .blogContent .maincontent .blogList li .info{
font-size:9pt;
}
}
#blog .blogContent .maincontent .blogList li .info .date{
margin-right:10px;
color:#4d4d4d;
}
#blog .blogContent .maincontent .blogList li .info .cate{
color:#fff;
padding:0 2px;
}
#blog .blogContent .maincontent .blogList li .info .cate.news{
background:#b3b3b3;
}
#blog .blogContent .maincontent .blogList li .info .cate.coupon{
background:rgba(212,191,26,1);
}
#blog .blogContent .maincontent .blogList li .info .cate.works{
background:rgba(90,70,80,1);
}
#blog .blogContent .maincontent .blogList li .ttl{
line-height:1.4;
font-size:114%;
}
@media screen and (max-width:640px){
#blog .blogContent .maincontent .blogList li .ttl{
font-size:11pt;
}
}
#blog .blog .info{
font-size:85.7%;
margin-bottom:20px;
}
@media screen and (max-width:640px){
#blog .blog .info{
font-size:9pt;
}
}
#blog .blog .info .date{
margin-right:20px;
color:#4d4d4d;
}
#blog .blog .info .cate{
color:#fff;
padding:0px 2px 1px;
}
#blog .blog .info .cate.news{
background:#b3b3b3;
}
#blog .blog .info .cate.coupon{
background:rgba(212,191,26,1);
}
#blog .blog .info .cate.works{
background:rgba(90,70,80,1);
}
#blog .blog .ttl{
line-height:1.4;
font-size:143%;
padding-bottom:10px;
margin-bottom:30px;
border-bottom:1px solid #ccc;
}
@media screen and (max-width:640px){
#blog .blog .ttl{
font-size:13pt;
}
}
#blog .blog .note{
line-height:2.3;
margin-bottom:50px;
}
#blog .blog .note img{
max-width:100%;
height:auto;
display:block;
}
#blog .blog .sns{
margin-bottom:50px;
padding-bottom:50px;
border-bottom:1px solid #ccc;
}
#blog .blog .sns li{
width:90px;
display:inline;
float:left;
}
#blog .blog .sns li:first-child{
padding-top:5px;
}
@media screen and (max-width: 640px) {
#blog .blog .sns li:first-child{
padding-top:0;
}
}
.pager{
text-align:center;
}
.pager .wp-pagenavi{
display:inline-block;
}
.pager .wp-pagenavi a,
.pager .wp-pagenavi span.current{
width:30px;
height:30px;
line-height:30px;
display:block;
float:left;
background:#faf8e7;
margin:0 5px;
color:#4d4d4d;
}
.pager .wp-pagenavi a:hover,
.pager .wp-pagenavi span.current{
background:#d4bf1a;
color:#fff;
}
.pager .wp-pagenavi a.previouspostslink,
.pager .wp-pagenavi a.nextpostslink{
margin:0 10px;
width:auto;
padding:0 10px;
}
#nav-below ul li{
float:left;
width:30.33%;
display:inline;
text-align:center;
font-size:114%;
}
@media screen and (max-width: 640px) {
#nav-below ul li{
font-size:9pt;
width:50%;
}
}
#nav-below ul li.nav-previous{
text-align:left;
}
#nav-below ul li.nav-previous .icon-arrow{
-webkit-transform: translateY(0) rotate(-180deg);
transform: translateY(0) rotate(-180deg);
}
#nav-below ul li.nav-next{
text-align:right;
}
#nav-below ul li .icon-arrow{
color:#d4bf1a;
margin:0 3px;
display:inline-block;
}
#nav-below ul li a{
position:relative;
}
#nav-below ul li a .line{
position:absolute;
bottom:-5px;
left:0;
display:block;
height:1px;
width:100%;
background:#d4bf1a;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#nav-below ul li a:hover .line{
background:#fff;
}
/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
#contact .ttl{
font-size:143%;
margin-top:90px;
text-align:center;
}
@media screen and (max-width: 640px) {
#contact .ttl{
font-size:13pt;
}
}
#contact .subTtl{
text-align:center;
margin-top: 15px;
font-size: 114%;
}
@media screen and (max-width: 640px) {
#contact .subTtl{
font-size:11pt;
}
}
#contact .img{
margin:50px 0 0;
}
#contact .img img{
width:100%;
height:auto;
}
#contact .form dl{
margin-bottom:20px;
}
#contact .form dt{
width:30%;
font-size:114%;
}
@media screen and (max-width: 640px) {
#contact .form dt{
width:100%;
font-size:11pt;
}
}
#contact .form dt span{
font-size:87.5%;
color:#d4bf1a;
margin-left:5px;
vertical-align:middle;
}
@media screen and (max-width: 640px) {
#contact .form dt span{
font-size:9pt;
}
}
#contact .form dd{
width:70%;
}
@media screen and (max-width: 640px) {
#contact .form dd{
width:100%;
}
}
.txt-l, .txt-s, .txt-area,.hasCustomSelect{
border: 1px solid #ccc;
border-radius: 0;
font-size: 100%;
height: 30px;
padding-left: 4%;
width: 95%;
-webkit-appearance: none;
}
@media screen and (max-width: 640px) {
.txt-l, .txt-s, .txt-area {
font-size: 9pt;
}
}
.txt-area {
height: 100px;
padding-bottom: 10px;
padding-top: 10px;
}
.wpcf7-file{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border-radius:none;

}
.form input:focus, .form textarea:focus, .form select:focus {
border: 1px solid #be001a;
}
div.wpcf7-validation-errors {
border: 2px solid #be001a !important;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #be001a;
}
div.wpcf7-response-output {
margin-left: 30px !important;
margin-right: 30px !important;
margin-top: 0 !important;
text-align: center;
}
.form .btnSubmit input {
background: #d4bf1a;
border:1px solid #d4bf1a;
color: #fff;
transition: all 0.3s ease 0s;
width:200px;
height:30px;
line-height:28px;
font-size:100%;
cursor:pointer;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border-radius:none;
}
@media screen and (max-width: 640px) {
.form .btnSubmit input {
width:100%;
}
}
.form .btnSubmit input:hover{
color: #d4bf1a;
background:#fff;
}
#contact .mailer{
font-size: 114%;
margin: 70px 0 20px;
}
@media screen and (max-width: 640px) {
#contact .mailer{
font-size:11pt;
margin:50px 0 10px;
}
}
/*---------------------------------------*/
/* recycle */
/*---------------------------------------*/
#recycle .recycleTtlArea{
background:#efeddc;
margin:0 auto 50px;
max-width:800px;
padding:20px 0;
text-align:left;
}
@media screen and (max-width:640px){
#recycle .recycleTtlArea{
margin:0 auto 20px;
}
}
#recycle .menuTtl .areaTtl{
text-align:left;
font-size:250%;
margin-bottom:10px;
}
@media screen and (max-width:640px){
#recycle .menuTtl .areaTtl{
font-size:13pt;
letter-spacing:-0.025em;
}
}
#recycle .menuTtl .note{
text-align:left;
font-size:150%;
margin-bottom:10px;
}
@media screen and (max-width:640px){
#recycle .menuTtl .note{
font-size:11pt;
}
}
#recycle .menuTtl .icon{
position:absolute;
top:0;
right:0;
width:163px;
height:163px;
background:#c9b41a;
border-radius:50%;
text-align:center;
-webkit-transform: translateY(0) rotate(8deg);
transform: translateY(0) rotate(8deg);
}
@media screen and (max-width:980px){
#recycle .menuTtl .icon{
top:-85px;
}
}
@media screen and (max-width:640px){
#recycle .menuTtl .icon{
width:100px;
height:100px;
top:-60px;
}
}
#recycle .menuTtl .icon .ttl{
margin-top:43px;
margin-left:10px;
}
@media screen and (max-width:640px){
#recycle .menuTtl .icon .ttl{
font-size:7pt;
margin-top:25px;
margin-left:5px;
}
}
#recycle .menuTtl .icon .message{
font-size:150%;
color:#fff;
line-height:1.5;	
}
@media screen and (max-width:640px){
#recycle .menuTtl .icon .message{
font-size:9pt;
}
}
#recycle .menuTtl .kouan span{
background:#fff;
display:inline-block;
padding:2px 5px 1px;
color: #5a4650;
}
@media screen and (max-width:640px){
#recycle .menuTtl .kouan span{
font-size:8pt;
}
}
#recycle .about{
border-bottom:1px solid #c1c1c1;
padding-bottom:50px;
}
@media screen and (max-width:640px){
#recycle .about{
padding-bottom:20px;
}
}
#recycle .aboutLast{
border-bottom:none;
padding-bottom:0;
}
#recycle .about .note{
font-size: 114%;
margin-bottom: 40px;
}
@media screen and (max-width:640px){
#recycle .about .note{
font-size:9pt;
margin-bottom: 20px;
}
}
#recycle .about .note .color{
color:#be001a;
}
#recycle .about table{
width:100%;
font-size:114%;
margin-bottom:30px;
}
@media screen and (max-width:640px){
#recycle .about table{
font-size:9pt;
}
}
#recycle .about table th{
color:#d4bf1a;
padding-right:20px;
white-space:nowrap;
border-right:1px solid #ccc;
}
#recycle .about table td{
padding-left:20px;
}
/* snsArea */
#recycle .lineacount{
max-width:400px;
padding:20px 15px 0;
border:10px solid #faf8e7;
}
@media screen and (max-width:640px){
#recycle .lineacount{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
}
#recycle .lineacount .clear{
position:relative;
min-height:80px;
margin-bottom:20px;
}
@media screen and (max-width:640px){
#recycle .lineacount .clear{
min-height:50px;
}
}
#recycle .lineacount .clear .img{
position:absolute;
top:0;
left:0;
width:80px;
height:80px;
}
@media screen and (max-width:640px){
#recycle .lineacount .clear .img{
width:50px;
height:50px;
}
}
#recycle .lineacount .clear .img img{
width:100%;
height:auto;
}
#recycle .lineacount .clear .blockLeft{
margin-left:100px;
}
@media screen and (max-width:640px){
#recycle .lineacount .clear .blockLeft{
margin-left:60px;
}
}
#recycle .lineacount .clear .blockLeft .ttl{
font-size:157%;
line-height:1.3;
letter-spacing:1px;
margin-bottom:5px;
}
@media screen and (max-width:640px){
#recycle .lineacount .clear .blockLeft .ttl{
font-size:11pt;
letter-spacing:normal;
}
}
#recycle .lineacount .clear .blockLeft .note{
font-size:114%;
line-height:1.3;
letter-spacing:-0.03em;
}
@media screen and (max-width:640px){
#recycle .lineacount .clear .blockLeft .note{
font-size:9pt;
}
}
#recycle .flowBox{
background:#efeddc;
max-width:800px;
margin:0 auto 130px;
position:relative;
padding:30px 0;
}
@media screen and (max-width:640px){
#recycle .flowBox{
margin:0 auto 80px;
}
#recycle .flowBox.none{
margin:0 auto 40px;
}
}
#recycle .flowBox .point{
margin-bottom:30px;
}
#recycle .flowBox .point .img{
margin-bottom:15px;
}
#recycle .flowBox .blockLeft{
width:35%;
}
@media screen and (max-width:640px){
#recycle .flowBox .blockLeft{
width:100%;
margin-bottom:15px;
}
}
#recycle .flowBox .blockRight{
width:60%;
}
@media screen and (max-width:640px){
#recycle .flowBox .blockRight{
width:100%;
}
}
#recycle .flowBox .point .img img,
#recycle .flowBox .blockLeft img{
width:100%;
height:auto;
}
#recycle .flowBox .blockLeft img{
max-width:400px;
margin:0 auto;
display:block;
}
#recycle .flowBox .point .ttl{
color:#b3001a;
font-size:128%;
}
@media screen and (max-width:640px){
#recycle .flowBox .point .ttl{
font-size:11pt;
}
}
#recycle .flowBox .point .note{
font-size:114%;
margin-left:1em;
}
@media screen and (max-width:640px){
#recycle .flowBox .point .note{
font-size:9pt;
}
}
#recycle .flowBox .point .note span{
display:inline-block;
width:1em;
margin-left:-1em;
}
#recycle .flowBox .qa{
background:#fff;
border-radius:10px;
padding:20px 0;
min-height:30px;
}
@media screen and (max-width:640px){
#recycle .flowBox .qa{
padding:20px 0;
min-height:20px;
}
}
#recycle .flowBox .qa .question,
#recycle .flowBox .qa .answer{
position:relative;
}
#recycle .flowBox .qa .answer.line{
border-bottom:1px solid #ccc;
padding-bottom:20px;
margin-bottom:20px;
}
#recycle .flowBox .qa .question{
margin-bottom:10px;
}
#recycle .flowBox .qa .seurat{
font-size:186%;
position:absolute;
top:0;
left:0;
line-height:1;
}
@media screen and (max-width:640px){
#recycle .flowBox .qa .seurat{
font-size:13pt;
}
}
#recycle .flowBox .qa .question .seurat{
color:#5a4650;
}
#recycle .flowBox .qa .answer .seurat{
color:#c9b41a;
}
#recycle .flowBox .qa .note{
margin-left:40px;
display:inline-block;
line-height:1.5;
}
@media screen and (max-width:640px){
#recycle .flowBox .qa .note{
margin-left:25px;
}
}
#recycle .flowBox .qa .question .note{
font-size:128%;
color:#5a4650;
}
@media screen and (max-width:640px){
#recycle .flowBox .qa .question .note{
font-size:11pt;
}
}
#recycle .flowBox .qa .answer .note{
font-size:114%;
}
@media screen and (max-width:640px){
#recycle .flowBox .qa .answer .note{
font-size:9pt;
}
}
#recycle .flowBox .icon{
width:135px;
height:95px;
text-align:center;
color:#fff;
line-height:1.5;
padding-top:40px;
font-size:128%;
position:absolute;
top:-24px;
left:-24px;
background:rgba(179,0,26,0.9);
border-radius:50%;
}
@media screen and (max-width:980px){
#recycle .flowBox .icon{
width:100px;
height:70px;
padding-top:30px;
font-size:100%;
left:5%;
top:-70px;
}
}
@media screen and (max-width:640px){
#recycle .flowBox .icon{
width:80px;
height:57px;
padding-top:23px;
top:-35px;
}
}
#recycle .flowBox .icon-arrow{
font-size:50px;
position:absolute;
bottom:-100px;
left:50%;
-webkit-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
color:#c9b41a;
margin-left:-25px;
}
@media screen and (max-width:640px){
#recycle .flowBox .icon-arrow{
font-size:30px;
bottom:-60px;
}
}
#recycle .flowBox .lineLink{
position:relative;
min-height:65px;
margin:10px 0 10px 40px;
}
@media screen and (max-width:640px){
#recycle .flowBox .lineLink{
margin:10px 0 0 25px;
}
}
#recycle .flowBox .lineLink .img{
position:absolute;
top:0;
left:0;
width:50px;
height:65px;
}
#recycle .flowBox .lineLink .img img{
width:100%;
height:auto;
}
#recycle .flowBox .lineLink .ttl{
margin-left:60px;
font-size:157%;
line-height:1.3;
margin-top:10px;
}
@media screen and (max-width:640px){
#recycle .flowBox .lineLink .ttl{
font-size:11pt;
}
}
#recycle .attention{
max-width:700px;
}
#recycle .attention .ttl{
font-size:157%;
text-align:center;
margin-bottom:30px;
}
#recycle .attention .ttl .color{
color:#b3001a;
}
#recycle .attention .attentionBox{
border:5px solid #b3001a;
padding:20px 0 10px;
}
#recycle .attention .attentionBox .note{
margin-left:1em;
margin-bottom:10px;
line-height:1.5;
}
#recycle .attention .attentionBox .note span{
margin-left:-1em;
display:inline-block;
width:1em;
}
#recycle .media .contentNote{
margin-bottom:10px;
}
#recycle .media .media01{
max-width:500px;
margin:0 auto 50px;
}
@media screen and (max-width:640px){
#recycle .media .media01{
margin:0 auto 30px;
}
}
#recycle .media .media02{
max-width:900px;
margin:0 auto;
}
#recycle .media .mediaImg img{
width:100%;
height:auto;
}
/*---------------------------------------*/
/* embroidery */
/*---------------------------------------*/
#embroidery .embroideryList{
max-width:810px;
margin:0 auto;
}
#embroidery .embroideryList li{
width:31.33%;
margin-right:3%;
float:left;
display:inline;
margin-bottom:30px;
}
@media screen and (max-width:640px){
#embroidery .embroideryList li{
width:47.5%;
margin-right:5%;
margin-bottom:15px;
}
}
#embroidery .embroideryList li:nth-child(3n){
margin-right:0;
}
@media screen and (max-width:640px){
#embroidery .embroideryList li:nth-child(3n){
margin-right:5%;
}
#embroidery .embroideryList li:nth-child(2n){
margin-right:0;
}
}
#embroidery .embroideryList li img{
width:100%;
height:auto;
}
#embroidery .content02,
#embroidery .content03,
#embroidery .content04{
margin-top:90px;
}
@media screen and (max-width:640px){
#embroidery .content02,
#embroidery .content03,
#embroidery .content04{
margin-top:40px;
}
}
#embroidery .content02 dt,
#embroidery .content03 dt{
width:230px;
}
#embroidery .content04 dt{
width:335px;
}
@media screen and (max-width: 980px){
#embroidery .content04 dt{
width: 43% !important;
}
}
@media screen and (max-width: 640px){
#embroidery .content04 dt{
width: 100% !important;
}
}
#embroidery .content04 dt small{
margin-left:10px;
color:#4d4d4d;
}
#embroidery .content04 dd{
width:30px;
text-align:center;
}
#embroidery .content02 dd.price,
#embroidery .content03 dd.price{
width:105px;
}
#embroidery .content04 dd.price{
width:150px;
text-align:left;
}
#embroidery .tableTtl dt{
color:#4d4d4d;
}
@media screen and (max-width:640px){
#embroidery .tableTtl dd{
display:none;
}
}
#embroidery .nameList{
max-width:870px;
margin:0 auto 90px;
}
@media screen and (max-width:640px){
#embroidery .nameList{
margin:0 auto 40px;
}
}
#embroidery .nameList li{
display:inline;
float:left;
width:18.4%;
margin-right:2%;
text-align:center;
margin-bottom:20px;
}
@media screen and (max-width:640px){
#embroidery .nameList li{
width:45%;
margin-right:10%;
}
}
#embroidery .nameList li:nth-child(5n){
margin-right:0;
}
@media screen and (max-width:640px){
#embroidery .nameList li:nth-child(5n){
margin-right:10%;
}
#embroidery .nameList li:nth-child(2n){
margin-right:0;
}
}
#embroidery .nameList li img{
width:100%;
height:auto;
}
#embroidery .nameList li .font{
margin:5px auto;
font-size:114%;
}
@media screen and (max-width:640px){
#embroidery .nameList li .font{
font-size:11pt;
}
}
#embroidery .nameList li .kind{
margin:5px auto;
width:110px;
height:20px;
line-height:20px;
color:#fff;
background:#5a4650;
}
#embroidery .colorList{
background:#fff;
max-width:870px;
margin:0 auto;
padding:30px 0;
border-radius:4px;
}
#embroidery .colorList ul{
width:90%;
margin:0 auto;
}
#embroidery .colorList ul li{
display:inline;
float:left;
width:16.666%;
text-align:center;
margin-bottom:20px;
font-size:114%;
}
@media screen and (max-width:980px){
#embroidery .colorList ul li{
width:25%;
}
}
@media screen and (max-width:640px){
#embroidery .colorList ul li{
width:33.333%;
font-size:8pt;
margin-bottom:10px;
}
}
#embroidery .colorList ul li img{
width:100%;
height:auto;
max-width:140px;
margin-bottom:10px;
}
#embroidery .colorList ul li p{
line-height:1.5;
}
#embroidery .content05 .attention{
text-align:center;
margin:5px 0;
}

#embroidery .illustList{
max-width:870px;
margin:0 auto 90px;
}
@media screen and (max-width:640px){
#embroidery .nameList{
margin:0 auto 40px;
}
}
#embroidery .illustList li{
display:inline;
float:left;
width:18.4%;
margin-right:2%;
text-align:center;
margin-bottom:20px;
font-size:114%;
}
@media screen and (max-width:640px){
#embroidery .illustList li{
width:45%;
margin-right:10%;
font-size:9pt;
}
}
#embroidery .illustList li:nth-child(5n){
margin-right:0;
}
@media screen and (max-width:640px){
#embroidery .illustList li:nth-child(5n){
margin-right:10%;
}
#embroidery .illustList li:nth-child(2n){
margin-right:0;
}
}
#embroidery .illustList li img{
width:100%;
height:auto;
}
#embroidery .content06 .originalillust{
max-width:630px;
margin:0 auto;
}
#embroidery .originalillust .blockLeft,
#embroidery .originalillust .blockRight{
width:40%;
position:relative;
}
@media screen and (max-width:640px){
#embroidery .originalillust .blockLeft,
#embroidery .originalillust .blockRight{
width:50%;
}
}
#embroidery .originalillust .img{
width:100%;
position:relative;
}
#embroidery .originalillust .img:before{
content:"";
width:100%;
height:100%;
position:absolute;
left:15px;
top:15px;
background:#fff;
}
@media screen and (max-width:640px){
#embroidery .originalillust .img:before{
display:none;
}
}
#embroidery .originalillust .img img{
width:100%;
height:auto;
position:relative;
}
#embroidery .originalillust .arrow{
position:absolute;
top:50%;
left:-30%;
font-size:56px;
line-height:1;
color:#d4bf1a;
margin-top:-55px;
}
@media screen and (max-width:640px){
#embroidery .originalillust .arrow{
position:absolute;
top:50%;
left:-9%;
font-size:23px;
margin-top:-25px;
z-index:10;
}
}
#embroidery .originalillust .note{
margin-top:15px;
}
@media screen and (max-width:640px){
#embroidery .originalillust .note{
margin-top:0;
}
}