@charset "UTF-8";
:root{
  --color-main: #02817D;
  --color-sub: #E5F2F2;
  --color-orange: #E36701;
  --color-light-orange: #FFF1D9;
  --color-red: #E9053F;
  --color-bg: #f2f2f2;
  --color-text: #404040;
  --color-white: #fff;
  --color-gray: #9F9F9F;
  --color-blue: #0066CC;
  --color-green: #1CA21C;
}
*{
  font-size: 18px;
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  line-height: 1.4;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}
html,body{
  width: 100%;
  height: 100%;
}
body{
  background: var(--color-bg);
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
}
h1,h2,h3,h4,h5,h6{
  font-weight: bold;
  padding: 0;
  margin: 0;
}
ul,li{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
img{
  width: 100%;
  vertical-align: bottom;
}
h2{
  font-weight: bold;
}
button{
  cursor: pointer;
}
input, select{
  cursor: pointer;
  background: transparent;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 28px;
  font-weight: bold;
  padding: 10px 16px 11px 24px;
  box-shadow: 0 3px 6px #00000029;
  width: 100%;
  border: none;
  border-radius: 50px;
}
:focus-visible{
  outline: none;
}
input::-webkit-input-placeholder{
  color: var(--color-gray);
}
input::-moz-placeholder{
  color: var(--color-gray);
}
input::-ms-input-placeholder{
  color: var(--color-gray);
}
input::placeholder{
  color: var(--color-gray);
}
input::-webkit-search-cancel-button{
  cursor: pointer;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/img/r5/btn_delete.svg);
  width: 40px;
  height: 34px;
  margin: 0 0 0 14px;
}
.search input[type="submit"],
.search-submit{
  background: var(--color-main) url(/img/r5/icon_search.svg) no-repeat 32px calc(50% + 1px);
  color: var(--color-white);
  padding: 10px 28px 11px calc(28px + 36px + 10px);
  border-radius: 50px;
  border: 3px solid var(--color-main);
  width: auto;
}
.search-submit{
  width: 171px;
  font-size: 28px;
  font-weight: bold;
}
input[type="search"]{
  padding-right: 32px;
}
.keyword-search input[type="search"]{
  border-radius: 50px 0 0 50px;
  max-width: calc(100% - 171px);
}
.keyword-search input[type="submit"],
.keyword-search .search-submit{
  border-radius: 0 50px 50px 0;
}
.input-wrap,
.select-wrap{
  background: var(--color-white);
  border: 3px solid var(--color-main);
  border-radius: 50px;
  margin-right: 16px;
}
.input-wrap::before,
.select-wrap::before{
  content: '';
  position: absolute;
  top: calc(50% + 2px);
  right: 20px;
  border: 8px solid transparent;
  border-top: 12px solid var(--color-main);
  border-bottom: 0;
  transform: translate(0, -50%);
}
select{
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: calc(16px + 16px + 16px);
}
select::-ms-expand{
  display: none;
}
button{
  font-family: 'Noto Sans JP', sans-serif;
  background: transparent;
  border: none;
}
.tab-reader{
  flex: auto;
}
.tab-reader hr{
  position: relative;
  top: calc(50% - 2px);
  margin: 0 6px;
  border: none;
  border-top: 4px dotted var(--color-text);
}
.icon{
  display: inline-block;
}
.arrow-right{ width: 32px; height: 15px; background: url(/img/r5/icon_arrow-right.svg) no-repeat center center / contain;}
.icon_leaf{ width: 27px; height: 24px; background: url(/img/r5/icon_leaf.svg) no-repeat center center / contain;}
.icon_flag{ width: 22px; height: 27px; background: url(/img/r5/icon_flag.svg) no-repeat center center / contain;}
.icon_walk{ width: 19px; height: 30px; background: url(/img/r5/icon_walk.svg) no-repeat center center / contain;}
.icon_car{ width: 20px; height: 17px; background: url(/img/r5/icon_car.svg) no-repeat center center / contain;}
.icon_bus{ width: 25px; height: 27px; background: url(/img/r5/icon_bus.svg) no-repeat center center / contain;}
.icon_subway{ width: 25px; height: 29px; background: url(/img/r5/icon_subway.svg) no-repeat center center / contain;}
.icon_pin{ width: 26px; height: 36px; background: url(/img/r5/icon_pin.svg) no-repeat center center / contain;}
.icon_clock{ width: 28px; height: 28px; background: url(/img/r5/icon_clock.svg) no-repeat center center / contain;}
.icon_pdf{ width: 28px; height: 28px; background: url(/img/r5/icon_pdf.svg) no-repeat center center / contain;}
/* お役立ち施設icon */
.icon_wifi{ width: 56px; height: 56px; background: url(/img/r5/icon_wifi.png) no-repeat center center / contain;}
.icon_aed{ width: 56px; height: 56px; background: url(/img/r5/icon_aed.png) no-repeat center center / contain;}
.icon_wc{ width: 56px; height: 56px; background: url(/img/r5/icon_wc.png) no-repeat center center / contain;}
.icon_baby{ width: 56px; height: 56px; background: url(/img/r5/icon_baby.png) no-repeat center center / contain;}
.icon_rest{ width: 56px; height: 56px; background: url(/img/r5/icon_rest.png) no-repeat center center / contain;}
.icon_park{ width: 56px; height: 56px; background: url(/img/r5/icon_park.png) no-repeat center center / contain;}
.icon_bicycle{ width: 56px; height: 56px; background: url(/img/r5/icon_bicycle.png) no-repeat center center / contain;}
/* 目的地周辺スポットicon */
.icon_event{ width: 52px; height: 52px; background: url(/img/r5/icon_event.svg) no-repeat center center / contain;}
.icon_restaurant{ width: 52px; height: 52px; background: url(/img/r5/icon_restaurant.svg) no-repeat center center / contain;}
.icon_hospital{ width: 52px; height: 52px; background: url(/img/r5/icon_hospital.svg) no-repeat center center / contain;}
.icon_life{ width: 52px; height: 52px; background: url(/img/r5/icon_life.svg) no-repeat center center / contain;}
/* 共通メニュー */
.icon-notify::after {
	content: "";
	position: absolute;
	top: -10%;
	right: -10%;
	width: 35%;
	height: 35%;
	background-color: red;
	border-radius: 50%;
}
.menu-notify::after {
	content: "";
	position: absolute;
	top: -30px;
	right: 10px;
	width: 14px;
	height: 14px;
	background-color: red;
	border-radius: 50%;
}
iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
}
@media screen and (max-width:799px){
  *{
    font-size: 16px;
  }
  input, select{
    font-size: 24px;
    padding: 12px calc(24px + 16px + 24px) 14px 24px;
  }
  /* email, password欄のplaceholder文字を全て表示 */
  input[type="email"],
  input[type="password"],
  input[id="password"][type="text"],
  input[id="password-confirm"][type="text"],
  input[id="username"][type="text"]{
    font-size: 18px;
  }
  input[type="email"]::placeholder,
  input[type="password"]::placeholder,
  input[id="password-confirm"][type="text"]::placeholder,
  input[id="password"][type="text"]::placeholder,
  input[id="username"][type="text"]::placeholder{
    font-size: 10px;
  }
  input[type="search"]{
    padding-right: 10px;
  }
  input::-webkit-search-cancel-button{
    margin-left: 10px;
  }
  .search input[type="submit"],
  .search-submit{
    background-position: calc(50% - 2px) 8px;
    background-size: 28px 28px;
    font-size: 16px;
    padding: 36px 24px 0 17px;
  }
  .search-submit{
    width: 76px;
    padding: 34px 4px 0 0;
  }
  .keyword-search input[type="search"]{
    max-width: calc(100% - 76px);
  }
}

/********************/
.sp{
  display: none;
}
.tc{
  display: none;
}
@media screen and (max-width:1023px){
  .tc{
    display: block;
  }
}
@media screen and (max-width:799px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .tc{
    display: none;
  }
}

/********************/


