@charset "UTF-8";

/* ===================================================================
  Webフォント読込対応
=================================================================== */
html {
	visibility: hidden;
}
html.wf-active,
html.loading-delay {
	visibility: visible;
}
/* ===================================================================
  font
=================================================================== */
@font-face {
	font-family: "Noto Sans JP";
	font-weight: 300;
	font-style: normal;

	src: url(/cloud/common/font/NotoSansCJKjp-DemiLight.min.woff2) format("woff2");
	src: url(/cloud/common/font/NotoSansCJKjp-DemiLight.min.woff) format("woff");
}
@font-face {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-style: normal;

	src: url(/cloud/common/font/NotoSansCJKjp-Medium.min.woff2) format("woff2");
	src: url(/cloud/common/font/NotoSansCJKjp-Medium.min.woff) format("woff");
}
@font-face {
	font-family: "Noto Sans JP";
	font-weight: 700;
	font-style: normal;

	src: url(/cloud/common/font/NotoSansCJKjp-Bold.min.woff2) format("woff2");
	src: url(/cloud/common/font/NotoSansCJKjp-Bold.min.woff) format("woff");
}

/* ===================================================================
  基本設定
=================================================================== */
body {
	min-width: 320px;
}
main {
	margin-top: 50px;
}
@media only screen and (min-width: 1024px) {
	main {
		margin-top: 90px;
	}
}

/* ===================================================================
  pure-g
=================================================================== */
.pure-g {
	padding: 0;
}
.pure-g *[class^="pure-u"] {
	margin: 0;
}

/* layout */
.pure-g--justify-center {
	justify-content: center;
}
.pure-g--align-center {
	align-items: center;
}
@media screen and (min-width: 48em) {
	.pure-g--reverse-pc {
		flex-flow: row-reverse;
	}
}

/* Box
------------------------------------------------------------------- */
.pure-g--box {
	margin: -.625rem;
}
.pure-g--box > *[class^="pure-u"] {
	padding: .625rem;
}

/* xs */
.pure-g--box--padding-xs {
	margin: -.125rem;
}
.pure-g--box--padding-xs > *[class^="pure-u"] {
	padding: .125rem;
}

/* sm */
.pure-g--box--padding-sm {
	margin: -.25rem;
}
.pure-g--box--padding-sm > *[class^="pure-u"] {
	padding: .25rem;
}

*[class^="pure-u"] > *:not([class^="pure-g"]):first-child {
	margin-top: 0;
}
*[class^="pure-u"] > *:not([class^="pure-g"]):last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 48em) {
	.pure-g--box {
		margin: -1rem;
	}
	.pure-g--box > *[class^="pure-u"] {
		padding: 1rem;
	}

	/* xs */
	.pure-g--box--padding-xs {
		margin: -.125rem;
	}
	.pure-g--box--padding-xs > *[class^="pure-u"] {
		padding: .125rem;
	}

	/* sm */
	.pure-g--box--padding-sm {
		margin: -.25rem;
	}
	.pure-g--box--padding-sm > *[class^="pure-u"] {
		padding: .25rem;
	}

	/* lg */
	.pure-g--box--padding-lg {
		margin: -2rem;
	}
	.pure-g--box--padding-lg > *[class^="pure-u"] {
		padding: 2rem;
	}
}

/* ===================================================================
  contents
=================================================================== */
.l-contents {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 3.75rem 0;
	border: none;
	background: #F7F4EC;
}
.l-contents::before {
	font-family: "Montserrat", sans-serif;
	font-size: 22vw;
	line-height: 1;
	position: absolute;
	z-index: -1;
	top: -.18em;
	left: -.1em;
	content: attr(data-title);
	white-space: nowrap;
	color: #F0ECE0;
}
.l-contents--howtouse {
	position: relative;
	background-repeat: no-repeat;
}
.contents {
	box-sizing: content-box;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.contents + .contents {
	padding-top: 2rem;
}
.contents > *:not(.pure-g--box):first-child {
	margin-top: 0;
}
.contents > *:not(.pure-g--box):last-child {
	margin-bottom: 0;
}
.contents--xl {
	/* 1280px */
	max-width: 80rem;
}
.contents--lg {
	/* 1024px */
	max-width: 64rem;
}
.contents--md {
	/* 768px */
	max-width: 48rem;
}
.contents--sm {
	/* 568px */
	max-width: 35.5rem;
}

@media screen and (min-width: 48em) {
	.l-contents {
		padding: 5rem 0;
	}
	.contents {
		padding: 0 3.75rem;
	}
	.breadcrumb + .l-contents {
		margin-top: -3em;
		padding-top: 9em;
		padding-bottom: 6em;
	}
	.contents + .contents {
		padding-top: 6em;
	}
}

/* ===================================================================
  contents block
=================================================================== */
* + .contents__block {
	margin: 2rem 0 0 0;
}
* + .contents__block--margin-xs,
* + .contents__block--margin-sm {
	margin: 1rem 0 0 0;
}
.contents__block > *:not(.pure-g--box):first-child {
	margin-top: 0;
}
.contents__block > *:not(.pure-g--box):last-child {
	margin-bottom: 0;
}
@media screen and (min-width: 48em) {
	* + .contents__block {
		margin: 5rem 0 0 0;
	}
	* + .contents__block--margin-xs {
		margin: 1.5rem 0 0 0;
	}
	* + .contents__block--margin-sm {
		margin: 3rem 0 0 0;
	}
}

/* heightfix
------------------------------------------------------------------- */
.contents__block--heightfix {
	height: 100%;
}

/* howtouse
------------------------------------------------------------------- */
.contents__block--howtouse {
	position: relative;
	overflow: hidden;
}
.contents__block--howtouse::before {
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	width: 0;
	height: 0;
	margin: auto;
	content: "";
	border-width: 4rem 4rem 0 0;
	border-style: solid;
	border-color: #E4F1F8 transparent transparent transparent;
}
#teacher .contents__block--howtouse::before {
	border-color: #E4F1F8 transparent transparent transparent;
}
#student .contents__block--howtouse::before {
	border-color: #E4F0D8 transparent transparent transparent;
}
.contents__block--howtouse--accent::before {
	border-color: #DBE9EE transparent transparent transparent;
}
* + .contents__block--howtouse {
	margin: 1rem 0 0 0;
}
@media screen and (min-width: 48em) {
	.contents__block--howtouse::before {
		border-width: 6.25rem 6.25rem 0 0;
	}
	* + .contents__block--howtouse {
		margin: 2rem 0 0 0;
	}
}

