@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
@-ms-viewport {
  width: auto;
  initial-scale: 1;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* background-color: inherit; */
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  height: 100%;
}

body {
  height: 100%;
  overflow: auto;
  min-width: 320px;
  line-height: 1.8;
  font-size: 14px;
  font-size: 1.4rem;
  overflow-x: hidden;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  color: #333;
  margin: 0;
}

body.home {
  padding-top: 0px !important;
}

#wrap {
  visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

.js #wrap {
  visibility: hidden;
}

.no-js #wrap {
  visibility: visible;
}

a {
  text-decoration: none;
  color: #2e44a7;
  outline: none;
}

a:hover {
  color: #fccc00;
}

@media screen and (max-width: 992px) {
  .jg-hidden {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .md-hidden {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .sm-hidden {
    display: none;
  }
}

hr {
  border: medium none;
  display: block;
  height: 1px;
  margin: 50px 0;
  width: 100%;
  background-color: #ccc;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.container {
  max-width: 1030px;
  padding-left: 15px;
  padding-right: 15px;
}

.container-large {
  max-width: 1630px;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-large-pading0 {
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.linkBox-img {
  overflow: hidden;
}

.linkBox-img img {
  transition: all 0.5s ease 0s;
}

.linkBox-img img:hover {
  opacity: 0.5;
  transform: scale(1.1, 1.1);
}

a.button:link, .button:visited {
  width: 100%;
  max-width: 20em;
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  border-radius: 5px;
  line-height: 1.2;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 998;
}

a.button:link:after, a.button:visited:after {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 150%;
  z-index: -1;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

a.button:link:hover, a.button:visited:hover {
  color: #FFF;
  text-shadow: none;
}

a.button:link:hover:after, a.button:visited:hover:after {
  height: 450%;
}

a.button-green {
  border: 2px solid #00B59D;
  border-radius: 5px;
  color: #00B59D;
}

a.button-green:after {
  background: #00B59D;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

.nazo {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/**********************************************************************************
* #header
**********************************************************************************/
#header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (max-width: 992px) {
  #header {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

/**********************************************************************************
* #topHero
**********************************************************************************/
#topHero {
  position: relative;
  width: 100vw;
  height: 700px;
}

.topHero-title {
  width: 70%;
  max-width: 454px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.topHero-back {
  width: 100%;
  height: 700px;
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.topHero-back > div {
  width: 50%;
  height: 350px;
}
.topHero-back .topHero-back01 {
  background-color: #f7ee10;
  position: relative;
}
.topHero-back .topHero-back01 span {
  position: absolute;
  left: 20px;
  top: 20px;
  max-width: 347px;
  width: 80%;
}
.topHero-back .topHero-back02 {
  background-image: url(../images/topHero-back02.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}
.topHero-back .topHero-back02 img {
  display: none;
}
.topHero-back .topHero-back03 {
  background-image: url(../images/topHero-back03.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}
.topHero-back .topHero-back03 img {
  display: none;
}
.topHero-back .topHero-back04 {
  background-color: #91c31f;
  position: relative;
}
.topHero-back .topHero-back04 span {
  position: absolute;
  right: 20px;
  bottom: 20px;
  max-width: 336px;
  width: 80%;
}

@media screen and (max-width: 576px) {
	#topHero {
	  height: 280px;
	}
	.topHero-back {
	  height: 280px;
	}
	.topHero-back > div {
	  height: 140px;
	}
}

/* =========================================================
#header-inner
========================================================= */
#header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #fff;
  border-bottom: 1px solid #c9c9c9;
  z-index: 999;
  width: 100%;
}
@media screen and (max-width: 992px) {
  #header-inner {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

#header-inner .header-inner-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1030px;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media screen and (max-width: 992px) {
  #header-inner .header-inner-container {
    padding-left: 10px;
    padding-right: 0px;
  }
}

.is-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

.header-logo a {
  display: block;
  line-height: 1;
}

#gnavi {
  flex-grow: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media screen and (max-width: 992px) {
  #gnavi {
    display: none;
  }
}
#gnavi li {
  flex-grow: 1;
  width: 100%;
}
#gnavi li + li {
  border-left: 1px solid #c9c9c9;
}
#gnavi li.btn {
  border: none;
}
#gnavi li a {
  padding: 8px 10px;
  display: block;
  color: #000;
  text-align: center;
}
#gnavi li.btn a {
  width: 160px;
  padding: 0;
}
#gnavi .en {
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 0.4em;
  display: block;
}
#gnavi .ja {
  font-size: 10px;
  font-size: 1rem;
  line-height: 1;
  display: block;
}

