@charset "UTF-8";
/*



	01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	SCROLL DOWN
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES



*/
/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville:400|Poppins:300,400,600,800&subset=latin-ext");


/* BODY */

html { scroll-behavior: smooth;}

/*loading*/
body {
  background-color: #222;
}

#loading-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#loading-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #636667;
  width: 100px;
  height: 30px;
  margin: -7px 0 0 -45px;
  text-align: center;
  font-family: "Libre Baskerville", sans-serif;
  font-size: 20px;
}

#loading-content {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #F00;
}

#loading-content:after {
  content: "";
  position: absolute;
  border: 3px solid #0F0;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

#loading-content:before {
  content: "";
  position: absolute;
  border: 3px solid #00F;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

#loading-content {
  border: 3px solid transparent;
  border-top-color: #0e1e38;
  border-bottom-color: #0e1e38;
  border-radius: 50%;
  -webkit-animation: loader 2s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

#loading-content:before {
  border: 3px solid transparent;
  border-top-color: #1d2a3f;
  border-bottom-color: #1d2a3f;
  border-radius: 50%;
  -webkit-animation: loader 3s linear infinite;
    -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 3s linear infinite;
}

#loading-content:after {
  border: 3px solid transparent;
  border-top-color: #373a3b;
  border-bottom-color: #373a3b;
  border-radius: 50%;
  -webkit-animation: loader 1.5s linear infinite;
  animation: loader 1.5s linear infinite;
    -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#content-wrapper {
  color: #FFF;
  position: fixed;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
}

#header
{
  width: 800px;
  margin: 0 auto;
  text-align: center;
  height: 100px;
  background-color: #666;
}

#content
{
  width: 800px;
  height: 1000px;
  margin: 0 auto;
  text-align: center;
  background-color: #888;
}

/*end*/

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #313434;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

html {
  height: 100%;
}

/* CUSTOM SELF */

.ryker_tm_topbar {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
}

.ryker_tm_topbar .topbar_inner {
    width: 100%;
    height: auto;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px 20px 50px;
}

.ryker_tm_topbar .menu {
    display: flex;
    align-items: center;
}





/* CUSTOM ELEMENTS */
.overflow {
  overflow: hidden !important;
}

.no-margin {
  margin: 0 !important;
}

/* HTML ELEMENTS */
img {
  max-width: 100%;
}

/* LINKS */

a {
  color: #ffffff;
}

a {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: -100%;
  z-index: 10;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.transition-overlay * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.transition-overlay .layer {
  width: 10px;
  height: 100%;
  float: left;
  background: #313434;
  transition-delay: 0.4s;
}
.transition-overlay.active {
  top: 0;
}
.transition-overlay.active .layer {
  width: 100%;
}

/* ODOMETER */
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0;
}

/* PRELOADER */
.preloader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  overflow: hidden;
  background: #283f49;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #000;
  z-index: 2;
}
.preloader .inner {
  margin: 0;
  position: relative;
  z-index: 3;
}
.preloader figure {
  display: block;
  margin: 0;
}
.preloader figure img {
  height: 110px;
}
.preloader .typewriter {
  height: 26px;
  line-height: 26px;
  display: inline-block;
  transform: translateY(-70px);
  color: #fff;
  font-family: "Libre Baskerville", serif;
}
.preloader .typewriter #typewriter-text {
  float: left;
  font-size: 20px;
  margin-left: 5px;
  margin-top: -2px;
  margin-right: 3px;
}
.preloader .typewriter #typewriter-suffix {
  width: 2px;
  height: 22px;
  display: inline-block;
  background: #fff;
  text-indent: -1000px;
  overflow: hidden;
}

.page-loaded {
  overflow: inherit;
}
.page-loaded .preloader {
  left: -100%;
  transition-delay: 0.6s;
}
.page-loaded .preloader .layer {
  bottom: -100%;
  transition-delay: 0.2s;
}
.page-loaded .preloader .inner {
  transform: translateY(30px);
  opacity: 0;
}
.page-loaded .header .social-media {
  transform: translateY(0);
  opacity: 1;
}
.page-loaded .navbar {
  transform: translateY(0);
}
.page-loaded .soundbar {
  transform: translateX(0);
}

