/* ========================================================================= */
/* 全体                                                                      */
/* ========================================================================= */
* {
	margin:0;
	padding:0;
	line-height:1.8em;
}

body {
	background-color:#ffffff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color:#222222;
	font-size:16px;
}

#contents {
	background-color:#ffffff;
	max-width:900px;
	margin:0 auto 0 auto;
}

h2 {
	font-size:26px;
	padding-top:25px;
	padding-bottom:15px;
}

h3 {
	font-size:22px;
	padding-top:20px;
	padding-bottom:10px;
}

p {
	padding:5px 0 5px 0;
	line-height:1.8em;
}

span {
	display:inline-block;
}

a {
	color:#222222;
}

@media screen and (max-width:900px) {
	#contents {
		margin:0 10px 0 10px;
	}
}


/* ========================================================================= */
/* 一番上                                                                    */
/* ========================================================================= */
.mosttop {
	max-width:900px;
	margin:0 auto 0 auto;
}

.mosttop .top {
	display:table;
	width:100%;
}

.mosttop .top .left {
	display:table-cell;
	width:200px;
}

.mosttop .top .mid {
	display:table-cell;
}

.mosttop .top .right {
	display:table-cell;
	width:200px;
}

.mosttop .top img {
	width:100%;
	height:120px;
}

.mosttop .menu {
	position:relative;
	top:-50px;
	display:block;
	text-align:right;
}

.mosttop .menu a {
	background-color:#ffffff;
	text-decoration:none;
	margin-right:20px;
	padding:3px 5px 3px 5px;
	border:solid 1px #444444;
	border-radius:5px;
}

.mosttop .menu a:hover {
	background-color:#eeeeee;
	transition:0.3s;
}


@media screen and (max-width:400px) {

	.mosttop .top .left {
		min-width:initial;
		width:50%;
	}

	.mosttop .top .mid {
		display:none;
	}

	.mosttop .top .right {
		min-width:initial;
		width:50%;
	}

	.mosttop .top img {
		height:initial;
	}

	.mosttop .menu {
		top:-40px;
	}

}



/* ========================================================================= */
/* タイトル                                                                  */
/* ========================================================================= */
.title {
	background:url(../img/title_back.png);
	background-repeat:no-repeat;
	background-size:100% 140%;
	position:relative;
	margin:30px 0 10px 0;
	padding-bottom:10px;
	border:solid 1px #dddddd;
	border-radius:10px;
}

.title h1 {
	font-size:34px;
	color:#006c9f;
	text-shadow:#dddddd 3px 3px 5px;
	margin:15px 0 0 60px;
}

.title .top {
	position:absolute;
	top:-40px;
	width:100%;
	margin-left:5px;
}

.title .left {
	position:absolute;
	top:0;
	margin:20px 0 0 5px;
}

.title .right {
	position:absolute;
	top:-20px;
	width:100%;
	text-align:right;
}

.title .right img { margin-right:5px; }

.title .sub {
	display:table;
	text-shadow:#dddddd 3px 3px 5px;
	margin-left:60px;

}

.title .sub div {
	display:table-cell;
	color:#ee8800;
	font-size:18px;
	font-weight:bold;
	line-height:1.3em;
}

.title .sub .l {
	white-space:nowrap;
}

.title .sub .n {
	padding-left:18px;
}


@media screen and (max-width:650px) {

	.title h1 {
		font-size:24px;
		margin-left:50px;
	}

	.title .sub {
		margin:0 auto 0 auto;
	}

	.title .sub div {
		font-size:initial;
	}

	.title .top img { width:180px; }
	.title .left img { width:40px; }
	.title .right img { width:80px; }

}


@media screen and (max-width:470px) {

	.title h1 span {
		display:block;
	}

	.title h1 .r {
		text-align:center;
	}

}

@media screen and (max-width:360px) {

	.title .sub {
		margin:0 auto 0 auto;
	}

	.title .sub .n {
		display:block;
		padding:0;
		padding-top:5px;
		text-align:right;
	}

}


/* ========================================================================= */
/* 一番下                                                                    */
/* ========================================================================= */
.mostbottom {
	padding:40px 0 10px 0;
	text-align:center;
}

.mostbottom .box_menu {

}

.mostbottom .menu {
	display:table;
	width:100%;
	table-layout:fixed;
	margin:0 auto 20px auto;
}

.mostbottom .menu li {
	display:table-cell;
}

.mostbottom .menu a {
	display:block;
	text-decoration:none;
	margin:0 10px 0 10px;
	padding:15px 0 15px 0;
	vertical-align:middle;
	line-height:1.0em;
	border:solid 1px #444444;
	border-radius:5px;
	transition:color 0.5s;
}

.mostbottom .menu a span {
	padding:0 5px 0 5px;
	line-height:1.5em;
	vertical-align:middle;
}

