@charset "utf-8";


/* cast */
#hakatakawaii .contents-wave {
  margin-top: 60px;
  padding-bottom: 100px;
  background: #fff;
}
#hakatakawaii .contents-wave:before {
  display: block;
  content: "";
  height: 10px;
  margin-bottom: 60px;
  background: url("../../img/wave_bottom.png") repeat-x;
}

/* main-cast */
#hakatakawaii .main-cast {
  padding: 100px 0 280px;
  background: #fff url("../../cast/img/bg_shape.gif") no-repeat center 0;
}
#hakatakawaii .main-cast #fukuda {
  position: relative;
  margin-top: 100px;
}
#hakatakawaii .main-cast #okada .textarea {
  float: left;
  width: 450px;
}
#hakatakawaii .main-cast #fukuda .textarea {
  float: right;
  width: 550px;
  padding-top: 70px;
}
#hakatakawaii .main-cast .block h3 {
  margin-bottom: 40px;
  font-weight: bold;
}
#hakatakawaii .main-cast #okada h3 {
  color: #1da1e6;
}
#hakatakawaii .main-cast #fukuda h3 {
  color: #ed6d00;
}
#hakatakawaii .main-cast .block h3 .role {
  display: block;
  font-size: 1.563em;
}
#hakatakawaii .main-cast .block h3 ruby {
  display: inline-block;
  margin-top: 35px;
  font-size: 2.500em;
  letter-spacing: 0.15em;
}
[data-ruby] {
    position: relative;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -1.3em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.4em;
}
#hakatakawaii .main-cast .block h3 rt {
  display: none;
}
#hakatakawaii .main-cast .block h3 .place {
  font-size: 1.250em;
}
#hakatakawaii .main-cast .block .comment {
  line-height: 2;
  font-weight: 300;
  font-size: 93.8%;
}
#hakatakawaii .main-cast .mov-comment {
  position: relative;
  margin-top: 50px;
  z-index: 7;
}
#hakatakawaii .main-cast .block .border {
  position: relative;
  padding-bottom: 40px;
}
#hakatakawaii .main-cast #okada .border {
  float: right;
  width: 500px;
}
#hakatakawaii .main-cast #fukuda .border {
  float: left;
  width: 410px;
  padding: 0 0 40px 20px;
}

#hakatakawaii .main-cast .cast-image {
  display: block;
  position:relative;
  z-index: 3;
}
#hakatakawaii .main-cast .border:before {
  width:calc(100% - 40px);
  z-index: 1;
}
#hakatakawaii .main-cast #okada .border:before {
  top:40px;
  left:40px;
  height:calc(100% - 40px);
  background: url("../../img/bg_stripe_lblue.png");
}
#hakatakawaii .main-cast #fukuda .border:before {
  top:20px;
  left:0;
  height:calc(100% - 20px);
  background: url("../../img/bg_stripe_pink.png");
}
#hakatakawaii .main-cast .border:after {
  top:20px;
  width:calc(100% - 48px);
  height:calc(100% - 48px);
  z-index: 2;
}
#hakatakawaii .main-cast #okada .border:after {
  left:20px;
  border: 4px solid #1da1e6;
}
#hakatakawaii .main-cast #fukuda .border:after {
  left:40px;
  border: 4px solid #ed6d00;
}
#hakatakawaii .main-cast .catch {
  position: absolute;
  z-index: 4;
}
#hakatakawaii .main-cast #okada .catch {
  top:-70px;
  left: -150px;
}
#hakatakawaii .main-cast #fukuda .catch {
  top:-125px;
  right:-500px;
}
#hakatakawaii .main-cast .catch img {
  display: block;
  width: 233px;
  height: auto;
}
#hakatakawaii .main-cast .catch span {
  position: absolute;
  top: 0;
  width: 92%;
  height: 100%;
  font-size: 106.3%;
  text-align: center;
}
#hakatakawaii .main-cast #okada .catch span {
  left: 0;
  line-height: 2;
  padding-top: 70px;
  color: #fff;
}
#hakatakawaii .main-cast #fukuda .catch span {
  left: 4%;
  line-height: 1.5;
  padding-top: 60px;
}


