img{ border:none; vertical-align:bottom;} .clear{ clear:both; height:0;} .center{ text-align:center;} ul{ list-style:none; margin:0; padding:0;} p{ margin:0;} html{ overflow: auto;} body{ min-width: 1200px; overflow: hidden; margin:0 auto; padding:0; font-family: "Noto Sans Japanese";} a img:hover{ opacity:0.6; filter:alpha(opacity=60); transition: all .5s; outline: none;} /* IE8+, Chrome */ a{ outline: 0;} /* Firefox */ a::-moz-focus-inner, a::-moz-focus-inner { border: 0;} #container{ width: 100%; margin: 0 auto; position: relative;} #main{ background: url("../img/top/img_main.jpg") no-repeat center top; background-color: #f8faf7; width: 100%; height: 0; padding-top: 647px; margin-top: -80px; margin-bottom: 100px !important;} #container section{ margin-bottom: 120px; color: #333;} #container section h2{ font-size: 34px; margin: 0 0 40px; text-align: center; font-weight: normal;} #container section .btn_topArea{ width: 300px; margin: 0 auto;} #container section .btn_secArea{ width: 300px; margin: 0 auto 120px;} #container section .btn_topArea a,.btn_secArea a{ display: block;} #container section .btn_topArea img,.btn_secArea img{ width: 300px;} #container #topLead{ text-align: center;} #container #topLead h2{ font-size: 28px; text-align: center; display: block; margin: 0 auto 20px; line-height: 180%; font-weight: bold;} #container #topLead p{ margin-bottom: 50px;} #works{ width: 1200px; margin: 0 auto;} #works > p{ text-align: center; line-height: 200%; margin-bottom: 50px;} #works .worksList ul{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; margin-bottom: 50px;} #works .worksList li{ width: 376px; margin: 50px 36px 0 0;} #works .worksList li:nth-child(-n+3){ margin-top: 0;} #works .worksList li:nth-child(3n){ margin-right: 0;} #works .worksList li img{ width: 376px;} #works .worksList li p.sName{ font-size: 20px; color: #77AC6C; margin: 20px 0 10px; text-align: center;} #works .worksList li p{ line-height: 200%;} #works figure{ width: 376px; height: 300px; margin: 0 auto; position: relative; overflow: hidden; background: #000;} #works figure a{ display: block;} #works figure:after{ position: absolute; border: solid 1px #77AC6C; content: ""; display: block; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transform: scale(1.0, 1.0); transition: all .3s ease-out;} #works figure:hover:after{ opacity: 1; transform: scale(0.92, 0.88);} #works figcaption{ position: absolute; width: 100%; top: 50%; left: 50%; margin: -1em 0 0 -1em; font-size: 20px; letter-spacing: 5px; opacity: 0; transition: all .3s ease-out .2s; color: #FFF; font-size: 26px;} #works figure:hover figcaption{ letter-spacing: 1px; opacity: 1;} #works figure img{ transition: all .8s ease-out;} #works figure:hover img{ opacity: .4; transform: scale(1.3);} #column{ text-align: center;} #column .bnr_column{ margin-bottom: 20px;} #column p{ line-height: 200%;} #insta{ width: 1200px; margin: 0 auto;} #insta h3{ margin: 0 0 40px; text-align: center; font-size: 26px; font-weight: normal;} /* Second */ #secMV{ background: url("../img/common/img_sec.jpg") no-repeat center top; height: 0; padding-top: 19.7916%; margin-top: -80px; margin-bottom: 20px !important;} #container .pankuzu{ width: 1200px; margin: 20px auto 80px; font-size: 12px;} #container .pankuzu a{ color: #333; text-decoration: none;} #container .pankuzu a:hover{ color: #79AC6A; text-decoration: underline;} #company{ width: 1200px; margin: 0 auto;} #company strong{ font-size: 28px; text-align: center; display: block; margin-bottom: 40px; line-height: 180%;} #company p.lead{ font-size: 18px; text-align: center; line-height: 200%; margin-bottom: 100px;} #company .outline{ width: 700px; margin: 0 auto 120px;} #company .outline table{ width: 100%; border-top: #666 solid 1px; border-collapse: collapse;} #company .outline tr{ border-bottom: #B2B2B2 solid 1px;} #company .outline tr:last-child{ border-bottom: #666 solid 1px;} #company .outline th{ color: #79AC6A; width: 180px; padding: 20px 0; font-weight: normal;} #company .outline td{ padding: 20px 20px 20px 70px;} #company .outline td a{ color: #79AC6A;} #company .outline td a:hover{ color: #79AC6A; text-decoration: underline;} #company .gmap{ width: 1200px; margin-bottom: 120px;} #company .btn_company{ width: 450px; margin: 0 auto 120px;} #company .btn_company img{ width: 450px;} #company .link ul{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between;} #company .link li{ width: 376px; margin-bottom: 36px;} #company .link li:nth-child(n + 4){ margin-bottom: 0;} #company .link li img{ width: 376px;} /* #company a{ display: block;} */ #column .lead{ font-size: 18px; text-align: center; line-height: 200%; margin-bottom: 100px;} #column .columnList{ width: 1000px; margin: 0 auto;} #column .columnList li{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;} #column .columnList li:nth-child(odd){ flex-direction: row;} #column .columnList li:nth-child(even){ flex-direction: row-reverse;} #column .columnList li:last-child{ margin-bottom: 0;} #column .columnList li .img{ width: 50%;} #column .columnList li .img img{ width: 100%;} #column .columnList li .textBox{ width: 50%; display: flex; flex-direction: column; justify-content: center; background: #F8F8F6; padding: 0 100px; box-sizing: border-box;} #column .columnList li .textBox .column_num{ margin: 0 0 25px;} #column .columnList li .textBox .column_num img{ height: 25px;} #column .columnList li .textBox h3{ font-size: 30px; margin: 0 auto 40px; font-weight: normal; line-height: 1.6;} #column .columnList li .textBox .btn_column a{ background: #77AC6C; transition: all 0.5s; font-size: 24px; color: #ffffff; padding: 20px; box-sizing: border-box; display: block;} #column .columnList li .textBox .btn_column a:hover{ opacity: 0.7;} #column .columnList li .textBox .btn_column_img{ width: 300px; margin: 0 auto;} #column .columnList li .textBox .btn_column_img a{ display: block;} #column .columnList li .textBox .btn_column_img img{ width: 300px;} #columnSec{ width: 100%; margin-bottom: 0 !important;} #columnSec h2{ color: #79AC6A; margin: 0 0 75px !important; font-size: 40px;} #columnSec h2 strong{ display: flex; align-items: center; width: 400px; margin: 0 auto; font-size: 36px;} #columnSec h2 strong::before,#columnSec h2 strong::after{ content: ""; flex-grow: 1; height: 1px; background: #79AC6A; display: block;} #columnSec h2 strong::before{ margin-right: 20px;} #columnSec h2 strong::after{ margin-left: 20px;} #columnSec h2 span{ display: block; font-size: 24px; color: #333; margin: 12px 0;} #columnSec .colWrap{ width: 1200px; margin: 0 auto 100px; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: top;} #columnSec .colWrap_rev{ flex-direction: row-reverse;} #columnSec .colWrapImg{ width: 600px;} #columnSec .colWrapImg img{ width: 600px;} #columnSec .colWrapTxt{ width: 520px;} #columnSec .colWrapWide{ width: 1200px; margin: 0 auto 100px;} #columnSec h3{ font-size: 24px; margin: 0 0 20px; line-height: 170%;} #columnSec h3::after{ background: #79AC6A; content: ''; display: block; height: 1px; margin: 25px 0 0; width: 90px} #columnSec p{ line-height: 200%;} #columnSec .intro{ width: 700px; margin: 0 auto 100px; border: #79AC6A solid 1px; text-align: center; padding: 40px 0; box-sizing: border-box;} #columnSec .intro p.shopName{ font-size: 30px; line-height: 150%;} #columnSec .intro p.shopName span{ font-size: 22px; display: block; color: #79AC6A; line-height: 150%;} #columnSec .intro p.add{ margin: 15px 0 25px;} #columnSec .btn_hp{ width: 280px; margin: 0 auto;} #columnSec .btn_hp a{ display: block;} #columnSec .btn_hp img{ width: 280px;} #columnSec .bgArea{ width: 100%; background: #F8F8F6; text-align: center; padding: 80px 0 120px;} #columnSec .bgArea h4{ font-size: 32px; margin: 0;} #columnSec .bgArea h5{ color: #79AC6A; font-size: 22px; margin: 50px 0 20px;} #columnSec .bgArea h5::after{background: #79AC6A; content: ''; display: block; height: 1px; margin: 5px auto 0; width: 90px} #columnSec .bgArea h5 span{ font-size: 40px;} #columnSec .bgArea p{ line-height: 200%;} #worksSec{ width: 1200px; margin: 0 auto;} #worksSec .lead{ font-size: 18px; text-align: center; line-height: 200%; margin-bottom: 100px;} #worksSec .filterList{ width: 100%; display: flex; justify-content: space-between; text-align: center; margin-bottom: 100px;} #worksSec .filterList p{ cursor: pointer; transition: all 0.5s; background: #F5F5F5; width: 200px; font-size: 22px; padding: 25px; box-sizing: border-box; position: relative; display: flex; align-items: center; color: #333333; letter-spacing: 2px;} #worksSec .filterList p::after{ content: ""; display: block; position: absolute; border-top: 1px solid #fff; border-right: 1px solid #fff; height: 10px; width: 10px; transform: rotate(135deg); top: calc(50% - 8px); right: 25px; opacity: 0; transition: all 0.5s;} #worksSec .filterList p span{ width: 100%; text-align: center; margin: 0 auto;} #worksSec .filterList p.active{ background: #77AC6C; color: #ffffff;} #worksSec .filterList p.active::after{ opacity: 1; transform: rotate(495deg);} #worksSec .filterList p:hover{ opacity: 0.6;} #worksSec .filterList .categoryBox{ width: 990px;} #worksSec .filterList .categoryBox ul{ display: flex; justify-content: flex-start; flex-wrap: wrap;} #worksSec .filterList .categoryBox ul li{ width: 190px; background: #F5F5F5; padding: 20px; box-sizing: border-box; margin: 10px 10px 0 0; cursor: pointer; transition: all 0.5s; color: #333333; position: relative; letter-spacing: 1px; display: flex; flex-direction: column; justify-content: center; align-items: center;} #worksSec .filterList .categoryBox ul li span{ font-size: 12px; display: inline-block;} #worksSec .filterList .categoryBox ul li span sup{ font-size: 8px;} #worksSec .filterList .categoryBox ul li:hover{ opacity: 0.6;} #worksSec .filterList .categoryBox ul li.active-jp.active{ background: #6E6C9B; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-wst.active{ background: #E59855; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-ch.active{ background: #E56B59; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-cafe.active{ background: #C29C82; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-wed.active{ background: #BCB6A5; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-sales.active{ background: #E59A9F; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-bath.active{ background: #6C96AC; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-fac.active{ background: #B0B0BE; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-other.active{ background: #96C2D6; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-tb30under.active{ background: #B8B8B8; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-tb30upper.active{ background: #888888; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-tb100upper.active{ background: #4D4D4D; color: #ffffff;} #worksSec .filterList .categoryBox ul li::after{ content: ""; display: block; position: absolute; border-top: 1px solid #fff; border-right: 1px solid #fff; height: 10px; width: 10px; transform: rotate(135deg); top: calc(50% - 8px); right: 25px; opacity: 0; transition: all 0.5s;} #worksSec .filterList .categoryBox ul li:nth-child(-n+5){ margin-top: 0;} #worksSec .filterList .categoryBox ul li:nth-child(5), #worksSec .filterList .categoryBox ul li:last-child{ margin-right: 0;} #worksSec .filterList .categoryBox ul li.pc-last{ margin-right: 200px !important;} #worksSec .filterList .categoryBox ul li.active::after{ opacity: 1; transform: rotate(495deg);} #worksSec .worksList { display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: top;} #worksSec .worksList li{ width: 376px; margin-bottom: 50px; text-transform:none !important;} #worksSec .worksList li.mix{ display: none; opacity:0; vertical-align:top;} #worksSec .worksList li.gap{ display: block; width: 376px; margin: 0;} #worksSec .worksList li img{ width: 376px;} #worksSec .worksList li p{ line-height: 180%;} #worksSec .worksList li a{ display: block;} #worksSec .worksList li figure{ width: 376px; margin: 0 auto; position: relative; overflow: hidden; display: block; background: #000; margin-bottom: 15px;} #worksSec .worksList li figure:after{ position: absolute; border: solid 1px #77AC6C; content: ""; display: block; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transform: scale(1.0, 1.0); transition: all .3s ease-out;} #worksSec .worksList li a:hover figure:after{ opacity: 1; transform: scale(0.92, 0.88);} #worksSec .worksList li figcaption{ position: absolute; width: 100%; top: 50%; left: 50%; margin: -1em 0 0 -1em; letter-spacing: 5px; opacity: 0; transition: all .3s ease-out .2s; color: #FFF; font-size: 26px;} #worksSec .worksList li a:hover figure figcaption{ letter-spacing: 1px; opacity: 1;} #worksSec .worksList li figure img{ transition: all .8s ease-out;} #worksSec .worksList li a:hover figure img{ opacity: .4; transform: scale(1.3);} #worksSec .worksList li .categoryList{ display: flex; font-size: 14px; margin-bottom: 30px;} #worksSec .worksList li .categoryList li{ width: 90px; margin: 0 5px 0 0; display: block; text-align: center; padding: 5px 5px; color: #ffffff;} #worksSec .worksList li .categoryList li.bgJp{ background: #6E6C9B;} #worksSec .worksList li .categoryList li.bgWst{ background: #E59855;} #worksSec .worksList li .categoryList li.bgCh{ background: #E56B59;} #worksSec .worksList li .categoryList li.bgCafe{ background: #C29C82;} #worksSec .worksList li .categoryList li.bgWed{ background: #BCB6A5;} #worksSec .worksList li .categoryList li.bgSales{ background: #E59A9F;} #worksSec .worksList li .categoryList li.bgBath{ background: #6C96AC;} #worksSec .worksList li .categoryList li.bgFac{ background: #B0B0BE;} #worksSec .worksList li .categoryList li.bgOther{ background: #96C2D6;} #worksSec .worksList li .categoryList li.bgTb30under{ background: #B8B8B8;} #worksSec .worksList li .categoryList li.bgTb30upper{ background: #888888;} #worksSec .worksList li .categoryList li.bgTb100upper{ background: #4D4D4D;} #worksSec .worksList li .ttl{ font-size: 20px; margin-bottom: 10px; } #worksSec .worksList li .text a { color: #000000; display:inline;} #worksSec .worksList li .text a:hover { text-decoration: underline; } #page-top { margin: 0; padding: 0; display: none; position: fixed; right: 2%; bottom: 5%; z-index: 100;} #page-top #move-page-top{ width: 12px; display: block; cursor: pointer;} #page-top #move-page-top img{ width: 12px;} footer{ width: 100%; background: #F0F6EF; border-top: #79AC6A solid 1px; padding: 50px 0 60px;} #footWrap{ width: 1200px; margin: 0 auto; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between;} #footWrap address{ width: 370px; font-style: normal;} #footWrap address p{ line-height: 190%;} #footWrap .footLogo{ margin-bottom: 20px;} #footWrap .footLogo img{ width: 110px;} #footWrap .footLogo span{ display: inline-block; margin-left: 30px; line-height: 45px;} #footWrap .footR{ width: 580px;} #footWrap .footR::after{ content:""; display:block; clear:both;} #footWrap .footContact{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} #footWrap .footContact .tel{ width: 240px;} #footWrap .footContact .tel img{ width: 240px;} #footWrap .footContact .btn_contact{ width: 300px;} #footWrap .footContact .btn_contact img{ width: 300px;} #footWrap .footNav{ width: 400px; margin: 20px 0 30px; float: right;} #footWrap .footNav ul{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} #footWrap .footNav li a{ color: #333; text-decoration: none;} #footWrap .footNav li a:hover{ color: #79AC6A; text-decoration: underline;} #footWrap small{ float: right; font-size: 12px;} .mb80{margin-bottom: 80px;} .emphasis{ font-weight: bold; font-size: 110%;} .pc{ display:inherit !important;} .sp{ display:none !important;} @media screen and (max-width: 736px){ html {-webkit-text-size-adjust:none; margin:0 auto; padding:0;} body{ min-width: 100%; margin:0 auto; font-family: "Noto Sans Japanese";} img{ width:100%; height:auto; vertical-align:bottom;} a img:hover{ opacity:1; filter:alpha(opacity=100); transition: all 0;} .clear{ clear:both; height:0;} .center{ text-align:center;} ul{ list-style:none; margin:0; padding:0;} p{ margin:0;} #container{ width: 100%; margin: 0 auto; position: relative; font-size: 14px;} #main{ background: url("../img/top/img_main_sp.jpg") no-repeat center bottom; background-color: #f8faf7; height: 0; background-size: 100%; padding-top: calc(100% + 48px); margin-top: 0; margin-bottom: 10% !important;} #container section{ margin-bottom: 15%; color: #333;} #container section h2{ font-size: 20px; margin: 0 0 8%; text-align: center; font-weight: normal;} #container section .btn_topArea{ width: 70%; margin: 0 auto;} #container section .btn_secArea{ width: 70%; margin: 0 auto 10%;} #container section .btn_topArea a,.btn_secArea a{ display: block;} #container section .btn_topArea img,.btn_secArea img{ width: 100%;} #container #topLead{ text-align: center; margin: 0 5% 10%;} #container #topLead h2{ font-size: 18px; text-align: center; display: block; margin: 0 auto 5%; line-height: 180%; font-weight: bold;} #container #topLead p{ line-height: 1.8; margin-bottom: 10%;} #about{ margin: 0 5%; text-align: center;} #about p{ font-size: 16px; line-height: 160%; margin-bottom: 10%; text-align: left;} #works{ width: auto; margin: 0 5%;} #works > p{ text-align: left; line-height: 200%; margin-bottom: 5%;} #works .worksList ul{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 10%;} #works .worksList li{ width: 100%; margin: 0 0 7%;} #works .worksList li:nth-child(-n+3){ margin-top: 0;} #works .worksList li:nth-child(3n){ margin-right: 0;} #works .worksList li:last-child{ margin-bottom: 0;} #works .worksList li img{ width: 100%;} #works .worksList li p.sName{ font-size: 15px; color: #77AC6C; margin: 5% 0 3%; text-align: center;} #works .worksList li p{ line-height: 140%;} #works figure{ width: auto; height: auto; margin: 0 auto; position: relative; overflow: hidden; background: #000;} #works figure a{ display: block;} #works figure:after{ position: absolute; border: solid 1px #77AC6C; content: ""; display: block; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transform: scale(1.0, 1.0); transition: all .3s ease-out;} #works figure:hover:after{ opacity: 1; transform: scale(0.92, 0.88);} #works figcaption{ position: absolute; width: 100%; top: 50%; left: 50%; margin: -0.9em 0 0 -1.1em; letter-spacing: 5px; opacity: 0; transition: all .3s ease-out .2s; color: #FFF; font-size: 20px;} #works figure:hover figcaption{ letter-spacing: 1px; opacity: 1;} #works figure img{ transition: all .8s ease-out;} #works figure:hover img{ opacity: .4; transform: scale(1.3);} #column{ margin: 0 5%; text-align: center;} #column .bnr_column{ margin-bottom: 5%;} #column p{ line-height: 160%; text-align: center;} #insta{ width: auto; margin: 0 5%;} #insta h3{ margin: 0 0 8%; text-align: center; font-size: 20px; font-weight: normal;} /*#insta ul.instagram{ width: auto; margin: 0 auto; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} #insta ul.instagram li{ width: 49%; height: auto; overflow: hidden;} #insta ul.instagram li img{ width: 100%; height: auto;}*/ /* Second */ #secMV{ background: url("../img/common/img_sec_sp.jpg") no-repeat center top; height: 0; background-size: cover; padding-top: 43.2432%; margin-top: 0; margin-bottom: 3% !important;} #container .pankuzu{ width: auto; margin: 0 5% 15%; padding-top: calc(48px + 3%); font-size: 12px;} #container .pankuzu a{ color: #333; text-decoration: none;} #container .pankuzu a:hover{ color: #79AC6A; text-decoration: underline;} #company{ width: auto; margin: 0 5%;} #company strong{ font-size: 16px; text-align: center; display: block; margin-bottom: 10%; line-height: 160%;} #company p.lead{ font-size: 14px; text-align: left; line-height: 160%; margin-bottom: 15%;} #company .outline{ width: auto; margin: 0 auto 15%;} #company .outline table{ width: 100%; border-top: #666 solid 1px; border-collapse: collapse;} #company .outline tr{ border-bottom: #B2B2B2 solid 1px;} #company .outline tr:last-child{ border-bottom: #666 solid 1px;} #company .outline th{ color: #79AC6A; width: 80px; padding: 5% 0; font-weight: normal;} #company .outline td{ padding: 5%;} #company .outline td a{ color: #79AC6A;} #company .outline td a:hover{ color: #79AC6A; text-decoration: underline;} #company .gmap{ width: 100%; position: relative; padding-bottom: 56.25%; height:0; overflow:hidden; margin-bottom: 15%;} #company .gmap iframe{ position:absolute; top:0; left:0; width:100%; height:100%;} #company .btn_company{ width: 80%; margin: 0 auto 15%;} #company .btn_company img{ width: 100%;} #company .link ul{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between;} #company .link li{ width: 49%; margin-bottom: 2%;} #company .link li:nth-child(n + 4){ margin-bottom: 2%;} #company .link li:nth-child(n + 5){ margin-bottom: 0;} #company .link li img{ width: 100%;} /* #company a{ display: block;} */ #column .lead{ font-size: 16px; text-align: center; line-height: 160%; margin-bottom: 10%;} #column .columnList{ width: 100%; margin: 0 auto;} #column .columnList li{ display: block; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10%;} #column .columnList li:nth-child(odd){ flex-direction: row;} #column .columnList li:nth-child(even){ flex-direction: row-reverse;} #column .columnList li:last-child{ margin-bottom: 0;} #column .columnList li .img{ width: 100%;} #column .columnList li .img img{ width: 100%;} #column .columnList li .textBox{ width: 100%; display: block; flex-direction: column; justify-content: center; background: #F8F8F6; padding: 7%; box-sizing: border-box;} #column .columnList li .textBox .column_num{ margin: 0 0 5%;} #column .columnList li .textBox .column_num img{ height: 20px; width: auto;} #column .columnList li .textBox h3{ font-size: 20px; margin: 0 auto 8%; font-weight: normal; line-height: 1.6;} #column .columnList li .textBox .btn_column a{ background: #77AC6C; transition: all 0.5s; font-size: 16px; color: #ffffff; padding: 3% 5%; box-sizing: border-box; display: block;} #column .columnList li .textBox .btn_column a:hover{ opacity: 0.7;} #column .columnList li .textBox .btn_column_img{ width: 100%; margin: 0 auto;} #column .columnList li .textBox .btn_column_img a{ display: block;} #column .columnList li .textBox .btn_column_img img{ width: 100%;} #columnSec{ width: 100%; margin-bottom: 0 !important;} #columnSec h2{ color: #79AC6A; margin: 0 0 8% !important; font-size: 20px;} #columnSec h2 strong{ display: flex; align-items: center; width: 60%; margin: 0 auto; font-size: 16px;} #columnSec h2 strong::before,#columnSec h2 strong::after{ content: ""; flex-grow: 1; height: 1px; background: #79AC6A; display: block;} #columnSec h2 strong::before{ margin-right: 4%;} #columnSec h2 strong::after{ margin-left: 4%;} #columnSec h2 span{ display: block; font-size: 14px; color: #333; margin: 1% 0;} #columnSec .colWrap{ width: auto; margin: 0 5% 10%; display: block; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: top;} #columnSec .colWrap_rev{ flex-direction: row-reverse;} #columnSec .colWrapImg{ width: auto; margin-bottom: 5%;} #columnSec .colWrapImg img{ width: 100%;} #columnSec .colWrapTxt{ width: auto;} #columnSec .colWrapWide{ width: auto; margin: 0 5% 10%;} #columnSec h3{ font-size: 16px; margin: 0 0 5%; line-height: 170%;} #columnSec h3::after{ background: #79AC6A; content: ''; display: block; height: 1px; margin: 5% 0 0; width: 90px} #columnSec p{ line-height: 180%;} #columnSec .intro{ width: auto; margin: 0 5% 10%; border: #79AC6A solid 1px; text-align: center; padding: 6% 0; box-sizing: border-box;} #columnSec .intro p.shopName{ font-size: 16px; line-height: 150%;} #columnSec .intro p.shopName span{ font-size: 14px; display: block; color: #79AC6A; line-height: 150%;} #columnSec .intro p.add{ margin: 5% 0; font-size: 12px;} #columnSec .btn_hp{ width: 70%; margin: 0 auto;} #columnSec .btn_hp a{ display: block;} #columnSec .btn_hp img{ width: 100%;} #columnSec .bgArea{ width: 100%; background: #F8F8F6; text-align: center; padding: 10% 5% 15%;} #columnSec .bgArea h4{ font-size: 16px; margin: 0;} #columnSec .bgArea h5{ color: #79AC6A; font-size: 14px; margin: 10% 0 5%;} #columnSec .bgArea h5::after{background: #79AC6A; content: ''; display: block; height: 1px; margin: 5px auto 0; width: 90px} #columnSec .bgArea h5 span{ font-size: 20px;} #columnSec .bgArea p{ line-height: 180%; text-align: left;} #worksSec{ width: auto; margin: 0 5%;} #worksSec .lead{ font-size: 16px; text-align: center; line-height: 160%; margin-bottom: 10%;} #worksSec .filterList{ width: 100%; display: block; margin-bottom: 10%; text-align: center !important;} #worksSec .filterList p{ cursor: pointer; background: #F5F5F5; width: 100%; font-size: 16px; padding: 3% 5%; box-sizing: border-box; position: relative; display: flex; align-items: center !important; color: #333333; margin-bottom: 4%; letter-spacing: 2px;} #worksSec .filterList p span{ width: 100%; text-align: center; margin: 0 auto;} #worksSec .filterList p::after{ content: ""; display: block; position: absolute; border-top: 1px solid #fff; border-right: 1px solid #fff; height: 10px; width: 10px; transform: rotate(135deg); top: calc(50% - 8px); right: 5%; opacity: 0; transition: all 0.5s;} #worksSec .filterList p.active{ background: #77AC6C; color: #ffffff;} #worksSec .filterList p.active::after{ opacity: 1; transform: rotate(495deg);} #worksSec .filterList p:hover{ opacity: 1;} #worksSec .filterList .categoryBox{ width: 100%;} #worksSec .filterList .categoryBox ul{ display: flex; justify-content: flex-start; flex-wrap: wrap;} #worksSec .filterList .categoryBox ul li{ width: 48%; background: #F5F5F5; padding: 3% 5%; box-sizing: border-box; margin: 4% 4% 0 0; cursor: pointer; transition: all 0.5s; color: #333333; position: relative; letter-spacing: 1px; display: flex; flex-direction: column; justify-content: center; align-items: center;} #worksSec .filterList .categoryBox ul li span{ font-size: 10px; display: inline-block;} #worksSec .filterList .categoryBox ul li span sup{ font-size: 6px;} #worksSec .filterList .categoryBox ul li:hover{ opacity: 1;} #worksSec .filterList .categoryBox ul li.active-jp.active{ background: #6E6C9B; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-wst.active{ background: #E59855; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-ch.active{ background: #E56B59; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-cafe.active{ background: #C29C82; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-wed.active{ background: #BCB6A5; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-sales.active{ background: #E59A9F; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-bath.active{ background: #6C96AC; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-fac.active{ background: #B0B0BE; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-other.active{ background: #96C2D6; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-tb30under.active{ background: #B8B8B8; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-tb30upper.active{ background: #888888; color: #ffffff;} #worksSec .filterList .categoryBox ul li.active-tb100upper.active{ background: #4D4D4D; color: #ffffff;} #worksSec .filterList .categoryBox ul li::after{ content: ""; display: block; position: absolute; border-top: 1px solid #fff; border-right: 1px solid #fff; height: 10px; width: 10px; transform: rotate(135deg); top: calc(50% - 8px); right: 10%; opacity: 0; transition: all 0.5s;} #worksSec .filterList .categoryBox ul li:nth-child(-n+5){ margin-top: 4%;} #worksSec .filterList .categoryBox ul li:nth-child(-n+2){ margin-top: 0;} #worksSec .filterList .categoryBox ul li:nth-child(5){ margin-right: 4% !important;} #worksSec .filterList .categoryBox ul li:nth-child(even), #worksSec .filterList .categoryBox ul li:last-child{ margin-right: 0;} #worksSec .filterList .categoryBox ul li.pc-last{ margin-right: 4% !important;} #worksSec .filterList .categoryBox ul li.active::after{ opacity: 1; transform: rotate(495deg);} #worksSec .worksList { display: block; } #worksSec .worksList li{ width: 100%; margin-bottom: 7%;} #worksSec .worksList li.mix{ display: none; opacity:0; vertical-align:top;} #worksSec .worksList li.gap{ display: block; width: 100%; margin: 0;} #worksSec .worksList li img{ width: 100%;} #worksSec .worksList li p{ line-height: 140%;} #worksSec .worksList li a{ display: block;} #worksSec .worksList li figure{ width: 100%; margin: 0 auto; position: relative; overflow: hidden; background: #000; margin-bottom: 15px; display: block;} #worksSec .worksList li figure:after{ position: absolute; border: solid 1px #77AC6C; content: ""; display: block; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transform: scale(1.0, 1.0); transition: all .3s ease-out;} #worksSec .worksList li a:hover figure:after{ opacity: 1; transform: scale(0.92, 0.88);} #worksSec .worksList li figcaption{ position: absolute; width: 100%; top: 50%; left: 50%; margin: -0.9em 0 0 -1.1em; letter-spacing: 5px; opacity: 0; transition: all .3s ease-out .2s; color: #FFF; font-size: 20px;} #worksSec .worksList li a:hover figure figcaption{ letter-spacing: 1px; opacity: 1;} #worksSec .worksList li figure img{ transition: all .8s ease-out;} #worksSec .worksList li a:hover figure img{ opacity: .4; transform: scale(1.3);} #worksSec .worksList li .categoryList{ display: flex; font-size: 12px; margin-bottom: 5%;} #worksSec .worksList li .categoryList li{ width: 80px; margin: 0 5px 0 0; display: block; text-align: center; padding: 5px 5px; color: #ffffff;} #worksSec .worksList li .categoryList li.bgJp{ background: #6E6C9B;} #worksSec .worksList li .categoryList li.bgWst{ background: #E59855;} #worksSec .worksList li .categoryList li.bgCh{ background: #E56B59;} #worksSec .worksList li .categoryList li.bgCafe{ background: #C29C82;} #worksSec .worksList li .categoryList li.bgWed{ background: #BCB6A5;} #worksSec .worksList li .categoryList li.bgSales{ background: #E59A9F;} #worksSec .worksList li .categoryList li.bgBath{ background: #6C96AC;} #worksSec .worksList li .categoryList li.bgFac{ background: #B0B0BE;} #worksSec .worksList li .categoryList li.bgOther{ background: #96C2D6;} #worksSec .worksList li .categoryList li.bgTb30under{ background: #B8B8B8;} #worksSec .worksList li .categoryList li.bgTb30upper{ background: #888888;} #worksSec .worksList li .categoryList li.bgTb100upper{ background: #4D4D4D;} #worksSec .worksList li .ttl{ font-size:18px; margin-bottom: 3%; } #page-top { margin: 0; padding: 0; display: none; position: fixed; right: 2%; bottom: 5%; z-index: 100;} #page-top #move-page-top{ width: 12px; display: block; cursor: pointer;} #page-top #move-page-top img{ width: 12px;} footer{ width: 100%; background: #F0F6EF; border-top: #79AC6A solid 1px; padding: 10% 5%;} #footWrap{ width: auto; margin: 0 auto; display: block; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between;} #footWrap address{ width: auto; font-style: normal; margin-bottom: 5%;} #footWrap address p{ line-height: 160%;} #footWrap .footLogo{ margin-bottom: 5%;} #footWrap .footLogo img{ width: 80px;} #footWrap .footLogo span{ display: inline-block; margin-left: 5%; line-height: 32px;} #footWrap .footR{ width: auto;} #footWrap .footR::after{ content:""; display:block; clear:both;} #footWrap .footContact{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} #footWrap .footContact .tel{ width: 48%;} #footWrap .footContact .tel img{ width: 100%;} #footWrap .footContact .btn_contact{ width: 48%;} #footWrap .footContact .btn_contact img{ width: 100%;} #footWrap .footNav{ width: 86%; margin: 5% auto 5%; float: none;} #footWrap .footNav ul{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} #footWrap .footNav li a{ color: #333; text-decoration: none; font-size: 12px;} #footWrap .footNav li a:hover{ color: #79AC6A; text-decoration: underline;} #footWrap small{ float: none; font-size: 12px;} .mb80{margin-bottom: 5%;} .emphasis{ font-weight: bold; font-size: 110%;} #page-top { margin: 0; padding: 0; display: none; position: fixed; right: 2%; bottom: 5%; z-index: 100;} #page-top #move-page-top{ width: 12px; display: block; cursor: pointer;} #page-top #move-page-top img{ width: 12px;} .pc{ display:none !important;} .sp{ display:inherit !important;} }