@charset "UTF-8";
/*--------------------------------------
font
---------------------------------------*/
body, .tooltip, .popover,
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/* Noto sansのIE表示用のCSS　*/
@media screen and (min-width: 0\0 ) and (min-resolution: 72dpi) {
  body, .tooltip, .popover,
  button, input, optgroup, select, textarea,
  h1, h2, h3, h4, h5,
  .h1, .h2, .h3, .h4, .h5 {
    font-family: Meiryo, sans-serif;
    font-weight: normal;
  }
}
/*--------------------------------------
base
---------------------------------------*/
body, button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

ol, ul {
  padding-left: 0;
  list-style: none;
}

img {
  vertical-align: baseline;
  font-size: 0;
  line-height: 0;
}

a {
  color: #333333;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
a:focus, a:hover {
  color: black;
  text-decoration: none;
}

.cf:after {
  content: "";
  display: block;
  clear: both;
}

/*bootstrap gridのgutter調整*/
.row-no-gutter {
  margin: 0;
}

.row-no-gutter > * {
  padding: 0;
}

.row-small-gutter {
  margin-left: -6px;
  margin-right: -6px;
}

.row-small-gutter > * {
  padding-left: 6px;
  padding-right: 6px;
}

.row-large-gutter {
  margin-left: -30px;
  margin-right: -30px;
}

.row-large-gutter > * {
  padding-left: 30px;
  padding-right: 30px;
}

/*--------------------------------------
reset
---------------------------------------*/
/* アニメーション ----------*/
.wow {
  visibility: hidden;
}

/*--------------------------------------
body
---------------------------------------*/
html {
  min-height: 100vh;
}
@media all and (max-width: 767px) {
  html {
    min-height: auto;
    background-color: transparent !important;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #333333;
  background-color: #FFFFFF;
  box-sizing: border-box;
  margin: 0;
}

@media all and (min-width: 769px) {
  a:hover {
    color: #303030;
  }
}
a:active {
  color: #303030;
}

.sp991 {
  display: none;
}
@media all and (max-width: 991px) {
  .sp991 {
    display: block;
  }
}

.sp580 {
  display: none;
}
@media all and (max-width: 580px) {
  .sp580 {
    display: block;
  }
}

.sp500 {
  display: none;
}
@media all and (max-width: 500px) {
  .sp500 {
    display: block;
  }
}

.pc580 {
  display: block;
}
@media all and (max-width: 580px) {
  .pc580 {
    display: none;
  }
}

/*--------------------------------------
fixed
---------------------------------------*/
.fixed-btn-recruit {
  position: fixed;
  top: 130px;
  right: 50%;
  transform: translateX(536%);
  z-index: 999;
}
@media all and (max-width: 1440px) {
  .fixed-btn-recruit {
    right: 1%;
    transform: translateX(0);
  }
}
@media all and (max-width: 767px) {
  .fixed-btn-recruit {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
  }
}
.fixed-btn-recruit a {
  position: relative;
  display: inline-block;
  width: 130px;
  height: 130px;
  background-color: #FD6298;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
  border-radius: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
@media all and (max-width: 767px) {
  .fixed-btn-recruit a {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 0 0;
  }
}
.fixed-btn-recruit a:hover {
  background-color: #F5216B;
}
.fixed-btn-recruit.fixed-btn-recruit-gradation a {
  background-image: radial-gradient(circle, #FD6298 0%, #F5216B 200%, #F8A7D0 100%);
  background-size: 200% auto;
  background-position: left center;
}
@media all and (min-width: 767px) {
  .fixed-btn-recruit.fixed-btn-recruit-gradation a:hover {
    background-image: radial-gradient(circle at 90% -70px, #F8A7D0 40%, #F5216B 70%);
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 8px 8px 20px rgba(239, 4, 86, 0.35);
  }
}

.fixed-backtotop {
  position: fixed;
  bottom: 20px;
  right: 50px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(100px);
}
@media all and (max-width: 767px) {
  .fixed-backtotop {
    bottom: 0;
    right: 0;
  }
}
.fixed-backtotop.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fixed-backtotop.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}
.fixed-backtotop a {
  text-decoration: none;
  background: #22BEF7;
  border-radius: 50px;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media all and (max-width: 767px) {
  .fixed-backtotop a {
    background: #FD6298;
    border-radius: 0 20px 0 0;
    width: 68px;
    height: 68px;
  }
}
@media all and (min-width: 767px) {
  .fixed-backtotop a:hover {
    background: #FFA5BD;
  }
}
.fixed-backtotop a span {
  color: #FFFFFF;
  font-size: 14px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}
@media all and (max-width: 767px) {
  .fixed-backtotop a span {
    display: none;
  }
}
.fixed-backtotop a .arrow {
  line-height: 0;
}

/*--------------------------------------
header
---------------------------------------*/
header#header {
  width: 100%;
  max-width: 1370px;
  margin: auto;
  position: relative;
}
@media all and (max-width: 767px) {
  header#header {
    width: 98%;
  }
}
header#header .header-inner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  max-width: 1370px;
  z-index: 9999;
  padding: 22px 0;
  border-radius: 50px;
}
@media all and (min-width: 767px) {
  header#header .header-inner {
    box-shadow: 10px 10px 25px rgba(239, 4, 86, 0.11);
  }
}
@media all and (max-width: 1380px) {
  header#header .header-inner {
    width: 98%;
  }
}