/* =========================================================
#topAbout
========================================================= */
#topAbout {
  padding-top: 60px;
  padding-bottom: 30px;
}
#topAbout .sec-title {
  text-align: center;
  margin-bottom: 50px;
}
#topAbout .topAbout-read {
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  #topAbout .topAbout-read {
    margin-bottom: 20px;
  }
}
#topAbout .topAbout-txt {
  line-height: 2;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  #topAbout .topAbout-txt {
    text-align: left;
  }
}
#topAbout .topAbout-txt span.pinkbig {
  font-size: 20px;
  font-size: 2rem;
  color: #e4007f;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #topAbout .topAbout-txt span.pinkbig {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
#topAbout .topAbout-point-row {
  position: relative;
  background-color: #20b9ee;
  margin-bottom: 5px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
#topAbout .topAbout-point-row::before {
  position: absolute;
  background: url(../images/topAbout-point-back01.png) no-repeat left top;
  display: block;
  content: "";
  width: 60px;
  height: 60px;
  left: 0;
  top: 0;
}
#topAbout .topAbout-point-row::after {
  position: absolute;
  background: url(../images/topAbout-point-back02.png) no-repeat right bottom;
  display: block;
  content: "";
  width: 60px;
  height: 60px;
  right: 0;
  bottom: 0;
}
#topAbout .topAbout-point-col:nth-child(1) {
  position: relative;
  z-index: 2;
  padding: 10px;
  width: 40%;
  max-width: 300px;
  background-position: right 50%;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #topAbout .topAbout-point-col:nth-child(1) {
    width: 20%;
    max-width: 71px;
    padding: 10px 5px 10px 10px;
  }
}
#topAbout .topAbout-point-col:nth-child(2) {
  padding: 10px 15px;
  position: relative;
  z-index: 2;
  width: 60%;
  max-width: 500px;
}
@media screen and (max-width: 768px) {
  #topAbout .topAbout-point-col:nth-child(2) {
    width: 80%;
    max-width: 272px;
    padding: 10px 15px 10px 0;
  }
}
#topAbout .point01 > .topAbout-point-col:nth-child(1) {
  background-repeat: no-repeat;
  background-image: url(../images/topAbout-point-im01.png);
  background-position: right 50%;
  background-size: 80%;
}
@media screen and (max-width: 768px) {
  #topAbout .point01 > .topAbout-point-col:nth-child(1) {
    background: none;
  }
}
#topAbout .point02 > .topAbout-point-col:nth-child(1) {
  background-repeat: no-repeat;
  background-image: url(../images/topAbout-point-im02.png);
  background-position: right 50%;
  background-size: 80%;
}
@media screen and (max-width: 768px) {
  #topAbout .point02 > .topAbout-point-col:nth-child(1) {
    background: none;
  }
}
#topAbout .point03 > .topAbout-point-col:nth-child(1) {
  background-repeat: no-repeat;
  background-image: url(../images/topAbout-point-im03.png);
  background-position: right 50%;
  background-size: 80%;
}
@media screen and (max-width: 768px) {
  #topAbout .point03 > .topAbout-point-col:nth-child(1) {
    background: none;
  }
}

/* =========================================================
#topDestination
========================================================= */
#topDestination .sec-title {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  #topDestination .sec-title {
    font-size: 20px;
    font-size: 2rem;
  }
}
#topDestination .sec-title span {
  display: inline-block;
  position: relative;
  padding-left: 40px;
  padding-right: 40px;
}
#topDestination .sec-title span::before, #topDestination .sec-title span::after {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  display: block;
  content: "";
}
#topDestination .sec-title span::before {
  background: url(../images/topDestination-icon.png) no-repeat left top;
  left: 0;
  top: 50%;
}
#topDestination .sec-title span::after {
  background: url(../images/topDestination-icon.png) no-repeat right top;
  right: 0;
  top: 50%;
}

