@charset "UTF-8";
img {
  font-size: 10px;
  line-height: 1;
  vertical-align: top;
  border: 0;
}

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

a, button {
  -webkit-tap-highlight-color: transparent;
}

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

body {
  -webkit-text-size-adjust: 100%;
}

input, textarea, select, button {
  outline: none;
  font-weight: inherit;
  font-style: inherit;
}

a[bhref] {
  pointer-events: none;
}

main {
  display: block;
}

dl {
  margin: 0;
}

body > span[id^="_cmp"] {
  left: -9999px;
}

h1 {
  font-weight: 700;
}

a {
  color: inherit;
}

#font-al, #text-d, .normal-heading h2, .introduction > h1, .text-d, #text-en, #trivia_menu .subtitle, #trivia_about .subtitle, #trivia_link .subtitle, #trivia_top_faq > h1 .subtitle, .faq-lead .subtitle, .text-en, .faq-article .answer-link .subtitle, #language_menu .subtitle, .faq-howtouse .subtitle,
.faq-post-link .subtitle {
  font-family: Raleway, Arial, sans-serif;
  font-weight: 300;
}

#font-a {
  font-family: Raleway, Arial, sans-serif;
  font-weight: 400;
}

#font-ab {
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
}

#font-r, #text-c, .introduction .lead, #top-feature > p, #top-myfavorite p, #top-custom > p, #program-post-body, .spot-post-body, #search-container #search-input-container input, .current-query p, #user-information p, #trivias .max-image .body, #trivia_about p, .trivia-article .body, .faq-lead, #login-registration-main form label, #login-registration-main .to-another, #login-registration-main .forgot-password, #manual-images-attention, #manual-main .main-section > h1 + p, #manual-main .text p, #manual-main .text dd, #manual-main .last-attention p, #beppu-lead, #beppu-dl dd, #beppu-access > section p, .text-c, #text-g, #program-pending-message, .spot-post-title h2, #login-registration-main .error, .text-g, #text-h, .spot-archive p, .faq-article .question, .faq-article .answer, #footer-links, .spot-post-table, #login-registration-main form .attention, .text-h, body, #search-ui .mode-section label, #copyright {
  font-family: 'FOT-ロダン Pro M', Meiryo, sans-serif;
  font-weight: 400;
}

#font-rdb, #text-a, .normal-heading h1, #program-post-title, .spot-post-lead, .spot-post-title h1, .current-query h1, .text-a, #text-b, .program-article h1, .spot-archive h1, .max-image .lead, #program-spot-list > p, .program-spot-list-article h1, .spot-post-relation h1, .spot-post-relation p, #trivia-category-select p, #manual-main .image p, #manual-main .text dt, .text-b, #text-e, #top-custom > p a, #program-custom-to-manual, #user-information h1, #user-program-buttons, #trivia_top_faq > h1, #manual-loggedin-new-program, #beppu-dl dt, #beppu-access > h1, #beppu-access > section > h1, .text-e, #text-f, .text-f, #search-ui .mode-select button, #search-ui .mode-section > section > h1, #search-ui .mode-section > section > section > h1, #search-ui .submit, #search-ui .all, #language_menu, #trivia_menu, #program-post-body strong, .spot-post-body strong, #search-container #search-submit-container button, #trivia_link, .trivia-article .body strong, .trivia-article .animate-container .more, #login-registration-main form button, #manual-main .main-section > h1, #manual-main .sub-section > h1 {
  font-family: 'FOT-ロダン Pro DB', Meiryo, sans-serif;
  font-weight: 400;
}

#font-rb, #program-control {
  font-family: 'FOT-ロダン Pro B', Meiryo, sans-serif;
  font-weight: 400;
}

#text-a, .normal-heading h1, #program-post-title, .spot-post-lead, .spot-post-title h1, .current-query h1, .text-a {
  font-size: 21px;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #410000;
  font-weight: 400;
}

#text-b, .program-article h1, .spot-archive h1, .max-image .lead, #program-spot-list > p, .program-spot-list-article h1, .spot-post-relation h1, .spot-post-relation p, #trivia-category-select p, #manual-main .image p, #manual-main .text dt, .text-b {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.69;
  color: #410000;
  font-weight: 400;
}

#text-c, .introduction .lead, #top-feature > p, #top-myfavorite p, #top-custom > p, #program-post-body, .spot-post-body, #search-container #search-input-container input, .current-query p, #user-information p, #trivias .max-image .body, #trivia_about p, .trivia-article .body, .faq-lead, #login-registration-main form label, #login-registration-main .to-another, #login-registration-main .forgot-password, #manual-images-attention, #manual-main .main-section > h1 + p, #manual-main .text p, #manual-main .text dd, #manual-main .last-attention p, #beppu-lead, #beppu-dl dd, #beppu-access > section p, .text-c {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #410000;
  font-weight: 400;
}

#text-d, .normal-heading h2, .introduction > h1, .text-d {
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #DC4053;
}

#text-e, #top-custom > p a, #program-custom-to-manual, #user-information h1, #user-program-buttons, #trivia_top_faq > h1, #manual-loggedin-new-program, #beppu-dl dt, #beppu-access > h1, #beppu-access > section > h1, .text-e {
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #410000;
  font-weight: 400;
}

#text-f, .text-f {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #DC4053;
  font-weight: 400;
}

#text-g, #program-pending-message, .spot-post-title h2, #login-registration-main .error, .text-g {
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
  color: #410000;
  font-weight: 400;
}

#text-h, .spot-archive p, .faq-article .question, .faq-article .answer, #footer-links, .spot-post-table, #login-registration-main form .attention, .text-h {
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 2;
  color: #410000;
  font-weight: 400;
}

#text-en, #trivia_menu .subtitle, #trivia_about .subtitle, #trivia_link .subtitle, #trivia_top_faq > h1 .subtitle, .faq-lead .subtitle, .text-en {
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #DB4053;
}

@media (max-width: 635px) {
  #text-a, .normal-heading h1, #program-post-title, .spot-post-lead, .spot-post-title h1, .current-query h1, .text-a {
    font-size: 20px;
  }

  #text-b, .program-article h1, .spot-archive h1, .max-image .lead, #program-spot-list > p, .program-spot-list-article h1, .spot-post-relation h1, .spot-post-relation p, #trivia-category-select p, #manual-main .image p, #manual-main .text dt, .text-b {
    font-size: 13px;
  }

  #text-c, .introduction .lead, #top-feature > p, #top-myfavorite p, #top-custom > p, #program-post-body, .spot-post-body, #search-container #search-input-container input, .current-query p, #user-information p, #trivias .max-image .body, #trivia_about p, .trivia-article .body, .faq-lead, #login-registration-main form label, #login-registration-main .to-another, #login-registration-main .forgot-password, #manual-images-attention, #manual-main .main-section > h1 + p, #manual-main .text p, #manual-main .text dd, #manual-main .last-attention p, #beppu-lead, #beppu-dl dd, #beppu-access > section p, .text-c {
    font-size: 13px;
    line-height: 1.85;
  }

  #text-d, .normal-heading h2, .introduction > h1, .text-d {
    font-size: 11px;
  }

  #text-e, #top-custom > p a, #program-custom-to-manual, #user-information h1, #user-program-buttons, #trivia_top_faq > h1, #manual-loggedin-new-program, #beppu-dl dt, #beppu-access > h1, #beppu-access > section > h1, .text-e {
    font-size: 16px;
    line-height: 1.5;
  }

  #text-f, .text-f {
    font-size: 14px;
    line-height: 1.6;
  }

  #text-g, #program-pending-message, .spot-post-title h2, #login-registration-main .error, .text-g {
    font-size: 11px;
    line-height: 2.1;
  }

  #text-h, .spot-archive p, .faq-article .question, .faq-article .answer, #footer-links, .spot-post-table, #login-registration-main form .attention, .text-h {
    font-size: 12px;
    line-height: 1.7;
  }

  #text-en, #trivia_menu .subtitle, #trivia_about .subtitle, #trivia_link .subtitle, #trivia_top_faq > h1 .subtitle, .faq-lead .subtitle, .text-en {
    font-size: 11px;
  }
}
html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #410000;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
}

