@charset "UTF-8";
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  outline: none !important;
}
html {
  overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: 100%;
  font-weight: normal;
}

ol,
ul,
li {
  list-style: none;
}

fieldset,
img {
  border: 0;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th {
  text-align: left;
}
a {
  color: #000000;
  display: block;
  transition: all 0.4s;
}
a:focus {
  outline: none;
}

.opa {
  transition: all 0.4s;
}

.opa:hover {
  opacity: 0.7;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}

a {
  text-decoration: none;
  cursor: pointer;
}

/* フォーム初期化 */


textarea {
  resize: vertical;
}

input[type="radio"] {
  display: none;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

body * {
  box-sizing: border-box;
}

/* 表示非表示 */
.on480 {
  display: none;
}
@media screen and (max-width: 480px) {
  .on480 {
    display: block;
  }
  .off480 {
    display: none;
  }
}

.on768 {
  display: none;
}
@media screen and (max-width: 768px) {
  .on768 {
    display: block;
  }
  .off768 {
    display: none;
  }
}

.on1024 {
  display: none;
}
@media screen and (max-width: 1024px) {
  .on1024 {
    display: block;
  }
  .off1024 {
    display: none;
  }
}

/* flex */
.flex {
  display: flex;
}
.flex_between {
  display: flex;
  justify-content: space-between;
}
.flex_ctr {
  display: flex;
  justify-content: center;
}
.flex_end {
  display: flex;
  justify-content: flex-end;
}
.align_ctr {
  align-items: center;
}
.align_base {
  align-items: baseline;
}
.align_end {
  align-items: flex-end;
}
.align_stretch {
  align-items: stretch;
}
.flex_column {
  display: flex;
  flex-direction: column;
}
.flex_row {
  display: flex;
  flex-direction: row;
}

/* margin */
.mx_auto {
  margin: 0 auto;
}
.my_auto {
  margin: auto 0;
}

.mt_auto {
  margin-top: auto;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: calc(5px + 5 * (100vw - 375px) / 991);
}
.mt20 {
  margin-top: calc(10px + 10 * (100vw - 375px) / 991);
}
.mt30 {
  margin-top: calc(15px + 15 * (100vw - 375px) / 991);
}
.mt40 {
  margin-top: calc(20px + 20 * (100vw - 375px) / 991);
}
.mt60 {
  margin-top: calc(40px + 20 * (100vw - 375px) / 991);
}
.mt80 {
  margin-top: calc(60px + 20 * (100vw - 375px) / 991);
}
.mt100 {
  margin-top: calc(60px + 40 * (100vw - 375px) / 991);
}
.mt120 {
  margin-top: calc(80px + 40 * (100vw - 375px) / 991);
}
.mt140 {
  margin-top: calc(80px + 60 * (100vw - 375px) / 991);
}

.mb_auto {
  margin-bottom: auto;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: calc(5px + 5 * (100vw - 375px) / 991);
}
.mb20 {
  margin-bottom: calc(10px + 10 * (100vw - 375px) / 991);
}
.mb30 {
  margin-bottom: calc(15px + 15 * (100vw - 375px) / 991);
}
.mb40 {
  margin-bottom: calc(20px + 20 * (100vw - 375px) / 991);
}
.mb60 {
  margin-bottom: calc(40px + 20 * (100vw - 375px) / 991);
}
.mb80 {
  margin-bottom: calc(60px + 20 * (100vw - 375px) / 991);
}
.mb100 {
  margin-bottom: calc(60px + 40 * (100vw - 375px) / 991);
}
.mb120 {
  margin-bottom: calc(80px + 40 * (100vw - 375px) / 991);
}
.mb140 {
  margin-bottom: calc(80px + 60 * (100vw - 375px) / 991);
}

.mr_auto {
  margin-right: auto;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: calc(5px + 5 * (100vw - 375px) / 991);
}
.mr20 {
  margin-right: calc(10px + 10 * (100vw - 375px) / 991);
}
.mr30 {
  margin-right: calc(15px + 15 * (100vw - 375px) / 991);
}
.mr40 {
  margin-right: calc(20px + 20 * (100vw - 375px) / 991);
}
.mr60 {
  margin-right: calc(40px + 20 * (100vw - 375px) / 991);
}
.mr80 {
  margin-right: calc(60px + 20 * (100vw - 375px) / 991);
}
.mr100 {
  margin-right: calc(60px + 40 * (100vw - 375px) / 991);
}
.mr120 {
  margin-right: calc(80px + 40 * (100vw - 375px) / 991);
}
.mr140 {
  margin-right: calc(80px + 60 * (100vw - 375px) / 991);
}

.ml_auto {
  margin-left: auto;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: calc(5px + 5 * (100vw - 375px) / 991);
}
.ml20 {
  margin-left: calc(10px + 10 * (100vw - 375px) / 991);
}
.ml30 {
  margin-left: calc(15px + 15 * (100vw - 375px) / 991);
}
.ml40 {
  margin-left: calc(20px + 20 * (100vw - 375px) / 991);
}
.ml60 {
  margin-left: calc(40px + 20 * (100vw - 375px) / 991);
}
.ml80 {
  margin-left: calc(60px + 20 * (100vw - 375px) / 991);
}
.ml100 {
  margin-left: calc(60px + 40 * (100vw - 375px) / 991);
}
.ml120 {
  margin-left: calc(80px + 40 * (100vw - 375px) / 991);
}
.ml140 {
  margin-left: calc(80px + 60 * (100vw - 375px) / 991);
}

@media screen and (min-width: 1366px) {
  .mt10 {
    margin-top: 10px;
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .ml10 {
    margin-left: 10px;
  }

  .mt20 {
    margin-top: 20px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .ml20 {
    margin-left: 20px;
  }

  .mt30 {
    margin-top: 30px;
  }
  .mb30 {
    margin-bottom: 30px;
  }
  .mr30 {
    margin-right: 30px;
  }
  .ml30 {
    margin-left: 30px;
  }

  .mt40 {
    margin-top: 40px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .mr40 {
    margin-right: 40px;
  }
  .ml40 {
    margin-left: 40px;
  }

  .mt60 {
    margin-top: 60px;
  }
  .mb60 {
    margin-bottom: 60px;
  }
  .mr60 {
    margin-right: 60px;
  }
  .ml60 {
    margin-left: 60px;
  }

  .mt80 {
    margin-top: 80px;
  }
  .mb80 {
    margin-bottom: 80px;
  }
  .mr80 {
    margin-right: 80px;
  }
  .ml80 {
    margin-left: 80px;
  }

  .mt100 {
    margin-top: 100px;
  }
  .mb100 {
    margin-bottom: 100px;
  }
  .mr100 {
    margin-right: 100px;
  }
  .ml100 {
    margin-left: 100px;
  }

  .mt120 {
    margin-top: 120px;
  }
  .mb120 {
    margin-bottom: 120px;
  }
  .mr120 {
    margin-right: 120px;
  }
  .ml120 {
    margin-left: 120px;
  }

  .mt140 {
    margin-top: 140px;
  }
  .mb140 {
    margin-bottom: 140px;
  }
  .mr140 {
    margin-right: 140px;
  }
  .ml140 {
    margin-left: 140px;
  }
}

/* padding */
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: calc(5px + 5 * (100vw - 375px) / 991);
}
.pt20 {
  padding-top: calc(10px + 10 * (100vw - 375px) / 991);
}
.pt30 {
  padding-top: calc(15px + 15 * (100vw - 375px) / 991);
}
.pt40 {
  padding-top: calc(20px + 20 * (100vw - 375px) / 991);
}
.pt60 {
  padding-top: calc(40px + 20 * (100vw - 375px) / 991);
}
.pt80 {
  padding-top: calc(60px + 20 * (100vw - 375px) / 991);
}
.pt100 {
  padding-top: calc(60px + 40 * (100vw - 375px) / 991);
}
.pt120 {
  padding-top: calc(80px + 40 * (100vw - 375px) / 991);
}
.pt140 {
  padding-top: calc(80px + 60 * (100vw - 375px) / 991);
}

.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: calc(5px + 5 * (100vw - 375px) / 991);
}
.pb20 {
  padding-bottom: calc(10px + 10 * (100vw - 375px) / 991);
}
.pb30 {
  padding-bottom: calc(15px + 15 * (100vw - 375px) / 991);
}
.pb40 {
  padding-bottom: calc(20px + 20 * (100vw - 375px) / 991);
}
.pb60 {
  padding-bottom: calc(40px + 20 * (100vw - 375px) / 991);
}
.pb80 {
  padding-bottom: calc(60px + 20 * (100vw - 375px) / 991);
}
.pb100 {
  padding-bottom: calc(60px + 40 * (100vw - 375px) / 991);
}
.pb120 {
  padding-bottom: calc(80px + 40 * (100vw - 375px) / 991);
}
.pb140 {
  padding-bottom: calc(80px + 60 * (100vw - 375px) / 991);
}

.pr5 {
  padding-right: 5px;
}
.pr10 {
  padding-right: calc(5px + 5 * (100vw - 375px) / 991);
}
.pr20 {
  padding-right: calc(10px + 10 * (100vw - 375px) / 991);
}
.pr30 {
  padding-right: calc(15px + 15 * (100vw - 375px) / 991);
}
.pr40 {
  padding-right: calc(20px + 20 * (100vw - 375px) / 991);
}
.pr60 {
  padding-right: calc(40px + 20 * (100vw - 375px) / 991);
}
.pr80 {
  padding-right: calc(60px + 20 * (100vw - 375px) / 991);
}
.pr100 {
  padding-right: calc(60px + 40 * (100vw - 375px) / 991);
}
.pr120 {
  padding-right: calc(80px + 40 * (100vw - 375px) / 991);
}
.pr140 {
  padding-right: calc(80px + 60 * (100vw - 375px) / 991);
}

.pl5 {
  padding-left: 5px;
}
.pl10 {
  padding-left: calc(5px + 5 * (100vw - 375px) / 991);
}
.pl20 {
  padding-left: calc(10px + 10 * (100vw - 375px) / 991);
}
.pl30 {
  padding-left: calc(15px + 15 * (100vw - 375px) / 991);
}
.pl40 {
  padding-left: calc(20px + 20 * (100vw - 375px) / 991);
}
.pl60 {
  padding-left: calc(40px + 20 * (100vw - 375px) / 991);
}
.pl80 {
  padding-left: calc(60px + 20 * (100vw - 375px) / 991);
}
.pl100 {
  padding-left: calc(60px + 40 * (100vw - 375px) / 991);
}
.pl120 {
  padding-left: calc(80px + 40 * (100vw - 375px) / 991);
}
.pl140 {
  padding-left: calc(80px + 60 * (100vw - 375px) / 991);
}

.p5 {
  padding: 5px;
}
.p10 {
  padding: calc(5px + 5 * (100vw - 375px) / 991);
}
.p20 {
  padding: calc(10px + 10 * (100vw - 375px) / 991);
}
.p30 {
  padding: calc(15px + 15 * (100vw - 375px) / 991);
}
.p40 {
  padding: calc(20px + 20 * (100vw - 375px) / 991);
}
.p60 {
  padding: calc(40px + 20 * (100vw - 375px) / 991);
}
.p80 {
  padding: calc(60px + 20 * (100vw - 375px) / 991);
}
.p100 {
  padding: calc(60px + 40 * (100vw - 375px) / 991);
}
.p120 {
  padding: calc(80px + 40 * (100vw - 375px) / 991);
}
.p140 {
  padding: calc(80px + 60 * (100vw - 375px) / 991);
}

.px5 {
  padding: 0 5px;
}
.px10 {
  padding: 0 calc(5px + 5 * (100vw - 375px) / 991);
}
.px20 {
  padding: 0 calc(10px + 10 * (100vw - 375px) / 991);
}
.px30 {
  padding: 0 calc(15px + 15 * (100vw - 375px) / 991);
}
.px40 {
  padding: 0 calc(20px + 20 * (100vw - 375px) / 991);
}
.px60 {
  padding: 0 calc(40px + 20 * (100vw - 375px) / 991);
}
.px80 {
  padding: 0 calc(60px + 20 * (100vw - 375px) / 991);
}
.px100 {
  padding: 0 calc(60px + 40 * (100vw - 375px) / 991);
}
.px120 {
  padding: 0 calc(80px + 40 * (100vw - 375px) / 991);
}
.px140 {
  padding: 0 calc(80px + 60 * (100vw - 375px) / 991);
}

.py5 {
  padding: 5px 0;
}
.py10 {
  padding: calc(5px + 5 * (100vw - 375px) / 991) 0;
}
.py20 {
  padding: calc(10px + 10 * (100vw - 375px) / 991) 0;
}
.py30 {
  padding: calc(15px + 15 * (100vw - 375px) / 991) 0;
}
.py40 {
  padding: calc(20px + 20 * (100vw - 375px) / 991) 0;
}
.py60 {
  padding: calc(40px + 20 * (100vw - 375px) / 991) 0;
}
.py80 {
  padding: calc(60px + 20 * (100vw - 375px) / 991) 0;
}
.py100 {
  padding: calc(60px + 40 * (100vw - 375px) / 991) 0;
}
.py120 {
  padding: calc(80px + 40 * (100vw - 375px) / 991) 0;
}
.py140 {
  padding: calc(80px + 60 * (100vw - 375px) / 991) 0;
}

@media screen and (min-width: 1366px) {
  .pt10 {
    padding-top: 10px;
  }
  .pb10 {
    padding-bottom: 10px;
  }
  .pr10 {
    padding-right: 10px;
  }
  .pl10 {
    padding-left: 10px;
  }
  .p10 {
    padding: 10px;
  }
  .px10 {
    padding: 0 10px;
  }
  .py10 {
    padding: 10px 0;
  }

  .pt20 {
    padding-top: 20px;
  }
  .pb20 {
    padding-bottom: 20px;
  }
  .pr20 {
    padding-right: 20px;
  }
  .pl20 {
    padding-left: 20px;
  }
  .p20 {
    padding: 20px;
  }
  .px20 {
    padding: 0 20px;
  }
  .py20 {
    padding: 20px 0;
  }

  .pt30 {
    padding-top: 30px;
  }
  .pb30 {
    padding-bottom: 30px;
  }
  .pr30 {
    padding-right: 30px;
  }
  .pl30 {
    padding-left: 30px;
  }
  .p30 {
    padding: 30px;
  }
  .px30 {
    padding: 0 30px;
  }
  .py30 {
    padding: 30px 0;
  }

  .pt40 {
    padding-top: 40px;
  }
  .pb40 {
    padding-bottom: 40px;
  }
  .pr40 {
    padding-right: 40px;
  }
  .pl40 {
    padding-left: 40px;
  }
  .p40 {
    padding: 40px;
  }
  .px40 {
    padding: 0 40px;
  }
  .py40 {
    padding: 40px 0;
  }

  .pt60 {
    padding-top: 60px;
  }
  .pb60 {
    padding-bottom: 60px;
  }
  .pr60 {
    padding-right: 60px;
  }
  .pl60 {
    padding-left: 60px;
  }
  .p60 {
    padding: 60px;
  }
  .px60 {
    padding: 0 60px;
  }
  .py60 {
    padding: 60px 0;
  }

  .pt80 {
    padding-top: 80px;
  }
  .pb80 {
    padding-bottom: 80px;
  }
  .pr80 {
    padding-right: 80px;
  }
  .pl80 {
    padding-left: 80px;
  }
  .p80 {
    padding: 80px;
  }
  .px80 {
    padding: 0 80px;
  }
  .py80 {
    padding: 80px 0;
  }

  .pt100 {
    padding-top: 100px;
  }
  .pb100 {
    padding-bottom: 100px;
  }
  .pr100 {
    padding-right: 100px;
  }
  .pl100 {
    padding-left: 100px;
  }
  .p100 {
    padding: 100px;
  }
  .px100 {
    padding: 0 100px;
  }
  .py100 {
    padding: 100px 0;
  }

  .pt120 {
    padding-top: 120px;
  }
  .pb120 {
    padding-bottom: 120px;
  }
  .pr120 {
    padding-right: 120px;
  }
  .pl120 {
    padding-left: 120px;
  }
  .p120 {
    padding: 120px;
  }
  .px120 {
    padding: 0 120px;
  }
  .py120 {
    padding: 120px 0;
  }

  .pt140 {
    padding-top: 140px;
  }
  .pb140 {
    padding-bottom: 140px;
  }
  .pr140 {
    padding-right: 140px;
  }
  .pl140 {
    padding-left: 140px;
  }
  .p140 {
    padding: 140px;
  }
  .px140 {
    padding: 0 140px;
  }
  .py140 {
    padding: 140px 0;
  }
}