.destinationArea {
  background-color: #0068b7;
  padding-bottom: 30px;
  background-image: url(../images/topDestination-back.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}
@media screen and (max-width: 576px) {
  .destinationArea {
    background-size: cover;
  }
}
.destinationArea h3 {
  text-align: center;
  margin-bottom: 20px;
}
.destinationArea h3 span {
  margin-top: -1px;
}
.destinationArea ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.destinationArea ul li {
  width: 50%;
  padding: 10px 15px;
}
@media screen and (max-width: 576px) {
  .destinationArea ul li {
    width: 100%;
  }
}
.destinationArea ul li p {
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 10px;
  background-color: #fff;
  line-height: 1.2;
  color: #00a0e9;
}
.destinationArea ul li p span {
  font-weight: bold;
  font-size: 28px;
  font-size: 2.8rem;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .destinationArea ul li p span {
    font-size: 20px;
    font-size: 2rem;
  }
}
.destinationArea ul li p span.kakko {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
}

.destinationArea-more {
  text-align: center;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
}

/* =========================================================
#topMessage
========================================================= */
#topMessage {
  margin-left: -15px;
  margin-right: -15px;
  padding-top: 60px;
  padding-bottom: 30px;
}
#topMessage .topMessage-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
}

.messageArea {
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 768px) {
  .messageArea {
    width: 100%;
  }
}
.messageArea h2 {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}
.messageArea h2 img {
  position: relative;
  z-index: 2;
}
.messageArea h2::before {
  position: absolute;
  display: block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #c7c5c4;
  top: 10px;
}
.messageArea .messageBox {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .messageArea .messageBox {
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px;
  }
}
.messageArea .tategaki {
  font-weight: bold;
  width: 50%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: "Sawarabi Mincho",游明朝,"Yu Mincho Medium",YuMincho Medium,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 20px;
  font-size: 2rem;
  line-height: 2.5;
}
@media screen and (max-width: 992px) {
  .messageArea .tategaki {
    line-height: 2;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
  }
}

.movieArea {
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .movieArea {
    width: 100%;
  }
}
.movieArea .movieBox {
  margin-top: 10px;
  display: inline-block;
  max-width: 480px;
}
.movieArea .movieBox h3 {
  background-color: #000;
  color: #fff;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.2;
  padding: 1em 1em;
  text-align: center;
}

/* =========================================================
.entryBtn
========================================================= */
.entryBtn {
  text-align: center;
  padding: 15px;
}
.entryBtn a {
  background: -moz-linear-gradient(50% 100% 90deg, #e50065 0%, #e95377 100%);
  background: -webkit-linear-gradient(90deg, #e50065 0%, #e95377 100%);
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, #e50065), color-stop(1, #e95377));
  background: -o-linear-gradient(90deg, #e50065 0%, #e95377 100%);
  background: -ms-linear-gradient(90deg, #e50065 0%, #e95377 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E50065', endColorstr='#E95377' ,GradientType=0)";
  background: linear-gradient(0deg, #e50065 0%, #e95377 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E95377',endColorstr='#E50065' , GradientType=0);
  padding: 15px;
  border-radius: 10px;
  display: inline-block;
  max-width: 600px;
  width: 100%;
  transition: all 0.3s ease;
}
.entryBtn a:hover {
  background: -moz-linear-gradient(50% 100% 90deg, #ffad00 0%, #ffde00 99.87%);
  background: -webkit-linear-gradient(90deg, #ffad00 0%, #ffde00 99.87%);
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, #ffad00), color-stop(0.9987, #ffde00));
  background: -o-linear-gradient(90deg, #ffad00 0%, #ffde00 99.87%);
  background: -ms-linear-gradient(90deg, #ffad00 0%, #ffde00 99.87%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFAD00', endColorstr='#FFDE00' ,GradientType=0)";
  background: linear-gradient(0deg, #ffad00 0%, #ffde00 99.87%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDE00',endColorstr='#FFAD00' , GradientType=0);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

/* =========================================================
#topHuman
========================================================= */
#topHuman {
  padding-top: 60px;
  padding-bottom: 30px;
}
#topHuman .sec-title {
  text-align: center;
  margin-bottom: 30px;
}
#topHuman .topHuman-read {
  font-size: 30px;
  font-size: 3rem;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #topHuman .topHuman-read {
    font-size: 20px;
    font-size: 2rem;
  }
}
#topHuman .topHuman-read span {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  position: relative;
}
#topHuman .topHuman-read span::before {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  width: 4px;
  height: 100%;
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  display: block;
  content: "";
}
#topHuman .topHuman-read span::after {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #000;
  width: 4px;
  height: 100%;
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  display: block;
  content: "";
}
#topHuman .topHuman-jumpArea {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  margin-bottom: 20px;
}
#topHuman .topHuman-jumpArea li {
  width: 24%;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  #topHuman .topHuman-jumpArea li {
    width: 48%;
  }
}
#topHuman .topHuman-jumpArea li img {
  width: 100%;
  max-width: inherit;
}

