/* --------------------------------------------------------------------------------
Media Query
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
flex and CSS3
----------------------------------------------------------------------------------- */
.pp_social {
  display: none !important; }

@media screen and (min-width: 641px) {
  .headerRightSp {
    display: none; }

  .footerLinkSp {
    display: none; }

  br.sp {
    display: none; }

  .planCategorySpBlock {
    display: none; }

  #spMega {
    display: none; }

  body {
    padding: 185px 0px 0px 0px; }

  /* page-top
  ----------------------------------------------------------------- */
  #page-top {
    position: fixed;
    bottom: 34px;
    right: 16px;
    font-size: 77%;
    z-index: 99999; }

  #page-top a {
    width: 107px;
    height: 107px;
    display: block;
    background: url(../images/page_top.png) no-repeat !important; }

  #page-top a:hover {
    text-decoration: none; }

  /* coverHeader 
  ----------------------------------------- */
  #coverHeader {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999999999;
    width: 100%;
    transition: .3s;
    background: #fff; }

  /* global Navigation
  ------------------------------------------ */
  #globalNav {
    width: 100%;
    max-width: 1280px;
    min-width: 1000px;
    margin: 0px auto; }

  #globalNav nav ul {
    overflow: hidden; }

  #globalNav nav ul li {
    display: block;
    box-sizing: border-box;
    width: 33%;
    border: 1px solid #fff;
    float: left; }

  #globalNav nav ul li a {
    display: block;
    text-align: center;
    padding: 13px 0px 13px 0px;
    font-size: 20px;
    color: #000;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background: #F2F2F2; }

  #globalNav nav ul li a span.bizSmall {
    font-size: 18px; }

  #globalNav nav ul li a:hover {
    text-decoration: none;
    color: #00AAFF; }

  #globalNav nav ul li a img {
    height: 18px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle; }

  #globalNav nav ul li a.active {
    background: #00AAFF;
    color: #fff; } }
@media screen and (min-width: 641px) and (max-width: 1105px) {
  #globalNav nav ul li a {
    font-size: 17px; }

  #globalNav nav ul li a span.bizSmall {
    font-size: 14px; } }
