/* okinawa rentalcar CSS */

/********************************************************************* COMMON */
html,body{overflow-x:hidden; box-sizing: border-box;}
*{box-sizing:border-box;}
body{position: relative; overflow: hidden;}
#container:after, .content:after, .inner:after, dl:after{display:none;}


.container {
	width: 1000px;
	margin: 0 auto;
	font-family:'メイリオ', 'Meiryo', 'Helvetica', 'ヒラギノ角ゴシック ProN', 'Arial', 'ＭＳ Ｐゴシック',sans-serif;
	font-size:1.4rem;
	line-height:1.6;
	font-feature-settings: "palt";
    word-wrap: break-word;
    overflow-wrap: break-word;
	box-sizing: border-box;
	position: relative;
}
#breadcrumb{width: 1000px}
.fullsize{
	margin-left:-200%;
	margin-right: -200%;
	padding-left:200%;
	padding-right: 200%;
	position: relative;
}

/*--1000px以下------------------------------------*/
@media only screen and (max-width: 1000px) {
.container{	width:100%; padding: 0 1rem; overflow-x: hidden;}
#breadcrumb{width: 100%}
.fullsize{
	margin-left: -3.1%;
	margin-right: -3.1%;
	padding-left: 3.1%;
	padding-right: 3.1%;
}
}
/*--600px以下------------------------------------*/
@media screen and (max-width: 600px)  {
#breadcrumb{display: none;}
.container {
    font-size: 1.3rem;
    line-height: 1.6;
}
/*section {
    padding-top: 2em;
    padding-bottom: 2em;
}*/
}

/*a{
color: #0066cc;
}
a:hover{
color: #ff6633;
}*/

/*a.etn-link{
display: inline-flex;
align-items: center;
}
a.etn-link::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f35d.svg") no-repeat center center / contain;
mask-image: url("../img/f35d.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.2rem;
height:	1.2rem;
margin: 0 0.3rem 0.2rem 0.5rem;
background-color: #0066cc;
}
a.etn-link:hover::after{
background-color: #ff6633;
}*/

/*a.pdf{
position: relative;
}
a.pdf::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f1c1.svg") no-repeat center center / contain;
mask-image: url("../img/f1c1.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.7rem;
height:	1.7rem;
margin-left: 0.3rem;
background-color: #b30b00;
}

p.pdf{
display: flex;
align-items: center;
}
p.pdf::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f1c1.svg") no-repeat center center / contain;
mask-image: url("../img/f1c1.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.7rem;
height:	1.7rem;
margin-left: 0.3rem;
background-color: #b30b00;
}
*/


@media screen and (max-width:736px) {
/*PCのみ適用*/
.pc_only{
display: none;
}
}/*@media screen and (max-width:736px)*/

@media screen and (min-width:737px) {
/*spのみ適用*/
.sp_only{
display: none;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:550px) {
/*spのみ適用*/
.ssp_only{
display: none;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:550px) and (max-width:736px) {
/*タブレットのみ適用*/
.tb_only{
display: none;
}
}/*@media screen and (min-width:550px) and (max-width:736px)*/



/********************************************************************* contents */

/*タイトル*/
#title {
background: url("../img/main-img.jpg") no-repeat center 60%;
background-size: 100vw auto;
position: relative;
padding-top: 6.5rem;
padding-bottom: 1rem;
margin-bottom: 3rem;
}
#title::before {
content: "";
display: inline-block;
background: url("../img/mincer_w.png") repeat-x;
position: absolute;
top: 0.4rem;
left: 0;
height: 2.1rem;
width: 100%;
}

h1{
font-family: "Zen Maru Gothic", serif;
font-weight: 900;
font-style: normal;
font-size: 9.5rem;
color: #fff;
text-shadow: 0px 2px 5px #333;
line-height: 1.1;
margin-left: 7rem;
}
h1 span.small{
font-size: 6.5rem;
}
h1 span.space{
letter-spacing : -13px;
display: inline-block;
padding-right: 1rem;
}
p.lead{
font-family: "Zen Maru Gothic", serif;
font-weight: 900;
font-style: normal;
color: #fff;
font-size: 2.4rem;
line-height: 1.3;
margin: 2rem 0 5rem 11rem;
letter-spacing: 0.3rem;
}
#title ul{
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}
#title ul li:nth-of-type(1){
width: 40%;
}
#title ul li:nth-of-type(2){
flex-grow: 1;
}

