@charset "utf-8";

/*------------------------------------------------------
オーロラ ページごとのCSS

・indexページ専用スタイル
・全下層ページ（page）共通スタイル
・下層ページごとの専用スタイル

という構成になっています。
------------------------------------------------------*/

/****************************************
index
*****************************************/

/* ヘッダーエリア
-------------------------------------------------------- */
#index .headContents {
	height: 570px;
	min-width: 960px;
	text-align: center;
	background: url(/tyo/tour/tour_special/aurora/images_new/mv_01.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}

#index .ttlArea {
	display: none;
	margin: 120px 0 0;
}

#index .mainContents h3 {
	text-align: center;
}
/* アバウトエリア
-------------------------------------------------------- */
#index .aboutArea .txtBox {
	width: 700px;
	margin: 0 auto;
	background-color: rgba(16,16,16,0.8);
	color: #fff;
	padding: 5px;
	position: absolute;;
	left: 0;
	right: 0;
	z-index: 1;
	top: -125px;
}
#index .aboutArea .txtBox:before {
	content: "";
	display: block;
	height: 40px;
	background: url(/tyo/tour/tour_special/aurora/images_new/frame_top.png) no-repeat top center;
	margin-bottom: -20px;
}
#index .aboutArea .txtBox:after {
	content: "";
	display: block;
	height: 40px;
	background: url(/tyo/tour/tour_special/aurora/images_new/frame_btm.png) no-repeat bottom center;
	margin-top: -20px;
}
#index .aboutArea .txtBox p {
	padding: 0 30px;
	line-height: 1.6;
	letter-spacing: 0.5px;
}
/* ポイントエリア
-------------------------------------------------------- */
#index .pointArea {
	background: url(/tyo/tour/tour_special/aurora/images_new/bg_point.png) no-repeat 30px center,
	url(/tyo/tour/tour_special/aurora/images_new/bg_point_wrap.png) no-repeat bottom center #2db3df;
	padding: 140px 0 50px;
	min-width: 960px;
}
#index .pointArea h3 + p {
	text-align: center;
	color: #fff;
	margin-top: 30px;
	line-height: 1.6;
	letter-spacing: 0.5px;
}
#index .pointArea .col3 {
	margin-top: 30px;
}
#index .pointArea .colBox .txtBox {
	margin: 12px
}
#index .pointArea .colBox .ttl {
	font-weight: bold;
	color: #1d7d94;
	font-size: 15px;
	margin-bottom: 10px;
}
#index .pointArea .colBox .ttl img {
	vertical-align: middle;
	margin-right: 5px;
}
#index .pointArea .colBox .link {
	text-align: right;
	font-weight: bold;
	margin-top: 5px;
}
#index .pointArea .colBox .link:after {
	content: url(/tyo/tour/tour_special/aurora/common/images/arrow.png);
	margin-left: 5px
}
#index .pointArea .colBox .link a {
	color: #1d7d94;
	text-decoration: none;
}
#index .pointArea .colBox .link a:hover {
	text-decoration: underline;
}
#index .pointArea .btn {
	text-align: center;
	margin-top: 30px;
	position: relative;
	z-index: 100;
}
#index .pointArea .btn img {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#index .pointArea .btn img:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

/* レベル別オーロラエリア
-------------------------------------------------------- */
#index .levelArea {
	background: url(/tyo/tour/tour_special/aurora/images_new/bg_star.jpg) repeat bottom center;
	padding: 0 0 80px;
	min-width: 960px;
}
#index .levelArea:before {
	content: "";
	display: block;
	background: url(/tyo/tour/tour_special/aurora/images_new/bg_point_btm.png) repeat-x top center;
	margin-top: -100px;
	height: 162px;
}
#index .levelArea h3 {
	margin-top: 60px;
}
#index .levelArea .tab-container {
	margin-top: 60px;
}
#index .levelArea .tab-container ul {
	margin-top: 30px;
	margin-bottom: 10px
}
#index .levelArea .tab-container li {
	float: left;
}
#index .levelArea .tab-container li + li {
	margin-left: 20px;
}
#index .levelArea .tab-container div {
	color: #fff;
	font-size: 26px;
	text-align: center;
	height: 461px;
}
#index .levelArea .tab-container div p + p {
	margin-top: 10px;
}
#index .levelArea .tab-container div span {
	font-size: 18px;
	margin-left: 10px;
}
#index .levelArea .tab-container div#tabs5 span {
	width: 500px;
	display: inline-block;
}
/*タブ アクティブ時の画像設定*/
#index .levelArea .tab-container li.active:before {
	display: block;
	position: absolute;
	top: 0;
	width: 176px;
	height: 110px;
}
#index .levelArea .tab-container li.level1.active:before {
	content: url(/tyo/tour/tour_special/aurora/images_new/level1_on.png);
}
#index .levelArea .tab-container li.level2.active:before {
	content: url(/tyo/tour/tour_special/aurora/images_new/level2_on.png);
}
#index .levelArea .tab-container li.level3.active:before {
	content: url(/tyo/tour/tour_special/aurora/images_new/level3_on.png);
}
#index .levelArea .tab-container li.level4.active:before {
	content: url(/tyo/tour/tour_special/aurora/images_new/level4_on.png);
}
#index .levelArea .tab-container li.level5.active:before {
	content: url(/tyo/tour/tour_special/aurora/images_new/level5_on.png);
}

