@charset "utf-8";

/*
 * CSS for PC
 * @date     2022.06
 */
 .sp { display: none !important;}

#widewrapper ,#contentsArea  { width: 100%;overflow: hidden;}
#contentsArea h1 { display: flex; justify-content: center; align-items: center; width: 100%; height: 420px; background: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202407/images/kv_bg.jpg) no-repeat center center #4CAE97; background-size: cover; }
#contentsArea h1 img { max-width: 100%;margin-right: 660px;}
#contentsArea a:hover{ opacity: 0.85; text-decoration: none !important;}

.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.yellow  { width:100%; overflow: visible; background:#FFFDDE; padding: 80px 0; position: relative; 
  z-index: 10; }
section.yellow .ppl1 { width:250px; position: absolute; right:50%; margin-right: -670px; top: -157px;}
/* section.yellow .ppl2 { width:250px; position: absolute; top: 517px;
  left: 170px;transform: translate(-50%, -50%);  bottom: -70px; z-index: 20;} */
section h2.tlt { display: inline-block; font-size: 24px; line-height: 50px; text-align: center; letter-spacing: 2px; position: absolute;}
section h2.tlt::after  { display: block; position: absolute; content: ""; width: 40px; height: 50px; }
section h2.tlt::before { display: block; position: absolute; content: ""; width: 40px; height: 50px; }
section h2.tlt span { font-size: 32px; color: #4CAE97;}
section#part2 h2.tlt span { font-size: 32px; color: #0095B5;}
section {  
  /* overflow: hidden; */
 margin: 0 auto;
  text-align: center;
padding-top: 30px;
}
/* part1 */
#part1{
  padding-top: 30px;
}
.title-with-image{
  margin: 0 auto;
}

.image-left {
    position: absolute;
    top: 627px;
    left: 170px;
    transform: translate(-50%, -50%);
  }
  .inform {
    width: 100%; 
    overflow: hidden;
    margin: 40px auto 0;
    text-align: center; 
  }
  dl.inform dt {
    width: 100%; 
    float: none; 
  }
  .centered-image {
    height: auto; 
    display: inline-block; 
  }
  .image-left {
    width: 100%; 
    max-width: 250px; 
    height: auto; 
  }

  .image-center_sp,.search_sp-img{
    display: none;
  }
  .ppl2.pc {
    position: relative; 
    z-index: 10; 
  }
/* part2 */
.step-img{
  width: 65%;
  display: block;
  margin: 0 auto;
}
.process-img_pc{
  display: block;
  margin: 0 auto;
  margin-top: -34px;
  margin-bottom: 20px;
  max-width: 373px;
}
.image-container {
  position: relative;
  text-align: center;
}

