/* =========================================================================================
  BEADS CREATOR WEB PAGE STYLE
  LAST UPDATE : 2018/11/01
  AUTHER : M-383
========================================================================================= */
/* -----------------------------------------------------------------------------------------
  RESPONSIVE SETTING
----------------------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {
	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.4em;
	}

	#introduction-inner > p {
		font-size: 1em;
	}

	.function-float-left > div div p,
	.function-float-right > div div p {
		font-size: 1em;
	}

	header p {
		width: 100%;
	}

	#hero-area,
	#hero-area-en {
		height: auto;
	}

	#hero-area-inner,
	#hero-area-inner-en {
		width: 100%;
		padding: 74px 0 36px;
	}

	#hero-area-inner p,
	#hero-area-inner-en p {
		width: 444px;
		height: auto;
		padding: 0;
		margin: 0 auto 0;
		float: none;
	}

	#hero-area-inner div,
	#hero-area-inner-en div {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		float: none;
	}

	#hero-area-inner div h1,
	#hero-area-inner-en div h1 {
		width: 444px;
		height: 100px;
		padding: 0;
		margin: 8px auto 24px;
		background-size: 444px 100px;
	}

	#introduction-inner,
	#function-inner,
	#download-inner {
		width: 100%;
		padding: 42px 24px 48px;
	}

	#vimeo-player {
		text-align: center;
		width: 480px;
		height: auto;
		margin: 0 auto;
	}

	#introduction-inner > p,
	#function-inner > p {
		margin: 0 auto 32px;
	}

	.function-float-left,
	.function-float-right {
		width: 100%;
		height: auto;
		padding: 24px;
		margin-bottom: 32px;
	}

	.function-float-left:last-child,
	.function-float-right:last-child {
		margin-bottom: 0;
	}

	.function-float-left > div div h3,
	.function-float-right > div div h3 {
		text-align: center;
		margin-bottom: 12px;
	}

	.function-float-left > div,
	.function-float-left > p,
	.function-float-right > div,
	.function-float-right > p {
		width: 100%;
		height: auto;
		padding: 0;
		float: none;
	}

	.function-float-left > p,
	.function-float-right > p {
		margin: 0 0 24px;
	}

	.function-float-left > p img,
	.function-float-right > p img {
		width: 420px;
		height: auto;
		margin: 0 auto;
	}

	#download-inner > h2 {
		margin: 0 0 32px;
	}

	#download-inner ul {
		margin: 24px 0 0;
	}

	#bottom-ss {
		margin-bottom: 32px;
	}

	#bottom-ss img,
	#bottom-app-name img {
		width: 444px;
		height: auto;
	}

	footer p {
		font-size: 11px;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 14px;
	}

	h2 {
		font-size: 1.2em;
		line-height: 1.4;
		font-weight: bold;
	}

	h3 {
		font-size: 1.2em;
		line-height: 1.0;
		font-weight: bold;
	}

	#introduction-inner > p {
		font-size: 1em;
	}

	.function-float-left > div div p,
	.function-float-right > div div p {
		font-size: 1em;
	}

	#hero-area,
	#hero-area-en {
		background-size: 112px 112px;
	}

	#hero-area-inner,
	#hero-area-inner-en {
		width: 100%;
		padding: 74px 0 32px;
	}

	#hero-area-inner p,
	#hero-area-inner-en p {
		width: 320px;
		margin: 0 auto -4px;
	}

	#hero-area-inner div h1,
	#hero-area-inner-en div h1 {
		width: 320px;
		height: 72px;
		padding: 0;
		margin: 24px auto;
		background-size: 320px 72px;
	}

	#introduction-inner,
	#function-inner,
	#download-inner {
		width: 100%;
		padding: 32px 24px 36px;
	}

	#vimeo-player {
		text-align: center;
		width: 320px;
		height: auto;
		margin: 0 auto;
	}

	#vimeo-player iframe  {
		width: 240px;
		height: 427px;
	}

	#introduction-inner > h2 {
		margin: 0 0 12px;
	}

	#introduction-inner > p {
		margin-bottom: 24px;
	}

	#function-inner > h2 {
		color: #FFFFFF;
		margin: 0 0 24px;
	}

	.function-float-left,
	.function-float-right {
		width: 100%;
		height: auto;
		padding: 24px;
		margin-bottom: 16px;
	}

	.function-float-left > p img,
	.function-float-right > p img {
		width: 100%;
		height: auto;
	}

	#bottom-ss img,
	#bottom-app-name img {
		width: 320px;
		height: auto;
	}
}

@media screen and (max-width: 375px) {
	#introduction-inner > p {
		font-size: 1em;
	}

	#hero-area,
	#hero-area-en {
		background-size: 112px 112px;
	}

	#hero-area-inner,
	#hero-area-inner-en {
		width: 100%;
		padding: 68px 0 24px;
	}

	#hero-area-inner p,
	#hero-area-inner-en p {
		width: 288px;
		padding: 0;
	}

	#hero-area-inner div,
	#hero-area-inner-en div {
		margin: 16px 0 0;
	}

	#hero-area-inner div h1,
	#hero-area-inner-en div h1 {
		width: 288px;
		height: 65px;
		margin: 0 auto 16px;
		background-size: 288px 65px;
	}

	#introduction-inner,
	#function-inner,
	#download-inner {
		width: 100%;
		padding: 26px 16px 32px;
	}

	#vimeo-player {
		width: 272px;
	}

	#vimeo-player iframe  {
		width: 240px;
		height: 427px;
	}

	#introduction-inner > h2,
	#function-inner > h2,
	#download-inner > h2 {
		font-size: 15px;
		margin: 0 0 16px;
	}

	#introduction-inner > p,
	#function-inner > p {
		margin-bottom: 24px;
	}

	#download-inner {
	 padding-bottom: 26px;
	}

	#bottom-ss {
		margin-bottom: 16px;
	}

	#bottom-ss img,
	#bottom-app-name img {
		width: 288px;
	}
}