/* == #voice共通============ */
.voiceRow {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.voiceCol {
  position: relative;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .voiceCol {
    width: 100%;
  }
}

.voiceTxtArea {
  padding: 40px 40px 80px 40px;
}
@media screen and (max-width: 768px) {
  .voiceTxtArea {
    padding: 20px 15px 80px 15px;
  }
}

.voice-name {
  margin-bottom: 20px;
}

.voice-title {
  font-size: 30px;
  font-size: 3rem;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .voice-title {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .voice-title br {
    display: none;
  }
}

.voice-arrow {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}
.voice-arrow a {
  display: inline-block;
}

/* == #voice01============ */
#voice01 {
  background-color: #fff100;
}
@media screen and (max-width: 768px) {
  #voice01 {
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  }
}
#voice01 .voiceImgArea {
  padding: 40px 40px 0 40px;
  background-image: url(../images/topHuman01-back.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  #voice01 .voiceImgArea {
    width: 100%;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 20px 20px 0 20px;
  }
}
#voice01 .voice-catch {
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  #voice01 .voice-catch {
    width: 60%;
  }
}
#voice01 .voice-humanimg {
  text-align: center;
}
@media screen and (max-width: 768px) {
  #voice01 .voice-humanimg {
    width: 40%;
  }
}

/* == #voice02============ */
#voice02 {
  background-color: #00a0e9;
  color: #fff;
}
#voice02 .voiceImgArea {
  padding: 0px 40px 0 40px;
  background-image: url(../images/topHuman02-back.png);
  background-position: center 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-align-content: center;
  align-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #voice02 .voiceImgArea {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 20px 20px 0 20px;
  }
}
#voice02 .voice-catch {
  text-align: center;
  -webkit-align-self: center;
  align-self: center;
}
#voice02 .voice-humanimg {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

/* == #voice03============ */
#voice03 {
  background-color: #e94f98;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #voice03 {
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  }
}
#voice03 .voiceImgArea {
  padding: 0px 40px 0 40px;
  background-image: url(../images/topHuman03-back.png);
  background-position: center 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-align-content: center;
  align-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #voice03 .voiceImgArea {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 20px 20px 0 20px;
  }
}
#voice03 .voice-catch {
  text-align: center;
  -webkit-align-self: center;
  align-self: center;
}
#voice03 .voice-humanimg {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

/* == #voice04============ */
#voice04 {
  background-color: #91c31f;
  color: #fff;
}
#voice04 .voiceImgArea {
  padding: 0px 40px 0 40px;
  background-image: url(../images/topHuman04-back.png);
  background-position: center 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-align-content: center;
  align-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #voice04 .voiceImgArea {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 20px 20px 0 20px;
  }
}
#voice04 .voice-catch {
  text-align: center;
  -webkit-align-self: center;
  align-self: center;
}
#voice04 .voice-humanimg {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

/* =========================================================
#topSkillup
========================================================= */
#topSkillup {
  padding-top: 60px;
  padding-bottom: 60px;
}
#topSkillup .sec-title {
  text-align: center;
  margin-bottom: 30px;
}
#topSkillup .skillupArea {
  background-color: #fff100;
  padding: 40px 0 0;
}
#topSkillup .topSkillup-midashi {
  text-align: center;
  margin-bottom: 30px;
}
#topSkillup .topSkillup-catch {
  text-align: center;
  margin-top: 20px;
}
#topSkillup .skillupRow {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: -15px;
  margin-right: -15px;
}
#topSkillup .skillupCol {
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}
@media screen and (max-width: 576px) {
  #topSkillup .skillupCol {
    width: 100%;
  }
}
#topSkillup .skillupCard {
  position: relative;
}
#topSkillup .skillupCard h4 {
  position: absolute;
  left: -10px;
  top: -10px;
}
#topSkillup .skillupCard .skillupPhoto {
  text-align: center;
  margin-bottom: 5px;
}
#topSkillup .skillupCard .skillupPhoto img {
  border: 16px solid #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
  #topSkillup .skillupCard .skillupPhoto img {
    border: 6px solid #fff;
  }
}

