@charset "utf-8";


/* story */
#hakatakawaii .contents {
  background: url("../../img/bg_shape.png") repeat-y center top;
}
#hakatakawaii .contents article {
  position: relative;
  padding:70px;
  text-align: left;
  z-index: 3;
}
#hakatakawaii .contents .border:before {
  background: url("../../img/bg_stripe_green.png");
}
#hakatakawaii .contents .border:after {
  border: 4px solid #e45800;
}
#hakatakawaii .contents article .thumb {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
#hakatakawaii .contents article .image {
  display: block;
  max-width: 100%;
  margin: 10px 0;
}
#hakatakawaii .contents article h3 {
  line-height: 1.5;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 1.75em;
}
#hakatakawaii .contents article .date {
  display: block;
  margin-bottom: 40px;
  color: #919191;
}
#hakatakawaii .contents article p {
  line-height: 2;
  font-size: 93.8%;
  text-align: justify;
}
#hakatakawaii .contents article p .bold {
  font-weight: bold;
}
#hakatakawaii .contents article p .under {
  text-decoration: underline;
}
#hakatakawaii .contents article p a {
  color: #e45800;
  text-decoration: underline;
}
#hakatakawaii .contents article p a:hover {
  opacity: 0.8;
  transition:.3s;
}
#hakatakawaii .contents .youtube {
  position: relative;
  margin: 10px 0;
  padding-top: 56.25%;
  background: #000;
}
 #hakatakawaii .contents .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} 
#hakatakawaii .contents article .sns-share {
  background: #ececec;
  margin-top: 60px;
  padding: 20px 0;
  text-align: center;
}
#hakatakawaii .contents article .sns-share h4 {
  margin-bottom: 20px;
  font-weight: bold;
}
#hakatakawaii .contents article .sns-share ul li {
  display: inline-block;
  margin: 0 5px;
}


@media all and (max-width: 812px) {
/* story */
#hakatakawaii .contents {
  background: url("../../img/bg_shape.png") no-repeat center 210px;
}
#hakatakawaii .contents article {
  padding: 6%;
}
#hakatakawaii .contents article .thumb {
  margin-bottom: 5%;
}
#hakatakawaii .contents article h3 {
  margin-bottom: 10px;
  font-size: 1.5em;
}
#hakatakawaii .contents article .date {
  margin-bottom: 6%;
}
#hakatakawaii .contents article p {
  line-height: 2;
  font-size: 87.5%;
}
#hakatakawaii .contents article p a:hover {
  opacity: 1;
} 
}


@media all and (max-width: 568px) {
#hakatakawaii .contents article h3 {
  font-size: 125.0%;
}
}