@charset "UTF-8";
 .title01{
font-weight : 700;
color : var( --color02 );
text-align : center;
@media screen and ( width <= 780px ){
font-size : 2.2rem;
line-height : calc( 42 / 22 );
}
@media print , screen and ( width > 780px ){
font-size : 3.2rem;
line-height : calc( 42 / 32 );
}
} .more01{
position : relative;
display : grid;
grid-template-columns : auto auto;
align-items : center;
justify-content : end;
width : fit-content;
height : auto;
margin-left : auto;
font-weight : 800;
color : var( --color03 );
opacity : 1;
&::after{
display : block;
width : auto;
aspect-ratio : 19.6255/10.9316;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/recruit/ui/arrow/down01.svg);
filter : var( --filterColor03 );
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
}
&[aria-expanded="true"]{
&::after{
rotate : -180deg;
}
}
@media screen and ( width <= 780px ){
column-gap : calc( 4 var( --remBase ) );
font-size : 1.3rem;
&::after{
height : calc( 9.502 var( --remBase ) );
}
}
@media print , screen and ( width > 780px ){
column-gap : calc( 6 var( --remBase ) );
font-size : 1.6rem;
&::after{
height : calc( 10.9316 var( --remBase ) );
}
}
}
@media ( hover : hover ){
.more01:hover{
color : var( --color04 );
&::after{
filter : var( --filterColor04 );
}
}
}
@media ( prefers-reduced-motion : no-preference ){
.more01{
transition : color var( --transitionBase ) , opacity var( --transitionBase );
&::after{
transition : filter var( --transitionBase ) , rotate var( --transitionBase );
}
}
}
.moreContentsWrapper{
display : grid;
grid-template-columns : 1fr;
overflow : hidden;
&[hidden]{
display : grid;
}
&[aria-hidden="true"]{
grid-template-rows : 0fr;
}
&[aria-hidden="false"]{
grid-template-rows : 1fr;
}
> div{
overflow : hidden;
}
}
@media ( prefers-reduced-motion : no-preference ){
.moreContentsWrapper{
transition : grid-template-rows var( --transitionBase );
}
}
.more01-sp{
@media screen and ( width <= 780px ){
position : relative;
display : grid;
grid-template-columns : auto auto;
column-gap : calc( 4 var( --remBase ) );
align-items : center;
justify-content : end;
width : fit-content;
height : auto;
margin-left : auto;
font-size : 1.3rem;
font-weight : 800;
color : var( --color03 );
opacity : 1;
&::after{
display : block;
width : auto;
height : calc( 9.502 var( --remBase ) );
aspect-ratio : 19.6255/10.9316;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/recruit/ui/arrow/down01.svg);
filter : var( --filterColor03 );
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
}
&[aria-expanded="true"]{
&::after{
rotate : -180deg;
}
}
}
@media print , screen and ( width > 780px ){
display : none;
}
}
.moreContentsWrapper-sp{
@media screen and ( width <= 780px ){
display : grid;
grid-template-columns : 1fr;
overflow : hidden;
&[hidden]{
display : grid;
}
&[aria-hidden="true"]{
grid-template-rows : 0fr;
}
&[aria-hidden="false"]{
grid-template-rows : 1fr;
}
> div{
overflow : hidden;
}
}
}
@media ( prefers-reduced-motion : no-preference ){
.moreContentsWrapper-sp{
@media screen and ( width <= 780px ){
transition : grid-template-rows var( --transitionBase );
&::after{
transition : filter var( --transitionBase ) , rotate var( --transitionBase );
}
}
}
}
.link01{
position : relative;
z-index : 1;
display : grid;
place-items : center;
margin-inline : auto;
font-weight : 700;
color : white;
border-radius : 100vmax;
&::before , &::after{
position : absolute;
z-index : -1;
font-size : 0;
content : "";
border-radius : 100vmax;
}
&::before{
inset : 0;
background-image : var( --gradation01 );
opacity : 1;
}
&::after{
inset : 1px;
background-color : white;
opacity : 0;
}
@media screen and ( width <= 780px ){
width : calc( 220 var( --percentBase ) );
height : calc( 38 var( --remBase ) );
font-size : 1.4rem;
line-height : calc( 19.6 / 14 );
}
@media print , screen and ( width > 780px ){
width : calc( 220 var( --percentBase ) );
height : calc( 45 var( --remBase ) );
font-size : 1.6rem;
line-height : calc( 24.5 / 16 );
}
}
@media ( hover : hover ){
.link01:hover{
@media print , screen and ( width > 780px ){
color : var( --color03 );
&::after{
opacity : 1;
}
}
}
}
@media ( prefers-reduced-motion : no-preference ){
.link01{
@media print , screen and ( width > 780px ){
transition : color var( --transitionBase );
&::after{
transition : opacity var( --transitionBase );
}
}
}
}