@charset "shift-jis";
html{
	font-size:62.5%;
}
#container{
	padding:0 0 40px;
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight:500;
	color:#333;
}
/*-- title --*/
#CebuCityTitle{
	background:#fff3bb;
}
#CebuCityTitle div{
	display:flex;
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items:center;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content:center;
	height:65vw;
	max-height:360px;
	background:url(../img/cebucity/title003.jpg) no-repeat center center #ddd9d5;
	background-size:cover;
}
#CebuCityTitle div .title{
	position:relative;
	width:87vw;
	max-width:360px;
    padding-top: 15vw;
}
#CebuCityTitle div .title::after{
	position:absolute;
	top: 4vw;
    left: 1%;
	content:"";
	display:block;
	width:66vw;
	max-width:248px;
	height:calc(66vw * 0.2468);
	max-height:61.2px;
	background:url(../img/cebucity/title002.png) no-repeat 0 0;
	background-size:cover;
}
#CebuCityTitle div .title img{
	width:100%;
}
#CebuCityTitle p{
    padding: 3vw;
    font-size: 3.8vw;
	line-height:1.6;
	color:#543;
}
/*-- CebuCityIndex  --*/
#CebuCityIndex{
	position:relative;
	margin:10vw 4vw 0;
	padding:0 0 4vw;
}
#CebuCityIndex > p{
	position:absolute;
	top:-14px;
	width:100%;
	text-align:center;
}	
#CebuCityIndex > p label{
	position:relative;
	display:inline-block;
	padding:0 30px;
	width:auto;
	background:#fff;
	cursor:pointer;
}
#CebuCityIndex > p label span{
	display:table-cell;
	vertical-align:middle;
	font-size:2.4rem;
	font-weight:bold;
	line-height:1.2;
	color:#fa0;
}
#CebuCityIndex p label span::after{
	display:inline-block;
	border-radius:6px;
	margin:2px 0 0 6px;
	padding:0 6px;
	content:"\975e\8868\793a";
	background:#fc3;
	vertical-align:top;
	font-size:1.4rem;
	font-weight:bold;
	line-height:22px;
	color:#fff;
}
#CebuCityIndex > p label::before,
#CebuCityIndex > p label::after{
	position:absolute;
	top:-8px;
	left:10px;
	content:"";
	width:13px;
	height:17.5px;
	background:url(../img/cebucity/cebucity001.png) no-repeat 0 0;
	background-size:cover;
}
#CebuCityIndex > p label::after{
	top:auto;
	left:auto;
	bottom:-8px;
	right:10px;
	transform:rotate(180deg);
}
#CebuCityIndex input{
	display:none;
}
#CebuCityIndex div{
	border:2px solid #fc3;
	padding:10px;
	height:auto;
	overflow:hidden;
}
#CebuCityIndex input:checked + div{
	border:2px solid #fc3;
	padding:1px 0;
	height:0;
	overflow:hidden;
}
#CebuCityIndex input:checked + div p label::after{
	content:"\8868\793a";
}
#CebuCityIndex div ul{
	border:none;
	margin:11px 0 0;
	list-style:none;
}
#CebuCityIndex div ul li{
	padding:4px 0 4px 22px;
	background:url(../img/cebucity/cebucity002.png) no-repeat 0 6px;
	background-size:16px auto;
}
#CebuCityIndex div ul li span{
	display:inline-block;
	width:2.4rem;
	text-align:left;
}
#CebuCityIndex div ul li a{
	font-size:1.4rem;
	font-weight:bold;
	line-height:1.5;
	color:#543;
}
/*-- CebuCityBody --*/
#CebuCityBody .CebuCitySection h2{
	display:flex;
	margin:12vw 0 4vw;
	padding:0 4vw 10px;
	background:url(../img/cebucity/cebucity003.png) repeat-x 100% bottom;
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size:1.8rem;
	font-weight:bold;
	line-height:1.4;
	color:#f90;
}
#CebuCityBody .CebuCitySection h2 span:first-child{
	display:inline-block;
	margin:0 6px 0 0;
	border-radius:6px;
	padding:0;
	width:26px;
	height:26px;
	background:#fa0;
	background-size:auto 36px;
	text-align:center;
	font-size:1.6rem;
	font-weight:bold;
	line-height:25px;
	color:#fff;
}
#CebuCityBody .CebuCitySection h2 span + span{
	width:calc(100% - 32px);
}
#CebuCityBody .CebuCitySection h2 span br{
	display:none;
}
#CebuCityBody .CebuCitySection p.BodyText{
	margin:3vw 4vw 0;
	font-size:1.4rem;
	line-height:1.6;
}
#CebuCityBody .CebuCitySection dl.Point{
	border:2px dotted #fc6;
	margin:3vw 4vw 0;
	padding:8px 10px;
	background:#ffe;
	text-align:center;
	font-size:1.4rem;
	line-height:1.4;
}
#CebuCityBody .CebuCitySection dl.Point dt{
	position:relative;
	display:inline-block;
	padding:2px 0 8px;
	vertical-align:niddle;
	text-align:center;
	font-size:2rem;
	font-weight:bold;
	line-height:1.4;
	color:#f90;
}
#CebuCityBody .CebuCitySection dl.Point dd{
	padding:0;
	text-align:left;
	font-size:1.4rem;
	line-height:1.4;
}
#CebuCityBody .CebuCitySection dl.Point dt::before,
#CebuCityBody .CebuCitySection dl.Point dt::after{
	position:absolute;
	top:0px;
	left:-30px;
	content:"";
	display:inline-block;
	width:23.8px;
	height:26px;
	background:url(../img/cebucity/cebucity004.png) no-repeat 0 0;
	background-size:cover;
}
#CebuCityBody .CebuCitySection dl.Point dt::after{
	left:auto;
	right:-30px;
	transform:scale(-1, 1);
}
/* Recommended */
#CebuCityBody .Recommended{
	background:#f7f5e9;
}
#CebuCityBody .Recommended::before,
#CebuCityBody .Recommended::after{
	content:"";
	display:block;
	width:100%;
	height:21px;
	background:url(../img/cebucity/cebucity005.png) repeat-x 100% top;
	background-size:auto 6px;
}
#CebuCityBody .Recommended::after{
	transform:scale(1, -1);
}
#CebuCityBody .Recommended .Optional{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	margin:0 4vw;
	border-radius:8px;
	background:#fff;
	box-shadow:4px 4px 0 0 #f77;
	overflow:hidden;
}
#CebuCityBody .Recommended .Optional + .Optional{
	margin:14px 4vw 0;
}
#CebuCityBody .Recommended .Optional h3{
	padding:10px 10px 0;
}
#CebuCityBody .Recommended .Optional h3 a{
	text-decoration:none;
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size:1.8rem;
	font-weight:bold;
	line-height:1.2;
	color:#f66;
}
#CebuCityBody .Recommended .Optional h3 a::after{
	content:"\0bb";
	margin:0 0 0 6px;
}
#CebuCityBody .Recommended .Optional div p{
	padding:6px 10px 10px;
	font-size:1.4rem;
	line-height:1.4;
}
/*- ShoppingMall -*/
#CebuCityBody .ShoppingMall h3{
	padding:2rem 4vw .6rem;
	text-align:center;
}
#CebuCityBody .ShoppingMall h3 span{
	position:relative;
	display:inline-block;
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size:1.6rem;
	font-weight:bold;
	line-height:1.2;
	color:#0ac;
}
#CebuCityBody .ShoppingMall h3 span::before,
#CebuCityBody .ShoppingMall h3 span::after{
	position:absolute;
	bottom:4px;
	left:-30px;
	content:"";
	display:inline-block;
	width:23.8px;
	height:26px;
	background:url(../img/cebucity/cebucity006.png) no-repeat 0 0;
	background-size:cover;
}
#CebuCityBody .ShoppingMall h3 span::after{
	left:auto;
	right:-30px;
	transform:scale(-1, 1);
}
#CebuCityBody .ShoppingMall .Verification{
	padding:2rem 4vw 1rem;
}
#CebuCityBody .ShoppingMall .Verification a{
	display:block;
	border-radius:.5rem;
	border:2px solid #3cf;
	box-shadow:2px 2px 0 0 #3cf;
	text-align:center;
	text-decoration:none;
	font-size:1.6rem;
	font-weight:bold;
	line-height:2;
	color:#3cf;
}
#CebuCityBody .ShoppingMall .Verification a:hover{
	background:#3cf;
	transform: translate(2px, 2px);
	box-shadow:none;
	color:#fff;
}
/*- Conclude -*/
#Conclude{
	margin:12vw auto 0;
	padding:8.2% 0 0;
	box-sizing:content-box;
	width:92vw;
	max-width:400px;
	background:url(../img/cebucity/cebucity007.png) no-repeat center 0;
	background-size:cover;
}
#Conclude > div{
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	padding:0 25px 7%;
	width:92vw;
	max-width:400px;
	background:url(../img/cebucity/cebucity007.png) no-repeat 0 bottom;
	background-size:cover;
}
#Conclude div h2{
	margin:-20px 0 0;
	width:100%;
	text-align:center;
}
#Conclude div h2 span{
	position:relative;
	display:inline-block;
	font-size:2.4rem;
	font-weight:bold;
	line-height:1.4;
	color:#f90;
}
#Conclude div h2 span::before,
#Conclude div h2 span::after{
	position:absolute;
	top:0;
	left:-40px;
	content:"";
	display:block;
	width:28px;
	height:25px;
	background:url(../img/cebucity/cebucity008.png) no-repeat 0 0;
	background-size:cover;
}
#Conclude div h2 span::after{
	left:auto;
	right:-40px;
	transform:scale(-1, 1);
}
#Conclude div p{
	padding:1rem 0 0;
	font-size:1.4rem;
	line-height:1.4;
}

