@charset "utf-8";

@import url(responsive-concept.css);
@import url(responsive-schedule.css);
@import url(responsive-price.css);
@import url(responsive-reserve.css);
@import url(responsive-cafe.css);
@import url(responsive-contact.css);


header {
}
@media screen and (max-width: 1920px) {
#main {
margin-left: 5%;
}
.c2 {
.container-calendar { 
background: #ffffff; 
padding: 0px; 
width: 100%; 
margin: 0 auto; 
overflow: auto;
}
.table-calendar {
margin: 0 auto; 
border-collapse: collapse;
width: 80%;
}
}
#sub {
margin-right: 180px;
}
}
@media screen and (max-width: 1600px) {
#main {
margin-left: 0;
float: left;
}
.c2 {
.container-calendar { 
background: #ffffff; 
padding: 0px; 
width: 100%; 
margin: 0 auto; 
overflow: auto;
}
.table-calendar {
margin: 0 auto; 
border-collapse: collapse;
width: 80%;
}
}
#sub {
margin-right: 0;
float: right;
}
}

@media screen and (max-width: 1300px) {
#main {
margin: 0 auto;
width: 80%;
}
#contents_box h1 {
margin-top: 0px;
font-size: 120%;
background-image: url(../images/background_h1.png);
background-repeat: no-repeat;
background-color: palegreen;
background-position: right;
border: 3px double green;
}
#contents_box {
margin: 0 auto;
width: 100%;
height: auto;
float: left;
}
#contents_box .c1, 
#contents_box .c2 {
padding: 0;
width: 48%;
height: auto;
margin-bottom: 0;
border: 1px dotted lightgreen;
}
#contents_box .c1 {
margin-left: -20px;
}
#contents_box .c2 {
margin-left: 10px;
}
#contents_box .c1 section {
time {
margin-right: 30px;
color: blue;
font-weight: bold;
}
ul li {
width: 95%;
text-indent: -20px;
font-size: 90%;
margin-bottom: 20px;
}
}
.c2 {
.container-calendar { 
background: #ffffff; 
padding: 0px; 
width: 100%; 
margin: 0 auto; 
overflow: auto;
}
.table-calendar {
margin: 0 auto; 
border-collapse: collapse;
width: 100%;
}
}
#contents_box .c3, #contents_box .c4,#contents_box .c5  {
width: 32%;
height: auto;
border: 1px dotted lightgreen;
margin-left: 10px;
}
#contents_box .c3 {
margin-left: -20px;
}
.minpaku_set {
width: 48%;
}
.dinner_set {
width: 48%;
}
#contents_box .c4 .cafe_set {
margin-bottom: 20px;
width: 53%;
float: left;
}
#contents_box .c4 p {
font-size: 50%;
}
#contents_box .c5 p {
width: 100%;
height: 80px;
font-size: 70%;
overflow: scroll;
}
#contents_box .c6 {
width: 99%;
height: auto;
margin-left: -20px;
border: 1px dotted gray;
}
#contents_box .c6 .picture {
width: 31%;
margin: 5px;
border-radius: 5px;
float: left;
}
#sub {
width: 19%;
margin: 0;
padding: 0;
float: right;
}
#sub ul li {
list-style-type: none;
text-indent: -30px;
font-size: 70%;
}
#sub ul li {
	h2 {
	margin: 0;
	padding: 0;
	}
	.scpos {
	width: 100%;
	margin: 0 auto;
	}
	figure {
	margin: 0;
	padding: 0;
	}
	a {
	text-decoration: none;
	}
}
}
@media screen and (max-width: 1200px) {
header h1 {
position: absolute;
top: 0;
left: 30%;
margin-top: 5px;
text-align: center;
z-index: 2;
}
nav {
width: 100%;
}
nav ul {
margin: 0 auto;
padding: 0;
width: 90%;
height: 100%;
}
nav ul li a {
display: flex;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
font-size: 200%;
}
.six_kakkei { 
width: 33.3%; 
height: 80px; 
background-color: yellowgreen; 
position: relative; 
display: flex; 
}
.six_kakkei a {
width: 100%;
height: 80px;
border:1px solid forestgreen;
}
#main {
width: 80%;
}
#contents_box h1 {
margin-top: 0px;
font-size: 120%;
background-image: url(../images/background_h1.png);
background-repeat: no-repeat;
background-color: palegreen;
background-position: right;
border: 3px double green;
}
#contents_box {
margin: 0 auto;
width: 100%;
height: auto;
float: left;
}
#contents_box .c1, 
#contents_box .c2 {
padding: 0;
width: 48%;
height: auto;
margin-bottom: 0;
border: 1px dotted lightgreen;
}
#contents_box .c1 {
margin-left: -20px;
}
#contents_box .c2 {
margin-left: 10px;
}
#contents_box .c1 section {
time {
margin-right: 30px;
color: blue;
font-weight: bold;
}
ul li {
width: 95%;
text-indent: -20px;
font-size: 90%;
margin-bottom: 20px;
}
}
.c2 {
.container-calendar { 
background: #ffffff; 
padding: 0px; 
width: 100%; 
margin: 0 auto; 
overflow: auto;
}
.table-calendar {
margin: 0 auto; 
border-collapse: collapse;
width: 100%;
}
}
#contents_box .c3, #contents_box .c4,#contents_box .c5  {
width: 32%;
height: auto;
border: 1px dotted lightgreen;
margin-left: 10px;
}
#contents_box .c3 {
margin-left: -20px;
}
.minpaku_set {
width: 48%;
}
.dinner_set {
width: 48%;
}
#contents_box .c4 .cafe_set {
margin-bottom: 20px;
width: 53%;
float: left;
}
#contents_box .c4 p {
font-size: 50%;
}
#contents_box .c5 p {
width: 100%;
height: 80px;
font-size: 70%;
overflow: scroll;
}
#contents_box .c6 {
width: 99%;
height: auto;
margin-left: -20px;
border: 1px dotted gray;
}
#contents_box .c6 .picture {
width: 31%;
margin: 5px;
border-radius: 5px;
float: left;
}
#sub {
width: 20%;
margin: 0;
padding: 0;
float: right;
}
#sub ul li {
list-style-type: none;
text-indent: -30px;
font-size: 70%;
}
#sub ul li {
h2 {
margin: 0;
padding: 0;
}
.scpos {
width: 100%;
margin: 0 auto;
}
figure {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
}
@media screen and (max-width: 900px) {
header h1 {
position: absolute;
top: 0;
left: 27%;
margin-top: 5px;
text-align: center;
z-index: 2;
}
nav {
width: 100%;
}
nav ul {
margin: 0 auto;
padding: 0;
width: 90%;
height: 100%;
}
nav ul li a {
display: flex;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
font-size: 200%;
}
.six_kakkei { 
width: 33.3%; 
height: 80px; 
background-color: yellowgreen; 
position: relative; 
display: flex; 
}
.six_kakkei a {
width: 100%;
height: 80px;
border:1px solid forestgreen;
}
#main {
width: 80%;
}
#contents_box h1 {
margin-top: 0px;
font-size: 120%;
background-image: url(../images/background_h1.png);
background-repeat: no-repeat;
background-color: palegreen;
background-position: right;
border: 3px double green;
}
#contents_box {
margin: 0 auto;
width: 100%;
height: auto;
float: left;
}
#contents_box .c1, 
#contents_box .c2 {
padding: 0;
width: 48%;
height: auto;
margin-bottom: 0;
border: 1px dotted lightgreen;
}
#contents_box .c1 {
margin-left: -20px;
}
#contents_box .c2 {
margin-left: 10px;
}
#contents_box .c1 section {
time {
margin-right: 30px;
color: blue;
font-weight: bold;
}
ul li {
width: 95%;
text-indent: -20px;
font-size: 90%;
margin-bottom: 20px;
}
}
.c2 {
.container-calendar { 
background: #ffffff; 
padding: 0px; 
width: 100%; 
margin: 0 auto; 
overflow: auto;
}
.table-calendar {
margin: 0 auto; 
border-collapse: collapse;
width: 100%;
}
}
#contents_box .c3, #contents_box .c4,#contents_box .c5  {
width: 32%;
height: auto;
border: 1px dotted lightgreen;
margin-left: 10px;
}
#contents_box .c3 {
margin-left: -20px;
}
.minpaku_set {
width: 48%;
}
.dinner_set {
width: 48%;
}
#contents_box .c4 .cafe_set {
margin-bottom: 20px;
width: 53%;
float: left;
}
#contents_box .c4 p {
font-size: 50%;
}
#contents_box .c5 p {
width: 100%;
height: 80px;
font-size: 70%;
overflow: scroll;
}
#contents_box .c6 {
width: 100%;
height: auto;
margin-left: -20px;
border: 1px dotted gray;
}
#contents_box .c6 .picture {
width: 31%;
margin: 5px;
border-radius: 5px;
float: left;
}
#sub {
width: 20%;
margin: 0;
padding: 0;
float: right;
}
#sub ul li {
list-style-type: none;
margin-left: 10px;
text-indent: -30px;
}
#sub ul li {
h2 {
margin: 0;
padding: 0;
font-size: 100%;
}
.scpos {
width: 100%;
margin: 0 auto;
}
figure {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
}
@media screen and (max-width: 600px) {
header h1 .logo_size {
width: 60%;
}
header h1 {
position: absolute;
top: 0;
left: 4%;
margin-top: 5px;
text-align: center;
z-index: 2;
}
nav {
margin: 0 auto;
width: 100%;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 93%;
height: 300px;
}
nav ul li a {
display: flex;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
font-size: 200%;
}
.six_kakkei { 
width: 100%; 
height: 80px; 
background-color: yellowgreen; 
position: relative; 
display: flex; 
}
.six_kakkei a {
width: 100%;
height: 80px;
border:1px solid forestgreen;
}
#main {
width: 100%;
}
#contents_box h1 {
margin-top: 0px;
font-size: 120%;
background-image: url(../images/background_h1.png);
background-repeat: no-repeat;
background-color: palegreen;
background-position: right;
border: 3px double green;
}
#contents_box {
margin: 0 auto;
width: 100%;
height: auto;
}
#contents_box .c1, 
#contents_box .c2 {
padding: 0;
margin-left: -30px;
width: 105%;
height: auto;
border: 1px dotted lightgreen;
}
#contents_box .c1 section {
time {margin-right: 30px;
color: blue;
font-weight: bold;
border-bottom: 1px solid blue;
}
ul li {
width: 95%;
text-indent: -20px;
font-size: 90%;
margin-bottom: 20px;
border-bottom: 1px solid blue;}
}
.c2 {
.container-calendar { 
background: #ffffff; 
padding: 0px; 
width: 100%; 
margin: 0 auto; 
overflow: auto;
}
.table-calendar {
margin: 0 auto; 
border-collapse: collapse;
width: 100%;
}
}
#contents_box .c3, #contents_box .c4,#contents_box .c5  {
width: 100%;
height: auto;
border: 1px dotted lightgreen;
margin-left: -25px;
}
.minpaku_set {
width: 100%;
}
.dinner_set {
width: 100%;
}
#contents_box .c4 .cafe_set {
width: 100%
}
#contents_box .c5 p {
width: 100%
}
#contents_box .c6 {
width: 100%;
height: auto;
margin-left: -25px;
border: 1px dotted gray;
}
#contents_box .c6 .picture {
width: 100%;
margin: 0;
border-radius: 5px;
}
#sub {
padding: 0;
width: 100%;
float: right;
}
#sub ul li {
list-style-type: none;
margin-left: 10px;
text-indent: -30px;
font-size: 70%;
}
#sub ul li {
h2 {
margin: 0;
padding: 0;
}
.scpos {
width: 100%;
margin: 0 auto;
}
figure {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
}
@media screen and (max-width: 380px) {
header h1 .logo_size {
width: 100%;
}
header h1 {
position: absolute;
top: 0;
left: 4%;
margin-top: 5px;
text-align: center;
z-index: 2;
}
nav {
margin: 0 auto;
width: 100%;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 93%;
height: 300px;
}
nav ul li a {
display: flex;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
font-size: 200%;
}
.six_kakkei { 
width: 100%; 
height: 80px; 
background-color: yellowgreen; 
position: relative; 
display: flex; 
}
.six_kakkei a {
width: 100%;
height: 80px;
border: 1px solid forestgreen;
}
}
@media screen and (max-width: 361px) {
header h1 .logo_size {
width: 60%;
}
header h1 {
position: absolute;
top: 0;
left: 2%;
margin-top: 5px;
text-align: center;
z-index: 2;
}
}