.elementor-1276 .elementor-element.elementor-element-5f9ff34{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-615aeae *//* =========================================================
LEONOIR 2026
FINAL TOP REFINEMENT
========================================================= */

:root{
  --leo-black:#101010;
  --leo-black-soft:#171515;

  --leo-red:#741b2b;
  --leo-red-hover:#942c40;
  --leo-red-dark:#51111d;

  --leo-ivory:#f4f1eb;
  --leo-white:#fbfaf7;

  --leo-text:#171717;
  --leo-gray:#77726d;

  --leo-line:rgba(17,17,17,.11);
  --leo-line-white:rgba(255,255,255,.14);

  --leo-serif:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  --leo-sans:
    "Helvetica Neue",
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  --leo-ease:cubic-bezier(.22,1,.36,1);
}


/* =========================================================
THEME RESET
========================================================= */

html{
  scroll-behavior:smooth;
}

body.page-id-1276{
  margin:0 !important;
  background:var(--leo-ivory) !important;
}

body.page-id-1276 > header,
body.page-id-1276 #masthead,
body.page-id-1276 #header,
body.page-id-1276 .site-header,
body.page-id-1276 .elementor-location-header{
  display:none !important;
}

body.leoMenuOpen{
  overflow:hidden !important;
}

.leoTop,
.leoTop *{
  box-sizing:border-box;
}

.leoTop{
  width:100%;
  overflow:hidden;

  background:var(--leo-ivory) !important;
  color:var(--leo-text) !important;

  font-family:var(--leo-sans);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.leoTop a,
.leoTop a:visited,
.leoTop a:hover,
.leoTop a:focus{
  text-decoration:none !important;
}

.leoTop img{
  display:block;
  max-width:100%;
}

.leoTop h1,
.leoTop h2,
.leoTop h3,
.leoTop p{
  color:inherit;
}

.leoContainer{
  width:min(1240px,calc(100% - 120px));
  margin-inline:auto;
}


/* =========================================================
LOADING
========================================================= */

.leoLoading{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  justify-content:center;
  align-items:center;

  background:#101010 !important;
  color:#fff !important;

  transition:
    opacity .8s var(--leo-ease),
    visibility .8s var(--leo-ease);
}

.leoLoading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.leoLoading__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.leoLoading__mark{
  font-family:Georgia,serif;
  font-size:48px;
  line-height:1;
}

.leoLoading__line{
  position:relative;
  width:1px;
  height:54px;
  overflow:hidden;
  background:rgba(255,255,255,.18);
}

.leoLoading__line::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:42%;

  background:var(--leo-red);

  animation:
    leoLoadingLine
    1.3s
    ease-in-out
    infinite;
}

.leoLoading__text{
  font-size:10px;
  letter-spacing:.3em;
  opacity:.65;
}

@keyframes leoLoadingLine{
  0%{transform:translateY(140%)}
  50%{transform:translateY(0)}
  100%{transform:translateY(-240%)}
}


/* =========================================================
HEADER
========================================================= */

.leoHeader{
  position:absolute;
  top:0;
  left:0;
  z-index:1000;

  width:100%;
  height:82px;

  color:#fff !important;

  transition:
    transform .45s var(--leo-ease),
    background-color .45s ease,
    backdrop-filter .45s ease,
    box-shadow .45s ease;
}

.leoHeader.is-fixed{
  position:fixed;

  background:rgba(15,15,15,.94) !important;

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);

  box-shadow:0 1px 0 rgba(255,255,255,.07);
}

.leoHeader.is-hidden{
  transform:translateY(-105%);
}

.leoHeader__inner{
  width:100%;
  height:100%;

  padding:0 46px;

  display:flex;
  align-items:center;
}

.leoHeader__logo{
  width:74px;
  flex:none;

  transition:
    opacity .35s ease,
    transform .45s var(--leo-ease) !important;
}

.leoHeader__logo:hover{
  opacity:.72;
  transform:translateY(-1px);
}

.leoHeader__logo img{
  width:64px;
  max-height:58px;
  object-fit:contain;
}

.leoHeader__nav{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:34px;
}

.leoHeader__nav a,
.leoHeader__nav a:visited{
  position:relative;

  padding:10px 0;

  color:#fff !important;

  font-size:11px;
  font-weight:500;
  line-height:1;

  letter-spacing:.15em;

  transition:
    color .35s ease,
    opacity .35s ease !important;
}

.leoHeader__nav a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:3px;

  width:100%;
  height:1px;

  background:var(--leo-red-hover);

  transform:scaleX(0);
  transform-origin:right;

  transition:transform .45s var(--leo-ease);
}

.leoHeader__nav a:hover{
  color:#fff !important;
  opacity:.68;
}

.leoHeader__nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.leoHeader__contact,
.leoHeader__contact:visited{
  height:42px;

  margin-left:36px;
  padding:0 18px;

  border:1px solid rgba(255,255,255,.36) !important;

  background:transparent !important;
  color:#fff !important;

  display:flex;
  align-items:center;
  gap:22px;

  font-size:10px;
  font-weight:500;
  letter-spacing:.15em;

  transition:
    background-color .45s var(--leo-ease),
    color .35s ease,
    border-color .35s ease,
    transform .45s var(--leo-ease) !important;
}

