@charset "UTF-8";
@import url("global.css");
#contents {
  --radius: 8px;
  padding-bottom: 0; }

#bodyarea {
  overflow: hidden; }

.introduction {
  position: relative;
  margin-bottom: 65px; }
  .introduction .image {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    overflow: hidden; }
  .introduction .wrapper {
    display: flex; }
    .introduction .wrapper::after {
      content: "";
      width: 0;
      height: 680px;
      display: block; }
  .introduction .main {
    padding: 30px 50px 0 0;
    width: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative; }
    .introduction .main .catch {
      font-size: min(44px,4.5vw);
      font-weight: 700;
      margin: 0 -30px 60px 0;
      word-break: keep-all; }
    .introduction .main .text {
      line-height: 2;
      font-weight: 500; }
    .introduction .main .subimage {
      position: absolute;
      right: min(70px,5vw);
      bottom: -120px;
      width: 330px;
      aspect-ratio: 8 / 9;
      border-radius: var(--radius);
      overflow: hidden; }

.sectitle span {
  display: block; }
.sectitle .ja {
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 700;
  line-height: 1.5; }
.sectitle .en {
  font-size: min(20px,4vw);
  font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  opacity: .55; }

.office {
  padding-block: 130px 120px;
  background-color: #2E3353;
  color: #fff;
  --zure: -85px; }
  .office ul {
    margin-top: 80px;
    display: flex;
    gap: min(75px,5vw); }
    .office ul li {
      container-type: inline-size;
      flex: 1; }
      .office ul li .image {
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 6 / 5; }
      .office ul li .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 22px 5px 12px; }
        .office ul li .name span {
          display: block; }
        .office ul li .name .ja {
          font-weight: 700;
          font-size: 22px; }
        .office ul li .name .en {
          padding-top: 3px;
          font-size: 17px;
          font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
          text-align: right; }
      .office ul li .text {
        margin-inline: 5px; }
      .office ul li:nth-of-type(2) {
        margin-top: calc(1 * var(--zure)); }
      .office ul li:nth-of-type(3) {
        margin-top: calc(2 * var(--zure)); }
@container (width <= 280px) {
  .office ul li .name {
    display: block;
    margin: 15px 5px 10px; }
    .office ul li .name .en {
      text-align: left;
      font-size: 14px;
      margin-top: -8px; }
  .office ul li .text {
    letter-spacing: 0;
    font-size: 92%; } }
@container (width <= 220px) {
  .office ul li .name {
    margin: 10px 2px 10px; }
    .office ul li .name .ja {
      font-size: 20px; }
  .office ul li .text {
    margin-inline: 2px; } }
.section .inner {
  display: flex;
  justify-content: space-between;
  gap: 50px; }
.section .sectitle {
  position: sticky;
  top: 120px;
  word-break: keep-all; }
.section .mainarea {
  max-width: 1070px;
  flex-grow: 1; }

#style {
  padding-block: 130px 120px; }
  #style .mainarea ul {
    border-top: #2E3353 1px solid;
    counter-reset: number 0; }
    #style .mainarea ul li {
      padding-block: 30px;
      border-bottom: #2E3353 1px solid;
      display: flex;
      gap: min(50px,4vw);
      counter-increment: number 1; }
      #style .mainarea ul li::before {
        content: "0" counter(number);
        display: block;
        width: 25%;
        flex-shrink: 0;
        text-align: center;
        align-content: center;
        border-right: #ddd 1px solid;
        font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
        font-size: 66px;
        font-weight: 600;
        letter-spacing: 0;
        color: #1F2B71; }
      #style .mainarea ul li .main {
        padding: 10px 20px 20px; }
        #style .mainarea ul li .main .title {
          font-weight: 700;
          font-size: min(24px,5vw);
          margin-bottom: 15px; }

.separateimage {
  margin: 0 5vw -90px; }
  .separateimage .inner {
    height: 670px;
    overflow: hidden;
    border-radius: 10px;
    max-width: 1780px;
    margin-inline: auto; }
  .separateimage figure {
    height: 110%; }

