@charset "utf-8";

/*PCSP共通設定*/
:root {
	--gadget-accent-color: #490000;
	--gadget-noactive-color: #FFF;
	--gadget-botton-color: #f29a16
}
html {scroll-behavior: smooth;}/*smooth scroll*/
main {
	font-family: "Noto Sans JP", "Helvetica Neue", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	line-height: 1.4
}
main img {
	width:100%;
	height:auto
}
section{background-color:#f1f1e8;}
.search_kokunaiBar .fw-top .fw-checkbox__label:before {border-color: var(--gadget-accent-color)!important;}
.search_kokunaiBar .fw-top .fw-checkbox__input:checked + .fw-checkbox__label:before {
    background-color: var(--gadget-accent-color)!important;
    border-color: var(--gadget-accent-color)!important
}
.search_kokunaiBar .fw-top .fwnta-modal-tab__list {border-bottom-color: var(--gadget-accent-color)!important;}
.search_kokunaiBar .fw-top .fwnta-modal-tab__list > li.fw-is-active {background: var(--gadget-accent-color)!important;}
.search_kokunaiBar .fw-top .fwnta-modal-btn-clear {
    border-color: var(--gadget-accent-color)!important;
    color: var(--gadget-accent-color)!important
}
.search_kokunaiBar .fw-top .fwnta-modal-tab__list > li {background-color: var(--gadget-noactive-color)!important;}
.search_kokunaiBar .fw-top .fw-btn-detail-01, .fw-top .fw-btn-fix-01 {background-color: var(--gadget-botton-color)!important;}
.search_kokunaiBar .fw-top .fwnta-btn-search{background-color: var(--gadget-botton-color)!important;}

/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock {
	font-size: 10px;
	margin: 1%
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 10px;}
#dirPathBlock > div {
	overflow-x: scroll;
	overflow-y: hidden
}
#dirPathBlock > div p {width: max-content;}
h1 {
	text-align: center;
	font-size: 18px;
	color:#FFF;
	font-weight: bold
}
hgroup {margin-bottom: 8%;}
h2 {
	width: fit-content;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 3px solid #490000;
	margin: 0 auto 8%;
	padding: 0 15px 5px
}
h3 {
	width: fit-content;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 3px solid #490000;
	margin: 0 auto 8%;
	padding: 0 15px 5px
}
.inner{
	width: 96%;
	margin: 0 2%;
	padding: 24px 0;
	box-sizing: border-box
}
.inner p{font-size: 14px;}

/*title*/
#mv_title_wrap {
	width: 100%;
	background: url(../images/pb-pixta123196389.jpg) 0% 80% / cover no-repeat;
	padding: 5% 0;
	box-sizing: border-box
}
#mv_title {
	width: 60%;
	margin: auto;
	padding: 5%;
	background: rgba(0, 0, 0, 0.5)
}

/*nav*/
nav#g_navi.fixNav {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 998;
}
nav#g_navi {background:#490000;}
nav#g_navi ul {
	padding: 5px 0;
	display:flex;
	flex-wrap: wrap;
	align-items: center
}
nav#g_navi li {
	width: calc(100% / 4);
	text-align: center;
	box-sizing: border-box;
	border-right:1px solid #FFF
}
nav#g_navi li:last-child {border-right: none;}
nav#g_navi li a {
	width: 100%;
	height: 35px;
	font-size: 12px;
	color: #FFF;
	display: block;
	align-content: center
}