/* NAVIGATION MENU */
.navigation-menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: 0;
  top: -100%;
  z-index: 8;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation-menu * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation-menu .nav-bg {
  width: 10px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #313434;
  transition-delay: 0.4s;
}
.navigation-menu .nav-bg2 {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #595d5e;
  transition-delay: 0.8s;
}
.navigation-menu .inner {
  position: relative;
  z-index: 2;
  padding: 0 40px;
}
.navigation-menu .inner address {
  float: left;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  font-size: 20px;
  transform: translateX(-200%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  margin: 0;
  height: 170px;
  position: absolute;
  top: 50%;
  margin-top: -85px;
}
.navigation-menu .inner address span {
  font-family: "Poppins", sans-serif;
  display: block;
  font-size: 2vw;
  font-weight: 800;
  margin-bottom: 20px;
}
.navigation-menu .inner ul {
  width: 50%;
  float: right;
  margin: 0;
  padding: 0;
}
.navigation-menu .inner ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.navigation-menu .inner ul li:hover ul {
  max-height: 500px;
  transition: max-height 0.45s ease-in;
}
.navigation-menu .inner ul li a {
  float: right;
  font-size: 4vw;
  color: #fff;
  font-weight: 800;
  transform: translateY(200%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  position: relative;
}
.navigation-menu .inner ul li a:hover {
  text-decoration: none;
}
.navigation-menu .inner ul li a:hover:before {
  width: 100%;
}
.navigation-menu .inner ul li a:before {
  content: "";
  width: 0;
  height: 10px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 17px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation-menu .inner ul li ul {
  max-height: 0;
  width: 100%;
  transition: max-height 0.25s ease-out;
}
.navigation-menu .inner ul li ul li {
  display: block;
}
.navigation-menu .inner ul li ul li a {
  font-size: 26px;
}
.navigation-menu .inner ul li ul li a:before {
  height: 4px;
  bottom: 8px;
}
.navigation-menu.open {
  top: 0;
}
.navigation-menu.open .nav-bg {
  width: 100%;
}
.navigation-menu.open .nav-bg2 {
  width: 100%;
}
.navigation-menu.open address {
  transition-delay: 1s;
  transform: translateY(0);
}
.navigation-menu.open ul li {
  margin: 0;
}
.navigation-menu.open ul li:nth-child(1) a {
  transition-delay: 0.8s;
}
.navigation-menu.open ul li:nth-child(2) a {
  transition-delay: 0.85s;
}
.navigation-menu.open ul li:nth-child(3) a {
  transition-delay: 0.9s;
}
.navigation-menu.open ul li:nth-child(4) a {
  transition-delay: 0.95s;
}
.navigation-menu.open ul li:nth-child(5) a {
  transition-delay: 1s;
}
.navigation-menu.open ul li a {
  transform: translateY(0);
}

/* SANDWICH BUTTON */
.sandwich-btn {
  width: 22px;
  height: 22px;
  float: left;
  position: relative;
  cursor: pointer;
}
.sandwich-btn span {
  display: block;
  height: 2px;
  width: 18px;
  background: #fff;
  opacity: 1;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
  top: 0;
}
.sandwich-btn span:nth-child(2) {
  top: 8px;
}
.sandwich-btn.open span:nth-child(1) {
  top: 4px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
  top: 4px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* EQUALIZER */
.equalizer {
  width: 46px;
  height: 46px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(90deg);
}

.equalizer span {
  background: #fff;
  width: 2px;
  height: 2px;
  top: 50%;
  bottom: 0;
  left: 0%;
  transform: translateY(-50%);
  position: absolute;
  transition: height 0.2s linear;
}

.equalizer span:nth-child(1) {
  margin-left: 4px;
}

.equalizer span:nth-child(2) {
  margin-left: 8px;
}

.equalizer span:nth-child(4) {
  margin-left: 12px;
}

.equalizer span:nth-child(5) {
  margin-left: 16px;
}

.equalizer span:nth-child(6) {
  margin-left: 20px;
}

.equalizer.paused span {
  height: 3px !important;
}

/* HEADER */
.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.header .social-media {
  position: absolute;
  left: 44px;
  bottom: 90px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  margin: 0;
  padding: 0;
  z-index: 2;
  transform: translateY(100%);
  opacity: 0;
  transition-delay: 1.2s;
}
.header .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.header .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.header .social-media li a:hover {
  text-decoration: none;
}
.header .social-media li a:hover:before {
  width: 100%;
}
.header .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* NAVBAR */

.navbar {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  padding-left: 0;     /* ロゴ位置は動かさない */
  padding-right: 40px; /* MENU だけ内側に */
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Libre Baskerville", serif;
  transform: translateY(-100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.8s;
}

/* スクロールしたときに固定＋背景色を付ける */

.navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #313434;
  padding-left: 0;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 999;
}

.navbar .logo img,
.navbar.fixed .logo img {
  transition: height 0.3s ease, transform 0.3s ease;
}

.navbar.fixed .logo img {
  transform: translateY(2px); /* ほんの少し下に動かして落ち着く感じに */
}

.navbar .logo {
  margin-right: 35px;
}
.navbar .logo a {
  float: left;
}

.navbar .logo a img {
  height: 70px;      /* ← お好みで 60〜80px の間で調整 */
  width: auto;       /* 横に間延びしないように固定 */
  margin-left: 30px;  /* ロゴ画像だけ動かす */

}


.navbar .sandwich-nav {
  margin-right: 20px;  /* 右端から20px内側へ（好みで調整） */
}


.navbar .sandwich-nav .sandwich-text {
  float: left;
  height: 46px;
  overflow: hidden;
}
.navbar .sandwich-nav .sandwich-text.move-up b {
  transform: translateY(-50%);
}
.navbar .sandwich-nav .sandwich-text b {
  float: left;
  font-weight: 400;
  line-height: 46px;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navbar .sandwich-nav .sandwich-btn {
  float: left;
  margin-left: 10px;
  margin-top: 18px;
}

/* SOUNDBAR */
.soundbar {
  width: 46px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-left: 40px;
  z-index: 2;
  transform: translateX(-150%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1s;
}
.soundbar .sound {
  width: 158px;
  float: left;
  text-align: center;
  transform: rotate(-90deg);
  margin-left: -52px;
}
.soundbar .sound .sound-title {
  float: left;
  line-height: 46px;
  color: #fff;
  font-family: "Libre Baskerville", serif;
}
.soundbar .sound .sound-text {
  height: 46px;
  line-height: 46px;
  float: left;
  overflow: hidden;
  text-align: center;
  font-family: "Libre Baskerville", serif;
}
.soundbar .sound .sound-text.move-up b {
  transform: translateY(-50%);
}
.soundbar .sound .sound-text b {
  width: 100%;
  display: block;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  font-weight: 400;
}
.soundbar .sound .equalizer {
  float: left;
  margin: 0 10px;
}
.soundbar .sound .equalizer * {
  transition-delay: 0s;
}
.soundbar .sound .equalizer .holder {
  width: 23px;
  height: 20px;
  float: left;
  margin-left: 10px;
  position: relative;
}

/* SLIDER */
.header {
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
}
.header:before {
  content: "";
  width: 60%;
  height: 20px;
  background: #283f49;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.header:after {
  content: "";
  width: 60%;
  height: 70px;
  background: #283f49;
  position: absolute;
  left: 40px;
  bottom: 0;
  z-index: 2;
}
.header h5 {
  font-size: 60px;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0;
  position: relative;
}

.header h5 span {
  position: relative;
}
.header h5 span:after {
  content: "";
  width: 100%;
  height: 7px;
  background: #283f49;
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: -1;
}
.header h2 {
  font-size: 4vw;
  color: #fff;
  font-weight: 800;
  margin-bottom: 40px;
  text-transform: uppercase;
  font-family: "Libre Baskerville";
}
.header .btn-ghost {
  width: 180px;
  height: 54px;
  line-height: 52px;
  display: inline-block;
  border-radius: 54px;
  border-bottom: 4px solid rgba(0, 0, 0, 0.2);
  background: url(../images/btn-bg.jpg);
  background-size: cover;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.header .btn-ghost * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .btn-ghost span {
  position: relative;
  display: inline-block;
}
.header .btn-ghost span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  text-align: center;

}
.header .btn-ghost span:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.header .btn-ghost:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.header .btn-ghost:hover {
  text-decoration: none;
}
.header .btn-play {
  color: #fff;
  position: relative;
  z-index: 2;
}
.header .btn-play img {
  height: 50px;
}




.header .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.header .video-bg video {
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.header .video-bg .container {
  position: relative;
  z-index: 2;
}
.header .swiper-carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.header .swiper-carousel * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.header .swiper-carousel .swiper-button-prev {
  width: 20%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  cursor: url("../images/arrow-left.png"), auto;
}
.header .swiper-carousel .swiper-button-next {
  width: 20%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  cursor: url("../images/arrow-right.png"), auto;
}
.header .swiper-carousel .swiper-slide {
  height: 100%;
  display: flex;
  background: #eee;
  align-items: center;
  justify-content: center;
  transition: all 200ms linear;
  background-size: cover;
}
.header .swiper-carousel .swiper-slide:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #313434;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .swiper-carousel .swiper-slide .inner {
  opacity: 0;
  padding: 0 5vw;
  position: relative;
  z-index: 2;
  transform: translateY(50px);
}
.header .swiper-carousel .swiper-slide .inner h2 {
  font-size: 3vw;
  text-shadow: 1px 1px 4px #393835;
}


.header .swiper-carousel .swiper-slide .inner h4 {
    font-size: 2.1vw;
    text-align: center;
    color: white;
    margin-top: -27px;
}

.header .swiper-carousel .swiper-slide-active {
  margin: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.header .swiper-carousel .swiper-slide-active:after {
  content: "";
  opacity: 0;
}
.header .swiper-carousel .swiper-slide-active .inner {
  opacity: 1;
  transform: translateY(0);
  text-align: center;
}
.header .swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.header .swiper-container .swiper-slide {
  overflow: hidden;
}
.header .swiper-container .swiper-button-next {
  width: auto;
  height: auto;
  background: none;
  right: 33px;
  font-weight: 800;
  color: #fff;
  transform: rotate(90deg);
  margin-top: 20px;
  overflow: hidden;
}
.header .swiper-container .swiper-button-next * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .swiper-container .swiper-button-next span {
  position: relative;
  display: inline-block;
}
.header .swiper-container .swiper-button-next span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
}
.header .swiper-container .swiper-button-next span:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.header .swiper-container .swiper-button-next:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.header .swiper-container .swiper-button-prev {
  width: auto;
  height: auto;
  background: none;
  left: auto;
  right: 33px;
  font-weight: 800;
  color: #fff;
  transform: rotate(90deg);
  margin-top: -40px;
  overflow: hidden;
}
.header .swiper-container .swiper-button-prev * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .swiper-container .swiper-button-prev span {
  position: relative;
  display: inline-block;
}
.header .swiper-container .swiper-button-prev span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
}
.header .swiper-container .swiper-button-prev span:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.header .swiper-container .swiper-button-prev:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.header .swiper-container .swiper-pagination-fraction {
  width: 100px;
  position: absolute;
  left: auto;
  right: 40px;
  bottom: 20px;
  color: #fff;
  text-align: right;
}
.header .swiper-container .swiper-pagination-fraction .swiper-pagination-current {
  font-size: 50px;
  font-weight: 800;
}
.header .swiper-container .swiper-pagination-fraction .swiper-pagination-current:before {
  content: "0";
}
.header .swiper-container .swiper-pagination-fraction .swiper-pagination-total {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.7;
}
.header .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  padding: 0 150px;
}
.header .slide-inner:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/hero-lines-bg.png) center;
  opacity: 0.2;
}

main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100vh;
  background: #fff;
  position: relative;
}

/* PAGE HEADER　WORKS_EN  */

.page-header_works_en {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/works_en_bg.jpg) center;
  background-size: cover;
}
.page-header_works_en .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_works_en .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_works_en .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_works_en .social-media li a:hover {
  text-decoration: none;
}
.page-header_works_en .social-media li a:hover:before {
  width: 100%;
}
.page-header_works_en .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_works_en .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_works_en .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_works_en .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_works_en .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER　WORKS_HO  */

