@import url('https://fonts.googleapis.com/css2?family=Martel&display=swap');

:root{
--ff-martel:'Martel',"Times New Roman","YuMincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}

.message-catch {font-size: 1.3em;margin-top: 2em;line-height: 1.4;white-space: nowrap;}

/*メイン*/
.bg-mv {margin-top: 2em;margin-inline:calc(50% - 50vw);overflow: hidden;}
.bg-mv-image {width: 100%;aspect-ratio: 1 / 2;object-fit: cover;}
/*年別*/
.section-timeline {padding-bottom: 4em;}
.section-timeline-header {
  font-family: var(--ff-martel);
  font-weight: normal;
  font-size: 4em;
  white-space: nowrap;
  text-align: center;
  margin-top: 0;
  height: auto;
  display: flex;
  align-items: center;
  border-block: 1px solid var(--bdc-gray);
  margin-top: 1em;
color: var(--c-primary);
}
.section-timeline-header-unit{font-family: var(--ff-serif);font-size: 0.3em;padding-top: 2.2em;}
.article-timeline {margin-top:4em;}
.section-timeline-header span {display: inline-block;}
.article-timeline-header {}
.article-timeline-header-ad {font-family: var(--ff-martel);font-size: 2em;line-height: 1;}
.article-timeline-header-ja {}
.article-timeline-header-ja-num {font-family: var(--ff-martel);font-size: 1.2em;vertical-align:0.1em;}
.article-timeline-col-1,
.article-timeline-col-2 {display: flex;margin-top: 1.5em;}
.article-timeline-col-1-header,
.article-timeline-col-2-header {-webkit-font-feature-settings:normal;font-feature-settings:normal;letter-spacing: 0.1em;line-height: 1;-ms-writing-mode: tb-rl; writing-mode: vertical-rl;text-orientation: upright;padding-block-start: 1em;}
.article-timeline-col-1-row-1,
.article-timeline-col-2-row-1 {border-left: 1px solid var(--c-text);padding-inline-start: 1em;display: flex;flex-direction: column;gap:2em}
.article-timeline-col-1-row-1-ng{}
.article-timeline-col-1-row-1-nc{}
.article-timeline-col-2-row-1-f{}
.article-timeline-header-ng,
.article-timeline-header-nc {
  display: inline-flex;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-size: 1.4em auto;
  background-position: left 1em top 50%;
  padding: 0.3em 0.8em;
  font-weight:bold;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: 1.5em;
  font-size: 0.8em;
  gap: 0.5em;
  align-items: center;
  min-width: 12em;
  white-space: nowrap;
border: 2px solid hsl(12, 4%, 63%);
border-radius: 0 0.4em 0 0.4em;
}
.article-timeline-header-ng{ }

.article-timeline-header-nc {background-color:#FFF;border: 2px solid var(--c-primary);color: var(--c-primary);}


.article-timeline-header-nc-icon,
.article-timeline-header-ng-icon{width: 2em;height: auto;}

.article-timeline-header-ng-icon {}

.article-timeline-body {}
.article-timeline-body-text {line-height: 1.3;margin: 1em 0;}
.article-timeline-body-figure {width: 80%;margin-inline: auto;}
.article-timeline-body-figure-image {width: 100%;}
.article-timeline-body-figcaption {font-size: 0.8em;line-height: 1.4;}
.article-timeline-col-1-row-2 {}
.article-timeline-header-nc {}
.article-timeline-col-2 {}
.article-timeline-col-2-header {}
.article-timeline-body-text + .article-timeline-body-text{margin-top: 1em;}

.article-timeline-col-1-row-1-ng-alt{display: grid;gap: 0 1.0rem;grid-template-columns: repeat(2,1fr);}
.article-timeline-col-1-row-1-ng-alt .article-timeline-body{grid-area: 2 / 1 / 3 / 3;}

/*年代*/
.article-era {margin-top: 2em;background-color: #fefff6;margin-inline: auto;padding-block: 1em;background-image: url("../images/company/history/bg-era.webp"); background-repeat: no-repeat; background-size: cover; background-position: right 50% top 50%;}
.article-era-header {font-weight: normal;text-align: center;font-family: var(--ff-martel);font-size: 1.6em;white-space: nowrap;}
.article-era-header-num {font-size: 2em;vertical-align:0.0em;}
.article-era-body {margin-top: 1em;}
.article-era-body-text {line-height: 1.4;text-align: center;}
.article-era-body-figure {width: 80%;margin-inline: auto;margin-top: 1em;}
.article-era-body-figure-image {width: 100%;}

/*ページ内のリンク*/
.snav-era-wrapper{width: 100%;overflow-y: hidden;overflow-x: auto;position:fixed;z-index: 3900;left: 0;top: auto;box-shadow:0em 0.25em 0.5em 0em hsla(0,0%,0%,0.1);background-color: #fff;opacity: 0;display: none;bottom: 0;}
.snav-era {display: flex;gap:2em;width: fit-content;padding:2em 2em ;;}
.snav-era-item {}
.snav-era-link {font-size: 0.9em;display: block;white-space:nowrap;font-family: var(--ff-martel);border-bottom: 1px solid var(--c-primary);color: var(--c-primary);text-decoration: unset;cursor: pointer;}
.snav-era-link.active {background-color: var(--bgc-gray);}

.custom-col-1 {display: flex;gap:1.5rem}
.custom-col-1 > * {flex:1 1 0}

@media (min-width: 500px) {

.message-catch{font-size:2em;text-align: center;}

/*メイン*/
.bg-mv {margin-top: 3em;}
.bg-mv-image {width: 100%;aspect-ratio: 2 / 1;}

/*年別*/
.section-timeline-header{font-size:3.5em;height: auto;}
.article-timeline-header{border-bottom: 1px solid var(--c-text);padding-bottom: 2em;}
.article-timeline-header-ja{text-align: center;}
.article-timeline {width:100%;margin-inline: auto;margin-block: 4em;}
.article-timeline-col-1-row-1{flex:1 1 0;}
.article-timeline-col-1-row-1-ng{}
.article-timeline-col-1-row-1-nc {}
.article-timeline-col-2-row-1{}
.article-timeline-body-figure{width: 100%;}
.article-timeline-body-figure-image {aspect-ratio: 4 / 3;max-width: 24em;object-fit: contain;margin-inline: auto;}
.article-timeline-col-2-row-1-f{}
.article-timeline-body-text{font-size: 1.8em;text-align: center;}
.article-timeline-header-ad{font-size: 2.2em;text-align: center;margin-top: -0.3rem;}
.article-timeline-col-1,
.article-timeline-col-2 {margin-top: 2em;flex-direction: column;padding-top: 2em;}
.article-timeline-col-1-header,
.article-timeline-col-2-header {padding-block:0 0.5em;-ms-writing-mode: unset;writing-mode: unset;text-orientation: unset;position: relative;margin-bottom: 1em;letter-spacing: 0.2em;font-size: 1.05em;}
.article-timeline-col-1-header::after,
.article-timeline-col-2-header::after {content: "";background-color: var(--bdc-gray);position: absolute;width: 1px;height:2em;left: 0.5em;bottom: 0.0em;transform: translate(-50%,100%);}
.article-timeline-col-1-row-1,
.article-timeline-col-2-row-1 {padding:0 0;flex:1 1 0;border-left: unset;gap: 4em;}
.article-timeline-header-ng, .article-timeline-header-nc {margin-inline: auto;width:fit-content;display: flex;}
.article-timeline-body-figcaption {text-align: center;}

/*3列対応*/
.article-timeline{display: grid;grid-template-columns: 1fr 4fr 2fr;gap:0}
.article-timeline-col-1-row-1{display: grid;gap: 1.5rem;grid-template-columns: repeat(2,1fr);}
.article-timeline-col-1-row-1-ng,
.article-timeline-col-1-row-1-nc {flex:1 1 0}
.article-timeline-body-text {text-align: left;font-size: 0.9em;}
.article-timeline-col-2{border-left: 1px solid var(--bdc-gray);padding:0 0 0 1.5rem;margin: 0;grid-area: 1 / 3 / 2 / 4;}
.article-timeline-col-1{padding: 0 1.5rem 0 0;margin: 0;padding:0 1.5rem 0 1.5rem;grid-area: 1 / 2 / 2 / 3}
.article-timeline-header {border-bottom: none;grid-area: 1 / 1 / 2 / 2;border-right: 1px solid var(--bdc-gray);}
.article-timeline-header-ng, .article-timeline-header-nc{width:100%;}
.article-timeline-col-2-header {margin-bottom: 1em;}
.article-timeline-col-2-header::after {height: 1px;left: 0;width: 100%;transform:unset}
.article-timeline-col-1-header::after {height: 1px;width: 100%;transform:unset;left: 0;}
.article-timeline-col-1-row-1-ng{grid-area: 1 / 1 / 2 / 2;}
.article-timeline-col-1-row-1-nc{grid-area: 1 / 2 / 2 / 3;}


.article-timeline-col-1-row-1:has(.article-timeline-col-1-row-1-ng-alt ){grid-template-columns: auto;}







/*年代*/
.article-era {max-width: 42rem;}
.article-era-header {font-size:2em;}
.article-era-body-figure{ max-width: 20rem;margin-inline:auto}
.article-era-body-figure-image {}
.article-era-body-text{font-size: 1.2em;}


/*ページ内のリンク*/
.snav-era-wrapper {width: 100%;top: unset;left: 0;overflow: visible;display: block;opacity: 1;background-color: unset;position: fixed;box-shadow:unset;z-index: 2100;}
.snav-era {justify-content: center;margin-inline: auto;backdrop-filter:blur(8px);background-color: hsla(0, 0%, 100%,0.66);padding: 1em 2em;}

}