#page {
  position: relative;
  z-index: 1;
  width: 100%;
}

#gotopagetop {
  position: fixed;
  right: 3%;
  bottom: 20px;
  width: 40px;
  height: 40px;
  margin: 0;
}
#gotopagetop a {
  display: block;
  width: 100%;
  height: 100%;
  background: 0 0 no-repeat;
  background-size: 100% auto;
}
#gotopagetop a img {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
#gotopagetop a:hover img {
  opacity: 0;
}

.normal-heading {
  text-align: center;
}
.normal-heading h1 {
  margin: 0;
}
.normal-heading h2 {
  margin: -3px 0 0;
}

.program-archive {
  max-width: 1000px;
  margin: 0 auto;
}
.program-archive:after {
  content: '';
  display: block;
  clear: both;
}
.program-archive .normal-heading {
  margin-bottom: 30px;
}

.program-article {
  background-color: white;
}
@media (min-width: 636px) {
  .program-article {
    width: 44.5%;
    display: inline-block;
    vertical-align: top;
  }
  .program-article:nth-of-type(2n+1) {
    margin-left: 3%;
  }
  .program-article:nth-of-type(2n+2) {
    margin-right: 3%;
    margin-left: 5%;
  }
  .program-article:nth-of-type(n+3) {
    margin-top: 50px;
  }
}
@media (max-width: 635px) {
  .program-article {
    width: 94%;
    margin: 0 auto;
  }
  .program-article + .program-article {
    margin-top: 50px;
  }
}
.program-article a:hover .screen:after {
  opacity: 1;
}
.program-article a:hover .transformer {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.program-article .screen {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65.42%;
  overflow: hidden;
}
.program-article .screen:after {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
}
.program-article .transformer {
  -moz-transition: -moz-transform 200ms ease;
  -o-transition: -o-transform 200ms ease;
  -webkit-transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: center center no-repeat;
  background-size: cover;
}
.program-article img {
  display: none;
}
.program-article h1 {
  margin: 0;
  padding: 10px 9px;
}

.toggle-favorite {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  position: relative;
  width: 116px;
  height: 40px;
  background: url(/i/common/favorite-off.svg) 0 0 no-repeat;
  background-size: 116px 40px;
  overflow: hidden;
  text-indent: 110%;
}
.toggle-favorite:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  display: block;
  width: 116px;
  height: 40px;
  margin: 0 10px 10px 0;
  background: url(/i/common/favorite-on.svg) 0 0 no-repeat;
  background-size: 116px 40px;
  visibility: hidden;
}
.toggle-favorite.active:before {
  visibility: visible;
  background-position: 110% 110%;
}
.toggle-favorite.spot-archive-favorite, .toggle-favorite.spot-archive-favorite:before {
  width: 77px;
  height: 26px;
  background-size: 77px 26px;
}
@media (max-width: 635px) {
  .toggle-favorite {
    width: 65px;
    height: 22px;
    background-size: 65px 22px;
  }
  .toggle-favorite:before {
    width: 65px;
    height: 22px;
    background-size: 65px 22px;
  }
}

