@charset "UTF-8";
/*
=================================================
	共通
=================================================
*/
#contents {
  background: #E5ECF4; }

#contents-img img.top-back {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 30% center; }
  @media screen and (max-width: 768px) {
    #contents-img img.top-back {
      height: 150px; } }
#contents-img ul {
  padding: 20px 50px;
  display: flex; }
  @media screen and (max-width: 480px) {
    #contents-img ul {
      padding: 20px 30px; } }
  #contents-img ul li {
    font-weight: bold;
    font-size: 0.75rem; }
    #contents-img ul li::after {
      content: ">";
      margin: 0 6px; }
    #contents-img ul li:last-child::after {
      content: "";
      margin: 0; }
    #contents-img ul li a {
      text-decoration: underline; }
      #contents-img ul li a:hover {
        text-decoration: none; }

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 50px;
  padding: 30px 50px 60px;
  max-width: 1280px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .wrapper {
      flex-direction: column;
      padding: 10px 0 0;
      gap: 10px; } }
  .wrapper #main {
    flex: 1;
    background: #fff;
    padding: 40px; }
    @media screen and (max-width: 768px) {
      .wrapper #main {
        margin: 0 10px; } }
    @media screen and (max-width: 480px) {
      .wrapper #main {
        padding: 20px; } }
    .wrapper #main .title {
      border-bottom: 1.4px solid #E5ECF4;
      margin-bottom: 50px; }
      .wrapper #main .title h2 {
        font-size: 2.5rem;
        letter-spacing: .1rem;
        padding: 0 0 10px 0; }
        @media screen and (max-width: 480px) {
          .wrapper #main .title h2 {
            font-size: 2.1875rem; } }
        .wrapper #main .title h2.animated-contents-title span {
          display: inline-block;
          opacity: 0;
          transform: translateY(100%);
          transition: all 0.6s ease-out; }
          .wrapper #main .title h2.animated-contents-title span.in-view {
            opacity: 1;
            transform: translateY(0); }
      .wrapper #main .title p {
        position: relative;
        padding: 0 20px 20px 20px;
        font-size: 0.75rem; }
        .wrapper #main .title p::before {
          content: "";
          display: inline-block;
          background-image: url("../images/circle.png");
          background-size: cover;
          background-repeat: no-repeat;
          width: 15px;
          height: 15px;
          position: absolute;
          top: 2px;
          left: 0; }
    .wrapper #main .pdf, .wrapper #main .word, .wrapper #main .excel, .wrapper #main .download {
      width: 100%;
      margin-bottom: 10px; }
      .wrapper #main .pdf a, .wrapper #main .word a, .wrapper #main .excel a, .wrapper #main .download a {
        display: block;
        background: #E4E9EF;
        color: #000;
        width: 100%;
        padding: 35px 35px 35px 95px;
        clip-path: polygon(20px 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 20px);
        border-radius: 0 8px 8px 8px;
        position: relative;
        font-size: 0.9375rem;
        font-weight: bold;
        letter-spacing: .05rem; }
        .wrapper #main .pdf a::before, .wrapper #main .word a::before, .wrapper #main .excel a::before, .wrapper #main .download a::before {
          content: "";
          display: inline-block;
          background-size: cover;
          background-repeat: no-repeat;
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 30px;
          margin: auto 0; }
        .wrapper #main .pdf a:hover, .wrapper #main .word a:hover, .wrapper #main .excel a:hover, .wrapper #main .download a:hover {
          background: #76b8ff;
          color: #fff; }
    .wrapper #main .pdf a::before {
      background-image: url("../images/icon-pdf.png"); }
    .wrapper #main .word a::before {
      background-image: url("../images/icon-word.png"); }
    .wrapper #main .excel a::before {
      background-image: url("../images/icon-excel.png"); }
    .wrapper #main .download a::before {
      background-image: url("../images/icon-download.png"); }
    .wrapper #main h3 {
      position: relative;
      padding: 15px 10px;
      font-size: 1.375rem;
      letter-spacing: .05rem;
      background: #076bed;
      color: #fff;
      margin-bottom: 20px; }
      .wrapper #main h3::before {
        position: absolute;
        top: 5px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 98%;
        height: 1px;
        content: '';
        border-radius: 3px;
        background: #fff; }
      .wrapper #main h3::after {
        position: absolute;
        bottom: 5px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 98%;
        height: 1px;
        content: '';
        border-radius: 3px;
        background: #fff; }
    .wrapper #main h4 {
      position: relative;
      padding: 12px 10px;
      font-size: 1.125rem;
      letter-spacing: .05rem;
      margin-bottom: 20px;
      color: #076bed; }
      .wrapper #main h4::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        content: '';
        border-radius: 3px;
        background-image: linear-gradient(to left, #76b8ff 0%, #076bed 100%); }
    .wrapper #main h5 {
      position: relative;
      padding: 0 35px;
      font-size: 1.0625rem;
      margin-bottom: 20px;
      color: #076bed; }
      .wrapper #main h5::before {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
        height: 1.25px;
        content: '';
        background: #076bed; }
      .wrapper #main h5 span {
        position: relative;
        padding: 0 10px;
        background: #fff; }
    .wrapper #main .mini-title {
      background: #076bed;
      padding: 6px 13px 6px 13px;
      clip-path: polygon(8px 0, 100% 0, 100% 22.4px, 66px 100%, 0 100%, 0 8px);
      color: #fff; }
    .wrapper #main dl.number {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      line-height: 1.4; }
      .wrapper #main dl.number dt {
        background: #076bed;
        padding: 3px 5.5px;
        border-radius: 30px;
        color: #fff;
        font-weight: bold;
        font-size: 0.75rem; }
    .wrapper #main p {
      line-height: 1.7; }
      .wrapper #main p.text-kome {
        font-size: 0.8125rem;
        padding-left: 1em;
        text-indent: -1em; }
    .wrapper #main a.a-underline {
      text-decoration: underline;
      color: blue; }
      .wrapper #main a.a-underline:hover {
        text-decoration: none; }
  .wrapper #aside {
    width: 250px; }
    @media screen and (max-width: 768px) {
      .wrapper #aside {
        display: none; } }
    .wrapper #aside div {
      position: sticky;
      top: 120px; }
      .wrapper #aside div ul {
        background: #fff;
        clip-path: polygon(100% 0, 100% 595px, 215px 100%, 0 100%, 0 0); }
        @media screen and (max-width: 768px) {
          .wrapper #aside div ul {
            clip-path: none; } }
        .wrapper #aside div ul li {
          font-size: 0.90625rem;
          font-weight: bold; }
          .wrapper #aside div ul li.nav-main-lg {
            border-bottom: 1px solid #fff;
            color: #fff;
            background: #076bed; }
            .wrapper #aside div ul li.nav-main-lg a {
              display: block;
              padding: 15px; }
              .wrapper #aside div ul li.nav-main-lg a:hover {
                background: #76b8ff; }
            .wrapper #aside div ul li.nav-main-lg.nav-main-lg-last {
              border-bottom: none;
              clip-path: polygon(100% 0, 100% 10px, 240px 100%, 0 100%, 0 0); }
              @media screen and (max-width: 768px) {
                .wrapper #aside div ul li.nav-main-lg.nav-main-lg-last {
                  clip-path: none; } }
            .wrapper #aside div ul li.nav-main-lg.nav-main-lg-between {
              border-top: 1px solid #fff; }
          .wrapper #aside div ul li.nav-main {
            font-weight: normal;
            font-size: 0.875rem; }
            .wrapper #aside div ul li.nav-main.border-line {
              border-bottom: 1px solid #E5ECF4; }
            .wrapper #aside div ul li.nav-main a {
              padding: 10px 15px 13px 30px; }
              .wrapper #aside div ul li.nav-main a:hover {
                color: #fff;
                background: #076bed; }
              .wrapper #aside div ul li.nav-main a.active {
                background: #76b8ff;
                color: #fff;
                font-weight: bold; }
          .wrapper #aside div ul li a {
            display: block;
            width: 100%; }
        .wrapper #aside div ul p {
          font-size: 0.90625rem;
          font-weight: bold;
          padding: 7px 15px;
          color: #fff;
          background: #000;
          position: relative; }
          .wrapper #aside div ul p::after {
            content: '';
            width: 7px;
            height: 7px;
            border: 0;
            border-bottom: solid 2px #fff;
            border-right: solid 2px #fff;
            transform: rotate(45deg);
            position: absolute;
            top: 30%;
            right: 15px;
            margin: auto; }