@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
ul,ol,li,dl,dt,dd{ list-style: none; }
fieldset,img{ border: 0; vertical-align: middle; overflow: hidden; }
img{ max-width: 100%; box-sizing: border-box; }
body{ font-family: "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; overflow-x: hidden; color: var(--c01); background: #000; }
a{ color: inherit; text-decoration: none; transition: opacity 0.4s; }

:root{ --hf: 100px; --bf: 0.2rem; --w-width: 80%; }

/*********** share ***********/
html{ font-size: var(--hf); }
body{ font-size: var(--bf); 
  --c01: #4d341e;
  --c02: #c0a57f;
  --c03: #ffffff;
}


html:not(.loaded) body *:not(.loader):not(.spinner){ animation: none !important; }

/****** loader ******/
.loader{ position: absolute; bottom: 0; right: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 999; animation: jr 1s cubic-bezier(0.35, 0.1, 0.25, 1) forwards;}
.loaded .loader{ animation: tc 1s cubic-bezier(0.35, 0.1, 0.25, 1) forwards; }
@keyframes jr {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes tc {
  0% { width: 100vw; }
  100% { width: 0; }
}

/* spinner */
.spinner{ height:50px; width:50px; border:4px solid var(--c02); border-radius:50%; border-top-color:var(--c03); position: fixed; top:calc(48% - 25px); left: calc(50% - 25px); opacity:0; animation: spin 0.6s linear infinite, fadeIn 0.5s ease forwards; backface-visibility: hidden; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner.fade-out { animation: spin 0.6s linear infinite, fadeOut 0.8s ease forwards !important; }


/*********** header ***********/
header{ opacity: 0; width: 100%; height: 100vh; background: url(../images/bg.jpg) no-repeat center 0; background-size: cover; background-attachment: fixed; display: flex; justify-content: center; align-items: center; position: relative; }
.loaded header{ opacity: 1; }
.header_con{ width: var(--w-width); margin: 0 auto; display: flex; }
.logo{ opacity: 0; width: 5rem; height: auto; animation: logo_a 1.2s ease-out 0.4s forwards; }
@keyframes logo_a{
  from{ opacity: 0; filter: blur(0.6em); transform: translateX(-1rem); }
  to{ opacity: 1; filter: blur(0); transform: translateX(0); }
}
.t_x{ width: 25px; height: 455px; position: absolute; top: calc(50% - 200px); right: 0.6rem; opacity: 0; filter: blur(1em); animation: t_xb 3s ease-in-out forwards; }
@keyframes t_xb{
  from{ filter: blur(1em); opacity: 0; }
  to{ filter: blur(0); opacity: 0.6; }
}
.top_scroll{ position: absolute; top: calc(50% - 2em); right: 0.5rem; transform: translateY(-50%); color: var(--c03); font-size: 12px; line-height: 1; overflow: hidden; }
.tsx{ position: relative; padding-top: 3.4em; display: block; animation: linedw 1.5s linear infinite; }
.tsx::before{ content: ""; position: absolute; top: 0; left: calc(50% - 0.5px); width: 1px; height: 3em; background: var(--c03); }
@keyframes linedw{
  from{ transform: translateY(-50%); opacity: 0; }
  40%{ opacity: 1; }
  80%{ opacity: 1; }
  to{ transform: translateY(0%); opacity: 0; }
}


/*********** nav ***********/
.m-item{ position: relative; --mh: 0.45rem; padding-left: 0.6rem; }
.m-item::before{ content: ""; position: absolute; top: calc(var(--mh) / 2 + 0.1rem); left: 0.26rem; width: 0.2rem; height: 1px; background-color: rgba(255, 255, 255, 0.5); }
.m-item ul{ display: flex; }
.m-item .m_l2{ height: 1em; }
.m-item .l01 a{ width: var(--mh); margin: 0 0.14rem; position: relative; padding: 0.1rem; display: block; border-radius: 0.04rem; overflow: hidden; }
.m-item .l01 a::before{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--c02); z-index: -1; transition: all 0.4s; }
.m-item .l01 a::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c03); z-index: -2; }
.m-item .l01 a:hover::before{ width: 100%; }
.m_a{ opacity: 0; }
.m_a.visible{ animation: fadeInRight 1s ease-out forwards; }