.spot-archive {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 26px 3% 110px;
  background-color: #f5f5f0;
}
.spot-archive article {
  display: inline-block;
  vertical-align: top;
  text-align: right;
}
.spot-archive .spot-archive-favorite {
  margin-bottom: 5px;
}
.spot-archive a {
  display: block;
  padding-bottom: 15px;
  text-align: left;
  background-color: white;
}
.spot-archive a:hover .screen:after {
  opacity: 1;
}
.spot-archive a:hover .transformer {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.spot-archive .screen {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65.42%;
  overflow: hidden;
}
.spot-archive .screen:after {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
}
.spot-archive .transformer {
  -moz-transition: -moz-transform 200ms ease, opacity 600ms ease;
  -o-transition: -o-transform 200ms ease, opacity 600ms ease;
  -webkit-transition: -webkit-transform 200ms ease, opacity 600ms ease;
  transition: transform 200ms ease, opacity 600ms ease;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: center center no-repeat;
  background-size: cover;
  opacity: 0;
}
.spot-archive .transformer.loaded {
  opacity: 1;
}
.spot-archive img {
  display: none;
}
.spot-archive h1 {
  margin: 0;
  padding: 10px 4% 0 4%;
}
.spot-archive p {
  margin: 10px 0 0;
  padding: 0 4%;
}
@media (min-width: 1016px) {
  .spot-archive > article {
    width: 29.787%;
  }
  .spot-archive > article:nth-of-type(3n+1), .spot-archive > article:nth-of-type(3n+2) {
    margin-right: 5.32%;
  }
  .spot-archive > article:nth-of-type(n+4) {
    margin-top: 30px;
  }
}
@media (min-width: 636px) and (max-width: 1015px) {
  .spot-archive > article {
    width: 47.34%;
  }
  .spot-archive > article:nth-of-type(2n+1) {
    margin-right: 5.32%;
  }
  .spot-archive > article:nth-of-type(n+3) {
    margin-top: 30px;
  }
}
@media (max-width: 635px) {
  .spot-archive {
    margin-top: 22px;
    padding: 35px 3% 67px;
  }
  .spot-archive > article {
    width: 100%;
  }
  .spot-archive > article + article {
    margin-top: 30px;
  }
}

.faq-article {
  display: inline-block;
  vertical-align: top;
  width: 27.333333%;
  height: auto !important;
  margin: 0 3% 29px;
}
.faq-article:not(.close) {
  cursor: pointer;
}
.faq-article .background-container {
  padding: 17px 0 15px;
  background-color: white;
}
.faq-article .question {
  margin: 0 16px;
}
.faq-article .question:before {
  content: url(/i/trivia/q.svg);
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 10px;
  font-size: 0;
  line-height: 0;
}
.faq-article .answer {
  display: none;
  margin: 20px 16px 0;
  border-top: 1px dashed #e6e6e6;
  padding-top: 16px;
}
.faq-article .answer:nth-of-type(1) {
  border-top: 1px solid #e6e6e6;
}
.faq-article .answer:before {
  content: url(/i/trivia/a.svg);
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 10px;
  font-size: 0;
  line-height: 0;
}
.faq-article.close .answer {
  display: block;
}
.faq-article .toggle-answer {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  display: block;
  width: 100px;
  height: 18px;
  margin: 13px 16px 0 auto;
  background: url(/i/trivia/more.svg) 0 0 no-repeat, url(/i/trivia/close.svg) 0 20px no-repeat;
  background-size: 100px 18px, 100px 18px;
  text-indent: 110%;
  overflow: hidden;
}
.faq-article.close .toggle-answer {
  background-position: 0 20px, 0 0;
}
.faq-article .answer-link {
  margin: 11px 0 0;
}
.faq-article .answer-link a {
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  position: relative;
  display: block;
  background-color: #DB4053;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
  color: white;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.faq-article .answer-link a:hover {
  background-color: #F1B3BA;
}
.faq-article .answer-link span {
  display: block;
  width: 54%;
  text-align: center;
}
.faq-article .answer-link .subtitle {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.faq-article .answer-link .subtitle br {
  display: none;
}
@media (min-width: 636px) and (max-width: 1015px) {
  .faq-article {
    width: 44%;
  }
}
@media (max-width: 635px) {
  .faq-article {
    width: 94%;
  }
  .faq-article .answer-link a {
    font-size: 14px;
  }
}

.slideshow {
  position: relative;
}
.slideshow .slideshow-item {
  -moz-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
.slideshow .slideshow-item:nth-of-type(n+2) {
  position: absolute;
  left: 0;
  top: 0;
}
.slideshow .slideshow-item:nth-of-type(n+3) {
  opacity: 0;
  visibility: hidden;
}

.max-image {
  width: 100%;
  background-color: white;
}
.max-image > a {
  display: block;
  width: 100%;
}
.max-image .image-screen {
  box-sizing: border-box;
  width: 100%;
  height: 625px;
  background: center center no-repeat;
  background-size: cover;
}
.max-image .image-screen img {
  display: none;
}
@media (max-width: 1015px) {
  .max-image .image-screen {
    height: 0;
    padding-bottom: 62.5%;
  }
}
.max-image .lead {
  margin: 0;
  background-color: white;
  overflow: hidden;
}
@media (min-width: 636px) {
  .max-image .lead {
    padding: 8px 10%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (max-width: 635px) {
  .max-image .lead {
    min-height: 43.94px;
    max-height: 43.94px;
    padding: 11px 2%;
  }
}

.introduction {
  width: 94%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 0 38px;
  background-color: #f5f5f0;
}
.introduction:after {
  content: '';
  display: block;
  clear: both;
}
.introduction > h1 {
  margin: 0;
  padding: 17px 0 28px;
  text-align: center;
}
.introduction .images .screen {
  width: 100%;
}
.introduction .images .screen + .screen {
  margin-top: 10px;
}
.introduction .images .screen img {
  width: 100%;
}
@media (min-width: 636px) {
  .introduction .images {
    float: left;
    width: 34.04%;
    margin-left: 7.4468%;
  }
  .introduction .lead {
    float: right;
    width: 45.744%;
    margin-right: 7.4468%;
    margin-top: -6px;
  }
  .introduction .lead.full {
    float: none;
    width: 85.1%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 635px) {
  .introduction {
    padding-bottom: 22px;
  }
  .introduction > h1 {
    padding: 11px 0 17px;
  }
  .introduction .images {
    width: 87.234%;
    margin: 0 auto;
  }
  .introduction .lead {
    width: 87.234%;
    margin: 14px auto 0;
  }
}

#search-ui {
  width: 94%;
  max-width: 940px;
  margin: 0 auto;
}
#search-ui .mode-select {
  -moz-transition: height 400ms ease;
  -o-transition: height 400ms ease;
  -webkit-transition: height 400ms ease;
  transition: height 400ms ease;
  position: relative;
  width: 300px;
  height: 40px;
  max-height: 400px;
  background-color: white;
  overflow: hidden;
}
#search-ui .mode-select.open {
  height: 400px;
}
#search-ui .mode-select:not(.open) button.active {
  top: 0;
}
#search-ui .mode-select button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  -moz-transition: color 200ms ease, background-color 200ms ease, top 400ms ease;
  -o-transition: color 200ms ease, background-color 200ms ease, top 400ms ease;
  -webkit-transition: color 200ms ease, background-color 200ms ease, top 400ms ease;
  transition: color 200ms ease, background-color 200ms ease, top 400ms ease;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  border: 1px solid #e6e6e6;
  padding-left: 14px;
  background-color: #f5f5f0;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: left;
  color: #410000;
}
#search-ui .mode-select button:hover {
  color: white;
  background-color: #DC4053;
}
#search-ui .mode-select button:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 38px;
  height: 38px;
  border-left: 1px solid #e6e6e6;
  background: url(/i/spot/allow.svg) left top no-repeat;
  background-size: 100%;
}
#search-ui .mode-select button[data-mode="category-onsen"] {
  top: 0px;
}
#search-ui .mode-select button[data-mode="category-gourmet"] {
  top: 45px;
}
#search-ui .mode-select button[data-mode="category-shopping"] {
  top: 90px;
}
#search-ui .mode-select button[data-mode="category-beauty"] {
  top: 135px;
}
#search-ui .mode-select button[data-mode="category-event"] {
  top: 180px;
}
#search-ui .mode-select button[data-mode="category-sightseeing"] {
  top: 225px;
}
#search-ui .mode-select button[data-mode="category-stay"] {
  top: 270px;
}
#search-ui .mode-select button[data-mode="area"] {
  top: 315px;
}
#search-ui .mode-select button[data-mode="keyword"] {
  top: 360px;
}
#search-ui .mode-select button[data-mode="search"] {
  top: 405px;
}
#search-ui .mode-section {
  height: 40px;
  margin-top: 10px;
  overflow: hidden;
}
#search-ui .mode-section.open {
  height: auto;
}
#search-ui .mode-section > section > h1 {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding-left: 14px;
  margin: 0;
  border: 1px solid #e6e6e6;
  background: #f5f5f0 url(/i/spot/allow-2.svg) right 13px top 16px no-repeat;
  background-size: 12px 6px;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 38px;
  cursor: pointer;
}
#search-ui .mode-section > section > section {
  background-color: white;
  /*
  &:after {
  	content: '';
  	display: block;
  	width: 100%; height: 1px; margin-top: -1px;
  	background-color: $gray;
  	font-size: 0; line-height: 0;
  }
  */
}
#search-ui .mode-section > section > section > h1 {
  box-sizing: border-box;
  width: 100%;
  height: 49px;
  padding-left: 14px;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 48px;
}
#search-ui .mode-section label {
  -moz-transition: background-color 200ms ease, color 200ms ease;
  -o-transition: background-color 200ms ease, color 200ms ease;
  -webkit-transition: background-color 200ms ease, color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  cursor: pointer;
}
#search-ui .mode-section label:hover > span, #search-ui .mode-section label.active > span {
  background-color: #DC4053;
  color: white;
}
#search-ui .mode-section input[type="checkbox"] {
  vertical-align: middle;
  margin: 0 3px;
  visibility: hidden;
}
#search-ui .mode-section input[type="radio"] {
  vertical-align: middle;
  margin: 0 3px;
  visibility: hidden;
}
#search-ui .mode-section label > span {
  display: block;
  margin: 5px 4px;
  border: 1px solid #E6E6E6;
  padding: 6px 0;
  background-color: #F5F5F0;
}
#search-ui .mode-section label > span > span {
  display: inline-block;
  width: 83%;
}
#search-ui .mode-section .search_input {
  box-sizing: border-box;
  width: 300px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #e6e6e6;
  background-color: #f5f5f0;
  font-size: 14px;
  letter-spacing: 0.1em;
}
@media (min-width: 636px) and (max-width: 1015px) {
  #search-ui .mode-section label {
    display: inline-block;
    vertical-align: top;
    width: 33.33333%;
  }
}
@media (min-width: 1016px) {
  #search-ui .mode-section label {
    display: inline-block;
    vertical-align: top;
    width: 25%;
  }
}
#search-ui .submit {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  cursor: pointer;
  width: 300px;
  height: 40px;
  margin-top: 10px;
  background-color: #DC4053;
  font-size: 14px;
  color: white;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
#search-ui .submit:hover {
  opacity: 0.6;
}
#search-ui .all {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  cursor: pointer;
  width: 300px;
  height: 40px;
  margin-top: 10px;
  background-color: #DC4053;
  font-size: 14px;
  color: white;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
#search-ui .all:hover {
  opacity: 0.6;
}

#trivia_menu_container {
  padding-top: 25px;
  padding-bottom: 18px;
  text-align: center;
}
@media (max-width: 635px) {
  #trivia_menu_container {
    padding-top: 14px;
    padding-bottom: 16px;
  }
}