/*ホテル評価*/
#CebuCityBody .data-box {
    display: flex;
    font-size: 14px;
    position: absolute;
  z-index: 1;
  left: 356px;
  top: 24px;
}
#CebuCityBody .data-box .iconbox p.rank {
    width: auto;
    color: #fff;
    border-radius: 12px;
    padding: 0 10px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
}
#CebuCityBody .data-box .iconbox p.rank.high {
    background: #a48700;
}
#CebuCityBody .data-box .iconbox p.rank.low {
    background: #213264;
}
#CebuCityBody .data-box p.kuchikomi .evaluation {
    font-weight: bold;
    padding-left: 4px;
}
#CebuCityBody .data-box p.kuchikomi {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
#CebuCityBody .data-box p.kuchikomi .evaluation.ore {
    color: #ff4e00;
}
#CebuCityBody .data-box p.kuchikomi .evaluation.yellow {
    color: #ff9900;
}
#CebuCityBody .data-box p.kuchikomi .evaluation .comment {
    padding-left: 0;
}
#CebuCityBody .data-box p.kuchikomi .number {
    font-weight: normal;
    color: #000;
    padding: 0;
    margin: 0;
}
#CebuCityBody .data-box p.kuchikomi .number a {
    text-decoration: underline;
    display: inline;
}
#CebuCityBody .data-box p.kuchikomi .star {
    display: flex;
}
#CebuCityBody .box-left .data-box, #CebuCityBody .box-right .data-box {
    width: 100%;
}
#CebuCityBody .hotel-box{
position: relative;
    width: 1100px;
    margin: 0 auto 30px;
}