#title ul li img{
width: auto;
}

/*--1000px以下------------------------------------*/
@media screen and (max-width: 1000px){
#title{
    background-size: cover;
    background-position: left center;
}
h1{
font-size: 8vw;
}
h1 span.small{
font-size: 3.5rem;
}
p.lead{
font-size: 1.8rem;
margin: 2rem 0 5rem 9rem;
}
#title ul{
justify-content: space-between;
}
#title ul li:nth-of-type(1){
text-align: center;
}
#title ul li img{
width: 80%;
}
}/*@media screen and (max-width: 1000px)*/

/*--1000px以下 / 737px以上------------------------------------*/
@media screen and (min-width:737px) and ( max-width:1000px){

}/*@media screen and (min-width:737px) and ( max-width:1000px)*/

/*--736px以下------------------------------------*/
@media screen and (max-width: 736px){
h1{
font-size: 11vw;
margin: 0;
line-height: 1.3;
text-align: center;
}
h1 span.space{
letter-spacing : -8px;
}
p.lead{
font-size: 1.8rem;
margin: 2rem 2rem 5rem 2rem;
}
#title ul li:nth-child(1){
display: none;
}
#title ul li img{
width: 100%;
}
}/*@media screen and (max-width: 736px)*/



/*オススメ観光地*/
#spot {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
counter-reset: marker;
}
#spot div.map{
width: 55%;
position: relative;
}
#spot div.map h2{
font-family: "Zen Maru Gothic", serif;
font-weight: 900;
font-style: normal;
color: #333;
font-size: 4.8rem;
line-height: 1.1;
text-align: center;
position: absolute;
top: 2rem;
left: 8rem;
z-index: 10;
}
#spot div.map h2::after{
content: "";
display: inline-block;
background: url("../img/bubble-bg1.png") no-repeat;
background-size: contain;
position: absolute;
top: -2rem;
left: -8rem;
height: 180%;
/*height: 20rem;*/
width: 35rem;
z-index: -1;
}
#spot div.map img{
width: 105%;
margin-top: 8rem;
}

div.spot-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 45%;
padding-left: 3rem;
margin: 4rem 0;
}
div.spot-list ul:nth-child(even){
margin-left: 1.5rem;
}
div.spot-list ul.spot{
display: flex;
flex-direction: column;
justify-content: center;
background-color: #f5efd7;
border-radius: 1rem;
text-align: center;
padding: 1rem;
margin-bottom: 1.5rem;
width: calc((100% - 1.5rem)/2);
}
div.spot-list ul li{
text-align: center;
width: 100%;
}
div.spot-list ul li.order::before{
content: counter(marker, number);
counter-increment: marker;
font-size: 1.3rem;
font-weight: bold;
background-color: #e71a19;
color: #fff;
padding: 0.2rem 0.8rem;
border-radius: 1.5rem;
}
div.spot-list ul li.cc{
font-weight: bold;
color: #006699;
font-size: 1.3rem;
padding: 0.8rem 0 0.5rem;
}
div.spot-list ul li.name{
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
font-family: "Zen Maru Gothic", serif;
font-weight: 900;
font-style: normal;
color: #333;
font-size: 1.8rem;
line-height: 1.2;
padding-bottom: 0.8rem;
}

/*--900px以下------------------------------------*/
@media screen and (max-width: 900px){
div.spot-list ul li img{
width: 100%;
}
}/*@media screen and (max-width: 900px)*/

/*--736px以下------------------------------------*/
@media screen and (max-width: 736px){
#spot {
flex-wrap: wrap;
}
#spot div.map{
width: 100%;
}
#spot div.map h2{
font-size: 3.8rem;
top: 0;
left: 4rem;
}
#spot div.map h2::after{
top: 0;
left: -4rem;
height: 150%;
}
div.spot-list{
width: 100%;
padding-left: 0;
margin: 2rem 0 4rem;
}
}/*@media screen and (max-width: 736px)*/



/*ホテル一覧　リード文*/
div.lead2{
display: flex;
text-align: center;
justify-content: center;
align-items: center;
margin-top: 8rem;
}
div.lead2::before{
content: "";
display: inline-block;
background: url("../img/quot_l.png") no-repeat;
background-size: contain;
width: 4rem;
height: 4.7rem;
}
div.lead2::after{
content: "";
display: inline-block;
background: url("../img/quot_r.png") no-repeat;
background-size: contain;
width: 4rem;
height: 4.7rem;
}
div.lead2 p{
font-family: "Zen Maru Gothic", serif;
font-weight: 900;
font-size: 1.8rem;
line-height: 1.4;
padding: 0 1.5rem 0 2rem;
}

