@charset "utf-8";

@media screen, print {
  body {
    color: #363636;
  }

  header {
    background-color: transparent;
  }

  .toggle-bar {
    background-color: #fff;
  }

  #cont-kv {
    align-items: center;
    background: url(../img/history/hstry_kv_bg.png) center no-repeat;
    background-size: cover;
    gap: 3rem;
    height: 560px;
    height: 704px;
    height: calc(90vw + 27.2rem);
    justify-content: center;
    margin-top: -6rem; /* align with header height */
    padding-bottom: 0; /* reset */
    padding-top: 0; /* reset */
  }

  #contArea {
    padding-bottom: 0; /* reset */
  }

  .page-title {
    border-bottom: #c6c1bc solid .1rem;
    color: white;
    font-size: 1.6rem;
    letter-spacing: .2rem;
    line-height: 1;
    padding-bottom: .5rem;
    width: fit-content;
  }

  .kv-heading-img {
    aspect-ratio: 217/106;
    margin-left: auto;
    margin-right: auto;
    width: 75vw;
  }

  .kv-headingen-img {
    aspect-ratio: 277/25;
    margin-left: auto;
    margin-right: auto;
    width: 65vw;
  }

  .kv-scroll {
    color: white;
  }

  .cont-head {
    padding-bottom: 7rem;
  }

  .character {
    margin-bottom: 5rem;
  }

  .hstry-heading {
    align-items: center;
    background-color: var(--clr-green);
    border-radius: 2.5rem;
    color: #f8f8f8;
    display: flex;
    font-weight: var(--fw-semibold);
    justify-content: center;
    letter-spacing: .1rem;
    line-height: 1;
    margin: 0 auto 3rem;
    padding: .9rem 4rem;
    width: fit-content;
  }

  .char-list {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: auto;
    justify-content: center;
  }

  .char-img {
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin: 0 auto 1rem;
    width: 17rem;
  }

  .char-name {
    font-weight: var(--fw-bold);
    letter-spacing: .1rem;
    line-height: 1;
    text-align: center;
  }

  .char-item-ceo .char-img {
    width: 20rem;
  }

  .char-item-ceo .char-name {
    font-size: 1.8rem;
    margin-bottom: .5rem;
  }

  .intro {
    margin-bottom: 5rem;
  }

  .interviewer {
    border-bottom: #707070 solid .1rem;
    padding-bottom: 2rem;
  }

  .int-heading {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-weight: var(--fw-bold);
    justify-content: space-between;
    letter-spacing: .1rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .int-heading::after,
  .int-heading::before {
    background-color: #707070;
    content: '';
    height: .1rem;
    width: 70px;
    width: 140px;
    width: min(calc(43.8vw - 7rem), 23rem);
  }

  .int-name {
    font-weight: var(--fw-semibold);
    letter-spacing: .1rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .cont-body {
    background: url(../img/history/hstry_body_bg.png) top center no-repeat;
    background-color: #2b2320;
    background-size: contain;
    padding: 7rem 3vw;
  }

  .body-inner {
    background-color: var(--clr-wht);
    padding: 5rem 3vw;
  }

  .body-block + .body-block {
    margin-top: 4rem;
  }

  .body-heading {
    color: var(--clr-green);
    font-size: 1.8rem;
    font-weight: var(--fw-semibold);
    letter-spacing: .1rem;
    line-height: 1.7;
    margin-bottom: 3rem;
  }

  p[class^="para-"] + p {
    margin-top: 2rem;
  }

  .body-txt + .body-fig {
    margin-top: 4rem;
  }

  .para-question {
    margin-left: 5em;
    position: relative;
  }

  .para-question::before {
    background-color: black;
    content: '';
    height: .1rem;
    left: -2.5em;
    position: absolute;
    top: 1.5rem;
    width: 1.5em;
  }

  .para-answer {
    padding-left: 5em;
    text-indent: -5em;
  }

  .para-answer::before {
    color: green;
    content: '岩田社長\3000';
    font-weight: bold;
  }

  .body-img {
    aspect-ratio: 16/10;
    border-radius: .5rem;
  }

  .body-fig-three {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  .body-fig-three .body-img:first-of-type {
    aspect-ratio: 2/1;
    grid-column: 1 / 3;
  }

  .body-fig-three .body-img:nth-of-type(2) {
    aspect-ratio: 39/25;
    grid-column: 1 / 2;
  }

  .body-fig-three .body-img:nth-of-type(3) {
    aspect-ratio: 39/25;
    grid-column: 2 / 3;
  }

  .body-block-foot {
    background-color: #d9ddc7;
    padding: 3rem 3vw;
  }
}

/** SP splg **/
@media screen and (min-width: 480px) {
  #cont-kv {
    height: 620px;
    height: 734px;
    height: calc(71.3vw + 27.8rem);
  }

  .kv-heading-img {
    width: 360px;
    width: 450px;
    width: calc(56.3vw + 9rem);
  }

  .kv-headingen-img {
    width: 260px;
    width: 320px;
    width: calc(37.5vw + 8rem);
  }

  .char-list {
    gap: 2rem;
    grid-template-columns: repeat(3, 30%);
    justify-content: space-between;
  }

  .char-item-ceo {
    grid-column: 1 / 4;
    margin-left: auto;
    margin-right: auto;
    width: 35rem;
  }

  .char-name {
    line-height: 1.4;
  }

  .bodyft-para {
    line-height: 2;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  .gnav-item p,
  .gnav-item a {
    color: #fff;
  }

  .gnav-item .gnav-link-history {
    color: var(--clr-green);
  }

  #cont-kv {
    height: 390px;
    height: 435px;
    height: calc(35.2vw + 16.5rem);
    margin-top: -1.5rem;
  }

  .kv-heading-img {
    width: 280px;
    width: 350px;
    width: calc(54.7vw - 7rem);
  }

  .kv-headingen-img {
    width: 200px;
    width: 250px;
    width: calc(39.1vw - 5rem);
  }

  .cont-head {
    padding-bottom: 8rem;
  }

  .page-title {
    left: auto; /* reset */
    position: relative; /* reset */
    top: auto; /* reset */
  }

  #contArea {
    padding-top: 60px;
    padding-top: 95px; /* vw1280 */
    padding-top: calc(5.47vw + 2.5rem);
  }

  .character,
  .intro,
  .interviewer {
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 62rem);
  }

  .hstry-heading {
    margin-bottom: 4rem;
    padding: 1.1rem 4.8rem;
  }

  .char-list {
    gap: 3rem 2rem;
  }

  .char-item-ceo {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 50rem;
  }

  .char-item-ceo .char-img {
    margin-bottom: 0; /* reset */
  }

  .char-item-ceo .char-name {
    text-align: start;
  }

  .int-desc {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .cont-body {
    background-attachment: fixed; /* fix bg image */
    padding: 8rem 4.5vw;
  }

  .body-inner {
    padding: 7rem 4.5vw;
  }

  .body-block + .body-block {
    margin-top: 7rem;
  } 

  .body-heading {
    font-size: 2rem;
    text-align: center;
  }

  .body-txt + .body-fig {
    margin-top: 7rem;
  }

  .body-block-foot {
    padding: 5rem 4.5vw;
  }
}

