/* =========================================
   SUB PAGE
   M&N CONSULTING
========================================= */



/* =========================================
   PAGE VISUAL
========================================= */

.page-visual {
  padding: 10px 0;

  background: #f3f3f3;

  border-bottom: 1px solid #eeeeee;
}


.page-visual-inner {
  position: relative;

  width: calc(100% - 40px);
  max-width: 980px;

  height: 155px;

  margin: 0 auto;

  overflow: hidden;

  background: #dddddd;
}



/* =========================================
   PAGE VISUAL IMAGE
========================================= */

.page-visual-image {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}


.page-visual-image::before {
  display: none;
}


.page-visual-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;
}



/* =========================================
   PAGE VISUAL TITLE
========================================= */

.page-visual-copy {
  position: absolute;

  top: 0;
  right: 0;

  z-index: 5;

  width: auto;
  min-width: 330px;

  min-height: 0;

  padding:
    18px
    24px;

  display: block;

  text-align: right;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(0, 0, 0, 0.16) 100%
    );
}


.page-visual-copy p {
  display: none;
}


.page-visual-copy h1 {
  margin: 0;

  color: #ffffff;

  font-family:
    "Meiryo",
    "Yu Gothic",
    sans-serif;

  font-size: 29px;

  font-weight: 400;

  line-height: 1.4;

  text-shadow:
    0 1px 4px
    rgba(0, 0, 0, 0.32);
}



/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb {
  width: calc(100% - 40px);
  max-width: 980px;

  margin:
    13px
    auto
    0;

  color: #777777;

  font-size: 12px;
}


.breadcrumb a {
  color: #39275e;
}


.breadcrumb a:hover {
  color: #f28a31;

  text-decoration: underline;
}


.breadcrumb span {
  margin: 0 6px;

  color: #aaaaaa;
}



/* =========================================
   SUB PAGE LAYOUT
========================================= */

.subpage-container {
  width: calc(100% - 40px);
  max-width: 980px;

  margin:
    25px
    auto
    75px;

  display: grid;

  grid-template-columns:
    210px
    minmax(0, 1fr);

  gap: 28px;

  align-items: start;
}


.subpage-sidebar,
.subpage-main {
  min-width: 0;
}



/* =========================================
   LOCAL MENU
========================================= */

.local-menu {
  margin:
    0
    0
    15px;

  border: 1px solid #cccccc;

  background: #ffffff;
}


.local-menu h2 {
  margin: 0;

  padding:
    8px
    10px;

  color: #333333;

  background: #dddddd;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.5;

  text-align: left;
}


.local-menu a {
  position: relative;

  padding:
    6px
    8px
    6px
    17px;

  display: block;

  color: #39275e;

  border-bottom:
    1px
    dotted
    #c8c8c8;

  font-size: 13px;

  line-height: 1.5;

  text-decoration: underline;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}


.local-menu a:last-child {
  border-bottom: 0;
}


.local-menu a::before {
  content: "»";

  position: absolute;

  top: 6px;
  left: 7px;

  color: #333333;

  font-size: 11px;
}


.local-menu a:hover {
  color: #f28a31;

  background: #fafafa;
}



/* =========================================
   MAIN CONTENT
========================================= */

.subpage-main {
  color: #333333;

  font-size: 14px;

  line-height: 1.9;
}



/* =========================================
   CONTENT TITLE
========================================= */

.content-title {
  position: relative;

  margin:
    0
    0
    20px;

  padding:
    3px
    0
    7px
    14px;

  color: #30264b;

  border-bottom:
    1px
    solid
    #cccccc;

  font-size: 20px;

  font-weight: 400;

  line-height: 1.4;
}


.content-title::before {
  content: "";

  position: absolute;

  top: 4px;
  left: 0;

  width: 4px;
  height: 25px;

  background: #39275e;
}



/* =========================================
   INTRO AREA
========================================= */

.intro-layout {
  margin-bottom: 25px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    230px;

  gap: 25px;

  align-items: start;
}


