/* --------------------
   PC共通
----------------------- */
html{
  scroll-behavior: smooth;
}

body{
  font-family: 'IBM Plex Sans JP Local','Hiragino Sans','Yu Gothic',sans-serif;
  color: #222222;
  font-size: 16px;
  line-height: calc(32/16);
  letter-spacing: 0.04em;
  box-sizing: border-box;
  background: #ffffff;
}
body *{
  box-sizing: inherit;
}

.scroll_rock.active{
  overflow: hidden;
}

/* base color */
:root {
  --color-main1: #003065;
  --color-key1:  #FFE600;
  --color-key2:  #58217C;
}

/* link */
a{
  text-decoration: none;
}
/* a:hover{
  opacity: 0.7;
} */

/* device */
.disp-pc{ display: block;}
.disp-sp{ display: none;}

/* text-align */
.txtAR{ text-align: right !important;}
.txtAL{ text-align: left !important;}
.txtAC{ text-align: center !important;}

/* flex */
.flexC{
  display: flex;
  justify-content: center;
}
.flexR{
  display: flex;
  justify-content: right;
}
.flexL{
  display: flex;
  justify-content: left;
}

/* text-decoration */
.underline{
  text-decoration: underline;
}

/* sup */
sup{
  font-family: 'Hiragino Sans','Yu Gothic',sans-serif;
  top: -0.1em;
  font-size: 60%;
}
sup.reg{
  top: 0.2em;
  font-size: 90%;
}
sup.reg_l{
  top: 0.1em;
  font-size: 70%;
}
sup.reg_s{
  top: 0.3em;
  font-size: 110%;
  font-weight: normal;
}

/* font */
.bold{ font-weight: 700;}
.italic{ font-style: italic; margin-right: 0.2em;}

