@charset "utf-8";

/* ===== top.css ===== */
/* -- header -- */
#top header {
    opacity: 0;
}


/* -- topBg -- */
#topBg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: url(../img/top/top_bg.JPG) no-repeat center;
    background-size: cover;
    z-index: -1000;
    transform: translate(-50%, -50%);
}
.topBg02#topBg {
    background: url(../img/top/top_bg_.JPG) no-repeat center;
    background-size: cover;
}


/* -- topMv --*/
#topMv {
    position: relative;
    min-height: 800px;
    padding-bottom: 91px;
    background: #F6F6F6;
    box-sizing: border-box;
}
.topMv_slider {
    opacity: 0;
}
.topMv_slider :not(.slick-dots) li {
    min-height: 650px;
    height: 100vh;
}
.topMv_slider li > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
}
#topMv .slick-dotted.slick-slider {
    margin-bottom: 0;
}
#topMv .slick-dots {
    bottom: 0;
    display: none;
}
#topMv .slick-dots li button:before {
    color: #fff;
}
#topMv .slick-prev,
#topMv .slick-next {
    left: 20px;
    width: 40px;
    height: 45px;
    z-index: 10;
    opacity: 0;
    z-index: 1000;
    display: none;
}
#topMv.act .slick-prev,
#topMv.act .slick-next {
    opacity: 1;
    transition: opacity 0.4s;
}
#topMv .slick-next {
    right: 20px;
    left: auto;
}
#topMv .slick-prev:before,
#topMv .slick-next:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    left: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: rotate(45deg);
}
#topMv .slick-next:before {
    right: 0;
    left: -4px;
    border: none;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
#topMv_box01 {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 77px 0 111px 145px;
    z-index: 20;
    opacity: 0;
}
#topMv_box01_logo {
    max-width: 355px;
    position: relative;
    z-index: 20;
}
#topMv_box01_mask {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
#topMv svg .svg-elem-1 {
  stroke-dashoffset: 19648.9765625px;
  stroke-dasharray: 39297.953125px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
#topMv svg.active .svg-elem-1 {
  stroke-dashoffset: 39297.953125px;
}
@media screen and ( max-width: 768px ) {
    #topMv {
        padding-bottom: 0;
        min-height: 88vh;
        box-sizing: border-box;
    }
    .topMv_slider li {
        min-height: auto;
        height: calc( 100vh - 186px );
    }
    .topMv_slider :not(.slick-dots) li {
        min-height: 500px;
        height: 88vh;
    }
    #topMv_box01 {
        padding: 0 19px 15px 0;
    }
    #topMv_box01_logo {
        margin: 0 auto;
        max-width: 220px;
    }
    #topMv_box01_mask {
        height: 300px;
    }
    #topMv_box01_mask image {
        width: 7000px;
    }
    #topMv svg .svg-elem-1 {
        stroke-width: 2000;
    }
}


/* -- catchCopy -- */
#catchCopy {
    margin-top: -30px;
    padding-top: 30px;
    position: relative;
    margin-bottom: 569px;
}
#catchCopy:after {
    position: absolute;
    bottom: -108%;
    right: 0;
    left: 0;
    margin: auto;
    height: 115%;
    background: url(../img/top/top_bg02.png) no-repeat top center;
    background-size: 100% auto;
    content: "";
}
#catchCopy .bgGray {
    position: relative;
    margin-top: -5px;
    padding-top: 5px;
    z-index: 10;
}
#catchCopy_img_mask01 {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 41px 0 0 42px;
    width: 100%;
    max-width: 640px;
    height: auto;
    z-index: 20;
}
svg#catchCopy_img_mask01 .svg-elem-1 {
  stroke-dashoffset: 19648.9765625px;
  stroke-dasharray: 19648.9765625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#catchCopy_img_mask01.active .svg-elem-1 {
  stroke-dashoffset: 0;
}
#catchCopy_img_mask02 {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    margin: 0 auto;
    padding: 41px 0 0 42px;
    width: 100%;
    max-width: 640px;
    height: auto;
}
svg#catchCopy_img_mask02 .svg-elem-1 {
  stroke-dashoffset: 3555.060791015625px;
  stroke-dasharray: 3555.060791015625px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#catchCopy_img_mask02.active .svg-elem-1 {
  stroke-dashoffset: 0;
}
@media screen and ( max-width: 768px ) {
    #catchCopy {
        margin-bottom: 270px;
    }
    #catchCopy_img_mask01,
    #catchCopy_img_mask02 {
        padding: 133px 0 76px 12px;
        max-width: 287px;
    }
}