.mostbottom .menu a:hover {
	background-color:#eeeeee;
	transition:0.3s;
}

.mostbottom .menu a[href="#contents"] {
	margin-top:20px;
}

.mostbottom .copyright {
	margin-top:40px;
	padding:25px 0 25px 0;
	text-align:center;
}


@media screen and (max-width:650px) {

	.mostbottom .menu {
		display:block;
	}

	.mostbottom .menu li {
		display:block;
		padding:10px 0 10px 0;
	}

	.mostbottom .menu a {
		display:block;
		text-align:center;
	}

	.mostbottom .menu a .block {
		display:inline-block;
	}

	.mostbottom .menu a[href="#contents"] {
		margin-top:10px;
	}

}


/* ========================================================================= */
/* キャッチ                                                                  */
/* ========================================================================= */
.catch {
	font-size:24px;
	font-style:italic;
	text-align:center;
	margin:20px 10px 20px 10px;
}

@media screen and (max-width:350px) {

	.catch {
		font-size:22px;
	}

}



/* ========================================================================= */
/* ボタン                                                                    */
/* ========================================================================= */
input[type="submit"] {
	background:#ff8800 url(../img/back_01.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#ffffff;
	font-size:34px;
	font-weight:bold;
	text-shadow:#cc6600 3px 3px 3px;
	padding:20px;
	border:solid 1px #ff8800;
	border-radius:8px;
	cursor:pointer;

}

@media screen and (max-width:350px) {
	input[type="submit"] {
		font-size:28px;
		width:100%;
		padding:20px 0 20px 0;
	}

}


/* ========================================================================= */
/* 部品                                                                      */
/* ========================================================================= */
.box_inline {
	text-align:center;
}

.box_inline .inline {
	display:inline-block;
	text-align:left;
}


.text_left {
	text-align:left;
}

.text_center {
	text-align:center;
}

.text_right {
	text-align:right;
}


.kaiten90 {
	transform:rotate(90deg);
}

.kaiten-90 {
	transform:rotate(-90deg);
}

.block {
	display:block;
}

.underline {
	text-decoration:underline;
}



/* ========================================================================= */
/* 選択欄                                                                    */
/* ========================================================================= */
.selection {

}

.selection .list {
	margin:20px 0 40px 0;
}


.selection .list ul {
	display:block;
}

.selection .list li {
	display:table;
	width:100%;
	border-bottom:dotted 1px #999999;
}

.selection .list li .left {
	display:table-cell;
	padding:8px 0 8px 0;
}

.selection .list li .left .table {
	display:table;
	width:100%;
}

.selection .list li .left .table .i {
	display:table-cell;
	width:40px;
	padding-top:5px;
	vertical-align:middle;
}

.selection .list li .left .table .c {
	display:table-cell;
	vertical-align:middle;
}

.selection .list li .right {
	display:table-cell;
	width:140px;
	padding:8px 0 8px 0;
}

.selection .list li .right .table {
	display:table;
	width:100%;
}

.selection .list li .right .table .y {
	display:table-cell;
	padding:0 5px 0 5px;
	text-align:center;
	vertical-align:middle;
}

.selection .list li .right .table .n {
	display:table-cell;
	padding:0 5px 0 5px;
	text-align:center;
	vertical-align:middle;
}

.selection .list li .right .table input {
	width:20px;
	height:20px;
	margin-left:5px;
	vertical-align:middle;
}

.selection .bottom {
	margin-top:40px;
	text-align:center;
}


@media screen and (max-width:900px) {

	.selection .list li {
		display:block;
	}

	.selection .list li .left {
		display:block;
		width:initial;
		padding:0;
		padding-top:8px;
	}

	.selection .list li .left .table .i {
		width:30px;
		vertical-align:top;
	}

	.selection .list li .left .table .c {
		vertical-align:top;
	}

	.selection .list li .right {
		display:block;
		width:initial;
		padding:0;
		padding-bottom:8px;
	}

	.selection .list li .right .table {
		margin:0 0 0 auto;
		width:initial;
	}

}



/* ========================================================================= */
/* 結果欄                                                                    */
/* ========================================================================= */
.result {
	margin-bottom:30px;
}

.result h2 {
	background:#ff8800 url(../img/back_01.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#ffffff;
	font-size:28px;
	font-weight:bold;
	text-shadow:#cc6600 3px 3px 3px;
	text-align:center;
	margin-top:40px;
	border:solid 1px #ff8800;
	border-radius:8px;
}

.result .ymd {
	margin:15px 0 15px;
}

.result .outer_table {
	display:table;
	width:100%;
	table-layout:fixed;
	margin-bottom:10px 0 10px 0;
}

.result .outer_td {
	display:table-cell;
	padding-bottom:20px;
}

.result .outer_td .table {
	display:table;
	width:98%;
	table-layout:fixed;
	margin-bottom:5px;
}

