@charset "UTF-8";

#grid-content {
  margin: 20px 0 0 40px;
  z-index: 0 !important;
}
#grid-content .boxmain {
  width: 372px;
  margin-bottom: 20px;
  margin-right: 20px;
  height: 392px;
  float: left;
  text-align: center;
}
.box02 img {
  width: 100%;
  max-width: 176px;
}
.boxmain img,
.box01 img {
  width: 100%;
  max-width: 372px;
}

#grid-content .box01 {
  width: 372px;
  margin-bottom: 20px;
  margin-right: 20px;
  height: 186px;
  float: left;
  text-align: center;
}
#grid-content .box02 {
  width: 176px;
  margin-bottom: 20px;
  margin-right: 20px;
  height: 186px;
  float: left;
  text-align: center;
}

.boxmain li {
  display: inline-block;
  position: relative;
  letter-spacing: 0;
}

.type_reversal {
  overflow: visible;
  perspective: 2000px;
  -webkit-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  -moz-perspective: 2000px;
  behavior: url(“css/PIE.htc”);
}

.type_reversal dl {
  background-color: #fff;
  transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -o-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  behavior: url(“css/PIE.htc”);
}

.type_reversal:hover img {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -o-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  position: relative;
  behavior: url(“css/PIE.htc”);
}

.type_reversal img,
.type_reversal dl {
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  -ms-transition: opacity 0.6s, -webkit-transform 0.6s;
  -o-transition: opacity 0.6s, -webkit-transform 0.6s;
  -moz-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  /* position:relative;入れたら崩れる*/
  behavior: url(“css/PIE.htc”);
}

.type_reversal:hover dl {
  transform: rotateX(0);
  -webkit-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  -moz-transform: rotateX(0);
  /* position:relative;入れたら崩れる*/
  behavior: url(“css/PIE.htc”);
}

.w372 {
  width: 372px;
}
.w176 {
  width: 176px;
}

/* 高さが186pxのボックス */
.box_normal {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: absolute;
  top: 0;
  margin: 0;
  color: #333;
  background-color: #39f;
  height: 186px;
  text-align: center;
}

.box_normal dt {
  font-size: 16px;
  color: #fff;
  padding: 6px 10px 6px 10px;
  font-weight: normal;
  background-image: url("../img/ura_title_bg.png");
  background-position: right top;
  background-repeat: no-repeat;
  margin-bottom: 8px;
  text-align: left;
  line-height: 1.1;
}
.box_normal dt span {
  font-size: 12px;
}
.box_normal .typeSubTitle {
  text-align: center;
  font-size: 18px;
  color: #036;
  margin: 10px 0 15px 0;
}
.box_normal .typeBody {
  text-align: left;
  font-size: 13px;
  color: #333;
  padding: 0 15px;
  margin-bottom: 15px;
}

.box_normal .typeBody span {
  font-size: 12px;
}

.bgWhite {
  background-color: #fff;
  opacity: 0.7;
  filter: alpha(opacity=70);
  margin: 0 15px;
  padding: 5px !important;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  position: relative;
  behavior: url(“css/PIE.htc”);
}

/* 高さが392pxのボックス */
.box_square {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: absolute;
  top: 0;
  margin: 0;
  color: #333;
  background: #fff;
  height: 392px;
  text-align: left;
}

.box_square dt {
  background-image: url("../img/ura_title_bg.png");
  height: 47px;
}
.box_square dt {
  font-size: 16px;
  color: #fff;
  padding: 7px 10px 0 10px;
  line-height: 1.1;
  font-weight: normal;
}
.box_square dt span {
  font-size: 12px;
}
.box_square .typeSubTitle {
  text-align: center;
  font-size: 18px;
  color: #036;
}

.bgWhite-square {
  background-color: #fff;
  border-radius: 6px;
  height: 220px;
  margin: 0 34px;
  opacity: 0.7;
  padding: 54px 0 0;
  position: absolute;
  top: 80px;
  width: 304px;
}

.box_square .typeBody {
  text-align: left;
  font-size: 12px;
  color: #333;
  padding: 0 60px;
  position: absolute;
  margin: 132px 0 10px;
}

