@charset "UTF-8";


/*--------------------------------------------------*/

/* about

/*--------------------------------------------------*/
.about {
  .container {
    max-width: 1200px;
  }
  .b-mdsBox {
    display: flex;
    flex-direction: column-reverse;
    .b-en {
      font-size: min(4.5vw,18px);
      font-family: var(--fontEN);
      font-weight: 800;
      font-style: italic;
      line-height: 1;
      letter-spacing: .05em;
      margin-bottom: 20px;
      span {
        display: inline-block;
        &:nth-child(1) {
          padding-right: 1em;
        }
        &:nth-child(2) {
          padding-left: 1em;
          border-left: 1px solid;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .about {
    .b-mdsBox {
      .b-mds {
        font-size: min(9.5vw,38px);
      }
      .b-en {
        margin-bottom: 20px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .about {
    .b-txts {
      padding: 0 60px 0 30px;
    }
    .b-mdsBox {
      .b-mds {
        font-size: 50px;
        line-height: 1.2;
      }
      .b-en {
        margin-bottom: 40px;
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 950px) {
  .about {
    .container {
      flex-wrap: wrap;
    }
    .b-txts {
      padding: 0;
    }
    .b-mdsBox {
      .b-mds br {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 950px) {
  .about {
    .b-btns {
      text-align: center;
    }
  }
}


/*--------------------------------------------------*/

/* casestudy

/*--------------------------------------------------*/
.casestudy {
  &.b-listItem {
    .container {
      display: flex;
    }
  }
  .b-img {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 545/360;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    color: #fff;
    &::before {
      content: "";
      display: block;
      aspect-ratio: 545/360;
      width: 100%;
      border-radius: 20px;
      position: absolute;
      z-index: -1;
      transform-origin: center center;
    }
    img {
      width: min(25vw,100px);
      margin: auto;
    }
    figcaption {
      font-size: min(5vw,20px);
      line-height: 1.5;
      font-weight: 700;
    }
  }
  &.m-sports {
    .b-img {
      &::before {
        background-color: var(--c-sports);
      }
    }
  }
  &.m-parties {
    .b-img {
      &::before {
        background-color: var(--c-parties);
      }
    }
  }
  &.m-seminar {
    .b-mdsBox {
      color: var(--c-seminar);
    }
    .b-img {
      &::before {
        background-color: var(--c-seminar);
      }
    }
  }
  &.m-project {
    .b-img {
      &::before {
        background-color: var(--c-project);
      }
    }
  }
  &.m-event {
    .b-img {
      &::before {
        background-color: var(--c-event);
      }
    }
  }
  &.m-creative {
    .b-img {
      &::before {
        background-color: var(--c-creative);
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .casestudy {
    &:hover {
      .b-img::before {
        transform: scale(98%);
      }
    }
    &.b-listItem {
      .container {
        align-items: flex-start;
        flex-direction: row-reverse;
      }
    }
    .b-txts {
      margin-left: 50px;
    }
    .b-btns {
      text-align: right;
    }
    .b-img {
      width: 48%;
      min-width: 48%;
      &::before {
        transition: var(--transition)
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 950px) {
  .casestudy {
    .b-txts {
      margin-left: 0;
    }
    .b-mdsBox {
      .b-mds br {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 950px) {
  .casestudy {
    &.b-listItem {
      .container {
        flex-direction: column-reverse;
      }
    }
    .b-btns {
      text-align: center;
    }
    .b-img {
      margin: 0 auto 30px;
    }
  }
}


/*--------------------------------------------------*/

/* works

/*--------------------------------------------------*/

.works {
  &.works {
    padding-top: 0;
    border-top: 0 none;
  }
  &.b-listItem {
    .container {
      display: flex;
    }
  }
  .b-mdsBox {
    .b-mds {
      white-space: normal;
    }
  }
  .b-moreInfo {
    &.m-top {
      margin-top: 0;
    }
  }
  .b-img {
    .inner {
      border: 3px solid;
      border-radius: 20px;
      padding: 15px;
      .e-img {
        aspect-ratio: 5/4;
        overflow: hidden;
        border-radius: 10px;
        background: url(assets/images/thumb-bg.jpg) center center / cover no-repeat;
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  &.m-sports {
    .b-img {
      .inner {
        border-color: var(--c-sports);
      }
    }
  }
  &.m-parties {
    .b-img {
      .inner {
        border-color: var(--c-parties);
      }
    }
  }
  &.m-seminar {
    .b-img{
      .inner  {
        border-color: var(--c-seminar);
      }
    }
  }
  &.m-project {
    .b-img {
      .inner {
        border-color: var(--c-project);
      }
    }
  }
  &.m-event {
    .b-img {
      .inner {
        border-color: var(--c-event);
      }
    }
  }
  &.m-creative {
    .b-img {
      .inner {
        border-color: var(--c-creative);
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .works {
    padding: 30px 0 45px !important;
    border-bottom: 1px solid var(--gray-n);
    .b-btns {
      margin-top: 15px;
    }
  }
}
@media screen and (min-width: 768px) {
  .works {
    &:hover {
      background: none;
    }
    .container {
      flex-direction: row-reverse;
      padding: 20px 30px;
    }
    &:first-of-type {
      .container {
        padding-top:130px;
      }
    }
    .b-txts {
      display: flex;
      flex-direction: column;
      .b-txt {
        font-size: 14px;
      }
    }
    .b-mdsBox {
      .b-mds {
        font-size: 24px;
      }
    }
    .b-moreInfo {
      &.m-bottom {
        margin-top: 45px;
        margin-bottom: 50px;
      }
    }
    .b-btns {
      margin-top: auto;
      align-self: flex-end;
    }
    .b-img {
      width: 48.75%;
      min-width: 48.75%;
      margin-right: 50px;
      .inner {
        transition: var(--transition);
      }
    }
    &.m-sports {
      &:hover {
        .b-img {
          .inner {
            background: var(--c-sports);
          }
        }
      }
    }
    &.m-parties {
      &:hover {
        .b-img {
          .inner {
            background: var(--c-parties);
          }
        }
      }
    }
    &.m-seminar {
      &:hover {
        .b-img {
          .inner {
            background: var(--c-seminar);
          }
        }
      }
    }
    &.m-project {
      &:hover {
        .b-img {
          .inner {
            background: var(--c-project);
          }
        }
      }
    }
    &.m-event {
      &:hover {
        .b-img {
          .inner {
            background: var(--c-event);
          }
        }
      }
    }
    &.m-creative {
      &:hover {
        .b-img {
          .inner {
            background: var(--c-creative);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 950px) {
  .works {
    .container {
      flex-direction: column-reverse;
    }
    .b-btns {
      text-align: center;
      align-self: center;
    }
    .b-img {
      width: 100%;
      min-width: auto;
      max-width: 800px;
      margin: 0 auto 20px;
    }
  }
  
}

/*--------------------------------------------------*/

/* single

/*--------------------------------------------------*/
.b-single {
  
  .b-postTtl {
    display: flex;
    &::before {
      content: "";
      aspect-ratio: 1/1;
      width: 1.875em;
      min-width: 1.875em;
      margin-right: .45em;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  &.m-sports {
    .b-postTtl {
      color: var(--c-sports);
      &::before {
        background-image: url(assets/images/icon-sports.png);
      }
    }
  }
  &.m-sports {
    .b-postTtl {
      color: var(--c-sports);
      &::before {
        background-image: url(assets/images/icon-sports.png);
      }
    }
  }
  &.m-parties {
    .b-postTtl {
      color: var(--c-parties);
      &::before {
        background-image: url(assets/images/icon-parties.png);
      }
    }
  }
  &.m-seminar {
    .b-postTtl {
      color: var(--c-seminar);
      &::before {
        background-image: url(assets/images/icon-seminar.png);
      }
    }
  }
  &.m-event {
    .b-postTtl {
      color: var(--c-event);
      &::before {
        background-image: url(assets/images/icon-event.png);
      }
    }
  }
  &.m-creative {
    .b-postTtl {
      color: var(--c-creative);
      &::before {
        background-image: url(assets/images/icon-creative.png);
      }
    }
  }
  
  .b-postSection {
    margin-top: 50px;
    .e-mds {
      font-size: min(5vw,20px);
      line-height: 1.5;
      margin-bottom: 10px;
    }
    a {
      text-decoration: underline;
    }
    .b-moreInfo {
      margin-top: 10px;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-single {
    padding: 50px 0;
    .b-postTtl {
      margin-bottom: 30px;
      font-size: min(6vw,24px);
    }
  }
}
@media screen and (min-width: 768px) {
  .b-single {
    padding: 100px 0;
    .b-postTtl {
      margin-bottom: 50px;
      font-size: 32px;
    }
    .b-1stBox {
      margin-top: 20px;
    }
  }
}

@media screen and (min-width: 1051px) {
  .b-single {
    &.casestudy,
    &.works {
      .b-content {
        display: flex;
        flex-direction: row;
      }
    }
    .b-1stBox {
      width: 400px;
    }
    .b-2ndBox {
      width: 690px;
      min-width: 690px;
      margin-left: 50px;
    }
  }
}

/* flow -------------------------*/
.b-flow {
  max-width: 500px;
  margin: 40px auto 50px;
  text-align: center;
  dt,li {
    display: block;
  }
  dt {
    background: var(--blue-p);
    padding: 10px;
    margin-bottom: 10px;
  }
  li {
    padding: 20px;
    line-height: 1;
    font-weight: 500;
    &:last-of-type {
      border-bottom: 1px solid var(--key);
      border-left: 1px solid var(--key);
      border-right: 1px solid var(--key);
    }
    &:not(:last-of-type) {
      padding-bottom: 30px;
      position: relative;
      z-index: 1;
      &::before,
      &::after {
        content: "";
        display: block;
        box-sizing: border-box;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0% calc(100% - 20px));
        position: absolute;
      }
      &::before {
        width: 100%;
        height: 100%;
        background: var(--key);
        z-index: 0;
        top: 0;
        left: 0;
        z-index: -1;
      }
      &::after {
        width: calc(100% - 2px);
        height: calc(100% - 1px);
        background: #fff;
        top: 0;
        left: 1px;
        z-index: -1;
      }
    }
    &:first-of-type {
      &::after {
        height: calc(100% - 2px);
        top: 1px;
      }
    }
  }
}

/*--------------------------------------------------*/

/* company

/*--------------------------------------------------*/

.b-companyMain {
  margin-top: -40px;
  padding-top: 40px;
  position: relative;
  z-index: 1;
  &::before {
    content: "";
    display: block;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .b-mdsBox {
    line-height: 1.5;
    .b-mds {
      font-size: min(9.5vw,38px);
    }
    .b-en {
      font-size: min(8vw,32px);
      font-family: var(--fontEN);
      font-weight: 600;
      font-style: italic;
      letter-spacing: .03em;
      color: var(--blue);
      margin-top: .65em;
    }
  }
  .b-message {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    
    .float {
      width: 100%;
      height: 100%;
      float: left;
        
    }
    .b-txts {
      height: 100%;
      margin-top: auto;
      margin-bottom: 0;
      .e-txt {
        height: 100%;
        font-weight: 600;
        
        text-align: right;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-companyMain {
    height: 225vw;
    background: url(assets/images/company-main-bg-sp.jpg) center center / cover;
    &::before {
      aspect-ratio: 40/36;
      width: 100dvw;
    }
    .b-mdsBox {
      padding-top: 60px;
    }
    .b-message {
      height: 90dvw;
      .float {
        shape-outside: polygon(0 0, 100% 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
      }
      .b-txts {
        .e-txt {
          padding: 7em .8em 0;
          font-size: min(3.75vw,15px);
          line-height: 2.2;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-companyMain {
    height: 740px;
    background: url(assets/images/company-main-bg-pc.jpg) center center / cover;
    &::before {
      aspect-ratio: 1/1;
      width: 480px;
    }
    .b-mdsBox {
      padding-top: 60px;
    }
    .b-message {
      height: 480px;
      .float {
        shape-outside: polygon(0 0, 100% 0, calc(100% - 480px) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, calc(100% - 480px) 100%, 0 100%);
      }
      .b-txts {
        .e-txt {
          padding: 170px 30px 0;
          line-height: 2.4;
        }
      }
    }
  }
}

/*--------------------------------------------------*/

/* company

/*--------------------------------------------------*/

.company {
  .b-mdsBox {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 40px;
    .b-mds {
      font-size: min(8vw,32px);
      margin-bottom: 0;
    }
    .b-en {
      font-size: min(4.5vw,18px);
      font-family: var(--fontEN);
      font-weight: 600;
      font-style: italic;
      letter-spacing: .05em;
    }
  }
  
  .b-history {
    .b-item {
      display: flex;
      border-bottom: 1px solid var(--gray-n);
      padding: 20px 0;
    }
    dt {
      font-size: min(4.5vw,18px);
      font-weight: 800;
    }
    .b-subItem {
      margin-top: 1em;
    }
  }
  
  .b-access {
    display: flex;
    .b-item {
      &+.b-item {
        margin-top: 2.5em;
      }
      dt {
        padding: .65em 0 .8em;
        background: var(--blue-p);
        font-size: min(3.5vw,14px);
        text-align: center;
        margin-bottom: 1.2em;
      }
    }
    .b-map {
      aspect-ratio: 76/45;
      width: 100%;
      iframe {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .company {
    &:first-of-type {
      padding-top: 80px;
    }
    .b-table {
      th {
        width: 100px;
      }
    }
    
    .b-history {
      .b-item {
        display: block;
        dt {
          margin-bottom: .5em;
        }
      }
    }
    
    .b-access {
      flex-direction: column-reverse;
      .b-map {
        width: 100dvw;
        margin-left: 50%;
        transform: translateX(-50dvw);
        margin-bottom: 40px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .company {
    &:first-of-type {
      padding-top: 100px;
    }
    .b-mdsBox {
      .b-mds {
        font-size: 38px;
      }
    }
    
    .b-table {
      th {
       width: 300px;
      }
    }
    
    .b-history {
      dt {
        width: 200px;
      }
    }
    
    .b-access {
      flex-direction: row-reverse;
      .b-items {
        width: 340px;
        min-width: 340px;
        margin-left: 40px;
      }
    }
  }
}


/*--------------------------------------------------*/

/* contact

/*--------------------------------------------------*/
.contact {
  .container {
    max-width: 1000px;
  }
  
  .b-step {
    display: flex;
    justify-content: space-between;
    max-width: 640px;
    margin: 0 auto;
    .b-stepItem {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      color: #CCC;
      width: calc( (100% - 40px) / 3);
      height: 123px;
      border-top: 1px solid;
      border-bottom: 1px solid;
      position: relative;
      &::after {
        content: "";
        display: block;
        aspect-ratio: 1/1;
        height: 35%;
        border-top: 1px solid;
        border-right: 1px solid;
        position: absolute;
        right: 0;
        transform-origin: center center;
        transform: translateX(50%) rotate(45deg) skew(25deg,25deg);
      }
      &:first-of-type {
        border-left: 1px solid;
      }
      &:last-of-type {
        border-right: 1px solid;
        &::after {
          display: none;
        }
      }
      .e-num {
        font-family: var(--fontEN);
        font-size: min(8vw,32px);
        font-style: italic;
      }
      .e-txt {
        font-size: min(3.5vw,14px);
      }
      &.current {
        color: var(--key);
        border-color: var(--key);
      }
    }
  }
  
    .e-req,
    .e-any {
      font-size: min(3.5vw,14px);
      font-weight: 500;
      border: 1px solid;
      border-radius: 4px;
      line-height: 1;
      margin-left: .5em;
      padding: .15em .7em .25em;
    }
    .e-req {
      color: var(--blue);
    }
    .e-any {
      color: #999;
    }
  
  .b-item {
    margin-bottom: 50px;
    dt {
      font-size: min(4.5vw,18px);
      font-weight: 600;
      margin-bottom: 10px;
    }
    dd+dd {
      margin-top: 25px;
    }
    &.m-contactItem {
      dt {
        margin-bottom: 30px;
      }
    }
  }
  .b-confirmCheckTxt {
    font-size: min(3.5vw,14px);
    span {
      display: inline-block;
    }
  }
  .b-confirmCheck {
    padding-top: 20px;
    margin-bottom: 0 !important;
    label {
      font-size: min(4vw,16px);
      font-weight: 600;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-mainContent {
    .contact {
      padding-bottom: 100px;
    }
  }
  .contact {
    .b-step {
      margin-bottom: 50px;
    }
    .m-contactItem {
      .smf-label {
        width: 49.5%;
        margin-right: 0;
        margin-bottom: 25px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-mainContent {
    .contact {
      padding-bottom: 120px;
    }
  }
  .contact {
    .b-step {
      margin-bottom: 60px;
    }
  }
}


/*--------------------------------------------------*/

/* recruit

/*--------------------------------------------------*/
@media screen and (min-width: 768px) {
  .sec-recruit.m-introduction {
    .container {
      padding-top: 80px;
      min-height: 300px;
    }
  }
}


/*--------------------------------------------------*/

/* HOME

/*--------------------------------------------------*/

.home {
  &.b-mainContent {
    padding-top: 0;
  }
  .concept {
    height: 100dvh;
  }
  .about {
    position: relative;
    padding-bottom: 120px;
    z-index: 5;
    .b-aboutEn {
      width: 100%;
      font-family: var(--fontEN);
      font-weight: 600;
      font-style: italic;
      line-height: 1;
      color: var(--gray-n);
      position: absolute;
    }
    .container {
      max-width: 1140px;
    }
    .b-ttls {
      .b-mds {
        font-size: min(12.5vw,50px);
        margin-right: 30px;
        font-weight: 800;
        line-height: 1.2;
      }
      .b-txts {
        max-width: 600px;
        font-size: min(3.75vw,15px);
        line-height: 2.2;
        font-weight: 700;
        margin-bottom: 28px;
        padding: 0;
      }
    }
    .b-panels {
      .b-item {
        display: flex;
        font-weight: 800;
        position: relative;
        z-index: 1;
        border-radius: 20px;
        &::before,
        &::after{
          content: "";
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 20px;
        }
        &::before {
          z-index: -1;
          background-size: cover;
          background-position: center center;
        }
        .b-txts {
          span {
            display: block;
          }
        }
        .e-en {
          font-family: var(--fontEN);
          font-weight: 600;
          font-style: italic;
          letter-spacing: .03em;
        }
        .e-txt {
          font-size: min(6vw,24px);
        }
      }
      .m-sports {
        color: var(--c-sports);
        &::before {
          background-image: url(assets/images/top-about-sports.jpg);
        }
      }
      .m-parties {
        color: var(--c-parties);
        &::before {
          background-image: url(assets/images/top-about-parties.jpg);
        }
      }
      .m-seminar {
        color: var(--c-seminar);
        &::before {
          background-image: url(assets/images/top-about-seminar.jpg);
        }
      }
      .m-project {
        color: var(--c-project);
        &::before {
          background-image: url(assets/images/top-about-project.jpg);
        }
      }
      .m-event {
        color: var(--c-event);
        &::before {
          background-image: url(assets/images/top-about-event.jpg);
        }
      }
      .m-creative {
        color: var(--c-creative);
        &::before {
          background-image: url(assets/images/top-about-creative.jpg);
        }
      }
    }
  }
  
  .b-2nd {
    background: #21598F;
    overflow: hidden;
    position: relative;
    z-index: 2;
    .b-backImg {
      display: block;
      width: 100dvw;
      height: 110dvh;
      background-size: cover;
      background-position: center center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
  }
  .b-section {
    .container {
      padding: 0;
    }
    .b-btns {
      text-align: center;
    }
  }
  .b-postList {
    .b-txts {
      margin-top: 20px;
      .b-mdsBox {
        margin-bottom: 0;
        .b-mds {
          margin-bottom: 0;
        }
      }
      .b-moreInfo {
        margin-top: 20px;
      }
    }
  }
  .turningpoint {
    color: #fff;
    .b-turningpointContent {
      .e-mds {
        line-height: 1.5;
      }
    }
    .b-aboutEn {
      font-family: var(--fontEN);
      font-weight: 600;
      font-style: italic;
      line-height: 1em;
    }
    .b-txts {
      margin-top: 30px;
      margin-bottom: 30px;
      .e-txt {
        text-align: left;
        font-weight: 700;
      }
      span {
        display: inline-block;
      }
    }
  }
  .b-sectionTtl {
    .b-en {
      font-family: var(--fontEN);
      font-style: italic;
      font-weight: 600;
      letter-spacing: .05em;
    }
  }
  .casestudy {
    .b-sectionTtl {
      display: flex;
      flex-direction: column-reverse;
      color: #fff;
      .b-en {
        margin-bottom: 10px;
      }
    }
    .b-post {
      background: #fff;
      .b-txts {
        .e-txt {
        }
      }
    }
  }
  .works {
    .b-sectionTtl {
      display: flex;
      flex-direction: column-reverse;
      .b-mds {
        font-size: min(3.5vw,14px);
        font-weight: 400;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  @keyframes aboutEN {
    0% { transform:translateX(100%) }
    100% { transform:translateX(0) }
  }
  .home {
    .about {
      .b-aboutEN {
        text-align: left;
        font-size: 50px;
        transform: translateX(0);
        &.fadeIn {
          animation: aboutEN .85s ease-in forwards;
        }
      }
      .b-mds {
        margin-bottom: 20px;
      }
      .b-panels {
        .b-item {
          display: flex;
          align-items: center;
          padding-left: 30px;
          color: #fff;
          aspect-ratio: 34/16;
          margin-top: 30px;
          filter: drop-shadow(0 0 10px rgb(0 0 0 /.15));
          .e-en {
            font-size: min(5.5vw,22px);
          }
        }
      }
      .b-btns {
        margin-top: 50px;
      }
    }
    .b-2nd {
      .b-backImg {
        background-image: url(assets/images/top-2nd-bg-sp.jpg);
      }
    }
    .turningpoint {
      padding-top: 120px;
      padding-bottom: 40px;
      .container {
        width: calc(100% - 40px);
      }
      .b-turningpointContent {
        margin-top: 240px;
        padding-bottom: 170px;
        .e-mds {
          font-size: min(9.5vw,38px);
        }
      }
      .b-aboutEn {
        font-size: min(26.25vw,105px);
      }
      .b-txts {
        .e-txt {
          font-size: min(3.75vw,15px);
          line-height: 2.2;
        }
      }
      .b-aboutEn.m-bottom {
        text-align: center;
        font-size: min(23vw,92px);
        white-space: nowrap;
      }
    }
    .casestudy {
      .b-sectionTtl {
        .b-mds {
          font-size: min(9.5vw,38px);
          margin-bottom: 40px;
        }
        .b-en {
          font-size: min(4.5vw,18px);
        }
      }
      .b-postList {
        padding-right: 20px;
        padding-left: 20px;
      }
      .b-post {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        margin-left: 0;
        padding-bottom: 0;
        &+.b-post {
          margin-top: 30px;
        }
        .b-txts {
          padding: 20px;
          margin: 0;
          .e-txt {
            -webkit-line-clamp: unset;
          }
        }
        .b-img {
          aspect-ratio: 36/17;
          margin-bottom: 0;
          .e-img {
            margin-top: -1em;;
          }
          &::before {
            width: 100%;
            height: 100%;
            aspect-ratio: unset;
            border-radius: 0;
          }
          figcaption {
            margin-top: -.5em;
          }
        }
      }
    }
    .works {
      .b-sectionTtl {
        .b-en {
          font-size: min(19.25vw,77px);
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  @keyframes aboutEN {
    0% { transform:translateX(100%) }
  60% { transform:translateX(-80px) }
  70% { transform:translateX(20px) }
  80% { transform:translateX(-20px) }
  90% { transform:translateX(10px) }
  100% { transform:translateX(0) }
  }
  @keyframes aboutENend {
    0% { transform:translateX(0) }
  100% { transform:translateX(-100%) }
  }
  .home {
    .about {
      padding-top: 300px !important;
      .b-aboutEn {
        text-align: center;
        font-size: 200px;
        top: 50px;
        transform: translateX(100%);
        &.fadeIn {
          animation: aboutEN .85s ease-in forwards;
        }
        &.fadeOut {
          animation: aboutENend .85s ease-in forwards;
        }
      }
      .b-ttls {
        display: flex;
        align-items: end;
        .b-mdsBox {
          flex-shrink: 0;
        }
      }
      .b-panelsInner {
        display: grid;
        grid-template-columns: repeat(17, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        width: 1940px;
        height: calc(100dvh - 350px);
        min-height: 300px;
        max-height: 580px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 30px;
        .m-sports { grid-area: 1 / 1 / 3 / 4; }
        .m-parties { grid-area: 1 / 4 / 3 / 7; }
        .m-seminar { grid-area: 1 / 7 / 2 / 12; }
        .m-project { grid-area: 2 / 7 / 3 / 12; }
        .m-event { grid-area: 1 / 12 / 3 / 15; }
        .m-creative { grid-area: 1 / 15 / 3 / 18; }
      }
      .b-panels {
        width: 100dvw;
        margin-left: 50%;
        padding-top: 20px;
        transform: translateX(-50dvw);
        /* overflow-x: auto; */
        .b-item {
          transition: var(--transition);
          &::before,
          &::after {
            transition: var(--transition);
          }
          &::before {
            opacity: 0;
          }
          &::after {
            opacity: 1;
            border: 5px solid;
          }
          &:hover {
            color: #fff;
            border-color: transparent;
            &::before {
              opacity: 1;
            }
            &::after {
              opacity: 0;
            }
          }
          .e-en {
            font-size: 32px;
          }
        }
      }
      .b-btns {
        margin-top: 60px;
      }
    }
    .b-2nd {
      .b-backImg {
        background-image: url(assets/images/top-2nd-bg-pc.jpg);
      }
    }
    .b-section {
      padding-top: 230px;
      padding-bottom: 120px;
    }
    .turningpoint {
      .b-turningpointContent {
        margin-top: 490px;
        margin-bottom: 480px;
        .e-mds {
          font-size: 38px;
        }
      }
      .b-aboutEn {
        font-size: 170px;
      }
      .b-txts {
        .e-txt {
          font-size: 22px;
        }
      }
    }
    .casestudy {
      .b-sectionTtl {
        .b-mds {
          font-size: 58px;
          margin-bottom: 50px
        }
      }
      .b-postList {
        .b-postListInner,
        .b-postListInnerCASE {
           padding-bottom: 130px;
        }
        .b-post {
          width: 770px;
          padding: 30px;
          .inner {
            flex-direction: row-reverse;
          }
          .b-txts {
           margin-top: 0;
            .e-txt {
              font-size: 15px;
              -webkit-line-clamp: 7;
            }
          }
          .b-img {
            aspect-ratio: 380/300;
            width: 50.5%;
            min-width: 50.5%;
            margin-right: 30px;
            &::before {
              aspect-ratio: 380/300;
            }
          }
        }
      }
    }
    .works {
      .b-section {
      }
      .b-sectionTtl {
        .b-en {
          font-size: 90px;
        }
      }
    }
  }
}
@media screen and (min-width: 1201px) {
  .home {
    .about {
      .b-panelsInner {
        margin-right: calc( ( 100% - 1140px) / 2 );
        margin-left: calc( ( 100% - 1140px) / 2 );
      }
    }
  }
}