/* -- topAbout -- */
#topAbout {
    margin-top: 197px;
}
.topAbout_bg01 {
    position: relative;
    z-index: 10;
    transform: scale(-1, 1);
    margin-bottom: -10px;
    padding-bottom: 10px;
}
#topAbout .bgGray {
    margin-top: -50px;
    padding-top: 50px;
}
.topAbout_inner {
    position: relative;
    margin: 0 auto;
    max-width: 1018px;
    z-index: 10;
    box-sizing: border-box;
}
.topAbout_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.topAbout_box_tit {
    margin: -125px 1.8% 0 0;
    width: 19.7%;
}
#topAbout_box_tit_mask01 {
    width: 100%;
    height: auto;
}
.topAbout_box_tit svg .svg-elem-1 {
  stroke-dashoffset: 15815.5263671875px;
  stroke-dasharray: 15815.5263671875px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.topAbout_box_tit svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}
.topAbout_box_txtBox {
    margin-top: 14px;
    width: 70%;
}
.topAbout_box_txtBox_txt {
    font-weight: 500;
    font-size: 22px;
    line-height: 2.09;
    letter-spacing: 0.55px;
}
.topAbout_box_txtBox_txt > :not(:last-child) {
    margin-bottom: 46px;
}
/* topAbout_anime */
#topAbout_anime {
    margin: 0 auto;
    max-width: 1600px;
    padding-bottom: 60px;
}
#topAbout_anime > * {
    position: relative;
}
#topAbout_anime img {
    position: relative;
    z-index: 20;
}
#topAbout_anime > * > span {
    position: absolute;
}
#topAbout_anime > * > span span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#topAbout_anime > * > span:before,
#topAbout_anime > * > span:after,
#topAbout_anime > * > span span:before,
#topAbout_anime > * > span span:after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    box-sizing: border-box;
    transition: width 0.4s, height 0.4s;
}
#topAbout_anime > * > span:before {
    width: 0;
    border-top: 8px solid;
}
#topAbout_anime > * > span:after {
    height: 0;
    border-right: 8px solid;
}
#topAbout_anime > * > span span:before {
    right: 0;
    width: 0;
    border-bottom: 8px solid;
}
#topAbout_anime > * > span span:after {
    bottom: 0;
    height: 0;
    border-left: 8px solid;
}
#topAbout_anime > .on > span:before {
    animation: forwards 0.5s ease growWidth;
}
#topAbout_anime > .on > span:after {
    animation: forwards 0.5s ease 0.5s growHeight;
}
#topAbout_anime > .on > span span:before {
    animation: forwards 0.5s ease 1s growWidth;
}
#topAbout_anime > .on > span span:after {
    animation: forwards 0.5s ease 1.5s growHeight;
}
#topAbout_anime svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}
.topAbout_anime_img01 {
    margin: 80px 7.4% 0 auto;
    width: 37.4%;
    z-index: 30;
}
.topAbout_anime_img01 span {
    bottom: -3.2%;
    left: -0.4%;
    width: 61.8%;
    height: 64.2%;
}
.topAbout_anime_img01 span:before,
.topAbout_anime_img01 span:after,
.topAbout_anime_img01 span span:before,
.topAbout_anime_img01 span span:after {
    border-color: #F5FF00!important;
}
.topAbout_anime_img01 svg .svg-elem-1 {
  stroke-dashoffset: 5403.9482421875px;
  stroke-dasharray: 2701.97412109375px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.topAbout_anime_img01 svg.active .svg-elem-1 {
  stroke-dashoffset: 2701.97412109375px;
}
.topAbout_anime_img02 {
    margin: -26.4% auto 0 6.3%;
    width: 56.2%;
    z-index: 20;
}
.topAbout_anime_img02 span {
    bottom: -23.8%;
    left: 29.8%;
    width: 52.3%;
    height: 85.6%;
}
.topAbout_anime_img02 span:before,
.topAbout_anime_img02 span:after,
.topAbout_anime_img02 span span:before,
.topAbout_anime_img02 span span:after {
    border-color: #FFF!important;
}
.topAbout_anime_img02 svg .svg-elem-1 {
  stroke-dashoffset: 8542.283203125px;
  stroke-dasharray: 4271.1416015625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.topAbout_anime_img02 svg.active .svg-elem-1 {
  stroke-dashoffset: 4271.1416015625px;
}
.topAbout_anime_img03 {
    margin: -6.2% 12.8% 0 auto;
    max-width: 521px;
    width: 32.6%;
}
.topAbout_anime_img03 span {
    bottom: -14%;
    right: 2.9%;
    width: 71.1%;
    height: 84%;
    z-index: 10;
}
.topAbout_anime_img03 span:before,
.topAbout_anime_img03 span:after,
.topAbout_anime_img03 span span:before,
.topAbout_anime_img03 span span:after {
    border-color: #EB4D9B!important;
}
.topAbout_anime_img03 svg .svg-elem-1 {
  stroke-dashoffset: 2787.41357421875px;
  stroke-dasharray: 1393.706787109375px;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.topAbout_anime_img03 svg.active .svg-elem-1 {
  stroke-dashoffset: 1393.706787109375px;
}
@media screen and ( max-width: 1440px ) {
    .topAbout_box_tit {
        width: 14.7%;
    }
}
@media screen and ( max-width: 1048px ) {
    .topAbout_inner {
        padding: 0 15px;
    }
}
@media screen and ( max-width: 768px ) {
    #topAbout {
        margin-top: 197px;
    }
    #topAbout .bgGray {
        margin-top: -50px;
        padding-top: 50px;
    }
    .topAbout_box_tit {
        margin: -17px -0.2% 0 0;
        width: 30.5%;
    }
    .topAbout_box_txtBox {
        margin-top: 70px;
        width: 64%;
    }
    .topAbout_box_txtBox_txt {
        font-size: 14px;
        letter-spacing: 0;
    }
    .topAbout_box_txtBox_txt > :not(:last-child) {
        margin-bottom: 31px;
    }
    .topAbout_box_txtBox_txt .btn {
        width: 281px;
    }
    /* topAbout_anime */
    #topAbout_anime {
        padding-bottom: 60px;
    }
    #topAbout_anime span:before,
    #topAbout_anime span:after,
    #topAbout_anime span span:before,
    #topAbout_anime span span:after {
        border-width: 6px;
    }
    .topAbout_anime_img01 {
        margin: 40px 0% 0 auto;
        width: 63.5%;
        z-index: 10;
    }
    .topAbout_anime_img02 {
        margin: -5.5% auto 0 0.3%;
        width: 95.5%;
    }
    .topAbout_anime_img03 {
        margin: 3.9% -0.2% 0 auto;
        width: 55.2%;
        z-index: 30;
    }
}


