/*reset*/
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100svh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

:root {
	--base-fontsize: calc((16 * 100vw) / 1920 );
	--color1: #18313D;
	--color2: #4E7880;
	--color3: #DDAF9F;
	--color-hover1: #D39056;
	--color-hover2: #E0C173;
	--font-allura: "Allura", cursive;
}

* {
	box-sizing: border-box;
}

html,body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-size: var(--base-fontsize);
}

@media screen and (min-width: 1921px) {
	html,body {
		font-size: 16px;
	}
}

img {
	max-width: 100%;
}

body {
	background: #C7D8DD;
	padding: 3.125rem 6.25rem;
	color: var(--color1);
}

.disabled {
	opacity: 0.4;
	pointer-events: none;
}

.body-wrapper {
	background: #F1E6E1;
	width: 100%;
	height: auto;
	border-radius: 1.875rem;
	overflow: hidden;
}

@media screen and (min-width: 1921px) {
	.body-wrapper {
		max-width: 1720px;
		margin:0 auto;
	}
}

@media screen and (min-width: 1921px) and (max-height: 1000px) {
	.body-wrapper {
		overflow: scroll;
	}
}

.fixed-height .body-wrapper{
	height: calc(100svh - 6.25rem);
}

header {
	position: fixed;
	top: 5rem;
	left: 8.125rem;
}

@media screen and (min-width: 1921px) {
	header {
		left: calc((100vw - 1720px)/2 + 30px);
	}
}

@media screen and (min-width: 1921px) and (max-width: 2120px) {
	header {
		left: calc((100vw - 1720px)/2 + 30px);
	}
}

header a {
	display: flex;
	background: var(--color2);
	border-radius: 999px;
	text-decoration: none;
	color: #FFF;
	line-height: 1.375rem;
	padding: 1rem 2.375rem;
	align-items: center;
	transition: all 0.2s;
}

header a:before {
	content: "";
	background: url(img/arrow1.svg);
	width: 0.6875rem;
	height: 0.916875rem;
	background-size: cover;
	display: block;
	margin-right: 1.25rem;
}

header a:hover {
	background: var(--color-hover2);
}

main {
	display: flex;
    justify-content: center;
    overflow:scroll;
}

.fixed-height main {
	/*padding: 10.9375rem 8.125rem;*/
	height: 100%;
}

.top.fixed-height main {
	padding: 10.9375rem 8.125rem;
	height: 100%;
}

.fixed-height.height-small main {
	padding: 3rem 8.125rem;
}

@media screen and (min-width: 1600px) and (max-height: 1000px) {
	main {
		margin: 6rem 0;
	}
}

main section {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	height: 100%;
}

.fixed-height main section {
	align-content: center;
}

.title-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	width: 50%;
	padding: 13.875rem 3.4375rem 0 3.75rem;
}

.title-wrap .logo {
	width: 100%;
}

.title-wrap .title {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

.title-wrap .title > img {
	width: 6.25rem;
	margin-right: 1rem;
}

.title-wrap .title > div {
	text-align: right;
}

.title-wrap .title > div h1 {
	font-size: 3rem;
	font-family: "Zen Old Mincho", serif;
	font-weight: bold;
	margin-bottom: 1rem;
	position: relative;
	top: -0.3rem;
}

.title-wrap .title > div h2 {
	font-size: 1.375rem;
	font-weight: normal;
}

.top-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 50%;
	padding: 0 0 0 3.4375rem;
}

.top-content img {
	margin-bottom: 2.5rem;
}

.top-content p {
	font-size: 1.125rem;
	text-align: center;
	font-weight: 600;
	line-height: 2rem;
}

.start-button {
	background: var(--color1);
	font-size: 1.5rem;
	text-align: center;
	padding: 1.75rem 0;
	width: 42rem;
	border-radius: 999px;
	color: #FFF;
	text-decoration: none;
	margin-top: 5rem;
	transition: all 0.2s;
}

.start-button:hover {
	background: var(--color-hover1);
}