/*PRbanner*/
.pr_banner {
	width: 96%;
    margin: 2%
}
.pr_banner a {color:#222;}
.pr_banner a img {
    width: 320px;
	height: 60px;
	display: block;
    margin: auto
}
.pr_banner p {text-align:center;}
	
/*1-3位*/
.rank1-3 li {
	font-size: 18px;
	margin-bottom: 50px;
	padding: 10px;
	background: #FFF
}
.rank1-3 dt.hotspring_spot {
	display: flex;
	align-items: center;
	margin-bottom: 15px
}
.rank1-3 dt.hotspring_spot img {
	width: 40px;
	height: 30px;
	margin-right: 5%
}
.rank1-3 dt.hotspring_spot h4 {width: calc(100% - 150px);}
.rank1-3 dd.hotspring_txt,
.rank1-3 dd.hotspring_txt img {margin-bottom: 15px;}
.rank1-3 dd.plan_btn {margin-bottom: 25px;}
.rank1-3 dd.plan_btn a {
	display: block;
	color: #FFF;
	text-align: center;
	line-height: 2.5;
	border-radius: 2em
}
.rank1-3 dd.plan_btn .yado {
	width: 98%;
	background: #f29a16;
	margin: 0 1% 5%
}
.rank1-3 dd.plan_btn .jrset {
	width: 48%;
	background:#4ea6cb;
	margin: 0 1% 5%;
	float: left
}
.rank1-3 dd.plan_btn .airset {
	width: 48%;
	background:#ea7c84;
	margin: 0 1% 5%;
	float: left
}
.rank1-3 dd.hotspring_rec {margin-bottom: 25px;}
.rank1-3 dd.hotspring_rec h5 {
	text-align: center;
	margin-bottom: 15px
}
.rank1-3 dd.hotspring_rec .recommend li {
	background: #FFF;
	box-shadow: 2px 2px 5px #ccc;
	border-radius: 5px;
	padding:0
}
.rank1-3 dd.hotspring_rec .recommend li > a{color:#000;}
.rank1-3 dd.hotspring_rec .recommend li dt {
	margin-bottom: 10px;
	position: relative
}
.rank1-3 dd.hotspring_rec .recommend li h6,
.rank1-3 dd.hotspring_rec .recommend li p {font-size: 0.85em;}
.rank1-3 dd.hotspring_rec .recommend li h6 {
	position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-indent: 2%;
    line-height: 2;
	color:#FFF
}
.rank1-3 dd.hotspring_rec .recommend li img {border-radius: 5px 5px 0 0;}
.rank1-3 dd.hotspring_rec .recommend li p {
	min-height: 134px;
	margin-bottom: 10px;
	padding: 0 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden
}
.rank1-3 dd.hotspring_rec .recommend li .price {margin-bottom: 10px}
.rank1-3 dd.hotspring_rec .recommend li .price p {min-height: auto;}
.rank1-3 dd.hotspring_rec .recommend li .price p span.icon {
	display: inline-block;
	background: #f29a16;
	color: #fff;
	margin-bottom: 3px;
	padding: 2px 10px 4px;
	font-size: 0.85em
}
.rank1-3 dd.hotspring_rec .recommend li .price b {
	color: #d70000;
	text-align: center;
	font-size: 1.4em;
	display: inline-block;
	width: 100%
}
.rank1-3 dd.hotspring_rec .recommend li .price small {
	width: 100%;
	display: inline-block;
	text-align: center;
}

/*4-20位*/
.rank4-20 > li {
	width: calc(1120px / 4) !important;
    font-size: 16px
}
.rank4-20 dt.hotspring_spot {
	display: flex;
	align-items: center;
	margin-bottom: 15px
}
.rank4-20 dt.hotspring_spot p {
	width: 30px;
	height: 30px;
	margin-right: 15px;
	background: #4EA6CB;
	color: #FFF;
	text-align: center;
	border-radius: 1em;
	font-size: 20px
}
.rank4-20 dt.hotspring_spot img {
	width: 40px;
	height: 30px;
	margin-right: 5%
}
.rank4-20 dt.hotspring_spot h4 {width: calc(100% - 50px)}
.rank4-20.rank11-20 dt.hotspring_spot h4 {font-size: 0.9em}
.rank4-20 dd.hotspring_txt,
.rank4-20 dd.hotspring_txt img {margin-bottom: 15px;}
.rank4-20 dd.hotspring_txt p {font-size: 16px;}
.rank4-20 dd.plan_btn a {
	width: 98%;
	margin: 0 1% 5%;
	display: block;
	color: #FFF;
	text-align: center;
	line-height: 2.5;
	border-radius: 2em
}
.rank4-20 dd.plan_btn .yado {background: #f29a16;}
.rank4-20 dd.plan_btn .jrset {background:#4ea6cb;}
.rank4-20 dd.plan_btn .airset {background:#ea7c84;}
.rank4-20 dd.hotspring_rec {
	margin-bottom: 25px;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px
}
.rank4-20 dd.hotspring_rec h5 {
	text-align: center;
	font-weight: bold;
	margin-bottom: 15px
}
.rank4-20 dd.hotspring_rec .recommend {
	background: #FFF;
	border-radius: 5px;
	padding:0
}
.rank4-20 dd.hotspring_rec li {text-align: center;}
.rank4-20 dd.hotspring_rec li a {
	text-decoration: underline;
	text-decoration-color: #4EA6CB;
	color:#4EA6CB
}

/*21-100位 table*/
.rank21-100 li:first-child {margin-bottom: 25px;}
table.acc_box {
	background: #fff;
	margin: 0 auto 2% auto;
	font-size: 14px
}
table.acc_box td {
    border: 1px solid #CCC;
    padding: 5px
}
table.acc_box tr td {width: 35%}
table.acc_box tr td.number {width: 15%}

/*map box*/
.smpMapBox{display:block;}
.smpMapBox select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 0.5em;
    background:#FFF;
	width:80%;
    line-height: 40px;
    font-size: 15px;
    vertical-align: middle;
    border:1px solid #592A30;
    margin-bottom:5px;
	border-radius: 5px
}
input.btnSelect3{
    border-radius: 5px;
    background:#f29a16;
    width:18%;
    height: 40px;
    margin-top:-5px;
    line-height: 40px;
    color:#FFF;
    border:1px solid #f29a16;
    overflow:hidden
}

/*有名温泉リンク*/
#famous {
    background-color: #faf3f0;
    position: relative
}
#famous .inner {
    overflow: hidden;
    background: url(../../new_images/bg_i03.png) no-repeat;
    background-size: 100px auto
}
#famous .innerBox {
    background: #FFF;
    -moz-box-shadow: 0px 0px 8px rgba(250,226,215,0.9);
    -webkit-box-shadow: 0px 0px 8px rgba(250,226,215,0.9);
    box-shadow: 0px 0px 8px rgba(250,226,215,0.9);
    overflow: hidden
}
#famous .innerBox dt {
    background: url(../../new_images/ti_bg_pop.gif) repeat-x;
    background-size: auto 35px;
    height: 35px;
    color: #FFF;
    line-height: 35px;
    text-align: center;
    font-size: 16px
}
#famous .innerBox dd {
    padding: 10px 10px 5px;
    display: block;
    overflow: hidden
}
#famous .innerBox dd ul {
	display: flex;
	flex-wrap: wrap
}
#famous .innerBox dd ul li {
	width: 50%;
	margin-bottom: 10px;
	padding: 0 0 0 10px;
	background: url(../../new_images/im_arrowp.png) no-repeat 0 50%;
	background-size: 6px auto;
	font-size: 1.1em;
	box-sizing: border-box
}
#famous .innerBox dd ul li.long {width: 100%;}
#area_onsen_ichiran_top .accordion {
	background-color: #fff;
	font-size: 14px
}
#area_onsen_ichiran_top .accordion:not([open]) {margin-bottom: 2px;}
#area_onsen_ichiran_top .accordion summary {
    display: flex;
    align-items: center;
    position: relative;
    padding:1em 4em 1em 1em;
	color: #000;
    cursor: pointer;
	font-size: 1.1em
}
#area_onsen_ichiran_top .accordion summary::-webkit-details-marker {display: none;}
#area_onsen_ichiran_top .accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    content: '';
    transition: transform .3s;
    position: absolute;
    right:2em
}
#area_onsen_ichiran_top .accordion[open] summary::after {transform: rotate(225deg);}
#area_onsen_ichiran_top .accordion li{
	font-size: 1.1em;
	padding: 0.5em 0 0.5em 1.5em
}

