@charset "utf-8";

/* ----------------------------------------------------------
	Custom Properties
---------------------------------------------------------- */

:root {

	/* Break Point */
	--breakPoint-PC: 1600;
	--breakPoint-SmallPC: 1200;
	--breakPoint-Tablet: 960;
	--breakPoint-SmallTablet: 769;
	--breakPoint-SmartPhone: 600;

	/* font family */
	--fontFamily-primary: 'Roboto', 'Noto Sans JP', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
	--fontFamily-serif: 'Noto Serif JP', serif;

	/* color */
	--color-text: #111111;

	--color-primary: #0033cc; /* RGB(0, 51, 204) */
	--color-primary-opacity-90: rgba(0, 51, 204, 0.9);
	--color-primary-opacity-80: rgba(0, 51, 204, 0.8);
	--color-primary-opacity-70: rgba(0, 51, 204, 0.7);
	--color-primary-opacity-60: rgba(0, 51, 204, 0.6);
	--color-primary-opacity-50: rgba(0, 51, 204, 0.5);
	--color-primary-opacity-40: rgba(0, 51, 204, 0.4);
	--color-primary-opacity-30: rgba(0, 51, 204, 0.3);
	--color-primary-opacity-20: rgba(0, 51, 204, 0.2);
	--color-primary-opacity-10: rgba(0, 51, 204, 0.1);
	--color-primary-opacity-05: rgba(0, 51, 204, 0.05);
	--color-primary-opacity-0: rgba(0, 51, 204, 0);

	--color-secondary: #ff9900; /* RGB(255, 153, 0) */
	--color-secondary-opacity-90: rgba(255, 153, 0, 0.9);
	--color-secondary-opacity-80: rgba(255, 153, 0, 0.8);
	--color-secondary-opacity-70: rgba(255, 153, 0, 0.7);
	--color-secondary-opacity-60: rgba(255, 153, 0, 0.6);
	--color-secondary-opacity-50: rgba(255, 153, 0, 0.5);
	--color-secondary-opacity-40: rgba(255, 153, 0, 0.4);
	--color-secondary-opacity-30: rgba(255, 153, 0, 0.3);
	--color-secondary-opacity-20: rgba(255, 153, 0, 0.2);
	--color-secondary-opacity-10: rgba(255, 153, 0, 0.1);
	--color-secondary-opacity-0: rgba(255, 153, 0, 0);
	
	--color-blue-light: #1a86ff;
	--color-blue-exLight: #31c6ff;

	--color-yellow-light: #ffcc00;

	--color-black: #111111;
	--color-gray-dark: #454545;
	--color-gray: #888888;
	--color-gray-light: #cccccc;
	--color-gray-exLight: #eeeeee;
	--color-white: #ffffff;

	--color-red: #cc0033;

	/* border color */
	--border-color-primary: #454545;

	/* gradation color */
	--gradation-primary: linear-gradient(to right, #0033cc 15%, #1a86ff 85%);
	--gradation-primary-r: linear-gradient(to right, #1a86ff 15%, #0033cc 85%);

	--gradation-secondary: linear-gradient(to right, #ff9900 15%, #ffcc00 85%);
	--gradation-secondary-r: linear-gradient(to right, #ffcc00 15%, #ff9900 85%);

	/* size */
	--fontSize-10: clamp(8.75px, calc(10 / var(--breakPoint-SmallTablet) * 100vw), 10px);
	--fontSize-11: clamp(9.625px, calc(11 / var(--breakPoint-SmallTablet) * 100vw), 11px);
	--fontSize-12: clamp(10.5px, calc(12 / var(--breakPoint-SmallTablet) * 100vw), 12px);
	--fontSize-13: clamp(11.375px, calc(13 / var(--breakPoint-SmallTablet) * 100vw), 13px);
	--fontSize-14: clamp(12.25px, calc(14 / var(--breakPoint-SmallTablet) * 100vw), 14px);
	--fontSize-15: clamp(13.125px, calc(15 / var(--breakPoint-SmallTablet) * 100vw), 15px);
	--fontSize-16: clamp(14px, calc(16 / var(--breakPoint-SmallTablet) * 100vw), 16px);
	--fontSize-17: clamp(14.875px, calc(17 / var(--breakPoint-SmallTablet) * 100vw), 17px);
	--fontSize-18: clamp(15.75px, calc(18 / var(--breakPoint-SmallTablet) * 100vw), 18px);
	--fontSize-19: clamp(16.625px, calc(19 / var(--breakPoint-SmallTablet) * 100vw), 19px);
	--fontSize-20: clamp(17.5px, calc(20 / var(--breakPoint-SmallTablet) * 100vw), 20px);

	/* space */
	--space-primary: clamp(60px, calc(80 / var(--breakPoint-SmallPC) * 100vw), 80px);
	--space-secondary: clamp(45px, calc(60 / var(--breakPoint-SmallPC) * 100vw), 60px);
	--space-tertiary: clamp(30px, calc(40 / var(--breakPoint-SmallPC) * 100vw), 40px);
	--space-quaternary: clamp(15px, calc(20 / var(--breakPoint-SmallPC) * 100vw), 20px);

	--gap-primary: clamp(24px, calc(80 / var(--breakPoint-PC) * 100vw), 80px);
	--gap-secondary: clamp(24px, calc(40 / var(--breakPoint-PC) * 100vw), 40px);
	--gap-tertiary: clamp(12px, calc(24 / var(--breakPoint-PC) * 100vw), 24px);
	--gap-quaternary: clamp(8px, calc(16 / var(--breakPoint-PC) * 100vw), 16px);

	--background-skew: calc(100 / var(--breakPoint-PC) * 100vw);

	/* ohters */
	--l-headerHeight: auto; /* jsで取得 */
}

/* --------------------------------------
	Layout Parts
--------------------------------------- */

.l-full-width {
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  left: 50%;
  right: 50%;
  position: relative;
}

.l-innerWrap {
	width: 100%;
	max-width: calc(var(--breakPoint-PC) * 1px);
	margin: 0 auto;
	padding: 0 clamp(24px, calc(80 / var(--breakPoint-PC) * 100vw), 80px);
	position: relative;
}

.l-innerWrap.wide {
	max-width: none;
}

.l-innerWrap.narrow {
	max-width: 1200px;
}

/* -- */

.l-space-primary {
	margin-bottom: var(--space-primary);
}

.l-space-secondary {
	margin-bottom: var(--space-secondary);
}

.l-space-tertiary {
	margin-bottom: var(--space-tertiary);
}

.l-space-quaternary {
	margin-bottom: var(--space-quaternary);
}

.l-separator {
	padding-top: var(--space-primary);
	border-top: 1px solid var(--color-gray-light);
}

/* -- */

.l-section-width-narrow {
	max-width: 1200px;
	margin-inline: auto;
}

/* -- */

.l-section-padding-primary {
	padding-top: var(--space-primary);
	padding-bottom: var(--space-primary);
}

.l-section-padding-secondary {
	padding-top: var(--space-secondary);
	padding-bottom: var(--space-secondary);
}

.l-section-padding-tertiary {
	padding-top: var(--space-tertiary);
	padding-bottom: var(--space-tertiary);
}

/* -- */

.l-section-background-01 {
	background: var(--color-primary-opacity-05);
}

/* -- */

.l-section-arrow-background {
	margin-bottom: var(--space-primary);
	margin-top: 0;
	transform: rotate(180deg);
	position: relative;
	z-index: 1;
}

.l-section-arrow-background svg {
	bottom: 0;
	height: var(--space-primary);
	left: 50%;
	position: absolute;
	transform: translateX(-50%) rotate(180deg);
	width: 100%;
}

/* -- */

.l-section-surround-border {
	padding: var(--gap-secondary);
	border: 1px solid var(--color-gray-light);
	border-radius: 8px;
}

.l-shadow-box {
	flex: 1;
	padding: var(--gap-secondary);
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* -- */

.l-button {
	margin-top: 2.0em;
}

.l-button-row {
  display: flex;
  gap: 12px;
  align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
}

/* -- */

.l-row-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
	gap: var(--gap-tertiary)
}

.l-row-left > * {
  flex: 0 0 auto;
  max-width: 100%;
}

.l-row-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
	gap: var(--gap-tertiary)
}

.l-row-center > * {
  flex: 0 0 auto;
  max-width: 100%;
}

.l-row-pcLeft-tbCenter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
	gap: var(--gap-tertiary)
}

@media screen and (min-width: 960px) {
	.l-row-pcLeft-tbCenter {
		justify-content: flex-start;
	}
}

.l-row-pcLeft-spCenter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
	gap: var(--gap-tertiary)
}

@media screen and (min-width: 600px) {
	.l-row-pcLeft-spCenter {
		justify-content: flex-start;
	}
}

/* -- */

.l-column2 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--column-gap) var(--row-gap);

	--column-gap: var(--space-secondary);
	--row-gap: var(--gap-primary);
}