/* -- topService -- */
#topService {
    position: relative;
    margin-top: -5px;
    padding-top: 356px;
}
#topService:after {
    position: absolute;
    top: 4.3%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 73.8%;
    height: 530px;
    background: url(../img/top/topService_bg.png) no-repeat top center;
    background-size: 100% auto;
    content: "";
    z-index: 10;
}
.topService_inner {
    position: relative;
    margin: 0 auto;
    max-width: 1240px;
    box-sizing: border-box;
    z-index: 20;
}
#topService h2 {
    text-align: center;
}
.topService_box01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 122px auto 0;
}
.topService_box01_tit {
    font-family: 'Shippori Mincho', serif;
    font-size: 66px;
    line-height: 1.52;
    width: 48%;
    margin: -19px 0 0 5.8%;
}
.topService_box01_tit span {
    position: relative;
    left: -25px;
}
.topService_box01_txt {
    font-weight: 500;
    font-size: 18px;
    line-height: 2.55;
    letter-spacing: 0.45px;
    width: 45.5%;
}
/* topService_type */
#topService_type {
    margin-top: 231px ;
}
#topService_type_img_outer {
    margin: 0 auto 187px;
    width: 468px;
    height: 311px;
    position: relative;
    perspective: 1300px;
}
#topService_type_img {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
#topService_type_img li {
    display: block;
    position: absolute;
    width: 473px;
    height: 311px;
    background: #fff;
}
#topService_type_img li:nth-child(1) {
    transform: rotateY(0deg) translateZ(544px);
}
#topService_type_img li:nth-child(2) {
    transform: rotateY(60deg) translateZ(544px);
}
#topService_type_img li:nth-child(3) {
    transform: rotateY(120deg) translateZ(544px);
}
#topService_type_img li:nth-child(4) {
    transform: rotateY(180deg) translateZ(544px);
}
#topService_type_img li:nth-child(5) {
    transform: rotateY(240deg) translateZ(544px);
} 
#topService_type_img li:nth-child(6) {
    transform: rotateY(300deg) translateZ(544px);
}
.topService_type_img_inner {
    position: relative;
}
.topService_type_img_img {
    background: #464646;
}
.topService_type_img_img img {
    opacity: 0.7;
}
.topService_type_img_txt {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.72;
    color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin-top: -35px;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.act .topService_type_img_txt {
    opacity: 1;
}
.topService_type_img_subTxt {
    text-align: center;
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.18;
    letter-spacing: 2.13px;
    color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin-top: 17px;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.act .topService_type_img_subTxt {
    opacity: 1;
}
#topService_type_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 70px auto 0;
}
#topService_type_btn a {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.4px;
    display: block;
    position: relative;
    padding: 0 33px;
}
#topService_type_btn :not(:last-child) a:after {
    position: absolute;
    top: 1px;
    bottom: 2px;
    right: 0;
    margin: auto;
    width: 1px;
    background: #D8D8D8;
    content: "";
}
.topService_type_btn_num {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #E4358B;
    margin-bottom: -1px;
}
/* topService_box02 */
.topService_box02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 155px auto 0;
}
.topService_box02_tit {
    font-family: 'Shippori Mincho', serif;
    font-size: 40px;
    line-height: 1.6;
    width: 49%;
    margin: -1px 0 0 4.1%;
}
.topService_box02_txt {
    font-weight: 500;
    font-size: 18px;
    line-height: 2.55;
    letter-spacing: 0.45px;
    width: 41%;
}
/* topService_space */
.topService_space_outer {
    position: relative;
    margin: 36px 0 173px;
    padding-top: 183px;
}
.topService_space_outer > * {
    position: relative;
    z-index: 20;
}
.topService_space_outer:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 100%;
    background: url(../img/top/topService_space_bg.png) no-repeat top center;
    background-size: 100% auto;
    content: "";
    z-index: 10;
}
#topService_space li:nth-child(2n+1) {
    margin-top: 70px;
}
.topService_space_item a {
    display: block;
    position: relative;
    -webkit-mask-image:url(../img/top/topService_type_img_mask.png);
    mask-image:url(../img/top/topService_type_img_mask.png);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}
