@charset "utf-8";

@font-face {
  font-family: 'cabin';
  src: url('./lib/fonts/Cabin.ttf') format('truetype');
}
@font-face {
  font-family: 'manrope';
  src: url('./lib/fonts/Manrope.ttf') format('truetype');
}

html, body {
	margin: 0;
  color: #666666;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.cabin {
  font-family: cabin;
}
.manrope {
  font-family: manrope;
}
[v-cloak]{
  display: none !important;
}


@media screen and (min-width: 769px) {
  html, body {
    font-size: calc((var(--width) / 1366) * 10px);
  }
  :root {
    --width: 1366;
  }
  .sp {
    display: none!important;
  }
  .youtube {
    display: block;
    margin: 0 auto;
    width: 865px;
    aspect-ratio: 16 / 9;
  }
  
  .youtube iframe {
    /* display: block;
    margin: 0 auto; */
    width: 865px;
    height: 487px;
  }
}
@media screen and (max-width: 768px) {
  html, body {
    font-size: calc((var(--width) / 768) * 10px);
  }
  :root {
    --width: 768;
  }
  .pc {
    display: none!important;
  }
  .youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  
  .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .youtube-wrapper {
    width: min(65rem, 650px);
    margin: 0 auto;
  }

}

/*------------
  common
------------*/

.container {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}
.sec-ttl {
  display: flex;
  color: #00428E;
}
.sec-ttl p {
  margin-bottom: auto;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.2rem;
}
.sec-ttl span {
  margin-top: auto;
  font-size: 17px;
  letter-spacing: 0.5rem;
}
.sec-ttl .ttl-border {
  width: 33px;
  height: 42px;
  margin: 0 10px 0 35px;
  background: url("../img/common/top/ttl_border.png") no-repeat center/contain;
}
.more-btn {
  text-align: right;
}
.more-btn a {
  display: inline-block;
  position: relative;
  padding-right: 115px;
  font-size: 19px;
  font-weight: 600;
  color: #00428E;
}
.more-btn a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 90px;
  height: 1px;
  background: #00428E;
}
.more-btn a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border: 1px solid #00428E;
  border-radius: 100%;
}

@media screen and (min-width: 769px) {
  .hover-img {
    position: relative;
    z-index: 1;
  }
  .hover-img img {
    transition: transform 0.5s;
  }
  .hover-img:hover img {
    transform: scale(1.1);
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: min(65.0rem, 650px);
  }
  .sec-ttl p {
    font-size: min(3.8rem, 38px);
  }
  .sec-ttl span {
    font-size: min(2.1rem, 21px);
  }
  .sec-ttl .ttl-border {
    width: min(4.2rem, 42px);
    height: min(5.2rem, 52px);
  }
  .more-btn a {
    font-size: min(3.2rem, 32px);
  }
}


/*
  slick
------------*/

.slick-white,
.slick-blue {
  width: 820px;
  margin: 0 auto;
}
.slick-white .slick-prev,
.slick-blue .slick-prev,
.slick-white .slick-next,
.slick-blue .slick-next {
  z-index: 99;
  width: 45px;
  height: 45px;
}
.slick-white .slick-prev,
.slick-blue .slick-prev {
  left: -90px;
}
.slick-white .slick-next,
.slick-blue .slick-next {
  right: -90px;
}
.slick-white .slick-prev::before,
.slick-blue .slick-prev::before,
.slick-white .slick-next::before,
.slick-blue .slick-next::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}
.slick-white .slick-prev::before {
  background: url("../img/common/top/prev_white.png") no-repeat center/contain;
}
.slick-white .slick-next::before {
  background: url("../img/common/top/next_white.png") no-repeat center/contain;
}
.slick-blue .slick-prev::before {
  background: url("../img/common/top/prev_blue.png") no-repeat center/contain;
}
.slick-blue .slick-next::before {
  background: url("../img/common/top/next_blue.png") no-repeat center/contain;
}

