@charset "UTF-8";
/*body{
	background-color:#006200;
	pasition:relative;
	z-index:2;
}*/

/*floatクリア用*/
.clear {
	clear:both;
}

/*メインコンテンツブロック*/

#page .clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

#page .clearfix {
  min-height: 1px;
  overflow:visible;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
#panlist_cebu {
    overflow: hidden;
    background: #062;
    margin: 0 auto;
    padding: 7px;
    color: #fff;
    width: 946px;
}
#panlist_cebu li {
    float: left;
    font-size: 14px;
}
#panlist_cebu li a {
    color: #ffcc00;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: none;
}

span.bol{
	font-weight:bold;
}
.abso{
	position:absolute;
}
.rela{
	position:relative;
}
.left{
	float:left;
}
.right{
	float:right;
}
a:hover{
	opacity: 0.8;
   filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
}
/*-----------------------------------------------*/

.btn00{
	width:960px;
	margin:20px 0;	
}
.btn00 .right{
	margin-right:20px;
}
.continner{
	padding:40px 30px 0;
}
#page{
	width:960px;
	height:auto;
	margin:0 auto;
	background-color:#fff;
	position:relative;
	z-index:0;
	line-height:1.48;
}
#header_slider{
	background:url("../image/danan-hoian-kanzenguide/mainImg.jpg") no-repeat;
	height:597px;
	}
#header_slider h2{
	padding-top:20px;
}
#header_slider p.top_txt{
	color:#fff;
	width:50%;
	font-weight:bold;
	padding:0px 40px;;
}
#header_slider .top_btn{
	bottom:20px;
	right:20px;
}
#header_slider .top_img{
	bottom:0;
	left:30px;
}
#nav{
	padding:30px;
}
#nav ul li{
	float:left;
	padding-bottom:10px;
}

#nav ul li.pl{
	padding-left:15px;
}

#box01{
	background:url("../image/danan-hoian-kanzenguide/bg01_new.jpg?000") no-repeat;
	width:900px;
	height:850px;
	margin:0 auto;
}
#box01 .txt-box01,#box02 .txt-box01 {
	font-size:13px;
	width:100%;
	padding-top:10px;
}
#box01 .L-box,#box02 .L-box{
	width:45%;
}
#box01 .R-box,#box02 .R-box{
	width:55%;
}
#box01 .map{
	margin-top:-70px;
}
#box01 .txt-box02{
	font-size:12px;
	width:263px;
}
#box01 .table01{
	margin-top:20px;
}
#box01 .cont01{
	margin-top:-50px;
    width: 263px;
}
#box01 .bgb{
	background-color:#A3EDFC;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
	margin-top:20px;
	padding:10px;
}
#box01 .img02{
	top:-10px;
	right:-50px;
}
#box01 .bgb h4{
	z-index:2;
}
#box01 .bgb .table02{
	margin:10px 0;
}
#box01 .bgb p{
	font-size:11px;
}
#box02{
	background:url("../image/danan-hoian-kanzenguide/bg02.jpg") no-repeat;
	width:900px;
	height:779px;
	margin:0 auto;
}
#box02 .map{
	margin-top:-115px;
}
#box02 .btn01{
	margin-top:10px;
}
#box02 .cont01{
	width:35%;
}
#box02 .cont01 p{
	font-size:12px;
	margin-top:10px;
}
#box02 .bgo{
	background-color:#FFE0A1;
	padding:15px 10px;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
	margin-top:20px;
}
#box02 .cont02{
	width:60%;
}
#box02 .cont02 p{
	font-size:12px;
	width:300px;
	margin:10px 0;
}
#box02 .img02{
	bottom:10px;
	right:-10px;
}
#box03{
	background:url("../image/danan-hoian-kanzenguide/bg03.jpg") no-repeat;
	width:900px;
	height:2625px;
	margin:0 auto;
}
#box03 h3{
	width:481px;
}
#box03 .btn01{
	margin-top:10px;
	width:356px;
}
#box03 .cont-box{
	width:800px;
	margin:0 auto;
}
#box03 .cont{
	width:390px;
	height:480px;
	font-size:13px;
	margin-top:10px;
	float:left;
	position:relative;
}
#box03 .cont-R{
	float:right;
}
#box03 .cont p{
	margin:5px auto;
	width:360px;
}
#box03 .cont .img{
	position:absolute;
	bottom:10px;
	}