/* =========================================================
#topWorkflow
========================================================= */
#topWorkflow {
  padding-top: 60px;
  padding-bottom: 30px;
}
#topWorkflow .sec-title {
  text-align: center;
  margin-bottom: 30px;
}
#topWorkflow .topWorkflow-readArea {
  height: 430px;
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  #topWorkflow .topWorkflow-readArea {
    height: 300px;
  }
}
@media screen and (max-width: 576px) {
  #topWorkflow .topWorkflow-readArea {
    height: 200px;
  }
}
#topWorkflow .topWorkflow-readArea::before {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #00a0e9;
  top: 0;
  left: 0;
  z-index: 3;
  content: "";
  display: block;
}
#topWorkflow .topWorkflow-readArea::after {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #00a0e9;
  bottom: 0;
  left: 0;
  z-index: 3;
  content: "";
  display: block;
}
#topWorkflow .topWorkflow-read {
  position: absolute;
  left: 0%;
  top: 50%;
  padding: 20px;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  z-index: 2;
  color: #fff;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: bold;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
}
#topWorkflow .topWorkflow-read span {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  #topWorkflow .topWorkflow-read {
    font-size: 26px;
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 576px) {
  #topWorkflow .topWorkflow-read {
    font-size: 20px;
    font-size: 2rem;
  }
}
#topWorkflow .topWorkflow-readBack {
  position: absolute;
  width: 100%;
  height: 430px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #topWorkflow .topWorkflow-readBack {
    height: 300px;
  }
}
@media screen and (max-width: 576px) {
  #topWorkflow .topWorkflow-readBack {
    height: 200px;
  }
}
#topWorkflow .topWorkflow-readBack div {
  width: 33.333%;
  height: 100%;
}
#topWorkflow .topWorkflow-readBack .readBack-l {
  width: 33.333%;
  background: url(../images/topWorkflow-readback01.png) no-repeat 50% 50%;
  background-size: cover;
}
#topWorkflow .topWorkflow-readBack .readBack-c {
  width: 33.333%;
  background: url(../images/topWorkflow-readback02.png) no-repeat 50% 50%;
  background-size: cover;
}
#topWorkflow .topWorkflow-readBack .readBack-r {
  width: 33.333%;
  background: url(../images/topWorkflow-readback03.png) no-repeat 50% 50%;
  background-size: cover;
}
#topWorkflow .topWorkflow-readBack img {
  width: 100%;
  height: 100%;
}
#topWorkflow .topWorkflow-midashi {
  text-align: center;
  margin-bottom: 20px;
}
#topWorkflow .topWorkflow-midashi img {
  max-width: 70vw;
}
#topWorkflow .topSWorkflow-catch {
  text-align: center;
  margin-top: 30px;
}

/* =========================================================
#topRecruit
========================================================= */
#topRecruit {
  padding-top: 60px;
  padding-bottom: 30px;
}
#topRecruit .sec-title {
  text-align: center;
  margin-bottom: 30px;
}
#topRecruit .topRecruit-read {
  font-size: 30px;
  font-size: 3rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
  #topRecruit .topRecruit-read {
    font-size: 20px;
    font-size: 2rem;
  }
}
#topRecruit .topRecruit-read span {
  display: inline-block;
  position: relative;
  padding-left: 40px;
  padding-right: 40px;
}
#topRecruit .topRecruit-read span::before, #topRecruit .topRecruit-read span::after {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  display: block;
  content: "";
}
#topRecruit .topRecruit-read span::before {
  background: url(../images/topDestination-icon.png) no-repeat left top;
  left: 0;
  top: 50%;
}
#topRecruit .topRecruit-read span::after {
  background: url(../images/topDestination-icon.png) no-repeat right top;
  right: 0;
  top: 50%;
}
#topRecruit .topRecruit-subread {
  font-size: 30px;
  font-size: 3rem;
  font-family: "Sawarabi Mincho",游明朝,"Yu Mincho Medium",YuMincho Medium,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
  #topRecruit .topRecruit-subread {
    font-size: 20px;
    font-size: 2rem;
  }
}

