.about-message{
  position: relative;
}
.about-message-note {
  width: 100%;
  background-color: var(--note-bg);

  background-image:
    linear-gradient(to bottom, var(--note-line) 3px, transparent 3px),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 49px,
      var(--note-line) 50px,
      transparent 51px
    );

  background-size: calc(100% - 40px) 100%;
  background-position: center 49px, center 0;
  background-repeat: no-repeat, repeat-y;
}

.note-bottom{
  background: var(--note-bg);
  position: relative;
  height: 52px;
}

.note-bottom::before {
  content: '';
  width: calc(100% - 40px);
  height: 3px;
  display: block;
  background-color: var(--note-line);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.about-message--inner {
  width: 735px;
  margin: 0 auto;
  position:relative;
  overflow: visible;
}

.about-message-ttl {
  font-size: clamp(2.8rem, 2.8rem + 0.884vw, 3.6rem);
  text-align: center;
  padding-top: 98px;
  padding-bottom: 51px;
}
.about-message-txt{
  font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
  line-height: 51px;
}
.about-message--inner::before{
  content: '';
  background: url(/about/imgs/deco01.svg) 0 0 no-repeat;
  position: absolute;
  right: -140px;
  top: 120px;
  width:148px;
  height:170px;
  background-size: contain;
  z-index: 2;
}
.about-message--inner::after{
  content: '';
  background: url(/about/imgs/deco02.svg) 0 0 no-repeat;
  position: absolute;
  left: -140px;
  bottom: 0;
  width:120px;
  height:120px;
  background-size: contain;
}



.about-leadtxt{
  width: 820px;
 font-size:2rem;
  /* font-size: clamp(1.4rem, calc((16 / 390) * 100vw), 2rem); */
  margin: calc(var(--gap-base)*2) auto;
  position: relative;
}
.about-leadtxt::before{
  content: '';
  background: url(/assets/common/imgs/deco-rough-pencil.svg) 0 0 no-repeat;
  position: absolute;
  right: -44px;
  bottom: -19px;
  width:42px;
  height: 50px;
  background-size: contain;
}
.about-leadtxt::after {
  content: '';
  background: url(/assets/common/imgs/deco-roughdotline.svg) 0 0 repeat-x;
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 4.7px;
  background-size: 27px auto;
}

@container contetns-container (width <=768px) {
.about-message-note {
    width: 100%;
    background-color: var(--note-bg);
    background-image:
      repeating-linear-gradient(to bottom,
        transparent 0px,
        transparent 31px,
        var(--note-line) 32px,
        transparent 33px),

    linear-gradient(to bottom, var(--note-line) 3px, transparent 3px);
    background-repeat: no-repeat, repeat-y;
    background-size: calc(100% - 40px) 100%;
    background-position:
      center 99px,
      center 99px;
  }
.note-bottom{
  background: var(--note-bg);
  position: relative;
  height: 36px;
}
.note-bottom::before {
margin-top: -3px;
}
.about-message--inner{
  width: 84%;
}
.about-message-ttl {
  margin: 0;
  line-height: var(--line-heading);
  padding: 0;
  text-align: left;
  height: 100px;
  display: flex;
  align-items: center;
}
.about-message-txt{
line-height: 33px; 
 width: 88%;
margin: auto;}
.about-leadtxt {
  font-size:calc((15 / 390) * 100vw);
  width: 90%;
  margin-bottom: calc(var(--gap-base) * 4);
}

}

@container contetns-container (width <=430px) {
.about-leadtxt::before{
  right:calc((-24 / 390) * 100vw);
  bottom:calc((-20 / 390) * 100vw);
  width:calc((42 / 390) * 100vw);
  height: calc((50 / 390) * 100vw);
}
.about-leadtxt::after {
  width: 95%;
  bottom: calc((-16 / 390) * 100vw);
  height: calc((3 / 390) * 100vw);
  background-size: calc((15 / 390) * 100vw) auto;
}

.about-message--inner::before{
  right: calc((-10 / 390) * 100vw);
  top: calc((55/ 390) * 100vw);
  width: calc((68 / 390) * 100vw);
  height: calc((88 / 390) * 100vw);
}
.about-message--inner::after{
  right: calc((12 / 390) * 100vw);
  left: inherit;
  bottom: calc((4 / 390) * 100vw);
  width:calc((54 / 390) * 100vw);
  height:calc((54 / 390) * 100vw);
  z-index: 2;
  transform: rotate(-2deg);
}

}


@container wrapper (width <=375px) {
  .about-message--inner {
    width: 90%;
  }
.about-message-ttl {
  font-size: 2.5rem;
}

.about-message-txt{
  font-size: 1.5rem;
  line-height:33px;
}
}

@container wrapper (width <=375px) {
.about-message-ttl {
  font-size: 2.4rem;
}
}