@charset "utf-8";
/*
   COLOR
--------------------------------------------------------------*/

/* font color */
.fc{ color: var(--color-font) }
.fc-base{ color: var(--color-base) }
.fc-base1{ color: var(--color-base1) }
.fc-base2{ color: var(--color-base2) }
.fc-base3{ color: var(--color-base3) }
.fc-base4{ color: var(--color-base4) }
.fc-accent{ color: var(--color-accent) }

.fc-000{ color: var(--color-000) }
.fc-111{ color: var(--color-111) }
.fc-222{ color: var(--color-222) }
.fc-333{ color: var(--color-333) }
.fc-444{ color: var(--color-444) }
.fc-555{ color: var(--color-555) }
.fc-666{ color: var(--color-666) }
.fc-777{ color: var(--color-777) }
.fc-888{ color: var(--color-888) }
.fc-999{ color: var(--color-999) }
.fc-aaa{ color: var(--color-aaa) }
.fc-bbb{ color: var(--color-bbb) }
.fc-ccc{ color: var(--color-ccc) }
.fc-ddd{ color: var(--color-ddd) }
.fc-eee{ color: var(--color-eee) }
.fc-fff{ color: var(--color-fff) }

/* background color */
.bgc-base{ background-color: var(--color-base) }
.bgc-base1{ background-color: var(--color-base1) }
.bgc-base2{ background-color: var(--color-base2) }
.bgc-base3{ background-color: var(--color-base3) }
.bgc-base4{ background-color: var(--color-base4) }
.bgc-accent{ background-color: var(--color-accent) }

.bgc-000{ background-color: var(--color-000) }
.bgc-111{ background-color: var(--color-111) }
.bgc-222{ background-color: var(--color-222) }
.bgc-333{ background-color: var(--color-333) }
.bgc-444{ background-color: var(--color-444) }
.bgc-555{ background-color: var(--color-555) }
.bgc-666{ background-color: var(--color-666) }
.bgc-777{ background-color: var(--color-777) }
.bgc-888{ background-color: var(--color-888) }
.bgc-999{ background-color: var(--color-999) }
.bgc-aaa{ background-color: var(--color-aaa) }
.bgc-bbb{ background-color: var(--color-bbb) }
.bgc-ccc{ background-color: var(--color-ccc) }
.bgc-ddd{ background-color: var(--color-ddd) }
.bgc-eee{ background-color: var(--color-eee) }
.bgc-fff{ background-color: var(--color-fff) }

/* border color */
.bc-base{ border-color: var(--color-base) }
.bc-base1{ border-color: var(--color-base1) }
.bc-base2{ border-color: var(--color-base2) }
.bc-base3{ border-color: var(--color-base3) }
.bc-base4{ border-color: var(--color-base4) }
.bc-accent{ border-color: var(--color-accent) }

.bc-000{ border-color: var(--color-000) }
.bc-111{ border-color: var(--color-111) }
.bc-222{ border-color: var(--color-222) }
.bc-333{ border-color: var(--color-333) }
.bc-444{ border-color: var(--color-444) }
.bc-555{ border-color: var(--color-555) }
.bc-666{ border-color: var(--color-666) }
.bc-777{ border-color: var(--color-777) }
.bc-888{ border-color: var(--color-888) }
.bc-999{ border-color: var(--color-999) }
.bc-aaa{ border-color: var(--color-aaa) }
.bc-bbb{ border-color: var(--color-bbb) }
.bc-ccc{ border-color: var(--color-ccc) }
.bc-ddd{ border-color: var(--color-ddd) }
.bc-eee{ border-color: var(--color-eee) }
.bc-fff{ border-color: var(--color-fff) }

/* svg color */
:where(.svgc-base){ fill: var(--color-base) }
:where(.svgc-base1){ fill: var(--color-base1) }
:where(.svgc-base2){ fill: var(--color-base2) }
:where(.svgc-base3){ fill: var(--color-base3) }
:where(.svgc-base4){ fill: var(--color-base4) }
:where(.svgc-accent){ fill: var(--color-accent) }

:where(.svgc-000){ fill: var(--color-000) }
:where(.svgc-111){ fill: var(--color-111) }
:where(.svgc-222){ fill: var(--color-222) }
:where(.svgc-333){ fill: var(--color-333) }
:where(.svgc-444){ fill: var(--color-444) }
:where(.svgc-555){ fill: var(--color-555) }
:where(.svgc-666){ fill: var(--color-666) }
:where(.svgc-777){ fill: var(--color-777) }
:where(.svgc-888){ fill: var(--color-888) }
:where(.svgc-999){ fill: var(--color-999) }
:where(.svgc-aaa){ fill: var(--color-aaa) }
:where(.svgc-bbb){ fill: var(--color-bbb) }
:where(.svgc-ccc){ fill: var(--color-ccc) }
:where(.svgc-ddd){ fill: var(--color-ddd) }
:where(.svgc-eee){ fill: var(--color-eee) }
:where(.svgc-fff){ fill: var(--color-fff) }

/*
   FONT
--------------------------------------------------------------*/
.jp{ font-family: var(--jp) }
.jp-accent{ font-family: var(--jp-accent) }
.en{ font-family: var(--en) }
.en-accent{ font-family: var(--jp-accent) }

.fw-n:lang(ja){font-weight: var(--fw-n-jp)}
.fw-n:lang(en){font-weight: var(--fw-n-en)}
.fw-b:lang(ja){font-weight: var(--fw-b-jp)}
.fw-b:lang(en){font-weight: var(--fw-b-en)}

/*
   FONT SIZE
--------------------------------------------------------------*/
.fs-10 { font-size: 10px }
.fs-11 { font-size: 11px }
.fs-12 { font-size: 12px }
.fs-13 { font-size: 13px }
.fs-14 { font-size: 14px }
.fs-15 { font-size: 15px }
.fs-16 { font-size: 16px }
.fs-17 { font-size: 17px }
.fs-18 { font-size: 18px }
.fs-19 { font-size: 19px }
.fs-20 { font-size: calc(20px * var(--font-size-ratio)) }
.fs-22 { font-size: calc(22px * var(--font-size-ratio)) }
.fs-24 { font-size: calc(24px * var(--font-size-ratio)) }
.fs-26 { font-size: calc(26px * var(--font-size-ratio)) }
.fs-28 { font-size: calc(28px * var(--font-size-ratio)) }
.fs-30 { font-size: calc(30px * var(--font-size-ratio)) }
.fs-32 { font-size: calc(32px * var(--font-size-ratio)) }
.fs-34 { font-size: calc(34px * var(--font-size-ratio)) }
.fs-36 { font-size: calc(36px * var(--font-size-ratio)) }
.fs-38 { font-size: calc(38px * var(--font-size-ratio)) }
.fs-40 { font-size: calc(40px * var(--font-size-ratio)) }
.fs-42 { font-size: calc(42px * var(--font-size-ratio)) }
.fs-44 { font-size: calc(44px * var(--font-size-ratio)) }
.fs-46 { font-size: calc(46px * var(--font-size-ratio)) }
.fs-48 { font-size: calc(48px * var(--font-size-ratio)) }
.fs-50 { font-size: calc(50px * var(--font-size-ratio)) }
.fs-52 { font-size: calc(52px * var(--font-size-ratio)) }
.fs-54 { font-size: calc(54px * var(--font-size-ratio)) }
.fs-56 { font-size: calc(56px * var(--font-size-ratio)) }
.fs-58 { font-size: calc(58px * var(--font-size-ratio)) }
.fs-60 { font-size: calc(60px * var(--font-size-ratio)) }
.fs-62 { font-size: calc(62px * var(--font-size-ratio)) }
.fs-64 { font-size: calc(64px * var(--font-size-ratio)) }
.fs-66 { font-size: calc(66px * var(--font-size-ratio)) }
.fs-68 { font-size: calc(68px * var(--font-size-ratio)) }
.fs-70 { font-size: calc(70px * var(--font-size-ratio)) }
.fs-72 { font-size: calc(72px * var(--font-size-ratio)) }
.fs-74 { font-size: calc(74px * var(--font-size-ratio)) }
.fs-76 { font-size: calc(76px * var(--font-size-ratio)) }
.fs-78 { font-size: calc(78px * var(--font-size-ratio)) }
.fs-80 { font-size: calc(80px * var(--font-size-ratio)) }


@media (max-width: 1023px) {
  /*.fs-10 { font-size: 10px }
  .fs-11 { font-size: 11px }
  .fs-12 { font-size: 12px }*/
  .fs-13 { font-size: 12px }
  .fs-14 { font-size: 13px }
  .fs-15 { font-size: 13px }
  .fs-16 { font-size: 13px }
  .fs-17 { font-size: 14px }
  .fs-18 { font-size: 14px }
  .fs-19 { font-size: 14px }
}
@media (min-width: 768px) {
  /*.fs-10 { font-size: 10px }
  .fs-11 { font-size: 11px }
  .fs-12 { font-size: 12px }
  .fs-13 { font-size: 13px }
  .fs-14 { font-size: 13px }*/
  .fs-15 { font-size: calc(15px * var(--font-size-ratio)) }
  .fs-16 { font-size: calc(16px * var(--font-size-ratio)) }
  .fs-17 { font-size: calc(17px * var(--font-size-ratio)) }
  .fs-18 { font-size: calc(18px * var(--font-size-ratio)) }
  .fs-19 { font-size: calc(19px * var(--font-size-ratio)) }
}

@media (max-width: 1023px) {
  .fs-10-sp { font-size: 10px }
  .fs-11-sp { font-size: 11px }
  .fs-12-sp { font-size: 12px }
  .fs-13-sp { font-size: 13px }
  .fs-14-sp { font-size: 14px }
  .fs-15-sp { font-size: 15px }
  .fs-16-sp { font-size: 16px }
  .fs-17-sp { font-size: 17px }
  .fs-18-sp { font-size: 18px }
  .fs-19-sp { font-size: 19px }
  .fs-20-sp { font-size: 20px }
  .fs-22-sp { font-size: 22px }
  .fs-24-sp { font-size: 24px }
  .fs-26-sp { font-size: 26px }
  .fs-28-sp { font-size: 28px }
  .fs-30-sp { font-size: 30px }
  .fs-32-sp { font-size: 32px }
  .fs-34-sp { font-size: 34px }
  .fs-36-sp { font-size: 36px }
  .fs-38-sp { font-size: 38px }
  .fs-40-sp { font-size: 40px }
  .fs-42-sp { font-size: 42px }
  .fs-44-sp { font-size: 44px }
  .fs-46-sp { font-size: 46px }
  .fs-48-sp { font-size: 48px }
  .fs-50-sp { font-size: 50px }
  .fs-52-sp { font-size: 52px }
  .fs-54-sp { font-size: 54px }
  .fs-56-sp { font-size: 56px }
  .fs-58-sp { font-size: 58px }
  .fs-60-sp { font-size: 60px }
  .fs-62-sp { font-size: 62px }
  .fs-64-sp { font-size: 64px }
  .fs-66-sp { font-size: 66px }
  .fs-68-sp { font-size: 68px }
  .fs-70-sp { font-size: 70px }
  .fs-72-sp { font-size: 72px }
  .fs-74-sp { font-size: 74px }
  .fs-76-sp { font-size: 76px }
  .fs-78-sp { font-size: 78px }
  .fs-80-sp { font-size: 80px }
}
@media (min-width: 768px) {
  .fs-10-tpc { font-size: 10px }
  .fs-11-tpc { font-size: 11px }
  .fs-12-tpc { font-size: 12px }
  .fs-13-tpc { font-size: 13px }
  .fs-14-tpc { font-size: 14px }
  .fs-15-tpc { font-size: 15px }
  .fs-16-tpc { font-size: 16px }
  .fs-17-tpc { font-size: 17px }
  .fs-18-tpc { font-size: 18px }
  .fs-19-tpc { font-size: 19px }
  .fs-20-tpc { font-size: 20px }
  .fs-22-tpc { font-size: 22px }
  .fs-24-tpc { font-size: 24px }
  .fs-26-tpc { font-size: 26px }
  .fs-28-tpc { font-size: 28px }
  .fs-30-tpc { font-size: 30px }
  .fs-32-tpc { font-size: 32px }
  .fs-34-tpc { font-size: 34px }
  .fs-36-tpc { font-size: 36px }
  .fs-38-tpc { font-size: 38px }
  .fs-40-tpc { font-size: 40px }
  .fs-42-tpc { font-size: 42px }
  .fs-44-tpc { font-size: 44px }
  .fs-46-tpc { font-size: 46px }
  .fs-48-tpc { font-size: 48px }
  .fs-50-tpc { font-size: 50px }
  .fs-52-tpc { font-size: 52px }
  .fs-54-tpc { font-size: 54px }
  .fs-56-tpc { font-size: 56px }
  .fs-58-tpc { font-size: 58px }
  .fs-60-tpc { font-size: 60px }
  .fs-62-tpc { font-size: 62px }
  .fs-64-tpc { font-size: 64px }
  .fs-66-tpc { font-size: 66px }
  .fs-68-tpc { font-size: 68px }
  .fs-70-tpc { font-size: 70px }
  .fs-72-tpc { font-size: 72px }
  .fs-74-tpc { font-size: 74px }
  .fs-76-tpc { font-size: 76px }
  .fs-78-tpc { font-size: 78px }
  .fs-80-tpc { font-size: 80px }
}
@media (min-width: 1024px) {
  .fs-10-pc { font-size: 10px }
  .fs-11-pc { font-size: 11px }
  .fs-12-pc { font-size: 12px }
  .fs-13-pc { font-size: 13px }
  .fs-14-pc { font-size: 14px }
  .fs-15-pc { font-size: 15px }
  .fs-16-pc { font-size: 16px }
  .fs-17-pc { font-size: 17px }
  .fs-18-pc { font-size: 18px }
  .fs-19-pc { font-size: 19px }
  .fs-20-pc { font-size: 20px }
  .fs-22-pc { font-size: 22px }
  .fs-24-pc { font-size: 24px }
  .fs-26-pc { font-size: 26px }
  .fs-28-pc { font-size: 28px }
  .fs-30-pc { font-size: 30px }
  .fs-32-pc { font-size: 32px }
  .fs-34-pc { font-size: 34px }
  .fs-36-pc { font-size: 36px }
  .fs-38-pc { font-size: 38px }
  .fs-40-pc { font-size: 40px }
  .fs-42-pc { font-size: 42px }
  .fs-44-pc { font-size: 44px }
  .fs-46-pc { font-size: 46px }
  .fs-48-pc { font-size: 48px }
  .fs-50-pc { font-size: 50px }
  .fs-52-pc { font-size: 52px }
  .fs-54-pc { font-size: 54px }
  .fs-56-pc { font-size: 56px }
  .fs-58-pc { font-size: 58px }
  .fs-60-pc { font-size: 60px }
  .fs-62-pc { font-size: 62px }
  .fs-64-pc { font-size: 64px }
  .fs-66-pc { font-size: 66px }
  .fs-68-pc { font-size: 68px }
  .fs-70-pc { font-size: 70px }
  .fs-72-pc { font-size: 72px }
  .fs-74-pc { font-size: 74px }
  .fs-76-pc { font-size: 76px }
  .fs-78-pc { font-size: 78px }
  .fs-80-pc { font-size: 80px }
}

/*
   TEXT ALIGN
--------------------------------------------------------------*/
.t-c {text-align: center}
.t-l {text-align: left}
.t-r {text-align: right}

@media screen and (max-width: 1023px){
  .t-c-sp {text-align: center}
  .t-l-sp {text-align: left}
  .t-r-sp {text-align: right}
}
@media screen and (min-width: 768px){
  .t-c-tpc {text-align: center}
  .t-l-tpc {text-align: left}
  .t-r-tpc {text-align: right}
}
@media screen and (min-width: 1024px){
  .t-c-pc {text-align: center}
  .t-l-pc {text-align: left}
  .t-r-pc {text-align: right}
}

/*
   LINE HIEGHT
--------------------------------------------------------------*/
.l-10 {line-height: calc(1 * var(--lh-ratio)) }
.l-12 {line-height: calc(1.2 * var(--lh-ratio)) }
.l-15 {line-height: calc(1.5 * var(--lh-ratio)) }
.l-18 {line-height: calc(1.8 * var(--lh-ratio)) }
.l-20 {line-height: calc(2 * var(--lh-ratio)) }
.l-22 {line-height: calc(2.2 * var(--lh-ratio)) }
@media screen and (max-width: 1023px){
  .l-10-sp {line-height: calc(1 * var(--lh-ratio)) }
  .l-12-sp {line-height: calc(1.2 * var(--lh-ratio)) }
  .l-15-sp {line-height: calc(1.5 * var(--lh-ratio)) }
  .l-18-sp {line-height: calc(1.8 * var(--lh-ratio)) }
  .l-20-sp {line-height: calc(2 * var(--lh-ratio)) }
  .l-22-sp {line-height: calc(2.2 * var(--lh-ratio)) }
}
@media screen and (min-width: 768px){
  .l-10-tpc {line-height: calc(1 * var(--lh-ratio)) }
  .l-12-tpc {line-height: calc(1.2 * var(--lh-ratio)) }
  .l-15-tpc {line-height: calc(1.5 * var(--lh-ratio)) }
  .l-18-tpc {line-height: calc(1.8 * var(--lh-ratio)) }
  .l-20-tpc {line-height: calc(2 * var(--lh-ratio)) }
  .l-22-tpc {line-height: calc(2.2 * var(--lh-ratio)) }
}
@media screen and (min-width: 1024px){
  .l-10-pc {line-height: calc(1 * var(--lh-ratio)) }
  .l-12-pc {line-height: calc(1.2 * var(--lh-ratio)) }
  .l-15-pc {line-height: calc(1.5 * var(--lh-ratio)) }
  .l-18-pc {line-height: calc(1.8 * var(--lh-ratio)) }
  .l-20-pc {line-height: calc(2 * var(--lh-ratio)) }
  .l-22-pc {line-height: calc(2.2 * var(--lh-ratio)) }
}

/*
   WIDTH
--------------------------------------------------------------*/
.w-1{ width: 1px }
.w-2{ width: 2px }
.w-3{ width: 3px }
.w-4{ width: 4px }
.w-5{ width: 5px }
.w-6{ width: 6px }
.w-7{ width: 7px }
.w-8{ width: 8px }
.w-9{ width: 9px }
.w-10{ width: 10px }
.w-15{ width: 15px }
.w-20{ width: 20px }
.w-25{ width: 25px }
.w-30{ width: 30px }
.w-35{ width: 35px }
.w-40{ width: 40px }
.w-45{ width: 45px }
.w-50{ width: 50px }
.w-60{ width: 60px }
.w-70{ width: 70px }
.w-80{ width: 80px }
.w-90{ width: 90px }
.w-100{ width: 100px }
.w-110{ width: 110px }
.w-120{ width: 120px }
.w-130{ width: 130px }
.w-140{ width: 140px }
.w-150{ width: 150px }
.w-160{ width: 160px }
.w-170{ width: 170px }
.w-180{ width: 180px }
.w-190{ width: 190px }
.w-200{ width: 200px }
.w-210{ width: 210px }
.w-220{ width: 220px }
.w-230{ width: 230px }
.w-240{ width: 240px }
.w-250{ width: 250px }
.w-260{ width: 260px }
.w-270{ width: 270px }
.w-280{ width: 280px }
.w-290{ width: 290px }
.w-300{ width: 300px }
.w-400{ width: 400px }
.w-500{ width: 500px }
.w-600{ width: 600px }
.w-700{ width: 700px }
.w-800{ width: 800px }
.w-900{ width: 900px }
.w-1000{ width: 1000px }

.w-10per{ width: 10%}
.w-15per{ width: 15%}
.w-20per{ width: 20%}
.w-25per{ width: 25%}
.w-30per{ width: 30%}
.w-35per{ width: 35%}
.w-40per{ width: 40%}
.w-45per{ width: 45%}
.w-50per{ width: 50%}
.w-55per{ width: 55%}
.w-60per{ width: 60%}
.w-65per{ width: 65%}
.w-70per{ width: 70%}
.w-75per{ width: 75%}
.w-80per{ width: 80%}
.w-85per{ width: 85%}
.w-90per{ width: 90%}
.w-95per{ width: 95%}
.w-100per{ width: 100%}

.w-1vw{ width: 1vw}
.w-2vw{ width: 2vw}
.w-3vw{ width: 3vw}
.w-4vw{ width: 4vw}
.w-5vw{ width: 5vw}
.w-6vw{ width: 6vw}
.w-7vw{ width: 7vw}
.w-8vw{ width: 8vw}
.w-9vw{ width: 9vw}
.w-10vw{ width: 10vw}
.w-11vw{ width: 11vw}
.w-12vw{ width: 12vw}
.w-13vw{ width: 13vw}
.w-14vw{ width: 14vw}
.w-15vw{ width: 15vw}
.w-20vw{ width: 20vw}
.w-25vw{ width: 25vw}
.w-30vw{ width: 30vw}
.w-35vw{ width: 35vw}
.w-40vw{ width: 40vw}
.w-45vw{ width: 45vw}
.w-50vw{ width: 50vw}
.w-55vw{ width: 55vw}
.w-60vw{ width: 60vw}
.w-65vw{ width: 65vw}
.w-70vw{ width: 70vw}
.w-75vw{ width: 75vw}
.w-80vw{ width: 80vw}
.w-85vw{ width: 85vw}
.w-90vw{ width: 90vw}
.w-95vw{ width: 95vw}
.w-100vw{ width: 100vw}

.w-auto{ width: auto }

@media screen and (max-width: 1023px){
  .w-1-sp{ width: 1px }
  .w-2-sp{ width: 2px }
  .w-3-sp{ width: 3px }
  .w-4-sp{ width: 4px }
  .w-5-sp{ width: 5px }
  .w-6-sp{ width: 6px }
  .w-7-sp{ width: 7px }
  .w-8-sp{ width: 8px }
  .w-9-sp{ width: 9px }
  .w-10-sp{ width: 10px }
  .w-15-sp{ width: 15px }
  .w-20-sp{ width: 20px }
  .w-25-sp{ width: 25px }
  .w-30-sp{ width: 30px }
  .w-35-sp{ width: 35px }
  .w-40-sp{ width: 40px }
  .w-45-sp{ width: 45px }
  .w-50-sp{ width: 50px }
  .w-60-sp{ width: 60px }
  .w-70-sp{ width: 70px }
  .w-80-sp{ width: 80px }
  .w-90-sp{ width: 90px }
  .w-100-sp{ width: 100px }
  .w-110-sp{ width: 110px }
  .w-120-sp{ width: 120px }
  .w-130-sp{ width: 130px }
  .w-140-sp{ width: 140px }
  .w-150-sp{ width: 150px }
  .w-160-sp{ width: 160px }
  .w-170-sp{ width: 170px }
  .w-180-sp{ width: 180px }
  .w-190-sp{ width: 190px }
  .w-200-sp{ width: 200px }
  .w-210-sp{ width: 210px }
  .w-220-sp{ width: 220px }
  .w-230-sp{ width: 230px }
  .w-240-sp{ width: 240px }
  .w-250-sp{ width: 250px }
  .w-260-sp{ width: 260px }
  .w-270-sp{ width: 270px }
  .w-280-sp{ width: 280px }
  .w-290-sp{ width: 290px }
  .w-300-sp{ width: 300px }
  .w-400-sp{ width: 400px }
  .w-500-sp{ width: 500px }
  .w-600-sp{ width: 600px }
  .w-700-sp{ width: 700px }
  .w-800-sp{ width: 800px }
  .w-900-sp{ width: 900px }
  .w-1000-sp{ width: 1000px }
  .w-1100-sp{ width: 1100px }
  .w-1200-sp{ width: 1200px }
  .w-1300-sp{ width: 1300px }
  .w-1400-sp{ width: 1400px }

  .w-10per-sp{ width: 10%}
  .w-15per-sp{ width: 15%}
  .w-20per-sp{ width: 20%}
  .w-25per-sp{ width: 25%}
  .w-30per-sp{ width: 30%}
  .w-35per-sp{ width: 35%}
  .w-40per-sp{ width: 40%}
  .w-45per-sp{ width: 45%}
  .w-50per-sp{ width: 50%}
  .w-55per-sp{ width: 55%}
  .w-60per-sp{ width: 60%}
  .w-65per-sp{ width: 65%}
  .w-70per-sp{ width: 70%}
  .w-75per-sp{ width: 75%}
  .w-80per-sp{ width: 80%}
  .w-85per-sp{ width: 85%}
  .w-90per-sp{ width: 90%}
  .w-95per-sp{ width: 95%}
  .w-100per-sp{ width: 100%}

  .w-1vw-sp{ width: 1vw}
  .w-2vw-sp{ width: 2vw}
  .w-3vw-sp{ width: 3vw}
  .w-4vw-sp{ width: 4vw}
  .w-5vw-sp{ width: 5vw}
  .w-6vw-sp{ width: 6vw}
  .w-7vw-sp{ width: 7vw}
  .w-8vw-sp{ width: 8vw}
  .w-9vw-sp{ width: 9vw}
  .w-10vw-sp{ width: 10vw}
  .w-11vw-sp{ width: 11vw}
  .w-12vw-sp{ width: 12vw}
  .w-13vw-sp{ width: 13vw}
  .w-14vw-sp{ width: 14vw}
  .w-15vw-sp{ width: 15vw}
  .w-20vw-sp{ width: 20vw}
  .w-25vw-sp{ width: 25vw}
  .w-30vw-sp{ width: 30vw}
  .w-35vw-sp{ width: 35vw}
  .w-40vw-sp{ width: 40vw}
  .w-45vw-sp{ width: 45vw}
  .w-50vw-sp{ width: 50vw}
  .w-55vw-sp{ width: 55vw}
  .w-60vw-sp{ width: 60vw}
  .w-65vw-sp{ width: 65vw}
  .w-70vw-sp{ width: 70vw}
  .w-75vw-sp{ width: 75vw}
  .w-80vw-sp{ width: 80vw}
  .w-85vw-sp{ width: 85vw}
  .w-90vw-sp{ width: 90vw}
  .w-95vw-sp{ width: 95vw}
  .w-100vw-sp{ width: 100vw}

  .w-auto-sp{ width: auto }
}
@media screen and (min-width: 768px){
  .w-1-tpc{ width: 1px }
  .w-2-tpc{ width: 2px }
  .w-3-tpc{ width: 3px }
  .w-4-tpc{ width: 4px }
  .w-5-tpc{ width: 5px }
  .w-6-tpc{ width: 6px }
  .w-7-tpc{ width: 7px }
  .w-8-tpc{ width: 8px }
  .w-9-tpc{ width: 9px }
  .w-10-tpc{ width: 10px }
  .w-15-tpc{ width: 15px }
  .w-20-tpc{ width: 20px }
  .w-25-tpc{ width: 25px }
  .w-30-tpc{ width: 30px }
  .w-35-tpc{ width: 35px }
  .w-40-tpc{ width: 40px }
  .w-45-tpc{ width: 45px }
  .w-50-tpc{ width: 50px }
  .w-60-tpc{ width: 60px }
  .w-70-tpc{ width: 70px }
  .w-80-tpc{ width: 80px }
  .w-90-tpc{ width: 90px }
  .w-100-tpc{ width: 100px }
  .w-110-tpc{ width: 110px }
  .w-120-tpc{ width: 120px }
  .w-130-tpc{ width: 130px }
  .w-140-tpc{ width: 140px }
  .w-150-tpc{ width: 150px }
  .w-160-tpc{ width: 160px }
  .w-170-tpc{ width: 170px }
  .w-180-tpc{ width: 180px }
  .w-190-tpc{ width: 190px }
  .w-200-tpc{ width: 200px }
  .w-210-tpc{ width: 210px }
  .w-220-tpc{ width: 220px }
  .w-230-tpc{ width: 230px }
  .w-240-tpc{ width: 240px }
  .w-250-tpc{ width: 250px }
  .w-260-tpc{ width: 260px }
  .w-270-tpc{ width: 270px }
  .w-280-tpc{ width: 280px }
  .w-290-tpc{ width: 290px }
  .w-300-tpc{ width: 300px }
  .w-400-tpc{ width: 400px }
  .w-500-tpc{ width: 500px }
  .w-600-tpc{ width: 600px }
  .w-700-tpc{ width: 700px }
  .w-800-tpc{ width: 800px }
  .w-900-tpc{ width: 900px }
  .w-1000-tpc{ width: 1000px }
  .w-1100-tpc{ width: 1100px }
  .w-1200-tpc{ width: 1200px }
  .w-1300-tpc{ width: 1300px }
  .w-1400-tpc{ width: 1400px }

  .w-10per-tpc{ width: 10%}
  .w-15per-tpc{ width: 15%}
  .w-20per-tpc{ width: 20%}
  .w-25per-tpc{ width: 25%}
  .w-30per-tpc{ width: 30%}
  .w-35per-tpc{ width: 35%}
  .w-40per-tpc{ width: 40%}
  .w-45per-tpc{ width: 45%}
  .w-50per-tpc{ width: 50%}
  .w-55per-tpc{ width: 55%}
  .w-60per-tpc{ width: 60%}
  .w-65per-tpc{ width: 65%}
  .w-70per-tpc{ width: 70%}
  .w-75per-tpc{ width: 75%}
  .w-80per-tpc{ width: 80%}
  .w-85per-tpc{ width: 85%}
  .w-90per-tpc{ width: 90%}
  .w-95per-tpc{ width: 95%}
  .w-100per-tpc{ width: 100%}

  .w-1vw-tpc{ width: 1vw}
  .w-2vw-tpc{ width: 2vw}
  .w-3vw-tpc{ width: 3vw}
  .w-4vw-tpc{ width: 4vw}
  .w-5vw-tpc{ width: 5vw}
  .w-6vw-tpc{ width: 6vw}
  .w-7vw-tpc{ width: 7vw}
  .w-8vw-tpc{ width: 8vw}
  .w-9vw-tpc{ width: 9vw}
  .w-10vw-tpc{ width: 10vw}
  .w-11vw-tpc{ width: 11vw}
  .w-12vw-tpc{ width: 12vw}
  .w-13vw-tpc{ width: 13vw}
  .w-14vw-tpc{ width: 14vw}
  .w-15vw-tpc{ width: 15vw}
  .w-20vw-tpc{ width: 20vw}
  .w-25vw-tpc{ width: 25vw}
  .w-30vw-tpc{ width: 30vw}
  .w-35vw-tpc{ width: 35vw}
  .w-40vw-tpc{ width: 40vw}
  .w-45vw-tpc{ width: 45vw}
  .w-50vw-tpc{ width: 50vw}
  .w-55vw-tpc{ width: 55vw}
  .w-60vw-tpc{ width: 60vw}
  .w-65vw-tpc{ width: 65vw}
  .w-70vw-tpc{ width: 70vw}
  .w-75vw-tpc{ width: 75vw}
  .w-80vw-tpc{ width: 80vw}
  .w-85vw-tpc{ width: 85vw}
  .w-90vw-tpc{ width: 90vw}
  .w-95vw-tpc{ width: 95vw}
  .w-100vw-tpc{ width: 100vw}

  .w-auto-tpc{ width: auto }
}
@media screen and (min-width: 1024px){
  .w-1-pc{ width: 1px }
  .w-2-pc{ width: 2px }
  .w-3-pc{ width: 3px }
  .w-4-pc{ width: 4px }
  .w-5-pc{ width: 5px }
  .w-6-pc{ width: 6px }
  .w-7-pc{ width: 7px }
  .w-8-pc{ width: 8px }
  .w-9-pc{ width: 9px }
  .w-10-pc{ width: 10px }
  .w-25-pc{ width: 15px }
  .w-20-pc{ width: 20px }
  .w-25-pc{ width: 25px }
  .w-30-pc{ width: 30px }
  .w-35-pc{ width: 35px }
  .w-40-pc{ width: 40px }
  .w-45-pc{ width: 45px }
  .w-50-pc{ width: 50px }
  .w-60-pc{ width: 60px }
  .w-70-pc{ width: 70px }
  .w-80-pc{ width: 80px }
  .w-90-pc{ width: 90px }
  .w-100-pc{ width: 100px }
  .w-110-pc{ width: 110px }
  .w-120-pc{ width: 120px }
  .w-130-pc{ width: 130px }
  .w-140-pc{ width: 140px }
  .w-150-pc{ width: 150px }
  .w-160-pc{ width: 160px }
  .w-170-pc{ width: 170px }
  .w-180-pc{ width: 180px }
  .w-190-pc{ width: 190px }
  .w-200-pc{ width: 200px }
  .w-210-pc{ width: 210px }
  .w-220-pc{ width: 220px }
  .w-230-pc{ width: 230px }
  .w-240-pc{ width: 240px }
  .w-250-pc{ width: 250px }
  .w-260-pc{ width: 260px }
  .w-270-pc{ width: 270px }
  .w-280-pc{ width: 280px }
  .w-290-pc{ width: 290px }
  .w-300-pc{ width: 300px }
  .w-400-pc{ width: 400px }
  .w-500-pc{ width: 500px }
  .w-600-pc{ width: 600px }
  .w-700-pc{ width: 700px }
  .w-800-pc{ width: 800px }
  .w-900-pc{ width: 900px }
  .w-1000-pc{ width: 1000px }
  .w-1100-pc{ width: 1100px }
  .w-1200-pc{ width: 1200px }
  .w-1300-pc{ width: 1300px }
  .w-1400-pc{ width: 1400px }

  .w-10per-pc{ width: 10%}
  .w-15per-pc{ width: 15%}
  .w-20per-pc{ width: 20%}
  .w-25per-pc{ width: 25%}
  .w-30per-pc{ width: 30%}
  .w-35per-pc{ width: 35%}
  .w-40per-pc{ width: 40%}
  .w-45per-pc{ width: 45%}
  .w-50per-pc{ width: 50%}
  .w-55per-pc{ width: 55%}
  .w-60per-pc{ width: 60%}
  .w-65per-pc{ width: 65%}
  .w-70per-pc{ width: 70%}
  .w-75per-pc{ width: 75%}
  .w-80per-pc{ width: 80%}
  .w-85per-pc{ width: 85%}
  .w-90per-pc{ width: 90%}
  .w-95per-pc{ width: 95%}
  .w-100per-pc{ width: 100%}

  .w-1vw-pc{ width: 1vw}
  .w-2vw-pc{ width: 2vw}
  .w-3vw-pc{ width: 3vw}
  .w-4vw-pc{ width: 4vw}
  .w-5vw-pc{ width: 5vw}
  .w-6vw-pc{ width: 6vw}
  .w-7vw-pc{ width: 7vw}
  .w-8vw-pc{ width: 8vw}
  .w-9vw-pc{ width: 9vw}
  .w-10vw-pc{ width: 10vw}
  .w-11vw-pc{ width: 11vw}
  .w-12vw-pc{ width: 12vw}
  .w-13vw-pc{ width: 13vw}
  .w-14vw-pc{ width: 14vw}
  .w-15vw-pc{ width: 15vw}
  .w-20vw-pc{ width: 20vw}
  .w-25vw-pc{ width: 25vw}
  .w-30vw-pc{ width: 30vw}
  .w-35vw-pc{ width: 35vw}
  .w-40vw-pc{ width: 40vw}
  .w-45vw-pc{ width: 45vw}
  .w-50vw-pc{ width: 50vw}
  .w-55vw-pc{ width: 55vw}
  .w-60vw-pc{ width: 60vw}
  .w-65vw-pc{ width: 65vw}
  .w-70vw-pc{ width: 70vw}
  .w-75vw-pc{ width: 75vw}
  .w-80vw-pc{ width: 80vw}
  .w-85vw-pc{ width: 85vw}
  .w-90vw-pc{ width: 90vw}
  .w-95vw-pc{ width: 95vw}
  .w-100vw-pc{ width: 100vw}

  .w-auto-pc{ width: auto }
}
/*
   MAX WIDTH
--------------------------------------------------------------*/
.w-max100{ max-width: 100px}
.w-max150{ max-width: 150px}
.w-max200{ max-width: 200px}
.w-max250{ max-width: 250px}
.w-max300{ max-width: 300px}
.w-max350{ max-width: 350px}
.w-max400{ max-width: 400px}
.w-max450{ max-width: 450px}
.w-max500{ max-width: 500px}
.w-max550{ max-width: 550px}
.w-max600{ max-width: 600px}
.w-max650{ max-width: 650px}
.w-max700{ max-width: 700px}
.w-max750{ max-width: 750px}
.w-max800{ max-width: 800px}
.w-max850{ max-width: 850px}
.w-max900{ max-width: 900px}
.w-max950{ max-width: 950px}
.w-max1000{ max-width: 1000px}
.w-max1100{ max-width: 1100px}
.w-max1200{ max-width: 1200px}
.w-max1300{ max-width: 1300px}
.w-max1400{ max-width: 1400px}
@media screen and (max-width: 1023px){
  .w-max100-sp{ max-width: 100px}
  .w-max150-sp{ max-width: 150px}
  .w-max200-sp{ max-width: 200px}
  .w-max250-sp{ max-width: 250px}
  .w-max300-sp{ max-width: 300px}
  .w-max350-sp{ max-width: 350px}
  .w-max400-sp{ max-width: 400px}
  .w-max450-sp{ max-width: 450px}
  .w-max500-sp{ max-width: 500px}
  .w-max550-sp{ max-width: 550px}
  .w-max600-sp{ max-width: 600px}
  .w-max650-sp{ max-width: 650px}
  .w-max700-sp{ max-width: 700px}
  .w-max750-sp{ max-width: 750px}
  .w-max800-sp{ max-width: 800px}
  .w-max850-sp{ max-width: 850px}
  .w-max900-sp{ max-width: 900px}
  .w-max950-sp{ max-width: 950px}
  .w-max1000-sp{ max-width: 1000px}
  .w-max1100-sp{ max-width: 1100px}
  .w-max1200-sp{ max-width: 1200px}
  .w-max1300-sp{ max-width: 1300px}
  .w-max1400-sp{ max-width: 1400px}
}
@media screen and (min-width: 768px){
  .w-max100-tpc{ max-width: 100px}
  .w-max150-tpc{ max-width: 150px}
  .w-max200-tpc{ max-width: 200px}
  .w-max250-tpc{ max-width: 250px}
  .w-max300-tpc{ max-width: 300px}
  .w-max350-tpc{ max-width: 350px}
  .w-max400-tpc{ max-width: 400px}
  .w-max450-tpc{ max-width: 450px}
  .w-max500-tpc{ max-width: 500px}
  .w-max550-tpc{ max-width: 550px}
  .w-max600-tpc{ max-width: 600px}
  .w-max650-tpc{ max-width: 650px}
  .w-max700-tpc{ max-width: 700px}
  .w-max750-tpc{ max-width: 750px}
  .w-max800-tpc{ max-width: 800px}
  .w-max850-tpc{ max-width: 850px}
  .w-max900-tpc{ max-width: 900px}
  .w-max950-tpc{ max-width: 950px}
  .w-max1000-tpc{ max-width: 1000px}
  .w-max1100-tpc{ max-width: 1100px}
  .w-max1200-tpc{ max-width: 1200px}
  .w-max1300-tpc{ max-width: 1300px}
  .w-max1400-tpc{ max-width: 1400px}
}
@media screen and (min-width: 1024px){
  .w-max100-pc{ max-width: 100px}
  .w-max150-pc{ max-width: 150px}
  .w-max200-pc{ max-width: 200px}
  .w-max250-pc{ max-width: 250px}
  .w-max300-pc{ max-width: 300px}
  .w-max350-pc{ max-width: 350px}
  .w-max400-pc{ max-width: 400px}
  .w-max450-pc{ max-width: 450px}
  .w-max500-pc{ max-width: 500px}
  .w-max550-pc{ max-width: 550px}
  .w-max600-pc{ max-width: 600px}
  .w-max650-pc{ max-width: 650px}
  .w-max700-pc{ max-width: 700px}
  .w-max750-pc{ max-width: 750px}
  .w-max800-pc{ max-width: 800px}
  .w-max850-pc{ max-width: 850px}
  .w-max900-pc{ max-width: 900px}
  .w-max950-pc{ max-width: 950px}
  .w-max1000-pc{ max-width: 1000px}
  .w-max1100-pc{ max-width: 1100px}
  .w-max1200-pc{ max-width: 1200px}
  .w-max1300-pc{ max-width: 1300px}
  .w-max1400-pc{ max-width: 1400px}
}

