main {
  background: linear-gradient(135deg, rgba(225, 225, 225, 0.3) 25%, rgba(225, 225, 225, 0.5) 25%, rgba(225, 225, 225, 0.5) 50%, rgba(225, 225, 225, 0.3) 50%, rgba(225, 225, 225, 0.3) 75%, rgba(225, 225, 225, 0.5) 75%, rgba(225, 225, 225, 0.5)) top/18px 18px, linear-gradient(90deg, #f3b8c1, #d4d0e4);
  margin: 108px 0 0;
  padding: 0 0 180px; }

#breadcrumb {
  width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  font-size: 12px;
  color: #000; }
  #breadcrumb a {
    color: #000; }

.kasou_box {
  width: 1200px;
  margin: 0 auto;
  padding: 0 0 60px;
  background: #fff;
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.5); }

.ttl_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 90px 40px 90px 90px; }

.kasou_ttl {
  width: calc(100% - 380px);
  position: relative;
  font-size: 48px;
  font-weight: 900;
  color: #000;
  letter-spacing: .2rem;
  line-height: 4rem; }
  .kasou_ttl::before {
    position: absolute;
    content: "";
    width: 7px;
    height: 115%;
    min-height: 100px;
    background: linear-gradient(0deg, #e97e8b, #a07bb1);
    top: -15px;
    left: -35px; }

.fan_number {
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 40px;
  letter-spacing: .2rem; }
  .fan_number::before {
    position: absolute;
    content: "";
    width: 90px;
    height: 90px;
    background: url("/img/fan.png") no-repeat center/cover;
    top: calc(50% - 45px);
    left: -110px; }

.sp_number {
  display: none; }

.cont_box {
  display: flex;
  padding: 0 50px 100px; }

.ec_img {
  width: 450px;
  height: 450px; }

.kasou_desc {
  margin: 0 0 0 60px; }

.desc_ttl {
  font-size: 24px;
  font-weight: 900;
  color: #000;
  margin: 0 0 25px; }

.desc {
  line-height: 2rem;
  margin: 0 0 30px; }

.cre_link {
  display: none;
  width: 100%;
  margin: 0 0 40px;
  color: #0000ff;
  text-decoration: underline;
  word-break: break-word;
  line-height: 1.5rem; }

.yt_btn {
  padding: 30px 80px 30px 120px;
  margin: 0 80px 60px; }
  .yt_btn::before {
    position: absolute;
    content: "";
    top: calc(50% - 14px);
    width: 35px;
    height: 28px;
    left: 70px;
    background: url("/img/yt_icon.png") no-repeat top/cover; }

.sns_box {
  display: flex;
  justify-content: center; }

.sns {
  margin: 0 15px; }

.top_ttl::after {
  bottom: -40px; }

.prof_box {
  margin: 0 50px 30px;
  padding: 40px 110px;
  background: #eee; }

.event {
  display: flex; }

.event_ttl {
  width: 300px;
  font-size: 20px;
  margin: 0 30px 0 0; }

.event_desc {
  width: calc(100% - 300px); }

.event + .event {
  margin: 20px 0 0; }

.btn_area {
  text-align: center; }

.bk_btn::before {
  position: absolute;
  content: "";
  left: 30px;
  top: 25px;
  width: 7px;
  height: 7px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(-135deg); }

@media screen and (min-width: 769px) {
  #breadcrumb a:hover {
    color: #fff; }

  .cre_link:hover {
    color: #a07bb1; }

  .sns:hover {
    transform: scale(1.1);
    transition: .2s; } }
@media screen and (max-width: 1200px) {
  main {
    margin: 63px 0 0;
    padding: 0 0 20px; }

  #breadcrumb {
    width: 90%;
    padding: 20px 0;
    font-size: 10px; }

  .kasou_box {
    width: 90%;
    padding: 0 0 35px;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.5); }

  .ttl_box {
    display: flex;
    justify-content: space-between;
    padding: 30px 15px 30px 40px; }

  .kasou_ttl {
    width: 100%;
    font-size: 25px;
    letter-spacing: .05rem; }
    .kasou_ttl::before {
      width: 4px;
      min-height: 50px;
      line-height: 2rem;
      top: -5px;
      left: -20px; }

  .fan_number {
    display: none; }

  .sp_number {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 25px 0 30px 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 20px;
    letter-spacing: .2rem; }
    .sp_number::before {
      position: absolute;
      content: "";
      width: 44px;
      height: 44px;
      background: url("/img/fan.png") no-repeat center/cover;
      top: calc(50% - 25px);
      left: calc(50% - 90px); }

  .cont_box {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 50px;
    text-align: center; }

  .ec_img {
    width: 100%;
    max-width: 450px;
    height: 100%;
    max-height: 450px; }

  .kasou_ttl {
    line-height: 2rem; }

  .kasou_desc {
    margin: 0; }

  .desc_ttl {
    font-size: 18px;
    margin: 0 0 18px;
    text-align: left;
    word-break: break-all; }

  .desc {
    line-height: 1.5rem;
    font-size: 14px;
    text-align: left; }

  .cre_link {
    margin: 10px 0 30px;
    text-align: left; }

  .sns {
    margin: 0 5px; }

  .top_ttl {
    margin: 0 0 70px; }

  .prof_box {
    width: 90%;
    margin: 0 auto 30px;
    padding: 30px 0; }

  .event {
    display: block; }

  .event_ttl, .event_desc {
    width: 90%;
    margin: 0 auto;
    font-size: 14px; }

  .event + .event {
    margin: 20px 0 0; }

  .btn_area {
    text-align: center; }

  .gotop {
    top: -80px;
    right: 20px; } }
@media screen and (max-width: 768px) {
  .top_ttl {
    font-size: 18px;
    line-height: 1.5rem;
    margin: 0 0 40px; }
    .top_ttl::after {
      width: 40px;
      height: 4px;
      bottom: -20px;
      left: calc(50% - 20px); }

  .yt_btn {
    width: auto;
    padding: 30px 0 30px 40px;
    margin: 0 0 30px; }
    .yt_btn::before {
      top: calc(50% - 12px);
      width: 30px;
      height: 24px;
      left: calc(50% - 115px); }

  .bk_btn {
    width: 90%;
    margin: 20px auto; }

  .gotop {
    top: -40px;
    right: -10px; } }