.leoHeader__contact span{
  color:inherit !important;
}

.leoHeader__contact:hover{
  background:#fff !important;
  border-color:#fff !important;
  color:#111 !important;
  transform:translateY(-2px);
}

.leoArrow{
  font-size:14px;
}

.leoMenuButton{
  display:none !important;
}


/* =========================================================
MOBILE MENU
========================================================= */

.leoMenu{
  position:fixed;
  inset:0;
  z-index:950;

  background:#111 !important;
  color:#fff !important;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .5s var(--leo-ease),
    visibility .5s var(--leo-ease);
}

.leoMenu.is-open{
  opacity:1;
  visibility:visible;
}

.leoMenu__inner{
  min-height:100%;

  padding:115px 26px 45px;

  display:flex;
  flex-direction:column;
}

.leoMenu__nav{
  display:flex;
  flex-direction:column;
}

.leoMenu__nav a{
  padding:17px 0;

  border-bottom:1px solid rgba(255,255,255,.12) !important;

  color:#fff !important;

  font-family:Georgia,serif;
  font-size:27px;
  letter-spacing:.02em;

  transition:
    padding-left .45s var(--leo-ease),
    color .35s ease !important;
}

.leoMenu__nav a:hover{
  padding-left:8px;
  color:#be6675 !important;
}

.leoMenu__nav a span{
  display:inline-block;

  width:38px;
  margin-right:7px;

  color:#9b3f4f !important;

  font-family:var(--leo-sans);
  font-size:9px;
}

.leoMenu__copy{
  margin:auto 0 0;

  color:#8b293a !important;

  font-family:Georgia,serif;
  font-size:12px;
  line-height:1.7;
  letter-spacing:.16em;
}


/* =========================================================
HERO
========================================================= */

.leoHero{
  position:relative;

  width:100%;
  min-height:720px;
  height:100svh;

  display:grid;
  grid-template-columns:45% 55%;

  background:var(--leo-ivory) !important;
}

.leoHero__copy{
  position:relative;
  z-index:3;

  min-width:0;
  min-height:720px;
  height:100svh;

  padding:
    140px
    clamp(40px,5vw,80px)
    85px
    clamp(60px,7vw,115px);

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.leoHero__eyebrow{
  margin:0 0 31px;

  color:var(--leo-red) !important;

  font-size:10px;
  font-weight:600;
  letter-spacing:.21em;
}

.leoHero__title{
  width:min(100%,620px);
  margin:0;

  color:#151515 !important;

  font-family:var(--leo-serif);

  font-size:clamp(42px,3.7vw,63px);
  font-weight:500;
  line-height:1.45;

  letter-spacing:.045em;

  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}

.leoHero__lead{
  margin:31px 0 0;

  color:#383532 !important;

  font-family:var(--leo-serif);

  font-size:14px;
  line-height:2.05;
  letter-spacing:.045em;
}

.leoHero__actions{
  margin-top:36px;

  display:flex;
  align-items:center;
  gap:28px;
}

.leoButton,
.leoButton:visited{
  min-width:205px;
  height:54px;

  padding:0 20px 0 24px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border:0 !important;

  color:#fff !important;

  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;

  transition:
    background-color .45s var(--leo-ease),
    transform .45s var(--leo-ease),
    box-shadow .45s var(--leo-ease) !important;
}

.leoButton--red,
.leoButton--red:visited{
  background:var(--leo-red) !important;
}

.leoButton--red span{
  color:#fff !important;
}

.leoButton--red:hover{
  background:#111 !important;

  transform:translateY(-3px);

  box-shadow:0 14px 35px rgba(0,0,0,.12);
}

.leoTextLink,
.leoTextLink:visited{
  display:flex;
  align-items:center;
  gap:14px;

  color:#222 !important;

  font-size:9px;
  font-weight:500;
  letter-spacing:.15em;

  transition:
    color .35s ease,
    transform .45s var(--leo-ease) !important;
}

.leoTextLink:hover{
  color:var(--leo-red) !important;
  transform:translateX(3px);
}

.leoHero__visual{
  position:relative;

  min-width:0;
  min-height:720px;
  height:100svh;

  overflow:hidden;

  background:#ccc !important;
}

.leoHero__imageWrap{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;
  min-height:100% !important;

  background-image:
    url("https://leonoir.co.jp/wp-content/uploads/2023/07/animals-2939632_1280.jpg") !important;

  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center;

  filter:
    grayscale(100%)
    contrast(1.05);

  transform:scale(1.015);
  transform-origin:center center;

  transition:transform .8s var(--leo-ease);
}

.leoHero__visual::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.02),
      transparent 44%,
      rgba(0,0,0,.06)
    );
}

