@charset "utf-8";

/*	list / icon
===================================================== */
  /* normal */
  ol,
  ul {
    margin: 0;
    padding: 0 0 0 25px;
    }

  /* list reset */
	.list-reset {
    padding: 0;
    margin: 0;
    list-style: none;
		}

	.list-decimal {
		list-style: decimal;
		}

	.list-square {
		list-style: square;
		}

	.list-upper-roman {
		list-style: upper-roman;
		}



  /* maru */
  .list-maru {
    margin: 0;
    padding: 0;
		}
	.list-maru > * {
    margin: 0;
    padding: 0 0 5px 23px;
    list-style: none;
    position: relative;
    line-height: 1.4;
		}
		.list-maru > *::before{
      content: '●';
      position: absolute;
      top: 4px;
      left: 0;
      font-size: 1.2rem;
			}


  /* kakko */
  .list-kakko {
    list-style: none;
    counter-reset: number;
    padding-left: 30px;
    }
  .list-kakko > * {
    position: relative;
    }
  .list-kakko > *::before {
    counter-increment: number;
    content: '（' counter(number) '）';
    position: absolute;
    left: -45px;
    }



   /* original-icon */
	.list-original {
		list-style: none !important;
    padding: 0;
		}
		.icon-original ,
		.list-original > * {
			position: relative;
			list-style: none;
			}
		.icon-original span.original-icon,
		.list-original > * span.original-icon {
			position: absolute;
			top: 0;
			left: 0;
			}




/*	list layout
===================================================== */

  /* list-inline */
  .list-inline {
    padding-left: 0;
    margin-right: -5px;
    margin-left: -5px;
    list-style: none;
    letter-spacing: -0.5em;
    }
  .list-inline > * {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
		letter-spacing: 0.1em;
    }


	/* list-inline　no space */
  .list-inline-n {
    padding-left: 0;
    list-style: none;
    letter-spacing: -0.5px;
    }
  .list-inline-n > * {
    display: inline-block;
    padding-right: 0px;
    padding-left: 0px;
		letter-spacing: 0.1em;
    }



	/* li padding */
  .lipad-b5 > li:not(:last-child) {
    padding-bottom: 5px;
    }
  .lipad-b10 > li:not(:last-child) {
    padding-bottom: 10px;
    }
  .lipad-b20 > li:not(:last-child) {
    padding-bottom: 20px;
    }








/*	dl dt dd 
===================================================== */

  /* normal */
	dl {
    margin: 0;
		}
	dt {
		font-weight: bold;
		}
	dd {
		padding: 5px 0 10px 0;
    margin: 0;
		}


  /* dt　dd　横並び */
  dl.dl-horizon {
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
    align-items: stretch;	
    width: 100%;
    box-sizing: border-box;
    }
  dl.dl-horizon > dt {
    padding: 5px;
    width: 150px;
    box-sizing: border-box;
    }
  dl.dl-horizon > dd {
    margin: 0;
    padding: 5px;
    width: 70%;
    width: -webkit-calc( 100% - 150px);
    width: -moz-calc( 100% - 150px ); 
    width: calc( 100% - 150px ); 
    box-sizing: border-box;
    }
  @media screen and (max-width: 767px) {
    dl.dl-horizon > dt { 
      width: 100%;
      }
    dl.dl-horizon > dd {
      width: 100%; 
      }
  }    

    /* border-bottom */
    /* border-all */
    dl.dl-horizon.dl-border-all  {
      border: 1px solid #e5e5e5;
      border-bottom: none;
      }
    dl.dl-horizon.dl-border-all > dt {
      padding: 5px;
      width: 150px;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      box-sizing: border-box;
      }
    dl.dl-horizon.dl-border-all > dd {
      border-bottom: 1px solid #e5e5e5;
      }
    @media screen and (max-width: 767px) {
      dl.dl-horizon.dl-border-all > dt { 
        border-right: none;
        }
    }    





