@charset "utf-8";
/* ---------------------------------------------------------------------------------------------

　   MV

--------------------------------------------------------------------------------------------- */
#fv,
#mv {
  position: relative;
  z-index: 2;
}
/* slider */
#mv .mv_img {
  position: relative;
  overflow: hidden;
}

.mv_bottom_img {
  text-align: center;
  background: url(../img/bg02.jpg) repeat top left / 100%;
}
.mv_bottom_img img {
  width: 60%;
  max-width: 1300px;
  height: auto;
}

#mv_wrapper {
  padding: 0 10px;
}

.mv_copy_wrap {
  position: absolute;
  color: #fff;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
.mv_copy {
  font-weight: 600;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.mv_copy span {
  background: #000;
  color: #fff;
  display: inline-block;
  padding: 0.2em 0;
  margin: 0 0.3em;
  letter-spacing: 0.2em;
}

/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  writing-mode: vertical-rl;
  bottom: 0;
  z-index: 2;
  color: #fff;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #fff;
  bottom: 0;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
#pickup_bnr {
  background: #eee;
}
.mv_copy_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin-top: -30px;
}
@media only screen and ( max-width : 767px ) {
  #mv .mv_img img {
    width: 100%;
  }
  .mv_copy_wrap {
    top: 10%;
  }
  .mv_copy {
    font-size: 2rem;
  }
  .scroll {
    left: 3rem;
    padding-bottom: 11rem;
    font-size: 1.1rem;
  }
  .scroll::before {
    height: 9.5rem;
  }
  /* pickup_bnr スライダー（スマホのみ） */
  #pickup_bnr {
    position: relative;
    padding: 2rem 0;
  }
  #pickup_bnr .splide {
    width: 100%;
  }
  #pickup_bnr .splide__slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pickup-slide-h, auto);
  }
  #pickup_bnr .splide__slide a {
    display: block;
    width: 100%;
  }
  #pickup_bnr .splide__slide img {
    width: 100%;
    height: var(--pickup-slide-h, auto);
    max-height: var(--pickup-slide-h, none);
    object-fit: contain;
    display: block;
  }
  #pickup_bnr .splide__pagination {
    bottom: 1rem;
  }
  #pickup_bnr .splide__pagination__page {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  #pickup_bnr .splide__pagination__page.is-active {
    background: #fff;
  }
  #pickup_bnr .splide__arrow {
    background: rgba(255, 255, 255, 0.8);
    width: 3rem;
    height: 3rem;
  }
  #pickup_bnr .splide__arrow svg {
    fill: #000;
    width: 1.2rem;
    height: 1.2rem;
  }
  #pickup_bnr .splide__arrow--prev {
    left: 1rem;
  }
  #pickup_bnr .splide__arrow--next {
    right: 1rem;
  }
  .mv_copy_img {
    top: 4%;
    width: 80%;
  }
}
@media print, screen and ( min-width : 768px ) {
  .mv_copy_wrap {
    top: 20%;
  }
  #mv .mv_img img {
    width: 100%;
    /* height: 100vh;
    object-fit: cover;
    object-position: center top; */
  }
  .mv_copy_img {
    top: 11%;
    width: 46%;
  }
  .mv_copy_img img {
    width: 100%;
  }
  
  .mv_copy {
    font-size: 2.6vw;
  }
  .scroll {
    left: 4.69vw;
    padding-bottom: 8.59vw;
    font-size: .86vw;
  }
  .scroll::before {
    height: 7.42vw;
  }
  #pickup_bnr {
    padding: 6rem 0;
    /* position: absolute;
    bottom: 6rem;
    left: 0; */
    width: 100%;
    z-index: 10;
  }
  #pickup_bnr .splide {
    display: block;
    visibility: visible !important;
  }
  #pickup_bnr .splide__track {
    display: block;
    visibility: visible !important;
  }
  #pickup_bnr .splide__list {
    display: flex;
    max-width: 100rem;
    align-items: flex-start;
    margin: 0 auto !important;
    gap: 1rem;
    list-style: none;
    padding: 0;
    visibility: visible !important;
  }
  #pickup_bnr .splide__slide {
    flex: 1 1 0;
    width: auto;
    list-style: none;
    display: flex;
    min-width: 0;
    visibility: visible !important;
  }
  #pickup_bnr .splide__slide a {
    display: block;
    width: 100%;
    height: auto;
  }
  #pickup_bnr .splide__slide img {
    width: 100%;
    height: auto;
    display: block;
  }
  #pickup_bnr .splide__pagination,
  #pickup_bnr .splide__arrows {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------

　   INTRO

