@charset "utf-8";

/* メイン設定 */
.pc { display: none !important; }

.freeArea-direct {
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
}


article {
  min-height: unset;
}

article p {
  color: #2c1f0d;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05rem;
  text-align: justify;
  
}

#fftop_recomDetail section {
  padding: 0!important;
}

h2 {
  background: none!important;
}


.bold { font-weight: bold; }


/* フェード設定 */

.fadein {
   opacity: 0;
   transform: translateY(30px);
   transition:all 1s;
}


/* 波ループ */

@keyframes scrollAnime {
 0% {background-position: 0 0;}
 100% {background-position: -635px 0 ;}
}



/* 背景設定 */

.bg_01 {
  height: 550px;
  background-image: url(../../malta/img/main_pc_1.jpg);
  background-position: top;
  background-size: cover;
}

.bg_02 {
  min-height: 40vh;
  background-image: url(../../malta/img/main_pc_2.jpg);
  background-position: top;
  background-size: cover;
  opacity: .5;
}

.bg_03 {
  min-height: 40vh;
  background-image: url(../../malta/img/main_pc_3.jpg);
  background-position: top;
  background-size: cover;
  opacity: .5;
}

.bg_04 {
  min-height: 40vh;
  background-image: url(../../malta/img/main_pc_4.jpg);
  background-position: top;
  background-size: cover;
  opacity: .5;
}


.bg_05 {
  min-height: 40vh;
  background-image: url(../../malta/img/main_pc_5.jpg);
  background-position: top;
  background-size: cover;
  opacity: .5;
}



/* コンテンツ */



#malta {
  font-family: SourceHanSans,sans-serif;
  width: 100%;
  text-align: center;
}




/* HEAD */

.head {
  display: flex;
  flex-direction: column;
}

.head img {
  width: 90%;
  margin: 240px auto 10px auto;
}


.scroll {
  width: 10%!important;
  margin: 100px auto!important;
}












/* 基礎情報 */

.info {
  background: #fff;
  position: relative;
  padding: 50px 0 20px 0;
  z-index: 1000;
}

.info::before {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_top.png);
  animation: scrollAnime 8s linear infinite;
  height: 38px;
  top: -37px;
  left: 0;
  width: 100%;
  z-index: -1;
}

.info::after {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_bottom.png);
  animation:  scrollAnime 5s linear infinite;
  height: 37px;
  bottom: -36px;
  left: 0;
  width: 100%;
  z-index: -1;
}

.info img.title {
  width: 50%;
  margin: 0 auto 30px auto;
}



.info dl {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid #b28850;
}


.info dt, .info dt img {
  width: 100%;
  margin: auto;
}





/* 動画 */

/*! 埋め込み動画をレスポンシブ対応させる */
.video {
width: 90%;
position: relative;
height: 0;
padding: 0 10px 56.25% 10px;
margin: 0 auto;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




/* マルタ島 */

.malta_island {
  background: #fff;
  position: relative;
  padding: 50px 0 20px 0;
  z-index: 1000;
}


.malta_island::before {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_top.png);
  animation:  scrollAnime 5s linear infinite;
  height: 38px;
  top: -37px;
  left: 0;
  width: 100%;
  z-index: -1;
}


.malta_island::after {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_bottom.png);
  animation:  scrollAnime 5s linear infinite;
  height: 37px;
  bottom: -36px;
  left: 0;
  width: 100%;
  z-index: -1;
}


.malta_island img.title {
  width: 80%;
  margin: 0px auto 30px auto;
}


.malta_valletta {
  width: 100%;
  background-image: url(../../malta/img/bg_valletta_pc.png);
  background-repeat: no-repeat;
  background-position: top left;
  position: relative;
  background-size: 95%;
  margin-bottom: 50px;
}


.malta_valletta img.title {
  width: 70%;
}


.malta_valletta img {
  width: 50%;
  padding: 230px 0 0 0;
}


.malta_valletta p {
  width: 90%;
  margin: 10px auto 10px auto;
}





.malta_mdina {
  width: 100%;
  background-image: url(../../malta/img/bg_mdina_sp.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 95%;
  margin-bottom: 50px;
}



.malta_mdina img {
  width: 40%;
  padding: 250px 0 0 0;
}

.malta_mdina  p {
  width: 90%;
  margin: 10px auto 10px auto;
}


.malta_threecitys {
  width: 100%;
  background-image: url(../../malta/img/bg_threecities_sp.png);
  background-repeat: no-repeat;
  background-position: top left;
  position: relative;
  background-size: 95%;
}

.malta_threecitys img {
  width: 90%;
  padding: 250px 0 0 0;
}


.malta_threecitys p {
  width: 90%;
  margin: 10px auto 10px auto;
}




.gozo_island {
  background: #fff;
  position: relative;
  z-index: 1000;
  padding: 50px 0 20px 0;
}


.gozo_island img.title {
  width: 70%;
}



.gozo_island::before {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_top.png);
  animation:  scrollAnime 5s linear infinite;
  height: 38px;
  top: -37px;
  left: 0;
  width: 100%;
  z-index: -1;
}