.leoHero__vertical{
  position:absolute;
  z-index:3;

  top:112px;
  right:24px;
  bottom:60px;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.leoHero__vertical span{
  width:1px;
  height:76px;

  background:var(--leo-red) !important;
}

.leoHero__vertical p{
  margin:14px 0 0;

  writing-mode:vertical-rl;

  color:#111 !important;

  font-family:Georgia,serif;
  font-size:9px;
  letter-spacing:.18em;
}

.leoHero__number{
  position:absolute;
  z-index:3;

  right:64px;
  bottom:42px;

  display:flex;
  gap:8px;

  color:#222 !important;

  font-size:9px;
  letter-spacing:.16em;
}

.leoHero__scroll{
  position:absolute;
  z-index:5;

  left:27px;
  bottom:28px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.leoHero__scroll span{
  writing-mode:vertical-rl;

  color:#222 !important;

  font-size:8px;
  letter-spacing:.2em;
}

.leoHero__scroll i{
  position:relative;

  display:block;

  width:1px;
  height:43px;

  overflow:hidden;

  background:rgba(0,0,0,.16);
}

.leoHero__scroll i::after{
  content:"";

  position:absolute;

  top:-100%;
  left:0;

  width:100%;
  height:60%;

  background:#111;

  animation:leoScrollLine 2s ease-in-out infinite;
}

@keyframes leoScrollLine{
  to{top:150%}
}


/* =========================================================
MARQUEE
========================================================= */

.leoMarquee{
  overflow:hidden;

  padding:14px 0 15px;

  background:var(--leo-red) !important;
  color:#fff !important;
}

.leoMarquee__track{
  width:max-content;

  display:flex;
  align-items:center;
  gap:25px;

  animation:leoMarquee 32s linear infinite;
}

.leoMarquee__track span{
  color:#fff !important;

  white-space:nowrap;

  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:.17em;
}

.leoMarquee__track i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:rgba(255,255,255,.55);
}

@keyframes leoMarquee{
  to{transform:translateX(-50%)}
}


/* =========================================================
SECTION HEAD
========================================================= */

.leoSectionHead{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.leoSectionHead__no{
  min-width:22px;

  margin:2px 0 0;

  color:var(--leo-red) !important;

  font-size:10px;
  letter-spacing:.14em;
}

.leoSectionHead__en{
  margin:0;

  color:#171717 !important;

  font-family:Georgia,serif;
  font-size:14px;
  letter-spacing:.1em;
}

.leoSectionHead__jp{
  margin:6px 0 0;

  color:#77726d !important;

  font-size:11px;
  letter-spacing:.05em;
}

.leoSectionHead--light .leoSectionHead__en{
  color:#fff !important;
}

.leoSectionHead--light .leoSectionHead__jp{
  color:rgba(255,255,255,.55) !important;
}

.leoSectionHead--light .leoSectionHead__no{
  color:#b45464 !important;
}


/* =========================================================
ABOUT
========================================================= */

.leoAbout{
  position:relative;

  overflow:hidden;

  padding:130px 0 150px;

  background:var(--leo-ivory) !important;
}

.leoAbout__grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:26% 74%;
}

.leoAbout__body{
  min-width:0;
  padding-right:4vw;
}

.leoAbout__title{
  width:min(100%,820px);

  margin:0;

  color:#151515 !important;

  font-family:var(--leo-serif);

  font-size:clamp(30px,2.75vw,46px);
  font-weight:500;
  line-height:1.68;
  letter-spacing:.05em;
}

.leoAbout__title > span{
  display:block;
  white-space:nowrap;
}

.leoAbout__title em{
  color:var(--leo-red) !important;
  font-style:normal;
}

/*
前より本文を見出し側へ寄せる
*/
.leoAbout__text{
  width:min(560px,100%);

  margin:40px auto 0 13%;

  color:#383532 !important;

  font-family:var(--leo-serif);

  font-size:14px;
  line-height:2.1;
  letter-spacing:.035em;
}

.leoAbout__text p{
  margin:0 0 18px;
}

.leoCircleLink,
.leoCircleLink:visited{
  position:relative;

  width:122px;
  height:122px;

  margin:40px 5% 0 auto;

  border:1px solid rgba(20,20,20,.55) !important;
  border-radius:50%;

  background:transparent !important;
  color:#181818 !important;

  display:flex;
  justify-content:center;
  align-items:center;

  transition:
    background-color .5s var(--leo-ease),
    color .4s ease,
    border-color .4s ease,
    transform .55s var(--leo-ease) !important;
}

.leoCircleLink span{
  color:inherit !important;

  font-size:9px;
  line-height:1.65;
  letter-spacing:.11em;
}

.leoCircleLink b{
  position:absolute;

  top:21px;
  right:21px;

  color:inherit !important;

  font-size:15px;
  font-weight:400;
}

.leoCircleLink:hover{
  background:var(--leo-red) !important;
  border-color:var(--leo-red) !important;
  color:#fff !important;

  transform:
    translateY(-4px)
    rotate(-3deg);
}

.leoAbout__word{
  position:absolute;

  left:-10px;
  bottom:-47px;

  color:rgba(113,27,43,.05) !important;

  font-family:Georgia,serif;

  font-size:clamp(115px,17vw,245px);
  line-height:1;

  white-space:nowrap;

  letter-spacing:-.035em;
}


/* =========================================================
SERVICE
========================================================= */

.leoService{
  padding:130px 0 140px;

  background:var(--leo-black) !important;
  color:#fff !important;
}

.leoService__intro{
  display:grid;
  grid-template-columns:40% 60%;
  align-items:start;

  margin-bottom:68px;
}

.leoService__title{
  width:min(100%,680px);

  margin:0;

  color:#fff !important;

  font-family:var(--leo-serif);

  font-size:clamp(29px,2.55vw,43px);
  font-weight:500;
  line-height:1.68;
  letter-spacing:.05em;
}

.leoService__titleLine{
  display:block;
  white-space:nowrap;
}

.leoService__title em{
  color:#b4495b !important;
  font-style:normal;
}

.leoService__list{
  border-top:1px solid var(--leo-line-white);
}

.leoServiceItem{
  min-height:172px;

  display:grid;

  grid-template-columns:
    7%
    29%
    36%
    23%
    5%;

  align-items:center;

  border-bottom:1px solid var(--leo-line-white);

  background:transparent !important;

  transition:
    background-color .5s var(--leo-ease),
    padding .5s var(--leo-ease) !important;
}

.leoServiceItem:hover{
  padding-left:14px;
  padding-right:14px;

  background:var(--leo-red-dark) !important;
}

.leoServiceItem__number{
  color:#898384 !important;
  font-size:10px;
}

.leoServiceItem__title p{
  margin:0 0 7px;

  color:#bc5868 !important;

  font-size:9px;
  letter-spacing:.18em;
}

.leoServiceItem__title h3{
  margin:0;

  color:#fff !important;

  font-family:Georgia,serif;

  font-size:21px;
  font-weight:400;
  letter-spacing:.02em;
}

.leoServiceItem__text{
  max-width:380px;

  margin:0;

  color:#c4bfc0 !important;

  font-size:13px;
  line-height:1.95;
  letter-spacing:.025em;
}

.leoServiceItem__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.leoServiceItem__tags span{
  padding:7px 9px;

  border:1px solid rgba(255,255,255,.17) !important;

  color:#aaa4a5 !important;

  font-size:8px;
  letter-spacing:.1em;
}

.leoServiceItem > a{
  justify-self:end;

  color:#fff !important;

  font-size:18px;

  transition:
    transform .45s var(--leo-ease),
    color .35s ease !important;
}

.leoServiceItem:hover > a{
  color:#fff !important;
  transform:translate(3px,-3px);
}


/* =========================================================
WORKS
========================================================= */

.leoWorks{
  padding:135px 0 150px;

  background:var(--leo-white) !important;
}

.leoWorks__head{
  display:grid;
  grid-template-columns:50% 50%;

  align-items:end;

  margin-bottom:65px;
}

.leoWorks__lead{
  margin:0;

  color:#272421 !important;

  font-family:var(--leo-serif);

  font-size:17px;
  line-height:1.9;
  letter-spacing:.035em;
}

.leoWorks__grid{
  display:grid;

  grid-template-columns:repeat(12,1fr);

  gap:62px 30px;
}

.leoWork{
  display:block;
  color:#171717 !important;
}

.leoWork--main{
  grid-column:1 / 8;
  grid-row:1 / 3;
}

.leoWorks__grid > .leoWork:nth-child(2){
  grid-column:8 / 13;
}

.leoWorks__grid > .leoWork:nth-child(3){
  grid-column:8 / 13;
}

.leoWork--ikedia{
  grid-column:1 / 6;
}

.leoWork--toji{
  grid-column:6 / 13;
}

.leoWork__visual{
  position:relative;

  overflow:hidden;

  aspect-ratio:4 / 3;

  background:#e8e5df;

  transition:
    transform .6s var(--leo-ease),
    box-shadow .6s var(--leo-ease) !important;
}

/*
主役は少しだけ縦を短く
*/
.leoWork--main .leoWork__visual{
  aspect-ratio:4 / 4.65;
}

.leoWork--toji .leoWork__visual{
  aspect-ratio:16 / 9;
}

.leoWork__image{
  position:absolute;
  inset:0;

  width:100% !important;
  max-width:none !important;
  height:100% !important;

  object-fit:cover;

  transform:scale(1.001);

  transition:
    transform .9s var(--leo-ease),
    filter .6s ease;
}

.leoWork__image--ishigaki{
  object-position:center center;
}

.leoWork__image--future{
  object-position:center top;
}

.leoWork__image--nichiyu{
  object-position:center center;
}

.leoWork__image--ikedia{
  object-position:center center;
}

.leoWork__image--toji{
  object-position:center center;
}

.leoWork:hover .leoWork__visual{
  transform:translateY(-5px);

  box-shadow:0 25px 55px rgba(0,0,0,.1);
}

.leoWork:hover .leoWork__image{
  transform:scale(1.035);
}

.leoWork__hover{
  position:absolute;
  inset:0;
  z-index:3;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;

  background:rgba(12,12,12,.34);
  color:#fff !important;

  opacity:0;

  transition:opacity .5s ease;
}

.leoWork__hover span{
  color:#fff !important;

  font-size:10px;
  letter-spacing:.16em;
}

.leoWork__hover b{
  color:#fff !important;

  font-size:17px;
  font-weight:400;

  transform:translate(-4px,4px);

  transition:transform .5s var(--leo-ease);
}

.leoWork:hover .leoWork__hover{
  opacity:1;
}

.leoWork:hover .leoWork__hover b{
  transform:translate(0,0);
}

.leoWork__meta{
  margin-top:19px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.leoWork__category{
  margin:0 0 8px !important;

  color:var(--leo-red) !important;

  font-size:9px !important;
  font-weight:500;
  letter-spacing:.13em;
}

.leoWork__meta h3{
  margin:0;

  color:#171717 !important;

  font-family:var(--leo-serif);

  font-size:20px;
  font-weight:500;
  line-height:1.5;
}

.leoWork__meta span{
  display:block;

  margin-top:7px;

  color:#65615d !important;

  font-size:11px;
  line-height:1.6;
}

.leoWork__arrow{
  color:#171717 !important;

  font-size:18px;
  font-weight:400;

  transition:
    color .35s ease,
    transform .45s var(--leo-ease) !important;
}

.leoWork:hover .leoWork__arrow{
  color:var(--leo-red) !important;
  transform:translate(3px,-3px);
}

.leoWorks__more{
  margin-top:82px;

  display:flex;
  justify-content:flex-end;
}

.leoWorks__more a,
.leoWorks__more a:visited{
  width:200px;

  padding-bottom:12px;

  display:flex;
  justify-content:space-between;

  border-bottom:1px solid #222 !important;

  color:#171717 !important;

  font-size:10px;
  letter-spacing:.14em;

  transition:
    width .45s var(--leo-ease),
    color .35s ease,
    border-color .35s ease !important;
}

.leoWorks__more a:hover{
  width:220px;

  color:var(--leo-red) !important;
  border-color:var(--leo-red) !important;
}


/* =========================================================
PHILOSOPHY
========================================================= */

.leoWhy{
  min-height:680px;

  display:grid;
  grid-template-columns:50% 50%;

  background:#111 !important;
  color:#fff !important;
}

.leoWhy__visual{
  position:relative;

  min-height:680px;

  overflow:hidden;
}

.leoWhy__visual img{
  position:absolute;
  inset:0;

  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:100% !important;

  object-fit:cover;
  object-position:44% center;

  filter:
    grayscale(100%)
    brightness(.42)
    contrast(1.15);

  transform:scale(1.08);
}

.leoWhy__visual::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.03),
      rgba(0,0,0,.35)
    );
}

