@charset "UTF-8";

/*----------------------------------------how----------------------------------------*/
#how {
}

#how .orange {
  margin: 0 auto 10em;
}

#how .orange h2 {
  width: 75%;
  max-width: inherit;
  min-width: 250px;
}

#how .orange p {
  font-weight: bold;
  font-size: 1.125em;
  line-height: 250%;
}

#how .orange p span.red {
  font-size: 1.125em;
  color: var(--point-color);
}

#how .green p {
  font-weight: 500;
}

#how .flex .img {
  width: 25%;
}

#how .flex .text {
  width: 73%;
}

@media screen and (max-width: 768px) {
  #how .orange h2 {
    max-width: 350px;
    height: 1.6em;
  }

  #how .orange p {
    font-size: 1em;
    line-height: 200%;
  }

  #how .flex .img {
    width: 80%;
    margin: 2em auto 0;
  }

  #how .flex .text {
    position: relative;
    width: 90%;
    margin: 0 0 0 auto;
    z-index: 1;
  }
}

/*----------------------------------------recruitment----------------------------------------*/
#recruitment {
}

#recruitment .top {
}

#recruitment .top::before {
  content: "";
  position: absolute;
  width: 55vw;
  max-width: 450px;
  height: 55vw;
  max-height: 450px;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgb(from var(--color-white) r g b / 75%);
  border-radius: 50vw;
  z-index: -1;
}

#recruitment .text {
  width: 60%;
  line-height: 250%;
  margin: 0 auto 5em;
}

#recruitment .text:nth-child(3) {
  font-size: 1.125em;
}

#recruitment .text .title {
  width: 80%;
  max-width: 250px;
  margin: 0 auto 2em;
}

#recruitment .text .red {
  color: var(--point-color);
}

#recruitment .youtube_box {
  margin: 0 auto 5em;
}

#recruitment .img04 {
  width: 18%;
  top: 0;
  left: 0;
}

#recruitment .img05 {
  width: 18%;
  top: 0;
  right: 0;
}

#recruitment .flex.between {
  max-width: 800px;
  margin: 0 auto 5em;
}

#recruitment ul.flex.between {
  margin: 1em auto;
}

#recruitment .actor_box {
  width: 48%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

#recruitment .actor_box .name_box {
}

#recruitment .actor_box .name_box img {
  width: auto;
  height: 100%;
  top: 33%;
  object-fit: contain;
  left: 50%;
  z-index: 1;
  transition: ease-in 0.5s 0s;
}

#recruitment .actor_box.active .name_box img {
  left: 12%;
}

#recruitment .actor_box .name_box .name {
  position: relative;
  width: 0;
  color: var(--color-white);
  padding: 0.5em 0 1em 0;
  margin: 0 auto 2em 0;
  border-radius: 1em;
  transition: ease-in 0.5s 0.3s;
}

#recruitment .actor_box.active .name_box .name {
  width: 93%;
  padding: 0.5em 1em 1em 25%;
  margin: 0 0 2em auto;
}

#recruitment .actor_box:nth-child(1) .name_box .name {
  background: var(--character1);
}

#recruitment .actor_box:nth-child(2) .name_box .name {
  background: var(--character3);
}

#recruitment .actor_box .name_box .name p {
  opacity: 0;
  white-space: nowrap;
  transition: ease-in 0.3s 0.8s;
}

#recruitment .actor_box.active .name_box .name p {
  opacity: 1;
}

#recruitment .actor_box .name_box .name p span {
  font-size: 1.5em;
  margin: 0 0 0 0.2em;
}

#recruitment .actor_box .name_box .name h3 {
  opacity: 0;
  font-size: 2rem;
  white-space: nowrap;
  transition: ease-in 0.3s 0.8s;
}

#recruitment .actor_box.active .name_box .name h3 {
  opacity: 1;
}

#recruitment .actor_box .name_box .name h3 span {
  font-size: 0.625em;
}

#recruitment .actor_box .actor {
  flex-grow: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  position: relative;
  padding: 10%;
  background: var(--color-white);
  border-radius: 1em;
  opacity: 0;
  transition: ease-in 0.5s 1.2s;
}

