@charset "UTF-8";
/* Scss Document */
.page_header {
  color: #113479 !important; }

@media (max-width: 1024px) {
  .page_header {
    margin: 0 auto 50px;
    padding: 50px 0 0 0;
    min-height: auto; } }
/*max-width:1024px*/
@media (max-width: 480px) {
  .page_header {
    padding: 40px 0 0 0;
    min-height: auto; } }
/*max-width:480px*/
/******************************************************/
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  max-width: 1080px;
  width: calc(100% - 200px);
  margin: 0 auto; }
  .flex .side {
    height: 100%;
    width: 160px;
    top: 100px;
    position: sticky; }
  .flex h3 {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #113479;
    font: 3.8rem/1.0em 'Oswald', sans-serif;
    font-weight: 400; }
  .flex.outline {
    margin-bottom: 170px; }
  .flex.history {
    margin-bottom: 200px; }

.outline dl {
  width: calc(100% - 160px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font: 1.6rem/1.8em 'Noto Sans JP', sans-serif;
  font-weight: 500; }
.outline dt {
  width: 170px;
  border-bottom: 1px solid #ccc;
  color: #113479;
  padding: 15px; }
.outline dd {
  padding: 15px 0px;
  border-bottom: 1px solid #ccc;
  width: calc(100% - 170px); }

.history_flex {
  width: calc(100% - 160px); }
  .history_flex > div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    position: relative;
    padding: 0 0 40px; }
    .history_flex > div .border-line {
      /*線の位置*/
      position: absolute;
      left: 116px;
      top: 17px;
      width: 2px;
      /*線の太さ*/
      height: 0;
      /*はじめは高さを0に*/
      background: #dcdddd; }
    .history_flex > div:before {
      position: absolute;
      content: "";
      display: block;
      background-color: #113479;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      left: 112px;
      top: 15px;
      z-index: 1; }
  .history_flex h4 {
    font: 4.0rem/1.0em 'Oswald', sans-serif;
    font-weight: 400;
    width: 80px;
    color: #113479;
    padding: 0;
    text-align: center;
    position: relative; }
    .history_flex h4 span:nth-of-type(1) {
      display: block;
      font: 1.5rem/1.0em 'Noto Sans JP', sans-serif;
      font-weight: 400;
      margin: 8px 0 0; }
  .history_flex dl {
    padding: 5px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font: 1.6rem/1.8em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    width: calc(100% - 160px);
    position: relative; }
    .history_flex dl:last-of-type {
      margin: 0; }
  .history_flex dt {
    width: 55px; }
  .history_flex dd {
    width: calc(100% - 55px); }

@media (max-width: 1280px) {
  .flex {
    max-width: 1080px;
    margin: 0 20px 0 100px;
    width: calc(100% - 120px); }
    .flex .side {
      width: 120px; }

  .outline dl {
    width: calc(100% - 120px); }

  .history_flex {
    width: calc(100% - 120px); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .flex {
    max-width: 768px;
    margin: 0 auto;
    width: calc(100% - 40px); }
    .flex .side {
      width: 80px;
      top: 70px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .flex .side {
    width: 60px;
    top: 70px; }

  .outline dl {
    width: calc(100% - 60px); }
  .outline dd span {
    display: block; }

  .history_flex {
    width: calc(100% - 60px); }
    .history_flex h4 {
      font: 4.0rem/1.0em 'Oswald', sans-serif;
      font-weight: 400;
      width: 80px; }
    .history_flex dl {
      display: block;
      width: calc(100% - 130px); }
    .history_flex dd {
      width: 100%; }
    .history_flex > div .border-line {
      left: 102px; }
    .history_flex > div:before {
      width: 11px;
      height: 11px;
      left: 97px;
      top: 15px;
      z-index: 1; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .flex .side {
    width: 50px;
    height: 100%;
    top: 70px;
    position: sticky; }
  .flex h3 {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #113479;
    font: 2.8rem/1.0em 'Oswald', sans-serif;
    font-weight: 400; }
  .flex.outline {
    margin-bottom: 100px; }
  .flex.history {
    margin-bottom: 150px; }

  .outline dl {
    width: calc(100% - 50px); }
  .outline dt {
    border-bottom: none;
    padding: 15px 0 0; }
  .outline dd {
    padding: 0 0 15px;
    width: 100%; }
  .outline dd span {
    display: block; }

  .history_flex {
    padding: 0;
    width: calc(100% - 50px); }
    .history_flex > div .border-line {
      /*線の位置*/
      position: absolute;
      left: 68px;
      top: 14px;
      width: 1px;
      /*線の太さ*/
      height: 0;
      /*はじめは高さを0に*/
      background: #dcdddd; }
    .history_flex > div:before {
      position: absolute;
      content: "";
      display: block;
      background-color: #113479;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      left: 65px;
      top: 11px;
      z-index: 1; }
    .history_flex h4 {
      display: block;
      font: 2.5rem/1.0em 'Oswald', sans-serif;
      font-weight: 400;
      width: 56px;
      margin: 0 0 13px; }
      .history_flex h4 span:nth-of-type(1) {
        display: block;
        margin: 8px 0 0;
        font: 1.4rem/1.0em 'Oswald', sans-serif;
        font-weight: 400; }
      .history_flex h4:before {
        left: -25px;
        right: auto; }
    .history_flex dl {
      padding: 0;
      display: flex;
      width: calc(100% - 90px); }
    .history_flex dt {
      width: 50px; }
    .history_flex dd {
      width: 100%;
      font: 1.5rem/1.6em 'Noto Sans JP', sans-serif;
      font-weight: 400; } }
/*max-width:480px*/