#recommend{
  font: 1.5rem/1 BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ƒqƒ‰ƒMƒmŠpƒS ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%
}
@media screen and (max-width: 750px) {
  body {
    background-size: contain
  }
}

@media screen and (max-width: 374px) {
  body {
    font-size: 1.425rem
  }
}

#vr_wrap img{
  max-width: 100%;
  vertical-align: bottom;
  border: 0
}

#vr_wrap a:hover {
  cursor: pointer
}

article {
  position: relative;
  z-index: 1;
  overflow: visible;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}


@media screen and (max-width: 750px) {
  article.margin-nav {
    padding: 0vw 0vw 0vw
  }
}

article .expand, article .contract {
  display: none !important
}

article .item-collapse .collapse {
  display: block !important
}

article .item-collapse-expand .expand {
  display: block !important
}

article .item-collapse-contract .contract {
  display: block !important
}

article.ab-expand .expand {
  display: block !important
}

article.ab-expand .item-collapse .collapse {
  display: none !important
}

#recommend h1, #h2, #h3 {
  margin-top: 0;
  margin-bottom: 0
}


#vr_wrap p a {
  color: #ff4d4d;
  text-decoration: underline
}

#vr_wrap hr {
  height: 0;
  border: 0;
  border-top: 1px solid #c2c2c2
}

@media screen and (min-width: 751px) {
  hr {
    margin: 4rem 0 0;
    padding-bottom: 2rem
  }
}

@media screen and (max-width: 750px) {
  hr {
    margin: 2rem 0 0;
    padding: 0
  }
}

strong {
  color: #ff4d4d;
  font-weight: bold
}

em {
  margin-left: .3rem;
  margin-right: .3rem;
  padding: .1rem .3rem;
  color: #fff;
  font-weight: bold;
  font-style: normal;
  background: #ff4d4d
}

em.no-ml {
  margin-left: 0
}

em.color-1 {
  color: #360808;
  background: #ff4d4d
}

em.color-2 {
  color: #360808;
  background: #ffe4e4
}

em.color-3 {
  color: #360808;
  font-style: italic;
  padding: 0;
  background: none
}

em.color-4 {
  color: #ff4d4d;
  font-style: italic;
  padding: 0;
  background: none
}

#vr_wrap footer {
  color: #fff;
  background: #1d1d1d
}

@media screen and (min-width: 751px) {
  #vr_wrap footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 940px;
    height: 60px;
    margin: 0 auto;
    padding: 0 6px
  }/*
  #vr_wrap footer a {
    display: block;
    padding: .9rem 2rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 2rem
  }*/
  #vr_wrap footer a span {
    display: inline-block;
    padding-left: 1.4rem;
    background: url(../img/icon/arrow_white.svg) no-repeat left center/1rem 100%
  }
  #vr_wrap footer a:hover {
    background: #ff4d4d
  }
  #vr_wrap footer p {
    font-size: 1rem;
    text-align: right
  }
}

@media screen and (max-width: 750px) {
  #vr_wrap footer {
    padding: 4.8vw 0vw 4.8vw
  }
  #vr_wrap footer .link {
    width: 61.33333vw;
    margin: 0 auto
  }
  #vr_wrap footer a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1.4rem 2rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 3rem
  }
  #vr_wrap footer a span {
    display: inline-block;
    padding-left: 1.4rem;
    background: url(../img/icon/arrow_white.svg) no-repeat left center/1rem 100%
  }
  #vr_wrap footer p {
    margin: 2.93333vw 0vw 0vw;
    font-size: 1.2rem;
    text-align: center
  }
}

#vr_wrap nav {
  position: relative;
  z-index: 201
}

nav.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}

nav .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: #ff4d4d
}

@media screen and (min-width: 751px) {
  nav .header {
    height: 65px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border-bottom: 6px solid #ec4949
  }
}

nav .header a {
  display: block
}

@media screen and (min-width: 751px) {
  nav .header a img {
    height: 65px
  }
}

@media screen and (max-width: 750px) {
  nav .header a.logo {
    width: 28.53333vw
  }
}

nav .header a.menu {
  border-left: 1px solid #ff9494
}

@media screen and (max-width: 750px) {
  nav .header a.menu {
    width: 22.66667vw
  }
}

nav .content {
  z-index: 1;
  overflow: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch
}

@media screen and (min-width: 751px) {
  nav .content {
    position: fixed;
    height: 100%;
    background: url(../img/nav/lg/bg_content.png);
    border-left: 6px solid #ff4d4d;
    border-right: 6px solid #ff4d4d;
    border-bottom: 6px solid #ff4d4d
  }
}

@media screen and (max-width: 750px) {
  nav .content {
    position: relative;
    max-height: 100vh;
    background: #f5f5f5;
    border-left: 0.6vw solid #ff4d4d;
    border-right: 0.6vw solid #ff4d4d;
    border-bottom: 0.6vw solid #ff4d4d
  }
}

@media screen and (min-width: 751px) {
  nav .content .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 71px
  }
}

@media screen and (min-width: 751px) and (max-height: 680px) {
  nav .content .container {
    padding-top: 240px
  }
}

@media screen and (min-width: 751px) {
  nav .content .title {
    width: 310px;
    margin: 0 auto
  }
}

@media screen and (max-width: 750px) {
  nav .content .title {
    padding: 21.33333vw 0vw 4.8vw;
    text-align: center;
    background: #fff
  }
  nav .content .title img {
    width: 70.93333vw
  }
}

@media screen and (min-width: 751px) {
  nav .content .story {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 860px;
    margin-top: 10px
  }
  nav .content .story a {
    position: relative;
    display: block;
    width: 200px;
    margin-top: 20px;
    color: #360808;
    text-decoration: none
  }
  nav .content .story a .photo {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px #d2cfcf;
    box-shadow: 0 5px 10px #d2cfcf
  }
  nav .content .story a .tag {
    position: absolute;
    top: -7px;
    left: 7px;
    z-index: 2
  }
  nav .content .story a .text {
    position: absolute;
    top: 110px;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 200px;
    height: 87px;
    font-size: 1.35rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.7
  }
  nav .content .story a:hover {
    color: #ff4d4d
  }
  nav .content .story a:hover .photo img {
    opacity: .8
  }
}

@media screen and (max-width: 750px) {
  nav .content .story {
    padding-left: 3.33333vw;
    padding-right: 3.33333vw;
    background: #fff
  }
  nav .content .story a {
    display: block;
    padding: 2vw 1.33333vw 2vw;
    color: #360808;
    font-size: 1.35rem;
    font-weight: bold;
    text-decoration: none;
    border-top: 1px solid #e8e8e8;
    background: url(../img/nav/ico_arrow_right.png) no-repeat 89vw 50%;
    background-size: 1.33333vw 2.4vw
  }
  nav .content .story a>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 4vw
  }
  nav .content .story a>div img {
    width: 9.33333vw;
    padding-right: 1rem
  }
  nav .content .story a>div .tag {
    -ms-flex-negative: 0;
    flex-shrink: 0
  }
}

