@charset "utf-8";
/* CSS Document */
#con_bottomcenter {
font-family: "Meiryo","Hiragino Kaku Gothic ProN",  sans-serif;}
img{
	vertical-align:bottom;
}

#amami_dive h1 {
text-align:center;
padding:5px;
background:#0d6e7f;
color:#FFF;
font-size:120%;}

#header_txt{
	background: url(image/header_02.jpg)no-repeat;
	width:900px;
	height:188px;
	overflow:hidden;
}



#header_txt p{
	width:560px;
	height:auto;
	margin:45px 25px 0px;
	line-height:1.5;
	color:#333333;
}

#bg_color{
	width:900px;
	height:auto;
	background-color:#e3eef1;
	overflow:hidden;
}

#inbox{
	width:880px;
	height:auto;
	margin:10px 0px 0px 10px;
}

.areatitle{
	width:880px;
	height:50px;
}

.area_box{
	border:#187fc4 1px solid;
	width:878px;
	height:auto;
	margin-bottom:15px;
	background-color:#FFFFFF;
	overflow:hidden;
}

.area_inbox{
	width:870px;
	height:auto;
	margin-left:10px;
}

.area_syoukai p{
	width:840px;
	margin:10px 0px 10px 10px;
	line-height:1.5;
}

.spotbg{
	background:url(image/spot_bg.jpg) no-repeat;
	width:425px;
	height:210px;
	overflow:hidden;
	float:left;
	margin:8px 8px 10px 0px;
}

.bginbox{
	width:409px;
	height:auto;
	margin:8px 0px 8px 8px;
	overflow:hidden;
}

.spotbar{
	background-color:#187fc4;
	width:409px;
	height:27px;
	float:left;
	margin-bottom:8px;
	overflow:hidden;
}

.spotbar h3{
	color:#FFF;
	font-size:14px;
	line-height:27px;
	margin-left:10px;
}

.level{
	width:200px;
	height:17px;
	background-color:#FFFFFF;
	position:relative;
	top:-22px;
	left:203px;
}

.level p{
	font-size:13px;
	text-align:center;
	line-height:17px;
}

.spot_syoukai{
	width:409px;
	height:auto;
	overflow:hidden;
}

.spot_syoukai img{
	width:165px;
	height:155px;
	float:left;
	margin-right:8px;
	overflow:hidden;
}

.spot_syoukai p{
	width:235px;
	height:auto;
	font-size:13px;
	line-height:1.15;
	letter-spacing:0.08em;
	margin-top:3px;
	overflow:hidden;
}

.tourbg{
	border:#35b8b0 4px solid;
	width:850px;
	_width:856px;
	height:auto;
	margin-bottom:10px;
	overflow:hidden;
}

.tourbg h3{
	font-size:150%;
	letter-spacing:0.1em;
	border-bottom:#35b8b0 dotted 3px;
	padding:8px 10px;
	color:#35b8b0;
}

.hotel{
	width:845px;
	height:auto;
	margin:10px 0px 10px 10px;
	overflow:hidden;
}

.hotel_img{
	float:left;
	width:280px;
}
.hotel_txt {
	float:left;
	width:565px;
}
.hotel p{
	margin:0px 10px 10px 0px;
	line-height:1.5;
}


.tourlink ul{
	width:450px;
	height:auto;
}

.tourlink ul li{
	width:130px;
	height:auto;
	float:left;
}

.tourlink li a {
	display:block;
	width:120px;
	height:30px;
	color:red;
	font-weight:700;
	text-decoration:none;
	text-align:center;
	padding-top: 50px;
	font-size:120%;
}

/*
.tourlink li.tokyo a {
	background:url(image/btn_tokyo.gif) no-repeat;
}
.tourlink li.tokyo:hover a
 {background:url(image/btn_tokyo_o.gif) no-repeat;}
.tourlink li.kansai a {
	background:url(image/btn_kansai.gif) no-repeat;
}
.tourlink li.kansai:hover a
 {background:url(image/btn_kansai_o.gif) no-repeat;}
*/







/*******ここから20171109*******/


