:root {
--red: #DB0037;
--black: #0D0D0D;
} html{ }
body {
min-width: inherit; }
.only-pc {
display: block;
}
.only-tablet-sp {
display: none;
}
#campus-esinfo a.esinfo_item {
display: block;
}
.general_section {
padding: 100px 0 150px;
.general_section__inner {
max-width: 1550px;
width: 90%;
margin-right: auto;
margin-left: auto;
.h2-title {
font-size: clamp(22px, 1.12vw + 17.53px, 39px);
font-weight: 800;
letter-spacing: -2%;
text-align: center;
background-color: white;
border: 3px solid var(--black);
border-radius: 70px;
padding: 20px 35px;
width: fit-content;
margin-right: auto;
margin-left: auto;
line-height: 130%;
width: 612px;
.red {
font-weight: 800;
color: var(--red);
}
}
.h2-subtitle {
font-size: clamp(16px, 1.25vw, 24px);
text-align: center;
margin-top: 26px;
line-height: 150%;
font-weight: 600;
}
.pointbox__outer {
display: flex;
gap: 25px;
margin-top: 60px;
.pointbox {
max-width: 500px;
position: relative;
border-radius: 40px;
border: 3px solid var(--black);
width: calc(100% / 3);
height: auto;
background-color: white;
.text-outer {
padding: 30px 35px 35px 35px;
.details {
margin-top: 25px;
font-size: clamp(14px, 0.395vw + 12.42px, 20px);
line-height: 150%;
font-weight: 400;
color: #222222;
}
}
}
} .wide-btn {
background: var(--red);
width: clamp(300px, 19.74vw + 221.05px, 600px);
border: 4px solid var(--black);
box-shadow: 0px 4px 0px var(--black);
display: block;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
border-radius: 60px;
.wide-btn__inner {
height: 115px;
padding-left: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
.wide-btn__text {
color: white;
font-size: clamp(20px, 1.316vw + 14.74px, 40px);
font-weight: 600;
}
.wide-btn__img {
width: 52px;
}
}
}
.wide-btn.yellow {
background: linear-gradient(to bottom, #ED9623E5, #ED9623);
margin-top: 0;
margin-top: -50px;
min-width: 480px;
}
}
} .general_section.fv {
padding: 0;
overflow: hidden;
position: relative;
.movie-wrapper {
position: relative;
width: 100%;
height: 810px;
.main-movie {
width: 100%;
height: 810px;
object-fit: cover;
object-position: center;
}
}
.bottom__outer {
height: 400px;
.fv-window {
max-width: 1300px;
margin-right: auto;
margin-left: auto;
top: -120px;
position: relative;
}
.text-outer {
margin-right: auto;
margin-left: auto;
width: fit-content;
position: relative;
top: -135px;
.text {
font-size: 32px;
background-color: white;
color: black;
border: 1px solid #222222;
padding: 20px 30px;
width: fit-content;
margin-right: auto;
font-weight: 500;
}
.text:nth-of-type(2) {
border-top: none;
}
}
}
} body.post-type-archive-type_campus {
section#campus-esinfo {
.user-message-blur {
display: none;
}
}
} .general_section.reason {
.pointbox__outer {
.pointbox {
height: 580px;
background-image: radial-gradient(#cfd6dc 1px, transparent 1px);
background-size: 10px 10px;
.point-num {
width: 90px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.point-img {
border-top-right-radius: 38px;
border-top-left-radius: 38px;
max-height: 320px;
width: auto;
}
.point-img.pasocon-img {
margin-right: auto;
margin-left: auto;
padding-top: 50px;
}
.text-outer {
padding: 30px 55px 35px 55px;
.sub-title {
font-weight: 600;
text-align: center;
font-size: clamp(15px, calc(15px + 0.32vw), 20px);
color: var(--black);
}
.title {
color: var(--red);
border-bottom: 4px solid #FFE500;
font-size: clamp(24px, 0.395vw + 22.42px, 30px);
font-weight: 900;
text-align: center;
margin-top: 25px;
width: fit-content;
margin-right: auto;
margin-left: auto;
padding-bottom: 5px;
line-height: 130%;
}
}
}
.pointbox:nth-of-type(2) {
margin-top: 50px;
}
.pointbox:nth-of-type(3) {
margin-top: 100px;
}
}
} .general_section.voice {
background-color: #FCEBEE;
.general_section__inner {
.pointbox__outer {
.pointbox {
box-shadow: 0px 4px 0px #0D0D0D33;
.person-info {
gap: 15px;
padding-top: 35px;
display: flex;
align-items: center;
justify-content: center;
.icon-side {
img {
width: 120px;
}
}
.name-side {
.name {
font-size: clamp(15px, calc(15px + 0.32vw), 20px);
font-weight: 400;
line-height: 150%;
}
img {
margin-top: 5px;
width: 120px;
}
}
}
.result {
color: white;
background-color: var(--red);
border-radius: 50px;
font-size: clamp(16px, calc(16px + 0.52vw), 24px);
margin-right: auto;
margin-left: auto;
text-align: center;
padding: 16px 25px;
margin-top: 20px;
width: fit-content;
}
.text-outer {
padding: 30px 43px 35px 43px;
.details {
margin-top: 0;
font-size: clamp(14px, 0.395vw + 12.42px, 20px);
}
}
}
}
}
} .general_section.different {
background: linear-gradient(to bottom, #FCEBEE 0%, #FCEBEE 50%, #EDF0F3 50%, #EDF0F3 100%);
padding-bottom: 0;
.general_section__inner-outer {
padding-top: 100px;
border-radius: 200px;
padding-bottom: 0;
} .h2-title-diagonal__outer {
display: flex;
justify-content: center;
.h2-title-diagonal {
font-size: 40px;
font-weight: 900;
margin-right: auto;
margin-left: auto;
width: fit-content;
margin-top: 0;
margin-bottom: 120px;
transform: rotate(-6deg) skew(-12deg) scale(1.2);
transform-origin: center center;
white-space: nowrap;
position: relative;
right: 30px;
span {
font-weight: 900;
}
.group.black {
top: 20px;
position: relative;
display: flex
}
.back-blk {
background-color: #222222;
color: white;
padding: 5px 30px;
white-space: nowrap;
}
.cross {
padding: 0 10px 0px 10px;
}
.center {
font-size: 50px;
}
.red {
color: var(--red);
font-size: 80px;
top: 15px;
position: relative;
left: 165px;
}
}
}
.handbook__windows {
max-width: 1110px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
.handbook-point__outer {
margin-top: 100px;
.handbook-point {
width: 950px;
margin-right: auto;
margin-left: auto;
padding-left: 50px;
margin-bottom: 0px;
.handbook-point__title-outer {
display: flex;
align-items: center;
gap: 15px;
.handbook-point__title {
img {
width: 70px;
}
}
.handbook-point__h3 {
color: var(--red);
font-size: clamp(20px, 1.45vw + 14.21px, 42px);
font-weight: bold;
background-color: white;
padding: 20px 35px;
border: 2px solid var(--black);
box-shadow: 4px 8px 0px #0D0D0D;
height: fit-content;
}
}
.handbook-point__sub-title-outer {
margin-top: 20px;
width: fit-content;
z-index: 1;
position: relative;
.handbook-point__sub-title {
font-size: clamp(14px, 0.92vw + 10.32px, 28px);
color: white;
background-color: var(--black);
padding: 12px 30px;
display: inline;
box-decoration-break: clone;
line-height: 280%;
-webkit-box-decoration-break: clone;
}
}
.handbook-point__details-outer {
display: flex;
align-items: flex-start;
margin-top: 30px;
.handbook-point__details {
font-size: clamp(14px, 0.92vw + 10.32px, 28px);
font-weight: 400;
color: #222222;
line-height: 150%;
width: 440px;
}
.handbook-point__img-outer {
width: calc(100% - 440px);
overflow: visible;
position: relative;
.handbook-point__img {
width: 500px;
position: relative;
top: -70px;
right: -26px;
}
}
}
}
.handbook-point:nth-of-type(2),
.handbook-point:nth-of-type(3) {
.handbook-point__title-outer {
.handbook-point__title {
img {
width: 85px;
}
}
}
.handbook-point__details-outer {
.handbook-point__img-outer {
.handbook-point__img {
transform: scale(1.1);
top: -150px;
right: -20px;
}
}
}
}
}
} .general_section.professional {
padding-bottom: 0;
background: linear-gradient(to bottom, #EDF0F3 0%, #EDF0F3 50%, transparent 50%, transparent 100%),
repeating-linear-gradient(-45deg,
#ffffff, #ffffff 4px, #FCEBEE 4px, #FCEBEE 8px);
.general_section__inner-outer {
background-color: #FCEBEE;
.general_section__inner {
padding-bottom: 10px;
.pointbox__outer {
justify-content: center;
.pointbox {
width: calc(100% / 2);
height: auto;
background-image: radial-gradient(#cfd6dc 1px, transparent 1px);
background-size: 10px 10px;
.professional-img__outer {
padding: 15px 15px 0;
professional-img {
border-radius: 20px;
}
}
.text-outer {
.h3-professional {
font-size: clamp(22px, 0.526vw + 19.9px, 30px);
color: var(--red);
font-weight: 900;
}
.details {
font-size: clamp(14px, 0.395vw + 12.42px, 20px);
}
}
}
}
}
}
} .general_section.download {
padding-top: 0;
background-color: white;
padding-bottom: 0;
.general_section__inner-outer {
padding-bottom: 150px;
border-bottom-right-radius: 200px;
border-bottom-left-radius: 200px;
.general_section__inner {
padding-top: 150px;
.handbook-outer {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
position: relative;
.text-black__outer {
transform: translateX(110px);
z-index: 2;
max-width: 450px;
.text-black {
font-size: clamp(20px, 0.526vw + 17.89px, 28px);
color: white;
background-color: var(--black);
padding: 15px 20px;
display: inline;
box-decoration-break: clone;
line-height: 280%;
-webkit-box-decoration-break: clone;
font-weight: 700;
}
}
.handbook {  max-width: 850px;
width: 50%;
transform: rotate(0deg) translateX(-50px);
}
}
.companys-logo {
max-width: 1024px;
width: 70%;
margin-right: auto;
margin-left: auto;
transform: translateY(-105px);
z-index: 1;
position: relative;
}
}
}
} .back-pink-stripe {
background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 4px, #FCEBEE 4px, #FCEBEE 8px);
} .back-gray-stripe {
background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 4px, #f3f3f3 4px, #f3f3f3 8px);
} @media screen and (width < 1500px) { .general_section.fv {
.movie-wrapper {
height: 610px;
.main-movie {
height: 610px;
}
}
.bottom__outer {
height: 380px;
.fv-window {
top: -70px;
}
.text-outer {
top: -80px;
.text {
font-size: 28px;
}
}
}
} .general_section.download {
.general_section__inner-outer {
.general_section__inner {
.companys-logo {
transform: translateY(-80px);
}
}
}
}
}
@media screen and (width < 1024px) {
.only-pc {
display: none;
}
.only-tablet-sp {
display: block;
}
.general_section {
padding: 50px 0 50px;
.general_section__inner {
max-width: 650px;
.h2-title {
width: 390px;
padding: 15px 20px;
min-width: 336px;
}
.pointbox__outer {
flex-direction: column;
align-items: center;
.pointbox {
width: 100%;
max-width: 450px;
height: auto;
.text-outer {
.details {
line-height: 130%;
}
}
}
}
.wide-btn {
margin-top: 30px;
margin-bottom: 40px;
.wide-btn__inner {
height: 58px;
gap: 15px;
padding-left: 20px;
.wide-btn__img {
width: 26px;
}
}
}
.wide-btn.yellow {
margin-top: -20px;
min-width: inherit;
}
}
} .general_section.fv {
.movie-wrapper {
height: 420px;
.main-movie {
height: 420px;
}
}
.bottom__outer {
height: 230px;
.fv-window {
position: absolute;
left: 50%;
transform: translate(-50%, 430px);
max-width: inherit;
width: 780px;
bottom: 0;
}
.text-outer {
top: 90px;
.text {
font-size: 20px;
padding: 15px 20px;
}
}
}
} .general_section.reason {
.pointbox__outer {
gap: 40px;
.pointbox {
position: relative;
margin-top: 50px;
.point-num {
width: 80px;
}
.point-img.pasocon-img {
padding-top: 0px;
}
.text-outer {
padding: 30px 35px 35px 35px;
}
}
.pointbox:nth-of-type(1)::before,
.pointbox:nth-of-type(2)::before {
content: "";
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 19px;
height: 21px;
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/campus/renewal-2026/icon-2-arrow.png) no-repeat center / contain;
z-index: 1;
}
.pointbox:nth-of-type(1) {
margin-top: 0;
}
.pointbox:nth-of-type(3) {
margin-top: 50px;
}
.pointbox.pasocon {
.text-outer {
padding: 70px 30px 0px 30px;
}
}
}
} .general_section.voice {
.general_section__inner {
.pointbox__outer {
gap: 5px;
margin-top: 20px;
.pointbox {
box-shadow: 0px 7px 0px #0D0D0D33;
max-width: 550px;
.person-info__outer {
display: flex;
align-items: center;
justify-content: center;
.person-info {
gap: 5px;
padding-top: 20px;
.icon-side {
img {
width: 61px;
}
}
.name-side {
text-align: center;
img {
width: 80px;
}
}
}
.result {
margin-right: inherit;
margin-left: inherit;
padding: 10px 15px;
font-size: 16px;
}
}
.text-outer {
padding: 15px 25px 35px 25px;
}
}
}
}
} .general_section.different {
.general_section__inner-outer {
border-radius: 40px;
padding-top: 0;
.h2-title-diagonal__outer {
height: 350px;
}
.h2-title-diagonal {
transform: rotate(-6deg) skew(-12deg) scale(0.7);
left: -10px;
position: relative;
top: 60px;
.group.black {
top: 20px;
}
.back-blk {
padding: 12px 30px;
}
}
.handbook__windows {
width: 780px;
margin-left: 50%;
transform: translateX(-50%);
}
.handbook-point__outer {
padding-bottom: 120px;
.handbook-point {
padding-left: 0;
margin-bottom: 100px;
width: 550px;
margin-left: 70px;
.handbook-point__title-outer {
.handbook-point__title {
img {
width: 39px;
}
}
.handbook-point__h3 {
padding: 14px 12px;
}
}
.handbook-point__sub-title-outer {
gap: 10px;
.handbook-point__sub-title {
padding: 7px 10px;
line-height: 250%;
}
}
.handbook-point__details-outer {
height: 150px;
margin-top: 15px;
.handbook-point__details {
width: 40%;
}
.handbook-point__img-outer {
width: 60%;
.handbook-point__img {
width: 340px;
top: -27px;
right: -5px;
}
}
}
}
.handbook-point:nth-of-type(2),
.handbook-point:nth-of-type(3) {
.handbook-point__title-outer {
.handbook-point__title {
img {
width: 44px;
}
}
}
.handbook-point__details-outer {
.handbook-point__img-outer {
.handbook-point__img {
width: 310px;
top: -27px;
right: -40px;
}
}
}
}
.handbook-point:nth-of-type(3) {
margin-bottom: 0;
}
}
}
} .general_section.professional {
.general_section__inner-outer {
.general_section__inner {
padding-top: 20px;
.pointbox__outer {
margin-top: 20px;
.pointbox {
width: 100%;
max-width: 550px;
.professional-img__outer {
professional-img {}
}
.text-outer {
padding: 20px 25px 25px 25px;
.details {
margin-top: 19px;
}
}
}
}
}
}
} .general_section.download {
.general_section__inner-outer {
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding-bottom: 5px;
.general_section__inner {
padding-top: 20px;
padding-top: 50px;
.handbook-outer {
.text-black__outer {
.text-black {
padding: 7px 10px;
line-height: 240%;
.nowrap {
white-space: nowrap;
}
}
}
.handbook {
transform: translateX(-40px);
width: 400px; }
}
.companys-logo {
transform: translateY(-95px);
width: 490px;
margin-top: 5rem;
max-width: 100%;
}
.wide-btn.yellow {
margin-top: -70px;
}
}
}
}
}
@media screen and (width < 600px) { .general_section {
padding: 50px 0 50px;
.general_section__inner {
.h2-title {
width: fit-content;
}
}
} .general_section.fv {
padding-top: 15px;
.movie-wrapper {
height: 300px;
.main-movie {
height: 300px;
}
}
.bottom__outer {
height: 210px;
.fv-window {
transform: translate(-50%, 340px);
}
.text-outer {
top: 115px;
.text {
top: -25px;
font-size: 16px;
padding: 10px 20px;
}
}
}
} .general_section.reason {
.general_section__inner {
.pointbox.pasocon {
.text-outer {
padding: 55px 30px 0px 30px;
}
}
}
} .general_section.different {
.general_section__inner-outer {
padding-bottom: 0;
.general_section__inner {
.h2-title-diagonal__outer {
height: 210px;
.h2-title-diagonal {
transform: rotate(-6deg) skew(-12deg) scale(0.5);
top: 15px;
}
}
.handbook-point__outer {
padding-bottom: 20px;
margin-top: 30px;
.handbook-point {
margin-left: 20px;
max-width: 400px;
width: 100%;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
.handbook-point__title-outer {
gap: 5px;
handbook-point__h3 {
padding: 14px 7px 14px 7px;
}
}
.handbook-point__details-outer {
height: 150px;
margin-top: 15px;
.handbook-point__details {
width: 152px;
}
.handbook-point__img-outer {
width: calc(100% - 150px);
.handbook-point__img {
max-width: inherit;
width: 240px;
top: -27px;
right: -15px;
}
}
}
}
.handbook-point:nth-of-type(2),
.handbook-point:nth-of-type(3) {
.handbook-point__title-outer {
.handbook-point__h3 {
padding: 8px 10px;
}
}
.handbook-point__details-outer {
.handbook-point__img-outer {
.handbook-point__img {
width: 240px;
top: -55px;
right: -25px;
}
}
}
}
}
}
}
} .general_section.download {
.general_section__inner-outer {
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding-bottom: 5px;
.general_section__inner {
padding-top: 20px;
.handbook-outer {
.text-black__outer {  transform: translateX(105px) translateY(40px);
width: 50%;
.text-black {
padding: 7px 10px;
line-height: 240%;
font-size: 17px;
.nowrap {
white-space: nowrap;
}
}
}
.handbook {
transform: translateX(-40px);
width: 400px;
}
}
.companys-logo {
transform: translateY(-50px);
margin-top: 0.5rem;
}
.wide-btn.yellow {
margin-top: -30px;
}
}
}
}
}
@media screen and (max-width: 767px) {
html,
body {}
#CampusCtaBanner { bottom: env(safe-area-inset-bottom) !important;
}
} @media screen and (min-width: 1440px) {
.general_section .general_section__inner { max-width: 1296px; }
.general_section .pointbox__outer { justify-content: center; }
.general_section .general_section__inner .h2-title { font-size: 33.7px; }
.general_section .general_section__inner .h2-subtitle { font-size: 18px; }
.general_section .general_section__inner .wide-btn { width: 505px; }
.general_section .general_section__inner .wide-btn .wide-btn__inner .wide-btn__text { font-size: 33.7px; }
.general_section .general_section__inner .pointbox__outer .pointbox .text-outer .details { font-size: 18px; }
.general_section.reason .pointbox__outer .pointbox .text-outer .title { font-size: 26.8px; }
.general_section.reason .pointbox__outer .pointbox .text-outer .sub-title { font-size: 19.6px; } .general_section.voice .general_section__inner .pointbox__outer .pointbox .person-info .name-side .name { font-size: 19.6px; }
.general_section.voice .general_section__inner .pointbox__outer .pointbox .result { font-size: 23.5px; }
.general_section.voice .general_section__inner .pointbox__outer .pointbox .text-outer .details { font-size: 18.1px; }
.general_section.different .handbook-point__outer .handbook-point .handbook-point__title-outer .handbook-point__h3 { font-size: 35px; }
.general_section.different .handbook-point__outer .handbook-point .handbook-point__sub-title-outer .handbook-point__sub-title { font-size: 23.6px; }
.general_section.different .handbook-point__outer .handbook-point .handbook-point__details-outer .handbook-point__details { font-size: 23.6px; }
.general_section.professional .general_section__inner-outer .general_section__inner .pointbox__outer .pointbox .text-outer .h3-professional { font-size: 27.5px; }
.general_section.professional .general_section__inner-outer .general_section__inner .pointbox__outer .pointbox .text-outer .details { font-size: 18.1px; } .general_section.download .general_section__inner-outer .general_section__inner .handbook-outer .text-black__outer .text-black { font-size: 25.5px; }
.general_section.download .general_section__inner-outer .general_section__inner .handbook-outer .handbook {
width: 648px;
}
.general_section.download .general_section__inner-outer .general_section__inner .companys-logo {
width: 907px;
} .general_section.fv {
max-width: 1440px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.general_section.fv .movie-wrapper { height: 610px; }
.general_section.fv .movie-wrapper .main-movie { height: 610px; }
.general_section.fv .bottom__outer { height: 380px; }
.general_section.fv .bottom__outer .fv-window { top: -70px; max-width: 1296px; }
.general_section.fv .bottom__outer .text-outer { top: -80px; }
.general_section.fv .bottom__outer .text-outer .text { font-size: 28px; }
} .movie-wrapper { position: relative; }
.main-movie-poster {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
transition: opacity 0.5s;
}
.main-movie {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}