.ta-c { text-align: center; }
.ta-c-pc { text-align: center; }
.ta-r { text-align: right; }

.flex-row { display: flex; }
.flex-row.wrap { flex-wrap: wrap; }
.flex-row.jc-c { justify-content: center; }
.flex-row.jc-sb { justify-content: space-between; }
.flex-row.jc-fe { justify-content: flex-end; }
.flex-row.ai-c { align-items: center; }
.flex-row.ai-fe { align-items: flex-end; }

.flex-row.pad-5 {
  margin-right: -5px;
  margin-left: -5px;
}

.flex-row.pad-5 > * {
  margin-right: 5px;
  margin-left: 5px;
}

.flex-row.pad-10 {
  margin-right: -10px;
  margin-left: -10px;
}

.flex-row.pad-10 > * {
  margin-right: 10px;
  margin-left: 10px;
}

.flex-row.pad-20 {
  margin-right: -20px;
  margin-left: -20px;
}

.flex-row.pad-20 > * {
  margin-right: 20px;
  margin-left: 20px;
}

.flex-row.pad-30 {
  margin-right: -30px;
  margin-left: -30px;
}

.flex-row.pad-30 > * {
  margin-right: 30px;
  margin-left: 30px;
}

.flex-row.pad-40 {
  margin-right: -40px;
  margin-left: -40px;
}

.flex-row.pad-40 > * {
  margin-right: 40px;
  margin-left: 40px;
}

.flex-row.col-2,
.flex-row.col-3,
.flex-row.col-4,
.flex-row.col-5 {
  flex-wrap: wrap;
}

.flex-row.col-2 > * { flex-basis: calc(100% / 2); }
.flex-row.col-3 > * { flex-basis: calc(100% / 3); }
.flex-row.col-4 > * { flex-basis: calc(100% / 4); }
.flex-row.col-5 > * { flex-basis: calc(100% / 5); }
.flex-row.col-6 > * { flex-basis: calc(100% / 6); }

.flex-row.col-2.pad-5 > * { flex-basis: calc(100% / 2 - 10px); }
.flex-row.col-3.pad-5 > * { flex-basis: calc(100% / 3 - 10px); }
.flex-row.col-4.pad-5 > * { flex-basis: calc(100% / 4 - 10px); }
.flex-row.col-5.pad-5 > * { flex-basis: calc(100% / 5 - 10px); }
.flex-row.col-6.pad-5 > * { flex-basis: calc(100% / 6 - 10px); }

.flex-row.col-2.pad-10 > * { flex-basis: calc(100% / 2 - 20px); }
.flex-row.col-3.pad-10 > * { flex-basis: calc(100% / 3 - 20px); }
.flex-row.col-4.pad-10 > * { flex-basis: calc(100% / 4 - 20px); }
.flex-row.col-5.pad-10 > * { flex-basis: calc(100% / 5 - 20px); }
.flex-row.col-6.pad-10 > * { flex-basis: calc(100% / 6 - 20px); }

.flex-row.col-2.pad-20 > * { flex-basis: calc(100% / 2 - 40px); }
.flex-row.col-3.pad-20 > * { flex-basis: calc(100% / 3 - 40px); }
.flex-row.col-4.pad-20 > * { flex-basis: calc(100% / 4 - 40px); }
.flex-row.col-5.pad-20 > * { flex-basis: calc(100% / 5 - 40px); }
.flex-row.col-6.pad-20 > * { flex-basis: calc(100% / 6 - 40px); }

.flex-row.col-2.pad-30 > * { flex-basis: calc(100% / 2 - 60px); }
.flex-row.col-3.pad-30 > * { flex-basis: calc(100% / 3 - 60px); }
.flex-row.col-4.pad-30 > * { flex-basis: calc(100% / 4 - 60px); }
.flex-row.col-5.pad-30 > * { flex-basis: calc(100% / 5 - 60px); }
.flex-row.col-6.pad-30 > * { flex-basis: calc(100% / 6 - 60px); }

.flex-row.col-2.pad-40 > * { flex-basis: calc(100% / 2 - 80px); }
.flex-row.col-3.pad-40 > * { flex-basis: calc(100% / 3 - 80px); }
.flex-row.col-4.pad-40 > * { flex-basis: calc(100% / 4 - 80px); }
.flex-row.col-5.pad-40 > * { flex-basis: calc(100% / 5 - 80px); }
.flex-row.col-6.pad-40 > * { flex-basis: calc(100% / 6 - 80px); }

.flex-1 > * {
  flex: 1;
}