/* box
------------------------------------------------------------------- */
.contents__block--box {
	padding: 2.5rem 1.25rem;
	border: none;
	border-radius: 10px;
	background: #FFFFFF;
}
.l-contents--accent .contents__block--box {
	border: none;
}
@media screen and (min-width: 48em) {
	.contents__block--box {
		padding: 2.25rem;
		border-radius: 1rem;
	}
	.contents__block--box--padding-sm {
		padding: 1.25rem;
	}
	.contents__block--box--padding-lg {
		padding: 3.75rem;
	}
}

/* contents__block--box__title
------------------------------------------------------------------- */
.contents__block--box__title {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: 1.25em;
	font-weight: 600;
	margin: -2.5rem -1.25rem 2.5rem -1.25rem !important;
	padding: .5em .5em .375em .5em;
	text-align: center;
	letter-spacing: -.02em;
	border-radius: .75rem .75rem 0 0;
	background-color: #F5F5F5;
}
.contents__block--box__title + *:not([class^="pure-g"]) {
	margin-top: 0;
}
@media screen and (min-width: 768px) {
	.contents__block--box__title {
		margin: -2.25rem -2.25rem 2.25rem -2.25rem !important;
		border-radius: 1rem 1rem 0 0;
	}
}

/* bord
------------------------------------------------------------------- */
.contents__block--bord {
	margin-top: 3em;
	padding-top: 1.25em;
	padding-bottom: 1.25em;
	background-image: url("/cloud/how-to-use/common/img/bg_bord.png"),
	url("/cloud/how-to-use/common/img/bg_bord.png"),
	url("/cloud/how-to-use/common/img/bg_bord.png"),
	url("/cloud/how-to-use/common/img/bg_bord.png");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top left, top right, bottom left, bottom right;
}

/* border
------------------------------------------------------------------- */
.contents__block--border {
	position: relative;
	border: none;
	border-radius: 10px;
	background-color: transparent;
}
.contents__block--border::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	margin: auto;
	content: "";
	pointer-events: none;
	border: 1px dashed #4BACD5;
	border-radius: 10px;
}
@media screen and (min-width: 48em) {
	.contents__block--border {
		height: 100%;
	}
	* + .contents__block--border {
		margin: 3rem 0 0 0;
	}
}

/* memo
------------------------------------------------------------------- */
.contents__block--memo {
	position: relative;
	border: none;
	border-radius: 10px;
	background-color: #F5F5F5;
}
.contents__block--memo::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	margin: auto;
	content: "";
	pointer-events: none;
	border: 1px dashed #CCCCCC;
	border-radius: 10px;
}
.contents__block--memo::after {
	position: absolute;
	top: -5px;
	right: 1.25rem;
	bottom: auto;
	left: auto;
	display: block;
	width: 0;
	width: 16px;
	height: 0;
	height: 42px;
	margin: auto;
	content: "";
	background-image: url("/cloud/how-to-use/common/img/img_memo.png");
	background-repeat: no-repeat;
	background-size: contain;
}
.heading--memo {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: 1.125em;
	line-height: 1;
	text-align: center;
	color: #4BACD5;
}
/* ・-- */
.list-memo {
	box-sizing: border-box;
	margin: 1em 0 0 0;
	padding: 0;
	list-style: none;
}
.list-memo li {
	font-size: .938rem;
	line-height: 2;
	position: relative;
	padding-left: 1.25em;
}
.list-memo li:before {
	position: absolute;
	top: .65em;
	right: auto;
	bottom: auto;
	left: 0;
	width: .875em;
	height: .875em;
	margin: auto;
	content: "";
	border-radius: .5em;
	background-color: #4BACD5;
}
@media screen and (min-width: 48em) {
	.contents__block--memo {
		font-size: 1rem;
	}
	.contents__block--memo::after {
		right: 2em;
	}
	.heading--memo {
		font-size: 1.25em;
	}
}

/* ===================================================================
	l-box
  =================================================================== */
.l-box {
	position: relative;
	padding: 1.25rem;
	border: 2px solid #4BACD5;
	border-radius: 10px;
	background-color: #FFFFFF;
}

* + .l-box {
	margin: 1rem 0 0 0;
}

.l-box::before {
	position: absolute;
	top: -42px;
	right: 0;
	bottom: auto;
	left: 0;
	width: 152px;
	height: 42px;
	margin: auto;
	content: "";
	border-radius: 50% / 100% 100% 0 0;
	background-position: bottom center;
	background-size: contain;
}

.box__title {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	position: relative;
	align-items: baseline;
	box-sizing: content-box;
	height: calc(100% - 1.6em);
	margin: -1.25rem -1.25rem 1.25rem -1.25rem;
	padding: .5em .5em .375em .5em;
	text-align: center;
	letter-spacing: -.02em;
	color: #FFFFFF;
	border-radius: 8px 8px 0 0;
	background-color: #4BACD5;
	background-position: top center;
}

@media screen and (min-width: 48em) {
	.l-box {
		padding: 2rem;
	}
	* + .l-box {
		margin-top: 2rem;
	}
	.l-box::before {
		top: -42px;
		width: 152px;
		height: 42px;
	}
	.box__title {
		margin: -2rem -2rem 2rem -2rem;
	}
}

/* point
------------------------------------------------------------------- */
.l-box--point {
	border: 2px solid #FFA815;
	background-color: #FFF6E8;
}
* + .l-box--point {
	margin-top: calc(1.25rem + 42px);
}
.l-box--point::before {
	background-image: url(/cloud/how-to-use/common/img/img_point.png);
}
.box__title--point {
	background-image: url(/cloud/how-to-use/common/img/bg_dot-orange.png);
}
@media screen and (min-width: 48em) {
	* + .l-box--point {
		margin-top: calc(3rem + 42px);
	}
}

