@charset "UTF-8";

/* 
.TBD
{
	background-color: yellow;
	color: darkmagenta;
}
 */

:root
{
	--main-color: #1E88E5;
	--main-dark-color: #0A1F6E;
	--main-hd-color: #00B050;
	--main-bg-color: white;
	--body-color: #1E2837;
	--body-gray-color: #3C465A;
	--body-bg-color: white;
	--adguard-color: #67B279;
	--adguard-bg-color: #E8F5E9;
	--lixway-color: #0288D1;
	--lixway-bg-color: #E1F5FE;
	--netsupport-color: #3F51B5;
	--netsupport-bg-color: #E8EAF6;
}

body
{
	display: grid;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto;
	color: var(--body-color);
	background-color: var(--main-bg-color);
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt" on;
	font-family: "Roboto", YuGothic, "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

img
{
	max-width: 100%;
	vertical-align: top;
}

.pdb { padding-bottom: 20px; }

.attn
{
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 2.2em;
}

/* header */
.header { background-color: var(--main-bg-color); }

.img-logo
{
	text-align: center;
	padding: 0 10% 0 10%;
}

.header-copy
{
	color: var(--main-color);
	padding: 1rem;
	font-weight: bold;
}

@media (min-width: 768px)
{
	.header-copy { font-size: 1.5rem; }
	
	.h1-hd
	{
		position: absolute;
		top: 25%;
		left: 8%;
		font-size: 2rem;
		font-weight: blod;
		color: var(--main-bg-color);
	}
	
	.exp-hd
	{
		position: absolute;
		top: 50%;
		left: 8%;
		font-size: 1.3rem;
		color: var(--main-bg-color);
	}
}

@media (max-width: 767px)/*  and (min-width: 480px) */
{
	.header-copy
	{
		font-size: 1.5rem;
		text-align: left;
	}
	
	.header-copy-hide { display: none; }
	
	.h1-hd
	{
		position: absolute;
		top: 20%;
		left: 8%;
		font-size: 1.2rem;
		font-weight: blod;
		color: var(--main-bg-color);
	}
	
	.exp-hd
	{
		position: absolute;
		top: 50%;
		left: 2%;
		font-size: 1.0rem;
		color: var(--main-bg-color);
	}
}

/* header closed */
.h1-mn
{
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--main-hd-color);
	margin-top: 2em;
	margin-bottom: 1em;
}

@media (min-width: 768px)
{
	.exit-box
	{
		text-align: center;
		padding: 40px;
	}
	
	.exit-box img { width: 60%; }
}

@media (max-width: 767px)
{
	.exit-box
	{
		text-align: center;
		font-size: 0.8rem;
	}
	
	.exit-box img { width: 80%; }
}

#feature h2
{
	font-size: 1.5rem;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 1em;
}

.main-box
{
	clear: both;
	padding: 10px 10px 20px 10px;
}

.content-box
{
	clear: both;
	background: #F6F8FE;
	margin: 0;
	padding: 40px 0 0 0;
}

.main-exp { word-wrap: break-word; }

.btn-box button
{
	color: var(--main-bg-color);
	background-color: var(--main-dark-color);
	border: 1px solid var(--main-dark-color);
	border-radius: 8px;
	text-align: center;
	font-weight: bold;
	padding: 12px 0 12px 0;
	margin-top: 20px;
	min-height: 60px;
	width: 100%;
}

@media (min-width: 414px)
{
	.btn-box button { font-size: 0.9rem; }
}

@media (max-width: 413px)
{
	.btn-box button { font-size: 0.8rem; }
}

.info-box
{
	background-color: var(--main-bg-color);
	padding: 16px 0 0 0;
}