/*tripa*/
#tripa_wrap li {
	background: #FFF;
	box-shadow: 2px 2px 5px #ccc;
	border-radius: 5px
}
#tripa_wrap a {color: #222;}
#tripa_wrap dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center
}
#tripa_wrap dt {
	width: 30%;
	margin-right: 5%
}
#tripa_wrap img{border-radius: 5px 0 0 5px;}
#tripa_wrap dd {
	width: 65%;
	font-size:18px
}

/*faq*/
#link04 .accordion {
	background-color: #fff;
	font-size: 14px
}
#link04 .accordion:not([open]) {margin-bottom: 2px;}
#link04 .accordion summary {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1.4em 4em 1.4em 1em;
	color: #000;
    cursor: pointer
}
#link04 .accordion summary::-webkit-details-marker {display: none;}
#link04 .accordion summary::before {
	content: 'Q';
	color: #111183;
	font-size: 14px;
	margin-right: 20px;
	font-weight: bold
}
#link04 .accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    content: '';
    transition: transform .3s;
    position: absolute;
    right:2em
}
#link04 .accordion[open] summary::after {transform: rotate(225deg);}
#link04 .accordion div {
	display: flex;
	align-items: center;
    transform: translateY(-10px);
    margin: 0;
    padding: 1.4em 1em ;
    color: #414540;
    transition: transform .5s, opacity .5s
}
#link04 .accordion div::before {
	content: 'A';
	color: #b60000;
	font-size: 14px;
	margin-right: 20px;
	font-weight: bold
}
#link04 .accordion[open] div {transform: none;}

