/* t-office
---------------------------------------------------------------- */
.t-office__item-wrap {
  margin-top: 10rem;
  counter-reset: num; }
  @media screen and (max-width: 768px) {
    .t-office__item-wrap {
      margin-top: 5rem; } }

.t-office__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative; }
  @media screen and (max-width: 768px) {
    .t-office__item {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      display: block; } }
  .t-office__item + .t-office__item {
    margin-top: 6.4rem; }
    @media screen and (max-width: 768px) {
      .t-office__item + .t-office__item {
        margin-top: 4.7rem; } }
  .t-office__item:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
    @media screen and (max-width: 768px) {
      .t-office__item:nth-of-type(even) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; } }

.t-office__item__body {
  width: 422px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f77006;
  position: absolute;
  right: 8%;
  bottom: 6rem;
  padding: 5rem; }
  @media screen and (max-width: 1020px) {
    .t-office__item__body {
      right: 0;
      bottom: 0;
      padding: 3rem; } }
  @media screen and (max-width: 768px) {
    .t-office__item__body {
      width: 100%;
      padding: 0;
      margin-top: 2.4rem;
      right: auto;
      left: 0;
      bottom: -6rem;
      position: static;
      margin: 0;
      background: none;
      padding-top: 2.4rem; } }

.t-office__item:nth-child(even) .t-office__item__body {
  right: auto;
  left: 8%; }
  @media screen and (max-width: 1020px) {
    .t-office__item:nth-child(even) .t-office__item__body {
      right: auto;
      left: 0;
      bottom: 0; } }
  @media screen and (max-width: 768px) {
    .t-office__item:nth-child(even) .t-office__item__body {
      left: auto;
      right: 0; } }

.t-office__item__body * {
  color: #fff; }

@media screen and (max-width: 768px) {
  .t-office__item__body .c-heading-m2 {
    color: #333; } }

@media screen and (max-width: 768px) {
  .t-office__item__body .c-heading-m2 .c-heading-m2__ja {
    color: #f77006; } }

.t-office__item__body .c-txt02 {
  font-size: 1.3rem;
  line-height: 2;
  text-align: justify;
  color: #fff; }
  @media screen and (max-width: 768px) {
    .t-office__item__body .c-txt02 {
      color: #555;
      font-size: 1.2rem;
      line-height: 1.8; } }

.t-office__item__body svg {
  width: 30%;
  height: 7.3rem;
  position: absolute;
  display: block;
  top: 3rem;
  right: 3rem;
  fill: none;
  opacity: .4;
  stroke: #fff; }

.t-office__item__pict {
  width: 65.85%;
  position: relative;
  left: 7rem; }
  @media screen and (max-width: 1020px) {
    .t-office__item__pict {
      width: 100%; } }
  @media screen and (max-width: 1020px) {
    .t-office__item__pict {
      width: 100%;
      left: 0; } }

.t-office__item:nth-child(even) .t-office__item__pict {
  right: 7rem;
  left: auto; }
  @media screen and (max-width: 1020px) {
    .t-office__item:nth-child(even) .t-office__item__pict {
      right: 0; } }

.t-office__gallery__item a {
  display: block;
  position: relative; }
  .t-office__gallery__item a img {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; }
  .t-office__gallery__item a:hover img {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    opacity: 0.8; }
  .t-office__gallery__item a:hover:before {
    opacity: 1; }
  .t-office__gallery__item a:hover:after {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; }
  .t-office__gallery__item a:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; }
  .t-office__gallery__item a:after {
    content: "";
    display: block;
    width: 6.4rem;
    max-width: 6.4rem;
    width: 22.22%;
    height: 7.3rem;
    background: url(/assets/image/culture/office/icon_modal.png) no-repeat center/contain;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    -ms-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 1000;
    -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform; }