#qaArea {
  padding-bottom: 30px;
}
#qaArea .qaArea-midashi {
  background-color: #00a0e9;
  color: #fff;
  padding: 0.3em 1em;
  line-height: 1.2;
  text-align: center;
  font-size: 30px;
  font-size: 3rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  #qaArea .qaArea-midashi {
    font-size: 20px;
    font-size: 2rem;
  }
}
#qaArea .qaWrap {
  margin-bottom: 15px;
}
#qaArea .qaWrap-question {
  position: relative;
  font-size: 25px;
  font-size: 2.5rem;
  color: #e85298;
  padding: 0.4em 0 0.4em 60px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  #qaArea .qaWrap-question {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 0.2em 0 0.6em 40px;
  }
}
#qaArea .qaWrap-question::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "Q.";
  font-size: 50px;
  font-size: 5rem;
  line-height: 1;
  font-weight: bold;
  color: #e85298;
}
@media screen and (max-width: 768px) {
  #qaArea .qaWrap-question::before {
    font-size: 30px;
    font-size: 3rem;
  }
}
#qaArea .qaWrap-answer {
  border-top: 1px dashed #999;
  line-height: 1.4;
  position: relative;
  font-size: 15px;
  font-size: 1.5rem;
  padding: 0.7em 0 0.7em 40px;
}
#qaArea .qaWrap-answer::before {
  position: absolute;
  left: 0;
  top: 0.2em;
  content: "A.";
  font-size: 30px;
  font-size: 3rem;
  line-height: 1;
  font-weight: bold;
  color: #000;
}

#recruitData {
  padding: 0 30px 60px;
  background-color: #00a0e9;
}
@media screen and (max-width: 768px) {
  #recruitData {
    padding: 0 0 20px;
  }
}
#recruitData .recruitDataArea-midashi {
  color: #fff;
  font-size: 30px;
  font-size: 3rem;
  line-height: 1;
  font-weight: bold;
  padding: 0.5em 1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #recruitData .recruitDataArea-midashi {
    font-size: 20px;
    font-size: 2rem;
  }
}
#recruitData .recruitDataBox {
  background-color: #fff;
  padding: 20px;
}
#recruitData table {
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.4;
}
#recruitData table + table {
  margin-top: 40px;
}
#recruitData table caption {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #000;
  padding-bottom: 0.2em;
}
#recruitData table caption + tbody tr:first-child {
  border-top: none;
}
#recruitData table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}
#recruitData table th {
  text-align: center;
  background-color: #dbeff3;
  font-weight: bold;
}
#recruitData table th,
#recruitData table td {
  padding: 1.5em;
  vertical-align: top;
}
#recruitData table tbody tr {
  border: 1px solid #9e9fa0;
}
#recruitData table hr {
  border-top: 1px dashed #999;
  display: block;
  height: 0px;
  margin: 20px 0;
  width: 100%;
  background-color: #fff;
}
#recruitData table thead th, #recruitData table thead td {
  border-top: 1px solid #9e9fa0;
  border-left: 1px solid #9e9fa0;
  border-right: 1px solid #9e9fa0;
  border-bottom: 2px solid #000;
  vertical-align: bottom;
  background-color: #ffeabe;
  font-size: 30px;
  font-size: 3rem;
  line-height: 1.2;
  padding: 0.3em 1em;
}
@media screen and (max-width: 768px) {
  #recruitData table thead th, #recruitData table thead td {
    font-size: 20px;
    font-size: 2rem;
  }
}
#recruitData table thead th span, #recruitData table thead td span {
  letter-spacing: 1em;
  margin-right: -1em;
}

/* =========================================================
#footer
========================================================= */
#footer {
  margin-top: 30px;
  background-color: #eaf6fd;
  padding-top: 30px;
}
#footer #footer-logo {
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1em;
}
#footer .footer-address {
  margin-bottom: 30px;
}
#footer .footer-address dl {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  text-align: left;
}
#footer .footer-address dt {
  font-weight: bold;
  text-align: left;
  width: 8em;
}
#footer .footer-address dd {
  text-align: left;
}
#footer .footer-officialBtn {
  border: 1px solid #807c7a;
  padding: 1em;
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  background-color: #fff;
  display: inline-block;
  color: #333;
}
@media screen and (max-width: 768px) {
  #footer .footer-officialBtn {
    font-size: 16px;
    font-size: 1.6rem;
  }
}
#footer .footer-officialBtn:hover {
  background-color: yellow;
}

