@charset "UTF-8";
/* -----------------------------------------------------------
CSS Information

File name:    style.css
Created:      2020.06.10
Style Info:   ニューカレドニア離島特集　CSS
----------------------------------------------------------- */
/* ------------------------ */
/* common */
/* ------------------------ */
#ncIslands {font-family:'Noto Sans JP','メイリオ', Meiryo,'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, sans-serif;overflow:hidden;position:relative;background:#01818e url(../img/body_bg_pc.jpg) center center no-repeat;background-size:cover;background-attachment:fixed;font-weight:400;color:#444;}
#ncIslands a{text-decoration:none;color:#444;transition:all  0.3s ease;}
#ncIslands a:active,
#ncIslands a:focus{outline:none;text-decoration:none;color:#444;}
#ncIslands img {vertical-align:bottom;max-width:100%;height:auto;}
#ncIslands .fontMin {font-family:'Noto Serif JP', serif;font-weight:500;}
#ncIslands .sec {position:relative;z-index:2;position:relative;}
#ncIslands .sec p {font-size:1.5rem;line-height:1.7;}
#ncIslands .sec_inner {width:92%;margin:0 auto;max-width:960px;}
#ncIslands .sec_tit {text-align:center;font-size:3rem;font-family:'Noto Serif JP', serif;font-weight:400;color:#fff;}
#ncIslands .taC {text-align:center;;}
#ncIslands figure figcaption {font-size:1.1rem;margin-top:10px;display:block;text-align:center;color:#333;}
#ncIslands .dis_tb {display:none;}
@media screen and (max-width:1024px) and (min-width:768px) {
	#ncIslands .dis_tb {display:block;}
}
@media (min-width:768px),print {
	.header20,
	.breadcrumb_area {background:#fff;}
	#ncIslands .dis_sp {display:none;}
}
@media screen and (max-width:1024px) {
	.header20,
	.breadcrumb_area,
	.footer20 {z-index:20;}
	.breadcrumb_area,
	.footer20 {position:relative;}
	#ncIslands {background:#01818e;z-index:10;position:relative;}
	#ncIslands::before {display:block;content:"";z-index:1;position:fixed;top:0;left:0;width:100vw;height:100vh;background:url(../img/body_bg_pc.jpg) center top no-repeat;background-size:cover;transform:translateZ(0);}
}
@media screen and (max-width:767px) {
	#ncIslands::before {top:50px;height:calc(100vh - 50px);background-image:url(../img/body_bg_sp.jpg);}
	#ncIslands img {width:100%;}
	#ncIslands .dis_pc {display:none;}
	#ncIslands .sec p {font-size:3.9vw;line-height:1.6;}
	#ncIslands .sec_tit {font-size:7.5vw;}
	#ncIslands figure figcaption {font-size:3vw;}
}

/* ------------------------ */
/* リンクボタン */
/* ------------------------ */
#ncIslands .link_btn {width:100%;max-width:420px;height:40px;margin:0 auto;}
#ncIslands .link_btn a {font-size:1.5rem;font-weight:500;line-height:1.5;position:relative;display:flex;width:100%;height:100%;padding:0;padding:0 40px 0 15px;text-align:center;color:#016e70;border-radius:50px;background:#a8e8e9;align-items:center;justify-content:center;}
#ncIslands .link_btn a::after {font-family:'FontAwesome';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:77%;right:15px;content:'\f054';}
@media (min-width:1025px), print {
  #ncIslands .link_btn a:hover {color:#fff;background:#016e70;}
}
@media screen and (max-width:767px) {
	#ncIslands .link_btn {height:10vw;}
	#ncIslands .link_btn a {font-size:4vw;}
}

/* ------------------------ */
/* 看板 */
/* ------------------------ */
#ncIslands .sec_hero {text-align:center;}
#ncIslands .sec_hero .sec_inner {overflow:hidden;max-width:100%;width:100%;background:url(../img/fv_lace.png) center top no-repeat;}
#ncIslands .sec_hero .hero_txt {width:66%;max-width:420px;margin:150px auto 110px;}
#ncIslands .sec_hero .tit {font-size:5.4rem;line-height:1.2;color:#fff;margin:0 -10px 25px;position:relative;padding-bottom:15px;}
#ncIslands .sec_hero .tit::after {content:"";position:absolute;bottom:0;left:50%;width:calc(100% - 20px);height:2px;background:#fff;transform:translateX(-50%);}
#ncIslands .sec_hero p {color:#fff;font-size:1.6rem;line-height:1.875;}
#ncIslands .sec_hero .lnav {max-width:700px;margin:0 auto;width:92%;}
#ncIslands .sec_hero .lnav ul {display:flex;width:100%;align-items:center;justify-content:space-between;}
#ncIslands .sec_hero .lnav li {width:15%;margin-bottom:60px;}
#ncIslands .sec_hero .lnav li a {display:block;}
#ncIslands .sec_hero .lnav li .thumb {border:1px solid #fff;}
#ncIslands .sec_hero .lnav li p {font-size:1.428rem;margin-top:5px;}
@media (min-width:1025px), print {
  #ncIslands .sec_hero .lnav li a:hover {opacity:0.65;}
}
@media screen and (max-width:767px) {
	#ncIslands .sec_hero .sec_inner {background-image:url(../img/fv_lace_sp.png);background-size:100% auto;}
	#ncIslands .sec_hero .hero_txt {margin:14vh auto 5vh;}
	#ncIslands .sec_hero .tit {font-size:8vw;margin:0 -2vw 21vh;}
	#ncIslands .sec_hero .tit::after {height:1px;width:calc(100% - 4vw);}
	#ncIslands .sec_hero p {font-size:4vw;}
	#ncIslands .sec_hero .lnav ul {flex-wrap:wrap;justify-content:center;margin:0 -1vw 2vw;width:calc(100% + 2vw);}
	#ncIslands .sec_hero .lnav li {width:calc(100% / 3);padding:0 1vw;margin-bottom:7.5vw;}
	#ncIslands .sec_hero .lnav li p {font-size:4vw;}
}

/* ------------------------ */
/* Map */
/* ------------------------ */
#ncIslands .sec_map {margin-bottom:90px;text-align:center;}
#ncIslands .sec_map .map {border:2px solid #fff;margin-top:30px;}
@media screen and (max-width:767px) {
	#ncIslands .sec_map {margin-bottom:11vw;}
	#ncIslands .sec_map .map {border-width:1px;margin-top:3.5vw;}
}

/* ------------------------ */
/* スライド */
/* ------------------------ */
#ncIslands .slider figcaption {color:#888;margin-top:5px;}

/* slick */
#ncIslands .slick-dotted.slick-slider {margin-bottom:0;}
#ncIslands .slick-prev {left:10px;z-index:10;}
#ncIslands .slick-next {right:10px;z-index:10;}
#ncIslands .slick-prev::before,
#ncIslands .slick-next::before {content:"\f054";font-family:"Font Awesome 5 Free";font-weight:bold;opacity:1;}
#ncIslands .slick-prev::before {content:"\f053"}
#ncIslands .slick-dots {top:calc(100% - 30px);}
#ncIslands .slick-dots li {width:10px;height:10px;}
#ncIslands .slick-dots li button::before {content:"";display:inline-block;width:100%;height:100%;background:#fff;border-radius:20px;opacity:1;}
#ncIslands .slick-dots li.slick-active button::before {background:#016e70;}
#ncIslands .slick-slide {height:auto;}
@media screen and (max-width:420px) {
	#ncIslands .slick-prev ,
	#ncIslands .slick-next {top:28vw;}
	#ncIslands .slick-prev {left:5px;}
	#ncIslands .slick-next {right:5px;}
}

/* ------------------------ */
/* Island */
/* ------------------------ */
#ncIslands .sec_island {margin-bottom:120px;}
#ncIslands .sec_island:last-of-type {margin-bottom:0;}
#ncIslands .sec_island .sec_inner {width:100%;background:#fff;overflow:hidden;border:2px solid #fff;}
#ncIslands .sec_island:last-of-type .sec_inner {margin-bottom:0;}
#ncIslands .sec_island .sec_wrap {max-width:880px;width:92%;margin:0 auto;padding:30px 0 35px;}
#ncIslands .sec_island .sec_tit {letter-spacing:0.1em;display:inline-block;padding:0 15px 15px;border-bottom:2px solid #fff;}
#ncIslands .island_name {display:flex;width:100%;height:235px;background-position:center center;background-repeat:no-repeat;background-size:cover;color:#fff;text-align:center;align-items:center;justify-content:center;}
#ncIslands .island_slide .slick-dots {top:calc(100% - 47px);}
#ncIslands .island_info {margin-bottom:30px;}
#ncIslands .island_info .info_tit {display:flex;width:100%;align-items:center;justify-content:center;background:#a8e8e9;text-align:center;font-size:1.5rem;height:40px;font-weight:500;color:#016e70;}
#ncIslands .island_info .info_txt {padding:10px 15px;}
#ncIslands .island_tour {margin-top:30px;}
#ncIslands .island_tour .price {text-align:center;margin-bottom:20px;}
#ncIslands .island_tour .price span {display:inline-block;font-size:1.8rem;font-weight:500;padding:0 50px;position:relative;}
#ncIslands .island_tour .price span::before,
#ncIslands .island_tour .price span::after {content:"";position:absolute;top:50%;width:45px;height:2px;background:#666;}
#ncIslands .island_tour .price span::before {transform:translateY(-50%) rotate(45deg);left:0;}
#ncIslands .island_tour .price span::after {transform:translateY(-50%) rotate(-45deg);right:0;}
#ncIslands .island_tour .price b {font-size:166%;font-weight:500;color:#ed5b34;}
#ncIslands .island_hotels.sec_inner {background:#ddf4ea;}
#ncIslands .island_hotels .sec_wrap {padding-top:40px;}
#ncIslands .island_hotels .title {text-align:center;}
#ncIslands .island_hotels .sec_tit {font-size:2.4rem;color:#3e9799;border-bottom-color:#3e9799;border-bottom-width:1px;}
#ncIslands .hotel_cnt {border:1px solid #3e9799;background:#fff;margin-top:30px;}
#ncIslands .hotel_cnt .cnt_head {background:#a8e8e9;color:#016e70;line-height:1.5;font-weight:500;}
#ncIslands .hotel_cnt .cnt_head .hotel_star {font-size:81.25%;}
#ncIslands .hotel_cnt .cnt_body p {margin-bottom:20px;}
#ncIslands .hotel_cnt .cnt_body .link_btn {margin-top:15px;}
@media screen and (min-width:768px),print {
	#ncIslands .island_intro {overflow:hidden;margin-bottom:15px;}
	#ncIslands .island_intro p {float:left;width:57%;}
	#ncIslands .island_slide {float:right;width:40%;}
	#ncIslands .island_info {display:table;border:1px solid #a8e8e9;width:100%;}
	#ncIslands .island_info > div {display:table-cell;width:50%;}
	#ncIslands .island_info > div + div {border-left:1px solid #a8e8e9;}
	#ncIslands .island_info > div:nth-of-type(2) .info_tit {position:relative;}
	#ncIslands .island_info > div:nth-of-type(2) .info_tit::after {position:absolute;content:"";width:1px;height:100%;background:#fff;top:0;left:-1px;}
	#ncIslands .island_info .info_txt p {font-size:1.4rem;line-height:1.5;}
	#ncIslands .hotel_cnt .cnt_head {font-size:1.6rem;display:flex;height:50px;align-items:center;padding-left:20px;}
	#ncIslands .hotel_cnt .cnt_head span {display:inline-block;}
	#ncIslands .hotel_cnt .cnt_head .hotel_name {margin-right:15px;;}
	#ncIslands .hotel_cnt .cnt_body {padding:20px;overflow:hidden;}
	#ncIslands .hotel_cnt .cnt_body .hotel_slide {width:47.6%;float:left;}
	#ncIslands .hotel_cnt .cnt_body .hotel_info {width:50%;float:right;;}
}
@media screen and (max-width:767px) {
	#ncIslands .sec_island {margin-bottom:24vw;}
	#ncIslands .sec_island:last-of-type {margin-bottom:0;}
	#ncIslands .sec_island .sec_inner {border-width:1px;}
	#ncIslands .sec_island .sec_wrap {padding:4vw 0 7vw;}
	#ncIslands .sec_island .sec_tit {padding:0 0 3vw;border-bottom-width:1px;}
	#ncIslands .island_name {height:59vw;}
	#ncIslands .island_slide {margin:4vw 0;}
	#ncIslands .island_info > div {border:1px solid #a8e8e9;}
	#ncIslands .island_info .info_tit {font-size:1.4rem;height:8vw;font-size:3.7vw;}
	#ncIslands .island_info .info_txt {padding:2vw 3vw;}
	#ncIslands .island_tour {margin-top:6vw;}
	#ncIslands .island_tour .price span {font-size:4vw;padding:0 9vw;}
	#ncIslands .island_tour .price span::before,
	#ncIslands .island_tour .price span::after {width:8.5vw;}
	#ncIslands .island_hotels .sec_wrap {padding-top:10vw;}
	#ncIslands .island_hotels .sec_tit {font-size:6.37vw;}
	#ncIslands .hotel_cnt {margin-top:8vw;}
	#ncIslands .hotel_cnt .cnt_head {font-size:4vw;text-align:center;padding:3vw;}
	#ncIslands .hotel_cnt .cnt_head span {display:block;}
	#ncIslands .hotel_cnt .cnt_body {padding:3vw 3vw 5vw;}
	#ncIslands .hotel_cnt .cnt_body .hotel_slide {margin-bottom:3vw;}
	#ncIslands .hotel_cnt .cnt_body p {margin-bottom:3vw;}
	#ncIslands .hotel_cnt .cnt_body .link_btn {margin-top:2vw;}
}

/* head image */
#ncIslands #iledespins .island_name {background-image:url(../img/iledespins_head_pc.jpg);}
#ncIslands #ouvea .island_name {background-image:url(../img/ouvea_head_pc.jpg);}
#ncIslands #maitre .island_name {background-image:url(../img/maitre_head_pc.jpg);}
#ncIslands #lifou .island_name {background-image:url(../img/lifou_head_pc.jpg);}
#ncIslands #bourail .island_name {background-image:url(../img/bourail_head_pc.jpg);}
#ncIslands #mare .island_name {background-image:url(../img/mare_head_pc.jpg);}
@media screen and (max-width:767px) {
	#ncIslands #iledespins .island_name {background-image:url(../img/iledespins_head_sp.jpg);}
	#ncIslands #ouvea .island_name {background-image:url(../img/ouvea_head_sp.jpg);}
	#ncIslands #maitre .island_name {background-image:url(../img/maitre_head_sp.jpg);}
	#ncIslands #lifou .island_name {background-image:url(../img/lifou_head_sp.jpg);}
	#ncIslands #bourail .island_name {background-image:url(../img/bourail_head_sp.jpg);}
	#ncIslands #mare .island_name {background-image:url(../img/mare_head_sp.jpg);}
}


/* ------------------------ */
/* お問い合わせ */
/* ------------------------ */
#ncIslands .contact_box {overflow:hidden;position:relative;z-index:2;}
#ncIslands .contact_box p {font-size:1.5rem;line-height:1.6;color:#787878;}
#ncIslands .contact_box .tit {font-size:2.4rem;margin:0 0 10px 0;color:#444;}
#ncIslands .contact_box .btn_wrap {display:none;}
#ncIslands .contact_box .link_btn {margin-top:10px;}
#ncIslands .contact_box .link_btn a {border-radius:8px;}
#ncIslands .contact_box .link_btn a::after {right:10px;}
#ncIslands .contact_box .contact_tel {font-family:'arial',sans-serif;font-size:5.4rem;font-weight:bold;line-height:1;margin:0 auto;letter-spacing:-.02em;color:#108486;}
#ncIslands .contact_box .contact_tel::before {font-family:'FontAwesome';font-size:80%;display:inline-block;margin-right:10px;content:'\f095';-webkit-transform:rotate(10deg);transform:rotate(10deg);}
@media (min-width:769px), print {
	#ncIslands .contact_box .box {overflow:hidden;padding:35px 40px 28px 40px;background:#fff;}
  #ncIslands .contact_box .wrap_01 {float:left;width:55%;}
  #ncIslands .contact_box .wrap_02 {float:right;width:45%;max-width:400px;}
}
@media screen and (max-width:768px) {
  #ncIslands .contact_box {max-width:640px;margin:0 auto 30px;padding:30px 20px;text-align:center;background:#fff;}
  #ncIslands .contact_box p {font-size:1.4rem;margin-bottom:20px;}
  #ncIslands .contact_box .tit {font-size:2rem;}
  #ncIslands .contact_box .wrap_02 {max-width:400px;margin:0 auto;}
  #ncIslands .contact_box .contact_tel {display:inline-block;}
}
@media screen and (max-width:640px) {
  #ncIslands .contact_box {margin-bottom:0;padding:20px 25px 10px;text-align:left;border:0;}
  #ncIslands .contact_box .wrap_02 {display:none;}
  #ncIslands .contact_box .tit {font-size:1.8rem;text-align:center;}
  #ncIslands .contact_box .btn_wrap {display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-box-align:stretch;align-items:stretch;-ms-flex-align:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:15px 0;}
  #ncIslands .contact_box .btn_wrap li {width:49%;}
  #ncIslands .contact_box .btn_wrap li a {font-size:1.4rem;font-weight:bold;line-height:42px;position:relative;display:block;height:44px;text-align:center;text-decoration:none;border-radius:5px;}
  #ncIslands .contact_box .btn_wrap li.tel a {padding-left:10px;color:#016e70;border:2px solid #016e70;background:#fff;}
  #ncIslands .contact_box .btn_wrap li.tel a::before {font-family:'FontAwesome';font-size:2rem;position:absolute;left:5px;content:'\f095';-webkit-transform:rotate(10deg);transform:rotate(10deg);}
  #ncIslands .contact_box .btn_wrap li.order a {padding-right:10px;color:#016e70;border:2px solid #a8e8e9;background:#a8e8e9;}
  #ncIslands .contact_box .btn_wrap li.order a::before {font-family:'FontAwesome';font-size:1.4rem;font-weight:bold;line-height:20px;position:absolute;top:50%;right:10px;height:20px;margin-top:-10px;content:'\f054';}
}

/* ------------------------ */
/* Footer nav */
/* ------------------------ */
#ncIslands .fnav {width:92%;max-width:960px;margin:55px auto 15px;z-index:2;position:relative;}
#ncIslands .fnav li {margin-bottom:25px;}
#ncIslands .fnav li a {display:flex;overflow:hidden;width:100%;background:#fff;border:2px solid #fff;position:relative;color:#016e70;align-items:center;justify-content:space-between;}
#ncIslands .fnav li a::after {content:"";position:absolute;top:50%;right:10px;width:6px;height:6px;border-top:2px solid #3e9799;border-right:2px solid #3e9799;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);}
#ncIslands .fnav li .thumb {width:35%;}
#ncIslands .fnav li p {display:flex;width:65%;height:100%;align-items:center;padding-left:15px;font-size:1.5rem;font-weight:500;line-height:1.5;}
@media screen and (min-width:768px),print {
	#ncIslands .fnav ul {display:flex;width:calc(100% + 18px);margin:0 -9px;align-items:center;justify-content:center;flex-wrap:wrap;}
	#ncIslands .fnav li {width:33.333333%;padding:0 9px;}
}
@media (min-width:1025px), print {
  #ncIslands .fnav li a:hover {opacity:0.65;}
}
@media screen and (max-width:767px) {
	#ncIslands .fnav {margin:6vw auto 8vw;}
	#ncIslands .fnav li {margin-bottom:3vw;}
	#ncIslands .fnav li .thumb {width:31%;}
	#ncIslands .fnav li p {width:69%;font-size:3.9vw;padding-left:4vw;}
}