footer {
	position: static;
	left:0;
	bottom: 4.375rem;
	width: 100%;
	text-align: center;
	font-size: 0.8125rem;
	margin: 1.5rem 0;
}

.fixed-height footer {
	position: fixed;
	margin: unset;
}

section#content2,
section#content3,
section#content4,
section#content5,
section#content6 {
	display: none;
}

#content2 {
	width: 37.5rem;
}

.page-header {
	display: flex;
	align-items: center;
    margin: 1.5rem 0;
}
@media screen and (min-width: 1000px) {
	.page-header.wide {
		position: relative;
		left: calc((100% - var(--base-fontsize) * 45) / 2);
		width: 45rem;
	}
}

.fixed-height .page-header {
	margin: 0 0 1.5rem;
}

.page-header img {
	width: 5.75rem;
	margin-right: 1rem;
}

.page-header h2 {
	font-size: 2.3rem;
	font-family: "Zen Old Mincho", serif;
	font-weight: bold;
	text-wrap: auto;
}

.terms {
	background:#FFF;
	border: 1px var(--color1) solid;
	border-radius: 1.5rem;
	padding: 2.8125rem 1.375rem;
	height: calc(100svh - 33.5rem);
	overflow: scroll;
}

.terms h3 {
	font-size: 1.5rem;
	line-height: 2.375rem;
	text-align: center;
	margin-bottom: 2.5rem;
}

.terms p {
	text-align: left;
	font-size: 1rem;
}

.terms p a {
	color: var(--color1);
}

.consent {
	margin: 1.5625rem 0 0;
	text-align: center;
	font-size: 1.125rem;
	font-weight: bold;
	height: 1.8rem;
}

.consent input {
	margin: 0 1rem 0 0;
	position: relative;
    top: 0.25rem;
}

.upload-button {
	display: block;
	background: var(--color1);
	font-size: 1.5rem;
	text-align: center;
	padding: 1.75rem 0;
	width: 100%;
	border-radius: 999px;
	color: #FFF;
	text-decoration: none;
	margin-top: 2rem;
	margin-bottom: 3rem;
	transition: all 0.2s;
	border: none;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.upload-button:hover {
	background: var(--color-hover1);
}

#face-image {
	display: none;
}

#content3 {
	height: auto;
}

.fixed-height main section#content3 {
    align-content: unset;
}

.face-image-holder {
	position:relative;
	background:#FFF;
	width: 14.0625rem;
	height: 18.75rem;
	background-size: cover;
	margin: 0 auto;
}

.face-image-holder img{
	object-fit: contain;
    width: 100%;
    height: 100%;
}

.face-image-content {
	font-size: 1.125rem;
	text-align: center;
	font-weight: 600;
	line-height: 2rem;
	margin-top: 2rem;
}

#content3 .consent {
	cursor: pointer;
}

#content3 .consent:before {
	content:"";
	background: url(img/arrow2.png);
	background-size: cover;
	width: 1.25rem;
	height: 1.25rem;
	display:inline-block;
	position: relative;
    top: 0.2rem;
    margin-right: 0.625rem;
}

.to-question {
	display: block;
	background: var(--color1);
	font-size: 1.5rem;
	text-align: center;
	padding: 1.75rem 0;
	width: 100%;
	border-radius: 999px;
	color: #FFF;
	text-decoration: none;
	margin-top: 3rem;
	transition: all 0.2s;
}

.to-question:hover {
	background: var(--color-hover1);
}

section#q1,
section#q2,
section#q3,
section#q4,
section#q5,
section#q6,
section#q7,
section#q8,
section#q9,
section#q10,
section#q11,
section#q12,
section#q13,
section#q14,
section#q15,
section#q16,
section#q17 {
	display: none;
}

.question {
	max-width: 37.5rem;
}
@media screen and (min-width: 1600px) and (max-height: 1000px) {
	main {
		margin: 6rem 0;
	}
}

.question .page-header h2 {
	font-size: 2rem;
	position: relative;
    top: -0.4rem;
}

