@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  color: #000;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

a[href^="tel:"] {
  pointer-events: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  backface-visibility: hidden;
}

address {
  font-style: normal;
}

/* ページ共通 */
:where(#g-navi li a, .mail a, .footer-menu-list ul li a, #jpiaagency a):hover {
  opacity: .6;
}

#header {
  width: 100%;
  height: 100px;
  background-color: #fff;
  color: #000;
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  max-width: 1760px;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

.site-title {
  font-size: 0.75rem;
}

.site-title img {
  display: block;
  width: 120px;
}

#g-navi ul {
  display: flex;
  justify-content: space-between;
}

#g-navi ul li {
  margin-left: 30px;
}

#g-navi ul li:first-child {
  margin-left: 0;
}

#g-navi li a {
  display: inline-block;
  text-align: center;
  color: #0C328C;
  font-weight: bold;
}

#g-navi li a span {
  display: block;
  color: #717171;
  font-size: 0.75rem;
  font-weight: normal;
}

.header-address {
  display: none;
}

#hamburger-btn {
  display: none;
}

.wrapper section,
.examination-container section,
.rankup-container section,
.footer-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.section-title,
#examination h1,
#rankup h1,
#jpiaagency h1,
#privacypolicy h1 {
  padding-bottom: 10px;
  box-sizing: border-box;
  color: #0C328C;
  font-size: 2.25rem;
  border-bottom: #0C328C 1px solid;
}

.certificate-wrap>dt,
.pass-kinds>dt,
.examination-item03 section dl dt,
.rankup-item03 dl dt {
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 30px;
  border-left: solid 5px #009842;
  font-size: 1.25rem;
  font-weight: bold;
}

#footer {
  color: #fff;
  background-color: #0C328C;
}

.footer-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.footer-wrap section {
  width: 300px;
  margin-left: 50px;
}

.footer-wrap section:first-child {
  margin-left: 0;
}

.footer-wrap section h3 {
  padding-bottom: 10px;
  box-sizing: border-box;
  margin-bottom: 30px;
  font-size: 2.25rem;
  border-bottom: #fff 1px solid;
}

.fb-page,
.map iframe {
  max-width: 300px;
  width: 100%;
  height: 400px;
}

/* .fb-page {
  width: 100% !important;
  height: 400px !important;
}

.map iframe {
  width: 300px;
  height: 400px;
} */

.footer-menu {
  display: flex;
  flex-direction: column;
}

.footer-menu-address {
  padding-left: 23px;
  box-sizing: border-box;
  margin-bottom: 30px;
  position: relative;
}

:where(.footer-menu-address, .mail a)::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.footer-menu-address::before {
  display: block;
  background-image: url(../img/190_b_hoso.svg);
  float: left;
  margin-left: -22px;
  filter: brightness(0) invert(1);
}

.footer-menu-mail a {
  color: #fff;
}

.mail a {
  text-decoration: underline;
}

.mail a::before {
  background-image: url(../img/830_ma_h.svg);
  margin-right: 3px;
}

.footer-menu-mail a::before {
  filter: brightness(0) invert(1);
}

.footer-menu-list {
  margin-top: auto;
}

.footer-wrap ul li {
  margin-bottom: 10px;
}

.footer-menu-list ul li a {
  color: #fff;
  font-weight: bold;
}

.footer-menu-list ul li a span {
  display: block;
  color: #fff;
  font-size: 0.75rem;
  font-weight: normal;
  opacity: .6;
}

.copyright {
  text-align: center;
  padding: 0 4%;
  box-sizing: border-box;
}

#top-btn {
  display: block;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: #000 1px solid;
  box-sizing: border-box;
  border-radius: 50%;
  opacity: .6;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 80;
}

#top-btn::before,
#top-btn::after {
  content: "";
  display: inline-block;
  position: relative;
}

#top-btn::before {
  width: 15px;
  height: 1px;
  background: #000;
  left: 7px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

