@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

html {scrollbar-gutter: stable;}

[id] {scroll-margin-top: 140px;}
.discPages {padding-bottom: 40px;
  * {font-family: "Noto Sans JP", sans-serif;}
}
.discPages .banner {margin-bottom: 0;
  .breadcrumb {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    
    ul {margin-bottom: 0; margin-top: 30px;
      li:not(:last-child):after {border-top-color: #808080; border-right-color: #808080;}
    }
  }
}
.disc-user {transform: translateY(-50px); margin-bottom: -40px;
  .disc-user__tit {
    h2 {display: inline-block; font-weight: 500; font-size: 14px; margin: 0; padding: 12px 25px; line-height: 1; background-color: #59b9e3; color: #fff; border-radius: 999px; position: relative; z-index: 1;
      &:after {
        content: "";
        display: block;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        position: absolute;
        top: 3px;
        left: 3px;
        border-radius: 999px;
        border: solid 1px #fff;
        pointer-events: none;
        z-index: 2;
      }
    }
  }

  .disc-user__list {
    border-radius: 10px;
    background-color: #fff;
    border: solid 1px #ccc;
    box-shadow: 3px 3px 5px rgba(204, 204, 204, 0.5);
    
    .disc-user__item {padding: 15px 15px 15px 45px; display: flex; gap: 15px; position: relative;
      &:not(:first-child) {border-top: solid 1px #ccc;}
      .disc-user__img {width: 110px; aspect-ratio: 9/10; flex-shrink: 0; overflow: hidden;
        img {width: 100%; height: 100%; object-fit: cover;}
      }
      .disc-user__inner {align-self: flex-end;
        .disc-user__name {line-height: 1; font-size: 22px; margin-bottom: 15px; font-weight: 500; color: #000;
          small {font-size: 80%;}
        }
        p {font-size: 14px; color: #000;}
      }
    }
  }
}

.disc-body {
  .disc-body__left {
    .disc-left__nav {
      border-radius: 10px;
      background-color: #fff;
      border: solid 1px #ccc;
      box-shadow: 3px 3px 5px rgba(204, 204, 204, 0.5);
      padding: 17px 20px;
      margin-bottom: 30px;

      h2 {font-weight: bold; font-size: 16px; color: #f18d00; line-height: 1; padding-bottom: 10px; border-bottom: solid 1px #f18d00; margin-bottom: 15px;}
      .disc-left__navlink {color: #6d6e71; font-size: 14px; font-weight: 500; text-decoration: none;
        &.active, &:hover {color: #000;}
      }
      .disc-left__nav-list {list-style: none; padding: 0; margin: 0;
        li {
          &:not(:first-child) {margin-top: 12px;}
          &:has(.disc-left__nav-sub .disc-left__navlink.active) > .disc-left__navlink {color: #000;}
        }
        .disc-left__nav-sub {padding-left: 15px; margin-top: 10px; border-left: solid 1px #ccc; display: flex; flex-direction: column;
          a:not(:first-child) {margin-top: 10px;}
        }
      }
    }
  }
  .disc-body__right {
    p {font-size: 16px; letter-spacing: 2px; line-height: 1.6; color: #000;
      small {font-size: 12px; line-height: 1.8; color: #000;}
    }
  }
}

.dpage-ex {padding-bottom: 40px; margin-bottom: 40px; border-bottom: solid 1px #f18d00;}
.dpage-block {
  h2 {font-weight: bold; font-size: clamp(23px, 1.95vw,28px); color: #f18d00; padding-left: 15px; border-left: solid 4px #f18d00; margin-bottom: 25px;}
  p {margin-bottom: 15px;}
  * {letter-spacing: 1px;}
  .dpage-block__st {margin-bottom: 10px;
    h3 {margin-right: 15px; margin-bottom: 0; padding-left: 60px; color: #003a8c; font-weight: bold; font-size: clamp(16px, 1.25vw, 18px); line-height: 30px; position: relative; z-index: 1;
      &:before {
        content: attr(data-h3);
        color: #fff;
        font-weight: bold;
        font-size: clamp(14px, 1.15vw, 16px);
        line-height: 1;
        position: absolute;
        top: 7px;
        left: 10px;
        z-index: 1;
      }
      &:after {
        content: "";
        width: 52px;
        height: 30px;
        clip-path: polygon(100% 50%, 80% 100%, 0% 100%, 0% 0%, 80% 0%);
        background-color: #003a8c;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index: 0;
      }
    }
    .dpage-btnimg {
      margin-left: auto;
      color: #6d6e71;
      font-weight: 500;
      font-size: 14px;
      border: none;
      background-color: transparent;
      display: flex;
      gap: 6px;
      align-items: center;
      transition: 0.25s;
      &:before {
        content: "";
        display: block;
        width: 16px;
        height: 20px;
        mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 17.9 22.3'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke-width: 4.2px; %7D .cls-1, .cls-2 %7B fill: none; stroke: %236d6e71; stroke-miterlimit: 10; %7D .cls-2 %7B stroke-width: 1.9px; %7D %3C/style%3E%3C/defs%3E%3Cg id='_レイヤー_24' data-name=' レイヤー 24'%3E%3Cg%3E%3Cline class='cls-1' x1='12.5' y1='15.3' x2='16.1' y2='21.2'/%3E%3Ccircle class='cls-2' cx='8.9' cy='8.9' r='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: left center;
        mask-size: 100% auto;
        background-color: #6d6e71;
        transition: 0.25s;
      }
      &:hover {color: #003a8c;
        &:before {background-color: #003a8c;}
      }
    }
  }
  .dpage-block__caution {padding-top: 10px;}
  .dpage-block__caution, .dpage-block__caution * {color: #231815 !important; font-size: 12px !important; word-break: break-all;
    & > p {display: flex; margin-bottom: 0;
      &:before {content: "•";}
    }
  }
  a {text-decoration: none;}
  .dpage-points__head {margin-bottom: 10px;
    & > p {
      color: #fff;
      font-weight: bold;
      line-height: 1 !important;
      background-color: #003a8c;
      font-size: 16px;
      margin-right: 15px;
      margin-bottom: 0 !important;
      padding: 7px 10px;
      border-radius: 4px;
      flex-shrink: 0;
      align-self: flex-start;
    }
    h3 {font-size: 16px; font-weight: bold; color: #231815; line-height: 30px; margin-bottom: 0;}
  }
  .dpage-block__points {
    border: solid 1px #003a8c;
    background-color: #edf1f7;
    color: #231815;
    font-weight: 500;
    padding: 15px;

    &.--bg-none {background-color: transparent;}

    &[data-t]:before {
      content: attr(data-t);
      display: block;
      line-height: 1;
      margin-bottom: 10px;
      font-weight: bold;
      color: #003a8c;
    }
    p {margin-bottom: 0;}
  }
  .dpage-block__ref {border-top: solid 1px #505050; color: #231815; font-size: 10px;}
  .dpage-block__cr {text-align: right; color: #000; font-size: 10px; margin-top: 15px;}
}
.dpage-list__dot {margin: 0; padding: 0; list-style: none;
  li {display: flex; gap: 5px;
    &:before {content: "●"; color: #003a8c; font-size: 16px; flex-shrink: 0;}
  }
}

.dpage-f[data-cl="orange"] {
  --color-block: #ed6c00;
  --color-block_bg: #fef5ed;
}
.dpage-f[data-cl="blue"] {
  --color-block: #3f639e;
  --color-block_bg: #f2f4f8;
}
.dpage-f[data-cl="green"] {
  --color-block: #18943b;
  --color-block_bg: #eff7f1;
}
.dpage-f[data-cl="cyan"] {
  --color-block: #00a3a3;
  --color-block_bg: #edf9f9;
}

.dpage-f {display: flex; gap: 12px;
  & + .dpage-f {margin-top: 20px;}
  .dpage-f__avt {width: 60px; height: 60px; flex-shrink: 0; overflow: hidden; border-radius: 999px; border: solid 2px var(--color-block);
    img {width: 100%; height: 100%; object-fit: cover;}
  }
  .dpage-f__paragraph {width: 100%; border-radius: 10px; border: solid 1px var(--color-block); background-color: var(--color-block_bg); padding: 10px 15px; position: relative; z-index: 1;
    svg {
      width: 17px;
      height: 14px;
      stroke: var(--color-block);
      fill: var(--color-block_bg);
      position: absolute;
      right: calc(100% - 8px);
      top: 23px;
      pointer-events: none;
      z-index: 2;
      .--pc {display: none;}
    }
    p {margin-bottom: 0 !important;}
    p[data-h]:before {
      content: attr(data-h);
      font-weight: bold;
      margin-right: 15px;
      color: var(--color-block);
    }
  }
}

@media only screen and (min-width: 768.999px) {
  [id] {scroll-margin-top: 250px;}
  .discPages {padding-bottom: 80px;}
  .disc-user {margin-bottom: 0; transform: translateY(-80px);
    .disc-user__tit {margin-bottom: 12px;
      h2 {padding: 15px 30px; font-size: 18px;
        &:after {width: calc(100% - 8px); height: calc(100% - 8px); top: 4px; left: 4px;}
      }
    }

    .disc-user__list {display: flex; flex-wrap: wrap;
      .disc-user__item {flex: 25%; border-top: none; padding-left: 15px; padding-right: 15px;
        &:not(:first-child):after {
          content: "";
          width: 1px;
          height: 100%;
          background-color: #ccc;
          position: absolute;
          top: 0;
          left: 0;
          pointer-events: none;
        }
        .disc-user__name {font-size: 18px;}
        .disc-user__img {width: 90px;}
      }
    }
  }

  .dpage-f {gap: 20px;
    .dpage-f__paragraph {
      svg {right: calc(100% - 1px);
        .--pc {display: block;}
        .--sp {display: none;}
      }
    }
  }

  .disc-body {display: flex; gap: clamp(24px, 4.2vw, 60px);
    .disc-body__left {flex: 258px; flex-shrink: 0;
      .disc-left__nav {position: sticky; top: 250px;
        h2 {font-size: 18px;}
      }
    }
    .disc-body__right {
      p {font-size: 16px; line-height: 1.8;
        small {font-size: 14px;}
      }
    }
  }
  .dpage-ex {margin-bottom: 50px;}
  .dpage-block {
    .dpage-points__head {display: flex;}
    .dpage-block__st {display: flex;}
    h2 {padding-left: 20px; border-width: 6px;}
    p {margin-bottom: 25px;}
  }

  .dpage-f {gap: 20px;
    .dpage-f__avt {width: 60px; height: 60px; border-width: 3px;}
    .dpage-f__paragraph {padding: 12px 20px;}
  }
  .dpage-block__points {padding: 20px;}
  .dpage-block__ref, .dpage-block__cr {font-size: 14px;}
}
@media only screen and (max-width: 768px) {
  .container {padding-left: 24px; padding-right: 24px;}
  .discPages {padding-bottom: 0;}
  .disc-user {margin-bottom: 20px;
    & + section.container {transform: translateY(-30px);}
    .disc-user__tit {margin-bottom: -18px;}
    .disc-user__list {padding-top: 25px; padding-bottom: 25px;}
  }
  .dpage-block {
    .dpage-points__head {
      > p {display: inline-block;}
      > h3 {letter-spacing: 2px; margin-top: 5px;}
    }
    & .dpage-block__points {
      &[data-t]:before {font-size: 18px; margin-bottom: 5px;}
      > p {letter-spacing: 1px;}
    }
  }
  .dpage-f__paragraph {
    p {letter-spacing: 1px;}
  }

  .dpage-block {
    .dpage-block__caution {
      padding-top: 20px;
    }
  }
  .dpage-btnimg {display: none !important;}
  .dpage-block__img-sp {overflow: auto; position: relative;
    img {width: 170%; max-width: none;}

    &:before {
      content: "";
      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==), rgba(0, 0, 0, 0.5);
      background-repeat: no-repeat, no-repeat, repeat;
      background-position: center center, top 15px left calc(50% - 3px), center;
      background-size: 40px 40px, 34px 14px;
      width: 120px;
      height: 90px;
      border-radius: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.35s;
      z-index: 10;
    }
    &:after {
      content: "スクロールできます";
      font-size: 10px;
      color: #fff;
      position: absolute;
      top: calc(50% + 32px);
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.35s;
      z-index: 11;
    }
    &.active:before, &.active:after {opacity: 0; pointer-events: none;}
  }
}

.subPage:has(.discPages) #footer>.r-container {
  display: none;
}

.dpage-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  z-index: 9999;

  .dpage-modal__content {
    background-color: #fff;
    max-width: 90vw;
    max-height: 90dvh;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;

    img {
      display: block;
      max-width: 90vw;
      max-height: 90dvh;
      width: auto;
      height: auto;
    }
  }

  &.active {opacity: 1; visibility: visible; pointer-events: auto;
    .dpage-modal__content {opacity: 1; transform: scale(1);}
  }
}