.page-header_works_ho {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/works_ho_bg.jpg) center;
  background-size: cover;
}
.page-header_works_ho .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_works_ho .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_works_ho.social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_works_ho .social-media li a:hover {
  text-decoration: none;
}
.page-header_works_ho .social-media li a:hover:before {
  width: 100%;
}
.page-header_works_ho .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_works_ho .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_works_ho .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_works_ho .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_works_ho .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER　WORKS_OT  */

.page-header_works_ot {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/works_ot_bg.jpg) center;
  background-size: cover;
}
.page-header_works_ot .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_works_ot .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_works_ot .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_works_ot .social-media li a:hover {
  text-decoration: none;
}
.page-header_works_ot .social-media li a:hover:before {
  width: 100%;
}
.page-header_works_ot .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_works_ot .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_works_ot .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_works_ot .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_works_ot .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER　WORKS  */

.page-header_works {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/works_bg.png) center;
  background-size: cover;
}
.page-header_works .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_works .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_works.social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_works .social-media li a:hover {
  text-decoration: none;
}
.page-header_works .social-media li a:hover:before {
  width: 100%;
}
.page-header_works .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_works .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_works .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_works .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_works .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER　NEWS  */

.page-header_news {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/half.png) center;
  background-size: cover;
}
.page-header_news .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_news .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_news .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_news .social-media li a:hover {
  text-decoration: none;
}
.page-header_news .social-media li a:hover:before {
  width: 100%;
}
.page-header_news .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_news .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_news .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_news .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_news .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER　NEWS Single  */
.page-header_news_sin {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/rustediron.jpg) center;
  background-size: cover;
}
.page-header_news_sin .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_news_sin .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_news_sin .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_news_sin .social-media li a:hover {
  text-decoration: none;
}
.page-header_news_sin .social-media li a:hover:before {
  width: 100%;
}
.page-header_news_sin .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_news_sin .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_news_sin .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_news_sin .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_news_sin .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER */
.page-header {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/int-hero.png) center;
  background-size: cover;
}
.page-header .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header .social-media li a:hover {
  text-decoration: none;
}
.page-header .social-media li a:hover:before {
  width: 100%;
}
.page-header .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header .inner-content .inner h6 {
  font-size: 23px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}


