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

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


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


@media screen and (max-width:767px) {
.ph_spot .container { width: 100%; padding: 0 15px; max-width: 640px; }
.ph_spot img { width: 100%; height: auto; }
.ph_spot .dis_pc { display: none; }
.ph_spot .dis_sp { display: block; }
.ph_spot .fl,  .ph_spot .fr { float: none; }
.ph_spot p, .ph_spot li, .ph_spot dt, .ph_spot dd {font-size: 14px;}

}
/* -------------------------------------------------------- */
/* 下層　リンクボタン */
/* -------------------------------------------------------- */
.ph_spot .link_btn a {display:block;position:relative;color:#fff;text-align:center;font-weight:bold; background:#ff6e00;border-radius:8px;text-decoration:none; }
.ph_spot .link_btn.orange a {background:#ff6e00;}
.ph_spot .link_btn.green a {background:#23af00;}
.ph_spot .link_btn.blue a {background:#2f8ad0;}
.ph_spot .link_btn a:after {content:"";position:absolute;top:50%;transform: translateY(-50%);right:10px;background: url(../img/arr_01.png) center center / 100% auto no-repeat;aspect-ratio: 8 / 14;width:10px;}
.ph_spot .link_btn.blue a::after {font-size: 2.4rem;}

.ph_spot .btn_area .link_btn {width:100%; max-width: 900px; margin: 0 auto;}
@media (min-width:768px) {
	.ph_spot .link_btn a:hover {opacity:.65;}
	.ph_spot .link_btn a {font-size:1.8rem; height:60px; line-height: 60px; }
}
@media (max-width:767px) {
	.ph_spot .link_btn a {font-size:1.4rem;width: 100%; line-height: 1.4; padding: 15px 0;}
}




/* visual */
.ph_spot .bl_visual { background: url(../img/kanban_photo.jpg) no-repeat center top; text-align: center; height: 613px; margin-bottom: 30px;}
.ph_spot .visual_header { background: rgba(255,255,255,0.85); text-align: center; margin-bottom: 30px; }
.ph_spot .visual_header ul { position: relative; width: 100%; height: 60px; }
.ph_spot .visual_header ul li { position: absolute; top: 50%; left: 50%; }
.ph_spot .visual_header ul li:first-child { transform: translate(-225px, -50%); }
.ph_spot .visual_header ul li:last-child { transform: translate(35px, -50%); }
.ph_spot .visual_header ul:after { content: ""; background: url(../img/header_logo_x.png) no-repeat center; background-size: 100%; width: 34px; height: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* contents */

.ph_spot .page_lead { padding: 20px 0 100px ; text-align: center; position: relative}
.ph_spot .page_lead p { font-size: 16px; line-height: 200%; }
.ph_spot .page_lead .page_lead_icon {position: absolute; top: 0; right: 0px;}


.ph_spot .page_nav { margin-bottom: 100px; }
.ph_spot .page_nav ul{text-align: center;}
.ph_spot .page_nav ul li { display: inline-block; width: 33.333%; height: 60px; border-left: solid 1px #c8c8c8; }
.ph_spot .page_nav ul li:last-child {border-right: solid 1px #c8c8c8; }
.ph_spot .page_nav ul li a { display: block; width: 100%; height: 100%; text-decoration: none; position: relative; }
.ph_spot .page_nav ul li a span { font-size: 22px; font-weight: bold; width: 100%; display: block; text-align: center; position: absolute; top: 50%; transform: translate(0, -50%); }
.ph_spot .page_nav ul li:nth-child(1) span:before { content: ""; background: url(../img/icon_camera.png)no-repeat center; background-size: 100%; display: inline-block; width: 39px; height: 31px; margin-right: 20px; position: relative; top: 5px; }
.ph_spot .page_nav ul li:nth-child(2) span:before { content: ""; background: url(../img/icon_bag.png)no-repeat center; background-size: 100%; display: inline-block; width: 43px; height: 35px; margin-right: 20px; position: relative; top: 5px; }
.ph_spot .page_nav ul li:nth-child(3) span:before { content: ""; background: url(../img/icon_airplain.png)no-repeat center; background-size: 100%; display: inline-block; width: 40px; height: 36px; margin-right: 20px; position: relative; top: 10px; }

@media screen and (max-width:1300px) {
.ph_spot .bl_visual { background: url(../img/kanban_photo.jpg) no-repeat center top; background-size: 145%; height: 62.54vw; }
  .ph_spot .bl_visual h1 {width: 73%; margin: 0 auto;}
  .ph_spot .bl_visual h1 img {width: 100%;}
  .ph_spot .page_lead .page_lead_icon {display: none;}

}

@media screen and (max-width:767px) {
  .ph_spot .bl_visual {background: none; height: auto; margin: 0; padding: 0;}
  .ph_spot .bl_visual .container {width: 100%; padding: 0;}
  .ph_spot .bl_visual h1 {width: 100%;}
  .ph_spot .visual_header { background: #fff; text-align: center; margin-bottom: 0; }
  .ph_spot .visual_header ul {height: 9.375vw;}
  .ph_spot .visual_header ul li:first-child {width: 26.56vw; transform: translate(-32.8125vw, -50%); }
  .ph_spot .visual_header ul li:last-child {width: 28.12vw; transform: translate(4.6875vw, -50%); }
  .ph_spot .visual_header ul:after {width:4.6875vw;}

  .ph_spot .page_lead { padding: 3.9vw 15px 7.81vw; text-align: left; }
  .ph_spot .page_lead p { font-size: 14px; line-height: 160%; }

  .ph_spot .page_nav { margin-bottom: 9.375vw; }

  .ph_spot .page_nav ul li {height: auto;}
  .ph_spot .page_nav ul li a {position: static; padding:12vw 0 1.5625vw;}
  .ph_spot .page_nav ul li a span {position: static; transform: translate(0, 0); font-size: 3.43vw; line-height:1.4;}
  .ph_spot .page_nav ul li:nth-child(1) span:before ,
  .ph_spot .page_nav ul li:nth-child(2) span:before ,
  .ph_spot .page_nav ul li:nth-child(3) span:before {display: none;}
  .ph_spot .page_nav ul li:nth-child(1) {background: url(../img/icon_camera.png)no-repeat center 1.5625vw; background-size: 7.8125vw;}
  .ph_spot .page_nav ul li:nth-child(2) {background: url(../img/icon_bag.png)no-repeat center 1.5625vw; background-size: 9.625vw;}
  .ph_spot .page_nav ul li:nth-child(3) {background: url(../img/icon_airplain.png)no-repeat center 1.5625vw; background-size: 8.125vw;}

}



/* tit */
.ph_spot .bl_tit_01 { height: 120px; width: 100%; position: relative;}
.ph_spot .bl_tit_01_y {  background: url(../img/bg_stripe_yellow.png);}
.ph_spot .bl_tit_01_w {  background: url(../img/bg_stripe_blue.png);}
.ph_spot .bl_tit_01 .tit_img { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}


.ph_spot .bl_lead { padding: 40px 0;  text-align: center;}

@media screen and (max-width:767px) {
  .ph_spot .bl_tit_01 {height: auto; padding: 3.125vw 0; text-align: center;}
  .ph_spot .bl_tit_01_y ,
  .ph_spot .bl_tit_01_w { background: url(../img/bg_stripe_sp.png);}
  .ph_spot .bl_tit_01 .tit_img {position: static; transform: translate(0,0); width: 52vw;}
  .ph_spot .bl_lead {text-align: left; padding: 4.6875vw 0;}
}

/* spot */

.ph_spot #spot .wrap .spot_box {margin-bottom: 90px;}
.ph_spot #spot .wrap .spot_box:nth-child(2n+1) .bord,
.ph_spot #spot .wrap .spot_box:nth-child(2n) .pic {float: right; display: inline;}
.ph_spot #spot .wrap .spot_box:nth-child(2n) .bord,
.ph_spot #spot .wrap .spot_box:nth-child(2n+1) .pic {float: left; display: inline;}

.ph_spot #spot .wrap .spot_box .bord {width: 445px;}
.ph_spot #spot .wrap .spot_box .pic {width: calc(100% - 508px);}
.ph_spot #spot .wrap .spot_box .pic img {width: 100%;}


.ph_spot #spot .bl_tit_02 span.tit_h {border-bottom: solid 5px #3194bd; font-size: 22px; line-height: 1.3; height: 90px; padding:20px 0 0 125px; margin-bottom: 55px; display: flex; align-items: center; font-weight: bold;}
.ph_spot #spot .bl_tit_02 span.tit_txt {color:#3194bd; font-size: 34px; margin-bottom: 30px; display: block; font-weight: bold;}

.ph_spot #spot .wrap .spot_box:nth-child(1) .bl_tit_02 span.tit_h {background: url(../img/spot_01.png) no-repeat left 19px;}
.ph_spot #spot .wrap .spot_box:nth-child(2) .bl_tit_02 span.tit_h {background: url(../img/spot_02.png) no-repeat left 19px;}
.ph_spot #spot .wrap .spot_box:nth-child(3) .bl_tit_02 span.tit_h {background: url(../img/spot_03.png) no-repeat left 19px;}
.ph_spot #spot .wrap .spot_box:nth-child(4) .bl_tit_02 span.tit_h {background: url(../img/spot_04.png) no-repeat left 19px;}
.ph_spot #spot .wrap .spot_box:nth-child(5) .bl_tit_02 span.tit_h {background: url(../img/spot_05.png) no-repeat left 19px;}
.ph_spot #spot .wrap .spot_box:nth-child(6) .bl_tit_02 span.tit_h {background: url(../img/spot_06.png) no-repeat left 19px;}

@media screen and (max-width:1100px) {
  .ph_spot #spot .wrap .spot_box:nth-child(2n+1) .bord,
  .ph_spot #spot .wrap .spot_box:nth-child(2n) .pic ,
  .ph_spot #spot .wrap .spot_box:nth-child(2n) .bord,
  .ph_spot #spot .wrap .spot_box:nth-child(2n+1) .pic {float: none; display: block;}
  .ph_spot #spot .wrap .spot_box .bord ,
  .ph_spot #spot .wrap .spot_box .pic {width: 100%;}
  .ph_spot #spot .wrap .spot_box .pic {text-align: center;}
  .ph_spot #spot .wrap .spot_box .pic img  {width: 100%; max-width: 592px; margin: 20px auto 0;}
}

@media screen and (max-width:767px) {
  .ph_spot #spot {padding-bottom: 15vw;}
  .ph_spot #spot .bl_tit_02 {width: 100%;}
  .ph_spot #spot .bl_tit_02 span.tit_h {height: 10vw; min-height: 40px; width: 100%; padding: 0 0 0 70px; font-size: 16px; position: relative; margin-bottom: 7.8vw; line-height: 1.1;}

  .ph_spot #spot .wrap .spot_box {margin-bottom: 9.375vw;}
  .ph_spot #spot .wrap .spot_box:last-child {margin-bottom: 0;}
  .ph_spot #spot .wrap .spot_box:nth-child(1) .bl_tit_02 span.tit_h ,
  .ph_spot #spot .wrap .spot_box:nth-child(2) .bl_tit_02 span.tit_h ,
  .ph_spot #spot .wrap .spot_box:nth-child(3) .bl_tit_02 span.tit_h ,
  .ph_spot #spot .wrap .spot_box:nth-child(4) .bl_tit_02 span.tit_h ,
  .ph_spot #spot .wrap .spot_box:nth-child(5) .bl_tit_02 span.tit_h ,
  .ph_spot #spot .wrap .spot_box:nth-child(6) .bl_tit_02 span.tit_h {background-position: left bottom; background-size: 15.625vw;}
  .ph_spot #spot .bl_tit_02 span.tit_txt {font-size: 22px; margin-bottom: 5.46vw;}

}


/* tour */

.ph_spot #tour {background:#c8ebf5; padding: 60px 0 100px; }
.ph_spot #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;}

.ph_spot #tour .tour_tub {margin-bottom: 40px;}
.ph_spot #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;}
.ph_spot #tour .tour_tub li:last-child {border-right: solid 1px #dadada;}
.ph_spot #tour .tour_tub li.is-active {background: #23af00; color: #fff; border: none; position: relative;}
.ph_spot #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);
}

.ph_spot #tour .tour_panel_wrap {margin-bottom: 60px;}

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

}
@media screen and (max-width:767px) {
  .ph_spot #tour {background:#fff; padding: 0 0 15.625vw; }
  .ph_spot #tour .tour_tub li {font-size: 4vw;}

}

/* trip */

.ph_spot #trip {background:#fffdd2; padding: 60px 0 90px; }

.ph_spot #trip .wrap .trip_box {margin-bottom: 90px;}
.ph_spot #trip .wrap .trip_box:last-child{margin-bottom: 0;}
.ph_spot #trip .wrap .trip_box:nth-child(2n+1) .bord,
.ph_spot #trip .wrap .trip_box:nth-child(2n) .pic {float: right;}
.ph_spot #trip .wrap .trip_box:nth-child(2n) .bord,
.ph_spot #trip .wrap .trip_box:nth-child(2n+1) .pic {float: left;}

.ph_spot #trip .wrap .trip_box .bord {width: 445px;}
.ph_spot #trip .wrap .trip_box .pic {width: calc(100% - 508px);}
.ph_spot #trip .wrap .trip_box .pic img {width: 100%;}

.ph_spot #trip .wrap .trip_box .bl_tit_02 {border-bottom: solid 5px #3194bd; font-size: 34px; font-weight: bold;height: 80px; padding-top: 25px; color: #3194bd; margin-bottom: 50px; }

@media screen and (max-width:1100px) {
  .ph_spot #trip .wrap .trip_box:nth-child(2n+1) .bord,
  .ph_spot #trip .wrap .trip_box:nth-child(2n) .pic ,
  .ph_spot #trip .wrap .trip_box:nth-child(2n) .bord,
  .ph_spot #trip .wrap .trip_box:nth-child(2n+1) .pic {float: none; display: block;}
  .ph_spot #trip .wrap .trip_box .bord ,
  .ph_spot #trip .wrap .trip_box .pic {width: 100%;}
  .ph_spot #trip .wrap .trip_box .pic {text-align: center;}
  .ph_spot #trip .wrap .trip_box .pic img  {width: 100%; max-width: 592px; margin: 20px auto 0;}

}
@media screen and (max-width:767px) {
  .ph_spot #trip {padding: 4.6875vw 0 15vw; }
  .ph_spot #trip .wrap .trip_box {margin-bottom: 9.375vw;}
  .ph_spot #trip .wrap .trip_box .bl_tit_02 {font-size: 22px;  padding: 0 0 2.3vw; margin-bottom: 4.6875vw; height: auto;}
}


/* con_footer */

.ph_spot .con_footer {background:#fffdd2; padding: 0 0 100px; }


@media screen and (max-width:767px) {
  .ph_spot .con_footer {background: #fff; padding: 7.8125vw 0 15.625vw;}

}




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

.ph_spot  .contact_box {border: solid 1px #c8c8c8; background: #fff;}
.ph_spot  .contact_box p {color:#787878;}
@media (min-width:768px) {
	.ph_spot  .contact_box {overflow:hidden;margin:50px 0 0;border:1px solid #c8c8c8;padding:30px 40px;}
	.ph_spot  .contact_box p {font-size:1.4rem;line-height:1.4;}
	.ph_spot  .contact_box .tit_01 {font-size:3rem;margin-bottom:30px;text-align:center;font-weight:bold;}
	.ph_spot  .contact_box .tit_01 br {display:none;}
	.ph_spot  .contact_box .tit_02 {font-size:2.7rem;margin:15px 0;text-align:left;}
	.ph_spot  .contact_box .wrap_01 {float:left;width:55%;}
	.ph_spot  .contact_box .wrap_02 {float:right;width:45%;max-width:400px;}
	.ph_spot  .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;}
	.ph_spot  .contact_box .link_btn {margin-top:10px;}
	.ph_spot  .contact_box .link_btn a {font-weight:bold;font-size:1.4rem;height:40px;line-height:40px;}
}
@media (max-width:1100px) and (min-width:768px) {
	.ph_spot  .contact_box {padding:30px 20px;}
	.ph_spot  .contact_box .wrap_01,
	.ph_spot  .contact_box .wrap_02 {float:none;width:100%;margin:0 auto;text-align:center;}
	.ph_spot  .contact_box .wrap_01 {margin-bottom:20px;}
	.ph_spot  .contact_box .tit_01 {font-size:2.7rem;margin-bottom:20px;}
	.ph_spot  .contact_box .tit_02 {font-size:2.4rem;text-align:center;}
}
@media (max-width:767px) {
	.ph_spot  .contact_box {text-align:center;margin:40px 0 0;overflow:hidden; border: none;}
	.ph_spot  .contact_box p {font-size:1.2rem;}
	.ph_spot  .contact_box .tit_01,
	.ph_spot  .contact_box .tit_02 {line-height:1.4;font-size:1.8rem;margin-bottom:10px;}
	.ph_spot  .contact_box .btn_wrap {overflow:hidden;margin:15px -3px;}
	.ph_spot  .contact_box .btn_wrap li {float:left;width:50%;}
	.ph_spot  .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;}
	.ph_spot  .contact_box .btn_wrap li a::before {position:absolute;height:100%;top:0;}
	.ph_spot  .contact_box .btn_wrap li.tel a {border:2px solid #23af00;color:#23af00;padding-left:10px;background:#fff;}
	.ph_spot  .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;}
	.ph_spot  .contact_box .btn_wrap li.order a {border:1px solid #ff6600;color:#fff;background:#ff6600;padding-right:10px;}
	.ph_spot  .contact_box .btn_wrap li.order a::before {right:10px;content:"";background: url(../img/arr_01.png) center center / 100% auto no-repeat;width:6px;}
}
@media (max-width:640px) {
	.ph_spot  .contact_box p {text-align:left;}
}
@media (max-width:360px) {
	.ph_spot  .contact_box .btn_wrap li.order a::before {right:5px;}
}