/*
   MAX HEIGHT
--------------------------------------------------------------*/
.h-1{ height: 1px }
.h-2{ height: 2px }
.h-3{ height: 3px }
.h-4{ height: 4px }
.h-5{ height: 5px }
.h-6{ height: 6px }
.h-7{ height: 7px }
.h-8{ height: 8px }
.h-9{ height: 9px }
.h-10{ height: 10px }
.h-15{ height: 15px }
.h-20{ height: 20px }
.h-25{ height: 25px }
.h-30{ height: 30px }
.h-35{ height: 35px }
.h-40{ height: 40px }
.h-45{ height: 45px }
.h-50{ height: 50px }
.h-60{ height: 60px }
.h-70{ height: 70px }
.h-80{ height: 80px }
.h-90{ height: 90px }
.h-100{ height: 100px }
.h-110{ height: 110px }
.h-120{ height: 120px }
.h-130{ height: 130px }
.h-140{ height: 140px }
.h-150{ height: 150px }
.h-160{ height: 160px }
.h-170{ height: 170px }
.h-180{ height: 180px }
.h-190{ height: 190px }
.h-200{ height: 200px }
.h-210{ height: 210px }
.h-220{ height: 220px }
.h-230{ height: 230px }
.h-240{ height: 240px }
.h-250{ height: 250px }
.h-260{ height: 260px }
.h-270{ height: 270px }
.h-280{ height: 280px }
.h-290{ height: 290px }
.h-300{ height: 300px }
.h-400{ height: 400px }
.h-500{ height: 500px }
.h-600{ height: 600px }
.h-700{ height: 700px }
.h-800{ height: 800px }
.h-900{ height: 900px }
.h-1000{ height: 1000px }

.h-100per{ height: 100%}

.h-1vw{height: 1vw}
.h-2vw{height: 2vw}
.h-3vw{height: 3vw}
.h-4vw{height: 4vw}
.h-5vw{height: 5vw}
.h-6vw{height: 6vw}
.h-7vw{height: 7vw}
.h-8vw{height: 8vw}
.h-9vw{height: 9vw}
.h-10vw{height: 10vw}
.h-11vw{height: 11vw}
.h-12vw{height: 12vw}
.h-13vw{height: 13vw}
.h-14vw{height: 14vw}
.h-15vw{height: 15vw}
.h-20vw{ height: 20vw}
.h-25vw{ height: 25vw}
.h-30vw{ height: 30vw}
.h-35vw{ height: 35vw}
.h-40vw{ height: 40vw}
.h-45vw{ height: 45vw}
.h-50vw{ height: 50vw}
.h-55vw{ height: 55vw}
.h-60vw{ height: 60vw}
.h-65vw{ height: 65vw}
.h-70vw{ height: 70vw}
.h-75vw{ height: 75vw}
.h-80vw{ height: 80vw}
.h-85vw{ height: 85vw}
.h-90vw{ height: 90vw}
.h-95vw{ height: 95vw}
.h-100vw{ height: 100vw}

.h-10vh{ height: 10vh }
.h-20vh{ height: 20vh }
.h-30vh{ height: 30vh }
.h-40vh{ height: 40vh }
.h-50vh{ height: 50vh }
.h-60vh{ height: 60vh }
.h-70vh{ height: 70vh }
.h-80vh{ height: 80vh }
.h-90vh{ height: 90vh }
.h-100vh{ height: 100vh }

.h-100svh{ height: 100svh }
.h-100lvh{ height: 100lvh }
.h-100dvh{ height: 100dvh }

.h-auto-sp{ height: auto }

@media screen and (max-width: 1023px){
  .h-1-sp{ height: 1px }
  .h-2-sp{ height: 2px }
  .h-3-sp{ height: 3px }
  .h-4-sp{ height: 4px }
  .h-5-sp{ height: 5px }
  .h-6-sp{ height: 6px }
  .h-7-sp{ height: 7px }
  .h-8-sp{ height: 8px }
  .h-9-sp{ height: 9px }
  .h-10-sp{ height: 10px }
  .h-15-sp{ height: 15px }
  .h-20-sp{ height: 20px }
  .h-25-sp{ height: 25px }
  .h-30-sp{ height: 30px }
  .h-35-sp{ height: 35px }
  .h-40-sp{ height: 40px }
  .h-45-sp{ height: 45px }
  .h-50-sp{ height: 50px }
  .h-60-sp{ height: 60px }
  .h-70-sp{ height: 70px }
  .h-80-sp{ height: 80px }
  .h-90-sp{ height: 90px }
  .h-100-sp{ height: 100px }
  .h-110-sp{ height: 110px }
  .h-120-sp{ height: 120px }
  .h-130-sp{ height: 130px }
  .h-140-sp{ height: 140px }
  .h-150-sp{ height: 150px }
  .h-160-sp{ height: 160px }
  .h-170-sp{ height: 170px }
  .h-180-sp{ height: 180px }
  .h-190-sp{ height: 190px }
  .h-200-sp{ height: 200px }
  .h-210-sp{ height: 210px }
  .h-220-sp{ height: 220px }
  .h-230-sp{ height: 230px }
  .h-240-sp{ height: 240px }
  .h-250-sp{ height: 250px }
  .h-260-sp{ height: 260px }
  .h-270-sp{ height: 270px }
  .h-280-sp{ height: 280px }
  .h-290-sp{ height: 290px }
  .h-300-sp{ height: 300px }
  .h-400-sp{ height: 400px }
  .h-500-sp{ height: 500px }
  .h-600-sp{ height: 600px }
  .h-700-sp{ height: 700px }
  .h-800-sp{ height: 800px }
  .h-900-sp{ height: 900px }
  .h-1000-sp{ height: 1000px }

  .h-100per-sp{ height: 100%}

  .h-1vw-sp{ height: 1vw}
  .h-2vw-sp{ height: 2vw}
  .h-3vw-sp{ height: 3vw}
  .h-4vw-sp{ height: 4vw}
  .h-5vw-sp{ height: 5vw}
  .h-6vw-sp{ height: 6vw}
  .h-7vw-sp{ height: 7vw}
  .h-8vw-sp{ height: 8vw}
  .h-9vw-sp{ height: 9vw}
  .h-10vw-sp{ height: 10vw}
  .h-11vw-sp{ height: 11vw}
  .h-12vw-sp{ height: 12vw}
  .h-13vw-sp{ height: 13vw}
  .h-14vw-sp{ height: 14vw}
  .h-15vw-sp{ height: 15vw}
  .h-20vw-sp{ height: 20vw}
  .h-25vw-sp{ height: 25vw}
  .h-30vw-sp{ height: 30vw}
  .h-35vw-sp{ height: 35vw}
  .h-40vw-sp{ height: 40vw}
  .h-45vw-sp{ height: 45vw}
  .h-50vw-sp{ height: 50vw}
  .h-55vw-sp{ height: 55vw}
  .h-60vw-sp{ height: 60vw}
  .h-65vw-sp{ height: 65vw}
  .h-70vw-sp{ height: 70vw}
  .h-75vw-sp{ height: 75vw}
  .h-80vw-sp{ height: 80vw}
  .h-85vw-sp{ height: 85vw}
  .h-90vw-sp{ height: 90vw}
  .h-95vw-sp{ height: 95vw}
  .h-100vw-sp{ height: 100vw}

  .h-10vh-sp{ height: 10vh }
  .h-20vh-sp{ height: 20vh }
  .h-30vh-sp{ height: 30vh }
  .h-40vh-sp{ height: 40vh }
  .h-50vh-sp{ height: 50vh }
  .h-60vh-sp{ height: 60vh }
  .h-70vh-sp{ height: 70vh }
  .h-80vh-sp{ height: 80vh }
  .h-90vh-sp{ height: 90vh }
  .h-100vh-sp{ height: 100vh }

  .h-100svh-sp{ height: 100svh }
  .h-100lvh-sp{ height: 100lvh }
  .h-100dvh-sp{ height: 100dvh }

  .h-auto-sp{ height: auto }
}
@media screen and (min-width: 768px){
  .h-1-tpc{ height: 1px }
  .h-2-tpc{ height: 2px }
  .h-3-tpc{ height: 3px }
  .h-4-tpc{ height: 4px }
  .h-5-tpc{ height: 5px }
  .h-6-tpc{ height: 6px }
  .h-7-tpc{ height: 7px }
  .h-8-tpc{ height: 8px }
  .h-9-tpc{ height: 9px }
  .h-10-tpc{ height: 10px }
  .h-15-tpc{ height: 15px }
  .h-20-tpc{ height: 20px }
  .h-25-tpc{ height: 25px }
  .h-30-tpc{ height: 30px }
  .h-35-tpc{ height: 35px }
  .h-40-tpc{ height: 40px }
  .h-45-tpc{ height: 45px }
  .h-50-tpc{ height: 50px }
  .h-60-tpc{ height: 60px }
  .h-70-tpc{ height: 70px }
  .h-80-tpc{ height: 80px }
  .h-90-tpc{ height: 90px }
  .h-100-tpc{ height: 100px }
  .h-110-tpc{ height: 110px }
  .h-120-tpc{ height: 120px }
  .h-130-tpc{ height: 130px }
  .h-140-tpc{ height: 140px }
  .h-150-tpc{ height: 150px }
  .h-160-tpc{ height: 160px }
  .h-170-tpc{ height: 170px }
  .h-180-tpc{ height: 180px }
  .h-190-tpc{ height: 190px }
  .h-200-tpc{ height: 200px }
  .h-210-tpc{ height: 210px }
  .h-220-tpc{ height: 220px }
  .h-230-tpc{ height: 230px }
  .h-240-tpc{ height: 240px }
  .h-250-tpc{ height: 250px }
  .h-260-tpc{ height: 260px }
  .h-270-tpc{ height: 270px }
  .h-280-tpc{ height: 280px }
  .h-290-tpc{ height: 290px }
  .h-300-tpc{ height: 300px }
  .h-400-tpc{ height: 400px }
  .h-500-tpc{ height: 500px }
  .h-600-tpc{ height: 600px }
  .h-700-tpc{ height: 700px }
  .h-800-tpc{ height: 800px }
  .h-900-tpc{ height: 900px }
  .h-1000-tpc{ height: 1000px }

  .h-100per-tpc{ height: 100%}

  .h-1vw-tpc{ height: 1vw}
  .h-2vw-tpc{ height: 2vw}
  .h-3vw-tpc{ height: 3vw}
  .h-4vw-tpc{ height: 4vw}
  .h-5vw-tpc{ height: 5vw}
  .h-6vw-tpc{ height: 6vw}
  .h-7vw-tpc{ height: 7vw}
  .h-8vw-tpc{ height: 8vw}
  .h-9vw-tpc{ height: 9vw}
  .h-10vw-tpc{ height: 10vw}
  .h-11vw-tpc{ height: 11vw}
  .h-12vw-tpc{ height: 12vw}
  .h-13vw-tpc{ height: 13vw}
  .h-14vw-tpc{ height: 14vw}
  .h-15vw-tpc{ height: 15vw}
  .h-20vw-tpc{ height: 20vw}
  .h-25vw-tpc{ height: 25vw}
  .h-30vw-tpc{ height: 30vw}
  .h-35vw-tpc{ height: 35vw}
  .h-40vw-tpc{ height: 40vw}
  .h-45vw-tpc{ height: 45vw}
  .h-50vw-tpc{ height: 50vw}
  .h-55vw-tpc{ height: 55vw}
  .h-60vw-tpc{ height: 60vw}
  .h-65vw-tpc{ height: 65vw}
  .h-70vw-tpc{ height: 70vw}
  .h-75vw-tpc{ height: 75vw}
  .h-80vw-tpc{ height: 80vw}
  .h-85vw-tpc{ height: 85vw}
  .h-90vw-tpc{ height: 90vw}
  .h-95vw-tpc{ height: 95vw}
  .h-100vw-tpc{ height: 100vw}

  .h-10vh-tpc{ height: 10vh }
  .h-20vh-tpc{ height: 20vh }
  .h-30vh-tpc{ height: 30vh }
  .h-40vh-tpc{ height: 40vh }
  .h-50vh-tpc{ height: 50vh }
  .h-60vh-tpc{ height: 60vh }
  .h-70vh-tpc{ height: 70vh }
  .h-80vh-tpc{ height: 80vh }
  .h-90vh-tpc{ height: 90vh }
  .h-100vh-tpc{ height: 100vh }

  .h-100svh-tpc{ height: 100svh }
  .h-100lvh-tpc{ height: 100lvh }
  .h-100dvh-tpc{ height: 100dvh }

  .h-auto-tpc{ height: auto }
}
@media screen and (min-width: 1024px){
  .h-1-pc{ height: 1px }
  .h-2-pc{ height: 2px }
  .h-3-pc{ height: 3px }
  .h-4-pc{ height: 4px }
  .h-5-pc{ height: 5px }
  .h-6-pc{ height: 6px }
  .h-7-pc{ height: 7px }
  .h-8-pc{ height: 8px }
  .h-9-pc{ height: 9px }
  .h-10-pc{ height: 10px }
  .h-25-pc{ height: 15px }
  .h-20-pc{ height: 20px }
  .h-25-pc{ height: 25px }
  .h-30-pc{ height: 30px }
  .h-35-pc{ height: 35px }
  .h-40-pc{ height: 40px }
  .h-45-pc{ height: 45px }
  .h-50-pc{ height: 50px }
  .h-60-pc{ height: 60px }
  .h-70-pc{ height: 70px }
  .h-80-pc{ height: 80px }
  .h-90-pc{ height: 90px }
  .h-100-pc{ height: 100px }
  .h-110-pc{ height: 110px }
  .h-120-pc{ height: 120px }
  .h-130-pc{ height: 130px }
  .h-140-pc{ height: 140px }
  .h-150-pc{ height: 150px }
  .h-160-pc{ height: 160px }
  .h-170-pc{ height: 170px }
  .h-180-pc{ height: 180px }
  .h-190-pc{ height: 190px }
  .h-200-pc{ height: 200px }
  .h-210-pc{ height: 210px }
  .h-220-pc{ height: 220px }
  .h-230-pc{ height: 230px }
  .h-240-pc{ height: 240px }
  .h-250-pc{ height: 250px }
  .h-260-pc{ height: 260px }
  .h-270-pc{ height: 270px }
  .h-280-pc{ height: 280px }
  .h-290-pc{ height: 290px }
  .h-300-pc{ height: 300px }
  .h-400-pc{ height: 400px }
  .h-500-pc{ height: 500px }
  .h-600-pc{ height: 600px }
  .h-700-pc{ height: 700px }
  .h-800-pc{ height: 800px }
  .h-900-pc{ height: 900px }
  .h-1000-pc{ height: 1000px }

  .h-100per-pc{ height: 100%}

  .h-1vw-pc{ height: 1vw}
  .h-2vw-pc{ height: 2vw}
  .h-3vw-pc{ height: 3vw}
  .h-4vw-pc{ height: 4vw}
  .h-5vw-pc{ height: 5vw}
  .h-6vw-pc{ height: 6vw}
  .h-7vw-pc{ height: 7vw}
  .h-8vw-pc{ height: 8vw}
  .h-9vw-pc{ height: 9vw}
  .h-10vw-pc{ height: 10vw}
  .h-11vw-pc{ height: 11vw}
  .h-12vw-pc{ height: 12vw}
  .h-13vw-pc{ height: 13vw}
  .h-14vw-pc{ height: 14vw}
  .h-15vw-pc{ height: 15vw}
  .h-20vw-pc{ height: 20vw}
  .h-25vw-pc{ height: 25vw}
  .h-30vw-pc{ height: 30vw}
  .h-35vw-pc{ height: 35vw}
  .h-40vw-pc{ height: 40vw}
  .h-45vw-pc{ height: 45vw}
  .h-50vw-pc{ height: 50vw}
  .h-55vw-pc{ height: 55vw}
  .h-60vw-pc{ height: 60vw}
  .h-65vw-pc{ height: 65vw}
  .h-70vw-pc{ height: 70vw}
  .h-75vw-pc{ height: 75vw}
  .h-80vw-pc{ height: 80vw}
  .h-85vw-pc{ height: 85vw}
  .h-90vw-pc{ height: 90vw}
  .h-95vw-pc{ height: 95vw}
  .h-100vw-pc{ height: 100vw}

  .h-10vh-pc{ height: 10vh }
  .h-20vh-pc{ height: 20vh }
  .h-30vh-pc{ height: 30vh }
  .h-40vh-pc{ height: 40vh }
  .h-50vh-pc{ height: 50vh }
  .h-60vh-pc{ height: 60vh }
  .h-70vh-pc{ height: 70vh }
  .h-80vh-pc{ height: 80vh }
  .h-90vh-pc{ height: 90vh }
  .h-100vh-pc{ height: 100vh }

  .h-100svh-pc{ height: 100svh }
  .h-100lvh-pc{ height: 100lvh }
  .h-100dvh-pc{ height: 100dvh }

  .h-auto-pc{ height: auto }
}
/*
   MAX HEIGHT
--------------------------------------------------------------*/
.h-max100{ max-height: 100px }
.h-max150{ max-height: 150px }
.h-max200{ max-height: 200px }
.h-max250{ max-height: 250px }
.h-max300{ max-height: 300px }
.h-max350{ max-height: 350px }
.h-max400{ max-height: 400px }
.h-max450{ max-height: 450px }
.h-max500{ max-height: 500px }
.h-max550{ max-height: 550px }
.h-max600{ max-height: 600px }
.h-max650{ max-height: 650px }
.h-max700{ max-height: 700px }
.h-max750{ max-height: 750px }
.h-max800{ max-height: 800px }

.h-max100vh{ max-height: 100vh}
@media screen and (max-width: 1023px){
  .h-max100-sp{ max-height: 100px }
  .h-max150-sp{ max-height: 150px }
  .h-max200-sp{ max-height: 200px }
  .h-max250-sp{ max-height: 250px }
  .h-max300-sp{ max-height: 300px }
  .h-max350-sp{ max-height: 350px }
  .h-max400-sp{ max-height: 400px }
  .h-max450-sp{ max-height: 450px }
  .h-max500-sp{ max-height: 500px }
  .h-max550-sp{ max-height: 550px }
  .h-max600-sp{ max-height: 600px }
  .h-max650-sp{ max-height: 650px }
  .h-max700-sp{ max-height: 700px }
  .h-max750-sp{ max-height: 750px }
  .h-max800-sp{ max-height: 800px }

  .h-max100vh-sp{ max-height: 100vh}
}
@media screen and (min-width: 768px){
  .h-max100-tpc{ max-height: 100px }
  .h-max150-tpc{ max-height: 150px }
  .h-max200-tpc{ max-height: 200px }
  .h-max250-tpc{ max-height: 250px }
  .h-max300-tpc{ max-height: 300px }
  .h-max350-tpc{ max-height: 350px }
  .h-max400-tpc{ max-height: 400px }
  .h-max450-tpc{ max-height: 450px }
  .h-max500-tpc{ max-height: 500px }
  .h-max550-tpc{ max-height: 550px }
  .h-max600-tpc{ max-height: 600px }
  .h-max650-tpc{ max-height: 650px }
  .h-max700-tpc{ max-height: 700px }
  .h-max750-tpc{ max-height: 750px }
  .h-max800-tpc{ max-height: 800px }

  .h-max100vh-tpc{ max-height: 100vh }
}
@media screen and (min-width: 1024px){
  .h-max100-pc{ max-height: 100px }
  .h-max150-pc{ max-height: 150px }
  .h-max200-pc{ max-height: 200px }
  .h-max250-pc{ max-height: 250px }
  .h-max300-pc{ max-height: 300px }
  .h-max350-pc{ max-height: 350px }
  .h-max400-pc{ max-height: 400px }
  .h-max450-pc{ max-height: 450px }
  .h-max500-pc{ max-height: 500px }
  .h-max550-pc{ max-height: 550px }
  .h-max600-pc{ max-height: 600px }
  .h-max650-pc{ max-height: 650px }
  .h-max700-pc{ max-height: 700px }
  .h-max750-pc{ max-height: 750px }
  .h-max800-pc{ max-height: 800px }

  .h-max100vh-pc{ max-height: 100vh }
}
/*
   PADDING
--------------------------------------------------------------*/
.p-5{ padding: calc(5px * var(--space-ratio)) }
.p-8{ padding: calc(8px * var(--space-ratio)) }
.p-10{ padding: calc(10px * var(--space-ratio)) }
.p-15{ padding: calc(15px * var(--space-ratio)) }
.p-20{ padding: calc(20px * var(--space-ratio)) }
.p-25{ padding: calc(25px * var(--space-ratio)) }
.p-30{ padding: calc(30px * var(--space-ratio)) }
.p-35{ padding: calc(35px * var(--space-ratio)) }
.p-40{ padding: calc(40px * var(--space-ratio)) }
.p-45{ padding: calc(45px * var(--space-ratio)) }
.p-50{ padding: calc(50px * var(--space-ratio)) }
.p-60{ padding: calc(60px * var(--space-ratio)) }
.p-70{ padding: calc(70px * var(--space-ratio)) }
.p-80{ padding: calc(80px * var(--space-ratio)) }
.p-90{ padding: calc(90px * var(--space-ratio)) }
.p-100{ padding: calc(100px * var(--space-ratio)) }
.p-110{ padding: calc(110px * var(--space-ratio)) }
.p-120{ padding: calc(120px * var(--space-ratio)) }
.p-130{ padding: calc(130px * var(--space-ratio)) }
.p-140{ padding: calc(140px * var(--space-ratio)) }
.p-150{ padding: calc(150px * var(--space-ratio)) }
.p-160{ padding: calc(160px * var(--space-ratio)) }
.p-170{ padding: calc(170px * var(--space-ratio)) }
.p-180{ padding: calc(180px * var(--space-ratio)) }
.p-190{ padding: calc(190px * var(--space-ratio)) }
.p-200{ padding: calc(200px * var(--space-ratio)) }

.p-1vw{ padding: 1vw }
.p-2vw{ padding: 2vw }
.p-3vw{ padding: 3vw }
.p-4vw{ padding: 4vw }
.p-5vw{ padding: 5vw }
.p-6vw{ padding: 6vw }
.p-7vw{ padding: 7vw }
.p-8vw{ padding: 8vw }
.p-9vw{ padding: 9vw }
.p-10vw{ padding: 10vw }
.p-11vw{ padding: 11vw }
.p-12vw{ padding: 12vw }
.p-13vw{ padding: 13vw }
.p-14vw{ padding: 14vw }
.p-15vw{ padding: 15vw }

@media screen and (max-width: 1023px){
  .p-5-sp{ padding: 5px }
  .p-8-sp{ padding: 8px }
  .p-10-sp{ padding: 10px }
  .p-15-sp{ padding: 15px }
  .p-20-sp{ padding: 20px }
  .p-25-sp{ padding: 25px }
  .p-30-sp{ padding: 35px }
  .p-35-sp{ padding: 30px }
  .p-40-sp{ padding: 40px }
  .p-45-sp{ padding: 45px }
  .p-50-sp{ padding: 50px }
  .p-60-sp{ padding: 60px }
  .p-70-sp{ padding: 70px }
  .p-80-sp{ padding: 80px }
  .p-90-sp{ padding: 90px }
  .p-100-sp{ padding: 100px }
  .p-110-sp{ padding: 110px }
  .p-120-sp{ padding: 120px }
  .p-130-sp{ padding: 130px }
  .p-140-sp{ padding: 140px }
  .p-150-sp{ padding: 150px }
  .p-160-sp{ padding: 160px }
  .p-170-sp{ padding: 170px }
  .p-180-sp{ padding: 180px }
  .p-190-sp{ padding: 190px }
  .p-200-sp{ padding: 200px }

  .p-1vw-sp{ padding: 1vw }
  .p-2vw-sp{ padding: 2vw }
  .p-3vw-sp{ padding: 3vw }
  .p-4vw-sp{ padding: 4vw }
  .p-5vw-sp{ padding: 5vw }
  .p-6vw-sp{ padding: 6vw }
  .p-7vw-sp{ padding: 7vw }
  .p-8vw-sp{ padding: 8vw }
  .p-9vw-sp{ padding: 9vw }
  .p-10vw-sp{ padding: 10vw }
  .p-11vw-sp{ padding: 11vw }
  .p-12vw-sp{ padding: 12vw }
  .p-13vw-sp{ padding: 13vw }
  .p-14vw-sp{ padding: 14vw }
  .p-15vw-sp{ padding: 15vw }
}
@media screen and (min-width: 768px){
  .p-5-tpc{ padding: 5px }
  .p-8-tpc{ padding: 8px }
  .p-10-tpc{ padding: 10px }
  .p-15-tpc{ padding: 15px }
  .p-20-tpc{ padding: 20px }
  .p-25-tpc{ padding: 25px }
  .p-30-tpc{ padding: 30px }
  .p-35-tpc{ padding: 35px }
  .p-40-tpc{ padding: 40px }
  .p-45-tpc{ padding: 45px }
  .p-50-tpc{ padding: 50px }
  .p-60-tpc{ padding: 60px }
  .p-70-tpc{ padding: 70px }
  .p-80-tpc{ padding: 80px }
  .p-90-tpc{ padding: 90px }
  .p-100-tpc{ padding: 100px }
  .p-110-tpc{ padding: 110px }
  .p-120-tpc{ padding: 120px }
  .p-130-tpc{ padding: 130px }
  .p-140-tpc{ padding: 140px }
  .p-150-tpc{ padding: 150px }
  .p-160-tpc{ padding: 160px }
  .p-170-tpc{ padding: 170px }
  .p-180-tpc{ padding: 180px }
  .p-190-tpc{ padding: 190px }
  .p-200-tpc{ padding: 200px }

  .p-1vw-tpc{ padding: 1vw }
  .p-2vw-tpc{ padding: 2vw }
  .p-3vw-tpc{ padding: 3vw }
  .p-4vw-tpc{ padding: 4vw }
  .p-5vw-tpc{ padding: 5vw }
  .p-6vw-tpc{ padding: 6vw }
  .p-7vw-tpc{ padding: 7vw }
  .p-8vw-tpc{ padding: 8vw }
  .p-9vw-tpc{ padding: 9vw }
  .p-10vw-tpc{ padding: 10vw }
  .p-11vw-tpc{ padding: 11vw }
  .p-12vw-tpc{ padding: 12vw }
  .p-13vw-tpc{ padding: 13vw }
  .p-14vw-tpc{ padding: 14vw }
  .p-15vw-tpc{ padding: 15vw }
}
@media screen and (min-width: 1024px){
  .p-5-pc{ padding: 5px }
  .p-8-pc{ padding: 8px }
  .p-10-pc{ padding: 10px }
  .p-15-pc{ padding: 15px }
  .p-20-pc{ padding: 20px }
  .p-25-pc{ padding: 25px }
  .p-30-pc{ padding: 30px }
  .p-35-pc{ padding: 35px }
  .p-40-pc{ padding: 40px }
  .p-45-pc{ padding: 45px }
  .p-50-pc{ padding: 50px }
  .p-60-pc{ padding: 60px }
  .p-70-pc{ padding: 70px }
  .p-80-pc{ padding: 80px }
  .p-90-pc{ padding: 90px }
  .p-100-pc{ padding: 100px }
  .p-110-pc{ padding: 110px }
  .p-120-pc{ padding: 120px }
  .p-130-pc{ padding: 130px }
  .p-140-pc{ padding: 140px }
  .p-150-pc{ padding: 150px }
  .p-160-pc{ padding: 160px }
  .p-170-pc{ padding: 170px }
  .p-180-pc{ padding: 180px }
  .p-190-pc{ padding: 190px }
  .p-200-pc{ padding: 200px }

  .p-1vw-pc{ padding: 1vw }
  .p-2vw-pc{ padding: 2vw }
  .p-3vw-pc{ padding: 3vw }
  .p-4vw-pc{ padding: 4vw }
  .p-5vw-pc{ padding: 5vw }
  .p-6vw-pc{ padding: 6vw }
  .p-7vw-pc{ padding: 7vw }
  .p-8vw-pc{ padding: 8vw }
  .p-9vw-pc{ padding: 9vw }
  .p-10vw-pc{ padding: 10vw }
  .p-11vw-pc{ padding: 11vw }
  .p-12vw-pc{ padding: 12vw }
  .p-13vw-pc{ padding: 13vw }
  .p-14vw-pc{ padding: 14vw }
  .p-15vw-pc{ padding: 15vw }
}

/*padding top bottom*/
.ptb-5{ padding-top: calc(5px * var(--space-ratio)); padding-bottom: calc(5px * var(--space-ratio)) }
.ptb-8{ padding-top: calc(8px * var(--space-ratio)); padding-bottom: calc(8px * var(--space-ratio)) }
.ptb-10{ padding-top: calc(10px * var(--space-ratio)); padding-bottom: calc(10px * var(--space-ratio)) }
.ptb-15{ padding-top: calc(15px * var(--space-ratio)); padding-bottom: calc(15px * var(--space-ratio)) }
.ptb-20{ padding-top: calc(20px * var(--space-ratio)); padding-bottom: calc(20px * var(--space-ratio)) }
.ptb-25{ padding-top: calc(25px * var(--space-ratio)); padding-bottom: calc(25px * var(--space-ratio)) }
.ptb-30{ padding-top: calc(30px * var(--space-ratio)); padding-bottom: calc(30px * var(--space-ratio)) }
.ptb-35{ padding-top: calc(35px * var(--space-ratio)); padding-bottom: calc(35px * var(--space-ratio)) }
.ptb-40{ padding-top: calc(40px * var(--space-ratio)); padding-bottom: calc(40px * var(--space-ratio)) }
.ptb-45{ padding-top: calc(45px * var(--space-ratio)); padding-bottom: calc(45px * var(--space-ratio)) }
.ptb-50{ padding-top: calc(50px * var(--space-ratio)); padding-bottom: calc(50px * var(--space-ratio)) }
.ptb-60{ padding-top: calc(60px * var(--space-ratio)); padding-bottom: calc(60px * var(--space-ratio)) }
.ptb-70{ padding-top: calc(70px * var(--space-ratio)); padding-bottom: calc(70px * var(--space-ratio)) }
.ptb-80{ padding-top: calc(80px * var(--space-ratio)); padding-bottom: calc(80px * var(--space-ratio)) }
.ptb-90{ padding-top: calc(90px * var(--space-ratio)); padding-bottom: calc(90px * var(--space-ratio)) }
.ptb-100{ padding-top: calc(100px * var(--space-ratio)); padding-bottom: calc(100px * var(--space-ratio)) }
.ptb-110{ padding-top: calc(110px * var(--space-ratio)); padding-bottom: calc(110px * var(--space-ratio)) }
.ptb-120{ padding-top: calc(120px * var(--space-ratio)); padding-bottom: calc(120px * var(--space-ratio)) }
.ptb-130{ padding-top: calc(130px * var(--space-ratio)); padding-bottom: calc(130px * var(--space-ratio)) }
.ptb-140{ padding-top: calc(140px * var(--space-ratio)); padding-bottom: calc(140px * var(--space-ratio)) }
.ptb-150{ padding-top: calc(150px * var(--space-ratio)); padding-bottom: calc(150px * var(--space-ratio)) }
.ptb-160{ padding-top: calc(160px * var(--space-ratio)); padding-bottom: calc(160px * var(--space-ratio)) }
.ptb-170{ padding-top: calc(170px * var(--space-ratio)); padding-bottom: calc(170px * var(--space-ratio)) }
.ptb-180{ padding-top: calc(180px * var(--space-ratio)); padding-bottom: calc(180px * var(--space-ratio)) }
.ptb-190{ padding-top: calc(190px * var(--space-ratio)); padding-bottom: calc(190px * var(--space-ratio)) }
.ptb-200{ padding-top: calc(200px * var(--space-ratio)); padding-bottom: calc(200px * var(--space-ratio)) }

.ptb-1vw{ padding-top: 1vw; padding-bottom: 1vw }
.ptb-2vw{ padding-top: 2vw; padding-bottom: 2vw }
.ptb-3vw{ padding-top: 3vw; padding-bottom: 3vw }
.ptb-4vw{ padding-top: 4vw; padding-bottom: 4vw }
.ptb-5vw{ padding-top: 5vw; padding-bottom: 5vw }
.ptb-6vw{ padding-top: 6vw; padding-bottom: 6vw }
.ptb-7vw{ padding-top: 7vw; padding-bottom: 7vw }
.ptb-8vw{ padding-top: 8vw; padding-bottom: 8vw }
.ptb-9vw{ padding-top: 9vw; padding-bottom: 9vw }
.ptb-10vw{ padding-top: 10vw; padding-bottom: 10vw }
.ptb-11vw{ padding-top: 11vw; padding-bottom: 11vw }
.ptb-12vw{ padding-top: 12vw; padding-bottom: 12vw }
.ptb-13vw{ padding-top: 13vw; padding-bottom: 13vw }
.ptb-14vw{ padding-top: 14vw; padding-bottom: 14vw }
.ptb-15vw{ padding-top: 15vw; padding-bottom: 15vw }

