#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 0)
}

#cboxWrapper {
  max-width: none
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%
}

#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left
}

#cboxContent {
  position: relative
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

#cboxTitle {
  margin: 0
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
  cursor: pointer
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box
}

#cboxOverlay {
  opacity: .9;
  filter: alpha(opacity=90);
  background-color: #202020
}

#colorbox {
  outline: 0
}

#cboxContent {
  background: #fff
}

.cboxIframe {
  background: #fff
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc
}

#cboxTitle {
  position: absolute;
  bottom: 4px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #949494
}

#cboxCurrent {
  position: absolute;
  bottom: 4px;
  left: 58px;
  color: #949494
}

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none
}

#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
  outline: 0
}

#cboxSlideshow {
  position: absolute;
  bottom: 4px;
  right: 30px;
  color: #0092ef
}

#cboxPrevious {
  position: absolute;
  top: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px
}

#cboxPrevious:hover {
  background-position: -75px -25px
}

#cboxNext {
  position: absolute;
  top: 50%;
  right: 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px
}

#cboxNext:hover {
  background-position: -50px -25px
}

#cboxClose {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px
}

#cboxClose:hover {
  background-position: -25px -25px
}

.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)
}

.share {
/*  margin-top: 40px;*/
  margin-bottom: 40px;
  text-align: center;
}

@media screen and (min-width: 1025px) {
  .share {
/*    margin-top: 60px*/
/*    margin-bottom: 60px;*/
  }
}

.share h4 {
  font-weight: normal
}

.share h4::before {
  content: "＼";
  margin-right: 10px
}

.share h4::after {
  content: "／";
  margin-left: 10px
}

@media screen and (min-width: 1025px) {
  .share h4 {
    font-size: 16px
  }
}

.share .sns-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 15px
}

.share .sns-item a {
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  line-height: 30px;
  width: 30px;
  height: 30px;
  padding: 0
}

.share .sns-item a img {
  width: 30px;
  height: 30px;
  padding: 7px;
  vertical-align: text-bottom
}

@media screen and (min-width: 1025px) {
  .share .sns-item a {
    width: 36px;
    height: 36px;
    line-height: 36px
  }

  .share .sns-item a img {
    width: 36px;
    height: 36px;
    padding: 8px
  }
}

@media screen and (min-width: 1025px) {
  .share .sns-item a:hover {
    opacity: .7
  }
}

.share-color {
  margin-top: 20px
}

@media screen and (min-width: 1025px) {
  .share-color {
    margin-top: 9px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center
  }

  .share-color a img {
    vertical-align: sub
  }
}

.share-color .line a {
  background-color: #00b900
}

.share-color .facebook a {
  background-color: #1877f2
}

.share .sns-list .x a {
background-color: #000;
}

.share-color .hatena-b a {
  background-color: #00a4de
}

.share-color .mail a {
  background-color: #f0821e
}

.share-color cite {
  font-style: normal;
  font-size: 11px;
  margin-top: 15px;
  display: inline-block
}

@media screen and (min-width: 1025px) {
  .share-color cite {
    font-size: 12px
  }
}

.detail {
  color: #333
}

@media screen and (min-width: 1025px) {
  .detail {
    padding-bottom: 100px
  }
}

@media screen and (min-width: 1025px) {
  .detail .breadcrumb {
    margin-bottom: 20px
  }
}

@media screen and (min-width: 1025px) {
  .detail .items {
    padding: 50px 60px 60px
  }
}

.detail .title {
  text-decoration: none;
  color: #143a60;
  margin: 0
}

@media screen and (min-width: 1025px) {
  .detail .title {
    font-size: 40px
  }
}

.detail .ruby {
  font-size: 12px;
  display: block;
  color: #797979;
  margin-top: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold
}

@media screen and (min-width: 1025px) {
  .detail .ruby {
    font-size: 16px;
    margin-top: 0
  }
}

.detail .badge-block {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap
}

.detail .badge-block .badge-content {
  display: flex;
  margin-top: 10px
}

.detail .badge-block .badge {
  align-self: flex-start;
  border-radius: 100px;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold;
  padding: 2px 10px
}

@media screen and (min-width: 1025px) {
  .detail .badge-block .badge {
    font-size: 11px
  }
}

.detail .badge-block .badge-text {
  margin: 0 10px 0 5px;
  font-size: 11px;
  color: #797979;
  padding: 2px 0
}