@media screen and (max-width: 768px) {
  .slick-white,
  .slick-blue {
    width: 100%;
  }
  .slick-white .slick-prev,
  .slick-blue .slick-prev,
  .slick-white .slick-next,
  .slick-blue .slick-next {
    width: min(7.6rem, 76px);
    height: min(7.6rem, 76px);
  }
  .slick-blue .slick-prev,
  .slick-blue .slick-next {
    top: 33%;
  }
  .slick-white .slick-prev {
    left: max(-3.0rem, -30px);
  }
  .slick-blue .slick-prev {
    left: max(-4.0rem, -40px);
  }
  .slick-white .slick-next {
    right: max(-3.0rem, -30px);
  }
  .slick-blue .slick-next {
    right: max(-4.0rem, -40px);
  }
}


/*------------
  header
------------*/

.header {
  position: relative;
  margin-top: 20px;
}
.header._search::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 165px;
  background: rgba(255, 255, 255, 0.9);
}
.header-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}
.header-logo {
  width: 157px;
  margin-right: auto;
}
.header-lang {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: #00428E;
  cursor: pointer;
}
.header-lang span {
  width: 23px;
  margin-left: 20px;
}
.header-lang .lang-menu {
  display: none;
  position: absolute;
  z-index: 9;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 20px 25px;
  background: #FFFFFF;
  border: 1px solid #00428E;
  border-top: none;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
  cursor: auto;
}
.header-lang .lang-menu p {
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  color: #8D8D8D;
}
.header-lang .lang-menu p + p {
  margin-top: 20px;
}
.header-lang .lang-menu p._active {
  color: #00428E;
}
.header-lang .lang-menu p._active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border: 1px solid #00428E;
  border-radius: 100%;
}
.header-search {
  width: 17px;
  margin-left: 70px;
  cursor: pointer;
}
.header-search img {
  transform: rotate(-45deg);
}
.header-search:focus {
  background: #ffa;
}
.header-form {
  position: absolute;
  z-index: 9;
  top: 50%;
  right: -25px;
  transform :translateY(-50%);
  width: 67px;
  padding: 10px 25px;
  font-size: 12px;
  background: #FFFFFF;
  border: 1px solid #00428E;
  border-radius: 100px;
  transition: transform 0.5s, width 0.5s;
  opacity: 0;
  pointer-events: none;
}
.header-form._active {
  width: 397px;
  opacity: 1;
  pointer-events: auto;
}
.header-form img {
  transform: rotate(-45deg);
}
.header-form .form-wrapper {
  display: flex;
  align-items: center;
}
.header-form .form-wrapper input {
  width: 100%;
  margin-right: 10px;
  padding: 5px 0;
  border: none;
}
.header-form .form-wrapper input:focus-visible {
  outline: none;
}
.header-form .form-wrapper .input-search-img {
  flex-shrink: 0;
  width: 17px;
  margin-left: auto;
  transform: rotate(-45deg);
}
.header-form .form-wrapper i {
  flex-shrink: 0;
  width: 17px;
  margin-left: auto;
}
.header-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .header._search::before {
    z-index: 8;
    height: min(30.0rem, 300px);
  }
  .header-logo {
    width: min(22.0rem, 220px);
  }
  .header-lang {
    font-size: min(2.1rem, 21px);
  }
  .header-lang span {
    width: min(3.4rem, 34px);
    margin-left: min(2.5rem, 25px);
  }
  .header-search {
    width: min(2.8rem, 28px);
    margin-left: min(8.0rem, 80px);
  }
  .header-form {
    top: 7.0rem;
    right: 50%;
    transform: translate(50%, 0);
    width: 0;
    padding: min(1.5rem, 15px) min(4.0rem, 40px);
    font-size: min(1.9rem, 19px);
  }
  .header-form._active {
    width: min(53.0rem, 530px);
  }
  .header-form .form-wrapper i {
    width: min(2.7rem, 27px);
  }
  .header-toggle {
    width: min(5.0rem, 50px);
    margin-left: min(4.5rem, 45px);
    cursor: pointer;
  }
  .header-menu {
    position: absolute;
    z-index: 999;
    top: max(-5.5rem, -55px);
    left: max(-5.9rem, -59px);
    width: 100vw;
    padding: min(10.0rem, 100px) min(9.0rem, 90px);
    color: #00428E;
    background: #FFFFFF;
  }
  .header-menu .menu-close {
    position: absolute;
    top: min(10.0rem, 100px);
    right: min(6.0rem, 60px);
    width: min(3.6rem, 36px);
    cursor: pointer;
  }
  .header-menu .menu-ttl {
    display: flex;
    align-items: flex-end;
    font-size: min(4.1rem, 41px);
    font-weight: 700;
  }
  .header-menu .menu-ttl p {
    margin-right: min(5.0rem, 50px);
    font-size: min(4.7rem, 47px);
  }
  .header-menu .menu-main {
    margin: min(12.5rem, 125px) auto min(9.0rem, 90px);
  }
  .header-menu .menu-main a {
    display: flex;
    align-items: center;
    font-size: min(1.6rem, 16px);
    font-weight: 700;
  }
  .header-menu .menu-main a + a {
    margin-top: min(3.0rem, 30px);
  }
  .header-menu .menu-main a p {
    flex-shrink: 0;
    width: min(24.0rem, 240px);
    font-size: min(2.8rem, 28px);
  }
  .header-menu .menu-sub {
    font-size: min(2.2rem, 22px);
    font-weight: 700;
  }
  .header-menu .menu-sub a {
    display: block;
  }
  .header-menu .menu-sub a + a {
    margin-top: min(3.5rem, 35px);
  }
}