--------------------------------------------------------------------------------------------- */
#intro{
  background: #FDFDFD;
}
.intro__img {
  margin: 0 auto;
  max-width: 70rem;
}
@media only screen and ( max-width : 767px ) {
  #intro {
    padding: 2rem 0;
  }
}
@media print, screen and ( min-width : 768px ) {
  #intro {
    padding: 5rem 0;
  }
}


/* ---------------------------------------------------------------------------------------------

　   SERVICES

--------------------------------------------------------------------------------------------- */
#services {
  position: relative;
  z-index: 1;
}
.services_sec .container {
  position: relative;
}
.services_sec__ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 3;
  opacity: 0.5;
}
.services_sec__ttl img {
  width: 100%;
  display: block;
}
.services_sec {
  position: relative;
  z-index: 2;
}
.services_sec .container {
  position: relative;
  z-index: 3;
}
.services_sec__txt {
  position: relative;
}
.services_sec__txt h2 {
  border-bottom: 2px solid rgba(0,0,0,0.2);
  position: relative;
}
.services_sec__txt h2:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40%;
  height: 2px;
  background: #000;
}
.services_sec:nth-child(odd) .services_sec__txt h2 {
  text-align: right;
}
.services_sec:nth-child(odd) .services_sec__txt h2:before {
  left: auto;
  right: 0;
}
.services_sec__txt p {
  font-weight: 500;
  line-height: 1.8em;
  text-align: justify;
}
.services_sec__num {
  position: absolute;
  top: 0;
}
.services_sec:nth-child(odd) .services_sec__num {
  left: auto;
  right: 0;
}
.services_sec .container:before {
  content: "";
  position: absolute;
  z-index: -1;
}
#service01 .container:before {
  background: url(../img/index/ico_service01.png) repeat center / contain;
}
#service02 .container:before {
  background: url(../img/index/ico_service02.png) repeat center / contain;
}
#service03 .container:before {
  background: url(../img/index/ico_service03.png) repeat center / contain;
}
#service04 .container:before {
  background: url(../img/index/ico_service04.png) repeat center / contain;
}
#service05 .container:before {
  background: url(../img/index/ico_service05.png) repeat center / contain;
}
#service06 .container:before {
  background: url(../img/index/ico_service06.png) repeat center / contain;
}
#service07 .container:before {
  background: url(../img/index/ico_service07.png) repeat center / contain;
}