.topService_space_item a:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    content: "";
}
.topService_space_item a > * {
    z-index: 20;
}
.topService_space_num {
    text-align: center;
    font-family: 'League Spartan', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #FFF;
    position: absolute;
    right: 0;
    left: 0;
    top: 15px;
}
.topService_space_txt {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 1.2px;
    color: #FFF;
    text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    margin-top: 4px;
    transform: translateY(-50%);
}
.topService_space_subTxt {
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    margin: -10% auto 0;
    transform: translateY(-50%);
}
.topService_space_subTxt img {
    margin: 0 auto;
    width: auto;
    height: 90px;
}
@media screen and ( max-width: 1304px ) {
    .topService_inner {
        padding: 0 32px;
    }
    .topService_box01 {
        display: block;
    }
    .topService_box01_tit {
        margin: -19px auto 30px;
        padding-right: 80px;
        width: 100%;
        max-width: 600px;
    }
    .topService_box01_txt {
        margin: 0 auto;
        width: 100%;
        max-width: 600px;
    }
    #topService_type_btn li {
        margin-bottom: 10px;
        width: 31%;
        box-sizing: border-box;
    }
    #topService_type_btn :nth-child(3n) a:after {
        display: none;
    }
}
@media screen and ( max-width: 768px ) {
    #topService {
        padding-top: 77px;
    }
    #topService:after {
        top: -2%;
        right: -41%;
        left: auto;
        width: 138%;
    }
    .topService_box01 {
        margin: 29px auto 0;
    }
    .topService_box01_tit {
        font-size: 40px;
        line-height: 1.5;
        margin: 0 -7% 13px;
        padding-right: 0;
        width: 100vw;
    }
    .topService_box01_tit span {
        left: 1px;
    }
    .topService_box01_txt {
        font-size: 14px;
        line-height: 2.14;
        letter-spacing: 0;
        width: 100%;
    }
    /* topService_type */
    #topService_type {
        margin-top: 150px;
    }
    #topService_type_img_outer {
      margin: 0 auto 83px;
      width: 193px;
      height: 128px;
      perspective: 521px;
    }
    #topService_type_img li {
      width: 193px;
      height: 128px;
    }
    #topService_type_img li:nth-child(1) {
      transform: rotateY(0deg) translateZ(215px);
    }
    #topService_type_img li:nth-child(2) {
      transform: rotateY(60deg) translateZ(215px);
    }
    #topService_type_img li:nth-child(3) {
      transform: rotateY(120deg) translateZ(215px);
    }
    #topService_type_img li:nth-child(4) {
      transform: rotateY(180deg) translateZ(215px);
    }
    #topService_type_img li:nth-child(5) {
      transform: rotateY(240deg) translateZ(215px);
    }
    #topService_type_img li:nth-child(6) {
      transform: rotateY(300deg) translateZ(215px);
    }
    #topService_type_img li:nth-child(5) .topService_type_img_subTxt {
        margin-top: 12px;
    }
    #topService_type_img li:nth-child(5) .topService_type_img_txt {
        margin-top: -25px;
    }
    .topService_type_img_txt {
        font-size: 10px;
        margin-top: -17px;
        width: 100%;
    }
    .topService_type_img_subTxt {
        font-size: 24px;
        margin-top: 6px;
    }
    #topService_type_btn {
        margin: 70px -33px 0;
    }
    #topService_type_btn a {
        text-align: left;
        font-size: 12px;
        line-height: 1.4;
        letter-spacing: 0.3px;
        padding: 0 13px;
        height: 100%;
    }
    #topService_type_btn :not(:last-child) a:after {
        top: -2px;
        bottom: 4px;
    }
    .topService_type_btn_num {
        font-weight: 400;
        font-size: 10px;
        margin: 3px 0 2px;
    }
    /* topService_box02 */
    .topService_box02 {
        display: block;
        margin: 155px auto 0;
    }
    .topService_box02_tit {
        font-size: 24px;
        line-height: 1.6;
        letter-spacing: -0.05em;
        width: 110%;
        margin: 0 -4% 27px;
    }
    .topService_box02_txt {
        font-size: 14px;
        line-height: 2.1;
        letter-spacing: 0;
        width: 100%;
        margin-left: 1%;
    }
    /* topService_space */
    .topService_space_outer {
        overflow-x: auto;
        position: relative;
        margin: 43px 15px 0;
        padding-top: 0;
    }
    .topService_space_outer:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        height: 100%;
    }
    #topService_space .splide__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #topService_space li {
        margin: 0 0 13px;
        width: 48%;
    }
    #topService_space li:nth-child(2n+1) {
        margin-top: 0;
    }
    #topService_space a {
        display: block;
        position: relative;
    }
    .topService_space_num {
        font-size: 10px;
        top: 4px;
    }
    .topService_space_txt {
        font-size: 14px;
        margin-top: 3px;
    }
    .topService_space_img {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 100%;
        z-index: 10!important;
    }
    .topService_space_img img {
        position: absolute;
        top: 0;
        left: 0;
    }
    .topService_space_subTxt img {
        height: 48px;
    }
    .topService_inner .btn {
        margin-top: 49px;
    }
}


