@charset "UTF-8";
@charset "UTF-8";

 :root{
--fontFamily : "Meiryo" , "Hiragino Kaku Gothic Pro" , "Hiragino Sans" , "Segoe UI" , "Helvetica Neue" , "Arial" , sans-serif;
}
@font-face{
font-family : Jost;
font-style : normal;
font-weight : 100 900;
font-optical-sizing : auto;
src : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/fonts/Jost/Jost-VariableFont_wght.woff2) format( "woff2" );
font-display : swap;
}
.jost{
font-family : Jost , sans-serif;
}
.arial{
font-family : Arial , "Helvetica Neue" , Helvetica , sans-serif;
} @media screen and ( width <= 780px ){
@property --breakPoint{
syntax : "<number>";
inherits : false;
initial-value : 390;
}
@property --wrapperSize{
syntax : "<number>";
inherits : false;
initial-value : 350;
}
@property --gutter{
syntax : "<number>";
inherits : false;
initial-value : 20;
}
}
@media print , screen and ( width > 780px ){
@property --breakPoint{
syntax : "<number>";
inherits : false;
initial-value : 1240 ;
}
@property --wrapperSize{
syntax : "<number>";
inherits : false;
initial-value : 1200;
}
@property --gutter{
syntax : "<number>";
inherits : false;
initial-value : 20;
}
}
@property --remBase{
syntax : "*";
inherits : false;
initial-value : * .1rem;
}
:root{
--percentBase : * 100% / var( --wrapperSize );
--viewportBase : * 100% / var( --breakPoint );
} @property --base{
syntax : "<color>";
inherits : false;
initial-value : #24282a;
}
@property --color02{
syntax : "<color>";
inherits : false;
initial-value : #6a6e71;
}
@property --color03{
syntax : "<color>";
inherits : false;
initial-value : #32bdd9;
}
@property --color04{
syntax : "<color>";
inherits : false;
initial-value : #00a4bb;
}
@property --color05{
syntax : "<color>";
inherits : false;
initial-value : #4b4b4b;
}
@property --color06{
syntax : "<color>";
inherits : false;
initial-value : #8f8f8f;
}
@property --color07{
syntax : "<color>";
inherits : false;
initial-value : #e6f9fe;
} @property --filterWhite{
syntax : "*";
inherits : false;
initial-value : brightness( 0 ) invert( 1 );
}
@property --filterBase{
syntax : "*";
inherits : false;
initial-value : invert( 13% ) sepia( 8% ) saturate( 582% ) hue-rotate( 155deg ) brightness( 101% ) contrast( 93% );
}
@property --filterColor02{
syntax : "*";
inherits : false;
initial-value : invert( 45% ) sepia( 5% ) saturate( 344% ) hue-rotate( 163deg ) brightness( 92% ) contrast( 86% );
}
@property --filterColor03{
syntax : "*";
inherits : false;
initial-value : invert( 62% ) sepia( 82% ) saturate( 422% ) hue-rotate( 145deg ) brightness( 91% ) contrast( 86% );
}
@property --filterColor04{
syntax : "*";
inherits : false;
initial-value : invert( 41% ) sepia( 24% ) saturate( 5977% ) hue-rotate( 160deg ) brightness( 101% ) contrast( 101% );
}
@property --filterColor05{
syntax : "*";
inherits : false;
initial-value : invert( 22% ) sepia( 0% ) saturate( 4% ) hue-rotate( 163deg ) brightness( 104% ) contrast( 76% );
}
@property --filterColor06{
syntax : "*";
inherits : false;
initial-value : invert( 57% ) sepia( 0% ) saturate( 0% ) hue-rotate( 150deg ) brightness( 99% ) contrast( 101% );
} @property --gradation01{
syntax : "*";
inherits : false;
initial-value : linear-gradient( to right , #00b1ac , #7dd261 );
} @media screen and ( width <= 780px ){
:root{
--min : 10px;
--max : 20rem;
}
}
@media print , screen and ( width > 780px ){
:root{
--min : 10px;
--max : 20rem;
}
} @property --easeInSine{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .47 ,  , .745 , .715 );
}
@property --easeOutSine{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .39 , .575 , .565 , 1 );
}
@property --easeInOutSine{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .445 , .05 , .55 , .95 );
}
@property --easeInQuad{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .55 , .085 , .68 , .53 );
}
@property --easeOutQuad{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .25 , .46 , .45 , .94 );
}
@property --easeInOutQuad{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .455 , .03 , .515 , .955 );
}
@property --easeInCubic{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .55 , .055 , .675 , .19 );
}
@property --easeOutCubic{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .215 , .61 , .355 , 1 );
}
@property --easeInOutCubic{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .645 , .045 , .355 , 1 );
}
@property --easeInQuart{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .895 , .03 , .685 , .22 );
}
@property --easeOutQuart{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .165 , .84 , .44 , 1 );
}
@property --easeInOutQuart{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .77 ,  , .175 , 1 );
}
@property --easeInQuint{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .755 , .05 , .855 , .06 );
}
@property --easeOutQuint{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .23 , 1 , .32 , 1 );
}
@property --easeInOutQuint{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .86 ,  , .07 , 1 );
}
@property --easeInExpo{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .95 , .05 , .795 , .035 );
}
@property --easeOutExpo{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .19 , 1 , .22 , 1 );
}
@property --easeInOutExpo{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( 1 ,  ,  , 1 );
}
@property --easeInCirc{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .6 , .04 , .98 , .335 );
}
@property --easeOutCirc{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .075 , .82 , .165 , 1 );
}
@property --easeInOutCirc{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .785 , .135 , .15 , .86 );
}
@property --easeInBack{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .6 , -.28 , .735 , .045 );
}
@property --easeOutBack{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .175 , .885 , .32 , 1.275 );
}
@property --easeInOutBack{
syntax : "*";
inherits : false;
initial-value : cubic-bezier( .68 , -.55 , .265 , 1.55 );
}
@property --transitionAppearance{
syntax : "*";
inherits : false;
initial-value : .3s ease-out;
}
@property --transitionBoundsTiming{
syntax : "*";
inherits : false;
initial-value : linear( 0 , .009 , .035 2.1% , .141 , .281 6.7% , .723 12.9% , .938 16.7% , 1.017 , 1.077 , 1.121 , 1.149 24.3% , 1.159 , 1.163 , 1.161 , 1.154 29.9% , 1.129 32.8% , 1.051 39.6% , 1.017 43.1% , .991 , .977 51% , .974 53.8% , .975 57.1% , .997 69.8% , 1.003 76.9% , 1.004 83.8% , 1 );
}
:root{
--transitionBase : 1s var( --easeOutExpo );
--transitionBounds : 1s var( --transitionBoundsTiming );
} *{
padding : 0;
margin : 0;
word-break : break-all;
}
* , *::before , *::after{
box-sizing : border-box;
}
*:not(fieldset, progress, meter){
background-repeat : no-repeat;
background-origin : border-box;
border-style : solid;
border-width : 0;
}
:root{
color-scheme : light ! important;
}
:where( html ){
block-size : 100%;
-webkit-text-size-adjust : none;
tab-size : 2;
}
@media ( prefers-reduced-motion : no-preference ){
html{
scroll-behavior : smooth;
}
}
:where( html:has( dialog[open] ) ){
overflow : clip;
}
:where( body ){
overflow-x : clip;
overflow-y : auto;
font-family : var( --fontFamily );
font-weight : 400;
font-feature-settings : "palt" on;
font-optical-sizing : auto;
line-height : 1;
color : var( --base );
overflow-wrap : anywhere;
text-rendering : optimizeSpeed;
min-block-size : 100%;
line-break : strict;
}
main{
overflow-x : clip;
}
:where( svg, video, canvas, audio, iframe, embed, object ){
display : block;
}
:where( img, svg, video ){
max-width : inherit;
font-size : 0;
vertical-align : top;
inline-size : auto;
}
:where( img ){
image-rendering : -webkit-optimize-contrast;
}
:where( svg ){
fill : currentColor;
stroke : none;
}
:where( svg:not( [fill] ) ){
fill : none;
stroke : currentColor;
stroke-linecap : round;
stroke-linejoin : round;
}
:where( svg:not( [width] ) ){
inline-size : 5rem;
}
:where( input, button, textarea, select , input[type="file"]::-webkit-file-upload-button ){
font : inherit;
font-size : inherit;
color : inherit;
letter-spacing : inherit;
outline : none;
}
:where( p, h1, h2, h3, h4, h5, h6 ){
overflow-wrap : break-word;
}
:where( p, h1, h2, h3, h4, h5, h6 , a ){
&:has( > img:only-child ){
font-size : 0;
line-height : 1;
}
}
:where( ul, ol ){
list-style : none;
}
:where( a ){
color : var( --base );
-webkit-text-decoration : none;
text-decoration : none;
text-underline-offset : calc( ( 1lh - 1em ) / 2 );
touch-action : manipulation;
cursor : pointer;
text-decoration-skip-ink : auto;
}
:where( fieldset ){
border : 0;
min-inline-size : auto;
}
legend{
float : none;
width : auto;
font-size : 100%;
white-space : normal;
}
:where( button , [type="button"] , [type="reset"] , [type="submit"] ){
touch-action : manipulation;
}
:where( button ){
background-color : transparent;
}
:where( button, input, label[for], select, summary, textarea, [tabindex]:not( [tabindex*="-"] ) ){
touch-action : manipulation;
cursor : pointer;
}
:where( :disabled ){
cursor : not-allowed;
}
:where( label:has( > input:disabled ), label:has( + input:disabled ) ){
cursor : not-allowed;
}
:where( button, button[type], input[type="button"], input[type="submit"], input[type="reset"],input[type="file"]::-webkit-file-upload-button,input[type="file"]::file-selector-button ){
-webkit-tap-highlight-color : transparent;
-webkit-touch-callout : none;
user-select : none;
}
:where( select ){
appearance : none;
}
:where( table ){
border-collapse : collapse;
}
:where( picture ){
display : block;
font-size : 0;
}
:where( em,dfn ){
font-style : normal;
}
:where( dialog , [popover] ){
inset : unset;
max-width : unset;
max-width : 100%;
max-height : unset;
max-height : 100%;
color : inherit;
background : none;
border : none;
}
:where( dialog:not( [open] ), [popover]:not( :popover-open ) ){
display : none;
}
:where( summary  ){
display : block;
list-style : none;
}
:where( summary  ){
&::-webkit-details-marker{
display : none;
}
}
:where( address ){
font-style : normal;
}
@view-transition{
navigation : auto;
} @media print{
body{
width : 100%;
overflow-x : hidden;
}
@page{
margin : .5cm;
margin-top : .4cm;
size : a4 portrait;
}
.no-print{
display : none;
}
}
 @media screen and ( width <= 780px ){
:root{
font-size : calc( 10 * 100vw / var( --breakPoint ) );
}
}
@media screen and ( 780px < width < 1240px ){
:root{
font-size : calc( 10 * 100vw / var( --breakPoint ) );
}
}
@media print , screen and ( width >= 1240px ){
:root{
font-size : 10px;
}
}
:root{
@media screen and ( width <= 780px ){
--headerHeight : calc( 88 var( --remBase ) );
}
@media print , screen and ( width > 780px ){
--headerHeight : calc( 114 var( --remBase ) );
}
}
html{
scroll-padding-top : var( --headerHeight );
}
body{
position : relative;
padding-top : var( --headerHeight );
font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
} .container{
@media screen and ( width <= 780px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 780px ){
width : min( 100% , calc( var( --breakPoint ) * 1px ) );
padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) var( --viewportBase ) ) );
margin-inline : auto;
}
}
.container-sp{
@media screen and ( width <= 780px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
}
.container-pc{
@media print , screen and ( width > 780px ){
width : min( 100% , calc( var( --breakPoint ) * 1px ) );
padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) var( --viewportBase ) ) );
margin-inline : auto;
}
}
.gridContainer{
display : grid;
grid-auto-flow : column;
row-gap : 0;
> *{
grid-column : 2;
}
.fluid{
grid-column : 1/-1;
}
.left-start{
grid-column : 1/3;
}
.right-end{
grid-column : 2/-1;
}
@media screen and ( width <= 780px ){
grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
.fluid-sp{
grid-column : 1/-1;
}
.left-start-sp{
grid-column : 1/3;
}
.right-end-sp{
grid-column : 2/-1;
}
}
@media print , screen and ( width > 780px ){
grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
.fluid-pc{
grid-column : 1/-1;
}
.left-start-pc{
grid-column : 1/3;
}
.right-end-pc{
grid-column : 2/-1;
}
}
}
.gridContainer-sp{
@media screen and ( width <= 780px ){
display : grid;
grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
grid-auto-flow : column;
row-gap : 0;
> *:not( .fluid-sp , .right-end-sp ){
grid-column : 2;
}
.fluid-sp{
grid-column : 1/-1;
}
.left-start-sp{
grid-column : 1/3;
}
.right-end-sp{
grid-column : 2/-1;
}
}
}
.gridContainer-pc{
@media print , screen and ( width >= 1240px ){
display : grid;
grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
grid-auto-flow : column;
row-gap : 0;
> *:not( .fluid-pc , .right-end-pc ){
grid-column : 2;
}
.fluid-pc{
grid-column : 1/-1;
}
.left-start-pc{
grid-column : 1/3;
}
.right-end-pc{
grid-column : 2/-1;
}
}
} .wrap{
@media screen and ( width <= 780px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 780px ){
padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
}
}
.wrap-sp{
@media screen and ( width <= 780px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
}
.wrap-pc{
@media print , screen and ( width > 780px ){
padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
}
}
.wrap02{
@media screen and ( width <= 780px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 780px ){
padding-inline : max( calc( 85 var( --viewportBase ) ) , calc( ( 100% - 1030px ) / 2 ) );
}
} .is-sp{
@media print , screen and ( width > 780px ){
display : none;
}
}
.is-pc{
@media screen and ( width <= 780px ){
display : none;
}
}
.is-tb{
@media screen and ( width <= 780px ){
display : none;
}
@media print , screen and ( width >= 1240px ){
display : none;
}
} .visuallyhidden{
position : absolute;
width : 1px;
height : 1px;
overflow : hidden;
clip : rect( 0 0 0 0 );
clip-path : inset( 50% );
white-space : nowrap;
}
[hidden]{
display : none;
} .full{
width : 100%;
height : auto;
}
.full-sp{
@media screen and ( width <= 780px ){
width : 100%;
height : auto;
}
}
.full-pc{
@media print , screen and ( width > 780px ){
width : 100%;
height : auto;
}
}
[data-before]::before{
white-space : pre;
content : attr( data-before );
}
[data-after]::after{
white-space : pre;
content : attr( data-after );
}
[data-before-sp]::before{
@media screen and ( width <= 780px ){
white-space : pre;
content : attr( data-before-sp );
}
}
[data-both]{
&::before , &::after{
white-space : pre;
content : attr( data-both );
}
}
@media screen and ( width <= 780px ){
[data-after-sp]::after{
white-space : pre;
content : attr( data-after-sp );
}
[data-both-sp]{
&::before , &::after{
white-space : pre;
content : attr( data-both );
}
}
}
@media print , screen and ( width > 780px ){
[data-before-pc]::before{
white-space : pre;
content : attr( data-before-pc );
}
[data-after-pc]::after{
white-space : pre;
content : attr( data-after-pc );
}
[data-both-pb]{
&::before , &::after{
white-space : pre;
content : attr( data-both );
}
}
} br.sp-space{
@media screen and ( width <= 780px ){
content : "";
&::after{
content : " ";
}
}
}
br.pc-space{
@media print , screen and ( width > 780px ){
content : "";
&::after{
content : " ";
}
}
}
br.sp-spaceEm{
@media screen and ( width <= 780px ){
content : "";
&::after{
content : "　";
}
}
}
br.pc-spaceEm{
@media print , screen and ( width > 780px ){
content : "";
&::after{
content : "　";
}
}
} .lh-up{
margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
@media screen and ( width <= 780px ){
margin-top : calc( ( 1em - 1lh )  / 2 );
}
}
.lh-up-pc{
@media print , screen and ( width > 780px ){
margin-top : calc( ( 1em - 1lh )  / 2 );
}
} #header{
position : fixed;
top : 0;
left : 0;
z-index : 10;
display : grid;
align-items : center;
width : 100%;
height : var( --headerHeight );
background-color : white;
box-shadow : 0 calc( 4 var( --remBase ) ) calc( 8 var( --remBase ) ) color-mix( in sRGB , var( --color06 ) 70% , transparent );
.logo{
grid-row : 1;
grid-column : 1;
width : fit-content;
font-weight : 700;
}
@media screen and ( width <= 780px ){
grid-template-columns : auto calc( 88 * 100% / 284 );
justify-content : space-between;
padding-left : calc( 18 var( --viewportBase ) );
padding-right : calc( 88 var( --viewportBase ) );
.logo{
font-size : 1.7rem;
line-height : calc( 23 / 17 );
span{
display : block;
}
}
}
@media print , screen and ( width > 780px ){
position : fixed;
top : 0;
left : 0;
z-index : 10;
grid-template-columns : auto 1fr auto calc( 30 var( --wrapperSize ) ) calc( 180 var( --percentBase ) );
width : 100%;
.logo{
display : grid;
grid-auto-flow : column;
column-gap : calc( 25 var( --remBase ) );
align-items : center;
justify-content : start;
font-size : 2.4rem;
line-height : 1.75;
}
}
}
#headerApply{
position : relative;
z-index : 1;
display : grid;
width : 100%;
color : white;
@media screen and ( width <= 780px ){
grid-template-rows : calc( 32 var( --remBase ) ) auto;
grid-column : 2;
row-gap : calc( ( 10 - 4.5 ) var( --remBase ) );
align-items : start;
justify-items : center;
height : 100%;
padding-top : calc( 20 var( --remBase ) );
font-size : 1.2rem;
font-weight : 700;
line-height : 1.75;
background-image : var( --gradation01 );
&::before{
display : block;
grid-row : 1;
width : auto;
height : 100%;
aspect-ratio : 43/32;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/recruit/ui/icon/email01.svg);
filter : var( --filterWhite );
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
}
}
@media print , screen and ( width > 780px ){
grid-row : 1;
grid-column : 5;
grid-auto-flow : column;
align-items : center;
justify-content : center;
height : calc( 45 var( --remBase ) );
font-size : 1.4rem;
line-height : 1.75;
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 ( hover : hover ){
#headerApply:hover{
@media print , screen and ( width > 780px ){
color : var( --color03 );
&::after{
opacity : 1;
}
}
}
}
@media ( prefers-reduced-motion : no-preference ){
#headerApply{
@media print , screen and ( width > 780px ){
transition : color var( --transitionBase );
&::after{
transition : opacity var( --transitionBase );
}
}
}
}
#menuBtn{
@media screen and ( width <= 780px ){
position : fixed;
top : 0;
right : 0;
z-index : 12;
width : calc( 88 var( --viewportBase ) );
height : calc( 88 var( --remBase ) );
border-color : transparent;
border-style : solid;
border-block : solid calc( 28 var( --remBase ) ) transparent;
border-inline : solid calc( 20.5 var( --remBase ) ) transparent;
span{
position : absolute;
left : 0;
display : block;
width : 100%;
height : 100%;
transition : all .4s;
&:nth-of-type( 1 ){
top : 0;
}
&:nth-of-type( 4 ){
bottom : 0;
}
}
&[aria-expanded="true"]{
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{
height : calc( 3 var( --remBase ) );
background-image : var( --gradation01 );
border-radius : 100vmax;
&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
top : calc( 14.5 var( --remBase ) );
}
}
}
}
#nav{
@media screen and ( width <= 780px ){
position : fixed;
top : var( --headerHeight );
left : 0;
z-index : 11;
display : grid;
grid-template-columns : 1fr;
width : 100%;
overflow : hidden;
background-color : white;
box-shadow : 0 calc( 4 var( --remBase ) ) calc( 8 var( --remBase ) ) color-mix( in sRGB , var( --color06 ) 70% , transparent );
body:has( &:not( [inert] ) ){
overflow : hidden;
}
&[inert]{
grid-template-rows : 0fr;
}
&:not( [inert] ){
grid-template-rows : 1fr;
}
> div{
overflow : hidden;
}
.scroll{
padding-inline : calc( 30 var( --viewportBase ) );
}
&:not( [inert] ){
.scroll{
padding-top : calc( 28 var( --remBase ) );
padding-bottom : calc( 160 var( --remBase ) );
}
}
}
@media print , screen and ( width > 780px ){
grid-row : 1;
grid-column : 3;
justify-self : end;
.scroll{
display : contents;
}
}
}
#nav{
@media screen and ( width <= 780px ){
@media ( prefers-reduced-motion : no-preference ){
transition : grid-template-rows var( --transitionBase );
> div{
transition : padding var( --transitionBase );
}
}
}
}
#navGlobal{
a{
font-weight : 700;
}
@media screen and ( width <= 780px ){
a{
position : relative;
z-index : 1;
display : grid;
place-items : center;
width : 100%;
height : calc( 80 var( --remBase ) );
font-size : 2rem;
line-height : calc( 24.5 / 20 );
border-radius : 100vmax;
&::before{
position : absolute;
inset : 0;
z-index : -1;
content : "";
background-image : var( --gradation01 );
border-radius : 100vmax;
opacity : 0;
}
&:active , &:hover{
&::before{
opacity : .25;
}
}
}
}
@media print , screen and ( width > 780px ){
display : grid;
grid-auto-flow : column;
align-items : center;
justify-content : end;
a{
position : relative;
display : block;
padding-inline : calc( 22 var( --remBase ) );
font-size : 1.4rem;
line-height : 1.75;
&::after{
position : absolute;
bottom : calc( -8 var( --remBase ) );
left : 50%;
width : auto;
height : calc( 5 var( --remBase ) );
aspect-ratio : 18/5;
content : "";
background-image : var( --gradation01 );
border-radius : 100vmax;
opacity : 0;
translate : -50% 0;
}
&[aria-current="page"]{
&::after{
opacity : 1;
}
}
&:not( [aria-current="page"] ){
color : var( --color06 );
}
}
}
}
@media ( hover : hover ){
@media print , screen and ( width > 780px ){
#navGlobal:hover{
a:hover{
color : var( --base );
&::after{
opacity : 1;
}
}
a:not( :hover ){
color : var( --color06 );
&::after{
opacity : 0;
}
}
}
}
}
@media ( prefers-reduced-motion : no-preference ){
@media print , screen and ( width > 780px ){
#navGlobal a{
transition : color var( --transitionBase );
&::after{
transition : opacity var( --transitionBase );
}
}
}
}
#subLinks{
border-top : solid 1px #e4e4e4;
> a{
font-weight : 700;
}
ul{
display : grid;
grid-auto-flow : column;
}
img{
height : calc( 22 var( --remBase ) );
}
@media screen and ( width <= 780px ){
padding-top : calc( ( 58 - 27.75 ) var( --remBase ) );
margin-top : calc( 30 var( --remBase ) );
> a{
position : relative;
z-index : 1;
display : grid;
place-items : center;
width : 100%;
height : calc( 80 var( --remBase ) );
font-size : 2rem;
line-height : calc( 24.5 / 20 );
border-radius : 100vmax;
&::before{
position : absolute;
inset : 0;
z-index : -1;
content : "";
background-image : var( --gradation01 );
border-radius : 100vmax;
opacity : 0;
}
&:active , &:hover{
&::before{
opacity : .25;
}
}
}
ul{
column-gap : calc( 48 * 100% / 330 );
justify-content : center;
margin-top : calc( ( 76 - 27.75 ) var( --remBase ) );
}
}
} #breadcrumb{
display : grid;
align-items : start;
justify-content : start;
color : var( --color06 );
ol{
display : flex;
flex-wrap : wrap;
}
li:not( :last-child )::after{
white-space : pre;
content : " > ";
}
a{
color : var( --color06 );
}
@media screen and ( width <= 780px ){
padding-top : calc( ( 40 - 2.9 ) var( --remBase ) );
&:has( + :where( #title01 , #title02 ) ){
height : calc( ( 100 - 5.7 ) var( --remBase ) );
}
li{
font-size : 1.1rem;
line-height : calc( 16.8 / 11 );
}
}
@media print , screen and ( width > 780px ){
padding-top : calc( ( 40 - 5 ) var( --remBase ) );
&:has( + :where( #title01 , #title02 ) ){
height : calc( ( 80 - 12 ) var( --remBase ) );
}
li{
font-size : 1.4rem;
line-height : calc( 24 / 14 );
}
}
} #title01{
font-weight : 700;
text-align : center;
&::before{
display : block;
font-family : Arial , "Helvetica Neue" , Helvetica , sans-serif;
color : var( --color02 );
}
@media screen and ( width <= 780px ){
font-size : 1.8rem;
line-height : calc( 29.4 / 18 );
&::before{
margin-bottom : calc( ( 33 - 8.25 - 5.7 ) var( --remBase ) );
font-size : 2.2rem;
line-height : 1.75;
}
}
@media print , screen and ( width > 780px ){
font-size : 2.4rem;
line-height : 1.75;
&::before{
margin-bottom : calc( ( 30 - 12 - 9 ) var( --remBase ) );
font-size : 3.2rem;
line-height : 1.75;
}
}
}
#title02{
font-weight : 700;
&::before{
display : block;
font-family : Arial , "Helvetica Neue" , Helvetica , sans-serif;
color : var( --color02 );
text-align : center;
}
@media screen and ( width <= 780px ){
font-size : 1.8rem;
line-height : calc( 29.4 / 18 );
text-align : center;
&::before{
margin-bottom : calc( ( 29 - 8.25 - 5.7 ) var( --remBase ) );
font-size : 2.2rem;
line-height : 1.75;
}
}
@media print , screen and ( width > 780px ){
font-size : 3.6rem;
line-height : calc( 42 / 36 );
&::before{
margin-bottom : calc( ( 100 - 12 - 3 ) var( --remBase ) );
font-size : 3.2rem;
line-height : 1.75;
}
}
}