@media screen and (max-width: 767px) {
  .ta_l_sp {
    text-align: left; } }

.inner {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
  position: relative; }

div.contents_wrap {
  background: url("../images/top/sec1_bg.jpg") top right;
  background-size: 100% auto;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 767px) {
    div.contents_wrap {
      background-size: 300% auto; } }

div.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: content-box;
  background: url("../images/top/bg.png") top right;
  background-size: cover;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 767px) {
    div.container {
      background: url("../images/top/bg_sp.png") top right;
      background-size: cover; } }

.sec {
  overflow: hidden;
  margin-top: -17.625vw;
  position: relative; }
  .sec h3 {
    font-size: 20px;
    letter-spacing: 0.3em;
    font-weight: bold; }
    @media screen and (max-width: 767px) {
      .sec h3 {
        font-size: 17px;
        letter-spacing: -0.05em; } }
  .sec h4 {
    font-size: 14px;
    letter-spacing: 0.1em; }
    @media screen and (max-width: 767px) {
      .sec h4 {
        font-size: 12px;
        letter-spacing: -0.05em; } }

.sec0 {
  /*background: url("../images/top/sec1_bg.png") top right;*/
  padding: 15vw 0 18vw;
  text-align: center;
  color: #fff; }
  @media screen and (max-width: 767px) {
    .sec0 {
      padding: 20vw 0 28vw;
      background-size: 300% auto; } }
  .sec0 .ttl {
    position: absolute;
    bottom: -5%;
    left: 0;
    width: 37.5%; }
    @media screen and (max-width: 767px) {
      .sec0 .ttl {
        position: absolute;
        bottom: -5%;
        left: 0;
        width: 60%; } }

.sec1 {
  background: url("../images/top/bg.png") top right;
  background-size: cover;
  padding: 22vw 0 22vw;
  text-align: center;
  color: #000; }
  @media screen and (max-width: 767px) {
    .sec1 {
      background: url("../images/top/bg_sp.png") top right;
      background-size: cover;
      padding: 24vw 0 32vw; } }
  .sec1:before {
    content: "";
    background: url("../images/top/img201.png") top left;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 16%;
    height: 0;
    padding-top: 32%; }
    @media screen and (max-width: 767px) {
      .sec1:before {
        bottom: 0;
        left: 0;
        width: 20%;
        padding-top: 40%; } }
  .sec1:after {
    content: "";
    background: url("../images/top/img202.png") bottom left no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: 40%;
    right: 0;
    width: 14%;
    max-width: 245px;
    height: 0;
    padding-top: 28%; }
    @media screen and (max-width: 767px) {
      .sec1:after {
        bottom: 45%;
        right: 0;
        width: 20%;
        padding-top: 40%; } }
  .sec1 .ttl {
    position: absolute;
    bottom: 12vw;
    right: 0;
    width: 34.375%; }
    @media screen and (max-width: 767px) {
      .sec1 .ttl {
        bottom: 11vw;
        width: 50%; } }
  .sec1 .obi {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; }
    @media screen and (max-width: 767px) {
      .sec1 .obi {
        top: 0;
        right: 0;
        width: 180%; } }

.main {
  position: relative;
  transition: all 1.2s ease-in-out;
  transition-delay: 0.3s;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .main {
      transition-delay: 0s; } }
  .main .mimg {
    width: 100%; }
  .main .logo {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    text-align: center;
    z-index: 10; }
    @media screen and (max-width: 767px) {
      .main .logo {
        top: 35%;
        left: 15%;
        width: 70%; } }

.sec {
  position: relative; }
  .sec .anq {
    position: absolute;
    top: -30px; }

.vpc960 {
  display: none; }
  @media screen and (max-width: 960px) {
    .vpc960 {
      display: block; } }