#recruitment .actor_box.active .actor {
  opacity: 1;
}

#recruitment .actor_box .actor:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  border-radius: 1em;
  transition: ease-in 1s 1.2s;
}

#recruitment .actor_box.active .actor:after {
  width: 0%;
}

#recruitment .actor_box .actor p {
  font-size: 0.875em;
  font-weight: bold;
  margin: 0.5em 0 0;
}

#recruitment .actor_box.active .actor .history {
  margin: 1em 0 0;
}

#recruitment .public {
  margin: 10em auto 0;
}

#recruitment .public .fukidashi p {
  display: inline-block;
  color: var(--color-white);
  font-size: calc(var(--font-size) * 1.38);
  font-weight: bold;
  background: var(--orange);
  padding: 0.5em 3em;
  border-radius: 3em;
}

#recruitment .public ul {
}

#recruitment .public ul li {
  width: calc(100% / 9);
  transition: ease-in 0.2s;
}

#recruitment .public ul li:hover {
  transform: translateY(-10px);
}

#recruitment .public h3 {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0 1em;
  margin: 2em auto 1em;
  z-index: 1;
  text-stroke: 1px #fff;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff,
    1px -1px 0 #fff, 0px 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
}

#recruitment .public h3:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 0.5em;
  background: var(--orange);
  transition: ease-in 0.3s;
  z-index: -1;
}

#recruitment .public h3.active:before {
  width: 100%;
}

#recruitment .public p {
  font-weight: bold;
}

#recruitment .public p.red {
  color: var(--point-color);
}

#recruitment .link_box {
  margin: 5em auto;
}

#recruitment .link_box ul {
}

#recruitment .link_box ul li {
  width: 48%;
  font-weight: bold;
  margin: 0 0 1em;
}

#recruitment .link_box ul li:nth-child(3) {
  width: 100%;
}

#recruitment .link_box ul li:last-child {
  margin: 0;
}

#recruitment .link_box ul li a {
  position: relative;
  display: inline-block;
  left: 0;
  padding: 0.1em 0 0em;
  transition: ease-in 0.2s 0s;
}

#recruitment .link_box ul li a:hover {
  left: 0.3em;
}

#recruitment .link_box ul li a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 0;
  transition: ease-in 0.3s 0s;
}

#recruitment .link_box ul li a:hover:after {
  width: 100%;
}

#recruitment .link_box ul li:nth-child(1) a {
  color: var(--character1);
}

#recruitment .link_box ul li:nth-child(1) a:after {
  border-bottom: 2px solid var(--character1);
}

#recruitment .link_box ul li:nth-child(2) a {
  color: var(--character2);
}

#recruitment .link_box ul li:nth-child(2) a:after {
  border-bottom: 2px solid var(--character2);
}

#recruitment .link_box ul li:nth-child(3) a {
  color: var(--character3);
}

#recruitment .link_box ul li:nth-child(3) a:after {
  border-bottom: 2px solid var(--character3);
}

#recruitment .link_box ul li:nth-child(4) a {
  color: var(--character4);
}

#recruitment .link_box ul li:nth-child(4) a:after {
  border-bottom: 2px solid var(--character4);
}

#recruitment .link_box ul li:nth-child(5) a {
  color: var(--character5);
}

#recruitment .link_box ul li:nth-child(5) a:after {
  border-bottom: 2px solid var(--character5);
}

#recruitment .link_box ul li:nth-child(6) a {
  color: var(--character6);
}

#recruitment .link_box ul li:nth-child(6) a:after {
  border-bottom: 2px solid var(--character6);
}

#recruitment .link_box ul li:nth-child(7) a {
  color: var(--character7);
}

#recruitment .link_box ul li:nth-child(7) a:after {
  border-bottom: 2px solid var(--character7);
}

#recruitment .link_box ul li:nth-child(8) a {
  color: var(--character8);
}

#recruitment .link_box ul li:nth-child(8) a:after {
  border-bottom: 2px solid var(--character8);
}