.tourlink ul{
	width:100%;
	height:auto;
  overflow: hidden;
  display: flex;
}

.tourlink ul li{
	width:calc(100%/4);
	height:auto;
	float:none;
}

.tourlink ul li:first-child {
  margin-right: 10px;
}

.tourlink li a {
	display:block;
	width:100%;;
	height:100%;
	color:#0d6e7f;
padding: 0;
	text-decoration:none;
	text-align:center;
	line-height: 2.2;
	font-size:120%;
background: linear-gradient( #d4f0e9 0%, #9bd7c6 100%);
  border: 2px solid #35b8b0;
 text-shadow: white 2px 0px, white -2px 0px, white 0px -2px, white 0px 2px, white 2px 2px, white -2px 2px, white 2px -2px, white -2px -2px, white 1px 2px, white -1px 2px, white 1px -2px, white -1px -2px, white 2px 1px, white -2px 1px, white 2px -1px, white -2px -1px;
}


.tourlink li a:hover {
  background: linear-gradient( #fbdf92  0%, #f6c559 100%);
  border-color: #af7c19;
  color: #dd9811;
}



@media only screen and (max-width: 990px) {



/*幅100%*/
  #amami_dive ,#header_txt p ,#bg_color,#inbox, .area_syoukai p,.area_inbox, .area_box, .divingspot, .spotbg, .spot_syoukai, .spot_syoukai p, .spotbar, .level, .bginbox, .tourbg, .hotel, .hotel_txt, .hotel_img {
    width: 100%;
    margin: auto;
  height: auto;
  }
  
  
    #header_txt {
    width: 100%;
    background: none;
    height: auto;
    margin: 0 auto 20px;
  }
      
  
  .divingspot h2 {
  font-size: 110%;
  border-bottom: 1px solid #888888;
  border-left: 5px solid #187fc4;
  padding: 0 0 3px 5px;
  width: 98%;
  margin: 20px auto 0;
}
  
  .area_box {
    margin-bottom: 50px;
  }
  
  
  .spotbar {
    float: none;
  }
  
  .spotbar h3{
	color:#FFF;
	font-size:14px;
	line-height:27px;
	margin: 0 0 0 10px;
}



.spotbg,  .tourbg {
    width: 96%;
    margin: 10px auto;
    float: none;
    background: none;
  }
  
  
.spotbg{
    border: 2px solid #187fc4;
  }
  
  .area_title {
    background: #4e9dd6;
  }
  
  .area_title h2 {
    padding: 7px 0;
    color: #197ec2;
    font-weight: bold;
    text-align: center;
     text-shadow: white 2px 0px, white -2px 0px, white 0px -2px, white 0px 2px, white 2px 2px, white -2px 2px, white 2px -2px, white -2px -2px, white 1px 2px, white -1px 2px, white 1px -2px, white -1px -2px, white 2px 1px, white -2px 1px, white 2px -1px, white -2px -1px;
  }
  
  
  
  .area_syoukai p {
    font-size: 90%;
  }

    
.spot_syoukai img {
    width: 100%;
    height: auto;
    max-width: 165px;
  padding-left: 10px
  }

  .level {
    position: static;
  } 
  
  .level p {
    color: #35b8b0;
    font-size: 102%;
    padding: 5px 0 0 10px;
    text-align: left;
  }
  
  
  .tourbg h3 {
    text-align: center;
    font-size: 110%;
    font-weight: bold;
  }
  
  .tourbg h3:nth-child(3) {
    border-top: 4px solid #35b8b0;
  }
  
  .spot_syoukai {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    padding: 10px;
  }
  
  .spot_syoukai p {
    align-self: flex-start;
  }
  
  
  .hotel_img img {
    min-width: 140px;
    margin: 15px auto;
  }

  .hotel p {
    margin: auto;
    padding: 0 10px;
  }

  .tourlink {
    width: 100%;
  }
  
  
  .tourlink ul{
    padding: 30px;
}

.tourlink ul li{
	width:calc(100%/2);
}
  

  
}



@media only screen and (max-width: 400px) { 
  .spot_syoukai img {
    width: 100%;
    max-width: 120px;
  }
}