@charset "UTF-8";
 #confirm{
.title01::before{
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/contact/en.svg);
}
dt{
font-weight : 400;
}
button[type="submit"]{
position : relative;
z-index : 1;
display : grid;
place-items : center;
margin-inline : auto;
overflow : hidden;
font-weight : 500;
color : white;
border-radius : 100vmax;
outline-width : 1px;
outline-style : solid;
outline-color : transparent;
outline-offset : -1px;
&::before{
position : absolute;
inset : 0;
z-index : -1;
display : block;
font-size : 0;
content : "";
background-image : linear-gradient( to right , #00b1ac , #7dd261 );
}
}
.wpcf7-previous{
position : relative;
z-index : 1;
display : grid;
place-items : center;
margin-inline : auto;
overflow : hidden;
font-weight : 500;
color : #868686;
background-color : white;
border-radius : 100vmax;
outline-width : 1px;
outline-style : solid;
outline-color : #868686;
outline-offset : -1px;
}
@media screen and ( width <= 750px ){
padding-top : calc( 100 var( --remBase ) );
padding-bottom : calc( 108 var( --remBase ) );
.title01::before{
height : calc( 29 var( --remBase ) );
}
dl{
margin-top : calc( ( 56 - 5.25 - 5.25 ) var( --remBase ) );
}
dt , dd{
font-size : 1.6rem;
line-height : calc( 26.5 / 16 );
}
dd{
padding-bottom : calc( ( 26 - 5.25 ) var( --remBase ) );
padding-left : 1em;
margin-top : calc( ( 26 - 5.25 ) var( --remBase ) );
border-bottom : solid 1px #868686;
+ dt{
margin-top : calc( ( 36 - 5.25 ) var( --remBase ) );
}
}
.buttons{
margin-top : calc( ( 54 - 5.25 ) var( --remBase ) );
}
:where( .wpcf7-previous , button[type="submit"] ){
height : calc( 80 var( --remBase ) );
font-size : 1.6rem;
line-height : 1.75;
}
.wpcf7-previous{
width : calc( 210 var( --percentBase ) );
height : calc( 64 var( --remBase ) );
}
button[type="submit"]{
width : calc( 294 var( --percentBase ) );
margin-top : calc( 40 var( --remBase ) );
}
}
@media print , screen and ( width > 750px ){
padding-top : calc( 150 var( --remBase ) );
padding-bottom : calc( 200 var( --remBase ) );
.title01::before{
height : calc( 52 var( --remBase ) );
}
dl{
display : grid;
grid-template-columns : calc( 276 * 100% / 776 ) 1fr;
row-gap : calc( 24 var( --remBase ) );
align-items : start;
width : calc( 776 var( --percentBase ) );
margin-inline : auto;
margin-top : calc( ( 78 - 9.75 ) var( --remBase ) );
}
dt , dd{
font-size : 1.8rem;
line-height : calc( 26.5 / 18 );
}
.buttons{
display : grid;
grid-template-columns : repeat( 2 , calc( 410 var( --percentBase ) ) );
column-gap : calc( 40 var( --percentBase ) );
align-items : center;
justify-content : center;
margin-top : calc( ( 68 - 4.25 ) var( --remBase ) );
}
:where( .wpcf7-previous , button[type="submit"] ){
width : 100%;
height : calc( 80 var( --remBase ) );
font-size : 1.8rem;
line-height : 1.75;
}
}
}
@media ( hover : hover ){
.wpcf7-previous:hover{
opacity : .5;
}
#confirm button[type="submit"]:hover{
color : #64aeaa;
outline-color : #64aeaa;
&::before{
opacity : 0;
}
}
}
@media ( prefers-reduced-motion : no-preference ){
.wpcf7-previous{
transition : opacity var( --transitionBase );
}
#confirm button[type="submit"]{
transition : color var( --transitionBase ) , outline-color var( --transitionBase );
&::before{
transition : opacity var( --transitionBase );
}
}
}
#thanks{
.title01::before{
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/contact/en.svg);
}
p{
font-weight : 400;
a{
color : #233e87;
-webkit-text-decoration : underline;
text-decoration : underline;
}
}
@media screen and ( width <= 750px ){
min-height : calc( 100dvh - var( --headerHeight ) - calc( 70 var( --remBase ) ) );
padding-top : calc( 100 var( --remBase ) );
padding-bottom : calc( 108 var( --remBase ) );
.title01::before{
height : calc( 29 var( --remBase ) );
}
p{
margin-top : calc( ( 56 - 5.25 - 5.25 ) var( --remBase ) );
font-size : 1.6rem;
line-height : calc( 26.5 / 16 );
}
}
@media print , screen and ( width > 750px ){
min-height : calc( 100dvh - var( --headerHeight ) - calc( 40 var( --remBase ) ) );
padding-top : calc( 150 var( --remBase ) );
padding-bottom : calc( 200 var( --remBase ) );
.title01::before{
height : calc( 52 var( --remBase ) );
}
p{
width : calc( 776 var( --percentBase ) );
margin-inline : auto;
margin-top : calc( ( 78 - 9.75 ) var( --remBase ) );
font-size : 1.8rem;
line-height : calc( 26.5 / 18 );
}
}
}