@media screen and ( width <= 768px ){
:root{
--breakPoint : 400;
--remBase : 100vw / var( --breakPoint );
}
}
@media print , screen and ( width > 768px ){
:root{
--breakPoint : 1200;
--remBase : min( 1px , 100vw / var( --breakPoint ) );
}
}
:root{
--viewportBase : 100% / var( --breakPoint );
} @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% );
} a{
-webkit-text-decoration : none;
text-decoration : none;
} @media screen and ( width <= 768px ){
:root{
--headerCampusHeight : calc( 67 * var( --remBase ) );
}
}
@media print , screen and ( width > 768px ){
:root{
--headerCampusHeight : min( 157px , calc( 157 * var( --remBase ) ) );
}
} #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 ){
.is-pc{
display : none;
}
}
@media print , screen and ( width > 768px ){
:root{
--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;
}
}
} :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/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;
}
}
}
} .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;
}
}
} #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 );
} .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 );
}
}
} .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;
}
}
} .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/assets/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/assets/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;
}
} .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 );
}
}
}
}