@charset "UTF-8";
#message > div:nth-child(1) {padding: 5em 0;}
#message > div:nth-child(1) > div {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 4em 0 1em;}
#message > div:nth-child(1) > div div:nth-child(1) {width: 60%;}
#message > div:nth-child(1) > div div:nth-child(1) p {line-height: 2.5;}
#message > div:nth-child(1) > div div p + p {margin-top: 2em;}
#message > div:nth-child(1) > div div:nth-child(2) {width: 35%;}
#message > div:nth-child(1) > div div:nth-child(2) figure:nth-child(2) {text-align: right;margin-top: 1em;}
#message > div:nth-child(1) > div div:nth-child(2) figure:nth-child(2)::before {content: attr(data-title);margin-right: 1.5em;}
#message > div:nth-child(1) > div div:nth-child(2) figure:nth-child(2) img {display: inline-block;width: auto;height: 1.5em;}
#message > div:nth-child(2) {height: 30em;overflow: hidden;}
#profile > div:nth-child(1) {padding: 5em 0;}
#profile > div:nth-child(1) table {width: 100%;margin-top: 3em;}
#profile > div:nth-child(1) table tr td,
#profile > div:nth-child(1) table tr th {padding: 1.5em 0;}
#profile > div:nth-child(1) table tr th {text-align: center;width: 25%;}
#profile > div:nth-child(1) table tr td {line-height: 2.5;padding-left: 5em;}
#profile > div:nth-child(1) table tr:not(:last-child) th {font-weight: 600;border-bottom: 2px solid var(--color-02);}
#profile > div:nth-child(1) table tr:not(:last-child) td {border-bottom: 2px solid #bababa;}
#profile iframe {display: block;width: 100%;background: url("../img/about/about_img11_pc.webp") no-repeat center/cover;}
#history {padding: 5em 0 7em;background: url("../img/about/about_img20_pc.webp") no-repeat center/cover;}
#history h3 span {color: #fff;}
#history > div {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 4em;}
#history > div table {width: 55%;}
#history > div table tr th {color: var(--color-02);font-size: 150%;font-family: "Barlow", sans-serif;line-height: 1;width: 7.25em;padding-right: 3em;position: relative;}
#history > div table tr td span:nth-child(1),
#history > div table tr th span:nth-child(1) {display: block;opacity: 0;}
#history > div table tr th span:nth-child(1) {transform: translateX(0.5em);}
#history > div table tr th span:nth-child(1) {font-weight: 600;}
#history > div table tr th span:nth-child(2) {display: inline-block;width: 2.5em;height: 1px;margin: 0 0.5em;background: var(--color-02);position: absolute;top: 0.5em;right: 0;transform-origin: center;z-index: 100;transform: scaleX(0);}
#history > div table tr th span:nth-child(2)::before {display: block;content: '';width: 0;height: 0;background: var(--color-02);border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#history > div table tr th::after {display: block;content: '';width: 1px;height: 0;background: var(--color-02);position: absolute;top: 0.5em;right: calc(1.75em - 1px);}
#history > div table tr td {color: #fff;font-size: 112.5%;}
#history > div table tr td span:nth-child(1) {transform: translateX(-0.5em);}
#history > div table tr:nth-child(1) td {padding-bottom: 5em;}
#history > div table tr:nth-child(2) td {padding-bottom: 3em;}
#history > div table tr:nth-child(3) td {padding-bottom: 5em;}
#history > div table tr:nth-child(4) td {padding-bottom: 3em;}
#history > div table tr:nth-child(5) td {padding-bottom: 3em;}
#history > div .imgWrap {width: 35%;}
#history > div .imgWrap figure + figure {margin-top: 4em;}

#history.staging > div table tr:nth-child(1) th span:nth-child(1) {opacity: 1;transition: 0.2s linear 0.4s;transform: translateX(0);} /*日付*/
#history.staging > div table tr:nth-child(1) td span:nth-child(1) {opacity: 1;transition: 0.2s linear 0.4s;transform: translateX(0);} /*内容*/
#history.staging > div table tr:nth-child(1) th span:nth-child(2)::before {width: 7px;height: 7px;transition: 0.3s linear 0.1s;} /*点*/
#history.staging > div table tr:nth-child(1) th span:nth-child(2) {transform: scaleX(1);transition: 0.3s linear 0.1s;} /*横線*/
#history.staging > div table tr:nth-child(1) th::after {height: 100%;transition: 0.3s linear 0.1s;} /*縦線*/

#history.staging > div table tr:nth-child(2) th span:nth-child(1) {opacity: 1;transition: 0.3s linear 0.7s;transform: translateX(0);}
#history.staging > div table tr:nth-child(2) td span:nth-child(1) {opacity: 1;transition: 0.3s linear 0.7s;transform: translateX(0);}
#history.staging > div table tr:nth-child(2) th span:nth-child(2)::before {width: 7px;height: 7px;transition: 0.3s linear 0.4s;}
#history.staging > div table tr:nth-child(2) th span:nth-child(2) {transform: scaleX(1);transition: 0.3s linear 0.4s;}
#history.staging > div table tr:nth-child(2) th::after {height: 100%;transition: 0.3s linear 0.4s;}