.monitarBox {
  background-image: url("../img/monitar_ura.jpg");
}
.chapelBox {
  background-image: url("../img/b_5ura.png");
}
.bloggerBox {
  background-image: url("../img/b_tabioki_s_ura.png");
}
.hotelBox {
  background-image: url("../img/b_9ura.png");
}
.photoBox {
  background-image: url("../img/b_8ura.png");
}
.playBox {
  background-image: url("../img/b_13ura.png");
}
.fairBox {
  background-image: url("../img/bg_okinawa_fairt.jpg");
}
.tokyofairBox {
  background-image: url("../img/bg_tokyofair2024");
}
.tokyofair2025Box {
}
.osakafair2025Box {
}
.churaumiBox {
  background-image: url("../img/b_main_churaumi_ura.jpg");
}
.familyBox {
  background-image: url("../img/b_family_ura.jpg");
}
.discoveryBox {
  background-image: url("../img/b_discovery_s_ura.jpg");
}
.gyokuzakonBox {
  background-image: url("../img/b_gyokuza_ura.jpg");
}
.newmembersBox {
  background-image: url("../img/orwa_bnr_ura.jpg");
}
.fair2023Box {
  background-image: url("../img/b_main_photocon2024.jpg");
}
.honeymoonguide {
  background-image: url("../img/b-honeymoonguide.ura_.jpg");
}
.fair2024Box {
  background-image: url("../img/b_main_photocon2024.jpg");
}
.photoconBox {
  background-image: url("../img/b_main_photocon2023.jpg");
}
.smiletogetherBox{
  background-image: url("../img/bg_smiletogether.jpg");
}
.ainowaphotoBox {
  background-image: url("../img/b_ainowaphoto_ura.jpg");
}
.onnaBox {
  background-image: url("../img/b_main_onna_ura.jpg");
}
.anshinnaviBox {
  background-image: url("../img/b_main_anshinnavi_ura.jpg");
}
.kaiinnboshuBox{
  background-image: url("../img/b_kaiinnboshutop_ura.jpg");
  background-size: cover;
}
.koifes2025Box{
  background-image: url("../img/b_main_koifes2025_ura.jpg");
  background-size: cover;
}
.koifestaiwanBox{
  background-image: url("../img/b_main_koifestaiwan_ura.jpg");
  background-size: cover;
}
.romantimeBox{
  background-image: url("../img/b_main_romantime_ura.jpg");
  background-size: cover;
}
.hanbai{
  background-image: url("../img/b_main_hanbai_ura.jpg");
  background-size: cover;
}
/* .chimBox{ background-image: url("../img/b_chimkarapon_s_ura.jpg");} */
.calendarBox {
  background-image: url("../img/b_calendar_s_ura.jpg");
}
.catBox {
  background-image: url("../img/b_main_cat_ura.jpg");
}
.weddingdayBox {
  background-image: url("../img/bnr_okinawa_resort_wedding_day.png");
}
.timeworkBox {
  background-image: url("../img/b_main_timework_ura.jpg");
}
.typeMore {
  text-align: center;
}

.typeMore a {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  background-color: #005db9;
  padding: 7px;
  color: #fff;
  position: relative;
  behavior: url(“css/PIE.htc”);
}
.typeMore a:hover {
  background-color: #3399ff;
}
/* 回転バナーリンク修正 ****************************************/
.box_square .typeMore a,
.box_normal .typeMore a {
  background-color: transparent;
  border-radius: 0px;
  height: 100%;
  left: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.box_square .typeMore a span,
.box_normal .typeMore a span {
  background-color: #005db9;
  border-radius: 6px;
  color: rgb(255, 255, 255);
  display: inline-block;
  padding: 7px;
  transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
}

.box_normal .typeMore a span {
  margin: 140px 0px 0px;
}

.box_square .typeMore a span {
  margin: 310px 0px 0px;
}

.box_square .typeMore a:hover span,
.box_normal .typeMore a:hover span {
  background-color: #39f;
}
/* 回転バナーリンク修正ここまで ****************************************/

.staffblog {
  text-align: left !important;
  background: #fff;
  position: relative;
}
.staffblog h2 {
  margin: 15px 15px 10px 15px;
  border-bottom: 1px solid #333;
  padding-bottom: 3px;
  font-weight: normal;
}
.staffblog dl {
  margin: 0 15px;
  height: 320px;
  overflow-y: scroll;
}
.staffblog dl dt {
  float: left;
  width: 70px;
  margin-bottom: 8px;
  line-height: 1.3;
  font-size: 10px;
  color: #666;
}
.staffblog dl dd {
  float: left;
  width: 250px;
  margin-bottom: 8px;
  line-height: 1.3;
  color: #333;
}

.more {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

/*******************************レスポンシブ***********************************/
@media screen and (max-width: 480px) {
  #grid-content {
    margin: 20px 10px;
  }
}