@charset "UTF-8";
@import url("global.css");
#bodyarea .inner {
  display: flex;
  justify-content: space-between; }
#bodyarea .navi-area {
  width: 150px;
  flex-shrink: 0; }
  #bodyarea .navi-area ul#navi {
    position: sticky;
    top: 150px;
    padding-left: 30px; }
    #bodyarea .navi-area ul#navi li {
      margin-bottom: 15px; }
      #bodyarea .navi-area ul#navi li a {
        display: block;
        width: fit-content;
        font-weight: 500;
        padding: 5px; }
        #bodyarea .navi-area ul#navi li a::before {
          content: "";
          width: 5px;
          height: 5px;
          background-color: #E3E3E3;
          display: inline-block;
          vertical-align: 4px;
          margin-right: 12px;
          transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
          -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden; }
        #bodyarea .navi-area ul#navi li a.current::before {
          background-color: #E6001A;
          scale: 1.3; }
        @media (any-hover: hover) {
          #bodyarea .navi-area ul#navi li a:hover::before {
            background-color: #A49375; } }
#bodyarea .main-area {
  flex-grow: 1; }
  #bodyarea .main-area .mainwrapper {
    max-width: 1200px;
    margin-inline: auto; }
    #bodyarea .main-area .mainwrapper .maininner {
      max-width: 980px;
      margin-left: auto;
      padding-left: 50px; }
#bodyarea .office {
  container-type: inline-size; }
  #bodyarea .office + .office {
    margin-top: 160px; }
  #bodyarea .office .officename {
    background-color: #F5F3F0;
    padding: 8px 25px;
    font-size: clamp(21px, 3.5vw, 30px);
    font-weight: 700;
    margin-bottom: 60px; }
  #bodyarea .office .officemain {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 60px; }
    #bodyarea .office .officemain .shopimg {
      width: 500px;
      max-width: 50%;
      height: 350px;
      border-radius: 6px;
      overflow: hidden; }
    #bodyarea .office .officemain .data {
      flex-grow: 1; }
      #bodyarea .office .officemain .data table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 40px; }
        #bodyarea .office .officemain .data table tr {
          border-bottom: #c9c9c9 1px solid; }
          #bodyarea .office .officemain .data table tr:last-of-type {
            border: none; }
        #bodyarea .office .officemain .data table th {
          padding: 10px 10px;
          font-weight: 500;
          white-space: nowrap; }
        #bodyarea .office .officemain .data table td {
          padding: 10px 20px 10px 10px; }
      #bodyarea .office .officemain .data .link a {
        display: block;
        background-color: #E3E3E3;
        padding: 15px 50px 15px 20px;
        max-width: 220px;
        box-sizing: border-box;
        border-radius: 99px;
        font-size: .825em;
        line-height: 1;
        font-weight: 500;
        position: relative; }
        @media (any-hover: hover) {
          #bodyarea .office .officemain .data .link a:hover {
            transform: translateX(3px); } }
        #bodyarea .office .officemain .data .link a::after {
          content: "\f061";
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          margin-top: 1px;
          line-height: 1;
          font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
          font-weight: 900;
          font-size: 1em; }
  #bodyarea .office .map {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px; }
    #bodyarea .office .map iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      filter: grayscale(0.5); }
  #bodyarea .office .staff .title {
    font-size: 24px;
    font-weight: 700;
    font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
    color: #5A5657;
    margin-bottom: 30px; }
  #bodyarea .office .staff ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 3%; }
    #bodyarea .office .staff ul li a {
      display: block;
      line-height: 1.5; }
    #bodyarea .office .staff ul li .photo {
      aspect-ratio: 4 / 3;
      margin-bottom: 5px; }
    #bodyarea .office .staff ul li .name {
      font-size: 120%;
      font-weight: 700;
      letter-spacing: .1em; }