.info-box a:link, .info-box a:visited, .info-box a:hover, .info-box a:active, .info-box a:focus { color: #FF0000; }

.cmnt
{
	font-size: 0.8rem;
	color: #666666;
}

.sbj
{
	font-size: 110%;
	font-weight: bold;
	margin-top: 1.5rem;
}

.sbj1 {
	font-size: 105%;
	font-weight: bold;
	margin-top: 1.2rem;
}

.sbj2
{
	font-weight: bold;
	text-decoration: underline;
}

a
{
	color: var(--main-color);
	text-decoration: none;
}

a:hover, a:active, a:focus
{
	color: var(--main-color);
	text-decoration: underline;
}

button:link, button:visited
{
	color: var(--body-color);
	/* 
	background-color: #C7B8F2;
	border: 1px solid var(--main-color);
 */
}

button:hover, button:active, button:focus
{
	color: var(--main-bg-color);
	background-color: var(--main-dark-color);
	border-color: var(--main-dark-color);
}

/* footer */
.footer-top
{
	clear: both;
	background-color: var(--main-dark-color);
	color: var(--body-bg-color);
	text-align: center;
	font-size: 90%;
	padding: 16px 0 16px 0;
}

@media (max-width: 393px)
{
	.footer-top { font-size: 80%; }
}

.footer-bottom
{
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	padding: 16px;
}

.footer-top a:link, .footer-top a:visited
{
	color: #FFFFFF;
	text-decoration: none;
}

.footer-top a:hover, .footer-top a:active, .footer-top a:focus
{
	color: var(--main-bg-color);
	text-decoration: underline;
}

/* footer closed */
/* landing & member */
#feature { width: 80%; }

/* 
.feature-icon
{
	width: 150px;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
}
*/

.feature-sbj
{
	font-size: 1.2rem;
	font-weight: 600;
	text-align: left;
	margin: 1rem 0 1rem 0;
}

.feature-txt { margin: 0.5rem 0 0.5rem 0; }

.landing-box
{
	padding: 30px 0 0 0;
	text-align: left;
	background-color: #F2F2F2;
}

.lan-sbj
{
	font-size: 1.2rem;
	font-weight: bold;
}

.lan-member-box
{
	background-color: var(--main-bg-color);
	padding: 1em 10% 1em 10%;
}

.lan-btn-large
{
	font-size: 250%;
	line-height: 0.8em;
	font-style: oblique;
}

.lan-error { color: #EF2400; }

.lan-error a
{
	color: #FF0000;
	text-decoration: underline;
}

.note-box
{
	font-size: 80%;
	color: #555F73;
	background-color: var(--main-bg-color);
	margin-top: 2rem;
	padding: 1rem;
}

.note-box li { padding: 0.5rem 1.5rem 0.5rem 0; }

.os-button
{
	position: relative;
	margin: 8px;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	background-color: var(--adguard-color);
	border: 1px solid var(--adguard-color);
	overflow: visible;
}

.os-button img
{
	display: block;
	width: 100%;
}

@media (max-width: 393px)
{
	.os-button { width: 70px; }
}

@media (min-width: 394px)
{
	.os-button { width: 80px; }
}

@media (min-width: 1024px)
{
	.os-button { width: 100px; }
}

@media (min-width: 1440px)
{
	.os-button { width: 120px; }
}

#howto
{
	clear: both;
	padding-left: 4%;
	padding-right: 4%;
	background-color: var(--main-bg-color);
}

/* 
.key-box-area
{
	clear: both;
	background-color: var(--main-bg-color);
}
 */

.key-box
{
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 10px;
	padding: 4px 20px 4px 20px;
	text-align: center;
	border: 1px solid var(--main-color);
	background-color: var(--main-bg-color);
}

.course { color: var(--main-color); }

.product-sbj
{
	padding: 2rem 0 1rem 0;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
}

table, tr, th, td { border: none; }

/* 
#feature p, #feature summary, #howto p
{
	margin-top: 1rem;
	margin-bottom: 1rem;
}
 */

#howto td
{
	padding-right: 0.2em;
	vertical-align: top;
}

.step-sbj
{
	font-size: 1.3rem;
	font-weight: bold;
	margin-top: 1.1rem;
}

.step-sbj2
{
	font-size: 1rem;
	font-weight: bold;
	margin-top: 1.1rem;
}

/* 
	clear: both;
 */

}

.step-content { margin: 0 0 0 1.6rem; }
ol.terms, ol.jusetsu, p.terms { padding-left: 1.5em; }
ol.jusetsu>li { padding-top: 10px; }

ol.number
{
	padding-left: 1.5em;
	list-style-type: none;
}

ol.number li { text-indent: -1.4em; }

ol.number-zen
{
	padding-left: 1.8em;
	list-style-type: none;
}

ol.number-zen li { text-indent: -1.8em; }

ol.kana
{
	padding-left: 1.6em;
	list-style-type: none;
}

ol.kana li { text-indent: -1.6em; }

ol.round
{
	padding-left: 1em;
	list-style-type: none;
}

ol.round li { text-indent: -1em; }

ol.round-space
{
	padding-left: 1.1em;
	list-style-type: none;
}

ol.round-space li { text-indent: -1.1em; }

ol.indent-number
{
	padding-left: 1.5em;
	list-style-type: none;
}

ol.indent-number li { text-indent: -1.7em; }

ol.indent-kana
{
	padding-left: 1.8em;
	list-style-type: none;
}

ol.indent-kana li { text-indent: -1.7em; }

.top-bar
{
	border-top: 1px #999 solid;
	margin-top: 2em;
	padding-top: 1em;
}

.pf-icon
{
	padding: 8px;
	text-align: center;
}

div.product-box
{
	display: flow-root;
	border-radius: 40px;
	box-shadow: 2px 2px 4px 2px rgb(0 0 0 / 8%);
	padding: 20px 10px 20px 10px;
	margin: 40px 0 40px 0;
	color: var(--body-gray-color);
}

hr.shadow
{
	size: 1px;
	margin: 1rem;
	color: red;
	border-top: 1px var(--body-gray-color) solid;
	box-shadow: 0 1px 2px 1px rgb(0 0 0 / 10%);
}

div.product-headding
{
	display: grid;
	grid-template-columns: 1fr 8em;
	align-items: center;
	padding: 10px 10px 20px 10px;
}

img.product-logo { max-height: 32px; }

div.product-terms
{
	display: grid;
	grid-template-columns: 1fr 25% 25%;
	text-align: left;
	padding: 1rem 0 1rem 1rem;
}

@media (max-width: 743px)
{
	img.product-logo { max-width: 180px; }
}

.product-category
{
	color: var(--body-bg-color);
	border-radius: 4px;
	box-shadow: 2px 2px 4px 2px rgb(0 0 0 / 8%);
	padding: 4px;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
}

div.product-details
{
	border-radius: 30px;
	box-shadow: 2px 2px 4px 2px rgb(0 0 0 / 5%);
	margin: 10px 0 10px 0;
	padding: 20px 10px 10px 10px;
	background-color: var(--body-bg-color);
	font-size: 90%;
}

.details-sbj
{
	font-size: 1.1em;
	font-weight: bold;
}

details { margin: 8px 0; }

summary
{
	cursor: pointer;
	list-style: none;
}

summary::-webkit-details-marker { display: none; }

/* 
summary::after
{
	content: " (クリックすると開きます)";
	color: #999999;
}

details[open] summary::after { content: " ×"; }
 */

summary::before { content: "▶︎ "; }
details[open] summary::before { content: "▼ "; }

details.check ul li
{
	list-style: none;
	position: relative;
	padding-left: 0.5em;
}

details.check ul li::before
{
	content: "✔︎ ";
	position: absolute;
	left: -1em;
}

@media (min-width: 768px)
{
	img.store { height: 50px; }
}

@media (max-width: 1023px)
{
	#feature { width: 100%; }
	
	.feature-icon
	{
		width: 120px;
		height: 120px;
		float: left;
		margin-right: 30px;
		margin-bottom: 40px;
	}
	
	/* 
			.feature-sbj { text-align: left; }
			.feature-txt { text-align: left; }
		 */
	
	.lan-member-box { padding: 1em; }
}

@media (max-width: 767px)
{
	.feature-icon
	{
		width: 100px;
		height: 100px;
		margin-right: 10px;
	}
	
	/* 
			.feature-sbj { font-size: 1rem; }
		 */
}

@media (max-width: 349px)
{
	.feature-icon
	{
		width: 90px;
		height: 90px;
		margin-right: 10px;
	}
	
	.feature-txt
	{
		padding: 0px;
		font-size: 90%;
	}
}

.qr-img { padding: 1em 0 2em 0; }

/* landing & member closed */
/* common */
.container { clear: both; }
.clear { clear: both; }
.flow-root { display: flow-root; }
.red { color: #FF0000; }
.blue { color: #0000FF; }
.small { font-size: 90%; }
.smaller { font-size: 70%; }
.bold { font-weight: bold;}
.breakurl { word-break: break-all; }
.center-text { text-align: center; }
.custom-wrap { word-break: keep-all; overflow-wrap: break-word; }
a:link.orangered, a:visited.orangered { color: #FF4500; }

a:hover.orangered, a:active.orangered, a:focus.orangered
{
	color: #FF4500;
	text-decoration: underline;
}

/* common closed */
/* products */
/* AdGuard */
.adguard { color: var(--adguard-color); }
div#adguard { background-color: var(--adguard-bg-color); }

.os-button.adguard
{
	background-color: var(--adguard-color);
	border-color: var(--adguard-color);
}

div#adguard .key-box { border-color: var(--adguard-color); }

button.adguard, button.adguard:hover, button.adguard:active, button.adguard:focus
{
	background-color: var(--adguard-color);
	border: 1px solid var(--adguard-color);
}

#adguard a
{
	color: var(--adguard-color);
	font-weight: bold;
}

#adguard .product-category { background-color: var(--adguard-color); }
#adguard summary::before { color: var(--adguard-color); }
#adguard ul li::before { color: var(--adguard-color); }

/* LIXWAY */
.lixway { color: var(--lixway-color); }
div#lixway { background-color: var(--lixway-bg-color); }
div#lixway .key-box { border-color: var(--lixway-color); }

button.lixway, button.lixway:hover, button.lixway:active, button.lixway:focus
{
	background-color: var(--lixway-color);
	border-color: var(--lixway-color);
}

div.lixway-apps
{
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 40px;
	justify-content: center;
	align-items: center;
}

div.lixway-apps img { height: 40px; }

#lixway a
{
	color: var(--lixway-color);
	font-weight: bold;
}

#lixway .product-category { background-color: var(--lixway-color); }
#lixway summary::before { color: var(--lixway-color); }
#lixway ul li::before { color: var(--lixway-color); }

/* netsupport */
.netsupport { color: var(--netsupport-color); }
div#netsupport { background-color: var(--netsupport-bg-color); }
div#netsupport .key-box { border-color: var(--netsupport-color); }

div.netsupport .key-box
{
	border-color: var(--netsupport-color);
	color: var(--body-color);
}

.button.netsupport
{
	background-color: var(--netsupport-color);
	border-color: var(--netsupport-color);
}

#netsupport a
{
	color: var(--netsupport-color);
	font-weight: bold;
}

#netsupport .product-category { background-color: var(--netsupport-color); }
#netsupport summary::before { color: var(--netsupport-color); }
#netsupport ul li::before { color: var(--netsupport-color); }
div.netsupport-exception { background-color: #F5F7FA; }
ul.disc li { list-style-type: disc; }

/* product closed */