/* --------------------
   PC共通
----------------------- */
/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/* @font-face でローカルフォントを優先 */
@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}

body {
  font-family: "Local Noto Sans JP", "Noto Sans JP", 'Hiragino Sans', sans-serif;
}


/* ---------- base color ---------- */
:root {
  --clr-key1:#0074ad; /* gmg key1 */
  --clr-key2:#1f3769; /* gmg key2 */
  --clr-key3:#ebf4f9; /* gmg key3 */
  --clr-pt1: #d82663; /* gmg point1 */
  --clr-pt2: #f9f8f7; /* gmg point1 */
}


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


html{
  scroll-behavior: smooth;
}

body{
  /* font-family: 'Noto Sans JP','Hiragino Sans',sans-serif; */
  color: #333333;
  font-size: 16px;
  line-height: calc(32/16);
  box-sizing: border-box;
  background: #ffffff;
  overflow-x: hidden;
  position: relative;
}
body *{
  box-sizing: inherit;
}

.scroll_rock.active{
  overflow: hidden;
}


/* link */
a{
  color: var(--clr-key1);
}
a:hover{
  text-decoration: underline;
}

a.blank{
  padding-right: 4px;
  word-break: break-all;
  /* position: relative; */
}
a.blank::after{
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  background: url(/common/image/parts/icon_blank.png) 0 0 no-repeat;
  background-size: 12px auto;
  /* position: absolute;
  bottom: 0.2rem;
  right: 0; */
}

/* device */
.for-pc{ display: block;}
.for-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{
  vertical-align: super;
  font-size: 75%;
}
  h1 sup{ font-size: 60%;}

sub{
  vertical-align: sub;
  font-size: 75%;
}


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

.fz12{ font-size: 12px !important;}
.fz14{ font-size: 14px !important;}
.fz18{ font-size: 18px !important;}
.fz20{ font-size: 20px !important;}

/* .txt_clr_key1{ color: var(--clr-key1);} */