/* sub-cast */
#hakatakawaii .sub-cast {
  position: relative;
  margin-top: -210px;
  padding:60px 0 300px;
  overflow: hidden;
}
#hakatakawaii .sub-cast:before {
  display: block;
  position: absolute;
  top: 0;
  right:0;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 280px 2000px;
  border-color: transparent transparent #fec433 transparent;
}
#hakatakawaii .sub-cast .bg {
  position: relative;
  z-index: 2;
}
#hakatakawaii .sub-cast .bg:before {
  display: block;
  position: absolute;
  top: 220px;
  left:0;
  content: "";
  background: #fec433;
  width: 100%;
  height: 100%;
}
#hakatakawaii .sub-cast .block {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}
#hakatakawaii .sub-cast .border {
  float: left;
  width: 290px;
  padding-bottom: 20px;
}
#hakatakawaii .sub-cast .border:after {
  top:16px;
  left:16px;
  width:calc(100% - 26px);
  height:calc(100% - 26px);
  z-index: 1;
}
#hakatakawaii .sub-cast .m .border:after { border: 4px solid #2ac8a8; }
#hakatakawaii .sub-cast .f .border:after { border: 4px solid #fff65e; }
#hakatakawaii .sub-cast .border .cast-image {
  position: relative;
  z-index: 2
}
#hakatakawaii .sub-cast h3,
#hakatakawaii .sub-cast .comment {
  float: right;
  width: 670px;
}
#hakatakawaii .sub-cast h3 {
  margin-bottom: 35px;
  padding-top: 10px;
  font-weight: bold;
  font-size: 125.0%;
}
#hakatakawaii .sub-cast h3 .role {
  display: block;
  margin-bottom: 15px;
}
#hakatakawaii .sub-cast h3 .name {
  font-size: 1.750em;
  letter-spacing: 0.15em;
}
#hakatakawaii .sub-cast .comment {
  line-height: 2;
  font-size: 93.8%;
}

/* text-cast */
#hakatakawaii .text-cast {
  position: relative;
  margin-top: -270px;
  padding: 150px 0;
  background: url("../../cast/img/bg_shape_02.gif") no-repeat center 210px;
  text-align: center;
  color: #1da1e6;
  z-index: 5;
  overflow: hidden;
}
#hakatakawaii .text-cast:before {
  display: block;
  position: absolute;
  top: 0;
  left:0;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 150px 0 0 2000px;
  border-color: transparent transparent transparent #ffffff;
}
#hakatakawaii .text-cast .inner {
  position: relative;
  z-index: 6;
}
#hakatakawaii .text-cast dt {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 1.750em;
}
#hakatakawaii .text-cast dt:after {
  display: block;
  content: "";
  width: 40px;
  height: 3px;
  margin: 20px auto 0;
  background: #fe3371;
}
#hakatakawaii .text-cast dd {
  margin-bottom: 60px;
}
#hakatakawaii .text-cast dd .big {
  line-height: 2.7;
  margin-bottom: 25px;
  font-size: 131.3%;
}
#hakatakawaii .text-cast dd .big span {
  font-size: 75%;
}
#hakatakawaii .text-cast dd .small {
  line-height: 2;
  font-size: 93.8%;
}




@media all and (max-width: 812px) {
/* cast */
#hakatakawaii .contents-wave {
  margin-top: 6%;
  padding-bottom: 15%;
}
#hakatakawaii .contents-wave:before {
  margin-bottom: 7%;
}
#hakatakawaii .contents-wave h2 {
  width: 90%;
  margin: 0 auto;
}