/*about onsen100*/
#about_onsen100 {
	margin: 5% 0;
	background: #FFF;
	border: 2px solid #490000;
	border-radius: 5px;
	font-size: 14px
}
#about_onsen100 dt {
	background: #490000;
	color: #FFF;
	text-align: center;
	line-height: 3
}
#about_onsen100 dd {
	padding: 15px;
	font-size: 14px
}

/*------------------------------
scroll item
------------------------------*/
.scrollbox_wraper {
	margin-bottom: 25px;
	position: relative
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
    width: 32px;
    height: 32px;
    position: absolute;
    top: calc(50% - 32px);
    display: block;
    z-index: 1;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 0px 0px 6px #888
}
.scrollbox_wraper .scroll_left_btn {left: 0;}
.scrollbox_wraper .scroll_right_btn {right: 0;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
    content: "";
    display: block;
    width: 0;
    height: 0
}
.scrollbox_wraper .scroll_left_btn:after {
	position: absolute;
	top: 16px;
	left: 11px;
    border-left: 2px solid;
    border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top
}
.scrollbox_wraper .scroll_right_btn:after {
	position: absolute;
	top: 16px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top
}
.scrollbox_wraper .scroll_left_btn:before {
	position: absolute;
	top: 7px;
	left: 11px;
    border-left: 2px solid;
    border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom
}
.scrollbox_wraper .scroll_right_btn:before {
	position: absolute;
	top: 7px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom
}
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display:none!important
}
.scrollbox_wraper .scrollbox {overflow-x: scroll!important;}
.scrollbox_wraper .scrollbox > ul,
.scrollbox_wraper .scrollbox > ol {
    width: fit-content !important;
    display: flex !important;
    margin: 0 auto 15px !important;
	padding: 0 calc(calc(100% - calc(1140px / 4)) / 2)
}
.scrollbox_wraper .scrollbox > ul > li,
.scrollbox_wraper .scrollbox > ol > li {
	width: calc(1120px / 4) !important;
	margin: 0 5px !important;
	padding: 15px;
	box-sizing: border-box;
	background: #FFF
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #eee !important;
	border-radius: 5px !important
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #999 !important
}

}

