@charset "UTF-8";
/* ---------------------------------------------------------------------------
CLOUD STYLE
LATEST UPDATE : 2022/02/14
AUTHER : MIYAGAWA TAKAYUKI
--------------------------------------------------------------------------- */
/*
-	COMMON
- HEADER
- ABOUT
- MERIT
- PREMIUM
- DETAIL
- NOTES
- RESPOSIVE SETTINGS
*/
/* ---------------------------------------------------------------------------
COMMON
--------------------------------------------------------------------------- */
* {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
					box-sizing: border-box;
}

body {
	color: rgb(27, 27, 27);
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	text-align: center;
	background: #FFF;
}

a, a:hover {
	color: #1F4D7A;
	text-decoration: none;
}

b {font-weight: bold;}

div.header-inner,
section {
	text-align: left;
}

main {
	display: block;
	margin-top: 45px;
}

div.header-inner,
section.about-cloud,
section.premium,
div.notes-inner,
div.merit-inner,
div.detail-inner {
	margin: 0 auto;
}

h1, h2 {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	line-height: 1.25em;
}

h1 {
	margin-bottom: 20px;
}

h2 {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.clearfix::after {
	content: “”;
	display: block;
	clear: both;
}

li {
	list-style: none;
}

main.direction {
	direction: rtl;
	unicode-bidi: bidi-override;
}
/* ---------------------------------------------------------------------------
HEADER
--------------------------------------------------------------------------- */
header {
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 44px;
	background-color: #262729;
	z-index: 3;
	display: block;
	position: fixed;

	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
	    -ms-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
					box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
}

div.header-inner {
	width: 100%;
	height: 44px;
	padding: 0 16px;
}

div.header-inner h1 {
	width: 115px;
	padding: 6px 0 8px;
	text-align: left;
	float: left;
}

div.header-inner h1 img {
	vertical-align: bottom;
}

div#header-search-area {
	width: 173px;
	height: 44px;
	float: right;
	margin-top: 0;
}

p#select-lang {
	width: 110px;
	height: 44px;
	float: right;
	overflow: hidden;
	background-color: #262729;
}

p#select-lang select {
	color: #D9E0E6;
	font-size: 12px;
	line-height: 1;
	width: 110px;
	height: 44px;
	padding: 9px 8px 8px 12px;
	margin: 0;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: #262729;
	background-image: url("../img/cloudStorage/selectLang_handle.png");
	background-position: 76px 0;
	background-repeat: no-repeat;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

p#select-lang select:hover {
	background-color: #262729;
}
/* ---------------------------------------------------------------------------
	ABOUT
--------------------------------------------------------------------------- */
section.about-cloud,
div.notes-inner {
	padding: 26px 16px 28px;
}

section.about-cloud p:nth-child(2) {
	text-align: center;
	margin-bottom: 24px;
}

section.about-cloud p:nth-child(2) img {
	width: 69.8%;
	height: auto;
	margin: 0 auto;
	vertical-align: bottom;
}

section.about-cloud p:nth-child(3) {
	margin-bottom: 18px;
}

section.about-cloud p:nth-child(5) {
	/* font-size: 0.714em;
	line-height: 1.6em; */
}

section.about-cloud dl.capacity-general {
	text-align: center;
	margin-bottom: 16px;
}

section.about-cloud dl.capacity-premium {
	text-align: center;
	margin-bottom: 0;
}

section.about-cloud dl.capacity-general dt,
section.about-cloud dl.capacity-premium dt {
	font-weight: bold;
	color: rgb(0, 173, 173);
	margin-bottom: 6px;
}

section.about-cloud dl.capacity-general dd,
section.about-cloud dl.capacity-premium dd {
	line-height: 1.7em;
	padding: 8px 12px 10px;
	background-color: rgb(244, 244, 244);
	border-radius: 6px;
	display: block;
}

section.about-cloud dl.capacity-general dd:last-child {
	margin-top: 12px;
}

section.about-cloud dl.capacity-premium dd:last-child {
	margin-top: 0;
}

section.about-cloud dl.capacity-general dd b,
section.about-cloud dl.capacity-premium dd b {
	color: rgb(255, 51, 136);
	font-size: 1.714em;
}

section.about-cloud dl.capacity-general dd span,
section.about-cloud dl.capacity-premium dd span {
	color: rgb(255, 51, 136);
	font-size: 1.285em;
	padding-left: 2px;
}

section.about-cloud p:last-child span {
	color: rgb(255, 51, 136);
	font-size: 18px;
}

main.direction section.about-cloud p:nth-child(3),
main.direction section.about-cloud p:nth-child(5) {
	text-align: right;
}
/* ---------------------------------------------------------------------------
	MERIT
--------------------------------------------------------------------------- */
section.merit {
	background-color: rgb(255, 251, 233);
}

div.merit-inner {
	padding: 32px 16px 25px;
}

