@charset 'UTF-8';

/*
 * global
 */

@font-face {
	font-family: 'Yu Gothic';
	src: local('Yu Gothic Medium');
}

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	background-color: #fff;
	color: #333;
	font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
	font-size: 1.8rem;
	text-rendering: optimizeLegibility;
}

a {
	color: #1f55a3;
	text-decoration: none;
	transition: all 0.2s linear;
}

/* a:hover {
	opacity: 0.75;
} */

a:focus {
	outline: none;
}

a.button.round {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	background: #09f;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	/* border: 1px solid #999; */
	border-radius: 30px;
	transition: none;
}

a.button.round:hover {
	background: linear-gradient(to right, #f90, #f9f);
}

a.button.square {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	background-color: #eee;
	color: #666;
	font-size: 2rem;
	font-weight: bold;
	/* border: 1px solid #999; */
	border-radius: 10px;
}

a.button.square:hover {
	background-color: #ccc;
	/* color: #fff;
	background: linear-gradient(to right, #f90, #f9f); */
}

/*
 * form
 */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"] {
	padding: 10px;
	width: 100%;
	border: 1px solid #ccc;
	-webkit-appearance: none;
}

textarea {
	padding: 10px;
	width: 100%;
	height: 250px;
	border: 1px solid #ccc;
	line-height: 1.5;
	-webkit-appearance: none;
}

select {
	 padding: 10px;
	 width: 100%;
 }

input[type="submit"],
input[type="reset"],
input[type="button"] {
	padding: 0 20px;
	background-color: #eee;
	color: #333;
	width: 100%;
	height: 60px;
	border: 0;
	border-radius: 10px;
	font-size: 1.8rem;
	-webkit-appearance: none;
}

input[type="submit"] {
	background-color: #6cf;
	color: #fff;
	font-weight: bold;
}

input[type="submit"].destructive {
	background-color: #f66;
	color: #fff;
}

input[type="radio"],
input[type="checkbox"] {
	margin-right: 5px;
	width: 20px;
	height: 20px;
}

label {
	display: block;
	margin: 10px 0;
}

/*
 * table
 */

 table {
	margin: 10px 0;
	width: 100%;
	border-spacing: 1px;
	background-color: #ccc;
}

th {
	padding: 15px;
	width: 320px;
	background-color: #f6f6f6;
}

td {
	padding: 15px;
	background-color: #fff;
}




/*
 * header
 */

div#header {
	width: 100%;
	height: 100px;
}

div#header-bottom {
	height: 10px;
	background: linear-gradient(to right, #f90, #f9f);
}

div#header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0 10px;
	width: 100%;
	max-width: 1200px;
	height: 100px;
}

div#header-logo {
	flex-shrink: 0;
	width: 300px;
}

div#header-logo img {
	width: 100%;
	height: auto;
}

/*
 * header-nav
 */

ul#header-nav {
	display: flex;
	padding: 0;
}

ul#header-nav li {
	display: block;
	margin-right: 30px;
}

ul#header-nav li:last-child {
	margin-right: 0;
}

ul#header-nav li a {
	color: inherit;
	font-size: 2rem;
	font-weight: bold;
}

ul#header-nav li a:hover {
	color: #999;
}

/*
 * mobile-nav
 */

a#open-mobile-nav {
	display: none;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 998;
	width: 60px;
	height: 60px;
	background-color: rgba(255, 255, 255, 0.9);
}

a#open-mobile-nav img {
	position: relative;
	width: 100%;
	height: 100%;
}

div#mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
	background-color: rgba(255, 255, 255, 0.95);
}

div#mobile-nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px 0 10px;
	height: 100px;
}

div#mobile-nav-header a#mobile-nav-logo img {
	width: 240px;
	height: auto;
}

div#mobile-nav-header a#close-mobile-nav {
	display: block;
	width: 60px;
	height: 60px;
}

div#mobile-nav-header a#close-mobile-nav img {
	width: 100%;
	height: 100%;
}

div#mobile-nav ul {
	margin: 0;
	padding: 0;
}

div#mobile-nav ul li {
	display: block;
	height: 60px;
	border-top: 1px solid #ccc;
}

div#mobile-nav ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: inherit;
}

