@charset "UTF-8";
/* CSS Document */
.fc{ display: none;}
.hc{ position: fixed; top: 0; left: 0; width: 100%; background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); }
.gm h3{ font-weight: bold;}


main *{ margin-top: 0; padding: 0;}
main section:last-child .mb{ padding: 2.0em 0;}

.section{ position: relative; display: flex; flex-direction: row;}
.section .content{ position: relative; z-index: 1; align-self: flex-end; width: 100%;}

.sec_title{}
.sec_title .mb{}
.sec_title h2{ color: #fff; font-size: 132%; font-weight: bold; display: flex; align-items: center;}
.sec_title h2 span{ font-size: 75%;}
.sec_title p{ color: #fff; font-size: 108%; font-weight: bold; line-height: 1.5;}

.sec_menu{ display: grid; grid-template-columns: repeat(3,1fr);}
.sec_menu article{ margin: 0; padding: 0;}
.sec_menu a{ display: flex; margin: 0; width: 100%; height: 100%; background: #00609c; color: #fff; text-decoration: none; padding: 1.5rem; flex-direction: column; align-items: center;}
.sec_menu figure{ display: block; width: 100%; height: 96px; background: no-repeat center center / contain;}
.sec_menu h3{ line-height: 1.5; font-weight: bold; font-size: 116%; display: flex; justify-content: center; align-items: center; gap: 0 0.7rem; margin: 2.0rem 0 0 0;}
.sec_menu h3::before{ content: ''; display: block; width: 28px; height: 17px; background: url("../img/index/iocn_link.svg") no-repeat center center / contain;}
.sec_menu p{ margin: 0.5rem 0 0 0; line-height: 1.5;}
@media screen and ( max-width: 480px ) {
  .sec_menu{ grid-template-columns: 1fr;}
  .sec_menu a{ display: flex; flex-direction: row; align-items: center; padding: 0.5em 0.5em 0.5em 1.0em;}
  .sec_menu figure{ width: 4.5em; height: 4.5em; margin-right: 1.0em;}
  .sec_menu h3{ margin: 0; line-height: 1.5; font-size: 108%;}
  .sec_menu h3::before{ flex: 0 0 2.0em;}
}



.sec01{ background: url("../img/index/sec01_bg.webp") no-repeat center center / cover; position: relative;}
.sec01 .cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 0;}
.sec01 .menu01 a{ background: rgba(0,96,156,0.8);}
.sec01 .menu02 a{ background: rgba(0,115,188,0.8);}
.sec01 .menu03 a{ background: rgba(0,134,230,0.8);}
@media screen and ( max-width: 480px ) {
  
}

.sec02{ background: url("../img/index/sec02_bg.webp") no-repeat center center / cover; position: relative;}
.sec02 .cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 0;}
.sec02 .sec_menu figure{  height: 55px;}
.sec02 .sec_menu h3{ margin: 0.7rem 0 0 0;}
.sec02 .menu01 a{ background: rgba(0,96,156,0.9);}
.sec02 .menu02 a{ background: rgba(0,115,188,0.9);}
.sec02 .menu03 a{ background: rgba(0,96,156,0.9);}
.sec02 .menu04 a{ background: rgba(0,134,230,0.9);}
.sec02 .menu05 a{ background: rgba(23,159,255,0.9);}
.sec02 .menu06 a{ background: rgba(0,134,230,0.9);}
@media screen and ( max-width: 480px ) {
  .sec02 .sec_menu{ grid-template-columns: 1fr 1fr; font-size: 93%; line-height: 1.5;}
  .sec02 .sec_menu article{ min-height: 4.0em;}
  .sec02 a{ align-items: center; display: flex; flex-direction: row; padding: 0.5rem;}
  .sec02 .sec_menu figure{ flex: 0 0 55px; height: 55px;}
  .sec02 .sec_menu h3{ margin: 0;}
  .sec02 .sec_menu h3::before{ display: none;}
  .sec02 a p{ display: none;}
}

.sec03{ background: url("../img/index/sec03_bg02.webp") no-repeat center center / cover; position: relative;}
.sec03 .cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 0;}
.sec03 .sec_menu figure{ width: 100%; height: 70px;}
.sec03 .sec_menu{ grid-template-columns: repeat(2,1fr);}
.sec03 .menu01 a{ background: rgba(0,96,156,0.8);}
.sec03 .menu02 a{ background: rgba(0,115,188,0.8);}
@media screen and ( max-width: 480px ) {
  .sec03 .sec_menu figure{ width: 4.5em; height: 4.5em; margin-right: 1.0em;}
  .sec03 .sec_menu{ grid-template-columns: 1fr;}
  .sec03 .menu01 a{ white-space: nowrap;}
}

.sec04{ background: url("../img/index/sec04_bg02.webp") no-repeat center center / cover; position: relative;}
.sec04 .cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 0;}
.sec04 .sec_menu figure{ width: 100%; height: 45px;}
.sec04 .sec_menu h3{ margin-top: 1.0rem;}
.sec04 .menu01 a{ background: rgba(0,96,156,0.9);}
.sec04 .menu02 a{ background: rgba(0,115,188,0.9);}
.sec04 .menu03 a{ background: rgba(0,96,156,0.9);}
.sec04 .menu04 a{ background: rgba(0,134,230,0.9);}
.sec04 .menu05 a{ background: rgba(23,159,255,0.9);}
.sec04 .menu06 a{ background: rgba(0,134,230,0.9);}


@media screen and ( max-width: 480px ) {
  .sec04 .sec_menu{ grid-template-columns: 1fr 1fr; font-size: 93%; line-height: 1.5;}
  .sec04 .sec_menu article{ min-height: 4.0em;}
  .sec04 .sec_menu figure{ width: 4.5em; height: 4.5em; margin-right: 1.0em;}
  .sec04 a{ align-items: center; display: flex; flex-direction: row; padding: 0.5rem;}
  .sec04 .sec_menu figure{ flex: 0 0 55px; height: 55px;}
  .sec04 .sec_menu h3{ margin: 0;}
  .sec04 a h3::before{ display: none;}
  .sec04 a p{ display: none;}
}