@charset "UTF-8";
.page-outline {
  opacity: 0;
  transition: 1s;
  /* Google Mapのiframe */
}

.page-outline.is-active {
  opacity: 1;
}

.page-outline dl, .page-outline dt, .page-outline dd {
  margin: 0;
  padding: 0;
}

.page-outline h2 {
  text-align: center;
  margin-bottom: 50px;
  color: #606060;
}

@media only screen and (min-width: 768px) {
  .page-outline h2 {
    font-size: 1.6rem;
  }
}

.page-outline .map {
  position: relative;
  height: 0;
  margin: 50px auto;
  padding-top: 60%;
  width: 90%;
}

@media only screen and (min-width: 768px) {
  .page-outline .map {
    width: 70%;
    padding-top: 35%;
    /* 比率を4:3に固定 */
  }
}

.page-outline .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-outline .year-up {
  display: none;
}

@media only screen and (min-width: 768px) {
  .page-outline .year-up {
    display: inherit;
  }
}

.outline-company {
  max-width: 700px;
  margin: 70px auto 0;
  width: 90%;
}

@media only screen and (min-width: 768px) {
  .outline-company {
    margin: 100px auto 0;
  }
}

.outline-company > dl {
  margin: 0 0 30px !important;
}

@media only screen and (min-width: 768px) {
  .outline-company > dl {
    display: flex;
    justify-content: space-between;
  }
}

@media only screen and (min-width: 768px) {
  .outline-company > dl dt {
    width: 200px;
  }
}

.outline-company > dl dd {
  width: 100%;
}

