@charset "UTF-8";
 .title01{
width : fit-content;
font-weight : 500;
-webkit-background-clip : text;
-webkit-text-fill-color : transparent;
@media screen and ( width <= 750px ){
font-size : 3.2rem;
line-height : 1.75;
background-image : linear-gradient( to right , #63aeaa , #99d069 );
}
@media print , screen and ( width > 750px ){
font-size : 5.2rem;
line-height : 1.75;
background-image : linear-gradient( to right , #00b1ac , #7dd261 );
}
}
:where( .title02 , .title02-blue ){
font-weight : 700;
}
:where( .title02 , .title02-blue ){
@media screen and ( width <= 750px ){
font-size : 2.6rem;
line-height : 1.75;
}
@media print , screen and ( width > 750px ){
font-size : 4.2rem;
line-height : 1.75;
}
}
.title02-blue{
color : #0db1ac;
> span{
display : block;
color : #0db1ac;
}
@media screen and ( width <= 750px ){
> span{
&:nth-of-type( 1 ){
font-size : 1.8rem;
line-height : 1.75;
}
&:nth-of-type( 2 ){
font-size : 2.6rem;
line-height : 1.75;
}
}
}
@media print , screen and ( width > 750px ){
> span{
&:nth-of-type( 1 ){
font-size : 3rem;
line-height : 1.75;
}
&:nth-of-type( 2 ){
font-size : 4.2rem;
line-height : 1.75;
}
}
}
} .link01{
position : relative;
z-index : 1;
display : grid;
align-content : center;
align-items : center;
justify-content : center;
margin-inline : auto;
overflow : hidden;
color : white;
text-align : center;
border-radius : 100vmax;
outline : solid 1px transparent;
outline-offset : -1px;
&::before{
position : absolute;
inset : 0;
z-index : -1;
font-size : 0;
content : "";
opacity : 1;
}
&::after{
position : absolute;
top : 50%;
display : block;
width : auto;
aspect-ratio : 9.959 / 18.5039;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/ui/arrow/right01.svg);
filter : var( --filterWhite );
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
translate : 0 -50%;
}
&:not( .blue ){
&::before{
background-image : linear-gradient( to right , #00b1ac , #7dd261 );
}
}
&.blue{
&::before{
background-image : linear-gradient( to right , #01badb , #3f90ee );
}
}
@media screen and ( width <= 750px ){
width : calc( 294 var( --remBase ) );
height : calc( 80 var( --remBase ) );
&:has( span ){
font-size : 1.6rem;
line-height : 1.75;
span{
font-size : 1.2rem;
line-height : 1.75;
}
}
&:not( :has( span ) ){
font-size : 2rem;
line-height : 1.75;
}
&::after{
right : calc( 30 * 100% / 294 );
height : calc( 18.5039 var( --remBase ) );
}
}
@media print , screen and ( width > 750px ){
grid-auto-flow : column;
width : calc( 410 var( --remBase ) );
height : calc( 80 var( --remBase ) );
&:has( span ){
font-size : 1.8rem;
line-height : 1.75;
span{
font-size : 1.4rem;
line-height : 1.75;
}
}
&:not( :has( span ) ){
font-size : 2.2rem;
line-height : 1.75;
}
&::after{
right : calc( 30 * 100% / 410 );
height : calc( 18.5039 var( --remBase ) );
}
}
}
@media ( hover : hover ){
.link01:hover{
color : #64aeaa;
background-color : white;
outline-color : #64aeaa;
&::before{
opacity : 0;
}
&::after{
filter : invert( 57% ) sepia( 86% ) saturate( 187% ) hue-rotate( 128deg ) brightness( 95% ) contrast( 87% );
}
}
}
@media ( prefers-reduced-motion : no-preference ){
.link01{
transition : outline-color var( --transitionBase ) , color var( --transitionBase );
&::before{
transition : opacity var( --transitionBase );
}
&::after{
transition : filter var( --transitionBase );
}
}
}