/*--736px以下------------------------------------*/
@media screen and (max-width: 736px){
div.lead2{
margin-top: 3rem;
}
div.lead2 p{
font-size: 1.4rem;
line-height: 1.6;
padding: 0 1.2rem;
}
}/*@media screen and (max-width: 736px)*/



/*ホテル一覧　タブ*/
ul.tub{
display: flex;
margin-top: 5.5rem;
margin-bottom: 6rem;
}
ul.tub li{
width: calc((100% - 1.5rem)/2);
margin-right: 1.5rem;
font-family: "Zen Maru Gothic", serif;
font-weight: bold;
position: relative;
}
ul.tub li:nth-child(even){
margin-right: 0;
}
ul.tub li::before{
content: "";
display: inline-block;
background: url("../img/brackets-l.png") no-repeat;
background-size: contain;
width: 2.5rem;
height: 12.7rem;
position: absolute;
left: 0;
top: 0;
z-index: -10;
}
ul.tub li::after{
content: "";
display: inline-block;
background: url("../img/brackets-r.png") no-repeat;
background-size: contain;
width: 2.5rem;
height: 12.7rem;
position: absolute;
right: 0;
top: 0;
z-index: -10;
}
ul.tub li a{
padding: 1rem 3rem;
display: block;
width: 100%;
position: relative;
}
ul.tub li p.sub{
font-size: 2rem;
color: #333300;
text-align: center;
line-height: 1.2;
}
ul.tub li div.ttl{
font-size: 3.6rem;
line-height: 1.2;
display: flex;
justify-content: space-around;
margin-top: 1.2rem;
}
ul.tub li div.ttl span{
font-size: 5.5rem;
}

ul.tub li.naha div.ttl::after{
content: "";
display: inline-block;
background: url("../img/icon1.svg") no-repeat;
background-size: contain;
/*position: absolute;
right: 10%;
top: 30%;*/
width: 9rem;
height: 7rem;
}
ul.tub li.naha div.ttl{
color: #669933;
}

ul.tub li.resort div.ttl::after{
content: "";
display: inline-block;
background: url("../img/icon2.svg") no-repeat;
background-size: contain;
width: 7.5rem;
height: 7rem;
}
ul.tub li.resort div.ttl{
color: #006699;
}
ul.tub li.resort div.ttl span{
letter-spacing: -0.8rem;
margin-right: 0.5rem;
}

/*--970px以下------------------------------------*/
@media screen and (max-width: 970px){
ul.tub li a{
padding: 1rem 1.5rem;
}
ul.tub li p.sub{
font-size: 1.5rem;
}
ul.tub li div.ttl{
font-size: 3.0rem;
transition: all 0.3s ease;
}
ul.tub li div.ttl span{
font-size: 4.3rem;
}
}/*@media screen and (max-width: 970px)*/

/*--736px以下------------------------------------*/
@media screen and (max-width: 736px){
ul.tub li{
margin-right: 0.8rem;
text-align: center;
}
ul.tub li a{
padding: 1rem;
}

ul.tub li div.ttl{
font-size: 2.2rem;
justify-content: center;
}
ul.tub li div.ttl span{
font-size: 3.2rem;
}

ul.tub li.naha .ttl p{
margin-right: 1rem;
}
}/*@media screen and (max-width: 736px)*/

/*--735px以下 / 550px以上------------------------------------*/
@media screen and (min-width:550px) and ( max-width:735px){
ul.tub li.resort div.ttl span{
letter-spacing: 0;
}
}/*@media screen and (min-width:550px) and ( max-width:735px)*/

/*--550px以下------------------------------------*/
@media screen and (max-width:550px) {
ul.tub li p.sub{
font-size: 1.3rem;
}
ul.tub li div.ttl{
font-size: 1.8rem;
justify-content: space-around;
}
ul.tub li div.ttl span{
font-size: 2.6rem;
}
ul.tub li.naha div.ttl::after{
width: 7rem;
height: 5.5rem;
}
ul.tub li.resort div.ttl::after{
width: 5.8rem;
height: 5.5rem;
}
}/*@media screen and (max-width:550px)*/