.l-column2 .l-columnGroup {
	display: flex;
	flex-direction: column;
	width: 100%;
}

@media screen and (min-width: 960px) {
	.l-column2 .l-columnGroup {
		width: calc(50% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--row-gap) * 1) / 2);
	}

	.l-column2 .l-columnGroup.l-width10per { width: calc(10% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width20per { width: calc(20% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width30per { width: calc(30% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width40per { width: calc(40% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width50per { width: calc(50% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width60per { width: calc(60% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width70per { width: calc(70% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width80per { width: calc(80% - var(--adjustWidth)); }
	.l-column2 .l-columnGroup.l-width90per { width: calc(90% - var(--adjustWidth)); }
}

.l-column2.l-column-gap-QS {
	gap: var(--space-quaternary) var(--gap-secondary);
}

@media screen and (min-width: 960px) {
	.l-column2.l-column-gap-QS .l-columnGroup {
		--adjustWidth: calc(calc(var(--gap-secondary) * 1) / 2);
	}
}

/* -- */

.l-column3 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--column-gap) var(--row-gap);

	--column-gap: var(--space-secondary);
	--row-gap: var(--gap-primary);
}

.l-column3 .l-columnGroup {
	display: flex;
	flex-direction: column;
	width: 100%;
}

@media screen and (min-width: 600px) {
	.l-column3 .l-columnGroup {
		width: calc(50% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--row-gap) * 1) / 2);
	}
}

@media screen and (min-width: 960px) {
	.l-column3 .l-columnGroup {
		width: calc(33.33333% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--row-gap) * 2) / 3);
	}

	.l-column3 .l-columnGroup.l-width10per { width: calc(10% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width20per { width: calc(20% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width30per { width: calc(30% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width40per { width: calc(40% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width50per { width: calc(50% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width60per { width: calc(60% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width70per { width: calc(70% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width80per { width: calc(80% - var(--adjustWidth)); }
	.l-column3 .l-columnGroup.l-width90per { width: calc(90% - var(--adjustWidth)); }
}

.l-column3.l-column-gap-QS {
	gap: var(--space-quaternary) var(--gap-secondary);
}

@media screen and (min-width: 600px) {
	.l-column3.l-column-gap-QS .l-columnGroup {
		--adjustWidth: calc(calc(var(--gap-secondary) * 1) / 2);
	}
}

@media screen and (min-width: 960px) {
	.l-column3.l-column-gap-QS .l-columnGroup {
		width: calc(33.33333% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--gap-secondary) * 2) / 3);
	}
}

/* -- */

.l-column4 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--column-gap) var(--row-gap);

	--column-gap: var(--space-secondary);
	--row-gap: var(--gap-primary);
}

.l-column4 .l-columnGroup {
	display: flex;
	flex-direction: column;
	width: 100%;
}

@media screen and (min-width: 600px) {
	.l-column4 .l-columnGroup {
		width: calc(50% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--row-gap) * 2) / 3);
	}
}

@media screen and (min-width: 960px) {
	.l-column4 .l-columnGroup {
		width: calc(25% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--row-gap) * 3) / 4);
	}

	.l-column4 .l-columnGroup.l-width10per { width: calc(10% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width20per { width: calc(20% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width30per { width: calc(30% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width40per { width: calc(40% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width50per { width: calc(50% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width60per { width: calc(60% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width70per { width: calc(70% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width80per { width: calc(80% - var(--adjustWidth)); }
	.l-column4 .l-columnGroup.l-width90per { width: calc(90% - var(--adjustWidth)); }
}

.l-column4.l-column-gap-QS {
	gap: var(--space-quaternary) var(--gap-secondary);
}

@media screen and (min-width: 600px) {
	.l-column4.l-column-gap-QS .l-columnGroup {
		--adjustWidth: calc(calc(var(--gap-secondary) * 1) / 2);
	}
}

@media screen and (min-width: 960px) {
	.l-column4.l-column-gap-QS .l-columnGroup {
		width: calc(25% - var(--adjustWidth));
		--adjustWidth: calc(calc(var(--gap-secondary) * 3) / 4);
	}
}

/* -- */

.l-columnGroup *:last-child {
	margin-bottom: 0;
}

/* -- */

@media screen and (min-width: 960px) {
	.l-columnReverse {
		flex-direction: row-reverse;
	}
}

.l-alignSelf-start { display: flex; align-self: flex-start; }
.l-alignSelf-center { display: flex; align-self: center; }
.l-alignSelf-end { display: flex; align-self: flex-end; }

/* -- */

.l-img-maxWidth {
	width: 100%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 960px) {
	.l-img-maxWidth.forSp {
		max-width: none;
	}
}

/* -- */

.l-img-width {
	--l-img-width-sp: 100%;
	--l-img-maxWidth-sp: none;

	width: var(--l-img-width-sp);
	max-width: var(--l-img-maxWidth-sp);
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 960px) {
	.l-img-width {
		--l-img-width-pc: 100%;
		--l-img-maxWidth-pc: none;

		width: var(--l-img-width-pc);
		max-width: var(--l-img-maxWidth-pc);
	}
}

/* -- */

.l-img-container {
	display: flex;
	width: 100%;
	height: auto;
	background: var(--color-white);
	aspect-ratio: 16 / 9;
	align-items: center;
	justify-content: center;
}


/* --------------------------------------
	archive 用レイアウト
--------------------------------------- */

/* 横：4カラム */

.l-archive-h {
	display: flex;
	flex-wrap: wrap;
  gap: var(--ar-list-gap);
  --ar-list-gap: var(--gap-tertiary);
}

.l-archive-h a:hover {
	opacity: 0.7;
}

.l-archive-h .archive-group {
  width: calc(calc(100% / 2) - calc(calc( var(--ar-list-gap) * 1) / 2));
  border-radius: 0 0 8px 8px;
	border: 1px solid var(--color-gray-light);
	background: #ffffff;
}

@media screen and (min-width: 600px) {
	.l-archive-h .archive-group {
    width: calc(calc(100% / 3) - calc(calc( var(--ar-list-gap) * 2) / 3));
  }
}

@media screen and (min-width: 1200px) {
	.l-archive-h .archive-group {
    width: calc(calc(100% / 4) - calc(calc( var(--ar-list-gap) * 3) / 4));
  }
}

.l-archive-h .archive-group-inner {
  display: flex;
	color: var(--color-text);
  height: 100%;
	padding: 0;
  flex-direction: column;
}

.l-archive-h .archive-image {
	display: flex;
	aspect-ratio: 1200 / 675;
	border-bottom: 1px solid var(--color-gray-light);
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.l-archive-h .archive-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s;
}

.l-archive-h .archive-group-inner:hover .archive-image img {
  transform: scale(1.05);
}

.l-archive-h .archive-content {
	flex: 1;
	display: flex;
	padding: var(--gap-quaternary);
	flex-direction: column;
	flex-grow: 1;
}

.l-archive-h .archive-heading {
	font-size: var(--fontSize-15);
	line-height: 1.4;
}

.l-archive-h .archive-tag-list {
	display: flex;
	margin: 0;
	margin-top: auto;
	padding: 0;
	gap: 0.2em 0.4em;
	flex-wrap: wrap;
}

.l-archive-h .archive-tag-list li {
	color: var(--color-gray);
	font-size: var(--fontSize-12);
	margin: 0;
	padding: 0.2em 0.8em;
	list-style: none;
	background: var(--color-primary-opacity-10);
}

.l-archive-h .archive-date {
	color: var(--color-gray);
	font-size: var(--fontSize-12);
	margin-top: 0.5em;
	margin-bottom: 0.8em;
}

/* 横：3カラム */

.l-archive-h.ah-column3 .archive-group {
  width: calc(calc(100% / 2) - calc(calc( var(--ar-list-gap) * 1) / 2));
  border-radius: 0 0 8px 8px;
	border: 1px solid var(--color-gray-light);
	background: #ffffff;
}

@media screen and (min-width: 769px) {
	.l-archive-h.ah-column3  .archive-group {
    width: calc(calc(100% / 3) - calc(calc( var(--ar-list-gap) * 2) / 3));
  }
}

/* --------------------------------------
	Module Parts
--------------------------------------- */

.m-color-primary { color: var(--color-primary); }
.m-color-secondary { color: var(--color-secondary); }

.m-color-blue-light { color: var(--color-blue-light); }
.m-color-blue-exLight { color: var(--color-blue-exLight); }
.m-color-yellow-light { color: var(--color-yellow-light); }

.m-color-black { color: var(--color-black); }
.m-color-gray-dark { color: var(--color-gray-dark); }
.m-color-gray { color: var(--color-gray); }
.m-color-gray-light { color: var(--color-gray-light); }
.m-color-gray-exLight { color: var(--color-gray-exLight); }
.m-color-white { color: var(--color-white); }

.m-color-red { color: var(--color-red); }

/* -- */

.m-bg-color-primary { background-color: var(--color-primary); }
.m-bg-color-secondary { background-color: var(--color-secondary); }

.m-bg-color-blue-light { background-color: var(--color-blue-light); }
.m-bg-color-blue-exLight { background-color: var(--color-blue-exLight); }
.m-bg-color-yellow-light { background-color: var(--color-yellow-light); }

.m-bg-color-black { background-color: var(--color-black); }
.m-bg-color-gray-dark { background-color: var(--color-gray-dark); }
.m-bg-color-gray { background-color: var(--color-gray); }
.m-bg-color-gray-light { background-color: var(--color-gray-light); }
.m-bg-color-gray-exLight { background-color: var(--color-gray-exLight); }
.m-bg-color-white { background-color: var(--color-white); }

.m-bg-color-red { background-color: var(--color-red); }

/* -- */

.m-fontSize-10 { font-size: var(--fontSize-10) !important; }
.m-fontSize-11 { font-size: var(--fontSize-11) !important; }
.m-fontSize-12 { font-size: var(--fontSize-12) !important; }
.m-fontSize-13 { font-size: var(--fontSize-13) !important; }
.m-fontSize-14 { font-size: var(--fontSize-14) !important; }
.m-fontSize-15 { font-size: var(--fontSize-15) !important; }
.m-fontSize-16 { font-size: var(--fontSize-16) !important; }
.m-fontSize-17 { font-size: var(--fontSize-17) !important; }
.m-fontSize-18 { font-size: var(--fontSize-18) !important; }
.m-fontSize-19 { font-size: var(--fontSize-19) !important; }
.m-fontSize-20 { font-size: var(--fontSize-20) !important; }

/* -- */

.m-p {
	margin-bottom: 1.0em;
}

.m-margin-bottom-0 { margin-bottom: 0 !important; }
.m-margin-bottom-05em { margin-bottom: 0.5em !important; }
.m-margin-bottom-1em { margin-bottom: 1.0em !important; }
.m-margin-bottom-1\.5em { margin-bottom: 1.5em !important; }
.m-margin-bottom-2em { margin-bottom: 2.0em !important; }

/* -- */

.m-br-pcBlock-spNone {
	display: none;
}

@media screen and (min-width: 600px) {
	.m-br-pcBlock-spNone {
		display: block;
	}
}

.m-br-pcNone-spBlock {
	display: block;
}

@media screen and (min-width: 600px) {
	.m-br-pcNone-spBlock {
		display: none;
	}
}

/* -- */

.m-br-pcBlock-tbNone {
	display: none;
}

@media screen and (min-width: 960px) {
	.m-br-pcBlock-tbNone {
		display: block;
	}
}

.m-br-pcNone-tbBlock {
	display: block;
}

@media screen and (min-width: 960px) {
	.m-br-pcNone-tbBlock {
		display: none;
	}
}

/* -- */

.m-sup {
	font-size: 11px;
	vertical-align: top;
}

/* -- */

.m-ruby {
	white-space: nowrap;
}

.m-rt {
  font-size: var(--fontSize-11);
	font-weight: normal;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 0.3em;
	white-space: nowrap;
  ruby-align: center;
}

/* -- */

a.m-text-link,
a.m-text-link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* -- */

.m-whiteSpace-nowrap {
	white-space: nowrap;
}

/* -- */

.m-textAlign-center {
	text-align: center;
}

.m-textAlign-pcLeft-spCenter {
	text-align: center;
}

@media screen and (min-width: 600px) {
	.m-textAlign-pcLeft-spCenter {
		text-align: left;
	}
}

.m-textAlign-pcCenter-spLeft {
	text-align: left;
}

@media screen and (min-width: 600px) {
	.m-textAlign-pcCenter-spLeft {
		text-align: center;
	}
}

.m-textAlign-pcLeft-tbCenter {
	text-align: center;
}

@media screen and (min-width: 960px) {
	.m-textAlign-pcLeft-tbCenter {
		text-align: left;
	}
}

.m-textAlign-pcCenter-tbLeft {
	text-align: left;
}

@media screen and (min-width: 960px) {
	.m-textAlign-pcCenter-tbLeft {
		text-align: center;
	}
}

/* -- */

.m-list {
	margin-bottom: 1.0em;
  padding-left: 1.5em;
}

ul.m-list > li {
	list-style-type: disc;
}

ol.m-list > li {
	list-style-type: decimal;
}

/* -- */

.m-list-noStyle {
	padding-left: 0;
}

.m-list-noStyle > li {
	list-style: none;
}

/* -- */

.m-list-note {
	margin-bottom: 1.0em;
	padding-left: 1.4em;
}

.m-list-note > li {
	list-style: none;
	position: relative;
}

.m-list-note > li::before {
	top: 0;
	left: -1.4em;
	position: absolute;
	content: "※";
}

/* -- */

.m-list-own {
	margin-bottom: 1.0em;
	padding-left: 1.4em;
}

.m-list-own > li {
	list-style: none;
	position: relative;
}

.m-list-own > li > .m-list-item {
	top: 0;
	left: -1.4em;
	position: absolute;
}

/* -- */

.m-list-numberInParentheses {
	margin-bottom: 1.0em;
	padding-left: 2.4em;
}

.m-list-numberInParentheses > li {
	list-style: none;
	position: relative;
}

.m-list-numberInParentheses > li > .m-list-item {
	top: 0;
	left: -2.4em;
	position: absolute;
}

/* -- */

.m-list-numberInCircle {
	margin-bottom: 1.0em;
	padding-left: 2.0em;
}

.m-list-numberInCircle > li {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
	list-style: none;
	margin-bottom: 0.5em;
	position: relative;
}

.m-list-numberInCircle > li::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.0em;
	height: 2.0em;
	border-radius: 100%;
	margin-left: -2.8em;
	background: var(--color-black);
	top: 0.2em;
	position: absolute;

	/*icon-style*/
	color: #ffffff;
	font-size: 0.7em;
	font-weight: 900;
	font-family: "Font Awesome 6 Free" !important;
}

.m-list-numberInCircle > li:nth-child(1)::before { /*icon-style*/ content: "\31"; }
.m-list-numberInCircle > li:nth-child(2)::before { /*icon-style*/ content: "\32"; }
.m-list-numberInCircle > li:nth-child(3)::before { /*icon-style*/ content: "\33"; }
.m-list-numberInCircle > li:nth-child(4)::before { /*icon-style*/ content: "\34"; }
.m-list-numberInCircle > li:nth-child(5)::before { /*icon-style*/ content: "\35"; }
.m-list-numberInCircle > li:nth-child(6)::before { /*icon-style*/ content: "\36"; }
.m-list-numberInCircle > li:nth-child(7)::before { /*icon-style*/ content: "\37"; }
.m-list-numberInCircle > li:nth-child(8)::before { /*icon-style*/ content: "\38"; }
.m-list-numberInCircle > li:nth-child(9)::before { /*icon-style*/ content: "\39"; }
.m-list-numberInCircle > li:nth-child(10)::before { font-size: 12.5px; content: "10"; }

/* -- */

.m-dl {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 0 2.0em;
	flex-wrap: wrap;
}

.m-dl > dt {
	width: calc(20% - 1.0em);
	margin: 0;
	padding: 0;
}

.m-dl > dd {
	width: calc(80% - 1.0em);
	margin: 0;
	padding: 0;
}

/* -- */

.m-table-scroll {
	overflow-x: auto;
}

.m-table {
	width: 100%;
	margin-bottom: 1.0em;
}

.m-table th {
	font-weight: normal;
	text-align: left;
	margin: 0;
	padding: 0.5em 1.0em;
	border: 1px solid var(--color-gray-light);
	word-break: normal;
}

.m-table thead th {
	color: #ffffff;
	background: var(--color-gray-dark);
}

.m-table td {
	font-weight: normal;
	text-align: left;
	margin: 0;
	padding: 0.5em 1.0em;
	border: 1px solid var(--color-gray-light);
	word-break: normal;
}

.m-table th *:last-child {
	margin-bottom: 0;
}

.m-table td *:last-child {
	margin-bottom: 0;
}

.m-table.is-padding-large th,
.m-table.is-padding-large td {
	padding: 1.0em;
}

/* -- */

.m-video-size {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
}

/* -- */

.yt-poster-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
}

.yt-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.yt-poster-wrapper:hover .yt-poster {
  transform: scale(1.05);
}

.yt-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.2s ease;
  pointer-events: none;
}

.yt-play-button svg {
  margin-left: 4px;
}

.yt-poster-wrapper:hover .yt-play-button {
  background: #cc0000;
  transform: translate(-50%, -50%) scale(1.1);
}

.yt-poster-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}