@charset "UTF-8";

/* =============================================
contents sp
================================================*/

.inner {width: 100%;margin: 0 auto;}

.hero-top {padding: 86vw 0 5vw;display: block;position: relative;background: #fff;}
.hero-top h1 {width: 85vw;margin: 0 auto;font-size: 4.2vw;font-weight: 700;line-height: 2.2;letter-spacing: 0.13em;position: relative;z-index: 1;}
.hero-top .video {position: absolute;top: 0;left: 62.7%;transform: translate(-50%);border-radius: 0 0 0 40px;width: 75vw;height: 115vw;overflow: hidden;}
.hero-top .video video {max-width: none;height: 100%;position: relative;left: 50%;transform: translate(-43%);}

.top-message {padding: 5vw 0 10vw;position: relative;background: #fff;margin-bottom: 50vw;}
.top-message .message-img {border-radius: 0 0 40px 0;width: 93.1vw;position: relative;left: -8vw;}
.top-message .message-midashi {margin: 5vw auto 0;width: 85vw;position: relative;}
.top-message .message-midashi .en {font-size: 15vw;letter-spacing: 0.06em;color: #e5e5e5;opacity: 0.52;display: block;text-align: center;}
.top-message .message-midashi .jp {font-size: 4.7vw;font-weight: 700;line-height: 1.45;position: relative;margin-top: 6vw;display: block;}
.top-message .message-txt {margin: 8vw auto 0;font-size: 3.4vw;font-weight: 500;line-height: 1.9;width: 85vw;position: relative;}
.top-message .message-txt span {font-size: 4.4vw;font-weight: 700;font-feature-settings: "palt";letter-spacing: 0.1em;display: block;margin-top: 2vw;line-height: 1.6;}

.top-contents {padding-bottom: 17vw;background: #fff;}

.top-service {text-align: center;padding: 15.7vw 8vw 0;}
.top-service .service-midashi {font-size: 8.3vw;font-weight: bold;font-family: var(--robot);}
.top-service .service-txt {font-size: 3.4vw;line-height: 1.4;margin-top: 5vw;text-align: justify;}
.top-service .service-list {margin-top: 8.2vw;}
.top-service .service-list li {text-align: left;margin-bottom: 4.5vw;}
.top-service .service-list a img {transition: all 0.3s ease;}
.top-service .service-list p {font-size: 4vw;font-weight: bold;margin-top: 1.3vw;padding: 0 3vw;}
.top-service .service-list p img {display: inline-block;vertical-align: middle;margin-left: 2vw;transition: all 0.3s ease;width: 4vw;}
.top-service .service-list li:hover p img {margin-left: 40px;}
.top-service .more00 {display: inline-block;margin-top: 5vw;font-weight: 500;font-family: var(--robot);letter-spacing: 0.05em;border-bottom: 2px solid #000;padding: 0 1vw 1vw;}
.top-service .more01 {display: inline-block; margin-top: 5vw;}

.top-contents-list {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;margin: 16vw auto 0;border-top: 1px solid;padding-top: 16.6vw;}
.top-contents-list li {padding: 16.1vw 0;position: relative;width: 65vw;margin: 0 auto 6.4vw;border-radius: 40px 0 40px 0;overflow: hidden;}
.top-contents-list li:last-child {margin-bottom: 0;}
.top-contents-list a:hover {opacity: 1;}
.top-contents-list img {position: absolute;top: 0;max-width: none;height: 100%;width: auto;left: 50%;transform: translate(-50%);}
.top-contents-list .contents-ttl {position: relative;text-align: center;font-family: var(--robot);font-size: 5vw;font-weight: bold;letter-spacing: 0.05em;color: #fff;}
.top-contents-list .more01 {margin: 5.6vw auto 0;position: relative;}

/* =============================================
contents pc
================================================*/
@media screen and (min-width: 736px) {
  
  .inner {width: 1310px;}

  .hero-top {padding: 505px 0 217px;}
  .hero-top h1 {width: 1346px;font-size: 36px;line-height: 2;}
  .hero-top .video {border-radius: 0 0 0 80px;width: 1435px;height: auto;left: calc( 50% + 241px );transform: translate(-50%);}
  .hero-top .video video {left: auto;transform: none;max-width: 100%;}

  .top-message {padding: 31px 0 99px;margin-bottom: 440px;}
  .top-message .message-img {position: absolute;width: auto;top: 0;left: calc( 50% + -478px );transform: translate(-50%);border-radius: 0 0 80px 0;}
  .top-message .message-midashi {margin: 0 116px 0 auto;width: 450px;}
  .top-message .message-midashi .en {position: absolute;font-size: 180px;top: -134px;right: -414px;letter-spacing: 0.06em;color: #e5e5e5;opacity: 0.52;}
  .top-message .message-midashi .jp {font-size: 30px;line-height: 1.25;margin-top: 0;}
  .top-message .message-txt {margin: 64px 0 0 auto;width: 540px;font-size: 18px;font-weight: 500;line-height: 2;}
  .top-message .message-txt span {font-size: 30px;margin-top: -10px;}

  .top-contents {padding-bottom: 153px;border-top: none;}

  .top-service {padding: 120px 0 0;}
  .top-service .service-midashi {font-size: 36px;}
  .top-service .service-txt {font-size: 18px;line-height: 1;letter-spacing: 0.05em;margin-top: 23px;text-align: center;}
  .top-service .service-list {margin-top: 50px;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;align-items: center;}
  .top-service .service-list li {margin: 0 21px;}
  .top-service .service-list li:nth-child(2) {position: relative;top: 125px;}
  .top-service .service-list a:hover img {transform: scale(0.95);}
  .top-service .service-list p {font-size: 24px;margin-top: 22px;padding: 0;}
  .top-service .service-list p img {margin-left: 20px;width: auto;}
  .top-service .service-list li:hover p img {margin-left: 40px;}
  .top-service .more00 {margin-top: 47px;padding: 0 5px 7px;}
  .top-service .more01 {margin-top: 47px;}

  .top-contents-list {margin: 275px auto 0;border-top: none;padding-top: 0;width: 1040px;}
  .top-contents-list li {width: 487px;padding: 120px 0;margin: 0;border-radius: 80px 0 80px 0;}
  .top-contents-list li:last-child {width: 1040px;margin-top: 100px;}
  .top-contents-list .contents-ttl {font-size: 36px;}
  .top-contents-list .more01 {margin: 46px auto 0;}
  .top-contents-list img {transition: all 0.3s ease;border-radius: 80px 0 80px 0;}
  .top-contents-list li:hover img {transform: translate(-50%) scale(0.95);}
  .top-contents-list li:hover .more01 {color: #000;background: url("../images/icon-arrow-black.svg") no-repeat right 20px center;background-color: #fff;opacity: 1;}

}