@charset "UTF-8";

/*
	##### SATAKE RECRUIT #####
	/message/css/message_sp.css
*/

img {
  object-fit: cover
}

main {
  padding-top: calc(300/750*100vw)
}
main::before {
  white-space: pre;
  letter-spacing: 0.08em;
  content: 'MESSAGE';
  top: calc(1074/750*100vw)
}
.page_ttl {
  box-sizing: content-box;
  width: 82.66666666666667vw;
  height: calc(680/750*100vw);
  background-image: url(../images/img_main_sp.jpg);
  margin-bottom: calc(412/750*100vw)
}
.page_ttl_group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  top: calc(-156/750*100vw);
  left: calc(-40/750*100vw)
}
.message_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(266/750*100vw);
  height: calc(65/750*100vw);
  background-color: #fff;
  font-size: calc(24/750*100vw);
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1;
  color: #000;
  border: calc(8/750*100vw) solid #000;
}
.message_headline {
  display: block;
  padding: .7em .8em .8em;
  background-color: #8fc31f;
  font-size: calc(32/750*100vw);
  font-weight: bold;
  line-height: 1.3125;
  letter-spacing: .06em;
  color: #fff;
  border: calc(8/750*100vw) solid #000;
  margin-top: calc(-8/750*100vw)
}
.message_profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(190/750*100vw);
  padding: 0 calc(45/750*100vw);
  background-color: #fff;
  border: calc(8/750*100vw) solid #000;
  position: absolute;
  bottom: calc(-116/750*100vw);
  right: calc(35/750*100vw);
}
.message_division,
.message_division + li {
  font-size: calc(26/750*100vw);
  font-weight: 500;
  line-height: 1.5
}
.name {
  font-size: calc(36/750*100vw);
  font-weight: 700;
  margin-top: calc(16/750*100vw);
}

.section_headline {
  text-align: center;
  font-size: calc(36/750*100vw);
  line-height: 1.6111111111111112;
  font-weight: 700;
  color: #8fc31f;
  margin-bottom: calc(60/750*100vw);
}
.section {
  width: 88vw;
  margin: 0 auto calc(190/750*100vw)
}
.section .cols {
  flex-direction: column;
  justify-content: space-between
}
.pix_area {
  margin-top: calc(70/750*100vw);
  position: relative;
}
.pix_area::after {
  box-sizing: content-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  display: block;
  width: 99.5%;
  height: 99.5%;
  border: calc(8/750*100vw) solid #000;
}
.txt_block p {
  font-size: calc(28/750*100vw);
  line-height: 1.9285714285714286;
  text-align: justify
}
.txt_block p + p {
  margin-top: 2em
}