@container (width <= 660px) {
  #bodyarea .office .officename {
    margin-bottom: 20px; }
  #bodyarea .office .officemain {
    margin-bottom: 40px;
    display: block; }
    #bodyarea .office .officemain .shopimg {
      width: 100%;
      max-width: initial;
      height: 300px;
      margin-bottom: 20px;
      border-radius: 4px; }
    #bodyarea .office .officemain .data table {
      margin-bottom: 10px; }
      #bodyarea .office .officemain .data table th {
        padding: 10px 20px; }
    #bodyarea .office .officemain .data .link a {
      margin: 0 0 0 auto; }
  #bodyarea .office .map {
    height: 260px;
    margin-bottom: 40px; }
  #bodyarea .office .staff ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 3.5%; } }
@container (width <= 450px) {
  #bodyarea .office .officename {
    margin-bottom: 10px;
    text-align: center; }
  #bodyarea .office .officemain {
    margin-bottom: 30px; }
    #bodyarea .office .officemain .shopimg {
      height: 160px;
      margin-bottom: 10px; }
    #bodyarea .office .officemain .data table th {
      padding: 10px 10px; }
    #bodyarea .office .officemain .data table td {
      padding: 10px; }
    #bodyarea .office .officemain .data .link a {
      margin: 0 0 0 auto;
      padding: 12px 30px 12px 20px;
      max-width: 150px; }
  #bodyarea .office .map {
    height: 180px;
    margin-bottom: 30px; }
  #bodyarea .office .staff .title {
    margin-bottom: 20px; }
  #bodyarea .office .staff ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 4%; } }
/* ---------- Modal ---------- */
.staff_modalbox {
  position: relative;
  margin: 60px auto; }
  .staff_modalbox .modal_inner {
    background-color: #fff;
    max-width: 1200px;
    min-height: 640px;
    padding-bottom: 80px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative; }
    .staff_modalbox .modal_inner .head_area {
      position: relative;
      display: flex;
      margin-bottom: 40px; }
      .staff_modalbox .modal_inner .head_area figure {
        height: 480px;
        width: 50%;
        flex-shrink: 0; }
      .staff_modalbox .modal_inner .head_area .text_area {
        flex: 1;
        box-sizing: border-box;
        padding: 60px 5% 0;
        display: flex;
        flex-direction: column; }
        .staff_modalbox .modal_inner .head_area .text_area .title_area {
          margin-bottom: 30px; }
          .staff_modalbox .modal_inner .head_area .text_area .title_area .job {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px; }
          .staff_modalbox .modal_inner .head_area .text_area .title_area .name {
            display: flex;
            gap: 25px;
            align-items: center;
            font-weight: 700; }
            .staff_modalbox .modal_inner .head_area .text_area .title_area .name span {
              display: block; }
            .staff_modalbox .modal_inner .head_area .text_area .title_area .name .ja {
              font-size: min(30px,2.8vw); }
            .staff_modalbox .modal_inner .head_area .text_area .title_area .name .en {
              font-size: 16px;
              font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
              color: #A49375;
              text-transform: uppercase; }
        .staff_modalbox .modal_inner .head_area .text_area .message_area {
          flex-grow: 1;
          align-content: center;
          font-weight: 500; }
    .staff_modalbox .modal_inner .persona_area {
      padding-inline: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px; }
      .staff_modalbox .modal_inner .persona_area .chart {
        width: 40%; }
      .staff_modalbox .modal_inner .persona_area .photo {
        width: 57%;
        flex-shrink: 0; }
        .staff_modalbox .modal_inner .persona_area .photo ul {
          display: flex;
          justify-content: center;
          gap: 3%; }
          .staff_modalbox .modal_inner .persona_area .photo ul li {
            flex: 1; }
            .staff_modalbox .modal_inner .persona_area .photo ul li figure {
              height: 100%; }
              .staff_modalbox .modal_inner .persona_area .photo ul li figure span {
                height: 100%;
                display: block; }
                .staff_modalbox .modal_inner .persona_area .photo ul li figure span img.objectfit {
                  object-position: bottom center;
                  object-fit: contain; }
              .staff_modalbox .modal_inner .persona_area .photo ul li figure figcaption {
                padding-top: 5px;
                font-size: 13px;
                font-weight: 500;
                letter-spacing: 0;
                line-height: 1.4;
                text-align: center; }
    .staff_modalbox .modal_inner .link a {
      display: block;
      background-color: #E3E3E3;
      padding: 15px 50px 15px 20px;
      margin: 40px auto 0;
      max-width: 220px;
      box-sizing: border-box;
      border-radius: 99px;
      font-size: .825em;
      line-height: 1;
      font-weight: 500;
      position: relative; }
      @media (any-hover: hover) {
        .staff_modalbox .modal_inner .link a:hover {
          transform: translateX(3px); } }
      .staff_modalbox .modal_inner .link a::after {
        content: "\f061";
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 1px;
        line-height: 1;
        font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
        font-weight: 900;
        font-size: 1em; }

