@charset "UTF-8";

@font-face {font-family: 'LINE Seed JP_OTF';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local('LINE Seed JP_OTF Regular'),
       local('LINESeedJP_OTF-Regular'),
         url('../font/LINESeedJP_OTF_Rg.woff2') format('woff2');
}
@font-face {font-family: 'LINE Seed JP_OTF';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local('LINE Seed JP_OTF Bold'),
       local('LINESeedJP_OTF-Bold'),
         url('../font/LINESeedJP_OTF_Bd.woff2') format('woff2');
}

:root {
  --std-clr:   #333;
  --clr-lp-01: #1f4dc5;
  --clr-lp-02: #d1e1ff;
  --clr-lp-03: #ef7a00;
  --inner-width-16: clamp(1000px,-1.5rem + 99.6vw,1576px);
  --inner-width-12: clamp(1000px,-1.5rem + 99.6vw,1256px);
  --inner-width-10: min(96%,1000px);
  --inner-gap: 12px;
  --fz-h3: 32px;
  --fz-L: clamp(18px,.786rem + 1.51vw,28px);
  --fz-M: clamp(16px,.729rem + 1.2vw,24px);
  --fz-S: clamp(14px,.672rem + .9vw,20px);
  --bdr12: 12px;
  --bdr20: 20px;
  --filter3: drop-shadow(0 0 6px rgba(200, 200, 200, 0.3));
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / LP01 ->                     */
/* =====>=====>=====>=====>=====>=====>===== */

#lp {



  font-family:
    'LINE Seed JP_OTF',
    'Noto Sans CJK JP','Noto Sans JP',
    'BIZ UDPGothic',
    sans-serif;


section {
  padding-top: 0;

  .inner > p:first-child {
    margin-bottom: var(--adj-60);
  }
}
p,
dt,
small {
  font-weight: 700;
}
p {
  font-size: var(--fz-M);
  text-align: center;
}
footer {
  padding: 60px 0 160px;
  background-color: var(--clr-lp-01);

  &::before {
    display: none;
  }
  * {
    font-size: var(--fz-S);
  }
  small {
    margin-top: var(--adj-30);
    font-size: var(--fz-M);
  }
}

/*===== #MV =====*/
#MV.lp {
    display: grid;align-content: start;
  height: fit-content;
  max-height: 1080px;
  padding-block: var(--adj-30) 30px;
  background-image: url(../img/lp01/mvbg2.webp);

  .mvimg {
    width: min(96%,1280px);height: auto;
    min-width: 1000px;
    margin-inline: auto;
    aspect-ratio: 64/45;
  }
}

/*===== .inner =====*/
.inner {
  --inner-width: var(--inner-width-12);

    display: grid;
    grid-template-columns: 1fr var(--inner-width) 1fr;
    column-gap: var(--inner-gap);
  width: auto;
  max-width: unset;
  margin-inline: auto;
  padding: 0;

  > * {
    grid-column: 2;
  }
}

/*===== .modLP =====*/
.modLP {
    display: grid;place-items: center;align-content: center;
    row-gap: 10px;
  max-height: 160px;
  margin-bottom: var(--adj-60);
  padding-block: 2.4em;
  background-color: var(--clr-lp-02);

  h2,span {
    color: var(--clr-lp-01);
    font-weight: 700;
  }
  h2 {
    font-size: clamp(24px,.822rem + 3.01vw,44px);
  }
  span {
      order: -1;
    margin: 0;
    font-family: inherit;
    font-size: var(--fz-S);
    letter-spacing: 0;
  }
  &.m80 {
    margin-bottom: var(--adj-80);
  }
  &.r {
    background-color: var(--clr-lp-01);

    h2,span {
      color: var(--clr-lp-02);
    }
  }
}

/*===== .ftrBtm =====*/
.ftrBtm {
  --width: clamp(230px,1.875rem + 19.53vw,280px);

  width: 100%;
  margin-top: 50px;
  padding-block: .5em;
  border-top: 1px solid var(--clr-base);
  background-color: var(--clr-main);

  p br {
    display: none;
  }
}
/* 20250825追加 */
.ftrBtm {
  position: fixed;inset: auto auto 0;
}