.outline-company .ot-column {
  margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
  .outline-company .ot-column {
    display: flex;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .outline-company .ot-column .ot-l {
    width: 200px;
  }
}

.outline-company .ot-column .ot-r {
  width: 100%;
}

.outline-year {
  margin: 70px auto 0;
  max-width: 1000px;
  width: 90%;
}

@media only screen and (min-width: 768px) {
  .outline-year {
    margin: 150px auto 0;
  }
}

.outline-year .year-wrap {
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
  .outline-year .year-wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.outline-year .year-wrap .year-l {
  margin-bottom: 5px;
}

@media only screen and (min-width: 768px) {
  .outline-year .year-wrap .year-l {
    width: 20%;
    padding: 10px;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .outline-year .year-wrap .year-m {
    width: 30%;
    padding: 10px;
  }
}

@media only screen and (min-width: 768px) {
  .outline-year .year-wrap .year-r {
    width: 50%;
    padding: 10px;
  }
}

.outline-year .year-wrap.year-up {
  font-weight: bold;
}

.outline-event {
  margin: 70px auto;
  width: 90%;
  opacity: 0;
  transition: 1.5s;
  font-size: 90%;
}

@media only screen and (min-width: 768px) {
  .outline-event {
    margin: 150px auto;
  }
}

.outline-event.is-active {
  opacity: 1;
}

.outline-event .year-wrap {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

@media only screen and (min-width: 768px) {
  .outline-event .year-wrap {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000;
  }
}

.outline-event .year-wrap .year-l {
  margin-bottom: 5px;
  padding-left: 10px;
}

@media only screen and (min-width: 768px) {
  .outline-event .year-wrap .year-l {
    width: 10%;
    padding: 10px;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .outline-event .year-wrap .year-m {
    width: 30%;
    padding: 10px;
  }
}

.outline-event .year-wrap .year-r {
  margin-top: 10px;
  padding-left: 10px;
}

@media only screen and (min-width: 768px) {
  .outline-event .year-wrap .year-r {
    width: 50%;
    padding: 10px;
    margin-top: 0;
  }
}

.outline-event .year-wrap.year-up {
  font-weight: bold;
}

/* --- 共通の画像表示エリア --- */
.year-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  /* 背景画像の切り替え(0.8s)と透明度の変化(0.4s)を滑らかに */
  transition: opacity 0.4s ease,  visibility 0.4s ease,  background-image 0.8s ease-in-out, height 0.4s ease, margin 0.4s ease;
  will-change: opacity, background-image;
}

/* --- PC版 (769px以上) --- */
@media (min-width: 769px) {
  .year-image {
    position: fixed;
    width: 300px;
    height: 200px;
    pointer-events: none;
    top: 0;
    left: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
}

/* --- SP版 (768px以下) --- */
@media (max-width: 768px) {
  .year-image {
    position: relative;
    width: 100%;
    height: 0;
    /* 最初は高さを隠す */
    margin: 0;
    box-shadow: none;
  }
}

/* --- アクティブ時 (共通) --- */
.year-image.is-active {
  opacity: 1;
  visibility: visible;
}

/* --- SP版 (768px以下) --- */
@media (max-width: 768px) {
  .year-image {
    position: relative;
    width: 100%;
    /* 状態1：非表示のときは高さを0にするが、transitionは設定しない */
    height: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    /* opacityとbackground-imageだけにアニメーションをかける */
    transition: opacity 0.6s ease,  visibility 0.6s ease,  background-image 0.8s ease-in-out;
  }
  .year-image.is-active {
    /* 状態2：アクティブ時は即座に高さを出す（ぬるっと動かさない） */
    height: 220px;
    margin: 15px 0;
    opacity: 1;
    visibility: visible;
  }
}

/* aタグの基本スタイルに transition を追加 */
.year-m a {
  display: inline-block;
  padding: 2px 8px;
  /* 少し余白があると背景色が綺麗に見えます */
  border-radius: 4px;
  transition: background-color 0.4s ease, color 0.4s ease;
  text-decoration: none;
}

/* 画像が表示されている時のaタグのスタイル */
.year-m a.active-link {
  background-color: #f2f2f2;
  /* お好みの背景色に変更してください */
  color: #000;
  /* アクティブ時の文字色 */
}

@media only screen and (min-width: 768px) {
  .year-m a.active-link {
    background: none;
  }
}

.effect {
  opacity: 0;
}

.effect.is-active {
  animation-name: fadeup;
  /*--アニメーション名--*/
  animation-duration: 1.5s;
  /*--時間--*/
  animation-delay: 0s;
  /*--3秒後に開始--*/
  animation-fill-mode: forwards;
  /*--状態指定--*/
}

@keyframes fadeup {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

#koushi-container {
  margin: 40px 0 80px;
}

@media only screen and (min-width: 768px) {
  #koushi-container {
    margin: 80px 0;
  }
}

.koushi-column {
  max-width: 1000px;
  width: 90%;
  margin: auto;
  padding: 10px;
  border-bottom: 1px solid #000;
}

@media only screen and (min-width: 768px) {
  .koushi-column {
    display: flex;
    justify-content: space-between;
  }
}

.koushi-column .name {
  display: flex;
}

@media only screen and (min-width: 768px) {
  .koushi-column .name {
    width: 50%;
    display: flex;
  }
}

.koushi-column .name span.name-l {
  display: block;
  margin-right: 1rem;
}

@media only screen and (min-width: 768px) {
  .koushi-column .name span.name-l {
    width: 180px;
    display: inline;
    margin-right: 0;
  }
}

.koushi-column .name span.name-r {
  font-size: 80%;
}

@media only screen and (min-width: 768px) {
  .koushi-column .name span.name-r {
    margin-left: 1rem;
  }
}

.koushi-column .label-column {
  font-size: 90%;
}

@media only screen and (min-width: 768px) {
  .koushi-column .label-column {
    display: flex;
    justify-content: space-between;
  }
}

.koushi-column .label-column .label-l {
  padding-right: 10px;
}

@media only screen and (min-width: 768px) {
  .koushi-column .label-column .label-r::before {
    content: "|";
    display: inline-block;
  }
}