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

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

figure img{ display: block;}
figure figcaption{ margin: 0 0 0 0; padding: 0; font-size: 77%;}


.section_ss{}
.ssbox11{ display: flex; gap: 0 2%;}
.ssbox11>*:nth-child(1){ flex: 0 0 33%;}
.ssitems{ display: flex;; flex-wrap: wrap; gap: 1.0em 2%;}
.ssitems article{ flex: 0 0 23.5%;}
.section_ss article{ display: block;}
.section_ss article figure{ display: block; margin: 0; padding: 0;}
.section_ss article h3{ margin: 0; padding: 0; font-weight: bold;}
.section_ss article p{ margin: 0.5rem 0 0 0; font-size: 86%; line-height: 1.5;}

@media screen and ( max-width: 480px ) {
  .ssbox11{ display: block;}
  .ssitems article{ flex: 49%;}
}


.section_shop{}
.section_shop .items .shop_title{ font-size: 128%; font-weight: normal;}
.section_shop .items{}
.section_shop .items h3{ margin: 0; padding: 0; font-weight: normal; font-size: 86%;}
.section_shop .items p{ margin: 0.5rem 0 0 0; font-size: 77%; line-height: 1.5}
.section_shop .items figure{ margin: 0; padding: 0; display: block;}
.section_shop .items figure img{ display: block;}
.section_shop .items figure figcaption{ font-size: 66%; text-align: right;}
.shop_cat{ margin: 0; padding: 0;}
.shop_cat li{ margin: 1px 0 0 0; font-size: 86%; text-align: center; color: #FFFFFF; background: #076483; }
.shop_cat li span{ font-size: 116%;}
.spbox11{ display: flex; gap: 0 2%; align-items: center;}
.spbox11>*:nth-child(1){ flex: 0 0 49%;}
.spbox12{ display: flex; gap: 0 2%;}
.spbox12>*:nth-child(1){ flex: 0 0 49%;}
.spbox13{ display: flex; gap: 0 2%;}
.spbox13 .figure{ flex: 0 0 33%;}
.spbox13 h4{ margin: 0; background: #94c8ca; color: #FFFFFF; text-align: center; font-size: 93%;}
.spbox13 ul{ margin: 0.5em 0 0 0; font-size: 77%; line-height: 1.5;}
.spbox13 ul li{ margin-top:0;}
@media screen and ( max-width: 480px ) {
  .spbox11{ display: block;}
  .spbox12{ display: block;}
  .spbox13{ display: block;}
}



.section_life{ margin: 0; background: #EAF6FD;}
.section_life header{ margin: 0; padding: 0; background: url("../img/asset32.webp") no-repeat center center / cover;}
.section_life header .mb{ padding: 4.0rem 0;}
.section_life header h2{ margin: 0; padding: 0; width: 40%;}
.section_life header h2 img{ display: block;}

.section_life .lifebox{ display: flex; margin: 2.0rem 0 0 0; gap: 1.0rem 2%; line-height: 1.5; }
.section_life .lifebox *{ margin-top: 0;}
.section_life .lifebox time{ flex: 0 0 15%;}
.section_life .lifebox .body{ flex: 0 0 50%;}
.section_life .lifebox h3{ font-size: 108%; font-weight: bold;}
@media screen and ( max-width: 480px ) {
  .section_life .lifebox{ flex-wrap: wrap;}
  .section_life .lifebox time{ flex: 0 0 25%;}
  .section_life .lifebox .body{ flex: 0 0 100%;}
}

.section_life .shops{ display: flex; gap: 0 4%; justify-content: center;}
.section_life .shops article{ flex: 0 0 30.6%;}
.section_life .shops h4{ background: #FFFFFF; border: solid 1px #CCCCCC; border-radius: 1.5em; text-align: center;}
.section_life .shops p{ margin: 0.5rem 0 0 0; padding: 0; font-size: 93%; line-height: 1.5;}
.section_life .shops p.note{ font-size: 77%;}
@media screen and ( max-width: 480px ) {
  .section_life .shops{ gap: 1.0em 2%; flex-wrap: wrap;}
  .section_life .shops article{ flex: 0 0 49%; flex-grow: 1;}
}

.awuarium{ margin: 4.0em 0 0 0; background: #FFFFFF; padding: 2.0em; box-shadow: 0 0 0.5em #000000; display: flex; gap: 0 2%; transform: rotate(-0.5deg);}
.awuarium .awuarium_title{ flex: 0 0 10%;}
@media screen and ( max-width: 480px ) {
  .awuarium{ transform: rotate(0); margin: 2.0em 0.3em; display: block; padding: 0.5em;}
  .awuarium .awuarium_title{ display: none;}
}


.access_title02{ color: #710000; font-size: 128%; font-weight: bold; text-align: center;}
.access_title02 strong{ font-size: 128%;}

.map_items{ display: flex; gap: 1.0em 2%; flex-wrap: wrap;}
.map_items article{ flex: 0 0 23.5%;}
.map_items figure{ display: block; margin: 0;}
.map_items h3{ margin: 0 0 0 0; font-size: 100%; font-weight: bold;}
.map_items h3::first-letter{ color: #076483;}
@media screen and ( max-width: 480px ) {
  .map_items article{ flex: 0 0 32%;}
  .map_items h3{ font-size: 77%;}
}

.restaurant_items{ display: flex; gap: 1.0em 2%; flex-wrap: wrap;}
.restaurant_items article{ flex: 0 0 49%;}
.restaurant_items figure{ display: block; margin: 0; background: no-repeat center center / cover; position: absolute;}
.restaurant_items .cpx{ margin: 0; padding: 66.6% 0 0 0; position: relative;}
.restaurant_items .cpx01 figure:nth-child(1){ left: 0; top: 0; width: 50%; height: 100%;}
.restaurant_items .cpx01 figure:nth-child(2){ left: 50%; top: 0; width: 50%; height: 50%;}
.restaurant_items .cpx01 figure:nth-child(3){ left: 50%; top: 50%; width: 50%; height: 50%;}
.restaurant_items .cpx02 figure:nth-child(1){ left: 0; top: 0; width: 100%; height: 50%;}
.restaurant_items .cpx02 figure:nth-child(2){ left: 0%; top: 50%; width: 50%; height: 50%;}
.restaurant_items .cpx02 figure:nth-child(3){ left: 50%; top: 50%; width: 50%; height: 50%;}
.restaurant_items .cpx03 figure:nth-child(1){ left: 0; top: 0; width: 50%; height: 50%;}
.restaurant_items .cpx03 figure:nth-child(2){ left: 50%; top: 0; width: 50%; height: 50%;}
.restaurant_items .cpx03 figure:nth-child(3){ left: 0%; top: 50%; width: 100%; height: 50%;}
.restaurant_items h3{ margin: 0; font-size: 108%; font-weight: bold;}
.restaurant_items p{ margin:0.5rem 0 0 0; font-size: 93%; line-height: 1.5;}
.restaurant_items p.sub{ font-size: 77%;}
.restaurant_items p.note{ font-size: 77%;}

.kamonwharf_items{ display: flex; gap: 1.0em 2%; flex-wrap: wrap;}
.kamonwharf_items article{ flex: 0 0 32%;}
.kamonwharf_items figure{ display: block; margin: 0;}
.kamonwharf_items h3{ margin: 0.5rem 0 0 0; font-size: 108%; font-weight: bold;}
.kamonwharf_items p{ margin:0.5rem 0 0 0; font-size: 93%; line-height: 1.5;}
.kamonwharf_items p.note{ font-size: 77%;}
@media screen and ( max-width: 480px ) {
  .kamonwharf_items article{ flex: 0 0 49%;}
}

.btn_group{ display: flex; justify-content: center; gap: 0 1.5em; font-size: 86%;}
@media screen and ( max-width: 480px ) {
  .btn_group{ display: block; text-align: center;}
}