/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

a {
  background: transparent
}

a:active,
a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b,
strong {
  font-weight: bold
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -0.5em
}

sub {
  bottom: -0.25em
}

img {
  border: 0
}

svg:not(:root) {
  overflow: hidden
}

figure {
  margin: 1em 40px
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0
}

pre {
  overflow: auto
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

button input::-moz-focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em
}

legend {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto
}

optgroup {
  font-weight: bold
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

td,
th {
  padding: 0
}

html {
  font: 20px/30px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif
}

body {
  padding: 0
}

article {
  max-width: 1400px;
  min-width: 980px;
  margin: 0 auto
}

@media screen and (max-width:767px) {
  article {
    min-width: 0
  }
}

h2 {
  line-height: 1.5;
  margin: 2.4em 0 .6em;
  color: #000
}

h3 {
  font-size: 30px;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #000;
  margin: 2.15em 0 .7em
}

h4 {
  font-size: 16px;
  font-size: .8rem;
  line-height: 1.875;
  color: #000;
  margin: 1em 0 .5em
}

p,
li {
  font-weight: 300;
  font-size: 14px;
  font-size: .7rem;
  line-height: 2.14285714;
  color: #000
}

p {
  margin: 0 auto
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none
}

.list li {
  text-indent: -0.8em;
  margin-top: .8em;
  padding-left: .5em
}

.list li:first-child {
  margin-top: -0.5em
}

.list li:before {
  content: "•";
  font-size: 18px;
  line-height: 1;
  margin: 0 .1em 0 .05em
}

figure {
  margin: 0
}

.en-EN {
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.js [data-show="on-scroll"] {
  opacity: 0;
  filter: alpha(opacity=0);
  filter: -\9;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
  -moz-transform: translateY(40px);
  -o-transform: translateY(40px);
  -ms-transform: translateY(40px);
  transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out
}

.js [data-show="on-scroll"].in-view {
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  opacity: 1;
  filter: alpha(opacity=100);
  filter: -\9
}

.row {
  *zoom: 1
}

.row:before,
.row:after {
  content: " ";
  display: table
}

.row:after {
  clear: both
}

.row p+p {
  margin-top: -0.5em
}

.col {
  position: relative;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.col-2 {
  width: 16.66666667%
}

.col-3 {
  width: 25%
}

.col-4 {
  width: 33.33333333%
}

.col-6 {
  width: 50%
}

.col-20 {
  width: 20%
}

.floatbox {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

@media screen and (max-width:767px) {
  .floatbox {
    position: relative;
    left: auto;
    top: auto;
    margin: 70px 20px 0;
    padding-bottom: 50px;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none
  }

  .floatbox .button,
  .floatbox .button {
    width: 100%
  }
}

.floatbox-headline {
  font-weight: 600;
  font-size: 22px;
  font-size: 1.1rem;
  line-height: 54px;
  letter-spacing: .05em;
  color: #000;
  position: relative;
  margin: 0;
  background-color: #fff;
  border: 3px solid #000;
  -webkit-font-smoothing: antialiased
}

.floatbox-headline:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-position: center center;
  background-repeat: no-repeat;
  height: 50px;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

@media screen and (max-height:700px) {
  .floatbox-headline {
    font-size: .9rem;
    line-height: 44px
  }
}

@media screen and (max-width:767px) {
  .floatbox-headline {
    font-size: 18px;
    font-size: .9rem;
    line-height: 1.3;
    padding: .8em 20px .6em
  }

  .floatbox-headline:before {
    height: 40px;
    background-position: center left;
    transform: translate(-10px, -85%);
    -webkit-transform: translate(-10px, -85%);
    -moz-transform: translate(-10px, -85%);
    -o-transform: translate(-10px, -85%);
    -ms-transform: translate(-10px, -85%)
  }
}

.floatbox-body {
  text-align: left;
  position: relative;
  margin-bottom: 50px;
  min-height: 110px;
  padding: 50px 77px;
  border: 3px solid #000;
  border-top-width: 0
}

@media screen and (max-height:700px) {
  .floatbox-body {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px
  }
}

@media screen and (max-width:767px) {
  .floatbox-body {
    margin-bottom: 50px;
    padding: 30px 27px;
    height: auto;
    min-height: 0
  }
}

.floatbox-text {
  font-weight: 300;
  font-size: 16px;
  font-size: .8rem;
  line-height: 1.8125;
  letter-spacing: .05em;
  color: #000;
  margin: -0.5em 0 -0.5em;
  max-width: 450px
}

@media screen and (max-height:700px) {
  .floatbox-text {
    font-size: .7rem
  }
}

@media screen and (max-width:767px) {
  .floatbox-text {
    font-size: .75rem;
    line-height: 1.8
  }
}

.floatbox-image {
  position: absolute;
  right: -150px;
  bottom: -58px;
  width: 300px;
  padding-top: 370px;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-image: url(/mibyou/special/_assets/v/diagnosis/images/business_level_1_hero.png);
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .floatbox-image {
    position: static;
    margin-left: -20px;
    margin-right: -20px;
    width: auto;
    padding-top: 100%
  }
}

.promos {
  margin: 0 auto;
  width: 872px
}

@media screen and (max-width:767px) {
  .promos {
    width: 100%
  }
}

.promo-header {
  text-align: center;
  position: relative;
  margin: 0 auto 50px
}

.promo-header:before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 100%;
  height: 3px;
  background-color: #000
}

.promo-headline {
  text-indent: 100%;
  white-space: nowrap;
  position: relative;
  margin: 0 auto;
  width: 190px;
  height: 0;
  padding-top: 40px;
  background: url(/mibyou/special/_assets/global/images/text_learn_more.svg) no-repeat center center;
  overflow: hidden;
  z-index: 1;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

.promo-list {
  margin: 0 100px;
  *zoom: 1
}

.promo-list:before,
.promo-list:after {
  content: " ";
  display: table
}

.promo-list:after {
  clear: both
}

@media screen and (max-width:767px) {
  .promo-list {
    margin: 0
  }
}

.promo {
  text-align: center;
  padding: 0 12px;
  float: left
}

.promo a {
  text-decoration: none
}

.promo a:hover .promo-title {
  color: #fff;
  background-color: #000
}

.promo a:hover .promo-title .icon-arrow-right {
  background-image: url(/mibyou/special/_assets/global/images/icon_arrow_right_white.svg)
}

@media screen and (max-width:767px) {
  .promo {
    margin-top: 40px;
    padding: 0;
    float: none
  }

  .promo:first-child {
    margin-top: 0
  }
}

.promo-image {
  position: relative;
  margin: 0 auto;
  width: 200px;
  padding-top: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

.promo-title {
  font-weight: 600;
  font-size: 12px;
  font-size: .6rem;
  line-height: 24px;
  letter-spacing: .05em;
  color: #000;
  min-width: 154px;
  position: absolute;
  left: 50%;
  bottom: -15px;
  background-color: #fff;
  border: 3px solid #000;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%)
}

.promo-title .icon-arrow-right {
  width: 11px;
  padding-top: 11px;
  margin-right: 5px;
  background-image: url(/mibyou/special/_assets/global/images/icon_arrow_right_black.svg)
}

.button,
.button {
  font-weight: 600;
  font-size: 23px;
  font-size: 1.15rem;
  line-height: 1.08333333;
  letter-spacing: .1em;
  text-decoration: none;
  color: #fff;
  margin: 0 auto;
  display: inline-block;
  min-width: 294px;
  padding: .82608696em 0;
  background-color: #000;
  border: 3px solid #000;
  -webkit-font-smoothing: antialiased;
  transition-property: opacity, transform
}

.button .icon-arrow-right,
.button .icon-arrow-right {
  vertical-align: bottom;
  margin-right: 20px
}

.button:hover,
.button:hover {
  color: #000;
  background-color: transparent
}

.button:hover .icon-arrow-right,
.button:hover .icon-arrow-right {
  background-image: url(/mibyou/special/_assets/global/images/icon_arrow_right_black.svg)
}

@media screen and (max-width:767px) {

  .button,
  .button {
    font-size: 1rem;
    min-width: 0
  }
}

.lead-text+.button,
.lead-text+.button-group,
.lead-text+.button {
  margin-top: 50px
}

.button-link {
  font-weight: 600;
  font-size: 18px;
  font-size: .9rem;
  line-height: 1.27777778;
  letter-spacing: .05em;
  text-decoration: none;
  color: #000;
  position: relative;
  margin: 0 auto;
  display: inline-block;
  min-width: 0;
  padding: 0 0 0 29px;
  background-color: transparent;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  *zoom: 1
}

.button-link:before,
.button-link:after {
  content: " ";
  display: table
}

.button-link:after {
  clear: both
}

.button-link small {
  display: block
}

.button-link .icon-arrow-right {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10.5px;
  background-image: url(/mibyou/special/_assets/global/images/icon_arrow_right_black.svg);
  float: left
}

.button-link:hover {
  color: #000;
  background-color: transparent
}

.button-link:hover .icon-arrow-right {
  background-image: url(/mibyou/special/_assets/global/images/icon_arrow_right_black.svg)
}

@media screen and (max-height:700px) {
  .button-link {
    font-size: .8rem
  }
}

.floatbox-text+.button-link {
  margin-top: 2.22222222em
}

.button-primary {
  min-width: 300px;
  padding: 22px 0;
  border: none;
  color: #000;
  background-color: #fff
}

.button-negative {
  min-width: 300px;
  padding: 22px 0;
  background-color: rgba(0, 0, 0, 0.05);
  border: none
}

.button-answer {
  text-indent: 100%;
  white-space: nowrap;
  width: 124px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center top;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover
}

@media screen and (max-width:767px) {
  .button-answer {
    width: 98px;
    height: 50px
  }
}

.button-yes {
  background-image: url(/mibyou/special/_assets/global/images/text_yes.svg);
  background-color: #fff;
  border-color: #fff
}

.button-yes:hover {
  border-color: #000
}

.button-no {
  background-image: url(/mibyou/special/_assets/global/images/text_no.svg)
}

.button-no:hover {
  background-position: center bottom
}

.button-next {
  text-indent: 100%;
  white-space: nowrap;
  width: 300px;
  height: 0;
  padding: 80px 0 0;
  background-position: center top;
  background-repeat: no-repeat;
  border-width: 0;
  overflow: hidden;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover
}

.button-next:hover {
  background-position: center bottom
}

@media screen and (max-width:360px) {
  .button-next {
    width: 100%;
    padding-top: 26.66666667%
  }
}

.button-group {
  font-size: 0;
  line-height: 0
}

.button-group .button+.button,
.button-group .button+.button {
  margin-left: 50px
}

.button-group .button-next+.button-next {
  margin-left: 20px
}

@media screen and (max-width:767px) {

  .button-group .button+.button,
  .button-group .button+.button {
    margin-left: 20px
  }
}

.icon-arrow-right {
  display: inline-block;
  width: 24px;
  padding-top: 26px;
  vertical-align: middle;
  background: url(/mibyou/special/_assets/global/images/icon_arrow_right_white.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .icon-arrow-right {
    width: 19.2px;
    padding-top: 20.8px
  }
}

.icon-arrow-small {
  display: inline-block;
  width: 12px;
  padding-top: 9px;
  vertical-align: middle;
  background: url(/mibyou/special/_assets/global/images/icon_arrow_right_grey.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

.icon-facebook {
  display: inline-block;
  width: 16px;
  padding-top: 30px;
  vertical-align: middle;
  background: url(/mibyou/special/_assets/global/images/icon_facebook.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

.icon-twitter {
  display: inline-block;
  width: 34px;
  padding-top: 30px;
  vertical-align: middle;
  background: url(/mibyou/special/_assets/global/images/icon_twitter.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

.lead-text {
  font-weight: 600;
  font-size: 16px;
  font-size: .8rem;
  line-height: 1.8125;
  letter-spacing: .1em;
  color: #000;
  margin: -0.5em auto -0.5em
}

@media screen and (max-width:767px) {
  .lead-text {
    font-size: .75rem
  }

  .lead-text br {
    display: none
  }
}

.promos+.lead-text {
  margin-top: 2.625em
}

@media screen and (max-width:767px) {
  .promos+.lead-text {
    margin-top: 4.13333333em
  }
}

.globalnav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 1140px;
  z-index: 4
}

@media screen and (max-width:767px) {
  .globalnav {
    min-width: 0
  }
}

.globalnav-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 1140px;
  height: 80px;
  background-color: #fff;
  z-index: 2
}

@media screen and (max-width:767px) {
  .globalnav-backdrop {
    min-width: 0;
    height: 50px
  }
}

.gn-logo {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 120px;
  height: 144px;
  background-color: #000;
  cursor: pointer;
  background: url(/mibyou/special/_assets/global/images/gn_logo.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  z-index: 5
}

@media screen and (max-width:767px) {
  .gn-logo {
    left: 10px;
    top: 8px;
    width: 30px;
    height: 36px
  }
}

.gn-yomeishu {
  position: absolute;
  left: 50%;
  top: 20.5px;
  margin-left: -146.5px;
  z-index: 10
}

@media screen and (max-width:767px) {
  .gn-yomeishu {
    top: 13.66666667px;
    margin-left: -97.66666667px
  }

  .gn-yomeishu img {
    width: 195.33333333px;
    height: auto
  }
}

.gn-title {
  font-weight: 600;
  font-size: 18px;
  font-size: .9rem;
  line-height: 4.44444444;
  letter-spacing: .2em;
  text-align: center;
  color: #000
}

.gn-menu {
  position: absolute;
  right: 50px;
  top: 50px;
  width: 60px;
  height: 60px;
  background-color: #000;
  cursor: pointer;
  z-index: 3
}

@media screen and (max-width:767px) {
  .gn-menu {
    right: 0px;
    top: 0px;
    width: 50px;
    height: 50px
  }
}

.gn-menu-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 24px;
  height: 3px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transition-duration: .3s;
  -webkit-transition-duration: .3s;
  -moz-transition-duration: .3s;
  -ms-transition-duration: .3s;
  -o-transition-duration: .3s
}

@media screen and (max-width:767px) {
  .gn-menu-bar {
    width: 20px
  }
}

.gn-menu-bar-top {
  transform: translate(-50%, -9px);
  -webkit-transform: translate(-50%, -9px);
  -moz-transform: translate(-50%, -9px);
  -o-transform: translate(-50%, -9px);
  -ms-transform: translate(-50%, -9px)
}

@media screen and (max-width:767px) {
  .gn-menu-bar-top {
    transform: translate(-50%, -8px);
    -webkit-transform: translate(-50%, -8px);
    -moz-transform: translate(-50%, -8px);
    -o-transform: translate(-50%, -8px);
    -ms-transform: translate(-50%, -8px)
  }
}

.gn-menu-bar-bottom {
  transform: translate(-50%, 6px);
  -webkit-transform: translate(-50%, 6px);
  -moz-transform: translate(-50%, 6px);
  -o-transform: translate(-50%, 6px);
  -ms-transform: translate(-50%, 6px)
}

@media screen and (max-width:767px) {
  .gn-menu-bar-bottom {
    transform: translate(-50%, 4px);
    -webkit-transform: translate(-50%, 4px);
    -moz-transform: translate(-50%, 4px);
    -o-transform: translate(-50%, 4px);
    -ms-transform: translate(-50%, 4px)
  }
}

.gn-overlap .gn-menu-bar {
  opacity: 0;
  filter: alpha(opacity=0)
}

.gn-overlap .gn-menu-bar-top {
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -o-transform: translate(-50%, -50%) rotate(-45deg);
  -ms-transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 1;
  filter: alpha(opacity=100)
}

.gn-overlap .gn-menu-bar-bottom {
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -o-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  opacity: 1;
  filter: alpha(opacity=100)
}

.gn-content {
  text-align: center;
  position: fixed;
  left: 80px;
  right: 80px;
  top: 80px;
  bottom: 80px;
  display: none;
  background-color: #ffe83c;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
  transition-duration: .3s;
  -webkit-transition-duration: .3s;
  -moz-transition-duration: .3s;
  -ms-transition-duration: .3s;
  -o-transition-duration: .3s
}

@media screen and (max-width:767px) {
  .gn-content {
    left: 10px;
    right: 10px;
    top: 50px;
    bottom: 50px
  }
}

.gn-overlap .gn-content,
.gn-transition .gn-content {
  display: block;
  left: 80px;
  right: 80px;
  top: 80px;
  bottom: 80px;
  opacity: .5;
  filter: alpha(opacity=50)
}

@media screen and (max-width:767px) {

  .gn-overlap .gn-content,
  .gn-transition .gn-content {
    left: 10px;
    right: 10px;
    top: 50px;
    bottom: 50px
  }
}

.gn-overlap .gn-content {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  opacity: 1;
  filter: alpha(opacity=100)
}

.gn-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: auto;
  width: 500px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%)
}

@media screen and (max-width:767px) {
  .gn-list {
    width: 100%
  }
}

.gn-list-item {
  font-weight: 600;
  font-size: 24px;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: .2em;
  color: #000;
  position: relative;
  padding: 1.25em 0;
  -webkit-font-smoothing: antialiased
}

.gn-list-item a {
  color: #000;
  text-decoration: none
}

.gn-list-item a:hover {
  text-decoration: underline
}

@media screen and (max-width:767px) {
  .gn-list-item {
    font-size: .8rem;
    letter-spacing: .1em;
    padding-left: 1.875em
  }
}

.gn-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 70px;
  height: 80px;
  background-position: center center;
  background-repeat: no-repeat;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .gn-icon {
    left: 10px;
    width: 56px;
    height: 64px
  }
}

.gn-icon-doctor {
  background-image: url(/mibyou/special/_assets/global/images/gn_icon_doctor.png)
}

.gn-icon-hot-water-bottle {
  background-image: url(/mibyou/special/_assets/global/images/gn_icon_hot_water_bottle.png)
}

.gn-icon-sick {
  background-image: url(/mibyou/special/_assets/global/images/gn_icon_sick.png)
}

.gn-icon-gohst {
  background-image: url(/mibyou/special/_assets/global/images/gn_icon_gohst.png)
}

.gn-icon-bag {
  background-image: url(/mibyou/special/_assets/global/images/gn_icon_bag.png)
}

.globalfooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 1140px;
  height: 80px;
  background-color: #fff;
  z-index: 1
}

@media screen and (max-width:767px) {
  .globalfooter {
    min-width: 0;
    height: 40px
  }
}

.gf-breadcrumb {
  font-size: 0;
  text-align: center;
  line-height: 0;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -5px 0 0 0;
  width: 100%
}

@media screen and (max-width:767px) {
  .gf-breadcrumb {
    text-align: right
  }
}

.page-question .gf-breadcrumb,
.page-diagnosis .gf-breadcrumb {
  margin-top: -13.5px
}

.gf-breadcrumb-item {
  font-weight: 600;
  font-size: 14px;
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .2em;
  color: #000;
  position: relative;
  display: inline-block;
  padding: 0 15px
}

.gf-breadcrumb-item:before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  margin-top: -6.5px;
  display: inline-block;
  width: 12px;
  padding-top: 9px;
  vertical-align: middle;
  background: url(/mibyou/special/_assets/global/images/icon_arrow_right_grey.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

.gf-breadcrumb-item:first-child:before {
  content: none
}

@media screen and (max-width:767px) {
  .gf-breadcrumb-item {
    font-size: .55rem;
    padding: 0 10px
  }
}

.page-question .gf-breadcrumb-item,
.page-diagnosis .gf-breadcrumb-item {
  font-weight: 600;
  font-size: 14px;
  font-size: .7rem
}

.page-question .gf-breadcrumb-item:before,
.page-diagnosis .gf-breadcrumb-item:before {
  margin-top: -15px
}

.gf-breadcrumb-item-link {
  font-weight: 300;
  text-decoration: none;
  color: #999
}

.gf-breadcrumb-item-link:hover {
  color: #000
}

.gf-indicator-title {
  font-weight: 300;
  font-size: 12px;
  font-size: .6rem;
  line-height: 1;
  letter-spacing: .2em;
  color: #999;
  margin-top: .75em;
  display: inline-block
}

@media screen and (max-width:767px) {
  .gf-indicator-title {
    font-size: .5rem
  }
}

.gf-indicator {
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  margin: 0
}

.gf-indicator-item {
  font-weight: 600;
  font-size: 11px;
  font-size: .55rem;
  line-height: 1;
  color: #999;
  display: inline-block;
  width: 8px;
  padding: 0 4px
}

@media screen and (max-width:767px) {
  .gf-indicator-item {
    padding: 0 2px
  }
}

.gf-indicator-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 1px solid #ccc;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%
}

.gf-sharer {
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 70px;
  top: 50%;
  margin-top: -10px
}

.gf-sharer .icon-twitter {
  width: 23px;
  padding-top: 19px
}

.gf-sharer .icon-facebook {
  width: 11px;
  padding-top: 20px
}

@media screen and (max-width:767px) {
  .gf-sharer {
    left: 3px
  }
}

.gf-sharer-item {
  text-align: center;
  line-height: 20px;
  padding: 0 10px;
  float: left
}

@media screen and (max-width:767px) {
  .gf-sharer-item {
    padding: 0 7px
  }
}

.page-question-01 .gf-breadcrumb-item-business .gf-indicator-title,
.page-question-02 .gf-breadcrumb-item-business .gf-indicator-title,
.page-question-03 .gf-breadcrumb-item-business .gf-indicator-title {
  color: #000
}

.page-question-01 .gf-breadcrumb-item-business .gf-indicator-dot,
.page-question-02 .gf-breadcrumb-item-business .gf-indicator-dot,
.page-question-03 .gf-breadcrumb-item-business .gf-indicator-dot {
  border-color: #000
}

.page-question-04 .gf-breadcrumb-item-lifestyle .gf-indicator-title,
.page-question-05 .gf-breadcrumb-item-lifestyle .gf-indicator-title,
.page-question-06 .gf-breadcrumb-item-lifestyle .gf-indicator-title {
  color: #000
}

.page-question-04 .gf-breadcrumb-item-lifestyle .gf-indicator-dot,
.page-question-05 .gf-breadcrumb-item-lifestyle .gf-indicator-dot,
.page-question-06 .gf-breadcrumb-item-lifestyle .gf-indicator-dot {
  border-color: #000
}

.page-question-07 .gf-breadcrumb-item-amusement .gf-indicator-title,
.page-question-08 .gf-breadcrumb-item-amusement .gf-indicator-title,
.page-question-09 .gf-breadcrumb-item-amusement .gf-indicator-title {
  color: #000
}

.page-question-07 .gf-breadcrumb-item-amusement .gf-indicator-dot,
.page-question-08 .gf-breadcrumb-item-amusement .gf-indicator-dot,
.page-question-09 .gf-breadcrumb-item-amusement .gf-indicator-dot {
  border-color: #000
}

.page-midnight-01 .gf-breadcrumb-item-midnight .gf-indicator-title,
.page-midnight-02 .gf-breadcrumb-item-midnight .gf-indicator-title,
.page-midnight-03 .gf-breadcrumb-item-midnight .gf-indicator-title {
  color: #000
}

.page-midnight-01 .gf-breadcrumb-item-midnight .gf-indicator-dot,
.page-midnight-02 .gf-breadcrumb-item-midnight .gf-indicator-dot,
.page-midnight-03 .gf-breadcrumb-item-midnight .gf-indicator-dot {
  border-color: #000
}

.page-diagnosis-01 .gf-breadcrumb-item-business .gf-indicator-title {
  color: #000
}

.page-diagnosis-02 .gf-breadcrumb-item-lifestyle .gf-indicator-title {
  color: #000
}

.page-diagnosis-03 .gf-breadcrumb-item-amusement .gf-indicator-title {
  color: #000
}

.page-question-01 .gf-breadcrumb-item-business .gf-indicator-item:nth-child(1) .gf-indicator-dot {
  background-color: #000
}

.page-question-02 .gf-breadcrumb-item-business .gf-indicator-item:nth-child(2) .gf-indicator-dot {
  background-color: #000
}

.page-question-03 .gf-breadcrumb-item-business .gf-indicator-item:nth-child(3) .gf-indicator-dot {
  background-color: #000
}

.page-diagnosis-01 .gf-breadcrumb-item-business .gf-indicator-item:nth-child(4) {
  color: #000
}

.page-question-04 .gf-breadcrumb-item-lifestyle .gf-indicator-item:nth-child(1) .gf-indicator-dot {
  background-color: #000
}

.page-question-05 .gf-breadcrumb-item-lifestyle .gf-indicator-item:nth-child(2) .gf-indicator-dot {
  background-color: #000
}

.page-question-06 .gf-breadcrumb-item-lifestyle .gf-indicator-item:nth-child(3) .gf-indicator-dot {
  background-color: #000
}

.page-diagnosis-02 .gf-breadcrumb-item-lifestyle .gf-indicator-item:nth-child(4) {
  color: #000
}

.page-question-07 .gf-breadcrumb-item-amusement .gf-indicator-item:nth-child(1) .gf-indicator-dot {
  background-color: #000
}

.page-question-08 .gf-breadcrumb-item-amusement .gf-indicator-item:nth-child(2) .gf-indicator-dot {
  background-color: #000
}

.page-question-09 .gf-breadcrumb-item-amusement .gf-indicator-item:nth-child(3) .gf-indicator-dot {
  background-color: #000
}

.page-diagnosis-03 .gf-breadcrumb-item-amusement .gf-indicator-item:nth-child(4) {
  color: #000
}

.page-midnight-01 .gf-breadcrumb-item-midnight .gf-indicator-item:nth-child(1) .gf-indicator-dot {
  background-color: #000
}

.page-midnight-02 .gf-breadcrumb-item-midnight .gf-indicator-item:nth-child(2) .gf-indicator-dot {
  background-color: #000
}

.page-midnight-03 .gf-breadcrumb-item-midnight .gf-indicator-item:nth-child(3) .gf-indicator-dot {
  background-color: #000
}

.page-diagnosis-01 .gf-breadcrumb-item-business .gf-indicator-item:nth-child(4) {
  color: #000
}

.mibyou-loader {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: none;
  background-color: #ffe83c;
  z-index: 3
}

.js .mibyou-loader {
  display: block
}

.mibyou-loadtransition .mibyou-loader {
  left: 80px;
  right: 80px;
  top: 80px;
  bottom: 80px;
  opacity: 0;
  transition: opacity .7s linear 2s, left .2s ease-out .5s, right .32s ease-out 1.1s, top .2s ease-out .8s, bottom .2s ease-out 1.4s
}

@media screen and (max-width:767px) {
  .mibyou-loadtransition .mibyou-loader {
    left: 10px;
    right: 10px;
    top: 50px;
    bottom: 40px
  }
}

.mibyou-loadcomplete .mibyou-loader {
  display: none
}

.mibyou-beforeunload .mibyou-loader {
  display: block
}

.mibyou-unloadtransition .mibyou-loader {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  opacity: 1;
  transition: opacity .3s linear 0s, left .2s ease-out .7s, right .2s ease-out .7s, top .2s ease-out .7s, bottom .2s ease-out .7s
}

.mibyou-loader-title {
  text-indent: 100%;
  white-space: nowrap;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 415px;
  padding-top: 61px;
  background: url(/mibyou/special/_assets/global/images/text_business.png) no-repeat center center;
  overflow: hidden;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .mibyou-loader-title {
    width: 276.66666667px;
    padding-top: 40.66666667px
  }
}

.mibyou-loadtransition .mibyou-loader-title {
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  opacity: 0;
  filter: alpha(opacity=0)
}

.mibyou-beforeunload .mibyou-loader-title {
  display: none
}

.mibyou-loader-title-lifestyle {
  background-image: url(/mibyou/special/_assets/global/images/text_lifestyle.png)
}

.mibyou-loader-title-amusement {
  background-image: url(/mibyou/special/_assets/global/images/text_amusement.png)
}

.mibyou-loader-title-midnight {
  background-image: url(/mibyou/special/_assets/global/images/text_midnight.png)
}

.main {
  position: relative;
  margin: 0 80px;
  padding: 80px 0;
  background-color: #ffe83c
}

@media screen and (max-width:767px) {
  .main {
    margin: 0 10px;
    padding: 50px 0 40px
  }

  .main.full-height {
    height: auto !important
  }
}

.button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.button [class^="glyphicon-"],
.button [class*=" glyphicon-"] {
  vertical-align: middle
}

#guide {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 101
}

#guide.show {
  display: block
}

.button-group .button+.button,
.button-group .button+.button,
.button-group .button+.button,
.button-group .button+.button {
  margin-left: 20px;
  margin-top: 0px
}

@media screen and (max-width:767px) {

  .button-group .button+.button,
  .button-group .button+.button,
  .button-group .button+.button,
  .button-group .button+.button {
    margin-left: 0;
    margin-top: 20px
  }
}

.mibyou-loadtransition .mibyou-loader {
  bottom: 0px
}

.gn-content {
  bottom: 0 !important
}

.globalfooter {
  position: relative
}

.mibyou-midnight .main,
.mibyou-midnight .mibyou-loader,
.mibyou-midnight .gn-content {
  background-color: #ffcece
}

.hero {
  margin-top: 80px;
  padding-top: 340px;
  background: url(/mibyou/special/_assets/v/home/images/home_hero.png) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .hero {
    margin-top: 40px;
    padding-top: 51.02040816%;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover
  }
}

.mibyou-midnight .hero {
  background-image: url(/mibyou/special/_assets/v/home/images/home_hero_midnight.png)
}

.lead {
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 980px;
  padding: 30px 0 80px
}

.lead .lead-text+.button,
.lead .lead-text+.button {
  margin-top: 50px
}

.lead:before {
  content: "";
  position: absolute;
  left: 0;
  top: 154px;
  width: 232px;
  padding-top: 70px;
  background: url(/mibyou/special/_assets/global/images/text_are_you_ok.svg) no-repeat left top;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .lead {
    width: 100%;
    padding: 30px 20px 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .lead:before {
    content: none
  }
}

.lead-about {
  position: absolute;
  right: 0;
  top: 30px
}

@media screen and (max-width:767px) {
  .lead-about {
    position: relative;
    right: auto;
    top: auto
  }
}

.lead-about-image {
  padding-top: 73px;
  width: 190px;
  background: url(/mibyou/special/_assets/v/home/images/sleeping.png) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain
}

@media screen and (max-width:767px) {
  .lead-about-image {
    position: relative;
    right: auto;
    top: auto;
    margin: 150px auto 0
  }
}

.button-balloon {
  text-indent: 100%;
  white-space: nowrap;
  position: absolute;
  right: -5px;
  top: -140px;
  width: 165px;
  min-width: 0;
  padding: 145px 0 0;
  background: url(/mibyou/special/_assets/v/home/images/balloon_about.png) no-repeat center center;
  border: none;
  overflow: hidden;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  animation-duration: 2s;
  animation-name: jump;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out
}

@media screen and (max-width:767px) {
  .button-balloon {
    right: 0;
    left: 0;
    margin: auto
  }
}

@-webkit-keyframes jump {
  0% {
    top: -140px
  }

  15% {
    top: -150px
  }

  30% {
    top: -138px
  }

  45% {
    top: -140px
  }

  100% {
    top: -140px
  }
}

.mibyou-midnight .button-balloon {
  background-image: url(/mibyou/special/_assets/v/home/images/balloon_about_midnight.png)
}

.button-group {
  text-align: left;
  margin-left: 320px
}

@media screen and (max-width:767px) {
  .button-group {
    text-align: center;
    margin-left: 0
  }
}

.button-group-midnight {
  display: none
}

.mibyou-midnight .button-group-midnight {
  margin-top: 50px;
  display: block
}

.mibyou-midnight .button-group-normal {
  display: none
}

.button-start {
  width: 340px;
  padding-top: 80px;
  background-image: url(/mibyou/special/_assets/global/images/button_start.png)
}

@media screen and (max-width:767px) {
  .button-start {
    width: 100%;
    padding-top: 23.52941176%
  }
}

.button-special {
  background-image: url(/mibyou/special/_assets/global/images/button_start_special.png)
}

span.button-special {
  position: relative
}

span.button-special:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffe83c;
  opacity: .6;
  filter: alpha(opacity=60)
}

span.button-special:hover,
span.button-special.hover {
  background-position: center top
}

span.button-special:hover:after,
span.button-special.hover:after {
  text-align: center;
  content: "毎夜11PM(イレブンピーエム)にオープン！\Aオトナの時間にアクセスしてね";
  font-weight: 600;
  font-size: 12px;
  font-size: .6rem;
  line-height: 1.5;
  letter-spacing: .05em;
  text-indent: 0;
  white-space: pre;
  color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

span.button-special:hover:before,
span.button-special.hover:before {
  opacity: .8;
  filter: alpha(opacity=80)
}

.mibyou-midnight .button-special {
  display: inline-block;
  width: 340px;
  padding-top: 80px;
  background-image: url(/mibyou/special/_assets/global/images/button_start_special_large.png)
}

@media screen and (max-width:767px) {
  .mibyou-midnight .button-special {
    width: 100%;
    padding-top: 26.66666667%;
    background-image: url(/mibyou/special/_assets/global/images/button_start_special.png)
  }
}

.mibyou-midnight .button-start {
  margin-top: 5px !important;
  width: 260px;
  min-width: 0;
  padding-top: 70px;
  background-image: url(/mibyou/special/_assets/global/images/button_start_midnight.png);
  vertical-align: top
}

@media screen and (max-width:767px) {
  .mibyou-midnight .button-start {
    margin-top: 20px !important
  }
}

.promo-title {
  letter-spacing: 0;
  min-width: 174px
}

.promo-howto .promo-image {
  background-image: url(/mibyou/special/_assets/v/home/images/promo_howto.png)
}

.promo-research .promo-image {
  background-image: url(/mibyou/special/_assets/v/home/images/promo_research.png)
}

.promo-prevention .promo-image {
  background-image: url(/mibyou/special/_assets/v/home/images/promo_prevention.png)
}

.promo-campaign .promo-image {
  width: 194px;
  height: 194px;
  background-image: url(/mibyou/special/_assets/v/home/images/promo_campaign.png);
  background-repeat: repeat;
  background-position: center top;
  border: 3px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-size: 186px 186px;
  -webkit-background-size: 186px 186px;
  -o-background-size: 186px 186px;
  -ms-background-size: 186px 186px;
  background-size: 186px 186px
}

.scroll-indicator {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: auto;
  display: none;
  width: 60px;
  height: 60px;
  background: url(/mibyou/special/_assets/v/home/images/scroll_indicator.svg) no-repeat center center;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  animation-duration: .8s;
  animation-name: comeon;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out
}

.scroll-indicator.show {
  display: block
}

.scroll-indicator.hidden {
  bottom: -80px;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s
}

@-webkit-keyframes comeon {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0)
  }

  20% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -o-transform: translateY(5px);
    -ms-transform: translateY(5px)
  }

  90% {
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    -ms-transform: translateY(-2px)
  }

  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0)
  }
}