@media screen and (min-width: 1025px) {
  .detail .badge-block .badge-text {
    font-size: 12px
  }
}

.detail-nav {
  margin-top: 20px
}

@media screen and (min-width: 1025px) {
  .detail-nav {
    margin-top: 40px
  }
}

.detail-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.detail-nav ul li {
  width: calc(33.3333333333% - 5px);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold
}

.detail-nav ul li a {
  padding: 9px 0;
  color: #fff;
  border-radius: 6px;
  display: block
}

.detail-nav ul li.active {
  padding: 9px 0;
  border-radius: 6px
}

@media screen and (min-width: 1025px) {
  .detail-nav {
    border-radius: 20px;
    padding: 5px
  }

  .detail-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    justify-items: center;
    gap: 10px
  }

  .detail-nav ul li {
    width: 100%
  }

  .detail-nav ul li a {
    border-radius: 19px;
    padding: 19px 0;
    font-size: 20px
  }

  .detail-nav ul li.active {
    border-radius: 19px;
    padding: 19px 0;
    font-size: 20px
  }
}

.detail .float-block {
  margin-top: 20px
}

.detail .float-block .text {
  margin-top: 15px
}

@media screen and (min-width: 1025px) {
  .detail .float-block .swiper img:hover {
    opacity: 1
  }
}

@media screen and (min-width: 600px) {
  .detail .float-block .item-img {
    float: left;
    width: 50%;
    margin-right: 20px;
    margin-bottom: 20px
  }

  .detail .float-block em {
    display: block
  }
}

@media screen and (min-width: 1025px) {
  .detail .float-block {
    margin-top: 50px
  }

  .detail .float-block .item-img {
    margin-right: 40px
  }

  .detail .float-block .text {
    margin-top: 25px
  }
}

.detail .swiper-container {
  margin-bottom: 25px;
  padding-top: 0
}

@media screen and (min-width: 1025px) {
  .detail .swiper-container {
    margin-bottom: 20px
  }
}

.detail .swiper-container .swiper {
  width: 100%
}

.detail .swiper-container .swiper img {
  aspect-ratio: 295/213;
  -o-object-fit: contain;
  object-fit: contain;
  background-color: #eee;
  max-width: none
}

.detail .outline-btn {
  display: inline-block;
  text-align: center;
  position: relative
}

.detail .outline-btn::after {
  content: "";
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 10px;
  right: 10px
}

@media screen and (min-width: 1025px) {
  .detail .outline-btn {
    border: none !important;
    text-decoration: underline;
    display: inline
  }

  .detail .outline-btn:hover {
    opacity: .7
  }

  .detail .outline-btn::after {
    display: none
  }
}

.detail em {
  font-size: 16px;
  line-height: 1.625;
  margin-top: 30px
}

@media screen and (min-width: 1025px) {
  .detail em {
    font-size: 30px;
    margin-top: 0
  }
}

.detail p {
  line-height: 1.75
}

@media screen and (min-width: 1025px) {
  .detail .text {
    margin-top: 30px
  }
}

.detail .reservation-block {
  justify-content: center;
  margin-top: 20px
}

@media screen and (min-width: 1025px) {
  .detail .reservation-block {
    display: flex;
    margin-top: 50px
  }

  .detail .reservation-block button {
    font-size: 24px;
    max-width: 490px;
    padding: 16px 0
  }

  .detail .reservation-block button .brackets {
    font-size: 18px
  }
}

@media screen and (min-width: 1025px) {
  .detail .tel-note {
    text-align: right;
    margin-top: 0;
    margin-right: calc(25% - 101px)
  }
}

.detail .tel-note .note-dialog {
  top: -175px
}

@media screen and (min-width: 1025px) {
  .detail .tel-note .note-dialog {
    left: auto;
    right: -35px;
    transform: translateX(0)
  }
}

.detail-block {
  margin-top: 40px;
  border-top: 2px solid #ddd
}

@media screen and (min-width: 1025px) {
  .detail-block {
    margin-top: 60px;
    max-width: none !important
  }
}

.detail-block h3 {
  margin-top: 40px;
  font-size: 16px
}

.detail-block h3::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 8px
}

@media screen and (min-width: 1025px) {
  .detail-block h3 {
    margin-top: 60px;
    font-size: 24px
  }
}

