.p-journal__detail{
  margin-top: 30px;
}
.p-journal__detail-inner{
  margin: 0 auto;
  padding: 0 20px;
  max-width: 800px;
}
.p-journal__detail-main{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "day day""heading heading""img img""btn btn";
}
.p-journal__day-wrap{
  grid-area: day;
}
.p-journal__detail-heading{
  grid-area: heading;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  font-weight: 700;
  font-size: 2.4rem;
}
.p-journal__detail-img{
  grid-area: img;
  flex-shrink: 0;
  margin: 0 auto;
  width: 172px;
  height: 250px;
  overflow: hidden;
}
.p-journal__detail-btn-wrap{
  grid-area: btn;
}
.p-journal__detail-btn{
  margin: 30px auto 0;
  padding: 15px 10px 14px;
  width: 225px;
}
.p-journal__detail-btn .icon{
  position: relative;
  margin-right: 10px;
  width: 15px;
  height: 18px;
}
.p-journal__detail-btn .icon::before{
  position: absolute;
  background-image: url(/wp-content/themes/fpsys_theme/assets/img/common/icon_pdf.svg);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  content: "";
}
.p-journal__detail-btn .item{
  margin-right: 3px;
  font-weight: 700;
  font-size: 1.4rem;
}
.p-journal__detail-btn .capacity{
  transform: translateY(1px);
  font-size: 1rem;
}
.p-journal__bottom{
  margin: 0 auto;
  max-width: 800px;
}
.p-ranking{
  background-color: #f4f8fc;
  padding: 50px 20px;
}
.p-ranking__inner{
  margin: 0 auto;
  max-width: 1100px;
}
.c-breadcrumb{
  background: linear-gradient(90deg,#0fbebf 0,#1d98c6 100%);
}
.c-breadcrumb__list{
  color: #fff;
}
.c-breadcrumb__list a::before{
  background-image: url(/wp-content/themes/fpsys_theme/assets/img/common/arrow_line_white.svg);
}
.c-share{
  grid-template-columns: 1fr 1fr;
}
.c-breadcrumb__bottom,.c-login-before{
  margin-top: 30px;
}
@media (min-width:48em){
  .p-journal__detail{
    margin-top: 40px;
    padding: 0 20px;
  }
  .p-journal__detail-inner{
    padding: 0;
  }
  .p-journal__detail-main{
    grid-template: "img day"1fr"img heading"auto"img btn"1fr/max-content 270px;
    justify-content: center;
    align-items: center;
    gap: 0 50px;
  }
  .p-journal__day-wrap{
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
  }
  .p-journal__detail-heading{
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 3.2rem;
    text-align: center;
  }
  .p-journal__detail-img{
    width: 240px;
    height: 340px;
  }
  .p-journal__detail-btn-wrap{
    display: flex;
    align-items: flex-start;
    height: 100%;
  }
  .p-journal__detail-btn{
    margin-top: 15px;
    width: 270px;
  }
  .p-journal__detail-btn .item{
    margin-right: 6px;
    font-size: 1.6rem;
  }
  .p-journal__detail-btn .capacity{
    font-size: 1.2rem;
  }
  .p-journal__bottom{
    margin-top: 40px;
  }
  .p-ranking{
    margin-top: 50px;
    padding: 60px 0;
  }
  .c-breadcrumb__list:hover{
    color: #fff;
  }
  .c-share{
    grid-template-columns: 1fr 170px;
    border-top: 1px solid #ddd;
    padding-left: 120px;
  }
  .c-breadcrumb__bottom{
    display: none;
  }
  .c-login-before{
    margin-top: 40px;
  }}