#top-btn::after {
  width: 4px;
  height: 4px;
  border-top: #000 1px solid;
  border-right: #000 1px solid;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top: -3px;
  left: -3px;
}

#top-btn:hover {
  opacity: 1;
}

/* トップページ以外の共通 */
#examination,
#rankup,
#jpiaagency,
#privacypolicy {
  padding: 200px 4% 0;
  box-sizing: border-box;
}

.examination-container,
.rankup-container {
  padding: 100px 4% 0;
  box-sizing: border-box;
}

.examination-container:last-of-type,
.rankup-container:last-of-type {
  padding-bottom: 100px;
}

#examination section h1 span,
#rankup section h1 span,
#jpiaagency section h1 span,
#privacypolicy section h1 span {
  color: #717171;
  font-size: 1.25rem;
}

.other-pages-visual {
  margin-top: 60px;
}

.examination-container section h2,
.rankup-container section h2 {
  display: flex;
  align-items: center;
  font-size: 2.25rem;
  font-weight: normal;
  color: #0C328C;
}

.examination-container section h2::before,
.examination-container section h2::after,
.rankup-container section h2::before,
.rankup-container section h2::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #0C328C;
}

.examination-container section h2::before,
.rankup-container section h2::before {
  margin-right: 20px;
}

.examination-container section h2::after,
.rankup-container section h2::after {
  margin-left: 20px;
}

.orange-btn {
  width: 376px;
  margin: 60px auto 0;
  text-align: center;
}

.orange-btn a {
  display: block;
  padding: 25px 20px;
  box-sizing: border-box;
  background-color: #E46006;
  box-shadow: 0 5px 0 #C85100;
  border-radius: 60px;
  font-weight: bold;
  color: #fff;
  transition: all .3s ease;
}

.orange-btn a:hover {
  box-shadow: none;
  transform: translateY(4px);
}

.free-btn a {
  background-color: #009842;
  box-shadow: 0 5px 0 #017031;
}

/* トップページのみ */
.main-visual {
  height: 100vh;
  background: linear-gradient(90deg, rgba(12, 50, 140, 1) 0%, rgba(255, 255, 255, 1) 50%);
  position: relative;
}