.detail-block .message-block figure {
  margin-top: 20px;
  display: flex;
  align-items: center
}

.detail-block .message-block figure img {
  min-width: 170px;
  max-height: 331px;
  width: 58%;
  border-radius: 20px;
  aspect-ratio: 460/331;
  -o-object-fit: contain;
  object-fit: contain;
  background-color: #eee
}

.detail-block .message-block figure figcaption {
  margin-left: 20px
}

@media screen and (min-width: 600px) {
  .detail-block .message-block {
    display: flex;
    margin-top: 30px
  }

  .detail-block .message-block figure {
    width: 40%;
    margin-top: 0;
    margin-right: 20px;
    display: block
  }

  .detail-block .message-block figure img {
    width: 100%
  }

  .detail-block .message-block figure figcaption {
    text-align: center;
    margin-left: 0;
    margin-top: 15px;
    font-size: 14px
  }
}

@media screen and (min-width: 1025px) {
  .detail-block .message-block figure {
    margin-right: 40px
  }
}

.detail-text {
  position: relative;
  text-align: center
}

.detail-text .text-area {
  margin-top: 30px
}

.detail-text .text-area p {
  text-align: left;
  margin-top: 0
}

.detail-text .text-area p a {
  display: inline !important;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold
}

.detail-text a {
  margin-top: 12px
}

@media screen and (min-width: 600px) {
  .detail-text {
    width: 60%
  }

  .detail-text .text-area {
    margin-top: 0
  }
}

.detail .availability {
  margin-top: 40px
}

@media screen and (min-width: 1025px) {
  .detail .availability {
    margin-top: 60px
  }
}

@media screen and (min-width: 600px) {
  .detail .btn-block {
    display: flex;
    gap: 30px
  }
}

.detail .btn-block .primary-outline-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  border: 2px solid #143a60;
  border-radius: 14px;
  box-shadow: 0 2px 0 #ddd;
  font-size: 13px;
  padding: 15px 0 15px 17px;
  text-align: left;
  position: relative;
  transition: all .6s
}

.detail .btn-block .primary-outline-btn:first-of-type {
  margin-top: 15px
}

.detail .btn-block .primary-outline-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url(../img/link-icon.svg);
  position: absolute;
  top: 50%;
  right: 17px;
  transform: translateY(-50%)
}

@media screen and (min-width: 1025px) {
  .detail .btn-block .primary-outline-btn {
    font-size: 16px;
    margin-top: 30px;
    box-shadow: 0 4px 0 #ddd
  }

  .detail .btn-block .primary-outline-btn:first-of-type {
    margin-top: 30px
  }

  .detail .btn-block .primary-outline-btn:hover {
    box-shadow: none;
    transform: translateY(4px)
  }

  .detail .btn-block .primary-outline-btn:hover::before {
    background-image: url(../img/link-icon-white.svg)
  }
}

.detail .consultation-time {
  margin-top: 15px
}

@media screen and (min-width: 1025px) {
  .detail .consultation-time {
    margin-top: 30px
  }
}

.detail .consultation-time th,
.detail .consultation-time td {
  display: table-cell;
  font-weight: normal;
  border: 1px solid #ccc;
  text-align: center;
  padding: 7px 6px;
  font-size: 11px
}

@media screen and (min-width: 1025px) {

  .detail .consultation-time th,
  .detail .consultation-time td {
    font-size: 16px
  }
}

.detail .consultation-time th {
  background-color: #e8e4d5
}

.detail .consultation-time td {
  color: #f0821e
}

.detail .consultation-time td:first-of-type {
  color: #333;
  padding: 7px 4px
}

.detail .consultation-time .rest-day {
  color: #797979;
  background-color: #f5f4f0
}

.detail .consultation-time .not-open-time {
  color: #333
}

.detail .consultation-time .sat {
  background-color: #b7d6e5
}

.detail .consultation-time .sun,
.detail .consultation-time .holiday {
  background-color: #f8cdcd
}

.detail table {
  width: 100%
}

.detail table tr:first-of-type {
  border-top: 1px solid #e8e4d5
}

@media screen and (min-width: 600px) {

  .detail table th,
  .detail table td {
    padding: 30px 0
  }

  .detail table th {
    padding-right: 15px
  }

  .detail table a {
    color: #333
  }
}

.detail .map {
  width: 100%;
  height: 200px;
  margin-top: 30px
}