/*===== .ctc =====*/
.ctc {
  grid-template-columns: repeat(2,var(--width));
  gap: var(--adj-20);

  .btn {
    --btn-width: 100%;
    --btn-height: 60px;

    color: var(--clr-base);
    font-weight: 700;
    font-size: var(--fz-S);
    border: 2px solid var(--clr-base);
    border-radius: 9999px;
    filter: var(--filter3);

    &:nth-of-type(1) {background-color: #ff6f61;}
    &:nth-of-type(2) {background-color: #00b900;}
    &:nth-of-type(3) {background-color: var(--clr-lp-01);}
  }
}

/*===== ORDERED =====*/
.ftrBtm .ctc {
    justify-content: center;
    grid-template-columns: repeat(3,var(--width));
    gap: 10px;
  margin-top: .5em;

  .btn {
    --btn-height: 50px;

    span {
      font-weight: inherit;
      font-size: inherit;
    }
    span:nth-last-of-type(2) {
      display: none;
    }
    img {
      max-width: 30px;
    }
  }
}

/*===== .btnLine =====*/
.btnLine {
  --btn-width: 760px;
  --btn-height: 90px;

  margin-top: var(--adj-30);
  border: 2px solid var(--clr-base);
  border-radius: var(--bdr12);
  background-color: #00b900;

  img {
    width: min(70%,530px);
    aspect-ratio: 265/26;
  }
}

/*===== .items =====*/
.items,
.faq {
  --gtc-size: repeat(2,1fr);
}

.items {
  grid-template-columns: var(--gtc-size);
  gap: var(--adj-40) var(--adj-60);

  img {
    width: 100%;height: auto;
  }
}

/*===== .flowBox =====*/
.flowBox {
  --arw-size: 30px;

    justify-content: space-between;
    grid-template-columns: 1fr min(36%,360px);
    gap: var(--adj-60);
  padding: var(--adj-60);
  position: relative;
  border-radius: var(--bdr20);
  background-color: var(--clr-base);
  filter: var(--filter3);

  &:not(:last-child)::after {
    width: var(--arw-size);height: var(--arw-size);
    position: absolute;inset: auto auto calc(var(--arw-size) * -2);
    background: url(../img/common/arw01.svg) no-repeat;
    background-size: contain;
    content: '';
  }
  & + .flowBox {
    margin-top: calc(var(--arw-size) * 3);
  }
  dl {
    width: 100%;
  }
  dt {
    font-size: var(--fz-h3);

    span {
      color: var(--clr-lp-01);
      font-size: var(--fz-S);

      em {
        margin-left: 10px;
        font-weight: inherit;
        font-size: clamp(28px,1.343rem + 1.81vw,40px);
      }
    }
  }
  dd {
    margin-top: 1em;
    font-size: var(--fz-S);

    span {
      color: var(--clr-lp-03);
    }
  }
  span {
    display: block;
    font-weight: 700;
  }
}

/*===== .vBox =====*/
.vBox {
  padding: var(--adj-50) var(--adj-60);
  border-radius: var(--bdr20);
  background-color: var(--clr-base);
  background-image: url(../img/lp01/smiley.svg);
  background-position-x: right 20px;background-position-y: 10px;
  background-repeat: no-repeat;
  background-size: 280px;

  & + .vBox {
    margin-top: var(--adj-60);
  }
  li {
    font-size: var(--fz-S);

    b {
      color: var(--clr-sub-03);
    }
    &:nth-of-type(1) {
      color: var(--clr-lp-01);
      font-weight: 700;
      font-size: var(--fz-h3);
    }
    &:nth-of-type(2) {
      font-weight: 700;

      span {
        display: inline-block;
        margin-right: 1.5em;
        padding: .4em 1em;
        color: var(--clr-base);
        font-weight: 700;
        border-radius: 10px;
        background-color: var(--clr-sub-03);
      }
    }
    &:nth-of-type(3) {
      padding-top: var(--adj-20);
      border-top: 1px solid var(--clr-lp-02);
    }
  }
  li + li {
    margin-top: var(--adj-20);
  }
}

/*===== .faq =====*/
.faq {
  grid-template-columns: var(--gtc-size);
  gap: var(--adj-40);

  .faqBox {
      align-self: stretch;
    padding: var(--adj-40);
    border-radius: var(--bdr20);
    background-color: #f4f8f9;
  }
  .qq {
      display: grid;align-items: center;
      grid-template-columns: max-content 1fr;
      column-gap: var(--adj-20);
    font-size: var(--fz-M);

    &::before {
      width: 48px;height: auto;
      background: url(../img/lp01/ico_qa.webp) no-repeat;
      background-size: contain;
      aspect-ratio: 24/31;
      content: '';
    }
  }
  .aa {
    margin-top: var(--adj-20);
    font-size: var(--fz-S);
  }
}

/*===== #ctcForm =====*/
#ctcForm {
  --form-width: 100%;
  --input-height: 80px;

  > dl {
    display: grid;
    grid-template-columns: 400px 1fr;
    row-gap: var(--adj-20);
  }
  dt,dd {
    margin: 0;
  }
  dt {
      align-self: stretch;
    padding: .4em 20px .4em 1.5em;
    color: var(--clr-base);
    font-weight: 700;
    font-size: var(--fz-M);
    border-radius: var(--bdr20) 0 0 var(--bdr20);
    background-color: var(--clr-main);

    span.req {
        display: grid;place-items: center;
      color: var(--clr-main);
      background-color: var(--clr-base);
    }
  }
  dd {
    border: 2px solid var(--clr-main);

    .error-msg {
      position: absolute;inset: 5px auto auto 10px;
      font-weight: 700;
    }
  }
  input[type="text"],
  input[type="email"],
  textarea {
    box-shadow: unset;
  }
  textarea {
    padding-block: 2em 1em;
  }
  .btnA {
    --btn-height: 70px;

    font-weight: 700;
    background-color: var(--clr-sub-03);
  }
  .btnA:hover {
    background-color: var(--clr-sub-04);
  }
}


#sec01 {
  background:
    url(../img/lp01/bg_water-m.png) no-repeat,
    url(../img/lp01/ptn03.png) repeat;
  background-position: center,left top;
  background-size: 100%,4px;

  .btnLine {
    margin-block: var(--adj-70) var(--adj-50);
  }
  .feBox {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
    gap: 30px min(3%,28px);

    img {
      width: min(100%,400px);height: auto;
    }
  }
  .vendor {
    padding: var(--adj-20);
    border: 3px solid var(--clr-lp-01);
    border-radius: var(--bdr12);
    background: url(../img/lp01/ptn01.png);

    dl {
      width: min(70%,850px);
      margin-left: var(--adj-30);
    }
    dt {
      color: var(--clr-sub-03);
      font-style: italic;
      font-size: var(--fz-M);
    }
    dd {
      margin-top: .5em;
      font-size: var(--fz-S);
    }
    img {
      margin: -210px 0 0 auto;
    }
  }
  .vendor + dl {
      display: grid;
      grid-template-columns: min(38%,380px) 1fr;
    min-height: 80px;
    margin-top: var(--adj-20);
    border: 3px solid var(--clr-lp-03);
    border-radius: var(--bdr12);
    background-color: var(--clr-base);

    dt,dd {
      height: 100%;
      padding: .5em 1em;
    }
    dt {
      color: var(--clr-base);
      font-size: var(--fz-M);
      background-color: var(--clr-lp-03);
    }
    dd {
      color: var(--clr-lp-03);
      font-size: var(--fz-S);
    }
  }
}
#sec02 {
  .items {
    row-gap: var(--adj-50);

    img {
      width: 100%;height: auto;
    }
  }
}
#sec03 {
  border-radius: var(--bdr20);
  background: url(../img/lp01/ptn02.png);

  .ctc {
    --width: min(49%,280px);

    column-gap: 10px;
  }
}
#sec04 {
  .inner {
    --inner-width: var(--inner-width-10);
  }
  .ctc {
    --width: 360px;

      justify-content: center;
    margin-top: 10px;
  }
}
#sec05 {
  background: url(../img/lp01/ptn04.webp);

  p {
    color: var(--clr-base);
  }
}
#sec06 {
  background: url(../img/lp01/ptn01.png);

  .inner {
    --inner-width: var(--inner-width-16);
  }
  .items img {
    border-radius: var(--bdr20);
    filter: var(--filter3);
  }
}
#contact {
  .inner {
    --inner-width: var(--inner-width-10);
  }
  p {
    font-size: var(--fz-S);
  }
}



}

@media (1024px <= width < 1280px){

#lp #sec01 .vendor img {
  width: 180px;height: auto;
  margin-top: -60px;
}

}