/* alert
------------------------------------------------------------------- */
.l-box--alert {
	border: 2px solid #F77047;
	background-color: #FFF6EF;
}
.l-box--alert::before {
	content: none;
}
.box__title--alert {
	background-image: url(/cloud/how-to-use/common/img/bg_dot-red.png);
}

/* ===================================================================
  icon
=================================================================== */
/* ico-arrow
------------------------------------------------------------------- */
.ico-arrow {
	position: relative;
	margin: 0 .5em 0 .7em;
}
.ico-arrow::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: -.5em;
	width: .4em;
	height: .4em;
	margin: auto;
	content: "";
	transform: rotate(45deg);
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #F8692A;
}
.ico-arrow--up::after {
	top: .2em;
	left: -.3em;
	transform: rotate(-45deg);
}
.ico-arrow--down::after {
	transform: rotate(135deg);
}
.ico-arrow--reverse::after {
	right: -.5em;
	left: 0;
	transform: rotate(-135deg);
}
*[class*="-button"].ico-arrow::after {
	right: 1.6em;
	left: auto;
	border-color: rgba(255, 255, 255, .8);
}
*[class*="-button"].ico-arrow--reverse::after {
	right: auto;
	left: 1.6em;
}

/* ico-sitelink
------------------------------------------------------------------- */
.ico-sitelink {
	position: relative;
	margin: 0 .6em;
}
.pure-button.ico-sitelink {
	margin-right: 0;
	margin-left: 0;
}
.ico-sitelink::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: .6em;
	height: .6em;
	margin: auto;
	content: "";
	transform: translateY(-2px);
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #F8692A;
}
.ico-sitelink::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: .6em;
	height: .6em;
	margin: auto;
	content: "";
	transform: translateX(-2px);
	border-width: 1px;
	border-style: solid;
	border-color: #F8692A;
}
.ico-sitelink--light::after,
.ico-sitelink--light::before {
	border-color: #FFFFFF;
}
*[class*="-button"] .ico-sitelink::before {
	border-color: rgba(255, 255, 255, .8);
}
*[class*="-button"].ico-sitelink::before {
	right: 22px;
	left: auto;
	transition: background .2s ease-in;
	border-color: rgba(255, 255, 255, .8);
}
*[class*="-button"] .ico-sitelink::after {
	border-color: rgba(255, 255, 255, .8);
}
*[class*="-button"].ico-sitelink::after {
	right: 22px;
	left: auto;
	border-color: rgba(255, 255, 255, .8);
}

/* ico-no
------------------------------------------------------------------- */
.ico-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 2em;
	background-color: #FF7420;
}
.ico-no::after {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	line-height: 0;
	display: contents;
	height: 2.125em;
	color: #FFFFFF;
}
.ico-no--01::after {
	content: "1";
}
.ico-no--02::after {
	content: "2";
}
.ico-no--03::after {
	content: "3";
}
.ico-no--04::after {
	content: "4";
}
.ico-no--05::after {
	content: "5";
}
.ico-no--06::after {
	content: "6";
}
.ico-no--07::after {
	content: "7";
}
.ico-no--08::after {
	content: "8";
}
.ico-no--09::after {
	content: "9";
}

/* ===================================================================
  hr
=================================================================== */
.hr-dotted {
	height: 1px;
	border-bottom: 0;
	background-image: linear-gradient(
	to right,
	#90999C,
	#FFFFFF 1px,
	transparent 1px,
	transparent 3px
	);
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: 4px 1px;
}
@media screen and (min-width: 48em) {
	.hr-margin-sm {
		margin: 1em 0;
	}
	.hr-margin-lg {
		margin: 5em 0;
	}
}
/* ===================================================================
  image
=================================================================== */
.img-center {
	margin: auto auto;
}
.img-left {
	margin: auto auto auto 0;
}
.img-right {
	margin: auto 0 auto auto;
}
.img-round {
	border-radius: .625rem;
}
.img-inline {
	display: inline;
	width: auto;
	height: 1em;
	margin: 0;
	vertical-align: baseline;
}
.img-shadow {
	filter: drop-shadow(0px 5px 10px rgba(0, 69, 105, .1))
	drop-shadow(0px 20px 20px rgba(0, 69, 105, .08))
	drop-shadow(0px 50px 50px rgba(0, 69, 105, .06));
}
.img-shadow::after {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	transform: translateY(10px);
	background-image: linear-gradient(rgb(88, 195, 214), rgb(12, 75, 156));

	filter: blur(20px);
	mix-blend-mode: multiply;
}

/* ===================================================================
  button
=================================================================== */
.pure-button {
	font-size: .937rem;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	z-index: 1;
	display: inline-flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	height: 4em;
	margin-top: 2em;
	margin-right: auto;
	margin-left: auto;
	padding: 1em 3em 1.1em 3em;
	transition: opacity .3s;
	white-space: inherit;
	color: #FFFFFF;
	border: none;
	border-radius: 3rem;
	background-color: #4BACD5;
}
.pure-button:focus,
.pure-button:hover {
	opacity: .5;
	color: #FFFFFF;
}
.button-accent {
	background-color: #00688D;
}
.button-strong {
	font-weight: 500;
}
.button-sm {
	font-size: .75rem;
	padding: .8em 2.6em .9em 2.6em;
}
.button-lg {
	font-size: 1.125rem;
	padding: 1.2em 4em 1.3em 4em;
}
.button-disable {
	pointer-events: none;
	color: #888888;
	background-color: #CCCCCC;
}

/* button group
------------------------------------------------------------------- */
@media screen and (min-width: 48em) {
	.button-group > .pure-button {
		margin-right: .5em;
		margin-left: .5em;
	}
}

/* button block
------------------------------------------------------------------- */
.button-block {
	display: flex;
	justify-content: center;
	width: calc(100% - 1em);
	max-width: 100%;
}

/* button width
------------------------------------------------------------------- */
.button-width,
.button-sm.button-width,
.button-lg.button-width {
	justify-content: center;
	width: 100%;
	max-width: 100%;
}