/*
* メニューバー #menu
*/
#menu{
  background: #fff;
  width: 198px;
  max-height: 100vh;
  overflow-y: auto;
  z-index: 999;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#menu::-webkit-scrollbar{
  display: none;
}
#menu header{
  text-align: center;
  padding: 22px 0 32px;
}
#menu h1 button{
  display: block;
  background: #fff;
  width: calc(126px + 20px);
  height: calc(40px + 20px);
  padding: 10px;
}
.menu-list{
  min-height: calc(100vh - (40px + 20px + (22px + 32px))); /* 100% - ヘッダーの高さ */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.menu-list li{
  margin: 0 auto 6px;
}
.menu-list li>*{
  color: var(--color-text);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 4px 10px 24px;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
}
.menu-list >* span{
  display: block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 20px;
  box-shadow: 0 3px 6px #00000029;
}
.menu-list >* span svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: var(--color-main);
}
.my-page .menu-list .menu-my-page button,
.info .menu-list .menu-info button{
  pointer-events: none;
  background: var(--color-sub);
  padding-right: 0;
  border-right: 4px solid var(--color-main);
}
.my-page .menu-list .menu-my-page button span,
.info .menu-list .menu-info button span{
  background: var(--color-main);
}
.my-page .menu-list .menu-my-page button span svg,
.info .menu-list .menu-info button span svg{
  fill: var(--color-white);
}
.my-page .menu-list .menu-my-page button,
.info .menu-list .menu-info button{
  color: var(--color-main);
}
.menu-list .quit{
  background: var(--color-sub);
  margin: 16px;
  padding: 16px;
  border-radius: 6px;
}
.menu-list .quit p.title{
  font-weight: bold;
  margin-bottom: 14px;
}
.menu-list .quit p.note{
  font-size: 14px;
  margin-bottom: 10px;
}
.menu-list .quit button{
  display: block;
  width: 100%;
  background: var(--color-white);
  font-weight: bold;
  padding: 3px 10px 4px;
  border: 2px solid var(--color-gray);
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000029;
}
#menu-btn,
#menu-bg{
  display: none;
}
@media screen and (max-width:599px){
  #menu{
    position: fixed;
    width: 100%;
    height: 100%;
    background: transparent;
    visibility: hidden;
    z-index: 9999;
    transition: .3s;
  }
  #menu.open{
    visibility: visible;
    opacity: 1;
  }
  #menu-bg{
    position: fixed;
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100%;
    background: #000c;
    opacity: 0;
    transition: .3s;
  }
  #menu-bg.active{
    visibility: visible;
    opacity: 1;
  }
  .menu-inner{
    width: calc(198px + 32px * 2);
    position: absolute;
    background: var(--color-white);
    top: 0;
    right: -262px;
    padding: 80px 0 0;
    transition: .3s;
  }
  #menu.open .menu-inner{
    right: 0;
  }
  #menu header{
    padding: 0 0 32px;
  }
  .menu-list{
    min-height: calc(100vh - (80px + 40px + 20px + 32px)); /* 100% - ヘッダーの高さ */
  }
  .menu-list ul{
    padding: 0 32px;
  }
  .menu-list li{
    margin-bottom: 16px;
  }
  .my-page .menu-list .menu-my-page button,
  .info .menu-list .menu-info button{
    pointer-events: all;
    background: transparent;
    border: none;
  }
  .my-page .menu-list .menu-my-page button span,
  .info .menu-list .menu-info button span{
    background: var(--color-white);
  }
  .my-page .menu-list .menu-my-page button span svg,
  .info .menu-list .menu-info button span svg{
    fill: var(--color-main);
  }
  .my-page .menu-list .menu-my-page button,
  .info .menu-list .menu-info button{
    color: var(--color-text);
  }
  .menu-list .quit button{
    width: fit-content;
    margin: 0 auto;
    padding: 3px 32px 4px;
  }
  #menu-btn{
    cursor: pointer;
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 70px;
    height: 60px;
    background: var(--color-white);
    border: 3px solid var(--color-main);
    border-radius: 6px;
    box-shadow: 0 3px 6px #00000029;
    transition: .3s;
    z-index: 9999;
  }
  #menu-btn p{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }
  #menu-btn.active p.menu-btn-open{
    display: none;
  }
  #menu-btn p.menu-btn-close{
    display: none;
  }
  #menu-btn.active p.menu-btn-close{
    display: block;
  }
  #menu-btn .menu-btn-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 21px;
    margin: 10px auto 2px;
  }
  #menu-btn .menu-btn-icon span{
    background: var(--color-main);
    width: 100%;
    height: 3px;
    border-radius: 2px;
    opacity: 1;
    transition: .3s;
  }
  #menu-btn.active .menu-btn-icon span:nth-child(1){
    transform: rotate(45deg) translate(7px, 7px);
  }
  #menu-btn.active .menu-btn-icon span:nth-child(2){
    opacity: 0;
  }
  #menu-btn.active .menu-btn-icon span:nth-child(3){
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

/*
* footer
*/
footer{
  background: var(--color-main);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  padding: 4px 0;
}
footer .copyright{
  font-size: 14px;
  color: var(--color-white);
}

