@charset "utf-8";

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

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


.bold { font-weight: bold; }

/* フェード設定 */

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


/* 波ループ */

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



/* 背景設定 */

.bg_01 {
  height: 600px;
  background-attachment: fixed;
  background-image: url(../../malta/img/main_pc_1.jpg);
  background-position: center center;
}

.bg_02 {
  min-height: 50vh;
  background-attachment: fixed;
  background-image: url(../../malta/img/main_pc_2.jpg);
  background-position: center center;
  opacity: .5;
}

.bg_03 {
  min-height: 50vh;
  background-attachment: fixed;
  background-image: url(../../malta/img/main_pc_3.jpg);
  background-position: center center;
  opacity: .5;
}

.bg_04 {
  min-height: 50vh;
  background-attachment: fixed;
  background-image: url(../../malta/img/main_pc_4.jpg);
  background-position: center center;
  opacity: .5;
}


.bg_05 {
  min-height: 50vh;
  background-attachment: fixed;
  background-image: url(../../malta/img/main_pc_5.jpg);
  background-position: center center;
  opacity: .5;
}



/* コンテンツ */



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




p {
  color: #000;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05rem;
  text-align: justify;
}



/* HEAD */

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

.head img {
  width: 700px;
  margin: 200px auto 10px auto;
}


.scroll {
  width: 60px!important;
  margin: 80px auto 50px auto!important;
}












/* 基礎情報 */

.info {
  background: #fff;
  position: relative;
  padding: 30px 0 50px 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 8s linear infinite;
  height: 37px;
  bottom: -36px;
  left: 0;
  width: 100%;
  z-index: -1;
}

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



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


.info dt, .info dt img {
  width: 400px;
}


.info dd {
  width: 300px;
  align-self: center;
  margin: 0 0 0 50px;
}



/* 動画 */


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




/* マルタ島 */

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


.malta_island::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;
}


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


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


.malta_valletta {
  width: 100%;
  height: 270px;
  background-image: url(../../malta/img/bg_valletta_pc.png);
  background-repeat: no-repeat;
  background-position: left;
  position: relative;
}


.malta_valletta img.title {
  width: 350px;
}


.malta_valletta img {
  width: 200px;
  margin: 50px 20px 10px 640px;
}


.malta_valletta p {
  margin: 10px 50px 50px 430px;
}


.malta_valletta::before {
  position: absolute;
  content: "";
  background: #fafaf9;
  height: 350px;
  top: 70px;
  left: 40px;
  width: 90%;
  z-index: -100;
}


.malta_mdina {
  width: 100%;
  height: 300px;
  background-image: url(../../malta/img/bg_mdina_pc.png);
  background-repeat: no-repeat;
  background-position: right;
}



.malta_mdina img {
  width: 180px;
  margin: 40px 660px 10px 40px;
}

.malta_mdina  p {
  margin: 10px 400px 50px 70px;
}


.malta_threecitys {
  width: 100%;
  height: 230px;
  background-image: url(../../malta/img/bg_threecities_pc.png);
  background-repeat: no-repeat;
  background-position: left;
  position: relative;
}

.malta_threecitys img {
  width: 400px;
  margin: 40px 10px 10px 510px;
}


.malta_threecitys p {
  margin: 10px 20px 50px 525px;
}


.malta_threecitys::before {
  position: absolute;
  content: "";
  background: #fafaf9;
  height: 260px;
  top: -50px;
  right: 30px;
  width: 70%;
  z-index: -100;
}



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


.gozo_island img.title {
  width: 400px;
}



.gozo_island::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;
}


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


.gozo_citadel {
  width: 100%;
  height: 240px;
  background-image: url(../../malta/img/bg_citadel_pc.png);
  background-repeat: no-repeat;
  background-position: left;
  position: relative;
}


.gozo_citadel img {
  width: 300px;
  margin: 10px 50px 10px 590px;
}


.gozo_citadel p {
  margin: 10px 50px 50px 510px;
}


.gozo_citadel::before {
  position: absolute;
  content: "";
  background: #fafaf9;
  height: 550px;
  top: 40px;
  left: 350px;
  width: 40%;
  z-index: -100;
}


.gozo_tapinu {
  width: 100%;
  height: 330px;
  background-image: url(../../malta/img/bg_tapinu_pc.png);
  background-repeat: no-repeat;
  background-position: right;
}


.gozo_tapinu img {
  width: 210px;
  margin: 90px 700px 10px 30px;
}


.gozo_tapinu  p {
  margin: 10px 430px 50px 30px;
}





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


.comino_island::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;

}


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


.comino_island img.title {
  width: 400px;
}




.comino_island_bluelagoon {
  position: relative;
  display: flex;
}


.comino_island_bluelagoon::before {
  position: absolute;
  content: "";
  background: #fafaf9;
  height: 450px;
  top: -400px;
  left: 50px;
  width: 70%;
  z-index: -100;
}





.comino_island_bluelagoon img {
  width: 350px;
  height: 62px;
  margin: 20px auto 0 50px;
}

.comino_island_bluelagoon p {
  width: 500px;
  margin: 0 30px 0 50px;
}




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

.slide img{
  height: 25vw; 
  max-height: 400px;
  min-height: 350px; 
}





/* プレゼント情報 */



.present::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;
}



.present img.title {
  width: 300px;
}



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

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


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








/* PROMOTION */

img.promo_title {
  width: 500px;
  margin: 0px auto 30px auto;
}

article.flex {
  width: 700px;
  display: flex;
  margin: 0 auto;
}


.flex img {
  width: 300px;
  height: 173px;
  align-self: center;
}


.promo_contents {
  width: 350px;
  display: block;
  margin: 0 0 0 40px;
}

.promo_contents img {
  width: 70px;
  height: 38px;
}


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

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

.big { font-size: 14px; }


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


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



/* BTN LINK */

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

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


/* POPUP */


.popup {
  width: 750px;
  height: 550px;
  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: auto;
  z-index: 10000;
  text-align: center;
}


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

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

.icon-close:hover {
  color: #b28850;
  transition: 1s;
}




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


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

/* ポップアップの内容 */
.popup-content{
  color: #fff;
  width: 90%;
  margin: 30px auto 0px auto;
  text-align: justify;
  line-height: 1.5;
}


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