@media screen and (max-width: 767px) {
  body:not(.p-index).p-character .l-wrapper {
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-position: center 188px, center 220px, center bottom;
    background-size: 729px 1542px, 768px 230px, 768px 180px;
    background-image: url("../img/layout/container/sp_bg.png"), url("../img/project/character/bg_sp.jpg"), url("../img/base/body_bg.jpg"); } }

@media screen and (min-width: 768px) {
  body:not(.p-index).p-character .l-wrapper {
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
    background-position: left 423px, right 205px, center 300px, center bottom;
    background-size: 371px 1780px, 332px 1552px, 2560px 460px, 2560px 600px;
    background-image: url("../img/layout/container/bg_l.png"), url("../img/layout/container/bg_r.png"), url("../img/project/character/bg_pc.jpg"), url("../img/base/body_bg.jpg"); } }

@media screen and (max-width: 767px) {
  .l-container .c-ttl00 {
    margin-bottom: 20px; } }

@media screen and (min-width: 768px) {
  .l-container .c-ttl00 {
    margin-bottom: 80px; } }

.p-sec {
  position: relative;
  box-sizing: border-box; }
  @media screen and (max-width: 767px) {
    .p-sec {
      padding: 0 0 60px; } }
  @media screen and (min-width: 768px) {
    .p-sec {
      padding: 0 33px 140px;
      display: flex;
      align-items: center; } }

.p-main {
  position: relative; }
  @media screen and (max-width: 767px) {
    .p-main .p-chara {
      width: 200px;
      margin: 0 auto 20px; } }
  @media screen and (min-width: 768px) {
    .p-main .p-chara {
      width: 400px;
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      margin-right: 34px; } }

.p-sub {
  position: relative; }
  .p-sub-col {
    display: flex;
    box-sizing: border-box;
    align-items: flex-start; }
    @media screen and (max-width: 767px) {
      .p-sub-col--a {
        margin-bottom: 30px; } }
    @media screen and (min-width: 768px) {
      .p-sub-col--a {
        margin-bottom: 50px; } }
    .p-sub-col--a .p-chara {
      justify-content: space-between; }
      @media screen and (max-width: 767px) {
        .p-sub-col--a .p-chara {
          width: calc(33.3%); } }
      @media screen and (min-width: 768px) {
        .p-sub-col--a .p-chara {
          width: calc(33.3% - 2px); } }
    .p-sub-col--b {
      justify-content: center; }
      @media screen and (max-width: 767px) {
        .p-sub-col--b .p-chara {
          width: calc(33.3% - 3px); } }
      @media screen and (min-width: 768px) {
        .p-sub-col--b .p-chara {
          width: 208px;
          margin: 0 5px; } }

.p-chara {
  position: relative;
  display: block;
  line-height: 0; }
  .p-chara img {
    position: relative;
    display: block;
    width: 100%;
    height: auto; }
    .p-chara img:nth-of-type(2) {
      display: none; }
  .p-chara:hover img:nth-of-type(1) {
    display: none; }
  .p-chara:hover img:nth-of-type(2) {
    display: block; }