@charset "UTF-8";
/* CSS Document */

html, 
html * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Verdana, Geneva, "sans-serif";
}

body {
    margin-right: auto;
	margin-left: auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	background: #ffffff;
}

header {
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
}

.inbox {
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
    background-color: #FFFFFF;
	color: #000000;
    border: 1px #000000 solid;
	text-align: center;
}

footer {
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
}

h1 {
	font-family: Tahoma, Verdana, Geneva, "sans-serif";
	font-size: 32px;
    font-weight: 800;
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	text-align: center;
}

h2 {
    font-family: Tahoma, Verdana, Geneva, "sans-serif";
    font-size: 14px;
    font-weight: 800;
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	text-align: center;
}

h3 {
    font-size: 14px;
    font-weight: 800;
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	text-align: center;
}

h10 {
    font-family: Tahoma, Verdana, Geneva, "sans-serif";
	font-size: 32px;
    font-weight: 800;
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	text-align: center;
    color: #ff0000;
}
p {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Geneva, "sans-serif";
    font-size: 16px;
	font-weight: 400;
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 20px;
	text-align: start;
}

.navi {
    font-size: 10px;
    font-weight: 100;
    text-align: start;
}

.copyright {
    font-size: 10px;
    font-weight: 100;
    text-align: center;
}

.button {
    font-size: 20px;
    font-weight: 800;
	border: 2px #FFFFFF solid;
    border-radius: 30px;
    margin: 0; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 5px;
	padding-right: 30px;
	padding-bottom: 5px;
	padding-left: 30px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	text-align: center;
    background-color: #000000;
	color: #FFFFFF;
	text-decoration: none;
}

.col {
	width: 100%;
    float: left;
    margin: 0px; /* 最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}


/*Desktop View*/

@media (min-width: 960px){
    body {
		max-width:1023px;
	}
    .inbox {
        margin-top: 0px;
        margin-right: 150px;
        margin-bottom: 0px;
        margin-left: 150px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
        padding-top: 30px;
        padding-right: 40px;
        padding-bottom: 30px;
        padding-left: 40px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
    }
    .navi-box {
        margin-top: 0px;
        margin-right: 140px;
        margin-bottom: 0px;
        margin-left: 140px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
        height: 20px;
    }
}