@charset "UTF-8";

body {
  margin: 0;
}

.character {
  max-width: 980px;
  width: 96%;
  margin: 0 auto 50px;
  color: #382712;
  line-height: 1;
  line-break: strict;
  /* font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; */
}

.character *,
.character *:after,
.character *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.character h1,
.character h2,
.character h3,
.character h4,
.character h5,
.character h6,
.character p,
.character address,
.character ul,
.character ol,
.character li,
.character dl,
.character dt,
.character dd,
.character table,
.character th,
.character td,
.character img,
.character form {
  border: none;
  font: inherit;
  list-style-type: none;
  word-break: break-word;
}

.character input,
.character button,
.character textarea,
.character select {
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #382712;
  font-weight: normal;
}

.character textarea {
  resize: vertical;
}

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

.character a {
  text-decoration: none;
  color: inherit;
  outline: none;
}

.character img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

@media print,
screen and (min-width: 768px) {
  .character .sp {
    display: none !important;
  }
}

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

@media screen and (max-width: 767px) {
  .character {
    width: 100%;
  }
}

.character .character__ttl {
  /* padding: 16px; */
  padding: 20px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  background-color: #EB6120;
  position: relative;
  /* background-color: #9c652e; */
  /* background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(128, 81, 36, 0.5) 2px, rgba(128, 81, 36, 0.5) 4px); */
}

.character h2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 70px 0 0;
  border-color: #000000 transparent transparent transparent;
}

@media screen and (max-width: 767px) {
  .l-main {
    padding-top: 0;
  }

  .character .character__ttl {
    padding: 4vw;
    font-size: 6.4vw;
  }

  .character h2::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #000000 transparent transparent transparent;
  }
}

.character .mv__txt {
  margin-top: 57px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .character .mv__txt {
    margin: 6.9333333333vw 5.3333333333vw 0;
    font-size: 4.2666666667vw;
  }
}

.character .intro {
  margin-top: 57px;
}

@media screen and (max-width: 767px) {
  .character .intro {
    margin-top: 6.9333333333vw;
  }
}

.character .intro__box {
  margin-top: 42px;
  display: flex;
  gap: 56px;
}

@media screen and (max-width: 767px) {
  .character .intro__box {
    width: 90%;
    margin: 32px auto 0;
    display: block;
  }
}

.character .intro__img {
  width: 34.3%;
  margin-top: 58px;
}

@media screen and (max-width: 767px) {
  .character .intro__img {
    width: 62%;
    margin-top: 0;
    margin-left: 9%;
  }
}

.character .intro__right {
  flex: 1;
}

.character .intro__txt {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
}

@media print,
screen and (min-width: 768px) {
  .character .intro__txt {
    max-width: 570px;
  }
}

@media screen and (max-width: 767px) {
  .character .intro__txt {
    margin-top: 6.6666666667vw;
    font-size: 4.2666666667vw;
  }
}

.character .intro__txt--color {
  color: #EB6120;
  font-weight: 700;
}

.character .intro__list {
  height: 116px;
  margin-top: 16px;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 16px 20px;
  background-color: #FFF6D8;
}

@media print,
screen and (min-width: 768px) {
  .character .intro__list {
    max-width: 550px;
  }
}

@media screen and (max-width: 767px) {
  .character .intro__list {
    height: auto;
    margin-top: 4.8vw;
    padding: 3.7333333333vw 5.0666666667vw;
    gap: 3.2vw;
  }
}

.character .intro__list-box {
  display: flex;
  gap: 22px;
}

@media print,
screen and (min-width: 768px) {
  .character .intro__list-box:nth-child(n+4) .intro__list-name {
    width: 5.1em;
  }
}

@media screen and (max-width: 767px) {
  .character .intro__list-box {
    gap: 6.1333333333vw;
  }
}

.character .intro__list-name,
.character .intro__list-detail {
  white-space: nowrap;
}

.character .intro__list-name {
  width: 3em;
  color: #EB6120;
  font-size: 18px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .character .intro__list-name {
    min-width: 3em;
    width: auto;
    font-size: 4.2666666667vw;
  }
}

.character .intro__list-detail {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .character .intro__list-detail {
    font-size: 4.2666666667vw;
  }
}

.character .intro__point {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .character .intro__point {
    margin-top: 5.8666666667vw;
  }
}

.character .intro__point-item {
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-template-rows: auto 1fr;
  gap: 19px 28px;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item {
    display: flex;
    flex-wrap: wrap;
    gap: 4.8vw 4vw;
  }
}

.character .intro__point-item+.intro__point-item {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item+.intro__point-item {
    margin-top: 5.8666666667vw;
  }
}

.character .intro__point-item-ttl {
  border-bottom: 1px solid #EB6120;
  padding: 11px 0;
  color: #EB6120;
  font-size: 24px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-ttl {
    width: 100%;
    font-size: 5.8666666667vw;
    padding: 0 0 3.2vw;
  }
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-list {
    flex: 1;
  }
}

.character .intro__point-item-item {
  padding-left: 1em;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-item {
    font-size: 4.2666666667vw;
  }
}

.character .intro__point-item-item+.intro__point-item-item {
  margin-top: 2px;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-item+.intro__point-item-item {
    margin-top: 0.8vw;
  }
}

.character .intro__point-item-item::before {
  content: "";
  width: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 0;
  background-color: #EB6120;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-item::before {
    width: 2.1333333333vw;
    top: 1.8666666667vw;
  }
}