@media screen and (min-width: 1025px) {
  .detail .map {
    height: 500px;
    margin-top: 40px
  }
}

.detail .map iframe {
  border-radius: 20px
}

.detail .access {
  margin-top: 15px
}

@media screen and (min-width: 1025px) {
  .detail .access {
    display: inline-block;
    margin-top: 9px;
    font-size: 14px;
    text-align: right
  }
}

.photo-block {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 11px;
  margin-top: 20px
}

@media screen and (min-width: 1025px) {
  .photo-block {
    gap: 40px;
    margin-top: 50px
  }
}

.photo-block figure {
  width: calc(50% - 5.5px)
}

@media screen and (min-width: 1025px) {
  .photo-block figure {
    width: calc(50% - 20px)
  }
}

.photo-block figure a {
  display: block;
  border-radius: 10px;
  overflow: hidden
}

@media screen and (min-width: 1025px) {
  .photo-block figure a {
    border-radius: 20px;
    pointer-events: none
  }
}

.photo-block figure img {
  aspect-ratio: 142/102;
  -o-object-fit: contain;
  object-fit: contain;
  background-color: #eee;
  width: 100%
}

.photo-block figure figcaption {
  display: none
}

@media screen and (min-width: 1025px) {
  .photo-block figure figcaption {
    display: block;
    margin-top: 15px;
    text-align: center
  }
}

.modal-block {
  display: none
}

.modal-window {
  text-align: center
}

.modal-window img {
  aspect-ratio: 375/270;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 15px 0
}

.modal-window figcaption {
  color: #fff;
  position: absolute;
  max-width: 460px;
  left: 15px;
  width: calc(100% - 30px);
  text-align: left
}

@media screen and (min-width: 490px) {
  .modal-window figcaption {
    left: calc(50% - 230px)
  }
}

#cboxOverlay::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  margin: 20px;
  background-image: url(../img/close-icon.svg);
  color: #fff
}

#cboxContent {
  background-color: rgba(0, 0, 0, 0)
}

#cboxNext,
#cboxPrevious {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 30px;
  height: 30px;
  background-color: rgba(51, 51, 51, .6);
  border-radius: 0;
  margin: 0 6px;
  cursor: pointer
}

@media screen and (min-width: 1025px) {

  #cboxNext:hover,
  #cboxPrevious:hover {
    opacity: .75
  }
}

#cboxNext::before,
#cboxPrevious::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 10px;
  background-image: url(../img/chevron-right-icon.svg)
}

#cboxPrevious::before {
  transform: translate(-50%, -50%) rotate(180deg)
}

.staff-img {
  margin-top: 20px
}

@media screen and (min-width: 600px) {
  .staff-img {
    width: 50%;
    margin-right: 20px;
    margin-top: 30px
  }
}

@media screen and (min-width: 1025px) {
  .staff-img {
    margin-right: 40px
  }
}

.staff-img img {
  border-radius: 20px;
  aspect-ratio: 460/331;
  -o-object-fit: contain;
  object-fit: contain;
  background-color: #eee;
  width: 100%
}

.staff-img figcaption {
  margin-top: 15px;
  text-align: center
}

@media screen and (min-width: 1025px) {
  .staff-img figcaption {
    font-size: 14px
  }
}

.profile {
  border: none
}

@media screen and (min-width: 600px) {
  .profile {
    margin-top: 0
  }

  .profile h3 {
    margin-top: 30px
  }
}

.profile p {
  margin-top: 15px
}

@media screen and (min-width: 1025px) {
  .profile p {
    margin-top: 30px
  }
}