.step-img_sp,.ppl2sp{
  display: none;
}
/* 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; 
  padding-bottom: 50px;
  margin-top: 0;
}
.content {
  padding: 20px;
}
.centered-image {
  display: block;
  margin: 0 auto;
  margin-top: 60px;
  width: 80%; 
  max-width: 500px;
}
.white-background {
  padding: 20px;
  background-color: white;
  width: 1212px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 43px;
  padding-top: 64px;
  flex-wrap: wrap; 
  padding-bottom: 60px;
}
.left-side {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 50%;
  height: auto; 
  margin-top: 0; 
}
.smart-img {
  width: 88%;
}
.right-side {
  flex: 1;
  max-width: 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -35; 
  font-size: 14px;
  line-height: 26px;
  color: #333333;
}
.right-side > p {
  text-align: left;
}
.but-img {
  margin-top: 20px; 
  width: 65%; 
  height: auto; 
}
.additional-text {
  margin-top: 10px;
  font-size: 14px;
  color: #333333;
  text-align: right !important; 
  margin: 0 auto;
  margin-right: 85px;
}

@media (max-width: 800px) {
  .white-background {
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
  }
  .left-side, .right-side {
    flex: 1 1 100%; 
    max-width: 100%;
    margin-top: 20px; 
    text-align: center; 
  }
  .centered-image, .but-img {
    width: 100%;
  }
  .additional-text {
    margin-left: 0; 
  }
}

.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: 50%;
  height: auto;
}
.boxes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.box {
  width: 96%;
  height: 179px;
  border: 1px solid #0DA190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 24px;
  border-radius: 8px;
  align-items: flex-start; 
  text-align: left; 
  padding: 10px; 
}
.boxes-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 24px; 
  margin-top: 20px;
}
.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 {z-index: 999;
  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; 
  padding-bottom: 50px;
  margin-top: 0;
  z-index: 10;
  position: relative; 
  overflow: inherit;
}

.guam-img_pc{
  margin-top: 60px;
}
.smart2-img_pc{
  width: 80%;
}
.centered-image_pc{
  margin-top: 60px;
}
.content2 {
  padding: 20px;
}
.centered2-image {
  display: block;
  margin: 0 auto;
  margin-top: 60px;
  width: 80%; 
  max-width: 500px;
}
.white2-background {
  padding: 20px;
  background-color: white;
  width: 1212px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 43px;
  padding-top: 64px;
  flex-wrap: wrap; 
  padding-bottom: 60px;
}
.text-coupon{
  text-align: left;
  line-height: 20px;
  font-size: 14px;
  display: block;
  margin-top: 18px;
  color: #333;
  padding-right: 323px;
}
.but-img2 {
  margin-top: 20px; 
  width: 65%; 
  height: auto; 
}
@media (max-width: 800px) {
  .white2-background {
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box;
  }
  .left2-side{
    flex: 1 1 100%; 
    max-width: 100%;
    margin-top: 20px; 
    text-align: center; 
  }
  .centered2-image, .but-img {
    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: 50%;
  height: auto;
}
.boxes-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.box2 {
  width: 96%;
  height: 179px;
  border: 1px solid #CF4688;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 24px;
  border-radius: 8px;
  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 {
  margin-bottom: 44px;
  width: 1238px;
}
.boxes-container2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 24px; 
  margin-bottom: 10px;
}
.floating-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
}

.floating-image  {
  position: relative; 
  z-index: 10; 
}
.guam-img{
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  width: 80%;
  max-width: 500px;
  margin-top: 50px;
}
.coupon-img{
  width: 65%;
  display: block;
  margin: 0 auto;
}
#part4 {
  position: relative;
}
.swimming-img_pc {
  width: 300px;
  position: absolute;
  left: 88%; 
  transform: translateX(-50%);
  top: 50%; 
  z-index: 20;
}
@media (max-width: 600px) {
  .swimming-img_pc {
    top: 50%; 
  }
}
@media (min-width: 1200px) {
  .swimming-img_pc {
    top: 375%; 
  }
}
.beaches-img {
  width: 13vw;  
  position: absolute;
  left: 3.5vw;  
  margin-top: -15vh;  
  z-index: 20;
}

.guam-img_sp,.swimming-img_sp,.centered-image_sp{
  display: none;
}
/* part5 */
.dt-img {
  display: flex;
  justify-content: flex-end;
}
.dt-img img {
  margin-right: 50px;
}
#search-box { background-color: none !important; border: 0 !important;}
#search-box p.searchSubmit a { height: 40px; line-height: 40px; text-indent: 0; font-weight: bold !important; background-color: #D04A00 !important;}
#search-box p.searchSubmit a:hover { color: #fff; text-decoration: none;}
p.search_terms { width: 1200px; margin-top: 40px; font-size: 14px;line-height: 1.6; color: #666; text-align: left;}

.banner-container { width: 1140px; margin: 40px auto 0; overflow: hidden; display: flex; justify-content: center; flex-wrap: wrap; }
.banner-container .column-list { width: 23%; margin: 0 1% 2%;}
.banner-container .column-list img { width: 100%;}
#search-box #overseas-search-box .searchCategory li.on::after { margin-left: -10px !important; top: 65px !important; bottom: 0 !important;}
#part3 {
  position: relative; 
}
#part3:after {
  position: absolute;
  z-index: 999;
  display: block;
  content: "";
  background-image: url('https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/swimming_pc.svg');
  background-size: 250px 246px; 
  width: 250px; 
  height: 246px; 
  bottom: -146px;
  right: 66px;
}
#part4 { position: relative; }
#widewrapper { position: relative; }