@media screen and (min-width: 641px) {
  /* header
  ------------------------------------------ */
  header {
    width: 100%;
    max-width: 1280px;
    min-width: 1000px;
    margin: 0px auto;
    padding: 15px 0px 0px 0px;
    overflow: hidden; }

  header .headerLeft {
    width: 32.81%;
    min-width: 420px;
    height: auto;
    float: left; }

  .headerLeft .logo {
    width: 77.14%;
    float: left;
    margin-right: 2.3%; }

  .headerLeft .logo img {
    width: 100%;
    height: auto; }

  .headerLeft .bestrate {
    width: 16.42%;
    float: left; }

  .headerLeft .bestrate img {
    width: 100%;
    height: auto; }

  header .headerRight {
    /*width:53.12%;*/
    width: 63.12%;
    min-width: 680px;
    padding: 7px 0px 0px 0px;
    float: right; }

  .headerRight .tel {
    width: 30.82%;
    float: right; }

  .headerRight .tel img {
    width: 100%;
    height: auto;
    vertical-align: middle; }

  .headerRight ul {
    display: block;
    width: 69.1%;
    float: left;
    overflow: hidden; }

  .headerRight ul li {
    width: 23.5%;
    margin-right: 1.47%;
    float: left;
    position: relative; }

  .headerRight ul li a {
    display: block;
    text-align: center;
    border: 1px solid #dedede;
    padding: 8px 0px;
    font-size: 13px; }

  .headerRight ul li a img {
    height: 16px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle; }

  .headerRight ul li:nth-of-type(4) a {
    background: url(../images/icon_link_btm_black.png) 95% center no-repeat;
    background-size: 6px auto; }

  .headerRight ul li ul {
    display: none;
    position: fixed;
    width: 124px;
    z-index: 9999999999; }

  .headerRight ul li ul li {
    width: 100%;
    float: none;
    background: #000; }

  .headerRight ul li ul li a {
    background: #000 url(../images/icon_link_triangle_white.png) 97% center no-repeat;
    background-size: 6px auto;
    color: #fff; } }
@media screen and (min-width: 641px) and (max-width: 1160px) {
  header .headerLeft {
    width: 30.81%;
    min-width: auto;
    height: auto;
    float: left; }

  .headerLeft .logo {
    width: 77.14%;
    float: left;
    margin-right: 2.3%; }

  .headerLeft .logo img {
    width: 100%;
    height: auto; }

  .headerLeft .bestrate {
    width: 16.42%;
    float: left; } }
@media screen and (min-width: 641px) {
  /* nav.gnav
  ------------------------------------------ */
  nav.gnav {
    width: 100%;
    max-width: 1280px;
    min-width: 1000px;
    margin: 0px auto;
    padding: 15px 0px 0px 0px;
    position: relative;
    z-index: 9999999; }

  nav.gnav ul {
    display: block;
    width: 85.15%;
    float: left;
    overflow: hidden; }

  nav.gnav ul li {
    display: block;
    /*width:14.2857%;*/
    width: 12.5%;
    height: auto;
    float: left;
    border-right: 1px solid #ececec;
    box-sizing: border-box; }

  nav.gnav ul li:first-child {
    border-left: 1px solid #ececec; }

  nav.gnav ul li a {
    display: block;
    font-size: 16px;
    padding: 10px 0px;
    text-align: center; }

  nav.gnav ul li a:hover {
    text-decoration: none; }

  nav.gnav .search {
    width: 14.06%;
    height: auto;
    float: right; }

  nav.gnav .search a {
    display: block;
    padding: 10px 0px;
    text-align: center;
    background: #FF8A00;
    color: #fff;
    font-size: 16px; }

  nav.gnav .search a img {
    height: 18px;
    width: auto;
    margin-right: 6px;
    vertical-align: baseline; }

  /* MegaMenu
  ------------------------------------------ */
  .acdMegaMenu {
    display: none; }

  .acdMegaMenu {
    width: 100%;
    height: auto;
    padding: 0px 0px 0px 0px;
    margin-top: 0px;
    background: #00AAFF;
    position: absolute;
    left: 1px;
    top: 58px;
    z-index: 9999; }

  .acdMegaMenu .acdMegaBlock {
    position: relative;
    width: 98%;
    height: auto;
    margin: 0px auto 0px auto;
    padding: 15px 15px 22px 15px;
    overflow: hidden;
    background: fff;
    box-sizing: border-box; }

  .acdMegaLinks a {
    /*color:#fff;*/
    padding: 0px 0px 0px 0px !important; }

  .acdMegaLinks .topLink {
    text-align: left;
    padding: 0px 0px 12px 0px; }

  .acdMegaLinks .topLink a {
    display: inline-block;
    background: none !important;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important; }

  .acdMegaLinks .subLink a {
    color: #fff !important; }

  .acdMegaLinks .topLink a img {
    height: 0.85em;
    width: auto;
    margin-right: 6px; }

  .acdMegaLinks .subLink {
    text-align: left; }

  .acdMegaLinks .subLink a {
    display: inline-block;
    background: none !important;
    text-decoration: underline;
    font-size: 14px;
    font-weight: bold; }

  .acdMegaLinks .subLink a img {
    height: 0.85em;
    width: auto;
    margin-right: 6px; }

  .acdMegaLinks ul {
    width: 100% !important;
    overflow: hidden;
    border: none !important;
    padding: 0px 0px 20px 0px; }

  .acdMegaLinks ul li {
    display: block;
    float: left;
    border: none !important; }

  .acdMegaLinks ul li:last-child {
    margin-right: 0px !important; }

  .acdMegaLinks ul li figure {
    width: 100%;
    height: auto;
    line-height: 0; }

  .acdMegaLinks ul li figure img {
    width: 100%;
    max-width: 290px;
    height: auto; }

  .acdMegaLinks ul.megaPlan li {
    /*width:23.5%;
    height:auto;
    margin-right:2%;*/
    width: 290px;
    height: auto;
    margin-right: 21px; }

  .acdMegaLinks ul.megaRoom li {
    width: 15%;
    height: auto;
    margin-right: 2%; }

  .acdMegaLinks ul.megaRoom li a {
    font-size: 12px !important; }

  .acdMegaLinks ul.megaSpring li {
    width: 290px;
    height: auto;
    margin-right: 21px; }

  .acdMegaLinks ul.megaBanquet li {
    width: 290px;
    height: auto;
    margin-right: 21px; }

  .acdMegaLinks ul.megaSightseeing li {
    width: 18%;
    height: auto;
    margin-right: 2.5%; }

  .acdMegaLinks ul.megaRestaurant li {
    /*width:15%;
    
    height:auto;
    margin-right:2%;*/
    width: 18%;
    height: auto;
    margin-right: 2.5%; }

  .bizLinkColor a {
    color: #FF5F01 !important; }

  .acdMegaLinks ul li a.link, .acdMegaLinks .bannerLink a.link {
    display: block;
    padding: 3px 8px !important;
    font-size: 13px;
    background: #f7f7f7 !important;
    text-align: left; }

  .acdMegaLinks ul li a.link img, .acdMegaLinks .bannerLink a.link img {
    width: 8px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle; }

  .acdMegaLinks .bannerLink {
    clear: both;
    width: 40%;
    border-top: 1px dotted #fff;
    padding: 12px 0px 0px 0px; }

  .acdMegaLinks .bannerLink figure {
    width: 100%;
    height: auto;
    line-height: 0; }

  .acdMegaLinks .bannerLink figure img {
    width: 100%;
    height: auto; }

  /* page
  ------------------------------------------ */
  #page {
    width: 100%;
    max-width: 1280px;
    min-width: 1000px;
    margin: 0px auto;
    overflow: hidden;
    padding: 0px 0px 0px 0px; }

  .pan {
    padding: 0px 0px 30px 0px;
    font-size: 13px; }

  /* mainVisual
  ------------------------------------------ */
  .mainVisualPage {
    width: 100%;
    max-width: 1460px;
    min-width: 1120px;
    margin: 0px auto 30px auto;
    position: relative; }

  .mainVisualPage figure {
    position: relative; }

  .mainVisualPage img {
    width: 100%;
    height: auto; }

  .mainVisualPage figure figcaption {
    display: block;
    position: absolute;
    top: 35%;
    left: 12%;
    font-size: 28px;
    color: #fff;
    text-shadow: 1px 1px 1px #000; }

  .mainVisualPage figure figcaption span {
    display: block;
    font-size: 18px;
    padding: 15px 0px 0px 0px; }

  #page #pageRight {
    width: 74.68%;
    float: right;
    padding: 0px 0px 0px 0px; }

  /* section page Title
  ---------------------------------------------- */
  section .pageTitle {
    min-height: 50px;
    border-top: 1px solid #000;
    position: relative; }

  section .pageTitle .borderBox {
    top: -26px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative; }

  section .pageTitle .borderBox h1 {
    display: inline-block;
    font-weight: bold;
    font-size: 33px;
    color: #00aaff;
    padding: 0px 15px;
    background: #fff; }

  section .pageTitle .borderBox h1 span {
    display: block;
    font-size: 11px;
    color: #ccc;
    padding: 0px 0px 0px 0px; }

  #page #pageLeft {
    width: 21.09%;
    float: left; }

  #pageLeft .pageDirectory {
    padding: 0px 0px 30px 0px; }

  .pageDirectory .directoryTitle {
    background: #00aaff;
    padding: 10px 15px;
    color: #fff;
    font-size: 18px;
    font-weight: bold; }

  .pageDirectory ul {
    padding: 8px;
    background: #f1f1f1; }

  .pageDirectory ul li {
    margin-bottom: 8px; }

  .pageDirectory ul li:last-child {
    margin-bottom: 0px; }

  .pageDirectory ul li a {
    display: block;
    padding: 10px 15px 10px 15px;
    background: #fff url(../images/icon_link_triangle_blue.png) right 15px center no-repeat;
    background-size: 8px auto; }

  .pageDirectory ul li.acdBox ul {
    padding: 0;
    background: #f1f1f1; }

  .pageDirectory ul li.acdBox ul li {
    margin-bottom: 0px;
    padding: 0 15px;
    text-indent: 1em;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

  .pageDirectory ul li.acdBox ul li a {
    display: block;
    padding: 10px 0;
    background: #fff url(../images/ico_link_arrow_block.png) left center no-repeat;
    background-size: 5px auto;
    border-top: 1px solid #d9d9d9; }

  /* left.welcome */
  #pageLeft .welcome {
    width: 100%;
    min-height: 252px;
    padding: 0px 0px 25px 0px;
    position: relative; }

  #pageLeft .welcome figure {
    display: block;
    width: 100%;
    height: auto;
    position: absolute; }

  #pageLeft .welcome figure.underImg {
    top: 0px;
    left: 0px; }

  #pageLeft .welcome figure.overImg {
    top: 0px;
    left: 0px; }

  #pageLeft .welcome figure.overImg img {
    width: 297px;
    height: auto; }

  #pageLeft .welcome img.overImg {
    position: absolute;
    left: 0px;
    top: 0px;
    max-width: 298px;
    /*width:105%;*/
    height: auto; }

  /* left . plan */
  #pageLeft .planCategory {
    box-sizing: border-box;
    padding: 7px 7px 2px 7px;
    background: #f1f1f1; }

  #pageLeft .planCategory dl dt {
    display: block;
    color: #00AAFF;
    font-weight: bold;
    font-size: 15px;
    padding: 13px;
    cursor: pointer;
    background: #fff; }

  #pageLeft .planCategory dl dt span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/icon_openclose_blue.png) center 0px no-repeat;
    background-size: 24px 48px;
    float: right; }

  #pageLeft .planCategory dl dt span.close {
    background: url(../images/icon_openclose_blue.png) center -24px no-repeat;
    background-size: 24px 48px; }

  #pageLeft .planCategory dl dd {
    padding: 3px; }

  #pageLeft .planCategory dl dd ul {
    padding: 3px 0px 0px 0px; }

  #pageLeft .planCategory dl dd ul li {
    background: #fff;
    margin-bottom: 6px; }

  #pageLeft .planCategory dl dd ul li a {
    display: block;
    padding: 11px 15px; }

  #pageLeft .planCategory dl dd ul li a span {
    display: inline-block;
    width: 30px;
    text-align: center;
    margin-right: 10px; }

  #pageLeft .planCategory dl dd ul li a img {
    height: 23px;
    width: auto;
    vertical-align: middle; }

  /* pageBanner */
  #pageLeft .pageBanner {
    padding: 12px 0px 0px 0px; }

  .pageBanner .bannerSet {
    padding: 26px 0px 0px 0px; }

  .pageBanner span.category {
    display: block;
    font-size: 18px;
    padding: 0px 0px 3px 35px;
    margin: 0px 0px 13px 0px;
    border-bottom: 2px solid #ff8a00;
    background: url(../images/icon_triangle_btm_double_orange.png) 10px center no-repeat;
    background-size: 15px auto; }

  .pageBanner .bannerSet ul li {
    margin-bottom: 9px; }

  .pageBanner .bannerSet ul li img {
    max-width: 100%;
    height: auto; }

  /* footer
  ------------------------------------------ */
  footer {
    width: 100%; }

  footer .snsBox {
    width: 100%;
    padding: 125px 0px 65px 0px;
    background: url(../images/footer_bg_sand.jpg) center top no-repeat; }

  footer .snsBox p.snsTitle {
    text-align: center;
    padding: 0px 0px 15px 0px; }

  footer .snsBox ul {
    display: block;
    max-width: 1280px;
    min-width: 1000px;
    margin: 0px auto;
    text-align: center; }

  footer .snsBox ul li {
    display: inline-block;
    margin: 0px 15px; }

  footer .footerLink {
    max-width: 1280px;
    min-width: 1000px;
    margin: 0px auto;
    text-align: center;
    padding: 0px 0px 30px 0px; }

  footer .footerLink ul {
    display: block;
    text-align: center;
    padding: 0px 0px 10px 0px; }

  footer .footerLink ul li {
    display: inline-block;
    padding: 0px 10px;
    border-right: 1px solid #ccc;
    font-size: 12px; }

  footer .footerLink ul li:last-child {
    border-right: none; }

  footer .footerLink ul li.brLi {
    clear: both; }

  footer .footer {
    width: 100%;
    height: auto;
    background: #00AAFF;
    padding: 30px 0px 40px 0px; }

  .footer .footerBlock {
    display: block;
    max-width: 1000px;
    margin: 0px auto;
    overflow: hidden; }

  .footerBlock .footerLogo {
    width: 41.10%;
    float: left; }

  .footerLogo img {
    max-width: 100%;
    height: auto; }

  .footerBlock address {
    display: block;
    color: #fff;
    width: 55%;
    float: right;
    font-size: 12px;
    line-height: 1.65em;
    padding: 12px 0px 0px 0px; }

  footer .copyright {
    padding: 15px 0px;
    text-align: center;
    color: #00AAFF;
    font-size: 12px;
    font-weight: bold; } }
