@charset "UTF-8";
/* ==========================================================================
  Reset
  ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600&display=swap");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline; }

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block; }

ul, ol {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none; }

img {
  font-size: 0;
  line-height: 0; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  font-weight: bold;
  font-style: italic;
  color: #000; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

table {
  border-spacing: 0;
  border-collapse: collapse; }

fieldset, img {
  line-height: 0;
  vertical-align: top; }

hr {
  display: none; }

input, select {
  vertical-align: middle; }

html {
  overflow-y: scroll;
  *zoom: 1;
  /* firefox */ }

* {
  margin: 0;
  padding: 0; }

img {
  vertical-align: bottom; }

html, body {
  width: 100%;
  height: 100%; }

ul, li {
  list-style: none; }

b {
  font-weight: bold; }

iframe {
  border: none;
  outline: none; }

/* ==========================================================================
  Base
  ========================================================================== */
* {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  color: #000;
  font-size: 1.0em;
  font-family: "Oswald", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  line-height: 1;
  letter-spacing: .02em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #fff; }
  @media screen and (min-width: 768px) {
    body {
      font-size: 1.4em;
      min-width: 1080px; } }

img {
  width: 100%;
  height: auto; }

.pc {
  display: none; }
  @media screen and (min-width: 768px) {
    .pc {
      display: block; } }

.sp {
  display: block; }
  @media screen and (min-width: 768px) {
    .sp {
      display: none; } }

a {
  color: #c1071d;
  text-decoration: none; }
  @media screen and (min-width: 768px) {
    a:hover {
      text-decoration: none; }
      a:hover img {
        opacity: .7; }
    a:hover, a img {
      transition: .2s linear; } }
  @media screen and (min-width: 768px) {
    a:hover {
      color: #999; } }

a.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 9px 12px;
  background: #c1071d;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold; }
  a.btn span {
    font-weight: bold; }

@media screen and (min-width: 768px) {
  a.btn-detail:hover {
    background: #c1071d; }
    a.btn-detail:hover span {
      color: #000; }
  a.btn-detail::before, a.btn-detail::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
  a.btn-detail::before {
    z-index: 1;
    background: #000;
    transform: translateX(-200%);
    transition: transform 0.45s ease-out; }
  a.btn-detail:hover::before {
    transform: translateX(101%); }
  a.btn-detail::after {
    z-index: 2;
    background: #fff;
    transform: translateX(-101%);
    transition: transform 0.35s ease-out; }
  a.btn-detail:hover::after {
    transform: translateX(101%); } }

h1, h2, h3, h4, h5, h6, strong {
  font-weight: bold; }

/* ==========================================================================
  LOADING
  ========================================================================== */
/* Loading Block */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999; }

.spinner {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1s infinite ease-in-out; }

/* Loading Animation */
@keyframes sk-scaleout {
  0% {
    transform: scale(0); }
  20% {
    transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 0; } }

/* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden; }

/* ==========================================================================
  Navigation SP
  ========================================================================== */
/*開閉ボタン*/
@media screen and (max-width: 767px) {
  .nav-trigger {
    position: fixed;
    z-index: 10001;
    width: 40px;
    height: 40px;
    top: 8px;
    left: 8px;
    z-index: 1001;
    border-radius: 4px;
    padding: 8px;
    transition: 0.5s ease-out; }
    .nav-trigger div {
      position: relative; }
      .nav-trigger div span {
        display: block;
        width: 100%;
        height: 1px;
        background: #000;
        position: absolute;
        left: 0;
        transition: 0.5s ease-out; }
  .nav-trigger.active {
    background: #fff; }
  .nav-trigger span:nth-of-type(1) {
    top: 3px; }
  .nav-trigger span:nth-of-type(2) {
    top: 11px;
    width: 75%; }
  .nav-trigger span:nth-of-type(3) {
    top: 19px;
    width: 55%; }
  .nav-trigger.active span {
    background: #000; }
    .nav-trigger.active span:nth-of-type(1), .nav-trigger.active span:nth-of-type(3) {
      width: 10px; }
    .nav-trigger.active span:nth-of-type(2) {
      width: 100%; }
    .nav-trigger.active span:nth-of-type(1) {
      transform: translate(-1px, 4px) rotate(-45deg); }
    .nav-trigger.active span:nth-of-type(3) {
      transform: translate(-1px, -4px) rotate(45deg); } }

@media screen and (max-width: 767px) {
  .nav-wrap {
    position: fixed;
    overflow: hidden;
    left: -100%;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: #000;
    transition: 0.25s ease-out;
    padding: 66px 0 8px;
    overflow-y: auto; }
  .nav-wrap.active {
    left: 0;
    width: 100%;
    height: 100%; }
  .nav-list > ul li {
    font-size: 2.8rem;
    font-weight: bold;
    color: #fff;
    /*
      &.design {
        a {
          cursor: default;
        }
      }
*/ }
  .nav-list > ul a {
    overflow: hidden;
    position: relative;
    display: block;
    padding: 10px 10px 0;
    margin-bottom: 20px;
    opacity: 0;
    color: #fff;
    line-height: 0.9;
    transition: 0.5s ease-out; }
    .nav-list > ul a span.nav-text {
      position: relative;
      z-index: 1;
      display: inline-block;
      font-size: 1.6rem; }
  .nav-wrap.active .nav-list ul a {
    opacity: 1; } }

/*
.nav-wrap {
  h3 {
    color: #fff;
    padding: 10px 10px 0;
    margin-bottom: 15px;
    font-size: 2.4rem;
  }
  .cat-list {
    position: relative;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        margin-bottom: 15px;
        a {
          display: block;
          position: relative;
          font-size: 1.2rem;
          color: #fff;
          padding: 0 10px 0 20px;
          &::after {
            content: "";
            position: absolute;
            display: block;
            width: 6px;
            height: 1px;
            top: auto;
            bottom: 2px;
            right: auto;
            left: 10px;
            margin: auto auto 0 0;
            background: #fff;
          }
        }
      }
    }
  }
  .tag-list {
    position: relative;
    padding-bottom: 26px;
    margin-bottom: 15px;
    @include media(pc) {
      padding-bottom: 37px;
      margin-bottom: 30px;
    }
    .btn-more {
      position: absolute;
      margin: 0;
      left: 10px;
      bottom: 0;
      a {
        display: block;
        position: relative;
        background: transparent;
        padding: 2px 6px 6px;
        border-radius: 3px;
        border: 1px solid #fff;
        line-height: 1;
        &::before {
          content: "MORE TAGS";
          font-size: 1.0rem;
          line-height: 1;
          color: #fff;
        }
      }
    }
    ul {
      position: relative;
      padding: 0 10px;
      max-height: 96px;
      overflow: hidden;
      transition: max-height 0.25s;
      li {
        display: inline-block;
        margin-bottom: 10px;
        a {
          display: block;
          position: relative;
          height: 22px;
          font-size: 1.0rem;
          line-height: 1;
          color: #000;
          padding: 6px 9px 5px;
          border-radius: 11px;
          background: #eee;
          &:hover {
            background: #bbb;
          }
        }
      }
      
    }
  }
  .tag-list.is-active {
    .btn-more {
      a {
        &::before {
          content: "CLOSE";
        }
      }
    }
    ul {
      max-height: 100vh;
    }   
  }
}
*/
/* ----------------
----------------
Pagenation
----------------
---------------- */
.pagenation {
  margin: 5% auto 0;
  width: 100%;
  text-align: center; }

.pagenation ul {
  display: flex;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
  margin: 0 auto; }

.pagenation ul li {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  width: 30px !important;
  height: 30px !important;
  text-align: center !important;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  color: #fff;
  border: 1px solid;
  margin: 0 10px; }

.pagenation ul li.next,
.pagenation ul li.prev {
  width: 50px !important; }

.pagenation ul li a {
  display: block;
  text-decoration: none; }

.pagenation ul li a:hover {
  color: #fff; }

.pagenation ul li.active {
  color: #fff; }

@media screen and (min-width: 768px) {
  .pagenation {
    margin: 30px auto 60px;
    width: 100%;
    max-width: 720px; }
  .pagenation ul li {
    display: block;
    border-radius: 3px;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px;
    line-height: 34px;
    margin: 0 10px; }
  .pagenation ul li.next,
  .pagenation ul li.prev {
    width: 60px !important; } }

/* ==========================================================================
  Layout
	========================================================================== */
.l-flex {
  display: flex;
  flex-wrap: wrap; }
  .l-flex-aligncenter {
    align-items: center; }
  .l-flex-justcenter {
    justify-content: center; }
  .l-flex-justbetween {
    justify-content: space-between; }

.l-main {
  padding-top: 90px;
  background: #e5e5e5; }

.l-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .l-wrapper {
      min-width: 1080px; } }

section {
  position: relative; }

.l-inner {
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px; }

@media screen and (max-width: 767px) {
  .l-main {
    padding-top: 60px; }
  .l-wrapper {
    width: 100%; }
  .l-inner {
    padding: 0 20px;
    max-width: 960px; } }

/* ==========================================================================
  Header / Footer
  ========================================================================== */
.l-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 90px;
  background: #fff;
  z-index: 999; }
  .l-header .logo {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 165px;
    height: 49px; }
    .l-header .logo a {
      display: block; }
  .l-header .gnav .gnav-list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    height: 90px;
    padding-right: 30px; }
    .l-header .gnav .gnav-list li {
      font-weight: bold;
      font-size: 2.8rem;
      letter-spacing: -.02em;
      line-height: 90px; }
      .l-header .gnav .gnav-list li a {
        display: block;
        position: relative;
        overflow: hidden;
        padding: 0 15px;
        color: #000; }
        @media screen and (min-width: 768px) {
          .l-header .gnav .gnav-list li a:hover {
            color: #fff !important; }
          .l-header .gnav .gnav-list li a::before {
            content: '';
            position: absolute;
            display: block;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            transform: translateX(-101%);
            background: #c1071d;
            transition: all 0.25s ease-out; }
          .l-header .gnav .gnav-list li a:hover::before {
            transform: translateX(0); } }

@media screen and (max-width: 767px) {
  .l-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    z-index: 999; }
    .l-header .logo {
      position: absolute;
      left: 0;
      right: 0;
      top: 15px;
      margin: 0 auto 0;
      width: 110px;
      height: 32.66667px; }
    .l-header .gnav {
      display: none; } }

.l-footer {
  background: #000;
  position: relative;
  margin: 0 auto;
  padding: 60px 0;
  color: #fff;
  /*
	.sns {
  	width: 30%;
  	.sns-list {
    	display: flex;
    	justify-content: flex-start;
    	li {
      	margin-left: 30px;
      	a {
        	color: #fff;
        	font-size: 2.4rem;
        	font-weight: bold;
      	}
    	}
  	}
	}
*/ }
  .l-footer .l-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .l-footer .foot-logo {
    width: 20%; }
    .l-footer .foot-logo a {
      display: block;
      width: 132px;
      height: 39.2px; }
  .l-footer .fnav {
    width: 50%; }
    .l-footer .fnav .fnav-list {
      display: flex;
      justify-content: flex-end; }
      .l-footer .fnav .fnav-list li {
        margin-left: 30px; }
        .l-footer .fnav .fnav-list li a {
          color: #fff;
          font-size: 2.4rem;
          font-weight: bold; }
  .l-footer .copy {
    margin-top: 15px;
    width: 100%;
    text-align: left;
    color: #fff;
    font-size: 1.2rem; }
    .l-footer .copy sup {
      display: inline-block;
      vertical-align: super;
      font-size: smaller; }

@media screen and (max-width: 767px) {
  .l-footer {
    padding: 45px 0; }
    .l-footer .l-inner {
      display: block; }
    .l-footer .foot-logo {
      width: 94.28571px;
      margin: 0 auto 20px; }
      .l-footer .foot-logo a {
        width: 94.28571px;
        height: 28px; }
    .l-footer .fnav {
      width: 100%; }
      .l-footer .fnav .fnav-list {
        display: flex;
        justify-content: space-between; }
        .l-footer .fnav .fnav-list li {
          margin-left: 0; }
          .l-footer .fnav .fnav-list li a {
            font-size: 1.6rem; }
    .l-footer .copy {
      margin-top: 30px;
      text-align: center; } }

/* ==========================================================================

  TOP

  ========================================================================== */
.page-top .mv {
  margin: 0 auto;
  background: #222;
  overflow: hidden; }

.page-top .mv-swiper-img {
  position: relative;
  padding: 30px 60px 0; }
  .page-top .mv-swiper-img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 150px;
    background: #000;
    left: 0;
    bottom: 0; }
  .page-top .mv-swiper-img .swiper-slide {
    overflow: hidden;
    width: 200px;
    height: 587px;
    margin: 0;
    -webkit-transition: width 0.8s ease, height 0.8s ease;
    transition: width 0.8s ease, height 0.8s ease; }
    .page-top .mv-swiper-img .swiper-slide img {
      border: 10px solid #fff;
      border-radius: 8px; }
  .page-top .mv-swiper-img .swiper-slide-active {
    width: 400px !important;
    margin-top: 0; }
  @media screen and (min-width: 768px) {
    .page-top .mv-swiper-img .swiper-slide a {
      display: block; }
      .page-top .mv-swiper-img .swiper-slide a:hover {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75); }
        .page-top .mv-swiper-img .swiper-slide a:hover img {
          opacity: 1;
          border: 0px solid #fff; } }

.page-top .mv-swiper-txt {
  margin-top: -150px;
  height: 150px;
  padding: 0 0; }
  .page-top .mv-swiper-txt .txt {
    position: relative;
    padding: 25px 0 0 520px;
    height: 100%;
    color: #fff; }
    @media screen and (min-width: 1599px) {
      .page-top .mv-swiper-txt .txt {
        padding: 25px 0 0 40%; } }
    .page-top .mv-swiper-txt .txt .txt__info {
      width: 100%;
      display: flex;
      flex-wrap: wrap; }
      .page-top .mv-swiper-txt .txt .txt__info li {
        width: 40%;
        min-width: 250px;
        margin-bottom: 15px; }
        .page-top .mv-swiper-txt .txt .txt__info li span {
          font-size: 1.2rem;
          color: #c1071d; }
          .page-top .mv-swiper-txt .txt .txt__info li span::before {
            content: '_'; }
        .page-top .mv-swiper-txt .txt .txt__info li p {
          font-size: 1.6rem;
          line-height: 1.6; }
    .page-top .mv-swiper-txt .txt .txt__btn {
      position: absolute;
      width: 120px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      left: auto;
      right: 60px;
      top: 0;
      bottom: 0;
      margin: auto 0 auto auto;
      overflow: hidden; }
      .page-top .mv-swiper-txt .txt .txt__btn a {
        padding: 0 10px;
        display: block;
        position: relative;
        background: #c1071d; }
        .page-top .mv-swiper-txt .txt .txt__btn a span {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          letter-spacing: -.02em;
          transition: all 0.25s ease-out; }
        @media screen and (min-width: 768px) {
          .page-top .mv-swiper-txt .txt .txt__btn a:hover {
            background: #c1071d; }
            .page-top .mv-swiper-txt .txt .txt__btn a:hover span {
              color: #000;
              letter-spacing: .04em; }
          .page-top .mv-swiper-txt .txt .txt__btn a::before {
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: #fff;
            transform: translateX(-100%);
            transition: transform 0.25s ease-out; }
          .page-top .mv-swiper-txt .txt .txt__btn a:hover::before {
            transform: translateX(100%); } }

.page-top .mv-swiper-img .swiper-button-prev:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f137";
  color: #c1071d;
  margin-left: 20px;
  /* マージンを追加 */ }

.page-top .mv-swiper-img .swiper-button-next:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  color: #c1071d;
  margin-right: 20px; }

.page-top .mv-swiper-img .swiper-pagination-bullets {
  bottom: 160px;
  left: 0;
  width: 99%;
  text-align: right; }

.page-top .mv-swiper-img .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  text-align: center;
  background: #fff; }

.page-top .mv-swiper-img .swiper-pagination-bullet-active {
  background: #c1071d; }

@media screen and (max-width: 767px) {
  .page-top .mv-swiper-img {
    padding: 30px 20px 0; }
    .page-top .mv-swiper-img::before {
      height: 150px; }
    .page-top .mv-swiper-img .swiper-slide {
      width: 200px;
      height: 500px;
      margin: 0; }
    .page-top .mv-swiper-img .swiper-slide-active {
      width: 69.5% !important;
      margin-top: 0; }
  .page-top .mv-swiper-txt {
    margin-top: -150px;
    height: 150px;
    background: #000; }
    .page-top .mv-swiper-txt .txt {
      position: relative;
      padding: 15px 0 0 20px;
      z-index: 2;
      height: 100%;
      color: #fff; }
      .page-top .mv-swiper-txt .txt .txt__info li {
        display: flex;
        align-items: baseline;
        width: 70%;
        min-width: inherit;
        margin-bottom: 8px; }
        .page-top .mv-swiper-txt .txt .txt__info li span {
          width: 18%;
          display: inline-block;
          font-size: 1.0rem; }
        .page-top .mv-swiper-txt .txt .txt__info li p {
          font-size: 1.5rem;
          line-height: 1.5; }
      .page-top .mv-swiper-txt .txt .txt__btn {
        width: 80px;
        height: 40px;
        line-height: 40px;
        right: 20px; }
        .page-top .mv-swiper-txt .txt .txt__btn a {
          padding: 0 5px; }
          .page-top .mv-swiper-txt .txt .txt__btn a span {
            font-size: 1.4rem; } }

.page-top .mv-swiper-bg {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  opacity: .65; }
  .page-top .mv-swiper-bg .thumb {
    position: relative;
    width: 110%;
    height: 110%; }
    .page-top .mv-swiper-bg .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.page-top .cnts {
  padding: 60px 0;
  background: #e5e5e5; }
  .page-top .cnts h2 {
    font-size: 3.8rem;
    letter-spacing: -.02em; }

.page-top .cnts .btn-wrap {
  margin-top: 30px;
  position: relative; }

@media screen and (max-width: 767px) {
  .page-top .cnts {
    padding: 45px 0; } }

.page-top .news h2 {
  display: inline-block; }

.page-top .news .btn-all {
  margin-left: 15px;
  margin-top: 4px;
  display: inline-block;
  vertical-align: top; }

.page-top .news .l-inner {
  display: flex;
  justify-content: space-between; }

.page-top .news .news-list {
  position: relative;
  width: 60%; }
  .page-top .news .news-list > ul {
    margin-top: 30px; }
    .page-top .news .news-list > ul > li {
      border-bottom: 1px solid #999;
      padding-bottom: 15px;
      margin-bottom: 15px; }
      .page-top .news .news-list > ul > li:last-child {
        margin-bottom: 0;
        border-bottom: none; }
  .page-top .news .news-list article {
    display: flex;
    width: 100%; }
    .page-top .news .news-list article .thumb a {
      display: block;
      position: relative;
      overflow: hidden;
      width: 120px;
      height: 120px; }
      .page-top .news .news-list article .thumb a img {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto; }
    .page-top .news .news-list article .txt {
      padding-left: 15px; }
      .page-top .news .news-list article .txt .txt__ttl {
        margin-bottom: 15px;
        line-height: 1.6; }
      .page-top .news .news-list article .txt .txt__info span.txt__info__date {
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
        margin-right: 15px; }
      .page-top .news .news-list article .txt .txt__info ul.post-categories {
        display: flex;
        justify-content: flex-start; }
        .page-top .news .news-list article .txt .txt__info ul.post-categories li {
          margin-right: 15px; }
          .page-top .news .news-list article .txt .txt__info ul.post-categories li:last-child {
            margin-right: 0; }
          .page-top .news .news-list article .txt .txt__info ul.post-categories li a {
            display: block;
            background: #666;
            color: #fff;
            padding: 3px 6px;
            font-size: 1.0rem;
            border-radius: 3px; }
            @media screen and (min-width: 768px) {
              .page-top .news .news-list article .txt .txt__info ul.post-categories li a:hover {
                background: #c1071d; } }

@media screen and (max-width: 767px) {
  .page-top .news .l-inner {
    display: block; }
  .page-top .news .news-list {
    width: 100%; }
    .page-top .news .news-list > ul {
      margin-top: 30px; }
    .page-top .news .news-list article {
      display: flex;
      width: 100%; }
      .page-top .news .news-list article .thumb a {
        width: 80px;
        height: 80px; }
      .page-top .news .news-list article .txt .txt__ttl {
        font-size: 1.2rem;
        margin-bottom: 7px; }
      .page-top .news .news-list article .txt .txt__info span.txt__info__date {
        font-size: 1.2rem;
        margin-bottom: 7px; }
      .page-top .news .news-list article .txt .txt__info ul.post-categories li {
        margin-right: 10px;
        font-size: .9rem; } }

.page-top .news .twitter-feed {
  position: relative;
  width: 35%;
  max-height: 480px;
  overflow-y: auto; }

@media screen and (max-width: 767px) {
  .page-top .news .twitter-feed {
    width: 100%;
    max-height: 200px; } }

.page-top .about h2,
.page-top .works h2 {
  color: #fff;
  line-height: 1; }

.page-top .about p,
.page-top .works p {
  font-size: 1.6rem;
  line-height: 2.0;
  color: #fff; }

.page-top .about {
  padding: 60px 0 30px;
  background: url(../images/top/about-bg.jpg) right center no-repeat #c1071d;
  background-size: 50% auto;
  overflow: hidden; }

.page-top .about .l-inner {
  width: 100%;
  position: relative; }
  .page-top .about .l-inner::before,
  .page-top .about .l-inner::after {
    content: '';
    position: absolute; }
  .page-top .about .l-inner::before {
    box-sizing: border-box;
    width: 100%;
    height: 600px;
    border: 2px solid #eee;
    top: 3.4rem;
    margin: 0 auto;
    left: 0;
    right: 0; }
  .page-top .about .l-inner::after {
    width: 95%;
    height: 600px;
    border: 1px solid #eee;
    top: 6.4rem;
    margin: 0 auto;
    left: 0;
    right: 0; }

.page-top .about .l-inner h2 {
  position: absolute;
  left: 2.5%;
  top: -.15rem; }

.page-top .about .l-inner-left {
  width: 50%;
  padding-top: 90px;
  padding-bottom: 65px;
  padding-left: 3.0%; }
  .page-top .about .l-inner-left a.btn-detail {
    background: #000; }
    .page-top .about .l-inner-left a.btn-detail:hover {
      background: #c1071d; }

.page-top .about .btn-wrap,
.page-top .works .btn-wrap {
  position: absolute;
  z-index: 5; }

@media screen and (max-width: 767px) {
  .page-top .about p,
  .page-top .works p {
    font-size: 1.5rem;
    line-height: 1.8;
    color: #fff; }
  .page-top .about {
    padding: 45px 0 30px;
    background: #c1071d; }
  .page-top .about .l-inner::before {
    width: 96%;
    height: 600px;
    top: 3.4rem; }
  .page-top .about .l-inner::after {
    width: 92%;
    height: 600px;
    top: 4.1rem; }
  .page-top .about .l-inner h2 {
    position: absolute;
    left: 2.5%;
    top: -.15rem; }
  .page-top .about .l-inner-left {
    position: relative;
    width: 100%;
    padding-top: 65px;
    padding-bottom: 65px;
    padding-left: 3.0%;
    padding-right: 3.0%; }
    .page-top .about .l-inner-left::before {
      content: '';
      display: block;
      width: 100%;
      height: 180px;
      background: url(../images/top/about-bg-sp.jpg) center top no-repeat;
      background-size: 100% auto;
      margin-bottom: 15px; }
    .page-top .about .l-inner-left .btn-wrap {
      text-align: center;
      width: 94%; } }

.page-top .works {
  padding: 30px 0 60px;
  background: #000;
  overflow: hidden; }
  .page-top .works::before {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff; }

.page-top .works .l-inner {
  width: 100%;
  position: relative; }
  .page-top .works .l-inner::before,
  .page-top .works .l-inner::after {
    content: '';
    position: absolute;
    z-index: 0; }
  .page-top .works .l-inner::before {
    box-sizing: border-box;
    width: 100%;
    height: 600px;
    border: 2px solid #eee;
    bottom: 3.4rem;
    margin: 0 auto;
    left: 0;
    right: 0; }
  .page-top .works .l-inner::after {
    width: 95%;
    height: 600px;
    border: 1px solid #eee;
    bottom: 6.4rem;
    margin: 0 auto;
    left: 0;
    right: 0; }

.page-top .works .l-inner h2 {
  position: absolute;
  right: 2.5%;
  bottom: .25rem; }

.page-top .works .l-inner-left {
  position: relative;
  width: 50%;
  padding-left: 3.0%; }

.page-top .works .l-inner-right {
  margin-left: 50%;
  width: 50%;
  padding-left: 3.0%;
  padding-right: 3.0%;
  padding-bottom: 160px; }
  .page-top .works .l-inner-right a.btn-detail {
    color: #000;
    background: #fff;
    margin-bottom: 45px; }
    .page-top .works .l-inner-right a.btn-detail:hover {
      background: #c1071d; }

.page-top .works .recent-works {
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-right: 80px;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .page-top .works .recent-works li {
    position: relative;
    width: 140px;
    height: 140px;
    overflow: hidden;
    margin-bottom: 30px; }
    .page-top .works .recent-works li a {
      display: block;
      width: 100%;
      height: 100%; }
      .page-top .works .recent-works li a img {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
        transition: all 0.25s ease-out; }
    @media screen and (min-width: 768px) {
      .page-top .works .recent-works li a:hover img {
        transform: scale(1.05); } }

@media screen and (max-width: 767px) {
  .page-top .works {
    padding: 30px 0 45px; }
    .page-top .works::before {
      content: none; }
    .page-top .works .btn-wrap {
      text-align: center;
      width: 100%; }
  .page-top .works .l-inner {
    display: block; }
    .page-top .works .l-inner::before {
      box-sizing: border-box;
      width: 96%;
      height: 600px;
      bottom: 3.4rem; }
    .page-top .works .l-inner::after {
      width: 92%;
      height: 600px;
      bottom: 4.1rem; }
  .page-top .works .l-inner h2 {
    position: absolute;
    right: 2.5%;
    bottom: .25rem; }
  .page-top .works .l-inner-left {
    position: relative;
    display: block;
    width: 100%;
    padding-left: 3.0%;
    padding-right: 3.0%; }
  .page-top .works .l-inner-right {
    position: relative;
    display: block;
    margin-left: 0;
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 140px; }
  .page-top .works .recent-works {
    position: relative;
    width: 100%;
    padding: 5px 0 5px 0; }
    .page-top .works .recent-works li {
      width: 95px;
      height: 95px;
      margin-bottom: 15px; } }

.page-top .information {
  background: url(../images/top/recruit-bg.jpg) no-repeat;
  background-size: cover; }

.page-top .information {
  width: 100%; }
  .page-top .information .l-inner {
    width: 100%;
    display: flex;
    justify-content: space-between; }
  .page-top .information .l-inner > div {
    width: 47%;
    position: relative; }
    .page-top .information .l-inner > div::before,
    .page-top .information .l-inner > div::after {
      content: '';
      position: absolute;
      display: block;
      width: 15px;
      height: 15px; }
    .page-top .information .l-inner > div::before {
      top: 0;
      left: 0;
      border-top: 1px solid #000;
      border-left: 1px solid #000; }
    .page-top .information .l-inner > div::after {
      bottom: 0;
      right: 0;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000; }
  .page-top .information .l-inner section {
    padding: 6%; }
    .page-top .information .l-inner section::before,
    .page-top .information .l-inner section::after {
      content: '';
      position: absolute;
      display: block;
      width: 15px;
      height: 15px; }
    .page-top .information .l-inner section::before {
      top: 0;
      right: 0;
      border-top: 1px solid #000;
      border-right: 1px solid #000; }
    .page-top .information .l-inner section::after {
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #000;
      border-left: 1px solid #000; }
  .page-top .information h2 {
    margin-bottom: 30px; }
  .page-top .information p {
    font-size: 1.6rem;
    line-height: 2.0;
    color: #000; }

@media screen and (max-width: 767px) {
  .page-top .information {
    background: url(../images/top/recruit-bg-sp.jpg) center bottom no-repeat;
    background-size: cover; }
    .page-top .information .l-inner {
      display: block; }
    .page-top .information .l-inner > div {
      width: 100%;
      position: relative; }
    .page-top .information .l-inner section {
      padding: 6%; }
    .page-top .information h2 {
      margin-bottom: 15px; }
    .page-top .information p {
      font-size: 1.4rem;
      line-height: 1.8; }
    .page-top .information .rectuit {
      margin-bottom: 45px; }
    .page-top .information .btn-wrap {
      text-align: center; } }

/* ==========================================================================
  
  PARTS
  
  ========================================================================== */
.p-ttl {
  background: #000;
  padding: 60px 0; }
  .p-ttl h1 {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4.8rem; }
    .p-ttl h1 span {
      display: block;
      font-size: 1.2rem;
      margin-top: 10px; }

.s-ttl {
  background: #000;
  padding: 30px 0; }
  .s-ttl h1 {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 3.0rem; }

@media screen and (max-width: 767px) {
  .p-ttl {
    padding: 30px 0; }
    .p-ttl h1 {
      font-size: 3.8rem; }
      .p-ttl h1 span {
        font-size: 1.2rem; }
  .s-ttl {
    background: #000;
    padding: 15px 0; }
    .s-ttl h1 {
      font-size: 2.4rem; } }

.p-path {
  margin-bottom: 30px;
  border-bottom: 1px solid #000; }
  .p-path ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0; }
    .p-path ul li {
      margin-right: 20px;
      color: #666; }
      .p-path ul li a {
        display: block;
        position: relative; }
        .p-path ul li a::after {
          content: '';
          display: block;
          position: absolute;
          right: -12px;
          top: 0;
          bottom: 0;
          margin: auto 0 auto auto;
          width: 6px;
          height: 6px;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          transform: rotate(45deg); }
        @media screen and (min-width: 768px) {
          .p-path ul li a:hover {
            color: #c1071d; } }

@media screen and (max-width: 767px) {
  .p-path {
    padding: 0 3%;
    margin-bottom: 15px; }
    .p-path ul li {
      margin-right: 16px; }
      .p-path ul li a::after {
        right: -8px;
        width: 3px;
        height: 3px; } }

/* ==========================================================================
  
  NEWS (category-news.php / content.php)
  
  ========================================================================== */
.news-archive {
  margin-top: 60px;
  padding-bottom: 60px; }

@media screen and (max-width: 767px) {
  .news-archive {
    margin-top: 30px;
    padding-bottom: 30px; } }

/* ==================
  News List
  ================== */
.news-wrap .news-cat {
  -ms-flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 0; }

.news-wrap .news-cat li {
  border-bottom: 2px solid #fff;
  display: block;
  margin: 0;
  text-align: center;
  width: 25%; }

.news-wrap .news-cat li.is-active {
  border-bottom: 2px solid #c1071d; }

.news-wrap .news-cat li span {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 5px 0 15px; }

.news-wrap .news-panel {
  background: transparent;
  display: block; }

.news-wrap .news-panel li {
  margin: 0;
  padding: 0;
  width: 100%; }

.news-wrap .news-panel li .news-list {
  -ms-flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 15px 0 0;
  width: 100%; }

.news-wrap .news-panel li .news-list:before {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  content: "";
  display: block;
  height: 0;
  order: 1;
  width: 22.5%; }

.news-wrap .news-panel li .news-list:after {
  content: "";
  display: block;
  height: 0;
  width: 22.5%; }

.news-wrap .news-panel li .news-list li {
  border-bottom: 1px solid #000;
  margin-bottom: 30px;
  padding: 0 0 15px;
  width: 47%;
  /*
          &:nth-child(odd) {
            background: #efefef;
          }
    */ }

@media screen and (max-width: 767px) {
  .news-wrap .news-cat li span {
    font-size: 1.2rem; } }

.news-wrap .news-panel li .news-list li a {
  height: 100%;
  margin-top: 0;
  padding: 0 0 10px;
  text-decoration: none;
  color: #000; }
  @media screen and (min-width: 768px) {
    .news-wrap .news-panel li .news-list li a:hover {
      color: #c1071d; } }

.news-wrap .news-panel li .news-list li article .thumb {
  margin-bottom: 10px; }

.news-wrap .news-panel li .news-list li article .date {
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 5px;
  font-family: "Oswald", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; }

.news-wrap .news-panel li .news-list li article h2 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 10px;
  text-align: left; }

.news-wrap .news-panel li .news-list li article .cat {
  font-size: 1rem; }

.news-wrap .news-panel li .notfound {
  padding: 15% 0;
  text-align: center; }

.news-wrap .news-panel li .notfound span {
  display: block;
  margin-bottom: 1em;
  font-size: 1.4rem; }

.news-detail {
  margin: 0 auto;
  padding: 30px 0;
  max-width: 900px; }

.news-detail .news-title {
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  padding-bottom: 5px; }

.news-detail .news-title .date {
  font-weight: bold;
  font-family: "Oswald", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-size: 1.4rem;
  margin-bottom: 10px; }

.news-detail .news-title h2 {
  line-height: 1.4;
  margin-bottom: 15px;
  text-align: left;
  font-size: 1.8rem; }

.news-detail .news-content {
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  padding-bottom: 30px; }

.news-detail .news-content p {
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 1.4rem; }

.news-detail .btn-wrap {
  margin: 0 auto;
  text-align: center; }

@media screen and (min-width: 768px) {
  .news-wrap .news-cat li span {
    font-size: 1.6rem; }
  .news-wrap .news-panel li .news-list {
    padding: 30px 0 0; }
  .news-wrap .news-panel li .news-list li {
    width: 22.5%; }
  .news-wrap .news-panel li .notfound {
    font-size: 1.6rem; }
  .news-detail {
    padding-bottom: 60px; }
  .news-detail .img-main {
    margin-bottom: 20px;
    min-height: 200px;
    overflow: hidden;
    position: relative; }
  .news-detail .img-main img {
    bottom: 0;
    margin: auto 0;
    position: absolute;
    top: 0; }
  .news-detail .news-title .date {
    font-size: 1.6rem; }
  .news-detail .news-title h2 {
    font-size: 2.6rem; }
  .news-detail .news-content p {
    font-size: 1.4rem; } }

/* ==========================================================================

  PAGE (common)

  ========================================================================== */
.page p.lead {
  font-size: 1.8rem;
  line-height: 2.2;
  text-align: center;
  letter-spacing: .02em; }

@media screen and (max-width: 767px) {
  .page p.lead {
    font-size: 1.6rem;
    line-height: 1.8; } }

/* ==========================================================================
  PAGE (ABOUT)
  ========================================================================== */
.page-about h2,
.page-recruit h2,
.page-contact h2 {
  font-size: 3.4rem;
  text-align: center;
  margin-bottom: 45px;
  padding: 60px 0 30px;
  position: relative; }
  .page-about h2::after,
  .page-recruit h2::after,
  .page-contact h2::after {
    content: '';
    display: block;
    position: absolute;
    width: 60px;
    height: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto 0;
    background: #c1071d; }

.page-about .profile-list,
.page-about .job-summary,
.page-recruit .profile-list,
.page-recruit .job-summary {
  max-width: 600px;
  margin: 0 auto;
  border-top: 1px solid #eee;
  padding-top: 20px;
  padding-bottom: 30px; }
  .page-about .profile-list dl,
  .page-about .job-summary dl,
  .page-recruit .profile-list dl,
  .page-recruit .job-summary dl {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; }
    .page-about .profile-list dl dt,
    .page-about .job-summary dl dt,
    .page-recruit .profile-list dl dt,
    .page-recruit .job-summary dl dt {
      font-weight: bold;
      font-size: 1.4rem;
      line-height: 1.4;
      width: 20%; }
    .page-about .profile-list dl dd,
    .page-about .job-summary dl dd,
    .page-recruit .profile-list dl dd,
    .page-recruit .job-summary dl dd {
      padding-left: 2.5%;
      width: 80%;
      font-size: 1.6rem;
      line-height: 1.4; }
    .page-about .profile-list dl span,
    .page-about .job-summary dl span,
    .page-recruit .profile-list dl span,
    .page-recruit .job-summary dl span {
      display: block;
      font-size: 1.3rem; }

.page-about .map,
.page-recruit .map {
  width: 100%;
  margin: 30px auto 0; }
  .page-about .map iframe,
  .page-recruit .map iframe {
    width: 100%;
    height: 300px; }

@media screen and (max-width: 767px) {
  .page-about h2,
  .page-recruit h2,
  .page-contact h2 {
    font-size: 3.0rem;
    margin-bottom: 30px;
    padding: 45px 0 15px; }
    .page-about h2::after,
    .page-recruit h2::after,
    .page-contact h2::after {
      width: 45px; }
  .page-about .profile-list dl,
  .page-about .job-summary dl,
  .page-recruit .profile-list dl,
  .page-recruit .job-summary dl {
    margin-bottom: 15px;
    padding-bottom: 30px; }
    .page-about .profile-list dl dt,
    .page-about .job-summary dl dt,
    .page-recruit .profile-list dl dt,
    .page-recruit .job-summary dl dt {
      font-weight: bold;
      font-size: 1.2rem;
      line-height: 1.4;
      width: 20%; }
    .page-about .profile-list dl dd,
    .page-about .job-summary dl dd,
    .page-recruit .profile-list dl dd,
    .page-recruit .job-summary dl dd {
      padding-left: 2.5%;
      width: 80%;
      font-size: 1.4rem;
      line-height: 1.4; }
    .page-about .profile-list dl span,
    .page-about .job-summary dl span,
    .page-recruit .profile-list dl span,
    .page-recruit .job-summary dl span {
      display: block;
      font-size: 1.3rem; }
  .page-about .map,
  .page-recruit .map {
    width: 100%;
    margin: 30px auto 0; }
    .page-about .map iframe,
    .page-recruit .map iframe {
      width: 100%;
      height: 300px; } }

/* ==========================================================================
  PAGE (RECRUIT)
  ========================================================================== */
.page-recruit .lead {
  padding-top: 60px;
  font-weight: bold;
  font-size: 2.4rem; }

.page-recruit .job-list {
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between; }
  .page-recruit .job-list li {
    width: 32%;
    padding: 15px 30px 20px;
    line-height: 1.8;
    font-size: 1.6rem;
    background: #fff;
    border-radius: 10px; }
    .page-recruit .job-list li:last-child {
      margin-bottom: 0; }
    .page-recruit .job-list li h3 {
      font-size: 2.4rem;
      text-align: center;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #000; }
      .page-recruit .job-list li h3 span {
        display: block;
        font-size: 1.4rem;
        font-weight: bold; }

.page-recruit .job-summary {
  max-width: 750px;
  margin: 0 auto;
  padding: 30px 30px 10px;
  background: #fff;
  border-radius: 10px;
  border-top: none; }
  .page-recruit .job-summary dl:first-child {
    border-top: 1px solid #eee;
    padding-top: 20px; }
  .page-recruit .job-summary dl dd .address {
    margin-top: 30px;
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 15px;
    border-radius: 10px;
    background: #f5f5f5; }
    .page-recruit .job-summary dl dd .address p {
      padding-left: 15px;
      border-left: 2px solid #c1071d; }

.page-recruit .tab-btn {
  display: flex;
  justify-content: center; }
  .page-recruit .tab-btn li {
    width: 300px;
    margin: 0 15px;
    padding: 15px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    font-size: 2.0rem;
    border-radius: 10px 10px 0 0;
    background: #ccc;
    transition: all 0.25s ease-out; }
    .page-recruit .tab-btn li.is-active {
      background: #fff; }
    @media screen and (min-width: 768px) {
      .page-recruit .tab-btn li:hover {
        background: #eee; } }

.page-recruit .tab-panel {
  padding-bottom: 60px; }

@media screen and (max-width: 767px) {
  .page-recruit .lead {
    padding-top: 45px;
    font-size: 2.6rem; }
  .page-recruit h2 {
    font-size: 2.6rem; }
  .page-recruit .job-list {
    margin: 0 auto 30px;
    display: block; }
    .page-recruit .job-list li {
      width: 100%;
      margin-bottom: 30px;
      font-size: 1.4rem; }
      .page-recruit .job-list li h3 {
        font-size: 2.2rem; }
        .page-recruit .job-list li h3 span {
          font-size: 1.2rem; }
  .page-recruit .job-summary {
    max-width: auto;
    margin: 0 auto;
    padding: 20px 15px 5px; }
    .page-recruit .job-summary dl {
      padding-bottom: 15px; }
      .page-recruit .job-summary dl dd .address {
        margin-top: 15px;
        font-size: 1.4rem;
        line-height: 1.6; }
  .page-recruit .tab-btn li {
    width: 40%;
    font-size: 1.6rem;
    margin: 0 7px; } }

/* ==========================================================================

  WORKS

  ========================================================================== */
/* ==========================================================================
  WORKS (Archive)
  ========================================================================== */
.works-wrap {
  background: #e5e5e5; }
  .works-wrap .txt__info li {
    margin-bottom: 15px; }
    .works-wrap .txt__info li:last-child {
      margin-bottom: 0; }
    .works-wrap .txt__info li span {
      display: block;
      margin-bottom: 5px;
      color: #c1071d;
      font-size: 1.0rem; }
      .works-wrap .txt__info li span::before {
        content: '_'; }

.works-archive {
  padding-top: 30px; }

.works-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px; }
  .works-list:before,
  .works-list:after {
    content: "";
    display: block;
    width: 24%; }
  .works-list:before {
    order: 1; }
  .works-list > article {
    position: relative;
    width: 24%;
    border: 10px solid #fff;
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 60px 0 0;
    background: #fff; }
    .works-list > article::after {
      position: absolute;
      left: 0;
      top: 17px;
      font-size: 2.2rem;
      font-weight: bold; }
    .works-list > article:hover .thumb img {
      transform: scale(1.05); }
    .works-list > article:hover .txt {
      background: #c1071d; }
      .works-list > article:hover .txt .txt__info li span {
        color: #000; }
    .works-list > article a {
      display: block;
      width: 100%;
      height: 100%;
      background: #000; }
  .works-list .thumb {
    overflow: hidden;
    max-height: 424px;
    position: relative; }
    .works-list .thumb img {
      transition: all 0.25s ease-out;
      width: 100%;
      height: auto;
      min-height: 424px;
      object-fit: cover; }
  .works-list .txt {
    background: #000;
    font-size: 1.3rem;
    color: #fff;
    transition: all 0.25s ease-out; }
    .works-list .txt .txt__info {
      padding: 12px; }

.works-list [class*="works-2024"]::after {
  content: '2024'; }

.works-list [class*="works-2023"]::after {
  content: '2023'; }

.works-list [class*="works-2022"]::after {
  content: '2022'; }

.works-list [class*="works-2021"]::after {
  content: '2021'; }

.works-list [class*="works-2020"]::after {
  content: '2020'; }

.works-list [class*="works-2019"]::after {
  content: '2019'; }

.works-list [class*="works-2018"]::after {
  content: '2018'; }

.works-list [class*="works-2017"]::after {
  content: '2017'; }

.works-list [class*="works-2016"]::after {
  content: '2016'; }

.works-list [class*="works-2015"]::after {
  content: '2015'; }

.works-list [class*="works-2014"]::after {
  content: '2014'; }

.works-list [class*="works-2013"]::after {
  content: '2013'; }

.works-list [class*="works-2012"]::after {
  content: '2012'; }

@media screen and (max-width: 767px) {
  .works-list {
    max-width: 96%;
    padding-bottom: 0; }
    .works-list:before,
    .works-list:after {
      content: "";
      display: block;
      width: 24%; }
    .works-list:before {
      order: 1; }
    .works-list > article {
      position: relative;
      width: 49%;
      padding: 60px 0 0;
      background: #fff; }
      .works-list > article::after {
        position: absolute;
        left: 0;
        top: 17px;
        font-size: 2.2rem;
        font-weight: bold; }
    .works-list .thumb {
      max-height: 220px; }
      .works-list .thumb img {
        min-height: 220px; }
    .works-list .txt {
      background: #000;
      font-size: 1.4rem;
      line-height: 1.4; }
      .works-list .txt .txt__info {
        padding: 8px; }
        .works-list .txt .txt__info span {
          margin-bottom: 0; }
        .works-list .txt .txt__info li {
          margin-bottom: 8px; }
          .works-list .txt .txt__info li:last-child {
            margin-bottom: 0; } }

/* ==========================================================================
  WORKS (Detail)
  ========================================================================== */
.works-detail .l-inner {
  display: flex;
  justify-content: space-between;
  padding-bottom: 60px; }

.works-detail .thumb {
  width: 35%; }
  .works-detail .thumb .thumb__main {
    margin-bottom: 30px; }
  .works-detail .thumb .thumb__sub {
    margin-bottom: 60px; }
  .works-detail .thumb .mov {
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 56.25%;
    height: 0px;
    position: relative; }
    .works-detail .thumb .mov iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.works-detail .txt {
  width: 65%;
  padding-left: 60px; }
  .works-detail .txt .txt__info {
    margin-bottom: 60px; }
    .works-detail .txt .txt__info li {
      font-size: 1.6rem;
      margin-bottom: 30px; }
      .works-detail .txt .txt__info li span {
        font-size: 1.2rem;
        display: inline-block;
        margin-right: 15px;
        min-width: 60px; }

.works-detail .txt .txt__info .staff, .works-detail .txt .txt__info .links {
  overflow: hidden;
  display: flex; }
  .works-detail .txt .txt__info .staff span, .works-detail .txt .txt__info .links span {
    min-width: 60px; }
  .works-detail .txt .txt__info .staff .staff-list, .works-detail .txt .txt__info .staff .btn-wrap, .works-detail .txt .txt__info .links .staff-list, .works-detail .txt .txt__info .links .btn-wrap {
    vertical-align: top;
    display: inline-block; }
  .works-detail .txt .txt__info .staff .btn-wrap a, .works-detail .txt .txt__info .links .btn-wrap a {
    margin-bottom: 20px;
    display: block; }
    .works-detail .txt .txt__info .staff .btn-wrap a:last-child, .works-detail .txt .txt__info .links .btn-wrap a:last-child {
      margin-bottom: 0; }

.works-detail .txt .txt__info .staff-list {
  vertical-align: top;
  display: inline-block;
  width: 100%; }

.works-detail .txt .txt__info dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.6rem;
  margin-bottom: 15px; }
  .works-detail .txt .txt__info dl dt {
    width: 28%;
    font-size: 1.3rem;
    font-weight: bold; }
  .works-detail .txt .txt__info dl dd {
    width: 70%; }

@media screen and (max-width: 767px) {
  .works-detail .l-inner {
    display: block;
    padding-bottom: 30px; }
  .works-detail .thumb {
    width: 100%;
    max-width: 480px;
    margin: 0 auto; }
    .works-detail .thumb .thumb__main {
      margin-bottom: 30px; }
    .works-detail .thumb .thumb__sub {
      margin-bottom: 30px; }
    .works-detail .thumb .mov {
      width: 100%;
      max-width: 480px;
      margin: 0 auto 30px; }
  .works-detail .txt {
    width: 100%;
    padding-left: 0; }
    .works-detail .txt .txt__info {
      margin-bottom: 0; }
      .works-detail .txt .txt__info li {
        font-size: 1.4rem;
        margin-bottom: 15px; }
        .works-detail .txt .txt__info li span {
          font-size: 1.0rem;
          margin-right: 15px;
          min-width: 50px; }
  .works-detail .txt .txt__info .staff, .works-detail .txt .txt__info .links {
    overflow: hidden;
    display: flex; }
    .works-detail .txt .txt__info .staff span, .works-detail .txt .txt__info .links span {
      min-width: 50px; }
    .works-detail .txt .txt__info .staff .btn-wrap a, .works-detail .txt .txt__info .links .btn-wrap a {
      margin-bottom: 20px; }
  .works-detail .txt .txt__info dl {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    margin-bottom: 15px; }
    .works-detail .txt .txt__info dl dt {
      width: 20%;
      font-size: 1.2rem; }
    .works-detail .txt .txt__info dl dd {
      width: 76%; } }

/* ==========================================================================
  PAGE (CONTACT)
  ========================================================================== */
.page-contact .page-content {
  padding-bottom: 60px; }

.page-contact .message {
  text-align: center;
  padding: 60px 0; }

.page-contact .contact-box-select {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 30px; }
  .page-contact .contact-box-select .select-group {
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    vertical-align: middle;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat; }
  .page-contact .contact-box-select .select-group br {
    display: none; }
  .page-contact .contact-box-select .select-group:after {
    position: absolute;
    top: 0;
    right: 2.5%;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    content: '';
    border-top: 4px solid #999;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent; }
  .page-contact .contact-box-select .select {
    appearance: none;
    position: relative;
    z-index: 1;
    display: block;
    width: 120%;
    padding: 10px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    line-height: 1.8;
    text-indent: 8px;
    font-size: 1.6rem;
    font-weight: bold; }

.page-contact .contact-box-form {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 30px;
  border-radius: 5px;
  background: #fff; }
  .page-contact .contact-box-form h2 {
    color: #000;
    font-size: 2.2rem;
    margin-bottom: 30px;
    padding-top: 0;
    text-align: center; }
  .page-contact .contact-box-form dl {
    width: 100%;
    margin: 0 auto 30px; }
    .page-contact .contact-box-form dl dt {
      margin: 0 0 10px;
      padding: 0;
      font-weight: bold; }
    .page-contact .contact-box-form dl dd {
      width: 100%; }
      .page-contact .contact-box-form dl dd input,
      .page-contact .contact-box-form dl dd textarea {
        width: 100%;
        padding: 10px 15px;
        font-size: 1.6rem;
        border-radius: 2px;
        border: 2px solid #333; }
        .page-contact .contact-box-form dl dd input:focus,
        .page-contact .contact-box-form dl dd textarea:focus {
          border: 2px solid #c1071d; }
      .page-contact .contact-box-form dl dd input.wpcf7-submit {
        padding: 15px 30px;
        font-size: 2.0rem;
        letter-spacing: 1em;
        background-color: #000;
        color: #fff;
        border-style: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease-out;
        font-weight: bold; }

@media screen and (min-width: 768px) {
  .page-contact .contact-box-form input.wpcf7-submit:hover {
    background-color: #c1071d;
    color: #fff; } }

@media screen and (max-width: 767px) {
  .page-contact .page-content {
    padding-bottom: 45px; }
  .page-contact .message {
    padding: 30px 0; }
    .page-contact .message p.lead {
      font-size: 1.6rem;
      margin-bottom: 15px; }
  .page-contact .contact-box-select {
    width: 100%;
    max-width: auto;
    margin: 0 auto 30px; }
  .page-contact .contact-box-form {
    padding: 30px 20px; }
    .page-contact .contact-box-form h2 {
      color: #000;
      font-size: 1.8rem;
      margin-bottom: 30px; }
    .page-contact .contact-box-form dl {
      width: 100%;
      margin: 0 auto 20px; }
      .page-contact .contact-box-form dl:last-child {
        margin: 0 auto 0; }
      .page-contact .contact-box-form dl dt {
        font-size: 1.2rem; }
      .page-contact .contact-box-form dl dd {
        width: 100%; }
        .page-contact .contact-box-form dl dd input,
        .page-contact .contact-box-form dl dd textarea {
          font-size: 1.4rem; }
        .page-contact .contact-box-form dl dd input.wpcf7-submit {
          font-size: 1.8rem; } }

/* ==========================================================================
  404ページ
  ========================================================================== */
.notfound {
  position: relative;
  background: url(../../assets/images/mv_bg_pat.jpg) center top;
  padding: 32.91667px 0;
  background-size: 166.66667px 266.66667px; }
  @media screen and (min-width: 768px) {
    .notfound {
      padding: 80px 0;
      background-size: 400px 640px; } }
  .notfound .notfound-inner {
    width: 90%;
    max-width: 640px;
    margin: 50px auto 50px;
    padding: 50px;
    background: #fff;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25); }
  .notfound h1 {
    text-align: center;
    margin-bottom: 30px; }
    .notfound h1 span {
      font-size: 2.0rem;
      font-weight: bold;
      display: block;
      margin: 0 auto; }
  .notfound a {
    border-radius: 4px;
    display: block;
    width: 70%;
    max-width: 300px;
    margin: 0 auto;
    transition: all 0.25s ease-out; }
    @media screen and (min-width: 768px) {
      .notfound a:hover {
        opacity: .75; } }