/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/top.scss ***!
  \******************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*!
 * 重要なお知らせ
 */
/* =========================================================
.topImportant
========================================================= */
.topImportant {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media screen and (min-width: 768px ) {
  .topImportant {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.topImportant .topImportantList {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}
.topImportant .topImportantCard {
  padding: 1em;
  display: block;
  background-color: #eff3f9;
}
.topImportant .topImportantCard-txtArea {
  position: relative;
  display: flex;
  line-height: 1.6;
}
.topImportant .topImportantCard-txtArea__icon {
  margin-right: 5px;
  color: #fff;
  position: relative;
}
.topImportant .topImportantCard-txtArea__icon i {
  color: #6b3c30;
}
.topImportant .topImportantCard-txtArea__txt {
  width: calc(100% - 20px);
}
.topImportant .topImportantCard-txtArea__txt a {
  color: #333;
  font-weight: bold;
}
.topImportant .topImportantCard-txtArea__txt a:hover {
  color: #8c7925;
}

/* =========================================================
topHero
========================================================= */
#topHero {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  height: 50vw;
  max-height: calc(100vh - 10vw);
  margin-bottom: 10vw;
}
@media screen and (min-width: 768px ) {
  #topHero {
    margin-bottom: 8vw;
  }
}

#topHero .swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.topHeroBigTxt {
  position: relative;
  text-align: center;
  z-index: 2;
  transform: translate(0%, -55%);
}
.topHeroBigTxt .topHeroBigTxt-txt {
  font-weight: bold;
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1;
  color: #00caff;
  font-size: 170px;
}
@media screen and (max-width: 1399px ) {
  .topHeroBigTxt .topHeroBigTxt-txt {
    font-size: 16vw;
  }
}
.topHeroBigTxt .topHeroBigTxt-img {
  line-height: 1;
}
.topHeroBigTxt .topHeroBigTxt-img img {
  width: 40vw;
}

#topHero .swiper-slide {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#topHero .swiper-slide.slide01 {
  background-image: url("../images/top/topHero-im01.jpg");
}

#topHero .swiper-slide.slide02 {
  background-image: url("../images/top/topHero-im02.jpg");
}

#topHero .swiper-slide.slide03 {
  background-image: url("../images/top/topHero-im03.jpg");
}

#topHero .swiper-slide.slide04 {
  background-image: url("../images/top/topHero-im04.jpg");
}

#topHero .swiper-button-prev,
#topHero .swiper-container-rtl .swiper-button-next {
  outline: none;
  /*--- 91ab3dのところが色 ---*/
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2391ab3d'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

#topHero .swiper-button-next,
#topHero .swiper-container-rtl .swiper-button-prev {
  outline: none;
  /*--- 91ab3dのところが色 ---*/
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2391ab3d'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}

#topHero .swiper-pagination {
  bottom: 10px;
  line-height: 1;
  text-align: center;
  padding: 0 10px;
  width: 100%;
}
#topHero .swiper-pagination span {
  margin: 0 0.2em;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #0073e9;
}

.reveal-box {
  overflow: hidden;
  position: absolute;
  top: 5vw;
  left: 10vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
@media screen and (max-width: 1099px ) {
  .reveal-box {
    top: 3vw;
    left: 3vw;
  }
}

.reveal-box .slide-title {
  width: inherit;
  height: inherit;
  padding: 0.2em 0.5em;
  font-size: 3rem;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  opacity: 0;
}
@media screen and (max-width: 1099px ) {
  .reveal-box .slide-title {
    font-size: 4vw;
  }
}

.reveal-box .slide-title + .slide-title {
  margin-top: -0.5em;
}

.maskPlay {
  animation-name: maskIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  position: relative;
  opacity: 1 !important;
  overflow: hidden;
}

.maskPlay:before {
  animation-name: maskOut;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #003a74;
}

@keyframes maskIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
/* =========================================================
#topUrgent
========================================================= */
#topUrgent {
  margin-bottom: 20px;
}

.topUrgentBox {
  border: 1px solid rgb(255, 75, 0);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  background-color: #fff;
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 575px ) {
  .topUrgentBox {
    flex-direction: column;
  }
}

.topUrgentBox-head {
  padding: 1em;
  background-color: rgb(255, 75, 0);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
}
@media screen and (max-width: 575px ) {
  .topUrgentBox-head {
    padding: 0.5em 1em;
    text-align: center;
  }
}
.topUrgentBox-head span {
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 575px ) {
  .topUrgentBox-head span {
    display: inline-block;
  }
}

