@charset "utf-8";

/*
 * CSS for SmartPhone
 * @date     2022.06
 */
 .pc { display: none !important;}
 #contentsArea a:hover{ opacity: 0.85; text-decoration: none !important;}

 #widewrapper ,#contentsArea  { width: 100%;overflow: hidden;}
 #contentsArea h1 { display: flex; justify-content: center; align-items: center; width: 100%;}
 #contentsArea h1 img { width: 100%;}
 .jdsShowFix { right: 0; z-index: 999;}
 .jdsShowFix ul { width: 94px; overflow: hidden; border: 1px solid #777; border-radius: 4px;}
 .jdsShowFix ul li { border-bottom: 1px solid #777;}
 .jdsShowFix ul li a { display: block; text-align: center; font-weight: bold; font-size: 12px; padding: 32px 0 4px;}
 .jdsShowFix ul li:nth-child(1) a { background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/surprise.png) no-repeat 50% 10% #fff;} 
.jdsShowFix ul li:nth-child(2) a { background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/travel.png) no-repeat 50% 10% #fff;} 
.jdsShowFix ul li:nth-child(3) a { background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/coupon.png) no-repeat 50% 10% #fff;} 
.jdsShowFix ul li:nth-child(4) a { background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/search.png) no-repeat 50% 10% #fff;} 
 .jdsShowFix ul li:nth-child(4) { border-bottom: 0;}

section {   text-align: center;}
section.green  { overflow: hidden; background: #D8F1E3; margin: 40px 0 0; padding: 40px 8px 0;}
section h2.tlt { display: inline-block; font-size: 16px; line-height: 25px; text-align: center; letter-spacing: 2px; position: relative;}
section h2.tlt::after  { display: block; position: absolute; content: ""; width: 20px; height: 25px; background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/ribonR.png) no-repeat center center; top: 0; right: -25px; background-size: 20px 25px;}
section h2.tlt::before { display: block; position: absolute; content: ""; width: 20px; height: 25px; background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/ribonL.png) no-repeat center center; top: 0;  left: -25px; background-size: 20px 25px;}
section h2.tlt span { font-size: 21px; color: #4CAE97;}
section#part2 h2.tlt span { font-size: 21px; color: #0095B5;}




section.yellow  { width:100%; overflow: visible; background:#FFFDDE;  position: relative; padding-bottom: 32px;}
/* part1 */
.image-left,.image-center{
display: none;
  }



.jdsTab {overflow: hidden; margin: 40px auto;}
.jdsTab ul.jdsTabNav { display: flex; justify-content: space-between; border-bottom: 4px solid #0095B5;}
.jdsTab ul.jdsTabNav li { width: 49%; border-radius: 8px 8px 0 0; background: #666; color: #fff; font-weight: bold; font-size: 14px; padding: 8px 0 4px; margin-top: 12px; text-align: center;}
.jdsTab ul.jdsTabNav li.here { background: #fff; color: #0095B5;border: 1px solid #0095B5; border-bottom: 0; font-size: 18px; padding: 16px 0 8px; margin-top: 0;}

dl.inform {  overflow: hidden; margin: 40px 24px 0;}
dl.inform img { width: 100%;}
dl.inform dt{ width: 100%; float: left;}
dl.inform dd{ width: 100%; float: left; font-size: 14px; line-height: 1.8; padding:24px 0; text-align: left;}
dl.inform dd a { display: block; width: 100%; max-width: 420px; margin: 24px auto 0;}

 #search-box .searchNavi li { width: 30% !important; border: 0; background: none;}
 #search-box .searchNavi li.on:after { bottom: 0 !important;}
 #search-box { background-color: none !important; border: 0 !important; margin: 24px 0 16px 0;}
 #search-box.verB.test p.searchSubmit { padding-top: 0;}
 #search-box.verB.test p.searchSubmit a{ background-color: #D04A00 !important; padding-top: 8px; box-shadow: none; border: 0; margin-top: 0;}
 p.search_terms {padding: 8px; font-size: 14px;line-height: 1.6; color: #666; text-align: left;}


.banner-container { margin: 24px 8px 0; overflow: hidden; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.banner-container .column-list { width: 48%; margin: 0 1% 2%;}
.banner-container .column-list img { width: 100%;}

/* .swiper-container { padding-bottom: 40px;} */
.column_4 { margin-top: 24px;}
.column_4 li { background: #fff; text-align: left; border: 1px solid #c3c3c3; border-radius: 6px;}
.column_4 li p.hotel-img img { width: 100%;}
.column_4 li p.hotel-img a { display: block; position: relative;}
.column_4 li span.hotel-name.sp{ display: block; position: absolute; z-index: 9; content: ""; text-align: left; right:0; bottom: 0; padding: 2px 4px; width: calc(100% - 8px); height: 36px; line-height: 18px; font-size: 12px; color: #fff; background: #333; opacity: 0.85; font-weight: bold;}
.column_4 li p.area-name { font-size: 12px; color: #777; padding: 8px 0;}
.column_4 li p.plan-name { font-size: 14px; color: #777; font-weight: bold; padding: 0 8px;}
.column_4 li .button  { display: block; border-radius: 50px; background: #0095B5; padding: 10px 0; color: #fff !important; font-weight: bold; text-align: center; margin:0 8px 16px;}
.column_4 li .hotel-price {text-align:right;position:relative;padding-bottom:4px;clear:both; z-index: 99;}
.column_4 li .hotel-price a { display: block;}
.column_4 li .hotel-price a span.details {
    display: block;
    position: relative;
    background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/images/detail.png) 100% 60%/16px 16px no-repeat;
    padding:8px 16px 8px 0;
    margin-right: 8px;
    font-size: 18px;
    text-align: right;
    color: #bf0000;
    font-weight: bold;}
.column_4 li p.hotel-price .details em { font-size: 12px;}



.column_4 li ul.icons { margin:8px; overflow: hidden;}
.column_4 li ul.icons li { display: inline-block; margin-right: 4px; margin-bottom: 4px; padding: 2px 4px; border: 1px solid #B71489; color: #B71489; text-align: center; font-size: 12px; border-radius: 4px;}
.column_4 li ul.icons li.C7 { background:#eb6100; color: #fff; border-color: #eb6100;}
.column_4 li ul.icons li.UA { background:#1414D2; color: #fff; border-color: #1414D2;}
.column_4 li ul.iconx { margin:8px; overflow: hidden; display: flex; justify-content: center;}
.column_4 li ul.iconx li { width: 33%; margin: 0 1%; border: 0;}
.column_4 li ul.iconx li img { width: 100%;}

section {  width: 100%; 
  text-align: center;
  padding-top: 10px;
}

/* part1 */
.image-left {
    position: absolute;
    top: 627px;
    left: 170px;
    transform: translate(-50%, -50%);
  }
  dl.inform {
    width: 100%; 
    overflow: hidden;
    margin: 40px auto 0;
    text-align: center; 
  }
  dl.inform dt {
    width: 100%; 
    float: none; 
  }
  .centered-image_pc,.image-center_pc {
    display: none;
  }
  .image-left {
    width: 100%; 
    max-width: 250px; 
    height: auto; 
  }
  .title-with-image, .inform, .content-image, .image-center_sp {
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 32px;
  } 
  .image-left, .image-center_pc, .image-center_sp, .content-image {
    width: auto; 
    max-width: 100%; 
  }
  @media screen and (max-width: 768px) {
    .image-center_pc {
      display: none; 
    }
  }
  @media screen and (min-width: 769px) {
    .image-center_sp {
      display: none; 
    }
  }
  .ppl2 pc{
    display: none;
  }
  .ppl2sp {
    position: relative; 
    z-index: 10; 
    margin-right: 253px;
  }
/* part2 */
.step-img_pc,.process-img_pc{
display: none;
}

.image-container {
  position: relative;
  text-align: center;
}
/* part3 */
.aqua {
  background-image: url('https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/BG_pc.svg'); 
  background-size: cover; 
  background-position: center; 
  width: 100%; 
  height: auto; 
  position: relative; 
}
.content {
  padding: 16px;
}
.white-background {
  background-color: white;
  padding: 31px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:25px;
  padding-top: 64px;
  flex-wrap: wrap; 
}
.left-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 50%;
  height: auto; 
  margin-top: 0; 
}
.smart-img {
  width: 100%;
}
.right-side {
  flex: 1;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0; 
  font-size: 14px;
  line-height: 26px;
  color: #333333;
}
.right-side > p {
  text-align: left;
  font-size: 14px;
}
.but-img {
  margin-top: 20px; 
  width: 65%; 
  height: auto; 
}
.additional-text {
 text-align: right !important;
  font-size: 14px;
  color: #333333;
  text-align: center; 
}
@media (max-width: 800px) {
  .white-background {
    width: 100%; 
    padding: 6px; 
    box-sizing: border-box; 
  }
  .left-side, .right-side {
    flex: 1 1 100%; 
    max-width: 90%;
    margin-top: 20px; 
    text-align: center; 
  }
  .centered-image, .but-img {
    width: 100%;
  }
  .additional-text {
    margin-left: 0; 
  }
}
.details {
  margin-top: 10px; 
}
.details-img {
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
}
.centered-image-container {
  text-align: center;
  width: 100%;
  margin-top: 20px; 
}
.centered-image-container .centered-image {
  max-width: 90%;
  height: auto;
}
.boxes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.box {
  width: 100%;
  height: 130px;
  border: 1px solid #0DA190;
  margin: 12px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 22px;
  border-radius: 4px;
  align-items: flex-start; 
  text-align: left; 
  padding: 10px; 
}

.large-text {
  font-size: 18px; 
  font-weight: bold;
  margin-bottom: 10px; 
  text-align: left; 
  color: #333; 
}
.small-text {
  font-size: 14px; 
  color: #333; 
  text-align: left;
}
/* part4 */
.pink {
  background-image: url('https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/pinkbg_pc.svg'); 
  background-size: cover; 
  background-position: center; 
  width: 100%; 
  height: auto; 
  position: relative; 
  margin-top: 0;
  padding-bottom: 12px;
}
.guam-img_sp{
  margin-top: 32px;
}
.content2 {
  padding: 20px;
}
.centered2-image {
  display: block;
  margin: 0 auto;
  width: 80%; 
  max-width: 500px;
}
.white2-background {
  background-color: white;
  padding: 31px;
  width: 65%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  padding-top: 64px;
  flex-wrap: wrap; 
}
.text-coupon{
  text-align: left;
  line-height: 22px;
  font-size: 12px;
  display: block;
  color: #333;
  padding: 10px;
}
.but-img2 {
  margin-top: 20px; 
  width: 65%; 
  height: auto; 
}
.smart2-img_pc{
  width: 94%;
  margin-top: 20px;
}
@media (max-width: 800px) {
  .white2-background {
      width: 100%; 
      padding: 6px; 
      box-sizing: border-box; 
  }
  
  .centered2-image, .but-img2 {
    width: 100%;
  }
  .additional-text2 {
    margin-left: 0; 
  }
}
.centered-image-container2 {
  text-align: center;
  width: 100%;
  margin-top: 20px; 
}
.centered-image-container2 .centered2-image {
  max-width: 100%;
  height: auto;
}
.boxes-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
@media (max-width: 1200px) {
  .box2 {
    width: 48%; 
  }
}

@media (max-width: 600px) {
  .box2 {
    width: 100%;
  }
}
.box2 {
  width: 100%;
  height: 130px;
  border: 1px solid #CF4688;
  margin: 12px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 22px;
  border-radius: 4px;
  align-items: flex-start; 
  text-align: left; 
  padding: 10px; 
}
.large-text2 {
  font-size: 18px; 
  font-weight: bold;
  margin-bottom: 10px; 
  text-align: left; 
  color: #333; 
}
.small-text2 {
  font-size: 14px; 
  color: #333; 
  text-align: left;
}
.conten-image,.search_pc-img,.swimming-img_pc,.dt-img,.guam-img_pc {display: none;
}
.floating-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
}
.floating-image  {
  position: relative; 
  z-index: 10; 
}
.coupon-img{
  width: 65%;
  display: block;
  margin: 0 auto;
}
.beaches-img { width:90px; position: absolute; left: 28px; margin-top: -20px;}
.swimming-img_sp{
  width: 150px;
  position: absolute;
  left: 77%; 
  transform: translateX(-50%); 
  top: 450vh;
  z-index: 20;
}

/* 202503 new */
.tittlessi{
  margin: 0 auto;
  margin-bottom: 40px;
}
.tittlessi img{
  width:142px ;
  height: 64px;
}

.linkicon {
  width: 311px;
  height: 48px;
  margin: 40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.linkicon img {
  width: 100%; 
  height: 100%;
  object-fit: contain; 
}
.swiper-wrapper li{
  background-color: white;
}


#newfive {
    background-image: url('https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/BG_pc.svg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 32px;
  }

  #part2::before {
    content: "";
    position: absolute;
    right: 4.3%;
    top: -1.5%;
    transform: translateY(-50%);
    width: 96px; 
    height: 82px; 
    background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/Kids_sp.svg);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99; 
    pointer-events: none;
}
.step-img_sp{margin-top: 32px;}
#part3 {
  position: relative; 
  z-index: 10; 
}

#part3::before {
  content: "";
  position: absolute;
  left: 1%;
  top: -26px; 
  width: 102px; 
  height: 87px; 
  background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/playmc.svg);
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99; 
  pointer-events: none;
}

#part4::before {
  content: "";
  position: absolute;
  right: 4.3%;
  top: 1%;
  transform: translateY(-50%);
  width: 137px; 
  height: 84px; 
  background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/swiming_sp.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99; 
  pointer-events: none;
}
#newfive::before {
  content: "";
  position: absolute;
  left: 4%;
  top: -26px; 
  width: 87px; 
  height: 99px; 
  background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/beach_sp.svg);
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99; 
  pointer-events: none;
}



/* ssi */
.ss-container {
  border-bottom: 0;
}
.ss-center, .ss-container {
  width: auto;
  overflow: hidden;
}
.mainTtl2.subTt {
  margin: 20px 0;
}
.swiper-wrapper {
  padding-bottom: 20px;
}
.swiper-wrapper li {
  background: #fff;
  border: 0;
  box-shadow: none;
  margin: 0 8px 0 0 !important;
}
.hotel-img {
  width: auto;
  margin: -10px -10px 10px !important;
  display: block;
}
.ss-hotel .htlInfo {
  display: block;
  position: initial;
  padding: 0;
  background: none;
}
.hotel-container {
  width: 100%;
  padding: 0;
}
.ss-hotel .hotel-main .chara li.icon {
  display: none;
}
.ss-hotel .hotel-main .hotel-name {
  min-height: 36px;
  overflow: hidden;
}
.dp .ss-hotel .hotel-price, .air .ss-hotel .hotel-price {
  margin-bottom: 6px;
}
em {
  font-style: normal;
}
.dp .ss-hotel .hotel-price a span.details {
  display: block;
  position: relative;
  width: calc(100% - 20px);
  line-height: 20px;
  padding-bottom: 8px;
}
.ss-hotel .hotel-price a span.details em.bk {
  font-size: 11px;
  color: #000;
  display: block;
  position: absolute;
  bottom: -4px;
  right: 0;
  font-weight: normal;
}
.ss-hotel .hotel-price a span.details span.price-info {
  width: auto;
}
.ss-button {
  background: #0DA290;
}




/* new20240321 */
.swiper-wrapper {
  padding-bottom: 20px;
}
.swiper-wrapper li {
  background: #fff;
  border: 0;
  box-shadow: none;
  margin: 0 8px 0 0 !important;
}
.hotel-img {
  width: auto;
  margin: -10px -10px 10px !important;
  display: block;
}
.ss-hotel .htlInfo {
  display: block;
  position: initial;
  padding: 0;
  background: none;
}
.ss-hotel .htlInfo span {
  display: inline-block;
  padding: 0px 8px

}
.hotel-container {
  width: 100%;
  padding: 0;
}
 .ss-hotel .hotel-main .hotel-name {
  min-height: 36px;
  overflow: hidden;
}
.ss-hotel .hotel-main .chara li.icon {
  display: none;
}
.swiper-wrapper li {
  background: #fff;
  border: 0;
  box-shadow: none;
  margin: 0 8px 0 0 !important;
}


.ss-hotel .hotel-img
{
  height: 120px;
  margin: 0 !important;
  width: 100% !important;
  background-size: cover;
  background-position: top left;
}
.column_4 li p.hotel-img a {
  border-radius: 0;
  right: 0;
  margin-top: -10px;
  bottom: 0;
  height: 31px;
  width: calc(100% - 19px);
  text-align: left;
}

.ss-hotel .hotel-main .area-name { padding: 0;}
.ss-hotel .hotel-img { height: 96px; overflow: hidden; float: none;}
.ss-hotel .htlInfo { display: block; position: absolute !important; border-radius: 0 !important; margin: 0 !important;padding: 5px 14px 5px 5px;background: rgba(0, 0, 0, 0.6); overflow: hidden !important;}
.ss-hotel .hotel-main .area-name { padding-top: 8px !important;}
.ss-hotel .hotel-price a span.details span.price-info { opacity: 0.95; text-align: left;}

.jdsShowFix { position: fixed; right: 0; bottom: 40px; z-index: 999;}
#SALE h2 img{ max-height: 58px; margin-top: 10px;}

 #search-box.verB.test #searchForeignSwitchArea1 select#oh-area-dai { width: calc(100% - 16px);}
 #search-box .inputDate{ width: 86% !important;}
 #search-box .searchCategory { margin-bottom: 0;}
 #search-box.verB.test #searchForeignSwitchArea1 .number ul li.child a { padding: 0;}
 #search-box.verB #oap-search-form dl.structure.fltDl.ninzu ul li { padding-bottom: 10px;}
 #search-box.verB #oap-search-form .number ul li.child a { padding: 6px 0 !important;}
#search-box.verB #oap-search-form dl.structure.fltDl.ninzu ul li.child { padding-bottom: 0;}

.title-with-image .image-center_sp{ margin-bottom: 0 !important;}
#gogo .title-with-image { margin-bottom: 0;}