/*760px以上*/
@media screen and (min-width: 760px),print {
#wrapper {line-height: 1.231;}
.pcnone{display:none;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: auto
}

/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	text-align: center;
	font-size: 32px;
	color:#FFF;
	font-weight: bold
}
hgroup {margin-bottom: 4%;}
h2 {
	width: fit-content;
	font-size: 24px;
	font-weight: bold;
	border-bottom: 4px solid #490000;
	margin: 0 auto 4%;
	padding: 0 15px 5px
}
h3 {
	width: fit-content;
	font-size: 24px;
	font-weight: bold;
	border-bottom: 4px solid #490000;
	margin: 0 auto 4%;
	padding: 0 15px 5px
}
.inner{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: 0 auto;
	padding:50px 0;
	display: block
}
.inner p{font-size: 18px;}

/*title*/
#mv_title_wrap {
	width: 100%;
	background: url(../images/pb-pixta123196389.jpg) 0% 50% / cover no-repeat;
	padding: 5% 0;
	box-sizing: border-box
}
#mv_title {
	width: 600px;
	margin: auto;
	padding: 5%;
	background: rgba(0, 0, 0, 0.5)
}

/*nav*/
nav#g_navi.fixNav {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 998;
}
nav#g_navi {background:#490000;}
nav#g_navi ul {
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: 0 auto;
	padding: 10px 0;
	display:flex;
	flex-wrap: wrap;
	align-items: center
}
nav#g_navi li {
	width: calc(100% / 4);
	text-align: center;
	box-sizing: border-box;
	border-right:1px solid #FFF
}
nav#g_navi li:last-child {border-right: none;}
nav#g_navi li a {
	width: 100%;
	height: 45px;
	font-size: 16px;
	color: #FFF;
	display: block;
	align-content: center
}

/*PRbanner*/
.pr_banner {
	width: 100%;
    margin-bottom: 2%
}
.pr_banner a {
    width: 640px;
	height: 120px;
    display: block;
    margin: 0 auto;
	color:#222
}
.pr_banner a img {
	width: 100%;
	height: auto
}
.pr_banner p {
    text-align: center;
	font-size: 14px;
	padding:1% 0
}

