@charset "utf-8";

/*	container
===================================================== */

  .container,
  .container-1920,
  .container-w,
  .container-xl,
  .container-pc,
  .container-sp {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    }
  .container:after,
  .container-1920:after,
  .container-w:after,
  .container-xl:after,
  .container-pc:after,
  .container-sp:after {
		clear: both;
    display: block;
    content: "";
		}
	.container-1920 {
		overflow: hidden;
		}


	@media print, screen and (min-width: 768px) {
		.container-1920 {
			max-width: 1920px;
			}
    .container-xl {
			max-width: 1340px;
			padding-left: 30px;
			padding-right: 30px;
			box-sizing: border-box;
			}
		.container-pc,
		.container {
			max-width: 1060px;
			padding-left: 30px;
			padding-right: 30px;
			box-sizing: border-box;
			}
	}
	@media (max-width: 767px) {
	  .container-xl,
  	.container {
			width: 92%;
			}
  	.contents-sp {
			width: 92%;
      margin-left: auto;
      margin-right: auto;
			}
	}



/*	row 
===================================================== */

  /* 孫要素の高さを揃える */
	[class*="row-h-"] {
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
		}
    /* pattern */
      .row-h-2 {
        grid-row: span 2;
        }
      .row-h-3 {
        grid-row: span 3;
        }
      .row-h-4 {
        grid-row: span 4;
        }
      .row-h-5 {
        grid-row: span 5;
        }
      .row-h-6 {
        grid-row: span 6;
        }
      .row-h-7 {
        grid-row: span 7;
        }
      .row-h-8 {
        grid-row: span 8;
        }
      .row-h-9 {
        grid-row: span 9;
        }
      .row-h-10 {
        grid-row: span 10;
        }



/*	columns
===================================================== */

  /* 均等 */
	[class*="col-between"] {
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		}

  /* 中央 */
	[class*="col-center"] {
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
		}

  /* 左寄せ */
	[class*="col-start"] {
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		}

  /* 右寄せ */
	[class*="col-end"] {
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		}
	@media print, screen and (min-width: 768px) {
    [class*="col-between"],
    [class*="col-center"],
    [class*="col-start"],
    [class*="col-end"]{
      gap: 30px;
      }
  }
	@media (max-width: 767px) {
    [class*="col-between"],
    [class*="col-center"],
    [class*="col-start"],
    [class*="col-end"]{
      gap: 20px;
      }
	}



  /* pattern */
    .col-between-2__48p_48p {
      column-gap: 4%;
      }
      .col-between-2__48p_48p > * {
        width: 48%;
        }
    .col-center-2__480_480 {
      column-gap: 40px;
      }
      .col-center-2__480_480 > * {
        width: 100%;
        max-width: 480px;
        }
	@media print, screen and (min-width: 768px) {
    .col-between-2__48p_100p {
      gap: 30px 4%;
      }
      .col-between-2__48p_100p > * {
        width: 48%;
        }
    
    .col-center-2__480_100p {
      gap: 40px;
      }
      .col-center-2__480_100p > * {
        width: 480px;
        }
    
    .col-between-3__320_100p {
      gap: 20px 2%;
      }
      .col-between-3__320_100p > * {
        width: 320px;
        }
    
    .col-center-3__320_100p {
      gap: 20px 2%;
      }
      .col-center-3__320_100p > * {
        width: 320px;
        }
    
  }
	@media (max-width: 767px) {
    .col-center-3__320_100p > *,
    .col-between-3__320_100p > *,
    .col-center-2__480_100p > *,
    .col-between-2__48p_100p > * {
      width: 100%;
      }
	}




