@charset "utf-8";

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

/* 共通
============================================================================= */
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}@media print,screen and (min-width:760px){.main{font-size:1.8rem}}.main img{width:100%;height:auto;vertical-align:bottom}p.kome,.kome li{position:relative;padding-left:calc(1em + 4px)}p.kome:before,.kome li:before{position:absolute;left:0;top:0;content:"※"}@media print,screen and (max-width:759px){.inner{padding:0 16px}}.pageWp{position:relative;}

/* ページHEAD
============================================================================= */
/* パンくず */
.breadcrumbWp{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)}}

/*  h1
====================================== */
h1 { font-size: 1.6rem; font-weight: bold; line-height: 1; margin: 5px auto 5px; max-width: 1236px; text-align: left; }@media screen and (max-width: 767px) {h1 { margin-top: 20px; margin-left:8px; }}
.contents-wraper { position: relative; }

/*  h2
====================================== */
.h2-sub { font-size: 20px; margin-bottom: 5px; }
.h2-country { font-size: 32px; text-shadow: 2px 3px 0 #ffed2d; margin-bottom: 5px; }
#asia .h2-country { font-size: 32px; text-shadow: none; margin-bottom: 5px; background:#ac1d9d; padding:10px; border:1px solid; color:#fff; }
.h2-country>span {background:#fff; border-radius:5px; padding:3px 3px 3px 5px; margin-right:1rem; font-weight:bold; }

@media screen and (max-width: 767px) {
.h2-country { font-size: 20px; text-shadow: 2px 1px 0 #ffed2d; }
#asia .h2-country { font-size: 20px; padding:10px 30px; letter-spacing:1px; }
.h2-country>span { margin-bottom:0.5rem; line-height:1.5; }
}

/*  PAGENAV
====================================== */
.pageNav{position:sticky; left:0; top:0; z-index:900; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.2)}

@media print,screen and (max-width:759px){
.pageNav .inner{padding:0}
}
.pageNav_list{display:flex}
.pageNav_item{position:relative; flex:1 0 auto}
.pageNav_item:before,.pageNav_item:last-child:after{position:absolute; top:50%; transform:translateY(-50%); content:""; display:inline-block; width:1px; height:50%; border-radius:50vw; background:#666;}
.pageNav_item:before{left:-1.5px}
.pageNav_item:last-child:after{right:-1.5px}

@media print,screen and (max-width:759px){
.pageNav_item:first-child:before,.pageNav_item:last-child:after{display:none}
}

.pageNav_item a{display:flex; flex-direction:column; align-items:center; padding-top:8px; color:#2a6193; font-size:1.3rem; font-weight:700; text-align:center; transition:color .2s}
.pageNavBox{display:flex; justify-content:center; align-items:center; min-height:40px; line-height:1.3}
.pageNav_item .arrow{margin:-5px 0; line-height:1; color:#666; font-size:3rem; font-weight:400}

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

/*  CONTENTS
====================================== */
.type01{padding:24px 0;background:repeating-linear-gradient(125deg, #fffbda 5px, #f8ebc6 5px, #fff 8px, #fff 8px) center top repeat #e5f3fc}.ttl{display:flex;flex-direction:column;text-align:center}.ttl.-en:before{content:attr(data-en);color:#599fd0;font-size:2.4rem;font-weight:700}.ttl_icon{text-align:center}.ttl .m-ico{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;color:#599fd0;font-size:2.4rem;background:#fff;border-radius:50vw}.ttl_txt{position:relative;display:inline-block;margin-top:8px;padding-top:16px;color:#296093;letter-spacing:.15em;font-size:2.4rem;font-weight:700;line-height:1.3}.ttl_txt:before{position:absolute;left:50%;top:0;transform:translate(-50%);content:"";display:inline-block;width:115px;height:5px;border-radius:50vw;background:#ea9a3d}.ttlSub{display:flex;flex-direction:column;text-align:center}.ttlSub_read{margin-bottom:4px;color:#599fd0;line-height:1.3;font-size:1.8rem;font-weight:700}.ttlSub_main{position:relative;display:inline-block;padding-bottom:12px;color:#296093;letter-spacing:.15em;font-size:2.4rem;font-weight:700}.ttlSub_main:before{position:absolute;left:50%;bottom:0;transform:translate(-50%);content:"";display:inline-block;width:115px;height:5px;border-radius:50vw;background:#ea9a3d}.ttlSub_txt{position:relative;z-index:0;text-align:center}.ttlSub_txt span{position:relative;display:inline-block;margin-bottom:16px;padding:8px 16px;color:#296093;line-height:1.3;font-weight:700;border-radius:50vw;border-bottom:solid 2px #d3eafe;background:#f2f9fe}@media print,screen and (min-width:760px){.bgtype01{padding:96px 0}.bgtype02{padding:96px 0}.bgtype03{padding:80px 0}.ttl .m-ico{width:80px;height:80px;font-size:6rem}.ttl_txt{padding-top:24px;font-size:3.4rem}.ttlSub_read{margin-bottom:8px;font-size:2.4rem}.ttlSub_main{padding-bottom:16px;font-size:3.4rem}}
.type00{padding:24px;}.ttl{display:flex;flex-direction:column;text-align:center}.ttl.-en:before{content:attr(data-en);color:#599fd0;font-size:2.4rem;font-weight:700}.ttl_icon{text-align:center}.ttl .m-ico{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;color:#599fd0;font-size:2.4rem;background:#fff;border-radius:50vw}.ttl_txt{position:relative;display:inline-block;margin-top:8px;padding-top:16px;color:#296093;letter-spacing:.15em;font-size:2.4rem;font-weight:700;line-height:1.3}.ttl_txt:before{position:absolute;left:50%;top:0;transform:translate(-50%);content:"";display:inline-block;width:115px;height:5px;border-radius:50vw;background:#fff}.ttlSub{display:flex;flex-direction:column;text-align:center}.ttlSub_read{margin-bottom:4px;color:#599fd0;line-height:1.3;font-size:1.8rem;font-weight:700}.ttlSub_main{position:relative;display:inline-block;padding-bottom:12px;color:#296093;letter-spacing:.15em;font-size:2.4rem;font-weight:700}.ttlSub_main:before{position:absolute;left:50%;bottom:0;transform:translate(-50%);content:"";display:inline-block;width:115px;height:5px;border-radius:50vw;background:#ea9a3d}.ttlSub_txt{position:relative;z-index:0;text-align:center}.ttlSub_txt span{position:relative;display:inline-block;margin-bottom:16px;padding:8px 16px;color:#296093;line-height:1.3;font-weight:700;border-radius:50vw;border-bottom:solid 2px #d3eafe;background:#f2f9fe}@media print,screen and (min-width:760px){.bgtype01{padding:96px 0}.bgtype02{padding:96px 0}.bgtype03{padding:80px 0}.ttl .m-ico{width:80px;height:80px;font-size:6rem}.ttl_txt{padding-top:24px;font-size:3.4rem}.ttlSub_read{margin-bottom:8px;font-size:2.4rem}.ttlSub_main{padding-bottom:16px;font-size:3.4rem}}
/*  AREA
====================================== */
.area{padding:0}
.areaCas{display:flex;flex-wrap:wrap}
.areaCas_item{margin-top:16px}
.areaCas_item a{display:flex;flex-direction:column;padding-bottom:24px;height:100%;background:#fff;box-shadow:0 0 .5em rgb(0 0 0 / 20%);transition:opacity 0.3s}
.areaCas_img{order:-1;position:relative;overflow:hidden;height:0;padding-top:calc(300 / 500 * 100%)}
.areaCas_img img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.areaCas_ttl{margin:16px 24px 0;text-align:center;color:#296093;line-height:1.3;font-size:2rem;font-weight:700}
.areaCas_txt{flex:1;margin:8px 24px 0;font-size:1.6rem}
.areaCas_bt{position:relative;display:flex;justify-content:center;align-items:center;margin:16px 24px 0;padding:8px;min-height:50px;color:#fff;font-weight:700;text-align:center;border-radius:50vw;background:#296093}
.areaCas_bt .m-ico{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:3rem}

@media print,screen and (min-width:760px){
.areaCas{margin:0 0 0 -56px}
.areaCas_item{margin:30px 0 0 56px;width:calc(100% / 3 - 56px);background:#fff}
.areaCas_item a:hover{opacity:.6}
.areaCas_img img{transition:transform .3s ease}
.areaCas_item a:hover .areaCas_img img{transform:translate(-50%,-50%) scale(1.1)}
}

@media screen and (max-width: 767px) {
.areaCas{ display: block; white-space: normal; } 
}

/*  FAQ
====================================== */
.faq{padding:0}
.type02{padding:24px 0;background:repeating-linear-gradient(125deg, #fffbda 5px, #f8ebc6 5px, #fff 8px, #fff 8px) center top repeat #e5f3fc;}


/*  RAKUなび 基本色
============================================================================= */
.p-hawaii .c-color__txt { color: #FF9800; font-weight: bold; }
.p-hawaii .bg-color { background-color: #fff4e3; }

.p-micronesia .c-color__txt { color: #13BA96; font-weight: bold; }
.p-micronesia .bg-color { background-color: #EEFFF5; }

.p-asia .c-color__txt { color: #ac1d9d; font-weight: bold; }
.p-asia .bg-color { background-color: #fff6ff; }
.p-asia .h2-color { background-color: #fff; color:#ac1d9d; }
.p-asia .btn-color { background-color: #ac1d9d; box-shadow: 0px 3px #68105f; }
.p-asia .linebtn-color { background-color: #fff; box-shadow: 0px 3px #ffdaff; border: 1px solid #ac1d9d; color: #ac1d9d; }

.p-oceania .c-color__txt { color: #FF6C99; font-weight: bold; }
.p-oceania .bg-color { background-color: #fff6f8; }
.p-oceania .btn-color { background-color: #FF6C99; box-shadow: 0px 3px #D81B60; }

.p-america .c-color__txt { color: #FF6D58; font-weight: bold; }
.p-america .bg-color { background-color: #fff3f1; }
.p-america .btn-color { background-color: #FF6D58; box-shadow: 0px 3px #ff3f24; }

.p-europe .c-color__txt { color: #8F79FF; font-weight: bold; }
.p-europe .bg-color { background-color: #EEECFF; }
.p-europe .btn-color { background-color: #8F79FF; box-shadow: 0px 3px #4d2aff; }

/*  RAKUなびの使い方 h2下のテキストと使用条件
============================================================================= */
p.ttl_subcmt {margin:25px auto; text-align:center;}

p.roundbox{margin:15px auto 5px; text-align:center; background:#fff; border-radius:30px; width:fit-content; padding:5px 20px; border:1px solid #323743;}

.termsuse {background:#fff; color:#323743; padding:10px 5px 10px 60px; margin:20px auto; max-width:800px; text-align:left; border:1px dashed #323743; border-radius:5px; box-shadow:0px 0px 0px 5px #fff;}

@media(max-width: 759px){
  p.roundbox{font-size:14px;}
  .termsuse {padding:10px;}
}

/*  RAKUなびの使い方 フロー
============================================================================= */
.flow_design01 { margin: 35px auto; }

.flow01 {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}

.flow01 > li {
  list-style-type: none;
  width: 100%;
  max-width: 350px;
  display: flex;
}

.flow01 > li .icon01 {
  line-height: 2;
  width: 2em;
  height: 2em;
  text-align: center;
  background: #323743;
  color: #fff;
  margin: 0 auto 10px;
  display: block;
  border-radius: 100vh;
  position: relative;
}

.flow01 > li .icon01::before {
  content: "";
  border: solid transparent;
  border-width: 7px;
  border-top-color: #323743;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.flow01 > li dl {
  padding: 30px 20px;
  margin: 0;
  border: 3px solid #323743;
  background: #fff;
  position: relative;
}

.flow01 > li:not(:first-child) dl::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 10px;
  display: inline-block;
  border-top: 4px solid #323743;
  border-right: 4px solid #323743;
  position: absolute;
  top: calc(50% - 14px);
  left: -45px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flow01 > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #323743;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-bottom: 10px;
  text-align: center;
}

.flow01 > li dl dd {
  margin-left: 0;
}

@media(max-width: 759px){
  .flow01 {
    gap: 20px;
  }
  .flow01 > li {
    max-width: unset;
    display: block;
  }
  .flow01 > li:not(:first-child) dl::before {
    display: none;
  }
}

/*  RAKUなびの使い方 箇条書き
====================================== */
.detail_item {background:#fff;color:#323743;padding:10px 35px 10px 35px;margin:15px auto;max-width:800px;text-align:left;border: 3px solid #323743;border-radius:5px;}@media(max-width:759px){.detail_item {padding:10px;}}


/*  キービジュアルテキスト
============================================================================= */
.mvTxt{ display: inline-block; position: absolute; left: 0; right: 0; margin: 0 auto; color: #323743; text-align: center; font-weight: 700; border-radius: 50vw; background: #fbf2d9db; letter-spacing: .05em; }
.mvTxt span { color: #005bac; font-weight: bold; }
@media screen and (min-width: 768px) { .mvTxt{ bottom: 5px; width: 900px; height: 95px; font-size: 24px; padding: 10px 35px; } }
@media screen and (max-width: 767px) { .mvTxt{ bottom: 0; font-size: 16px; border-radius: 0; padding: 0.5em; } }

/*  キービジュアル
============================================================================= */
.mv{ position:relative; margin:8px auto 0; width:100%; max-width:1920px; background: url(/lookjtb/rakunavi/_images/rakunavi_mv.jpg) center / 100% auto no-repeat; }
.mvImg{ margin:0 auto; }
.mvImg img{ width:100%; height:auto; vertical-align:bottom; }

@media print,screen and (max-width:767px){
.mv{ position:relative; margin:8px auto 0; width:100%; height: 300px; background: url(/lookjtb/rakunavi/_images/rakunavi_mv_sp.jpg) center / 100% auto no-repeat; }
.mvImg img{ width:100%; height:16em; vertical-align:bottom; position:relative; top:10px; } }

@media screen and (min-width:768px){
.mv{ max-width:100%; background-size:cover; }
.mvImg{ width:960px; } }



/*  RAKUなびTOPページ エリア別の説明リスト
============================================================================= */
.areaCas_detaillist { flex: 1; margin: 20px 24px 0; }
.areaCas_detailitem { display: block; align-items: center; margin-bottom: 10px; margin-top: 20px; font-size: 16px; }
.areaCas_detailitem-label { display: grid; justify-content: center; align-items: center; background: #fff8b6; border-radius: 3px; height: 35px; width: 90px; margin-bottom: 6px; }
.areaCas_detailitem-label_graycolor { display: grid; justify-content: center; align-items: center; background: #e8e8e8; border-radius: 3px; height: 35px; width: 90px; margin-bottom: 6px; }
.areaCas_detailitem-label span { color: #323743; }
.areaCas_detailitem-txt { margin-left: 5px; }



/*  グアム・サイパン・パラオページ
============================================================================= */
.line_btn { background: #139912; display: flex; justify-content: center; padding: 10px; font-size: 14px; margin-top: 12px; border-radius: 15px; color: #fff; font-weight: bold; box-shadow: 0px 3px #086207; transition: 0.5s; }
.line_btn:hover { opacity: 0.5; border-radius: 35px; transition: 0.5s; }

.areaCas_detaillist_02 { margin: 15px 0; }
.areaCas_detailitem_02 { display: block; margin-bottom: 6px; font-size: 14px; }
.areaCas_detailitem-label_02 { display: flex; justify-content: center; align-items: center; border-radius: .25em; height: 2.25em; width: 10em; border: 2px solid #323743; margin-bottom: 6px; }
.areaCas_detailitem-label_02 span { color: #323743; font-weight: bold; }
.areaCas_detailitem-txt_02 { margin-left: 5px; }

@media screen and (max-width: 767px) {
.line_btn { width: 100%; font-size: 12px; }
.areaCas_detailitem-txt_02 { margin-left: 0; }
}

/*  質問フォームボタン
============================================================================= */
.form_btn  { display: flex; justify-content: center; padding: 10px; font-size: 14px; margin-top: 12px; border-radius: 15px; color: #fff; font-weight: bold; transition: 0.5s; }
.form_btn:hover { opacity: 0.5; border-radius: 35px; transition: 0.5s; }

@media screen and (max-width: 767px) {
.form_btn { width: 100%; font-size: 12px; }
}

/*  PCのとき非表示
============================================================================= */
@media screen and (min-width: 768px) {
.pc-hidden { display: none; }

}
/*  SPのとき非表示
============================================================================= */
@media screen and (max-width: 767px) {
.sp-hidden { display: none;  color: #FF6C99; font-weight: bold; }
}

/*  リボン
====================================== */
.ribbon { display:block; position:relative; line-height:55px; text-align:center; padding:0 30px; color:#FFF; box-sizing:border-box; }
.ribbon:before { position:absolute; content:''; width:0px; height:0px; z-index:1; top:0; left:0; border-width:40px 0px 40px 15px; border-color:transparent transparent transparent #fff; border-style:solid; }
.ribbon:after { position:absolute; content:''; width:0px; height:0px; z-index:1; top:0; right:0; border-width:40px 15px 40px 0px; border-color:transparent #fff transparent transparent; border-style:solid; }

@media screen and (max-width: 767px) {
.ribbon { line-height:30px; padding:10px 30px;}
.ribbon:before { border-width:55px 0px 55px 10px; }
.ribbon:after { border-width:55px 10px 55px 0px; }
}

/*  よくあるお問い合わせ例 20250613追加
====================================== */
#faq .komefaq { margin-top: 10px; }
.linkcolor { color: #3498db !important; font-weight: 600; }
.linkcolor:hover { opacity: 0.8; }
.kome_wakugai { margin: -10px auto 5px; max-width: 800px; }