/*ホテル一覧 タイトル*/
section.hotels-list{
position: relative;
padding-top: 6rem;
}
section.hotels-list::before{
content: "";
display: inline-block;
position: absolute;
top: 0;
left: -5%;
height: 2.0rem;
width: 110%;
}
section.hotels-list#naha-stay::before{
background: url("../img/mincer_g.png") repeat-x;
}
section.hotels-list#resort-stay::before{
background: url("../img/mincer_b.png") repeat-x;
}
section.hotels-list .ttl{
display: flex;
margin: 0 auto 5rem;
width: 80%;
}
section.hotels-list .ttl li{

font-family: "Zen Maru Gothic", serif;
font-weight: bold;
position: relative;
height: 15rem;
}
section.hotels-list .ttl li:first-child{
position: relative;
width: calc((55% - 1.5rem));
margin-right: 1.5rem;
}
section.hotels-list .ttl li:first-child::before{
content:"";
position: absolute;
z-index: -10;
}
section.hotels-list#naha-stay .ttl li:first-child::before{
background: url("../img/icon1.svg") no-repeat;
background-size: contain;
top: 8%;
left: 10%;
width: 18rem;
height: 14.5rem;
}
section.hotels-list#resort-stay .ttl li:first-child::before{
background: url("../img/icon2.svg") no-repeat;
background-size: contain;
top: 10%;
left: 5%;
width: 14.5rem;
height: 14rem;
}
section.hotels-list .ttl li h2{
font-size: 3.5rem;
/*font-size: 3.9rem;*/
text-shadow: 
       2px  2px 1px #fff,
      -2px  2px 1px #fff,
       2px -2px 1px #fff,
      -2px -2px 1px #fff,
       2px  0px 1px #fff,
       0px  2px 1px #fff,
      -2px  0px 1px #fff,
       0px -2px 1px #fff;
position: absolute;
top: 30%;
left: 30%;
letter-spacing: -0.5rem;
transition: all 0.3s ease;
}
section.hotels-list#naha-stay .ttl li h2{
color: #669933;
}
section.hotels-list#naha-stay .ttl li h2 span{
letter-spacing: 0.5rem;
}
section.hotels-list#resort-stay .ttl li h2{
color: #006699;

}
section.hotels-list .ttl li h2 span{
font-size: 6rem;
}
section.hotels-list .ttl li:last-child{
flex: 1;
margin-right: 0;
background: url("../img/bubble-bg2.png") no-repeat;
background-size: contain;
background-position: 50% 80%;
font-size: 1.6rem;
text-align: center;
padding-top: 3rem;
}
section#resort-stay .ttl li h2 span{
letter-spacing: -1.5rem;
margin-right: 0.5rem;
}

/*--970px以下------------------------------------*/
@media screen and (max-width: 970px){
section.hotels-list .ttl{
width: 100%;
}
section.hotels-list .ttl li h2{
top: 40%;
}
section.hotels-list .ttl li h2{
/*font-size: 3.5rem;*/
line-height: 1.2;
}
section.hotels-list .ttl li h2 span{
font-size: 5rem;
}
}/*@media screen and (max-width: 970px)*/

/*--750px以下------------------------------------*/
@media screen and (max-width: 750px){
section.hotels-list .ttl li h2{
left: 20%;
}
section.hotels-list .ttl li:last-child{
background-position: 50% 100%;
padding-top: 4.5rem;
font-size: 1.4rem;
}
}/*@media screen and (max-width: 750px)*/

/*--660px以下550px以上------------------------------------*/
@media screen and (min-width:551px) and (max-width:699px) {
section.hotels-list .ttl li h2 span{
font-size: 4.5rem;
}
section.hotels-list .ttl li h2{
font-size: 3.2rem;
}
section.hotels-list .ttl li:last-child{
padding-right: 1.5rem;
}
section.hotels-list .ttl li:last-child br{
display: none;
}
}/*@media screen and (min-width:551px) and (max-width:660px)*/

/*--550px以下------------------------------------*/
@media screen and (max-width:550px) {
section.hotels-list .ttl li:first-child{
margin-right: 0;
}
section.hotels-list .ttl li:last-child{
flex:initial;
height: 12rem;
padding-top: 2rem;
}
section#naha-stay .ttl, section#resort-stay .ttl{
flex-direction: column-reverse;
margin-bottom: 3rem;
}
section#naha-stay .ttl li, section#resort-stay .ttl li{
width: 100%;
}
section#naha-stay .ttl li h2, section#resort-stay .ttl li h2{
top: 40%;
left: 30%;
}
}/*@media screen and (max-width:550px)*/




