@charset "UTF-8";
/* CSS Document */

body,main{ position: relative;}
.section_base_section{ margin: 0; padding: 0;}
section{ z-index: 3;}
.section_base_section section{ z-index: 0;}

.section_fcgallery{ display: block;}

.board{ margin: 0; padding: 0; position: relative; }
.board *{ margin-top: 0;}
.board img{ display: block;}

.board .board_title{ width: 609px; position: fixed; margin: auto; left: 0; right: 0; top: 40%; bottom: 0; opacity: 1; z-index: 2; }
@media screen and ( max-width: 480px ) {
  .board .board_title{ width: 90%;}
}
.yokoku{ position: absolute; z-index: 1; left: 2.0em; top: 1.0em; padding: 0.5em; border: solid 1px #FFF; background: rgba(255,255,255,0.6); width: 30%;}
.yokoku h3{ margin: 0; padding: 0;}
.yokoku p{ margin: 0; padding: 0; font-size: 77%; line-height: 1.3;}


.board01{ position:sticky; top: 0;  margin: 0; padding: 0; min-height: 720px; height: 100vh; background: #000; z-index: 0;}
.board01::after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(3,110,184,1) 100%);
}
.board01 .item11{ margin: 0 auto; padding: 0; position: absolute; left: 0; right: 0; bottom: 200px; width: 1000px; z-index: 1;}
.board01 .board01_mv{ margin: 0; padding: 0; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: #000;}


@media screen and ( max-width: 480px ) {
  .board01 .item11{ width: 90%;}
}


.board02{ margin: 0; padding: 0; height: 760px; background: linear-gradient(to bottom,  rgba(3,110,184,1) 100%,rgba(3,110,184,1) 0%); position: relative; z-index: 1; }
.board02::before{ content: ''; display: block; position: absolute; left: 0; top: -200px; width: 100%; height: 200px; background: linear-gradient(to bottom,  rgba(3,110,184,0) 0%,rgba(3,110,184,1) 90%,rgba(3,110,184,1) 100%); z-index: 1;}

.board02 div{ color: #FFF; text-align: center; position: absolute; width: 100%; bottom: 0;}
.board02 .title{ width: 609px; z-index: 2; margin: 0 auto;}
.board02 .body{  margin: 2.0em 0 0 0; font-size: 108%;}
@media screen and ( max-width: 480px ) {
  .board02 .title{ width: 90%;}
  .board02 .body{ font-size: 92%; padding: 0 1.0em;}
}
.board03{ margin: 0; padding: 51.17% 0 0 0; background: url("../index/bg_daybay.jpg") no-repeat center bottom / cover; position: relative; z-index: 1;}
.board03::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100px;  background: linear-gradient(to bottom,  rgba(3,110,184,1) 0,rgba(3,110,184,0) 100%); }
.board03 aside{ margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../index/bg_daybay_asset.svg") no-repeat center bottom / contain;}
.board03 .upgrd{ margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 40%; /*background: linear-gradient(to bottom, rgba(20,56,126,1) 0%, rgba(20,56,126,0) 100%);*/}

#mainLogo01{ opacity: 1; transform: scale(1.3); transition: transform 1s;}
#mainLogo01.swap{ opacity: 0; }
#mainLogo01.small{ transform: scale(1.0);}
#mainLogo02{ opacity: 0; }
#mainLogo02.swap{ opacity: 1;}
@media screen and ( max-width: 480px ) {
  #mainLogo01{ opacity: 1; transform: scale(1.05);}
}

.board_cp{ margin: 0; padding: 0; background: #efefef;}
.board_cp .mb{ padding: 2.0rem 0 6.0rem 0;}
.board_cp ul{ margin: 0; padding: 0; display: flex; gap: 0 5%; flex-wrap: wrap;}
.board_cp li{ margin: 4.0rem 0 0 0; padding: 0; flex: 0 0 30%;}
.board_cp li img{ margin: 0; padding: 0; display: block;}
@media screen and ( max-width: 480px ) {
  .board_cp .mb{ padding: 2.0em 1.0em;}
  .board_cp li{ margin: 1.0rem 0 0 0; padding: 0; flex: 0 0 47.5%;}
}

.section_cp{ margin: 0;  padding: 0; display: flex;}
.section_cp .figure{ flex: 0 0 65%; margin: 0; padding: 0;}
.section_cp .figure figure{ display: block;  margin: 0; padding: 54% 0 0 0; /*background: url("../index/cp11.jpg") no-repeat left center / cover;*/}
.section_cp .cp_item{ flex: 0 0 35%; display: flex; align-items: center; position: relative;}
.section_cp .cp_item img{ margin-left:-60px;  width: 422px;}
@media screen and ( max-width: 480px ) {
  
}

.section_slide{ margin: 0; padding: 0;}
.section_slide img{ display: block; width: 100%;}

.clipbox{ margin: 0; padding: 0; height: 347px; position: relative;}
.clipbox *{ margin-top: 0;}
.clipbox .clip01{ margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: url("../index/clip01.jpg") no-repeat left center / cover;; clip-path: polygon(0 0, 82% 0%, 100% 100%, 0 100%);}
.clipbox .clip02{ margin: 0; padding: 0; position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: url("../index/clip02.jpg") no-repeat left center / cover;; clip-path: polygon(0 0, 100% 0%, 100% 100%, 18% 100%);}

.towerimage{ margin: 0; padding: 0;}
.towerimage img{ display: block; width: 100%;}

.section_slide{ margin: 0; padding: 0; position: relative;}
.section_slide *{ margin-top: 0;}
.section_slide img{ margin: 0; padding: 0; display: block;}
.section_slide::after{ content: ''; display: block; margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../index/slide_overlay.svg") no-repeat center top / cover;}

.design{ margin: 0; padding: 0;}
.design *{ margin-top: 0;}
.design img{ display: block; width: 100%;}
.design article{ margin: 0; padding: 0; position: relative;}
.design article div{ color: #FFF; position: absolute; z-index: 1; top: 2.0rem; right: 4.0rem; padding: 1.0em; /*background: rgba(0,0,0,0.1); box-shadow: 0 0 0.5em rgba(0,0,0,0.2); line-height: 1.5;*/}
.design h3{ letter-spacing: 0.4em; font-size: 164%;}
.design p{ margin-top: 0.5em; font-size: 128%; white-space: nowrap;}
.design .righttop{  top: 2.0rem; right: 2.0rem;}
.design .leftbottom{  bottom: 2.0rem; left: 4.0rem; top: auto; right: auto;}
.design .bshadow{ text-shadow: 2px 2px 3px rgba(0,0,0,0.75);}
.design .black{ color: #000;}
@media screen and ( max-width: 480px ) {
  .design article div{ position: relative; top: 0; left: 0; color: #000;}
  .design h3{ letter-spacing: 0; font-size: 128%;}
  .design p{ white-space:normal; font-size: 86%;}
  .design .leftbottom{ bottom: 0; right: 0; left: 0; top: 0;}
  .design .bshadow{ text-shadow: none;}s
}



.section_water{ margin: 0; padding: 0; background: #fff;}
.section_water .mb{ padding: 4.0em 0;}
.section_water h3{ text-align: center; font-size: 200%; font-weight: 400;}
.section_water p{ text-align: center;}

@media screen and ( max-width: 480px ) {
  .section_water .content{ padding: 0 1.0em;}
  .section_water h3{ font-size: 128%;}
}

.section_areaplan{ margin: 0; padding: 0; background: rgba( 51, 166,195, 0.3);}
.section_areaplan *{ margin-top: 0;}
.section_areaplan h2{ font-size: 200%; text-align: center; font-weight: 200; letter-spacing: 0.1em;}
.section_areaplan .items{ display: flex; gap: 0 2%; flex-wrap: wrap;}
.section_areaplan article{ flex: 0 0 32%; margin: 1.5em 0 0 0; display: flex; gap: 0 0.5em;}
.section_areaplan .num{}
.section_areaplan .num p{ display: block; display: flex; justify-content: center; align-items: center; line-height: 1.0; width: 1.5em; height: 1.5em; background: #000; color: #FFF;}
.section_areaplan .content{}
.section_areaplan .sub{ font-size: 86%;}
.section_areaplan .title{}
.section_areaplan .body{ font-size: 86%; line-height: 1.5;}
.section_areaplan .full { flex: 0 0 100%; border-top: solid 1px #a8a8a8; padding: 1.0em 0 0 0;}
.section_areaplan .full .content{ display: flex; gap: 0 2.0em;}
@media screen and ( max-width: 480px ) {
  .section_areaplan article{ flex: 0 0 49%;}
}

.section_location{ margin: 0; padding: 0; background: #c3d2e0;}
.section_location .mb{ padding: 4.0em 0;}
.section_location h3{ font-size: 164%; text-align: center;}
.section_location .body{ text-align: center; font-size: 108%;}
.section_location .items{ margin: 0; display: flex; gap: 0 2%;}
.section_location .items p{ margin: 0; font-size: 93%;}
@media screen and ( max-width: 480px ) {
  .section_location .mb{ padding: 2.0em 1.0em;}
}

.section_nightview{ margin: 0; padding: 0; position: relative;}
.section_nightview *{ margin: 0; padding: 0;}
.section_nightview img{ display: block; margin: 0; padding: 0;}
.section_nightview aside{ display: block; margin: 0; padding: 0; position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}

.section_information{}
.section_information .mb{ display: flex; gap: 0 4%;}
.section_information .mb > *{ flex: 0 0 48%;}
@media screen and ( max-width: 480px ) {
  .section_information .mb{ display: block;}
}

.section_news h2{ font-size: 116%; border-bottom: solid 1px #000;}
.section_news ul{ margin: 0; font-size: 93%; line-height: 1.5;}
.section_news li{ margin: 0; padding: 1.0em 0; border-bottom: solid 1px #ccc; display: flex; gap: 1.0em; }
.section_news li *{ margin-top: 0;}
.section_news li time{ display: block; white-space: nowrap;}
.section_news li p{ }
.section_news li a{ color: #000;}

.section_flyer h2{ font-size: 116%; border-bottom: solid 1px #000;}
.section_flyer .flyer_images{ display: flex; gap: 2%; margin: 0;}
.section_flyer .flyer_images > *{ flex: 0 0 49%;}
.section_flyer .flyer_images time{ display: block; margin: 1.0em 0 0 0;}
.section_flyer p{ margin: 0 0 0 0; padding: 0;}

.section_gallery{ background: #E6E6E6;}
.section_gallery .mb{ padding: 4.0em 0; display: flex; gap: 0 4%;}
.section_gallery .mb > *{ flex: 0 0 48%;}
.section_gallery figure{ display: block;}
.section_gallery figure img{ display: block; width: 100%;}
.section_gallery .content{ display: flex; flex-direction: column;}
.section_gallery .body{ margin-top: auto;}
.section_gallery .contact{ display: flex; margin: 0; gap: 0 2%;}
.section_gallery .contact li{ flex: 0 0 49%; margin: 1.0em 0 0 0;}
.section_gallery .contact a{ display: block; text-align: center; color: #000; border: solid 1px #000; text-decoration: none; padding: 0.8em; line-height: 1.3;}
.section_gallery time{ display: block; margin: 1.0em 0 0 0;}
.section_gallery .carnavi{ display: flex; background: #FFF; align-items: center;}
.section_gallery .carnavi span{ background: #B19667; color: #FFF; padding: 1.0em; margin-right: 1.0em;}
@media screen and ( max-width: 480px ) {
  .section_gallery .mb{ padding: 0 0 1.0em 0; display: block;}
  .section_gallery .content{ padding: 1.0em;}
  .section_gallery .contact{ display: block;}
}

.section_cmovie{ margin: 0; padding: 0; background: #000; display: flex; color: #FFF;}
.section_cmovie *{ margin-top: 0;}
.section_cmovie div{ flex: 0 0 50%;}
.section_cmovie figure{ display: block; padding: 56.25% 0 0 0; position: relative;}
.section_cmovie figure iframe{ margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.section_cmovie .title{ display: flex; justify-content: center; align-items: center; font-size: 182%;}
@media screen and ( max-width: 480px ) {
  .section_cmovie .title{ padding: 2.0em 0; text-align: center; font-size: 148%;}
  .section_cmovie{ display: block;}
}


.section_yokoku{ margin:0; padding: 0;}
.section_yokoku article{ display: block; margin: 0; padding: 1.0em; border: solid 2px #a8a8a8;}
.section_yokoku h3{ margin: 0; font-weight: bold;}
.section_yokoku p{ margin: 0.5em 0 0 0; font-size: 93%; line-height: 1.5;}



.ripple{ position: relative;}
.ripple canvas{ margin: 0; padding: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


.animate__animated.animate__fadeIn {
  animate-duration: 3s;
  --animate-duration: 3s;
}
.delay10{ 
  animation-delay: 1.0s;
  --animation-delay: 1.0s;
}
.delay05{ 
  animation-delay: 0.5s;
  --animation-delay: 0.5s;
}
.delay15{ 
  animation-delay: 1.5s;
  --animation-delay: 1.5s;
}