@property --red01 {
syntax: "<color>";
inherits: false;
initial-value: #db0037;
}
@property --red02 {
syntax: "<color>";
inherits: false;
initial-value: #e53754;
}
@property --gray01 {
syntax: "<color>";
inherits: false;
initial-value: #868686;
}
@property --orange01 {
syntax: "<color>";
inherits: false;
initial-value: #ed9623;
}
@property --borderColor01 {
syntax: "<color>";
inherits: false;
initial-value: #cecece;
}
@property --filterWhite {
syntax: "*";
inherits: false;
initial-value: invert(99%) sepia(28%) saturate(2%) hue-rotate(3deg) brightness(108%) contrast(100%);
}
@property --filterRed01 {
syntax: "*";
inherits: false;
initial-value: invert(45%) sepia(78%) saturate(6415%) hue-rotate(333deg) brightness(96%) contrast(87%);
}
@property --filterRed02 {
syntax: "*";
inherits: false;
initial-value: invert(100%) sepia(100%) saturate(0%) hue-rotate(307deg) brightness(103%) contrast(103%);
}
@property --filterGray01 {
syntax: "*";
inherits: false;
initial-value: invert(58%) sepia(0%) saturate(702%) hue-rotate(238deg) brightness(92%) contrast(86%);
}
@property --filterOrange01 {
syntax: "*";
inherits: false;
initial-value: invert(56%) sepia(98%) saturate(394%) hue-rotate(352deg) brightness(95%) contrast(95%);
} #top-banner {
.cap {
width: 100%;
height: auto;
padding-top: 0;
}
.slick-dots li.slick-active button {
background: rgb(182 0 20);
border-radius: 50%;
}
@media screen and (width < 768px) {
.cap {
aspect-ratio: 1;
}
figure.slider01 {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img01_sp.png) ! important;
}
figure.slider02 {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-house_sp.jpg) ! important;
}
figure.slider03 {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img03_sp-2026.png) ! important;
}
figure.slider04 {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img04_sp.png) ! important;
} figure.slider06 {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-goodmeeting_sp.jpg) ! important;
}
figure.slider07 {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-online_sp.jpg) ! important;
}
}
@media print,
screen and (width > 768px) {
.cap {
aspect-ratio: 1905 / 666.75;
}
}
} @media screen and (width < 768px) {
:root {
--breakPoint: 400;
--remBase: 100vw / var(--breakPoint);
--viewportBase: 100% / var(--breakPoint);
--headerCampusHeight: calc(67 * var(--remBase));
}
.is-pc {
display: none;
}
}
@media print,
screen and (width > 768px) {
:root {
--breakPoint: 1200;
--remBase: 100vw / var(--breakPoint);
--headerCampusHeight: min(157px, calc(157 * var(--remBase)));
}
.is-sp {
display: none;
}
}
.wpmem_msg {
width: 100% ! important;
}
@media screen and (width < 768px) {
.wpmem_msg {
font-size: 16px ! important;
line-height: calc(32 / 16);
}
}
@media print,
screen and (width > 768px) {
.wpmem_msg {
font-size: 18px ! important;
line-height: calc(32 / 18);
}
}
:where(.page-user_registrations, .basic_information, #wpmem_login_form, .mypage, #singleEs, #singleCompany, #template_es-create, #template_es-edit, #template_interview-create, #template_interview-edit, #template_drafts) {
.color-red01 {
color: var(--red01);
}
.color-red02 {
color: var(--red02);
}
.color-gray01 {
color: var(--gray01);
}
.link-text01 {
a {
width: fit-content;
color: currentColor;
}
}
.ms-auto {
margin-left: auto;
}
.me-auto {
margin-right: auto;
}
a:where(.ms-auto, .me-auto) {
display: block;
width: fit-content;
}
[data-before] {
&::before {
content: attr(data-before);
}
}
span.error {
font-weight: 400;
line-height: 1.4;
color: var(--red02);
}
.div_radio {
flex-wrap: wrap;
span.error {
flex-shrink: 0;
width: 100%;
}
}
@media screen and (width < 768px) {
&.wrap {
padding-inline: 1rem;
}
.link-text01 {
a {
font-size: 12px;
line-height: calc(24 / 12);
}
}
}
@media print,
screen and (width > 768px) {
&.wrap {
padding-inline: calc((100% - 1320px) / 2);
}
.link-text01 {
a {
font-size: 15px;
line-height: calc(24 / 15);
}
}
}
} body:has(#headerCampus) {
padding-top: var(--headerCampusHeight);
}
#headerCampus {
position: fixed;
top: 0;
left: 0;
z-index: 1002;
display: grid;
align-items: center;
width: 100%;
height: var(--headerCampusHeight);
background-color: white;
#menuBtn {
z-index: 12;
display: grid;
grid-row: 1;
grid-column: 1;
grid-auto-flow: row;
align-items: center;
justify-content: center;
justify-items: center;
justify-self: start;
padding: 0;
margin: 0;
overflow: hidden;
cursor: pointer;
&[aria-expanded="true"] {
overflow: hidden;
}
>span:nth-of-type(1) {
position: relative;
display: block;
height: 100%;
font-size: 0;
>span {
position: absolute;
left: 0;
display: block;
width: 100%;
transition: all .4s;
&:nth-of-type(1) {
top: 0;
}
&:nth-of-type(4) {
bottom: 0;
}
}
}
&[aria-expanded="true"] {
>span:nth-of-type(1) {
span:nth-of-type(1) {
scale: 0;
translate: calc($(top) var(--remBase)) 0;
}
span:nth-of-type(2) {
rotate: -45deg;
}
span:nth-of-type(3) {
rotate: 45deg;
}
span:nth-of-type(4) {
scale: 0;
translate: calc(-$(top) var(--remBase)) 0;
}
}
}
>span {
&:nth-of-type(1) {
span {
background-color: #db0037;
}
}
&:nth-of-type(2) {
display: block;
color: #db0037;
text-align: center;
}
}
}
.logo {
display: block;
grid-row: 1;
grid-column: 2;
width: fit-content;
}
.login {
display: grid;
grid-row: 1;
align-items: center;
justify-content: center;
width: 100%;
font-weight: 700;
color: white;
background-color: var(--red01);
border-radius: 100vmax;
}
@media screen and (width < 768px) {
grid-template-columns: calc(40 * 100% / 376) auto 1fr calc(104 * 100% / 376);
padding-inline: calc(12 * var(--viewportBase));
box-shadow: 0 0 calc(3 * var(--remBase)) color-mix(in sRGB, black 25%, transparent);
&.has-scrolled.is-view {
translate: 0 0;
}
&.has-scrolled:not(.is-view):has(#menuBtn[aria-expanded="false"]) {
translate: 0 -100%;
}
#menuBtn {
row-gap: calc(4 * var(--remBase));
>span {
&:nth-of-type(1) {
width: calc(20 * var(--remBase));
height: calc(14 * var(--remBase));
>span {
height: calc(1 * var(--remBase));
&:nth-of-type(2),
&:nth-of-type(3) {
top: calc(6.5 * var(--remBase));
}
}
}
&:nth-of-type(2) {
font-size: calc(10 * var(--remBase));
}
}
}
.logo {
img {
height: calc(33 * var(--remBase));
}
}
.login {
grid-column: 4;
height: calc(35 * var(--remBase));
font-size: calc(16 * var(--remBase));
}
}
@media print,
screen and (width > 768px) {
grid-template-columns: min(62px, calc(62 * 100% / 1778)) auto min(72px, calc(72 * 100% / 1778)) auto 1fr min(240px, calc(240 * 100% / 1778));
padding-inline: min(66px, calc(66 * 100% / 1920));
box-shadow: 0 0 min(10px, calc(10 * var(--remBase))) color-mix(in sRGB, black 25%, transparent);
#menuBtn {
row-gap: min(4px, calc(4 * var(--remBase)));
>span {
&:nth-of-type(1) {
width: min(30px, calc(30 * var(--remBase)));
height: min(22px, calc(22 * var(--remBase)));
>span {
height: min(2px, calc(2 * var(--remBase)));
&:nth-of-type(2),
&:nth-of-type(3) {
top: min(9px, calc(9 * var(--remBase)));
}
}
}
&:nth-of-type(2) {
font-size: min(16px, calc(16 * var(--remBase)));
}
}
}
.logo {
img {
height: min(86px, calc(86 * var(--remBase)));
}
}
nav {
display: grid;
grid-row: 1;
grid-column: 4;
grid-auto-flow: column;
column-gap: min(4px, calc(4 * var(--remBase)));
align-items: center;
justify-content: start;
img {
height: min(137px, calc(137 * var(--remBase)));
}
}
.login {
grid-column: 6;
height: min(80px, calc(80 * var(--remBase)));
font-size: min(28px, calc(28 * var(--remBase)));
}
}
}
#sp-menubox.navCampus {
@media screen and (width < 768px) {
padding-top: calc((40 * var(--remBase)) + var(--headerCampusHeight));
}
@media print,
screen and (width > 768px) {
padding-top: min(calc(80px + var(--headerCampusHeight)), calc((80 * var(--remBase)) + var(--headerCampusHeight)));
}
}
body:has(#menuBtn[aria-expanded="false"]) #sp-menubox.navCampus {
right: -100%;
}
body:has(#menuBtn[aria-expanded="true"]) #sp-menubox.navCampus {
right: 0;
} #header {
#header-nav {
.wrap-box {
>div {
>span {
position: relative;
display: block;
width: 1.875rem ! important;
margin-top: 4px;
font-size: 1rem;
font-weight: 500;
color: #b60014;
text-align: center;
white-space: pre;
>span {
position: absolute;
left: 50%;
translate: -50% 0;
}
}
}
}
}
@media screen and (width < 768px) {
#header-nav {
.wrap-box {
>div {
>span {
margin-left: 10px;
}
}
}
}
}
@media print,
screen and (width > 768px) {
#header-nav {
.wrap-box {
>div {
>span {
margin-left: 20px;
}
}
}
}
}
} @media screen and (width < 768px) {
.global_navigation .g {
align-items: end;
}
}
footer#footer {
.footer_inner {
position: relative;
}
.topbutton.is-absolute {
position: absolute;
top: 12px;
}
@media print,
screen and (width > 768px) {
.g {
align-items: end;
}
}
} .page-template-page-user_registrations {
#footer {
background-color: #F2F4F6;
}
}
.page-user_registrations {
>.wp-block-group__inner-container {
>h2 {
font-weight: 700;
}
}
label {
position: relative;
width: fit-content !important;
} label[for="user_email"]::after {
content: "学校配布アドレス推奨";
font-size: 11px;
color: #868686;
padding-left: 10px;
font-weight: normal;
position: absolute;
width: 140px;
top: 4px;
} label[for="user_email"]::before {
content: "?";
display: inline-block;
width: 15px;
height: 15px;
line-height: 13px;
color: #868686;
border-radius: 50%;
text-align: center;
font-size: 9px;
font-weight: bold;
margin-right: -5px;
border: 1px solid #868686;
border-radius: 50%;
position: absolute;
top: 5px;
right: -137px;
}
.box {
padding-block: 24px;
background-color: white;
p {
letter-spacing: -.06px;
}
ul {
margin-top: 16px;
}
li {
display: grid;
grid-template-columns: auto auto;
align-items: start;
justify-content: start;
font-weight: 700;
&::before {
content: "・";
}
}
}
#wpmem_reg {
background-color: white;
padding: 70px 50px 25px 50px;
border-top-right-radius: 16px;
border-top-left-radius: 16px;
box-shadow: 0 0 30px rgba(118, 118, 118, 0.15);
#wpmem_register_form {
legend:empty {
display: none;
}
fieldset {
margin-block: 0;
max-width: 614px;
margin-right: auto;
margin-left: auto;
legend {
text-align: center;
margin-bottom: 3rem;
}
label:first-of-type {
margin-top: 0;
}
#user_email { }
#kiyaku1 {
margin-bottom: 0;
margin-top: 3rem;
p {
color: var(--gray01);
text-align: center;
}
a {
color: var(--red01);
}
}
}
label {
color: black;
.req {
display: none;
}
}
.div_text {
margin-bottom: 0;
}
:where(input[type="email"], input[type="password"], input[type="text"]) {
border-color: var(--borderColor01);
border-radius: 6px;
&::placeholder {
color: var(--gray01) ! important;
}
}
}
+p {
margin-top: 16px;
}
}
#wpmem_login {
display: none;
}
#wpmem_login+p {
display: none;
}
@media screen and (width < 768px) {
>.wp-block-group__inner-container {
>h2 {
font-size: 24px;
line-height: calc(30 / 24);
}
>p {
font-size: 16px;
line-height: calc(32 / 16);
}
>h2+p {
margin-top: 32px;
}
}
label[for="user_email"]::before {
top: 7px;
}
label[for="user_email"]::after {
top: 5px;
}
.box {
padding-inline: 24px;
margin-top: 32px;
border-radius: 4px;
>p {
font-size: 12px;
line-height: calc(24 / 12);
}
li {
font-size: 11px;
line-height: calc(20 / 11);
}
.link-text01 {
margin-top: 12px;
}
}
#wpmem_reg {
margin-top: 40px;
padding: 50px 20px 25px 20px;
#wpmem_register_form {
fieldset {
label {
font-size: 16px;
line-height: calc(24 / 16);
&:not( :first-of-type) {
margin-top: 40px;
}
}
.div_text {
margin-top: 12px;
}
:where(input[type="email"], input[type="password"], input[type="text"]) {
height: 48px;
padding-inline: 18px;
font-size: 13px;
line-height: calc(24 / 13);
}
#kiyaku1 {
margin-top: 1rem;
p {
font-size: 12px;
line-height: calc(18 / 12);
text-align: left;
line-height: 24px;
}
}
.button_div {
margin-top: 25px;
}
}
}
}
}
@media print,
screen and (width > 768px) {
>.wp-block-group__inner-container {
>h2 {
font-size: 32px;
line-height: calc(38 / 32);
}
>p {
font-size: 18px;
line-height: calc(32 / 18);
}
>h2+p {
margin-top: 32px;
}
}
.box {
padding-inline: 40px;
margin-top: 32px;
border-radius: 10px;
>p {
font-size: 15px;
line-height: calc(24 / 15);
}
li {
font-size: 13px;
line-height: calc(26 / 13);
}
.link-text01 {
margin-top: 6px;
}
}
#wpmem_reg {
margin-top: 32px;
#wpmem_register_form {
label {
font-size: 18px;
line-height: calc(24 / 15);
&:not( :first-of-type) {
margin-top: 32px;
}
}
.div_text {
margin-top: 10px;
}
:where(input[type="email"], input[type="password"], input[type="text"]) {
height: 60px;
padding-inline: 19px;
font-size: 15px;
line-height: calc(24 / 15);
}
.button_div {
margin-top: 3rem;
.buttons {
width: 100%;
height: 66px;
font-size: 15px;
}
}
}
}
#kiyaku1 {
margin-top: 40px;
p {
font-size: 14px ! important;
line-height: calc(24 / 14) ! important;
}
}
}
} .registrations-login__outer {
background: white;
padding-bottom: 7rem;
text-align: center;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
box-shadow: 0 15px 30px -10px rgba(118, 118, 118, 0.15);
.registrations-login__text {
a {
color: #db0037;
position: relative;
font-size: 15px;
&::before {
position: absolute;
content: "";
display: inline-block;
width: 6px;
height: 100%;
margin-right: 8px;
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/registrations/arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
right: -22px;
top: 2px;
}
&:hover {
opacity: 0.6;
transition: .1s;
}
}
}
}
@media screen and (width < 768px) {
.registrations-login__outer {
padding-bottom: 3rem;
.registrations-login__text {
a {
font-size: 11px;
&:before {
top: 1px;
}
}
}
}
}
.registrations__outer {
margin-top: 10rem;
margin-bottom: 5rem;
.section-title {
color: #000;
font-size: 26px;
border-left: 5px solid #E53754;
padding: 10px 20px;
}
.registrations__inner {
display: flex;
margin-top: 4rem;
.registrations__left {
max-width: 260px;
margin-right: 50px;
min-width: 100px;
}
.registrations__right {
display: flex;
flex-direction: column;
justify-content: center;
.registrations__point {
background-color: white;
border-radius: 16px;
display: flex;
align-items: center;
padding: 20px 35px 20px 30px; height: 220px;
max-width: 500px;
img {
width: 80px;
margin-right: 30px;
}
p {
font-size: 30px;
font-weight: 400;
line-height: 1.5;
.red {
color: #db0037;
font-weight: 600;
}
}
&:last-child {
margin-top: 1.5rem;
img {
width: 65px;
margin-left: 15px;
}
}
}
}
}
}
@media screen and (width < 768px) {
.registrations__outer {
.section-title {
font-size: 20px;
border-left: 3px solid #E53754;
padding: 5px 20px;
}
.registrations__inner {
.registrations__left {
margin-right: 1rem;
width: 30%;
}
.registrations__right {
.registrations__point {
height: 90px;
img {
width: 55px;
}
p {
font-size: 13px;
}
&:last-child {
margin-top: 1rem;
img {}
}
}
}
}
}
}
@media screen and (width < 540px) {
.registrations__outer {
margin-top: 6rem;
margin-bottom: 1rem;
.registrations__inner {
margin-top: 3rem;
.registrations__left {}
.registrations__right {
.registrations__point {
padding: 10px 25px 10px 15px;
img {
width: 35px;
margin-right: 15px;
}
p {
line-height: 1.6;
}
&:last-child {
margin-top: 10px;
img {
width: 40px;
margin-right: 10px;
margin-left: 0;
}
}
}
}
}
}
} .basic_information {
legend:empty {
display: none;
}
h2 {
font-weight: 700;
&:not( :first-of-type) {
margin-top: 80px;
}
}
fieldset {
&:not(.is-current) {
display: none;
}
>label:has(.req) {
display: flex ! important;
align-items: center;
justify-content: start;
color: black;
.req {
display: none;
}
&::before {
display: grid;
place-items: center;
font-weight: 700;
color: white;
content: "必須";
background-color: var(--red01);
}
}
}
:where(.div_text, .div_select) {
margin-bottom: 0 ! important;
}
:where(input[type="text"], input[type="email"], input[type="tel"], select) {
padding-block: 0 ! important;
background-color: white;
border-color: var(--red01);
&::placeholder {
color: var(--gray01) ! important;
}
}
.button_div {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-block: 0 ! important;
#btnFieldNext {
color: white;
&[disabled] {
pointer-events: none;
background-color: #c2c2c2;
border-color: #c2c2c2;
}
&:not([disabled]) {
background-color: var(--red01);
border-color: var(--red01);
}
}
input[type="submit"] {
color: white ! important;
background-color: var(--red01) ! important;
border-color: var(--red01) ! important;
}
}
#fieldset01.is-current~.button_div {
input[type="submit"] {
display: none;
}
#btnFieldPrev {
display: none;
}
}
#fieldset02.is-current~.button_div {
#btnFieldNext {
display: none;
}
}
.div_checkbox {
margin-bottom: 0 ! important;
}
@media screen and (width < 768px) {
fieldset {
margin-top: 48px;
}
h2 {
font-size: 24px;
line-height: calc(29 / 24);
}
fieldset {
>label {
font-size: 16px;
line-height: calc(24 / 16);
&:has(.req) {
column-gap: 8px;
&::before {
width: 44px;
height: 24px;
font-size: 13px;
line-height: calc(19 / 13);
text-indent: -.06em;
letter-spacing: -.06em;
border-radius: 6px;
}
}
&:not( :first-of-type) {
margin-top: 32px ! important;
}
}
}
:where(.div_text, .div_select) {
margin-top: 12px ! important;
}
:where(input[type="text"], input[type="email"], input[type="tel"], select) {
height: 48px ! important;
padding-inline: 18px ! important;
font-size: 13px;
line-height: calc(24 / 13);
border-radius: 6px ! important;
}
.div_select+a {
margin-top: 4px;
font-size: 12px;
line-height: calc(24 / 12);
}
.div_checkbox {
column-gap: 10px ! important;
justify-content: center ! important;
input[type="checkbox"] {
width: 20px;
height: 20px;
}
label {
width: fit-content ! important;
font-size: 16px;
line-height: calc(24 / 16);
}
}
.button_div {
row-gap: 40px;
margin-top: 40px;
}
}
@media print,
screen and (width > 768px) {
fieldset {
margin-top: 64px;
}
h2 {
font-size: 32px;
line-height: calc(36 / 32);
}
h2+label {
margin-top: 40px;
}
fieldset {
>label {
font-size: 20px;
line-height: calc(24 / 20);
&:has(.req) {
column-gap: 16px;
&::before {
width: 48px;
height: 28px;
font-size: 15px;
line-height: calc(24 / 15);
text-indent: -.06em;
letter-spacing: -.06em;
border-radius: 6px;
}
}
&:not( :first-of-type) {
margin-top: 40px ! important;
}
}
}
:where(.div_text, .div_select) {
margin-top: 14px ! important;
}
:where(input[type="text"], input[type="email"], input[type="tel"], select) {
height: 60px ! important;
padding-inline: 18px ! important;
font-size: 15px;
line-height: calc(24 / 15);
border-radius: 6px ! important;
}
.div_select+a {
margin-top: 4px;
font-size: 14px;
line-height: calc(24 / 14);
}
.button_div {
margin-top: 72px;
}
.div_checkbox {
gap: 6px ! important;
margin-top: 40px ! important;
}
}
}
#serviceBegin {
h2 {
font-weight: 700;
color: var(--red01);
}
picture {
display: block;
font-size: 0;
img {
width: 100%;
height: auto;
}
}
p {
color: black;
}
.links {
a {
color: var(--red01);
&::before {
content: "・";
}
}
}
.note {
color: black;
background-color: #f8f8f8;
li {
display: grid;
grid-auto-flow: column;
align-items: start;
justify-content: start;
}
}
@media screen and (width < 768px) {
h2 {
font-size: 24px;
line-height: calc(29 / 24);
}
picture {
margin-top: 24px;
}
p {
margin-top: 24px;
font-size: 16px;
line-height: calc(32 / 16);
}
.links {
margin-top: 34px;
li {
font-size: 14px;
line-height: calc(26 / 14);
}
}
.note {
padding-block: 24px;
padding-inline: 30px;
margin-top: 24px;
li {
font-size: 13px;
line-height: calc(22 / 13);
+li {
margin-top: 8px;
}
}
}
}
@media print,
screen and (width > 768px) {
h2 {
font-size: 32px;
line-height: calc(38 / 32);
}
picture {
margin-top: 32px;
}
p {
margin-top: 40px;
font-size: 18px;
line-height: calc(32 / 18);
}
.links {
margin-top: 32px;
li {
font-size: 16px;
line-height: calc(32 / 16);
}
}
.note {
padding-block: 24px;
padding-inline: 40px;
margin-top: 32px;
li {
font-size: 15px;
line-height: calc(24 / 15);
}
}
}
} :is(#template_mypage, #template_es-create, #template_es-edit, #template_interview-create, #template_interview-edit, #template_drafts) {
padding-top: 9.1875rem;
padding-bottom: 5.3125rem;
background-color: #f2f4f6;
.names,
.informations>li,
.details-content>li {
background-color: white;
}
.names {
p {
font-weight: 700;
}
h2 {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: start;
img {
width: auto;
font-size: 0;
}
span {
font-weight: 700;
}
}
}
:where(.informations, .details-content) {
a {
font-weight: 500;
}
a:not([data-count]) {
display: block;
}
a[data-count] {
display: flex;
align-items: center;
justify-content: space-between;
&::after {
display: grid;
place-items: center;
font-weight: 700;
color: white;
content: attr(data-count);
background-color: var(--red01);
border-radius: 100vmax;
}
}
}
details {
summary {
display: block;
font-weight: 700;
list-style: none;
background-color: #e5e9ef;
&::-webkit-details-marker {
display: none;
}
}
}
.column02 {
h3 {
font-weight: 700;
}
.box {
background-color: white;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
}
h4 {
font-weight: 700;
}
dl {
border-top-color: #d9d9d9;
border-top-style: solid;
}
}
@media screen and (width < 768px) {
.columns02 {
margin-top: 40px;
}
.names {
padding-block: 24px;
padding-inline: 30px;
border-radius: 12px 12px 0 0;
p {
font-size: 14px;
line-height: calc(24 / 14);
}
h2 {
column-gap: 4px;
img {
height: 21px;
}
span {
font-size: 20px;
line-height: calc(24 / 20);
}
}
}
:where(.informations, .details-content) {
>li+li {
margin-top: 4px;
}
a {
padding-inline: 30px;
font-size: 14px;
line-height: calc(24 / 14);
}
>li:not( :has(ul)) {
>a {
padding-block: 24px;
}
}
>li:has(ul) {
padding-block: 16px;
a {
padding-block: 6px;
}
}
a[data-count]::after {
height: 26px;
padding-inline: 11px;
font-size: 13px;
line-height: calc(24 / 13);
text-indent: -.06em;
letter-spacing: -.06em;
}
}
.informations {
margin-top: 4px;
}
details {
margin-top: 4px;
overflow: hidden;
border-radius: 0 0 16px 16px;
summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 24px;
padding-inline: 30px;
font-size: 16px;
line-height: calc(24 / 16);
&::after {
display: block;
width: auto;
height: 6.65px;
aspect-ratio: 11.67 / 6.65;
font-size: 0;
content: "";
background: url(//jo-katsu.com/release/wordpress/wp-content/uploads/2025/07/Vector.png) center / contain no-repeat;
}
}
&[open] {
summary::after {
rotate: 0;
}
}
&:not([open]) {
summary::after {
rotate: -180deg;
}
}
}
.column02 {
margin-top: 60px;
}
}
@media print,
screen and (width > 768px) {
.columns02 {
display: grid;
grid-template-columns: 360px 904px;
align-items: start;
justify-content: space-between;
margin-top: 80px;
}
.column01 {
grid-row: 1;
grid-column: 1;
}
.names {
padding-inline: 30px;
padding-top: 24px;
padding-bottom: 30px;
border-radius: 16px 16px 0 0;
p {
margin-bottom: 8px;
font-size: 16px;
line-height: calc(24 / 16);
}
h2 {
column-gap: 10px;
img {
height: 24px;
}
span {
font-size: 22px;
line-height: calc(26 / 22);
}
}
}
:where(.informations, .details-content) {
>li+li {
margin-top: 4px;
}
a {
padding-inline: 32px;
font-size: 18px;
line-height: calc(24 / 18);
}
>li:not( :has(ul)) {
>a {
padding-block: 28px;
}
}
>li:has(ul) {
padding-block: 16px;
a {
padding-block: 12px;
}
}
a[data-count]::after {
height: 28px;
padding-inline: 11px;
font-size: 15px;
line-height: calc(24 / 15);
text-indent: -.06em;
letter-spacing: -.06em;
}
}
.informations {
margin-top: 4px;
}
details {
summary {
padding-block: 20px;
padding-inline: 32px;
font-size: 18px;
line-height: calc(24 / 18);
pointer-events: none;
}
.details-content {
overflow: hidden;
border-radius: 0 0 16px 16px;
}
}
}
} body.post-type-archive-type_campus:has(#headerCampus) {
@media screen and (width < 768px) {
padding-top: 0;
}
}
body.post-type-archive-type_campus {
#campus-esinfo {
.esinfo_item__message.user-message {
p {
position: relative;
}
} .more-link {
display: grid;
align-items: stretch;
justify-content: end;
padding: 0;
position: absolute;
right: 1.25rem; bottom: 1rem;
width: 90px;
background: linear-gradient(to left, #f8f8f8 0%, #f8f8f8 90%, rgba(248, 248, 248, 0) 100%);
&::before { }
span {
font-size: 0;
font-size: .9375rem;
font-weight: 500;
line-height: 1.6;
background-color: #f8f8f8;
}
}
@media screen and (width < 768px) {
.more-link {  right: 0.625rem;
bottom: 0.25rem;
width: 110px;
}
}
@media print,
screen and (width > 768px) {
.more-link { }
}
}
#campus-corner_corporate {
@media screen and (width < 768px) {
.corner_inner {
z-index: 3;
}
}
}
} .mypage {
.icon-upload-wrapper {
position: relative;
width: 100%;
overflow: hidden;
picture {
display: block;
width: 100%;
height: 100%;
img {
width: 100%;
max-width: inherit;
height: 100%;
max-height: inherit;
object-fit: cover;
}
}
.icon-upload-overlay {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
color: white;
cursor: pointer;
background: color-mix(in sRGB, black 60%, transparent);
border-radius: 50%;
transition: background .3s;
}
.icon-upload-overlay:hover {
background: color-mix(in sRGB, black 80%, transparent);
}
.icon-upload-overlay svg {
width: 20px;
height: 20px;
fill: white;
}
}
.icon-upload-input {
display: none;
}
@media screen and (width < 768px) {
.icon-upload-wrapper {
height: 166px;
border-radius: 12px;
}
.columns02 {
margin-top: 40px;
}
.column02 {
margin-top: 60px;
h3 {
font-size: 24px;
line-height: calc(29 / 24);
}
.box {
margin-top: 24px;
border-radius: 16px;
}
header {
padding-block: 32px;
padding-inline: 30px;
h4 {
font-size: 18px;
line-height: calc(24 / 18);
}
a {
font-size: 13px;
line-height: calc(24 / 13);
}
}
dl {
display: grid;
grid-template-columns: 144px 1fr;
row-gap: 24px;
align-items: start;
padding-block: 32px;
padding-inline: 30px;
border-top-width: 2px;
}
:where(dt, dd) {
font-size: 16px;
line-height: calc(24 / 16);
}
}
}
@media print,
screen and (width > 768px) {
.icon-upload-wrapper {
height: 304px;
border-radius: 16px;
}
.column02 {
grid-row: 1;
grid-column: 2;
h3 {
font-size: 32px;
line-height: calc(38 / 32);
}
.box {
margin-top: 32px;
border-radius: 16px;
}
header {
padding-block: 32px;
padding-inline: 40px;
h4 {
font-size: 20px;
line-height: calc(24 / 20);
}
a {
font-size: 15px;
line-height: calc(24 / 15);
}
}
dl {
display: grid;
grid-template-columns: 216px 1fr;
row-gap: 40px;
align-items: start;
padding-block: 48px;
padding-inline: 64px;
border-top-width: 2px;
}
:where(dt, dd) {
font-size: 18px;
line-height: calc(24 / 18);
}
}
}
}
#wpmem_login {
background-color: white;
border-radius: 16px;
fieldset {
margin-block: 0 ! important;
}
h2 {
font-weight: 700;
color: black;
}
.div_text:not( :first-of-type) {
margin-top: 15px;
}
label:empty {
display: none;
}
.div_text {
margin-bottom: 0 ! important;
&:first-of-type {
margin-top: 0;
}
}
:where(input[type="email"], input[type="text"], input[type="password"]) {
height: 47px;
padding-inline: 20px;
font-size: 15px;
line-height: calc(24 / 15);
background-color: #f8f8f8 ! important;
border: solid 1px #cecece ! important;
&::placeholder {
color: var(--gray01) ! important;
}
}
.button_div {
display: flex;
row-gap: 0 ! important;
align-items: center;
justify-content: start ! important;
padding: 0 ! important;
margin-top: 15px;
margin-bottom: 24px;
font-size: 0;
input[type="checkbox"] {
margin: 0;
}
label {
margin-bottom: 0;
font-size: 13px;
line-height: calc(24 / 13);
color: var(--gray01);
}
input[type="submit"] {
display: grid;
place-items: center;
width: 100% ! important;
height: 66px ! important;
margin-inline: auto;
font-size: 15px ! important;
font-weight: 700;
line-height: calc(24 / 15) ! important;
color: white ! important;
background-color: var(--red01) ! important;
border-radius: 100vmax ! important;
}
}
.link-text {
padding: 0 ! important;
}
.button_div+.link-text {
margin-top: 0 ! important;
}
.link-text-forgot>a {
display: block;
width: fit-content;
margin-left: auto;
color: var(--red01);
-webkit-text-decoration: none ! important;
text-decoration: none ! important;
}
.link-text .link-text-register {
margin-top: 36px;
>a {
display: grid;
place-items: center;
width: 100%;
height: 66px;
margin-inline: auto;
font-size: 15px;
font-weight: 500;
line-height: calc(24 / 15);
color: var(--red01);
-webkit-text-decoration: none;
text-decoration: none;
background-color: white;
border-color: var(--red01);
border-style: solid;
border-width: 2px;
border-radius: 100vmax;
}
}
@media screen and (width < 768px) {
width: 100%;
padding-inline: 30px;
padding-top: 32px;
padding-bottom: 40px;
margin-top: 48px;
h2 {
margin-bottom: 29px;
font-size: 20px;
line-height: calc(24 / 20);
}
:where(input[type="email"], input[type="text"], input[type="password"]) {
border-radius: 6px;
}
.button_div {
column-gap: calc(8px / 2);
input[type="checkbox"] {
width: 18px;
height: 18px;
}
input[type="submit"] {
margin-top: 32px;
}
}
:where(.link-text-forgot > a, .link-text-register > a:first-of-type) {
font-size: 12px;
line-height: calc(24 / 12);
}
.link-text-register {
>span {
column-gap: 23px;
margin-top: 32px;
font-size: 14px;
line-height: calc(24 / 14);
}
>a:nth-of-type(2) {
margin-top: 16px;
}
}
}
@media print,
screen and (width > 768px) {
max-width: 540px;
padding-inline: 51px;
padding-top: 44px;
padding-bottom: 60px;
margin-inline: auto;
margin-top: 40px;
h2 {
margin-bottom: 40px;
font-size: 22px;
line-height: calc(26 / 22);
}
:where(input[type="email"], input[type="text"], input[type="password"]) {
border-radius: 3px;
}
.button_div {
column-gap: calc(9px / 2);
input[type="checkbox"] {
width: 16px;
height: 16px;
}
input[type="submit"] {
margin-top: 24px;
}
}
:where(.link-text-forgot > a, .link-text-register > a:first-of-type) {
font-size: 15px;
line-height: calc(24 / 15);
}
.link-text-register {
>span {
column-gap: 8px;
margin-top: 36px;
font-size: 16px;
line-height: calc(24 / 16);
}
>a:nth-of-type(2) {
margin-top: 12px;
}
}
}
}
.page-resetPassword {
#wpmem_login {
fieldset {
margin-block: 0;
}
.button_div {
margin-top: 24px;
margin-bottom: 0;
input[type="submit"] {
margin-top: 0;
}
}
.link-text:has(> span:empty) {
display: none;
}
}
} body.post-type-archive-es-info { min-width: inherit;
#archive_esinfo {
.es-left {
>a {
display: block;
width: 100%;
height: auto;
overflow: hidden;
img {
object-fit: cover;
}
}
}
.es-right {
.company-logo {
overflow: hidden;
border-radius: 8px;
}
}
.swiper-controller {
.es-swiper__pagination {
position: relative;
bottom: 0;
column-gap: 12px;
span {
margin: 0;
}
}
.es-slide__nav {
position: relative;
button {
top: 0;
bottom: 0;
padding: 0;
padding-inline: 0;
margin: 0;
}
img {
width: auto;
height: 100%;
}
}
}
.search-execute-button:hover {
color: white;
background-color: var(--red02);
cursor: pointer;
}
}
@media screen and (width < 768px) {
#archive_esinfo {
.es-slider-wrapper {
padding-inline: 0;
}
.es-slide-inner {
row-gap: 17px;
}
.es-left {
padding-inline: 20px;
>a {
border-radius: 12px;
}
}
.es-right {
column-gap: 20px;
padding-inline: 20px;
padding-bottom: 0;
.company-name {
margin-top: -2px;
font-size: 18px;
line-height: calc(22 / 18);
}
.es-title {
margin-top: 13px;
font-size: 14px;
line-height: calc(22 / 14);
}
}
.swiper-controller {
margin-top: 40px;
.es-slide__nav {
height: 52px;
margin-top: 32px;
.es-swiper__prev {
left: 112px;
}
.es-swiper__next {
right: 112px;
}
}
}
}
}
@media print,
screen and (width > 768px) {
#archive_esinfo {
.es-slider-wrapper {
max-width: calc(1320px + 2rem);
}
.swiper {
display: grid;
grid-template-rows: 1fr 48px auto 16px;
grid-template-columns: 1fr 372px;
column-gap: calc((1580 - 1160 - 372) * 100% / 1580);
}
.swiper-wrapper {
grid-row: 1/-1;
grid-column: 1 / -1;
}
.swiper-controller {
grid-row: 3;
grid-column: 2;
}
.es-slide-inner {
display: flex;
column-gap: calc((1580 - 1160 - 372) * 100% / 1580);
align-items: flex-end;
}
.es-left {
flex-grow: 1;
width: auto;
>a {
aspect-ratio: 1160 / 652;
border-radius: 16px;
}
}
.es-right {
flex-shrink: 0;
width: 372px;
padding-bottom: 162px;
.company-name {
margin-top: 16px;
font-size: 20px;
line-height: calc(24 / 20);
}
.es-title {
margin-top: 40px;
font-size: 18px;
line-height: calc(30 / 18);
}
}
.swiper-controller {
.es-slide__pagination {
column-gap: 12px;
}
.es-slide__nav {
height: 52px;
margin-top: 32px;
.es-swiper__prev {
left: 108px;
}
.es-swiper__next {
right: 108px;
}
}
}
}
}
} #singleEs {
background-color: #f2f4f6;
.breadcrumb {
margin-block: 0;
}
.es {
overflow: hidden;
background-color: white;
border-radius: 20px;
header {
h1 {
position: relative;
font-weight: 700;
color: var(--red02);
&::before,
&::after {
position: absolute;
top: 50%;
display: block;
font-size: 0;
content: "";
background-color: currentColor;
translate: 0 -50%;
}
&::before {
height: 6px;
}
&::after {
width: auto;
height: 14px;
aspect-ratio: 1;
border-radius: 50%;
}
a {
color: var(--red02);
-webkit-text-decoration: underline;
text-decoration: underline;
text-underline-offset: .2lh;
}
}
p {
font-weight: 700;
color: black;
}
}
.categories {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
margin-top: 8px;
p {
display: grid;
place-items: center;
padding-block: 8px;
padding-inline: 12px;
font-weight: 700;
color: white;
background-color: var(--red02);
border-radius: 100vmax;
}
ul {
display: flex;
align-items: center;
justify-content: center;
padding-block: 8px;
padding-inline: 4px;
border-radius: 100vmax;
outline: solid 1px var(--red02);
outline-offset: -1px;
}
li {
padding-inline: 12px;
font-weight: 700;
color: var(--red02);
+li {
border-left: solid 1px currentColor;
}
}
}
}
.relation {
h2 {
width: fit-content;
font-weight: 700;
color: black;
border-bottom-color: var(--red02);
border-bottom-style: solid;
}
>ul {
>li {
background-color: white;
border-radius: 20px;
}
}
section {
display: grid;
align-items: start;
picture {
display: block;
img {
width: auto;
}
}
.categories {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
p {
display: grid;
place-items: center;
padding-block: 8px;
padding-inline: 12px;
font-weight: 700;
color: white;
background-color: var(--red02);
border-radius: 100vmax;
}
ul {
display: flex;
align-items: center;
justify-content: center;
padding-block: 8px;
padding-inline: 4px;
border-radius: 100vmax;
outline: solid 1px var(--red02);
outline-offset: -1px;
}
li {
padding-inline: 12px;
font-weight: 700;
color: var(--red02);
+li {
border-left: solid 1px currentColor;
}
}
}
}
h3 {
font-weight: 700;
color: black;
}
.excerpt {
position: relative;
overflow-y: hidden;
color: black;
letter-spacing: -.06em;
background-color: #f8f8f8;
&::after {
position: absolute;
left: 0;
display: block;
width: 100%;
content: "";
background-image: linear-gradient(to bottom, color-mix(in srgb, #f8f8f8 0%, transparent), color-mix(in srgb, #f8f8f8 100%, transparent));
}
}
a {
display: grid;
place-items: center;
font-weight: 700;
color: white;
background-color: var(--red02);
border-radius: 100vmax;
}
}
@media screen and (width < 768px) {
padding-inline: 20px;
padding-top: 106px;
padding-bottom: 88px;
.es {
padding-block: 32px;
padding-inline: 20px;
header {
padding-inline: 20px;
h1 {
font-size: 24px;
line-height: calc(30 / 24);
&::before {
left: -40px;
width: 25px;
}
&::after {
left: -22px;
}
}
p {
margin-top: 8px;
font-size: 14px;
line-height: calc(17 / 14);
}
}
.categories {
padding-inline: 20px;
margin-top: 16px;
p {
font-size: 12px;
line-height: calc(19 / 12);
}
li {
font-size: 12px;
line-height: calc(19 / 12);
}
}
}
.relation {
margin-top: 80px;
h2 {
padding-bottom: 8px;
font-size: 18px;
line-height: calc(22 / 18);
border-bottom-width: 4px;
}
>ul {
margin-top: 32px;
>li {
padding-inline: 20px;
padding-top: 20px;
padding-bottom: 16px;
+li {
margin-top: 16px;
}
}
}
section {
grid-template-rows: auto 16px auto 16px auto 8px auto;
grid-template-columns: auto 16px auto 1fr;
}
.categories {
grid-row: 1;
grid-column: 1 / -1;
p {
font-size: 12px;
line-height: calc(19 / 12);
}
li {
font-size: 12px;
line-height: calc(19 / 12);
}
}
picture {
grid-row: 3;
grid-column: 1;
align-self: center;
img {
height: 66px;
}
}
h3 {
grid-row: 3;
grid-column: 3;
align-self: center;
font-size: 16px;
line-height: calc(26 / 16);
}
.excerpt {
grid-row: 5;
grid-column: 1 / 5;
max-height: 167px;
padding-block: 16px;
padding-inline: 16px;
font-size: 12px;
line-height: calc(21 / 12);
border-radius: 4px;
&::after {
top: 92px;
height: 75px;
}
}
a {
grid-row: 7;
grid-column: 1 / 5;
width: 100%;
padding-block: 5px;
padding-inline: 20px;
font-size: 12px;
line-height: calc(19 / 12);
}
}
.sidebar {
margin-top: 80px;
}
}
@media print,
screen and (width > 768px) {
padding-inline: calc((100% - 1580px) / 2);
padding-top: 203px;
padding-bottom: 100px;
.breadcrumb {
padding-inline: 130px;
}
.columns02 {
display: grid;
grid-template-columns: calc(1160 * 100% / 1580) calc(360 * 100% / 1580);
row-gap: 120px;
align-items: start;
justify-content: space-between;
margin-top: 40px;
}
.es {
grid-row: 1;
grid-column: 1;
padding-block: 80px;
padding-inline: 130px;
header {
h1 {
font-size: 35px;
line-height: calc(50 / 35);
&::before {
left: -130px;
width: 107px;
}
&::after {
left: -32px;
}
}
p {
font-size: 18px;
line-height: calc(22 / 18);
}
}
.categories {
margin-top: 24px;
p {
font-size: 14px;
line-height: calc(19 / 14);
}
li {
font-size: 14px;
line-height: calc(19 / 14);
}
}
}
.relation {
grid-row: 2;
grid-column: 1;
align-self: start;
h2 {
padding-bottom: 10px;
font-size: 26px;
line-height: calc(31 / 26);
border-bottom-width: 5px;
}
>ul {
margin-top: 40px;
>li {
padding-inline: 40px;
padding-top: 36px;
padding-bottom: 24px;
+li {
margin-top: 40px;
}
}
}
section {
grid-template-rows: 6px auto 10px auto auto 16px auto;
grid-template-columns: auto 24px auto 1fr auto;
}
picture {
grid-row: 1 / 6;
grid-column: 1;
img {
height: 86px;
}
}
.categories {
grid-row: 2;
grid-column: 3;
p {
font-size: 14px;
line-height: calc(19 / 14);
}
li {
font-size: 14px;
line-height: calc(19 / 14);
}
}
h3 {
grid-row: 4/6;
grid-column: 3;
align-self: start;
font-size: 20px;
line-height: calc(28 / 20);
}
a {
grid-row: 4/6;
grid-column: 5;
align-self: start;
padding-block: 5px;
padding-inline: 20px;
font-size: 12px;
line-height: calc(19 / 12);
}
.excerpt {
grid-row: 7;
grid-column: 1 / 6;
max-height: 256px;
padding-block: 16px;
padding-inline: 20px;
font-size: 15px;
line-height: calc(24 / 15);
border-radius: 4px;
&::after {
top: 148px;
height: 108px;
}
}
}
.sidebar {
grid-row: 1/3;
grid-column: 2;
align-self: start;
}
}
} #singleEs.type-info .content {
color: black;
h2 {
font-weight: 700;
background-color: #f2f4f6;
}
p+h2 {
margin-top: 64px;
}
@media screen and (width < 768px) {
margin-top: 64px;
h2 {
padding-block: 10px;
padding-inline: 16px;
font-size: 17px;
line-height: calc(28 / 17);
}
p {
font-size: 15px;
line-height: calc(28 / 15);
}
h2+p {
margin-top: 24px;
}
}
@media print,
screen and (width > 768px) {
margin-top: 80px;
h2 {
padding-inline: 24px;
font-size: 20px;
line-height: calc(48 / 20);
}
p {
font-size: 15px;
line-height: calc(26 / 15);
}
h2+p {
margin-top: 32px;
}
}
} #singleEs.type-interview .content {
h2 {
font-weight: 700;
color: var(--red02);
border-left-color: currentColor;
border-left-style: solid;
border-left-width: 5px;
}
h3 {
font-weight: 700;
color: black;
background-color: #f2f4f6;
}
h3+ :where(table, .wp-block-table) {
margin-top: 8px;
}
:where(table, .wp-block-table) {
overflow: visible;
}
:where(table, .wp-block-table) {
width: 100%;
th,
td {
color: black;
vertical-align: middle;
border-top: 0;
border-bottom: solid 1px #d9d9d9;
border-left: 0;
border-right: 0;
}
th {
position: relative;
font-weight: 700;
text-align: center;
&::after {
position: absolute;
bottom: -1.5px;
left: 0;
width: 100%;
height: 3px;
font-size: 0;
content: "";
background-color: var(--red01);
}
}
}
.wp-block-table {
tr:has(td:nth-of-type(2)) {
td:first-of-type {
position: relative;
font-weight: 700;
text-align: center;
&::after {
position: absolute;
bottom: -1.5px;
left: 0;
width: 100%;
height: 3px;
font-size: 0;
content: "";
background-color: var(--red01);
}
}
}
}
:where(table, .wp-block-table)+h3 {
margin-top: 64px;
}
h4 {
font-weight: 700;
color: black;
border-left-color: var(--red01);
border-left-style: solid;
}
p {
color: black;
}
p+h4,
p+h5 {
margin-top: 24px;
}
h5 {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: start;
&::before {
display: block;
width: auto;
aspect-ratio: 1;
font-size: 0;
content: "";
background-color: var(--red01);
}
}
h5+p {
margin-top: 8px;
}
p+h3 {
margin-top: 64px;
}
@media screen and (width < 768px) {
margin-top: 64px;
h2 {
padding-left: 10px;
font-size: 20px;
line-height: calc(24 / 20);
}
h2+h3 {
margin-top: 40px;
}
h3 {
padding-inline: 16px;
font-size: 17px;
line-height: calc(48 / 17);
}
:where(table, .wp-block-table) {
th,
td {
font-size: 14px;
}
th {
width: 120px;
padding-block: 16px;
line-height: calc(32 / 14);
}
td {
padding-block: 19px;
padding-inline: 16px;
line-height: calc(26 / 14);
}
}
.wp-block-table {
tr:has(td:nth-of-type(2)) {
td:first-of-type {
width: 120px;
padding-block: 16px;
line-height: calc(32 / 14);
}
}
}
h3+h4 {
margin-top: 24px;
}
h4 {
padding-left: 13px;
font-size: 18px;
line-height: calc(22 / 18);
border-left-width: 5px;
}
h4+p {
margin-top: 25px;
}
p {
font-size: 15px;
line-height: calc(28 / 15);
}
h5 {
column-gap: 6px;
font-size: 15px;
line-height: calc(29 / 15);
&::before {
height: 12px;
}
}
}
@media print,
screen and (width > 768px) {
margin-top: 80px;
h2 {
padding-left: 20px;
font-size: 30px;
line-height: calc(36 / 30);
}
h2+h3 {
margin-top: 48px;
}
h3 {
padding-inline: 24px;
font-size: 20px;
line-height: calc(48 / 20);
}
:where(table, .wp-block-table) {
th,
td {
font-size: 15px;
}
th {
width: 240px;
padding-block: 24px;
line-height: calc(32 / 15);
}
td {
padding-block: 27px;
padding-inline: 24px;
line-height: calc(26 / 15);
}
}
.wp-block-table {
tr:has(td:nth-of-type(2)) {
td:first-of-type {
width: 240px;
padding-block: 24px;
line-height: calc(32 / 15);
}
}
}
h3+h4 {
margin-top: 31px;
}
h4 {
padding-left: 12px;
font-size: 20px;
line-height: calc(24 / 20);
border-left-width: 6px;
}
h4+p {
margin-top: 32px;
}
p {
font-size: 15px;
line-height: calc(26 / 15);
}
h5 {
column-gap: 12px;
font-size: 18px;
line-height: calc(32 / 18);
&::before {
height: 16px;
}
}
}
} body.single-es-info {  .limited-content-dummy__outer {
position: relative;
min-height: 600px;
.limited-content-dummy {
min-height: 350px;
margin-bottom: 30px;
picture {
img {
margin-top: 30px;
}
}
}
.es-logins {
position: absolute;
z-index: 1;
top: 35px;
background: white;
padding: 40px 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
border-radius: 16px;
width: 80%;
left: 50%;
transform: translateX(-50%);
p {
font-size: 16px;
text-align: center;
font-weight: 700;
.red {
color: #DB0037;
font-size: 16px;
text-align: center;
font-weight: 700;
display: block;
line-height: 1.5;
}
}
.btn_group {
margin-top: 15px;
margin-bottom: 15px;
.btn {
width: 290px;
margin-right: auto;
margin-left: auto;
font-size: 16px;
height: 50px;
}
.btn:nth-of-type(2) {
margin-top: 10px;
}
}
.bottom_area {
background-color: #F2F4F6;
border-radius: 16px;
width: fit-content;
margin-right: auto;
margin-left: auto;
padding: 25px 45px;
margin-top: 30px;
ul {
margin-right: auto;
margin-left: auto;
width: fit-content;
li {
font-size: 14px;
margin-bottom: 15px;
font-weight: 700;
list-style: disc;
.red {
color: #DB0037;
font-weight: 700;
}
}
li:last-of-type {
margin-bottom: 0;
}
}
}
}
}
#footer {
background-color: #F2F4F6;
}
}
@media screen and (width < 931px) {
body.single-es-info {
.limited-content-dummy__outer {
.es-logins {
padding: 40px 10px 20px 10px;
width: 100%;
max-width: 400px;
p {
font-size: 14px;
line-height: 1.6;
.red {
font-size: 14px;
line-height: 1.6;
}
}
.btn_group {
.btn {
width: 245px;
font-size: 15px;
height: 46px;
}
.btn:nth-of-type(2) {
margin-top: 7px;
}
}
.bottom_area {
padding: 25px 20px 25px 35px;
margin-top: 15px;
ul {
li {
font-size: 12px;
margin-bottom: 4px;
line-height: 1.5;
font-weight: normal;
}
}
}
}
}
.limited-content-dummy__outer.es-area {
.es-logins {
top: 100px;
}
}
}
} #singleCompany {
background-color: #f2f4f6;
.breadcrumb {
margin-block: 0;
}
.company {
overflow: hidden;
background-color: white;
border-radius: 20px;
header {
h2 {
position: relative;
font-weight: 700;
color: var(--red02);
&::before,
&::after {
position: absolute;
top: 50%;
display: block;
font-size: 0;
content: "";
background-color: currentColor;
translate: 0 -50%;
}
&::before {
height: 6px;
}
&::after {
width: auto;
height: 14px;
aspect-ratio: 1;
border-radius: 50%;
}
}
p {
font-weight: 700;
color: black;
}
}
dl {
display: grid;
color: black;
dt,
dd {
align-self: center;
border-bottom: solid 1px #d9d9d9;
}
dt {
position: relative;
font-weight: 700;
text-align: center;
&::after {
position: absolute;
bottom: -1.5px;
left: 0;
width: 100%;
height: 3px;
font-size: 0;
content: "";
background-color: var(--red01);
}
}
}
}
.relation {
h3 {
width: fit-content;
font-weight: 700;
color: black;
border-bottom-color: var(--red02);
border-bottom-style: solid;
}
>ul {
>li {
background-color: white;
border-radius: 20px;
}
}
section {
display: grid;
align-items: start;
picture {
display: block;
img {
width: auto;
}
}
.categories {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
p {
display: grid;
place-items: center;
padding-block: 8px;
padding-inline: 12px;
font-weight: 700;
color: white;
background-color: var(--red02);
border-radius: 100vmax;
}
ul {
display: flex;
align-items: center;
justify-content: center;
padding-block: 8px;
padding-inline: 4px;
border-radius: 100vmax;
outline: solid 1px var(--red02);
outline-offset: -1px;
}
li {
padding-inline: 12px;
font-weight: 700;
color: var(--red02);
+li {
border-left: solid 1px currentColor;
}
}
}
}
h4 {
font-weight: 700;
color: black;
}
.excerpt {
position: relative;
overflow-y: hidden;
color: black;
letter-spacing: -.06em;
background-color: #f8f8f8;
&::after {
position: absolute;
left: 0;
display: block;
width: 100%;
content: "";
background-image: linear-gradient(to bottom, color-mix(in srgb, #f8f8f8 0%, transparent), color-mix(in srgb, #f8f8f8 100%, transparent));
}
}
a {
display: grid;
place-items: center;
font-weight: 700;
color: white;
background-color: var(--red02);
border-radius: 100vmax;
}
}
@media screen and (width < 768px) {
padding-inline: 20px;
padding-top: 106px;
padding-bottom: 88px;
.company {
padding-block: 32px;
padding-inline: 20px;
margin-top: 26px;
header {
padding-inline: 20px;
h2 {
font-size: 24px;
line-height: calc(30 / 24);
&::before {
left: -40px;
width: 25px;
}
&::after {
left: -22px;
}
}
p {
margin-top: 8px;
font-size: 14px;
line-height: calc(17 / 14);
}
}
dl {
grid-template-columns: 120px 1fr;
dt {
padding-block: 16px;
font-size: 14px;
line-height: calc(32 / 14);
}
dd {
padding-block: 19px;
padding-inline: 16px;
font-size: 14px;
line-height: calc(26 / 14);
}
}
}
.relation {
margin-top: 80px;
h3 {
padding-bottom: 8px;
font-size: 18px;
line-height: calc(22 / 18);
border-bottom-width: 4px;
}
>ul {
margin-top: 32px;
>li {
padding-inline: 20px;
padding-top: 20px;
padding-bottom: 16px;
+li {
margin-top: 16px;
}
}
}
section {
grid-template-rows: auto 16px auto 16px auto 8px auto;
grid-template-columns: auto 16px auto 1fr;
}
.categories {
grid-row: 1;
grid-column: 1 / -1;
p {
font-size: 12px;
line-height: calc(19 / 12);
}
li {
font-size: 12px;
line-height: calc(19 / 12);
}
}
picture {
grid-row: 3;
grid-column: 1;
align-self: center;
img {
height: 66px;
}
}
h4 {
grid-row: 3;
grid-column: 3;
align-self: center;
font-size: 16px;
line-height: calc(26 / 16);
}
.excerpt {
grid-row: 5;
grid-column: 1 / 5;
max-height: 167px;
padding-block: 16px;
padding-inline: 16px;
font-size: 12px;
line-height: calc(21 / 12);
border-radius: 4px;
&::after {
top: 92px;
height: 75px;
}
}
a {
grid-row: 7;
grid-column: 1 / 5;
width: 100%;
padding-block: 5px;
padding-inline: 20px;
font-size: 12px;
line-height: calc(19 / 12);
}
}
.sidebar {
margin-top: 80px;
}
}
@media print,
screen and (width > 768px) {
padding-inline: calc((100% - 1580px) / 2);
padding-top: 203px;
padding-bottom: 100px;
.breadcrumb {
padding-inline: 130px;
}
.columns02 {
display: grid;
grid-template-columns: 1160px 360px;
row-gap: 120px;
align-items: start;
justify-content: space-between;
margin-top: 40px;
}
.company {
grid-row: 1;
grid-column: 1;
padding-block: 80px;
padding-inline: 130px;
header {
h2 {
font-size: 35px;
line-height: calc(50 / 35);
&::before {
left: -130px;
width: 107px;
}
&::after {
left: -32px;
}
}
p {
font-size: 18px;
line-height: calc(22 / 18);
}
}
dl {
grid-template-columns: 240px 1fr;
dt {
padding-block: 24px;
font-size: 15px;
line-height: calc(32 / 15);
}
dd {
padding-block: 27px;
padding-inline: 24px;
font-size: 15px;
line-height: calc(26 / 15);
}
}
}
.relation {
grid-row: 2/4;
grid-column: 1;
align-self: start;
h3 {
padding-bottom: 10px;
font-size: 26px;
line-height: calc(31 / 26);
border-bottom-width: 5px;
}
>ul {
margin-top: 40px;
>li {
padding-inline: 40px;
padding-top: 36px;
padding-bottom: 24px;
+li {
margin-top: 40px;
}
}
}
section {
grid-template-rows: 6px auto 10px auto auto 16px auto;
grid-template-columns: auto 24px auto 1fr auto;
}
picture {
grid-row: 1 / 6;
grid-column: 1;
img {
height: 86px;
}
}
.categories {
grid-row: 2;
grid-column: 3;
p {
font-size: 14px;
line-height: calc(19 / 14);
}
li {
font-size: 14px;
line-height: calc(19 / 14);
}
}
h4 {
grid-row: 4/6;
grid-column: 3;
align-self: start;
font-size: 20px;
line-height: calc(28 / 20);
}
a {
grid-row: 4/6;
grid-column: 5;
align-self: start;
padding-block: 5px;
padding-inline: 20px;
font-size: 12px;
line-height: calc(19 / 12);
}
.excerpt {
grid-row: 7;
grid-column: 1 / 6;
max-height: 256px;
padding-block: 16px;
padding-inline: 20px;
font-size: 15px;
line-height: calc(24 / 15);
border-radius: 4px;
&::after {
top: 148px;
height: 108px;
}
}
}
.sidebar {
grid-row: 1/3;
grid-column: 2;
align-self: start;
}
}
} body:has(#loginPopup[open]) {
overflow: hidden;
}
#loginPopup {
position: fixed;
inset: 0;
place-items: center;
width: 100%;
max-width: inherit;
height: 100%;
max-height: inherit;
background-color: color-mix(in srgb, #3d3d3d 95%, transparent);
&:not([open]) {
display: none;
}
&[open] {
z-index: 10;
display: grid;
}
.dialog-container {
width: 100%;
background-color: white;
border-radius: 16px;
}
#wpmem_reg {
width: 100%;
background-color: white;
legend {
display: block;
font-weight: 700;
color: black;
text-align: center;
}
label {
display: flex;
align-items: baseline;
color: black;
span {
display: flex;
align-items: baseline;
justify-content: start;
color: var(--gray01);
}
img {
width: auto;
}
.req {
display: none;
}
}
.div_text {
margin-bottom: 0;
}
:where(input[type="text"], input[type="email"], input[type="password"]) {
background-color: #f8f8f8;
border: solid 1px #cecece;
&::placeholder {
color: var(--gray01) ! important;
}
}
fieldset {
margin: 0;
>p {
color: var(--gray01);
a {
color: var(--red01);
}
}
}
input[type="submit"] {
display: grid;
place-items: center;
width: 100%;
height: 66px;
font-size: 15px;
font-weight: 700;
line-height: calc(24 / 15);
color: white;
background-color: var(--red01);
border: solid 1px var(--red01);
border-radius: 100vmax;
}
fieldset {
>a {
display: grid;
place-items: center;
width: 100%;
height: 66px;
margin-top: 24px;
font-size: 15px;
font-weight: 700;
line-height: calc(24 / 15);
color: var(--red01);
background-color: white;
border-color: var(--red01);
border-style: solid;
border-width: 1px;
border-radius: 100vmax;
}
}
.button_div {
padding-block: 0;
}
}
@media screen and (width < 768px) {
.dialog-container {
max-width: 360px;
padding-block: 40px;
padding-inline: 30px;
}
#wpmem_reg {
legend {
margin-bottom: 37px;
font-size: 20px;
line-height: calc(24 / 20);
}
label {
column-gap: 10px;
font-size: 16px;
line-height: calc(24 / 16);
span {
column-gap: 4px;
font-size: 11px;
line-height: calc(24 / 11);
img {
height: 12px;
}
}
}
.div_text {
margin-top: 12px;
}
:where(input[type="text"], input[type="email"], input[type="password"]) {
height: 47px;
font-size: 15px;
line-height: calc(24 / 15);
border-radius: 6px;
}
fieldset {
>label:not( :first-of-type) {
margin-top: 24px;
}
>p {
&:nth-of-type(1) {
margin-top: 32px;
font-size: 14px;
line-height: calc(24 / 14);
}
&:nth-of-type(2) {
margin-top: 24px;
font-size: 11px;
line-height: calc(18 / 11);
}
}
}
.button_div {
margin-top: 32px;
}
}
}
@media print,
screen and (width > 768px) {
.dialog-container {
max-width: 500px;
padding-inline: 60px;
padding-top: 48px;
padding-bottom: 48px;
}
#wpmem_reg {
legend {
margin-bottom: 40px;
font-size: 22px;
line-height: calc(26 / 22);
}
label {
column-gap: 10px;
font-size: 18px;
line-height: calc(24 / 18);
span {
column-gap: 3px;
font-size: 13px;
line-height: calc(24 / 13);
img {
height: 12px;
}
}
}
.div_text {
margin-top: 10px;
}
:where(input[type="text"], input[type="email"], input[type="password"]) {
height: 47px;
font-size: 15px;
line-height: calc(24 / 15);
border-radius: 3px;
}
fieldset {
>label:not( :first-of-type) {
margin-top: 32px;
}
>p {
&:nth-of-type(1) {
margin-top: 40px;
font-size: 16px;
line-height: calc(24 / 16);
}
&:nth-of-type(2) {
margin-top: 24px;
font-size: 13px;
line-height: calc(18 / 13);
}
}
}
.button_div {
margin-top: 40px;
}
}
}
} .popup_wrap.popup_view {
z-index: calc(infinity);
}
body.single-type_campus {
@media screen and (width < 768px) {
--headerHeight: 72px;
main {
padding-top: var(--headerHeight);
}
}
@media print,
screen and (width > 768px) {
--headerHeight: 147px;
.all_container {
overflow-x: clip;
}
main {
padding-top: var(--headerHeight);
}
.campus_sidebar_container {
padding-top: 0;
}
}
} .post-type-archive-videos {
#archive__videos {
.video-left {
>a {
display: block;
overflow: hidden;
}
}
.video-right {
.company-logo {
overflow: hidden;
border-radius: 8px;
}
}
.swiper-controller {
.video-swiper__pagination {
position: relative;
bottom: 0;
column-gap: 12px;
span {
margin: 0;
}
}
.video-slide__nav {
position: relative;
button {
top: 0;
bottom: 0;
padding: 0;
padding-inline: 0;
margin: 0;
}
img {
width: auto;
height: 100%;
}
}
}
}
@media screen and (width < 768px) {
#archive__videos {
.video-slider-wrapper {
padding-inline: 0;
}
.video-slide-inner {
row-gap: 17px;
}
.video-left {
padding-inline: 20px;
>a {
border-radius: 12px;
}
}
.video-right {
column-gap: 20px;
padding-inline: 20px;
padding-bottom: 0;
.company-name {
margin-top: -2px;
font-size: 18px;
line-height: calc(22 / 18);
}
.video-title {
margin-top: 13px;
font-size: 14px;
line-height: calc(22 / 14);
}
}
.swiper-controller {
margin-top: 40px;
.video-slide__nav {
height: 52px;
margin-top: 32px;
.video-swiper__prev {
left: 112px;
}
.video-swiper__next {
right: 112px;
}
}
}
}
}
@media print,
screen and (width > 768px) {
#archive__videos {
.video-slider-wrapper {
max-width: calc(1320px + 2rem);
}
.swiper {
display: grid;
grid-template-rows: 1fr 48px auto 16px;
grid-template-columns: 1fr 372px;
column-gap: calc((1580 - 1160 - 372) * 100% / 1580);
}
.swiper-wrapper {
grid-row: 1/-1;
grid-column: 1 / -1;
}
.swiper-controller {
grid-row: 3;
grid-column: 2;
}
.video-left {
flex-grow: 1;
flex-shrink: 0;
width: auto;
>a {
border-radius: 16px;
}
}
.video-right {
flex-shrink: 0;
width: 372px;
padding-bottom: 162px;
.company-name {
margin-top: 16px;
font-size: 20px;
line-height: calc(24 / 20);
}
.video-title {
margin-top: 40px;
font-size: 18px;
line-height: calc(30 / 18);
}
}
.swiper-controller {
.video-slide__pagination {
column-gap: 12px;
}
.video-slide__nav {
height: 52px;
margin-top: 32px;
.video-swiper__prev {
left: 108px;
}
.video-swiper__next {
right: 108px;
}
}
}
}
}
} #sp-menubox {
@media (768px <=width < 1560px) {
padding-inline: calc(32 * 100% / 1560);
.global_navigation {
padding-inline: 0;
}
.menu-content-wrapper {
column-gap: calc(32 * 100% / 1496);
}
}
} body.post-type-archive-type_campus {
.post_co_inner {
.post_co__label:not(.only_icon, .post_co__label__limited) {
outline: solid 1px var(--red02);
outline-offset: -1px;
}
}
.post_co_inner {
.post_co__label:not(.only_icon).post_co__label__limited {
outline: solid 1px var(--orange01);
outline-offset: -1px;
img {
filter: var(--filterWhite);
}
}
}
.stepguide_item__title {
font-feature-settings: "palt"on;
}
#campus-stepguide {
.post_co__small .post_co__label__normal .icon {
display: block;
width: auto;
}
}
@media screen and (width < 768px) {
#campus-stepguide {
.post_co__small .post_co__label__normal .icon {
height: calc(6 * 100vw / 400);
margin-left: calc(1 * 100% / 20);
}
}
}
@media print,
screen and (width > 768px) {
#campus-stepguide {
.post_co__small .post_co__label__normal .icon {
height: min(10px, calc(10 * 100vw / 400));
margin-left: calc(1 * 100% / 28);
}
}
}
}
@media (hover : hover) {
body.post-type-archive-type_campus {
.post_co_inner:hover {
.post_co__label:not(.only_icon, .post_co__label__limited) {
background-color: color-mix(in sRGB, white 80%, transparent);
.text {
color: var(--red02);
}
}
}
.post_co_inner:hover {
.post_co__label:not(.only_icon).post_co__label__limited {
background-color: color-mix(in sRGB, white 80%, transparent);
.text {
color: var(--orange01);
}
img {
filter: var(--filterOrange01);
}
}
}
.btn_red_border:hover {
color: white;
background-color: var(--red02);
}
.btn_red_fill:hover {
color: var(--red02);
background-color: white;
}
.btn_black_border:hover {
color: white;
background-color: black;
}
#campus-stepguide button:hover {
color: white;
background-color: var(--red02);
span {
color: var(--red02);
background-color: white;
}
}
}
} .single-curner-box .contents-box .single-sns-box li.x {
background: black;
} .campus_sidebar_container {
@media print,
screen and (width > 768px) {
.sidebar {
>div:first-of-type {
margin-top: 0;
}
}
}
} #single_materials {
.form-dl {
select {
flex-shrink: 0;
font-size: 1.125rem;
line-height: 1.3333333333;
border: 1px solid #cecece;
}
}
input::placeholder {
color: #868686 ! important;
}
.materials-wysiwyg {
li span {
color: var(--red02);
}
}
@media screen and (width < 768px) {
.form-dl {
select {
width: 100%;
}
}
}
@media print,
screen and (width > 768px) {
.form-dl {
select {
width: 24.4375rem;
}
}
}
} .video-search {
@media screen and (width < 768px) {
.video-search-fields {
display: block;
}
.video-search-form {
.video-search-fields {
.search-taxonomy {
width: 100%;
margin-top: 10px;
}
.search-button {
width: 100%;
margin-top: 24px;
}
}
}
}
} #single_videos {
.video-category-tabs-scroll {
width: 100%;
max-width: inherit;
padding-right: 0;
overflow: visible;
}
.video-category-tabs {
flex-wrap: wrap;
inline-size: inherit;
}
@media print,
screen and (width > 768px) {
.single_videos__head {
display: block;
}
.video-search-fields {
justify-content: end;
}
.search-box {
width: auto;
}
}
} #archive_esinfo {
.user-message {
display: grid;
padding: 0;
max-height: max-content;
background-color: #F8F8F8;
padding: 20px 30px;
border-radius: 16px;
.qa-item {
max-height: inherit;
margin-bottom: 30px;
.qa-label {
margin-right: 7px;
font-family: sans-serif;
font-weight: bold;
}
.qa-question {
background-color: white;
color: #E53754;
font-weight: 700;
border: 1px solid #E53754;
border-radius: 16px;
font-size: 14px;
padding: 4px 5px 4px 10px;
text-indent: -16px;
padding-left: 26px;
line-height: normal;
margin-bottom: 10px;
}
.qa-answer {
width: 100%;
width: 100%;
text-indent: -30px;
padding-left: 35px;
line-height: 1.8;
font-size: 14px;
.qa-label {
color: white;
background-color: #ED9623;
border-radius: 50%;
width: 24px;
height: 24px;
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: initial;
text-indent: 0px;
position: relative;
top: -1px;
}
.qa-label::before {
content: "";
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 15px solid #ED9623;
z-index: -1;
}
}
}
.qa-item:last-of-type {
margin-bottom: 0;
}
.user-message-blur {
position: relative;
grid-row: 2;
grid-column: 1;
}
.user-message-fade {
height: 100%;
background: linear-gradient(0deg, #f8f8f8 10%, rgb(248 248 248 / 0) 80%);
}
}
@media screen and (width < 768px) {
.user-message {
font-size: 12px;
line-height: 1.75;
padding: 20px 16px;
.qa-item {
margin-bottom: 15px;
.qa-question {
font-size: 12px;
margin-bottom: 5px;
padding: 4px 5px 4px 25px;
text-indent: -17px;
}
.qa-answer {
text-indent: -24px;
padding-left: 28px;
font-size: 12px;
.qa-label {
width: 18px;
height: 18px;
font-size: 12px;
margin-right: 5px;
font-size: 11px;
line-height: 12px;
}
.qa-label::before {
right: -3px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
}
}
}
} .result-item-box.is-masked {
.user-message {
.qa-item {
margin-bottom: 10px;
.qa-answer {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
}
}
@media screen and (width < 768px) {
.result-item-box.is-masked {
.user-message {
.qa-item {
margin-bottom: 0px;
}
}
}
}
} .sidebar {
.app-promo-icon {
flex-shrink: 0;
img {
width: auto;
height: 90px;
}
}
} .top_cta {
padding: 32px 24px;
margin-top: 50px;
line-height: 1.2;
background: #f7f7f7;
border: 3px solid #bd0e10;
.cta_tit {
padding: 10px 0 10px 45px;
margin-bottom: 1em;
font-size: 19px;
font-weight: 700;
color: #383838;
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/campus/common/icon_ranking_crown.png) no-repeat left center / 38px auto;
}
.cta_tit span {
display: inline-block;
padding: .2em .5em;
margin-left: .5em;
font-size: 16px;
font-weight: 600;
background: #fff;
border: 2px solid #bd0e10;
border-radius: 1em;
}
ol {
list-style: none;
}
li {
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 2px dashed #cbcbcb;
}
li:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
li::before {
content: none;
}
li span {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
margin-right: 15px;
font-size: 22px;
font-weight: 500;
line-height: 1;
color: #fff;
background: #bd0e10;
border-radius: 50%;
}
li:nth-child(4) span,
li:nth-child(5) span {
background: #4a4a4a;
}
li a {
font-size: 22px;
font-weight: 600;
color: #2085d9 ! important;
-webkit-text-decoration: underline;
text-decoration: underline;
}
li a:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
li p {
padding-left: 50px;
margin-bottom: 0 ! important;
font-size: 16px ! important;
font-weight: 600;
line-height: 1.4 ! important;
color: #383838;
}
@media screen and (width < 768px) {
.cta_tit {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/campus/common/icon_ranking_crown.png) no-repeat left top .5em / 38px auto;
}
.cta_tit span {
margin: .5em 0 0;
}
}
}
.btn_cta {
margin: 30px 0;
text-align: center;
p {
margin-bottom: 0 ! important;
color: #676767;
}
p span {
position: relative;
display: inline-block;
padding: 0 1em;
font-size: 18px;
font-weight: 600;
}
p span::before,
p span::after {
position: absolute;
top: 0;
display: block;
width: 2px;
height: 1em;
content: "";
background: #676767;
}
p span::before {
left: 0;
transform: rotate(-30deg);
}
p span::after {
right: 0;
transform: rotate(30deg);
}
.red {
color: #bd0e10;
}
.note {
font-size: 14px ! important;
}
.mockup_img {
width: 80%;
}
a {
position: relative;
display: block;
padding: 1em 3em 1em 1em;
margin: .5em 2em;
font-size: 22px;
font-weight: 600;
color: #fff ! important;
border-radius: 2em;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / .5), inset 0 -3px 6px -2px rgb(0 0 0 / .3);
}
a:hover {
opacity: .7;
}
a::before {
position: absolute;
top: 0;
bottom: 0;
right: 40px;
display: block;
width: 24px;
height: 24px;
margin: auto;
content: "";
background: #fff;
border-radius: 50%;
}
a::after {
position: absolute;
top: 0;
bottom: 0;
right: 44px;
display: block;
width: 0;
height: 0;
margin: auto;
content: "";
border-style: solid;
border-width: 7px 0 7px 12.1px;
}
.img_link {
position: relative;
display: block;
padding: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
}
.img_link:hover {
opacity: 1;
}
.img_link::before {
content: none;
}
.img_link::after {
content: none;
}
.btn_line {
background: #06c755;
}
.btn_line::after {
border-color: transparent transparent transparent #06c755;
}
.btn_01 {
background: #ed9623;
}
.btn_01::after {
border-color: transparent transparent transparent #ed9623;
}
.btn_02 {
background: #bd0e10;
}
.btn_02::after {
border-color: transparent transparent transparent #bd0e10;
}
} body.single-type_campus {
.conte-box {
div[style*="text-align: center"] {
>a {
display: block;
width: fit-content;
margin-inline: auto;
}
}
}
@media screen and (width < 768px) {
.topbutton {
display: none ! important;
}
}
} .custom-pagination ul li a,
.custom-pagination ul li {
a,
span {
width: auto;
aspect-ratio: 1;
}
@media screen and (width < 768px) {
&.distance-2,
&.distance2 {
display: none;
}
span,
a {
height: calc(38 * 100vw / 400);
font-size: calc(12 * 100vw / 400);
}
}
@media print,
screen and (width > 768px) {
a,
span {
height: 4rem;
}
}
} body.page-template-template-materials-thanks {
.message {
.btn-download {
display: grid;
place-items: center;
margin-inline: auto;
font-weight: 700;
color: white;
background-color: var(--red01);
border-radius: 100vmax;
}
}
@media screen and (width < 768px) {
.message {
p {
font-size: calc(15 * 100vw / 400);
line-height: calc(24 / 15);
}
.btn-download {
width: 100%;
height: calc(66 * 100vw / 400);
margin-top: calc(24 * 100vw / 400);
font-size: calc(15 * 100vw / 400);
line-height: calc(24 / 15);
}
}
}
@media print,
screen and (width > 768px) {
.message {
p {
font-size: 18px;
line-height: calc(24 / 18);
}
.btn-download {
width: calc(438 * 100% / 558);
height: 66px;
margin-top: 24px;
font-size: 15px;
line-height: calc(24 / 15);
}
}
}
}
@media screen and (max-width: 767px) {
#CampusCtaBannerWrapper { }
#CampusCtaBanner.campus-cv {
}
}