#box04{
	background:url("../image/danan-hoian-kanzenguide/bg04.jpg") no-repeat;
	width:900px;
	height:1654px;
	margin:0 auto;
}
#box04 h3{
	width:552px;
}
#box04 .btn01{
	width:276px;
}
#box04 .cont-box .cont{
	width:419px;
	height:486px;
	font-size:13px;
	margin-top:10px;
	float:left;
	position:relative;
}
#box04 .cont-box .cont .btn-box{
	width:382px;
	bottom:15px;
}
#box04 .cont-box .cont-R{
	float:right;
	margin-left:2px;
}
#box04 .cont-box .cont p{
	width:382px;
	padding-top:237px;
	margin-left:10px;
}
#box04 .cont-box .cont .btn{
	margin-top:10px;
	margin-left:10px;
}
#box04 .cont-box .cont01{
	background:url("../image/danan-hoian-kanzenguide/subbg01_new.png") no-repeat;
}
#box04 .cont-box .cont01 h4{
	position:absolute;
	left: -7650px;
}
#box04 .cont-box .cont02{
	background:url("../image/danan-hoian-kanzenguide/subbg02.png") no-repeat;
}
#box04 .cont-box .cont02 h4{
	position:absolute;
	left: -7650px;
}
#box04 .cont-box .cont03{
	background:url("../image/danan-hoian-kanzenguide/subbg03.png") no-repeat;
}
#box04 .cont-box .cont03 h4{
	position:absolute;
	left: -7650px;
}
#box04 .cont-box .cont04{
	background:url("../image/danan-hoian-kanzenguide/subbg04.png") no-repeat;
}
#box04 .cont-box .cont04 h4{
	position:absolute;
	left: -7650px;
}
#box04 .cont-box .cont05{
	background:url("../image/danan-hoian-kanzenguide/subbg05.png") no-repeat;
}
#box04 .cont-box .cont05 h4{
	position:absolute;
	left: -7650px;
}
#box04 .cont-box .cont06{
	background:url("../image/danan-hoian-kanzenguide/subbg06_new.png") no-repeat;
}
#box04 .cont-box .cont06 h4{
	position:absolute;
	left: -7650px;
}
#box05{
	background:url("../image/danan-hoian-kanzenguide/bg05.png") no-repeat;
	width:900px;
	height:1077px;
	margin:0 auto;
}
#box05 .btn01{
	margin-top:10px;
	width:382px;
}
#box05 .cont{
	width:400px;
	float:left;
	font-size:13px;
	margin-top:10px;
}
#box05 .cont-R{
	float:right;
}
#box05 .cont p{
	margin:10px 10px;
	width:380px;
}
#box06{
	background:url("../image/danan-hoian-kanzenguide/bg06.jpg") no-repeat;
	width:900px;
	height:1358px;
	margin:0 auto;
}
#box06 .btn01{
	width:382px;
	margin-top:10px;
}
#box06 .cont{
	background:url("../image/danan-hoian-kanzenguide/hotelbg.png") no-repeat;
	width:405px;
	height:392px;
	font-size:13px;
	margin-top:10px;
	float:left
}
#box06 .cont-R{
	float:right;
}
#box06 .cont .continner{
	width:372px;
	height:320px;
	margin:0 auto;
	padding:0;
	position:relative
}
#box06 .cont h4{
	text-align:center;
	font-size:18px;
	color:#FF8BE0;
	padding-top:30px;
	font-weight:bold;
}
#box06 .cont p{
	margin:10px auto;
}
#box06 .cont .abso{
	bottom:10px;
}
#box06 .cont .img-box{
	margin-bottom:10px;
}

