@charset "UTF-8";
.l-Breadcrumb {
  position: absolute;
  left: 40px;
  top: 0;
  width: 100vh;
  transform: rotate(-90deg);
  font-size: 1.2rem;
  color: #999;
  letter-spacing: 0.1em;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%);
}

.l-Breadcrumb .detailText {
  max-width: calc(100% - 202px - 4%);
}

.breadcrumb-archive-sp {
  display: none;
}

.breadcrumb-archive-pc {
  display: flex;
  justify-content: center;
  width: 100vh;
  top: 0;
}

.home-Works-archive .breadcrumb-pc {
  top: calc((100vh - 100px) / 2);
}

@media screen and (max-width: 1300px) {
  .home-Works-archive .breadcrumb-pc {
    left: 10px;
  }
}

.l-Breadcrumb__lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.l-Breadcrumb__list {
  color: #333;
}

.l-Breadcrumb__list::after {
  content: "-";
  color: transparent;
  height: 1px;
  width: 30px;
  background-color: #333;
  display: inline-block;
  vertical-align: middle;
  margin: 0 20px;
}

.l-Breadcrumb__list:last-child {
  color: #999;
}

.l-Breadcrumb__list:last-child::after {
  display: none;
}

.l-Breadcrumb__list a {
  color: #333;
  text-decoration: none;
}

.l-Breadcrumb__list a:hover {
  text-decoration: none;
}

.breadcrumb-pc {
  display: block;
}

.breadcrumb-sp {
  display: none;
}

@media screen and (max-width: 959px) {
  .breadcrumb-pc {
    display: none !important;
  }
  .breadcrumb-sp {
    display: inline-block;
  }
  .l-Breadcrumb {
    position: static;
    transform: rotate(0);
    display: inline-block;
    text-align: left;
    margin-left: 4%;
    width: calc(100% - 4%);
  }
  .l-Breadcrumb__lists {
    width: 100%;
    justify-content: start;
    margin-bottom: 40px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media screen and (max-width: 959px) {
  .breadcrumb-archive-pc {
    display: none;
  }
  .breadcrumb-archive-sp {
    display: inline-block;
  }
}

.l-Breadcrumb.single-topics .l-Breadcrumb__lists {
  width: 80vh;
}

@media screen and (max-width: 959px) {
  .l-Breadcrumb.single-topics .l-Breadcrumb__lists {
    width: 100%;
  }
}

.l-Copyright {
  top: calc((100vh - 313px) / 2);
  transform: rotate(-180deg);
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .l-Copyright {
    top: calc((100vh - 260px) / 2);
  }
}

@media screen and (max-width: 680px) {
  .l-Copyright {
    transform: rotate(0);
    margin-top: 30px;
  }
}

.l-Copyright-as {
  font-size: 1.2rem;
  color: #999;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-top: 30px;
}

@media screen and (max-width: 679px) {
  .l-Copyright-as {
    font-size: 1rem;
  }
}

[value="all"]:checked ~ .targets .target:not([data-category~="all"]) {
  display: block;
}

[value="all"]:checked ~ .targets .target:not([data-category~="all"]),
[value="web"]:checked ~ .targets .target:not([data-category~="web"]),
[value="graphic"]:checked ~ .targets .target:not([data-category~="graphic"]) {
  display: none;
}

.home-Works__archiveInner input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.home-Works__archiveInner [value="all"]:checked ~ .home-Works-filters [for="all"],
.home-Works__archiveInner [value="web"]:checked ~ .home-Works-filters [for="web"],
.home-Works__archiveInner [value="graphic"]:checked ~ .home-Works-filters [for="graphic"] {
  background: #333;
  color: #fff;
}

.home-Works-filters {
  margin-bottom: 80px;
}

.home-Works-filters label {
  text-align: center;
  min-width: 50px;
  cursor: pointer;
  transition: all 0.2s;
}

.home-Works-filters label:hover {
  background: #333;
  color: #fff;
}

.home-Works-filters label:active {
  background: #333;
  color: #fff;
}

.home-Works-filters label:checked {
  background: #333;
  color: #fff;
}

.home-Works-filters * {
  display: inline-block;
}

[data-scroll="item"].arcive-animated {
  opacity: 1;
  transform: translateY(0) rotate(0);
  transition: opacity .4s linear, transform .4s ease-out;
}

/*SVGのサイズ*/
#mask {
  max-width: 800px;
  /*SVGタグの横幅*/
  width: 311px;
  height: auto;
  position: absolute;
  top: 11px;
  right: -3px;
}

#mask .st0 {
  fill: none;
  stroke: #fafafa;
  stroke-width: 30px;
  /*線の太さを指定する*/
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* 線の間隔を指定する */
  stroke-dashoffset: 1500;
  /* 線の位置を指定する */
}

@media screen and (max-width: 596px) {
  #mask {
    width: 256px;
  }
}

@media screen and (max-width: 400px) {
  #mask {
    width: 160px;
  }
}

#message_mask {
  max-width: 800px;
  /*SVGタグの横幅*/
  width: 287px;
  height: auto;
  position: absolute;
  top: 97px;
  left: 3px;
  transform: rotate(-32deg);
}

#message_mask .st0 {
  fill: none;
  stroke: #fafafa;
  stroke-width: 10px;
  /*線の太さを指定する*/
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* 線の間隔を指定する */
  stroke-dashoffset: 1500;
  /* 線の位置を指定する */
}

@media screen and (max-width: 1190px) {
  #message_mask {
    top: 60px;
    left: 20px;
  }
}

@media screen and (max-width: 490px) {
  #message_mask {
    width: calc(287 / 490 * 100vw);
    top: calc(20 / 490 * 100vw);
    left: calc(10 / 490 * 100vw);
    z-index: 2;
  }
}

