/* エリアガイドTOP ------------------------------------------*/
.areaguide_top{margin-bottom: 1em;}
.areaguide_top.bg_go{padding-top: 2em;margin-bottom: 2em;}
.areaguide{margin-bottom: 2em;}
.areaguide_wrap{}
.areaguide_co{
margin: 0 8px 2em;
width: calc(100% / 3 - 16px);
}
.areaguide_co a{
color: #000;
text-decoration: none;
}
.areaguide_img{
position: relative;
width: 100%;
height: 170px;
overflow: hidden;
display: block;
}
.areaguide_img img{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
}
.areaguide_img img.areaguide_uae{}
.areaguide_img img.areaguide_egypt{top: 63%;}
.areaguide_img img.areaguide_morocco{top: 63%;}
.areaguide_img img.areaguide_tunisia{}
.areaguide_img img.areaguide_kenya{top: 35%;}
.areaguide_img img.areaguide_jordan{top: 59%;}
.areaguide_img img.areaguide_turkey{top: 53%;}
.areaguide_img img.areaguide_southern-africa{top: 38%;}
.areaguide_img img.areaguide_malaysia{top: 41%;}
.areaguide_img img.areaguide_thailand{top: 53%;}
.areaguide_img img.areaguide_cambodia{top: 68%;}
.areaguide_img img.areaguide_indonesia{top: 33%;}
.areaguide_img img.areaguide_vietnam{top: 60%;}
.areaguide_img img.areaguide_peru{top: 66%;}
.areaguide_img img.areaguide_argentina{top: 62%;}
.areaguide_img img.areaguide_hawaii{top: 35%;}
.areaguide_img img.areaguide_sri-lanka{top: 65%;}
.areaguide_img img.areaguide_uzbekistan{}

.areaguide_co h3{
position: absolute;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 6px #000;
background: rgba(0, 0, 0, 0.5);
width: 100%;
bottom: 0;
margin: 0;
padding: 0.2em 0.5em;
font-size: 1.2em;
}
.areaguide_img::after {
font-family: "Font Awesome 5 Free";
position: absolute;
color: #fff;
content: "\f054";
font-weight: bold;
right: 0.5em;
bottom: 0.5em;
}
.areaguide_text{padding:0.3em 0em 0;}

@media screen and (max-width:768px){
.areaguide_top.bg_go{margin: -1em 0 1em;padding-top: 1em;}
.areaguide_co{width: 100%;margin: 0 0 2em;}
.areaguide_img{height: 150px;}
.areaguide_co h3{font-size: 1.1em;}
.areaguide_text{padding: 0.3em 0em 0;}
}