/*ホテル一覧*/
ul.hotels{
display: flex;
flex-wrap: wrap;
margin-bottom: 5rem;
}
ul.hotels li{
width: calc((100% - 2rem)/2);
border: 1px solid #9f9f9f;
padding: 1rem 1.5rem;
margin-right: 2rem;
border-radius: 0.5rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
}
ul.hotels li:nth-child(even){
margin-right: 0;
}
ul.hotels li div.area{
position: relative;
}
ul.hotels li div.area p{
position: absolute;
top: 1rem;
right: 0;
color: #fff;
font-size: 1.6rem;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem 0 0 0.5rem;
margin-bottom: 0;
}
ul.hotels li div.area.naha p{
background-color: #669933ed;
}
ul.hotels li div.area.resort p{
background-color: #006699ed;
}
ul.hotels li img{
width: 100%;
}

ul.hotels h3{
margin: 1rem 0;
font-size: 2rem;
font-weight: bold;
}
section#naha-stay ul.hotels img{
border-bottom: 3px solid #669933;
}
section#resort-stay ul.hotels img{
border-bottom: 3px solid #006699;
}
section#naha-stay ul.hotels h3{
border-bottom: 3px dotted #7fa35b;
}
section#resort-stay ul.hotels h3{
border-bottom: 3px dotted #5da0c1;
}
ul.hotels p{
margin-bottom: 2rem;
flex: 1;
}
ul.hotels h4{
display: flex;
font-weight: bold;
margin-bottom: 0.5rem;
color: #cc0000;
}
ul.hotels h4::before{
content:"";
background-image: url(../img/plane.svg);
display: inline-block;
width: 2rem;
height: 2rem;
background-size: contain;
margin-right: 1rem;
background-repeat: no-repeat;
}
ul.hotels ul.bookbtn{
display: flex;
flex-wrap: wrap;
}
ul.hotels ul.bookbtn li{
width: calc((100% - 2rem)/3);
margin-right: 1rem;
margin-bottom: 1rem;
padding: 0;
text-align: center;
font-weight: bold;
color: #fff;
border: none;
}
ul.hotels ul.bookbtn li:hover{
opacity: 0.8;
}
ul.hotels ul.bookbtn li:nth-child(3n){
margin-right: 0;
}
/*ul.hotels ul.bookbtn li:nth-last-child(-n+3){
margin-bottom: 0;
}*/
section#naha-stay ul.hotels ul.bookbtn li{
background-color: #669933;
}
section#resort-stay ul.hotels ul.bookbtn li{
background-color: #006699;
}
ul.hotels ul.bookbtn li a{
display: block;
padding: 1rem 0.5rem;
}
ul.hotels ul.bookbtn li a, ul.hotels ul.bookbtn li a:link{
color: #fff;
}
ul.hotels ul.bookbtn li a:hover{
color: #fff;
}
ul.hotels ul.bookbtn li.off{
pointer-events: none;
background-color: #b5b5b5!important;
}

/*--1000px以下 / 737px以上------------------------------------*/
@media screen and (min-width:737px) and ( max-width:1000px){
ul.hotels ul.bookbtn li{
font-size: 1.3rem;
}
}/*@media screen and (min-width:737px) and ( max-width:1000px)*/

@media screen and (max-width:736px) {
ul.hotels{
flex-direction: column;
}
ul.hotels li{
width: 100%;
margin-right: 0;
}
}/*@media screen and (max-width:736px)*/



/********************************************************************* footer */
footer{
text-align: center;
font-size: 1.2rem;
background-color: #f0f0f0;
line-height: 5rem;
}
.footer-btmline{
border: 3px solid;
border-image: linear-gradient(to right, #5cadee, #81f3f5, #0287e5) 1;
}

/*pagetop*/
#gotop{display: none;}
#pagetop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index:50;
	width:4em;
	height:4em;
	border-radius:50%;
	overflow:hidden;
	text-align: center;
}
#pagetop a {
	position: relative;
	display:block;
	width:100%;
	height:100%;
	padding:0;
	background-image: none;
	background-color:rgba(119,119,119,0.4);
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;	
}
#pagetop a:before{
	content: "▲";
	display: block;
	position: absolute;
	color: #FFF;
	font-size: 2em;
    text-indent: 0;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}
#pagetop a:hover {
	text-decoration: none;
	background-color: #a5a5a5;
}