@charset "UTF-8";
/* googlefont　*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,700&display=swap");
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
サイト固有の追加項目
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* base設定　*/
html, body {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  position: relative;
  font-size: 14px;
  line-height: 1.8;
  overflow-x: hidden;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  html, body {
    font-size: 16px;
  }
}
@media screen and (min-width: 992px) {
  html, body {
    font-size: 16px;
    line-height: 1.8;
  }
}
@media screen and (min-width: 1200px) {
  html, body {
    font-size: 16px;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  position: relative;
  overflow-y: hidden;
  position: relative;
  font-family: "Lato", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  background: rgba(255, 255, 255, 0);
  color: #333;
}
body a {
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.2s linear !important;
  transition: all 0.2s linear !important;
}
body a:hover {
  -webkit-transition: all 0.2s linear !important;
  transition: all 0.2s linear !important;
}
body strong {
  font-weight: bold;
}
body .small {
  font-size: 0.8rem;
}

::-moz-selection {
  background: #FFF3CE;
}

::selection {
  background: #FFF3CE;
}

img {
  border: none;
  vertical-align: bottom;
  max-width: 100%; /*for responsive*/
  height: auto; /*for responsive*/
  width: auto; /* IE8のみ */
}

.opacity:hover {
  opacity: 70%;
  -moz-opacity: 0.7;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.C-1-2 .g_page_ttl {
  background-image: url(/img/ttl/ttl_sp_identity.jpg);
}
@media screen and (min-width: 768px) {
  .C-1-2 .g_page_ttl {
    background-image: url(/img/ttl/ttl_pc_identity.jpg);
  }
}
.C-1-2 .particles_wrap {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 500px;
  z-index: -99;
  overflow: hidden;
}

/*==================================

identity_sec

==================================*/
.identity_sec h2 {
  text-align: center;
  letter-spacing: 5px;
  margin: 1rem 0;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.4;
}
.identity_sec h2 span {
  padding-right: 1rem;
  font-weight: 700;
  display: block;
  color: black;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .identity_sec h2 span {
    font-size: 3rem;
  }
}

/*==================================

identity_philosophy

==================================*/
.identity_philosophy {
  background-image: url(/img/company/identity_philosophy_bg1.jpg), url(/img/company/identity_philosophy_bg2.jpg);
  background-repeat: no-repeat;
  background-position: left bottom, right bottom;
  padding-bottom: 10rem;
  background-size: 40% auto;
  margin-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .identity_philosophy {
    padding-bottom: 10rem;
    background-size: 20% auto;
  }
}
.identity_philosophy h2 {
  margin: 0;
  padding: 4rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .identity_philosophy h2 {
    padding: 7rem 0 0 0;
  }
}
.identity_philosophy h3 {
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 4px;
  padding: 0 0 2rem 0;
}
.identity_philosophy p {
  line-height: 2.5;
  letter-spacing: 3px;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.identity_philosophy .white_bg {
  background-color: rgba(255, 255, 255, 0.7);
  width: 96%;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 1200px;
}
@media screen and (min-width: 768px) {
  .identity_philosophy .white_bg {
    padding: 3rem;
    margin: 3rem auto;
  }
}

/*==================================

identity_mission

==================================*/
.identity_mission {
  margin-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .identity_mission {
    margin-bottom: 15rem;
  }
}
.identity_mission h3 {
  width: 98%;
  margin: 5rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .identity_mission h3 {
    width: 90%;
    font-size: 2.8rem;
    letter-spacing: 3px;
  }
}
.identity_mission h3:before, .identity_mission h3:after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 1px;
  background: black;
  display: block;
}
.identity_mission h3:before {
  margin-right: 1rem;
}
.identity_mission h3:after {
  margin-left: 1rem;
}

/*==================================

identity_policy

==================================*/
.identity_policy {
  padding-top: 2rem;
  background-image: url(/img/company/identity_policy.jpg);
  background-repeat: no-repeat;
  background-position: left 22%;
  background-size: contain;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .identity_policy {
    margin-bottom: 15rem;
    padding-top: 5rem;
    background-position: left top;
  }
}
.identity_policy ul {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 3rem;
  margin: 50% 2rem 2rem 2rem;
}
@media screen and (min-width: 768px) {
  .identity_policy ul {
    margin: 5rem 2rem 5rem 10%;
  }
}
@media screen and (min-width: 992px) {
  .identity_policy ul {
    margin: 5rem 2rem 5rem 50%;
  }
}
.identity_policy li {
  margin-bottom: 2rem;
}
.identity_policy h3 {
  font-weight: bold;
  font-size: 2.2rem;
  letter-spacing: 4px;
  display: inline-block;
  line-height: 1.2;
}

/*==================================

identity_value

==================================*/
.identity_value {
  padding-top: 2rem;
  background-image: url(/img/company/identity_value.jpg);
  background-repeat: no-repeat;
  background-position: left 22%;
  background-size: contain;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .identity_value {
    margin-bottom: 15rem;
    padding-top: 5rem;
    background-position: right top;
  }
}
.identity_value ul {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 3rem;
  margin: 50% 2rem 2rem 2rem;
}
@media screen and (min-width: 768px) {
  .identity_value ul {
    margin: 5rem 10% 5rem 2rem;
  }
}
@media screen and (min-width: 992px) {
  .identity_value ul {
    margin: 5rem 50% 5rem 2rem;
  }
}
.identity_value li {
  margin-bottom: 2rem;
}
.identity_value h3 {
  font-weight: bold;
  font-size: 2.2rem;
  letter-spacing: 4px;
  display: inline-block;
  line-height: 1.2;
}

/*==================================

identity_logo

==================================*/
.identity_logo {
  margin-bottom: 5rem;
}
.identity_logo h3 {
  letter-spacing: 5px;
  margin: 4rem 0 2rem 0;
  font-size: 1.8rem;
  font-weight: bold;
}
.identity_logo h4 {
  letter-spacing: 5px;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .identity_logo h4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.identity_logo h4:after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 1px;
  background: black;
  margin-left: 1rem;
}
.identity_logo .identity_logo_ex {
  width: 90%;
  max-width: 780px;
  display: block;
  margin: 2rem auto;
}
.identity_logo p {
  margin-bottom: 1rem;
  line-height: 2;
  letter-spacing: 3px;
}
.identity_logo .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.identity_logo .col-6 {
  margin-bottom: 3rem;
}

.black_bg {
  background-color: #85764D;
  height: 20vh;
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .black_bg {
    height: 35vh;
  }
}

.logo_movie_wrap {
  width: 96%;
  max-width: 800px;
  margin: -18vh auto 0 auto;
}
@media screen and (min-width: 768px) {
  .logo_movie_wrap {
    margin: -28vh auto 0 auto;
  }
}
.logo_movie_wrap img {
  display: block;
  margin: 0 auto;
  width: 100%;
}