@charset "utf-8";

/* 共通 */
.sp_only {
  display: none;
}

#brand_image_box {
  margin: 0 auto;
  text-align: center;
  margin-top: 40px;
}

.main_txt_box {
  font-size: 18px;
  line-height: 2.4;
  margin-top: 20px;
  margin-bottom: 70px;
}

.brand_story_rectangle {
  max-width: 1000px !important;
  margin: 0 auto;
}

.brand-history-title {
  color: #1f6088;
  text-align: left;
}

.brand-history-title {
  position: relative;
  padding: .3em 0 .2em 1em;
  border-bottom: 3px solid #3c98c3;
  color: #333333;
}

.brand-history-title::before {
  position: absolute;
  top: 0;
  left: .3em;
  transform: rotate(55deg);
  height: 11px;
  width: 12px;
  background: #3c98c3;
  content: '';
}

.brand-history-title::after {
  position: absolute;
  transform: rotate(15deg);
  top: .6em;
  left: 0;
  height: 8px;
  width: 8px;
  background: #3c98c3;
  content: '';
}

.brand-history-text {
  font-size: 16px;
}

h3 {
  margin-bottom: 0;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

/* デスクトップ用（デスクトップファースト） */
.timeline > li {
  display: flex;
  /* gap: 20px; */
  margin-bottom: 0;
  position: relative; /* 緑の●の基準 */
  overflow: hidden;
}

.timeline-date {
  flex: 0 0 110px; /* 固定幅 */
  margin-top: 20px;
  position: relative;
  font-size: 18px;
  color: #3c98c3;
}

.timeline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 0 30px 30px;
  border-left: 3px #c0d7dc solid;
  position: relative;
}

.timeline-content p {
  font-size: 16px;
}

/* 緑の●（デスクトップ版は線と中央で交差） */
.timeline-content:before {
  content: '';
  width: 12px;
  height: 12px;
  background: #3c98c3;
  position: absolute;
  left: -6px; /* 線中央に交差 */
  top: 24px;
  border-radius: 50%;
}

.category_btn_footerblock {
  margin: 50px auto 100px;
  text-align: center;
}

.cat_link_btn a {
  display: inline-block;
  width: 500px;
  background-color: #3c98c3;
  padding: 20px;
  border-radius: 5px;
  border: solid 1px #3c98c3;
  color: #ffffff;
  font-size: 16px;
}

.cat_link_btn a:hover {
  background-color: #1e80c6;
}  


@media (max-width: 639px) {
    .pc_only {
      display: none;
  }

    .brand_story_rectangle {
      max-width: 100% !important;
  }

    .contents_box {
      padding: 15px;
  }

    #brand_image_box {
      text-align: left;
      margin-top: 0;
  }

    .main_txt_box {
      font-size: 16px;
      line-height: 1.8;
      margin-top: 10px;
      margin-bottom: 50px;
  }
 
    .timeline > li {
      display: block;
      margin-bottom: 60px;
      position: relative;
      margin: 0 auto;
  }

    /* 年代を左端に揃える */
    .timeline-date {
      display: block;
      width: 90%;
      margin: 0 auto 12px;
      padding: 0 0 4px 0; /* 下のアンダーラインのため */
      text-align: left;
      border-bottom: 3px solid ;
  }

    /* コンテンツ（文章） */
    .timeline-content {
      display: block;
      width: 100%;
      padding: 10px 10px 30px 20px; /* 縦線との間隔 */
      margin-bottom: 20px;
      position: relative;
      border: none;
  }

    /* 緑●は削除 */
    .timeline-content:before {
      content: none;
  }

    .timeline-content p {
      margin-top: 10px;
      line-height: 1.6;
  }

    .cat_link_btn a {
      width: 80%;
  }

    .category_btn_footerblock {
      margin: 20px auto 50px;
      text-align: center;
  }
}