:root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #f8f8f8;
    --color-gray: #ddd;
    --color-theme: #f5695f;
    --color-theme-darken: #f12617;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
  }


.l-inner {    position: relative;    -webkit-box-sizing: content-box;            box-sizing: content-box;    max-width: 1200px;    margin: 0 auto;    padding: 0 10rem;  }
.l-section {    border-top: 1px solid #eee;  }
.l-section .l-inner {    padding-top: 0;    padding-bottom: 0;  }
  [class*=swiper]:focus {    outline: none;  }
.slide-media,
.thumb-media {    position: relative;    overflow: hidden;  }
.slide-media img,
.thumb-media img {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    -o-object-fit: cover;       object-fit: cover;  }
.swiper-button-prev, .swiper-button-next {    display: grid;    place-content: center;    width: 6.4rem;    height: 6.4rem;    cursor: pointer;    -webkit-transition: var(--transition);    transition: var(--transition);  }
.swiper-button-prev::before, .swiper-button-next::before {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    content: "";    border-radius: 50%;    -webkit-box-shadow: var(--box-shadow);            box-shadow: var(--box-shadow);  }
.swiper-button-prev::after, .swiper-button-next::after {    width: 1.2rem;    height: 1.2rem;    content: "";    border: solid var(--color-gray);    border-width: 3px 3px 0 0;  }
.swiper-button-prev::after {    margin-left: 0.4rem;    -webkit-transform: rotate(-135deg);            transform: rotate(-135deg);  }
.swiper-button-next::after {    margin-right: 0.4rem;    -webkit-transform: rotate(45deg);            transform: rotate(45deg);  }
.swiper-button-disabled {    pointer-events: none;    opacity: 0;  }
.special {    overflow: hidden;  }
.special .swiper {    overflow: visible;  }
.special .swiper-wrapper {    -webkit-transition-timing-function: linear !important;            transition-timing-function: linear !important;  }
.special .swiper-slide {    width: -webkit-max-content;    width: -moz-max-content;    width: max-content;  }
.special .slide {    overflow: hidden;    width: 30vw;    border-radius: 4px;    -webkit-box-shadow: var(--box-shadow);            box-shadow: var(--box-shadow);  }
.special .slide-media {    padding-top: 62.5%;  }
.special .slide-media img {    height: calc(100% + 16px);    -webkit-transform: translateY(-16px);            transform: translateY(-16px);  }
.special .slide-content {    padding: 20px 20px 60px 20px;  }
.slide-date {    font-size: 1.2rem;    line-height: 1;    display: block;    color: var(--color-theme);  }
h2.slide-title {    line-height: 1.6;color:#333;margin-top:20px;position:relative;    display: block;z-index:999;  }



@media only screen and (max-width: 1024px) {
.l-inner {      padding: 0 2rem;    }
  }

@media only screen and (max-width: 599px) {

.pc-tab {
      display: none !important;
    }

.special .slide {width:70vw;}

  }

  @media only screen and (min-width: 1025px) {
.tab-sp {
      display: none !important;
    }
.swiper-button-prev::before, .swiper-button-next::before {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
.swiper-button-prev:hover::before, .swiper-button-next:hover::before {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
.special .slide {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
.special .slide img {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
.special .slide:hover {
      -webkit-transform: translateY(-16px);
              transform: translateY(-16px);
      -webkit-box-shadow: var(--box-shadow-hover);
              box-shadow: var(--box-shadow-hover);
    }
.special .slide:hover img {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
.special .swiper:hover .slide:not(:hover) {
      opacity: 0.3;
    }
  }

  @media only screen and (min-width: 600px) {
.sp {
      display: none !important;
    }
  }