/*------------
  footer
------------*/

.footer {
  padding-bottom: 25px;
}
.footer-menu {
  display: flex;
  flex-wrap: wrap;
}
.footer-menu .menu-item {
  width: 25%;
  padding: 15px 0;
}
/*.footer-menu .menu-item:nth-of-type(n + 5) {
  border-top: 1px solid #00428E33;
}*/
.footer-menu .menu-item{
  border-bottom: 1px solid #00428E33;
}
.footer-menu .menu-item a {
  display: block;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
  border-right: 1px solid #00428E33;
}
.footer-menu .menu-item:nth-of-type(4n) a {
  border-right: none;
}
.footer-nav {
  display: flex;
  justify-content: center;
  margin-top: 70px;
}
.footer-nav a {
  padding: 0 40px;
  font-size: 13px;
}
.footer-nav a + a {
  border-left: 1px solid #00428E33;
}
.footer-sns {
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
}
.footer-sns a {
  width: 40px;
  margin-left: 15px;
}
.footer-cright {
  margin-top: 20px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: #00428E;
}

@media screen and (max-width: 768px) {
  .footer-menu {
    border-top: 1px solid #00428E33;
  }
  .footer-menu .menu-item {
    width: 50%;
    padding: min(1.5rem, 15px) 0;
    border-bottom: 1px solid #00428E33;
  }
  /*.footer-menu .menu-item:nth-of-type(n + 3) {
    border-top: 1px solid #00428E33;
  }*/
  .footer-menu .menu-item:nth-of-type(n + 5){
    border-top:none;
  }
  .footer-menu .menu-item a {
    text-align: left;
    padding: min(2.0rem, 20px) 0;
    font-size: min(2.2rem, 22px);
  }
  .footer-menu .menu-item:nth-of-type(2n) a {
    border-right: none;
  }
  .footer-menu .menu-item:nth-of-type(2n) a {
    padding-left: min(3.0rem, 30px);
  }
  .footer-nav {
    margin-top: min(12.5rem, 125px);
  }
  .footer-nav a {
    padding: 0 min(2.0rem, 20px);
    font-size: min(1.8rem, 18px);
  }
  .footer-sns {
    margin-top: min(11.0rem, 110px);
  }
  .footer-sns a {
    width: min(6.6rem, 66px);
    margin-left: min(3.0rem, 30px);
  }
  .footer-cright {
    margin-top: min(4.0rem, 40px);
    padding: 0;
  }
}


/*------------
  nav
------------*/