@media only screen and ( max-width : 767px ) {
  #services {
  }
  .services_sec__ttl {
    width: 100%;
  }
  .services_sec:nth-child(even) {
    background: url(../img/bg02.jpg) repeat top left / cover;
  }
  .services_sec {
    padding: 4rem 0;
  }
  #service01 {
    padding-top: 7rem;
  }
  .services_sec .container {
    display: flex;
    flex-direction: column-reverse;
  }
  .services_sec__txt {
    padding-top: 3rem;
  }
  .services_sec__txt h2 {
    font-size: 2.2rem;
    margin-bottom: 3rem;
  }
  .services_sec__num img {
    width: auto;
    height: 10rem;
  }
  .services_sec__num {
    right: 0;
  }
  .services_sec__txt .btn {
    margin-top: 3rem;
  }
  #service01 .container:before {
    width: 27.5rem;
    height: 25.2rem;
    left: 2rem;
    bottom: -2rem;
  }
  
  #service02 .container:before {
    width: 19.4rem;
    height: 21.2rem;
    right: 2rem;
    bottom: -2rem;
  }
  
  #service03 .container:before {
    width: 21.8rem;
    height: 18.6rem;
    left: 2rem;
    bottom: -2rem;
  }
  
  #service04 .container:before {
    width: 23.25rem;
    height: 18.8rem;
    right: 2rem;
    bottom: -2rem;
  }
  
  #service05 .container:before {
    width: 18.9rem;
    height: 22.7rem;
    left: 2rem;
   bottom: -2rem;
  }
  
  #service06 .container:before {
    width: 20.4rem;
    height: 20.55rem;
    right: 2rem;
    bottom: -2rem;
  }
  
  #service07 .container:before {
    width: 27.4rem;
    height: 17.2rem;
    left: 2rem;
    bottom: -2rem;
  }
  .services_sec__txt .sec_bnr_area {
    margin-top: 2rem;
  }
  .services_sec__txt .sec_bnr_area p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
}
@media print, screen and ( min-width : 768px ) {
  #service01 .container:before {
    width: 55rem;
    height: 50.4rem;
    left: -20rem;
    bottom: -10rem;
  }
  #service02 .container:before {
    width: 38.8rem;
    height: 42.4rem;
    right: -10rem;
    bottom: -10rem;
  }
  #service03 .container:before {
    width: 43.6rem;
    height: 37.2rem;
    left: -10rem;
    bottom: -10rem;
  }
  #service04 .container:before {
    width: 46.5rem;
    height: 37.6rem;
    right: -4rem;
    bottom: -10rem;
  }
  #service05 .container:before {
    width: 37.8rem;
    height: 45.4rem;
    left: -4rem;
    bottom: -10rem;
  }
  #service06 .container:before {
    width: 40.8rem;
    height: 41.1rem;
    right: -4rem;
    bottom: -10rem;
  }
  #service07 .container:before {
    width: 54.8rem;
    height: 34.4rem;
    left: -10rem;
    bottom: -8rem;
  }
  #services {
    padding-top: 10rem;
  }
  #services:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120rem;
    background: url(../img/bg02.jpg) repeat top left / 100%;
  }
  #service03:before,
  #service05:before,
  #service07:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    top: 17rem;
    background: url(../img/bg02.jpg) repeat top left / 100%;
  }
  #service03:before {
    height: 94rem;
  }
  #service05:before {
    height: 94rem;
  }
  #service07:before {
    height: 94rem;
  }
  .services_sec__ttl {
    width: 130rem;
    top: -0.5rem;
  }
  .services_sec {
    padding: 10rem 0;
    align-items: center;
  }
  #service01 {
    padding-top: 20rem;
  }
  #service01 .container {
    align-items: flex-end;
  }
  .services_sec:nth-child(odd) .container {
    flex-direction: row-reverse;
  }
  .services_sec__img {
    width: 42%;
  }
  .services_sec__txt {
    width: 58%;
    padding-top: 12rem;
  }
  .services_sec:nth-child(even) .services_sec__txt {
    padding-left: 15rem;
  }
  .services_sec:nth-child(odd) .services_sec__txt {
    padding-right: 15rem;
  }
  .services_sec__txt h2 {
    font-size: 4.6rem;
    margin-bottom: 9rem;
  }
  .services_sec:nth-child(even) .services_sec__txt p {
    padding-right: 15rem;
  }
  .services_sec:nth-child(odd) .services_sec__txt p {
    padding-left: 15rem;
  }
  .services_sec__txt .sec_bnr_area p {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
  .services_sec__txt .sec_bnr_area {
    margin-top: 4rem;
  }
  .services_sec__txt .btn {
    margin-top: 8rem;
  }
  #service01 .services_sec__txt .btn {
    margin-top: 4rem;
  }
  .services_sec:nth-child(odd) .services_sec__txt .btn {
    margin-left: 15rem;
  }
  .services_sec__num img {
    width: auto;
    height: 22rem;
  }
  .services_sec__num {
    left: 15rem;
  }
  .services_sec:nth-child(odd) .services_sec__num {
    left: auto;
    right: 15rem;
  }
}

/* ---------------------------------------------------------------------------------------------

　   COMPANY

--------------------------------------------------------------------------------------------- */
#company {
  position: relative;
  z-index: 3;
}
#company_title {
  background: url(../img/index/company_ph.jpg) repeat top left / cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
@media only screen and ( max-width : 767px ) {
  #company_title {
    height: 30rem;
    padding: 0 2rem;
  }
  #company_title h2 {
    font-size: 2.2rem;
    margin: 3rem 0 0;
  }
  #company_content dl {
    border-top: 1px solid rgba(0,0,0,0.2);
    margin-bottom: 4rem;
  }
  #company_content dl dt {
    font-weight: 600;
    padding: 1rem 0 .5rem;
  }
  #company_content dl dd {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }
  #company_content .btn {
    margin-bottom: 2rem;
  }
  #company_content .btn:last-child {
    margin-bottom: 0;
  }
}
@media print, screen and ( min-width : 768px ) {
  #company_title {
    height: 70rem;
  }
  .company_title__img {
    max-width: 160rem;
    margin: 0 auto;
  }
  #company_title p {
    width: 62rem;
    margin: 0 auto;
  }
  #company_title h2 {
    font-size: 4.6rem;
    margin: 6rem 0 0;
  }
  #company_content dl {
    width: 102rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid rgba(0,0,0,0.2);
    margin-bottom: 10rem;
  }
  #company_content dl dt,
  #company_content dl dd {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding: 3rem 0;
  }
  #company_content dl dt {
    width: 27rem;
    text-align: center;
    font-weight: 600;
  }
  #company_content dl dd {
    width: calc(100% - 27rem);
    padding-left: 6rem;
  }
  #company_content .btn {
    width: 40rem;
    margin-right: 2rem;
  }
  #company_content .btn:last-child {
    margin-right: 0;
  }
}


/* ---------------------------------------------------------------------------------------------

　   XXX

--------------------------------------------------------------------------------------------- */

@media only screen and ( max-width : 767px ) {
}
@media print, screen and ( min-width : 768px ) {
}