@charset "UTF-8";
/* CSS Document */

#barba-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #fff; transform: translateX(100%); z-index: 10000; overflow-y: scroll; pointer-events: none;}
#barba-wrapper >div .inner-wrap { max-width: 1440px; margin: 0 auto; padding: 120px 0 0; border-bottom: #000 1px solid; margin-bottom: 120px; transition: all .5s;}

.barba-back { position: fixed; top: 0; left: 0; bottom: 0; width: 80px; background: #efefef; pointer-events: none; opacity: 0; transform: translateX(100vw); z-index: 10000;}
.barba-back span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); letter-spacing: .2em;}
.barba-back:hover { background: #000;}
.barba-back:hover span { color: #fff;}

.close-btn { position: fixed; top: 0; right: 0; color: #fff; cursor: pointer; width: 50px; height: 50px; background: #000; z-index: 10000; pointer-events: none; opacity: 0; transition: all .5s;}
.close-btn:before { display: block; content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 19px; height: 16px; background: url("../../img/page/top/arrow-back.svg") center center no-repeat; background-size: cover;}

/*
.close-btn:before,
.close-btn:after { display: block; content: ""; position: absolute; top: 14px; left: 23px; width: 4px; height: 22px; border-radius: 4px; background: #fff; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out;}
.close-btn:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.close-btn:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
*/

@media screen and (max-width: 1600px){
#barba-wrapper >div .inner-wrap { max-width: 1160px;}
}
@media screen and (max-width: 1366px){
#barba-wrapper >div .inner-wrap { max-width: 980px;}
}
@media screen and (max-width: 1200px){
#barba-wrapper >div .inner-wrap { max-width: 768px;}
}
@media screen and (max-width: 991px){
#barba-wrapper >div .inner-wrap { max-width: 100%; margin: 0 40px; padding: 80px 0;}
.barba-back { display: none;}
.close-btn { display: block;}
}
@media screen and (max-width: 767px){
#barba-wrapper >div .inner-wrap { margin: 0 30px 50px; padding: 49px 0 40px;}
}

header,main,footer,.modaal-wrapper,.barba-back span { transition: all .8s;}

body.no-top header,
body.no-top footer,
body.no-top .modaal-wrapper { transform: translateX(-100vw);}
body.no-top main { transform: translate(-100vw,-50%);}
body.no-top #barba-wrapper { transition: all .8s; pointer-events: inherit; transform: translateX(0);}
body.no-top .barba-back { transition: all .8s; pointer-events: inherit; transform: translateX(0); opacity: 1;}

@media screen and (max-width: 991px){
body.no-top .close-btn { opacity: 1; pointer-events: inherit;}
}
@media screen and (max-width: 767px){
body.no-top main { transform: translate(-100vw,0);}
}

/*
------------------------------------------------------------*/
.overview { border-top: #000 1px solid; border-left: #000 1px solid; padding: 60px 0 0 60px;}
.overview p.project { font-size: 18px; font-weight: 600; margin-bottom: 20px;}
.overview p.type { font-size: 12px; margin-bottom: 20px; letter-spacing: .1em;}
.overview ul.person li { display: inline-block; font-size: 12px; font-style: italic; letter-spacing: .1em; line-height: 1.4;}
.overview ul.person li+li { margin-left: 30px;}

@media screen and (max-width: 1600px){
.overview { padding: 40px 0 0 40px;}
}
@media screen and (max-width: 767px){
.overview { padding: 30px 0 0 30px;}
.overview ul.person li { display: block;}
.overview ul.person li+li { margin-top: 5px; margin-left: 0;}
}


/*
------------------------------------------------------------*/
.detail-wrap { padding: 60px 0 120px;}
.detail-wrap .main figure { display: inline-block; width: calc(50% - 15px); vertical-align: middle; position: relative;}
.detail-wrap .main figure::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: rgba(0,0,0,.1) 1px solid; z-index: 10;}
.detail-wrap .main p { display: inline-block; width: calc(50% - 15px); vertical-align: middle; line-height: 2; margin-left: 30px;}
.detail-wrap a { word-break: break-all;}

.detail-wrap .capture img { box-shadow: #ddd 0 0 10px 0;}

@media screen and (max-width: 991px){
.detail-wrap .main figure { width: 100%; margin-bottom: 30px;}
.detail-wrap .main p { width: 100%; margin-left: 0;}
}
@media screen and (max-width: 767px){
.detail-wrap { padding: 30px 0;}
.detail-wrap a { text-align: left;}
}


/*
コンテナーにイージングを設定
.barba-leave-active,
.barba-enter-active {
  transition: .3s ease-out;
}

//ページを離れる時の初期状態
.barba-leave {
  opacity: 1;
  visibility: visible;
  transform: none;
}

//ページ表示時の初期状態
.barba-enter {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10vh);
}

//ページを離れるアニメーション
.barba-leave-to {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10vh);
}

//ページ表示時のアニメーション
.barba-enter-to {
  opacity: 1;
  visibility: visible;
  transform: none;
}
*/