.mfp-bg {
  opacity: .5; }

.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1; }

.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9);
  backface-visibility: hidden; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: auto; }

.mfp-close,
.mfp-close-btn-in .mfp-close {
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 50px;
  font-weight: 100;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  background-color: #303030;
  color: #fff;
  opacity: 1;
  top: -20px;
  right: -20px;
  letter-spacing: 0; }

.mfp-arrow::before {
  display: none; }
.mfp-arrow::after {
  border-top-width: 20px;
  border-bottom-width: 20px;
  top: 0; }

.mfp-arrow-right {
  right: 50%;
  margin-right: -680px; }
  .mfp-arrow-right::after {
    border-left-width: 34px;
    margin-left: 30px; }

.mfp-arrow-left {
  left: 50%;
  margin-left: -680px; }
  .mfp-arrow-left::after {
    border-right-width: 34px;
    margin-left: 22px; }

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #bodyarea .navi-area {
    width: 120px; }
    #bodyarea .navi-area ul#navi {
      padding-left: 0; }

  /* ---------- Modal ---------- */
  .mfp-container {
    padding-inline: 3vw; }

  .staff_modalbox .modal_inner .persona_area {
    padding-inline: 4vw; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #bodyarea .inner {
    gap: 5vw; }
  #bodyarea .navi-area {
    width: 100px; }
    #bodyarea .navi-area ul#navi li {
      margin-bottom: 10px; }
      #bodyarea .navi-area ul#navi li a {
        font-weight: 700; }
        #bodyarea .navi-area ul#navi li a::before {
          vertical-align: 3px;
          margin-right: 10px; }
  #bodyarea .main-area .mainwrapper .maininner {
    padding-left: 0; }
  #bodyarea .office + .office {
    margin-top: 100px; }

  /* ---------- Modal ---------- */
  .staff_modalbox .modal_inner .head_area {
    margin-bottom: 30px; }
    .staff_modalbox .modal_inner .head_area figure {
      height: 420px; }
    .staff_modalbox .modal_inner .head_area .text_area {
      padding: 50px 5% 0; }
      .staff_modalbox .modal_inner .head_area .text_area .title_area {
        margin-bottom: 30px; }
        .staff_modalbox .modal_inner .head_area .text_area .title_area .job {
          font-size: 16px;
          margin-bottom: 5px; }
        .staff_modalbox .modal_inner .head_area .text_area .title_area .name {
          display: block;
          line-height: 1.5; }
          .staff_modalbox .modal_inner .head_area .text_area .title_area .name .ja {
            font-size: 28px; }
          .staff_modalbox .modal_inner .head_area .text_area .title_area .name .en {
            font-size: 15px; }
  .staff_modalbox .modal_inner .persona_area {
    display: block; }
    .staff_modalbox .modal_inner .persona_area .chart {
      width: auto;
      max-width: 400px;
      margin: 0 auto 20px; }
    .staff_modalbox .modal_inner .persona_area .photo {
      width: auto; }
      .staff_modalbox .modal_inner .persona_area .photo ul {
        gap: 4%; }
        .staff_modalbox .modal_inner .persona_area .photo ul li figure figcaption {
          padding-top: 8px; }
  .staff_modalbox .modal_inner .link a {
    margin: 80px auto 0; }

  .mfp-close,
  .mfp-close-btn-in .mfp-close {
    width: 60px;
    height: 60px;
    font-size: 40px;
    line-height: 60px;
    top: -15px;
    right: -15px; }

  .mfp-arrow-right {
    right: -10px;
    margin-right: 0; }

  .mfp-arrow-left {
    left: -10px;
    margin-left: 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #bodyarea .inner {
    display: block; }
  #bodyarea .navi-area {
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    width: auto;
    padding: 20px 5vw;
    margin-bottom: 50px; }
    #bodyarea .navi-area ul#navi {
      position: static;
      display: flex;
      flex-wrap: wrap;
      gap: 2px 15px;
      justify-content: center; }
      #bodyarea .navi-area ul#navi li {
        margin-bottom: 0; }
        #bodyarea .navi-area ul#navi li a {
          padding: 5px 0; }
          #bodyarea .navi-area ul#navi li a::before {
            vertical-align: 2px; }
          #bodyarea .navi-area ul#navi li a.current::before {
            background-color: #E3E3E3;
            scale: 1; }
  #bodyarea .office + .office {
    margin-top: 70px; }

  /* ---------- Modal ---------- */
  .staff_modalbox {
    margin: 40px auto; }
    .staff_modalbox .modal_inner {
      min-height: inherit;
      padding-bottom: 50px; }
      .staff_modalbox .modal_inner .head_area {
        display: block;
        margin-bottom: 20px; }
        .staff_modalbox .modal_inner .head_area figure {
          height: auto;
          width: auto;
          aspect-ratio: 4 / 3; }
        .staff_modalbox .modal_inner .head_area .text_area {
          padding: 25px 8% 0;
          display: block; }
          .staff_modalbox .modal_inner .head_area .text_area .title_area {
            text-align: center;
            margin-bottom: 30px; }
            .staff_modalbox .modal_inner .head_area .text_area .title_area .job {
              font-size: 14px;
              margin-bottom: 3px; }
            .staff_modalbox .modal_inner .head_area .text_area .title_area .name .ja {
              font-size: min(30px,6.5vw);
              letter-spacing: .08em; }
            .staff_modalbox .modal_inner .head_area .text_area .title_area .name .en {
              font-size: 14px; }
      .staff_modalbox .modal_inner .persona_area {
        padding-inline: 5%; }
        .staff_modalbox .modal_inner .persona_area .chart {
          margin: 0 auto; }
        .staff_modalbox .modal_inner .persona_area .photo ul {
          display: flex;
          justify-content: center;
          gap: 4%; }
          .staff_modalbox .modal_inner .persona_area .photo ul li {
            flex: 1; }
            .staff_modalbox .modal_inner .persona_area .photo ul li figure {
              height: 100%; }
              .staff_modalbox .modal_inner .persona_area .photo ul li figure span {
                height: 100%;
                display: block; }
                .staff_modalbox .modal_inner .persona_area .photo ul li figure span img.objectfit {
                  object-position: bottom center;
                  object-fit: contain; }
              .staff_modalbox .modal_inner .persona_area .photo ul li figure figcaption {
                padding-top: 4px;
                font-size: 10px;
                font-weight: 700; }
      .staff_modalbox .modal_inner .link a {
        padding: 15px 40px 15px 20px;
        max-width: 200px; }

  .mfp-close,
  .mfp-close-btn-in .mfp-close {
    width: 50px;
    height: 50px;
    font-size: 30px;
    line-height: 50px;
    top: -15px;
    right: -10px; }

  .mfp-arrow::after {
    border-top-width: 18px;
    border-bottom-width: 18px; }

  .mfp-arrow-right::after {
    border-left-width: 26px;
    margin-left: 44px; }

  .mfp-arrow-left::after {
    border-right-width: 26px;
    margin-left: 16px; } }