@media screen and (max-width: 1023px){
  .ptb-5-sp{ padding-top: 5px; padding-bottom: 5px }
  .ptb-8-sp{ padding-top: 8px; padding-bottom: 8px }
  .ptb-10-sp{ padding-top: 10px; padding-bottom: 10px }
  .ptb-15-sp{ padding-top: 15px; padding-bottom: 15px }
  .ptb-20-sp{ padding-top: 20px; padding-bottom: 20px }
  .ptb-25-sp{ padding-top: 25px; padding-bottom: 25px }
  .ptb-30-sp{ padding-top: 30px; padding-bottom: 30px }
  .ptb-35-sp{ padding-top: 35px; padding-bottom: 35px }
  .ptb-40-sp{ padding-top: 40px; padding-bottom: 40px }
  .ptb-45-sp{ padding-top: 45px; padding-bottom: 45px }
  .ptb-50-sp{ padding-top: 50px; padding-bottom: 50px }
  .ptb-60-sp{ padding-top: 60px; padding-bottom: 60px }
  .ptb-70-sp{ padding-top: 70px; padding-bottom: 70px }
  .ptb-80-sp{ padding-top: 80px; padding-bottom: 80px }
  .ptb-90-sp{ padding-top: 90px; padding-bottom: 90px }
  .ptb-100-sp{ padding-top: 100px; padding-bottom: 100px }
  .ptb-110-sp{ padding-top: 110px; padding-bottom: 110px }
  .ptb-120-sp{ padding-top: 120px; padding-bottom: 120px }
  .ptb-130-sp{ padding-top: 130px; padding-bottom: 130px }
  .ptb-140-sp{ padding-top: 140px; padding-bottom: 140px }
  .ptb-150-sp{ padding-top: 150px; padding-bottom: 150px }
  .ptb-160-sp{ padding-top: 160px; padding-bottom: 160px }
  .ptb-170-sp{ padding-top: 170px; padding-bottom: 170px }
  .ptb-180-sp{ padding-top: 180px; padding-bottom: 180px }
  .ptb-190-sp{ padding-top: 190px; padding-bottom: 190px }
  .ptb-200-sp{ padding-top: 200px; padding-bottom: 200px }

  .ptb-1vw-sp{ padding-top: 1vw; padding-bottom: 1vw }
  .ptb-2vw-sp{ padding-top: 2vw; padding-bottom: 2vw }
  .ptb-3vw-sp{ padding-top: 3vw; padding-bottom: 3vw }
  .ptb-4vw-sp{ padding-top: 4vw; padding-bottom: 4vw }
  .ptb-5vw-sp{ padding-top: 5vw; padding-bottom: 5vw }
  .ptb-6vw-sp{ padding-top: 6vw; padding-bottom: 6vw }
  .ptb-7vw-sp{ padding-top: 7vw; padding-bottom: 7vw }
  .ptb-8vw-sp{ padding-top: 8vw; padding-bottom: 8vw }
  .ptb-9vw-sp{ padding-top: 9vw; padding-bottom: 9vw }
  .ptb-10vw-sp{ padding-top: 10vw; padding-bottom: 10vw }
  .ptb-11vw-sp{ padding-top: 11vw; padding-bottom: 11vw }
  .ptb-12vw-sp{ padding-top: 12vw; padding-bottom: 12vw }
  .ptb-13vw-sp{ padding-top: 13vw; padding-bottom: 13vw }
  .ptb-14vw-sp{ padding-top: 14vw; padding-bottom: 14vw }
  .ptb-15vw-sp{ padding-top: 15vw; padding-bottom: 15vw }
}
@media screen and (min-width: 768px){
  .ptb-5-tpc{ padding-top: 5px; padding-bottom: 5px }
  .ptb-8-tpc{ padding-top: 8px; padding-bottom: 8px }
  .ptb-10-tpc{ padding-top: 10px; padding-bottom: 10px }
  .ptb-15-tpc{ padding-top: 15px; padding-bottom: 15px }
  .ptb-20-tpc{ padding-top: 20px; padding-bottom: 20px }
  .ptb-25-tpc{ padding-top: 25px; padding-bottom: 25px }
  .ptb-30-tpc{ padding-top: 30px; padding-bottom: 30px }
  .ptb-35-tpc{ padding-top: 35px; padding-bottom: 35px }
  .ptb-40-tpc{ padding-top: 40px; padding-bottom: 40px }
  .ptb-45-tpc{ padding-top: 45px; padding-bottom: 45px }
  .ptb-50-tpc{ padding-top: 50px; padding-bottom: 50px }
  .ptb-60-tpc{ padding-top: 60px; padding-bottom: 60px }
  .ptb-70-tpc{ padding-top: 70px; padding-bottom: 70px }
  .ptb-80-tpc{ padding-top: 80px; padding-bottom: 80px }
  .ptb-90-tpc{ padding-top: 90px; padding-bottom: 90px }
  .ptb-100-tpc{ padding-top: 100px; padding-bottom: 100px }
  .ptb-110-tpc{ padding-top: 110px; padding-bottom: 110px }
  .ptb-120-tpc{ padding-top: 120px; padding-bottom: 120px }
  .ptb-130-tpc{ padding-top: 130px; padding-bottom: 130px }
  .ptb-140-tpc{ padding-top: 140px; padding-bottom: 140px }
  .ptb-150-tpc{ padding-top: 150px; padding-bottom: 150px }
  .ptb-160-tpc{ padding-top: 160px; padding-bottom: 160px }
  .ptb-170-tpc{ padding-top: 170px; padding-bottom: 170px }
  .ptb-180-tpc{ padding-top: 180px; padding-bottom: 180px }
  .ptb-190-tpc{ padding-top: 190px; padding-bottom: 190px }
  .ptb-200-tpc{ padding-top: 200px; padding-bottom: 200px }

  .ptb-1vw-tpc{ padding-top: 1vw; padding-bottom: 1vw }
  .ptb-2vw-tpc{ padding-top: 2vw; padding-bottom: 2vw }
  .ptb-3vw-tpc{ padding-top: 3vw; padding-bottom: 3vw }
  .ptb-4vw-tpc{ padding-top: 4vw; padding-bottom: 4vw }
  .ptb-5vw-tpc{ padding-top: 5vw; padding-bottom: 5vw }
  .ptb-6vw-tpc{ padding-top: 6vw; padding-bottom: 6vw }
  .ptb-7vw-tpc{ padding-top: 7vw; padding-bottom: 7vw }
  .ptb-8vw-tpc{ padding-top: 8vw; padding-bottom: 8vw }
  .ptb-9vw-tpc{ padding-top: 9vw; padding-bottom: 9vw }
  .ptb-10vw-tpc{ padding-top: 10vw; padding-bottom: 10vw }
  .ptb-11vw-tpc{ padding-top: 11vw; padding-bottom: 11vw }
  .ptb-12vw-tpc{ padding-top: 12vw; padding-bottom: 12vw }
  .ptb-13vw-tpc{ padding-top: 13vw; padding-bottom: 13vw }
  .ptb-14vw-tpc{ padding-top: 14vw; padding-bottom: 14vw }
  .ptb-15vw-tpc{ padding-top: 15vw; padding-bottom: 15vw }
}
@media screen and (min-width: 1024px){
  .ptb-5-pc{ padding-top: 5px; padding-bottom: 5px }
  .ptb-8-pc{ padding-top: 8px; padding-bottom: 8px }
  .ptb-10-pc{ padding-top: 10px; padding-bottom: 10px }
  .ptb-15-pc{ padding-top: 15px; padding-bottom: 15px }
  .ptb-20-pc{ padding-top: 20px; padding-bottom: 20px }
  .ptb-25-pc{ padding-top: 25px; padding-bottom: 25px }
  .ptb-30-pc{ padding-top: 30px; padding-bottom: 30px }
  .ptb-35-pc{ padding-top: 35px; padding-bottom: 35px }
  .ptb-40-pc{ padding-top: 40px; padding-bottom: 40px }
  .ptb-45-pc{ padding-top: 45px; padding-bottom: 45px }
  .ptb-50-pc{ padding-top: 50px; padding-bottom: 50px }
  .ptb-60-pc{ padding-top: 60px; padding-bottom: 60px }
  .ptb-70-pc{ padding-top: 70px; padding-bottom: 70px }
  .ptb-80-pc{ padding-top: 80px; padding-bottom: 80px }
  .ptb-90-pc{ padding-top: 90px; padding-bottom: 90px }
  .ptb-100-pc{ padding-top: 100px; padding-bottom: 100px }
  .ptb-110-pc{ padding-top: 110px; padding-bottom: 110px }
  .ptb-120-pc{ padding-top: 120px; padding-bottom: 120px }
  .ptb-130-pc{ padding-top: 130px; padding-bottom: 130px }
  .ptb-140-pc{ padding-top: 140px; padding-bottom: 140px }
  .ptb-150-pc{ padding-top: 150px; padding-bottom: 150px }
  .ptb-160-pc{ padding-top: 160px; padding-bottom: 160px }
  .ptb-170-pc{ padding-top: 170px; padding-bottom: 170px }
  .ptb-180-pc{ padding-top: 180px; padding-bottom: 180px }
  .ptb-190-pc{ padding-top: 190px; padding-bottom: 190px }
  .ptb-200-pc{ padding-top: 200px; padding-bottom: 200px }

  .ptb-1vw-pc{ padding-top: 1vw; padding-bottom: 1vw }
  .ptb-2vw-pc{ padding-top: 2vw; padding-bottom: 2vw }
  .ptb-3vw-pc{ padding-top: 3vw; padding-bottom: 3vw }
  .ptb-4vw-pc{ padding-top: 4vw; padding-bottom: 4vw }
  .ptb-5vw-pc{ padding-top: 5vw; padding-bottom: 5vw }
  .ptb-6vw-pc{ padding-top: 6vw; padding-bottom: 6vw }
  .ptb-7vw-pc{ padding-top: 7vw; padding-bottom: 7vw }
  .ptb-8vw-pc{ padding-top: 8vw; padding-bottom: 8vw }
  .ptb-9vw-pc{ padding-top: 9vw; padding-bottom: 9vw }
  .ptb-10vw-pc{ padding-top: 10vw; padding-bottom: 10vw }
  .ptb-11vw-pc{ padding-top: 11vw; padding-bottom: 11vw }
  .ptb-12vw-pc{ padding-top: 12vw; padding-bottom: 12vw }
  .ptb-13vw-pc{ padding-top: 13vw; padding-bottom: 13vw }
  .ptb-14vw-pc{ padding-top: 14vw; padding-bottom: 14vw }
  .ptb-15vw-pc{ padding-top: 15vw; padding-bottom: 15vw }
}

/*padding right left*/
.prl-5{ padding-right: calc(5px * var(--space-ratio)); padding-left: calc(5px * var(--space-ratio)) }
.prl-8{ padding-right: calc(8px * var(--space-ratio)); padding-left: calc(8px * var(--space-ratio)) }
.prl-10{ padding-right: calc(10px * var(--space-ratio)); padding-left: calc(10px * var(--space-ratio)) }
.prl-15{ padding-right: calc(15px * var(--space-ratio)); padding-left: calc(15px * var(--space-ratio)) }
.prl-20{ padding-right: calc(20px * var(--space-ratio)); padding-left: calc(20px * var(--space-ratio)) }
.prl-25{ padding-right: calc(25px * var(--space-ratio)); padding-left: calc(25px * var(--space-ratio)) }
.prl-30{ padding-right: calc(30px * var(--space-ratio)); padding-left: calc(30px * var(--space-ratio)) }
.prl-35{ padding-right: calc(30px * var(--space-ratio)); padding-left: calc(35px * var(--space-ratio)) }
.prl-40{ padding-right: calc(40px * var(--space-ratio)); padding-left: calc(40px * var(--space-ratio)) }
.prl-45{ padding-right: calc(45px * var(--space-ratio)); padding-left: calc(45px * var(--space-ratio)) }
.prl-50{ padding-right: calc(50px * var(--space-ratio)); padding-left: calc(50px * var(--space-ratio)) }
.prl-60{ padding-right: calc(60px * var(--space-ratio)); padding-left: calc(60px * var(--space-ratio)) }
.prl-70{ padding-right: calc(70px * var(--space-ratio)); padding-left: calc(70px * var(--space-ratio)) }
.prl-80{ padding-right: calc(80px * var(--space-ratio)); padding-left: calc(80px * var(--space-ratio)) }
.prl-90{ padding-right: calc(90px * var(--space-ratio)); padding-left: calc(90px * var(--space-ratio)) }
.prl-100{ padding-right: calc(100px * var(--space-ratio)); padding-left: calc(100px * var(--space-ratio)) }
.prl-110{ padding-right: calc(110px * var(--space-ratio)); padding-left: calc(110px * var(--space-ratio)) }
.prl-120{ padding-right: calc(120px * var(--space-ratio)); padding-left: calc(120px * var(--space-ratio)) }
.prl-130{ padding-right: calc(130px * var(--space-ratio)); padding-left: calc(130px * var(--space-ratio)) }
.prl-140{ padding-right: calc(140px * var(--space-ratio)); padding-left: calc(140px * var(--space-ratio)) }
.prl-150{ padding-right: calc(150px * var(--space-ratio)); padding-left: calc(150px * var(--space-ratio)) }
.prl-160{ padding-right: calc(160px * var(--space-ratio)); padding-left: calc(160px * var(--space-ratio)) }
.prl-170{ padding-right: calc(170px * var(--space-ratio)); padding-left: calc(170px * var(--space-ratio)) }
.prl-180{ padding-right: calc(180px * var(--space-ratio)); padding-left: calc(180px * var(--space-ratio)) }
.prl-190{ padding-right: calc(190px * var(--space-ratio)); padding-left: calc(190px * var(--space-ratio)) }
.prl-200{ padding-right: calc(200px * var(--space-ratio)); padding-left: calc(200px * var(--space-ratio)) }

.prl-1vw{ padding-right: 1vw; padding-left: 1vw }
.prl-2vw{ padding-right: 2vw; padding-left: 2vw }
.prl-3vw{ padding-right: 3vw; padding-left: 3vw }
.prl-4vw{ padding-right: 4vw; padding-left: 4vw }
.prl-5vw{ padding-right: 5vw; padding-left: 5vw }
.prl-6vw{ padding-right: 6vw; padding-left: 6vw }
.prl-7vw{ padding-right: 7vw; padding-left: 7vw }
.prl-8vw{ padding-right: 8vw; padding-left: 8vw }
.prl-9vw{ padding-right: 9vw; padding-left: 9vw }
.prl-10vw{ padding-right: 10vw; padding-left: 10vw }
.prl-11vw{ padding-right: 11vw; padding-left: 11vw }
.prl-12vw{ padding-right: 12vw; padding-left: 12vw }
.prl-13vw{ padding-right: 13vw; padding-left: 13vw }
.prl-14vw{ padding-right: 14vw; padding-left: 14vw }
.prl-15vw{ padding-right: 15vw; padding-left: 15vw }

  .prl-s{ padding-right: var(--space-s); padding-left: var(--space-s) }
  .prl-m{ padding-right: var(--space-m); padding-left: var(--space-m) }
  .prl-l{ padding-right: var(--space-l); padding-left: var(--space-l) }

@media screen and (max-width: 1023px){
  .prl-5-sp{ padding-right: 5px; padding-left: 5px }
  .prl-8-sp{ padding-right: 8px; padding-left: 8px }
  .prl-10-sp{ padding-right: 10px; padding-left: 10px }
  .prl-15-sp{ padding-right: 15px; padding-left: 15px }
  .prl-20-sp{ padding-right: 20px; padding-left: 20px }
  .prl-25-sp{ padding-right: 25px; padding-left: 25px }
  .prl-30-sp{ padding-right: 30px; padding-left: 30px }
  .prl-35-sp{ padding-right: 35px; padding-left: 35px }
  .prl-40-sp{ padding-right: 40px; padding-left: 40px }
  .prl-45-sp{ padding-right: 45px; padding-left: 45px }
  .prl-50-sp{ padding-right: 50px; padding-left: 50px }
  .prl-60-sp{ padding-right: 60px; padding-left: 60px }
  .prl-70-sp{ padding-right: 70px; padding-left: 70px }
  .prl-80-sp{ padding-right: 80px; padding-left: 80px }
  .prl-90-sp{ padding-right: 90px; padding-left: 90px }
  .prl-100-sp{ padding-right: 100px; padding-left: 100px }
  .prl-110-sp{ padding-right: 110px; padding-left: 110px }
  .prl-120-sp{ padding-right: 120px; padding-left: 120px }
  .prl-130-sp{ padding-right: 130px; padding-left: 130px }
  .prl-140-sp{ padding-right: 140px; padding-left: 140px }
  .prl-150-sp{ padding-right: 150px; padding-left: 150px }
  .prl-160-sp{ padding-right: 160px; padding-left: 160px }
  .prl-170-sp{ padding-right: 170px; padding-left: 170px }
  .prl-180-sp{ padding-right: 180px; padding-left: 180px }
  .prl-190-sp{ padding-right: 190px; padding-left: 190px }
  .prl-200-sp{ padding-right: 200px; padding-left: 200px }

  .prl-1vw-sp{ padding-right: 1vw; padding-left: 1vw }
  .prl-2vw-sp{ padding-right: 2vw; padding-left: 2vw }
  .prl-3vw-sp{ padding-right: 3vw; padding-left: 3vw }
  .prl-4vw-sp{ padding-right: 4vw; padding-left: 4vw }
  .prl-5vw-sp{ padding-right: 5vw; padding-left: 5vw }
  .prl-6vw-sp{ padding-right: 6vw; padding-left: 6vw }
  .prl-7vw-sp{ padding-right: 7vw; padding-left: 7vw }
  .prl-8vw-sp{ padding-right: 8vw; padding-left: 8vw }
  .prl-9vw-sp{ padding-right: 9vw; padding-left: 9vw }
  .prl-10vw-sp{ padding-right: 10vw; padding-left: 10vw }
  .prl-11vw-sp{ padding-right: 11vw; padding-left: 11vw }
  .prl-12vw-sp{ padding-right: 12vw; padding-left: 12vw }
  .prl-13vw-sp{ padding-right: 13vw; padding-left: 13vw }
  .prl-14vw-sp{ padding-right: 14vw; padding-left: 14vw }
  .prl-15vw-sp{ padding-right: 15vw; padding-left: 15vw }

  .prl-s-sp{ padding-right: var(--space-s); padding-left: var(--space-s) }
  .prl-m-sp{ padding-right: var(--space-m); padding-left: var(--space-m) }
  .prl-l-sp{ padding-right: var(--space-l); padding-left: var(--space-l) }
}
@media screen and (min-width: 768px){
  .prl-5-tpc{ padding-right: 5px; padding-left: 5px }
  .prl-8-tpc{ padding-right: 8px; padding-left: 8px }
  .prl-10-tpc{ padding-right: 10px; padding-left: 10px }
  .prl-15-tpc{ padding-right: 15px; padding-left: 15px }
  .prl-20-tpc{ padding-right: 20px; padding-left: 20px }
  .prl-25-tpc{ padding-right: 25px; padding-left: 25px }
  .prl-30-tpc{ padding-right: 30px; padding-left: 30px }
  .prl-35-tpc{ padding-right: 35px; padding-left: 35px }
  .prl-40-tpc{ padding-right: 40px; padding-left: 40px }
  .prl-45-tpc{ padding-right: 45px; padding-left: 45px }
  .prl-50-tpc{ padding-right: 50px; padding-left: 50px }
  .prl-60-tpc{ padding-right: 60px; padding-left: 60px }
  .prl-70-tpc{ padding-right: 70px; padding-left: 70px }
  .prl-80-tpc{ padding-right: 80px; padding-left: 80px }
  .prl-90-tpc{ padding-right: 90px; padding-left: 90px }
  .prl-100-tpc{ padding-right: 100px; padding-left: 100px }
  .prl-110-tpc{ padding-right: 110px; padding-left: 110px }
  .prl-120-tpc{ padding-right: 120px; padding-left: 120px }
  .prl-130-tpc{ padding-right: 130px; padding-left: 130px }
  .prl-140-tpc{ padding-right: 140px; padding-left: 140px }
  .prl-150-tpc{ padding-right: 150px; padding-left: 150px }
  .prl-160-tpc{ padding-right: 160px; padding-left: 160px }
  .prl-170-tpc{ padding-right: 170px; padding-left: 170px }
  .prl-180-tpc{ padding-right: 180px; padding-left: 180px }
  .prl-190-tpc{ padding-right: 190px; padding-left: 190px }
  .prl-200-tpc{ padding-right: 200px; padding-left: 200px * var(--space-ratio)) }

  .prl-1vw-tpc{ padding-right: 1vw; padding-left: 1vw }
  .prl-2vw-tpc{ padding-right: 2vw; padding-left: 2vw }
  .prl-3vw-tpc{ padding-right: 3vw; padding-left: 3vw }
  .prl-4vw-tpc{ padding-right: 4vw; padding-left: 4vw }
  .prl-5vw-tpc{ padding-right: 5vw; padding-left: 5vw }
  .prl-6vw-tpc{ padding-right: 6vw; padding-left: 6vw }
  .prl-7vw-tpc{ padding-right: 7vw; padding-left: 7vw }
  .prl-8vw-tpc{ padding-right: 8vw; padding-left: 8vw }
  .prl-9vw-tpc{ padding-right: 9vw; padding-left: 9vw }
  .prl-10vw-tpc{ padding-right: 10vw; padding-left: 10vw }
  .prl-11vw-tpc{ padding-right: 11vw; padding-left: 11vw }
  .prl-12vw-tpc{ padding-right: 12vw; padding-left: 12vw }
  .prl-13vw-tpc{ padding-right: 13vw; padding-left: 13vw }
  .prl-14vw-tpc{ padding-right: 14vw; padding-left: 14vw }
  .prl-15vw-tpc{ padding-right: 15vw; padding-left: 15vw }

  .prl-s-tpc{ padding-right: var(--space-s); padding-left: var(--space-s) }
  .prl-m-tpc{ padding-right: var(--space-m); padding-left: var(--space-m) }
  .prl-l-tpc{ padding-right: var(--space-l); padding-left: var(--space-l) }
}
@media screen and (min-width: 1024px){
  .prl-5-pc{ padding-right: 5px; padding-left: 5px }
  .prl-8-pc{ padding-right: 8px; padding-left: 8px }
  .prl-10-pc{ padding-right: 10px; padding-left: 10px }
  .prl-15-pc{ padding-right: 15px; padding-left: 15px }
  .prl-20-pc{ padding-right: 20px; padding-left: 20px }
  .prl-25-pc{ padding-right: 25px; padding-left: 25px }
  .prl-30-pc{ padding-right: 30px; padding-left: 30px }
  .prl-35-pc{ padding-right: 35px; padding-left: 35px }
  .prl-40-pc{ padding-right: 40px; padding-left: 40px }
  .prl-45-pc{ padding-right: 45px; padding-left: 45px }
  .prl-50-pc{ padding-right: 50px; padding-left: 50px }
  .prl-60-pc{ padding-right: 60px; padding-left: 60px }
  .prl-70-pc{ padding-right: 70px; padding-left: 70px }
  .prl-80-pc{ padding-right: 80px; padding-left: 80px }
  .prl-90-pc{ padding-right: 90px; padding-left: 90px }
  .prl-100-pc{ padding-right: 100px; padding-left: 100px }
  .prl-110-pc{ padding-right: 110px; padding-left: 110px }
  .prl-120-pc{ padding-right: 120px; padding-left: 120px }
  .prl-130-pc{ padding-right: 130px; padding-left: 130px }
  .prl-140-pc{ padding-right: 140px; padding-left: 140px }
  .prl-150-pc{ padding-right: 150px; padding-left: 150px }
  .prl-160-pc{ padding-right: 160px; padding-left: 160px }
  .prl-170-pc{ padding-right: 170px; padding-left: 170px }
  .prl-180-pc{ padding-right: 180px; padding-left: 180px }
  .prl-190-pc{ padding-right: 190px; padding-left: 190px }
  .prl-200-pc{ padding-right: 200px; padding-left: 200px }

  .prl-1vw-pc{ padding-right: 1vw; padding-left: 1vw }
  .prl-2vw-pc{ padding-right: 2vw; padding-left: 2vw }
  .prl-3vw-pc{ padding-right: 3vw; padding-left: 3vw }
  .prl-4vw-pc{ padding-right: 4vw; padding-left: 4vw }
  .prl-5vw-pc{ padding-right: 5vw; padding-left: 5vw }
  .prl-6vw-pc{ padding-right: 6vw; padding-left: 6vw }
  .prl-7vw-pc{ padding-right: 7vw; padding-left: 7vw }
  .prl-8vw-pc{ padding-right: 8vw; padding-left: 8vw }
  .prl-9vw-pc{ padding-right: 9vw; padding-left: 9vw }
  .prl-10vw-pc{ padding-right: 10vw; padding-left: 10vw }
  .prl-11vw-pc{ padding-right: 11vw; padding-left: 11vw }
  .prl-12vw-pc{ padding-right: 12vw; padding-left: 12vw }
  .prl-13vw-pc{ padding-right: 13vw; padding-left: 13vw }
  .prl-14vw-pc{ padding-right: 14vw; padding-left: 14vw }
  .prl-15vw-pc{ padding-right: 15vw; padding-left: 15vw }

  .prl-s-pc{ padding-right: var(--space-s); padding-left: var(--space-s) }
  .prl-m-pc{ padding-right: var(--space-m); padding-left: var(--space-m) }
  .prl-l-pc{ padding-right: var(--space-l); padding-left: var(--space-l) }
}

/*padding top*/
.pt-5{ padding-top: calc(5px * var(--space-ratio)) }
.pt-8{ padding-top: calc(8px * var(--space-ratio)) }
.pt-10{ padding-top: calc(10px * var(--space-ratio)) }
.pt-15{ padding-top: calc(15px * var(--space-ratio)) }
.pt-20{ padding-top: calc(20px * var(--space-ratio)) }
.pt-25{ padding-top: calc(25px * var(--space-ratio)) }
.pt-30{ padding-top: calc(35px * var(--space-ratio)) }
.pt-35{ padding-top: calc(30px * var(--space-ratio)) }
.pt-40{ padding-top: calc(40px * var(--space-ratio)) }
.pt-45{ padding-top: calc(45px * var(--space-ratio)) }
.pt-50{ padding-top: calc(50px * var(--space-ratio)) }
.pt-60{ padding-top: calc(60px * var(--space-ratio)) }
.pt-70{ padding-top: calc(70px * var(--space-ratio)) }
.pt-80{ padding-top: calc(80px * var(--space-ratio)) }
.pt-90{ padding-top: calc(90px * var(--space-ratio)) }
.pt-100{ padding-top: calc(100px * var(--space-ratio)) }
.pt-110{ padding-top: calc(110px * var(--space-ratio)) }
.pt-120{ padding-top: calc(120px * var(--space-ratio)) }
.pt-130{ padding-top: calc(130px * var(--space-ratio)) }
.pt-140{ padding-top: calc(140px * var(--space-ratio)) }
.pt-150{ padding-top: calc(150px * var(--space-ratio)) }
.pt-160{ padding-top: calc(160px * var(--space-ratio)) }
.pt-170{ padding-top: calc(170px * var(--space-ratio)) }
.pt-180{ padding-top: calc(180px * var(--space-ratio)) }
.pt-190{ padding-top: calc(190px * var(--space-ratio)) }
.pt-200{ padding-top: calc(200px * var(--space-ratio)) }

.pt-1vw{ padding-top: 1vw }
.pt-2vw{ padding-top: 2vw }
.pt-3vw{ padding-top: 3vw }
.pt-4vw{ padding-top: 4vw }
.pt-5vw{ padding-top: 5vw }
.pt-6vw{ padding-top: 6vw }
.pt-7vw{ padding-top: 7vw }
.pt-8vw{ padding-top: 8vw }
.pt-9vw{ padding-top: 9vw }
.pt-10vw{ padding-top: 10vw }
.pt-11vw{ padding-top: 11vw }
.pt-12vw{ padding-top: 12vw }
.pt-13vw{ padding-top: 13vw }
.pt-14vw{ padding-top: 14vw }
.pt-15vw{ padding-top: 15vw }

@media screen and (max-width: 1023px){
  .pt-5-sp{ padding-top: 5px }
  .pt-8-sp{ padding-top: 8px }
  .pt-10-sp{ padding-top: 10px }
  .pt-15-sp{ padding-top: 15px }
  .pt-20-sp{ padding-top: 20px }
  .pt-25-sp{ padding-top: 25px }
  .pt-30-sp{ padding-top: 30px }
  .pt-35-sp{ padding-top: 35px }
  .pt-40-sp{ padding-top: 40px }
  .pt-45-sp{ padding-top: 45px }
  .pt-50-sp{ padding-top: 50px }
  .pt-60-sp{ padding-top: 60px }
  .pt-70-sp{ padding-top: 70px }
  .pt-80-sp{ padding-top: 80px }
  .pt-90-sp{ padding-top: 90px }
  .pt-100-sp{ padding-top: 100px }
  .pt-110-sp{ padding-top: 110px }
  .pt-120-sp{ padding-top: 120px }
  .pt-130-sp{ padding-top: 130px }
  .pt-140-sp{ padding-top: 140px }
  .pt-150-sp{ padding-top: 150px }
  .pt-160-sp{ padding-top: 160px }
  .pt-170-sp{ padding-top: 170px }
  .pt-180-sp{ padding-top: 180px }
  .pt-190-sp{ padding-top: 190px }
  .pt-200-sp{ padding-top: 200px }

  .pt-1vw-sp{ padding-top: 1vw }
  .pt-2vw-sp{ padding-top: 2vw }
  .pt-3vw-sp{ padding-top: 3vw }
  .pt-4vw-sp{ padding-top: 4vw }
  .pt-5vw-sp{ padding-top: 5vw }
  .pt-6vw-sp{ padding-top: 6vw }
  .pt-7vw-sp{ padding-top: 7vw }
  .pt-8vw-sp{ padding-top: 8vw }
  .pt-9vw-sp{ padding-top: 9vw }
  .pt-10vw-sp{ padding-top: 10vw }
  .pt-11vw-sp{ padding-top: 11vw }
  .pt-12vw-sp{ padding-top: 12vw }
  .pt-13vw-sp{ padding-top: 13vw }
  .pt-14vw-sp{ padding-top: 14vw }
  .pt-15vw-sp{ padding-top: 15vw }
}
@media screen and (min-width: 768px){
  .pt-5-tpc{ padding-top: 5px }
  .pt-8-tpc{ padding-top: 8px }
  .pt-10-tpc{ padding-top: 10px }
  .pt-15-tpc{ padding-top: 15px }
  .pt-20-tpc{ padding-top: 20px }
  .pt-25-tpc{ padding-top: 25px }
  .pt-30-tpc{ padding-top: 30px }
  .pt-35-tpc{ padding-top: 35px }
  .pt-40-tpc{ padding-top: 40px }
  .pt-45-tpc{ padding-top: 45px }
  .pt-50-tpc{ padding-top: 50px }
  .pt-60-tpc{ padding-top: 60px }
  .pt-70-tpc{ padding-top: 70px }
  .pt-80-tpc{ padding-top: 80px }
  .pt-90-tpc{ padding-top: 90px }
  .pt-100-tpc{ padding-top: 100px }
  .pt-110-tpc{ padding-top: 110px }
  .pt-120-tpc{ padding-top: 120px }
  .pt-130-tpc{ padding-top: 130px }
  .pt-140-tpc{ padding-top: 140px }
  .pt-150-tpc{ padding-top: 150px }
  .pt-160-tpc{ padding-top: 160px }
  .pt-170-tpc{ padding-top: 170px }
  .pt-180-tpc{ padding-top: 180px }
  .pt-190-tpc{ padding-top: 190px }
  .pt-200-tpc{ padding-top: 200px }

  .pt-1vw-tpc{ padding-top: 1vw }
  .pt-2vw-tpc{ padding-top: 2vw }
  .pt-3vw-tpc{ padding-top: 3vw }
  .pt-4vw-tpc{ padding-top: 4vw }
  .pt-5vw-tpc{ padding-top: 5vw }
  .pt-6vw-tpc{ padding-top: 6vw }
  .pt-7vw-tpc{ padding-top: 7vw }
  .pt-8vw-tpc{ padding-top: 8vw }
  .pt-9vw-tpc{ padding-top: 9vw }
  .pt-10vw-tpc{ padding-top: 10vw }
  .pt-11vw-tpc{ padding-top: 11vw }
  .pt-12vw-tpc{ padding-top: 12vw }
  .pt-13vw-tpc{ padding-top: 13vw }
  .pt-14vw-tpc{ padding-top: 14vw }
  .pt-15vw-tpc{ padding-top: 15vw }
}
@media screen and (min-width: 1024px){
  .pt-5-pc{ padding-top: 5px }
  .pt-8-pc{ padding-top: 8px }
  .pt-10-pc{ padding-top: 10px }
  .pt-15-pc{ padding-top: 15px }
  .pt-20-pc{ padding-top: 20px }
  .pt-25-pc{ padding-top: 25px }
  .pt-30-pc{ padding-top: 30px }
  .pt-35-pc{ padding-top: 35px }
  .pt-40-pc{ padding-top: 40px }
  .pt-45-pc{ padding-top: 45px }
  .pt-50-pc{ padding-top: 50px }
  .pt-60-pc{ padding-top: 60px }
  .pt-70-pc{ padding-top: 70px }
  .pt-80-pc{ padding-top: 80px }
  .pt-90-pc{ padding-top: 90px }
  .pt-100-pc{ padding-top: 100px }
  .pt-110-pc{ padding-top: 110px }
  .pt-120-pc{ padding-top: 120px }
  .pt-130-pc{ padding-top: 130px }
  .pt-140-pc{ padding-top: 140px }
  .pt-150-pc{ padding-top: 150px }
  .pt-160-pc{ padding-top: 160px }
  .pt-170-pc{ padding-top: 170px }
  .pt-180-pc{ padding-top: 180px }
  .pt-190-pc{ padding-top: 190px }
  .pt-200-pc{ padding-top: 200px }

  .pt-1vw-pc{ padding-top: 1vw }
  .pt-2vw-pc{ padding-top: 2vw }
  .pt-3vw-pc{ padding-top: 3vw }
  .pt-4vw-pc{ padding-top: 4vw }
  .pt-5vw-pc{ padding-top: 5vw }
  .pt-6vw-pc{ padding-top: 6vw }
  .pt-7vw-pc{ padding-top: 7vw }
  .pt-8vw-pc{ padding-top: 8vw }
  .pt-9vw-pc{ padding-top: 9vw }
  .pt-10vw-pc{ padding-top: 10vw }
  .pt-11vw-pc{ padding-top: 11vw }
  .pt-12vw-pc{ padding-top: 12vw }
  .pt-13vw-pc{ padding-top: 13vw }
  .pt-14vw-pc{ padding-top: 14vw }
  .pt-15vw-pc{ padding-top: 15vw }
}
/*padding right*/
.pr-5{ padding-right: calc(5px * var(--space-ratio)) }
.pr-8{ padding-right: calc(8px * var(--space-ratio)) }
.pr-10{ padding-right: calc(10px * var(--space-ratio)) }
.pr-15{ padding-right: calc(15px * var(--space-ratio)) }
.pr-20{ padding-right: calc(20px * var(--space-ratio)) }
.pr-25{ padding-right: calc(25px * var(--space-ratio)) }
.pr-30{ padding-right: calc(30px * var(--space-ratio)) }
.pr-35{ padding-right: calc(35px * var(--space-ratio)) }
.pr-40{ padding-right: calc(45px * var(--space-ratio)) }
.pr-45{ padding-right: calc(40px * var(--space-ratio)) }
.pr-50{ padding-right: calc(50px * var(--space-ratio)) }
.pr-60{ padding-right: calc(60px * var(--space-ratio)) }
.pr-70{ padding-right: calc(70px * var(--space-ratio)) }
.pr-80{ padding-right: calc(80px * var(--space-ratio)) }
.pr-90{ padding-right: calc(90px * var(--space-ratio)) }
.pr-100{ padding-right: calc(100px * var(--space-ratio)) }
.pr-110{ padding-right: calc(110px * var(--space-ratio)) }
.pr-120{ padding-right: calc(120px * var(--space-ratio)) }
.pr-130{ padding-right: calc(130px * var(--space-ratio)) }
.pr-140{ padding-right: calc(140px * var(--space-ratio)) }
.pr-150{ padding-right: calc(150px * var(--space-ratio)) }
.pr-160{ padding-right: calc(160px * var(--space-ratio)) }
.pr-170{ padding-right: calc(170px * var(--space-ratio)) }
.pr-180{ padding-right: calc(180px * var(--space-ratio)) }
.pr-190{ padding-right: calc(190px * var(--space-ratio)) }
.pr-200{ padding-right: calc(200px * var(--space-ratio)) }

.pr-1vw{ padding-right: 1vw }
.pr-2vw{ padding-right: 2vw }
.pr-3vw{ padding-right: 3vw }
.pr-4vw{ padding-right: 4vw }
.pr-5vw{ padding-right: 5vw }
.pr-6vw{ padding-right: 6vw }
.pr-7vw{ padding-right: 7vw }
.pr-8vw{ padding-right: 8vw }
.pr-9vw{ padding-right: 9vw }
.pr-10vw{ padding-right: 10vw }
.pr-11vw{ padding-right: 11vw }
.pr-12vw{ padding-right: 12vw }
.pr-13vw{ padding-right: 13vw }
.pr-14vw{ padding-right: 14vw }
.pr-15vw{ padding-right: 15vw }

.pr-s{ padding-right: var(--space-s) }
.pr-m{ padding-right: var(--space-m) }
.pr-l{ padding-right: var(--space-l) }