/* PAGE HEADER COMPANY */
.page-header_company {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/company_bg.png) center;
  background-size: cover;
}
.page-header_company .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_company .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_company .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_company .social-media li a:hover {
  text-decoration: none;
}
.page-header_company .social-media li a:hover:before {
  width: 100%;
}
.page-header_company .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_company .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_company .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_company .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_company .inner-content .inner h6 {
  font-size: 40px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* PAGE HEADER CONTACT*/

.bg{
  background: url(../images/rebercross.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  width: 100%;
  min-height: 560px;
  height:100%;
  justify-content: center;
}
.bg::before{
  /* 透過した黒を重ねる */
  background-color: rgba(0,0,0,0.5);
  /* どの範囲に重ねるかを指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

.page-header_con {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  /* background: url(../images/rebercross.jpg) center;*/
  background-size: cover;
}
.page-header_con .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header_con .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header_con .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header_con .social-media li a:hover {
  text-decoration: none;
}
.page-header_con .social-media li a:hover:before {
  width: 100%;
}
.page-header_con .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header_con .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header_con .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header_con .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header_con .inner-content .inner h6 {
  font-size: 20px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

 .page-header_con .inner-content .inner h2 {
    font-size: 12vw;
  }

  .page-header_con .inner-content .inner {
    padding: 0 10px;
  }

  .page-header_con .social-media {
    left: 25px;
  }

 .page-header_con .inner-content .inner {
    padding: 0 120px;
  }

  .page-header_con .inner-content .inner h2 {
    font-size: 8vw;
  }



/* WORKS */
.works {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 40px;
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
}
.works .works-title {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0;
  margin-bottom: 80px;
}
.works .works-title h2 {
  font-size: 4vw;
  font-weight: 800;
  line-height: 1;
  font-family: "Libre Baskerville", serif;
}

.works .works-title p {
  display: block;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  line-height: 34px;
  margin: 0;
  font-family: "Libre Baskerville", serif;
}

.works .works-grid {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.works .works-grid.two-cols li {
  width: 50%;
}
.works .works-grid li {
  width: 33.33333%;
  float: left;
  margin: 0;
  margin-bottom: 80px;
  padding: 0 2vw;
  list-style: none;
}
.works .works-grid li figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.works .works-grid li figure * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.works .works-grid li figure:hover a {
  transform: scale(0.95);
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.4);
}
.works .works-grid li figure:hover a img {
  transform: scale(1);
}
.works .works-grid li figure:hover figcaption {
  padding-left: 10px;
}
.works .works-grid li figure:hover figcaption span {
  height: 0;
}
.works .works-grid li figure a {
  float: left;
  overflow: hidden;
}
.works .works-grid li figure a img {
  width: 100%;
  float: left;
}
.works .works-grid li figure figcaption {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 30px;
}
.works .works-grid li figure figcaption span {
  width: 3px;
  height: 50px;
  background: #f03a37;
  position: absolute;
  left: 20px;
  top: -80%;
}
.works .works-grid li figure figcaption small {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  color: #8f999a;
  font-family: "Libre Baskerville", serif;
  font-size: 13px;
}
.works .works-grid li figure figcaption h3 {
  font-weight: 800;
}

/* WORKS__advantage */
.works_advantage {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 55px 40px;
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
}
.works_advantage .works-title {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0;
  margin-bottom: 80px;
}
.works_advantage .works-title h2 {
  font-size: 4vw;
  font-weight: 800;
  line-height: 1;
  font-family: "Libre Baskerville", serif;
}

.works_advantage .works-title p {
  display: block;
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  line-height: 34px;
  margin: 0;
  font-family: "Libre Baskerville", serif;
}

.works_advantage .works-grid {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.works_advantage .works-grid.two-cols li {
  width: 50%;
}
.works_advantage .works-grid li {
  width: 33.33333%;
  float: left;
  margin: 0;
  margin-bottom: 80px;
  padding: 0 2vw;
  list-style: none;
}
.works_advantage .works-grid li figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.works_advantage .works-grid li figure * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.works_advantage .works-grid li figure:hover a {
  transform: scale(0.95);
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.4);
}
.works_advantage .works-grid li figure:hover a img {
  transform: scale(1);
}
.works_advantage .works-grid li figure:hover figcaption {
  padding-left: 10px;
}
.works_advantage .works-grid li figure:hover figcaption span {
  height: 0;
}
.works_advantage .works-grid li figure a {
  float: left;
  overflow: hidden;
}
.works_advantage .works-grid li figure a img {
  width: 100%;
  float: left;
}
.works_advantage .works-grid li figure figcaption {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 30px;
}
.works_advantage .works-grid li figure figcaption span {
  width: 3px;
  height: 50px;
  background: #f03a37;
  position: absolute;
  left: 20px;
  top: -80%;
}
.works_advantage .works-grid li figure figcaption small {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  color: #8f999a;
  font-family: "Libre Baskerville", serif;
  font-size: 13px;
}
.works_advantage .works-grid li figure figcaption h3 {
  font-weight: 800;
}

/* WORKS SINGLE */
.works-single {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 40px;
  position: relative;
  z-index: 2;
}
.works-single .works-title {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0;
  margin-bottom: 30px;
}
.works-single .works-title h2 {
  font-size: 6vw;
  font-weight: 800;
  line-height: 1;
}
.works-single .works-title p {
  display: block;
  color: #8f999a;
  font-size: 22px;
  font-weight: 300;
  line-height: 34px;
  margin-bottom: 50px;
  font-family: "Libre Baskerville", serif;
}
.works-single article {
  margin-bottom: 50px;
}
.works-single article h6 {
  font-weight: 600;
  text-transform: uppercase;
}
.works-single article p {
  margin: 0;
  font-size: 16px;
  font-family: "Libre Baskerville", serif;
  color: #8f999a;
}
.works-single ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
.works-single ul li {
  width: 33.3333%;
  float: left;
  margin: 0;
  padding: 2vw;
  list-style: none;
}
.works-single ul li.double {
  width: 50%;
}
.works-single ul li.full {
  width: 100%;
}

/* AWARDS */
.awards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background-size: auto 150%;
}

.awards h4 {
  font-weight: 800;
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: uppercase;
  padding-left: 10%;
  margin-top: 13px;
}

.awards p {
  font-size: 15px;
  font-family: "Libre Baskerville", serif;
  line-height: 30px;
  color: #000;
  padding-left: 10%;
}
.awards figure {
  width: 100%;
  float: left;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 5px;
}
.awards figure:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -3px;
  border-radius: 50%;
}
.awards figure img {
  display: inline-block;
}
.awards small {
  font-size: 18px;
  font-weight: 600;
  transform: translateY(-8px);
  display: inline-block;
}
.awards .odometer {
  font-weight: 800;
  font-size: 50px;
  margin-bottom: 20px;
  font-family: serif;
}

/* SIDE CONTENT BLOCK_advantage */

.side-content-block_advantage {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-size: cover;
  background-attachment: fixed;
}
.side-content-block_advantage .inner {
  width: 70%;

    padding-top: 100px;
    padding-bottom: 100px;
}
.side-content-block_advantage .inner .holder {
  width: 100%;
}

.side-content-block_advantage .inner .holder p {
  font-family: "Libre Baskerville", serif;
  font-size: 15px;
  line-height: 38px;
  margin-bottom: 15px;
  color: white;
  font-weight: 600;
  text-shadow: 1px 1px 4px #393835;

}

.side-content-block_advantage .inner .holder .message {
    font-family: "Libre Baskerville", serif;
    font-size: 15px;
    line-height: 36px;
    margin-bottom: 40px;
    color: black;
    font-weight: 600;
}

.side-content-block_advantage .inner .holder img {
  margin: 0;

}

.side-content-block_advantage .inner .holder h6 {
  font-weight: 800;
  margin-bottom: 5px;
  font-size: 25px;
  margin-bottom: 0;
  color: white;
  font-family: serif;
}

/* SIDE CONTENT BLOCK COMPANY*/
.side-content-block_company {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-size: cover;
  background-attachment: fixed;
}
.side-content-block_company .inner {
  width: 50%;
  padding: 200px 0;
}
.side-content-block_company .inner .holder {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.side-content-block_company .inner .holder p {
  font-family: "Libre Baskerville", serif;
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 6px;
    color: black;
    font-weight: 600;
    text-shadow: 1px 1px 1px #dadada;
}

.side-content-block_company .inner .holder .message {
    font-family: "Libre Baskerville", serif;
    font-size: 15px;
    line-height: 36px;
    margin-bottom: 40px;
    color: black;
    font-weight: 600;
}

.side-content-block_company .inner .holder img {
  margin: 0;

}

.side-content-block_company .inner .holder h6 {
  font-weight: 800;
  margin-bottom: 5px;
  font-size: 25px;
  margin-bottom: 0;
  color: black;
  font-family: serif;
  text-shadow: 1px 1px 1px #dadada;
}


/* SIDE CONTENT BLOCK */
.side-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-size: cover;
  background-attachment: fixed;
  max-width: 100%;
}

.side-content-block .inner {
  width: 50%;
  padding: 200px 0;
}
.side-content-block .inner .holder {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.side-content-block .inner .holder p {
  font-family: "Libre Baskerville", serif;
  font-size: 30px;
  line-height: 38px;
  margin-bottom: 15px;
  color: #212529;
  font-weight: 600;
}

.side-content-block .inner .holder .message {
    font-family: "Libre Baskerville", serif;
    font-size: 15px;
    line-height: 36px;
    margin-bottom: 40px;
    color: black;
    font-weight: 600;
}

.side-content-block .inner .holder img {
  margin: 0;

}

.side-content-block .inner .holder h6 {
  font-weight: 800;
  margin-bottom: 5px;
  font-size: 25px;
  margin-bottom: 0;
  color: #212529;
  font-family: serif;
}

/* ICON CONTENT BLOCK */
.icon-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #878d94;
  text-align: center;
}
.icon-content-block * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.icon-content-block .content-box {
  flex: 1;
  padding: 100px 2vw;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.icon-content-block .content-box:hover {
  background: rgba(0, 0, 0, 0.05);
}
.icon-content-block .content-box:last-child {
  border-right: none;
}
.icon-content-block .content-box figure {
  display: block;
  margin-bottom: 30px;
}
.icon-content-block .content-box figure img {
  height: 50px;
}
.icon-content-block .content-box h4 {
  font-family: "Libre Baskerville", serif;
  color: #fff;
  margin-bottom: 20px;
  font-size: 18px;
}
.icon-content-block .content-box p {
  margin-bottom: 20px;
  font-weight: 300;
  color: #fff;
  font-size: 16px;
  line-height: 27px;
}
.icon-content-block .content-box a {
  display: inline-block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.icon-content-block .content-box a img {
  width: 50px;
}
.icon-content-block .content-box a:hover {
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* CLIENTS */
.clients {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  text-align: center;
}
.clients * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.clients h2 {
    font-size: 4vw;
    font-weight: 800;
    margin-bottom: 50px;
    font-family: 'Libre Baskerville';
}
.clients h6 {
  font-family: "Libre Baskerville", serif;
  font-size: 18px;
}
.clients ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
  padding: 0;
  position: relative;
}
.clients ul:before {
  content: "";
  width: 2px;
  height: 100%;
  background: #fff;
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 2;
}
.clients ul:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
}
.clients ul li {
  width: 33.3333%;
  margin: 0;
  margin-right: -1px;
  margin-bottom: -1px;
  padding: 15px 0;
  list-style: none;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.clients ul li:hover figure {
  opacity: 1;
}
.clients ul li figure {
  width: 100%;
  float: left;
  margin: 0;
  padding: 15px 30%;
  overflow: hidden;
  position: relative;
  opacity: 0.4;
}
.clients ul li figure img {
  width: 100%;
  float: left;
}
.clients ul li figure h6 {
  width: 100%;
  float: left;
  text-align: center;
  color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  height: 16px;
  font-weight: 800;
  font-size: 13px;
  opacity: 0;
}

/* TEXT CONTENT BLOCK COMPANY */
.text-content-block_company {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.text-content-block_company h2 {
  font-size: 4vw;
  font-family: "Libre Baskerville", serif;
}
.text-content-block_company h4 {
  font-weight: 600;
  font-size: 3vw;
  margin-bottom: 50px;
  margin-top: 20px;
}

/* TEXT CONTENT BLOCK interview */

.text-content-block_interview {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.text-content-block_interview h2 {
  font-size: 4vw;
  font-family: "Libre Baskerville", serif;
}
.text-content-block_interview h4 {
  font-weight: 600;
  font-size: 3vw;
  margin-bottom: 50px;
  margin-top: 20px;
}


p.map{
  margin-top: 50px;
  font-size: 16px;

  }


/* TEXT CONTENT BLOCK */
.text-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.text-content-block h2 {
  font-size: 5vw;
  font-family: "Libre Baskerville", serif;
}
.text-content-block h4 {
  font-weight: 600;
  font-size: 3vw;
  margin-bottom: 50px;
  margin-top: 20px;
}
.text-content-block p {
  font-size: 14px;
  line-height: 30px;
  color: #8f999a;
  font-family: "Libre Baskerville", serif;
  margin: 0;
}

/* SERVICES CONTENT BLOCK */
.services-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: url(../images/bg-shape-pattern.jpg) center no-repeat;
  background-size: auto 100%;
}
.services-content-block .container {
  padding: 0 5%;
}
.services-content-block .content-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 10vh 0;
  background: #fff;
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.2);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.services-content-block .content-box:hover {
  transform: translateY(-20px);
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.4);
}
.services-content-block .content-box figure {
  width: 100%;
}
.services-content-block .content-box figure img {
  display: inline-block;
  height: 125px;
}
.services-content-block .content-box h4 {
  width: 100%;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 20px;
  background: url(../images/btn-bg.jpg) center;
  -webkit-background-clip: text;
  color: black;
  background-size: auto 100%;
}
.services-content-block .content-box ul {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Libre Baskerville", serif;
  color: #8f999a;
}
.services-content-block .content-box ul li {
  width: 100%;
  margin: 0;
  padding: 2px 0;
  list-style: none;
}

/* TEAM */
.team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: #dbe4e4;
}

.team * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.daily_tittle{
margin: 10px;
margin-bottom: 100px;

}

.daily_tittle h2{
font-size: 40px;

}

.access_tittle{
margin: 10px;
margin-bottom: 50px;

}

.access_tittle h2{
font-size: 40px;

}

.team ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.team ul li {
  width: 16.6%;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #dbe4e4;
}
.team ul li:hover {
  transform: translateY(-40px);
}
.team ul li:hover .social-links {
  opacity: 1;
}
.team ul li:last-child {
  border-right: 0;
}
.team ul li:nth-child(2) {
  margin-top: 40px;
}
.team ul li:nth-child(4) {
  margin-top: 40px;
}
.team ul li:nth-child(6) {
    margin-top: 40px;
}

.team ul li figure {
  width: 100%;
  float: left;
  margin: 0;
  background: #fff;
}
.team ul li figure img {
  width: 100%;
  float: left;
}
.team ul li figure figcaption {
  width: 100%;
  float: left;
  padding: 15px;
  position: relative;
}
.team ul li figure figcaption h5 {
  font-weight: 900;
  font-size: 0.9em;
  font-family: sans-serif;
  letter-spacing: -0.5px;

}

.team ul li figure figcaption h3 {
    font-weight: 900;
    font-size: 1.5em;
    font-family: 'Libre Baskerville';
    line-height: 2;

}

.team ul li figure figcaption .social-links {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 2;
  background: #fff;
  padding: 3px;
  opacity: 0;
  padding-left: 15px;
}
.team ul li figure figcaption .social-links a {
  float: left;
  margin-right: 10px;
}
.team ul li figure figcaption .social-links a:hover {
  color: #f03a37;
}
.team ul li figure figcaption small {
  display: block;
}

/* BLOG */
.blog {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}
.blog .post {
  width: 100%;
  float: left;
  margin: 50px 0;
}
.blog .post .social-share {
  width: 100%;
  float: left;
  padding: 0 !important;
  margin-bottom: 40px;
}
.blog .post .social-share li {
  float: left;
  margin-right: 5px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.blog .post .social-share li.facebook a {
  background: #475993;
}
.blog .post .social-share li.twitter a {
  background: #76a9ea;
}
.blog .post .social-share li.google-plus a {
  background: #f34a38;
}
.blog .post .social-share li.linkedin a {
  background: #0077b7;
}
.blog .post .social-share li.youtube a {
  background: #f61c0d;
}
.blog .post .social-share li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  float: left;
  background: #f03a37;
  color: #fff;
  border: none;
  border-radius: 0;
}
.blog .post .post-image {
  width: 100%;
  display: block;
  margin-bottom: 0;
}
.blog .post .post-image img {
  width: 100%;
}
.blog .post .post-content {
  width: 100%;
  display: block;
  padding: 0 50px;
  font-size: 18px;
}
.blog .post .post-content h6 {
  font-weight: 300;
  line-height: 38px;
  font-size: 26px;
  margin-bottom: 30px;
}
.blog .post .post-content p {
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 20px;
}
.blog .post .post-content p:last-child {
  margin-bottom: 0;
}
.blog .post .post-content strong {
  font-weight: 600;
}
.blog .post .post-content figure {
  display: block;
  margin-bottom: 20px;
}
.blog .post .post-content blockquote {
  display: block;
  padding: 40px;
  margin-bottom: 40px;
  background: #f03a37;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  position: relative;
}
.blog .post .post-content blockquote:before {
  content: "";
  font-family: fontawesome;
  color: #fff;
  font-size: 90px;
  position: absolute;
  left: 40px;
  top: 0;
  opacity: 0.1;
}
.blog .post .post-content blockquote:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: -20px;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #f03a37 transparent transparent transparent;
}
.blog .post .post-content blockquote h5 {
  font-weight: 800;
  font-family: Poppins;
  margin: 0;
}
.blog .post .post-content ul {
  padding-left: 20px;
}
.blog .post .post-content ul li {
  padding: 3px 0;
}
.blog .post .post-content .avatar {
  display: block;
  color: #8f999a;
  line-height: 50px;
  margin: 25px 0;
  font-size: 13px;
  font-weight: 600;
}
.blog .post .post-content .avatar img {
  height: 50px;
  float: left;
  margin-right: 10px;
  border-radius: 50%;
}
.blog .post .post-content .avatar a {
  color: #313434;
}
.blog .post .post-content .post-date {
  display: block;
  color: #8f999a;
  margin-bottom: 10px;
  font-family: "Libre Baskerville", serif;
  font-size: 16px;
}
.blog .post .post-content .post-title {
  display: block;
  font-size: 2vw;
  font-weight: 800;
  margin-bottom: 20px;
}
.blog .post .post-content .post-title a {
  float: left;
  color: #313434;
}
.blog .post .post-content .post-intro {
  display: block;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 30px;
}
.blog .post .post-content .post-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 2px;
}
.blog .post .post-content .post-link:hover {
  text-decoration: none;
  color: #f03a37;
}
.blog .post .post-content .post-link:hover:before {
  width: 0;
}
.blog .post .post-content .post-link:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #f03a37;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* CONTACT */
.contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.contact .title {
  width: 100%;
  float: left;
  margin-bottom: 10px;
}
.contact .title h5 {
  font-weight: 800;
  font-size: 13px;
  color: #8f999a;
}
.contact .title h3 {
  font-family: serif;
  font-size: 13px;
    margin: 0;
    margin-top: 20px;
    margin-bottom: -10px;
    line-height: 1.7;
}
.contact .contact-box {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.contact .contact-box h6 {
  font-size: 2em;
  font-weight: 800;
}
.contact .contact-box p {
  font-family: serif;
  line-height: 30px;
  font-size: 18px;
  color: #8f999a;
  margin: 0;
}
.contact .contact-box a {
  display: block;
  font-family: "Libre Baskerville", serif;
  line-height: 30px;
  font-size: 18px;
  color: #8f999a;
  margin-bottom: 30px;
}
.contact .contact-box a:last-child {
  margin-bottom: 0;
}
.contact .map {
  width: 100%;
  height: 298px;
  float: left;
  margin-top: 30px;
  margin-bottom: 60px;
  background: #8f999a;
  filter: grayscale(100%);
}

.team .map {
    width: 100%;
    height: 298px;
    float: left;
    margin-top: 30px;
    margin-bottom: 60px;
    filter: grayscale(100%);
}

.address{
    margin-bottom: 30px;
 
}

.point {
  font-size: 13px;
    width: 100px;
    text-align: center;
    float: left;
    padding: 5px 0;
    background: #40526b;
    color: white;
    margin-right: 10px;
    margin-top: -5px;
}

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

.point {
    margin-top: -36px;
}

.header h5 {
    font-size: 55px;
}

}
.contact .alert {
  width: 100%;
  float: left;
  border-radius: 0;
  border: none;
  font-weight: 700;
}
.contact .form-group {
  width: 100%;
  float: left;
  padding: 0 15px;
}
.contact #success, .contact #error {
  display: none;
  float: left;
}
.contact #error {
  background: red;
  color: #fff;
}
.contact #success {
  background: green;
  color: #fff;
}
.contact form {
  width: 100%;
  float: left;
}
.contact form .form-group {
  width: 100%;
  float: left;
  padding: 0 15px;
}