@media screen and (min-width: 48em) {
	.button-width {
		display: inline-flex;
		width: 24rem;
		max-width: 100%;
		padding-right: 6em;
		padding-left: 6em;
	}
}

/* button teacher & student
------------------------------------------------------------------- */
.button-teacher,
.button-student {
	width: 100%;
}
.button-teacher {
	background-color: #4BACD5;
}
.button-student {
	background-color: #8FBF29;
}
@media screen and (min-width: 48em) {
	.button-teacher,
	.button-student {
		width: auto;
	}
}
/* button DL
------------------------------------------------------------------- */
.button-dl {
	position: relative;
	padding-right: 4em;
	padding-left: 4em;
}
.button-dl::before {
	position: absolute;
	top: 0;
	right: 1.75em;
	bottom: 0;
	left: auto;
	display: inline-block;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	content: "";
	background-image: url(/cloud/how-to-use/common/img/icon_dl.png);
	background-position: center center;
	background-size: contain;
}

/* ===================================================================
  ルビの調整
=================================================================== */
ruby > rt {
	font-size: .6em;
	font-weight: normal;
	letter-spacing: -.1em;
	opacity: .7;
}
.button-ruby {
	align-items: baseline;
}
/* IE,Edge調整 */
@supports (-ms-ime-align: auto) {
	rt {
		position: relative;
		top: .5em;
	}
}

/* ===================================================================
  heading
=================================================================== */
.heading {
	font-weight: 600;
	line-height: 1.4;
	position: relative;
	margin: 2rem 0 1rem 0;
}

.heading--howtouse {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: 1.75em;
	margin-top: 1rem;
	text-align: center;
	letter-spacing: -.02em;
}

.heading--howtouse-block {
	font-size: 1.25rem;
	position: relative;
	margin-top: 0;
}
.heading--howtouse-block__sub {
	font-size: .938rem;
	font-weight: 300;
	display: block;
}
@media screen and (min-width: 48em) {
	.heading--howtouse {
		font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
		font-size: 2.25em;
		margin-top: 1em;
	}
	.heading--howtouse-block {
		font-size: 1.875em;
		margin-bottom: .6em;
	}
	.heading--howtouse-block__sub {
		font-size: 1.125rem;
	}
}

/* heading triangle
-------------------------------------------------------------------- */
.heading--triangle {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: 1.75em;
	font-weight: 600;
	position: relative;
	margin-top: 3rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	text-align: center;
	color: #FFFFFF;
	border-radius: .5em;
	background-color: #444444;
	background-image: url(/cloud/how-to-use/common/img/bg_dot-teacher.png);
}
.heading--triangle::after {
	position: absolute;
	top: auto;
	right: 0;
	bottom: -.5em;
	left: 0;
	display: block;
	width: 0;
	height: 0;
	margin: auto;
	content: "";
	border-width: .5em .5em 0 .5em;
	border-style: solid;
	border-color: #4BACD5 transparent transparent transparent;
}
#teacher .heading--triangle {
	background-image: url(/cloud/how-to-use/common/img/bg_dot-teacher.png);
}
#teacher .heading--triangle::after {
	border-color: #4BACD5 transparent transparent transparent;
}
#student .heading--triangle {
	background-image: url(/cloud/how-to-use/common/img/bg_dot-student.png);
}
#student .heading--triangle::after {
	border-color: #91C02C transparent transparent transparent;
}
.heading--triangle--accent {
	background-image: url(/cloud/how-to-use/common/img/bg_dot-navy.png);
}
.heading--triangle--accent::after {
	border-color: #00688D transparent transparent transparent;
}

@media screen and (min-width: 48em) {
	.heading--triangle {
		font-size: 2em;
		margin-top: 4rem;
		padding: 1.75rem 2.5rem;
	}
}

/* heading lv
-------------------------------------------------------------------- */
.heading--lv1 {
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid #EEEEEE;
}
.heading--lv1::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 2em;
	content: "";
	border-bottom: 2px solid #4BACD5;
}
.heading--lv1--accent::after {
	border-bottom: 2px solid #00688D;
}
.heading--lv1__sub {
	font-size: 1rem;
	font-weight: 500;
	display: block;
	margin-bottom: .25rem;
	color: #4BACD5;
}
.heading--lv2 {
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 1.25rem;
	padding: 0 0 0 .875rem;
	color: #4BACD5;
}
.heading--lv2::after {
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	width: 4px;
	height: 86%;
	margin: auto;
	content: "";
	border-radius: 3px;
	background-color: #4BACD5;
}
@media screen and (min-width: 48em) {
	.heading--lv1 {
		font-size: 1.75em;
	}
	.heading--lv2 {
		font-size: 1.5em;
		margin-bottom: 1.5rem;
	}
}

/* heading balloon
-------------------------------------------------------------------- */
.heading--balloon {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: 1.25em;
	line-height: 1.6;
	margin-bottom: 1.25rem;
	padding-bottom: .5em;
	text-align: center;
	color: #00688D;
}
.heading--balloon > i:after {
	position: absolute;
	top: auto;
	right: 0;
	bottom: -7px;
	left: 0;
	display: block;
	width: 14px;
	height: 14px;
	margin: auto;
	content: "";
	transform: rotate(45deg);
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}
.heading--balloon::before,
.heading--balloon::after {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	display: inline-block;
	width: calc(50% - 9px);
	margin: auto;
	content: "";
	border-bottom: solid 1px #CCCCCC;
}
.heading--balloon::before {
	right: 0;
	left: auto;
}
.heading--balloon::after {
	right: auto;
	left: 0;
}
.heading--balloon__sub {
	font-size: 1rem;
	display: block;
}
@media screen and (min-width: 48em) {
	.heading--balloon {
		font-size: 1.75em;
		margin-bottom: 1.875rem;
	}
}

/* heading dot
-------------------------------------------------------------------- */
.heading__dot {
	position: relative;
}
.heading__dot::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	display: block;
	width: 5px;
	height: 5px;
	margin: auto;
	content: "";
	border-radius: 5px;
	background-color: #F8692A;
}

