@charset "UTF-8";
.base-btn a {
  display: inline-block; }

a:hover .btn-design::after {
  transform-origin: left top;
  transform: scale(1, 1); }
a .btn-design {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 5px 0 5px 0;
  transition: .5s; }
  a .btn-design.noir {
    border-bottom: 2px solid #000; }
    a .btn-design.noir h6 {
      color: #000; }
    a .btn-design.noir svg #ya {
      fill: #000; }
    a .btn-design.noir::after {
      background: #ECECEC; }
  a .btn-design.blanc {
    border-bottom: 2px solid #fff; }
    a .btn-design.blanc h6, a .btn-design.blanc h5 {
      color: #fff; }
    a .btn-design.blanc svg #ya {
      fill: #fff; }
    a .btn-design.blanc::after {
      background: #222222; }
  a .btn-design.base {
    width: 140px; }
    @media (min-width: 768px) {
      a .btn-design.base {
        width: 180px; } }
    @media (min-width: 1200px) {
      a .btn-design.base {
        width: 220px; } }
  a .btn-design.long {
    width: 240px; }
    @media (min-width: 768px) {
      a .btn-design.long {
        width: 260px; } }
  a .btn-design.Xbtn {
    width: 200px; }
    @media (min-width: 768px) {
      a .btn-design.Xbtn {
        width: 220px; } }
  a .btn-design h6, a .btn-design h5 {
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4em;
    z-index: 10; }
    @media (min-width: 768px) {
      a .btn-design h6, a .btn-design h5 {
        font-size: 1.0em; } }
    @media (min-width: 1200px) {
      a .btn-design h6, a .btn-design h5 {
        font-size: 1.25em; } }
  a .btn-design h5 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.0em; }
    @media (min-width: 1200px) {
      a .btn-design h5 {
        font-size: 1.25em; } }
  a .btn-design svg, a .btn-design img {
    width: 25px;
    z-index: 10; }
  a .btn-design::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s; }

.arrow-type svg {
  width: 25px;
  z-index: 10; }
.arrow-type.blanc svg #ya {
  fill: #fff; }

.card-common {
  /* 前への矢印カスタマイズ */
  /* 次への矢印カスタマイズ */
  /* 前への矢印カスタマイズ */
  /* 次への矢印カスタマイズ */
  /* 前へ次への矢印カスタマイズ */
  /* 前へ次への矢印カスタマイズ */ }
  .card-common .swiper-button-prev.blanc::after {
    background-image: url("../../img/parts/arrow-slide-wh.svg");
    transform: rotate(180deg); }
  .card-common .swiper-button-next.blanc::after {
    background-image: url("../../img/parts/arrow-slide-wh.svg"); }
  .card-common .swiper-button-prev.noir::after {
    background-image: url("../../img/parts/arrow-slide-bl.svg");
    transform: rotate(180deg); }
  .card-common .swiper-button-next.noir::after {
    background-image: url("../../img/parts/arrow-slide-bl.svg"); }
  .card-common .swiper-button-prev, .card-common .swiper-button-next {
    height: 30px;
    width: 30px;
    z-index: 20; }
    @media (min-width: 1200px) {
      .card-common .swiper-button-prev, .card-common .swiper-button-next {
        height: 40px;
        width: 40px; } }
  .card-common .swiper-button-prev::after, .card-common .swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    margin: auto;
    height: 30px;
    width: 30px; }
    @media (min-width: 1200px) {
      .card-common .swiper-button-prev::after, .card-common .swiper-button-next::after {
        height: 40px;
        width: 40px; } }
  .card-common .swiper-button-prev, .card-common .swiper-button-next {
    top: calc(50% - 40px); }

#other-slide {
  padding: 80px 0 20px; }
  @media (min-width: 768px) {
    #other-slide {
      padding: 100px 0 0; } }
  @media (min-width: 1200px) {
    #other-slide {
      padding: 120px 0 0; } }
  #other-slide.pickup {
    padding: 40px 0 20px; }
    @media (min-width: 768px) {
      #other-slide.pickup {
        padding: 100px 0 0; } }
    @media (min-width: 1200px) {
      #other-slide.pickup {
        padding: 120px 0 0; } }
  #other-slide .title-area {
    padding: 0 5%;
    margin-bottom: 20px; }
    @media (min-width: 768px) {
      #other-slide .title-area {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 40px; } }
    @media (min-width: 1200px) {
      #other-slide .title-area {
        margin-bottom: 60px; } }
    #other-slide .title-area .title {
      display: flex;
      align-items: center; }
      #other-slide .title-area .title h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 2em;
        font-weight: 700;
        line-height: 0.8em;
        margin-right: 15px; }
        @media (min-width: 768px) {
          #other-slide .title-area .title h2 {
            font-size: 2.5em; } }
        @media (min-width: 1200px) {
          #other-slide .title-area .title h2 {
            font-size: 3.5em; } }
      #other-slide .title-area .title h3 {
        font-size: 1.0em; }
        @media (min-width: 768px) {
          #other-slide .title-area .title h3 {
            font-size: 1.25em; } }
        @media (min-width: 1200px) {
          #other-slide .title-area .title h3 {
            font-size: 1.5em; } }
    #other-slide .title-area .common-btn {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px; }
  #other-slide .archive-card {
    padding: 50px 0 0 4%;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: -50px; }
    @media (min-width: 768px) {
      #other-slide .archive-card {
        padding: 50px 0 0 5%;
        margin-top: -20px; } }
    @media (min-width: 1200px) {
      #other-slide .archive-card {
        padding: 60px 0 0 5%;
        margin-top: -40px; } }
    #other-slide .archive-card .swiper-slide {
      width: 260px;
      margin: 0 15px 0 0; }
      @media (min-width: 768px) {
        #other-slide .archive-card .swiper-slide {
          width: 300px;
          margin: 0 30px 0 0; } }
      @media (min-width: 1250px) {
        #other-slide .archive-card .swiper-slide {
          width: 340px;
          margin: 0 40px 0 0; } }
      #other-slide .archive-card .swiper-slide.blog {
        width: 200px;
        margin: 0 15px 0 0; }
        @media (min-width: 768px) {
          #other-slide .archive-card .swiper-slide.blog {
            width: 240px;
            margin: 0 30px 0 0; } }
        @media (min-width: 1250px) {
          #other-slide .archive-card .swiper-slide.blog {
            width: 260px;
            margin: 0 40px 0 0; } }
      #other-slide .archive-card .swiper-slide:last-child {
        margin-right: 3%; }
  #other-slide .swiper-button-prev, #other-slide .swiper-button-next {
    top: 30px;
    left: calc(5% + 40px); }
    @media (min-width: 1200px) {
      #other-slide .swiper-button-prev, #other-slide .swiper-button-next {
        left: calc(5% + 50px); } }
  #other-slide .swiper-button-prev {
    left: 5%; }
  #other-slide .work-box a:hover .txt > h3 {
    color: #1e4068; }
  #other-slide .work-box a .txt {
    color: #000; }
  #other-slide .work-box ul li {
    color: #A0A0A0; }

