/*-------------------------------
@media screen and (max-width: 768px) {}
@media screen and (min-width: 769px) {}
---------------------------------*/

@media screen and (max-width: 768px) {
body{
background: url(image/background-kashima.jpg) left bottom no-repeat;
}}
@media screen and (min-width: 769px) {
body{
width:95%;	/*ie横スクロールバグ対策*/
}}

/*---- container -------*/
#container{
margin:0 auto;
}
@media screen and (max-width: 768px) {
#container{
max-width:100%;
min-width:320px;
overflow: hidden;	/*スマホはみ出し無視*/
}}
@media screen and (min-width: 769px) {
#container{
width:900px;
}}

/*---- header -------*/

#header{
max-width:900px;
height:86px;
text-indent:-9999px;
background:url(image/travel-top1.jpg) no-repeat;
}
#header a{
max-width:900px;
height:86px;
display:block;
}


/*----- top list ------*/
#topnavi{
max-width:900px;
background-color:#f6f6fe;
}
@media screen and (max-width: 768px) {	/*背景色対策*/
#topnavi{
padding-bottom:95px;
}}
@media screen and (min-width: 769px) {
#topnavi{
padding-bottom:25px;
}}

#topnavi ul{
width:100%;
padding-top:5px;
padding-bottom:10px;
background-color:#f6f6fe;
}
#topnavi li{
float:left;
max-width:100px;
font-size:13px;
text-align:left;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
white-space:nowrap;	/*li内で折返し禁止*/ /* これを使用するとIEでul内全部折り返し禁止になる */
background-color:#f6f6fe;
}

#topnavi a{
color:#004080;
}
#topnavi a:hover{
color:#004080;
}

@media screen and (max-width: 768px) {
#topnavi li{
padding-left:20px;
}}

#topnavi-c1{	/*--- これでclearfix解除しないと画面縮小時、<h1>が巻き込まれる ---*/
clear: both;
}

/*--------------------*/
h1{
font-size:14px;
color:#660000;
font-weight: 700;
line-height:1.5em;
padding-top:30px;
padding-bottom:20px;

}

h2{
font-size:13px;
color:#660000;
line-height:1.5em;
margin-bottom:20px;
}

/*左コンテンツ*/
.contents{
font-size:14px;
text-align:left;
line-height:2em;
}

@media screen and (max-width: 768px) {
.contents{
min-width:320px;
}}
@media screen and (min-width: 769px) {
.contents{
width:80%;
float:left;
}}

.list,.list2,.list150,.list200,.list250,.list-n,.list-n2{
max-width:95%;
padding-top:15px;
padding-left:10px;
padding-right:10px;
padding-bottom:15px;
overflow:hidden;
/* border-top:2px dotted #cccccc; */
}

@media screen and (min-width: 769px) {
.list dt,.list150 dt,.list200 dt,.list250 dt{
text-align:center;	/* 文字使用時用に中央揃え */
clear:both;
float:left;
display:inline;
}

.list dt{
max-width:410px;	/* 400px画像用 */
}
.list dd{
margin-left:420px;	/* 画像幅よりも多く取る */
padding-top:10px;
}

.list150 dt{
max-width:160px;	/* 150px画像用 */
}
.list150 dd{
margin-left:170px;	/* 画像幅よりも多く取る */
}

.list200 dt{
max-width:210px;	/* 200px画像用 */
}
.list200 dd{
margin-left:220px;	/* 画像幅よりも多く取る */
padding-top:10px;
}

.list250 dt{
max-width:260px;	/* 150px画像用 */
}
.list250 dd{
margin-left:270px;	/* 画像幅よりも多く取る */
padding-top:10px;
}}


.list-n dd{			/* floatなし */
padding-top:20px;
}

.list-n2 dd{		/* floatなし */
padding-top:20px;
text-align:center;	/* 文字を中央に配置 */
}

.list p{
padding-top:15px;
padding-bottom:15px;
/* border-top:2px dotted #cccccc; */
}

.list2 p{
padding-bottom:15px;
/* border-top:2px dotted #cccccc; */
}



.list-end{
font-size:14px;
font-weight: bold;
text-align:center;
padding-top:15px;
/* border-top:2px dotted #cccccc; */
}

.list-end li{
display:inline;
padding-right:25px;
}

.addres{
font-size:13px;
text-align:center;
border-top:3px dotted #999999;
padding-top:15px;
padding-bottom:20px;
}

.ads{
text-align:center;
padding-bottom:20px;
}


/*----------- index ------------*/

.contents-i{
font-size:13px;
text-align:center;
}

@media screen and (max-width: 768px) {
.contents-i{
width:100%;
}}
@media screen and (min-width: 769px) {
.contents-i{
float:left;
width:75%;
}}

.index1{
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.index1 dt{
width:25%;
clear:both;
float:left;
display:inline;
}
.index1 dd{
width:25%;
float:right;
}

/*--------- sidebar -------*/
@media screen and (max-width: 768px) {
.sidebar{
width:98%;
margin:0 auto;
background-color:#ffffff;
}
.sidebar h3{
width:98%;
}}
@media screen and (min-width: 769px) {
.sidebar{
width:20%;
float:right;
}
.sidebar h3{
width:180px;
}}

.sidebar h3{
font-size:14px;
color:#f7f7f7;
line-height:1.8em;
text-align:center;
margin-bottom:15px;
background-color:#999999;
margin:0 auto;
}

@media screen and (max-width: 768px) {
.sidebar ul{
width:98%;
margin:0 auto;
margin-left:0px;
}
.sidebar li{
}}
@media screen and (min-width: 769px) {
.sidebar ul{
margin-right:32px;
margin:0 auto;
}
.sidebar li{
width:160px;
}}

.sidebar li{
font-size:13px;
line-height:180%;
text-align:left;
padding-left:15px;
display:block;
border-bottom:2px dotted #333333;
margin-top:10px;
margin-bottom:10px;
}

.sidebar li a:hover{
color:#cccccc;
}