#recruitment .link_box ul li:nth-child(9) a {
  color: var(--character9);
}

#recruitment .link_box ul li:nth-child(9) a:after {
  border-bottom: 2px solid var(--character9);
}

#recruitment .link_box ul li:nth-child(10) a {
  color: var(--character10);
}

#recruitment .link_box ul li:nth-child(10) a:after {
  border-bottom: 2px solid var(--character10);
}

@media screen and (max-width: 768px) {
  #recruitment .top {
    margin: 0 auto 10em;
  }

  #recruitment .top::before {
    width: 60vw;
    height: 125vw;
  }

  #recruitment .text {
    width: 100%;
    margin: 5em auto;
  }

  #recruitment .text.fs20 {
    font-size: 1.4em;
  }

  #recruitment .text:nth-child(3) {
    font-size: 1.6rem;
  }

  #recruitment .img04 {
    position: relative;
    width: 60%;
    left: -10%;
  }

  #recruitment .img05 {
    position: relative;
    width: 60%;
    right: -50%;
  }

  #recruitment .actor_box {
    width: 100%;
  }

  #recruitment .actor_box:nth-child(1) {
    width: 100%;
    margin: 0 auto 5em;
  }

  #recruitment .actor_box .name_box .name h3 {
    font-size: 5vw;
  }

  #recruitment .public ul li {
    width: calc(100% / 4.5);
    margin: 0 0 1em;
  }

  #recruitment .public p.fs20 {
    font-size: 1.4em;
  }

  #recruitment .link_box ul li {
    width: 100%;
  }
}

/*----------------------------------------character----------------------------------------*/
#character {
}

#character .character {
  position: relative;
  margin: 2em auto 0;
  opacity: 0;
  transform: translateX(-2em);
  transition: ease-in 0.5s 0s;
}

#character .character.character1 {
  margin: 4em auto 0;
}

#character .character:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
  transform: translateX(2em);
}

#character .character.active,
#character .character.active:nth-child(even) {
  opacity: 1;
  transform: translateX(0);
}

#character .character .img {
  width: 250px;
}

#character .character .text {
  width: calc(100% - 250px - 1em);
}

#character .character .text .flex.flex_end {
  -webkit-box-align: end;
  align-items: flex-end;
}

#character .character .text h3 {
}

#character .character .text h3 span {
  font-size: 1.8em;
  margin: 0 0.5em 0 0.1em;
}

#character .character1 .text h3 span {
  color: var(--character1);
}

#character .character2 .text h3 span {
  color: var(--character2);
}

#character .character3 .text h3 span {
  color: var(--character3);
}

#character .character4 .text h3 span {
  color: var(--character4);
}

#character .character5 .text h3 span {
  color: var(--character5);
}

#character .character6 .text h3 span {
  color: var(--character6);
}

#character .character7 .text h3 span {
  color: var(--character7);
}

#character .character8 .text h3 span {
  color: var(--character8);
}

#character .character9 .text h3 span {
  color: var(--character9);
}

#character .character10 .text h3 span {
  color: var(--character10);
}

#character .character .text .catchcopy {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: bold;
  padding: 0.3em 1em;
  margin: 1em auto;
  border-radius: 100px;
}

#character .character1 .text .catchcopy {
  background: var(--character1);
}

#character .character2 .text .catchcopy {
  background: var(--character2);
}

#character .character3 .text .catchcopy {
  background: var(--character3);
}

#character .character4 .text .catchcopy {
  background: var(--character4);
}

#character .character5 .text .catchcopy {
  background: var(--character5);
}

#character .character6 .text .catchcopy {
  background: var(--character6);
}

#character .character7 .text .catchcopy {
  background: var(--character7);
}

#character .character8 .text .catchcopy {
  background: var(--character8);
}

#character .character9 .text .catchcopy {
  background: var(--character9);
}

#character .character10 .text .catchcopy {
  background: var(--character10);
}

#character .character .text .name {
  font-weight: bold;
}

#character .character .text .name span {
}

#character .character .text .cv {
  font-weight: bold;
}

#character .character .text .cv.target {
  color: var(--orange);
}