@media screen and (min-width: 751px) {
  nav .content .link {
    margin-top: 25px;
    text-align: center
  }
  nav .content .link a {
    display: inline-block;
    width: 186px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.32rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  nav .content .link a span {
    padding-left: 1.6rem;
    background: url(../img/icon/arrow_red.svg) no-repeat left center/1.1rem 1.1rem
  }
  nav .content .link a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
}

@media screen and (max-width: 750px) {
  nav .content .link a {
    display: block;
    padding: 4vw 0vw 4vw;
    color: #360808;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid #e8e8e8
  }
  nav .content .link a span {
    display: inline-block;
    padding: 0vw 5.33333vw 0vw;
    background: url(../img/nav/ico_arrow_left.png) no-repeat left center;
    background-size: contain
  }
}

nav .bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: #313131
}

#banner {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  background: url(../img/common/bg_banner.png) center
}

@media screen and (min-width: 751px) {
  #banner {
    padding: 20px 0
  }
}

@media screen and (max-width: 750px) {
  #banner {
    padding: 4vw 0vw 4vw;
    background-repeat: repeat-y;
    background-size: contain
  }
}

@media screen and (min-width: 751px) {
  #banner .banner-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 980px;
    margin: 0 auto
  }
}

#banner .banner-list a {
  display: block;
  overflow: hidden;
  border-radius: .6rem;
  -webkit-box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35);
  box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35)
}

@media screen and (min-width: 751px) {
  #banner .banner-list a {
    width: 314px
  }
  #banner .banner-list a:hover {
    opacity: .8
  }
}

@media screen and (max-width: 750px) {
  #banner .banner-list a {
    margin: 4.66667vw 4.66667vw 4.66667vw
  }
}

@media screen and (min-width: 751px) {
  #banner .banner-list-2col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 760px;
    margin: 0 auto
  }
}

#banner .banner-list-2col a {
  display: block;
  overflow: hidden;
  border-radius: .6rem;
  -webkit-box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35);
  box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35)
}

@media screen and (min-width: 751px) {
  #banner .banner-list-2col a {
    width: 314px
  }
}

@media screen and (max-width: 750px) {
  #banner .banner-list-2col a {
    margin: 4.66667vw 4.66667vw 4.66667vw
  }
}

#pagetop {
  display: block;
  position: relative
}

@media screen and (min-width: 751px) {
  #pagetop a {
    position: fixed;
    bottom: 25px;
    right: 30px;
    z-index: 111;
    width: 51px;
    height: 51px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
  }
  #pagetop img {
    width: 51px;
    height: 51px;
    overflow: hidden;
    border-radius: 25px;
    -webkit-box-shadow: 0 6px 29px #918484;
    box-shadow: 0 6px 29px #918484
  }
  #pagetop img:hover {
    opacity: .8
  }
}

@media screen and (max-width: 750px) {
  #pagetop a {
    position: fixed;
    right: 2.13333vw;
    bottom: 2.13333vw;
    z-index: 111;
    width: 13.33333vw;
    height: 13.86667vw;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
  }
  #pagetop a img {
    vertical-align: top
  }
}

.margin-article {
  margin-left: 3.33333vw;
  margin-right: 3.33333vw
}

.on {
  display: none
}

.active .on {
  display: block
}

.off {
  display: block
}

.active .off {
  display: none
}

@media screen and (max-width: 374px) {
  .kerning {
    letter-spacing: -.6rem
  }
}

.visible-lg {
  display: none
}

@media screen and (min-width: 751px) {
  .visible-lg {
    display: block
  }
}
#vr_wrap .ve_ulogo{
	display:block;
	margin-bottom:10px;
}
.visible-lg-inline {
  display: none
}

@media screen and (min-width: 751px) {
  .visible-lg-inline {
    display: inline
  }
}

.visible-sm {
  display: none
}

@media screen and (max-width: 750px) {
  .visible-sm {
    display: block
  }
}

.visible-sm-inline {
  display: none
}

@media screen and (max-width: 750px) {
  .visible-sm-inline {
    display: block
  }
}

.visible-height-normal {
  display: none
}

.height-normal .visible-height-normal {
  display: inline
}

.visible-height-long {
  display: none
}

.height-long .visible-height-long {
  display: inline
}

a.hover {
  position: relative;
  display: inline-block
}

a.hover .hover-on {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  visibility: hidden
}

a.hover .hover-off {
  position: relative;
  z-index: 1
}

body.clickable a.hover:hover .hover-on {
  visibility: visible
}

body.clickable a.hover:hover .hover-off {
  visibility: hidden
}

.box-item {
  overflow: hidden;
  margin-top: 2rem;
  background: #fff;
  border-radius: .8rem;
  -webkit-box-shadow: 0 0 1.2rem #e3d3d3;
  box-shadow: 0 0 1.2rem #e3d3d3
}

@media screen and (min-width: 751px) {
  .box-item {
    margin-left: 35px;
    margin-right: 35px
  }
}

@media screen and (max-width: 750px) {
  .box-item {
    margin-left: 3.33333vw;
    margin-right: 3.33333vw
  }
}

.box-item .box-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (min-width: 751px) {
  .box-item .box-1 {
    padding: 20px
  }
}

@media screen and (max-width: 750px) {
  .box-item .box-1 {
    padding: 4vw 4vw 4vw
  }
}

@media screen and (max-width: 750px) {
  .box-item .box-2 {
    padding: 0vw 4vw 4vw
  }
}

.box-item .text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.box-item .link {
  margin-top: 1rem
}

.box-item .link a {
  color: #360808;
  text-decoration: underline
}

.box-item .link .icon {
  display: inline-block;
  width: 1.41rem;
  height: 1.41rem;
  vertical-align: top;
  background: url("../img/common/ico_course.png") no-repeat center center;
  background-size: contain
}

@media screen and (min-width: 751px) {
  .box-item .footer {
    background: url(../img_story/common/lg/bg_course_more.png);
    border-top: 1px solid #c9c7d4
  }
}

@media screen and (max-width: 750px) {
  .box-item .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2vw 4vw 2vw;
    background: #ebebeb
  }
}

.box-item .t2 strong {
  color: #2cadf0;
  font-size: 140%;
  font-weight:bold;
}

.box-item .i1 {
  padding-left: 2rem;
  background: url(../img/common/ico_calendar.png) no-repeat center left;
  background-size: contain
}

.box-item .i2 {
  margin-left: 0.4rem;
  padding-left: 1.8rem;
  background: url(../img/common/ico_monthly.png) no-repeat center left;
  background-size: contain
}

.box-item .i3 {
  vertical-align: 20%;
  margin-left: 0.4rem;
  padding: .6rem;
  border: 1px solid #b8b6c0;
  border-radius: .3rem;
  font-size:11px !important;
}

.box-item .i4 {
  margin-left: 0.4rem;
  padding-left: 0rem;
  line-height: 250%;
  background-size: contain
}

.box-item .collapse {
  background: #f9f9f9;
  border-top: 1px solid #ebebeb
}