/* オーロラの違いエリア
-------------------------------------------------------- */
#index .differenceArea {
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_blue.jpg) repeat top center;
	padding: 80px 0 50px;
	min-width: 960px;
}
#index .differenceArea .ttlBox {
	margin: 40px 0 0 170px;
}
#index .differenceArea .ttlBox div {
	width: 388px;
	float: left;
}
#index .differenceArea .ttlBox div + div {
	margin-left: 10px;
}
#index .differenceArea th {
	width: 165px;
}
#index .differenceArea td {
	width: 396px;
}
#index .differenceArea .linkBox {
	text-align: center;
	font-size: 14px;
	margin-left: 168px;
	margin-top: -5px;
}
#index .differenceArea .linkBox div {
	width: 388px;
	float: left;
}
#index .differenceArea .linkBox div + div {
	margin-left: 9px;
}
#index .differenceArea .linkBox a {
	color: #013e9a;
	display: inline-block;
	margin-top: 10px;
}

/****************************************
page
*****************************************/
.page .headContents {
	height: 250px;
	min-width: 960px;
}
/* 地方の紹介エリア
-------------------------------------------------------- */
.page .locationArea {
	background:  url(/tyo/tour/tour_special/aurora/common/images/bg_section_btm.png) repeat-x bottom center, url(../common/images/bg_snow_blue.jpg) repeat-y center top #2f8ebb;
	padding-bottom: 180px;
	min-width: 960px;
}
/*国名タイトル*/
.page .countryBox {
	background-color: rgba(3,27,57,0.5);
	text-align: center;
	padding: 40px 0;
}
.page .mapBox {
	position: absolute;
	bottom: 0;
	right: 0;
}
/*2カラム 地方紹介の基本のボックス*/
.page .localBox {
	margin-top: 50px;
}
.page .localBox div {
	float: left;
}
.page .localBox.img_L .img {
	margin-right: 30px;
}
.page .localBox.img_R .img {
	margin-left: 30px;
}
.page .localBox .img {
	width: 350px;
}
.page .localBox .txt {
	width: 580px;
	color: #fff;
	line-height:1.6;
}
.page .localBox .txt h3 {
	color: #fff;
	font-size: 26px;
	background: url(/tyo/tour/tour_special/aurora/common/images/border_h3.png) no-repeat bottom center;
	width: 580px;
	height: 38px;
	margin-bottom: 10px;
}
.page .localBox .txt h3:before {
	content: url(/tyo/tour/tour_special/aurora/common/images/icon_h3.png);
	display: inline-block;
	width: 13px;
	height: 13px;
	/*vertical-align: middle;*/
	margin-right: 15px;
}
.page .localBox .txt h3 + p {
	margin-bottom: 10px;
	font-size: 120%;
}
/*背景茶色のボックス*/
.page .checkpointBox {
	margin-top: 30px;
}
.page .checkpointBox .bgBox {
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_check.jpg) repeat top center;
}
.page .checkpointBox:before {
	content: "";
	display: block;
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_check_top.png) repeat-x top center;
	height: 11px;
}
.page .checkpointBox:after {
	content: "";
	display: block;
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_check_btm.png) repeat-x bottom center;
	height: 11px;
}
.page .checkpointBox .boxInner {
	margin: 0 40px 0px;
}
.page .checkpointBox h4 {
	margin-bottom: 10px;
}
.page .checkpointBox .txt,
.page .checkpointBox .img {
	float: left;
}
.page .checkpointBox .ttl {
	color: #2f8ebb;
	margin-bottom: 10px;
	font-weight:bold;
}
.page .checkpointBox .ttl + p {
	font-size: 14px;
	line-height:1.6;
}
/*ポイント数ごとのスタイル*/
.page .checkpointBox .point01.num .ttl:before {
	content: url(/tyo/tour/tour_special/aurora/common/images/icon_check01.png);
	display: inline-block;
	height: 51px;
	vertical-align: middle;
	margin-right: 25px;
}
.page .checkpointBox .point02.num .ttl:before {
	content: url(/tyo/tour/tour_special/aurora/common/images/icon_check02.png);
	display: inline-block;
	height: 51px;
	vertical-align: middle;
	margin-right: 25px;
}
.page .checkpointBox .point03.num .ttl:before {
	content: url(/tyo/tour/tour_special/aurora/common/images/icon_check03.png);
	display: inline-block;
	height: 51px;
	vertical-align: middle;
	margin-right: 25px;
}
.page .checkpointBox .point05.num .ttl:before {
	content: url(/tyo/tour/tour_special/aurora/common/images/icon_check05.png);
	display: inline-block;
	height: 51px;
	vertical-align: middle;
	margin-right: 25px;
}
/* 主な見どころエリア
-------------------------------------------------------- */
.page .highlightAera {
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_blue.jpg) repeat top center;
	padding: 50px 0 80px;
	min-width: 960px;
}
.page .highlightAera h3 {
	text-align: center;
	margin-bottom: 50px;
}
.page .highlightAera .colBox .txtBox {
	margin: 15px;
}
.page .highlightAera .colBox .txtBox .txt {
	font-size:14px;
	line-height:1.5;
}
.page .highlightAera .colBox .img {
	height: 160px;
	overflow: hidden;
	position: relative;
}
.page .highlightAera .colBox .img img {
	position: absolute;
	bottom: 0;
}
.page .highlightAera .colBox .ttl {
	font-weight: bold;
	color: #1d7d94;
	font-size: 15px;
	margin-bottom: 10px;
}