.urgentBox {
  flex-grow: 1;
  padding: 1em 1em;
  width: calc(100% - 12em);
}
@media screen and (max-width: 575px ) {
  .urgentBox {
    width: 100%;
  }
}

.urgentNews-title {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  color: rgb(255, 75, 0);
}

.urgentNews-txt {
  line-height: 1.6;
  margin-bottom: 0.5em;
  color: #333;
}

.urgentNews-link a {
  background-color: #84919e;
  color: #fff;
  padding: 0.2em 1em;
  display: inline-block;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.urgentNews-link a:hover {
  background-color: rgb(255, 75, 0);
}

/* =========================================================
共通
========================================================= */
.sectionTitle {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}
.sectionTitle .jp {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #333;
  display: block;
  font-weight: bold;
  z-index: 2;
}
@media screen and (max-width: 575px ) {
  .sectionTitle .jp {
    font-size: 1.4rem;
  }
}
.sectionTitle .en {
  position: relative;
  font-size: 4rem;
  line-height: 1.4;
  color: #333;
  display: block;
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: bold;
  z-index: 1;
}
@media screen and (max-width: 575px ) {
  .sectionTitle .en {
    font-size: 3rem;
  }
}

/* =========================================================
#topSpecial
========================================================= */
#topSpecial {
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 767px ) {
  #topSpecial {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
#topSpecial .sectionTitle .en:after {
  position: absolute;
  font-size: 10vw;
  content: "Special Pick Up";
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: bold;
  line-height: 1.4;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  white-space: nowrap;
  color: rgba(0, 58, 116, 0.05);
  z-index: -1;
}
@media screen and (max-width: 767px ) {
  #topSpecial .sectionTitle .en:after {
    display: none;
  }
}

.topSpecial-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.topSpecial-inner.slidenum-2 {
  max-width: 800px;
}

#topSpecial .swiper-pagination {
  width: 100%;
  position: relative;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

#topSpecial .swiper-pagination .swiper-pagination-bullet {
  margin: 0 4px;
}

/* =========================================================
#topRead
========================================================= */
#topRead .topReadMain {
  background-color: #003a74;
  position: relative;
}

#topRead .topReadMain::before {
  position: absolute;
  font-size: 8vw;
  content: "9floor 6Halls";
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: bold;
  line-height: 1;
  top: 0;
  right: 50%;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.05);
}

#topRead .topReadMain::after {
  position: absolute;
  background: url("../images/top/topRead-img.jpg") no-repeat right top;
  background-position: 50% 50%;
  background-size: cover;
  display: block;
  content: "";
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}
@media screen and (max-width: 767px ) {
  #topRead .topReadMain::after {
    width: 100%;
    height: 200px;
  }
}

