@charset "utf-8";

.wrap {display: flex;}

@media screen and (max-width: 767px) {
  .wrap {display: block;}
}

.header {width: 330px; background: #fff;}
.header .hd-top-mo {display: none;}
.header .hd-top.fixed {position: relative; top: 0; left: 0; width: 330px;}
.header-inner {display: flex; flex-direction: column; justify-content: space-between; position: relative; height: 100%;}
.header .logo-wrap {display: flex; align-items: center; justify-content: center; height: 150px;}
.header .nav {padding-top: 100px;}
.header .nav-item {margin-bottom: 50px; text-align: center;}
.header .nav-item a {color: #333; font-weight: 800; font-size: 24px; line-height: 1;}
.header .head-foot {padding: 30px;}
.header .head-foot .sns-list {display: flex; gap: 30px;}
.header .head-foot .addr {margin-top: 32px; font-weight: 800; font-size: 14px; line-height: 20px;}
.header .head-foot .info-list {margin-top: 10px;}
.header .head-foot .info-list li {font-weight: 700; font-size: 14px; line-height: 20px;}
.header .head-foot .info-list strong {font-weight: 800;}
.header .head-foot .copy {margin-top: 25px; font-size: 12px; line-height: 20px;}
.header .head-foot .copy em {font-weight: 800; color: #3e4bad;}

@media screen and (max-width: 767px) {
  .header {position: fixed; top: 0; left: 0; width: 100%; z-index: 10;}
  .header .hd-top-mo {display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 20px 0 10px; border-bottom: 1px solid #ccc;}
  .header .hd-top-mo .mo-logo {width: 77px;}
  .header .hd-top.fixed {top: 0 !important; width: auto !important;}
  .header .btn-nav {width: 27px; height: 23px; background-repeat: no-repeat; background-size: 100%; background-image: url(../img/btn-mo-all-open.png);}
  .header .btn-nav .txt {position: absolute; left: -9999vw;}
  .header-inner {display: none; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: 100vh; padding-top: 50px; background: #fff;}
  .header-inner.open {display: flex;}
  .header .logo-wrap {display: none;}
  .header .nav {padding-top: 0;}
  .header .nav.fixed {position: fixed; top: 0; left: 0; width: 330px;}
  .header .nav-item a {font-size: 30px;}
  .header .head-foot {padding: 0;}
  .header .head-foot .sns-list {justify-content: center; gap: 8px;}
  .header .head-foot .sns-list a {display: block; width: 21px;}
  .header .head-foot .addr {margin-top: 25px; font-size: 12px; line-height: normal; text-align: center;}
  .header .head-foot .info-list {margin-top: 10px;}
  .header .head-foot .info-list li {font-weight: 700; font-size: 12px; line-height: normal; text-align: center;}
  .header .head-foot .info-list strong {font-weight: 800;}
  .header .head-foot .copy {margin-top: 12px; font-size: 10px; line-height: 1; text-align: center;}
  .header .btn-close {position: absolute; top: 13px; right: 23px; width: 24px;}
}

.main-ct {width: calc(100% - 330px);}
.main-visual {position: relative; max-height: 100vh;}
.main-visual .swiper-slide {max-height: 100vh; align-items: center;}
.main-visual .swiper-slide img {width: 100%;}
.visual .img-overlay {position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); text-align: center;}
.visual .img-overlay .txt1 {color: #fff; font-weight: 800; font-size: 80px; line-height: 86px; white-space: nowrap;}
.visual .img-overlay .txt2 {margin-top: 10px; color: #fff; font-size: 24px; line-height: 30px;}
.visual .img-overlay .swiper-pagination {display: flex; justify-content: center; gap: 20px; position: static; margin-top: 20px;}
.visual .img-overlay .swiper-pagination-bullet {width: 15px; height: 15px; margin: 0 !important; border: 2px solid #fff; opacity: 1; background: none; cursor: pointer;}
.visual .img-overlay .swiper-pagination-bullet-active {background: #fff;}

@media screen and (max-width: 767px) {
  .main-ct {width: auto;}
  .main-visual {height: auto;}
  .main-visual .swiper-slide {height: auto;}
  .main-visual .swiper-slide img {width: auto; height: auto; max-width: none;}
  .visual .img-overlay .txt1 {font-size: 40px; line-height: 43px;}
  .visual .img-overlay .txt2 {margin-top: 10px; font-size: 12px; line-height: 15px; white-space: nowrap;}
  .visual .img-overlay .swiper-pagination {gap: 10px; margin-top: 10px;}
  .visual .img-overlay .swiper-pagination-bullet {width: 8px; height: 8px;border: 1px solid #fff;}
}

.main-ct .section {padding: 150px 0;}
.section .cont-head {text-align: center;}
.section .before-tit {color: #3e4bad; font-size: 24px; line-height: 1; text-align: center;}
.section .cont-tit {margin-top: 20px; color: #222; font-weight: 800; font-size: 50px; line-height: 1; text-align: center;}

@media screen and (max-width: 767px) {
  .main-ct .section {padding: 50px 10px;}
  .section .before-tit {font-size: 12px;}
  .section .cont-tit {margin-top: 10px; font-size: 25px;}
}

.cont-a .cont-a-txt {margin-top: 25px; color: #222; font-size: 18px; line-height: 24px; text-align: center;}
.cont-a .img-box {display: flex; justify-content: space-between; margin-top: 50px;}
.cont-a .img-left {width: 370px;}
.cont-a .img-right img {width: 770px; height: 272px;}
.cont-a .img-right .img2 {margin-top: 30px;}

@media screen and (max-width: 767px) {
  .cont-a .cont-a-txt {margin-top: 12px; font-size: 10px; line-height: 12px;}
  .cont-a .img-box {margin-top: 25px;}
  .cont-a .img-left {width: 32%;}
  .cont-a .img-right {width: calc(68% - 8px); height: auto;}
  .cont-a .img-right > div {display: flex; align-items: center; height: calc(50% - 8px); overflow: hidden;}
  .cont-a .img-right picture {height: 100%;}
  .cont-a .img-right img {width: auto; height: 100%;}
  .cont-a .img-right .img2 {margin-top: 14px;}
}

.cont-b .b-tab {display: flex; justify-content: center; margin-top: 30px; gap: 0 30px;}
.cont-b .btn-tab {display: flex; justify-content: center; align-items: center; width: 170px; height: 50px; border: 1px solid #ccc; border-radius: 50px; color: #222; font-size: 24px;}
.cont-b .btn-tab.active {color: #fff; background: #3e4bad; border-color: #3e4bad;}
.cont-b .bSwiper {display: none; margin: 50px -15px 0;}
.cont-b .bSwiper.active {display: block;}
.cont-b .bSwiper .swiper-slide {padding: 0 15px;}
.cont-b .bSwiper .swiper-slide img {width: 100%;}
.cont-b .bSwiper .btn-wrap {display: flex; justify-content: center; margin-top: 50px;}
.cont-b .bSwiper .btn-wrap div {margin: 0 15px; cursor: pointer;}

@media screen and (max-width: 767px) {
  .cont-b .b-tab {margin-top: 15px; gap: 0 8px;}
  .cont-b .btn-tab {width: 100%; height: 25px; font-size: 12px;}
  .cont-b .bSwiper {margin: 25px 30px 0;}
  .cont-b .bSwiper.active {display: block;}
  .cont-b .bSwiper .swiper-slide {padding: 0 15px;}
  .cont-b .bSwiper .btn-wrap {margin-top: 15px;}
  .cont-b .bSwiper .btn-wrap div {width: 35px; margin: 0 4px;}
}

.cont-c .map {margin-top: 50px;}
.cont-c .address {display: block; margin-top: 50px; color: #333; font-size: 24px; line-height: 1; text-align: center;}

@media screen and (max-width: 767px) {
  .cont-c .map {margin-top: 25px;}
  .cont-c .address {margin-top: 25px; font-size: 12px;}
}

.cont-d .tbl-list {width: 100%; margin-top: 50px;}
.cont-d .tbl-list .col1 {width: auto;}
.cont-d .tbl-list .col2 {width: 170px;}
.cont-d .tbl-list thead tr {border-top: 1px solid; border-bottom: 1px solid;}
.cont-d .tbl-list thead th {height: 50px; color: #333; font-size: 20px;}
.cont-d .tbl-list tbody tr {border-bottom: 1px solid #ccc;}
.cont-d .tbl-list tbody td {height: 50px; color: #333; font-size: 20px;}
.cont-d .tbl-list a {position: relative; color: #333; font-weight: 700; font-size: 20px;}
.cont-d .tbl-list a.new:after {content: ''; display: inline-block; vertical-align: middle; width: 17px; height: 17px; margin-left: 10px; background: url(../img/new.png) 0/100% no-repeat;}
.cont-d .pagination {display: flex; justify-content: center; margin-top: 50px;}
.cont-d .pagination .p-num {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; margin: 0 15px; color: #333; font-size: 20px;}
.cont-d .pagination .p-num:hover,
.cont-d .pagination .p-num.active {color: #fff; font-weight: 700; background: #cd4c3b;}

@media screen and (max-width: 767px) {
  .cont-d .tbl-list {margin-top: 25px;}
  .cont-d .tbl-list .col2 {width: 50px;}
  .cont-d .tbl-list thead th {height: 30px; font-size: 11px;}
  .cont-d .tbl-list tbody td {height: 30px; font-size: 10px;}
  .cont-d .tbl-list a {font-size: 10px;}
  .cont-d .tbl-list a.new:after {width: 8px; height: 8px; margin-left: 5px;}
  .cont-d .pagination {margin-top: 25px;}
  .cont-d .pagination .p-num {width: 25px; height: 25px; margin: 0 10px; font-size: 15px;}
  .cont-d .pagination .p-num:hover {color: #333; background: none;}
}

.btn-scroll-top {position: fixed; bottom: 50px; right: 50px; z-index: 9; width: 50px; height: 50px; background-image: url(../img/scroll-top.png); background-size: 100%; transition: .3s;}
.btn-scroll-top:hover {background-image: url(../img/scroll-top-over.png);}
.btn-scroll-top span {position: absolute; left: -9999vw;}

@media screen and (max-width: 767px) {
  .btn-scroll-top {bottom: 20px; right: 20px; width: 40px; height: 40px;}
}