#history.staging > div table tr:nth-child(3) th span:nth-child(1) {opacity: 1;transition: 0.3s linear 1.0s;transform: translateX(0);}
#history.staging > div table tr:nth-child(3) td span:nth-child(1) {opacity: 1;transition: 0.3s linear 1.0s;transform: translateX(0);}
#history.staging > div table tr:nth-child(3) th span:nth-child(2)::before {width: 7px;height: 7px;transition: 0.3s linear 0.7s;}
#history.staging > div table tr:nth-child(3) th span:nth-child(2) {transform: scaleX(1);transition: 0.3s linear 0.7s;}
#history.staging > div table tr:nth-child(3) th::after {height: 100%;transition: 0.3s linear 0.7s;}

#history.staging > div table tr:nth-child(4) th span:nth-child(1) {opacity: 1;transition: 0.3s linear 1.3s;transform: translateX(0);}
#history.staging > div table tr:nth-child(4) td span:nth-child(1) {opacity: 1;transition: 0.3s linear 1.3s;transform: translateX(0);}
#history.staging > div table tr:nth-child(4) th span:nth-child(2)::before {width: 7px;height: 7px;transition: 0.3s linear 1.0s;}
#history.staging > div table tr:nth-child(4) th span:nth-child(2) {transform: scaleX(1);transition: 0.3s linear 1.0s;}
#history.staging > div table tr:nth-child(4) th::after {height: 100%;transition: 0.3s linear 1.0s;}

#history.staging > div table tr:nth-child(5) th span:nth-child(1) {opacity: 1;transition: 0.3s linear 1.6s;transform: translateX(0);}
#history.staging > div table tr:nth-child(5) td span:nth-child(1) {opacity: 1;transition: 0.3s linear 1.6s;transform: translateX(0);}
#history.staging > div table tr:nth-child(5) th span:nth-child(2)::before {width: 7px;height: 7px;transition: 0.3s linear 1.3s;}
#history.staging > div table tr:nth-child(5) th span:nth-child(2) {transform: scaleX(1);transition: 0.3s linear 1.3s;}
#history.staging > div table tr:nth-child(5) th::after {height: 100%;transition: 0.3s linear 1.3s;}

@media only screen and (max-width: 1200px) {}
@media only screen and (max-width: 1100px) {
  #profile > div:nth-child(1) table {margin-top: 2em;}
  #profile > div:nth-child(1) table tr td,
  #profile > div:nth-child(1) table tr th {padding: 1em 0;}
  #profile > div:nth-child(1) table tr td {padding-left: 1em;}
}
@media only screen and (min-width: 768px) {
  #history > div .imgWrap figure {clip-path: polygon(58% 0, 58% 0, 42% 100%, 42% 100%);}
  #history.staging > div .imgWrap figure:nth-child(1) {clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);transition: 0.4s linear 0.4s;}
  #history.staging > div .imgWrap figure:nth-child(2) {clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);transition: 0.4s linear 0.7s;}
  #history.staging > div .imgWrap figure:nth-child(3) {clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);transition: 0.4s linear 1.0s;}
}
@media only screen and (max-width: 767px) {
  #message > div:nth-child(1) {padding: 3em 0;}
  #message > div:nth-child(1) > div {/*flex-direction: column-reverse;*/margin: 2em 0 0;}
  #message > div:nth-child(1) > div > div {width: 100% !important;}
  #message > div:nth-child(1) > div > div:nth-child(2) {margin-top: 2em;}
  #message > div:nth-child(1) > div div p {line-height: 2 !important;text-align: left;}
  #message > div:nth-child(1) > div div p + p {margin-top: 1em;}
  #message > div:nth-child(1) > div div:nth-child(2) figure:nth-child(2) {text-align: center;margin-top: 0.5em;}
  #message > div:nth-child(1) > div div:nth-child(2) figure:nth-child(2)::before {font-size: 87.5%;vertical-align: text-bottom;margin-right: 1em;}
  #message > div:nth-child(1) > div div:nth-child(2) figure:nth-child(2) img {height: 1.25em;}
  #message > div:nth-child(2) {height: 12em;}
  #profile > div:nth-child(1) {padding: 3em 0 2em;}
  #profile > div:nth-child(1) table tr th {width: 6em;}
  #profile > div:nth-child(1) table tr.address td span {display: block;}
  #profile > div:nth-child(1) table tr td {line-height: 1.5;}
  #profile iframe {height: 20em;}
  #history {padding: 3em 0;}
  #history > div {margin-top: 2em;}
  #history > div table {width: 100%;}
  #history > div table tr th {font-size: 137.5%;}
  #history > div table tr td {font-size: 100%;}
  #history > div .imgWrap {width: 100%;margin-top: 2em;}
  #history > div .imgWrap figure {clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);}
  #history > div .imgWrap.staging figure:nth-child(1) {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transition: 0.4s linear 0.2s;}
  #history > div .imgWrap.staging figure:nth-child(2) {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transition: 0.4s linear 0.4s;}
  #history > div .imgWrap.staging figure:nth-child(3) {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transition: 0.4s linear 0.6s;}
  #history > div .imgWrap figure + figure {margin-top: 1em;}
}
@media (orientation: landscape) and (max-width: 767px){}