/* main-cast */
#hakatakawaii .main-cast {
  padding-top: 15%;
  background: #fff url("../../cast/img/bg_shape.gif") repeat-y center top / 100% auto;
}
#hakatakawaii .main-cast #fukuda {
  margin-top: 95px;
}
#hakatakawaii .main-cast #okada .textarea {
  width: 50%;
}
#hakatakawaii .main-cast #fukuda .textarea {
  width: 52%;
  padding-top: 50px;
}
#hakatakawaii .main-cast .block h3 {
  margin-bottom: 11%;
}
#hakatakawaii .main-cast .block h3 .role {
  font-size: 137.5%;
}
#hakatakawaii .main-cast .block h3 ruby {
  font-size: 2.188em;
}
#hakatakawaii .main-cast .block h3 .place {
  display: block;
  margin-top: 10px;
  font-size: 112.5%;
}
#hakatakawaii .main-cast .block .comment {
  font-size: 87.5%;
}
#hakatakawaii .main-cast .mov-comment {
  position: relative;
  margin-top: 9%;
  padding-top: 56.25%;
}
#hakatakawaii .main-cast .mov-comment iframe {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}
#hakatakawaii .main-cast .block .border {
  padding-bottom: 40px;
}
#hakatakawaii .main-cast #okada .border {
  width: 47%;
}

#hakatakawaii .main-cast #fukuda .border {
  width: 45%;
  padding: 0 0 40px 10px;
}

#hakatakawaii .main-cast .cast-image {
  width: calc(100% - 20px);
  height: auto;
}
#hakatakawaii .main-cast .border:before {
  width:calc(100% - 20px);
}
#hakatakawaii .main-cast #okada .border:before {
  top:20px;
  left:20px;
}
#hakatakawaii .main-cast #fukuda .border:before {
  height:calc(100% - 40px);
}
#hakatakawaii .main-cast .border:after {
  top:10px;
  width:calc(100% - 27px);
}
#hakatakawaii .main-cast #okada .border:after {
  left:10px;
}
#hakatakawaii .main-cast #fukuda .border:after {
  left:20px;
  width: calc(100% - 36px);
}
#hakatakawaii .main-cast #fukuda .catch {
  top:-80px;
  right:-360px;
}
#hakatakawaii .main-cast .catch img {
  width: 200px;
}
#hakatakawaii .main-cast .catch span {
  font-size: 93.8%;
}
#hakatakawaii .main-cast #okada .catch span {
  padding-top: 60px;
}
#hakatakawaii .main-cast #fukuda .catch span {
  padding-top: 50px;
}


/* sub-cast */
#hakatakawaii .sub-cast {
  margin-top: -260px;
  padding:60px 0 300px;
}
#hakatakawaii .sub-cast .inner {
  width:100%;
}
#hakatakawaii .sub-cast .bg:before {
  height: calc(100% - 100px);
}
#hakatakawaii .sub-cast .block {
  padding: 0 5%;
  margin-bottom: 20px;
}
#hakatakawaii .sub-cast .block:nth-child(2n) {
  margin-bottom: 10px;
  padding: 55px 5%;
  background: url("../../cast/img/bg_sub_cast.gif") no-repeat left top / 100% 100%;
}
#hakatakawaii .sub-cast .border {
  width: 200px;
  margin-right: 25px;
  padding-bottom: 10px;
}
#hakatakawaii .sub-cast .border:after {
  top:10px;
  left:10px;
  width:calc(100% - 6px);
  height:calc(100% - 16px);
}
#hakatakawaii .sub-cast .border:before {
  display: none;
}
#hakatakawaii .sub-cast .border .cast-image {
  width: 100%;
}
#hakatakawaii .sub-cast h3 {
  float: right;
  width: calc(100% - 225px);
}
#hakatakawaii .sub-cast h3 {
  margin-bottom: 20px;
  font-size: 100%;
}
#hakatakawaii .sub-cast h3 .role {
  display: block;
  margin-bottom: 15px;
}
#hakatakawaii .sub-cast h3 .name {
  display: block;
  font-size: 143.8%;
}
#hakatakawaii .sub-cast h3 .place {
  display: inline-block;
  margin-top: 10px;
}
#hakatakawaii .sub-cast .comment {
  display: inline;
  float: none;
  font-size: 87.5%;
}
#hakatakawaii .sub-cast .block:nth-child(2n) h3,
#hakatakawaii .sub-cast .block:nth-child(2n) .comment {
  color: #fff;
}

