@charset "UTF-8";
/*スマホ用
----------------------------------*/
/*@media only screen and (max-width: 1035px) {
  .FEATURE-box .text {width: 100%;}
.FEATURE-box .right {width: 100%;}
.FEATURE-box .left {width: 100%;}  
}*/

@media only screen and (max-width: 1000px) {


}
@media only screen and (max-width: 680px) {

.first-btn {display: block;}
















/*btn-navi*/
.Btn-navi {right: 10px; bottom: 50px; /*bottom: 115px;*/ position: fixed; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi .name {font-weight: bold; position: relative; bottom: -18px; vertical-align:middle; text-align:center; color:#fff; font-size:10px; line-height: 1em; }
.Btn-navi .menuBtn {display: inline-block; position: relative; width: 45px; height: 15px;}
.menu-icon {display: block; position: absolute; top: 35%; left: 48%; width: 28px; height: 2px; margin: -1px 0 0 -12px; background: #fff; transition: .2s;}
.menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 50%; left: 0; width: 28px; height: 2px; background: #fff; transition: .3s;}
.menu-icon:before {margin-top: -8px;}
.menu-icon:after {margin-top: 6px;}
.menuBtn:hover .menu-icon:before {margin-top: -10px;}
.menuBtn:hover .menu-icon:after {margin-top: 8px;}
.Btn-navi.close .name { color:#fff; overflow: hidden; left: 0px; width: 100%; font-size: 10px; line-height: 14px; text-align: center; font-weight: bold; height: 12px;}
.Btn-navi.close .name:before {display: block; content: 'CLOSE'; overflow: hidden; margin-right: 20px: }
.Btn-navi.close .menu-icon:before,.Btn-navi.close .menu-icon:after {background: #fff;}
.Btn-navi.close .menuBtn .menu-icon {background: transparent;}
.Btn-navi.close .menuBtn .menu-icon:before, .Btn-navi.close .menuBtn .menu-icon:after {margin-top: 0;}
.Btn-navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.Btn-navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
#mainhead .Btn-navi{ position: absolute; left:5px; top:5px; }
#mainhead .Btn-navi.close { opacity: 0; display: none;}
#fixBtn-navi {position: fixed;  width: auto; bottom: 20px; right:15px;}
#fixBtn-navi.Btn-navi .menuBtn { display: block; background-color:#333; border-radius: 10px; padding:10px 0px 0px;}
#fixBtn-navi.Btn-navi .menuBtn .menu-icon {margin-top: -6px;}
#fixBtn-navi .menu-icon,#fixBtn-navi .menu-icon:before,#fixBtn-navi .menu-icon:after {background-color: #fff;}
#fixBtn-navi .menu-icon:before{margin-top: -7px;}
#fixBtn-navi .menu-icon:after {margin-top: 5px;}
#fixBtn-navi.close .menu-icon:before,#fixBtn-navi.close .menu-icon:after {margin-top: 0;}
#fixBtn-navi.close .menu-icon {background: transparent;}
#fixBtn-navi .name { color: #666; display: block; position: relative; left:0px; bottom: -17px;}
#fixBtn-navi .name:before { display: inline; content: 'MENU';}
#fixBtn-navi.close .name:before { display: inline; content: 'CLOSE';}
#fixBtn-navi.close .name { color: #666;}
#cavor.Btn-navi {width: 100%; height: 100%; position: fixed; top:0px; left: -100%; transition:0s;  z-index: 999;}
#cavor.Btn-navi .menuBtn {display:block; width: 100%; height: 100%; background:rgba(255,255,255,0.6); }
#cavor.close { left: 0px; }
.navi {
    background-color: #fff; /*メニュー背景色*/
    color: #fff;
    font-weight: bold;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    left: -70%; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: .2s; /*0.3s は変化するのにかかる時間*/
    width: 70%; /*メニュー横幅①*/
    z-index: 1000;
}
.Btn-navi:hover + .navi-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}
/*.navi-background {width: 100%; height: 100%; position: fixed; top: 0px; left: 0%; transition: 0s; z-index: 999;}*/
.navi-background a.background-btn{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.6);}
.navi.open { left: 0; }
.navi-background {z-index: 999; display: none; position: fixed; width: 100%; height: 100%; top: 0; left:0; }
.navi-background.open {display: block; background: rgba(255,255,255,0.6); }
.navi.open {padding-bottom: 10px; padding-top: 30px; text-align: center;}
.navi.open ul li {font-size: 14px; margin-bottom: 25px;}
.navi.open ul li a {text-decoration: none;}
.Btn-navi_first {padding: 5px; background: #816a29; width: 40px; display:none; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi_first .name { vertical-align:middle; text-align:center; color:#ffffff; font-size:13px; line-height: 1em; }
.Btn-navi_first .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;}
/*footer .navi ul {display: block; padding: 30px 0px;}*/
footer .navi ul {
    font-size: 12px;
    height: 280px;
    overflow: auto;
    /* background-color: #FFF; */
    padding: 10px 10px;
    margin-bottom: 15px;
    /* border: 1px solid #CCC; */
    display: block;
    padding: 30px 0px;
}




.Btn-navi a {text-decoration: none; padding: 23px 5px; border-radius: 10px; background: #666; color: #fff; width: 40px; display:block;}
.Btn-navi a:hover {opacity: 1.0 !important;}






























.sp-area {display: block;}
.pc-area {display: none;}

/* header */
#page-top {bottom: 50px !important; right: 10px; display: none !important;}
#page-top a {width: 55px;}
header#sp-monitor-area {padding: 0px 0; height: auto !important; position: initial !important;}
header #headerInner {display: none;}
header #inquiry {display: none;}
header #nav {display: none;}
header h1 {margin: 30px auto; display: block; width: 60% !important; height: auto; text-align: center; position: initial !important;}
header h1 img {width: 100%; height: auto; margin-left: 20px;}
header .bx-wrapper li {width: 100%; height: auto;}

.bx-controls {display: none;}
/* footer */
footer {padding-bottom: 50px;}
footer .logo img {width: 100%; height: auto; margin-left: 20px;}
.sp-contact-btn {position: fixed; bottom: 0; left: 0; width: 100%; color: #666; background: #7cdafc; font-weight: bold; border-radius: 10px 10px 0 0;text-align: center; text-decoration: none !important; padding: 5px 0; display: block;}

/* index */
#top_works,#top_media {width: 94%; height: auto; margin: auto;}
#top_blog {width: 94%; height: auto; border-bottom: none;}
#top_message {width: 94%; height: auto;}
#top_access {width: 94%; height: auto;}
#mainimg {width: 100%; height: auto; margin-top: 0;}
#mainimg .bx-wrapper {/*height: calc(100vh - 64px);*/ margin-bottom: 100px;}
#mainimg .bx-wrapper li {width: 100%;}
#mainimg .bx-viewport {z-index: 0;}
#mainimg img {width: 100%; height: auto;}
#top_media ul {width: 100%;}
#top_works .box {width: 43%; margin-right: 0; height: auto; margin: 0 3% 30px !important; margin-bottom: 30px;}
#top_works .box h3 {width: 100%; text-align: center; font-size: 13px;}
#top_works .box .photo img {width: 100%; height: auto;}
#top_works .box .photo {width: 100%; height: auto;}
#top_media li {width: 100%; height: auto; float: none; font-size: 16px; line-height: 1.7em; margin-bottom: 50px; display: flex;}
#top_media li img {width: 100%; height: auto;}
#top_media li br {display: none;}
#top_media li p.photo {width: 35%; margin: 0 2%;}
#top_media li p {width: 58%; margin: 0 2%; font-size: 12px; line-height: 1.5em;}
#top_blog .blogbox {height: auto;}
#top_blog .box {float: none; padding: 0; height: auto; border-left: none; border-right: none; width: 100%; margin-bottom: 60px; font-size: 16px;}
#top_blog .box .photo,#top_blog .box h3 {margin-bottom: 10px;}
#top_blog .box h3 {/*text-align: center;*/}
#top_blog .box .photo img {width: 100%; height: auto;}
#top_blog .box {display: flex;}
#top_blog .box .photo-area {width: 30%;}
#top_blog .box .text {width: 70%;margin-left: 5%;}
#top_blog .box .date {width: 100%;}


#top_blog .box.blogbox__item {float: none; padding: 0; height: auto; border-left: none; border-right: none; width: 100%; margin-bottom: 60px; font-size: 16px;}
#top_blog .box.blogbox__item .photo,#top_blog .box.blogbox__item h3 {margin-bottom: 10px;}
#top_blog .box.blogbox__item h3 {/*text-align: center;*/}
#top_blog .box.blogbox__item .photo img {width: 100%; height: auto;}
#top_blog .box.blogbox__item {display: block;}
#top_blog .box.blogbox__item .photo-area {width: 30%;}
#top_blog .box.blogbox__item .text {width: 70%;margin-left: 5%;}
#top_blog .box.blogbox__item .date {width: 100%;}



.blogbox .box p {font-size: 12px; line-height: 1.5em;}
#top_message {text-align: center;}
#top_message br {display: none;}
#top_message br.sp-area {display: block;}
#top_message #txt {letter-spacing: 0; margin-bottom: 30px; font-size: 12px;}
#top_access .txt {font-size: 12px;}
#top_access .box {width: 100%; height: auto; margin: 0 0 50px 0; float: none;}
#top_access .box .map iframe {width: 100%; height: auto;}
#top_access h3 {font-size: 20px;}
#top_works .btnbox, .btnbox:visited, .btnbox:link {padding: 15px 20px; width: 50%; text-align: center;}

/* 下層ページ全体 */
#top_works h2 {margin: 70px auto 40px auto; width: 30%;}
#top_works h2 img {width: 100%; height: auto;}
#top_media h2,#top_blog h2 {margin: 80px auto 40px auto; width: 30%;}
#top_message h2 {margin: 80px auto 40px auto; width: 45%;}
#top_media h2 img,#top_blog h2 img,#top_message img {width: 100%; height: auto;}
#profile h2,#media h2,#works h2,#process h2,#recruit h2,#contact h2 {margin-bottom: 30px; margin-top: 50px;}

/* profile */
#profile {width: 94%; margin: auto;}
#profile .txt {line-height: 1.3em;}
#profile th {display: block; width: 100%; padding: 0 0 5px 0; text-align: left; border-bottom: none;}
#profile td {display: block; width: 100%; padding: 0 0 5px 0 !important; margin-bottom: 20px;}
#profile .photo {float: none; width: 40%; margin: auto auto 30px auto;}
#profile .photo img {width: 100%; height: auto;}
#profile table {width: 100%; margin: auto;}
#access {width: 94%; height: auto;}
#access .box {width: 100%; height: auto; margin: 0 0 50px 0; float: none;}
#access .box .map iframe {width: 100%; height: auto;}
#media {width: 94%; height: auto; margin: auto;}
#media ul {width: 100%;}
#media li {width: 100%; height: auto; float: none; font-size: 16px; line-height: 1.7em; margin-bottom: 50px;}
#media li img {width: 100%; height: auto; float: none; margin-right: 0px; margin-bottom: 10px;}

#blog {width: 100%; margin: auto;}
#blog p img {max-width: 100%; height: auto;}
#blog .box {width: 90%; margin: 50px auto;}
#blog .arrow {margin: 50px 0;}
#blog .wp-pagenavi {text-align: center;}


/* works */
#works {width: 94%; margin: auto auto 130px auto;}
#works #category {width: 100%; margin: auto auto 50px auto;}
#works #category ul {width: 80%; margin: auto;}
#works #category .cat-item {margin-bottom: 20px;}
#works #category .cat-item {margin-right: 0%; width: 33%; text-align: center; display: block; float: left;}
#works #category .cat-item a {font-size: 12px;}
#works .box {width:48%; margin-right: 2%; height: auto; margin-bottom: 50px;}
#works .box.mr0 {margin-right: 2% !important;}
#works .box .photo {width: 100%; height: auto;}
#works .box .photo img {width: 100%; height: auto;}
#works .box h3 {text-align: left; font-size: 12px; width: 96%; margin: auto;}


.worksflex__item {width:48%; margin-right: 2%; height: auto; margin-bottom: 50px; height: auto !important;}
.worksflex__item.mr0 {margin-right: 2% !important;}
.worksflex__item .photo {width: 100%; height: auto;}
.worksflex__item .photo img {width: 100%; height: auto;}
.worksflex__item h3 {text-align: left; font-size: 12px; width: 96%; margin: auto;}
.worksflex__item:nth-child(2n) {
	margin-right: 0%;
}
.worksflex__item:nth-child(3n) {
	margin-right: 2%;
}


#works_detail {width: 94%; margin: auto auto 130px auto;}
#works_detail .eyecatch img {width: 100%; height: auto;}
#works_detail .box {width: 100%; margin: auto auto 130px auto;}
#works_detail #spec {width: 100%; height: auto;}
#works_detail #spec_l {width: 100%; float: none; margin-bottom: 30px;}
#works_detail #spec_r {width: 100%; float: none; margin-bottom: 30px;}
#works_detail #mainImage {width: 100%; height: auto;}
#works_detail #mainImage img {width: 100%; height: auto;}
#works_detail #imageList {height: auto;}
#works_detail #imageList ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
#works_detail #imageList ul:after {content:""; display: block; width: 73px;}
#works_detail #imageList li {margin-right: 5%; float: none; margin-right: 0; margin-bottom: 3%; float: none; padding: 0 1.5%;}
/*#works_detail #imageList li {height: 25%; width: 25%; margin-left: 0px; padding: 0px 5px; box-sizing: border-box;}
#works_detail #imageList li img {position: static; width: 100%; height: auto; margin: auto;}*/

/* process */
#process {width: 94%; margin: auto auto 130px auto;}
#process .box {width: 90%; padding: 20px 5%;}
#process h3 img,#process p img {width: 100%; height: auto;}
#process .box .flRt {float: none; margin-bottom: 10px;}

/* recruit */
#recruit {width: 94%; margin: auto auto 130px auto;}
#recruit .box {width: 90%; padding: 20px 5%;}
#recruit h3 {text-align: center; margin-top: 50px;}

/* contact */
#contact {width: 94%; margin: auto auto 130px auto;}
#contact #form {width: 100%;}
#contact .wpcf7 input[type="text"], #contact .wpcf7 input[type="email"],#contact .wpcf7 textarea {width: 100%; border: 1px solid #ddd;}
.wpcf7-submit {    padding: 10px;
    width: 50%;
    margin: 0 25%;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 16px;
}
.wpcf7-form dl {display: block;}
.wpcf7-form dl dt {display: block; width: 100%;}
.wpcf7-form dl dd {display: block; width: 100%;}



#contact .wpcf7 input[type="tel"] {width: 100%; border: 1px solid #efefef;}



.single-works #works_detail .box {margin: 0 -1%;}
.single-works #works_detail ul.slideworks {
    margin-left: 0px;
}
.single-works #works_detail ul.slideworks li {
    width: 25%;
    height: 25%;
    margin-left: 0px;
    padding: 0 5px;
    box-sizing: border-box;
}
.single-works #works_detail ul.slideworks li a:after {
    top: 70%;
    right: 10px;
}
.single-works .main {margin-top: 0;}
.single-works #title-content {width: 90%;}
.scroll-btn {display: none !important;}

.single-works .eyecatch {height: auto; min-height: auto; width: 100%;}
.single-works .eyecatch img {position: initial;}

@media only screen and (max-width: 480px) {
    
}
@media only screen and (max-width: 320px) {
    
}