.nav {
  margin: 10px auto;
}
.nav ul {
  display: flex;
  justify-content: center;
  border-top: 1px solid #00428E;
  border-bottom: 1px solid #00428E;
}
.nav ul li a {
  display: block;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #00428E;
  letter-spacing: 0.2rem;
}

@media screen and (max-width: 768px) {
  .nav {
    display: none;
  }
}


/*------------
  main-nav
------------*/

.main-nav {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  background: #FFFFFF;
  border-top: 1px solid #00428E;
  border-bottom: 1px solid #00428E;
  transition: transform 0.5s;
}
.main-nav._scroll {
  transform: translateY(0%);
}
.main-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
}
.main-nav ul li a {
  display: block;
  padding: 15px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #00428E;
}

@media screen and (max-width: 768px) {
  .main-nav {
    display: none;
  }
}


/*------------
  kv
------------*/

#kv {
  margin-top: 20px;
}
#kv .kv-rota {
  width: 865px;
  margin-right: auto;
  margin-left: auto;
}
#kv .kv-mv {
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 865px;
  margin: 0 auto;
  border: 3px solid #00428E26;
  border-radius: 14px;
}
#kv .kv-mv .mv-image {
  overflow: hidden;
  width: 560px;
  /* min-height: 365px; */
  height: 420px;
}
#kv .kv-mv .mv-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#kv .kv-mv .mv-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 560px);
  padding: 55px 40px;
  font-size: 14px;
  line-height: 2;
}
#kv .kv-mv .mv-detail span {
  display: block;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
  color: #00428E;
}
#kv .kv-slider {
  width: 850px;
}
#kv .kv-slider .slick-track {
  display: flex;
}
#kv .kv-slider .slick-slide {
  height: auto!important;
}
#kv .kv-slider .slick-list {
  padding: 25px 15px 0;
}
#kv .kv-slider .slider-slide {
  position: relative;
  width: calc((820px - 50px) / 3);
  margin-right: 25px;
  border: 2px solid #00428E26;
  border-radius: 14px;
}
#kv .kv-slider .slider-image {
  overflow: hidden;
  position: relative;
  z-index: 1;
  height: 195px;
  border-radius: 14px 14px 0 0;
}
#kv .kv-slider .slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#kv .kv-slider .slider-tag {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: -15px;
  padding: 7px 20px;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  background: #00428E;
  border-radius: 5px;
  transform: rotate(-40deg);
}
#kv .kv-slider .slider-detail {
  padding: 25px;
  font-size: 12px;
}
#kv .kv-slider .slider-detail span {
  display: block;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 700;
  color: #00428E;
}
#kv .kv-nav {
  display: flex;
  justify-content: center;
  margin: 45px 0 65px;
}
#kv .kv-nav .nav-item {
  display: flex;
  flex-direction: column;
  margin: 0 40px;
}
#kv .kv-nav .nav-item p {
  margin: 0 auto 35px;
}
#kv .kv-nav .nav-item:nth-of-type(1) p {
  width: 78px;
}
#kv .kv-nav .nav-item:nth-of-type(2) p {
  width: 40px;
}
#kv .kv-nav .nav-item:nth-of-type(3) p {
  width: 48px;
}
#kv .kv-nav .nav-item:nth-of-type(4) p {
  width: 34px;
}
#kv .kv-nav .nav-item span {
  margin-top: auto;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #00428E;
}
#kv .kv-banner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 865px;
  margin: 0 auto 135px;
  padding-top: 40px;
  border-top: 1px solid #00428E33;
  gap: 30px;
}
#kv .kv-banner .banner-item {
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 410px;
  min-height: 116px;
  border-radius: 10px;
}
#kv .kv-banner .banner-item._border {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #00428E33;
}

