@charset "UTF-8";

.history-page{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;color:#111}
.history-hero{position:relative}
.history-hero>img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;filter:grayscale(1)}
.history-hero>div{position:absolute;inset:0;display:grid;color:#fff;text-align:center;place-content:center}
.history-hero b{font-family:"Sterling Display","Times New Roman",serif;font-size:42px;font-weight:400}
.history-hero span{font-family:"Sterling Display","Times New Roman",serif;font-size:27px;letter-spacing:.12em}
.history-hero small{margin-top:24px;font-family:"Zen Old Mincho",serif;font-size:14px;line-height:2;letter-spacing:.12em}
.history-message{padding-top:62px;padding-bottom:92px;font-family:"Zen Old Mincho","Yu Mincho",serif}
.history-message h1{margin:0 0 58px;font-size:22px;font-weight:600;line-height:1.7;text-align:center;letter-spacing:.12em}
.history-message p{margin:0 8% 38px;font-size:18px;line-height:1.85;letter-spacing:.12em}
.history-timeline{padding-bottom:110px}
.history-timeline>h2{margin:0 5% 95px;padding-bottom:30px;border-bottom:1px solid #225C8D;font-family:"Sterling Display","Times New Roman",serif;font-weight:400;text-align:center}
.history-timeline__list{position:relative;padding-left:28px;border-left:2px solid #5d8fbd}
.history-timeline__item{position:relative;margin-bottom:30px}
.history-timeline__item::before{content:"";position:absolute;top:28px;left:-35px;width:14px;height:14px;border-radius:50%;background:#65a3d5}
.history-timeline__item h3{margin:0;padding:0 0 12px 12px;border-bottom:1px solid #8ab5d8;color:#6d9dcb;font-family:"Sterling Display","Times New Roman",serif;font-size:26px;font-weight:400}
.history-timeline__item h3 span{margin-right:8px}
.history-timeline__item>div{display:grid;grid-template-columns:minmax(0,1fr) 34%;gap:12px;padding:22px 0 8px 12px}
.history-timeline__item h4{grid-column:1;margin:0;font-family:"Zen Old Mincho",serif;font-size:18px;line-height:1.5;letter-spacing:.08em}
.history-timeline__item p{grid-column:1;margin:0;font-size:13px;line-height:1.7}
.history-timeline__item img{grid-column:2;grid-row:1/3;width:100%;align-self:center;border-radius:5px}
.history-timeline__item--multiple>.history-timeline__entries{grid-template-columns:1fr;gap:30px}
.history-timeline__entry{display:grid;grid-template-columns:minmax(0,1fr) 34%;gap:12px}
.history-values{box-sizing:border-box;width:100%;max-width:1920px;margin:0 auto;padding:24px 0 0;background:#fff url("../../img/renewal/history/white_bg.png") center top/100% auto no-repeat}
.history-values>.history-value.section-spacing.about-history-value{margin-top:0;padding:68px 6.5% 76px}
.history-values>.history-value.section-spacing.about-history-value:last-child{padding-bottom:0}
.history-value{padding:72px 6.5% 92px}
.history-value__lead{margin:0 0 30px;font-family:"Zen Old Mincho",serif;font-size:22px;line-height:1.55;text-align:center;letter-spacing:.12em}
.history-value h2{margin:0 7% 15px;padding-top:28px;border-top:1px solid #225C8D;text-align:center}
.history-value h2 span{font-family:"Zen Old Mincho",serif;font-size:38px;font-weight:400;letter-spacing:.12em}
.history-value>img{display:block;width:76%;max-width:500px;margin:0 auto 28px;border-radius:18px}
.history-value>p:not(.history-value__lead){max-width:720px;margin:0 auto;font-size:14px;line-height:1.8}
.history-value__button{width:min(90%,430px);margin:45px auto 0}
@media(min-width:768px){.history-hero>img{aspect-ratio:2.4}.history-message,.history-timeline{max-width:900px}.history-timeline__item h4{font-size:22px}.history-timeline__item p{font-size:15px}.history-value>p:not(.history-value__lead){font-size:16px}
  .history-values{padding-top:80px;padding-bottom:0}
  .history-values>.history-value.section-spacing.about-history-value{padding:110px 40px 120px}
  .history-message{max-width:980px;margin-right:auto;margin-left:auto}
  .history-timeline{max-width:980px;margin-right:auto;margin-left:auto}
  .history-value{max-width:980px;margin-right:auto;margin-left:auto}
  .about-history-value{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:0 64px;max-width:1120px;padding-right:40px;padding-left:40px;align-items:center}
  .about-history-value>img{grid-column:1;grid-row:1/-1;width:100%;max-width:none;margin:0}
  .about-history-value>.history-value__lead,.about-history-value>h2,.about-history-value>p:not(.history-value__lead),.about-history-value>.history-value__button{grid-column:2}
  .about-history-value--reverse{grid-template-columns:minmax(0,1fr) minmax(0,44%)}
  .about-history-value--reverse>img{grid-column:2}
  .about-history-value--reverse>.history-value__lead,.about-history-value--reverse>h2,.about-history-value--reverse>p:not(.history-value__lead),.about-history-value--reverse>.history-value__button{grid-column:1}
  .about-history-value .history-value__lead{text-align:left}
  .about-history-value h2{margin-right:0;margin-left:0}

  .history-message{box-sizing:border-box;width:min(calc(100% - 80px),1120px);max-width:none;min-height:auto;padding:70px 20px 90px;writing-mode:vertical-rl}
  .history-message h1{margin:0 0 0 54px;font-size:24px;line-height:1.9;text-align:left}
  .history-message p{margin:0 0 0 30px;font-size:17px;line-height:1.9}
  .history-timeline{width:min(calc(100% - 80px),1120px);max-width:none}
  .history-timeline>h2{width:min(100%,420px);margin:0 auto 70px}
  .history-timeline__list{position:relative;padding-left:0;border-left:0}
  .history-timeline__list::before{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#5d8fbd;content:"";transform:translateX(-1px)}
  .history-timeline__item{min-height:190px;margin-bottom:0}
  .history-timeline__item::before{top:36px;left:calc(50% - 7px)}
  .history-timeline__item h3{box-sizing:border-box;width:50%;padding:0 34px 12px 0;text-align:right}
  .history-timeline__item>div{box-sizing:border-box;width:50%;grid-template-columns:minmax(120px,32%) minmax(0,1fr);gap:10px 22px;padding:22px 34px 24px 0}
  .history-timeline__item h4,.history-timeline__item p{grid-column:2}
  .history-timeline__item img{grid-column:1;grid-row:1/3}
  .history-timeline__item--multiple>.history-timeline__entries{grid-template-columns:1fr;gap:34px}
  .history-timeline__item--multiple .history-timeline__entry{grid-template-columns:minmax(120px,32%) minmax(0,1fr);gap:10px 22px}
  .history-timeline__item:nth-child(even) h3{margin-left:50%;padding-right:0;padding-left:34px;text-align:left}
  .history-timeline__item:nth-child(even)>div{margin-left:50%;padding-right:0;padding-left:34px}
  .history-timeline__item h4{font-size:18px}
  .history-value__lead br{display:none}
}