/* -- topWorks -- */
#topWorks {
    position: relative;
    margin-top: -5px;
    padding: 99px 0 210px;
    background: #F6F6F6;
}
#topWorks > * {
    position: relative;
}
#topWorks:before {
    position: absolute;
    top: 58px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: url(../img/top/top_bg02.png) no-repeat top center;
    background-size: 100% auto;
    content: "";
    z-index: 20;
}
.topWorks_h2 {
    background: url(../img/top/topWorks_h2_bg.webp) no-repeat center;
    background-size: cover;
    z-index: 10;
}
.topWorks_h2:after {
    position: absolute;
    bottom: -170px;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 418px;
    background: url(../img/top/top_bg01.png) no-repeat top center;
    background-size: 100% auto;
    z-index: 20;
    content: "";
}
.topWorks_h2_inner {
    color: #fff;
    margin: 0 auto;
    padding: 403px 0 378px;
    max-width: 1165px;
    box-sizing: border-box;
}
.topWorks_inner {
    margin: 0 auto;
    max-width: 1320px;
    box-sizing: border-box;
    z-index: 20;
}
.topWorks_case {
    margin-top: 70px;
}
.topWorks_case > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.topWorks_case > :nth-child(2n) {
    flex-direction: row-reverse;
}
.topWorks_case > :not(:last-child) {
    margin-bottom: 168px;
}
.topWorks_case > :after {
    position: absolute;
    top: -4.2%;
    right: 0;
    width: 48.4%;
    height: 114%;
    background: url(../img/top/topWorks_case_txtBox_bg.png) no-repeat 0 0;
    background-size: 100% auto;
    content: "";
}
.topWorks_case > :nth-child(2n):after {
    top: -5.9%;
    right: auto;
    left: 0.8%;
}
.topWorks_case_img_outer {
    position: relative;
    margin-left: 3.8%;
    width: 45.5%;
    z-index: 10;
}
.topWorks_case_img {
    position: relative;
    padding-top: 93.2%;
}
.topWorks_case_img li {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 20;
}
.topWorks_case_img li.on {
    animation: forwards 0.6s ease card01;
}
.topWorks_case_img li.act {
    z-index: 100;
}
.topWorks_case_img li.next {
    z-index: 90;
}
.topWorks_case_img img {
    -webkit-mask-image:url(../img/top/topWorks_case_img_mask.png);
            mask-image:url(../img/top/topWorks_case_img_mask.png);
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    transform-origin: center;
}
.topWorks_case_img li.act img {
    transform: rotate(-10deg);
    transition: transform 0.4s;
}
.topWorks_case_img li.on img {
    animation: forwards 0.6s ease card02;
}
.topWorks_case > :nth-child(2n) .topWorks_case_img_outer {
    margin: 0 2.8% 0 0;
    width: 45.5%;
}
.topWorks_case_txtBox {
    position: relative;
    margin: 0 auto;
    padding-top: 61px;
    width: 48.3%;
    max-width: 527px;
    z-index: 20;
}
.topWorks_case > :nth-child(2n) .topWorks_case_txtBox {
    margin-right: -2%;
    padding-top: 53px;
}
.topWorks_case_txtBox_num img {
    width: auto;
    height: 104px;
}
.topWorks_case_txtBox_txt {
    font-weight: 500;
    letter-spacing: 0.45px;
    margin: 23px 0 0 49px;
    max-width: 380px;
}
.topWorks_case_txtBox_category {
    font-weight: bold;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    margin: 14px 0 0 50px;
}
.topWorks_case_txtBox_category_tit {
    color: #606060;
}
.topWorks_case_txtBox_category_tit:after {
    display: inline-block;
    position: relative;
    top: 1px;
    margin: 0 8px 0 10px;
    width: 1px;
    height: 14px;
    background: #D3D3D3;
    content: "";
}
.topWorks_case_txtBox_category_txt {
    color: #838383;
}
.topWorks_case_txtBox_tag {
    font-size: 16px;
    letter-spacing: -1.6px;
    margin: 2px 0 0 50px;
}
.topWorks_inner .btn {
    margin-right: 91px;
}
@media screen and ( max-width: 1201px ) {
    .topWorks_h2_inner {
        padding: 403px 18px 378px;
    }
}
@media screen and ( max-width: 1350px ) {
    .topWorks_inner {
        padding: 0 15px;
    }
}
@media screen and ( max-width: 960px ) {
    .topWorks_h2:after {
        height: 368px;
    }
}
@media screen and ( max-width: 768px ) {
    #topWorks {
        padding: 127px 0 68px;
    }
    #topWorks:before {
        top: 109px;
    }
    .topWorks_h2 {
        background: url(../img/top/topWorks_h2_bg_sp.png) no-repeat center;
        background-size: cover;
    }
    .topWorks_h2:after {
        bottom: -328px;
        height: 418px;
    }
    .topWorks_h2_inner {
        padding: 117px 18px 130px;
    }
    .topWorks_case {
        margin-top: 20px;
    }
    .topWorks_case > * {
        display: block;
    }
    .topWorks_case > :not(:last-child) {
        margin-bottom: 85px;
    }
    .topWorks_case > :after,
    .topWorks_case > :nth-child(2n):after {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 99%;
        height: 114%;
        background: url(../img/top/topWorks_case_txtBox_bg.png) no-repeat bottom center;
        background-size: 100% auto;
        content: "";
    }
    .topWorks_case_img_outer,
    .topWorks_case > :nth-child(2n) .topWorks_case_img_outer {
        margin: 0 auto;
        width: 87.2%;
    }
    .topWorks_case_txtBox,
    .topWorks_case > :nth-child(2n) .topWorks_case_txtBox {
        margin-right: 0;
        padding: 88px 0 45px;
        width: 100%;
    }
    .topWorks_case_txtBox_num img {
        height: 70px;
    }
    .topWorks_case_txtBox_txt {
        font-size: 14px;
        line-height: 2.14;
        letter-spacing: 0;
        margin: 14px 35px 0;
    }
    .topWorks_case_txtBox_category {
        font-size: 12px;
        margin: 12px 36px 0;
    }
    .topWorks_case_txtBox_category_tit:after {
        top: 0;
        margin: 0 6px 0 7px;
        height: 11px;
    }
    .topWorks_case_txtBox_category_txt {
        color: #838383;
    }
    .topWorks_case_txtBox_tag {
        font-size: 13px;
        letter-spacing: -1.4px;
        margin: -1px 0 0 36px;
    }
    .topWorks_inner .btn {
        margin: 61px auto 0;
        max-width: 281px;
    }
}