.header-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-left: 2%;
}
.header-left #logo {
  width: 270px;
  line-height: 0;
  z-index: 9;
}
@media all and (max-width: 767px) {
  .header-left #logo {
    width: 236px;
    height: 27px;
  }
}
.header-left #logo a {
  display: block;
}
.header-left #logo img {
  width: 100%;
}
.header-left .link-corporate {
  margin-left: 30px;
}
@media all and (max-width: 1200px) {
  .header-left .link-corporate {
    margin-left: 20px;
  }
}
@media all and (max-width: 767px) {
  .header-left .link-corporate {
    display: none;
  }
}
.header-left .link-corporate a {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}
.header-left .link-corporate a svg {
  fill: #1A1A50;
  transition: all .3s ease;
}
.header-left .link-corporate a:hover {
  color: #EF0456;
}
.header-left .link-corporate a:hover svg {
  fill: #EF0456;
}

@media all and (min-width: 767px) {
  #g-nav {
    position: absolute;
    top: 7px;
    right: 3%;
    z-index: 9999;
  }
}
@media all and (min-width: 1201px) {
  #g-nav {
    right: 2%;
  }
}
@media all and (max-width: 767px) {
  #g-nav {
    display: none;
  }
}
#g-nav ul {
  display: flex;
}
#g-nav ul li {
  list-style: none;
}
#g-nav ul li:not(:last-of-type) {
  margin-right: 40px;
}
@media all and (max-width: 1200px) {
  #g-nav ul li:not(:last-of-type) {
    margin-right: 20px;
  }
}
#g-nav ul li a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-weight: 700;
  transition: ease .3s;
  position: relative;
  padding: 10px 0;
}
@media all and (min-width: 767px) {
  #g-nav ul li a:hover {
    color: #F5216B;
  }
}
@media all and (min-width: 767px) {
  #g-nav ul li a::after {
    content: "";
    width: 11px;
    height: 8px;
    background-image: url("../img/nav-icon-triangle.png");
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

#g-nav-sp {
  position: fixed;
  z-index: 999;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  background: #FFE4EE;
  transition: all 0.6s;
  background-repeat: no-repeat;
  background-size: contain;
  padding-right: 0;
}
#g-nav-sp.panelactive {
  right: 0;
}
#g-nav-sp.panelactive #g-nav-list {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav-sp #g-nav-list-sp > div {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
#g-nav-sp ul {
  width: 90%;
  display: block;
}
#g-nav-sp ul li:not(:last-of-type) {
  margin-right: 0;
  margin-bottom: 30px;
}
#g-nav-sp ul li a {
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 0;
}
#g-nav-sp .link-corporate-sp {
  display: none;
  display: block;
  margin-top: 40px;
}
#g-nav-sp .link-corporate-sp a {
  color: #FF6A92;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  background-color: #FFFFFF;
  border: solid 1px #FFA5BD;
  border-radius: 50px;
  display: inline-block;
  padding: 11px 30px;
}
#g-nav-sp .link-corporate-sp a svg {
  fill: #FF6A92;
}