.intro-text p {
  margin:
    0
    0
    13px;

  font-size: 14px;

  line-height: 1.9;
}


.intro-image {
  padding: 4px;

  border:
    1px
    solid
    #cccccc;

  background: #ffffff;
}


.intro-image img {
  width: 100%;

  display: block;
}



/* =========================================
   TEXT BLOCK
========================================= */

.text-block {
  margin:
    0
    0
    25px;
}


.text-block p {
  margin:
    0
    0
    13px;

  font-size: 14px;

  line-height: 1.9;
}


.text-block a {
  color: #39275e;

  text-decoration: underline;
}


.text-block a:hover {
  color: #f28a31;
}



/* =========================================
   CONTENT SECTION
========================================= */

.content-section {
  margin-top: 32px;
}



/* =========================================
   LARGE SECTION TITLE
========================================= */

.content-section-title {
  position: relative;

  margin:
    0
    0
    17px;

  padding:
    7px
    10px
    7px
    14px;

  color: #ffffff;

  background: #39275e;

  font-size: 17px;

  font-weight: 400;

  line-height: 1.5;
}


.content-section-title::after {
  content: "";

  position: absolute;

  bottom: -6px;
  left: 20px;

  width: 0;
  height: 0;

  border-left:
    6px
    solid
    transparent;

  border-right:
    6px
    solid
    transparent;

  border-top:
    6px
    solid
    #39275e;
}



/* =========================================
   SUB TITLE
========================================= */

.content-subtitle {
  position: relative;

  margin:
    25px
    0
    13px;

  padding:
    4px
    0
    5px
    13px;

  color: #30264b;

  border-bottom:
    1px
    solid
    #cccccc;

  font-size: 17px;

  font-weight: 400;
}


.content-subtitle::before {
  content: "";

  position: absolute;

  top: 3px;
  left: 0;

  width: 4px;
  height: 23px;

  background: #39275e;
}



/* =========================================
   SERVICE DETAIL GRID
   社労士・行政書士・キャリア
========================================= */

.service-detail-grid {
  margin-top: 15px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    11px
    12px;
}



/* BOX */

.service-detail-box {
  position: relative;

  min-height: 105px;

  padding:
    11px
    12px
    12px;

  border:
    1px
    solid
    #cccccc;

  border-top:
    3px
    solid
    #39275e;

  background: #ffffff;
}



/* BOX TITLE */

.service-detail-box h3 {
  margin:
    0
    0
    6px;

  color: #39275e;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.5;

  text-decoration: underline;
}



/* BOX TEXT */

.service-detail-box p {
  margin: 0;

  color: #333333;

  font-size: 13px;

  line-height: 1.7;
}



/* 詳細リンクを使用した場合 */

.service-detail-box a {
  margin-top: 8px;

  display: inline-block;

  color: #39275e;

  background: transparent;

  font-size: 12px;

  text-decoration: underline;

  transition: color 0.2s ease;
}


.service-detail-box a:hover {
  color: #f28a31;
}



/* =========================================
   INFO BOX
========================================= */

.info-box {
  margin:
    25px
    0;

  padding:
    16px
    18px;

  border:
    1px
    solid
    #dddddd;

  background: #f7f7f7;
}


.info-box h3 {
  margin:
    0
    0
    8px;

  color: #39275e;

  font-size: 16px;
}


.info-box p {
  margin: 0;

  font-size: 13px;

  line-height: 1.8;
}



/* =========================================
   COMPANY TABLE
========================================= */

.common-table {
  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  table-layout: fixed;
}


.common-table th,
.common-table td {
  padding:
    11px
    12px;

  border:
    1px
    solid
    #ffffff;

  font-size: 14px;

  line-height: 1.7;

  vertical-align: top;
}


.common-table th {
  width: 34%;

  color: #333333;

  background: #e5e8f0;

  font-weight: 400;

  text-align: left;

  border-left:
    5px
    solid
    #8fa7d7;
}


.common-table td {
  background: #f0f0f0;
}


.common-table a {
  color: #333333;
}