.contact form .form-group button {
    height: 54px;
    background: #313434;
    color: #fff;
    padding: 0 30px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: serif;
    letter-spacing: 3px;
}

.gradient-btn {
    background-size: 200% auto;
    background-image: -o-linear-gradient(left, #5192e1 0%, #23ced5 51%, #5192e1 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(#234f84), color-stop(51%, #23ced5), to(#5192e1));
    background-image: linear-gradient(to right, #285b9a 0%, #377173 51%, #1755a0 100%);
    color: #fff;
}


.button {
    position: relative;
    display: inline-block;
    font-size: 15px;
    padding: 0.8rem 2.25rem;
    line-height: 1;
    text-transform: capitalize;
    text-align: center;
    font-weight: 500;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: 3px;
}



/*1031
.contact form .form-group:nth-child(1) {
  width: 50%;
}
*/

.contact form .form-group:nth-child(2) {
  width: 50%;
}
.contact form .form-group span {
  width: 100%;
  float: left;
  line-height: 54px;
  font-weight: 600;
  font-family: serif;
}

.contact form .form-group input {
  width: 100%;
  float: left;
  height: 54px;
  padding: 0 20px;
  border: none;
  background: #f3f3f3;
}
.contact form .form-group textarea {
  width: 100%;
  float: left;
  height: 120px;
  padding: 20px;
  border: none;
  background: #f3f3f3;
}
.contact form .form-group button {
  height: 54px;
  background: #313434;
  color: #fff;
  padding: 0 30px;
  border: none;
  font-size: 13px;
  font-weight: 600;
      font-family: serif;
    letter-spacing: 3px;
}
.contact form .form-group label.error {
  font-weight: 600;
  margin-top: 10px;
}
.contact form .form-group .error {
  color: #f03a37;
}

/* FOOTER */
.footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: #313434;
  text-align: center;
}
.footer .container {
  display: flex;
}
.footer .container .content-box {
  flex: 1;
  color: #fff;
}
.footer .container .content-box:nth-child(1) {
  text-align: left;
}
.footer .container .content-box:nth-child(3) {
  text-align: right;
}
.footer .container .content-box figure {
  display: block;
  height: 45px;
  margin-bottom: 15px;
}
.footer .container .content-box figure img {
  height: 45px;
}
.footer .container .content-box h2 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 30px;
  opacity: 0.5;
}
.footer .container .content-box p {
  font-size: 17px;
  font-family: "Libre Baskerville", serif;
  line-height: 32px;
  margin: 0;
}