.main-visual img {
  width: 60%;
  object-fit: cover;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.main-visual p {
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 2;
  filter: drop-shadow(0 0 7px #0C328C);
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 15;
}

.leftAnime {
  display: block;
  overflow: hidden;
  opacity: 0;
}

.main-visual p .leftAnime span {
  display: inline-block;
  background-color: #fff;
  color: #0C328C;
  font-weight: bold;
  font-size: clamp(1.5rem, 3vw, 3rem);
}

.slideAnimeLeftRight,
.slideAnimeRightLeft {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#jpiatop,
#news,
#certificate,
#pass,
#business,
#agency,
#corporate,
#footer {
  padding: 100px 4%;
  box-sizing: border-box;
}

#news,
#pass,
#corporate {
  background-color: #F3F4F5;
}

.login-btn a,
.detail-btn a {
  display: inline-block;
  width: 200px;
  padding: 15px 0;
  box-sizing: border-box;
  border: #000 1px solid;
}

.jpiatop-text01 {
  max-width: 800px;
  margin: 60px auto;
}

.jpiatop-text01 p em {
  font-weight: bold;
  font-style: normal;
}

.jpiatop-text01 p:last-child {
  margin-top: 30px;
}

.jpiatop-text01 p:last-child strong {
  color: #E46006;
}

.jpiatop-text02 {
  display: flex;
  justify-content: space-between;
}

.jpiatop-text02 p {
  width: calc((100% - 70px) / 3);
  padding: 20px;
  box-sizing: border-box;
  background-color: #F3F4F5;
}

.news-item01 {
  max-width: 627px;
  margin: 60px auto 0;
  background-color: #fff;
  border: #0C328C 1px solid;
  box-sizing: border-box;
}

.news-item01 p:first-child {
  display: inline-block;
  padding: 4px 10px;
  box-sizing: border-box;
  background-color: #0C328C;
  color: #fff;
  font-weight: bold;
}

.news-item01 p:last-child {
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.news-item01 p span {
  color: #717171;
  font-size: 1rem;
  font-weight: normal;
}

.news-item02,
.news-item03 {
  padding: 30px;
  box-sizing: border-box;
  margin-top: 30px;
  background-color: #fff;
}

.news-item03 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-item02-text,
.news-item03-text {
  margin-right: 170px;
}

:where(.news-item02-text p, .news-item03-text p):first-child {
  font-weight: bold;
}

:where(.news-item02-text p, .news-item03-text p):last-child {
  padding-left: 15px;
  box-sizing: border-box;
  margin-top: 10px;
  color: #D10101;
}

.news-item03-btn a {
  text-align: center;
}

.news-item03-btn a::after {
  content: "";
  display: inline-block;
  background-image: url(../img/login_icon.svg);
  width: 22px;
  height: 22px;
  margin-left: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: .5s;
}

.news-item03-btn a:hover::after {
  animation-name: return;
}

@keyframes return {
  0% {
    transform: translate(0px, 0);
  }

  100% {
    transform: translate(10px, 0);
  }
}

.news-item04 p span {
  color: #E46006;
}

.certificate-wrap {
  padding: 0 30px;
  box-sizing: border-box;
}

.certificate-wrap>dt {
  margin-top: 60px;
}

.certificate-wrap>dt:last-of-type {
  margin-bottom: 60px;
}

.certificate-wrap>dd {
  padding: 0 15px;
  box-sizing: border-box;
  margin-top: 30px;
}

.certificate-wrap dd ul {
  padding: 0 15px;
  box-sizing: border-box;
  margin: 30px 0;
}

.certificate-wrap dd ul li span,
.certificate-wrap dd p {
  padding-left: 15px;
  box-sizing: border-box;
}

.certificate-wrap-flow {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.certificate-wrap-flow div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 120px;
  width: 100%;
  margin-left: 85px;
  position: relative;
}

.certificate-wrap-flow div:first-child {
  margin-left: 0;
}

.certificate-wrap-flow dt {
  padding: 20px 0;
  box-sizing: border-box;
  text-align: center;
  background-color: #000;
  color: #fff;
}

#certificate-wrap-flow-bg {
  background-color: #949494;
}

.certificate-wrap-flow dt span {
  display: block;
  font-size: 2.25rem;
  font-weight: bold;
}

.certificate-wrap-flow dd {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 30px 0;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  border: #949494 thin solid;
  border-width: 0px 1px 1px 1px;
}

.certificate-wrap-flow div::before,
.certificate-wrap-flow div::after {
  content: "";
  display: inline-block;
  position: absolute;
}

.certificate-wrap-flow div::before {
  top: 177px;
  right: -82px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 20px solid transparent;
  border-left: #000 20px solid;
}

.certificate-wrap-flow div::after {
  top: 188px;
  right: -50px;
  width: 8px;
  height: 17px;
  border-left: #000 17px solid;
}

.certificate-wrap-flow div:last-child::before,
.certificate-wrap-flow div:last-child::after {
  content: none;
}

.certificate-wrap-btn {
  margin-top: 60px;
  text-align: center;
}

.certificate-wrap-btn a {
  border: #E46006 3px solid;
  color: #E46006;
  font-weight: bold;
  position: relative;
}

.certificate-wrap-btn a::before,
.certificate-wrap-btn a::after {
  content: "";
  display: inline-block;
  position: absolute;
  transition: all .3s;
}

.certificate-wrap-btn a::before {
  width: 18px;
  border-top: #E46006 3px solid;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 24px;
  right: -32px;
}

.certificate-wrap-btn a::after {
  width: 60px;
  height: 3px;
  background: #E46006;
  top: 30px;
  right: -30px;
}

.certificate-wrap-btn a:hover::before {
  right: -52px;
}

.certificate-wrap-btn a:hover::after {
  right: -50px;
}

#pass section>dl {
  padding: 0 30px;
  box-sizing: border-box;
  margin: 30px 0 60px;
}