/* ===================================================================
  lead
=================================================================== */
.heading + .lead {
	margin-bottom: 2rem;
}
@media screen and (min-width: 48em) {
	.heading + .lead {
		margin-top: -1em;
		margin-bottom: 5rem;
		text-align: center;
	}
	.lead--howtouse {
		font-size: 1.125em;
		margin-top: 0 !important;
		text-align: center;
	}
}
/* ===================================================================
  list
=================================================================== */
.list-inline,
.list-normal,
.list-note,
.list-note-number,
.list-annotation {
	box-sizing: border-box;
	margin: 1em 0 0 0;
	padding: 0;
	list-style: none;
}
.list--sm,
.list-normal--sm,
.list-note--sm,
.list-note-number--sm,
.list-annotation--sm {
	font-size: .875em;
}
.list-normal li,
.list-note li,
.list-note-number li,
.list-annotation li {
	margin: .4em 0 0 0;
}
.list-normal li:first-child,
.list-note li:first-child,
.list-note-number li:first-child,
.list-annotation li:first-child {
	margin-top: 0;
}
/* ・-- ・-- ・-- */
.list-inline li {
	display: inline-block;
	box-sizing: border-box;
	margin: 0 1em 0 0;
}
/* ・-- */
.list-normal li {
	padding-left: 1em;
	text-indent: -1em;
}
.list-normal li:before {
	content: "・";
	color: #54483D;
}
/* ・-- ・-- ・-- */
.list-inline li {
	display: inline-block;
	box-sizing: border-box;
	margin: 0 1em 0 0;
	padding-left: 1em;
	text-indent: -1em;
}
.list-inline li:before {
	content: "・";
	color: #0985C8;
}
/* ※-- */
.list-note li {
	margin-left: 1.4em;
	text-indent: -1.4em;
}
.list-note li:before {
	display: inline-block;
	width: 1.4em;
	content: "※";
	text-indent: 0;
}
/* 1.---- 2.---- 3.--- */
.list-note-number li {
	margin-left: 2em;
	counter-increment: list-note-num;
	text-indent: -2em;
}
.list-note-number li:before {
	display: inline-block;
	width: 2em;
	content: counter(list-note-num) ".";
	text-indent: 0;
	color: #0985C8;
}
/* ※1.---- ※2.---- ※3.--- */
.list-annotation {
	margin-left: 2em;
}
.list-annotation > li {
	margin-left: 1.2em;
	list-style-type: none;
	counter-increment: list-annotation;
	text-indent: -3em;
}
.list-annotation > li:before {
	display: inline-block;
	width: 3em;
	content: "\203B"counter(list-annotation);
	text-indent: 0;
}
/* ===================================================================
  mv
=================================================================== */
.mv__title {
	position: relative;
	z-index: 0;
	margin: 0;
	padding: 2rem 1.25rem;
	background-image: url(/cloud/how-to-use/common/img/SP_mv_bg.jpg?2103);
	background-position: center center;
	background-size: cover;
}
.mv__title::before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: none;

	backdrop-filter: blur(4px);
}
.l-mv--teacher > .mv__title::before {
	content: "";
	background-color: rgba(104, 206, 249, .16);
}
.l-mv--student > .mv__title::before {
	content: "";
	background-color: rgba(108, 151, 79, .16);
}
.mv__nav {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border-top: 1px solid #D5D3C7;
	background-color: #F7F4EC;
	background-image: linear-gradient(#D5D3C7, #D5D3C7);
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: 1px 1px;
}
.mv__nav__title {
	font-family: fot-tsukuardgothic-std, Noto Sans JP, sans-serif;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1;
	display: block;
	width: 100%;
	margin-top: 1.6em;
	padding: .875rem;
	padding: .6em 1em .8em 1em;
	text-align: center;
	color: #FFFFFF;
	border-radius: 6px;
	background-color: #000000;
	background-repeat: repeat;
	background-position: center bottom;
}
.mv__nav__title--teacher {
	background-color: #4BACD5;
	background-image: url(/cloud/how-to-use/common/img/bg_dot-teacher.png);
}
.mv__nav__title--student {
	padding-top: 1.125em;
	background-color: #91C02C;
	background-image: url(/cloud/how-to-use/common/img/bg_dot-student.png);
}
@media all and (-ms-high-contrast: none) {
	.mv__nav__title--student {
		height: 50px;
		padding-top: .5em;
	}
}
.mv__nav__title::before {
	position: absolute;
	position: static;
	top: .5em;
	right: 0;
	bottom: auto;
	left: 0;
	display: inline-block;
	width: 20px;
	width: 20px;
	height: 20px;
	height: 20px;
	margin: auto;
	margin: 0 .4em 0 0;
	content: "";
	vertical-align: sub;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.mv__nav__title--teacher::before {
	background-image: url(/cloud/how-to-use/img/icon_about_teacher.png);
}
.mv__nav__title--student::before {
	background-image: url(/cloud/how-to-use/img/icon_about_student.png);
}
.mv__nav__button {
	font-size: .875em;
	font-weight: 500;
	line-height: 1.25;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	margin-top: 0;
	padding: .5em 1.5em .75em 1.5em;
	transition: all .2s;
	text-align: center;
	color: #645F51;
	border-bottom: 1px solid #D5D3C7;
}
.mv__nav__button:nth-child(odd) {
	border-right: 1px solid #D5D3C7;
}
.mv__nav__button,
.mv__nav__button:hover {
	color: #444444;
}

.l-mv--teacher .mv__nav__button__current,
.l-mv--teacher .mv__nav__button__current:hover {
	color: #4BACD5;
}
.l-mv--student .mv__nav__button__current,
.l-mv--student .mv__nav__button__current:hover {
	color: #91C02C;
}
.mv__nav__button:hover {
	opacity: .8;
}
.mv__nav__button > span {
	position: relative;
	top: -4px;
}
.mv__nav__button::before {
	width: 20px;
	height: 20px;
	margin-bottom: .3em;
	content: "";
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.mv__nav__button--top::before {
	background-image: url(/cloud/how-to-use/common/img/ico_top.png);
}
.mv__nav__button--touchtry::before {
	background-image: url(/cloud/how-to-use/common/img/ico_touch-try.png);
}
.mv__nav__button--func::before {
	background-image: url(/cloud/how-to-use/common/img/ico_function.png);
}
.mv__nav__button--qa::before {
	background-image: url(/cloud/how-to-use/common/img/ico_qa.png);
}
.mv__nav__button::after {
	position: absolute;
	top: 0;
	right: .75em;
	bottom: 0;
	left: auto;
	width: 6px;
	height: 6px;
	margin: auto;
	content: "";
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	border-width: 1px 1px 0 0;
	border-style: solid;
}
@media screen and (min-width: 35.5em) {
	.mv__nav__button br {
		display: none;
	}
}
@media screen and (min-width: 48em) {
	.l-mv {
		position: relative;
		z-index: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 22em;
		background-image: url(/cloud/how-to-use/common/img/mv_bg.jpg?2103);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.l-mv::before {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		content: none;

		backdrop-filter: blur(4px);
	}
	.l-mv--teacher::before {
		content: "";
		background-color: rgba(104, 206, 249, .16);
	}
	.l-mv--student::before {
		content: "";
		background-color: rgba(108, 151, 79, .16);
	}
	.l-mv--teacher,
	.l-mv--student {
		height: 18em;
	}
	.l-mv--teacher .mv__title,
	.l-mv--student .mv__title {
		width: 10em;
	}
	.mv__title {
		height: 167px;
		margin-top: 1em;
		padding: 0;
		background: none;
	}
	.mv__title::before,
	.l-mv--teacher > .mv__title::before,
	.l-mv--student > .mv__title::before {
		content: none;
	}
	.mv__nav {
		align-items: flex-end;
		margin-top: auto;
		border: none;
		background: none;
	}
	.mv__nav__title {
		font-size: 1rem;
	}
	.mv__nav__button {
		font-size: 1.6vw;
		flex-direction: row;
		width: auto;
		height: inherit;
		margin: 0 5px;
		padding: .6em 1.6em .2em 1em;
		color: #645F51;
		border: none;
		border-radius: 10px 10px 0 0;
		background: #D5D2C8;
	}
	.l-mv--teacher .mv__nav__button,
	.l-mv--teacher .mv__nav__button:hover,
	.l-mv--student .mv__nav__button,
	.l-mv--student .mv__nav__button:hover {
		color: #444444;
	}
	.mv__nav__button::before {
		position: inherit;
		top: 0;
		width: 22px;
		height: 22px;
		margin-right: .4em;
		margin-bottom: .1em;
		opacity: .8;
	}
	.mv__nav__button::after {
		content: none;
	}
	.mv__nav__button__current {
		padding-bottom: .8em;
		color: #444444;
		background: #F7F4EC;
	}
	.mv__nav__button__current::before {
		opacity: 1;
	}
	.mv__nav__button:hover {
		padding-bottom: .8em;
		opacity: 1 !important;
		color: #444444;
		background: #F7F4EC;
	}
	.mv__nav__button:hover::before {
		opacity: 1;
	}
}
@media screen and (min-width: 1024px) {
	.mv__nav__button {
		font-size: 1em;
	}
}
/* ===================================================================
  映像再生
=================================================================== */
.l-movie {
	position: relative;
}
.l-movie::after,
.l-movie::before {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
}
.l-movie::after {
	width: 4em;
	height: 4em;
	border: 2px solid #FFFFFF;
	border-radius: 4em;
}
.l-movie::before {
	right: -.35em;
	width: 0;
	height: 0;
	border-width: 14px 0 14px 20px;
	border-style: solid;
	border-color: transparent transparent transparent #FFFFFF;
}
.l-movie > img {
	margin: 0;
}
.movie-note {
	margin: .5em 0 0 0;
	padding: 0;
	text-align: right;
}
.movie-note > li {
	font-size: .75em;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #999999;
}

/* ===================================================================
  モーダル画像拡大表示
=================================================================== */
.l-modal {
	position: relative;
	max-width: 600px;
	margin: 1.5rem auto 0 auto;
	background: #666666;
}
.l-modal:hover::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 50px;
	margin: auto;
	content: "";
	cursor: pointer;
	background-image: url("/cloud/how-to-use/common/img/img_ico_modal.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.l-modal--seminar:hover::after {
	background-image: none;
}
.l-modal > img {
	position: relative;
	margin: 0;
	cursor: pointer;
	transition: opacity .3s;
}
.l-modal:hover > img {
	opacity: .5;
}
#js-modal,
#js-modal-img,
#js-modal-seminar {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	max-width: 100% !important;
	height: 100%;
	background: rgba(0, 0, 0, .8);
}
#js-modal img,
#js-modal-img img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 90%;
	max-height: 90%;
	margin: auto !important;
	cursor: pointer;
}
#js-modal-seminar {
	overflow-y: auto;
}
#js-modal-seminar .modal-seminar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 90%;
	max-height: 100%;
	margin: auto !important;
}
#js-modal .vpPoster img,
#js-modal-img .vpPoster img {
	max-width: 100%;
	max-height: 100%;
}