#copy {
  margin-top: 30px;
  background: -moz-linear-gradient(0% 50% 0deg, #003466 0%, #003d75 0.72%, #005092 2.43%, #005da6 4.12%, #0065b3 5.79%, #0068b7 7.39%, #55c4f1 14.39%, #76cff4 15.72%, #a2def7 17.73%, #c2e8fa 19.53%, #d6effb 21.04%, #ddf1fc 22.07%, #d4edfb 23.2%, #bbe1f9 25.07%, #92cef6 27.43%, #5bb5f1 30.17%, #55b2f1 30.44%, #0068b7 39.06%, #003466 48.07%);
  background: -webkit-linear-gradient(0deg, #003466 0%, #003d75 0.72%, #005092 2.43%, #005da6 4.12%, #0065b3 5.79%, #0068b7 7.39%, #55c4f1 14.39%, #76cff4 15.72%, #a2def7 17.73%, #c2e8fa 19.53%, #d6effb 21.04%, #ddf1fc 22.07%, #d4edfb 23.2%, #bbe1f9 25.07%, #92cef6 27.43%, #5bb5f1 30.17%, #55b2f1 30.44%, #0068b7 39.06%, #003466 48.07%);
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0, #003466), color-stop(0.0072, #003d75), color-stop(0.0243, #005092), color-stop(0.0412, #005da6), color-stop(0.0579, #0065b3), color-stop(0.0739, #0068b7), color-stop(0.1439, #55c4f1), color-stop(0.1572, #76cff4), color-stop(0.1773, #a2def7), color-stop(0.1953, #c2e8fa), color-stop(0.2104, #d6effb), color-stop(0.2207, #ddf1fc), color-stop(0.232, #d4edfb), color-stop(0.2507, #bbe1f9), color-stop(0.2743, #92cef6), color-stop(0.3017, #5bb5f1), color-stop(0.3044, #55b2f1), color-stop(0.3906, #0068b7), color-stop(0.4807, #003466));
  background: -o-linear-gradient(0deg, #003466 0%, #003d75 0.72%, #005092 2.43%, #005da6 4.12%, #0065b3 5.79%, #0068b7 7.39%, #55c4f1 14.39%, #76cff4 15.72%, #a2def7 17.73%, #c2e8fa 19.53%, #d6effb 21.04%, #ddf1fc 22.07%, #d4edfb 23.2%, #bbe1f9 25.07%, #92cef6 27.43%, #5bb5f1 30.17%, #55b2f1 30.44%, #0068b7 39.06%, #003466 48.07%);
  background: -ms-linear-gradient(0deg, #003466 0%, #003d75 0.72%, #005092 2.43%, #005da6 4.12%, #0065b3 5.79%, #0068b7 7.39%, #55c4f1 14.39%, #76cff4 15.72%, #a2def7 17.73%, #c2e8fa 19.53%, #d6effb 21.04%, #ddf1fc 22.07%, #d4edfb 23.2%, #bbe1f9 25.07%, #92cef6 27.43%, #5bb5f1 30.17%, #55b2f1 30.44%, #0068b7 39.06%, #003466 48.07%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#003466', endColorstr='#003466' ,GradientType=0)";
  background: linear-gradient(90deg, #003466 0%, #003d75 0.72%, #005092 2.43%, #005da6 4.12%, #0065b3 5.79%, #0068b7 7.39%, #55c4f1 14.39%, #76cff4 15.72%, #a2def7 17.73%, #c2e8fa 19.53%, #d6effb 21.04%, #ddf1fc 22.07%, #d4edfb 23.2%, #bbe1f9 25.07%, #92cef6 27.43%, #5bb5f1 30.17%, #55b2f1 30.44%, #0068b7 39.06%, #003466 48.07%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003466',endColorstr='#003466' , GradientType=1);
  color: #fff;
  padding: 0.5em;
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
}

/* =========================================================
.pagetop
========================================================= */
.pagetop {
  background-color: #00a0e9;
  bottom: 10px;
  display: inline-block;
  position: fixed;
  right: 10px;
  transform: translate3d(0px, 50px, 0px);
  transition-duration: 0.3s;
  visibility: hidden;
  z-index: 999;
  padding: 10px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #fff;
  color: #fff !important;
}
.pagetop:hover {
  background-color: #fccc00;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.pagetop.backtotop-visible {
  transform: translate3d(0px, 0px, 0px);
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  visibility: visible;
}
.pagetop.backtotop-visible:hover {
  background-color: #fccc00;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

/*============================
#loader
============================*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0) perspective(0);
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 256px;
  height: 68px;
  margin-top: -34px;
  margin-left: -128px;
  text-align: center;
  z-index: 1000;
}

#loader-logo {
  opacity: 1;
  animation-duration: 0.5s;
  animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: fade-in;
}

@keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
/*============================
#drawer 
============================*/
#drawer {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 998;
  width: 100%;
  height: 100vh;
  background: #00a0e9;
  -ms-overflow-y: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#drawer::-webkit-scrollbar {
  display: none;
}

#drawer hr {
  border: none;
  height: 1px;
  background-color: #fff;
  width: 100%;
  margin: 30px 0;
}

#drawer #drawer-inner {
  padding-top: 40px;
  padding-bottom: 40px;
}

#drawer .drawer-title {
  text-align: center;
  margin-bottom: 30px;
}
#drawer .drawer-title img {
  max-width: 250px;
}