div.merit-item {
	padding: 0 0 26px;
}

div.merit-item:last-child {
	padding-bottom: 0;
}

div.merit-item h2:first-child {
	text-align: center;
	margin-bottom: 12px;
}

div.merit-item p:nth-child(2) {
	width: 100%;
	height: auto;
	margin-bottom: 16px;
}
div.merit-item p:nth-child(2) img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
}

main.direction div.merit-item p:nth-child(3) {
	text-align: right;
}
/* ---------------------------------------------------------------------------
	PREMIUM
--------------------------------------------------------------------------- */
section.premium {
	padding: 25px 16px 32px;
}

section.premium p {
	margin-bottom: 18px;
}

section.premium p:nth-child(2) {
	text-align: center;
	margin-bottom: 25px;
}

section.premium p:nth-child(2) img {
	vertical-align: bottom;
	width: 61.5%;
	height: auto;
	margin: 0 auto;
}

section.premium h2 {
	color: rgb(255, 255, 255);
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
	padding: 8px;
	margin-bottom: 0;
	background-color: rgb(0, 173, 173);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

section.premium ul {
	padding: 12px 12px 11px;
	border: 1px solid rgb(0, 173, 173);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

section.premium li {
	line-height: 1.2em;
	padding-left: 20px;
	margin-bottom: 12px;
	background-image: url("../img/cloudStorage/list_check.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: left 0;
}

section.premium li:last-child {
	margin-bottom: 0;
}

main.direction section.premium p:nth-child(3),
main.direction section.premium p:nth-child(4) {
	text-align: right;
}

main.direction section.premium li {
	text-align: right;
	line-height: 1.2em;
	padding-right: 20px;
	margin-bottom: 12px;
	background-image: url("../img/cloudStorage/list_check.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: right 0;
}
/* ---------------------------------------------------------------------------
	DETAIL
--------------------------------------------------------------------------- */
section.detail {
	border-top: 1px solid rgb(237, 237, 237);
}

div.detail-inner {
	padding: 25px 16px 30px;
}

div.detail-inner p:last-child {
	text-align: center;
	margin-top: 24px;
}

div.detail-inner p:last-child a {
	color: rgb(255, 255, 255);
	font-size: 1.143em;
	line-height: 1.25em;
	width: 74%;
	height: auto;
	min-height: 48px;
	margin: 0 auto;
	padding: 15px 12px 8px;
	display: inline-block;
	border-radius: 6px;
	background-color: rgb(255, 119, 0);
}
/* ---------------------------------------------------------------------------
	NOTES
--------------------------------------------------------------------------- */
section.notes-general {
	background-color: rgb(244, 244, 244);
}

section.notes-premium {
	background-color: rgb(255, 255, 255);
}

section.notes-general div.notes-inner h2 {
	color: rgb(0, 173, 173);
	font-size: 1.143em;
	width: 100%;
	margin-bottom: 7px;
}

section.notes-general div.notes-inner p,
section.notes-premium div.notes-inner p {
	margin-bottom: 16px;
}

section.notes-general div.notes-inner p:nth-child(6) {
	margin-bottom: 0;
}

section.notes-premium div.notes-inner p:nth-child(3) {
	margin-bottom: 0;
}

main.direction div.notes-inner p:nth-child(3),
main.direction div.notes-inner p:nth-child(5),
main.direction div.notes-inner p:nth-child(6) {
	text-align: right;
}
/* ---------------------------------------------------------------------------
	RESPOSIVE SETTINGS
--------------------------------------------------------------------------- */
/* @supports (bottom: env(safe-area-inset-bottom)) {
	div.container {
		padding-top: constant(safe-area-inset-top);
		padding-left: constant(safe-area-inset-left);
		padding-right: constant(safe-area-inset-right);
		padding-bottom: constant(safe-area-inset-bottom);

		padding-top: env(safe-area-inset-top);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
		padding-bottom: env(safe-area-inset-bottom);
	}
} */

@media screen and (max-width: 319px) {
	header,
	div.header-inner,
	section,
	div.detail-inner,
	div.merit-inner,
	div.notes-inner {width: 100%;}

	div.header-inner {
		padding: 0 8px;
	}

	div#header-search-area {
		width: 149px;
		margin-top: 0;
	}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
	header,
	div.header-inner,
	section,
	div.detail-inner,
	div.merit-inner,
	div.notes-inner {width: 100%;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	header,
	div.header-inner,
	section.merit,
	section.notes {width: 100%;}

	section.about-cloud,
	section.premium,
	div.detail-inner,
	div.merit-inner,
	div.notes-inner {width: 480px;}
}

@media screen and (min-width: 769px) {
	header,
	div.header-inner,
	section.merit,
	section.notes {width: 100%;}

	section.about-cloud,
	section.premium,
	div.detail-inner,
	div.merit-inner,
	div.notes-inner {width: 600px;}
}