/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

#message #greeting {
  background: #fff;
}
#message #greeting .greeting__wrapper {
  display: flex;
  gap: max(8rem, 30px);
  padding-top: max(12.5rem, 70px);
}
@media screen and (max-width: 768px) {
  #message #greeting .greeting__wrapper {
    flex-direction: column;
  }
}
#message #greeting .greeting__wrapper .greeting__image {
  width: max(58rem, 300px);
  aspect-ratio: 29/18;
}
@media screen and (max-width: 768px) {
  #message #greeting .greeting__wrapper .greeting__image {
    width: 100%;
    aspect-ratio: 5/3;
  }
}
#message #greeting .greeting__wrapper .greeting__image img {
  width: 100%;
  height: 100%;
}
#message #greeting .greeting__wrapper .greeting__content {
  flex: 1;
}
#message #greeting .greeting__wrapper .greeting__content .greeting__personal {
  margin-bottom: max(5rem, 20px);
}
#message #greeting .greeting__wrapper .greeting__content .greeting__personal--position {
  font-size: max(1.6rem, 14px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: max(1rem, 10px);
}
#message #greeting .greeting__wrapper .greeting__content .greeting__personal--name {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  gap: max(1rem, 10px);
}
#message #greeting .greeting__wrapper .greeting__content .greeting__personal--name--ja {
  font-size: max(2.8rem, 24px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
}
#message #greeting .greeting__wrapper .greeting__content .greeting__personal--name--en {
  color: rgba(59, 49, 40, 0.4);
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
  font-size: max(1.8rem, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
#message #social {
  background: #fff;
}
#message #social .social__wrapper {
  padding-top: max(17rem, 70px);
}
#message #social .social__wrapper .social__content {
  display: flex;
  align-items: end;
  gap: max(8rem, 30px);
  margin-bottom: max(3rem, 30px);
}
@media screen and (max-width: 1000px) {
  #message #social .social__wrapper .social__content {
    flex-direction: column;
  }
}
#message #social .social__wrapper .social__content .social__text {
  flex: 1;
}
#message #social .social__wrapper .social__content .social__text strong {
  display: block;
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 2.5;
  letter-spacing: 0.15em;
  margin-bottom: max(4rem, 15px);
}
@media screen and (max-width: 550px) {
  #message #social .social__wrapper .social__content .social__text strong span {
    display: inline;
  }
}
#message #social .social__wrapper .social__content figure.social__image {
  width: max(65rem, 300px);
}
@media screen and (max-width: 1000px) {
  #message #social .social__wrapper .social__content figure.social__image {
    width: 100%;
  }
}
#message #social .social__wrapper .social__content figure.social__image a {
	width: 100%;
	height: auto;
	aspect-ratio: 65/37;
	overflow: hidden;
}
#message #social .social__wrapper .social__content figure.social__image a img {
	transition: transform 0.4s ease-in-out, opacity 2s;
}
#message #social .social__wrapper .social__content figure.social__image a:hover img {
	transform: scale(1.05);
}
#message #social .social__wrapper .social__content figure.social__image figcaption {
  font-size: max(1.6rem, 14px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.15em;
  margin-top: max(2rem, 10px);
  text-align: center;
}

#message #social .social__wrapper .btnBox {
	display: flex;
	flex-direction: column;
	gap: max(3rem, 20px);
}

#message #philosophy {
  background: #fff;
}
#message #philosophy .philosophy__wrapper {
  padding-top: max(18rem, 70px);
  padding-bottom: max(20rem, 80px);
}/*# sourceMappingURL=message.css.map */