#drawer .drawer-nav {
  margin-bottom: 20px;
  list-style: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  font-size: 1.6rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#drawer .drawer-nav li {
  width: 100%;
}

#drawer .drawer-nav li a {
  position: relative;
  font-weight: bold;
  padding: 0.7em 0.5em;
  display: block;
  color: #fff;
  text-align: center;
}

#drawer .drawer-nav li a:hover {
  color: yellow;
}

#drawer .drawer-whitewrap {
  background-color: #fff;
  padding: 30px;
  max-width: 600px;
  margin: 0 auto;
}

#drawer .drawer-cont_area {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
@media screen and (max-width: 576px) {
  #drawer .drawer-cont_area {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
#drawer .drawer-cont_area .drawer-contbtn, #drawer .drawer-cont_area .drawer-entrybtn {
  width: 50%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
@media screen and (max-width: 576px) {
  #drawer .drawer-cont_area .drawer-contbtn, #drawer .drawer-cont_area .drawer-entrybtn {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  #drawer .drawer-cont_area .drawer-entrybtn {
    margin-top: 10px;
  }
}
#drawer .drawer-cont_area a {
  color: #fff;
  font-weight: bold;
  padding: 1em 2em;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1;
  display: block;
  max-width: 500px;
  text-align: center;
  border-radius: 1.5em;
}
#drawer .drawer-cont_area .drawer-entrybtn a {
  background: -moz-linear-gradient(50% 100% 90deg, #e50065 0%, #e95377 100%);
  background: -webkit-linear-gradient(90deg, #e50065 0%, #e95377 100%);
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, #e50065), color-stop(1, #e95377));
  background: -o-linear-gradient(90deg, #e50065 0%, #e95377 100%);
  background: -ms-linear-gradient(90deg, #e50065 0%, #e95377 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E50065', endColorstr='#E95377' ,GradientType=0)";
  background: linear-gradient(0deg, #e50065 0%, #e95377 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E95377',endColorstr='#E50065' , GradientType=0);
  padding: 15px;
  border-radius: 10px;
  display: inline-block;
  max-width: 600px;
  width: 100%;
  transition: all 0.3s ease;
}
#drawer .drawer-cont_area .drawer-entrybtn a:hover {
  background: -moz-linear-gradient(50% 100% 90deg, #ffad00 0%, #ffde00 99.87%);
  background: -webkit-linear-gradient(90deg, #ffad00 0%, #ffde00 99.87%);
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, #ffad00), color-stop(0.9987, #ffde00));
  background: -o-linear-gradient(90deg, #ffad00 0%, #ffde00 99.87%);
  background: -ms-linear-gradient(90deg, #ffad00 0%, #ffde00 99.87%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFAD00', endColorstr='#FFDE00' ,GradientType=0)";
  background: linear-gradient(0deg, #ffad00 0%, #ffde00 99.87%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDE00',endColorstr='#FFAD00' , GradientType=0);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.drawer-open {
  overflow: hidden;
}

/********** #toggleBtn ************/
.header-togglebtn {
  background-color: #00a0e9;
  padding: 15px 10px;
  display: none;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: 5px;
  cursor: pointer;
}
@media screen and (max-width: 992px) {
  .header-togglebtn {
    display: -webkit-flex;
    display: flex;
  }
}

.menu-trigger {
  vertical-align: middle;
}

.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menu-trigger {
  position: relative;
  width: 26px;
  height: 21px;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}

.menu-trigger span:nth-of-type(2) {
  top: 50%;
  margin-top: -2px;
}

.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.drawer-open .menu-trigger span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}

.drawer-open .menu-trigger span:nth-of-type(2) {
  opacity: 0;
}

.drawer-open .menu-trigger span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}

.movieBox iframe {
	width: 480px;
	height: 270px;
}
@media screen and (max-width: 576px) {
	.movieBox iframe {
		width: 100%;
		height: auto;
	}
}

/**/
@media screen and (max-width: 992px) {
  #topMessage{
    margin: 0;
  }
  .messageArea,
  .movieArea{
    width: 100%;
  }
}