.work-box a:hover .iCatch > img {
  transform: scale(1.04); }
.work-box a:hover .txt > h3 {
  color: #FFECB3; }
.work-box a .iCatch {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  display: block;
  z-index: 1; }
  @media (min-width: 768px) {
    .work-box a .iCatch {
      border-radius: 10px; } }
  .work-box a .iCatch img {
    border-radius: 5px;
    transition: .5s;
    transform: scale(1); }
    @media (min-width: 768px) {
      .work-box a .iCatch img {
        border-radius: 10px; } }
.work-box a .txt {
  margin-top: 10px;
  color: #fff; }
  .work-box a .txt h5 {
    font-size: 0.7em; }
    @media (min-width: 1024px) {
      .work-box a .txt h5 {
        font-size: 0.8em; } }
  .work-box a .txt h3 {
    font-size: 0.9em;
    font-weight: 500;
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
    line-height: 1.4em;
    margin-top: 10px;
    transition: .5s; }
    @media (min-width: 1024px) {
      .work-box a .txt h3 {
        font-size: 1.0em; } }
.work-box ul {
  margin-top: 5px; }
  @media (min-width: 1200px) {
    .work-box ul {
      margin-top: 10px; } }
  .work-box ul li {
    font-size: 0.8em;
    display: inline-block;
    margin: 0 8px 0 0;
    color: #C6C6C6; }

.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  padding: 18px 20px 18px 28px;
  transition: .5S; }
  .video-play-button.color1:before {
    background-color: #D8FF00; }
  .video-play-button::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite; }
  .video-play-button::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 200ms;
    transition: .5s; }
  .video-play-button img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    right: 0;
    z-index: 3;
    width: 15px;
    height: auto;
    margin: auto;
    border-radius: 0; }
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent; }

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1; }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0; } }