/* SUB FOOTER */
.sub-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 40px 40px;
  background: #313434;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "Libre Baskerville", serif;
}
.sub-footer .container {
  display: flex;
}
.sub-footer .container small {
  margin-left: 0;
  color: #fff;
  font-size: 12px;
}
.sub-footer .container ul {
  margin-left: auto;
  margin-bottom: 0;
  padding: 0;
}
.sub-footer .container ul li {
  float: left;
  margin: 0;
  margin-left: 30px;
  padding: 0;
  list-style: none;
}
.sub-footer .container ul li a {
  float: left;
  color: #fff;
  font-size: 12px;
}

/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
  

/*インタビュー*/
.text-content-block_interview h2 {
    font-size: 2rem;
    font-family: "Libre Baskerville", serif;
    margin-bottom: 2rem;
}


.text-content-block_interview {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0;
}

/*インタビュー*/

  .header .slide-inner {
    padding: 0 60px;
    padding-left: 120px;
  }


  .header .swiper-container .swiper-slide h5 {
    font-size: 28px;
  }

  .works .works-grid li {
    width: 50%;
  }

  .side-content-block .inner {
    width: 60%;
  }

  .side-content-block_advantage .inner {
    width: 60%;
  }

 .side-content-block_company .inner {
    width: 60%;
  }

  .awards {
    background-size: auto 100%;
  }

  .awards .text-right {
    text-align: center !important;
  }

  .awards p {
    padding: 0;
  }

  .icon-content-block {
    flex-direction: row;
  }

  .icon-content-block .content-box {
    width: 50%;
    flex: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .clients ul li figure {
    padding: 15px 40px;
  }

  .page-header .inner-content .inner {
    padding: 0 10px;
  }

  .page-header .inner-content .inner h2 {
    font-size: 16vw;
  }

  .text-content-block h2 {
    font-size: 10vw;
    margin-bottom: 50px;
  }

  .page-header_works .inner-content .inner {
    padding: 0 120px;
  }

  .page-header_works .inner-content .inner h2 {
    font-size: 16vw;
  }

  .page-header_company .inner-content .inner {
    padding: 0 120px;
  }

  .page-header_company .inner-content .inner h2 {
    font-size: 12vw;
  }

 .page-header_company .inner-content .inner {
    padding: 0 10px;
  }

  .page-header_company .social-media {
    left: 25px;
  }

 .page-header .inner-content .inner {
    padding: 0 10px;
  }


  .team ul li {
    width: 33.33333%;
    border-top: 1px solid #dbe4e4;
  }

  .team ul li:nth-child(2) {
    margin-top: 0;
  }

  .team ul li:nth-child(4) {
    margin-top: 0;
  }

  .services-content-block .content-box h4 {
    font-size: 22px;
  }

  .services-content-block .content-box ul {
    font-size: 15px;
  }

  .contact form .form-group:nth-child(1) {
    width: 100%;
  }

  .contact form .form-group:nth-child(2) {
    width: 100%;
  }

  .footer .container {
    flex-direction: column;
    text-align: left;
  }

  .footer .container .content-box:nth-child(3) {
    text-align: left;
  }
}
/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {

/* RESPONSIVE advantage */
  .header .swiper-carousel .swiper-slide .inner h2 {
    font-size: 10vw;
    text-shadow: 1px 1px 4px #393835;
}


.header .swiper-carousel .swiper-slide .inner h4 {
    font-size: 5vw;
    text-align: center;
    color: white;
    margin-top: -27px;
    text-shadow: 1px 1px 4px #393835;
}
/* RESPONSIVE advantage */

.page-header_works_en .inner-content .inner {
    padding: 0 10px;
}

.page-header_works_en .inner-content .inner h2{
    font-size: 14vw;
}

.page-header_works_ho .inner-content .inner {
    padding: 0 10px;
}

.page-header_works_ho .inner-content .inner h2{
    font-size: 16vw;
}
.page-header_works_ho .inner-content .inner h6{
    font-size: 28px;
}

.page-header_works_ot .inner-content .inner {
    padding: 0 10px;
}

.page-header_works_ot .inner-content .inner h2 {
    font-size: 16vw;
}

.page-header_news .inner-content .inner h2 {
 font-size: 16vw;
}

.page-header_news .inner-content .inner {
    padding: 0 10px;
}

.page-header_con .inner-content .inner h2 {
    font-size: 16vw;
}
.page-header_con .inner-content .inner {
    padding: 0 10px;
}

.page-header {
    background-position: 55%;
}

  .navbar {
    padding: 30px 25px;
  }

  .navbar .logo a img {
    height: 75px;
  }

.awards h4 {
    padding-left: 0;
}

.navbar .logo a img {
    margin-left: 15px;
}

.works .works-title h2 {
    font-size: 9vw;
      }

.works_advantage .works-title h2 {
    font-size: 9vw;
      }

  .soundbar {
    display: none;
  }

  .navigation-menu.open address {
    display: none;
  }

  .navigation-menu .inner ul {
    width: 100%;
  }

  .navigation-menu .inner ul li a {
    font-size: 40px;
  }

  .header:after {
    height: 30px;
    left: 25px;
  }

  .header .social-media {
    bottom: 40px;
    left: 25px;
  }

  .header .swiper-container .swiper-button-prev {
    display: none;
  }

  .header .swiper-container .swiper-button-next {
    display: none;
  }

  .header .slide-inner {
    padding: 0 10px;
  }

  .header .swiper-container .swiper-slide h5 {
    font-size: 17px;
  }

  .header .swiper-container .swiper-slide h5:before {
    display: none;
  }

  .header .swiper-container .swiper-slide h2 {
    font-size: 60px;
  }

  .header .swiper-container .swiper-pagination-fraction {
    display: none;
  }

  .page-header .inner-content .inner {
    padding: 0 10px;
  }

  .page-header .social-media {
    left: 25px;
  }

 
  .page-header_works .inner-content .inner {
    padding: 0 10px;
  }

  .page-header_works .social-media {
    left: 25px;
  }


  .text-content-block {
    padding: 75px 10px;
  }

  .text-content-block h4 {
    font-size: 7vw;
  }

  .works {
    padding: 75px 10px;
  }

  .works .works-title {
    width: 100%;
  }

  .works .works-grid li {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 40px;
  }

  .works .works-grid li:last-child {
    margin-bottom: 0;
  }

   .works_advantage {
    padding: 75px 10px;
  }

  .works_advantage .works-title {
    width: 100%;
  }

  .works_advantage .works-grid li {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 40px;
  }

  .works_advantage .works-grid li:last-child {
    margin-bottom: 0;
  }

.side-content-block {
   background-position: 70%;
   background-attachment: unset;
   background-size:cover;
}

.side-content-block .inner .holder {
    margin-top: 130px;
}

.side-content-block_advantage {
    background-size: cover;
    background-attachment: unset;
    background-position: 85%;
}

.clients h6 {
    font-family: "Libre Baskerville", serif;
    font-size: 12px;
}

.clients h2 {
    font-size: 7vw;
}

  .side-content-block .inner {
    width: 100%;
    padding: 20vh 10px;
  }

 .side-content-block_company .inner {
    width: 100%;
    padding: 20vh 10px;
  }

.side-content-block_company{
    background-position: 84%;
    background-size: cover;
    background-attachment: unset;
}

 .side-content-block_advantage .inner {
    width: 100%;
    padding: 20vh 10px;
  }

  .side-content-block_advantage {
    background-position: 84%;
}

  .icon-content-block .content-box {
    width: 100%;
    border-right: 0;
    padding: 75px 25px;
  }

  .awards {
    padding: 75px 10px;
    background: none;
  }

  .awards .odometer {
    font-size: 40px;
  }

  .clients {
    padding: 75px 10px;
  }

  .clients ul:before {
    right: 0;
  }

  .clients ul li {
    width: 50%;
  }

  .clients ul li figure {
    padding: 15px 20px;
  }

  .team {
    padding: 75px 10px;
  }

  .team ul {
    padding: 0;
  }

  .team ul li {
    width: 100%;
    margin-bottom: 40px;
  }

  .team ul li:last-child {
    margin-bottom: 0;
  }

  .services-content-block {
    padding: 75px 10px;
  }

  .services-content-block .content-box {
    margin: 20px 0;
  }

  .blog .post {
    padding: 0 15px;
  }

  .blog .post .post-content {
    padding: 0;
  }

  .blog .post .post-content .post-title {
    font-size: 7vw;
  }

  .contact {
    padding: 75px 10px;
  }

  .contact .title {
    margin-bottom: 17px;
  }

  .contact form .form-group {
    padding: 0;
  }

  .contact .map {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .footer {
    padding: 75px 10px;
  }

  .footer .container .content-box {
    margin-bottom: 50px;
  }

  .footer .container .content-box:last-child {
    margin-bottom: 0;
  }

  .footer .container .content-box h2 {
    margin-bottom: 20px;
  }

  .sub-footer {
    padding: 30px 10px;
  }

  .sub-footer .container {
    flex-direction: column;
    text-align: left;
  }

  .sub-footer .container ul {
    margin-left: 0;
    margin-top: 10px;
  }

  .sub-footer .container ul li {
    margin-left: 0;
    margin-right: 10px;
  }
}

/* Requirements */

#information {
    padding-bottom: 16.0rem;
    position: relative;
    z-index: 2;
}
#information .inner {
    width: 70.5rem;
    margin: 0 auto;
}

