@charset "utf-8";

#summery {
  width: 100%;
  margin-bottom: 5em;
  position: relative;
}

#summery p {
  font-size: 20px;
  font-family: 'Yasashisa';
  font-weight: 700;
  line-height: 200%;
  margin-bottom: 40px;
  transform: rotate(0.05deg);
  text-align: center;
}

.yadan1 {
  position: absolute;
  left: 0;
  top: 10px;
}

.yadan1 img {
  width: 100px;
  transform: rotate(-20deg);
}

[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -2.7em;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    font-size: 0.5em;
}

[class="mini"][data-ruby]::before {
    left: -5px;
    width: 150%;
}

p .orange { color: #DC6B34; }
p .red { color: #BB2331; }
p .green { color: #3C6E41; }
p .pink { color: #D74E58; }
p .yellow { color: #E9A63A; }
p .grey { color: #999999; }

h3 {
  width: 100%;
  font-size: 36px;
  font-family: 'Yasashisa';
  font-weight: 700;
  color: #D74E58;
  margin-bottom: 20px;
  text-align: center;
  transform: rotate(0.05deg);
  text-shadow:
    #FFF 2px 0px, #FFF -2px 0px,
    #FFF 0px -2px, #FFF 0px 2px,
    #FFF 2px 2px , #FFF -2px 2px,
    #FFF 2px -2px, #FFF -2px -2px,
    #FFF 1px 2px, #FFF -1px 2px,
    #FFF 1px -2px, #FFF -1px -2px,
    #FFF 2px 1px, #FFF -2px 1px,
    #FFF 2px -1px, #FFF -2px -1px;
}

#cast {
  width: 100%;
  font-family: 'Yasashisa';
  font-weight: 700;
}

#cast dl {
  width: 100%;
  text-align: center;
  margin-bottom: 2em;
}

#cast dt {
  font-size: 16px;
  color: #DC6B34;
  transform: rotate(0.05deg);
}

#cast dd {
  font-size: 24px;
  transform: rotate(0.05deg);
}

#staff {
  margin-top: 2em;
  width: 100%;
  font-family: 'Yasashisa';
  font-weight: 700;
}

#staff dl {
  width: 100%;
  text-align: center;
  margin-bottom: 2em;
}

#staff dt {
  font-size: 16px;
  color: #709E41;
  transform: rotate(0.05deg);
}

#staff dd .staff-name {
  font-size: 24px;
  transform: rotate(0.05deg);
}

#staff dd .staff-company {
  font-size: 12px;
  transform: rotate(0.05deg);
}

@media screen and (min-width:768px) {
  #cast, #staff {
    width: 50%;
  }

  #staff {
    margin-top: 0;
  }
}