#pass section dl:last-child {
  margin: 30px 0 0;
}

.pass-successful_candidate {
  display: flex;
}

.pass-successful_candidate div {
  margin-right: 30px;
}

.pass-successful_candidate div dt {
  color: #717171;
  font-size: 1.5rem;
}

.pass-successful_candidate div dd span {
  font-size: 2.25rem;
  font-weight: bold;
}

/* .pass-lecturer>dt {
  margin-bottom: 10px;
}

.pass-lecturer>dt:last-of-type {
  margin-top: 30px;
}

.pass-lecturer>dd {
  padding: 0 15px;
  box-sizing: border-box;
}

.pass-lecturer .pass-successful_candidate dd {
  padding: 0;
} */

#business section p,
#agency section p:first-of-type {
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: 30px;
}

#agency {
  padding: 100px 4%;
}

#agency section p:last-of-type {
  margin: 60px 0 10px;
  font-size: 1.25rem;
  text-align: center;
}

.arrow {
  width: 1px;
  height: 15px;
  background: #000;
  margin: 0 auto 10px;
}

.arrow::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-top: #000 1px solid;
  border-right: #000 1px solid;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  position: relative;
  top: 11px;
  left: -2px;
}

.agency-mail {
  text-align: center;
  font-size: 2.25rem;
}

.agency-mail a::before {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.corporate-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 70px;
  box-sizing: border-box;
  margin-top: 80px;
}

.corporate-wrap-img {
  width: 40%;
  margin-left: auto;
  text-align: end;
}

.corporate-wrap-text {
  width: 60%;
  margin-left: 60px;
}

.corporate-wrap-text p:first-child {
  font-size: 1.25rem;
  margin-bottom: 30px;
}


/* examination */
.examination-item01 section h2+p {
  margin-top: 30px;
  text-align: center;
  font-weight: bold;
}

:where(.examination-item01 p, .examination-item02 p):last-child {
  margin-top: 75px;
  padding: 0 30px;
  box-sizing: border-box;
}

.examination-btn-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
}

.examination-btn-wrap::after {
  content: "";
  display: block;
  width: 376px;
  margin: 0 25px;
}

.examination-btn-wrap .orange-btn {
  margin: 60px 25px 0;
}

.flowchart section ul li {
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
  position: relative;
}

.flowchart section ul li:first-child {
  margin-top: 60px;
}

.flowchart section ul li::before,
.flowchart section ul li::after {
  content: "";
  display: inline-block;
  position: absolute;
}

.flowchart section ul li::before {
  left: 50%;
  bottom: -73px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 20px solid transparent;
  border-top: #000 20px solid;
}

.flowchart section ul li::after {
  left: 50%;
  bottom: -33px;
  transform: translateX(-50%);
  width: 0;
  height: 17px;
  border-left: #000 17px solid;
}

.flowchart section ul li:last-child::before,
.flowchart section ul li:last-child::after {
  content: none;
}

.flowchart section ul li>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
  background-color: #000;
  color: #fff;
  font-size: 1.25rem;
}

.flowchart section ul li>div span {
  font-size: 3rem;
  font-weight: bold;
  line-height: .8;
}

.flowchart section ul li dl {
  width: 80%;
  border: #949494 thin solid;
  border-width: 1px 1px 1px 0;
  box-sizing: border-box;
}

.flowchart section ul li dl dt {
  padding: 30px 30px 0;
  box-sizing: border-box;
  color: #009842;
  font-size: 1.25rem;
  font-weight: bold;
}