.box-item .collapse a {
  color: #360808;
  text-decoration: none;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold
}

@media screen and (min-width: 751px) {
  .box-item .collapse a {
    padding: 1.0rem 0
  }
  .box-item .collapse a:hover {
    color: #ff4d4d;
    background: #fff8e6
  }
}

@media screen and (max-width: 750px) {
  .box-item .collapse a {
    padding: 3.33333vw 0vw 3.33333vw
  }
}

.box-item .collapse a .icon {
  display: inline-block;
  width: 1.00rem;
  height: 1.00rem
}

.box-item .collapse a.expand .icon {
  background: url(../img/common/ico_contract.png) no-repeat center center;
  background-size: contain
}

.box-item .collapse a.contract .icon {
  background: url(../img/common/ico_expand.png) no-repeat center center;
  background-size: contain
}

@media screen and (min-width: 751px) {
  .item-course #h3 {
    margin-top: 1.3rem;
    font-size: 2.2rem
  }
}

@media screen and (min-width: 751px) and (min-width: 751px) {
  .item-course .thumb {
    width: 230px;
    margin-right: 30px
  }
}

@media screen and (min-width: 751px) and (max-width: 750px) {
  .item-course .thumb {
    width: 24vw;
    margin-right: 1rem
  }
}

@media screen and (min-width: 751px) {
  .item-course .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  .item-course .footer a {
    width: 193px;
    padding: 20px 0;
    text-align: center;
    display: block;
    color: #360808;
    font-weight: bold;
    text-decoration: none
  }
  .item-course .footer a .icon {
    display: inline-block;
    width: 1.41rem;
    height: 1.41rem;
    vertical-align: top;
    background: url("../img/common/ico_more.png") no-repeat center center;
    background-size: contain
  }
  .item-course .footer a:hover {
    opacity: .8
  }
  .item-course .t1 {
    font-size: 1.5rem;
    line-height: 1.53
  }
  .item-course .t2 {
    margin-top: 1.3rem;
    font-size: 1.8rem;
    font-weight: bold
  }
  .item-course .t3 {
    margin-top: 1.3rem;
    font-size: 1.5rem;
    line-height: 1.7
  }
  .item-course .link {
    margin: 1.3rem 0;
    font-size: 1.35rem
  }
  .item-course .i1, .item-course .i2 {
    padding-left: 3rem
  }
  .item-course .i3 {
    font-size: 80%
  }
  .item-recommend {
    width: 445px;
    margin-left: 0;
    margin-right: 0
  }
  .item-recommend #h3 {
    margin-top: 1.3rem;
    font-size: 0.9rem;
    line-height: 1.36;
    font-weight: bold;
  }
  .item-recommend .thumb {
    width: 105px;
    margin-right: 18px
  }
  .item-recommend .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #ebebeb
  }
  .item-recommend .footer a {
    width: 220px;
    padding: 10px 0;
    text-align: center;
    display: block;
    color: #360808;
    font-weight: bold;
    text-decoration: none
  }
  .item-recommend .footer a .icon {
    display: inline-block;
    width: 1.41rem;
    height: 1.41rem;
    vertical-align: top;
    background: url("../img/common/ico_more.png") no-repeat center center;
    background-size: contain
  }
  .item-recommend .footer a:hover {
    opacity: .8
  }
  .item-recommend .t1 {
    font-size: 0.8rem;
    line-height: 1.4
  }
  .item-recommend .t2 {
    margin-bottom: 1.3rem;
    margin-top:1rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center
    margin-top:5px;
  }
  .item-recommend .t3 {
    margin: 1.3rem 20px;
    font-size: 0.8rem;
    line-height: 1.7;
    text-align:left;
  }
  .item-recommend .link {
    margin: 1.3rem 20px;
    font-size: 1.35rem
  }
  .item-recommend .i3 {
    font-size: 80%
  }
}

@media screen and (max-width: 750px) {
  .item-course #h3, .item-recommend #h3 {
    margin-top: .8rem;
    font-size: 0.96rem;
    line-height: 1.3rem;
    font-weight: bold;
  }
  .item-course .thumb, .item-recommend .thumb {
    width: 24vw;
    margin-right: 1rem
  }
  .item-course .t1, .item-recommend .t1 {
    font-size: 0.8rem;
    line-height: 1.3
  }
  .item-course .t2, .item-recommend .t2 {
    margin-bottom: 0.8rem;
    margin-top:0.8rem;
    font-size: 0.9rem;
    text-align: center
  }
  .item-course .t3, .item-recommend .t3 {
    margin-top: 0.6rem;
    line-height: 1.7;
    font-size:0.8rem;
    text-align:left;
  }
  .item-course .i1, .item-recommend .i1 {
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid #b8b6c0
  }
  .item-course .i3, .item-recommend .i3 {
    display: block;
    margin: 1.5rem 0 0
  }
}

@media screen and (max-width: 374px) {
  .item-course .t2, .item-recommend .t2 {
    margin-left: -2vw;
    margin-right: -2vw;
    font-size: 1.05rem
  }
  .item-course .i1, .item-recommend .i1 {
    margin-right: .5rem;
    padding-right: .5rem
  }
  .item-course .i1, .item-course .i2, .item-recommend .i1, .item-recommend .i2 {
    padding-left: 2rem
  }
}

#index .header {
  position: relative
}

@media screen and (min-width: 751px) {
  #index .header {
    height: 500px
  }
}

#index .header h1 {
  position: relative;
  text-align: center
}

@media screen and (min-width: 751px) {
  #index .header h1 {
    padding-top: 15px
  }
}

@media screen and (min-width: 751px) {
  #index .header h1 img {
    position: absolute;
    left: 50%;
    top: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
}

#index .header .curtain {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 370px;
  background: url(../img/header/lg/bg.png)
}

#index .header .curtain .left {
  position: absolute;
  left: 0;
  top: 0;
  height: 370px;
  text-align: left
}

#index .header .curtain .right {
  position: absolute;
  right: 0;
  left: 0;
  height: 370px;
  text-align: right
}

#index .header .pop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 237px;
  padding-top: 40px;
  text-align: center;
  background: url(../img/header/lg/cloud.png) repeat-x center
}

@media screen and (min-width: 751px) {
  #index .header .logo {
    position: absolute;
    left: 50%;
    top: 23px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 480px;
    height: 258px
  }
}

@media screen and (max-width: 750px) {
  #index .header .logo {
    position: absolute;
    left: 50%;
    top: 2.93333vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 49%;
    width: 60vw
  }
}

@media screen and (min-width: 751px) {
  #index .opening {
    font-size: 1.6rem;
    text-align: center
  }
}

#index .container {
  overflow: hidden
}

#index .container-story {
  padding-bottom: 15px
}

@media screen and (min-width: 751px) {
  #index .container-story {
    background: url(../img/story/lg/bg.png)
  }
}

#index .stories {
  margin-top: 1.5rem;
  padding-bottom: 1rem
}