.openbtn {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  cursor: pointer;
  width: 95px;
  height: 95px;
  transition: ease .2s;
  display: block;
}
@media all and (min-width: 767px) {
  .openbtn {
    display: none;
  }
}
@media all and (max-width: 1500px) {
  .openbtn {
    width: 67px;
    height: 67px;
  }
}
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  border-radius: 2px;
  background-color: #000000;
  width: 52%;
}
.openbtn span:nth-of-type(1) {
  top: 25px;
}
.openbtn span:nth-of-type(2) {
  top: 34px;
}
.openbtn span:nth-of-type(3) {
  top: 43px;
}
.openbtn.active {
  background-color: transparent;
}
.openbtn.active span {
  background-color: #000000;
}
.openbtn.active span:nth-of-type(1) {
  top: 47px;
  transform: translateX(-50%) rotate(-45deg);
  width: 45%;
}
@media all and (max-width: 1500px) {
  .openbtn.active span:nth-of-type(1) {
    top: 34px;
    width: 48%;
  }
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: 47px;
  transform: translateX(-50%) rotate(45deg);
  width: 45%;
}
@media all and (max-width: 1500px) {
  .openbtn.active span:nth-of-type(3) {
    top: 34px;
    width: 48%;
  }
}

/*--------------------------------------
footer
---------------------------------------*/
footer #copy {
  color: #303030;
  background-color: #EEEEEE;
  text-align: center;
}

/*--------------------------------------
hero
---------------------------------------*/
#kv {
  width: 92%;
  max-width: 1330px;
  margin: auto auto 50px;
  position: relative;
}
@media all and (max-width: 580px) {
  #kv {
    width: 86%;
    margin: 90px auto 60px;
  }
}
#kv .img {
  position: relative;
  line-height: 0;
}
#kv .img img {
  width: 100%;
  border-radius: 0 0 60px 60px;
}
@media all and (max-width: 580px) {
  #kv .img img {
    border-radius: 60px;
  }
}
#kv .img .bg-gradation {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to top left, #7CF0FF, #FBE0FF 80%);
  opacity: .3;
  border-radius: 0 0 60px 60px;
}
@media all and (max-width: 580px) {
  #kv .img .bg-gradation {
    border-radius: 60px;
  }
}
#kv .copy {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 48%;
}
@media all and (max-width: 1380px) {
  #kv .copy {
    width: 50%;
  }
}
@media all and (max-width: 991px) {
  #kv .copy {
    width: 58%;
  }
}
@media all and (max-width: 580px) {
  #kv .copy {
    position: static;
    transform: translateY(0);
    width: 100%;
  }
}
#kv .copy .cathcopy {
  font-size: 70px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 60px;
}
@media all and (max-width: 1380px) {
  #kv .copy .cathcopy {
    font-size: 52px;
  }
}
@media all and (max-width: 991px) {
  #kv .copy .cathcopy {
    font-size: 46px;
    margin-bottom: 30px;
  }
}
@media all and (max-width: 767px) {
  #kv .copy .cathcopy {
    font-size: 40px;
  }
}
@media all and (max-width: 580px) {
  #kv .copy .cathcopy {
    font-size: 32px;
  }
}
#kv .copy .subcopy {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}
@media all and (max-width: 1380px) {
  #kv .copy .subcopy {
    font-size: 16px;
  }
}
@media all and (max-width: 991px) {
  #kv .copy .subcopy {
    font-size: 14px;
  }
}
@media all and (max-width: 767px) {
  #kv .copy .subcopy {
    font-size: 12px;
  }
}
#kv .copy .subcopy span {
  font-size: 20px;
  font-weight: 700;
}
@media all and (max-width: 767px) {
  #kv .copy .subcopy span {
    font-size: 18px;
  }
}

/*--------------------------------------
section
---------------------------------------*/
#infograph {
  background-color: #F9F9F9;
  padding-top: 100px;
  padding-bottom: 60px;
  overflow: hidden;
}
#infograph .infograph-inner {
  width: 90%;
  max-width: 1080px;
  margin: auto;
  position: relative;
  z-index: 0;
}
#infograph .infograph-inner::before {
  content: "";
  background-image: url("../img/date-bg-ornament.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 308px;
  height: 308px;
  display: block;
  position: absolute;
  top: -60px;
  right: -144px;
  z-index: -1;
}
@media all and (max-width: 500px) {
  #infograph .infograph-inner::before {
    width: 238px;
    height: 238px;
  }
}
#infograph .infograph-inner::after {
  content: "";
  background-image: url("../img/date-bg-ornament02.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 210px;
  height: 210px;
  display: block;
  position: absolute;
  bottom: 210px;
  left: -170px;
  z-index: -1;
}
#infograph .infograph-inner h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media all and (max-width: 500px) {
  #infograph .infograph-inner h2 {
    font-size: 30px;
  }
}
#infograph .infograph-inner h2 span {
  color: #FF6A92;
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}
#infograph .infograph-inner > p {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 70px;
  line-height: 1.8;
}
#infograph .infograph-inner .infograph-contents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  gap: 50px 30px;
}
#infograph .infograph-inner .infograph-contents .box {
  background-color: #FFFFFF;
  padding: 60px 30px 30px;
  box-sizing: border-box;
  position: relative;
}
@media all and (max-width: 767px) {
  #infograph .infograph-inner .infograph-contents .box {
    width: 100% !important;
    max-width: 380px !important;
  }
}
#infograph .infograph-inner .infograph-contents .box h3 {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  background-color: #22BEF7;
  border-radius: 50px;
  text-align: center;
  width: 98%;
  max-width: 280px;
  padding: 6px 0;
  box-sizing: border-box;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}
