/* width */
/*border*/
.main01 {
  display: flex;
  justify-content: space-between;
  align-items: top;
  flex-wrap: nowrap;
  font-weight: bold;
  height: 80vh;
  margin-bottom: 15rem; }
  .main01 .read {
    flex: 1;
    margin-right: 10%;
    writing-mode: vertical-rl;
    font-size: 3rem;
    text-decoration: underline;
    text-decoration-color: #000;
    text-decoration-thickness: 0.3rem;
    text-underline-offset: 1rem;
    line-height: 6rem;
    padding-top: 10vh; }
    .main01 .read span {
      color: #5FACD3; }
    @media screen and (max-height: 440px) {
      .main01 .read {
        font-size: 2.8rem;
        padding-top: 1vh; } }
  .main01 .bg {
    width: 65%;
    height: 100%; }
    .main01 .bg img {
      height: 100%;
      object-fit: cover; }
  @media screen and (max-width: 840px) {
    .main01 .read {
      margin-right: 5%; }
    .main01 .bg {
      width: 55%; } }
  @media screen and (max-width: 600px) {
    .main01 {
      display: block;
      height: inherit; }
      .main01 .read {
        margin: 6rem auto 6rem 10%;
        padding-top: 0;
        min-height: 13em; }
      .main01 .bg {
        width: 100%;
        height: 50vh; }
        .main01 .bg img {
          width: 100%;
          object-fit: cover; } }

.main02 {
  display: flex;
  justify-content: center;
  align-items: top;
  flex-wrap: nowrap;
  font-weight: bold;
  flex-direction: row-reverse;
  height: 70vh;
  margin-bottom: 15rem; }
  .main02 .read {
    flex: 1;
    margin-right: 20%;
    writing-mode: vertical-rl;
    font-size: 2.2rem; }
    .main02 .read span {
      color: #5FACD3; }
  .main02 .bg {
    width: 45%; }
    .main02 .bg img {
      height: 100%;
      object-fit: cover; }
  @media screen and (max-width: 840px) {
    .main02 {
      height: 60vh; }
      .main02 .read {
        margin-right: 10%; }
      .main02 .bg {
        width: 40%; } }
  @media screen and (max-width: 600px) {
    .main02 {
      display: block;
      height: inherit; }
      .main02 .read {
        margin: 6rem 10% 6rem auto;
        padding-top: 0;
        min-height: 17em; }
      .main02 .bg {
        width: 100%;
        height: 50vh; }
        .main02 .bg img {
          width: 100%;
          object-fit: cover; } }

@media screen and (max-height: 440px) {
  .main01,
  .main02 {
    min-height: 100vh; } }

.main03 {
  display: flex;
  justify-content: space-between;
  align-items: top;
  flex-wrap: nowrap;
  margin-bottom: 15rem; }
  .main03 .readblock {
    font-weight: 600;
    font-size: 1.75rem;
    flex: 1;
    margin: 0 0 0 20%; }
    .main03 .readblock p {
      margin-bottom: 2rem; }
      .main03 .readblock p::after {
        margin-top: 2rem;
        content: "";
        display: block;
        width: 5rem;
        height: 4px;
        background: #93C274; }
  .main03 .bg {
    width: 30%; }
    .main03 .bg img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  @media screen and (max-width: 960px) {
    .main03 .readblock {
      margin: 0 0 0 5%; } }
  @media screen and (max-width: 840px) {
    .main03 {
      display: block; }
      .main03 .readblock {
        margin: 0 1% 3rem; }
      .main03 .bg {
        width: 100%;
        height: 50vh; } }

.information {
  display: flex;
  justify-content: center;
  align-items: top;
  flex-wrap: nowrap;
  margin-left: 15%; }
  .information .title {
    color: #93C274;
    font-weight: bold;
    writing-mode: vertical-rl;
    min-width: 5rem;
    margin-right: 2%; }
    .information .title div {
      transform: rotate(180deg);
      font-size: 2rem;
      text-align: right; }
    .information .title::before {
      content: "";
      display: block;
      width: 4px;
      height: 7rem;
      background: #93C274;
      margin-left: 1rem; }
  .information dl {
    margin-top: 1rem; }
    .information dl dt {
      font-weight: bold; }
    .information dl dd {
      margin-bottom: 2rem; }
  @media screen and (max-width: 780px) {
    .information {
      margin-left: 0; } }

/*# sourceMappingURL=top.css.map */