.common-table iframe {
  width: 100%;
  min-height: 420px;

  display: block;

  border: 0;
}



/* =========================================
   FAQ
========================================= */

.qa-list {
  margin-top: 10px;
}



/* FAQ ITEM */

.qa-item {
  margin:
    0
    0
    21px;

  padding-bottom: 18px;

  border-bottom:
    1px
    dotted
    #cccccc;
}



/* QUESTION */

.qa-question {
  position: relative;

  margin:
    0
    0
    8px;

  padding:
    3px
    0
    3px
    30px;

  color: #30264b;

  background: transparent;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.6;
}


.qa-question::before {
  content: "Q";

  position: absolute;

  top: 3px;
  left: 0;

  width: 21px;
  height: 21px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  background: #39275e;

  border-radius: 2px;

  font-size: 12px;

  font-weight: 700;
}



/* ANSWER */

.qa-answer {
  position: relative;

  padding:
    1px
    0
    0
    30px;

  color: #333333;

  font-size: 13px;

  line-height: 1.8;
}


.qa-answer::before {
  content: "A";

  position: absolute;

  top: 0;
  left: 2px;

  color: #d86f4e;

  background: transparent;

  font-size: 14px;

  font-weight: 700;
}



/* =========================================
   MEDIA
========================================= */

.media-grid {
  margin-top: 12px;

  display: grid;

  /*
    元画像のように
    PCでは多数を横並び
  */
  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap:
    12px
    7px;
}



/* MEDIA ITEM */

.media-item {
  padding: 0;

  overflow: hidden;

  border: 0;

  background: transparent;
}


.media-item img {
  width: 100%;
  height: 150px;

  object-fit: contain;

  object-position: center bottom;

  background: #ffffff;
}


.media-item h3 {
  margin:
    7px
    0
    3px;

  color: #39275e;

  font-size: 12px;
}


.media-item p {
  margin: 0;

  font-size: 11px;

  line-height: 1.5;
}



/* =========================================
   RECRUIT
========================================= */

.recruit-box {
  margin-top: 20px;

  padding:
    22px
    24px;

  border:
    1px
    solid
    #dddddd;

  background: #f8f8f8;
}


.recruit-box h2 {
  margin:
    0
    0
    14px;

  color: #39275e;

  font-size: 19px;

  font-weight: 400;
}


.recruit-box p {
  margin:
    0
    0
    12px;

  font-size: 14px;

  line-height: 1.9;
}



/* =========================================
   RECRUIT BUTTON
========================================= */

.recruit-button {
  width: fit-content;
  min-width: 190px;

  margin:
    30px
    auto
    0;

  padding:
    10px
    20px;

  display: block;

  color: #41a5ee;

  background: #ffffff;

  border:
    2px
    solid
    #41a5ee;

  font-size: 14px;

  font-weight: 400;

  text-align: center;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}


.recruit-button:hover {
  color: #ffffff;

  background: #41a5ee;
}



/* =========================================
   PAGE LINK
========================================= */

.page-back-link {
  margin-top: 35px;

  text-align: right;
}


.page-back-link a {
  color: #39275e;

  font-size: 13px;

  text-decoration: underline;
}


.page-back-link a:hover {
  color: #f28a31;
}



/* =========================================
   COMMON SIDEBAR ADJUSTMENT
========================================= */

.subpage-sidebar .common-sidebar {
  width: 100%;
}


.subpage-sidebar .sidebar-banner {
  margin-bottom: 13px;
}


.subpage-sidebar .sidebar-office {
  margin-top: 0;
}



/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 900px) {


  /* =====================================
     PAGE VISUAL
  ====================================== */

  .page-visual-inner {
    height: 145px;
  }


  .page-visual-copy {
    min-width: 280px;

    padding:
      17px
      20px;
  }


  .page-visual-copy h1 {
    font-size: 25px;
  }



  /* =====================================
     CONTENT
  ====================================== */

  .subpage-container {
    grid-template-columns:
      180px
      minmax(0, 1fr);

    gap: 20px;
  }


  .intro-layout {
    grid-template-columns:
      minmax(0, 1fr)
      190px;

    gap: 18px;
  }



  /* =====================================
     MEDIA
  ====================================== */

  .media-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }


  .media-item img {
    height: 145px;
  }

}



