@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

#ori-sp-wrapper a:hover{
filter:alpha(opacity=90);
-moz-opacity: .9;
opacity: .9;
}
.ori-sp-container{
width:100%;
margin-bottom:70px;
margin-left:auto;
margin-right:auto;
text-align:center;
/*overflow:hidden;*/
zoom:1;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/*font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;*/
/*font-weight:500;*/
color:#160703;
}
.f-min{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.ori-sp-container br.brake{
display:block;
}
.ori-sp-container br.sp-brake{
display:none;
}
.ori-sp-container .flex{
display: -webkit-flex;
display: flex;
justify-content: space-between;
clear:both;
}
.ori-sp-container .key-color-ptn1{
color:#d21d5c;
}
.ori-sp-container .key-color-ptn2{
color:#2a3e61;
}
.ori-sp-container .key-color-ptn3{
color:#ff5400;
}
.ori-sp-container .key-color-ptn4{
color:#fff;
}
.ori-sp-container .container-1010{
width:1010px;
margin:0 auto;
text-align:center;
}
.ori-sp-container .al-center{
width:100%;
margin:0 auto;
text-align:center;
}
.ori-sp-container .al-left{
text-align:left;
}
.ori-sp-container .al-right{
text-align:right;
}
.ori-sp-container .disp-pc{
display:block;
}
.ori-sp-container .disp-sp{
display:none;
}
.ori-sp-container .float-left-ptn1{
width:50%;
float:left;
}
.ori-sp-container .float-right-ptn1{
width:50%;
float:right;
text-align:right;
}
.ori-sp-container .color-white{
color:white;
}
.ori-sp-container .color-green{
color:#458565;
}
.ori-sp-container .color-red{
color:#b60014;
}
.ori-sp-container .color-pink{
color:#e02c2e;
}
.ori-sp-container .color-red2{
color:#fd0505;
}
.ori-sp-container .font-12{
font-size:12px;
}
.ori-sp-container .font-14{
font-size:14px;
}
.ori-sp-container .font-15{
font-size:15px;
}
.ori-sp-container .font-16{
font-size:16px;
}
.ori-sp-container .font-18{
font-size:18px;
}
.ori-sp-container .font-20{
font-size:20px;
}
.ori-sp-container .font-22{
font-size:22px;
}
.ori-sp-container .font-24{
font-size:24px;
}
.ori-sp-container .font-26{
font-size:26px;
}
.ori-sp-container .font-28{
font-size:28px;
}
.ori-sp-container .font-36{
font-size:36px;
}
.ori-sp-container .font-bold{
font-weight:bold;
}
.clear-area{
clear:both;
}


.bg-1{
background-color:#c7f1fd;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.bg-stripe-1{
background-repeat:repeat-x;
background-position:center top;
background-image:url(/travel/grand_mercure/images/bg_stripe.png);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.bg-2{
background-color:#c7f1fd;
border-radius:50px;
}
.bg-stripe-2{
background-repeat:repeat-x;
background-position:center top;
background-image:url(/travel/grand_mercure/images/bg_stripe.png);
border-radius:50px;
}
@media screen and (min-width: 248px) and (max-width: 768px){
.bg-1{
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.bg-stripe-1{
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.bg-2{
border-radius:30px;
}
.bg-stripe-2{
border-radius:30px;
}
}

.main-wrap{
width:100%;
margin:0 auto;
text-align:center;
height:834px;
}
.main-wrap img{
max-width:100%;
height:auto;
}
.main-sp{
display:none;
}
.bg-main-line{
background-repeat:no-repeat;
background-position:center top;
background-image:url(/travel/grand_mercure/images/bg_main_line.png);
height:834px;
}
.bg-main-left{
background-repeat:no-repeat;
background-position:left top;
background-image:url(/travel/grand_mercure/images/bg_main_ill_left.png);
height:657px;
}
.bg-main-right{
background-repeat:no-repeat;
background-position:right top;
background-image:url(/travel/grand_mercure/images/bg_main_ill_right.png);
height:699px;
}
.main-inner{
position:relative;
width:100%;
margin:0 auto;
text-align:center;
}
.main-name{
position:absolute;
width:100%;
margin:0 auto;
text-align:center;
top:0;
left:auto;
z-index:0;
}
.main-name-inner{
width:991px;
margin:0 auto;
text-align:center;
}
.main-lady{
position:absolute;
width:100%;
margin:0 auto;
text-align:center;
top:125px;
left:auto;
z-index:5;
}
.main-lady-inner{
width:1091px;
margin:0 auto;
text-align:center;
}
.main-title{
position:absolute;
top:85px;
left:0px;
width:100%;
margin:0 auto;
text-align:center;
z-index:10;
}
.main-title>h2{
width:100%;
margin:0 auto;
text-align:center;
}
.main-balloon{
position:absolute;
top:512px;
left:0px;
width:100%;
margin:0 auto;
text-align:center;
z-index:15;
}
.main-balloon>p{
width:100%;
margin:0 auto;
text-align:center;
}
@media screen and (min-width: 769px) and (max-width: 1100px){
.main-lady-inner{
width:1024px;
}
}
@media screen and (min-width: 248px) and (max-width: 768px){
.main-wrap{
width:100%;
margin:0 auto;
text-align:center;
height:auto;
}
.main-wrap img{
width:100%;
height:auto;
}
.main-sp{
display:block;
width:100%;
margin:0 auto;
text-align:center;
}
.bg-main-line{
background-image:none;
height:auto;
}
.bg-main-left{
background-image:none;
height:auto;
}
.bg-main-right{
background-image:none;
height:auto;
}
.main-inner{
display:none;
}
}


.summary-wrap{
width:100%;
margin-top:-3px;
margin-left:auto;
margin-right:auto;
text-align:center;
background: rgba(85,177,241,0.6);
border-radius:50px;
}
.summary-wrap img{
max-width:100%;
height:auto;
}
.summary-container{
padding-top:100px;
padding-bottom:130px;
}
.bg-summary-left{
background-repeat:no-repeat;
background-position:top left;
background-image:url(/travel/grand_mercure/images/bg_summary_left.png);
}
.bg-summary-right{
background-repeat:no-repeat;
background-position:top right;
background-image:url(/travel/grand_mercure/images/bg_summary_right.png);
}
.summary-inner{
width:800px;
margin:0 auto;
text-align:center;
}
.summary-img-head,
.summary-img-foota{
display:none;
}
.summary-box{
height:711px;
vertical-align:middle;
display:table-cell;
}
.summary-en{
margin-bottom:70px;
}
.summary-en>h3{
line-height:100%;
color:#fff;
letter-spacing: .5rem;
	font-size:80px;
	position:relative;
}
.summary-en>h3::before{
content: "/";
width: 20px;
height: 60px;
display: block;
position: absolute;
top: 77px;
left: 140px;
color:#fff;
font-size:60px;
}
.summary-en>h3 span{
display:none;
}
.summary-text{
text-align:center;
}
.summary-text>h4{
margin-bottom:35px;
color:#fff;
line-height:160%;
font-size:30px;
letter-spacing: .2rem;
}
.summary-text>h5{
margin-bottom:30px;
color:#fff;
line-height:170%;
font-size:20px;
letter-spacing: .2rem;
}
.summary-text>p{
color:#fff;
line-height:180%;
font-size:16px;
letter-spacing: .2rem;
margin-bottom:35px;
}
.summary-text>p br.summary-br{
display:none;
}
.summary-logo{
margin-bottom:0px;
}
@media screen and (max-width: 1300px){
.summary-text>p br.summary-br{
display:block;
}
}
@media screen and (min-width: 769px) and (max-width: 1100px){
.summary-wrap{
margin-top:-46px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.bg-summary-left{
background-position:left -130px top;
}
.bg-summary-right{
background-position:right -130px top;
}
}
@media screen and (min-width: 248px) and (max-width: 768px){
.summary-wrap{
margin-top:0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.summary-container{
padding-top:50px;
padding-bottom:50px;
}
.summary-inner{
width:94%;
}
.bg-summary-left{
background-image:none;
}
.bg-summary-right{
background-image:none;
}
.summary-img-head,
.summary-img-foota{
display:block;
width:100%;
margin:0 auto;
text-align:center;
}
.summary-img-head{
padding-bottom:20px;
}
.summary-img-foota{
padding-top:20px;
}
.summary-box{
height:auto;
display:block;
}
.summary-en{
margin-bottom:20px;
}
.summary-en>h3{;
font-size:34px;
letter-spacing: 0rem;
}
.summary-en>h3::before{
display:none;
}
.summary-en>h3 span{
display:inline;
}
.summary-text>h4{
margin-bottom:20px;
line-height:140%;
font-size:20px;
letter-spacing: 0rem;
}
.summary-text>h5{
margin-bottom:20px;
line-height:140%;
font-size:16px;
letter-spacing: 0rem;
}
.summary-text>p{
line-height:150%;
font-size:14px;
letter-spacing: 0rem;
margin-bottom:20px;
}
}


.nv-wrap{
width:790px;
margin:0 auto;
text-align:center;
position:relative;
}
.nv-wrap img{
max-width:100%;
height:auto;
}
.nv-title{
position:absolute;
top:-100px;
left:0px;
width:100%;
margin:0 auto;
text-align:center;
z-index:5;
}
.nv-container{
position:absolute;
top:-60px;
left:0px;
width:100%;
margin:0 auto;
text-align:center;
z-index:8;
}
.nv-title>p{
width:172px;
margin:0 auto;
text-align:center;
height:70px;
background-color:#2788cc;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
.nv-title>p span{
display:block;
text-align:center;
color:#fff;
padding-top:15px;
line-height:100%;
font-size:20px;
font-weight:bold;
}
.nv-box{
border:5px solid #2788cc;
background-color:#fff;
border-radius:100px;
box-sizing:border-box;
}
.nv-box-inner{
width:100%;
margin:0 auto;
text-align:center;
padding:25px 0px;
}
.nv-box-inner ul{
width: 100%;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.nv-box-inner ul li{
width: 260px;
border-right:1px solid #2788cc;
box-sizing:border-box;
}
.nv-box-inner ul li:last-child{
border-right:none;
}
.nv-box-inner ul li a{
display:block;
text-decoration:none;
width: 100%;
margin:0 auto;
text-align:center;
padding:7px 0px;
}
.nv-box-inner ul li a>p{
line-height:100%;
font-weight:bold;
color:#2788cc;
font-size:17px;
text-align:center;
}
@media screen and (min-width: 248px) and (max-width: 768px){
.nv-wrap{
display:none;
}
}



.bg-container-left{
background-repeat:no-repeat;
background-position:top 250px left;
background-image:url(/travel/grand_mercure/images/bg_contents_left.png);
}
.bg-container-right{
background-repeat:no-repeat;
background-position:top 250px right;
background-image:url(/travel/grand_mercure/images/bg_contents_right.png);
}
@media screen and (min-width: 248px) and (max-width: 768px){
.bg-container-left{
background-image:none;
}
.bg-container-right{
background-image:none;
}
}


.about-wrap{
width:1050px;
padding-top:170px;
padding-bottom:80px;
margin:0 auto;
text-align:center;
}
.about-wrap img{
max-width:100%;
height:auto;
}
.about-title{
width:100%;
margin-bottom:100px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.about-container>ul{
width: 100%;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.about-container>ul li{
width: 500px;
margin-bottom:70px;
position:relative;
background-color:#fff;
border-bottom:10px solid #8dcefb;
border-radius:40px;
padding-bottom:20px;
}
.about-balloon{
position:absolute;
top:-40px;
left:auto;
width:100%;
margin:0 auto;
text-align:center;
z-index:8;
}
.about-balloon-box{
width:294px;
margin:0 auto;
text-align:center;
}
.about-balloon-box .balloon{
background: rgba(47,154,222,0.9);
border-radius:100px;
height:auto;
width:100%;
position: relative;
}
.about-balloon-box .balloon::before{
content: "";
width: 30px;
height: 15px;
display: block;
position: absolute;
bottom: -25px;
left: 50%;
margin: auto;
background: rgba(47,154,222,0.9);
transform: rotate(-135deg);
transform-origin:left top;
transform-origin:0 0;
}
.about-balloon-box .balloon>p{
display: flex;
justify-content: center;
align-items: center;
width:294px;
height:85px;
}
.about-balloon-box .balloon>p span{
display:block;
font-size:17px;
color:#fff;
font-weight:bold;
text-align:center;
}
.about-free{
position:absolute;
top:-40px;
right:0px;
z-index:8;
}
.about-box{
/*background-color:#fff;
border-bottom:10px solid #8dcefb;
border-radius:40px;*/
}
.about-slide-box{
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
}
.about-slide-img{
width:100%;
margin:0 auto;
text-align:center;
}
.about-slide-img img{
border-radius:36px;
}
.about-slide-text{
text-align:left;
padding-top:30px;
padding-left:25px;
padding-right:25px;
}
.about-slide-text-box{
/*height:130px;*/
}
.about-slide-text-box>h4{
line-height:100%;
color:#ff7a93;
margin-bottom:16px;
font-size:18px;
}
.about-slide-text-box>p{
line-height:150%;
margin-bottom:15px;
font-size:16px;
text-align: justify;
text-justify: inter-ideograph;
}
.about-slide-text-box>span{
display:block;
line-height:120%;
font-size:13px;
}
@media screen and (min-width: 169px) and (max-width: 1050px){
.about-wrap{
width:1010px;
}
.about-container>ul li{
width: 490px;
}
}
@media screen and (min-width: 248px) and (max-width: 768px){
.about-wrap{
width:94%;
padding-top:100px;
padding-bottom:10px;
}
.about-title{
margin-bottom:80px;
}
.about-container>ul{
display:block;
}
.about-container>ul li{
width:100%;
border-radius:20px;
margin-bottom:70px;
}
.about-balloon-box .balloon>p span{
font-size:14px;
}
.about-free img{
width:80px;
height:auto;
}
.about-slide-box{
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.about-slide-img img{
border-radius:16px;
}
.about-slide-text{
padding-top:20px;
padding-left:15px;
padding-right:15px;
}
.about-slide-text-box>h4{
margin-bottom:15px;
font-size:16px;
}
.about-slide-text-box>p{
margin-bottom:10px;
font-size:14px;
}
.about-slide-text-box>span{
font-size:12px;
}
}



.summer-wrap{
width:100%;
margin:0 auto;
text-align:center;
padding-top:150px;
}
.summer-wrap img{
max-width:100%;
height:auto;
}
.summer-title{
margin-bottom:80px;
width:730px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.summer-title>p{
margin-bottom:10px;
}
.summer-title>h3{
color:#2f9ade;
line-height:100%;
font-size:40px;
letter-spacing: .15rem;
position:relative;
}
.summer-title>h3:before,
.summer-title>h3:after{
content: "";
width: 29px;
height: 40px;
display: block;
position: absolute;
top: 0px;
background-repeat:no-repeat;
background-position:center center;
}
.summer-title>h3:before{
left:0%;
background-image:url(/travel/grand_mercure/images/title_before_rank.png);
}
.summer-title>h3:after{
right:0%;
background-image:url(/travel/grand_mercure/images/title_after_rank.png);
}
.summer-box{
margin:0 auto;
text-align:center;
width:100%;
}
.summer-img-main{
margin:0 4%;
background-repeat:no-repeat;
background-position:center center;
border-radius:30px;
background-size:cover;
height:600px;
background-image:url(/travel/grand_mercure/images/img_summer_L.jpg);
}
.summer-img-main-inner{
width: 100%;
margin:0 auto;
text-align:center;
}
.summer-img-main-inner>h4{
display: flex;
justify-content: center;
align-items: center;
height:600px;
font-size:60px;
line-height:100%;
color:#fff;
letter-spacing: .15rem;
text-shadow: 0px 0px 15px rgba(47, 154, 222, 1);
}
.summer-summary{
margin:0 auto;
text-align:center;
width:1010px;
height:350px;
position:relative;
}
.summer-sub-img{
position:absolute;
z-index:5;
top:-90px;
left:0;
}
.summer-sub-img img{
border-radius:50px;
}
.summer-baloon-img{
position:absolute;
z-index:8;
top:-30px;
left:320px;
}
.summer-text{
position:absolute;
z-index:10;
top:60px;
width:490px;
right:0px;
}
.summer-text-inner{
text-align:left;
}
.summer-text-inner>h5{
font-size:28px;
line-height:100%;
margin-bottom:30px;
color:#2f9ade;
letter-spacing: .15rem;
}
.summer-text-inner>p{
font-size:18px;
line-height:170%;
font-weight:bold;
}
.summer-buttun{
width:220px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.summer-buttun>a{
display:block;
text-decoration:none;
border-radius:50px;
background-color:#f76149;
width:100%;
margin:0 auto;
text-align:center;
transition: 0.5s ease;
}
.summer-buttun>a:hover{
background-color:#f64d31;
transition: 0.5s ease;
}
.summer-buttun>a p{
line-height:100%;
color:#fff;
font-size:14px;
text-align:center;
padding:20px 10px;
position:relative;
}
.summer-buttun>a p::before{
content: "";
width: 22px;
height: 22px;
display: block;
position: absolute;
top: 30%;
right: 20px;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
background-image:url(/travel/grand_mercure/images/icon_roope.png);
}

@media screen and (min-width: 169px) and (max-width: 1050px){

}
@media screen and (min-width: 248px) and (max-width: 768px){
.summer-wrap{
padding-top:70px;
}
.summer-title{
margin-bottom:40px;
width:94%;
}
.summer-title>h3{
font-size:26px;
line-height:130%;
}

.summer-img-main{
margin:0 4%;
border-radius:30px;
height:400px;
}
.summer-img-main-inner>h4{
line-height:140%;
height:400px;
font-size:30px;
}
.summer-summary{
padding-top:15px;
width:94%;
height:auto;
}
.summer-sub-img{
position:static;
width:100%;
margin-bottom:15px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.summer-sub-img img{
border-radius:30px;
}
.summer-baloon-img{
position:static;
width:100%;
margin-bottom:15px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.summer-text{
position:static;
width:100%;
}
.summer-text-inner{
text-align:left;
}
.summer-text-inner>h5{
font-size:22px;
line-height:140%;
margin-bottom:20px;
}
.summer-text-inner>p{
font-size:14px;
line-height:160%;
}
}


.bg-wave-border{
width:510px;
margin:0 auto;
text-align:center;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(/travel/grand_mercure/images/border.png);
padding-top:70px;
}

@media screen and (min-width: 248px) and (max-width: 768px){
.bg-wave-border{
width:90%;
padding:40px 0px;
}
}



.rank-wrap{
width:100%;
margin:0 auto;
text-align:center;
padding-top:120px;
padding-bottom:250px;
}
.rank-wrap img{
max-width:100%;
height:auto;
}
.rank-title{
margin-bottom:60px;
width:440px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.rank-title>p{
margin-bottom:10px;
}
.rank-title>h3{
color:#2f9ade;
line-height:100%;
font-size:40px;
letter-spacing: .15rem;
position:relative;
}
.rank-title>h3:before,
.rank-title>h3:after{
content: "";
width: 29px;
height: 40px;
display: block;
position: absolute;
top: 0px;
background-repeat:no-repeat;
background-position:center center;
}
.rank-title>h3:before{
left:0%;
background-image:url(/travel/grand_mercure/images/title_before_rank.png);
}
.rank-title>h3:after{
right:0%;
background-image:url(/travel/grand_mercure/images/title_after_rank.png);
}
.rank-container{
margin:0 auto;
text-align:center;
width:100%;
}
.rank-box{
width:510px;
margin:0 auto;
text-align:center;
}
.rank-img{
width:100%;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
text-align:center;
position:relative;
}
.rank-icon{
position:absolute;
top:-20px;
left:20px;
	z-index:5;
}
.rank-img-inner img{
border-radius:30px;
}
.rank-summary{
position:relative;
padding-top:30px;
padding-left:25px;
padding-right:25px;
text-align:left;
}
.rank-area{
position:absolute;
top:-60px;
right:20px;
z-index:8;
width:93px;
height:93px;
}
.rank-area>p{
border-radius:100px;
background-color:#ff7a93;
width:93px;
height:93px;
display: flex;
justify-content: center;
align-items: center;
margin:0 auto;
text-align:center;
}
.rank-area>p span{
display:block;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:120%;
text-align:center;
}
.rank-name{
margin-bottom:25px;
}
.rank-name>p{
margin-bottom:15px;
line-height:100%;
font-weight:bold;
font-size:17px;
color:#328fc9;
}
.rank-name>h4{
line-height:100%;
font-size:28px;
color:#328fc9;
}
.rank-read>p{
margin-bottom:20px;
font-size:14px;
text-align: justify;
text-justify: inter-ideograph;
	line-height:150%;
	height:3.5em;
}
.rank-buttun{
width:210px;
margin:0 auto;
text-align:center;
}
.rank-buttun>a{
display:block;
text-decoration:none;
border-radius:50px;
background-color:#f76149;
width:100%;
margin:0 auto;
text-align:center;
transition: 0.5s ease;
}
.rank-buttun>a:hover{
background-color:#f64d31;
transition: 0.5s ease;
}
.rank-buttun>a p{
line-height:100%;
color:#fff;
font-size:14px;
text-align:center;
padding:18px 10px;
position:relative;
}
.rank-buttun>a p::before{
content: "";
position: absolute;
top:45%;
right: 20px;
width: 4px;
height: 4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: 0.5s ease;
}
.rank-buttun>a:hover p::before{
right: 10px;
transition: 0.5s ease;
}

@media screen and (min-width: 1500px){
.rank-area{
right:0px;
left:400px;
}
}
@media screen and (min-width: 1300px) and (max-width: 1400px){
.rank-area{
right:20px;
}
}
@media screen and (min-width: 769px) and (max-width: 1050px){
.rank-area{
top:-80px;
right:0px;
}
.rank-name>p{
font-size:16px;
}
.rank-name>h4{
font-size:22px;
}
.rank-read>p{
font-size:13px;
}
}
@media screen and (min-width: 248px) and (max-width: 768px){
.rank-wrap{
padding-top:60px;
padding-bottom:120px;
}
.rank-title{
margin-bottom:40px;
width:94%;
}
.rank-title>h3{
font-size:26px;
}
.rank-title>h3:before,
.rank-title>h3:after{
top: -15px;
}
.rank-box{
width:100%;
}
.rank-img-inner img{
border-radius:20px;
}
.rank-summary{
padding-top:20px;
padding-left:15px;
padding-right:15px;
}
.rank-area{
top:-70px;
right:5px;
}
.rank-name{
margin-bottom:15px;
}
.rank-name>p{
margin-bottom:10px;
font-size:14px;
}
.rank-name>h4{
font-size:20px;
}
.rank-read>p{
		font-size:13px;
}
}





.hotel-wrap{
width:100%;
margin:0 auto;
text-align:center;
padding-top:150px;
padding-bottom:50px;
}
.hotel-wrap img{
max-width:100%;
height:auto;
}
.hotel-title{
margin-bottom:120px;
width:360px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.hotel-title>p{
margin-bottom:10px;
}
.hotel-title>h3{
color:#175e8b;
line-height:100%;
font-size:40px;
letter-spacing: .15rem;
position:relative;
}
.hotel-title>h3:before,
.hotel-title>h3:after{
content: "";
width: 29px;
height: 40px;
display: block;
position: absolute;
top: 0px;
background-repeat:no-repeat;
background-position:center center;
}
.hotel-title>h3:before{
left:0%;
background-image:url(/travel/grand_mercure/images/title_before_hotel.png);
}
.hotel-title>h3:after{
right:0%;
background-image:url(/travel/grand_mercure/images/title_after_hotel.png);
}
@media screen and (min-width: 248px) and (max-width: 768px){
.hotel-wrap{
padding-top:80px;
padding-bottom:30px;
}
.hotel-title{
margin-bottom:40px;
width:94%;
}
.hotel-title>h3{
font-size:26px;
}
.hotel-title>h3:before,
.hotel-title>h3:after{
top: -15px;
}
}




.hotel-tab{
width:1050px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.hotel-tab-box{
position:relative;
background-color:#fff;
border-top:1px solid #fdfa04;
border-bottom:5px solid #fdfa04;
border-left:1px solid #fdfa04;
border-right:1px solid #fdfa04;
box-sizing:border-box;
border-radius:40px;
}
.hotel-tab-title{
position:absolute;
top:-30px;
left:auto;
width:100%;
margin:0 auto;
text-align:center;
z-index:5;
}
.hotel-tab-title-box{
width:160px;
margin:0 auto;
text-align:center;
background-color:#fdfa04;
border-radius:20px;
position:relative;
}
.hotel-tab-title-icon{
position:absolute;
top:-40px;
left:auto;
width:100%;
margin:0 auto;
text-align:center;
z-index:8;
}
.hotel-tab-title-box>p{
line-height:100%;
margin:0 auto;
text-align:center;
line-height:100%;
font-weight:bold;
	padding:22px 10px;
	font-size:16px;
}
.nvi-box{
padding-top:50px;
padding-left:70px;
padding-right:70px;
padding-bottom:10px;
}
.nv ul{
width: 100%;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.nv ul li{
padding-right:10px;
padding-bottom:10px;
}
.nv ul li a{
border-radius:100px;
display:block;
font-size:14px;
text-decoration:none;
line-height:100%;
padding-top:13px;
padding-bottom:13px;
padding-right:15px;
background-repeat:no-repeat;
background-position:left 15px center;
box-sizing:border-box;
padding-left:40px;
}
.nv ul li a.all{
background-image:url(/travel/grand_mercure/images/icon_tab_all.png);
border:1px solid #999;
color:#222;
background-color:#fff;
}
.nv ul li a.area{
background-image:url(/travel/grand_mercure/images/icon_tab_area.png);
border:1px solid #5eb7ef;
color:#2885bf;
background-color:#fff;
}
.nv ul li a.buffet,
.nv ul li a.lounge,
.nv ul li a.sauna,
.nv ul li a.onsen,
.nv ul li a.pool,
.nv ul li a.kids,
.nv ul li a.baby,
.nv ul li a.taiken{
border:1px solid #fca2b3;
color:#ff7a93;
background-color:#fff;
}
.nv ul li a.buffet{
background-image:url(/travel/grand_mercure/images/icon_tab_buffet.png);
}
.nv ul li a.lounge{
background-image:url(/travel/grand_mercure/images/icon_tab_lounge.png);
}
.nv ul li a.sauna{
background-image:url(/travel/grand_mercure/images/icon_tab_sauna.png);
}
.nv ul li a.onsen{
background-image:url(/travel/grand_mercure/images/icon_tab_onsen.png);
}
.nv ul li a.pool{
background-image:url(/travel/grand_mercure/images/icon_tab_pool.png);
}
.nv ul li a.kids{
background-image:url(/travel/grand_mercure/images/icon_tab_kids.png);
}
.nv ul li a.baby{
background-image:url(/travel/grand_mercure/images/icon_tab_baby.png);
}
.nv ul li a.taiken{
background-image:url(/travel/grand_mercure/images/icon_tab_taiken.png);
}
.nv ul li a.all.current{
background-image:url(/travel/grand_mercure/images/icon_tab_all_on.png);
color:#fff;
background-color:#999;
}
.nv ul li a.area.current{
background-image:url(/travel/grand_mercure/images/icon_tab_area_on.png);
color:#fff;
background-color:#5eb7ef;
}
.nv ul li a.buffet.current,
.nv ul li a.lounge.current,
.nv ul li a.sauna.current,
.nv ul li a.onsen.current,
.nv ul li a.pool.current,
.nv ul li a.kids.current,
.nv ul li a.baby.current,
.nv ul li a.taiken.current{
color:#ffffff;
background-color:#fca2b3;
}
.nv ul li a.buffet.current{
background-image:url(/travel/grand_mercure/images/icon_tab_buffet_on.png);
}
.nv ul li a.lounge.current{
background-image:url(/travel/grand_mercure/images/icon_tab_lounge_on.png);
}
.nv ul li a.sauna.current{
background-image:url(/travel/grand_mercure/images/icon_tab_sauna_on.png);
}
.nv ul li a.onsen.current{
background-image:url(/travel/grand_mercure/images/icon_tab_onsen_on.png);
}
.nv ul li a.pool.current{
background-image:url(/travel/grand_mercure/images/icon_tab_pool_on.png);
}
.nv ul li a.kids.current{
background-image:url(/travel/grand_mercure/images/icon_tab_kids_on.png);
}
.nv ul li a.baby.current{
background-image:url(/travel/grand_mercure/images/icon_tab_baby_on.png);
}
.nv ul li a.taiken.current{
background-image:url(/travel/grand_mercure/images/icon_tab_taiken_on.png);
}
.nvi-container-tab{
display:none;
}
@media screen and (min-width: 769px) and (max-width: 1050px){
.hotel-tab{
width:1010px;
}
.nvi-box{
padding-left:60px;
padding-right:60px;
}
}
@media screen and (min-width: 248px) and (max-width: 768px){
.nvi-container{
display:none;
}
.ori-sp-container .nvi-container-tab{
display:block;
width:94%;
margin-bottom:40px;
margin-left:auto;
margin-right:auto;
text-align:center;
z-index:10;
}
.ori-sp-container #acMenu dt{
cursor:pointer;
}
.ori-sp-container #acMenu dd{

}
.ori-sp-container #acMenu dt.nvi-title{
position:static;
margin:0 auto;
text-align:center;
width:100%;
height:auto;
}
.ori-sp-container #acMenu dt.active.nvi-title>p,
.ori-sp-container #acMenu dt.nonactive.nvi-title>p{
width:100%;
height:auto;
background-repeat:no-repeat;
background-position:right center;
background-image:url(/travel/grand_mercure/images/nvi_acd_open.png);
background-color:#fdfa04;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.ori-sp-container #acMenu dt.nvi-title>p{
width:100%;
height:auto;
background-repeat:no-repeat;
background-position:right center;
background-image:url(/travel/grand_mercure/images/nvi_acd_close.png);
background-color:#fdfa04;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.ori-sp-container .nvi-title>p span{
display:block;
text-align:left;
color:#222;
font-size:16px;
font-weight:bold;
line-height:100%;
padding:18px 10px;
}

.ori-sp-container .nvi-frame{
position:static;
top: 0px;
}
.ori-sp-container .nvi-box{
padding-top:15px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color:#fff;
}
.nv ul li{
padding-right:5px;
}
}


.hotel-list{
width:1070px;
margin:0 auto;
text-align:center;
}

.isotope .item{
display:inline-block;
/*isotopeを元に戻す場合marginはずす*/
margin:0 10px;
padding-bottom:40px;
}

.hotel-box{
width:510px;
margin:0 auto;
text-align:center;
}
.hotel-box-inner{
background-color:#fff;
border-radius:40px;
}
.hotel-img{
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
.hotel-img img{
border-radius:34px;
}
.hotel-summary{
padding-top:60px;
padding-left:50px;
padding-right:50px;
padding-bottom:30px;
text-align:left;
position:relative;
}
.hotel-area{
position:absolute;
top:-50px;
right:20px;
z-index:8;
width:93px;
height:93px;
}
.hotel-area>p{
border-radius:100px;
background-color:#ff7a93;
width:93px;
height:93px;
display: flex;
justify-content: center;
align-items: center;
margin:0 auto;
text-align:center;
}
.hotel-area>p span{
display:block;
color:#fff;
font-size:12px;
font-weight:bold;
line-height:130%;
text-align:center;
}
.hotel-name{
margin-bottom:20px;
}
.hotel-name>p{
margin-bottom:10px;
line-height:100%;
font-weight:bold;
font-size:20px;
color:#328fc9;
}
.hotel-name>h4{
line-height:100%;
font-size:26px;
color:#328fc9;
}
.hotel-acc{
margin-bottom:15px;
}
.hotel-acc>p{
padding-left:30px;
padding-top:5px;
padding-bottom:5px;
font-size:13px;
color:#444;
background-repeat:no-repeat;
background-position:left center;
background-image:url(/travel/grand_mercure/images/icon_map.png);
}
.hotel-ctach{
margin-bottom:15px;
}
.hotel-ctach>p{
font-size:16px;
font-weight:blod;
}
.hotel-read>p{
margin-bottom:5px;
/*font-size:13px;*/
font-size:16px;
text-align: justify;
text-justify: inter-ideograph;
	line-height:150%;
	height:5em;
color:#444;
}
.hotel-tab-icon{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
padding-top:10px;
padding-bottom:5px;
overflow:hidden;
zoom:1;
clear:both;
margin-bottom:25px;
}
.hotel-tab-icon>ul{
height:80px;
}
.hotel-tab-icon>ul li{
float:left;
padding-right:2px;
padding-bottom:5px;
}
.hotel-tab-icon>ul li>p{
border-radius:100px;
display:block;
font-size:12px;
text-decoration:none;
line-height:100%;
padding-top:10px;
padding-bottom:10px;
padding-right:7px;
background-repeat:no-repeat;
background-position:left 10px center;
box-sizing:border-box;
padding-left:25px;
}
.hotel-tab-icon>ul li>p.area{
background-image:url(/travel/grand_mercure/images/icon_tab_area_s.png);
border:1px solid #5eb7ef;
color:#2885bf;
background-color:#fff;
}
.hotel-tab-icon>ul li>p.buffet,
.hotel-tab-icon>ul li>p.lounge,
.hotel-tab-icon>ul li>p.sauna,
.hotel-tab-icon>ul li>p.onsen,
.hotel-tab-icon>ul li>p.pool,
.hotel-tab-icon>ul li>p.kids,
.hotel-tab-icon>ul li>p.baby,
.hotel-tab-icon>ul li>p.taiken{
border:1px solid #fca2b3;
color:#ff7a93;
background-color:#fff;
}
.hotel-tab-icon>ul li>p.buffet{
background-image:url(/travel/grand_mercure/images/icon_tab_buffet_s.png);
}
.hotel-tab-icon>ul li>p.lounge{
background-image:url(/travel/grand_mercure/images/icon_tab_lounge_s.png);
}
.hotel-tab-icon>ul li>p.sauna{
background-image:url(/travel/grand_mercure/images/icon_tab_sauna_s.png);
}
.hotel-tab-icon>ul li>p.onsen{
background-image:url(/travel/grand_mercure/images/icon_tab_onsen_s.png);
}
.hotel-tab-icon>ul li>p.pool{
background-image:url(/travel/grand_mercure/images/icon_tab_pool_s.png);
}
.hotel-tab-icon>ul li>p.kids{
background-image:url(/travel/grand_mercure/images/icon_tab_kids_s.png);
}
.hotel-tab-icon>ul li>p.baby{
background-image:url(/travel/grand_mercure/images/icon_tab_baby_s.png);
}
.hotel-tab-icon>ul li>p.taiken{
background-image:url(/travel/grand_mercure/images/icon_tab_taiken_s.png);
}
.hotel-buttun{
clear:both;
width:200px;
margin:0 auto;
text-align:center;
}
.hotel-buttun>a{
display:block;
text-decoration:none;
border-radius:50px;
background-color:#f76149;
width:100%;
margin:0 auto;
text-align:center;
transition: 0.5s ease;
}
.hotel-buttun>a:hover{
background-color:#f64d31;
transition: 0.5s ease;
}
.hotel-buttun>a p{
line-height:100%;
color:#fff;
font-size:14px;
text-align:center;
padding:18px 10px;
position:relative;
}
.hotel-buttun>a p::before{
content: "";
position: absolute;
top:45%;
right: 20px;
width: 4px;
height: 4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: 0.5s ease;
}
.hotel-buttun>a:hover p::before{
right: 10px;
transition: 0.5s ease;
}
@media screen and (min-width: 769px) and (max-width: 1050px){
.hotel-list{
width:1010px;
}
.isotope .item{
margin:0 5px;
}
.hotel-box{
width:490px;
}
}
@media screen and (min-width: 248px) and (max-width: 768px){
.hotel-list{
width:94%;
}
.isotope .item{
display:block;
margin:0 auto;
padding-bottom:30px;
text-align:center;
width:100%;
}
.hotel-box{
width:100%;
}
.hotel-box-inner{
border-radius:20px;
}
.hotel-img img{
border-radius:14px;
}
.hotel-summary{
padding-left:25px;
padding-right:25px;
padding-bottom:15px;
}
.hotel-name>p{
font-size:14px;
}
.hotel-name>h4{
font-size:20px;
}
.hotel-acc{
margin-bottom:5px;
}
.hotel-acc>p{
padding-top:7px;
padding-bottom:7px;
font-size:12px;
color:#444;
}
.hotel-ctach{
margin-bottom:10px;
}
.hotel-ctach>p{
font-size:14px;
}
.hotel-read>p{
margin-bottom:10px;
font-size:13px;
	height:auto;
}
.hotel-tab-icon>ul{
height:auto;
}
}

@media screen and (min-width: 248px) and (max-width: 768px){
.ori-sp-container{
padding-top:0px;
}
.ori-sp-container br.brake{
display:none;
}
.ori-sp-container br.sp-brake{
display:block;
}
.ori-sp-container .font-12{
font-size:10px;
}
.ori-sp-container .font-14{
font-size:12px;
}
.ori-sp-container .font-15{
font-size:13px;
}
.ori-sp-container .font-16{
font-size:14px;
}
.ori-sp-container .font-18{
font-size:16px;
}
.ori-sp-container .font-20{
font-size:18px;
}
.ori-sp-container .font-22{
font-size:20px;
}
.ori-sp-container .font-24{
font-size:22px;
}
.ori-sp-container .font-26{
font-size:24px;
}
.ori-sp-container .font-28{
font-size:26px;
}
.ori-sp-container .font-36{
font-size:30px;
}

.ori-sp-container .container-1010{
width:94%;
}

}