@media screen and (max-width: 1023px){
  .pr-5-sp{ padding-right: 5px }
  .pr-8-sp{ padding-right: 8px }
  .pr-10-sp{ padding-right: 10px }
  .pr-15-sp{ padding-right: 15px }
  .pr-20-sp{ padding-right: 20px }
  .pr-25-sp{ padding-right: 25px }
  .pr-30-sp{ padding-right: 30px }
  .pr-35-sp{ padding-right: 35px }
  .pr-40-sp{ padding-right: 40px }
  .pr-45-sp{ padding-right: 45px }
  .pr-50-sp{ padding-right: 50px }
  .pr-60-sp{ padding-right: 60px }
  .pr-70-sp{ padding-right: 70px }
  .pr-80-sp{ padding-right: 80px }
  .pr-90-sp{ padding-right: 90px }
  .pr-100-sp{ padding-right: 100px }
  .pr-110-sp{ padding-right: 110px }
  .pr-120-sp{ padding-right: 120px }
  .pr-130-sp{ padding-right: 130px }
  .pr-140-sp{ padding-right: 140px }
  .pr-150-sp{ padding-right: 150px }
  .pr-160-sp{ padding-right: 160px }
  .pr-170-sp{ padding-right: 170px }
  .pr-180-sp{ padding-right: 180px }
  .pr-190-sp{ padding-right: 190px }
  .pr-200-sp{ padding-right: 200px }

  .pr-1vw-sp{ padding-right: 1vw }
  .pr-2vw-sp{ padding-right: 2vw }
  .pr-3vw-sp{ padding-right: 3vw }
  .pr-4vw-sp{ padding-right: 4vw }
  .pr-5vw-sp{ padding-right: 5vw }
  .pr-6vw-sp{ padding-right: 6vw }
  .pr-7vw-sp{ padding-right: 7vw }
  .pr-8vw-sp{ padding-right: 8vw }
  .pr-9vw-sp{ padding-right: 9vw }
  .pr-10vw-sp{ padding-right: 10vw }
  .pr-11vw-sp{ padding-right: 11vw }
  .pr-12vw-sp{ padding-right: 12vw }
  .pr-13vw-sp{ padding-right: 13vw }
  .pr-14vw-sp{ padding-right: 14vw }
  .pr-15vw-sp{ padding-right: 15vw }

  .pr-s-sp{ padding-right: var(--space-s) }
  .pr-m-sp{ padding-right: var(--space-m) }
  .pr-l-sp{ padding-right: var(--space-l) }
}
@media screen and (min-width: 768px){
  .pr-5-tpc{ padding-right: 5px }
  .pr-8-tpc{ padding-right: 8px }
  .pr-10-tpc{ padding-right: 10px }
  .pr-15-tpc{ padding-right: 15px }
  .pr-20-tpc{ padding-right: 20px }
  .pr-25-tpc{ padding-right: 25px }
  .pr-30-tpc{ padding-right: 30px }
  .pr-35-tpc{ padding-right: 35px }
  .pr-40-tpc{ padding-right: 40px }
  .pr-45-tpc{ padding-right: 45px }
  .pr-50-tpc{ padding-right: 50px }
  .pr-60-tpc{ padding-right: 60px }
  .pr-70-tpc{ padding-right: 70px }
  .pr-80-tpc{ padding-right: 80px }
  .pr-90-tpc{ padding-right: 90px }
  .pr-100-tpc{ padding-right: 100px }
  .pr-110-tpc{ padding-right: 110px }
  .pr-120-tpc{ padding-right: 120px }
  .pr-130-tpc{ padding-right: 130px }
  .pr-140-tpc{ padding-right: 140px }
  .pr-150-tpc{ padding-right: 150px }
  .pr-160-tpc{ padding-right: 160px }
  .pr-170-tpc{ padding-right: 170px }
  .pr-180-tpc{ padding-right: 180px }
  .pr-190-tpc{ padding-right: 190px }
  .pr-200-tpc{ padding-right: 200px }

  .pr-1vw-tpc{ padding-right: 1vw }
  .pr-2vw-tpc{ padding-right: 2vw }
  .pr-3vw-tpc{ padding-right: 3vw }
  .pr-4vw-tpc{ padding-right: 4vw }
  .pr-5vw-tpc{ padding-right: 5vw }
  .pr-6vw-tpc{ padding-right: 6vw }
  .pr-7vw-tpc{ padding-right: 7vw }
  .pr-8vw-tpc{ padding-right: 8vw }
  .pr-9vw-tpc{ padding-right: 9vw }
  .pr-10vw-tpc{ padding-right: 10vw }
  .pr-11vw-tpc{ padding-right: 11vw }
  .pr-12vw-tpc{ padding-right: 12vw }
  .pr-13vw-tpc{ padding-right: 13vw }
  .pr-14vw-tpc{ padding-right: 14vw }
  .pr-15vw-tpc{ padding-right: 15vw }

  .pr-s-tpc{ padding-right: var(--space-s) }
  .pr-m-tpc{ padding-right: var(--space-m) }
  .pr-l-tpc{ padding-right: var(--space-l) }
}
@media screen and (min-width: 1024px){
  .pr-5-pc{ padding-right: 5px }
  .pr-8-pc{ padding-right: 8px }
  .pr-10-pc{ padding-right: 10px }
  .pr-15-pc{ padding-right: 15px }
  .pr-20-pc{ padding-right: 20px }
  .pr-25-pc{ padding-right: 25px }
  .pr-30-pc{ padding-right: 30px }
  .pr-35-pc{ padding-right: 35px }
  .pr-40-pc{ padding-right: 40px }
  .pr-45-pc{ padding-right: 45px }
  .pr-50-pc{ padding-right: 50px }
  .pr-60-pc{ padding-right: 60px }
  .pr-70-pc{ padding-right: 70px }
  .pr-80-pc{ padding-right: 80px }
  .pr-90-pc{ padding-right: 90px }
  .pr-100-pc{ padding-right: 100px }
  .pr-110-pc{ padding-right: 110px }
  .pr-120-pc{ padding-right: 120px }
  .pr-130-pc{ padding-right: 130px }
  .pr-140-pc{ padding-right: 140px }
  .pr-150-pc{ padding-right: 150px }
  .pr-160-pc{ padding-right: 160px }
  .pr-170-pc{ padding-right: 170px }
  .pr-180-pc{ padding-right: 180px }
  .pr-190-pc{ padding-right: 190px }
  .pr-200-pc{ padding-right: 200px }

  .pr-1vw-pc{ padding-right: 1vw }
  .pr-2vw-pc{ padding-right: 2vw }
  .pr-3vw-pc{ padding-right: 3vw }
  .pr-4vw-pc{ padding-right: 4vw }
  .pr-5vw-pc{ padding-right: 5vw }
  .pr-6vw-pc{ padding-right: 6vw }
  .pr-7vw-pc{ padding-right: 7vw }
  .pr-8vw-pc{ padding-right: 8vw }
  .pr-9vw-pc{ padding-right: 9vw }
  .pr-10vw-pc{ padding-right: 10vw }
  .pr-11vw-pc{ padding-right: 11vw }
  .pr-12vw-pc{ padding-right: 12vw }
  .pr-13vw-pc{ padding-right: 13vw }
  .pr-14vw-pc{ padding-right: 14vw }
  .pr-15vw-pc{ padding-right: 15vw }

  .pr-s-pc{ padding-right: var(--space-s) }
  .pr-m-pc{ padding-right: var(--space-m) }
  .pr-l-pc{ padding-right: var(--space-l) }
}
/*padding bottom*/
.pb-5{ padding-bottom: calc(5px * var(--space-ratio)) }
.pb-8{ padding-bottom: calc(8px * var(--space-ratio)) }
.pb-10{ padding-bottom: calc(10px * var(--space-ratio)) }
.pb-15{ padding-bottom: calc(15px * var(--space-ratio)) }
.pb-20{ padding-bottom: calc(20px * var(--space-ratio)) }
.pb-25{ padding-bottom: calc(25px * var(--space-ratio)) }
.pb-30{ padding-bottom: calc(30px * var(--space-ratio)) }
.pb-35{ padding-bottom: calc(35px * var(--space-ratio)) }
.pb-40{ padding-bottom: calc(40px * var(--space-ratio)) }
.pb-45{ padding-bottom: calc(45px * var(--space-ratio)) }
.pb-50{ padding-bottom: calc(50px * var(--space-ratio)) }
.pb-60{ padding-bottom: calc(60px * var(--space-ratio)) }
.pb-70{ padding-bottom: calc(70px * var(--space-ratio)) }
.pb-80{ padding-bottom: calc(80px * var(--space-ratio)) }
.pb-90{ padding-bottom: calc(90px * var(--space-ratio)) }
.pb-100{ padding-bottom: calc(100px * var(--space-ratio)) }
.pb-110{ padding-bottom: calc(110px * var(--space-ratio)) }
.pb-120{ padding-bottom: calc(120px * var(--space-ratio)) }
.pb-130{ padding-bottom: calc(130px * var(--space-ratio)) }
.pb-140{ padding-bottom: calc(140px * var(--space-ratio)) }
.pb-150{ padding-bottom: calc(150px * var(--space-ratio)) }
.pb-160{ padding-bottom: calc(160px * var(--space-ratio)) }
.pb-170{ padding-bottom: calc(170px * var(--space-ratio)) }
.pb-180{ padding-bottom: calc(180px * var(--space-ratio)) }
.pb-190{ padding-bottom: calc(190px * var(--space-ratio)) }
.pb-200{ padding-bottom: calc(200px * var(--space-ratio)) }

.pb-1vw{ padding-bottom: 1vw }
.pb-2vw{ padding-bottom: 2vw }
.pb-3vw{ padding-bottom: 3vw }
.pb-4vw{ padding-bottom: 4vw }
.pb-5vw{ padding-bottom: 5vw }
.pb-6vw{ padding-bottom: 6vw }
.pb-7vw{ padding-bottom: 7vw }
.pb-8vw{ padding-bottom: 8vw }
.pb-9vw{ padding-bottom: 9vw }
.pb-10vw{ padding-bottom: 10vw }
.pb-11vw{ padding-bottom: 11vw }
.pb-12vw{ padding-bottom: 12vw }
.pb-13vw{ padding-bottom: 13vw }
.pb-14vw{ padding-bottom: 14vw }
.pb-15vw{ padding-bottom: 15vw }

@media screen and (max-width: 1023px){
  .pb-5-sp{ padding-bottom: 5px }
  .pb-8-sp{ padding-bottom: 8px }
  .pb-10-sp{ padding-bottom: 10px }
  .pb-15-sp{ padding-bottom: 15px }
  .pb-20-sp{ padding-bottom: 20px }
  .pb-25-sp{ padding-bottom: 25px }
  .pb-30-sp{ padding-bottom: 30px }
  .pb-35-sp{ padding-bottom: 35px }
  .pb-40-sp{ padding-bottom: 40px }
  .pb-45-sp{ padding-bottom: 45px }
  .pb-50-sp{ padding-bottom: 50px }
  .pb-60-sp{ padding-bottom: 60px }
  .pb-70-sp{ padding-bottom: 70px }
  .pb-80-sp{ padding-bottom: 80px }
  .pb-90-sp{ padding-bottom: 90px }
  .pb-100-sp{ padding-bottom: 100px }
  .pb-110-sp{ padding-bottom: 110px }
  .pb-120-sp{ padding-bottom: 120px }
  .pb-130-sp{ padding-bottom: 130px }
  .pb-140-sp{ padding-bottom: 140px }
  .pb-150-sp{ padding-bottom: 150px }
  .pb-160-sp{ padding-bottom: 160px }
  .pb-170-sp{ padding-bottom: 170px }
  .pb-180-sp{ padding-bottom: 180px }
  .pb-190-sp{ padding-bottom: 190px }
  .pb-200-sp{ padding-bottom: 200px }

  .pb-1vw-sp{ padding-bottom: 1vw }
  .pb-2vw-sp{ padding-bottom: 2vw }
  .pb-3vw-sp{ padding-bottom: 3vw }
  .pb-4vw-sp{ padding-bottom: 4vw }
  .pb-5vw-sp{ padding-bottom: 5vw }
  .pb-6vw-sp{ padding-bottom: 6vw }
  .pb-7vw-sp{ padding-bottom: 7vw }
  .pb-8vw-sp{ padding-bottom: 8vw }
  .pb-9vw-sp{ padding-bottom: 9vw }
  .pb-10vw-sp{ padding-bottom: 10vw }
  .pb-11vw-sp{ padding-bottom: 11vw }
  .pb-12vw-sp{ padding-bottom: 12vw }
  .pb-13vw-sp{ padding-bottom: 13vw }
  .pb-14vw-sp{ padding-bottom: 14vw }
  .pb-15vw-sp{ padding-bottom: 15vw }
}
@media screen and (min-width: 768px){
  .pb-5-tpc{ padding-bottom: 5px }
  .pb-8-tpc{ padding-bottom: 8px }
  .pb-10-tpc{ padding-bottom: 10px }
  .pb-15-tpc{ padding-bottom: 15px }
  .pb-20-tpc{ padding-bottom: 20px }
  .pb-25-tpc{ padding-bottom: 25px }
  .pb-30-tpc{ padding-bottom: 30px }
  .pb-35-tpc{ padding-bottom: 35px }
  .pb-40-tpc{ padding-bottom: 40px }
  .pb-45-tpc{ padding-bottom: 45px }
  .pb-50-tpc{ padding-bottom: 50px }
  .pb-60-tpc{ padding-bottom: 60px }
  .pb-70-tpc{ padding-bottom: 70px }
  .pb-80-tpc{ padding-bottom: 80px }
  .pb-90-tpc{ padding-bottom: 90px }
  .pb-100-tpc{ padding-bottom: 100px }
  .pb-110-tpc{ padding-bottom: 110px }
  .pb-120-tpc{ padding-bottom: 120px }
  .pb-130-tpc{ padding-bottom: 130px }
  .pb-140-tpc{ padding-bottom: 140px }
  .pb-150-tpc{ padding-bottom: 150px }
  .pb-160-tpc{ padding-bottom: 160px }
  .pb-170-tpc{ padding-bottom: 170px }
  .pb-180-tpc{ padding-bottom: 180px }
  .pb-190-tpc{ padding-bottom: 190px }
  .pb-200-tpc{ padding-bottom: 200px }

  .pb-1vw-tpc{ padding-bottom: 1vw }
  .pb-2vw-tpc{ padding-bottom: 2vw }
  .pb-3vw-tpc{ padding-bottom: 3vw }
  .pb-4vw-tpc{ padding-bottom: 4vw }
  .pb-5vw-tpc{ padding-bottom: 5vw }
  .pb-6vw-tpc{ padding-bottom: 6vw }
  .pb-7vw-tpc{ padding-bottom: 7vw }
  .pb-8vw-tpc{ padding-bottom: 8vw }
  .pb-9vw-tpc{ padding-bottom: 9vw }
  .pb-10vw-tpc{ padding-bottom: 10vw }
  .pb-11vw-tpc{ padding-bottom: 11vw }
  .pb-12vw-tpc{ padding-bottom: 12vw }
  .pb-13vw-tpc{ padding-bottom: 13vw }
  .pb-14vw-tpc{ padding-bottom: 14vw }
  .pb-15vw-tpc{ padding-bottom: 15vw }
}
@media screen and (min-width: 1024px){
  .pb-5-pc{ padding-bottom: 5px }
  .pb-8-pc{ padding-bottom: 8px }
  .pb-10-pc{ padding-bottom: 10px }
  .pb-15-pc{ padding-bottom: 15px }
  .pb-20-pc{ padding-bottom: 20px }
  .pb-25-pc{ padding-bottom: 25px }
  .pb-30-pc{ padding-bottom: 30px }
  .pb-35-pc{ padding-bottom: 35px }
  .pb-40-pc{ padding-bottom: 40px }
  .pb-45-pc{ padding-bottom: 45px }
  .pb-50-pc{ padding-bottom: 50px }
  .pb-60-pc{ padding-bottom: 60px }
  .pb-70-pc{ padding-bottom: 70px }
  .pb-80-pc{ padding-bottom: 80px }
  .pb-90-pc{ padding-bottom: 90px }
  .pb-100-pc{ padding-bottom: 100px }
  .pb-110-pc{ padding-bottom: 110px }
  .pb-120-pc{ padding-bottom: 120px }
  .pb-130-pc{ padding-bottom: 130px }
  .pb-140-pc{ padding-bottom: 140px }
  .pb-150-pc{ padding-bottom: 150px }
  .pb-160-pc{ padding-bottom: 160px }
  .pb-170-pc{ padding-bottom: 170px }
  .pb-180-pc{ padding-bottom: 180px }
  .pb-190-pc{ padding-bottom: 190px }
  .pb-200-pc{ padding-bottom: 200px }

  .pb-1vw-pc{ padding-bottom: 1vw }
  .pb-2vw-pc{ padding-bottom: 2vw }
  .pb-3vw-pc{ padding-bottom: 3vw }
  .pb-4vw-pc{ padding-bottom: 4vw }
  .pb-5vw-pc{ padding-bottom: 5vw }
  .pb-6vw-pc{ padding-bottom: 6vw }
  .pb-7vw-pc{ padding-bottom: 7vw }
  .pb-8vw-pc{ padding-bottom: 8vw }
  .pb-9vw-pc{ padding-bottom: 9vw }
  .pb-10vw-pc{ padding-bottom: 10vw }
  .pb-11vw-pc{ padding-bottom: 11vw }
  .pb-12vw-pc{ padding-bottom: 12vw }
  .pb-13vw-pc{ padding-bottom: 13vw }
  .pb-14vw-pc{ padding-bottom: 14vw }
  .pb-15vw-pc{ padding-bottom: 15vw }
}
/*padding left*/
.pl-5{ padding-left: calc(5px * var(--space-ratio)) }
.pl-8{ padding-left: calc(8px * var(--space-ratio)) }
.pl-10{ padding-left: calc(10px * var(--space-ratio)) }
.pl-15{ padding-left: calc(15px * var(--space-ratio)) }
.pl-20{ padding-left: calc(20px * var(--space-ratio)) }
.pl-25{ padding-left: calc(25px * var(--space-ratio)) }
.pl-30{ padding-left: calc(30px * var(--space-ratio)) }
.pl-35{ padding-left: calc(35px * var(--space-ratio)) }
.pl-40{ padding-left: calc(40px * var(--space-ratio)) }
.pl-45{ padding-left: calc(45px * var(--space-ratio)) }
.pl-50{ padding-left: calc(50px * var(--space-ratio)) }
.pl-60{ padding-left: calc(60px * var(--space-ratio)) }
.pl-70{ padding-left: calc(70px * var(--space-ratio)) }
.pl-80{ padding-left: calc(80px * var(--space-ratio)) }
.pl-90{ padding-left: calc(90px * var(--space-ratio)) }
.pl-100{ padding-left: calc(100px * var(--space-ratio)) }
.pl-110{ padding-left: calc(110px * var(--space-ratio)) }
.pl-120{ padding-left: calc(120px * var(--space-ratio)) }
.pl-130{ padding-left: calc(130px * var(--space-ratio)) }
.pl-140{ padding-left: calc(140px * var(--space-ratio)) }
.pl-150{ padding-left: calc(150px * var(--space-ratio)) }
.pl-160{ padding-left: calc(160px * var(--space-ratio)) }
.pl-170{ padding-left: calc(170px * var(--space-ratio)) }
.pl-180{ padding-left: calc(180px * var(--space-ratio)) }
.pl-190{ padding-left: calc(190px * var(--space-ratio)) }
.pl-200{ padding-left: calc(200px * var(--space-ratio)) }

.pl-1vw{ padding-left: 1vw }
.pl-2vw{ padding-left: 2vw }
.pl-3vw{ padding-left: 3vw }
.pl-4vw{ padding-left: 4vw }
.pl-5vw{ padding-left: 5vw }
.pl-6vw{ padding-left: 6vw }
.pl-7vw{ padding-left: 7vw }
.pl-8vw{ padding-left: 8vw }
.pl-9vw{ padding-left: 9vw }
.pl-10vw{ padding-left: 10vw }
.pl-11vw{ padding-left: 11vw }
.pl-12vw{ padding-left: 12vw }
.pl-13vw{ padding-left: 13vw }
.pl-14vw{ padding-left: 14vw }
.pl-15vw{ padding-left: 15vw }

.pl-s{ padding-left: var(--space-s) }
.pl-m{ padding-left: var(--space-m) }
.pl-l{ padding-left: var(--space-l) }

@media screen and (max-width: 1023px){
  .pl-5-sp{ padding-left: 5px }
  .pl-8-sp{ padding-left: 8px }
  .pl-10-sp{ padding-left: 10px }
  .pl-15-sp{ padding-left: 15px }
  .pl-20-sp{ padding-left: 20px }
  .pl-25-sp{ padding-left: 25px }
  .pl-30-sp{ padding-left: 30px }
  .pl-35-sp{ padding-left: 35px }
  .pl-40-sp{ padding-left: 40px }
  .pl-45-sp{ padding-left: 45px }
  .pl-50-sp{ padding-left: 50px }
  .pl-60-sp{ padding-left: 60px }
  .pl-70-sp{ padding-left: 70px }
  .pl-80-sp{ padding-left: 80px }
  .pl-90-sp{ padding-left: 90px }
  .pl-100-sp{ padding-left: 100px }
  .pl-110-sp{ padding-left: 110px }
  .pl-120-sp{ padding-left: 120px }
  .pl-130-sp{ padding-left: 130px }
  .pl-140-sp{ padding-left: 140px }
  .pl-150-sp{ padding-left: 150px }
  .pl-160-sp{ padding-left: 160px }
  .pl-170-sp{ padding-left: 170px }
  .pl-180-sp{ padding-left: 180px }
  .pl-190-sp{ padding-left: 190px }
  .pl-200-sp{ padding-left: 200px }

  .pl-1vw-sp{ padding-left: 1vw }
  .pl-2vw-sp{ padding-left: 2vw }
  .pl-3vw-sp{ padding-left: 3vw }
  .pl-4vw-sp{ padding-left: 4vw }
  .pl-5vw-sp{ padding-left: 5vw }
  .pl-6vw-sp{ padding-left: 6vw }
  .pl-7vw-sp{ padding-left: 7vw }
  .pl-8vw-sp{ padding-left: 8vw }
  .pl-9vw-sp{ padding-left: 9vw }
  .pl-10vw-sp{ padding-left: 10vw }
  .pl-11vw-sp{ padding-left: 11vw }
  .pl-12vw-sp{ padding-left: 12vw }
  .pl-13vw-sp{ padding-left: 13vw }
  .pl-14vw-sp{ padding-left: 14vw }
  .pl-15vw-sp{ padding-left: 15vw }

  .pl-s-sp{ padding-left: var(--space-s) }
  .pl-m-sp{ padding-left: var(--space-m) }
  .pl-l-sp{ padding-left: var(--space-l) }
}
@media screen and (min-width: 768px){
  .pl-5-tpc{ padding-left: 5px }
  .pl-8-tpc{ padding-left: 8px }
  .pl-10-tpc{ padding-left: 10px }
  .pl-15-tpc{ padding-left: 15px }
  .pl-20-tpc{ padding-left: 20px }
  .pl-25-tpc{ padding-left: 25px }
  .pl-30-tpc{ padding-left: 30px }
  .pl-35-tpc{ padding-left: 35px }
  .pl-40-tpc{ padding-left: 40px }
  .pl-45-tpc{ padding-left: 45px }
  .pl-50-tpc{ padding-left: 50px }
  .pl-60-tpc{ padding-left: 60px }
  .pl-70-tpc{ padding-left: 70px }
  .pl-80-tpc{ padding-left: 80px }
  .pl-90-tpc{ padding-left: 90px }
  .pl-100-tpc{ padding-left: 100px }
  .pl-110-tpc{ padding-left: 110px }
  .pl-120-tpc{ padding-left: 120px }
  .pl-130-tpc{ padding-left: 130px }
  .pl-140-tpc{ padding-left: 140px }
  .pl-150-tpc{ padding-left: 150px }
  .pl-160-tpc{ padding-left: 160px }
  .pl-170-tpc{ padding-left: 170px }
  .pl-180-tpc{ padding-left: 180px }
  .pl-190-tpc{ padding-left: 190px }
  .pl-200-tpc{ padding-left: 200px }

  .pl-1vw-tpc{ padding-left: 1vw }
  .pl-2vw-tpc{ padding-left: 2vw }
  .pl-3vw-tpc{ padding-left: 3vw }
  .pl-4vw-tpc{ padding-left: 4vw }
  .pl-5vw-tpc{ padding-left: 5vw }
  .pl-6vw-tpc{ padding-left: 6vw }
  .pl-7vw-tpc{ padding-left: 7vw }
  .pl-8vw-tpc{ padding-left: 8vw }
  .pl-9vw-tpc{ padding-left: 9vw }
  .pl-10vw-tpc{ padding-left: 10vw }
  .pl-11vw-tpc{ padding-left: 11vw }
  .pl-12vw-tpc{ padding-left: 12vw }
  .pl-13vw-tpc{ padding-left: 13vw }
  .pl-14vw-tpc{ padding-left: 14vw }
  .pl-15vw-tpc{ padding-left: 15vw }

  .pl-s-tpc{ padding-left: var(--space-s) }
  .pl-m-tpc{ padding-left: var(--space-m) }
  .pl-l-tpc{ padding-left: var(--space-l) }
}
@media screen and (min-width: 1024px){
  .pl-5-pc{ padding-left: 5px }
  .pl-8-pc{ padding-left: 8px }
  .pl-10-pc{ padding-left: 10px }
  .pl-15-pc{ padding-left: 15px }
  .pl-20-pc{ padding-left: 20px }
  .pl-25-pc{ padding-left: 25px }
  .pl-30-pc{ padding-left: 30px }
  .pl-35-pc{ padding-left: 35px }
  .pl-40-pc{ padding-left: 40px }
  .pl-45-pc{ padding-left: 45px }
  .pl-50-pc{ padding-left: 50px }
  .pl-60-pc{ padding-left: 60px }
  .pl-70-pc{ padding-left: 70px }
  .pl-80-pc{ padding-left: 80px }
  .pl-90-pc{ padding-left: 90px }
  .pl-100-pc{ padding-left: 100px }
  .pl-110-pc{ padding-left: 110px }
  .pl-120-pc{ padding-left: 120px }
  .pl-130-pc{ padding-left: 130px }
  .pl-140-pc{ padding-left: 140px }
  .pl-150-pc{ padding-left: 150px }
  .pl-160-pc{ padding-left: 160px }
  .pl-170-pc{ padding-left: 170px }
  .pl-180-pc{ padding-left: 180px }
  .pl-190-pc{ padding-left: 190px }
  .pl-200-pc{ padding-left: 200px }

  .pl-1vw-pc{ padding-left: 1vw }
  .pl-2vw-pc{ padding-left: 2vw }
  .pl-3vw-pc{ padding-left: 3vw }
  .pl-4vw-pc{ padding-left: 4vw }
  .pl-5vw-pc{ padding-left: 5vw }
  .pl-6vw-pc{ padding-left: 6vw }
  .pl-7vw-pc{ padding-left: 7vw }
  .pl-8vw-pc{ padding-left: 8vw }
  .pl-9vw-pc{ padding-left: 9vw }
  .pl-10vw-pc{ padding-left: 10vw }
  .pl-11vw-pc{ padding-left: 11vw }
  .pl-12vw-pc{ padding-left: 12vw }
  .pl-13vw-pc{ padding-left: 13vw }
  .pl-14vw-pc{ padding-left: 14vw }
  .pl-15vw-pc{ padding-left: 15vw }

  .pl-s-pc{ padding-left: var(--space-s) }
  .pl-m-pc{ padding-left: var(--space-m) }
  .pl-l-pc{ padding-left: var(--space-l) }
}

/*
   margin
--------------------------------------------------------------*/
.m-5{ margin: calc(5px * var(--space-ratio)) }
.m-8{ margin: calc(8px * var(--space-ratio)) }
.m-10{ margin: calc(10px * var(--space-ratio)) }
.m-15{ margin: calc(15px * var(--space-ratio)) }
.m-20{ margin: calc(20px * var(--space-ratio)) }
.m-25{ margin: calc(25px * var(--space-ratio)) }
.m-30{ margin: calc(30px * var(--space-ratio)) }
.m-35{ margin: calc(35px * var(--space-ratio)) }
.m-40{ margin: calc(40px * var(--space-ratio)) }
.m-45{ margin: calc(45px * var(--space-ratio)) }
.m-50{ margin: calc(50px * var(--space-ratio)) }
.m-60{ margin: calc(60px * var(--space-ratio)) }
.m-70{ margin: calc(70px * var(--space-ratio)) }
.m-80{ margin: calc(80px * var(--space-ratio)) }
.m-90{ margin: calc(90px * var(--space-ratio)) }
.m-100{ margin: calc(100px * var(--space-ratio)) }
.m-110{ margin: calc(110px * var(--space-ratio)) }
.m-120{ margin: calc(120px * var(--space-ratio)) }
.m-130{ margin: calc(130px * var(--space-ratio)) }
.m-140{ margin: calc(140px * var(--space-ratio)) }
.m-150{ margin: calc(150px * var(--space-ratio)) }
.m-160{ margin: calc(160px * var(--space-ratio)) }
.m-170{ margin: calc(170px * var(--space-ratio)) }
.m-180{ margin: calc(180px * var(--space-ratio)) }
.m-190{ margin: calc(190px * var(--space-ratio)) }
.m-200{ margin: calc(200px * var(--space-ratio)) }

.m-1vw{ margin: 1vw }
.m-2vw{ margin: 2vw }
.m-3vw{ margin: 3vw }
.m-4vw{ margin: 4vw }
.m-5vw{ margin: 5vw }
.m-6vw{ margin: 6vw }
.m-7vw{ margin: 7vw }
.m-8vw{ margin: 8vw }
.m-9vw{ margin: 9vw }
.m-10vw{ margin: 10vw }
.m-11vw{ margin: 11vw }
.m-12vw{ margin: 12vw }
.m-13vw{ margin: 13vw }
.m-14vw{ margin: 14vw }
.m-15vw{ margin: 15vw }

@media screen and (max-width: 1023px){
  .m-5-sp{ margin: 5px }
  .m-8-sp{ margin: 8px }
  .m-10-sp{ margin: 10px }
  .m-15-sp{ margin: 15px }
  .m-20-sp{ margin: 20px }
  .m-25-sp{ margin: 25px }
  .m-30-sp{ margin: 35px }
  .m-35-sp{ margin: 30px }
  .m-40-sp{ margin: 40px }
  .m-45-sp{ margin: 45px }
  .m-50-sp{ margin: 50px }
  .m-60-sp{ margin: 60px }
  .m-70-sp{ margin: 70px }
  .m-80-sp{ margin: 80px }
  .m-90-sp{ margin: 90px }
  .m-100-sp{ margin: 100px }
  .m-110-sp{ margin: 110px }
  .m-120-sp{ margin: 120px }
  .m-130-sp{ margin: 130px }
  .m-140-sp{ margin: 140px }
  .m-150-sp{ margin: 150px }
  .m-160-sp{ margin: 160px }
  .m-170-sp{ margin: 170px }
  .m-180-sp{ margin: 180px }
  .m-190-sp{ margin: 190px }
  .m-200-sp{ margin: 200px }

  .m-1vw-sp{ margin: 1vw }
  .m-2vw-sp{ margin: 2vw }
  .m-3vw-sp{ margin: 3vw }
  .m-4vw-sp{ margin: 4vw }
  .m-5vw-sp{ margin: 5vw }
  .m-6vw-sp{ margin: 6vw }
  .m-7vw-sp{ margin: 7vw }
  .m-8vw-sp{ margin: 8vw }
  .m-9vw-sp{ margin: 9vw }
  .m-10vw-sp{ margin: 10vw }
  .m-11vw-sp{ margin: 11vw }
  .m-12vw-sp{ margin: 12vw }
  .m-13vw-sp{ margin: 13vw }
  .m-14vw-sp{ margin: 14vw }
  .m-15vw-sp{ margin: 15vw }
}
@media screen and (min-width: 768px){
  .m-5-tpc{ margin: 5px }
  .m-8-tpc{ margin: 8px }
  .m-10-tpc{ margin: 10px }
  .m-15-tpc{ margin: 15px }
  .m-20-tpc{ margin: 20px }
  .m-25-tpc{ margin: 25px }
  .m-30-tpc{ margin: 30px }
  .m-35-tpc{ margin: 35px }
  .m-40-tpc{ margin: 40px }
  .m-45-tpc{ margin: 45px }
  .m-50-tpc{ margin: 50px }
  .m-60-tpc{ margin: 60px }
  .m-70-tpc{ margin: 70px }
  .m-80-tpc{ margin: 80px }
  .m-90-tpc{ margin: 90px }
  .m-100-tpc{ margin: 100px }
  .m-110-tpc{ margin: 110px }
  .m-120-tpc{ margin: 120px }
  .m-130-tpc{ margin: 130px }
  .m-140-tpc{ margin: 140px }
  .m-150-tpc{ margin: 150px }
  .m-160-tpc{ margin: 160px }
  .m-170-tpc{ margin: 170px }
  .m-180-tpc{ margin: 180px }
  .m-190-tpc{ margin: 190px }
  .m-200-tpc{ margin: 200px }

  .m-1vw-tpc{ margin: 1vw }
  .m-2vw-tpc{ margin: 2vw }
  .m-3vw-tpc{ margin: 3vw }
  .m-4vw-tpc{ margin: 4vw }
  .m-5vw-tpc{ margin: 5vw }
  .m-6vw-tpc{ margin: 6vw }
  .m-7vw-tpc{ margin: 7vw }
  .m-8vw-tpc{ margin: 8vw }
  .m-9vw-tpc{ margin: 9vw }
  .m-10vw-tpc{ margin: 10vw }
  .m-11vw-tpc{ margin: 11vw }
  .m-12vw-tpc{ margin: 12vw }
  .m-13vw-tpc{ margin: 13vw }
  .m-14vw-tpc{ margin: 14vw }
  .m-15vw-tpc{ margin: 15vw }
}
@media screen and (min-width: 1024px){
  .m-5-pc{ margin: 5px }
  .m-8-pc{ margin: 8px }
  .m-10-pc{ margin: 10px }
  .m-15-pc{ margin: 15px }
  .m-20-pc{ margin: 20px }
  .m-25-pc{ margin: 25px }
  .m-30-pc{ margin: 30px }
  .m-35-pc{ margin: 35px }
  .m-40-pc{ margin: 40px }
  .m-45-pc{ margin: 45px }
  .m-50-pc{ margin: 50px }
  .m-60-pc{ margin: 60px }
  .m-70-pc{ margin: 70px }
  .m-80-pc{ margin: 80px }
  .m-90-pc{ margin: 90px }
  .m-100-pc{ margin: 100px }
  .m-110-pc{ margin: 110px }
  .m-120-pc{ margin: 120px }
  .m-130-pc{ margin: 130px }
  .m-140-pc{ margin: 140px }
  .m-150-pc{ margin: 150px }
  .m-160-pc{ margin: 160px }
  .m-170-pc{ margin: 170px }
  .m-180-pc{ margin: 180px }
  .m-190-pc{ margin: 190px }
  .m-200-pc{ margin: 200px }

  .m-1vw-pc{ margin: 1vw }
  .m-2vw-pc{ margin: 2vw }
  .m-3vw-pc{ margin: 3vw }
  .m-4vw-pc{ margin: 4vw }
  .m-5vw-pc{ margin: 5vw }
  .m-6vw-pc{ margin: 6vw }
  .m-7vw-pc{ margin: 7vw }
  .m-8vw-pc{ margin: 8vw }
  .m-9vw-pc{ margin: 9vw }
  .m-10vw-pc{ margin: 10vw }
  .m-11vw-pc{ margin: 11vw }
  .m-12vw-pc{ margin: 12vw }
  .m-13vw-pc{ margin: 13vw }
  .m-14vw-pc{ margin: 14vw }
  .m-15vw-pc{ margin: 15vw }
}

/*margin top bottom*/
.mtb-5{ margin-top: calc(5px * var(--space-ratio)); margin-bottom: calc(5px * var(--space-ratio)) }
.mtb-8{ margin-top: calc(8px * var(--space-ratio)); margin-bottom: calc(8px * var(--space-ratio)) }
.mtb-10{ margin-top: calc(10px * var(--space-ratio)); margin-bottom: calc(10px * var(--space-ratio)) }
.mtb-15{ margin-top: calc(15px * var(--space-ratio)); margin-bottom: calc(15px * var(--space-ratio)) }
.mtb-20{ margin-top: calc(20px * var(--space-ratio)); margin-bottom: calc(20px * var(--space-ratio)) }
.mtb-25{ margin-top: calc(25px * var(--space-ratio)); margin-bottom: calc(25px * var(--space-ratio)) }
.mtb-30{ margin-top: calc(30px * var(--space-ratio)); margin-bottom: calc(30px * var(--space-ratio)) }
.mtb-35{ margin-top: calc(35px * var(--space-ratio)); margin-bottom: calc(35px * var(--space-ratio)) }
.mtb-40{ margin-top: calc(40px * var(--space-ratio)); margin-bottom: calc(40px * var(--space-ratio)) }
.mtb-45{ margin-top: calc(45px * var(--space-ratio)); margin-bottom: calc(45px * var(--space-ratio)) }
.mtb-50{ margin-top: calc(50px * var(--space-ratio)); margin-bottom: calc(50px * var(--space-ratio)) }
.mtb-60{ margin-top: calc(60px * var(--space-ratio)); margin-bottom: calc(60px * var(--space-ratio)) }
.mtb-70{ margin-top: calc(70px * var(--space-ratio)); margin-bottom: calc(70px * var(--space-ratio)) }
.mtb-80{ margin-top: calc(80px * var(--space-ratio)); margin-bottom: calc(80px * var(--space-ratio)) }
.mtb-90{ margin-top: calc(90px * var(--space-ratio)); margin-bottom: calc(90px * var(--space-ratio)) }
.mtb-100{ margin-top: calc(100px * var(--space-ratio)); margin-bottom: calc(100px * var(--space-ratio)) }
.mtb-110{ margin-top: calc(110px * var(--space-ratio)); margin-bottom: calc(110px * var(--space-ratio)) }
.mtb-120{ margin-top: calc(120px * var(--space-ratio)); margin-bottom: calc(120px * var(--space-ratio)) }
.mtb-130{ margin-top: calc(130px * var(--space-ratio)); margin-bottom: calc(130px * var(--space-ratio)) }
.mtb-140{ margin-top: calc(140px * var(--space-ratio)); margin-bottom: calc(140px * var(--space-ratio)) }
.mtb-150{ margin-top: calc(150px * var(--space-ratio)); margin-bottom: calc(150px * var(--space-ratio)) }
.mtb-160{ margin-top: calc(160px * var(--space-ratio)); margin-bottom: calc(160px * var(--space-ratio)) }
.mtb-170{ margin-top: calc(170px * var(--space-ratio)); margin-bottom: calc(170px * var(--space-ratio)) }
.mtb-180{ margin-top: calc(180px * var(--space-ratio)); margin-bottom: calc(180px * var(--space-ratio)) }
.mtb-190{ margin-top: calc(190px * var(--space-ratio)); margin-bottom: calc(190px * var(--space-ratio)) }
.mtb-200{ margin-top: calc(200px * var(--space-ratio)); margin-bottom: calc(200px * var(--space-ratio)) }

.mtb-1vw{ margin-top: 1vw; margin-bottom: 1vw }
.mtb-2vw{ margin-top: 2vw; margin-bottom: 2vw }
.mtb-3vw{ margin-top: 3vw; margin-bottom: 3vw }
.mtb-4vw{ margin-top: 4vw; margin-bottom: 4vw }
.mtb-5vw{ margin-top: 5vw; margin-bottom: 5vw }
.mtb-6vw{ margin-top: 6vw; margin-bottom: 6vw }
.mtb-7vw{ margin-top: 7vw; margin-bottom: 7vw }
.mtb-8vw{ margin-top: 8vw; margin-bottom: 8vw }
.mtb-9vw{ margin-top: 9vw; margin-bottom: 9vw }
.mtb-10vw{ margin-top: 10vw; margin-bottom: 10vw }
.mtb-11vw{ margin-top: 11vw; margin-bottom: 11vw }
.mtb-12vw{ margin-top: 12vw; margin-bottom: 12vw }
.mtb-13vw{ margin-top: 13vw; margin-bottom: 13vw }
.mtb-14vw{ margin-top: 14vw; margin-bottom: 14vw }
.mtb-15vw{ margin-top: 15vw; margin-bottom: 15vw }

