@charset "UTF-8";
/*--------------------------------------------
ACHILLES
---------------------------------------------*/
#will{
  background-image: image-set( url( "../images/achilles/will/bg.avif" ) type( "image/avif" ) , url( "../images/achilles/will/bg.webp" ) type( "image/webp" ) );
  background-repeat: no-repeat;
  background-position: 0;
  background-size: cover;
  position: relative;
  &:before{
    content:"";
    z-index: 0;
    inset: 0;
    position: absolute;
    background-color: color-mix( in srgb , black 50% , transparent );
  }
  > *{
    position: relative;
    z-index: 1;
  }
  @media print,screen and ( width > 768px ){
    background-attachment: fixed;
  }
}
#aim{
  li{
    display: grid;
    align-items: start;
    justify-content: start;
    grid-template-rows: auto 1fr;
    grid-template-columns: calc( 150 * var(--percenteBase) ) 1fr;
    column-gap : calc( 20 * var(--percentBase ) );
  }
  picture{
    grid-column: 1;
    grid-row: 1/-1;
  }
  h3{
    grid-column: 2;
    grid-row: 1;
  }
  li p{
    grid-column: 2;
    grid-row: 2;
  }
}
#results{
  &:before{
    content:"";
    display: block;
    line-height: 1;
    margin-inline : auto;
    background-color: #959393;
    height : calc( 3 * var(--remBase ) );
  }
  footer{
    column-gap : calc( 10 * var(--percentBase ) );
    picture{
      margin-inline: calc( 28 * var(--remBase) );
      height : calc( 80 * var(--remBase ) );
    }
  }
  &:before{
    width : calc( 496 * var(--percentBase ) );
  }
  @media print,screen and ( width > 768px ){
    &:before{
      width : calc( 896 * var(--percentBase ) );
    }
  }
}
:where( #contact , .template-contact ){
  > div{
    > a{
      padding-block : calc( 12 * var(--remBase ) );
    }
  }
  ul{
    &:before{
      content:"";
      display: block;
      font-size: 0;
      background-color: #AFAFAF;
      height: 1px;
      margin-inline : auto;
      margin-bottom : calc( 20 * var(--remBase ) );
    }
  }
  .web{
    padding-block : calc( 12 * var(--remBase ) );
    padding-inline : calc( 24 * var(--remBase ) );
    column-gap : calc( 5 * var(--remBase ) );
  }
  @media screen and ( width <= 768px ){
    ul:before{
      width : calc( 482 * var(--percentBase ) );
    }
    > picture{
      margin-inline : auto;
      width: 60%;
    }
  }
  @media print,screen and ( width > 768px ){
    grid-template-columns: calc( 610 * var(--percentBase) ) calc( 250 * var(--percentBase) );
    column-gap : calc( 20 * var(--percentBase ) );
    dl{
      grid-template-columns: calc( 183 * 100% / 610 ) 1fr;
    }
    ul:before{
      width : calc( 550 * 100% / 610 );
    }
  }
}
#flow{
  > ul:nth-of-type(1){
    a{
      padding-block : calc( 12 * var(--remBase ) );
      padding-inline : calc( 24 * var(--remBase ) );
    }
  }
  > ul:nth-of-type(2){
    h3{
      border-image-source : linear-gradient( var(--green01) , var(--green01) );
      border-image-slice : 0 fill;
      border-image-outset : 0 100vw 0 100vw;
    }
  }
  @media print,screen and ( width > 768px ){
    > ul:nth-of-type(1){
      > li{
        column-gap : calc( 20 * var(--percentBase ) );
        grid-template-columns: repeat( 2 , calc( 550 * var(--percentBase) ) );
      }
    }
  }
}
#step01{
  > picture{
    img{
      width: 52%;
      height: auto;
    }
  }
  > div{
    > ul{
      > li{
        > ol{
          > li:nth-child(1){
            img{
              height : calc( 252 * var(--remBase ) );
            }
          }
          > li:nth-child(2){
            img{
              height : calc( 302 * var(--remBase ) );
            }
          }
        }
      }
    }
  }
  hr{
    width: 80%;
  }
  iframe{
    height : calc( 315 * var(--remBase ) );
    width: auto;
  }
  @media print,screen and ( width > 768px ){
    > div{
      > ul{
        grid-template-columns: repeat( 2 , 1fr );
      }
    }
  }
}
#progress{
  ol{
    position: relative;
    &:before{
      width : calc( 3 * var(--remBase ) );
      top: 0;
      content:"";
      display: block;
      background-color: var(--blue02);
      height: 100%;
      position: absolute;
      z-index: -1;
    }
  }
  i{
    border-radius : 50%;
    aspect-ratio: 1;
    width: auto;
    height : calc( 48 * var(--remBase ) );
    display: grid;
    align-items: center;
    justify-content: center;
    border: solid calc( 3 * var(--remBase) ) var(--blue02);
    font-size : calc( 16 * var(--remBase ) );
    background-color: white;
    position: relative;
    z-index: 1;
  }
  li{
    display: grid;
    align-items: start;
    > div{
      border-color: #ddd;
      background-color: white;
    }
  }
  li:last-child{
    background-color: white;
  }
  @media screen and ( width <= 768px ){
    ol{
      &:before{
        left : calc( 22.5 * var(--percentBase ) );
      }
    }
    li{
      grid-template-columns: calc( 48 * var(--remBase) ) 1fr;
      column-gap : calc( 26 * var(--percentBase ) );
    }
  }
  @media print,screen and ( width > 768px ){
    ol{
      &:before{
        left: 50%;
        translate: -50% 0;
      }
    }
    li{
      > :where( div, i , h3 ){
        grid-row: 1;
      }
      &:nth-child(odd){
        grid-template-columns: calc( 520 * var(--percentBase ) ) calc( 26 * var(--percentBase ) ) calc( 48 * var(--percentBase ) ) calc( 26 * var(--percentBase ) ) auto 1fr;
        grid-template-rows: 1fr;
        > div{
          grid-column: 1;
        }
        > i{
          grid-column: 3;
        }
        > h3{
          grid-column: 5;
        }
      }
      &:nth-child(even){
        grid-template-columns: 1fr auto calc( 26 * var(--percentBase ) ) calc( 48 * var(--percentBase ) ) calc( 26 * var(--percentBase ) ) calc( 520 * var(--percentBase ) );
        grid-template-rows: 1fr;
        > h3{
          grid-column: 2;
        }

        > i{
          grid-column: 4;
        }
        > div{
          grid-column: 6;
        }
      }
      position: relative;
    }
  }
}
/*--------------------------------------------
PRICE
---------------------------------------------*/
#price{
  h2{
    border-image-source : linear-gradient( var(--green01) , var(--green01) );
    border-image-slice : 0 fill;
    border-image-outset : 0 100vw 0 100vw;
  }
  dl{
    > div{
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      column-gap : calc( 10 * var(--percentBase ) );
      row-gap : calc( 10 * var(--remBase ) );
    }
    dt{
      grid-column: 1;
      grid-row: 1;
    }
    > div:before{
      content:"";
      display: block;
      font-size: 0;
      height: 0;
      border : dashed 1px var(--green04);
      grid-column: 2;
      grid-row: 1;
    }
    dd{
      &:nth-of-type(1){
        grid-column: 3;
        grid-row: 1;
      }
      &:nth-of-type(2){
        grid-column: 1/-1;
        grid-row: 2;
      }
    }
  }
  details{
    border-bottom: solid 1px #d5d8dc;
  }
}
#case{
  h2{
    border-image-source : linear-gradient( var(--green01) , var(--green01) );
    border-image-slice : 0 fill;
    border-image-outset : 0 100vw 0 100vw;
  }
}
#voice{
  hgroup{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-rows: 1fr auto auto 1fr;
    height : calc( 60 * var(--remBase ) );
    column-gap : calc( 16 * var(--percentBase ) );
    p:nth-of-type(1){
      font-size: 0;
      grid-column: 1;
      grid-row: 1/-1;
    }
    img{
      height : calc( 60 * var(--remBase ) );
      aspect-ratio: 1;
      width : calc( 60 * var(--remBase ) );
    }
    h3{
      grid-column: 2;
      grid-row: 2;
    }
    p:nth-of-type(2){
      grid-column: 2;
      grid-row: 3;
    }
  }
}
#blog{
  picture{
    height : calc( 200 * var(--remBase ) );
  }
}
#message{
  background-image: radial-gradient(at top left, #FFFFFF 1%, #000000 27%);
}
#faq{
  &:before{
    content:"";
    display: block;
    margin-inline : auto;
    height: 1px;
    background-color: black;
    margin-bottom : calc( 30 * var(--remBase ) );
  }
  > dl{
    > div + div{
      position: relative;
      &:before{
        content:"";
        background : url( "../images/achilles/faq/tree.png" ) center / contain no-repeat;
        display: block;
        aspect-ratio: 1;
        width: auto;
        height : calc( 50 * var(--remBase ) );
        position: absolute;
        left: 50%;
        translate: -50% 0;
        top : calc( -70 * var(--remBase ) );
      }
    }
  }
  @media screen and ( width <= 768px ){
    &:before{
      width : calc( 556 * var(--percentBase ) );
    }
  }
  @media print,screen and ( width > 768px ){
    &:before{
      width : calc( 894 * var(--percentBase ) );
    }
  }
}
#links{
  .box{
    border-color: #b1b1b1;
    margin-inline : auto;
  }
  li li{
    counter-increment: no;
    &:before{
      content: counter(no)".";
      width: 2em;
      text-align: right;
      display: inline-block;
    }
  }
  @media screen and ( width <= 768px ){
    .box{
      width : calc( 516 * var(--percentBase ) );
    }
  }
  @media print,screen and ( width > 768px ){
    .box{
      width : calc( 1076 * var(--percentBase ) );
    }
  }
}