@charset "UTF-8";
@import "./slick/slick.css";

/*************************************************

reset

*************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym,  big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, label, legend, figure
 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/* [disabled]vertical-align: baseline; */
	/*background: transparent;*/
}


/*************************************************

楽天トラベル

*************************************************/

div#RthCustomize {
    width: 950px;
}
#htlSide-A {
    top: auto!important;
}


/*************************************************

HTB共通

*************************************************/

.item-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
    font-size: 0;
}
.item{
	font-size: 0rem;
	display: inline-block;
    margin: 0;
    overflow: hidden;
    position: relative;
	width: 33.3333%;
    vertical-align: top;
    border-radius: 0 0 0px 0px;
    -webkit-border-radius: 0 0 0px 0px;
    -moz-border-radius: 0 0 0px 0px;
    border: 0px #666 solid;
    text-align: center;
    padding: 0px;
}
.item .inbody {
    padding: 10px;
}


/****************widthn********************/

.w05per { width: 5%; }
.w10per { width: 10%; }
.w15per { width: 15%; }
.w20per { width: 20%; }
.w25per { width: 25%; }
.w30per { width: 30%; }
.w33per {
	width: 33.3333333333333%;
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
}

.w35per { width: 35%; }
.w40per { width: 40%; }
.w45per { width: 45%; }
.w50per { width: 50%; }
.w55per { width: 55%; }
.w60per { width: 60%; }
.w66per {
 width: 66.1111111111111111111111111111111111%; 
	width : -webkit-calc(100% / 3 * 2) ;
	width : calc(100% / 3 * 2) ;
}
.w65per { width: 65%; }
.w70per { width: 70%; }
.w75per { width: 75%; }
.w80per { width: 80%; }
.w85per { width: 85%; }
.w90per { width: 90%; }
.w95per { width: 95%; }
.w100per { width: 100%; }


/****************align********************/

.align_l { text-align: left !important; }
.align_c { text-align: center !important; }
.align_r { text-align: right !important; }
.valign_m { vertical-align: middle !important; }

/****************vertical-align********************/

.v_align-t{vertical-align: top;}
.v_align-m{vertical-align: middle;}
.v_align-b{vertical-align: bottom;}

/****************margin********************/

.m_top005per{
    margin-top: 0.5%!important;
}
.m_top01per{
    margin-top: 1%!important;
}
.m_top02per{
    margin-top: 2%!important;
}
.m_top05per{
    margin-top: 5%!important;
}
.m_top10per{
    margin-top: 10%!important;
}


.m_bottom005per{
    margin-bottom: 0.5%!important;
}
.m_bottom01per{
    margin-bottom: 1%!important;
}
.m_bottom02per{
    margin-bottom: 2%!important;
}
.m_bottom05per{
    margin-bottom: 5%!important;
}
.m_bottom10per{
    margin-bottom: 10%!important;
}
.m_bottom15per{
    margin-bottom: 15%!important;
}
.m_bottom30per{
    margin-bottom: 30%!important;
}
.m_bottom50per{
    margin-bottom: 50%!important;
}

/****************color********************/