#infograph .infograph-inner .infograph-contents .box.vacation {
  width: 320px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.vacation {
    width: 28%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.vacation {
    width: 47%;
  }
}
#infograph .infograph-inner .infograph-contents .box.vacation .infograph-value {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 40px;
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.vacation .infograph-value {
    justify-content: center;
  }
}
#infograph .infograph-inner .infograph-contents .box.vacation .infograph-value .txt {
  font-weight: 700;
  line-height: 1.3;
  margin-right: 40px;
}
#infograph .infograph-inner .infograph-contents .box.vacation .infograph-value .txt .before-txt {
  color: #22BEF7;
  font-size: 22px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.vacation .infograph-value .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.vacation .infograph-value .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.vacation .infograph-value .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.vacation .infograph-value .txt .num span {
    font-size: 22px;
  }
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.vacation .img {
    width: 90px;
  }
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.vacation .img img {
    width: 100%;
  }
}
#infograph .infograph-inner .infograph-contents .box.vacation p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.overtime {
  width: 278px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.overtime {
    width: 28%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.overtime {
    width: 47%;
  }
}
#infograph .infograph-inner .infograph-contents .box.overtime .infograph-value {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 40px;
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.overtime .infograph-value {
    justify-content: center;
  }
}
#infograph .infograph-inner .infograph-contents .box.overtime .infograph-value .txt {
  font-weight: 700;
  line-height: 1.3;
  margin-right: 40px;
}
#infograph .infograph-inner .infograph-contents .box.overtime .infograph-value .txt .before-txt {
  color: #22BEF7;
  font-size: 22px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.overtime .infograph-value .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.overtime .infograph-value .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.overtime .infograph-value .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.overtime .infograph-value .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.overtime p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.training {
  width: 417px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.training {
    width: 37%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.training {
    width: 47%;
  }
}
#infograph .infograph-inner .infograph-contents .box.training .infograph-value {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 40px;
}
#infograph .infograph-inner .infograph-contents .box.training .infograph-value .txt {
  font-weight: 700;
  line-height: 1.3;
  margin-right: 40px;
  width: 150px;
}
#infograph .infograph-inner .infograph-contents .box.training .infograph-value .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.training .infograph-value .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.training .infograph-value .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.training .infograph-value .txt .after-txt {
  font-size: 12px;
}
#infograph .infograph-inner .infograph-contents .box.training p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.experience {
  width: 520px;
  padding-left: 60px;
  padding-right: 60px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.experience {
    width: 48%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.experience {
    width: 47%;
    padding-left: 30px;
    padding-right: 30px;
  }
}
#infograph .infograph-inner .infograph-contents .box.experience .infograph-value {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
#infograph .infograph-inner .infograph-contents .box.experience .infograph-value .txt {
  font-weight: 700;
  line-height: 1.3;
}
#infograph .infograph-inner .infograph-contents .box.experience .infograph-value .txt .before-txt {
  color: #22BEF7;
  font-size: 22px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.experience .infograph-value .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.experience .infograph-value .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.experience .infograph-value .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.experience .infograph-value .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.experience p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.undergraduate {
  width: 515px;
  padding-left: 60px;
  padding-right: 60px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.undergraduate {
    width: 48%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.undergraduate {
    width: 47%;
    padding-left: 30px;
    padding-right: 30px;
  }
}
#infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
#infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value .txt {
  font-weight: 700;
  line-height: 1.3;
}
#infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value .txt .before-txt {
  color: #22BEF7;
  font-size: 22px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.undergraduate .infograph-value .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.undergraduate p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.gender {
  width: 300px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.gender {
    width: 28%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.gender {
    width: 47%;
  }
}
#infograph .infograph-inner .infograph-contents .box.gender .img {
  text-align: center;
  margin-bottom: 16px;
}
#infograph .infograph-inner .infograph-contents .box.gender .txt {
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}
#infograph .infograph-inner .infograph-contents .box.gender .txt .before-txt {
  color: #22BEF7;
  font-size: 22px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.gender .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.gender .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.gender .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.gender .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.gender p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.age {
  width: 409px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.age {
    width: 37%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.age {
    width: 47%;
  }
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt {
  font-weight: 700;
  line-height: 1.3;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt:first-of-type {
  display: flex;
  flex-direction: column;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt:first-of-type > div:not(:last-of-type) {
  margin-bottom: 40px;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt:last-of-type {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt:last-of-type > div:not(:first-of-type) {
  margin-bottom: 16px;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt > div {
  line-height: 1.1;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt .before-txt {
  color: #22BEF7;
  font-size: 20px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt .num {
  font-size: 34px;
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt .num span {
  font-size: 21px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.age .infograph-value .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.age .infograph-value .img img {
  width: 100%;
}
#infograph .infograph-inner .infograph-contents .box.age p {
  font-size: 16px;
  font-weight: 500;
}
#infograph .infograph-inner .infograph-contents .box.annualevent {
  width: 290px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.annualevent {
    width: 28%;
  }
}
@media all and (max-width: 991px) {
  #infograph .infograph-inner .infograph-contents .box.annualevent {
    width: 47%;
  }
}
#infograph .infograph-inner .infograph-contents .box.annualevent .img {
  text-align: center;
  margin-bottom: 16px;
}
#infograph .infograph-inner .infograph-contents .box.annualevent .txt {
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}
#infograph .infograph-inner .infograph-contents .box.annualevent .txt .before-txt {
  color: #22BEF7;
  font-size: 22px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.annualevent .txt .before-txt {
    font-size: 20px;
  }
}
#infograph .infograph-inner .infograph-contents .box.annualevent .txt .num {
  font-size: 42px;
}
#infograph .infograph-inner .infograph-contents .box.annualevent .txt .num span {
  font-size: 25px;
}
@media all and (max-width: 1200px) {
  #infograph .infograph-inner .infograph-contents .box.annualevent .txt .num span {
    font-size: 22px;
  }
}
#infograph .infograph-inner .infograph-contents .box.annualevent p {
  font-size: 16px;
  font-weight: 500;
}

/*--------------------------------------
section
---------------------------------------*/
#induction {
  padding: 80px 0;
  overflow: hidden;
}
@media all and (max-width: 500px) {
  #induction {
    padding: 80px 0 90px;
  }
}
#induction .induction-inner {
  width: 90%;
  max-width: 1080px;
  margin: auto;
}
#induction .induction-inner h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
@media all and (max-width: 500px) {
  #induction .induction-inner h2 {
    font-size: 30px;
  }
}
#induction .induction-inner h2::after {
  content: "";
  background-image: url("../img/induction-bg-ornament.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 276px;
  height: 276px;
  display: block;
  position: absolute;
  top: -40px;
  left: 20px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner h2::after {
    width: 206px;
    height: 206px;
  }
}
@media all and (max-width: 500px) {
  #induction .induction-inner h2::after {
    width: 156px;
    height: 156px;
    top: -40px;
    left: 20px;
  }
}
#induction .induction-inner h2 span {
  color: #FF6A92;
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}
#induction .induction-inner > p {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 70px;
  line-height: 1.8;
}
#induction .induction-inner .induction-main-colum01 {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum01 {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: auto auto 50px;
  }
}
#induction .induction-inner .induction-main-colum01 .img {
  width: 50%;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum01 .img {
    width: 100%;
    margin-bottom: 10px;
  }
}
#induction .induction-inner .induction-main-colum01 .img img {
  width: 100%;
  border-radius: 30px;
}
#induction .induction-inner .induction-main-colum01 .txt {
  width: 50%;
  padding-right: 40px;
  box-sizing: border-box;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum01 .txt {
    width: 100%;
    padding-right: 0;
  }
}
#induction .induction-inner .induction-main-colum01 .txt h3 {
  color: #22BEF7;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum01 .txt h3 {
    font-size: 26px;
    margin-bottom: 10px;
  }
}
#induction .induction-inner .induction-main-colum01 .txt p {
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}
#induction .induction-inner .induction-main-colum02 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50px;
  position: relative;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum02 {
    display: block;
  }
}
#induction .induction-inner .induction-main-colum02::after {
  content: "";
  background-image: url("../img/induction-bg-ornament02.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 186px;
  height: 210px;
  display: block;
  position: absolute;
  bottom: -120px;
  right: -170px;
}
#induction .induction-inner .induction-main-colum02 .box {
  width: 30%;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum02 .box {
    width: 100%;
    max-width: 350px;
    margin: auto;
  }
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum02 .box:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
#induction .induction-inner .induction-main-colum02 .box .img {
  margin-bottom: 20px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-main-colum02 .box .img {
    margin-bottom: 10px;
  }
}
#induction .induction-inner .induction-main-colum02 .box .img img {
  width: 100%;
  border-radius: 30px;
}
#induction .induction-inner .induction-main-colum02 .box p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}
#induction .induction-inner .induction-main-colum02 .box p .color-bule {
  color: #22BEF7;
  font-size: 15px;
  font-weight: 700;
}
#induction .induction-inner .induction-other > p {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-other > p {
    width: 100%;
    font-size: 24px;
    max-width: 350px;
    margin: auto auto 20px;
  }
}
#induction .induction-inner .induction-other .induction-other-colum01 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-other .induction-other-colum01 {
    display: block;
  }
}
#induction .induction-inner .induction-other .induction-other-colum01 .box {
  width: 30%;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-other .induction-other-colum01 .box {
    width: 100%;
    max-width: 350px;
    margin: auto;
  }
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-other .induction-other-colum01 .box:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
#induction .induction-inner .induction-other .induction-other-colum01 .box h3 {
  color: #22BEF7;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media all and (max-width: 991px) {
  #induction .induction-inner .induction-other .induction-other-colum01 .box h3 {
    font-size: 20px;
  }
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-other .induction-other-colum01 .box h3 {
    margin-bottom: 10px;
  }
}
#induction .induction-inner .induction-other .induction-other-colum01 .box .img {
  margin-bottom: 20px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-other .induction-other-colum01 .box .img {
    margin-bottom: 10px;
  }
}
#induction .induction-inner .induction-other .induction-other-colum01 .box .img img {
  width: 100%;
  border-radius: 30px;
}
#induction .induction-inner .induction-other .induction-other-colum01 .box p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}
#induction .induction-inner .induction-txt {
  margin-top: 100px;
  text-align: center;
}
#induction .induction-inner .induction-txt > div {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  background-color: #FD6298;
  border-radius: 28px;
  display: inline-block;
  padding: 12px 40px;
  position: relative;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-txt > div {
    font-size: 17px;
    padding: 12px 30px;
  }
}
#induction .induction-inner .induction-txt > div::before {
  content: "";
  background-image: url("../img/induction-btn-ornament-left.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 102px;
  height: 100px;
  display: block;
  position: absolute;
  top: 50%;
  left: -70px;
  transform: translateY(-50%);
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-txt > div::before {
    width: 62px;
    height: 62px;
    left: -30px;
  }
}
@media all and (max-width: 500px) {
  #induction .induction-inner .induction-txt > div::before {
    top: -40px;
    left: 0;
    transform: translateY(0);
  }
}
#induction .induction-inner .induction-txt > div::after {
  content: "";
  background-image: url("../img/induction-btn-arnament-right.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 214px;
  height: 185px;
  display: block;
  position: absolute;
  bottom: -30px;
  right: -170px;
}
@media all and (max-width: 767px) {
  #induction .induction-inner .induction-txt > div::after {
    width: 114px;
    height: 98px;
    bottom: 60px;
    right: -20px;
  }
}
@media all and (max-width: 500px) {
  #induction .induction-inner .induction-txt > div::after {
    bottom: -80px;
  }
}