#language_menu {
  position: relative;
  z-index: 3;
  display: inline-block;
  vertical-align: top;
  width: 300px;
  height: 40px;
  background-color: white;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 40px;
  text-align: left;
  overflow: hidden;
}
#language_menu.open {
  overflow: visible;
}
#language_menu h1 {
  -moz-transition: background-color 200ms ease, color 200ms ease;
  -o-transition: background-color 200ms ease, color 200ms ease;
  -webkit-transition: background-color 200ms ease, color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease;
  height: 40px;
  margin: 0;
  background-color: #f5f5f0;
  font-size: inherit;
  text-align: center;
  cursor: pointer;
}
#language_menu h1:hover {
  background-color: #DB4053;
  color: white;
}
#language_menu ul {
  margin: 0;
  padding: 0;
}
#language_menu li {
  list-style: none;
  border-top: 5px white solid;
}
#language_menu a {
  -moz-transition: background-color 200ms ease, color 200ms ease;
  -o-transition: background-color 200ms ease, color 200ms ease;
  -webkit-transition: background-color 200ms ease, color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease;
  position: relative;
  display: block;
  height: 40px;
  padding-left: 31px;
  background-color: #f5f5f0;
  line-height: 35px;
}
#language_menu a:hover {
  background-color: #DB4053;
  color: white;
}
#language_menu img {
  position: relative;
  top: 1px;
  vertical-align: middle;
  margin-right: 18px;
}
#language_menu a > span {
  display: inline-block;
  vertical-align: middle;
}
#language_menu .subtitle {
  -moz-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
  position: absolute;
  right: 11px;
  top: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #DB4053;
  line-height: 40px;
}
#language_menu .subtitle br {
  display: none;
}
#language_menu a:hover .subtitle {
  color: white;
}

#trivia_menu {
  position: relative;
  z-index: 2;
  display: inline-block;
  vertical-align: top;
  width: 300px;
  height: 40px;
  margin-left: 6px;
  background-color: white;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 40px;
  text-align: left;
  overflow: hidden;
}
#trivia_menu.open {
  overflow: visible;
}
#trivia_menu h1 {
  -moz-transition: background-color 200ms ease, color 200ms ease;
  -o-transition: background-color 200ms ease, color 200ms ease;
  -webkit-transition: background-color 200ms ease, color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease;
  position: relative;
  height: 40px;
  margin: 0;
  background: #f5f5f0 url(/i/common/trivia_menu_white.svg) right 16px center no-repeat;
  background-size: 20px 13px;
  font-size: inherit;
  text-align: center;
  cursor: pointer;
}
#trivia_menu h1:after {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  content: url(/i/common/trivia_menu.svg);
  position: absolute;
  right: 16px;
  top: 14px;
  display: block;
  width: 20px;
  height: 13px;
  font-size: 0;
  line-height: 0;
}
#trivia_menu h1:hover {
  background-color: #DB4053;
  color: white;
}
#trivia_menu h1:hover:after {
  opacity: 0;
}
#trivia_menu ul {
  margin: 0;
  padding: 0;
}
#trivia_menu li {
  list-style: none;
  border-top: 5px white solid;
}
#trivia_menu a {
  -moz-transition: background-color 200ms ease, color 200ms ease;
  -o-transition: background-color 200ms ease, color 200ms ease;
  -webkit-transition: background-color 200ms ease, color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease;
  position: relative;
  display: block;
  height: 40px;
  padding-left: 31px;
  background-color: #f5f5f0;
}
#trivia_menu a:hover {
  background-color: #DB4053;
  color: white;
}
#trivia_menu .subtitle {
  -moz-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
  position: absolute;
  right: 11px;
  top: 0;
  line-height: 40px;
}
#trivia_menu .subtitle br {
  display: none;
}
#trivia_menu a:hover .subtitle {
  color: white;
}
@media (max-width: 635px) {
  #trivia_menu {
    display: block;
    margin: 0 auto;
    padding-top: 10px;
  }
}

#header {
  width: 100%;
  height: 70px;
  background: white;
}

#header-floater {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 70px;
  background: white;
}

#logo {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding-left: 3%;
}
#logo a {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
}
#logo a:hover {
  opacity: 0.6;
}

#header-mypage {
  position: absolute;
  right: 70px;
  top: 0;
  display: inline-block;
  vertical-align: top;
  width: 70px;
  height: 70px;
  margin: 0;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
#header-mypage a {
  display: inline-block;
  vertical-align: top;
  width: 70px;
  height: 70px;
  background: 0 0 no-repeat;
  background-size: 70px auto;
}
#header-mypage a img {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  width: 70px;
  height: 70px;
}
#header-mypage a:hover img {
  opacity: 0;
}

#header-menu {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  width: 70px;
  height: 70px;
  background: 0 0 no-repeat;
  background-size: 70px auto;
  position: absolute;
  right: 0;
  top: 0;
}
#header-menu img {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  width: 70px;
  height: 70px;
}
#header-menu:hover img {
  opacity: 0;
}

@media (max-width: 635px) {
  #header, #header-floater {
    height: 50px;
  }

  #logo img {
    width: auto;
    height: 50px;
  }

  #header-mypage {
    right: 50px;
    width: 50px;
    height: 50px;
  }
  #header-mypage a {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    background: 0 0 no-repeat;
    background-size: 50px auto;
  }
  #header-mypage a img {
    -moz-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    width: 50px;
    height: 50px;
  }
  #header-mypage a:hover img {
    opacity: 0;
  }

  #header-menu {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    background: 0 0 no-repeat;
    background-size: 50px auto;
  }
  #header-menu img {
    -moz-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    width: 50px;
    height: 50px;
  }
  #header-menu:hover img {
    opacity: 0;
  }
}
#menu-contents {
  -moz-transform: translateX(320px);
  -ms-transform: translateX(320px);
  -webkit-transform: translateX(320px);
  transform: translateX(320px);
  -moz-transition: -moz-transform 200ms ease;
  -o-transition: -o-transform 200ms ease;
  -webkit-transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  width: 320px;
  height: 100%;
  background-color: #f5f5f0;
  overflow: hidden;
}
#menu-contents.open {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#menu-scroll {
  box-sizing: border-box;
  position: relative;
  width: 360px;
  height: 100%;
  overflow-y: scroll;
}

#menu-heading {
  width: 320px;
  margin: 0;
  background-color: white;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 70px;
  text-align: center;
}

#menu-close {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  position: absolute;
  left: 249px;
  top: 0;
  border-left: 1px solid #e6e6e6;
}

#navigation {
  border-top: 2px solid #e6e6e6;
  font-size: 14px;
  line-height: 43px;
}
#navigation a {
  -moz-transition: background-color 200ms ease, color 200ms ease;
  -o-transition: background-color 200ms ease, color 200ms ease;
  -webkit-transition: background-color 200ms ease, color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease;
  display: block;
  vertical-align: top;
  padding-left: 25px;
  background-color: #f5f5f0;
  font-size: 14px;
  letter-spacing: 0.1em;
}
#navigation a:hover {
  background-color: #DB4053;
  color: white;
}
#navigation .nav-level-1 {
  margin: 0;
  padding: 0;
}
#navigation .nav-level-1 > li {
  border-bottom: 2px solid #e6e6e6;
}
#navigation .nav-level-2 {
  margin: 0;
  padding: 0;
  line-height: 33px;
  font-size: 12px;
}
#navigation .nav-level-2 > li {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 160px;
  border-top: 2px solid #e6e6e6;
}
#navigation .nav-level-2 > li:nth-child(2n+1) {
  border-right: 2px solid #e6e6e6;
}
#navigation .nav-level-2 a {
  background-color: white;
}
#navigation .nav-level-2 a:hover {
  background-color: #DB4053;
}