#part1::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 8.5%;
  transform: translateY(-50%);
  width: 15vw; 
  height: calc(15vw * (287 / 250)); 
  max-width: 250px;
  max-height: 287px;
  background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202504/images/letgo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9999; 
  pointer-events: none;
}
#part2::before {
  display: none;
  content: "";
  position: absolute;
  right: 13%;
  top: -6%;
  transform: translateY(-50%);
  width: 15vw; 
  height: calc(15vw * (215 / 250)); 
  max-width: 250px;
  max-height: 215px;
  background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202407/images/kids_pc.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9999; 
  pointer-events: none;
}
#part2 { position: relative; }
#part3::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 3%;
  transform: translateY(-50%);
  width: 15vw; 
  height: calc(15vw * (287 / 250)); 
  max-width: 250px; 
  max-height: 287px; 
  background-image: url(https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202407/images/play_sp.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9999; 
  pointer-events: none;
}


/* 202503new */





#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;
  background-repeat: no-repeat;
  padding: 40px 0 82px; /* 上 40px，下 82px，左右 0 */
  min-height: 100vh; /* 至少占满整个视口高度 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.ss-container {
  width: 100%;
  margin: 0 auto; /* 水平居中 */
}
.tittle5{
  margin: 0 auto;
}
#newfive {
  position: relative; 
  display: flex;
  align-items: center; 
}

#newfive {
  position: relative; 
}

#newfive::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 1%;
  transform: translateY(-50%);
  width: 15vw; 
  height: calc(15vw * (287 / 250)); 
  max-width: 250px;
  max-height: 287px;
  background-image: url('https://img.travel.rakuten.co.jp/kaigai/service/guam/list/202407/images/beaches_pc.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9999;
  pointer-events: none;
}

.part5{
width: 1212px;
  overflow: hidden;
  margin: 30px auto 0;
  text-align: center;
}


.tittlessi{
  margin: 0 auto;
  margin-bottom: 40px;
}
.linkicon{
  margin: 0 auto;
  margin-top: 57px;
}


/* for ssi */
.clearfix {
  min-height: 1%;
  display: block;
}
.swiper-container {
  max-width: 1212px;
  margin: 30px auto;
}
.mainTtl2.subTt {
  margin: 20px 0;
}
.swiper-wrapper {
  display: block !important;
}
.swiper-wrapper li{
  background-color: white;
}
.swiper-wrapper li {
  float: left !important;
}

em {
  font-style: normal;
}
.ss-hotel .hotel-price a span.details em.bk {
  font-size: 12px;
  color: #000;
  display: block;
  position: absolute;
  bottom: -4px;
  right: 0;
  font-weight: normal;
}

#search-box #overseas-search-box .searchCategory li{
  margin-bottom: 12px !important;
}

.ss-hotel .hotel-price a {
  display: block;
}

.ss-hotel .htlInfo { bottom: 8px !important;}

.jss_popOverInfo { display: none;}
.ss-hotel .hotel-price a span.details:hover > .jss_popOverInfo { display:block; width: 80%; position: absolute; bottom: 8px !important; right: 0; font-size: 12px; font-weight: normal; text-align: left !important; color: #fff; line-height: 16px; opacity: 0.95; padding: 8px; border-radius: 4px; visibility: visible; }
.ss-hotel .price-info-arrow {top:-28px !important;}
.ss-hotel .hotel-main .area-name { text-align: left;}

.jdsShowFix { position: fixed; right: 0; bottom: 80px; z-index: 999;}