@media screen and (max-width: 1023px){
  .mtb-5-sp{ margin-top: 5px; margin-bottom: 5px }
  .mtb-8-sp{ margin-top: 8px; margin-bottom: 8px }
  .mtb-10-sp{ margin-top: 10px; margin-bottom: 10px }
  .mtb-15-sp{ margin-top: 15px; margin-bottom: 15px }
  .mtb-20-sp{ margin-top: 20px; margin-bottom: 20px }
  .mtb-25-sp{ margin-top: 25px; margin-bottom: 25px }
  .mtb-30-sp{ margin-top: 30px; margin-bottom: 30px }
  .mtb-35-sp{ margin-top: 35px; margin-bottom: 35px }
  .mtb-40-sp{ margin-top: 40px; margin-bottom: 40px }
  .mtb-45-sp{ margin-top: 45px; margin-bottom: 45px }
  .mtb-50-sp{ margin-top: 50px; margin-bottom: 50px }
  .mtb-60-sp{ margin-top: 60px; margin-bottom: 60px }
  .mtb-70-sp{ margin-top: 70px; margin-bottom: 70px }
  .mtb-80-sp{ margin-top: 80px; margin-bottom: 80px }
  .mtb-90-sp{ margin-top: 90px; margin-bottom: 90px }
  .mtb-100-sp{ margin-top: 100px; margin-bottom: 100px }
  .mtb-110-sp{ margin-top: 110px; margin-bottom: 110px }
  .mtb-120-sp{ margin-top: 120px; margin-bottom: 120px }
  .mtb-130-sp{ margin-top: 130px; margin-bottom: 130px }
  .mtb-140-sp{ margin-top: 140px; margin-bottom: 140px }
  .mtb-150-sp{ margin-top: 150px; margin-bottom: 150px }
  .mtb-160-sp{ margin-top: 160px; margin-bottom: 160px }
  .mtb-170-sp{ margin-top: 170px; margin-bottom: 170px }
  .mtb-180-sp{ margin-top: 180px; margin-bottom: 180px }
  .mtb-190-sp{ margin-top: 190px; margin-bottom: 190px }
  .mtb-200-sp{ margin-top: 200px; margin-bottom: 200px }

  .mtb-1vw-sp{ margin-top: 1vw; margin-bottom: 1vw }
  .mtb-2vw-sp{ margin-top: 2vw; margin-bottom: 2vw }
  .mtb-3vw-sp{ margin-top: 3vw; margin-bottom: 3vw }
  .mtb-4vw-sp{ margin-top: 4vw; margin-bottom: 4vw }
  .mtb-5vw-sp{ margin-top: 5vw; margin-bottom: 5vw }
  .mtb-6vw-sp{ margin-top: 6vw; margin-bottom: 6vw }
  .mtb-7vw-sp{ margin-top: 7vw; margin-bottom: 7vw }
  .mtb-8vw-sp{ margin-top: 8vw; margin-bottom: 8vw }
  .mtb-9vw-sp{ margin-top: 9vw; margin-bottom: 9vw }
  .mtb-10vw-sp{ margin-top: 10vw; margin-bottom: 10vw }
  .mtb-11vw-sp{ margin-top: 11vw; margin-bottom: 11vw }
  .mtb-12vw-sp{ margin-top: 12vw; margin-bottom: 12vw }
  .mtb-13vw-sp{ margin-top: 13vw; margin-bottom: 13vw }
  .mtb-14vw-sp{ margin-top: 14vw; margin-bottom: 14vw }
  .mtb-15vw-sp{ margin-top: 15vw; margin-bottom: 15vw }
}
@media screen and (min-width: 768px){
  .mtb-5-tpc{ margin-top: 5px; margin-bottom: 5px }
  .mtb-8-tpc{ margin-top: 8px; margin-bottom: 8px }
  .mtb-10-tpc{ margin-top: 10px; margin-bottom: 10px }
  .mtb-15-tpc{ margin-top: 15px; margin-bottom: 15px }
  .mtb-20-tpc{ margin-top: 20px; margin-bottom: 20px }
  .mtb-25-tpc{ margin-top: 25px; margin-bottom: 25px }
  .mtb-30-tpc{ margin-top: 30px; margin-bottom: 30px }
  .mtb-35-tpc{ margin-top: 35px; margin-bottom: 35px }
  .mtb-40-tpc{ margin-top: 40px; margin-bottom: 40px }
  .mtb-45-tpc{ margin-top: 45px; margin-bottom: 45px }
  .mtb-50-tpc{ margin-top: 50px; margin-bottom: 50px }
  .mtb-60-tpc{ margin-top: 60px; margin-bottom: 60px }
  .mtb-70-tpc{ margin-top: 70px; margin-bottom: 70px }
  .mtb-80-tpc{ margin-top: 80px; margin-bottom: 80px }
  .mtb-90-tpc{ margin-top: 90px; margin-bottom: 90px }
  .mtb-100-tpc{ margin-top: 100px; margin-bottom: 100px }
  .mtb-110-tpc{ margin-top: 110px; margin-bottom: 110px }
  .mtb-120-tpc{ margin-top: 120px; margin-bottom: 120px }
  .mtb-130-tpc{ margin-top: 130px; margin-bottom: 130px }
  .mtb-140-tpc{ margin-top: 140px; margin-bottom: 140px }
  .mtb-150-tpc{ margin-top: 150px; margin-bottom: 150px }
  .mtb-160-tpc{ margin-top: 160px; margin-bottom: 160px }
  .mtb-170-tpc{ margin-top: 170px; margin-bottom: 170px }
  .mtb-180-tpc{ margin-top: 180px; margin-bottom: 180px }
  .mtb-190-tpc{ margin-top: 190px; margin-bottom: 190px }
  .mtb-200-tpc{ margin-top: 200px; margin-bottom: 200px }

  .mtb-1vw-tpc{ margin-top: 1vw; margin-bottom: 1vw }
  .mtb-2vw-tpc{ margin-top: 2vw; margin-bottom: 2vw }
  .mtb-3vw-tpc{ margin-top: 3vw; margin-bottom: 3vw }
  .mtb-4vw-tpc{ margin-top: 4vw; margin-bottom: 4vw }
  .mtb-5vw-tpc{ margin-top: 5vw; margin-bottom: 5vw }
  .mtb-6vw-tpc{ margin-top: 6vw; margin-bottom: 6vw }
  .mtb-7vw-tpc{ margin-top: 7vw; margin-bottom: 7vw }
  .mtb-8vw-tpc{ margin-top: 8vw; margin-bottom: 8vw }
  .mtb-9vw-tpc{ margin-top: 9vw; margin-bottom: 9vw }
  .mtb-10vw-tpc{ margin-top: 10vw; margin-bottom: 10vw }
  .mtb-11vw-tpc{ margin-top: 11vw; margin-bottom: 11vw }
  .mtb-12vw-tpc{ margin-top: 12vw; margin-bottom: 12vw }
  .mtb-13vw-tpc{ margin-top: 13vw; margin-bottom: 13vw }
  .mtb-14vw-tpc{ margin-top: 14vw; margin-bottom: 14vw }
  .mtb-15vw-tpc{ margin-top: 15vw; margin-bottom: 15vw }
}
@media screen and (min-width: 1024px){
  .mtb-5-pc{ margin-top: 5px; margin-bottom: 5px }
  .mtb-8-pc{ margin-top: 8px; margin-bottom: 8px }
  .mtb-10-pc{ margin-top: 10px; margin-bottom: 10px }
  .mtb-15-pc{ margin-top: 15px; margin-bottom: 15px }
  .mtb-20-pc{ margin-top: 20px; margin-bottom: 20px }
  .mtb-25-pc{ margin-top: 25px; margin-bottom: 25px }
  .mtb-30-pc{ margin-top: 30px; margin-bottom: 30px }
  .mtb-35-pc{ margin-top: 35px; margin-bottom: 35px }
  .mtb-40-pc{ margin-top: 40px; margin-bottom: 40px }
  .mtb-45-pc{ margin-top: 45px; margin-bottom: 45px }
  .mtb-50-pc{ margin-top: 50px; margin-bottom: 50px }
  .mtb-60-pc{ margin-top: 60px; margin-bottom: 60px }
  .mtb-70-pc{ margin-top: 70px; margin-bottom: 70px }
  .mtb-80-pc{ margin-top: 80px; margin-bottom: 80px }
  .mtb-90-pc{ margin-top: 90px; margin-bottom: 90px }
  .mtb-100-pc{ margin-top: 100px; margin-bottom: 100px }
  .mtb-110-pc{ margin-top: 110px; margin-bottom: 110px }
  .mtb-120-pc{ margin-top: 120px; margin-bottom: 120px }
  .mtb-130-pc{ margin-top: 130px; margin-bottom: 130px }
  .mtb-140-pc{ margin-top: 140px; margin-bottom: 140px }
  .mtb-150-pc{ margin-top: 150px; margin-bottom: 150px }
  .mtb-160-pc{ margin-top: 160px; margin-bottom: 160px }
  .mtb-170-pc{ margin-top: 170px; margin-bottom: 170px }
  .mtb-180-pc{ margin-top: 180px; margin-bottom: 180px }
  .mtb-190-pc{ margin-top: 190px; margin-bottom: 190px }
  .mtb-200-pc{ margin-top: 200px; margin-bottom: 200px }

  .mtb-1vw-pc{ margin-top: 1vw; margin-bottom: 1vw }
  .mtb-2vw-pc{ margin-top: 2vw; margin-bottom: 2vw }
  .mtb-3vw-pc{ margin-top: 3vw; margin-bottom: 3vw }
  .mtb-4vw-pc{ margin-top: 4vw; margin-bottom: 4vw }
  .mtb-5vw-pc{ margin-top: 5vw; margin-bottom: 5vw }
  .mtb-6vw-pc{ margin-top: 6vw; margin-bottom: 6vw }
  .mtb-7vw-pc{ margin-top: 7vw; margin-bottom: 7vw }
  .mtb-8vw-pc{ margin-top: 8vw; margin-bottom: 8vw }
  .mtb-9vw-pc{ margin-top: 9vw; margin-bottom: 9vw }
  .mtb-10vw-pc{ margin-top: 10vw; margin-bottom: 10vw }
  .mtb-11vw-pc{ margin-top: 11vw; margin-bottom: 11vw }
  .mtb-12vw-pc{ margin-top: 12vw; margin-bottom: 12vw }
  .mtb-13vw-pc{ margin-top: 13vw; margin-bottom: 13vw }
  .mtb-14vw-pc{ margin-top: 14vw; margin-bottom: 14vw }
  .mtb-15vw-pc{ margin-top: 15vw; margin-bottom: 15vw }
}

/*margin right left*/
.mrl-5{ margin-right: calc(5px * var(--space-ratio)); margin-left: calc(5px * var(--space-ratio)) }
.mrl-8{ margin-right: calc(8px * var(--space-ratio)); margin-left: calc(8px * var(--space-ratio)) }
.mrl-10{ margin-right: calc(10px * var(--space-ratio)); margin-left: calc(10px * var(--space-ratio)) }
.mrl-15{ margin-right: calc(15px * var(--space-ratio)); margin-left: calc(15px * var(--space-ratio)) }
.mrl-20{ margin-right: calc(20px * var(--space-ratio)); margin-left: calc(20px * var(--space-ratio)) }
.mrl-25{ margin-right: calc(25px * var(--space-ratio)); margin-left: calc(25px * var(--space-ratio)) }
.mrl-30{ margin-right: calc(30px * var(--space-ratio)); margin-left: calc(30px * var(--space-ratio)) }
.mrl-35{ margin-right: calc(30px * var(--space-ratio)); margin-left: calc(35px * var(--space-ratio)) }
.mrl-40{ margin-right: calc(40px * var(--space-ratio)); margin-left: calc(40px * var(--space-ratio)) }
.mrl-45{ margin-right: calc(45px * var(--space-ratio)); margin-left: calc(45px * var(--space-ratio)) }
.mrl-50{ margin-right: calc(50px * var(--space-ratio)); margin-left: calc(50px * var(--space-ratio)) }
.mrl-60{ margin-right: calc(60px * var(--space-ratio)); margin-left: calc(60px * var(--space-ratio)) }
.mrl-70{ margin-right: calc(70px * var(--space-ratio)); margin-left: calc(70px * var(--space-ratio)) }
.mrl-80{ margin-right: calc(80px * var(--space-ratio)); margin-left: calc(80px * var(--space-ratio)) }
.mrl-90{ margin-right: calc(90px * var(--space-ratio)); margin-left: calc(90px * var(--space-ratio)) }
.mrl-100{ margin-right: calc(100px * var(--space-ratio)); margin-left: calc(100px * var(--space-ratio)) }
.mrl-110{ margin-right: calc(110px * var(--space-ratio)); margin-left: calc(110px * var(--space-ratio)) }
.mrl-120{ margin-right: calc(120px * var(--space-ratio)); margin-left: calc(120px * var(--space-ratio)) }
.mrl-130{ margin-right: calc(130px * var(--space-ratio)); margin-left: calc(130px * var(--space-ratio)) }
.mrl-140{ margin-right: calc(140px * var(--space-ratio)); margin-left: calc(140px * var(--space-ratio)) }
.mrl-150{ margin-right: calc(150px * var(--space-ratio)); margin-left: calc(150px * var(--space-ratio)) }
.mrl-160{ margin-right: calc(160px * var(--space-ratio)); margin-left: calc(160px * var(--space-ratio)) }
.mrl-170{ margin-right: calc(170px * var(--space-ratio)); margin-left: calc(170px * var(--space-ratio)) }
.mrl-180{ margin-right: calc(180px * var(--space-ratio)); margin-left: calc(180px * var(--space-ratio)) }
.mrl-190{ margin-right: calc(190px * var(--space-ratio)); margin-left: calc(190px * var(--space-ratio)) }
.mrl-200{ margin-right: calc(200px * var(--space-ratio)); margin-left: calc(200px * var(--space-ratio)) }

.mrl-1vw{ margin-right: 1vw; margin-left: 1vw }
.mrl-2vw{ margin-right: 2vw; margin-left: 2vw }
.mrl-3vw{ margin-right: 3vw; margin-left: 3vw }
.mrl-4vw{ margin-right: 4vw; margin-left: 4vw }
.mrl-5vw{ margin-right: 5vw; margin-left: 5vw }
.mrl-6vw{ margin-right: 6vw; margin-left: 6vw }
.mrl-7vw{ margin-right: 7vw; margin-left: 7vw }
.mrl-8vw{ margin-right: 8vw; margin-left: 8vw }
.mrl-9vw{ margin-right: 9vw; margin-left: 9vw }
.mrl-10vw{ margin-right: 10vw; margin-left: 10vw }
.mrl-11vw{ margin-right: 11vw; margin-left: 11vw }
.mrl-12vw{ margin-right: 12vw; margin-left: 12vw }
.mrl-13vw{ margin-right: 13vw; margin-left: 13vw }
.mrl-14vw{ margin-right: 14vw; margin-left: 14vw }
.mrl-15vw{ margin-right: 15vw; margin-left: 15vw }

.mrl-s{ margin-right: var(--space-s); margin-left: var(--space-s) }
.mrl-m{ margin-right: var(--space-m); margin-left: var(--space-m) }
.mrl-l{ margin-right: var(--space-l); margin-left: var(--space-l) }

.mrl-auto{ margin-right: auto; margin-left: auto }

@media screen and (max-width: 1023px){
  .mrl-5-sp{ margin-right: 5px; margin-left: 5px }
  .mrl-8-sp{ margin-right: 8px; margin-left: 8px }
  .mrl-10-sp{ margin-right: 10px; margin-left: 10px }
  .mrl-15-sp{ margin-right: 15px; margin-left: 15px }
  .mrl-20-sp{ margin-right: 20px; margin-left: 20px }
  .mrl-25-sp{ margin-right: 25px; margin-left: 25px }
  .mrl-30-sp{ margin-right: 30px; margin-left: 30px }
  .mrl-35-sp{ margin-right: 35px; margin-left: 35px }
  .mrl-40-sp{ margin-right: 40px; margin-left: 40px }
  .mrl-45-sp{ margin-right: 45px; margin-left: 45px }
  .mrl-50-sp{ margin-right: 50px; margin-left: 50px }
  .mrl-60-sp{ margin-right: 60px; margin-left: 60px }
  .mrl-70-sp{ margin-right: 70px; margin-left: 70px }
  .mrl-80-sp{ margin-right: 80px; margin-left: 80px }
  .mrl-90-sp{ margin-right: 90px; margin-left: 90px }
  .mrl-100-sp{ margin-right: 100px; margin-left: 100px }
  .mrl-110-sp{ margin-right: 110px; margin-left: 110px }
  .mrl-120-sp{ margin-right: 120px; margin-left: 120px }
  .mrl-130-sp{ margin-right: 130px; margin-left: 130px }
  .mrl-140-sp{ margin-right: 140px; margin-left: 140px }
  .mrl-150-sp{ margin-right: 150px; margin-left: 150px }
  .mrl-160-sp{ margin-right: 160px; margin-left: 160px }
  .mrl-170-sp{ margin-right: 170px; margin-left: 170px }
  .mrl-180-sp{ margin-right: 180px; margin-left: 180px }
  .mrl-190-sp{ margin-right: 190px; margin-left: 190px }
  .mrl-200-sp{ margin-right: 200px; margin-left: 200px }

  .mrl-1vw-sp{ margin-right: 1vw; margin-left: 1vw }
  .mrl-2vw-sp{ margin-right: 2vw; margin-left: 2vw }
  .mrl-3vw-sp{ margin-right: 3vw; margin-left: 3vw }
  .mrl-4vw-sp{ margin-right: 4vw; margin-left: 4vw }
  .mrl-5vw-sp{ margin-right: 5vw; margin-left: 5vw }
  .mrl-6vw-sp{ margin-right: 6vw; margin-left: 6vw }
  .mrl-7vw-sp{ margin-right: 7vw; margin-left: 7vw }
  .mrl-8vw-sp{ margin-right: 8vw; margin-left: 8vw }
  .mrl-9vw-sp{ margin-right: 9vw; margin-left: 9vw }
  .mrl-10vw-sp{ margin-right: 10vw; margin-left: 10vw }
  .mrl-11vw-sp{ margin-right: 11vw; margin-left: 11vw }
  .mrl-12vw-sp{ margin-right: 12vw; margin-left: 12vw }
  .mrl-13vw-sp{ margin-right: 13vw; margin-left: 13vw }
  .mrl-14vw-sp{ margin-right: 14vw; margin-left: 14vw }
  .mrl-15vw-sp{ margin-right: 15vw; margin-left: 15vw }

  .mrl-s-sp{ margin-right: var(--space-s); margin-left: var(--space-s) }
  .mrl-m-sp{ margin-right: var(--space-m); margin-left: var(--space-m) }
  .mrl-l-sp{ margin-right: var(--space-l); margin-left: var(--space-l) }

  .mrl-auto-sp{ margin-right: auto; margin-left: auto }
}
@media screen and (min-width: 768px){
  .mrl-5-tpc{ margin-right: 5px; margin-left: 5px }
  .mrl-8-tpc{ margin-right: 8px; margin-left: 8px }
  .mrl-10-tpc{ margin-right: 10px; margin-left: 10px }
  .mrl-15-tpc{ margin-right: 15px; margin-left: 15px }
  .mrl-20-tpc{ margin-right: 20px; margin-left: 20px }
  .mrl-25-tpc{ margin-right: 25px; margin-left: 25px }
  .mrl-30-tpc{ margin-right: 30px; margin-left: 30px }
  .mrl-35-tpc{ margin-right: 35px; margin-left: 35px }
  .mrl-40-tpc{ margin-right: 40px; margin-left: 40px }
  .mrl-45-tpc{ margin-right: 45px; margin-left: 45px }
  .mrl-50-tpc{ margin-right: 50px; margin-left: 50px }
  .mrl-60-tpc{ margin-right: 60px; margin-left: 60px }
  .mrl-70-tpc{ margin-right: 70px; margin-left: 70px }
  .mrl-80-tpc{ margin-right: 80px; margin-left: 80px }
  .mrl-90-tpc{ margin-right: 90px; margin-left: 90px }
  .mrl-100-tpc{ margin-right: 100px; margin-left: 100px }
  .mrl-110-tpc{ margin-right: 110px; margin-left: 110px }
  .mrl-120-tpc{ margin-right: 120px; margin-left: 120px }
  .mrl-130-tpc{ margin-right: 130px; margin-left: 130px }
  .mrl-140-tpc{ margin-right: 140px; margin-left: 140px }
  .mrl-150-tpc{ margin-right: 150px; margin-left: 150px }
  .mrl-160-tpc{ margin-right: 160px; margin-left: 160px }
  .mrl-170-tpc{ margin-right: 170px; margin-left: 170px }
  .mrl-180-tpc{ margin-right: 180px; margin-left: 180px }
  .mrl-190-tpc{ margin-right: 190px; margin-left: 190px }
  .mrl-200-tpc{ margin-right: 200px; margin-left: 200px }

  .mrl-1vw-tpc{ margin-right: 1vw; margin-left: 1vw }
  .mrl-2vw-tpc{ margin-right: 2vw; margin-left: 2vw }
  .mrl-3vw-tpc{ margin-right: 3vw; margin-left: 3vw }
  .mrl-4vw-tpc{ margin-right: 4vw; margin-left: 4vw }
  .mrl-5vw-tpc{ margin-right: 5vw; margin-left: 5vw }
  .mrl-6vw-tpc{ margin-right: 6vw; margin-left: 6vw }
  .mrl-7vw-tpc{ margin-right: 7vw; margin-left: 7vw }
  .mrl-8vw-tpc{ margin-right: 8vw; margin-left: 8vw }
  .mrl-9vw-tpc{ margin-right: 9vw; margin-left: 9vw }
  .mrl-10vw-tpc{ margin-right: 10vw; margin-left: 10vw }
  .mrl-11vw-tpc{ margin-right: 11vw; margin-left: 11vw }
  .mrl-12vw-tpc{ margin-right: 12vw; margin-left: 12vw }
  .mrl-13vw-tpc{ margin-right: 13vw; margin-left: 13vw }
  .mrl-14vw-tpc{ margin-right: 14vw; margin-left: 14vw }
  .mrl-15vw-tpc{ margin-right: 15vw; margin-left: 15vw }

  .mrl-s-tpc{ margin-right: var(--space-s); margin-left: var(--space-s) }
  .mrl-m-tpc{ margin-right: var(--space-m); margin-left: var(--space-m) }
  .mrl-l-tpc{ margin-right: var(--space-l); margin-left: var(--space-l) }

  .mrl-auto-tpc{ margin-right: auto; margin-left: auto }
}
@media screen and (min-width: 1024px){
  .mrl-5-pc{ margin-right: 5px; margin-left: 5px }
  .mrl-8-pc{ margin-right: 8px; margin-left: 8px }
  .mrl-10-pc{ margin-right: 10px; margin-left: 10px }
  .mrl-15-pc{ margin-right: 15px; margin-left: 15px }
  .mrl-20-pc{ margin-right: 20px; margin-left: 20px }
  .mrl-25-pc{ margin-right: 25px; margin-left: 25px }
  .mrl-30-pc{ margin-right: 30px; margin-left: 30px }
  .mrl-35-pc{ margin-right: 35px; margin-left: 35px }
  .mrl-40-pc{ margin-right: 40px; margin-left: 40px }
  .mrl-45-pc{ margin-right: 45px; margin-left: 45px }
  .mrl-50-pc{ margin-right: 50px; margin-left: 50px }
  .mrl-60-pc{ margin-right: 60px; margin-left: 60px }
  .mrl-70-pc{ margin-right: 70px; margin-left: 70px }
  .mrl-80-pc{ margin-right: 80px; margin-left: 80px }
  .mrl-90-pc{ margin-right: 90px; margin-left: 90px }
  .mrl-100-pc{ margin-right: 100px; margin-left: 100px }
  .mrl-110-pc{ margin-right: 110px; margin-left: 110px }
  .mrl-120-pc{ margin-right: 120px; margin-left: 120px }
  .mrl-130-pc{ margin-right: 130px; margin-left: 130px }
  .mrl-140-pc{ margin-right: 140px; margin-left: 140px }
  .mrl-150-pc{ margin-right: 150px; margin-left: 150px }
  .mrl-160-pc{ margin-right: 160px; margin-left: 160px }
  .mrl-170-pc{ margin-right: 170px; margin-left: 170px }
  .mrl-180-pc{ margin-right: 180px; margin-left: 180px }
  .mrl-190-pc{ margin-right: 190px; margin-left: 190px }
  .mrl-200-pc{ margin-right: 200px; margin-left: 200px }

  .mrl-1vw-pc{ margin-right: 1vw; margin-left: 1vw }
  .mrl-2vw-pc{ margin-right: 2vw; margin-left: 2vw }
  .mrl-3vw-pc{ margin-right: 3vw; margin-left: 3vw }
  .mrl-4vw-pc{ margin-right: 4vw; margin-left: 4vw }
  .mrl-5vw-pc{ margin-right: 5vw; margin-left: 5vw }
  .mrl-6vw-pc{ margin-right: 6vw; margin-left: 6vw }
  .mrl-7vw-pc{ margin-right: 7vw; margin-left: 7vw }
  .mrl-8vw-pc{ margin-right: 8vw; margin-left: 8vw }
  .mrl-9vw-pc{ margin-right: 9vw; margin-left: 9vw }
  .mrl-10vw-pc{ margin-right: 10vw; margin-left: 10vw }
  .mrl-11vw-pc{ margin-right: 11vw; margin-left: 11vw }
  .mrl-12vw-pc{ margin-right: 12vw; margin-left: 12vw }
  .mrl-13vw-pc{ margin-right: 13vw; margin-left: 13vw }
  .mrl-14vw-pc{ margin-right: 14vw; margin-left: 14vw }
  .mrl-15vw-pc{ margin-right: 15vw; margin-left: 15vw }

  .mrl-s-pc{ margin-right: var(--space-s); margin-left: var(--space-s) }
  .mrl-m-pc{ margin-right: var(--space-m); margin-left: var(--space-m) }
  .mrl-l-pc{ margin-right: var(--space-l); margin-left: var(--space-l) }

  .mrl-auto-pc{ margin-right: auto; margin-left: auto }
}

/*margin top*/
.mt-5{ margin-top: calc(5px * var(--space-ratio)) }
.mt-8{ margin-top: calc(8px * var(--space-ratio)) }
.mt-10{ margin-top: calc(10px * var(--space-ratio)) }
.mt-15{ margin-top: calc(15px * var(--space-ratio)) }
.mt-20{ margin-top: calc(20px * var(--space-ratio)) }
.mt-25{ margin-top: calc(25px * var(--space-ratio)) }
.mt-30{ margin-top: calc(35px * var(--space-ratio)) }
.mt-35{ margin-top: calc(30px * var(--space-ratio)) }
.mt-40{ margin-top: calc(40px * var(--space-ratio)) }
.mt-45{ margin-top: calc(45px * var(--space-ratio)) }
.mt-50{ margin-top: calc(50px * var(--space-ratio)) }
.mt-60{ margin-top: calc(60px * var(--space-ratio)) }
.mt-70{ margin-top: calc(70px * var(--space-ratio)) }
.mt-80{ margin-top: calc(80px * var(--space-ratio)) }
.mt-90{ margin-top: calc(90px * var(--space-ratio)) }
.mt-100{ margin-top: calc(100px * var(--space-ratio)) }
.mt-110{ margin-top: calc(110px * var(--space-ratio)) }
.mt-120{ margin-top: calc(120px * var(--space-ratio)) }
.mt-130{ margin-top: calc(130px * var(--space-ratio)) }
.mt-140{ margin-top: calc(140px * var(--space-ratio)) }
.mt-150{ margin-top: calc(150px * var(--space-ratio)) }
.mt-160{ margin-top: calc(160px * var(--space-ratio)) }
.mt-170{ margin-top: calc(170px * var(--space-ratio)) }
.mt-180{ margin-top: calc(180px * var(--space-ratio)) }
.mt-190{ margin-top: calc(190px * var(--space-ratio)) }
.mt-200{ margin-top: calc(200px * var(--space-ratio)) }

.mt-1vw{ margin-top: 1vw }
.mt-2vw{ margin-top: 2vw }
.mt-3vw{ margin-top: 3vw }
.mt-4vw{ margin-top: 4vw }
.mt-5vw{ margin-top: 5vw }
.mt-6vw{ margin-top: 6vw }
.mt-7vw{ margin-top: 7vw }
.mt-8vw{ margin-top: 8vw }
.mt-9vw{ margin-top: 9vw }
.mt-10vw{ margin-top: 10vw }
.mt-11vw{ margin-top: 11vw }
.mt-12vw{ margin-top: 12vw }
.mt-13vw{ margin-top: 13vw }
.mt-14vw{ margin-top: 14vw }
.mt-15vw{ margin-top: 15vw }

@media screen and (max-width: 1023px){
  .mt-5-sp{ margin-top: 5px }
  .mt-8-sp{ margin-top: 8px }
  .mt-10-sp{ margin-top: 10px }
  .mt-15-sp{ margin-top: 15px }
  .mt-20-sp{ margin-top: 20px }
  .mt-25-sp{ margin-top: 25px }
  .mt-30-sp{ margin-top: 30px }
  .mt-35-sp{ margin-top: 35px }
  .mt-40-sp{ margin-top: 40px }
  .mt-45-sp{ margin-top: 45px }
  .mt-50-sp{ margin-top: 50px }
  .mt-60-sp{ margin-top: 60px }
  .mt-70-sp{ margin-top: 70px }
  .mt-80-sp{ margin-top: 80px }
  .mt-90-sp{ margin-top: 90px }
  .mt-100-sp{ margin-top: 100px }
  .mt-110-sp{ margin-top: 110px }
  .mt-120-sp{ margin-top: 120px }
  .mt-130-sp{ margin-top: 130px }
  .mt-140-sp{ margin-top: 140px }
  .mt-150-sp{ margin-top: 150px }
  .mt-160-sp{ margin-top: 160px }
  .mt-170-sp{ margin-top: 170px }
  .mt-180-sp{ margin-top: 180px }
  .mt-190-sp{ margin-top: 190px }
  .mt-200-sp{ margin-top: 200px }

  .mt-1vw-sp{ margin-top: 1vw }
  .mt-2vw-sp{ margin-top: 2vw }
  .mt-3vw-sp{ margin-top: 3vw }
  .mt-4vw-sp{ margin-top: 4vw }
  .mt-5vw-sp{ margin-top: 5vw }
  .mt-6vw-sp{ margin-top: 6vw }
  .mt-7vw-sp{ margin-top: 7vw }
  .mt-8vw-sp{ margin-top: 8vw }
  .mt-9vw-sp{ margin-top: 9vw }
  .mt-10vw-sp{ margin-top: 10vw }
  .mt-11vw-sp{ margin-top: 11vw }
  .mt-12vw-sp{ margin-top: 12vw }
  .mt-13vw-sp{ margin-top: 13vw }
  .mt-14vw-sp{ margin-top: 14vw }
  .mt-15vw-sp{ margin-top: 15vw }
}
@media screen and (min-width: 768px){
  .mt-5-tpc{ margin-top: 5px }
  .mt-8-tpc{ margin-top: 8px }
  .mt-10-tpc{ margin-top: 10px }
  .mt-15-tpc{ margin-top: 15px }
  .mt-20-tpc{ margin-top: 20px }
  .mt-25-tpc{ margin-top: 25px }
  .mt-30-tpc{ margin-top: 30px }
  .mt-35-tpc{ margin-top: 35px }
  .mt-40-tpc{ margin-top: 40px }
  .mt-45-tpc{ margin-top: 45px }
  .mt-50-tpc{ margin-top: 50px }
  .mt-60-tpc{ margin-top: 60px }
  .mt-70-tpc{ margin-top: 70px }
  .mt-80-tpc{ margin-top: 80px }
  .mt-90-tpc{ margin-top: 90px }
  .mt-100-tpc{ margin-top: 100px }
  .mt-110-tpc{ margin-top: 110px }
  .mt-120-tpc{ margin-top: 120px }
  .mt-130-tpc{ margin-top: 130px }
  .mt-140-tpc{ margin-top: 140px }
  .mt-150-tpc{ margin-top: 150px }
  .mt-160-tpc{ margin-top: 160px }
  .mt-170-tpc{ margin-top: 170px }
  .mt-180-tpc{ margin-top: 180px }
  .mt-190-tpc{ margin-top: 190px }
  .mt-200-tpc{ margin-top: 200px }

  .mt-1vw-tpc{ margin-top: 1vw }
  .mt-2vw-tpc{ margin-top: 2vw }
  .mt-3vw-tpc{ margin-top: 3vw }
  .mt-4vw-tpc{ margin-top: 4vw }
  .mt-5vw-tpc{ margin-top: 5vw }
  .mt-6vw-tpc{ margin-top: 6vw }
  .mt-7vw-tpc{ margin-top: 7vw }
  .mt-8vw-tpc{ margin-top: 8vw }
  .mt-9vw-tpc{ margin-top: 9vw }
  .mt-10vw-tpc{ margin-top: 10vw }
  .mt-11vw-tpc{ margin-top: 11vw }
  .mt-12vw-tpc{ margin-top: 12vw }
  .mt-13vw-tpc{ margin-top: 13vw }
  .mt-14vw-tpc{ margin-top: 14vw }
  .mt-15vw-tpc{ margin-top: 15vw }
}
@media screen and (min-width: 1024px){
  .mt-5-pc{ margin-top: 5px }
  .mt-8-pc{ margin-top: 8px }
  .mt-10-pc{ margin-top: 10px }
  .mt-15-pc{ margin-top: 15px }
  .mt-20-pc{ margin-top: 20px }
  .mt-25-pc{ margin-top: 25px }
  .mt-30-pc{ margin-top: 30px }
  .mt-35-pc{ margin-top: 35px }
  .mt-40-pc{ margin-top: 40px }
  .mt-45-pc{ margin-top: 45px }
  .mt-50-pc{ margin-top: 50px }
  .mt-60-pc{ margin-top: 60px }
  .mt-70-pc{ margin-top: 70px }
  .mt-80-pc{ margin-top: 80px }
  .mt-90-pc{ margin-top: 90px }
  .mt-100-pc{ margin-top: 100px }
  .mt-110-pc{ margin-top: 110px }
  .mt-120-pc{ margin-top: 120px }
  .mt-130-pc{ margin-top: 130px }
  .mt-140-pc{ margin-top: 140px }
  .mt-150-pc{ margin-top: 150px }
  .mt-160-pc{ margin-top: 160px }
  .mt-170-pc{ margin-top: 170px }
  .mt-180-pc{ margin-top: 180px }
  .mt-190-pc{ margin-top: 190px }
  .mt-200-pc{ margin-top: 200px }

  .mt-1vw-pc{ margin-top: 1vw }
  .mt-2vw-pc{ margin-top: 2vw }
  .mt-3vw-pc{ margin-top: 3vw }
  .mt-4vw-pc{ margin-top: 4vw }
  .mt-5vw-pc{ margin-top: 5vw }
  .mt-6vw-pc{ margin-top: 6vw }
  .mt-7vw-pc{ margin-top: 7vw }
  .mt-8vw-pc{ margin-top: 8vw }
  .mt-9vw-pc{ margin-top: 9vw }
  .mt-10vw-pc{ margin-top: 10vw }
  .mt-11vw-pc{ margin-top: 11vw }
  .mt-12vw-pc{ margin-top: 12vw }
  .mt-13vw-pc{ margin-top: 13vw }
  .mt-14vw-pc{ margin-top: 14vw }
  .mt-15vw-pc{ margin-top: 15vw }
}

/*margin right*/
.mr-5{ margin-right: calc(5px * var(--space-ratio)) }
.mr-8{ margin-right: calc(8px * var(--space-ratio)) }
.mr-10{ margin-right: calc(10px * var(--space-ratio)) }
.mr-15{ margin-right: calc(15px * var(--space-ratio)) }
.mr-20{ margin-right: calc(20px * var(--space-ratio)) }
.mr-25{ margin-right: calc(25px * var(--space-ratio)) }
.mr-30{ margin-right: calc(30px * var(--space-ratio)) }
.mr-35{ margin-right: calc(35px * var(--space-ratio)) }
.mr-40{ margin-right: calc(45px * var(--space-ratio)) }
.mr-45{ margin-right: calc(40px * var(--space-ratio)) }
.mr-50{ margin-right: calc(50px * var(--space-ratio)) }
.mr-60{ margin-right: calc(60px * var(--space-ratio)) }
.mr-70{ margin-right: calc(70px * var(--space-ratio)) }
.mr-80{ margin-right: calc(80px * var(--space-ratio)) }
.mr-90{ margin-right: calc(90px * var(--space-ratio)) }
.mr-100{ margin-right: calc(100px * var(--space-ratio)) }
.mr-110{ margin-right: calc(110px * var(--space-ratio)) }
.mr-120{ margin-right: calc(120px * var(--space-ratio)) }
.mr-130{ margin-right: calc(130px * var(--space-ratio)) }
.mr-140{ margin-right: calc(140px * var(--space-ratio)) }
.mr-150{ margin-right: calc(150px * var(--space-ratio)) }
.mr-160{ margin-right: calc(160px * var(--space-ratio)) }
.mr-170{ margin-right: calc(170px * var(--space-ratio)) }
.mr-180{ margin-right: calc(180px * var(--space-ratio)) }
.mr-190{ margin-right: calc(190px * var(--space-ratio)) }
.mr-200{ margin-right: calc(200px * var(--space-ratio)) }

.mr-1vw{ margin-right: 1vw }
.mr-2vw{ margin-right: 2vw }
.mr-3vw{ margin-right: 3vw }
.mr-4vw{ margin-right: 4vw }
.mr-5vw{ margin-right: 5vw }
.mr-6vw{ margin-right: 6vw }
.mr-7vw{ margin-right: 7vw }
.mr-8vw{ margin-right: 8vw }
.mr-9vw{ margin-right: 9vw }
.mr-10vw{ margin-right: 10vw }
.mr-11vw{ margin-right: 11vw }
.mr-12vw{ margin-right: 12vw }
.mr-13vw{ margin-right: 13vw }
.mr-14vw{ margin-right: 14vw }
.mr-15vw{ margin-right: 15vw }

.mr-s{ margin-right: var(--space-s) }
.mr-m{ margin-right: var(--space-m) }
.mr-l{ margin-right: var(--space-l) }

.mr-auto{ margin-right: auto }

