@charset "UTF-8";
/* ===========================================================

  Title: contents.css
  Created: 2019-3-26

=========================================================== */
/*
  Number Display
  Relation Link
  Timeline
  page-link

=========================================================== */










.number-display { }
.number-display .number-display__number {
  font-family: 'Roboto', sans-serif; font-weight: 700;
  font-size: 2.0em; color: #687476;
}
.number-display .number-display__lot { }

/* ===========================================================

  Relation Link

=========================================================== */

.relation-link {
  display: block; padding: 0; margin: 1.0rem 0;
  background-color: #e5e6ed;
}
.relation-link dt {
  display: block; padding: 0.5rem 1.0rem; margin: 0;
  font-size: 0.875rem; line-height: 1.4;
}
.relation-link dd {
  display: block; padding: 0.5rem 1.0rem; margin: 0;
  font-size: 0.875rem; line-height: 1.4;
  background-color: #F4F4F7;
}
.relation-link ul {
  display: flex; padding: 0; margin: 0 -1.0rem;
  flex-wrap: wrap; flex-direction: column; 
}
@media (min-width:768px) {
  .relation-link ul { flex-direction: row; }
}
.relation-link li {
  display: block; padding: 0.25rem 1.0rem; margin: 0;
}
.relation-link a {
  display: block; padding: 0.25rem 0 0.25rem 1.0rem; margin: 0;
  color: rgba(0,11,75,1.0); position: relative;
}
.relation-link a:hover {
  color: #d4b572;
}
.relation-link a::before {
  display: block; padding: 0.25rem 0; margin: 0;
  position: absolute; top: 0; left: 0;
  color: #d4b572;
  font-family: basicicon;
  content: '\e9ef';
  transition: all 0.5s;
}
.relation-link a:hover::before {
  color: rgba(0,11,75,1.0); 
}




/* ===========================================================

  Timeline

=========================================================== */


.timeline {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  width: 100%
}
.timeline li { display: block; padding: 0; margin: 0; }
.timeline .timeline__header,
.timeline .timeline__body { vertical-align: top; position: relative; }
.timeline .timeline__header {
  padding: 0.5em 2.0em;
}

.timeline .timeline__body {
  padding: 0 0 1.0em 2.0em;
}

.timeline .timeline__header::before,
.timeline .timeline__header::after,
.timeline .timeline__body::before,
.timeline .timeline__body::after {
  display: block; padding: 0; margin: 0;
  position: absolute;
  content: "";
}
.timeline .timeline__header::before,
.timeline .timeline__body::before {
  top: 0; left: 1.0em;
  width: 1px; height: 100%;
  background-color: rgba(0,0,0,0.10);
}
.timeline .timeline__header::before { }
.timeline .timeline__header::after {
  margin-top: -2px;
  top: 50%; left: calc(1.0em - 2px);
  width: 5px; height: 5px; border-radius: 50%;
  background-color: rgba(173,224,221,1.00);
  z-index: 5;
}
.timeline .timeline__body::before { }
.timeline .timeline__body::after { }
.timeline .timeline__body p { padding: 0; margin: 0; }

@media (min-width: 768px) {
  .timeline .timeline__header {
    padding: 1.0em 4.0em 1.0em 0;
    width: 1%; white-space: nowrap;
    vertical-align: top!important;
  }

  .timeline .timeline__body {
    padding: 1.0em 0 1.0em 4.0em;
  }

  .timeline .timeline__header::before {
    width: 6.0em; height: 1px;
    top: 1.8em; left: auto; right: -3.0em;
  }
  .timeline .timeline__header::after {
    margin-top: 0;
    top: calc(1.8em - 2px); left: auto; right: -3px;
  }
  .timeline .timeline__body::before { left: 0; }

  .timeline li:first-child .timeline__header,
  .timeline li:first-child .timeline__body { padding-top: 2.0em; }
  .timeline li:last-child .timeline__header,
  .timeline li:last-child .timeline__body { padding-bottom: 2.0em; }
  .timeline li:first-child .timeline__header::before { top: 2.8em; }
  .timeline li:first-child .timeline__header::after { top: calc(2.8em - 2px); }
}

/* ===========================================================

  Modal window

=========================================================== */

/* モーダルウィンドウのスタイル */
.modal-window {
  position:absolute;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  display:none;
  z-index: 1200;
}
 
/* オーバーレイのスタイル */
.modal-window__overLay {
  position:absolute;
  top:0;
  left:0;
  background:rgba(0,0,0,0.9);
  width:100%;
  height:100vh;
  z-index:10;
}
 
/* モーダルウィンドウの中身のスタイル */
.modal-window__inner {
  position:absolute;
  z-index:11;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.modal-window__close {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.modal-window__close {
  display: block; padding: 0; margin: 0;
  position: absolute; top: 0.5rem; right: 0.5rem;
  z-index:20;
}
.modal-window__close span {
  display: block;
  position: relative;
  width: 40px; height: 40px;
}
@media (min-width: 768px) {
  .modal-window__close { top: 1.0rem; right: 1.0rem; }
  .modal-window__close span { width: 80px; height: 80px; }
}
.modal-window__close span::before,
.modal-window__close span::after {
  display: block; padding: 0; margin: auto;
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  width: 100%; height: 1px;
  background-color: #fff;
  content: "";
}
.modal-window__close span::before { transform: rotate(45deg); }
.modal-window__close span::after { transform: rotate(-45deg); }

@keyframes modalopen{
  0% {top:-100%}
  100% {top:50%}
}
@keyframes modalclose {
  0% {top:50%}
  100% {top:100%}
}

/* ===========================================================

  page-link

=========================================================== */
.page-link figcaption {
    background-color: rgba(104,116,118,1.00);
    border-bottom: solid 4px rgba(173,224,221,1.00);
    color:#fff;
    padding: 10px;
    margin-bottom: 20px;
    line-height: 1.2 !important;
}
@media (min-width:768px) {
  .page-link figcaption{ margin-bottom: 0; }
}
.page-link figcaption strong {
    font-size: 24px;
    display: block;
    line-height: 1.2 !important;
}


/* ===========================================================

  js-scroll-table__caution

=========================================================== */
@media screen and (max-width: 1200px) {
  .js-scroll-table__caution {
    display: block !important;
  }
}


/* ===========================================================

  nowrap

=========================================================== */
.pc-nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .pc-nowrap {
    white-space: normal;
  }
}