.leoWhy__content{
  padding:100px clamp(48px,6vw,95px);

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.leoWhy__catch{
  margin:51px 0 18px;

  color:#898284 !important;

  font-family:Georgia,serif;

  font-size:14px;
  line-height:1.6;
  letter-spacing:.11em;
}

.leoWhy__catch em{
  color:#b64d60 !important;
  font-style:normal;
}

.leoWhy__title{
  margin:0;

  color:#fff !important;

  font-family:var(--leo-serif);

  font-size:clamp(32px,2.8vw,47px);
  font-weight:500;
  line-height:1.64;
  letter-spacing:.05em;
}

.leoWhy__title span{
  display:block;
  white-space:nowrap;
}

.leoWhy__text{
  max-width:520px;

  margin:36px 0 0;

  color:#bbb6b6 !important;

  font-family:var(--leo-serif);

  font-size:14px;
  line-height:2.05;
  letter-spacing:.035em;
}


/* =========================================================
STRENGTH
========================================================= */

.leoStrength{
  padding:100px 0 115px;

  background:var(--leo-ivory) !important;
}

.leoStrength__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  border-top:1px solid var(--leo-line);
}

.leoStrengthItem{
  min-height:285px;

  padding:38px 42px;

  border-right:1px solid var(--leo-line);

  transition:
    background-color .45s ease,
    transform .45s var(--leo-ease) !important;
}