@media screen and (min-width: 751px) {
  #index .stories {
    width: 980px;
    margin: 190px auto 0
  }
}

#index .stories>div {
  position: relative
}

@media screen and (min-width: 751px) {
  #index .stories>div {
    width: 448px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    float: left
  }
  #index .stories>div:nth-child(2n-1) {
    margin-top: -160px
  }
  #index .stories>div a {
    display: block
  }
  #index .stories>div a:hover {
    opacity: .8
  }
}

#index .stories .animation {
  position: absolute;
  overflow: hidden
}

@media screen and (min-width: 751px) {
  #index .stories .animation {
    left: -60px;
    bottom: -7px;
    width: 182px;
    height: 245px
  }
}

@media screen and (max-width: 750px) {
  #index .stories .animation {
    left: -8vw;
    bottom: -.93333vw;
    width: 34.66667vw;
    height: 46.66667vw
  }
}

#index .stories .animation img {
  position: absolute
}

#index .banner {
  position: relative;
  margin: 2.66667vw 0vw 0vw;
  background: url(../img/banner/lg/bg.png) repeat-x center top
}

@media screen and (max-width: 750px) {
  #index .banner {
    padding: 170.13333vw 0vw 6.13333vw;
    background: url(../img/banner/bg.png) no-repeat center top;
    background-size: 100% auto
  }
}

#index .banner-top {
  position: relative;
  z-index: 1
}

@media screen and (max-width: 750px) {
  #index .banner-top {
    position: static
  }
}

#index .banner-top .title {
  position: relative;
  z-index: 2;
  height: 280px;
  text-align: center;
  overflow: hidden
}

#index .banner-top .title img {
  position: absolute
}

@media screen and (min-width: 751px) {
  #index .banner-top .title img {
    position: absolute;
    left: 50%;
    top: 60px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
}

#index .banner-top .stage-left {
  position: absolute;
  z-index: 1;
  height: 274px;
  bottom: 0;
  width: 100%;
  background: url(../img/banner/lg/stage_left.png) no-repeat bottom left
}

#index .banner-top .stage-right {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 274px;
  background: url(../img/banner/lg/stage_right.png) no-repeat bottom right
}

#index .banner-top a {
  position: relative;
  z-index: 2;
  display: block
}

@media screen and (min-width: 751px) {
  #index .banner-top a {
    position: absolute;
    left: 50%;
    top: 75px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
}

@media screen and (max-width: 750px) {
  #index .banner-top a {
    position: absolute;
    left: 50%;
    top: 9.33333vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 77.33333vw
  }
}

#index .banner-list {
  position: relative;
  z-index: 2
}

@media screen and (min-width: 751px) {
  #index .banner-list {
    margin-top: -20px;
    margin-bottom: 85px;
    background: url(../img/banner/lg/bg_banner.png) repeat-x center top
  }
  #index .banner-list>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 980px;
    margin: 0 auto;
    padding: 60px 0
  }
  #index .banner-list a {
    display: block;
    overflow: hidden;
    width: 314px;
    border-radius: .6rem;
    -webkit-box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35);
    box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35)
  }
  #index .banner-list a:hover img {
    opacity: .8
  }
}

@media screen and (max-width: 750px) {
  #index .banner-list {
    position: absolute;
    left: 50%;
    top: 40vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%
  }
  #index .banner-list a {
    display: block;
    overflow: hidden;
    border-radius: .6rem;
    -webkit-box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35);
    box-shadow: 0 0.3rem 1rem rgba(53, 53, 53, 0.35)
  }
}

@media screen and (max-width: 750px) and (min-width: 751px) {
  #index .banner-list a {
    width: 314px
  }
}

@media screen and (max-width: 750px) and (max-width: 750px) {
  #index .banner-list a {
    margin: 4.66667vw 4.66667vw 4.66667vw
  }
}

@media screen and (min-width: 751px) {
  #index .banner-cm {
    width: 740px;
    margin: 50px auto 0;
    padding-bottom: 50px
  }
}

@media screen and (max-width: 750px) {
  #index .banner-cm {
    padding: 170.13333vw 0vw 6.13333vw;
    width: 92vw;
    margin: 0 auto
  }
}

#index .banner-cm .gallery {
  background: #fff
}

@media screen and (min-width: 751px) {
  #index .banner-cm .gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 20px;
    border-left: 3px solid #ff4d4d;
    border-right: 3px solid #ff4d4d
  }
}

@media screen and (max-width: 750px) {
  #index .banner-cm .gallery {
    border-left: 2px solid #ff4d4d;
    border-right: 2px solid #ff4d4d
  }
}

@media screen and (min-width: 751px) {
  #index .banner-cm .cm {
    width: 50%;
    padding: 10px 0;
    text-align: center
  }
  #index .banner-cm .cm .player {
    width: 320px;
    height: 180px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-box-shadow: 0 5px 15px #ccc;
    box-shadow: 0 5px 15px #ccc
  }
  #index .banner-cm .cm .title {
    margin: 1.8rem auto 1.5rem;
    width: 260px
  }
}

@media screen and (max-width: 750px) {
  #index .banner-cm .cm {
    width: 69.6vw;
    margin: 0 auto
  }
  #index .banner-cm .cm .player {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    -webkit-box-shadow: 0 .5rem 1.5rem #ccc;
    box-shadow: 0 .5rem 1.5rem #ccc
  }
  #index .banner-cm .cm .player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
  }
  #index .banner-cm .cm .title {
    padding: 1.5rem 0 2rem
  }
}

#index .banner-cm a {
  cursor: pointer
}

#story {
  position: relative
}

@media screen and (max-width: 750px) {
  #story {
    background: url(../img/bg/catch.png) no-repeat;
    background-size: contain
  }
}

#story .curtain {
  position: relative;
  width: 100%;
  height: 340px;
  margin-top: 65px
}

#story .curtain .left {
  position: absolute;
  left: 0;
  top: 0;
  height: 370px;
  text-align: left
}

#story .curtain .right {
  position: absolute;
  right: 0;
  left: 0;
  height: 370px;
  text-align: right
}

#story .curtain .cloud {
  position: absolute;
  left: 0;
  bottom: -120px;
  width: 100%;
  height: 237px;
  background: url(../img/header/lg/cloud.png) center bottom
}

#story #story-catch {
  position: relative
}

@media screen and (max-width: 750px) {
  #story #story-catch {
    height: 94.26667vw
  }
}

#story #story-catch .book {
  position: relative
}

@media screen and (min-width: 751px) {
  #story #story-catch .book {
    width: 980px;
    margin: -322px auto 0
  }
}

#story #story-catch a {
  position: absolute;
  cursor: pointer
}

@media screen and (min-width: 751px) {
  #story #story-catch a.recommend {
    bottom: 56px;
    right: 17px;
    width: 143px;
    height: 190px
  }
  #story #story-catch a.recommend:hover {
    background: url(../img/common/lg/btn_catch_open.png) no-repeat
  }
}