@media screen and (max-width: 1023px){
  .mr-5-sp{ margin-right: 5px }
  .mr-8-sp{ margin-right: 8px }
  .mr-10-sp{ margin-right: 10px }
  .mr-15-sp{ margin-right: 15px }
  .mr-20-sp{ margin-right: 20px }
  .mr-25-sp{ margin-right: 25px }
  .mr-30-sp{ margin-right: 30px }
  .mr-35-sp{ margin-right: 35px }
  .mr-40-sp{ margin-right: 40px }
  .mr-45-sp{ margin-right: 45px }
  .mr-50-sp{ margin-right: 50px }
  .mr-60-sp{ margin-right: 60px }
  .mr-70-sp{ margin-right: 70px }
  .mr-80-sp{ margin-right: 80px }
  .mr-90-sp{ margin-right: 90px }
  .mr-100-sp{ margin-right: 100px }
  .mr-110-sp{ margin-right: 110px }
  .mr-120-sp{ margin-right: 120px }
  .mr-130-sp{ margin-right: 130px }
  .mr-140-sp{ margin-right: 140px }
  .mr-150-sp{ margin-right: 150px }
  .mr-160-sp{ margin-right: 160px }
  .mr-170-sp{ margin-right: 170px }
  .mr-180-sp{ margin-right: 180px }
  .mr-190-sp{ margin-right: 190px }
  .mr-200-sp{ margin-right: 200px }

  .mr-1vw-sp{ margin-right: 1vw }
  .mr-2vw-sp{ margin-right: 2vw }
  .mr-3vw-sp{ margin-right: 3vw }
  .mr-4vw-sp{ margin-right: 4vw }
  .mr-5vw-sp{ margin-right: 5vw }
  .mr-6vw-sp{ margin-right: 6vw }
  .mr-7vw-sp{ margin-right: 7vw }
  .mr-8vw-sp{ margin-right: 8vw }
  .mr-9vw-sp{ margin-right: 9vw }
  .mr-10vw-sp{ margin-right: 10vw }
  .mr-11vw-sp{ margin-right: 11vw }
  .mr-12vw-sp{ margin-right: 12vw }
  .mr-13vw-sp{ margin-right: 13vw }
  .mr-14vw-sp{ margin-right: 14vw }
  .mr-15vw-sp{ margin-right: 15vw }

  .mr-s-sp{ margin-right: var(--space-s) }
  .mr-m-sp{ margin-right: var(--space-m) }
  .mr-l-sp{ margin-right: var(--space-l) }

  .mr-auto-sp{ margin-right: auto }
}
@media screen and (min-width: 768px){
  .mr-5-tpc{ margin-right: 5px }
  .mr-8-tpc{ margin-right: 8px }
  .mr-10-tpc{ margin-right: 10px }
  .mr-15-tpc{ margin-right: 15px }
  .mr-20-tpc{ margin-right: 20px }
  .mr-25-tpc{ margin-right: 25px }
  .mr-30-tpc{ margin-right: 30px }
  .mr-35-tpc{ margin-right: 35px }
  .mr-40-tpc{ margin-right: 40px }
  .mr-45-tpc{ margin-right: 45px }
  .mr-50-tpc{ margin-right: 50px }
  .mr-60-tpc{ margin-right: 60px }
  .mr-70-tpc{ margin-right: 70px }
  .mr-80-tpc{ margin-right: 80px }
  .mr-90-tpc{ margin-right: 90px }
  .mr-100-tpc{ margin-right: 100px }
  .mr-110-tpc{ margin-right: 110px }
  .mr-120-tpc{ margin-right: 120px }
  .mr-130-tpc{ margin-right: 130px }
  .mr-140-tpc{ margin-right: 140px }
  .mr-150-tpc{ margin-right: 150px }
  .mr-160-tpc{ margin-right: 160px }
  .mr-170-tpc{ margin-right: 170px }
  .mr-180-tpc{ margin-right: 180px }
  .mr-190-tpc{ margin-right: 190px }
  .mr-200-tpc{ margin-right: 200px }

  .mr-1vw-tpc{ margin-right: 1vw }
  .mr-2vw-tpc{ margin-right: 2vw }
  .mr-3vw-tpc{ margin-right: 3vw }
  .mr-4vw-tpc{ margin-right: 4vw }
  .mr-5vw-tpc{ margin-right: 5vw }
  .mr-6vw-tpc{ margin-right: 6vw }
  .mr-7vw-tpc{ margin-right: 7vw }
  .mr-8vw-tpc{ margin-right: 8vw }
  .mr-9vw-tpc{ margin-right: 9vw }
  .mr-10vw-tpc{ margin-right: 10vw }
  .mr-11vw-tpc{ margin-right: 11vw }
  .mr-12vw-tpc{ margin-right: 12vw }
  .mr-13vw-tpc{ margin-right: 13vw }
  .mr-14vw-tpc{ margin-right: 14vw }
  .mr-15vw-tpc{ margin-right: 15vw }

  .mr-s-tpc{ margin-right: var(--space-s) }
  .mr-m-tpc{ margin-right: var(--space-m) }
  .mr-l-tpc{ margin-right: var(--space-l) }

  .mr-auto-tpc{ margin-right: auto }
}
@media screen and (min-width: 1024px){
  .mr-5-pc{ margin-right: 5px }
  .mr-8-pc{ margin-right: 8px }
  .mr-10-pc{ margin-right: 10px }
  .mr-15-pc{ margin-right: 15px }
  .mr-20-pc{ margin-right: 20px }
  .mr-25-pc{ margin-right: 25px }
  .mr-30-pc{ margin-right: 30px }
  .mr-35-pc{ margin-right: 35px }
  .mr-40-pc{ margin-right: 40px }
  .mr-45-pc{ margin-right: 45px }
  .mr-50-pc{ margin-right: 50px }
  .mr-60-pc{ margin-right: 60px }
  .mr-70-pc{ margin-right: 70px }
  .mr-80-pc{ margin-right: 80px }
  .mr-90-pc{ margin-right: 90px }
  .mr-100-pc{ margin-right: 100px }
  .mr-110-pc{ margin-right: 110px }
  .mr-120-pc{ margin-right: 120px }
  .mr-130-pc{ margin-right: 130px }
  .mr-140-pc{ margin-right: 140px }
  .mr-150-pc{ margin-right: 150px }
  .mr-160-pc{ margin-right: 160px }
  .mr-170-pc{ margin-right: 170px }
  .mr-180-pc{ margin-right: 180px }
  .mr-190-pc{ margin-right: 190px }
  .mr-200-pc{ margin-right: 200px }

  .mr-1vw-pc{ margin-right: 1vw }
  .mr-2vw-pc{ margin-right: 2vw }
  .mr-3vw-pc{ margin-right: 3vw }
  .mr-4vw-pc{ margin-right: 4vw }
  .mr-5vw-pc{ margin-right: 5vw }
  .mr-6vw-pc{ margin-right: 6vw }
  .mr-7vw-pc{ margin-right: 7vw }
  .mr-8vw-pc{ margin-right: 8vw }
  .mr-9vw-pc{ margin-right: 9vw }
  .mr-10vw-pc{ margin-right: 10vw }
  .mr-11vw-pc{ margin-right: 11vw }
  .mr-12vw-pc{ margin-right: 12vw }
  .mr-13vw-pc{ margin-right: 13vw }
  .mr-14vw-pc{ margin-right: 14vw }
  .mr-15vw-pc{ margin-right: 15vw }

  .mr-s-pc{ margin-right: var(--space-s) }
  .mr-m-pc{ margin-right: var(--space-m) }
  .mr-l-pc{ margin-right: var(--space-l) }

  .mr-auto-pc{ margin-right: auto }
}

/*margin bottom*/
.mb-5{ margin-bottom: calc(5px * var(--space-ratio)) }
.mb-8{ margin-bottom: calc(8px * var(--space-ratio)) }
.mb-10{ margin-bottom: calc(10px * var(--space-ratio)) }
.mb-15{ margin-bottom: calc(15px * var(--space-ratio)) }
.mb-20{ margin-bottom: calc(20px * var(--space-ratio)) }
.mb-25{ margin-bottom: calc(25px * var(--space-ratio)) }
.mb-30{ margin-bottom: calc(30px * var(--space-ratio)) }
.mb-35{ margin-bottom: calc(35px * var(--space-ratio)) }
.mb-40{ margin-bottom: calc(40px * var(--space-ratio)) }
.mb-45{ margin-bottom: calc(45px * var(--space-ratio)) }
.mb-50{ margin-bottom: calc(50px * var(--space-ratio)) }
.mb-60{ margin-bottom: calc(60px * var(--space-ratio)) }
.mb-70{ margin-bottom: calc(70px * var(--space-ratio)) }
.mb-80{ margin-bottom: calc(80px * var(--space-ratio)) }
.mb-90{ margin-bottom: calc(90px * var(--space-ratio)) }
.mb-100{ margin-bottom: calc(100px * var(--space-ratio)) }
.mb-110{ margin-bottom: calc(110px * var(--space-ratio)) }
.mb-120{ margin-bottom: calc(120px * var(--space-ratio)) }
.mb-130{ margin-bottom: calc(130px * var(--space-ratio)) }
.mb-140{ margin-bottom: calc(140px * var(--space-ratio)) }
.mb-150{ margin-bottom: calc(150px * var(--space-ratio)) }
.mb-160{ margin-bottom: calc(160px * var(--space-ratio)) }
.mb-170{ margin-bottom: calc(170px * var(--space-ratio)) }
.mb-180{ margin-bottom: calc(180px * var(--space-ratio)) }
.mb-190{ margin-bottom: calc(190px * var(--space-ratio)) }
.mb-200{ margin-bottom: calc(200px * var(--space-ratio)) }

.mb-1vw{ margin-bottom: 1vw }
.mb-2vw{ margin-bottom: 2vw }
.mb-3vw{ margin-bottom: 3vw }
.mb-4vw{ margin-bottom: 4vw }
.mb-5vw{ margin-bottom: 5vw }
.mb-6vw{ margin-bottom: 6vw }
.mb-7vw{ margin-bottom: 7vw }
.mb-8vw{ margin-bottom: 8vw }
.mb-9vw{ margin-bottom: 9vw }
.mb-10vw{ margin-bottom: 10vw }
.mb-11vw{ margin-bottom: 11vw }
.mb-12vw{ margin-bottom: 12vw }
.mb-13vw{ margin-bottom: 13vw }
.mb-14vw{ margin-bottom: 14vw }
.mb-15vw{ margin-bottom: 15vw }

@media screen and (max-width: 1023px){
  .mb-5-sp{ margin-bottom: 5px }
  .mb-8-sp{ margin-bottom: 8px }
  .mb-10-sp{ margin-bottom: 10px }
  .mb-15-sp{ margin-bottom: 15px }
  .mb-20-sp{ margin-bottom: 20px }
  .mb-25-sp{ margin-bottom: 25px }
  .mb-30-sp{ margin-bottom: 30px }
  .mb-35-sp{ margin-bottom: 35px }
  .mb-40-sp{ margin-bottom: 40px }
  .mb-45-sp{ margin-bottom: 45px }
  .mb-50-sp{ margin-bottom: 50px }
  .mb-60-sp{ margin-bottom: 60px }
  .mb-70-sp{ margin-bottom: 70px }
  .mb-80-sp{ margin-bottom: 80px }
  .mb-90-sp{ margin-bottom: 90px }
  .mb-100-sp{ margin-bottom: 100px }
  .mb-110-sp{ margin-bottom: 110px }
  .mb-120-sp{ margin-bottom: 120px }
  .mb-130-sp{ margin-bottom: 130px }
  .mb-140-sp{ margin-bottom: 140px }
  .mb-150-sp{ margin-bottom: 150px }
  .mb-160-sp{ margin-bottom: 160px }
  .mb-170-sp{ margin-bottom: 170px }
  .mb-180-sp{ margin-bottom: 180px }
  .mb-190-sp{ margin-bottom: 190px }
  .mb-200-sp{ margin-bottom: 200px }

  .mb-1vw-sp{ margin-bottom: 1vw }
  .mb-2vw-sp{ margin-bottom: 2vw }
  .mb-3vw-sp{ margin-bottom: 3vw }
  .mb-4vw-sp{ margin-bottom: 4vw }
  .mb-5vw-sp{ margin-bottom: 5vw }
  .mb-6vw-sp{ margin-bottom: 6vw }
  .mb-7vw-sp{ margin-bottom: 7vw }
  .mb-8vw-sp{ margin-bottom: 8vw }
  .mb-9vw-sp{ margin-bottom: 9vw }
  .mb-10vw-sp{ margin-bottom: 10vw }
  .mb-11vw-sp{ margin-bottom: 11vw }
  .mb-12vw-sp{ margin-bottom: 12vw }
  .mb-13vw-sp{ margin-bottom: 13vw }
  .mb-14vw-sp{ margin-bottom: 14vw }
  .mb-15vw-sp{ margin-bottom: 15vw }
}
@media screen and (min-width: 768px){
  .mb-5-tpc{ margin-bottom: 5px }
  .mb-8-tpc{ margin-bottom: 8px }
  .mb-10-tpc{ margin-bottom: 10px }
  .mb-15-tpc{ margin-bottom: 15px }
  .mb-20-tpc{ margin-bottom: 20px }
  .mb-25-tpc{ margin-bottom: 25px }
  .mb-30-tpc{ margin-bottom: 30px }
  .mb-35-tpc{ margin-bottom: 35px }
  .mb-40-tpc{ margin-bottom: 40px }
  .mb-45-tpc{ margin-bottom: 45px }
  .mb-50-tpc{ margin-bottom: 50px }
  .mb-60-tpc{ margin-bottom: 60px }
  .mb-70-tpc{ margin-bottom: 70px }
  .mb-80-tpc{ margin-bottom: 80px }
  .mb-90-tpc{ margin-bottom: 90px }
  .mb-100-tpc{ margin-bottom: 100px }
  .mb-110-tpc{ margin-bottom: 110px }
  .mb-120-tpc{ margin-bottom: 120px }
  .mb-130-tpc{ margin-bottom: 130px }
  .mb-140-tpc{ margin-bottom: 140px }
  .mb-150-tpc{ margin-bottom: 150px }
  .mb-160-tpc{ margin-bottom: 160px }
  .mb-170-tpc{ margin-bottom: 170px }
  .mb-180-tpc{ margin-bottom: 180px }
  .mb-190-tpc{ margin-bottom: 190px }
  .mb-200-tpc{ margin-bottom: 200px }

  .mb-1vw-tpc{ margin-bottom: 1vw }
  .mb-2vw-tpc{ margin-bottom: 2vw }
  .mb-3vw-tpc{ margin-bottom: 3vw }
  .mb-4vw-tpc{ margin-bottom: 4vw }
  .mb-5vw-tpc{ margin-bottom: 5vw }
  .mb-6vw-tpc{ margin-bottom: 6vw }
  .mb-7vw-tpc{ margin-bottom: 7vw }
  .mb-8vw-tpc{ margin-bottom: 8vw }
  .mb-9vw-tpc{ margin-bottom: 9vw }
  .mb-10vw-tpc{ margin-bottom: 10vw }
  .mb-11vw-tpc{ margin-bottom: 11vw }
  .mb-12vw-tpc{ margin-bottom: 12vw }
  .mb-13vw-tpc{ margin-bottom: 13vw }
  .mb-14vw-tpc{ margin-bottom: 14vw }
  .mb-15vw-tpc{ margin-bottom: 15vw }
}
@media screen and (min-width: 1024px){
  .mb-5-pc{ margin-bottom: 5px }
  .mb-8-pc{ margin-bottom: 8px }
  .mb-10-pc{ margin-bottom: 10px }
  .mb-15-pc{ margin-bottom: 15px }
  .mb-20-pc{ margin-bottom: 20px }
  .mb-25-pc{ margin-bottom: 25px }
  .mb-30-pc{ margin-bottom: 30px }
  .mb-35-pc{ margin-bottom: 35px }
  .mb-40-pc{ margin-bottom: 40px }
  .mb-45-pc{ margin-bottom: 45px }
  .mb-50-pc{ margin-bottom: 50px }
  .mb-60-pc{ margin-bottom: 60px }
  .mb-70-pc{ margin-bottom: 70px }
  .mb-80-pc{ margin-bottom: 80px }
  .mb-90-pc{ margin-bottom: 90px }
  .mb-100-pc{ margin-bottom: 100px }
  .mb-110-pc{ margin-bottom: 110px }
  .mb-120-pc{ margin-bottom: 120px }
  .mb-130-pc{ margin-bottom: 130px }
  .mb-140-pc{ margin-bottom: 140px }
  .mb-150-pc{ margin-bottom: 150px }
  .mb-160-pc{ margin-bottom: 160px }
  .mb-170-pc{ margin-bottom: 170px }
  .mb-180-pc{ margin-bottom: 180px }
  .mb-190-pc{ margin-bottom: 190px }
  .mb-200-pc{ margin-bottom: 200px }

  .mb-1vw-pc{ margin-bottom: 1vw }
  .mb-2vw-pc{ margin-bottom: 2vw }
  .mb-3vw-pc{ margin-bottom: 3vw }
  .mb-4vw-pc{ margin-bottom: 4vw }
  .mb-5vw-pc{ margin-bottom: 5vw }
  .mb-6vw-pc{ margin-bottom: 6vw }
  .mb-7vw-pc{ margin-bottom: 7vw }
  .mb-8vw-pc{ margin-bottom: 8vw }
  .mb-9vw-pc{ margin-bottom: 9vw }
  .mb-10vw-pc{ margin-bottom: 10vw }
  .mb-11vw-pc{ margin-bottom: 11vw }
  .mb-12vw-pc{ margin-bottom: 12vw }
  .mb-13vw-pc{ margin-bottom: 13vw }
  .mb-14vw-pc{ margin-bottom: 14vw }
  .mb-15vw-pc{ margin-bottom: 15vw }
}
/*margin left*/
.ml-5{ margin-left: calc(5px * var(--space-ratio)) }
.ml-8{ margin-left: calc(8px * var(--space-ratio)) }
.ml-10{ margin-left: calc(10px * var(--space-ratio)) }
.ml-15{ margin-left: calc(15px * var(--space-ratio)) }
.ml-20{ margin-left: calc(20px * var(--space-ratio)) }
.ml-25{ margin-left: calc(25px * var(--space-ratio)) }
.ml-30{ margin-left: calc(30px * var(--space-ratio)) }
.ml-35{ margin-left: calc(35px * var(--space-ratio)) }
.ml-40{ margin-left: calc(40px * var(--space-ratio)) }
.ml-45{ margin-left: calc(45px * var(--space-ratio)) }
.ml-50{ margin-left: calc(50px * var(--space-ratio)) }
.ml-60{ margin-left: calc(60px * var(--space-ratio)) }
.ml-70{ margin-left: calc(70px * var(--space-ratio)) }
.ml-80{ margin-left: calc(80px * var(--space-ratio)) }
.ml-90{ margin-left: calc(90px * var(--space-ratio)) }
.ml-100{ margin-left: calc(100px * var(--space-ratio)) }
.ml-110{ margin-left: calc(110px * var(--space-ratio)) }
.ml-120{ margin-left: calc(120px * var(--space-ratio)) }
.ml-130{ margin-left: calc(130px * var(--space-ratio)) }
.ml-140{ margin-left: calc(140px * var(--space-ratio)) }
.ml-150{ margin-left: calc(150px * var(--space-ratio)) }
.ml-160{ margin-left: calc(160px * var(--space-ratio)) }
.ml-170{ margin-left: calc(170px * var(--space-ratio)) }
.ml-180{ margin-left: calc(180px * var(--space-ratio)) }
.ml-190{ margin-left: calc(190px * var(--space-ratio)) }
.ml-200{ margin-left: calc(200px * var(--space-ratio)) }

.ml-1vw{ margin-left: 1vw }
.ml-2vw{ margin-left: 2vw }
.ml-3vw{ margin-left: 3vw }
.ml-4vw{ margin-left: 4vw }
.ml-5vw{ margin-left: 5vw }
.ml-6vw{ margin-left: 6vw }
.ml-7vw{ margin-left: 7vw }
.ml-8vw{ margin-left: 8vw }
.ml-9vw{ margin-left: 9vw }
.ml-10vw{ margin-left: 10vw }
.ml-11vw{ margin-left: 11vw }
.ml-12vw{ margin-left: 12vw }
.ml-13vw{ margin-left: 13vw }
.ml-14vw{ margin-left: 14vw }
.ml-15vw{ margin-left: 15vw }

.ml-s{ margin-left: var(--space-s) }
.ml-m{ margin-left: var(--space-m) }
.ml-l{ margin-left: var(--space-l) }

.ml-auto{ margin-left: auto }

@media screen and (max-width: 1023px){
  .ml-5-sp{ margin-left: 5px }
  .ml-8-sp{ margin-left: 8px }
  .ml-10-sp{ margin-left: 10px }
  .ml-15-sp{ margin-left: 15px }
  .ml-20-sp{ margin-left: 20px }
  .ml-25-sp{ margin-left: 25px }
  .ml-30-sp{ margin-left: 30px }
  .ml-35-sp{ margin-left: 35px }
  .ml-40-sp{ margin-left: 40px }
  .ml-45-sp{ margin-left: 45px }
  .ml-50-sp{ margin-left: 50px }
  .ml-60-sp{ margin-left: 60px }
  .ml-70-sp{ margin-left: 70px }
  .ml-80-sp{ margin-left: 80px }
  .ml-90-sp{ margin-left: 90px }
  .ml-100-sp{ margin-left: 100px }
  .ml-110-sp{ margin-left: 110px }
  .ml-120-sp{ margin-left: 120px }
  .ml-130-sp{ margin-left: 130px }
  .ml-140-sp{ margin-left: 140px }
  .ml-150-sp{ margin-left: 150px }
  .ml-160-sp{ margin-left: 160px }
  .ml-170-sp{ margin-left: 170px }
  .ml-180-sp{ margin-left: 180px }
  .ml-190-sp{ margin-left: 190px }
  .ml-200-sp{ margin-left: 200px }

  .ml-1vw-sp{ margin-left: 1vw }
  .ml-2vw-sp{ margin-left: 2vw }
  .ml-3vw-sp{ margin-left: 3vw }
  .ml-4vw-sp{ margin-left: 4vw }
  .ml-5vw-sp{ margin-left: 5vw }
  .ml-6vw-sp{ margin-left: 6vw }
  .ml-7vw-sp{ margin-left: 7vw }
  .ml-8vw-sp{ margin-left: 8vw }
  .ml-9vw-sp{ margin-left: 9vw }
  .ml-10vw-sp{ margin-left: 10vw }
  .ml-11vw-sp{ margin-left: 11vw }
  .ml-12vw-sp{ margin-left: 12vw }
  .ml-13vw-sp{ margin-left: 13vw }
  .ml-14vw-sp{ margin-left: 14vw }
  .ml-15vw-sp{ margin-left: 15vw }

  .ml-s-sp{ margin-left: var(--space-s) }
  .ml-m-sp{ margin-left: var(--space-m) }
  .ml-l-sp{ margin-left: var(--space-l) }

  .ml-auto-sp{ margin-left: auto }
}
@media screen and (min-width: 768px){
  .ml-5-tpc{ margin-left: 5px }
  .ml-8-tpc{ margin-left: 8px }
  .ml-10-tpc{ margin-left: 10px }
  .ml-15-tpc{ margin-left: 15px }
  .ml-20-tpc{ margin-left: 20px }
  .ml-25-tpc{ margin-left: 25px }
  .ml-30-tpc{ margin-left: 30px }
  .ml-35-tpc{ margin-left: 35px }
  .ml-40-tpc{ margin-left: 40px }
  .ml-45-tpc{ margin-left: 45px }
  .ml-50-tpc{ margin-left: 50px }
  .ml-60-tpc{ margin-left: 60px }
  .ml-70-tpc{ margin-left: 70px }
  .ml-80-tpc{ margin-left: 80px }
  .ml-90-tpc{ margin-left: 90px }
  .ml-100-tpc{ margin-left: 100px }
  .ml-110-tpc{ margin-left: 110px }
  .ml-120-tpc{ margin-left: 120px }
  .ml-130-tpc{ margin-left: 130px }
  .ml-140-tpc{ margin-left: 140px }
  .ml-150-tpc{ margin-left: 150px }
  .ml-160-tpc{ margin-left: 160px }
  .ml-170-tpc{ margin-left: 170px }
  .ml-180-tpc{ margin-left: 180px }
  .ml-190-tpc{ margin-left: 190px }
  .ml-200-tpc{ margin-left: 200px }

  .ml-1vw-tpc{ margin-left: 1vw }
  .ml-2vw-tpc{ margin-left: 2vw }
  .ml-3vw-tpc{ margin-left: 3vw }
  .ml-4vw-tpc{ margin-left: 4vw }
  .ml-5vw-tpc{ margin-left: 5vw }
  .ml-6vw-tpc{ margin-left: 6vw }
  .ml-7vw-tpc{ margin-left: 7vw }
  .ml-8vw-tpc{ margin-left: 8vw }
  .ml-9vw-tpc{ margin-left: 9vw }
  .ml-10vw-tpc{ margin-left: 10vw }
  .ml-11vw-tpc{ margin-left: 11vw }
  .ml-12vw-tpc{ margin-left: 12vw }
  .ml-13vw-tpc{ margin-left: 13vw }
  .ml-14vw-tpc{ margin-left: 14vw }
  .ml-15vw-tpc{ margin-left: 15vw }

  .ml-s-tpc{ margin-left: var(--space-s) }
  .ml-m-tpc{ margin-left: var(--space-m) }
  .ml-l-tpc{ margin-left: var(--space-l) }

  .ml-auto-tpc{ margin-left: auto }
}
@media screen and (min-width: 1024px){
  .ml-5-pc{ margin-left: 5px }
  .ml-8-pc{ margin-left: 8px }
  .ml-10-pc{ margin-left: 10px }
  .ml-15-pc{ margin-left: 15px }
  .ml-20-pc{ margin-left: 20px }
  .ml-25-pc{ margin-left: 25px }
  .ml-30-pc{ margin-left: 30px }
  .ml-35-pc{ margin-left: 35px }
  .ml-40-pc{ margin-left: 40px }
  .ml-45-pc{ margin-left: 45px }
  .ml-50-pc{ margin-left: 50px }
  .ml-60-pc{ margin-left: 60px }
  .ml-70-pc{ margin-left: 70px }
  .ml-80-pc{ margin-left: 80px }
  .ml-90-pc{ margin-left: 90px }
  .ml-100-pc{ margin-left: 100px }
  .ml-110-pc{ margin-left: 110px }
  .ml-120-pc{ margin-left: 120px }
  .ml-130-pc{ margin-left: 130px }
  .ml-140-pc{ margin-left: 140px }
  .ml-150-pc{ margin-left: 150px }
  .ml-160-pc{ margin-left: 160px }
  .ml-170-pc{ margin-left: 170px }
  .ml-180-pc{ margin-left: 180px }
  .ml-190-pc{ margin-left: 190px }
  .ml-200-pc{ margin-left: 200px }

  .ml-1vw-pc{ margin-left: 1vw }
  .ml-2vw-pc{ margin-left: 2vw }
  .ml-3vw-pc{ margin-left: 3vw }
  .ml-4vw-pc{ margin-left: 4vw }
  .ml-5vw-pc{ margin-left: 5vw }
  .ml-6vw-pc{ margin-left: 6vw }
  .ml-7vw-pc{ margin-left: 7vw }
  .ml-8vw-pc{ margin-left: 8vw }
  .ml-9vw-pc{ margin-left: 9vw }
  .ml-10vw-pc{ margin-left: 10vw }
  .ml-11vw-pc{ margin-left: 11vw }
  .ml-12vw-pc{ margin-left: 12vw }
  .ml-13vw-pc{ margin-left: 13vw }
  .ml-14vw-pc{ margin-left: 14vw }
  .ml-15vw-pc{ margin-left: 15vw }

  .ml-s-pc{ margin-left: var(--space-s) }
  .ml-m-pc{ margin-left: var(--space-m) }
  .ml-l-pc{ margin-left: var(--space-l) }

  .ml-auto-pc{ margin-left: auto }
}

/* FLEX BOX

   <使用用途>
   - 異なるサイズの要素を柔軟に配置する。
   - 要素の大きさや数が変化しても均等に配置する。

-------------------------------------------------------------- */
.f-container { display: flex }
.fi-container { display: inline-flex; /* 複数のリンクリストなどをインラインで配置 */ }

.f-item { flex-grow: 1; flex-basis: 0; /* 残りの空間を均等に分ける */ }
.fs{ flex-shrink: 0 /*縮小させない*/}

.fw { flex-wrap: wrap; /* アイテムがコンテナ幅を超えたら折り返す */ }
.f-row-reverse { flex-direction: row-reverse; /* アイテムの順番を逆にする */ }
.f-column { flex-direction: column; /* アイテム縦並びにする */ }

@media screen and (max-width: 1023px){
  .f-container-sp { display: flex }
  .fi-container-sp { display: inline-flex }

  .f-item-sp { flex-grow: 1; flex-basis: 0; }
  .fs-sp{ flex-shrink: 0 }

  .fw-sp { flex-wrap: wrap }
  .f-row-reverse-sp { flex-direction: row-reverse }
  .f-column-sp { flex-direction: column }
}
@media screen and (min-width: 768px){
  .f-container-tpc { display: flex }
  .fi-container-tpc { display: inline-flex }

  .f-item-tpc { flex-grow: 1; flex-basis: 0; }
  .fs-tpc{ flex-shrink: 0 }

  .fw-tpc { flex-wrap: wrap }
  .f-row-reverse-tpc { flex-direction: row-reverse }
  .f-column-tpc { flex-direction: column }
}
@media screen and (min-width: 1024px){
  .f-container-pc { display: flex }
  .fi-container-pc { display: inline-flex }

  .f-item-pc { flex-grow: 1; flex-basis: 0; }
  .fs-pc{ flex-shrink: 0 }

  .fw-pc { flex-wrap: wrap }
  .f-row-reverse-pc { flex-direction: row-reverse }
  .f-column-pc { flex-direction: column }
}

/* CSS GRID

   <使用用途>
   - カード型レイアウト
   - 同じレイアウトが繰り返される

-------------------------------------------------------------- */
.g-container { display: grid }

.g-container-1 { display: grid; grid-template-columns: repeat(1, 1fr) }
.g-container-2 { display: grid; grid-template-columns: repeat(2, 1fr) }
.g-container-3 { display: grid; grid-template-columns: repeat(3, 1fr) }
.g-container-4 { display: grid; grid-template-columns: repeat(4, 1fr) }
.g-container-5 { display: grid; grid-template-columns: repeat(5, 1fr) }
.g-container-6 { display: grid; grid-template-columns: repeat(6, 1fr) }

@media screen and (max-width: 1023px){
  .g-container-sp { display: grid }

  .g-container-1-sp { display: grid; grid-template-columns: repeat(1, 1fr) }
  .g-container-2-sp { display: grid; grid-template-columns: repeat(2, 1fr) }
  .g-container-3-sp { display: grid; grid-template-columns: repeat(3, 1fr) }
  .g-container-4-sp { display: grid; grid-template-columns: repeat(4, 1fr) }
  .g-container-5-sp { display: grid; grid-template-columns: repeat(5, 1fr) }
  .g-container-6-sp { display: grid; grid-template-columns: repeat(6, 1fr) }
}
@media screen and (min-width: 768px){
  .g-container-tpc { display: grid }

  .g-container-1-tpc { display: grid; grid-template-columns: repeat(1, 1fr) }
  .g-container-2-tpc { display: grid; grid-template-columns: repeat(2, 1fr) }
  .g-container-3-tpc { display: grid; grid-template-columns: repeat(3, 1fr) }
  .g-container-4-tpc { display: grid; grid-template-columns: repeat(4, 1fr) }
  .g-container-5-tpc { display: grid; grid-template-columns: repeat(5, 1fr) }
  .g-container-6-tpc { display: grid; grid-template-columns: repeat(6, 1fr) }
}
@media screen and (min-width: 1024px){
  .g-container-pc { display: grid }

  .g-container-1-pc { display: grid; grid-template-columns: repeat(1, 1fr) }
  .g-container-2-pc { display: grid; grid-template-columns: repeat(2, 1fr) }
  .g-container-3-pc { display: grid; grid-template-columns: repeat(3, 1fr) }
  .g-container-4-pc { display: grid; grid-template-columns: repeat(4, 1fr) }
  .g-container-5-pc { display: grid; grid-template-columns: repeat(5, 1fr) }
  .g-container-6-pc { display: grid; grid-template-columns: repeat(6, 1fr) }
}



/* FLEX BOX & CSS GRIDで使用可能な配置プロパティ
-------------------------------------------------------------- */

.a-c { align-items: center; /* アイテムを上下中央に配置 */ }
.a-start { align-items: start; /* アイテムをコンテナの上部に配置 */ }
.a-end { align-items: end; /* アイテムをコンテナの下部に配置 */ }

.a-stretch { align-items: stretch; /* アイテムの高さをコンテナに合わせて伸ばす */ }

@media screen and (max-width: 1023px){
  .a-c-sp { align-items: center }
  .a-start-sp { align-items: start }
  .a-end-sp { align-items: end }

  .a-stretch-sp { align-items: stretch }
}
@media screen and (min-width: 768px){
  .a-c-tpc { align-items: center }
  .a-start-tpc { align-items: start }
  .a-end-tpc { align-items: end }

  .a-stretch-tpc { align-items: stretch }
}
@media screen and (min-width: 1024px){
  .a-c-pc { align-items: center }
  .a-start-pc { align-items: start }
  .a-end-pc { align-items: end }

  .a-stretch-pc { align-items: stretch }
}

.j-c { justify-content: center; /* アイテムを水平中央に配置 */ }
.j-start { justify-content: start; /* アイテムをコンテナの左(先頭)に配置 */ }
.j-end { justify-content: end; /* アイテムをコンテナの右(末尾)に配置 */ }
.j-sb { justify-content: space-between; /* アイテム間に等間隔をあけて配置 */ }

@media screen and (max-width: 1023px){
  .j-c-sp { justify-content: center }
  .j-start-sp { justify-content: start }
  .j-end-sp { justify-content: end }
  .j-sb-sp { justify-content: space-between }
}
@media screen and (min-width: 768px){
  .j-c-tpc { justify-content: center }
  .j-start-tpc { justify-content: start }
  .j-end-tpc { justify-content: end }
  .j-sb-tpc { justify-content: space-between }
}
@media screen and (min-width: 1024px){
  .j-c-pc { justify-content: center }
  .j-start-pc { justify-content: start }
  .j-end-pc { justify-content: end }
  .j-sb-pc { justify-content: space-between }
}

/* FLEX BOX & CSS GRIDで使用可能なギャップ(間隔)
-------------------------------------------------------------- */
.g-5{ gap: calc(5px * var(--space-ratio)) }
.g-8{ gap: calc(8px * var(--space-ratio)) }
.g-10 { gap: calc(10px * var(--space-ratio)) }
.g-15 { gap: calc(15px * var(--space-ratio)) }
.g-20 { gap: calc(20px * var(--space-ratio)) }
.g-25 { gap: calc(25px * var(--space-ratio)) }
.g-30 { gap: calc(30px * var(--space-ratio)) }
.g-40 { gap: calc(40px * var(--space-ratio)) }
.g-50 { gap: calc(50px * var(--space-ratio)) }
.g-60 { gap: calc(60px * var(--space-ratio)) }
.g-70 { gap: calc(70px * var(--space-ratio)) }
.g-80 { gap: calc(80px * var(--space-ratio)) }
.g-90 { gap: calc(90px * var(--space-ratio)) }
.g-100 { gap: calc(100px * var(--space-ratio)) }
.g-110 { gap: calc(110px * var(--space-ratio)) }
.g-120 { gap: calc(120px * var(--space-ratio)) }
.g-130 { gap: calc(130px * var(--space-ratio)) }
.g-140 { gap: calc(140px * var(--space-ratio)) }
.g-150 { gap: calc(150px * var(--space-ratio)) }
.g-160 { gap: calc(160px * var(--space-ratio)) }
.g-170 { gap: calc(170px * var(--space-ratio)) }
.g-180 { gap: calc(180px * var(--space-ratio)) }
.g-190 { gap: calc(190px * var(--space-ratio)) }
.g-200 { gap: calc(200px * var(--space-ratio)) }

.g-c-5{ column-gap: calc(5px * var(--space-ratio)) }
.g-c-8{ column-gap: calc(8px * var(--space-ratio)) }
.g-c-10 { column-gap: calc(10px * var(--space-ratio)) }
.g-c-15 { column-gap: calc(15px * var(--space-ratio)) }
.g-c-20 { column-gap: calc(20px * var(--space-ratio)) }
.g-c-25 { column-gap: calc(25px * var(--space-ratio)) }
.g-c-30 { column-gap: calc(30px * var(--space-ratio)) }
.g-c-40 { column-gap: calc(40px * var(--space-ratio)) }
.g-c-50 { column-gap: calc(50px * var(--space-ratio)) }
.g-c-60 { column-gap: calc(60px * var(--space-ratio)) }
.g-c-70 { column-gap: calc(70px * var(--space-ratio)) }
.g-c-80 { column-gap: calc(80px * var(--space-ratio)) }
.g-c-90 { column-gap: calc(90px * var(--space-ratio)) }
.g-c-100 { column-gap: calc(100px * var(--space-ratio)) }
.g-c-110 { column-gap: calc(110px * var(--space-ratio)) }
.g-c-120 { column-gap: calc(120px * var(--space-ratio)) }
.g-c-130 { column-gap: calc(130px * var(--space-ratio)) }
.g-c-140 { column-gap: calc(140px * var(--space-ratio)) }
.g-c-150 { column-gap: calc(150px * var(--space-ratio)) }
.g-c-160 { column-gap: calc(160px * var(--space-ratio)) }
.g-c-170 { column-gap: calc(170px * var(--space-ratio)) }
.g-c-180 { column-gap: calc(180px * var(--space-ratio)) }
.g-c-190 { column-gap: calc(190px * var(--space-ratio)) }
.g-c-200 { column-gap: calc(200px * var(--space-ratio)) }

.g-r-5{ row-gap: calc(5px * var(--space-ratio)) }
.g-r-8{ row-gap: calc(8px * var(--space-ratio)) }
.g-r-10 { row-gap: calc(10px * var(--space-ratio)) }
.g-r-15 { row-gap: calc(15px * var(--space-ratio)) }
.g-r-20 { row-gap: calc(20px * var(--space-ratio)) }
.g-r-25 { row-gap: calc(25px * var(--space-ratio)) }
.g-r-30 { row-gap: calc(30px * var(--space-ratio)) }
.g-r-40 { row-gap: calc(40px * var(--space-ratio)) }
.g-r-50 { row-gap: calc(50px * var(--space-ratio)) }
.g-r-60 { row-gap: calc(60px * var(--space-ratio)) }
.g-r-70 { row-gap: calc(70px * var(--space-ratio)) }
.g-r-80 { row-gap: calc(80px * var(--space-ratio)) }
.g-r-90 { row-gap: calc(90px * var(--space-ratio)) }
.g-r-100 { row-gap: calc(100px * var(--space-ratio)) }
.g-r-110 { row-gap: calc(110px * var(--space-ratio)) }
.g-r-120 { row-gap: calc(120px * var(--space-ratio)) }
.g-r-130 { row-gap: calc(130px * var(--space-ratio)) }
.g-r-140 { row-gap: calc(140px * var(--space-ratio)) }
.g-r-150 { row-gap: calc(150px * var(--space-ratio)) }
.g-r-160 { row-gap: calc(160px * var(--space-ratio)) }
.g-r-170 { row-gap: calc(170px * var(--space-ratio)) }
.g-r-180 { row-gap: calc(180px * var(--space-ratio)) }
.g-r-190 { row-gap: calc(190px * var(--space-ratio)) }
.g-r-200 { row-gap: calc(200px * var(--space-ratio)) }