/*	grid
===================================================== */

  /* 中央 */
	[class*="gr-"] {
    display: -webkit-grid;
    display: grid;
		-webkit-justify-content: center;
		justify-content: center;
		}
	@media print, screen and (min-width: 768px) {
    [class*="gr-"]{
      gap: 30px;
      }
  }
	@media (max-width: 767px) {
    [class*="gr-"]{
      gap: 20px;
      }
	}



  /* pattern */
   .gr-1__auto {
      grid-template-columns: 1fr auto 1fr;
      column-gap: 0px;
      align-items: center;
      position: relative;
      }
    .gr-1__auto::before,
    .gr-1__auto::after {
      content: '';
      }

  .gr-2__48p_480,
  .gr-2__48p_100p,
  .gr-2__48p_48p {
    grid-template-columns: repeat(auto-fit, 48%);
    column-gap: 4%;
    }
    .gr-2__48p_480::after,
    .gr-2__48p_100p::after,
    .gr-2__48p_48p::after {
      content: "";
      display: block;
      width: 48%;
      height: 0;
  		}


    @media (max-width: 767px) {
      .gr-2__48p_100p {
        grid-template-columns: repeat(auto-fit, 100%);
        }
      .gr-2__48p_480 {
        grid-template-columns: repeat(auto-fit, 480px);
        }
    }
    @media (max-width: 540px) {
      .gr-2__48p_480 {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }

  .gr-2__480_100p {
    grid-template-columns: repeat(auto-fit, 480px);
    column-gap: 4%;
    }
    @media (max-width: 767px) {
      .gr-2__480_100p {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }

  .gr-2__480_480 {
    grid-template-columns: repeat(auto-fit, 480px);
    column-gap: 4%;
    }
    @media (max-width: 500px) {
      .gr-2__480_480 {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }
    .gr-2__480_100p ::after,
    .gr-2__480_480::after {
      content: "";
      display: block;
      width: 480px;
      height: 0;
  		}


  .gr-2__50p_100p,
  .gr-2__50p_50p {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    }
    @media (max-width: 767px) {
      .gr-2__50p_100p {
        grid-template-columns: 1fr;
        }
    }

  .gr-3__320_320 {
    grid-template-columns: repeat(auto-fit, 320px);
    column-gap: 2%;
    }
    .gr-3__320_320::before {
      content: "";
      display: block;
      width: 320px;
      height: 0;
      order: 1;
      }
    .gr-3__320_320::after {
      content: "";
      display: block;
      width: 320px;
      height: 0;
      }
    @media (max-width: 350px) {
      .gr-3__320_320 {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }

  .gr-3__32p_32p {
    grid-template-columns: repeat(auto-fit, 32%);
    column-gap: 2%;
    }
    .gr-3__32p_32p::before {
      content: "";
      display: block;
      width: 32%;
      height: 0;
      order: 1;
      }
    .gr-3__32p_32p::after {
      content: "";
      display: block;
      width: 32%;
      height: 0;
      }

  .gr-3__320_100p {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    column-gap: 2%;
    }
    .gr-3__320_100p::before {
      content: "";
      display: block;
      width: 320px;
      height: 0;
      order: 1;
      }
    .gr-3__320_100p::after {
      content: "";
      display: block;
      width: 320px;
      height: 0;
      }
    @media (max-width: 767px) {
      .gr-3__320_100p {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }

  .gr-3__32p_100p {
    grid-template-columns: repeat(auto-fit, 32%);
    column-gap: 2%;
    }
    @media (max-width: 767px) {
      .gr-3__32p_100p {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }

  .gr-3__33p_100p,
  .gr-3__33p_33p {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    }
    @media (max-width: 767px) {
      .gr-3__33p_100p {
        grid-template-columns: 1fr;
        }
    }

  .gr-4__240_240 {
    grid-template-columns: repeat(auto-fit, 240px);
    column-gap: 13px;
    }

  .gr-4__240_100p {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: 13px;
    }

  .gr-4__24p_48p,
  .gr-4__24p_100p {
    grid-template-columns: repeat(auto-fit, 24%);
    column-gap: 1.3%;
    }
    @media (max-width: 767px) {
      .gr-4__24p_48p {
        grid-template-columns: repeat(auto-fit, 48%);
        }
      .gr-4__24p_100p {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }
  .gr-4__25p_50p {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    }
    @media (max-width: 767px) {
      .gr-4__25p_50p {
        grid-template-columns: 1fr 1fr;
        }
    }

  .gr-5__190_190 {
    grid-template-columns: repeat(auto-fit, 190px);
    column-gap: 12px;
    }

  .gr-5__190_100p {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    column-gap: 12px;
    }

  .gr-5__19p_100p{
    grid-template-columns: repeat(auto-fit, 19%);
    column-gap: 1.25%;
    }
    @media (max-width: 767px) {
      .gr-5__19p_100p {
        grid-template-columns: repeat(auto-fit, 100%);
        }
    }