.c_black { color: #000!important; }
.c_black3 { color: #333!important; }
.c_red { color: #ff0000!important; }
.c_blue { color: #0099D9!important; }
.c_green { color: #22AC38!important; }
.c_yellow { color: #fffc00!important; }
.c_orange { color: #F39800!important; }
.c_gray { color:#999999!important; }
.c_lightgray { color:#efefef!important; }
.c_white { color:#fff!important; }
.c_gold { color:#cfa607!important; }
.c_purple { color:#8E4898!important; }
.c_navy { color:#112d54!important; }
.c_peppermint { color:#0BB18D!important; }
.c_pink { color:#E62E8B!important; }
.c_darkbrown {color: #6f5f21!important;}

.bg_black { background-color: #000!important; }
.bg_black3 { background-color: #333!important; }
.bg_red { background-color: #ff0000!important; }
.bg_blue { background-color: #0099D9!important; }
.bg_green { background-color: #22AC38!important; }
.bg_yellow { background-color: #fffc00!important; }
.bg_orange { background-color: #F39800!important; }
.bg_gray { background-color:#999999!important; }
.bg_lightgray { background-color:#efefef!important; }
.bg_white { background-color:#fff!important; }
.bg_gold { background-color:#cfa607!important; }
.bg_purple { background-color:#8E4898!important; }
.bg_navy { background-color:#112d54!important; }
.bg_peppermint { background-color:#0BB18D!important; }
.bg_pink { background-color:#E62E8B!important; }
.bg_darkbrown {background-color: #6f5f21!important;}
.bg_transparent {
	background-color:transparent!important;
}

.c_he{
color: #221a14!important;
}
.c_am{
color: #161D2C!important;
}
.c_fv{
color: #003430!important;
}
.c_hn{
color: #000000!important;
}
.c_wm{
color: #040D5F!important;
}


/************* .txt-************************/
.txt {
    letter-spacing: 0.05rem;
    line-height: 1.6;
}
.txt-ttl {
    padding: 0.5rem;
}
.txt-underline {
}
.txt-underline:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #fff;
    margin: 3px auto 0;
}

.txt-mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E","MS P明朝", "MS 明朝", serif;
	font-weight: normal!important;
}

.txt-w100{
	font-weight: lighter;
}
.txt-w300{
    font-weight: 300!important;
}
.txt-w500{
    font-weight: 500!important;
}
.txt-w700{
    font-weight: 700!important;
}
.txt-xxxlarge{
	font-size: 3.8rem!important;
}
.txt-xxlarge{
	font-size:3rem!important;
}
.txt-xlarge{
	font-size:2rem!important;
}
.txt-large{
	font-size:1.6rem!important;
}
.txt-xmiddle{
	font-size:1.3rem!important;
}
.txt-middle{
	font-size:1rem!important;
}
.txt-small{
	font-size:0.85rem!important;
}
.txt-xsmall{
	font-size:0.75rem!important;
}
.txt-xxsmall{
	font-size:0.65rem!important;
}


ul.list-item {
    text-align: left;
}

ul.note li{
    margin: 0 0px 0 20px;
    text-align: left;
    line-height: 1.5;
    padding: 2px 0px;
    list-style: disc;
}

.item-box {
    padding: 20px;
}


/************* .flex-box-************************/


.flex-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-box.flex-d_r {
    flex-direction: row-reverse;
}
.flex-box.align-i_f {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}
.flex-box.align-i_e {
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

/************* .btn************************/

.btn{
	font-size: 0.8rem;
    color: #fff!important;
    padding: 1rem 35px;
    display: inline-block;
    text-align: left;
    position: relative;
	font-weight: normal;
    background: #000;
}
.btn:hover{
	text-decoration: none;
	opacity: 0.5;
}

.btn_arrow_circle {
	border-radius: 50%;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%; 
    right: 8px;
    -webkit-transform: translateY(-50%) rotateY( 0deg ); 
    transform: translateY(-50%) rotateY( 0deg ); 
    transition: .5s;
}
.btn_arrow_circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.btn_arrow_circle span:before {
}
.btn_arrow_circle span:after {
    content: "";
    display: block;
    -webkit-transform: translateX(-25%) rotate(45deg);
    transform: translateX(-25%) rotate(45deg);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-property: border-color;
    transition-property: border-color;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-width: 2px;
    width: 6px;
    height: 6px;
}


hr.clear {
    clear: both;
    border: none;
    margin: 30px 0;
    color: transparent;
    border: 0px #c1a962 dotted;
}


/*************************************************

カスタマイズページ

*************************************************/



.htb-iframe{
	width:100%;
	border: none;
}
.base-img {
    width: auto;
    padding-top: 60%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
    position: relative;
    background-color: #999;
}
#htb-header {
    position: relative;
}

.ttl-line  span{
    padding: 0px 3vw 0px;
    z-index: 1;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.ttl-line span:before,
.ttl-line span:after {
    content: "";
    height: 5.5vh;
    width: 1px;
    position: absolute;
    left: 0;
    bottom: -3px;
    z-index: 0;
    vertical-align: middle;
    background:#fff;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90eg);
    -webkit-transform: rotate(-90deg);
}
.ttl-line span:after {
    left: auto;
    right: 0;
    transform: rotate(90deg);
    -moz-transform: rotate(90eg);
    -webkit-transform: rotate(90deg);
}