/*base*/
@charset "UTF-8";
/* CSS Document */

/*初期設定*/
* {
	margin:0;
	padding:0;
}

body {
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	font-size:14px;
	color:#666666;
}

/*floatクリア用*/
.clear {
	clear:both;
}

/*メインコンテンツブロック*/

#page .clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

#page .clearfix {
  min-height: 1px;
  overflow:visible;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
a img{
	border:none;
	outline:none;
}
.btn a:hover{
	opacity: 0.8;
   filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
}
.right{
	float:right;
}
.left{
	float:left;
}
.rela{
	position:relative;
}
.abso{
	position:absolute;
}

/*2016/10/06追加*/

#main {
	width: 960px;
}

/*191018 リンク設置*/

a.viet_danang_btn {
	background: #349217;
	border-radius: 10px;
	padding: 15px !important;
	font-size: 22px;
	width: 80%;
	display: block;
	font-weight: bold;
	text-align: center;
	margin: 25px auto;
	color: #fff;
	text-decoration:none;
	position:relative;
	line-height: 1.3;
}
a.viet_danang_btn:after{
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #fff;
	content: "";
	vertical-align: 0px;
	display: inline-block;
	margin-left: 18px;
	position: absolute;
	top: 41%;
	right: 20px;
	}
a.viet_danang_btn:hover{
	opacity: 0.7;
	color: #FFF;
	}




/* PCレイアウト */
@media (min-width: 640px) {
/*--------------------------------------------------*
 *   PCでは無効/表示されない
 *--------------------------------------------------*/
.pc_none {
	display: none !important;
}
}

/* スマホレイアウト */
@media (max-width: 639px) {
/*--------------------------------------------------*
 *   SPでは無効/表示されない
 *--------------------------------------------------*/
.sp_none {
	display: none !important;
}
body {
	-webkit-text-size-adjust: 100%;
}
.bottom img {
	width: 100%;
}
.img_bottom img {
	width: 100%;
}
#container {
	width: 100%;
}
#top_wrapper{
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-image: none;
}
#whole{
	width: 100%;
}
#Cont{
	width: 100%;
	margin: 0px;
	overflow: visible;
	background-image: none;
	background-color: #FFF;
}
#Page{
	padding-right: 0px;
	background-image: none;
}
#Main{
	width: 100%;
	float: none;
	padding: 0px;
	font-size: 14px;
	line-height: 1.6;
}
#main{
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	padding-bottom: 0px;
	overflow: visible;
}
#main *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#main img {
	border: 0px;
	vertical-align: top;
	max-width: 100%;
	height: auto;
	width /***/:auto;
}
/************************************************************
 *   ダナン／ホイアン完全ガイドCSS
 ************************************************************/

/*ここからスマホのCSSを記入*/
#panlist{
overflow:hidden;
background:#1C761A;
color:#fff;
line-height:150%;
padding:3px 0 3px 5px;
font-size:12px;
margin:0;
}
#panlist li{
float:left;

}
#panlist li a{
color: #ffcc00;
font-size:12px;}
#panlist li a:hover{
color:#FFF;
}
#Container,
#header,
#header .navi_block,
#page,
#box01,
#box02,
#box03,
#footer,
.copyright,
.btn00 {
    width: 100%;
}

body,
#Container {
    padding: 0;
}

#header_slider .top_btn {
    padding: 0 20px;
}

#header_slider {
    height: auto;
    padding-bottom: 10px;
}

.abso {
    position: static;
}

#nav {
    padding-left: 10px;
    padding-right: 10px;
}

#nav ul li {
    padding-left: 0;
    width: 50%;
    height: calc(100vw * 0.15);
}

#nav ul li.pl {
    padding-left: 0;
}

#nav ul li:nth-child( odd ){
    padding-right: 2px;
}

#nav ul li:nth-child( even ){
    padding-left: 2px;
}

#box01 {
    background-image: url(none);
    background-color: #DEF7FC;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.continner{
    padding: 10px;
}

