@charset "utf-8";

/*----------------------------------------------------------------
 global styles
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 section
-----------------------------------------------------*/
.section					{ background: #FFF; }
.section:nth-child(even)	{ background: #eee5dc; }

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
#footer-navi .container,
#main .container{ padding: 40px 20px 30px 20px; }
@media screen and (min-width: 768px) {
#footer-navi .container,
#main .container{
	margin				: 0 auto;
	padding				: 40px 0 65px 0;
}
.section{ padding: 0 20px; }
}
@media screen and (min-width: 960px) {
#footer-navi .container,
#main .container{
	margin				: 0 auto;
	width				: 760px;
	padding				: 40px 0 65px 0;
}
.section{ padding: 0; }
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/* heading
-----------------------------------------------------*/
#main h2{
	text-align			: center;
	font-size			: 1.8rem;
	font-family			: "游明朝", YuMincho,  "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media screen and (min-width: 768px) {
#main h2{
	text-align			: left;
	font-size			: 3.6rem;
}
}

#main h3{
	text-align			: center;
	font-size			: 1.4rem;
	font-family			: "游明朝", YuMincho,  "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media screen and (min-width: 768px) {
#main h3{
	text-align			: left;
	font-size			: 1.8rem;
}
}


/* list
-----------------------------------------------------*/
#main ul,
#main ol,
#main dl{}
#main ul li,
#main ol li{
	list-style			: none;
	line-height			: 1.5;
}


/* heading
-----------------------------------------------------*/
#main hr{
	line-height: 0;
	height: 0;
	border: 0;
	border-top: 1px dotted #999;
	margin: 30px 0;
}

/* table
-----------------------------------------------------*/
/*#main table{
	font-size: 1.2rem;
	max-width: 100vw;
}

#main table th,
#main table td{
	border				: 1px solid #666;
	padding				: 0.5rem 1rem;
}
#main table th{
	background			: #ccc;
}
#main table tr:nth-child(odd) td	{ background: #eee; }
#main table tr:nth-child(even) td	{ background: #fcfcfc; }*/

/* block elements
-----------------------------------------------------*/
#main p,
#main pre{
	margin				: 0 0 20px 0;
	font-size			: 1.3rem;
}
@media screen and (min-width: 768px) {
#main p,
#main pre{
	margin				: 0 0 35px 0;
	line-height			: 2;
	font-size			: 1.6rem;
}
}

/* form parts
-----------------------------------------------------*/
#main textarea{
	max-width			: 100%;
}

/*-----------------------------------------------------
 common parts
-----------------------------------------------------*/
#main .btn{ padding: 15px 0; }
@media screen and (min-width: 768px) {
#main .btn{ padding: 20px 0; }
}
#footer-navi .btn{ padding: 30px 0; }


/* sample-list
-----------------------------------------------------*/
#main .sample-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
	margin				: -7px -7px 20px -7px;
}
.android #main .sample-list{
	margin				: -7px -14px 20px -14px;
}
#main .sample-list li{ margin: 7px; }
@media screen and (max-width: 320px) {
#main .sample-list li{ flex: calc(50% - 14px); }
}
@media screen and (min-width: 768px) {
#main .sample-list{ margin: -20px -20px 30px -20px; }
#main .sample-list li{
flex: 1;
margin: 20px; }
}

/* outline-list
-----------------------------------------------------*/
#main .outline-list{ margin: 0 0 15px 0; }
#main .outline-list ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
	justify-content		: flex-start;
	margin				: -4px;
}
#main .outline-list ul li{ margin: 4px; }
#main .outline-list li a{
	display				: inline-block;
	border				: 1px solid #3399ff;
	border-radius		: 10px;
	padding				: 5px 11px;
	font-size			: 1.3rem;
	text-decoration		: none;
	color				: #3399ff;
	transition			: all 0.5s ease 0s;
}
#main .outline-list li a:hover{
	background			: #3399ff;
	color				: #fff;
}
#main .outline-list li a:before{
	content				: "";
	font-family			: FontAwesome;
	font-size			: 1rem;
	display				: inline-block;
	margin				: 0 4px 0 0;
}

@media screen and (min-width: 768px) {
#main .outline-list{ margin: 0 0 25px 0; }
#main .outline-list ul{ justify-content: center; }
#main .outline-list li a{
	padding				: 7px 13px;
	font-size			: 1.6rem;
}
#main .outline-list li a:before{
	font-size			: 1.2rem;
	margin				: 0 7px 0 0;
}
}

/* row
-----------------------------------------------------*/
#main .row{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
}
#main .row>.col{ margin: 0 0 20px 0; }
#main .row>.col.image{ text-align: center; }
@media screen and (min-width: 768px) {
#main .row{
	flex-direction		: row;
	justify-content		: space-between;
}
#main .row>.col{ width: calc( (100% / 2) - 10px); }
}
@media screen and (min-width: 960px) {
#main .row>.col{ width: 360px; }
}

/*----------------------------------------------------------------
 outline
----------------------------------------------------------------*/
#outline{}
#outline .container	{ padding: 20px 20px 30px 20px; }
@media screen and (min-width: 768px) {
#outline .container	{ padding: 50px 0 30px 0; }
}