@media screen and (min-width: 48em) {
	.l-modal {
		margin-top: 2.5rem;
	}
}

.modal-video {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 960px;
	height: 100%;
	margin: auto;
}

/* セミナー申し込み */
.modal-seminar {
	display: none;
}
#js-modal-seminar .modal-seminar {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-seminar__inner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 760px;
	height: 100%;
}
.modal-seminar__body {
	width: 100%;
	padding: 5vw;
	text-align: center;
	border-radius: 1em;
	background-color: #FFFFFF;
}
.modal-seminar__body .l-privacy {
	overflow-y: auto;
	height: 8em;
	margin: 1em 0;
	padding: 1em;
	text-align: left;
	border: 1px solid #DDDDDD;
}
.modal-seminar__body .l-privacy * {
	font-size: 14px;
}
.modal-seminar__box {
	margin: 1em;
	padding: 1em;
	background-color: #FFF7EE;
}
.modal-seminar__text {
	font-size: 14px;
	color: #F8692A;
}
.modal-seminar__check {
	margin-top: 2em;
}
.button-form {
	transition: color .2s, background-color .2s;
	pointer-events: none;
	color: #888888;
	background-color: #CCCCCC;
}
#check-button-form:checked ~ .button-form {
	pointer-events: inherit;
	color: #FFFFFF;
	background-color: #4BACD5;
}
@media screen and (min-width: 48em) {
	.modal-seminar__body {
		padding: 3em;
	}
	.modal-seminar__body .l-privacy {
		margin: 2em 0;
	}
}
/* 閉じるボタン */
.js-modal__close,
.js-modal-video__close {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	display: block;
	width: 16vw;
	max-width: 100px;
	height: 16vw;
	max-height: 100px;
	cursor: pointer;
	transition: opacity .2s;
}
.js-modal__close:hover,
.js-modal-video__close:hover {
	opacity: .6;
}
.js-modal__close::after,
.js-modal__close::before,
.js-modal-video__close::after,
.js-modal-video__close::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	background-color: #FFFFFF;
}
.js-modal__close::after,
.js-modal-video__close::after {
	width: 70%;
	height: 2px;
	transform: rotate(45deg);
}
.js-modal__close::before,
.js-modal-video__close::before {
	width: 2px;
	height: 70%;
	transform: rotate(-135deg);
}
@media screen and (min-width: 48em) {
	.js-modal__close,
	.js-modal-video__close {
		width: 6rem;
		height: 6rem;
	}
}

