@charset "utf-8";

/*
w375px換算
10px = 2.66667vw
12px = 3.2vw
14px = 3.73333vw
16px = 4.26666vw
17px = 4.53333vw
18px = 4.8vw
20px = 5.33333vw
22px = 5.86666vw
24px = 6.4vw
26px = 6.93333vw
30px = 8vw
*/

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

a {
  color: #00619D;
  cursor: pointer;
  transition-duration: .5s;
}

a:hover {
  color: #0a58ca;
  opacity: .6;
}


/* ========== レイアウト ========== */
/* ヘッダー */
.l-header__inner {
  /* padding: 2vw 4vw; */
  padding: 8px 14px;
  margin: 0 auto;
}

.l-header__logo {
  /* max-width: 26.6667vw; */
  max-width: 90px;
}

/* フッター */
.l-footer {
  width: 100%;
  /* padding: 7vw; */
  padding: 26px;
}

.l-footer--gray {
  background-color: #d9e1e3;
}

.l-footer__copy {
  font-size: 12px;
  text-align: center;
}

.l-footer__policy {
  text-align: center;
  padding-bottom: 10px;
}

.l-footer__policy a {
  font-size: 12px;
  margin-left: 10px;
}


/* ↓↓↓↓↓↓↓↓ プロジェクト ↓↓↓↓↓↓↓↓ */
/* ヘッダー中身 */
.p-header {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

.p-header__logo {
  /* max-width: 15.625vw; */
  max-width: 90px;
  margin: auto 0;
}

.p-header__cv {
  margin: auto 0 auto auto;
}


/* ========== コンポーネント ========== */
/* ボタン */
.c-button {
  display: block;
  position: relative;
  text-align: center;
  text-decoration: none;
  background-color: #e20000;
  border: solid 2px #e20000;
  border-radius: 100px;
  color: #fff;
  /* font-size: 4.81283vw; */
  font-size: 18px;
  line-height: 1.6;
  /* padding: 4vw 8vw; */
  padding: 14px 30px;
  margin: 0 auto;
  transition-duration: .5s;
}

.c-button--little {
  /* font-size: 4vw; */
  font-size: 14px;
  border: solid 1px #e20000;
}

.c-button--blue {
  background-color: #365a9d;
  border: solid 2px #365a9d;
}

.c-button--orange {
  background-color: #f08a12;
  border: solid 2px #f08a12;
}

.c-button--yellow {
  box-shadow: 0 8px #716a18;
  background-color: #a79b0f;
  border: solid 2px #a79b0f;
  border-radius: 10px;
  z-index: 100;
}

.c-button--darkBlue {
  background-color: #02165A;
  border: solid 2px #02165A;
}

.c-button--arrow::before {
  position: absolute;
  top: 50%;
  /* right: 4vw; */
  right: 10px;
  transform: translateY(-50%);
  content: "";
  /* border: 2vw solid transparent; */
  /* border-left: 2vw solid #fff; */
  border: 8px solid transparent;
  border-left: 8px solid #fff;
  transition-duration: .5s;
}

.c-button:hover,
.c-button--current.c-button {
  background-color: #fff;
  color: #e20000;
  border: solid 2px #e20000;
  opacity: 1;
}

.c-button:hover.c-button--little:hover,
.c-button--current.c-button.c-button--little:hover {
  /* font-size: 4vw; */
  font-size: 14px;
  border: solid 1px #e20000;
}

.c-button:hover.c-button--arrow::before,
.c-button--current.c-button.c-button--arrow::before {
  /* border: 2vw solid transparent; */
  /* border-left: 2vw solid #e20000; */
  border: 8px solid transparent;
  border-left: 8px solid #e20000;
}

.c-button--blue:hover,
.c-button--current.c-button--blue {
  background-color: #fff;
  color: #365a9d;
  border: solid 2px #365a9d;
}

.c-button--blue:hover.c-button--arrow::before,
.c-button--current.c-button--blue.c-button--arrow::before {
  /* border: 2vw solid transparent; */
  /* border-left: 2vw solid #365a9d; */
  border: 8px solid transparent;
  border-left: 8px solid #365a9d;
}

.c-button--orange:hover,
.c-button--current.c-button--orange {
  background-color: #fff;
  color: #f08a12;
  border: solid 2px #f08a12;
}

.c-button--orange:hover.c-button--arrow::before,
.c-button--current.c-button--orange.c-button--arrow::before {
  /* border: 2vw solid transparent; */
  /* border-left: 2vw solid #f08a12; */
  border: 8px solid transparent;
  border-left: 8px solid #f08a12;
}

.c-button--yellow:hover,
.c-button--current.c-button--yellow {
  color: #fff;
  box-shadow: 0 0 #716a18;
  background-color: #a79b0f;
  border: solid 2px #a79b0f;
  transform: translateY(8px);
}

.c-button--yellow:hover.c-button--arrow::before,
.c-button--current.c-button--yellow.c-button--arrow::before {
  /* border: 2vw solid transparent; */
  /* border-left: 2vw solid #fff; */
  border: 8px solid transparent;
  border-left: 8px solid #fff;
}

.c-button--darkBlue:hover,
.c-button--current.c-button--darkBlue {
  background-color: #fff;
  color: #02165A;
  border: solid 2px #02165A;
}

.c-button--darkBlue:hover.c-button--arrow::before,
.c-button--current.c-button--darkBlue.c-button--arrow::before {
  /* border: 2vw solid transparent; */
  /* border-left: 2vw solid #02165A; */
  border: 8px solid transparent;
  border-left: 8px solid #02165A;
}

.c-button--small {
  /* font-size: 3.73333vw; */
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  /* padding: 2vw 6vw; */
  padding: 8px 22px;
  margin: 0;
}

/* バッジ */
.c-badge {
  display: inline-block;
  /* font-size: 3.2vw; */
  font-size: 12px;
  font-weight: bold;
  color: #d82533;
  border: solid 2px #d82533;
  border-radius: 8px;
  /* padding: .8vw 2vw; */
  padding: 4px 8px;
}


/* ========== ユーティリティ ========== */
.u-align-center {
  text-align: center;
}

.u-align-left {
  text-align: left;
}

.u-align-right {
  text-align: right;
}

.u-bold {
  font-weight: bold;
}

.u-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.u-col-12,
.u-col-11,
.u-col-10,
.u-col-9,
.u-col-8,
.u-col-7,
.u-col-6,
.u-col-5,
.u-col-4,
.u-col-3,
.u-col-2,
.u-col-1 {
  display: flex;
  flex-wrap: wrap;
  /* align-items: flex-start; */
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.u-sp {
  display: block;
}

.u-pc {
  display: none;
}

.u-chLogo {
  display: inline-block;
  vertical-align: sub;
  max-width: 70px;
  margin: 0 0 0 8px;
}

@media screen and (min-width: 768px) {

  /* ========== レイアウト ========== */
  /* ヘッダー */
  .l-header__inner {
    max-width: 1280px;
    padding: 10px 80px;
  }

  .l-header__logo {
    max-width: 120px;
  }

  /* フッター */
  .l-footer {
    padding: 40px;
  }

  .l-footer__copy {
    font-size: 16px;
  }

  .l-footer__policy a {
    font-size: 14px;
    margin-left: 16px;
  }

  /* ↓↓↓↓↓↓↓↓ プロジェクト ↓↓↓↓↓↓↓↓ */
  /* ヘッダー中身 */
  .p-header__logo {
    max-width: 120px;
  }


  /* ========== コンポーネント ========== */
  /* ボタン */
  .c-button {
    max-width: 600px;
    font-size: 30px;
    padding: 30px 80px;
    margin: 0 auto;
  }

  .c-button--little {
    font-size: 24px;
    padding: 20px 40px;
    margin: 0;
  }

  .c-button--blue,
  .c-button--orange,
  .c-button--yellow {
    font-size: 24px;
    padding: 20px 80px;
  }

  .c-button--left {
    margin-left: 0;
  }

  .c-button--full {
    max-width: 100%;
  }

  .c-button--small {
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px;
    padding: 6px 20px;
    margin: 0;
  }

  .c-button--arrow::before {
    right: 16px;
    border: 8px solid transparent;
    border-left: 12px solid #fff;
  }

  .c-button:hover {
    background-color: #fff;
    color: #e20000;
    border: solid 2px #e20000;
  }

  .c-button:hover.c-button--little:hover {
    font-size: 24px
  }

  .c-button:hover.c-button--arrow::before {
    border: 8px solid transparent;
    border-left: 12px solid #e20000;
  }

  .c-button--blue:hover {
    background-color: #fff;
    color: #365a9d;
    border: solid 2px #365a9d;
  }

  .c-button--blue:hover.c-button--arrow::before {
    border: 8px solid transparent;
    border-left: 12px solid #365a9d;
  }

  .c-button--orange:hover {
    background-color: #fff;
    color: #f08a12;
    border: solid 2px #f08a12;
  }

  .c-button--orange:hover.c-button--arrow::before {
    border: 8px solid transparent;
    border-left: 12px solid #f08a12;
  }

  .c-button--yellow:hover {
    color: #fff;
    box-shadow: 0 0 #716a18;
    background-color: #a79b0f;
    border: solid 2px #a79b0f;
    transform: translateY(8px);
  }

  .c-button--yellow:hover.c-button--arrow::before {
    border: 8px solid transparent;
    border-left: 12px solid #fff;
  }

  .c-button--darkBlue:hover {
    background-color: #fff;
    color: #02165A;
    border: solid 2px #02165A;
  }

  .c-button--darkBlue:hover.c-button--arrow::before {
    border: 8px solid transparent;
    border-left: 12px solid #02165A;
  }

  /* バッジ */
  .c-badge {
    vertical-align: super;
    font-size: 16px;
    padding: 4px 10px;
  }


  /* ========== ユーティリティ ========== */
  .u-mgTop-0 {
    margin-top: 0 !important;
  }

  .u-col-1 {
    max-width: 8.3333333333%;
    flex: 0 0 8.3333333333%;
  }

  .u-col-2 {
    max-width: 16.6666666667%;
    flex: 0 0 16.6666666667%;
  }

  .u-col-3 {
    max-width: 25%;
    flex: 0 0 25%;
  }

  .u-col-4 {
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }

  .u-col-5 {
    max-width: 41.6666666667%;
    flex: 0 0 41.6666666667%;
  }

  .u-col-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .u-col-7 {
    max-width: 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }

  .u-col-8 {
    max-width: 66.6666666667%;
    flex: 0 0 66.6666666667%;
  }

  .u-col-9 {
    max-width: 75%;
    flex: 0 0 75%;
  }

  .u-col-10 {
    max-width: 83.3333333333%;
    flex: 0 0 83.3333333333%;
  }

  .u-col-11 {
    max-width: 91.6666666667%;
    flex: 0 0 91.6666666667%;
  }

  .u-sp {
    display: none;
  }

  .u-pc {
    display: block;
  }

  .u-chLogo {
    max-width: 80px;
    margin: 0 0 0 12px;
  }
}