@charset "UTF-8";
@keyframes sliderAnimation {
  100% {
    transform: translateX(-30%);
  }
}
#header h2{margin-bottom: 2vw;}
#header .slide{overflow: hidden;margin-bottom: 8%;}
#header .slide .slide-thumbnail{display: flex;min-width: 100%;width: min-content;animation: 20s linear infinite sliderAnimation;margin: 0 auto;}
#header .slide .slide-thumbnail li{width: 34vw; height: auto;margin-right: 2vw;position: relative;}
#header .slide .slide-thumbnail li img{width: 100%;height: auto;}

#staff{overflow: hidden;margin-bottom: 20vw;}
#staff h2{width: 90%;margin: 0 auto 10vw;}
#staff #wrap{max-width: 500px;width: 100%;margin: 0 auto;}
#staff #wrap .bx-wrapper{width: 70%;margin: 0 auto;}

#staff #wrap .bx-wrapper .bx-controls-direction .bx-prev{width: 8vw;height: 8vw;background: url("../images/top/staff-arrow01.png") 0 0;background-repeat: no-repeat;background-size: 100%;top:42%;left: -3vw;}
#staff #wrap .bx-wrapper .bx-controls-direction .bx-next{width: 8vw;height: 8vw;background: url("../images/top/staff-arrow02.png") 0 0;background-repeat: no-repeat;background-size: 100%;top:42%;right: -3vw;}

#staff #wrap .bx-viewport{overflow: visible !important;}
#staff #wrap ul li dt{position: relative;margin-bottom: 3vw;width: 100%;height: 95vw!important;}
#staff #wrap ul li dt img {width: 100%;height: 95vw!important;object-fit: cover;font-family: "object-fit: cover;";}
#staff #wrap ul li dt .frame{position: absolute;top: 0;left: 0;}
#staff #wrap ul li dd{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-size: 5.2vw;font-weight: bold;text-align: center;}
#staff .btn{width: 80%;margin: 0 auto;padding-top: 10vw;}



.genre {
    color: #fff;
    background-color: #a29150;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 13px;
}

/* works-Box
-------------------------------------*/
#works-Box { color: #ffffff; font-size: 16px; font-weight: 400; background-image: url("../images/top/works-bg01.png");background-repeat: repeat-y;background-position: top center;background-size: 100%;}
#works-Box .Box { padding: 5.73% 5.06% 8% 5.06%;background-color: #35200e; }
#works-Box .txt { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; font-size: 4.0vw; font-weight: bold; text-align: center; }
#works-Box .works-Box-list li { padding: 7.86% 5.63% 5.93% 5.63%; background-color: #fff; border-bottom: 2px solid #634e3e; margin-bottom: 4.74777%; }
#works-Box .works-Box-list li .rel-Box { position: relative; }
#works-Box .works-Box-list li .num { position: absolute; width: 12.2%; top: -5.01672%; left: -3.01003%; }
#works-Box .works-Box-list li .pic { margin-bottom: 5.35117%; }
#works-Box .works-Box-list li .ttl-02 { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: 500; color: #3c2413; font-size: 23px; font-weight: 700; line-height: 1.5; margin-bottom: 3.34448%; }
#works-Box .works-Box-list li .ttl-02 span { color: #3c2413; font-size: 14px; font-weight: 700; display: block; }
#works-Box .works-Box-list li .txt { color: #909090; font-size: 14px; font-weight: 400; line-height: 1.5; }

#works-Box ul{width: 90%;margin: 0 auto;padding: 15% 0;}
#works-Box ul li{margin-bottom: 15%;}
#works-Box ul li:last-child{margin-bottom: 0;}
#works-Box ul li dt{margin-bottom: 5%;box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.35);}
#works-Box ul li dd{font-size: 3.8vw;color: #000; margin-bottom: 5%;}
#works-Box ul li .btn{width: 50%;margin: 0 auto;}