/* エリア基本情報 ------------------------------------------*/
.areaguide.bg_go{padding-top: 2em;overflow: hidden;}
.areaguide.bg_hawaii{
padding: 2em 0 0;
overflow: hidden;
margin-bottom: 0;
background: linear-gradient(to bottom, #eaf6ff, #fff);
}
.areaguide dl{display: flex;flex-wrap: wrap;margin: 0.5em 1em 3em;}
.areaguide dt,.areaguide dd{padding: 10px 15px;margin-bottom: 1px;}
.areaguide dt{background: #faf6eb;width: 230px;font-weight: bold;}
.areaguide dd{width: calc(100% - 230px);border-bottom: 1px solid #ccc;}
.area_flag{width: 120px;border: solid 1px #dcdcdc;}
.flag_wrap{display: flex;flex-wrap: wrap;}
.flag_wrap div{text-align: center;margin-right: 28px;}
.flag_wrap p{font-size: 0.9em;margin-top: 2px;}
.plug_wrap{
display: flex;
flex-wrap: wrap;
margin: 0.5em 0 0;
}
.plug_wrap img{
width: calc(100% / 8 - 5px);
margin-right: 5px;
}
.op03{opacity: 0.3;}
table.area_temp{
text-align: center;
font-size: 0.9em;
margin-top: 0.5em;
}
ul.decimal{padding-left: 1.3em;}
.decimal li{list-style: decimal;}
.c_name{
font-weight: bold;
color: #7e1c33;
}
.area_co{
justify-content: space-between;
margin: 1em 0 3em;
align-items: center;
}
.area_co2{
justify-content: space-between;
margin: 0 0;
align-items: center;
}
.area_co h3,
h3.h3_areaguide  {
width: 100%;
border-left: 10px solid #926f05;
padding-left: 0.5em;
margin-bottom: 0.8em;
}
h3.h3_areaguide {margin: 1em 0;}
.area_co h4{
font-size: 1.2em;
border-bottom: solid 1px #926f05;
margin-bottom: 0.3em;
color: #926f05;
}
.area_img{width: 45%;}
.area_img .movie_wrap{margin-bottom: 1em;}
.area_text{width: 51%;margin-bottom: 2em;}

.area_img2{width: 20%;text-align: center;}
.area_text2{width: 75%;}

.area_img100{width: 100%;margin-bottom: 1em;}
.area_img100 .movie_wrap{
position: unset;
padding-bottom: 0;
overflow: unset;
height: 350px;
}
.area_img100 iframe{
width: 100%;
height: 350px;
position: unset;
}
.area_text100{}

.area_co5_wrap{margin: 1em 0 -1em;}
.area_co5{
width: calc(100% / 3 - 2%);
margin: 0 1% 2em;
}
.area_text_title{
font-weight: bold;
font-size: 1.1em;
margin: 0.4em 0 0;
}

/*ペトラ遺跡 ------------*/
.jordan_wrap{align-items: flex-start;}
.area_text_48{width: 48%;margin-bottom: 2em;}
.jordan1{order: 1;}
.jordan2{order: 2;}
.jordan3{order: 3;}
.jordan4{order: 4;}
.jordan5{order: 5;}
.jordan6{order: 6;}
.jordan7{order: 7;}
.jordan8{order: 8;}

/*ゴルフクラブ紹介 ------------*/
.golfclub{
background: #fff;
margin: -1em 0 3em;
/*border-radius: 0 0 10px 10px;*/
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}
.h3_golf{
width: 100%;
background: #005535;
padding: 0.5em 0.6em;
display: flex;
align-items: center;
border-top: solid 2px;
border-bottom: solid 2px;
border-image: linear-gradient(to right, #b37922 0%,#f4d48d 25%,#f4f5c9 50%,#f4d48d 75%,#b37922 100%) 1;
}
.h3_golf img{width: 40px;margin-right: 3px;}
.h3_golf h3{
font-size: 1.5em;
color: #fff;
margin: 0;
}
.golfclub h4{
width: 100%;
border-left: 10px solid #926f05;
padding-left: 0.5em;
font-size: 1.2em;
margin: 0.8em 0 0 1em;
}
ul.golfclub_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 1em 2em 1em;
}
.golfclub_list li{
width: 49.5%;
margin-bottom: 0.5em;
position: relative;
padding-left: 1.3em;
}
.golfclub_list li a{text-decoration: none;}
.golfclub_list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 20px;
height: 20px;
background: url("../img/icon_golf_b.png") no-repeat center / contain;
opacity: 0.5;
}

@media screen and (max-width:768px){
.areaguide dl{margin: 0.5em 0 4em;}
.areaguide dt,.areaguide dd{
width: 100%;
margin-bottom: 0;
padding: 6px 10px;
}
.areaguide dd{border-bottom: none;margin-bottom: 1em;}
.area_flag{width: 100px;}
.flag_wrap div{width: calc(100% / 3 - 10px);margin: 0 10px 10px 0;}
.flag_wrap p{font-size: 0.8em;}
.plug_wrap img{width: calc(100% / 5 - 5px);}
.op03{display: none;}
table.area_temp{min-width: 600px !important;}
.area_co{margin: 0em auto 2.5em;width: 98%;}
.area_co2{margin: 0em auto 2.0em;width: 98%;}
.area_co h4{font-size: 1.1em;border: none;}
.area_img{width: 100%;margin-bottom: 1em;}
.area_text{width: 100%;margin-bottom: 0;}

.area_img2{width: 60%;margin: 1em auto;}
.area_text2{width: 100%;margin-bottom: 0;}

.area_img .movie_wrap{margin-bottom: 1em;}
.area_img100 .movie_wrap{
position: relative;
padding-bottom: 56.5%;
height: 0;
overflow: hidden;
}
.area_img100 iframe{
position: absolute;
width: 100%;
height: 100%;
}
.area_co5_wrap{margin: 1em 0 0em;}
.area_co5{
width: 100%;
margin: 0 auto 0.5em;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
}
.area_co5 img{order: 2;width: 36%;}
.area_text_title{order: 1;font-size: 1em;margin: 0;}
.area_co5 .s09{order: 3;width: 61%;}

/*ペトラ遺跡 ------------*/
.jordan_wrap{margin: 0em auto 0.5em;}
.area_text_48{width: 100%;}
.jordan1{order: 2;margin-bottom: 2em;}
.jordan2{order: 1;}
.jordan3{order: 3;}
.jordan4{margin-bottom: 2em;}

/*ゴルフクラブ紹介 ------------*/
.golfclub{margin: 0em 0 3em;}
.h3_golf{position: relative;display: unset;}
.h3_golf img{width: 35px;position: absolute;top: 5px;}
.h3_golf h3{font-size: 1.2em;margin-left: 1.9em;}
ul.golfclub_list{font-size: 1em;margin: 1em 1em 0.7em;}
.golfclub_list li{width: 100%;margin-bottom: 0.7em;}
.golfclub_list li::before {top: 3px;}
}

/* エリアガイド一覧　ページ末 ------------------------------------------*/
.otherarea_list{margin-bottom: 1em;}
.otherarea_list .content{
display: flex;
flex-wrap: wrap;
border-top: solid 1px #dcdcdc;
padding: 1.5em 0 1em;
}
.otherarea_list h3{width: 16%;font-size: 1.0em;}
.otherarea_list_wrap{margin: 0 0 1em;width: 84%;}
.otherarea_list_wrap div{width: calc(100% / 5);margin-bottom: 5px;}
.otherarea_list_wrap div a{display: flex;align-items: center;text-decoration: none;}
.otherarea_list_wrap div img{width: 30px;margin-right: 5px;border: solid 1px #dcdcdc;}

@media screen and (max-width:768px){
.otherarea_list{margin-bottom: 0;}
.otherarea_list .h2_line_wrap{margin-bottom: 0.5em;}
.otherarea_list h3{width: 100%;}
.otherarea_list_wrap{width: 100%;}
.otherarea_list_wrap div{width: calc(100% / 2);font-size: 0.9em;margin-bottom: 10px;}
.otherarea_list_wrap div img{}
}

/*AMANIがおすすめ ------------*/
.reco_wrap{}
.bnr_recommend{
width: 600px;
margin: 3em auto 0em;
}
.bnr_recommend a{
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
display: block;
}
.bnr_recommend img{
position: absolute;
transform: translate(-50%, -50%);
top: 38%;
left: 50%;
width: 100%;
}
.bnr_recommend h4{
position: absolute;
background: rgba(255, 255, 255, 0.7);
width: 73%;
margin: 0;
padding: 0.2em 1.2em;  
text-align: center;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 1.8em;
border: none;
}
.bnr_recommend h4 span{display: block;font-size: 0.8em;}
.bnr_recommend p{margin-top: 0.3em;}
.link_recommend{
width: 42%;
margin: 0.5em 4% 1em;
}
.link_recommend a{
display: block;
font-size: 1.1em;
text-align: center;
padding: 0.8em 1em;
color: #7e1c33;
text-decoration: none;
font-weight: bold;
border: solid 2px #7e1c33;
border-radius: 8px;
background: linear-gradient(#fff, #f1f1f1);
position: relative;
}
.link_recommend a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
font-size: 1em;
right: 1em;
top: 50%;
transform: translate(0%, -50%);
}
.link_recommend a:hover{
color: #fff;
background:#7e1c33;
opacity: 1;
}

.h2_reco{}
.h2_reco h2{
position: relative;
overflow: hidden;
padding: 0.2em 2em 0em 270px;
border-bottom: 1px solid #926f05;
margin-bottom: 1em;
}
.h2_reco h2::before{
position: absolute;
top: -240%;
left: -128px;
width: 380px;
height: 390%;
content: '';
transform: rotate(25deg);
background: #926f05;
}
.h2_reco h2 span{
position: absolute;
z-index: 1;
left: 0;
top: 8px;
display: block;
padding-left: 17px;
color: #fff;
font-size: 0.8em;
}
.p_reco{
font-size: 1.1em;
font-weight: bold;
margin: -0.3em 0.5em 1em;
color: #7e1c33;
text-decoration: underline;
}
ul.ul_reco{counter-reset: list;padding-left: 1em;}
.ul_reco li{
position: relative;
margin: 0 0 0.5em 1.5em;
padding-left: 0.2em;
}
.ul_reco li::before {
counter-increment: list;
content: counter(list);
position: absolute;
left: -2em;
width: 1.7em;
height: 1.7em;
background: #faf6eb;
text-align: center;
color: #926f05;
font-size: 1em;
font-weight: bold;
}

@media screen and (max-width:768px){
.bnr_recommend{width: 100%;margin: 2em auto 0em;}
.bnr_recommend a{height: 160px;}
.bnr_recommend img{top: 33%;}
.bnr_recommend h4{width: 80%;font-size: 1.3em;padding: 0.2em 0.6em;}
.bnr_recommend h4 span{font-size: 0.9em;}
.link_recommend{width: 90%;margin: 0.5em auto 1em;}
.h2_reco{}
.h2_reco h2{
padding: 0;
position: unset;
border-top: 1px solid #926f05;
border-bottom: none;
}
.h2_reco h2::before{display: none;}
.h2_reco h2 span{
position: relative;
overflow: hidden;
margin-bottom: 0.4em;
font-size: 16px;
padding-left: 10px;
line-height: 2;
top: 0;
}
.h2_reco h2 span::before{
position: absolute;
top: -60px;
left: -20px;
width: 200px;
height: 200px;
content: '';
transform: rotate(25deg);
background: #926f05;
z-index: -1;
}
.p_reco{font-size: 1.0em;font-weight: normal;margin: -0.3em 0em 1em;}
ul.ul_reco{padding-left: 0.5em;}
}

/* スライダーTOP ------------------------------------------*/
.area_top{
background: #f1f1f1;
margin-bottom: 3em;
}
.area_top h1{
background: #fff;
padding: 1em 0;
text-align: center;
}
.area_top h1 span{
font-size: 0.8em;
margin: 0 1em;
}
.area_content {
position: relative;
margin:0 auto 0;
max-width: 1100px;
}
.swiper{
text-align: center;
cursor: grab;
}
.swiper:active{cursor: grabbing;}
.swiper .swiper-slide img {
max-width: 100%;
width: 100%;
height: auto;
}
#thumbs {
height: 10%;
box-sizing: border-box;
padding: 10px 0;
}
#thumbs .swiper-slide {
width: 16%;
height: auto;
/*opacity: 0.3;*/
cursor: grab;
background: #fff;
}
#thumbs .swiper-slide img{opacity: 0.3;}
#thumbs .swiper-slide:active {cursor: grabbing;}
#thumbs .swiper-slide-active img{
opacity: 1;
}
.swiper-blind-left,.swiper-blind-right {
position: absolute;
/*width: 11.55%;*/
width: 8.40%;
height: 100%;
display: block;
top: 0;
background: rgba(256,256,256,0.5);
/*
background: rgba(0,0,0,0.4);
background: rgba(255,255,255,.7);
*/
z-index: 5;
}
.swiper-blind-left {left: 0;}
.swiper-blind-right {right: 0;}

.area_content .swiper-button-prev::after, 
.area_content .swiper-button-next::after{
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: bold;
font-size: 3em;
color: #fff;
}
.area_content .swiper-button-prev::after{transform: rotate(180deg);}
.area_content .swiper-button-next{right: 25px;left: auto;}
.area_content .swiper-button-prev{left: 25px;right: auto;}

@media screen and (max-width:768px){
.swiper-blind-left,.swiper-blind-right {
display: none;
}
.area_top{margin-bottom: 2em;}
.area_top h1{font-size: 1.5em;padding: 0.8em 0;}
.area_top h1 span{font-size: 0.7em;display: block;}
.area_content {width: 100%;max-width: unset;}
#thumbs .swiper-slide {width: 26%;}
.area_content .swiper-button-prev::after, 
.area_content .swiper-button-next::after{font-size: 2.3em;}
.area_content .swiper-button-next{right: 5px;}
.area_content .swiper-button-prev{left: 5px;}
}

/* スライダー2 ------------------------------------------*/
.swiper2.area_slide{}
.swiper2-pagination{text-align: center;margin-top: 0.3em;}
.swiper2-pagination .swiper-pagination-bullet{
width: 12px;
height: 12px;
margin: 0 5px;
}
.swiper2-pagination .swiper-pagination-bullet-active{background: #926f05;}
.swiper2.area_slide .swiper-button-prev::after,
.swiper2.area_slide .swiper-button-next::after{
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: bold;
font-size: 2.5em;
color: #fff;
}
.swiper2.area_slide .swiper-button-prev::after{transform: rotate(180deg);}
.swiper2.area_slide .swiper-button-prev,.swiper2.area_slide .swiper-button-next{top: 50%;}

@media screen and (max-width:768px){
}

/* slide ------------------------------------------*/
.swiper.air_slide{
width: 100%;
margin: 0em auto 0em;
padding-bottom: 2.5em;
}
.swiper.air_slide .swiper-slide{margin-right: 1px;}
.swiper.air_slide .swiper-pagination-bullet,
.swiper.air_slide .swiper-pagination-bullet-active{background: #926f05;}

.swiper.air_slide .swiper-button-prev::after,
.swiper.air_slide .swiper-button-next::after{
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: bold;
font-size: 2.5em;
color: #fff;
}
.swiper.air_slide .swiper-button-prev::after{transform: rotate(180deg);}
.swiper.air_slide .swiper-button-prev,.swiper.air_slide .swiper-button-next{top: 43%;}

@media screen and (max-width:768px){
.swiper.air_slide{}
.swiper.air_slide.ord2{margin-bottom: 0;}
.swiper.air_slide .swiper-slide{margin-right: 0;}
}

/*タブ切り替え全体のスタイル----------------------------------------------------*/
/*ラジオボタンを全て消す*/
input[name="tab_item"] { display: none; }

.tabs {
width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
/*タブのスタイル*/
.tab_item {
width: calc(100% / 2 - 6px);
background-color: #926f05;
display: block;
text-align: center;
padding: 0.6em 1em 0.5em;
font-size: 1.1em;
font-weight: bold;
border-radius: 6px 6px 0 0;
cursor: pointer;
color: #fff;
border: solid 1px #926f05;
border-bottom: none;
margin: 0 3px;
}
.tab_item:hover { opacity: 0.6; }
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
width: 100%;
padding: 3em 0em 0;
clear: both;
overflow:hidden;
/*border-top: 1px solid #0d67e2;*/
}
/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content {display: block; }
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #faf6eb;
color: #926f05;
border: solid 1px #926f05;
border-bottom: none;
}
.tab_item i{margin-left: 1em;}

@media screen and (max-width: 767px) {
.tabs{width: 100%;justify-content: center;}
.tab_item {
font-size: 1em;
padding: 0.5em 0.5em 0.6em;
width: calc(100% / 2 - 12px);
margin-bottom: 0.5em;
}
.tab_item i{margin-left: 0.5em;}
/*タブ切り替えの中身のスタイル*/
.tab_content {padding: 1.5em 0em 0;border: none;}
.tabs input:checked + .tab_item{}
}