/*1-3位*/
.rank1-3 > li {
	font-size: 18px;
	margin-bottom: 75px;
	padding: 25px;
	background: #FFF
}
.rank1-3 dt.hotspring_spot {
	width: 65%;
	display: flex;
	align-items: center;
	margin: 0 0 25px auto
}
.rank1-3 dt.hotspring_spot img {
	width: 60px;
	height: 45px;
	margin-right: 30px
}
.rank1-3 dt.hotspring_spot h4 {
    width: calc(100% - 90px);
    font-size: 22px;
}
.rank1-3 dd.hotspring_txt {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px
}
.rank1-3 dd.hotspring_txt img {
	width: 30%;
	margin: -72px 5% 0 0
}
.rank1-3 dd.hotspring_txt p {width: 65%;}
.rank1-3 dd.plan_btn {margin-bottom: 50px;}
.rank1-3 dd.plan_btn > div{display: flex;}
.rank1-3 dd.plan_btn a {
	width: calc(94% / 3);
	margin: 0 1%;
	display: block;
	color: #FFF;
	text-align: center;
	line-height: 2.5;
	border-radius: 2em
}
.rank1-3 dd.plan_btn .yado {background: #f29a16;}
.rank1-3 dd.plan_btn .jrset {background:#4ea6cb;}
.rank1-3 dd.plan_btn .airset {background:#ea7c84;}
.rank1-3 dd.hotspring_rec h5 {
	text-align: center;
	margin-bottom: 25px
}
.rank1-3 dd.hotspring_rec .recommend {display: flex;}
.rank1-3 dd.hotspring_rec .recommend li {
    width: calc(990px / 4) !important;
    padding: 0;
    background: #FFF;
    box-shadow: 2px 2px 5px #ccc;
    border-radius: 5px;
    box-sizing: border-box
}
.rank1-3 dd.hotspring_rec .recommend li > a{color:#000;}
.rank1-3 dd.hotspring_rec .recommend li dt {
	margin-bottom: 10px;
	position: relative
}
.rank1-3 dd.hotspring_rec .recommend li h6,
.rank1-3 dd.hotspring_rec .recommend li p {font-size: 0.85em;}
.rank1-3 dd.hotspring_rec .recommend li h6 {
	position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-indent: 2%;
    line-height: 2;
	color:#FFF
}
.rank1-3 dd.hotspring_rec .recommend li img {border-radius: 5px 5px 0 0;}
.rank1-3 dd.hotspring_rec .recommend li p {
	min-height: 150px;
	margin-bottom: 10px;
	padding: 0 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden
}
.rank1-3 dd.hotspring_rec .recommend li .price {margin-bottom: 10px}
.rank1-3 dd.hotspring_rec .recommend li .price p {min-height: auto;}
.rank1-3 dd.hotspring_rec .recommend li .price p span.icon {
	display: inline-block;
	background: #f29a16;
	color: #fff;
	margin-bottom: 3px;
	padding: 2px 10px 4px;
	font-size: 0.85em
}
.rank1-3 dd.hotspring_rec .recommend li .price b {
	color: #d70000;
	text-align: center;
	font-size: 1.2em;
	display: inline-block;
	width: 100%
}
.rank1-3 dd.hotspring_rec .recommend li .price small {
	width: 100%;
	display: inline-block;
	text-align: center;
}

/*4-20位*/
.rank4-20 > li {font-size: 16px;}
section:nth-of-type(3) .scrollbox_wraper .scrollbox > .rank4-20 > li {width: calc(1040px / 4) !important;}
.rank4-20 dt.hotspring_spot {
	display: flex;
	align-items: center;
	margin-bottom: 15px
}
.rank4-20 dt.hotspring_spot p {
	width: 30px;
	height: 30px;
	margin-right: 15px;
	background: #4EA6CB;
	color: #FFF;
	text-align: center;
	border-radius: 1em;
	font-size: 20px
}
.rank4-20 dt.hotspring_spot img {
	width: 40px;
	height: 30px;
	margin-right: 5%
}
.rank4-20 dt.hotspring_spot h4 {width: calc(100% - 45px);}
.rank4-20.rank11-20 dt.hotspring_spot h4 {font-size:0.9em;}
.rank4-20 dd.hotspring_txt,
.rank4-20 dd.hotspring_txt img {margin-bottom: 15px;}
.rank4-20 dd.hotspring_txt p {font-size: 16px;}
.rank4-20 dd.plan_btn a {
	width: 98%;
	margin: 0 1% 5%;
	display: block;
	color: #FFF;
	text-align: center;
	line-height: 2.5;
	border-radius: 2em
}
.rank4-20 dd.plan_btn .yado {background: #f29a16;}
.rank4-20 dd.plan_btn .jrset {background:#4ea6cb;}
.rank4-20 dd.plan_btn .airset {background:#ea7c84;}
.rank4-20 dd.hotspring_rec {
	margin-bottom: 25px;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px
}
.rank4-20 dd.hotspring_rec h5 {
	text-align: center;
	font-weight: bold;
	margin-bottom: 15px
}
.rank4-20 dd.hotspring_rec .recommend {
	background: #FFF;
	border-radius: 5px;
	padding:0
}
.rank4-20 dd.hotspring_rec li {text-align: center;}
.rank4-20 dd.hotspring_rec li a {
	text-decoration: underline;
	text-decoration-color: #4EA6CB;
	color:#4EA6CB
}

/*21-100位 table*/
/*.rank21-100 {display: flex;}
.rank21-100 li {
	width: 48%;
	margin: 0 auto
}*/
table.acc_box {
	width: 650px;
	background: #fff;
	margin: 0 auto 3%;
	font-size: 16px
}
table.acc_box td {
    border: 1px solid #CCC;
    padding: 10px
}
table.acc_box tr td {width: 35%}
table.acc_box tr td.number {width: 15%}

/*map*/
.mapS img {
    width: 641px;
    height: auto;
    margin: auto;
    display: block
}

/*有名温泉リンク*/
#famous {
    background-color: #faf3f0;
    position: relative
}
#famous .inner {
    overflow: hidden;
    background: url(../../new_images/bg_i03.png) no-repeat;
    background-size: 100px auto
}
#famous .innerBox {
    background: #FFF;
    -moz-box-shadow: 0px 0px 8px rgba(250,226,215,0.9);
    -webkit-box-shadow: 0px 0px 8px rgba(250,226,215,0.9);
    box-shadow: 0px 0px 8px rgba(250,226,215,0.9);
    overflow: hidden
}
#famous .innerBox dt {
    background: url(../../new_images/ti_bg_pop.gif) repeat-x;
	background-size: auto 40px;
    height: 40px;
    color: #FFF;
    line-height: 36px;
    text-align: center;
    font-size: 18px
}
#famous .innerBox dd {
    padding: 25px 10px;
    display: block;
    overflow: hidden
}
#famous .innerBox dd ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap
}
#famous .innerBox dd ul li {
    margin: 0 15px 15px;
    padding: 0 0 0 10px;
    background: url(../../new_images/im_arrowp.png) no-repeat 0 50%;
    background-size: 6px auto;
	font-size: 16px
}
#area_onsen_ichiran_top .accordion {
	background-color: #fff;
	font-size: 16px
}
#area_onsen_ichiran_top .accordion summary {
    background: url(../../new_images/ti_bg_pop.gif) repeat-x;
	background-size: auto 40px;
    height: 40px;
    color: #FFF;
    line-height: 36px;
    text-align: center;
    font-size: 18px;
	list-style: none;
	pointer-events: none
}
#area_onsen_ichiran_top .accordion summary::-webkit-details-marker {display: none;}
#area_onsen_ichiran_top .accordion ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 25px 10px
}
#area_onsen_ichiran_top .accordion li{
	margin: 0 15px 15px;
	padding: 0 0 0 10px;
	background: url(../../new_images/im_arrowp.png) no-repeat 0 50%;
	background-size: 6px auto
}

