@charset "UTF-8";
/*--------------------------------------------
COLUMN
---------------------------------------------*/
@media print,screen and ( width > 750px ){
#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) )
}
  }
/*--------------------------------------------
SEARCH
---------------------------------------------*/
@media screen and ( width <= 750px ){
#searchSp{
    background-color: var(--primary);
    padding-block:calc( 40 var(--remBase) )
}
    #searchSp .selectWrapper + .selectWrapper{
      margin-top: calc( 32 var(--remBase) );
    }
    #searchSp .selectWrapper{
      height: calc( 82 var(--remBase) );
      border-radius: calc( 10 var(--remBase) );
      position: relative;
      background-color: #fff;
    }
      #searchSp .selectWrapper:before, #searchSp .selectWrapper:after{
        content:"";
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        z-index: 1;
        font-size: 0;
      }
      #searchSp .selectWrapper:before{
        left: calc( 56 var(--percentBase) );
      }
        #searchSp .selectWrapper:nth-of-type(1):before{
          background-image: url("../../images/ui/icon/bag.svg");
          width: calc( 40 var(--percentBase) );
          height: calc( 36 var(--remBase) );
          top: calc( 23 var(--remBase) );
        }
        #searchSp .selectWrapper:nth-of-type(2):before{
          background-image: url("../../images/ui/icon/mappin.svg");
          width: calc( 40 var(--percentBase) );
          height: calc( 55 var(--remBase) );
          top: calc( 14 var(--remBase) );
        }
        #searchSp .selectWrapper:nth-of-type(3):before{
          background-image: url("../../images/ui/icon/search01.svg");
          aspect-ratio: 1;
          height: calc( 40 var(--remBase) );
          top: calc( 21 var(--remBase) );
        }
      #searchSp .selectWrapper:after{
        height: calc( 50 var(--remBase) );
        top: calc( 16 var(--remBase) );
        right: calc( 55 var(--percentBase) );
        background-image: url("../../images/ui/arrow/circle/down01.svg");
        aspect-ratio: 1;
      }
      #searchSp .selectWrapper > select{
        padding-left: calc( 112 var(--percentBase) );
        font-size: 3.2rem;
        color:#284B66;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 0;
        font-weight: 700;
        appearance: none;
      }
    #searchSp .keywords{
      margin-top: calc( 30 var(--remBase) );
    }
      #searchSp .keywords label{
        border-radius: calc( 5 var(--remBase) );
        grid-template-columns: auto calc( 30 var(--percentBase) );
        column-gap: calc( 16 var(--percentBase) );
        font-size: 2.4rem;
        display: grid;
        align-items: center;
        justify-content: start;
        font-weight: 700;
        color:white;
      }
        #searchSp .keywords label:after{
          height: calc( 20 var(--remBase) );
          content:"";
          display: block;
          background: url("../../images/ui/arrow/down01.svg") center / contain no-repeat;
          font-size: 0;
        }
      #searchSp .keywords input{
        margin-top: calc( 10 var(--remBase) );
        height: calc( 70 var(--remBase) );
        font-size: 2.8rem;
        padding-left: calc( 20 var(--percentBase) );
        background-size: auto calc( 36 var(--remBase) );
        background-position: calc( 594 var(--remBase) ) calc( 17 var(--remBase) );
        border-radius: calc( 10 var(--remBase) );
        background-color: white;
        background-repeat: no-repeat;
        background-image: url("../../images/ui/icon/search02.svg");
        font-weight: 700;
        width: 100%;
      }
        #searchSp .keywords input::placeholder{
          color:#ABB8C3;
        }
  }
@media print,screen and ( width > 750px ){
#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 a{
        font-size: calc( 12 var(--remBase) );;
        line-height: calc( 26 / 12 );;
      }
  }
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
  background-position: center;
  background-size: cover;
}
#footer .sns{
    display: grid;
    grid-auto-flow:column;
  }
#footer .sns img{
      aspect-ratio: 1;
    }
#footer .links a{
      color:#fff;
      font-weight: 700;
      display: grid;
      justify-content: start;
      align-items: center;
    }
#footer .links a:before{
        content:"";
        font-size: 0;
        background: url("../../images/ui/arrow/right01.svg") center / contain no-repeat;
      }
@media screen and ( width <= 750px ){
#footer{
    padding-top: calc( 52 var(--remBase) );
    background-image: url("../../images/footer/bg_sp.png");
    height: calc( 600 var(--remBase) )
}
    #footer .links{
      padding-inline:calc( 85 var(--percentBase) );
    }
        #footer .links > li + li{
          margin-top: calc( 20 var(--remBase) );
        }
      #footer .links a{
        font-size: calc( 24 var(--remBase) );;
        line-height: calc( 38 / 24 );;
        grid-template-columns: calc( 12 * 100% / 460 ) auto;
        column-gap: calc( 16 * 100% / 460 );
      }
        #footer .links a:before{
          height: calc( 16 var(--remBase) );
        }
    #footer .sns{
      margin-top: calc( 56 var(--remBase) );
      column-gap:calc( 16 var(--percentBase) );
      justify-content: center;
    }
      #footer .sns img{
        height: calc( 66 var(--remBase) );
      }
    #footer .logo{
      display: block;
      width:fit-content;
      margin-top: calc( 66 var(--remBase) );
      margin-left: calc( 146 var(--percentBase) );
    }
      #footer .logo img{
        height: calc( 72 var(--remBase) );
      }
  }
@media print,screen and ( width > 750px ){
#footer{
    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{
      grid-column:2;
      grid-row: 4;
      justify-content: start;
      column-gap:calc( 8 * 100% / 179 );
    }
      #footer .sns img{
        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{
        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{
          height: calc( 8 var(--remBase) );
        }
  }