@media screen and (max-width: 1023px){
  .g-5-sp { gap: calc(5px * var(--space-ratio)) }
  .g-8-sp { gap: calc(8px * var(--space-ratio)) }
  .g-10-sp { gap: calc(10px * var(--space-ratio)) }
  .g-15-sp { gap: calc(15px * var(--space-ratio)) }
  .g-20-sp { gap: calc(20px * var(--space-ratio)) }
  .g-25-sp { gap: calc(25px * var(--space-ratio)) }
  .g-30-sp { gap: calc(30px * var(--space-ratio)) }
  .g-40-sp { gap: calc(40px * var(--space-ratio)) }
  .g-50-sp { gap: calc(50px * var(--space-ratio)) }
  .g-60-sp { gap: calc(60px * var(--space-ratio)) }
  .g-70-sp { gap: calc(70px * var(--space-ratio)) }
  .g-80-sp { gap: calc(80px * var(--space-ratio)) }
  .g-90-sp { gap: calc(90px * var(--space-ratio)) }
  .g-100-sp { gap: calc(100px * var(--space-ratio)) }
  .g-110-sp { gap: calc(110px * var(--space-ratio)) }
  .g-120-sp { gap: calc(120px * var(--space-ratio)) }
  .g-130-sp { gap: calc(130px * var(--space-ratio)) }
  .g-140-sp { gap: calc(140px * var(--space-ratio)) }
  .g-150-sp { gap: calc(150px * var(--space-ratio)) }
  .g-160-sp { gap: calc(160px * var(--space-ratio)) }
  .g-170-sp { gap: calc(170px * var(--space-ratio)) }
  .g-180-sp { gap: calc(180px * var(--space-ratio)) }
  .g-190-sp { gap: calc(190px * var(--space-ratio)) }
  .g-200-sp { gap: calc(200px * var(--space-ratio)) }

  .g-c-5-sp { column-gap: calc(5px * var(--space-ratio)) }
  .g-c-8-sp { column-gap: calc(8px * var(--space-ratio)) }
  .g-c-10-sp { column-gap: calc(10px * var(--space-ratio)) }
  .g-c-15-sp { column-gap: calc(15px * var(--space-ratio)) }
  .g-c-20-sp { column-gap: calc(20px * var(--space-ratio)) }
  .g-c-25-sp { column-gap: calc(25px * var(--space-ratio)) }
  .g-c-30-sp { column-gap: calc(30px * var(--space-ratio)) }
  .g-c-40-sp { column-gap: calc(40px * var(--space-ratio)) }
  .g-c-50-sp { column-gap: calc(50px * var(--space-ratio)) }
  .g-c-60-sp { column-gap: calc(60px * var(--space-ratio)) }
  .g-c-70-sp { column-gap: calc(70px * var(--space-ratio)) }
  .g-c-80-sp { column-gap: calc(80px * var(--space-ratio)) }
  .g-c-90-sp { column-gap: calc(90px * var(--space-ratio)) }
  .g-c-100-sp { column-gap: calc(100px * var(--space-ratio)) }
  .g-c-110-sp { column-gap: calc(110px * var(--space-ratio)) }
  .g-c-120-sp { column-gap: calc(120px * var(--space-ratio)) }
  .g-c-130-sp { column-gap: calc(130px * var(--space-ratio)) }
  .g-c-140-sp { column-gap: calc(140px * var(--space-ratio)) }
  .g-c-150-sp { column-gap: calc(150px * var(--space-ratio)) }
  .g-c-160-sp { column-gap: calc(160px * var(--space-ratio)) }
  .g-c-170-sp { column-gap: calc(170px * var(--space-ratio)) }
  .g-c-180-sp { column-gap: calc(180px * var(--space-ratio)) }
  .g-c-190-sp { column-gap: calc(190px * var(--space-ratio)) }
  .g-c-200-sp { column-gap: calc(200px * var(--space-ratio)) }

  .g-r-5-sp { row-gap: calc(5px * var(--space-ratio)) }
  .g-r-8-sp { row-gap: calc(8px * var(--space-ratio)) }
  .g-r-10-sp { row-gap: calc(10px * var(--space-ratio)) }
  .g-r-15-sp { row-gap: calc(15px * var(--space-ratio)) }
  .g-r-20-sp { row-gap: calc(20px * var(--space-ratio)) }
  .g-r-25-sp { row-gap: calc(25px * var(--space-ratio)) }
  .g-r-30-sp { row-gap: calc(30px * var(--space-ratio)) }
  .g-r-40-sp { row-gap: calc(40px * var(--space-ratio)) }
  .g-r-50-sp { row-gap: calc(50px * var(--space-ratio)) }
  .g-r-60-sp { row-gap: calc(60px * var(--space-ratio)) }
  .g-r-70-sp { row-gap: calc(70px * var(--space-ratio)) }
  .g-r-80-sp { row-gap: calc(80px * var(--space-ratio)) }
  .g-r-90-sp { row-gap: calc(90px * var(--space-ratio)) }
  .g-r-100-sp { row-gap: calc(100px * var(--space-ratio)) }
  .g-r-110-sp { row-gap: calc(110px * var(--space-ratio)) }
  .g-r-120-sp { row-gap: calc(120px * var(--space-ratio)) }
  .g-r-130-sp { row-gap: calc(130px * var(--space-ratio)) }
  .g-r-140-sp { row-gap: calc(140px * var(--space-ratio)) }
  .g-r-150-sp { row-gap: calc(150px * var(--space-ratio)) }
  .g-r-160-sp { row-gap: calc(160px * var(--space-ratio)) }
  .g-r-170-sp { row-gap: calc(170px * var(--space-ratio)) }
  .g-r-180-sp { row-gap: calc(180px * var(--space-ratio)) }
  .g-r-190-sp { row-gap: calc(190px * var(--space-ratio)) }
  .g-r-200-sp { row-gap: calc(200px * var(--space-ratio)) }
}
@media screen and (min-width: 768px){
  .g-5-tpc { gap: calc(5px * var(--space-ratio)) }
  .g-8-tpc { gap: calc(8px * var(--space-ratio)) }
  .g-10-tpc { gap: calc(10px * var(--space-ratio)) }
  .g-15-tpc { gap: calc(15px * var(--space-ratio)) }
  .g-20-tpc { gap: calc(20px * var(--space-ratio)) }
  .g-25-tpc { gap: calc(25px * var(--space-ratio)) }
  .g-30-tpc { gap: calc(30px * var(--space-ratio)) }
  .g-40-tpc { gap: calc(40px * var(--space-ratio)) }
  .g-50-tpc { gap: calc(50px * var(--space-ratio)) }
  .g-60-tpc { gap: calc(60px * var(--space-ratio)) }
  .g-70-tpc { gap: calc(70px * var(--space-ratio)) }
  .g-80-tpc { gap: calc(80px * var(--space-ratio)) }
  .g-90-tpc { gap: calc(90px * var(--space-ratio)) }
  .g-100-tpc { gap: calc(100px * var(--space-ratio)) }
  .g-110-tpc { gap: calc(110px * var(--space-ratio)) }
  .g-120-tpc { gap: calc(120px * var(--space-ratio)) }
  .g-130-tpc { gap: calc(130px * var(--space-ratio)) }
  .g-140-tpc { gap: calc(140px * var(--space-ratio)) }
  .g-150-tpc { gap: calc(150px * var(--space-ratio)) }
  .g-160-tpc { gap: calc(160px * var(--space-ratio)) }
  .g-170-tpc { gap: calc(170px * var(--space-ratio)) }
  .g-180-tpc { gap: calc(180px * var(--space-ratio)) }
  .g-190-tpc { gap: calc(190px * var(--space-ratio)) }
  .g-200-tpc { gap: calc(200px * var(--space-ratio)) }

  .g-c-5-tpc { column-gap: calc(5px * var(--space-ratio)) }
  .g-c-8-tpc { column-gap: calc(8px * var(--space-ratio)) }
  .g-c-10-tpc { column-gap: calc(10px * var(--space-ratio)) }
  .g-c-15-tpc { column-gap: calc(15px * var(--space-ratio)) }
  .g-c-20-tpc { column-gap: calc(20px * var(--space-ratio)) }
  .g-c-25-tpc { column-gap: calc(25px * var(--space-ratio)) }
  .g-c-30-tpc { column-gap: calc(30px * var(--space-ratio)) }
  .g-c-40-tpc { column-gap: calc(40px * var(--space-ratio)) }
  .g-c-50-tpc { column-gap: calc(50px * var(--space-ratio)) }
  .g-c-60-tpc { column-gap: calc(60px * var(--space-ratio)) }
  .g-c-70-tpc { column-gap: calc(70px * var(--space-ratio)) }
  .g-c-80-tpc { column-gap: calc(80px * var(--space-ratio)) }
  .g-c-90-tpc { column-gap: calc(90px * var(--space-ratio)) }
  .g-c-100-tpc { column-gap: calc(100px * var(--space-ratio)) }
  .g-c-110-tpc { column-gap: calc(110px * var(--space-ratio)) }
  .g-c-120-tpc { column-gap: calc(120px * var(--space-ratio)) }
  .g-c-130-tpc { column-gap: calc(130px * var(--space-ratio)) }
  .g-c-140-tpc { column-gap: calc(140px * var(--space-ratio)) }
  .g-c-150-tpc { column-gap: calc(150px * var(--space-ratio)) }
  .g-c-160-tpc { column-gap: calc(160px * var(--space-ratio)) }
  .g-c-170-tpc { column-gap: calc(170px * var(--space-ratio)) }
  .g-c-180-tpc { column-gap: calc(180px * var(--space-ratio)) }
  .g-c-190-tpc { column-gap: calc(190px * var(--space-ratio)) }
  .g-c-200-tpc { column-gap: calc(200px * var(--space-ratio)) }

  .g-r-5-tpc { row-gap: calc(5px * var(--space-ratio)) }
  .g-r-8-tpc { row-gap: calc(8px * var(--space-ratio)) }
  .g-r-10-tpc { row-gap: calc(10px * var(--space-ratio)) }
  .g-r-15-tpc { row-gap: calc(15px * var(--space-ratio)) }
  .g-r-20-tpc { row-gap: calc(20px * var(--space-ratio)) }
  .g-r-25-tpc { row-gap: calc(25px * var(--space-ratio)) }
  .g-r-30-tpc { row-gap: calc(30px * var(--space-ratio)) }
  .g-r-40-tpc { row-gap: calc(40px * var(--space-ratio)) }
  .g-r-50-tpc { row-gap: calc(50px * var(--space-ratio)) }
  .g-r-60-tpc { row-gap: calc(60px * var(--space-ratio)) }
  .g-r-70-tpc { row-gap: calc(70px * var(--space-ratio)) }
  .g-r-80-tpc { row-gap: calc(80px * var(--space-ratio)) }
  .g-r-90-tpc { row-gap: calc(90px * var(--space-ratio)) }
  .g-r-100-tpc { row-gap: calc(100px * var(--space-ratio)) }
  .g-r-110-tpc { row-gap: calc(110px * var(--space-ratio)) }
  .g-r-120-tpc { row-gap: calc(120px * var(--space-ratio)) }
  .g-r-130-tpc { row-gap: calc(130px * var(--space-ratio)) }
  .g-r-140-tpc { row-gap: calc(140px * var(--space-ratio)) }
  .g-r-150-tpc { row-gap: calc(150px * var(--space-ratio)) }
  .g-r-160-tpc { row-gap: calc(160px * var(--space-ratio)) }
  .g-r-170-tpc { row-gap: calc(170px * var(--space-ratio)) }
  .g-r-180-tpc { row-gap: calc(180px * var(--space-ratio)) }
  .g-r-190-tpc { row-gap: calc(190px * var(--space-ratio)) }
  .g-r-200-tpc { row-gap: calc(200px * var(--space-ratio)) }
}
@media screen and (min-width: 1024px){
  .g-5-pc { gap: calc(5px * var(--space-ratio)) }
  .g-8-pc { gap: calc(8px * var(--space-ratio)) }
  .g-10-pc { gap: calc(10px * var(--space-ratio)) }
  .g-15-pc { gap: calc(15px * var(--space-ratio)) }
  .g-20-pc { gap: calc(20px * var(--space-ratio)) }
  .g-25-pc { gap: calc(25px * var(--space-ratio)) }
  .g-30-pc { gap: calc(30px * var(--space-ratio)) }
  .g-40-pc { gap: calc(40px * var(--space-ratio)) }
  .g-50-pc { gap: calc(50px * var(--space-ratio)) }
  .g-60-pc { gap: calc(60px * var(--space-ratio)) }
  .g-70-pc { gap: calc(70px * var(--space-ratio)) }
  .g-80-pc { gap: calc(80px * var(--space-ratio)) }
  .g-90-pc { gap: calc(90px * var(--space-ratio)) }
  .g-100-pc { gap: calc(100px * var(--space-ratio)) }
  .g-110-pc { gap: calc(110px * var(--space-ratio)) }
  .g-120-pc { gap: calc(120px * var(--space-ratio)) }
  .g-130-pc { gap: calc(130px * var(--space-ratio)) }
  .g-140-pc { gap: calc(140px * var(--space-ratio)) }
  .g-150-pc { gap: calc(150px * var(--space-ratio)) }
  .g-160-pc { gap: calc(160px * var(--space-ratio)) }
  .g-170-pc { gap: calc(170px * var(--space-ratio)) }
  .g-180-pc { gap: calc(180px * var(--space-ratio)) }
  .g-190-pc { gap: calc(190px * var(--space-ratio)) }
  .g-200-pc { gap: calc(200px * var(--space-ratio)) }

  .g-c-5-pc { column-gap: calc(5px * var(--space-ratio)) }
  .g-c-8-pc { column-gap: calc(8px * var(--space-ratio)) }
  .g-c-10-pc { column-gap: calc(10px * var(--space-ratio)) }
  .g-c-15-pc { column-gap: calc(15px * var(--space-ratio)) }
  .g-c-20-pc { column-gap: calc(20px * var(--space-ratio)) }
  .g-c-25-pc { column-gap: calc(25px * var(--space-ratio)) }
  .g-c-30-pc { column-gap: calc(30px * var(--space-ratio)) }
  .g-c-40-pc { column-gap: calc(40px * var(--space-ratio)) }
  .g-c-50-pc { column-gap: calc(50px * var(--space-ratio)) }
  .g-c-60-pc { column-gap: calc(60px * var(--space-ratio)) }
  .g-c-70-pc { column-gap: calc(70px * var(--space-ratio)) }
  .g-c-80-pc { column-gap: calc(80px * var(--space-ratio)) }
  .g-c-90-pc { column-gap: calc(90px * var(--space-ratio)) }
  .g-c-100-pc { column-gap: calc(100px * var(--space-ratio)) }
  .g-c-110-pc { column-gap: calc(110px * var(--space-ratio)) }
  .g-c-120-pc { column-gap: calc(120px * var(--space-ratio)) }
  .g-c-130-pc { column-gap: calc(130px * var(--space-ratio)) }
  .g-c-140-pc { column-gap: calc(140px * var(--space-ratio)) }
  .g-c-150-pc { column-gap: calc(150px * var(--space-ratio)) }
  .g-c-160-pc { column-gap: calc(160px * var(--space-ratio)) }
  .g-c-170-pc { column-gap: calc(170px * var(--space-ratio)) }
  .g-c-180-pc { column-gap: calc(180px * var(--space-ratio)) }
  .g-c-190-pc { column-gap: calc(190px * var(--space-ratio)) }
  .g-c-200-pc { column-gap: calc(200px * var(--space-ratio)) }

  .g-r-5-pc { row-gap: calc(5px * var(--space-ratio)) }
  .g-r-8-pc { row-gap: calc(8px * var(--space-ratio)) }
  .g-r-10-pc { row-gap: calc(10px * var(--space-ratio)) }
  .g-r-15-pc { row-gap: calc(15px * var(--space-ratio)) }
  .g-r-20-pc { row-gap: calc(20px * var(--space-ratio)) }
  .g-r-25-pc { row-gap: calc(25px * var(--space-ratio)) }
  .g-r-30-pc { row-gap: calc(30px * var(--space-ratio)) }
  .g-r-40-pc { row-gap: calc(40px * var(--space-ratio)) }
  .g-r-50-pc { row-gap: calc(50px * var(--space-ratio)) }
  .g-r-60-pc { row-gap: calc(60px * var(--space-ratio)) }
  .g-r-70-pc { row-gap: calc(70px * var(--space-ratio)) }
  .g-r-80-pc { row-gap: calc(80px * var(--space-ratio)) }
  .g-r-90-pc { row-gap: calc(90px * var(--space-ratio)) }
  .g-r-100-pc { row-gap: calc(100px * var(--space-ratio)) }
  .g-r-110-pc { row-gap: calc(110px * var(--space-ratio)) }
  .g-r-120-pc { row-gap: calc(120px * var(--space-ratio)) }
  .g-r-130-pc { row-gap: calc(130px * var(--space-ratio)) }
  .g-r-140-pc { row-gap: calc(140px * var(--space-ratio)) }
  .g-r-150-pc { row-gap: calc(150px * var(--space-ratio)) }
  .g-r-160-pc { row-gap: calc(160px * var(--space-ratio)) }
  .g-r-170-pc { row-gap: calc(170px * var(--space-ratio)) }
  .g-r-180-pc { row-gap: calc(180px * var(--space-ratio)) }
  .g-r-190-pc { row-gap: calc(190px * var(--space-ratio)) }
  .g-r-200-pc { row-gap: calc(200px * var(--space-ratio)) }
}

/* BORDER
-------------------------------------------------------------- */
.bs-1 { border-style: solid; border-width: 1px }
.bs-2 { border-style: solid; border-width: 2px }
.bs-3 { border-style: solid; border-width: 3px }
.bs-4 { border-style: solid; border-width: 4px }
.bs-5 { border-style: solid; border-width: 5px }
.bs-6 { border-style: solid; border-width: 6px }
.bs-7 { border-style: solid; border-width: 7px }
.bs-8 { border-style: solid; border-width: 8px }
.bs-9 { border-style: solid; border-width: 9px }
.bs-10 { border-style: solid; border-width: 10px }

.bd-1 { border-style: dotted; border-width: 1px }
.bd-2 { border-style: dotted; border-width: 2px }
.bd-3 { border-style: dotted; border-width: 3px }
.bd-4 { border-style: dotted; border-width: 4px }
.bd-5 { border-style: dotted; border-width: 5px }
.bd-6 { border-style: dotted; border-width: 6px }
.bd-7 { border-style: dotted; border-width: 7px }
.bd-8 { border-style: dotted; border-width: 8px }
.bd-9 { border-style: dotted; border-width: 9px }
.bd-10 { border-style: dotted; border-width: 10px }

.bs-t-1 { border-top-style: solid; border-top-width: 1px }
.bs-t-2 { border-top-style: solid; border-top-width: 2px }
.bs-t-3 { border-top-style: solid; border-top-width: 3px }
.bs-t-4 { border-top-style: solid; border-top-width: 4px }
.bs-t-5 { border-top-style: solid; border-top-width: 5px }
.bs-t-6 { border-top-style: solid; border-top-width: 6px }
.bs-t-7 { border-top-style: solid; border-top-width: 7px }
.bs-t-8 { border-top-style: solid; border-top-width: 8px }
.bs-t-9 { border-top-style: solid; border-top-width: 9px }
.bs-t-10 { border-top-style: solid; border-top-width: 10px }

.bs-r-1 { border-right-style: solid; border-right-width: 1px }
.bs-r-2 { border-right-style: solid; border-right-width: 2px }
.bs-r-3 { border-right-style: solid; border-right-width: 3px }
.bs-r-4 { border-right-style: solid; border-right-width: 4px }
.bs-r-5 { border-right-style: solid; border-right-width: 5px }
.bs-r-6 { border-right-style: solid; border-right-width: 6px }
.bs-r-7 { border-right-style: solid; border-right-width: 7px }
.bs-r-8 { border-right-style: solid; border-right-width: 8px }
.bs-r-9 { border-right-style: solid; border-right-width: 9px }
.bs-r-10 { border-right-style: solid; border-right-width: 10px }

.bs-l-1 { border-left-style: solid; border-left-width: 1px }
.bs-l-2 { border-left-style: solid; border-left-width: 2px }
.bs-l-3 { border-left-style: solid; border-left-width: 3px }
.bs-l-4 { border-left-style: solid; border-left-width: 4px }
.bs-l-5 { border-left-style: solid; border-left-width: 5px }
.bs-l-6 { border-left-style: solid; border-left-width: 6px }
.bs-l-7 { border-left-style: solid; border-left-width: 7px }
.bs-l-8 { border-left-style: solid; border-left-width: 8px }
.bs-l-9 { border-left-style: solid; border-left-width: 9px }
.bs-l-10 { border-left-style: solid; border-left-width: 10px }

.bs-b-1 { border-bottom-style: solid; border-bottom-width: 1px }
.bs-b-2 { border-bottom-style: solid; border-bottom-width: 2px }
.bs-b-3 { border-bottom-style: solid; border-bottom-width: 3px }
.bs-b-4 { border-bottom-style: solid; border-bottom-width: 4px }
.bs-b-5 { border-bottom-style: solid; border-bottom-width: 5px }
.bs-b-6 { border-bottom-style: solid; border-bottom-width: 6px }
.bs-b-7 { border-bottom-style: solid; border-bottom-width: 7px }
.bs-b-8 { border-bottom-style: solid; border-bottom-width: 8px }
.bs-b-9 { border-bottom-style: solid; border-bottom-width: 9px }
.bs-b-10 { border-bottom-style: solid; border-bottom-width: 10px }

.bd-t-1 { border-top-style: dotted; border-top-width: 1px }
.bd-t-2 { border-top-style: dotted; border-top-width: 2px }
.bd-t-3 { border-top-style: dotted; border-top-width: 3px }
.bd-t-4 { border-top-style: dotted; border-top-width: 4px }
.bd-t-5 { border-top-style: dotted; border-top-width: 5px }
.bd-t-6 { border-top-style: dotted; border-top-width: 6px }
.bd-t-7 { border-top-style: dotted; border-top-width: 7px }
.bd-t-8 { border-top-style: dotted; border-top-width: 8px }
.bd-t-9 { border-top-style: dotted; border-top-width: 9px }
.bd-t-10 { border-top-style: dotted; border-top-width: 10px }

.bd-r-1 { border-right-style: dotted; border-right-width: 1px }
.bd-r-2 { border-right-style: dotted; border-right-width: 2px }
.bd-r-3 { border-right-style: dotted; border-right-width: 3px }
.bd-r-4 { border-right-style: dotted; border-right-width: 4px }
.bd-r-5 { border-right-style: dotted; border-right-width: 5px }
.bd-r-6 { border-right-style: dotted; border-right-width: 6px }
.bd-r-7 { border-right-style: dotted; border-right-width: 7px }
.bd-r-8 { border-right-style: dotted; border-right-width: 8px }
.bd-r-9 { border-right-style: dotted; border-right-width: 9px }
.bd-r-10 { border-right-style: dotted; border-right-width: 10px }

.bd-l-1 { border-left-style: dotted; border-left-width: 1px }
.bd-l-2 { border-left-style: dotted; border-left-width: 2px }
.bd-l-3 { border-left-style: dotted; border-left-width: 3px }
.bd-l-4 { border-left-style: dotted; border-left-width: 4px }
.bd-l-5 { border-left-style: dotted; border-left-width: 5px }
.bd-l-6 { border-left-style: dotted; border-left-width: 6px }
.bd-l-7 { border-left-style: dotted; border-left-width: 7px }
.bd-l-8 { border-left-style: dotted; border-left-width: 8px }
.bd-l-9 { border-left-style: dotted; border-left-width: 9px }
.bd-l-10 { border-left-style: dotted; border-left-width: 10px }

.bd-b-1 { border-bottom-style: dotted; border-bottom-width: 1px }
.bd-b-2 { border-bottom-style: dotted; border-bottom-width: 2px }
.bd-b-3 { border-bottom-style: dotted; border-bottom-width: 3px }
.bd-b-4 { border-bottom-style: dotted; border-bottom-width: 4px }
.bd-b-5 { border-bottom-style: dotted; border-bottom-width: 5px }
.bd-b-6 { border-bottom-style: dotted; border-bottom-width: 6px }
.bd-b-7 { border-bottom-style: dotted; border-bottom-width: 7px }
.bd-b-8 { border-bottom-style: dotted; border-bottom-width: 8px }
.bd-b-9 { border-bottom-style: dotted; border-bottom-width: 9px }
.bd-b-10 { border-bottom-style: dotted; border-bottom-width: 10px }

@media screen and (max-width: 1023px){
  .bs-1-sp { border-style: solid; border-width: 1px }
  .bs-2-sp { border-style: solid; border-width: 2px }
  .bs-3-sp { border-style: solid; border-width: 3px }
  .bs-4-sp { border-style: solid; border-width: 4px }
  .bs-5-sp { border-style: solid; border-width: 5px }
  .bs-6-sp { border-style: solid; border-width: 6px }
  .bs-7-sp { border-style: solid; border-width: 7px }
  .bs-8-sp { border-style: solid; border-width: 8px }
  .bs-9-sp { border-style: solid; border-width: 9px }
  .bs-10-sp { border-style: solid; border-width: 10px }

  .bd-1-sp { border-style: dotted; border-width: 1px }
  .bd-2-sp { border-style: dotted; border-width: 2px }
  .bd-3-sp { border-style: dotted; border-width: 3px }
  .bd-4-sp { border-style: dotted; border-width: 4px }
  .bd-5-sp { border-style: dotted; border-width: 5px }
  .bd-6-sp { border-style: dotted; border-width: 6px }
  .bd-7-sp { border-style: dotted; border-width: 7px }
  .bd-8-sp { border-style: dotted; border-width: 8px }
  .bd-9-sp { border-style: dotted; border-width: 9px }
  .bd-10-sp { border-style: dotted; border-width: 10px }

  .bs-t-1-sp { border-top-style: solid; border-top-width: 1px }
  .bs-t-2-sp { border-top-style: solid; border-top-width: 2px }
  .bs-t-3-sp { border-top-style: solid; border-top-width: 3px }
  .bs-t-4-sp { border-top-style: solid; border-top-width: 4px }
  .bs-t-5-sp { border-top-style: solid; border-top-width: 5px }
  .bs-t-6-sp { border-top-style: solid; border-top-width: 6px }
  .bs-t-7-sp { border-top-style: solid; border-top-width: 7px }
  .bs-t-8-sp { border-top-style: solid; border-top-width: 8px }
  .bs-t-9-sp { border-top-style: solid; border-top-width: 9px }
  .bs-t-10-sp { border-top-style: solid; border-top-width: 10px }

  .bs-r-1-sp { border-right-style: solid; border-right-width: 1px }
  .bs-r-2-sp { border-right-style: solid; border-right-width: 2px }
  .bs-r-3-sp { border-right-style: solid; border-right-width: 3px }
  .bs-r-4-sp { border-right-style: solid; border-right-width: 4px }
  .bs-r-5-sp { border-right-style: solid; border-right-width: 5px }
  .bs-r-6-sp { border-right-style: solid; border-right-width: 6px }
  .bs-r-7-sp { border-right-style: solid; border-right-width: 7px }
  .bs-r-8-sp { border-right-style: solid; border-right-width: 8px }
  .bs-r-9-sp { border-right-style: solid; border-right-width: 9px }
  .bs-r-10-sp { border-right-style: solid; border-right-width: 10px }

  .bs-l-1-sp { border-left-style: solid; border-left-width: 1px }
  .bs-l-2-sp { border-left-style: solid; border-left-width: 2px }
  .bs-l-3-sp { border-left-style: solid; border-left-width: 3px }
  .bs-l-4-sp { border-left-style: solid; border-left-width: 4px }
  .bs-l-5-sp { border-left-style: solid; border-left-width: 5px }
  .bs-l-6-sp { border-left-style: solid; border-left-width: 6px }
  .bs-l-7-sp { border-left-style: solid; border-left-width: 7px }
  .bs-l-8-sp { border-left-style: solid; border-left-width: 8px }
  .bs-l-9-sp { border-left-style: solid; border-left-width: 9px }
  .bs-l-10-sp { border-left-style: solid; border-left-width: 10px }

  .bs-b-1-sp { border-bottom-style: solid; border-bottom-width: 1px }
  .bs-b-2-sp { border-bottom-style: solid; border-bottom-width: 2px }
  .bs-b-3-sp { border-bottom-style: solid; border-bottom-width: 3px }
  .bs-b-4-sp { border-bottom-style: solid; border-bottom-width: 4px }
  .bs-b-5-sp { border-bottom-style: solid; border-bottom-width: 5px }
  .bs-b-6-sp { border-bottom-style: solid; border-bottom-width: 6px }
  .bs-b-7-sp { border-bottom-style: solid; border-bottom-width: 7px }
  .bs-b-8-sp { border-bottom-style: solid; border-bottom-width: 8px }
  .bs-b-9-sp { border-bottom-style: solid; border-bottom-width: 9px }
  .bs-b-10-sp { border-bottom-style: solid; border-bottom-width: 10px }

  .bd-t-1-sp { border-top-style: dotted; border-top-width: 1px }
  .bd-t-2-sp { border-top-style: dotted; border-top-width: 2px }
  .bd-t-3-sp { border-top-style: dotted; border-top-width: 3px }
  .bd-t-4-sp { border-top-style: dotted; border-top-width: 4px }
  .bd-t-5-sp { border-top-style: dotted; border-top-width: 5px }
  .bd-t-6-sp { border-top-style: dotted; border-top-width: 6px }
  .bd-t-7-sp { border-top-style: dotted; border-top-width: 7px }
  .bd-t-8-sp { border-top-style: dotted; border-top-width: 8px }
  .bd-t-9-sp { border-top-style: dotted; border-top-width: 9px }
  .bd-t-10-sp { border-top-style: dotted; border-top-width: 10px }

  .bd-r-1-sp { border-right-style: dotted; border-right-width: 1px }
  .bd-r-2-sp { border-right-style: dotted; border-right-width: 2px }
  .bd-r-3-sp { border-right-style: dotted; border-right-width: 3px }
  .bd-r-4-sp { border-right-style: dotted; border-right-width: 4px }
  .bd-r-5-sp { border-right-style: dotted; border-right-width: 5px }
  .bd-r-6-sp { border-right-style: dotted; border-right-width: 6px }
  .bd-r-7-sp { border-right-style: dotted; border-right-width: 7px }
  .bd-r-8-sp { border-right-style: dotted; border-right-width: 8px }
  .bd-r-9-sp { border-right-style: dotted; border-right-width: 9px }
  .bd-r-10-sp { border-right-style: dotted; border-right-width: 10px }

  .bd-l-1-sp { border-left-style: dotted; border-left-width: 1px }
  .bd-l-2-sp { border-left-style: dotted; border-left-width: 2px }
  .bd-l-3-sp { border-left-style: dotted; border-left-width: 3px }
  .bd-l-4-sp { border-left-style: dotted; border-left-width: 4px }
  .bd-l-5-sp { border-left-style: dotted; border-left-width: 5px }
  .bd-l-6-sp { border-left-style: dotted; border-left-width: 6px }
  .bd-l-7-sp { border-left-style: dotted; border-left-width: 7px }
  .bd-l-8-sp { border-left-style: dotted; border-left-width: 8px }
  .bd-l-9-sp { border-left-style: dotted; border-left-width: 9px }
  .bd-l-10-sp { border-left-style: dotted; border-left-width: 10px }

  .bd-b-1-sp { border-bottom-style: dotted; border-bottom-width: 1px }
  .bd-b-2-sp { border-bottom-style: dotted; border-bottom-width: 2px }
  .bd-b-3-sp { border-bottom-style: dotted; border-bottom-width: 3px }
  .bd-b-4-sp { border-bottom-style: dotted; border-bottom-width: 4px }
  .bd-b-5-sp { border-bottom-style: dotted; border-bottom-width: 5px }
  .bd-b-6-sp { border-bottom-style: dotted; border-bottom-width: 6px }
  .bd-b-7-sp { border-bottom-style: dotted; border-bottom-width: 7px }
  .bd-b-8-sp { border-bottom-style: dotted; border-bottom-width: 8px }
  .bd-b-9-sp { border-bottom-style: dotted; border-bottom-width: 9px }
  .bd-b-10-sp { border-bottom-style: dotted; border-bottom-width: 10px }
}
@media screen and (min-width: 768px){
  .bs-1-tpc { border-style: solid; border-width: 1px }
  .bs-2-tpc { border-style: solid; border-width: 2px }
  .bs-3-tpc { border-style: solid; border-width: 3px }
  .bs-4-tpc { border-style: solid; border-width: 4px }
  .bs-5-tpc { border-style: solid; border-width: 5px }
  .bs-6-tpc { border-style: solid; border-width: 6px }
  .bs-7-tpc { border-style: solid; border-width: 7px }
  .bs-8-tpc { border-style: solid; border-width: 8px }
  .bs-9-tpc { border-style: solid; border-width: 9px }
  .bs-10-tpc { border-style: solid; border-width: 10px }

  .bd-1-tpc { border-style: dotted; border-width: 1px }
  .bd-2-tpc { border-style: dotted; border-width: 2px }
  .bd-3-tpc { border-style: dotted; border-width: 3px }
  .bd-4-tpc { border-style: dotted; border-width: 4px }
  .bd-5-tpc { border-style: dotted; border-width: 5px }
  .bd-6-tpc { border-style: dotted; border-width: 6px }
  .bd-7-tpc { border-style: dotted; border-width: 7px }
  .bd-8-tpc { border-style: dotted; border-width: 8px }
  .bd-9-tpc { border-style: dotted; border-width: 9px }
  .bd-10-tpc { border-style: dotted; border-width: 10px }

  .bs-t-1-tpc { border-top-style: solid; border-top-width: 1px }
  .bs-t-2-tpc { border-top-style: solid; border-top-width: 2px }
  .bs-t-3-tpc { border-top-style: solid; border-top-width: 3px }
  .bs-t-4-tpc { border-top-style: solid; border-top-width: 4px }
  .bs-t-5-tpc { border-top-style: solid; border-top-width: 5px }
  .bs-t-6-tpc { border-top-style: solid; border-top-width: 6px }
  .bs-t-7-tpc { border-top-style: solid; border-top-width: 7px }
  .bs-t-8-tpc { border-top-style: solid; border-top-width: 8px }
  .bs-t-9-tpc { border-top-style: solid; border-top-width: 9px }
  .bs-t-10-tpc { border-top-style: solid; border-top-width: 10px }

  .bs-r-1-tpc { border-right-style: solid; border-right-width: 1px }
  .bs-r-2-tpc { border-right-style: solid; border-right-width: 2px }
  .bs-r-3-tpc { border-right-style: solid; border-right-width: 3px }
  .bs-r-4-tpc { border-right-style: solid; border-right-width: 4px }
  .bs-r-5-tpc { border-right-style: solid; border-right-width: 5px }
  .bs-r-6-tpc { border-right-style: solid; border-right-width: 6px }
  .bs-r-7-tpc { border-right-style: solid; border-right-width: 7px }
  .bs-r-8-tpc { border-right-style: solid; border-right-width: 8px }
  .bs-r-9-tpc { border-right-style: solid; border-right-width: 9px }
  .bs-r-10-tpc { border-right-style: solid; border-right-width: 10px }

  .bs-l-1-tpc { border-left-style: solid; border-left-width: 1px }
  .bs-l-2-tpc { border-left-style: solid; border-left-width: 2px }
  .bs-l-3-tpc { border-left-style: solid; border-left-width: 3px }
  .bs-l-4-tpc { border-left-style: solid; border-left-width: 4px }
  .bs-l-5-tpc { border-left-style: solid; border-left-width: 5px }
  .bs-l-6-tpc { border-left-style: solid; border-left-width: 6px }
  .bs-l-7-tpc { border-left-style: solid; border-left-width: 7px }
  .bs-l-8-tpc { border-left-style: solid; border-left-width: 8px }
  .bs-l-9-tpc { border-left-style: solid; border-left-width: 9px }
  .bs-l-10-tpc { border-left-style: solid; border-left-width: 10px }

  .bs-b-1-tpc { border-bottom-style: solid; border-bottom-width: 1px }
  .bs-b-2-tpc { border-bottom-style: solid; border-bottom-width: 2px }
  .bs-b-3-tpc { border-bottom-style: solid; border-bottom-width: 3px }
  .bs-b-4-tpc { border-bottom-style: solid; border-bottom-width: 4px }
  .bs-b-5-tpc { border-bottom-style: solid; border-bottom-width: 5px }
  .bs-b-6-tpc { border-bottom-style: solid; border-bottom-width: 6px }
  .bs-b-7-tpc { border-bottom-style: solid; border-bottom-width: 7px }
  .bs-b-8-tpc { border-bottom-style: solid; border-bottom-width: 8px }
  .bs-b-9-tpc { border-bottom-style: solid; border-bottom-width: 9px }
  .bs-b-10-tpc { border-bottom-style: solid; border-bottom-width: 10px }

  .bd-t-1-tpc { border-top-style: dotted; border-top-width: 1px }
  .bd-t-2-tpc { border-top-style: dotted; border-top-width: 2px }
  .bd-t-3-tpc { border-top-style: dotted; border-top-width: 3px }
  .bd-t-4-tpc { border-top-style: dotted; border-top-width: 4px }
  .bd-t-5-tpc { border-top-style: dotted; border-top-width: 5px }
  .bd-t-6-tpc { border-top-style: dotted; border-top-width: 6px }
  .bd-t-7-tpc { border-top-style: dotted; border-top-width: 7px }
  .bd-t-8-tpc { border-top-style: dotted; border-top-width: 8px }
  .bd-t-9-tpc { border-top-style: dotted; border-top-width: 9px }
  .bd-t-10-tpc { border-top-style: dotted; border-top-width: 10px }

  .bd-r-1-tpc { border-right-style: dotted; border-right-width: 1px }
  .bd-r-2-tpc { border-right-style: dotted; border-right-width: 2px }
  .bd-r-3-tpc { border-right-style: dotted; border-right-width: 3px }
  .bd-r-4-tpc { border-right-style: dotted; border-right-width: 4px }
  .bd-r-5-tpc { border-right-style: dotted; border-right-width: 5px }
  .bd-r-6-tpc { border-right-style: dotted; border-right-width: 6px }
  .bd-r-7-tpc { border-right-style: dotted; border-right-width: 7px }
  .bd-r-8-tpc { border-right-style: dotted; border-right-width: 8px }
  .bd-r-9-tpc { border-right-style: dotted; border-right-width: 9px }
  .bd-r-10-tpc { border-right-style: dotted; border-right-width: 10px }

  .bd-l-1-tpc { border-left-style: dotted; border-left-width: 1px }
  .bd-l-2-tpc { border-left-style: dotted; border-left-width: 2px }
  .bd-l-3-tpc { border-left-style: dotted; border-left-width: 3px }
  .bd-l-4-tpc { border-left-style: dotted; border-left-width: 4px }
  .bd-l-5-tpc { border-left-style: dotted; border-left-width: 5px }
  .bd-l-6-tpc { border-left-style: dotted; border-left-width: 6px }
  .bd-l-7-tpc { border-left-style: dotted; border-left-width: 7px }
  .bd-l-8-tpc { border-left-style: dotted; border-left-width: 8px }
  .bd-l-9-tpc { border-left-style: dotted; border-left-width: 9px }
  .bd-l-10-tpc { border-left-style: dotted; border-left-width: 10px }

  .bd-b-1-tpc { border-bottom-style: dotted; border-bottom-width: 1px }
  .bd-b-2-tpc { border-bottom-style: dotted; border-bottom-width: 2px }
  .bd-b-3-tpc { border-bottom-style: dotted; border-bottom-width: 3px }
  .bd-b-4-tpc { border-bottom-style: dotted; border-bottom-width: 4px }
  .bd-b-5-tpc { border-bottom-style: dotted; border-bottom-width: 5px }
  .bd-b-6-tpc { border-bottom-style: dotted; border-bottom-width: 6px }
  .bd-b-7-tpc { border-bottom-style: dotted; border-bottom-width: 7px }
  .bd-b-8-tpc { border-bottom-style: dotted; border-bottom-width: 8px }
  .bd-b-9-tpc { border-bottom-style: dotted; border-bottom-width: 9px }
  .bd-b-10-tpc { border-bottom-style: dotted; border-bottom-width: 10px }
}
@media screen and (min-width: 1024px){
  .bs-1-pc { border-style: solid; border-width: 1px }
  .bs-2-pc { border-style: solid; border-width: 2px }
  .bs-3-pc { border-style: solid; border-width: 3px }
  .bs-4-pc { border-style: solid; border-width: 4px }
  .bs-5-pc { border-style: solid; border-width: 5px }
  .bs-6-pc { border-style: solid; border-width: 6px }
  .bs-7-pc { border-style: solid; border-width: 7px }
  .bs-8-pc { border-style: solid; border-width: 8px }
  .bs-9-pc { border-style: solid; border-width: 9px }
  .bs-10-pc { border-style: solid; border-width: 10px }

  .bd-1-pc { border-style: dotted; border-width: 1px }
  .bd-2-pc { border-style: dotted; border-width: 2px }
  .bd-3-pc { border-style: dotted; border-width: 3px }
  .bd-4-pc { border-style: dotted; border-width: 4px }
  .bd-5-pc { border-style: dotted; border-width: 5px }
  .bd-6-pc { border-style: dotted; border-width: 6px }
  .bd-7-pc { border-style: dotted; border-width: 7px }
  .bd-8-pc { border-style: dotted; border-width: 8px }
  .bd-9-pc { border-style: dotted; border-width: 9px }
  .bd-10-pc { border-style: dotted; border-width: 10px }

  .bs-t-1-pc { border-top-style: solid; border-top-width: 1px }
  .bs-t-2-pc { border-top-style: solid; border-top-width: 2px }
  .bs-t-3-pc { border-top-style: solid; border-top-width: 3px }
  .bs-t-4-pc { border-top-style: solid; border-top-width: 4px }
  .bs-t-5-pc { border-top-style: solid; border-top-width: 5px }
  .bs-t-6-pc { border-top-style: solid; border-top-width: 6px }
  .bs-t-7-pc { border-top-style: solid; border-top-width: 7px }
  .bs-t-8-pc { border-top-style: solid; border-top-width: 8px }
  .bs-t-9-pc { border-top-style: solid; border-top-width: 9px }
  .bs-t-10-pc { border-top-style: solid; border-top-width: 10px }

  .bs-r-1-pc { border-right-style: solid; border-right-width: 1px }
  .bs-r-2-pc { border-right-style: solid; border-right-width: 2px }
  .bs-r-3-pc { border-right-style: solid; border-right-width: 3px }
  .bs-r-4-pc { border-right-style: solid; border-right-width: 4px }
  .bs-r-5-pc { border-right-style: solid; border-right-width: 5px }
  .bs-r-6-pc { border-right-style: solid; border-right-width: 6px }
  .bs-r-7-pc { border-right-style: solid; border-right-width: 7px }
  .bs-r-8-pc { border-right-style: solid; border-right-width: 8px }
  .bs-r-9-pc { border-right-style: solid; border-right-width: 9px }
  .bs-r-10-pc { border-right-style: solid; border-right-width: 10px }

  .bs-l-1-pc { border-left-style: solid; border-left-width: 1px }
  .bs-l-2-pc { border-left-style: solid; border-left-width: 2px }
  .bs-l-3-pc { border-left-style: solid; border-left-width: 3px }
  .bs-l-4-pc { border-left-style: solid; border-left-width: 4px }
  .bs-l-5-pc { border-left-style: solid; border-left-width: 5px }
  .bs-l-6-pc { border-left-style: solid; border-left-width: 6px }
  .bs-l-7-pc { border-left-style: solid; border-left-width: 7px }
  .bs-l-8-pc { border-left-style: solid; border-left-width: 8px }
  .bs-l-9-pc { border-left-style: solid; border-left-width: 9px }
  .bs-l-10-pc { border-left-style: solid; border-left-width: 10px }

  .bs-b-1-pc { border-bottom-style: solid; border-bottom-width: 1px }
  .bs-b-2-pc { border-bottom-style: solid; border-bottom-width: 2px }
  .bs-b-3-pc { border-bottom-style: solid; border-bottom-width: 3px }
  .bs-b-4-pc { border-bottom-style: solid; border-bottom-width: 4px }
  .bs-b-5-pc { border-bottom-style: solid; border-bottom-width: 5px }
  .bs-b-6-pc { border-bottom-style: solid; border-bottom-width: 6px }
  .bs-b-7-pc { border-bottom-style: solid; border-bottom-width: 7px }
  .bs-b-8-pc { border-bottom-style: solid; border-bottom-width: 8px }
  .bs-b-9-pc { border-bottom-style: solid; border-bottom-width: 9px }
  .bs-b-10-pc { border-bottom-style: solid; border-bottom-width: 10px }

  .bd-t-1-pc { border-top-style: dotted; border-top-width: 1px }
  .bd-t-2-pc { border-top-style: dotted; border-top-width: 2px }
  .bd-t-3-pc { border-top-style: dotted; border-top-width: 3px }
  .bd-t-4-pc { border-top-style: dotted; border-top-width: 4px }
  .bd-t-5-pc { border-top-style: dotted; border-top-width: 5px }
  .bd-t-6-pc { border-top-style: dotted; border-top-width: 6px }
  .bd-t-7-pc { border-top-style: dotted; border-top-width: 7px }
  .bd-t-8-pc { border-top-style: dotted; border-top-width: 8px }
  .bd-t-9-pc { border-top-style: dotted; border-top-width: 9px }
  .bd-t-10-pc { border-top-style: dotted; border-top-width: 10px }

  .bd-r-1-pc { border-right-style: dotted; border-right-width: 1px }
  .bd-r-2-pc { border-right-style: dotted; border-right-width: 2px }
  .bd-r-3-pc { border-right-style: dotted; border-right-width: 3px }
  .bd-r-4-pc { border-right-style: dotted; border-right-width: 4px }
  .bd-r-5-pc { border-right-style: dotted; border-right-width: 5px }
  .bd-r-6-pc { border-right-style: dotted; border-right-width: 6px }
  .bd-r-7-pc { border-right-style: dotted; border-right-width: 7px }
  .bd-r-8-pc { border-right-style: dotted; border-right-width: 8px }
  .bd-r-9-pc { border-right-style: dotted; border-right-width: 9px }
  .bd-r-10-pc { border-right-style: dotted; border-right-width: 10px }

  .bd-l-1-pc { border-left-style: dotted; border-left-width: 1px }
  .bd-l-2-pc { border-left-style: dotted; border-left-width: 2px }
  .bd-l-3-pc { border-left-style: dotted; border-left-width: 3px }
  .bd-l-4-pc { border-left-style: dotted; border-left-width: 4px }
  .bd-l-5-pc { border-left-style: dotted; border-left-width: 5px }
  .bd-l-6-pc { border-left-style: dotted; border-left-width: 6px }
  .bd-l-7-pc { border-left-style: dotted; border-left-width: 7px }
  .bd-l-8-pc { border-left-style: dotted; border-left-width: 8px }
  .bd-l-9-pc { border-left-style: dotted; border-left-width: 9px }
  .bd-l-10-pc { border-left-style: dotted; border-left-width: 10px }

  .bd-b-1-pc { border-bottom-style: dotted; border-bottom-width: 1px }
  .bd-b-2-pc { border-bottom-style: dotted; border-bottom-width: 2px }
  .bd-b-3-pc { border-bottom-style: dotted; border-bottom-width: 3px }
  .bd-b-4-pc { border-bottom-style: dotted; border-bottom-width: 4px }
  .bd-b-5-pc { border-bottom-style: dotted; border-bottom-width: 5px }
  .bd-b-6-pc { border-bottom-style: dotted; border-bottom-width: 6px }
  .bd-b-7-pc { border-bottom-style: dotted; border-bottom-width: 7px }
  .bd-b-8-pc { border-bottom-style: dotted; border-bottom-width: 8px }
  .bd-b-9-pc { border-bottom-style: dotted; border-bottom-width: 9px }
  .bd-b-10-pc { border-bottom-style: dotted; border-bottom-width: 10px }
}