#information .inner dl#outline {
    font-size: 1.1rem;
    line-height: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: left;
}

#information .inner dl#outline > dt {
    width: 15rem;
    font-weight: 700;
    color: #283f49;
    padding: 4.0rem 2.5rem;
    box-sizing: border-box;
    border-bottom: 2px solid #283f49;
}

#information .inner dl#outline > dt span {
    font-size: 0.9rem;
    color: #8d8d8d;
    display: block;
    white-space: nowrap;
}

#information .inner dl#outline > dd {
    width: 55rem;
    padding: 4.0rem 2.0rem;
    box-sizing: border-box;
    border-bottom: 2px solid #8d8d8d;

    margin-bottom: 0;
    margin-left: 0;
}

#information .inner dl#outline > dd a {
    color: #008dd7;
    text-decoration: underline;
}
#information .inner dl#outline > dd dl dt {
    padding-left: 1.2em;
    position: relative;
}
#information .inner dl#outline > dd dl dt span.head {
    color: #80c1ea;
}
#information .inner dl#outline > dd dl dt:before {
    content: "●";
    color: #283f49;
    position: absolute;
    left: 0;
    top: 0;
}
#information .inner dl#outline > dd span.color-gray {
    color: #8d8d8d;
}
#information p#letter-information-k {
    width: 12.0rem;
    position: absolute;
    left: 0;
    top: 65.0rem;
}
  
