@charset "UTF-8";
/*****************************
message
*****************************/
/* 共通 */
.message .txtbox {
  margin-bottom: 8rem;
}
.message .profilebox {
  position: relative;
  margin-bottom: 8rem;
}
.message .imgbox1 {
  max-width: 850px;
  margin-left: auto;
}
.message .ttlbox {
  position: absolute;
  bottom: 20px;
  left: 0;
}
.message .ttlbox h2 {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}
.message .ttlbox span {
  background: #fff;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 400;
  padding: 0 2rem;
}
.message .namebox {
  position: absolute;
  top: 20px;
  right: 20px;
  writing-mode: vertical-rl;
}
.message .namebox p {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}
.message .namebox span {
  background: #fff;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: serif;
  padding: 2rem 0;
}
.message .namebox span:nth-child(2) {
  margin-top: 8rem;
}
.bgfixbox {
  position: relative;
  aspect-ratio: 2/.6;
  clip-path: inset(0);
  margin: 0 calc(50% - 50vw) 8rem;
  width: 100vw;
}
.bgfixbox::before {
  background: url(../../images/page/message/message2.webp) no-repeat center / cover;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}
.message .imgbox2 {
  max-width: 850px;
  margin-bottom: 8rem;
}
@media only screen and (min-width: 1920px) {
  .bgfixbox {
    aspect-ratio: 2/.4;
  }
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .message .ttlbox span {
    font-size: 2.5rem;
  }
  .message .namebox span {
    font-size: 2rem;
  }
  .message .imgbox1,
  .message .imgbox2 {
    max-width: 650px;
  }
  .bgfixbox {
    aspect-ratio: 2/.8;
  }
  .bgfixbox::before {
    background: url(../../images/page/message/message2.webp) no-repeat center / contain;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .message .ttlbox {
    left: -10px;
  }
  .message .ttlbox h2 {
    gap: .5rem;
  }
  .message .ttlbox span {
    border-left: 5px solid #8FC224;
    font-size: 1.6rem;
    padding: 0 1rem;
  }
  .message .namebox {
    top: -20px;
    right: -10px;
  }
  .message .namebox p {
    gap: .5rem;
  }
  .message .namebox span {
    font-size: 1.8rem;
    padding: 1rem 0;
  }
  .message .namebox span:nth-child(2) {
    margin-top: 5rem;
  }
  .bgfixbox {
    aspect-ratio: 2/1.1;
  }
}