.message {
  border: none;
  background-image: linear-gradient(to right, #ddd, #ddd 6px, transparent 6px);
  background-size: 12px 1px;
  background-position: left top;
  background-repeat: repeat-x
}

.message h3 {
  padding-top: 40px
}

@media screen and (min-width: 1025px) {
  .message h3 {
    padding-top: 60px
  }
}

.message .full-message {
  margin-top: 15px
}

@media screen and (min-width: 1025px) {
  .message .full-message {
    margin-top: 30px
  }
}

.plan-and-price {
  border: none;
  margin-top: 30px
}

@media screen and (min-width: 1025px) {
  .plan-and-price {
    padding-bottom: 20px
  }
}

.plan-and-price .outline-text {
  margin-top: 15px
}

.plan-and-price h2 {
  font-size: 20px
}

@media screen and (min-width: 1025px) {
  .plan-and-price h2 {
    font-size: 30px
  }
}

.plan-and-price .plan:not(:first-of-type) {
  margin-top: 40px;
  padding-top: 10px;
  background-image: linear-gradient(to right, #ddd, #ddd 6px, transparent 6px);
  background-size: 12px 1px;
  background-position: left top;
  background-repeat: repeat-x
}

@media screen and (min-width: 1025px) {
  .plan-and-price .plan:not(:first-of-type) {
    margin-top: 60px
  }
}

.plan-and-price h3 {
  margin-top: 30px
}

@media screen and (min-width: 1025px) {
  .plan-and-price h3 {
    margin-top: 50px
  }
}

.plan-and-price .plan-detail {
  margin-top: 40px
}

@media screen and (min-width: 1025px) {
  .plan-and-price .plan-detail {
    margin-top: 53px
  }
}

.plan-and-price .plan-detail:first-of-type {
  margin-top: 20px
}

@media screen and (min-width: 1025px) {
  .plan-and-price .plan-detail:first-of-type {
    margin-top: 28px
  }
}

.plan-and-price h4 {
  font-size: 15px
}

@media screen and (min-width: 1025px) {
  .plan-and-price h4 {
    font-size: 20px
  }
}

@media screen and (min-width: 1025px) {
  .plan-and-price table {
    margin-top: 24px
  }
}

.plan-and-price table tr {
  border: none !important
}

.plan-and-price table th {
  display: none;
  background-color: #e8e4d5;
  padding: 8px 10px
}

.plan-and-price table td {
  display: block;
  padding-bottom: 20px
}

.plan-and-price table td::before {
  content: attr(data-label);
  display: block;
  background-color: #e8e4d5;
  margin-bottom: 10px;
  padding: 8px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold
}

@media screen and (min-width: 600px) {

  .plan-and-price table th,
  .plan-and-price table td {
    display: table-cell;
    text-align: center;
    padding: 8px 10px
  }

  .plan-and-price table td::before {
    display: none
  }
}

@media screen and (min-width: 1025px) {

  .plan-and-price table th,
  .plan-and-price table td {
    padding: 12px 10px
  }
}

.plan-and-price table,
.plan-and-price th,
.plan-and-price td {
  border: none
}

@media screen and (min-width: 600px) {

  .plan-and-price table,
  .plan-and-price th,
  .plan-and-price td {
    border: 1px solid #ccc
  }
}

.plan-and-price .risk {
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 20px
}

@media screen and (min-width: 600px) {
  .plan-and-price .risk {
    margin-top: 20px
  }
}

@media screen and (min-width: 1025px) {
  .plan-and-price .risk {
    padding: 30px 30px 40px;
    margin-top: 30px
  }
}

.plan-and-price h5 {
  margin-bottom: 15px;
  font-size: 13px
}

@media screen and (min-width: 1025px) {
  .plan-and-price h5 {
    font-size: 16px
  }
}

.detail-access .map {
  margin-top: 20px
}

@media screen and (min-width: 600px) {
  .detail-access .map {
    height: 500px
  }
}

@media screen and (min-width: 1025px) {
  .detail-access .map {
    margin-top: 50px
  }
}

.detail-access table {
  margin-top: 30px
}

.detail-access table th {
  padding: 15px 0
}

.detail-access table td {
  padding-bottom: 15px
}

@media screen and (min-width: 600px) {

  .detail-access table th,
  .detail-access table td {
    padding: 15px 0
  }
}

@media screen and (min-width: 1025px) {
  .detail-access table {
    margin-top: 50px
  }

  .detail-access table th,
  .detail-access table td {
    padding: 30px 0
  }
}

.detail-access .detail-block {
  border-top: none;
  margin-top: 0
}

.detail-access .share-color {
  margin-top: 30px
}

@media screen and (min-width: 1025px) {
  .detail-access .share-color {
    margin-top: 50px
  }
}

#wisdom,
#experiences,
#tips {
  margin-top: 50px
}

#new-information .title,
#wisdom .title,
#experiences .title,
#tips .title {
  font-size: 22px
}

@media screen and (min-width: 1025px) {

  #wisdom,
  #experiences,
  #tips {
    margin-top: 100px
  }

  #new-information .title,
  #wisdom .title,
  #experiences .title,
  #tips .title {
    font-size: 34px
  }
}