.topRead-inner {
  padding-left: 30px;
  padding-right: 30px;
}
@media screen and (max-width: 767px ) {
  .topRead-inner {
    padding-top: 200px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.topRead-txtBox {
  position: relative;
  z-index: 2;
  width: 50%;
  padding-top: 10vw;
  padding-bottom: 10vw;
  padding-right: 2vw;
  color: #fff;
}
@media screen and (max-width: 767px ) {
  .topRead-txtBox {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }
}
.topRead-txtBox h2 {
  font-size: 2.6rem;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 1em;
}
@media screen and (max-width: 767px ) {
  .topRead-txtBox h2 {
    font-size: 1.8rem;
    text-align: center;
  }
}
.topRead-txtBox h2 span {
  display: inline-block;
}
.topRead-txtBox p {
  font-size: 1.8rem;
  line-height: 1.8;
}
@media screen and (max-width: 1099px ) {
  .topRead-txtBox p {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px ) {
  .topRead-txtBox p {
    font-size: 1.4rem;
  }
}

/* =========================================================
#topHall
========================================================= */
#topHall {
  padding-top: 80px;
  padding-bottom: 50px;
  position: relative;
}
@media screen and (max-width: 767px ) {
  #topHall {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

#topHall .sectionTitle .en:after {
  position: absolute;
  font-size: 10vw;
  content: "Hall Rental";
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: bold;
  line-height: 1.4;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  white-space: nowrap;
  color: rgba(0, 58, 116, 0.05);
  z-index: -1;
}
@media screen and (max-width: 767px ) {
  #topHall .sectionTitle .en:after {
    display: none;
  }
}

.topHall-inner {
  position: relative;
  z-index: 2;
}

.hallCardList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}
@media screen and (max-width: 767px ) {
  .hallCardList {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media screen and (max-width: 575px ) {
  .hallCardList {
    margin-left: -5px;
    margin-right: -5px;
  }
}

.hallCardList .hallCard {
  margin-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
  width: 33.333%;
}
@media screen and (max-width: 767px ) {
  .hallCardList .hallCard {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 575px ) {
  .hallCardList .hallCard {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }
}

.hallCardList .hallCard-imgArea {
  margin-bottom: 5px;
  overflow: hidden; /*拡大時にはみ出た部分を隠す*/
}

.hallCardList .hallCard-imgArea img {
  display: block;
  transition-duration: 0.3s; /*変化に掛かる時間*/
}

.hallCardList .hallCard-imgArea img:hover {
  transform: scale(1.1); /*画像の拡大率*/
  transition-duration: 0.3s; /*変化に掛かる時間*/
}

.hallCardList .hallCard-txtArea {
  margin-bottom: 10px;
}

.hallCardList .hallCard-title {
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 0.2em;
}
@media screen and (max-width: 575px ) {
  .hallCardList .hallCard-title {
    font-size: 1.4rem;
  }
}

.hallCardList .hallCard-txt {
  font-size: 1.2rem;
  line-height: 1.4;
}
@media screen and (max-width: 575px ) {
  .hallCardList .hallCard-txt {
    display: none;
  }
}

.hallCardList .hallCard-more {
  color: #003a74;
  font-weight: bold;
}
@media screen and (max-width: 575px ) {
  .hallCardList .hallCard-more {
    display: none;
  }
}

.hallCardList .hallCard a .hallCard-more i {
  transition: all 0.3s ease;
}

.hallCardList .hallCard a:hover .hallCard-more i {
  transform: translate(5px, 0%);
}

/* =========================================================
#topExsample
========================================================= */
#topExsample {
  padding-top: 80px;
  padding-bottom: 50px;
  background: url("../images/top/topExsample-back.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
@media screen and (max-width: 767px ) {
  #topExsample {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

#topExsample .sectionTitle .en:before {
  position: absolute;
  font-size: 10vw;
  content: "Use Example";
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: bold;
  line-height: 1.4;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  z-index: -1;
}
@media screen and (max-width: 767px ) {
  #topExsample .sectionTitle .en:before {
    display: none;
  }
}

.exsampleCardList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}
@media screen and (max-width: 767px ) {
  .exsampleCardList {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media screen and (max-width: 575px ) {
  .exsampleCardList {
    margin-left: -5px;
    margin-right: -5px;
  }
}

.exsampleCardList .exsampleCard {
  margin-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
  width: 33.333%;
}
@media screen and (max-width: 767px ) {
  .exsampleCardList .exsampleCard {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 575px ) {
  .exsampleCardList .exsampleCard {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }
}

.exsampleCardList .exsampleCard a {
  background-color: #fff;
  display: block;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.exsampleCardList .exsampleCard a:hover {
  background-color: #003a74;
  color: #fff;
}

.exsampleCardList .exsampleCard a:hover .exsampleCard-imgArea {
  opacity: 0.7;
  transition: all 0.3s ease;
}

.exsampleCardList .exsampleCard-txtArea {
  padding: 0.5em 1em;
  line-height: 1.2;
}
@media screen and (max-width: 575px ) {
  .exsampleCardList .exsampleCard-txtArea {
    padding: 0.5em;
  }
}

/* =========================================================
#topInfo
========================================================= */
#topInfo {
  background-color: #f5f5f5;
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
}
@media screen and (max-width: 767px ) {
  #topInfo {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

#topInfo .sectionTitle {
  text-align: left;
}
#topInfo .sectionTitle .jp {
  display: inline-flex;
}
#topInfo .sectionTitle .en {
  display: inline-flex;
}

#topInfo .newsList li {
  flex-direction: column;
  flex-wrap: wrap;
}

#topInfo .newsList .news-body {
  width: 100%;
}

@media screen and (max-width: 767px ) {
  #topInfo .topInfo-btnArea {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

#topInfo .topInfo-btn {
  color: #003a74;
  font-weight: bold;
  line-height: 1;
}
@media screen and (max-width: 767px ) {
  #topInfo .topInfo-btn {
    border: 1px solid #003a74;
    padding: 0.5em 0.5em;
  }
}

