/* =================================
   design fv
================================= */

.design-fv{
  position:relative;
  overflow:hidden;
  line-height:0;
}

.design-fv picture{
  display:block;
}

.design-fv .fv-img{
  display:block;
  width:100%;
  height:auto;
  transform:scale(1.03);
  transition:transform 1.6s ease-out;
}

.design-fv.is-show .fv-img{
  transform:scale(1);
}

.design-fv::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:100%;
  height:200px;
  pointer-events:none;
}


/* =================================
   design intro
================================= */

.design-intro{
  padding:60px 20px;
  background:#fff;
}

.design-intro-inner{
  width:min(1200px, 100%);
  margin:0 auto;
}

.design-intro-title{
  transform:translateY(20px);
  transition:transform 1s ease-out;

  font-size:clamp(32px, 2.8vw, 48px);
  line-height:1.8;
  letter-spacing:.08em;
  font-weight:400;
  color:#111;
}

.design-intro-copy{
  margin-top:60px;
  transform:translateY(20px);
  transition:transform 1s ease-out .25s;
}

.design-intro-copy p{
  font-size:clamp(15px, 1.3vw, 24px);
  line-height:2.3;
  font-weight:400;
  color:#111;
}

.design-intro-inner.is-show .design-intro-title,
.design-intro-inner.is-show .design-intro-copy{
  transform:translateY(0);
}

.design-intro-title sub{
  font-size:32%;
}


/* =================================
   scroll motion
================================= */

.js-scroll-fade,
.landscape-block,
.designer-section{
  transform:translateY(20px);
  transition:transform 1s ease-out;
}

.js-scroll-fade.is-show,
.landscape-block.is-show,
.designer-section.is-show{
  transform:translateY(0);
}


/* =================================
   landplan title
================================= */

.landplan-title{
  background:#fff;
  padding:36px 20px 18px;
}

.landplan-title-inner{
  width:min(1200px,100%);
  margin:0 auto;
}

.landplan-en{
  font-family:"Cinzel", serif;
  font-size:clamp(54px, 6vw, 80px);
  line-height:.9;
  letter-spacing:.05em;
  font-weight:400;
  color:#b8b3b3;
}


/* =================================
   landplan main
================================= */

.landplan-main{
  position:relative;
  overflow:hidden;
  background:#fff;
}

.landplan-main::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:url("/content/dam/31sumai/mfr/L2402/asset/images/design/main.jpg") center center / cover no-repeat;
  transform:scale(1.2);
  filter:blur(13px);
  opacity:.5;
  z-index:0;
}

.landplan-image-wrap{
  position:relative;
  z-index:2;
  width:min(1200px,100%);
  margin:0 auto;
}

.landplan-image{
  display:block;
  width:100%;
  height:auto;
}

.landplan-copy{
  position:absolute;
  top:70px;
  left:0;
  right:0;
  width:min(980px, calc(100% - 40px));
  margin:0 auto;
  z-index:3;

  font-size:clamp(28px,3vw,64px);
  line-height:1.5;
  letter-spacing:.08em;
  color:#111;
}

.landplan-note{
  position:absolute;
  right:20px;
  bottom:10px;
  z-index:3;
  margin:0;

  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
  line-height:1.6;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}


/* =================================
   landplan section
================================= */

.landplan-section{
  padding:0 20px;
}

.landplan-section-inner{
  width:min(1200px,100%);
  margin:0 auto;
}

.landplan-lead{
  width:min(980px,100%);
  margin:0 auto 70px;
}

.landplan-lead p{
  font-size:clamp(15px,1.2vw,20px);
  line-height:2.5;
  color:#111;
}

.landplan-diagram{
  margin-top:70px;
  margin-bottom:50px;
}

.landplan-diagram picture,
.landplan-diagram img{
  display:block;
  width:100%;
  height:auto;
}

.landplan-text{
  width:min(980px,100%);
  margin:70px auto 0;
}

.landplan-heading{
  font-size:clamp(24px, 2.8vw, 44px);
  line-height:1.6;
  font-weight:400;
  color:#111;
}

.landplan-body{
  margin-top:50px;
}

.landplan-body p{
  font-size:clamp(15px,1.2vw,19px);
  line-height:2.5;
  color:#111;
}

.landplan-body p + p{
  margin-top:24px;
}


/* =================================
   landscape
================================= */

.landscape-section{
  padding:0 20px 100px;
}

