@charset "utf-8";
.parallax-section {  background-image:url('../img/photo_top_sp.jpg'); margin-bottom:0; }
.contents_wrap { background:#fff; color:#000; padding:80px 0; }
.contents .content_wrap { margin: 140px 0 0; }
.contents .content_wrap:first-child { margin: 0; }
.contents .content_culture { position: relative; }
.copy_english { position: absolute; top: -76px; left: -20px; font-size: 80px; color: #F5F5F5; mix-blend-mode: multiply; }
.content_culture h2 { font-size: 18px; }
.copy { padding: 0 0 20px; font-size: 24px; }
.main_img img { width: 100vw; margin: 0 calc(50% - 50vw); }
.img_wrap { position: relative; width: 100%; height: 100%; }
.sub_img img { width: 75vw; margin: 0 calc(50% - 50vw) 0 calc(65vw - 50%); }
.content_culture p { margin: 20px 0; }
.content h1{ color:#fff; }

@media screen and (min-width:768px) {
  .parallax-section {  background-image:url('../img/photo_top.jpg'); margin-bottom:0; }
  section.parallax-section { background-position: center; }
  .contents_wrap { padding:120px 0; }
  .contents .content_wrap { margin: 80px 0 0; }
  .contents .content_culture { width:60%; }
  .contents .n1_wrap .content_culture  { margin: 0 0 0 40%;}
  .copy_english { position: absolute; top: 480px; left: -420px; font-size: 96px; letter-spacing: 0.04em; z-index: 2;}
  .n1_wrap .copy_english { top: 460px; left: -420px; }
  .n2_wrap .copy_english { top: 460px; left: auto; right: -420px; }
  .copy { font-size: 32px; }
  .main_img,.sub_img { overflow: hidden; }
  .main_img { height: 360px; }
  .main_img img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
  .n1_wrap .main_img { width: calc(120px + 50vw); max-width: 800px; }
  .n2_wrap .main_img { width: 800px; }
  .n2_wrap p { height: 380px; }
  .sub_img { position: absolute; width: 360px; height: 380px; }
  .sub_img img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
  .sub_img.office { height:auto; } 
  .n1_wrap .sub_img { top: 80px; left: -420px; }
  .n2_wrap .sub_img { display:none; }
  .headline-xl { font-size:50px;}
}
@media screen and (min-width:1024px) {
  .contents .content_culture { width: 660px; }
  .contents .n1_wrap .content_culture  { margin: 0 0 0 420px;}
  .headline-xl { font-size:55px;}
  .n2_wrap .sub_img { top: 610px; left: 720px; display:block; }
}


/*アニメーション*/
.img_animation img { animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes zoomIn {
  0% { transform: scale(1.5); opacity: 0;}
  100% { transform: scale(1); opacity: 1;}
}
/*
.img_wrap::before { animation: img_wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
@keyframes img_wrap {
  100% { transform: translateX(100%); }
}
*/

/*.fadeRight{ animation-name:fadeRightAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeRightAnime{
  from { opacity: 0; transform: translateX(-200px); }
  to { opacity: 1; transform: translateX(0); }
}
@media screen and (min-width:768px) {
  .fadeRight{ animation-name:fadeRightAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; }
  @keyframes fadeRightAnime{
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
  }
}*/


@media screen and (max-width:768px) {
.img_wrap.office { width:30%; margin-right:5%; }
.img_wrap.offic img { width:100%; }
.office3 { width:100%; margin-top:30px;  }

}
@media screen and (min-width:768px) {
.office3 { width:100%; margin-top:10px; }
.content_wrap.n2_wrap.office { padding-bottom:80px; }

}

main { padding-bottom:80px; }