@media (max-width: 635px) {
  #menu-scroll {
    border-top-width: 50px;
  }

  #menu-heading {
    line-height: 50px;
  }

  #menu-close img {
    width: 50px;
    height: 50px;
  }
}
#footer {
  padding-bottom: 18px;
  background-color: white;
  text-align: center;
}

#social-control {
  padding: 12px 0;
  background-color: #f5f5f0;
}

.fb-share-button {
  vertical-align: top;
}

#twitter {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 30px;
}
#twitter iframe {
  display: inline-block;
  vertical-align: top;
}

#footer-logo {
  margin: 40px 0 0;
}

#footer-links {
  margin: 16px 0 0;
  padding: 0;
  line-height: 14px;
}
#footer-links li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  border-right: 1px solid #E6E6E6;
}
#footer-links li:first-child {
  border-left: 1px solid #E6E6E6;
}
#footer-links a {
  display: block;
  padding: 0 16px;
}
#footer-links a:hover {
  text-decoration: underline;
}

#footer-banner {
  padding: 45px 0 20px;
  font-size: 0;
}
#footer-banner p {
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}
#footer-banner p a {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  cursor: pointer;
}
#footer-banner p a:hover {
  opacity: 0.6;
}
@media (max-width: 635px) {
  #footer-banner {
    padding-top: 25px;
    padding-bottom: 10px;
  }
  #footer-banner p {
    display: block;
  }
  #footer-banner p + p {
    margin-top: 10px;
  }
}

#copyright {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
}

#top-about {
  margin-top: 45px;
  margin-bottom: 72px;
}
#top-about p {
  width: 86%;
  max-width: 940px;
  margin: 22px auto 0;
}

#top-feature {
  max-width: none;
}
#top-feature > p {
  width: 86%;
  max-width: 940px;
  margin: 0 auto 36px;
}
#top-feature .limit {
  max-width: 1000px;
  margin: 0 auto;
}

#top-myfavorite {
  margin-top: 60px;
  padding-bottom: 0;
}
#top-myfavorite p {
  width: 86%;
  max-width: 940px;
  margin: 22px auto 0;
}
#top-myfavorite p a {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  cursor: pointer;
  text-decoration: underline;
}
#top-myfavorite p a:hover {
  opacity: 0.6;
}

#top-custom {
  max-width: none;
  margin-top: 60px;
  padding-bottom: 110px;
}
#top-custom .normal-heading {
  margin-bottom: 19px;
}
#top-custom > p {
  width: 86%;
  max-width: 940px;
  margin: 0 auto 36px;
}
#top-custom > p a {
  color: #410000;
  text-decoration: underline;
}
#top-custom .limit {
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 635px) {
  #top-about {
    margin-bottom: 63px;
  }

  #top-custom {
    margin-top: 52px;
    padding-bottom: 44px;
  }
}
#program-archive .program-archive {
  margin-top: 46px;
  padding-bottom: 110px;
}

#program-custom-to-manual {
  margin: -4px 0 30px;
}
#program-custom-to-manual a {
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  display: block;
  width: 300px;
  height: 70px;
  margin: 0 auto;
  background-color: #DB4053;
  color: white;
  text-align: center;
  line-height: 70px;
}
#program-custom-to-manual a:hover {
  background-color: #F1B3BA;
}

@media (max-width: 635px) {
  #program-archive .program-archive {
    margin-top: 15px;
    padding-bottom: 44px;
  }

  #program-custom-to-manual {
    margin-top: -11px;
    margin-bottom: 17px;
  }
}
#program-post .floating-anchor {
  position: relative;
  top: -112px;
  font-size: 0;
  line-height: 0;
}

#program-pending-message {
  margin: 0;
  padding: 10px 0 32px;
  text-align: center;
}

#program-control {
  margin: 0;
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  line-height: 40px;
  letter-spacing: 0.1em;
}
#program-control li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}
#program-control li + li {
  margin-left: 7px;
}
#program-control a {
  -moz-transition: color 200ms ease, background-color 200ms ease;
  -o-transition: color 200ms ease, background-color 200ms ease;
  -webkit-transition: color 200ms ease, background-color 200ms ease;
  transition: color 200ms ease, background-color 200ms ease;
  display: block;
  width: 90px;
  height: 40px;
  border: 1px solid #e6e6e6;
  background-color: #f5f5f0;
}
#program-control a:hover {
  color: white;
  background-color: #DB4053;
}

#program-post-title {
  margin: 0;
  padding: 22px 10%;
  background-color: white;
}

#program-post-body {
  width: 86%;
  max-width: 860px;
  margin: 12px auto 43px;
}
#program-post-body:after {
  content: '';
  display: block;
  clear: both;
}
#program-post-body p {
  margin: 0;
}
#program-post-body img {
  width: 109.3%;
  height: auto;
  margin-left: -4.65%;
}
#program-post-body strong {
  font-size: 18px;
}

#program-post #multimap-container {
  position: relative;
  width: 94%;
  max-width: 1000px;
  padding-bottom: 50.5%;
  margin: 60px auto 0;
}

#program-post #multimap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#program-spot-list {
  margin-top: 42px;
}
#program-spot-list:after {
  content: '';
  display: block;
  clear: both;
}
#program-spot-list > p {
  width: 94%;
  max-width: 940px;
  margin: 0 auto 12px;
}
#program-spot-list .background {
  padding: 17px 0;
  background-color: #f5f5f0;
}
#program-spot-list .limit {
  width: 94%;
  max-width: 940px;
  margin: 0 auto;
}
#program-spot-list .limit:after {
  content: '';
  display: block;
  clear: both;
}

.program-spot-list-article {
  position: relative;
}
.program-spot-list-article a {
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  display: block;
  width: 100%;
  background-color: white;
}
.program-spot-list-article a:after {
  content: '';
  display: block;
  clear: both;
}
.program-spot-list-article a:hover, .program-spot-list-article a.over {
  background-color: #DB4053;
}
.program-spot-list-article a:hover h1, .program-spot-list-article a.over h1 {
  color: white;
}
.program-spot-list-article .image-screen {
  float: left;
  width: 36%;
  height: 0;
  padding-bottom: 28%;
  background: white center center no-repeat;
  background-size: cover;
}
.program-spot-list-article .image-screen img {
  display: none;
}
.program-spot-list-article h1 {
  -moz-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
  float: left;
  width: 56%;
  margin: 0 0 0 4%;
  padding: 9px 0;
}
.program-spot-list-article .readmore {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 102px;
  height: 18px;
}

#spot-posts {
  padding-bottom: 142px;
}

#spot-posts .spot-post-article {
  padding-top: 43px;
  border-top: 1px dashed black;
  margin-top: 43px;
}
#spot-posts .spot-post-article + .spot-post-article {
  margin-top: 99px;
}

@media (min-width: 636px) {
  .program-spot-list-article {
    width: 47.34%;
  }
  .program-spot-list-article:nth-of-type(2n+1) {
    float: left;
  }
  .program-spot-list-article:nth-of-type(2n+2) {
    float: right;
  }
  .program-spot-list-article:nth-of-type(n+3) {
    margin-top: 17px;
  }
}
@media (max-width: 635px) {
  #program-post .floating-anchor {
    top: -93px;
  }

  #program-pending-message {
    padding-bottom: 26px;
  }

  #program-control {
    padding: 16px 0;
  }

  #program-post-title {
    padding: 9px 7%;
  }

  #program-post-body {
    margin-top: 24px;
  }

  #program-post #multimap-container {
    margin-top: 30px;
  }

  .program-spot-list-article {
    width: 100%;
  }
  .program-spot-list-article + .program-spot-list-article {
    margin-top: 21px;
  }

  #spot-posts {
    padding-bottom: 42px;
  }
}
#spot-post main {
  padding-bottom: 122px;
}