@media screen and (max-width: 1224px) {
  .acdMegaLinks ul.megaPlan li {
    width: 23.5%;
    height: auto;
    margin-right: 2%; }

  .acdMegaLinks ul.megaRoom li {
    width: 23.5%;
    height: auto;
    margin-right: 2%; }

  .acdMegaLinks ul.megaSpring li {
    width: 23.5%;
    height: auto;
    margin-right: 2%; }

  .acdMegaLinks ul.megaBanquet li {
    width: 23.5%;
    height: auto;
    margin-right: 2%; } }
/* -------------------------------------------------------------------------------- 
-----------------------------------------------------------------------------------

SP SmartPhone Css

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  #globalNav {
    display: none; }

  .headerRight {
    display: none; }

  nav.gnav {
    display: none !important; }

  .acdMegaMenu {
    display: none; }

  #page #pageLeft {
    display: none; }

  footer .footerLink {
    display: none; }

  /* page-top
  ----------------------------------------------------------------- */
  #page-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
    font-size: 77%;
    z-index: 99999; }

  #page-top a {
    width: 52px;
    height: 52px;
    display: block;
    background: url(../images/page_top.png) no-repeat !important;
    background-size: 100% auto !important; }

  #page-top a:hover {
    text-decoration: none; }

  /* SpMega
  --------------------------------------------------- */
  #spMega {
    position: fixed;
    top: 0px;
    right: -100%;
    z-index: 999999999 !important;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    /*background:rgba(0,0,0,0.9);*/
    overflow: hidden;
    overflow-y: scroll; }

  #spMega #closeArea {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -2; }

  #spMega #megaBlock {
    width: 84.73%;
    position: relative;
    float: right;
    z-index: 999999; }

  #spMega #megaBlock .close {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 20px;
    height: auto; } }
  @media screen and (max-width: 640px) and (max-width: 375px) {
    #spMega #megaBlock .close {
      top: 13px;
      right: 13px;
      width: 18px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #spMega #megaBlock .close {
      top: 8px;
      right: 8px;
      width: 18px; } }