/* 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:1020px) {

  body{
    font-size: calc((100vw / var(--vw-sp)) * 16);
    line-height: calc(32 / 16);
    overflow: auto;
  }

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

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

  a.blank{
    /* padding-right: 1rem; */
    padding-right: 1.066vw;
  }
  a.blank::after{
    content: '';
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    margin-left: 1.066vw;
    background: url(/common/image/parts/icon_blank.png) 0 0 no-repeat;
    background-size: 3.2vw auto;
  }

  /* font */
  .fz-12{ font-size: 3.076vw;}
  .fz-14{ font-size: 3.589vw !important;}
  .fz-16{ font-size: 4.615vw !important;}

  /* margin */
  .mb0 { margin-bottom: 0 !important;}
  .mb4 { margin-bottom: 1.025vw !important;}
  .mb8 { margin-bottom: 2.051vw !important;}
  .mb10{ margin-bottom: 2.564vw !important;}
  .mb12{ margin-bottom: 3.076vw !important;}
  .mb14{ margin-bottom: 3.589vw !important;}
  .mb16{ margin-bottom: 4.102vw !important;}
  .mb18{ margin-bottom: 4.615vw !important;}
  .mb20{ margin-bottom: 5.128vw !important;}
  .mb24{ margin-bottom: 6.153vw !important;}
  .mb30{ margin-bottom: 7.692vw !important;}
  .mb40{ margin-bottom: 10.256vw !important;}
  .mb50{ margin-bottom: 12.82vw !important;}
  .mt0 { margin-top: 0 !important;}
  .mt4 { margin-top: 1.025vw !important;}
  .mt8 { margin-top: 2.051vw !important;}
  .mt10{ margin-top: 2.564vw !important;}
  .mt12{ margin-top: 3.076vw !important;}
  .mt14{ margin-top: 3.589vw !important;}
  .mt16{ margin-top: 4.102vw !important;}
  .mt18{ margin-top: 4.615vw !important;}
  .mt20{ margin-top: 5.128vw !important;}
  .mt24{ margin-top: 6.153vw !important;}
  .mt30{ margin-top: 7.692vw !important;}
  .mt40{ margin-top: 10.256vw !important;}
  .mt50{ margin-top: 12.82vw !important;}
  .mr0 { margin-right: 0 !important;}
  .mr4 { margin-right: 1.025vw !important;}
  .mr8 { margin-right: 2.051vw !important;}
  .mr10{ margin-right: 2.564vw !important;}
  .mr12{ margin-right: 3.076vw !important;}
  .mr14{ margin-right: 3.589vw !important;}
  .mr16{ margin-right: 4.102vw !important;}
  .mr18{ margin-right: 4.615vw !important;}
  .mr20{ margin-right: 5.128vw !important;}
  .mr24{ margin-right: 6.153vw !important;}
  .mr30{ margin-right: 7.692vw !important;}
  .mr40{ margin-right: 10.256vw !important;}
  .mr50{ margin-right: 12.82vw !important;}
  .ml0 { margin-left: 0 !important;}
  .ml4 { margin-left: 1.025vw !important;}
  .ml8 { margin-left: 2.051vw !important;}
  .ml10{ margin-left: 2.564vw !important;}
  .ml12{ margin-left: 3.076vw !important;}
  .ml14{ margin-left: 3.589vw !important;}
  .ml16{ margin-left: 4.102vw !important;}
  .ml18{ margin-left: 4.615vw !important;}
  .ml20{ margin-left: 5.128vw !important;}
  .ml24{ margin-left: 6.153vw !important;}
  .ml30{ margin-left: 7.692vw !important;}
  .ml40{ margin-left: 10.256vw !important;}
  .ml50{ margin-left: 12.82vw !important;}

  /* padding */
  .pb0 { padding-bottom: 0 !important;}
  .pb4 { padding-bottom: 1.025vw !important;}
  .pb8 { padding-bottom: 2.051vw !important;}
  .pb10{ padding-bottom: 2.564vw !important;}
  .pb12{ padding-bottom: 3.076vw !important;}
  .pb14{ padding-bottom: 3.589vw !important;}
  .pb16{ padding-bottom: 4.102vw !important;}
  .pb18{ padding-bottom: 4.615vw !important;}
  .pb20{ padding-bottom: 5.128vw !important;}
  .pb24{ padding-bottom: 6.153vw !important;}
  .pb30{ padding-bottom: 7.692vw !important;}
  .pb40{ padding-bottom: 10.256vw !important;}
  .pb50{ padding-bottom: 12.82vw !important;}
  .pt0 { padding-top: 0 !important;}
  .pt4 { padding-top: 1.025vw !important;}
  .pt8 { padding-top: 2.051vw !important;}
  .pt10{ padding-top: 2.564vw !important;}
  .pt12{ padding-top: 3.076vw !important;}
  .pt14{ padding-top: 3.589vw !important;}
  .pt16{ padding-top: 4.102vw !important;}
  .pt18{ padding-top: 4.615vw !important;}
  .pt20{ padding-top: 5.128vw !important;}
  .pt24{ padding-top: 6.153vw !important;}
  .pt30{ padding-top: 7.692vw !important;}
  .pt40{ padding-top: 10.256vw !important;}
  .pt50{ padding-top: 12.82vw !important;}
  .pr0 { padding-right: 0 !important;}
  .pr4 { padding-right: 1.025vw !important;}
  .pr8 { padding-right: 2.051vw !important;}
  .pr10{ padding-right: 2.564vw !important;}
  .pr12{ padding-right: 3.076vw !important;}
  .pr14{ padding-right: 3.589vw !important;}
  .pr16{ padding-right: 4.102vw !important;}
  .pr18{ padding-right: 4.615vw !important;}
  .pr20{ padding-right: 5.128vw !important;}
  .pr24{ padding-right: 6.153vw !important;}
  .pr30{ padding-right: 7.692vw !important;}
  .pr40{ padding-right: 10.256vw !important;}
  .pr50{ padding-right: 12.82vw !important;}
  .pl0 { padding-left: 0 !important;}
  .pl4 { padding-left: 1.025vw !important;}
  .pl8 { padding-left: 2.051vw !important;}
  .pl10{ padding-left: 2.564vw !important;}
  .pl12{ padding-left: 3.076vw !important;}
  .pl14{ padding-left: 3.589vw !important;}
  .pl16{ padding-left: 4.102vw !important;}
  .pl18{ padding-left: 4.615vw !important;}
  .pl20{ padding-left: 5.128vw !important;}
  .pl24{ padding-left: 6.153vw !important;}
  .pl30{ padding-left: 7.692vw !important;}
  .pl40{ padding-left: 10.256vw !important;}
  .pl50{ padding-left: 12.82vw !important;}

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

}