/*--------------------------------------
section VOICE
---------------------------------------*/
#voice {
  background-color: #F9F9F9;
  padding: 70px 0 80px;
  overflow: hidden;
}
#voice .voice-inner {
  width: 90%;
  max-width: 1050px;
  margin: auto;
  position: relative;
  z-index: 0;
}
#voice .voice-inner::after {
  content: "";
  background-image: url("../img/voice-bg-ornament.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 154px;
  height: 153px;
  display: block;
  position: absolute;
  top: -10px;
  left: -100px;
  z-index: -1;
}
#voice .voice-inner h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media all and (max-width: 500px) {
  #voice .voice-inner h2 {
    font-size: 30px;
  }
}
#voice .voice-inner h2 span {
  color: #FF6A92;
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}
#voice .voice-inner > p {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 70px;
  line-height: 1.8;
}
#voice .voice-inner .voice-contents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
@media all and (max-width: 991px) {
  #voice .voice-inner .voice-contents {
    display: block;
  }
}
#voice .voice-inner .voice-contents .box {
  width: 48%;
  background-color: #FFFFFF;
  border-radius: 30px;
  padding: 60px 30px 30px;
  box-sizing: border-box;
  position: relative;
}
@media all and (max-width: 991px) {
  #voice .voice-inner .voice-contents .box {
    width: 100%;
    max-width: 500px;
    margin: auto;
  }
}
@media all and (max-width: 500px) {
  #voice .voice-inner .voice-contents .box {
    padding: 40px 30px 30px;
  }
}
#voice .voice-inner .voice-contents .box:nth-last-of-type(n+3) {
  margin-bottom: 80px;
}
@media all and (max-width: 991px) {
  #voice .voice-inner .voice-contents .box:nth-last-of-type(n+3) {
    margin-bottom: 0;
  }
}
@media all and (max-width: 991px) {
  #voice .voice-inner .voice-contents .box:not(:last-of-type) {
    margin-bottom: 80px;
  }
}
#voice .voice-inner .voice-contents .box .profile {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  background-color: #22BEF7;
  border-radius: 28px;
  width: 100%;
  max-width: 450px;
  text-align: center;
  padding: 14px 0;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
}
@media all and (max-width: 500px) {
  #voice .voice-inner .voice-contents .box .profile {
    font-size: 16px;
  }
}
#voice .voice-inner .voice-contents .box h3 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
#voice .voice-inner .voice-contents .box .txt {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-left: -30px;
}
@media all and (max-width: 500px) {
  #voice .voice-inner .voice-contents .box .txt {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
  }
}
#voice .voice-inner .voice-contents .box .txt .img {
  width: 43%;
  margin-bottom: -10px;
}
@media all and (max-width: 500px) {
  #voice .voice-inner .voice-contents .box .txt .img {
    width: 130px;
    margin-bottom: 10px;
  }
}
#voice .voice-inner .voice-contents .box .txt .img img {
  width: 100%;
}
#voice .voice-inner .voice-contents .box .txt p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  width: 57%;
}
@media all and (max-width: 500px) {
  #voice .voice-inner .voice-contents .box .txt p {
    width: 100%;
    margin-left: 0;
  }
}
#voice .voice-inner .voice-contents .box:nth-of-type(1) h3 {
  color: #68D6E0;
}
#voice .voice-inner .voice-contents .box:nth-of-type(2) h3 {
  color: #FFA3C4;
}
#voice .voice-inner .voice-contents .box:nth-of-type(3) h3 {
  color: #FD6298;
}
#voice .voice-inner .voice-contents .box:nth-of-type(3) .img {
  margin-bottom: -30px;
}
@media all and (max-width: 500px) {
  #voice .voice-inner .voice-contents .box:nth-of-type(3) .img {
    margin-bottom: 10px;
  }
}
#voice .voice-inner .voice-contents .box:nth-of-type(4) h3 {
  color: #728BCF;
}