@media screen and (max-width: 750px) {
  #story #story-catch a.recommend {
    width: 24.53333vw;
    height: 33.33333vw;
    bottom: 6.4vw;
    right: 0
  }
}

@media screen and (min-width: 751px) {
  #story #story-catch a.close {
    bottom: 57px;
    right: 17px;
    width: 115px;
    height: 152px
  }
  #story #story-catch a.close:hover {
    background: url(../img/common/lg/btn_catch_close.png) no-repeat
  }
}

@media screen and (max-width: 750px) {
  #story #story-catch a.close {
    width: 13.86667vw;
    height: 12vw;
    bottom: 6.4vw;
    right: 0
  }
}

@media screen and (min-width: 751px) {
  #story #story-catch a.list {
    width: 188px;
    bottom: 165px;
    right: 159px
  }
}

@media screen and (max-width: 750px) {
  #story #story-catch a.list {
    width: 37.33333vw;
    bottom: 19.06667vw;
    right: 5.86667vw
  }
}

#story #story-fix {
  height: 36.26667vw
}

#story #story-fix.height-long {
  height: 53.86667vw
}

@media screen and (max-width: 750px) {
  .landscape #story #story-fix {
    margin-top: 0 !important
  }
}

@media screen and (min-width: 751px) {
  #story .story-container {
    width: 980px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 10px rgba(43, 32, 32, 0.3);
    box-shadow: 0 3px 10px rgba(43, 32, 32, 0.3)
  }
}

@media screen and (max-width: 750px) {
  #story .story-container {
    padding: 1.06667vw 0vw 0vw;
    background: #ff4d4d
  }
}

#story #story-content {
  background: #f9f7f7
}

@media screen and (max-width: 750px) {
  #story #story-content {
    padding: 8vw 0vw 0vw;
    background: #f9f7f7 url(../img/common/bg_prologue.png) no-repeat center top;
    background-size: contain
  }
}

@media screen and (min-width: 751px) {
  #story #story-content .margin-article {
    margin-left: 35px;
    margin-right: 35px
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .margin-article {
    margin-left: 3.33333vw;
    margin-right: 3.33333vw
  }
}

@media screen and (max-width: 750px) {
  #story #story-content h1 {
    padding: 1rem 0;
    font-size: 1.35rem;
    text-align: center;
    border-top: 1px solid #d2c7c7;
    border-bottom: 1px solid #d2c7c7
  }
  #story #story-content h1 em {
    color: #ff4d4d;
    margin: 0;
    padding: 0;
    background: none
  }
  #story #story-content h1 span {
    padding: .3rem 1rem;
    color: #fff;
    font-size: 1.2rem;
    vertical-align: .1rem;
    background: #360808;
    border-radius: 1rem
  }
}

#story #story-content #h2 {
  position: relative;
  overflow: hidden;
  font-size: 1.6rem;
  text-align: center
}

@media screen and (min-width: 751px) {
  #story #story-content #h2 {
    font-size: 2.4rem
  }
}

#story #story-content #h2.title {
  position: relative;
  z-index: 2
}

@media screen and (min-width: 751px) {
  #story #story-content #h2.title {
    margin-top: -30px;
    height: 124px
  }
}

@media screen and (max-width: 750px) {
  #story #story-content #h2.title {
    margin: -10.66667vw 0vw 0vw
  }
}

#story #story-content #h2.title>span {
  position: absolute;
  left: 0;
  width: 100%;
  color: #fff
}

@media screen and (min-width: 751px) {
  #story #story-content #h2.title>span {
    bottom: 47px
  }
}

@media screen and (max-width: 750px) {
  #story #story-content #h2.title>span {
    bottom: 8.66667vw
  }
}

#story #story-content #h2.title-prologue>span {
  color: #360808
}

#story #story-content #h3 {
  text-align: center;
  margin-top: 1.2rem
}

@media screen and (min-width: 751px) {
  #story #story-content #h3 {
    font-size: 2.4rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-content #h3 {
    font-size: 1.6rem
  }
}

#story #story-content span.name {
  color: #ff4d4d
}

#story #story-content .text-expandable {
  position: relative;
  background-color: #fee;
  -webkit-transition: background-color .6s;
  transition: background-color .6s
}

@media screen and (min-width: 751px) {
  #story #story-content .text-expandable {
    margin-top: -60px;
    padding: 60px 0 90px
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .text-expandable {
    margin: -13.33333vw 0vw 0vw;
    padding: 13.33333vw 0vw 13.33333vw
  }
}

#story #story-content .text-expandable .collapse .more {
  display: block
}

@media screen and (min-width: 751px) {
  #story #story-content .text-expandable .collapse .more {
    margin-left: 516px
  }
}

#story #story-content .text-expandable .collapse .close {
  display: none
}

#story #story-content .text-expandable.text-expand {
  background-color: #f9f7f7
}

#story #story-content .text-expandable.text-expand .text {
  height: auto
}

#story #story-content .text-expandable.text-expand .gradation {
  display: none
}

#story #story-content .text-expandable.text-expand .collapse .more {
  display: none
}

#story #story-content .text-expandable.text-expand .collapse .close {
  display: block
}

#story #story-content .thumb {
  z-index: 2;
  overflow: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.2rem 0.8rem #ded2d2;
  box-shadow: 0 0.2rem 0.8rem #ded2d2
}

@media screen and (min-width: 751px) {
  #story #story-content .thumb {
    position: absolute;
    top: 50px;
    width: 436px;
    margin-top: 2rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .thumb {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    margin-left: 3.33333vw;
    margin-right: 3.33333vw
  }
}

@media screen and (min-width: 751px) {
  #story #story-content .thumb-margin {
    width: 480px;
    height: 270px
  }
}

#story #story-content .text {
  position: relative;
  z-index: 1;
  overflow: hidden
}

@media screen and (min-width: 751px) {
  #story #story-content .text {
    height: 18rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .text {
    height: 13rem
  }
}

#story #story-content .text p {
  margin: 1rem 0 0
}

#story #story-content .text .gradation {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 8.26667vw;
  background: url(../img/common/bg_text_gradation.png) no-repeat center bottom;
  background-size: contain
}

@media screen and (min-width: 751px) {
  #story #story-content .text-prologue {
    padding-bottom: 60px
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .text-prologue {
    padding: 5.33333vw 0vw 18.66667vw
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .text-prologue .icon {
    width: 42.66667vw;
    margin: 0 auto
  }
}

#story #story-content .text-prologue .body {
  margin-top: 1.2rem
}

#story #story-content .text-prologue .body .link {
  text-align: center
}

#story #story-content .text-prologue .body .link span.icon {
  display: inline-block;
  background: url(../img_story/common/ico_link.png) no-repeat;
  background-size: contain;
  vertical-align: middle
}

@media screen and (min-width: 751px) {
  #story #story-content .text-prologue .body .link span.icon {
    width: 1.2rem;
    height: 1.5rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .text-prologue .body .link span.icon {
    width: 2.13333vw;
    height: 1.5rem
  }
}