.flowchart section ul li dl dd {
  padding: 15px 30px 30px;
  box-sizing: border-box;
}

.flowchart section ul li dl dd span {
  font-weight: bold;
}

.flowchart section ul li:last-child dl dd p:first-child {
  margin-bottom: 30px;
}

.examination-item03 dl {
  padding: 0 30px;
  box-sizing: border-box;
}

.examination-item03 dt {
  margin-top: 60px;
}

.examination-item03 dd {
  padding: 0 15px;
  box-sizing: border-box;
}

.examination-item03-text01 {
  margin-bottom: 30px;
}

.examination-item03-text02,
.examination-item03-text03 p:last-child {
  padding: 20px;
  box-sizing: border-box;
  margin-top: 30px;
  background-color: #F3F4F5;
}

.examination-item03-text02 p span {
  font-weight: bold;
}

.examination-item03-text02 p:nth-child(3) {
  margin-top: 15px;
}

.examination-item03-list-title {
  margin-bottom: 30px;
  font-weight: bold;
}

.examination-item03 ol {
  margin: 20px 0 15px 15px;
  counter-reset: my-counter;
}

.examination-item03 ol li {
  padding-left: 30px;
  box-sizing: border-box;
  position: relative;
}

.examination-item03 ol li::before {
  display: block;
  width: 18px;
  height: 18px;
  float: left;
  content: counter(my-counter);
  counter-increment: my-counter;
  margin-left: -24px;
  text-align: center;
  color: #222;
  font-size: 0.875rem;
  line-height: 18px;
  border: #000 1px solid;
  border-radius: 50%;
}

.examination-item03-list p:nth-of-type(2) {
  margin-bottom: 60px;
}


/* .examination-item03-text03 ul {
  margin: 30px 0;
} */

/* rank up */
/* .rankup-item01 p,
.rankup-item01 ul {
  padding: 0 30px;
  box-sizing: border-box;
}

.rankup-item01 section p:first-of-type {
  margin-top: 60px;
}

.rankup-item01 section ul,
.rankup-item01 section p:not(:first-of-type) {
  margin-top: 30px;
}

.rankup-item01 section p span,
.rankup-item01 section p:last-of-type {
  font-weight: bold;
}

.login-btn-rankup a {
  display: flex;
  align-items: center;
  padding: 25px 40px;
  text-align: start;
}

.login-btn-rankup a::after {
  content: "";
  display: block;
  width: 20%;
  height: 22px;
  margin-left: 10px;
  background-image: url(../img/login_icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.rankup-2nd-title {
  text-align: center;
}

.rankup-item02 section>div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto 0;
}

.badge-img {
  width: 171px;
  position: relative;
}

.badge-img::before,
.badge-img::after {
  content: "";
  width: 171px;
  height: 221px;
  position: absolute;
}

.badge-img::before {
  border: #000 1px solid;
  top: -5px;
  left: -5px;
}

.badge-img::after {
  background-color: #0C328C;
  top: 0;
  left: 0;
  z-index: -1;
  transform: rotate(10deg);
}

.rankup-item02 section > div p {
  margin-left: 60px;
  font-size: 1.25rem;
}

.rankup-item02 section > div p span {
  font-weight: bold;
}

.rankup-item02 section>p {
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: 30px;
  font-size: 1.25rem;
}

.rankup-item02 section>p:first-of-type {
  margin-top: 60px;
}

.rankup-item03 p {
  margin-top: 60px;
  text-align: center;
}

.rankup-item03 dl {
  max-width: 800px;
  padding: 30px;
  box-sizing: border-box;
  margin: 60px auto 0;
  background-color: #F3F4F5;
}

.rankup-item03 dl dd {
  padding: 0 15px;
  box-sizing: border-box;
} */


/* 特約店・代理店 */
#jpiaagency {
  padding-bottom: 100px;
  box-sizing: border-box;
}