#character .character .youtube_box {
  width: 100%;
}

@media screen and (max-width: 1000px) {
  #character .character .text h3 {
    width: 100%;
  }

  #character .character .text .catchcopy {
    margin: 0em auto 1em;
  }
}

@media screen and (max-width: 768px) {
  #character .character .img {
    width: 30%;
  }

  #character .character .text {
    width: 100%;
  }

  #character .character .text .catchcopy {
    margin: 1em auto;
  }

  #character .character .text .flex.flex_end {
    align-content: flex-end;
    width: 68%;
    margin: 0 0 0 auto;
  }

  #character .character:nth-child(even) .text .flex.flex_end {
    margin: 0 auto 0 0;
  }

  #character .character .text h3,
  #character .character .text .name,
  #character .character .text .cv {
    width: 100%;
    white-space: nowrap;
  }

  #character .character .text h3,
  #character .character .text .catchcopy {
    font-size: calc(var(--font-size) * 1.25);
  }

  #character .character.character,
  #character .character.character1 {
    margin: 2em auto;
  }
}

/*----------------------------------------form----------------------------------------*/
#form {
}

#form form {
  margin: 2em 0 0;
}

#form form .content {
  margin: 0 auto 2em;
}

#form form .content h3 {
  font-size: calc(var(--font-size) * 1.125);
  color: var(--color-white);
  background: var(--orange);
  padding: 0.3em 0.5em 0.2em;
  margin: 0 auto 2em;
}

#form form .content .bar {
  margin: 0 0 2em;
}

#form form .content .bar:last-child {
  margin: 0;
}

#form form .content .bar ul {
  margin: 1em auto 0;
}

#form form .content .bar ul li {
  padding: 2em;
}

#form form .content .bar ul li:nth-child(odd) {
  background: #fffbc8;
}

#form form .content .bar ul li img {
  width: 15%;
  max-width: 50px;
  margin: 0 0.5em;
}

#form form .content .bar ul li h5 {
  font-size: 1.6rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

#form form .content .bar ul li h5 span {
  font-size: 1.5em;
}

#form form .content .bar ul li:nth-child(1) h5 {
  color: var(--character2);
}

#form form .content .bar ul li:nth-child(2) h5 {
  color: var(--character4);
}

#form form .content .bar ul li:nth-child(3) h5 {
  color: var(--character5);
}

#form form .content .bar ul li:nth-child(4) h5 {
  color: var(--character6);
}

#form form .content .bar ul li:nth-child(5) h5 {
  color: var(--character7);
}

#form form .content .bar ul li:nth-child(6) h5 {
  color: var(--character8);
}

#form form .content .bar ul li:nth-child(7) h5 {
  color: var(--character9);
}

#form form .content .bar ul li:nth-child(8) h5 {
  color: var(--character10);
}

#form form .content .bar ul li .bold {
  font-size: 1.125em;
  padding: 0.5em 1em;
  color: #ffffff;
  margin: 1em auto 0;
  border-radius: 1vw;
}

#form form .content .bar ul li:nth-child(odd) .bold {
}

#form form .content .bar ul li:nth-child(1) .bold {
  background: rgb(from var(--character2) r g b / 95%);
}

#form form .content .bar ul li:nth-child(2) .bold {
  background: rgb(from var(--character4) r g b / 95%);
}

#form form .content .bar ul li:nth-child(3) .bold {
  background: rgb(from var(--character5) r g b / 95%);
}

#form form .content .bar ul li:nth-child(4) .bold {
  background: rgb(from var(--character6) r g b / 95%);
}

#form form .content .bar ul li:nth-child(5) .bold {
  background: rgb(from var(--character7) r g b / 95%);
}

#form form .content .bar ul li:nth-child(6) .bold {
  background: rgb(from var(--character8) r g b / 95%);
}

#form form .content .bar ul li:nth-child(7) .bold {
  background: rgb(from var(--character9) r g b / 95%);
}

#form form .content .bar ul li:nth-child(8) .bold {
  background: rgb(from var(--character10) r g b / 95%);
}

