@charset "UTF-8";

.TBD { background-color: yellow; }

:root {
	--main-color: darkblue;
	--main-bg-color: white;
	--body-color: black;
}

body
{
	color: var(--body-color);
	background-color: var(--main-bg-color);
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt" on;
}

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);
/* 
	padding-bottom: 1rem;
	border-bottom: 10px var(--main-color) solid;
 */
}

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

.header-copy
{
	color: var(--main-color);
	padding: 1rem 10% 0 10%;
}

@media (min-width: 768px)
{
	.header-copy-box
	{
		width: 100%;
		padding: 2rem 1rem 2rem 1rem;
		background-color: var(--main-bg-color);
	}
	.header-copy
	{
		font-size: 1.2rem;
	}
	
	.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-box
	{
		width: 100%;
		padding: 1rem;
		background-color: #F4F9F9;
	}
	.header-copy
	{
		font-size: 0.8rem;
		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-color);
		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 { padding: 40px 8px; }

.content-box
{
	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-color);
	border: 1px solid var(--main-color);
	border-radius: 8px;
	text-align: center;
	font-weight: normal;
	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;
}

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

a:link, a:visited
{
	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-color);
	border-color: var(--main-color);
}

.center-text { text-align: center; }

/* footer */
.footer-top
{
	clear: both;
	background-color: #BFBFBF;
	color: #000000;
	text-align: center;
	padding: 16px;
}

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

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

.footer-top a:hover, .footer-top a:active, .footer-top a:focus
{
	color: #000000;
	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.3rem;
	font-weight: 600;
	text-align: left;
	margin: 2rem 1rem 1rem 1rem;
	
}

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

.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
{
	clear: both;
	background-color: var(--main-bg-color);
	padding: 1em;
}

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

#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
{
	margin-top: 40px;
	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); }

.howto-sbj
{
	padding: 16px;
	text-align: center;
	color: #464952;
	font-size: 2.0rem;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0px;
}

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;
}

ol.terms, p.terms {padding-left: 1.2em;}
ol.terms ul {list-style-type: none;} 
ol.terms ul li { text-indent: -2em; }

li.indent1 {
list-style-type: none;
text-indent: -1.8em;
}
li.indent2 {
list-style-type: none;
padding-left: 2em;
text-indent: -1.8em;
}

p.num {padding-left: 1.2em; text-indent: -1.2em;}

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

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

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: " ×";
}


@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 0 1em 0; }

}

@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%;
	}
}

/* landing & member closed */

/* common */
.container { clear: both; }
.red { color: #FF0000; }
.blue { color: #0000FF; }
.small { font-size: 90%; }
.smaller { font-size: 70%; }
.breakurl { word-break: break-all; }


a:link.orangered, a:visited.orangered { color: #FF4500; }

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

/* common closed */