/*
* 基本操作画面 .main
*/
.body-inner{
  display: flex;
  justify-content: space-between;
  min-height: 100vh;
}
.main{
  width: calc(100% - 198px);
  max-height: 100vh;
  overflow-y: auto;
}
.main-no-auth{
  width: 100%;
}
.inner{
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.main>.inner{
  min-height: calc(100% - (62px + 32px + 28px));
  padding-bottom: 16px;
}
.page-title{
  background: var(--color-main);
  margin-bottom: 32px;
}
.page-title h2{
  font-size: 28px;
  line-height: 62px;
  color: var(--color-white);
}
h3{
  color: var(--color-main);
  font-size: 28px;
  margin-bottom: 10px;
}
.img{
  width: 100%;
  margin: 0 auto;
}
.lead{
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 32px;
}
.bottom-btn-wrap{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.bottom-btn-wrap .btn{
  margin: 0;
}
.btn-wrap{
  margin: 0 auto;
}
.btn-wrap li{
  margin: 0 0 32px 32px;
}
.btn-wrap.btn-column-2 li{
  width: calc((100% - 32px) / 2);
}
.btn-wrap.btn-column-2 li:nth-child(2n+1){
  margin-left: 0;
}
.btn-wrap.btn-column-3 li{
  width: calc((100% - 32px * 2) / 3);
}
.btn-wrap.btn-column-3 li:nth-child(3n+1){
  margin-left: 0;
}
.btn,
.btn-long-label
{
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  width: 100%;
  max-width: 248px;
  height: 72px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  border: 3px solid var(--color-main);
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000029;
  color: var(--color-main);
  line-height: 1.4;
}
.btn-word-break
{
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.btn span{
  display: block;
  margin-right: 10px;
}
.btn-return{
  border-color: var(--color-gray);
  color: var(--color-text);
  margin-top: 16px;
}
.btn-go-start:before{
  content: '';
  display: inline-block;
  width: 88px;
  height: 28px;
  margin: -4px 3px 0 0;
  background: url("/img/r5/header-logo.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.bottom-btn-wrap .btn{
  order: 2;
}
.bottom-btn-wrap .btn-return{
  order: 1;
  margin-right: 32px;
}
.useful-spot .bottom-btn-wrap .btn:nth-child(2),
.spot-near .bottom-btn-wrap .btn:nth-child(1){
  margin-right: 32px;
}
.useful-spot .bottom-btn-wrap .btn:nth-child(1){
  order: 3;
}
.btn-gr{
  background: var(--color-main);
  color: var(--color-white);
}
#btn-top-scroll{
  max-width: unset;
  width: fit-content;
  margin: 32px auto 16px;
  padding: 0 32px;
  border-color: var(--color-gray);
  color: var(--color-text);
}
.btn.btn-detail span{
  background: url(/img/r5/icon_detail.svg) no-repeat center center / contain;
  width: 30px;
  height: 30px;
}
.btn.btn-map {
  font-size: 24px;
  height: 42px;
}
.btn.btn-map span{
  background: url(/img/r5/icon_pin.svg) no-repeat center center / contain;
  height: 28px;
  width: 28px
}
.btn.btn-route span{
  background: url(/img/r5/icon_walk.svg) no-repeat center center / contain;
  width: 19px;
  height: 30px;
}
.btn.btn-route-standalone {
  margin-top: 16px;
}
.note{
  margin-bottom: 16px;
}
.note p{
  font-size: 20px;
  text-indent: -20px;
  padding-left: 20px;
}
.include-accordion.note{
  margin-bottom: 16px;
}
.accordion-btn{
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #0066CC;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
  transition: .3s;
}
.include-accordion.active .accordion-btn{
  margin-bottom: 16px;
}
.accordion-btn span{
  background: url(/img/r5/icon_attention.svg) no-repeat center center / contain;
  display: block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  filter: drop-shadow(0 3px 6px #00000029);
}
.accordion-btn span.icon_clock{
  width: 28px;
  height: 28px;
  background: url(/img/r5/icon_clock.svg) no-repeat center center / contain;
}
.accordion-subject-body{
  display: none;
}
.accordion-subject-body li{
  display: none;
}
.accordion-body{
  height: 0;
  overflow: hidden;
  transition: .3s;
}
.list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-white);
  margin-bottom: 16px;
  padding: 16px 32px 16px 16px;
  border: 1px solid var(--color-gray);
  border-radius: 16px;
  transition: .3s;
}
.list-item.hidden{
  display: none;
  opacity: 0;
  height: 0;
}
ol>.list-item{
  margin-left: 32px;
  border-left: none;
  border-radius: 0 16px 16px 0;
  counter-increment: cnt;
}
ol>.list-item.hidden{
  display: none;
  opacity: 0;
  transition: .3s;
  height: 0;
}
ol>.list-item::before{
  content: counter(cnt);
  position: absolute;
  top: -1px;
  left: -32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-weight: bold;
  font-size: 24px;
  width: 30px;
  height: 100%;
  background: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: 16px 0 0 16px;
}
.spot-title{
  background: var(--color-sub);
  min-height: 78px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
  padding: 0 16px 0 calc(16px + 8px);
  border-radius: 10px;
  overflow: hidden;
}
.spot-title::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: var(--color-main);
}
.spot-title p{
  overflow: auto;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}
.list .spot-title p{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.favorite,
.outing{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
  font-size: 22px;
  font-weight: bold;
  text-decoration: underline;
  transition: .3s;
}
.favorite span,
.outing span{
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  filter: drop-shadow(0 3px 6px #00000029);
  transition: .3s;
}
.favorite-add,
.outing-add{
  color: var(--color-main);
}
.favorite-add span,
.outing-add span{
  background: url(/img/r5/icon_add.svg) no-repeat center center / contain;
}
.favorite-delete,
.outing-delete{
  color: var(--color-red);
}
.favorite-delete span,
.outing-delete span{
  background: url(/img/r5/icon_delete.svg) no-repeat center center / contain;
}
/* スライダー */
.swiper-slide{
  visibility: hidden;
}
.swiper-slide-active{
  visibility: visible;
}
.swiper_info ul{
  padding-bottom: 1px;
  overflow: hidden;
}
.btn-prev,
.btn-next{
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 72px;
  padding: 17px;
  z-index: 1;
}
.btn-prev{
  left: 0;
}
.btn-next{
  right: 0;
}
.btn-prev img{
  transform: rotate(-180deg);
}
@media screen and (max-width:1069px){
  .useful-spot .bottom-btn-wrap,
  .spot-near .bottom-btn-wrap{
    display: block;
  }
  .useful-spot .bottom-btn-wrap .btn,
  .spot-near .bottom-btn-wrap .btn{
    margin: 32px auto 0 !important;
  }
}
@media screen and (max-width:799px){
  .inner{
    padding: 0 16px;
  }
  .main>.inner{
    min-height: calc(100% - (62px + 16px + 28px));
    padding-bottom: 32px;
  }
  .page-title{
    margin-bottom: 16px;
  }
  .page-title h2{
    font-size: 24px;
    line-height: 62px;
    padding: 0;
  }
  .spot-near .page-title h2{
    font-size: 22px;
  }
  h3{
    font-size: 24px;
    margin-bottom: 4px;
  }
  .lead{
    font-size: 24px;
    margin-bottom: 16px;
  }
  .bottom-btn-wrap{
    display: block;
  }
  .bottom-btn-wrap .btn{
    margin: 32px auto 0 !important;
  }
  .btn-wrap li{
    margin: 0 0 16px 16px;
  }
  .btn-wrap.btn-column-2{
    max-width: calc(248px * 2 + 16px);
  }
  .btn-wrap.btn-column-2 li{
    width: calc((100% - 16px) / 2);
    margin-left: 16px;
  }
  .btn-wrap.btn-column-3{
    max-width: calc(248px * 3 + 16px * 2);
  }
  .btn-wrap.btn-column-3 li{
    width: calc((100% - 16px * 2) / 3);
  }
  .btn{
    font-size: 24px;
  }
  .btn-long-label{
    font-size: 22px;
  }
  .btn-return{
    margin-top: 32px;
  }
  #btn-top-scroll{
    margin-bottom: 0;
  }
  .list-item{
    flex-direction: column;
    padding: 16px;
  }
  .note p{
    font-size: 16px;
    text-indent: -16px;
    line-height: 1.6;
    padding-left: 16px;
  }
  .spot-title p{
    font-size: 20px;
  }
  .btn-prev,
  .btn-next{
    width: 46px;
    height: 46px;
    padding: 12px;
  }
}
@media screen and (max-width:599px){
  .main{
    width: 100%;
  }
  .btn-wrap li{
    width: 100%;
  }
  .btn-wrap.btn-column-2 li{
    width: 100%;
    margin-left: 0;
  }
  .btn-wrap.btn-column-3 li{
    width: calc((100% - 16px) / 2);
  }
}
@media screen and (max-width:380px){
  .btn-long-label{
    font-size: 20px;
  }
}

/*
* モーダル .modal-content
*/
.modal-wrap{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000c;
  z-index: 9999;
}
.modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-height: 100%;
  padding: 16px;
  overflow: scroll;
  animation: show .3s;
  scrollbar-width: none;
}
@keyframes show{
  from{
    top: calc(50% - 20px);
    opacity: 0;
  }
  to{
    top: 50%;
    opacity: 1;
  }
}
.modal::-webkit-scrollbar{
  display: none;
}
.modal-s{
  max-width: calc(640px + 16px * 2);
}
.modal-l{
  max-width: calc(872px + 16px * 2);
}
.modal-content{
  padding: 32px 56px;
  background: #fff;
  border-radius: 0 0 6px 6px;
}
.modal-l .modal-content{
  padding: 32px;
}
.modal-title{
  background: var(--color-main);
  color: var(--color-white);
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  padding: 9px 0 11px;
  border-radius: 6px 6px 0 0;
}
.modal-text{
  text-align: center;
  margin-bottom: 32px;
}
.modal .btn-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: -32px;
}
.modal-btn-close{
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 48px auto 0;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.4;
}
.modal-btn-close span{
  background: var(--color-main) url(/img/r5/icon_close.svg) no-repeat center center;
  width: 46px;
  height: 46px;
  margin-right: 10px;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 50px;
}
@media screen and (max-width:799px){
  .modal .btn-wrap{
    margin-bottom: -16px;
  }
  .modal-title{
    font-size: 24px;
    padding: 14px 0 15px;
  }
  .modal-content,
  .modal-l .modal-content{
    padding: 16px 16px 32px;
  }
  .modal-text{
    margin-bottom: 16px;
  }
  .modal-l .btn-wrap li a{
    width: auto;
    padding: 0 6px;
  }
  .modal-btn-close{
    font-size: 24px;
    margin-top: 32px;
  }
}
@media screen and (max-width:599px){
  .modal .btn-wrap.btn-column-3 li{
    width: calc((100% - 16px) / 2);
  }
  .modal .btn-wrap.btn-column-3 li:nth-child(3n+1){
    margin-left: 16px;
  }
  .modal .btn-wrap.btn-column-3 li{
    margin-left: 16px;
  }
  .modal .btn-wrap.btn-column-3 li:nth-child(2n+1){
    margin-left: 0;
  }
}
/* お知らせ #modal-news */
.news-list ul,
.usage-list ul,
.modal-list ul{
  word-break: break-all;
  max-height: 52vh;
  margin-right: -46px;
  padding-right: 46px;
}
.simplebar-track.simplebar-vertical{
  width: 34px !important;
}
.simplebar-track.simplebar-vertical::before{
  content: '';
  background: var(--color-gray);
  border-radius: 3px;
  position: absolute;
  width: 6px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.simplebar-track.simplebar-horizontal{
  display: none;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar{
  background: var(--color-main) url(/img/r5/icon_arrow-down.svg) no-repeat center center;
  width: 34px;
  height: 56px;
  border-radius: 50px;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar::before{
  content: none;
}
.sp-tc .news-list,
.sp-tc .usage-list,
.sp-tc .modal-list{
  max-height: 52vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-main) var(--color-gray);
  margin-right: -4px;
}
.sp-tc .news-list::-webkit-scrollbar,
.sp-tc .usage-list::-webkit-scrollbar,
.sp-tc .modal-list::-webkit-scrollbar{
  width: 6px;
}
.sp-tc .news-list::-webkit-scrollbar-track,
.sp-tc .usage-list::-webkit-scrollbar-track,
.sp-tc .modal-list::-webkit-scrollbar-track{
  background: var(--color-gray);
  border-radius: 3px;
}
.sp-tc .news-list::-webkit-scrollbar-thumb,
.sp-tc .usage-list::-webkit-scrollbar-thumb,
.sp-tc .modal-list::-webkit-scrollbar-thumb{
  background: var(--color-main);
  border-radius: 3px;
}
.sp-tc .news-list ul,
.sp-tc .usage-list ul,
.sp-tc .modal-list ul{
  max-height: none;
  margin-right: 0;
  padding-right: 32px;
}
.news-list li,
.usage-list li,
.modal-list li{
  border-top: 1px solid var(--color-gray);
}
.news-list li{
  padding: 16px 0 32px;
}
.usage-list li,
.modal-list li{
  padding: 16px 0;
}
.news-list li:nth-child(1),
.usage-list li:nth-child(1),
.modal-list li:nth-child(1){
  padding-top: 0;
  border: none;
}
.news-day{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.news-day span{
  background: var(--color-red);
  color: var(--color-white);
  line-height: 1;
  margin-left: 10px;
  padding: 0 16px 2px;
}
.news-title,
.usage-title,
.modal-list-title{
  color: var(--color-main);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 6px;
}
.news-detail,
.usage-detail,
.modal-list-detail{
  line-height: 1.5;
}
.news-detail ol{
  padding: 9px 0 9px;
}
.news-detail li{
  padding: 0px 0 0px;
  padding-left: 18px;
  text-indent: -18px;
  border: none;
}
.news-list a,
.usage-list a,
.modal-list a,
.modal-text a{
  color: var(--color-blue);
  text-decoration: underline;
}
/* 問い合わせ #modal-contact */
#modal-contact .modal-text{
  text-align: left;
  margin-bottom: 48px;
}
.modal-contact-detail{
  font-weight: bold;
}
.modal-contact-detail p{
  font-size: 20px;
  text-align: center;
  margin-bottom: 6px;
}
.modal-contact-detail div{
  color: var(--color-main);
  font-size: 28px;
  line-height: 1.6;
  width: fit-content;
  margin: 0 auto;
}
.modal-btn-tel{
  display: none;
}
.modal-btn-tel p{
  color: var(--color-main);
  font-size: 24px;
}
/* ご確認ください #modal-outing-note */
#modal-outing-note .modal-text{
  text-align: left;
}
@media screen and (max-width:799px){
  /* お知らせ #modal-news */
  .news-title{
    font-size: 18px;
  }
  .news-list ul,
  .usage-list ul,
  .modal-list ul{
    margin-right: -6px;
    padding-right: 44px;
  }

  /* 問い合わせ #modal-contact */
  .modal-contact-detail div{
    font-size: 24px;
  }
  .modal-btn-tel{
    display: flex;
    margin-top: 32px;
  }
  .modal-btn-tel span{
    background: url(/img/r5/icon-call.svg) no-repeat center center / contain;
    width: 36px;
    height: 36px;
    margin-right: 16px;
  }
}

/*
* マイページ .my-page
*/
.my-page .banner-slider{
  width: 100%;
  max-width: 1700px;
  margin: 32px auto 0;
  padding: 0 calc(40px + 16px + 8px) calc(16px + 16px * 2);
}
.my-page .banner-slider .swiper-wrapper{
  width: fit-content;
  margin: 0 auto;
}
.my-page .banner-slider .swiper-slide{
  visibility: visible;
}
.my-page .banner-slider .swiper-slide-inner{
  padding: 0 8px;
}
.my-page .banner-slider .swiper-slide-inner img{
  border-radius: 16px;
}
.my-page .banner-slider .btn-prev,
.my-page .banner-slider .btn-next{
  transform: translate(0, calc(-50% - (16px + 16px * 2) / 2));
  width: 40px;
  height: 40px;
  padding: 8px;
}
.my-page .banner-slider .btn-prev.swiper-button-lock,
.my-page .banner-slider .btn-next.swiper-button-lock{
  display: flex;
}
.my-page .banner-slider .btn-prev{
  left: 16px;
}
.my-page .banner-slider .btn-next{
  right: 16px;
}
.my-page .banner-slider .btn.d-none{
  display: none;
}
.my-page .banner-slider .pagination{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.my-page .banner-slider .swiper-pagination-bullet{
  width: 16px;
  height: 16px;
  background: transparent;
  margin: 0 !important;
  border: 1px solid var(--color-main);
  opacity: 1;
}
.my-page .banner-slider .swiper-pagination-bullet-active{
  background: var(--color-main);
}
.my-page .keyword-search-title,
.my-page .cat-search-title,
.my-page .keyword-search-note{
  display: none;
}
.my-page .keyword-search{
  display: none;
  width: 100%;
  margin: 0 auto 32px;
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000029;
}
.my-page .keyword-search input[type="search"]{
  background: var(--color-white);
  border: 3px solid var(--color-main);
}
.my-page .keyword-search input[type="search"],
.my-page .keyword-search input[type="submit"]{
  box-shadow: none;
}
.my-page .keyword-search-note{
  font-size: 20px;
  font-weight: bold;
}
.my-page .cat-list{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: -32px;
}
.my-page .cat-list li .btn{
  display: flex;
  text-align: center;
  max-width: 100%;
  height: 158px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}
.my-page .cat-list li .img{
  width: 100%;
  max-width: 133px;
  height: 100%;
}
.my-page .cat-list li .img img{
  height: 100%;
  object-fit: cover;
}
.my-page .cat-list li .img img.full {
  display: block;
}
.my-page .cat-list li .img img.mobile {
  display: none;
}
.my-page .cat-list li span{
  color: var(--color-main);
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 16px;
}
@media screen and (max-width:799px){
  .my-page .banner-slider:has(.d-none){
    padding: 0 8px calc(10px + 16px * 2);
  }
  .my-page .banner-slider .swiper-slide{
    width: 100% !important;
  }
  .my-page .banner-slider .swiper-slide-inner img{
    border-radius: 12px;
  }
  .my-page .banner-slider .pagination{
    gap: 10px;
  }
  .my-page .banner-slider .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
  }
  .my-page .cat-list{
    margin-bottom: -16px;
  }
  .my-page .cat-list li{
    width: 100%;
    margin: 0 0 16px 0;
  }
  .my-page .cat-list li .btn{
    height: 120px;
  }
  .my-page .cat-list li .img{
    max-width: 136px;
  }
  .my-page .cat-list li .img img.full {
    display: none;
  }
  .my-page .cat-list li .img img.mobile {
    display: block;
  }
  .my-page .keyword-search-title,
  .my-page .keyword-search-note{
    display: block;
  }
  .my-page .keyword-search-note.pc{
    display: none;
  }
  .my-page .cat-search-title{
    display: block;
  }
  .my-page .keyword-search{
    display: flex;
    margin-bottom: 4px;
  }
  .my-page .keyword-search-note{
    font-size: 16px;
    text-align: center;
    margin-bottom: 16px;
  }
  .my-page .cat-list li span{
    font-size: 17px;
  }
}
@media screen and (max-width:599px){
  .my-page .cat-list li .btn{
    height: 80px;
  }
}

/* モーダル */
#js-modal_my-page .btn-wrap.btn-column-1{
  display: block;
  margin: 0 auto;
}
#js-modal_my-page .btn-wrap.btn-column-1 li{
  width: 100%;
  margin-left: 0;
}
@media screen and (min-width:600px){
  #js-modal_my-page .btn-column-1 .btn{
    max-width: 332px;
  }
}
@media screen and (max-width:799px){
  #js-modal_my-page .modal-l .btn-column-3 .characters-more-7{
    font-size: 20px !important;
  }
  #js-modal_my-page .modal-l .btn-column-3 .characters-more-6{
    font-size: 22px !important;
  }
}
@media screen and (max-width:599px){
  #js-modal_my-page .modal-l .btn-column-3 .characters-more-7{
    font-size: 18px !important;
  }
  #js-modal_my-page .modal-l .btn-column-3 .characters-more-6{
    font-size: 20px !important;
  }
}

