@charset "utf-8";



/* --------------------------------------------------------------------------------
essential
-------------------------------------------------------------------------------- */

body {
	font-size: 0.875rem;
	line-height: 1.75rem;
}



/* --------------------------------------------------------------------------------
form
-------------------------------------------------------------------------------- */

input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=button],
input[type=submit],
button,
textarea,
select {
	font-size: 1rem;
}
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
select {
	height: 50px;
	line-height: calc(50px - 2px);
}
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel] {
	padding: 0px 15px;
}
input[type=button],
input[type=submit],
button {
	width: 260px;
	height: 60px;
	font-size: 1.25rem;
	border-radius: 30px;
}
textarea {
	padding: 10px 15px;
}
select {
	padding-left: 15px;
}



/* --------------------------------------------------------------------------------
misc
-------------------------------------------------------------------------------- */

br.large {
	display: none;
}
br.small {
	display: inline;
}
img.large {
	display: none;
}
img.small {
	display: block;
}
span.no-small {
	display: none;
}



/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */

header#header {
	width: auto;
	margin-bottom: 40px;
}
header#header:has(div.title-large) {
	margin-bottom: 60px;
}
header#header div.title {
	width: auto;
	padding: 20px 85px 20px 0px;
	border-radius: 0px;
}
header#header div.title p.sub {
	font-size: 1rem;
	line-height: 1.25rem;
	margin-bottom: 5px;
}
header#header div.title h1 {
	font-size: 1.375rem;
	line-height: 1.875rem;
}
header#header div.title p.type {
	width: 85px;
	height: 85px;
	left: calc(50% + 80px);
	bottom: 20px;
}
header#header div.title-large {
	padding: 20px 0px;
	border-radius: 0px;
}
header#header div.title-large p.sub {
	font-size: 1.375rem;
	line-height: 1.875rem;
}
header#header div.title-large h1 {
	font-size: 1.875rem;
	line-height: 2.5rem;
}
header#header div.title-large p.type {
	width: 85px;
	height: 85px;
	left: calc(50% + 80px);
	bottom: -30px;
	font-size: 0.875rem;
}



/* --------------------------------------------------------------------------------
main
-------------------------------------------------------------------------------- */

main {
	width: auto;
	margin-bottom: 80px;
	padding: 0px 30px;
}
main h1.headline {
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 2.25rem;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 20px;
}
main p.description {
	font-size: 1rem;
	line-height: 1.875rem;
}
main div.frame,
main div.list-questionnaire div.row {
	padding: 20px;
	border-radius: 20px;
}
main div.frame:not(:last-child),
main div.list-questionnaire:not(:last-child) {
	margin-bottom: 60px;
}
main div.list-questionnaire div.row:not(:last-child) {
	margin-bottom: 20px;
}
main div.list-questionnaire div.row div.header {
	display: block;
	margin-bottom: 20px;
}
main div.list-questionnaire div.row div.header::before {
	display: none;
}
main div.list-questionnaire div.row div.header p.number {
	justify-content: center;
	width: auto;
	font-size: 1.625rem;
	font-weight: 400;
	border-bottom: 1px solid #456ebd;
	margin-bottom: 15px;
	padding: 0px 0px 5px 0px;
}
main div.list-questionnaire div.row div.header p.number::before {
	font-size: 1.125rem;
}
main div.list-questionnaire div.row div.header h2 {
	width: auto;
	font-size: 1.25rem;
	line-height: 2.5rem;
	padding: 0px;
}
main div.list-questionnaire div.row div.header h2 ruby rt {
	font-size: 0.625rem;
	line-height: 0.625rem;
}
main div.list-questionnaire div.row div.component,
main div.list-questionnaire div.row div.answer ul {
	margin-right: -10px;
}
main div.list-questionnaire div.row div.component label,
main div.list-questionnaire div.row div.answer ul li {
	width: calc(25% - 10px);
	margin-right: 10px;
}
main div.list-questionnaire div.row div.component label span,
main div.list-questionnaire div.row div.answer ul li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	height: 67px;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1rem;
	padding-top: 35px;
	background-color: transparent;
	border-radius: 0px;
	transition: unset;
}
main div.list-questionnaire div.row div.component label span:hover,
main div.list-questionnaire div.row div.component label input[type=radio]:checked + span,
main div.list-questionnaire div.row div.answer ul li.active {
	color: #000000;
	background-color: transparent;
}
main div.list-questionnaire div.row div.component label span::before,
main div.list-questionnaire div.row div.answer ul li::before {
	position: absolute;
	width: 30px;
	height: 30px;
	left: calc(50% - 15px);
	top: 0px;
	background-color: #ebe1d2;
	content: "";
	border-radius: 50%;
	transition: 0.25s background-color ease;
}
main div.list-questionnaire div.row div.component label span:hover::before,
main div.list-questionnaire div.row div.component label input[type=radio]:checked + span::before,
main div.list-questionnaire div.row div.answer ul li.active::before {
	background-color: #966b52;
}
main div.list-questionnaire div.row div.component textarea {
	width: calc(100% - 10px);
}
main div.list-questionnaire div.row div.answer p {
	font-size: 1rem;
	padding: 10px 15px;
}

