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

File name:      style.css
Created:        2018-08-18
Style Info:     ニュージーランド航空　スカイカウチ記事　CSS
----------------------------------------------------------- */
/* common */


.clearfix:after { content: " "; display: block; clear: both; }
.dubai_beach { overflow: hidden; line-height: 180%; }
.dubai_beach a { color: #000; }
.dubai_beach a:hover { opacity: .75; text-decoration: none; }
.dubai_beach ul, .dubai_beach ol, .dubai_beach li { list-style: none; margin: 0; padding: 0; }
.dubai_beach .fl { float: left; display: inline; }
.dubai_beach .fr { float: right; display: inline; }
.dubai_beach p, .dubai_beach li, .dubai_beach dt, .dubai_beach dd { font-size: 16px; line-height: 160%; }
.dubai_beach .container { width: 1100px; margin: 0 auto; padding: 0; }
.dubai_beach .container img {width: 100%;}
.dubai_beach h2, .dubai_beach h3, .dubai_beach h4, .dubai_beach h5, .dubai_beach h6 { padding: 0; margin: 0; }
.dubai_beach .dis_sp { display: none; }


@media (max-width:1200px) {
  .dubai_beach img {width: 100%;}
  .dubai_beach .container { width: 100%; padding: 0 15px; }
}

@media screen and (max-width:767px) {
  .dubai_beach .container { width: 100%; padding: 0 15px; max-width: 640px; }
  .dubai_beach img { width: 100%; height: auto; }
  .dubai_beach .dis_pc { display: none; }
  .dubai_beach .dis_sp { display: block; }
  .dubai_beach .fl,  .dubai_beach .fr { float: none; display: block;}

  .dubai_beach p, .dubai_beach li, .dubai_beach dt, .dubai_beach dd {font-size: 14px;}

}
/* -------------------------------------------------------- */
/* リンクボタン */
/* -------------------------------------------------------- */
.dubai_beach .btn_area .link_btn {width:100%; max-width: 900px; margin: 0 auto;}

.dubai_beach .link_btn a {display:block;position:relative;color:#fff;text-align:center;font-weight:bold; background:#ff6e00;border-radius:8px;text-decoration:none; }
.dubai_beach .link_btn.orange a {background:#ff6e00;}
.dubai_beach .link_btn.green a {background:#23af00;}
.dubai_beach .link_btn.blue a {background:#00afaa;}
.dubai_beach .link_btn a:after {content:'';border:0;height:auto;;background: url(../img/arr_white.svg) center center / 100% auto no-repeat;aspect-ratio: 8 / 14;width:8px;transform: translateY(-50%);position:absolute;top:50%;right:20px;}
.dubai_beach .btn_area .btn_01 {width:100%; max-width: 240px; margin: 0 auto;}
.dubai_beach .btn_01 a {display: block; height: 40px; border: solid 1px #00afaa; background: #fff; border-radius: 20px; color: #00afaa; text-decoration: none; font-size: 14px; font-weight: bold; position: relative; text-align: center; line-height: 40px;}
.dubai_beach .btn_01 a:after {content:'';background: url(../img/arr_green.svg) center center / 100% auto no-repeat;aspect-ratio: 8 / 14;width:6px;transform: translateY(-50%);position:absolute;top:50%;right:10px}
@media (min-width:768px) {
	.dubai_beach .link_btn a:hover {opacity:.65;}
	.dubai_beach .link_btn a {font-size:1.8rem; height:80px; line-height: 80px; }
}
@media (max-width:767px) {
	.dubai_beach .link_btn a {font-size:1.4rem;width: 100%; line-height: 1.4; padding: 3px 0;}
}




/* visual */
.dubai_beach .bl_visual { background: url(../img/visual_bg.png) no-repeat center top; text-align: center; height: 790px; }



/* contents */

.dubai_beach .page_nav ul {width: 1000px; margin: 0 auto;}
.dubai_beach .page_nav ul li {float: left; display: inline; width: 25%; height: 120px; position: relative; }
.dubai_beach .page_nav ul li:hover {opacity: 0.6;}
.dubai_beach .page_nav ul li a {display: block; width: 100%; height: 100%; padding-top: 75px; text-align: center; color:#00afaa; text-decoration: none;}
.dubai_beach .page_nav ul li:after {content: "▼"; color:#00afaa; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0);}
.dubai_beach .page_nav ul li:nth-child(1) a {background: url(../img/page_nvi_01.png) no-repeat center 15px;}
.dubai_beach .page_nav ul li:nth-child(2) a {background: url(../img/page_nvi_02.png) no-repeat center 15px;}
.dubai_beach .page_nav ul li:nth-child(3) a {background: url(../img/page_nvi_03.png) no-repeat center 15px;}
.dubai_beach .page_nav ul li:nth-child(4) a {background: url(../img/page_nvi_04.png) no-repeat center 15px;}





.dubai_beach .page_lead { padding: 100px 0 100px; text-align: center;}
.dubai_beach .page_lead p { font-size: 18px; line-height: 200%; }
.dubai_beach .bl_lead { padding: 50px 0 60px; text-align: center;}
.dubai_beach .bl_pic {margin-bottom: 40px;}


.dubai_beach .bl_tit_01 {text-align: center;}
.dubai_beach #bl_01 .bl_tit_01 {background: url(../img/bl_01_tit_bg.png) no-repeat center bottom;}
.dubai_beach #bl_02 .bl_tit_01 {background: url(../img/bl_02_tit_bg.png) no-repeat center bottom;}
.dubai_beach #bl_03 .bl_tit_01 {background: url(../img/bl_03_tit_bg.png) no-repeat center bottom;}

.dubai_beach .bl_tit_02 {margin-bottom: 30px; padding-left: 90px; position: relative; font-size: 30px; font-weight: bold; line-height: 140%; background: url(../img/tit_line.png) repeat-x bottom; padding-bottom: 30px;}
.dubai_beach .bl_tit_02 span { color:#00afaa; font-size: 20px; font-weight: bold;display: inline-block; margin-bottom: 5px; line-height: 120%; }

.dubai_beach .bl_tit_02.cnt_01:before {content: ""; background: url(../img/icon_01.png) no-repeat center; background-size: 100%; width: 78px; height: 78px; display: block; position: absolute; top: 0; left: 0;}
.dubai_beach .bl_tit_02.cnt_02:before {content: ""; background: url(../img/icon_02.png) no-repeat center; background-size: 100%; width: 78px; height: 78px; display: block; position: absolute; top: 0; left: 0;}
.dubai_beach .bl_tit_02.cnt_03:before {content: ""; background: url(../img/icon_03.png) no-repeat center; background-size: 100%; width: 78px; height: 78px; display: block; position: absolute; top: 0; left: 0;}

.dubai_beach .bl_tit_03 { color:#00afaa; font-size: 20px; font-weight: bold; margin-bottom: 20px;}

.dubai_beach .w_530 {width: 530px;}
.dubai_beach .w_615 {width: 615px;}
.dubai_beach .w_420 {width: 420px;}

.dubai_beach .bord .txt_01 {margin-bottom: 50px;}

.dubai_beach .w_530 .pic  {margin-bottom: 20px;}



.dubai_beach #bl_01 {padding-bottom: 50px;}
.dubai_beach #bl_02 {padding-bottom: 95px;}
.dubai_beach #bl_03 {padding-bottom: 80px;}
.dubai_beach #bl_04 {padding:30px 0 50px; background: #fdf0f3;}
.dubai_beach #bl_05 {padding:30px 0 0;}

.dubai_beach #bl_01 .wrap {margin-bottom: 70px;}

.dubai_beach #bl_03 .wrap {margin-bottom: 80px;}
.dubai_beach #bl_03 .btn_area .btn_01 {margin: 30px 0 0 auto;}



.dubai_beach #bl_tour .bord h3 {font-size: 28px; font-weight: bold; margin-bottom: 30px;}
.dubai_beach #bl_tour .bord h3 span { background: #00afaa; color:#FFFFFF; font-size: 18px; font-weight: bold;display: inline-block; padding: 5px 10px 7px; margin-bottom: 5px; line-height: 100%; }
.dubai_beach #bl_tour .wrap {margin-bottom: 55px;}


/* con_footer */

.dubai_beach .con_footer {background:#fff; padding: 75px 0 100px; }

.dubai_beach .con_footer .btn_area {padding-bottom: 75px;}
.dubai_beach .con_footer .link_01 {margin-bottom: 60px;}
.dubai_beach .con_footer .link_01 li {width: 532px; margin-right: 36px; float: left; display: inline;}
.dubai_beach .con_footer .link_01 li:nth-child(2n) {margin-right: 0;}

.dubai_beach .con_footer .link_02 {text-align: center; font-size: 0;}
.dubai_beach .con_footer .link_02 li {display: inline; margin-right: 70px; position: relative;}
.dubai_beach .con_footer .link_02 li img {width: auto;}
.dubai_beach .con_footer .link_02 li:nth-child(2) {margin-right:90px; }
.dubai_beach .con_footer .link_02 li:last-child {margin-right: 0;}
.dubai_beach .con_footer .link_02 li:after {content: ""; background: url(../img/icon_x.png) no-repeat center; background-size: 100%; width: 34px; height: 34px; display: block; position: absolute; top: 50%; right: -45px; transform: translate(0,-50%);}
.dubai_beach .con_footer .link_02 li:nth-child(2):after {right: -60px;}
.dubai_beach .con_footer .link_02 li:last-child:after {display: none;}





@media (max-width:1200px) {
  .dubai_beach .bl_visual {background-size: 145%; height: auto;}
  .dubai_beach .page_nav ul {width: 100%; padding: 0 15px;}

  .dubai_beach #bl_01 .bl_tit_01 ,
  .dubai_beach #bl_02 .bl_tit_01,
  .dubai_beach #bl_03 .bl_tit_01 {background-size: 130%;  }

  .dubai_beach #bl_tour .bl_tit_01 img {width: auto;}


  .dubai_beach .w_530 ,
  .dubai_beach .w_615 ,
  .dubai_beach .w_420 {width: 48%; margin: 0 auto;}

  .dubai_beach #bl_02 .wrap:last-child .bord {height: auto; }
  .dubai_beach #bl_02 .wrap:last-child .icon {position: static; margin-top: 20px;}



  .dubai_beach .con_footer .link_01 li {width:48%; margin-right: 4%; float: left; display: inline;}

}



@media screen and (max-width:767px) {

  .dubai_beach .bl_visual { background: none; text-align: center; height: auto; }
  .dubai_beach .page_nav {position: relative;}
  .dubai_beach .page_nav ul {position: absolute; top: -19vw; }
  .dubai_beach .page_nav ul li { height: 18vw; border-left:solid 1px #fff;}
  .dubai_beach .page_nav ul li:last-child {border-right:solid 1px #fff;}
	.dubai_beach .page_nav ul li:hover {opacity: 1;}
  .dubai_beach .page_nav ul li a {padding-top: 7.5vw; font-size: 10px; }
	.dubai_beach .page_nav ul li:after {font-size: 3vw;}
  .dubai_beach .page_nav ul li:nth-child(1) a {background-size: 7.8vw; background-position: top center;}
  .dubai_beach .page_nav ul li:nth-child(2) a {background-size: 7.8vw; background-position: top center;}
  .dubai_beach .page_nav ul li:nth-child(3) a {background-size: 8.43vw; background-position: top center;}
  .dubai_beach .page_nav ul li:nth-child(4) a {background-size:11.25vw; background-position: top center;}


  .dubai_beach .page_nav ul li a img {width: 100%;}
  .dubai_beach .page_lead { padding: 3.9vw 15px 7.81vw; text-align: left; }
  .dubai_beach .page_lead p { font-size: 14px; line-height: 160%; }
  .dubai_beach .page_lead p br {display: none}
  .dubai_beach .bl_lead { padding: 3.1vw 0 7.81vw; text-align: left; }

  .dubai_beach .bl_pic {margin-bottom: 6.25vw;}


  .dubai_beach .bl_tit_02 {margin-bottom: 4.6875vw; padding-left: 15.625vw; position: relative; font-size: 20px; font-weight: bold; line-height: 140%; padding-bottom: 3.1vw;}
  .dubai_beach .bl_tit_02 span {font-size: 16px; padding:0; }

  .dubai_beach .bl_tit_02.cnt_01:before {content: ""; background: url(../img/icon_01.png) no-repeat center; background-size: 100%; width: 12.18vw; max-width: 82px; height: 12.18vw; max-height: 82px; display: block; position: absolute; top: 0; left: 0;}
  .dubai_beach .bl_tit_02.cnt_02:before {content: ""; background: url(../img/icon_02.png) no-repeat center; background-size: 100%; width: 12.18vw; max-width: 82px; height: 12.18vw; max-height: 82px; display: block; position: absolute; top: 0; left: 0;}
  .dubai_beach .bl_tit_02.cnt_03:before {content: ""; background: url(../img/icon_03.png) no-repeat center; background-size: 100%; width: 12.18vw; max-width: 82px; height: 12.18vw; max-height: 82px; display: block; position: absolute; top: 0; left: 0;}

  .dubai_beach .bl_tit_03 {font-size: 16px; margin-bottom: 3.125vw;}

  .dubai_beach #bl_tour .bl_tit_01 img {width: 100%;}


  .dubai_beach .w_615 {display: none;}
  .dubai_beach .w_530 ,
  .dubai_beach .w_420 {width:100%; margin: 0 auto;}
  .dubai_beach .w_530.pic ,
  .dubai_beach .bl_pic {margin-bottom: 10px;}

  .dubai_beach .bord .txt_01 {margin-bottom: 0;}


  .dubai_beach #bl_01 ,
  .dubai_beach #bl_02 ,
  .dubai_beach #bl_03 {padding-bottom: 0;}




  .dubai_beach #bl_01 .wrap {margin-bottom: 0;}
  .dubai_beach #bl_02 .w_530 ,
  .dubai_beach #bl_03 .wrap{padding-bottom: 7.8125vw; margin-bottom: 0;}

  .dubai_beach #bl_01 .bord p {padding-bottom: 4.6875vw;}
  .dubai_beach #bl_01 .bord .txt_01 + .pic {margin-bottom: 5.46vw; }
  .dubai_beach #bl_01 .bord .txt_02 + .pic {margin-bottom: 9.375vw; }

  .dubai_beach #bl_03 .btn_area {padding-top: 3.125vw;}
  .dubai_beach #bl_03 .btn_area .btn_01 {margin: 0 auto 0;}




  .dubai_beach #bl_tour .bord h3 {font-size: 20px; margin-bottom: 4.6875vw;}
  .dubai_beach #bl_tour .bord h3 span {font-size: 14px; padding: 5px 10px 5px; }
  .dubai_beach #bl_tour .wrap {margin-bottom: 6.25vw;}


  .dubai_beach .con_footer {background: #fff; padding: 7.8125vw 0 15.625vw;}
  .dubai_beach .con_footer .btn_area {padding-bottom: 7.8125vw;}
  .dubai_beach .con_footer .link_01 li {width:100%; margin-right: 0; float: none; display: block; margin-bottom: 4.6875vw;}
  .dubai_beach .con_footer .link_01 li:last-child {margin-bottom: 0;}

  .dubai_beach .con_footer .link_02 li:nth-child(1) img {width: 29vw;}
  .dubai_beach .con_footer .link_02 li:nth-child(2) img  {width: 20vw;}
  .dubai_beach .con_footer .link_02 li:nth-child(3) img  {width: 14vw;}

  .dubai_beach .con_footer .link_02 li { margin-right: 9vw; position: relative;}
  .dubai_beach .con_footer .link_02 li:nth-child(2) {margin-right:10vw; }
  .dubai_beach .con_footer .link_02 li:after {width: 4.6875vw; height: 4.6875vw;right: -8vw;}
  .dubai_beach .con_footer .link_02 li:nth-child(2):after {right: -7vw;}
  .dubai_beach .con_footer .fp_logo {width: 100%; max-width: 580px; margin: 0 auto;}

}




/* tour */

.dubai_beach #bl_tour {background:#d4f0f0; padding: 60px 0 100px; }
.dubai_beach #bl_tour .bl_tit_01:after {content: ""; background: url(../img/bl_02_tit_icon.png) no-repeat; background-size: 100%; width: 212px; height: 120px;display: block; position: absolute; top: 15px; left: 35px;}

.dubai_beach #bl_tour .tour_tub {margin-bottom: 40px;}
.dubai_beach #bl_tour .tour_tub li {float: left; display: inline; width: 20%; height: 60px; border: solid 1px #dadada; border-right: none; background: #fff; line-height: 60px; font-weight: bold;text-align: center; cursor: pointer;}
.dubai_beach #bl_tour .tour_tub li:last-child {border-right: solid 1px #dadada;}
.dubai_beach #bl_tour .tour_tub li.is-active {background: #23af00; color: #fff; border: none; position: relative;}
.dubai_beach #bl_tour .tour_tub li.is-active:after {content: ""; display: block; width: 0; height: 0;  border: solid 12px transparent; border-top:solid 10px #23af00; position: absolute; bottom: -22px; left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
}

.dubai_beach #bl_tour .tour_panel_wrap {margin-bottom: 60px;}

@media screen and (max-width:1100px) {
  .dubai_beach #bl_tour .bl_tit_01:after {content: ""; width: 0; height: 0;}

}
@media screen and (max-width:767px) {
  .dubai_beach #bl_tour {background: #fff; padding: 0 0; }
  .dubai_beach #bl_tour h2 {padding-top: 6.25vw;}
  .dubai_beach #bl_tour h2 ,
  .dubai_beach #bl_tour .bl_lead ,
  .dubai_beach #bl_tour .wrap {background: #d4f0f0; padding-right: 15px; padding-left: 15px;}
  .dubai_beach #bl_tour .wrap {padding-bottom: 4.25vw;}
  .dubai_beach #bl_tour .tour_tub li {font-size: 4vw;}

}






/* -------------------------------------------------------- */
/* フリーオーダー */
/* -------------------------------------------------------- */

.dubai_beach .contact_box {border: solid 1px #c8c8c8; background: #fff;}
.dubai_beach .contact_box p {color:#787878;}
@media (min-width:768px) {
	.dubai_beach .contact_box {overflow:hidden;margin:50px 0 0;border:1px solid #c8c8c8;padding:30px 40px;}
	.dubai_beach .contact_box p {font-size:1.4rem;line-height:1.4;}
	.dubai_beach .contact_box .tit_01 {font-size:3rem;margin-bottom:30px;text-align:center;font-weight:bold;}
	.dubai_beach .contact_box .tit_01 br {display:none;}
	.dubai_beach .contact_box .tit_02 {font-size:2.7rem;margin:15px 0;text-align:left;}
	.dubai_beach .contact_box .wrap_01 {float:left;width:55%;}
	.dubai_beach .contact_box .wrap_02 {float:right;width:45%;max-width:400px;}
	.dubai_beach .contact_box .contact_tel {padding-left:50px;color:#23af00;font-weight:bold;font-size:5.6rem;line-height:1;font-family:'arial',sans-serif;background:url(../img/icon_tel.png) left center no-repeat;margin:0 auto 10px auto;}
	.dubai_beach .contact_box .link_btn {margin-top:10px;}
	.dubai_beach .contact_box .link_btn a {font-weight:bold;font-size:1.4rem;height:40px;line-height:40px;}
	.dubai_beach .contact_box .link_btn a::after {font-weight:normal;}
}
@media (max-width:1100px) and (min-width:768px) {
	.dubai_beach .contact_box {padding:30px 20px;}
	.dubai_beach .contact_box .wrap_01,
	.dubai_beach .contact_box .wrap_02 {float:none;width:100%;margin:0 auto;text-align:center;}
	.dubai_beach .contact_box .wrap_01 {margin-bottom:20px;}
	.dubai_beach .contact_box .tit_01 {font-size:2.7rem;margin-bottom:20px;}
	.dubai_beach .contact_box .tit_02 {font-size:2.4rem;text-align:center;}
}
@media (max-width:767px) {
	.dubai_beach .contact_box {text-align:center;margin:40px 0 0;overflow:hidden; border: none;}
	.dubai_beach .contact_box p {font-size:1.2rem;}
	.dubai_beach .contact_box .tit_01,
	.dubai_beach .contact_box .tit_02 {line-height:1.4;font-size:1.8rem;margin-bottom:10px;}
	.dubai_beach .contact_box .btn_wrap {overflow:hidden;margin:15px -3px;}
	.dubai_beach .contact_box .btn_wrap li {float:left;width:50%;}
	.dubai_beach .contact_box .btn_wrap li a {display:block;margin:0 3px;border-radius:5px;font-size:1.6rem;position:relative;height:44px;line-height:42px;text-decoration:none;font-weight:bold;}
	.dubai_beach .contact_box .btn_wrap li a::before {position:absolute;height:100%;top:0;}
	.dubai_beach .contact_box .btn_wrap li.tel a {border:2px solid #23af00;color:#23af00;padding-left:10px;background:#fff;}
	.dubai_beach .contact_box .btn_wrap li.tel a::before {content:"";width:17px;left:10px;height:100%;
		background:url(../img/icon_tel.png) center center no-repeat;
		-webkit-background-size:17px auto;
		background-size:17px auto;}
	.dubai_beach .contact_box .btn_wrap li.order a {border:1px solid #ff6600;color:#fff;background:#ff6600;padding-right:10px;}
	.dubai_beach .contact_box .btn_wrap li.order a::before {right:10px;top:50%;content:'';background: url(../img/arr_white.svg) center center / 100% auto no-repeat;aspect-ratio: 8 / 14;width:8px;transform:translateY(-50%);}
}
@media (max-width:640px) {
	.dubai_beach .contact_box p {text-align:left;}
}
@media (max-width:360px) {
	.dubai_beach .contact_box .btn_wrap li.order a::before {right:5px;}
}