@media only screen and (min-width: 0px) and (max-width: 750px) {


.side-content-block_advantage .inner .holder p {
    font-size: 20px;
}

.side-content-block_company .inner .holder p {
    font-size: 20px;
}

.side-content-block .inner .holder p {
    font-size: 20px;
}

#information {
    padding-bottom: 10.0rem;
}
#information .inner {
    width: 20rem;
}

#information .inner dl#outline {
    font-size: 1.3rem;
    line-height: 1.8;
}
#information .inner dl#outline > dt {
    width: 20rem;
    padding: 2.0rem 1.0rem;
    border-bottom: 0.3rem solid #283f49;
    text-align: center;
    font-size: 1.3rem;
}
#information .inner dl#outline > dt span {
    font-size: 1rem;
    line-height: 1.3;
    white-space: normal;
}
#information .inner dl#outline > dd {
    width: 20rem;
    padding: 4.0rem 1.0rem;
    border-bottom: none;
}
#information p#letter-information-k {
    width: 14.8rem;
    top: 108.0rem;
    opacity: 0.3;
}     

}  

/*# sourceMappingURL=style.css.map */

/* ===== ロゴの最終ルール（通常 / スクロール時） ===== */

/* 通常時のロゴ */
.navbar .logo a img {
  height: 80px !important;   /* 通常サイズ（調整可） */
  width: auto !important;    /* 横に間延びしない */
  margin-left: 30px;         /* 左の余白 */
  transition: height 0.3s ease;
}

/* スクロール時だけ小さくする */
.navbar.fixed .logo a img {
  height: 60px !important;   /* 小さくなったときのサイズ（調整可） */
}

/* ===== スマホ（幅768px以下）：ロゴの左余白を小さく ===== */
@media screen and (max-width: 768px) {
  .navbar .logo a img {
    margin-left: 10px !important; /* ← スマホでは余白小さく */
    height: 60px !important;      /* 通常状態も少し小さめにしてOK（必要なければ変更可） */
  }

  .navbar.fixed .logo a img {
    height: 50px !important;      /* スクロール時さらに小さく */
  }

  /* 通常のロゴ（余白は変更しない） */
.navbar .logo a img {
  height: 80px !important;
  width: auto !important;
  transition: height 0.3s ease, margin-left 0.3s ease;
}

/* スクロール時にロゴを小さく＋左余白追加 */
.navbar.fixed .logo a img {
  height: 60px !important;     /* ロゴが小さくなる */
  margin-left: 20px !important; /* ← スクロール時だけ左余白 */
}

 .navbar.fixed {
    padding-right: 20px !important;
  }


}