@charset "UTF-8";
*{ 
font-family: "Noto Serif JP", serif; }

body {
    background-color: #fff;
}
main {
    width: 900px;
    display: block;
    margin: 0 auto;
}
p {
    font-size: 100%;
}
.header {
    padding: 10px 0;
}

nav ul#ul-2 {
  list-style: none;
  margin: 0;
  padding: 0 0 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
nav ul#ul-2 li {
  margin: 0;
}
nav ul#ul-2 li a {
  display: block;
  padding: 12px 20px;
  color: black;
  background-color: #87cefa;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

nav ul#ul-2 li a:hover {
  background-color: #ff4500;
  color: white;
}

.info {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.box-wrapper {
    display: flex;
    justify-content: center;
}

.yuyu_bnr img {
    width: 300px;
    height: auto;
}
.yuyu_bnr a {
    text-decoration: none;
}
.yuyu_bnr a:hover {
    opacity: 0.6;
}
.yuyu_bnr_mini {
    display: none;
}
.toggle {
	display: none;
}
.Label {		/*タイトル*/
    display: inline-block; /* サイズを指定するために必要 */   
    width: 500px;
    height: 80px;
	text-align: center;
	padding: 0 /*10px 30px 10px 10px*/;
	display: block;
	color: #333;
	background:#fff;
	position: relative;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}
.block {
    display: block;
    margin: 0;
    padding: 0;
}
.block-01 {		/*タイトル*/
    background-image: url(onsen/img/onsen-bnr1.png);
}
.block-02 {		/*タイトル*/
    background-image: url(onsen/img/onsen-bnr2.png);
}
.block-03 {		/*タイトル*/
    background-image: url(onsen/img/onsen-bnr3.png);
}
.block-04 {		/*タイトル*/
    background-image: url(onsen/img/onsen-bnr4.png);
}
.block-01:hover {
    opacity: 0.6;
}
.block-02:hover {
    opacity: 0.6;
}
.block-03:hover {
    opacity: 0.6;
}
.block-04:hover {
    opacity: 0.6;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 10px;
	height: 10px;
	border-top: 4px solid #333;
	border-right: 4px solid #333;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
    width: 460px;
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
    background-color: #fff;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

.content {
	margin: 0;
	padding: 0;
    text-align: center;
    font-weight: bold;
}
.flex {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;
    padding: 8px 0 8px 110px;
}
.flex2 {
    width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0 50px;
} 
.flex2:first-child {
    padding-top: 0;
}
.link {
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 16px;
    text-align: right;
}
.link a {
    font-family: Arial, Helvetica, sans-serif;
}      
.course {
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    border: solid 1px #333 ;
    background-color: #fff;
    padding: 2px 5px;
    font-size: 16px;
}
.flex h2 {
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 2px 2px rgba(256, 256, 256, 1);
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}
.exp {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    line-height: 1em;
    text-align: left;
    padding: 0 0 0 110px;
    text-shadow: 1px 1px rgba(256, 256, 256, 1);
}

.breadscrub {
    margin-top: 0;
    margin-left: 13px;
    padding-top: 0;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}
.breadscrub a {
    text-decoration: none;
    color: #666;
}

.title {
    width: 100%;
    min-width: 700px;
    height: auto;
    margin-bottom: 10px;
}
.top-title {
    color: #431f0a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    text-indent: 0;
}
.top-title-mini {
    display: none;
}
.top {
    display: flex;
    justify-content: center;
    align-items: start;
    margin-bottom: 30px;
}
.text {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5em;
    text-align: left;
    width: 300px;
}
.tag-top {
    display: flex;
    flex-wrap: wrap;
}

.tag {
    background-color: #ffad5b;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0 20px 10px 0;
}
.tag a {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #333;
}
.tag a:hover {
    color: #000;
    font-weight: 700;
}
.list {
    width: 860px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 10px;
}
figure {
    margin: 20px 0 40px 0;
    padding: 0;
}
figure img {
    width: 260px;
    height: auto;
}
figcaption {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5em;
}
.detail {
    margin: 0;
    padding: 0;
}
.dish {
    display: flex;
    justify-content: space-between;
}
.dish-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
}
.price {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
}

/*access*/
h2 {
    margin: 0;
    line-height: 2em;
    text-indent: 0.5em;
}
h3 {
	text-align: left;
	text-indent: 2em;
}
.busmap {
	display: block;
    width: 800px;
    margin: 0 auto;
}
.busmap-sep {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.sep1 {
    width: 300px;
}
.sep2 {
    width: 670px;
}
.bus-link {
    display: block;
    width: 300px;
    background-color: #ffff7f;
    padding: 5px 10px;
    margin-bottom: 7px;
}
.bus-link a{
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    color: #000;
}
iframe {
    width: 250px;
    height: 250px;
    border: 0;
    margin-bottom: 0;
}
.busmap img {
	width: 500px;
	height: auto;
}

.bus-toggle {
	display: none;
}
.bus-Label {		/*タイトル*/
	text-align: center;
	padding: 10px 30px 10px 10px;
	display: block;
	color: #fff;
	background:#44617b;
	position: relative;
}
.bus-Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.bus-Label,
.bus-content1,
.bus-content2 {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.bus-content1, .bus-content2 {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	width: 100%;
	max-width: 720px;
	overflow-x: auto;
}

.bus-toggle:checked + .bus-Label + .bus-content1 {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.bus-toggle:checked + .bus-Label + .bus-content2 {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.bus-toggle:checked + .bus-Label::before {
	transform: rotate(-45deg) !important;
}
.small-text {
	font-size: 0.75em;
}

.bus-content1 table,
.bus-content2 table {
	width: 100%;
	table-layout: fixed;
	word-break: break-all;
	font-size: clamp(12px, 1.6vw, 16px);
	background-color: #fff;
	border: solid 1px #000;
	border-collapse: collapse;
}
.bus-content1 table col.col-left,
.bus-content2 table col.col-left {
  width: 160px;
  min-width: 130px;
}
.bus-content1 table th, .bus-content1 table tr
.bus-content2 table th, .bus-content2 table tr {
	border: solid 1px #000;
	padding: 5px;
}
.bus-content1 table td,
.bus-content2 table td {
	border: solid 1px #000;
	padding: 5px;
	text-align: right;
}
.bus-content1 table th,
.bus-content2 table th {
    border: solid 1px #000;
	font-size: 0.7em;
	text-align: center;
	background-color: #aaa;
}
.bus-content1 table td.left,
.bus-content2 table td.left {
	text-align: left;
	background-color: #ddd;
	padding: 0 5px;
	width: 160px;
	line-height: 1em;
	min-width: 130px;
}
.bus-content2 table td.sat {
	background-color: #7fffff;
}
.bus-content table2 td.sun {
	background-color: #ffff7f;
}

.bus-content1, .bus-content2 p{
	font-size: 16px;
	text-align: left;
	margin: 0;
	padding: 0 0 5px 0;
}
.parking {
    display: block;
    width: 800px;
    padding-right: 100px;
    margin-top: 30px;
}
.parking img {
    width: 100%;
    height: auto;
}
footer {
	text-align: center;
	font-size: 24px;
	line-height: 1.5em;
	color: #000;
	font-weight: 400;
	margin-top: 50px;
	margin-bottom: 20px;
}
.footer-mini {
	display: none;
}


@media screen and (max-width: 440px) {
    /* body 固定 */
    body {
        width: 320px;
        margin: 0 auto;
    }
    main {
        width: 320px;
    }
    nav{
		display: flex;
		justify-content: center;
	}
	nav {
		margin: 0 auto;
	}
    nav ul{
		display: flex;
		margin: 4px auto;
		padding: 0;
		font-size: 11px;
		line-height: 1.5em;
		text-align: center;
		vertical-align: middle;
	}

    .header nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    nav ul#ul-2 {
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 0;
        margin: 0;
    }

    nav ul#ul-2 li {
        width: 100%;
    }

    nav ul#ul-2 li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        /*padding: 12px 0px;*/
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
    }*/

	nav ul{
		display: flex;
		margin: 4px auto;
		padding: 0;
		font-size: 11px;
		line-height: 1.5em;
		text-align: center;
		vertical-align: middle;
	}

	nav ul li{
		list-style: none;
		display: table-cell;
		max-width: 64px;
	}

	nav ul li a {
		display: flex;
		align-items: center;     
		justify-content: center; 
		width: 64px;             
		height: 36px;            
		padding: 0;              
		line-height: normal;
		text-decoration: none;
		border-left: 1px solid #ffffff;
		background-color: #87cefa;
	}


    /* メインレイアウト */
    .info {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .box-wrapper {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .yuyu_bnr_mini {
        display: inline-block;
        width: 320px;
        height: auto;
    }
    .yuyu_bnr_mini a {
        text-decoration: none;
    }
    .yuyu_bnr_mini a:hover {
        opacity: 0.6;
    }
    .yuyu_bnr {
        display: none;
    }

    .Label {
        display: inline-block;    
        width: 320px;
        height: 51px;
	/*text-align: center;
	padding: 0 10px 30px 10px 10px;
	display: block;
	color: #333;
	background:#fff;
	position: relative;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;*/
    }
    /*
    .block-01 {		
        background-image: url(onsen/img/onsen-bnr1.png);
    }
    .block-02 {		
        background-image: url(onsen/img/onsen-bnr2.png);
    }
    .block-03 {		
        background-image: url(onsen/img/onsen-bnr3.png);
    }
    .block-04 {		
        background-image: url(onsen/img/onsen-bnr4.png);
    }
    .block-01:hover {
        opacity: 0.6;
    }
    .block-02:hover {
        opacity: 0.6;
    }
    .block-03:hover {
        opacity: 0.6;
    }
    .block-04:hover {
        opacity: 0.6;
    }*/
    .Label::before{
        /*content:"";*/
        width: 6px;
        height: 6px;
        right: 10px;
        /*border-top: 4px solid #333;
        border-right: 4px solid #333;
        -webkit-transform: rotate(45deg);
        position: absolute;
        top:calc( 50% - 3px );
        
        transform: rotate(135deg);*/
    }
    /*.Label,
    .content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
    }*/
    .content {
        width: 320px;
        /*height: 0;*/
        margin: 0;
        padding:0 20px;
        font-size: 12px;
        position: relative;
        left: -15px;
        /*
        overflow: hidden;
        background-color: #fff;*/
    }
    /*
    .toggle:checked + .Label + .content {
        height: auto;
        padding:20px ;
        transition: all .3s;
    }
    .toggle:checked + .Label::before {
        transform: rotate(-45deg) !important;
    }


    .content {
        margin: 0;
        padding: 0;
        text-align: center;
    }*/
    .flex {
        /*display: flex;
        justify-content: left;
        align-items: center;*/
        gap: 10px;
        padding: 5px 0 5px 60px;
    }
    .flex2 {
        width: 290px;/*
        display: flex;
        justify-content: space-between;
        align-items: center;*/
        padding: 10px 0 0 10px;
    } 
    .link {
        font-size: 10px;
        padding-top: 16px;
        padding-right: 10px;
    }
    /*.flex2:first-child {
        padding-top: 0;
    } */     
    .course {
        /*font-family: Arial, Helvetica, sans-serif;
        display: block;
        border: solid 1px #333 ;
        background-color: #fff;*/
        padding: 2px 5px;
        font-size: 13px;
    }
    .flex h2 {
        /*
        font-family: Arial, Helvetica, sans-serif;
        text-shadow: 2px 2px rgba(256, 256, 256, 1);
        line-height: 1.5em;
        padding: 0;
        margin: 0;*/
        font-size: 18px;
    }
    .exp {
        /*font-family: Arial, Helvetica, sans-serif;*/
        font-size: 9px;
        /*font-weight: bold;
        margin: 0;
        line-height: 1em;
        text-align: left;*/
        padding: 0 0 0 60px;
        /*text-shadow: 1px 1px rgba(256, 256, 256, 1);*/
    }
    /*
    .block {
        display: block;
        margin: 0;
        padding: 0;
    }*/
    /*.block h3 {
        font-family: Arial, Helvetica, sans-serif;
        width: 320px;
        font-size: 13px;*/
        /*line-height: 1.5em;
        text-align: center;
        margin: 0;
        padding: 0;
        text-indent: 0;
    }*/
    .breadscrub {
    /*    margin-top: 0;
        padding-top: 0;
        margin-bottom: 10px;
        color: #666;*/
        font-size: 12px;
        margin-left: 10px;
    }
    .title img {
        width: 320px;
        /*width: 100%;
        height: auto;*/
    }
    .tag-top {
        display: block;
        width: 200px;
        margin: 0 auto;
        padding-bottom: 20px;
    }
    .top-title {
        display: none;
    }
    .top-title-mini {
        display: flex;
        justify-content: center;
        width: 100%;
        color: #431f0a;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        line-height: 1.5em;
        text-align: center;
        margin: 10px auto;
        padding: 0;
    }
    .indent {
        display: flex;
        justify-content: center;
        width: 100%;
        color: #431f0a;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        line-height: 1.5em;
        text-align: left;
        margin: 10px auto;
        padding: 0;
        text-indent: -4.3em;
        padding-left: 4em;
    }
    .top {
        display: block;
        width: 320px;
        margin-left: 20px;
        margin-bottom: 30px;
    }
    .tag {
        /*background-color: #ffad5b;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;*/
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
        margin: 0 20px 10px 0;
        width: 100%;
    }
    /*.tag a {
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: #333;
    }
    .tag a:hover {
        color: #000;
        font-weight: 700;
    }*/
    .list {
        width: 320px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*margin: 0 10px;*/
    }
    
    figure {
        margin: 10px 0 30px 0;
        /*padding: 0;*/
    }
    figure img {
        width: 150px;
        /*height: auto;*/
    }
    figcaption {
        font-size: 12px;
        /*font-weight: bold;
        line-height: 1.5em;*/
    }
    /*.detail {
        margin: 0;
        padding: 0;
    }
    .dish {
        display: flex;
        justify-content: space-between;
    }*/
    .two-dish {
        display: block;
    }
    .dish-name {
        /*font-family: Arial, Helvetica, sans-serif;*/
        font-size: 14px;
        /*font-weight: 400;*/
    }
    .price {
        /*font-family: Arial, Helvetica, sans-serif;*/
        font-size: 14px;
        /*font-weight: 400;*/
    }
    .mini {
        display: none;
    }

    /*access*/
    h2 {
        margin: 0;
        line-height: 2em;
        text-indent: 0.5em;
    }
    h3 {
        text-align: left;
        text-indent: 2em;
    }
    .busmap {
        display: block;
        max-width: 320px;
        margin: 0 auto;
    }
    .busmap-sep {
        display: block;
        max-width: 320px;
        margin: 0 auto;
    }
    .sep1 {
        display: block;
        width: 250px;
        margin: 0 auto;
    }
    .sep2 {
        width: 300px;
    }
    /*iframe {
        width: 250px;
        height: 250px;
        border: 0;
        margin-bottom: 0;
    }*/
    .busmap img {
        width: 300px;
        /*height: auto;*/
    }

    /*.bus-toggle {
        display: none;
    }*/
    /*.bus-Label {		
        text-align: center;
        padding: 10px 30px 10px 10px;
        display: block;
        color: #fff;
        background:#44617b;
        position: relative;
    }*/
    /*.bus-Label::before{		
        content:"";
        width: 6px;
        height: 6px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        -webkit-transform: rotate(45deg);
        position: absolute;
        top:calc( 50% - 3px );
        right: 20px;
        transform: rotate(135deg);
    }*/
    /*.bus-Label,
    .bus-content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
    }*/
    .bus-content1 {		
        /*height: 0;
        margin-bottom:10px;
        padding:0 10px;
        width: 100%;
        max-width: 720px;
        overflow-x: auto;
        overflow: hidden;*/
        position: relative;
        left: -20px;
        top: -20px;
    }
    .bus-content2 {		
        height: 0;
        margin-bottom:10px;
        padding:0 10px;
        width: 100%;
        max-width: 720px;
        overflow-x: auto;
        overflow: hidden;
        position: relative;
        left: -20px;
        top: -10px;
    }
    /*.bus-toggle:checked + .bus-Label + .bus-content {
    
        height: auto;
        padding:20px ;
        transition: all .3s;
    }
    .bus-toggle:checked + .bus-Label::before {
        transform: rotate(-45deg) !important;
    }*/

    /*.bus-content table {
        width: 100%;
        table-layout: fixed;
        word-break: break-all;
        font-size: clamp(12px, 1.6vw, 16px);
        background-color: #fff;
        border: solid 1px #000;
        border-collapse: collapse;
    }*/
    .scroll-container table {
        font-size: 0.8em;
        border: solid 1px #000;
        border-collapse: collapse;
        min-width: max-content;
    }
    .bus-content2 table th,tr {
        border: solid 1px #000;
        padding: 5px;
    }
    /*.bus-content table td {
        border: solid 1px #000;
        padding: 5px;
        text-align: right;
    }
    .bus-content table th {
        font-size: 0.7em;
        text-align: center;
        background-color: #aaa;
    }
    .bus-content table td.left {
        text-align: left;
        background-color: #ddd;
        padding: 0 5px;
        width: 160px;
        line-height: 1em;
        min-width: 130px;
    }
    .bus-content table td.sat {
        background-color: #7fffff;
    }
    .bus-content table td.sun {
        background-color: #ffff7f;
    }
    */
    .bus-content1 p, .bus-content2 p {
        font-size: 12px;
        /*text-align: left;
        margin: 0;
        padding: 0 0 5px 0;*/
    }
    .sticky {
        position: sticky;
        top: 0;
        left: 0;
        border-top: none;
    }
    .sticky::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*border-top: 1px solid #000;*/
        border-bottom: 1px solid #000;
        background: #ccc;
        z-index: -1;
    }
    .scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOSでヌルっと */
        width: 100%;
    }

    .scroll-container table {
        min-width: max-content;  /* 列数分ちゃんと横に広げる */
        table-layout: fixed;
    }
    /* 左列 */
    .scroll-container col.col-left {
        width: 88px;
        min-width: 74px;
    }

    /* 左列以外の th / td */
    .scroll-container th,
    .scroll-container td {
        width: 55px;
        min-width: 55px;
        text-align: center;
    }

    /* 左列 td は除外（上書き） */
    .scroll-container td.left,
    .scroll-container th.sticky {
        width: 80px;
        min-width: 72px;
        text-align: left;
    }
    .parking {
        width: 300px;
        margin-top: 10px;
    }
    footer {
		display: none;
	}
	.footer-mini {
		display: block;
		text-align: center;
		font-size: 16px;
		line-height: 1.5em;
		color: #000;
		font-weight: 400;
		margin-top: 30px;
		margin-bottom: 20px;
	}
}