@charset "UTF-8";
#cont {
	width:100%
}
@media screen and (min-width:741px) {
.btn_bk {
display:inline-block;
width:306px;
height:38px;
line-height:38px;
text-align:center;
outline:0;
font-family:Montserrat, sans-serif;
font-weight:400;
letter-spacing:3px
}
.btn_bk::after, .btn_bk::before {
position:absolute;
z-index:-1;
display:block;
content:''
}
.btn_bk, .btn_bk::after, .btn_bk::before {
-webkit-transition:all .3s;
transition:all .3s
}
.btn_bk {
background-color:#333;
border:2px solid #333;
color:#fff;
line-height:38px;
border-radius:20px
}
.btn_bk:hover {
background-color:#fff;
border-color:#333;
color:#333
}
.btn_bk {
display:inline-block;
width:306px;
height:38px;
line-height:38px;
text-align:center;
outline:0;
font-family:Montserrat, sans-serif;
font-weight:400;
letter-spacing:3px
}
.btn_bk::after, .btn_bk::before {
position:absolute;
z-index:-1;
display:block;
content:''
}
.btn_bk, .btn_bk::after, .btn_bk::before {
-webkit-transition:all .3s;
transition:all .3s
}
.btn_bk {
background-color:#333;
border:2px solid #333;
color:#fff;
line-height:38px;
border-radius:20px
}
.btn_bk:hover {
background-color:#fff;
border-color:#333;
color:#333
}
#sp_menu {
display:none
}
#cont_inner {
width:550px;
margin:0 auto;
padding:20px 0 60px
}
#cont h2 {
text-align:center;
font-size:25px;
color:#333;
letter-spacing:7px;
font-family:Montserrat, sans-serif;
font-weight:700
}
}
@media screen and (max-width:740px) {
.btn_bk {
display:inline-block;
width:100%;
height:38px;
line-height:38px;
text-align:center;
outline:0;
font-family:Montserrat, sans-serif;
font-weight:400;
letter-spacing:3px
}
.btn_bk::after, .btn_bk::before {
position:absolute;
z-index:-1;
display:block;
content:''
}
.btn_bk, .btn_bk::after, .btn_bk::before {
-webkit-transition:all .3s;
transition:all .3s
}
.btn_bk {
background-color:#333;
border:2px solid #333;
color:#fff;
line-height:38px;
border-radius:20px
}
.btn_bk:hover {
background-color:#fff;
border-color:#333;
color:#333
}
#sp_menu {
display:block
}
#sp_menu nav {
color:#fff;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:transparent;
z-index:9;
display:none
}
.menu_overlay {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:.8;
z-index:-1
}
.menu_btn {
margin:30px 0 0 30px;
width:31px;
height:22px;
position:relative;
overflow:visible;
line-height:13px;
font-size:1px;
float:left;
cursor:pointer;
-webkit-transition:all .4s ease-out 0s;
-moz-transition:all .4s ease-out 0s;
-o-transition:all .4s ease-out 0s;
transition:all .4s ease-out 0s
}
.menu_btn .line {
position:absolute;
background-color:#333;
overflow:hidden;
z-index:1;
width:31px;
height:2px;
left:0;
-webkit-transition:all .4s ease-out 0s;
-moz-transition:all .4s ease-out 0s;
-o-transition:all .4s ease-out 0s;
transition:all .4s ease-out 0s
}
.menu_btn .line:nth-child(1) {
top:0;
z-index:2
}
.menu_btn .line:nth-child(2) {
top:10px;
z-index:2
}
.menu_btn .line:nth-child(3) {
top:20px;
z-index:2
}
.btn_wrapper {
z-index:999;
position:absolute
}
.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform:translateY(10px) rotate(45deg);
transform:translateY(10px) rotate(45deg);
-webkit-transition:all .4s ease-out 0s;
-moz-transition:all .4s ease-out 0s;
-o-transition:all .4s ease-out 0s;
transition:all .4s ease-out 0s;
background-color:#fff
}
.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
opacity:0;
-webkit-transition:all .4s ease-out 0s;
-moz-transition:all .4s ease-out 0s;
-o-transition:all .4s ease-out 0s;
transition:all .4s ease-out 0s;
background-color:#fff
}
.btn_wrapper.clicked .menu_btn .line:nth-child(3) {
-webkit-transform:translateY(-10px) rotate(-45deg);
transform:translateY(-10px) rotate(-45deg);
-webkit-transition:all .4s ease-out 0s;
-moz-transition:all .4s ease-out 0s;
-o-transition:all .4s ease-out 0s;
transition:all .4s ease-out 0s;
background-color:#fff
}
#sp_menu nav ul {
margin:60px 0 0 0;
position:relative;
display:inline-block;
width:100%
}
#sp_menu nav ul li {
font-size:24px;
line-height:2.6;
text-align:center;
font-family:Montserrat, sans-serif;
font-weight:400;
letter-spacing:5px
}
#sp_menu nav ul li a {
color:#fff;
text-decoration:none
}
#cont_inner {
width:90%;
margin:0 auto;
padding:30px 0 100px
}
#cont h2 {
text-align:center;
font-size:20px;
color:#333;
letter-spacing:4px;
font-family:Montserrat, sans-serif;
font-weight:700
}
@media screen and (min-width:741px) {
#page_v {
background:url(../images/main_works.jpg) no-repeat center center;
background-size:cover;
width:100%;
height:300px;
position:absolute;
z-index:0;
top:205px;
left:0
}
#works_list {
margin:20px auto 0;
width:840px
}
#works_list li {
float:left;
width:320px;
margin-right:10px;
padding-top:20px
}
#works_list li span {
display:block;
background:url(../images/arrow.png) no-repeat 294px 18px;
background-color:#eee;
padding:10px 0 10px 20px
}
#fotorama {
margin-top:36px
}
#info {
margin-top:30px
}
#info .text {
width:690px;
float:right
}
#info .text h3 {
padding-top:6px;
font-weight:700;
font-size:18px;
letter-spacing:2px
}
#info .text p {
margin-top:10px
}
#info .spec {
width:230px
}
#info .spec table {
width:230px
}
#info .spec th {
font-weight:400;
border-bottom:1px solid #e5e5e5;
padding:10px 0 8px;
width:80px
}
#info .spec td {
border-bottom:1px solid #e5e5e5;
padding:10px 0 8px
}
#nav_works {
margin-top:50px;
text-align:center
}
#nav_works li {
display:inline;
line-height:1
}
.btn_contact {
margin-top:50px;
border-top:1px dotted #ccc
}
.btn_contact .txt {
text-align:center;
margin-top:26px
}
.btn_contact .more {
margin:20px auto 0;
width:320px
}
}
@media screen and (max-width:740px) {
#page_v {
background:url(../images/main_works.jpg) no-repeat center center;
background-size:cover;
width:100%;
height:150px;
position:absolute;
z-index:0;
top:115px;
left:0
}
#works_list {
margin:20px auto 0;
max-width:320px;
width:90%
}
#works_list li {
margin:30px auto 0;
max-width:320px;
width:100%
}
#works_list li:first-child {
margin:10px auto 0
}
#works_list li img {
max-width:320px;
width:100%
}
#works_list li span {
display:block;
background:url(../images/arrow@2x.png) no-repeat;
background-position:94% 46%;
background-size:7px 12px;
background-color:#eee;
padding:10px 0 10px 6%;
max-width:320px;
width:94%
}
#fotorama {
margin-top:36px
}
#info {
margin-top:30px
}
#info .text {
width:100%
}
#info .text h3 {
font-weight:700;
font-size:18px;
letter-spacing:2px
}
#info .text p {
margin-top:10px
}
#info .spec {
width:100%;
margin-top:30px
}
#info .spec table {
width:100%
}
#info .spec th {
font-weight:400;
border-bottom:1px solid #e5e5e5;
padding:12px 0 10px;
width:24%
}
#info .spec td {
border-bottom:1px solid #e5e5e5;
padding:12px 0 10px
}
#nav_works {
margin-top:50px;
text-align:center
}
#nav_works li {
display:inline;
line-height:1
}
.btn_contact {
margin-top:50px;
border-top:1px dotted #ccc
}
.btn_contact .txt {
text-align:center;
margin-top:26px
}
.btn_contact .more {
margin:20px auto 0;
max-width:320px;
width:100%
}
}
}