.accordion {
  display: block;
  overflow: hidden;
  padding: 0;
  margin-top: 25px;
  border-top: solid 1px #e8e4d5
}

@media screen and (min-width: 1025px) {
  .accordion {
    margin-top: 40px
  }
}

.accordion .accordion__item {
  list-style-type: none;
  border-bottom: solid 1px #e8e4d5;
  padding: 0;
  margin: 0
}

.accordion .accordion__item .accordion__header {
  display: block;
  position: relative;
  border: none;
  cursor: pointer;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold;
  text-align: left;
  width: 100%;
  padding: 10px 20px 10px 0
}

@media screen and (min-width: 600px) {
  .accordion .accordion__item .accordion__header {
    padding-top: 16px;
    padding-bottom: 16px
  }
}

.accordion .accordion__item .accordion__header:after {
  content: "";
  background: #f0821e;
  position: absolute;
  height: 2px;
  right: 0;
  top: 50%;
  width: 14px
}

.accordion .accordion__item .accordion__header:before {
  content: "";
  background: #f0821e;
  position: absolute;
  height: 2px;
  right: 0;
  top: 50%;
  width: 14px;
  transform: rotate(90deg);
  transition: all .2s ease-in-out
}

.accordion .accordion__item .accordion__body {
  display: none;
  overflow: hidden;
  font-weight: normal
}

.accordion .accordion__item .accordion__body p {
  margin-bottom: 15px
}

.accordion .accordion__item:first-child .accordion__body {
  display: block
}

.accordion .accordion__item .open:before {
  transform: rotate(0deg)
}

.accordion .accordion__item .accordion-q {
  font-size: 23px;
  color: #75bbff;
  margin-right: 10px;
  line-height: 1;
  vertical-align: baseline
}

.accordion .accordion__item .accordion-a {
  font-size: 23px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold;
  color: #ff8d8d;
  margin-right: 10px;
  line-height: 1;
  vertical-align: baseline
}

.accordion .accordion__item .experiences {
  margin-right: 10px
}

.accordion .accordion__item .experiences img {
  width: 24px;
  height: auto
}

.header-search-wrapper {
  padding: 15px 20px
}

@media screen and (min-width: 1025px) {
  .header-search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .header-search-wrapper .logo img {
    margin: 0 0 10px
  }
}

.header-search-wrapper .header-search-block {
  margin-top: 20px
}

.header-search-wrapper .header-search-block input {
  padding: 10px;
  width: 39%;
  height: 44px
}

.header-search-wrapper .header-search-block input:first-of-type {
  border-radius: 5px 0 0 5px
}

.header-search-wrapper .header-search-block input:nth-of-type(2) {
  border-radius: 0
}

.header-search-wrapper .header-search-block button {
  margin-top: 0;
  width: 22%;
  border-radius: 0 5px 5px 0;
  font-size: 13px;
  height: 44px
}

.header-search-wrapper .header-search-block button img {
  margin-right: 7px;
  padding: 0;
  width: 11px;
  height: 11px;
  vertical-align: middle
}

@media screen and (min-width: 1025px) {
  .header-search-wrapper .header-search-block {
    margin: 0
  }

  .header-search-wrapper .header-search-block input {
    padding: 10px 20px;
    width: 200px;
    height: 50px;
    font-size: 14px
  }

  .header-search-wrapper .header-search-block input:first-of-type {
    border-radius: 10px 0 0 10px
  }

  .header-search-wrapper .header-search-block button {
    padding: 12px 0;
    width: 100px;
    border-radius: 0 10px 10px 0;
    font-size: 18px;
    height: 50px
  }

  .header-search-wrapper .header-search-block button img {
    margin-right: 10px;
    width: 16px;
    height: 16px
  }
}

.new-information-list #new-information,
.wisdom-list #wisdom,
.experiences-list #experiences,
.tips-list #tips {
  margin-top: 15px
}

@media screen and (min-width: 1025px) {

  .new-information-list #new-information,
  .wisdom-list #wisdom,
  .experiences-list #experiences,
  .tips-list #tips {
    margin-top: 25px
  }
}

.new-information-list .new-information-list-title
.wisdom-list .wisdom-list-title,
.experiences-list .experiences-list-title,
.tips-list .tips-list-title {
  display: block
}