#form form .content .bar h4 {
  font-size: calc(var(--font-size) * 1.125);
  margin: 0 auto 1em;
}

#form form .content .bar h4:before {
  color: var(--orange);
}

#form form .content .bar h4:nth-child(1):before {
  content: "\02460";
}

#form form .content .bar h4:nth-child(2):before {
  content: "\02461";
}

#form form .content .bar h4:nth-child(3):before {
  content: "\02462";
}

#form form .content .bar h4:last-child {
  margin: 0 auto;
}

#form form .content .bar h4 span {
  color: var(--orange);
}

#form form .content .input_box {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

#form form .content .input_box .flex_box {
  margin: 0 auto 2.5em;
}

#form form .content .input_box .flex_box .text {
  width: 13em;
  padding: 0.3em 0 0;
}

#form form .content .input_box .flex_box .text .must {
  display: inline-block;
  background: var(--color-white);
  padding: 0.4em 0.5em 0.2em;
  border: 1px solid;
  border-radius: 3px;
}

#form form .content .input_box .flex_box.sns .input .input_move:first-child {
  margin: 0.5em auto 0;
}

#form form .content .input_box .flex_box.sns .input .input_move {
  margin: 1.5em auto 0;
}

#form form .content .input_box .checkbox {
  position: relative;
  margin: 0 auto 1em;
}

#form form .content .input_box .checkbox label {
  position: relative;
  padding: 0 0 0 30px;
}

#form form .content .input_box .checkbox input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

#form form .content .input_box .checkbox .control__indicator {
  position: absolute;
  top: 3px;
  left: 0;
  height: 15px;
  width: 15px;
  background: var(--color-light-grey);
  cursor: pointer;
}

#form
  form
  .content
  .input_box
  .checkbox:has(input:checked)
  .control__indicator {
  background: var(--theme-color);
}

#form form .content .input_box .checkbox .control__indicator:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#form
  form
  .content
  .input_box
  .checkbox:has(input:checked)
  .control__indicator:after {
  display: block;
}

#form
  form
  .content
  .input_box
  .checkbox:has(input:disabled)
  .control__indicator:after {
  border-color: var(--color-dark-grey);
}

#form form .content .input {
  width: calc(100% - 13em);
}

#form form .content .input .input_move {
  position: relative;
  margin: 0 auto 1em;
}

#form form .content .input .input_move:last-child {
  margin: 0 auto;
}

#form form .content .input .input_move p {
  font-size: calc(var(--font-size) * 0.8);
  margin: 0.5em auto 0;
}

#form form .content .input .input_move label {
  position: absolute;
  color: #aaa;
  transition: 0.2s;
  line-height: 1;
  top: 50%;
  left: 0.5em;
  translate: 0 -50%;
  pointer-events: none;
}

#form form .content .input .input_move:has(input:focus) label,
#form form .content .input .input_move:has(input.filled) label {
  font-size: calc(var(--font-size) * 0.8);
  top: -1rem;
  left: 0;
  color: #555;
}

#form form .content .input .input_move .mfp_err {
  position: absolute;
  top: 100%;
  font-size: calc(var(--font-size) * 0.8);
  color: var(--point-color);
  white-space: nowrap;
}

#form form .content .input .mfp_err {
}

#form form .content .input input {
  padding: 0.5em;
  margin: 0 0.5em 0 0;
  line-height: 1;
  transition: ease-in 0.2s;
}

#form form .content .input input[type="file"],
#form form .content .input input#file-upload-button {
  cursor: pointer;
}

#form form .content .input input:focus {
  background: rgb(from var(--theme-color) r g b / 25%);
}

#form form .content .input .radio_box {
  width: 49%;
}

#form form .content .input input.w5 {
  width: 5em;
}

#form form .content .input input.w10 {
  width: 10em;
}

#form form .content .input input.w15 {
  width: 15em;
}

#form form .content .input input.w_full {
  width: 100%;
}

#form form .btn {
  margin: 0 auto;
}

#form .btn.center div {
  margin: 0 1em;
}

#form .btn.center button {
  width: 100%;
  font-size: calc(var(--font-size) * 1.2);
  padding: 0.5em 2em;
}