/* -- topArtist -- */
#topArtist {
    margin-top: -5px;
    padding: 214px 0 135px;
    background: #F6F6F6 url(../img/top/top_bg01.png) no-repeat top center;
    background-size: 100% auto;
}
.topArtist_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.topArtist_inner h2 {
    margin-left: 13.3%;
    width: 28%;
}
.topArtist_box {
    position: relative;
    margin-top: 40px;
    width: 57.4%;
    z-index: 20;
}
.topArtist_box_slider {
    width: 120.8%;
    overflow-x: scroll;
    display: flex;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.topArtist_box_slider::-webkit-scrollbar {  
  display: none;
}
.topArtist_box li {
    position: relative;
    margin-right: 20px;
    -webkit-mask-image:url(../img/top/topArtist_box_mask.png);
    mask-image:url(../img/top/topArtist_box_mask.png);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}
.topArtist_box a {
    display: block;
    padding-top: 125.7%;
    width: 100%;
}
.topArtist_box a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--unnamed-color-000000) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) 0% 0% no-repeat padding-box;
    content: "";
    z-index: 10;
    opacity: 0.52;
}
.topArtist_box img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
}
.topArtist_box span {
    position: absolute;
    left: 29px;
    bottom: 16px;
    font-family: 'League Spartan', sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.1em;
    color: #FFF;
    z-index: 20;
}
.topArtist_inner .btn {
    margin: -187px auto 0 13.3%;
    width: 28%;
    position: relative;
    z-index: 10;
}
@media screen and ( max-width: 1100px ) {
    #topArtist {
        padding: 104px 0 98px;
    }
    .topArtist_inner {
        display: block;
    }
    .topArtist_inner h2 {
        margin-left: 0;
        padding: 0 17px 0;
        width: 100%;
        box-sizing: border-box;
    }
    .topArtist_box {
        margin-top: 35px;
        width: 100%;
    }
    .topArtist_box_slider {
        width: 175%;
        overflow-x: auto;
    }
    .topArtist_box li {
        margin-right: 10px;
    }
    .topArtist_box span {
        bottom: 8px;
    }
    .topArtist_inner .btn {
        margin: 67px auto 0 ;
        width: auto;
    }
}