/* 嬉しい特典
-------------------------------------------------------- */
.page .tokuten {
	margin: -30px 0 -80px;
	padding: 0 0 100px;
}
.page .tokuten_point {
	width:537px;
	margin:0 auto 20px;
}
.page .tokuten_point p {
	width:480px;
	margin:10px auto 0;
	font-size:14px;
	line-height:1.5;
}
.page .tokuten_point p span {
	font-weight:bold;
}

#canadian .tokuten {
	background: url(/tyo/tour/tour_special/aurora/images_new/canadian/bg_tokuten.png) no-repeat 0 100px;
}
#alaska .tokuten {
	background: url(/tyo/tour/tour_special/aurora/images_new/alaska/bg_tokuten.png) no-repeat 20px 200px;
}


/****************************************
#finland フィンランド専用スタイル
*****************************************/
#finland .headContents {
	background: url(/tyo/tour/tour_special/aurora/images_new/finland/mv.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}
#finland .checkpointBox .point01 .txt {
	width: 507px;
}
#finland .checkpointBox .point01 .img {
	margin: -70px 0 0 10px;
}
#finland .checkpointBox .point02 .txt {
	width: 543px;
}
#finland .checkpointBox .point02 .img {
	margin: -20px 40px 0 0;
}
#finland .checkpointBox .point03 .txt {
	width: 503px;
}
#finland .checkpointBox .point03 .img {
	margin: -20px 20px 0 0;
}
/****************************************
各ページ 専用スタイル
*****************************************/
#iceland .headContents {
	background: url(/tyo/tour/tour_special/aurora/images_new/iceland/mv.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}

#greenland .headContents {
	background: url(/tyo/tour/tour_special/aurora/images_new/greenland/mv.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}
#greenland .highlightAera .col3 {
	width: 630px;
	margin: 0 auto;
}
#greenland .tourList {
	width: 322px;
	margin: 0 auto;
}

#sweden .headContents {
	background: url(/tyo/tour/tour_special/aurora/images_new/sweden/mv.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}
#sweden .checkpointBox .point01 .txt {
	width: 506px;
}
#sweden .checkpointBox .point01 .img {
	margin: 0 20px 0 0;
}
#sweden .checkpointBox .point02 {
	width: 920px;
}
#sweden .checkpointBox .point02 .txt {
	width: 526px;
	margin: 50px 0 0 0px;
}
#sweden .checkpointBox .point02 .img {
	margin: -30px 0 0 20px;
}


#canadian .headContents {
	background: url(/tyo/tour/tour_special/aurora/images_new/canadian/mv.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}