/*tripa*/
#tripa_wrap li {
	background: #FFF;
	box-shadow: 2px 2px 5px #ccc;
	border-radius: 5px
}
#tripa_wrap a {color: #222;}
#tripa_wrap dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center
}
#tripa_wrap dt {
	width: 30%;
	margin-right: 5%
}
#tripa_wrap img{border-radius: 5px 0 0 5px;}
#tripa_wrap dd {
	width: 65%;
	font-size:18px
}

/*faq*/
#link04 .accordion {
    max-width:1080px;
    background-color: #fff;
	font-size: 18px
}
#link04 .accordion:not([open]) {margin-bottom: 2px;}
#link04 .accordion summary {
	display: flex;
	align-items: center;
	position: relative;
	padding: 15px 2em;
	color: #000;
	cursor: pointer
}
#link04 .accordion summary::-webkit-details-marker {display: none;}
#link04 .accordion summary::before {
	content: 'Q';
	color: #111183;
	font-size: 20px;
	margin-right: 25px;
	font-weight: bold
}
#link04 .accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    content: '';
    transition: transform .3s;
    position: absolute;
    right:2em
}
#link04 .accordion[open] summary::after {transform: rotate(225deg);}
#link04 .accordion div {
	display: flex;
	align-items: center;
    transform: translateY(-10px);
    margin: 0;
    padding: 2em;
    color: #414540;
    transition: transform .5s, opacity .5s
}
#link04 .accordion div::before {
	content: 'A';
	color: #b60000;
	font-size: 20px;
	margin-right: 25px;
	font-weight: bold
}
#link04 .accordion[open] div {
    transform: none;
    opacity: 1
}