#benefits {
  padding-block: 240px 120px;
  background-color: #ececec; }
  #benefits .mainarea {
    display: flex;
    gap: 4.5%; }
    #benefits .mainarea > div {
      flex: 1; }
    #benefits .mainarea dl {
      background-color: #fff;
      margin-bottom: 25px;
      border-left: #1F2B71 2px solid;
      padding: 20px 20px 25px; }
      #benefits .mainarea dl dt {
        color: #1F2B71;
        font-weight: 700;
        font-size: 112.5%;
        line-height: 1.5;
        margin-bottom: 10px; }
        #benefits .mainarea dl dt::before {
          content: "";
          width: 6px;
          height: 1px;
          background-color: #1F2B71;
          display: inline-block;
          margin-right: 8px;
          vertical-align: 6px; }
      #benefits .mainarea dl dd {
        font-size: 93%;
        min-height: 53px; }
        #benefits .mainarea dl dd.ex {
          margin-top: 15px;
          padding-top: 15px;
          border-top: #ababab 1px solid; }
          #benefits .mainarea dl dd.ex span {
            display: block;
            font-weight: 500; }
            #benefits .mainarea dl dd.ex span::before {
              content: "【";
              display: inline-block;
              margin-inline: -.5em 3px; }
            #benefits .mainarea dl dd.ex span::after {
              content: "】";
              display: inline-block;
              margin-inline: 3px 0; }

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

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .office ul {
    gap: 4vw; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction .main {
    padding: 20px 5vw 0 0; }
    .introduction .main .subimage {
      max-width: 75%; }

  .office {
    padding-block: 120px 100px;
    --zure: -8vw; }
    .office ul {
      gap: 3vw;
      margin-inline: -2vw; }

  .section .inner {
    display: block; }
  .section .sectitle {
    margin-bottom: 40px; }

  #style {
    padding-block: 100px 80px; }
    #style .mainarea ul li::before {
      font-size: 60px; }
    #style .mainarea ul li .main {
      padding: 10px 10px 20px; }

  .separateimage {
    margin: 0 3vw -90px; }
    .separateimage .inner {
      height: 500px; }

  #benefits {
    padding-block: 180px 100px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #contents {
    --radius: 5px; }

  .introduction {
    margin-bottom: -13vw; }
    .introduction .image {
      position: static;
      width: auto;
      aspect-ratio: 3 / 2;
      border-radius: var(--radius);
      margin: 0 5vw 30px; }
    .introduction .wrapper {
      display: block; }
      .introduction .wrapper::after {
        display: none; }
    .introduction .main {
      padding: 0;
      width: auto; }
      .introduction .main .catch {
        font-size: min(30px,6vw);
        margin: 0 -4vw 20px 0; }
      .introduction .main .subimage {
        position: static;
        width: 35%;
        margin: 20px 0 0 auto; }

  .office {
    padding-block: 50px 80px; }
    .office ul {
      margin-top: 40px;
      margin-inline: 0;
      display: block; }
      .office ul li {
        padding-inline: 5vw; }
        .office ul li + li {
          margin-top: 40px !important;
          padding-top: 40px;
          position: relative; }
          .office ul li + li::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 1px;
            background-color: #fff;
            opacity: .5;
            display: block; }
        .office ul li .image {
          margin: 0 5vw; }
        .office ul li .name {
          justify-content: flex-start;
          margin: 20px 0 10px; }
          .office ul li .name .ja {
            font-size: 20px; }
          .office ul li .name .en {
            padding-top: 4px;
            font-size: inherit; }
            .office ul li .name .en::before {
              content: "";
              display: inline-block;
              width: 20px;
              height: 1px;
              background-color: #fff;
              opacity: .7;
              margin-inline: 12px;
              vertical-align: 5px; }
        .office ul li .text {
          margin-inline: 0; }

  .section .sectitle {
    margin-bottom: 30px; }

  #style {
    padding-block: 70px 40px; }
    #style .mainarea ul li {
      padding-block: 25px; }
      #style .mainarea ul li::before {
        width: 24%;
        font-size: 10vw; }
      #style .mainarea ul li .main {
        padding: 10px 10px 15px; }
        #style .mainarea ul li .main .title {
          line-height: 1.5; }

  .separateimage .inner {
    height: 60vw;
    overflow: hidden;
    border-radius: 8px; }

  #benefits {
    padding-block: 150px 60px; }
    #benefits .mainarea {
      display: block; }
      #benefits .mainarea dl {
        margin-bottom: 20px; }
        #benefits .mainarea dl dd {
          min-height: inherit; }
          #benefits .mainarea dl dd.ex {
            font-size: 85%; } }