@charset "utf-8";
/* ===================================================================
 common.css
  - breakpoint: max-width: 767px / min-width: 768px
======================================================================*/

/*----------------------------------------------------------
 Reset
------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var, b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, thead, tfoot, tr, th, td,
main, article, aside, canvas, details, embed, figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5em;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
}
h1, h2, h3, h4, h5, h6, th {
  font-size: 100%;
  font-family: inherit;
}
em  {
  font-style: normal;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
table, th, td {
  text-align: left;
  border: none;
}
ul, ol, li {
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}
input[type=text],
input[type=password],
input[type=button],
input[type=submit],
button,
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  font-size: 100%;
  color: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: normal;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ccc;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ccc;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #ccc;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
}
button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
select::-ms-expand {
  display:none;
}
*, *:before, *:after {
  box-sizing: border-box;
}
* > :first-child { margin-top: 0 !important; }
* > :last-child { margin-bottom: 0 !important; }

/*----------------------------------------------------------
 Base
------------------------------------------------------------*/
html {
  font-size: 62.5%;
  overflow-y: scroll;
}
body {
  min-width: 320px;
  font-size: 1.6em;
  color: #333;
  font-family: futura-pt, 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4, h5, h6, th, td, small {
  font-size: 100%;
}
input, select, textarea {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

/*----------------------------------------------------------
 Anchers
------------------------------------------------------------*/
a {
  color: #0a1d47;
  text-decoration: none;
  transition: .3s;
}

@media screen and (min-width: 768px) {
  a:hover {
    color: #0a1d47;
    text-decoration: none;
  }
  a img { transition: .3s; }
}

/*----------------------------------------------------------
 page
------------------------------------------------------------*/
.f_page {
  padding-top: 80px;
}
.f_page > *:not(.f_gridline) {
  position: relative;
  z-index: 2;
}



.f_griditem {
  width: calc((100vw / 8) * 6);
  margin: 0 auto;
}

.f_griditem._g1 { width: calc(100vw / 8); }
.f_griditem._g2 { width: calc((100vw / 8) * 2); }
.f_griditem._g3 { width: calc((100vw / 8) * 3); }
.f_griditem._g4 { width: calc((100vw / 8) * 4); }
.f_griditem._g5 { width: calc((100vw / 8) * 5); }
.f_griditem._g6 { width: calc((100vw / 8) * 6); }
.f_griditem._g7 { width: calc((100vw / 8) * 7); }
.f_griditem._g8 { width: calc((100vw / 8) * 8); }
.f_griditem._g9 { width: calc((100vw / 16) * 9); }
.f_griditem._g10 { width: calc((100vw / 16) * 10); }
.f_griditem._g11 { width: calc((100vw / 16) * 11); }
.f_griditem._g12 { width: calc((100vw / 16) * 12); }
.f_griditem._g13 { width: calc((100vw / 16) * 13); }
.f_griditem._g14 { width: calc((100vw / 16) * 14); }
.f_griditem._g15 { width: calc((100vw / 16) * 15); }

.f_griditem.-left1 { margin-left: calc(100vw / 8); }
.f_griditem.-left2 { margin-left: calc((100vw / 8) * 2); }
.f_griditem.-left3 { margin-left: calc((100vw / 8) * 3); }
.f_griditem.-left4 { margin-left: calc((100vw / 8) * 4); }
.f_griditem.-left5 { margin-left: calc((100vw / 8) * 5); }
.f_griditem.-left6 { margin-left: calc((100vw / 8) * 6); }
.f_griditem.-left7 { margin-left: calc((100vw / 8) * 7); }
.f_griditem.-left8 { margin-left: calc((100vw / 8) * 8); }
.f_griditem.-left9 { margin-left: calc((100vw / 8) * 9); }
.f_griditem.-left10 { margin-left: calc((100vw / 8) * 10); }
.f_griditem.-left11 { margin-left: calc((100vw / 8) * 11); }
.f_griditem.-left12 { margin-left: calc((100vw / 8) * 12); }
.f_griditem.-left13 { margin-left: calc((100vw / 8) * 13); }
.f_griditem.-left14 { margin-left: calc((100vw / 8) * 14); }
.f_griditem.-left15 { margin-left: calc((100vw / 8) * 15); }


@media screen and (max-width: 767px) {
  .f_griditem {
    width: calc((100vw / 8) * 7);
  }
}


/*----------------------------------------------------------
 header
------------------------------------------------------------*/
.f_header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 10 !important;
  width: 100%;
  height: 80px;
  padding: 20px;
  background: #fff;
}
.f_header:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(rgba(10,29,71,.1), rgba(10,29,71,0));
}
.f_header-logo {
  width: 200px;
}

/*----------------------------------------------------------
 main
------------------------------------------------------------*/
.f_main {
  padding-bottom: 160px;
  background: #fff;
  overflow: hidden;
}

/* gridline
-------------------------------------------------*/
.f_gridline {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-auto-flow: column;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100%;
}
.f_gridline > * {
  height: 100%;
}
.f_gridline > * + * {
  border-left: 1px solid #f6f6f6;
}

@media screen and (max-width: 767px) {
  .f_gridline > *:nth-child(even) {
    border-width: 0;
  }
}

/*----------------------------------------------------------
 footer
------------------------------------------------------------*/
.f_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  height: 120px;
  padding: 0 calc(100vw / 16);
  background: #0a1d47;
  /* padding-bottom: env(safe-area-inset-bottom); */
}
.f_footer-btnPagetop {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.f_footer-nav-list > li a {
  color: #fff;
}

@media screen and (max-width: 767px) {
  .f_footer {
    flex-direction: column;
    gap: 30px;
    height: auto;
    padding: 30px calc(100vw / 16);
  }
}


/*----------------------------------------------------------
 modal
------------------------------------------------------------*/
.m_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
}
.m_modal-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
}
.m_modal-window {
  position: relative;
  width: 85%;
  max-width: 950px;
}
.m_modal-btnClose {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  transition: .3s;
  cursor: pointer;
}
.m_modal-btnClose:hover { opacity: .7; }
.m_modal-btnClose:before,
.m_modal-btnClose:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 47%;
  width: 2px;
  height: 100%;
  background: #aaa;
}
.m_modal-btnClose:before { transform: rotate(45deg); }
.m_modal-btnClose:after { transform: rotate(-45deg); }

.m_modal-main {
  padding: 30px 15px 15px;
  max-height: 80vh;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  overflow-y: auto;
}

@media screen and (min-width: 768px) {
  .m_modal-btnClose {
    top: 10px;
    right: 10px;
  }
  .m_modal-main {
    padding: 30px;
  }
}

/* ===================================================================
 utilityClass.css
======================================================================*/
@media screen and (max-width: 767px) {
  .c_show-pc { display: none !important; }
}
@media screen and (min-width: 768px) {
  .c_show-sp { display: none !important; }
}