.spot-post-max-image {
  margin-bottom: 16px;
}

.spot-post-favorite-container {
  z-index: 2;
  width: 94%;
  margin: 0 auto -5px;
  max-width: 940px;
  text-align: right;
}

.spot-post-lead {
  width: 94%;
  margin: 0 auto;
  padding: 0 0 11px;
  max-width: 940px;
}

.spot-post-body {
  width: 86%;
  max-width: 860px;
  margin: 0 auto;
}
.spot-post-body:after {
  content: '';
  display: block;
  clear: both;
}
.spot-post-body p {
  margin: 0;
}
.spot-post-body img {
  width: 109.3%;
  height: auto;
  margin-left: -4.65%;
}
.spot-post-body strong {
  font-size: 18px;
}

.spot-post-title {
  width: 94%;
  max-width: 940px;
  margin: 57px auto 0;
}
.spot-post-title h1 {
  margin: 0;
}
.spot-post-title h2 {
  margin: 3px 0 0;
}

.spot-post-table {
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  width: 94%;
  margin: 23px auto 0;
  max-width: 940px;
}
.spot-post-table th, .spot-post-table td {
  box-sizing: border-box;
  height: 54px;
  padding: 5px 0 5px 11px;
  border: 1px solid #e6e6e6;
  text-align: left;
  vertical-align: middle;
  font-weight: inherit;
}
.spot-post-table th {
  width: 94px;
  min-width: 94px;
  max-width: 94px;
  background-color: #f5f5f0;
}

.spot-post-relation {
  width: 94%;
  max-width: 940px;
  margin: 42px auto 0;
}
.spot-post-relation h1 {
  margin: 0;
}
.spot-post-relation p {
  margin: 0;
}

.spot-post-map {
  position: relative;
  width: 94%;
  max-width: 1000px;
  padding-bottom: 50.5%;
  margin: 47px auto 0;
}
.spot-post-map iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 635px) {
  #spot-post main {
    padding-bottom: 47px;
  }

  .spot-post-max-image {
    margin-bottom: 7px;
  }

  .spot-post-favorite-container {
    margin-bottom: 9px;
  }

  .spot-post-title {
    margin-top: 41px;
  }
  .spot-post-title h2 {
    margin-top: -6px;
  }

  .spot-post-table {
    margin-top: 15px;
  }

  .spot-post-map {
    margin-top: 40px;
  }

  .spot-post-relation {
    margin-top: 18px;
  }
  .spot-post-relation p {
    margin-top: 5px;
  }
}
#search-container {
  max-width: 940px;
  width: 94%;
  margin: 0 auto;
}
@media (min-width: 636px) {
  #search-container {
    margin-top: -32px;
    margin-bottom: 20px;
    text-align: right;
  }
}
@media (max-width: 635px) {
  #search-container {
    margin-bottom: 10px;
  }
}
#search-container #search-group {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 300px;
  height: 40px;
  border: 1px solid #e6e6e6;
  background-color: #f5f5f0;
  text-align: left;
}
#search-container #search-group > div {
  display: inline-block;
  vertical-align: top;
  height: 38px;
}
#search-container #search-magnifier {
  width: 28px;
  border-right: 1px solid #e6e6e6;
}
#search-container #search-magnifier img {
  position: relative;
  left: 6px;
  top: 11px;
}
#search-container #search-input-container {
  width: 230px;
}
#search-container #search-input-container input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  border: 0;
  padding-left: 12px;
  background-color: transparent;
}
#search-container #search-submit-container {
  width: 38px;
  border-left: 1px solid #e6e6e6;
}
#search-container #search-submit-container button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  width: 38px;
  height: 38px;
  background-color: #DC4053;
  color: white;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
#search-container #search-submit-container button:hover {
  background-color: #F4C5CB;
}

#search-ui-anchor {
  position: relative;
  top: -70px;
  font-size: 0;
  line-height: 0;
}

#spot-archive main {
  padding-bottom: 77px;
}
#spot-archive main .normal-heading {
  padding: 28px 0 35px;
}

.current-query {
  margin: 30px 9.375% 0;
}
.current-query h1 {
  margin: 0;
}
.current-query p {
  margin: 5px 0 0;
  padding-bottom: 2px;
}

.spot-archive {
  margin-top: 30px;
}

@media (max-width: 635px) {
  #search-ui-anchor {
    top: -50px;
  }

  #spot-archive main .normal-heading {
    padding: 16px 0 25px;
  }
}
#mypage main {
  padding-bottom: 63px;
}

#user-information {
  background-color: #f5f5f0;
  padding: 14px 3%;
}
#user-information h1 {
  margin: 0;
  padding: 9px 0;
  background-color: #410000;
  color: white;
  text-align: center;
}
#user-information p {
  margin: 0;
  padding: 10px 4%;
  border: 1px solid #410000;
  background-color: white;
}

#user-program-buttons {
  margin: 20px 0 0;
  background-color: #f5f5f0;
  padding: 14px 0;
  text-align: center;
}
#user-program-buttons p {
  display: inline-block;
  vertical-align: top;
}
#user-program-buttons p:first-child {
  margin-right: 50px;
}
#user-program-buttons a {
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  display: block;
  width: 300px;
  height: 70px;
  margin: 0 auto;
  background-color: #DB4053;
  color: white;
  text-align: center;
  line-height: 70px;
}
#user-program-buttons a:hover {
  background-color: #F1B3BA;
}

#mypage .program-archive {
  margin-top: 52px;
}

.mypage-favorite {
  margin-top: 82px;
}

@media (max-width: 708px) {
  #user-program-buttons p {
    display: block;
  }
  #user-program-buttons p:first-child {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
@media (max-width: 635px) {
  #user-information h1 {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  #mypage .program-archive {
    margin-top: 14px;
  }

  .mypage-favorite {
    margin-top: 54px;
  }

  #mypage main {
    padding-bottom: 37px;
  }
}
#trivias .max-image {
  margin-bottom: 46px;
}

#trivias .max-image .body {
  padding: 18px 9%;
  background-color: #f5f5f0;
}
#trivias .max-image .body p {
  margin: 0;
}

#trivia_about p {
  margin: 22px 0 0;
}
#trivia_about .subtitle {
  margin-top: 9px;
}
#trivia_about .trivia_about_text {
  display: table;
  margin: 0 auto;
  padding: 0 7%;
}

#trivia_link {
  width: 84%;
  max-width: 840px;
  margin: 41px auto 0;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 20px;
}
#trivia_link p {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 46.428%;
  margin: 0;
  border: 1px solid #e6e6e6;
  text-align: center;
}
#trivia_link a {
  position: relative;
  display: block;
  padding-top: 57.216%;
  padding-bottom: 18px;
  background: white center top no-repeat;
  background-size: 100% auto;
  background-position: center top, 2000px 2000px;
}
#trivia_link a:before {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 57.216%;
  background-color: white;
  opacity: 0;
}
#trivia_link a:hover:before {
  opacity: 0.4;
}
#trivia_link .text {
  display: block;
  margin-top: 15px;
}

#trivia_top_faq {
  margin-top: 63px;
  margin-bottom: 48px;
  padding-top: 33px;
  background-color: #f5f5f0;
}
#trivia_top_faq > h1 {
  margin: 0 0 30px;
  color: #DB4053;
  text-align: center;
}
#trivia_top_faq > h1 .subtitle {
  line-height: 1.4;
}
#trivia_top_faq .masonry {
  width: 100% !important;
  overflow: hidden;
}