@media screen and (max-width: 640px) {
  #spMega #megaBlock .close img {
    width: 100%;
    height: auto; }

  #megaBlock figure {
    width: 100%;
    height: auto;
    line-height: 0; }

  #megaBlock figure img {
    width: 100%;
    height: auto; }

  #megaBlock ul {
    width: 100%;
    padding: 50px 0px 0px 0px;
    /*background:rgba(255,255,255,0.85);*/ } }
  @media screen and (max-width: 640px) and (max-width: 375px) {
    #megaBlock ul {
      padding-top: 35px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul {
      padding-top: 24px; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li {
    display: block;
    width: 100%;
    border-bottom: 2px solid #f7f7f7; }

  #megaBlock ul li a {
    display: block;
    padding: 12px 30px 12px 50px;
    font-size: 15px;
    font-weight: bold;
    background: url(../images/icon_link_right_black.png) 94% center no-repeat;
    background-size: 10px auto; } }
  @media screen and (max-width: 640px) and (max-width: 375px) {
    #megaBlock ul li a {
      padding: 10px 30px 10px 50px;
      font-size: 15px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li a {
      padding: 7px 25px 7px 35px;
      font-size: 12px;
      background: url(../images/icon_link_right_black.png) 94% center no-repeat;
      background-size: 7px auto;
      font-weight: normal; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavPlan {
    background: #fff url(../images/icon_calendar_blue.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavPlan {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavRoom {
    background: #fff url(../images/icon_cat_room_blue.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavRoom {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavRestaurant {
    background: #fff url(../images/icon_cat_restaurant_blue.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavRestaurant {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavSpa {
    background: #fff url(../images/icon_cat_spa_blue.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavSpa {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavBanquet {
    background: #fff url(../images/icon_banquet_blue.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavBanquet {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavEvent {
    background: #fff url(../images/icon_cat_event_blue.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavEvent {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavSightseeing {
    background: #fff url("../images/icon_cat_sightseeing_blue.png") 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavSightseeing {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavBiz {
    background: #235aaf url(../images/icon_biz_white.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavBiz {
      background-size: 12px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavBiz a {
    background: url(../images/icon_link_right_white.png) 94% center no-repeat;
    background-size: 10px auto;
    color: #fff; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavBiz a {
      background-size: 8px auto;
      font-size: 12px; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavBiz a img {
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin-left: 5px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavBiz a img {
      height: 0.75em; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavKua {
    background: #00aaff url(../images/icon_shower.png) 15px center no-repeat;
    background-size: 20px auto; } }
  @media screen and (max-width: 640px) and (max-width: 375px) {
    #megaBlock ul li.spNavKua {
      font-size: 14px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavKua {
      background-size: 12px auto;
      font-size: 12px; } }

@media screen and (max-width: 640px) {
  #megaBlock ul li.spNavKua a {
    color: #fff;
    background: url(../images/icon_link_right_white.png) 94% center no-repeat;
    background-size: 10px auto; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul li.spNavKua a {
      background-size: 8px auto; } }

@media screen and (max-width: 640px) {
  #megaBlock ul.subNavi {
    width: 100%;
    background: #f1f1f1;
    overflow: hidden;
    padding: 4px 5px;
    box-sizing: border-box; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul.subNavi {
      padding: 2px 5px; } }

@media screen and (max-width: 640px) {
  #megaBlock ul.subNavi li {
    display: block;
    width: 49%;
    border-bottom: none;
    float: left;
    margin-right: 2%; }

  #megaBlock ul.subNavi li:last-child {
    margin-right: 0px; }

  #megaBlock ul.subNavi li a {
    font-weight: normal;
    display: block;
    padding: 13px 0px 13px 0px;
    font-size: 14px;
    background: #fff;
    background-size: 10px auto;
    text-align: center;
    font-weight: bold; } }
  @media screen and (max-width: 640px) and (max-width: 375px) {
    #megaBlock ul.subNavi li a {
      padding: 10px 0px 10px 0px;
      font-size: 14px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul.subNavi li a {
      padding: 3px 0px 3px 0px;
      font-size: 12px;
      font-weight: normal; } }

@media screen and (max-width: 640px) {
  #megaBlock ul.subNavi li a img {
    height: 16px;
    width: auto;
    margin-right: 4px;
    vertical-align: middle; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock ul.subNavi li a img {
      height: 12px; } }

@media screen and (max-width: 640px) {
  #megaBlock .spLanguage {
    display: block; }

  #megaBlock .spLanguage ul {
    width: 100%;
    background: #f1f1f1;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box; }

  #megaBlock .spLanguage ul li {
    width: 32%;
    padding: 0px 0px;
    text-align: center;
    background: #000;
    margin-right: 2%;
    float: left; }

  #megaBlock .spLanguage ul li:last-child {
    margin-right: 0px; }

  #megaBlock .spLanguage ul li a {
    display: block;
    padding: 5px 0px;
    min-height: 14px;
    font-size: 11px;
    color: #fff;
    font-weight: normal;
    background: url(../images/icon_link_triangle_white.png) 97% center no-repeat;
    background-size: 6px auto; } }
  @media screen and (max-width: 640px) and (max-width: 375px) {
    #megaBlock .spLanguage ul li a {
      padding: 3px 0px;
      font-size: 12px; } }
  @media screen and (max-width: 640px) and (max-width: 320px) {
    #megaBlock .spLanguage ul li a {
      padding: 3px 0px;
      font-size: 9px; } }

