@charset "utf-8";

@import url("/kokunai/___common/css/fonts.css");


/* アイコン
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Noto+Sans+JP:wght@400;700&display=swap');

@font-face {
font-family: "icon"; src: url('./font/icon.eot'); src: url('./font/icon.eot#iefix') format('embedded-opentype'), url('./font/icon.woff') format('woff'), url('./font/icon.ttf') format('truetype'), url('./font/icon.svg#icon') format('svg'); font-weight: normal; font-style: normal; }

 [class^="ico-"]:before, [class*=" ico-"]:before { display: inline-block; font-family: "icon"; font-size: 120%; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1em; margin-left: .2em; margin-right: .2em; speak: none; text-align: center; text-decoration: inherit; text-transform: none; width: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ico-down-open:before { content: '\e801'; }


/* 共通
============================================================================= */
body,input,button,textarea,select{font-size:1.6rem;font-family:"Work Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
.main{font-size:1.6rem}
.page-top a {background:#F4CAD0;}
.main img{width:100%; height:auto; vertical-align:bottom;}
.pageWp{position:relative;}

@media print,screen and (min-width:760px){
.main{font-size:1.8rem;}
}

@media print,screen and (max-width:759px){
.inner{padding:0 16px;}
}

/* パンくず
============================================================================= */
.breadcrumbWp{position:relative; left:0; top:0; z-index:1; width:100%}
.breadcrumbs{padding:0 8px; background-color:rgba(255,255,255,.7)}
a.breadcrumbs_anchor{color:#3498db!important}
.breadcrumbs_item:not(:last-child):after{border-color:#c0c5cb!important}
.f-breadcrumbs{margin-bottom:0; padding:20px 0; border-bottom:solid 1px #BCBDC2; background:none}
.f-breadcrumbs .breadcrumbs{margin:0}

.breadcrumbWp .breadcrumbs_item:not(:last-child):after{border-color:#323743}

@media print,screen and (min-width:760px){
.breadcrumbs{margin:0 auto; max-width:1280px; background:none}
.breadcrumbs .inr{display:inline-block; padding:2px 10px; border-radius:0 0 5px 5px; background-color:rgba(255,255,255,.7)}
}

/*  MV
============================================================================= */
.mv{position:relative}
.mvInr{margin:0 auto; width:100%; height:100%; max-width:1280px;}
.mvBox{padding-top:100px; display:flex; justify-content:center}
.mvTtl{position:relative; padding-bottom:16px; text-align:center; color:#DE343A; line-height:1.2; font-size:2.4rem; font-weight:700; text-shadow:0 0 16px #fff}
.mvTtl span{font-size:1.4rem; font-weight:700}
.mvImg{position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%; background:url(/lookjtb/miryoku/hotellounge/_images/mv.jpg) center / 100% auto no-repeat;}
.mvImg img{width:100%; height:100%; object-fit:fill; object-position:0 50%; text-align:center; margin:0 auto}
.mvImgCaption{position:absolute; right:0; bottom:0; padding:4px; line-height:1.3; font-size:1.2rem; background:rgba(255,255,255,.7);}

@media print,screen and (min-width:760px){
.mv{height:400px; overflow:hidden}
.mvInr{position:absolute; left:50%; top:0; transform:translateX(-50%); max-width:1280px;}
.mvTtl{font-size:7.5rem}
.mvTtl span{font-size:3rem}
}

@media print,screen and (max-width:759px){
.mvBox{height:300px; padding-top:6em;}
.mvTtl{font-size:3.4rem}
.mvTtl span{font-size:2rem}
.mvImg{background:url(/lookjtb/miryoku/hotellounge/_images/mv_sp.jpg) center / 100% auto no-repeat;}
}

/*  PAGENAV
====================================== */
.pageNav{left:0; top:0; z-index:900; background:#F4CAD0; box-shadow:0 0 5px rgba(0,0,0,.2)}
.pageNav_list{display:flex}
.pageNav_item{position:relative; flex:1 0 auto}
.pageNav_item a{display:flex; flex-direction:column; align-items:center; color:#DE343A; font-weight:700; text-align:center; transition:color .2s}
.pageNavBox{display:block; align-items:center; min-height:40px; line-height:1.3; background:#fff; width:100%; padding:5px;}
.pageNavBox::after{content:"\e801"; display:block; font-family:"icon"; line-height:1; text-align:center; color:#DE343A;}
.pageNav_item .arrow{margin:-5px 0; line-height:1; color:#DE343A; font-size:3rem; font-weight:400}

@media print,screen and (min-width:760px){
.pageNav_item a{padding:16px; font-size:100%}
.pageNav_item a:hover{opacity:.6}
.pageNavBox{padding:10px;}
}

@media print,screen and (max-width:759px){
.pageNav{background:#f4cad0;}
.pageNav .inner {padding:0px;}
.pageNav_list{display:flex; flex-wrap:wrap;}
.pageNav_item{width:calc(100% / 4);}
.pageNav_item a{padding:0px 2px 2px; font-size:1.1rem; color:#DE343A;}
.pageNavBox{background:#fff;}
.pageNavBox::after{color:#DE343A;}
}

/*  CONTENTS
====================================== */
/* 基本背景色 */
.bgcolor_green{background:#E8F6F2;}
.bgcolor_darkgreen{background:#00796b;}
.bgcolor_pink{background:#F3E8F0;}
.bgcolor_darkpink{background:#915380;}
.bgcolor_blue{background:#EAF7FF;}
.bgcolor_darkblue{background:#2272a8;}
.bgcolor_lightred{background-image:linear-gradient(#fff2f4 2px, transparent 2px), linear-gradient(to right, #fff2f4 2px, #ffffff 2px); background-size:3px 3px;}
.bgcolor_lightyellow{background-image:linear-gradient(#fffdee 2px, transparent 2px), linear-gradient(to right, #fafdc0 2px, #ffffff 2px); background-size:3px 3px;}
.bgcolor_white{background:#FFF;}

.circle-icon{display:block; justify-self:center; margin:15px auto; background:#fff; border-radius:85px; box-shadow:2px 2px 3px 3px #e8e8e8; position:relative; width:40%;}

.asialounge_type01{padding:24px 0; margin:10px auto;}
.ttl{position:relative; display:block; flex-direction:column; text-align:center; background:url("/lookjtb/miryoku/hotellounge/_images/map_icon.png") no-repeat 50% 0 / 3em auto; padding-top:2em;}
.ttl01{position:relative; display:block; flex-direction:column; text-align:center; background:url("/lookjtb/miryoku/hotellounge/_images/good_icon.png") no-repeat 50% 0 / 3em auto; padding-top:2em;}
.ttl_txt{position:relative; display:inline-block; margin-top:8px; padding-top:16px; color:#323743; letter-spacing:.15em; font-size:3.4rem; font-weight:700; line-height:1.3; border-bottom:0.25em #DE343A solid; width:37%;}
.ttl_txt:after{position:absolute; content:""; display:block; width:100%; height:0.125em; bottom:-0.5625em; background:#DE343A;}
.ttlSub{display:flex; flex-direction:column; text-align:center; margin-top:26px; font-size:1.6rem;}

@media print,screen and (min-width:760px){
.asialounge_type01{padding:96px 0; margin:20px auto;}
.ttl_txt{padding-top:24px; font-size:3.4rem;}
}

@media print,screen and (max-width:759px){
.ttl_txt{padding-top:24px; font-size:2.4rem; width:90%;}
.ttl{background:url("/lookjtb/miryoku/hotellounge/_images/map_icon.png") no-repeat 50% 0 / 2em auto; padding-top:1em;}

}

/*  サポートのPOINT
====================================== */
.point{padding:0;}
.pointCas{display:flex; flex-wrap:wrap;}
.pointCas_item{margin-top:16px; display:block; flex-direction:column; padding-bottom:24px; height:auto; background:#fff; box-shadow:0 0 .5em rgb(0 0 0 / 20%); transition:opacity 0.3s;}
.pointCas_ttl{margin:16px 24px 0; text-align:center; color:#DE343A; line-height:1.8; font-size:2.4rem; font-weight:700;}
.pointCas_ttl::after {background-color:#333; content: ""; display:block; height:1px; width:100%;}
.pointCas_txt{flex:1; margin:8px 24px 0; font-size:1.6rem; padding:20px;}
.pointCas_txt span{display:block; margin-top:10px; font-size:1.4rem;}

@media print,screen and (min-width:760px){
.areaCas{margin:0 0 0 -56px;}
.pointCas_item{margin:16px 0 0 56px; width:calc(100% / 3 - 56px); background:#fff;}
}

@media print,screen and (max-width:759px){
.pointCas{margin-top:16px;}
}

/*  各国のlOUNGE紹介
====================================== */
.loungeintro{padding:0;}
.loungeintroCas{display:flex; flex-wrap:wrap; margin-top:15px;}
.loungeintroCas_item1{margin-top:16px; display:block; flex-direction:column; padding-bottom:24px; height:100%; background:#fff; box-shadow:0 0 .5em rgb(0 0 0 / 20%); transition:opacity 0.3s; width:100%;}
.loungeintroCas_ttl{margin:16px 24px 0; text-align:center; color:#DE343A; line-height:1.8; font-size:2.4rem; font-weight:700;}
.loungeintroCas_txt{flex:1; margin:8px 24px 0; font-size:1.6rem; padding:10px;}
.loungeintroCas_txtbox{display:table-cell; vertical-align:top; padding:10px 15px; width:100%;}
.loungeintroCas_txtbox02{display:table-cell; vertical-align:top; padding:10px 15px; width:30%;}
.loungeintroCas_img{margin:8px 24px 0; padding:5px; box-shadow:1px 1px 3px 3px #efefef; width:300px;}

.img_cppbox{position:relative;}
.img-cap{font-weight:500; font-size:1.3rem; position:absolute; right:3em; bottom:0.5em; background:#3636366b; color:#fff; padding:8px;}

.loungeintroCas_txtbox01{display:inline-block; padding:10px 15px; width:100%;}
.spotttl_box{padding:15px; margin:0 23px 15px 25px; font-size:2.4rem;}
.spotttl{color:#fff; font-weight:bold;}


@media print,screen and (max-width:759px){
.loungeintroCas_ttl{line-height:1.3; font-size:2.4rem; padding:10px;}
.loungeintroCas_txt{margin:8px auto 20px; font-size:1.4rem;}
.loungeintroCas_txtbox{display:block; vertical-align:top; padding:10px 15px; width:100%;}
.loungeintroCas_txtbox02{display:table-cell; vertical-align:top; padding:5px 10px;}
.loungeintroCas_img{margin:5px auto; width:85%;}
.img-cap{font-size:1rem; right:3.5em; bottom:1.3em;}
.spotttl_box{margin:0; width:100%;}

}


/* リスト (共通) */
.list-tit {border-radius:10px 10px 0 0; color:#fff; font-weight:bold; font-size:1.6rem; line-height:2; margin:15px 0 0 25px; padding:.2em 1em; text-align:center; width:fit-content;}
.list-tit01 {border-radius:10px 10px 0 0; color:#fff; font-weight:bold; font-size:1.6rem; line-height:2; margin:10px 0 0 0; padding:.2em 1em; text-align:center; width:fit-content;}
.list-tit02 {border-radius:10px 10px 0 0; color:#fff; font-weight:bold; font-size:1.6rem; line-height:2; margin:10px 0 0 0; padding:.2em 1em; text-align:center; width:fit-content;}
.list-box {line-height:2; margin:0 23px 15px 25px; padding:10px 3px;}
.list-box01 {line-height:2; margin:0px; padding:10px 3px;}
.list-box02 {line-height:2; margin:0px; padding:0;}
.list_p_txt {line-height:2; margin:0px; padding:10px 3px; font-size:1.4rem;}


/* サービス内容リスト JTBラウンジ(green) */
.list-design {list-style-type: none; background: #fff; margin: 0 1rem; border-radius: 3px; }
.list-design li {margin-top:10px; margin-left:15px; font-size:1.6rem;}
.list-design li:first-of-type {margin-top: 0;}
.list-design li:before {content:""; width:10px; height:10px; display:inline-block; background:#00796b; border-radius:50%; position:relative; top:-1px; margin-right:5px; }

/* サービス内容リスト JTBデスク(pink) */
.list-design01 {list-style-type: none; background: #fff; margin: 0 1rem; border-radius: 3px; }
.list-design01 li {margin-top:10px; margin-left:15px; font-size:1.6rem;}
.list-design01 li:first-of-type {margin-top: 0;}
.list-design01 li:before {content:""; width:10px; height:10px; display:inline-block; background:#915380; border-radius:50%; position:relative; top:-1px; margin-right:5px; }

/* サービス内容リスト JTBデスク(pink)、ホットダイヤル(blue) */
.list-design02 {list-style-type: none; background: #fff; margin: 0 1rem; border-radius: 3px; }
.list-design02 li {margin-top:10px; margin-left:15px; font-size:1.6rem;}
.list-design02 li:first-of-type {margin-top: 0;}
.list-design02 li:before { display: none; }

/* サービス内容リスト テーブル表の下のJTBデスク(pink) */
.list-design03 {list-style-type: none; padding: 10px; }
.list-design03 li {margin-top:10px; margin-left:15px; font-size:1.6rem;}
.list-design03 li:first-of-type {margin-top: 0;}
.list-design03 li:before {content:""; width:10px; height:10px; display:inline-block; background:#915380; border-radius:50%; position:relative; top:-1px; margin-right:5px; }


@media print,screen and (max-width:759px){
/* リスト (共通) */
.list-tit {border-radius:5px 5px 0 0; font-size:1.4rem; margin:15px 0px 0px 0px;}
.list-tit01 {margin:5px 10px 0px; font-size: 1.4rem; }
.list-tit02 {margin:5px 2px 0px; font-size: 1.4rem; }
.list-box {line-height:1.5; margin:0 auto 15px;}
.list-box01 {line-height:1;}
.list-box02 {line-height:1;}
.list_p_txt {line-height:1; margin:2px auto 20px; padding:10px;}


/* サービス内容リスト JTBラウンジ(green) */
.list-design li {font-size:1.4rem; padding: 1rem; margin: initial; }

/* サービス内容リスト JTBデスク(pink) */
.list-design01 li {font-size:1.4rem; padding: 1rem; margin: initial; }

/* サービス内容リスト JTBデスク(pink)、ホットダイヤル(blue) */
.list-design02 li {font-size:1.4rem; padding: 1rem; margin: initial; }

/* サービス内容リスト テーブル表の下のJTBデスク(pink) */
.list-design03 li {margin-top:10px; margin-left:15px; font-size:1.4rem;}
}

/*  ラベルリスト
============================================================================= */
.list-detail_box { flex: 1; margin: 10px 24px 0; }
.list-detail_item { display: flex; align-items: center; margin-bottom: 10px; font-size: 1.6rem; }
.list-detail_item-label { display: grid; justify-content: center; align-items: center; border-radius: 3px; height: 35px; width: 90px; margin-bottom: 6px; color:#fff; font-weight:600; }
.list-detail_item-txt { margin-left: 10px; border-bottom:1px dotted #323743; }
#tha_tel .list-detail_item-label { width: 25rem; }
#mys_tel .list-detail_item-label { width: 35rem; }

@media print,screen and (max-width:759px){
.list-detail_box { margin: 10px auto 0; }
.list-detail_item { display: block; font-size: 1.4rem; }
#mys_tel .list-detail_item-label { width: 30rem; }
}

/*  スマホ・PC非表示・表示対応
============================================================================= */
@media print,screen and (min-width:760px){
.ForSP{display:none;}
}
@media print,screen and (max-width:759px){
.ForPC{display:none;}
}

/*  テーブル表
============================================================================= */
.loungeintroCas_tablebox { padding: 15px; margin: 20px; }
table { width:100%; padding:20px; font-size:1.6rem; }
table th { padding: 10px; color: #fff; text-align: center; font-weight: bold; }
table td { padding: 3px 10px; background: #fff; border: 5px solid #f3e8f0; }
table th:first-of-type { border-right: 5px solid #f3e8f0; }
table td span { font-size: 1.3rem; }

@media print,screen and (max-width:759px){
table th { padding: 5px; font-weight: 600; font-size: 1.4rem; }
table td { padding: 5px; border: 3px solid #f3e8f0; font-size: 1.4rem; line-height: 1; }
table td span { font-size: 1rem; }
}