@media screen and (min-width: 751px) {
  #story #story-content .chapter-1 .thumb {
    left: 0;
    margin-left: 35px
  }
}

#story #story-content .chapter-1 .thumb-margin {
  float: left
}

@media screen and (min-width: 751px) {
  #story #story-content .chapter-2 .thumb {
    right: 0;
    margin-right: 35px
  }
}

#story #story-content .chapter-2 .thumb-margin {
  float: right
}

#story #story-content .chapter-2 .collapse .more {
  display: block
}

@media screen and (min-width: 751px) {
  #story #story-content .chapter-2 .collapse .more {
    margin-left: 35px
  }
}

@media screen and (min-width: 751px) {
  #story #story-content .chapter-3 {
    background-image: url(../img/common/lg/bg_course.png);
    background-repeat: no-repeat;
    background-position: center bottom
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .chapter-3 {
    background-image: url(../img/common/bg_course.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain
  }
}

@media screen and (min-width: 751px) {
  #story #story-content .chapter-3 .thumb {
    left: 0;
    margin-left: 35px
  }
}

#story #story-content .chapter-3 .thumb-margin {
  float: left
}

#story #story-content .collapse a.more {
  display: block;
  margin: 0 auto
}

@media screen and (min-width: 751px) {
  #story #story-content .collapse a.more {
    width: 433px;
    margin-top: 2.5rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .collapse a.more {
    width: 58.66667vw;
    padding: 2rem 0
  }
}

#story #story-content .collapse .close {
  display: none
}

@media screen and (min-width: 751px) {
  #story #story-content .collapse .close {
    width: 188px;
    margin: 2.5rem auto 0
  }
  #story #story-content .collapse .close a {
    display: inline-block;
    width: 188px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.32rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  #story #story-content .collapse .close a span {
    padding-left: 1.6rem;
    background: url(../img/icon/close.svg) no-repeat left center/1.1rem 1.1rem
  }
  #story #story-content .collapse .close a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
}

@media screen and (max-width: 750px) {
  #story #story-content .collapse .close {
    width: 48vw;
    margin: 0 auto;
    padding: 1rem 0
  }
  #story #story-content .collapse .close a {
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.32rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  #story #story-content .collapse .close a span {
    padding-left: 1.6rem;
    background: url(../img/icon/close.svg) no-repeat left center/1.1rem 1.1rem
  }
  #story #story-content .collapse .close a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
}

#story #story-content em.color-3, #story #story-content em.color-4 {
  font-size: 1.8rem
}

@media screen and (min-width: 751px) {
  #story #story-course {
    padding-bottom: 50px;
    background: #f3f3f3
  }
}

@media screen and (max-width: 750px) {
  #story #story-course {
    padding: 2.66667vw 0vw 2.66667vw;
    background: #f3f3f3;
    background-size: contain
  }
}

@media screen and (min-width: 751px) {
  #story #story-course #h2.course {
    width: 365px;
    margin: 0 auto;
    padding-top: 34px
  }
}

@media screen and (max-width: 750px) {
  #story #story-course #h2.course {
    margin: 0 auto;
    width: 73.33333vw
  }
}

@media screen and (min-width: 751px) {
  #story #story-course #h2.recommend {
    width: 274px;
    margin: 0 auto;
    padding-top: 50px
  }
}

@media screen and (max-width: 750px) {
  #story #story-course #h2.recommend {
    margin: 4rem auto -1rem;
    width: 64vw
  }
}

@media screen and (min-width: 751px) {
  #story #story-course .recommend-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: 35px;
    margin-right: 35px
  }
}

@media screen and (min-width: 751px) {
  #story #story-course .more {
    display: block;
    width: 392px;
    margin: 35px auto 0
  }
  #story #story-course .more a {
    display: inline-block;
    width: 392px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  #story #story-course .more a span {
    padding-left: 1.6rem;
    background: url(../img/icon/arrow_red.svg) no-repeat left center/1.1rem 1.1rem
  }
  #story #story-course .more a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
}

@media screen and (max-width: 750px) {
  #story #story-course .more {
    display: block;
    width: 50.66667vw;
    margin: 6.66667vw auto 4vw
  }
  #story #story-course .more a {
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  #story #story-course .more a span {
    padding-left: 1.6rem;
    background: url(../img/icon/arrow_red.svg) no-repeat left center/1.1rem 1.1rem
  }
  #story #story-course .more a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
}

@media screen and (min-width: 751px) {
  #story #story-recommend {
    padding-bottom: 40px
  }
}

@media screen and (max-width: 750px) {
  #story #story-recommend {
    padding: 0vw 0vw 6.66667vw;
    background: url(../img/common/bg_recommend.png) no-repeat center top;
    background-size: contain
  }
}

@media screen and (min-width: 751px) {
  #story #story-recommend #h3 {
    width: 280px;
    margin: 40px auto 20px
  }
}

@media screen and (max-width: 750px) {
  #story #story-recommend #h3 {
    display: block;
    width: 66.13333vw;
    margin: 0vw auto 0vw;
    padding: 12vw 0vw 4vw
  }
}

@media screen and (min-width: 751px) {
  #story #story-recommend .stories {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 940px;
    margin: 0 auto
  }
}

#story #story-recommend .story {
  position: relative
}

@media screen and (min-width: 751px) {
  #story #story-recommend .story {
    width: 50%
  }
}

#story #story-recommend .story a {
  display: block;
  color: #360808
}

#story #story-recommend .story a:hover {
  color: #ff4d4d
}

#story #story-recommend .story .t1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.36
}

@media screen and (min-width: 751px) {
  #story #story-recommend .story .t1 {
    position: absolute;
    top: 1px;
    left: 160px;
    width: 276px;
    height: 52px;
    font-size: 1.5rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-recommend .story .t1 {
    position: absolute;
    top: 2.4vw;
    left: 32.53333vw;
    width: 59.2vw;
    height: 7.2vw;
    font-size: 1.32rem
  }
}

@media screen and (max-width: 374px) {
  #story #story-recommend .story .t1 {
    font-size: 1.2rem
  }
}

#story #story-recommend .story .t1 span {
  width: 100%;
  display: inline-block
}

#story #story-recommend .story .t2 {
  font-weight: bold;
  text-align: center
}

@media screen and (min-width: 751px) {
  #story #story-recommend .story .t2 {
    position: absolute;
    top: 76px;
    left: 160px;
    width: 276px;
    font-size: 2.25rem
  }
}

@media screen and (max-width: 750px) {
  #story #story-recommend .story .t2 {
    position: absolute;
    top: 15.2vw;
    left: 32.53333vw;
    width: 59.2vw;
    font-size: 1.8rem
  }
}

@media screen and (max-width: 374px) {
  #story #story-recommend .story .t2 {
    font-size: 1.5rem
  }
}

#story #story-recommend .story .t2 span {
  font-size: 76%;
  font-weight: normal
}

@media screen and (min-width: 751px) {
  #story #story-recommend .story .t3 {
    position: absolute;
    top: 114px;
    left: 160px;
    width: 276px;
    font-size: 1.5rem;
    line-height: 1.7
  }
}