/* text-cast */
#hakatakawaii .text-cast {
  padding: 100px 0;
  background: url("../../cast/img/bg_shape_02.gif") no-repeat center 100px / 160% auto;
}
#hakatakawaii .text-cast:before {
  border-width: 80px 0 0 812px;
}
#hakatakawaii .text-cast dt {
  margin-bottom: 10px;
  font-size: 137.5%;
}
#hakatakawaii .text-cast dt:after {
  width: 30px;
  margin: 15px auto 0;
}
#hakatakawaii .text-cast dd {
  margin-bottom: 60px;
}
#hakatakawaii .text-cast dd .big {
  line-height: 2.7;
  margin-bottom: 25px;
  font-size: 112.5%;
}
#hakatakawaii .text-cast dd .small {
  font-size: 85%;
}
}




@media all and (max-width: 667px) {
/* cast */
#hakatakawaii .contents-wave {
  margin-top: 6%;
  padding-bottom: 15%;
}
#hakatakawaii .contents-wave:before {
  margin-bottom: 7%;
}
#hakatakawaii .contents-wave h2 {
  width: 90%;
  margin: 0 auto;
}

/* main-cast */
#hakatakawaii .inner {
  width: 90%;
  margin: 0 auto;
}
#hakatakawaii .main-cast {
  padding-top: 7%;
}   
#hakatakawaii .main-cast #fukuda {
  margin-top: 80px;
}
#hakatakawaii .main-cast #okada .textarea {
  float: none;
  width: 100%;
}
#hakatakawaii .main-cast #fukuda .textarea {
  float: none;
  width: 100%;
  padding-top: 0;
}
#hakatakawaii .main-cast .block h3 {
  margin-bottom: 11%;
}
#hakatakawaii .main-cast .block h3 .place {
  display: inline-block;
  margin-top: 0;
}
#hakatakawaii .main-cast .block .border {
  margin: 0 auto;
}
#hakatakawaii .main-cast #okada .border {
  float: none;
  width: 95%;
  max-width: 500px;
}
#hakatakawaii .main-cast #fukuda .border {
  float: none;
  width: 95%;
  max-width: 410px;
}
#hakatakawaii .main-cast #okada .catch {
  top:auto;
  left:auto;
  bottom:-50px;
  right: -8px;
}
#hakatakawaii .main-cast #fukuda .catch {
  top:auto;
  right:-16px;
  bottom: -50px;
}
#hakatakawaii .main-cast .catch img {
  width: 155px;
}
#hakatakawaii .main-cast .catch span {
  font-size: 83%;
}
#hakatakawaii .main-cast #okada .catch span {
  line-height: 1.7;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 46px;
  z-index: 2;
}
#hakatakawaii .main-cast #okada .catch img {
  transform: rotate(106deg);
}
#hakatakawaii .main-cast #fukuda .catch span {
  padding-top: 34px;
}


/* sub-cast */
#hakatakawaii .sub-cast .block,
#hakatakawaii .sub-cast .block:nth-child(2n) {
  margin-bottom: 10px;
}
#hakatakawaii .sub-cast .border {
  width: calc(46% - 20px);
  margin-right: 20px;
}
#hakatakawaii .sub-cast .m .border:after {
  border: 3px solid #2ac8a8;
}
#hakatakawaii .sub-cast .f .border:after {
  border: 3px solid #fff65e;
}
#hakatakawaii .sub-cast h3 {
  width: 54%;
}
#hakatakawaii .sub-cast .comment br {
  display: none;
}

/* text-cast */
#hakatakawaii .text-cast {
  padding: 100px 0 60px;
}
#hakatakawaii .text-cast:before {
  border-width: 80px 0 0 812px;
}
#hakatakawaii .text-cast dt {
  margin-bottom: 10px;
  font-size: 137.5%;
}
#hakatakawaii .text-cast dt:after {
  width: 30px;
  margin: 15px auto 0;
}
#hakatakawaii .text-cast dd {
  margin-bottom: 60px;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}
#hakatakawaii .text-cast dd .big {
  line-height: 2.7;
  margin-bottom: 25px;
  font-size: 112.5%;
}
#hakatakawaii .text-cast dd .small span {
  display: inline-block;
  padding-left: 3px;
}
#hakatakawaii .text-cast dd .small br {
  display: none;
}
}