@charset "UTF-8";
/*==================== [Suggested order by mozilla.org] z-index display list-style position float clear width height margin padding border background color font text-decoration text-align vertical-align white-space other text content ====================*/
@-webkit-keyframes pageTopShake { 0% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  25% { -webkit-transform: translate(0px, -5px) rotateZ(5deg); transform: translate(0px, -5px) rotateZ(5deg); }
  50% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  75% { -webkit-transform: translate(0px, -5px) rotateZ(-5deg); transform: translate(0px, -5px) rotateZ(-5deg); } }
@keyframes pageTopShake { 0% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  25% { -webkit-transform: translate(0px, -5px) rotateZ(5deg); transform: translate(0px, -5px) rotateZ(5deg); }
  50% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  75% { -webkit-transform: translate(0px, -5px) rotateZ(-5deg); transform: translate(0px, -5px) rotateZ(-5deg); } }

@-webkit-keyframes iconShake { 0% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  25% { -webkit-transform: translate(0px, 0px) rotateZ(8deg); transform: translate(0px, 0px) rotateZ(8deg); }
  50% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  75% { -webkit-transform: translate(0px, 0px) rotateZ(-8deg); transform: translate(0px, 0px) rotateZ(-8deg); } }

@keyframes iconShake { 0% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  25% { -webkit-transform: translate(0px, 0px) rotateZ(8deg); transform: translate(0px, 0px) rotateZ(8deg); }
  50% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg); }
  75% { -webkit-transform: translate(0px, 0px) rotateZ(-8deg); transform: translate(0px, 0px) rotateZ(-8deg); } }

/*
@keyframes logoshake{
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    10% {transform: translate(0px, 0px) rotateZ(8deg)}
    20% {transform: translate(0px, 0px) rotateZ(0deg)}
    30% {transform: translate(0px, 0px) rotateZ(-5deg)}
    40% {transform: translate(0px, 0px) rotateZ(0deg)}
    50% {transform: translate(0px, 0px) rotateZ(5deg)}
    60% {transform: translate(0px, 0px) rotateZ(0deg)}
    70% {transform: translate(0px, 0px) rotateZ(-2deg)}
    80% {transform: translate(0px, 0px) rotateZ(0deg)}
    90% {transform: translate(0px, 0px) rotateZ(2deg)}
}
@keyframes topIllustShake{
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, 0px) rotateZ(5deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(0px, 0px) rotateZ(-5deg)}
}
*/
/*! jquery-drawer v3.2.0 Flexible drawer menu using jQuery, iScroll and CSS. http://git.blivesta.com/drawer License : MIT Author : blivesta <design@blivesta.com> (http://blivesta.com/) */
/*!------------------------------------*    Base
\*!------------------------------------*/
.drawer-nav { position: fixed; z-index: 101; top: 0; overflow: hidden; width: 15rem; height: 100%; color: #222; background-color: #b97db3; text-align: left; }

.drawer-brand { font-size: 1.5rem; font-weight: bold; line-height: 3.75rem; display: block; padding-right: .75rem; padding-left: .75rem; text-decoration: none; color: #222; }

.drawer-menu { margin: 0; padding: 0; list-style: none; }

.drawer-menu-item { font-size: 1rem; display: block; padding: .75rem; text-decoration: none; color: #222; }

.drawer-menu-item:hover { text-decoration: underline; color: #555; background-color: transparent; }

/*! overlay */
.drawer-overlay { position: fixed; z-index: 100; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); }

.drawer-open .drawer-overlay { display: block; }

/*!------------------------------------*    Top
\*!------------------------------------*/
.drawer--top .drawer-nav { top: -100%; left: 0; width: 100%; height: auto; max-height: 100%; -webkit-transition: top 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: top 0.6s cubic-bezier(0.19, 1, 0.22, 1); }

.drawer--top.drawer-open .drawer-nav { top: 0; }

.drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger { right: 0; }

/*!------------------------------------*    Left
\*!------------------------------------*/
.drawer--left .drawer-nav { left: -15rem; -webkit-transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1); }

.drawer--left.drawer-open .drawer-nav, .drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger { left: 0; }

.drawer--left .drawer-hamburger { left: 1.3rem; }

@media screen and (max-width: 600px) { .drawer--left .drawer-hamburger { left: .5rem; } }

.drawer--left.drawer-open .drawer-hamburger { left: 16.3rem; }

@media screen and (max-width: 600px) { .drawer--left.drawer-open .drawer-hamburger { left: 15.5rem; } }

.drawer--left.drawer-open .drawer-hamburger .buttonText-menu { color: #fff; }

@media screen and (max-width: 600px) { .drawer--left.drawer-open .drawer-hamburger .buttonText-menu { background: transparent; } }

/*!------------------------------------*    Right
\*!------------------------------------*/
.drawer--right .drawer-nav { right: -240px; -webkit-transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1); }

.drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0px; }

.drawer--right.drawer-open .drawer-hamburger { right: 240px; }

/*!------------------------------------*    Hamburger
\*!------------------------------------*/
.drawer-hamburger { position: fixed; z-index: 200; display: block; box-sizing: content-box; top: 20px; width: 35px; margin-right: 5px; padding: 8px .3rem 18px .3rem; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); outline: 0; background: none; border: transparent; }

.drawer-hamburger:hover { cursor: pointer; }

.drawer-hamburger-icon { position: relative; display: block; margin-top: 10px; }

