:root {
  --base-border-radius: 20px;
}
@media (max-width: 800px) {
  :root {
    --media-base-border-radius: calc(20 * var(--xd-px));
  }
}
@media (min-width: 801px) {
  :root {
    --media-base-border-radius: 0;
  }
}

.inner-wrapper {
  position: relative;
  max-width: 906px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .inner-wrapper {
    padding: 0 calc(40 * var(--xd-px));
  }
}

*:has(> .inner-wrapper) {
  display: flex;
  flex-direction: column;
}

main .notice {
  background-color: #00A7FF;
  margin: auto;
  color: white;
  text-align: center;
  padding: 4px 20px;
}
@media screen and (max-width: 800px) {
  main .notice {
    padding: 10px;
  }
}
main .notice p {
  text-align: center;
  width: auto;
  margin: auto;
  font-size: 14px;
}
@media screen and (max-width: 800px) {
  main .notice p {
    font-size: calc(20 * var(--xd-px));
    text-align: left;
  }
}
main .first-view {
  position: relative;
  width: 100%;
  height: 960px;
  background-image: url(./global-img/bg_lightblue.png);
  overflow-x: hidden;
  overflow-y: hidden;
}
@media screen and (max-width: 800px) {
  main .first-view {
    height: calc(942 * var(--xd-px));
  }
}
main .first-view .left-top-texts {
  position: absolute;
  color: white;
  font-size: 33px;
  top: 30px;
  left: 20px;
  font-weight: 800;
}
@media screen and (max-width: 800px) {
  main .first-view .left-top-texts {
    font-size: calc(33 * var(--xd-px));
    top: calc(30 * var(--xd-px));
    left: calc(20 * var(--xd-px));
  }
}
main .first-view .left-top-texts span {
  background-color: #0D0D0E;
}
main .first-view .left-top-texts span span {
  color: #00C4FF;
}
main .first-view .left-top-texts img {
  height: 85px;
}
@media screen and (max-width: 800px) {
  main .first-view .left-top-texts img {
    height: unset;
    width: calc(200 * var(--xd-px));
  }
}
main .first-view .left-top-texts p:nth-child(2) {
  margin: 20px 0 12px;
}
@media screen and (max-width: 800px) {
  main .first-view .left-top-texts p:nth-child(2) {
    margin: calc(30 * var(--xd-px)) 0 calc(12 * var(--xd-px));
  }
}
main .first-view .left-top-texts p:nth-child(2), main .first-view .left-top-texts p:nth-child(3) {
  background-color: #0D0D0E;
  font-size: 33px;
  padding: 8px;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (max-width: 800px) {
  main .first-view .left-top-texts p:nth-child(2), main .first-view .left-top-texts p:nth-child(3) {
    font-size: calc(33 * var(--xd-px));
    padding: calc(8 * var(--xd-px));
  }
}
main .first-view .character {
  position: absolute;
}
main .first-view .hozen {
  left: -30px;
  bottom: 57px;
}
@media screen and (max-width: 800px) {
  main .first-view .hozen {
    left: calc(-49 * var(--xd-px));
    bottom: calc(4 * var(--xd-px));
    width: calc(353 * var(--xd-px));
  }
}
main .first-view .diverman {
  top: -30px;
  right: 0;
}
@media screen and (max-width: 800px) {
  main .first-view .diverman {
    right: calc(-136 * var(--xd-px));
    width: calc(494 * var(--xd-px));
  }
}
main .first-view .wave {
  position: absolute;
  bottom: 0;
  width: 200%;
  left: -50vw;
}
main .first-view .wave img {
  width: 100%;
}
main .first-view .demae-logo, main .first-view .bg {
  position: absolute;
  width: 100%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
}
main .first-view .demae-logo {
  top: 301px;
}
@media screen and (max-width: 800px) {
  main .first-view .demae-logo {
    top: calc(318 * var(--xd-px));
    width: calc(506 * var(--xd-px));
  }
}
main .first-view .bg {
  top: 187px;
}
@media screen and (max-width: 800px) {
  main .first-view .bg {
    top: calc(169 * var(--xd-px));
    width: calc(1114 * var(--xd-px));
    max-width: unset;
  }
}
main .about {
  color: white;
  --top-kasane: 20px;
  position: relative;
  background-color: #144CBD;
  margin-top: -2px;
  padding-top: 59px;
  padding-bottom: 80px;
  background-image: url(./img/about_1.png), url(./img/about_2.png);
  background-repeat: no-repeat;
  background-position: 45% 0%, 60% 30%;
  background-size: 15%, 20%;
}
@media screen and (max-width: 800px) {
  main .about {
    padding-top: calc(28 * var(--xd-px));
    background-position: calc(452 * var(--xd-px)) calc(42 * var(--xd-px)), calc(520 * var(--xd-px)) calc(438 * var(--xd-px));
    background-size: calc(227 * var(--xd-px)), calc(298 * var(--xd-px));
  }
}
main .about h2 {
  font-size: 94px;
  margin-bottom: 20px;
  color: white;
  opacity: 0.3;
}
@media screen and (max-width: 800px) {
  main .about h2 {
    font-size: calc(94 * var(--xd-px));
    margin-bottom: calc(49 * var(--xd-px));
  }
}
main .about p {
  font-size: 20px;
  line-height: 2.4em;
  font-weight: 800;
}
@media screen and (max-width: 800px) {
  main .about p {
    font-size: calc(28 * var(--xd-px));
  }
}
main .about p span:nth-of-type(1) {
  font-size: 28px;
  font-weight: bold;
}
@media screen and (max-width: 800px) {
  main .about p span:nth-of-type(1) {
    font-size: calc(38 * var(--xd-px));
  }
}
main .about p span:nth-of-type(2) {
  color: yellow;
}
main .about .topic {
  position: relative;
  background-color: white;
  color: #333333;
  padding: 20px 20px;
  margin-bottom: var(--base-padding);
  width: 740px;
  margin: auto;
  margin-top: 80px;
  border: 2px solid var(--color-bgwhite-textblack);
  border-radius: var(--media-base-border-radius);
}
@media screen and (max-width: 800px) {
  main .about .topic {
    font-size: calc(28 * var(--xd-px));
    padding: calc(28 * var(--xd-px)) calc(40 * var(--xd-px)) calc(20 * var(--xd-px));
    width: calc(670 * var(--xd-px));
  }
}
main .about .topic::after {
  content: "";
  display: block;
  clear: both;
}
main .about .topic .left-top {
  position: absolute;
  color: #303030;
  background-color: yellow;
  top: -25px;
  left: -25px;
  width: 68px;
  height: 68px;
  padding: 0px 0px 5px 0px;
  border-radius: 50px;
  font-size: 18px;
  display: flex;
  border: 2px solid #303030;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}
@media screen and (max-width: 800px) {
  main .about .topic .left-top {
    left: calc(-20 * var(--xd-px));
    top: calc(-20 * var(--xd-px));
    width: calc(100 * var(--xd-px));
    height: calc(100 * var(--xd-px));
    font-size: calc(26 * var(--xd-px));
    border-width: calc(2 * var(--xd-px));
  }
}
main .about .topic .face-img {
  height: 140px;
  width: 140px;
  margin-right: 20px;
  float: left;
}
@media screen and (max-width: 800px) {
  main .about .topic .face-img {
    margin: auto;
    float: unset;
  }
}
main .about .topic .inner {
  font-size: 16px;
}
@media screen and (max-width: 800px) {
  main .about .topic .inner {
    font-size: calc(28 * var(--xd-px));
    margin-top: calc(20 * var(--xd-px));
  }
}
main .about .topic .inner p {
  margin-top: 12px;
  line-height: 1.75em;
}
@media screen and (max-width: 800px) {
  main .about .topic .inner p {
    margin-top: calc(16 * var(--xd-px));
    line-height: 1.5em;
  }
}
main .about .topic h3 {
  font-size: 20px;
  font-weight: 800;
}
@media screen and (max-width: 800px) {
  main .about .topic h3 {
    font-size: calc(30 * var(--xd-px));
  }
}
main .about .topic p {
  font-size: 16px;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  main .about .topic p {
    font-size: calc(27 * var(--xd-px));
  }
}
main .about .topic .global-white-button {
  margin-right: 0;
  width: -moz-max-content;
  width: max-content;
  height: 32px;
  padding: 6px 31px 6px 14px;
  margin-top: 16px;
  font-size: 14px;
}
@media screen and (max-width: 800px) {
  main .about .topic .global-white-button {
    margin-right: auto;
    margin-top: calc(16 * var(--xd-px));
    font-size: calc(24 * var(--xd-px));
    border-width: calc(2 * var(--xd-px));
    height: calc(56 * var(--xd-px));
    padding: calc(10 * var(--xd-px)) calc(61 * var(--xd-px)) calc(11 * var(--xd-px)) calc(25 * var(--xd-px));
  }
}
main .about .jisseki h3 {
  text-align: center;
  margin: 40px 0 24px;
}
main .about .jisseki .schools-outer {
  width: 740px;
  height: 400px;
  margin: auto;
  background-color: white;
  overflow: hidden;
  padding: 0 5px 0 0;
  border-radius: var(--media-base-border-radius);
}
@media screen and (max-width: 800px) {
  main .about .jisseki .schools-outer {
    height: calc(320 * var(--xd-px));
    width: 100%;
  }
}
main .about .jisseki .schools-outer .schools-inner {
  overflow-y: scroll;
  padding: 21px 14px 21px 16px;
  margin: -15px 0;
  scrollbar-color: #144CBD #D1D1D1;
  height: calc(100% + 30px);
  overflow-y: scroll;
}
main .about .jisseki .schools-outer .schools-inner::-webkit-scrollbar {
  width: 28px;
}
main .about .jisseki .schools-outer .schools-inner .school {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 800px) {
  main .about .jisseki .schools-outer .schools-inner .school {
    height: calc(86 * var(--xd-px));
  }
}
main .about .jisseki .schools-outer .schools-inner .school .date-name {
  color: #333333;
  width: 60%;
}
@media (min-width: 801px) {
  main .about .jisseki .schools-outer .schools-inner .school .date-name {
    display: flex;
  }
  main .about .jisseki .schools-outer .schools-inner .school .date-name .date {
    width: 120px;
    margin-right: 30px;
  }
}
@media screen and (max-width: 800px) {
  main .about .jisseki .schools-outer .schools-inner .school .date-name {
    font-size: calc(20 * var(--xd-px));
  }
}
main .about .jisseki .schools-outer .schools-inner .school a {
  display: flex;
  width: 159px;
  font-size: 14px;
  height: 32px;
  position: relative;
  color: var(--color-white);
  background-color: var(--bgcolor-blue);
  margin-left: auto;
  border-radius: 100vh;
  font-weight: var(--fontweight-extrabold);
  text-decoration: none;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  main .about .jisseki .schools-outer .schools-inner .school a {
    font-size: calc(20 * var(--xd-px));
    width: calc(230 * var(--xd-px));
  }
}
main .about .jisseki .schools-outer .schools-inner .school a img {
  margin-right: 8px;
}
@media screen and (max-width: 800px) {
  main .about .jisseki .schools-outer .schools-inner .school a img {
    margin-right: calc(8 * var(--xd-px));
    width: calc(22 * var(--xd-px));
  }
}
main .about .jisseki .schools-outer .schools-inner::-webkit-scrollbar-button {
  display: none;
  height: 0;
}
main .about .jisseki .schools-outer .schools-inner .school + .school {
  border-top: 1px dotted #808080;
}
main .about .jisseki > span {
  display: block;
  width: 740px;
  margin: auto;
  margin-top: 12px;
}
@media screen and (max-width: 800px) {
  main .about .jisseki > span {
    margin-top: calc(12 * var(--xd-px));
    font-size: calc(18 * var(--xd-px));
  }
}
main .lineup {
  position: relative;
  padding-top: 60px;
  padding-bottom: 220px;
  width: 100%;
  background-image: url(./global-img/bg_gray.png);
}
@media screen and (max-width: 800px) {
  main .lineup {
    padding: calc(60 * var(--xd-px)) calc(30 * var(--xd-px)) calc(164 * var(--xd-px));
  }
}
main .lineup > .inner-wrapper {
  padding: 0;
}
main .lineup h2 {
  font-size: 94px;
  margin-bottom: 20px;
  color: white;
  margin-bottom: 20px;
}
@media screen and (max-width: 800px) {
  main .lineup h2 {
    font-size: calc(94 * var(--xd-px));
    margin-bottom: calc(49 * var(--xd-px));
  }
}
main .lineup h3 {
  font-size: 36px;
}
main .lineup .two-patterns {
  margin-top: 30px;
  width: 880px;
  margin: 40px auto 0;
}
@media screen and (min-width: 801px) {
  main .lineup .two-patterns {
    display: flex;
    flex-wrap: nowrap;
    -moz-column-gap: 80px;
         column-gap: 80px;
    justify-content: center;
  }
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns {
    width: 100%;
    flex-direction: column;
    row-gap: calc(40 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor, main .lineup .two-patterns .without-professor {
  width: 400px;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor, main .lineup .two-patterns .without-professor {
    width: 100%;
  }
}
main .lineup .two-patterns .with-professor .heading, main .lineup .two-patterns .without-professor .heading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 16px;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor .heading, main .lineup .two-patterns .without-professor .heading {
    font-size: calc(30 * var(--xd-px));
    margin-bottom: calc(16 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor .poster, main .lineup .two-patterns .without-professor .poster {
  height: 522px;
  background-color: white;
  border: 2px solid var(--color-bgwhite-textblack);
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor .poster, main .lineup .two-patterns .without-professor .poster {
    height: calc(664 * var(--xd-px));
    border-width: calc(2 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor .poster .image, main .lineup .two-patterns .without-professor .poster .image {
  width: 100%;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor .poster .image, main .lineup .two-patterns .without-professor .poster .image {
    height: calc(226 * var(--xd-px));
    overflow: hidden;
  }
}
main .lineup .two-patterns .with-professor .h-circle, main .lineup .two-patterns .without-professor .h-circle {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 16px;
  font-size: 14px;
  line-height: 1em;
  border-radius: 100%;
  margin-right: 8px;
  color: white;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor .h-circle, main .lineup .two-patterns .without-professor .h-circle {
    width: calc(92 * var(--xd-px));
    height: calc(92 * var(--xd-px));
    font-size: calc(20 * var(--xd-px));
    padding: calc(20 * var(--xd-px)) calc(26 * var(--xd-px));
    text-align: center;
    line-height: 1.3em;
    margin-right: calc(16 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor *, main .lineup .two-patterns .without-professor * {
  text-align: center;
}
main .lineup .two-patterns .with-professor h5, main .lineup .two-patterns .without-professor h5 {
  margin: 20px 0 0;
  font-size: 20px;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor h5, main .lineup .two-patterns .without-professor h5 {
    font-size: calc(36 * var(--xd-px));
    margin-top: calc(20 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor p, main .lineup .two-patterns .without-professor p {
  text-align: justify;
  padding: 12px 39px 10px;
  font-size: 16px;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor p, main .lineup .two-patterns .without-professor p {
    padding: calc(12 * var(--xd-px)) calc(39 * var(--xd-px)) 0;
    font-size: calc(28 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor .global-blue-button, main .lineup .two-patterns .without-professor .global-blue-button {
  display: flex;
  padding: 0;
  margin: 20px auto 0;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor .global-blue-button, main .lineup .two-patterns .without-professor .global-blue-button {
    margin-top: calc(12 * var(--xd-px));
    font-size: calc(28 * var(--xd-px));
    height: calc(88 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor a:not(.global-blue-button), main .lineup .two-patterns .without-professor a:not(.global-blue-button) {
  display: block;
  margin-top: 12px;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor a:not(.global-blue-button), main .lineup .two-patterns .without-professor a:not(.global-blue-button) {
    font-size: calc(28 * var(--xd-px));
    margin-top: calc(20 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor {
  position: relative;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor {
    margin-top: calc(80 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor .not-in-service {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  width: 100%;
  height: 522px;
  z-index: 10;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  main .lineup .two-patterns .with-professor .not-in-service {
    height: calc(664 * var(--xd-px));
  }
}
main .lineup .two-patterns .with-professor span {
  font-size: 0.7em;
}
main .lineup .two-patterns .with-professor .h-circle {
  background-color: #D90000;
}
main .lineup .two-patterns .without-professor .h-circle {
  background-color: #144CBD;
}
main .lineup .wave {
  position: absolute;
  bottom: 0;
}
@media screen and (max-width: 800px) {
  main .lineup .wave {
    width: 100%;
    margin-left: calc(-30 * var(--xd-px));
    overflow: hidden;
  }
  main .lineup .wave img {
    max-width: unset;
    width: calc(1660 * var(--xd-px));
    transform: translateX(-20%);
  }
}
main .achievement {
  background-color: #8ED6FF;
}
main .achievement .inner-wrapper {
  background-image: url(./img/Achievement_1.png), url(./img/Achievement_2.png);
  background-repeat: no-repeat;
  background-position: 612px 0px, 418px 168px;
  background-size: 294px, 194px;
}
@media screen and (max-width: 800px) {
  main .achievement .inner-wrapper {
    background-size: calc(247 * var(--xd-px)), calc(170 * var(--xd-px));
    background-position: calc(551 * var(--xd-px)) 0px, calc(432 * var(--xd-px)) calc(202 * var(--xd-px));
    width: 100%;
    padding: 0 calc(10 * var(--xd-px));
  }
}
main .achievement h2 {
  font-size: 94px;
  margin-bottom: 20px;
  color: white;
  opacity: 0.5;
  margin-top: 100px;
}
@media screen and (max-width: 800px) {
  main .achievement h2 {
    font-size: calc(94 * var(--xd-px));
    margin-bottom: calc(49 * var(--xd-px));
  }
}
@media screen and (max-width: 800px) {
  main .achievement h2 {
    margin-top: calc(86 * var(--xd-px));
  }
}
main .achievement h3 {
  font-size: 26px;
}
@media screen and (max-width: 800px) {
  main .achievement h3 {
    font-size: calc(40 * var(--xd-px));
  }
}
main .achievement .blue-box {
  background-color: #4074DD;
  margin: 100px auto;
  min-height: 1px;
  width: min(840px, 100%);
  border-radius: 20px;
  padding: 40px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box {
    margin: calc(146 * var(--xd-px)) 0 0;
    width: 100%;
    padding: calc(40 * var(--xd-px)) calc(20 * var(--xd-px));
    border-radius: calc(20 * var(--xd-px));
  }
  main .achievement .blue-box + .blue-box {
    margin-top: calc(40 * var(--xd-px));
  }
  main .achievement .blue-box:last-child {
    margin-bottom: calc(80 * var(--xd-px));
  }
}
main .achievement .blue-box .ttl_sp {
  width: 351px;
  margin-bottom: 40px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .ttl_sp {
    width: calc(439 * var(--xd-px));
    margin-bottom: calc(40 * var(--xd-px));
  }
}
main .achievement .blue-box .grid-messages {
  display: grid;
  row-gap: 20px;
  grid-template-columns: 1fr 660px;
  --sankaku-top: 1.8rem;
  --sankaku-left: calc(-30rem/15);
  --sankaku-margin-top: calc(-15rem/15);
  --sankaku-border-right: calc(30rem/15);
  --sankaku-border: calc(13rem/15);
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .grid-messages {
    row-gap: calc(20 * var(--xd-px));
    grid-template-columns: calc(80 * var(--xd-px)) calc(570 * var(--xd-px));
    justify-content: space-between;
  }
}
main .achievement .blue-box .grid-messages .fukidashi {
  font-size: 16px;
  position: relative;
  display: inline-block;
  padding: 16px;
  max-width: 100%;
  background: #FFF;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: left;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .grid-messages .fukidashi {
    font-size: calc(28 * var(--xd-px));
    padding: calc(16 * var(--xd-px));
  }
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .grid-messages {
    --sankaku-top: calc(13.33 * var(--xd-px));
    --sankaku-left: calc(-36 * var(--xd-px));
    --sankaku-margin-top: 0;
    --sankaku-border-right: calc(30.83 * var(--xd-px));
    --sankaku-border: calc(15 * var(--xd-px));
  }
}
main .achievement .blue-box .grid-messages .fukidashi:before {
  content: "";
  position: absolute;
  top: var(--sankaku-top);
  left: var(--sankaku-left);
  margin-top: var(--sankaku-margin-top);
  border: var(--sankaku-border) solid transparent;
  border-right: var(--sankaku-border-right) solid #FFF;
  z-index: 2;
}
main .achievement .blue-box .enquete-box {
  width: 100%;
  margin: 40px 0 0;
  background-color: white;
  border-radius: 10px;
}
main .achievement .blue-box .enquete-box .title {
  display: flex;
  padding: 20px 30px;
  font-weight: bold;
  line-height: 1.3em;
  gap: 10px;
}
main .achievement .blue-box .enquete-box .title h3 {
  font-size: 40px;
  vertical-align: super;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .title h3 {
    font-size: calc(40 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .title p {
  font-size: 20px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .title p {
    font-size: calc(24 * var(--xd-px));
    line-height: 1.3em;
  }
}
main .achievement .blue-box .enquete-box .answer {
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  display: flex;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer {
    padding: 0 calc(40 * var(--xd-px)) calc(20 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .answer .graph {
  display: block;
  width: 220px;
  float: left;
  margin-right: 30px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer .graph {
    margin-right: calc(20 * var(--xd-px));
    width: calc(220 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .answer .graph.graph-only {
  width: 558px;
  margin: 0 0 20px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer .graph.graph-only img {
    width: calc(610 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .answer .graph::after {
  content: "";
  display: block;
  clear: both;
  width: 100%;
}
main .achievement .blue-box .enquete-box .answer > div:not(.graph) {
  width: 204px;
  padding-top: 27px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer > div:not(.graph) {
    font-size: calc(22 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .answer > div:not(.graph) img {
  float: left;
  height: 1em;
  margin-top: 6px;
  margin-right: 5px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer > div:not(.graph) img {
    margin-top: calc(3 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .answer > div:not(.graph) > div {
  display: flex;
  padding-bottom: 0.5em;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer > div:not(.graph) > div {
    -moz-column-gap: calc(5 * var(--xd-px));
         column-gap: calc(5 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .answer > div:not(.graph) .mini {
  font-size: 12px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .answer > div:not(.graph) .mini {
    font-size: calc(20 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .grid-messages {
  padding: 20px;
  grid-template-columns: 1fr 620px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box .grid-messages {
    padding: calc(25 * var(--xd-px));
    grid-template-columns: calc(80 * var(--xd-px)) calc(530 * var(--xd-px));
  }
}
main .achievement .blue-box .enquete-box .grid-messages .fukidashi {
  background-color: #EFEFEF;
}
main .achievement .blue-box .enquete-box .grid-messages .fukidashi::before {
  border-right-color: #EFEFEF;
}
main .achievement .blue-box .enquete-box + .enquete-box {
  margin-top: 20px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box .enquete-box + .enquete-box {
    margin-top: calc(26 * var(--xd-px));
    margin-bottom: calc(40 * var(--xd-px));
  }
}
main .achievement .blue-box iframe {
  border-radius: 16px;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box iframe {
    margin-bottom: calc(12 * var(--xd-px));
  }
}
main .achievement .blue-box span {
  font-size: 14px;
  color: white;
}
@media screen and (max-width: 800px) {
  main .achievement .blue-box span {
    font-size: calc(18 * var(--xd-px));
  }
}
main .gallery {
  padding-top: 80px;
  text-align: center;
}
@media screen and (max-width: 800px) {
  main .gallery .inner-wrapper {
    padding: 0 calc(20 * var(--xd-px));
  }
}
main .gallery h3 {
  margin-bottom: 40px;
  font-size: 36px;
}
@media screen and (max-width: 800px) {
  main .gallery h3 {
    font-size: calc(40 * var(--xd-px));
  }
}
main .gallery .photos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media screen and (max-width: 800px) {
  main .gallery .photos {
    gap: calc(12 * var(--xd-px));
  }
}
main .gallery a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 90px;
  width: 268px;
  padding-left: 0;
  font-size: 18px;
}
@media screen and (max-width: 800px) {
  main .gallery a {
    width: calc(450 * var(--xd-px));
    font-size: calc(28 * var(--xd-px));
    padding-left: 0;
    margin: calc(40 * var(--xd-px)) auto calc(80 * var(--xd-px));
  }
}/*# sourceMappingURL=index.css.map */