@media (max-width: 639px) {
#panlist_cebu ol li {
    line-height: 22px;
}
    .SectionPhoto,.SectionPhoto img{
        width: 100%;
    }
    
/*ホテル評価スマホ*/
#CebuCityBody .data-box .iconbox p.rank{
padding: 0 2px;
}
#CebuCityBody .data-box{
font-size: 3vw;
top: 69vw;
  left: 6vw;
}
#CebuCityBody .data-box p.kuchikomi{
margin-left: 5px;
}
#CebuCityBody .data-box p.kuchikomi .star img{
width: 15px;
}
#CebuCityBody .Recommended .hotel-box .Optional h3{
padding-top: 40px;
}
#CebuCityBody .hotel-box{
width: auto;
}
    
    
    
    }
@media only screen and (min-width:640px){
	/*-- title --*/
	#CebuCityTitle div{
		height:540px;
		min-width:1100px;
		max-height:540px;
		background-size:1700px 540px;
	}
    
	#CebuCityTitle div .title{
		width:686px;
		max-width:686px;
        padding-top: 28px;
	}
	#CebuCityTitle div .title::after{
		position:absolute;
		top: -12px;
        left: -114px;
		content:"";
		display:block;
		width:393px;
		max-width:393px;
		height:97px;
		max-height:97px;
		background-size:cover;
	}
	#CebuCityTitle p{
		margin:0 auto;
		padding:50px 10px;
		width:1100px;
		font-size:1.8rem;
		line-height:1.6;
	}
	/*-- CebuCityIndex  --*/
	#CebuCityIndex{
		position:relative;
		margin:106px auto 0;
		padding:0;
		width:1100px;
	}
	#CebuCityIndex > p{
		top:-20px;
		width:100%;
		text-align:center;
	}
	#CebuCityIndex > p label {
		padding:0 70px;
	}
	#CebuCityIndex > p label span{
		font-size:3.8rem;
		line-height:1.2;
	}
	#CebuCityIndex p label span::after{
		display:inline-block;
		border-radius:6px;
		margin:12px 0 0 8px;
		font-size:1.6rem;
		line-height:22px;
	}
	#CebuCityIndex > p label::before,
	#CebuCityIndex > p label::after{
		top:-20px;
		left:34px;
		content:"";
		width:26px;
		height:35px;
	}
	#CebuCityIndex > p label::after{
		top:auto;
		left:auto;
		bottom:-12px;
		right:34px;
	}
	#CebuCityIndex div{
		border:3px solid #fc3;
		padding:48px 52px 34px;
	}
	#CebuCityIndex div ul{
		margin:0;
	}
	#CebuCityIndex div ul li{
		padding:6px 0 6px 30px;
		background-size:22px 26px;
	}
	#CebuCityIndex div ul li span{
		display:inline-block;
		width:2.4rem;
		text-align:left;
	}
	#CebuCityIndex div ul li a{
		font-size:1.6rem;
		line-height:1.5;
	}
	/*-- CebuCityBody --*/
	#CebuCityBody .CebuCitySection h2{
		justify-content:center;
		margin:120px 0 10px;
		padding:0 10px 18px;
		min-width:1100px;
		font-size:3.6rem;
		font-weight:normal;
		line-height:1.4;
	}
	#CebuCityBody .CebuCitySection h2 span:first-child{
		margin:0 10px 0 0;
		border-radius:8px;
		width:48px;
		height:48px;
		font-size:3rem;
		font-weight:normal;
		line-height:48px;
	}
	#CebuCityBody .CebuCitySection h2 span + span{
		width:calc(1100px - 58px);
	}
	#CebuCityBody .CebuCitySection h2 span br{
		display:inline;
	}
	#CebuCityBody .CebuCitySection p.BodyText{
		margin:30px auto 0;
		padding:0 10px;
		width:1100px;
		font-size:1.8rem;
		line-height:1.5;
	}
	#CebuCityBody .CebuCitySection dl.Point{
		border:2px dotted #fc6;
		margin:30px auto 0;
		padding:14px 40px 36px;
		width:1016px;
		font-size:1.8rem;
		line-height:1.6;
	}
	#CebuCityBody .CebuCitySection dl.Point dt{
		padding:0 0 10px;
		font-size:3rem;
		line-height:1.4;
		color:#f90;
	}
	#CebuCityBody .CebuCitySection dl.Point dd{
		font-size:1.8rem;
		line-height:1.6;
	}
	#CebuCityBody .CebuCitySection dl.Point dt::before,
	#CebuCityBody .CebuCitySection dl.Point dt::after{
		position:absolute;
		top:4px;
		left:-40px;
		width:33px;
		height:35px;
		background:url(../img/cebucity/cebucity004.png) no-repeat 0 0;
		background-size:cover;
	}
	#CebuCityBody .CebuCitySection dl.Point dt::after{
		left:auto;
		right:-40px;
	}
	#CebuCityBody .CebuCitySection .SectionPhoto{
		margin:30px auto 0;
		width:1100px;		
	}
	/* Recommended */
	#CebuCityBody .Recommended{
		margin:20px 0 0;
		padding:0 10px;
	}
	#CebuCityBody .Recommended::before,
	#CebuCityBody .Recommended::after{
		height:57px;
		background:url(../img/cebucity/cebucity005.png) repeat-x 100% top;
		background-size:auto 17px;
	}
	#CebuCityBody .Recommended .Optional{
		flex-wrap:nowrap;
		align-items:center;
		border-radius:8px;
		margin:0 auto;
		width:1100px;
		box-shadow:8px 8px 0 0 #f77;
		overflow:hidden;
	}
	#CebuCityBody .Recommended .Optional + .Optional{
		margin:28px auto 0;
	}
	#CebuCityBody .Recommended .Optional > p{
		margin:0;
		width:320px;
	}
	#CebuCityBody .Recommended .Optional div{
		padding:0 40px;
		width:780px;
	}
	#CebuCityBody .Recommended .Optional h3{
		padding:0;
	}
	#CebuCityBody .Recommended .Optional h3 a{
		font-size:2.8rem;
		font-weight:normal;
		line-height:1.4;
	}
	#CebuCityBody .Recommended .Optional h3 a:hover{
		text-decoration:underline;
	}
	#CebuCityBody .Recommended .Optional div p{
		padding:12px 0 0;
		font-size:1.8rem;
		line-height:1.4;
	}
	/*- ShoppingMall -*/
	#CebuCityBody .ShoppingMall h3{
		padding:60px 0 0;
		text-align:center;
	}
	#CebuCityBody .ShoppingMall h3 span{
		position:relative;
		font-size:2.8rem;
		font-weight:normal;
		line-height:1.4;
	}
	#CebuCityBody .ShoppingMall h3 span::before,
	#CebuCityBody .ShoppingMall h3 span::after{
		bottom:8px;
		left:-42px;
		width:28px;
		height:31px;
	}
	#CebuCityBody .ShoppingMall h3 span::after{
		left:auto;
		right:-42px;
		transform:scale(-1, 1);
	}
	#CebuCityBody .ShoppingMall h3 span br{
		display:none;
	}
	#CebuCityBody .ShoppingMall h3 + .SectionPhoto{
		margin:18px auto 0;
	}

	#CebuCityBody .ShoppingMall .Verification{
		margin:0 auto;
		padding:40px 10px 10px;
		width:1100px;
	}
	#CebuCityBody .ShoppingMall .Verification a{
		border-radius:8px;
		border:4px solid #3cf;
		box-shadow:8px 8px 0 0 #3cf;
		font-size:2.8rem;
		line-height:66px;
	}
	#CebuCityBody .ShoppingMall .Verification a:hover{
		transform: translate(8px, 8px);
	}
	/*- Conclude -*/
	#Conclude{
		position:relative;
		margin:120px auto 0;
		padding:0;
		width:1100px;
		max-width:1100px;
		height:400px;
		background:none;
	}
	#Conclude::before{
		position:absolute;
		top:-350px;
		left:350px;
		content:"";
		display:block;
		width:400px;
		height:1100px;
		background:url(../img/cebucity/cebucity007.png) no-repeat 0 bottom;
		transform:rotate(90deg);
	}
	#Conclude > div{
		position:absolute;
		padding:0;
		width:1100px;
		max-width:1100px;
		height:400px;
		background:none;
		z-index:10;
	}
	#Conclude div h2{
		margin:0;
	}
	#Conclude div h2 span{
		font-size:4rem;
		font-weight:normal;
		line-height:1.4;
	}
	#Conclude div h2 span::before,
	#Conclude div h2 span::after{
		position:absolute;
		left:-70px;
		width:56px;
		height:50px;
	}
	#Conclude div h2 span::after{
		left:auto;
		right:-70px;
	}
	#Conclude div p{
		padding:36px 67px 0;
		font-size:1.8rem;
		line-height:1.6;
	}

}
@media all and (-ms-high-contrast: none) {
        #CebuCityTitle div{
            display: block;
        }
        #CebuCityTitle div .title{
            padding-top:85px;
        }
        #CebuCityTitle div .title::after{
            top:36px;
        }
    }