div#mobile-nav ul li a:hover {
	background-color: #eee;
}

div#mobile-nav-bottom {
	height: 10px;
	background: linear-gradient(to right, #f90, #f9f);
}

/*
 * content
 */

div#page-title {
	width: 100%;
	height: 200px;
	background-image: url(/images/header_bg.jpg);
	background-repeat: repeat-x;
}

div#page-title-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	height: 100%;
}

div#page-title h1 {
	position: relative;
	margin: 0;
	padding: 0 20px;
	font-size: 3.6rem;
	font-weight: bold;
}

div.breadcrumbs {
	margin: 10px;
	font-size: 1.6rem;
}

div.section {
	width: 100%;
}

div.section-inner {
	margin: 0 auto;
	padding: 80px 10px;
	width: 100%;
	max-width: 1200px;
}

div.section h2 {
	margin: 0 0 50px 0;
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
	/* font-family: 'Hiragino Kaku Gothic Std'; */
}

div.section h3 {
	margin: 30px 0 0 0;
	padding-left: 10px;
	font-size: 2rem;
	font-weight: bold;
	border-left: 10px solid #f90;
	/* font-family: 'Hiragino Kaku Gothic Std'; */
}

div.section p {
	margin: 1.5rem 0;
	line-height: 1.7;
}

div.section ul li,
div.section ol li {
	margin: 1.5rem 0;
	line-height: 1.7;
}

div.section ul.index li,
div.section ol.index li {
	margin: 0;
	line-height: 1.7;
}

div.section p.notes {
	padding: 10px;
	background-color: #ffffee;
	color: #666;
	font-size: 1.6rem;
}

div.section code {
	font-size: 1.6rem;
	color: #600;
}






/*
 * main-image
 */

 div#main-image {
	width: 100%;
	height: 400px;
	background-image: url(/images/header_bg.jpg);
	background-repeat: repeat-x;
}

div#main-image div#main-image-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	height: 100%;
}

div#main-image div.earth {
	position: absolute;
	bottom: 0;
	left: center;
	margin: 0 auto;
	width: 100%;
	max-width: 760px;
	height: 100%;
	background-image: url(/images/earth.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
}

div#main-image img.rocket {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 200px;
	height: auto;
}

div#main-image img.anniv {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 100px;
	height: auto;
}

div#main-image-text {
	position: relative;
	padding: 0 20px;
	width: 100%;
	max-width: 640px;
}

div#main-image-text img {
	width: 100%;
	height: auto;
}

/*
 * top-info
 */

ul#top-info {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

ul#top-info li {
	display: block;
	margin: 10px 0;
}

ul#top-info li a {
	color: inherit;
}

ul#top-info span.info-date {
	display: inline-block;
	margin-right: 10px;
}

ul#top-info span.info-title {
	display: inline-block;
}


/*
 * top-security
 */

div#top-security {
	display: flex;
}

div#top-security div.security {
	margin: 30px;
	padding: 50px;
	width: 50%;
	background-color: #fff;
	border-radius: 20px;
	text-align: center;
}

div#top-security div.security img {
	width: 120px;
	height: 120px;
}

div#top-security div.security h3 {
	margin: 10px 0;
	padding: 0;
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
	border: 0;
	/* font-family: 'Hiragino Kaku Gothic Std'; */
}

div#top-security div.security p {
	font-size: 1.6rem;
	text-align: left;
}

/*
 * top-recommend
 */

div.top-recommend {
	display: flex;
}

div.top-recommend div.type-n-screenshot img {
	width: 500px;
	height: auto;
}

div.top-recommend div.type-n-comment {
	margin-left: 50px;
	font-size: 2rem;
}

div.top-recommend div.type-n-comment p {
	margin: 0 0 20px 0;
}

/*
 * top-bbs-type
 */

div.top-bbs-type {
	display: flex;
}

div.bbs-outer {
	padding: 10px;
	width: 25%;
}

div.bbs {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	border-radius: 10px;
}

div.bbs h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	font-size: 2.4rem;
	font-weight: bold;
	background-color: #f90;
	border-radius: 10px 10px 0 0;
	color: #fff;
}

div.bbs p {
	margin: 0;
	padding: 10px;
	height: 100%;
}