.landscape-inner{
  width:min(1200px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:30px;
  align-items:start;
}

.landscape-block{
  min-width:0;
}

.landscape-block:nth-child(2){
  transition-delay:.25s;
}

.landscape-title{
  margin-bottom:24px;
  font-size:clamp(18px,1.4vw,26px);
  line-height:1.6;
  font-weight:400;
  color:#111;
}

.landscape-title sub{
  font-size:55%;
}

.landscape-image{
  width:100%;
}

.landscape-image picture,
.landscape-image img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}


/* =================================
   designer
================================= */

.designer-section{
  padding:120px 20px;
  background:#000;
}

.designer-inner{
  width:min(980px,100%);
  margin:0 auto;
}

.designer-inner picture,
.designer-inner img{
  display:block;
  width:100%;
  height:auto;
}


/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  .design-fv{
    height:auto;
    min-height:0;
  }

  .design-fv picture,
  .design-fv .fv-img{
    display:block;
    width:100%;
  }

  .design-fv .fv-img{
    height:auto;
    min-height:auto;
    object-fit:contain;
  }

  .design-intro{
    padding:0 20px;
  }

  .design-intro-title{
    font-size:clamp(20px, 6vw, 36px);
    line-height:1.7;
  }

  .design-intro-copy{
    margin-top:35px;
  }

  .design-intro-copy p{
    font-size:14px;
    line-height:2.3;
  }

  .landplan-main{
    background:none;
  }

  .landplan-main::before{
    display:none;
  }

  .landplan-image-wrap{
    width:100%;
  }

  .landplan-copy{
    top:50px;
    font-size:clamp(28px,3vw,64px);
    line-height:1.5;
    letter-spacing:.001em;
  }

  .landplan-note{
    right:8px;
    bottom:8px;
    font-size:10px;
    line-height:1.5;
  }

  .landplan-section{
    padding:70px 20px;
  }

  .landplan-lead{
    margin-bottom:50px;
  }

  .landplan-lead p,
  .landplan-body p{
    font-size:14px;
    line-height:2.3;
  }

  .landplan-diagram{
    margin-top:50px;
  }

  .landplan-text{
    margin-top:50px;
  }

  .landplan-heading{
    font-size:clamp(28px,8vw,42px);
    line-height:1.7;
  }

  .landplan-body{
    margin-top:35px;
  }

  .landscape-section{
    padding:0 20px 70px;
  }

  .landscape-inner{
    grid-template-columns:1fr;
    gap:0;
  }

  .landscape-title{
    margin-bottom:18px;
    font-size:18px;
  }

  .designer-section{
    padding:70px 20px;
  }

}

/* Landplan page: full-screen first view (shared design page is unaffected). */
.landplan-page .design-fv{
  height:100vh;
  height:100svh;
  min-height:0;
  background:#9bc9e8;
}

.landplan-page .design-fv picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.landplan-page .design-fv .fv-img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center center;
}

.landplan-page .landplan-fv-title{
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  margin:0;
  padding-left:.3em;
  transform:translate(-50%,-50%);
  color:#fff;
  font-family:"Times New Roman", "Noto Serif JP", serif;
  font-size:clamp(36px,5.2vw,80px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.3em;
  white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}

.landplan-page .landplan-fv-note{
  position:absolute;
  right:16px;
  bottom:8px;
  z-index:3;
  max-width:calc(100% - 32px);
  margin:0;
  color:#fff;
  font-family:Arial,"Noto Sans JP",sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  text-align:right;
  text-shadow:0 1px 5px rgba(0,0,0,.8);
}

@media screen and (max-width:767px){
  .landplan-page .landplan-fv-title{
    font-size:clamp(28px,8vw,48px);
    letter-spacing:.22em;
    padding-left:.22em;
  }
  .landplan-page .landplan-fv-note{
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    max-width:calc(100% - 20px);
    font-size:10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .landplan-page .design-fv .fv-img{
    transform:none;
    transition:none;
  }
}


/* Responsive SVG copy in the landplan first view. */
.landplan-page .landplan-fv-title{
  width:min(800px,90%);
  padding:0;
  font-size:0;
  line-height:0;
  letter-spacing:0;
  text-shadow:none;
}
.landplan-page .design-fv .landplan-fv-title picture{
  position:static;
  display:block;
  width:100%;
  height:auto;
}
.landplan-page .landplan-fv-title img{
  display:block;
  width:100%;
  height:auto;
}
@media screen and (max-width:767px){
  .landplan-page .landplan-fv-title{
    width:100%;
  }
}