@media screen and (max-width: 750px) {
  #story #story-recommend .story .t3 {
    position: absolute;
    top: 22.66667vw;
    left: 34.66667vw;
    width: 56vw;
    font-size: 1.35rem;
    line-height: 1.411
  }
}

@media screen and (max-width: 374px) {
  #story #story-recommend .story .t3 {
    position: absolute;
    top: 21.33333vw;
    left: 34.66667vw;
    width: 56vw;
    font-size: 1.2rem
  }
}

#correlation .container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 201;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: auto
}

@media screen and (min-width: 751px) {
  #correlation .container {
    background: rgba(0, 0, 0, 0.6)
  }
}

@media screen and (max-width: 750px) {
  #correlation .container {
    background: url(../img/bg/default.png) repeat-y;
    background-size: contain
  }
  .landscape #correlation .container {
    display: block;
    -webkit-overflow-scrolling: touch
  }
}

@media screen and (max-height: 540px) {
  #correlation .container>div {
    padding: 120px 0 40px
  }
}

@media screen and (min-width: 751px) {
  #correlation .close {
    width: 186px;
    margin: 20px auto 0
  }
  #correlation .close a {
    display: inline-block;
    width: 186px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.32rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  #correlation .close a span {
    padding-left: 1.6rem;
    background: url(../img/icon/close.svg) no-repeat left center/1.1rem 1.1rem
  }
  #correlation .close a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
  #correlation .figure {
    position: relative
  }
  #correlation .figure a {
    display: block;
    position: absolute;
    z-index: 1;
    color: #360808;
    font-size: 1.38rem;
    text-decoration: none
  }
  #correlation .figure a>div {
    width: 130px;
    height: 100px;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
  }
  #correlation .figure a.c-1 {
    left: 547px;
    top: 350px;
    -webkit-box-shadow: 0 2px 6px #c6c852;
    box-shadow: 0 2px 6px #c6c852
  }
  #correlation .figure a.c-6 {
    left: 784px;
    top: 350px;
    -webkit-box-shadow: 0 2px 6px #e3cee6;
    box-shadow: 0 2px 6px #e3cee6
  }
  #correlation .figure a.c-3 {
    left: 547px;
    top: 138px;
    -webkit-box-shadow: 0 2px 6px #ffc2cc;
    box-shadow: 0 2px 6px #ffc2cc
  }
  #correlation .figure a.c-4 {
    left: 309px;
    top: 138px;
    -webkit-box-shadow: 0 2px 6px #ffc2cc;
    box-shadow: 0 2px 6px #ffc2cc
  }
  #correlation .figure a.c-5 {
    left: 309px;
    top: 350px;
    -webkit-box-shadow: 0 2px 6px #c6c852;
    box-shadow: 0 2px 6px #c6c852
  }
  #correlation .figure a.c-8 {
    left: 72px;
    top: 138px;
    -webkit-box-shadow: 0 2px 6px #ced7e6;
    box-shadow: 0 2px 6px #ced7e6
  }
  #correlation .figure a.c-7 {
    left: 784px;
    top: 138px;
    -webkit-box-shadow: 0 2px 6px #e3cee6;
    box-shadow: 0 2px 6px #e3cee6
  }
  #correlation .figure a.c-2 {
    left: 72px;
    top: 350px;
    -webkit-box-shadow: 0 2px 6px #ced7e6;
    box-shadow: 0 2px 6px #ced7e6
  }
  #correlation .figure a .tag {
    position: absolute;
    left: 6px;
    top: -4px;
    width: 34px
  }
  #correlation .figure a .name {
    text-align: center;
    line-height: 35px;
    font-weight: bold
  }
  #correlation .figure a .name span {
    padding-left: 1.5rem;
    background: url(../img/correlation/ico_arrow.png) no-repeat center left/1.2rem
  }
  #correlation .figure a .name small {
    font-size: 80%
  }
  #correlation .figure a:hover {
    color: #ff4d4d
  }
  #correlation .figure a:hover .name span {
    background-image: url(../img/correlation/ico_arrow_on.png)
  }
  #correlation .figure a.current {
    color: #ff4d4d
  }
  #correlation .figure a.current>div {
    border: 2px solid #ff4d4d
  }
  #correlation .figure a.current .name span {
    padding-left: 0;
    background: none
  }
}

@media screen and (max-width: 750px) {
  #correlation .figure {
    position: relative;
    margin-bottom: 2rem
  }
  #correlation .figure a {
    display: block;
    position: absolute;
    z-index: 1;
    color: #360808;
    font-size: 1.05rem;
    text-decoration: none
  }
  #correlation .figure a>div {
    width: 26.66667vw;
    height: 20.8vw;
    overflow: hidden;
    background: #fff;
    border-radius: .7rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
  }
  #correlation .figure a.c-1 {
    left: 61.6vw;
    top: 46.26667vw;
    -webkit-box-shadow: 0 2px 6px #c6c852;
    box-shadow: 0 2px 6px #c6c852
  }
  #correlation .figure a.c-6 {
    left: 61.6vw;
    top: 15.06667vw;
    -webkit-box-shadow: 0 2px 6px #e3cee6;
    box-shadow: 0 2px 6px #e3cee6
  }
  #correlation .figure a.c-3 {
    left: 17.33333vw;
    top: 46.26667vw;
    -webkit-box-shadow: 0 2px 6px #ffc2cc;
    box-shadow: 0 2px 6px #ffc2cc
  }
  #correlation .figure a.c-4 {
    left: 17.33333vw;
    top: 77.86667vw;
    -webkit-box-shadow: 0 2px 6px #ffc2cc;
    box-shadow: 0 2px 6px #ffc2cc
  }
  #correlation .figure a.c-5 {
    left: 61.6vw;
    top: 73.33333vw;
    -webkit-box-shadow: 0 2px 6px #c6c852;
    box-shadow: 0 2px 6px #c6c852
  }
  #correlation .figure a.c-8 {
    left: 17.33333vw;
    top: 104.93333vw;
    -webkit-box-shadow: 0 2px 6px #ced7e6;
    box-shadow: 0 2px 6px #ced7e6
  }
  #correlation .figure a.c-7 {
    left: 17.33333vw;
    top: 15.06667vw;
    -webkit-box-shadow: 0 2px 6px #e3cee6;
    box-shadow: 0 2px 6px #e3cee6
  }
  #correlation .figure a.c-2 {
    left: 61.6vw;
    top: 104.93333vw;
    -webkit-box-shadow: 0 2px 6px #ced7e6;
    box-shadow: 0 2px 6px #ced7e6
  }
  #correlation .figure a .tag {
    position: absolute;
    left: 1.33333vw;
    top: -.93333vw;
    width: 6.8vw
  }
  #correlation .figure a .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 7.46667vw;
    text-align: center
  }
  #correlation .figure a .name span {
    padding-left: 1.1rem;
    background: url(../img_story/correlation/ico_arrow.png) no-repeat center left/1rem
  }
  #correlation .figure a .name small {
    font-size: xx-small
  }
  #correlation .figure a:hover {
    color: #ff4d4d
  }
  #correlation .figure a:hover .name span {
    background-image: url(../img_story/correlation/ico_arrow_on.png)
  }
  #correlation .figure a.current {
    color: #ff4d4d
  }
  #correlation .figure a.current>div {
    border: 2px solid #ff4d4d
  }
  #correlation .figure a.current .name span {
    padding-left: 0;
    background: none
  }
  #correlation .close {
    width: 36vw;
    margin: 0 auto
  }
  #correlation .close a {
    display: inline-block;
    width: 36vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
    padding: 1.2rem;
    color: #360808;
    font-size: 1.32rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ff4d4d;
    border-bottom-width: 4px;
    border-radius: 2.4rem;
    background: #fff
  }
  #correlation .close a span {
    padding-left: 1.6rem;
    background: url(../img/icon/close.svg) no-repeat left center/1.1rem 1.1rem
  }
  #correlation .close a:hover {
    color: #ff4d4d;
    background: #ffe4e4
  }
}