@media screen and (max-width: 768px) {
  #kv .kv-rota {
    width: min(65rem, 650px);
  }
  #kv .kv-mv {
    display: block;
    /* width: min(65.0rem, 650px); */
    border-radius: min(1.6rem, 16px);
  }
  #kv .kv-mv .mv-image {
    width: 100%;
    height: min(48.7rem, 487px);
    min-height: 1px;
  }
  #kv .kv-mv .mv-detail {
    width: 100%;
    padding: min(3.0rem, 30px);
    font-size: min(2.6rem, 26px);
  }
  #kv .kv-slider {
    width: min(69.0rem, 690px);
  }
  #kv .kv-slider .slick-list {
    padding: min(3.0rem, 30px) min(2.0rem, 20px) 0;
  }
  #kv .kv-slider .slider-slide {
    width: calc((min(65.0rem, 650px) - min(2.5rem, 25px)) / 2);
    min-height: min(16.0rem, 160px);
    margin-right: min(2.5rem, 25px);
  }
  #kv .kv-slider .slider-image {
    height: min(23.4rem, 234px);
  }
  #kv .kv-slider .slider-detail {
    font-size: min(2.2rem, 22px);
  }
  #kv .kv-slider .slider-detail span {
    font-size: min(2.5rem, 25px);
  }
  #kv .kv-nav {
    width: min(65.0rem, 650px);
    margin: min(4.0rem, 40px) auto min(3.5rem, 35px);
  }
  #kv .kv-nav .nav-item {
    margin: min(3.0rem, 30px);
  }
  #kv .kv-nav .nav-item span {
    font-size: min(2.6rem, 26px);
    white-space: nowrap;
  }
  #kv .kv-banner {
    display: block;
    width: min(65.0rem, 650px);
    margin-bottom: min(18.0rem, 180px);
  }
  #kv .kv-banner .banner-item {
    width: 100%;
    margin: 0 auto;
  }
  #kv .kv-banner .banner-item + .banner-item {
    margin-top: min(2.0rem, 20px);
  }
}


/*------------
  event
------------*/

#event {
  padding: 150px 0;
  background: #00428E26;
  border-radius: 20px;
}
#event .event-slider {
  padding: 80px 0 40px;
  border-bottom: 1px solid #00428E;
}
#event .event-slider .slider-slide {
  display: flex;
  align-items: center;
  width: 820px;
  margin-right: 30px;
}
#event .event-slider .slider-image {
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 450px;
  height: 380px;
  border-radius: 10px;
}
#event .event-slider .slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#event .event-slider .slider-detail {
  width: 335px;
  margin-left: auto;
  font-size: 16px;
  line-height: 2;
}
#event .event-slider .slider-detail h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.58;
  color: #00428E;
}
#event .event-slider .slider-detail small {
  font-size: 14px;
}
#event .event-more {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  #event {
    padding: min(14.0rem, 140px) 0;
  }
  #event .event-slider {
    padding: min(6.5rem, 65px) 0;
  }
  #event .event-slider .slider-slide {
    display: block;
    width: min(65.0rem, 650px);
  }
  #event .event-slider .slider-image {
    width: 100%;
    height: min(55.0rem, 550px);
  }
  #event .event-slider .slider-detail {
    width: 100%;
    margin-top: min(5.0rem, 50px);
    font-size: min(2.4rem, 24px);
  }
  #event .event-slider .slider-detail h2 {
    font-size: min(3.2rem, 32px);
  }
  #event .event-slider .slider-detail small {
    font-size: min(2.2rem, 22px);
  }
}


/*------------
  news
------------*/

