@charset "UTF-8";

/* ===============================================
  Utility: Display
=============================================== */
.clearfix:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.overflow-hidden {
	overflow: hidden !important;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Display: breakpoint hide */
@media (max-width: 767px) {
	.sp-hide {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.tbpc-hide {
	  display: none !important;
	}
  }
@media (min-width: 768px) and (max-width: 959px) {
	.tbs-hide {
		display: none !important;
	}
}
@media (min-width: 960px) and (max-width: 1279px) {
	.tbl-hide {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1279px) {
	.tb-hide {
		display: none !important;
	}
}
@media (min-width: 1280px) and (max-width: 1599px) {
	.pcs-hide {
		display: none !important;
	}
}
@media (min-width: 1600px) {
	.pcl-hide {
		display: none !important;
	}
}
@media (min-width: 1280px) {
	.pc-hide {
		display: none !important;
	}
}


/* ==============================
  Utility: Font Family
============================== */
.font-gothic {
	font-family: '游ゴシック','YuGothic','MS PGothic','ＭＳ Ｐゴシック','メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Meiryo,sans-serif;
}

.font-min {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

.font-italic {
	font-style: italic;
}

.font-en {
	font-family: 'Oswald', sans-serif;
}

.font-en-medium {
	font-weight: 500;
}
.font-bold {
	font-weight: 700!important;
}
.font-black {
	font-weight: 900;
}

/* ==============================
  Utility: Font Size
============================== */
.fz-xs { font-size: 0.75em !important;} /*12px*/
.fz-sm { font-size: 0.875rem !important;} /*14px*/
.fz-md { font-size: 1em !important;} /*16px*/
.fz-lg { font-size: 1.125em !important;} /*18px*/
.fz-xl { font-size: 1.25em !important;} /*20px*/

/* ==============================
  Utility: Line Height
============================== */
.lh-xs { line-height: 1.4 !important;}
.lh-sm { line-height: 1.6 !important;}
.lh-md { line-height: 1.8 !important;}
.lh-lg { line-height: 2.0 !important;}
.lh-xl { line-height: 2.2 !important;}

/* ==============================
  Utility: Heading Size
============================== */
/* .heading {
	margin-bottom: 1rem;
	padding: 0.5em 0;
	text-align: center;
} */

.heading-xs, .heading-sm, .heading-md, .heading-lg, .heading-xl, .heading-ex {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.12em;
    transition: all 0.3s ease-in-out;
}

.heading-xxs { font-size: 1em !important;} 
.heading-xs { font-size: 1.125em !important;} 
.heading-sm { font-size: 1.25em !important;}/*22.5px*/
.heading-md { font-size: 1.67em !important;} /*sec-ttl 30px*/
.heading-lg { font-size: 1.8em !important;}
.heading-xl { font-size: 2em !important;}
.heading-ex { font-size: 2.2em !important;}

@media (max-width:767px) {
	.heading-xs { font-size: 1em !important;}
	.heading-sm { font-size: 1.2em !important;}
	.heading-md { font-size: 1.3em !important;}/*sec-ttl 30px*/
	.heading-lg { font-size: 1.4em !important;}
	.heading-xl { font-size: 1.5em !important;}
	.heading-ex { font-size: 1.6em !important;}
}

.heading-lead {
	margin: 0;
	font-size: 2em;
	font-weight: 700;
	letter-spacing: 0.1em;
}

@media (max-width: 767px) {
	.heading-lead {
		font-size: 1.125em;
		font-weight: 700;
		letter-spacing: 0.1em;
	}
}

/* ==============================
  Utility: Text Alignment
============================== */
.text-left { text-align: left!important; }
.text-center { text-align: center!important; }
.text-right { text-align: right!important; }

@media (max-width: 769px) {
	.sp-text-left { text-align: left!important; }
	.sp-text-center { text-align: center!important; }
	.sp-text-right { text-align: right!important; }
}

.text-indent {
	padding-left: 1em;
	text-indent:-1em;
}

.text-vertical {
    writing-mode: vertical-rl;
}
.text-orientation-mixed {
    text-orientation: mixed;
}
.text-horizontal {
    writing-mode: horizontal-tb;
}

@media (max-width: 769px) {
	.sp-text-vertical {
		writing-mode: vertical-rl;
	}
	.sp-text-orientation-mixed {
		text-orientation: mixed;
	}
	.sp-text-horizontal {
		writing-mode: horizontal-tb;
	}
}

/* ==============================
  Utility: Border
============================== */
.bd {
	border: 1px solid var(--color-black);
}

.bd-t {border-top: 1px solid var(--color-black);}
.bd-r {border-right: 1px solid var(--color-black);}
.bd-b {border-bottom: 1px solid var(--color-black);}
.bd-l {border-left: 1px solid var(--color-black);}


/* ==============================
  Utility: Color / Background
============================== */
/* Text Colors */
.color-primary { color: var(--color-primary)!important; }
.color-secondary { color: var(--color-secondary)!important; }
.color-accent { color: var(--color-accent)!important; }
.color-black { color: var(--color-black)!important; }
.color-white { color: var(--color-white)!important; }
.color-gray-dark { color: var(--color-gray-dark)!important; }
.color-gray-light { color: var(--color-gray-light)!important; }
.color-red { color: var(--color-red)!important; }
.color-pink { color: var(--color-pink)!important; }
.color-purple { color: var(--color-purple)!important; }
.color-blue { color: var(--color-blue)!important; }
.color-turquoise { color: var(--color-turquoise)!important; }
.color-green { color: var(--color-green)!important; }
.color-yellow { color: var(--color-yellow)!important; }
.color-orange { color: var(--color-orange)!important; }

/* First Letter Color */
.first-letter-primary::first-letter {
    color: var(--color-primary);
}

/* Background Colors */
.bg-primary { background-color: var(--color-primary)!important; }
.bg-secondary { background-color: var(--color-secondary)!important; }
.bg-accent { background-color: var(--color-accent)!important; }
.bg-black { background-color: var(--color-black)!important; }
.bg-white { background-color: var(--color-white)!important; }
.bg-gray-dark { background-color: var(--color-gray-dark)!important; }
.bg-gray-light { background-color: var(--color-gray-light)!important; }
.bg-red { background-color: var(--color-red)!important; }
.bg-pink { background-color: var(--color-pink)!important; }
.bg-purple { background-color: var(--color-purple)!important; }
.bg-blue { background-color: var(--color-blue)!important; }
.bg-turquoise { background-color: var(--color-turquoise)!important; }
.bg-green { background-color: var(--color-green)!important; }
.bg-yellow { background-color: var(--color-yellow)!important; }
.bg-orange { background-color: var(--color-orange)!important; }

/* ===============================================
  Utility: Marker
=============================================== */
.marker-primary,.marker-secondary,.marker-accent {
  display: inline;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.marker-primary {
  background-image: linear-gradient(transparent 70%, color-mix(in srgb, var(--color-primary) 30%, white 70%) 70%);
}
.marker-secondary {
  background-image: linear-gradient(transparent 70%, color-mix(in srgb, var(--color-secondary) 30%, white 70%) 70%);
}
.marker-accent {
  background-image: linear-gradient(transparent 70%, color-mix(in srgb, var(--color-accent) 100%, white 70%) 70%);
}

/* ==============================
  Utility: Spacing (margin / padding)
============================== */
/* Margin（0, 0.5em, 0.75em, 1em, 1.5em, 2em, 3em, 5em） */
.mg-none { margin-top: 0 !important;}
.mg-xxs { margin-top: 0.5em !important;}
.mg-xs { margin-top: 0.75em !important;}
.mg-sm { margin-top: 1em !important;}
.mg-md { margin-top: 1.5em !important;}
.mg-lg { margin-top: 2em !important;}
.mg-xl { margin-top: 3em !important;}
.mg-xxl { margin-top: 5em !important;}

.mgt-none { margin-top: 0 !important;}
.mgt-xxs { margin-top: 0.5em !important;}
.mgt-xs { margin-top: 0.75em !important;}
.mgt-sm { margin-top: 1em !important;}
.mgt-md { margin-top: 1.5em !important;}
.mgt-lg { margin-top: 2em !important;}
.mgt-xl { margin-top: 3em !important;}
.mgt-xxl { margin-top: 5em !important;}

.mgb-none { margin-bottom: 0 !important;}
.mgb-xxs { margin-bottom: 0.5em !important;}
.mgb-xs { margin-bottom: 0.75em !important;}
.mgb-sm { margin-bottom: 1em !important;}
.mgb-md { margin-bottom: 1.5em !important;}
.mgb-lg { margin-bottom: 2em !important;}
.mgb-xl { margin-bottom: 3em !important;}
.mgb-xxl { margin-bottom: 5em !important;}

.mgl-none { margin-left: 0 !important;}
.mgl-xxs { margin-left: 0.5em !important;}
.mgl-xs { margin-left: 0.75em !important;}
.mgl-sm { margin-left: 1em !important;}
.mgl-md { margin-left: 1.5em !important;}
.mgl-lg { margin-left: 2em !important;}
.mgl-xl { margin-left: 3em !important;}
.mgl-xxl { margin-left: 5em !important;}

.mgr-none { margin-right: 0 !important;}
.mgr-xxs { margin-right: 0.5em !important;}
.mgr-xs { margin-right: 0.75em !important;}
.mgr-sm { margin-right: 1em !important;}
.mgr-md { margin-right: 1.5em !important;}
.mgr-lg { margin-right: 2em !important;}
.mgr-xl { margin-right: 3em !important;}
.mgr-xxl { margin-right: 5em !important;}

/* Padding（0, 0.5em, 0.75em, 1em, 1.5em, 2em, 3em, 5em） */
.pd-none { padding: 0 !important;}
.pd-xxs { padding: 0.5em !important;}
.pd-xs { padding: 0.75em !important;}
.pd-sm { padding: 1em !important;}
.pd-md { padding: 1.5em !important;}
.pd-lg { padding: 2em !important;}
.pd-xl { padding: 3em !important;}
.pd-xxl { padding: 5em !important;}

.pdt-none { padding-top: 0 !important;}
.pdt-xxs { padding-top: 0.5em !important;}
.pdt-xs { padding-top: 0.75em !important;}
.pdt-sm { padding-top: 1em !important;}
.pdt-md { padding-top: 1.5em !important;}
.pdt-lg { padding-top: 2em !important;}
.pdt-xl { padding-top: 3em !important;}
.pdt-xxl { padding-top: 5em !important;}

.pdb-none { padding-bottom: 0 !important;}
.pdb-xxs { padding-bottom: 0.5em !important;}
.pdb-xs { padding-bottom: 0.75em !important;}
.pdb-sm { padding-bottom: 1em !important;}
.pdb-md { padding-bottom: 1.5em !important;}
.pdb-lg { padding-bottom: 2em !important;}
.pdb-xl { padding-bottom: 3em !important;}
.pdb-xxl { padding-bottom: 5em !important;}

.pdr-none { padding-right: 0 !important;}
.pdr-xxs { padding-right: 0.5em !important;}
.pdr-xs { padding-right: 0.75em !important;}
.pdr-sm { padding-right: 1em !important;}
.pdr-md { padding-right: 1.5em !important;}
.pdr-lg { padding-right: 2em !important;}
.pdr-xl { padding-right: 3em !important;}
.pdr-xxl { padding-right: 5em !important;}

.pdl-none { padding-left: 0 !important;}
.pdl-xxs { padding-left: 0.5em !important;}
.pdl-xs { padding-left: 0.75em !important;}
.pdl-sm { padding-left: 1em !important;}
.pdl-md { padding-left: 1.5em !important;}
.pdl-lg { padding-left: 2em !important;}
.pdl-xl { padding-left: 3em !important;}
.pdl-xxl { padding-left: 5em !important;}

@media (max-width: 767px) {
	.sp-mg-none { margin-top: 0 !important;}
	.sp-mg-xxs { margin-top: 0.5em !important;}
	.sp-mg-xs { margin-top: 0.75em !important;}
	.sp-mg-sm { margin-top: 1em !important;}
	.sp-mg-md { margin-top: 1.5em !important;}
	.sp-mg-lg { margin-top: 2em !important;}
	.sp-mg-xl { margin-top: 3em !important;}
	.sp-mg-xxl { margin-top: 5em !important;}

	.sp-mgt-none { margin-top: 0 !important;}
	.sp-mgt-xxs { margin-top: 0.5em !important;}
	.sp-mgt-xs { margin-top: 0.75em !important;}
	.sp-mgt-sm { margin-top: 1em !important;}
	.sp-mgt-md { margin-top: 1.5em !important;}
	.sp-mgt-lg { margin-top: 2em !important;}
	.sp-mgt-xl { margin-top: 3em !important;}
	.sp-mgt-xxl { margin-top: 5em !important;}

	.sp-mgb-none { margin-bottom: 0 !important;}
	.sp-mgb-xxs { margin-bottom: 0.5em !important;}
	.sp-mgb-xs { margin-bottom: 0.75em !important;}
	.sp-mgb-sm { margin-bottom: 1em !important;}
	.sp-mgb-md { margin-bottom: 1.5em !important;}
	.sp-mgb-lg { margin-bottom: 2em !important;}
	.sp-mgb-xl { margin-bottom: 3em !important;}
	.sp-mgb-xxl { margin-bottom: 5em !important;}

	.sp-mgl-none { margin-left: 0 !important;}
	.sp-mgl-xxs { margin-left: 0.5em !important;}
	.sp-mgl-xs { margin-left: 0.75em !important;}
	.sp-mgl-sm { margin-left: 1em !important;}
	.sp-mgl-md { margin-left: 1.5em !important;}
	.sp-mgl-lg { margin-left: 2em !important;}
	.sp-mgl-xl { margin-left: 3em !important;}
	.sp-mgl-xxl { margin-left: 5em !important;}

	.sp-mgr-none { margin-right: 0 !important;}
	.sp-mgr-xxs { margin-right: 0.5em !important;}
	.sp-mgr-xs { margin-right: 0.75em !important;}
	.sp-mgr-sm { margin-right: 1em !important;}
	.sp-mgr-md { margin-right: 1.5em !important;}
	.sp-mgr-lg { margin-right: 2em !important;}
	.sp-mgr-xl { margin-right: 3em !important;}
	.sp-mgr-xxl { margin-right: 5em !important;}

	.sp-pd-none { padding: 0 !important;}
	.sp-pd-xxs { padding: 0.5em !important;}
	.sp-pd-xs { padding: 0.75em !important;}
	.sp-pd-sm { padding: 1em !important;}
	.sp-pd-md { padding: 1.5em !important;}
	.sp-pd-lg { padding: 2em !important;}
	.sp-pd-xl { padding: 3em !important;}
	.sp-pd-xxl { padding: 5em !important;}

	.sp-pdt-none { padding-top: 0 !important;}
	.sp-pdt-xxs { padding-top: 0.5em !important;}
	.sp-pdt-xs { padding-top: 0.75em !important;}
	.sp-pdt-sm { padding-top: 1em !important;}
	.sp-pdt-md { padding-top: 1.5em !important;}
	.sp-pdt-lg { padding-top: 2em !important;}
	.sp-pdt-xl { padding-top: 3em !important;}
	.sp-pdt-xxl { padding-top: 5em !important;}

	.sp-pdb-none { padding-bottom: 0 !important;}
	.sp-pdb-xxs { padding-bottom: 0.5em !important;}
	.sp-pdb-xs { padding-bottom: 0.75em !important;}
	.sp-pdb-sm { padding-bottom: 1em !important;}
	.sp-pdb-md { padding-bottom: 1.5em !important;}
	.sp-pdb-lg { padding-bottom: 2em !important;}
	.sp-pdb-xl { padding-bottom: 3em !important;}
	.sp-pdb-xxl { padding-bottom: 5em !important;}

	.sp-pdr-none { padding-right: 0 !important;}
	.sp-pdr-xxs { padding-right: 0.5em !important;}
	.sp-pdr-xs { padding-right: 0.75em !important;}
	.sp-pdr-sm { padding-right: 1em !important;}
	.sp-pdr-md { padding-right: 1.5em !important;}
	.sp-pdr-lg { padding-right: 2em !important;}
	.sp-pdr-xl { padding-right: 3em !important;}
	.sp-pdr-xxl { padding-right: 5em !important;}
	.sp-pdr-col { padding-right: 15px !important;}

	.sp-pdl-none { padding-left: 0 !important;}
	.sp-pdl-xxs { padding-left: 0.5em !important;}
	.sp-pdl-xs { padding-left: 0.75em !important;}
	.sp-pdl-sm { padding-left: 1em !important;}
	.sp-pdl-md { padding-left: 1.5em !important;}
	.sp-pdl-lg { padding-left: 2em !important;}
	.sp-pdl-xl { padding-left: 3em !important;}
	.sp-pdl-xxl { padding-left: 5em !important;}
	.sp-pdl-col { padding-left: 15px !important;}

	.sp-mg {
		margin: 0 -20px;
	}
}

/* ==============================
  Utility: Measure (Width / Height)
============================== */
.wa { width: auto !important; }
.w10 { width: 10px !important; }
.w15 { width: 15px !important; }
.w20 { width: 20px !important; }
.w25 { width: 25px !important; }
.w30 { width: 30px !important; }
.w35 { width: 35px !important; }
.w40 { width: 40px !important; }
.w45 { width: 45px !important; }
.w50 { width: 50px !important; }
.w55 { width: 55px !important; }
.w60 { width: 60px !important; }
.w65 { width: 65px !important; }
.w70 { width: 70px !important; }
.w75 { width: 75px !important; }
.w80 { width: 80px !important; }
.w85 { width: 85px !important; }
.w90 { width: 90px !important; }
.w95 { width: 95px !important; }
.w100 { width: 100px !important; }
.w105 { width: 105px !important; }
.w110 { width: 110px !important; }
.w115 { width: 115px !important; }
.w120 { width: 120px !important; }
.w125 { width: 125px !important; }
.w130 { width: 130px !important; }
.w135 { width: 135px !important; }
.w140 { width: 140px !important; }
.w145 { width: 145px !important; }
.w150 { width: 150px !important; }
.w155 { width: 155px !important; }
.w160 { width: 160px !important; }
.w165 { width: 165px !important; }
.w170 { width: 170px !important; }
.w175 { width: 175px !important; }
.w180 { width: 180px !important; }
.w185 { width: 185px !important; }
.w190 { width: 190px !important; }
.w195 { width: 195px !important; }
.w200 { width: 200px !important; }
.w205 { width: 205px !important; }
.w210 { width: 210px !important; }
.w215 { width: 215px !important; }
.w220 { width: 220px !important; }
.w225 { width: 225px !important; }
.w230 { width: 230px !important; }
.w235 { width: 235px !important; }
.w240 { width: 240px !important; }
.w245 { width: 245px !important; }
.w250 { width: 250px !important; }
.w255 { width: 255px !important; }
.w260 { width: 260px !important; }
.w265 { width: 265px !important; }
.w270 { width: 270px !important; }
.w275 { width: 275px !important; }
.w280 { width: 280px !important; }
.w285 { width: 285px !important; }
.w290 { width: 290px !important; }
.w295 { width: 295px !important; }
.w300 { width: 300px !important; }
.w305 { width: 305px !important; }
.w310 { width: 310px !important; }
.w315 { width: 315px !important; }
.w320 { width: 320px !important; }
.w325 { width: 325px !important; }
.w330 { width: 330px !important; }
.w335 { width: 335px !important; }
.w340 { width: 340px !important; }
.w345 { width: 345px !important; }
.w350 { width: 350px !important; }
.w355 { width: 355px !important; }
.w360 { width: 360px !important; }
.w365 { width: 365px !important; }
.w370 { width: 370px !important; }
.w375 { width: 375px !important; }
.w380 { width: 380px !important; }
.w385 { width: 385px !important; }
.w390 { width: 390px !important; }
.w395 { width: 395px !important; }
.w400 { width: 400px !important; }
.w405 { width: 405px !important; }
.w410 { width: 410px !important; }
.w415 { width: 415px !important; }
.w420 { width: 420px !important; }
.w425 { width: 425px !important; }
.w430 { width: 430px !important; }
.w435 { width: 435px !important; }
.w440 { width: 440px !important; }
.w445 { width: 445px !important; }
.w450 { width: 450px !important; }
.w455 { width: 455px !important; }
.w460 { width: 460px !important; }
.w465 { width: 465px !important; }
.w470 { width: 470px !important; }
.w475 { width: 475px !important; }
.w480 { width: 480px !important; }
.w485 { width: 485px !important; }
.w490 { width: 490px !important; }
.w495 { width: 495px !important; }
.w500 { width: 500px !important; }
.w505 { width: 505px !important; }
.w510 { width: 510px !important; }
.w515 { width: 515px !important; }
.w520 { width: 520px !important; }
.w525 { width: 525px !important; }
.w530 { width: 530px !important; }
.w535 { width: 535px !important; }
.w540 { width: 540px !important; }
.w545 { width: 545px !important; }
.w550 { width: 550px !important; }
.w555 { width: 555px !important; }
.w560 { width: 560px !important; }
.w565 { width: 565px !important; }
.w570 { width: 570px !important; }
.w575 { width: 575px !important; }
.w580 { width: 580px !important; }
.w585 { width: 585px !important; }
.w590 { width: 590px !important; }
.w595 { width: 595px !important; }
.w600 { width: 600px !important; }
.w605 { width: 605px !important; }
.w610 { width: 610px !important; }
.w615 { width: 615px !important; }
.w620 { width: 620px !important; }
.w625 { width: 625px !important; }
.w630 { width: 630px !important; }
.w635 { width: 635px !important; }
.w640 { width: 640px !important; }
.w645 { width: 645px !important; }
.w650 { width: 650px !important; }
.w655 { width: 655px !important; }
.w660 { width: 660px !important; }
.w665 { width: 665px !important; }
.w670 { width: 670px !important; }
.w675 { width: 675px !important; }
.w680 { width: 680px !important; }
.w685 { width: 685px !important; }
.w690 { width: 690px !important; }
.w695 { width: 695px !important; }
.w700 { width: 700px !important; }

.w5p { width: 5% !important; }
.w10p { width: 10% !important; }
.w15p { width: 15% !important; }
.w20p { width: 20% !important; }
.w25p { width: 25% !important; }
.w30p { width: 30% !important; }
.w35p { width: 35% !important; }
.w40p { width: 40% !important; }
.w45p { width: 45% !important; }
.w50p { width: 50% !important; }
.w55p { width: 55% !important; }
.w60p { width: 60% !important; }
.w65p { width: 65% !important; }
.w70p { width: 70% !important; }
.w75p { width: 75% !important; }
.w80p { width: 80% !important; }
.w85p { width: 85% !important; }
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }

@media (max-width: 767px) {
	.sp-w5p { width: 5% !important; }
	.sp-w10p { width: 10% !important; }
	.sp-w15p { width: 15% !important; }
	.sp-w20p { width: 20% !important; }
	.sp-w25p { width: 25% !important; }
	.sp-w30p { width: 30% !important; }
	.sp-w35p { width: 35% !important; }
	.sp-w40p { width: 40% !important; }
	.sp-w45p { width: 45% !important; }
	.sp-w50p { width: 50% !important; }
	.sp-w55p { width: 55% !important; }
	.sp-w60p { width: 60% !important; }
	.sp-w65p { width: 65% !important; }
	.sp-w70p { width: 70% !important; }
	.sp-w75p { width: 75% !important; }
	.sp-w80p { width: 80% !important; }
	.sp-w85p { width: 85% !important; }
	.sp-w90p { width: 90% !important; }
	.sp-w95p { width: 95% !important; }
	.sp-w100p { width: 100% !important; }
}

.ha { height: auto !important; }
.h5 { height: 5px !important; }
.h10 { height: 10px !important; }
.h15 { height: 15px !important; }
.h20 { height: 20px !important; }
.h25 { height: 25px !important; }
.h30 { height: 30px !important; }
.h35 { height: 35px !important; }
.h40 { height: 40px !important; }
.h45 { height: 45px !important; }
.h50 { height: 50px !important; }
.h55 { height: 55px !important; }
.h60 { height: 60px !important; }
.h65 { height: 65px !important; }
.h70 { height: 70px !important; }
.h75 { height: 75px !important; }
.h80 { height: 80px !important; }
.h85 { height: 85px !important; }
.h90 { height: 90px !important; }
.h95 { height: 95px !important; }
.h100 { height: 100px !important; }
.h105 { height: 105px !important; }
.h110 { height: 110px !important; }
.h115 { height: 115px !important; }
.h120 { height: 120px !important; }
.h125 { height: 125px !important; }
.h130 { height: 130px !important; }
.h135 { height: 135px !important; }
.h140 { height: 140px !important; }
.h145 { height: 145px !important; }
.h150 { height: 150px !important; }
.h155 { height: 155px !important; }
.h160 { height: 160px !important; }
.h165 { height: 165px !important; }
.h170 { height: 170px !important; }
.h175 { height: 175px !important; }
.h180 { height: 180px !important; }
.h185 { height: 185px !important; }
.h190 { height: 190px !important; }
.h195 { height: 195px !important; }
.h200 { height: 200px !important; }
.h205 { height: 205px !important; }
.h210 { height: 210px !important; }
.h215 { height: 215px !important; }
.h220 { height: 220px !important; }
.h225 { height: 225px !important; }
.h230 { height: 230px !important; }
.h235 { height: 235px !important; }
.h240 { height: 240px !important; }
.h245 { height: 245px !important; }
.h250 { height: 250px !important; }
.h255 { height: 255px !important; }
.h260 { height: 260px !important; }
.h265 { height: 265px !important; }
.h270 { height: 270px !important; }
.h275 { height: 275px !important; }
.h280 { height: 280px !important; }
.h285 { height: 285px !important; }
.h290 { height: 290px !important; }
.h295 { height: 295px !important; }
.h300 { height: 300px !important; }
.h305 { height: 305px !important; }
.h310 { height: 310px !important; }
.h315 { height: 315px !important; }
.h320 { height: 320px !important; }
.h325 { height: 325px !important; }
.h330 { height: 330px !important; }
.h335 { height: 335px !important; }
.h340 { height: 340px !important; }
.h345 { height: 345px !important; }
.h350 { height: 350px !important; }
.h355 { height: 355px !important; }
.h360 { height: 360px !important; }
.h365 { height: 365px !important; }
.h370 { height: 370px !important; }
.h375 { height: 375px !important; }
.h380 { height: 380px !important; }
.h385 { height: 385px !important; }
.h390 { height: 390px !important; }
.h395 { height: 395px !important; }
.h400 { height: 400px !important; }

.h5p { height: 5% !important; }
.h10p { height: 10% !important; }
.h15p { height: 15% !important; }
.h20p { height: 20% !important; }
.h25p { height: 25% !important; }
.h30p { height: 30% !important; }
.h35p { height: 35% !important; }
.h40p { height: 40% !important; }
.h45p { height: 45% !important; }
.h50p { height: 50% !important; }
.h55p { height: 55% !important; }
.h60p { height: 60% !important; }
.h65p { height: 65% !important; }
.h70p { height: 70% !important; }
.h75p { height: 75% !important; }
.h80p { height: 80% !important; }
.h85p { height: 85% !important; }
.h90p { height: 90% !important; }
.h95p { height: 95% !important; }
.h100p { height: 100% !important; }


/* ==============================
  Utility: Image Shapes
============================== */

.img-rounded-md {
	border-radius: clamp(20px, 4.5vw, 40px) !important;
	overflow: hidden;
}
/* 既存の固定角丸（必要であれば） */
.img-rounded-sm {
	border-radius: 10px !important;
}
/* 正円 */
.img-circle {
	border-radius: 50% !important;
}

/* ==============================
  Utility: Image filter
============================== */
/* <img>タグを囲む枠に、透過20%の緑フィルターをかける */
.filter-softlight {
    position: relative;
    display: inline-block; /* 画像のサイズに合わせる */
    line-height: 0;        /* 画像下の隙間を消す */
}

.filter-softlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 168, 56, 0.3);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* ==============================
  Utility: Icon
============================== */
.icon {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    text-decoration: none;
    vertical-align: middle;
}
.icon--block {
    display: flex;
    width: 100%;
}

.icon::before,
.icon::after {
    content: "";
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    background-image: var(--icon-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.icon--left::after { display: none; }
.icon--right::before { display: none; }

.icon-external { --icon-url: url("/common/img/icon_external.svg"); }
.icon-pdf { --icon-url: url("/common/img/icon_pdf.svg"); }
.icon-half-arrow { --icon-url: url("/common/img/icon_half-arrow.svg"); }

@media (min-width: 768px) {
    .icon { gap: .7em; }
}