.leoStrengthItem:first-child{
  border-left:1px solid var(--leo-line);
}

.leoStrengthItem:hover{
  background:#ede8df !important;
}

.leoStrengthItem__no{
  margin:0 0 50px !important;

  color:var(--leo-red) !important;

  font-size:10px !important;
}

.leoStrengthItem h3{
  margin:0;

  color:#181818 !important;

  font-family:var(--leo-serif);

  font-size:23px;
  font-weight:500;
}

.leoStrengthItem span{
  display:block;

  margin-top:8px;

  color:#89847f !important;

  font-size:9px;
  letter-spacing:.15em;
}

.leoStrengthItem > p:last-child{
  margin:28px 0 0;

  color:#514d49 !important;

  font-size:13px;
  line-height:1.9;
}


/* =========================================================
CONTACT
========================================================= */

.leoContact{
  position:relative;

  overflow:hidden;

  background:#110e0f !important;
  color:#fff !important;
}

.leoContact__bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 84% 50%,
      rgba(117,25,42,.29),
      transparent 34%
    ),
    linear-gradient(
      120deg,
      #161213,
      #0d0c0c 68%
    ) !important;
}

.leoContact__inner{
  position:relative;
  z-index:2;

  min-height:500px;

  padding-top:92px;
  padding-bottom:88px;
}