/*	title
===================================================== */

  /* -- simple -- */
  .title-simple {
    line-height: 1.4;
    font-weight: bold;
    text-align: center;
    }
    @media print, screen and (min-width: 768px) {
      .title-simple {
        font-size: 3.0rem;
        margin-bottom: 50px;
        }
    }
    @media (max-width: 767px) {
      .title-simple {
        font-size: 2.0rem;
        margin-bottom: 30px;
        }
    }


  /* -- icon bottom -- */
  [class*="title-icon-"] {
    position: relative;
    text-align: center;
    }
  [class*="title-icon-"]::after {
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    text-align: center;
    display: block;
    width: 100%;
    }
    @media print, screen and (min-width: 768px) {
      [class*="title-icon-"] {
        font-size: 3.0rem;
        margin-bottom: 70px;
        }
      [class*="title-icon-"]::after {
        bottom: -40px;
        }
    }
    @media (max-width: 767px) {
      [class*="title-icon-"] {
        font-size: 2.0rem;
        margin-bottom: 50px;
        }
      [class*="title-icon-"]::after {
        bottom: -30px;
        }
    }

    /* icon */
    [class*="title-icon-bb1"]::after {
      content: '\f068';
      }
    [class*="title-icon-bb2"]::after {
      content: '\f7a4';
      }
    [class*="title-icon-bd13"]::after {
      content: '\f142';
      }
    [class*="title-icon-bd31"]::after {
      content: '\f141';
      }
    [class*="title-icon-bv1"]::after {
      content: '\f107';
      }

    /* color */
    [class*="title-icon-"][class*="__blue"]::after { color: var(--cs-blue); }
    [class*="title-icon-"][class*="__blue-light"]::after { color: var(--cs-blue-light); }
    [class*="title-icon-"][class*="__blue-dark"]::after { color: var(--cs-blue-dark); }
    [class*="title-icon-"][class*="__navy"]::after { color: var(--cs-navy); }
    [class*="title-icon-"][class*="__purple"]::after { color: var(--cs-purple); }
    [class*="title-icon-"][class*="__pink"]::after { color: var(--cs-pink); }
    [class*="title-icon-"][class*="__pink-ligh"]::after { color: var(--cs-pink-ligh); }
    [class*="title-icon-"][class*="__red"]::after { color: var(--cs-red); }
    [class*="title-icon-"][class*="__red-light"]::after { color: var(--cs-red-light); }
    [class*="title-icon-"][class*="__red-dark"]::after { color: var(--cs-red-dark); }
    [class*="title-icon-"][class*="__orange"]::after { color: var(--cs-orange); }
    [class*="title-icon-"][class*="__yellow"]::after { color: var(--cs-yellow); }
    [class*="title-icon-"][class*="__green"]::after { color: var(--cs-green); }
    [class*="title-icon-"][class*="__green-light"]::after { color: var(--cs-green-light); }
    [class*="title-icon-"][class*="__brown"]::after { color: var(--cs-brown); }
    [class*="title-icon-"][class*="__brown-light"]::after { color: var(--cs-brown-light); }
    [class*="title-icon-"][class*="__brown-dark"]::after { color: var(--cs-brown-dark); }
    [class*="title-icon-"][class*="__black"]::after { color: var(--cs-black); }
    [class*="title-icon-"][class*="__white"]::after { color: var(--cs-white); }
    [class*="title-icon-"][class*="__gray"]::after { color: var(--cs-gray); }
    [class*="title-icon-"][class*="__gray-light"]::after { color: var(--cs-gray-light); }
    [class*="title-icon-"][class*="__gray-dark"]::after { color: var(--cs-gray-dark); }
    [class*="title-icon-"][class*="__color01"]::after { color: var(--cs-color01); }
    [class*="title-icon-"][class*="__color02"]::after { color: var(--cs-color02); }
    [class*="title-icon-"][class*="__color03"]::after { color: var(--cs-color03); }
    [class*="title-icon-"][class*="__color04"]::after { color: var(--cs-color04); }
    [class*="title-icon-"][class*="__color05"]::after { color: var(--cs-color05); }
    [class*="title-icon-"][class*="__color06"]::after { color: var(--cs-color06); }
    [class*="title-icon-"][class*="__color07"]::after { color: var(--cs-color07); }
    [class*="title-icon-"][class*="__color08"]::after { color: var(--cs-color08); }
    [class*="title-icon-"][class*="__color09"]::after { color: var(--cs-color09); }
    [class*="title-icon-"][class*="__color10"]::after { color: var(--cs-color10); }



  /* -- border -- */
  [class*="title-border-"] {
    text-align: center;
    }
    @media print, screen and (min-width: 768px) {
      [class*="title-border-"] {
        font-size: 3.0rem;
        margin-bottom: 40px;
        padding: 10px 15px;
        }
    }
    @media (max-width: 767px) {
      [class*="title-border-"] {
        font-size: 2.0rem;
        margin-bottom: 25px;
        padding: 8px 10px;
        }
    }

    /* border */
    [class*="title-border-dbl"] {
      border: #ccc double 5px;
      }
    [class*="title-border-tb"] {
      border-top: #ccc solid 3px;
      border-bottom: #ccc solid 3px;
      }
    [class*="title-border-kado"] {
      position: relative;
      }
      [class*="title-border-kado"]:before,
      [class*="title-border-kado"]:after {
        position: absolute;
        content: '';
        }
      [class*="title-border-kado"]:after {
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-top: 2px solid #ccc;
        border-left: 2px solid #ccc;
        }
      [class*="title-border-kado"]:before {
        right: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        border-right: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        }
        @media print, screen and (min-width: 768px) {
          [class*="title-border-kado"]:before,
          [class*="title-border-kado"]:after {
            width: 50px;
            height: 50px;
            }
        }
        @media (max-width: 767px) {
          [class*="title-border-kado"]:before,
          [class*="title-border-kado"]:after {
            width: 25px;
            height: 25px;
            }
        }

     /* color */
    [class*="title-border-"][class*="__blue"] { border-color: var(--cs-blue); }
    [class*="title-border-"][class*="__blue-light"] { border-color: var(--cs-blue-light); }
    [class*="title-border-"][class*="__blue-dark"] { border-color: var(--cs-blue-dark); }
    [class*="title-border-"][class*="__navy"] { border-color: var(--cs-navy); }
    [class*="title-border-"][class*="__purple"] { border-color: var(--cs-purple); }
    [class*="title-border-"][class*="__pink"] { border-color: var(--cs-pink); }
    [class*="title-border-"][class*="__pink-light"] { border-color: var(--cs-pink-light); }
    [class*="title-border-"][class*="__red"] { border-color: var(--cs-red); }
    [class*="title-border-"][class*="__red-light"] { border-color: var(--cs-red-light); }
    [class*="title-border-"][class*="__red-dark"] { border-color: var(--cs-red-dark); }
    [class*="title-border-"][class*="__orange"] { border-color: var(--cs-orange); }
    [class*="title-border-"][class*="__yellow"] { border-color: var(--cs-yellow); }
    [class*="title-border-"][class*="__green"] { border-color: var(--cs-green); }
    [class*="title-border-"][class*="__green-light"] { border-color: var(--cs-green-light); }
    [class*="title-border-"][class*="__brown"] { border-color: var(--cs-brown); }
    [class*="title-border-"][class*="__brown-light"] { border-color: var(--cs-brown-light); }
    [class*="title-border-"][class*="__brown-dark"] { border-color: var(--cs-brown-dark); }
    [class*="title-border-"][class*="__black"] { border-color: var(--cs-black); }
    [class*="title-border-"][class*="__white"] { border-color: var(--cs-white); }
    [class*="title-border-"][class*="__gray"] { border-color: var(--cs-gray); }
    [class*="title-border-"][class*="__gray-light"] { border-color: var(--cs-gray-light); }
    [class*="title-border-"][class*="__gray-dark"] { border-color: var(--cs-gray-dark); }
    [class*="title-border-"][class*="__color01"] { border-color: var(--cs-color01); }
    [class*="title-border-"][class*="__color02"] { border-color: var(--cs-color02); }
    [class*="title-border-"][class*="__color03"] { border-color: var(--cs-color03); }
    [class*="title-border-"][class*="__color04"] { border-color: var(--cs-color04); }
    [class*="title-border-"][class*="__color05"] { border-color: var(--cs-color05); }
    [class*="title-border-"][class*="__color06"] { border-color: var(--cs-color06); }
    [class*="title-border-"][class*="__color07"] { border-color: var(--cs-color07); }
    [class*="title-border-"][class*="__color08"] { border-color: var(--cs-color08); }
    [class*="title-border-"][class*="__color09"] { border-color: var(--cs-color09); }
    [class*="title-border-"][class*="__color10"] { border-color: var(--cs-color10); }

    [class*="title-border-kado"][class*="__blue"]::before { border-color: var(--cs-blue); }
    [class*="title-border-kado"][class*="__blue-light"]::before { border-color: var(--cs-blue-light); }
    [class*="title-border-kado"][class*="__blue-dark"]::before { border-color: var(--cs-blue-dark); }
    [class*="title-border-kado"][class*="__navy"]::before { border-color: var(--cs-navy); }
    [class*="title-border-kado"][class*="__purple"]::before { border-color: var(--cs-purple); }
    [class*="title-border-kado"][class*="__pink"]::before { border-color: var(--cs-pink); }
    [class*="title-border-kado"][class*="__pink-light"]::before { border-color: var(--cs-pink-light); }
    [class*="title-border-kado"][class*="__red"]::before { border-color: var(--cs-red); }
    [class*="title-border-kado"][class*="__red-light"]::before { border-color: var(--cs-red-light); }
    [class*="title-border-kado"][class*="__red-dark"]::before { border-color: var(--cs-red-dark); }
    [class*="title-border-kado"][class*="__orange"]::before { border-color: var(--cs-orange); }
    [class*="title-border-kado"][class*="__yellow"]::before { border-color: var(--cs-yellow); }
    [class*="title-border-kado"][class*="__green"]::before { border-color: var(--cs-green); }
    [class*="title-border-kado"][class*="__green-light"]::before { border-color: var(--cs-green-light); }
    [class*="title-border-kado"][class*="__brown"]::before { border-color: var(--cs-brown); }
    [class*="title-border-kado"][class*="__brown-light"]::before { border-color: var(--cs-brown-light); }
    [class*="title-border-kado"][class*="__brown-dark"]::before { border-color: var(--cs-brown-dark); }
    [class*="title-border-kado"][class*="__black"]::before { border-color: var(--cs-black); }
    [class*="title-border-kado"][class*="__white"]::before { border-color: var(--cs-white); }
    [class*="title-border-kado"][class*="__gray"]::before { border-color: var(--cs-gray); }
    [class*="title-border-kado"][class*="__gray-light"]::before { border-color: var(--cs-gray-light); }
    [class*="title-border-kado"][class*="__gray-dark"]::before { border-color: var(--cs-gray-dark); }
    [class*="title-border-kado"][class*="__color01"]::before { border-color: var(--cs-color01); }
    [class*="title-border-kado"][class*="__color02"]::before { border-color: var(--cs-color02); }
    [class*="title-border-kado"][class*="__color03"]::before { border-color: var(--cs-color03); }
    [class*="title-border-kado"][class*="__color04"]::before { border-color: var(--cs-color04); }
    [class*="title-border-kado"][class*="__color05"]::before { border-color: var(--cs-color05); }
    [class*="title-border-kado"][class*="__color06"]::before { border-color: var(--cs-color06); }
    [class*="title-border-kado"][class*="__color07"]::before { border-color: var(--cs-color07); }
    [class*="title-border-kado"][class*="__color08"]::before { border-color: var(--cs-color08); }
    [class*="title-border-kado"][class*="__color09"]::before { border-color: var(--cs-color09); }
    [class*="title-border-kado"][class*="__color10"]::before { border-color: var(--cs-color10); }

    [class*="title-border-kado"][class*="__blue"]::after { border-color: var(--cs-blue); }
    [class*="title-border-kado"][class*="__blue-light"]::after { border-color: var(--cs-blue-light); }
    [class*="title-border-kado"][class*="__blue-dark"]::after { border-color: var(--cs-blue-dark); }
    [class*="title-border-kado"][class*="__navy"]::after { border-color: var(--cs-navy); }
    [class*="title-border-kado"][class*="__purple"]::after { border-color: var(--cs-purple); }
    [class*="title-border-kado"][class*="__pink"]::after { border-color: var(--cs-pink); }
    [class*="title-border-kado"][class*="__pink-light"]::after { border-color: var(--cs-pink-light); }
    [class*="title-border-kado"][class*="__red"]::after { border-color: var(--cs-red); }
    [class*="title-border-kado"][class*="__red-light"]::after { border-color: var(--cs-red-light); }
    [class*="title-border-kado"][class*="__red-dark"]::after { border-color: var(--cs-red-dark); }
    [class*="title-border-kado"][class*="__orange"]::after { border-color: var(--cs-orange); }
    [class*="title-border-kado"][class*="__yellow"]::after { border-color: var(--cs-yellow); }
    [class*="title-border-kado"][class*="__green"]::after { border-color: var(--cs-green); }
    [class*="title-border-kado"][class*="__green-light"]::after { border-color: var(--cs-green-light); }
    [class*="title-border-kado"][class*="__brown"]::after { border-color: var(--cs-brown); }
    [class*="title-border-kado"][class*="__brown-light"]::after { border-color: var(--cs-brown-light); }
    [class*="title-border-kado"][class*="__brown-dark"]::after { border-color: var(--cs-brown-dark); }
    [class*="title-border-kado"][class*="__black"]::after { border-color: var(--cs-black); }
    [class*="title-border-kado"][class*="__white"]::after { border-color: var(--cs-white); }
    [class*="title-border-kado"][class*="__gray"]::after { border-color: var(--cs-gray); }
    [class*="title-border-kado"][class*="__gray-light"]::after { border-color: var(--cs-gray-light); }
    [class*="title-border-kado"][class*="__gray-dark"]::after { border-color: var(--cs-gray-dark); }
    [class*="title-border-kado"][class*="__color01"]::after { border-color: var(--cs-color01); }
    [class*="title-border-kado"][class*="__color02"]::after { border-color: var(--cs-color02); }
    [class*="title-border-kado"][class*="__color03"]::after { border-color: var(--cs-color03); }
    [class*="title-border-kado"][class*="__color04"]::after { border-color: var(--cs-color04); }
    [class*="title-border-kado"][class*="__color05"]::after { border-color: var(--cs-color05); }
    [class*="title-border-kado"][class*="__color06"]::after { border-color: var(--cs-color06); }
    [class*="title-border-kado"][class*="__color07"]::after { border-color: var(--cs-color07); }
    [class*="title-border-kado"][class*="__color08"]::after { border-color: var(--cs-color08); }
    [class*="title-border-kado"][class*="__color09"]::after { border-color: var(--cs-color09); }
    [class*="title-border-kado"][class*="__color10"]::after { border-color: var(--cs-color10); }





  /* -- subtitle border -- */
  [class*="title-sub-bdc-"],
  [class*="title-sub-bd-"] {
    position: relative;
    line-height: 1.2;
    }
    @media print, screen and (min-width: 768px) {
      [class*="title-sub-bdc-"],
      [class*="title-sub-bd-"] {
        font-size: 2.2rem;
        margin-bottom: 20px;
        padding: 10px 2px;
        }
    }
    @media (max-width: 767px) {
      [class*="title-sub-bdc-"],
      [class*="title-sub-bd-"] {
        font-size: 1.8rem;
        margin-bottom: 15px;
        padding: 8px 2px;
        }
    }


    /* border */
    [class*="title-sub-bd-stp"] {
      position: relative;
      text-align: left;
      padding-right: 50px;
      display: inline-block;
      max-width: 100%;
      }
    [class*="title-sub-bd-stp-a"] {
      display: block;
      width: 100%;
      }
    [class*="title-sub-bd-stp"]::after {
      position: absolute;
      left: 0;
      width: 100%;
      min-width: 100px; 
      content: '';
      background-image: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, transparent 4px, transparent 5px);
      background-image: repeating-linear-gradient(-45deg, #fff, #fff 3px, transparent 4px, transparent 5px);
      background-size: 7px 7px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      }

    [class*="title-sub-bd-b1"] {
      position: relative;
      text-align: left;
      }
    [class*="title-sub-bd-b1"]::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      bottom: 0px;
      width: 100%;
      }

    [class*="title-sub-bd-bb1"] {
      position: relative;
      text-align: left;
      padding-bottom: 5px;
      border-bottom: 4px solid var(--cs-bordercolor);
      }
    [class*="title-sub-bd-bb1"]::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      bottom: -4px;
      width: 20%;
      min-width: 100px; 
      background: #00cc5b;
      }

    [class*="title-sub-bdc-b1"] {
      position: relative;
      text-align: left;
      padding-bottom: 5px;
      border-bottom: 4px solid var(--cs-bordercolor);
      }

    [class*="title-sub-bdc-b2"] {
      position: relative;
      text-align: left;
      padding-bottom: 6px;
      border-bottom: 6px double var(--cs-bordercolor);
      }

    [class*="title-sub-bdc-l1"] {
      position: relative;
      text-align: left;
      padding-bottom: 5px;
      border-left: 4px solid var(--cs-bordercolor);
      }

    [class*="title-sub-bdc-bdot"] {
      position: relative;
      text-align: left;
      padding-bottom: 8px;
      border-bottom: 3px dotted var(--cs-bordercolor);
      }

    [class*="title-sub-bdc-all1"] {
      position: relative;
      text-align: left;
      border: 2px solid var(--cs-bordercolor);
      }
    [class*="title-sub-bdc-all2"] {
      position: relative;
      text-align: left;
      border: 6px double var(--cs-bordercolor);
      }
    [class*="title-sub-bdc-alldot"] {
      position: relative;
      text-align: left;
      border: 3px dotted var(--cs-bordercolor);
      }
    [class*="title-sub-bdc-allinnerdot"]::before {
      position: absolute;
      top: 4px;
      left: 4px;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      content: '';
      border: 3px dotted var(--cs-bordercolor);
      }
    [class*="title-sub-bdc-tb2"] {
      position: relative;
      text-align: left;
      border-top: 6px double var(--cs-bordercolor);
      border-bottom: 6px double var(--cs-bordercolor);
      }
    [class*="title-sub-bdc-tbdot"] {
      position: relative;
      text-align: left;
      border-top: 3px dotted var(--cs-bordercolor);
      border-bottom: 3px dotted var(--cs-bordercolor);
      }
    @media print, screen and (min-width: 768px) {
      [class*="title-sub-bdc-tb"],
      [class*="title-sub-bdc-all"] {
        padding: 10px 15px 8px 15px;
        }
      [class*="title-sub-bdc-allinnerdot"] {
        padding: 15px 20px 13px 20px;
        }
    }
    @media (max-width: 767px) {
      [class*="title-sub-bdc-tb"],
      [class*="title-sub-bdc-all"] {
        padding: 8px 10px 6px 10px;
        }
      [class*="title-sub-bdc-allinnerdot"] {
        padding: 12px 15px 10px 15px;
        }
    }


    [class*="title-sub-bd-r1"] {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 20px;
      align-items: center;
      padding-right: 0;
      }
    [class*="title-sub-bd-r1"]::after {
      min-width: 30px;
      height: 5px;
      content: '';
      }

    [class*="title-sub-bd-lr1"] {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      column-gap: 20px;
      align-items: center;
      padding-right: 0;
      }
    [class*="title-sub-bd-lr1"]::before,
    [class*="title-sub-bd-lr1"]::after {
      min-width: 30px;
      height: 5px;
      content: '';
      }

    [class*="title-sub-bd-l1"] {
      position: relative;
      text-align: left;
      padding-left: 30px;
      }
    [class*="title-sub-bd-l1"]::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      top: 50%;
      width: 5px;
      height: 20px;
      margin-top: -12px;
      }


    @media print, screen and (min-width: 768px) {
      [class*="title-sub-bd-b1"]::after {
        height: 4px;
        }
      [class*="title-sub-bd-bb1"] {
        border-bottom-width: 4px;
        }
      [class*="title-sub-bd-bb1"]::after {
        height: 4px;
        bottom: -4px;
        }
      [class*="title-sub-bd-stp"] {
        border-bottom-width: 6px;
        }
      [class*="title-sub-bd-stp"]::after {
        height: 6px;
        bottom: -3px;
        }
    }
    @media (max-width: 767px) {
      [class*="title-sub-bd-b1"]::after {
        height: 3px;
        }
      [class*="title-sub-bd-bb1"] {
        border-bottom-width: 3px;
        }
      [class*="title-sub-bd-bb1"]::after {
        height: 3px;
        bottom: -3px;
        }
      [class*="title-sub-bd-stp"] {
        border-bottom-width: 5px;
        }
      [class*="title-sub-bd-stp"]::after {
        height: 5px;
        bottom: -5px;
        }
    }

     /* color */
    [class*="title-sub-bd-"][class*="__blue"]::before { background-color: var(--cs-blue); }
    [class*="title-sub-bd-"][class*="__blue-light"]::before { background-color: var(--cs-blue-light); }
    [class*="title-sub-bd-"][class*="__blue-dark"]::before { background-color: var(--cs-blue-dark); }
    [class*="title-sub-bd-"][class*="__navy"]::before { background-color: var(--cs-navy); }
    [class*="title-sub-bd-"][class*="__purple"]::before { background-color: var(--cs-purple); }
    [class*="title-sub-bd-"][class*="__pink"]::before { background-color: var(--cs-pink); }
    [class*="title-sub-bd-"][class*="__pink-light"]::before { background-color: var(--cs-pink-light); }
    [class*="title-sub-bd-"][class*="__red"]::before { background-color: var(--cs-red); }
    [class*="title-sub-bd-"][class*="__red-light"]::before { background-color: var(--cs-red-light); }
    [class*="title-sub-bd-"][class*="__red-dark"]::before { background-color: var(--cs-red-dark); }
    [class*="title-sub-bd-"][class*="__orange"]::before { background-color: var(--cs-orange); }
    [class*="title-sub-bd-"][class*="__yellow"]::before { background-color: var(--cs-yellow); }
    [class*="title-sub-bd-"][class*="__green"]::before { background-color: var(--cs-green); }
    [class*="title-sub-bd-"][class*="__green-light"]::before { background-color: var(--cs-green-light); }
    [class*="title-sub-bd-"][class*="__brown"]::before { background-color: var(--cs-brown); }
    [class*="title-sub-bd-"][class*="__brown-light"]::before { background-color: var(--cs-brown-light); }
    [class*="title-sub-bd-"][class*="__brown-dark"]::before { background-color: var(--cs-brown-dark); }
    [class*="title-sub-bd-"][class*="__black"]::before { background-color: var(--cs-black); }
    [class*="title-sub-bd-"][class*="__white"]::before { background-color: var(--cs-white); }
    [class*="title-sub-bd-"][class*="__gray"]::before { background-color: var(--cs-gray); }
    [class*="title-sub-bd-"][class*="__gray-light"]::before { background-color: var(--cs-gray-light); }
    [class*="title-sub-bd-"][class*="__gray-dark"]::before { background-color: var(--cs-gray-dark); }
    [class*="title-sub-bd-"][class*="__color01"]::before { background-color: var(--cs-color01); }
    [class*="title-sub-bd-"][class*="__color02"]::before { background-color: var(--cs-color02); }
    [class*="title-sub-bd-"][class*="__color03"]::before { background-color: var(--cs-color03); }
    [class*="title-sub-bd-"][class*="__color04"]::before { background-color: var(--cs-color04); }
    [class*="title-sub-bd-"][class*="__color05"]::before { background-color: var(--cs-color05); }
    [class*="title-sub-bd-"][class*="__color06"]::before { background-color: var(--cs-color06); }
    [class*="title-sub-bd-"][class*="__color07"]::before { background-color: var(--cs-color07); }
    [class*="title-sub-bd-"][class*="__color08"]::before { background-color: var(--cs-color08); }
    [class*="title-sub-bd-"][class*="__color09"]::before { background-color: var(--cs-color09); }
    [class*="title-sub-bd-"][class*="__color10"]::before { background-color: var(--cs-color10); }

    [class*="title-sub-bd-"][class*="__blue"]::after { background-color: var(--cs-blue); }
    [class*="title-sub-bd-"][class*="__blue-light"]::after { background-color: var(--cs-blue-light); }
    [class*="title-sub-bd-"][class*="__blue-dark"]::after { background-color: var(--cs-blue-dark); }
    [class*="title-sub-bd-"][class*="__navy"]::after { background-color: var(--cs-navy); }
    [class*="title-sub-bd-"][class*="__purple"]::after { background-color: var(--cs-purple); }
    [class*="title-sub-bd-"][class*="__pink"]::after { background-color: var(--cs-pink); }
    [class*="title-sub-bd-"][class*="__pink-light"]::after { background-color: var(--cs-pink-light); }
    [class*="title-sub-bd-"][class*="__red"]::after { background-color: var(--cs-red); }
    [class*="title-sub-bd-"][class*="__red-light"]::after { background-color: var(--cs-red-light); }
    [class*="title-sub-bd-"][class*="__red-dark"]::after { background-color: var(--cs-red-dark); }
    [class*="title-sub-bd-"][class*="__orange"]::after { background-color: var(--cs-orange); }
    [class*="title-sub-bd-"][class*="__yellow"]::after { background-color: var(--cs-yellow); }
    [class*="title-sub-bd-"][class*="__green"]::after { background-color: var(--cs-green); }
    [class*="title-sub-bd-"][class*="__green-light"]::after { background-color: var(--cs-green-light); }
    [class*="title-sub-bd-"][class*="__brown"]::after { background-color: var(--cs-brown); }
    [class*="title-sub-bd-"][class*="__brown-light"]::after { background-color: var(--cs-brown-light); }
    [class*="title-sub-bd-"][class*="__brown-dark"]::after { background-color: var(--cs-brown-dark); }
    [class*="title-sub-bd-"][class*="__black"]::after { background-color: var(--cs-black); }
    [class*="title-sub-bd-"][class*="__white"]::after { background-color: var(--cs-white); }
    [class*="title-sub-bd-"][class*="__gray"]::after { background-color: var(--cs-gray); }
    [class*="title-sub-bd-"][class*="__gray-light"]::after { background-color: var(--cs-gray-light); }
    [class*="title-sub-bd-"][class*="__gray-dark"]::after { background-color: var(--cs-gray-dark); }
    [class*="title-sub-bd-"][class*="__color01"]::after { background-color: var(--cs-color01); }
    [class*="title-sub-bd-"][class*="__color02"]::after { background-color: var(--cs-color02); }
    [class*="title-sub-bd-"][class*="__color03"]::after { background-color: var(--cs-color03); }
    [class*="title-sub-bd-"][class*="__color04"]::after { background-color: var(--cs-color04); }
    [class*="title-sub-bd-"][class*="__color05"]::after { background-color: var(--cs-color05); }
    [class*="title-sub-bd-"][class*="__color06"]::after { background-color: var(--cs-color06); }
    [class*="title-sub-bd-"][class*="__color07"]::after { background-color: var(--cs-color07); }
    [class*="title-sub-bd-"][class*="__color08"]::after { background-color: var(--cs-color08); }
    [class*="title-sub-bd-"][class*="__color09"]::after { background-color: var(--cs-color09); }
    [class*="title-sub-bd-"][class*="__color10"]::after { background-color: var(--cs-color10); }

    [class*="title-sub-bdc-"][class*="__blue"] { border-color: var(--cs-blue); }
    [class*="title-sub-bdc-"][class*="__blue-light"] { border-color: var(--cs-blue-light); }
    [class*="title-sub-bdc-"][class*="__blue-dark"] { border-color: var(--cs-blue-dark); }
    [class*="title-sub-bdc-"][class*="__navy"] { border-color: var(--cs-navy); }
    [class*="title-sub-bdc-"][class*="__purple"] { border-color: var(--cs-purple); }
    [class*="title-sub-bdc-"][class*="__pink"] { border-color: var(--cs-pink); }
    [class*="title-sub-bdc-"][class*="__pink-light"] { border-color: var(--cs-pink-light); }
    [class*="title-sub-bdc-"][class*="__red"] { border-color: var(--cs-red); }
    [class*="title-sub-bdc-"][class*="__red-light"] { border-color: var(--cs-red-light); }
    [class*="title-sub-bdc-"][class*="__red-dark"] { border-color: var(--cs-red-dark); }
    [class*="title-sub-bdc-"][class*="__orange"] { border-color: var(--cs-orange); }
    [class*="title-sub-bdc-"][class*="__yellow"] { border-color: var(--cs-yellow); }
    [class*="title-sub-bdc-"][class*="__green"] { border-color: var(--cs-green); }
    [class*="title-sub-bdc-"][class*="__green-light"] { border-color: var(--cs-green-light); }
    [class*="title-sub-bdc-"][class*="__brown"] { border-color: var(--cs-brown); }
    [class*="title-sub-bdc-"][class*="__brown-light"] { border-color: var(--cs-brown-light); }
    [class*="title-sub-bdc-"][class*="__brown-dark"] { border-color: var(--cs-brown-dark); }
    [class*="title-sub-bdc-"][class*="__black"] { border-color: var(--cs-black); }
    [class*="title-sub-bdc-"][class*="__white"] { border-color: var(--cs-white); }
    [class*="title-sub-bdc-"][class*="__gray"] { border-color: var(--cs-gray); }
    [class*="title-sub-bdc-"][class*="__gray-light"] { border-color: var(--cs-gray-light); }
    [class*="title-sub-bdc-"][class*="__gray-dark"] { border-color: var(--cs-gray-dark); }
    [class*="title-sub-bdc-"][class*="__color01"] { border-color: var(--cs-color01); }
    [class*="title-sub-bdc-"][class*="__color02"] { border-color: var(--cs-color02); }
    [class*="title-sub-bdc-"][class*="__color03"] { border-color: var(--cs-color03); }
    [class*="title-sub-bdc-"][class*="__color04"] { border-color: var(--cs-color04); }
    [class*="title-sub-bdc-"][class*="__color05"] { border-color: var(--cs-color05); }
    [class*="title-sub-bdc-"][class*="__color06"] { border-color: var(--cs-color06); }
    [class*="title-sub-bdc-"][class*="__color07"] { border-color: var(--cs-color07); }
    [class*="title-sub-bdc-"][class*="__color08"] { border-color: var(--cs-color08); }
    [class*="title-sub-bdc-"][class*="__color09"] { border-color: var(--cs-color09); }
    [class*="title-sub-bdc-"][class*="__color10"] { border-color: var(--cs-color10); }

    .title-sub-bdc-b1__blue { border-color: var(--cs-blue)!important; }
    .title-sub-bdc-b1__blue-light{ border-color: var(--cs-blue-light)!important; }
    .title-sub-bdc-b1__blue-dark{ border-color: var(--cs-blue-dark)!important; }
    .title-sub-bdc-b1__navy{ border-color: var(--cs-navy)!important; }
    .title-sub-bdc-b1__purple{ border-color: var(--cs-purple)!important; }
    .title-sub-bdc-b1__pink{ border-color: var(--cs-pink)!important; }
    .title-sub-bdc-b1__pink-light{ border-color: var(--cs-pink-light)!important; }
    .title-sub-bdc-b1__red{ border-color: var(--cs-red)!important; }
    .title-sub-bdc-b1__red-light{ border-color: var(--cs-red-light)!important; }
    .title-sub-bdc-b1__red-dark{ border-color: var(--cs-red-dark)!important; }
    .title-sub-bdc-b1__orange{ border-color: var(--cs-orange)!important; }
    .title-sub-bdc-b1__yellow{ border-color: var(--cs-yellow)!important; }
    .title-sub-bdc-b1__green{ border-color: var(--cs-green)!important; }
    .title-sub-bdc-b1__green-light{ border-color: var(--cs-green-light)!important; }
    .title-sub-bdc-b1__brown{ border-color: var(--cs-brown)!important; }
    .title-sub-bdc-b1__brown-light{ border-color: var(--cs-brown-light)!important; }
    .title-sub-bdc-b1__brown-dark{ border-color: var(--cs-brown-dark)!important; }
    .title-sub-bdc-b1__black{ border-color: var(--cs-black)!important; }
    .title-sub-bdc-b1__white{ border-color: var(--cs-white)!important; }
    .title-sub-bdc-b1__gray{ border-color: var(--cs-gray)!important; }
    .title-sub-bdc-b1__gray-light{ border-color: var(--cs-gray-light)!important; }
    .title-sub-bdc-b1__gray-dark{ border-color: var(--cs-gray-dark)!important; }
    .title-sub-bdc-b1__color01{ border-color: var(--cs-color01)!important; }
    .title-sub-bdc-b1__color02{ border-color: var(--cs-color02)!important; }
    .title-sub-bdc-b1__color03{ border-color: var(--cs-color03)!important; }
    .title-sub-bdc-b1__color04{ border-color: var(--cs-color04)!important; }
    .title-sub-bdc-b1__color05{ border-color: var(--cs-color05)!important; }
    .title-sub-bdc-b1__color06{ border-color: var(--cs-color06)!important; }
    .title-sub-bdc-b1__color07{ border-color: var(--cs-color07)!important; }
    .title-sub-bdc-b1__color08{ border-color: var(--cs-color08)!important; }
    .title-sub-bdc-b1__color09{ border-color: var(--cs-color09)!important; }
    .title-sub-bdc-b1__color10{ border-color: var(--cs-color10)!important; }

    .title-sub-bdc-allinnerdot__blue::before { border-color: var(--cs-blue)!important; }
    .title-sub-bdc-allinnerdot__blue-light::before { border-color: var(--cs-blue-light)!important; }
    .title-sub-bdc-allinnerdot__blue-dark::before { border-color: var(--cs-blue-dark)!important; }
    .title-sub-bdc-allinnerdot__navy::before { border-color: var(--cs-navy)!important; }
    .title-sub-bdc-allinnerdot__purple::before { border-color: var(--cs-purple)!important; }
    .title-sub-bdc-allinnerdot__pink::before { border-color: var(--cs-pink)!important; }
    .title-sub-bdc-allinnerdot__pink-light::before { border-color: var(--cs-pink-light)!important; }
    .title-sub-bdc-allinnerdot__red::before { border-color: var(--cs-red)!important; }
    .title-sub-bdc-allinnerdot__red-light::before { border-color: var(--cs-red-light)!important; }
    .title-sub-bdc-allinnerdot__red-dark::before { border-color: var(--cs-red-dark)!important; }
    .title-sub-bdc-allinnerdot__orange::before { border-color: var(--cs-orange)!important; }
    .title-sub-bdc-allinnerdot__yellow::before { border-color: var(--cs-yellow)!important; }
    .title-sub-bdc-allinnerdot__green::before { border-color: var(--cs-green)!important; }
    .title-sub-bdc-allinnerdot__green-light::before { border-color: var(--cs-green-light)!important; }
    .title-sub-bdc-allinnerdot__brown::before { border-color: var(--cs-brown)!important; }
    .title-sub-bdc-allinnerdot__brown-light::before { border-color: var(--cs-brown-light)!important; }
    .title-sub-bdc-allinnerdot__brown-dark::before { border-color: var(--cs-brown-dark)!important; }
    .title-sub-bdc-allinnerdot__black::before { border-color: var(--cs-black)!important; }
    .title-sub-bdc-allinnerdot__white::before { border-color: var(--cs-white)!important; }
    .title-sub-bdc-allinnerdot__gray::before { border-color: var(--cs-gray)!important; }
    .title-sub-bdc-allinnerdot__gray-light::before { border-color: var(--cs-gray-light)!important; }
    .title-sub-bdc-allinnerdot__gray-dark::before { border-color: var(--cs-gray-dark)!important; }
    .title-sub-bdc-allinnerdot__color01::before { border-color: var(--cs-color01)!important; }
    .title-sub-bdc-allinnerdot__color02::before { border-color: var(--cs-color02)!important; }
    .title-sub-bdc-allinnerdot__color03::before { border-color: var(--cs-color03)!important; }
    .title-sub-bdc-allinnerdot__color04::before { border-color: var(--cs-color04)!important; }
    .title-sub-bdc-allinnerdot__color05::before { border-color: var(--cs-color05)!important; }
    .title-sub-bdc-allinnerdot__color06::before { border-color: var(--cs-color06)!important; }
    .title-sub-bdc-allinnerdot__color07::before { border-color: var(--cs-color07)!important; }
    .title-sub-bdc-allinnerdot__color08::before { border-color: var(--cs-color08)!important; }
    .title-sub-bdc-allinnerdot__color09::before { border-color: var(--cs-color09)!important; }
    .title-sub-bdc-allinnerdot__color10::before { border-color: var(--cs-color10)!important; }

    .title-sub-bdc-l1__blue  { border-color: var(--cs-blue)!important; }
    .title-sub-bdc-l1__blue-light { border-color: var(--cs-blue-light)!important; }
    .title-sub-bdc-l1__blue-dark { border-color: var(--cs-blue-dark)!important; }
    .title-sub-bdc-l1__navy { border-color: var(--cs-navy)!important; }
    .title-sub-bdc-l1__purple { border-color: var(--cs-purple)!important; }
    .title-sub-bdc-l1__pink { border-color: var(--cs-pink)!important; }
    .title-sub-bdc-l1__pink-light { border-color: var(--cs-pink-light)!important; }
    .title-sub-bdc-l1__red { border-color: var(--cs-red)!important; }
    .title-sub-bdc-l1__red-light { border-color: var(--cs-red-light)!important; }
    .title-sub-bdc-l1__red-dark { border-color: var(--cs-red-dark)!important; }
    .title-sub-bdc-l1__orange { border-color: var(--cs-orange)!important; }
    .title-sub-bdc-l1__yellow { border-color: var(--cs-yellow)!important; }
    .title-sub-bdc-l1__green { border-color: var(--cs-green)!important; }
    .title-sub-bdc-l1__green-light { border-color: var(--cs-green-light)!important; }
    .title-sub-bdc-l1__brown { border-color: var(--cs-brown)!important; }
    .title-sub-bdc-l1__brown-light { border-color: var(--cs-brown-light)!important; }
    .title-sub-bdc-l1__brown-dark { border-color: var(--cs-brown-dark)!important; }
    .title-sub-bdc-l1__black { border-color: var(--cs-black)!important; }
    .title-sub-bdc-l1__white { border-color: var(--cs-white)!important; }
    .title-sub-bdc-l1__gray { border-color: var(--cs-gray)!important; }
    .title-sub-bdc-l1__gray-light { border-color: var(--cs-gray-light)!important; }
    .title-sub-bdc-l1__gray-dark { border-color: var(--cs-gray-dark)!important; }
    .title-sub-bdc-l1__color01 { border-color: var(--cs-color01)!important; }
    .title-sub-bdc-l1__color02 { border-color: var(--cs-color02)!important; }
    .title-sub-bdc-l1__color03 { border-color: var(--cs-color03)!important; }
    .title-sub-bdc-l1__color04 { border-color: var(--cs-color04)!important; }
    .title-sub-bdc-l1__color05 { border-color: var(--cs-color05)!important; }
    .title-sub-bdc-l1__color06 { border-color: var(--cs-color06)!important; }
    .title-sub-bdc-l1__color07 { border-color: var(--cs-color07)!important; }
    .title-sub-bdc-l1__color08 { border-color: var(--cs-color08)!important; }
    .title-sub-bdc-l1__color09 { border-color: var(--cs-color09)!important; }
    .title-sub-bdc-l1__color10 { border-color: var(--cs-color10)!important; }

    .title-sub-zure__blue ::before { border-color: var(--cs-blue)!important; }
    .title-sub-zure__blue-light::before { border-color: var(--cs-blue-light)!important; }
    .title-sub-zure__blue-dark::before { border-color: var(--cs-blue-dark)!important; }
    .title-sub-zure__navy::before { border-color: var(--cs-navy)!important; }
    .title-sub-zure__purple::before { border-color: var(--cs-purple)!important; }
    .title-sub-zure__pink::before { border-color: var(--cs-pink)!important; }
    .title-sub-zure__pink-light::before { border-color: var(--cs-pink-light)!important; }
    .title-sub-zure__red::before { border-color: var(--cs-red)!important; }
    .title-sub-zure__red-light::before { border-color: var(--cs-red-light)!important; }
    .title-sub-zure__red-dark::before { border-color: var(--cs-red-dark)!important; }
    .title-sub-zure__orange::before { border-color: var(--cs-orange)!important; }
    .title-sub-zure__yellow::before { border-color: var(--cs-yellow)!important; }
    .title-sub-zure__green::before { border-color: var(--cs-green)!important; }
    .title-sub-zure__green-light::before { border-color: var(--cs-green-light)!important; }
    .title-sub-zure__brown::before { border-color: var(--cs-brown)!important; }
    .title-sub-zure__brown-light::before { border-color: var(--cs-brown-light)!important; }
    .title-sub-zure__brown-dark::before { border-color: var(--cs-brown-dark)!important; }
    .title-sub-zure__black::before { border-color: var(--cs-black)!important; }
    .title-sub-zure__white::before { border-color: var(--cs-white)!important; }
    .title-sub-zure__gray::before { border-color: var(--cs-gray)!important; }
    .title-sub-zure__gray-light::before { border-color: var(--cs-gray-light)!important; }
    .title-sub-zure__gray-dark::before { border-color: var(--cs-gray-dark)!important; }
    .title-sub-zure__color01::before { border-color: var(--cs-color01)!important; }
    .title-sub-zure__color02::before { border-color: var(--cs-color02)!important; }
    .title-sub-zure__color03::before { border-color: var(--cs-color03)!important; }
    .title-sub-zure__color04::before { border-color: var(--cs-color04)!important; }
    .title-sub-zure__color05::before { border-color: var(--cs-color05)!important; }
    .title-sub-zure__color06::before { border-color: var(--cs-color06)!important; }
    .title-sub-zure__color07::before { border-color: var(--cs-color07)!important; }
    .title-sub-zure__color08::before { border-color: var(--cs-color08)!important; }
    .title-sub-zure__color09::before { border-color: var(--cs-color09)!important; }
    .title-sub-zure__color10::before { border-color: var(--cs-color10)!important; }



  /* -- subtitle background -- */
  [class*="title-sub-bg-"] {
    position: relative;
		-webkit-border-radius: 8px;
			 -moz-border-radius: 8px;
						border-radius: 8px;
				-ms-border-radius: 8px;
    text-align: left;
    line-height: 1.2;
    }
  [class*="title-sub-bg-kaku"] {
		-webkit-border-radius: 0px;
			 -moz-border-radius: 0px;
						border-radius: 0px;
				-ms-border-radius: 0px;
    }
  [class*="title-sub-zure"]::before {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 100%;
    height: 100%;
    content: '';
    border: 4px solid var(--cs-bordercolor);
    }
    @media print, screen and (min-width: 768px) {
      [class*="title-sub-bg-"] {
        font-size: 2.2rem;
        margin-bottom: 30px;
        padding: 10px 10px 8px 25px;
        }
      [class*="title-sub-zure"] {
        padding: 10px 20px calc(10px + 10px);
        }
    }
    @media (max-width: 767px) {
      [class*="title-sub-bg-"] {
        font-size: 1.8rem;
        margin-bottom: 20px;
        padding: 8px 8px 6px 12px;
        }
      [class*="title-sub-zure"] {
        padding: 8px 8px calc(8px + 8px) ;
        }
    }





     /* color */
    [class*="title-sub-bg-"][class*="__blue"] { background-color: var(--cs-blue); }
    [class*="title-sub-bg-"][class*="__blue-light"] { background-color: var(--cs-blue-light); }
    [class*="title-sub-bg-"][class*="__blue-dark"] { background-color: var(--cs-blue-dark); }
    [class*="title-sub-bg-"][class*="__navy"] { background-color: var(--cs-navy); }
    [class*="title-sub-bg-"][class*="__purple"] { background-color: var(--cs-purple); }
    [class*="title-sub-bg-"][class*="__pink"] { background-color: var(--cs-pink); }
    [class*="title-sub-bg-"][class*="__pinklight"] { background-color: var(--cs-pinklight); }
    [class*="title-sub-bg-"][class*="__red"] { background-color: var(--cs-red); }
    [class*="title-sub-bg-"][class*="__red-light"] { background-color: var(--cs-red-light); }
    [class*="title-sub-bg-"][class*="__red-dark"] { background-color: var(--cs-red-dark); }
    [class*="title-sub-bg-"][class*="__orange"] { background-color: var(--cs-orange); }
    [class*="title-sub-bg-"][class*="__yellow"] { background-color: var(--cs-yellow); }
    [class*="title-sub-bg-"][class*="__green"] { background-color: var(--cs-green); }
    [class*="title-sub-bg-"][class*="__greenlight"] { background-color: var(--cs-greenlight); }
    [class*="title-sub-bg-"][class*="__brown"] { background-color: var(--cs-brown); }
    [class*="title-sub-bg-"][class*="__brownlight"] { background-color: var(--cs-brownlight); }
    [class*="title-sub-bg-"][class*="__brown-dark"] { background-color: var(--cs-brown-dark); }
    [class*="title-sub-bg-"][class*="__black"] { background-color: var(--cs-black); }
    [class*="title-sub-bg-"][class*="__white"] { background-color: var(--cs-white); }
    [class*="title-sub-bg-"][class*="__gray"] { background-color: var(--cs-gray); }
    [class*="title-sub-bg-"][class*="__gray-light"] { background-color: var(--cs-gray-light); }
    [class*="title-sub-bg-"][class*="__gray-dark"] { background-color: var(--cs-gray-dark); }
    [class*="title-sub-bg-"][class*="__color01"] { background-color: var(--cs-color01); }
    [class*="title-sub-bg-"][class*="__color02"] { background-color: var(--cs-color02); }
    [class*="title-sub-bg-"][class*="__color03"] { background-color: var(--cs-color03); }
    [class*="title-sub-bg-"][class*="__color04"] { background-color: var(--cs-color04); }
    [class*="title-sub-bg-"][class*="__color05"] { background-color: var(--cs-color05); }
    [class*="title-sub-bg-"][class*="__color06"] { background-color: var(--cs-color06); }
    [class*="title-sub-bg-"][class*="__color07"] { background-color: var(--cs-color07); }
    [class*="title-sub-bg-"][class*="__color08"] { background-color: var(--cs-color08); }
    [class*="title-sub-bg-"][class*="__color09"] { background-color: var(--cs-color09); }
    [class*="title-sub-bg-"][class*="__color10"] { background-color: var(--cs-color10); }

    .title-sub-bg-kaku__blue  { background-color: var(--cs-blue)!important; }
    .title-sub-bg-kaku__blue-light { background-color: var(--cs-blue-light)!important; }
    .title-sub-bg-kaku__blue-dark { background-color: var(--cs-blue-dark)!important; }
    .title-sub-bg-kaku__navy { background-color: var(--cs-navy)!important; }
    .title-sub-bg-kaku__purple { background-color: var(--cs-purple)!important; }
    .title-sub-bg-kaku__pink { background-color: var(--cs-pink)!important; }
    .title-sub-bg-kaku__pink-light { background-color: var(--cs-pink-light)!important; }
    .title-sub-bg-kaku__red { background-color: var(--cs-red)!important; }
    .title-sub-bg-kaku__red-light { background-color: var(--cs-red-light)!important; }
    .title-sub-bg-kaku__red-dark { background-color: var(--cs-red-dark)!important; }
    .title-sub-bg-kaku__orange { background-color: var(--cs-orange)!important; }
    .title-sub-bg-kaku__yellow { background-color: var(--cs-yellow)!important; }
    .title-sub-bg-kaku__green { background-color: var(--cs-green)!important; }
    .title-sub-bg-kaku__green-light { background-color: var(--cs-green-light)!important; }
    .title-sub-bg-kaku__brown { background-color: var(--cs-brown)!important; }
    .title-sub-bg-kaku__brown-light { background-color: var(--cs-brown-light)!important; }
    .title-sub-bg-kaku__brown-dark { background-color: var(--cs-brown-dark)!important; }
    .title-sub-bg-kaku__black { background-color: var(--cs-black)!important; }
    .title-sub-bg-kaku__white { background-color: var(--cs-white)!important; }
    .title-sub-bg-kaku__gray { background-color: var(--cs-gray)!important; }
    .title-sub-bg-kaku__gray-light { background-color: var(--cs-gray-light)!important; }
    .title-sub-bg-kaku__gray-dark { background-color: var(--cs-gray-dark)!important; }
    .title-sub-bg-kaku__color01 { background-color: var(--cs-color01)!important; }
    .title-sub-bg-kaku__color02 { background-color: var(--cs-color02)!important; }
    .title-sub-bg-kaku__color03 { background-color: var(--cs-color03)!important; }
    .title-sub-bg-kaku__color04 { background-color: var(--cs-color04)!important; }
    .title-sub-bg-kaku__color05 { background-color: var(--cs-color05)!important; }
    .title-sub-bg-kaku__color06 { background-color: var(--cs-color06)!important; }
    .title-sub-bg-kaku__color07 { background-color: var(--cs-color07)!important; }
    .title-sub-bg-kaku__color08 { background-color: var(--cs-color08)!important; }
    .title-sub-bg-kaku__color09 { background-color: var(--cs-color09)!important; }
    .title-sub-bg-kaku__color10 { background-color: var(--cs-color10)!important; }



  /* -- subtitle marker -- */
  [class*="title-sub-marker"] {
    display: inline;
    line-height: 1.5;
    padding: 0px;
    }
    @media print, screen and (min-width: 768px) {
      [class*="title-sub-marker"] {
        font-size: 2.2rem;
        margin-bottom: 30px;
        }
    }
    @media (max-width: 767px) {
      [class*="title-sub-marker"] {
        font-size: 1.8rem;
        margin-bottom: 20px;
        }
    }


     /* color */
    [class*="title-sub-marker"][class*="__blue"] { background: linear-gradient(transparent 64%, var(--cs-blue) 64%); }
    [class*="title-sub-marker"][class*="__blue-light"] { background: linear-gradient(transparent 64%, var(--cs-blue-light) 64%); }
    [class*="title-sub-marker"][class*="__blue-dark"] { background: linear-gradient(transparent 64%, var(--cs-blue-dark) 64%); }
    [class*="title-sub-marker"][class*="__navy"] { background: linear-gradient(transparent 64%, var(--cs-navy) 64%); }
    [class*="title-sub-marker"][class*="__purple"] { background: linear-gradient(transparent 64%, var(--cs-purple) 64%); }
    [class*="title-sub-marker"][class*="__pink"] { background: linear-gradient(transparent 64%, var(--cs-pink) 64%); }
    [class*="title-sub-marker"][class*="__pinklight"] { background: linear-gradient(transparent 64%, var(--cs-pinklight) 64%); }
    [class*="title-sub-marker"][class*="__red"] { background: linear-gradient(transparent 64%, var(--cs-red) 64%); }
    [class*="title-sub-marker"][class*="__red-light"] { background: linear-gradient(transparent 64%, var(--cs-red-light) 64%); }
    [class*="title-sub-marker"][class*="__red-dark"] { background: linear-gradient(transparent 64%, var(--cs-red-dark) 64%); }
    [class*="title-sub-marker"][class*="__orange"] { background: linear-gradient(transparent 64%, var(--cs-orange) 64%); }
    [class*="title-sub-marker"][class*="__yellow"] { background: linear-gradient(transparent 64%, var(--cs-yellow) 64%); }
    [class*="title-sub-marker"][class*="__green"] { background: linear-gradient(transparent 64%, var(--cs-green) 64%); }
    [class*="title-sub-marker"][class*="__greenlight"] { background: linear-gradient(transparent 64%, var(--cs-greenlight) 64%); }
    [class*="title-sub-marker"][class*="__brown"] { background: linear-gradient(transparent 64%, var(--cs-brown) 64%); }
    [class*="title-sub-marker"][class*="__brownlight"] { background: linear-gradient(transparent 64%, var(--cs-brownlight) 64%); }
    [class*="title-sub-marker"][class*="__brown-dark"] { background: linear-gradient(transparent 64%, var(--cs-brown-dark) 64%); }
    [class*="title-sub-marker"][class*="__black"] { background: linear-gradient(transparent 64%, var(--cs-black) 64%); }
    [class*="title-sub-marker"][class*="__white"] { background: linear-gradient(transparent 64%, var(--cs-white) 64%); }
    [class*="title-sub-marker"][class*="__gray"] { background: linear-gradient(transparent 64%, var(--cs-gray) 64%); }
    [class*="title-sub-marker"][class*="__gray-light"] { background: linear-gradient(transparent 64%, var(--cs-gray-light) 64%); }
    [class*="title-sub-marker"][class*="__gray-dark"] { background: linear-gradient(transparent 64%, var(--cs-gray-dark) 64%); }
    [class*="title-sub-marker"][class*="__color01"] { background: linear-gradient(transparent 64%, var(--cs-color01) 64%); }
    [class*="title-sub-marker"][class*="__color02"] { background: linear-gradient(transparent 64%, var(--cs-color02) 64%); }
    [class*="title-sub-marker"][class*="__color03"] { background: linear-gradient(transparent 64%, var(--cs-color03) 64%); }
    [class*="title-sub-marker"][class*="__color04"] { background: linear-gradient(transparent 64%, var(--cs-color04) 64%); }
    [class*="title-sub-marker"][class*="__color05"] { background: linear-gradient(transparent 64%, var(--cs-color05) 64%); }
    [class*="title-sub-marker"][class*="__color06"] { background: linear-gradient(transparent 64%, var(--cs-color06) 64%); }
    [class*="title-sub-marker"][class*="__color07"] { background: linear-gradient(transparent 64%, var(--cs-color07) 64%); }
    [class*="title-sub-marker"][class*="__color08"] { background: linear-gradient(transparent 64%, var(--cs-color08) 64%); }
    [class*="title-sub-marker"][class*="__color09"] { background: linear-gradient(transparent 64%, var(--cs-color09) 64%); }
    [class*="title-sub-marker"][class*="__color10"] { background: linear-gradient(transparent 64%, var(--cs-color10) 64%); }