.question .page-header h2 small {
	font-family: var(--font-allura);
	font-size: 1.8rem;
	line-height: 2.5rem;
}

.answers {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: 0 auto;
}

.answers.format2 {
	width: 100%;
	justify-content: space-around;
}

.answer {
	width: 100%;
	margin-bottom: 1rem;
	cursor: pointer;
}

.answers.format2 .answer {
	width: calc(50% - 0.6125rem);
}

.answer img {
	border-radius: 1.875rem;
}

.answer p {
	font-size: 1.25rem;
	margin-top: 0.3rem;
	text-align: center;
}

.nav {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    width: 20rem;
    margin: 1rem auto 0;
}

.nav span {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: #fff;
	border: 0.125rem #DDAF9F solid;
	margin: 0.3125rem 0.46875rem;
}

.nav span.done {
	background: #DDAF9F;
}

.question .consent {
	cursor: pointer;
}

.question .consent:before {
	content:"";
	background: url(img/arrow2.png);
	background-size: cover;
	width: 1.25rem;
	height: 1.25rem;
	display:inline-block;
	position: relative;
    top: 0.2rem;
    margin-right: 0.625rem;
}

.to-result {
	display: block;
	background: var(--color1);
	font-size: 1.5rem;
	text-align: center;
	padding: 1.75rem 0;
	width: 100%;
	border-radius: 999px;
	color: #FFF;
	text-decoration: none;
	margin-top: 3rem;
	transition: all 0.2s;
}

.to-result:hover {
	background: var(--color-hover1);
}

#analyze {
	display: none;
}

/* 分析アニメーション */
.loader {
  position: absolute;
  top: calc(50% - 6rem);
  left: calc(50% - 6rem);
  width: 12rem;
  height: 12rem;
}

.loader div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: .6;
}

.one, .two, .three, .four {
	position: relative;
}

.one {
  border-top: 0.5rem solid #18313D;
  animation: rotate-left 2s linear infinite;
}

.two {
  border-right: 0.5rem solid #C7D8DD;
  animation: rotate-right 3s linear infinite;
}

.three {
  border-bottom: 0.5rem solid #D39056;
  animation: rotate-right 3s linear infinite;
}

.four {
  border-left: 0.5rem solid #E0C173;
  animation: rotate-right 3s linear infinite;
}