div.bbs div.detail-button {
	padding: 20px;
}

div.bbs div.detail-button a {
	height: 40px;
	font-size: 1.6rem;
}

/*
 * bbs
 */

div.sample-bbs {
	display: flex;
	flex-wrap: wrap;
	margin: 50px 0;
	width: 100%;
}

div.sample-bbs a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
}

/* type-n */

div.sample-bbs.type-n {
	background-color: #def;
}

div.sample-bbs.type-n a {
	width: 50%;
}

div.sample-bbs.type-n a:hover {
	background-color: #09f;
	color: #fff;
}

/* type-s */

div.sample-bbs.type-s {
	background-color: #def;
}

div.sample-bbs.type-s a {
	width: 25%;
}

div.sample-bbs.type-s a:hover {
	background-color: #09f;
	color: #fff;
}

/* l-series */

div.sample-bbs.l-series {
	background-color: #ffc;
}

div.sample-bbs.l-series a {
	width: 25%;
}

div.sample-bbs.l-series a:hover {
	background-color: #f90;
	color: #fff;
}

/* type-t */

div.sample-bbs.type-t {
	background-color: #cfc;
}

div.sample-bbs.type-t a {
	width: 100%;
}

div.sample-bbs.type-t a:hover {
	background-color: #0c0;
	color: #fff;
}

/* register-page button */

a.register-page {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50px 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(to right, #f90, #f9f);
	border-radius: 20px;
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
}

a.register-page:hover {
	background: linear-gradient(to right, #09f, #9f9);
}

label.purpose {
	padding: 5px;
	font-size: 2rem;
	font-weight: bold;
	background-color: #eff;
}

/*
 * security
 */

ul.security-bbs-type {
	margin: 0;
	padding: 0;
}

ul.security-bbs-type li {
	display: inline-block;
	margin-right: 5px;
	padding: 0 10px;
	background-color: #69c;
	color: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 1.2rem;
	font-weight: bold;
 }



/*
 * footer
 */

div#footer {
	width: 100%;
	background-color: #222;
	color: #ccc;
}

div#footer-border {
	height: 10px;
	background: linear-gradient(to right, #f90, #f9f);
}

div#footer-inner {
	margin: 0 auto;
	padding: 50px 10px;
	width: 100%;
	max-width: 1200px;
}

div#footer-logo img {
	width: 240px;
	height: auto;
}

div#footer-content {
	display: flex;
	flex-wrap: wrap;
	margin: 50px 0 0 0;
}

div#footer-info {
	margin-bottom: 50px;
	padding: 0 20px 0 0;
	width: calc(100% / 3);
}

div#footer-info p {
	font-size: 1.6rem;
	line-height: 1.7;
}

div#footer-info img.ssl-encryption {
	margin-bottom: 30px;
	width: 120px;
	height: auto;
}

div#footer-info img.banner {
	width: 88px;
	height: 31px;
}

ul.footer-nav {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 10px;
	width: calc(100% / 3);
	font-size: 1.6rem;
}

ul.footer-nav li {
	display: block;
	height: 40px;
	border-bottom: 1px solid #333;
}

ul.footer-nav li.depth-0 {
	height: 50px;
	font-weight: bold;
}

ul.footer-nav li.depth-1 a {
	padding-left: 20px;
}

ul.footer-nav li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #ccc;
	transition: all 0.1s linear;
}

ul.footer-nav li.depth-0 a:hover {
	padding-left: 10px;
	color: #fff;
	background-color: #111;
}

ul.footer-nav li.depth-1 a:hover {
	padding-left: 30px;
	color: #fff;
	background-color: #111;
}

small#footer-copy {
	display: block;
	margin-top: 50px;
	color: #eee;
	font-size: 1.4rem;
	font-weight: bold;
	font-family: Arial;
}

/*
 * page-top
 */

div#page-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 997;
	width: 60px;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 30px;
}

div#page-top a {
	display: block;
}

div#page-top img {
	width: 100%;
	height: 100%;
}


/*
 * books
 */

div.section div.book-cover {
	display: flex;
	justify-content: center;
}

div.section h2.book-title {
	margin: 10px 0;
}