/*********** wrap ***********/
.wrap{ width: 100%; position: relative; background-color: #fff; overflow: hidden; }
.wrap .title{ display: flex; align-items: center; position: relative; padding: 0.6rem 0; }
.wrap .t_line{ width: 0; height: 1px; background-color: var(--c02); margin: 0.4rem 0; }
.wrap .t_line.visible{ animation: t_line 0.8s ease-out forwards; }
@keyframes t_line{
  from{ opacity: 0; width: 0; }
  to{ opacity: 1; width: 1.6rem; }
}
.wrap .title .t_icon{ width: 1.4rem; padding-right: 0.2rem; }
.wrap h2{ font-size: 2em; line-height: 1.4; font-weight: 800; font-family: "Outfit", sans-serif; letter-spacing: 0.4em; }
.wrap h2 span{ font-size: 0.4em; font-weight: 400; line-height: 1.6; letter-spacing: 0.1em; text-indent: 0.1em; display: block; padding-top: 0.2em; color: var(--c02); }
.wrap .m_btn{ position: absolute; width: 0.24rem; height: 0.24rem; outline: 0.04rem solid #fff; top: 50%; right: -0.34rem; transform: translateY(-50%); text-indent: -9999px; display: block; background-color: var(--c02); padding: 0.2rem; border-radius: 50%; cursor: pointer; overflow: hidden; transition: all .6s ease; }
.wrap .m_btn::before, .wrap .m_btn::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-image: url('../images/icon-go.svg'); background-size: 50% 50%; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.wrap .m_btn::after { transform: translate(-150%, -50%); }
.wrap .m_btn:hover { background-color: var(--c01); }
.wrap .m_btn:hover::before { animation: slideOutRight 0.8s ease-out forwards; }
.wrap .m_btn:hover::after { animation: slideInLeft 0.8s ease-out forwards;}
@keyframes slideOutRight {
  0% { transform: translate(-50%, -50%); }
  100% { transform: translate(150%, -50%); }
}
@keyframes slideInLeft {
  0% { transform: translate(-150%, -50%); }
  100% { transform: translate(-50%, -50%); }
}

.ytb_bn{ width: 80%; position: relative; }
.ytb_bn.visible::before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--c03); animation: bgltr 1.2s 0.4s ease-out forwards; }
@keyframes bgltr {
  0% { width: 100%; }
  100% { width: 0; }
}


/** Company **/
.company{ width: var(--w-width); margin: 1.4rem auto 0; position: relative; overflow: hidden; }
.company .company-ph{ margin-bottom: 0.4rem; }
.company .company-con{ font-size: 0.9em; line-height: 200%; }
.company .company-con p{ padding-bottom: 2.6em; }


/** Work **/
.work{ width: var(--w-width); margin: 0.8rem auto 0; padding-bottom: 0.8rem; line-height: 1.6; overflow: hidden; }
.work-module { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 30px; }
.work-item{ overflow: hidden; opacity: 0; transform: translateX(20px); transition: all .8s ease; position: relative; display: block; }
.work-item.visible{ opacity: 1; transform: translateX(0); }
.work-item h3 { align-items: center; font-size: 0.8em; font-weight: 400; transition: all .6s ease; }
.work-item .type{ position: relative; display: inline-block; font-size: 0.6em; font-weight: 800; line-height: 1; color: var(--c03); background-color: var(--c02); padding: 0.3em 0.4em; margin: 1.4em 0 1em 0; vertical-align: middle; z-index: 1; }
.work-item .type::before{ content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--c01); z-index: -1; transition: all .6s ease; }
.work-ph{ overflow: hidden; position: relative; background: var(--c02); display: flex; align-items: center; justify-content: center; }
.work-ph::before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: solid 0 var(--c03); z-index: 2; transition: all .6s ease; }
.work-ph img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .8s ease; }
/* hover */
.work-ph:hover::before{ width: 92%; height: 92%; margin: 4%; border: solid 1px var(--c03); }
.work-item:hover h3{ color: var(--c02); }
.work-item:hover .type::before{ width: 100%; }
.work-item:hover .work-ph img{ transform: scale(1.08); }


/** BackToTop **/
#backToTop{ position: fixed; width: 0.8rem; height: 0.8rem; border-radius: 50%; text-indent: -9999px; transform: rotate(-90deg); bottom: 0.6rem; right: 0.3rem; background: var(--c02) url(../images/icon-go.svg); background-size: 60% 60%; background-repeat: no-repeat; background-position: center; cursor: pointer; transition: opacity .5s ease; opacity: 0; pointer-events: none; transition: all .6s ease; }
#backToTop.show{ opacity:1; pointer-events:auto; }
#backToTop.show:hover{ background-color: var(--c01); }


/*********** footer ***********/
footer{ background-color: var(--c01); }
footer .f-con{ width: var(--w-width); margin: 0 auto; color: var(--c03); height: 1rem; font-size: 0.8em; display: flex; align-items: center; }