/*--------------------------------------
section
---------------------------------------*/
#evaluation {
  padding: 60px 0 40px;
  position: relative;
}
#evaluation::after {
  content: "";
  background-image: url("../img/evaluation-bg-ornament.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 267px;
  height: 319px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
@media all and (max-width: 767px) {
  #evaluation::after {
    width: 187px;
    height: 217px;
  }
}
#evaluation .evaluation-inner {
  width: 90%;
  max-width: 1080px;
  margin: auto;
}
#evaluation .evaluation-inner h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media all and (max-width: 500px) {
  #evaluation .evaluation-inner h2 {
    font-size: 30px;
  }
}
#evaluation .evaluation-inner h2 span {
  color: #FF6A92;
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}
#evaluation .evaluation-inner > p {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 70px;
  line-height: 1.8;
}
#evaluation .evaluation-inner .evaluation-contents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
@media all and (max-width: 767px) {
  #evaluation .evaluation-inner .evaluation-contents {
    display: block;
  }
}
#evaluation .evaluation-inner .evaluation-contents .box {
  width: 30%;
}
@media all and (max-width: 767px) {
  #evaluation .evaluation-inner .evaluation-contents .box {
    width: 100%;
    max-width: 350px;
    margin: auto auto 30px;
  }
}
@media all and (max-width: 767px) {
  #evaluation .evaluation-inner .evaluation-contents .box:not(:last-of-type) {
    margin: auto auto 30px;
  }
}
#evaluation .evaluation-inner .evaluation-contents .box h3 {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  background-color: #6ECEF2;
  border-radius: 28px;
  text-align: center;
  margin-bottom: 20px;
  padding: 6px 0;
}
@media all and (max-width: 991px) {
  #evaluation .evaluation-inner .evaluation-contents .box h3 {
    font-size: 16px;
  }
}
@media all and (max-width: 767px) {
  #evaluation .evaluation-inner .evaluation-contents .box h3 {
    font-size: 22px;
  }
}
#evaluation .evaluation-inner .evaluation-contents .box .img {
  margin-bottom: 20px;
}
#evaluation .evaluation-inner .evaluation-contents .box .img img {
  width: 100%;
}
#evaluation .evaluation-inner .evaluation-contents .box p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