/* blackboard
-------------------------------------*/
#blackboard { background-image: url(../images/top/blackboard-bg-bom.png), url(../images/top/blackboard-bg.jpg); background-repeat: no-repeat,no-repeat; background-position: 0 bottom,0 top; background-size: 100%,100%; }
#blackboard .Box { padding: 0% 3.2% 8.66% 3.2%; }
#blackboard .blackboard-list { margin-bottom: 3.4188%; }
#blackboard .blackboard-list li { width: 32.76%; }
#blackboard .txt { color: #afafaf; font-size: 14px; font-weight: 400; line-height: 1.6; margin-bottom: 6.41026%; }
#blackboard .btn { width: 96.01%; margin-left: auto; margin-right: auto; }

/* abs-works
-------------------------------------*/
#abs-works { padding: 6.13% 5.06% 7.33% 5.06%; margin-bottom: 8.16024%; }
#abs-works .ttl { width: 48.96%; margin-left: auto; margin-right: auto; margin-bottom: 7.12166%; }
#abs-works .c-ttl { background-color: #45352b; padding: 2.07% 3.56% 2.07% 3.56%; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: 500; color: #ffffff; font-size: 16px; font-weight: 700; margin-bottom: 3.56083%; letter-spacing: 1px; }
#abs-works .btn { width: 26.26%; margin-left: auto; margin-bottom: 2.96736%; }
#abs-works .new-list li, #abs-works .design-list li, #abs-works .reform-list li { width: 47.18%; border: 2px solid #d2cdc9; margin-right: 5.63798%; padding: 2.37% 2.37% 2.37% 2.37%; }
#abs-works .new-list li:nth-child(2n), #abs-works .design-list li:nth-child(2n), #abs-works .reform-list li:nth-child(2n) { margin-right: 0; }
#abs-works .new-list li .pic, #abs-works .design-list li .pic, #abs-works .reform-list li .pic { height: 122px; margin-bottom: 6.47482%; overflow: hidden;}
@media screen and (max-width: 376px) { #abs-works .new-list li .pic, #abs-works .design-list li .pic, #abs-works .reform-list li .pic { height: 109px; } }
@media screen and (max-width: 321px) { #abs-works .new-list li .pic, #abs-works .design-list li .pic, #abs-works .reform-list li .pic { height: 93px; } }
#abs-works .new-list li .customer, #abs-works .design-list li .customer, #abs-works .reform-list li .customer { font-weight: bold; font-size: 16px; color: #4c4948; }
#abs-works .new-list li .abs-ttl, #abs-works .design-list li .abs-ttl, #abs-works .reform-list li .abs-ttl { margin-bottom: 11.51079%; }
#abs-works #abs-works-01, #abs-works #abs-works-03 { margin-bottom: 7.4184%; }
#abs-works #abs-works-01, #abs-works #abs-works-02 { margin-bottom: 7.4184%; }

/* o-bnr
-------------------------------------*/
.o-bnr { margin-bottom: 6.4%; }

/* voice-Box
-------------------------------------*/
#voice-Box { padding: 0% 5.06% 6.66% 5.06%; border-bottom: 2px solid #d2cdc9; margin-bottom: 20vw; }
#voice-Box .ttl { margin-bottom: 6.67656%; }
#voice-Box .voice-list li { width: 47.18%; background-color: #f7f5e8; margin-right: 5.63798%; padding: 2.37% 2.37% 2.37% 2.37%; }
#voice-Box .voice-list li:nth-child(2n) { margin-right: 0; }
#voice-Box .voice-list li .pic { width: 100%; height: 50vw; margin-bottom: 6.47482%; }
#voice-Box .voice-list li .pic img{width: 100%; height: 50vw!important;
-o-object-fit: cover;
    object-fit: cover;
    font-family: "object-fit:cover;";}


@media screen and (max-width: 376px) { #voice-Box .voice-list li .pic { height: 109px; } }
@media screen and (max-width: 321px) { #voice-Box .voice-list li .pic { height: 93px; } }
#voice-Box .voice-list li .customer { font-weight: bold; font-size: 16px; color: #4c4948; }
#voice-Box .voice-list li .abs-ttl { margin-bottom: 8.63309%; }
#voice-Box .voice-list li .abs-case-ttl { font-size: 14px; color: #d73d27; margin-bottom: 5.7554%; }

/* o-bnr-02
-------------------------------------*/
.o-bnr-02 { width: 89.86%; margin-left: auto; margin-right: auto; margin-bottom: 7.4184%; }

/* manken-blog
-------------------------------------*/
#manken-blog { border-top: 2px solid #5eb3d1; padding: 4.53% 5.06% 12.8% 5.06%; }
#manken-blog .ttl { margin-bottom: 5.93472%; }
#manken-blog .date { margin-bottom: 0.74184%; }
#manken-blog .manken-blog-list li { padding: 0% 0% 6% 0%; border-bottom: 1px solid #8b8b8b; margin-bottom: 6%; }
#manken-blog .manken-blog-list li:last-child { margin-bottom: 0; }

/* news-Box
-------------------------------------*/
#news-Box { padding: 0% 5.06% 12.8% 5.06%; }
#news-Box .ttl { margin-bottom: 5.93472%; }
#news-Box .date { margin-bottom: 0.74184%; }
#news-Box .manken-blog-list li { padding: 0% 0% 6% 0%; border-bottom: 1px solid #8b8b8b; margin-bottom: 6%; }
#news-Box .manken-blog-list li:last-child { margin-bottom: 0; }

#link-bnr-Box { padding: 0% 5.63% 8.9% 5.63%; }
#link-bnr-Box .link-bnr-list { color: #707070; font-size: 12px; }
#link-bnr-Box .link-bnr-list .pic { margin-bottom: 2.37389%; }
#link-bnr-Box .link-bnr-list li { width: 46.88%; margin-right: 6.23145%; margin-bottom: 7.12166%; text-align: center; }
#link-bnr-Box .link-bnr-list li:nth-child(2n) { margin-right: 0; }

/* message-Box
-------------------------------------*/
#message-Box { padding: 6.93% 5.06% 7.2% 5.06%; background-image: url(../images/top/seo-bg.jpg); color: #ffffff; font-size: 14px; line-height: 1.7; margin-bottom: 11.73333%; }
#message-Box .ttl { width: 36.35%; margin-left: auto; margin-right: auto; margin-bottom: 4.74777%; }
#message-Box .mb-01 { margin-bottom: 4.74777%; }

/* 

*/
/*--------------------------------------
			concept
--------------------------------------*/
#concept { text-align: center; }

#slide { position: relative; }

#slide .flame { position: absolute; top: 0; left: 0; z-index: 99999; }

/*--------------------------------------
			works
--------------------------------------*/
#works { margin: 0 0 5%; padding: 16% 3% 2%; background: url(../images/top/bg_works_top.jpg) no-repeat center top, url(../images/top/bg_works_middle.jpg) repeat-y center; background-size: 100%; }

#works li { margin: 0 0 5%; }

/*--------------------------------------
			news
--------------------------------------*/
#news { width: 94%; margin: 0 auto 8%; padding: 0 0 0.5%; border: 1px solid #0b0909; }

#news ul { padding: 4%; }

#news ul li { font-size: 0.85em; padding: 3% 2%; border-bottom: 1px dotted #706f6f; }

#news ul li .date { color: #d9452e; float: left; }

#news ul li .ttl { width: 70%; float: right; }

#news ul li .ttl a { color: #707070; text-decoration: underline; }

/*--------------------------------------
			contents
--------------------------------------*/
#contents { padding: 0 6%; margin: 0 0 4%; }

#contents figure { width: 48%; float: left; margin: 0 0 5%; }

#contents figure:nth-of-type(2n) { float: right; }

#contents figure figcaption { color: #707070; font-size: 0.8em; line-height: 2.5; text-align: center; text-decoration: underline; }

@media screen and (max-width: 321px) { .sp-3 { display: none; } }