/* login
-------------------------------------------------------------------------------- */

main section#login {
	width: auto;
}
main section#login h1 {
	margin-bottom: 40px;
}
main section#login form div.component:nth-child(1) {
	margin-bottom: 20px;
}
main section#login form div.component:nth-child(2) {
	margin-bottom: 40px;
}
main section#login form div.component p.label {
	height: 50px;
	left: 15px;
}
main section#login form div.component input[type=text],
main section#login form div.component input[type=password] {
	padding-left: 120px;
}

/* questionnaire
-------------------------------------------------------------------------------- */

main section#questionnaire h1 {
	margin-bottom: 20px;
}
main section#questionnaire p.description {
	margin-bottom: 40px;
}

/* result
-------------------------------------------------------------------------------- */

main section#result div.frame div.guide-chart {
	display: flex;
	flex-wrap: wrap;
	padding-top: 20px;
	margin-bottom: 20px;
}
main section#result div.frame div.guide {
	order: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	transform: translate(0px, 0px);
}
main section#result div.frame div.guide p.color {
	font-size: 0.875rem;
	padding-left: 35px;
}
main section#result div.frame div.guide p.color:not(:last-child) {
	margin: 0px 20px 0px 0px;
}
main section#result div.frame div.guide p.color::before {
	width: 30px;
	top: 13px;
}
main section#result div.frame div.chart {
	width: calc(100% - 60px);
	margin: 0px auto 30px auto;
}
main section#result div.frame div.chart div.label p.row {
	font-size: 0.875rem;
	line-height: 1rem;
}
main section#result div.frame div.chart div.label p.row-01 {
	top: -15px;
}
main section#result div.frame div.chart div.label p.row-03,
main section#result div.frame div.chart div.label p.row-04 {
	bottom: -5px;
}
main section#result div.frame div.summary {
	margin: 0px -20px -20px -20px;
	padding: 20px;
}
main section#result div.frame div.summary p.description {
	text-align: justify;
}


/* --------------------------------------------------------------------------------
contact (相談先一覧)
-------------------------------------------------------------------------------- */

main section#result div.contact-section {
    text-align: center;
}

main section#result div.contact-section p.contact-description {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.8rem;
}

main section#result div.contact-section div.contact-list {
    margin-top: 20px;
    text-align: center;
    line-height: 1.6;
    font-size: 1.2rem;
    display: inline-block;
}

main section#result div.contact-section div.contact-list div.contact-item {
    margin-bottom: 15px;
    font-size: 1.2rem;
    text-align: left;
    display: block;
}

main section#result div.contact-section div.contact-list div.contact-item .contact-name {
    margin-bottom: 3px;
}

main section#result div.contact-section div.contact-list div.contact-item .contact-details {
    padding-left: 1em;
}

main section#result div.contact-section div.contact-list div.contact-item .contact-details p {
    margin: 3px 0;
}