@charset "utf-8";

/*----- common -----*/
html {font-size: 62.5%;}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.3;
  color: #032c76;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
  background: #EEE;
  padding: 9.5rem 0 0 0;
}
.roboto {font-family: 'Roboto', sans-serif; font-weight: 500;}
.dblock, .pc {display: block;}
.dnone, .sp {display: none;}
.tac {text-align: center;}
.tar {text-align: right;}
.relative {position: relative;}
.z1 {z-index: 1;}
.collapse {
  cursor: pointer;
  position: relative;
}
.skew {
  position: relative;
  /* -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%); */
}
.skew::before {
  content: "";
  display: block;
  width: 75rem;
  height: 12rem;
  position: absolute;
  bottom: 0;
}
.skew01::before {
  background: url(../img/common/skew01.webp) no-repeat center top;
  background-size: cover;
}
.skew02::before {
  background: url(../img/common/skew02.webp) no-repeat center top;
  background-size: cover;
}
.skew03::before {
  background: url(../img/common/skew03.webp) no-repeat center top;
  background-size: cover;
}
.skew04::after {
  content: "";
  display: block;
  width: 75rem;
  height: 12rem;
  position: absolute;
  top: 0;
  background: url(../img/common/skew04.webp) no-repeat center top;
  background-size: cover;
}
.skew05::before {
  background: url(../img/common/skew05.webp) no-repeat center top;
  background-size: cover;
}
/*---------- upper -----------*/
#container {
  max-width: 75rem;
  margin: 0 auto;
  overflow: hidden;
  background: #FFF;
}
.box {
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
}
.m_box {
  position: relative;
  padding-left: 5rem;
  padding-right: 5rem;
}
.s_box {
  position: relative;
  padding-left: 8rem;
  padding-right: 8rem;
}
.white_box {
  background: #FFF;
  box-shadow: 0.2rem 0.2rem 2.1rem #113f7e80;
}
.mark {
  background: #FFF url(../img/common/mark.webp) no-repeat 0.5rem 0.5rem;
  background-size: 6rem;
}
.dotted {
  background: url(../img/triple_attack/dotted.webp) no-repeat center top;
  background-size: contain;
  height: 0.2rem;
  border: none;
}