.character .intro__point-item-txt {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-txt {
    flex: 1;
    font-size: 4.2666666667vw;
  }
}

.character .intro__point-item-img {
  grid-column: 2/3;
  grid-row: 1/3;
}

@media screen and (max-width: 767px) {
  .character .intro__point-item-img {
    width: 32vw;
    margin-top: 1.6vw;
  }
}

.character .intro__promise {
  margin-top: 30px;
  display: flex;
  gap: 16px;
}

@media screen and (max-width: 767px) {
  .character .intro__promise {
    width: 84%;
    margin: 6.4vw auto 0;
    flex-direction: column;
    gap: 4.2666666667vw;
  }
}

.character .intro__promise-item {
  border-radius: 8px;
  padding: 24px 30px 18px;
  flex: 1;
  text-align: center;
  background: url(../img/character/intro_promise_bg.png) no-repeat center/100% 100%;
}

@media screen and (max-width: 767px) {
  .character .intro__promise-item {
    border-radius: 2.1333333333vw;
    padding: 4.2666666667vw 7.4666666667vw 3.7333333333vw;
  }
}

.character .intro__promise-item-ttl {
  padding: 4px 52px 0;
  display: inline-block;
  position: relative;
  color: #EB6120;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .character .intro__promise-item-ttl {
    padding: 1.0666666667vw 13.8666666667vw 0;
  }
}

@media screen and (max-width: 767px) and (max-width: 767px) {
  .character .intro__promise-item-ttl {
    font-size: 4.2666666667vw;
  }
}

.character .intro__promise-item-ttl::before,
.character .intro__promise-item-ttl::after {
  content: "";
  width: 44px;
  aspect-ratio: 44/32;
  top: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

@media screen and (max-width: 767px) {

  .character .intro__promise-item-ttl::before,
  .character .intro__promise-item-ttl::after {
    width: 11.7333333333vw;
  }
}

.character .intro__promise-item-ttl::before {
  left: 0;
  background-image: url(../img/character/intro_promise_deco01.png);
}

.character .intro__promise-item-ttl::after {
  right: 0;
  background-image: url(../img/character/intro_promise_deco02.png);
}

.character .intro__promise-item-ttl--number {
  margin-left: 8px;
  font-size: 24px;
  font-weight: inherit;
}

@media screen and (max-width: 767px) {
  .character .intro__promise-item-ttl--number {
    margin-left: 2.1333333333vw;
    font-size: 6.4vw;
  }
}

.character .intro__promise-item-txt {
  margin-top: 9px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .character .intro__promise-item-txt {
    margin-top: 1.6vw;
    font-size: 4.2666666667vw;
  }
}

.character .intro__promise-item-txt--color {
  color: #EB6120;
  font-weight: 700;
}

.character .cm {
  margin-top: 64px;
}

@media screen and (max-width: 767px) {
  .character .cm {
    margin-top: 8.5333333333vw;
  }
}

@media screen and (max-width: 767px) {
  .character .cm__box {
    width: 90%;
    margin: 0 auto;
  }
}

.character .cm__video {
  aspect-ratio: 692/440;
  margin: 48px auto 0;
}

@media print,
screen and (min-width: 768px) {
  .character .cm__video {
    max-width: 692px;
  }
}

@media screen and (max-width: 767px) {
  .character .cm__video {
    aspect-ratio: 335/175;
    margin-top: 8.5333333333vw;
  }
}

.character .cm__video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character .cm__ttl {
  margin-top: 40px;
  color: #EB6120;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .character .cm__ttl {
    margin-top: 4.2666666667vw;
    font-size: 5.3333333333vw;
  }
}

.character .cm__txt {
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

@media print,
screen and (min-width: 768px) {
  .character .cm__txt {
    max-width: 692px;
  }
}

@media screen and (max-width: 767px) {
  .character .cm__txt {
    margin-top: 2.6666666667vw;
    font-size: 4.2666666667vw;
    line-height: 1.6;
  }
}

.character .cm__program {
  max-width: 832px;
  margin: 42px auto 0;
}

@media screen and (max-width: 767px) {
  .character .cm__program {
    margin-top: 4.8vw;
  }
}

.character .cm__program-ttl {
  color: #EB6120;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .character .cm__program-ttl {
    font-size: 5.3333333333vw;
  }
}

.character .cm__program-box {
  margin-top: 22px;
  display: flex;
  gap: 24px;
}

@media screen and (max-width: 767px) {
  .character .cm__program-box {
    margin-top: 5.8666666667vw;
    display: block;
  }
}

.character .cm__program-left {
  flex: 1;
}

.character .cm__program-name {
  border-bottom: 1px solid #EB6120;
  padding-bottom: 8px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .character .cm__program-name {
    padding-bottom: 2.1333333333vw;
    font-size: 4.8vw;
  }
}

.character .cm__program-txt {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .character .cm__program-txt {
    margin-top: 2.6666666667vw;
    font-size: 4.2666666667vw;
    line-height: 1.6;
  }
}

.character .cm__program-list {
  width: 240px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .character .cm__program-list {
    width: 100%;
    margin-top: 4.2666666667vw;
    font-size: 4vw;
  }
}

.character .cm__program-info {
  display: flex;
}

@media screen and (max-width: 767px) {
  .character .cm__program-info:nth-child(1) {
    margin-bottom: 1.0666666667vw;
  }
}

.character .cm__program-actor {
  margin-top: 11px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.character .cm__program-note {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .character .cm__program-note {
    margin-top: 1.0666666667vw;
    font-size: 3.2vw;
  }
}