#news {
  padding: 150px 0;
}
#news .news-list {
  display: flex;
  padding: 80px 0 20px;
  border-bottom: 1px solid #00428E33;
}
#news .news-list .list-item {
  position: relative;
  width: calc((100% - 30px) / 4);
  margin-left: 10px;
}
#news .news-list .list-item:nth-of-type(4n + 1) {
  margin-left: 0;
}
#news .news-list .list-item .item-image {
  overflow: hidden;
  position: relative;
  z-index: 1;
  height: 240px;
  border-radius: 10px;
}
#news .news-list .list-item .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#news .news-list .list-item .item-tag {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: -15px;
  padding: 7px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: #00428E;
  border-radius: 6px;
  transform: rotate(-40deg);
}
#news .news-list .list-item .item-detail {
  margin-top: 25px;
  font-size: 14px;
}
#news .news-list .list-item .item-detail h2 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #00428E;
}
#news .news-list .list-item .item-detail span {
  display: block;
  margin-top: 40px;
  text-align: right;
}
#news .news-more {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  #news .news-list {
    flex-wrap: wrap;
  }
  #news .news-list .list-item {
    width: calc((100% - min(1.0rem, 10px)) / 2);
    margin-left: min(1.0rem, 10px);
  }
  #news .news-list .list-item:nth-of-type(2n + 1) {
    margin-left: 0;
  }
  #news .news-list .list-item:nth-of-type(n + 3) {
    margin-top: min(6.5rem, 65px);
  }
  #news .news-list .list-item .item-image {
    height: min(32.0rem, 320px);
  }
  #news .news-list .list-item .item-detail {
    font-size: min(2.6rem, 26px);
    line-height: 1.35;
  }
  #news .news-list .list-item .item-detail h2 {
    font-size: min(2.6rem, 26px);
  }
}


/*------------
  info
------------*/

#info {
  padding: 150px 0;
  background: #F1F2F4;
  border-radius: 20px;
}
#info .info-list {
  width: 760px;
  margin-top: 40px;
  margin-left: auto;
}
#info .info-list .list-item {
  display: flex;
  padding: 50px 0;
  font-size: 16px;
}
#info .info-list .list-item + .list-item {
  border-top: 1px solid #00428E33;
}
#info .info-list .list-item span {
  flex-shrink: 0;
  margin-right: 65px;
  font-weight: 700;
  color: #00428E;
}

@media screen and (max-width: 768px) {
  #info .info-list {
    width: 100%;
    margin: 0 auto;
  }
  #info .info-list .list-item {
    display: block;
    padding: min(9.0rem, 90px) 0 min(2.0rem, 20px);
    font-size: min(2.6rem, 26px);
  }
  #info .info-list .list-item span {
    display: block;
    margin: 0 auto min(1.5rem, 15px);
    font-size: min(2.6rem, 26px);
  }
  #info .info-more {
    margin-top: min(6.0rem, 60px);
  }
}


/*------------
  topics
------------*/

#topics {
  padding: 150px 0;
}
#topics .topics-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#topics .topics-banner a {
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 1;
  width: 490px;
  border-radius: 10px;
}
#topics .topics-banner a._banner {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.58;
  color: #00428E;
  border: 1px solid #00428E33;
}
#topics .topics-banner a span {
  width: 58px;
  margin-right: 35px;
}
#topics .topics-list {
  display: flex;
  flex-wrap: wrap;
  width: 935px;
  margin: 45px auto 0;
}
#topics .topics-list .list-item {
  overflow: hidden;
  width: calc((100% - 30px) / 4);
  margin-top: 30px;
  margin-left: 10px;
  border-radius: 6px;
}
#topics .topics-list .list-item._border {
  border: 1px solid #00428E33;
}
#topics .topics-list .list-item:nth-of-type(4n + 1) {
  margin-left: 0;
}

@media screen and (max-width: 768px) {
  #topics .topics-banner {
    display: block;
  }
  #topics .topics-banner a {
    width: 100%;
    min-height: min(21.0rem, 210px);
  }
  #topics .topics-banner a._banner {
    font-size: min(4.1rem, 41px);
    line-height: 1.58;
  }
  #topics .topics-banner a + a {
    margin-top: min(2.5rem, 25px);
  }
  #topics .topics-banner a span {
    width: min(10.4rem, 104px);
    margin-right: min(4.5rem, 45px);
  }
  #topics .topics-list {
    width: 100%;
    margin-top: min(4.0rem, 40px);
  }
  #topics .topics-list .list-item {
    width: calc((100% - min(5.0rem, 50px)) / 2);
    margin-top: min(4.0rem, 40px);
    margin-left: min(5.0rem, 50px);
  }
  #topics .topics-list .list-item:nth-of-type(2n + 1) {
    margin-left: 0;
  }
}