/*----- column -----*/
.flex {display: flex;}
.sec, .sec_rev {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sec_rev {flex-direction: row-reverse;}
.jcc {justify-content: center;}
.aic {align-items: center;}

.w320 > li {width: 32rem;}

/*---------- margin,padding -----------*/
.mb10 {margin-bottom: 1rem;}
.mb15 {margin-bottom: 1.5rem;}
.mb20 {margin-bottom: 2rem;}
.mb25 {margin-bottom: 2.5rem;}
.mb30 {margin-bottom: 3rem;}
.mb35 {margin-bottom: 3.5rem;}
.mb40 {margin-bottom: 4rem;}
.mb45 {margin-bottom: 4.5rem;}
.mb50 {margin-bottom: 5rem;}
.mb60 {margin-bottom: 6rem;}
.mb75 {margin-bottom: 7.5rem;}
.mb90 {margin-bottom: 9rem;}
.mb120 {margin-bottom: 12rem;}
.mb150 {margin-bottom: 15rem;}

.mbm5 {margin-bottom: -0.5rem;}

.mr5 {margin-right: 0.5rem;}
.mr10 {margin-right: 1rem;}

.ml20 {margin-left: 2rem;}

.ml10r5 {margin: 0 0.5rem 0 1rem;}

.pb5 {padding-bottom: 0.5rem;}
.pb15 {padding-bottom: 1.5rem;}
.pb30 {padding-bottom: 3rem;}
.pb40 {padding-bottom: 4rem;}
.pb45 {padding-bottom: 4.5rem;}
.pb60 {padding-bottom: 6rem;}
.pb90 {padding-bottom: 9rem;}
.pb120 {padding-bottom: 12rem;}
.pb150 {padding-bottom: 15rem;}

.pt30 {padding-top: 3.0rem;}
.pt40 {padding-top: 4rem;}
.pt45 {padding-top: 4.5rem;}
.pt50 {padding-top: 5rem;}
.pt60 {padding-top: 6rem;}
.pt90 {padding-top: 9rem;}
.pt120 {padding-top: 12rem;}
.pt150 {padding-top: 15rem;}

.ptb15 {padding-top: 1.5rem; padding-bottom: 1.5rem;}
.ptb20 {padding-top: 2rem; padding-bottom: 2rem;}
.ptb30 {padding-top: 3rem; padding-bottom: 3rem;}
.ptb60 {padding-top: 6rem; padding-bottom: 6rem;}
.ptb90 {padding-top: 9rem; padding-bottom: 9rem;}

.p30 {padding: 3rem;}
.p45 {padding: 4.5rem;}
.p60 {padding: 6rem;}
.plr30 {padding-left: 3rem; padding-right: 3rem;}
.plr60 {padding-left: 6rem; padding-right: 6rem;}

/*----- img -----*/
.c_img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.r_img {
  display:block;
  margin-left: auto;
}
.img_h {
  transition: 0.3s;
}
.img_h:hover {
  opacity: 0.8;
}

/*----- color -----*/
.white_bg {background: #ffffff;}
.gray_bg {background: #e6ebf5;}
.blue_bg {background: linear-gradient(135deg, #008eda 0%,#0143a4 50%,#003f9a 100%);}
.blue_bg02 {background: #003f9a;}
.blue_bg03 {background: #113f7e;}
.blue_bg04 {background: linear-gradient(135deg, #003f9a 0%,#0143a4 50%,#008eda 100%);}

.lblue_bg01 {background: #58a9ff;}
.lblue_bg02 {background: #177fc4;}
.lblue_bg03 {background: #327fc4;}
.lblue_bg04 {background: #73bcec;}


.pink {color: #c94284;}
.yellow {color: #fae67d;}
.yellow02 {color: #ffff4b;}
.white {color: #FFF;}

/*----- text -----*/
.fs14 {font-size: 1.4rem;}
.fs16 {font-size: 1.6rem;}
.fs20 {font-size: 2.0rem;}
.fs22 {font-size: 2.2rem;}
.fs24 {font-size: 2.4rem;}
.fs25 {font-size: 2.5rem;}
.fs26 {font-size: 2.6rem;}
.fs28 {font-size: 2.8rem;}
.fs30 {font-size: 3.0rem;}
.fs32 {font-size: 3.2rem;}
.fs34 {font-size: 3.4rem;}
.fs36 {font-size: 3.6rem;}
.fs38 {font-size: 3.8rem;}
.fs40 {font-size: 4.0rem;}
.fs41 {font-size: 4.1rem;}
.fs42 {font-size: 4.2rem;}
.fs44 {font-size: 4.4rem;}
.fs46 {font-size: 4.6rem;}
.fs48 {font-size: 4.8rem;}
.fs49 {font-size: 4.9rem;}
.fs52 {font-size: 5.2rem;}
.fs54 {font-size: 5.4rem;}
.fs58 {font-size: 5.8rem;}
.fs64 {font-size: 6.4rem;}
.fs66 {font-size: 6.6rem;}
.fs68 {font-size: 6.8rem;}
.fs70 {font-size: 7.0rem;}
.fs72 {font-size: 7.2rem;}
.fs74 {font-size: 7.4rem;}
.fs78 {font-size: 7.8rem;}
.fs80 {font-size: 8rem;}
.fs84 {font-size: 8.4rem;}
.fs100 {font-size: 10rem;}
.fs102 {font-size: 10.2rem;}
.fs120 {font-size: 12rem;}
.fs140 {font-size: 14rem;}
.fs145 {font-size: 14.5rem;}
.fs156 {font-size: 15.6rem;}
.fs160 {font-size: 16rem;}

.fw100 {font-weight: 100;}
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
h2, h3, h4 {font-weight: 300;}

mark {
  display: inline-block;
  position: relative;
  z-index: 1;
  line-height: 1;
  color: #032c76;
}
.roboto .marker::after {
  bottom: 0;
}
.marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.6rem;
  width: 100%;
  height: 2.4rem;
  background: #fae67d;
  z-index: -1;
  transform   : skewX(-30deg);/* 傾き角度 */
}
.wavyline::after, .wavyline02::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.4rem;
  width: 100%;
  height: 1rem;
  z-index: -1;
}
.wavyline::after {
  background: url(../img/common/wavyline01.webp) no-repeat center top;
  background-size: cover;
}
.wavyline02::after {
  background: url(../img/common/wavyline02.webp) no-repeat center top;
  background-size: cover;
}
.speech {
  position: relative;
  z-index: 1;
  padding: 0 3rem;
}
.speech::before, .speech::after {
  content: "";
  position: absolute;
  bottom: -0.6rem;
  width: 0.2rem;
  height: 100%;
  background: #FFF;
  z-index: -1;
}
.speech02::before, .speech02::after {
  background: #c94284;
}
.speech::before {
  left: 0;
  transform: rotate(-30deg);
}
.speech::after {
  right: 0;
  transform: rotate(30deg);
}
.ts60 .speech::before, .ts60 .speech::after {box-shadow: 0.4rem 0.4rem 0.2rem #082d59aa;}
.ts45 .speech::before, .ts45 .speech::after {box-shadow: 0.4rem 0.4rem 0.2rem #082d5970;}

.italic {font-style: italic;}
.lh1 {line-height: 1;}
.lh11 {line-height: 1.1;}
.lh12 {line-height: 1.2;}
.lh18 {line-height: 1.8;}

.lsm3 {letter-spacing: -0.3rem;}
.lsm30 {letter-spacing: -3rem;}
.ls0 {letter-spacing: 0;}

.w90 {
  transform-origin: 0 0;  /* 要素の左上を基準に変形をかける */
  transform: scaleX(0.9); /* 長体率(%) / 100 */
  width: 111%; /* 要素幅調整 (100 / 長体率% * 100)% */
}
.w85 {
  transform-origin: 0 0;  /* 要素の左上を基準に変形をかける */
  transform: scaleX(0.85); /* 長体率(%) / 100 */
  width: 117.6%; /* 要素幅調整 (100 / 長体率% * 100)% */
}
.w80 {
  transform-origin: 0 0;  /* 要素の左上を基準に変形をかける */
  transform: scaleX(0.8); /* 長体率(%) / 100 */
  width: 125%; /* 要素幅調整 (100 / 長体率% * 100)% */
}
.ts60 {text-shadow: 0.4rem 0.4rem 0.2rem #082d59aa;}
.ts45 {text-shadow: 0.4rem 0.4rem 0.2rem #082d5970;}

/*----- footer -----*/

footer a {
  display: inline-block;
  margin: 0 1rem;
}

@media screen and (max-width:749px) {
  html {
    font-size: 1.33333vw
  }
  .pc {display: none;}
  .sp {display: block;}
}