/* -- topNews -- */
#topNews {
    position: relative;
    margin-top: -5px;
    padding: 303px 0 85px;
    background: #F6F6F6;
}
#topNews:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 100%;
    background: url(../img/top/topService_space_bg.png) no-repeat top center;
    background-size: 100% auto;
    content: "";
    z-index: 10;
    transform: scale(-1,1);
}
.topNews_inner {
    position: relative;
    margin: 0 auto;
    max-width: 1180px;
    z-index: 20;
    box-sizing: border-box;
}
.topNews_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.topNews_box_news {
    width: 40.7%;
}
.topNews_box_news > div > div:not(:last-child) {
    margin-bottom: 29px;
    border-bottom: 1px solid #888;
}
.topNews_box_news a {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.75px;
    display: block;
    padding-bottom: 14px;
}
.topNews_box_news_day {
    font-family: 'League Spartan', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: #888;
    margin-bottom: 13px;
}
.topNews_box_pickUp {
    width: 50.8%;
}
.topNews_box_pickUp_slider {
    margin-top: 0;
}
.topNews_box_pickUp_slider > div {
    width: 100%;
}
.topNews_box_pickUp_slider ul {
    display: flex!important;
    flex-wrap: wrap;
    justify-content: space-between;
}
.topNews_box_pickUp_slider li {
    margin-bottom: 34px;
    width: 46.8%;
}
.topNews_box_pickUp_day span:before {
    display: inline-block;
    position: relative;
    top: -4px;
    margin: 0 11px 0 9px;
    height: 1px;
    width: 10px;
    background: #BFBFBF;
    content: "";
}
.topNews_inner .btn {
    margin-top: 39px;
}
@media screen and ( max-width: 1180px ) {
    .topNews_inner {
        padding: 0 18px;
    }
}
@media screen and ( max-width: 768px ) {
    #topNews {
        padding: 118px 0 76px;
    }
    #topNews:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        height: 100%;
        background: url(../img/top/topService_space_bg.png) no-repeat top center;
        background-size: 100% auto;
        content: "";
        z-index: 10;
        transform: scale(-1,1);
    }
    .topNews_box {
        display: block;
    }
    .topNews_box_news {
        margin-bottom: 58px;
        width: 100%;
    }
    .topNews_box_news a {
        font-size: 14px;
        letter-spacing: 0.075px;
        display: block;
        padding-bottom: 17px;
    }
    .topNews_box_news_day {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .topNews_box_pickUp {
        width: 100%;
    }
    .topNews_box_pickUp_slider {
        margin: 0 0 0 -18px;
        width: 100vw;
    }
    .topNews_box_pickUp_slider > div {
        margin: 0 0 0 -66%;
        width: 232.1%!important;
    }
    .topNews_box_pickUp_slider ul {
        flex-wrap: nowrap;
    }
    .topNews_box_pickUp_slider li {
        margin-bottom: 34px;
        width: 46.8%;
    }
    .topNews_box_pickUp_img {
        padding-top: 89%;
    }
    .topNews_inner .btn {
        margin: 71px auto 0;
    }
}


