/*  #js-luxy
================================================ */
#js-luxy { box-sizing: border-box; }

@media screen and (min-width: 600px) { #js-luxy { padding-right: 80px; } }

/*  #about
================================================ */
#about .inner { position: relative; }

#about .img { margin: 0 -20px; }

#about .content { position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; padding: 40px 30px; background: #fff; color: #222; }

#about .copy { width: 201px; margin-top: 18px; }

@media screen and (min-width: 600px) { #about .img { position: relative; left: 50%; width: 100vw; min-width: 1200px; margin: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
  #about .img img { width: 100%; max-width: none; }
  #about .content { bottom: -180px; z-index: 2; box-sizing: border-box; width: 50vw; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); max-width: 915px; min-width: 595px; margin: 0 0 0 auto; padding: 80px; -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease; }
  #about .copy { width: 402px; margin-top: 38px; } }

@media screen and (min-width: 1280px) { #about .content { padding: 100px 0 100px 160px; } }

/*  #idea
================================================ */
#idea { position: relative; }

#idea .img { margin: 0 -20px; }

#idea .content { position: absolute; left: 0; bottom: 50px; z-index: 1; margin: 0 20px; padding: 40px 30px; background: rgba(34, 34, 34, 0.9); }

#idea .copy { margin-top: 16px; font-size: 2.4rem; line-height: 1.4; font-weight: 700; letter-spacing: .06em; }

@media screen and (min-width: 600px) { #idea { position: relative; min-height: 727px; }
  #idea .inner { padding-top: 100px; padding-bottom: 100px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #idea .img { position: absolute; top: 0; right: 0; width: 100vw; height: 100%; min-width: 1732px; margin: 0; }
  #idea .img img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
  #idea .content { position: relative; left: 0; bottom: auto; box-sizing: border-box; width: 660px; margin: 0 auto 0 0; padding: 80px; -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease; }
  #idea .copy { margin: 22px -20px 0 0; font-size: 3rem; } }

@media screen and (min-width: 1280px) { #idea .inner { padding-top: 120px; padding-bottom: 120px; }
  #idea .content { padding: 100px 95px 100px 100px; } }

/*  #white
================================================ */
#white { color: #222; background: #f5f5f5; }

/*  #works
================================================ */
#works .inner { padding: 0; }

#works .content { padding: 35px 20px 50px; }

#works .btn { padding: 0 28px; }

@media screen and (min-width: 600px) { #works { position: relative; background-color: #fff; }
  #works:after { position: absolute; top: 0; right: 0; content: ""; display: block; width: calc(50vw + 184px); height: calc(100% + 170px); background: #f5f5f5; }
  #works .inner { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 100px 0 40px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #works .img { width: calc(100% - 490px); }
  #works .img:after { content: ""; display: block; clear: both; }
  #works .img img { float: right; }
  #works .content { box-sizing: border-box; width: 490px; padding: 50px 80px 0; -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease; }
  #works .btn { padding: 0; } }

@media screen and (min-width: 1280px) { #works .inner { padding: 120px 0 50px; }
  #works .img img { float: right; }
  #works .img img { max-width: calc(50vw + 68px); } }

@media screen and (min-width: 1904px) { #works .img { width: 53.33%; }
  #works .content { width: 46.667%; padding: 20px 0 0 225px; } }

/*  #case
================================================ */
#case { background: #fff; }

#case .inner { padding: 0; }

#case .content { padding: 35px 20px 50px; }

#case .btn { padding: 0 28px; }

@media screen and (min-width: 600px) { #case .inner { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px 0 100px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #case .img { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: calc(100% - 490px); }
  #case .img:after { content: ""; display: block; clear: both; }
  #case .img img { float: left; }
  #case .content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; box-sizing: border-box; width: 490px; padding: 0 80px; -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease; }
  #case .btn { padding: 0; } }

@media screen and (min-width: 1280px) { #case .inner { padding: 50px 0 120px; }
  #case .img img { max-width: calc(50vw + 68px); } }

@media screen and (min-width: 1904px) { #case .img { width: 53.33%; }
  #case .content { width: 46.667%; padding: 50px 230px 0 0; } }

/*  #history
================================================ */
#history .inner { padding-top: 50px; padding-bottom: 50px; }

#history .slideWrap { position: relative; }

#history .slideWrap .slide { position: relative; }

#history .slideWrap .year { position: absolute; right: 90px; bottom: 0; width: 100px; text-align: center; background: #222; font-size: 2.5rem; font-weight: 700; }

#history .slideWrap .slick-arrow { top: auto; bottom: 0; z-index: 1; width: 45px; height: 45px; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); background: #222 no-repeat center; background-size: 6px; }

#history .slideWrap .slick-arrow:before { position: absolute; top: 50%; left: 0; display: block; width: 1px; height: 26px; margin-top: -13px; background: #4e4e4e; font-size: 0; }

#history .slideWrap .slick-prev { left: auto; right: 45px; background-image: url("../img/common/ico_prev01.png"); }

#history .slideWrap .slick-next { left: auto; right: 0; background-image: url("../img/common/ico_next01.png"); }

#history .content { position: relative; margin-top: 38px; }

#history .txt { position: relative; z-index: 3; }

@media screen and (min-width: 600px) { #history .inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 100px 0; }
  #history .slideWrap { width: calc(50% - 30px); -webkit-transition: opacity 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, -webkit-transform 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: opacity 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, -webkit-transform 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, -webkit-transform 3s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
  #history .slideWrap.is_animated { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }
  #history .slideWrap .year { right: 180px; width: 160px; padding: 18px 0; font-size: 3rem; }
  #history .slideWrap .slick-arrow { width: 90px; height: 90px; background-size: 12px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #history .slideWrap .slick-arrow:before { height: 30px; margin-top: -15px; }
  #history .slideWrap .slick-arrow:hover { background-color: #4e4e4e; }
  #history .slideWrap .slick-prev { right: 90px; }
  #history .nextSlideWrap { position: absolute; top: 0; right: calc(-100% + 168px); width: calc(100% + 30px); -webkit-transition: -webkit-transform 4s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: -webkit-transform 4s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 4s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 4s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, -webkit-transform 4s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: .1; }
  #history .nextSlideWrap.is_animated { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
  #history .content { box-sizing: border-box; width: calc(50% + 30px); margin-top: 0; padding: 0 80px; }
  #history .txt { padding-right: 10px; } }

@media screen and (min-width: 1280px) { #history .slideWrap { width: calc(50% + 60px); margin-left: -90px; }
  #history .slideWrap .slick-arrow { width: 96px; }
  #history .slideWrap .slick-prev { right: 96px; }
  #history .slideWrap .year { right: 192px; width: 195px; }
  #history .content { padding: 0 0 0 80px; } }

@media screen and (min-width: 1904px) { #history .inner { padding-top: 124px; padding-bottom: 118px; }
  #history .slideWrap { width: calc(50% + 240px); margin-left: -184px; }
  #history .content { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: calc(50% - 50px); padding: 0 0 0 90px; } }

/*  #topics
================================================ */
#topics { background: #393939; }

#topics .inner { position: relative; padding-top: 48px; padding-bottom: 125px; }

#topics .btn { box-sizing: border-box; position: absolute; bottom: 50px; left: 0; padding: 0 38px; width: 100%; }

@media screen and (min-width: 600px) { #topics .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 96px; padding-bottom: 100px; }
  #topics .areaHead { position: relative; box-sizing: border-box; width: 300px; padding-right: 80px; }
  #topics .areaHead .en { font-size: 4rem; letter-spacing: .06em; }
  #topics .areaHead .tit { font-size: 1.8rem; margin-top: 1px; letter-spacing: -.1em; }
  #topics .list { width: calc(100% - 300px); }
  #topics .btn { top: 58px; bottom: auto; width: 210px; padding: 0; } }

@media screen and (min-width: 1904px) { #topics .inner { padding-top: 117px; padding-bottom: 121px; } }

/*  #peaple
================================================ */
#peaple { background: #222; }

#peaple .inner { padding-bottom: 50px; }

#peaple .content { position: relative; z-index: 1; margin-top: -50px; padding: 38px 25px; background: #0b0b0b; overflow: hidden; }

#peaple .content:before, #peaple .content:after { position: absolute; top: 0; content: ""; display: block; width: 1px; height: 200px; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); transform: skew(-45deg); }

#peaple .content:before { left: 0; background: #f70300; }

#peaple .content:after { top: 20px; left: -5px; background: #0b6791; }

#peaple .tit { position: relative; z-index: 1; }

#peaple .areaTxt { margin-top: 22px; }

#peaple .areaTxt .txt { padding: 18px 0; border-style: solid; border-width: 1px 0; border-color: #3c3c3c; }

#peaple .btn { margin-top: 25px; }

@media screen and (min-width: 600px) { #peaple .img { width: 1200px; }
  #peaple .img img { width: 1830px; max-width: none; margin-left: -315px; }
  #peaple .inner { padding-bottom: 40px; }
  #peaple .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -100px; padding: 71px 80px 80px; }
  #peaple .content:before, #peaple .content:after { height: 520px; }
  #peaple .content:before { left: 0; }
  #peaple .content:after { top: 42px; }
  #peaple .tit { width: 336px; }
  #peaple .areaTxt { width: calc(100% - 336px); margin-top: 10px; }
  #peaple .areaTxt .txt { padding: 24px 0; }
  #peaple .btn { margin-top: 50px; } }

@media screen and (min-width: 1280px) { #peaple .img { width: 100%; }
  #peaple .img img { width: 100%; margin-left: 0; } }

@media screen and (min-width: 1904px) { #peaple .inner { padding-bottom: 40px; }
  #peaple .content { padding: 90px 100px 100px; } }