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

body{
  font-family: 'Hiragino Sans','Yu Gothic',sans-serif;
  color: #000333;
  font-size: 22px;
  line-height: 1.8;
  box-sizing: border-box;
  background: #ffffff;
}
body *{
  box-sizing: inherit;
}

.scroll_rock.active{
  overflow: hidden;
}

/* base color */
:root {
  --color-b01: #6072C8;
  --color-b02: #293FBC;
  --color-b03: #000333; /* text,link*/
  --color-b04: #5F6FCD;
  --color-g01: #CDEEE4;
  --color-g02: #59C8A5;
  --color-grey01: #cdcdcd;
  --color-grey02: #E5E5EA;
}

/* link */
a{
  color: var(--color-b03);
  text-decoration: none;
}
a:hover{
  opacity: 0.8;
}

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{
  /* top: -0.3em; */
  font-size: 80%;
}

/* font */
.bold{ font-weight: 600;}
.bold_b{ font-weight: 600; color: var(--color-b02);}
.italic{ font-style: italic; margin-right: 0.2em;}

.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: 4.266vw;
    line-height: 1.2;
    overflow-x: hidden;
  }

  /* font-size */
  .fz-12{ font-size: 3.2vw;}
  .fz-14{ font-size: 3.733vw;}
  .fz-18{ font-size: 4.8vw;}

  /* 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.2vw !important;}
  .fz-14{ font-size: 3.733vw !important;}
  .fz-16{ font-size: 4.266vw !important;}

  /* margin */
  .mb0 { margin-bottom: 0 !important;}
  .mb4 { margin-bottom: 1.066vw !important;}
  .mb8 { margin-bottom: 2.133vw !important;}
  .mb10{ margin-bottom: 2.666vw !important;}
  .mb12{ margin-bottom: 3.2vw !important;}
  .mb14{ margin-bottom: 3.733vw !important;}
  .mb16{ margin-bottom: 4.266vw !important;}
  .mb18{ margin-bottom: 4.8vw !important;}
  .mb20{ margin-bottom: 5.333vw !important;}
  .mb24{ margin-bottom: 6.4vw !important;}
  .mb30{ margin-bottom: 8vw !important;}
  .mb40{ margin-bottom: 10.666vw !important;}
  .mb50{ margin-bottom: 13.333vw !important;}
  .mt0 { margin-top: 0 !important;}
  .mt4 { margin-top: 1.066vw !important;}
  .mt8 { margin-top: 2.133vw !important;}
  .mt10{ margin-top: 2.666vw !important;}
  .mt12{ margin-top: 3.2vw !important;}
  .mt14{ margin-top: 3.733vw !important;}
  .mt16{ margin-top: 4.266vw !important;}
  .mt18{ margin-top: 4.8vw !important;}
  .mt20{ margin-top: 5.333vw !important;}
  .mt24{ margin-top: 6.4vw !important;}
  .mt30{ margin-top: 8vw !important;}
  .mt40{ margin-top: 10.666vw !important;}
  .mt50{ margin-top: 13.333vw !important;}
  .mr0 { margin-right: 0 !important;}
  .mr4 { margin-right: 1.066vw !important;}
  .mr8 { margin-right: 2.133vw !important;}
  .mr10{ margin-right: 2.666vw !important;}
  .mr12{ margin-right: 3.2vw !important;}
  .mr14{ margin-right: 3.733vw !important;}
  .mr16{ margin-right: 4.266vw !important;}
  .mr20{ margin-right: 5.333vw !important;}
  .mr24{ margin-right: 6.4vw !important;}
  .mr30{ margin-right: 8vw !important;}
  .mr40{ margin-right: 10.666vw !important;}
  .mr50{ margin-right: 13.333vw !important;}
  .ml0 { margin-left: 0 !important;}
  .ml4 { margin-left: 1.066vw !important;}
  .ml8 { margin-left: 2.133vw !important;}
  .ml10{ margin-left: 2.666vw !important;}
  .ml12{ margin-left: 3.2vw !important;}
  .ml14{ margin-left: 3.733vw !important;}
  .ml16{ margin-left: 4.266vw !important;}
  .ml20{ margin-left: 5.333vw !important;}
  .ml24{ margin-left: 6.4vw !important;}
  .ml30{ margin-left: 8vw !important;}
  .ml40{ margin-left: 10.666vw !important;}
  .ml50{ margin-left: 13.333vw !important;}

  /* padding */
  .pb0 { padding-bottom: 0 !important;}
  .pb4 { padding-bottom: 1.066vw !important;}
  .pb8 { padding-bottom: 2.133vw !important;}
  .pb10{ padding-bottom: 2.666vw !important;}
  .pb12{ padding-bottom: 3.2vw !important;}
  .pb14{ padding-bottom: 3.733vw !important;}
  .pb16{ padding-bottom: 4.266vw !important;}
  .pb18{ padding-bottom: 4.8vw !important;}
  .pb20{ padding-bottom: 5.333vw !important;}
  .pb24{ padding-bottom: 6.4vw !important;}
  .pb30{ padding-bottom: 8vw !important;}
  .pb40{ padding-bottom: 10.666vw !important;}
  .pb50{ padding-bottom: 13.333vw !important;}
  .pt0 { padding-top: 0 !important;}
  .pt4 { padding-top: 1.066vw !important;}
  .pt8 { padding-top: 2.133vw !important;}
  .pt10{ padding-top: 2.666vw !important;}
  .pt12{ padding-top: 3.2vw !important;}
  .pt14{ padding-top: 3.733vw !important;}
  .pt16{ padding-top: 4.266vw !important;}
  .pt18{ padding-top: 4.8vw !important;}
  .pt20{ padding-top: 5.333vw !important;}
  .pt24{ padding-top: 6.4vw !important;}
  .pt30{ padding-top: 8vw !important;}
  .pt40{ padding-top: 10.666vw !important;}
  .pt50{ padding-top: 13.333vw !important;}
  .pr0 { padding-right: 0 !important;}
  .pr4 { padding-right: 1.066vw !important;}
  .pr8 { padding-right: 2.133vw !important;}
  .pr10{ padding-right: 2.666vw !important;}
  .pr12{ padding-right: 3.2vw !important;}
  .pr14{ padding-right: 3.733vw !important;}
  .pr16{ padding-right: 4.266vw !important;}
  .pr18{ padding-right: 4.8vw !important;}
  .pr20{ padding-right: 5.333vw !important;}
  .pr24{ padding-right: 6.4vw !important;}
  .pr30{ padding-right: 8vw !important;}
  .pr40{ padding-right: 10.666vw !important;}
  .pr50{ padding-right: 13.333vw !important;}
  .pl0 { padding-left: 0 !important;}
  .pl4 { padding-left: 1.066vw !important;}
  .pl8 { padding-left: 2.133vw !important;}
  .pl10{ padding-left: 2.666vw !important;}
  .pl12{ padding-left: 3.2vw !important;}
  .pl14{ padding-left: 3.733vw !important;}
  .pl16{ padding-left: 4.266vw !important;}
  .pl18{ padding-left: 4.8vw !important;}
  .pl20{ padding-left: 5.333vw !important;}
  .pl24{ padding-left: 6.4vw !important;}
  .pl30{ padding-left: 8vw !important;}
  .pl40{ padding-left: 10.666vw !important;}
  .pl50{ padding-left: 13.333vw !important;}

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

}