/*** iPad ***/
@media screen and (min-width: 768px) {
  #cont-kv {
    height: 465px;
    height: 552px;
    height: calc(45.3vw + 11.7rem);
  }

  .page-title {
    font-size: 1.7rem;
    padding-bottom: .8rem;
  }

  .kv-heading-img {
    width: 320px;
    width: 360px;
    width: calc(20.8vw + 16rem);
  }

  .kv-headingen-img {
    width: 240px;
    width: 260px;
    width: calc(10.4vw + 16rem);
  }

  #contArea {
  }

  .cont-head {
    padding-bottom: 9rem;
  }

  .hstry-heading {
    font-size: 1.8rem;
  }

  .character {
    width: 100%;
  }

  .char-list {
    /* gap: 4rem 5rem; */
    gap: 4rem 3rem;
    /* grid-template-columns: repeat(3, 17rem); */
    grid-template-columns: repeat(3, 20rem);
    justify-content: center;
  }
  
  .char-img {
    margin-bottom: 1.5rem;
  }

  .char-name {
    font-size: 1.8rem;
  }

  .char-item-ceo {
    gap: 2.5rem;
  }

  .char-name {
    line-height: 1;
  }
  
  .char-item-ceo .char-name {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .int-desc {
    font-size: 1.5rem;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .cont-body {
    padding: 9rem 0; /* reset */
  }

  .body-inner {
    margin-left: auto;
    margin-right: auto;
    padding: 9rem 0; /* reset */
    width: min(90%, 100rem);
  }

  .body-block {
    margin-left: auto;
    margin-right: auto;
    width: min(90%, 80rem);
  }

  .body-block + .body-block {
    margin-top: 8rem;
  } 

  .body-txt {
    margin-left: auto;
    margin-right: auto;
    width: 59rem;
  }

  .body-heading {
    font-size: 2.2rem;
    line-height: 1.75;
    margin-bottom: 4rem;
  }

  p[class^="para-"] + p {
    margin-top: 3rem;
  }

  .body-txt + .body-fig {
    margin-top: 8rem;
  }

  .body-fig-three {
    gap: 1.5rem;
  }

  .body-block-foot {
    padding: 6rem 0; /* reset */
    width: min(90%, 100rem);
  }

  .bodyft-para {
    margin-left: auto;
    margin-right: auto;
    width: min(90%, 68rem);
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
  #cont-kv {
    height: 548px;
    height: 668px;
    height: calc(43.8vw + 12.8rem);
    justify-content: start; /* reset */
    margin-top: -2rem;
    padding-top: 130px;
    padding-top: 165px;
    padding-top: calc(10.9vw + 2.5rem);
  }

  .page-title {
    font-size: 1.8rem;
    padding-bottom: 1rem;
  }

  .kv-heading-img {
    width: 360px;
    width: 435px;
    width: calc(23.4vw + 13.5rem);
  }

  .kv-headingen-img {
    width: 260px;
    width: 277px;
    width: calc(5.31vw + 20.9rem);
  }

  .char-item-ceo {
    gap: 3rem;
  }

  .char-desc {
    font-size: 1.4rem;
  }

  .int-desc {
    font-size: 1.4rem;
    padding-left: 7.4rem;
    padding-right: 7.4rem;
  }

  #contArea {
  }

  .cont-head {
    padding-bottom: 10rem;
  }

  .cont-body {
    padding: 10rem 0;
  }

  .body-inner {
    padding: 10rem 0;
  }

  .body-block + .body-block {
    margin-top: 9rem;
  } 

  .body-heading {
    font-size: 2.4rem;
    letter-spacing: .2rem;
    margin-bottom: 5rem;
  }

  p[class^="para-"] {
    font-size: 1.7rem;
  }

  p[class^="para-"] + p {
    margin-top: 4rem;
  }

  .body-txt + .body-fig {
    margin-top: 9rem;
  }

  .body-fig-three {
    gap: 2rem;
  }

  .bodyft-para {
    font-size: 1.7rem;
    width: 68rem;
  }
}

/** PC pclg **/
@media screen and (min-width: 1280px) {
  #cont-kv {
    gap: 5rem;
    height: 73rem;
    margin-top: -2.5rem;
    padding-top: 16.5rem;
  }

  .kv-heading-img {
    width: 43.5rem;
  }

  .kv-headingen-img {
    width: 27.7rem;
  }

  #contArea {
    padding-top: 9.5rem;
  }

  .body-block + .body-block {
    margin-top: 10rem;
  } 

  .body-txt + .body-fig {
    margin-top: 10rem;
  }
}

/*****************/
/***   Print   ***/
/*****************/
@media print {
}