.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { width: 100%; height: 2px; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); background-color: #b97db3; }

.drawer-hamburger-icon:before, .drawer-hamburger-icon:after { position: absolute; top: -10px; left: 0; content: ' '; }

.drawer-hamburger-icon:after { top: 10px; }

.drawer-open .drawer-hamburger-icon { background-color: transparent; }

.drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { top: 0; }

.drawer-open .drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff; }

.drawer-open .drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #fff; }

.buttonText-menu { position: absolute; display: block; top: -18px; left: 0px; right: 0px; margin: auto; color: #b97db3; font-size: 15px; font-weight: 700; }

/*!------------------------------------*    accessibility
\*!------------------------------------*/
/*! Only display content to screen readers See: http://a11yproject.com/posts/how-to-hide-content */
.sr-only { position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; }

/*! Use in conjunction with .sr-only to only display content when it's focused. Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 Credit: HTML5 Boilerplate */
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; overflow: visible; clip: auto; width: auto; height: auto; margin: 0; }

/*!------------------------------------*    Sidebar
\*!------------------------------------*/
.drawer--sidebar { background-color: #fff; }

.drawer--sidebar .drawer-contents { background-color: #fff; }

@media (min-width: 64em) { .drawer--sidebar .drawer-hamburger { display: none; visibility: hidden; }
  .drawer--sidebar .drawer-nav { display: block; -webkit-transform: none; -ms-transform: none; transform: none; position: fixed; width: 12.5rem; height: 100%; }
  /*! Left */
  .drawer--sidebar.drawer--left .drawer-nav { left: 0; border-right: 1px solid #ddd; }
  .drawer--sidebar.drawer--left .drawer-contents { margin-left: 12.5rem; }
  /*! Right */
  .drawer--sidebar.drawer--right .drawer-nav { right: 0; border-left: 1px solid #ddd; }
  .drawer--sidebar.drawer--right .drawer-contents { margin-right: 12.5rem; }
  /*! container */
  .drawer--sidebar .drawer-container { max-width: 48rem; } }

@media (min-width: 75em) { .drawer--sidebar .drawer-nav { width: 15rem; }
  .drawer--sidebar.drawer--left .drawer-contents { margin-left: 15rem; }
  .drawer--sidebar.drawer--right .drawer-contents { margin-right: 15rem; }
  /*! container */
  .drawer--sidebar .drawer-container { max-width: 60rem; } }

/*!------------------------------------*    Navbar
\*!------------------------------------*/
.drawer--navbarTopGutter { padding-top: 3.75rem; }

.drawer-navbar .drawer-navbar-header { border-bottom: 1px solid #ddd; background-color: #fff; }

.drawer-navbar { z-index: 102; top: 0; width: 100%; }

/*! .drawer-navbar modifier */
.drawer-navbar--fixed { position: fixed; }

.drawer-navbar-header { position: relative; z-index: 102; box-sizing: border-box; width: 100%; height: 3.75rem; padding: 0 .75rem; text-align: center; }

.drawer-navbar .drawer-brand { line-height: 3.75rem; display: inline-block; padding-top: 0; padding-bottom: 0; text-decoration: none; }

.drawer-navbar .drawer-brand:hover { background-color: transparent; }

.drawer-navbar .drawer-nav { padding-top: 3.75rem; }

.drawer-navbar .drawer-menu { padding-bottom: 7.5rem; }

@media (min-width: 64em) { .drawer-navbar { height: 3.75rem; border-bottom: 1px solid #ddd; background-color: #fff; }
  .drawer-navbar .drawer-navbar-header { position: relative; display: block; float: left; width: auto; padding: 0; border: 0; }
  .drawer-navbar .drawer-menu--right { float: right; }
  .drawer-navbar .drawer-menu li { float: left; }
  .drawer-navbar .drawer-menu-item { line-height: 3.75rem; padding-top: 0; padding-bottom: 0; }
  .drawer-navbar .drawer-hamburger { display: none; }
  .drawer-navbar .drawer-nav { position: relative; left: 0; overflow: visible; width: auto; height: 3.75rem; padding-top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .drawer-navbar .drawer-menu { padding: 0; }
  /*! dropdown */
  .drawer-navbar .drawer-dropdown-menu { position: absolute; width: 15rem; border: 1px solid #ddd; }
  .drawer-navbar .drawer-dropdown-menu-item { padding-left: .75rem; } }

/*!------------------------------------*    Dropdown
\*!------------------------------------*/
.drawer-dropdown-menu { display: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0; background-color: #fff; }

.drawer-dropdown-menu > li { width: 100%; list-style: none; }

.drawer-dropdown-menu-item { line-height: 3.75rem; display: block; padding: 0; padding-right: .75rem; padding-left: 1.5rem; text-decoration: none; color: #222; }

.drawer-dropdown-menu-item:hover { text-decoration: underline; color: #555; background-color: transparent; }

/*! open */
.drawer-dropdown.open > .drawer-dropdown-menu { display: block; }

/*! drawer-caret */
.drawer-dropdown .drawer-caret { display: inline-block; width: 0; height: 0; margin-left: 4px; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, -webkit-transform .2s ease; transition: transform .2s ease, opacity .2s ease; transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/*! open */
.drawer-dropdown.open .drawer-caret { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/*!------------------------------------*    Container
\*!------------------------------------*/
.drawer-container { margin-right: auto; margin-left: auto; }

@media (min-width: 64em) { .drawer-container { max-width: 60rem; } }

@media (min-width: 75em) { .drawer-container { max-width: 70rem; } }

/*==================== Base ====================*/
body { color: #666666; font-family: "NotoSansCJKjp-Regular", "Noto Sans", "Noto Sans CJK JP", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic"; font-size: 12px; line-height: 1.3rem; text-align: center; }

html, body, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

p { margin: 0 0 20px 0; padding: 0; }

@media screen and (max-width: 700px) { p { margin-bottom: 10px; } }

dl, dt, dd, ul, nav, ol { margin: 0; padding: 0; }

li { list-style-type: none; }

a { text-decoration: none; border: none; outline: none; }

a:link, a:visited { color: #b97db3; text-decoration: none; }

a:hover, a:active { color: #e98793; text-decoration: none; }

a img { border-style: none; }

em { font-weight: 700; font-style: normal; }

*:focus { border: none; }

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

article:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

section { position: relative; }

section:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

section p:last-child, section ul:last-child, section ol:last-child, section table:last-child { /*margin-bottom: 30px; @include mq($maxWidth4) { margin-bottom: 20px; }*/ }

.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

/* common */
.wd500 { position: relative; width: 500px; margin: 0px auto; }

.wd500:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

@media screen and (max-width: 520px) { .wd500 { width: auto; margin: 0px 20px; } }

.wd800 { position: relative; width: 800px; margin: 0px auto; }

.wd800:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

@media screen and (max-width: 820px) { .wd800 { width: auto; margin: 0px 20px; } }

.wd1200 { position: relative; width: 1200px; margin: 0px auto; }

.wd1200:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

@media screen and (max-width: 1200px) { .wd1200 { width: auto; margin: 0px 20px; } }

.wd1000 { position: relative; width: 1000px; margin: 0px auto; }

.wd1000:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

@media screen and (max-width: 1000px) { .wd1000 { width: auto; margin: 0px 20px; } }

.leftColumn { float: left; }

.rightColumn { float: right; }

.column-double { width: 47.5%; }

@media screen and (max-width: 820px) { .column-double { width: 100%; } }

.column-double-leftColumn { float: left; }

@media screen and (max-width: 820px) { .column-double-leftColumn { float: none; } }

.column-double-rightColumn { float: right; }

@media screen and (max-width: 820px) { .column-double-rightColumn { float: none; } }

.alCent { text-align: center; }

.alRight { text-align: right; }

.alLeft { text-align: left; }

.wrap { position: relative; }

.wrap:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.displayNone { display: none; }

.tonicTxt { color: #b97db3; }

.dominantTxt { color: #88c672; }

.orangeTxt { color: #e49061; }

.grayTxt { color: #666; }

.redTxt { color: #88c672; }

.pinkTxt { color: #88c672; }

.whiteTxt { color: #fff; }

.borderBox { padding: 10px; border: 1px solid #52c5d1; box-sizing: border-box; }

.borderRadius { border-radius: 4px; }

.mb0 { margin-bottom: 0px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb50 { margin-bottom: 50px !important; }

.mb80 { margin-bottom: 80px !important; }

@media screen and (max-width: 700px) { .mb80 { margin-bottom: 20px !important; } }

.mb40to0 { margin-bottom: 40px !important; }

@media screen and (max-width: 820px) { .mb40to0 { margin-bottom: 0px !important; } }

.mt0 { margin-top: 0px !important; }

.mt10 { margin-top: 10px !important; }

.mt20 { margin-top: 20px !important; }

.mt30 { margin-top: 30px !important; }

.mt40 { margin-top: 40px !important; }

.mt50 { margin-top: 50px !important; }

.wd20per { width: 20% !important; }

@media screen and (max-width: 600px) { .wd20per { width: 30% !important; } }

.wd30per { width: 30% !important; }

@media screen and (max-width: 600px) { .wd30per { width: 40% !important; } }

.wd40per { width: 40% !important; }

@media screen and (max-width: 600px) { .wd40per { width: 45% !important; } }

.wd50per { width: 50% !important; }

@media screen and (max-width: 600px) { .wd50per { width: 50% !important; } }

.wd200px { width: 200px; }

.wd250px { width: 250px; }

.wd300px { width: 300px; }

.fz12 { font-size: 12px; font-size: 0.75rem; line-height: 16px; }

.fz14 { font-size: 14px; font-size: 0.875rem; line-height: 21px; }

.fz16 { font-size: 16px; font-size: 1rem; line-height: 26px; }

.ph-left { float: left; margin: 0px 15px 10px 0px; }

.ph-left img { border-radius: 4px; }

@media screen and (max-width: 600px) { .ph-left { float: none; width: auto !important; margin: 0px auto 15px auto; } }

.ph-right { float: right; margin: 0px 0px 10px 15px; }

.ph-right img { border-radius: 4px; }

@media screen and (max-width: 600px) { .ph-right { float: none; width: auto !important; margin: 0px auto 15px auto; } }

/* youtube */
.youtube-outer { width: 580px; margin: 0px auto; }

@media screen and (max-width: 1000px) { .youtube-outer { width: 100%; } }

.youtube { position: relative; width: 100%; padding-top: 56.25%; }

.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

.anchor { position: absolute; top: 0px; left: 0px; }

.flexBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; }

.flexBox .flexBox-inner { position: relative; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.flexBox .flexBox-inner:first-child { margin-left: 0px; }

@media screen and (max-width: 700px) { .flexBox { margin-bottom: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .flexBox .flexBox-inner { margin: 0px 0px 10px 0px; } }

.SPMenu { display: none; }

@media screen and (max-width: 1000px) { .SPMenu { display: block; } }

.SPMenu-nav li { border-bottom: 1px solid #ce8cc7; font-size: 1.0rem; }

.SPMenu-nav li a { display: block; color: #fff !important; padding: 18px; }

.secTitle { margin-bottom: 50px; font-size: 46px; font-size: 2.875rem; font-weight: bold; line-height: 54px; }

@media screen and (max-width: 700px) { .secTitle { margin-bottom: 20px; font-size: 22px; font-size: 1.375rem; line-height: 26px; } }

.secTitle-normal { margin-bottom: 50px; font-size: 46px; font-size: 2.875rem; font-weight: normal; line-height: 54px; }

@media screen and (max-width: 700px) { .secTitle-normal { margin-bottom: 20px; font-size: 22px; font-size: 1.375rem; line-height: 26px; } }

.secTitleMid-normal { margin-bottom: 50px; font-size: 34px; font-size: 2.125rem; line-height: 46px; }

@media screen and (max-width: 700px) { .secTitleMid-normal { margin-bottom: 20px; font-size: 22px; font-size: 1.375rem; line-height: 26px; } }

.secSubTitle { margin-bottom: 60px; font-size: 20px; font-size: 1.25rem; line-height: 30px; font-weight: bold; }

@media screen and (max-width: 700px) { .secSubTitle { margin-bottom: 30px; font-size: 16px; font-size: 1rem; line-height: 20px; } }

.secSubTitle-SPalLeft { margin-bottom: 60px; font-size: 20px; font-size: 1.25rem; line-height: 30px; font-weight: bold; }

@media screen and (max-width: 700px) { .secSubTitle-SPalLeft { margin-bottom: 30px; font-size: 16px; font-size: 1rem; line-height: 20px; text-align: left; } }

.secSubTitle-arrow { position: relative; margin-bottom: 80px; font-size: 34px; font-size: 2.125rem; font-weight: normal; }

.secSubTitle-arrow:before { display: block; position: absolute; content: ""; bottom: -60px; left: 0px; right: 0px; height: 58px; width: 58px; margin: auto; border-right: 8px solid #cccccc; border-bottom: 8px solid #cccccc; background: transparent; -webkit-transform: scaleY(0.3) rotate(45deg); -ms-transform: scaleY(0.3) rotate(45deg); transform: scaleY(0.3) rotate(45deg); }

@media screen and (max-width: 700px) { .secSubTitle-arrow { margin-bottom: 50px; font-size: 20px; font-size: 1.25rem; font-weight: bold; line-height: 24px; }
  .secSubTitle-arrow:before { bottom: -50px; } }

.br-PC { display: block; }

@media screen and (max-width: 700px) { .br-PC { display: none; } }

.br-SP { display: none; }

@media screen and (max-width: 700px) { .br-SP { display: block; } }

.dotList li { list-style-type: disc; list-style-position: outside; margin: 0 0 0px 1.0rem; }

.headerArea { position: absolute; z-index: 50; top: 460px; left: 0px; width: 100%; height: 40px; margin: 0px auto; background: #b97db3; }

@media screen and (max-width: 1000px) { .headerArea { display: none; } }

.headerArea-menuArea-menu { margin-top: 10px; }

.headerArea-menuArea-menu li { display: inline-block; text-align: center; font-size: 12px; font-size: 0.75rem; margin: 0px 12px; }

.headerArea-menuArea-menu li a { color: #fff; }

.headerArea-menuArea-menu li a:hover { text-decoration: underline; }

.fixed { position: fixed; top: 0px; z-index: 1000; }

.dotBg { background: url(../images/BG_dot_pc.gif) repeat center center; background-attachment: fixed; }

.garland { position: relative; }

.garland:before { display: block; position: absolute; content: ""; top: 0px; left: 0px; width: 100%; height: 15px; background: url(../images/garland01.png) repeat-x left top; background-size: auto 15px; }

.garland-footer { position: relative; }

.garland-footer:before { display: block; position: absolute; content: ""; top: 0px; left: 0px; width: 100%; height: 15px; background: url(../images/garland02.png) repeat-x left top; background-size: auto 15px; }

.mainVisual { position: relative; height: 460px; margin-bottom: 40px; text-align: center; box-sizing: border-box; background: url(../images/mainVisual.png) no-repeat center center; background-size: 1156px auto; }

@media screen and (max-width: 1000px) { .mainVisual { margin-bottom: 0px; } }

@media screen and (max-width: 820px) { .mainVisual { background: none; height: auto; margin-bottom: 15px; } }

.mainVisual-inner { position: relative; width: 1000px; margin: 0px auto; }

.mainVisual-inner:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

@media screen and (max-width: 1000px) { .mainVisual-inner { width: auto; margin: 0px 20px; } }

@media screen and (max-width: 820px) { .mainVisual-inner { margin: 0px; padding-top: 23px; } }

.mainVisual-logo { position: absolute; width: 195.5px; top: 28px; left: 0px; }

@media screen and (max-width: 820px) { .mainVisual-logo { left: 10px; width: 156.5px; } }

.mainVisual-siteTitle { position: absolute; top: 180px; left: 0px; right: 0px; width: 387.5px; margin: auto; }

@media screen and (max-width: 820px) { .mainVisual-siteTitle { display: none; } }

.mainVisual-subTitle01 { position: absolute; top: 43px; left: 0px; right: 0px; width: 181px; margin: auto; }

@media screen and (max-width: 820px) { .mainVisual-subTitle01 { display: none; } }

.mainVisual-subTitle02 { position: absolute; top: 355px; left: 340px; width: 83.5px; }

@media screen and (max-width: 1000px) { .mainVisual-subTitle02 { left: 31%; } }

@media screen and (max-width: 820px) { .mainVisual-subTitle02 { display: none; } }

.mainVisual-subTitle03 { position: absolute; top: 340px; left: 598px; width: 84px; }

@media screen and (max-width: 1000px) { .mainVisual-subTitle03 { left: 62%; } }

@media screen and (max-width: 820px) { .mainVisual-subTitle03 { display: none; } }

.mainVisualSP { display: none; }

@media screen and (max-width: 820px) { .mainVisualSP { display: block; margin: 0px auto; max-width: 80%; } }

.bannerArea_ { padding: 20px 0px; background: rgba(83, 187, 177, 0.7); text-align: center;}
.bannerArea_ img { width:90%; max-width: 420px; }

.bannerArea { padding: 20px 0px; background: rgba(83, 187, 177, 0.7); }

@media screen and (max-width: 820px) { .bannerArea { padding: 0px; background: none; } }

.bannerArea-inner { position: relative; width: 1000px; margin: 0px auto; }

.bannerArea-inner:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

@media screen and (max-width: 1000px) { .bannerArea-inner { width: auto; margin: 0px 20px; } }

@media screen and (max-width: 820px) { .bannerArea-inner { margin: 0px; } }

.bannerArea-left { float: left; width: 60%; margin-top: 20px; color: #fff; text-align: left; line-height: 14px; /*img{ float: left; width: 41px; height: 41px; margin-right: 10px; margin-top: -3px; } span{ letter-spacing: 0.15rem; line-height: 18px; }*/ }

.bannerArea-left:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.bannerArea-left img { float: left; width: 414px; }

@media screen and (max-width: 820px) { .bannerArea-left { float: none; width: auto; margin: 0px auto; padding: 20px; background: rgba(185, 125, 179, 0.7); text-align: center; }
  .bannerArea-left img { float: none; margin: 0px auto; } }

@media screen and (max-width: 440px) { .bannerArea-left img { width: auto; } }

.bannerArea-right { float: right; }

.bannerArea-right img { width: 275px; }

@media screen and (max-width: 820px) { .bannerArea-right { float: none; padding: 17px 10px; background: rgba(83, 187, 177, 0.7); } }

.schedule { padding: 60px 0px 50px 0px; }

@media screen and (max-width: 820px) { .schedule { padding: 37px 0px; } }

.schedule-date { margin-bottom: 15px; color: #e98793; font-weight: 600; font-size: 18px;}

.schedule-date img { height: 24px; }

.schedule-outline { padding: 18px; border: 1px solid #e98793; border-radius: 4px; box-sizing: border-box; color: #b97db3; }

@media screen and (max-width: 820px) { .schedule-outline { padding: 18px 10px; margin-bottom: 20px; } }

.schedule-outline2 { padding: 18px; box-sizing: border-box; color: #b97db3; }

@media screen and (max-width: 820px) { .schedule-outline2 { padding: 18px 10px; margin-bottom: 0; } }

.about { padding: 10px 0px 80px 0px; }

.about p { color: #b97db3; font-size: 16px; font-size: 1rem; line-height: 26px; text-align: left; }

@media screen and (max-width: 820px) { .about { padding: 0px; padding-bottom: 25px; } }

.about-title { margin-bottom: 36px; }

.about-title img { width: 425.5px; }

@media screen and (max-width: 440px) { .about-title { margin-bottom: 20px; }
  .about-title img { width: auto; } }

.program { padding: 100px 0px; background: #fdf9d3; }

@media screen and (max-width: 820px) { .program { padding: 75px 0px 70px 0px; } }

.program-title { margin-bottom: 50px; }

.program-title img { width: 153.5px; }

@media screen and (max-width: 820px) { .program-title { margin-bottom: 30px; } }

.program-name { margin: 10px 0px; font-size: 16px; font-size: 1rem; color: #b97db3; font-weight: bold; }

@media screen and (max-width: 820px) { .program-name { margin-top: 15px; } }

.program-button { position: relative; display: block; border-radius: 4px; background: #e1d759; line-height: 50px; font-size: 14px; font-size: 0.875rem; color: #625b04 !important; -webkit-transition: .3s; transition: .3s; cursor: pointer; }

.program-button:before { display: block; position: absolute; content: ""; top: 0px; bottom: 0px; right: 14px; width: 0px; height: 0px; margin: auto; border-top: 5px solid transparent; border-left: 10px solid #fff; border-bottom: 5px solid transparent; content: ''; }

.program-button:hover { color: #fff !important; background: #e98793; }

@media screen and (max-width: 820px) { .program-button { margin-bottom: 40px; } }

@media screen and (max-width: 440px) { .program-button { font-size: 11px; font-size: 0.6875rem; } }

.program-special { width: 420px; margin: 40px auto 0px auto; }

.program-special dt { padding: 10px; background: #88c672; border-radius: 4px 4px 0px 0px; border-top: 1px solid #fff; color: #fff; font-size: 12px; font-size: 0.75rem; }

.program-special dd { padding: 16px 10px; background: #fff; border-radius: 0px 0px 4px 4px; color: #88c672; font-size: 14px; font-size: 0.875rem; font-weight: 700; }

.program-special dd br { display: none; }

@media screen and (max-width: 820px) { .program-special { margin-top: 0px; width: auto; }
  .program-special dd br { display: block; } }

.castandstaff { padding: 100px 0px; background: #f7ebf7; }

@media screen and (max-width: 820px) { .castandstaff { padding: 75px 0px 65px 0px; } }

.cast-title { margin-bottom: 50px; }
h2.cast-title { color:#b97db3; font-size: 1.2rem; margin-bottom: 40px; }

.cast-title img { width: 79.5px; }

@media screen and (max-width: 820px) { .cast-title { margin-bottom: 30px; } }

.cast-wrap { position: relative; letter-spacing: -.4em; }

.cast-wrap:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.cast-box { max-width:180px; display: inline-block; margin-bottom: 100px; letter-spacing: normal; vertical-align: top; }

.cast-box img { margin-bottom: 12px; border-radius: 180px; width: 100%; height :auto; }

.cast-box:first-child { margin-right: 10px; }

@media screen and (max-width: 820px) { .cast-box { margin-bottom: 40px; }
  .cast-box:first-child { margin-right: 20px; } }

@media screen and (max-width: 600px) { .cast-box { width: 48%; }
  .cast-box { max-width:160px;}
  .cast-box:first-child { margin-right: 4%; }
  .cast-box img { width: auto; } }

.cast-programe { margin-bottom: 12px; font-size: 16px; font-size: 1rem; font-weight: bold; }

.cast-name { font-size: 16px; font-size: 1rem; font-weight: bold; }

.cast-name span { margin-bottom: 5px; display: block; font-size: 12px; font-size: 0.75rem; }

.borderOrange { border: 2px solid #e49061; }

.borderGreen { border: 2px solid #88c672; }

.staff-title { margin-bottom: 50px; }

.staff-title img { width: 89.5px; }

@media screen and (max-width: 600px) { .staff-title { margin-top: 10px; } }

@media screen and (max-width: 820px) { .staff-title { margin-bottom: 30px; } }

.staff-text { margin-bottom: 50px; color: #b97db3; font-size: 16px; font-size: 1rem; font-weight: bold; line-height: 26px; }

.staff-text span { font-size: 12px; font-size: 0.75rem; line-height: 16px; }

@media screen and (max-width: 820px) { .staff-text { margin-bottom: 20px; } }

.staff-span-ml20 { margin-left: 20px; }

@media screen and (max-width: 700px) { .staff-span-ml20 { margin-left: 0px; } }

.staff-list { letter-spacing: -.4em; }

.staff-list:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.staff-list li { display: inline-block; margin: 25px; color: #b97db3; font-size: 12px; font-size: 0.75rem; font-weight: bold; letter-spacing: normal; vertical-align: top; }

.staff-list li img { margin-bottom: 12px; border-radius: 65px; }

@media screen and (max-width: 820px) { .staff-list li { margin: 5px; } }

@media screen and (max-width: 600px) { .staff-list li { width: 45%; margin: 2.5%; } }

.qanda { padding: 100px 0px; background: url(../images/BG_mesh.png) #d8ecee repeat left top; }

@media screen and (max-width: 820px) { .qanda { padding: 75px 0px 70px 0px; } }

.qanda-title { margin-bottom: 50px; }

.qanda-title img { width: 84.5px; }

@media screen and (max-width: 820px) { .qanda-title { margin-bottom: 30px; } }

.qanda-list { text-align: left; }

.qanda-list-question { position: relative; padding: 16px 20px 16px 50px; border-radius: 4px; background: #8ac3c9; color: #fff; font-size: 16px; font-size: 1rem; font-weight: bold; line-height: 26px; }

.qanda-list-question:before { display: block; position: absolute; content: ""; top: 15px; left: 20px; color: #fff; font-size: 16px; font-size: 1rem; font-weight: bold; line-height: 26px; text-align: center; content: 'Q.'; }

.qanda-list-amswer { padding: 20px 20px 40px 20px; color: #b97db3; font-size: 14px; font-size: 0.875rem; line-height: 21px; }

.qanda-list-amswer ul { margin-bottom: 0px !important; }

@media screen and (max-width: 820px) { .qanda-list-amswer { padding: 20px 0px 30px 0px; } }

.qanda-request { padding: 16px 20px; background: #fff; border-radius: 4px; text-align: left; }

.qanda-request-title { margin-bottom: 10px; color: #e98793; font-size: 14px; font-size: 0.875rem; font-weight: bold; }

/* TIME TABLE */
.timetable { padding: 100px 0px; background: url(../images/BG_mesh.png) #ebf4e0 repeat left top; }

@media screen and (max-width: 820px) { .timetable { padding: 75px 0px 70px 0px; } }

.timetable-title { margin-bottom: 50px; }

.timetable-title img { width: 177px; }

@media screen and (max-width: 820px) { .timetable-title { margin-bottom: 30px; } }

.timetable-list { text-align: left; }

.timetable-time { margin-bottom: 15px; color: #88c672; font-size: 16px; font-size: 1rem; font-weight: bold; }

.timetable-time:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.timetable-time img { float: left; width: 39px; margin: -10px 16px 0px 0px; vertical-align: middle; }

.timetable-time br { display: none; }

@media screen and (max-width: 820px) { .timetable-time { text-align: center; }
  .timetable-time img { float: none; margin: 0px auto 10px auto; }
  .timetable-time br { display: block; }
  .timetable-time:last-child { margin-bottom: 40px; } }

.timetable-content { margin-bottom: 50px; padding: 16px 20px; border-radius: 4px; background: #fff; }

@media screen and (max-width: 820px) { .timetable-content { margin-bottom: 30px; } }

.timetable-notice { text-align: right; font-size: 14px; font-size: 0.875rem; }

@media screen and (max-width: 820px) { .timetable-notice { text-align: left; } }

/* LOCATION */
.location { padding: 100px 0px; background: url(../images/BG_mesh.png) #fae7e9 repeat left top; }

.location p { text-align: left; }

@media screen and (max-width: 820px) { .location { padding: 75px 0px 50px 0px; } }

.location-title { margin-bottom: 50px; }

.location-title img { width: 156.5px; }

@media screen and (max-width: 820px) { .location-title { margin-bottom: 30px; } }

.location-name { margin: 10px 0px; font-size: 16px; font-size: 1rem; color: #8ac3c9; font-weight: bold; }

.location-name span { margin-right: 12px; font-size: 12px; font-size: 0.75rem; }

@media screen and (max-width: 820px) { .location-name span { display: block; margin: 0px 0px 5px 0px; } }

.location-link { position: relative; display: block; margin-bottom: 15px; background: #e1d759; border-radius: 4px; border: 5px solid #e1d759; color: #625b04 !important; font-size: 14px; font-size: 0.875rem; text-align: left; -webkit-transition: .3s; transition: .3s; }

.location-link:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.location-link img { float: left; border-radius: 4px; margin-right: 38px; }

.location-link:before { display: block; position: absolute; content: ""; top: 0px; bottom: 0px; right: 10px; width: 25px; height: 24px; margin: auto; background: url(../images/location-link-icon.png) no-repeat left top; background-size: 25px auto; }

.location-link:hover { background: #e98793; border: 5px solid #e98793; color: #fff !important; }

@media screen and (max-width: 440px) { .location-link { font-size: 11px; font-size: 0.6875rem; }
  .location-link img { width: 100px; margin-right: 10px; } }

.location-link-inner { padding-top: 20px; }

@media screen and (max-width: 440px) { .location-link-inner { padding-top: 15px; } }

/* TICKET */
.ticket { padding: 100px 0px 15px 0px; background: url(../images/BG_mesh.png) #ffecd7 repeat left top; }

@media screen and (max-width: 820px) { .ticket { padding: 75px 0px 50px 0px; } }

.ticket-title { margin-bottom: 50px; }

.ticket-title img { width: 107px; }

@media screen and (max-width: 820px) { .ticket-title { margin-bottom: 30px; } }

.ticket-price { margin-bottom: 10px; padding: 14px 20px; background: #e49061; border-radius: 4px; color: #fff; font-size: 16px; font-size: 1rem; }

.ticket-notice { margin-bottom: 40px; letter-spacing: -.4em; }

.ticket-notice li { display: inline-block; letter-spacing: normal; font-size: 14px; font-size: 0.875rem; }

.ticket-notice li:first-child { margin-right: 10px; }

@media screen and (max-width: 820px) { .ticket-notice { margin-bottom: 30px; }
  .ticket-notice li { display: block; }
  .ticket-notice li:first-child { margin-right: 0px; } }

.ticket-subTitle { padding: 14px 20px; background: #b97db3; border-radius: 4px 4px 0px 0px; color: #fff; font-size: 16px; font-size: 1rem; text-align: left; }

.ticket-list { margin-bottom: 40px; padding: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 0px 0px 4px 4px; text-align: left; font-size: 14px; font-size: 0.875rem; line-height: 21px; }

.ticket-list li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #cccccc; }

.ticket-list li:last-child { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none; }

.ticket-list li span { font-weight: bold; color: #b97db3; }

.ticket-list li a { color: #666666; text-decoration: underline; }

.ticket-list li a:hover { color: #e98793; }

@media screen and (max-width: 820px) { .ticket-list { margin-bottom: 30px; } }

.ticket-list-release { color: #e49061; font-size: 16px; font-size: 1rem; font-weight: bold; line-height: 26px; }

.footerArea { padding: 40px 0px 50px 0px; background: #e1d759; color: #625b04; }

.footerArea-sns { margin-bottom: 25px; letter-spacing: -.4em; }

.footerArea-sns li { display: inline-block; margin: 0px 10px; letter-spacing: normal; }

.footerArea-sns li img { width: 28px; }

.footerArea-information { letter-spacing: -.4em; }

.footerArea-information li { display: inline-block; margin: 0px 10px; letter-spacing: normal; }

.footerArea-information li br { display: none; }

@media screen and (max-width: 820px) { .footerArea-information li { display: block; }
  .footerArea-information li br { display: block; } }

.footerArea-logo { margin-bottom: 15px; }

.footerArea-logo img { width: 195.5px; }

.fixedBg01 { background: url(../images/bg01.jpg) #000 no-repeat center center; }

.fixedBg02 { background: url(../images/bg02.jpg) #000 no-repeat center center; }

.fixedBg03 { background: url(../images/bg03.jpg) #000 no-repeat center center; }

.fixedBg04 { background: url(../images/bg04.jpg) #000 no-repeat center center; }

.fixedBg05 { background: url(../images/bg05.jpg) #000 no-repeat center center; }

.fixedBg06 { background: url(../images/bg06.jpg) #000 no-repeat center center; }

.fixedBg { width: 100%; height: 450px; background-size: cover; background-attachment: fixed; }

@media screen and (max-width: 1000px) { .fixedBg { height: 300px; } }

@media screen and (max-width: 820px) { .fixedBg { height: 260px; background-attachment: scroll; background-size: cover; } }

.toPageTop { position: fixed; bottom: 50px; right: 50px; z-index: 75; }

.toPageTop a { display: block; width: 28px; height: 28px; border-radius: 14px; background: rgba(185, 125, 179, 0.8); text-indent: -9999px; }

.toPageTop a:before { display: block; position: absolute; content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; width: 0px; height: 0px; border-left: 5px solid transparent; border-bottom: 8px solid #fff; border-right: 5px solid transparent; }

@media screen and (max-width: 820px) { .toPageTop { bottom: 20px; right: 20px; } }

.modal { display: none; position: fixed; width: 100%; box-sizing: border-box; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; padding: 90px 0px 150px 0px; background: #fff; z-index: 9999; }

@media screen and (max-width: 820px) { .modal { padding: 75px 0px 50px 0px; } }

.modal01-title01 { margin-bottom: 50px; }

.modal01-title01 img { width: 105px; }

@media screen and (max-width: 820px) { .modal01-title01 { margin-bottom: 30px; } }

.modal01-title02 { margin: 20px 0px 40px 0px; }

.modal01-title02 img { width: 157.5px; }

@media screen and (max-width: 820px) { .modal01-title02 { margin: 20px 0px; } }

.modal01-title03 { margin: 50px 0px 30px 0px; }

.modal01-title03 img { width: 105px; }

@media screen and (max-width: 820px) { .modal01-title03 { margin: 20px 0px; } }

.modal02-title01 { margin-bottom: 50px; }

.modal02-title01 img { width: 185px; }

@media screen and (max-width: 820px) { .modal02-title01 { margin-bottom: 30px; } }

.modal02-title03 { margin: 50px 0px 30px 0px; }

.modal02-title03 img { width: 185px; }

@media screen and (max-width: 820px) { .modal02-title03 { margin: 20px 0px; } }

.modal-photoText { width: 170px; min-height: 243px; margin: 0px auto; font-size: 12px; font-size: 0.75rem; text-align: center; }

.modal-photoText span { display: block; margin: 8px 0px 3px 0px; font-size: 13px; font-size: 0.8125rem; font-weight: bold; }

@media screen and (max-width: 820px) { .modal-photoText { width: 48%; min-height: auto; margin-bottom: 20px; }
  .modal-photoText br { display: none; } }

.modal-photoText-min { min-height: auto; }

.modal-photoText-wd { width: auto !important; }

.modal-story { margin-bottom: 40px; }

.modal-story img { margin-bottom: 15px; }

.modal-story p { margin-bottom: 15px; }

@media screen and (max-width: 820px) { .modal-story { margin-bottom: 20px; } }

.modal-story-sceneNum { margin-bottom: 20px; padding-bottom: 10px; font-size: 16px; font-size: 1rem; font-weight: bold; text-align: left; }

.modal-story-sceneNum-oragne { border-bottom: 1px solid #e49061; color: #e49061; }

.modal-linkButton { position: relative; display: block; border-radius: 4px; padding: 20px 10px; font-size: 14px; font-size: 0.875rem; color: #fff !important; -webkit-transition: .3s; transition: .3s; cursor: pointer; }

.modal-linkButton:before { display: block; position: absolute; content: ""; top: 0px; bottom: 0px; right: 14px; width: 0px; height: 0px; margin: auto; border-top: 5px solid transparent; border-left: 10px solid #fff; border-bottom: 5px solid transparent; content: ''; }

.modal-linkButton br { display: none; }

@media screen and (max-width: 600px) { .modal-linkButton br { display: block; } }

.modal-linkButton-green { background: #88c672; }

.modal-linkButton-green:hover { background: rgba(136, 198, 114, 0.7); }

.modal-linkButton-orange { background: #e49061; }

.modal-linkButton-orange:hover { background: rgba(228, 144, 97, 0.7); }

/*.modal-closeButton { position: relative; float: right; display: block; margin-right: 10px; text-indent: -9999px; width: 34px; height: 34px; cursor: pointer; }*/
.modal-closeButton { float: right; display: block; margin-right: 10px; position:fixed; top: 30px; right: 20px; text-indent: -9999px; width: 34px; height: 34px; cursor: pointer; z-index: 9999; }

.modal-closeButton:before { display: block; position: absolute; content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; width: 42px; height: 1px; background: #666666; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.modal-closeButton:after { display: block; position: absolute; content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; width: 42px; height: 1px; background: #666666; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.modal-margin { margin-bottom: 40px; }

@media screen and (max-width: 820px) { .modal-margin { margin-bottom: 20px; } }

.loading { position: fixed; top: 0px; left: 0px; width: 100%; height: 120%; padding-top: 20%; background: #b97db3; box-sizing: border-box; color: #fff; text-align: center; z-index: 9999; }

.loading-logo { width: 85px; margin: 0px auto 10px auto; }

.loading-bar { width: 93px; margin: 0px auto; }