#jpiaagency a {
  color: #E46006;
  font-weight: bold;
}

#jpiaagency section p {
  margin-top: 30px;
}

#jpiaagency section p:first-of-type {
  margin-top: 60px;
}


/* 個人情報保護方針 */
.privacypolicy-container {
  padding: 0 4% 100px;
  box-sizing: border-box;
  font-size: 0.75rem;
}

.privacypolicy-container section,
.privacypolicy-container section address,
.privacypolicy-container section p,
.privacypolicy-container section ul,
.privacypolicy-container-text {
  padding: 0 15px;
  box-sizing: border-box;
}

.privacypolicy-container section {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 30px;
}

.privacypolicy-container section:first-child {
  margin-top: 60px;
}

.privacypolicy-container section h2 {
  font-weight: normal;
  margin-bottom: 10px;
}

.privacypolicy-container section address {
  text-decoration: underline;
}

.privacypolicy-container ul,
.privacypolicy-container-text01 {
  margin-top: 10px;
}

.privacypolicy-container-text02,
.privacypolicy-container-text03 {
  max-width: 1000px;
  margin: 60px auto 0;
  font-size: 1rem;
}

.privacypolicy-container-text03 {
  margin-top: 0;
  text-align: end;
}

/*---

SP

---*/

@media screen and (max-width: 950px) {

  /* ページ共通 */
  :where(#g-navi li a, .mail a, .footer-menu-list ul li a, #jpiaagency a):hover {
    opacity: 1;
  }

  #header {
    height: 90px;
  }

  .header-container {
    height: 90px;
  }

  .site-title {
    width: 228px;
  }

  .site-title img {
    width: 90px;
  }

  /* ハンバーガーメニュー */
  #g-navi {
    width: 100%;
    height: 100vh;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #0C328C;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .5) inset;
    position: fixed;
    top: 90px;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: .5s ease-in-out;
  }

  #g-navi.active {
    visibility: visible;
    opacity: 1;
  }

  #g-navi ul {
    flex-direction: column;
    margin: 60px 0;
  }

  #g-navi ul li {
    margin-left: 0;
    margin-bottom: 10px;
  }

  #g-navi li a {
    display: block;
    text-align: left;
    color: #fff;
  }

  #g-navi li a span {
    color: #fff;
    opacity: .6;
  }

  .header-address.active {
    display: block;
    color: #fff;
  }

  /* ハンバーガーメニューのボタン */
  #hamburger-btn {
    display: block;
    width: 30px;
    height: 20px;
    cursor: pointer;
    position: fixed;
    top: 35px;
    right: 15px;
    z-index: 99;
  }

  #hamburger-btn span {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #0C328C;
    position: absolute;
    left: 0;
    transition: all .4s;
  }

  #hamburger-btn span:nth-of-type(1) {
    top: 0;
  }

  #hamburger-btn span:nth-of-type(2) {
    top: 10px;
  }

  #hamburger-btn span:nth-of-type(3) {
    top: 20px;
  }

  #hamburger-btn.active span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
  }

  #hamburger-btn.active span:nth-of-type(2) {
    opacity: 0;
  }

  #hamburger-btn.active span:nth-of-type(3) {
    top: 12px;
    transform: translateY(-6px) rotate(45deg);
  }


  .section-title,
  #examination h1,
  #rankup h1,
  #jpiaagency h1,
  #privacypolicy h1 {
    font-size: 1.5rem;
  }

  .footer-wrap {
    flex-direction: column;
    margin-bottom: 60px;
  }

  .footer-wrap section {
    width: 100%;
    margin-left: 0;
    margin-bottom: 60px;
  }

  .footer-wrap section:last-child {
    margin-bottom: 0;
  }

  .footer-wrap section h3 {
    font-size: 1.5rem;
  }

  .footer-menu {
    flex-direction: column;
  }

  .footer-menu-mail a {
    color: #fff;
  }

  .mail a::before {
    margin-right: 3px;
  }

  .footer-menu-list {
    margin-top: 60px;
  }

  .copyright {
    padding: 0;
  }

  #top-btn {
    right: 15px;
    bottom: 15px;
    opacity: 1;
  }

  /* トップページ以外の共通 */
  #examination,
  #rankup,
  #jpiaagency,
  #privacypolicy {
    padding: 150px 4% 0;
  }

  .examination-container,
  .rankup-container {
    padding: 80px 4% 0;
  }

  .examination-container:last-of-type,
  .rankup-container:last-of-type {
    padding-bottom: 80px;
  }

  #examination section h1 span,
  #rankup section h1 span,
  #jpiaagency section h1 span,
  #privacypolicy section h1 span {
    font-size: 0.75rem;
  }

  .other-pages-visual {
    margin-top: 30px;
  }

  .examination-container section h2,
  .rankup-container section h2 {
    font-size: 1.5rem;
  }

  .orange-btn {
    width: 100%;
    max-width: none;
    margin: 60px auto 0;
  }

  .orange-btn a {
    box-shadow: none;
  }

  .orange-btn a:hover {
    transform: translateY(0);
  }

  .flowchart section ul li {
    flex-direction: column;
    margin-top: 70px;
  }

  .flowchart section ul li:first-child {
    margin-top: 70px;
  }

  .flowchart section ul li::before,
  .flowchart section ul li::after {
    content: "";
    display: inline-block;
    position: absolute;
  }

  .flowchart section ul li::before {
    left: 50%;
    bottom: -73px;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 20px solid transparent;
    border-top: #000 20px solid;
  }

  .flowchart section ul li::after {
    left: 50%;
    bottom: -33px;
    transform: translateX(-50%);
    width: 0;
    height: 17px;
    border-left: #000 17px solid;
  }

  .flowchart section ul li>div {
    flex-direction: row;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .flowchart section ul li>div span {
    margin-left: 10px;
  }

  .flowchart section ul li dl {
    width: 100%;
    border-width: 0 1px 1px 1px;
  }

  /* トップページのみ */
  .main-visual {
    background: linear-gradient(180deg, rgba(12, 50, 140, 1) 0%, rgba(255, 255, 255, 1) 70%);
  }

  .main-visual img {
    width: 100%;
  }

  .main-visual p {
    width: 100%;
    filter: drop-shadow(0 0 3px #0C328C);
    top: 20%;
    left: 50%;
    transform: translateY(-0%);
    transform: translateX(-50%);
  }

  #jpiatop,
  #news,
  #certificate,
  #pass,
  #business,
  #agency,
  #corporate,
  #footer {
    padding: 80px 4%;
  }

  .login-btn a,
  .detail-btn a {
    display: inline-block;
    width: 200px;
    padding: 15px 0;
    box-sizing: border-box;
    border: #000 1px solid;
  }

  .jpiatop-text01 {
    padding: 0 15px;
    box-sizing: border-box;
  }

  .jpiatop-text02 {
    flex-direction: column;
  }

  .jpiatop-text02 p {
    width: 100%;
    margin-bottom: 30px;
  }

  .jpiatop-text02 p:last-child {
    margin-bottom: 0;
  }

  .news-item01 {
    width: 100%;
  }

  .news-item01 p:first-child {
    display: block;
    text-align: center;
  }

  .news-item01 p:last-child {
    font-size: 1.25rem;
  }

  .news-item02,
  .news-item03,
  .news-item04 {
    padding: 30px 20px;
    box-sizing: border-box;
  }

  .news-item03 {
    flex-direction: column;
  }

  .news-item02-text {
    margin-right: 0;
    margin-bottom: 0;
  }

  .news-item03-text {
    margin-right: 0;
    margin-bottom: 30px;
  }


  :where(.news-item02-text p, .news-item03-text p):last-child {
    padding-left: 0;
  }

  .certificate-wrap {
    padding: 0;
  }

  .certificate-wrap>dd:last-child {
    padding: 0;
  }

  .certificate-wrap-flow {
    flex-direction: column;
  }

  .certificate-wrap-flow div {
    flex-direction: row;
    max-width: none;
    margin-left: 0;
    margin-bottom: 70px;
  }

  .certificate-wrap-flow div:last-child {
    margin-bottom: 0;
  }

  .certificate-wrap-flow dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 120px;
    min-width: 120px;
  }

  .certificate-wrap-flow dd {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    writing-mode: unset;
    border-width: 1px 1px 1px 0;
  }

  .certificate-wrap-flow div::before {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -73px;
    transform: translateX(-50%);
    border: 20px solid transparent;
    border-top: #000 20px solid;
  }

  .certificate-wrap-flow div::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -33px;
    transform: translateX(-50%);
    width: 0;
  }

  .certificate-wrap-btn a {
    border: #E46006 3px solid;
  }

  #pass section > dl {
    padding: 0;
  }

  .pass-successful_candidate {
    flex-wrap: wrap;
  }

  .pass-successful_candidate div {
    padding-bottom: 25px;
    box-sizing: border-box;
  }


  .pass-lecturer dd {
    padding: 0 15px;
    box-sizing: border-box;
  }

  .pass-lecturer .pass-successful_candidate dt {
    font-size: 1.25rem;
  }

  #business section p,
  #agency section p:first-of-type {
    padding: 0 15px;
  }

  /* #agency {
    padding: 0 4% 80px;
  } */

  .agency-mail {
    font-size: 1.5rem;
  }

  .agency-mail a {
    display: block;
    width: 100%;
  }

  .agency-mail a::before {
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }

  .corporate-wrap {
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 0 15px;
    margin-top: 60px;
  }

  .corporate-wrap-img {
    width: 100%;
    margin: 0 auto;
    text-align: start;
  }

  .corporate-wrap-text {
    width: 100%;
    margin-top: 30px;
    margin-left: 0;
    font-size: 0.75rem;
  }

  .corporate-wrap-text p:first-child {
    font-size: 1rem;
  }

  /* examination */
  :where(.examination-item01 p, .examination-item02 p):last-child {
    margin-top: 60px;
    padding: 0 15px;
  }

  .examination-btn-wrap::after {
    content: "";
    display: none;
  }

  .examination-btn-wrap .examination-btn {
    margin: 60px 0 0;
  }

  .examination-item03 dl {
    padding: 0;
  }

  .examination-item03 dd {
    padding: 0;
  }

  .examination-item03 dl dd > p,
  .examination-item03 dl dd ul,
  .examination-item03 dl ol {
    padding: 0 15px;
    box-sizing: border-box;
  }

  .examination-item03 ol {
    margin: 20px 0 15px;
  }

  /* rank up */
  /* .rankup-item01 p,
  .rankup-item01 ul {
    padding: 0 15px;
  }

  .login-btn-rankup a {
    justify-content: center;
  }

  .login-btn-rankup a::after {
    width: 14%;
    margin-left: 5px;
  }

  .rankup-item02 section > div {
    flex-direction: column;
  }

  .badge-img {
    width: 171px;
    position: relative;
  }

  .rankup-item02 section > div p {
    margin-left: 0;
    margin-top: 60px;
  }

  .rankup-item02 section > p {
    padding: 0 15px;
  } */


  /* 特約店・代理店 */
  #jpiaagency {
    padding-bottom: 80px;
  }


  /* 個人情報保護方針 */
  .privacypolicy-container {
    padding: 0 4% 80px;
  }

  .privacypolicy-container section,
  .privacypolicy-container section address,
  .privacypolicy-container section p,
  .privacypolicy-container section ul,
  .privacypolicy-container-text {
    padding: 0;
  }
}