#box01 .map,
#box01 .cont01 {
    margin-top: 0;
    margin-bottom: 10px;
}

#box01 .L-box, #box02 .L-box,
#box01 .R-box, #box02 .R-box {
    width: 100%;
}

#box01 .map.right,
#box01 .left.cont01{
    float: none;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}
#box01 .left.cont01{
    width: auto;
}
#box01 .txt-box02 {
    margin-top: 10px;
    width: 100%;
    text-align: left;
}

#box01 div.abso.img02 {
    text-align: center;
}

#box02 .map {
    margin-top: 0;
}

#box02 {
    background-image: url(none);
    background-color: #FEF2D8;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

#box02 .cont01,
#box02 .cont02,
#box02 .cont02 p {
    width: 100%;
}

#box02 .R-box {
    margin-top: 10px;
}

#box02 .cont01 .img01 {
    margin-top: 10px;
    text-align: center;
}

#box02 .btn02,
#box02 .img02 {
    text-align: center;
}

#box03 {
    background-image: url(none);
    background-color: #E7F9D3;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

#box03 .btn01,
#box03 .cont-box {
    width: 100%;
}

#box03 .cont{
    height: auto;
}

#box03 .cont .img{
    position: static;
}

#box04 {
    background-image: url(none);
    background-color: #E6DCF7;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

#box04 h3,
#box04 .btn01 {
    width: 100%;
    text-align: center;
}

#box04 h3.left {
    margin-bottom: 10px;
}

#box04 .btn01 {
    margin-top: 10px;
}

#box03 h3,
#box03 .cont {
    width: 100%;
}
#box03 .cont {
    float: none;
}

#box03 .cont p {
    width: 100%;
}

#box04 .cont-box .cont01,
#box04 .cont-box .cont02,
#box04 .cont-box .cont03,
#box04 .cont-box .cont04,
#box04 .cont-box .cont05,
#box04 .cont-box .cont06 {
    background-size: 100%;
}

#box04 .cont-box .cont01 h4 {
    position: static;
    left: 0;
    display: none;
}

#box04 .cont-box .cont p {
    width: 100%;
    padding-top: calc(100vw * 0.49);
    margin-left: 0;
    padding-left: 10px;
    padding-right: 20px;
    font-size: 0.9em;
}

#box04 .cont-box .cont {
    width: 100%;
    height: auto;
}

#box04 .cont-box .cont .btn-box {
    width: 100%;
}

#box04 .cont-box .cont .btn {
    width: 65%;
    margin: 5px auto;
}

#box05 {
    background-image: url(none);
    background-color: #FEEAE6;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

#box05 .btn01 {
    width: 100%;
}

#box05 .cont {
    float: none;
    width: 100%;
}

#box05 .cont p {
    width: 100%;
}

#box05 .img-box .img{
    width: 49%;
}

#header_slider p.top_txt {
    width: 100%;
    padding: 5px 20px 0;
}

#header_slider .top_img {
    left: 0;
    padding: 0 20px;
}


#box06 {
    background-image: url(none);
    background-color: #F3E0F6;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

#box06 .btn01 {
    width: 100%;
}

#box06 .cont {
    width: 100%;
    height: auto;
    background-size:100% calc(100vw * 1.3);
    border-bottom: #ffb1ed 1px solid;
}

#box06 .cont .continner {
    width: 100%;
    height: auto;
}

#box06 .cont .img-box {
    width: 100%;
}

#box06 .cont .img-box .img{
    width: 49%;
}

#box06 .cont p,
#box06 .cont .abso {
    padding: 0 5px 2px;
    margin-top: 0;
    margin-bottom: 3px;
}

#box06 .cont h4 {
    padding-top: 18px;
}
	/*191018 リンク設置*/
a.viet_danang_btn {
	padding: 7px !important;
	font-size: 15px;
	margin: 15px auto;
	width: 95%;
	border-radius: 7px;
}
a.viet_danang_btn:after{
	margin-left: 8px;
	}

}