/*
* 基本情報 .user
*/
.user-detail{
  width: fit-content;
  margin: 0 auto;
  padding-top: 32px;
}
.user-detail dl>div{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 48px;
}
.user-detail dt,
.user-detail dd{
  min-height: 48px;
  font-size: 28px;
  font-weight: bold;
}
.user-detail dt{
  background: var(--color-main);
  color: var(--color-white);
  width: calc(28px * 7 + 20px);
  padding: 4px 10px 0;
}
.user-detail dd{
  word-break: break-all;
  max-width: calc(100% - (28px * 7 + 20px));
  padding: 4px 20px 0;
}
@media screen and (max-width:799px){
  .user-detail{
    width: 100%;
    padding-top: 16px;
  }
  .user-detail dl>div{
    display: block;
    margin-bottom: 32px;
  }
  .user-detail dt,
  .user-detail dd{
    width: 100%;
    font-size: 24px;
  }
  .user-detail dd{
    max-width: 100%;
    padding: 0 16px;
    min-height: 35px;
  }
}

/*
* 近くの催し物 .spot-list
*/
.spot-list .list dt{
  width: 100%;
  max-width: calc(100% - (248px * 2 + 32px + 16px));
  margin-right: 32px;
}
.spot-list .event .spot-title{
  min-height: 113px;
  margin-bottom: 0;
}
.spot-list .event .favorite{
  display: none;
}
.spot-list .list dd{
  width: calc(248px * 2 + 16px);
  display: flex;
  justify-content: space-between;
}
.spot-list .list .btn{
  margin: 0 0 0 16px;
}
.spot-list .list .btn:nth-child(1){
  margin-left: 0;
}
.spot-list .list .favorite{
  margin-bottom: -6px;
}
@media screen and (max-width:1199px){
  .spot-list .list dt{
    max-width: calc(100% - (138px * 2 + 32px + 16px));
  }
  .spot-list .list .btn{
    display: block;
    padding: 0 16px;
  }
  .spot-list .list .btn span{
    margin: 6px auto 0;
  }
  .spot-list .list .btn{
    font-size: 20px;
  }
}
@media screen and (max-width:939px){
  .spot-list .list .list-item{
    flex-direction: column;
    padding: 16px;
  }
  .spot-list .list dt{
    max-width: unset;
    margin: 0 auto 24px;
  }
  .spot-list .spot-title{
    margin-bottom: 20px;
  }
  .spot-list .list .favorite{
    margin: 0 auto;
  }
  .spot-list .list dd{
    width: 100%;
    justify-content: center;
  }
}
@media screen and (max-width:799px){
  .spot-list .list{
    margin-bottom: 32px;
  }
}
/* 施設詳細 .spot-detail */
.swiper_provision{
  display: none;
  margin-bottom: 16px;
}
.spot-detail{
  display: block;
  transition: .3s;
}
.spot-detail.hidden{
  display: none;
}
.spot-detail .spot-title{
  outline: 2px solid var(--color-main);
  outline-offset: -2px;
  margin-bottom: 16px;
}
.spot-detail-sns{
  margin: 0 0 4px 0;
  text-align: right;
}
.spot-detail-sns span{
  background-color: white;
  font-size: 28px;
}
.spot-detail-sns span a{
  text-decoration: none;
  font-size: inherit;
}
.spot-detail-sns span a img{
  width: unset;
  height: 36px;
  margin: 2px;
}
.spot-info-provision{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72px;
}
.spot-info-provider{
  color: var(--color-main);
  font-size: 28px;
  font-weight: bold;
  padding: 0 calc(72px + 16px);
}
.spot-info{
  word-wrap: break-word;
  background: var(--color-white);
  padding: 16px;
  border: 1px solid var(--color-gray);
  border-radius: 16px;
}
.spot-info::after{
  content: '';
  clear: both;
  display: block;
}
.spot-info-img{
  width: 36.077%;
  margin-left: 32px;
  padding-bottom: 16px;
  float: right;
  z-index: 1;
}
.spot-info-btn-map{
  width: 20%;
  margin-left: 8px;
  padding-bottom: 2px;
  float: right;
  z-index: 1;
}
.spot-info-img .img{
  margin-bottom: 16px;
  background: #eee;
}
.spot-info-text>div{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  margin-top: 16px;
}
.spot-info-text>div:nth-child(1){
  margin-top: 0;
}
.spot-info-lead p,
.spot-info-text dt{
  color: var(--color-main);
  font-size: 20px;
  font-weight: bold;
}
.spot-info-lead p{
  width: 100%;
}
.spot-info-text a{
  color: var(--color-blue);
}
.map-wrap{
  background: var(--color-white);
  width: calc(100% - 60px);
  height: 0;
  margin: 32px auto 0;
  padding-top: 57.171%;
  border: 1px solid var(--color-gray);
}
@media screen and (max-width:799px){
  .spot-info-provider{
    text-align: center;
    font-size: 24px;
    padding: 0 calc(46px + 16px);
  }
  .spot-info::after{
    content: none;
  }
  .spot-info-img,
  .spot-info-text{
    width: 100%;
  }
  .spot-info-img{
    float: none;
    margin-left: 0;
  }
  .spot-info-btn-map{
    width: 40%;
  }
  .spot-info-lead p,
  .spot-info-text dt{
    font-size: 18px;
  }
  .spot-detail .btn-return{
    margin-top: 16px;
  }
  .map-wrap{
    padding-top: 100%;
  }
}