/*	button
===================================================== */

	[class*="btn-kaku"],
	[class*="btn-maru"] {
		display: inline-block;
		outline: none;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    margin: 0 auto;
		box-sizing: border-box;
		border: 2px solid #000;
    background-color: #fff;
		color: #000;
    text-decoration: none;
    text-align: center;
		}
	[class*="btn-maru"] {
		-webkit-border-radius: 9999px;
			 -moz-border-radius: 9999px;
						border-radius: 9999px;
				-ms-border-radius: 9999px;
		}
    @media print, screen and (min-width: 768px) {
      [class*="btn-kaku"]:hover,
      [class*="btn-maru"]:hover {
        color: #000;
      -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
          box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
        -webkit-transform: translate(0, -1px);
          -ms-transform: translate(0, -1px);
            transform: translate(0, -1px);
        -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }
    }
    @media (max-width: 767px) {
      [class*="btn-kaku"],
      [class*="btn-maru"] {
        padding: 5px 15px;
        }
    }



   /* sixe */
    .btn-kaku-w,
    .btn-maru-w {
      width: 100%;
      }
    .btn-kaku-l,
    .btn-maru-l {
      max-width: 320px;
      width: 100%;
      }
    .btn-kaku-s,
    .btn-maru-s {
      max-width: 160px;
      width: 100%;
      }
    .btn-kaku-h,
    .btn-maru-h {
      padding: 20px 20px;
      }
    @media (max-width: 767px) {
      a.btn-kaku-h,
      a.btn-maru-h {
        padding: 10px 15px;
        }
    }



     /* color */
    .btn-bg__blue { background-color: var(--cs-blue); }
    .btn-bg__blue-light { background-color: var(--cs-blue-light); }
    .btn-bg__blue-dark { background-color: var(--cs-blue-dark); }
    .btn-bg__navy { background-color: var(--cs-navy); }
    .btn-bg__purple { background-color: var(--cs-purple); }
    .btn-bg__pink { background-color: var(--cs-pink); }
    .btn-bg__pink-light { background-color: var(--cs-pink-light); }
    .btn-bg__red { background-color: var(--cs-red); }
    .btn-bg__red-light { background-color: var(--cs-red-light); }
    .btn-bg__red-dark { background-color: var(--cs-red-dark); }
    .btn-bg__orange { background-color: var(--cs-orange); }
    .btn-bg__yellow { background-color: var(--cs-yellow); }
    .btn-bg__green { background-color: var(--cs-green); }
    .btn-bg__green-light { background-color: var(--cs-green-light); }
    .btn-bg__brown { background-color: var(--cs-brown); }
    .btn-bg__brown-light { background-color: var(--cs-brown-light); }
    .btn-bg__brown-dark { background-color: var(--cs-brown-dark); }
    .btn-bg__black { background-color: var(--cs-black); }
    .btn-bg__white { background-color: var(--cs-white); }
    .btn-bg__gray { background-color: var(--cs-gray); }
    .btn-bg__gray-light { background-color: var(--cs-gray-light); }
    .btn-bg__gray-dark { background-color: var(--cs-gray-dark); }
    .btn-bg__color01 { background-color: var(--cs-color01); }
    .btn-bg__color02 { background-color: var(--cs-color02); }
    .btn-bg__color03 { background-color: var(--cs-color03); }
    .btn-bg__color04 { background-color: var(--cs-color04); }
    .btn-bg__color05 { background-color: var(--cs-color05); }
    .btn-bg__color06 { background-color: var(--cs-color06); }
    .btn-bg__color07 { background-color: var(--cs-color07); }
    .btn-bg__color08 { background-color: var(--cs-color08); }
    .btn-bg__color09 { background-color: var(--cs-color09); }
    .btn-bg__color10 { background-color: var(--cs-color10); }

    .btn-bg__blue:hover { background-color: var(--cs-blue); }
    .btn-bg__blue-light:hover { background-color: var(--cs-blue-light); }
    .btn-bg__blue-dark:hover { background-color: var(--cs-blue-dark); }
    .btn-bg__navy:hover { background-color: var(--cs-navy); }
    .btn-bg__purple:hover { background-color: var(--cs-purple); }
    .btn-bg__pink:hover { background-color: var(--cs-pink); }
    .btn-bg__pink-light:hover { background-color: var(--cs-pink-light); }
    .btn-bg__red:hover { background-color: var(--cs-red); }
    .btn-bg__red-light:hover { background-color: var(--cs-red-light); }
    .btn-bg__red-dark:hover { background-color: var(--cs-red-dark); }
    .btn-bg__orange:hover { background-color: var(--cs-orange); }
    .btn-bg__yellow:hover { background-color: var(--cs-yellow); }
    .btn-bg__green:hover { background-color: var(--cs-green); }
    .btn-bg__green-light:hover { background-color: var(--cs-green-light); }
    .btn-bg__brown:hover { background-color: var(--cs-brown); }
    .btn-bg__brown-light:hover { background-color: var(--cs-brown-light); }
    .btn-bg__brown-dark:hover { background-color: var(--cs-brown-dark); }
    .btn-bg__black:hover { background-color: var(--cs-black); }
    .btn-bg__white:hover { background-color: var(--cs-white); }
    .btn-bg__gray:hover { background-color: var(--cs-gray); }
    .btn-bg__gray-light:hover { background-color: var(--cs-gray-light); }
    .btn-bg__gray-dark:hover { background-color: var(--cs-gray-dark); }
    .btn-bg__color01:hover { background-color: var(--cs-color01); }
    .btn-bg__color02:hover { background-color: var(--cs-color02); }
    .btn-bg__color03:hover { background-color: var(--cs-color03); }
    .btn-bg__color04:hover { background-color: var(--cs-color04); }
    .btn-bg__color05:hover { background-color: var(--cs-color05); }
    .btn-bg__color06:hover { background-color: var(--cs-color06); }
    .btn-bg__color07:hover { background-color: var(--cs-color07); }
    .btn-bg__color08:hover { background-color: var(--cs-color08); }
    .btn-bg__color09:hover { background-color: var(--cs-color09); }
    .btn-bg__color10:hover { background-color: var(--cs-color10); }

    .btn-border__blue { border-color: var(--cs-blue); }
    .btn-border__blue-light { border-color: var(--cs-blue-light); }
    .btn-border__blue-dark { border-color: var(--cs-blue-dark); }
    .btn-border__navy { border-color: var(--cs-navy); }
    .btn-border__purple { border-color: var(--cs-purple); }
    .btn-border__pink { border-color: var(--cs-pink); }
    .btn-border__pink-light { border-color: var(--cs-pink-light); }
    .btn-border__red { border-color: var(--cs-red); }
    .btn-border__red-light { border-color: var(--cs-red-light); }
    .btn-border__red-dark { border-color: var(--cs-red-dark); }
    .btn-border__orange { border-color: var(--cs-orange); }
    .btn-border__yellow { border-color: var(--cs-yellow); }
    .btn-border__green { border-color: var(--cs-green); }
    .btn-border__green-light { border-color: var(--cs-green-light); }
    .btn-border__brown { border-color: var(--cs-brown); }
    .btn-border__brown-light { border-color: var(--cs-brown-light); }
    .btn-border__brown-dark { border-color: var(--cs-brown-dark); }
    .btn-border__black { border-color: var(--cs-black); }
    .btn-border__white { border-color: var(--cs-white); }
    .btn-border__gray { border-color: var(--cs-gray); }
    .btn-border__gray-light { border-color: var(--cs-gray-light); }
    .btn-border__gray-dark { border-color: var(--cs-gray-dark); }
    .btn-border__color01 { border-color: var(--cs-color01); }
    .btn-border__color02 { border-color: var(--cs-color02); }
    .btn-border__color03 { border-color: var(--cs-color03); }
    .btn-border__color04 { border-color: var(--cs-color04); }
    .btn-border__color05 { border-color: var(--cs-color05); }
    .btn-border__color06 { border-color: var(--cs-color06); }
    .btn-border__color07 { border-color: var(--cs-color07); }
    .btn-border__color08 { border-color: var(--cs-color08); }
    .btn-border__color09 { border-color: var(--cs-color09); }
    .btn-border__color10 { border-color: var(--cs-color10); }

    .btn-text__blue { color: var(--cs-blue); }
    .btn-text__blue-light { color: var(--cs-blue-light); }
    .btn-text__blue-dark { color: var(--cs-blue-dark); }
    .btn-text__navy { color: var(--cs-navy); }
    .btn-text__purple { color: var(--cs-purple); }
    .btn-text__pink { color: var(--cs-pink); }
    .btn-text__pink-light { color: var(--cs-pink-light); }
    .btn-text__red { color: var(--cs-red); }
    .btn-text__red-light { color: var(--cs-red-light); }
    .btn-text__red-dark { color: var(--cs-red-dark); }
    .btn-text__orange { color: var(--cs-orange); }
    .btn-text__yellow { color: var(--cs-yellow); }
    .btn-text__green { color: var(--cs-green); }
    .btn-text__green-light { color: var(--cs-green-light); }
    .btn-text__brown { color: var(--cs-brown); }
    .btn-text__brown-light { color: var(--cs-brown-light); }
    .btn-text__brown-dark { color: var(--cs-brown-dark); }
    .btn-text__black { color: var(--cs-black); }
    .btn-text__white { color: var(--cs-white); }
    .btn-text__gray { color: var(--cs-gray); }
    .btn-text__gray-light { color: var(--cs-gray-light); }
    .btn-text__gray-dark { color: var(--cs-gray-dark); }
    .btn-text__color01 { color: var(--cs-color01); }
    .btn-text__color02 { color: var(--cs-color02); }
    .btn-text__color03 { color: var(--cs-color03); }
    .btn-text__color04 { color: var(--cs-color04); }
    .btn-text__color05 { color: var(--cs-color05); }
    .btn-text__color06 { color: var(--cs-color06); }
    .btn-text__color07 { color: var(--cs-color07); }
    .btn-text__color08 { color: var(--cs-color08); }
    .btn-text__color09 { color: var(--cs-color09); }
    .btn-text__color10 { color: var(--cs-color10); }

    .btn-text__blue:hover { color: var(--cs-blue); }
    .btn-text__blue-light:hover { color: var(--cs-blue-light); }
    .btn-text__blue-dark:hover { color: var(--cs-blue-dark); }
    .btn-text__navy:hover { color: var(--cs-navy); }
    .btn-text__purple:hover { color: var(--cs-purple); }
    .btn-text__pink:hover { color: var(--cs-pink); }
    .btn-text__pink-light:hover { color: var(--cs-pink-light); }
    .btn-text__red:hover { color: var(--cs-red); }
    .btn-text__red-light:hover { color: var(--cs-red-light); }
    .btn-text__red-dark:hover { color: var(--cs-red-dark); }
    .btn-text__orange:hover { color: var(--cs-orange); }
    .btn-text__yellow:hover { color: var(--cs-yellow); }
    .btn-text__green:hover { color: var(--cs-green); }
    .btn-text__green-light:hover { color: var(--cs-green-light); }
    .btn-text__brown:hover { color: var(--cs-brown); }
    .btn-text__brown-light:hover { color: var(--cs-brown-light); }
    .btn-text__brown-dark:hover { color: var(--cs-brown-dark); }
    .btn-text__black:hover { color: var(--cs-black); }
    .btn-text__white:hover { color: var(--cs-white); }
    .btn-text__gray:hover { color: var(--cs-gray); }
    .btn-text__gray-light:hover { color: var(--cs-gray-light); }
    .btn-text__gray-dark:hover { color: var(--cs-gray-dark); }
    .btn-text__color01:hover { color: var(--cs-color01); }
    .btn-text__color02:hover { color: var(--cs-color02); }
    .btn-text__color03:hover { color: var(--cs-color03); }
    .btn-text__color04:hover { color: var(--cs-color04); }
    .btn-text__color05:hover { color: var(--cs-color05); }
    .btn-text__color06:hover { color: var(--cs-color06); }
    .btn-text__color07:hover { color: var(--cs-color07); }
    .btn-text__color08:hover { color: var(--cs-color08); }
    .btn-text__color09:hover { color: var(--cs-color09); }
    .btn-text__color10:hover { color: var(--cs-color10); }





