@charset "UTF-8";
 @media screen and ( width <= 750px ){
:root{
font-size : calc( 10 * 100vw / var( --breakPoint ) );
}
}
@media screen and ( 750px < width < 1440px ){
:root{
font-size : calc( 10 * 100vw / var( --breakPoint ) );
}
}
@media print , screen and ( width >= 1440px ){
:root{
font-size : 10px;
}
}
:root{
@media screen and ( width <= 750px ){
--headerHeight : calc( 60 var( --remBase ) );
}
@media print , screen and ( width > 750px ){
--headerHeight : calc( 100 var( --remBase ) );
}
}
html{
scroll-padding-top : var( --headerHeight );
}
body{
position : relative;
@media screen and ( width <= 750px ){
padding-top : var( --headerHeight );
font-size : clamp( var( --min ) , 2rem , var( --max ) );
}
@media print , screen and ( width > 750px ){
padding-top : var( --headerHeight );
font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
}
} .container{
@media screen and ( width <= 750px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 750px ){
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;
}
@media screen and ( width <= 750px ){
grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 750px ){
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 ) );
}
}
.gridContainer-sp{
@media screen and ( width <= 750px ){
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;
}
.right-end-sp{
grid-column : 2/-1;
}
}
}
.gridContainer-pc{
@media print , screen and ( width >= 1440px ){
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;
}
.right-end-pc{
grid-column : 2/-1;
}
}
} .wrap{
@media screen and ( width <= 750px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 750px ){
padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
}
}
.wrap-sp{
@media screen and ( width <= 750px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
}
.wrap-pc{
@media print , screen and ( width > 750px ){
padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
}
}
.wrap-left{
@media screen and ( width <= 750px ){
width : 100%;
padding-left : calc( var( --gutter ) var( --viewportBase ) );
.wrap-right , .wrap-right-sp{
padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
}
}
@media print , screen and ( width > 750px ){
padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
&.wrap-right-pc{
padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
}
.wrap-right , .wrap-right-pc{
padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
}
}
}
.wrap-left-sp{
@media screen and ( width <= 750px ){
width : 100%;
padding-left : calc( var( --gutter ) var( --viewportBase ) );
.wrap-right , .wrap-right-sp{
padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
}
}
}
.wrap-right{
@media screen and ( width <= 750px ){
width : 100%;
padding-right : calc( var( --gutter ) var( --viewportBase ) );
.wrap-left , .wrap-left-sp{
padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
}
}
@media print , screen and ( width > 750px ){
padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
&.wrap-left-pc{
padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
}
.wrap-left , .wrap-left-pc{
padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
}
}
}
.wrap-right-sp{
@media screen and ( width <= 750px ){
width : 100%;
padding-right : calc( var( --gutter ) var( --viewportBase ) );
.wrap-left , .wrap-left-sp{
padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
}
}
}
.wrap02{
@media screen and ( width <= 750px ){
width : 100%;
padding-inline : calc( var( --gutter ) var( --viewportBase ) );
}
@media print , screen and ( width > 750px ){
padding-inline : max( calc( 140 var( --viewportBase ) ) , calc( ( 100% - 1160px ) / 2 ) );
}
} .is-sp{
@media print , screen and ( width > 750px ){
display : none;
}
}
.is-pc{
@media screen and ( width <= 750px ){
display : none;
}
}
.is-tb{
@media screen and ( width <= 750px ){
display : none;
}
@media print , screen and ( width >= 1440px ){
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 <= 750px ){
width : 100%;
height : auto;
}
}
.full-pc{
@media print , screen and ( width > 750px ){
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 <= 750px ){
white-space : pre;
content : attr( data-before-sp );
}
}
[data-both]{
&::before , &::after{
white-space : pre;
content : attr( data-both );
}
}
@media screen and ( width <= 750px ){
[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 > 750px ){
[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 <= 750px ){
content : "";
&::after{
content : " ";
}
}
}
br.pc-space{
@media print , screen and ( width > 750px ){
content : "";
&::after{
content : " ";
}
}
}
br.sp-spaceEm{
@media screen and ( width <= 750px ){
content : "";
&::after{
content : "　";
}
}
}
br.pc-spaceEm{
@media print , screen and ( width > 750px ){
content : "";
&::after{
content : "　";
}
}
} .lh-up{
margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
@media screen and ( width <= 750px ){
margin-top : calc( ( 1em - 1lh )  / 2 );
}
}
.lh-up-pc{
@media print , screen and ( width > 750px ){
margin-top : calc( ( 1em - 1lh )  / 2 );
}
} body:not( :has( #nav[inert] ) ){
@media screen and ( width <= 750px ){
&::before{
position : absolute;
inset : 0;
z-index : 9;
content : "";
background-color : color-mix( in sRGB , black 30% , transparent );
}
#main{
&::before{
opacity : 0;
}
}
#header{
background-color : white;
}
}
}
#main{
&::before{
position : absolute;
top : 0;
left : 0;
z-index : -1;
display : block;
width : auto;
aspect-ratio : 475.457/466;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/header/bg.svg);
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
}
@media screen and ( width <= 750px ){
&::before{
height : calc( 268.377 var( --remBase ) );
}
}
@media print , screen and ( width > 750px ){
&::before{
height : calc( 466 var( --remBase ) );
}
}
}
@media ( prefers-reduced-motion : no-preference ){
@media screen and ( width <= 750px ){
#main::before{
transition : opacity var( --transitionBase );
}
#header{
transition : background-color var( --transitionBase );
}
}
} #header{
position : fixed;
top : 0;
left : 0;
z-index : 10;
display : grid;
align-items : center;
width : 100%;
height : var( --headerHeight );
background-color : white;
&.is-top{
background-color : transparent;
}
&:not( .is-top ){
background-color : white;
}
.logo{
grid-row : 1;
}
@media screen and ( width <= 750px ){
grid-template-columns : auto 1fr auto;
padding-left : calc( 10 var( --viewportBase ) );
padding-right : calc( 70 var( --viewportBase ) );
.logo{
grid-column : 1;
img{
height : calc( 39.9286 var( --remBase ) );
}
}
}
@media print , screen and ( width > 750px ){
position : fixed;
top : 0;
left : 0;
z-index : 10;
grid-template-columns : auto auto auto;
grid-template-columns : calc( 28 var( --viewportBase ) ) auto 1fr auto auto calc( 42 var( --viewportBase ) );
width : 100%;
.logo{
grid-column : 2;
img{
height : calc( 61.3916 var( --remBase ) );
}
}
}
}
#header.io{
&.is-top{
position : absolute;
translate : 0 0;
}
&:not( .is-top ){
position : fixed;
}
&:not(.is-top, .is-fixed){
translate : 0 -100%;
}
&.is-down:not(.is-top, .is-fixed){
position : absolute;
}
}
@media ( prefers-reduced-motion : no-preference ){
#header.io:not( .is-top ){
transition : translate var( --transitionBase ) , background-color var( --transitionBase );
}
}
#nav{
@media screen and ( width <= 750px ){
position : fixed;
top : var( --headerHeight );
left : 0;
z-index : 11;
display : grid;
grid-template-columns : 1fr;
width : 100%;
overflow : hidden;
background-color : white;
body:has( &:not( [inert] ) ){
overflow : hidden;
}
&[inert]{
grid-template-rows : 0fr;
}
&:not( [inert] ){
grid-template-rows : 1fr;
}
> div{
overflow : hidden;
}
.scroll{
padding-inline : calc( 40 var( --viewportBase ) );
}
&:not( [inert] ){
.scroll{
padding-top : calc( 20 var( --remBase ) );
padding-bottom : var( --headerHeight );
}
}
}
@media print , screen and ( width > 750px ){
grid-row : 1;
grid-column : 4;
}
}
#nav{
@media screen and ( width <= 750px ){
@media ( prefers-reduced-motion : no-preference ){
transition : grid-template-rows var( --transitionBase );
> div{
transition : padding var( --transitionBase );
}
}
}
}
#navGlobal{
a{
font-size : 2rem;
line-height : 1.75;
}
@media screen and ( width <= 750px ){
li{
border-bottom : solid 1px #949494;
&:first-child{
border-top : solid 1px #949494;
}
}
a{
display : grid;
align-items : center;
height : calc( 54 var( --remBase ) );
padding-inline : calc( 8 * 100% / 295 );
}
}
@media print , screen and ( width > 750px ){
display : grid;
grid-auto-flow : column;
align-items : center;
a{
padding-inline : 0.7em;
}
}
}
@media ( hover : hover ){
#navGlobal a:hover{
color : var( --accent );
}
}
@media ( prefers-reduced-motion : no-preference ){
#navGlobal a{
transition : color var( --transitionBase );
}
}
#navLang{
grid-row : 1;
> button{
display : grid;
grid-auto-flow : column;
align-items : center;
justify-content : start;
&::before{
display : block;
width : auto;
aspect-ratio : 1;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/ui/icon/globa.svg);
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
}
}
@media screen and ( width <= 750px ){
grid-column : 3;
> button{
column-gap : calc( 8 var( --remBase ) );
font-size : 1.2rem;
line-height : calc( 26.5 / 12 );
&::before{
height : calc( 14 var( --remBase ) );
}
}
}
@media print , screen and ( width > 750px ){
display : grid;
grid-column : 5;
align-items : center;
justify-content : start;
height : calc( 40 var( --remBase ) );
padding-left : calc( 20 var( --remBase ) );
margin-left : calc( 4 var( --remBase ) );
border-left : solid 1px var( --base );
> button{
column-gap : calc( 8 var( --remBase ) );
font-size : 1.6rem;
line-height : calc( 26.5 / 16 );
&::before{
height : calc( 16.6124 var( --remBase ) );
}
}
}
}
#menuBtn{
@media screen and ( width <= 750px ){
position : fixed;
top : calc( 21 var( --remBase ) );
right : calc( 20 var( --viewportBase ) );
z-index : 12;
width : calc( 30 var( --viewportBase ) );
height : calc( 18 var( --remBase ) );
border-color : transparent;
border-style : solid;
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( 1 var( --remBase ) );
background-color : var( --base );
&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
top : calc( 8.5 var( --remBase ) );
}
}
}
} :where( #mvPc , #mvSp ){
font-size : 0;
.splide__arrow{
position : absolute;
z-index : 1;
display : grid;
align-items : center;
justify-content : center;
width : auto;
aspect-ratio : 1;
border-radius : 50%;
outline-width : 1px;
outline-style : solid;
outline-offset : -1px;
img{
filter : var( --filterWhite );
}
}
.splide__slide{
picture{
overflow : hidden;
}
picture img{
width : 100%;
height : auto;
}
}
.splide__pagination{
position : absolute;
left : 0;
display : flex;
flex-wrap : wrap;
width : 100%;
button{
width : auto;
aspect-ratio : 1;
border-radius : 50%;
outline-width : 1px;
outline-style : solid;
outline-offset : -1px;
&:not( .is-active ){
background-color : white;
}
}
}
}
#mvSp{
@media screen and ( width <= 750px ){
.splide__arrow{
top : calc( 90 var( --remBase ) );
height : calc( 30 var( --remBase ) );
background-color : var( --brown01 );
outline-color : var( --brown01 );
img{
height : calc( 19 var( --remBase ) );
}
}
.splide__arrow--prev{
left : calc( 10 var( --viewportBase ) );
img{
margin-right : calc( 2.5 var( --remBase ) );
}
}
.splide__arrow--next{
right : calc( 10 var( --viewportBase ) );
img{
margin-left : calc( 2.5 var( --remBase ) );
}
}
.splide__pagination{
bottom : calc( 16 var( --remBase ) );
column-gap : calc( 12 var( --viewportBase ) );
button{
height : calc( 13 var( --remBase ) );
outline-color : var( --brown03 );
&.is-active{
background-color : var( --brown03 );
}
}
}
}
}
#mvPc{
@media print , screen and ( width > 750px ){
.splide__arrow{
background-color : var( --brown02 );
outline-color : var( --brown02 );
}
.splide__arrow--prev{
img{
margin-right : calc( 2.5 var( --remBase ) );
}
}
.splide__arrow--next{
img{
margin-left : calc( 2.5 var( --remBase ) );
}
}
.splide__pagination{
button{
outline-color : var( --brown02 );
&.is-active{
background-color : var( --brown02 );
}
}
}
}
@media screen and ( 750px < width < 1366px ){
.splide__arrow{
top : calc( 220 var( --remBase ) );
height : calc( 60 var( --remBase ) );
img{
height : calc( 36 var( --remBase ) );
}
}
.splide__arrow--prev{
left : calc( 34 var( --viewportBase ) );
}
.splide__arrow--next{
right : calc( 34 var( --viewportBase ) );
}
.splide__pagination{
bottom : calc( 23 var( --remBase ) );
column-gap : calc( 40 var( --viewportBase ) );
button{
height : calc( 20.5 var( --remBase ) );
}
}
}
@media screen and ( width >= 1366px ){
.splide__arrow{
top : calc( 220 * 100vw / 1366 );
height : calc( 60 * 100vw / 1366 );
img{
height : calc( 36 * 100vw / 1366 );
}
}
.splide__arrow--prev{
left : calc( 34 * 100vw / 1366 );
}
.splide__arrow--next{
right : calc( 34 * 100vw / 1366 );
}
.splide__pagination{
bottom : calc( 23 * 100vw / 1366 );
column-gap : calc( 40 * 100vw / 1366 );
button{
height : calc( 20.5 * 100vw / 1366 );
}
}
}
}
@media ( hover : hover ){
:is( #mvPc , #mvSp ){
.splide__arrow:hover{
background-color : white;
}
@media screen and ( width <= 750px ){
.splide__arrow:hover{
img{
filter : var( --filterBrown01 );
}
}
.splide__pagination button:hover{
background-color : var( --brown01 );
}
}
@media print , screen and ( width > 750px ){
.splide__arrow:hover{
img{
filter : var( --filterBrown02 );
}
}
.splide__pagination button:hover{
background-color : var( --brown02 );
}
}
}
}
@media ( prefers-reduced-motion : no-preference ){
:is( #mvPc , #mvSp ){
.splide__arrow{
transition : background-color var( --transitionBase );
img{
transition : filter var( --transitionBase );
}
}
.splide__pagination button{
transition : background-color var( --transitionBase );
}
}
} #linkContact{
position : fixed;
bottom : 5%;
right : 0;
z-index : 5;
display : grid;
grid-auto-flow : column;
align-items : center;
justify-content : start;
color : white;
border-top-left-radius : 100vmax;
border-bottom-left-radius : 100vmax;
outline : solid 1px transparent;
outline-offset : -1px;
translate : 0 -50%;
&::before{
display : block;
width : auto;
aspect-ratio : 19.5/14.875;
font-size : 0;
content : "";
background-image : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/ui/icon/email01.svg);
filter : var( --filterWhite );
background-repeat : no-repeat;
background-position : left center;
background-size : contain;
}
&::after{
position : absolute;
inset : 0;
z-index : -1;
display : block;
font-size : 0;
content : "";
border-top-left-radius : 100vmax;
border-bottom-left-radius : 100vmax;
opacity : 1;
}
&.is-visible{
translate : 0 0;
}
&:not( .is-visible ){
translate : 100% 0;
}
@media screen and ( width <= 750px ){
column-gap : calc( 6 * 100% / 98 );
width : calc( 114 var( --viewportBase ) );
height : calc( 44 var( --remBase ) );
padding-left : calc( 16 var( --viewportBase ) );
font-size : 1.2rem;
line-height : 1.75;
box-shadow : 0 calc( 6 var( --remBase ) ) 0 #b4ebd6;
&::before{
height : calc( 11 var( --remBase ) );
}
&::after{
background-image : linear-gradient( to right , #63aeaa , #99d069 );
}
}
@media print , screen and ( width > 750px ){
column-gap : calc( 9 * 100% / 151 );
width : min( calc( 180 var( --viewportBase ) ) , 180px );
height : calc( 60 var( --remBase ) );
padding-left : min( calc( 29 var( --viewportBase ) ) , 29px );
font-size : 1.6rem;
line-height : 1.75;
box-shadow : 0 calc( 8 var( --remBase ) ) 0 #b4ebd6;
&::before{
height : calc( 14.875 var( --remBase ) );
}
&::after{
background-image : linear-gradient( to right , #00b1ac , #7dd261 );
}
}
}
@media ( hover : hover ){
#linkContact:hover{
color : #64aeaa;
outline-color : #64aeaa;
&::before{
filter : var( --filterLightGreen );
}
&::after{
opacity : 0;
}
}
}
@media ( prefers-reduced-motion : no-preference ){
#linkContact{
transition : outline-color var( --transitionBase ) , color var( --transitionBase ) , translate var( --transitionBase );
&::before{
transition : filter var( --transitionBase );
}
&::after{
transition : opacity var( --transitionBase );
}
}
} #open{
h1{
display : grid;
place-items : center;
color : white;
text-align : center;
border-image-slice : 0 fill;
border-image-outset : 0 100vw 0 100vw;
}
p{
display : grid;
grid-template-columns : 1fr auto auto 1fr;
align-items : center;
justify-content : center;
> span{
&:nth-child( 1 ){
grid-row : 1;
grid-column : 2;
width : auto;
aspect-ratio : 1;
color : white;
text-align : center;
background : url(//umekitaclinic.org/wp-content/themes/umekita-clinic/assets/images/lp/open/bg.svg) 0 0 / contain no-repeat;
}
&:nth-of-type( 2 ){
grid-row : 1;
grid-column : 3;
font-weight : 500;
}
}
strong{
grid-row : 2;
grid-column : 1/-1;
font-weight : 700;
color : var( --brown );
text-align : center;
}
}
h2{
font-weight : 700;
text-align : center;
border-bottom-color : currentColor;
border-bottom-style : solid;
}
ul ul{
font-size : 0;
text-align : center;
li{
display : inline;
}
}
> ul{
> li:nth-child( 1 ){
li + li::before{
content : "・";
}
}
> li:nth-child( 2 ){
li + li::before{
content : "、";
}
}
}
@media screen and ( width <= 750px ){
padding-bottom : calc( ( 110 - 6 - 12 ) var( --remBase ) );
h1{
height : calc( 60 var( --remBase ) );
border-image-source : linear-gradient( var( --brown03 ) , var( --brown03 ) );
img{
height : calc( 59 var( --remBase ) );
}
}
p{
row-gap : calc( ( 20 - 4 ) var( --remBase ) );
column-gap : calc( 15 var( --percentBase ) );
margin-top : calc( 20 var( --remBase ) );
> span{
&:nth-of-type( 1 ){
height : calc( 71 var( --remBase ) );
padding-top : calc( ( 21 - 4 ) var( --remBase ) );
font-size : 1.4rem;
line-height : calc( 18 / 14 );
}
&:nth-of-type( 2 ){
font-size : 1.6rem;
line-height : 1.25;
color : var( --brown05 );
}
}
strong{
font-size : 1.6rem;
line-height : 1.5;
color : var( --brown05 );
}
}
> ul{
width : calc( 296 var( --percentBase ) );
margin-inline : auto;
margin-top : calc( ( 25 - 4 - 4 ) var( --remBase ) );
> li + li{
margin-top : calc( (  22 - 4 - 6 ) var( --remBase ) );
}
}
h2{
padding-bottom : calc( ( 8 - 4 ) var( --remBase ) );
font-size : 1.6rem;
line-height : 1.5;
color : var( --brown05 );
border-bottom-width : 1px;
}
ul ul{
margin-top : calc( ( 10 - 6 ) var( --remBase ) );
}
li li{
font-size : 1.2rem;
line-height : 2;
}
}
@media print , screen and ( width > 750px ){
padding-bottom : calc( ( 190 - 2 - 19.5 ) var( --remBase ) );
h1{
height : calc( 96 var( --remBase ) );
border-image-source : linear-gradient( var( --brown02 ) , var( --brown02 ) );
img{
height : calc( 43 var( --remBase ) );
}
}
p{
row-gap : calc( ( 30 - 10 ) var( --remBase ) );
column-gap : calc( 26 var( --percentBase ) );
margin-top : calc( 30 var( --remBase ) );
> span{
&:nth-of-type( 1 ){
height : calc( 155 var( --remBase ) );
padding-top : calc( ( 46 - 7.5 ) var( --remBase ) );
font-size : 2.7rem;
line-height : calc( 42 / 27 );
}
&:nth-of-type( 2 ){
font-size : 3.6rem;
line-height : calc( 48 / 36 );
color : var( --brown04 );
}
}
strong{
font-size : 4.1rem;
line-height : calc( 61 / 41 );
color : var( --brown04 );
}
}
> ul{
display : grid;
grid-template-columns : repeat( 2 , calc( 538 var( --percentBase ) ) );
justify-content : space-between;
margin-top : calc( ( 100 - 10 - 10 ) var( --remBase ) );
}
h2{
padding-bottom : calc( ( 16 - 10 ) var( --remBase ) );
font-size : 4.1rem;
line-height : calc( 61 / 41 );
color : var( --brown04 );
border-bottom-width : calc( 2 var( --remBase ) );
}
ul ul{
margin-top : calc( ( 12 - 2 ) var( --remBase ) );
}
li li{
font-size : 2rem;
line-height : 1.2;
}
}
}
.slider_container {
position: relative;
width: 100%;
height: auto; overflow: hidden;
}
.slider_container .img img {
width: 100%;
object-fit: cover;
display: block;
}
.slider_container .text_area {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
height: 78%;
color: #000;
text-align: left;
z-index: 10;
}
.slider_container .text_area .title {
font-size: 4.70vw;
letter-spacing: 0.1em;
line-height: 1.4;
font-family: "Noto Serif", serif;
font-weight: 700;
}
.slider_container .text_area .text {
line-height: 1.4;
padding-top: 10px;
font-size: 2vw;
letter-spacing: 0.1em;
font-family: "Noto Serif", serif;
font-weight: 400;
} #open .main_title {
font-size: clamp(1.9rem,3vw,4.5rem);
line-height: 1.2;
font-family: "Noto Serif", serif;
font-weight: 700;
}
#open .sp_only {
display: none;
}
@media screen and (max-width: 750px) {
.slider_container .text_area {
width: 78%;
height: auto;
}
.slider_container .text_area .title {
line-height: 1.6;
font-size: 6.3vw;
}
.slider_container .text_area .text {
display: none;
}
#open .sp_only {
display: block;
}
}