#recommend {
  position: relative
}

#recommend .curtain {
  position: relative;
  width: 100%;
  height: 340px;
  margin-top: 0px
}

#recommend .curtain .left {
  position: absolute;
  left: 0;
  top: 0;
  height: 370px;
  text-align: left
}

#recommend .curtain .right {
  position: absolute;
  right: 0;
  left: 0;
  height: 370px;
  text-align: right
}

#recommend .curtain .cloud {
  position: absolute;
  left: 0;
  bottom: -120px;
  width: 100%;
  height: 237px;
  background: url(../img/header/lg/cloud.png) center bottom
}

#recommend #recommend-header {
  position: relative
}

@media screen and (min-width: 751px) {
  #recommend #recommend-header {
    margin-top: -330px
  }
  #recommend #recommend-header #h1 {
    text-align: center
  }
  #recommend #recommend-header p {
    margin-top: 0;
    text-align: center;
    font-weight: bold
  }
  #recommend #recommend-header .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 940px;
    margin: 35px auto;
    overflow: hidden;
    border: 2px solid #ff4d4d;
    border-bottom: 4px solid #ff4d4d;
    border-radius: 10px
  }
  #recommend #recommend-header .list a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 25%;
    height: 75px;
    padding-left: 20px;
    color: #360808;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.6;
    background: #fff url(../img/header/ico_arrow.png) no-repeat 10px 50%;
    background-size: 1.65rem;
    border-left: 1px solid #b6b6b6;
    border-top: 1px solid #b6b6b6
  }
  #recommend #recommend-header .list a:nth-child(4n+1) {
    border-left: 0
  }
  #recommend #recommend-header .list a:nth-child(1), #recommend #recommend-header .list a:nth-child(2), #recommend #recommend-header .list a:nth-child(3), #recommend #recommend-header .list a:nth-child(4) {
    border-top: 0
  }
  #recommend #recommend-header .list a:hover {
    background-color: #ffeedd
  }
  #recommend #recommend-header .list a span {
    display: inline-block;
    width: 100%
  }
}

@media screen and (max-width: 750px) {
  #recommend #recommend-header {
    margin: 3vw 0vw 0vw
  }
  #recommend #recommend-header p {
    margin: 1vw 0vw 0vw;
    margin-left: 3.33333vw;
    margin-right: 3.33333vw;
    font-size:0.8rem;
    line-height:1.3rem;
  }
  #recommend #recommend-header .list {
    margin: 1rem 3.33333vw;
    border-bottom: 1px solid #c9c7d4
  }
  #recommend #recommend-header .list a {
    display: block;
    padding: 1.0rem 1.0rem 1.0rem 3.5rem;
    color: #360808;
    font-weight: bold;
    font-size: 0.8rem;
    text-decoration: none;
    border-top: 1px solid #c9c7d4;
    background: url(../img/header/ico_arrow.png) no-repeat 0.5rem 50%;
    background-size: 1.65rem
  }
}

@media screen and (max-width: 374px) {
  #recommend #recommend-header .list a {
    line-height: 1.2
  }
}

@media screen and (min-width: 751px) {
  #recommend #recomend-course {
    width: 940px;
    margin: 0 auto
  }
  #recommend #recomend-course .anchor {
    margin-top: -60px;
    padding-top: 30px
  }
}

@media screen and (max-width: 750px) {
  #recommend #recomend-course {
    margin: 0 1.86667vw
  }
  #recommend #recomend-course .anchor {
    margin-top: -7vw;
    padding-top: 5vw
  }
}

#recommend #recomend-course .course {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fed;
  -webkit-box-shadow: 0 0.3rem 1rem rgba(43, 32, 32, 0.2);
  box-shadow: 0 0.3rem 1rem rgba(43, 32, 32, 0.2)
}

@media screen and (min-width: 751px) {
  #recommend #recomend-course .course {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  #recommend #recomend-course .course #h2 {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 45px;
    text-align: center;
    background: url(../img_recommend/header/lg/border.png) no-repeat center top
  }
  #recommend #recomend-course .course #h2 span {
    display: inline-block;
    width: 500px
  }
  #recommend #recomend-course .course p {
    margin-top: 25px;
    text-align: center;
    font-weight: bold;
  }
  #recommend #recomend-course .course .items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 910px;
    margin: 0 auto
  }
}

@media screen and (max-width: 750px) {
  #recommend #recomend-course .course {
    margin-top: 2rem;
    padding-bottom: 0.5rem
  }
  #recommend #recomend-course .course #h2 {
    position: absolute;
    top: 0;
    height: 33.2vw;
    padding: 8vw 8vw 0vw;
    background: url(../img_recommend/header/border.png) no-repeat center top;
    background-size: contain
  }
  #recommend #recomend-course .course p {
    margin: 4vw 0vw 4vw;
    margin-left: 3.33333vw;
    margin-right: 3.33333vw;
    font-size: 0.8rem;
    line-height: 1.3rem;
  }
  #recommend #recomend-course .course .box-item {
    margin: 1.5vw 1.5vw 20px;
    -webkit-box-shadow: 0 0 .3rem #d4c4c4;
    box-shadow: 0 0 .3rem #d4c4c4
  }
}

@media screen and (min-width: 751px) {
  #recommend .note {
    width: 900px;
    margin: 0 auto;
    padding: 3rem 0
  }
}

@media screen and (max-width: 750px) {
  #recommend .note {
    padding: 2rem 0;
    margin-left: 3.33333vw;
    margin-right: 3.33333vw
  }
}

#recommend .note p {
  font-size: 1.2rem
}

#recommend .note p.t1 {
  font-weight: bold
}

#recommend .note p.t2 {
  margin-left: 1.2rem
}


/*# sourceMappingURL=style.css.map */

@media only screen and (max-device-width: 768px) {
	#vr_wrap .ve_ulogo{
	display:block;
	margin-left:10px;
	margin-bottom:10px;
	max-width:30%;
	}
}