div.section div.book-info {
	font-size: 1.6rem;
	text-align: center;
}

/*
 * skin-gallery
 */

div.section div.skin-preview {
	display: flex;
	justify-content: center;
}

div.section div.skin-menu {
	display: flex;
	justify-content: center;
}

div.section div.skin-menu a {
	margin: 10px;
}

div.section div.skin-info {
	font-size: 1.6rem;
	color: #999;;
}

/*
 * how-to-use-skin
 */

div.section img.how-to-use-skin {
	width: 100%;
	max-width: 500px;
	height: auto;
}

/*
 * paypal
 */

div.viewCart {
	padding: 20px;
	background-color: #ffe;
}

ul.paypal-button {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

ul.paypal-button li {
	display: block;
	padding: 10px;
	width: 25%;
}

ul.paypal-button li>div {
	padding: 10px;
	border: 1px solid #999;
	border-radius: 10px;
}

ul.paypal-button li>div.type-n {
	background-color: #fef;
}

ul.paypal-button li>div.type-s {
	background-color: #def;
}

ul.paypal-button li>div.l-series {
	background-color: #ffc;
}

ul.paypal-button li>div.type-x {
	background-color: #fed;
}

ul.paypal-button li>div.type-t {
	background-color: #dfd;
}

ul.paypal-button li>div.data-migration {
	background-color: #eef;
}

ul.paypal-button table {
	border-spacing: 0;
	background-color: unset;
}

ul.paypal-button td {
	padding: 5px;
	border: 0;
	background-color: unset;
}

ul.paypal-button input[type="text"],
ul.paypal-button select {
	padding: 3px;
}

/*
 * Google AdSense
 */

div.ads {
	margin: 10px auto;
	padding: 10px 20px;
	width: 100%;
	max-width: 1200px;
}

/*
 * reCAPTCHA badge
 */

.grecaptcha-badge {
	visibility: hidden;
}


/*
 * for mobile
 */

@media screen and (max-width: 960px) {
	/* table */
	table.responsive th,
	table.responsive td {
		display: block;
		padding: 15px 10px;
		width: 100%;
	}

	table.horizontal.responsive th {
		border-bottom: 1px solid #ccc;
	}

	table.horizontal.responsive td {
		border-bottom: 1px solid #eee;
	}

	/* header-nav */
	ul#header-nav {
		display: none;
	}

	/* mobile-nav */
	a#open-mobile-nav {
		display: block;
	}

	/* main-image */
	div#main-image img.rocket {
		width: 120px;
	}

	div#main-image img.anniv {
		width: 70px;
	}

	/* top-security */
	div#top-security div.security {
		margin: 20px;
		padding: 20px;
	}

	div.top-recommend div.type-n-screenshot img {
		width: 320px;
	}

	/* top-bbs-type */
	div.top-bbs-type {
		flex-wrap: wrap;
	}

	div.bbs-outer {
		width: 50%;
	}

	/* footer */
	div#footer-info {
		padding: 0;
		width: 100%;
	}

	ul.footer-nav {
		width: 50%;
	}

	/* paypal */
	ul.paypal-button li {
		width: 50%;
	}

}

@media screen and (max-width: 640px) {
	/* header */
	div#header-logo {
		width: 240px;
	}

	/* top-info */
	ul#top-info span.info-date {
		display: block;
	}

	ul#top-info span.info-title {
		display: block;
	}

	/* top-security */
	div#top-security {
		flex-wrap: wrap;
	}

	div#top-security div.security {
		width: 100%;
	}

	/* top-recommend */
	div.top-recommend {
		display: flex;
		flex-wrap: wrap;
	}

	div.top-recommend div.type-n-screenshot img {
		padding: 0 50px;
		width: 100%;
	}

	div.top-recommend div.type-n-comment {
		margin: 0;
	}

	/* top-bbs-type */
	div.bbs-outer {
		width: 100%;
	}

	/* content */
	div.section h2 {
		font-size: 2.4rem;
	}

	div#page-title h1 {
		font-size: 3rem;
	}

	/* footer */
	ul.footer-nav {
		padding: 0;
		width: 100%;
	}

	/* paypal */
	ul.paypal-button li {
		width: 100%;
	}

}