@media (min-width: 636px) {
  #trivia_link p:nth-of-type(2) {
    float: right;
  }
  #trivia_link p:nth-of-type(3) {
    clear: both;
    margin-top: 33px;
  }
}
@media (max-width: 635px) {
  #trivias .max-image {
    margin-bottom: 32px;
  }

  #trivias .max-image .body {
    padding: 20px 7%;
  }

  #trivia_link {
    width: 94%;
    margin-top: 38px;
    font-size: 14px;
    line-height: 18px;
  }
  #trivia_link p {
    display: block;
    width: 100%;
  }
  #trivia_link p + p {
    margin-top: 20px;
  }
  #trivia_link a {
    padding-top: 30%;
    padding-bottom: 5px;
    background-position: 2000px 2000px, center top;
  }
  #trivia_link a:before {
    padding-top: 30%;
  }
  #trivia_link .text {
    margin-top: 6px;
  }

  #trivia_top_faq {
    margin-top: 42px;
    padding-top: 25px;
  }
  #trivia_top_faq > h1 {
    margin-bottom: 28px;
  }
}
#trivia-archive main {
  padding-bottom: 72px;
}

.trivia-archive-background {
  margin-top: 9px;
  padding-top: 21px;
  background-color: #F5F5F0;
}

.trivia-archive-masonry-container {
  max-width: 1000px;
  margin: 0 auto;
}

.trivia-archive {
  width: 100% !important;
  margin: 0 auto;
  overflow: hidden;
}

.trivia-article {
  display: inline-block;
  vertical-align: top;
  width: 44%;
  margin: 0 3% 35px;
}
.trivia-article img {
  width: 100%;
}
.trivia-article .body {
  margin: 0 19px;
  padding: 9px 0 28px;
}
.trivia-article .body p {
  margin: 0;
}
.trivia-article .body strong {
  font-size: 18px;
}
.trivia-article .map iframe {
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  display: block;
  width: 100%;
  opacity: 0;
}
.trivia-article .animate-container {
  -moz-transition: height 400ms ease;
  -o-transition: height 400ms ease;
  -webkit-transition: height 400ms ease;
  transition: height 400ms ease;
  position: relative;
  height: 146px;
  overflow: hidden;
  background-color: white;
}
.trivia-article .animate-container .height-keeper {
  width: 100%;
  height: auto;
}
.trivia-article .animate-container .more {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  -moz-transition: color 200ms ease, opacity 400ms ease;
  -o-transition: color 200ms ease, opacity 400ms ease;
  -webkit-transition: color 200ms ease, opacity 400ms ease;
  transition: color 200ms ease, opacity 400ms ease;
  position: absolute;
  left: 0;
  top: 70px;
  width: 100%;
  height: 76px;
  background-color: white;
}
.trivia-article .animate-container .more:before {
  content: '';
  position: absolute;
  left: 0;
  top: 76px;
  display: block;
  width: 100%;
  height: 3000px;
  background-color: white;
}
.trivia-article .animate-container .more:hover {
  color: #DC4053;
}
.trivia-article .animate-container .more.hide {
  opacity: 0;
}

#trivia-category-select {
  padding: 24px 0 10px;
  text-align: center;
}
#trivia-category-select p {
  display: inline-block;
  vertical-align: middle;
  margin: 0 22px 0 0;
}
#trivia-category-select select {
  display: inline-block;
  vertical-align: middle;
  width: 94px;
}

@media (max-width: 635px) {
  #trivia-archive main {
    padding-bottom: 24px;
  }

  .trivia-archive {
    margin-top: 24px;
  }

  .trivia-article {
    width: 94%;
  }

  #trivia-category-select {
    padding-bottom: 0;
  }
}
.faq-lead {
  display: table;
  margin: 0 auto;
  padding: 18px 7% 0;
}
.faq-lead p {
  margin: 0;
}
.faq-lead .subtitle {
  padding-top: 10px;
}

.faq-howtouse,
.faq-post-link {
  margin: 34px 0 40px;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  letter-spacing: 0.1em;
}
.faq-howtouse a,
.faq-post-link a {
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  position: relative;
  display: block;
  width: 300px;
  margin: 0 auto;
  background-color: #DB4053;
  color: white;
  text-indent: 0.1em;
}
.faq-howtouse a:hover,
.faq-post-link a:hover {
  background-color: #F1B3BA;
}
.faq-howtouse span,
.faq-post-link span {
  display: block;
  width: 156px;
  text-align: center;
}
.faq-howtouse .subtitle,
.faq-post-link .subtitle {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: white;
}
.faq-howtouse .subtitle br,
.faq-post-link .subtitle br {
  display: none;
}

.faq-howtouse {
  margin-bottom: 0;
}

.faq-post-link {
  margin-top: 7px;
}

.faq-archive-container {
  width: 100%;
  margin-bottom: 50px;
  padding-top: 34px;
  background-color: #f5f5f0;
}

.faq-archive {
  width: 100% !important;
  overflow: hidden;
}

#login-registration-main {
  width: 242px;
  margin: 0 auto;
  padding-bottom: 60px;
}
#login-registration-main .normal-heading {
  margin-top: 46px;
  margin-bottom: 28px;
}
@media (max-width: 635px) {
  #login-registration-main .normal-heading {
    margin-top: 15px;
  }
}
#login-registration-main .error {
  margin: 0 0 18px;
  color: #DB4053;
}
#login-registration-main .error i {
  font-style: normal;
}
#login-registration-main form {
  display: block;
}
#login-registration-main form label {
  display: table;
}
#login-registration-main form input {
  box-sizing: border-box;
  width: 242px;
  height: 34px;
  padding: 0 0.5em;
  border: 1px solid #ddd;
  background-color: white;
}
#login-registration-main form input + label {
  margin-top: 5px;
}
#login-registration-main form .attention {
  margin: 9px 0 0;
}
#login-registration-main form .g-recaptcha {
  margin-top: 30px;
  padding-left: 42px;
}
#login-registration-main form button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  vertical-align: top;
  width: 242px;
  height: 40px;
  border: 0;
  margin-top: 30px;
  background-color: #DB4053;
  color: white;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
#login-registration-main .to-another {
  margin: 18px 0 0;
}
#login-registration-main .forgot-password {
  margin: 56px 0 0;
}
#login-registration-main .forgot-password a {
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  cursor: pointer;
  text-decoration: underline;
}
#login-registration-main .forgot-password a:hover {
  opacity: 0.6;
}

#policy-main {
  padding-bottom: 60px;
}
#policy-main .normal-heading {
  margin-top: 46px;
  margin-bottom: 28px;
}
#policy-main p {
  max-width: 692px;
  margin: 0 auto;
  padding: 0 54px;
}
@media (max-width: 635px) {
  #policy-main .normal-heading {
    margin-top: 15px;
  }
  #policy-main p {
    padding: 0 24px;
  }
}

#manual-loggedin-new-program {
  margin: -4px 0 24px;
}
#manual-loggedin-new-program a {
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  display: block;
  width: 300px;
  height: 70px;
  margin: 0 auto;
  background-color: #DB4053;
  color: white;
  text-align: center;
  line-height: 70px;
}
#manual-loggedin-new-program a:hover {
  background-color: #F1B3BA;
}
@media (max-width: 721px) {
  #manual-loggedin-new-program {
    margin-top: -11px;
    margin-bottom: 26px;
  }
}

#manual-images-attention {
  max-width: 688px;
  margin: 0 auto 30px;
  padding: 0 6px;
}
@media (max-width: 721px) {
  #manual-images-attention {
    max-width: 280px;
    margin-bottom: 14px;
  }
}