/*about onsen100*/
#about_onsen100 {
	margin: 5% 0;
	background: #FFF;
	border: 2px solid #490000;
	border-radius: 5px;
	font-size: 18px
}
#about_onsen100 dt {
	background: #490000;
	color: #FFF;
	text-align: center;
	line-height: 3
}
#about_onsen100 dd {
	padding: 15px;
	font-size: 16px;
	line-height: 2
}

/*------------------------------
scroll item
------------------------------*/
.scrollbox_wraper {
	margin-bottom: 50px;
	position: relative
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
    width: 32px;
    height: 32px;
    position: absolute;
    top: calc(50% - 32px);
    display: block;
    z-index: 1;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 0px 0px 6px #888
}
.scrollbox_wraper .scroll_left_btn {left: -40px;}
.scrollbox_wraper .scroll_right_btn {right: -40px;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
    content: "";
    display: block;
    width: 0;
    height: 0
}
.scrollbox_wraper .scroll_left_btn:after {
	position: absolute;
	top: 16px;
	left: 11px;
    border-left: 2px solid;
    border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top
}
.scrollbox_wraper .scroll_right_btn:after {
	position: absolute;
	top: 16px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top
}
.scrollbox_wraper .scroll_left_btn:before {
	position: absolute;
	top: 7px;
	left: 11px;
    border-left: 2px solid;
    border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom
}
.scrollbox_wraper .scroll_right_btn:before {
	position: absolute;
	top: 7px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom
}
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display:none!important
}
.scrollbox_wraper .scrollbox {overflow-x: scroll!important;}
.scrollbox_wraper .scrollbox > ul,
.scrollbox_wraper .scrollbox > ol {
    width: fit-content !important;
    display: flex !important;
    margin: 0 auto 15px !important
}
.scrollbox_wraper .scrollbox > ul > li,
.scrollbox_wraper .scrollbox > ol > li {
	margin: 0 5px !important;
	padding: 15px;
	box-sizing: border-box;
	background: #FFF
}
#link02 .scrollbox_wraper .scrollbox > ol > li {width: calc(1060px / 3) !important;}/*4-10*/
.scrollbox_wraper .scrollbox > ul > li,
.scrollbox_wraper .scrollbox > ol > li {width: calc(1120px / 4) !important;}

.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #eee !important;
	border-radius: 5px !important
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #999 !important
}
@media (min-width: 760px) and (max-width: 900px){
	/*------------------------------
	for Tablet
	------------------------------*/
	.scrollbox_wraper .scrollbox {
		overflow-x: scroll!important;
		padding: 0;
	}
	.scrollbox_wraper .scrollbox > ul > li,
	.scrollbox_wraper .scrollbox > ol > li {
		width: 270px !important;
	    margin: 0 5px;
		background: #fff;
	}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
		margin: 0 5px!important;
		background: #eee!important;
		border-radius: 5px!important;
	}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
		border-radius: 5px!important;
		background: #999!important;
	}
}

/*スクロールなし*/
.scrollbox_wraper.pc_no_slider {
	margin-bottom: 15px;
	position: relative
}
.scrollbox_wraper.pc_no_slider .scroll_left_btn,
.scrollbox_wraper.pc_no_slider .scroll_right_btn,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar-track,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar-thumb {display:none!important;}
.scrollbox_wraper.pc_no_slider .scrollbox > ol li {margin-bottom: 10px !important;}

}