.result .outer_td .table[data-type="心"] {
	background-color:#cc9999;
	margin-right:auto;
}

.result .outer_td .table[data-type="健康"] {
	background-color:#5f9999;
	margin-left:auto;
}

.result .outer_td .table[data-type="気"] {
	background-color:#9999cc;
	margin-right:auto;
}

.result .outer_td .table[data-type="全体"] {
	background-color:#aaaa00;
	margin-left:auto;
}

.result .outer_td .table .th {
	display:table-cell;
	color:#ffffff;
	font-size:60px;
	font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝","HGS明朝B","Raleway","Yu Gothic";
	line-height:1.0em;
	padding:10px;
	vertical-align:middle;
	text-align:left;
}

.result .outer_td .table .th span {
	text-align:center;
	line-height:0.9em;
}

.result .outer_td .table .th span span {
	display:block;
	font-size:18px;
	padding-top:5px;
}

.result .outer_td .table .td {
	display:table-cell;
	color:#ffffff;
	font-size:65px;
	font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝","HGS明朝B","Raleway","Yu Gothic";
	line-height:1.0em;
	padding:0 10px 0 10px;
	vertical-align:middle;
	text-align:right;
}

.result .outer_td .table .td span {
	font-size:30px;
	padding-left:5px;
}

.result .outer_td p {
	width:98%;
}

.result .outer_td p[data-type="心"] {
	color:#cc9999;
	margin-right:auto;
}

.result .outer_td p[data-type="健康"] {
	color:#5f9999;
	margin-left:auto;
}

.result .outer_td p[data-type="気"] {
	color:#9999cc;
	margin-right:auto;
}

.result .outer_td p[data-type="全体"] {
	color:#aaaa00;
	margin-left:auto;
}


@media screen and (max-width:900px) {

	.result h2 {
		font-size:22px;
	}

	.result .outer_table {
		display:block;
	}

	.result .outer_td {
		display:block;
	}

	.result .outer_td .table {
		width:100%;
	}

	.result .outer_td .table[data-type="心"] {
		margin:0;
	}

	.result .outer_td .table[data-type="健康"] {
		margin:0;
	}

	.result .outer_td .table[data-type="気"] {
		margin:0;
	}

	.result .outer_td .table[data-type="全体"] {
		margin:0;
	}

	.result .outer_td .table .th {
		font-size:40px;
	}

	.result .outer_td .table .td {
		font-size:45px;
	}

}




/* ========================================================================= */
/* 曲（お奨め）                                                              */
/* ========================================================================= */
.musicA {

}

.musicA h2 {
	background:#33aadd url(../img/back_02.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#ffffff;
	font-size:28px;
	font-weight:bold;
	text-shadow:#33aadd 3px 3px 3px;
	text-align:center;
	margin:40px 0 10px 0;
	border:solid 1px #33aadd;
	border-radius:8px;
}

.musicA .image {

}

.musicA .image ul {
	display:table;
	width:100%;
	table-layout:fixed;
	margin-top:30px;
}
.musicA .image .left {
	display:table-cell;
	text-align:left;
}
.musicA .image .mid {
	display:table-cell;
	text-align:center;
}

.musicA .image .right {
	display:table-cell;
	text-align:right;
}

.musicA .image img {
	width:90%;
}

.musicA .text {
	margin-top:30px;
}

.musicA .text li {
	list-style-type:none;
	background:url(../img/maru.png);
	background-repeat:no-repeat;
	background-size:25px 25px;
	padding-left:30px;
	padding-bottom:40px;
}

.musicA .text a {
	color:#006a9d;
	font-size:18px;
	line-height:1.0em;
	text-decoration:none;
}

.musicA .text a:hover {
	text-decoration:underline;
}


@media screen and (max-width:900px) {

	.musicA h2 {
		font-size:22px;
	}

}




/* ========================================================================= */
/* 曲（関係）                                                                */
/* ========================================================================= */
.musicB {
	margin-top:60px;
}

.musicB h2 {
	background:#33aadd url(../img/back_02.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#ffffff;
	font-size:28px;
	font-weight:bold;
	text-shadow:#33aadd 3px 3px 3px;
	text-align:center;
	margin:40px 0 10px 0;
	border:solid 1px #33aadd;
	border-radius:8px;
}

.musicB .text {
	margin-top:30px;
}

.musicB .text li {
	list-style-type:none;
	background:url(../img/maru.png);
	background-repeat:no-repeat;
	background-size:25px 25px;
	padding-left:30px;
	padding-bottom:40px;
}

.musicB .text a {
	color:#006a9d;
	font-size:18px;
	text-decoration:none;
	line-height:1.0em;
}

.musicB .text a:hover {
	text-decoration:underline;
}


@media screen and (max-width:900px) {

	.musicB h2 {
		font-size:22px;
	}

}