/*
* ルート一覧 .route-list
*/
.location{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
  font-weight: bold;
}
.location-start,
.location-arrival{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.location-start{
  width: calc(42px + 13px + 28px * 3);
}
.location-arrival{
  width: calc(100% - (42px + 13px + 28px * 3) - (32px + 32px * 2));
}
.location-start span,
.location-arrival span{
  width: 42px;
  height: 42px;
  margin-right: 13px;
  padding-bottom: 2px;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  top: auto;
}
.location-start span{
  background: var(--color-blue);
}
.location-arrival span{
  background: var(--color-red);
}
.location-start span::before,
.location-arrival span::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 20px;
  font-weight: bold;
}
.location-start span::before{
  content: '発';
}
.location-arrival span::before{
  content: '着';
}
.location-start p,
.location-arrival p{
  word-wrap: break-word;
  width: calc(100% - 42px - 13px);
  font-size: 28px;
  padding-top: 1px;
}
.location-start p{
  width: calc(100% - 42px - 13px);
}
.location .location-arrow{
  margin: 8px 32px;
}
.result{
  font-size: 20px;
  margin-bottom: 16px;
}
.result span{
  font-size: 20px;
  color: var(--color-main);
  font-weight: bold;
}
.route-search-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.route-search-wrap p{
  color: var(--color-main);
  font-size: 28px;
  font-weight: bold;
  margin-right: 32px;
}
.route-search-title{
  margin-top: 14px;
  margin-bottom: 16px;
}
.route-search-form{
  width: calc(100% - (28px * 4 + 32px));
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.route-search-form-input{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.route-search-form-input .datepicker-wrap{
  margin: 0 32px 16px 0;
}
.route-search-form-input #datepicker{
  width: calc(28px * 6.25 + 24px + (16px + 16px + 16px));
}
.route-search-form #route-search-date,
.route-search-form #route-search-value{
  display: none;
}
.route-search-form .route-search-time{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.route-search-form .route-search-time>label{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}
.route-search-wrap .search-submit{
  width: auto;
  margin-bottom: 16px;
  box-shadow: 0 3px 6px #00000029;
}
#modal-datepicker{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000c;
  z-index: 9999;
}
#modal-datepicker.open{
  display: block;
}
.route-search-form-input .ui-datepicker-trigger{
  width: 5vh;
}
.route-search-form-input #ui-datepicker-div{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 600px;
  padding: 0;
  border: 2px solid var(--color-gray);
}
.route-search-form-input #ui-datepicker-div *{
  font-family: 'Noto Sans JP', sans-serif;
}
.route-search-form-input .ui-datepicker .ui-datepicker-header{
  background: transparent;
  padding: 20px 0;
  border: none;
}
.route-search-form-input .ui-datepicker .ui-datepicker-prev,
.route-search-form-input .ui-datepicker .ui-datepicker-next{
  cursor: pointer;
  top: 50%;
  transform: translate(0, -50%);
  width: 50px;
  height: 50px;
}
.route-search-form-input .ui-datepicker .ui-datepicker-prev{
  left: 6px !important;
}
.route-search-form-input .ui-datepicker .ui-datepicker-next{
  right: 6px !important;
}
.route-search-form-input .ui-state-hover, .route-search-form-input .ui-widget-content .ui-state-hover, .route-search-form-input .ui-widget-header .ui-state-hover, .route-search-form-input .ui-state-focus, .route-search-form-input .ui-widget-content .ui-state-focus, .route-search-form-input .ui-widget-header .ui-state-focus, .route-search-form-input .ui-button:hover, .ui-button:focus{
  border: none;
  background: transparent;
}
.route-search-form-input .ui-datepicker .ui-datepicker-prev span,
.route-search-form-input .ui-datepicker .ui-datepicker-next span{
  background: transparent;
  border: 13px solid transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.route-search-form-input .ui-widget-header .ui-datepicker-prev .ui-icon{
  border-right: 20px solid var(--color-main);
  border-left-width: 0;
}
.route-search-form-input .ui-widget-header .ui-datepicker-next .ui-icon{
  border-right-width: 0;
  border-left: 20px solid var(--color-main);
}
.route-search-form-input  .ui-datepicker .ui-datepicker-prev.ui-state-disabled .ui-icon{
  border-right-color: var(--color-gray);
}
.route-search-form-input  .ui-datepicker .ui-datepicker-next.ui-state-disabled .ui-icon{
  border-left-color: var(--color-gray);
}
.route-search-form-input .ui-datepicker-title,
.route-search-form-input .ui-datepicker-title span{
  color: var(--color-main);
  font-size: 32px;
}
.route-search-form-input  .ui-datepicker table{
  max-width: calc(80px * 7);
  margin: 0 auto 24px;
}
.route-search-form-input  .ui-datepicker thead tr{
  height: 64px;
}
.route-search-form-input  .ui-datepicker thead th{
  background: #E8E8E8;
  border: 1px solid #E8E8E8;
}
.route-search-form-input  .ui-datepicker thead th span{
  font-size: 32px;
  font-weight: normal;
}
.route-search-form-input  .ui-datepicker thead th:nth-child(1) span{
  color: var(--color-red);
}
.route-search-form-input  .ui-datepicker thead th:nth-child(7) span{
  color: var(--color-blue);
}
.route-search-form-input  .ui-datepicker tbody tr{
  height: 80px;
}
.route-search-form-input  .ui-datepicker tbody td{
  border: 1px solid #D1D1D1;
  padding: 0;
}
.route-search-form-input  .ui-datepicker tbody td a{
  height: 79px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-search-form-input .ui-widget-content .ui-state-default{
  background: transparent;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  border: none;
  padding: 6px;
}
.route-search-form-input .ui-widget-content .ui-datepicker-current-day{
  border-color: var(--color-main);
}
.route-search-form-input .ui-widget-content .ui-datepicker-current-day .ui-state-default{
  background: var(--color-sub);
  border: 6px solid var(--color-main);
  border-right-width: 5px;
  border-bottom-width: 5px;
  padding: 0;
}
.route-search-form-input .ui-widget-content .ui-state-disabled{
  opacity: 1;
}
.route-search-form-input .ui-widget-content .ui-state-disabled span{
  color: var(--color-gray);
}
.route-search-form-input .day-weekday .ui-state-default{
  color: var(--color-main);
}
.route-search-form-input .day-saturday .ui-state-default{
  color: var(--color-blue);
}
.route-search-form-input .day-sunday .ui-state-default,
.route-search-form-input .day-holiday .ui-state-default{
  color: var(--color-red);
}
.route-list-wrap>div:nth-child(1){
  display: flex;
  justify-content: space-between;
}
.co2-order{
  width: 72px;
}
.co2-order-title{
  margin-bottom: 10px;
  padding: 2px 0 10px;
  border: 2px solid var(--color-green);
  border-radius: 6px;
}
.co2-order-title p{
  color: var(--color-green);
  font-weight: bold;
  text-align: center;
  line-height: 14px;
}
.co2-order-title p span{
  color: var(--color-green);
  font-size: 20px;
}
.co2-order-title p .icon_leaf{
  width: 18px;
  height: 16px;
  margin-right: 2px;
}
.co2-arrow{
  height: calc(100% - (58px + 10px));
  margin: 0 19px;
}
.co2-arrow>span:nth-child(1),
.co2-arrow>span:nth-child(2),
.co2-arrow>span:nth-child(3){
  display: block;
  background: var(--color-green);
  width: 100%;
  margin-bottom: 4px;
}
.co2-arrow>span:nth-child(1){ height: 7px;}
.co2-arrow>span:nth-child(2){ height: 8px;}
.co2-arrow>span:nth-child(3){ height: 10px;}
.co2-arrow div{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  background: var(--color-green);
  height: calc(100% - (7px + 8px + 10px + 4px * 3 + 36px) - 16px);
}
.co2-arrow div::before{
  content: '';
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translate(-50%, 0);
  border: 36px solid transparent;
  border-top-color: var(--color-green);
  border-bottom: none;
}
.co2-arrow div span{
  color: var(--color-white);
  font-size: 24px;
  font-weight: bold;
}
.co2-arrow div span:nth-child(1){
  margin-top: 2px;
}
.co2-arrow div span:nth-child(2){
  margin-bottom: -16px;
}
ol.route-list{
  width: 100%;
  max-width: calc(100% - 72px - 32px);
}
ol.route-list .list-item>div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
ol.route-list .list-item .route-list-overview{
  width: calc(100% - 32px - 248px);
  margin-right: 32px;
}
.route-list-time{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.route-list-time *{
  line-height: 1;
}
.route-list-time>div{
  display: flex;
  align-items: center;
}
.route-list-time .time-start,
.route-list-time .time-arrival{
  font-size: 32px;
  font-weight: bold;
}
.route-list-time .time-arrival{
  color: var(--color-main);
}
.route-list-time .arrow-right{
  margin: 2px 16px 0;
}
.time-necessary,
.time-necessary span{
  font-size: 20px;
}
.route-list .time-necessary,
.route-list .time-necessary span{
  color: var(--color-gray);
}
.time-necessary{
  margin-top: 12px;
}
.time-necessary span{
  font-weight: bold;
}
.co2-distance{
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin-bottom: -16px;
}
.co2,
.distance{
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.co2{
  background: var(--color-sub);
  margin-right: 16px;
}
.co2>div{
  font-size: 20px;
  width: calc(100% - 27px - 10px);
}
.co2 br{
  display: none;
}
.co2 .amount{
  color: var(--color-main);
  margin-left: 6px;
}
.distance{
  background: var(--color-light-orange);
}
.co2 .icon_leaf,
.distance .icon_flag{
  margin-right: 10px;
}
.co2 .icon_car{
  margin-right: 4px;
}
/* お出かけしたルート一覧 .route-detail.outing-route-list */
.outing-route-list .location,
.outing-route-list .result,
.outing-route-list .route-search-wrap,
.outing-route-list .co2-order{
  display: none;
}
.title-outing,
.route-list-date,
.route-list-location{
  display: none;
}
.outing-route-list .route-list-date,
.outing-route-list .route-list-location{
  display: block;
}
.outing-route-list .title-outing{
  display: inline;
  color: var(--color-white);
  font-size: 28px;
}
.outing-route-list ol.route-list{
  max-width: unset;
}
.outing-route-list .route-list-date{
  color: var(--color-gray);
  font-size: 20px;
}
.route-list-location{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: calc(24px * 4);
  text-indent: calc(-24px * 4);
}

/* ルート詳細 .route-detail */
.route-detail .route-list-date{
  display: block;
  color: var(--color-text);
  font-size: 20px;
  font-weight: bold;
}
.route-detail .route-list-time{
  margin-bottom: 24px;
}
.route-detail-list .route-detail-item{
  margin-bottom: 32px;
}
.route-detail-list .list-item{
  align-items: flex-start;
}
.route-spot p{
  font-size: 28px;
  font-weight: bold;
}
.route-spot-title{
  width: calc(100% - 322px - 32px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 16px;
  z-index: 1;
}
.route-spot-title p{
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-top: 1px;
}
.route-spot-title .route-spot-btn{
  width: 100%;
  margin-top: 32px;
  padding-left: calc(75.19px + 42px + 20px);
}
.route-spot-title .route-spot-btn .btn-detail{
  margin-left: 0;
}
.route-spot::before,
.route-spot::after{
  content: '';
  position: absolute;
  left: calc(17px + 75.19px + (42px / 2 + 10px) - 1px);
  transform: translate(-50%, 0);
  background: var(--color-main);
  width: 6px;
}
.route-spot::before{
  bottom: calc(100% - (16px + 16px + (42px / 2)));
  height: 200px;
}
.route-detail-item:nth-child(1) .route-spot::before,
.route-detail-item:nth-last-child(1) .route-spot::after{
  content: none;
}
.route-spot::after{
  top: calc(16px + (42px / 2));
  height: calc((100% - 17px - 16px - 42px / 2) + 133px + 32px + (106px / 2));
}
.route-spot-title>span{
  background: var(--color-main);
  width: 18px;
  height: 18px;
  margin: 0 22px;
  border-radius: 50%;
  top: 12px;
}
.route-detail-item:nth-child(1) .route-spot-title>span,
.route-detail-item:nth-last-child(1) .route-spot-title>span{
  width: 42px;
  height: 42px;
  margin: 0 10px;
  border: 3px solid var(--color-white);
  top: auto;
}
.route-detail-item:nth-child(1) .route-spot-title>span{
  background: var(--color-blue);

}
.route-detail-item:nth-last-child(1) .route-spot-title>span{
  background: var(--color-red);
}
.route-detail-item:nth-child(1) .route-spot-title>span::before,
.route-detail-item:nth-last-child(1) .route-spot-title>span::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 20px;
  font-weight: bold;
}
.route-detail-item:nth-child(1) .route-spot-title>span::before{
  content: '発';
}
.route-detail-item:nth-last-child(1) .route-spot-title>span::before{
  content: '着';
}
.route-detail-item .btn{
  max-width: unset;
  width: fit-content;
  padding: 0 32px;
}
.route-spot-name {
  max-width: calc(100% - (75.19px + 42px + 20px));
}
.route-spot-btn .btn{
  margin-top: 16px;
}
.route-spot-btn .btn:nth-child(1){
  margin-top: 0;
}
.route-detail-item .method{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding-left: calc(17px + 75.19px + (42px + 10px * 2));
}
.route-detail-item .method>div{
  margin-bottom: 16px;
}
.route-detail-item .method-kind{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.route-detail-item .method-kind p{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 0;
}
.route-detail-item .method-kind p:nth-child(1) span{
  margin-right: 8px;
}
.route-detail-item .method-kind .time-necessary{
  font-weight: normal;
}
.route-detail-item .co2{
  padding: 1px 10px;
  border: 1px solid var(--color-main);
}
.route-detail-item .method-link a{
  width: fit-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-main);
  font-size: 28px;
  font-weight: bold;
  text-decoration: underline;
}
.route-detail-item .method-link .accordion-btn{
  font-size: 28px;
}
.route-detail-item .method-link span{
  margin-right: 6px;
  filter: drop-shadow(0 3px 6px #00000029);
}
.route-detail-item .time-table .accordion-body{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 -5px;
}
.route-detail-item .time-table .accordion-body li{
  height: fit-content;
  background: var(--color-white);
  outline: 1px solid var(--color-gray);
  outline-offset: -1px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 10px;
  margin: 0 5px 10px;
}
.route-detail-item .time-table .accordion-body li.selected{
  background: var(--color-main);
  outline: none;
  color: var(--color-white);
}
.route-detail .outing{
  margin: 0 auto 32px;
}
.route-detail .outing{
  font-size: 28px;
}
@media screen and (max-width:1199px){
  .route-detail-list .list-item{
    display: block;
  }
  .route-spot-title{
    width: 100%;
    margin: 0 0 8px;
  }
  .route-spot::before{
    bottom: calc(100% - (16px + (42px / 2)));
  }
  .route-spot-btn{
    padding-left: calc(75.19px + 42px + 20px);
  }
  .route-spot-btn .btn{
    margin-right: 0;
  }
  .route-detail-item:nth-last-child(1) .route-spot-btn{
    width: 100%;
    display: block;
    padding-left: 0;
  }
  .route-detail-item:nth-last-child(1) .route-spot-btn .btn{
    margin: 16px auto 0;
  }
}
@media screen and (max-width:1079px){
  ol.route-list .list-item>div{
    display: block;
  }
  ol.route-list .list-item .route-list-overview{
    width: 100%;
    margin-right: 0;
  }
  .co2-distance{
    margin-bottom: 0;
  }
}
@media screen and (max-width:799px){
  .location{
    display: block;
  }
  .location-start,
  .location-arrival{
    width: 100%;
  }
  .location-start p,
  .location-arrival p{
    font-size: 24px;
    padding-top: 4px;
  }
  .location .location-arrow,
  .route-list-time .time-arrow{
    width: 42px;
    height: 32px;
    margin: 6px 0;
  }
  .location .arrow-right{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .result,
  .result span{
    font-size: 16px;
  }
  .result{
    margin-bottom: 32px;
  }
  .route-search-wrap{
    display: block;
  }
  .route-search-wrap p{
    font-size: 24px;
    margin-right: 0;
  }
  .route-search-form-input{
    justify-content: center;
  }
  .route-search-wrap .route-search-time label:nth-child(1) p{
    margin-right: 16px;
  }
  .route-search-form{
    width: 100%;
  }
  .route-search-form-input .datepicker-wrap{
    margin-right: 0;
  }
  .route-search-form-input #datepicker{
    width: 100%;
    padding: 12px 0 14px;
    text-align: center;
  }
  .route-search-wrap .search-submit{
    font-size: 24px;
    background-position: 32px calc(50% + 1px);
    margin-bottom: 32px;
    padding: 10px 28px 11px calc(32px + 36px + 16px);
  }
  .route-search-wrap .search-submit{
    background-size: 36px 36px;
  }
  form.route-search{
    margin: 0 auto;
  }
  .co2-order{
    width: 100%;
  }
  .co2-order-title{
    margin-bottom: 16px;
    padding: 12px 0;
  }
  .co2-order-title p.sp{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    line-height: 1;
  }
  .co2-order-title p .icon_leaf{
    width: 22px;
    height: 20px;
    margin-right: 10px;
  }
  .route-list-wrap>div:nth-child(1){
    display: block;
  }
  ol.route-list{
    max-width: unset;
  }
  .route-list-time>div{
    width: 100%;
    max-width: 204px;
    flex-wrap: wrap;
  }
  .route-list-time .time-start,
  .route-list-time .time-arrival{
    font-size: 28px;
  }
  .route-list-time .arrow-right{
    margin: 2px auto 0;
  }
  .time-necessary{
    width: 100%;
  }
  .time-necessary,
  .time-necessary span{
    font-size: 16px;
  }
  .co2-distance{
    display: block;
  }
  .co2>div,
  .distance{
    font-size: 16px;
    line-height: 1.7;
  }
  .co2{
    margin-right: 0;
    margin-bottom: 16px;
  }
  .co2 br{
    display: block;
  }
  .co2 .amount{
    margin-left: 4px;
  }
  ol.route-list .list-item .btn,
  .route-detail-list .list-item .btn{
    height: 66px;
    font-size: 20px;
  }
  .outing-route-list .route-list-date,
  .route-detail .route-list-date{
    font-size: 16px;
  }
  .outing-route-list .title-outing,
  .outing-route-list .page-title h2{
    font-size: 20px;
  }
  .route-list-location{
    font-size: 20px;
    padding-left: calc(20px * 4);
    text-indent: calc(-20px * 4);
  }
  .route-detail .route-list-time{
    margin-bottom: 16px;
  }
  .route-spot::before,
  .route-spot::after{
    left: calc(17px + (53.7px / 2) - 1px);
  }
  .route-spot::before{
    bottom: calc(100% - 16px);
  }
  .route-spot::after{
    top: calc(1px + 16px + 38px + 2px);
    height: calc((100% - 16px - 38px - 6px - 42px / 2) + (16px + 144px + 32px));
  }
  .route-detail-item:nth-child(1) .route-spot::after{
    top: calc(16px + 38px + 6px + (42px / 2));
  }
  .route-spot p{
    margin-top: 7px;
    margin-right: 16px;
    font-size: 20px;
  }
  .route-spot-name{
    max-width: calc(100% - 53.7px - 16px);
  }
  .route-spot .route-spot-name p{
    margin-top: 3px;
    font-size: 24px;
  }
  .route-spot-btn{
    display: flex;
    padding-left: calc(53.7px + 16px);
  }
  .route-spot-title>span{
    display: none;
  }
  .route-detail-item:nth-child(1) .route-spot-title>span,
  .route-detail-item:nth-last-child(1) .route-spot-title>span{
    display: block;
    position: absolute;
    left: 0;
    margin: 0 6px;
  }
  .route-detail-item:nth-child(1) .route-spot-title>span,
  .route-detail-item:nth-last-child(1) .route-spot-title>span{
    top: 37.59px;
  }
  .route-spot-btn .btn{
    width: 100%;
    max-width: 248px;
    padding: 0 20px;
  }
  .route-spot-title .route-spot-btn{
    margin-top: 42px;
  }
  .route-spot-title .route-spot-btn .btn-detail{
    max-width: unset;
  }
  .route-detail-item .method{
    display: block;
    padding-left: calc(1px + 16px + 53.7px + 8px);
  }
  .route-detail-item .method>div{
    margin-bottom: 10px;
  }
  .route-detail-item .method-kind p{
    font-size: 16px;
  }
  .route-detail-item .method-kind .time-necessary{
    width: auto;
  }
  .route-detail-item .method-link a,
  .route-detail-item .method-link .accordion-btn{
    font-size: 22px;
  }
  .route-detail .outing{
    font-size: 22px;
  }
  .route-detail-item .time-table .accordion-body li{
    font-size: 16px;
  }
}

/*
* お役立ち施設 .useful-spot
*/
.useful-spot-list{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.useful-spot-list>div{
  width: calc((100% - 32px) / 2);
  margin-bottom: -16px;
}
.useful-spot-list>div>div{
  display: flex;
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-bottom: 16px;
}
.useful-spot-list .icon{
  width: 40px;
  height: 40px;
  margin-right: 16px;
}
.useful-spot-list dt,
.useful-spot-list dd{
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.useful-spot-list dd{
  color: var(--color-main);
}
.useful-spot-list dt span{
  margin-right: 16px;
}
.useful-spot .map-wrap{
  margin-bottom: 32px;
}
@media screen and (max-width:799px){
  .useful-spot-list{
    display: block;
  }
  .useful-spot-list>div{
    width: 100%;
    margin-bottom: 0;
  }
  .useful-spot-list dt{
    font-size: 18px;
  }
  .useful-spot-list dd{
    font-size: 20px;
  }
}

/*
* 目的地近くの催し物・施設 .spot-near
*/
.tab-menu{
  background: var(--color-main);
  display: flex;
  justify-content: space-between;
  border: 3px solid var(--color-main);
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000029;
  overflow: hidden;
  margin-bottom: 32px;
}
.tab-menu li{
  border-left: 1px solid var(--color-main);
  flex-grow: 1;
}
.tab-menu li:nth-child(1){
  border-left: none;
}
.tab-menu-item{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: bold;
  padding: 8px;
  background: var(--color-white);
  transition: .3s;
}
.tab-menu-item.active{
  background: var(--color-main);
  color: var(--color-white);
}
li:nth-child(1) .tab-menu-item{
  padding-left: 12px;
}
li:nth-last-child(1) .tab-menu-item{
  padding-right: 12px;
}
.tab-menu-item span{
  font-size: 28px;
  color: var(--color-main);
  transition: .3s;
}
.tab-menu-item.active span{
  color: var(--color-white);
}
.tab-menu-item span.icon{
  width: 38px;
  height: 38px;
  margin-right: 6px;
}
#cat-select-box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  background: var(--color-white);
  width: 100%;
  height: 66px;
  border: 3px solid var(--color-main);
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000029;
  margin: 24px auto;
  padding: 0 12px;
}
#cat-select-box::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translate(0, -50%);
  border: 8px solid transparent;
  border-top: 12px solid var(--color-main);
  border-bottom: none;
}
#cat-select-box span{
  font-size: 24px;
  color: var(--color-main);
}
#cat-select-box span.icon{
  width: 38px;
  height: 38px;
  margin-right: 6px;
}
#cat-select-list{
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: .3s;
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  background: transparent;
  width: 100%;
  height: 0;
  display: block;
  margin-bottom: 0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 6px #00000029;
  z-index: 1;
}
#cat-select-list.show{
  visibility: visible;
  opacity: 1;
  top: 100%;
  height: auto;
}
#cat-select-list .tab-menu-item{
  justify-content: flex-start;
  padding: 14px 16px;
}
#cat-select-list li{
  border-top: 1px solid var(--color-gray);
  border-left: none;
}
#cat-select-list li:nth-child(1){
  border-top: none;
}
.tab-content{
  overflow: hidden;
  padding-bottom: 32px;
}
.tab-content-item{
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: .3s;
}
.tab-content-item.show{
  visibility: visible;
  height: auto;
  opacity: 1;
}
.spot-near .list-item dt{
  width: calc(100% - 302px - 32px);
}
.spot-near .list-item .spot-title{
  margin-bottom: 16px;
}
.spot-near .list-item .btn{
  max-width: unset;
  padding: 0 32px;
}
.spot-near .list-item .btn.btn-route span{
  background: url(/img/r5/icon_pin.svg) no-repeat center center / contain;
  width: 26px;
  height: 36px;
}
.spot-near .map-wrap{
  margin-top: 0;
}
@media screen and (max-width:1279px){
  .tab-menu-item{
    display: block;
  }
  .tab-menu-item span.icon{
    display: block;
    margin: 0 auto;
  }
  .tab-menu-item,
  .tab-menu-item span{
    font-size: 24px;
  }
}
@media screen and (max-width:939px){
  .spot-near .list-item{
    flex-direction: column;
  }
  .spot-near .list-item dt,
  .spot-near .list-item dd{
    width: 100%;
  }
  .spot-near .list-item dt{
    margin-bottom: 16px;
  }
  .spot-near .list-item .spot-title{
    margin-bottom: 10px;
  }
}
@media screen and (max-width:799px){
  .tab-menu-item{
    display: flex;
  }
  .tab-menu-item span.icon{
    margin: 0 6px 0 0;
  }
}