.clr_red{ color: #E80000 !important;}

.fz12{ font-size: 12px !important;}
.fz14{ font-size: 14px !important;}
.fz16{ font-size: 16px !important;}

/* margin */
.mb0 { margin-bottom: 0 !important;}
.mb4 { margin-bottom: 4px !important;}
.mb8 { margin-bottom: 8px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb12{ margin-bottom: 12px !important;}
.mb16{ margin-bottom: 16px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb24{ margin-bottom: 24px !important;}
.mb30{ margin-bottom: 30px !important;}
.mb40{ margin-bottom: 40px !important;}
.mb50{ margin-bottom: 50px !important;}
.mt0 { margin-top: 0 !important;}
.mt4 { margin-top: 4px !important;}
.mt8 { margin-top: 8px !important;}
.mt10{ margin-top: 10px !important;}
.mt12{ margin-top: 12px !important;}
.mt16{ margin-top: 16px !important;}
.mt20{ margin-top: 20px !important;}
.mt24{ margin-top: 24px !important;}
.mt30{ margin-top: 30px !important;}
.mt40{ margin-top: 40px !important;}
.mt50{ margin-top: 50px !important;}
.mr0 { margin-right: 0 !important;}
.mr4 { margin-right: 4px !important;}
.mr8 { margin-right: 8px !important;}
.mr10{ margin-right: 10px !important;}
.mr12{ margin-right: 12px !important;}
.mr16{ margin-right: 16px !important;}
.mr20{ margin-right: 20px !important;}
.mr24{ margin-right: 24px !important;}
.mr30{ margin-right: 30px !important;}
.mr40{ margin-right: 40px !important;}
.mr50{ margin-right: 50px !important;}
.mr0 { margin-left: 0 !important;}
.ml4 { margin-left: 4px !important;}
.ml8 { margin-left: 8px !important;}
.ml10{ margin-left: 10px !important;}
.ml12{ margin-left: 12px !important;}
.ml16{ margin-left: 16px !important;}
.ml20{ margin-left: 20px !important;}
.ml24{ margin-left: 24px !important;}
.ml30{ margin-left: 30px !important;}
.ml40{ margin-left: 40px !important;}
.ml50{ margin-left: 50px !important;}

/* padding */
.pb0 { padding-bottom: 0 !important;}
.pb4 { padding-bottom: 4px !important;}
.pb8 { padding-bottom: 8px !important;}
.pb10{ padding-bottom: 10px !important;}
.pb12{ padding-bottom: 12px !important;}
.pb14{ padding-bottom: 14px !important;}
.pb16{ padding-bottom: 16px !important;}
.pb18{ padding-bottom: 18px !important;}
.pb20{ padding-bottom: 20px !important;}
.pb24{ padding-bottom: 24px !important;}
.pb30{ padding-bottom: 30px !important;}
.pb40{ padding-bottom: 40px !important;}
.pb50{ padding-bottom: 50px !important;}
.pt0 { padding-top: 0 !important;}
.pt4 { padding-top: 4px !important;}
.pt8 { padding-top: 8px !important;}
.pt10{ padding-top: 10px !important;}
.pt12{ padding-top: 12px !important;}
.pt14{ padding-top: 14px !important;}
.pt16{ padding-top: 16px !important;}
.pt20{ padding-top: 20px !important;}
.pt24{ padding-top: 24px !important;}
.pt30{ padding-top: 30px !important;}
.pt40{ padding-top: 40px !important;}
.pt50{ padding-top: 50px !important;}
.pr0 { padding-right: 0 !important;}
.pr4 { padding-right: 4px !important;}
.pr8 { padding-right: 8px !important;}
.pr10{ padding-right: 10px !important;}
.pr12{ padding-right: 12px !important;}
.pr14{ padding-right: 14px !important;}
.pr16{ padding-right: 16px !important;}
.pr18{ padding-right: 18px !important;}
.pr20{ padding-right: 20px !important;}
.pr24{ padding-right: 24px !important;}
.pr30{ padding-right: 30px !important;}
.pr40{ padding-right: 40px !important;}
.pr50{ padding-right: 50px !important;}
.pr0 { padding-left: 0 !important;}
.pl4 { padding-left: 4px !important;}
.pl8 { padding-left: 8px !important;}
.pl10{ padding-left: 10px !important;}
.pl12{ padding-left: 12px !important;}
.pl14{ padding-left: 14px !important;}
.pl16{ padding-left: 16px !important;}
.pl20{ padding-left: 20px !important;}
.pl24{ padding-left: 24px !important;}
.pl30{ padding-left: 30px !important;}
.pl40{ padding-left: 40px !important;}
.pl50{ padding-left: 50px !important;}



/* --------------------
   SP共通
----------------------- */
@media screen and (max-width:768px) {

  body{
    font-size: calc((100vw / var(--vw-sp)) * 14);
    line-height: calc(24.5/14);
    letter-spacing: 0.04em;
    overflow-x: hidden;
  }

  /* ---------- base view point ---------- */
  :root{
    --vw-sp: 375;  /* SP calc((100vw / var(--vw-sp)) * XX) */
  }

  /* font-size */
  .fz-12{ font-size: calc((100vw / var(--vw-sp)) * 12);}
  .fz-14{ font-size: calc((100vw / var(--vw-sp)) * 14);}
  .fz-16{ font-size: calc((100vw / var(--vw-sp)) * 16);}
  .fz-18{ font-size: calc((100vw / var(--vw-sp)) * 18);}

  /* device */
  .disp-pc{ display: none;}
  .disp-sp{ display: block;}

  /* link */
  a{
    word-break: break-all;
  }
  a:hover{
    opacity: 1 !important;
  }

  /* margin */
  .mb0 { margin-bottom: 0 !important;}
  .mb4 { margin-bottom: calc((100vw / var(--vw-sp)) * 4) !important;}
  .mb8 { margin-bottom: calc((100vw / var(--vw-sp)) * 8) !important;}
  .mb10{ margin-bottom: calc((100vw / var(--vw-sp)) * 10) !important;}
  .mb12{ margin-bottom: calc((100vw / var(--vw-sp)) * 12) !important;}
  .mb14{ margin-bottom: calc((100vw / var(--vw-sp)) * 14) !important;}
  .mb16{ margin-bottom: calc((100vw / var(--vw-sp)) * 16) !important;}
  .mb18{ margin-bottom: calc((100vw / var(--vw-sp)) * 18) !important;}
  .mb20{ margin-bottom: calc((100vw / var(--vw-sp)) * 20) !important;}
  .mb24{ margin-bottom: calc((100vw / var(--vw-sp)) * 24) !important;}
  .mb30{ margin-bottom: calc((100vw / var(--vw-sp)) * 30) !important;}
  .mb40{ margin-bottom: calc((100vw / var(--vw-sp)) * 40) !important;}
  .mb50{ margin-bottom: calc((100vw / var(--vw-sp)) * 50) !important;}
  .mt0 { margin-top: 0 !important;}
  .mt4 { margin-top: calc((100vw / var(--vw-sp)) * 4) !important;}
  .mt8 { margin-top: calc((100vw / var(--vw-sp)) * 8) !important;}
  .mt10{ margin-top: calc((100vw / var(--vw-sp)) * 10) !important;}
  .mt12{ margin-top: calc((100vw / var(--vw-sp)) * 12) !important;}
  .mt14{ margin-top: calc((100vw / var(--vw-sp)) * 14) !important;}
  .mt16{ margin-top: calc((100vw / var(--vw-sp)) * 16) !important;}
  .mt18{ margin-top: calc((100vw / var(--vw-sp)) * 18) !important;}
  .mt20{ margin-top: calc((100vw / var(--vw-sp)) * 20) !important;}
  .mt24{ margin-top: calc((100vw / var(--vw-sp)) * 24) !important;}
  .mt30{ margin-top: calc((100vw / var(--vw-sp)) * 30) !important;}
  .mt40{ margin-top: calc((100vw / var(--vw-sp)) * 40) !important;}
  .mt50{ margin-top: calc((100vw / var(--vw-sp)) * 50) !important;}
  .mr0 { margin-right: 0 !important;}
  .mr4 { margin-right: calc((100vw / var(--vw-sp)) * 4) !important;}
  .mr8 { margin-right: calc((100vw / var(--vw-sp)) * 8) !important;}
  .mr10{ margin-right: calc((100vw / var(--vw-sp)) * 10) !important;}
  .mr12{ margin-right: calc((100vw / var(--vw-sp)) * 12) !important;}
  .mr14{ margin-right: calc((100vw / var(--vw-sp)) * 14) !important;}
  .mr16{ margin-right: calc((100vw / var(--vw-sp)) * 16) !important;}
  .mr20{ margin-right: calc((100vw / var(--vw-sp)) * 20) !important;}
  .mr24{ margin-right: calc((100vw / var(--vw-sp)) * 24) !important;}
  .mr30{ margin-right: calc((100vw / var(--vw-sp)) * 30) !important;}
  .mr40{ margin-right: calc((100vw / var(--vw-sp)) * 40) !important;}
  .mr50{ margin-right: calc((100vw / var(--vw-sp)) * 50) !important;}
  .ml0 { margin-left: 0 !important;}
  .ml4 { margin-left: calc((100vw / var(--vw-sp)) * 4) !important;}
  .ml8 { margin-left: calc((100vw / var(--vw-sp)) * 8) !important;}
  .ml10{ margin-left: calc((100vw / var(--vw-sp)) * 10) !important;}
  .ml12{ margin-left: calc((100vw / var(--vw-sp)) * 12) !important;}
  .ml14{ margin-left: calc((100vw / var(--vw-sp)) * 14) !important;}
  .ml16{ margin-left: calc((100vw / var(--vw-sp)) * 16) !important;}
  .ml20{ margin-left: calc((100vw / var(--vw-sp)) * 20) !important;}
  .ml24{ margin-left: calc((100vw / var(--vw-sp)) * 24) !important;}
  .ml30{ margin-left: calc((100vw / var(--vw-sp)) * 30) !important;}
  .ml40{ margin-left: calc((100vw / var(--vw-sp)) * 40) !important;}
  .ml50{ margin-left: calc((100vw / var(--vw-sp)) * 50) !important;}

  /* padding */
  .pb0 { padding-bottom: 0 !important;}
  .pb4 { padding-bottom: calc((100vw / var(--vw-sp)) * 4) !important;}
  .pb8 { padding-bottom: calc((100vw / var(--vw-sp)) * 8) !important;}
  .pb10{ padding-bottom: calc((100vw / var(--vw-sp)) * 10) !important;}
  .pb12{ padding-bottom: calc((100vw / var(--vw-sp)) * 12) !important;}
  .pb14{ padding-bottom: calc((100vw / var(--vw-sp)) * 14) !important;}
  .pb16{ padding-bottom: calc((100vw / var(--vw-sp)) * 16) !important;}
  .pb18{ padding-bottom: calc((100vw / var(--vw-sp)) * 18) !important;}
  .pb20{ padding-bottom: calc((100vw / var(--vw-sp)) * 20) !important;}
  .pb24{ padding-bottom: calc((100vw / var(--vw-sp)) * 24) !important;}
  .pb30{ padding-bottom: calc((100vw / var(--vw-sp)) * 30) !important;}
  .pb40{ padding-bottom: calc((100vw / var(--vw-sp)) * 40) !important;}
  .pb50{ padding-bottom: calc((100vw / var(--vw-sp)) * 50) !important;}
  .pt0 { padding-top: 0 !important;}
  .pt4 { padding-top: calc((100vw / var(--vw-sp)) * 4) !important;}
  .pt8 { padding-top: calc((100vw / var(--vw-sp)) * 8) !important;}
  .pt10{ padding-top: calc((100vw / var(--vw-sp)) * 10) !important;}
  .pt12{ padding-top: calc((100vw / var(--vw-sp)) * 12) !important;}
  .pt14{ padding-top: calc((100vw / var(--vw-sp)) * 14) !important;}
  .pt16{ padding-top: calc((100vw / var(--vw-sp)) * 16) !important;}
  .pt18{ padding-top: calc((100vw / var(--vw-sp)) * 18) !important;}
  .pt20{ padding-top: calc((100vw / var(--vw-sp)) * 20) !important;}
  .pt24{ padding-top: calc((100vw / var(--vw-sp)) * 24) !important;}
  .pt30{ padding-top: calc((100vw / var(--vw-sp)) * 30) !important;}
  .pt40{ padding-top: calc((100vw / var(--vw-sp)) * 40) !important;}
  .pt50{ padding-top: calc((100vw / var(--vw-sp)) * 50) !important;}
  .pr0 { padding-right: 0 !important;}
  .pr4 { padding-right: calc((100vw / var(--vw-sp)) * 4) !important;}
  .pr8 { padding-right: calc((100vw / var(--vw-sp)) * 8) !important;}
  .pr10{ padding-right: calc((100vw / var(--vw-sp)) * 10) !important;}
  .pr12{ padding-right: calc((100vw / var(--vw-sp)) * 12) !important;}
  .pr14{ padding-right: calc((100vw / var(--vw-sp)) * 14) !important;}
  .pr16{ padding-right: calc((100vw / var(--vw-sp)) * 16) !important;}
  .pr18{ padding-right: calc((100vw / var(--vw-sp)) * 18) !important;}
  .pr20{ padding-right: calc((100vw / var(--vw-sp)) * 20) !important;}
  .pr24{ padding-right: calc((100vw / var(--vw-sp)) * 24) !important;}
  .pr30{ padding-right: calc((100vw / var(--vw-sp)) * 30) !important;}
  .pr40{ padding-right: calc((100vw / var(--vw-sp)) * 40) !important;}
  .pr50{ padding-right: calc((100vw / var(--vw-sp)) * 50) !important;}
  .pl0 { padding-left: 0 !important;}
  .pl4 { padding-left: calc((100vw / var(--vw-sp)) * 4) !important;}
  .pl8 { padding-left: calc((100vw / var(--vw-sp)) * 8) !important;}
  .pl10{ padding-left: calc((100vw / var(--vw-sp)) * 10) !important;}
  .pl12{ padding-left: calc((100vw / var(--vw-sp)) * 12) !important;}
  .pl14{ padding-left: calc((100vw / var(--vw-sp)) * 14) !important;}
  .pl16{ padding-left: calc((100vw / var(--vw-sp)) * 16) !important;}
  .pl18{ padding-left: calc((100vw / var(--vw-sp)) * 18) !important;}
  .pl20{ padding-left: calc((100vw / var(--vw-sp)) * 20) !important;}
  .pl24{ padding-left: calc((100vw / var(--vw-sp)) * 24) !important;}
  .pl30{ padding-left: calc((100vw / var(--vw-sp)) * 30) !important;}
  .pl40{ padding-left: calc((100vw / var(--vw-sp)) * 40) !important;}
  .pl50{ padding-left: calc((100vw / var(--vw-sp)) * 50) !important;}

  img{
    width: 100%;
    height: auto;
  }

}