@media screen and (min-width: 1025px) {
  .new-information-list .new-information-list-title,
  .wisdom-list .wisdom-list-title,
  .experiences-list .experiences-list-title,
  .tips-list .tips-list-title {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
}

.new-information-list .new-information-list-title .badge-block,
.wisdom-list .wisdom-list-title .badge-block,
.experiences-list .experiences-list-title .badge-block,
.tips-list .tips-list-title .badge-block {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0 !important
}

.new-information-list .new-information-list-title .badge-block,
.wisdom-list .wisdom-list-title .badge-block .badge-content,
.experiences-list .experiences-list-title .badge-block .badge-content,
.tips-list .tips-list-title .badge-block .badge-content {
  display: flex;
}

@media screen and (min-width: 1025px) {

  .new-information-list .new-information-list-title .badge-block,
  .wisdom-list .wisdom-list-title .badge-block .badge-content,
  .experiences-list .experiences-list-title .badge-block .badge-content,
  .tips-list .tips-list-title .badge-block .badge-content {
    margin-top: 0 !important;
  }
}

.new-information-list .new-information-list-title .badge-block .badge,
.wisdom-list .wisdom-list-title .badge-block .badge,
.experiences-list .experiences-list-title .badge-block .badge,
.tips-list .tips-list-title .badge-block .badge {
  align-self: flex-start;
  border-radius: 100px;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold;
  padding: 2px 10px
}

@media screen and (min-width: 1025px) {

  .new-information-list .new-information-list-title .badge-block .badge,
  .wisdom-list .wisdom-list-title .badge-block .badge,
  .experiences-list .experiences-list-title .badge-block .badge,
  .tips-list .tips-list-title .badge-block .badge {
    font-size: 11px
  }
}

.new-information-list .new-information-list-title .badge-block .badge-text,
.wisdom-list .wisdom-list-title .badge-block .badge-text,
.experiences-list .experiences-list-title .badge-block .badge-text,
.tips-list .tips-list-title .badge-block .badge-text {
  margin: 0 10px 0 5px;
  font-size: 11px;
  color: #797979;
  padding: 2px 0
}

@media screen and (min-width: 1025px) {

  .new-information-list .new-information-list-title .badge-block .badge-text,
  .wisdom-list .wisdom-list-title .badge-block .badge-text,
  .experiences-list .experiences-list-title .badge-block .badge-text,
  .tips-list .tips-list-title .badge-block .badge-text {
    font-size: 12px
  }
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px
}

@media screen and (min-width: 1025px) {
  .pagination {
    margin-top: 50px
  }
}

.pagination .page-item {
  text-align: center;
  width: 34px;
  height: 34px;
  background-color: #fff;
  font-size: 16px;
  border-radius: 5px
}

.pagination .page-item a {
  border-radius: 5px;
  color: #f0821e;
  display: block;
  height: 34px;
  line-height: 34px
}

@media screen and (min-width: 1025px) {
  .pagination .page-item a:hover {
    color: #fff
  }
}

.pagination .page-item.active a,
.pagination .page-item.disabled a {
  color: #fff
}

.pagination .page-item.disabled {
  opacity: .3;
  pointer-events: none
}

.tips {
  display: block;
  overflow: hidden;
  padding: 0;
  margin-top: 25px;
  border-top: solid 1px #e8e4d5
}

@media screen and (min-width: 1025px) {
  .tips {
    margin-top: 40px
  }
}

.tips .tips__item {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  border-bottom: solid 1px #e8e4d5;
  padding: 0;
  margin: 0
}

.tips .tips__item .tips__header {
  display: block;
  position: relative;
  border: none;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold;
  text-align: left;
  width: 100%;
  padding: 10px 20px 10px 0
}

@media screen and (min-width: 600px) {
  .tips .tips__item .tips__header {
    padding-top: 16px;
    padding-bottom: 16px
  }
}

.tips .tips__item .tips-q {
  margin-right: 10px;
  display: flex
}

.wisdom__body p, .experiences__body p {
  white-space: pre-wrap;
}
.lp-tips {
  padding: 0 18px;
}
.new-info-updated-at {
  text-align: right;
  color:#797979;
  font-size: 12px;
  margin-top: -11px;
  margin-bottom: 15px;
}
@media screen and (min-width: 1025px) {
  .new-info-updated-at {
    font-size: 14px;
  }
}