@charset "UTF-8";
/*--------------------------------------------
COLUMN
---------------------------------------------*/
#column01{
  display: grid;
  align-items: start;
  justify-content: start;
  column-gap: calc( 33 var(--percentBase) );
  grid-template-columns: calc( 220 var(--percentBase) ) calc( 1100 var(--percentBase) );
  padding-top: calc( 60 var(--remBase) );
  padding-bottom: calc( 38 var(--remBase) );
}
/*--------------------------------------------
SIDEBAR LINK
---------------------------------------------*/
#sideBarLink{
  position: sticky;
  top: calc( var(--headerHeight) + ( 60 var(--remBase) ) );
}
#sideBarLink .logo img{
      width: 100%;
      height: auto;
    }
#sideBarLink :where( .search , .archive ){
    display: grid;
    align-items: center;
    justify-content: start;
    font-size: calc( 18 var(--remBase) );;
    line-height: calc( 25 / 18 );;
    column-gap: calc( 20 * 100% / 220 );
    grid-template-columns: calc( 24 * 100% / 220 ) auto;
    font-weight: 700;
  }
#sideBarLink :where( .search , .archive ):before{
      content:"";
      display: block;
      background-repeat: round;
      aspect-ratio: 1;
      background-size: contain;
      background-position: center;
      font-size: 0;
    }
#sideBarLink .search{
    margin-top: calc( 36 var(--remBase) );
  }
#sideBarLink .search:before{
      background-image: url("../images/ui/icon/search01.svg");
    }
#sideBarLink .archive{
    margin-top: calc( 20 var(--remBase) );
  }
#sideBarLink .archive:before{
      background-image: url("../images/ui/icon/time.svg");
    }
#sideBarLink .support{
    margin-top: calc( 34 var(--remBase) );
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: start;
    background-color: #FB4C6D;
    color:white;
    width: 100%;
    font-size: 1.6rem;
    padding-left: calc( 8 * 100% / 220 );
    column-gap: calc( 8 * 100% / 220 );
    grid-template-columns: calc( 20 * 100% / 212 ) auto;
    height: calc( 46 var(--remBase) );
    border-radius: calc( 5 var(--remBase) );
  }
#sideBarLink .support:before{
      content:"";
      display: block;
      background: url("../images/ui/icon/mail01.svg") center / contain no-repeat;
      aspect-ratio: 1;
      font-size: 0;
    }
/*--------------------------------------------
SEARCH
---------------------------------------------*/
#searchPc{
  background-color: #E9F5F7;
  padding-top: calc( 30 var(--remBase) );
  padding-inline:calc( 30 * 100% / 1100 );
  padding-bottom: calc( 40 var(--remBase) );
}
#searchPc .box{
    background-color: #fff;
    padding-top: calc( 30 var(--remBase) );
    padding-bottom: calc( 20 var(--remBase) );
  }
#searchPc .box h3 img{
        margin-inline: auto;
        height: calc( 69 var(--remBase) );
      }
#searchPc .box p{
      font-size: calc( 14 var(--remBase) );;
      line-height: calc( 24 / 14 );;
      padding-inline: calc( 59 * 100% / 1040 );
      margin-top: calc( 20 var(--remBase) );
    }
#searchPc > ul{
    margin-top: calc( 30 var(--remBase) );
  }
#searchPc > ul > li ~ li{
        margin-top: calc( 30 var(--remBase) );
      }
#searchPc > ul > li h3 img{
          height: calc( 44 var(--remBase) );
        }
#searchPc .list-search01{
    display: flex;
    flex-wrap:wrap;
    margin-top: calc( 20 var(--remBase) );
  }
#searchPc .list-search01 li{
      display: flex;
      align-items: center;
      font-size: calc( 16 var(--remBase) );;
      line-height: calc( 26 / 16 );;
    }
#searchPc .list-search01 li:not(:last-child):after{
      content:"  |  ";
      white-space:pre;
      color:#A9CCD0;
    }
#searchPc .list-search01 a{
      font-weight: 700;

    }
#searchPc .list-search02{
    margin-top: calc( 20 var(--remBase) );
  }
#searchPc .list-search02 > li{
      display: grid;
      grid-template-columns: calc( 170 * 100% / 1040 ) calc( 870 * 100% / 1040 );
    }
#searchPc .list-search02 > li ~ li{
        margin-top: calc( 15 var(--remBase) );
      }
#searchPc .list-search02 > li p{
        font-weight: 700;
        font-size: calc( 16 var(--remBase) );;
        line-height: calc( 26 / 16 );;
      }
#searchPc .list-search02 ul{
      display: flex;
      flex-wrap: wrap;
      column-gap: calc( 32 * 100% / 870 );
      row-gap: calc( 15 var(--remBase) );
    }
#searchPc .list-search02 li li{
      position: relative;
    }
#searchPc .list-search02 li li:after{
        position:absolute;
        content:"";
        display: block;
        height: calc( 15 var(--remBase) );
        width: 1px;
        background-color: #A9CCD0;
        top: calc( 5.5 var(--remBase) );
        right:calc( -15.5 var(--remBase) )
      }
#searchPc .list-search02 li li a{
      font-size: calc( 12 var(--remBase) );;
      line-height: calc( 26 / 12 );;
    }
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
  background-position: center;
  background-size: cover;
  background-image: url("../images/footer/bg_pc.png");
  background-repeat: repeat-x;
  height: calc( 300 var(--remBase) );
  display: grid;
  grid-template-columns:calc( 143 var(--percentBase) ) calc( 179 var(--percentBase) ) 1fr auto calc( 85 var(--percentBase) );
  grid-template-rows:calc( 11 var(--remBase) ) auto calc( 12 var(--remBase) ) auto 1fr;
  padding-top: calc( 77 var(--remBase) );
}
#footer .logo{
    grid-column:2;
    grid-row:2;
    align-self:end;
  }
#footer .sns{
    display: grid;
    grid-auto-flow:column;
    grid-column:2;
    grid-row: 4;
    justify-content: start;
    column-gap:calc( 8 * 100% / 179 );
  }
#footer .sns img{
      aspect-ratio: 1;
      height: calc( 33 var(--remBase) );
    }
#footer .links{
    grid-column:4;
    grid-row:1/5;
  }
#footer .links > li + li{
        margin-top: calc( 11 var(--remBase) );
      }
#footer .links a{
      color:#fff;
      font-weight: 700;
      display: grid;
      justify-content: start;
      align-items: center;
      font-size: calc( 14 var(--remBase) );;
      line-height: calc( 19 / 14 );;
      grid-template-columns: calc( 6 var(--remBase) ) auto;
      column-gap: calc( 8 var(--remBase) );
    }
#footer .links a:before{
        content:"";
        font-size: 0;
        background: url("../images/ui/arrow/right01.svg") center / contain no-repeat;
        height: calc( 8 var(--remBase) );
      }