/* =========================================================
#topAccess
========================================================= */
#topAccess {
  overflow: hidden;
  background: url("../images/top/topAccess-back.jpg") no-repeat center 50%;
  background-size: cover;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width: 767px ) {
  #topAccess {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.topAccessBox {
  background-color: #fff;
  padding: 30px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
@media screen and (max-width: 575px ) {
  .topAccessBox {
    padding: 30px 15px;
  }
}

.topAccessBox .topAccessBoxTitle {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}
.topAccessBox .topAccessBoxTitle .jp {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #333;
  display: block;
  font-weight: bold;
  z-index: 2;
}
@media screen and (max-width: 575px ) {
  .topAccessBox .topAccessBoxTitle .jp {
    font-size: 1.4rem;
  }
}
.topAccessBox .topAccessBoxTitle .en {
  position: relative;
  font-size: 4rem;
  line-height: 1.2;
  color: #003a74;
  display: block;
  font-family: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: bold;
  z-index: 1;
}
@media screen and (max-width: 575px ) {
  .topAccessBox .topAccessBoxTitle .en {
    font-size: 2.6rem;
  }
}

.topAccessBox h4 {
  font-weight: bold;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 575px ) {
  .topAccessBox h4 {
    text-align: left;
  }
}

.topAccessBoxList {
  text-align: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 575px ) {
  .topAccessBoxList {
    text-align: left;
  }
}

.topAccessBox ul {
  display: inline-block;
}
.topAccessBox ul li {
  padding-left: 1.2em;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 0.2em;
  position: relative;
}
@media screen and (max-width: 575px ) {
  .topAccessBox ul li {
    font-size: 1.6rem;
  }
}
.topAccessBox ul li:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgb(255, 241, 0);
  content: "\f111";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.topAccessBox .topAccessTxt {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 20px;
}
@media screen and (max-width: 575px ) {
  .topAccessBox .topAccessTxt {
    text-align: left;
  }
}

.topAccessBox .topAccessBtnArea {
  text-align: center;
}

.topAccessBox .topAccess-btn {
  font-family: inherit;
  font-size: inherit;
  background: none;
  cursor: pointer;
  padding: 1em 2em 1em 2em;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  position: relative;
  transition: all 0.3s ease;
  border: 3px solid #003a74;
  color: #003a74;
  overflow: hidden;
}

.topAccessBox .topAccess-btn:active {
  border-color: #003a74;
  color: #fff;
}

.topAccessBox .topAccess-btn:hover {
  background: #003a74;
  color: #fff;
}

.topAccessBox .topAccess-btn:before {
  font-family: "Font Awesome 6 Free";
  content: "\f054";
  font-weight: 900;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  position: absolute;
  color: #fff;
  transition: all 0.3s ease;
  right: -10%;
  top: 50%;
  transform: translate(0%, -50%);
}

.topAccessBox .topAccess-btn:active:before {
  color: #fff;
}

.topAccessBox .topAccess-btn:hover:before {
  right: 10px;
}

/* =========================================================
#mainBnrArea
========================================================= */
#mainBnrArea {
  overflow: hidden;
  padding-top: 65px;
  padding-bottom: 50px;
}
@media screen and (max-width: 767px ) {
  #mainBnrArea {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}

#mainBnrArea .mainBnrList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}
#mainBnrArea .mainBnrList li {
  margin-bottom: 15px;
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 767px ) {
  #mainBnrArea .mainBnrList li {
    width: 100%;
  }
}
#mainBnrArea .mainBnrList li a {
  display: block;
}
/* =========================================================
#kanrenBnrArea
========================================================= */
#kanrenBnrArea {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #f5f5f5;
}
@media screen and (max-width: 767px ) {
  #kanrenBnrArea {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

#kanrenBnrArea h4 {
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.4;
  margin-bottom: 0.5em;
}

#kanrenBnrArea .kanrenBnrList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-left: -5px;
  margin-right: -5px;
}

#kanrenBnrArea .kanrenBnrList li {
  width: 25%;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
@media screen and (max-width: 767px ) {
  #kanrenBnrArea .kanrenBnrList li {
    width: 50%;
  }
}

#kanrenBnrArea .kanrenBnrList li a {
  display: block;
}

/*# sourceMappingURL=top.css.map*/