/* マップ内のアイコン表示用 (.map-wrapの中で有効)*/
.map-wrap .icon_wifi,
.map-wrap .icon_aed,
.map-wrap .icon_wc,
.map-wrap .icon_baby,
.map-wrap .icon_rest,
.map-wrap .icon_park,
.map-wrap .icon_event,
.map-wrap .icon_restaurant,
.map-wrap .icon_hospital,
.map-wrap .icon_life{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.map-wrap .map-icon{
  width: 0;
  height: 0;
}

/* マップ内のアイコン確認用の位置指定 */
.map-wrap .map-icon{
  position: absolute;
  top: 50%;
}
.useful-spot .map-wrap .map-icon:nth-child(2){ left: 25%;}
.useful-spot .map-wrap .map-icon:nth-child(3){ left: 35%;}
.useful-spot .map-wrap .map-icon:nth-child(4){ left: 45%;}
.useful-spot .map-wrap .map-icon:nth-child(5){ left: 55%;}
.useful-spot .map-wrap .map-icon:nth-child(6){ left: 65%;}
.useful-spot .map-wrap .map-icon:nth-child(7){ left: 75%;}
.spot-near .map-wrap .map-icon:nth-child(2){ left: 35%;}
.spot-near .map-wrap .map-icon:nth-child(3){ left: 45%;}
.spot-near .map-wrap .map-icon:nth-child(4){ left: 55%;}
.spot-near .map-wrap .map-icon:nth-child(5){ left: 65%;}
/* マップ内のアイコン確認用の位置指定ここまで */

/* disabled */
:disabled,
.my-page .keyword-search input[type="search"]:has(+ :disabled){
  opacity: .4 !important;
}
.swiper-button-disabled,
.swiper-button-lock{
  opacity: .4 !important;
}

/**********/
.st{
  display: none !important;
}

/*
* 札幌ラーメン特集 .sapporo-ramen.special-feature
*/
.special-feature .page-title{
  margin-bottom: 0;
}
.special-feature .top-banner-img{
  margin-bottom: 32px;
}
.special-feature-intro{
  margin-bottom: 16px;
}
.special-feature-intro .info{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-main);
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
  margin-top: 16px;
}
.special-feature .info span{
  display: inline-block;
  width: 40px;
  height: 40px;
  background: transparent url(/img/r5/icon_page-info.svg) no-repeat center center / contain;
  margin-right: 16px;
  filter: drop-shadow(0 3px 6px #00000029);
}
.select-box-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.select-box-name{
  font-size: 24px;
  font-weight: bold;
}
.select-box{
  cursor: pointer;
  width: 100%;
  max-width: 360px;
  z-index: 1;
}
.select-box .selected-item,
.select-box .select-item,
.select-box .selected-item span,
.select-box .select-item span{
  font-size: 24px;
  font-weight: bold;
}
.select-box .selected-item span,
.select-box .select-item span{
  color: var(--color-main);
}
.select-box .selected-item{
  width: 100%;
  min-height: 72px;
  text-align: left;
  background: var(--color-white);
  padding: 10px calc(16px + 20px) 11px 24px;
  border: 3px solid var(--color-main);
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000029;
}
.select-box .selected-item::after{
  content: '';
  position: absolute;
  top: calc(50% + 2px);
  right: 20px;
  border: 8px solid transparent;
  border-top: 12px solid var(--color-main);
  border-bottom: 0;
  transform: translate(0, -50%);
}
.select-box .select-list{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 6px #00000029;
}
.select-box.open .select-list{
  display: block;
}
.select-box .select-list li{
  border-top: 1px solid var(--color-gray);
}
.select-box .select-list li:nth-child(1){
  border-top: none;
}
.select-box .select-item{
  cursor: pointer;
  background: var(--color-white);
  width: 100%;
  text-align: left;
  padding: 16px;
}
.select-box .select-item.active{
  background: var(--color-main);
  color: var(--color-white);
}
.select-box .select-item.active span{
  color: var(--color-white);
}
.special-feature-list{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
}
.special-feature-list-item{
  display: none;
  width: calc((100% - 16px * 5) / 6);
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 3px 6px #00000029;
}
.special-feature-list-item.show{
  display: block;
}
.special-feature-list-item a{
  display: block;
  height: 100%;
  padding-bottom: 13px;
  border: 3px solid var(--color-main);
  border-radius: 16px;
}
.special-feature-list-item .img{
  top: -3px;
  left: -3px;
  width: calc(100% + 3px * 2);
  height: 153px;
  margin-bottom: -3px;
  overflow: hidden;
}
.special-feature-list-item img{
  height: 100%;
  object-fit: cover;
  border: 3px solid var(--color-main);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}
.special-feature-list-item .sub-tag{
  position: absolute;
  bottom: 0;
  left: -3px;
  width: max-content;
  max-width: calc(100% + 3px * 2);
  background: #000000bf;
  color: var(--color-white);
  line-height: 1;
  padding: 3px 16px 5px;
  border-radius: 0 30px 0 0;
}
.special-feature-list-item .tag{
  left: -3px;
  width: calc(100% + 3px * 2);
  color: var(--color-white);
  font-weight: bold;
  line-height: 1.2;
  padding: 4px 16px 5px;
}
.special-feature-list-item[data-tag="traditional"] .tag{
  background: #985512;
}
.special-feature-list-item[data-tag="semi-traditional"] .tag{
  background: #E9821B;
}
.special-feature-list-item[data-tag="semi-trend"] .tag{
  background: #FE7ADB;
}
.special-feature-list-item[data-tag="trend"] .tag{
  background: #FC6D94;
}
.special-feature-list-item[data-tag="other"] .tag{
  background: #61688D;
}
.special-feature-list-item .title{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 13px;
}
.special-feature-list-item dl>div{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 16px;
  padding: 0 13px;
}
.special-feature-list-item dl dt{
  width: calc(20px * 1);
  color: var(--color-main);
  font-size: 20px;
  font-weight: bold;
}
/* ラーメン一覧 各店舗情報 最寄り駅、定休日項目 */
.special-feature-list-item dl dt img{
  width:1em;
  height:1em;
  vertical-align: middle;
  border:unset;
  border-radius:unset;
}
/* ラーメン一覧 各店舗情報 最寄り駅、定休日値 */
.special-feature-list-item dl dd{
  line-height: 1.556;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.special-feature-bottom-text h3{
  font-size: 24px;
  margin: 32px 0 16px;
}
.special-feature .bottom-btn-wrap{
  justify-content: space-between;
  gap: 32px;
  margin: 32px auto 16px;
}
.special-feature .bottom-btn-wrap .btn{
  width: 100% !important;
  max-width: 248px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media screen and (max-width:1439px){
  .special-feature-list-item{
    width: calc((100% - 16px * 4) / 5);
  }
}
@media screen and (max-width:1199px){
  .special-feature-list-item{
    width: calc((100% - 16px * 3) / 4);
  }
}
@media screen and (max-width:1079px){
  .special-feature-list-item{
    width: calc((100% - 16px * 2) / 3);
  }
}
@media screen and (max-width:799px){
  .special-feature .top-banner-img{
    margin-bottom: 16px;
  }
  .special-feature-intro{
    margin-bottom: 32px;
  }
  .special-feature-intro .info{
    font-size: 20px;
    margin-top: 24px;
  }
  .special-feature-intro .info span{
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .select-box-wrap{
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }
  .select-box{
    max-width: none;
  }
  .select-box .selected-item,
  .select-box .select-item,
  .select-box .selected-item span,
  .select-box .select-item span{
    font-size: 20px;
  }
  .special-feature-list-item{
    width: calc((100% - 16px) / 2);
  }
  .special-feature-list-item .img{
    height: 113px;
  }
  .special-feature-list-item .sub-tag,
  .special-feature-list-item .tag,
  .special-feature-list-item dl dd{
    font-size: 13px;
  }
  .special-feature-list-item .title,
  .special-feature-list-item dl dt{
    font-size: 14px;
  }
  .special-feature-list-item dl>div{
    gap: 0 14px;
  }
  .special-feature-list-item dl dt{
    width: calc(14px * 1);
  }
  .special-feature-bottom-text h3{
    font-size: 20px;
  }
  .special-feature .bottom-btn-wrap{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 32px auto 0;
  }
}
/*
* 札幌ラーメン特集 店舗詳細 .spot-detail.sapporo-ramen.special-feature
*/
.special-feature.spot-detail .page-title{
  margin-bottom: 32px;
}
.special-feature.spot-detail .spot-title{
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 40px 16px calc(16px + 8px);
}
.special-feature.spot-detail .spot-title-name{
  padding-right: 280px;
}
.special-feature.spot-detail .spot-title p{
  font-size: 34px;
  line-height: 1.2;
  overflow: hidden;
}
.special-feature.spot-detail .spot-title p.spot-title-rb{
  font-size: 12px;
}
.special-feature.spot-detail .spot-title-detail-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.special-feature.spot-detail .spot-title-detail{
  width: 100%;
  max-width: calc(100% - 248px - 24px);
}
.special-feature.spot-detail .spot-title-tag-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.special-feature.spot-detail .spot-title-tag{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-weight: bold;
  padding-bottom: 1px;
}
.special-feature.spot-detail .spot-title-tag span{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.special-feature.spot-detail .spot-title-tag .tag{
  display: inline-block;
  color: var(--color-main);
  font-weight: normal;
  margin-top: 2px;
  padding: 0 10px 1px;
  border: 1px solid var(--color-main);
}
.special-feature.spot-detail .info{
  display: flex;
}
.special-feature.spot-detail .info span{
  width: 30px;
  height: 30px;
  margin: 0;
}
.special-feature.spot-detail .spot-title-text{
  font-weight: bold;
  margin-top: 10px;
}
.special-feature.spot-detail .spot-title-detail-wrap,
.special-feature.spot-detail .spot-title-detail-link{
  position: static;
}
.special-feature.spot-detail .spot-title-detail-link{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  width: 248px;
}
.special-feature.spot-detail .favorite-add,
.special-feature.spot-detail .favorite-delete{
  position: absolute;
  top: 24px;
  right: 40px;
}
.special-feature.spot-detail .tab-menu{
  margin-top: 16px;
}
.special-feature.spot-detail .tab-menu li{
  width: calc(100% / 3);
}
.special-feature.spot-detail .spot-info{
  margin-top: 16px;
  padding: 32px;
}
.special-feature.spot-detail .spot-info::after{
  content: none;
}
.special-feature.spot-detail .spot-info:nth-child(1){
  margin-top: 0;
}
.special-feature.spot-detail .spot-info.bg-yellow{
  background: #FFF8EB;
}
.special-feature.spot-detail .spot-info a{
  text-decoration: underline;
}
.special-feature.spot-detail .spot-info a.btn{
  max-width: none;
  text-decoration: none;
  margin: 10px auto 16px;
}
.special-feature.spot-detail [data-content="top"] .spot-info{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.special-feature.spot-detail .img-slider{
  width: 355px;
}
.special-feature.spot-detail .img-slider .swiper-slide{
  visibility: visible;
}
.special-feature.spot-detail .img-slider .swiper-slide-inner{
  width: 100%;
  height: 0;
  padding-top: 75%;
}
.special-feature.spot-detail .img-slider .swiper-slide-inner img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  object-fit: cover;
}
.special-feature.spot-detail .btn-prev,
.special-feature.spot-detail .btn-next{
  top: calc(266px / 2);
  top: calc(50% - 20% / 2);
  width: 40px;
  height: 40px;
  padding: 8px;
}
.special-feature.spot-detail .btn-prev{
  left: -20px;
}
.special-feature.spot-detail .btn-next{
  right: -20px;
}
.special-feature.spot-detail .img-slider .slider-thumbnail{
  margin-top: 10px;
}
.special-feature.spot-detail .img-slider .slider-thumbnail>div{
  gap: 10px;
}
.special-feature.spot-detail .img-slider .slider-thumbnail .swiper-slide{
  width: calc((100% - 10px * 3) / 4) !important;
}
.special-feature.spot-detail [data-content="top"] .spot-info-text-wrap{
  width: calc(100% - 355px - 40px);
}
.special-feature.spot-detail .spot-info .link-buralit{
  display: block;
  color: var(--color-blue);
  font-weight: bold;
  margin-top: 16px;
}
.special-feature.spot-detail .spot-info .link-buralit br{
  display: none;
}
.special-feature.spot-detail .map-wrap{
  width: 100%;
}
.special-feature.spot-detail .map-wrap{
  margin: 0;
}
.special-feature.spot-detail .bottom-btn-wrap .btn.link-spot-list{
  width: fit-content !important;
  max-width: unset !important;
  padding: 0 32px !important;
}
@media screen and (max-width:1199px){
  .special-feature.spot-detail .bottom-btn-wrap{
    flex-direction: column;
    align-items: center;
  }
  .special-feature .bottom-btn-wrap .btn.btn-return{
    order: 2;
  }
  .special-feature.spot-detail .bottom-btn-wrap .btn.link-spot-list{
    order: 1;
  }
  .special-feature .bottom-btn-wrap .btn#btn-top-scroll{
    order: 3;
  }
}
@media screen and (max-width:1079px){
  .special-feature.spot-detail .img-slider,
  .special-feature.spot-detail [data-content="top"] .spot-info-text-wrap{
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (max-width:799px){
  .special-feature.spot-detail .spot-title{
    padding: 16px 16px 20px calc(16px + 8px);
  }
  .special-feature.spot-detail .spot-title-name{
    padding-right: 0;
  }
  .special-feature.spot-detail .spot-title p{
    font-size: 24px
  }
  .special-feature.spot-detail .spot-title p.spot-title-rb{
    font-size: 10px;
  }
  .special-feature.spot-detail .spot-title-detail-wrap{
    flex-direction: column;
    gap: 16px;
  }
  .special-feature.spot-detail .spot-title-detail{
    max-width: none;
  }
  .special-feature.spot-detail .spot-title-tag-wrap{
    flex-direction: column;
  }
  .special-feature.spot-detail .spot-title-tag{
    gap: 5px;
  }
  .special-feature.spot-detail .spot-title-tag span{
    font-size: 14px;
    gap: 5px;
  }
  .special-feature.spot-detail .spot-title-tag .tag{
    margin-top: 0;
    padding: 0 5px;
  }
  .special-feature.spot-detail .info span{
    top: -1px;
    width: 28px;
    height: 28px;
  }
  .special-feature.spot-detail .spot-title-detail-link{
    width: auto;
  }
  .special-feature.spot-detail .spot-title-detail-link .btn{
    max-width: 240px;
    height: 52px;
  }
  .special-feature.spot-detail .favorite-add,
  .special-feature.spot-detail .favorite-delete{
    position: relative;
    top: 0;
    right: 0;
  }
  .special-feature.spot-detail .tab-menu{
    margin-bottom: 16px;
  }
  .special-feature.spot-detail .tab-menu-item{
    font-size: 20px;
    padding: 16px 8px;
  }
  .special-feature.spot-detail .spot-info{
    padding: 16px;
  }
  .special-feature.spot-detail [data-content="top"] .spot-info{
    flex-direction: column;
    gap: 16px;
  }
  .special-feature.spot-detail .img-slider{
    width: 100%;
  }
  .special-feature.spot-detail .btn-prev,
  .special-feature.spot-detail .btn-next{
    display: none;
  }
  .special-feature.spot-detail [data-content="top"] .spot-info-text-wrap{
    width: 100%;
  }
  .special-feature.spot-detail .spot-info .link-buralit{
    text-align: center;
  }
  .special-feature.spot-detail .spot-info .link-buralit br{
    display: block;
  }
  .special-feature.spot-detail .bottom-btn-wrap .btn.link-spot-list{
    width: 248px !important;
    padding: 0 !important;
  }
}