/*********** small screen ***********/
@media screen and (max-width:1440px){
  :root{ --w-width: 90%; }

  .company{ margin: 1.2rem auto 0; }

  .work{ margin: 0.9rem auto 0; padding-bottom: 0.5rem; }

  .ytb_bn{ width: 96%; }

  footer{ height: 1.2rem; }

}


@media screen and (max-width:1280px){
  :root{ --hf:8.333vw; --bf: 0.24rem; --w-width: 94%; }
  * { -webkit-tap-highlight-color: transparent; }

  .wrap h2{ font-size: 1.6em; }
  .wrap h2 span{ font-size: 0.5em; }

  .company { margin: 0.7rem auto 0;}
  .company .company-con{ font-size: 0.8em; }
  .company .company-con p { padding-bottom: 2.4em; }

  .work{ margin: 0.6rem auto 0; padding-bottom: 0.4rem; }
  .work-item h3{ font-size: 0.8em; }

  footer{ height: 1rem; }

}


@media screen and (max-width:768px){
  :root{ --hf: 13vw; --bf: 0.26rem; --w-width: 92%; }

  header{ align-items: flex-start; }

  .logo{ width: 92%; margin: 40% auto 1rem; }

  .top_scroll{ top: auto; bottom: 0.3rem; right: 50%; transform: translateX(50%);}

  .header_con{ display: block; }

  .m-item{ margin-left: 0; padding-left: 0; --mh: 0.5rem; }
  .m-item::before{ display: none; }
  .m-item ul{ justify-content: center; }
  .m-item .l01 a{ width: 0.52rem; margin: 0 0.1rem; }

  .wrap .t_line{ margin: 0.2rem 0; }
  @keyframes t_line{
    from{ opacity: 0; width: 0; }
    to{ opacity: 1; width: 100%; }
  }
  .wrap h2{ font-size: 1.4em; }

  .company .company-con{ font-size: 0.7em; }

  .work{ margin: 0.6rem auto 0; padding-bottom: 0.3rem; }
  .work-item h3{ font-size: 0.6em; }
  .work-item .type{ font-size: 0.5em; margin: 1.2em 0 0.9em 0; }
  .work-module { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px;}

  .wrap .m_btn{ width: 0.1rem; height: 0.1rem; right: 4%; }
  .ytb_bn{ width: 100%; }
  
  footer{ font-size: 0.7em; }

}


@media screen and (max-width:480px){
  :root{ --hf: 22vw; --bf: 0.22rem; --w-width: 90%; }

  .logo{ margin: 70% auto 1rem; }

  .wrap .title { padding: 0.4rem 0;}
  .wrap .title .t_icon { width: 1rem; padding-right: 0.1rem; }
  .wrap h2{ font-size: 1.3em; line-height: 1.2; letter-spacing: 0.2em;}
  .wrap h2 span{ font-size: 0.6em; }

  .company { margin: 0.4rem auto 0;}
  .company .company-con{ font-size: 0.8em; }

  .work{ margin: 0.4rem auto 0; padding-bottom: 0.4rem; }
  .work-item h3{ font-size: 0.65em; }
  .work-item .type{ font-size: 0.6em; margin: 1em 0 0.8em 0; }
  .work-module { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px;}
  
}

/*********** animation ***********/
.fadeIn{ opacity: 0; }
.fadeIn.visible{ animation: fadeIn 1s forwards; }

.fadeInUp{ opacity: 0; }
.fadeInUp.visible{ animation: fadeInUp 1s forwards; }

.fadeInLeft{ opacity: 0; }
.fadeInLeft.visible{ animation: fadeInLeft 1s forwards; }

.fadeInRight{ opacity: 0; }
.fadeInRight.visible{ animation: fadeInRight 1s forwards; }

.fade-in-blur{ opacity: 0; }
.fade-in-blur.visible{ animation: fadeInBlur 1s forwards; }

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes fadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(0.6rem); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft{
  from{ opacity: 0; transform: translateX(1rem); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight{
  from{ opacity: 0; transform: translateX(-1rem); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes fadeInBlur{
  from{ opacity: 0; filter: blur(1em); }
  to{ opacity: 1; filter: blur(0); }
}

.visible.a-d04s{ animation-delay:0.4s; }
.visible.a-d06s{ animation-delay:0.6s; }
.visible.a-d08s{ animation-delay:0.8s; }
.visible.a-d1s{ animation-delay:1s; }
.visible.a-d106s{ animation-delay:1.6s; }
.visible.a-d2s{ animation-delay:2s; }