/* 
   BORDER RADIUS
-------------------------------------------------------------- */
.br-3{border-radius: 3px }
.br-5{border-radius: 5px }
.br-8{border-radius: 8px }
.br-10{border-radius: 10px }
.br-15{border-radius: 15px }
.br-20{border-radius: 20px }

.br-circle{ border-radius: 1000px }

@media screen and (max-width: 1023px){
  .br-3-sp{ border-radius: 3px }
  .br-5-sp{ border-radius: 5px }
  .br-8-sp{ border-radius: 8px }
  .br-10-sp{ border-radius: 10px }
  .br-15-sp{ border-radius: 15px }
  .br-20-sp{ border-radius: 20px }

  .br-circle-sp{ border-radius: 1000px }
}
@media screen and (min-width: 768px){
  .br-3-tpc{ border-radius: 3px }
  .br-5-tpc{ border-radius: 5px }
  .br-8-tpc{ border-radius: 8px }
  .br-10-tpc{ border-radius: 10px }
  .br-15-tpc{ border-radius: 15px }
  .br-20-tpc{ border-radius: 20px }

  .br-circle-tpc{ border-radius: 1000px }
}
@media screen and (min-width: 1024px){
  .br-3-pc{ border-radius: 3px }
  .br-5-pc{ border-radius: 5px }
  .br-8-pc{ border-radius: 8px }
  .br-10-pc{ border-radius: 10px }
  .br-15-pc{ border-radius: 15px }
  .br-20-pc{ border-radius: 20px }

  .br-circle-pc{ border-radius: 1000px }
}

/*
   コンテンツ幅
--------------------------------------------------------------*/
.w-s{
  padding-left: var(--space-l);
  padding-right: var(--space-l);
}
.w-m{
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}
.w-l{
  padding-left: var(--space-s);
  padding-right: var(--space-s);
}

@media screen and (max-width: 1023px){
  .w-s-sp{
    padding-left: var(--space-l);
    padding-right: var(--space-l);
  }
  .w-m-sp{
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  .w-l-sp{
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }
}
@media screen and (min-width: 768px){
  .w-s-tpc{
    padding-left: var(--space-l);
    padding-right: var(--space-l);
  }
  .w-m-tpc{
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  .w-l-tpc{
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }
}
@media screen and (min-width: 1024px){
  .w-s-pc{
    padding-left: var(--space-l);
    padding-right: var(--space-l);
  }
  .w-m-pc{
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  .w-l-pc{
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }
}

/*
   画像の大きさ
--------------------------------------------------------------*/
.img-square{ aspect-ratio: 1 / 1 }
.img-silver{ aspect-ratio: 10 / 7.072 }
.img-gold{ aspect-ratio: 10 / 6.18 }
.img-platina{ aspect-ratio: 10 / 5.774 }
.img-4-3{ aspect-ratio: 4 / 3 }
.img-3-4{ aspect-ratio: 3 / 4 }

@media screen and (max-width: 1023px){
  .img-square-sp{ aspect-ratio: 1 / 1 }
  .img-silver-sp{ aspect-ratio: 10 / 7.072 }
  .img-gold-sp{ aspect-ratio: 10 / 6.18 }
  .img-platina-sp{ aspect-ratio: 10 / 5.774 }
  .img-4-3-sp{ aspect-ratio: 4 / 3 }
  .img-3-4-sp{ aspect-ratio: 3 / 4 }
}
@media screen and (min-width: 768px){
  .img-square-tpc{ aspect-ratio: 1 / 1 }
  .img-silver-tpc{ aspect-ratio: 10 / 7.072 }
  .img-gold-tpc{ aspect-ratio: 10 / 6.18 }
  .img-platina-tpc{ aspect-ratio: 10 / 5.774 }
  .img-4-3-tpc{ aspect-ratio: 4 / 3 }
  .img-3-4-tpc{ aspect-ratio: 3 / 4 }
}
@media screen and (min-width: 1024px){
  .img-square-pc{ aspect-ratio: 1 / 1 }
  .img-silver-pc{ aspect-ratio: 10 / 7.072 }
  .img-gold-pc{ aspect-ratio: 10 / 6.18 }
  .img-platina-pc{ aspect-ratio: 10 / 5.774 }
  .img-4-3-pc{ aspect-ratio: 4 / 3 }
  .img-3-4-pc{ aspect-ratio: 3 / 4 }
}

/*
   要素を中央寄せにする
--------------------------------------------------------------*/
.p-container{ position: relative }
:where(.p-container) .p-item-c{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

@media screen and (max-width: 1023px){
  .p-container-sp{ position: relative }
  :where(.p-container-sp) .p-item-c{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }
}
@media screen and (min-width: 768px){
  .p-container-tpc{ position: relative }
  :where(.p-container-tpc) .p-item-c{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }
}
@media screen and (min-width: 1024px){
  .p-container-sp{ position: relative }
  :where(.p-container-sp) .p-item-c{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }
}

/*
   丸・三角
--------------------------------------------------------------*/
.clip-circle{ clip-path: circle(50% at 50% 50%) }
.clip-arrow-t{ clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.clip-arrow-r{ clip-path: polygon(0 0, 100% 50%, 0 100%) }
.clip-arrow-b { clip-path: polygon(0 0, 100% 0, 50% 100%) }
.clip-arrow-l { clip-path: polygon(0 50%, 100% 0, 100% 100%) }

@media screen and (max-width: 1023px){
  .clip-circle-sp{ clip-path: circle(50% at 50% 50%) }
  .clip-arrow-t-sp{ clip-path: polygon(50% 0, 100% 100%, 0 100%) }
  .clip-arrow-r-sp{ clip-path: polygon(0 0, 100% 50%, 0 100%) }
  .clip-arrow-b-sp{ clip-path: polygon(0 0, 100% 0, 50% 100%) }
  .clip-arrow-l-sp{ clip-path: polygon(0 50%, 100% 0, 100% 100%) }
}
@media screen and (min-width: 768px){
  .clip-circle-tpc{ clip-path: circle(50% at 50% 50%) }
  .clip-arrow-t-tpc{ clip-path: polygon(50% 0, 100% 100%, 0 100%) }
  .clip-arrow-r-tpc{ clip-path: polygon(0 0, 100% 50%, 0 100%) }
  .clip-arrow-b-tpc{ clip-path: polygon(0 0, 100% 0, 50% 100%) }
  .clip-arrow-l-tpc{ clip-path: polygon(0 50%, 100% 0, 100% 100%) }
}
@media screen and (min-width: 1024px){
  .clip-circle-pc{ clip-path: circle(50% at 50% 50%) }
  .clip-arrow-t-pc{ clip-path: polygon(50% 0, 100% 100%, 0 100%) }
  .clip-arrow-r-pc{ clip-path: polygon(0 0, 100% 50%, 0 100%) }
  .clip-arrow-b-pc{ clip-path: polygon(0 0, 100% 0, 50% 100%) }
  .clip-arrow-l-pc{ clip-path: polygon(0 50%, 100% 0, 100% 100%) }
}
/*
   Z-INDEX
--------------------------------------------------------------*/
.z-0{ z-index: 0 }
.z-10{ z-index: 10 }
.z-20{ z-index: 20 }
.z-30{ z-index: 30 }
.z-40{ z-index: 40 }
.z-50{ z-index: 50 }
.z-60{ z-index: 60 }
.z-70{ z-index: 70 }
.z-80{ z-index: 80 }
.z-90{ z-index: 90 }
.z-100{ z-index: 100 }
.z-110{ z-index: 110 }
.z-120{ z-index: 120 }
.z-130{ z-index: 130 }
.z-140{ z-index: 140 }
.z-150{ z-index: 150 }
.z-160{ z-index: 160 }
.z-170{ z-index: 170 }
.z-180{ z-index: 180 }
.z-190{ z-index: 190 }
.z-200{ z-index: 200 }
.z-210{ z-index: 210 }
.z-220{ z-index: 220 }
.z-230{ z-index: 230 }
.z-240{ z-index: 240 }
.z-250{ z-index: 250 }
.z-260{ z-index: 260 }
.z-270{ z-index: 270 }
.z-280{ z-index: 280 }
.z-290{ z-index: 290 }
.z-300{ z-index: 300 }
.z-310{ z-index: 310 }
.z-320{ z-index: 320 }
.z-330{ z-index: 330 }
.z-340{ z-index: 340 }
.z-350{ z-index: 350 }
.z-360{ z-index: 360 }
.z-370{ z-index: 370 }
.z-380{ z-index: 380 }
.z-390{ z-index: 390 }
.z-400{ z-index: 400 }
.z-410{ z-index: 410 }
.z-420{ z-index: 420 }
.z-430{ z-index: 430 }
.z-440{ z-index: 440 }
.z-450{ z-index: 450 }
.z-460{ z-index: 460 }
.z-470{ z-index: 470 }
.z-480{ z-index: 480 }
.z-490{ z-index: 490 }
.z-500{ z-index: 500 }

@media screen and (max-width: 1023px){
  .z-0-sp{ z-index: 0 }
  .z-10-sp{ z-index: 10 }
  .z-20-sp{ z-index: 20 }
  .z-30-sp{ z-index: 30 }
  .z-40-sp{ z-index: 40 }
  .z-50-sp{ z-index: 50 }
  .z-60-sp{ z-index: 60 }
  .z-70-sp{ z-index: 70 }
  .z-80-sp{ z-index: 80 }
  .z-90-sp{ z-index: 90 }
  .z-100-sp{ z-index: 100 }
  .z-110-sp{ z-index: 110 }
  .z-120-sp{ z-index: 120 }
  .z-130-sp{ z-index: 130 }
  .z-140-sp{ z-index: 140 }
  .z-150-sp{ z-index: 150 }
  .z-160-sp{ z-index: 160 }
  .z-170-sp{ z-index: 170 }
  .z-180-sp{ z-index: 180 }
  .z-190-sp{ z-index: 190 }
  .z-200-sp{ z-index: 200 }
  .z-210-sp{ z-index: 210 }
  .z-220-sp{ z-index: 220 }
  .z-230-sp{ z-index: 230 }
  .z-240-sp{ z-index: 240 }
  .z-250-sp{ z-index: 250 }
  .z-260-sp{ z-index: 260 }
  .z-270-sp{ z-index: 270 }
  .z-280-sp{ z-index: 280 }
  .z-290-sp{ z-index: 290 }
  .z-300-sp{ z-index: 300 }
  .z-310-sp{ z-index: 310 }
  .z-320-sp{ z-index: 320 }
  .z-330-sp{ z-index: 330 }
  .z-340-sp{ z-index: 340 }
  .z-350-sp{ z-index: 350 }
  .z-360-sp{ z-index: 360 }
  .z-370-sp{ z-index: 370 }
  .z-380-sp{ z-index: 380 }
  .z-390-sp{ z-index: 390 }
  .z-400-sp{ z-index: 400 }
  .z-410-sp{ z-index: 410 }
  .z-420-sp{ z-index: 420 }
  .z-430-sp{ z-index: 430 }
  .z-440-sp{ z-index: 440 }
  .z-450-sp{ z-index: 450 }
  .z-460-sp{ z-index: 460 }
  .z-470-sp{ z-index: 470 }
  .z-480-sp{ z-index: 480 }
  .z-490-sp{ z-index: 490 }
  .z-500-sp{ z-index: 500 }
}
@media screen and (min-width: 768px) {
  .z-0-tpc{ z-index: 0 }
  .z-10-tpc{ z-index: 10 }
  .z-20-tpc{ z-index: 20 }
  .z-30-tpc{ z-index: 30 }
  .z-40-tpc{ z-index: 40 }
  .z-50-tpc{ z-index: 50 }
  .z-60-tpc{ z-index: 60 }
  .z-70-tpc{ z-index: 70 }
  .z-80-tpc{ z-index: 80 }
  .z-90-tpc{ z-index: 90 }
  .z-100-tpc{ z-index: 100 }
  .z-110-tpc{ z-index: 110 }
  .z-120-tpc{ z-index: 120 }
  .z-130-tpc{ z-index: 130 }
  .z-140-tpc{ z-index: 140 }
  .z-150-tpc{ z-index: 150 }
  .z-160-tpc{ z-index: 160 }
  .z-170-tpc{ z-index: 170 }
  .z-180-tpc{ z-index: 180 }
  .z-190-tpc{ z-index: 190 }
  .z-200-tpc{ z-index: 200 }
  .z-210-tpc{ z-index: 210 }
  .z-220-tpc{ z-index: 220 }
  .z-230-tpc{ z-index: 230 }
  .z-240-tpc{ z-index: 240 }
  .z-250-tpc{ z-index: 250 }
  .z-260-tpc{ z-index: 260 }
  .z-270-tpc{ z-index: 270 }
  .z-280-tpc{ z-index: 280 }
  .z-290-tpc{ z-index: 290 }
  .z-300-tpc{ z-index: 300 }
  .z-310-tpc{ z-index: 310 }
  .z-320-tpc{ z-index: 320 }
  .z-330-tpc{ z-index: 330 }
  .z-340-tpc{ z-index: 340 }
  .z-350-tpc{ z-index: 350 }
  .z-360-tpc{ z-index: 360 }
  .z-370-tpc{ z-index: 370 }
  .z-380-tpc{ z-index: 380 }
  .z-390-tpc{ z-index: 390 }
  .z-400-tpc{ z-index: 400 }
  .z-410-tpc{ z-index: 410 }
  .z-420-tpc{ z-index: 420 }
  .z-430-tpc{ z-index: 430 }
  .z-440-tpc{ z-index: 440 }
  .z-450-tpc{ z-index: 450 }
  .z-460-tpc{ z-index: 460 }
  .z-470-tpc{ z-index: 470 }
  .z-480-tpc{ z-index: 480 }
  .z-490-tpc{ z-index: 490 }
  .z-500-tpc{ z-index: 500 }
}
@media screen and (min-width: 1024px) {
  .z-0-pc{ z-index: 0 }
  .z-10-pc{ z-index: 10 }
  .z-20-pc{ z-index: 20 }
  .z-30-pc{ z-index: 30 }
  .z-40-pc{ z-index: 40 }
  .z-50-pc{ z-index: 50 }
  .z-60-pc{ z-index: 60 }
  .z-70-pc{ z-index: 70 }
  .z-80-pc{ z-index: 80 }
  .z-90-pc{ z-index: 90 }
  .z-100-pc{ z-index: 100 }
  .z-110-pc{ z-index: 110 }
  .z-120-pc{ z-index: 120 }
  .z-130-pc{ z-index: 130 }
  .z-140-pc{ z-index: 140 }
  .z-150-pc{ z-index: 150 }
  .z-160-pc{ z-index: 160 }
  .z-170-pc{ z-index: 170 }
  .z-180-pc{ z-index: 180 }
  .z-190-pc{ z-index: 190 }
  .z-200-pc{ z-index: 200 }
  .z-210-pc{ z-index: 210 }
  .z-220-pc{ z-index: 220 }
  .z-230-pc{ z-index: 230 }
  .z-240-pc{ z-index: 240 }
  .z-250-pc{ z-index: 250 }
  .z-260-pc{ z-index: 260 }
  .z-270-pc{ z-index: 270 }
  .z-280-pc{ z-index: 280 }
  .z-290-pc{ z-index: 290 }
  .z-300-pc{ z-index: 300 }
  .z-310-pc{ z-index: 310 }
  .z-320-pc{ z-index: 320 }
  .z-330-pc{ z-index: 330 }
  .z-340-pc{ z-index: 340 }
  .z-350-pc{ z-index: 350 }
  .z-360-pc{ z-index: 360 }
  .z-370-pc{ z-index: 370 }
  .z-380-pc{ z-index: 380 }
  .z-390-pc{ z-index: 390 }
  .z-400-pc{ z-index: 400 }
  .z-410-pc{ z-index: 410 }
  .z-420-pc{ z-index: 420 }
  .z-430-pc{ z-index: 430 }
  .z-440-pc{ z-index: 440 }
  .z-450-pc{ z-index: 450 }
  .z-460-pc{ z-index: 460 }
  .z-470-pc{ z-index: 470 }
  .z-480-pc{ z-index: 480 }
  .z-490-pc{ z-index: 490 }
  .z-500-pc{ z-index: 500 }
}

/*
   その他
--------------------------------------------------------------*/
.db { display: block }
.di { display: inline-block }
.nw { white-space: nowrap }

.p-r{ position: relative }
.p-a{ position: absolute }
.p-f{ position: fixed }

.p-initial{
  top: 0;
  left: 0
}

:where(.pc,.tpc) { display: none }

@media screen and (max-width: 1023px){
  .db-sp { display: block }
  .di-sp { display: inline-block }
  .nw-sp { white-space: nowrap }

  .p-r-sp{ position: relative }
  .p-a-sp{ position: absolute }
  .p-f-sp{ position: fixed }

  .p-initial-sp{
    top: 0;
    left: 0
  }
}
@media screen and (min-width: 768px) {
  .db-tpc { display: block }
  .di-tpc { display: inline-block }
  .nw-tpc { white-space: nowrap }

  .p-r-tpc{ position: relative }
  .p-a-tpc{ position: absolute }
  .p-f-tpc{ position: fixed }

  .p-initial-tpc{
    top: 0;
    left: 0
  }
}
@media screen and (min-width: 1024px) {
  .db-pc { display: block }
  .di-pc { display: inline-block }
  .nw-pc { white-space: nowrap }

  .p-r-pc{ position: relative }
  .p-a-pc{ position: absolute }
  .p-f-pc{ position: fixed }

  .p-initial-pc{
    top: 0;
    left: 0
  }
}

/*
   OVERFLOW
--------------------------------------------------------------*/
.of-hidden{
  overflow: hidden;
}
.of-x-hidden{
  overflow-x: hidden;
}
.of-y-hidden{
  overflow-y: hidden;
}
.of-x-scroll{
  overflow-x: scroll;
}
.of-y-scroll{
  overflow-y: scroll;
}
.of-x-scroll::-webkit-scrollbar {
  height: 8px;
}
.of-y-scroll::-webkit-scrollbar {
  width: 8px;
}
.of-x-scroll::-webkit-scrollbar-track,
.of-y-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}
.of-x-scroll::-webkit-scrollbar-thumb,
.of-y-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-base1);
  border-radius: 10px;
}
.scrollbar-none::-webkit-scrollbar {
  display:none;
}
@media screen and (max-width: 1023px){
  .of-hidden-sp{
    overflow: hidden;
  }
  .of-x-hidden-sp{
    overflow-x: hidden;
  }
  .of-y-hidden-sp{
    overflow-y: hidden;
  }
  .of-x-scroll-sp{
    overflow-x: scroll;
  }
  .of-y-scroll-sp{
    overflow-y: scroll;
  }
  .of-x-scroll-sp::-webkit-scrollbar{
    height: 8px;
  }
  .of-y-scroll-sp::-webkit-scrollbar {
    width: 8px;
  }
  .of-x-scroll-sp::-webkit-scrollbar-track,
  .of-y-scroll-sp::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .of-x-scroll-sp::-webkit-scrollbar-thumb,
  .of-y-scroll-sp::-webkit-scrollbar-thumb {
    background-color: var(--color-base1);
    border-radius: 10px;
  }
  .scrollbar-none-sp::-webkit-scrollbar {
    display:none;
  }
}
@media screen and (min-width: 768px) {
  .of-hidden-tpc{
    overflow: hidden;
  }
  .of-x-hidden-tpc{
    overflow-x: hidden;
  }
  .of-y-hidden-tpc{
    overflow-y: hidden;
  }
  .of-x-scroll-tpc{
    overflow-x: scroll;
  }
  .of-y-scroll-tpc{
    overflow-y: scroll;
  }
  .of-x-scroll-tpc::-webkit-scrollbar{
   height: 8px;
  }
  .of-y-scroll-tpc::-webkit-scrollbar {
    width: 8px;
  }
  .of-x-scroll-tpc::-webkit-scrollbar-track,
  .of-y-scroll-tpc::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .of-x-scroll-tpc::-webkit-scrollbar-thumb,
  .of-y-scroll-tpc::-webkit-scrollbar-thumb {
    background-color: var(--color-base1);
    border-radius: 10px;
  }
  .scrollbar-none-tpc::-webkit-scrollbar {
    display:none;
  }
}
@media screen and (min-width: 1024px) {
  .of-hidden-pc{
    overflow: hidden;
  }
  .of-x-hidden-pc{
    overflow-x: hidden;
  }
  .of-y-hidden-pc{
    overflow-y: hidden;
  }
  .of-x-scroll-pc{
    overflow-x: scroll;
  }
  .of-y-scroll-pc{
    overflow-y: scroll;
  }
  .of-x-scroll-pc::-webkit-scrollbar{
    width: 8px;
  }
  .of-y-scroll-pc::-webkit-scrollbar {
    height: 8px;
  }
  .of-x-scroll-pc::-webkit-scrollbar-track,
  .of-y-scroll-pc::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .of-x-scroll-pc::-webkit-scrollbar-thumb,
  .of-y-scroll-pc::-webkit-scrollbar-thumb {
    background-color: var(--color-base2);
    border-radius: 10px;
  }
  .scrollbar-none-pc::-webkit-scrollbar {
    display:none;
  }
}

/*
   NONE or ONLY
--------------------------------------------------------------*/

@media screen and (max-width: 767px) {
  .pc { display: none }
  .tpc { display: none }
  .sp { display: block }
  .only-pc { display: none; }
  .only-tpc { display: none; }
  .only-sp { display: block; }
  .none-sp{ display: none !important }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .pc { display: none }
  .sp { display: block }
  .tpc { display: block }
  .only-sp { display: none; }
  .only-pc { display: none; }
  .only-tpc { display: block; }
  .none-tpc{ display: none !important }
}

@media screen and (min-width: 1024px) {
  .sp { display: none }
  .tpc { display: block }
  .pc { display: block }
  .only-sp { display: none; }
  .only-tpc { display: none; }
  .only-pc { display: block; }
  .none-pc{ display: none !important}
}

/*
   Cancellation
--------------------------------------------------------------*/
.p-0{ padding: 0 }
.ptb-0 { padding-top: 0; padding-bottom: 0 }
.prl-0 { padding-right: 0; padding-left: 0 }
.pt-0 { padding-top: 0 }
.pr-0 { padding-right: 0 }
.pl-0 { padding-left: 0 }
.pb-0 { padding-bottom: 0 }

.m-0{ margin: 0 }
.mtb-0 { margin-top: 0; margin-bottom: 0 }
.mrl-0 { margin-right: 0; margin-left: 0 }
.mt-0 { margin-top: 0 }
.mr-0 { margin-right: 0 }
.ml-0 { margin-left: 0 }
.mb-0 { margin-bottom: 0 }

.l-0{ line-height: 0 }

.g-0{ gap: 0 }
.g-c-0{ column-gap: 0 }
.g-r-0{ row-gap: 0 }

.bs-0{ border: none }
.bd-0{ border: none }
@media screen and (max-width: 1023px){
  .p-0-sp{ padding: 0 }
  .ptb-0-sp { padding-top: 0; padding-bottom: 0 }
  .prl-0-sp { padding-right: 0; padding-left: 0 }
  .pt-0-sp { padding-top: 0 }
  .pr-0-sp { padding-right: 0 }
  .pl-0-sp { padding-left: 0 }
  .pb-0-sp { padding-bottom: 0 }

  .m-0-sp{ margin: 0 }
  .mtb-0-sp { margin-top: 0; margin-bottom: 0 }
  .mrl-0-sp { margin-right: 0; margin-left: 0 }
  .mt-0-sp { margin-top: 0 }
  .mr-0-sp { margin-right: 0 }
  .ml-0-sp { margin-left: 0 }
  .mb-0-sp { margin-bottom: 0 }

  .l-0-sp{ line-height: 0 }

  .g-0-sp{ gap: 0 }
  .g-c-0-sp{ column-gap: 0 }
  .g-r-0-sp{ row-gap: 0 }

  .bs-0-sp{ border: none }
  .bd-0-sp{ border: none }
}
@media screen and (min-width: 768px) {
  .p-0-tpc{ padding: 0 }
  .ptb-0-tpc { padding-top: 0; padding-bottom: 0 }
  .prl-0-tpc { padding-right: 0; padding-left: 0 }
  .pt-0-tpc { padding-top: 0 }
  .pr-0-tpc { padding-right: 0 }
  .pl-0-tpc { padding-left: 0 }
  .pb-0-tpc { padding-bottom: 0 }

  .m-0-tpc{ margin: 0 }
  .mtb-0-tpc { margin-top: 0; margin-bottom: 0 }
  .mrl-0-tpc { margin-right: 0; margin-left: 0 }
  .mt-0-tpc { margin-top: 0 }
  .mr-0-tpc { margin-right: 0 }
  .ml-0-tpc { margin-left: 0 }
  .mb-0-tpc { margin-bottom: 0 }

  .l-0-tpc{ line-height: 0 }

  .g-0-tpc{ gap: 0 }
  .g-c-0-tpc{ column-gap: 0 }
  .g-r-0-tpc{ row-gap: 0 }

  .bs-0-tpc{ border: none }
  .bd-0-tpc{ border: none }
}
@media screen and (min-width: 1024px) {
  .p-0-pc{ padding: 0 }
  .ptb-0-pc { padding-top: 0; padding-bottom: 0 }
  .prl-0-pc { padding-right: 0; padding-left: 0 }
  .pt-0-pc { padding-top: 0 }
  .pr-0-pc { padding-right: 0 }
  .pl-0-pc { padding-left: 0 }
  .pb-0-pc { padding-bottom: 0 }

  .m-0-pc{ margin: 0 }
  .mtb-0-pc { margin-top: 0; margin-bottom: 0 }
  .mrl-0-pc { margin-right: 0; margin-left: 0 }
  .mt-0-pc { margin-top: 0 }
  .mr-0-pc { margin-right: 0 }
  .ml-0-pc { margin-left: 0 }
  .mb-0-pc { margin-bottom: 0 }

  .l-0-pc{ line-height: 0 }

  .g-0-pc{ gap: 0 }
  .g-c-0-pc{ column-gap: 0 }
  .g-r-0-pc{ row-gap: 0 }

  .bs-0-pc{ border: none }
  .bd-0-pc{ border: none }
}

.td-01{transition-delay: .1s}
.td-02{transition-delay: .2s}
.td-03{transition-delay: .3s}
.td-04{transition-delay: .4s}
.td-05{transition-delay: .5s}
.td-06{transition-delay: .6s}
.td-07{transition-delay: .7s}
.td-08{transition-delay: .8s}
.td-09{transition-delay: .9s}
.td-10{transition-delay: 1s}

@media screen and (max-width: 1023px){
  .td-01-sp{transition-delay: .1s}
  .td-02-sp{transition-delay: .2s}
  .td-03-sp{transition-delay: .3s}
  .td-04-sp{transition-delay: .4s}
  .td-05-sp{transition-delay: .5s}
  .td-06-sp{transition-delay: .6s}
  .td-07-sp{transition-delay: .7s}
  .td-08-sp{transition-delay: .8s}
  .td-09-sp{transition-delay: .9s}
  .td-10-sp{transition-delay: 1s}
}

@media screen and (min-width: 768px) {
  .td-01-tpc{transition-delay: .1s}
  .td-02-tpc{transition-delay: .2s}
  .td-03-tpc{transition-delay: .3s}
  .td-04-tpc{transition-delay: .4s}
  .td-05-tpc{transition-delay: .5s}
  .td-06-tpc{transition-delay: .6s}
  .td-07-tpc{transition-delay: .7s}
  .td-08-tpc{transition-delay: .8s}
  .td-09-tpc{transition-delay: .9s}
  .td-10-tpc{transition-delay: 1s}
}

@media screen and (min-width: 1024px) {
  .td-01-pc{transition-delay: .1s}
  .td-02-pc{transition-delay: .2s}
  .td-03-pc{transition-delay: .3s}
  .td-04-pc{transition-delay: .4s}
  .td-05-pc{transition-delay: .5s}
  .td-06-pc{transition-delay: .6s}
  .td-07-pc{transition-delay: .7s}
  .td-08-pc{transition-delay: .8s}
  .td-09-pc{transition-delay: .9s}
  .td-10-pc{transition-delay: 1s}
}