@keyframes rotate-left {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-holder {
	display: none;
	position: absolute;
  	top: calc(105%);
	font-size: 1rem;
	width: 100%;
	text-align: center;
}

.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.sp {
		display: block;
	}
	html,body {
		font-size: 15px;
	}
	body {
	    padding: 1rem 1rem;
	}
	header {
	    position: fixed;
	    top: unset;
	    bottom: 1.8rem;
	    left: 0rem;
	    z-index: 999;
	}
	header a {
		display: none;
		line-height: 1.2rem;
    	padding: 0.5rem 1.375rem 0.5rem 1rem;
    	border-top-left-radius: 0;
    	border-bottom-left-radius: 0;
	}
	header a:before {
	    margin-right: 0.8rem;
	}
	footer {
		bottom: 0rem;
    	font-size: 0.7rem;
	}
	main {
		padding: 0.8rem !important;
	}
	.top main section {
		margin-top: -2rem;
	}
	main section.question {
		margin-top: 0rem;
	}
	main section {
		width: 100% !important;
	}
	.body-wrapper {
	    height: calc(100svh - 2rem) !important;
	}
	.title-wrap {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	    flex-wrap: wrap;
	    width: 100%;
	    padding: 3rem 0 1.5rem;
	}
	.title-wrap .title {
		width: 100%;
		justify-content: space-evenly;
		margin-top: 5px;
	}
	.title-wrap .title > img {
	    width: 4rem;
	    margin-right: 0rem;
	}
	.title-wrap .title > div h1 {
		font-size: 1.6rem;
		margin-bottom: 0.4rem;
		top: 0;
	}
	.title-wrap .title > div h2 {
	    font-size: 1rem;
	}
	.top-content {
		width: 100%;
		padding: 0;
	}
	.top-content img {
	    margin-bottom: 1rem;
	}
	.top-content p {
    	font-size: 1rem;
    	line-height: 1.6rem;
    }

	.start-button,
	.upload-button,
	.to-question,
	.to-result {
		width: 100%;
		margin-top: 1.5rem;
		font-size: 1.2rem;
	    padding: 0.8rem 0;
	}

	.page-header img {
		width: 3.75rem;
		margin-right: 0.8rem;
	}
	.question .page-header img {
		position: relative;
		top: -0.3rem;
	}
	.page-header h2 {
		font-size: 1.6rem;
	}
	.terms {
	    height: calc(100svh - 23.5rem);
	}

	.face-image-content {
		font-size: 1rem;
    	line-height: 1.8rem;
    	margin-top: 1.5rem;
	}

	.consent {
	    margin: 1.5rem 0 0;
	    text-align: center;
	    font-size: 1rem;
	    font-weight: bold;
	    height: 1.6rem;
	    width: 100%;
	}

	.consent input {
		top: unset;
	}

	.question .page-header h2 {
		font-size: 1.4rem;
	}
	.question .page-header h2 small {
		font-size: 1.5rem;
    	line-height: 1.5rem;
	}
	.answers {
	    width: 75%;
	}
	.answer {
	    margin-bottom: 0.8rem;
	}
	.answer p {
		    font-size: 1.18rem;
	}
	.nav {
		margin: 0rem auto 0;
		width: 14.5rem;
	}
	.nav span {
	    width: 1rem;
	    height: 1rem;
	    margin: 0.3rem 0.3rem;
	}
	#analyze .page-header h2 {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 375px) {
	.title-wrap {
        padding: 3rem 0 0.8rem;
    }
	.title-wrap .title > div h1 {
        font-size: 1.4rem;
        margin-bottom: 0.3rem;
    }
    .title-wrap .title > div h2 {
        font-size: 0.9rem;
    }
    .top-content p,
    .face-image-content {
    	font-size: 0.8rem;
    	line-height: 1.3rem;
    }
    .title-wrap .logo {
    	position: relative;
    	top: 0.3rem;
    }
    header {
	    bottom: 1.5rem;
	}
	header a {
		line-height: 1rem;
        padding: 0.4rem 1.2rem 0.4rem 0.6rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        font-size: 0.8rem;
	}
	.start-button {
        margin-top: 1.2rem;
        font-size: 1.2rem;
        padding: 0.6rem 0;
    }
    .start-button, .upload-button, .to-question, .to-result {
        padding: 0.6rem 0;
    }
    .fixed-height .page-header {
	    margin: 0 0 1rem;
	}
    .page-header img {
		width: 3.25rem;
	}
	.page-header h2 {
		font-size: 1.4rem;
	}
	.terms {
	    height: calc(100svh - 19.5rem);
	}
	.face-image-holder {
		width: 11.8rem;
    	height: 15.75rem;
	}
	.face-image-content {
    	margin-top: 1.2rem;
    }
    .consent {
	    margin: 0.8rem 0 0;
	    font-size: 1rem;
	    height: 1.6rem;
	}
	.answer {
        margin-bottom: 0.5em;
    }
	.answer p {
        font-size: 1rem;
    }
    .terms {
	    padding: 1rem 1rem;
	}
	.terms h3 {
	    font-size: 1.3rem;
	    line-height: 2rem;
	    text-align: center;
	    margin-bottom: 2rem;
	}
	    #analyze .page-header h2 {
        font-size: 1.3rem;
    }
    .nav {
        margin: 0rem auto 0;
        width: 13.5rem;
    }
    .nav span {
        width: 0.8rem;
        height: 0.8rem;
        margin: 0.1rem 0.3rem;
    }
    main section.question {
        margin-top: 0rem;
    }
    .question .page-header h2 {
        font-size: 1.3rem;
    }
    .answers {
        width: 63%;
    }
}