@charset "UTF-8";

/*-------------------------
__top_style
-------------------------*/

  #loading{background-color:#fff;height:100%;width:100%;overflow:hidden;position:fixed;z-index:500;}
  #loading #video{min-height:100%;min-width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
/* Loading背景画面設定　*/
.loading{position: fixed;width: 100%;height: 100%;z-index: 999;background:#000;　opacity: 0.6; text-align:center;color:#fff;}
.loading .loading_mov {width:150px;position: absolute;top: 50%;left: 50%;  transform: translate(-50%, -50%);z-index: 9999;}
.loading .loading_mov video{width:100%;height: auto;z-index: 9999;}
@media screen and (max-width: 374px){
  #loading #video{transform:translate(-50%, -50%) scale(0.8)}
}

/* ---------------------- デモここまで ---------------------- */

/* main_pic */
/*#main_img{ width: 100%; height: 100vh; background-image: url('../images/shop02.jpg'); background-size: cover; background-position: center; position: relative;}*/
#main_img{ width: 100%; height:calc(100vh - 93px); margin-top: 93px;
background: /*linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) ) fixed,*/ url(../images/shop02.jpg);
background-size: cover; background-position: center; position: relative;}

#main_img .inner{ position: absolute; bottom: 150px; width: 100%; height: auto;}
#main_img .inner .main_com{ font-size: 3.5em; line-height: 1.4; color: #fff; margin-left: calc(50% - 50vw); margin-right: 55%; border-bottom: 1px solid #fff; position: relative; height: 120px;}
#main_img .inner .main_com span{ display: block; position: absolute; right: 0;}
.company_logo{ margin-top: 30px;}
.company_logo .inner{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}

/* common */
h2{ font-size: 3.5em; border-bottom: 1px solid #000; letter-spacing: 0.1em; color: #000;}
.viewall_btn{ width: 100%; max-width: 1170px; margin: 50px auto 0; padding: 0 50px; box-sizing: border-box; display: flex; justify-content: flex-end;}
.viewall_btn a{ display: flex; position: relative; font-size: 1.7em; text-decoration: none; color: #000; padding-bottom: 15px; width: 260px;}
.viewall_btn a::after{ position: absolute; left: 0; bottom: -5px; transform: translateY(-50%); transform-origin: left; width: 260px; height: .5em; background-color: #000; clip-path: polygon(0 100%, 100% 100%, 95% 40%, 95% 90%, 0% 90%); content: ''; transition: transform .3s;}
@media screen and (min-width: 768px){
.viewall_btn a:hover::after{ transform: translateY(-50%) scaleX(1.2);}
}

/* works */
#works{ padding: 200px 0 0;}
#works .inner{ width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
#works .inner h2{ margin-left: calc(50% - 50vw); position: relative;}
#works .inner h2 span{ display: block; position: absolute; bottom: 10px; right: 0; width: 100%; max-width: 1130px; margin: 0 auto; padding: 0 0 0 60px; box-sizing: border-box;}
ul.works_list { margin: 80px auto 0;  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);  grid-column-gap: 10px; grid-row-gap: 10px;}
ul.works_list li:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
ul.works_list li:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
ul.works_list li:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
ul.works_list li:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
ul.works_list li:nth-child(5) { grid-area: 2 / 3 / 3 / 4; }
ul.works_list li:nth-child(6) { grid-area: 3 / 1 / 4 / 2; }
ul.works_list li:nth-child(7) { grid-area: 3 / 2 / 4 / 4; }

/* instagram */
#instagram{ padding: 135px 0;}
#instagram .inner{ width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
#instagram .inner .text_box{ position: relative; }
#instagram .inner .text_box h2{ margin-right: calc(50% - 50vw); position: relative;}
#instagram .inner .text_box h2 span{ display: inline-block; margin-bottom: 15px;}

@media all and (min-width: 768px) and (max-width: 1000px) {

/* works */
#works{ padding: 160px 0 0;}
#works .inner .pic_box{ width: 55%; height: 400px; margin-left: 60px;}
#works .inner .text_box{ width: calc(45% - 60px);}
#works .inner .text_box h2{ padding-left: 20%;}
#works .inner .text_box .viewall_btn{ left: 20%;}
/* instagram */
#instagram{ padding: 80px 0;}

}

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

#main_img{ height:calc(100vh - 160px); margin-top: 160px;}
#main_img .inner{ bottom: 100px;}
#main_img .inner .main_com{ font-size: 2.5em; line-height: 1.3; margin-left: 0; margin-right: 100px; height: 90px;}
.company_logo{ margin-top: 20px; margin-bottom: 40px; text-align: center;}
.company_logo .inner{ padding: 0 65px 0 20px;}

h2{ font-size: 2.8em;}
.viewall_btn{ margin: 20px auto 0; padding: 0 20px;}
.viewall_btn a{ width: 160px; font-size: 1.5em; padding-bottom: 15px;}
.viewall_btn a::after{ width: 100%;}

/* works */
#works{ padding: 100px 0 0;}
#works .inner{ display: block; padding: 0 20px;}
#works .inner h2 span{ padding: 0 0 0 20px;}
#works .inner .text_box .viewall_btn{ left: 20px;}
ul.works_list { margin: 40px auto 0;}

/* instagram */
#instagram{ padding: 40px 0;}
#instagram .inner{ padding: 0 20px;}
#instagram .inner .text_box{ width: 100%; padding: 0 0 50px; box-sizing: border-box;}
#instagram .inner .text_box h2{ padding-left: 0;}

}




.insta_list{ display: flex; flex-wrap: wrap; gap: 60px; margin: 60px 0;}
.insta_list li{ position: relative; width: calc((100% - 180px)/4);}
.insta_list li:nth-child(4){ margin-right: 0;}
.insta_list li::before{ content: ""; display: block; padding-top: 100%;}
.insta_list a{ position: absolute; top: 0; width: 100%; height: 100%;}
.insta_list img{ width: 100%; height: 100%; object-fit: cover;}
.insta_btn{ background-color: #000; padding: .5em 1em 1em; width: fit-content; margin: 0 auto; cursor: pointer;transition: .3s}
.insta_btn a{ color: #fff; text-decoration: none; font-size: 1.6em; line-height: 1;}
.insta_btn:hover{ background-color: #999;}

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

.insta_list{ gap: 20px; margin: 0 0 20px;}
.insta_list li{ width: calc((100% - 20px)/2);}
.insta_btn{ margin: 0 auto 40px;}
.insta_btn a{ font-size: 1.4em;}

}