@charset "utf-8";

.profWrapper {
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.profileBox {
  text-align: left;
  line-height: 1.5;
}
.profile .comment {
  text-align: right;
  font-size: 1.2rem;
}
.profile .ttl03::before,
.profile .ttl03::after {
  content: "\f0c8";
  font: var(--fa-font-solid);
  padding: 0 0.5em;
  color: #003170;
}

.storyPhoto01,
.storyPhoto02 {
  width: 30%;
  height: auto;
  position: relative;
  top: 50px;
}
.storyTalk02 {
  text-align: right;
  padding: 0;
}
.talk01,
.talk02 {
  background-color: #d9d9d9;
  padding: 30px;
  border-radius: 10px;
  text-align: left;
}
.talk01 {
  margin-right: 10%;
}
.talk02 {
  margin-left: 10%;
}
.talkName01 {
  margin-left: 30%;
}
.talkName02 {
  margin-right: 30%;
}
.ttl03 {
  font-size: 2.4rem;
  text-align: center;
}
.name {
  font-size: 2rem;
}
.illustWrapper {
  width: 60%;
  margin: 0 auto;
  padding-top: 50px;
}
/* --- タイトルの前後の線 --- */
#story .line::before,
#story .line::after {
  background-color: #333;
}


/* ◆ RWD for PC ========== */

@media screen and ( min-width: 767px )  {
  .introSec .text,
  .mainSec .text,
  .outroSec .text {
    width: 60%;
    text-align: left;
    margin: 0 auto;
  }

  .profWrapper {
    display: flex;
    justify-content: space-between;
  }
  .profileBox {
    flex-basis: 40%;
  }
  .talk01,
  .talk02 {
    padding: 30px 50px;
  }
  .storyPhoto01, .storyPhoto02 {
    width: 10%;
    height: auto;
  }
  .storyTalk01 {
    text-align: left;
  }
  .talkName01 {
    margin-left: 10%;
  }
  .talkName02 {
    margin-right: 10%;
  }
  .illustWrapper {
    width: 30%;
  }
}