body:has( #headerCampus ){
@media screen and ( width <= 768px ){
padding-top : 0;
}
}
#campus-esinfo{
.esinfo_item__message.user-message{
p{
position : relative;
}
}
.more-link{
bottom : 0;
right : 0;
display : grid;
align-items : stretch;
justify-content : end;
padding : 0;
&::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{
grid-template-columns : calc( 119 * 100vw / 370 ) auto;
}
}
@media print , screen and ( width > 768px ){
.more-link{ }
}
} .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 );
}
}
}
@media ( hover : hover ){
.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;
}
}
} section#campus-esinfo{
.esinfo_item{
position : relative;
display : block;
background-color : #f8f8f8;
border-radius : calc( 20 * var( --remBase ) );
}
.head{
picture{
aspect-ratio : 1;
img{
object-fit : cover;
width : 100%;
height : 100%;
}
}
.type{
display : grid;
place-items : center;
height : calc( 35 * var( --remBase ) );
padding-inline : calc( 12 * var( --remBase ) );
font-weight : 700;
color : white;
background-color : var( --red02 );
border-radius : 100vmax;
}
ul{
padding-block : calc( 7.5 * var( --remBase ) );
padding-inline : calc( 16 * var( --remBase ) );
background-color : white;
border-radius : 100vmax;
outline : solid var( --red02 ) 1px;
outline-offset : -1px;
}
li{
font-weight : 700;
color : var( --red02 );
&:not( :last-child )::after{
display : inline-block;
width : 1px;
height : calc( 20 * var( --remBase ) );
margin-inline : calc( 12 * var( --remBase ) );
font-size : 0;
content : "";
background-color : var( --red02 );
}
}
h3{
font-weight : 700;
color : black;
}
}
.body{
position : relative;
height : 3lh;
overflow : hidden;
font-size : calc( 15 * var( --remBase ) );
line-height : calc( 24 / 15 );
p , span{
font-size : calc( 15 * var( --remBase ) );
line-height : calc( 24 / 15 );
}
p{
color : black;
> span{
position : absolute;
bottom : 0;
right : 0;
z-index : 1;
display : grid;
align-items : center;
justify-content : end;
&::before{
height : 100%;
font-size : 0;
content : "";
background-image : linear-gradient( to right , color-mix( in srgb , #f8f8f8 0% , transparent ) 0% , color-mix( in srgb , #f8f8f8 100% , transparent ) 100% );
}
span{
background-color : #f8f8f8;
}
}
}
}
.logins{
position : absolute;
bottom : 0;
left : 0;
width : 100%;
backdrop-filter : blur( calc( 2 * var( --remBase ) ) );
a{
display : grid;
place-items : center;
height : calc( 40 * var( --remBase ) );
margin-inline : auto;
font-size : calc( 12 * var( --remBase ) );
font-weight : 700;
border-radius : 100vmax;
outline-width : calc( 2 * var( --remBase ) );
outline-style : solid;
outline-color : var( --red02 );
outline-offset : calc( -2 * var( --remBase ) );
+ a{
margin-top : calc( 8 * var( --remBase ) );
}
}
.registrations{
color : var( --red02 );
background-color : white;
}
.sign_in{
color : white;
background-color : var( --red02 );
}
}
@media screen and ( width <= 768px ){
.esinfo_item{ grid-template-rows : auto calc( 10 * var( --remBase ) ) auto calc( 20 * var( --remBase ) ) auto;
grid-template-columns : auto auto calc( 4 * 100% / 320 ) calc( 12 * 100% / 320 ) 1fr;
align-items : start;
justify-content : start;
padding-block : calc( 20 * var( --remBase ) );
padding-inline : calc( 20 * 100% / 360 );
margin-top : calc( 12 * var( --remBase ) );
}
.head{
display : contents;
}
.type{
grid-row : 1;
grid-column : 1/3;
font-size : calc( 12 * var( --remBase ) );
line-height : calc( 19 / 12 );
}
ul{
display : -webkit-box;
grid-row : 1;
grid-column : 4/-1;
justify-self : start;
overflow : hidden;
font-size : calc( 12 * var( --remBase ) );
line-height : calc( 20 / 12 );
color : var( --red02 );
-webkit-line-clamp : 1;
-webkit-box-orient : vertical;
}
li{
display : inline;
font-size : calc( 12 * var( --remBase ) );
line-height : calc( 20 / 12 );
vertical-align : middle;
&:not( :last-child )::after{
vertical-align : middle;
}
}
picture{
grid-row : 3;
grid-column : 1;
align-self : center;
height : calc( 66 * var( --remBase ) );
}
h3{
grid-row : 3;
grid-column : 4/-1;
align-self : center;
font-size : calc( 16 * var( --remBase ) );
line-height : calc( 26 / 16 );
}
.body{
grid-row : 5;
grid-column : 1/-1;
font-weight : 500;
p > span{
grid-template-columns : calc( 119 * var( --remBase ) ) auto;
}
}
.logins{
padding-bottom : calc( 20 * var( --remBase ) );
a{
width : calc( 308 * 100% / 360 );
}
}
}
@media print , screen and ( width > 768px ){
.esinfo_item{
padding-inline : calc( 40 * 100% / 647 );
padding-top : calc( 36 * var( --remBase ) );
padding-bottom : calc( 24 * var( --remBase ) );
margin-top : calc( 32 * var( --remBase ) );
}
.head{
display : grid;
grid-template-rows : auto 1fr;
grid-template-columns : auto calc( 24 * 100% / 567 ) auto calc( 8 * 100% / 567 ) 1fr;
row-gap : calc( 10 * var( --remBase ) );
align-items : start;
justify-content : start;
picture{
grid-row : 1/-1;
grid-column : 1;
height : calc( 86 * var( --remBase ) );
}
.type{
grid-row : 1;
grid-column : 3;
font-size : calc( 14 * var( --remBase ) );
line-height : calc( 19 / 14 );
}
ul{
display : flex;
flex-wrap : wrap;
grid-row : 1;
grid-column : 5;
align-items : center;
justify-content : start;
justify-self : start;
}
li{
display : grid;
grid-auto-flow : column;
align-items : start;
justify-content : start;
font-size : calc( 14 * var( --remBase ) );
line-height : calc( 20 / 14 );
}
h3{
grid-row : 2;
grid-column : 3/-1;
font-size : calc( 20 * var( --remBase ) );
line-height : calc( 28 / 20 );
}
}
.body{
margin-top : calc( 32 * var( --remBase ) );
p > span{
grid-template-columns : calc( 70 * var( --remBase ) ) auto;
}
}
.logins{
padding-bottom : calc( 24 * var( --remBase ) );
a{
width : calc( 236 * 100% / 567 );
}
}
}
}
@media ( hover : hover ){
section#campus-esinfo{
.registrations:hover{
color : white;
background-color : var( --red02 );
}
.sign_in:hover{
color : var( --red02 );
background-color : white;
}
}
}
@media ( prefers-reduced-motion : no-preference ){
section#campus-esinfo .logins a{
transition : background .3s linear , color .3s linear;
}
} .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 );
}
}
} #campus-corner_corporate{
@media screen and ( width <= 768px ){
.corner_inner{
z-index : 3;
}
}
}