/* ===================================================================
  youtube-link
=================================================================== */
.l-contents--youtube-link {
	padding: 3.75rem 0 1px 0;
	background: #FFFFFF;
}
.youtube-link__title {
	font-size: .938em;
	margin: 0 1.25rem 2rem 1.25rem;
	text-align: center;
}
.youtube-link__title > br {
	display: none;
}
.l-youtube-link__btn {
	position: relative;
	overflow: hidden;
}
.l-youtube-link__btn::after {
	display: block;
	padding-top: 30%;
	content: "";
}
.l-youtube-link__btn::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	-webkit-transition: transform .45s cubic-bezier(.5, .05, .01, .99);
	        transition: transform .45s cubic-bezier(.5, .05, .01, .99);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.l-youtube-link__btn:hover::before {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}
.l-youtube-link__btn--teacher::before {
	background-image: url("/cloud/how-to-use/common/img/touchtry/btn_youtube-teacher.jpg");
}
.l-youtube-link__btn--student::before {
	background-image: url("/cloud/how-to-use/common/img/touchtry/btn_youtube-student.jpg");
}
.youtube-link__btn {
	font-weight: 500;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .3s;
	color: #FFFFFF;
}
.youtube-link__btn::after,
.youtube-link__btn::before {
	position: absolute;
	z-index: 2;
	top: calc(50% - .2em);
	right: 0;
	bottom: auto;
	left: 0;
	width: .5em;
	height: .5em;
	margin: auto;
	content: "";
}
.youtube-link__btn--teacher::after,
.youtube-link__btn--teacher::before {
	right: -12em;
}
.youtube-link__btn--student::after,
.youtube-link__btn--student::before {
	right: -12em;
}
.youtube-link__btn::after {
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #FFFFFF;
}
.youtube-link__btn::before {
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #FFFFFF;

	filter: drop-shadow(2px -2px 0px #FFFFFF);
}
@media all and (-ms-high-contrast: none) {
	/* IEアイコン非表示 */
	.youtube-link__btn::after,
	.youtube-link__btn::before {
		content: none;
	}
}
.youtube-link__btn--teacher:hover::after,
.youtube-link__btn--student:hover::after {
	border-color: #444444;
}
.youtube-link__btn--teacher:hover::before,
.youtube-link__btn--student:hover::before {
	border-color: #444444;

	filter: drop-shadow(2px -2px 0px #444444);
}
.youtube-link__btn--teacher {
	background-color: rgba(19, 104, 140, .6);
}
.youtube-link__btn--student {
	background-color: rgba(88, 121, 18, .6);
}
.youtube-link__btn--teacher:hover,
.youtube-link__btn--student:hover {
	color: #444444;
}
.youtube-link__btn > span {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 60%;
	padding: 1em;
	text-align: center;
	letter-spacing: .04em;
	border: 1px solid #FFFFFF;
	border-radius: 80px;
}
.youtube-link__btn > span::before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 100%;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	-webkit-transition: right .45s cubic-bezier(.5, .05, .01, .99);
	        transition: right .45s cubic-bezier(.5, .05, .01, .99);
	pointer-events: none;
	background-color: #FFFFFF;
}
.btn__youtube {
	font-size: .938rem;
	display: block;
}
.youtube-link__btn:hover > span::before {
	right: 0;
}
@media screen and (min-width: 48em) {
	.l-contents--youtube-link {
		padding: 4em 0 1px 0;
	}
	.l-youtube-link__btn::after {
		padding-top: 40%;
	}
	.youtube-link__title {
		font-size: 1.25em;
		margin: 0 0 3em 0;
	}
	.youtube-link__title > br {
		display: block;
	}
	.youtube-link__btn > span {
		font-size: 1.125em;
		padding: 1em 1.4em;
	}
}
@media screen and (min-width: 1024px) {
	.l-contents--youtube-link {
		padding: 5em 0 1px 0;
	}
	.l-youtube-link__btn::after {
		padding-top: 260px;
	}
}

/*
 * Utility
 */
/* ===================================================================
  PC SP
=================================================================== */
.u-pc,
.u-pc-if {
	display: none !important;
}
@media screen and (min-width: 48em) {
	.u-sp {
		display: none !important;
	}
	.u-pc {
		display: block !important;
	}
	.u-pc-if {
		display: inline-flex !important;
	}
}
/* ===================================================================
  margin
=================================================================== */
.u-mt {
	margin-top: 1.25rem !important;
}
.u-mb {
	margin-bottom: 1.25rem !important;
}
.u-mt-xs,
.u-mt-sm {
	margin-top: .625rem !important;
}
.u-mb-xs,
.u-mb-sm {
	margin-bottom: .625rem !important;
}
.u-mt-md {
	margin-top: 1rem !important;
}
.u-mb-md {
	margin-bottom: 1rem !important;
}
.u-mt-lg {
	margin-top: 2rem !important;
}
.u-mb-lg {
	margin-bottom: 2rem !important;
}
.u-mt-xl {
	margin-top: 3rem !important;
}
.u-mb-xl {
	margin-bottom: 3rem !important;
}
.u-mt-none {
	margin-top: 0 !important;
}
.u-mb-none {
	margin-bottom: 0 !important;
}
.u-mtb-none {
	margin: 0 !important;
}
@media screen and (min-width: 48em) {
	.u-mt {
		margin-top: 2rem !important;
	}
	.u-mb {
		margin-bottom: 2rem !important;
	}
	.u-mt-xs {
		margin-top: .5rem !important;
	}
	.u-mb-xs {
		margin-bottom: .5rem !important;
	}
	.u-mt-sm {
		margin-top: 1rem !important;
	}
	.u-mb-sm {
		margin-bottom: 1rem !important;
	}
	.u-mt-md {
		margin-top: 1rem !important;
	}
	.u-mb-md {
		margin-bottom: 1rem !important;
	}
	.u-mt-lg {
		margin-top: 3rem !important;
	}
	.u-mb-lg {
		margin-bottom: 3rem !important;
	}
	.u-mt-xl {
		margin-top: 5rem !important;
	}
	.u-mb-xl {
		margin-bottom: 5rem !important;
	}
}
/* ===================================================================
  padding
=================================================================== */
.u-pt {
	padding-top: 1.25rem !important;
}
.u-pb {
	padding-bottom: 1.25rem !important;
}
.u-pt-sm {
	padding-top: .625rem !important;
}
.u-pb-sm {
	padding-bottom: .625rem !important;
}
.u-pt-md {
	padding-top: 1rem !important;
}
.u-pb-md {
	padding-bottom: 1rem !important;
}
.u-pt-lg {
	padding-top: 2rem !important;
}
.u-pb-lg {
	padding-bottom: 2rem !important;
}
.u-pt-xl {
	padding-top: 3rem !important;
}
.u-pb-xl {
	padding-bottom: 3rem !important;
}
.u-ptb-none {
	padding: 0 !important;
}
@media screen and (min-width: 48em) {
	.u-pt {
		padding-top: 2em !important;
	}
	.u-pb {
		padding-bottom: 2em !important;
	}
	.u-pt-sm {
		padding-top: 1em !important;
	}
	.u-pb-sm {
		padding-bottom: 1em !important;
	}
	.u-pt-md {
		padding-top: 1em !important;
	}
	.u-pb-md {
		padding-bottom: 1em !important;
	}
	.u-pt-lg {
		padding-top: 3em !important;
	}
	.u-pt-xl {
		padding-top: 5em !important;
	}
	.u-pb-lg {
		padding-bottom: 3em !important;
	}
	.u-pb-xl {
		padding-bottom: 5em !important;
	}
}
/* ===================================================================
  layout
=================================================================== */
.u-layout-center {
	text-align: center !important;
}
.u-layout-center-sp {
	text-align: center !important;
}
.u-layout-left {
	text-align: left !important;
}
.u-layout-right {
	text-align: right !important;
}
@media screen and (min-width: 48em) {
	.u-layout-center-sp {
		text-align: inherit !important;
	}
	.u-layout-center-pc {
		text-align: center !important;
	}
	.u-fl-left {
		float: left !important;
	}
	.u-fl-right {
		float: right !important;
	}
}
/* ===================================================================
  heading
=================================================================== */
.u-heading-Lv1,
.u-heading-Lv2 {
	/* 20px */
	font-size: 1.25rem !important;
}
.u-heading-Lv3,
.u-heading-Lv4 {
	/* 18px */
	font-size: 1.125rem !important;
}
.u-heading-Lv5,
.u-heading-Lv6 {
	/* 16px */
	font-size: 1rem !important;
}
@media screen and (min-width: 48em) {
	.u-heading-Lv1 {
		/* 26px */
		font-size: 1.625rem !important;
	}
	.u-heading-Lv2 {
		/* 24px */
		font-size: 1.5rem !important;
	}
	.u-heading-Lv3 {
		/* 22px */
		font-size: 1.375rem !important;
	}
	.u-heading-Lv4 {
		/* 20px */
		font-size: 1.25rem !important;
	}
	.u-heading-Lv5 {
		/* 18px */
		font-size: 1.06rem !important;
	}
	.u-heading-Lv6 {
		/* 16px */
		font-size: 1rem !important;
	}
}
/* ===================================================================
  text
=================================================================== */
.u-text-xs,
.u-text-sm {
	/* 12px */
	font-size: .75rem !important;
}
.u-text-md {
	/* 16px */
	font-size: 1rem !important;
}
.u-text-lg,
.u-text-xl {
	/* 20px */
	font-size: 1.25rem !important;
}
.u-text-normal {
	font-weight: normal !important;
}
.u-text-strong {
	font-weight: bold !important;
}
.u-text-warning {
	color: #F8692A !important;
}
.u-text-inline {
	display: inline-block;
}
.u-text-underline {
	text-decoration: underline;
}
@media screen and (min-width: 48em) {
	.u-text-xs {
		/* 12px */
		font-size: .75rem !important;
	}
	.u-text-sm {
		/* 14px */
		font-size: .875rem !important;
	}
	.u-text-md {
		/* 18px */
		font-size: 1.125rem !important;
	}
	.u-text-lg {
		/* 22px */
		font-size: 1.375rem !important;
	}
	.u-text-xl {
		/* 26px */
		font-size: 1.625rem !important;
	}
	.u-text-strong {
		font-weight: bold !important;
	}
	.text-inline {
		display: inline-block !important;
	}
}
/* ===================================================================
  img size
=================================================================== */
@media screen and (min-width: 35.5em) {
	.u-img-xs {
		width: 100%;
		max-width: 380px;
	}
	.u-img-sm {
		width: 100%;
		max-width: 568px;
	}
	.u-img-md {
		width: 100%;
		max-width: 768px;
	}
	.u-img-lg {
		width: 100%;
		max-width: 1024px;
	}
}