/*	table
===================================================== */

	/* Table base (no responsive)  color is gray */
	table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
    }
		table caption {
			width: 100%;
			font-weight: bold;
			padding: 5px;
			box-sizing: border-box;
			text-align: left;
			}
    table th,
    table td {
			border-top: solid 1px var(--cs-bordercolor);
			border-bottom: solid 1px var(--cs-bordercolor);
      }
		table th,
		table td {
			box-sizing: border-box;
      text-align: left;
			vertical-align: middle;
			}
		@media print, screen and (min-width: 768px) {
      table th,
      table td {
        padding: 18px 10px 18px 30px;
        }
		}
		@media screen and (max-width: 767px) {
      table th,
      table td {
        padding: 10px 10px 10px 20px;
        }
		}


		/* table color customize */
    .tbl-bg__blue > tr > * { background-color: var(--cs-blue); }
    .tbl-bg__blue-light > tr > * { background-color: var(--cs-blue-light); }
    .tbl-bg__blue-dark > tr > * { background-color: var(--cs-blue-dark); }
    .tbl-bg__navy > tr > * { background-color: var(--cs-navy); }
    .tbl-bg__purple > tr > * { background-color: var(--cs-purple); }
    .tbl-bg__pink > tr > * { background-color: var(--cs-pink); }
    .tbl-bg__pink-light > tr > * { background-color: var(--cs-pink-light); }
    .tbl-bg__red > tr > * { background-color: var(--cs-red); }
    .tbl-bg__red-light > tr > * { background-color: var(--cs-red-light); }
    .tbl-bg__red-dark > tr > * { background-color: var(--cs-red-dark); }
    .tbl-bg__orange > tr > * { background-color: var(--cs-orange); }
    .tbl-bg__yellow > tr > * { background-color: var(--cs-yellow); }
    .tbl-bg__green > tr > * { background-color: var(--cs-green); }
    .tbl-bg__green-light > tr > * { background-color: var(--cs-green-light); }
    .tbl-bg__brown > tr > * { background-color: var(--cs-brown); }
    .tbl-bg__brown-light > tr > * { background-color: var(--cs-brown-light); }
    .tbl-bg__brown-dark > tr > * { background-color: var(--cs-brown-dark); }
    .tbl-bg__black > tr > * { background-color: var(--cs-black); }
    .tbl-bg__white > tr > * { background-color: var(--cs-white); }
    .tbl-bg__gray > tr > * { background-color: var(--cs-gray); }
    .tbl-bg__gray-light > tr > * { background-color: var(--cs-gray-light); }
    .tbl-bg__gray-dark > tr > * { background-color: var(--cs-gray-dark); }
    .tbl-bg__color01 > tr > * { background-color: var(--cs-color01); }
    .tbl-bg__color02 > tr > * { background-color: var(--cs-color02); }
    .tbl-bg__color03 > tr > * { background-color: var(--cs-color03); }
    .tbl-bg__color04 > tr > * { background-color: var(--cs-color04); }
    .tbl-bg__color05 > tr > * { background-color: var(--cs-color05); }
    .tbl-bg__color06 > tr > * { background-color: var(--cs-color06); }
    .tbl-bg__color07 > tr > * { background-color: var(--cs-color07); }
    .tbl-bg__color08 > tr > * { background-color: var(--cs-color08); }
    .tbl-bg__color09 > tr > * { background-color: var(--cs-color09); }
    .tbl-bg__color10 > tr > * { background-color: var(--cs-color10); }

    .tbl-odd__blue > tr:nth-child(odd) > * { background-color: var(--cs-blue); }
    .tbl-odd__blue-light > tr:nth-child(odd) > * { background-color: var(--cs-blue-light); }
    .tbl-odd__blue-dark > tr:nth-child(odd) > * { background-color: var(--cs-blue-dark); }
    .tbl-odd__navy > tr:nth-child(odd) > * { background-color: var(--cs-navy); }
    .tbl-odd__purple > tr:nth-child(odd) > * { background-color: var(--cs-purple); }
    .tbl-odd__pink > tr:nth-child(odd) > * { background-color: var(--cs-pink); }
    .tbl-odd__pink-light > tr:nth-child(odd) > * { background-color: var(--cs-pink-light); }
    .tbl-odd__red > tr:nth-child(odd) > * { background-color: var(--cs-red); }
    .tbl-odd__red-light > tr:nth-child(odd) > * { background-color: var(--cs-red-light); }
    .tbl-odd__red-dark > tr:nth-child(odd) > * { background-color: var(--cs-red-dark); }
    .tbl-odd__orange > tr:nth-child(odd) > * { background-color: var(--cs-orange); }
    .tbl-odd__yellow > tr:nth-child(odd) > * { background-color: var(--cs-yellow); }
    .tbl-odd__green > tr:nth-child(odd) > * { background-color: var(--cs-green); }
    .tbl-odd__green-light > tr:nth-child(odd) > * { background-color: var(--cs-green-light); }
    .tbl-odd__brown > tr:nth-child(odd) > * { background-color: var(--cs-brown); }
    .tbl-odd__brown-light > tr:nth-child(odd) > * { background-color: var(--cs-brown-light); }
    .tbl-odd__brown-dark > tr:nth-child(odd) > * { background-color: var(--cs-brown-dark); }
    .tbl-odd__black > tr:nth-child(odd) > * { background-color: var(--cs-black); }
    .tbl-odd__white > tr:nth-child(odd) > * { background-color: var(--cs-white); }
    .tbl-odd__gray > tr:nth-child(odd) > * { background-color: var(--cs-gray); }
    .tbl-odd__gray-light > tr:nth-child(odd) > * { background-color: var(--cs-gray-light); }
    .tbl-odd__gray-dark > tr:nth-child(odd) > * { background-color: var(--cs-gray-dark); }
    .tbl-odd__color01 > tr:nth-child(odd) > * { background-color: var(--cs-color01); }
    .tbl-odd__color02 > tr:nth-child(odd) > * { background-color: var(--cs-color02); }
    .tbl-odd__color03 > tr:nth-child(odd) > * { background-color: var(--cs-color03); }
    .tbl-odd__color04 > tr:nth-child(odd) > * { background-color: var(--cs-color04); }
    .tbl-odd__color05 > tr:nth-child(odd) > * { background-color: var(--cs-color05); }
    .tbl-odd__color06 > tr:nth-child(odd) > * { background-color: var(--cs-color06); }
    .tbl-odd__color07 > tr:nth-child(odd) > * { background-color: var(--cs-color07); }
    .tbl-odd__color08 > tr:nth-child(odd) > * { background-color: var(--cs-color08); }
    .tbl-odd__color09 > tr:nth-child(odd) > * { background-color: var(--cs-color09); }
    .tbl-odd__color10 > tr:nth-child(odd) > * { background-color: var(--cs-color10); }

     .tbl-bg-only__blue { background-color: var(--cs-blue)!important; }
    .tbl-bg-only__blue-light { background-color: var(--cs-blue-light)!important; }
    .tbl-bg-only__blue-dark { background-color: var(--cs-blue-dark)!important; }
    .tbl-bg-only__navy { background-color: var(--cs-navy)!important; }
    .tbl-bg-only__purple { background-color: var(--cs-purple)!important; }
    .tbl-bg-only__pink { background-color: var(--cs-pink)!important; }
    .tbl-bg-only__pink-light { background-color: var(--cs-pink-light)!important; }
    .tbl-bg-only__red { background-color: var(--cs-red)!important; }
    .tbl-bg-only__red-light { background-color: var(--cs-red-light)!important; }
    .tbl-bg-only__red-dark { background-color: var(--cs-red-dark)!important; }
    .tbl-bg-only__orange { background-color: var(--cs-orange)!important; }
    .tbl-bg-only__yellow { background-color: var(--cs-yellow)!important; }
    .tbl-bg-only__green { background-color: var(--cs-green)!important; }
    .tbl-bg-only__green-light { background-color: var(--cs-green-light)!important; }
    .tbl-bg-only__brown { background-color: var(--cs-brown)!important; }
    .tbl-bg-only__brown-light { background-color: var(--cs-brown-light)!important; }
    .tbl-bg-only__brown-dark { background-color: var(--cs-brown-dark)!important; }
    .tbl-bg-only__black { background-color: var(--cs-black)!important; }
    .tbl-bg-only__white { background-color: var(--cs-white)!important; }
    .tbl-bg-only__gray { background-color: var(--cs-gray)!important; }
    .tbl-bg-only__gray-light { background-color: var(--cs-gray-light)!important; }
    .tbl-bg-only__gray-dark { background-color: var(--cs-gray-dark)!important; }
    .tbl-bg-only__color01 { background-color: var(--cs-color01)!important; }
    .tbl-bg-only__color02 { background-color: var(--cs-color02)!important; }
    .tbl-bg-only__color03 { background-color: var(--cs-color03)!important; }
    .tbl-bg-only__color04 { background-color: var(--cs-color04)!important; }
    .tbl-bg-only__color05 { background-color: var(--cs-color05)!important; }
    .tbl-bg-only__color06 { background-color: var(--cs-color06)!important; }
    .tbl-bg-only__color07 { background-color: var(--cs-color07)!important; }
    .tbl-bg-only__color08 { background-color: var(--cs-color08)!important; }
    .tbl-bg-only__color09 { background-color: var(--cs-color09)!important; }
    .tbl-bg-only__color10 { background-color: var(--cs-color10)!important; }




	/* table normal (when responsive)  */
	.tbl-normal {
		}
    .tbl-normal > tr > th,
    .tbl-normal > tr > td {
			border: solid 1px var(--cs-bordercolor);
      }
		.tbl-normal > tr > th,
		.tbl-normal > tr > td {
      text-align: center;
			}
		@media print, screen and (min-width: 768px) {
      .tbl-normal > tr > th,
      .tbl-normal > tr > td {
        padding: 10px;
        }
		}
		@media screen and (max-width: 767px) {
      .tbl-normal > tr > th,
      .tbl-normal > tr > td {
        padding: 8px;
        }
		}



	/* table vertical (when responsive)  */
	.tbl-vertical {
		}
		@media print, screen and (min-width: 768px) {
		}
		@media screen and (max-width: 767px) {
			.tbl-vertical > tr:not(:first-child) > th {
        margin-top: 10px; 
				}
			.tbl-vertical > tr > th {
				display: block;
        width: 100%!important;
        border-left: solid 1px var(--cs-bordercolor);
        border-right: solid 1px var(--cs-bordercolor);
				}
			.tbl-vertical > tr > td {
				display: block;
        width: 100%!important;
				border-top: hidden;
        border-left: solid 1px var(--cs-bordercolor);
        border-right: solid 1px var(--cs-bordercolor);
				}
		}


	/* table separate (when responsive)  */
	.tbl-separate {
		}
		@media print, screen and (min-width: 768px) {
      .tbl-separate > tr > th,
      .tbl-separate > tr > td {
        padding: 10px;
        }
		}
		@media screen and (max-width: 767px) {
      .tbl-separate > tr > th,
      .tbl-separate > tr > td {
        padding: 8px;
        }
			.tbl-separate > tr.tbl-separate__head {
				display: none;
  			}
			.tbl-separate > tr {
				display: block;
  			}
			.tbl-separate > tr:not(:last-child) {
				margin-bottom: 20px;
  			}
			.tbl-separate > tr > td {
				display: block;
				padding: 10px;
				text-align: right;
  			}
			.tbl-separate > tr > td:not(:first-child) {
				border-top: hidden;
  			}
			.tbl-separate > tr > td::before {
				content: attr(data-label);
				float: left;
				font-weight: bold;
  			}
      
      .tbl-separate__op01 {
        font-size: 110%;
        font-weight: bold;
        text-align: center!important;
        }      
      
		}





	/* table scroll */
  .tbl-scroll {
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    }
    .tbl-scroll::-webkit-scrollbar { /*スクロールバー全体の高さ*/
      height: 4px;
      }
    .tbl-scroll::-webkit-scrollbar-track { /*スクロールバー全体の背景*/
      background: #eee;
      }
    .tbl-scroll::-webkit-scrollbar-thumb { /*スクロールバーの動く部分*/
      background: #aaa;
      border: none;
      }
    .tbl-scroll::-webkit-scrollbar-thumb:hover { /*スクロールバーの動く部分のホバー（マウスオーバー）*/
      background: #999;
      }
 
  .tbl-scroll > table {
    min-width: 800px;
    }
  .tbl-scroll > table th,
  .tbl-scroll > table td {
    border: 1px solid var(--cs-bordercolor);
    padding: 18px 10px;
    }
  .tbl-scroll > table th {
    }
 .tbl-scroll > table td {
    }
    @media (max-width: 767px) {
      .tbl-scroll > table th,
      .tbl-scroll > table td {
        padding: 10px 5px;
        }
    }

  ._sticky {
    position: sticky;
    left: 0;
    border: none;
    }
  ._sticky:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    width: 100%;
    height: 100%;
    border-left: 1px solid var(--cs-bordercolor);
    border-right: 1px solid var(--cs-bordercolor);
    z-index: -1;
    }

  @media screen and (max-width : 860px){
    .tbl-scroll:after {
      content: "scroll >>>";
      font-size: 80%;
      font-weight: 800;
      position: relative;
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      animation: yokoSC 1.5s ease-in-out infinite alternate;
      }
  }
  @keyframes yokoSC{
    0% {opacity:.2;}
    100% {opacity:1;}
  }
  @-webkit-keyframes yokoSC{
    0% {opacity:.2;}
    100% {opacity:1;}
  }
  @-moz-keyframes yokoSC{
    0% {opacity:.2;}
    100% {opacity:1;}
  }


		/* table customize */

    .tbl-border-all > tr > th,
    .tbl-border-all > tr > td {
      border: 1px solid var(--cs-bordercolor);
      }
    .tbl-border-none > tr > th,
    .tbl-border-none > tr > td {
      border: hidden;
      }
    .tbl-vat > tr > th,
    .tbl-vat > tr > td {
      vertical-align: top;
      }
    .tbl-th-tac > tr > th {
      text-align: center;
      }
    .tbl-td-tac > tr > td {
      text-align: center;
      }
    @media print, screen and (min-width: 768px) {
      .tbl-td-tar > tr > td {
        text-align: right;
        padding-right: 30px;
        }
      .tbl-pad-narrow > tr > th,
      .tbl-pad-narrow > tr > td {
        padding: 10px 20px;
        }
      .tbl-pad-wide > tr > th,
      .tbl-pad-wide > tr > td {
        padding: 20px 30px;
        }
      .tbl-border-top {
        border-top: hidden!important;
        }
      .tbl-border-right {
        border-right: hidden!important;
        }
      .tbl-border-bottom {
        border-bottom: hidden!important;
        }
      .tbl-border-left {
        border-left: hidden!important;
        }
		}
		@media screen and (max-width: 767px) {
			.tbl-vertical.tbl-border-all > tr > td {
				border-top: hidden;
				}
      .tbl-td-tar > tr > td {
        text-align: right;
        padding-right: 20px;
        }
		}





/*	画像を円形にトリミング
===================================================== */

    .img-maru,
    .img-maru-s {
      display: inline-block;
      position: relative;
      width: 100%;
      max-width: 480px;
      }
      .img-maru::before,
      .img-maru-s::before {
        content: "";
        display: block;
        padding-top: 100%;
        }
    .img-maru img,
    .img-maru-s img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      object-fit: cover;
      object-position: auto;
      border-radius: 50%;
      }
  @media (max-width: 767px) {
    .img-maru {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }
  }

    .img-maru-s {
      max-width: var(--img-maru-s--size);
      }