@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 768px < width < 1280px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1280px ){
	:root{
		font-size : 10px;
	}
}
@media screen and ( width <= 768px ){
	:root{
		--headerHeight : calc( 120 var( --remBase ) )
;
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--headerHeight : calc( 200 var( --remBase ) )
;
	}
}
@media screen and ( width <= 768px ){
	html{
		scroll-padding-top : var( --headerHeight );
	}
}
@media print , screen and ( width > 768px ){
	html{
		scroll-padding-top : calc( 60 var( --remBase ) );
	}
}
body{
	position : relative;
}
@media screen and ( width <= 768px ){
	body{
		padding-top : var( --headerHeight );
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
}
@media print , screen and ( width > 768px ){
	body{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
#wrapper_out , #wrapper{
	display : contents;
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	display : grid;
	grid-auto-flow : column;
	row-gap : 0;
}
.container > *{
	grid-column : 2;
}
@media screen and ( width <= 768px ){
	.container{
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.container{
		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 ) );
	}
}
@media screen and ( width <= 768px ){
	.container-sp{
		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;
	}
	.container-sp > *:not( .fluid-sp , .right-end-sp ){
		grid-column : 2;
	}
	.container-sp .fluid-sp{
		grid-column : 1/-1;
	}
	.container-sp .right-end-sp{
		grid-column : 2/-1;
	}
}
@media print , screen and ( width >= 1280px ){
	.container-pc{
		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;
	}
	.container-pc > *:not( .fluid-pc , .right-end-pc ){
		grid-column : 2;
	}
	.container-pc .fluid-pc{
		grid-column : 1/-1;
	}
	.container-pc .right-end-pc{
		grid-column : 2/-1;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width <= 768px ){
	.wrap{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.wrap{
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
@media screen and ( width <= 768px ){
	.wrap-sp{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.wrap-pc{
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
@media screen and ( width <= 768px ){
	.wrap-left{
		width : 100%;
		padding-left : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-left .wrap-right , .wrap-left .wrap-right-sp{
		padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media print , screen and ( width > 768px ){
	.wrap-left{
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-left.wrap-right-pc{
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-left .wrap-right , .wrap-left .wrap-right-pc{
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
	}
}
@media screen and ( width <= 768px ){
	.wrap-left-sp{
		width : 100%;
		padding-left : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-left-sp .wrap-right , .wrap-left-sp .wrap-right-sp{
		padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media screen and ( width <= 768px ){
	.wrap-right{
		width : 100%;
		padding-right : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-right .wrap-left , .wrap-right .wrap-left-sp{
		padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media print , screen and ( width > 768px ){
	.wrap-right{
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-right.wrap-left-pc{
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-right .wrap-left , .wrap-right .wrap-left-pc{
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
	}
}
@media screen and ( width <= 768px ){
	.wrap-right-sp{
		width : 100%;
		padding-right : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-right-sp .wrap-left , .wrap-right-sp .wrap-left-sp{
		padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media screen and ( width <= 768px ){
	.wrap02{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.wrap02{
		padding-inline : max( calc( 140 var( --viewportBase ) ) , calc( ( 100% - 1000px ) / 2 ) );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media print , screen and ( width > 768px ){
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 768px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 768px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width >= 1280px ){
	.is-tb{
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
@media screen and ( width <= 768px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]::before , [data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( width <= 768px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]::before , [data-both-sp]::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media print , screen and ( width > 768px ){
	[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 , [data-both-pb]::after{
		white-space : pre;
		content : attr( data-both );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
@media screen and ( width <= 768px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( width > 768px ){
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}
@media screen and ( width <= 768px ){
	br.sp-spaceEm{
		content : "";
	}
	br.sp-spaceEm::after{
		content : "　";
	}
}
@media print , screen and ( width > 768px ){
	br.pc-spaceEm{
		content : "";
	}
	br.pc-spaceEm::after{
		content : "　";
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 768px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 768px ){
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
/*
#header{
  background-color: var(--beige);
  height: var(--headerHeight);
  display: grid;
  align-items: center;
  .logos{
    width: fit-content;
  }
  @media (--sp){
    height: var(--headerHeight);
    @mixin fixed 10;
    .logos{
      img{
        height: calc( 80 var(--remBase) );
      }
    }
  }
  @media (--up){
    grid-template-rows: calc( 140 var(--remBase) ) calc( 60 var(--remBase) );
    > :where( hgroup , .logos ){
      grid-row: 1;
      display: grid;
      align-content: center;
      justify-content: start;
      grid-auto-flow: row;
      row-gap: calc( 8 var(--remBase) );
      :where( p , h1 , span ){
        display: block;
        width: fit-content;
      }
      > :where( p , span:nth-of-type(1) ){
        color:var(--gold);
        font-size: 1.2rem;
        line-height: 1.2;
      }
      img{
        height: calc( 88 var(--remBase) );
      }
    }
  }
}

#menuBtn{
  @media (--sp){
    @mixin menuBtn03;
    position: fixed;
    border-style: solid;
    border-color: transparent;
    width: calc( 72 var(--viewportBase) );
    height: calc( 72 var(--remBase) );
    top: calc( 24 var(--remBase) );
    right: calc( var(--gutter) var(--viewportBase) );
    border-inline-width:calc( 12 var(--remBase) );
    border-block-width:calc( 16 var(--remBase) );
    border-radius: calc( 4 var(--remBase) );
    background-image: linear-gradient( 180deg, color-mix( in srgb , var(--gold) 50% , transparent ) 0%, var(--gold) 20%);
    span{
      background-color: white;
      height: calc( 3 var(--remBase) );
      &:nth-of-type(2) , &:nth-of-type(3){
        top : calc( 18.5 var(--remBase));
      }
    }
  }
}

#nav{
  @media (--sp){
    @mixin drawerOpacity;
    background-color: var(--yellow);
    width: 100%;
    height:calc( 100dvh - var(--headerHeight) );
    top: calc( var(--headerHeight) );
    background-color: color-mix( in srgb , white 95% , transparent );
  }
  @media (--up){
    display: contents;
    .scroll{
      display: contents;
    }
  }

}
@media ( prefers-reduced-motion : no-preference ){
  #nav{
    @media (--sp){
      @mixin drawerOpacityAnimation;
    }
  }
}

#navGlobal{
  @media (--sp){
    display: grid;
    grid-template-columns: repeat( 2 , 1fr );
    border-block: solid 1px var(--gold);
    > li{
      position: relative;
      &:nth-child(n+3){
        border-top: dashed 1px var(--gold);
      }
    }
    > li:nth-child(even){
      &:before{
        content:"";
        display: block;
        font-size: 0;
        height: 100%;
        width: 1px;
        background-color: var(--gold);
        left: 0;
        top: 0;
        position: absolute;
      }
    }
    a{
      @mixin gc;
      height: calc( 64 var(--remBase) );
      font-size: 2.6rem;
    }
  }
  @media (--up){
    background: image-set( url( "../images/header/bg_nav.avif" ) type( "image/avif" ) , url( "../images/header/bg_nav.webp" ) type( "image/webp" ) ) left top / auto 100% repeat-x;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax( 0 , 1fr));
    height: 100%;
    grid-auto-rows: 100%;
    &.is-fixed{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: calc( 60 var(--remBase) );
      z-index: 5;
    }
    a{
      color:white;
      display: grid;
      grid-auto-flow: row;
      justify-content: center;
      align-items: center;
      row-gap: calc( 4 var(--remBase) );
      text-align: center;
      height: 100%;
      align-content: center;
      font-size: 1.8rem;
      @mixin ls .1;
      text-shadow: 1px 1px calc( 2 var(--remBase) ) color-mix( in srgb , black 50% , transparent );
      &:after{
        font-size: 1.2rem;
        @mixin ls .1;
      }
    }
  }
}

@media ( hover : hover ){
  #navGlobal a:hover{
    filter: brightness(1.2);
    background-image: linear-gradient( to bottom , color-mix( in srgb , var(--gold) 20% , transparent ) , color-mix( in srgb , var(--gold) 0% , transparent ) 80%, transparent 80% , transparent 100% );
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #navGlobal a{
    transition: filter var(--transitionBase) , background var(--transitionBase);
  }
}

#navTel{
  @media (--sp){
    position: fixed;
    bottom: 0;
    height: calc( 90 var(--remBase) );
    width: 50%;
    left: 50%;
    z-index: 5;
    background-image: linear-gradient( 180deg, color-mix( in srgb , var(--gold) 40% , transparent ) 0%, var(--gold) 20%);
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
    z-index: 5;
    color:white;
    row-gap: calc( 8 var(--remBase) );
    dt{
      display: grid;
      align-items: center;
      justify-content: center;
      grid-auto-flow: column;
      font-size: 2.2rem;
      &:before{
        content:"";
        @mixin icon;
        background-image: url("../images/ui/icon/tel01.svg");
        aspect-ratio: 16/25;
        height: calc( 28 var(--remBase) );
        filter: var(--filterWhite);
        margin-right: calc( 8 var(--remBase) );
      }
    }
    dd:not(.is-pc){
      font-size: 2.8rem;
    }
    a{
      color:white;
    }
  }
  @media (--up){
    overflow-y: hidden;
    display: grid;
    height: calc( 100 var(--remBase) );
    grid-template-columns: 1fr;
    grid-template-rows: calc( 8 var(--remBase) ) 1fr;
    width: calc( 530 var(--percentBase) );
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin-bottom: calc( 12 var(--remBase) );
    position: relative;
    &:before{
      content:"";
      grid-column: 1;
      grid-row: 1/-1;
      justify-self: start;
      background: image-set( url( "../images/header/bg_tel.avif" ) type( "image/avif" ) , url( "../images/header/bg_tel.webp" ) type( "image/webp" ) ) 0 0 / contain no-repeat;
      aspect-ratio: 863/1105;
      width: auto;
      height: 100%;
      margin-left: calc( 32 * 100% / 530 );
      font-size: 0;
      z-index: 1;
    }
    > div{
      grid-column: 1;
      grid-row: 2;
      outline: solid 1px var(--red);
      outline-offset: -1px;
      padding-inline: calc( 120 * 100% / 530 );
      background-color: white;
      align-content:center;
      border-radius: calc( 16 var(--remBase) );
      display: grid;
      grid-template-columns: auto 1fr;
      row-gap: calc( 4 var(--remBase) );
      align-items: center;
      column-gap: calc( 8 * 100% / 390 );
    }
    dt{
      grid-row: 1;
      grid-column: 1/-1;
      font-size: 1.6rem;
      font-weight: 500;
      display: grid;
      align-items: center;
      justify-content: start;
      grid-auto-flow: column;
      letter-spacing: 0.1em;
      &:before{
        content:"";
        @mixin icon;
        background-image: url("../images/ui/icon/tel01.svg");
        filter:var(--filterRed);
        height: calc( 28 var(--remBase) );
        aspect-ratio: 16/25;
        margin-right: calc( 8 var(--remBase) );
        font-size: 0;
      }
      > span:not(.is-pc){
        font-size: 2rem;
        &:first-of-type{
          color:var(--red);
        }
      }
    }
    dd{
      &:nth-of-type(1){
        @mixin gc;
        background-color: var(--red);
        color:white;
        grid-column: 1;
        grid-row: 2;
        padding-inline: .75em;
        padding-block: calc( 4 var(--remBase) );
        font-size: 1.2rem;
        line-height: 1.5;
        border-radius: calc( 8 var(--remBase) );
        @mixin ls .05;
      }
      &:nth-of-type(2){
        font-size: 2.4rem;
        font-weight: 500;
        color:var(--red);
        letter-spacing: 0.05em;
      }
      a{
        text-decoration: underline;
        text-underline-offset: .2em;
        text-decoration-color: transparent;
      }
    }
  }
}

@media ( hover : hover ){
  #navTel{
    a:hover{
      color:var(--red);
      text-decoration-color: var(--red);
    }
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #navTel{
    a{
      transition: color var(--transitionBase) , text-decoration-color var(--transitionBase);
    }
  }
}

#navContact{
  @media (--sp){
    position: fixed;
    bottom: 0;
    height: calc( 90 var(--remBase) );
    width: 50%;
    left: 0;
    background-image: linear-gradient( 180deg, color-mix( in srgb , var(--red) 40% , transparent ) 0%, var(--red) 20%);
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
    z-index: 5;
    color:white;
    row-gap: calc( 8 var(--remBase) );
    > span:not(.is-pc){
      display: grid;
      align-items: center;
      justify-content: center;
      grid-auto-flow: column;
    }
    > span{
      &:nth-of-type(2){
        font-size: 2.2rem;
        &:before{
          content:"";
          @mixin icon;
          background-image: url("../images/ui/icon/email01.svg");
          aspect-ratio: 41/30;
          height: calc( 24 var(--remBase) );
          filter: var(--filterWhite);
          margin-right: calc( 8 var(--remBase) );
        }
      }
      &:nth-of-type(3){
        font-size: 2.8rem;
      }
    }
  }
  @media (--up){
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 2;
    justify-self: end;
    align-self: start;
    height: calc( 72 var(--remBase) );
    background-color: var(--red);
    top : calc( 46 var(--remBase));
    margin-right: calc( 8 var(--percentBase) );
    border-radius: calc( 8 var(--remBase) );
    color:white;
    font-size: 1.6rem;
    line-height: 1.5;
    display: grid;
    align-items: center;
    padding-left: calc( 12 var(--percentBase) );
    width: calc( 112 var(--percentBase) );
    position: relative;
    outline: solid 1px var(--red);
    outline-offset: -1px;
    align-content: center;
    &:before{
      position: absolute;
      height: calc( 24 var(--remBase) );
      content:"";
      @mixin icon;
      background-image: url("../images/ui/icon/email01.svg");
      filter:var(--filterWhite);
      aspect-ratio: 41/30;
      rotate: -25deg;
      bottom: calc( 12 var(--remBase) );
      right: calc( 8 * 100% / 112 );
    }
    &:after{
      font-size: 0;
      border: solid 1px white;
      width: calc( 104 var(--percentBase) );
      top : calc( 4 var(--remBase));
      height: calc( 64 var(--remBase) );
      left: calc( 4 * 100% / 112 );
      width: calc( 104 * 100% / 112 );
      position: absolute;
      z-index: -1;
      border-radius: calc( 8 var(--remBase) );
    }
  }
}

@media ( hover : hover ){
  #navContact:hover{
    color:var(--red);
    background-color: white;
    &:before{
      filter:var(--filterRed);
    }
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #navContact{
    transition: color var(--transitionBase) , background-color var(--transitionBase);
    &:before{
      transition: filter var(--transitionBase);
    }
  }
}

#menuBtnClose{
  @media (--sp){
    @mixin gc;
    margin-inline : auto;
    height: calc( 72 var(--remBase) );
    aspect-ratio: 1;
    width: auto;
    margin-top: calc( 48 var(--remBase) );
    img{
      height: calc( 21.73 var(--remBase) );
    }
  }
}
*/
/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	font-size : 0;
}
#mv .splide__slide img{
	width : 100%;
	height : auto;
}