#jubour_mask {
  max-width: 800px;
  width: 414px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 10;
  transform: translate(-49%, -50%);
}

@media screen and (max-width: 561px) {
  #jubour_mask {
    top: 67%;
    width: 95%;
    transform: translate(-49%, -50%);
  }
}

#jubour_mask .st0 {
  fill: none;
  stroke: #fafafa;
  stroke-width: 20px;
  /*線の太さを指定する*/
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* 線の間隔を指定する */
  stroke-dashoffset: 1500;
  /* 線の位置を指定する */
}

.recruitTop {
  -webkit-animation: recruittop 6s ease;
          animation: recruittop 6s ease;
}

@-webkit-keyframes recruittop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes recruittop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
  color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  -webkit-animation: recruitimg 3.4s ease-in-out 1s;
          animation: recruitimg 3.4s ease-in-out 1s;
  transform: scale(0.4);
}

@-webkit-keyframes recruitimg {
  0% {
    transform: scale(0.4);
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes recruitimg {
  0% {
    transform: scale(0.4);
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Loading アイコンの大きさ設定　*/
/* fadeUpをするアイコンの動き */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.__titlebox p {
  display: inline-block;
}

/*　画像の縮小＋テキスト出現　*/
.zoomOutText {
  /*背景色とテキストの基点となる位置を定義*/
  position: relative;
}

.zoomOutText span.mask {
  position: relative;
  transition: .3s ease-in-out;
  /*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block;
  /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0;
  /*行の高さを0にする*/
  overflow: hidden;
  /*拡大してはみ出る要素を隠す*/
  margin: 0 auto;
}

.zoomOutText:hover span.mask::before {
  /*hoverした時の変化*/
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /*背景色*/
}

.zoomOutText img {
  transform: scale(1);
  filter: blur(0);
  transition: .3s ease-in-out;
  /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOutText:hover img {
  /*hoverした時の変化*/
  transform: scale(0.9);
  /*縮小の値を変更したい場合はこの数値を変更*/
  filter: blur(2px);
  /*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomOutText span.cap {
  opacity: 0;
  transition: .5s ease-in-out;
  /*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index: 3;
  /*テキストを前面に出す*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  /*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5;
  /*行の高さを1.5にする*/
}

.zoomOutText:hover span.cap {
  /*hoverした時の変化*/
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

a {
  cursor: pointer;
}

a:hover, a:active {
  text-decoration: none;
}

.topboxWrap {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.topboxWrap .home-Works__inner, .topboxWrap .home-Company__inner {
  width: 100%;
}

@media screen and (min-width: 1040px) and (max-width: 1190px) {
  .topboxWrap {
    max-width: calc(100% - 190px);
  }
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .topboxWrap {
    max-width: calc(100% - 170px);
  }
}

@media screen and (max-width: 679px) {
  .topboxWrap {
    max-width: calc(100% - 8%);
  }
}

.boxWrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 679px) and (max-width: 1470px) {
  .boxWrap {
    max-width: calc(100% - 190px);
  }
}

@media screen and (max-width: 679px) {
  .boxWrap {
    width: calc(100% - 8%);
  }
}

@media screen and (min-width: 680px) and (max-width: 1099px) {
  .l-Copyright {
    left: 40px;
  }
}

@media screen and (max-width: 1039px) {
  .l-SiteHeader__logo {
    padding: 10px 0 10px 4%;
  }
}

.ds-none {
  display: none;
}

.home-Company {
  padding: 140px 0 100px;
}

@media screen and (max-width: 830px) {
  .home-Service__inner {
    flex-direction: column;
  }
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .home-Service::before {
    left: -20px;
    width: 610px;
  }
}

@media screen and (max-width: 830px) {
  .home-Service::before {
    left: -20px;
    width: 100%;
  }
}

@media screen and (max-width: 679px) {
  .home-Service__text {
    width: 100%;
  }
}

.home-Contact__inner ._title {
  font-size: 3.4rem;
}

.recruitVoice__innerImg .sp {
  display: none;
}

.recruitVoice__innerImg .__img {
  top: -50px;
}

@media screen and (max-width: 959px) {
  .recruitVoice__innerImg .pc {
    display: none;
  }
  .recruitVoice__innerImg .sp {
    display: inline-block;
  }
}

@media screen and (max-width: 1470px) {
  .recruitVoice__innerImg {
    position: relative;
  }
}

.recruitVoice__innerBox {
  position: relative;
}

.recruitVoice__staff1,
.recruitVoice__staff2,
.recruitVoice__staff3,
.recruitVoice__staff4 {
  position: absolute;
}

.recruitVoice__staffImg {
  width: 100%;
  height: auto;
  position: relative;
}

.recruitVoice__staffImg > img {
  width: 100%;
  height: auto;
}

.recruitVoice__staffImg .recruitVoice__staffImginner {
  position: absolute;
}

.recruitVoice__staff1 {
  bottom: 40px;
  left: 125px;
  opacity: 0;
  transition: .3s ease-in-out 0.8s;
}

.recruitVoice__staff1 .recruitVoice__staffImginner {
  top: 0;
}

.view .recruitVoice__staff1 {
  opacity: 1;
  transition: .3s ease-in-out 0.8s;
}

.staff01 {
  position: relative;
  left: -50px;
  top: 94px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.staff03 {
  position: relative;
  top: 24px;
  right: -72px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

@media screen and (max-width: 1473px) and (min-width: 1151px) {
  .staff03 {
    right: -46px;
  }
}

@-webkit-keyframes yurayura {
  0%,
  100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

@keyframes yurayura {
  0%,
  100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

@media screen and (max-width: 1600px) and (min-width: 1151px) {
  .recruitVoice__staff1 {
    width: calc(147 / 1600 * 100vw);
    bottom: calc(40 / 1600 * 100vw);
    left: calc(125 / 1600 * 100vw);
  }
}

.recruitVoice__staff2 {
  bottom: 0;
  left: 401px;
  opacity: 0;
  transition: .3s ease-in-out 0.6s;
}

.recruitVoice__staff2 .recruitVoice__staffImginner {
  top: 0;
}

.view .recruitVoice__staff2 {
  opacity: 1;
  transition: .3s ease-in-out 0.6s;
}

.staff04 {
  position: relative;
  top: 58px;
  left: -19px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.staff06 {
  position: relative;
  top: 113px;
  right: -99px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

@media screen and (max-width: 1473px) and (min-width: 1151px) {
  .staff06 {
    right: -50px;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1151px) {
  .recruitVoice__staff2 {
    width: calc(198 / 1600 * 100vw);
    bottom: calc(17 / 1600 * 100vw);
    left: calc(401 / 1600 * 100vw);
  }
  .recruitVoice__staff2 .recruitVoice__staffImg {
    max-width: calc(198 / 1600 * 100vw);
  }
}

.recruitVoice__staff3 {
  bottom: 74px;
  left: -2px;
  opacity: 0;
  transition: .3s ease-in-out 1.0s;
}

.recruitVoice__staff3 .recruitVoice__staffImginner {
  top: 0;
  right: 0;
}

.view .recruitVoice__staff3 {
  opacity: 1;
  transition: .3s ease-in-out 1.0s;
}

.staff07 {
  position: relative;
  top: 123px;
  left: -80px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

@media screen and (max-width: 1473px) and (min-width: 1151px) {
  .staff07 {
    left: -27px;
    top: 100px;
  }
}

.staff09 {
  position: relative;
  right: 42px;
  top: -20px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

@media screen and (max-width: 1473px) and (min-width: 1151px) {
  .staff09 {
    right: 8px;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1151px) {
  .recruitVoice__staff3 {
    width: calc(752 / 1600 * 100vw);
    bottom: calc(110 / 1600 * 100vw);
  }
}

@media screen and (max-width: 1600px) and (min-width: 1472px) {
  .recruitVoice__staff3 {
    left: calc(61 / 1600 * 100vw);
  }
}

@media screen and (max-width: 1473px) and (min-width: 1151px) {
  .recruitVoice__staff3 {
    bottom: calc(104 / 1473 * 100vw);
    left: calc(122 / 2400 * 80vw);
  }
}

.recruitVoice__staff4 {
  top: 130px;
  left: 381px;
  opacity: 0;
  transition: .3s ease-in-out 1.2s;
}

.recruitVoice__staff4 .recruitVoice__staffImginner {
  top: 0;
}

@media screen and (max-width: 978px) {
  .recruitVoice__staff4 {
    top: calc(130 / 978 * 100vw);
    left: calc(381 / 978 * 100vw);
  }
  .recruitVoice__staff4 .recruitVoice__staffImg {
    max-width: calc(173 / 978 * 100vw);
  }
}

.view .recruitVoice__staff4 {
  opacity: 1;
  transition: .3s ease-in-out 1.2s;
}

.staff10 {
  position: relative;
  top: 70px;
  left: 12px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.staff12 {
  position: relative;
  right: -87px;
  top: -25px;
  transform-origin: center bottom;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

@media screen and (max-width: 1600px) and (min-width: 1151px) {
  .recruitVoice__staff4 {
    width: calc(173 / 1600 * 100vw);
    top: calc(130 / 1600 * 100vw);
    left: calc(381 / 1600 * 100vw);
  }
}

.home-About {
  padding-top: 100px;
}

.home-About__archiveInner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 170px;
}

.home-About-title {
  margin-bottom: 70px;
}

.home-Company__data ._weblink, .home-Company__data ._graphiclink {
  transition: 0.6s;
}

.home-Company__data ._weblink:hover, .home-Company__data ._graphiclink:hover {
  opacity: 0.5;
  transition: 0.6s;
  background-color: #333;
}

.about-Adress__inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 140px 0 100px;
}

.home-Topics {
  padding-top: 100px;
}

.home-Topics__archiveInner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 170px;
}

.home-Topics-title {
  margin-bottom: 70px;
}

.home-Topics__items {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}

.archive-Topics-articles-Item {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
  max-width: 470px;
}

.archive-Topics-articles-Item:nth-of-type(3n) {
  margin-right: 0;
}

@media screen and (max-width: 1040px) {
  .archive-Topics-articles-Item {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }
  .archive-Topics-articles-Item:nth-of-type(2n) {
    margin-right: 0;
  }
  .archive-Topics-articles-Item:nth-of-type(3n) {
    margin-right: auto;
  }
}

@media screen and (max-width: 620px) {
  .archive-Topics-articles-Item {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .archive-Topics-articles-Item:nth-of-type(2n) {
    margin-right: auto;
  }
  .archive-items {
    display: block;
  }
}

.home-Works__archiveInner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 170px;
}

.home-Works-title {
  margin-bottom: 70px;
}

.home-Works-filters {
  margin-top: -10px;
}

.home-Works-archiveBox {
  max-width: 1200px;
  width: 100%;
}

.home-Works-archiveBox .archive-items {
  justify-content: flex-start;
}

.home-Works-archiveBox .home-Works__item {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
}

.home-Works-archiveBox .home-Works__item:nth-of-type(3n) {
  margin-right: 0;
}

.home-Works-archiveBox .home-Works__image {
  height: 272px;
}

.home-Works-archiveBox .home-Works__image img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.home-Works-archiveBox .home-Works__text {
  padding: 30px;
  min-height: 200px;
  height: auto;
}

.home-Works-archiveBox .home-Works__text ._atitle {
  line-height: 1.5;
  font-size: 1.8rem;
  margin-top: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.home-Works-archive [data-scroll="item"]:nth-child(3n) {
  transition-delay: .1s;
}

@media screen and (max-width: 1140px) {
  .home-Works-archiveBox .home-Works__item {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }
  .home-Works-archiveBox .home-Works__item:nth-of-type(2n) {
    margin-right: 0;
  }
  .home-Works-archiveBox .home-Works__item:nth-of-type(3n) {
    margin-right: auto;
  }
}

@media screen and (max-width: 830px) {
  .home-Works-archiveBox .home-Works__item {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .home-Works-archiveBox .home-Works__item:nth-of-type(2n) {
    margin-right: auto;
  }
  .home-Works-archiveBox .archive-items {
    display: block;
  }
}

.contact-SectionEntry .General__title {
  margin-bottom: 70px;
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .contact-SectionEntry {
    width: calc(100% - 170px);
  }
}

.contact-SectionEntry__formRows ._formRow input, .contact-SectionEntry__formRows ._formRow textarea, .contact-SectionEntry__formRows ._formRow select {
  font-size: 1.6rem;
}

@media screen and (min-width: 680px) and (max-width: 805px) {
  .contact-SectionEntry__formRows ._formRow ._long-type3, .contact-SectionEntry__formRows ._formRow ._long-textarea {
    width: 330px;
  }
}

.contact-SectionEntry__formRows ._formRow div {
  width: 100%;
}

.contact-SectionEntry__formRows .__address {
  margin-bottom: 0.5em;
}

.contact-SectionEntry__formRows .mwform-zip-field .p-postal-code {
  display: inline-block;
}

.contact-SectionEntry__formRows ._formRow div :last-child {
  margin-bottom: 0;
}

.page-Contact__policy > ._content > ._subTitle {
  margin-bottom: 0.8em;
}

.page-Contact__policy > ._content > p {
  margin-bottom: 2em;
}

.page-Contact__policy > ._content :last-child {
  margin-bottom: 1em;
}

.contact-SectionEntry__formRows ._formRow ._label {
  width: 290px;
}

.contact-SectionEntry__formRows #form_file {
  display: inline-block;
}

.contact-SectionEntry__formRows ._filetext {
  display: block;
  margin-top: 0.5em;
}

@media screen and (min-width: 680px) and (max-width: 805px) {
  .contact-SectionEntry__formRows #form_file {
    max-width: 307px;
  }
}

@media screen and (max-width: 680px) {
  .contact-SectionEntry__formRows #form_file {
    width: 100%;
    max-width: 270px;
    font-size: 1.4rem;
  }
}

.voice_inner {
  right: 0;
}

.recruitVoice__innerBox {
  display: grid;
  grid-template-columns: minmax(892px, 25%) 1fr;
}

.recruitVoice__imageWrap {
  position: relative;
  left: -24px;
}

.recruitVoice__mainImage {
  min-width: 930px;
}

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

@media screen and (max-width: 1320px) {
  .recruitVoice__mainImage {
    min-width: 730px;
  }
}

@media screen and (max-width: 1150px) {
  .recruitVoice__mainImage {
    max-width: 932px;
    min-width: auto;
  }
}

.recruitVoice__subImage {
  position: absolute;
  top: 0;
  left: 0;
}

.recruitVoice__subImage .staff1 {
  position: relative;
}

.recruitVoice__subImage .staff1 ._img01 {
  position: absolute;
  left: 74px;
  bottom: -693px;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.recruitVoice__subImage .staff1 ._img02 {
  position: absolute;
  left: 245px;
  bottom: -638px;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

.recruitVoice__subImage .staff2 {
  position: relative;
}

.recruitVoice__subImage .staff2 ._img03 {
  position: absolute;
  left: 380px;
  bottom: -647px;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.recruitVoice__subImage .staff2 ._img04 {
  position: absolute;
  left: 566px;
  bottom: -691px;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

.recruitVoice__subImage .staff3 {
  position: relative;
}

.recruitVoice__subImage .staff3 ._img05 {
  position: absolute;
  left: 639px;
  bottom: -614px;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.recruitVoice__subImage .staff3 ._img06 {
  position: absolute;
  left: 756px;
  bottom: -439px;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

.recruitVoice__subImage .staff4 {
  position: relative;
}

.recruitVoice__subImage .staff4 ._img07 {
  position: absolute;
  left: 386px;
  bottom: -338px;
  -webkit-animation: yurayura 2s linear infinite;
          animation: yurayura 2s linear infinite;
}

.recruitVoice__subImage .staff4 ._img08 {
  position: absolute;
  left: 511px;
  bottom: -219px;
  -webkit-animation: yurayura 3s linear infinite;
          animation: yurayura 3s linear infinite;
}

@media screen and (min-width: 1150px) and (max-width: 1320px) {
  .recruitVoice__subImage .staff1 ._img01 {
    left: 44px;
    bottom: -543px;
  }
  .recruitVoice__subImage .staff1 ._img02 {
    left: 192px;
    bottom: -501px;
  }
  .recruitVoice__subImage .staff2 ._img03 {
    left: 276px;
    bottom: -519px;
  }
  .recruitVoice__subImage .staff2 ._img04 {
    left: 448px;
    bottom: -546px;
  }
  .recruitVoice__subImage .staff3 ._img05 {
    left: 489px;
    bottom: -487px;
  }
  .recruitVoice__subImage .staff3 ._img06 {
    left: 599px;
    bottom: -345px;
  }
  .recruitVoice__subImage .staff4 ._img07 {
    left: 297px;
    bottom: -260px;
  }
  .recruitVoice__subImage .staff4 ._img08 {
    left: 392px;
    bottom: -168px;
  }
}

@media screen and (max-width: 980px) {
  .recruitVoice__subImage img {
    max-width: 6vw;
  }
  .recruitVoice__subImage .staff1 ._img01 {
    left: calc(74 / 968 * 100vw);
    bottom: calc(-690 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff1 ._img02 {
    left: calc(245 / 968 * 100vw);
    bottom: calc(-635 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff2 ._img03 {
    left: calc(370 / 968 * 100vw);
    bottom: calc(-644 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff2 ._img04 {
    left: calc(566 / 968 * 100vw);
    bottom: calc(-688 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff3 ._img05 {
    left: calc(639 / 968 * 100vw);
    bottom: calc(-611 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff3 ._img05 img {
    min-width: 50px;
  }
  .recruitVoice__subImage .staff3 ._img06 {
    left: calc(756 / 968 * 100vw);
    bottom: calc(-436 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff4 ._img07 {
    left: calc(376 / 968 * 100vw);
    bottom: calc(-335 / 968 * 100vw);
  }
  .recruitVoice__subImage .staff4 ._img08 {
    left: calc(511 / 968 * 100vw);
    bottom: calc(-216 / 968 * 100vw);
  }
}

@media screen and (max-width: 600px) {
  .recruitVoice__subImage img {
    max-width: 5vw;
  }
  .recruitVoice__subImage .staff3 ._img05 img {
    min-width: 40px;
  }
}

@media screen and (max-width: 560px) {
  .recruitVoice__subImage {
    left: 3%;
    top: 1%;
  }
  .recruitVoice__subImage .staff1 ._img01 {
    left: calc(60 / 968 * 100vw);
  }
}

@keyframes yurayura {
  0%,
  100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

.recruitTop-main {
  position: relative;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100%;
}

.recruitTop-mainImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1000px;
  height: 960px;
  width: 100%;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.recruitTop-mainImg img {
  background-image: url(../img/recruit/recruit_top.jpg);
  display: block;
  width: 100%;
}

@media screen and (min-width: 960px) {
  .main-animation img {
    -webkit-animation: recruitimg 2s 0.1s forwards;
            animation: recruitimg 2s 0.1s forwards;
  }
}

@media screen and (max-width: 680px) {
  .recruitTop-mainImg {
    top: 40%;
  }
}

@keyframes recruitimg {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

a:hover #recruit-Contact {
  opacity: 1;
  transition: 1s;
}

.recruitMessage__inner {
  position: relative;
}

.recruitMessage__inner ._item {
  position: absolute;
  top: 0;
  left: 0;
}

.recruitMessage__inner ._img._pc {
  display: block;
}

.recruitMessage__inner ._pc .message {
  position: absolute;
}

.recruitMessage__inner .phone {
  position: relative;
  top: 150px;
  left: 114px;
  transform-origin: center bottom;
  -webkit-animation: messegeyurayura 2s linear infinite;
          animation: messegeyurayura 2s linear infinite;
  opacity: 0;
  transition: .3s ease-in-out 0.6s;
}

.recruitMessage__inner .card {
  position: relative;
  top: 123px;
  left: 320px;
  transform-origin: center bottom;
  -webkit-animation: messegeyurayura 3s linear infinite;
          animation: messegeyurayura 3s linear infinite;
  opacity: 0;
  transition: .3s ease-in-out 0.8s;
}

.recruitMessage__inner .flyer {
  position: relative;
  top: 375px;
  left: 35px;
  transform-origin: center bottom;
  -webkit-animation: messegeyurayura 3s linear infinite;
          animation: messegeyurayura 3s linear infinite;
  opacity: 0;
  transition: .3s ease-in-out 0.8s;
}

.recruitMessage__inner .computer {
  position: relative;
  top: 373px;
  left: 308px;
  transform-origin: center bottom;
  -webkit-animation: messegeyurayura 2s linear infinite;
          animation: messegeyurayura 2s linear infinite;
  opacity: 0;
  transition: .3s ease-in-out 0.6s;
}

@-webkit-keyframes messegeyurayura {
  0%,
  100% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
}

@keyframes messegeyurayura {
  0%,
  100% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
}

.view.recruitMessage__inner ._img._pc {
  opacity: 1;
  transition: .3s ease-in-out 0.2s;
}

.view.recruitMessage__inner .phone {
  opacity: 1;
  transition: .3s ease-in-out 0.6s;
}

.view.recruitMessage__inner .card {
  opacity: 1;
  transition: .3s ease-in-out 0.8s;
}

.view.recruitMessage__inner .flyer {
  opacity: 1;
  transition: .3s ease-in-out 0.8s;
}

.view.recruitMessage__inner .computer {
  opacity: 1;
  transition: .3s ease-in-out 0.6s;
}

.is-fadein .message {
  width: 280px;
  height: auto;
  top: 98px;
  left: 6px;
  transform: rotate(-32deg);
  -webkit-animation-name: messageleft;
          animation-name: messageleft;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is-fadein .phone {
  top: 146px;
  left: 119px;
  -webkit-animation-name: messageleft;
          animation-name: messageleft;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is-fadein .card {
  top: 123px;
  right: 78px;
  -webkit-animation-name: messageright;
          animation-name: messageright;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is-fadein .flyer {
  bottom: 112px;
  left: 33px;
  -webkit-animation-name: messageleft;
          animation-name: messageleft;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is-fadein .computer {
  bottom: 134px;
  right: 38px;
  -webkit-animation-name: messageright;
          animation-name: messageright;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes messageright {
  from {
    opacity: 0;
    transform: rotate(-45deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes messageright {
  from {
    opacity: 0;
    transform: rotate(-45deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes messageleft {
  from {
    opacity: 0;
    transform: rotate(45deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes messageleft {
  from {
    opacity: 0;
    transform: rotate(45deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 1140px) {
  .recruitMessage__inner:nth-of-type(2) {
    position: static;
  }
  .recruitMessage__inner ._title {
    margin-top: 0;
  }
  .recruitMessage__inner .message {
    left: 26%;
    top: 102px;
  }
  .recruitMessage__inner .phone {
    top: 147px;
    left: 80px;
  }
  .recruitMessage__inner .card {
    right: 30%;
  }
  .recruitMessage__inner .flyer {
    bottom: 72px;
    left: 23%;
  }
  .recruitMessage__inner .computer {
    right: 25%;
    bottom: 100px;
  }
}

@media screen and (max-width: 490px) {
  .recruitMessage__inner .message {
    width: calc(116 / 450 * 100vw);
    left: calc(35 / 490 * 100vw);
    top: calc(102 / 490 * 100vw);
  }
  .recruitMessage__inner .phone {
    width: calc(116 / 450 * 100vw);
    top: calc(147 / 490 * 100vw);
    left: calc(59 / 490 * 100vw);
  }
  .recruitMessage__inner .card {
    width: calc(102 / 450 * 100vw);
    left: calc(320 / 450 * 100vw);
    top: calc(123 / 450 * 100vw);
  }
  .recruitMessage__inner .flyer {
    width: calc(172 / 450 * 100vw);
    top: calc(375 / 490 * 100vw);
    left: 23%;
  }
  .recruitMessage__inner .computer {
    width: calc(158 / 450 * 100vw);
    left: calc(285 / 490 * 100vw);
    top: calc(373 / 490 * 100vw);
  }
}

@media screen and (min-width: 680px) {
  .l-Copyright.recruit {
    top: calc((100vh - 313px) / 2);
    transform: rotate(-180deg);
  }
}

@media screen and (min-width: 680px) and (max-width: 1099px) {
  .l-Copyright.recruit {
    left: 40px;
  }
}

.and-Recruit_entry .entryInner:hover {
  opacity: 1;
}

.recruitMessage.recruitWrap {
  max-width: 1000px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 1190px) {
  .recruitMessage.recruitWrap {
    flex-direction: column-reverse;
    display: flex;
  }
  .recruitMessage.recruitWrap .imgbox {
    max-width: 450px;
    margin: 0px auto 50px;
    position: relative;
  }
}

@media screen and (min-width: 1040px) and (max-width: 1190px) {
  .recruitMessage.recruitWrap {
    max-width: calc(100% - 190px);
  }
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .recruitMessage.recruitWrap {
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: 0;
  }
}

@media screen and (max-width: 679px) {
  .recruitMessage.recruitWrap {
    max-width: calc(100% - 8%);
  }
}

.recruitVoice__inner.recruitWrap {
  max-width: 1000px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 1040px) and (max-width: 1190px) {
  .recruitVoice__inner.recruitWrap {
    max-width: calc(100% - 190px);
  }
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .recruitVoice__inner.recruitWrap {
    max-width: calc(100% - 170px);
  }
}

@media screen and (max-width: 679px) {
  .recruitVoice__inner.recruitWrap {
    max-width: calc(100% - 8%);
  }
}

.Recruit_information.recruitWrap {
  max-width: 1000px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 1040px) and (max-width: 1190px) {
  .Recruit_information.recruitWrap {
    max-width: calc(100% - 190px);
  }
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .Recruit_information.recruitWrap {
    max-width: calc(100% - 170px);
  }
}

@media screen and (max-width: 679px) {
  .Recruit_information.recruitWrap {
    max-width: calc(100% - 8%);
  }
}

@media screen and (min-width: 1040px) and (max-width: 1190px) {
  .and-Recruit_entry.recruitWrap {
    max-width: calc(100% - 190px);
  }
}

@media screen and (min-width: 680px) and (max-width: 1039px) {
  .and-Recruit_entry.recruitWrap {
    max-width: calc(100% - 170px);
  }
}

@media screen and (max-width: 679px) {
  .and-Recruit_entry.recruitWrap {
    max-width: calc(100% - 8%);
    padding: 0;
  }
}

#entry .entryInner {
  transition: all .1s ease-in;
  padding: 4px;
}

#entry .entryInner .__title {
  transition: all .2s ease-in;
}

#entry .entryInner:hover {
  transition: all .1s ease-in;
  padding: 0;
  border: 5px solid;
  -o-border-image: linear-gradient(to right, #fabd27 0%, #f68b1e 20%, #df3f89 60%, #97339a, #51bee4 100%);
     border-image: linear-gradient(to right, #fabd27 0%, #f68b1e 20%, #df3f89 60%, #97339a, #51bee4 100%);
  border-image-slice: 1;
}

#entry .entryInner:hover .__title {
  color: #FF8C00;
  background: -webkit-linear-gradient(0deg, #fabd27, #f68b1e, #df3f89, #97339a, #51bee4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all .2s ease-in;
}

.single-Topics {
  overflow: hidden;
}

.single-Topics-wrap {
  margin-top: 100px;
  padding-top: 30px;
}

.single-Topics-wrap .General__title {
  line-height: 0.7;
}

.single-Topics-wrapTitle {
  margin-bottom: 80px;
}

.General__title {
  font-family: 'Alata', sans-serif;
  font-size: 2.6rem;
  letter-spacing: 0.1em;
}

.single-Topics__text {
  margin-bottom: 80px;
}

.single-Topics__text ._flex {
  display: flex;
  align-items: center;
}

.single-Topics__text ._date {
  font-size: 14px;
  margin-right: 10px;
  font-weight: 600;
  margin-bottom: 0;
  letter-spacing: 0.05em;
  line-height: 1;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic,
 "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
 "Segoe UI",
 "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
 sans-serif;
}

.single-Topics__text ._category {
  height: 35px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 22.5px;
  padding: 2px 29px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.single-Topics__text ._text {
  margin-top: 30px;
  font-size: 26px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  font-weight: 600;
}

.single-Topics__image {
  max-width: 800px;
  width: 100%;
  max-height: 483px;
}

.home-Topics__back {
  margin-top: 80px;
  margin-bottom: 200px;
}

.home-Topics__back ._archiveBack {
  width: 180px;
  height: 45px;
  background-color: #333333;
  color: #fff;
  border-radius: 22.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: all .2s ease-in;
}

.single-Topics-articlesWrap {
  padding: 0 0 100px;
  margin-bottom: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.singele-Topics-articles-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.singele-Topics-articles-title ._articlestitle {
  font-size: 26px;
  letter-spacing: 0.1em;
  font-family: 'Alata', sans-serif;
  line-height: 0.72;
}

.singele-Topics-articles-title ._border {
  height: 1px;
  max-width: calc(100% - 195px - 30px);
  width: 100%;
  background-color: #333;
  display: inline-block;
}

.single-Topics-articlesWrap .home-Topics {
  padding-top: 0;
}

.single-Topics-articles-Items {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.single-Topics-articles-Item {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
  max-width: 470px;
}

.single-Topics-articles-Item:nth-of-type(3n) {
  margin-right: 0;
}

.single-Topics-articles-Item a {
  text-decoration: none;
}

.home-Topics-articles-img {
  height: 272px;
  max-height: 337px;
}

.home-Topics-articles-img img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.home-Topics-articles-img {
  display: flex;
  align-items: end;
  height: auto;
}

.home-Topics-articles-img img {
  height: auto;
}

@media screen and (max-width: 490px) {
  .home-Topics-articles-img {
    display: flex;
    align-items: end;
    height: auto;
  }
  .home-Topics-articles-img img {
    height: auto;
  }
}

.home-Topics-articles-text {
  padding: 25px;
  background-color: #fff;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15) inset;
  max-height: 200px;
  height: auto;
  margin: 0 auto;
}

.home-Topics-articles-text ._category {
  font-size: 12px;
  padding: 2px 29px;
  margin-right: 10px;
}

.home-Topics-articles-text ._text {
  margin-bottom: 40px;
}

@media screen and (max-width: 950px) {
  .single-Topics-articlesWrap .single-Topics-articles-Item {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }
  .single-Topics-articlesWrap .single-Topics-articles-Item:nth-of-type(2n) {
    margin-right: 0;
  }
  .single-Topics-articlesWrap .single-Topics-articles-Item:nth-of-type(3n) {
    margin-right: auto;
  }
}

@media screen and (max-width: 740px) {
  .single-Topics-articlesWrap .single-Topics-articles-Item {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .single-Topics-articlesWrap .single-Topics-articles-Item:nth-of-type(2n) {
    margin-right: auto;
  }
  .single-Topics-articlesWrap .single-Topics-articles-Items {
    display: block;
  }
}

.zoomOutText span.cap {
  opacity: 0;
  transition: .5s ease-in-out;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  line-height: 1.5;
}

.zoomOutText:hover span.mask::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.single-Works-wrap {
  margin-top: 100px;
  padding-top: 30px;
}

.single-Works-wrap .General__title {
  line-height: 0.7;
}

.single-Works-wrapTitle {
  margin-bottom: 80px;
}

.General__title {
  font-family: 'Alata', sans-serif;
  font-size: 2.6rem;
  letter-spacing: 0.1em;
}

.Works ._worksflex {
  display: flex;
  align-items: flex-end;
}

.Works ._workslink {
  font-size: 11px;
  margin-left: 20px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic,
 "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
 "Segoe UI",
 "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
 sans-serif;
  transition: all .2s ease-in;
  margin-bottom: 7px;
}

.Works ._workslink:hover {
  background-color: #333;
  color: #fff;
  transition: all .2s ease-in;
}

.Works ._web-graphic {
  height: 35px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 22.5px;
  padding: 2px 29px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.Works ._kind {
  height: 35px;
  color: #333;
  border: 1px solid #333;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 22.5px;
  padding: 2px 29px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin-top: 10px;
}

.Works ._ctitle {
  line-height: 1.5;
  margin-top: 15px;
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.Works ._name {
  margin-left: 30px;
}

.Works a:hover, .Works a :active {
  text-decoration: none;
}

.single-Works__text ._title {
  font-size: 2.4rem;
}

@media screen and (max-width: 400px) {
  .Works ._worksflex {
    display: block;
  }
  .Works ._workslink {
    margin-top: 0;
    position: relative;
    top: -20px;
    margin-left: 0;
    margin-right: 70px;
  }
}

.single-Works-item-image {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 80px;
  align-items: flex-start;
}

.single-Works__image {
  width: 750px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-Works__image ._img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: auto;
}

.single-Works-itemsideber {
  position: relative;
  width: 380px;
  background-color: #ffffff;
  padding: 30px 30px 40px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15) inset;
}

.single-Works-itemsideber ._taste {
  font-size: 11px;
  letter-spacing: 0.1em;
  min-width: 100px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 29px;
  border-radius: 20px;
  border: 1px solid #666666;
  margin-right: 10px;
}

.single-Works-itemsideber ._comment {
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-top: 20px;
}

.single-Works-itemsideber ._link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto 0;
  width: 200px;
  height: 40px;
  font-size: 12px;
  letter-spacing: 0.1em;
  background-color: #333;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-in;
  position: relative;
}

.single-Works-itemsideber ._link:before {
  content: '';
  position: absolute;
  border-radius: 20px;
  background-color: white;
  transform: scaleX(0);
  width: 200px;
  height: 40px;
  display: inline-block;
  top: 0;
  transition: .6s;
  transform-origin: left center;
}

.single-Works-itemsideber ._link::after {
  content: "";
  background-image: url(../img/new-window.svg);
  background-repeat: no-repeat;
  height: 12px;
  width: 12px;
  margin-left: 5px;
}

.single-Works-itemsideber ._link:hover {
  text-decoration: none;
  background-color: transparent;
  color: #333;
  transition: all .6s ease-in;
  border: 1px solid #333;
}

.single-Works-itemsideber ._link:hover:before {
  background-color: transparent;
  transition: .6s;
  transform: scaleX(100%);
}

.single-Works-itemsideber ._link:hover::after {
  content: "";
  background-image: url(../img/new-window02.svg);
  background-repeat: no-repeat;
  height: 12px;
  width: 12px;
  margin-left: 5px;
}

.single-Works-itemsideber ._newWindow {
  height: 12px;
  margin-left: 5px;
}

.home__back {
  margin-top: 100px;
  margin-bottom: 200px;
}

.home__back ._archiveBack {
  width: 180px;
  height: 45px;
  background-color: #333333;
  color: #fff;
  border-radius: 22.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: all .2s ease-in;
}

.home__back ._archiveBack:hover {
  text-decoration: none;
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  transition: all .2s ease-in;
}

.stiky {
  width: 380px;
}

.single-Works-itemsideber {
  position: -webkit-sticky;
  position: sticky;
  top: 160px;
}

@media screen and (max-width: 1279px) {
  .single-Works-item {
    margin: 0 auto;
  }
  .single-Works__image {
    max-width: 400px;
    width: 100%;
    margin-right: 40px;
  }
}

@media screen and (max-width: 959px) {
  .single-Works__image {
    width: calc(100vw - 8% - 40px - 265px);
  }
  .single-Works-itemsideber {
    width: 260px;
  }
}

@media screen and (max-width: 832px) {
  .single-Works-item-image {
    display: block;
  }
  .stiky {
    height: auto;
    width: 100%;
  }
  .single-Works-itemsideber {
    position: static;
  }
  .single-Works__image {
    width: 100%;
    margin: auto;
  }
  .single-Works-itemsideber {
    max-width: 400px;
    width: 100%;
    margin: 40px auto 0;
  }
}

@media screen and (max-width: 679px) {
  .home-Service__text ._content {
    width: calc(100% - 30px);
  }
  ._tags {
    width: calc(100% - 10px);
  }
}

.home-Topics__section {
  margin-bottom: 200px;
}

.home-Topics__inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.home-Topics__text ._caption {
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.home-Topics__text ._title {
  font-size: 8rem;
  letter-spacing: 0;
  line-height: 1;
  padding-bottom: 0.5em;
}

.home-Topics__items {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.home-Topics__item {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
  max-width: 470px;
}

.home-Topics__item:nth-of-type(3n) {
  margin-right: 0;
}

.home-Topics__item a {
  text-decoration: none;
}

@media screen and (max-width: 1021px) {
  .home-Topics__item {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }
  .home-Topics__item:nth-of-type(2n) {
    margin-right: 0;
  }
  .home-Topics__item:nth-of-type(3n) {
    margin-right: auto;
  }
}

@media screen and (max-width: 740px) {
  .home-Topics__item {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .home-Topics__item:nth-of-type(2n) {
    margin-right: auto;
  }
  .single-Topics-articles-Items {
    display: block;
  }
}

.home-Topics__img {
  width: 100%;
}

.home-Topics__img img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.home-Topics__itemtext {
  padding: 25px;
  background-color: #fff;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15) inset;
  max-height: 165px;
  padding-bottom: 46px;
  margin: 0 auto;
}

.home-Topics ._topicsflex {
  display: flex;
  align-items: flex-end;
}

.home-Topics ._kind {
  height: 35px;
  color: #333;
  border: 1px solid #333;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 22.5px;
  padding: 2px 29px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin-top: 10px;
}

.home-Topics ._topicslink {
  font-size: 11px;
  margin-left: 20px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic,
 "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
 "Segoe UI",
 "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
 sans-serif;
  transition: all .2s ease-in;
  margin-bottom: 7px;
}

.home-Topics ._topicslink:hover {
  background-color: #333;
  color: #fff;
  transition: all .2s ease-in;
}

.home-Topics ._flex {
  display: flex;
  align-items: center;
}

.home-Topics ._date {
  font-size: 12px;
  margin-right: 10px;
  font-weight: 600;
  margin-bottom: 0;
  letter-spacing: 0.05em;
}

.home-Topics ._category {
  font-size: 11px;
  height: 35px;
  background-color: #333;
  color: #fff;
  letter-spacing: 0.05em;
  border-radius: 22.5px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 8px 27px;
}

.home-Topics ._text {
  margin-top: 15px;
  font-size: 14px;
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
}

@media screen and (max-width: 400px) {
  .home-Topics ._topicsflex {
    display: block;
  }
  .home-Topics ._topicsflex ._topicslink {
    margin-top: 0;
    position: relative;
    top: -20px;
    margin-left: 0;
    margin-right: 50px;
  }
}

@media screen and (max-width: 900px) {
  .home-Works .home-Works__items {
    justify-content: center;
  }
  .home-Works .home-Works__item {
    width: 100%;
  }
}

.home-Works__itemsTitle h3 {
  font-size: 2.4rem;
}

.home-Works__text {
  min-height: 230px;
}

@media screen and (max-width: 669px) {
  .home-Works__text {
    padding: 40px;
  }
}

.home-Works__button {
  width: 100%;
  max-width: 200px;
  height: 40vw;
  max-height: 80px;
  z-index: 89;
  color: #fff;
  background-color: #333;
}

.home-Works__button ._button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  line-height: 1;
  white-space: nowrap;
  transition: all .2s ease-in;
  border: 1px solid transparent;
  text-decoration: none;
}

.home-Works__button ._button:hover {
  color: #333;
  background-color: #fff;
  border: 1px solid #333;
}

.home-Works__image {
  max-height: 337px;
}

.zoomOutText.workshover span.mask {
  max-width: 100%;
}