@media screen and (max-width: 640px) {
  /* header
  ------------------------------------------ */
  header {
    width: 100%;
    margin: 0px auto;
    padding: 10px 2% 10px 2%;
    overflow: hidden;
    box-sizing: border-box;
    position: fixed;
    z-index: 99999999;
    background: #fff;
    top: 0px;
    left: 0px; }

  header .headerLeft {
    width: 52.96%;
    height: auto;
    float: left; }

  .headerLeft .logo {
    width: 100%; }

  .headerLeft .logo img {
    width: 100%;
    height: auto; }

  .headerLeft .bestrate {
    display: none; }

  header .headerRightSp {
    width: 42.59%;
    float: right;
    overflow: hidden; }

  .headerRightSp a {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    display: block;
    padding: 5px 0px;
    text-align: center;
    line-height: 1.2em; }

  .headerRightSp a img {
    height: 13px;
    width: auto; }

  .headerRightSp .menu {
    width: 48.78%;
    float: right; }

  .headerRightSp .planSearch {
    width: 48.78%;
    float: left; }

  .planSearch a {
    background: #ff8a00; }

  .headerRightSp .menu a {
    background: #333; }

  /* page
  ------------------------------------------ */
  #page {
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
    padding: 0px 0px 0px 0px; }

  .pan {
    padding: 10px 2% 34px 2%;
    font-size: 12px; }

  /* mainVisual
  ------------------------------------------ */
  .mainVisualPage {
    width: 100%;
    margin: 0px auto 0px auto;
    position: relative; }

  .mainVisualPage figure {
    position: relative; }

  .mainVisualPage img {
    width: 100%;
    height: auto; }

  .mainVisualPage figure figcaption {
    display: none; }

  #page #pageRight {
    width: 100%; }

  /* section page Title
  ---------------------------------------------- */
  section .pageTitle {
    height: 35px;
    border-top: 1px solid #000;
    position: relative; }

  section .pageTitle .borderBox {
    top: -18px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: absolute; }

  section .pageTitle .borderBox h1 {
    display: inline-block;
    font-weight: bold;
    font-size: 25px;
    color: #00aaff;
    padding: 0px 15px;
    background: #fff; }

  section .pageTitle .borderBox h1 span {
    display: block;
    font-size: 11px;
    color: #ccc;
    padding: 4px 0px 0px 0px; }

  /* left . plan */
  .planCategorySpBlock {
    position: relative;
    padding: 20px 0px 0px 0px; }

  .planCategorySpBlock .titleBox {
    width: 96%;
    margin: 0px auto;
    height: 2.4em;
    border-top: 1px solid #000;
    position: relative; }

  .planCategorySpBlock .borderBox {
    top: -26px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: absolute; }

  .planCategorySpBlock .titleBox h4 {
    display: inline-block;
    font-size: 18px;
    background: #fff;
    padding: 6px 20px 0px 20px; }

  .planCategorySpBlock .titleBox h4 span {
    display: block;
    font-weight: bold;
    font-size: 24px;
    padding: 4px 0px 0px 0px;
    color: #00aaff; }

  .planCategorySp {
    box-sizing: border-box;
    padding: 7px 7px 2px 7px;
    background: #f1f1f1; }

  .planCategorySp dl dt {
    display: block;
    color: #00AAFF;
    font-weight: bold;
    font-size: 15px;
    padding: 13px;
    cursor: pointer;
    background: #fff; }

  .planCategorySp dl dt span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/icon_openclose_blue.png) center 0px no-repeat;
    background-size: 24px 48px;
    float: right; }

  .planCategorySp dl dt span.close {
    background: url(../images/icon_openclose_blue.png) center -24px no-repeat;
    background-size: 24px 48px; }

  .planCategorySp dl dd {
    padding: 3px; }

  .planCategorySp dl dd ul {
    padding: 3px 0px 0px 0px; }

  .planCategorySp dl dd ul li {
    background: #fff;
    margin-bottom: 6px; }

  .planCategorySp dl dd ul li a {
    display: block;
    padding: 11px 15px;
    background: #fff url(../images/icon_link_triangle_blue.png) 97% center no-repeat;
    background-size: 10px auto; }

  .planCategorySp dl dd ul li a span {
    display: inline-block;
    width: 30px;
    text-align: center;
    margin-right: 10px; }

  .planCategorySp dl dd ul li a img {
    height: 23px;
    width: auto;
    vertical-align: middle; }

  /* footer
  ------------------------------------------ */
  footer {
    width: 100%;
    padding: 15px 0px 0px 0px; }

  footer .snsBox {
    width: 100%;
    padding: 30px 0px 10px 0px;
    background: url(../images/footer_bg_sand_sp.jpg) center top no-repeat;
    background-size: 100% auto; }

  footer .snsBox p.snsTitle {
    text-align: center;
    padding: 0px 0px 10px 0px; }

  footer .snsBox p.snsTitle img {
    width: 100%;
    height: auto; }

  footer .snsBox ul {
    display: block;
    width: 80%;
    margin: 0px auto;
    text-align: center; }

  footer .snsBox ul li {
    display: inline-block;
    margin: 0px 10px;
    width: 15%; }

  footer .snsBox ul li img {
    width: 100%;
    height: auto; }

  .footerLinkSp {
    width: 100%;
    background: #f1f1f1;
    padding: 10px;
    box-sizing: border-box; }

  .footerLinkSp ul {
    overflow: hidden; }

  .footerLinkSp ul li {
    display: block;
    width: 49%;
    float: left;
    margin-right: 2%;
    margin-bottom: 8px; }

  .footerLinkSp ul li:nth-of-type(2n) {
    margin-right: 0px; }

  .footerLinkSp ul li a {
    display: block;
    padding: 9px 10px;
    color: #000;
    background: #fff;
    font-size: 12px;
    vertical-align: middle; }

  .footerLinkSp ul li a img {
    width: 15px;
    height: auto;
    margin-right: 5px; }

  footer .footer {
    width: 100%;
    height: auto;
    background: #00AAFF;
    padding: 12px 10px 20px 10px;
    box-sizing: border-box; }

  .footer .footerBlock {
    display: block;
    margin: 0px auto;
    overflow: hidden; }

  .footerBlock .footerLogo {
    width: 65.2%; }

  .footerLogo img {
    width: 100%;
    height: auto; }

  .footerBlock address {
    display: block;
    color: #fff;
    width: 100%;
    font-size: 12px;
    line-height: 1.65em;
    padding: 5px 0px 0px 0px; }

  footer .copyright {
    padding: 15px 0px;
    text-align: center;
    color: #00AAFF;
    font-size: 10px;
    font-weight: bold; } }