/*------------
  access
------------*/

#access {
  padding: 0 0 75px;
  background: #4780D0;
}
#access .access-wrapper {
  display: flex;
}
#access .access-map {
  flex-shrink: 0;
  width: 495px;
  height: 495px;
  margin-right: 65px;
}
#access .access-detail {
  margin-top: 55px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #FFFFFF;
}
#access .access-detail h1 {
  font-size: 28px;
}
#access .access-detail h2 {
  font-size: 17px;
}
#access .access-detail .detail-open {
  margin: 20px auto 30px;
}
#access .access-detail .detail-open p {
  font-size: 17px;
}
#access .access-detail .detail-caution {
  margin-top: 20px;
  font-size: 11px;
}
#access .access-link {
  display: flex;
  justify-content: center;
  margin-top: 45px;
}
#access .access-link a {
  display: block;
  width: 310px;
  margin: 8px;
  padding: 25px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 100px;
}

@media screen and (max-width: 768px) {
  #access {
    background: transparent;
  }
  #access .container {
    width: 100%;
  }
  #access .access-wrapper {
    display: block;
  }
  #access .access-map {
    width: 100%;
    height: min(81.0rem, 810px);
  }
  #access .access-detail {
    position: relative;
    z-index: 99;
    width: 100%;
    margin: max(-2.0rem, -20px) auto 0;
    padding: min(9.5rem, 95px) min(5.9rem, 59px) min(11.5rem, 115px);
    font-size: min(2.0rem, 20px);
    background: #4780D0;
    border-radius: min(2.0rem, 20px);
  }
  #access .access-detail h1 {
    font-size: min(3.6rem, 36px);
  }
  #access .access-detail h2 {
    font-size: min(2.4rem, 24px);
  }
  #access .access-detail .detail-open {
    margin: min(3.0rem, 30px) auto min(7.5rem, 75px);
  }
  #access .access-detail .detail-open p {
    font-size: min(2.4rem, 24px);
  }
  #access .access-link {
    display: block;
    margin-top: min(9.0rem, 90px);
  }
  #access .access-link a {
    width: min(56.0rem, 560px);
    margin: 0 auto;
    padding: min(4.0rem, 40px) 0;
    font-size: min(3.0rem, 30px);
  }
  #access .access-link a + a {
    margin-top: min(2.5rem, 25px);
  }
}


/*------------
  nav
------------*/

#nav {
  padding: 155px 0 100px;
}
#nav .nav-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#nav .nav-banner a {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 490px;
  border-radius: 15px;
}
#nav .nav-list {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin: 80px auto 0;
}
#nav .nav-list .list-item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc((100% - 60px) / 4);
  margin-left: 20px;
  text-align: left;
  font-size: 15px;
  border: 1px solid #00428E33;
  border-radius: 10px;
}
#nav .nav-list .list-item:nth-of-type(4n + 1) {
  margin-left: 0;
}
#nav .nav-list .list-item span {
  display: block;
  margin-right: auto;
}
#nav .nav-list .list-item span._blue {
  color: #2D83D0;
}
#nav .nav-pagetop {
  margin-top: 100px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #00428E;
}
#nav .nav-pagetop .pagetop-btn {
  display: inline-block;
  cursor: pointer;
}
#nav .nav-pagetop .pagetop-btn span {
  display: block;
  width: 16px;
  margin: 0 auto 20px;
}

@media screen and (max-width: 768px) {
  #nav {
    padding: min(10.0rem, 100px) 0;
  }
  #nav .nav-banner a {
    width: 100%;
  }
  #nav .nav-list {
    margin-top: min(7.0rem, 70px);
  }
  #nav .nav-list .list-item {
    width: calc((100% - min(3.0rem, 30px)) / 2);
    min-height: min(21.0rem, 210px);
    margin-top: min(2.0rem, 20px);
    margin-left: min(3.0rem, 30px);
  }
  #nav .nav-list .list-item:nth-of-type(2n + 1) {
    margin-left: 0;
  }
}