/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 760px) {


  /* =====================================
     PAGE VISUAL
  ====================================== */

  .page-visual {
    padding: 0;
  }


  .page-visual-inner {
    width: 100%;

    height: 140px;
  }


  .page-visual-copy {
    top: auto;
    right: 0;
    bottom: 0;

    min-width: 0;

    max-width: 90%;

    padding:
      10px
      17px;
  }


  .page-visual-copy h1 {
    font-size: 22px;
  }



  /* =====================================
     BREADCRUMB
  ====================================== */

  .breadcrumb {
    width: calc(100% - 30px);

    font-size: 11px;
  }



  /* =====================================
     MAIN
  ====================================== */

  .subpage-container {
    width: calc(100% - 30px);

    margin-top: 22px;

    display: flex;

    flex-direction: column;

    gap: 0;
  }


  /* 本文を先に */

  .subpage-main {
    order: 1;
  }


  .subpage-sidebar {
    order: 2;

    margin-top: 35px;
  }



  /* =====================================
     CONTENT TITLE
  ====================================== */

  .content-title {
    font-size: 19px;
  }



  /* =====================================
     INTRO
  ====================================== */

  .intro-layout {
    display: block;
  }


  .intro-image {
    width: 70%;
    max-width: 300px;

    margin:
      20px
      auto
      0;
  }



  /* =====================================
     SERVICE
  ====================================== */

  .service-detail-grid {
    grid-template-columns: 1fr;
  }


  .service-detail-box {
    min-height: 0;
  }



  /* =====================================
     COMPANY TABLE
  ====================================== */

  .common-table,
  .common-table tbody,
  .common-table tr,
  .common-table th,
  .common-table td {
    display: block;

    width: 100%;
  }


  .common-table tr {
    margin-bottom: 2px;
  }


  .common-table th {
    padding: 8px 10px;

    border-left:
      4px
      solid
      #8fa7d7;
  }


  .common-table td {
    padding:
      10px
      12px
      15px;
  }


  .common-table iframe {
    min-height: 350px;
  }



  /* =====================================
     MEDIA
  ====================================== */

  .media-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 10px;
  }


  .media-item img {
    height: 150px;
  }



  /* =====================================
     SIDEBAR
  ====================================== */

  .subpage-sidebar .common-sidebar {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 15px;
  }


  .subpage-sidebar .sidebar-banner {
    margin-bottom: 0;
  }


  .subpage-sidebar .sidebar-office {
    grid-column: 1 / -1;
  }


  .local-menu {
    margin-bottom: 20px;
  }

}



/* =========================================
   SMARTPHONE
========================================= */

@media screen and (max-width: 520px) {


  /* VISUAL */

  .page-visual-inner {
    height: 125px;
  }


  .page-visual-copy h1 {
    font-size: 20px;
  }



  /* TEXT */

  .subpage-main {
    font-size: 14px;
  }


  .intro-text p,
  .text-block p {
    font-size: 14px;
  }



  /* IMAGE */

  .intro-image {
    width: 90%;
  }



  /* FAQ */

  .qa-question {
    font-size: 14px;
  }


  .qa-answer {
    font-size: 13px;
  }



  /* MEDIA */

  .media-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .media-item img {
    height: 135px;
  }



  /* SIDEBAR */

  .subpage-sidebar .common-sidebar {
    display: block;
  }


  .subpage-sidebar .sidebar-banner {
    margin-bottom: 15px;
  }

}



/* =========================================
   VERY SMALL SMARTPHONE
========================================= */

@media screen and (max-width: 390px) {


  .page-visual-inner {
    height: 110px;
  }


  .page-visual-copy h1 {
    font-size: 18px;
  }


  .media-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .media-item img {
    height: 150px;
  }

}