#form .recording_box {
  padding: 30px 0;
}

@media screen and (max-width: 1000px) {
  #form form .content .input .radio_box {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #form form .content .bar ul li {
    display: block;
  }

  #form form .content .bar ul li h5 {
    width: 100%;
  }

  #form form .content .bar ul li .bold {
    width: 100%;
  }

  #form form .content .input_box .flex_box .text {
    width: 100%;
    padding: 0;
    margin: 0 auto 1em;
  }

  #form form .content .input {
    width: 100%;
  }

  #form form .content .flex .text {
    width: 100%;
  }

  #form form .content .bar ul li {
    padding: 5%;
  }
}

/* PC限定ホバー */
@media (hover: hover) and (pointer: fine) {
}

/*----------------------------------------recordButton----------------------------------------*/
#recordButton {
  position: relative;
  color: var(--color-white);
  width: 120px;
  height: 120px;
  background: #ff0000;
  border: 2px solid #333;
  border-radius: 100px;
  transition: ease-in 0.2s 0s;
}

#recordButton:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: #666;
  border-radius: 100px;
  z-index: -2;
}

#recordButton:hover {
  -ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

#recordButton.now_recording {
  background: #00ff00;
  transform: translateY(-2px);
}

/*----------------------------------------thanks----------------------------------------*/
#thanks {
}

#thanks h2 {
  font-size: calc(var(--font-size) * 1.25);
  text-align: center;
}

@media screen and (max-width: 768px) {
  #thanks h2 {
    font-size: var(--font-size);
    text-align: center;
    min-width: 300px;
  }
}

/*----------------------------------------provisions----------------------------------------*/
#provisions ul {
  list-style: decimal;
}

#provisions ul li {
  margin: 0 0 2em 1em;
  line-height: 1.5;
}

#provisions ul li h3 {
  font-size: calc(var(--font-size) * 1.125);
  margin: 0 auto 0.2em;
}

#provisions ul li ul {
  list-style: disc;
  margin: 0 0 0 1em;
}

#provisions ul li ul li {
  margin: 0 auto;
}

/*----------------------------------------eco----------------------------------------*/
#link02 {
  background: rgb(from var(--orange) r g b / 50%);
  padding: 5em 0;
}

#link02 .title_box {
  background: url(../img/common/main.jpg);
  margin: 0 auto 5em;
}

#link02 .title_box .person {
  height: 300px;
}

#link02 .title_box h2 {
}

#link02 .title_box h2 img {
  width: 55%;
  max-width: 550px;
  left: inherit;
  right: 0;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

#link02 .text {
  width: 60%;
  line-height: 250%;
  margin: 0 auto 5em;
}

#link02 .text:nth-child(3) {
  font-size: 1.125em;
}

#link02 .text .title {
  width: 80%;
  max-width: 250px;
  margin: 0 auto 2em;
}

#link02 .text .red {
  color: var(--point-color);
}

#link02 .past_box {
  width: 100%;
  margin: 0 auto;
}

#link02 .past_box .flex {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
  padding: 1em;
  margin: 0 auto 2em;
  background: #fdfad3;
}

#link02 .past_box .flex:last-child {
  margin: 0 auto;
}

#link02 .past_box .flex .img {
  width: 45%;
}

#link02 .past_box .flex .text {
  width: 52%;
}

#link02 .past_box .flex .text h3 {
  height: 5em;
  margin: 0 auto 1em;
}

#link02 .past_box .flex .text h3 img {
  height: 100%;
}

@media screen and (max-width: 1000px) {
  #link02 .past_box {
    width: 95%;
  }
}

@media screen and (max-width: 768px) {
  #link02 .text {
    width: 90%;
  }

  #link02 .title_box h2 img {
    width: 75%;
    top: 75%;
  }

  #link02 .past_box {
    width: 90%;
    margin: 0 auto;
  }

  #link02 .past_box .flex .img {
    width: 100%;
  }

  #link02 .past_box .flex .text {
    width: 100%;
    margin: 0 auto 1em;
  }
}