html {
  scroll-padding-top: 208px;
}
@media screen and (max-width:1080px) {
  html {
   scroll-padding-top: 57px;
  }
}
/*-----------------------------------

      vision

    -----------------------------------*/
    .banner {
      display: flex;
      justify-content: space-between;
      margin: 173px auto 116px;
      width: 100%;
      max-width: 1200px;
    }

    .banner>div {
      position: relative;
    }

    .banner img {
      display: none;
    }

    .banner .information,
    .banner .recruit,
    .banner .sdgs {
      width: 570px;
      height: 190px;
      padding-top: 20px;
      border-radius: 10px;
      background-color: #f08300;
      color: #fff;
      position: relative;
    }

    .banner .information {
      background-image: url(../img/vision/information.c8fdd0a.png);
      background-repeat: no-repeat;
      background-position-x: -2px;
      background-size: contain;
    }

    .banner .recruit {
      background-image: url(../img/vision/recruit.b959257.png);
      background-repeat: no-repeat;
      background-position-x: -2px;
      background-size: contain;
    }

    .banner .sdgs {
      background-image: url(../img/vision/sdgs.2fa97f2.png);
      background-repeat: no-repeat;
      background-position-x: -2px;
      background-size: contain;
    }

    .banner .text {
      width: 245px;
      margin-left: 52%;
    }

    .banner .title {
      font-size: 1.5625rem;
      width: 230px;
      padding-bottom: 5px;
      color: #fff;
    }

    .banner .subtext {
      margin-top: 16px;
      color: #fff;
      line-height: 25px;
    }

    .banner .next {
      margin-top: 21px;
      text-align: right;
      color: #fff;
    }

    .banner .next img {
      width: 20px;
      margin: 0 7px 0 40px;
    }

    .banner a {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      background: #fff;
      z-index: 1;
    }

    @media screen and (max-width:1240px) {
      .banner {
        padding: 0 25px;
      }

      .banner .information,
      .banner .recruit,
      .banner .sdgs {
        width: 500px;
        height: 160px;
        padding-top: 10px;
      }

      .banner .text {
        margin-left: 48%;
      }
    }

    @media screen and (max-width:1080px) {
      .banner {
        flex-wrap: wrap;
        margin-top: 70px;
        margin-bottom: 70px;
      }

      .banner>div {
        margin: auto auto 30px;
      }

      .banner .information {
        margin: 0;
      }
    }

    @media screen and (max-width:600px) {
      .banner>div {
        margin-bottom: 30px;
      }

      .banner .information,
      .banner .recruit,
      .banner .sdgs {
        display: none;
      }

      .banner img {
        display: block;
        width: 100%;
      }
    }

    @media (hover:hover) {
      .banner a:hover {
        opacity: .4;
      }
    }


    .contents {
      max-width: 1200px;
      margin: 0 auto;
      text-align: left;
      color: #333;
      font-size: .9375rem;
    }

    .sp-br {
      display: none;
    }

    #container .key-container {
      width: 100%;
      margin-top: 60px;
      display: flex;
    }

    #container nav {
      width: 100%;
    }

    nav a {
      text-decoration: none;
    }

    #container nav ul {
      display: flex;
      justify-content: center;
    }

    #container nav .item {
      width: 152px;
      margin-left: 90px;
      padding: 15px 0;
      border-bottom: 1px solid #ddd;
      list-style: none;
      display: inline-block;
    }

    #container nav .orange {
      color: #e94709;
      font-size: .875rem;
      margin-bottom: 9px;
    }

    #container nav .index {
      display: flex;
      justify-content: space-between;
    }

    #container nav .index span {
      font-weight: 700;
    }

    #container nav img {
      width: 20px;
      float: right;
      margin: 8px 0;
      height: 10px;
    }

    #container nav .sp-arrow {
      display: none;
    }

    .key-visual {
      width: 100%;
      position: relative;
    }

    .key-visual .img-area {
      z-index: -1;
      width: 100%;
    }

    .key-visual .img-area img {
      width: 100%;
    }

    .key-visual .text {
      position: absolute;
      transform: translateY(-50%) translateX(-50%);
      top: 40%;
      left: 50%;
      padding-top: 115px;
      text-align: center;
    }

    .key-visual .subtitle {
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 25px;
      letter-spacing: 7.2px;
    }

    .key-visual .title {
      color: #fff;
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.8;
      text-shadow: 0 0 15px grey;
      letter-spacing: 3px;
    }

    #container section .orange {
      color: #e94709;
      font-size: .875rem;
      margin-bottom: 27px;
    }

    #container section .main-text,
    #container section .title {
      font-size: 1.5625rem;
      font-weight: 500;
    }

    #container .vision {
      margin-top: -40px;
      text-align: left;
    }

    #container .vision .head {
      display: flex;
      margin-bottom: 15px;
    }

    #container .vision .head .icon {
      width: 110px;
      height: 22px;
      background-color: #f5a200;
      text-align: center;
    }

    #container .vision .head .icon .icon-text {
      width: 80%;
      height: 22px;
      background-color: #e94709;
      color: #fff;
      font-size: .75rem;
      padding-top: 2px;
      float: right;
    }

    #container .vision .head .caption {
      margin-left: 15px;
      color: #e94709;
      font-weight: 500;
    }

    #container .vision .subtext {
      margin-top: 26px;
      line-height: 30px;
    }

    
    #container .top-container {
      margin-top: 120px;
      height: 990px;
    }

    #container .top-container .back-color {
      position: absolute;
      width: 81%;
      height: 424px;
      background-color: #e8e4e4;
      margin-top: -130px;
      right: 0;
      overflow: hidden;
    }

    #container .top-container .band {
      position: absolute;
      width: 100%;
      height: 240px;
      margin-top: 150px;
      left: 0;
      z-index: 1;
      overflow: hidden;
    }

    #container .top {
      height: 600px;
      position: relative;
      display: flex;
      align-items: flex-end;
      z-index: 1;
    }

    #container .top .title {
      margin-bottom: 88px;
    }

    #container .top .left {
      z-index: 2;
    }

    #container .top .left .social-role .subtext {
      margin-top: 0;
      padding-top: 2em;
      padding-right: 3em;
      background: hsla(0, 0%, 100%, .7);
    }

    #container .top .right {
      position: absolute;
      top: 0;
      right: 0;
    }

    #container .top .right .top-image {
      width: 880px;
      height: 600px;
      background-image: url(../img/vision/vision.002c37c.png);
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 1;
    }

    #container .top .right .top-image img {
      display: none;
    }

    #container .cooperation {
      display: flex;
      justify-content: space-between;
      margin-top: 152px;
    }

    #container .cooperation .left {
      width: 560px;
    }

    #container .cooperation .right {
      width: 600px;
      height: 380px;
      background-image: url(../img/vision/spirit.cd0a1d2.png);
      background-repeat: no-repeat;
      background-size: contain;
    }

    #container .cooperation .right img {
      display: none;
    }

    #container .likeness-container {
      margin-top: 60px;
      height: 710px;
      position: relative;
    }

    #container .likeness-container .back-color {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 640px;
      background-color: #e8e4e4;
      overflow: hidden;
    }

    #container .likeness {
      display: flex;
      margin-top: 100px;
      position: absolute;
      z-index: 1;
    }

    #container .likeness .left .likeness-image1 {
      width: 406px;
      height: 443px;
      background-image: url(../img/vision/likeness01.c9b2097.png);
      background-repeat: no-repeat;
      background-size: contain;
      margin-left: 97px;
    }

    #container .likeness .left .likeness-image1 img {
      display: none;
    }

    #container .likeness .right {
      width: 660px;
      margin-left: 97px;
    }

    #container .likeness .right .likeness-image2 {
      width: 427px;
      height: 272px;
      background-image: url(../img/vision/likeness02.4074885.png);
      background-repeat: no-repeat;
      margin-top: 84px;
      margin-left: 170px;
      background-size: contain;
    }

    #container .slogan {
      margin-top: 150px;
      display: flex;
      justify-content: center;
    }

    #container .slogan img {
      width: 257px;
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content;
      margin-right: 220px;
    }

    #container .slogan .right {
      width: 560px;
      text-align: left;
    }

    #container .slogan .right .orange {
      font-weight: 500;
      margin-bottom: 10px;
    }

    #container .slogan .right .copy {
      font-size: 1.5rem;
      font-weight: 700;
    }

    #container .slogan .right .subtext {
      margin-top: 26px;
      margin-bottom: 88px;
      line-height: 2;
    }

    #container .slogan .right .main-text {
      font-size: 4.25rem;
      font-weight: 500;
      letter-spacing: .1em;
    }

    #container .business-vision {
      margin-top: 150px;
      text-align: center;
    }

    #container .business-vision .line {
      width: 59px;
      height: 9px;
      background-color: #f5a200;
      margin: 30px auto auto;
    }

    #container .business-vision .main-text {
      font-size: 1.25rem;
      font-weight: 700;
      margin-top: 40px;
    }

    #container .business-vision .subtext {
      margin: 40px auto auto;
      width: 970px;
      line-height: 30px;
    }

    #container .business-vision .image {
      width: 100%;
      height: 390px;
      background-image: url(../img/vision/business_vision.9425f0b.png);
      background-repeat: no-repeat;
      margin-top: 50px;
      background-size: contain;
    }

    #container .message {
      margin-top: 102px;
      display: flex;
      position: relative;
    }

    #container .message .left {
      width: 420px;
    }

    #container .message .left .title {
      position: relative;
    }

    #container .message .left .img {
      width: 325px;
      height: 210px;
      margin-top: 54px;
    }

    #container .message .left .img img {
      width: 100%;
    }

    #container .message .right {
      width: 780px;
      margin-top: 50px;
    }

    .message .main-text {
      margin-top: 90px;
      margin-bottom: 39px;
    }

    #container .message .sign {
      font-size: 1.5625rem;
      margin-top: 160px;
      margin-right: 10px;
      text-align: right;
      font-weight: 500;
    }

    #container .message .subtext {
      line-height: 30px;
    }

    a.none-decoration {
      text-decoration: none;
    }

    .janp-message {
      position: absolute;
      top: -100px;
      left: -1000px;
    }
    @media screen and (max-width:1240px) {
      .contents {
        padding: 0 25px;
     }

      #container nav,
      #container nav ul {
        width: 100%;
      }

      #container nav ul {
        display: flex;
      }

      #container nav ul .item {
        margin-left: 50px;
      }

      #container nav ul .item .index {
        padding-right: 20px;
      }

      #container .top .right .top-image {
        width: 750px;
        height: 542px;
      }

      #container .vision .subtext {
        margin-right: 5%;
      }

      #container .likeness .left .likeness-image1,
      #container .likeness .right {
        margin-left: 9%;
      }

      #container .likeness .right .likeness-image2 {
        margin-left: 18%;
      }

      #container .slogan img {
        margin-right: 10%;
      }
    }

    @media screen and (max-width:1080px) {
      #container .key-container {
        margin-top: 10px;
      }

      #container .key-container nav ul {
        width: 100%;
        flex-wrap: wrap;
      }

      #container .key-container nav ul .item {
        width: 50%;
        height: 54px;
        margin-left: 0;
        padding-left: 20px;
        border: 1px solid #999;
      }

      #container .key-container nav ul .item .orange {
        display: none;
      }

      #container .key-container nav ul .item .index span {
        font-weight: 400;
      }

      #container .key-container nav ul .item .sp-arrow {
        display: block;
      }

      #container .key-container nav ul .item .pc-arrow {
        display: none;
      }

      #container .key-container nav ul .item:first-child,
      #container .key-container nav ul .item:nth-child(3) {
        border-right: none;
      }

      #container .key-container nav ul .item:first-child,
      #container .key-container nav ul .item:nth-child(2) {
        border-bottom: none;
      }

      #container .key-visual {
        width: 100%;
        margin-top: 40px;
      }

      #container .key-visual .text {
        padding-top: 60px;
        width: 100%;
      }

      #container .key-visual .text .subtitle {
        margin-bottom: 10px;
      }

      #container .key-visual .text .title {
        font-size: 1.5rem;
        line-height: normal;
      }

      #container section .orange {
        margin-bottom: 9px;
      }

      #container .vision .subtext {
        line-height: 2;
        margin-right: 0;
      }

      #container .vision .top-container {
        height: auto;
      }

      #container .vision .top-container .top {
        height: auto;
      }

      #container .vision .top-container .top,
      .vision .top-container .top .left {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #container .vision .top-container .top .left .title {
        margin-bottom: 45px;
      }

      #container .vision .top-container .top .left .social-role {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #container .vision .top-container .top .left .social-role .subtext {
        padding-top: 1em;
        padding-right: 0;
      }

      #container .vision .top-container .top .right {
        width: 100%;
        top: auto;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #container .vision .top-container .top .right .top-image {
        width: 80%;
        height: auto;
        background: none;
      }

      #container .vision .top-container .top .right .top-image img {
        display: block;
        width: 100%;
      }

      #container .vision .top-container .back-color,
      #container .vision .top-container .band {
        display: none;
      }

      #container .vision .cooperation {
        margin-top: 100px;
      }

      #container .vision .cooperation,
      #container .vision .cooperation .left {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #container .vision .cooperation .left {
        width: 100%;
      }

      #container .vision .cooperation .right {
        width: 80%;
        height: auto;
        background: none;
        margin-top: 10px;
      }

      #container .vision .cooperation .right img {
        display: block;
        width: 100%;
      }

      #container .vision .likeness-container {
        width: 100%;
        margin-top: 30px;
        height: auto;
      }

      #container .vision .likeness-container .back-color {
        display: none;
      }

      #container .vision .likeness-container .likeness {
        width: 100%;
        margin-top: 80px;
        display: flex;
        position: static;
        flex-direction: column-reverse;
      }

      #container .vision .likeness-container .likeness .right {
        position: static;
        width: 100%;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #container .vision .likeness-container .likeness .right .subtext {
        width: 85%;
      }

      #container .vision .likeness-container .likeness .right .likeness-image2 {
        display: none;
      }

      .vision .likeness-container .likeness .left {
        width: 100%;
        position: static;
      }

      #container .vision .likeness-container .likeness .left .likeness-image1 {
        width: 80%;
        background: none;
        margin-top: 20px;
        height: auto;
      }

      #container .vision .likeness-container .likeness .left .likeness-image1 img {
        display: block;
        width: 100%;
      }

      #container .slogan {
        margin-top: 60px;
        display: block;
        text-align: center;
      }

      #container .slogan img {
        width: 100px;
        margin-top: 0;
        margin-right: 0;
      }

      #container .slogan .right {
        margin-top: 20px;
        width: 100%;
        text-align: center;
      }

      #container .slogan .right .subtext {
        margin-bottom: 60px;
      }

      #container .business-vision {
        margin-top: 70px;
      }

      #container .business-vision .subtext {
        width: 100%;
        margin-top: 30px;
        line-height: 2;
      }

      #container .business-vision .sp-br {
        display: block;
      }

      #container .business-vision .image {
        width: 100%;
        height: 250px;
        background-position: 50%;
        margin-top: 0;
      }

      #container .message {
        display: block;
        margin-top: 20px;
      }

      #container .message .left {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #container .message .left .img {
        margin: 54px auto 0;
      }

      #container .message .right {
        width: 100%;
        margin-top: -20px;
      }

      #container .message .right .subtext {
        line-height: 2;
      }

      #container .message .right .sign {
        margin-top: 45px;
      }
    }

    @media screen and (max-width:600px) {
      #container .key-visual .text {
        padding-top: 20px;
      }

      #container .key-visual .text .subtitle {
        font-size: .8rem;
        margin-bottom: 10px;
      }

      #container .key-visual .text .title {
        font-size: 1.2rem;
      }
    }

    @media screen and (max-width:400px) {
      #container .message .left .img {
        width: 100%;
      }
    }