#alaska .headContents {
	background: url(/tyo/tour/tour_special/aurora/images_new/alaska/mv.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
}
#alaska .locationArea.area02 {
	background:  url(/tyo/tour/tour_special/aurora/common/images/bg_section_btm.png) repeat-x bottom center,
	url(/tyo/tour/tour_special/aurora/common/images/bg_jagged_btm.png) repeat-x top center,
	url(/tyo/tour/tour_special/aurora/common/images/bg_snow_blue.jpg) repeat-y center top #2f8ebb;
	padding: 100px 0 180px;
	min-width: 960px;
}
#alaska .checkpointBox .point01 .txt {
	width: 493px;
}
#alaska .checkpointBox .point01 .img {
	margin: -90px 0 0 30px;
}
/*パンフレット特典削除時用スタイル*/
/*#alaska .infoArea {
	margin-top: 0;
}
#alaska .infoArea:before {
	content: none;
}
#alaska .infoArea h3 {
	margin-top: 0;
}*/
/****************************************
#kiso 基本情報専用スタイル
*****************************************/
#kiso .headContents {
	height: 420px;
	min-width: 960px;
	text-align: center;
	background: url(/tyo/tour/tour_special/aurora/images_new/kiso/mv_01.jpg) no-repeat center center;
	-webkit-background-size : cover;
	background-size: cover;
	color: #fff;
	line-height: 1.6;
	letter-spacing: 0.5px;
}
#kiso h3 {
	text-align: center;
	margin-bottom: 40px;
}
/* オーロラ基礎知識エリア
-------------------------------------------------------- */
#kiso .kisoArea {
	padding: 80px 0;
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_snow.jpg) repeat top center;
}
#kiso .kisoArea .col2 {
	font-size: 14px;
}
#kiso .kisoArea .col2 .topic {
	margin-bottom: 20px;
}
#kiso .kisoArea .col2 .topic h4 {
	font-size: 17px;
	font-weight: bold;
	color: #0c3d73;
	margin-bottom: 15px;
}
#kiso .kisoArea .col2 .topic h4:before {
	content: url(../images_new/kiso/icon_kiso_01.png);
	display: inline-block;
	vertical-align: middle;
	padding-right: 5px;
}
#kiso .checkpointBox .point01 .txt {
	width: 507px;
}
#kiso .checkpointBox .point01 .img {
	margin: -50px 0 0 30px;
}
#kiso .checkpointBox .point02 .txt {
	width: 505px;
}
#kiso .checkpointBox .point02 .img {
	margin: -40px 40px 0 0;
}
#kiso .checkpointBox .point03 {
	margin: 0 0 0 40px;
}
#kiso .checkpointBox .point03 .txt {
	width: 543px;
}
#kiso .checkpointBox .point03 .img {
	margin: -30px 0 0 53px;
}
/* オーロラ観測時の服装についてエリア
-------------------------------------------------------- */
#kiso .clothingArea {
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_blue.jpg) repeat top center;
	padding: 80px 0;
}
#kiso .clothingArea h3 + p {
	text-align: center;
	color: #0c3d73;
}
#kiso .clothingArea .colBox + .colBox {
	width: 685px;
	margin-left: 30px;
}
#kiso .clothingArea th,
#kiso .clothingArea td {
	border: 5px solid #D7EAF1;
}
#kiso .clothingArea th {
	width: 165px;
}
#kiso .clothingArea td {
	width: 515px;
}
/* 写真撮影のアドバイスエリア
-------------------------------------------------------- */
#kiso .photoArea {
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_jagged_btm.png) repeat-x top center,url(/tyo/tour/tour_special/aurora/images_new/bg_star.jpg) repeat bottom center;
	padding: 90px 0;
	min-width: 960px;
}
#kiso .photoArea .imgBox {
	width: 350px;
}
#kiso .photoArea .txtBox {
	width: 610px;
	height: 540px;
	background-color: #fff;
	font-size: 14px;
	position:relative;
}
#kiso .photoArea .txtBox .ttl {
	background-color: #1d7d94;
	padding: 5px 20px;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
}
#kiso .photoArea .txtBox .ttl img {
	margin-right: 10px;
	vertical-align: middle;
}
#kiso .photoArea .colBox ul {
	padding: 15px;
}
#kiso .photoArea .txtBox .blueBox {
	padding: 20px;
	margin: 20px 0 0;
	position:absolute;
	bottom:0;
}
#kiso .photoArea .txtBox .blueBox li {
	font-size: 13px;
	list-style-type: disc;
	margin-left: 15px;
}
#kiso .tourArea {
	padding-top: 70px;
	background: url(/tyo/tour/tour_special/aurora/common/images/bg_snow.jpg) repeat top center;
}
#kiso .infoArea:before {
	content: none;
}
#kiso .infoArea {
	margin-top: 0;
}
#kiso .infoArea h3 {
	margin-top: 0;
}
/****************************************
#canadian カナダ専用スタイル
*****************************************/