.leoContact__label{
  margin:0 0 34px;

  color:#b04b5c !important;

  font-size:10px;
  letter-spacing:.2em;
}

.leoContact__title{
  margin:0;

  color:#fff !important;

  font-family:var(--leo-serif);

  font-size:clamp(33px,3.45vw,55px);
  font-weight:500;
  line-height:1.58;
  letter-spacing:.04em;
}

.leoContact__title span{
  color:#b24e60 !important;
}

.leoContact__text{
  margin:27px 0 0;

  color:#bbb5b6 !important;

  font-family:var(--leo-serif);

  font-size:13px;
  line-height:2;
}

.leoContact__button,
.leoContact__button:visited{
  position:absolute;

  right:0;
  bottom:78px;

  width:300px;
  height:90px;

  padding:0 27px 0 30px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:var(--leo-red) !important;
  color:#fff !important;

  transition:
    width .5s var(--leo-ease),
    background-color .4s ease,
    transform .45s var(--leo-ease),
    box-shadow .45s var(--leo-ease) !important;
}

.leoContact__button:hover{
  width:325px;

  background:var(--leo-red-hover) !important;

  transform:translateY(-3px);

  box-shadow:0 18px 45px rgba(0,0,0,.2);
}

.leoContact__button small{
  display:block;

  margin-bottom:7px;

  color:rgba(255,255,255,.68) !important;

  font-size:9px;
  letter-spacing:.15em;
}

.leoContact__button span{
  color:#fff !important;

  font-family:var(--leo-serif);

  font-size:16px;
}

.leoContact__button b{
  color:#fff !important;

  font-size:20px;
  font-weight:400;

  transition:transform .45s var(--leo-ease) !important;
}

.leoContact__button:hover b{
  transform:translate(3px,-3px);
}


/* =========================================================
FOOTER
========================================================= */

.leoFooter{
  padding:55px 0 26px;

  background:#0e0e0e !important;
  color:#fff !important;
}

.leoFooter__top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding-bottom:45px;
}

.leoFooter__logo{
  width:82px;

  transition:opacity .35s ease !important;
}

.leoFooter__logo:hover{
  opacity:.65;
}

.leoFooter__nav{
  display:flex;
  gap:30px;
}

.leoFooter__nav a,
.leoFooter__nav a:visited{
  color:#aaa5a5 !important;

  font-size:10px;
  letter-spacing:.14em;

  transition:color .35s ease !important;
}

.leoFooter__nav a:hover{
  color:#fff !important;
}

.leoFooter__bottom{
  padding-top:21px;

  border-top:1px solid rgba(255,255,255,.11);

  display:flex;
  justify-content:space-between;

  color:#817c7c !important;

  font-size:10px;
  line-height:1.8;
}

.leoFooter__bottom p{
  margin:0;
  color:inherit !important;
}


/* =========================================================
REVEAL
========================================================= */

.leoReveal{
  opacity:0;

  transform:translateY(22px);

  transition:
    opacity .9s var(--leo-ease),
    transform .9s var(--leo-ease);
}

.leoReveal.is-show{
  opacity:1;
  transform:none;
}


/* =========================================================
CURSOR
========================================================= */

.leoCursor{
  position:fixed;
  z-index:9999;

  top:0;
  left:0;

  width:62px;
  height:62px;

  border-radius:50%;

  background:rgba(113,27,43,.94) !important;
  color:#fff !important;

  display:flex;
  justify-content:center;
  align-items:center;

  pointer-events:none;

  opacity:0;

  transform:
    translate(-50%,-50%)
    scale(.72);

  transition:
    opacity .2s ease,
    transform .35s var(--leo-ease);
}

.leoCursor span{
  color:#fff !important;

  font-size:8px;
  letter-spacing:.13em;
}

.leoCursor.is-active{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}


/* =========================================================
TABLET
========================================================= */