.pd-10 { padding: 10px; }
.pd-20 { padding: 20px; }
.pd-30 { padding: 30px; }
.pd-40 { padding: 40px; }
.pd-50 { padding: 50px; }
.pd-60 { padding: 60px; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-140 { margin-top: 140px; }

.mb-10, *.mb-10 { margin-bottom: 10px; }
.mb-20, *.mb-20 { margin-bottom: 20px; }
.mb-30, *.mb-30 { margin-bottom: 30px; }
.mb-40, *.mb-40 { margin-bottom: 40px; }
.mb-50, *.mb-50 { margin-bottom: 50px; }
.mb-60, *.mb-60 { margin-bottom: 60px; }
.mb-70, *.mb-70 { margin-bottom: 70px; }
.mb-80, *.mb-80 { margin-bottom: 80px; }
.mb-100, *.mb-100 { margin-bottom: 100px; }
.mb-120, *.mb-120 { margin-bottom: 120px; }
.mb-140, *.mb-140 { margin-bottom: 140px; }

.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-20 { line-height: 2.0; }
.lh-22 { line-height: 2.2; }
.lh-24 { line-height: 2.4; }

.ls-4 { letter-spacing: 0.04em; }
.ls-6 { letter-spacing: 0.06em; }
.ls-8 { letter-spacing: 0.08em; }
.ls-10 { letter-spacing: 0.1em; }
.ls-16 { letter-spacing: 0.16em; }
.ls-m4 { letter-spacing: -0.04em; }
.ls-m6 { letter-spacing: -0.06em; }
.ls-m8 { letter-spacing: -0.08em; }
.ls-m10 { letter-spacing: -0.1em; }
.ls-m16 { letter-spacing: -0.16em; }

.tx-indent { padding-left: 1em; }

*.fc-white { color: #fff !important; }
*.fc-black { color: #000 !important; }
*.fc-gold { color: #C7A12B !important; }
*.fc-grey { color: #7A7A7A !important; }
*.fc-red { color: #D42929 !important; }
*.fc-red-l { color: #F03540 !important; }
*.fc-pink { color: #EF4E8E !important; }
*.fc-blue { color: #161075 !important; }
*.fc-blue-l { color: #3B79C4 !important; }
*.fc-green { color: #009FA5 !important; }
*.fc-yellow { color: #FFFF00 !important; }
*.fc-orange { color: #FF7E00 !important; }
*.fc-brown { color: #412A01 !important; }
*.fc-brown-l { color: #715101 !important; }

.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 800; }

.ff-serif { font-family: 'Noto Serif JP', serif; }

*.fs-12 { font-size: 12px !important;}
*.fs-14 { font-size: 14px !important;}
*.fs-16 { font-size: 16px !important;}
*.fs-18 { font-size: 18px !important;}
*.fs-20 { font-size: 20px !important;}
*.fs-22 { font-size: 22px !important;}
*.fs-24 { font-size: 24px !important;}
*.fs-26 { font-size: 26px !important;}
*.fs-28 { font-size: 28px !important;}
*.fs-30 { font-size: 30px !important;}
*.fs-32 { font-size: 32px !important;}
*.fs-34 { font-size: 34px !important;}
*.fs-36 { font-size: 36px !important;}
*.fs-38 { font-size: 38px !important;}
*.fs-40 { font-size: 40px !important;}
*.fs-42 { font-size: 42px !important;}
*.fs-44 { font-size: 44px !important;}
*.fs-46 { font-size: 46px !important;}
*.fs-48 { font-size: 48px !important;}
*.fs-50 { font-size: 50px !important;}
*.fs-52 { font-size: 52px !important;}
*.fs-54 { font-size: 54px !important;}
*.fs-56 { font-size: 56px !important;}
*.fs-58 { font-size: 58px !important;}
*.fs-60 { font-size: 60px !important;}
*.fs-62 { font-size: 62px !important;}
*.fs-64 { font-size: 64px !important;}
*.fs-66 { font-size: 66px !important;}
*.fs-68 { font-size: 68px !important;}
*.fs-70 { font-size: 70px !important;}
*.fs-72 { font-size: 72px !important;}
*.fs-74 { font-size: 74px !important;}
*.fs-76 { font-size: 76px !important;}
*.fs-78 { font-size: 78px !important;}
*.fs-80 { font-size: 80px !important;}

.box-fill { background: #F3F3F3; }
.box-fill.mod-grey { background: #F5F5F5; }
.box-fill.mod-beige { background: #faf5e2; }
.box-fill.mod-blue { background: #EBF8FE; }
.box-fill.mod-pink { background: #FFF7F5; }
.box-fill.mod-rad { border-radius: 8px; overflow: hidden; }
.box-fill.mod-shadow { box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); }

*.only-sp { display: none; }

@media (max-width: 880px) {
  .pd-10 { padding: 10px; }
  .pd-20 { padding: 10px; }
  .pd-30 { padding: 15px; }
  .pd-40 { padding: 20px; }
  .pd-50 { padding: 25px; }
  .pd-60 { padding: 30px; }

  .mt-10 { margin-top: 10px; }
  .mt-20 { margin-top: 10px; }
  .mt-30 { margin-top: 15px; }
  .mt-40 { margin-top: 20px; }
  .mt-50 { margin-top: 25px; }
  .mt-60 { margin-top: 30px; }
  .mt-70 { margin-top: 35px; }
  .mt-80 { margin-top: 40px; }
  .mt-100 { margin-top: 40px; }
  .mt-120 { margin-top: 40px; }
  .mt-140 { margin-top: 40px; }

  .mb-10, *.mb-10 { margin-bottom: 10px; }
  .mb-20, *.mb-20 { margin-bottom: 10px; }
  .mb-30, *.mb-30 { margin-bottom: 15px; }
  .mb-40, *.mb-40 { margin-bottom: 20px; }
  .mb-50, *.mb-50 { margin-bottom: 25px; }
  .mb-60, *.mb-60 { margin-bottom: 30px; }
  .mb-70, *.mb-70 { margin-bottom: 35px; }
  .mb-80, *.mb-80 { margin-bottom: 40px; }
  .mb-100, *.mb-100 { margin-bottom: 40px; }
  .mb-120, *.mb-120 { margin-bottom: 40px; }
  .mb-140, *.mb-140 { margin-bottom: 40px; }

  *.only-pc { display: none !important; }
  *.only-sp { display: inherit !important; }
  span.only-sp { display: inline !important; }
}