/* -- topContact -- */
#topContact {
    padding: 0 0 104px;
}
.topContact_h2:after {
    position: absolute;
    bottom: -263px;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 418px;
    background: url(../img/top/top_bg01.png) no-repeat top center;
    background-size: 100% auto;
    z-index: 20;
    content: "";
    transform: scale(-1, 1);
}
.topContact_h2_inner {
    padding-top: 179px;
    padding-bottom: 179px;
}
.topContact_inner {
    margin: 0 auto;
    padding: 274px 0 0;
    max-width: 1183px;
    box-sizing: border-box;
    z-index: 20;
}
.topContact_inner h3 {
    font-size: 32px;
    letter-spacing: 0.25em;
    margin-top: 0;
}
.topContact_instagram {
    margin-top: 41px;
    z-index: 20;
}
#topContact_instagram_slider {
    line-height: 1;
    overflow: hidden;
    width: 100vw;
}
.topContact_instagram_btn {
    margin-top: 39px;
}
.topContact_instagram_btn_tit {
    margin: 0 auto;
    width: 124px;
}
.topContact_instagram_btn_icon {
    margin: 0 auto;
    width: 30px;
}
@media screen and ( max-width: 980px ) {
    #topContact {
        margin-top: 0;
        padding: 0 0 90px;
    }
    .topContact_h2:after {
        bottom: -385px;
    }
    .topContact_inner {
        padding: 106px 0 0;
    }
    .topContact_inner h3 {
        font-size: 25px;
    }
    .topContact_instagram {
        margin-top: 22px;
    }
    .topContact_instagram_slider_inner {
        width: 192vw;
    }
    .topContact_instagram_btn {
        margin-top: 31px;
    }
    .topContact_instagram_btn_tit {
        width: 145px;
    }
    .topContact_instagram_btn_icon {
        margin: -7px auto 0;
    }
}


/*
    css アニメーション
*/
/* 横幅が100%に変化 */
@keyframes growWidth {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
/* 縦幅が100%に変化 */
@keyframes growHeight {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

/* カードエフェクト */
@keyframes card01 {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-40%, -60%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}
@keyframes card02 {
    0% {
        opacity: 1;
        transform: rotate(-10deg);
    }
    100% {
        opacity: 0;
        transform: rotate(0);
    }
}