#canadian .locationArea .highlightAera {
    background: url(/tyo/tour/tour_special/aurora/common/images/bg_section_btm.png) repeat-x top center;
	padding-top: 160px;
}
#canadian .checkpointBox .point00 .img {
    margin: -120px 0 0 40px;
}
#canadian .checkpointBox .point00 .txt {
    width: 500px;
}
#canadian .checkpointBox .point00.num .ttl:before {
    content:"";
	margin:0;
}
#canadian .checkpointBox .point02.num .ttl:before {
	content: "";
    margin: 0;
    vertical-align: inherit;
    line-height: 1.5;
}
#canadian .checkpointBox .point00.num {
    padding:20px 0;
}
#canadian .checkpointBox .point01 .txt {
    width: 480px;
	margin-right:20px;
}
#canadian .checkpointBox .point01 .img {
	width: 367px;
    float: left;
    margin-top: -90px;
}
#canadian .checkpointBox .point01 .img p.record{
	background: #d9eaf1;
    padding: 15px 20px;
    font-size: 85%;
    line-height: 1.6;
    margin-top: 10px;
}
#canadian .checkpointBox .point02 .txt {
    margin-top: -50px !important;
}
#canadian .checkpointBox .point02 .ttl {
	padding-left:70px;
    background: url(/tyo/tour/tour_special/aurora/common/images/icon_check02.png) 0 100% no-repeat;
}

#canadian .checkpointBox .point02 .img_sub {
	overflow:hidden;
	zoom:1;
	float: left;
    margin: 20px 0 0;
}
#canadian .checkpointBox .point02 .img_sub img {
	width:416px;
	float:left;
	margin:0 20px 0 0;
}
#canadian .checkpointBox .point02 .img_sub p {
	width:440px;
	float:left;
	margin:20px 0 0;
	font-size: 85%;
    line-height: 1.6;
}
#canadian .checkpointBox .point02  .point02_sub{
	margin-top: 10px;
  	width: 890px;
	display: inline-table;
	background: #d9eaf1;
  	padding: 15px 25px;
  	font-size: 85%;
}
#canadian .checkpointBox .point02  .point02_sub p{
	width: 332px;
	float: left;
}
#canadian .checkpointBox .point02  .point02_sub dl{
	width: 480px;
	float: right;
}
#canadian .checkpointBox .point02 dt{
	font-size: 100%;
	color: #2f8ebb;
	font-weight: bold;
	margin-bottom: 6px;
	font-size: 120%;
}

#canadian .checkpointBox .point03 p {
	width:530px;
	float:left;
    margin: 0 40px 10px 0;
}
#canadian .checkpointBox .point03 .img {
	width:297px;
	float:left;
	margin-top: -80px;
}
#canadian .checkpointBox .point04 {
    padding-bottom:20px!important;
}
#canadian .checkpointBox .point04 .img {
    margin-top:-100px
}
#canadian .checkpointBox .point04 .ttl {
    background: url(/tyo/tour/tour_special/aurora/common/images/icon_check04.png) 300px 50% no-repeat;
    padding-left: 360px;
    height: 51px;
    line-height: 3.0;
	font-size: 100%;
}
#canadian .checkpointBox .point04 p {
	font-size: 85%;
    line-height: 1.6;
	padding-left:300px;
}
#canadian .checkpointBox .point05 p {
	width: 570px;
	float: left;
	margin: 0 40px 10px 0;
}

#canadian .checkpointBox .point05 .img {
	width: 257px;
	float: left;
	margin-top: -65px;
}
#canadian .locationArea.area02 {
    background: url(/tyo/tour/tour_special/aurora/common/images/bg_section_btm.png) repeat-x bottom center,
 url(/tyo/tour/tour_special/aurora/common/images/bg_jagged_btm.png) repeat-x top center,
 url(/tyo/tour/tour_special/aurora/common/images/bg_snow_blue.jpg) repeat-y center top #2f8ebb;
    padding: 100px 0 180px;
    min-width: 960px;
}

/****************************************
#インデックス 下部バナー
*****************************************/
.bnr_area{
    text-align: center;
    margin-bottom: 20px;
}
.bnr_area:has(> :nth-child(2)) {
	margin-bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.bnr_area a img {
	height: auto;
}