@charset "UTF-8";
/*
編集はscssで行うこと
*/
.media-box.bottom {
  max-width: 100%; }

.page-heading {
  margin: 3em 0; }
  @media screen and (min-width: 768px) {
    .page-heading {
      margin-top: 5em; } }
  .page-heading h1 {
    font-size: 18px;
    line-height: 1.8; }
    @media screen and (max-width: 767px) {
      .page-heading h1 {
        display: flex;
        flex-direction: column;
        align-items: center; } }
    @media screen and (min-width: 768px) {
      .page-heading h1 {
        font-size: 24px;
        text-align: center; } }

.index-page {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .index-page .page-heading {
    margin: 2em 0; }
    .index-page .page-heading h1 {
      font-size: 24px; }
      @media screen and (min-width: 768px) {
        .index-page .page-heading h1 {
          font-size: 28px; } }

.lead {
  margin-top: 20px;
  text-align: justify;
  word-break: break-all; }
  @media screen and (min-width: 768px) {
    .lead {
      font-size: 18px; } }

.indices {
  max-width: 800px;
  margin: 0 auto 50px; }

.index {
  margin: 20px 0;
  padding: 12px 15px 10px;
  background-color: #eee; }
  @media screen and (min-width: 768px) {
    .index {
      padding: 17px 30px 15px; } }
  .index ul {
    margin: 10px 0;
    padding: 0; }
  .index li {
    list-style: none;
    padding: 0.7em 0;
    font-size: 15px; }
    @media screen and (min-width: 768px) {
      .index li {
        padding: 0.5em 1em; } }
    .index li span:first-of-type {
      display: inline-block;
      min-width: 4em; }
      @media screen and (min-width: 768px) {
        .index li span:first-of-type {
          min-width: 4.5em; } }
  .index.uc {
    margin-bottom: 80px; }
    .index.uc span:first-of-type {
      display: inline-block;
      min-width: 2em; }
      @media screen and (min-width: 768px) {
        .index.uc span:first-of-type {
          min-width: 2.5em; } }
  .index a::after {
    display: inline-block;
    content: "\f105";
    font-family: FontAwesome;
    margin-left: .9em; }

.overview {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px; }
  .overview p {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: justify; }

.apply {
  margin: 1em 0 50px;
  text-align: center; }
  .apply a {
    display: inline-block;
    padding: 10px 18px;
    border: solid 1px #ccc;
    border-radius: 50px;
    transition: 0.3s; }
    @media screen and (min-width: 768px) {
      .apply a {
        min-width: 400px; } }
    .apply a:hover {
      background-color: #f0f0f8;
      transition: 0.3s; }
    .apply a::after {
      display: inline-block;
      content: "\f105";
      font-family: FontAwesome;
      margin-left: .8em; }
    .apply a[target="_blank"]::after {
      content: "\f08e"; }
  .apply p.note {
    margin: 15px 0 0;
    font-size: 0.9em;
    color: #666; }

.link-bn {
  margin: 20px auto;
  max-width: 800px; }
  .link-bn a {
    display: block; }
    .link-bn a:hover img {
      opacity: 0.6;
      transition: 0.3s; }
    .link-bn a img {
      display: block;
      height: auto;
      max-width: 100%;
      margin-bottom: 5px;
      transition: 0.3s; }
    .link-bn a p::after {
      display: inline-block;
      content: "\f105";
      font-family: FontAwesome;
      margin-left: .3em; }
    .link-bn a[target="_blank"] p::after {
      content: "\f08e"; }

.contents {
  max-width: 800px;
  margin: 0 auto 50px; }
  .contents h2 {
    margin-top: 4em;
    margin-bottom: 2em;
    font-size: 1.05em;
    line-height: 1.8; }
  .contents h3 {
    font-size: 1.05em; }
  .contents p {
    margin-bottom: 2em;
    line-height: 1.8; }
    .contents p.note {
      margin-top: -1em;
      font-size: 0.9em;
      color: #666; }
    .contents p.attention {
      color: #d00; }
    .contents p .red {
      color: #d00; }
    .contents p .blue {
      color: #49f; }
  .contents figure {
    margin-bottom: 4em; }
    .contents figure.section-top {
      margin-top: 6em;
      margin-bottom: 1em; }
    .contents figure img {
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .contents figure img + img {
          margin-top: 8px; } }
    .contents figure figcaption {
      margin-top: 5px;
      text-align: center; }
  .contents a {
    color: #637695; }
    .contents a:hover {
      color: #252d38; }
    .contents a::after {
      display: inline-block;
      content: "\f105";
      font-family: FontAwesome;
      margin-left: .6em; }
    .contents a[target="_blank"]::after {
      content: "\f08e"; }
    .contents a[href*=".pdf"]::after {
      content: "\f1c1"; }
    .contents a.pdf::after {
      content: "\f1c1"; }
  .contents ul, .contents ol {
    margin-bottom: 2em;
    padding-left: 0.5em; }
    @media screen and (min-width: 768px) {
      .contents ul, .contents ol {
        padding-left: 2em; } }
  .contents li {
    margin-bottom: 0.8em; }
  .contents hr {
    margin: 4em 0; }

.voice-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 40px auto; }
  @media screen and (max-width: 767px) {
    .voice-box {
      flex-direction: column; } }
  .voice-box > p {
    width: 100%;
    margin-bottom: 1em; }
  .voice-box > div:first-of-type {
    width: 20%; }
    @media screen and (max-width: 767px) {
      .voice-box > div:first-of-type {
        width: 40%;
        order: 1; } }
  @media screen and (min-width: 768px) {
    .voice-box > div:last-of-type {
      width: 80%; } }
  .voice-box > div:last-of-type p {
    box-sizing: border-box;
    position: relative;
    margin: 0 0 0 30px;
    padding: 2em 2.8em;
    border: solid 2px #666;
    border-radius: 18px;
    color: #555;
    font-size: 1.1em;
    text-align: justify; }
    @media screen and (max-width: 767px) {
      .voice-box > div:last-of-type p {
        margin: 0 0 30px 0;
        padding: 1em; } }
    .voice-box > div:last-of-type p::after {
      content: "";
      position: absolute;
      top: 50%;
      left: -19px;
      border-top: 12px solid #fff;
      border-right: 12px solid #fff;
      border-bottom: 12px solid transparent;
      border-left: 12px solid transparent;
      transform: translateY(2px); }
      @media screen and (max-width: 767px) {
        .voice-box > div:last-of-type p::after {
          top: 100%;
          left: 50%;
          transform: scaleX(-1) translate(-2px, -5px); } }
    .voice-box > div:last-of-type p::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -24px;
      border-top: 12px solid #666;
      border-right: 12px solid #666;
      border-bottom: 12px solid transparent;
      border-left: 12px solid transparent; }
      @media screen and (max-width: 767px) {
        .voice-box > div:last-of-type p::before {
          top: 100%;
          left: 50%;
          transform: scaleX(-1); } }