#manual-main {
  margin-bottom: 60px;
}
#manual-main .normal-heading {
  margin-top: 46px;
  margin-bottom: 30px;
}
#manual-main .main-section {
  padding-top: 32px;
  padding-bottom: 50px;
  background-color: #f5f5f0;
}
#manual-main .main-section + .main-section {
  margin-top: 80px;
}
#manual-main .main-section > h1 {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
}
#manual-main .main-section > h1 + p {
  max-width: 688px;
  margin: 0 auto;
  padding: 5px 0 60px;
}
#manual-main .sub-section {
  margin: 40px auto 0;
  border-top: 2px solid #D1D1B9;
  padding-top: 56px;
}
#manual-main .sub-section > h1 {
  margin: 0;
  padding-bottom: 12px;
  text-align: center;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
#manual-main .allow-list, #manual-main .number-list {
  margin: 0 auto;
  padding: 0;
}
#manual-main .allow-list > li, #manual-main .number-list > li {
  list-style: none;
}
#manual-main .allow-list > li:after, #manual-main .number-list > li:after {
  content: '';
  display: block;
  clear: both;
}
#manual-main .allow-list > li + li:before {
  content: url(/i/manual/allow.svg);
  display: block;
  width: 36px;
  height: 32px;
  margin: 26px auto 30px;
}
#manual-main .number-list li + li {
  margin-top: 30px;
}
#manual-main .image p {
  margin: 0;
}
#manual-main .image p + img {
  margin-top: 8px;
}
#manual-main .text {
  padding-top: 4px;
}
#manual-main .text p, #manual-main .text dt, #manual-main .text dd {
  margin: 0;
}
#manual-main .text dt {
  white-space: nowrap;
}
#manual-main .text dd {
  padding-top: 4px;
}
#manual-main .text dd + dt {
  margin-top: 24px;
}
#manual-main .text dl + p {
  margin-top: 24px;
}
#manual-main .circle {
  position: relative;
  top: 2px;
  display: inline-block;
  vertical-align: top;
  width: 19px;
  height: 20px;
  border-radius: 10px;
  padding-right: 1px;
  margin-right: 10px;
  background-color: #009ED6;
  color: white;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 21px;
  font-family: Arial, sans-serif;
  text-align: center;
  font-weight: bold;
}
#manual-main .square {
  position: relative;
  top: 4px;
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 16px;
  margin-right: 8px;
  padding-right: 1px;
  background-color: #64C4E6;
  color: white;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 17px;
  font-family: Arial, sans-serif;
  text-align: center;
  font-weight: bold;
}
#manual-main .number-dl {
  padding: 0;
  margin: 0;
}
#manual-main p + .number-dl {
  padding-top: 14px;
}
#manual-main .pink {
  color: #DB4053 !important;
}
#manual-main .last-attention {
  padding-top: 12px;
  padding-bottom: 62px;
  background-color: #f5f5f0;
}
#manual-main .last-attention p {
  max-width: 688px;
  margin: 0 auto;
}
@media (min-width: 722px) {
  #manual-main {
    margin-bottom: 72px;
  }
  #manual-main .main-section > h1 + p {
    padding-left: 6px;
    padding-right: 6px;
  }
  #manual-main .sub-section {
    max-width: 740px;
  }
  #manual-main .allow-list, #manual-main .number-list {
    width: 676px;
    padding-left: 30px;
  }
  #manual-main .allow-list .number-list, #manual-main .number-list .number-list {
    padding-left: 0;
  }
  #manual-main .allow-list > li:after, #manual-main .number-list > li:after {
    content: '';
    display: block;
    clear: both;
  }
  #manual-main .allow-list > li:before, #manual-main .number-list > li:before {
    position: relative;
    left: -13px;
  }
  #manual-main .allow-list .image, #manual-main .number-list .image {
    float: left;
  }
  #manual-main .allow-list .text, #manual-main .number-list .text {
    float: right;
    width: 320px;
  }
  #manual-main .number-list .text {
    padding-top: 34px;
  }
  #manual-main .number-dl {
    padding: 9px 0 0 14px;
  }
}
@media (max-width: 721px) {
  #manual-main .main-section {
    padding-bottom: 30px;
  }
  #manual-main .main-section > h1 {
    margin-bottom: 19px;
  }
  #manual-main .main-section > h1 + p {
    width: 280px;
    margin-top: -10px;
    padding-bottom: 28px;
  }
  #manual-main .sub-section {
    width: 280px;
    margin: 26px auto 0;
    border-top-width: 1px;
    padding: 32px 10px 0;
  }
  #manual-main .sub-section > h1 {
    margin: 0 0 -15px;
    padding-bottom: 0;
    text-align: left;
  }
  #manual-main .allow-list, #manual-main .number-list {
    width: 280px;
  }
  #manual-main .allow-list > li + li:before, #manual-main .number-list > li + li:before {
    margin: 15px auto 11px;
  }
  #manual-main .text dd {
    padding-top: 0;
  }
  #manual-main .text dd + dt {
    margin-top: 13px;
  }
  #manual-main .text dl + p {
    margin-top: 17px;
  }
  #manual-main .number-dl {
    padding-top: 19px;
  }
  #manual-main .last-attention {
    padding-top: 0;
    padding-bottom: 36px;
  }
  #manual-main .last-attention p {
    width: 280px;
  }
}
@media (max-width: 635px) {
  #manual-main .normal-heading {
    margin-top: 15px;
  }
  #manual-main .main-section {
    padding-top: 21px;
  }
  #manual-main .main-section > h1 {
    font-size: 16px;
  }
}

#beppu main {
  padding-bottom: 138px;
}

#beppu-lead {
  margin: 46px 7% 0;
}

#beppu-map {
  padding: 60px 0;
}
#beppu-map:after {
  content: '';
  display: block;
  clear: both;
}
#beppu-map img {
  width: 44.5%;
  height: auto;
}
#beppu-map img:first-child {
  float: left;
  margin-left: 3%;
}
#beppu-map img:first-child + img {
  float: right;
  margin-right: 3%;
}

#beppu-dl {
  margin: 0 7% 66px;
}
#beppu-dl dt {
  color: #DC4053;
}
#beppu-dl dd + dt {
  margin-top: 36px;
}
#beppu-dl dd {
  margin: 15px 0 0;
}

#beppu-access {
  margin: 0 7%;
}
#beppu-access > h1 {
  color: #DC4053;
  margin: 0 0 42px;
}
#beppu-access > section + section {
  margin-top: 46px;
}
#beppu-access > section > h1 {
  color: #DC4053;
  margin: 0 0 16px;
}
#beppu-access > section p {
  margin: 0;
}
#beppu-access > section p + p {
  margin-top: 20px;
}

@media (max-width: 635px) {
  #beppu-lead {
    margin-top: 19px;
  }

  #beppu-map {
    padding-top: 19px;
    padding-bottom: 31px;
    text-align: center;
  }
  #beppu-map img {
    width: 94%;
  }
  #beppu-map img:first-child,
  #beppu-map img:first-child + img {
    float: none;
    margin: 0;
  }
  #beppu-map img:first-child + img {
    margin-top: 22px;
  }

  #beppu-dl {
    margin-bottom: 56px;
  }
  #beppu-dl dd {
    margin-top: 1px;
  }

  #beppu-access > h1 {
    margin-bottom: 42px;
  }
  #beppu-access > section + section {
    margin-top: 24px;
  }
  #beppu-access > section > h1 {
    margin-bottom: 13px;
  }
  #beppu-access > section p + p {
    margin-top: 26px;
  }
}