@media(max-width:1024px){

  .leoContainer{
    width:calc(100% - 64px);
  }

  .leoHeader__inner{
    padding:0 30px;
  }

  .leoHeader__nav{
    gap:19px;
  }

  .leoHeader__contact{
    margin-left:22px;
  }

  .leoHero{
    grid-template-columns:48% 52%;
  }

  .leoHero__copy{
    padding-left:48px;
    padding-right:30px;
  }

  .leoHero__title{
    font-size:43px;
  }

  .leoAbout__grid{
    grid-template-columns:27% 73%;
  }

  .leoAbout__title{
    font-size:34px;
  }

  .leoAbout__text{
    margin-left:7%;
  }

  .leoServiceItem{
    grid-template-columns:
      7%
      31%
      45%
      12%
      5%;
  }

  .leoServiceItem__tags{
    display:none;
  }

}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .leoContainer{
    width:calc(100% - 40px);
  }


  /* HEADER */

  .leoHeader{
    height:70px;
  }

  .leoHeader__inner{
    padding:0 20px;
  }

  .leoHeader__logo{
    width:58px;
  }

  .leoHeader__logo img{
    width:53px;
  }

  .leoHeader__nav,
  .leoHeader__contact{
    display:none !important;
  }

  .leoMenuButton{
    margin-left:auto !important;

    width:42px !important;
    height:42px !important;

    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:transparent !important;

    display:flex !important;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;

    gap:7px;
  }

  .leoMenuButton span{
    display:block;

    width:24px;
    height:1px;

    background:#fff !important;

    transition:
      width .4s var(--leo-ease),
      transform .4s var(--leo-ease) !important;
  }

  .leoMenuButton span:last-child{
    width:16px;
  }

  .leoMenuButton.is-open span:first-child{
    width:23px;

    transform:
      translateY(4px)
      rotate(45deg);
  }

  .leoMenuButton.is-open span:last-child{
    width:23px;

    transform:
      translateY(-4px)
      rotate(-45deg);
  }


  /* HERO */

  .leoHero{
    min-height:100svh;
    height:100svh;

    display:block;

    background:#111 !important;
  }

  .leoHero__visual{
    position:absolute;
    inset:0;

    width:100%;

    min-height:100svh;
    height:100svh;
  }

  .leoHero__imageWrap{
    width:100% !important;
    height:100% !important;

    background-size:cover !important;
    background-position:58% center;

    filter:
      grayscale(100%)
      brightness(.59)
      contrast(1.09);
  }

  .leoHero__visual::after{
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.78),
        rgba(0,0,0,.12) 62%,
        rgba(0,0,0,.25)
      );
  }

  .leoHero__copy{
    min-height:100svh;
    height:100svh;

    padding:120px 24px 80px;

    justify-content:flex-end;

    color:#fff !important;
  }

  .leoHero__eyebrow{
    margin-bottom:18px;

    color:#d27787 !important;

    font-size:9px;
  }

  .leoHero__title{
    width:100%;

    color:#fff !important;

    font-size:clamp(34px,9.2vw,44px);
    line-height:1.48;

    word-break:keep-all;
  }

  .leoHero__lead{
    margin-top:20px;

    color:#fff !important;

    font-size:12px;
    line-height:1.9;
  }

  .leoHero__actions{
    margin-top:25px;
    display:block;
  }

  .leoButton{
    width:100%;

    min-width:0;
    height:53px;

    font-size:10px;
  }

  .leoTextLink{
    display:none;
  }

  .leoHero__vertical,
  .leoHero__number{
    display:none;
  }

  .leoHero__scroll{
    left:auto;
    right:14px;
    bottom:21px;
  }

  .leoHero__scroll span{
    color:#fff !important;
  }

  .leoHero__scroll i{
    background:rgba(255,255,255,.25);
  }

  .leoHero__scroll i::after{
    background:#fff;
  }


  /* MARQUEE */

  .leoMarquee__track span{
    font-size:9px;
  }


  /* SECTION */

  .leoSectionHead__en{
    font-size:12px;
  }

  .leoSectionHead__jp{
    font-size:10px;
  }


  /* ABOUT */

  .leoAbout{
    padding:84px 0 102px;
  }

  .leoAbout__grid{
    display:block;
  }

  .leoAbout__body{
    margin-top:43px;
    padding-right:0;
  }

  .leoAbout__title{
    width:100%;

    font-size:27px;
    line-height:1.72;
  }

  .leoAbout__title > span{
    white-space:normal;
  }

  .leoAbout__text{
    width:100%;

    margin:32px 0 0;

    font-size:13px;
    line-height:2.05;
  }

  .leoAbout__text p{
    margin-bottom:19px;
  }

  .leoCircleLink{
    width:108px;
    height:108px;

    margin:37px 0 0 auto;
  }

  .leoCircleLink span{
    font-size:8px;
  }

  .leoAbout__word{
    bottom:-14px;
    font-size:84px;
  }


  /* SERVICE */

  .leoService{
    padding:84px 0 94px;
  }

  .leoService__intro{
    display:block;
    margin-bottom:43px;
  }

  .leoService__title{
    margin-top:40px;

    font-size:26px;
    line-height:1.72;
  }

  .leoService__titleLine{
    white-space:normal;
  }

  .leoServiceItem{
    min-height:0;

    padding:31px 0 32px;

    grid-template-columns:
      30px
      1fr
      31px;

    align-items:start;
  }

  .leoServiceItem:hover{
    padding-left:0;
    padding-right:0;

    background:transparent !important;
  }

  .leoServiceItem__number{
    grid-column:1;
    grid-row:1;

    font-size:10px;
  }

  .leoServiceItem__title{
    grid-column:2;
    grid-row:1;
  }

  .leoServiceItem__title p{
    font-size:9px;
  }

  .leoServiceItem__title h3{
    font-size:20px;
  }

  .leoServiceItem__text{
    grid-column:2 / 4;
    grid-row:2;

    margin-top:20px;

    font-size:12px;
    line-height:1.95;
  }

  .leoServiceItem__tags{
    grid-column:2 / 4;
    grid-row:3;

    margin-top:18px;

    display:flex;
  }

  /*
  前回よりSPタグを読みやすく
  */
  .leoServiceItem__tags span{
    padding:7px 9px;

    font-size:8px;

    line-height:1.2;
  }

  .leoServiceItem > a{
    grid-column:3;
    grid-row:1;
  }


  /* WORKS */

  .leoWorks{
    padding:86px 0 100px;
  }

  .leoWorks__head{
    display:block;

    margin-bottom:47px;
  }

  .leoWorks__lead{
    margin-top:38px;

    font-size:15px;
    line-height:1.9;
  }

  .leoWorks__grid{
    display:block;
  }

  /*
  案件ごとの余白を増やす
  */
  .leoWork,
  .leoWork--main,
  .leoWork--ikedia,
  .leoWork--toji{
    width:100%;

    margin:0 0 58px;
  }

  .leoWork:last-child{
    margin-bottom:0;
  }

  .leoWork__visual,
  .leoWork--main .leoWork__visual,
  .leoWork--toji .leoWork__visual{
    aspect-ratio:16 / 10;
  }

  .leoWork__image--future,
  .leoWork__image--nichiyu,
  .leoWork__image--ikedia,
  .leoWork__image--toji,
  .leoWork__image--ishigaki{
    object-position:center center;
  }

  .leoWork__hover{
    display:none;
  }

  .leoWork__meta{
    margin-top:17px;
  }

  .leoWork__category{
    margin-bottom:7px !important;

    font-size:9px !important;
    line-height:1.5;
  }

  .leoWork__meta h3{
    font-size:19px;
  }

  .leoWork__meta span{
    margin-top:6px;

    font-size:12px;
    line-height:1.6;
  }

  .leoWork__arrow{
    font-size:17px;
  }

  .leoWorks__more{
    margin-top:52px;
  }

  .leoWorks__more a{
    width:185px;

    font-size:9px;
  }


  /* PHILOSOPHY */

  .leoWhy{
    min-height:auto;

    display:block;
  }

  .leoWhy__visual{
    min-height:430px;
  }

  .leoWhy__visual img{
    object-position:51% center;
  }

  .leoWhy__content{
    padding:72px 20px 86px;
  }

  .leoWhy__catch{
    margin-top:39px;

    font-size:12px;
  }

  .leoWhy__title{
    font-size:30px;
  }

  .leoWhy__title span{
    white-space:normal;
  }

  .leoWhy__text{
    margin-top:30px;

    font-size:13px;
    line-height:2.05;
  }


  /* STRENGTH */

  .leoStrength{
    padding:74px 0 84px;
  }

  .leoStrength__grid{
    display:block;

    border-top:1px solid rgba(17,17,17,.07);
  }

  .leoStrengthItem{
    min-height:0;

    padding:35px 22px 40px;

    border-left:0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(17,17,17,.07);

    background:transparent !important;
  }

  .leoStrengthItem:first-child{
    border-left:0 !important;
  }

  .leoStrengthItem:last-child{
    border-bottom:0;
  }

  .leoStrengthItem:hover{
    background:transparent !important;
  }

  .leoStrengthItem__no{
    margin-bottom:30px !important;

    font-size:9px !important;
  }

  .leoStrengthItem h3{
    font-size:21px;
  }

  .leoStrengthItem span{
    font-size:8px;
  }

  .leoStrengthItem > p:last-child{
    margin-top:24px;

    font-size:12px;
    line-height:1.95;
  }


  /* CONTACT */

  .leoContact__inner{
    min-height:520px;

    padding:76px 0 158px;
  }

  .leoContact__label{
    margin-bottom:30px;
  }

  .leoContact__title{
    font-size:29px;
    line-height:1.67;
  }

  .leoContact__text{
    margin-top:24px;

    font-size:12px;
    line-height:2;
  }

  /*
  SPボタンを前より軽く
  */
  .leoContact__button{
    left:0;
    right:auto;

    bottom:50px;

    width:100%;
    height:72px;

    padding:0 22px;
  }

  .leoContact__button:hover{
    width:100%;
    transform:none;
  }

  .leoContact__button span{
    font-size:14px;
  }

  .leoContact__button small{
    margin-bottom:5px;

    font-size:8px;
  }


  /* FOOTER */

  .leoFooter{
    padding-top:45px;
  }

  .leoFooter__top{
    align-items:flex-start;
    gap:35px;
  }

  .leoFooter__logo{
    width:68px;
  }

  .leoFooter__nav{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px 24px;
  }

  .leoFooter__nav a{
    font-size:9px;
  }

  .leoFooter__bottom{
    display:block;

    font-size:9px;
  }

  .leoFooter__copy{
    margin-top:21px !important;
  }

  .leoCursor{
    display:none;
  }

}


/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:390px){

  .leoHero__title{
    font-size:34px;
  }

  .leoAbout__title{
    font-size:25px;
  }

  .leoService__title{
    font-size:24px;
  }

  .leoWhy__title{
    font-size:28px;
  }

  .leoContact__title{
    font-size:27px;
  }

}


/* =========================================================
REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .leoReveal{
    opacity:1 !important;

    transform:none !important;

    transition:none !important;
  }

  .leoMarquee__track,
  .leoHero__scroll i::after,
  .leoLoading__line::after{
    animation:none !important;
  }

  .leoWork__image{
    transition:none !important;
  }

}/* End custom CSS */