.gozo_island::after {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_bottom.png);
  animation:  scrollAnime 5s linear infinite;
  height: 37px;
  bottom: -36px;
  left: 0;
  width: 100%;
  z-index: -1;
}


.gozo_citadel {
  width: 100%;
  background-image: url(../../malta/img/bg_citadel_sp.png);
  background-repeat: no-repeat;
  background-position: top left;
  position: relative;
  background-size: 95%;
  margin-bottom: 50px;
}


.gozo_citadel img {
  width: 70%;
  padding: 250px 0 0 0;
}


.gozo_citadel p {
  width: 90%;
  margin: 10px auto 10px auto;

}


.gozo_tapinu {
  width: 100%;
  background-image: url(../../malta/img/bg_tapinu_sp.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 95%;
}


.gozo_tapinu img {
  width: 40%;
  padding: 250px 0 0 0;
}


.gozo_tapinu  p {
  width: 90%;
  margin: 10px auto 10px auto;
}





.comino_island {
  background: #fff;
  position: relative;
  z-index: 1000;
  padding: 50px 0 20px 0;
}


.comino_island::before {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_top.png);
  animation:  scrollAnime 5s linear infinite;
  height: 38px;
  top: -37px;
  left: 0;
  width: 100%;
  z-index: -1;

}


.comino_island::after {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_bottom.png);
  animation:  scrollAnime 5s linear infinite;
  height: 37px;
  bottom: -36px;
  left: 0;
  width: 100%;
  z-index: -1;
}


.comino_island img.title {
  width: 80%;
}




.comino_island_bluelagoon {
  position: relative;
}




.comino_island_bluelagoon img {
  width: 70%;
}

.comino_island_bluelagoon p {
  width: 90%;
  margin: 10px auto 10px auto;

}




/* スライダー */
.slide {
 width: 100%;
 margin: 10px 0 30px 0;
}

.slide img{
  height: 30vw; 
  max-height: 300px;
  min-height: 200px; 
}





/* プレゼント情報 */



.present::before {
  content: "";
  position: absolute;
  background-image: url(../../malta/img/wave_top.png);
  animation:  scrollAnime 5s linear infinite;
  height: 38px;
  top: -37px;
  left: 0;
  width: 100%;
  z-index: -1;
}



.present img.title {
  width: 60%;
}



.present {
  background: #fff;
  position: relative;
  padding: 30px 0 0px 0;
  z-index: 1000;
}

.present p {
  text-align: center;
  margin: 30px auto 10px auto;
}


.present_img img {
  width: 95%;
  margin: 0 auto 30px auto;
}








/* PROMOTION */

img.promo_title {
  width: 100%;
  margin: 0px auto 20px auto;
}

article.flex {
  width: 100%;
  margin: 0 auto;
}


.flex img {
  width: 100%;
  align-self: center;
}


.promo_contents {
  display: block;
}

.promo_contents img {
  display: none;
}


.promo_contents h2 {
  color: #b28850;
  font-size: 22px;
  font-family: YuMincho, 'Yu Mincho', serif;
  margin: 10px auto 10px auto!important;
  padding: 0;
}

.flex p {
  font-size: 13px;
  line-height: 1.6;
  text-align: justify;
  word-break: break-all;
  margin: 0 auto;
}

.big { font-size: 14px; }


.air_malta, .hotel_corinthia {
  width: 95%;
  border: 1.5px solid #b28850;
  padding: 30px 10px 30px 10px;
  margin: 30px auto 0 auto;
  box-sizing: border-box;
}



.air_malta a, .hotel_corinthia a {
  color: #b28850;
  font-size: 12px;
  line-height: 3;
}

/* BTN LINK */

.btn-border {
  display: inline-block;
  background-color: #bc0606;
  font-size: 23px;
  font-weight: bold;
  color: #fff;
  text-decoration: none!important;
  padding: 10px 70px;
  border-radius: 30px;
  transition: .4s;
}

.btn-border:hover {
  color: #bc0606;
}

/* POPUP */


.popup { 
  width: 85%;
  height: auto;
  background: #b28850;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px auto 30px auto;
  z-index: 10000;
  text-align: center;
  overflow-y: scroll;
}


/* チェックボックスの初期設定 */
#popup-on{
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}

/* 閉じるアイコン（右上） */
.icon-close{
  color: #fff;
  font-size: 50px;
}



/* 開くボタン */
.btn-open{
  color: #000;
  font-size: 17px;
  margin: 20px auto 50px auto;
  padding: 7px;
  text-align: center;
  transition: 0.5s;
}


/* 開くボタン */
.btn-open:hover{
  color: #b28850;
}

/* ポップアップの内容 */
.popup-content{
  color: #fff;
  font-size: 12px;
  margin: auto;
  padding: 20px;
  text-align: justify;
}


.popup-content span.bold {
 color: #fff;
 font-weight: bold;
}


img.credit {
  margin: 30px auto 0 auto;
}