/*--------------------------------------
section
---------------------------------------*/
#message {
  padding-top: 90px;
}
#message .message-inner {
  width: 90%;
  max-width: 1080px;
  margin: auto;
  position: relative;
}
#message .message-inner h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 100px;
  position: relative;
}
@media all and (max-width: 767px) {
  #message .message-inner h2 {
    margin-bottom: 30px;
  }
}
@media all and (max-width: 500px) {
  #message .message-inner h2 {
    font-size: 30px;
  }
}
#message .message-inner h2::after {
  content: "";
  background-image: url("../img/message-bg-ornament.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 154px;
  height: 153px;
  display: block;
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-120%);
  z-index: -1;
}
@media all and (max-width: 767px) {
  #message .message-inner h2::after {
    width: 104px;
    height: 103px;
    transform: translateX(-130%);
  }
}
#message .message-inner h2 span {
  color: #FF6A92;
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}
#message .message-inner .txt {
  width: 65%;
  margin-left: 0;
  margin-right: auto;
}
@media all and (max-width: 1300px) {
  #message .message-inner .txt {
    width: 62%;
  }
}
@media all and (max-width: 767px) {
  #message .message-inner .txt {
    width: 100%;
  }
}
#message .message-inner .txt h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media all and (max-width: 991px) {
  #message .message-inner .txt h3 {
    font-size: 22px;
  }
}
@media all and (max-width: 767px) {
  #message .message-inner .txt h3 {
    font-size: 26px;
  }
}
#message .message-inner .txt p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 10px;
}
#message .message-inner .txt .name {
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}
#message .message-inner .img {
  position: absolute;
  bottom: 30px;
  right: -100px;
  width: 42%;
  z-index: -1;
}
@media all and (max-width: 1300px) {
  #message .message-inner .img {
    right: 0;
    width: 38%;
  }
}
@media all and (max-width: 767px) {
  #message .message-inner .img {
    position: static;
    width: 250px;
    margin: 30px auto auto;
  }
}
#message .message-inner .img img {
  width: 100%;
}

/*--------------------------------------
btn-recruit
---------------------------------------*/
.btn-recruit {
  padding-top: 60px;
  text-align: center;
}
.btn-recruit a {
  position: relative;
  display: inline-block;
  width: 280px;
  padding: 15px 10px;
  background-color: #FD6298;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
  border-radius: 30px;
}
@media all and (min-width: 767px) {
  .btn-recruit a:hover {
    background-color: #F5216B;
  }
}
.btn-recruit.btn-recruit-gradation a {
  background-image: radial-gradient(circle, #FD6298 0%, #F5216B 200%, #F8A7D0 100%);
  background-size: 200% auto;
  background-position: left center;
}
@media all and (min-width: 767px) {
  .btn-recruit.btn-recruit-gradation a:hover {
    background-image: radial-gradient(circle at 61% -140px, #F8A7D0 30%, #F5216B 60%);
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 8px 8px 20px rgba(239, 4, 86, 0.35);
  }
}

/*--------------------------------------
footer
---------------------------------------*/
footer {
  text-align: center;
  position: relative;
}
@media all and (max-width: 767px) {
  footer {
    margin-bottom: 68px;
  }
}
footer::after {
  content: "";
  background-image: url("../img/footer-bg-ornament.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 348px;
  height: 195px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 14%;
  z-index: -1;
}
@media all and (max-width: 767px) {
  footer::after {
    width: 298px;
    height: 167px;
    right: 5%;
  }
}
footer .copyright {
  font-size: 15px;
  font-weight: 500;
  padding-top: 60px;
  padding-bottom: 30px;
}